@getmicdrop/svelte-components 5.3.2 → 5.3.6

package/dist/primitives/Skeleton/Skeleton.stories.svelte

@@ -0,0 +1,151 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Skeleton from './Skeleton.svelte';
+  import ImagePlaceholder from './ImagePlaceholder.svelte';
+  import CardPlaceholder from './CardPlaceholder.svelte';
+  import ListPlaceholder from './ListPlaceholder.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Skeleton',
+    component: Skeleton,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: 'Loading placeholder components that animate while content loads.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="Basic Lines">
+  {#snippet template()}
+    <div class="space-y-2 max-w-md">
+      <Skeleton class="h-4 w-full" />
+      <Skeleton class="h-4 w-3/4" />
+      <Skeleton class="h-4 w-1/2" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Paragraph">
+  {#snippet template()}
+    <div class="space-y-3 max-w-lg">
+      <Skeleton class="h-6 w-1/3" />
+      <div class="space-y-2">
+        <Skeleton class="h-4 w-full" />
+        <Skeleton class="h-4 w-full" />
+        <Skeleton class="h-4 w-5/6" />
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Avatar + Text">
+  {#snippet template()}
+    <div class="flex items-center gap-4">
+      <Skeleton class="h-12 w-12 rounded-full" />
+      <div class="space-y-2 flex-1">
+        <Skeleton class="h-4 w-32" />
+        <Skeleton class="h-3 w-48" />
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Image Placeholder">
+  {#snippet template()}
+    <div class="max-w-sm">
+      <ImagePlaceholder />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Card Placeholder">
+  {#snippet template()}
+    <div class="max-w-sm">
+      <CardPlaceholder />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="List Placeholder">
+  {#snippet template()}
+    <div class="max-w-md">
+      <ListPlaceholder />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Grid of Cards">
+  {#snippet template()}
+    <div class="grid grid-cols-3 gap-4">
+      <CardPlaceholder />
+      <CardPlaceholder />
+      <CardPlaceholder />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Page Layout Loading">
+  {#snippet template()}
+    <div class="space-y-6 max-w-2xl">
+      <!-- Header -->
+      <div class="flex items-center justify-between">
+        <Skeleton class="h-8 w-48" />
+        <Skeleton class="h-10 w-24 rounded-lg" />
+      </div>
+
+      <!-- Stats -->
+      <div class="grid grid-cols-3 gap-4">
+        {#each [1, 2, 3] as _}
+          <div class="border rounded-lg p-4">
+            <Skeleton class="h-4 w-20 mb-2" />
+            <Skeleton class="h-8 w-16" />
+          </div>
+        {/each}
+      </div>
+
+      <!-- Table -->
+      <div class="border rounded-lg">
+        <div class="border-b p-4 flex gap-4">
+          <Skeleton class="h-4 w-24" />
+          <Skeleton class="h-4 w-32" />
+          <Skeleton class="h-4 w-20" />
+        </div>
+        <ListPlaceholder />
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All Variants">
+  {#snippet template()}
+    <div class="space-y-8">
+      <div>
+        <h3 class="text-sm font-medium text-gray-700 mb-3">Basic Skeleton</h3>
+        <div class="space-y-2 max-w-md">
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-4 w-3/4" />
+          <Skeleton class="h-4 w-1/2" />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-3 gap-6">
+        <div>
+          <h3 class="text-sm font-medium text-gray-700 mb-3">Image Placeholder</h3>
+          <ImagePlaceholder />
+        </div>
+        <div>
+          <h3 class="text-sm font-medium text-gray-700 mb-3">Card Placeholder</h3>
+          <CardPlaceholder />
+        </div>
+        <div>
+          <h3 class="text-sm font-medium text-gray-700 mb-3">List Placeholder</h3>
+          <ListPlaceholder />
+        </div>
+      </div>
+    </div>
+  {/snippet}
+</Story>

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

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

package/dist/primitives/Skeleton/Skeleton.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Skeleton/Skeleton.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAqKA;;;;mBAAoH;qBAjK7F,mBAAmB;6CAwJG,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/Tabs/Tabs.stories.svelte

@@ -0,0 +1,112 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Tabs from './Tabs.svelte';
+  import TabItem from './TabItem.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Tabs',
+    component: Tabs,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: 'Tabbed content navigation component. Use TabItem children for each tab panel.',
+        },
+      },
+    },
+  });
+
+  let activeTab = $state(0);
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <Tabs>
+      <TabItem title="Profile">
+        <div class="p-4">
+          <h3 class="font-medium mb-2">Profile Settings</h3>
+          <p class="text-gray-600">Manage your profile information and preferences.</p>
+        </div>
+      </TabItem>
+      <TabItem title="Account">
+        <div class="p-4">
+          <h3 class="font-medium mb-2">Account Settings</h3>
+          <p class="text-gray-600">Manage your account security and billing.</p>
+        </div>
+      </TabItem>
+      <TabItem title="Notifications">
+        <div class="p-4">
+          <h3 class="font-medium mb-2">Notification Settings</h3>
+          <p class="text-gray-600">Configure how you receive notifications.</p>
+        </div>
+      </TabItem>
+    </Tabs>
+  {/snippet}
+</Story>
+
+<Story name="Controlled">
+  {#snippet template()}
+    <div>
+      <p class="text-sm text-gray-500 mb-4">Active tab: {activeTab}</p>
+      <Tabs bind:activeTab={activeTab}>
+        <TabItem title="Tab 1">
+          <div class="p-4">Content for Tab 1</div>
+        </TabItem>
+        <TabItem title="Tab 2">
+          <div class="p-4">Content for Tab 2</div>
+        </TabItem>
+        <TabItem title="Tab 3">
+          <div class="p-4">Content for Tab 3</div>
+        </TabItem>
+      </Tabs>
+      <div class="mt-4 flex gap-2">
+        <button
+          class="px-3 py-1 bg-gray-200 rounded text-sm"
+          onclick={() => activeTab = 0}
+        >Go to Tab 1</button>
+        <button
+          class="px-3 py-1 bg-gray-200 rounded text-sm"
+          onclick={() => activeTab = 2}
+        >Go to Tab 3</button>
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Icons">
+  {#snippet template()}
+    <Tabs>
+      <TabItem title="🏠 Home">
+        <div class="p-4">Home tab content</div>
+      </TabItem>
+      <TabItem title="⚙️ Settings">
+        <div class="p-4">Settings tab content</div>
+      </TabItem>
+      <TabItem title="👤 Profile">
+        <div class="p-4">Profile tab content</div>
+      </TabItem>
+    </Tabs>
+  {/snippet}
+</Story>
+
+<Story name="Many Tabs">
+  {#snippet template()}
+    <Tabs>
+      <TabItem title="Overview">
+        <div class="p-4">Overview content</div>
+      </TabItem>
+      <TabItem title="Analytics">
+        <div class="p-4">Analytics content</div>
+      </TabItem>
+      <TabItem title="Reports">
+        <div class="p-4">Reports content</div>
+      </TabItem>
+      <TabItem title="Notifications">
+        <div class="p-4">Notifications content</div>
+      </TabItem>
+      <TabItem title="Settings">
+        <div class="p-4">Settings content</div>
+      </TabItem>
+    </Tabs>
+  {/snippet}
+</Story>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Tabs/Tabs.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAwHA;;;;mBAAgH;iBApH7F,eAAe;6CA2GW,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/Tabs/Tabs.svelte

@@ -81,7 +81,7 @@
 
   // Tab button classes by style
   function getTabClasses(isActive: boolean) {
-    const base = "inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800";
+    const base = "inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-none";
 
     switch (tabStyle) {
       case 'underline':

package/dist/primitives/Toggle.svelte

@@ -28,21 +28,21 @@
     onchange?.({ checked });
   }
 
-  // Flowbite toggle sizes
+  // Flowbite toggle sizes - thumb uses after: pseudo-element
   const sizes = {
     sm: {
       track: 'w-9 h-5',
-      thumb: 'h-4 w-4 after:top-0.5 after:start-0.5',
+      thumb: 'after:h-4 after:w-4 after:top-0.5 after:start-0.5',
       translate: 'peer-checked:after:translate-x-full'
     },
     md: {
       track: 'w-11 h-6',
-      thumb: 'h-5 w-5 after:top-0.5 after:start-0.5',
+      thumb: 'after:h-5 after:w-5 after:top-0.5 after:start-0.5',
       translate: 'peer-checked:after:translate-x-full'
     },
     lg: {
       track: 'w-14 h-7',
-      thumb: 'h-6 w-6 after:top-0.5 after:start-1',
+      thumb: 'after:h-6 after:w-6 after:top-0.5 after:start-0.5',
       translate: 'peer-checked:after:translate-x-full'
     }
   };

package/dist/primitives/ValidationError.spec.js

@@ -74,6 +74,30 @@ describe('ValidationError Component', () => {
     });
     const alert = container.querySelector('[role="alert"]');
     expect(alert.classList.contains('flex')).toBe(true);
-    expect(alert.classList.contains('items-center')).toBe(true);
+    expect(alert.classList.contains('items-start')).toBe(true);
+  });
+
+  it('has aria-live="assertive" for screen reader announcements', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.getAttribute('aria-live')).toBe('assertive');
+  });
+
+  it('renders with id when provided', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message', id: 'my-error-id' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.getAttribute('id')).toBe('my-error-id');
+  });
+
+  it('does not render id when not provided', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.getAttribute('id')).toBeFalsy();
   });
 });

