@getmicdrop/svelte-components 5.18.0 → 5.18.1

package/dist/recipes/SuperLogin/SuperLogin.svelte

@@ -12,16 +12,27 @@
   import Checkbox from "../../primitives/Checkbox/Checkbox.svelte";
   import { typography } from '../../tokens/typography';
 
+  /** Escape HTML special characters to prevent XSS in {@html} blocks. */
+  function escapeHtml(str) {
+    if (!str) return '';
+    return String(str)
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
   /**
    * Default labels for all user-visible strings in SuperLogin.
    * Consumers can override any string via the `labels` prop.
    */
   const defaultLabels = {
     // Login view
-    welcomeTitle: (name) => name ? `Welcome, ${name}!` : 'Welcome!',
-    signInDescription: (portal) => `Sign in to access your ${portal}.`,
-    welcomeBackTitle: (name) => `Welcome back, ${name}`,
-    notYouButton: (name) => `Not ${name}?`,
+    welcomeTitle: (name) => name ? `Welcome, ${escapeHtml(name)}!` : 'Welcome!',
+    signInDescription: (portal) => `Sign in to access your ${escapeHtml(portal)}.`,
+    welcomeBackTitle: (name) => `Welcome back, ${escapeHtml(name)}`,
+    notYouButton: (name) => `Not ${escapeHtml(name)}?`,
     logInTitle: 'Log in',
     emailLabel: 'Email',
     passwordLabel: 'Password',
@@ -33,12 +44,12 @@
 
     // Account selection view
     selectAccountTitle: 'Select account',
-    multipleAccountsDescription: (email) => `You have multiple accounts associated with ${email}. Select one to continue.`,
+    multipleAccountsDescription: (email) => `You have multiple accounts associated with <span class="${typography.sm}">${escapeHtml(email)}</span>. Select one to continue.`,
     loginDifferentEmail: 'Log in with a different email',
     performerFallback: 'Performer',
 
     // Setup view
-    setupTitle: (name) => name ? `Welcome, ${name}` : 'Set up your account',
+    setupTitle: (name) => name ? `Welcome, ${escapeHtml(name)}` : 'Set up your account',
     setupDescription: 'Create a password to finish setting up your account.',
     createPasswordLabel: 'Create password',
     completeSetupButton: 'Complete setup',
@@ -58,10 +69,10 @@
 
     // Success view
     checkEmailTitle: 'Check your email',
-    resentMessage: (type, email) => `We've resent ${type === 'reset' ? 'password reset instructions' : 'a login link'} to ${email} if it is an email on file.`,
+    resentMessage: (type, email) => `We've resent ${type === 'reset' ? 'password reset instructions' : 'a login link'} to <span class="${typography.sm}">${escapeHtml(email)}</span> if it is an email on file.`,
     resentFollowUp: 'Please check again. If you still haven\'t received an email,',
     tryDifferentEmail: 'try a different email',
-    successMessage: (type, email) => `Thanks! If ${email} matches an email we have on file, then we've sent you an email containing further instructions for ${type === 'reset' ? 'resetting your password' : 'signing in'}.`,
+    successMessage: (type, email) => `Thanks! If <span class="${typography.sm}">${escapeHtml(email)}</span> matches an email we have on file, then we've sent you an email containing further instructions for ${type === 'reset' ? 'resetting your password' : 'signing in'}.`,
     noEmailReceived: 'If you haven\'t received an email in 5 minutes, check your spam,',
     resend: 'resend',
     returnToSignIn: 'Return to sign in',
@@ -859,11 +870,8 @@
                 {labels.selectAccountTitle}
               </h2>
               <p class={typography.smMuted}>
-                {#if true}
-                  {@const message = typeof labels.multipleAccountsDescription === 'function' ? labels.multipleAccountsDescription(email) : labels.multipleAccountsDescription}
-                  {@const parts = message.split(email)}
-                  {parts[0]}<span class={typography.sm}>{email}</span>{parts[1] || ''}
-                {/if}
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -- labels use escapeHtml() for XSS safety -->
+                {@html typeof labels.multipleAccountsDescription === 'function' ? labels.multipleAccountsDescription(email) : labels.multipleAccountsDescription}
               </p>
             </div>
 
@@ -1158,11 +1166,8 @@
               </h2>
               {#if isResendSuccess}
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
-                  {#if true}
-                    {@const message = typeof labels.resentMessage === 'function' ? labels.resentMessage(successType, successEmail) : labels.resentMessage}
-                    {@const parts = message.split(successEmail)}
-                    {parts[0]}<span class={typography.sm}>{successEmail}</span>{parts[1] || ''}
-                  {/if}
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -- labels use escapeHtml() for XSS safety -->
+                  {@html typeof labels.resentMessage === 'function' ? labels.resentMessage(successType, successEmail) : labels.resentMessage}
                 </p>
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
                   {labels.resentFollowUp} <Button
@@ -1172,11 +1177,8 @@
                 </p>
               {:else}
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
-                  {#if true}
-                    {@const message = typeof labels.successMessage === 'function' ? labels.successMessage(successType, successEmail) : labels.successMessage}
-                    {@const parts = message.split(successEmail)}
-                    {parts[0]}<span class={typography.sm}>{successEmail}</span>{parts[1] || ''}
-                  {/if}
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -- labels use escapeHtml() for XSS safety -->
+                  {@html typeof labels.successMessage === 'function' ? labels.successMessage(successType, successEmail) : labels.successMessage}
                 </p>
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
                   {labels.noEmailReceived} <Button variant="link" onclick={handleResend}>{labels.resend}</Button>, or

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":";;;;;AAgjCA;iBAz7BkC,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;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAy7BxY;wBAz7BtC;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,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}
+{"version":3,"file":"SuperLogin.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/SuperLogin/SuperLogin.svelte.js"],"names":[],"mappings":";;;;;AAkjCA;iBAh7BkC,MAAM;cAAY,MAAM;cAAY,MAAM;kBAAgB,MAAM;kBAAgB,OAAO;gBAAc,MAAM;gBAAc,MAAM;iBAAe,MAAM;0BAAwB,MAAM;wBAAsB,MAAM;aAAW,MAAM;;;;;yBAAoI,OAAO;mBAAiB,MAAM;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAg7BxY;wBAh7BtC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,eAAe,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,kBAAkB,CAAC,WAAW;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}

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

@@ -2,6 +2,10 @@
   import type { Component, Snippet } from 'svelte';
   import { typography } from '../../../tokens/typography';
 
+  const defaultLabels = {
+    noResultsFound: 'No results found',
+  };
+
   interface Props {
     /** Title text (alias for message) */
     title?: string;
@@ -23,6 +27,8 @@
     class?: string;
     /** Optional action content (buttons, links, etc.) */
     children?: Snippet;
+    /** Override user-visible strings */
+    labels?: Partial<typeof defaultLabels>;
   }
 
   let {
@@ -35,11 +41,14 @@
     iconType = 'component',
     iconSize = 'w-20 h-20',
     class: className = '',
-    children
+    children,
+    labels: userLabels = {},
   }: Props = $props();
-  
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   // Support both naming conventions
-  let displayTitle = $derived(title || message || 'No results found');
+  let displayTitle = $derived(title || message || labels.noResultsFound);
   let displaySubtext = $derived(description || subtext);
 </script>
 

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

@@ -1,5 +1,5 @@
 import type { Component, Snippet } from 'svelte';
-interface Props {
+declare const EmptyState: Component<{
     /** Title text (alias for message) */
     title?: string;
     /** Main message to display */
@@ -13,15 +13,18 @@ interface Props {
     /** Image path (when iconType='image') */
     imageSrc?: string;
     /** Type of icon provided */
-    iconType?: 'component' | 'image';
+    iconType?: "component" | "image";
     /** Size classes for the icon */
     iconSize?: string;
     /** Additional CSS classes */
     class?: string;
     /** Optional action content (buttons, links, etc.) */
     children?: Snippet;
-}
-declare const EmptyState: Component<Props, {}, "">;
+    /** Override user-visible strings */
+    labels?: Partial<{
+        noResultsFound: string;
+    }>;
+}, {}, "">;
 type EmptyState = ReturnType<typeof EmptyState>;
 export default EmptyState;
 //# sourceMappingURL=EmptyState.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/feedback/EmptyState/EmptyState.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAI/C,UAAU,KAAK;IACb,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACjC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgDH,QAAA,MAAM,UAAU,0BAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"EmptyState.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/feedback/EmptyState/EmptyState.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAiFjD,QAAA,MAAM,UAAU;IArEZ,qCAAqC;YAC7B,MAAM;IACd,8BAA8B;cACpB,MAAM;IAChB,2CAA2C;kBAC7B,MAAM;IACpB,iCAAiC;cACvB,MAAM;IAChB,iDAAiD;WAC1C,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI;IAC5B,yCAAyC;eAC9B,MAAM;IACjB,4BAA4B;eACjB,WAAW,GAAG,OAAO;IAChC,gCAAgC;eACrB,MAAM;IACjB,6BAA6B;YACrB,MAAM;IACd,qDAAqD;eAC1C,OAAO;IAClB,oCAAoC;aAC3B,OAAO;;MAAsB;UAgDc,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/recipes/inputs/MultiSelect.svelte

@@ -3,6 +3,11 @@
   import { typography } from '../../tokens/typography';
   import { bloom } from "../../utils/transitions.js";
 
+  const defaultLabels = {
+    clearAll: 'Clear all',
+    removeItem: (name) => `Remove ${name}`,
+  };
+
 
   /**
    * @typedef {Object} SelectItem
@@ -43,8 +48,11 @@
     size = "md",
     animateFocus = true,
     onchange,
+    labels: userLabels = {},
   } = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   let isOpen = $state(false);
   let triggerElement = $state();
   let dropdownElement = $state();
@@ -209,7 +217,7 @@
                   type="button"
                   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}"
+                  aria-label={typeof labels.removeItem === 'function' ? labels.removeItem(item.name) : `Remove ${item.name}`}
                 >
                   <CloseOutline class="w-3 h-3" />
                 </button>
@@ -227,7 +235,7 @@
             type="button"
             class="flex items-center justify-center w-5 h-5 p-0 bg-transparent border-none cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 rounded"
             onclick={clearAll}
-            aria-label="Clear all"
+            aria-label={labels.clearAll}
           >
             <CloseOutline class="w-3.5 h-3.5" />
           </button>

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":";;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/MultiSelect.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgRA;YAhBY,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE;YACnB;;;;cA7OI,MAAM;;;;eACN,MAAM,GAAG,MAAM;OA4OP;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;;;;kBA1P7C,MAAM;;;;mBACN,MAAM,GAAG,MAAM;WAyP0C,CAAA;KAAE,KAAK,IAAI;gBAE1B;;;;;UA5P1C,MAAM;;;;WACN,MAAM,GAAG,MAAM"}

package/dist/recipes/inputs/OTPInput.svelte

@@ -6,12 +6,20 @@
     value: string[];
     code: string;
   }
+
+  const defaultLabels = {
+    enterCode: (len: number) => `Enter ${len}-digit verification code`,
+    instructions: (len: number) => `Enter one digit per box. Use backspace to navigate back. You can also paste a ${len}-digit code.`,
+    digitLabel: (index: number, total: number) => `Digit ${index + 1} of ${total}`,
+  };
+
   interface Props {
     value?: string[];
     length?: number;
     disabled?: boolean;
     oncomplete?: (event: CompleteEvent) => void;
     onchange?: (event: ChangeEvent) => void;
+    labels?: Partial<typeof defaultLabels>;
   }
 
   let {
@@ -20,8 +28,11 @@
     disabled = false,
     oncomplete,
     onchange,
+    labels: userLabels = {},
   }: Props = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   let inputs = $state<HTMLInputElement[]>([]);
 
   // Initialize value array if needed
@@ -92,10 +103,10 @@
 <div
   class="flex justify-between gap-2 md:gap-3"
   role="group"
-  aria-label="Enter {length}-digit verification code"
+  aria-label={typeof labels.enterCode === 'function' ? labels.enterCode(length) : labels.enterCode}
 >
   <span id="otp-instructions" class="sr-only">
-    Enter one digit per box. Use backspace to navigate back. You can also paste a {length}-digit code.
+    {typeof labels.instructions === 'function' ? labels.instructions(length) : labels.instructions}
   </span>
   {#each value as digit, index}
     <input
@@ -106,7 +117,7 @@
       maxlength="1"
       value={digit}
       {disabled}
-      aria-label="Digit {index + 1} of {length}"
+      aria-label={labels.digitLabel(index, 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-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)}

package/dist/recipes/inputs/OTPInput.svelte.d.ts

@@ -1,18 +1,20 @@
-interface CompleteEvent {
-    code: string;
-}
-interface ChangeEvent {
-    value: string[];
-    code: string;
-}
-interface Props {
+declare const OTPInput: import("svelte").Component<{
     value?: string[];
     length?: number;
     disabled?: boolean;
-    oncomplete?: (event: CompleteEvent) => void;
-    onchange?: (event: ChangeEvent) => void;
-}
-declare const OTPInput: import("svelte").Component<Props, {
+    oncomplete?: (event: {
+        code: string;
+    }) => void;
+    onchange?: (event: {
+        value: string[];
+        code: string;
+    }) => void;
+    labels?: Partial<{
+        enterCode: (len: number) => string;
+        instructions: (len: number) => string;
+        digitLabel: (index: number, total: number) => string;
+    }>;
+}, {
     focus: () => void;
     clear: () => void;
 }, "value">;

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

@@ -1 +1 @@
-{"version":3,"file":"OTPInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/OTPInput.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAC;CACd;AACD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AACD,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACzC;AA4FH,QAAA,MAAM,QAAQ;;;WAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"OTPInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/OTPInput.svelte.ts"],"names":[],"mappings":"AAoHA,QAAA,MAAM,QAAQ;YAjGF,MAAM,EAAE;aACP,MAAM;eACJ,OAAO;iBACL,CAAC,KAAK;cAjBb,MAAM;KAiBsB,KAAK,IAAI;eAChC,CAAC,KAAK;eAfV,MAAM,EAAE;cACT,MAAM;KAckB,KAAK,IAAI;aAC9B,OAAO;yBAXC,MAAM;4BACH,MAAM;4BACN,MAAM,SAAS,MAAM;MASH;;;;WA4FY,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/recipes/inputs/PasswordInput.svelte

@@ -17,6 +17,10 @@
   import Input from '../../primitives/Input/Input.svelte';
   import PasswordStrengthIndicator from './PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
 
+  const defaultLabels = {
+    passwordStrength: 'Password strength:',
+  };
+
   interface Props {
     /** Password value */
     value?: string;
@@ -54,6 +58,8 @@
     oninput?: (value: string) => void;
     onblur?: () => void;
     onfocus?: () => void;
+    /** Override user-visible strings */
+    labels?: Partial<typeof defaultLabels>;
   }
 
   let {
@@ -76,8 +82,11 @@
     oninput,
     onblur,
     onfocus,
+    labels: userLabels = {},
   }: Props = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   // Password strength tracking
   let strengthScore = $state(-1);
   let strengthText = $state('');
@@ -114,7 +123,7 @@
       bind:textColor={strengthColor}
     >
       <p class="text-xs {strengthColor}">
-        Password strength: {strengthText}
+        {labels.passwordStrength} {strengthText}
       </p>
     </PasswordStrengthIndicator>
   {/if}

package/dist/recipes/inputs/PasswordInput.svelte.d.ts

@@ -1,4 +1,4 @@
-interface Props {
+declare const PasswordInput: import("svelte").Component<{
     /** Password value */
     value?: string;
     /** Label text */
@@ -20,7 +20,7 @@ interface Props {
     /** Show password strength indicator */
     showStrength?: boolean;
     /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     /** Minimum password length */
     minlength?: number | null;
     /** Maximum password length */
@@ -34,8 +34,11 @@ interface Props {
     oninput?: (value: string) => void;
     onblur?: () => void;
     onfocus?: () => void;
-}
-declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
+    /** Override user-visible strings */
+    labels?: Partial<{
+        passwordStrength: string;
+    }>;
+}, {}, "value">;
 type PasswordInput = ReturnType<typeof PasswordInput>;
 export default PasswordInput;
 //# sourceMappingURL=PasswordInput.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/PasswordInput.svelte.ts"],"names":[],"mappings":"AAsBE,UAAU,KAAK;IACb,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAiDH,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/PasswordInput.svelte.ts"],"names":[],"mappings":"AAoHA,QAAA,MAAM,aAAa;IArFf,qBAAqB;YACb,MAAM;IACd,iBAAiB;YACT,MAAM;IACd,uBAAuB;kBACT,MAAM;IACpB,2BAA2B;WACpB,MAAM;IACb,yBAAyB;SACpB,MAAM;IACX,oCAAoC;eACzB,OAAO;IAClB,oCAAoC;eACzB,OAAO;IAClB,+BAA+B;YACvB,MAAM;IACd,kCAAkC;WAC3B,MAAM;IACb,uCAAuC;mBACxB,OAAO;IACtB,mBAAmB;WACZ,IAAI,GAAG,IAAI,GAAG,IAAI;IACzB,8BAA8B;gBAClB,MAAM,GAAG,IAAI;IACzB,8BAA8B;gBAClB,MAAM,GAAG,IAAI;IACzB,6BAA6B;mBACd,MAAM;IACrB,iDAAiD;yBAC5B,OAAO;IAC5B,2CAA2C;YACnC,MAAM;cAEJ,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;aACxB,MAAM,IAAI;cACT,MAAM,IAAI;IACpB,oCAAoC;aAC3B,OAAO;;MAAsB;eAgDiB,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte

@@ -5,12 +5,20 @@
     import { cubicOut } from "svelte/easing";
     import { untrack } from "svelte";
 
+    const defaultLabels = {
+      tooWeak: 'Too weak',
+      weak: 'Weak',
+      good: 'Good',
+      strong: 'Strong',
+    };
+
     interface Props {
       password?: string;
       strengthText?: string;
       score?: number;
       textColor?: string;
       children?: Snippet;
+      labels?: Partial<typeof defaultLabels>;
     }
 
     let {
@@ -19,38 +27,41 @@
       score = $bindable(-1),
       textColor = $bindable(""),
       children,
+      labels: userLabels = {},
     }: Props = $props();
 
+    let labels = $derived({ ...defaultLabels, ...userLabels });
+
     let debouncedPassword = $state("");
     // Use a plain variable for timer to avoid reactive dependency
     let timer: ReturnType<typeof setTimeout> | undefined;
 
-    const customOptions = [
+    let customOptions = $derived([
         {
             id: 0,
-            value: "Too weak",
+            value: labels.tooWeak,
             minDiversity: 0,
             minLength: 0,
         },
         {
             id: 1,
-            value: "Weak",
+            value: labels.weak,
             minDiversity: 1,
             minLength: 6,
         },
         {
             id: 2,
-            value: "Good",
+            value: labels.good,
             minDiversity: 2,
             minLength: 8,
         },
         {
             id: 3,
-            value: "Strong",
+            value: labels.strong,
             minDiversity: 3,
             minLength: 10,
         },
-    ] as const;
+    ] as const);
 
     // Debounce password updates - timer is not reactive to avoid dependency cycle
     $effect(() => {
@@ -82,10 +93,10 @@
 
     // Derive text and color from computedScore (not from bindable score)
     let computedStrengthText = $derived(
-        computedScore === 0 ? "Too weak" :
-        computedScore === 1 ? "Weak" :
-        computedScore === 2 ? "Good" :
-        computedScore === 3 ? "Strong" : ""
+        computedScore === 0 ? labels.tooWeak :
+        computedScore === 1 ? labels.weak :
+        computedScore === 2 ? labels.good :
+        computedScore === 3 ? labels.strong : ""
     );
 
     let computedTextColor = $derived(computedScore <= 1 ? "text-red-600" : "text-green-600");

package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.d.ts

@@ -1,12 +1,17 @@
 import type { Snippet } from 'svelte';
-interface Props {
+declare const PasswordStrengthIndicator: import("svelte").Component<{
     password?: string;
     strengthText?: string;
     score?: number;
     textColor?: string;
     children?: Snippet;
-}
-declare const PasswordStrengthIndicator: import("svelte").Component<Props, {}, "textColor" | "strengthText" | "score">;
+    labels?: Partial<{
+        tooWeak: string;
+        weak: string;
+        good: string;
+        strong: string;
+    }>;
+}, {}, "textColor" | "strengthText" | "score">;
 type PasswordStrengthIndicator = ReturnType<typeof PasswordStrengthIndicator>;
 export default PasswordStrengthIndicator;
 //# sourceMappingURL=PasswordStrengthIndicator.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordStrengthIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOlC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2HL,QAAA,MAAM,yBAAyB,+EAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"PasswordStrengthIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAkJtC,QAAA,MAAM,yBAAyB;eA7Hd,MAAM;mBACF,MAAM;YACb,MAAM;gBACF,MAAM;eACP,OAAO;aACT,OAAO;;;;;MAAsB;8CAwH2B,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/recipes/inputs/PhoneInput.svelte

@@ -16,11 +16,9 @@
   import type { CountryCode } from "libphonenumber-js/min";
 
   const defaultLabels = {
-    searchPlaceholder: 'Search countries...',
+    searchPlaceholder: 'Search...',
     noResults: 'No countries found',
     countrySelector: 'Select country',
-    suggested: 'Suggested',
-    allCountries: 'All countries',
     optional: '(optional)',
   };
 
@@ -209,8 +207,6 @@
           searchPlaceholder: labels.searchPlaceholder,
           noResults: labels.noResults,
           countrySelector: labels.countrySelector,
-          suggested: labels.suggested,
-          allCountries: labels.allCountries,
         }}
       />
 

package/dist/recipes/inputs/PhoneInput.svelte.d.ts

@@ -21,8 +21,6 @@ declare const PhoneInput: import("svelte").Component<{
         searchPlaceholder: string;
         noResults: string;
         countrySelector: string;
-        suggested: string;
-        allCountries: string;
         optional: string;
     }>;
     onchange?: (detail: {

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/PhoneInput.svelte.ts"],"names":[],"mappings":"AA2PA,QAAA,MAAM,UAAU;;YAlNJ,MAAM;YACN,MAAM;SACT,MAAM;WACJ,MAAM;kBACC,MAAM;eACT,OAAO;eACP,OAAO;eACP,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;gBACb,MAAM;iBACL,MAAM;YACX,MAAM,GAAG,KAAK;iBACT,OAAO;iBACP,MAAM,GAAG,IAAI;qBACT,OAAO;oBACR,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI;qBAC/B,MAAM;aACd,OAAO;;;;;;;MAAsB;eAC3B,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;mBAClE,OAAO;iBACT,MAAM;iBACN,MAAM;;;;WA6LiC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PhoneInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/PhoneInput.svelte.ts"],"names":[],"mappings":"AAuPA,QAAA,MAAM,UAAU;;YAhNJ,MAAM;YACN,MAAM;SACT,MAAM;WACJ,MAAM;kBACC,MAAM;eACT,OAAO;eACP,OAAO;eACP,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;gBACb,MAAM;iBACL,MAAM;YACX,MAAM,GAAG,KAAK;iBACT,OAAO;iBACP,MAAM,GAAG,IAAI;qBACT,OAAO;oBACR,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI;qBAC/B,MAAM;aACd,OAAO;;;;;MAAsB;eAC3B,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;mBAClE,OAAO;iBACT,MAAM;iBACN,MAAM;;;;WA2LiC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}