entasis 0.10.2 → 0.12.0

package/dist/components/Form/CheckboxesInput/checkboxesInput.mcp.d.ts

@@ -1 +1 @@
-export declare const checkboxesInputDescription = "\n# CheckboxesInput Component\n\nThe CheckboxesInput component is a multi-selection input that allows users to select multiple options from a list. It provides a visually appealing interface with two display modes and supports custom labels and descriptions.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet selectedValues = $state([]);\n</script>\n\n<CheckboxesInput \n\tlabel=\"Select your interests\"\n\titems={[\n\t\t{ value: 'coding', label: 'Coding' },\n\t\t{ value: 'design', label: 'Design' },\n\t\t{ value: 'marketing', label: 'Marketing' }\n\t]}\n\tbind:value={selectedValues}\n/>\n```\n\n## Props\n\n### Core Props\n- **items**: CheckboxOption[] (required) - Array of checkbox options\n  - Each option has:\n    - value: string (required) - Unique identifier for the option\n    - label?: Slot - Display label (can be text or Svelte snippet)\n    - description?: Slot - Optional description text\n\n- **value**: string[] (bindable) - Array of selected option values\n- **mode**: 'normal' | 'card' (default: 'normal')\n  - normal: Simple checkbox list\n  - card: Each option displayed as a raised card with selection ring\n\n### Field Props\n- **label**: Slot - Field label\n- **description**: Slot - Helper text below label\n- **required**: boolean (default: false) - Makes field required\n- **disabled**: boolean - Disables all checkboxes\n- **visible**: boolean - Controls field visibility\n- **name**: string - Form field name\n\n### Validation Props\n- **errors**: string[] | boolean (bindable) - Validation errors\n- **focused**: boolean (bindable) - Focus state\n- **onValidate**: (value: string[]) => string[] | boolean - Custom validation function\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides for all checkbox parts\n\n### Slot Props\nAll Field slot props are available:\n- **header**: Snippet - Custom header\n- **suffix**: Snippet - Content after input\n- **prefix**: Snippet - Content before input\n- **actions**: Snippet - Action buttons area\n- **helper**: Snippet - Helper text\n- **footer**: Snippet - Footer content\n- **error**: Snippet - Custom error display\n- **errorsContainer**: Snippet - Custom errors container\n\n## Structure\n\nThe component renders as a fieldset with the following DOM structure:\n```\n<fieldset>\n\t<Field wrapper>\n\t\t<label> <!-- For each option -->\n\t\t\t<input type=\"checkbox\" hidden />\n\t\t\t<div> <!-- Track (checkbox background) -->\n\t\t\t<div> <!-- Thumb (check mark) -->\n\t\t\t<Slot> <!-- Label -->\n\t\t\t<Slot> <!-- Description -->\n\t\t</label>\n\t</Field>\n</fieldset>\n```\n\n## Examples\n\n### Basic Checkbox List\n```svelte\n<script>\n\tlet interests = $state([]);\n</script>\n\n<CheckboxesInput \n\tlabel=\"Interests\"\n\titems={[\n\t\t{ value: 'music', label: 'Music' },\n\t\t{ value: 'sports', label: 'Sports' },\n\t\t{ value: 'reading', label: 'Reading' },\n\t\t{ value: 'travel', label: 'Travel' }\n\t]}\n\tbind:value={interests}\n/>\n```\n\n### Card Mode\n```svelte\n<CheckboxesInput \n\tlabel=\"Select features\"\n\tmode=\"card\"\n\titems={[\n\t\t{ \n\t\t\tvalue: 'analytics', \n\t\t\tlabel: 'Analytics',\n\t\t\tdescription: 'Track user behavior and metrics'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'api', \n\t\t\tlabel: 'API Access',\n\t\t\tdescription: 'RESTful API for integrations'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'support', \n\t\t\tlabel: 'Priority Support',\n\t\t\tdescription: '24/7 dedicated support team'\n\t\t}\n\t]}\n\tbind:value={selectedFeatures}\n/>\n```\n\n### With Descriptions\n```svelte\n<CheckboxesInput \n\tlabel=\"Communication preferences\"\n\titems={[\n\t\t{ \n\t\t\tvalue: 'email', \n\t\t\tlabel: 'Email notifications',\n\t\t\tdescription: 'Receive updates via email'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'sms', \n\t\t\tlabel: 'SMS alerts',\n\t\t\tdescription: 'Text messages for urgent items'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'push', \n\t\t\tlabel: 'Push notifications',\n\t\t\tdescription: 'Browser push notifications'\n\t\t}\n\t]}\n\tbind:value={preferences}\n/>\n```\n\n### With Validation\n```svelte\n<script>\n\tlet skills = $state([]);\n\t\n\tfunction validateSkills(value) {\n\t\tif (value.length < 2) {\n\t\t\treturn ['Please select at least 2 skills'];\n\t\t}\n\t\treturn false;\n\t}\n</script>\n\n<CheckboxesInput \n\tlabel=\"Skills\"\n\trequired\n\titems={[\n\t\t{ value: 'js', label: 'JavaScript' },\n\t\t{ value: 'py', label: 'Python' },\n\t\t{ value: 'go', label: 'Go' },\n\t\t{ value: 'rust', label: 'Rust' }\n\t]}\n\tbind:value={skills}\n\tonValidate={validateSkills}\n/>\n```\n\n### In a Form\n```svelte\n<script>\n\timport { Form } from 'entasis/form';\n\t\n\tfunction handleSubmit(data) {\n\t\tconsole.log('Selected interests:', data.interests);\n\t}\n</script>\n\n<Form \n\tinputs={{\n\t\tinterests: {\n\t\t\ttype: 'checkboxes',\n\t\t\tlabel: 'Your interests',\n\t\t\trequired: true,\n\t\t\titems: [\n\t\t\t\t{ value: 'tech', label: 'Technology' },\n\t\t\t\t{ value: 'science', label: 'Science' },\n\t\t\t\t{ value: 'art', label: 'Art' },\n\t\t\t\t{ value: 'business', label: 'Business' }\n\t\t\t]\n\t\t}\n\t}}\n\tonSubmit={handleSubmit}\n/>\n```\n\n### With Custom Snippets\n```svelte\n<CheckboxesInput \n\tlabel=\"Select options\"\n\titems={[\n\t\t{ value: 'opt1', label: 'Option 1' },\n\t\t{ value: 'opt2', label: 'Option 2' }\n\t]}\n\tbind:value={selected}\n>\n\t{#snippet description()}\n\t\t<p class=\"text-sm text-muted\">Choose all that apply</p>\n\t{/snippet}\n\t\n\t{#snippet helper()}\n\t\t<p class=\"text-xs\">Selected: {selected.length}</p>\n\t{/snippet}\n</CheckboxesInput>\n```\n\n### Pre-selected Values\n```svelte\n<script>\n\tlet selected = $state(['option1', 'option3']);\n</script>\n\n<CheckboxesInput \n\tlabel=\"Preferences\"\n\titems={[\n\t\t{ value: 'option1', label: 'Option 1' },\n\t\t{ value: 'option2', label: 'Option 2' },\n\t\t{ value: 'option3', label: 'Option 3' }\n\t]}\n\tbind:value={selected}\n/>\n```\n\n### Disabled State\n```svelte\n<CheckboxesInput \n\tlabel=\"Read-only selection\"\n\tdisabled\n\titems={items}\n\tvalue={['option1']}\n/>\n```\n\n### Complex Options with Rich Labels\n```svelte\n<script lang=\"ts\">\n\timport { Chip } from 'entasis/chip';\n\n\tlet plans = $state<string[]>([]);\n</script>\n\n{#snippet storageLabel()}\n\tExtra Storage <Chip color=\"primary\">+$5/mo</Chip>\n{/snippet}\n\n{#snippet usersLabel()}\n\tTeam Members <Chip color=\"success\">+$10/mo</Chip>\n{/snippet}\n\n<CheckboxesInput\n\tlabel=\"Select add-ons\"\n\tmode=\"card\"\n\titems={[\n\t\t{\n\t\t\tvalue: 'storage',\n\t\t\tlabel: storageLabel,\n\t\t\tdescription: '100GB additional cloud storage'\n\t\t},\n\t\t{\n\t\t\tvalue: 'users',\n\t\t\tlabel: usersLabel,\n\t\t\tdescription: 'Add up to 10 team members'\n\t\t}\n\t]}\n\tbind:value={plans}\n/>\n```\n\n## Validation\n\n- When **required** is true, at least one option must be selected\n- Custom validation via **onValidate** prop\n- Returns array of error messages or boolean\n- Errors are displayed inline below the field\n- Validation runs on change and blur\n\n## Modes\n\n### Normal Mode\n- Simple checkbox list layout\n- Compact design\n- Best for shorter lists or secondary choices\n\n### Card Mode\n- Each option displayed as a card with elevation\n- Selected cards show a primary selection ring\n- Better visual feedback\n- Ideal for feature selection or important choices\n\n## Accessibility\n\n- Uses semantic `<fieldset>` and `<legend>` elements\n- Each checkbox properly associated with its label\n- Hidden native checkbox inputs for keyboard navigation\n- Supports keyboard interaction (Space/Enter to toggle)\n- ARIA attributes for validation states\n- Error announcements for screen readers\n- Focus management within the group\n\n## Theme Customization\n\nThe CheckboxesInput 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- **root**: Main container styles\n- **checkboxesInputContainer**: Options grid container styles\n- **checkboxesInputItem**: Individual checkbox wrapper styles\n- **checkboxesInputItemTrack**: Checkbox background/track styles\n- **checkboxesInputItemThumb**: Check mark indicator styles\n- **checkboxesInputItemLabel**: Label text styles\n- **checkboxesInputItemDescription**: Description text styles\n- **checkboxesInputItemIcon**: Icon styling\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n- Variants:\n  - mode: 'card' | 'normal' - Layout mode\n\n**checkboxesInputContainer**:\n- base: Base classes for options grid container\n- Variants:\n  - mode: 'card' | 'normal' - Grid layout based on mode\n  - disabled: boolean - Disabled state styling\n\n**checkboxesInputItem**:\n- base: Base classes for individual checkbox wrapper\n- Variants:\n  - mode: 'card' | 'normal' - Item styling based on mode\n  - checked: boolean - Selected state styling\n  - disabled: boolean - Disabled state styling\n\n**checkboxesInputItemTrack**:\n- base: Base classes for checkbox track/background\n- Variants:\n  - checked: boolean - Track styling when checked\n  - mode: 'card' | 'normal' - Mode-based styling\n  - disabled: boolean - Disabled state styling\n\n**checkboxesInputItemThumb**:\n- base: Base classes for check mark indicator\n- Variants:\n  - checked: boolean - Visibility and styling when checked\n  - mode: 'card' | 'normal' - Mode-based styling\n  - disabled: boolean - Disabled state styling\n\n**checkboxesInputItemLabel**:\n- base: Base classes for label text\n\n**checkboxesInputItemDescription**:\n- base: Base classes for description text\n\n**checkboxesInputItemIcon**:\n- base: Base classes for icon styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<CheckboxesInput \n  label=\"Options\"\n  bind:value={selected}\n  items={items}\n  theme={{\n    // The option grid lays itself out against its OWN width, not the viewport: declare the\n    // container on the root and query it on the grid, so the columns follow the field's host\n    // (a sidebar, a split pane, a dialog) instead of the device.\n    root: { base: '@container' },\n    checkboxesInputContainer: {\n      base: 'grid-cols-1 @md:grid-cols-3 gap-lg'\n    },\n    checkboxesInputItem: {\n      mode: {\n        card: 'rounded-lg border-2'\n      }\n    }\n  }}\n/>\n```\n\n**Card Mode Customization**:\n```svelte\n<CheckboxesInput \n  mode=\"card\"\n  label=\"Features\"\n  bind:value={features}\n  items={items}\n  theme={{\n    checkboxesInputItem: {\n      checked: {\n        true: 'ring-2 ring-primary bg-primary/10'\n      },\n      mode: {\n        card: 'rounded-xl raised-3 hover:raised-4'\n      }\n    },\n    checkboxesInputItemThumb: {\n      checked: {\n        true: 'bg-primary scale-100'\n      }\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setCheckboxesInputTheme } from './index.ts';\n  \n  setCheckboxesInputTheme({\n    root: { base: '@container' },\n    checkboxesInputContainer: {\n      base: 'gap-lg',\n      mode: {\n        card: 'grid-cols-1 @2xl:grid-cols-2'\n      }\n    },\n    checkboxesInputItem: {\n      mode: {\n        card: 'rounded-lg transition-all'\n      }\n    }\n  });\n</script>\n```\n\n## Notes\n\n- Value is always an array of strings (selected option values)\n- Empty array means no selections\n- Options are rendered in a responsive grid (1 column mobile, 2 columns desktop)\n- Check icon automatically appears when option is selected\n- Native checkbox is hidden but maintained for accessibility\n- Works seamlessly with Form component\n- Supports Svelte 5 snippets for labels and descriptions\n- Each option requires a unique `value` property\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 checkboxesInputDescription = "\n# CheckboxesInput Component\n\nThe CheckboxesInput component is a multi-selection input that allows users to select multiple options from a list. It provides a visually appealing interface with two display modes and supports custom labels and descriptions.\n\n## Basic Usage\n\n```svelte\n<script>\n\tlet selectedValues = $state([]);\n</script>\n\n<CheckboxesInput \n\tlabel=\"Select your interests\"\n\titems={[\n\t\t{ value: 'coding', label: 'Coding' },\n\t\t{ value: 'design', label: 'Design' },\n\t\t{ value: 'marketing', label: 'Marketing' }\n\t]}\n\tbind:value={selectedValues}\n/>\n```\n\n## Props\n\n### Core Props\n- **items**: CheckboxOption[] (required) - Array of checkbox options\n  - Each option has:\n    - value: string (required) - Unique identifier for the option\n    - label?: Slot - Display label (can be text or Svelte snippet)\n    - description?: Slot - Optional description text\n    - disabled?: boolean - The option cannot be toggled. When it is selected, a native `<form>` leaves it out of its submission (like a disabled native checkbox) while the field value, and so an entasis Form value, keeps it\n\n- **value**: string[] (bindable) - Array of selected option values. Typed from the options: with literal option values it is an array of that union, and `onValueChange` receives it\n- **selectAll**: boolean (default: false) - Adds a select-all checkbox above the options, labelled with the localized \"Select all\" (override with **selectAllLabel**). It is mixed (`aria-checked=\"mixed\"`) while some, but not all, enabled options are selected and lists the options in `aria-controls`. A click selects every enabled option, the next clears them, and the next gives back the partial selection the row started from; with no partial selection it toggles between all and none. Disabled options always keep their state. The field value stays the list of option values, so `required` and `onValidate` never see the row, and `onValueChange` fires once per click\n- **selectAllLabel**: Slot - Label of the select-all row\n- **mode**: 'normal' | 'card' (default: 'normal')\n  - normal: Simple checkbox list\n  - card: Each option displayed as a raised card with selection ring\n\n### Field Props\n- **label**: Slot - Field label\n- **description**: Slot - Helper text below label\n- **required**: boolean (default: false) - Makes field required\n- **disabled**: boolean - Disables all checkboxes. A disabled group is left out of the submitted Form value and skips validation\n- **readOnly**: boolean - Keeps every option focusable and announced (`aria-readonly`) while clicks and keys change nothing; the selection still validates and submits\n- **visible**: boolean - Controls field visibility\n- **name**: string - Form field name\n\n### Validation Props\n- **errors**: string[] | boolean (bindable) - Validation errors\n- **focused**: boolean (bindable) - Focus state\n- **onValidate**: (value: string[]) => string[] | boolean - Custom validation function\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides for all checkbox parts\n\n### Slot Props\nAll Field slot props are available:\n- **header**: Snippet - Custom header\n- **suffix**: Snippet - Content after input\n- **prefix**: Snippet - Content before input\n- **actions**: Snippet - Action buttons area\n- **helper**: Snippet - Helper text\n- **footer**: Snippet - Footer content\n- **error**: Snippet - Custom error display\n- **errorsContainer**: Snippet - Custom errors container\n\n## Structure\n\nThe component renders as a fieldset with the following DOM structure:\n```\n<fieldset>\n\t<Field wrapper>\n\t\t<label> <!-- For each option -->\n\t\t\t<input type=\"checkbox\" hidden />\n\t\t\t<div> <!-- Track (checkbox background) -->\n\t\t\t<div> <!-- Thumb (check mark) -->\n\t\t\t<Slot> <!-- Label -->\n\t\t\t<Slot> <!-- Description -->\n\t\t</label>\n\t</Field>\n</fieldset>\n```\n\n## Examples\n\n### Basic Checkbox List\n```svelte\n<script>\n\tlet interests = $state([]);\n</script>\n\n<CheckboxesInput \n\tlabel=\"Interests\"\n\titems={[\n\t\t{ value: 'music', label: 'Music' },\n\t\t{ value: 'sports', label: 'Sports' },\n\t\t{ value: 'reading', label: 'Reading' },\n\t\t{ value: 'travel', label: 'Travel' }\n\t]}\n\tbind:value={interests}\n/>\n```\n\n### Card Mode\n```svelte\n<CheckboxesInput \n\tlabel=\"Select features\"\n\tmode=\"card\"\n\titems={[\n\t\t{ \n\t\t\tvalue: 'analytics', \n\t\t\tlabel: 'Analytics',\n\t\t\tdescription: 'Track user behavior and metrics'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'api', \n\t\t\tlabel: 'API Access',\n\t\t\tdescription: 'RESTful API for integrations'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'support', \n\t\t\tlabel: 'Priority Support',\n\t\t\tdescription: '24/7 dedicated support team'\n\t\t}\n\t]}\n\tbind:value={selectedFeatures}\n/>\n```\n\n### With Descriptions\n```svelte\n<CheckboxesInput \n\tlabel=\"Communication preferences\"\n\titems={[\n\t\t{ \n\t\t\tvalue: 'email', \n\t\t\tlabel: 'Email notifications',\n\t\t\tdescription: 'Receive updates via email'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'sms', \n\t\t\tlabel: 'SMS alerts',\n\t\t\tdescription: 'Text messages for urgent items'\n\t\t},\n\t\t{ \n\t\t\tvalue: 'push', \n\t\t\tlabel: 'Push notifications',\n\t\t\tdescription: 'Browser push notifications'\n\t\t}\n\t]}\n\tbind:value={preferences}\n/>\n```\n\n### With Validation\n```svelte\n<script>\n\tlet skills = $state([]);\n\t\n\tfunction validateSkills(value) {\n\t\tif (value.length < 2) {\n\t\t\treturn ['Please select at least 2 skills'];\n\t\t}\n\t\treturn false;\n\t}\n</script>\n\n<CheckboxesInput \n\tlabel=\"Skills\"\n\trequired\n\titems={[\n\t\t{ value: 'js', label: 'JavaScript' },\n\t\t{ value: 'py', label: 'Python' },\n\t\t{ value: 'go', label: 'Go' },\n\t\t{ value: 'rust', label: 'Rust' }\n\t]}\n\tbind:value={skills}\n\tonValidate={validateSkills}\n/>\n```\n\n### In a Form\n```svelte\n<script>\n\timport { Form } from 'entasis/form';\n\t\n\tfunction handleSubmit(data) {\n\t\tconsole.log('Selected interests:', data.interests);\n\t}\n</script>\n\n<Form \n\tinputs={{\n\t\tinterests: {\n\t\t\ttype: 'checkboxes',\n\t\t\tlabel: 'Your interests',\n\t\t\trequired: true,\n\t\t\titems: [\n\t\t\t\t{ value: 'tech', label: 'Technology' },\n\t\t\t\t{ value: 'science', label: 'Science' },\n\t\t\t\t{ value: 'art', label: 'Art' },\n\t\t\t\t{ value: 'business', label: 'Business' }\n\t\t\t]\n\t\t}\n\t}}\n\tonSubmit={handleSubmit}\n/>\n```\n\n### With Custom Snippets\n```svelte\n<CheckboxesInput \n\tlabel=\"Select options\"\n\titems={[\n\t\t{ value: 'opt1', label: 'Option 1' },\n\t\t{ value: 'opt2', label: 'Option 2' }\n\t]}\n\tbind:value={selected}\n>\n\t{#snippet description()}\n\t\t<p class=\"text-sm text-muted\">Choose all that apply</p>\n\t{/snippet}\n\t\n\t{#snippet helper()}\n\t\t<p class=\"text-xs\">Selected: {selected.length}</p>\n\t{/snippet}\n</CheckboxesInput>\n```\n\n### Pre-selected Values\n```svelte\n<script>\n\tlet selected = $state(['option1', 'option3']);\n</script>\n\n<CheckboxesInput \n\tlabel=\"Preferences\"\n\titems={[\n\t\t{ value: 'option1', label: 'Option 1' },\n\t\t{ value: 'option2', label: 'Option 2' },\n\t\t{ value: 'option3', label: 'Option 3' }\n\t]}\n\tbind:value={selected}\n/>\n```\n\n### Disabled State\n```svelte\n<CheckboxesInput \n\tlabel=\"Read-only selection\"\n\tdisabled\n\titems={items}\n\tvalue={['option1']}\n/>\n```\n\n### Complex Options with Rich Labels\n```svelte\n<script lang=\"ts\">\n\timport { Chip } from 'entasis/chip';\n\n\tlet plans = $state<string[]>([]);\n</script>\n\n{#snippet storageLabel()}\n\tExtra Storage <Chip color=\"primary\">+$5/mo</Chip>\n{/snippet}\n\n{#snippet usersLabel()}\n\tTeam Members <Chip color=\"success\">+$10/mo</Chip>\n{/snippet}\n\n<CheckboxesInput\n\tlabel=\"Select add-ons\"\n\tmode=\"card\"\n\titems={[\n\t\t{\n\t\t\tvalue: 'storage',\n\t\t\tlabel: storageLabel,\n\t\t\tdescription: '100GB additional cloud storage'\n\t\t},\n\t\t{\n\t\t\tvalue: 'users',\n\t\t\tlabel: usersLabel,\n\t\t\tdescription: 'Add up to 10 team members'\n\t\t}\n\t]}\n\tbind:value={plans}\n/>\n```\n\n## Validation\n\n- When **required** is true, at least one option must be selected\n- Custom validation via **onValidate** prop\n- Returns array of error messages or boolean\n- Errors are displayed inline below the field\n- Validation runs on change and blur\n\n## Modes\n\n### Normal Mode\n- Simple checkbox list layout\n- Compact design\n- Best for shorter lists or secondary choices\n\n### Card Mode\n- Each option displayed as a card with elevation\n- Selected cards show a primary selection ring\n- Better visual feedback\n- Ideal for feature selection or important choices\n\n## Accessibility\n\n- Uses semantic `<fieldset>` and `<legend>` elements\n- Each option is named by its label (`aria-labelledby`) and described by its description (`aria-describedby`), so the description is not part of the accessible name\n- Every option is a Tab stop; Space toggles it. Enter does not toggle: like a native checkbox it continues the form. Inside an entasis Form it validates the field and moves focus to the next one (the last field submits), and inside a plain `<form>` it clicks the form's default submit button\n- The submitted values are hidden inputs beside the options (never inside a button), one per selected enabled option; a required group blocks a native submit while nothing is selected\n- ARIA attributes for validation states\n- Error announcements for screen readers\n- Each option button gets an id unique to the instance (`<field id>-option-<index>`), so two fields with the same `name` or values containing spaces never produce duplicate or invalid ids\n\n## Theme Customization\n\nThe CheckboxesInput 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- **root**: Main container styles\n- **checkboxesInputContainer**: Options grid container styles\n- **checkboxesInputItem**: Individual checkbox wrapper styles\n- **checkboxesInputItemTrack**: Checkbox background/track styles\n- **checkboxesInputItemThumb**: Check mark indicator styles\n- **checkboxesInputItemLabel**: Label text styles\n- **checkboxesInputItemDescription**: Description text styles\n- **checkboxesInputItemIcon**: Icon styling\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n- Variants:\n  - mode: 'card' | 'normal' - Layout mode\n\n**checkboxesInputContainer**:\n- base: Base classes for options grid container\n- Variants:\n  - mode: 'card' | 'normal' - Grid layout based on mode\n  - disabled: boolean - Disabled state styling\n\n**checkboxesInputItem**:\n- base: Base classes for individual checkbox wrapper\n- Variants:\n  - mode: 'card' | 'normal' - Item styling based on mode\n  - checked: boolean - Selected state styling\n  - disabled: boolean - Disabled state styling\n\n**checkboxesInputItemTrack**:\n- base: Base classes for checkbox track/background\n- Variants:\n  - checked: boolean - Track styling when checked\n  - mode: 'card' | 'normal' - Mode-based styling\n  - disabled: boolean - Disabled state styling\n\n**checkboxesInputItemThumb**:\n- base: Base classes for check mark indicator\n- Variants:\n  - checked: boolean - Visibility and styling when checked\n  - mode: 'card' | 'normal' - Mode-based styling\n  - disabled: boolean - Disabled state styling\n\n**checkboxesInputItemLabel**:\n- base: Base classes for label text\n\n**checkboxesInputItemDescription**:\n- base: Base classes for description text\n\n**checkboxesInputItemIcon**:\n- base: Base classes for icon styling\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<CheckboxesInput \n  label=\"Options\"\n  bind:value={selected}\n  items={items}\n  theme={{\n    // The option grid lays itself out against its OWN width, not the viewport: declare the\n    // container on the root and query it on the grid, so the columns follow the field's host\n    // (a sidebar, a split pane, a dialog) instead of the device.\n    root: { base: '@container' },\n    checkboxesInputContainer: {\n      base: 'grid-cols-1 @md:grid-cols-3 gap-lg'\n    },\n    checkboxesInputItem: {\n      mode: {\n        card: 'rounded-lg border-2'\n      }\n    }\n  }}\n/>\n```\n\n**Card Mode Customization**:\n```svelte\n<CheckboxesInput \n  mode=\"card\"\n  label=\"Features\"\n  bind:value={features}\n  items={items}\n  theme={{\n    checkboxesInputItem: {\n      checked: {\n        true: 'ring-2 ring-primary bg-primary/10'\n      },\n      mode: {\n        card: 'rounded-xl raised-3 hover:raised-4'\n      }\n    },\n    checkboxesInputItemThumb: {\n      checked: {\n        true: 'bg-primary scale-100'\n      }\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setCheckboxesInputTheme } from './index.ts';\n  \n  setCheckboxesInputTheme({\n    root: { base: '@container' },\n    checkboxesInputContainer: {\n      base: 'gap-lg',\n      mode: {\n        card: 'grid-cols-1 @2xl:grid-cols-2'\n      }\n    },\n    checkboxesInputItem: {\n      mode: {\n        card: 'rounded-lg transition-all'\n      }\n    }\n  });\n</script>\n```\n\n## Notes\n\n- Value is always an array of strings (selected option values)\n- Empty array means no selections\n- Options are rendered in a responsive grid (1 column mobile, 2 columns desktop)\n- Check icon automatically appears when option is selected\n- Hidden native inputs sit beside the options so plain `<form>` submissions work\n- Works seamlessly with Form component\n- Supports Svelte 5 snippets for labels and descriptions\n- Each option requires a unique `value` property\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/CheckboxesInput/checkboxesInput.mcp.js