package/dist/primitives/ValidationError.stories.svelte

@@ -10,6 +10,7 @@
     argTypes: {
       error: { control: 'text' },
       show: { control: 'boolean' },
+      id: { control: 'text' },
     },
   });
 
@@ -85,3 +86,26 @@
     <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Validation error is hidden until field is touched</p>
   </div>
 </Story>
+
+<Story name="Accessible with aria-describedby">
+  <div class="max-w-md">
+    <label for="accessible-email" class="block text-sm font-medium mb-1">Email Address</label>
+    <input
+      id="accessible-email"
+      type="email"
+      aria-describedby="email-error"
+      aria-invalid="true"
+      class="w-full px-3 py-2 border border-red-300 rounded focus:ring-red-500 focus:border-red-500"
+      value="invalid-email"
+    />
+    <ValidationError
+      id="email-error"
+      error="Please enter a valid email address"
+      show={true}
+    />
+    <p class="text-sm text-gray-500 mt-4">
+      This example shows proper accessibility: the input references the error via aria-describedby,
+      and the error has aria-live="assertive" for screen reader announcements.
+    </p>
+  </div>
+</Story>

package/dist/primitives/ValidationError.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationError.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/ValidationError.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAyFA;;;;mBAA2H;4BApF7F,0BAA0B;6CA2EX,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"}
+{"version":3,"file":"ValidationError.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/ValidationError.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAsGA;;;;mBAA2H;4BAjG7F,0BAA0B;6CAwFX,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/ValidationError.svelte

@@ -8,18 +8,22 @@
     error?: string;
     /** Whether to show the error */
     show?: boolean;
+    /** Optional ID for aria-describedby linking from input fields */
+    id?: string;
   }
 
