@getmicdrop/svelte-components 5.12.0 → 5.13.0

package/dist/primitives/Modal/Modal.svelte

@@ -13,10 +13,10 @@
   import { triggerHaptic } from "../../utils/haptic.js";
 
   /** @type {{
-    show?: boolean,
+    open?: boolean,
     isProcessing?: boolean,
     isSuccess?: boolean,
-    size?: 'default' | 'small' | 'large' | 'xlarge',
+    size?: 'sm' | 'md' | 'lg' | 'xl',
     persistent?: boolean,
     haptic?: boolean,
     oncancel?: () => void,
@@ -26,10 +26,10 @@
     class?: string,
   }} */
   let {
-    show = $bindable(false),
+    open = $bindable(false),
     isProcessing = false,
     isSuccess = false,
-    size = "default",
+    size = "md",
     persistent = false,
     haptic = true,
     oncancel,
@@ -43,55 +43,61 @@
   // Store scroll position for iOS scroll lock
   let scrollY = $state(0);
 
-  // Track previous show state to detect open transitions
-  let prevShow = $state(false);
+  // Track previous open state to detect open transitions
+  let prevOpen = $state(false);
 
   // Trigger haptic on modal open (QOL Bible)
   $effect(() => {
-    if (show && !prevShow && haptic) {
+    if (open && !prevOpen && haptic) {
       triggerHaptic('light');
     }
-    prevShow = show;
+    prevOpen = open;
   });
 
   // Handle escape key
   function handleKeydown(event) {
-    if (event.key === "Escape" && show && !persistent) {
+    if (event.key === "Escape" && open && !persistent) {
       resetModal();
     }
   }
 
   const resetModal = () => {
     oncancel?.();
-    show = false;
+    open = false;
   };
 
-  // Size classes for desktop modal (Tailwind scale)
+  // Size classes for desktop modal (xs/sm/md/lg/xl scale)
   const sizeClasses = {
-    default: "max-w-md",
-    small: "max-w-sm",
-    large: "max-w-xl",
-    xlarge: "max-w-2xl"
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-xl",
+    xl: "max-w-2xl"
   };
 
-  let modalSizeClass = $derived(sizeClasses[size] || sizeClasses.default);
+  let modalSizeClass = $derived(sizeClasses[size] || sizeClasses.md);
 
   // iOS-compatible scroll lock using position:fixed approach
+  // Also compensates for scrollbar width to prevent layout shift
   $effect(() => {
     if (typeof document !== "undefined") {
-      if (show) {
+      if (open) {
         scrollY = window.scrollY;
+        // Calculate scrollbar width before hiding it
+        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
         document.body.style.position = "fixed";
         document.body.style.top = `-${scrollY}px`;
         document.body.style.left = "0";
         document.body.style.right = "0";
         document.body.style.overflow = "hidden";
+        // Add padding to compensate for scrollbar disappearing
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
       } else {
         document.body.style.position = "";
         document.body.style.top = "";
         document.body.style.left = "";
         document.body.style.right = "";
         document.body.style.overflow = "";
+        document.body.style.paddingRight = "";
         window.scrollTo(0, scrollY);
       }
     }
@@ -104,13 +110,14 @@
       document.body.style.left = "";
       document.body.style.right = "";
       document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
     }
   });
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
-{#if show}
+{#if open}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div

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

@@ -2,10 +2,10 @@ export default Modal;
 type Modal = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
-        show?: boolean | undefined;
+        open?: boolean | undefined;
         isProcessing?: boolean | undefined;
         isSuccess?: boolean | undefined;
-        size?: "small" | "large" | "default" | "xlarge" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | undefined;
         persistent?: boolean | undefined;
         haptic?: boolean | undefined;
         oncancel?: (() => void) | undefined;
@@ -16,10 +16,10 @@ type Modal = {
     }>): void;
 };
 declare const Modal: import("svelte").Component<{
-    show?: boolean;
+    open?: boolean;
     isProcessing?: boolean;
     isSuccess?: boolean;
-    size?: "default" | "small" | "large" | "xlarge";
+    size?: "sm" | "md" | "lg" | "xl";
     persistent?: boolean;
     haptic?: boolean;
     oncancel?: () => void;
@@ -27,5 +27,5 @@ declare const Modal: import("svelte").Component<{
     body?: import("svelte").Snippet;
     footer?: import("svelte").Snippet;
     class?: string;
-}, {}, "show">;
+}, {}, "open">;
 //# sourceMappingURL=Modal.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsLA;WAZW,OAAO;mBACC,OAAO;gBACV,OAAO;WACZ,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ;iBAClC,OAAO;aACX,OAAO;eACL,MAAM,IAAI;aACZ,OAAO,QAAQ,EAAE,OAAO;WAC1B,OAAO,QAAQ,EAAE,OAAO;aACtB,OAAO,QAAQ,EAAE,OAAO;YACzB,MAAM;eAEkC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA6LA;WAZW,OAAO;mBACC,OAAO;gBACV,OAAO;WACZ,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;iBACnB,OAAO;aACX,OAAO;eACL,MAAM,IAAI;aACZ,OAAO,QAAQ,EAAE,OAAO;WAC1B,OAAO,QAAQ,EAAE,OAAO;aACtB,OAAO,QAAQ,EAAE,OAAO;YACzB,MAAM;eAEkC"}

package/dist/primitives/Modal/ModalTestWrapper.svelte

@@ -5,7 +5,7 @@
 
   interface Props {
     /** Whether the modal is visible */
-    show?: boolean;
+    open?: boolean;
     /** Modal title */
     title?: string;
     /** Modal description */
@@ -23,7 +23,7 @@
   }
 
   let {
-    show = $bindable(false),
+    open = $bindable(false),
     title = '',
     description = '',
     warningText = '',
@@ -34,7 +34,7 @@
   }: Props = $props();
 </script>
 
-<Modal bind:show {oncancel}>
+<Modal bind:open {oncancel}>
   {#snippet header()}
     {#if customHeader}
       {@render customHeader()}

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     /** Whether the modal is visible */
-    show?: boolean;
+    open?: boolean;
     /** Modal title */
     title?: string;
     /** Modal description */
@@ -17,7 +17,7 @@ interface Props {
     /** Custom footer snippet */
     customFooter?: Snippet;
 }
-declare const ModalTestWrapper: import("svelte").Component<Props, {}, "show">;
+declare const ModalTestWrapper: import("svelte").Component<Props, {}, "open">;
 type ModalTestWrapper = ReturnType<typeof ModalTestWrapper>;
 export default ModalTestWrapper;
 //# sourceMappingURL=ModalTestWrapper.svelte.d.ts.map

package/dist/primitives/NavItem/NavItem.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  /**
+   * NavItem Component
+   * Bottom navigation item with vertical layout.
+   *
+   * Replaces: Button variant="nav"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Active/selected state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Link href (renders as <a> if provided) */
+    href?: string | null;
+    /** Content (icon + label) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    active = false,
+    disabled = false,
+    href = null,
+    children,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses = 'flex flex-col items-center justify-center h-full py-2 bg-transparent border-transparent rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
+  const defaultClasses = 'text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-500';
+  const activeClasses = 'text-blue-600 dark:text-blue-500';
+  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
+
+  let variantClass = $derived(() => {
+    if (disabled) return disabledClasses;
+    if (active) return activeClasses;
+    return defaultClasses;
+  });
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    variantClass(),
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+    className
+  ));
+</script>
+
+{#if href}
+  <a
+    {href}
+    class={classes}
+    {onclick}
+    {...restProps}
+  >
+    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+  </a>
+{:else}
+  <button
+    type="button"
+    class={classes}
+    {disabled}
+    {onclick}
+    {...restProps}
+  >
+    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+  </button>
+{/if}

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Active/selected state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Link href (renders as <a> if provided) */
+    href?: string | null;
+    /** Content (icon + label) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const NavItem: import("svelte").Component<Props, {}, "">;
+type NavItem = ReturnType<typeof NavItem>;
+export default NavItem;
+//# sourceMappingURL=NavItem.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/NavItem/NavItem.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAgDH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/primitives/SearchResultItem/SearchResultItem.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  /**
+   * SearchResultItem Component
+   * Search dropdown result item with blue hover.
+   *
+   * Two modes:
+   * - Simple (no type): Blue hover, no border - for basic dropdowns
+   * - Typed (with type): Colored left border by entity type - matches global search styling
+   *
+   * Replaces: Button variant="search-result"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import { buttonMenuItemSizes } from '../../tokens/sizing.js';
+
+  /** Entity type for colored border mode */
+  export type SearchResultType = 'event' | 'order' | 'performer' | 'venue' | 'collection' | 'series';
+
+  interface Props {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Entity type - when provided, shows colored left border instead of blue hover */
+    type?: SearchResultType;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Selected/highlighted state (alias: isActive) */
+    selected?: boolean;
+    /** Content */
+    children?: Snippet;
+    /** Trailing content (icons, badges) */
+    trailing?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    type,
+    disabled = false,
+    selected = false,
+    children,
+    trailing,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  // Border colors by entity type - matches micdrop-frontend SearchResultItem
+  const borderColors: Record<SearchResultType, string> = {
+    event: 'border-l-blue-500',
+    order: 'border-l-yellow-500',
+    performer: 'border-l-pink-500',
+    venue: 'border-l-indigo-500',
+    collection: 'border-l-purple-500',
+    series: 'border-l-blue-500',
+  };
+
+  // Simple mode (no type): rounded with blue hover
+  const simpleBaseClasses = 'w-full text-left rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
+  const simpleDefaultClasses = 'text-gray-900 bg-transparent border-transparent hover:bg-blue-50 focus:bg-blue-50 dark:text-white dark:hover:bg-blue-900/20 dark:focus:bg-blue-900/20';
+  const simpleSelectedClasses = 'text-gray-900 bg-blue-50 dark:text-white dark:bg-blue-900/20';
+
+  // Typed mode (with type): colored left border, gray hover
+  const typedBaseClasses = 'w-full text-left font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none border-l-3';
+  const typedDefaultClasses = 'text-gray-900 bg-transparent hover:bg-gray-50 hover:border-l-4 dark:text-white dark:hover:bg-gray-700';
+  const typedSelectedClasses = 'text-gray-900 bg-primary-100 border-l-primary-600 border-l-4 dark:text-white dark:bg-gray-700';
+
+  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
+
+  let sizeClass = $derived(buttonMenuItemSizes[size] || buttonMenuItemSizes.md);
+  let hasTrailing = $derived(typeof trailing === 'function' || trailing);
+  let isTypedMode = $derived(!!type);
+
+  let variantClass = $derived(() => {
+    if (disabled) return disabledClasses;
+    if (isTypedMode) {
+      return selected ? typedSelectedClasses : typedDefaultClasses;
+    }
+    return selected ? simpleSelectedClasses : simpleDefaultClasses;
+  });
+
+  let borderClass = $derived(isTypedMode && type ? borderColors[type] : '');
+
+  let classes = $derived(twMerge(
+    isTypedMode ? typedBaseClasses : simpleBaseClasses,
+    hasTrailing ? 'flex items-center justify-between' : 'flex items-center justify-start',
+    sizeClass,
+    borderClass,
+    variantClass(),
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
+    className
+  ));
+</script>
+
+<button
+  type="button"
+  class={classes}
+  {disabled}
+  {onclick}
+  {...restProps}
+>
+  <span class="inline-flex items-center gap-1.5">
+    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+  </span>
+  {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
+</button>

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

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+/** Entity type for colored border mode */
+export type SearchResultType = 'event' | 'order' | 'performer' | 'venue' | 'collection' | 'series';
+interface Props {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Entity type - when provided, shows colored left border instead of blue hover */
+    type?: SearchResultType;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Selected/highlighted state (alias: isActive) */
+    selected?: boolean;
+    /** Content */
+    children?: Snippet;
+    /** Trailing content (icons, badges) */
+    trailing?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const SearchResultItem: import("svelte").Component<Props, {}, "">;
+type SearchResultItem = ReturnType<typeof SearchResultItem>;
+export default SearchResultItem;
+//# sourceMappingURL=SearchResultItem.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResultItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/SearchResultItem/SearchResultItem.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEnG,UAAU,KAAK;IACb,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,mFAAmF;IACnF,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA6EH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/primitives/SidebarToggle/SidebarToggle.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  /**
+   * SidebarToggle Component
+   * Compact pill button for sidebar expand/collapse.
+   *
+   * Replaces: Button variant="sidebar-toggle"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Expanded state (affects icon direction if using chevron) */
+    expanded?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Content (typically a chevron icon) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    expanded = false,
+    disabled = false,
+    children,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses = 'w-6 h-7 inline-flex items-center justify-center rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
+  const defaultClasses = 'text-gray-900 bg-blue-100 border border-blue-200 hover:bg-blue-200 shadow-lg dark:text-white dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700';
+  const disabledClasses = 'bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500';
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    disabled ? disabledClasses : defaultClasses,
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.95] active:opacity-90',
+    className
+  ));
+</script>
+
+<button
+  type="button"
+  class={classes}
+  {disabled}
+  aria-expanded={expanded}
+  {onclick}
+  {...restProps}
+>
+  {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+</button>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Expanded state (affects icon direction if using chevron) */
+    expanded?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Content (typically a chevron icon) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const SidebarToggle: import("svelte").Component<Props, {}, "">;
+type SidebarToggle = ReturnType<typeof SidebarToggle>;
+export default SidebarToggle;
+//# sourceMappingURL=SidebarToggle.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarToggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/SidebarToggle/SidebarToggle.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAkCH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/primitives/index.d.ts

@@ -33,4 +33,11 @@ export { default as Toggle } from "./Toggle.svelte";
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte";
 export { default as Typography } from "./Typography/Typography.svelte";
 export { default as ValidationError } from "./ValidationError.svelte";
+export { default as MenuItem } from "./MenuItem/MenuItem.svelte";
+export { default as AvatarButton } from "./AvatarButton/AvatarButton.svelte";
+export { default as NavItem } from "./NavItem/NavItem.svelte";
+export { default as CardAction } from "./CardAction/CardAction.svelte";
+export { default as SearchResultItem } from "./SearchResultItem/SearchResultItem.svelte";
+export { default as LandingButton } from "./LandingButton/LandingButton.svelte";
+export { default as SidebarToggle } from "./SidebarToggle/SidebarToggle.svelte";
 //# sourceMappingURL=index.d.ts.map

package/dist/primitives/index.js

@@ -90,3 +90,24 @@ export { default as Typography } from './Typography/Typography.svelte';
 
 // ValidationError
 export { default as ValidationError } from './ValidationError.svelte';
+
+// MenuItem
+export { default as MenuItem } from './MenuItem/MenuItem.svelte';
+
+// AvatarButton
+export { default as AvatarButton } from './AvatarButton/AvatarButton.svelte';
+
+// NavItem
+export { default as NavItem } from './NavItem/NavItem.svelte';
+
+// CardAction
+export { default as CardAction } from './CardAction/CardAction.svelte';
+
+// SearchResultItem
+export { default as SearchResultItem } from './SearchResultItem/SearchResultItem.svelte';
+
+// LandingButton
+export { default as LandingButton } from './LandingButton/LandingButton.svelte';
+
+// SidebarToggle
+export { default as SidebarToggle } from './SidebarToggle/SidebarToggle.svelte';

package/dist/recipes/SuperLogin/SuperLogin.svelte

@@ -8,6 +8,7 @@
   import PasswordStrengthIndicator from "../inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte";
   import Input from "../../primitives/Input/Input.svelte";
   import Button from "../../primitives/Button/Button.svelte";
+  import CardAction from "../../primitives/CardAction/CardAction.svelte";
   import Checkbox from "../../primitives/Checkbox/Checkbox.svelte";
   import { typography } from '../../tokens/typography';
 
@@ -795,8 +796,7 @@
 
             <div class="space-y-3">
               {#each accounts as account}
-                <Button
-                  variant="card"
+                <CardAction
                   size="md"
                   class="group"
                   onclick={() => handleAccountSelectInternal(account)}
@@ -844,7 +844,7 @@
                       />
                     </svg>
                   </div>
-                </Button>
+                </CardAction>
               {/each}
             </div>
 

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":";;;;;AAo+BA;iBAp7BkC,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;WAo7B1W;wBAp7BtC;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":";;;;;AAs+BA;iBAp7BkC,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;WAo7B1W;wBAp7BtC;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/inputs/index.d.ts

@@ -4,5 +4,4 @@ export { default as PasswordInput } from "./PasswordInput.svelte";
 export { default as PasswordStrengthIndicator } from "./PasswordStrengthIndicator/PasswordStrengthIndicator.svelte";
 export { default as PlaceAutocomplete } from "./PlaceAutocomplete/PlaceAutocomplete.svelte";
 export { default as Search } from "./Search.svelte";
-export { default as SelectDropdown } from "./SelectDropdown.svelte";
 //# sourceMappingURL=index.d.ts.map

package/dist/recipes/inputs/index.js

@@ -5,4 +5,3 @@ export { default as PasswordInput } from './PasswordInput.svelte';
 export { default as PasswordStrengthIndicator } from './PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
 export { default as PlaceAutocomplete } from './PlaceAutocomplete/PlaceAutocomplete.svelte';
 export { default as Search } from './Search.svelte';
-export { default as SelectDropdown } from './SelectDropdown.svelte';

package/dist/recipes/modals/AlertModal.spec.js

@@ -7,7 +7,7 @@ function setupTest(args = {}) {
   const user = userEvent.setup();
   const { component } = render(AlertModal, {
     props: {
-      show: true,
+      open: true,
       title: "Test Alert",
       message: "This is a test message",
       ...args,
@@ -26,7 +26,7 @@ describe("AlertModal Component Tests", () => {
   // Use getAllByText/queryAllByText and check length or first element
 
   test("Does not render when show is false", () => {
-    render(AlertModal, { props: { show: false } });
+    render(AlertModal, { props: { open: false } });
     expect(screen.queryByText("Test Alert")).not.toBeInTheDocument();
   });