@getmicdrop/svelte-components 5.18.0 → 5.18.2

package/dist/patterns/navigation/Header.svelte.d.ts

@@ -1,17 +1,25 @@
-interface NavLink {
-    label: string;
-    href: string;
-}
-interface Props {
+declare const Header: import("svelte").Component<{
     signoutHandler?: () => void;
     name?: string;
     avatar?: string;
     email?: string;
-    navLinks?: NavLink[];
-    dropdownLinks?: NavLink[];
+    navLinks?: {
+        label: string;
+        href: string;
+    }[];
+    dropdownLinks?: {
+        label: string;
+        href: string;
+    }[];
     showBackButton?: boolean;
-}
-declare const Header: import("svelte").Component<Props, {}, "">;
+    labels?: Partial<{
+        back: string;
+        signOut: string;
+        signOutMobile: string;
+        cancel: string;
+        defaultName: string;
+    }>;
+}, {}, "">;
 type Header = ReturnType<typeof Header>;
 export default Header;
 //# sourceMappingURL=Header.svelte.d.ts.map

package/dist/patterns/navigation/Header.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.ts"],"names":[],"mappings":"AAoBE,UAAU,OAAO;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAmMH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.ts"],"names":[],"mappings":"AA8OA,QAAA,MAAM,MAAM;qBA5LS,MAAM,IAAI;WACpB,MAAM;aACJ,MAAM;YACP,MAAM;eACH;eAjBJ,MAAM;cACP,MAAM;OAgBQ;oBACJ;eAlBT,MAAM;cACP,MAAM;OAiBa;qBACR,OAAO;aACf,OAAO;;;;;;MAAsB;UAqLU,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/patterns/page/PageLoader.svelte

@@ -5,6 +5,11 @@
   import Button from "../../primitives/Button/Button.svelte";
   import { typography } from '../../tokens/typography';
 
