entasis 0.10.2 → 0.12.0

package/dist/components/Form/TagsInput/tagsInput.mcp.d.ts

@@ -1 +1 @@
-export declare const tagsInputDescription = "\n# TagsInput Component\n\nA multi-value tag input. Use it for entering a list of free-text tags, or restrict entry to a searchable option list (like the Combobox, but multi-select). Selected tags render as removable chips inside the field, followed by a text input that wraps to its own line when space runs out.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { TagsInput } from 'entasis/tags-input';\n\tlet value = $state(null);\n</script>\n\n<TagsInput\n\tplaceholder=\"Add a tag...\"\n\tbind:value={value}\n/>\n```\n\n## Props\n\n### Core Props\n\n- **value**: `string[] | null` (default: `null`, bindable)\n  - The current list of tags. `null` is treated as empty.\n  - The array is never mutated in place \u2014 every add/remove assigns a fresh array.\n\n- **searchValue**: `string` (default: `''`, bindable)\n  - Current text typed in the input.\n\n- **loading**: `boolean` (default: `false`, bindable)\n  - Loading state (managed automatically for async options).\n\n- **items**: `ComboboxOption[] | ((searchValue?: string) => MaybePromise<ComboboxOption[]>)` (optional)\n  - When omitted, the input accepts free text (any typed value becomes a tag).\n  - When provided, behaves like a Combobox dropdown: static arrays are filtered client-side, functions are called with the search value and may return a Promise.\n\n### Behavior Props\n\n- **customTags**: `boolean` (default: `false`)\n  - When `items` is provided, also allow Enter to add free text that is not in the option list.\n\n- **maxTags**: `number` (optional)\n  - Maximum number of tags. Once reached, further adds (free entry and dropdown selection) are ignored.\n\n- **showAllOnFocus**: `boolean` (default: `false`)\n  - Show all options when the input is focused, even without typing (static arrays only).\n\n- **getValueOption**: `(value: string) => MaybePromise<ComboboxOption | null | undefined>`\n  - Resolves the option (and its label) for a value not yet loaded. Useful for pre-filled values with async options.\n\n- **placeholder**: `string` (default: `''`)\n  - Input placeholder text.\n\n- **loadingText**: `string` (default: `'Loading...'`)\n  - Text displayed while loading options.\n\n- **noOptionsText**: `string` (default: `'No options found'`)\n  - Text displayed when no options match.\n\n### Field Props\n\n- **required**: `boolean` (default: `false`)\n- **disabled**: `boolean`\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`)\n- **density**: `'compact' | 'normal' | 'comfortable'` (default: `'normal'`) - Spacing density forwarded to the dropdown option rows (paddings, gaps, min-height)\n- **name**: `string`\n- **errors**: `string[] | boolean` (bindable)\n- **focused**: `boolean` (bindable)\n- **description**: `string`\n\n### Event Props\n\n- **onValueChange**: `(value: string[]) => void`\n  - Called when the list of tags changes.\n\n- **onValidate**: `(value: string[]) => string[] | boolean`\n  - Custom validation function.\n\n### Theme Props\n\n- **theme**: `TagsInputThemeProps`\n  - Customize styling for: input, inputContainer, tag, loading, error, noOptions.\n\n## Examples\n\n### Free-text Tags\n\n```svelte\n<script>\n\tlet value = $state(['svelte', 'kit']);\n</script>\n\n<TagsInput bind:value={value} placeholder=\"Add a tag...\" />\n```\n\n### Restricted to a Static Option List\n\n```svelte\n<script>\n\tlet value = $state(null);\n\tconst items = [\n\t\t{ value: 'red', label: 'Red' },\n\t\t{ value: 'green', label: 'Green' },\n\t\t{ value: 'blue', label: 'Blue' }\n\t];\n</script>\n\n<TagsInput items={items} showAllOnFocus bind:value={value} />\n```\n\n### Async Options\n\n```svelte\n<script lang=\"ts\">\n\tlet value = $state(null);\n\tconst getItems = async (searchValue?: string) => {\n\t\tconst response = await fetch(`/api/search?q=${searchValue}`);\n\t\treturn response.json();\n\t};\n</script>\n\n<TagsInput items={getItems} bind:value={value} />\n```\n\n### Options Plus Free Text\n\n```svelte\n<TagsInput items={items} customTags bind:value={value} />\n```\n\n### Limited Number of Tags\n\n```svelte\n<TagsInput maxTags={3} bind:value={value} />\n```\n\n### Pre-filled Values with Async Labels\n\n```svelte\n<script lang=\"ts\">\n\tlet value = $state(['us', 'uk']);\n\tconst getValueOption = async (value: string) => {\n\t\treturn { value, label: value.toUpperCase() };\n\t};\n</script>\n\n<TagsInput items={getItems} getValueOption={getValueOption} bind:value={value} />\n```\n\n## Keyboard Interactions\n\n- **Enter**: In free mode (or with `customTags`), adds the current trimmed text as a tag and clears the input. When the dropdown is open and an option is highlighted, adds that option instead.\n- **Backspace** (input empty): Removes the last tag.\n- **ArrowDown / ArrowUp**: Move the dropdown highlight (wraps around). Restricted mode only.\n- **Home / End**: Highlight the first / last option. Restricted mode only.\n- **Escape**: Blurs the input and closes the dropdown.\n\n## Accessibility\n\n- The tag collection is a real list (`role=\"list\"` / `role=\"listitem\"`), not a listbox.\n- Each tag chip is non-interactive; removal is a dedicated `<button type=\"button\">` with an `aria-label` of \"Remove <label>\".\n- **With items** the input follows the ARIA combobox pattern: `role=\"combobox\"`, `aria-expanded`, `aria-controls`, `aria-autocomplete=\"list\"`, `aria-activedescendant`, `aria-haspopup=\"listbox\"`, and the dropdown is a `role=\"listbox\"` with `role=\"option\"` items.\n- **Without items** the input is a plain text input.\n- `autocomplete=\"off\"` and `data-1p-ignore` on the input.\n\n## Notes\n\n- **Deduplication invariant**: A tag can never appear twice. Duplicate adds (exact string match) simply clear the search. This is a hard requirement \u2014 duplicate keys in the keyed list crash the renderer.\n- **Fresh arrays**: The value array is never mutated in place. Every add/remove assigns a new array so binding, reactivity, and form updates fire correctly.\n- **Animations**: Tags animate on reorder (`animate:flip`) and on enter/leave (`transition:scale`).\n- **Free vs restricted mode**: Omitting `items` gives free-text entry. Providing `items` restricts entry to the option list; add `customTags` to permit free text alongside options.\n- **Label resolution**: A tag's chip label comes from static `items`, then a session cache of options picked from the dropdown, then `getValueOption` (resolved on mount for initial values), falling back to the raw value string.\n- **Dropdown filtering**: Options whose value is already selected are hidden from the dropdown.\n\n## Theme Customization\n\nThe TagsInput uses a theme object customizable via the `theme` prop or a global theme.\n\n### Theme Structure\n\n- **input**: Input element styles (flex-1 with a min-width so it wraps to its own line).\n- **inputContainer**: The flex-wrap container holding the tags and input.\n- **tag**: The animated wrapper element around each tag chip.\n- **loading**: Loading indicator styles.\n- **error**: Error message styles.\n- **noOptions**: No-options message styles.\n\n### Global Theme Setting\n\n```svelte\n<script>\n\timport { setTagsInputTheme } from 'entasis/tags-input';\n\n\tsetTagsInputTheme({\n\t\tinputContainer: {\n\t\t\tbase: 'rounded-lg border-2 transition-all'\n\t\t}\n\t});\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 tagsInputDescription = "\n# TagsInput Component\n\nA multi-value tag input. Use it for entering a list of free-text tags, or restrict entry to a searchable option list (like the Combobox, but multi-select). Selected tags render as removable chips inside the field, followed by a text input that wraps to its own line when space runs out.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { TagsInput } from 'entasis/tags-input';\n\tlet value = $state(null);\n</script>\n\n<TagsInput\n\tplaceholder=\"Add a tag...\"\n\tbind:value={value}\n/>\n```\n\n## Props\n\n### Core Props\n\n- **value**: `string[] | null` (default: `null`, bindable)\n  - The current list of tags. `null` is treated as empty.\n  - The array is never mutated in place \u2014 every add/remove assigns a fresh array.\n\n- **searchValue**: `string` (default: `''`, bindable)\n  - Current text typed in the input.\n\n- **loading**: `boolean` (default: `false`, bindable)\n  - Loading state (managed automatically for async options).\n\n- **items**: `ComboboxItems | ((searchValue: string | undefined, request: { signal: AbortSignal }) => MaybePromise<ComboboxItems>)` (optional)\n  - When omitted, the input accepts free text (any typed value becomes a tag).\n  - When provided, behaves like a Combobox dropdown: static arrays are filtered client-side (case- and accent-insensitive, in the active I18n locale), functions are called after a 100ms pause with the search text and `{ signal }` and may return a Promise. An older request is aborted and its response ignored when a newer search replaces it; the last results stay visible while the next load.\n  - Flat options and `{ label?, items }` groups can be mixed; an option can be `disabled`.\n\n- **open** / **defaultOpen** / **onOpenChange**: The dropdown's open state, as in Combobox. `onOpenChange(open, details)` runs before the change; `details.cancel()` keeps the list as it was.\n\n### Behavior Props\n\n- **customTags**: `boolean` (default: `false`)\n  - When `items` is provided, also allow Enter to add free text that is not in the option list.\n\n- **maxTags**: `number` (optional)\n  - Maximum number of tags. Once reached, further adds (free entry and dropdown selection) are ignored.\n\n- **openOnFocus**: `boolean` (default: `false`)\n  - Open the dropdown when the input is focused, even without typing (static arrays list every option, `items` functions are called with an empty search).\n- **showAllOnFocus**: `boolean` (deprecated alias of `openOnFocus`, kept for one minor)\n\n- **keepSearchOnSelect**: `boolean` (default: `false`)\n  - Keep the typed text after an option is chosen, so several matches of one search can be added in a row. Free text added with Enter always clears it.\n\n- **filter**: `(option, searchValue) => boolean` and **limit**: `number` - Custom match and a cap on the matches shown (static arrays).\n- **autoHighlight**: `boolean | 'always'` (default: `false` with `customTags`, else `'always'`) - With `customTags`, nothing is highlighted on its own, so Enter adds what was typed (\"Java\") instead of the first match (\"JavaScript\").\n- **loop**, **separators**, **item**, **onHighlightChange**: As in Combobox. `onHighlightChange({ value, reason, event })` reports why the highlight moved.\n- **readOnly**: `boolean` - The dropdown opens and can be browsed, but tags cannot be added or removed. The tags render as a plain list with no remove buttons. They still submit.\n\n- **getValueOption**: `(value: string) => MaybePromise<ComboboxOption | null | undefined>`\n  - Resolves the option (and its label) for a value not yet loaded. Useful for pre-filled values with async options.\n\n- **placeholder**: `string` (default: `''`)\n  - Input placeholder text.\n\n- **loadingText**: `string` (default: `'Loading...'`)\n  - Text displayed while loading options.\n\n- **noOptionsText**: `string` (default: `'No options found'`)\n  - Text displayed when no options match.\n\n### Field Props\n\n- **required**: `boolean` (default: `false`)\n- **disabled**: `boolean`\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`)\n- **density**: `'compact' | 'normal' | 'comfortable'` (default: `'normal'`) - Spacing density forwarded to the dropdown option rows (paddings, gaps, min-height)\n- **name**: `string`\n- **errors**: `string[] | boolean` (bindable)\n- **focused**: `boolean` (bindable)\n- **description**: `string`\n\n### Event Props\n\n- **onValueChange**: `(value: string[]) => void`\n  - Called when the list of tags changes.\n- **onAfterOpen** / **onAfterClose**: `() => void` - After the dropdown's open or close transition.\n\n- **onValidate**: `(value: string[]) => string[] | boolean`\n  - Custom validation function.\n\n### Theme Props\n\n- **theme**: `TagsInputThemeProps`\n  - Customize styling for: input, inputContainer, tag, loading, error, noOptions, group, groupLabel, separator.\n\n## Examples\n\n### Free-text Tags\n\n```svelte\n<script>\n\tlet value = $state(['svelte', 'kit']);\n</script>\n\n<TagsInput bind:value={value} placeholder=\"Add a tag...\" />\n```\n\n### Restricted to a Static Option List\n\n```svelte\n<script>\n\tlet value = $state(null);\n\tconst items = [\n\t\t{ value: 'red', label: 'Red' },\n\t\t{ value: 'green', label: 'Green' },\n\t\t{ value: 'blue', label: 'Blue' }\n\t];\n</script>\n\n<TagsInput items={items} openOnFocus bind:value={value} />\n```\n\n### Async Options\n\n```svelte\n<script lang=\"ts\">\n\tlet value = $state(null);\n\tconst getItems = async (searchValue?: string) => {\n\t\tconst response = await fetch(`/api/search?q=${searchValue}`);\n\t\treturn response.json();\n\t};\n</script>\n\n<TagsInput items={getItems} bind:value={value} />\n```\n\n### Options Plus Free Text\n\n```svelte\n<TagsInput items={items} customTags bind:value={value} />\n```\n\n### Limited Number of Tags\n\n```svelte\n<TagsInput maxTags={3} bind:value={value} />\n```\n\n### Pre-filled Values with Async Labels\n\n```svelte\n<script lang=\"ts\">\n\tlet value = $state(['us', 'uk']);\n\tconst getValueOption = async (value: string) => {\n\t\treturn { value, label: value.toUpperCase() };\n\t};\n</script>\n\n<TagsInput items={getItems} getValueOption={getValueOption} bind:value={value} />\n```\n\n## Keyboard Interactions\n\n- **Enter**: In free mode (or with `customTags`), adds the current trimmed text as a tag and clears the input. When the dropdown is open and an option is highlighted, adds that option instead.\n- **Backspace** (input empty): Removes the last tag.\n- **ArrowLeft** (**ArrowRight** in right-to-left text) at the start of the text: Moves focus to the last tag.\n- **ArrowLeft / ArrowRight** on a tag: Move between tags (mirrored in right-to-left text); the arrow past the last tag returns to the input. **Home / End** jump to the first / last tag.\n- **Backspace / Delete** on a focused tag: Removes it and moves focus to its neighbour (the next tag, else the previous one), or to the input when no tag remains. **Enter / Space** on its remove button removes it too.\n- **ArrowDown / ArrowUp**: Open a closed dropdown (restricted mode), then move the highlight (wraps around; see `loop`).\n- **Home / End** (dropdown open): Highlight the first / last option. Restricted mode only.\n- **Escape**: Closes the dropdown and keeps focus in the input; a second Escape clears the typed text (also in free mode).\n\n## Accessibility\n\n- Removable tags form a `role=\"toolbar\"` labelled \"Tags\" with a single tab stop (a roving tabindex over the remove buttons); the arrow keys move between them. Each tag chip is non-interactive; removal is a dedicated `<button type=\"button\">` with an `aria-label` of \"Remove <label>\".\n- When the field is disabled or read-only there are no remove buttons (no dead tab stops): the tags are a plain `role=\"list\"` of `role=\"listitem\"`.\n- The listbox owns only options and groups; the loading, error and \"no options\" messages sit beside it. A persistent visually hidden live region announces result counts, the empty state, loading and errors.\n- **With items** the input follows the ARIA combobox pattern: `role=\"combobox\"`, `aria-expanded`, `aria-controls`, `aria-autocomplete=\"list\"`, `aria-activedescendant`, `aria-haspopup=\"listbox\"`, and the dropdown is a `role=\"listbox\"` with `role=\"option\"` items.\n- **Without items** the input is a plain text input.\n- `autocomplete=\"off\"` and `data-1p-ignore` on the input.\n\n## Notes\n\n- **Deduplication invariant**: A tag can never appear twice. Duplicate adds (exact string match) simply clear the search. This is a hard requirement \u2014 duplicate keys in the keyed list crash the renderer.\n- **Fresh arrays**: The value array is never mutated in place. Every add/remove assigns a new array so binding, reactivity, and form updates fire correctly.\n- **Dropdown height**: The option list scrolls beyond 200px, or beyond the room left between the field and the viewport edge (the Popover's `--available-height`), so it shrinks above an on-screen keyboard instead of running under it\n- **Animations**: Tags animate on reorder (`animate:flip`) and on enter/leave (`transition:scale`).\n- **Free vs restricted mode**: Omitting `items` gives free-text entry. Providing `items` restricts entry to the option list; add `customTags` to permit free text alongside options.\n- **Label resolution**: A tag's chip label comes from static `items`, then a session cache of options picked from the dropdown, then `getValueOption` (resolved on mount for initial values), falling back to the raw value string.\n- **Dropdown filtering**: Options whose value is already selected are hidden from the dropdown.\n- **Native forms**: The search box carries no `name`. One hidden input per tag (all under `name`) submits the tags: read them with `FormData.getAll(name)`. Nothing is submitted without a name or when the field is disabled.\n\n## Theme Customization\n\nThe TagsInput uses a theme object customizable via the `theme` prop or a global theme.\n\n### Theme Structure\n\n- **input**: Input element styles (flex-1 with a min-width so it wraps to its own line).\n- **inputContainer**: The flex-wrap container holding the tags and input.\n- **tag**: The animated wrapper element around each tag chip.\n- **loading**: Loading indicator styles.\n- **error**: Error message styles.\n- **noOptions**: No-options message styles.\n- **group**, **groupLabel**, **separator**: Group container, group label and the divider between groups.\n\n### Global Theme Setting\n\n```svelte\n<script>\n\timport { setTagsInputTheme } from 'entasis/tags-input';\n\n\tsetTagsInputTheme({\n\t\tinputContainer: {\n\t\t\tbase: 'rounded-lg border-2 transition-all'\n\t\t}\n\t});\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/TagsInput/tagsInput.mcp.js