-  let { error = '', show = true }: Props = $props();
+  let { error = '', show = true, id }: Props = $props();
 </script>
 
 {#if error && show}
   <div
     transition:slide={{ duration: 300, easing: cubicOut }}
-    class="flex items-center gap-1.5 text-red-600 dark:text-red-500 mt-2"
+    class="flex items-start gap-1.5 text-red-600 dark:text-red-500 mt-2"
     role="alert"
+    aria-live="assertive"
+    {id}
   >
-    <WarningIcon className="shrink-0" />
-    <p class="text-sm font-medium">{error}</p>
+    <WarningIcon className="shrink-0 mt-[1px]" />
+    <p class="text-sm leading-tight m-0">{error}</p>
   </div>
 {/if}

package/dist/primitives/ValidationError.svelte.d.ts

@@ -3,6 +3,8 @@ interface Props {
     error?: string;
     /** Whether to show the error */
     show?: boolean;
+    /** Optional ID for aria-describedby linking from input fields */
+    id?: string;
 }
 declare const ValidationError: import("svelte").Component<Props, {}, "">;
 type ValidationError = ReturnType<typeof ValidationError>;

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

@@ -1 +1 @@
-{"version":3,"file":"ValidationError.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/ValidationError.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAmBH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ValidationError.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/ValidationError.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iEAAiE;IACjE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAmBH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/recipes/CropImage/CropImage.svelte

@@ -39,8 +39,8 @@
     }
   });
 