@@ -29,8 +29,11 @@ The CheckboxesInput component is a multi-selection input that allows users to se
     - value: string (required) - Unique identifier for the option
     - label?: Slot - Display label (can be text or Svelte snippet)
     - description?: Slot - Optional description text
+    - disabled?: boolean - The option cannot be toggled. When it is selected, a native \`<form>\` leaves it out of its submission (like a disabled native checkbox) while the field value, and so an entasis Form value, keeps it
 
-- **value**: string[] (bindable) - Array of selected option values
+- **value**: string[] (bindable) - Array of selected option values. Typed from the options: with literal option values it is an array of that union, and \`onValueChange\` receives it
+- **selectAll**: boolean (default: false) - Adds a select-all checkbox above the options, labelled with the localized "Select all" (override with **selectAllLabel**). It is mixed (\`aria-checked="mixed"\`) while some, but not all, enabled options are selected and lists the options in \`aria-controls\`. A click selects every enabled option, the next clears them, and the next gives back the partial selection the row started from; with no partial selection it toggles between all and none. Disabled options always keep their state. The field value stays the list of option values, so \`required\` and \`onValidate\` never see the row, and \`onValueChange\` fires once per click
+- **selectAllLabel**: Slot - Label of the select-all row
 - **mode**: 'normal' | 'card' (default: 'normal')
   - normal: Simple checkbox list
   - card: Each option displayed as a raised card with selection ring
@@ -39,7 +42,8 @@ The CheckboxesInput component is a multi-selection input that allows users to se
 - **label**: Slot - Field label
 - **description**: Slot - Helper text below label
 - **required**: boolean (default: false) - Makes field required
-- **disabled**: boolean - Disables all checkboxes
+- **disabled**: boolean - Disables all checkboxes. A disabled group is left out of the submitted Form value and skips validation
+- **readOnly**: boolean - Keeps every option focusable and announced (\`aria-readonly\`) while clicks and keys change nothing; the selection still validates and submits
 - **visible**: boolean - Controls field visibility
 - **name**: string - Form field name
 
@@ -312,12 +316,12 @@ The component renders as a fieldset with the following DOM structure:
 ## Accessibility
 
 - Uses semantic \`<fieldset>\` and \`<legend>\` elements
-- Each checkbox properly associated with its label
-- Hidden native checkbox inputs for keyboard navigation
-- Supports keyboard interaction (Space/Enter to toggle)
+- Each option is named by its label (\`aria-labelledby\`) and described by its description (\`aria-describedby\`), so the description is not part of the accessible name
+- Every option is a Tab stop; Space toggles it. Enter does not toggle: like a native checkbox it continues the form. Inside an entasis Form it validates the field and moves focus to the next one (the last field submits), and inside a plain \`<form>\` it clicks the form's default submit button
+- The submitted values are hidden inputs beside the options (never inside a button), one per selected enabled option; a required group blocks a native submit while nothing is selected
 - ARIA attributes for validation states
 - Error announcements for screen readers
-- Focus management within the group
+- Each option button gets an id unique to the instance (\`<field id>-option-<index>\`), so two fields with the same \`name\` or values containing spaces never produce duplicate or invalid ids
 
 ## Theme Customization
 
@@ -456,7 +460,7 @@ The theme object contains the following parts:
 - Empty array means no selections
 - Options are rendered in a responsive grid (1 column mobile, 2 columns desktop)
 - Check icon automatically appears when option is selected
-- Native checkbox is hidden but maintained for accessibility
+- Hidden native inputs sit beside the options so plain \`<form>\` submissions work
 - Works seamlessly with Form component
 - Supports Svelte 5 snippets for labels and descriptions
 - Each option requires a unique \`value\` property

package/dist/components/Form/CheckboxesInput/checkboxesInput.props.d.ts

@@ -1,28 +1,44 @@
 import type { Slot } from '../../Slot/slot.js';
 import type { FieldProps, InputProps } from '../Field/field.js';
 import type { CheckboxesInputThemeProps } from './checkboxesInput.theme.js';
-export type CheckboxOption = {
+export type CheckboxOption<Value extends string = string> = {
     /** Display content for the option, rendered as the option label. */
     label?: Slot;
     /** Unique value for the option, used as the checkbox value and selection key. */
-    value: string;
+    value: Value;
     /** Supporting content rendered below the option label. */
     description?: Slot;
-    /** Prevents toggling this individual option. */
+    /**
+     * Prevents toggling this individual option. A native `<form>` leaves a disabled option out of
+     * its submission, while the field value (and so an entasis Form's value) keeps it when selected.
+     */
     disabled?: boolean;
 };
 export type CheckboxMode = 'card' | 'normal';
-export type CheckboxesInputProps<T extends CheckboxOption = CheckboxOption> = Omit<InputProps<'checkboxes'>, 'theme' | 'value' | 'defaultValue' | 'onValueChange'> & {
-    /** Selected option values, bindable with `bind:value`. */
-    value?: string[];
+export type CheckboxesInputProps<T extends CheckboxOption = CheckboxOption, Value extends string = T['value']> = Omit<InputProps<'checkboxes'>, 'theme' | 'value' | 'defaultValue' | 'onValueChange'> & {
+    /**
+     * Selected option values, bindable with `bind:value`. Typed from the options' `value`s, so
+     * literal values (`items` declared `as const`, or with literal `value`s) give a union of them.
+     */
+    value?: Value[];
     /** Initial selected option values when `value` is omitted. */
-    defaultValue?: string[];
+    defaultValue?: Value[];
     /** Called when the selected option values change. */
-    onValueChange?: (value: string[]) => void;
+    onValueChange?: (value: Value[]) => void;
     /** Visual layout style for the checkbox group (`normal` or `card`). */
     mode?: CheckboxMode;
     /** Items to render as checkbox choices. */
-    items: T[];
+    items: readonly (T & CheckboxOption<Value>)[];
+    /**
+     * Adds a select-all checkbox above the options. It is mixed while some, but not all, of the
+     * enabled options are selected. A click selects every enabled option, the next clears them,
+     * and the next gives back the partial selection the row started from (with no partial
+     * selection it toggles between all and none). Disabled options keep their state, and the
+     * field value stays the list of option values.
+     */
+    selectAll?: boolean;
+    /** Label of the select-all checkbox. Defaults to the localized "Select all". */
+    selectAllLabel?: Slot;
     /** Theme overrides for the checkbox group and shared field parts. */
     theme?: CheckboxesInputThemeProps & InputProps<'checkboxes'>['theme'];
 } & Partial<Omit<FieldProps<'checkboxes'>, 'children' | 'field' | 'type' | 'theme'>>;

package/dist/components/Form/CheckboxesInput/checkboxesInput.theme.d.ts

@@ -26,6 +26,10 @@ export declare const checkboxesInputTheme: {
             true: string;
             false: string;
         };
+        readOnly: {
+            true: string;
+            false: string;
+        };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     checkboxesInputItemLabel: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         size: {
@@ -127,6 +131,10 @@ export declare const setCheckboxesInputTheme: (theme: InferComponentTheme<{
             true: string;
             false: string;
         };
+        readOnly: {
+            true: string;
+            false: string;
+        };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     checkboxesInputItemLabel: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         size: {
@@ -226,6 +234,10 @@ export declare const useCheckboxesInputTheme: import("../../../utils/cva/theme.j
             true: string;
             false: string;
         };
+        readOnly: {
+            true: string;
+            false: string;
+        };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     checkboxesInputItemLabel: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         size: {

package/dist/components/Form/CheckboxesInput/checkboxesInput.theme.js

@@ -11,12 +11,12 @@ const defaultCheckboxesInput = cva({
     }
 });
 const defaultCheckboxesInputItem = cva({
-    base: 'relative grid w-full cursor-pointer items-start gap-xs rounded-md pl-layout-xl text-left transition-[color,background-color,box-shadow,opacity] outline-none focus-visible:ring-2 focus-visible:ring-focus/50',
+    base: 'relative grid w-full cursor-pointer items-start gap-xs rounded-md ps-layout-xl text-start transition-[color,background-color,box-shadow,opacity] outline-none focus-visible:ring-2 focus-visible:ring-focus/50',
     variants: {
         mode: {
             card: 'raised bg-surface-raised py-md',
             normal: 'py-xs',
-            control: '!inline-grid !min-h-0 !grid-cols-1 !place-items-center !gap-0 !p-0 !pl-0'
+            control: '!inline-grid !min-h-0 !grid-cols-1 !place-items-center !gap-0 !p-0 !ps-0'
         },
         size: {
             small: 'min-h-row-sm',
@@ -30,6 +30,11 @@ const defaultCheckboxesInputItem = cva({
         disabled: {
             true: 'cursor-not-allowed opacity-50',
             false: ''
+        },
+        // Focusable and announced, but not changeable: no pointer cursor promising a toggle.
+        readOnly: {
+            true: 'cursor-default',
+            false: ''
         }
     },
     defaultVariants: {
@@ -72,7 +77,7 @@ const defaultCheckboxesInputItemLabel = cva({
     }
 });
 const defaultCheckboxesInputItemTrack = cva({
-    base: 'origin-center content-[""] bg-surface-raised border border-neutral-muted rounded-sm absolute left-2',
+    base: 'origin-center content-[""] bg-surface-raised border border-neutral-muted rounded-sm absolute start-2',
     variants: {
         checked: {
             true: '',
@@ -98,7 +103,7 @@ const defaultCheckboxesInputItemTrack = cva({
 const defaultCheckboxesInputItemThumb = cva({
     // The check/minus icons paint with `currentColor`, so the thumb's text colour is the
     // mark colour: `selected-contrast` against the `bg-selected` fill it gets when checked.
-    base: 'origin-center radio rounded-sm flex items-center justify-center transition-[background-color,opacity,scale] content-[""] absolute left-2 scale-[85%] opacity-0 p-xs text-selected-contrast',
+    base: 'origin-center radio rounded-sm flex items-center justify-center transition-[background-color,opacity,scale] content-[""] absolute start-2 scale-[85%] opacity-0 p-xs text-selected-contrast',
     variants: {
         checked: {
             true: 'bg-selected scale-[100%] opacity-100',

package/dist/components/Form/CheckboxesInput/choiceEnter.d.ts

@@ -0,0 +1,11 @@
+import type { FieldType } from '../Field/field.js';
+import type { FieldState } from '../Field/field.state.svelte.js';
+/**
+ * Handles an Enter key press on a choice control's element. Enter never toggles or selects, so
+ * every Enter nobody cancelled is cancelled here (a button would click on it, and again on each
+ * auto-repeat). Only a plain press moves the form on; a repeat, an IME composition and a press
+ * with a modifier are swallowed without submitting. Returns whether the form was continued.
+ */
+export declare const continueFormFromChoice: <T extends FieldType>(event: KeyboardEvent & {
+    currentTarget: EventTarget & Element;
+}, field: FieldState<T>) => boolean;

package/dist/components/Form/CheckboxesInput/choiceEnter.js

@@ -0,0 +1,27 @@
+// Enter on a choice control. A native checkbox or radio does not toggle on Enter: it submits its
+// form through the form's default button, as a text field does. Checkbox, CheckboxesInput and
+// RadioInput are buttons, so they mirror that here: inside an entasis Form Enter moves on to the
+// next field (the last one submits), and inside a plain <form> it requests the native submission.
+import { requestNativeSubmit } from '../../../utils/requestNativeSubmit.js';
+/**
+ * Handles an Enter key press on a choice control's element. Enter never toggles or selects, so
+ * every Enter nobody cancelled is cancelled here (a button would click on it, and again on each
+ * auto-repeat). Only a plain press moves the form on; a repeat, an IME composition and a press
+ * with a modifier are swallowed without submitting. Returns whether the form was continued.
+ */
+export const continueFormFromChoice = (event, field) => {
+    if (event.key !== 'Enter' || event.defaultPrevented)
+        return false;
+    event.preventDefault();
+    if (event.repeat ||
+        event.isComposing ||
+        event.shiftKey ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey) {
+        return false;
+    }
+    if (!field.form?.advanceFrom(field))
+        requestNativeSubmit(event.currentTarget);
+    return true;
+};

package/dist/components/Form/ColorInput/ColorInput.svelte

@@ -7,7 +7,7 @@
 	import FieldActionButton from '../Field/FieldActionButton.svelte';
 	import { createFieldState } from '../Field/field.state.svelte.js';
 	import Popover from '../../Popover/Popover.svelte';
-	import type { PopoverState } from '../../Popover/popover.state.svelte.js';
+	import type { PopoverApi } from '../../Popover/popover.api.js';
 	import { useI18n } from '../../../i18n/context.svelte.js';
 	import type { ColorInputProps } from './colorInput.props.js';
 	import { useColorInputTheme } from './colorInput.theme.js';
@@ -22,6 +22,8 @@
 		placeholder = '',
 		theme,
 		disabled,
+		readOnly,
+		messages,
 		name,
 		onValidate,
 		onValueChange,
@@ -61,6 +63,12 @@
 		set disabled(v: boolean | undefined) {
 			disabled = v;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get required() {
 			return required;
 		},
@@ -175,6 +183,7 @@
 <Popover
 	id={`${id}-color-popover`}
 	bind:open={isPickerOpen}
+	label={`${t.choose} ${t.color}`}
 	position="bottom-start"
 	size="normal"
 	class={classes.popover({ class: theme?.popover?.base })}
@@ -192,7 +201,7 @@
 		/>
 	</div>
 
-	{#snippet trigger(popover: PopoverState)}
+	{#snippet trigger(popover: PopoverApi)}
 		{#snippet swatch()}
 			<span class={classes.swatch({ empty: isEmpty, class: theme?.swatch?.base })}>
 				{#if !isEmpty}
@@ -215,7 +224,7 @@
 				}
 			}}
 			{...rest}
-			{@attach popover.reference}
+			anchor={popover.reference}
 		>
 			<!-- Same primitive as the password visibility toggle: the action button stretches to the
 			     field's full height/padding, so the click target is much larger than the swatch itself. -->

package/dist/components/Form/ColorInput/colorInput.mcp.d.ts

@@ -1 +1 @@
-export declare const colorInputDescription = "\n# ColorInput Component\n\nThe ColorInput is a form field for picking a color. It shows a color swatch and a text input inside\nthe shared Field frame, and opens a full ColorPicker panel in a Popover. Its value is a canonical hex\nstring (`#rrggbb`, or `#rrggbbaa` when alpha < 1).\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { ColorInput } from 'entasis/color-input';\n\tlet color = $state('#6366f1');\n</script>\n\n<ColorInput label=\"Brand color\" bind:value={color} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: `string | null` (bindable) - The selected color. The canonical value is always hex:\n  `#rrggbb`, or `#rrggbbaa` when alpha < 1. Any parseable CSS color (named colors, `rgb()`,\n  `rgba()`, `hsl()`, `hsla()`, `#rgb`, `#rrggbb`, `#rrggbbaa`) is accepted programmatically and\n  normalized to hex on commit. `null` renders the empty/neutral swatch and an empty input.\n- **format**: `'hex' | 'rgb' | 'hsl'` (bindable, default: `'hex'`) - The text representation shown\n  in the input and the picker's format select. The bound `value` stays hex regardless. Bindable so a\n  format change from the picker flows back out.\n\n### Display Props\n- **placeholder**: `string` - Hint text shown in the empty color input. Defaults to the selected\n  format's pattern: `#rrggbb`, `rgb(r, g, b)` or `hsl(h, s%, l%)`.\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **required**: boolean - Mark as required (a required color must be a non-empty string)\n- **disabled**: boolean - Disable input, swatch and picker\n- **size**: 'small' | 'normal' | 'large' - Field size, forwarded to the embedded ColorPicker\n\n### Event Props\n- **onValueChange**: `(value: string) => void` - Fires on every committed change, including continuously\n  while dragging in the picker. Receives the canonical hex string.\n- **onValidate**: `(value: string) => string[] | boolean` - Custom validation.\n\n### Styling Props\n- **class**: string - Additional CSS classes on the field root\n- **theme**: ColorInputTheme - Theme overrides (also accepts Field theme parts)\n- **i18n**: Partial<Messages> - Per-instance i18n overrides, also forwarded to the ColorPicker\n\n## Structure\n\n```\n<Popover>\n\t<Field>\n\t\t<Swatch />   <!-- opens the picker -->\n\t\t<Input />    <!-- shows the value in the chosen format -->\n\t</Field>\n\t<ColorPicker />  <!-- inside the popover panel -->\n</Popover>\n```\n\n## Examples\n\n### With alpha\n```svelte\n<ColorInput label=\"Overlay\" value=\"#00000080\" />\n```\n\n### RGB text representation\n```svelte\n<ColorInput label=\"Accent\" bind:value={accent} format=\"rgb\" />\n```\n\n### Required inside a Form\n```svelte\n<Form\n\tinputs={{\n\t\tcolor: { type: 'color', label: 'Theme color', required: true }\n\t}}\n/>\n```\n\n### Disabled\n```svelte\n<ColorInput label=\"Locked\" value=\"#22c55e\" disabled />\n```\n\n## Interaction\n\n- The swatch button toggles the picker popover; focusing the text input also opens it (like DateInput).\n- The text input is masked (Maskito) for the selected format: hex auto-inserts the leading `#` and\n  takes up to 8 hex digits; rgb/hsl are structured templates that auto-insert the `rgb(` / `hsl(`\n  prefix, the `, ` separators and hsl's `%` suffixes as digits flow in (3 digits per channel, or\n  `,` to end a channel early \u2014 a missing closing `)` is completed on commit). Valid entries commit\n  immediately (normalized to hex); an incomplete entry does not commit and the input text is restored\n  from the canonical value on blur. Clearing the input sets the value to `null`.\n- Dragging inside the picker updates the value live. The popover does not close on pick (color picking\n  is continuous); it closes on click-outside or Escape.\n- Changing the format select in the picker updates the input's text representation while keeping the\n  bound value as hex.\n\n## Accessibility\n\n- The swatch sits inside a field action button (the same primitive as the password visibility\n  toggle), which stretches to the field's full height for a generous hit target and carries\n  `aria-haspopup=\"dialog\"`, `aria-expanded`, `aria-controls`, and a localized \"Choose Color\" label.\n- The text input carries a localized \"Color value\" label and is associated with the field label.\n- The embedded ColorPicker exposes its saturation/brightness square and hue/alpha sliders as focusable\n  `role=\"slider\"` controls with full keyboard support (see the ColorPicker docs).\n\n## Theme Customization\n\nThe theme object contains the following parts:\n- **input**: The color text input element (size, disabled variants)\n- **inputContainer**: The bordered field container (size, disabled variants)\n- **popover**: The popover panel wrapping the ColorPicker\n- **swatch**: The color swatch inside the leading action button (empty variant)\n\nField theme parts (label, description, error, ...) are also accepted on the same `theme` prop.\n\n```svelte\n<ColorInput\n\tlabel=\"Brand color\"\n\tbind:value={color}\n\ttheme={{\n\t\tswatch: { base: 'rounded-full', empty: { true: 'bg-neutral-muted/50' } },\n\t\tinputContainer: { base: 'border-2' }\n\t}}\n/>\n```\n\n## Notes\n\n- The canonical `value` is always hex; use `format` only to change the input's text representation.\n- The swatch renders the color over a CSS checkerboard so colors with alpha < 1 read correctly, and\n  shows a neutral muted square when the value is `null`.\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 colorInputDescription = "\n# ColorInput Component\n\nThe ColorInput is a form field for picking a color. It shows a color swatch and a text input inside\nthe shared Field frame, and opens a full ColorPicker panel in a Popover. Its value is a canonical hex\nstring (`#rrggbb`, or `#rrggbbaa` when alpha < 1).\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { ColorInput } from 'entasis/color-input';\n\tlet color = $state('#6366f1');\n</script>\n\n<ColorInput label=\"Brand color\" bind:value={color} />\n```\n\n## Props\n\nExtends all Field component props plus:\n\n### Core Props\n- **value**: `string | null` (bindable) - The selected color. The canonical value is always hex:\n  `#rrggbb`, or `#rrggbbaa` when alpha < 1. Any parseable CSS color (named colors, `rgb()`,\n  `rgba()`, `hsl()`, `hsla()`, `#rgb`, `#rrggbb`, `#rrggbbaa`) is accepted programmatically and\n  normalized to hex on commit. `null` renders the empty/neutral swatch and an empty input.\n- **format**: `'hex' | 'rgb' | 'hsl'` (bindable, default: `'hex'`) - The text representation shown\n  in the input and the picker's format select. The bound `value` stays hex regardless. Bindable so a\n  format change from the picker flows back out.\n\n### Display Props\n- **placeholder**: `string` - Hint text shown in the empty color input. Defaults to the selected\n  format's pattern: `#rrggbb`, `rgb(r, g, b)` or `hsl(h, s%, l%)`.\n\n### Field Props (inherited)\n- **label**: string | Snippet - Field label\n- **description**: string | Snippet - Helper text\n- **required**: boolean - Mark as required (a required color must be a non-empty string)\n- **disabled**: boolean - Disable input, swatch and picker\n- **readOnly**: boolean - The input stays focusable and announced as read-only and the color cannot be changed (typing or picking); the value still validates and submits\n- **size**: 'small' | 'normal' | 'large' - Field size, forwarded to the embedded ColorPicker\n\n### Event Props\n- **onValueChange**: `(value: string) => void` - Fires on every committed change, including continuously\n  while dragging in the picker. Receives the canonical hex string.\n- **onValidate**: `(value: string) => string[] | boolean` - Custom validation.\n\n### Styling Props\n- **class**: string - Additional CSS classes on the field root\n- **theme**: ColorInputTheme - Theme overrides (also accepts Field theme parts)\n- **i18n**: Partial<Messages> - Per-instance i18n overrides, also forwarded to the ColorPicker\n\n## Structure\n\n```\n<Popover>\n\t<Field>\n\t\t<Swatch />   <!-- opens the picker -->\n\t\t<Input />    <!-- shows the value in the chosen format -->\n\t</Field>\n\t<ColorPicker />  <!-- inside the popover panel -->\n</Popover>\n```\n\n## Examples\n\n### With alpha\n```svelte\n<ColorInput label=\"Overlay\" value=\"#00000080\" />\n```\n\n### RGB text representation\n```svelte\n<ColorInput label=\"Accent\" bind:value={accent} format=\"rgb\" />\n```\n\n### Required inside a Form\n```svelte\n<Form\n\tinputs={{\n\t\tcolor: { type: 'color', label: 'Theme color', required: true }\n\t}}\n/>\n```\n\n### Disabled\n```svelte\n<ColorInput label=\"Locked\" value=\"#22c55e\" disabled />\n```\n\n## Interaction\n\n- The swatch button toggles the picker popover; focusing the text input also opens it (like DateInput).\n- The text input is masked (Maskito) for the selected format: hex auto-inserts the leading `#` and\n  takes up to 8 hex digits; rgb/hsl are structured templates that auto-insert the `rgb(` / `hsl(`\n  prefix, the `, ` separators and hsl's `%` suffixes as digits flow in (3 digits per channel, or\n  `,` to end a channel early \u2014 a missing closing `)` is completed on commit). Valid entries commit\n  immediately (normalized to hex); an incomplete entry does not commit and the input text is restored\n  from the canonical value on blur. Clearing the input sets the value to `null`.\n- Dragging inside the picker updates the value live. The popover does not close on pick (color picking\n  is continuous); it closes on click-outside or Escape.\n- Changing the format select in the picker updates the input's text representation while keeping the\n  bound value as hex.\n\n## Accessibility\n\n- The swatch sits inside a field action button (the same primitive as the password visibility\n  toggle), which stretches to the field's full height for a generous hit target and carries\n  `aria-haspopup=\"dialog\"`, `aria-expanded`, `aria-controls`, and a localized \"Choose Color\" label.\n- The text input carries a localized \"Color value\" label and is associated with the field label.\n- The embedded ColorPicker exposes its saturation/brightness square and hue/alpha sliders as focusable\n  `role=\"slider\"` controls with full keyboard support (see the ColorPicker docs).\n\n## Theme Customization\n\nThe theme object contains the following parts:\n- **input**: The color text input element (size, disabled variants)\n- **inputContainer**: The bordered field container (size, disabled variants)\n- **popover**: The popover panel wrapping the ColorPicker\n- **swatch**: The color swatch inside the leading action button (empty variant)\n\nField theme parts (label, description, error, ...) are also accepted on the same `theme` prop.\n\n```svelte\n<ColorInput\n\tlabel=\"Brand color\"\n\tbind:value={color}\n\ttheme={{\n\t\tswatch: { base: 'rounded-full', empty: { true: 'bg-neutral-muted/50' } },\n\t\tinputContainer: { base: 'border-2' }\n\t}}\n/>\n```\n\n## Notes\n\n- The canonical `value` is always hex; use `format` only to change the input's text representation.\n- The swatch renders the color over a CSS checkerboard so colors with alpha < 1 read correctly, and\n  shows a neutral muted square when the value is `null`.\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/ColorInput/colorInput.mcp.js

