docs: add full width autocomplete demo

Author: hperrin

packages/site/src/routes/demo/autocomplete/+page.svelte

@@ -48,6 +48,10 @@
     </svelte:fragment>
   </Demo>
 
+  <Demo component={FullWidth} file="autocomplete/_FullWidth.svelte">
+    Full width
+  </Demo>
+
   <Demo component={Manual} file="autocomplete/_Manual.svelte">
     Manual setup
   </Demo>
@@ -63,6 +67,7 @@
   import AddEntries from './_AddEntries.svelte';
   import AddToList from './_AddToList.svelte';
   import Async from './_Async.svelte';
+  import FullWidth from './_FullWidth.svelte';
   import Manual from './_Manual.svelte';
 </script>
 

packages/site/src/routes/demo/autocomplete/_FullWidth.svelte

@@ -0,0 +1,18 @@
+<div>
+  <Autocomplete
+    options={fruits}
+    bind:value
+    label="Fruit"
+    style="width: 100%;"
+    textfield$style="width: 100%;"
+  />
+  <pre class="status">Selected: {value || ''}</pre>
+</div>
+
+<script lang="ts">
+  import Autocomplete from '@smui-extra/autocomplete';
+
+  let fruits = ['Apple', 'Orange', 'Banana', 'Mango'];
+
+  let value: string | undefined = undefined;
+</script>