entasis 0.11.0 → 0.13.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

@@ -1,6 +1,6 @@
 import { type InferComponentTheme } from '../../../utils/cva/index.js';
 export declare const tagsInputTheme: {
-    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 tagsInputTheme: {
             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,40 +21,61 @@ export declare const tagsInputTheme: {
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    tag: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    tag: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    loading: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    loading: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    error: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    error: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    noOptions: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    noOptions: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type TagsInputTheme = typeof tagsInputTheme;
 export type TagsInputThemeProps = InferComponentTheme<TagsInputTheme>;
 export declare const setTagsInputTheme: (theme: InferComponentTheme<{
-    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    input: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -64,8 +85,8 @@ export declare const setTagsInputTheme: (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;
@@ -75,38 +96,59 @@ export declare const setTagsInputTheme: (theme: InferComponentTheme<{
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    tag: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    tag: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    loading: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    loading: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    error: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    error: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    noOptions: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    noOptions: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useTagsInputTheme: import("../../../utils/cva/theme.js").UseComponentTheme<{
-    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useTagsInputTheme: import("../../../utils/cva/theme.ts").UseComponentTheme<{
+    input: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -116,8 +158,8 @@ export declare const useTagsInputTheme: import("../../../utils/cva/theme.js").Us
             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;
@@ -127,33 +169,54 @@ export declare const useTagsInputTheme: import("../../../utils/cva/theme.js").Us
             true: string;
             false: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    tag: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    tag: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    loading: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    error: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    noOptions: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    loading: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    error: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    noOptions: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../../utils/cva/types.ts").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