@getmicdrop/svelte-components 5.3.6 → 5.3.10

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.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.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { ChevronLeftOutline, ChevronRightOutline } from "../Icons";
+  import { typography } from "../../tokens/typography";
 
   interface Props {
     currentPage?: number;
@@ -112,8 +113,8 @@
 
 {#if variant === 'table'}
   <div class="flex flex-col items-center gap-3 sm:flex-row sm:justify-between {className}" {...restProps}>
-    <span class="text-sm text-gray-700 dark:text-gray-400">
-      Showing <span class="font-semibold text-gray-900 dark:text-white">{startItem}</span> to <span class="font-semibold text-gray-900 dark:text-white">{endItem}</span> of <span class="font-semibold text-gray-900 dark:text-white">{totalItems}</span> entries
+    <span class={`${typography.sm} text-gray-700 dark:text-gray-400`}>
+      Showing <span class={`font-semibold ${typography.sm}`}>{startItem}</span> to <span class={`font-semibold ${typography.sm}`}>{endItem}</span> of <span class={`font-semibold ${typography.sm}`}>{totalItems}</span> entries
     </span>
     <nav class="inline-flex -space-x-px rtl:space-x-reverse" aria-label="Pagination">
       {#if effectiveShowPrevNext}

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAmMH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAoMH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/primitives/Tabs/Tabs.svelte

@@ -2,6 +2,7 @@
   import type { Snippet } from 'svelte';
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
+  import { typography } from "../../tokens/typography";
 
   interface Props {
     tabStyle?: 'underline' | 'pills' | 'full';
@@ -74,9 +75,9 @@
 
   // Tab list classes by style
   const tabListClasses = {
-    underline: "flex flex-wrap -mb-px text-sm font-medium text-center border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-none",
-    pills: "flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400 gap-2",
-    full: "flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400 divide-x divide-gray-200 dark:divide-gray-700 rounded-lg shadow overflow-hidden"
+    underline: `flex flex-wrap -mb-px ${typography.sm} font-medium text-center border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-none`,
+    pills: `flex flex-wrap ${typography.smMuted} font-medium text-center gap-2`,
+    full: `flex flex-wrap ${typography.smMuted} font-medium text-center divide-x divide-gray-200 dark:divide-gray-700 rounded-lg shadow overflow-hidden`
   };
 
   // Tab button classes by style

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAoHH,QAAA,MAAM,IAAI,yDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMpC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAqHH,QAAA,MAAM,IAAI,yDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/recipes/CropImage/CropImage.svelte

@@ -2,6 +2,7 @@
   import Cropper from 'svelte-easy-crop';
   import { CloseOutline, MinusOutline, PlusOutline } from "../../primitives/Icons";
   import Button from '../../primitives/Button/Button.svelte';
+  import { typography } from '../../tokens/typography';
 
   interface Props {
     /** Whether to show the modal */
@@ -36,6 +37,7 @@
       zoom = 1;
       croppedAreaPixels = null;
       isLoading = true;
+      isSaving = false; // Reset saving state when modal opens with new image
     }
   });
 
@@ -67,7 +69,10 @@
       const image = new Image();
       image.addEventListener('load', () => resolve(image));
       image.addEventListener('error', (error) => reject(error));
-      image.setAttribute('crossOrigin', 'anonymous');
+      // Only set crossOrigin for non-blob URLs (blob URLs don't need CORS)
+      if (!url.startsWith('blob:')) {
+        image.setAttribute('crossOrigin', 'anonymous');
+      }
       image.src = url;
     });
   }
@@ -133,7 +138,7 @@
     <div class="relative w-full max-w-lg max-h-full">
       <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-800">
         <div class="flex items-center justify-between p-4 border-b border-gray-200 rounded-t-lg dark:border-gray-600">
-          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+          <h3 class={typography.h2}>
             Crop image
           </h3>
           <Button
