@nldd/design-system 0.8.80 → 0.8.83

package/custom-elements.json

@@ -281,6 +281,17 @@
               "attribute": "max-width",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "noTab",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Take the button out of the tab order (`tabindex=\"-1\"`) — for a control owned\nby a roving container (an `nldd-list` sets it on the rows that are not the\ncurrent one) that manages focus itself. Still mouse- and script-focusable.",
+              "attribute": "no-tab",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "expandable",
@@ -552,6 +563,15 @@
               "description": "Caps the width at this CSS length (e.g. '320px'). Combines with `width=\"full\"`: the button follows its container up to the cap. A label that doesn't fit is truncated with an ellipsis — a cap only means something if the content respects it.",
               "fieldName": "maxWidth"
             },
+            {
+              "name": "no-tab",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Takes the button out of the tab order (tabindex=\"-1\"), for a control owned by a roving container (e.g. a button in a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable.",
+              "fieldName": "noTab"
+            },
             {
               "name": "expandable",
               "type": {
@@ -1139,7 +1159,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Takes the button out of the tab order (tabindex=\"-1\"), for a control owned by a roving container (e.g. an nldd-token in nldd-token-field) that manages focus itself. Still mouse- and script-focusable.",
+              "description": "Takes the button out of the tab order (tabindex=\"-1\"), for a control owned by a roving container (an nldd-token in nldd-token-field, a button in a row of an nldd-list) that manages focus itself. Still mouse- and script-focusable.",
               "fieldName": "noTab"
             },
             {
@@ -1519,10 +1539,10 @@
               "kind": "field",
               "name": "menuVariant",
               "type": {
-                "text": "'menu' | 'listbox'"
+                "text": "'menu' | 'listbox' | null"
               },
-              "default": "'menu'",
-              "description": "Set by nldd-menu. Not part of the public API."
+              "default": "null",
+              "description": "Which menu owns this item, set by that nldd-menu. Not part of the public API.\n\n`null` until one claims it, and an unclaimed item carries no menu role.\nA menu role is a promise about what is around you, so an item cannot make\nit on its own. `nldd-toolbar-item` holds exactly such an item: the\ndeclaration of what belongs in the overflow menu, which the toolbar clones\ninto the real menu when it collapses. The clone is claimed there and the\ndeclaration stays what it is."
             },
             {
               "kind": "method",
@@ -3549,7 +3569,7 @@
         },
         {
           "kind": "class",
-          "description": "A customizable icon component that renders SVG icons from a predefined library. Icons are decorative by default: the host gets `aria-hidden=\"true\"` automatically. If you want the icon to be announced by assistive tech, set `aria-hidden=\"false\"` on the consumer side together with an `aria-label`. Sizing: the icon fills whatever sizes it — an `nldd-icon-cell`, a button, a menu item. `size=\"full\"` names that default explicitly. `size=\"inherit\"` makes it follow the surrounding text (1em), for an icon set inline in a sentence. Any spacer-aligned number (16–96) pins a fixed dimension. Reach for `inherit` rather than a global `nldd-icon { width: 1em }` rule in the consumer: such a rule wins over the component's own :host styling and so also shrinks the icons that a cell or button was already sizing correctly. Color: by default the icon inherits its parent's `color`. Set `color` to one of the functional semantics (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or a rijkskleur (`lintblauw`, `paars`, `groen`, …). For arbitrary one-off colors, set `style=\"color: …\"` on the host — the inherited `color` still drives the SVG fill/stroke.",
+          "description": "A customizable icon component that renders SVG icons from a predefined library. Icons are decorative by default: the host gets `aria-hidden=\"true\"` automatically. If you want the icon to be announced by assistive tech, set `aria-hidden=\"false\"` on the consumer side together with an `aria-label`. Sizing: the icon fills whatever sizes it — an `nldd-icon-cell`, a button, a menu item. `size=\"full\"` names that default explicitly. `size=\"inherit\"` makes it follow the surrounding text (1em), for an icon set inline in a sentence. Any spacer-aligned number (16–96) pins a fixed dimension. Reach for `inherit` rather than a global `nldd-icon { width: 1em }` rule in the consumer: such a rule wins over the component's own :host styling and so also shrinks the icons that a cell or button was already sizing correctly. Color: by default the icon inherits its parent's `color`. Set `color` to one of the functional semantics (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or a rijkskleur (`lintblauw`, `paars`, `groen`, …). For a color the design system cannot know — the jacket of a cable, a color someone picked — set `custom-color` to any CSS color.",
           "name": "NLDDIcon",
           "members": [
             {
@@ -3580,6 +3600,17 @@
               "default": "''",
               "attribute": "color",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "customColor",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Handed to the styles as a custom property rather than read from the\nattribute in CSS: `attr()` with a type is not available everywhere yet,\nand this keeps one code path.",
+              "attribute": "custom-color",
+              "reflects": true
             }
           ],
           "attributes": [
@@ -3609,6 +3640,15 @@
               "name": "color",
               "default": "''",
               "fieldName": "color"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know. It wins over `color`.",
+              "name": "custom-color",
+              "default": "''",
+              "fieldName": "customColor"
             }
           ],
           "superclass": {
@@ -4785,6 +4825,146 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/content/text/text.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "One run of body text at a size from the type scale. It is what you reach for where an app would otherwise write a bare `<p>` and inherit whatever the page happens to set: a line under a title, a sentence in a panel, a caption. Every combination it offers exists as a token, so it cannot invent typography — it only names what the scale already has. The three axes are the same three the tokens carry: size, weight and line height. Not for headings, which is `nldd-title`, and not for a block of prose with its own rhythm, spacing and media widths, which is `nldd-rich-text`. This is one run of text and nothing around it. Color follows the context channel a list item, menu or table sets on its content, so text inside a row travels with that row as it is hovered or selected. Standalone that channel is unset and the semantic color answers.",
+          "name": "NLDDText",
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "default": "'md'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "weight",
+              "type": {
+                "text": "Weight"
+              },
+              "default": "'regular'",
+              "attribute": "weight",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "lineHeight",
+              "type": {
+                "text": "LineHeight"
+              },
+              "default": "'snug'",
+              "attribute": "line-height",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "Color"
+              },
+              "default": "'default'",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "horizontalAlignment",
+              "type": {
+                "text": "HorizontalAlignment"
+              },
+              "default": "'left'",
+              "attribute": "horizontal-alignment",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "default": "'md'",
+              "fieldName": "size",
+              "description": "Text size on the body scale: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' (default: 'md')"
+            },
+            {
+              "name": "weight",
+              "type": {
+                "text": "Weight"
+              },
+              "default": "'regular'",
+              "fieldName": "weight",
+              "description": "Font weight: 'regular' | 'medium' | 'bold' (default: 'regular'). With 'bold' a slotted `<strong>` no longer stands out: there is nothing bolder in the scale."
+            },
+            {
+              "name": "line-height",
+              "type": {
+                "text": "LineHeight"
+              },
+              "default": "'snug'",
+              "fieldName": "lineHeight",
+              "description": "Line height: 'flat' | 'tight' | 'snug' | 'loose' (default: 'snug')"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "Color"
+              },
+              "default": "'default'",
+              "fieldName": "color",
+              "description": "Text color: 'default' | 'secondary' | 'accent' | 'success' | 'warning' | 'critical' | 'inherit' (default: 'default'). 'default' and 'secondary' follow the surrounding content channel; 'inherit' takes the color it inherits, for text on a painted surface."
+            },
+            {
+              "name": "horizontal-alignment",
+              "type": {
+                "text": "HorizontalAlignment"
+              },
+              "default": "'left'",
+              "fieldName": "horizontalAlignment",
+              "description": "Alignment of the text within the block: 'left' | 'center' | 'right' (default: 'left'). Aligns the words; `horizontal-alignment` on nldd-container moves the box."
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "nldd-text",
+          "customElement": true,
+          "slots": [
+            {
+              "name": "",
+              "description": "The text. Inline elements work as they are: `<strong>` and `<b>` take the bold weight from the scale, `<a>`, `<em>` and components such as `nldd-tag` are left alone."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "NLDDText",
+          "declaration": {
+            "name": "NLDDText",
+            "module": "src/components/content/text/text.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nldd-text",
+          "declaration": {
+            "name": "NLDDText",
+            "module": "src/components/content/text/text.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/content/title/title.ts",
@@ -5773,6 +5953,14 @@
             "module": "./content/tag/tag.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "NLDDText",
+          "declaration": {
+            "name": "NLDDText",
+            "module": "./content/text/text.js"
+          }
+        },
         {
           "kind": "js",
           "name": "NLDDTitle",
@@ -6271,10 +6459,10 @@
         },
         {
           "kind": "js",
-          "name": "NLDDListItemAction",
+          "name": "NLDDListItemSegment",
           "declaration": {
-            "name": "NLDDListItemAction",
-            "module": "./lists-and-tables/list-item-action/list-item-action.js"
+            "name": "NLDDListItemSegment",
+            "module": "./lists-and-tables/list-item-segment/list-item-segment.js"
           }
         },
         {
@@ -6568,6 +6756,16 @@
           "description": "A checkbox with an inline label for use in forms. Form-associated: participates in native form submission under `name` with `value` when checked (the inner nldd-checkbox sits in the shadow root and never joins the consumer's form; the field submits on its behalf).",
           "name": "NLDDCheckboxField",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -6667,6 +6865,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Delegates focus to the inner `<nldd-checkbox>`, which in turn focuses its\nnative input. Lets consumers call `checkboxFieldEl.focus()` without\nreaching into shadow DOM."
+            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -6843,6 +7060,16 @@
           "description": "",
           "name": "NLDDCheckbox",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -6961,6 +7188,25 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Delegates focus to the inner native checkbox `<input>`, so consumers can\ncall `checkboxEl.focus()` without reaching into shadow DOM."
+            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -7155,6 +7401,16 @@
               "static": true,
               "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
             },
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "value",
@@ -7583,6 +7839,26 @@
           "description": "A text input with autocomplete dropdown via nldd-menu. Add a slotted nldd-menu with nldd-menu-item children to provide options. The slotted nldd-menu keeps its default focus behavior (menu container receives focus) so that typing keeps focus on the input. The picker button moves focus to the menu explicitly on activation. Note: Only nldd-menu-item type=\"button\" is supported. Radio and checkbox types are not supported in this context.",
           "name": "NLDDComboBox",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
+            {
+              "kind": "field",
+              "name": "blocksImplicitSubmission",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Counts for the implicit-submission rule: a single-line field where Enter\nwould submit the form. See utilities/implicit-submission.ts."
+            },
             {
               "kind": "field",
               "name": "value",
@@ -7652,6 +7928,16 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "allowCustom",
@@ -7937,6 +8223,15 @@
               "fieldName": "disabled",
               "description": "Disabled state"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "readonly",
+              "description": "Read-only state: the value stays readable, selectable and in the tab order, but the menu does not open and there is nothing to clear. The input drops its combobox role and the aria that goes with it, so assistive technology is not told about a list it cannot open. Use this where the value belongs to the record rather than to the form, e.g. the product an asset is an instance of."
+            },
             {
               "name": "allow-custom",
               "type": {
@@ -8067,6 +8362,26 @@
               "static": true,
               "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
             },
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
+            {
+              "kind": "field",
+              "name": "blocksImplicitSubmission",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Counts for the implicit-submission rule: a single-line field where Enter\nwould submit the form. See utilities/implicit-submission.ts."
+            },
             {
               "kind": "field",
               "name": "size",
@@ -8595,6 +8910,16 @@
           "description": "Een kalender waarin een datum of een periode wordt gekozen. Het component is zelfstandig bruikbaar - inline op een pagina, in een filterpaneel - en zit ook in de popover van nldd-date-field. Waarden zijn altijd ISO (jjjj-mm-dd). Met `range` kiest de gebruiker in twee stappen een begin- en einddatum.",
           "name": "NLDDDatePicker",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "value",
@@ -8887,6 +9212,16 @@
           "description": "A visual wrapper around a native `<select>` element. The consumer provides a native `<select>` as a slotted child — this way the browser retains full control over form submission, accessibility and keyboard navigation, including `<optgroup>`, `data-*` attributes and dynamic changes to options.",
           "name": "NLDDDropdown",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "size",
@@ -8947,6 +9282,35 @@
               "description": "Optional fixed width (any CSS length). When unset, the field stretches to fill its container.",
               "attribute": "width",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "accessibleLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible name, forwarded as aria-label to the slotted `<select>`. The\nwrapper is not the control, so a name on the wrapper reaches nobody. Leave\nit empty and name the `<select>` yourself if you prefer.",
+              "attribute": "accessible-label"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Delegates focus to the slotted `<select>`. The wrapper itself is not\nfocusable, so without this a label pointing at the dropdown has nowhere\nto send focus."
             }
           ],
           "attributes": [
@@ -9003,6 +9367,15 @@
               "default": "''",
               "description": "Optional fixed width (any CSS length, e.g. \"240px\"). Default: stretches to fill container.",
               "fieldName": "width"
+            },
+            {
+              "name": "accessible-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible name, forwarded as aria-label to the slotted select",
+              "fieldName": "accessibleLabel"
             }
           ],
           "superclass": {
@@ -9053,6 +9426,16 @@
           "description": "A file picker that reads as one control: an nldd-button flush in the corner of a tinted surface, the chosen file next to it, and a dismiss button to clear it again. It wraps a hidden native `<input type=\"file\">`, which is what makes the picker open at all — a file dialog only opens from a user gesture on a real input. The surface deliberately does not look like an input field. A border with field semantics promises you can type into it; here you can only press a button, so it uses button and surface colors instead of `--semantics-input-fields-*`. The button keeps its own tinted background and therefore sits a shade darker in the surface, which is what marks it as the thing to press. Several files are summarized, not listed: \"3 bestanden\" with a single cross that clears all of them. Every pick replaces the whole FileList, and rebuilding it to add or drop one file means going through DataTransfer, which does not deduplicate (even the same File object twice yields two entries) — and a File has no id, so deduplicating would come down to guessing from name, size and last-modified. A list with a cross per file would promise an edit the platform does not support. A page that does want to show the files renders its own list from the `File[]` in the change event.",
           "name": "NLDDFileField",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "size",
@@ -9459,6 +9842,16 @@
               "static": true,
               "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
             },
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "size",
@@ -9566,6 +9959,26 @@
               "default": "''",
               "attribute": "autocomplete"
             },
+            {
+              "kind": "field",
+              "name": "keyboard",
+              "type": {
+                "text": "Keyboard | undefined"
+              },
+              "description": "Which on-screen keyboard to raise, forwarded as `inputmode`.",
+              "attribute": "keyboard",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "enterKey",
+              "type": {
+                "text": "EnterKey | undefined"
+              },
+              "description": "What the Enter key says, forwarded as `enterkeyhint`.",
+              "attribute": "enter-key",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "rows",
@@ -9847,6 +10260,22 @@
               "fieldName": "autocomplete",
               "description": "Autocomplete hint"
             },
+            {
+              "name": "keyboard",
+              "type": {
+                "text": "Keyboard | undefined"
+              },
+              "description": "Which virtual keyboard a phone or tablet raises, forwarded as `inputmode`: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'. It changes nothing about what the field accepts, and nothing at all on a desktop.",
+              "fieldName": "keyboard"
+            },
+            {
+              "name": "enter-key",
+              "type": {
+                "text": "EnterKey | undefined"
+              },
+              "description": "What the Enter key of the virtual keyboard says, forwarded as `enterkeyhint`: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'. In a field where Enter starts a new line, leave it alone.",
+              "fieldName": "enterKey"
+            },
             {
               "name": "rows",
               "type": {
@@ -9917,6 +10346,22 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "Keyboard",
+          "declaration": {
+            "name": "Keyboard",
+            "module": "../text-field/text-field.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EnterKey",
+          "declaration": {
+            "name": "EnterKey",
+            "module": "../text-field/text-field.js"
+          }
+        },
         {
           "kind": "js",
           "name": "NLDDMultiLineTextField",
@@ -9944,6 +10389,26 @@
           "description": "A numeric input field with decrement and increment buttons.",
           "name": "NLDDNumberField",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
+            {
+              "kind": "field",
+              "name": "blocksImplicitSubmission",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Counts for the implicit-submission rule: a single-line field where Enter\nwould submit the form. See utilities/implicit-submission.ts."
+            },
             {
               "kind": "field",
               "name": "value",
@@ -10338,6 +10803,26 @@
               "static": true,
               "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
             },
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
+            {
+              "kind": "field",
+              "name": "blocksImplicitSubmission",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Counts for the implicit-submission rule: a single-line field where Enter\nwould submit the form. See utilities/implicit-submission.ts."
+            },
             {
               "kind": "field",
               "name": "size",
@@ -10882,6 +11367,16 @@
           "description": "A radio button with an inline label. Use inside nldd-radio-button-group for keyboard navigation and group semantics. The group sets the name. Form-associated: the checked field submits its `value` under `name` (the inner nldd-radio-button sits in the shadow root and never joins the consumer's form; the field submits on its behalf). Unchecking siblings is the group's job, so exactly one value per group reaches the form.",
           "name": "NLDDRadioButtonField",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -10981,6 +11476,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Delegates focus to the inner `<nldd-radio-button>`, which in turn focuses\nits native input. Lets consumers call `radioFieldEl.focus()` without\nreaching into shadow DOM."
+            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -11157,6 +11671,16 @@
           "description": "Groups nldd-radio-button-field elements, handles keyboard navigation, and forwards name and disabled state to all child fields. Use inside nldd-form-field which provides the group label.",
           "name": "NLDDRadioButtonGroup",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "name",
@@ -11186,6 +11710,16 @@
               "attribute": "required",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "accessibleLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible name forwarded as aria-label to the group host.",
+              "attribute": "accessible-label"
+            },
             {
               "kind": "field",
               "name": "accessibleLabeledBy",
@@ -11194,6 +11728,25 @@
               },
               "default": "''",
               "attribute": "accessible-labeled-by"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Delegates focus to the checked option, or to the first enabled one when\nnothing is checked. That is where the keyboard puts focus when tabbing\ninto a radio group, so a label pointing at the group lands in the same\nplace."
             }
           ],
           "attributes": [
@@ -11224,6 +11777,15 @@
               "fieldName": "required",
               "description": "Marks the group as required"
             },
+            {
+              "name": "accessible-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible name for the group, set as aria-label on the group",
+              "fieldName": "accessibleLabel"
+            },
             {
               "name": "accessible-labeled-by",
               "type": {
@@ -11282,6 +11844,16 @@
           "description": "WAI-ARIA: Wrap radio buttons in a <fieldset>/<legend> or a container with role=\"radiogroup\" and aria-labelledby for proper group semantics. <fieldset> <legend>Kies een optie</legend> <nldd-radio-button name=\"options\" value=\"1\">Optie 1</nldd-radio-button> <nldd-radio-button name=\"options\" value=\"2\">Optie 2</nldd-radio-button> </fieldset>",
           "name": "NLDDRadioButton",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -11400,6 +11972,25 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Delegates focus to the inner native radio `<input>`, so consumers can\ncall `radioEl.focus()` without reaching into shadow DOM."
+            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -11585,6 +12176,26 @@
           "description": "A search input with a leading search icon, an optional dismiss button, and an optional search button.",
           "name": "NLDDSearchField",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
+            {
+              "kind": "field",
+              "name": "blocksImplicitSubmission",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Counts for the implicit-submission rule: a single-line field where Enter\nwould submit the form. See utilities/implicit-submission.ts."
+            },
             {
               "kind": "field",
               "name": "value",
@@ -12055,6 +12666,25 @@
               "default": "''",
               "description": "Icon name for nldd-icon. When not set, the icon slot is used; the icon and\nicon-and-text variants show a placeholder icon when neither is provided.",
               "attribute": "icon"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Delegates focus to the inner native `<input>`, so consumers can call\n`itemEl.focus()` without reaching into shadow DOM."
             }
           ],
           "events": [
@@ -12164,6 +12794,16 @@
           "description": "A horizontal group of mutually exclusive (radio) or multi-select (checkbox) options. Exports both NLDDSegmentedControl and NLDDSegmentedControlItem.",
           "name": "NLDDSegmentedControl",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "value",
@@ -12306,6 +12946,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Delegates focus to the selected item, or to the first enabled one when\nnothing is selected. Mirrors where the keyboard lands when tabbing into\nthe control."
+            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -12531,6 +13190,16 @@
           "description": "A numeric control with increment and decrement buttons.",
           "name": "NLDDStepper",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "value",
@@ -12594,6 +13263,16 @@
               "attribute": "name",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "accessibleLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible name for the spinbutton. Without one it falls back to a generic\n\"adjust the value\", which says what the control does but not which value,\nso give it the name of the field whenever there is one.",
+              "attribute": "accessible-label"
+            },
             {
               "kind": "field",
               "name": "translations",
@@ -12644,6 +13323,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Delegates focus to the spinbutton, the element that carries the tabindex\nand the keyboard handling. The two icon buttons are `tabindex=\"-1\"` on\npurpose, so the stepper is one stop rather than three. Does nothing while\ndisabled, because the spinbutton drops its tabindex then."
+            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -12783,6 +13481,15 @@
               "fieldName": "name",
               "description": "Name for form submission; the value is submitted under this name"
             },
+            {
+              "name": "accessible-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible name for the spinbutton; falls back to a generic label",
+              "fieldName": "accessibleLabel"
+            },
             {
               "name": "translations",
               "type": {
@@ -12835,6 +13542,16 @@
           "description": "A switch toggle with an inline label for use in forms.",
           "name": "NLDDSwitchField",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -12991,6 +13708,16 @@
           "description": "A toggle control for on/off settings. Prefer nldd-switch-field for labeled usage — it combines the switch with a visible label. Direct use of nldd-switch requires an accessible-label attribute for screen reader accessibility.",
           "name": "NLDDSwitch",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "name",
@@ -14625,6 +15352,16 @@
               "static": true,
               "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
             },
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "value",
@@ -15400,6 +16137,23 @@
       "kind": "javascript-module",
       "path": "src/components/inputs/text-field/text-field.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "KEYBOARDS",
+          "type": {
+            "text": "['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url']"
+          },
+          "default": "['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url']",
+          "description": "The tokens `inputmode` and `enterkeyhint` accept. Arrays, so one list types\nthe property and answers at runtime: a value outside it is dropped by the\nbrowser without a word, which is a typo you only find on a phone."
+        },
+        {
+          "kind": "variable",
+          "name": "ENTER_KEYS",
+          "type": {
+            "text": "['enter', 'done', 'go', 'next', 'previous', 'search', 'send']"
+          },
+          "default": "['enter', 'done', 'go', 'next', 'previous', 'search', 'send']"
+        },
         {
           "kind": "class",
           "description": "",
@@ -15414,6 +16168,26 @@
               "static": true,
               "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
             },
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
+            {
+              "kind": "field",
+              "name": "blocksImplicitSubmission",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Counts for the implicit-submission rule: a single-line field where Enter\nwould submit the form. See utilities/implicit-submission.ts."
+            },
             {
               "kind": "field",
               "name": "size",
@@ -15491,6 +16265,26 @@
               "default": "'text'",
               "attribute": "type"
             },
+            {
+              "kind": "field",
+              "name": "keyboard",
+              "type": {
+                "text": "Keyboard | undefined"
+              },
+              "description": "Which on-screen keyboard to raise, forwarded as `inputmode`.",
+              "attribute": "keyboard",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "enterKey",
+              "type": {
+                "text": "EnterKey | undefined"
+              },
+              "description": "What the Enter key says, forwarded as `enterkeyhint`.",
+              "attribute": "enter-key",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "name",
@@ -15794,6 +16588,22 @@
               "fieldName": "type",
               "description": "Input type: 'text' | 'email' | 'tel' | 'url'"
             },
+            {
+              "name": "keyboard",
+              "type": {
+                "text": "Keyboard | undefined"
+              },
+              "description": "Which virtual keyboard a phone or tablet raises, forwarded as `inputmode`: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'. It changes nothing about what the field accepts, and nothing at all on a desktop. Reach for it where the value is digits but not a quantity you would step (a house number, a postcode, a rack unit): 'numeric'. The keyboard for 'tel', 'email' and 'url' already follows from `type`.",
+              "fieldName": "keyboard"
+            },
+            {
+              "name": "enter-key",
+              "type": {
+                "text": "EnterKey | undefined"
+              },
+              "description": "What the Enter key of the virtual keyboard says, forwarded as `enterkeyhint`: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'. It only labels the key; what Enter does is still up to the form, and on a desktop it changes nothing.",
+              "fieldName": "enterKey"
+            },
             {
               "name": "name",
               "type": {
@@ -15882,6 +16692,22 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "KEYBOARDS",
+          "declaration": {
+            "name": "KEYBOARDS",
+            "module": "src/components/inputs/text-field/text-field.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ENTER_KEYS",
+          "declaration": {
+            "name": "ENTER_KEYS",
+            "module": "src/components/inputs/text-field/text-field.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "NLDDTextField",
@@ -15964,6 +16790,26 @@
               "static": true,
               "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
             },
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
+            {
+              "kind": "field",
+              "name": "blocksImplicitSubmission",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Counts for the implicit-submission rule: a single-line field where Enter\nwould submit the form. See utilities/implicit-submission.ts."
+            },
             {
               "kind": "field",
               "name": "size",
@@ -16541,6 +17387,16 @@
           "description": "Twee kolommen, uren en minuten, die als een wiel langs de selectie in het midden schuiven. Het component is zelfstandig bruikbaar (inline op een pagina, in een filterpaneel) en zit ook in de popover van nldd-time-field. Waarden zijn altijd 24-uurs `HH:mm`. Scrollen ís kiezen: wat in het midden tot stilstand komt, is de waarde. Met het toetsenbord bedien je de selectie, want dat is wat een wiel is: uur en minuut zijn er elk een spinbutton. De kolommen eronder staan op aria-hidden, zodat dezelfde waarden niet twee keer worden voorgelezen.",
           "name": "NLDDTimePicker",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "value",
@@ -16782,6 +17638,16 @@
           "description": "Groups nldd-toggle-button elements and manages selection, keyboard navigation, and forwarding of type, name, size, and disabled state to all buttons. For type=\"radio\" (single-select), arrow keys navigate between buttons and automatically select the focused one. For type=\"checkbox\" (multi-select), multiple buttons can be selected simultaneously.",
           "name": "NLDDToggleButtonGroup",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "type",
@@ -16840,6 +17706,25 @@
               "default": "''",
               "description": "ID of an external label element forwarded as aria-labelledby to the group host.",
               "attribute": "accessible-labeled-by"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Delegates focus to the first selected button, or to the first enabled one\nwhen nothing is selected. With `type=\"checkbox\"` more than one can be\nselected; focus goes to the first of them, in DOM order."
             }
           ],
           "attributes": [
@@ -16946,6 +17831,16 @@
           "description": "A selectable button that toggles between selected and unselected. Available as a button (aria-pressed), checkbox, or radio input.",
           "name": "NLDDToggleButton",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
             {
               "kind": "field",
               "name": "type",
@@ -17095,6 +17990,25 @@
               },
               "description": "Toggle selected state programmatically.\nFor type=\"radio\", the button can only be selected, never deselected (native behavior)."
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Delegates focus to whichever control this type renders: the `<input>` for\n`checkbox` and `radio`, the `<button>` for `button`. Only one of the two\nexists at a time. Lets consumers call `toggleButtonEl.focus()` without\nreaching into shadow DOM."
+            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -17313,6 +18227,26 @@
           "description": "A multi-select input that looks like a normal input field: chosen values show as dismissible tokens in a wrapping row, followed by an inline text input that stretches to fill the remaining space and wraps to a new line (growing the field) when it no longer fits. Options are supplied as a slotted nldd-menu, exactly like nldd-combo-box; the menu filters as you type, with a chevron picker button, arrow-key roving across the tokens and ElementInternals form participation.",
           "name": "NLDDTokenField",
           "members": [
+            {
+              "kind": "field",
+              "name": "isFormInput",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Says this is the control an nldd-form-field is about, so the field can\nfind it, name it and move focus into it. See nldd-form-field."
+            },
+            {
+              "kind": "field",
+              "name": "blocksImplicitSubmission",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Counts for the implicit-submission rule: a single-line field where Enter\nwould submit the form. See utilities/implicit-submission.ts."
+            },
             {
               "kind": "field",
               "name": "values",
@@ -17841,24 +18775,24 @@
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "background",
               "type": {
-                "text": "BoxVariant"
+                "text": "BoxBackground"
               },
               "default": "'tinted'",
-              "attribute": "variant",
+              "attribute": "background",
               "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "background",
               "type": {
-                "text": "BoxVariant"
+                "text": "BoxBackground"
               },
               "default": "'tinted'",
-              "fieldName": "variant",
-              "description": "Which surface this box draws. - `tinted` (default): a box on a plain page background. - `base`: a box on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card). - `critical`: a region whose actions are destructive or irreversible (a \"danger zone\"), tinted and outlined in critical. It carries no ARIA of its own: unlike nldd-banner this is not an announcement but a permanent part of the page, so the heading and the button labels have to name the danger — colour is a reinforcement, never the only signal (WCAG 1.4.1). The box draws the surface and nothing else: it has no padding of its own, the same way nldd-card has none. Put an nldd-container inside it and let that set the inset, so one component owns spacing wherever it is used."
+              "fieldName": "background",
+              "description": "Which surface this box draws, named as it is on nldd-app-view, nldd-page, nldd-split-view-pane and nldd-card. It starts tinted where a card starts base: a box is there to stand out from the page, a card to sit on it. - `tinted` (default): a box on a plain page background. - `base`: a box on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card). - `critical`: a region whose actions are destructive or irreversible (a \"danger zone\"), tinted and outlined in critical. It carries no ARIA of its own: unlike nldd-banner this is not an announcement but a permanent part of the page, so the heading and the button labels have to name the danger — colour is a reinforcement, never the only signal (WCAG 1.4.1). The box draws the surface and nothing else: it has no padding of its own, the same way nldd-card has none. Put an nldd-container inside it and let that set the inset, so one component owns spacing wherever it is used."
             }
           ],
           "superclass": {
@@ -26360,16 +27294,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/lists-and-tables/list-item-action/list-item-action.ts",
+      "path": "src/components/lists-and-tables/list-item-segment/list-item-segment.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A segmented action inside an `nldd-list-item`: it groups a run of cells and makes just that run clickable. Use it when a row needs more than one action — a tree row whose chevron expands while the label toggles a checkbox, or a row that navigates with a separate button beside it. Put it in the row where its cells would go: the item has one flat slot, and a segmented action takes the place of the cells it covers. Where the divider starts or stops is marked on the cells themselves (`divider-start` / `divider-end`), not by the slot an action sits in. A row is EITHER row-level interactive (`href` / `button` / `checkbox` on the `nldd-list-item`) OR segmented (one or more of these). Both at once nests a control inside a control, which is invalid HTML; the item DEV-warns. Unlike the row-wide action this does not bleed outward: a segmented action sits between siblings, so an outward inset would overlap them. It owns its inline padding and never drops below the row's control size, so an icon-only one still meets the WCAG 2.5.8 target size — do not add spacer cells inside it for room or hit area, that doubles the space. In a `type=\"listbox\"` list the segmented action renders as a plain container (no control, not focusable) and DEV-warns: an `option` may not contain interactive descendants. The cells render unchanged, so nothing shifts.",
-          "name": "NLDDListItemAction",
+          "description": "A segment inside an `nldd-list-item`: it groups a run of cells and makes just that run clickable. Use it when a row needs more than one segment — a tree row whose chevron expands while the label toggles a checkbox, or a row that navigates with a separate button beside it. Put it in the row where its cells would go: the item has one flat slot, and a segment takes the place of the cells it covers. Where the divider starts or stops is marked on the cells themselves (`divider-start` / `divider-end`), not by the slot a segment sits in. A row is EITHER row-level interactive (`href` / `button` / `checkbox` on the `nldd-list-item`) OR segmented (one or more of these). Both at once nests a control inside a control, which is invalid HTML; the item DEV-warns. Unlike the row-wide action this does not bleed outward: a segment sits between siblings, so an outward inset would overlap them. It owns its inline padding and never drops below the row's control size, so an icon-only one still meets the WCAG 2.5.8 target size — do not add spacer cells inside it for room or hit area, that doubles the space. In a `type=\"listbox\"` list the segment renders as a plain container (no control, not focusable) and DEV-warns: an `option` may not contain interactive descendants. The cells render unchanged, so nothing shifts.",
+          "name": "NLDDListItemSegment",
           "slots": [
             {
               "name": "",
-              "description": "The cells that belong to this action"
+              "description": "The cells that belong to this segment"
             }
           ],
           "members": [
@@ -26447,7 +27381,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Marks this action as the row's disclosure control: it takes `aria-expanded`\nfrom the parent item's `expanded` instead of its own. Use it on a tree row's\nchevron, so the open/closed state is written once — on the row, where it also\ndrives the children group — rather than kept in step in two places.\n\nA slotted `nldd-icon-cell` turns a quarter with that state, so a chevron\npoints down while the row is open without any consumer CSS.",
+              "description": "Marks this segment as the row's disclosure control: it takes `aria-expanded`\nfrom the parent item's `expanded` instead of its own. Use it on a tree row's\nchevron, so the open/closed state is written once — on the row, where it also\ndrives the children group — rather than kept in step in two places.\n\nA slotted `nldd-icon-cell` turns a quarter with that state, so a chevron\npoints down while the row is open without any consumer CSS.",
               "attribute": "disclosure",
               "reflects": true
             },
@@ -26475,7 +27409,7 @@
               "kind": "field",
               "name": "width",
               "type": {
-                "text": "ListItemActionWidth"
+                "text": "ListItemSegmentWidth"
               },
               "default": "'fit-content'",
               "attribute": "width",
@@ -26513,7 +27447,7 @@
           "events": [
             {
               "name": "change",
-              "description": "On a `checkbox` action after it toggles; detail: { checked: boolean }"
+              "description": "On a `checkbox` segment after it toggles; detail: { checked: boolean }"
             }
           ],
           "attributes": [
@@ -26521,7 +27455,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Renders the segmented action as a `<button>`; ignored when `href` is set",
+              "description": "Renders the segment as a `<button>`. Last of the three: `href` and `checkbox` both win over it.",
               "name": "button",
               "default": "false",
               "fieldName": "button"
@@ -26530,7 +27464,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Renders the segmented action as an `<a>` with this URL; wins over `button` and `checkbox`",
+              "description": "Renders the segment as an `<a>` with this URL. Wins over `checkbox` and `button`.",
               "name": "href",
               "fieldName": "href"
             },
@@ -26554,7 +27488,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Makes the segmented action a `role=\"checkbox\"` control; ignored when `href` is set",
+              "description": "Makes the segment a `role=\"checkbox\"` control. Wins over `button`, loses to `href`.",
               "name": "checkbox",
               "default": "false",
               "fieldName": "checkbox"
@@ -26563,7 +27497,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Checked state of a `checkbox` action; it toggles on activation",
+              "description": "Checked state of a `checkbox` segment; it toggles on activation",
               "name": "checked",
               "default": "false",
               "fieldName": "checked"
@@ -26572,7 +27506,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "Disclosure state, reflected as `aria-expanded` on the control. Set it on the segmented action that opens something (e.g. a tree row's chevron). Leave it off entirely when the segmented action discloses nothing — an absent attribute emits no aria-expanded.",
+              "description": "Disclosure state, reflected as `aria-expanded` on the control, and painted: the segment stays lit a step above hover for as long as what it opened is on screen, so a menu reads as hanging off this row rather than floating over the list. Set it on the segment that opens something (a tree row's chevron, a menu). Leave it off entirely when the segment discloses nothing — an absent attribute emits no aria-expanded.",
               "name": "expanded",
               "fieldName": "expanded"
             },
@@ -26580,7 +27514,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Marks the segmented action as the row's disclosure control: `aria-expanded` comes from the parent item's `expanded`, so the state lives in one place. A slotted `nldd-icon-cell` rotates a quarter turn while the row is open",
+              "description": "Marks the segment as the row's disclosure control: `aria-expanded` comes from the parent item's `expanded`, so the state lives in one place. A slotted `nldd-icon-cell` rotates a quarter turn while the row is open",
               "name": "disclosure",
               "default": "false",
               "fieldName": "disclosure"
@@ -26589,7 +27523,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Marks the segmented action as the current page (`aria-current=\"page\"`)",
+              "description": "Marks the segment as the current page (`aria-current=\"page\"`). The row it sits in paints itself as the current row from it, so on a segmented row this is the only place it has to be set.",
               "name": "current",
               "default": "false",
               "fieldName": "current"
@@ -26598,16 +27532,16 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Disabled state; only applies to button and checkbox segmented actions",
+              "description": "Switches the segment off: a `button` or `checkbox` segment stops responding and dims, a `href` segment gets `aria-disabled` and its click is blocked (a link cannot be disabled natively). The arrow keys skip a row whose only segment is off.",
               "name": "disabled",
               "default": "false",
               "fieldName": "disabled"
             },
             {
               "type": {
-                "text": "ListItemActionWidth"
+                "text": "ListItemSegmentWidth"
               },
-              "description": "`full` lets the segmented action grow to fill the row (default: 'fit-content')",
+              "description": "`full` lets the segment grow to fill the row (default: 'fit-content')",
               "name": "width",
               "default": "'fit-content'",
               "fieldName": "width"
@@ -26616,7 +27550,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Accessible name for the control. Set it when the segmented action holds only an icon, or when the cell text does not describe the action.",
+              "description": "Accessible name for the control. Set it when the segment holds only an icon, or when the cell text does not describe the action.",
               "name": "accessible-label",
               "default": "''",
               "fieldName": "accessibleLabel"
@@ -26626,25 +27560,25 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "nldd-list-item-action",
+          "tagName": "nldd-list-item-segment",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "NLDDListItemAction",
+          "name": "NLDDListItemSegment",
           "declaration": {
-            "name": "NLDDListItemAction",
-            "module": "src/components/lists-and-tables/list-item-action/list-item-action.ts"
+            "name": "NLDDListItemSegment",
+            "module": "src/components/lists-and-tables/list-item-segment/list-item-segment.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nldd-list-item-action",
+          "name": "nldd-list-item-segment",
           "declaration": {
-            "name": "NLDDListItemAction",
-            "module": "src/components/lists-and-tables/list-item-action/list-item-action.ts"
+            "name": "NLDDListItemSegment",
+            "module": "src/components/lists-and-tables/list-item-segment/list-item-segment.ts"
           }
         }
       ]
@@ -26655,12 +27589,12 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A row within an `nldd-list`. Renders as a link when `href` is set, as a checkbox when `checkbox` is set, as a button when `button` is set, or as a plain container otherwise. All cells and action segmented actions share one flat slot, in source order. Two rules govern every row: 1. State fills always paint the WIDENED row geometry — the row box extended by the indicator inline inset on both sides — whether or not the row is interactive. Paint never differs between a selected plain row and a selected interactive row. 2. The widened strip belongs to the ROW, never to a segment. A row with any action (its own `href`/`button`/`checkbox`, or a slotted segment) pulls itself outward (`is-interactive` host class → negative inline margin) and pads the row block back by the same amount, so content stays on the grid. A row-wide action owns that padding itself, making the whole widened box one hit area; slotted segmented actions stay in the grid, so their footprint is position-independent and tree columns line up at any depth. By default the divider starts at the row's first text or title cell, so the line lands on the words rather than on whatever leads up to them — an icon, an avatar, a checkbox, or the spacers a tree indents with. Rows of different shapes then still line their dividers up with each other, and a tree's dividers step inward with its indentation. Text inside an `nldd-list-item-action` counts as the row's content, and the marker is that text cell rather than the action: the action carries its own inline padding, so its edge sits before the words. A row with no text or title cell keeps the full content width. Mark a cell with `divider-start` and/or `divider-end` to place it yourself instead — an explicit marker replaces the derived one entirely, so `divider-start` on the leading cell restores the full-width line. Multiple markers resolve as the union: first `divider-start` through last `divider-end`. A start past the last end is an authoring error — the item DEV-warns and falls back to the full content width. A branch row can disclose its children in two ways: a dedicated `nldd-list-item-action[disclosure]` segment (only the chevron is clickable), or the row itself as the control (`button` + `expanded`, the whole row toggles). In the second case, mark the chevron's `nldd-icon-cell` with `disclosure` and the row turns it with `expanded` — the same affordance, without having to trade a clickable row for a turning chevron. `checkbox` makes the WHOLE row the control: the inner action becomes a `role=\"checkbox\"` button carrying `aria-checked`, it toggles `checked` on activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph) before the text and mark it `aria-hidden` + non-focusable — the row already conveys role and state, and a second focusable control would double the tab stops. Do NOT nest a real `<input type=\"checkbox\">` in the action: interactive content inside a `<button>` is invalid HTML and AT announces the button, not the checked state. A `<label>` variant is not offered for the same reason it cannot work — label-to-input association walks the DOM tree, and a slotted input is not a descendant of a label in the shadow root. When it renders as a link, `target` and `rel` are forwarded to the inner `<a>` (e.g. `target=\"_blank\" rel=\"noopener noreferrer\"`). With `target=\"_blank\"` the item also injects a visually hidden \"opens in new tab\" announcement for assistive technology (WCAG 2.1 SC 3.2.2). The item synchronizes its ARIA with its parent `nldd-list`'s `type`: - `list` parent → `role=\"listitem\"` - `navigation` parent → `role=\"listitem\"` + `aria-current=\"page\"` on the inner `<a>` / `<button>` when `selected` - `listbox` parent → `role=\"option\"` + `aria-selected` reflecting `selected`. The list points its search input's `aria-activedescendant` at the active option via `_highlighted` (separate from `selected`).",
+          "description": "A row within an `nldd-list`. Renders as a link when `href` is set, as a checkbox when `checkbox` is set, as a button when `button` is set, or as a plain container otherwise. All cells and segments share one flat slot, in source order. Two rules govern every row: 1. State fills always paint the WIDENED row geometry — the row box extended by the indicator inline inset on both sides — whether or not the row is interactive. Paint never differs between a selected plain row and a selected interactive row. 2. The widened strip belongs to the ROW, never to a segment. A row with any action (its own `href`/`button`/`checkbox`, or a slotted segment) pulls itself outward (`is-interactive` host class → negative inline margin) and pads the row block back by the same amount, so content stays on the grid. A row-wide action owns that padding itself, making the whole widened box one hit area; slotted segments stay in the grid, so their footprint is position-independent and tree columns line up at any depth. By default the divider starts at the row's first text or title cell, so the line lands on the words rather than on whatever leads up to them — an icon, an avatar, a checkbox, or the spacers a tree indents with. Rows of different shapes then still line their dividers up with each other, and a tree's dividers step inward with its indentation. Text inside an `nldd-list-item-segment` counts as the row's content, and the marker is that text cell rather than the action: the action carries its own inline padding, so its edge sits before the words. A row with no text or title cell keeps the full content width. Mark a cell with `divider-start` and/or `divider-end` to place it yourself instead — an explicit marker replaces the derived one entirely, so `divider-start` on the leading cell restores the full-width line. Multiple markers resolve as the union: first `divider-start` through last `divider-end`. A start past the last end is an authoring error — the item DEV-warns and falls back to the full content width. A branch row can disclose its children in two ways: a dedicated `nldd-list-item-segment[disclosure]` segment (only the chevron is clickable), or the row itself as the control (`button` + `expanded`, the whole row toggles). In the second case, mark the chevron's `nldd-icon-cell` with `disclosure` and the row turns it with `expanded` — the same affordance, without having to trade a clickable row for a turning chevron. `checkbox` makes the WHOLE row the control: the inner action becomes a `role=\"checkbox\"` button carrying `aria-checked`, it toggles `checked` on activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph) before the text and mark it `aria-hidden` + non-focusable — the row already conveys role and state, and a second focusable control would double the tab stops. Do NOT nest a real `<input type=\"checkbox\">` in the action: interactive content inside a `<button>` is invalid HTML and AT announces the button, not the checked state. A `<label>` variant is not offered for the same reason it cannot work — label-to-input association walks the DOM tree, and a slotted input is not a descendant of a label in the shadow root. When it renders as a link, `target` and `rel` are forwarded to the inner `<a>` (e.g. `target=\"_blank\" rel=\"noopener noreferrer\"`). With `target=\"_blank\"` the item also injects a visually hidden \"opens in new tab\" announcement for assistive technology (WCAG 2.1 SC 3.2.2). The item synchronizes its ARIA with its parent `nldd-list`'s `type`: - `list` parent → `role=\"listitem\"` - `navigation` parent → `role=\"listitem\"` + `aria-current=\"page\"` on the inner `<a>` / `<button>` when `selected` - `listbox` parent → `role=\"option\"` + `aria-selected` reflecting `selected`. The list points its search input's `aria-activedescendant` at the active option via `_highlighted` (separate from `selected`).",
           "name": "NLDDListItem",
           "slots": [
             {
               "name": "",
-              "description": "Cells and segmented actions, in source order"
+              "description": "Cells and segments, in source order"
             },
             {
               "name": "children",
@@ -26688,6 +27622,17 @@
               "attribute": "selected",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "current",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The row you are on, as opposed to the rows you picked (`selected`).\n\nKept apart because the two say different things and a list can show both:\na checkbox list where three rows are ticked and one is open. At rest they\npaint the same, so a menu reads the same as it always did; the difference\nshows when focus is in the row.",
+              "attribute": "current",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "button",
@@ -26721,6 +27666,17 @@
               "attribute": "checked",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Switches off the row's own control.\n\nOnly the row's own: a row built out of segments has no control here, and\neach segment carries its own `disabled`. A link cannot be disabled the way\na button can, so there it is `aria-disabled` plus a blocked click, the\nsame trade `nldd-button` makes.",
+              "attribute": "disabled",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "expanded",
@@ -26843,7 +27799,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Marks the item as selected. Selection is consumer-managed; the list never sets it. In a `navigation` parent it puts `aria-current=\"page\"` on the inner action, in a `listbox` parent it drives `aria-selected`.",
+              "description": "Marks the item as selected: it is one of the rows you picked. Selection is consumer-managed; the list never sets it. In a `navigation` parent it puts `aria-current=\"page\"` on the inner action, in a `listbox` parent it drives `aria-selected`.",
               "name": "selected",
               "default": "false",
               "fieldName": "selected"
@@ -26852,7 +27808,16 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Renders the item as a `<button>`; ignored when `href` is set (a link wins)",
+              "description": "Marks the item as the one you are on: the page a menu row points at, the record a list has open. Exactly one row in a list carries it, where `selected` may be on many. It paints like `selected` at rest, and takes the highlighted fill while focus is anywhere in the row — including inside a nested `nldd-list-item-segment`, which is what a segmented row needs: the focus never reaches the row's own control, because there is none. In a `navigation` parent it puts `aria-current=\"page\"` on the inner action. On a segmented row set it on the segment that holds the link instead: the row reads `current` off its own segments and paints itself, so it is written once, where `aria-current` belongs.",
+              "name": "current",
+              "default": "false",
+              "fieldName": "current"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Renders the item as a `<button>`. Last of the three: `href` and `checkbox` both win over it.",
               "name": "button",
               "default": "false",
               "fieldName": "button"
@@ -26861,7 +27826,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Makes the whole row a `role=\"checkbox\"` control; ignored when `href` is set",
+              "description": "Makes the whole row a `role=\"checkbox\"` control. Wins over `button`, loses to `href`.",
               "name": "checkbox",
               "default": "false",
               "fieldName": "checkbox"
@@ -26875,11 +27840,20 @@
               "default": "false",
               "fieldName": "checked"
             },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Switches the row's own control off: a `button` or `checkbox` row stops responding and dims, a `href` row gets `aria-disabled` and its click is blocked (a link cannot be disabled natively). A row without a control of its own has nothing to switch off, and segments carry their own `disabled`. The arrow keys skip a disabled row.",
+              "name": "disabled",
+              "default": "false",
+              "fieldName": "disabled"
+            },
             {
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "Disclosure state. Drives the `children` group's visibility AND supplies `aria-expanded` — to the row's own control when the row is interactive, or to the segmented action marked `disclosure`. Written once either way; the item DEV-warns when there is nowhere for it to live.",
+              "description": "Disclosure state. Drives the `children` group's visibility AND supplies `aria-expanded` — to the row's own control when the row is interactive, or to the segment marked `disclosure`. Written once either way; the item DEV-warns when there is nowhere for it to live.",
               "name": "expanded",
               "fieldName": "expanded"
             },
@@ -26887,7 +27861,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Renders the item as an `<a>` with this URL. Takes precedence over `button`; without either the item is a plain container with no action.",
+              "description": "Renders the item as an `<a>` with this URL. Wins over `checkbox` and `button`; without any of the three the item is a plain container with no action.",
               "name": "href",
               "fieldName": "href"
             },
@@ -26968,7 +27942,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A container for `nldd-list-item` elements. The `type` attribute switches the list's a11y role and behavior: - `list` (default) — `role=\"list\"`, items `role=\"listitem\"`. Reorderable allowed. - `tree` — `role=\"tree\"`, items `role=\"treeitem\"`. Branch rows put their child rows in their own `slot=\"children\"`, which the item renders as a `role=\"group\"`. Level, position and set size are NOT authored: the nesting represents the hierarchy, so assistive technology derives them. A branch row must carry `expanded`; the group is hidden while it is false. Visual indentation is the consumer's — repeat a spacer-cell per level. Comes with its own keyboard, see \"Tree\" below. - `navigation` — host `role=\"navigation\"`, items with `selected` get `aria-current=\"page\"` on their inner `<a>` or `<button>`. - `listbox` — an accessible, filterable listbox (combobox pattern). The list renders its OWN search input (`role=\"combobox\"`) pinned above the options; `.list__items` becomes `role=\"listbox\"` and items become `role=\"option\"`. Focus stays in the input, the active option moves via `aria-activedescendant`, and filtering is consumer-managed via the `input` event (toggle `[hidden]` on items). See \"Listbox\" below. Selection state is consumer-managed: the list never mutates `selected` itself. In `type=\"listbox\"` the list owns a native `<input role=\"combobox\">` (mirroring how `nldd-combo-box` wires an input to a slotted listbox). Keyboard, handled on the input so focus never leaves it: - ArrowDown / ArrowUp — move the active option among the VISIBLE (non-`[hidden]`) options (wrap around). - Home / End — first / last visible option. - Enter — activate the active option by triggering its inner action (a link navigates, a button fires the consumer's handler). Selection stays consumer-managed. - Escape — clear the search value (and refire `input`). On every active change the input's `aria-activedescendant` is set to the active option's id and the option is scrolled into view. The active option (`_highlighted` on the item, a highlight) is distinct from `selected`. Filtering is the consumer's job: listen to `input` (`{ detail: { value } }`) and toggle `[hidden]` on items; after the visible set changes the list resets the active option to the first visible one. `reorderable` and `arrow-navigation` are ignored in listbox mode (listbox has its own keyboard). A tree is a composite widget, so it brings its own keyboard — `arrow-navigation` is implied and needn't be set: - ArrowDown / ArrowUp — move between the rows in the order they appear on screen, the rows of an open branch included. - Home / End — first / last row. - ArrowRight — opens a closed branch; on an open one it steps to its first child. - ArrowLeft — closes an open branch; on a leaf it steps out to the parent row. - Enter / Space — open and close, the same as Right and Left. Only while focus sits on the row itself: a row that is its own control, and a segmented action you tabbed into, handle both keys themselves. Opening and closing runs through the row's own disclosure control — the segmented action marked `disclosure`, or the row itself when it is a button. The list activates that control rather than writing `expanded`, so the state keeps being set in one place: the consumer's handler. A row that is a link is never activated this way, since that would navigate away. The tree is one tab stop. Focus lands on the row itself when the row has no control of its own, because that is where `treeitem` sits and it makes assistive technology announce the row rather than a button inside it. Tab then walks the controls of THAT row (a chevron beside a checkbox, say) and leaves the list after the last one. A deliberate deviation: strictly speaking a row with several controls is a `treegrid`, not a `tree`. We keep the tree semantics — level and set size are what matters here, not rows and columns — and borrow the \"Tab within the row\" behavior from the grid pattern. Should a tree with real columns come up, that is when `treegrid` earns its own type. On reorder (type=\"list\" + reorderable), the list dispatches `nldd-reorder` with `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their data model that renders the DOM). Focus is restored to the moved item's drag handle via a single `requestAnimationFrame` — this assumes the consumer reorders **synchronously** in the event handler. Async renderers (React, Vue, …) that update the DOM on a later tick will miss the focus restore and should manage focus themselves after their render commits.",
+          "description": "A container for `nldd-list-item` elements. The `type` attribute switches the list's a11y role and behavior: - `list` (default) — `role=\"list\"`, items `role=\"listitem\"`. Reorderable allowed. - `tree` — `role=\"tree\"`, items `role=\"treeitem\"`. Branch rows put their child rows in their own `slot=\"children\"`, which the item renders as a `role=\"group\"`. Level, position and set size are NOT authored: the nesting represents the hierarchy, so assistive technology derives them. A branch row must carry `expanded`; the group is hidden while it is false. Visual indentation is the consumer's — repeat a spacer-cell per level. Comes with its own keyboard, see \"Tree\" below. - `navigation` — host `role=\"navigation\"`, items with `selected` get `aria-current=\"page\"` on their inner `<a>` or `<button>`. - `listbox` — an accessible, filterable listbox (combobox pattern). The list renders its OWN search input (`role=\"combobox\"`) pinned above the options; `.list__items` becomes `role=\"listbox\"` and items become `role=\"option\"`. Focus stays in the input, the active option moves via `aria-activedescendant`, and filtering is consumer-managed via the `input` event (toggle `[hidden]` on items). See \"Listbox\" below. Selection state is consumer-managed: the list never mutates `selected` itself. Every list answers to the arrow keys, and there is no attribute to switch that on. Whether the keys do something is not a property of one list: it is what a reader may assume about all of them, and a per-list setting made that unknowable from the outside. - ArrowUp / ArrowDown — move focus between the rows there is something to do with. A row of nothing but text is skipped, because focus that leads nowhere is a dead end. - Home / End — the first / last of those rows. - Tab — the list is ONE tab stop, so Tab moves past it rather than through it. Within the current row Tab walks that row's own controls: a chevron beside a checkbox, a menu button at the end. The same controls in the other rows are held out of the tab order (`tabindex=\"-1\"`, or `no-tab` on a design-system control that keeps its tab stop in its own shadow root). Arrows move focus only; selection stays consumer-managed. Two types answer differently, and both say so on screen before you touch a key: a listbox runs its keyboard from its search field, and a reorderable list moves rows with the arrows. In `type=\"listbox\"` the list owns a native `<input role=\"combobox\">` (mirroring how `nldd-combo-box` wires an input to a slotted listbox). Keyboard, handled on the input so focus never leaves it: - ArrowDown / ArrowUp — move the active option among the VISIBLE (non-`[hidden]`) options (wrap around). - Home / End — first / last visible option. - Enter — activate the active option by triggering its inner action (a link navigates, a button fires the consumer's handler). Selection stays consumer-managed. - Escape — clear the search value (and refire `input`). On every active change the input's `aria-activedescendant` is set to the active option's id and the option is scrolled into view. The active option (`_highlighted` on the item, a highlight) is distinct from `selected`. Filtering is the consumer's job: listen to `input` (`{ detail: { value } }`) and toggle `[hidden]` on items; after the visible set changes the list resets the active option to the first visible one. `reorderable` and the roving arrow keys are ignored in listbox mode (listbox has its own keyboard). A tree adds to that keyboard, and counts the rows of an open branch as part of the order the arrows walk: - ArrowRight — opens a closed branch; on an open one it steps to its first child. - ArrowLeft — closes an open branch; on a leaf it steps out to the parent row. - Enter — follows the row: its own link or button, or on a segmented branch the first action that is not the chevron. A branch with only a chevron folds instead. - Space — open and close, the same as Right and Left. Only while focus sits on the row itself: a row that is its own control, and a segmented action you tabbed into, handle both keys themselves. Opening and closing runs through the row's own disclosure control — the segment marked `disclosure`, or the row itself when it is a button. The list activates that control rather than writing `expanded`, so the state keeps being set in one place: the consumer's handler. A row that is a link is never activated this way, since that would navigate away. The tree is one tab stop. Focus lands on the row itself when the row has no control of its own, because that is where `treeitem` sits and it makes assistive technology announce the row rather than a button inside it. Tab then walks the controls of THAT row (a chevron beside a checkbox, say) and leaves the list after the last one. A deliberate deviation: strictly speaking a row with several controls is a `treegrid`, not a `tree`. We keep the tree semantics — level and set size are what matters here, not rows and columns — and borrow the \"Tab within the row\" behavior from the grid pattern. Should a tree with real columns come up, that is when `treegrid` earns its own type. On reorder (type=\"list\" + reorderable), the list dispatches `nldd-reorder` with `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their data model that renders the DOM). Focus is restored to the moved item's drag handle via a single `requestAnimationFrame` — this assumes the consumer reorders **synchronously** in the event handler. Async renderers (React, Vue, …) that update the DOM on a later tick will miss the focus restore and should manage focus themselves after their render commits.",
           "name": "NLDDList",
           "slots": [
             {
@@ -27033,17 +28007,6 @@
               "attribute": "dividers",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "arrowNavigation",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Roving-tabindex arrow-key navigation. When set, ArrowUp/ArrowDown move focus\nbetween the (interactive) items, Home/End jump to the first/last, and the\nwhole list becomes a single tab stop — so Tab moves past the rest instead of\nstepping through every item. Arrows move focus only; selection stays\nconsumer-managed.\n\nPragmatic by design: the `list`/`navigation` role is kept (no widget role).\nUse it only on **simple** lists where each item has a single action and no\nextra controls (a control in a `start`/`end` slot would not be reachable as\nits own tab stop). Mutually exclusive with `reorderable` (both use the arrow\nkeys); when both are set, `reorderable` wins and this is ignored.\n\nKnown a11y limitation: because the role stays `list`/`navigation` (not\n`listbox`/`menu`), screen readers do not auto-announce that the arrow keys\nnavigate. As a best-effort signal the host carries\n`aria-keyshortcuts=\"ArrowUp ArrowDown Home End\"` while active, but blind users\nmay still not discover the feature — another reason to keep it to genuinely\nsimple lists.",
-              "attribute": "arrow-navigation",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "height",
@@ -27131,7 +28094,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Enables drag-to-reorder and pushes `reorderable` onto the items. Only valid with `type=\"list\"`; wins over `arrow-navigation` when both are set.",
+              "description": "Enables drag-to-reorder and pushes `reorderable` onto the items. Only valid with `type=\"list\"`; there the arrow keys move rows instead of focus.",
               "name": "reorderable",
               "default": "false",
               "fieldName": "reorderable"
@@ -27145,15 +28108,6 @@
               "default": "'always'",
               "fieldName": "dividers"
             },
-            {
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Roving-tabindex arrow-key navigation: ArrowUp/ArrowDown move focus between the rows, Home/End jump to first/last, and the list becomes a single tab stop. Implied by `type=\"tree\"` (which adds ArrowLeft/ArrowRight, see above). Ignored when `reorderable` is active on a `type=\"list\"`, and in listbox mode.",
-              "name": "arrow-navigation",
-              "default": "false",
-              "fieldName": "arrowNavigation"
-            },
             {
               "type": {
                 "text": "string"
@@ -29998,6 +30952,17 @@
               "attribute": "color",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "customColor",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Handed to the styles as a custom property rather than read from the\nattribute in CSS: `attr()` with a type is not available everywhere yet,\nand this keeps one code path.",
+              "attribute": "custom-color",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "pulse",
@@ -30097,7 +31062,16 @@
               },
               "default": "'critical'",
               "fieldName": "color",
-              "description": "Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success') or a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …). Default: 'critical'"
+              "description": "Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success'), a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …), or 'inherit' to fill in the content color around it: the `--context-content-color` channel a list item, table row or menu sets, falling back to `currentColor`. Default: 'critical'"
+            },
+            {
+              "name": "custom-color",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it.",
+              "fieldName": "customColor"
             },
             {
               "name": "pulse",
@@ -32653,6 +33627,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/utilities/implicit-submission.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "submitOnEnter",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "host",
+              "type": {
+                "text": "HTMLElement & { internals: ElementInternals }"
+              }
+            },
+            {
+              "name": "event",
+              "type": {
+                "text": "KeyboardEvent"
+              }
+            }
+          ],
+          "description": "Submits the form this field belongs to, under the same conditions the browser\nuses.\n\nDoes nothing when something already handled the Enter. A component that owns\nthe key calls `preventDefault` when it acts on it and leaves it alone when it\ndoes not, so an open date picker keeps its Enter and a token field that\ncommits nothing lets the form through.\n\nWithout a submit button the specification submits only when the form holds a\nsingle field that blocks implicit submission. Reproducing that rule matters\nmore than it looks: an Enter that behaves differently inside this design\nsystem than outside it is worse than one that does nothing."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "submitOnEnter",
+          "declaration": {
+            "name": "submitOnEnter",
+            "module": "src/utilities/implicit-submission.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/utilities/input-modality.ts",
@@ -32890,6 +33904,59 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/utilities/owned-attribute.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "setOwnedAttribute",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "el",
+              "type": {
+                "text": "Element"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "applied",
+              "type": {
+                "text": "string | null"
+              },
+              "description": "what this component wrote here last time, or null"
+            }
+          ],
+          "description": "An attribute one component hands to another without overruling what is\nalready there.\n\nThe closer to the control, the more specific, so the heavier it weighs. An\n`aria-label` on a slotted `<select>` beats the `accessible-label` on the\nwrapper around it, which beats the caption of the `nldd-form-field` above\nthat. Every layer does two things and no more: it fills a gap, and it takes\nback only what it wrote itself.\n\nWithout that second half a component reads \"I have no name to give\" as\n\"remove the name that is there\", which is how a documented way of naming a\ncontrol quietly stopped working."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "setOwnedAttribute",
+          "declaration": {
+            "name": "setOwnedAttribute",
+            "module": "src/utilities/owned-attribute.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/utilities/page-section-mixin.ts",
@@ -33674,7 +34741,7 @@
               }
             }
           ],
-          "description": "Nearest ancestor app-view (light-DOM `closest`; slotted layers stay in the\nconsumer's light tree so this reaches across the slot boundaries), or null\nwhen a layer is used stand-alone (e.g. a bare page in the docs)."
+          "description": "Nearest ancestor app-view (light-DOM `closest`; slotted layers stay in the\nconsumer's light tree so this reaches across the slot boundaries), or null\nwhen a layer is used stand-alone (e.g. a bare page in the docs).\n\nAn overlay ends the search: a sheet or a modal dialog is its own scroll\ncontainer and its own top edge, so a page inside one owns its scroller\nwhatever the app around it does. Without this the app-view would push its\nroot mode straight through the overlay and the page's sticky header would\nstick against the document, over the content of the overlay. The overlays\nreset --context-scroll-mode as well, which is what the stand-alone read\nbelow then finds."
         },
         {
           "kind": "class",