entasis 0.11.0 → 0.13.0

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/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();

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

@@ -6,9 +6,12 @@
 	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';
+	import { untrack } from 'svelte';
 	import type { PhoneInputThemeProps } from './phoneInput.theme.js';
 	import { usePhoneInputTheme } from './phoneInput.theme.js';
 	import { filterPhoneCountryOptions, type PhoneCountryOption } from './phoneInputCountry.js';
@@ -43,8 +46,9 @@
 	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));
+	const filteredCountries = $derived(filterPhoneCountryOptions(countries, searchQuery, t.locale));
 	const optionId = (iso2: string) => `${id}-option-${iso2}`;
 
 	const selectCountry = (iso2: string) => {
@@ -52,21 +56,34 @@
 		if (country) onSelectCountry(country);
 	};
 
+	// The selected country is highlighted when the picker opens and again when the search clears.
 	const nav = useListNavigation({
 		values: () => filteredCountries.map((country) => country.iso2),
 		optionId,
+		query: () => searchQuery,
+		anchor: () => selectedCountry?.iso2,
 		onSelect: selectCountry
 	});
 
-	const highlightSelectedCountry = () => {
-		const selectedIso2 = selectedCountry?.iso2;
-		if (selectedIso2 && filteredCountries.some((country) => country.iso2 === selectedIso2)) {
-			nav.highlight(selectedIso2);
-			return;
-		}
-
-		nav.first();
-	};
+	// Result counts and the empty state reach screen readers through one persistent region,
+	// announced after typing settles (a region that mounts already filled is skipped).
+	const announcer = useLiveAnnouncer(generatedId, 'live');
+	$effect(() => {
+		const message =
+			filteredCountries.length === 0
+				? t.noCountries
+				: searchQuery.trim()
+					? t.resultsCount(filteredCountries.length)
+					: '';
+		return untrack(() => {
+			if (!message) {
+				announcer.reset();
+				return;
+			}
+			const timer = setTimeout(() => announcer.announce(message), 250);
+			return () => clearTimeout(timer);
+		});
+	});
 
 	const attachSearchInput: Attachment<HTMLElement> = (node) => {
 		const input = node.querySelector<HTMLInputElement>('input');
@@ -75,17 +92,13 @@
 		searchInput = input;
 		input.setAttribute('role', 'combobox');
 		input.setAttribute('aria-autocomplete', 'list');
-		input.setAttribute('aria-expanded', 'true');
 		input.setAttribute('aria-haspopup', 'listbox');
 		input.setAttribute('autocomplete', 'off');
 		input.setAttribute('autocorrect', 'off');
 		input.setAttribute('autocapitalize', 'off');
 		input.setAttribute('spellcheck', 'false');
 
-		const focusTimeout = setTimeout(() => {
-			input.focus();
-			highlightSelectedCountry();
-		}, 0);
+		const focusTimeout = setTimeout(() => input.focus(), 0);
 		const removeKeydown = on(input, 'keydown', nav.onKeydown);
 
 		return () => {
@@ -109,6 +122,8 @@
 		if (!searchInput) return;
 
 		searchInput.setAttribute('aria-controls', listboxId);
+		// The listbox is hidden while the search matches nothing, so the combobox is collapsed.
+		searchInput.setAttribute('aria-expanded', String(filteredCountries.length > 0));
 		if (nav.activeDescendant) {
 			searchInput.setAttribute('aria-activedescendant', nav.activeDescendant);
 		} else {
@@ -118,34 +133,60 @@
 </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}
-		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
 		type="auto"
 		class={classes.countryList({ class: theme?.countryList?.base })}
 	>
-		<div id={listboxId} role="listbox" aria-label={t.countries} class={classes.countryListbox()}>
+		<!-- The empty message lives OUTSIDE the listbox: a listbox may only own options and groups
+		     (aria-required-children). The persistent live region announces it and the result counts:
+		     screen readers skip a live region that mounts already filled. -->
+		{#if filteredCountries.length === 0}
+			<div class={classes.countryEmpty({ size, class: theme?.countryEmpty?.base })}>
+				{t.noCountries}
+			</div>
+		{/if}
+		<span class="sr-only" {...announcer.regionAttrs}>{announcer.message}</span>
+		<!-- Kept mounted while empty (hidden) so the search input's aria-controls always resolves. -->
+		<div
+			id={listboxId}
+			role="listbox"
+			aria-label={t.countries}
+			hidden={filteredCountries.length === 0}
+			class={classes.countryListbox()}
+		>
 			{#each filteredCountries as country (country.iso2)}
 				{@const selected = country.iso2 === selectedCountry?.iso2}
 				{@const highlighted = nav.highlighted === country.iso2}
@@ -166,7 +207,7 @@
 						highlighted,
 						class: theme?.countryOption?.base
 					})}
-					onpointermove={() => nav.setHighlighted(country.iso2)}
+					onpointermove={(event) => nav.pointerHighlight(country.iso2, event)}
 					onclick={() => onSelectCountry(country)}
 				>
 					<span class={classes.countryFlag({ size, class: theme?.countryFlag?.base })}>
@@ -189,10 +230,6 @@
 						})}
 					{/if}
 				</Button>