+  const defaultLabels = {
+    error: 'Error',
+    tryAgain: 'Try again',
+  };
+
   interface Props {
     isLoading?: boolean;
     error?: string | null;
@@ -14,18 +19,22 @@
     onRetry?: () => void;
     minHeight?: string;
     children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
   }
 
   let {
     isLoading = true,
     error = null,
     loadingMessage = "",
-    errorTitle = "Error",
+    errorTitle = undefined,
     showRetry = false,
     onRetry = () => {},
     minHeight = "h-64",
     children,
+    labels: userLabels = {},
   }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
 </script>
 
 {#if isLoading}
@@ -39,11 +48,11 @@
   </div>
 {:else if error}
   <div class="p-4">
-    <Alert type="danger" title={errorTitle} message={error} />
+    <Alert type="danger" title={errorTitle ?? labels.error} message={error} />
     {#if showRetry}
       <div class="mt-4 text-center">
         <Button variant="link" onclick={onRetry}>
-          Try again
+          {labels.tryAgain}
         </Button>
       </div>
     {/if}

package/dist/patterns/page/PageLoader.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-interface Props {
+declare const PageLoader: import("svelte").Component<{
     isLoading?: boolean;
     error?: string | null;
     loadingMessage?: string;
@@ -8,8 +8,11 @@ interface Props {
     onRetry?: () => void;
     minHeight?: string;
     children?: Snippet;
-}
-declare const PageLoader: import("svelte").Component<Props, {}, "">;
+    labels?: Partial<{
+        error: string;
+        tryAgain: string;
+    }>;
+}, {}, "">;
 type PageLoader = ReturnType<typeof PageLoader>;
 export default PageLoader;
 //# sourceMappingURL=PageLoader.svelte.d.ts.map

package/dist/patterns/page/PageLoader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOpC,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+CH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PageLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAuEtC,QAAA,MAAM,UAAU;gBApDA,OAAO;YACX,MAAM,GAAG,IAAI;qBACJ,MAAM;iBACV,MAAM;gBACP,OAAO;cACT,MAAM,IAAI;gBACR,MAAM;eACP,OAAO;aACT,OAAO;;;MAAsB;UA4Cc,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -14,6 +14,10 @@
   import { ChevronUpOutline } from "../Icons";
   import { typography } from "../../tokens/typography";
 
+  const defaultLabels = {
+    accordionItem: 'Accordion Item',
+  };
+
   interface Props {
     open?: boolean;
     class?: string;
@@ -21,6 +25,7 @@
     borderOpenClass?: string;
     header?: Snippet;
     children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
     [key: string]: unknown;
   }
 
@@ -31,9 +36,12 @@
     borderOpenClass = "",
     header,
     children,
+    labels: userLabels = {},
     ...restProps
   }: Props = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   const { openItems, toggle, flush } = getContext<{
     openItems: Writable<Set<string>>;
     toggle: (id: string) => void;
@@ -76,7 +84,7 @@
       onclick={handleClick}
     >
       <span class={typography.body}>
-        {#if header}{@render header()}{:else}Accordion Item{/if}
+        {#if header}{@render header()}{:else}{labels.accordionItem}{/if}
       </span>
       <!-- Flowbite arrow icon -->
       <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />

package/dist/primitives/Accordion/AccordionItem.svelte.d.ts

@@ -7,16 +7,18 @@
    *   borderOpenClass: string - Additional classes when open
    */
 import type { Snippet } from 'svelte';
-interface Props {
+declare const AccordionItem: import("svelte").Component<{
+    [key: string]: unknown;
     open?: boolean;
     class?: string;
     border?: boolean;
     borderOpenClass?: string;
     header?: Snippet;
     children?: Snippet;
-    [key: string]: unknown;
-}
-declare const AccordionItem: import("svelte").Component<Props, {}, "">;
+    labels?: Partial<{
+        accordionItem: string;
+    }>;
+}, {}, "">;
 type AccordionItem = ReturnType<typeof AccordionItem>;
 export default AccordionItem;
 //# sourceMappingURL=AccordionItem.svelte.d.ts.map

package/dist/primitives/Accordion/AccordionItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/AccordionItem.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;KAOK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA8EH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/AccordionItem.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;KAOK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAqGtC,QAAA,MAAM,aAAa;;WAhFR,OAAO;YACN,MAAM;aACL,OAAO;sBACE,MAAM;aACf,OAAO;eACL,OAAO;aACT,OAAO;;MAAsB;UA0EiB,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/primitives/Alert/Alert.svelte

@@ -7,6 +7,10 @@
     type AlertColorVariant,
   } from '../../tokens/variants.js';
 
+  const defaultLabels = {
+    close: 'Close',
+  };
+
   interface Props {
     title?: string;
     message?: string;
@@ -14,6 +18,7 @@
     onClose?: () => void;
     onclose?: () => void;
     children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
     [key: string]: unknown;
   }
 
@@ -24,9 +29,12 @@
     onClose,
     onclose,
     children,
+    labels: userLabels = {},
     ...restProps
   }: Props = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   let alertClasses = $derived(alertColorVariants[type] || alertColorVariants.info);
   let closeButtonClasses = $derived(alertCloseButtonVariants[type] || alertCloseButtonVariants.info);
 
@@ -54,10 +62,10 @@
 <button
       type="button"
       class="ms-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8 {closeButtonClasses}"
-      aria-label="Close"
+      aria-label={labels.close}
       onclick={handleClose}
     >
-      <span class="sr-only">Close</span>
+      <span class="sr-only">{labels.close}</span>
       <CloseOutline class="w-3 h-3" />
     </button>
   {/if}

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

@@ -1,15 +1,17 @@
 import type { Snippet } from 'svelte';
 import { type AlertColorVariant } from '../../tokens/variants.js';
-interface Props {
+declare const Alert: import("svelte").Component<{
+    [key: string]: unknown;
     title?: string;
     message?: string;
     type?: AlertColorVariant;
     onClose?: () => void;
     onclose?: () => void;
     children?: Snippet;
-    [key: string]: unknown;
-}
-declare const Alert: import("svelte").Component<Props, {}, "">;
+    labels?: Partial<{
+        close: string;
+    }>;
+}, {}, "">;
 type Alert = ReturnType<typeof Alert>;
 export default Alert;
 //# sourceMappingURL=Alert.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Alert/Alert.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAGH,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AAGlC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAkDH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Alert/Alert.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAGH,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AAoEpC,QAAA,MAAM,KAAK;;YAxDC,MAAM;cACJ,MAAM;WACT,iBAAiB;cACd,MAAM,IAAI;cACV,MAAM,IAAI;eACT,OAAO;aACT,OAAO;;MAAsB;UAkDS,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/primitives/Breadcrumb/Breadcrumb.svelte

@@ -2,6 +2,10 @@
   import { ChevronRightOutline, HomeSolid } from "../Icons";
   import { typography } from "../../tokens/typography";
 
+  const defaultLabels = {
+    breadcrumb: 'Breadcrumb',
+  };
+
   interface BreadcrumbItem {
     name: string;
     href: string;
@@ -20,6 +24,7 @@
     subtitle?: string;
     /** Click handler callback */
     onclick?: (crumb: BreadcrumbItem) => void;
+    labels?: Partial<typeof defaultLabels>;
   }
 
   let {
@@ -29,8 +34,11 @@
     title = '',
     subtitle = '',
     onclick,
+    labels: userLabels = {},
   }: Props = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   function handleClick(crumb: BreadcrumbItem) {
     onclick?.(crumb);
   }
@@ -38,7 +46,7 @@
 
 <div class="flex flex-col items-start gap-2 min-w-0">
   {#if data.length > 0}
-    <nav class={`flex items-center ${typography.smMuted} font-medium ${className}`} aria-label="Breadcrumb">
+    <nav class={`flex items-center ${typography.smMuted} font-medium ${className}`} aria-label={labels.breadcrumb}>
       <ol class="inline-flex items-center rtl:space-x-reverse flex-wrap">
         {#each data as crumb, index}
           <li class="inline-flex items-center">

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

@@ -1,10 +1,9 @@
-interface BreadcrumbItem {
-    name: string;
-    href: string;
-}
-interface Props {
+declare const Breadcrumb: import("svelte").Component<{
     /** Breadcrumb items array */
-    data?: BreadcrumbItem[];
+    data?: {
+        name: string;
+        href: string;
+    }[];
     /** Additional CSS classes */
     className?: string;
     /** Show built-in home icon for first item */
@@ -14,9 +13,14 @@ interface Props {
     /** Subtitle displayed below title */
     subtitle?: string;
     /** Click handler callback */
-    onclick?: (crumb: BreadcrumbItem) => void;
-}
-declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+    onclick?: (crumb: {
+        name: string;
+        href: string;
+    }) => void;
+    labels?: Partial<{
+        breadcrumb: string;
+    }>;
+}, {}, "">;
 type Breadcrumb = ReturnType<typeof Breadcrumb>;
 export default Breadcrumb;
 //# sourceMappingURL=Breadcrumb.svelte.d.ts.map

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;AA2EH,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":"AA0GA,QAAA,MAAM,UAAU;IAtFZ,6BAA6B;WACtB;cAND,MAAM;cACN,MAAM;OAKW;IACvB,6BAA6B;gBACjB,MAAM;IAClB,6CAA6C;mBAC9B,OAAO;IACtB,4CAA4C;YACpC,MAAM;IACd,qCAAqC;eAC1B,MAAM;IACjB,6BAA6B;cACnB,CAAC,KAAK;cAhBV,MAAM;cACN,MAAM;KAeoB,KAAK,IAAI;aAChC,OAAO;;MAAsB;UA0Ec,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -104,11 +104,12 @@ describe('Checkbox Colors', () => {
 });
 
 describe('Checkbox Input Styling', () => {
-  test('has w-4 and h-4 size', () => {
+  test('has w-4 and h-4 size with shrink-0', () => {
     const { container } = render(Checkbox);
     const input = container.querySelector('input');
     expect(input).toHaveClass('w-4');
     expect(input).toHaveClass('h-4');
+    expect(input).toHaveClass('shrink-0');
   });
 
   test('has rounded corners', () => {
@@ -117,24 +118,12 @@ describe('Checkbox Input Styling', () => {
     expect(input).toHaveClass('rounded');
   });
 
-  test('has bg-gray-100 background', () => {
-    const { container } = render(Checkbox);
-    const input = container.querySelector('input');
-    expect(input).toHaveClass('bg-gray-100');
-  });
-
   test('has border-gray-300 border', () => {
     const { container } = render(Checkbox);
     const input = container.querySelector('input');
     expect(input).toHaveClass('border-gray-300');
   });
 
-  test('has dark mode background', () => {
-    const { container } = render(Checkbox);
-    const input = container.querySelector('input');
-    expect(input).toHaveClass('dark:bg-gray-700');
-  });
-
   test('has dark mode border', () => {
     const { container } = render(Checkbox);
     const input = container.querySelector('input');
@@ -173,10 +162,10 @@ describe('Checkbox Label Styling', () => {
     expect(label).toHaveClass('inline-flex');
   });
 
-  test('label has items-center alignment', () => {
+  test('label has items-start alignment', () => {
     const { container } = render(Checkbox);
     const label = container.querySelector('label');
-    expect(label).toHaveClass('items-center');
+    expect(label).toHaveClass('items-start');
   });
 
   test('label has gap-2 spacing', () => {

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -53,9 +53,9 @@
   let colorClass = $derived(colorClasses[color] || colorClasses.blue);
 
   let inputClasses = $derived([
-    "w-4 h-4 rounded",
-    "bg-gray-100 border-gray-300",
-    "dark:bg-gray-700 dark:border-gray-600",
+    "w-4 h-4 shrink-0 rounded",
+    "border-gray-300",
+    "dark:border-gray-600",
     "focus:outline-hidden",
     colorClass,
     disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
@@ -63,7 +63,7 @@
 </script>
 
 <label
-  class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'} select-none {className}"
+  class="inline-flex items-start gap-2 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'} select-none {className}"
   {...restProps}
 >
   <input

package/dist/primitives/DarkModeToggle.svelte

@@ -4,12 +4,23 @@
   import MoonIcon from "./Icons/MoonIcon.svelte";
   import Button from "./Button/Button.svelte";
 
+  const defaultLabels = {
+    toggleTheme: 'Toggle theme',
+    autoThemeClickForLight: 'Auto theme (following device) - click for light mode',
+    lightModeClickForDark: 'Light mode - click for dark mode',
+    darkModeClickForAuto: 'Dark mode - click for auto',
+  };
+
   interface Props {
     /** Container selector for applying dark class */
     containerSelector?: string;
+    /** Override user-visible strings */
+    labels?: Partial<typeof defaultLabels>;
   }
 
-  let { containerSelector = ".performer-portal" }: Props = $props();
+  let { containerSelector = ".performer-portal", labels: userLabels = {} }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
 
   let themeMode = $state<"auto" | "light" | "dark">("auto");
   let isDark = $state(false);
@@ -83,10 +94,10 @@
 
   let titleText = $derived(
     themeMode === "auto"
-      ? "Auto theme (following device) - click for light mode"
+      ? labels.autoThemeClickForLight
       : themeMode === "light"
-        ? "Light mode - click for dark mode"
-        : "Dark mode - click for auto"
+        ? labels.lightModeClickForDark
+        : labels.darkModeClickForAuto
   );
 </script>
 
@@ -94,7 +105,7 @@
   variant="alternative"
   onclick={toggleTheme}
   class="relative h-10 w-10 overflow-hidden p-0"
-  aria-label="Toggle theme"
+  aria-label={labels.toggleTheme}
   title={titleText}
 >
   <span

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

@@ -1,8 +1,14 @@
-interface Props {
+declare const DarkModeToggle: import("svelte").Component<{
     /** Container selector for applying dark class */
     containerSelector?: string;
-}
-declare const DarkModeToggle: import("svelte").Component<Props, {}, "">;
+    /** Override user-visible strings */
+    labels?: Partial<{
+        toggleTheme: string;
+        autoThemeClickForLight: string;
+        lightModeClickForDark: string;
+        darkModeClickForAuto: string;
+    }>;
+}, {}, "">;
 type DarkModeToggle = ReturnType<typeof DarkModeToggle>;
 export default DarkModeToggle;
 //# sourceMappingURL=DarkModeToggle.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DarkModeToggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/DarkModeToggle.svelte.ts"],"names":[],"mappings":"AASE,UAAU,KAAK;IACb,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAwHH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DarkModeToggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/DarkModeToggle.svelte.ts"],"names":[],"mappings":"AA8IA,QAAA,MAAM,cAAc;IAxHhB,iDAAiD;wBAC7B,MAAM;IAC1B,oCAAoC;aAC3B,OAAO;;;;;MAAsB;UAqHkB,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/primitives/Dropdown/Dropdown.svelte

@@ -3,14 +3,20 @@
   import type { Snippet } from "svelte";
   import { bloom } from "../../utils/transitions.js";
 
+  const defaultLabels = {
+    menu: 'Menu',
+  };
+
   interface Props {
     open?: boolean;
     activeUrl?: string;
     placement?: string;
     class?: string;
+    /** @deprecated Use `labels.menu` instead */
     ariaLabel?: string;
     onclose?: () => void;
     children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
     [key: string]: unknown;
   }
 
@@ -19,12 +25,15 @@
     activeUrl = "",
     placement = "bottom",
     class: className = "",
-    ariaLabel = "Menu",
+    ariaLabel = undefined,
     onclose,
     children,
+    labels: userLabels = {},
     ...restProps
   }: Props = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   let dropdownRef: HTMLUListElement | null = $state(null);
   let containerRef: HTMLDivElement | null = $state(null);
   let focusedIndex = $state(-1);
@@ -159,7 +168,7 @@
     bind:this={containerRef}
     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}
+    aria-label={ariaLabel ?? labels.menu}
     transition:bloom={{ origin: placementOrigins[placement] || "top left" }}
     {...restProps}
   >

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

@@ -1,15 +1,18 @@
 import type { Snippet } from "svelte";
-interface Props {
+declare const Dropdown: import("svelte").Component<{
+    [key: string]: unknown;
     open?: boolean;
     activeUrl?: string;
     placement?: string;
     class?: string;
+    /** @deprecated Use `labels.menu` instead */
     ariaLabel?: string;
     onclose?: () => void;
     children?: Snippet;
-    [key: string]: unknown;
-}
-declare const Dropdown: import("svelte").Component<Props, {}, "open">;
+    labels?: Partial<{
+        menu: string;
+    }>;
+}, {}, "open">;
 type Dropdown = ReturnType<typeof Dropdown>;
 export default Dropdown;
 //# sourceMappingURL=Dropdown.svelte.d.ts.map

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;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"}
+{"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;AAkLtC,QAAA,MAAM,QAAQ;;WArKH,OAAO;gBACF,MAAM;gBACN,MAAM;YACV,MAAM;IACd,4CAA4C;gBAChC,MAAM;cACR,MAAM,IAAI;eACT,OAAO;aACT,OAAO;;MAAsB;cA6JY,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/primitives/Input/Input.svelte

@@ -16,6 +16,16 @@
   import { formInputSizes } from "../../tokens/sizing";
   import { formatCreditCardNumber, formatPhoneNumber } from "../../utils/formatters";
 
+  const defaultLabels = {
+    hidePassword: 'Hide password',
+    showPassword: 'Show password',
+    clearInput: 'Clear input',
+    buttonIconAlt: 'Button Icon',
+    inputIconAlt: 'Input icon',
+    helperIconAlt: 'Helper icon',
+    optional: '(optional)',
+  };
+
   /** @type {{
     required?: boolean,
     disabled?: boolean,
@@ -107,9 +117,12 @@
     onblur,
     oninputchange,
     leftIcon,
+    labels: userLabels = {},
     ...restProps
   } = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   let inputValue = $state(value);
   let inputElement = $state(null);
   let debounceTimer;
@@ -275,7 +288,7 @@
         <span class="text-sm font-medium {statusType === 'success' ? 'text-green-600' : statusType === 'error' ? 'text-red-500' : ''}">({statusText})</span>
       {/if}
       {#if optional}
-        <span class={typography.smMuted}>(optional)</span>
+        <span class={typography.smMuted}>{labels.optional}</span>
       {/if}
     </div>
   {/if}
@@ -328,7 +341,7 @@
           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"
           tabindex="-1"
-          aria-label={isPasswordVisible ? "Hide password" : "Show password"}
+          aria-label={isPasswordVisible ? labels.hidePassword : labels.showPassword}
         >
           {#if isPasswordVisible}
             <EyeSlashOutline class="w-5 h-5" />
@@ -373,7 +386,7 @@
             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"
-            aria-label="Clear input"
+            aria-label={labels.clearInput}
             tabindex="-1"
           >
             <CloseCircleOutline class="w-4 h-4" />
@@ -386,7 +399,7 @@
             class="absolute inset-y-0 right-0 gap-1 flex items-center justify-center px-4 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed {helperText || hintText || errorText ? 'mb-7' : ''}"
           >
             {#if buttonIcon}
-              <img src={buttonIcon} alt="Button Icon" class="w-5 h-5" />
+              <img src={buttonIcon} alt={labels.buttonIconAlt} class="w-5 h-5" />
             {/if}
             {#if buttonText}
               <span class="text-sm font-medium">{buttonText}</span>
@@ -394,7 +407,7 @@
           </button>
         {/if}
         {#if icon && type !== "textarea" && !(showClearButton && inputValue)}
-          <img src={icon} alt="Input icon" class="absolute inset-y-0 right-0 w-5 h-5 mr-3 top-1/2 transform -translate-y-1/2" />
+          <img src={icon} alt={labels.inputIconAlt} class="absolute inset-y-0 right-0 w-5 h-5 mr-3 top-1/2 transform -translate-y-1/2" />
         {/if}
       </div>
     {/if}
@@ -407,7 +420,7 @@
     {:else if helperText || hintText}
       <div class={`mt-2 flex items-center ${typography.xsMuted} opacity-65`}>
         {#if helperIcon || hintIcon}
-          <img src={helperIcon || hintIcon} alt="Helper icon" class="w-4 h-4 mr-2" />
+          <img src={helperIcon || hintIcon} alt={labels.helperIconAlt} class="w-4 h-4 mr-2" />
         {/if}
         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
         <span>{@html helperText || hintText}</span>