entasis 0.12.0 → 0.13.1

package/dist/components/Form/MultiStepForm/multiStepForm.theme.d.ts

@@ -1,75 +1,75 @@
 import { type InferComponentTheme } from '../../../utils/cva/index.js';
 export declare const multiStepFormTheme: {
-    root: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         variant: {
             plain: string;
             sectioned: string;
             card: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    multiStepFormHeader: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    multiStepFormHeader: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         variant: {
             plain: string;
             sectioned: string;
             card: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    multiStepFormContent: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    multiStepFormFooter: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    multiStepFormContent: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    multiStepFormFooter: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         variant: {
             plain: string;
             sectioned: string;
             card: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type MultiStepFormTheme = typeof multiStepFormTheme;
 export type MultiStepFormThemeProps = InferComponentTheme<MultiStepFormTheme>;
 export declare const setMultiStepFormTheme: (theme: InferComponentTheme<{
-    root: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         variant: {
             plain: string;
             sectioned: string;
             card: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    multiStepFormHeader: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    multiStepFormHeader: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         variant: {
             plain: string;
             sectioned: string;
             card: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    multiStepFormContent: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    multiStepFormFooter: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    multiStepFormContent: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    multiStepFormFooter: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         variant: {
             plain: string;
             sectioned: string;
             card: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useMultiStepFormTheme: import("../../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useMultiStepFormTheme: import("../../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         variant: {
             plain: string;
             sectioned: string;
             card: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    multiStepFormHeader: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    multiStepFormHeader: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         variant: {
             plain: string;
             sectioned: string;
             card: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    multiStepFormContent: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    multiStepFormFooter: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    multiStepFormContent: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    multiStepFormFooter: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         variant: {
             plain: string;
             sectioned: string;
             card: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>;

package/dist/components/Form/NumberInput/numberInput.theme.d.ts

@@ -1,6 +1,6 @@
 import { type InferComponentTheme } from '../../../utils/cva/index.js';
 export declare const numberInputTheme: {
-    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    input: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -10,8 +10,8 @@ export declare const numberInputTheme: {
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    inputContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    inputContainer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -21,12 +21,12 @@ export declare const numberInputTheme: {
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type NumberInputTheme = typeof numberInputTheme;
 export type NumberInputThemeProps = InferComponentTheme<NumberInputTheme>;
 export declare const setNumberInputTheme: (theme: InferComponentTheme<{
-    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    input: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -36,8 +36,8 @@ export declare const setNumberInputTheme: (theme: InferComponentTheme<{
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    inputContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    inputContainer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -47,10 +47,10 @@ export declare const setNumberInputTheme: (theme: InferComponentTheme<{
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useNumberInputTheme: import("../../../utils/cva/theme.js").UseComponentTheme<{
-    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useNumberInputTheme: import("../../../utils/cva/theme.ts").UseComponentTheme<{
+    input: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -60,8 +60,8 @@ export declare const useNumberInputTheme: import("../../../utils/cva/theme.js").
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    inputContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    inputContainer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -71,5 +71,5 @@ export declare const useNumberInputTheme: import("../../../utils/cva/theme.js").
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>;

package/dist/components/Form/PasswordInput/Password.svelte

@@ -147,6 +147,14 @@
 		{placeholder}
 		class={classes.input({ disabled: field.disabled, size: rest.size })}
 		disabled={field.disabled}
+		onkeydown={(event) => {
+			inputAttrs?.onkeydown?.(event);
+			// The reveal button is out of the Tab order (Tab goes to the next field); Alt+F8, the
+			// shortcut Windows and Edge use for their own reveal button, toggles it from the input.
+			if (event.defaultPrevented || !event.altKey || event.key !== 'F8') return;
+			event.preventDefault();
+			togglePasswordVisibility();
+		}}
 	/>
 	<FieldActionButton
 		active={showPassword}

package/dist/components/Form/PasswordInput/passwordInput.mcp.d.ts

@@ -1 +1 @@
-export declare const passwordInputDescription = "\n# PasswordInput Component\n\nThe PasswordInput component is a specialized text input for password entry with visibility toggle functionality.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet password = $state('');\n</script>\n\n<PasswordInput label=\"Password\" bind:value={password} />\n```\n\n## Props\n\nExtends all TextInput component props:\n\n### Core Props\n- **value**: string (bindable) - Password value\n- **placeholder**: string - Placeholder text\n- **autocomplete**: 'current-password' | 'new-password' | 'off' - Rendered as the input's `autocomplete` so browsers and password managers know what the field holds. Use `current-password` on sign-in forms and `new-password` on sign-up and change-password forms. Omitted, the attribute is left off\n- **minLength**: number - Fewest characters a non-empty value accepts during validation. Defaults to 6, or to no minimum when `autocomplete` is `current-password`; an explicit value always applies and `0` drops the rule. The message comes from the i18n catalog (`passwordTooShort`)\n- **inputAttrs**: native attributes for the underlying `<input>` (`aria-*`, `data-*`, `maxlength`, event handlers). `autocomplete`, `type`, `value`, `id`, `name`, `placeholder`, `required`, `disabled` and `class` stay owned by the component\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **error**: string - Error message\n- **required**: boolean - Mark as required\n- **disabled**: boolean - Disable input\n- **readOnly**: boolean - Make the input read-only: stays focusable and announced as read-only, refuses edits, and still validates and submits. A read-only Form, FormGroup or fieldset Field makes it read-only too\n- **size**: 'small' | 'normal' | 'large'\n\n### Content Slots\n- **prefix**: Snippet - Content before input (e.g., lock icon)\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<Description />\n\t<InputContainer>\n\t\t<Prefix />\n\t\t<Input type=\"password\" />\n\t\t<VisibilityToggle />\n\t</InputContainer>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic Password Input\n```svelte\n<script>\n\tlet password = $state('');\n</script>\n\n<PasswordInput label=\"Password\" bind:value={password} />\n```\n\n### Required Password\n```svelte\n<PasswordInput \n\tlabel=\"Password\"\n\tbind:value={password}\n\trequired\n/>\n```\n\n### With Placeholder\n```svelte\n<PasswordInput \n\tlabel=\"Password\"\n\tplaceholder=\"Enter your password\"\n\tbind:value={password}\n/>\n```\n\n### With Description\n```svelte\n<PasswordInput \n\tlabel=\"New Password\"\n\tdescription=\"Must be at least 8 characters\"\n\tbind:value={password}\n/>\n```\n\n### With Prefix Icon\n```svelte\n<script lang=\"ts\">\n\timport { lockIcon } from 'entasis/icons/lock';\n\n\tlet password = $state('');\n</script>\n\n<PasswordInput label=\"Password\" bind:value={password}>\n\t{#snippet prefix()}\n\t\t{@render lockIcon()}\n\t{/snippet}\n</PasswordInput>\n```\n\n### With Validation\n```svelte\n<script>\n\tlet password = $state('');\n\tlet error = $derived(\n\t\tpassword && password.length < 8 \n\t\t\t? 'Password must be at least 8 characters'\n\t\t\t: ''\n\t);\n</script>\n\n<PasswordInput \n\tlabel=\"Password\"\n\tbind:value={password}\n\terror={error}\n/>\n```\n\n### Login Form\n```svelte\n<script>\n\tlet email = $state('');\n\tlet password = $state('');\n\t\n\tfunction handleLogin() {\n\t\t// Login logic\n\t}\n</script>\n\n<form onsubmit={handleLogin}>\n\t<TextInput \n\t\ttype=\"email\"\n\t\tlabel=\"Email\"\n\t\tinputAttrs={{ autocomplete: 'username' }}\n\t\tbind:value={email}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"Password\"\n\t\tautocomplete=\"current-password\"\n\t\tbind:value={password}\n\t\trequired\n\t/>\n\t\n\t<Button type=\"submit\" fullWidth>Login</Button>\n</form>\n```\n\n### Password Strength Indicator\n```svelte\n<script>\n\tlet password = $state('');\n\t\n\tfunction getPasswordStrength(pwd) {\n\t\tif (!pwd) return { label: '', strength: 0 };\n\t\tif (pwd.length < 6) return { label: 'Weak', strength: 1 };\n\t\tif (pwd.length < 10) return { label: 'Medium', strength: 2 };\n\t\treturn { label: 'Strong', strength: 3 };\n\t}\n\t\n\tlet strength = $derived(getPasswordStrength(password));\n</script>\n\n<PasswordInput \n\tlabel=\"Password\"\n\tbind:value={password}\n\tdescription=\"Strength: {strength.label}\"\n/>\n\n<Meter \n\tvalue={strength.strength * 33.33}\n\tmax={100}\n/>\n```\n\n### Change Password Form\n```svelte\n<script>\n\tlet currentPassword = $state('');\n\tlet newPassword = $state('');\n\tlet confirmPassword = $state('');\n\t\n\tlet passwordMismatch = $derived(\n\t\tnewPassword && confirmPassword && newPassword !== confirmPassword\n\t);\n</script>\n\n<form>\n\t<PasswordInput \n\t\tlabel=\"Current Password\"\n\t\tautocomplete=\"current-password\"\n\t\tbind:value={currentPassword}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"New Password\"\n\t\tautocomplete=\"new-password\"\n\t\tminLength={8}\n\t\tbind:value={newPassword}\n\t\tdescription=\"Must be at least 8 characters\"\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"Confirm Password\"\n\t\tautocomplete=\"new-password\"\n\t\tbind:value={confirmPassword}\n\t\terror={passwordMismatch ? 'Passwords do not match' : ''}\n\t\trequired\n\t/>\n\t\n\t<Button type=\"submit\">Update Password</Button>\n</form>\n```\n\n### Sign Up Form\n```svelte\n<script>\n\tlet formData = $state({\n\t\tusername: '',\n\t\temail: '',\n\t\tpassword: '',\n\t\tconfirmPassword: ''\n\t});\n\t\n\tfunction validatePassword() {\n\t\tif (formData.password.length < 8) {\n\t\t\treturn 'Password must be at least 8 characters';\n\t\t}\n\t\tif (!/[A-Z]/.test(formData.password)) {\n\t\t\treturn 'Password must contain an uppercase letter';\n\t\t}\n\t\tif (!/[0-9]/.test(formData.password)) {\n\t\t\treturn 'Password must contain a number';\n\t\t}\n\t\treturn '';\n\t}\n\t\n\tlet passwordError = $derived(validatePassword());\n</script>\n\n<form>\n\t<TextInput \n\t\tlabel=\"Username\"\n\t\tbind:value={formData.username}\n\t\trequired\n\t/>\n\t\n\t<TextInput \n\t\ttype=\"email\"\n\t\tlabel=\"Email\"\n\t\tbind:value={formData.email}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"Password\"\n\t\tbind:value={formData.password}\n\t\terror={passwordError}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"Confirm Password\"\n\t\tbind:value={formData.confirmPassword}\n\t\terror={formData.password !== formData.confirmPassword ? 'Passwords must match' : ''}\n\t\trequired\n\t/>\n\t\n\t<Button type=\"submit\" disabled={!!passwordError}>\n\t\tCreate Account\n\t</Button>\n</form>\n```\n\n## Visibility Toggle\n\nThe visibility toggle button:\n- Shows an eye icon when password is hidden\n- Shows an eye-off icon when password is visible\n- Toggles between `type=\"password\"` and `type=\"text\"`\n- Is always rendered; there is no prop to hide it\n\n## Validation\n\nPasswordInput supports:\n- **required**: Non-empty password\n- **minLength**: at least 6 characters by default, none for `autocomplete=\"current-password\"`; a short value reports only the length message\n- Custom validation via `onValidate`, which runs after the length rule passes\n- Pattern matching for complexity requirements\n\n## Password managers\n\nPasswordInput does not opt out of password managers. Set `autocomplete` so they offer a saved\npassword (`current-password`) or suggest a new one (`new-password`). To keep a specific manager\naway from a field that is not a real credential, pass its opt-out attribute through `inputAttrs`,\nfor example `inputAttrs={{ 'data-1p-ignore': true }}` for 1Password.\n\n## Security Best Practices\n\n- Never show password in plain text by default\n- Always use HTTPS in production\n- Consider password strength requirements\n- Don't limit password length unnecessarily\n- Support password managers with the `autocomplete` prop (`current-password` or `new-password`)\n\n## Accessibility\n\n- Proper label association\n- ARIA attributes for show/hide button\n- Password visibility state announced\n- Keyboard accessible toggle\n- Error messages announced to screen readers\n\n## Notes\n\n- Extends TextInput with password-specific features\n- Visibility toggle is accessible via keyboard\n- Type switches between \"password\" and \"text\"\n- Works with browser password managers\n- All TextInput features are available\n\n## Theme Customization\n\nThe PasswordInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme. It shares the same theme structure as TextInput.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **input**: Input element styles\n- **inputContainer**: Input container wrapper styles\n\n### Available Variants\n\n**input**:\n- base: Base classes applied to the input element\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - disabled: boolean - Disabled state styling\n\n**inputContainer**:\n- base: Base classes for the input container (handles focus states, borders, padding)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n  - disabled: boolean - Disabled state styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<PasswordInput \n  label=\"Password\"\n  bind:value={password}\n  theme={{\n    inputContainer: {\n      base: 'border-2 rounded-lg',\n      size: {\n        normal: 'px-4 py-2'\n      }\n    },\n    input: {\n      size: {\n        normal: 'text-base'\n      }\n    }\n  }}\n/>\n```\n\n**Focus State Customization**:\n\nTo recolor every focus ring in the app at once, set `designTokens.focusColor` on `Theme`\ninstead of overriding per component. `ring-focus` is the focus state role and falls back to the\ncurrent role, so it never hard-pins a color.\n\n```svelte\n<PasswordInput \n  label=\"Secure Password\"\n  bind:value={password}\n  theme={{\n    inputContainer: {\n      base: 'focus-within:ring-2 focus-within:ring-focus/50 focus-within:border-focus'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setPasswordInputTheme } from './index.ts';\n  \n  setPasswordInputTheme({\n    inputContainer: {\n      base: 'rounded-lg border-2 transition-all',\n      size: {\n        normal: 'px-4 py-2'\n      }\n    },\n    input: {\n      base: 'placeholder:text-gray-400'\n    }\n  });\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+export declare const passwordInputDescription = "\n# PasswordInput Component\n\nThe PasswordInput component is a specialized text input for password entry with visibility toggle functionality.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet password = $state('');\n</script>\n\n<PasswordInput label=\"Password\" bind:value={password} />\n```\n\n## Props\n\nExtends all TextInput component props:\n\n### Core Props\n- **value**: string (bindable) - Password value\n- **placeholder**: string - Placeholder text\n- **autocomplete**: 'current-password' | 'new-password' | 'off' - Rendered as the input's `autocomplete` so browsers and password managers know what the field holds. Use `current-password` on sign-in forms and `new-password` on sign-up and change-password forms. Omitted, the attribute is left off\n- **minLength**: number - Fewest characters a non-empty value accepts during validation. Defaults to 6, or to no minimum when `autocomplete` is `current-password`; an explicit value always applies and `0` drops the rule. The message comes from the i18n catalog (`passwordTooShort`)\n- **inputAttrs**: native attributes for the underlying `<input>` (`aria-*`, `data-*`, `maxlength`, event handlers). `autocomplete`, `type`, `value`, `id`, `name`, `placeholder`, `required`, `disabled` and `class` stay owned by the component\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **error**: string - Error message\n- **required**: boolean - Mark as required\n- **disabled**: boolean - Disable input\n- **readOnly**: boolean - Make the input read-only: stays focusable and announced as read-only, refuses edits, and still validates and submits. A read-only Form, FormGroup or fieldset Field makes it read-only too\n- **size**: 'small' | 'normal' | 'large'\n\n### Content Slots\n- **prefix**: Snippet - Content before input (e.g., lock icon)\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Field>\n\t<Label />\n\t<Description />\n\t<InputContainer>\n\t\t<Prefix />\n\t\t<Input type=\"password\" />\n\t\t<VisibilityToggle />\n\t</InputContainer>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic Password Input\n```svelte\n<script>\n\tlet password = $state('');\n</script>\n\n<PasswordInput label=\"Password\" bind:value={password} />\n```\n\n### Required Password\n```svelte\n<PasswordInput \n\tlabel=\"Password\"\n\tbind:value={password}\n\trequired\n/>\n```\n\n### With Placeholder\n```svelte\n<PasswordInput \n\tlabel=\"Password\"\n\tplaceholder=\"Enter your password\"\n\tbind:value={password}\n/>\n```\n\n### With Description\n```svelte\n<PasswordInput \n\tlabel=\"New Password\"\n\tdescription=\"Must be at least 8 characters\"\n\tbind:value={password}\n/>\n```\n\n### With Prefix Icon\n```svelte\n<script lang=\"ts\">\n\timport { lockIcon } from 'entasis/icons/lock';\n\n\tlet password = $state('');\n</script>\n\n<PasswordInput label=\"Password\" bind:value={password}>\n\t{#snippet prefix()}\n\t\t{@render lockIcon()}\n\t{/snippet}\n</PasswordInput>\n```\n\n### With Validation\n```svelte\n<script>\n\tlet password = $state('');\n\tlet error = $derived(\n\t\tpassword && password.length < 8 \n\t\t\t? 'Password must be at least 8 characters'\n\t\t\t: ''\n\t);\n</script>\n\n<PasswordInput \n\tlabel=\"Password\"\n\tbind:value={password}\n\terror={error}\n/>\n```\n\n### Login Form\n```svelte\n<script>\n\tlet email = $state('');\n\tlet password = $state('');\n\t\n\tfunction handleLogin() {\n\t\t// Login logic\n\t}\n</script>\n\n<form onsubmit={handleLogin}>\n\t<TextInput \n\t\ttype=\"email\"\n\t\tlabel=\"Email\"\n\t\tinputAttrs={{ autocomplete: 'username' }}\n\t\tbind:value={email}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"Password\"\n\t\tautocomplete=\"current-password\"\n\t\tbind:value={password}\n\t\trequired\n\t/>\n\t\n\t<Button type=\"submit\" fullWidth>Login</Button>\n</form>\n```\n\n### Password Strength Indicator\n```svelte\n<script>\n\tlet password = $state('');\n\t\n\tfunction getPasswordStrength(pwd) {\n\t\tif (!pwd) return { label: '', strength: 0 };\n\t\tif (pwd.length < 6) return { label: 'Weak', strength: 1 };\n\t\tif (pwd.length < 10) return { label: 'Medium', strength: 2 };\n\t\treturn { label: 'Strong', strength: 3 };\n\t}\n\t\n\tlet strength = $derived(getPasswordStrength(password));\n</script>\n\n<PasswordInput \n\tlabel=\"Password\"\n\tbind:value={password}\n\tdescription=\"Strength: {strength.label}\"\n/>\n\n<Meter \n\tvalue={strength.strength * 33.33}\n\tmax={100}\n/>\n```\n\n### Change Password Form\n```svelte\n<script>\n\tlet currentPassword = $state('');\n\tlet newPassword = $state('');\n\tlet confirmPassword = $state('');\n\t\n\tlet passwordMismatch = $derived(\n\t\tnewPassword && confirmPassword && newPassword !== confirmPassword\n\t);\n</script>\n\n<form>\n\t<PasswordInput \n\t\tlabel=\"Current Password\"\n\t\tautocomplete=\"current-password\"\n\t\tbind:value={currentPassword}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"New Password\"\n\t\tautocomplete=\"new-password\"\n\t\tminLength={8}\n\t\tbind:value={newPassword}\n\t\tdescription=\"Must be at least 8 characters\"\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"Confirm Password\"\n\t\tautocomplete=\"new-password\"\n\t\tbind:value={confirmPassword}\n\t\terror={passwordMismatch ? 'Passwords do not match' : ''}\n\t\trequired\n\t/>\n\t\n\t<Button type=\"submit\">Update Password</Button>\n</form>\n```\n\n### Sign Up Form\n```svelte\n<script>\n\tlet formData = $state({\n\t\tusername: '',\n\t\temail: '',\n\t\tpassword: '',\n\t\tconfirmPassword: ''\n\t});\n\t\n\tfunction validatePassword() {\n\t\tif (formData.password.length < 8) {\n\t\t\treturn 'Password must be at least 8 characters';\n\t\t}\n\t\tif (!/[A-Z]/.test(formData.password)) {\n\t\t\treturn 'Password must contain an uppercase letter';\n\t\t}\n\t\tif (!/[0-9]/.test(formData.password)) {\n\t\t\treturn 'Password must contain a number';\n\t\t}\n\t\treturn '';\n\t}\n\t\n\tlet passwordError = $derived(validatePassword());\n</script>\n\n<form>\n\t<TextInput \n\t\tlabel=\"Username\"\n\t\tbind:value={formData.username}\n\t\trequired\n\t/>\n\t\n\t<TextInput \n\t\ttype=\"email\"\n\t\tlabel=\"Email\"\n\t\tbind:value={formData.email}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"Password\"\n\t\tbind:value={formData.password}\n\t\terror={passwordError}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"Confirm Password\"\n\t\tbind:value={formData.confirmPassword}\n\t\terror={formData.password !== formData.confirmPassword ? 'Passwords must match' : ''}\n\t\trequired\n\t/>\n\t\n\t<Button type=\"submit\" disabled={!!passwordError}>\n\t\tCreate Account\n\t</Button>\n</form>\n```\n\n## Visibility Toggle\n\nThe visibility toggle button:\n- Shows an eye icon when password is hidden\n- Shows an eye-off icon when password is visible\n- Toggles between `type=\"password\"` and `type=\"text\"`\n- Is always rendered; there is no prop to hide it\n- Stays out of the Tab order, so Tab moves from the password to the next field; Alt+F8 in the input (the shortcut Windows and Edge use for their own reveal button) toggles it, and screen readers still reach the button\n\n## Validation\n\nPasswordInput supports:\n- **required**: Non-empty password\n- **minLength**: at least 6 characters by default, none for `autocomplete=\"current-password\"`; a short value reports only the length message\n- Custom validation via `onValidate`, which runs after the length rule passes\n- Pattern matching for complexity requirements\n\n## Password managers\n\nPasswordInput does not opt out of password managers. Set `autocomplete` so they offer a saved\npassword (`current-password`) or suggest a new one (`new-password`). To keep a specific manager\naway from a field that is not a real credential, pass its opt-out attribute through `inputAttrs`,\nfor example `inputAttrs={{ 'data-1p-ignore': true }}` for 1Password.\n\n## Security Best Practices\n\n- Never show password in plain text by default\n- Always use HTTPS in production\n- Consider password strength requirements\n- Don't limit password length unnecessarily\n- Support password managers with the `autocomplete` prop (`current-password` or `new-password`)\n\n## Accessibility\n\n- Proper label association\n- ARIA attributes for show/hide button\n- Password visibility state announced\n- Keyboard accessible toggle\n- Error messages announced to screen readers\n\n## Notes\n\n- Extends TextInput with password-specific features\n- Visibility toggle is accessible via keyboard\n- Type switches between \"password\" and \"text\"\n- Works with browser password managers\n- All TextInput features are available\n\n## Theme Customization\n\nThe PasswordInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme. It shares the same theme structure as TextInput.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **input**: Input element styles\n- **inputContainer**: Input container wrapper styles\n\n### Available Variants\n\n**input**:\n- base: Base classes applied to the input element\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - disabled: boolean - Disabled state styling\n\n**inputContainer**:\n- base: Base classes for the input container (handles focus states, borders, padding)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n  - disabled: boolean - Disabled state styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<PasswordInput \n  label=\"Password\"\n  bind:value={password}\n  theme={{\n    inputContainer: {\n      base: 'border-2 rounded-lg',\n      size: {\n        normal: 'px-4 py-2'\n      }\n    },\n    input: {\n      size: {\n        normal: 'text-base'\n      }\n    }\n  }}\n/>\n```\n\n**Focus State Customization**:\n\nTo recolor every focus ring in the app at once, set `designTokens.focusColor` on `Theme`\ninstead of overriding per component. `ring-focus` is the focus state role and falls back to the\ncurrent role, so it never hard-pins a color.\n\n```svelte\n<PasswordInput \n  label=\"Secure Password\"\n  bind:value={password}\n  theme={{\n    inputContainer: {\n      base: 'focus-within:ring-2 focus-within:ring-focus/50 focus-within:border-focus'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setPasswordInputTheme } from './index.ts';\n  \n  setPasswordInputTheme({\n    inputContainer: {\n      base: 'rounded-lg border-2 transition-all',\n      size: {\n        normal: 'px-4 py-2'\n      }\n    },\n    input: {\n      base: 'placeholder:text-gray-400'\n    }\n  });\n</script>\n```\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";

package/dist/components/Form/PasswordInput/passwordInput.mcp.js

@@ -292,6 +292,7 @@ The visibility toggle button:
 - Shows an eye-off icon when password is visible
 - Toggles between \`type="password"\` and \`type="text"\`
 - Is always rendered; there is no prop to hide it
+- Stays out of the Tab order, so Tab moves from the password to the next field; Alt+F8 in the input (the shortcut Windows and Edge use for their own reveal button) toggles it, and screen readers still reach the button
 
 ## Validation
 

package/dist/components/Form/PasswordInput/passwordInput.theme.d.ts

@@ -1,6 +1,6 @@
 import { type InferComponentTheme } from '../../../utils/cva/index.js';
 export declare const passwordInputTheme: {
-    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    input: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -10,8 +10,8 @@ export declare const passwordInputTheme: {
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    inputContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    inputContainer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -21,12 +21,12 @@ export declare const passwordInputTheme: {
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type PasswordInputTheme = typeof passwordInputTheme;
 export type PasswordInputThemeProps = InferComponentTheme<PasswordInputTheme>;
 export declare const setPasswordInputTheme: (theme: InferComponentTheme<{
-    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    input: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -36,8 +36,8 @@ export declare const setPasswordInputTheme: (theme: InferComponentTheme<{
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    inputContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    inputContainer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -47,10 +47,10 @@ export declare const setPasswordInputTheme: (theme: InferComponentTheme<{
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const usePasswordInputTheme: import("../../../utils/cva/theme.js").UseComponentTheme<{
-    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+export declare const usePasswordInputTheme: import("../../../utils/cva/theme.ts").UseComponentTheme<{
+    input: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -60,8 +60,8 @@ export declare const usePasswordInputTheme: import("../../../utils/cva/theme.js"
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    inputContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    inputContainer: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -71,5 +71,5 @@ export declare const usePasswordInputTheme: import("../../../utils/cva/theme.js"
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>;

package/dist/components/Form/PhoneInput/PhoneInputCountryPicker.svelte

@@ -6,7 +6,8 @@
 	import Button from '../../Button/Button.svelte';
 	import { checkIcon } from '../../Icons/check.js';
 	import ScrollArea from '../../ScrollArea/ScrollArea.svelte';
-	import TextInput from '../TextInput/TextInput.svelte';
+	import { magnifyingGlassIcon } from '../../Icons/magnifyingGlass.js';
+	import { useMenuTheme } from '../../Menu/menu.theme.js';
 	import type { Sizes } from '../../../types/theme.js';
 	import { useListNavigation } from '../../../utils/useListNavigation.svelte.js';
 	import { useLiveAnnouncer } from '../../../utils/useLiveAnnouncer.svelte.js';
@@ -45,6 +46,7 @@
 	const id = $derived(customId ?? generatedId);
 	const listboxId = $derived(`${id}-listbox`);
 	const classes = $derived(usePhoneInputTheme(theme));
+	const menuClasses = $derived(useMenuTheme());
 	const t = $derived(useI18n());
 	const filteredCountries = $derived(filterPhoneCountryOptions(countries, searchQuery, t.locale));
 	const optionId = (iso2: string) => `${id}-option-${iso2}`;
@@ -131,28 +133,37 @@
 </script>
 
 <div {id} class={classes.countryPicker({ class: theme?.countryPicker?.base })}>
-	<TextInput
+	<!-- The same search row as a filterable Menu: an icon, a borderless input, a divider. -->
+	<div
 		{@attach attachSearchInput}
-		bind:value={searchQuery}
-		inputAttrs={{ 'data-1p-ignore': true }}
-		placeholder={searchPlaceholder}
-		{size}
-		class={classes.countrySearch({ class: theme?.countrySearch?.base })}
-		theme={{
-			inputContainer: {
-				base: classes.countrySearchInputContainer({
+		class={classes.countrySearch({
+			class: [
+				menuClasses.search({ size }),
+				classes.countrySearchInputContainer({
 					class: theme?.countrySearchInputContainer?.base,
 					size
-				})
-			},
-			input: {
-				base: classes.countrySearchInput({
-					class: theme?.countrySearchInput?.base,
-					size
-				})
-			}
-		}}
-	/>
+				}),
+				theme?.countrySearch?.base
+			]
+				.filter(Boolean)
+				.join(' ')
+		})}
+	>
+		{@render magnifyingGlassIcon({ class: menuClasses.searchIcon({ size }) })}
+		<input
+			data-1p-ignore
+			type="text"
+			bind:value={searchQuery}
+			placeholder={searchPlaceholder}
+			aria-label={searchPlaceholder}
+			class={classes.countrySearchInput({
+				class: [menuClasses.searchInput({ size }), theme?.countrySearchInput?.base]
+					.filter(Boolean)
+					.join(' '),
+				size
+			})}
+		/>
+	</div>
 
 	<ScrollArea
 		scrollOnEdges