feat: migrate components in select to runes

Author: hperrin

MIGRATING.md

@@ -12,6 +12,7 @@ This doc contains information that will help you migrate your code from an older
 - Slots must be migrated to snippets.
 - The deprecated "MDC" events have been removed. All event names should be migrated to the corresponding "SMUI" event names.
 - The "Fixation" theme now uses Tahoma as its large header font.
+- Select no longer defaults the value to an empty string, meaning you must either set the value given to it to an empty string or provide a key function that returns an empty string for an undefined value.
 
 ## Changes
 

README.md

@@ -175,9 +175,9 @@ Svelte 5 Runes mode is being migrated to slowly. This is the todo list of compon
   - [x] Notched Outline
   - [x] Radio Button
   - [ ] Segmented Button
-  - [ ] Select Menu
-    - [ ] Select Helper Text
-    - [ ] Select Icon
+  - [x] Select Menu
+    - [x] Select Helper Text
+    - [x] Select Icon
   - [x] Slider
   - [x] Switch
   - [x] Text Field

packages/select/src/HelperFragment.svelte

@@ -1,40 +1,54 @@
-<svelte:options runes={false} />
+<svelte:options runes />
 
 <Item
   bind:this={element}
   {use}
   data-value={value}
   {value}
   {selected}
-  {...$$restProps}><slot /></Item
+  {...restProps}>{@render children?.()}</Item
 >
 
 <script lang="ts">
-  import type { ComponentProps } from 'svelte';
+  import type { ComponentProps, Snippet } from 'svelte';
   import { onMount, onDestroy, getContext, setContext } from 'svelte';
   import type { Writable } from 'svelte/store';
   import type { ActionArray } from '@smui/common/internal';
   import { Item } from '@smui/list';
 
   type OwnProps = {
+    /**
+     * An array of Action or [Action, ActionProps] to be applied to the element.
+     */
     use?: ActionArray;
+    /**
+     * A space separated list of CSS classes.
+     */
     class?: string;
+    /**
+     * The value of the input.
+     */
     value?: any;
-  };
-  type $$Props = OwnProps & Omit<ComponentProps<typeof Item>, keyof OwnProps>;
 
-  export let use: ActionArray = [];
-  const className = '';
-  export { className as class };
-  export let value: any = '';
+    children?: Snippet;
+  };
+  let {
+    use = [],
+    class: className = '',
+    value = '',
+    children,
+    ...restProps
+  }: OwnProps & Omit<ComponentProps<typeof Item>, keyof OwnProps> = $props();
 
   let element: Item;
   const selectedText = getContext<Writable<string>>('SMUI:select:selectedText');
   const selectedValue = getContext<SvelteStore<any>>('SMUI:select:value');
 
   setContext('SMUI:list:item:role', 'option');
 
-  $: selected = value != null && value !== '' && $selectedValue === value;
+  const selected = $derived(
+    value != null && value !== '' && $selectedValue === value,
+  );
 
   onMount(setSelectedText);