@getmicdrop/svelte-components 5.4.2 → 5.5.0

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}

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

@@ -1,137 +1,137 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Textarea from './Textarea.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Textarea',
-    component: Textarea,
-    tags: ['autodocs'],
-    argTypes: {
-      label: { control: 'text' },
-      placeholder: { control: 'text' },
-      rows: { control: 'number' },
-      disabled: { control: 'boolean' },
-      required: { control: 'boolean' },
-      maxlength: { control: 'number' },
-      errorText: { control: 'text' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Multi-line text input component.',
-        },
-      },
-    },
-  });
-
-  let value = $state('');
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Description"
-        placeholder="Enter your description..."
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Value">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Bio"
-        placeholder="Tell us about yourself..."
-        bind:value={value}
-      />
-      <p class="text-sm text-gray-500 mt-2">{value.length} characters</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Max Length">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Short Bio"
-        placeholder="Keep it brief..."
-        maxlength={200}
-        helperText="Maximum 200 characters"
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Error">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Comments"
-        placeholder="Enter your comments..."
-        errorText="Please provide at least 10 characters"
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Custom Rows">
-  {#snippet template()}
-    <div class="space-y-6 max-w-md">
-      <Textarea
-        label="Small (2 rows)"
-        placeholder="Two rows..."
-        rows={2}
-      />
-      <Textarea
-        label="Medium (4 rows)"
-        placeholder="Four rows..."
-        rows={4}
-      />
-      <Textarea
-        label="Large (8 rows)"
-        placeholder="Eight rows..."
-        rows={8}
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Disabled">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Disabled Textarea"
-        placeholder="Cannot edit this..."
-        disabled
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="All States">
-  {#snippet template()}
-    <div class="grid grid-cols-2 gap-6 max-w-2xl">
-      <Textarea
-        label="Default"
-        placeholder="Enter text..."
-      />
-      <Textarea
-        label="With Error"
-        placeholder="Enter text..."
-        errorText="This field is required"
-      />
-      <Textarea
-        label="Disabled"
-        placeholder="Cannot edit..."
-        disabled
-      />
-      <Textarea
-        label="With Helper"
-        placeholder="Enter text..."
-        helperText="Optional additional information"
-      />
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Textarea from './Textarea.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Textarea',
+    component: Textarea,
+    tags: ['autodocs'],
+    argTypes: {
+      label: { control: 'text' },
+      placeholder: { control: 'text' },
+      rows: { control: 'number' },
+      disabled: { control: 'boolean' },
+      required: { control: 'boolean' },
+      maxlength: { control: 'number' },
+      errorText: { control: 'text' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Multi-line text input component.',
+        },
+      },
+    },
+  });
+
+  let value = $state('');
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Description"
+        placeholder="Enter your description..."
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Value">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Bio"
+        placeholder="Tell us about yourself..."
+        bind:value={value}
+      />
+      <p class="text-sm text-gray-500 mt-2">{value.length} characters</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Max Length">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Short Bio"
+        placeholder="Keep it brief..."
+        maxlength={200}
+        helperText="Maximum 200 characters"
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Error">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Comments"
+        placeholder="Enter your comments..."
+        errorText="Please provide at least 10 characters"
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Custom Rows">
+  {#snippet template()}
+    <div class="space-y-6 max-w-md">
+      <Textarea
+        label="Small (2 rows)"
+        placeholder="Two rows..."
+        rows={2}
+      />
+      <Textarea
+        label="Medium (4 rows)"
+        placeholder="Four rows..."
+        rows={4}
+      />
+      <Textarea
+        label="Large (8 rows)"
+        placeholder="Eight rows..."
+        rows={8}
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Disabled">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Disabled Textarea"
+        placeholder="Cannot edit this..."
+        disabled
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All States">
+  {#snippet template()}
+    <div class="grid grid-cols-2 gap-6 max-w-2xl">
+      <Textarea
+        label="Default"
+        placeholder="Enter text..."
+      />
+      <Textarea
+        label="With Error"
+        placeholder="Enter text..."
+        errorText="This field is required"
+      />
+      <Textarea
+        label="Disabled"
+        placeholder="Cannot edit..."
+        disabled
+      />
+      <Textarea
+        label="With Helper"
+        placeholder="Enter text..."
+        helperText="Optional additional information"
+      />
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Input/Textarea.svelte

@@ -68,38 +68,38 @@
     onfocus?.(event);
   }
 </script>
-
-<div class="flex flex-col gap-2 w-full">
-  {#if label}
-    <label for={id || name} class={`${typography.label} leading-tight`}>
-      {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
-    </label>
-  {/if}
-
-  <textarea
-    {id}
-    {name}
-    {placeholder}
-    {rows}
-    {disabled}
-    {readonly}
-    {maxlength}
-    {minlength}
-    class="{typography.sm} w-full p-2.5 bg-gray-50 dark:bg-gray-800 leading-normal border rounded-lg resize-y transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
-    bind:value
-    oninput={handleInput}
-    onchange={handleChange}
-    onblur={handleBlur}
-    onfocus={handleFocus}
-    {onkeydown}
-    {onkeyup}
-    {onkeypress}
-    aria-required={required}
-    aria-invalid={!!error}
-    {...restProps}
-  ></textarea>
-
-  {#if error}
-    <p class={typography.error}>{error}</p>
-  {/if}
-</div>
+
+<div class="flex flex-col gap-2 w-full">
+  {#if label}
+    <label for={id || name} class={`${typography.label} leading-tight`}>
+      {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
+    </label>
+  {/if}
+
+  <textarea
+    {id}
+    {name}
+    {placeholder}
+    {rows}
+    {disabled}
+    {readonly}
+    {maxlength}
+    {minlength}
+    class="{typography.sm} w-full p-2.5 bg-gray-50 dark:bg-gray-800 leading-normal border rounded-lg resize-y transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
+    bind:value
+    oninput={handleInput}
+    onchange={handleChange}
+    onblur={handleBlur}
+    onfocus={handleFocus}
+    {onkeydown}
+    {onkeyup}
+    {onkeypress}
+    aria-required={required}
+    aria-invalid={!!error}
+    {...restProps}
+  ></textarea>
+
+  {#if error}
+    <p class={typography.error}>{error}</p>
+  {/if}
+</div>