entasis 0.10.2 → 0.12.0

package/dist/components/Form/NumberInput/numberInput.mcp.js

@@ -1,7 +1,7 @@
 export const numberInputDescription = `
 # NumberInput Component
 
-The NumberInput component is a numeric input field with +/- controls, min/max validation, and formatting options.
+The NumberInput component is a locale-aware numeric input: a text input that reads and shows numbers the way the user writes them (\`1 234,5\`, \`١٢٣٫٤\`, \`R$ 12,50\`), with +/- steppers, keyboard stepping, min/max validation, and a hidden input that posts the plain number to a native form.
 
 ## Basic Usage
 
@@ -18,12 +18,20 @@ The NumberInput component is a numeric input field with +/- controls, min/max va
 Extends all Field component props plus:
 
 ### Core Props
-- **value**: number (bindable) - Input value
-- **min**: number - Minimum allowed value
-- **max**: number - Maximum allowed value
-- **step**: number - Native number input step for keyboard and browser interactions
-- **increment**: number (default: step ?? 1) - Amount changed by the +/- buttons
+- **value**: number | null (bindable) - Input value. Only text that is a complete number is published: \`-\` or \`.\` while typing leave the value as it was, an emptied input is \`null\`.
+- **min**: number - Minimum allowed value. Stepping stops there; a typed lower value is kept and reports a range error. A non-negative minimum refuses the minus sign.
+- **max**: number - Maximum allowed value. Stepping stops there; a typed higher value is kept and reports a range error.
+- **step**: number (default: 1) - Size of one step by the arrow keys, the +/- buttons and the wheel
+- **increment**: number - Alias of step that wins when both are set
+- **largeStep**: number (default: 10 x step) - Step of Shift+Arrow, PageUp and PageDown
+- **smallStep**: number (default: step / 10) - Step of Alt+Arrow
+- **snapOnStep**: boolean (default: false) - Snap the value to the step grid (counted from min, else 0) when stepping, before clamping: 7 with a step of 5 moves to 10. Without it a step adds or subtracts the step.
+- **wheelStep**: boolean (default: false) - Step with the mouse wheel while the input is focused and hovered (vertical scroll, or horizontal with Shift). The wheel never changes the value otherwise.
 - **showControls**: boolean (default: true) - Whether to render the +/- buttons
+- **format**: Intl.NumberFormatOptions - Currency, percent and unit styles, fraction digits, grouping. The value is shown formatted on blur. Without a rounding option the value keeps its full precision; with one (maximumFractionDigits, maximumSignificantDigits...) the committed value is rounded the way the text is. Compact notation is not supported for entry.
+- **locale**: string (default: the i18n catalog locale) - BCP 47 locale of the shown and parsed text. Digits of other numeral systems (Arabic-Indic, Persian, Devanagari, Bengali, Thai, full-width, Han) are read in any locale.
+- **onValueCommit**: ({ value, reason }) => void - Called when an edit ends. reason is 'blur' (typed text committed on blur), 'keyboard' (Enter on typed text, and each arrow, Page or Home/End step), 'wheel' (each wheel step) or 'step' (release of a stepper button: one call for a whole press-and-hold). A blur without typing reports nothing.
+- **inputAttrs**: native attributes of the text input (autocomplete, aria-label, aria-roledescription, inputmode, data-*, event handlers). Consumer handlers run before the built-in ones, and preventDefault cancels the built-in behaviour. The component keeps the role, value, type and form attributes.
 
 ### Display Props
 - **placeholder**: string - Placeholder text
@@ -34,6 +42,8 @@ Extends all Field component props plus:
 - **error**: string - Error message
 - **required**: boolean - Mark as required
 - **disabled**: boolean - Disable input
+- **readOnly**: boolean - Focusable and announced as read-only; typing, pasting, stepping and the wheel are refused, and the value still validates and submits
+- **name**: string - Posted by a hidden input as the plain number (\`1234.5\`), not the formatted text; an empty or disabled input posts nothing
 - **size**: 'small' | 'normal' | 'large' - Input size
 
 ### Content Slots
@@ -52,10 +62,11 @@ Extends all Field component props plus:
 	<Description />
 	<InputContainer>
 		<Prefix />
-		<Input type="number" />
+		<Input type="text" role="spinbutton" inputmode="decimal" />
+		<HiddenInput type="hidden" name />
 		<Controls>
-			<Button label="Decrease value" />
-			<Button label="Increase value" />
+			<Button label="Decrease value" tabindex="-1" />
+			<Button label="Increase value" tabindex="-1" />
 		</Controls>
 		<Suffix />
 	</InputContainer>
@@ -84,15 +95,25 @@ Extends all Field component props plus:
 />
 \`\`\`
 
-### With Step and Button Increment
+### Locale, currency and percent
 \`\`\`svelte
-<NumberInput 
-	label="Price"
-	bind:value={price}
-	step={0.01}
-	increment={1}
-	min={0}
-/>
+<NumberInput label="Prix" locale="fr" format={{ style: 'currency', currency: 'EUR' }} bind:value={price} />
+<NumberInput label="Discount" format={{ style: 'percent', maximumFractionDigits: 0 }} step={0.01} bind:value={discount} />
+\`\`\`
+
+\`1 234,5\` typed in a French input publishes 1234.5; a percent of \`12.7\` rounds to 13% (the value 0.13) on blur.
+
+### Large steps and snapping
+\`\`\`svelte
+<NumberInput label="Seats" bind:value={seats} step={5} largeStep={50} snapOnStep min={0} />
+\`\`\`
+
+### Native form
+\`\`\`svelte
+<form method="POST">
+	<NumberInput name="amount" locale="de" value={1234.5} />
+</form>
+<!-- posts amount=1234.5 -->
 \`\`\`
 
 ### Custom Button Increment
@@ -229,30 +250,34 @@ Extends all Field component props plus:
 NumberInput automatically validates:
 - **min**: Value must be >= min
 - **max**: Value must be <= max
-- **step**: Value must align with step increments
 - **required**: Non-null value
 
+The range messages come from the i18n catalog with the bound formatted in the input's locale and format (\`Enter a value of 1.000 or less\`); override them with \`messages={{ rangeOverflow: (max) => ... }}\`.
+
 ## Keyboard Controls
 
-- **Arrow Up**: Increment by step
-- **Arrow Down**: Decrement by step
-- **Page Up**: Increment by step * 10
-- **Page Down**: Decrement by step * 10
+- **Arrow Up / Arrow Down**: step by step
+- **Shift + Arrow, Page Up / Page Down**: step by largeStep (default 10 x step)
+- **Alt + Arrow**: step by smallStep (default step / 10)
+- **Home / End**: jump to min / max when set (otherwise they move the caret)
+- **Enter**: formats and commits the typed text; a surrounding Form still moves on or submits
+
+The +/- buttons step by the same step, repeat while pressed (after 400 ms, every 60 ms), stop at the bounds and when the input becomes disabled or read-only, and keep focus in the input. They are out of the tab order (tabindex -1) and point at the input with \`aria-controls\`.
 
 ## Accessibility
 
 - Proper label association
-- ARIA attributes for min, max, and current value
-- Keyboard navigation support
-- Screen reader announcements for value changes
-- Control buttons are focusable and keyboard accessible
+- The input has role spinbutton with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext (the shown text)
+- Read-only is announced with the readonly attribute and aria-readonly
+- Keyboard stepping with large, small and bound keys
+- The +/- buttons are labelled and activate with a keyboard click, but add no tab stops
 
 ## Notes
 
-- Native HTML number input for best compatibility
-- +/- controls provide visual increment/decrement
-- Automatically respects min/max bounds
-- Supports decimal values with step
+- The input is type text with inputmode decimal (numeric for non-negative integers), so the browser's locale never decides the separators. Characters that cannot belong to a number in the locale and format are refused, a paste is inserted at the caret, and text that is not a number yet (\`-\`) is not published.
+- Intermediate text is kept as typed while focused; on blur or Enter it is rounded to the format, formatted for the locale and reported.
+- Out-of-range typed values are kept and flagged, not clamped; stepping and Home/End clamp.
+- The mouse wheel does nothing unless wheelStep is set.
 - Can be styled with prefix/suffix for units
 
 ## Theme Customization

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

@@ -1,18 +1,78 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
 import type { InputProps } from '../Field/field.js';
 import type { NumberInputThemeProps } from './numberInput.theme.js';
+/**
+ * What ended an edit of a NumberInput: `blur` and `keyboard` (Enter) commit typed text, a
+ * `keyboard` arrow, Page or Home/End key and a `wheel` notch each commit one step, and `step`
+ * is the release of a stepper button (or a keyboard click on one).
+ */
+export type NumberInputCommitReason = 'blur' | 'keyboard' | 'step' | 'wheel';
+/** Details `onValueCommit` receives. */
+export type NumberInputCommitDetail = {
+    /** The committed value, after Intl rounding; `null` when the field is empty. */
+    value: number | null;
+    /** What ended the edit. */
+    reason: NumberInputCommitReason;
+};
+/** Native attributes of the text input; the component keeps its role, value and handlers. */
+export type NumberInputInputAttributes = Omit<HTMLInputAttributes, 'class' | 'disabled' | 'form' | 'id' | 'max' | 'min' | 'name' | 'placeholder' | 'readonly' | 'required' | 'role' | 'step' | 'type' | 'value'>;
 export type NumberInputProps = InputProps<'number'> & {
     /** Hint text shown in the empty number input. */
     placeholder?: string;
-    /** Minimum allowed value; passed to the native input and checked during validation. */
+    /** Minimum allowed value; stepping stops there, and a typed lower value reports a range error. */
     min?: number;
-    /** Maximum allowed value; passed to the native input and checked during validation. */
+    /** Maximum allowed value; stepping stops there, and a typed higher value reports a range error. */
     max?: number;
-    /** Step increment for the native number input spinner and keyboard changes. */
+    /** Size of one step by the arrow keys, the +/- buttons and the wheel. Defaults to 1. */
     step?: number;
-    /** Amount changed by the +/- buttons; defaults to step, then 1. */
+    /** Alias of `step` that wins when both are set. */
     increment?: number;
+    /**
+     * Step of Shift+Arrow, PageUp and PageDown. Defaults to ten times the step.
+     */
+    largeStep?: number;
+    /**
+     * Step of Alt+Arrow. Defaults to a tenth of the step.
+     */
+    smallStep?: number;
+    /**
+     * Snaps the value to the step grid (counted from `min`, else 0) when stepping, before it is
+     * clamped, so a value of 7 with a step of 5 moves to 10. Without it a step adds or subtracts
+     * the step from the current value.
+     * @default false
+     */
+    snapOnStep?: boolean;
+    /**
+     * Steps the value with the mouse wheel while the input is focused and hovered: a vertical
+     * scroll, or a horizontal one with Shift. The wheel never changes the value otherwise.
+     * @default false
+     */
+    wheelStep?: boolean;
     /** Whether to render the decrement and increment buttons. */
     showControls?: boolean;
+    /**
+     * `Intl.NumberFormat` options for the displayed text and for parsing what is typed: currency,
+     * percent and unit styles, fraction digits, grouping. The input shows the value formatted this
+     * way when it loses focus. Without a rounding option the value keeps its full precision;
+     * with one (`maximumFractionDigits`, `maximumSignificantDigits`...), the value is rounded
+     * the way the text is when it is committed.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * BCP 47 locale of the displayed and parsed text (`fr`, `ar-EG`, `pt-BR`). Defaults to the
+     * locale of the i18n catalog. Digits of other numeral systems are read in any locale.
+     */
+    locale?: string;
+    /**
+     * Called when an edit ends: text committed on blur or Enter, each keyboard or wheel step, and
+     * the release of a stepper button (one call for a whole press-and-hold).
+     */
+    onValueCommit?: (detail: NumberInputCommitDetail) => void;
+    /**
+     * Native attributes for the text input: `autocomplete`, `aria-label`, `aria-roledescription`,
+     * `inputmode`, data attributes and event handlers, which run before the built-in ones.
+     */
+    inputAttrs?: NumberInputInputAttributes;
     /** Theme overrides for the number input element and its field container. */
     theme?: NumberInputThemeProps & InputProps<'number'>['theme'];
 };

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

@@ -10,6 +10,8 @@
 	import { eyeIcon } from '../../Icons/eye.js';
 	import { useI18n } from '../../../i18n/context.svelte.js';
 
+	const DEFAULT_MIN_LENGTH = 6;
+
 	let {
 		defaultValue = null,
 		value = $bindable(),
@@ -19,15 +21,26 @@
 		placeholder = '',
 		theme,
 		disabled,
+		readOnly,
+		messages,
 		name,
 		onValidate,
 		onValueChange,
 		visible,
+		autocomplete,
+		minLength,
+		inputAttrs,
 		...rest
 	}: PasswordInputProps = $props();
 	const t = $derived(useI18n());
 	if (value === undefined) value = untrack(() => defaultValue);
 
+	// A sign-in field must accept whatever password the account already has, so the default
+	// minimum is skipped for `current-password`. An explicit `minLength` always applies.
+	const resolvedMinLength = $derived(
+		minLength ?? (autocomplete === 'current-password' ? 0 : DEFAULT_MIN_LENGTH)
+	);
+
 	let showPassword = $state(false);
 	const id = $props.id();
 
@@ -58,6 +71,12 @@
 		set disabled(v: boolean | undefined) {
 			disabled = v;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get required() {
 			return required;
 		},
@@ -73,6 +92,13 @@
 		get visible() {
 			return visible;
 		},
+		// The field's own minimum replaces the built-in `password` schema's 6 characters (kept for
+		// custom password controls and `fieldSchemas`), so `isValid`, `validate()` and Form
+		// submission agree. An empty value reports presence alone, and `onValidate` runs only once
+		// the length passes.
+		get minLength() {
+			return resolvedMinLength;
+		},
 		type: 'password'
 	});
 
@@ -111,10 +137,11 @@
 	{...rest}
 >
 	<input
-		data-1p-ignore
+		{...inputAttrs}
 		type={showPassword ? 'text' : 'password'}
 		{id}
 		name={field.name}
+		{autocomplete}
 		bind:value={field.value}
 		bind:this={field.node}
 		{placeholder}

package/dist/components/Form/PasswordInput/index.d.ts

@@ -1,3 +1,3 @@
 export { default as PasswordInput } from './Password.svelte';
-export type { PasswordInputProps } from './passwordInput.props.js';
+export type { PasswordInputAttributes, PasswordInputAutocomplete, PasswordInputProps } from './passwordInput.props.js';
 export { passwordInputTheme, setPasswordInputTheme, usePasswordInputTheme, type PasswordInputTheme, type PasswordInputThemeProps } from './passwordInput.theme.js';

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\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- **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\tbind:value={email}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"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\tbind:value={currentPassword}\n\t\trequired\n\t/>\n\t\n\t<PasswordInput \n\t\tlabel=\"New Password\"\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\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- Custom validation via error prop\n- Pattern matching for complexity requirements\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 (autocomplete=\"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\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

@@ -20,6 +20,9 @@ Extends all TextInput component props:
 ### Core Props
 - **value**: string (bindable) - Password value
 - **placeholder**: string - Placeholder text
+- **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
+- **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\`)
+- **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
 
 ### Field Props (inherited)
 - **label**: string | Snippet - Field label
@@ -27,6 +30,7 @@ Extends all TextInput component props:
 - **error**: string - Error message
 - **required**: boolean - Mark as required
 - **disabled**: boolean - Disable input
+- **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
 - **size**: 'small' | 'normal' | 'large'
 
 ### Content Slots
@@ -137,12 +141,14 @@ Extends all TextInput component props:
 	<TextInput 
 		type="email"
 		label="Email"
+		inputAttrs={{ autocomplete: 'username' }}
 		bind:value={email}
 		required
 	/>
 	
 	<PasswordInput 
 		label="Password"
+		autocomplete="current-password"
 		bind:value={password}
 		required
 	/>
@@ -193,12 +199,15 @@ Extends all TextInput component props:
 <form>
 	<PasswordInput 
 		label="Current Password"
+		autocomplete="current-password"
 		bind:value={currentPassword}
 		required
 	/>
 	
 	<PasswordInput 
 		label="New Password"
+		autocomplete="new-password"
+		minLength={8}
 		bind:value={newPassword}
 		description="Must be at least 8 characters"
 		required
@@ -206,6 +215,7 @@ Extends all TextInput component props:
 	
 	<PasswordInput 
 		label="Confirm Password"
+		autocomplete="new-password"
 		bind:value={confirmPassword}
 		error={passwordMismatch ? 'Passwords do not match' : ''}
 		required
@@ -287,16 +297,24 @@ The visibility toggle button:
 
 PasswordInput supports:
 - **required**: Non-empty password
-- Custom validation via error prop
+- **minLength**: at least 6 characters by default, none for \`autocomplete="current-password"\`; a short value reports only the length message
+- Custom validation via \`onValidate\`, which runs after the length rule passes
 - Pattern matching for complexity requirements
 
+## Password managers
+
+PasswordInput does not opt out of password managers. Set \`autocomplete\` so they offer a saved
+password (\`current-password\`) or suggest a new one (\`new-password\`). To keep a specific manager
+away from a field that is not a real credential, pass its opt-out attribute through \`inputAttrs\`,
+for example \`inputAttrs={{ 'data-1p-ignore': true }}\` for 1Password.
+
 ## Security Best Practices
 
 - Never show password in plain text by default
 - Always use HTTPS in production
 - Consider password strength requirements
 - Don't limit password length unnecessarily
-- Support password managers (autocomplete="current-password" or "new-password")
+- Support password managers with the \`autocomplete\` prop (\`current-password\` or \`new-password\`)
 
 ## Accessibility
 

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

@@ -1,8 +1,31 @@
 import type { InputProps } from '../Field/field.js';
 import type { PasswordInputThemeProps } from './passwordInput.theme.js';
+import type { HTMLInputAttributes } from 'svelte/elements';
+/** What a password field holds, as browsers and password managers read it. */
+export type PasswordInputAutocomplete = 'current-password' | 'new-password' | 'off';
+export type PasswordInputAttributes = Omit<HTMLInputAttributes, 'autocomplete' | 'class' | 'disabled' | 'id' | 'name' | 'placeholder' | 'required' | 'type' | 'value'>;
 export type PasswordInputProps = InputProps<'password'> & {
     /** Hint text shown in the empty password input. */
     placeholder?: string;
+    /**
+     * Tells browsers and password managers what the field holds, rendered as the input's
+     * `autocomplete` attribute. Use `current-password` on sign-in forms so a saved password is
+     * offered, `new-password` on sign-up and change-password forms so a strong one is suggested,
+     * and `off` only where no manager should fill the field. Omitted, the attribute is left off and
+     * the browser decides.
+     */
+    autocomplete?: PasswordInputAutocomplete;
+    /**
+     * Fewest characters a non-empty value accepts during validation. Defaults to 6, or to no
+     * minimum when `autocomplete` is `current-password`: a sign-in form must accept whatever
+     * password the account already has. An explicit value always applies; `0` drops the rule.
+     */
+    minLength?: number;
+    /**
+     * Native attributes applied to the underlying input, such as `aria-*`, `data-*` (for example
+     * `data-1p-ignore` to keep 1Password away), `maxlength` or event handlers.
+     */
+    inputAttrs?: PasswordInputAttributes;
     /** Theme overrides for the password input and its field container. */
     theme?: PasswordInputThemeProps & InputProps<'password'>['theme'];
 };

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

@@ -33,6 +33,8 @@
 		placeholder,
 		theme,
 		disabled,
+		readOnly,
+		messages,
 		name,
 		onValidate,
 		onValueChange,
@@ -51,7 +53,7 @@
 	let library = $state<IntlTelInputLibrary | null>(null);
 	let attachmentId = 0;
 	const countryOptions = $derived(
-		library ? createPhoneCountryOptions(library.getAllCountries()) : []
+		library ? createPhoneCountryOptions(library.getAllCountries(), t.locale) : []
 	);
 
 	const getValue = () => {
@@ -96,6 +98,12 @@
 		set disabled(v: boolean | undefined) {
 			disabled = v;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get required() {
 			return required;
 		},
@@ -163,7 +171,7 @@
 					}
 
 					library = intlTelInput;
-					const countries = createPhoneCountryOptions(intlTelInput.getAllCountries());
+					const countries = createPhoneCountryOptions(intlTelInput.getAllCountries(), t.locale);
 					const initialCountry =
 						getPhoneCountryOption(countries, country) ?? getPhoneCountryOption(countries, 'fr');
 					instance = intlTelInput(node, {
@@ -254,7 +262,7 @@
 				}
 			}}
 			{...rest}
-			{@attach popover.reference}
+			anchor={popover.reference}
 			{@attach focusInputOnFieldClick}
 		>
 			<PhoneInputCountryTrigger
@@ -267,7 +275,6 @@
 				onToggle={popover.toggle}
 			/>
 			<input
-				data-1p-ignore
 				{@attach usePhoneInput}
 				oninput={() => {
 					field.value = getValue();