@nldd/design-system 0.8.85 → 0.8.87

package/custom-elements.json

@@ -1031,9 +1031,9 @@
               "kind": "field",
               "name": "tooltipTiming",
               "type": {
-                "text": "'default' | 'instant' | 'never'"
+                "text": "'delay' | 'instant' | 'never'"
               },
-              "default": "'default'",
+              "default": "'delay'",
               "description": "Forwarded to the inner nldd-tooltip's `timing`. Use `'never'` to\nsuppress the visual tooltip; aria-label still describes the button.",
               "attribute": "tooltip-timing",
               "reflects": true
@@ -1249,10 +1249,10 @@
             {
               "name": "tooltip-timing",
               "type": {
-                "text": "'default' | 'instant' | 'never'"
+                "text": "'delay' | 'instant' | 'never'"
               },
-              "default": "'default'",
-              "description": "Forwarded to the inner nldd-tooltip's `timing`: 'default' (700 ms show-delay), 'instant', or 'never' (suppress the visual tooltip; screen readers still get the aria-label). Use 'never' when the surrounding context already explains the button (e.g. spin buttons in nldd-number-field, the chevron in nldd-split-button).",
+              "default": "'delay'",
+              "description": "Forwarded to the inner nldd-tooltip's `timing`: 'delay' (the default, a 700 ms show-delay), 'instant', or 'never' (suppress the visual tooltip; screen readers still get the aria-label). Use 'never' when the surrounding context already explains the button (e.g. spin buttons in nldd-number-field, the chevron in nldd-split-button).",
               "fieldName": "tooltipTiming"
             },
             {
@@ -2970,7 +2970,7 @@
               "type": {
                 "text": "AvatarSize"
               },
-              "default": "''",
+              "default": "'full'",
               "attribute": "size",
               "reflects": true
             },
@@ -2980,7 +2980,7 @@
               "type": {
                 "text": "AvatarColor"
               },
-              "default": "'default'",
+              "default": "'neutral'",
               "attribute": "color",
               "reflects": true
             },
@@ -3063,9 +3063,9 @@
               "kind": "field",
               "name": "tooltipTiming",
               "type": {
-                "text": "'default' | 'instant' | 'never'"
+                "text": "'delay' | 'instant' | 'never'"
               },
-              "default": "'default'",
+              "default": "'delay'",
               "description": "Forwarded to the inner nldd-tooltip's `timing`, like nldd-icon-button.\nOn by default: initials without a name are a riddle. An\navatar that sits beside that name is `decorative` and shows none.",
               "attribute": "tooltip-timing",
               "reflects": true
@@ -3177,18 +3177,18 @@
               "type": {
                 "text": "AvatarSize"
               },
-              "default": "''",
+              "default": "'full'",
               "fieldName": "size",
-              "description": "`full` (default) scales with the container, like nldd-icon; or a fixed size in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Empty behaves as `full`. The initials and the icon scale along"
+              "description": "`full` (the default) scales with the container, like nldd-icon; or a fixed size in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). The initials and the icon scale along"
             },
             {
               "name": "color",
               "type": {
                 "text": "AvatarColor"
               },
-              "default": "'default'",
+              "default": "'neutral'",
               "fieldName": "color",
-              "description": "`default` (neutral fill) or `inherit` (fill in the content color: the `--context-content-color` channel, or `currentColor` when that is unset; text in the contrast color, so the avatar can replace an icon in a button for instance); default `default`"
+              "description": "`neutral` (the default, a neutral fill) or `inherit` (fill in the content color: the `--context-content-color` channel, or `currentColor` when that is unset; text in the contrast color, so the avatar can replace an icon in a button for instance)"
             },
             {
               "name": "icon-aligned",
@@ -3265,10 +3265,10 @@
             {
               "name": "tooltip-timing",
               "type": {
-                "text": "'default' | 'instant' | 'never'"
+                "text": "'delay' | 'instant' | 'never'"
               },
-              "default": "'default'",
-              "description": "When the name appears as a tooltip on hover or focus: `default` (after 700ms; the default), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text",
+              "default": "'delay'",
+              "description": "When the name appears as a tooltip on hover or focus: `delay` (the default, after 700ms), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text",
               "fieldName": "tooltipTiming"
             },
             {
@@ -3638,7 +3638,7 @@
               "type": {
                 "text": "IconSize"
               },
-              "default": "''",
+              "default": "'full'",
               "attribute": "size",
               "reflects": true
             },
@@ -3689,9 +3689,9 @@
               "type": {
                 "text": "IconSize"
               },
-              "description": "`full` (default) fills the container; `inherit` follows the surrounding text (1em); or a fixed spacer-aligned size in px (16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Empty behaves as `full`.",
+              "description": "`full` (the default) fills the container. `inherit` sizes the icon to the surrounding text (1em) and drops it onto that text's own line, for an icon set in a line of running text. Or a fixed spacer-aligned size in px (16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96).",
               "name": "size",
-              "default": "''",
+              "default": "'full'",
               "fieldName": "size"
             },
             {
@@ -4645,9 +4645,9 @@
               "kind": "field",
               "name": "color",
               "type": {
-                "text": "'' | 'inherit'"
+                "text": "'content' | 'inherit'"
               },
-              "default": "''",
+              "default": "'content'",
               "attribute": "color",
               "reflects": true
             },
@@ -4692,11 +4692,11 @@
             {
               "name": "color",
               "type": {
-                "text": "'' | 'inherit'"
+                "text": "'content' | 'inherit'"
               },
-              "default": "''",
+              "default": "'content'",
               "fieldName": "color",
-              "description": "'inherit' lets all text follow the color of the surface (for colored areas such as the filled categories). Links stay underlined as an affordance; secondary text (figcaption) gets the same color at a lowered opacity. Known v1 gaps: inline code, mark, tables and hr keep their own surfaces. Empty = the default content colors."
+              "description": "'content' (the default) takes the system's own content colors, each element its own. 'inherit' lets all text follow the color of the surface instead (for colored areas such as the filled categories). Links stay underlined as an affordance; secondary text (figcaption) gets the same color at a lowered opacity. Known v1 gaps: inline code, mark, tables and hr keep their own surfaces."
             },
             {
               "name": "translations",
@@ -4941,7 +4941,7 @@
               "type": {
                 "text": "Color"
               },
-              "default": "'default'",
+              "default": "'content'",
               "attribute": "color",
               "reflects": true
             },
@@ -4989,9 +4989,9 @@
               "type": {
                 "text": "Color"
               },
-              "default": "'default'",
+              "default": "'content'",
               "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."
+              "description": "Text color: 'content' (the default) | 'secondary' | 'accent' | 'success' | 'warning' | 'critical' | 'inherit'. 'content' and 'secondary' follow the surrounding content channel; 'inherit' takes the color it inherits, for text on a painted surface."
             },
             {
               "name": "horizontal-alignment",
@@ -5061,7 +5061,7 @@
               "type": {
                 "text": "TitleColor"
               },
-              "default": "''",
+              "default": "'content'",
               "attribute": "color",
               "reflects": true
             }
@@ -5081,9 +5081,9 @@
               "type": {
                 "text": "TitleColor"
               },
-              "default": "''",
+              "default": "'content'",
               "fieldName": "color",
-              "description": "'inherit' lets the title follow the text color of the surface (for colored areas such as the filled categories); overline and subtitle get the same color at a lowered opacity. Empty = the default content colors."
+              "description": "'content' (the default) takes the system's own content colors. 'inherit' lets the title follow the text color of the surface instead (for colored areas such as the filled categories); overline and subtitle get the same color at a lowered opacity."
             }
           ],
           "superclass": {
@@ -5383,7 +5383,7 @@
               "type": {
                 "text": "Timing"
               },
-              "default": "'default'",
+              "default": "'delay'",
               "attribute": "timing",
               "reflects": true
             }
@@ -5421,9 +5421,9 @@
               "type": {
                 "text": "Timing"
               },
-              "default": "'default'",
+              "default": "'delay'",
               "fieldName": "timing",
-              "description": "When the tooltip appears on hover: 'instant' — right away, without a show delay. 'default' — after the standard show delay (700ms). 'never' — the tooltip is never shown; hover and focus events are ignored, aria-describedby is suppressed, and a tooltip that is already visible disappears. The hide delay and the touch suppression stay in force under every value. A focus trigger is always instant."
+              "description": "When the tooltip appears on hover: 'instant' — right away, without a show delay. 'delay' (the default) — after the standard show delay (700ms). 'never' — the tooltip is never shown; hover and focus events are ignored, aria-describedby is suppressed, and a tooltip that is already visible disappears. The hide delay and the touch suppression stay in force under every value. A focus trigger is always instant."
             }
           ],
           "superclass": {
@@ -16420,30 +16420,6 @@
           ],
           "description": "The sentinels a set of groups wants, in clean offsets (start before the first\nchar, end after the last), filtered by the guard. Positions may repeat when two\ngroups touch (end of one, start of the next)."
         },
