@getmicdrop/svelte-components 5.6.0 → 5.7.1

package/dist/primitives/Input/Select.stories.svelte

@@ -1,112 +1,112 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Select from './Select.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Select',
-    component: Select,
-    tags: ['autodocs'],
-    argTypes: {
-      label: { control: 'text' },
-      disabled: { control: 'boolean' },
-      required: { control: 'boolean' },
-      errorText: { control: 'text' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Native select dropdown component.',
-        },
-      },
-    },
-  });
-
-  let value = $state('');
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Country">
-        <option value="">Select a country</option>
-        <option value="us">United States</option>
-        <option value="uk">United Kingdom</option>
-        <option value="ca">Canada</option>
-        <option value="au">Australia</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Value">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Size" bind:value={value}>
-        <option value="">Choose size</option>
-        <option value="sm">Small</option>
-        <option value="md">Medium</option>
-        <option value="lg">Large</option>
-      </Select>
-      <p class="text-sm text-gray-500 mt-2">Selected: {value || 'none'}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Error">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Category" errorText="Please select a category">
-        <option value="">Select category</option>
-        <option value="comedy">Comedy</option>
-        <option value="music">Music</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Disabled">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Disabled Select" disabled>
-        <option value="">Cannot select</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Required">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Required Field" required>
-        <option value="">Choose an option</option>
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="All States">
-  {#snippet template()}
-    <div class="grid grid-cols-2 gap-6 max-w-xl">
-      <Select label="Default">
-        <option value="">Select option</option>
-        <option value="1">Option 1</option>
-      </Select>
-
-      <Select label="With Error" errorText="This field is required">
-        <option value="">Select option</option>
-        <option value="1">Option 1</option>
-      </Select>
-
-      <Select label="Disabled" disabled>
-        <option value="">Cannot select</option>
-      </Select>
-
-      <Select label="Required" required>
-        <option value="">Select option</option>
-        <option value="1">Option 1</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Select from './Select.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Select',
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: {
+      label: { control: 'text' },
+      disabled: { control: 'boolean' },
+      required: { control: 'boolean' },
+      errorText: { control: 'text' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Native select dropdown component.',
+        },
+      },
+    },
+  });
+
+  let value = $state('');
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Country">
+        <option value="">Select a country</option>
+        <option value="us">United States</option>
+        <option value="uk">United Kingdom</option>
+        <option value="ca">Canada</option>
+        <option value="au">Australia</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Value">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Size" bind:value={value}>
+        <option value="">Choose size</option>
+        <option value="sm">Small</option>
+        <option value="md">Medium</option>
+        <option value="lg">Large</option>
+      </Select>
+      <p class="text-sm text-gray-500 mt-2">Selected: {value || 'none'}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Error">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Category" errorText="Please select a category">
+        <option value="">Select category</option>
+        <option value="comedy">Comedy</option>
+        <option value="music">Music</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Disabled">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Disabled Select" disabled>
+        <option value="">Cannot select</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Required">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Required Field" required>
+        <option value="">Choose an option</option>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All States">
+  {#snippet template()}
+    <div class="grid grid-cols-2 gap-6 max-w-xl">
+      <Select label="Default">
+        <option value="">Select option</option>
+        <option value="1">Option 1</option>
+      </Select>
+
+      <Select label="With Error" errorText="This field is required">
+        <option value="">Select option</option>
+        <option value="1">Option 1</option>
+      </Select>
+
+      <Select label="Disabled" disabled>
+        <option value="">Cannot select</option>
+      </Select>
+
+      <Select label="Required" required>
+        <option value="">Select option</option>
+        <option value="1">Option 1</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Input/Select.svelte

@@ -54,30 +54,30 @@
   let displayText = $derived(selectedItem ? selectedItem.name : placeholder);
 
   let sizeClass = $derived(formControlSizes[size] || formControlSizes.md);
-
-  function updateDropdownPosition() {
-    if (!triggerElement || !portal) return;
-    const rect = triggerElement.getBoundingClientRect();
-    dropdownPosition = {
-      top: rect.bottom + 4,
-      left: rect.left,
-      width: rect.width
-    };
-  }
-
-  async function toggle() {
-    if (disabled) return;
-    isOpen = !isOpen;
-    if (isOpen) {
-      focusedIndex = items.findIndex((item) => item.value === value);
-      window.dispatchEvent(new CustomEvent('select-opened', { detail: { instanceId } }));
-      if (portal) {
-        await tick();
-        updateDropdownPosition();
-      }
-    }
-  }
-
+
+  function updateDropdownPosition() {
+    if (!triggerElement || !portal) return;
+    const rect = triggerElement.getBoundingClientRect();
+    dropdownPosition = {
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width
+    };
+  }
+
+  async function toggle() {
+    if (disabled) return;
+    isOpen = !isOpen;
+    if (isOpen) {
+      focusedIndex = items.findIndex((item) => item.value === value);
+      window.dispatchEvent(new CustomEvent('select-opened', { detail: { instanceId } }));
+      if (portal) {
+        await tick();
+        updateDropdownPosition();
+      }
+    }
+  }
+
   function handleOtherSelectOpened(event: Event) {
     const customEvent = event as CustomEvent<{ instanceId: string }>;
     if (customEvent.detail.instanceId !== instanceId && isOpen) {
@@ -143,107 +143,107 @@
       close();
     }
   }
-
-  onMount(() => {
-    document.addEventListener("click", handleClickOutside, true);
-    window.addEventListener("select-opened", handleOtherSelectOpened);
-
-    // Update position on scroll/resize when portal is enabled
-    if (portal) {
-      window.addEventListener("scroll", updateDropdownPosition, true);
-      window.addEventListener("resize", updateDropdownPosition);
-    }
-
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true);
-      window.removeEventListener("select-opened", handleOtherSelectOpened);
-      if (portal) {
-        window.removeEventListener("scroll", updateDropdownPosition, true);
-        window.removeEventListener("resize", updateDropdownPosition);
-      }
-    };
-  });
-</script>
-
-<div class="w-full flex flex-col gap-2" {...restProps}>
-  {#if label}
-    <div class="flex justify-start items-center gap-1">
-      <label for={id || name} class={typography.label}>
-        {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
-      </label>
-    </div>
-  {/if}
-
-  <div class="relative w-full">
-    <button
-      type="button"
-      bind:this={triggerElement}
-      {id}
-      {name}
-      class="flex items-center justify-between w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer transition-colors text-left focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {error ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {!selectedItem ? `${typography.textMuted}` : `${typography.body}`}"
-      {disabled}
-      aria-haspopup="listbox"
-      aria-expanded={isOpen}
-      onclick={toggle}
-      onkeydown={handleKeydown}
-    >
-      <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{displayText}</span>
-      <ChevronDownOutline class="w-4 h-4 shrink-0 {typography.iconMuted} transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
-    </button>
-
-    {#if isOpen && !portal}
-      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-      <ul
-        bind:this={dropdownElement}
-        class="absolute top-full left-0 right-0 z-50 mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
-        role="listbox"
-        tabindex="-1"
-      >
-        {#each items as item, index}
-          <!-- svelte-ignore a11y_click_events_have_key_events -->
-          <li
-            id="{id || name}-option-{index}"
-            class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
-            role="option"
-            aria-selected={item.value === value}
-            onclick={() => selectItem(item)}
-            onmouseenter={() => (focusedIndex = index)}
-          >
-            {item.name}
-          </li>
-        {/each}
-      </ul>
-    {/if}
-  </div>
-
-  {#if error}
-    <p class={typography.error}>{error}</p>
-  {/if}
-</div>
-
-{#if isOpen && portal}
-  <!-- Portal dropdown - truly moved to document.body to escape overflow containers and transforms -->
-  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-  <ul
-    bind:this={dropdownElement}
-    use:portalAction
-    class="fixed z-[9999] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
-    style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
-    role="listbox"
-    tabindex="-1"
-  >
-    {#each items as item, index}
-      <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <li
-        id="{id || name}-option-{index}"
-        class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
-        role="option"
-        aria-selected={item.value === value}
-        onclick={() => selectItem(item)}
-        onmouseenter={() => (focusedIndex = index)}
-      >
-        {item.name}
-      </li>
-    {/each}
-  </ul>
-{/if}
+
+  onMount(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    window.addEventListener("select-opened", handleOtherSelectOpened);
+
+    // Update position on scroll/resize when portal is enabled
+    if (portal) {
+      window.addEventListener("scroll", updateDropdownPosition, true);
+      window.addEventListener("resize", updateDropdownPosition);
+    }
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+      window.removeEventListener("select-opened", handleOtherSelectOpened);
+      if (portal) {
+        window.removeEventListener("scroll", updateDropdownPosition, true);
+        window.removeEventListener("resize", updateDropdownPosition);
+      }
+    };
+  });
+</script>
+
+<div class="w-full flex flex-col gap-2" {...restProps}>
+  {#if label}
+    <div class="flex justify-start items-center gap-1">
+      <label for={id || name} class={typography.label}>
+        {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
+      </label>
+    </div>
+  {/if}
+
+  <div class="relative w-full">
+    <button
+      type="button"
+      bind:this={triggerElement}
+      {id}
+      {name}
+      class="flex items-center justify-between w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer transition-colors text-left focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {error ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {!selectedItem ? `${typography.textMuted}` : `${typography.body}`}"
+      {disabled}
+      aria-haspopup="listbox"
+      aria-expanded={isOpen}
+      onclick={toggle}
+      onkeydown={handleKeydown}
+    >
+      <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{displayText}</span>
+      <ChevronDownOutline class="w-4 h-4 shrink-0 {typography.iconMuted} transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+    </button>
+
+    {#if isOpen && !portal}
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+      <ul
+        bind:this={dropdownElement}
+        class="absolute top-full left-0 right-0 z-50 mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
+        role="listbox"
+        tabindex="-1"
+      >
+        {#each items as item, index}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <li
+            id="{id || name}-option-{index}"
+            class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
+            role="option"
+            aria-selected={item.value === value}
+            onclick={() => selectItem(item)}
+            onmouseenter={() => (focusedIndex = index)}
+          >
+            {item.name}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+
+  {#if error}
+    <p class={typography.error}>{error}</p>
+  {/if}
+</div>
+
+{#if isOpen && portal}
+  <!-- Portal dropdown - truly moved to document.body to escape overflow containers and transforms -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <ul
+    bind:this={dropdownElement}
+    use:portalAction
+    class="fixed z-[9999] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
+    style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
+    role="listbox"
+    tabindex="-1"
+  >
+    {#each items as item, index}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <li
+        id="{id || name}-option-{index}"
+        class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
+        role="option"
+        aria-selected={item.value === value}
+        onclick={() => selectItem(item)}
+        onmouseenter={() => (focusedIndex = index)}
+      >
+        {item.name}
+      </li>
+    {/each}
+  </ul>
+{/if}