@@ -31,9 +31,12 @@ A multi-value tag input. Use it for entering a list of free-text tags, or restri
 - **loading**: \`boolean\` (default: \`false\`, bindable)
   - Loading state (managed automatically for async options).
 
-- **items**: \`ComboboxOption[] | ((searchValue?: string) => MaybePromise<ComboboxOption[]>)\` (optional)
+- **items**: \`ComboboxItems | ((searchValue: string | undefined, request: { signal: AbortSignal }) => MaybePromise<ComboboxItems>)\` (optional)
   - When omitted, the input accepts free text (any typed value becomes a tag).
-  - When provided, behaves like a Combobox dropdown: static arrays are filtered client-side, functions are called with the search value and may return a Promise.
+  - When provided, behaves like a Combobox dropdown: static arrays are filtered client-side (case- and accent-insensitive, in the active I18n locale), functions are called after a 100ms pause with the search text and \`{ signal }\` and may return a Promise. An older request is aborted and its response ignored when a newer search replaces it; the last results stay visible while the next load.
+  - Flat options and \`{ label?, items }\` groups can be mixed; an option can be \`disabled\`.
+
+- **open** / **defaultOpen** / **onOpenChange**: The dropdown's open state, as in Combobox. \`onOpenChange(open, details)\` runs before the change; \`details.cancel()\` keeps the list as it was.
 
 ### Behavior Props
 
@@ -43,8 +46,17 @@ A multi-value tag input. Use it for entering a list of free-text tags, or restri
 - **maxTags**: \`number\` (optional)
   - Maximum number of tags. Once reached, further adds (free entry and dropdown selection) are ignored.
 
-- **showAllOnFocus**: \`boolean\` (default: \`false\`)
-  - Show all options when the input is focused, even without typing (static arrays only).
+- **openOnFocus**: \`boolean\` (default: \`false\`)
+  - Open the dropdown when the input is focused, even without typing (static arrays list every option, \`items\` functions are called with an empty search).
+- **showAllOnFocus**: \`boolean\` (deprecated alias of \`openOnFocus\`, kept for one minor)
+
+- **keepSearchOnSelect**: \`boolean\` (default: \`false\`)
+  - Keep the typed text after an option is chosen, so several matches of one search can be added in a row. Free text added with Enter always clears it.
+
+- **filter**: \`(option, searchValue) => boolean\` and **limit**: \`number\` - Custom match and a cap on the matches shown (static arrays).
+- **autoHighlight**: \`boolean | 'always'\` (default: \`false\` with \`customTags\`, else \`'always'\`) - With \`customTags\`, nothing is highlighted on its own, so Enter adds what was typed ("Java") instead of the first match ("JavaScript").
+- **loop**, **separators**, **item**, **onHighlightChange**: As in Combobox. \`onHighlightChange({ value, reason, event })\` reports why the highlight moved.
+- **readOnly**: \`boolean\` - The dropdown opens and can be browsed, but tags cannot be added or removed. The tags render as a plain list with no remove buttons. They still submit.
 
 - **getValueOption**: \`(value: string) => MaybePromise<ComboboxOption | null | undefined>\`
   - Resolves the option (and its label) for a value not yet loaded. Useful for pre-filled values with async options.
@@ -73,6 +85,7 @@ A multi-value tag input. Use it for entering a list of free-text tags, or restri
 
 - **onValueChange**: \`(value: string[]) => void\`
   - Called when the list of tags changes.
+- **onAfterOpen** / **onAfterClose**: \`() => void\` - After the dropdown's open or close transition.
 
 - **onValidate**: \`(value: string[]) => string[] | boolean\`
   - Custom validation function.
@@ -80,7 +93,7 @@ A multi-value tag input. Use it for entering a list of free-text tags, or restri
 ### Theme Props
 
 - **theme**: \`TagsInputThemeProps\`
-  - Customize styling for: input, inputContainer, tag, loading, error, noOptions.
+  - Customize styling for: input, inputContainer, tag, loading, error, noOptions, group, groupLabel, separator.
 
 ## Examples
 
@@ -106,7 +119,7 @@ A multi-value tag input. Use it for entering a list of free-text tags, or restri
 	];
 </script>
 
-<TagsInput items={items} showAllOnFocus bind:value={value} />
+<TagsInput items={items} openOnFocus bind:value={value} />
 \`\`\`
 
 ### Async Options
@@ -152,14 +165,18 @@ A multi-value tag input. Use it for entering a list of free-text tags, or restri
 
 - **Enter**: In free mode (or with \`customTags\`), adds the current trimmed text as a tag and clears the input. When the dropdown is open and an option is highlighted, adds that option instead.
 - **Backspace** (input empty): Removes the last tag.
-- **ArrowDown / ArrowUp**: Move the dropdown highlight (wraps around). Restricted mode only.
-- **Home / End**: Highlight the first / last option. Restricted mode only.
-- **Escape**: Blurs the input and closes the dropdown.
+- **ArrowLeft** (**ArrowRight** in right-to-left text) at the start of the text: Moves focus to the last tag.
+- **ArrowLeft / ArrowRight** on a tag: Move between tags (mirrored in right-to-left text); the arrow past the last tag returns to the input. **Home / End** jump to the first / last tag.
+- **Backspace / Delete** on a focused tag: Removes it and moves focus to its neighbour (the next tag, else the previous one), or to the input when no tag remains. **Enter / Space** on its remove button removes it too.
+- **ArrowDown / ArrowUp**: Open a closed dropdown (restricted mode), then move the highlight (wraps around; see \`loop\`).
+- **Home / End** (dropdown open): Highlight the first / last option. Restricted mode only.
+- **Escape**: Closes the dropdown and keeps focus in the input; a second Escape clears the typed text (also in free mode).
 
 ## Accessibility
 
-- The tag collection is a real list (\`role="list"\` / \`role="listitem"\`), not a listbox.
-- Each tag chip is non-interactive; removal is a dedicated \`<button type="button">\` with an \`aria-label\` of "Remove <label>".
+- Removable tags form a \`role="toolbar"\` labelled "Tags" with a single tab stop (a roving tabindex over the remove buttons); the arrow keys move between them. Each tag chip is non-interactive; removal is a dedicated \`<button type="button">\` with an \`aria-label\` of "Remove <label>".
+- When the field is disabled or read-only there are no remove buttons (no dead tab stops): the tags are a plain \`role="list"\` of \`role="listitem"\`.
+- The listbox owns only options and groups; the loading, error and "no options" messages sit beside it. A persistent visually hidden live region announces result counts, the empty state, loading and errors.
 - **With items** the input follows the ARIA combobox pattern: \`role="combobox"\`, \`aria-expanded\`, \`aria-controls\`, \`aria-autocomplete="list"\`, \`aria-activedescendant\`, \`aria-haspopup="listbox"\`, and the dropdown is a \`role="listbox"\` with \`role="option"\` items.
 - **Without items** the input is a plain text input.
 - \`autocomplete="off"\` and \`data-1p-ignore\` on the input.
@@ -168,10 +185,12 @@ A multi-value tag input. Use it for entering a list of free-text tags, or restri
 
 - **Deduplication invariant**: A tag can never appear twice. Duplicate adds (exact string match) simply clear the search. This is a hard requirement — duplicate keys in the keyed list crash the renderer.
 - **Fresh arrays**: The value array is never mutated in place. Every add/remove assigns a new array so binding, reactivity, and form updates fire correctly.
+- **Dropdown height**: The option list scrolls beyond 200px, or beyond the room left between the field and the viewport edge (the Popover's \`--available-height\`), so it shrinks above an on-screen keyboard instead of running under it
 - **Animations**: Tags animate on reorder (\`animate:flip\`) and on enter/leave (\`transition:scale\`).
 - **Free vs restricted mode**: Omitting \`items\` gives free-text entry. Providing \`items\` restricts entry to the option list; add \`customTags\` to permit free text alongside options.
 - **Label resolution**: A tag's chip label comes from static \`items\`, then a session cache of options picked from the dropdown, then \`getValueOption\` (resolved on mount for initial values), falling back to the raw value string.
 - **Dropdown filtering**: Options whose value is already selected are hidden from the dropdown.
+- **Native forms**: The search box carries no \`name\`. One hidden input per tag (all under \`name\`) submits the tags: read them with \`FormData.getAll(name)\`. Nothing is submitted without a name or when the field is disabled.
 
 ## Theme Customization
 
@@ -185,6 +204,7 @@ The TagsInput uses a theme object customizable via the \`theme\` prop or a globa
 - **loading**: Loading indicator styles.
 - **error**: Error message styles.
 - **noOptions**: No-options message styles.
+- **group**, **groupLabel**, **separator**: Group container, group label and the divider between groups.
 
 ### Global Theme Setting
 

package/dist/components/Form/TagsInput/tagsInput.props.d.ts

@@ -1,41 +1,21 @@
-import type { Density } from '../../../types/theme.js';
-import type { Messages } from '../../../i18n/en.js';
 import type { InputProps } from '../Field/field.js';
-import type { ComboboxOption, MaybePromise } from '../Combobox/combobox.props.js';
+import type { ComboboxListProps } from '../Combobox/combobox.props.js';
 import type { TagsInputThemeProps } from './tagsInput.theme.js';
-export type TagsInputProps = Omit<InputProps<'tag'>, 'onValueChange'> & {
+export type TagsInputProps = Omit<InputProps<'tag'>, 'onValueChange' | 'density'> & ComboboxListProps & {
     /** Called when the tags change, with the new array of tag values. */
     onValueChange?: (value: string[]) => void;
-    /** Bindable text currently typed in the search input. */
-    searchValue?: string;
-    /** Bindable flag indicating async options are being fetched. */
-    loading?: boolean;
     /** Hint text shown in the input when no tag is being typed. */
     placeholder?: string;
-    /** Static array or function returning items filtered by the current search value. Omit for free-text entry. */
-    items?: ComboboxOption[] | ((searchValue?: string) => MaybePromise<ComboboxOption[]>);
-    /**
-     * Spacing density forwarded to the dropdown option rows (paddings, gaps, min-height).
-     * @default 'normal'
-     */
-    density?: Density;
     /** When items is provided, also allow Enter to add free text that is not in the option list. */
     customTags?: boolean;
     /** Maximum number of tags allowed; further adds are ignored once reached. */
     maxTags?: number;
-    /** When true, shows all options on focus without a search query (static arrays only). */
-    showAllOnFocus?: boolean;
     /**
-     * Function to resolve the option (and its label) for a value when the option is not yet loaded.
-     * Useful for async options where initial values might not be in the option list.
+     * Keep the typed text after an option is chosen, so several matches of the same search can be
+     * added in a row. Free text added with Enter always clears it.
+     * @default false
      */
-    getValueOption?: (value: string) => MaybePromise<ComboboxOption | null | undefined>;
-    /** Text to display while loading options. Defaults to "Loading...". */
-    loadingText?: string;
-    /** Text to display when no options are found or available. Defaults to "No options found". */
-    noOptionsText?: string;
+    keepSearchOnSelect?: boolean;
     /** Theme overrides for the tags input container, tags, dropdown, and field parts. */
     theme?: TagsInputThemeProps & InputProps<'tag'>['theme'];
-    /** Per-instance i18n overrides merged over the global catalog. */
-    i18n?: Partial<Messages>;
 };

package/dist/components/Form/TagsInput/tagsInput.theme.d.ts

@@ -50,6 +50,27 @@ export declare const tagsInputTheme: {
             large: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 };
 export type TagsInputTheme = typeof tagsInputTheme;
 export type TagsInputThemeProps = InferComponentTheme<TagsInputTheme>;
@@ -104,6 +125,27 @@ export declare const setTagsInputTheme: (theme: InferComponentTheme<{
             large: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
 export declare const useTagsInputTheme: import("../../../utils/cva/theme.js").UseComponentTheme<{
     input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
@@ -156,4 +198,25 @@ export declare const useTagsInputTheme: import("../../../utils/cva/theme.js").Us
             large: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>;

package/dist/components/Form/TagsInput/tagsInput.theme.js

@@ -79,13 +79,49 @@ const defaultNoOptions = cva({
         }
     }
 });
+const defaultGroup = cva({
+    base: 'flex scroll-my-1 flex-col',
+    variants: {
+        size: {
+            small: '',
+            normal: '',
+            large: ''
+        }
+    }
+});
+const defaultGroupLabel = cva({
+    base: 'text-neutral/70',
+    variants: {
+        size: {
+            small: 'px-sm py-xs text-xs',
+            normal: 'px-sm py-xs text-xs',
+            large: 'px-sm py-xs text-xs'
+        }
+    },
+    defaultVariants: {
+        size: 'normal'
+    }
+});
+const defaultSeparator = cva({
+    base: 'bg-neutral-muted my-xs h-px',
+    variants: {
+        size: {
+            small: '',
+            normal: '',
+            large: ''
+        }
+    }
+});
 export const tagsInputTheme = {
     input: defaultInput,
     inputContainer: defaultInputContainer,
     tag: defaultTag,
     loading: defaultLoading,
     error: defaultError,
-    noOptions: defaultNoOptions
+    noOptions: defaultNoOptions,
+    group: defaultGroup,
+    groupLabel: defaultGroupLabel,
+    separator: defaultSeparator
 };
 export const setTagsInputTheme = setComponentTheme('tags-input');
 export const useTagsInputTheme = useComponentTheme('tags-input', tagsInputTheme);

package/dist/components/Form/TextArea/TextArea.svelte

@@ -15,6 +15,8 @@
 		placeholder = '',
 		theme,
 		disabled,
+		readOnly,
+		messages,
 		name,
 		onValidate,
 		visible,
@@ -56,6 +58,12 @@
 		set disabled(v: boolean | undefined) {
 			disabled = v;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get required() {
 			return required;
 		},

package/dist/components/Form/TextArea/textArea.mcp.d.ts

@@ -1 +1 @@
-export declare const textAreaDescription = "\n# TextArea Component\n\nThe TextArea component provides a multi-line text input field with a configurable row count, a maximum length, and validation.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet message = $state('');\n</script>\n\n<TextArea label=\"Message\" bind:value={message} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: string (bindable) - Textarea value\n- **placeholder**: string - Placeholder text\n- **rows**: number (default: 3) - Number of visible text rows\n\n### Behavior Props\n- **maxLength**: number - Maximum character count\n- **textareaAttrs**: native attributes applied to the underlying textarea\n- **onPressEnter**: (payload) => void - Called when Enter is pressed without Shift\n\nThe textarea is not resizable by default (`resize-none`); enable a resize handle through the `input` theme slot, e.g. `theme={{ input: { base: 'resize-y' } }}`.\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' - Input size\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<TextArea />\n\t</InputContainer>\n\t<CharacterCount />\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic TextArea\n```svelte\n<script>\n\tlet bio = $state('');\n</script>\n\n<TextArea \n\tlabel=\"Biography\"\n\tbind:value={bio}\n\trows={4}\n/>\n```\n\n### With Placeholder\n```svelte\n<TextArea \n\tlabel=\"Comments\"\n\tplaceholder=\"Enter your comments here...\"\n\tbind:value={comments}\n/>\n```\n\n### With Max Length\n```svelte\n<TextArea \n\tlabel=\"Tweet\"\n\tbind:value={tweet}\n\tmaxLength={280}\n\tdescription=\"Maximum 280 characters\"\n/>\n```\n\n### Required Field\n```svelte\n<TextArea \n\tlabel=\"Feedback\"\n\tbind:value={feedback}\n\trequired\n\trows={5}\n/>\n```\n\n### Disabled State\n```svelte\n<TextArea \n\tlabel=\"Read Only\"\n\tvalue=\"This content cannot be edited\"\n\tdisabled\n/>\n```\n\n### Vertical Resize Handle\n```svelte\n<TextArea \n\tlabel=\"Notes\"\n\tbind:value={content}\n\ttheme={{ input: { base: 'resize-y' } }}\n\trows={6}\n/>\n```\n\n### Contact Form\n```svelte\n<script>\n\tlet formData = $state({\n\t\tname: '',\n\t\temail: '',\n\t\tmessage: ''\n\t});\n\t\n\tfunction handleSubmit() {\n\t\tconsole.log('Submitted:', formData);\n\t}\n</script>\n\n<form onsubmit={handleSubmit}>\n\t<TextInput \n\t\tlabel=\"Name\"\n\t\tbind:value={formData.name}\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<TextArea \n\t\tlabel=\"Message\"\n\t\tbind:value={formData.message}\n\t\trows={6}\n\t\trequired\n\t\tplaceholder=\"How can we help you?\"\n\t/>\n\t\n\t<Button type=\"submit\">Send Message</Button>\n</form>\n```\n\n### Product Description\n```svelte\n<TextArea \n\tlabel=\"Product Description\"\n\tbind:value={description}\n\trows={8}\n\tmaxLength={500}\n\tdescription=\"Provide a detailed description of your product\"\n/>\n```\n\n### Code Input\n```svelte\n<TextArea \n\tlabel=\"CSS Styles\"\n\tbind:value={css}\n\trows={10}\n\tclass=\"font-mono\"\n\ttheme={{ input: { base: 'resize' } }}\n\tplaceholder={'.button { ... }'}\n/>\n```\n\n### Review Form\n```svelte\n<script>\n\tlet review = $state('');\n\tlet rating = $state(5);\n</script>\n\n<div>\n\t<NumberInput \n\t\tlabel=\"Rating\"\n\t\tbind:value={rating}\n\t\tmin={1}\n\t\tmax={5}\n\t/>\n\t\n\t<TextArea \n\t\tlabel=\"Review\"\n\t\tbind:value={review}\n\t\trows={6}\n\t\tmaxLength={1000}\n\t\trequired\n\t\tplaceholder=\"Share your experience...\"\n\t/>\n</div>\n```\n\n### Support Ticket\n```svelte\n<TextArea \n\tlabel=\"Issue Description\"\n\tbind:value={issue}\n\trows={8}\n\trequired\n\tdescription=\"Please provide as much detail as possible\"\n\tplaceholder=\"Describe the issue you're experiencing...\"\n/>\n```\n\n## Character Count\n\nWhen `maxLength` is set, a character counter is automatically displayed:\n- Shows current/max characters\n- Updates in real-time\n- Visual warning when approaching limit\n\n## Validation\n\nTextArea automatically validates:\n- **required**: Non-empty value\n- **maxLength**: Value doesn't exceed maximum\n\n## Accessibility\n\n- Proper label association\n- ARIA attributes for max length\n- Character count announced to screen readers\n- Resize controls are keyboard accessible\n- Error states properly communicated\n\n## Notes\n\n- Supports multi-line text input\n- Character counting for length limits\n- Resize handle can be enabled through the input theme slot\n- Works in forms with validation\n- Maintains scroll position during typing\n\n## Theme Customization\n\nThe TextArea component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **input**: Textarea element styles\n- **inputContainer**: Textarea container wrapper styles\n\n### Available Variants\n\n**input**:\n- base: Base classes applied to the textarea 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 textarea container (handles focus states, borders, padding)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Container height and size-based styling\n  - disabled: boolean - Disabled state styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<TextArea \n  label=\"Message\"\n  bind:value={message}\n  theme={{\n    inputContainer: {\n      base: 'border-2 rounded-lg',\n      size: {\n        normal: 'h-24 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<TextArea \n  label=\"Custom TextArea\"\n  bind:value={value}\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 { setTextAreaTheme } from './index.ts';\n  \n  setTextAreaTheme({\n    inputContainer: {\n      base: 'rounded-lg border-2 transition-all',\n      size: {\n        normal: 'h-24 px-4 py-2'\n      }\n    },\n    input: {\n      base: 'resize-y min-h-[100px]'\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 textAreaDescription = "\n# TextArea Component\n\nThe TextArea component provides a multi-line text input field with a configurable row count, a maximum length, and validation.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet message = $state('');\n</script>\n\n<TextArea label=\"Message\" bind:value={message} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: string (bindable) - Textarea value\n- **placeholder**: string - Placeholder text\n- **rows**: number (default: 3) - Number of visible text rows\n\n### Behavior Props\n- **maxLength**: number - Maximum character count\n- **textareaAttrs**: native attributes applied to the underlying textarea\n- **onPressEnter**: (payload) => void - Called when Enter is pressed without Shift\n\nThe textarea is not resizable by default (`resize-none`); enable a resize handle through the `input` theme slot, e.g. `theme={{ input: { base: 'resize-y' } }}`.\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 textarea 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' - Input size\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<TextArea />\n\t</InputContainer>\n\t<CharacterCount />\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic TextArea\n```svelte\n<script>\n\tlet bio = $state('');\n</script>\n\n<TextArea \n\tlabel=\"Biography\"\n\tbind:value={bio}\n\trows={4}\n/>\n```\n\n### With Placeholder\n```svelte\n<TextArea \n\tlabel=\"Comments\"\n\tplaceholder=\"Enter your comments here...\"\n\tbind:value={comments}\n/>\n```\n\n### With Max Length\n```svelte\n<TextArea \n\tlabel=\"Tweet\"\n\tbind:value={tweet}\n\tmaxLength={280}\n\tdescription=\"Maximum 280 characters\"\n/>\n```\n\n### Required Field\n```svelte\n<TextArea \n\tlabel=\"Feedback\"\n\tbind:value={feedback}\n\trequired\n\trows={5}\n/>\n```\n\n### Disabled State\n```svelte\n<TextArea \n\tlabel=\"Read Only\"\n\tvalue=\"This content cannot be edited\"\n\tdisabled\n/>\n```\n\n### Vertical Resize Handle\n```svelte\n<TextArea \n\tlabel=\"Notes\"\n\tbind:value={content}\n\ttheme={{ input: { base: 'resize-y' } }}\n\trows={6}\n/>\n```\n\n### Contact Form\n```svelte\n<script>\n\tlet formData = $state({\n\t\tname: '',\n\t\temail: '',\n\t\tmessage: ''\n\t});\n\t\n\tfunction handleSubmit() {\n\t\tconsole.log('Submitted:', formData);\n\t}\n</script>\n\n<form onsubmit={handleSubmit}>\n\t<TextInput \n\t\tlabel=\"Name\"\n\t\tbind:value={formData.name}\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<TextArea \n\t\tlabel=\"Message\"\n\t\tbind:value={formData.message}\n\t\trows={6}\n\t\trequired\n\t\tplaceholder=\"How can we help you?\"\n\t/>\n\t\n\t<Button type=\"submit\">Send Message</Button>\n</form>\n```\n\n### Product Description\n```svelte\n<TextArea \n\tlabel=\"Product Description\"\n\tbind:value={description}\n\trows={8}\n\tmaxLength={500}\n\tdescription=\"Provide a detailed description of your product\"\n/>\n```\n\n### Code Input\n```svelte\n<TextArea \n\tlabel=\"CSS Styles\"\n\tbind:value={css}\n\trows={10}\n\tclass=\"font-mono\"\n\ttheme={{ input: { base: 'resize' } }}\n\tplaceholder={'.button { ... }'}\n/>\n```\n\n### Review Form\n```svelte\n<script>\n\tlet review = $state('');\n\tlet rating = $state(5);\n</script>\n\n<div>\n\t<NumberInput \n\t\tlabel=\"Rating\"\n\t\tbind:value={rating}\n\t\tmin={1}\n\t\tmax={5}\n\t/>\n\t\n\t<TextArea \n\t\tlabel=\"Review\"\n\t\tbind:value={review}\n\t\trows={6}\n\t\tmaxLength={1000}\n\t\trequired\n\t\tplaceholder=\"Share your experience...\"\n\t/>\n</div>\n```\n\n### Support Ticket\n```svelte\n<TextArea \n\tlabel=\"Issue Description\"\n\tbind:value={issue}\n\trows={8}\n\trequired\n\tdescription=\"Please provide as much detail as possible\"\n\tplaceholder=\"Describe the issue you're experiencing...\"\n/>\n```\n\n## Character Count\n\nWhen `maxLength` is set, a character counter is automatically displayed:\n- Shows current/max characters\n- Updates in real-time\n- Visual warning when approaching limit\n\n## Validation\n\nTextArea automatically validates:\n- **required**: Non-empty value\n- **maxLength**: Value doesn't exceed maximum\n\n## Accessibility\n\n- Proper label association\n- ARIA attributes for max length\n- Character count announced to screen readers\n- Resize controls are keyboard accessible\n- Error states properly communicated\n\n## Notes\n\n- Supports multi-line text input\n- Character counting for length limits\n- Resize handle can be enabled through the input theme slot\n- Works in forms with validation\n- Maintains scroll position during typing\n\n## Theme Customization\n\nThe TextArea component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **input**: Textarea element styles\n- **inputContainer**: Textarea container wrapper styles\n\n### Available Variants\n\n**input**:\n- base: Base classes applied to the textarea 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 textarea container (handles focus states, borders, padding)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Container height and size-based styling\n  - disabled: boolean - Disabled state styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<TextArea \n  label=\"Message\"\n  bind:value={message}\n  theme={{\n    inputContainer: {\n      base: 'border-2 rounded-lg',\n      size: {\n        normal: 'h-24 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<TextArea \n  label=\"Custom TextArea\"\n  bind:value={value}\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 { setTextAreaTheme } from './index.ts';\n  \n  setTextAreaTheme({\n    inputContainer: {\n      base: 'rounded-lg border-2 transition-all',\n      size: {\n        normal: 'h-24 px-4 py-2'\n      }\n    },\n    input: {\n      base: 'resize-y min-h-[100px]'\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/TextArea/textArea.mcp.js