-        {
-          "kind": "function",
-          "name": "buildDesiredDoc",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "cleanText",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "desired",
-              "type": {
-                "text": "DesiredSentinel[]"
-              }
-            }
-          ],
-          "description": "Build the desired doc text: `cleanText` with a sentinel inserted at each desired\nposition (multiplicity honoured for touching groups)."
-        },
         {
           "kind": "function",
           "name": "reconcileSentinels",
@@ -16473,7 +16449,7 @@
               }
             }
           ],
-          "description": "Minimal changes (in current-doc coords) to turn `doc` into a document that holds\nexactly the sentinels the groups want — touching only sentinel characters, never\nthe real text. `doc` and the target share the same clean text, so a two-pointer\nwalk yields sentinel-only inserts/deletes."
+          "description": "Minimal changes (in current-doc coords) to turn `doc` into a document that holds\nexactly the sentinels the groups want — touching only sentinel characters, never\nthe real text. One walk over `doc`, comparing the sentinel run at each clean\nposition with the number wanted there. Building the target document first would\ncost a second copy of the text on every edit."
         },
         {
           "kind": "function",
@@ -16571,14 +16547,6 @@
             "module": "src/components/inputs/text-editor/text-editor.annotation-sentinels.ts"
           }
         },
-        {
-          "kind": "js",
-          "name": "buildDesiredDoc",
-          "declaration": {
-            "name": "buildDesiredDoc",
-            "module": "src/components/inputs/text-editor/text-editor.annotation-sentinels.ts"
-          }
-        },
         {
           "kind": "js",
           "name": "reconcileSentinels",
@@ -16740,7 +16708,7 @@
           "type": {
             "text": "TextEditorActiveFormats"
           },
-          "default": "{ bold: false, italic: false, inlineCode: false, codeBlock: false, strikethrough: false, link: false, bulletList: false, orderedList: false, quote: false, heading: 0, }"
+          "default": "{ bold: false, italic: false, inlineCode: false, codeBlock: false, strikethrough: false, link: false, bulletList: false, orderedList: false, taskList: false, quote: false, heading: 0, }"
         },
         {
           "kind": "function",
@@ -16770,7 +16738,7 @@
               }
             }
           ],
-          "description": "Wrap (or, if already wrapped, unwrap) each selection range with `marker`."
+          "description": "Wrap each selection range with `marker`, or unwrap it when it is already\nwrapped. A caret at the very end of the wrapped text steps out of the run\ninstead: bold, type, bold ends with the caret after the bold, ready for the\nnext word, not with the bold undone."
         },
         {
           "kind": "function",
@@ -16837,6 +16805,24 @@
             }
           ]
         },
+        {
+          "kind": "function",
+          "name": "toggleTaskList",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "view",
+              "type": {
+                "text": "EditorView"
+              }
+            }
+          ],
+          "description": "Turn the selected lines into GFM task items (`- [ ] `), or back into plain\nbullets when they all are tasks already. A bullet or numbered item keeps its\nindent and becomes a task; toggling off leaves a bullet rather than bare text,\nso the list survives and only the box goes. Checking a box is not this\ncommand's job."
+        },
         {
           "kind": "function",
           "name": "setList",
@@ -16855,7 +16841,7 @@
             {
               "name": "type",
               "type": {
-                "text": "'none' | 'bullet' | 'ordered'"
+                "text": "ListType"
               }
             }
           ],
@@ -17066,6 +17052,14 @@
             "module": "src/components/inputs/text-editor/text-editor.commands.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "toggleTaskList",