@@ -150,7 +155,7 @@
           <div class="relative w-full aspect-square sm:aspect-[4/3] max-h-80 sm:max-h-96 bg-gray-800 rounded-lg overflow-hidden">
             {#if isLoading}
               <div class="absolute inset-0 flex items-center justify-center bg-gray-200 dark:bg-gray-700 z-10">
-                <span class="text-sm text-gray-500 dark:text-gray-400">Loading...</span>
+                <span class={typography.smMuted}>Loading...</span>
               </div>
             {/if}
             <Cropper
@@ -161,11 +166,11 @@
               minZoom={1}
               maxZoom={3}
               showGrid={true}
-              onCropComplete={handleCropComplete}
+              oncropcomplete={handleCropComplete}
             />
           </div>
 
-          <p class="text-sm text-gray-500 dark:text-gray-400 text-center">
+          <p class={`${typography.smMuted} text-center`}>
             Drag to position. Pinch or use slider to zoom.
           </p>
 

package/dist/recipes/CropImage/CropImage.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CropImage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/CropImage/CropImage.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA2KH,QAAA,MAAM,SAAS,iEAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CropImage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/CropImage/CropImage.svelte.ts"],"names":[],"mappings":"AASE,UAAU,KAAK;IACb,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAgLH,QAAA,MAAM,SAAS,iEAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/recipes/ImageUploader/ImageUploader.stories.svelte

@@ -0,0 +1,125 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ImageUploader from './ImageUploader.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Recipes/ImageUploader',
+    component: ImageUploader,
+    tags: ['autodocs'],
+    argTypes: {
+      shape: {
+        control: 'select',
+        options: ['square', 'wide'],
+        description: 'Shape of the dropzone/images',
+      },
+      maxImages: {
+        control: { type: 'number', min: 1, max: 12 },
+        description: 'Maximum number of images (1 for single mode)',
+      },
+      enableCrop: {
+        control: 'boolean',
+        description: 'Enable cropping step after file selection',
+      },
+      enableReorder: {
+        control: 'boolean',
+        description: 'Enable drag-to-reorder in multi-image mode',
+      },
+      showMainBadge: {
+        control: 'boolean',
+        description: 'Show "Main" badge on first image in multi mode',
+      },
+    },
+  });
+
+  // Mock upload function
+  async function mockUpload(file) {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    return URL.createObjectURL(file);
+  }
+
+  // Sample images for demo
+  const sampleImages = [
+    'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop',
+    'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
+    'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
+  ];
+</script>
+
+<!-- Single Square (Default) - Uses args pattern -->
+<Story
+  name="Single Square (Default)"
+  args={{
+    images: '',
+    maxImages: 1,
+    shape: 'square',
+    onUpload: mockUpload,
+    helperText: 'Upload a profile picture',
+  }}
+/>
+
+<!-- Wide Dropzone (Event Poster) -->
+<Story
+  name="Wide Dropzone (Event Poster)"
+  args={{
+    images: '',
+    maxImages: 1,
+    shape: 'wide',
+    enableCrop: true,
+    cropAspectRatio: '16:9',
+    onUpload: mockUpload,
+    helperText: 'Recommended size: 1920x1080 or 16:9 aspect ratio',
+  }}
+/>
+
+<!-- Multi-Image Grid (Performer Photos) -->
+<Story
+  name="Multi-Image Grid (Performer Photos)"
+  args={{
+    images: [],
+    maxImages: 6,
+    shape: 'square',
+    enableCrop: true,
+    enableReorder: true,
+    showMainBadge: true,
+    onUpload: mockUpload,
+    helperText: 'Upload up to 6 photos. Drag to reorder.',
+  }}
+/>
+
+<!-- Pre-populated -->
+<Story
+  name="Pre-populated"
+  args={{
+    images: sampleImages,
+    maxImages: 6,
+    shape: 'square',
+    enableReorder: true,
+    showMainBadge: true,
+    onUpload: mockUpload,
+    helperText: 'These images came from props',
+  }}
+/>
+
+<!-- Disabled State -->
+<Story
+  name="Disabled"
+  args={{
+    images: sampleImages.slice(0, 2),
+    maxImages: 6,
+    shape: 'square',
+    disabled: true,
+    helperText: 'This uploader is disabled',
+  }}
+/>
+
+<!-- With Error -->
+<Story
+  name="With Error"
+  args={{
+    images: '',
+    maxImages: 1,
+    shape: 'square',
+    onUpload: mockUpload,
+    error: 'File is too large. Maximum size is 10MB.',
+  }}
+/>

package/dist/recipes/ImageUploader/ImageUploader.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default ImageUploader;
+type ImageUploader = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ImageUploader: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import ImageUploader from './ImageUploader.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=ImageUploader.stories.svelte.d.ts.map

package/dist/recipes/ImageUploader/ImageUploader.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploader.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/ImageUploader/ImageUploader.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAyHA;;;;mBAAyH;0BArH7F,wBAAwB;6CA4GP,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"}