@getmicdrop/svelte-components 5.3.3 → 5.3.10

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

@@ -0,0 +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>

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

@@ -0,0 +1,28 @@
+export default Select;
+type Select = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Select: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Select from './Select.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Select.stories.svelte.d.ts.map

package/dist/primitives/Input/Select.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Select.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA8HA;;;;mBAAkH;mBA1H7F,iBAAiB;6CAiHO,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/primitives/Input/Select.svelte

@@ -1,6 +1,8 @@
 <script>
-  import { onMount } from "svelte";
-  import { ChevronDownOutline, CheckOutline } from "../Icons";
+  import { onMount, tick } from "svelte";
+  import { ChevronDownOutline } from "../Icons";
+  import { portal as portalAction } from "../../utils/portal.js";
+  import { typography } from "../../tokens/typography";
 
   let {
     value = $bindable(""),
@@ -13,6 +15,7 @@
     name = "",
     id = "",
     size = "md",
+    portal = false,
     onchange,
     ...restProps
   } = $props();
@@ -21,6 +24,7 @@
   let triggerElement = $state(null);
   let dropdownElement = $state(null);
   let focusedIndex = $state(-1);
+  let dropdownPosition = $state({ top: 0, left: 0, width: 0 });
 
   const instanceId = Math.random().toString(36).substring(2, 9);
 
@@ -35,12 +39,26 @@
 
   let sizeClass = $derived(sizeClasses[size] || sizeClasses.md);
 
-  function toggle() {
+  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();
+      }
     }
   }
 
@@ -112,9 +130,20 @@
   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>
@@ -122,7 +151,7 @@
 <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="text-sm font-medium text-gray-900 dark:text-white">
+      <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>
@@ -134,7 +163,7 @@
       bind:this={triggerElement}
       {id}
       {name}
-      class="flex items-center justify-between w-full {sizeClass} bg-gray-50 dark:bg-gray-700 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 ? 'text-gray-500 dark:text-gray-400' : 'text-gray-900 dark:text-white'}"
+      class="flex items-center justify-between w-full {sizeClass} bg-gray-50 dark:bg-gray-700 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}
@@ -142,10 +171,10 @@
       onkeydown={handleKeydown}
     >
       <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{displayText}</span>
-      <ChevronDownOutline class="w-4 h-4 shrink-0 text-gray-500 dark:text-gray-400 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+      <ChevronDownOutline class="w-4 h-4 shrink-0 {typography.iconMuted} transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
     </button>
 
-    {#if isOpen}
+    {#if isOpen && !portal}
       <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
       <ul
         bind:this={dropdownElement}
@@ -157,16 +186,13 @@
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
             id="{id || name}-option-{index}"
-            class="flex items-center justify-between px-4 py-2 cursor-pointer text-sm transition-colors {item.value === value ? 'font-semibold text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300'} {index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}"
+            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)}
           >