-  function handleCropComplete(e: CustomEvent<{ pixels: { x: number; y: number; width: number; height: number } }>) {
-    croppedAreaPixels = e.detail.pixels;
+  function handleCropComplete(e: { pixels: { x: number; y: number; width: number; height: number } }) {
+    croppedAreaPixels = e.pixels;
     isLoading = false;
   }
 
@@ -161,7 +161,7 @@
               minZoom={1}
               maxZoom={3}
               showGrid={true}
-              on:cropcomplete={handleCropComplete}
+              onCropComplete={handleCropComplete}
             />
           </div>
 

package/dist/recipes/SuperLogin/SuperLogin.svelte

@@ -690,15 +690,14 @@
 
                 <!-- Password field - slides between slot 2 and slot 3 -->
                 <div class="password-field-container">
-                  <div class="mb-2">
+                  <div class="mb-2 password-field-wrapper">
                     <div class="flex justify-between items-center mb-2">
                       <label
                         for="password"
                         class="block text-sm font-medium text-gray-900 dark:text-white"
                       >Password</label>
-                      <Button variant="link" onclick={() => { view = "reset"; }}>
-                        Forgot your password?
-                      </Button>
+                      <!-- Placeholder to maintain layout - actual button is after input for tab order -->
+                      <span class="forgot-password-placeholder"></span>
                     </div>
                     <Input
                       id="password"
@@ -707,6 +706,10 @@
                       type="password"
                       autocomplete="current-password"
                     />
+                    <!-- Forgot password button: after input in DOM for correct tab order, positioned visually in label row -->
+                    <Button variant="link" type="button" class="forgot-password-btn" onclick={() => { view = "reset"; }}>
+                      Forgot your password?
+                    </Button>
                   </div>
                 </div>
 
@@ -788,8 +791,10 @@
 
             <div class="space-y-3">
               {#each accounts as account}
-                <button
-                  class="w-full flex items-center p-4 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-left group"
+                <Button
+                  variant="card"
+                  size="md"
+                  class="group"
                   onclick={() => handleAccountSelectInternal(account)}
                 >
                   <div
@@ -837,7 +842,7 @@
                       />
                     </svg>
                   </div>
-                </button>
+                </Button>
               {/each}
             </div>
 
@@ -1088,12 +1093,10 @@
                   > if it is an email on file.
                 </p>
                 <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed text-left">
-                  Please check again. If you still haven't received an email, <button
-                    type="button"
-                    class="text-blue-600 font-medium dark:text-blue-400"
+                  Please check again. If you still haven't received an email, <Button
+                    variant="link"
                     onclick={handleTryDifferentEmail}
-                    >try a different email</button
-                  >.
+                  >try a different email</Button>.
                 </p>
               {:else}
                 <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed text-left">
@@ -1108,17 +1111,8 @@
                 </p>
                 <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed text-left">
                   If you haven't received an email in 5 minutes, check your
-                  spam, <button
-                    type="button"
-                    class="text-blue-600 font-medium dark:text-blue-400"
-                    onclick={handleResend}>resend</button
-                  >, or
-                  <button
-                    type="button"
-                    class="text-blue-600 font-medium dark:text-blue-400"
-                    onclick={handleTryDifferentEmail}
-                    >try a different email</button
-                  >.
+                  spam, <Button variant="link" onclick={handleResend}>resend</Button>, or
+                  <Button variant="link" onclick={handleTryDifferentEmail}>try a different email</Button>.
                 </p>
               {/if}
             </div>
@@ -1211,6 +1205,23 @@
     margin-bottom: 0;
   }
 
+  /* Password field tab order fix: button after input in DOM, positioned visually in label row */
+  .password-field-wrapper {
+    position: relative;
+  }
+
+  .password-field-wrapper :global(.forgot-password-btn) {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .forgot-password-placeholder {
+    /* Invisible placeholder to maintain label row height */
+    display: inline-block;
+    height: 1em;
+  }
+
   /* Card fade-in animation */
   .card-hidden {
     opacity: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"SuperLogin.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/SuperLogin/SuperLogin.svelte.js"],"names":[],"mappings":";;;;;AAy9BA;iBA76BkC,MAAM;cAAY,MAAM;cAAY,MAAM;kBAAgB,MAAM;kBAAgB,OAAO;gBAAc,MAAM;gBAAc,MAAM;iBAAe,MAAM;0BAAwB,MAAM;wBAAsB,MAAM;aAAW,MAAM;;;;;yBAAoI,OAAO;mBAAiB,MAAM;WA66B1W;wBA76BtC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,eAAe,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,kBAAkB,CAAC,WAAW;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE"}
+{"version":3,"file":"SuperLogin.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/SuperLogin/SuperLogin.svelte.js"],"names":[],"mappings":";;;;;AA49BA;iBAh7BkC,MAAM;cAAY,MAAM;cAAY,MAAM;kBAAgB,MAAM;kBAAgB,OAAO;gBAAc,MAAM;gBAAc,MAAM;iBAAe,MAAM;0BAAwB,MAAM;wBAAsB,MAAM;aAAW,MAAM;;;;;yBAAoI,OAAO;mBAAiB,MAAM;WAg7B1W;wBAh7BtC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,eAAe,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,kBAAkB,CAAC,WAAW;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE"}

