autocomplete & select upgraded

docs-src/components/autocomplete/Autocomplete.svelte

@@ -39,6 +39,15 @@
 			is used inside dialogs/popups), because it makes the component less accessible
 			(the list container is rendered directly in the <em>&lt;body&gt;</em>, and not next to the input).</p>
 
+		<h3>Label</h3>
+		<Autocomplete data="{autocompleteData}" label="Autocomplete label" />
+
+		<h3>Info</h3>
+		<Autocomplete data="{autocompleteData}" label="Autocomplete label" info="Select something here" />
+
+		<h3>Error</h3>
+		<Autocomplete data="{autocompleteData}" label="Autocomplete label" error="You picked the wrong side!" />
+
 	</div>
 	<div class="docs-column">
 		<h2>Selected value: </h2>
@@ -62,20 +71,23 @@ import { CodeExample } from '../../code-example';
 const apiProps = [
 	{ name: 'allowNew', type: ['true', 'false'], default: 'false', description: 'Whether to allow arbitrary values (that don\'t exist in the list).' },
 	{ name: 'class', type: 'string', description: 'Additional css class name to be added to the component.' },
-	{ name: 'clearOnEsc', type: ['true', 'false'], default: 'false', description: 'If <i>true</i> - the input will be cleared when Escape is pressed.' },
+	{ name: 'clearOnEsc', type: ['true', 'false'], default: 'false', description: 'If <i>true</i> - the autocomplete will be cleared when Escape is pressed.' },
 	{ name: 'data', type: 'array', required: true, description: 'An array of strings or objects in the following format: <code>&lbrace; name: string, id?: string | number, group?: string &rbrace;</code>(<i>name</i> should be unique, or - if <i>id</i> is present - <i>id</i> should be unique).' },
-	{ name: 'disabled', description: 'Make the input disabled.' },
+	{ name: 'disabled', description: 'Make the autocomplete disabled.' },
 	{ name: 'elevate', type: ['true', 'false'], default: 'false', description: 'If <i>true</i> - the popup will be rendered into the <i>body</i>, to ensure it\'s not hidden under some elements (see example above).' },
 	{ name: 'hideOnResize', type: ['true', 'false'], default: 'false', description: 'If <i>true</i> - resizing the window will close the popup.' },
 	{ name: 'hideOnScroll', type: ['true', 'false'], default: 'false', description: 'If <i>true</i> - scrolling the window will close the popup.' },
 	{ name: 'id', type: 'string', description: 'Assign ID to the underlying input.' },
+	{ name: 'info', type: 'string', description: 'Show info message above the autocomplete.' },
+	{ name: 'error', type: 'string', description: 'Error message to show above the autocomplete.' },
+	{ name: 'label', type: 'string', description: 'Label for the autocomplete.' },
 	{ name: 'name', type: 'string', description: 'Assign title to the underlying input.' },
 	{ name: 'placeholder', type: 'string', description: 'Shows placeholder text.' },
-	{ name: 'required', description: 'Mark the input as <i>required</i> for form submission.' },
-	{ name: 'showAllInitially', type: ['true', 'false'], default: 'true', description: 'When the input has a value - the list in the poput is filtered by the input value.<br>If this option is set to true (default) - when user navigates to the input (with a value)<br> or clicks such an input - the poput initially will show all items unfiltered, and only once<br> user starts typing - the list will be filtered again.<br> If this value is set to <i>"false"</i> (or boolean <i>false</i>) - the list will always be filtered. ' },
-	{ name: 'showOnFocus', type: ['true', 'false'], default: 'false', description: 'If <i>true</i> - the popup will be automatically open when the input gets focus (as opposed to, when the user starts typing).' },
+	{ name: 'required', description: 'Mark the autocomplete as <i>aria-required</i>.' },
+	{ name: 'showAllInitially', type: ['true', 'false'], default: 'true', description: 'When the autocomplete has a value - the list in the poput is filtered by the autocomplete value.<br>If this option is set to true (default) - when user navigates to the autocomplete (with a value)<br> or clicks such an autocomplete - the poput initially will show all items unfiltered, and only once<br> user starts typing - the list will be filtered again.<br> If this value is set to <i>"false"</i> (or boolean <i>false</i>) - the list will always be filtered. ' },
+	{ name: 'showOnFocus', type: ['true', 'false'], default: 'false', description: 'If <i>true</i> - the popup will be automatically open when the autocomplete gets focus (as opposed to, when the user starts typing).' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying input.' },
-	{ name: 'value', type: ['string', 'number'], description: 'Initial value of the input.' },
+	{ name: 'value', type: ['string', 'number'], description: 'Initial value of the autocomplete.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },
 	{ name: 'on:keydown', type: 'function', description: 'Triggered when a key is down.' },
 ];

docs-src/components/input-math/InputMath.svelte

@@ -34,7 +34,7 @@ const apiProps = [
 	{ name: 'label', type: 'string', description: 'Label for the input.' },
 	{ name: 'name', type: 'string', description: 'Assign title to the underlying input.' },
 	{ name: 'placeholder', type: 'string', description: 'Assign placeholder to the underlying input.' },
-	{ name: 'required', description: 'Mark the input as <i>required</i> for form submission and effectively shows it as invalid, until filled.' },
+	{ name: 'required', description: 'Mark the input as <i>aria-required</i>.' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying input.' },
 	{ name: 'value', type: ['string', 'number'], description: 'Initial value of the input.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },

docs-src/components/select/Select.svelte

@@ -20,6 +20,16 @@
 <Select placeholder="Please select..." items="{stringItems}" bind:value="{val}"/> Selected value: {val}
 
 
+<h3>Label</h3>
+<Select items="{selectItems}" label="Select label" />
+
+<h3>Info</h3>
+<Select items="{selectItems}" label="Select label" info="Select something here" />
+
+<h3>Error</h3>
+<Select items="{selectItems}" label="Select label" error="You picked the wrong side!" />
+
+
 <CodeExample html="{exampleHtml}" />
 
 <API props="{apiProps}"/>
@@ -33,14 +43,17 @@ let val = 'Beta';
 
 const apiProps = [
 	{ name: 'class', type: 'string', description: 'Additional css class name to be added to the component.' },
-	{ name: 'disabled', description: 'Make the input disabled.' },
-	{ name: 'id', type: 'string', description: 'Assign ID to the underlying input.' },
+	{ name: 'disabled', description: 'Make the select disabled.' },
+	{ name: 'id', type: 'string', description: 'Assign ID to the underlying select.' },
+	{ name: 'info', type: 'string', description: 'Show info message above the select.' },
+	{ name: 'error', type: 'string', description: 'Error message to show above the select.' },
+	{ name: 'label', type: 'string', description: 'Label for the select.' },
 	{ name: 'items', type: 'array', required: true, description: 'An array of strings or objects in the following format: <code>&lbrace; name: string, id?: string | number, group?: string &rbrace;</code>(<i>name</i> should be unique, or - if <i>id</i> is present - <i>id</i> should be unique).' },
-	{ name: 'name', type: 'string', description: 'Assign title to the underlying input.' },
+	{ name: 'name', type: 'string', description: 'Assign title to the underlying select.' },
 	{ name: 'placeholder', type: 'string', description: 'Adds an item to the beginning of the options list.' },
-	{ name: 'required', description: 'Mark the input as <i>required</i> for form submission and effectively shows it as invalid, until an option is selected.' },
-	{ name: 'title', type: 'string', description: 'Assign title to the underlying input.' },
-	{ name: 'value', type: ['string', 'number'], description: 'Initial value of the input.<br>If the list is an array of strings - it would match the item,<br>if the list is an array of objects - it should match the id of the item. ' },
+	{ name: 'required', description: 'Mark the select as <i>aria-required</i>.' },
+	{ name: 'title', type: 'string', description: 'Assign title to the underlying select.' },
+	{ name: 'value', type: ['string', 'number'], description: 'Initial value of the select.<br>If the list is an array of strings - it would match the item,<br>if the list is an array of objects - it should match the id of the item. ' },
 	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },
 ];
 

docs-src/nav/Nav.svelte

@@ -22,10 +22,10 @@
 		<NavItem name="Button" {active} />
 		<NavItem name="Push Button" {active} />
 		<NavItem name="Button Group" {active} />
-		<NavItem name="Button Toggle" {active} />
 
 		<h3>Inputs</h3>
 		<NavItem name="Autocomplete" {active} />
+		<NavItem name="Button Toggle" {active} />
 		<NavItem name="Checkbox" {active} />
 		<NavItem name="Datepicker" {active} />
 		<NavItem name="Input Text" {active} />