@getmicdrop/svelte-components 5.9.4 → 5.10.0

package/dist/calendar/Calendar/MiniMonthCalendar.svelte

@@ -644,7 +644,7 @@
 
       <div class="flex items-center gap-2">
         <button
-          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
           class:scale-90={prevPressed}
           class:bg-gray-100={prevPressed}
           class:dark:bg-gray-700={prevPressed}
@@ -663,7 +663,7 @@
 
         {#if showTodayButton}
           <button
-            class="text-sm font-medium px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent text-gray-900 dark:text-white cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed"
+            class="text-sm font-medium px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent text-gray-900 dark:text-white cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed"
             class:scale-95={todayPressed}
             class:bg-blue-700={todayPressed}
             class:text-white={todayPressed}
@@ -682,7 +682,7 @@
         {/if}
 
         <button
-          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
+          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
           class:scale-90={nextPressed}
           class:bg-gray-100={nextPressed}
           class:dark:bg-gray-700={nextPressed}

package/dist/calendar/MonthSwitcher/MonthSwitcher.svelte

@@ -69,7 +69,7 @@
   </h2>
   <div class="flex items-center gap-2">
     <button
-      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
       class:scale-90={prevPressed}
       class:bg-gray-100={prevPressed}
       class:dark:bg-gray-700={prevPressed}
@@ -88,7 +88,7 @@
       <ChevronLeftOutline class="w-5 h-5" />
     </button>
     <button
-      class="{`${typography.label} px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:text-gray-500 dark:disabled:text-gray-400`}"
+      class="{`${typography.label} px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:text-gray-500 dark:disabled:text-gray-400`}"
       class:scale-95={todayPressed}
       class:bg-blue-700={todayPressed}
       class:text-white={todayPressed}
@@ -105,7 +105,7 @@
       Today
     </button>
     <button
-      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
+      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
       class:scale-90={nextPressed}
       class:bg-gray-100={nextPressed}
       class:dark:bg-gray-700={nextPressed}

package/dist/calendar/PublicCard/PublicCard.svelte

@@ -73,7 +73,7 @@
 {#each events as event}
   <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
   <article
-    class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer overflow-hidden transition-all duration-200 hover:shadow-lg hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 relative {view === 'col'
+    class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer overflow-hidden transition-all duration-200 hover:shadow-lg hover:border-gray-300 dark:hover:border-gray-600 focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 relative {view === 'col'
       ? 'flex flex-col'
       : 'grid grid-cols-[100px_1fr] sm:grid-cols-[160px_1fr] gap-3 sm:gap-4 p-3 sm:p-4'}"
     onclick={() => handleEventClick(event)}
@@ -85,7 +85,7 @@
     <div
       class="bg-gray-100 dark:bg-gray-700 flex items-center justify-center overflow-hidden {view === 'col'
         ? 'w-full aspect-[4/3] rounded-t-lg'
-        : 'w-24 h-24 sm:w-40 sm:h-32 rounded-lg flex-shrink-0'}"
+        : 'w-24 h-24 sm:w-40 sm:h-32 rounded-lg shrink-0'}"
     >
       <img
         src={event.image || placeholder}

package/dist/calendar/ShowCard/ShowCard.svelte

@@ -83,7 +83,7 @@
         {event.name || ''}
       </h2>
       <button
-        class="flex-shrink-0 p-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 relative"
+        class="shrink-0 p-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 relative"
         aria-label="Share event"
         onclick={handleShare}
       >

package/dist/components/Layout/ContentSection.svelte

@@ -67,7 +67,7 @@
         {/if}
       </div>
       {#if actions}
-        <div class="flex items-center gap-3 flex-shrink-0">
+        <div class="flex items-center gap-3 shrink-0">
           {@render actions()}
         </div>
       {/if}

package/dist/patterns/forms/FormValidationSummary.svelte

@@ -60,7 +60,7 @@
               <Button
                 variant="link"
                 size="sm"
-                class="!text-red-600 dark:!text-red-500 hover:!text-red-900 dark:hover:!text-red-400"
+                class="text-red-600! dark:text-red-500! hover:text-red-900! dark:hover:text-red-400!"
                 onclick={() => scrollToField(field.elementId)}
               >
                 {field.label}

package/dist/patterns/layout/Sidebar.svelte

@@ -22,17 +22,17 @@
 
 <div class="flex flex-col lg:flex-row gap-6 {className}">
   {#if sidebarPosition === 'left'}
-    <aside class="w-full {widthClasses[sidebarWidth]} flex-shrink-0">
+    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
       {@render sidebar?.()}
     </aside>
-    <main class="w-full {mainWidthClasses[sidebarWidth]} flex-grow min-w-0">
+    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
       {@render children?.()}
     </main>
   {:else}
-    <main class="w-full {mainWidthClasses[sidebarWidth]} flex-grow min-w-0">
+    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
       {@render children?.()}
     </main>
-    <aside class="w-full {widthClasses[sidebarWidth]} flex-shrink-0">
+    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
       {@render sidebar?.()}
     </aside>
   {/if}

package/dist/patterns/navigation/Header.svelte

@@ -217,7 +217,7 @@
       transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
     >
       <div class="flex justify-center pt-3 pb-2">
-        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
+        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-xs"></div>
       </div>
 
       <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">

package/dist/patterns/page/PageLayout.svelte

@@ -21,7 +21,7 @@
     <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
       <Breadcrumb data={breadcrumb} {title} {subtitle} />
       {#if actions}
-        <div class="flex items-center gap-3 flex-shrink-0">
+        <div class="flex items-center gap-3 shrink-0">
           {@render actions()}
         </div>
       {/if}

package/dist/primitives/Accordion/AccordionItem.spec.js

@@ -233,10 +233,10 @@ describe('AccordionItem - Accessibility', () => {
     });
   });
 
-  test('button has focus:outline-none for custom focus styling', () => {
+  test('button has focus:outline-hidden for custom focus styling', () => {
     const { container } = render(AccordionItemWrapper);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('focus:outline-none');
+    expect(button).toHaveClass('focus:outline-hidden');
   });
 
   test('button is keyboard accessible', async () => {

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -61,7 +61,7 @@
     typography.smMuted,
     "bg-gray-100 dark:bg-gray-800",
     "hover:bg-gray-200 dark:hover:bg-gray-700",
-    "focus:outline-none",
+    "focus:outline-hidden",
     "gap-3",
     isOpen ? "bg-gray-100 dark:bg-gray-800" : "",
   ].join(" "));

package/dist/primitives/Badges/Badge.svelte

@@ -92,7 +92,7 @@ let variantClasses = $derived(
   onclick={(e) => onclick?.(e)}
 >
   {#if showDot}
-    <span class="w-1.5 h-1.5 rounded-full bg-current flex-shrink-0"></span>
+    <span class="w-1.5 h-1.5 rounded-full bg-current shrink-0"></span>
   {/if}
   {@render leftIcon?.()}
   {@render children?.()}

package/dist/primitives/Breadcrumb/Breadcrumb.svelte

@@ -45,11 +45,14 @@
             {#if index > 0}
               <ChevronRightOutline class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" />
             {/if}
-            {#if index === data.length - 1}
-              <span class={`ms-1 ${typography.smMuted} font-medium md:ms-2 max-w-48 truncate`} title={crumb.name}>
+            {#if index === 0 && showHomeIcon && data.length === 1}
+              <!-- Single item with home icon - show as non-clickable label -->
+              <span class="{typography.smMuted} inline-flex items-center font-medium">
+                <HomeSolid class="w-3 h-3 me-2.5" />
                 {crumb.name}
               </span>
             {:else if index === 0 && showHomeIcon}
+              <!-- First item with home icon - clickable link -->
               <a
                 href={crumb.href}
                 onclick={() => handleClick(crumb)}
@@ -58,7 +61,13 @@
                 <HomeSolid class="w-3 h-3 me-2.5" />
                 {crumb.name}
               </a>
+            {:else if index === data.length - 1}
+              <!-- Last item - non-clickable -->
+              <span class={`ms-1 ${typography.smMuted} font-medium md:ms-2 max-w-48 truncate`} title={crumb.name}>
+                {crumb.name}
+              </span>
             {:else}
+              <!-- Middle items - clickable links -->
               <a
                 href={crumb.href}
                 onclick={() => handleClick(crumb)}

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Breadcrumb/Breadcrumb.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,6BAA6B;IAC7B,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC3C;AAkEH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Breadcrumb/Breadcrumb.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,6BAA6B;IAC7B,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC3C;AA2EH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/primitives/Button/Button.svelte

@@ -118,8 +118,8 @@
     // Chart row - for leaderboard/chart list items with progress bars
     "chart-row": "w-full text-left text-gray-900 bg-transparent border-transparent hover:bg-gray-50 dark:text-white dark:hover:bg-gray-800",
     // Landing page hero buttons - prominent CTAs with shadow
-    landing: "text-white bg-blue-600 border border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:border-blue-600 dark:hover:bg-blue-700 no-underline hover:no-underline shadow-sm hover:shadow-md",
-    "landing-secondary": "text-gray-700 bg-white border border-gray-200 hover:border-gray-400 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:text-gray-100 no-underline hover:no-underline shadow-sm hover:shadow-md",
+    landing: "text-white bg-blue-600 border border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:border-blue-600 dark:hover:bg-blue-700 no-underline hover:no-underline shadow hover:shadow-md",
+    "landing-secondary": "text-gray-700 bg-white border border-gray-200 hover:border-gray-400 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:text-gray-100 no-underline hover:no-underline shadow hover:shadow-md",
   };
 
   // Active state classes for ghost, toggle, menu-item, and nav
@@ -188,7 +188,7 @@ let sizeClass = $derived((() => {
       : "inline-flex items-center justify-center",
     roundedClass,
     "font-medium leading-none",
-    "focus:outline-none",
+    "focus:outline-hidden",
     // Apple-style micro-interactions (only when not disabled)
     "transition-all duration-150 ease-out",
     effectiveDisabled ? "" : "active:scale-[0.97] active:opacity-90",

package/dist/primitives/Button/ButtonGroup.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <div
-  class="inline-flex rounded-lg shadow-sm {className}"
+  class="inline-flex rounded-lg shadow {className}"
   role="group"
 >
   {#if children}

package/dist/primitives/Checkbox/Checkbox.spec.js

@@ -140,10 +140,10 @@ describe('Checkbox Input Styling', () => {
     expect(input).toHaveClass('dark:border-gray-600');
   });
 
-  test('has focus:outline-none', () => {
+  test('has focus:outline-hidden', () => {
     const { container } = render(Checkbox);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('focus:outline-none');
+    expect(input).toHaveClass('focus:outline-hidden');
   });
 
   test('has cursor-pointer when not disabled', () => {

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -56,7 +56,7 @@
     "w-4 h-4 rounded",
     "bg-gray-100 border-gray-300",
     "dark:bg-gray-700 dark:border-gray-600",
-    "focus:outline-none",
+    "focus:outline-hidden",
     colorClass,
     disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
   ].join(" "));

package/dist/primitives/DarkModeToggle.spec.js

@@ -112,7 +112,7 @@ describe("DarkModeToggle Component Tests", () => {
   test("Button has focus outline removed", () => {
     setupTest();
     const button = screen.getByRole("button");
-    expect(button).toHaveClass("focus:outline-none");
+    expect(button).toHaveClass("focus:outline-hidden");
   });
 
   test("Button click handler is called on interaction", async () => {

package/dist/primitives/Dropdown/Dropdown.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount, onDestroy, tick, setContext } from "svelte";
   import type { Snippet } from "svelte";
+  import { bloom } from "../../utils/transitions.js";
 
   interface Props {
     open?: boolean;
@@ -143,6 +144,14 @@
     left: "right-full top-0 mr-1",
     right: "left-full top-0 ml-1"
   };
+
+  // Map placement to transform origin for bloom animation
+  const placementOrigins: Record<string, string> = {
+    bottom: "top left",
+    top: "bottom left",
+    left: "top right",
+    right: "top left"
+  };
 </script>
 
 {#if open}
@@ -151,6 +160,7 @@
     class="absolute z-10 bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-44 dark:bg-gray-700 dark:divide-gray-600 {className}"
     role="menu"
     aria-label={ariaLabel}
+    transition:bloom={{ origin: placementOrigins[placement] || "top left" }}
     {...restProps}
   >
     <ul bind:this={dropdownRef} class="py-2 text-sm text-gray-700 dark:text-gray-200">

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAoJH,QAAA,MAAM,QAAQ,+CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA6JH,QAAA,MAAM,QAAQ,+CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/primitives/Input/Input.svelte

@@ -293,7 +293,7 @@
         onfocus={handleFocus}
         {maxlength}
         {minlength}
-        class="{typography.sm} w-full px-3 py-2 bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 resize-y {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {getContentFloatClass()} {getTextareaSizeClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''}"
+        class="{typography.sm} w-full px-3 py-2 bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-300 resize-y {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {getContentFloatClass()} {getTextareaSizeClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''}"
         required={false}
         {disabled}
         {readonly}
@@ -301,7 +301,7 @@
         aria-required={required}
       ></textarea>
     {:else if type === "password" && showPasswordToggle}
-      <div class="flex items-center w-full bg-gray-50 dark:bg-gray-800 border rounded-lg transition-all outline-none focus-within:ring-4 focus-within:ring-blue-300 dark:focus-within:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus-within:border-blue-500'} {shouldAnimate ? 'focus-within:scale-[1.01]' : ''}">
+      <div class="relative flex items-center w-full">
         <!-- svelte-ignore a11y_autofocus -->
         <input
           bind:this={inputElement}
@@ -316,7 +316,7 @@
           onfocus={handleFocus}
           {maxlength}
           {minlength}
-          class="password-input-inner {typography.sm} flex-1 w-full {sizeClass} bg-transparent border-0 font-medium placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 {getContentFloatClass()}"
+          class="{typography.body} w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-300 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} pr-10 {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
           required={false}
           {disabled}
           {readonly}
@@ -328,7 +328,7 @@
         <button
           type="button"
           onclick={togglePasswordVisibility}
-          class="flex items-center justify-center px-3 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none"
+          class="absolute right-3 inset-y-0 flex items-center justify-center text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-hidden"
           tabindex="-1"
           aria-label={isPasswordVisible ? "Hide password" : "Show password"}
         >
@@ -361,7 +361,7 @@
           onkeydown={handleSearchKeyDown}
           {maxlength}
           {minlength}
-          class="{typography.body} w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {icon || (showClearButton && inputValue) ? 'pr-10' : ''} {leftIcon ? 'pl-10' : ''} {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+          class="{typography.body} w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-300 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {icon || (showClearButton && inputValue) ? 'pr-10' : ''} {leftIcon ? 'pl-10' : ''} {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
           required={false}
           {disabled}
           {readonly}
@@ -374,7 +374,7 @@
           <button
             type="button"
             onclick={clearInput}
-            class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+            class="absolute right-3 inset-y-0 flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
             aria-label="Clear input"
             tabindex="-1"
           >
@@ -419,15 +419,5 @@
 </div>
 
 <style>
-  /*
-   * Override Tailwind v4 preflight which sets input { border: 1px solid currentColor }
-   * in @layer base. The base layer's element selector has higher specificity than
-   * utility class selectors like border-0 or border-none, so we need scoped overrides.
-   *
-   * This affects the password input which is wrapped in a container div that provides
-   * the visible border - the inner input should have no border.
-   */
-  :global(.password-input-inner) {
-    border: none !important;
-  }
+  /* No custom styles needed - password input now uses same structure as email input */
 </style>

package/dist/primitives/Input/Select.spec.js

@@ -3,6 +3,12 @@ import userEvent from "@testing-library/user-event";
 import { expect, describe, test, vi } from "vitest";
 import Select from "./Select.svelte";
 
+// Mock transitions to be instant for testing
+vi.mock('../../utils/transitions.js', () => ({
+  bloom: () => ({ duration: 0, delay: 0, css: () => '' }),
+  safeSlide: () => ({ duration: 0, delay: 0, css: () => '' }),
+}));
+
 const sampleItems = [
   { name: "Option 1", value: "opt1" },
   { name: "Option 2", value: "opt2" },

package/dist/primitives/Input/Select.svelte

@@ -4,6 +4,7 @@
   import { portal as portalAction } from "../../utils/portal.js";
   import { typography } from "../../tokens/typography";
   import { formControlSizes } from "../../tokens/sizing";
+  import { bloom } from "../../utils/transitions.js";
 
   interface SelectItem {
     value: string;
@@ -180,7 +181,7 @@
       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}`}"
+      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-hidden 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}
@@ -198,6 +199,7 @@
         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"
+        transition:bloom={{ origin: "top left" }}
       >
         {#each items as item, index}
           <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -231,6 +233,7 @@
     style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
     role="listbox"
     tabindex="-1"
+    transition:bloom={{ origin: "top left" }}
   >
     {#each items as item, index}
       <!-- svelte-ignore a11y_click_events_have_key_events -->

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.ts"],"names":[],"mappings":"AAUE,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAqMH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Select.svelte.ts"],"names":[],"mappings":"AAWE,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAsMH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/primitives/Input/Textarea.svelte

@@ -85,7 +85,7 @@
     {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}"
+    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-hidden 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}

package/dist/primitives/Modal/Modal.svelte

@@ -127,7 +127,7 @@
     >
       <!-- Handle bar -->
       <div class="flex justify-center pt-3 pb-1 shrink-0">
-        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
+        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-xs"></div>
       </div>
 
       <div class="p-6 pb-[calc(5rem+env(safe-area-inset-bottom,0px))] overflow-y-auto flex-1">

package/dist/primitives/Radio/Radio.spec.js

@@ -134,10 +134,10 @@ describe('Radio Input Styling', () => {
     expect(input).toHaveClass('dark:border-gray-600');
   });
 
-  test('has focus:outline-none', () => {
+  test('has focus:outline-hidden', () => {
     const { container } = render(Radio);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('focus:outline-none');
+    expect(input).toHaveClass('focus:outline-hidden');
   });
 });
 

package/dist/primitives/Radio/Radio.svelte

@@ -57,7 +57,7 @@
     {disabled}
     checked={isChecked}
     onchange={handleChange}
-    class="w-4 h-4 bg-gray-100 border-gray-300 focus:outline-none dark:bg-gray-700 dark:border-gray-600 {colorClass}"
+    class="w-4 h-4 bg-gray-100 border-gray-300 focus:outline-hidden dark:bg-gray-700 dark:border-gray-600 {colorClass}"
   />
   {#if children}
     <span class="text-sm font-medium text-gray-900 dark:text-gray-300">

package/dist/primitives/Tabs/Tabs.svelte

@@ -91,7 +91,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";
+    const base = "inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-hidden";
 
     switch (tabStyle) {
       case 'underline':

package/dist/primitives/Toggle.spec.js

@@ -97,22 +97,25 @@ describe('Toggle Component', () => {
   it('has default md size track dimensions', () => {
     const { container } = render(Toggle, { size: 'md' });
     const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('w-11');
-    expect(switchEl).toHaveClass('h-6');
+    // Uses CSS classes instead of Tailwind for Tailwind v4 compatibility
+    expect(switchEl).toHaveClass('toggle-track');
+    expect(switchEl).toHaveClass('toggle-md');
   });
 
   it('has sm size track dimensions', () => {
     const { container } = render(Toggle, { size: 'sm' });
     const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('w-9');
-    expect(switchEl).toHaveClass('h-5');
+    // Uses CSS classes instead of Tailwind for Tailwind v4 compatibility
+    expect(switchEl).toHaveClass('toggle-track');
+    expect(switchEl).toHaveClass('toggle-sm');
   });
 
   it('has lg size track dimensions', () => {
     const { container } = render(Toggle, { size: 'lg' });
     const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('w-14');
-    expect(switchEl).toHaveClass('h-7');
+    // Uses CSS classes instead of Tailwind for Tailwind v4 compatibility
+    expect(switchEl).toHaveClass('toggle-track');
+    expect(switchEl).toHaveClass('toggle-lg');
   });
 
   it('has dark mode classes', () => {

package/dist/primitives/Toggle.svelte

@@ -2,6 +2,10 @@
   /**
    * Toggle Component - Flowbite Native
    * Migrated to Svelte 5 runes
+   *
+   * Note: Uses CSS style block for pseudo-element styling instead of Tailwind
+   * after: classes, because Tailwind v4 doesn't generate after: classes from
+   * node_modules when this component is consumed by other apps.
    */
 
   /** @type {{
@@ -26,27 +30,6 @@
     checked = event.target.checked;
     onchange?.({ checked });
   }
-
-  // Flowbite toggle sizes - thumb uses after: pseudo-element
-  const sizes = {
-    sm: {
-      track: 'w-9 h-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: '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: 'after:h-6 after:w-6 after:top-0.5 after:start-0.5',
-      translate: 'peer-checked:after:translate-x-full'
-    }
-  };
-
-  let sizeConfig = $derived(sizes[size] || sizes.md);
 </script>
 
 <label class="inline-flex items-center {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}" {...restProps}>
@@ -58,9 +41,10 @@
     class="sr-only peer"
   />
   <div
-    class="relative {sizeConfig.track} bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute {sizeConfig.thumb} after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+    class="toggle-track toggle-{size} relative bg-gray-200 peer-focus:outline-hidden peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:bg-blue-600"
     role="switch"
     aria-checked={checked}
+    style="--toggle-translate: {sizeConfig.translatePx}"
   ></div>
   {#if children}
     <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
@@ -68,3 +52,81 @@
     </span>
   {/if}
 </label>
+
+<style>
+  /*
+   * Toggle track sizes (replaces Tailwind w-* h-* classes)
+   * Using CSS instead of Tailwind because these need to work in consuming apps
+   */
+  .toggle-sm {
+    width: 2.25rem; /* w-9 = 36px */
+    height: 1.25rem; /* h-5 = 20px */
+  }
+  .toggle-md {
+    width: 2.75rem; /* w-11 = 44px */
+    height: 1.5rem; /* h-6 = 24px */
+  }
+  .toggle-lg {
+    width: 3.5rem; /* w-14 = 56px */
+    height: 1.75rem; /* h-7 = 28px */
+  }
+
+  /*
+   * Toggle thumb (the white circle) - uses ::after pseudo-element
+   * Tailwind v4 doesn't generate after: classes from node_modules,
+   * so we use explicit CSS here.
+   */
+  .toggle-track::after {
+    content: '';
+    position: absolute;
+    background-color: white;
+    border: 1px solid #d1d5db; /* gray-300 */
+    border-radius: 9999px;
+    transition: all 150ms;
+  }
+
+  /* Thumb sizes for each toggle size */
+  .toggle-sm::after {
+    width: 1rem; /* 16px */
+    height: 1rem;
+    top: 0.125rem; /* 2px */
+    inset-inline-start: 0.125rem;
+  }
+  .toggle-md::after {
+    width: 1.25rem; /* 20px */
+    height: 1.25rem;
+    top: 0.125rem;
+    inset-inline-start: 0.125rem;
+  }
+  .toggle-lg::after {
+    width: 1.5rem; /* 24px */
+    height: 1.5rem;
+    top: 0.125rem;
+    inset-inline-start: 0.125rem;
+  }
+
+  /* Checked state - move thumb to the right */
+  :global(input.peer:checked) + .toggle-sm::after {
+    transform: translateX(1rem); /* 16px */
+    border-color: white;
+  }
+  :global(input.peer:checked) + .toggle-md::after {
+    transform: translateX(1.25rem); /* 20px */
+    border-color: white;
+  }
+  :global(input.peer:checked) + .toggle-lg::after {
+    transform: translateX(1.5rem); /* 24px */
+    border-color: white;
+  }
+
+  /* RTL support - translate in opposite direction */
+  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-sm::after {
+    transform: translateX(-1rem);
+  }
+  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-md::after {
+    transform: translateX(-1.25rem);
+  }
+  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-lg::after {
+    transform: translateX(-1.5rem);
+  }
+</style>

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Toggle.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAyEA;cAPc,OAAO;eACN,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;YACjB,MAAM;eACH,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;eACtC,OAAO,QAAQ,EAAE,OAAO;kBAEc"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Toggle.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AA0DA;cAPc,OAAO;eACN,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;YACjB,MAAM;eACH,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;eACtC,OAAO,QAAQ,EAAE,OAAO;kBAEc"}

package/dist/primitives/Tooltip/Tooltip.svelte

@@ -72,7 +72,7 @@
 
   {#if visible && content}
     <div
-      class="absolute z-50 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow-sm whitespace-nowrap pointer-events-none dark:bg-gray-700 {placementClasses[placement]} {className}"
+      class="absolute z-50 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow whitespace-nowrap pointer-events-none dark:bg-gray-700 {placementClasses[placement]} {className}"
       transition:fly={{ y: placement === 'top' ? 5 : placement === 'bottom' ? -5 : 0, x: placement === 'left' ? 5 : placement === 'right' ? -5 : 0, duration: 150 }}
     >
       {content}

package/dist/recipes/CropImage/CropImage.svelte

@@ -159,7 +159,7 @@
             <Button
               variant="outline"
               size="sm"
-              class="!rounded-full !w-9 !h-9 !p-0 shrink-0"
+              class="rounded-full! w-9! h-9! p-0! shrink-0"
               onclick={() => (zoom = Math.max(1, zoom - 0.2))}
               aria-label="Zoom out"
             >
@@ -179,7 +179,7 @@
             <Button
               variant="outline"
               size="sm"
-              class="!rounded-full !w-9 !h-9 !p-0 shrink-0"
+              class="rounded-full! w-9! h-9! p-0! shrink-0"
               onclick={() => (zoom = Math.min(3, zoom + 0.2))}
               aria-label="Zoom in"
             >

package/dist/recipes/SuperLogin/SuperLogin.svelte

@@ -802,7 +802,7 @@
                   onclick={() => handleAccountSelectInternal(account)}
                 >
                   <div
-                    class="h-10 w-10 rounded-md bg-gray-200 flex-shrink-0 overflow-hidden mr-4"
+                    class="h-10 w-10 rounded-md bg-gray-200 shrink-0 overflow-hidden mr-4"
                   >
                     {#if account.performerProfile?.profileImage}
                       <img

package/dist/recipes/inputs/MultiSelect.spec.js

@@ -3,6 +3,12 @@ import userEvent from "@testing-library/user-event";
 import { expect, describe, test, vi } from "vitest";
 import MultiSelect from "./MultiSelect.svelte";
 
+// Mock transitions to be instant for testing
+vi.mock('../../utils/transitions.js', () => ({
+  bloom: () => ({ duration: 0, delay: 0, css: () => '' }),
+  safeSlide: () => ({ duration: 0, delay: 0, css: () => '' }),
+}));
+
 const sampleItems = [
   { name: "Option 1", value: "opt1" },
   { name: "Option 2", value: "opt2" },

package/dist/recipes/inputs/MultiSelect.svelte

@@ -1,6 +1,7 @@
 <script>
   import { CloseOutline, ChevronDownOutline } from "../../primitives/Icons";
   import { typography } from '../../tokens/typography';
+  import { bloom } from "../../utils/transitions.js";
 
 
   /**
@@ -183,7 +184,7 @@
     <div
       bind:this={triggerElement}
       {id}
-      class="flex items-center justify-between gap-2 w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer text-left transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
+      class="flex items-center justify-between gap-2 w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer text-left transition-all focus:outline-hidden 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 focus:border-blue-500 dark:focus:border-blue-500'}
         {disabled ? 'opacity-50 cursor-not-allowed' : ''}
         {animateFocus ? 'multiselect-animate-focus' : ''}"
@@ -206,7 +207,7 @@
                 <span class={`${typography.sm} overflow-hidden text-ellipsis whitespace-nowrap`} 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"
+                  class="inline-flex items-center p-0.5 ms-1.5 text-sm text-blue-400 bg-transparent rounded-xs hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300"
                   onclick={(e) => removeItem(item, e)}
                   aria-label="Remove {item.name}"
                 >
@@ -220,7 +221,7 @@
         {/if}
       </div>
 
-      <div class="flex items-center gap-1 flex-shrink-0">
+      <div class="flex items-center gap-1 shrink-0">
         {#if hasSelection && !hideClear}
           <button
             type="button"
@@ -244,6 +245,7 @@
         role="listbox"
         tabindex="-1"
         aria-multiselectable="true"
+        transition:bloom={{ origin: "top left" }}
         aria-activedescendant={focusedIndex >= 0
           ? `${id || name}-option-${focusedIndex}`
           : undefined}

package/dist/recipes/inputs/MultiSelect.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/MultiSelect.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsQA;YAhBY,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE;YACnB;;;;cA1OI,MAAM;;;;eACN,MAAM,GAAG,MAAM;OAyOP;kBACN,MAAM;YACZ,MAAM;eACH,OAAO;eACP,OAAO;YACV,MAAM;gBACF,OAAO;qBACF,OAAO;mBACT,OAAO;WACf,MAAM;SACR,MAAM;WACJ,IAAI,GAAG,IAAI,GAAG,IAAI;mBACV,OAAO;eACX,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;QAAC,KAAK,EAAE;;;;kBAvP7C,MAAM;;;;mBACN,MAAM,GAAG,MAAM;WAsP0C,CAAA;KAAE,KAAK,IAAI;gBAE1B;;;;;UAzP1C,MAAM;;;;WACN,MAAM,GAAG,MAAM"}
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/MultiSelect.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwQA;YAhBY,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE;YACnB;;;;cA1OI,MAAM;;;;eACN,MAAM,GAAG,MAAM;OAyOP;kBACN,MAAM;YACZ,MAAM;eACH,OAAO;eACP,OAAO;YACV,MAAM;gBACF,OAAO;qBACF,OAAO;mBACT,OAAO;WACf,MAAM;SACR,MAAM;WACJ,IAAI,GAAG,IAAI,GAAG,IAAI;mBACV,OAAO;eACX,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;QAAC,KAAK,EAAE;;;;kBAvP7C,MAAM;;;;mBACN,MAAM,GAAG,MAAM;WAsP0C,CAAA;KAAE,KAAK,IAAI;gBAE1B;;;;;UAzP1C,MAAM;;;;WACN,MAAM,GAAG,MAAM"}

package/dist/recipes/inputs/OTPInput.svelte

@@ -108,7 +108,7 @@
       {disabled}
       aria-label="Digit {index + 1} of {length}"
       aria-describedby="otp-instructions"
-      class="h-12 w-12 border-2 border-gray-300 bg-gray-50 p-0 text-center text-xl font-semibold leading-none text-gray-900 transition-colors focus:border-blue-500 focus:outline-none focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500 dark:disabled:bg-gray-600 md:h-14 md:w-14 md:text-2xl rounded-lg"
+      class="h-12 w-12 border-2 border-gray-300 bg-gray-50 p-0 text-center text-xl font-semibold leading-none text-gray-900 transition-colors focus:border-blue-500 focus:outline-hidden focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500 dark:disabled:bg-gray-600 md:h-14 md:w-14 md:text-2xl rounded-lg"
       oninput={(e) => handleInput(index, e)}
       onkeydown={(e) => handleKeyDown(index, e)}
       onpaste={handlePaste}

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.spec.js

@@ -32,6 +32,12 @@ vi.mock('$lib/config.js', () => ({
   PUBLIC_GOOGLE_MAPS_API_KEY: 'test-api-key',
 }));
 
+// Mock transitions to be instant for testing
+vi.mock('../../../utils/transitions.js', () => ({
+  bloom: () => ({ duration: 0, delay: 0, css: () => '' }),
+  safeSlide: () => ({ duration: 0, delay: 0, css: () => '' }),
+}));
+
 function setupTest(props = {}) {
   const user = userEvent.setup();
   const result = render(PlaceAutocomplete, { props });

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte

@@ -3,6 +3,7 @@
   import * as GMaps from '@googlemaps/js-api-loader';
   import { PUBLIC_GOOGLE_MAPS_API_KEY } from '../../../config.js';
   import { typography } from '../../../tokens/typography';
+  import { bloom } from '../../../utils/transitions.js';
   const { Loader } = GMaps;
 /** Google Places API address component */  interface AddressComponent {    longText: string;    shortText: string;    types: string[];  }  /** Google Places API response data */  interface PlaceData {    formattedAddress?: string;    addressComponents?: AddressComponent[];    text?: string;    [key: string]: unknown;  }  /** Google Places autocomplete suggestion */  interface AutocompleteSuggestion {    placePrediction: {      types: string[];      text: { toString(): string };      toPlace(): PlaceObject;    };  }  /** Google Places place object */  interface PlaceObject {    fetchFields(options: { fields: string[] }): Promise<void>;    toJSON(): PlaceData;  }  /** Google Places API interface */  interface PlacesApiInterface {    AutocompleteSessionToken: new () => AutocompleteSessionToken;    AutocompleteSuggestion: {      fetchAutocompleteSuggestions(request: AutocompleteRequest): Promise<{ suggestions: AutocompleteSuggestion[] }>;    };  }  /** Google Places autocomplete session token */  interface AutocompleteSessionToken {}  /** Autocomplete request parameters */  interface AutocompleteRequest {    input: string;    language: string;    region: string;    sessionToken: AutocompleteSessionToken | string;  }  /** Search result item */  interface SearchResult {    to_place: PlaceObject;    text: string;    originalText?: string;  }
 
@@ -291,7 +292,7 @@
       type="text"
       name="location"
       class="block w-full h-10 pl-10 pr-2.5 py-2.5 bg-gray-50 border border-gray-300 rounded-lg {typography.label}
-             focus:ring-blue-500 focus:border-blue-500 focus:outline-none
+             focus:ring-blue-500 focus:border-blue-500 focus:outline-hidden
              hover:border-blue-500
              disabled:opacity-50 disabled:cursor-not-allowed
              placeholder:text-gray-500
@@ -318,6 +319,7 @@
         class="absolute top-full left-0 right-0 z-50 mt-1 py-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto
                dark:bg-gray-800 dark:border-gray-600"
         id="options"
+        transition:bloom={{ origin: "top left" }}
       >
         {#each results as place, i}
           <li
@@ -328,7 +330,7 @@
             <button
               type="button"
               class="block w-full text-left px-4 py-3 bg-transparent border-none cursor-pointer {typography.sm}
-                     focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700"
+                     focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-700"
               tabindex={i + 1}
               onclick={() => onPlaceSelected(place.to_place, place.text)}
             >

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AAQA,0CAA0C,CAAE,UAAU,gBAAgB;IAAM,QAAQ,EAAE,MAAM,CAAC;IAAI,SAAS,EAAE,MAAM,CAAC;IAAI,KAAK,EAAE,MAAM,EAAE,CAAC;CAAG;AACzI,sCAAsC,CAAE,UAAU,SAAS;IAAM,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAI,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAAI,IAAI,CAAC,EAAE,MAAM,CAAC;IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAAG;AAMrL,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqTH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AASA,0CAA0C,CAAE,UAAU,gBAAgB;IAAM,QAAQ,EAAE,MAAM,CAAC;IAAI,SAAS,EAAE,MAAM,CAAC;IAAI,KAAK,EAAE,MAAM,EAAE,CAAC;CAAG;AACzI,sCAAsC,CAAE,UAAU,SAAS;IAAM,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAI,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAAI,IAAI,CAAC,EAAE,MAAM,CAAC;IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAAG;AAMrL,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsTH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/recipes/inputs/Search.svelte

@@ -84,7 +84,7 @@
     {name}
     {placeholder}
     {disabled}
-    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
     bind:value
     oninput={handleInput}
     onchange={handleChange}

package/dist/recipes/inputs/SelectDropdown.spec.js

@@ -3,6 +3,12 @@ import userEvent from "@testing-library/user-event";
 import { expect, describe, test, vi, beforeEach } from "vitest";
 import SelectDropdown from "./SelectDropdown.svelte";
 
+// Mock transitions to be instant for testing
+vi.mock('../../utils/transitions.js', () => ({
+  bloom: () => ({ duration: 0, delay: 0, css: () => '' }),
+  safeSlide: () => ({ duration: 0, delay: 0, css: () => '' }),
+}));
+
 const sampleOptions = [
   { label: "Option 1", value: "opt1" },
   { label: "Option 2", value: "opt2" },

package/dist/recipes/inputs/SelectDropdown.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { tick } from "svelte";
   import { ChevronDownOutline } from "../../primitives/Icons";
+  import { bloom } from "../../utils/transitions.js";
 
   interface SelectOption {
     label: string;
@@ -129,7 +130,7 @@
   <button
     bind:this={triggerRef}
     type="button"
-    class="inline-flex items-center justify-between w-full px-4 py-2.5 text-sm font-medium text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-blue-800 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    class="inline-flex items-center justify-between w-full px-4 py-2.5 text-sm font-medium text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-hidden focus:ring-blue-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-blue-800 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
     onclick={toggleDropdown}
     aria-haspopup="listbox"
     aria-expanded={isOpen}
@@ -148,6 +149,7 @@
       class="absolute z-10 mt-1 w-full bg-white divide-y divide-gray-100 rounded-lg shadow-lg dark:bg-gray-700 dark:divide-gray-600 max-h-60 overflow-y-auto"
       role="listbox"
       aria-label={placeholder}
+      transition:bloom={{ origin: "top left" }}
     >
       <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
         {#each options as option}

package/dist/recipes/inputs/SelectDropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/SelectDropdown.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C;AA6IH,QAAA,MAAM,cAAc,mDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SelectDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/SelectDropdown.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C;AA8IH,QAAA,MAAM,cAAc,mDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/recipes/modals/InputModal.svelte

@@ -118,7 +118,7 @@
             bind:value={inputValue}
             placeholder={inputPlaceholder}
             rows={inputRows}
-            class="w-full px-3 py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 {typography.body} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+            class="w-full px-3 py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 {typography.body} rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
             disabled={disabled || loading}
           ></textarea>
         {:else}

package/dist/recipes/modals/ModalTestWrapper.svelte

@@ -34,32 +34,32 @@
   }: Props = $props();
 </script>
 
-<Modal bind:show oncancel={oncancel}>
-  {#snippet headerSnippet()}
-    {#if header}
-      {@render header()}
-    {:else}
-      {title}
-    {/if}
-  {/snippet}
+{#snippet headerContent()}
+  {#if header}
+    {@render header()}
+  {:else}
+    {title}
+  {/if}
+{/snippet}
 
-  {#snippet bodySnippet()}
-    {#if body}
-      {@render body()}
-    {:else}
-      {description}
-      {#if warningText}
-        <br /> {warningText}
-      {/if}
+{#snippet bodyContent()}
+  {#if body}
+    {@render body()}
+  {:else}
+    {description}
+    {#if warningText}
+      <br /> {warningText}
     {/if}
-  {/snippet}
+  {/if}
+{/snippet}
 
-  {#snippet footerSnippet()}
-    {#if footer}
-      {@render footer()}
-    {:else}
-      <Button variant="alternative">Cancel</Button>
-      <Button variant="default">Confirm</Button>
-    {/if}
-  {/snippet}
-</Modal>
+{#snippet footerContent()}
+  {#if footer}
+    {@render footer()}
+  {:else}
+    <Button variant="alternative">Cancel</Button>
+    <Button variant="default">Confirm</Button>
+  {/if}
+{/snippet}
+
+<Modal bind:show {oncancel} header={headerContent} body={bodyContent} footer={footerContent} />

package/dist/stories/ButtonAuditDashboard.spec.js

@@ -727,7 +727,7 @@ describe('ButtonAuditDashboard', () => {
 
     it('should have proper border and shadow styling', () => {
       const { container } = render(ButtonAuditDashboard);
-      const header = container.querySelector('.border-b.shadow-sm');
+      const header = container.querySelector('.border-b.shadow');
       expect(header).toBeInTheDocument();
     });
   });

package/dist/stories/ButtonAuditDashboard.svelte

@@ -161,7 +161,7 @@
 
 <div class="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
   <!-- Sticky Header -->
-  <div class="sticky top-0 z-50 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-sm">
+  <div class="sticky top-0 z-50 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow">
     <div class="max-w-7xl mx-auto px-4 py-4">
       <div class="flex flex-wrap items-center justify-between gap-4">
         <div>
@@ -292,21 +292,21 @@
                           📂 Open
                         </a>
                       </div>
-                      <div class="flex items-center gap-2 flex-shrink-0 ml-2">
-                        {#if isPreviewable(route.file)}
-                          <!-- svelte-ignore a11y_click_events_have_key_events -->
-                          <!-- svelte-ignore a11y_no_static_element_interactions -->
-                          <span
-                            role="button"
-                            tabindex="0"
-                            onclick={(e) => { e.stopPropagation(); openPreview(route.route, route.file); }}
-                            onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); openPreview(route.route, route.file); }}}
-                            class="px-2 py-0.5 text-xs rounded bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-800 cursor-pointer"
-                            title="Preview this page"
-                          >
-                            👁️ Preview
-                          </span>
-                        {/if}
+                      <div class="flex items-center gap-2 shrink-0 ml-2">
+                        {#if isPreviewable(route.file)}
+                          <!-- svelte-ignore a11y_click_events_have_key_events -->
+                          <!-- svelte-ignore a11y_no_static_element_interactions -->
+                          <span
+                            role="button"
+                            tabindex="0"
+                            onclick={(e) => { e.stopPropagation(); openPreview(route.route, route.file); }}
+                            onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); openPreview(route.route, route.file); }}}
+                            class="px-2 py-0.5 text-xs rounded bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-800 cursor-pointer"
+                            title="Preview this page"
+                          >
+                            👁️ Preview
+                          </span>
+                        {/if}
                         <span class="text-xs text-gray-500 dark:text-gray-400">
                           {routeVisibleButtons.length} buttons
                         </span>
@@ -404,7 +404,7 @@
 
   <!-- Preview Modal -->
   {#if previewModal.open}
-    <div class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
+    <div class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-xs">
       <div class="relative w-full max-w-6xl h-[85vh] bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden flex flex-col">
         <!-- Modal Header -->
         <div class="flex items-center justify-between px-4 py-3 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
@@ -430,14 +430,14 @@
           </div>
         </div>
 
-        <!-- Iframe Content -->
-        <div class="flex-1 relative">
-          <iframe
-            src={previewModal.url}
-            class="absolute inset-0 w-full h-full border-0"
-            title="Page preview"
-          ></iframe>
-        </div>
+        <!-- Iframe Content -->
+        <div class="flex-1 relative">
+          <iframe
+            src={previewModal.url}
+            class="absolute inset-0 w-full h-full border-0"
+            title="Page preview"
+          ></iframe>
+        </div>
 
         <!-- Modal Footer -->
         <div class="px-4 py-2 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-600 text-xs text-gray-500 dark:text-gray-400">

package/dist/stories/ButtonGridView.svelte

@@ -74,7 +74,7 @@
 
 <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
   <!-- Header -->
-  <div class="sticky top-0 z-50 bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 mb-4">
+  <div class="sticky top-0 z-50 bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-4">
     <div class="flex flex-wrap items-center justify-between gap-4">
       <div>
         <h1 class="text-xl font-bold text-gray-900 dark:text-white">Button Grid View</h1>

package/dist/stories/RecipesGallery.svelte

@@ -192,7 +192,7 @@
               type="text"
               placeholder="John Doe"
               bind:value={formFieldValue}
-              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
             />
           {/snippet}
         </FormField>
@@ -208,7 +208,7 @@
               {id}
               type="email"
               placeholder="email@example.com"
-              class="w-full px-3 py-2 border {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              class="w-full px-3 py-2 border {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
             />
           {/snippet}
         </FormField>
@@ -423,7 +423,7 @@
                 {id}
                 type="email"
                 placeholder="email@example.com"
-                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
               />
             {/snippet}
           </FormField>

package/dist/tokens/utilities.css

@@ -173,7 +173,7 @@
 
   /* Elevated card with shadow */
   .card-elevated {
-    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm;
+    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow;
   }
 
   /* Compact card with less padding */
@@ -258,22 +258,22 @@
 
   /* Base input styling */
   .input-base {
-    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
+    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent;
   }
 
   /* Base button styling */
   .btn-base {
-    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
   }
 
   /* Primary button */
   .btn-primary {
-    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
   }
 
   /* Secondary/outline button */
   .btn-secondary {
-    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500;
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500;
   }
 
   /* ==========================================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.9.4",
+  "version": "5.10.0",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",