@@ -35,6 +35,7 @@ The textarea is not resizable by default (\`resize-none\`); enable a resize hand
 - **error**: string - Error message
 - **required**: boolean - Mark as required
 - **disabled**: boolean - Disable input
+- **readOnly**: boolean - Make the textarea 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' - Input size
 
 ### Styling Props

package/dist/components/Form/TextInput/TextInput.svelte

@@ -14,6 +14,8 @@
 		placeholder = '',
 		theme,
 		disabled,
+		readOnly,
+		messages,
 		name,
 		onValidate,
 		visible,
@@ -55,6 +57,12 @@
 		set disabled(v: boolean | undefined) {
 			disabled = v;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get required() {
 			return required;
 		},
@@ -98,7 +106,6 @@
 		{...inputAttrs}
 		disabled={field.disabled}
 		required={field.required}
-		data-1p-ignore
 		{type}
 		{id}
 		name={field.name}

package/dist/components/Form/TextInput/textInput.mcp.d.ts

@@ -1 +1 @@
-export declare const textInputDescription = "\n# TextInput Component\n\nThe TextInput component is a versatile text input field with support for different input types (text, email, URL), validation, and consistent styling.\n\n## Basic Usage\n\n```svelte\n<TextInput label=\"Name\" bind:value={name} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **type**: 'text' | 'email' | 'url' (default: 'text')\n- **value**: string (bindable) - Input value\n- **placeholder**: string - Placeholder text\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text below input\n- **error**: string - Error message\n- **required**: boolean - Mark field as required\n- **disabled**: boolean - Disable input\n- **size**: 'small' | 'normal' | 'large' - Input size\n\n### Content Slots\n- **prefix**: Snippet - Content before input (icons, text)\n- **suffix**: Snippet - Content after input (icons, buttons)\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 />\n\t\t<Suffix />\n\t</InputContainer>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic Text Input\n```svelte\n<script>\n\tlet name = $state('');\n</script>\n\n<TextInput label=\"Name\" bind:value={name} />\n```\n\n### Email Input\n```svelte\n<TextInput \n\ttype=\"email\"\n\tlabel=\"Email\"\n\tplaceholder=\"you@example.com\"\n\tbind:value={email}\n\trequired\n/>\n```\n\n### URL Input\n```svelte\n<TextInput \n\ttype=\"url\"\n\tlabel=\"Website\"\n\tplaceholder=\"https://example.com\"\n\tbind:value={website}\n/>\n```\n\n### With Placeholder\n```svelte\n<TextInput \n\tlabel=\"Username\"\n\tplaceholder=\"Enter your username\"\n\tbind:value={username}\n/>\n```\n\n### With Description\n```svelte\n<TextInput \n\tlabel=\"Display Name\"\n\tdescription=\"This is how others will see you\"\n\tbind:value={displayName}\n/>\n```\n\n### Required Field\n```svelte\n<TextInput \n\tlabel=\"Full Name\"\n\trequired\n\tbind:value={fullName}\n/>\n```\n\n### With Prefix Icon\n```svelte\n<script lang=\"ts\">\n\timport { magnifyingGlassIcon } from 'entasis/icons/magnifyingGlass';\n\n\tlet search = $state('');\n</script>\n\n<TextInput label=\"Search\" bind:value={search}>\n\t{#snippet prefix()}\n\t\t{@render magnifyingGlassIcon()}\n\t{/snippet}\n</TextInput>\n```\n\n### With Suffix Button\n```svelte\n<script lang=\"ts\">\n\timport { copyIcon } from 'entasis/icons/copy';\n\n\tlet apiKey = $state('');\n\tconst copyToClipboard = () => navigator.clipboard.writeText(apiKey);\n</script>\n\n<TextInput label=\"API Key\" bind:value={apiKey}>\n\t{#snippet suffix()}\n\t\t<Button size=\"small\" squared onclick={copyToClipboard}>\n\t\t\t{@render copyIcon()}\n\t\t</Button>\n\t{/snippet}\n</TextInput>\n```\n\n### With Both Prefix and Suffix\n```svelte\n<script lang=\"ts\">\n\timport { arrowSquareOutIcon } from 'entasis/icons/arrowSquareOut';\n\n\tlet url = $state('');\n</script>\n\n<TextInput label=\"Website\" bind:value={url}>\n\t{#snippet prefix()}\n\t\t<span class=\"text-muted\">https://</span>\n\t{/snippet}\n\t{#snippet suffix()}\n\t\t{@render arrowSquareOutIcon()}\n\t{/snippet}\n</TextInput>\n```\n\n### Disabled State\n```svelte\n<TextInput \n\tlabel=\"Disabled\"\n\tvalue=\"Cannot edit\"\n\tdisabled\n/>\n```\n\n### With Error\n```svelte\n<TextInput \n\tlabel=\"Username\"\n\tbind:value={username}\n\terror={usernameError}\n/>\n```\n\n### Different Sizes\n```svelte\n<TextInput size=\"small\" label=\"Small\" bind:value={val1} />\n<TextInput size=\"normal\" label=\"Normal\" bind:value={val2} />\n<TextInput size=\"large\" label=\"Large\" bind:value={val3} />\n```\n\n### Login Form\n```svelte\n<script lang=\"ts\">\n\timport { envelopeIcon } from 'entasis/icons/envelope';\n\timport { lockIcon } from 'entasis/icons/lock';\n\n\tlet email = $state('');\n\tlet password = $state('');\n</script>\n\n<form>\n\t<TextInput \n\t\ttype=\"email\"\n\t\tlabel=\"Email\"\n\t\tplaceholder=\"your@email.com\"\n\t\tbind:value={email}\n\t\trequired\n\t>\n\t\t{#snippet prefix()}\n\t\t\t{@render envelopeIcon()}\n\t\t{/snippet}\n\t</TextInput>\n\t\n\t<PasswordInput \n\t\tlabel=\"Password\"\n\t\tbind:value={password}\n\t\trequired\n\t>\n\t\t{#snippet prefix()}\n\t\t\t{@render lockIcon()}\n\t\t{/snippet}\n\t</PasswordInput>\n\t\n\t<Button type=\"submit\" fullWidth>Login</Button>\n</form>\n```\n\n## Validation\n\nTextInput automatically validates:\n- **email**: Valid email format\n- **url**: Valid URL format\n- **required**: Non-empty value\n\nCustom validation can be added through the Field component.\n\n## Accessibility\n\n- Proper label association with input\n- ARIA attributes for required fields\n- Error messages announced to screen readers\n- Focus states clearly visible\n- Keyboard accessible\n\n## Notes\n\n- Extends the Field component for consistent behavior\n- Prefix/suffix slots are ideal for icons and actions\n- Input container handles focus states\n- Validation runs on blur and submit\n- Type determines browser validation behavior\n\n## Theme Customization\n\nThe TextInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\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<TextInput \n  label=\"Custom Input\"\n  bind:value={value}\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<TextInput \n  label=\"Styled Input\"\n  bind:value={value}\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 { setTextInputTheme } from './index.ts';\n  \n  setTextInputTheme({\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 textInputDescription = "\n# TextInput Component\n\nThe TextInput component is a versatile text input field with support for different input types (text, email, URL), validation, and consistent styling.\n\n## Basic Usage\n\n```svelte\n<TextInput label=\"Name\" bind:value={name} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **type**: 'text' | 'email' | 'url' (default: 'text')\n- **value**: string (bindable) - Input value\n- **placeholder**: string - Placeholder text\n- **inputAttrs**: native attributes for the underlying `<input>`, such as `autocomplete`, `inputmode`, `aria-*`, `data-*` and event handlers. `id`, `name`, `type`, `value`, `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 below input\n- **error**: string - Error message\n- **required**: boolean - Mark field 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' - Input size\n\n### Content Slots\n- **prefix**: Snippet - Content before input (icons, text)\n- **suffix**: Snippet - Content after input (icons, buttons)\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 />\n\t\t<Suffix />\n\t</InputContainer>\n\t<Error />\n</Field>\n```\n\n## Examples\n\n### Basic Text Input\n```svelte\n<script>\n\tlet name = $state('');\n</script>\n\n<TextInput label=\"Name\" bind:value={name} />\n```\n\n### Email Input\n```svelte\n<TextInput \n\ttype=\"email\"\n\tlabel=\"Email\"\n\tplaceholder=\"you@example.com\"\n\tbind:value={email}\n\trequired\n/>\n```\n\n### URL Input\n```svelte\n<TextInput \n\ttype=\"url\"\n\tlabel=\"Website\"\n\tplaceholder=\"https://example.com\"\n\tbind:value={website}\n/>\n```\n\n### With Placeholder\n```svelte\n<TextInput \n\tlabel=\"Username\"\n\tplaceholder=\"Enter your username\"\n\tbind:value={username}\n/>\n```\n\n### With Description\n```svelte\n<TextInput \n\tlabel=\"Display Name\"\n\tdescription=\"This is how others will see you\"\n\tbind:value={displayName}\n/>\n```\n\n### Required Field\n```svelte\n<TextInput \n\tlabel=\"Full Name\"\n\trequired\n\tbind:value={fullName}\n/>\n```\n\n### With Prefix Icon\n```svelte\n<script lang=\"ts\">\n\timport { magnifyingGlassIcon } from 'entasis/icons/magnifyingGlass';\n\n\tlet search = $state('');\n</script>\n\n<TextInput label=\"Search\" bind:value={search}>\n\t{#snippet prefix()}\n\t\t{@render magnifyingGlassIcon()}\n\t{/snippet}\n</TextInput>\n```\n\n### With Suffix Button\n```svelte\n<script lang=\"ts\">\n\timport { copyIcon } from 'entasis/icons/copy';\n\n\tlet apiKey = $state('');\n\tconst copyToClipboard = () => navigator.clipboard.writeText(apiKey);\n</script>\n\n<TextInput label=\"API Key\" bind:value={apiKey}>\n\t{#snippet suffix()}\n\t\t<Button size=\"small\" squared onclick={copyToClipboard}>\n\t\t\t{@render copyIcon()}\n\t\t</Button>\n\t{/snippet}\n</TextInput>\n```\n\n### With Both Prefix and Suffix\n```svelte\n<script lang=\"ts\">\n\timport { arrowSquareOutIcon } from 'entasis/icons/arrowSquareOut';\n\n\tlet url = $state('');\n</script>\n\n<TextInput label=\"Website\" bind:value={url}>\n\t{#snippet prefix()}\n\t\t<span class=\"text-muted\">https://</span>\n\t{/snippet}\n\t{#snippet suffix()}\n\t\t{@render arrowSquareOutIcon()}\n\t{/snippet}\n</TextInput>\n```\n\n### Disabled State\n```svelte\n<TextInput \n\tlabel=\"Disabled\"\n\tvalue=\"Cannot edit\"\n\tdisabled\n/>\n```\n\n### With Error\n```svelte\n<TextInput \n\tlabel=\"Username\"\n\tbind:value={username}\n\terror={usernameError}\n/>\n```\n\n### Different Sizes\n```svelte\n<TextInput size=\"small\" label=\"Small\" bind:value={val1} />\n<TextInput size=\"normal\" label=\"Normal\" bind:value={val2} />\n<TextInput size=\"large\" label=\"Large\" bind:value={val3} />\n```\n\n### Login Form\n```svelte\n<script lang=\"ts\">\n\timport { envelopeIcon } from 'entasis/icons/envelope';\n\timport { lockIcon } from 'entasis/icons/lock';\n\n\tlet email = $state('');\n\tlet password = $state('');\n</script>\n\n<form>\n\t<TextInput \n\t\ttype=\"email\"\n\t\tlabel=\"Email\"\n\t\tplaceholder=\"your@email.com\"\n\t\tinputAttrs={{ autocomplete: 'username' }}\n\t\tbind:value={email}\n\t\trequired\n\t>\n\t\t{#snippet prefix()}\n\t\t\t{@render envelopeIcon()}\n\t\t{/snippet}\n\t</TextInput>\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\t{#snippet prefix()}\n\t\t\t{@render lockIcon()}\n\t\t{/snippet}\n\t</PasswordInput>\n\t\n\t<Button type=\"submit\" fullWidth>Login</Button>\n</form>\n```\n\n## Validation\n\nTextInput automatically validates:\n- **email**: Valid email format\n- **url**: Valid URL format\n- **required**: Non-empty value\n\nCustom validation can be added through the Field component.\n\n## Accessibility\n\n- Proper label association with input\n- ARIA attributes for required fields\n- Error messages announced to screen readers\n- Focus states clearly visible\n- Keyboard accessible\n\n## Notes\n\n- Extends the Field component for consistent behavior\n- Prefix/suffix slots are ideal for icons and actions\n- Input container handles focus states\n- Validation runs on blur and submit\n- Type determines browser validation behavior\n- Password managers and browser autofill are not blocked. To keep a manager away from a field, pass its opt-out attribute through `inputAttrs`, for example `inputAttrs={{ 'data-1p-ignore': true }}` for 1Password\n\n## Theme Customization\n\nThe TextInput component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\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<TextInput \n  label=\"Custom Input\"\n  bind:value={value}\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<TextInput \n  label=\"Styled Input\"\n  bind:value={value}\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 { setTextInputTheme } from './index.ts';\n  \n  setTextInputTheme({\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/TextInput/textInput.mcp.js

@@ -17,6 +17,7 @@ Extends all Field component props plus:
 - **type**: 'text' | 'email' | 'url' (default: 'text')
 - **value**: string (bindable) - Input value
 - **placeholder**: string - Placeholder text
+- **inputAttrs**: native attributes for the underlying \`<input>\`, such as \`autocomplete\`, \`inputmode\`, \`aria-*\`, \`data-*\` and event handlers. \`id\`, \`name\`, \`type\`, \`value\`, \`placeholder\`, \`required\`, \`disabled\` and \`class\` stay owned by the component
 
 ### Field Props (inherited)
 - **label**: string | Snippet - Field label
@@ -24,6 +25,7 @@ Extends all Field component props plus:
 - **error**: string - Error message
 - **required**: boolean - Mark field 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' - Input size
 
 ### Content Slots
@@ -199,6 +201,7 @@ Extends all Field component props plus:
 		type="email"
 		label="Email"
 		placeholder="your@email.com"
+		inputAttrs={{ autocomplete: 'username' }}
 		bind:value={email}
 		required
 	>
@@ -209,6 +212,7 @@ Extends all Field component props plus:
 	
 	<PasswordInput 
 		label="Password"
+		autocomplete="current-password"
 		bind:value={password}
 		required
 	>
@@ -245,6 +249,7 @@ Custom validation can be added through the Field component.
 - Input container handles focus states
 - Validation runs on blur and submit
 - Type determines browser validation behavior
+- Password managers and browser autofill are not blocked. To keep a manager away from a field, pass its opt-out attribute through \`inputAttrs\`, for example \`inputAttrs={{ 'data-1p-ignore': true }}\` for 1Password
 
 ## Theme Customization
 

package/dist/components/Form/TimeInput/TimeInput.svelte

@@ -37,6 +37,8 @@
 		required = false,
 		theme,
 		disabled,
+		readOnly,
+		messages,
 		name,
 		onValidate,
 		visible,
@@ -77,6 +79,12 @@
 		set disabled(v: boolean | undefined) {
 			disabled = v;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get required() {
 			return required;
 		},
@@ -209,7 +217,7 @@
 				}
 			}}
 			{...rest}
-			{@attach popover.reference}
+			anchor={popover.reference}
 		>
 			<input
 				data-1p-ignore

package/dist/components/Form/TimeInput/timeInput.mcp.d.ts

@@ -1 +1 @@
-export declare const timeInputDescription = "\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 timeInputDescription = "\n# TimeInput\n\nMasked time entry composed with Field, with a popover list of time options. The value is a number\ncounted from midnight, in the unit chosen by `as`.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import { TimeInput } from './index.ts';\n</script>\n```\n\n## Usage\n\n```svelte\n<script lang=\"ts\">\n  let value = $state<number | null>(null);\n</script>\n\n<TimeInput label=\"Start time\" format=\"HH:MM\" bind:value />\n```\n\n## Props\n\n- **as**: 'minuteSinceMidnight' | 'secondSinceMidnight' | 'millisecondSinceMidnight' - Unit of the numeric value; defaults to milliseconds\n- **format**: Maskito time mode such as `HH:MM` or `HH:MM:SS`; controls display and parsing\n- **minValues** / **maxValues**: per-segment bounds passed to the time mask\n- **placeholder**: string - Defaults to the `format` string\n- **disabled**: boolean - Disable the input and the picker button; a disabled field leaves Form values and posts nothing\n- **readOnly**: boolean - The input stays focusable and is announced as read-only; typing and picker choices are refused, and the value still validates and submits. A read-only Form, FormGroup or fieldset Field makes it read-only too\n- **size**: 'small' | 'normal' | 'large' - Input size\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/TimeInput/timeInput.mcp.js

@@ -1,5 +1,36 @@
 export const timeInputDescription = `
+# TimeInput
 
+Masked time entry composed with Field, with a popover list of time options. The value is a number
+counted from midnight, in the unit chosen by \`as\`.
+
+## Import
+
+\`\`\`svelte
+<script lang="ts">
+  import { TimeInput } from './index.ts';
+</script>
+\`\`\`
+
+## Usage
+
+\`\`\`svelte
+<script lang="ts">
+  let value = $state<number | null>(null);
+</script>
+
+<TimeInput label="Start time" format="HH:MM" bind:value />
+\`\`\`
+
+## Props
+
+- **as**: 'minuteSinceMidnight' | 'secondSinceMidnight' | 'millisecondSinceMidnight' - Unit of the numeric value; defaults to milliseconds
+- **format**: Maskito time mode such as \`HH:MM\` or \`HH:MM:SS\`; controls display and parsing
+- **minValues** / **maxValues**: per-segment bounds passed to the time mask
+- **placeholder**: string - Defaults to the \`format\` string
+- **disabled**: boolean - Disable the input and the picker button; a disabled field leaves Form values and posts nothing
+- **readOnly**: boolean - The input stays focusable and is announced as read-only; typing and picker choices are refused, and the value still validates and submits. A read-only Form, FormGroup or fieldset Field makes it read-only too
+- **size**: 'small' | 'normal' | 'large' - Input size
 
 ## State contract
 

package/dist/components/Form/VoiceInput/VoiceInput.svelte

@@ -27,6 +27,8 @@
 		focused = $bindable(false),
 		required = false,
 		disabled = false,
+		readOnly,
+		messages,
 		name,
 		onValidate,
 		onValueChange,
@@ -92,6 +94,12 @@
 		set disabled(nextDisabled) {
 			disabled = nextDisabled ?? false;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get name() {
 			return name;
 		},
@@ -255,7 +263,7 @@
 			{size}
 			color="danger"
 			label={resolvedClearLabel}
-			disabled={field.disabled}
+			disabled={field.disabled || field.readOnly}
 			edge="none"
 			class={classes.clearAction({
 				size,
@@ -272,7 +280,7 @@
 		{size}
 		color={recorder.isRecording ? resolvedColor : 'neutral'}
 		label={buttonLabel}
-		disabled={field.disabled || recorder.isBusy}
+		disabled={field.disabled || field.readOnly || recorder.isBusy}
 		edge={isExpanded ? 'end' : 'none'}
 		class={classes.action({
 			size,