+          "declaration": {
+            "name": "toggleTaskList",
+            "module": "src/components/inputs/text-editor/text-editor.commands.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "setList",
@@ -17148,6 +17142,68 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/inputs/text-editor/text-editor.cursor.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "drawnAssoc",
+          "return": {
+            "type": {
+              "text": "-1 | 1"
+            }
+          },
+          "parameters": [
+            {
+              "name": "view",
+              "type": {
+                "text": "EditorView"
+              }
+            },
+            {
+              "name": "head",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "assoc",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "The side the caret is drawn on at `head`: 1 unless the two sides are\ngenuinely apart and a hint, or else the arrival direction, says \"before\"."
+        },
+        {
+          "kind": "variable",
+          "name": "stableCursor",
+          "type": {
+            "text": "Extension"
+          },
+          "default": "[cursorLayer, pointerTracker, stepOverKeymap, typePastBadge, theme]"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "drawnAssoc",
+          "declaration": {
+            "name": "drawnAssoc",
+            "module": "src/components/inputs/text-editor/text-editor.cursor.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "stableCursor",
+          "declaration": {
+            "name": "stableCursor",
+            "module": "src/components/inputs/text-editor/text-editor.cursor.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/inputs/text-editor/text-editor.drag.ts",
@@ -17185,6 +17241,131 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/inputs/text-editor/text-editor.emphasis.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "EMPHASIS_MARKERS",
+          "type": {
+            "text": "ReadonlyMap<string, string>"
+          },
+          "default": "new Map([ ['StrongEmphasis', '**'], ['Emphasis', '*'], ['Strikethrough', '~~'], ])",
+          "description": "The emphasis nodes that live by the flanking rules, with the marker the\neditor writes for them. Inline code is not among them: a code span keeps its\nwhitespace and never fails to close."
+        },
+        {
+          "kind": "variable",
+          "name": "holdEmphasis",
+          "description": "Starts a hold on markers just written around an empty selection: `****`\nparses as nothing, so there is no node to remember, but what is typed\nbetween them is meant to be bold."
+        },
+        {
+          "kind": "variable",
+          "name": "heldEmphasisField",
+          "description": "The emphasis the caret is in: the tree's own while it parses, and the held\none, mapped along through edits, once it does not. Null outside any."
+        },
+        {
+          "kind": "function",
+          "name": "repairChangesFor",
+          "return": {
+            "type": {
+              "text": "ChangeSpec[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "state",
+              "type": {
+                "text": "EditorState"
+              }
+            },
+            {
+              "name": "held",
+              "type": {
+                "text": "HeldEmphasis"
+              }
+            }
+          ],
+          "description": "The changes that move edge whitespace out of `held`, for a command that\nsteps out of the run itself. Empty when there is nothing to move."
+        },
+        {
+          "kind": "function",
+          "name": "repairHeldEmphasis",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "view",
+              "type": {
+                "text": "EditorView"
+              }
+            }
+          ],
+          "description": "Ends a hold at once, for a blur. The display must be right while the editor\nis unfocused, and the value it commits must be markdown that renders the way\nit looked."
+        },
+        {
+          "kind": "variable",
+          "name": "heldEmphasis",
+          "type": {
+            "text": "Extension"
+          },
+          "default": "[heldEmphasisField, repairOnRelease]"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EMPHASIS_MARKERS",
+          "declaration": {
+            "name": "EMPHASIS_MARKERS",
+            "module": "src/components/inputs/text-editor/text-editor.emphasis.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "holdEmphasis",
+          "declaration": {
+            "name": "holdEmphasis",
+            "module": "src/components/inputs/text-editor/text-editor.emphasis.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "heldEmphasisField",
+          "declaration": {
+            "name": "heldEmphasisField",
+            "module": "src/components/inputs/text-editor/text-editor.emphasis.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "repairChangesFor",
+          "declaration": {
+            "name": "repairChangesFor",
+            "module": "src/components/inputs/text-editor/text-editor.emphasis.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "repairHeldEmphasis",
+          "declaration": {
+            "name": "repairHeldEmphasis",
+            "module": "src/components/inputs/text-editor/text-editor.emphasis.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "heldEmphasis",
+          "declaration": {
+            "name": "heldEmphasis",
+            "module": "src/components/inputs/text-editor/text-editor.emphasis.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/inputs/text-editor/text-editor.links.ts",
@@ -17242,6 +17423,54 @@
             }
           ],
           "description": "Adds an \"open link\" badge after every real link in the viewport. `label` builds\nthe badge's accessible label from the destination, so the host can localize it."
+        },
+        {
+          "kind": "function",
+          "name": "linkEndsAt",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "state",
+              "type": {
+                "text": "EditorState"
+              }
+            },
+            {
+              "name": "pos",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "Whether a link with a badge ends at `pos`: a `[text](url)` link or a bare\nURL, with a destination the badge accepts. The same tests as `buildBadges`,\nso a mention (a link too, but without a badge) is not one."
+        },
+        {
+          "kind": "function",
+          "name": "bareUrlEndsAt",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "state",
+              "type": {
+                "text": "EditorState"
+              }
+            },
+            {
+              "name": "pos",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "Whether a bare URL with a badge ends at `pos`: the link that text typed at\nits end extends, unlike a `[text](url)` link, which ends at its `)`."
         }
       ],
       "exports": [
@@ -17268,6 +17497,22 @@
             "name": "linkOpenBadge",
             "module": "src/components/inputs/text-editor/text-editor.links.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "linkEndsAt",
+          "declaration": {
+            "name": "linkEndsAt",
+            "module": "src/components/inputs/text-editor/text-editor.links.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "bareUrlEndsAt",
+          "declaration": {
+            "name": "bareUrlEndsAt",
+            "module": "src/components/inputs/text-editor/text-editor.links.ts"
+          }
         }
       ]
     },
@@ -17281,7 +17526,7 @@
           "type": {
             "text": "Extension"
           },
-          "default": "[ markdown({ extensions: GFM }), markDecorationPlugin, hangingIndentField, // Prec.highest keeps the mention chip the innermost decoration, so it nests inside // a heading/bold run and inherits its font (scaling with it) instead of sitting at // the base size as an outer sibling. Prec.highest(mentionChipField), mentionAtomicRanges, ]",
+          "default": "[ markdown({ extensions: GFM }), markDecorationPlugin, heldEmphasis, hangingIndentField, // Prec.highest keeps the mention chip the innermost decoration, so it nests inside // a heading/bold run and inherits its font (scaling with it) instead of sitting at // the base size as an outer sibling. Prec.highest(mentionChipField), mentionAtomicRanges, ]",
           "description": "Markdown language (with GFM) plus the hybrid inline-styling decorations."
         },
         {
@@ -17396,6 +17641,36 @@
       "kind": "javascript-module",
       "path": "src/components/inputs/text-editor/text-editor.mentions.ts",
       "declarations": [
+        {
+          "kind": "function",
+          "name": "typeaheadQueryAt",
+          "return": {
+            "type": {
+              "text": "{ from: number; to: number; query: string; trigger: string } | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "state",
+              "type": {
+                "text": "EditorState"
+              }
+            },
+            {
+              "name": "pos",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "triggers",
+              "type": {
+                "text": "readonly string[]"
+              }
+            }
+          ],
+          "description": "The typeahead query at `pos` for one of `triggers`, or null when the text\nbefore the caret is not one. `from` is the trigger, `query` the typed text\nwithout it. Both the completion source and the reopen-on-delete path go\nthrough this, so they cannot disagree about what counts as a query."
+        },
         {
           "kind": "variable",
           "name": "MENTION_HREF_PREFIX",
@@ -17417,12 +17692,30 @@
             {
               "name": "candidate",
               "type": {
-                "text": "MentionCandidate"
+                "text": "TypeaheadCandidate"
               }
             }
           ],
           "description": "The markdown-compatible token stored for a mention (degrades to a plain link).\nThe label's link-text delimiters are backslash-escaped and the id is\npercent-encoded, so a crafted candidate (e.g. a display name sourced from user\ndata) can't break out of `[label](user:id)` into arbitrary markdown — a stray\n`]` or `)` would otherwise start a second, attacker-shaped link. The render\nlayer reverses both via `unescapeMentionLabel` / `decodeMentionId`."
         },
+        {
+          "kind": "function",
+          "name": "mentionInsert",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "candidate",
+              "type": {
+                "text": "TypeaheadCandidate"
+              }
+            }
+          ],
+          "description": "What the built-in mention writes: the token and a space to go on typing."
+        },
         {
           "kind": "function",
           "name": "unescapeMentionLabel",
@@ -17461,7 +17754,7 @@
         },
         {
           "kind": "function",
-          "name": "mentions",
+          "name": "typeaheads",
           "return": {
             "type": {
               "text": "Extension"
@@ -17469,21 +17762,30 @@
           },
           "parameters": [
             {
-              "name": "getSource",
+              "name": "getTypeaheads",
               "type": {
-                "text": "() => MentionSource | undefined"
+                "text": "() => readonly Typeahead[]"
               }
             },
             {
-              "name": "onInsert",
+              "name": "onChoose",
               "type": {
-                "text": "(detail: MentionInsertedDetail) => void"
+                "text": "(choice: TypeaheadChoice) => void"
               }
             }
-          ]
+          ],
+          "description": "The typeaheads. `getTypeaheads` is read on every keystroke, so the editor can\nhand over its current lists; choosing a candidate writes what the list's\n`insert` says and calls `onChoose`. Without lists it is inert."
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "typeaheadQueryAt",
+          "declaration": {
+            "name": "typeaheadQueryAt",
+            "module": "src/components/inputs/text-editor/text-editor.mentions.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "MENTION_HREF_PREFIX",
@@ -17500,6 +17802,14 @@
             "module": "src/components/inputs/text-editor/text-editor.mentions.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "mentionInsert",
+          "declaration": {
+            "name": "mentionInsert",
+            "module": "src/components/inputs/text-editor/text-editor.mentions.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "unescapeMentionLabel",
@@ -17518,9 +17828,9 @@
         },
         {
           "kind": "js",
-          "name": "mentions",
+          "name": "typeaheads",
           "declaration": {
-            "name": "mentions",
+            "name": "typeaheads",
             "module": "src/components/inputs/text-editor/text-editor.mentions.ts"
           }
         }
@@ -17550,8 +17860,7 @@
         },
         {
           "kind": "variable",
-          "name": "orderedListRenumber",
-          "description": "Renumbers ordered lists in the same transaction as the edit that disturbed them,\nso it's one atomic (single-undo) step and the caret/selection maps through it."
+          "name": "orderedListRenumber"
         }
       ],
       "exports": [
@@ -17573,13 +17882,109 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/inputs/text-editor/text-editor.syntax.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "enclosingNode",
+          "return": {
+            "type": {
+              "text": "SyntaxNode | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "state",
+              "type": {
+                "text": "EditorState"
+              }
+            },
+            {
+              "name": "pos",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "side",
+              "type": {
+                "text": "-1 | 0 | 1"
+              }
+            },
+            {
+              "name": "match",
+              "type": {
+                "text": "(node: SyntaxNode) => boolean"
+              }
+            }
+          ],
+          "description": "The innermost node at `pos` that `match` accepts, looking outward from there.\n`side` decides which node a position between two of them belongs to: -1 the\none that ends there, 1 the one that starts there. Null when none matches."
+        },
+        {
+          "kind": "function",
+          "name": "enclosingNamed",
+          "return": {
+            "type": {
+              "text": "SyntaxNode | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "state",
+              "type": {
+                "text": "EditorState"
+              }
+            },
+            {
+              "name": "pos",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "side",
+              "type": {
+                "text": "-1 | 0 | 1"
+              }
+            },
+            {
+              "name": "names",
+              "type": {
+                "text": "string | ReadonlySet<string>"
+              }
+            }
+          ],
+          "description": "`enclosingNode` for the common case: a node that goes by one of these names."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "enclosingNode",
+          "declaration": {
+            "name": "enclosingNode",
+            "module": "src/components/inputs/text-editor/text-editor.syntax.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "enclosingNamed",
+          "declaration": {
+            "name": "enclosingNamed",
+            "module": "src/components/inputs/text-editor/text-editor.syntax.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/inputs/text-editor/text-editor.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A hybrid markdown editor built on CodeMirror 6 (via NLDDCodeMirrorElement): the document stays plain markdown text, but formatting is shown inline (bold is bold, headings are larger, links are colored) while the syntax markers stay visible, only dimmed — the iA Writer / Kirby approach. No WYSIWYG tree, so the data stays portable. Default `variant=\"simple\"` is bare (no frame, no focus ring) for use inside a composition (e.g. a message field) that owns its chrome and focus; the caret is a prominent accent. `variant=\"input-field\"` adds a framed surface + focus Headless: there is no built-in toolbar. A consumer drives formatting via the command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/ toggleHeading/toggleBulletList/toggleQuote/toggleLink/runCommand to toggle, and setHeading/setList for picker-style \"set\" semantics), reads the active formats with getState(), listens to the nldd-text-editor-state event to render toggle states, and forwards padding clicks with focusFromPoint(). Cmd/Ctrl+B/I/E/K are bound out of the box. Commands keep focus on the editor. An @-mention typeahead (mentionSource) collapses to an atomic token, and a W3C-style annotation overlay (annotations) marks ranges with a dashed underline, light tint and a count badge without touching the underlying text.",
+          "description": "A hybrid markdown editor built on CodeMirror 6 (via NLDDCodeMirrorElement): the document stays plain markdown text, but formatting is shown inline (bold is bold, headings are larger, links are colored) while the syntax markers stay visible, only dimmed — the iA Writer / Kirby approach. No WYSIWYG tree, so the data stays portable. Default `variant=\"simple\"` is bare (no frame, no focus ring) for use inside a composition (e.g. a message field) that owns its chrome and focus; the caret is a prominent accent. `variant=\"input-field\"` adds a framed surface + focus Headless: there is no built-in toolbar. A consumer drives formatting via the command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/ toggleHeading/toggleBulletList/toggleTaskList/toggleQuote/toggleLink/runCommand to toggle, and setHeading/setList for picker-style \"set\" semantics), reads the active formats with getState(), listens to the nldd-text-editor-state event to render toggle states, and forwards padding clicks with focusFromPoint(). Cmd/Ctrl+B/I/E/K are bound out of the box. Commands keep focus on the editor. An inline toggle wraps the selected text (whitespace at its edges stays outside the markers), unwraps a run the caret is in, and with the caret at the very end of a run steps out of it. Bold that a typed space has broken (`**woord **`) keeps its styling while the caret is inside; the space moves outside the markers when the caret leaves. insertAtCursor(text) puts text at the caret and replaceRange(from, to, text) writes at the same clean offsets getSelection() reads. An @-mention typeahead (mentionSource) collapses to an atomic token, further typeahead lists on their own trigger (typeaheads) write what you tell them to, and a W3C-style annotation overlay (annotations) marks ranges with a dashed underline, light tint and a count badge without touching the underlying text.",
           "name": "NLDDTextEditor",
           "members": [
             {
@@ -17725,6 +18130,15 @@
               },
               "description": "Consumer-supplied"
             },
+            {
+              "kind": "field",
+              "name": "typeaheads",
+              "type": {
+                "text": "Typeahead[]"
+              },
+              "default": "[]",
+              "description": "Your own typeahead lists next to the"
+            },
             {
               "kind": "field",
               "name": "annotatable",
@@ -17846,6 +18260,16 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "toggleTaskList",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Turn the selected lines into GFM task items (`- [ ] `), or back into\nbullets when they all are tasks. Checking a box is not a command."
+            },
             {
               "kind": "method",
               "name": "setList",
@@ -17858,11 +18282,11 @@
                 {
                   "name": "type",
                   "type": {
-                    "text": "'none' | 'bullet' | 'ordered'"
+                    "text": "ListType"
                   }
                 }
               ],
-              "description": "Set the list type, replacing any existing list ('none' strips it) — for an\nexclusive list picker."
+              "description": "Set the list type, replacing any existing list ('none' strips it) — for an\nexclusive list picker. A task keeps its checkbox only within its own type:\nswitching to bullet or ordered takes the box along with the marker."
             },
             {
               "kind": "method",
@@ -17977,6 +18401,54 @@
               },
               "description": "Paste clipboard text at the caret, replacing any selection. Sentinels that\nrode in from another editor are stripped. When the text matches a cut made in\nthis editor, its annotations travel with it (a move); otherwise it's plain\ntext. No-op when the clipboard is empty or unreadable."
             },
+            {
+              "kind": "method",
+              "name": "insertAtCursor",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Puts `text` at the caret, in place of the selection when there is one, and\nleaves the caret after it, with focus on the editor. Plain text: markdown\nin it stays as written and is styled like anything typed. Does nothing on\na read-only editor."
+            },
+            {
+              "kind": "method",
+              "name": "replaceRange",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "from",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "to",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Replaces the text between two offsets with `text`, and leaves the caret\nafter it. The offsets are CLEAN, the same coordinates `getSelection()` and\nthe annotations speak, so a consumer can act on what it read there. Both\nare clamped into the text, and `to` below `from` counts as an insert at\n`from`. Does nothing on a read-only editor."
+            },
             {
               "kind": "method",
               "name": "runCommand",
@@ -18000,7 +18472,7 @@
                   }
                 }
               ],
-              "description": "Escape hatch: run a command by name (bold, italic, inlineCode,\nstrikethrough, bulletList, quote, heading [payload: level], link\n[payload: href], copy, cut, paste)."
+              "description": "Escape hatch: run a command by name, so a toolbar can carry the name in its\nmarkup instead of a method reference. Every method above is reachable.\n\nToggles (no payload): `bold`, `italic`, `inlineCode`, `strikethrough`,\n`bulletList`, `taskList`, `quote`, `codeBlock`, `heading` (payload: the\nlevel, default 1), `link` (payload: the href).\nSetters: `setHeading` (payload: the level, 0 for a paragraph), `setList`\n(payload: 'none' | 'bullet' | 'ordered' | 'task').\nThe rest: `indent`, `outdent`, `undo`, `redo`, `copy`, `cut`, `paste`.\n\nAn unknown name warns rather than doing nothing quietly: a typo in a\ntoolbar is otherwise invisible."
             },
             {
               "kind": "method",
@@ -18236,7 +18708,11 @@
             },
             {
               "name": "nldd-text-editor-mention",
-              "description": "When an @-mention is inserted (detail: MentionInsertedDetail with id, label, from, to)"
+              "description": "When an @-mention is inserted (detail: MentionInsertedDetail with id, text, from, to; clean offsets, like getSelection())"
+            },
+            {
+              "name": "nldd-text-editor-typeahead",
+              "description": "When a candidate from one of the `typeaheads` is chosen (detail: TypeaheadChosenDetail with trigger, candidate, from, to; clean offsets)"
             },
             {
               "name": "nldd-text-editor-annotation-click",
@@ -18407,6 +18883,14 @@
             "module": "./text-editor.commands.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "ListType",
+          "declaration": {
+            "name": "ListType",
+            "module": "./text-editor.commands.js"
+          }
+        },
         {
           "kind": "js",
           "name": "TextEditorState",
@@ -18447,6 +18931,38 @@
             "module": "./text-editor.mentions.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "Typeahead",
+          "declaration": {
+            "name": "Typeahead",
+            "module": "./text-editor.mentions.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TypeaheadCandidate",
+          "declaration": {
+            "name": "TypeaheadCandidate",
+            "module": "./text-editor.mentions.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TypeaheadSource",
+          "declaration": {
+            "name": "TypeaheadSource",
+            "module": "./text-editor.mentions.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TypeaheadChosenDetail",
+          "declaration": {
+            "name": "TypeaheadChosenDetail",
+            "module": "./text-editor.mentions.js"
+          }
+        },
         {
           "kind": "js",
           "name": "Annotation",
@@ -21866,7 +22382,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A container for displaying collections of items. Supports grid, stack, and horizontal scroll layouts. In grid and stack modes, items are paginated via a load-more button. In horizontal scroll, the prev/next controls and the edge fade appear only when the items overflow the container. With `lazy-load`, the next items are automatically loaded when the load-more button comes into view.",
+          "description": "A container for displaying collections of items. Supports grid, stack, lanes and horizontal scroll layouts. In grid and stack modes, items are paginated via a load-more button. In horizontal scroll, the prev/next controls and the edge fade appear only when the items overflow the container. With `lazy-load`, the next items are automatically loaded when the load-more button comes into view.",
           "name": "NLDDCollection",
           "members": [
             {
@@ -21921,12 +22437,39 @@
               "kind": "field",
               "name": "gap",
               "type": {
-                "text": "string | undefined"
+                "text": "SpacingSize | undefined"
               },
-              "description": "Custom gap between items (any CSS length, e.g. '8px'). Overrides the\nresponsive default at every breakpoint. Unset keeps the default.",
+              "description": "A step of the spacing scale, overriding the responsive default at every\nbreakpoint. Unset keeps the default.",
               "attribute": "gap",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "smGap",
+              "type": {
+                "text": "SpacingSize | undefined"
+              },
+              "attribute": "sm-gap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "mdGap",
+              "type": {
+                "text": "SpacingSize | undefined"
+              },
+              "attribute": "md-gap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "lgGap",
+              "type": {
+                "text": "SpacingSize | undefined"
+              },
+              "attribute": "lg-gap",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "translations",
@@ -21951,7 +22494,7 @@
               },
               "default": "'grid'",
               "fieldName": "layout",
-              "description": "Layout mode: 'grid' | 'stack' | 'horizontal-scroll' (default: 'grid')"
+              "description": "Layout mode: 'grid' | 'stack' | 'lanes' | 'horizontal-scroll' (default: 'grid')"
             },
             {
               "name": "show-load-more",
@@ -21986,16 +22529,40 @@
                 "text": "string | undefined"
               },
               "fieldName": "itemWidth",
-              "description": "Preferred width for each item (e.g. '280px', '20rem'). In grid layout used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width."
+              "description": "Preferred width for each item (e.g. '280px', '20rem'). In grid and lanes layouts used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width."
             },
             {
               "name": "gap",
               "type": {
-                "text": "string | undefined"
+                "text": "SpacingSize | undefined"
               },
-              "description": "Custom gap between items (any CSS length, e.g. '8px'). Overrides the responsive default at every breakpoint; unset keeps the default.",
+              "description": "Gap between items, as a step of the spacing scale ('0', '2', '4', '6', '8', '10', '12', '16', '20', '24', '28', '32', '40', '44', '48', '56', '64', '80', '96'). Overrides the responsive default at every breakpoint; unset keeps the default.",
               "fieldName": "gap"
             },
+            {
+              "name": "sm-gap",
+              "type": {
+                "text": "SpacingSize | undefined"
+              },
+              "fieldName": "smGap",
+              "description": "Gap at sm, overriding `gap` there"
+            },
+            {
+              "name": "md-gap",
+              "type": {
+                "text": "SpacingSize | undefined"
+              },
+              "fieldName": "mdGap",
+              "description": "Gap at md, overriding `gap` there"
+            },
+            {
+              "name": "lg-gap",
+              "type": {
+                "text": "SpacingSize | undefined"
+              },
+              "fieldName": "lgGap",
+              "description": "Gap at lg, overriding `gap` there"
+            },
             {
               "name": "translations",
               "type": {
@@ -22049,7 +22616,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A simple layout primitive: pick a layout mode, give it a gap, optionally align contents, and add padding. Padding can be set for all sides, per axis (inline/block), or per individual side. Specificity: per side > per axis > all sides. Responsive padding and gap have sm/md/lg variants. Each variant emits both an @media (viewport) and @container (layout-container) query. When inside a layout-container the @container query wins; otherwise the @media query provides the viewport-based fallback. Layout modes: - `stack` (default): block items, stacked vertically. The \"what you expect from DOM flow\" mode. - `row`: flex row, no wrapping. Items shrink or overflow. - `wrap`: flex row, items wrap to new lines. - `grid`: CSS grid, auto-fit columns at min 280px wide. - `columns`: CSS multi-column flow, 280px minimum column width, items don't split across column breaks. Alignment maps to the layout's natural axis: - `stack`: vertical = main-axis (justify-content), horizontal = cross-axis (align-items) - `row` / `wrap`: horizontal = main-axis, vertical = cross-axis - `grid`: horizontal = justify-items, vertical = align-items (per cell) - `columns`: alignment props have no effect (CSS multicol doesn't expose alignment) Item order is set per-child via attributes on the slotted children themselves: `<child order=\"3\">` for a fixed position, or `<child sm-order=\"N\">` / `<child md-order=\"N\">` / `<child lg-order=\"N\">` to override per breakpoint (resolved against THIS container's width via @container queries, same scope as the responsive padding/gap). The container observes slot changes and child attribute mutations and bridges these to `--_slot-order` / `--_slot-sm-order` / etc. custom properties on each child's inline style, which the container's CSS then reads via `::slotted(*)` inside @container queries. Cascade: `sm-order` falls back to `order` falls back to `0` at sm (and analogously for md/lg). No-op for `layout=\"columns\"` (CSS multicol has no per-item ordering hook). The `column-count` attribute (1-8) forces an exact column count for `layout=\"grid\"` (overrides auto-fit) and `layout=\"columns\"` (overrides the natural width-driven count). `sm-column-count` / `md-column-count` / `lg-column-count` resolve against this container's OWN width via an `@container (...)` query on the host — not against the viewport. That lets a footer in a narrow sidebar choose its own column count independent of the surrounding page width. `layout=\"lanes\"` packs items into balanced columns using native CSS grid lanes where supported, falling back to CSS multicol (column-order) elsewhere. CSS-only, no JS. Honours `gap` on both axes and `column-count`.",
+          "description": "A simple layout primitive: pick a layout mode, give it a gap, optionally align contents, and add padding. Padding can be set for all sides, per axis (inline/block), or per individual side. Specificity: per side > per axis > all sides. Responsive padding and gap have sm/md/lg variants. Each variant emits both an @media (viewport) and @container (layout-container) query. When inside a layout-container the @container query wins; otherwise the @media query provides the viewport-based fallback. Layout modes: - `stack` (default): block items, stacked vertically. The \"what you expect from DOM flow\" mode. - `row`: flex row, no wrapping. Items shrink or overflow. - `wrap`: flex row, items wrap to new lines. - `grid`: CSS grid, auto-fit columns at min 280px wide. - `columns`: CSS multi-column flow, 280px minimum column width, items don't split across column breaks. Alignment maps to the layout's natural axis: - `stack`: vertical = main-axis (justify-content), horizontal = cross-axis (align-items) - `row` / `wrap`: horizontal = main-axis, vertical = cross-axis - `grid`: horizontal = justify-items, vertical = align-items (per cell) - `columns`: alignment props have no effect (CSS multicol doesn't expose alignment) Item order is set per-child via attributes on the slotted children themselves: `<child order=\"3\">` for a fixed position, or `<child sm-order=\"N\">` / `<child md-order=\"N\">` / `<child lg-order=\"N\">` to override per breakpoint (resolved against THIS container's width via @container queries, same scope as the responsive padding/gap). The container observes slot changes and child attribute mutations and bridges these to `--_slot-order` / `--_slot-sm-order` / etc. custom properties on each child's inline style, which the container's CSS then reads via `::slotted(*)` inside @container queries. Cascade: `sm-order` falls back to `order` falls back to `0` at sm (and analogously for md/lg). No-op for `layout=\"columns\"` (CSS multicol has no per-item ordering hook). The `column-count` attribute (1-8) forces an exact column count for `layout=\"grid\"` (overrides auto-fit) and `layout=\"columns\"` (overrides the natural width-driven count). `sm-column-count` / `md-column-count` / `lg-column-count` resolve against this container's OWN width via an `@container (...)` query on the host — not against the viewport. That lets a footer in a narrow sidebar choose its own column count independent of the surrounding page width. `layout=\"lanes\"` packs items into balanced columns using native CSS grid lanes where supported, falling back to CSS multicol (column-order) elsewhere. CSS-only, no JS. Honours `gap` on both axes and `column-count`. Note that nldd-collection's lanes falls back to its own grid rather than to multicol: that component pages, and multicol redistributes the whole set every time load-more adds to it.",
           "name": "NLDDContainer",
           "members": [
             {
@@ -25104,7 +25671,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{ background: { control: { type: 'select' }, options: ['inherit', 'base', 'tinted'], description: 'Oppervlak: \"inherit\" (transparant) toont het oppervlak van de ouder; \"base\"/\"tinted\" tekenen een oppervlak en cascaden het naar afstammelingen', table: { defaultValue: { summary: 'inherit' } }, }, scheme: { control: { type: 'select' }, options: ['inherit', 'light', 'dark', 'inverted'], description: 'Kleurschema: \"inherit\" erft; \"inverted\" is het tegenovergestelde van het omliggende paginaschema', table: { defaultValue: { summary: 'inherit' } }, }, width: { control: 'text', description: 'Body max-width: \"full\" verwijdert de constraint, of een CSS length (bv. \"480px\") overschrijft de default max-width', table: { defaultValue: { summary: '' } }, }, height: { control: 'text', description: 'Minimale sectiehoogte (CSS length, bv. \"400px\", \"100dvh\") — net als width op de body-max-width, mapt height op min-height van de host', table: { defaultValue: { summary: '' } }, }, 'padding-block': paddingControl('Block (boven+onder) padding-override (token 0–96; \"0\" verwijdert de padding)'), 'padding-top': paddingControl('Override van alleen de bovenpadding'), 'padding-bottom': paddingControl('Override van alleen de onderpadding'), 'sm-padding-block': paddingControl('Block-padding op sm (≤640px)'), 'sm-padding-top': paddingControl('Bovenpadding op sm (≤640px)'), 'sm-padding-bottom': paddingControl('Onderpadding op sm (≤640px)'), 'md-padding-block': paddingControl('Block-padding op md (641–1007px)'), 'md-padding-top': paddingControl('Bovenpadding op md (641–1007px)'), 'md-padding-bottom': paddingControl('Onderpadding op md (641–1007px)'), 'lg-padding-block': paddingControl('Block-padding op lg (≥1008px)'), 'lg-padding-top': paddingControl('Bovenpadding op lg (≥1008px)'), 'lg-padding-bottom': paddingControl('Onderpadding op lg (≥1008px)'), }",
+          "default": "{ background: { control: { type: 'select' }, options: ['inherit', 'base', 'tinted'], description: 'Oppervlak: \"inherit\" (transparant) toont het oppervlak van de ouder; \"base\"/\"tinted\" tekenen een oppervlak en cascaden het naar afstammelingen', table: { defaultValue: { summary: 'inherit' } }, }, scheme: { control: { type: 'select' }, options: ['inherit', 'light', 'dark', 'inverted'], description: 'Kleurschema: \"inherit\" erft; \"inverted\" is het tegenovergestelde van het omliggende paginaschema', table: { defaultValue: { summary: 'inherit' } }, }, width: { control: 'text', description: 'Body max-width: \"full\" verwijdert de constraint, of een CSS length (bv. \"480px\") overschrijft de default max-width', }, height: { control: 'text', description: 'Minimale sectiehoogte (CSS length, bv. \"400px\", \"100dvh\") — net als width op de body-max-width, mapt height op min-height van de host', }, 'padding-block': paddingControl('Block (boven+onder) padding-override (token 0–96; \"0\" verwijdert de padding)'), 'padding-top': paddingControl('Override van alleen de bovenpadding'), 'padding-bottom': paddingControl('Override van alleen de onderpadding'), 'sm-padding-block': paddingControl('Block-padding op sm (≤640px)'), 'sm-padding-top': paddingControl('Bovenpadding op sm (≤640px)'), 'sm-padding-bottom': paddingControl('Onderpadding op sm (≤640px)'), 'md-padding-block': paddingControl('Block-padding op md (641–1007px)'), 'md-padding-top': paddingControl('Bovenpadding op md (641–1007px)'), 'md-padding-bottom': paddingControl('Onderpadding op md (641–1007px)'), 'lg-padding-block': paddingControl('Block-padding op lg (≥1008px)'), 'lg-padding-top': paddingControl('Bovenpadding op lg (≥1008px)'), 'lg-padding-bottom': paddingControl('Onderpadding op lg (≥1008px)'), }",
           "description": "Shared Storybook controls for the PageSectionMixin surface API\n(background, scheme, width, height and the 12 block-padding overrides).\nSpread into a section story's `argTypes` / `args`, and bind onto the host\nelement in `render` with the `pageSectionAttrs` directive."
         },
         {
@@ -26708,7 +27275,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A page layout with optional sticky header and footer. Without sticky-header, the host is the scroll container and the header is in normal flow. With sticky-header, the header becomes absolute and .page__scroll takes over scrolling. A ResizeObserver on the header sets padding-top on the scroll wrapper (only when not scrolled). In root-scroll mode (--context-scroll-mode: root, derived upstream by nldd-app-view) the page stops owning a scroller: the document scrolls and the sticky header/footer become position:sticky layers offset by --context-layer-top/bottom. The mode is read on connect/resize and reflected to [data-scroll] so the CSS can branch.",
+          "description": "A page layout with optional sticky header and footer. Without sticky-header, the host is the scroll container and the header is in normal flow. With sticky-header, the header becomes absolute and .page__scroll takes over scrolling. A ResizeObserver on the header sets padding-top on the scroll wrapper (only when not scrolled). In root-scroll mode (--context-scroll-mode: root, derived upstream by nldd-app-view) the page stops owning a scroller: the document scrolls and the sticky header/footer stick against the document, offset by --context-inset-top/bottom. The mode is read on connect/resize and reflected to [data-scroll] so the CSS can branch. The page passes those insets on to its own content, with its sticky header and footer added: anything sticky inside (an nldd-sidebar-section, a sticky table head) reads --context-inset-top / --context-inset-bottom and clears every bar above and below it without being told a number. The heights are measured, because a top title bar shrinks as you scroll past its anchor. While the page owns the scroller, only its own bars count: the chrome above the page sits outside that scroller and does not push sticky content down.",
           "name": "NLDDPage",
           "members": [
             {
@@ -27164,16 +27731,6 @@
               "attribute": "height",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "modeless",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "modeless",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "accessibleLabel",
@@ -27243,15 +27800,6 @@
               "description": "Custom height for bottom sheets (and for any sheet on sm viewports, where all placements collapse to bottom). Accepts: `'full'` (default — viewport minus top-inset, identical to omitting the attribute), `'fit-content'` (collapse to content size), or any CSS length/percentage (e.g. `'50dvh'`, `'480px'`, `'50%'`). Always clamped to `100dvh - top-inset` so the sheet can't extend past the dismiss-tap area. No effect on side sheets at md+.",
               "fieldName": "height"
             },
-            {
-              "name": "modeless",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "modeless",
-              "description": "Non-modal (no backdrop or focus lock); the sheet is modal by default"
-            },
             {
               "name": "accessible-label",
               "type": {
@@ -28128,19 +28676,9 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A floating window based on the native <dialog> element. Can be shown modal or modeless. Positionable through CSS values. No header of its own: consumers use nldd-page with a sticky header inside for a title bar.",
+          "description": "A floating window based on the native <dialog> element, positionable through CSS values. Always modal. No header of its own: consumers use nldd-page with a sticky header inside for a title bar.",
           "name": "NLDDWindow",
           "members": [
-            {
-              "kind": "field",
-              "name": "modeless",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "modeless",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "noLightDismiss",
@@ -28274,15 +28812,6 @@
             }
           ],
           "attributes": [
-            {
-              "name": "modeless",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "modeless",
-              "description": "Modeless (no backdrop or focus trap); the window is modal by default"
-            },
             {
               "name": "no-light-dismiss",
               "type": {
@@ -28922,7 +29451,7 @@
               "type": {
                 "text": "Color"
               },
-              "default": "'default'",
+              "default": "'content'",
               "attribute": "color",
               "reflects": true
             },
@@ -28987,9 +29516,9 @@
               "type": {
                 "text": "Color"
               },
-              "default": "'default'",
+              "default": "'content'",
               "fieldName": "color",
-              "description": "Color variant of the icon (default: 'default')"
+              "description": "Color variant of the icon (default: 'content')"
             },
             {
               "name": "icon",
@@ -29199,7 +29728,7 @@
               "type": {
                 "text": "Color"
               },
-              "default": "'default'",
+              "default": "'content'",
               "attribute": "color",
               "reflects": true
             },
@@ -29351,9 +29880,9 @@
               "type": {
                 "text": "Color"
               },
-              "default": "'default'",
+              "default": "'content'",
               "fieldName": "color",
-              "description": "Text color variant: 'default' | 'secondary' | 'accent' | 'success' | 'warning' | 'critical' (default: 'default'). All non-default/-secondary variants apply to all three text fields so the cell reads as a coherent state."
+              "description": "Text color variant: 'content' (the default) | 'secondary' | 'accent' | 'success' | 'warning' | 'critical'. All variants other than those two apply to all three text fields so the cell reads as a coherent state."
             },
             {
               "name": "width",
@@ -29808,7 +30337,7 @@
               "type": {
                 "text": "Color"
               },
-              "default": "'default'",
+              "default": "'content'",
               "attribute": "color",
               "reflects": true
             },
@@ -29970,9 +30499,9 @@
               "type": {
                 "text": "Color"
               },
-              "default": "'default'",
+              "default": "'content'",
               "fieldName": "color",
-              "description": "Text color variant (default: 'default'). `secondary` demotes the title to match the muted overline/supporting-text. `accent`, `success`, `warning` and `critical` tint all three regions so the cell reads as a coherent state."
+              "description": "Text color variant (default: 'content'). `secondary` demotes the title to match the muted overline/supporting-text. `accent`, `success`, `warning` and `critical` tint all three regions so the cell reads as a coherent state."
             },
             {
               "name": "width",
@@ -30512,6 +31041,17 @@
               "attribute": "checkbox",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "radio",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set, the whole row is one radio of a group. Ignored when href is set.",
+              "attribute": "radio",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -30519,7 +31059,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Checked state of a `checkbox` row. Toggled by the item on activation.",
+              "description": "Checked state of a `checkbox` or `radio` row. A checkbox row toggles it on\nactivation; a radio row only ever sets it, because picking the option you\nalready have is not a way to unpick it.",
               "attribute": "checked",
               "reflects": true
             },
@@ -30639,7 +31179,7 @@
           "events": [
             {
               "name": "change",
-              "description": "On a `checkbox` row after it toggles; detail: { checked: boolean }"
+              "description": "On a `checkbox` row after it toggles, and on a `radio` row when it becomes checked; detail: { checked: boolean }"
             }
           ],
           "attributes": [
@@ -30692,7 +31232,16 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Checked state of a `checkbox` row; the item toggles it on activation",
+              "description": "Makes the whole row one radio of a group: the action becomes a `role=\"radio\"` button carrying `aria-checked`, and activation sets `checked` (never clears it) and fires `change`. Put the rows in an `nldd-list type=\"radiogroup\"`, which is what makes them a set. Wins over `button`, loses to `href` and `checkbox`. The arrow keys move focus without checking, where a native radio group and `nldd-radio-button-group` check as they go: a row can carry more than a label, so stepping past one should not commit it.",
+              "name": "radio",
+              "default": "false",
+              "fieldName": "radio"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Checked state of a `checkbox` or `radio` row. A checkbox row toggles it on activation, a radio row only ever sets it",
               "name": "checked",
               "default": "false",
               "fieldName": "checked"
@@ -30799,7 +31348,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>`. - `form` — rows that are not actions themselves: the controls inside them are. A row of a label and a field, a switch, a menu button, or a value you cannot change at all. Semantically the same as `list` (`role=\"list\"`, `role=\"listitem\"`), and everything visual is unchanged; what falls away is the keyboard of a list you walk through. No arrow navigation, so no promise of it either, and no tab stop on the row: Tab goes straight to the controls, in source order, the way it does in any form. Rows that ARE actions (`href`, `button`, `checkbox`, or a segment) contradict that and warn in development. SwiftUI draws the same line between `List` and `Form`, for the same reason. - `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. A list you walk through 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. It follows the type, which you can see before you touch a key. - 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), and so are this row's once focus leaves the list, so tabbing back in lands on the row again. - Escape — out of a control the row holds, back onto the row. One level up, where Shift+Tab is one step back. On the row itself the list claims nothing, so Escape carries on to whatever holds the list, and a control showing a menu keeps the first press for closing that menu. While focus sits in a control a row holds, the list stands down: those keys are the control's, and a list that took them anyway would pull focus out of a combo box or a text field mid-word. What the row IS — its own link, button or segments — keeps answering here. Arrows move focus only; selection stays consumer-managed. Three types answer differently, and all three say so on screen before you touch a key: a listbox runs its keyboard from its search field, a reorderable list moves rows with the arrows, and a form has no rows to move between at all. 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.",
+          "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. - `radiogroup` — `role=\"radiogroup\"`, for a set of `nldd-list-item radio` rows: one choice, laid out as rows so each option can carry a count or a second line. The rows step out of the accessibility tree themselves (`role=\"none\"`), so the radios are the group's own children. The arrows move focus here and activation checks, rather than the selection following focus as it does in `nldd-radio-button-group`. - `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>`. - `form` — rows that are not actions themselves: the controls inside them are. A row of a label and a field, a switch, a menu button, or a value you cannot change at all. Semantically the same as `list` (`role=\"list\"`, `role=\"listitem\"`), and everything visual is unchanged; what falls away is the keyboard of a list you walk through. No arrow navigation, so no promise of it either, and no tab stop on the row: Tab goes straight to the controls, in source order, the way it does in any form. Rows that ARE actions (`href`, `button`, `checkbox`, or a segment) contradict that and warn in development. SwiftUI draws the same line between `List` and `Form`, for the same reason. - `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. A list you walk through 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. It follows the type, which you can see before you touch a key. - 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), and so are this row's once focus leaves the list, so tabbing back in lands on the row again. - Escape — out of a control the row holds, back onto the row. One level up, where Shift+Tab is one step back. On the row itself the list claims nothing, so Escape carries on to whatever holds the list, and a control showing a menu keeps the first press for closing that menu. While focus sits in a control a row holds, the list stands down: those keys are the control's, and a list that took them anyway would pull focus out of a combo box or a text field mid-word. What the row IS — its own link, button or segments — keeps answering here. Arrows move focus only; selection stays consumer-managed. Three types answer differently, and all three say so on screen before you touch a key: a listbox runs its keyboard from its search field, a reorderable list moves rows with the arrows, and a form has no rows to move between at all. 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": [
             {
@@ -30816,7 +31365,11 @@
             },
             {
               "name": "empty",
-              "description": "Shown when no items are visible (all `[hidden]` or none). Empty by default: what an empty list should say is the app's to write, so put an `nldd-inline-dialog` here. In `type=\"listbox\"` it is suppressed while the search field is empty (no query yet), so the consumer can show just the search field or its own hint outside the list."
+              "description": "Shown when the list has no items at all. Empty by default: what an empty list should say is the app's to write, so put an `nldd-inline-dialog` here. There is nothing to search or filter in a list with no rows, so the search field of a `type=\"listbox\"` and a `[slot=\"toolbar\"]` are hidden along with them, and an unfilled slot takes the whole list off the page. A list that fetches its rows is in this state until they arrive: put an `nldd-inline-dialog variant=\"loading\"` here to hold the place rather than have the controls appear a moment later."
+            },
+            {
+              "name": "no-results",
+              "description": "Shown when the list has items but every one of them is `[hidden]`, which is what consumer-driven filtering leaves behind. A different state from `empty` and a different sentence: here the search field and the `[slot=\"toolbar\"]` stay, because they are the way back to the rows. Falls back to `[slot=\"empty\"]` when not given. In `type=\"listbox\"` it is suppressed while the search field is empty (no query yet), so the consumer can show just the search field or its own hint outside the list."
             }
           ],
           "members": [
@@ -31786,8 +32339,9 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "Size | undefined"
+                "text": "Size"
               },
+              "default": "'inherit'",
               "attribute": "size",
               "reflects": true
             },
@@ -31894,10 +32448,11 @@
             {
               "name": "size",
               "type": {
-                "text": "Size | undefined"
+                "text": "Size"
               },
+              "default": "'inherit'",
               "fieldName": "size",
-              "description": "Text size: 'xs' | 'sm' | 'md' | 'lg' | 'inherit'. Empty = inherit."
+              "description": "Text size: 'inherit' (the default) follows the surrounding text and lays the link out inline, so it wraps in running prose. 'xs' | 'sm' | 'md' | 'lg' pin a size and switch to inline-flex, which baseline-aligns a start or end icon with an explicit gap."
             },
             {
               "name": "text",
@@ -33582,8 +34137,8 @@
               "type": {
                 "text": "ActivityIndicatorTiming"
               },
-              "default": "'default'",
-              "description": "'default' waits DELAY_MS before showing; 'instant' shows\nimmediately. The fade-in plays either way.",
+              "default": "'delay'",
+              "description": "'delay' waits DELAY_MS before showing; 'instant' shows\nimmediately. The fade-in plays either way.",
               "attribute": "timing",
               "reflects": true
             },
@@ -33652,8 +34207,8 @@
               "type": {
                 "text": "ActivityIndicatorTiming"
               },
-              "default": "'default'",
-              "description": "'default' waits 1000ms before showing (anti-flash); 'instant' shows immediately (the fade-in still plays). Default 'default'.",
+              "default": "'delay'",
+              "description": "'delay' (the default) waits 1000ms before showing (anti-flash); 'instant' shows immediately (the fade-in still plays).",
               "fieldName": "timing"
             },
             {
@@ -34132,204 +34687,223 @@
               "description": "Renders text as h1–h6; absent renders a p"
             },
             {
-              "name": "dismissible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "dismissible",
-              "description": "Show a close button in the top-right; emits `dismiss` when clicked"
-            },
-            {
-              "name": "translations",
-              "type": {
-                "text": "Partial<NLDDBannerTranslations>"
-              },
-              "default": "{}",
-              "description": "Override translation keys; unset keys fall back to Dutch",
-              "fieldName": "translations"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "nldd-banner",
-          "customElement": true,
-          "slots": [
-            {
-              "name": "",
-              "description": "Optional rich content between text and actions (e.g. nldd-rich-text)"
-            },
-            {
-              "name": "actions",
-              "description": "nldd-button elements, wrapped in a horizontal nldd-button-group"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "NLDDBanner",
-          "declaration": {
-            "name": "NLDDBanner",
-            "module": "src/components/status-and-feedback/banner/banner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nldd-banner",
-          "declaration": {
-            "name": "NLDDBanner",
-            "module": "src/components/status-and-feedback/banner/banner.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/status-and-feedback/inline-dialog/inline-dialog.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An inline status component for empty state, confirmations and feedback. Fills the container and has no minimum width.",
-          "name": "NLDDInlineDialog",
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "InlineDialogVariant | ''"
-              },
-              "default": "''",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "InlineDialogSize"
-              },
-              "default": "'md'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "icon",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "icon",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "iconColor",
-              "type": {
-                "text": "InlineDialogIconColor | ''"
-              },
-              "default": "''",
-              "attribute": "icon-color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "supportingText",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "supporting-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "headingLevel",
-              "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6 | null"
-              },
-              "default": "null",
-              "attribute": "heading-level",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "InlineDialogVariant | ''"
-              },
-              "default": "''",
-              "fieldName": "variant",
-              "description": "Semantic variant. 'alert' / 'success' force a matching icon and color; 'loading' shows an nldd-activity-indicator (a role=\"status\" spinner announcing \"Laden\") in place of the icon — for an empty state that is still loading."
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "InlineDialogSize"
-              },
-              "default": "'md'",
-              "fieldName": "size",
-              "description": "Typography size: 'md' (default) keeps body-md text + body-sm supporting; 'lg' bumps both up a step."
-            },
-            {
-              "name": "icon",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "icon",
-              "description": "Name of the nldd-icon icon above the text; absent when not set. Ignored when variant is set."
-            },
-            {
-              "name": "icon-color",
-              "type": {
-                "text": "InlineDialogIconColor | ''"
-              },
-              "default": "''",
-              "fieldName": "iconColor",
-              "description": "'secondary' | 'accent' | 'critical' | 'warning' | 'success'. Overrides the default and variant icon color."
-            },
-            {
-              "name": "text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "text",
-              "description": "Main text (heading or paragraph, depending on heading-level)"
-            },
-            {
-              "name": "supporting-text",
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dismissible",
+              "description": "Show a close button in the top-right; emits `dismiss` when clicked"
+            },
+            {
+              "name": "translations",
+              "type": {
+                "text": "Partial<NLDDBannerTranslations>"
+              },
+              "default": "{}",
+              "description": "Override translation keys; unset keys fall back to Dutch",
+              "fieldName": "translations"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "nldd-banner",
+          "customElement": true,
+          "slots": [
+            {
+              "name": "",
+              "description": "Optional rich content between text and actions (e.g. nldd-rich-text)"
+            },
+            {
+              "name": "actions",
+              "description": "nldd-button elements, wrapped in a horizontal nldd-button-group"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "NLDDBanner",
+          "declaration": {
+            "name": "NLDDBanner",
+            "module": "src/components/status-and-feedback/banner/banner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nldd-banner",
+          "declaration": {
+            "name": "NLDDBanner",
+            "module": "src/components/status-and-feedback/banner/banner.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/status-and-feedback/inline-dialog/inline-dialog.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An inline status component for empty state, confirmations and feedback. Fills the container and has no minimum width.",
+          "name": "NLDDInlineDialog",
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "InlineDialogVariant | ''"
+              },
+              "default": "''",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "InlineDialogSize"
+              },
+              "default": "'md'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "icon",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "iconColor",
+              "type": {
+                "text": "InlineDialogIconColor | ''"
+              },
+              "default": "''",
+              "attribute": "icon-color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "supportingText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "supporting-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "headingLevel",
+              "type": {
+                "text": "1 | 2 | 3 | 4 | 5 | 6 | null"
+              },
+              "default": "null",
+              "attribute": "heading-level",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "horizontalAlignment",
+              "type": {
+                "text": "InlineDialogHorizontalAlignment | ''"
+              },
+              "default": "''",
+              "attribute": "horizontal-alignment",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "InlineDialogVariant | ''"
+              },
+              "default": "''",
+              "fieldName": "variant",
+              "description": "Semantic variant. 'alert' / 'success' force a matching icon and color; 'loading' shows an nldd-activity-indicator (a role=\"status\" spinner announcing \"Laden\") in place of the icon — for an empty state that is still loading."
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "InlineDialogSize"
+              },
+              "default": "'md'",
+              "fieldName": "size",
+              "description": "Typography size: 'md' (default) keeps body-md text + body-sm supporting; 'lg' bumps both up a step."
+            },
+            {
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "icon",
+              "description": "Name of the nldd-icon icon above the text; absent when not set. Ignored when variant is set."
+            },
+            {
+              "name": "icon-color",
+              "type": {
+                "text": "InlineDialogIconColor | ''"
+              },
+              "default": "''",
+              "fieldName": "iconColor",
+              "description": "'secondary' | 'accent' | 'critical' | 'warning' | 'success'. Overrides the default and variant icon color."
+            },
+            {
+              "name": "text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "text",
+              "description": "Main text (heading or paragraph, depending on heading-level)"
+            },
+            {
+              "name": "supporting-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "supportingText",
+              "description": "Supporting text below the heading"
+            },
+            {
+              "name": "heading-level",
+              "type": {
+                "text": "1 | 2 | 3 | 4 | 5 | 6 | null"
+              },
+              "default": "null",
+              "fieldName": "headingLevel",
+              "description": "Renders text as h1–h6; absent renders a p"
+            },
+            {
+              "name": "horizontal-alignment",
               "type": {
-                "text": "string"
+                "text": "InlineDialogHorizontalAlignment | ''"
               },
               "default": "''",
-              "fieldName": "supportingText",
-              "description": "Supporting text below the heading"
-            },
-            {
-              "name": "heading-level",
-              "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6 | null"
-              },
-              "default": "null",
-              "fieldName": "headingLevel",
-              "description": "Renders text as h1–h6; absent renders a p"
+              "fieldName": "horizontalAlignment",
+              "description": "Overrides the alignment of text, icon and actions. Unset (the default) derives it: content in the default slot means a task, which aligns left; a bare message stays centered. Left alignment also lays the actions out in a row instead of stacked full-width."
             }
           ],
           "superclass": {
@@ -34643,6 +35217,16 @@
               "attribute": "supporting-text",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "horizontalAlignment",
+              "type": {
+                "text": "InlineDialogHorizontalAlignment | ''"
+              },
+              "default": "''",
+              "attribute": "horizontal-alignment",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "accessibleLabel",
@@ -34719,6 +35303,15 @@
               "fieldName": "supportingText",
               "description": "Forwarded to nldd-inline-dialog; supporting text"
             },
+            {
+              "name": "horizontal-alignment",
+              "type": {
+                "text": "InlineDialogHorizontalAlignment | ''"
+              },
+              "default": "''",
+              "fieldName": "horizontalAlignment",
+              "description": "Forwarded to nldd-inline-dialog. Unset derives it there: slotted content aligns left, a bare message stays centered."
+            },
             {
               "name": "accessible-label",
               "type": {
@@ -37843,13 +38436,76 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/utilities/spacing-scale.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "SPACING_SCALE",
+          "type": {
+            "text": "[\n\t'0', '2', '4', '6', '8', '10', '12', '16', '20', '24',\n\t'28', '32', '40', '44', '48', '56', '64', '80', '96',\n]"
+          },
+          "default": "[ '0', '2', '4', '6', '8', '10', '12', '16', '20', '24', '28', '32', '40', '44', '48', '56', '64', '80', '96', ]",
+          "description": "Every step there is. `'0'` is a value, not the absence of one."
+        },
+        {
+          "kind": "function",
+          "name": "spacingToValue",
+          "return": {
+            "type": {
+              "text": "string | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "name": "element",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "attribute",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "A step of the scale as the token it stands for.\n\nReturns null when there is nothing to set, so a caller can remove the\nproperty rather than write an empty one. `element` and `attribute` are only\nthere to name the offender in a dev warning."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SPACING_SCALE",
+          "declaration": {
+            "name": "SPACING_SCALE",
+            "module": "src/utilities/spacing-scale.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "spacingToValue",
+          "declaration": {
+            "name": "spacingToValue",
+            "module": "src/utilities/spacing-scale.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/utilities/visibility-mixin.ts",
       "declarations": [
         {
           "kind": "mixin",
-          "description": "Adds `hide-below` and `hide-above` attributes that toggle visibility based\non the inline-size of an ancestor CSS container.\n\nWithout a `containerName` argument the generated rule is an anonymous\n`@container (…)` query — it matches the nearest ancestor that declares\n`container-type: inline-size`. Pass a name to target a specific container\n(e.g. `'cells-container'` for cells inside `nldd-list`, which sets that\nname inline on its host as a Safari shadow-DOM workaround).\n\nValues are either a named breakpoint — `sm` / `md` / `lg` — or a CSS length\n(e.g. '320px', '20rem'). Named values resolve to the standard breakpoint\nthresholds: `hide-below` uses the breakpoint's lower bound (e.g.\n`hide-below=\"lg\"` hides in sm+md and shows in lg), `hide-above` its upper\nbound; the open edges (below sm, above lg) are no-ops. Container queries can't\nread CSS variables in their conditions, so the query rule is generated at\nruntime and injected as a <style> element in the component's shadow root,\nwrapped in `:host {",
+          "description": "Adds `hide-below` and `hide-above` attributes that toggle visibility based\non the inline-size of an ancestor CSS container.\n\nWithout a `containerName` argument the rule is an anonymous `@container (…)`\nquery — it matches the nearest ancestor that declares\n`container-type: inline-size`. Pass a name to target a specific container\n(e.g. `'cells-container'` for cells inside `nldd-list`, which sets that\nname inline on its host as a Safari shadow-DOM workaround).\n\nValues are either a named breakpoint — `sm` / `md` / `lg` — or a CSS length\n(e.g. '320px', '20rem'). Named values resolve to the standard breakpoint\nthresholds: `hide-below` uses the breakpoint's lower bound (e.g.\n`hide-below=\"lg\"` hides in sm+md and shows in lg), `hide-above` its upper\nbound; the open edges (below sm, above lg) are no-ops.\n\nThe named values are static CSS (see `visibility-mixin.styles.ts`), added\nthrough `finalizeStyles` so that a component's own `static styles` does not\nhave to know about them. A custom length has no static form: the threshold\nis only known at runtime and a container query cannot read one from a CSS\nvariable, so its rule is written at runtime into a constructable stylesheet\nthe shadow root adopts. Neither path is an inline stylesheet, so no consumer\nneeds `'unsafe-inline'` in its `style-src` for either.",
           "name": "VisibilityMixin",
           "members": [
             {
@@ -37872,15 +38528,15 @@
             },
             {
               "kind": "field",
-              "name": "_visibilityStyle",
+              "name": "_visibilitySheet",
               "type": {
-                "text": "HTMLStyleElement | undefined"
+                "text": "CSSStyleSheet | undefined"
               },
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_updateVisibilityStyle",
+              "name": "_updateVisibilityRules",
               "privacy": "private",
               "return": {
                 "type": {