package/dist/recipes/feedback/EmptyState/EmptyState.svelte

@@ -32,7 +32,8 @@
 <div class="flex flex-col items-center justify-center px-6 py-10 text-center {className}">
   {#if icon || imageSrc}
     {#if iconType === 'component' && icon}
-      <svelte:component this={icon} class="mb-3 text-gray-400 dark:text-gray-500 {iconSize}" />
+      {@const IconComponent = icon}
+      <IconComponent class="mb-3 text-gray-400 dark:text-gray-500 {iconSize}" />
     {:else if iconType === 'image' && imageSrc}
       <img src={imageSrc} alt="" class="mb-3 {iconSize}" />
     {/if}

package/dist/recipes/feedback/EmptyState/EmptyState.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/feedback/EmptyState/EmptyState.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGtC,UAAU,KAAK;IACb,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACjC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiCH,QAAA,MAAM,UAAU,0BAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"EmptyState.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/feedback/EmptyState/EmptyState.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGtC,UAAU,KAAK;IACb,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACjC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkCH,QAAA,MAAM,UAAU,0BAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/recipes/inputs/MultiSelect.svelte

@@ -165,8 +165,8 @@
         {#if hasSelection}
           <div class="flex flex-wrap gap-1.5">
             {#each selectedItems as item}
-              <span class="inline-flex items-center px-2 py-1 text-sm font-medium text-blue-800 bg-blue-100 rounded dark:bg-blue-900 dark:text-blue-300">
-                <span class="overflow-hidden text-ellipsis whitespace-nowrap">{item.name}</span>
+              <span class="inline-flex items-center px-2 py-1 text-sm font-medium bg-blue-100 rounded dark:bg-blue-900">
+                <span class="overflow-hidden text-ellipsis whitespace-nowrap text-gray-900 dark:text-white" style="color-scheme: light dark;">{item.name}</span>
                 <button
                   type="button"
                   class="inline-flex items-center p-0.5 ms-1.5 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300"