@nldd/design-system 0.8.82 → 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"
             },
             {
@@ -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"
           }
         },
         {
@@ -7740,6 +7928,16 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "allowCustom",
@@ -8025,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": {
@@ -9752,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",
@@ -10033,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": {
@@ -10103,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",
@@ -15878,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": "",
@@ -15989,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",
@@ -16292,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": {
@@ -16380,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",
@@ -18447,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": {
@@ -26966,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": [
@@ -27053,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
             },
@@ -27081,7 +27409,7 @@
               "kind": "field",
               "name": "width",
               "type": {
-                "text": "ListItemActionWidth"
+                "text": "ListItemSegmentWidth"
               },
               "default": "'fit-content'",
               "attribute": "width",
@@ -27119,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": [
@@ -27127,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"
@@ -27136,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"
             },
@@ -27160,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"
@@ -27169,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"
@@ -27178,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"
             },
@@ -27186,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"
@@ -27195,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"
@@ -27204,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"
@@ -27222,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"
@@ -27232,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"
           }
         }
       ]
@@ -27261,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",
@@ -27294,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",
@@ -27327,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",
@@ -27449,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"
@@ -27458,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"
@@ -27467,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"
@@ -27481,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"
             },
@@ -27493,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"
             },
@@ -27574,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": [
             {
@@ -27639,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",
@@ -27737,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"
@@ -27751,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"
@@ -30604,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",
@@ -30703,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",
@@ -34373,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",