-			{:else}
-				<div class={classes.countryEmpty({ size, class: theme?.countryEmpty?.base })}>
-					{t.noCountries}
-				</div>
 			{/each}
 		</div>
 	</ScrollArea>

package/dist/components/Form/PhoneInput/phoneInput-cdn.js

@@ -1,3 +1,4 @@
+import { applyCspNonce } from '../../../utils/cspNonce.js';
 const INTL_TEL_INPUT_CDN_VERSION = '29.1.1';
 const INTL_TEL_INPUT_SCRIPT_ID = 'entasis-intl-tel-input-script';
 const INTL_TEL_INPUT_SCRIPT_URL = `https://cdn.jsdelivr.net/npm/intl-tel-input@${INTL_TEL_INPUT_CDN_VERSION}/dist/js/intlTelInputWithUtils.min.js`;
@@ -50,7 +51,7 @@ function createIntlTelInputScriptPromise() {
     });
 }
 function createIntlTelInputScript() {
-    const script = document.createElement('script');
+    const script = applyCspNonce(document.createElement('script'));
     script.id = INTL_TEL_INPUT_SCRIPT_ID;
     script.src = INTL_TEL_INPUT_SCRIPT_URL;
     script.async = true;

package/dist/components/Form/PhoneInput/phoneInput.mcp.d.ts

@@ -1 +1 @@
-export declare const phoneInputDescription = "\n# PhoneInput Component\n\nThe PhoneInput component provides a formatted input field for phone numbers with country code selection and automatic formatting. [intl-tel-input](https://intl-tel-input.com/) is loaded from a CDN at runtime and never bundled. A strict Content-Security-Policy must allow `cdn.jsdelivr.net` in `script-src`.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet phone = $state('');\n</script>\n\n<PhoneInput label=\"Phone Number\" bind:value={phone} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: string (bindable) - Phone number value\n- **country**: string (bindable, default: 'fr') - ISO country code selected in the country picker\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### 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<CountrySelector />\n\t\t<PhoneNumberInput />\n\t</InputContainer>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic Phone Input\n```svelte\n<script>\n\tlet phone = $state('');\n</script>\n\n<PhoneInput \n\tlabel=\"Phone Number\"\n\tbind:value={phone}\n/>\n```\n\n### With Default Country\n```svelte\n<PhoneInput \n\tlabel=\"Phone Number\"\n\tbind:value={phone}\n\tcountry=\"gb\"\n/>\n```\n\n### Required Field\n```svelte\n<PhoneInput \n\tlabel=\"Contact Number\"\n\tbind:value={phone}\n\trequired\n/>\n```\n\n### With Description\n```svelte\n<PhoneInput \n\tlabel=\"Mobile Number\"\n\tdescription=\"We'll send verification code to this number\"\n\tbind:value={phone}\n/>\n```\n\n### Disabled State\n```svelte\n<PhoneInput \n\tlabel=\"Phone\"\n\tvalue=\"+1 234 567 8900\"\n\tdisabled\n/>\n```\n\n### Contact Form\n```svelte\n<script>\n\tlet contact = $state({\n\t\tname: '',\n\t\temail: '',\n\t\tphone: ''\n\t});\n</script>\n\n<form>\n\t<TextInput \n\t\tlabel=\"Name\"\n\t\tbind:value={contact.name}\n\t\trequired\n\t/>\n\t\n\t<TextInput \n\t\ttype=\"email\"\n\t\tlabel=\"Email\"\n\t\tbind:value={contact.email}\n\t\trequired\n\t/>\n\t\n\t<PhoneInput \n\t\tlabel=\"Phone\"\n\t\tbind:value={contact.phone}\n\t\trequired\n\t/>\n\t\n\t<Button type=\"submit\">Submit</Button>\n</form>\n```\n\n### Multiple Phone Numbers\n```svelte\n<script>\n\tlet phones = $state({\n\t\thome: '',\n\t\tmobile: '',\n\t\twork: ''\n\t});\n</script>\n\n<PhoneInput \n\tlabel=\"Home Phone\"\n\tbind:value={phones.home}\n/>\n\n<PhoneInput \n\tlabel=\"Mobile Phone\"\n\tbind:value={phones.mobile}\n\trequired\n/>\n\n<PhoneInput \n\tlabel=\"Work Phone\"\n\tbind:value={phones.work}\n/>\n```\n\n### With Validation\n```svelte\n<script>\n\tlet phone = $state('');\n\tlet error = $state('');\n\t\n\tfunction validatePhone(value) {\n\t\t// Simple validation - in production use a proper library\n\t\tif (!value) return '';\n\t\tif (value.length < 10) return 'Phone number is too short';\n\t\treturn '';\n\t}\n\t\n\t$effect(() => {\n\t\terror = validatePhone(phone);\n\t});\n</script>\n\n<PhoneInput \n\tlabel=\"Phone Number\"\n\tbind:value={phone}\n\terror={error}\n\trequired\n/>\n```\n\n### International Support\n```svelte\n<script>\n\tlet phoneNumbers = $state({\n\t\tus: '',\n\t\tuk: '',\n\t\tfr: ''\n\t});\n</script>\n\n<PhoneInput \n\tlabel=\"US Number\"\n\tbind:value={phoneNumbers.us}\n\tcountry=\"us\"\n/>\n\n<PhoneInput \n\tlabel=\"UK Number\"\n\tbind:value={phoneNumbers.uk}\n\tcountry=\"gb\"\n/>\n\n<PhoneInput \n\tlabel=\"France Number\"\n\tbind:value={phoneNumbers.fr}\n\tcountry=\"fr\"\n/>\n```\n\n### Delivery Information\n```svelte\n<script>\n\tlet delivery = $state({\n\t\taddress: '',\n\t\tphone: '',\n\t\tnotes: ''\n\t});\n</script>\n\n<form>\n\t<TextArea \n\t\tlabel=\"Delivery Address\"\n\t\tbind:value={delivery.address}\n\t\trequired\n\t/>\n\t\n\t<PhoneInput \n\t\tlabel=\"Contact Phone\"\n\t\tdescription=\"For delivery updates\"\n\t\tbind:value={delivery.phone}\n\t\trequired\n\t/>\n\t\n\t<TextArea \n\t\tlabel=\"Delivery Notes\"\n\t\tbind:value={delivery.notes}\n\t/>\n\t\n\t<Button type=\"submit\">Confirm Order</Button>\n</form>\n```\n\n## Formatting\n\nPhoneInput automatically formats numbers based on the selected country:\n- US: (123) 456-7890\n- UK: 07123 456789\n- International: +XX XXX XXX XXXX\n\n## Country Selection\n\n- Searchable dropdown of countries\n- Country flags displayed\n- International dialing codes shown\n- Detects country from phone number\n\n## Validation\n\nPhoneInput validates:\n- **required**: Non-empty phone number\n- **format**: Valid phone number format for selected country\n- **length**: Appropriate length for country\n\n## Accessibility\n\n- Proper label association\n- Country selector is keyboard accessible\n- ARIA attributes for required state\n- Error messages announced\n- Focus management between country and number\n\n## Notes\n\n- intl-tel-input loads from a CDN on first mount; nothing is bundled. A network connection is required for formatting and validation.\n- Automatically formats as user types\n- Supports international phone numbers\n- Country code is included in value\n- Validation depends on country format\n- Works with form libraries and validation schemas\n\n## Theme Customization\n\nThe PhoneInput 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<PhoneInput \n  label=\"Phone Number\"\n  bind:value={phone}\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<PhoneInput \n  label=\"Contact Phone\"\n  bind:value={phone}\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 { setPhoneInputTheme } from './index.ts';\n  \n  setPhoneInputTheme({\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 phoneInputDescription = "\n# PhoneInput Component\n\nThe PhoneInput component provides a formatted input field for phone numbers with country code selection and automatic formatting. [intl-tel-input](https://intl-tel-input.com/) is loaded from a CDN at runtime and never bundled. A strict Content-Security-Policy must allow `cdn.jsdelivr.net` in `script-src`.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet phone = $state('');\n</script>\n\n<PhoneInput label=\"Phone Number\" bind:value={phone} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: string (bindable) - Phone number value\n- **country**: string (bindable, default: 'fr') - ISO country code selected in the country picker\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- **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### 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<CountrySelector />\n\t\t<PhoneNumberInput />\n\t</InputContainer>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic Phone Input\n```svelte\n<script>\n\tlet phone = $state('');\n</script>\n\n<PhoneInput \n\tlabel=\"Phone Number\"\n\tbind:value={phone}\n/>\n```\n\n### With Default Country\n```svelte\n<PhoneInput \n\tlabel=\"Phone Number\"\n\tbind:value={phone}\n\tcountry=\"gb\"\n/>\n```\n\n### Required Field\n```svelte\n<PhoneInput \n\tlabel=\"Contact Number\"\n\tbind:value={phone}\n\trequired\n/>\n```\n\n### With Description\n```svelte\n<PhoneInput \n\tlabel=\"Mobile Number\"\n\tdescription=\"We'll send verification code to this number\"\n\tbind:value={phone}\n/>\n```\n\n### Disabled State\n```svelte\n<PhoneInput \n\tlabel=\"Phone\"\n\tvalue=\"+1 234 567 8900\"\n\tdisabled\n/>\n```\n\n### Contact Form\n```svelte\n<script>\n\tlet contact = $state({\n\t\tname: '',\n\t\temail: '',\n\t\tphone: ''\n\t});\n</script>\n\n<form>\n\t<TextInput \n\t\tlabel=\"Name\"\n\t\tbind:value={contact.name}\n\t\trequired\n\t/>\n\t\n\t<TextInput \n\t\ttype=\"email\"\n\t\tlabel=\"Email\"\n\t\tbind:value={contact.email}\n\t\trequired\n\t/>\n\t\n\t<PhoneInput \n\t\tlabel=\"Phone\"\n\t\tbind:value={contact.phone}\n\t\trequired\n\t/>\n\t\n\t<Button type=\"submit\">Submit</Button>\n</form>\n```\n\n### Multiple Phone Numbers\n```svelte\n<script>\n\tlet phones = $state({\n\t\thome: '',\n\t\tmobile: '',\n\t\twork: ''\n\t});\n</script>\n\n<PhoneInput \n\tlabel=\"Home Phone\"\n\tbind:value={phones.home}\n/>\n\n<PhoneInput \n\tlabel=\"Mobile Phone\"\n\tbind:value={phones.mobile}\n\trequired\n/>\n\n<PhoneInput \n\tlabel=\"Work Phone\"\n\tbind:value={phones.work}\n/>\n```\n\n### With Validation\n```svelte\n<script>\n\tlet phone = $state('');\n\tlet error = $state('');\n\t\n\tfunction validatePhone(value) {\n\t\t// Simple validation - in production use a proper library\n\t\tif (!value) return '';\n\t\tif (value.length < 10) return 'Phone number is too short';\n\t\treturn '';\n\t}\n\t\n\t$effect(() => {\n\t\terror = validatePhone(phone);\n\t});\n</script>\n\n<PhoneInput \n\tlabel=\"Phone Number\"\n\tbind:value={phone}\n\terror={error}\n\trequired\n/>\n```\n\n### International Support\n```svelte\n<script>\n\tlet phoneNumbers = $state({\n\t\tus: '',\n\t\tuk: '',\n\t\tfr: ''\n\t});\n</script>\n\n<PhoneInput \n\tlabel=\"US Number\"\n\tbind:value={phoneNumbers.us}\n\tcountry=\"us\"\n/>\n\n<PhoneInput \n\tlabel=\"UK Number\"\n\tbind:value={phoneNumbers.uk}\n\tcountry=\"gb\"\n/>\n\n<PhoneInput \n\tlabel=\"France Number\"\n\tbind:value={phoneNumbers.fr}\n\tcountry=\"fr\"\n/>\n```\n\n### Delivery Information\n```svelte\n<script>\n\tlet delivery = $state({\n\t\taddress: '',\n\t\tphone: '',\n\t\tnotes: ''\n\t});\n</script>\n\n<form>\n\t<TextArea \n\t\tlabel=\"Delivery Address\"\n\t\tbind:value={delivery.address}\n\t\trequired\n\t/>\n\t\n\t<PhoneInput \n\t\tlabel=\"Contact Phone\"\n\t\tdescription=\"For delivery updates\"\n\t\tbind:value={delivery.phone}\n\t\trequired\n\t/>\n\t\n\t<TextArea \n\t\tlabel=\"Delivery Notes\"\n\t\tbind:value={delivery.notes}\n\t/>\n\t\n\t<Button type=\"submit\">Confirm Order</Button>\n</form>\n```\n\n## Formatting\n\nPhoneInput automatically formats numbers based on the selected country:\n- US: (123) 456-7890\n- UK: 07123 456789\n- International: +XX XXX XXX XXXX\n\n## Country Selection\n\n- Searchable dropdown of countries: names are written, sorted and searched in the active I18n locale (`Intl.DisplayNames`), ignoring case and accents (\"cote\" finds \"C\u00F4te d\u2019Ivoire\"); the dial code (`+33`) and ISO code match too\n- The selected country is highlighted when the picker opens and again when the search is cleared\n- Country flags displayed\n- International dialing codes shown\n- Detects country from phone number\n\n## Validation\n\nPhoneInput validates:\n- **required**: Non-empty phone number\n- **format**: Valid phone number format for selected country\n- **length**: Appropriate length for country\n\n## Accessibility\n\n- Proper label association\n- Country selector is keyboard accessible: the search input is a `role=\"combobox\"` that drives the country `role=\"listbox\"` through `aria-activedescendant`\n- A persistent visually hidden `role=\"status\"` region inside the picker announces result counts (\"3 results available\") and \"No countries found\" after typing settles; the visible empty message is plain text outside the listbox, the empty listbox is hidden and the search combobox reports `aria-expanded=\"false\"`\n- ARIA attributes for required state\n- Error messages announced\n- Focus management between country and number\n\n## Notes\n\n- intl-tel-input loads from a CDN on first mount; nothing is bundled. A network connection is required for formatting and validation.\n- Automatically formats as user types\n- Supports international phone numbers\n- Country code is included in value\n- Validation depends on country format\n- Works with form libraries and validation schemas\n- Password managers and browser autofill are not blocked on the number input\n\n## Theme Customization\n\nThe PhoneInput 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<PhoneInput \n  label=\"Phone Number\"\n  bind:value={phone}\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<PhoneInput \n  label=\"Contact Phone\"\n  bind:value={phone}\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 { setPhoneInputTheme } from './index.ts';\n  \n  setPhoneInputTheme({\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/PhoneInput/phoneInput.mcp.js

@@ -28,6 +28,7 @@ Extends all Field component props plus:
 - **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'
 
 ### Styling Props
@@ -256,7 +257,8 @@ PhoneInput automatically formats numbers based on the selected country:
 
 ## Country Selection
 
-- Searchable dropdown of countries
+- Searchable dropdown of countries: names are written, sorted and searched in the active I18n locale (\`Intl.DisplayNames\`), ignoring case and accents ("cote" finds "Côte d’Ivoire"); the dial code (\`+33\`) and ISO code match too
+- The selected country is highlighted when the picker opens and again when the search is cleared
 - Country flags displayed
 - International dialing codes shown
 - Detects country from phone number
@@ -271,7 +273,8 @@ PhoneInput validates:
 ## Accessibility
 
 - Proper label association
-- Country selector is keyboard accessible
+- Country selector is keyboard accessible: the search input is a \`role="combobox"\` that drives the country \`role="listbox"\` through \`aria-activedescendant\`
+- A persistent visually hidden \`role="status"\` region inside the picker announces result counts ("3 results available") and "No countries found" after typing settles; the visible empty message is plain text outside the listbox, the empty listbox is hidden and the search combobox reports \`aria-expanded="false"\`
 - ARIA attributes for required state
 - Error messages announced
 - Focus management between country and number
@@ -284,6 +287,7 @@ PhoneInput validates:
 - Country code is included in value
 - Validation depends on country format
 - Works with form libraries and validation schemas
+- Password managers and browser autofill are not blocked on the number input
 
 ## Theme Customization