-            <span class="flex-1">{item.name}</span>
-            {#if item.value === value}
-              <CheckOutline class="w-4 h-4 shrink-0 text-blue-600" />
-            {/if}
+            {item.name}
           </li>
         {/each}
       </ul>
@@ -174,6 +200,33 @@
   </div>
 
   {#if error}
-    <p class="text-sm text-red-500">{error}</p>
+    <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/Select.svelte.d.ts

@@ -14,6 +14,7 @@ declare const Select: import("svelte").Component<{
     name?: string;
     id?: string;
     size?: string;
+    portal?: boolean;
     onchange: any;
 } & Record<string, any>, {}, "value">;
 type $$ComponentProps = {
@@ -27,6 +28,7 @@ type $$ComponentProps = {
     name?: string;
     id?: string;
     size?: string;
+    portal?: boolean;
     onchange: any;
 } & Record<string, any>;
 //# sourceMappingURL=Select.svelte.d.ts.map

package/dist/primitives/Input/Select.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Select.svelte.js"],"names":[],"mappings":";;;;;AAqKA;YA3J6B,MAAM;YAAU,GAAG,EAAE;kBAAgB,MAAM;YAAU,MAAM;eAAa,OAAO;eAAa,OAAO;YAAU,MAAM;WAAS,MAAM;SAAO,MAAM;WAAS,MAAM;cAAY,GAAG;sCA2JrJ;wBA3JlC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Select.svelte.js"],"names":[],"mappings":";;;;;AA8MA;YAhM6B,MAAM;YAAU,GAAG,EAAE;kBAAgB,MAAM;YAAU,MAAM;eAAa,OAAO;eAAa,OAAO;YAAU,MAAM;WAAS,MAAM;SAAO,MAAM;WAAS,MAAM;aAAW,OAAO;cAAY,GAAG;sCAgMvK;wBAhMlC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

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

@@ -0,0 +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>

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

@@ -0,0 +1,28 @@
+export default Textarea;
+type Textarea = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Textarea: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Textarea from './Textarea.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Textarea.stories.svelte.d.ts.map

package/dist/primitives/Input/Textarea.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Textarea.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAwGA;;;;mBAAoH;qBApG7F,mBAAmB;6CA2FG,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/primitives/Input/Textarea.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { typography } from "../../tokens/typography";
+
   let {
     value = $bindable(""),
     placeholder = "",
@@ -43,7 +45,7 @@
 
 <div class="flex flex-col gap-2 w-full">
   {#if label}
-    <label for={id || name} class="text-sm font-medium text-gray-900 dark:text-white leading-tight">
+    <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}
@@ -57,7 +59,7 @@
     {readonly}
     {maxlength}
     {minlength}
-    class="w-full p-2.5 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white text-sm 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}"
+    class="{typography.sm} w-full p-2.5 bg-gray-50 dark:bg-gray-700 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}
@@ -72,6 +74,6 @@
   ></textarea>
 
   {#if error}
-    <p class="text-sm text-red-500">{error}</p>
+    <p class={typography.error}>{error}</p>
   {/if}
 </div>

package/dist/primitives/Input/Textarea.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Textarea.svelte.js"],"names":[],"mappings":";;;;;AA8DA;YA1D6B,MAAM;kBAAgB,MAAM;WAAS,MAAM;eAAa,OAAO;eAAa,OAAO;eAAa,OAAO;SAAO,MAAM;WAAS,MAAM;YAAU,MAAM;YAAU,MAAM;gBAAc,GAAG;gBAAc,GAAG;YAAU,MAAM;aAAW,GAAG;cAAY,GAAG;YAAU,GAAG;aAAW,GAAG;eAAa,GAAG;aAAW,GAAG;gBAAc,GAAG;sCA0DlS;wBA1DpC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Textarea.svelte.js"],"names":[],"mappings":";;;;;AAkEA;YA1D6B,MAAM;kBAAgB,MAAM;WAAS,MAAM;eAAa,OAAO;eAAa,OAAO;eAAa,OAAO;SAAO,MAAM;WAAS,MAAM;YAAU,MAAM;YAAU,MAAM;gBAAc,GAAG;gBAAc,GAAG;YAAU,MAAM;aAAW,GAAG;cAAY,GAAG;YAAU,GAAG;aAAW,GAAG;eAAa,GAAG;aAAW,GAAG;gBAAc,GAAG;sCA0DlS;wBA1DpC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

package/dist/primitives/Modal/Modal.svelte

@@ -99,7 +99,19 @@
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     class="fixed inset-0 flex bg-black/50 z-50 items-end justify-center md:items-center md:p-4 touch-none overscroll-none"
-    onclick={persistent ? null : resetModal}
+    onmousedown={(e) => {
+      // Only track direct clicks on backdrop, not drags that end on backdrop
+      if (e.target === e.currentTarget && !persistent) {
+        e.currentTarget.dataset.clickStartedOnBackdrop = 'true';
+      }
+    }}
+    onmouseup={(e) => {
+      // Only close if both mousedown and mouseup were on the backdrop
+      if (e.target === e.currentTarget && e.currentTarget.dataset.clickStartedOnBackdrop === 'true' && !persistent) {
+        resetModal();
+      }
+      delete e.currentTarget.dataset.clickStartedOnBackdrop;
+    }}
     transition:fade={{ duration: 300 }}
     role="dialog"
     aria-modal="true"

package/dist/primitives/Modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA0JA;;WAZW,OAAO;mBACC,OAAO;gBACV,OAAO;WACZ,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ;iBAClC,OAAO;eACT,MAAM,IAAI;aACZ,GAAG;WACL,GAAG;aACD,GAAG;YACJ,MAAM;eAGkC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAqKA;;WAZW,OAAO;mBACC,OAAO;gBACV,OAAO;WACZ,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ;iBAClC,OAAO;eACT,MAAM,IAAI;aACZ,GAAG;WACL,GAAG;aACD,GAAG;YACJ,MAAM;eAGkC"}

package/dist/primitives/Pagination/Pagination.stories.svelte

@@ -0,0 +1,76 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Pagination from './Pagination.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Pagination',
+    component: Pagination,
+    tags: ['autodocs'],
+    argTypes: {
+      totalPages: { control: 'number' },
+      currentPage: { control: 'number' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Page navigation control for paginated data.',
+        },
+      },
+    },
+  });
+
+  let page1 = $state(1);
+  let page2 = $state(5);
+  let page3 = $state(1);
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div>
+      <Pagination totalPages={10} bind:currentPage={page1} />
+      <p class="text-sm text-gray-500 mt-4">Current page: {page1}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Middle Page">
+  {#snippet template()}
+    <div>
+      <Pagination totalPages={10} bind:currentPage={page2} />
+      <p class="text-sm text-gray-500 mt-4">Current page: {page2}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Few Pages">
+  {#snippet template()}
+    <div>
+      <Pagination totalPages={3} bind:currentPage={page3} />
+      <p class="text-sm text-gray-500 mt-4">Current page: {page3}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Many Pages">
+  {#snippet template()}
+    <Pagination totalPages={100} currentPage={50} />
+  {/snippet}
+</Story>
+
+<Story name="In Context">
+  {#snippet template()}
+    <div class="border rounded-lg p-4">
+      <h3 class="font-medium mb-4">Search Results</h3>
+      <ul class="space-y-2 mb-4">
+        {#each [1, 2, 3, 4, 5] as i}
+          <li class="p-3 border rounded hover:bg-gray-50">
+            Result item {i}
+          </li>
+        {/each}
+      </ul>
+      <div class="border-t pt-4">
+        <Pagination totalPages={20} bind:currentPage={page1} />
+      </div>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Pagination/Pagination.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default Pagination;
+type Pagination = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Pagination: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Pagination from './Pagination.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Pagination.stories.svelte.d.ts.map