@@ -38,6 +38,7 @@ Extends all Field component props plus:
 - **description**: string | Snippet - Helper text
 - **required**: boolean - Mark as required (a required color must be a non-empty string)
 - **disabled**: boolean - Disable input, swatch and picker
+- **readOnly**: boolean - The input stays focusable and announced as read-only and the color cannot be changed (typing or picking); the value still validates and submits
 - **size**: 'small' | 'normal' | 'large' - Field size, forwarded to the embedded ColorPicker
 
 ### Event Props

package/dist/components/Form/ColorPicker/ColorPicker.svelte

@@ -14,6 +14,7 @@
 		format = $bindable('hex'),
 		size = 'normal',
 		disabled = false,
+		readOnly = false,
 		onValueChange,
 		class: className,
 		theme,
@@ -44,6 +45,9 @@
 		get disabled() {
 			return disabled;
 		},
+		get readOnly() {
+			return readOnly;
+		},
 		onValueChange: (v) => onValueChange?.(v)
 	});
 
@@ -62,7 +66,7 @@
 	});
 
 	const openEyeDropper = async () => {
-		if (!eyeDropperSupported || disabled) return;
+		if (!eyeDropperSupported || disabled || readOnly) return;
 		try {
 			const EyeDropperCtor = (
 				window as unknown as {
@@ -134,6 +138,7 @@
 				picker.v * 100
 			)}% ${t.brightness}`}
 			aria-disabled={disabled || undefined}
+			aria-readonly={readOnly || undefined}
 			onkeydown={picker.onAreaKeydown}
 		></div>
 	</div>
@@ -143,7 +148,7 @@
 		<button
 			type="button"
 			class={classes.eyedropperButton({ size })}
-			disabled={disabled || !eyeDropperSupported}
+			disabled={disabled || readOnly || !eyeDropperSupported}
 			aria-label={t.pickColorFromScreen}
 			onclick={openEyeDropper}
 		>
@@ -162,6 +167,7 @@
 					aria-valuemax={360}
 					aria-valuenow={Math.round(picker.h)}
 					aria-disabled={disabled || undefined}
+					aria-readonly={readOnly || undefined}
 					onkeydown={picker.onHueKeydown}
 				></div>
 			</div>
@@ -181,6 +187,7 @@
 					aria-valuemax={100}
 					aria-valuenow={picker.alphaPercent}
 					aria-disabled={disabled || undefined}
+					aria-readonly={readOnly || undefined}
 					onkeydown={picker.onAlphaKeydown}
 				></div>
 			</div>
@@ -205,6 +212,7 @@
 			class={classes.input({ size })}
 			value={textValue}
 			{disabled}
+			readonly={readOnly}
 			spellcheck="false"
 			autocomplete="off"
 			autocapitalize="off"
@@ -226,6 +234,7 @@
 				class={classes.alphaInput({ size })}
 				value={picker.alphaPercent}
 				{disabled}
+				readonly={readOnly}
 				aria-label={`${t.alpha} ${t.percentage}`}
 				{@attach alphaMask}
 				onchange={onAlphaChange}

package/dist/components/Form/ColorPicker/ColorPickerInput.svelte

@@ -12,6 +12,8 @@
 		focused = $bindable(false),
 		required = false,
 		disabled,
+		readOnly,
+		messages,
 		name,
 		onValidate,
 		onValueChange,
@@ -55,6 +57,12 @@
 		set disabled(v: boolean | undefined) {
 			disabled = v;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get required() {
 			return required;
 		},
@@ -97,6 +105,7 @@
 			{size}
 			{i18n}
 			disabled={field.disabled}
+			readOnly={field.readOnly}
 			theme={theme?.picker}
 		/>
 	</div>

package/dist/components/Form/ColorPicker/colorPicker.mcp.d.ts

@@ -1 +1 @@
-export declare const colorPickerDescription = "\n# ColorPicker Component\n\nA standalone color picker panel (a faithful clone of the kibo-ui color picker). It is a\nself-contained rounded panel \u2014 a saturation/value square, a hue slider, an alpha slider, an\neyedropper button, and a format select with a color text input and an alpha percentage input.\n`ColorPicker` is the raw panel primitive; `ColorPickerInput` wraps it in the standard field\nchrome (label, description, errors, form registration) and extends InputProps with type 'color'.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { ColorPicker, ColorPickerInput } from 'entasis/color-picker';\n\tlet color = $state('#6366f1');\n</script>\n\n<!-- Field variant: label/description/errors like every other form input -->\n<ColorPickerInput\n\tlabel=\"Brand color\"\n\tdescription=\"Used for buttons and links across the app\"\n\tbind:value={color}\n/>\n\n<!-- Raw panel primitive -->\n<ColorPicker bind:value={color} />\n<ColorPicker bind:value={color} format=\"rgb\" size=\"large\" />\n<ColorPicker value=\"#22c55e80\" onValueChange={(hex) => console.log(hex)} />\n<ColorPicker value=\"#000000\" disabled />\n```\n\n## ColorPickerInput (field variant)\n\nAccepts every field prop from InputProps ('color') \u2014 `label`, `description`, `name`, `required`,\n`errors`, `onValidate`, `helper`, snippets, \u2026 \u2014 plus the panel props `format` and `i18n`.\n`theme` is split: `theme.picker` for the panel parts, `theme.field` for the field wrapper.\n`bind:value` is the canonical hex string (nullable).\n\n## Props\n\n### Core Props\n- **value**: `string` (bindable, default: `'#000000'`)\n  - The selected color. The canonical output is always hex: `#rrggbb`, or `#rrggbbaa` when alpha < 1.\n  - Any parseable CSS color is accepted programmatically (named colors, `rgb()`, `rgba()`, `hsl()`, `hsla()`, `#rgb`, `#rrggbb`, `#rrggbbaa`).\n  - Hue and saturation are preserved internally, so dragging a color to black/white or typing a gray never loses the chosen hue.\n- **format**: `'hex' | 'rgb' | 'hsl'` (bindable, default: `'hex'`)\n  - Controls the text representation shown in the input. The bound `value` stays hex regardless of this.\n\n### Style Props\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`)\n  - Scales the panel width, slider heights, thumb sizes and text sizes.\n- **disabled**: `boolean` (default: `false`) - Disables every control and dims the panel.\n\n### Event Props\n- **onValueChange**: `(value: string) => void`\n  - Fires on every committed change, including continuously while dragging. Receives the canonical hex string.\n\n### Advanced Props\n- **class**: `string` - Extra classes merged onto the root panel.\n- **theme**: `ColorPickerThemeProps` - Theme overrides for the panel parts.\n- **i18n**: `Partial<Messages>` - Per-instance i18n overrides merged over the global catalog.\n\n## Structure\n\nA rounded `root` panel containing, top to bottom:\n1. The `area` \u2014 a saturation/value square with a solid hue backdrop and two gradient overlays\n   (`areaSaturation` white\u2192transparent left-to-right, `areaValue` transparent\u2192black top-to-bottom),\n   plus a draggable circular `areaThumb`.\n2. A `controls` row \u2014 a square `eyedropperButton` and a `sliders` column with a rainbow\n   `hueTrack` (0\u2013360) and a checkerboard `alphaTrack` (the `alphaGradient` overlays a pure-CSS\n   checkerboard), each with a white `sliderThumb`.\n3. An `inputs` row \u2014 a native `select` (hex/rgb/hsl), the color `input`, and an\n   `alphaField` wrapping the `alphaInput` (0\u2013100) and its `alphaSuffix` (`%`). The text\n   input always shows the solid color (no alpha suffix); alpha lives in the % input and the\n   alpha slider, so the row is identical in every format.\n\n## Interaction\n\n- The square and both sliders support click-to-jump and continuous pointer drag.\n- The color text input is masked (Maskito) for the selected format: hex auto-inserts the leading `#`\n  and takes up to 8 hex digits; rgb/hsl are structured templates auto-inserting the `rgb(`/`hsl(`\n  prefix, `, ` separators and hsl's `%` suffixes as digits flow in (`,` ends a channel early; a\n  missing `)` is completed on commit). Entries commit on Enter or blur; an incomplete entry reverts.\n  The text always shows the solid form; a typed/eyedropped color without an explicit alpha keeps the\n  current alpha (pasting `rgba()`/8-digit hex still applies the pasted alpha).\n- The alpha input is masked to 0\u2013100 and commits on change; the format select only changes the text representation.\n- The eyedropper uses the native `window.EyeDropper` API and is disabled where unsupported (SSR-safe).\n\n## Accessibility\n\n- The area thumb and both slider thumbs are focusable `role=\"slider\"` elements with\n  `aria-valuemin`/`aria-valuemax`/`aria-valuenow` and localized `aria-label`s.\n- Keyboard: on the square, Left/Right adjust saturation and Up/Down adjust value; on the sliders,\n  arrow keys step (Shift for a larger step) and Home/End jump to min/max.\n- The eyedropper, color input, format select and alpha input all carry localized aria-labels.\n\n## Notes\n- Canonical `value` is hex; use `format` only to change the input's text representation.\n- Theme parts: `root`, `area`, `areaSaturation`, `areaValue`, `areaThumb`, `controls`,\n  `eyedropperButton`, `sliders`, `hueTrack`, `alphaTrack`, `alphaGradient`, `sliderThumb`,\n  `inputs`, `select`, `input`, `alphaField`, `alphaInput`, `alphaSuffix` (each with a `size` variant).\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 colorPickerDescription = "\n# ColorPicker Component\n\nA standalone color picker panel (a faithful clone of the kibo-ui color picker). It is a\nself-contained rounded panel \u2014 a saturation/value square, a hue slider, an alpha slider, an\neyedropper button, and a format select with a color text input and an alpha percentage input.\n`ColorPicker` is the raw panel primitive; `ColorPickerInput` wraps it in the standard field\nchrome (label, description, errors, form registration) and extends InputProps with type 'color'.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { ColorPicker, ColorPickerInput } from 'entasis/color-picker';\n\tlet color = $state('#6366f1');\n</script>\n\n<!-- Field variant: label/description/errors like every other form input -->\n<ColorPickerInput\n\tlabel=\"Brand color\"\n\tdescription=\"Used for buttons and links across the app\"\n\tbind:value={color}\n/>\n\n<!-- Raw panel primitive -->\n<ColorPicker bind:value={color} />\n<ColorPicker bind:value={color} format=\"rgb\" size=\"large\" />\n<ColorPicker value=\"#22c55e80\" onValueChange={(hex) => console.log(hex)} />\n<ColorPicker value=\"#000000\" disabled />\n```\n\n## ColorPickerInput (field variant)\n\nAccepts every field prop from InputProps ('color') \u2014 `label`, `description`, `name`, `required`,\n`errors`, `onValidate`, `helper`, snippets, \u2026 \u2014 plus the panel props `format` and `i18n`.\n`theme` is split: `theme.picker` for the panel parts, `theme.field` for the field wrapper.\n`bind:value` is the canonical hex string (nullable).\n\n## Props\n\n### Core Props\n- **value**: `string` (bindable, default: `'#000000'`)\n  - The selected color. The canonical output is always hex: `#rrggbb`, or `#rrggbbaa` when alpha < 1.\n  - Any parseable CSS color is accepted programmatically (named colors, `rgb()`, `rgba()`, `hsl()`, `hsla()`, `#rgb`, `#rrggbb`, `#rrggbbaa`).\n  - Hue and saturation are preserved internally, so dragging a color to black/white or typing a gray never loses the chosen hue.\n- **format**: `'hex' | 'rgb' | 'hsl'` (bindable, default: `'hex'`)\n  - Controls the text representation shown in the input. The bound `value` stays hex regardless of this.\n\n### Style Props\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`)\n  - Scales the panel width, slider heights, thumb sizes and text sizes.\n- **disabled**: `boolean` (default: `false`) - Disables every control and dims the panel.\n- **readOnly**: `boolean` (default: `false`) - Keeps the controls focusable but refuses drags, keys, typed text and the eyedropper.\n\n### Event Props\n- **onValueChange**: `(value: string) => void`\n  - Fires on every committed change, including continuously while dragging. Receives the canonical hex string.\n\n### Advanced Props\n- **class**: `string` - Extra classes merged onto the root panel.\n- **theme**: `ColorPickerThemeProps` - Theme overrides for the panel parts.\n- **i18n**: `Partial<Messages>` - Per-instance i18n overrides merged over the global catalog.\n\n## Structure\n\nA rounded `root` panel containing, top to bottom:\n1. The `area` \u2014 a saturation/value square with a solid hue backdrop and two gradient overlays\n   (`areaSaturation` white\u2192transparent left-to-right, `areaValue` transparent\u2192black top-to-bottom),\n   plus a draggable circular `areaThumb`.\n2. A `controls` row \u2014 a square `eyedropperButton` and a `sliders` column with a rainbow\n   `hueTrack` (0\u2013360) and a checkerboard `alphaTrack` (the `alphaGradient` overlays a pure-CSS\n   checkerboard), each with a white `sliderThumb`.\n3. An `inputs` row \u2014 a native `select` (hex/rgb/hsl), the color `input`, and an\n   `alphaField` wrapping the `alphaInput` (0\u2013100) and its `alphaSuffix` (`%`). The text\n   input always shows the solid color (no alpha suffix); alpha lives in the % input and the\n   alpha slider, so the row is identical in every format.\n\n## Interaction\n\n- The square and both sliders support click-to-jump and continuous pointer drag.\n- The color text input is masked (Maskito) for the selected format: hex auto-inserts the leading `#`\n  and takes up to 8 hex digits; rgb/hsl are structured templates auto-inserting the `rgb(`/`hsl(`\n  prefix, `, ` separators and hsl's `%` suffixes as digits flow in (`,` ends a channel early; a\n  missing `)` is completed on commit). Entries commit on Enter or blur; an incomplete entry reverts.\n  The text always shows the solid form; a typed/eyedropped color without an explicit alpha keeps the\n  current alpha (pasting `rgba()`/8-digit hex still applies the pasted alpha).\n- The alpha input is masked to 0\u2013100 and commits on change; the format select only changes the text representation.\n- The eyedropper uses the native `window.EyeDropper` API and is disabled where unsupported (SSR-safe).\n\n## Accessibility\n\n- The area thumb and both slider thumbs are focusable `role=\"slider\"` elements with\n  `aria-valuemin`/`aria-valuemax`/`aria-valuenow` and localized `aria-label`s.\n- Keyboard: on the square, Left/Right adjust saturation and Up/Down adjust value; on the sliders,\n  arrow keys step (Shift for a larger step) and Home/End jump to min/max.\n- The eyedropper, color input, format select and alpha input all carry localized aria-labels.\n\n## Notes\n- Canonical `value` is hex; use `format` only to change the input's text representation.\n- Theme parts: `root`, `area`, `areaSaturation`, `areaValue`, `areaThumb`, `controls`,\n  `eyedropperButton`, `sliders`, `hueTrack`, `alphaTrack`, `alphaGradient`, `sliderThumb`,\n  `inputs`, `select`, `input`, `alphaField`, `alphaInput`, `alphaSuffix` (each with a `size` variant).\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/ColorPicker/colorPicker.mcp.js

@@ -50,6 +50,7 @@ Accepts every field prop from InputProps ('color') — \`label\`, \`description\
 - **size**: \`'small' | 'normal' | 'large'\` (default: \`'normal'\`)
   - Scales the panel width, slider heights, thumb sizes and text sizes.
 - **disabled**: \`boolean\` (default: \`false\`) - Disables every control and dims the panel.
+- **readOnly**: \`boolean\` (default: \`false\`) - Keeps the controls focusable but refuses drags, keys, typed text and the eyedropper.
 
 ### Event Props
 - **onValueChange**: \`(value: string) => void\`

package/dist/components/Form/ColorPicker/colorPicker.props.d.ts

@@ -18,6 +18,8 @@ export type ColorPickerProps = WithAttachments<{
     size?: Sizes;
     /** Disables every control and dims the panel. */
     disabled?: boolean;
+    /** Refuses edits (drag, keys, typed text, eyedropper) while the controls stay focusable. */
+    readOnly?: boolean;
     /** Fires on every committed change, including continuously while dragging. Receives the canonical hex. */
     onValueChange?: (value: string) => void;
     /** Extra classes merged onto the root panel. */

package/dist/components/Form/ColorPicker/colorPicker.state.svelte.d.ts

@@ -10,6 +10,7 @@ type ColorPickerStateOptions = {
     value?: string;
     format?: ColorFormat;
     disabled?: boolean;
+    readOnly?: boolean;
     onValueChange?: (value: string) => void;
 };
 declare const ColorPickerState_base: new (props: ColorPickerStateOptions) => {} & ColorPickerStateOptions;
@@ -17,11 +18,14 @@ export declare class ColorPickerState extends ColorPickerState_base {
     value?: string;
     format?: ColorFormat;
     disabled?: boolean;
+    readOnly?: boolean;
     onValueChange?: (value: string) => void;
     h: number;
     s: number;
     v: number;
     a: number;
+    /** Disabled or read-only: no edit reaches the color. */
+    private get locked();
     private mounted;
     private lastEmitted;
     private areaDrag;

package/dist/components/Form/ColorPicker/colorPicker.state.svelte.js

@@ -62,21 +62,25 @@ export class ColorPickerState extends createBindableStateClass() {
     s = $state(1);
     v = $state(1);
     a = $state(1);
+    /** Disabled or read-only: no edit reaches the color. */
+    get locked() {
+        return !!this.disabled || !!this.readOnly;
+    }
     mounted = false;
     // The last hex this component emitted; external writes equal to it are skipped to avoid re-parsing.
     lastEmitted = undefined;
     areaDrag = createPointerDrag({
-        disabled: () => !!this.disabled,
+        disabled: () => this.locked,
         onStart: (payload) => this.setSaturationValueFromPointer(payload),
         onMove: (payload) => this.setSaturationValueFromPointer(payload)
     });
     hueDrag = createPointerDrag({
-        disabled: () => !!this.disabled,
+        disabled: () => this.locked,
         onStart: (payload) => this.setHueFromPointer(payload),
         onMove: (payload) => this.setHueFromPointer(payload)
     });
     alphaDrag = createPointerDrag({
-        disabled: () => !!this.disabled,
+        disabled: () => this.locked,
         onStart: (payload) => this.setAlphaFromPointer(payload),
         onMove: (payload) => this.setAlphaFromPointer(payload)
     });
@@ -207,7 +211,7 @@ export class ColorPickerState extends createBindableStateClass() {
     // reverts). Alpha-less input (the text input's solid form, the eyedropper's opaque hex) keeps
     // the current alpha — alpha is owned by the % input and the alpha slider.
     commitText = (input) => {
-        if (this.disabled)
+        if (this.locked)
             return false;
         const parsed = this.parse(input);
         if (!parsed)
@@ -217,13 +221,13 @@ export class ColorPickerState extends createBindableStateClass() {
         return true;
     };
     setAlphaPercent = (percent) => {
-        if (this.disabled)
+        if (this.locked)
             return;
         this.a = clamp01(percent / 100);
         this.emit();
     };
     onAreaKeydown = (event) => {
-        if (this.disabled)
+        if (this.locked)
             return;
         const step = event.shiftKey ? 0.1 : 0.01;
         let handled = true;
@@ -255,7 +259,7 @@ export class ColorPickerState extends createBindableStateClass() {
         }
     };
     onHueKeydown = (event) => {
-        if (this.disabled)
+        if (this.locked)
             return;
         const step = event.shiftKey ? 10 : 1;
         let next = this.h;
@@ -285,7 +289,7 @@ export class ColorPickerState extends createBindableStateClass() {
         }
     };
     onAlphaKeydown = (event) => {
-        if (this.disabled)
+        if (this.locked)
             return;
         const step = event.shiftKey ? 0.1 : 0.01;
         let next = this.a;