fix: move menu style in class

Author: fiorelorenzo

packages/autocomplete/Autocomplete.svelte

@@ -185,6 +185,12 @@
   }
 </script>
 
+<style>
+  * :global(.smui-autocomplete-menu) {
+    width: 100%;
+  }
+</style>
+
 <div on:blur|capture={blurClear} use:Anchor bind:this={anchorElement}>
   <div
     on:focus|capture={() => {
@@ -207,7 +213,7 @@
       }} />
   </div>
   <Menu
-    class={menu$class}
+    class="smui-autocomplete-menu {menu$class}"
     bind:this={menu}
     bind:open={menuIsOpen}
     anchor={menu$anchor}
@@ -223,8 +229,7 @@
     }}
     on:mouseleave={() => {
       shouldClearOnBlur = true;
-    }}
-    style="width:100%;">
+    }}>
     <List {...prefixFilter($$props, 'list$')} on:keydown={handleListKeydown}>
       {#if loading}
         <slot name="loading">

site/src/routes/demo/autocomplete.svelte

@@ -13,15 +13,15 @@
       label: "Two",
     },
     {
-      id: 1,
+      id: 2,
       label: "Three",
     },
     {
       id: 3,
       label: "Four",
     },
     {
-      id: 5,
+      id: 4,
       label: "Five",
     },
   ];
@@ -93,38 +93,40 @@
 <section>
   <h2>Autocomplete</h2>
 
-  <div class="columns margins">
-    <div>
-      Simple:<br />
-      <Autocomplete
-        options={fruits}
-        bind:value={valueSimple}
-        label="Fruit"
-        class="demo-autocomplete-width" />
-      <pre class="status">Selected: {valueSimple || ''}</pre>
-    </div>
+  <div>
+    <div class="columns margins">
+      <div>
+        Simple:<br />
+        <Autocomplete
+          options={fruits}
+          bind:value={valueSimple}
+          label="Fruit"
+          class="demo-autocomplete-width" />
+        <pre class="status">Selected: {valueSimple || ''}</pre>
+      </div>
 
-    <div>
-      Prefilled:<br />
-      <Autocomplete
-        options={fruits}
-        bind:value={valuePrefilled}
-        label="Fruit"
-        class="demo-autocomplete-width" />
-      <pre class="status">Selected: {valuePrefilled || ''}</pre>
-    </div>
+      <div>
+        Prefilled:<br />
+        <Autocomplete
+          options={fruits}
+          bind:value={valuePrefilled}
+          label="Fruit"
+          class="demo-autocomplete-width" />
+        <pre class="status">Selected: {valuePrefilled || ''}</pre>
+      </div>
 
-    <div>
-      Objects:<br />
-      <Autocomplete
-        options={objects}
-        getOptionLabel={(option) => `${option.label} (${option.id})`}
-        bind:value={valueObjects}
-        label="Objects"
-        class="demo-autocomplete-width" />
-
-      <pre
-        class="status">Selected: {valueObjects ? JSON.stringify(valueObjects) : ''}</pre>
+      <div>
+        Objects:<br />
+        <Autocomplete
+          options={objects}
+          getOptionLabel={(option) => `${option.label} (${option.id})`}
+          bind:value={valueObjects}
+          label="Objects"
+          class="demo-autocomplete-width" />
+
+        <pre
+          class="status">Selected: {valueObjects ? JSON.stringify(valueObjects) : ''}</pre>
+      </div>
     </div>
   </div>