@nldd/design-system 0.8.80 → 0.8.83

package/dist/types/vue.d.ts

@@ -62,7 +62,7 @@ import type { NLDDKeyboardShortcut } from '@nldd/design-system/keyboard-shortcut
 import type { NLDDLink } from '@nldd/design-system/link';
 import type { NLDDList } from '@nldd/design-system/list';
 import type { NLDDListItem } from '@nldd/design-system/list-item';
-import type { NLDDListItemAction } from '@nldd/design-system/list-item-action';
+import type { NLDDListItemSegment } from '@nldd/design-system/list-item-segment';
 import type { NLDDMenu } from '@nldd/design-system/menu';
 import type { NLDDMenuBar } from '@nldd/design-system/menu-bar';
 import type { NLDDMenuBarItem } from '@nldd/design-system/menu-bar-item';
@@ -116,6 +116,7 @@ import type { NLDDTabBarItem } from '@nldd/design-system/tab-bar';
 import type { NLDDTable } from '@nldd/design-system/table';
 import type { NLDDTableRow } from '@nldd/design-system/table';
 import type { NLDDTag } from '@nldd/design-system/tag';
+import type { NLDDText } from '@nldd/design-system/text';
 import type { NLDDTextCell } from '@nldd/design-system/text-cell';
 import type { NLDDTextEditor } from '@nldd/design-system/text-editor';
 import type { NLDDTextField } from '@nldd/design-system/text-field';
@@ -228,8 +229,12 @@ declare module 'vue' {
 	type NLDDBadgeProps = {
 		/** Size: 'sm' | 'md' (default: 'md') */
 		'size'?: NLDDBadge['size'];
-		/** Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success') or a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …). Default: 'critical' */
+		/** Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success'), a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …), or 'inherit' to fill in the content color around it: the `--context-content-color` channel a list item, table row or menu sets, falling back to `currentColor`. Default: 'critical' */
 		'color'?: NLDDBadge['color'];
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it. */
+		'custom-color'?: NLDDBadge['customColor'];
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know: the jacket of a cable, a color someone picked. It wins over `color`. Whatever it paints, the text and icon on top become white or black, whichever contrasts. The text on it is black or white, picked on the relative luminance of the fill, so it clears 4.5:1 whatever color you hand it. */
+		'customColor'?: NLDDBadge['customColor'];
 		/** Grows a ring out of the badge and fades it, for something happening right now (a live connection, an outage). Respects `prefers-reduced-motion`. */
 		'pulse'?: NLDDBadge['pulse'];
 		/** Text (takes precedence over number) */
@@ -285,8 +290,8 @@ declare module 'vue' {
 	};
 
 	type NLDDBoxProps = {
-		/** Which surface this box draws. - `tinted` (default): a box on a plain page background. - `base`: a box on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card). - `critical`: a region whose actions are destructive or irreversible (a "danger zone"), tinted and outlined in critical. It carries no ARIA of its own: unlike nldd-banner this is not an announcement but a permanent part of the page, so the heading and the button labels have to name the danger — colour is a reinforcement, never the only signal (WCAG 1.4.1). The box draws the surface and nothing else: it has no padding of its own, the same way nldd-card has none. Put an nldd-container inside it and let that set the inset, so one component owns spacing wherever it is used. */
-		'variant'?: NLDDBox['variant'];
+		/** Which surface this box draws, named as it is on nldd-app-view, nldd-page, nldd-split-view-pane and nldd-card. It starts tinted where a card starts base: a box is there to stand out from the page, a card to sit on it. - `tinted` (default): a box on a plain page background. - `base`: a box on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card). - `critical`: a region whose actions are destructive or irreversible (a "danger zone"), tinted and outlined in critical. It carries no ARIA of its own: unlike nldd-banner this is not an announcement but a permanent part of the page, so the heading and the button labels have to name the danger — colour is a reinforcement, never the only signal (WCAG 1.4.1). The box draws the surface and nothing else: it has no padding of its own, the same way nldd-card has none. Put an nldd-container inside it and let that set the inset, so one component owns spacing wherever it is used. */
+		'background'?: NLDDBox['background'];
 	};
 
 	type NLDDBreadcrumbsProps = {
@@ -322,6 +327,10 @@ declare module 'vue' {
 		'max-width'?: NLDDButton['maxWidth'];
 		/** Caps the width at this CSS length (e.g. '320px'). Combines with `width="full"`: the button follows its container up to the cap. A label that doesn't fit is truncated with an ellipsis — a cap only means something if the content respects it. */
 		'maxWidth'?: NLDDButton['maxWidth'];
+		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (e.g. a button in a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'no-tab'?: NLDDButton['noTab'];
+		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (e.g. a button in a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
+		'noTab'?: NLDDButton['noTab'];
 		/** Whether the button has a icon to indicate it opens a menu or popover */
 		'expandable'?: NLDDButton['expandable'];
 		/** Whether the popover/menu controlled by this button is currently open. Forwarded as aria-expanded on the inner button; toggles the is-expanded visual state. */
@@ -588,6 +597,8 @@ declare module 'vue' {
 		'invalid'?: NLDDComboBox['invalid'];
 		/** Disabled state */
 		'disabled'?: NLDDComboBox['disabled'];
+		/** Read-only state: the value stays readable, selectable and in the tab order, but the menu does not open and there is nothing to clear. The input drops its combobox role and the aria that goes with it, so assistive technology is not told about a list it cannot open. Use this where the value belongs to the record rather than to the form, e.g. the product an asset is an instance of. */
+		'readonly'?: NLDDComboBox['readonly'];
 		/** Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted. */
 		'allow-custom'?: NLDDComboBox['allowCustom'];
 		/** Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted. */
@@ -965,6 +976,10 @@ declare module 'vue' {
 		'expanded'?: NLDDDropdown['expanded'];
 		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
 		'width'?: NLDDDropdown['width'];
+		/** Accessible name, forwarded as aria-label to the slotted select */
+		'accessible-label'?: NLDDDropdown['accessibleLabel'];
+		/** Accessible name, forwarded as aria-label to the slotted select */
+		'accessibleLabel'?: NLDDDropdown['accessibleLabel'];
 		/** Bubbles up from the slotted select; detail: { value: string } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
@@ -1179,6 +1194,10 @@ declare module 'vue' {
 		'size'?: NLDDIcon['size'];
 		/** Functional (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or rijkskleur (`lintblauw`, `donkerblauw`, `hemelblauw`, `lichtblauw`, `paars`, `violet`, `robijnrood`, `roze`, `rood`, `oranje`, `donkergeel`, `geel`, `donkerbruin`, `bruin`, `donkergroen`, `groen`, `mosgroen`, `mintgroen`). Empty = inherit `color` from parent. */
 		'color'?: NLDDIcon['color'];
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know. It wins over `color`. */
+		'custom-color'?: NLDDIcon['customColor'];
+		/** A color of its own, as any CSS color value ('#a90061', 'oklch(0.6 0.2 20)', 'var(--brand-cable-blue)'). For a color the design system cannot know. It wins over `color`. */
+		'customColor'?: NLDDIcon['customColor'];
 	};
 
 	type NLDDIconButtonProps = {
@@ -1204,9 +1223,9 @@ declare module 'vue' {
 		'expandable'?: NLDDIconButton['expandable'];
 		/** Whether the popover/menu controlled by this button is currently open. Forwarded as aria-expanded on the inner button; toggles the is-expanded visual state. */
 		'expanded'?: NLDDIconButton['expanded'];
-		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (e.g. an nldd-token in nldd-token-field) that manages focus itself. Still mouse- and script-focusable. */
+		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (an nldd-token in nldd-token-field, a button in a row of an nldd-list) that manages focus itself. Still mouse- and script-focusable. */
 		'no-tab'?: NLDDIconButton['noTab'];
-		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (e.g. an nldd-token in nldd-token-field) that manages focus itself. Still mouse- and script-focusable. */
+		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (an nldd-token in nldd-token-field, a button in a row of an nldd-list) that manages focus itself. Still mouse- and script-focusable. */
 		'noTab'?: NLDDIconButton['noTab'];
 		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. */
 		'popup-type'?: NLDDIconButton['popupType'];
@@ -1439,14 +1458,10 @@ declare module 'vue' {
 		'variant'?: NLDDList['variant'];
 		/** A11y role and behavior (default 'list'). See the docblock above. */
 		'type'?: NLDDList['type'];
-		/** Enables drag-to-reorder and pushes `reorderable` onto the items. Only valid with `type="list"`; wins over `arrow-navigation` when both are set. */
+		/** Enables drag-to-reorder and pushes `reorderable` onto the items. Only valid with `type="list"`; there the arrow keys move rows instead of focus. */
 		'reorderable'?: NLDDList['reorderable'];
 		/** When to draw the lines between the items (default 'always'). `on-touch` draws them only where the primary input is touch, under `(pointer: coarse)`: a pointer has the hover highlight to tell one row from the next and a finger has nothing, so the line earns its place in the one case and is clutter in the other. `never` hides them everywhere */
 		'dividers'?: NLDDList['dividers'];
-		/** Roving-tabindex arrow-key navigation: ArrowUp/ArrowDown move focus between the rows, Home/End jump to first/last, and the list becomes a single tab stop. Implied by `type="tree"` (which adds ArrowLeft/ArrowRight, see above). Ignored when `reorderable` is active on a `type="list"`, and in listbox mode. */
-		'arrow-navigation'?: NLDDList['arrowNavigation'];
-		/** Roving-tabindex arrow-key navigation: ArrowUp/ArrowDown move focus between the rows, Home/End jump to first/last, and the list becomes a single tab stop. Implied by `type="tree"` (which adds ArrowLeft/ArrowRight, see above). Ignored when `reorderable` is active on a `type="list"`, and in listbox mode. */
-		'arrowNavigation'?: NLDDList['arrowNavigation'];
 		/** Listbox only: caps the options' scroll region at this CSS length (e.g. '320px'). Unset means no cap. */
 		'height'?: NLDDList['height'];
 		/** Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled. */
@@ -1472,17 +1487,21 @@ declare module 'vue' {
 	type NLDDListItemProps = {
 		/** Row size (default: 'md'). Pushed onto the cells whose `size` means the same scale (nldd-text-cell, nldd-drag-handle-cell), so it is written once per row instead of once per cell. A size set on the cell itself wins. Cells where `size` means something else — pixels on nldd-icon-cell / nldd-spacer-cell, a heading scale on nldd-title-cell — are left alone. */
 		'size'?: NLDDListItem['size'];
-		/** Marks the item as selected. Selection is consumer-managed; the list never sets it. In a `navigation` parent it puts `aria-current="page"` on the inner action, in a `listbox` parent it drives `aria-selected`. */
+		/** Marks the item as selected: it is one of the rows you picked. Selection is consumer-managed; the list never sets it. In a `navigation` parent it puts `aria-current="page"` on the inner action, in a `listbox` parent it drives `aria-selected`. */
 		'selected'?: NLDDListItem['selected'];
-		/** Renders the item as a `<button>`; ignored when `href` is set (a link wins) */
+		/** Marks the item as the one you are on: the page a menu row points at, the record a list has open. Exactly one row in a list carries it, where `selected` may be on many. It paints like `selected` at rest, and takes the highlighted fill while focus is anywhere in the row — including inside a nested `nldd-list-item-segment`, which is what a segmented row needs: the focus never reaches the row's own control, because there is none. In a `navigation` parent it puts `aria-current="page"` on the inner action. On a segmented row set it on the segment that holds the link instead: the row reads `current` off its own segments and paints itself, so it is written once, where `aria-current` belongs. */
+		'current'?: NLDDListItem['current'];
+		/** Renders the item as a `<button>`. Last of the three: `href` and `checkbox` both win over it. */
 		'button'?: NLDDListItem['button'];
-		/** Makes the whole row a `role="checkbox"` control; ignored when `href` is set */
+		/** Makes the whole row a `role="checkbox"` control. Wins over `button`, loses to `href`. */
 		'checkbox'?: NLDDListItem['checkbox'];
 		/** Checked state of a `checkbox` row; the item toggles it on activation */
 		'checked'?: NLDDListItem['checked'];
-		/** Disclosure state. Drives the `children` group's visibility AND supplies `aria-expanded` — to the row's own control when the row is interactive, or to the segmented action marked `disclosure`. Written once either way; the item DEV-warns when there is nowhere for it to live. */
+		/** Switches the row's own control off: a `button` or `checkbox` row stops responding and dims, a `href` row gets `aria-disabled` and its click is blocked (a link cannot be disabled natively). A row without a control of its own has nothing to switch off, and segments carry their own `disabled`. The arrow keys skip a disabled row. */
+		'disabled'?: NLDDListItem['disabled'];
+		/** Disclosure state. Drives the `children` group's visibility AND supplies `aria-expanded` — to the row's own control when the row is interactive, or to the segment marked `disclosure`. Written once either way; the item DEV-warns when there is nowhere for it to live. */
 		'expanded'?: NLDDListItem['expanded'];
-		/** Renders the item as an `<a>` with this URL. Takes precedence over `button`; without either the item is a plain container with no action. */
+		/** Renders the item as an `<a>` with this URL. Wins over `checkbox` and `button`; without any of the three the item is a plain container with no action. */
 		'href'?: NLDDListItem['href'];
 		/** Link target forwarded to the `<a>` (e.g. '_blank'); only applies with `href`. With '_blank' a visually hidden "opens in new tab" announcement is added for assistive technology. */
 		'target'?: NLDDListItem['target'];
@@ -1499,34 +1518,34 @@ declare module 'vue' {
 		'onChange'?: (event: CustomEvent) => void;
 	};
 
-	type NLDDListItemActionProps = {
-		/** Renders the segmented action as a `<button>`; ignored when `href` is set */
-		'button'?: NLDDListItemAction['button'];
-		/** Renders the segmented action as an `<a>` with this URL; wins over `button` and `checkbox` */
-		'href'?: NLDDListItemAction['href'];
+	type NLDDListItemSegmentProps = {
+		/** Renders the segment as a `<button>`. Last of the three: `href` and `checkbox` both win over it. */
+		'button'?: NLDDListItemSegment['button'];
+		/** Renders the segment as an `<a>` with this URL. Wins over `checkbox` and `button`. */
+		'href'?: NLDDListItemSegment['href'];
 		/** Link target forwarded to the `<a>`; only applies with `href` */
-		'target'?: NLDDListItemAction['target'];
+		'target'?: NLDDListItemSegment['target'];
 		/** Link rel forwarded to the `<a>`; only applies with `href` */
-		'rel'?: NLDDListItemAction['rel'];
-		/** Makes the segmented action a `role="checkbox"` control; ignored when `href` is set */
-		'checkbox'?: NLDDListItemAction['checkbox'];
-		/** Checked state of a `checkbox` action; it toggles on activation */
-		'checked'?: NLDDListItemAction['checked'];
-		/** Disclosure state, reflected as `aria-expanded` on the control. Set it on the segmented action that opens something (e.g. a tree row's chevron). Leave it off entirely when the segmented action discloses nothing — an absent attribute emits no aria-expanded. */
-		'expanded'?: NLDDListItemAction['expanded'];
-		/** Marks the segmented action as the row's disclosure control: `aria-expanded` comes from the parent item's `expanded`, so the state lives in one place. A slotted `nldd-icon-cell` rotates a quarter turn while the row is open */
-		'disclosure'?: NLDDListItemAction['disclosure'];
-		/** Marks the segmented action as the current page (`aria-current="page"`) */
-		'current'?: NLDDListItemAction['current'];
-		/** Disabled state; only applies to button and checkbox segmented actions */
-		'disabled'?: NLDDListItemAction['disabled'];
-		/** `full` lets the segmented action grow to fill the row (default: 'fit-content') */
-		'width'?: NLDDListItemAction['width'];
-		/** Accessible name for the control. Set it when the segmented action holds only an icon, or when the cell text does not describe the action. */
-		'accessible-label'?: NLDDListItemAction['accessibleLabel'];
-		/** Accessible name for the control. Set it when the segmented action holds only an icon, or when the cell text does not describe the action. */
-		'accessibleLabel'?: NLDDListItemAction['accessibleLabel'];
-		/** On a `checkbox` action after it toggles; detail: { checked: boolean } */
+		'rel'?: NLDDListItemSegment['rel'];
+		/** Makes the segment a `role="checkbox"` control. Wins over `button`, loses to `href`. */
+		'checkbox'?: NLDDListItemSegment['checkbox'];
+		/** Checked state of a `checkbox` segment; it toggles on activation */
+		'checked'?: NLDDListItemSegment['checked'];
+		/** Disclosure state, reflected as `aria-expanded` on the control, and painted: the segment stays lit a step above hover for as long as what it opened is on screen, so a menu reads as hanging off this row rather than floating over the list. Set it on the segment that opens something (a tree row's chevron, a menu). Leave it off entirely when the segment discloses nothing — an absent attribute emits no aria-expanded. */
+		'expanded'?: NLDDListItemSegment['expanded'];
+		/** Marks the segment as the row's disclosure control: `aria-expanded` comes from the parent item's `expanded`, so the state lives in one place. A slotted `nldd-icon-cell` rotates a quarter turn while the row is open */
+		'disclosure'?: NLDDListItemSegment['disclosure'];
+		/** Marks the segment as the current page (`aria-current="page"`). The row it sits in paints itself as the current row from it, so on a segmented row this is the only place it has to be set. */
+		'current'?: NLDDListItemSegment['current'];
+		/** Switches the segment off: a `button` or `checkbox` segment stops responding and dims, a `href` segment gets `aria-disabled` and its click is blocked (a link cannot be disabled natively). The arrow keys skip a row whose only segment is off. */
+		'disabled'?: NLDDListItemSegment['disabled'];
+		/** `full` lets the segment grow to fill the row (default: 'fit-content') */
+		'width'?: NLDDListItemSegment['width'];
+		/** Accessible name for the control. Set it when the segment holds only an icon, or when the cell text does not describe the action. */
+		'accessible-label'?: NLDDListItemSegment['accessibleLabel'];
+		/** Accessible name for the control. Set it when the segment holds only an icon, or when the cell text does not describe the action. */
+		'accessibleLabel'?: NLDDListItemSegment['accessibleLabel'];
+		/** On a `checkbox` segment after it toggles; detail: { checked: boolean } */
 		'onChange'?: (event: CustomEvent) => void;
 	};
 
@@ -1661,7 +1680,7 @@ declare module 'vue' {
 		'shortcutWindows'?: NLDDMenuItem['shortcutWindows'];
 		'shortcut-linux'?: NLDDMenuItem['shortcutLinux'];
 		'shortcutLinux'?: NLDDMenuItem['shortcutLinux'];
-		/** Set by nldd-menu. Not part of the public API. */
+		/** Which menu owns this item, set by that nldd-menu. Not part of the public API. `null` until one claims it, and an unclaimed item carries no menu role. A menu role is a promise about what is around you, so an item cannot make it on its own. `nldd-toolbar-item` holds exactly such an item: the declaration of what belongs in the overflow menu, which the toolbar clones into the real menu when it collapses. The clone is claimed there and the declaration stays what it is. */
 		'menuVariant'?: NLDDMenuItem['menuVariant'];
 		'onMenuItemFocused'?: (event: CustomEvent) => void;
 		'onSubmenuOpen'?: (event: CustomEvent) => void;
@@ -1715,6 +1734,12 @@ declare module 'vue' {
 		'required'?: NLDDMultiLineTextField['required'];
 		/** Autocomplete hint */
 		'autocomplete'?: NLDDMultiLineTextField['autocomplete'];
+		/** Which virtual keyboard a phone or tablet raises, forwarded as `inputmode`: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'. It changes nothing about what the field accepts, and nothing at all on a desktop. */
+		'keyboard'?: NLDDMultiLineTextField['keyboard'];
+		/** What the Enter key of the virtual keyboard says, forwarded as `enterkeyhint`: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'. In a field where Enter starts a new line, leave it alone. */
+		'enter-key'?: NLDDMultiLineTextField['enterKey'];
+		/** What the Enter key of the virtual keyboard says, forwarded as `enterkeyhint`: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'. In a field where Enter starts a new line, leave it alone. */
+		'enterKey'?: NLDDMultiLineTextField['enterKey'];
 		/** Initial visible rows (minimum height). Default: 3. */
 		'rows'?: NLDDMultiLineTextField['rows'];
 		/** 'none' | 'vertical' | 'auto' (default). 'auto' grows with content (native field-sizing), no manual handle. */
@@ -2199,6 +2224,10 @@ declare module 'vue' {
 		'disabled'?: NLDDRadioButtonGroup['disabled'];
 		/** Marks the group as required */
 		'required'?: NLDDRadioButtonGroup['required'];
+		/** Accessible name for the group, set as aria-label on the group */
+		'accessible-label'?: NLDDRadioButtonGroup['accessibleLabel'];
+		/** Accessible name for the group, set as aria-label on the group */
+		'accessibleLabel'?: NLDDRadioButtonGroup['accessibleLabel'];
 		/** Id of an external label element, set as aria-labelledby on the group */
 		'accessible-labeled-by'?: NLDDRadioButtonGroup['accessibleLabeledBy'];
 		/** Id of an external label element, set as aria-labelledby on the group */
@@ -2595,6 +2624,10 @@ declare module 'vue' {
 		'size'?: NLDDStepper['size'];
 		/** Name for form submission; the value is submitted under this name */
 		'name'?: NLDDStepper['name'];
+		/** Accessible name for the spinbutton; falls back to a generic label */
+		'accessible-label'?: NLDDStepper['accessibleLabel'];
+		/** Accessible name for the spinbutton; falls back to a generic label */
+		'accessibleLabel'?: NLDDStepper['accessibleLabel'];
 		/** Translations; unspecified keys fall back to Dutch */
 		'translations'?: NLDDStepper['translations'];
 		'internals'?: NLDDStepper['internals'];
@@ -2730,6 +2763,23 @@ declare module 'vue' {
 		'accessibleLabel'?: NLDDTag['accessibleLabel'];
 	};
 
+	type NLDDTextProps = {
+		/** Text size on the body scale: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' (default: 'md') */
+		'size'?: NLDDText['size'];
+		/** Font weight: 'regular' | 'medium' | 'bold' (default: 'regular'). With 'bold' a slotted `<strong>` no longer stands out: there is nothing bolder in the scale. */
+		'weight'?: NLDDText['weight'];
+		/** Line height: 'flat' | 'tight' | 'snug' | 'loose' (default: 'snug') */
+		'line-height'?: NLDDText['lineHeight'];
+		/** Line height: 'flat' | 'tight' | 'snug' | 'loose' (default: 'snug') */
+		'lineHeight'?: NLDDText['lineHeight'];
+		/** 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. */
+		'color'?: NLDDText['color'];
+		/** Alignment of the text within the block: 'left' | 'center' | 'right' (default: 'left'). Aligns the words; `horizontal-alignment` on nldd-container moves the box. */
+		'horizontal-alignment'?: NLDDText['horizontalAlignment'];
+		/** Alignment of the text within the block: 'left' | 'center' | 'right' (default: 'left'). Aligns the words; `horizontal-alignment` on nldd-container moves the box. */
+		'horizontalAlignment'?: NLDDText['horizontalAlignment'];
+	};
+
 	type NLDDTextCellProps = {
 		/** Cell size: 'sm' | 'md' (default: 'md') */
 		'size'?: NLDDTextCell['size'];
@@ -2846,6 +2896,12 @@ declare module 'vue' {
 		'disabled'?: NLDDTextField['disabled'];
 		/** Input type: 'text' | 'email' | 'tel' | 'url' */
 		'type'?: NLDDTextField['type'];
+		/** Which virtual keyboard a phone or tablet raises, forwarded as `inputmode`: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'. It changes nothing about what the field accepts, and nothing at all on a desktop. Reach for it where the value is digits but not a quantity you would step (a house number, a postcode, a rack unit): 'numeric'. The keyboard for 'tel', 'email' and 'url' already follows from `type`. */
+		'keyboard'?: NLDDTextField['keyboard'];
+		/** What the Enter key of the virtual keyboard says, forwarded as `enterkeyhint`: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'. It only labels the key; what Enter does is still up to the form, and on a desktop it changes nothing. */
+		'enter-key'?: NLDDTextField['enterKey'];
+		/** What the Enter key of the virtual keyboard says, forwarded as `enterkeyhint`: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'. It only labels the key; what Enter does is still up to the form, and on a desktop it changes nothing. */
+		'enterKey'?: NLDDTextField['enterKey'];
 		/** Input name for form submission */
 		'name'?: NLDDTextField['name'];
 		/** Readonly state */
@@ -3454,7 +3510,7 @@ declare module 'vue' {
 		'nldd-full-bleed-section': DefineComponent<NLDDFullBleedSectionProps>;
 		/** A page header with a media area and a text panel (the main) that can stand in six positions. Every area is rectangular. With `main-width="full"` the media area sits as its own strip above or below the panel rather than behind it. On mobile the media always stacks above the full-width panel. Without media the main fills the whole area; with `main-background="base"` that area gets a border so it stays visible on the base surface. `main-background` gives the panel a surface color from the filled categories. Those carry a pure white or black content color along, so components with `color="inherit"` (title, rich-text) are guaranteed to keep their contrast. */
 		'nldd-hero': DefineComponent<NLDDHeroProps>;
-		/** A customizable icon component that renders SVG icons from a predefined library. Icons are decorative by default: the host gets `aria-hidden="true"` automatically. If you want the icon to be announced by assistive tech, set `aria-hidden="false"` on the consumer side together with an `aria-label`. Sizing: the icon fills whatever sizes it — an `nldd-icon-cell`, a button, a menu item. `size="full"` names that default explicitly. `size="inherit"` makes it follow the surrounding text (1em), for an icon set inline in a sentence. Any spacer-aligned number (16–96) pins a fixed dimension. Reach for `inherit` rather than a global `nldd-icon { width: 1em }` rule in the consumer: such a rule wins over the component's own :host styling and so also shrinks the icons that a cell or button was already sizing correctly. Color: by default the icon inherits its parent's `color`. Set `color` to one of the functional semantics (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or a rijkskleur (`lintblauw`, `paars`, `groen`, …). For arbitrary one-off colors, set `style="color: …"` on the host — the inherited `color` still drives the SVG fill/stroke. */
+		/** A customizable icon component that renders SVG icons from a predefined library. Icons are decorative by default: the host gets `aria-hidden="true"` automatically. If you want the icon to be announced by assistive tech, set `aria-hidden="false"` on the consumer side together with an `aria-label`. Sizing: the icon fills whatever sizes it — an `nldd-icon-cell`, a button, a menu item. `size="full"` names that default explicitly. `size="inherit"` makes it follow the surrounding text (1em), for an icon set inline in a sentence. Any spacer-aligned number (16–96) pins a fixed dimension. Reach for `inherit` rather than a global `nldd-icon { width: 1em }` rule in the consumer: such a rule wins over the component's own :host styling and so also shrinks the icons that a cell or button was already sizing correctly. Color: by default the icon inherits its parent's `color`. Set `color` to one of the functional semantics (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or a rijkskleur (`lintblauw`, `paars`, `groen`, …). For a color the design system cannot know — the jacket of a cable, a color someone picked — set `custom-color` to any CSS color. */
 		'nldd-icon': DefineComponent<NLDDIconProps>;
 		'nldd-icon-button': DefineComponent<NLDDIconButtonProps>;
 		/** A cell component for displaying icons in lists with configurable alignment and size. Set `icon` to render an `nldd-icon` by name, or slot custom content as an escape hatch for non-standard iconography. */
@@ -3471,12 +3527,12 @@ declare module 'vue' {
 		'nldd-keyboard-shortcut': DefineComponent<NLDDKeyboardShortcutProps>;
 		/** Hyperlink component met twee modi: 1. **Standalone (sized)** — set `size="xs"|"sm"|"md"|"lg"` voor menu's, actiegebieden of overzichten. Vaste tekstgrootte, `display: inline-flex` met `gap` voor icon-spacing. 2. **Inline (inherit)** — laat `size` weg of zet expliciet `size="inherit"`. De link erft `font-size`, `line-height` en `font-family` van zijn omgeving. Tekst wraps natuurlijk over regels (`display: inline`). Icons werken ook hier; de natuurlijke whitespace tussen icon en tekst zorgt voor de spacing. Voor links in CMS/markdown-output (waar de `<a>` als HTML binnenkomt) blijft `<nldd-rich-text>` met raw `<a>` de aangewezen route. */
 		'nldd-link': DefineComponent<NLDDLinkProps>;
-		/** A container for `nldd-list-item` elements. The `type` attribute switches the list's a11y role and behavior: - `list` (default) — `role="list"`, items `role="listitem"`. Reorderable allowed. - `tree` — `role="tree"`, items `role="treeitem"`. Branch rows put their child rows in their own `slot="children"`, which the item renders as a `role="group"`. Level, position and set size are NOT authored: the nesting represents the hierarchy, so assistive technology derives them. A branch row must carry `expanded`; the group is hidden while it is false. Visual indentation is the consumer's — repeat a spacer-cell per level. Comes with its own keyboard, see "Tree" below. - `navigation` — host `role="navigation"`, items with `selected` get `aria-current="page"` on their inner `<a>` or `<button>`. - `listbox` — an accessible, filterable listbox (combobox pattern). The list renders its OWN search input (`role="combobox"`) pinned above the options; `.list__items` becomes `role="listbox"` and items become `role="option"`. Focus stays in the input, the active option moves via `aria-activedescendant`, and filtering is consumer-managed via the `input` event (toggle `[hidden]` on items). See "Listbox" below. Selection state is consumer-managed: the list never mutates `selected` itself. In `type="listbox"` the list owns a native `<input role="combobox">` (mirroring how `nldd-combo-box` wires an input to a slotted listbox). Keyboard, handled on the input so focus never leaves it: - ArrowDown / ArrowUp — move the active option among the VISIBLE (non-`[hidden]`) options (wrap around). - Home / End — first / last visible option. - Enter — activate the active option by triggering its inner action (a link navigates, a button fires the consumer's handler). Selection stays consumer-managed. - Escape — clear the search value (and refire `input`). On every active change the input's `aria-activedescendant` is set to the active option's id and the option is scrolled into view. The active option (`_highlighted` on the item, a highlight) is distinct from `selected`. Filtering is the consumer's job: listen to `input` (`{ detail: { value } }`) and toggle `[hidden]` on items; after the visible set changes the list resets the active option to the first visible one. `reorderable` and `arrow-navigation` are ignored in listbox mode (listbox has its own keyboard). A tree is a composite widget, so it brings its own keyboard — `arrow-navigation` is implied and needn't be set: - ArrowDown / ArrowUp — move between the rows in the order they appear on screen, the rows of an open branch included. - Home / End — first / last row. - ArrowRight — opens a closed branch; on an open one it steps to its first child. - ArrowLeft — closes an open branch; on a leaf it steps out to the parent row. - Enter / Space — open and close, the same as Right and Left. Only while focus sits on the row itself: a row that is its own control, and a segmented action you tabbed into, handle both keys themselves. Opening and closing runs through the row's own disclosure control — the segmented action marked `disclosure`, or the row itself when it is a button. The list activates that control rather than writing `expanded`, so the state keeps being set in one place: the consumer's handler. A row that is a link is never activated this way, since that would navigate away. The tree is one tab stop. Focus lands on the row itself when the row has no control of its own, because that is where `treeitem` sits and it makes assistive technology announce the row rather than a button inside it. Tab then walks the controls of THAT row (a chevron beside a checkbox, say) and leaves the list after the last one. A deliberate deviation: strictly speaking a row with several controls is a `treegrid`, not a `tree`. We keep the tree semantics — level and set size are what matters here, not rows and columns — and borrow the "Tab within the row" behavior from the grid pattern. Should a tree with real columns come up, that is when `treegrid` earns its own type. On reorder (type="list" + reorderable), the list dispatches `nldd-reorder` with `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their data model that renders the DOM). Focus is restored to the moved item's drag handle via a single `requestAnimationFrame` — this assumes the consumer reorders **synchronously** in the event handler. Async renderers (React, Vue, …) that update the DOM on a later tick will miss the focus restore and should manage focus themselves after their render commits. */
+		/** A container for `nldd-list-item` elements. The `type` attribute switches the list's a11y role and behavior: - `list` (default) — `role="list"`, items `role="listitem"`. Reorderable allowed. - `tree` — `role="tree"`, items `role="treeitem"`. Branch rows put their child rows in their own `slot="children"`, which the item renders as a `role="group"`. Level, position and set size are NOT authored: the nesting represents the hierarchy, so assistive technology derives them. A branch row must carry `expanded`; the group is hidden while it is false. Visual indentation is the consumer's — repeat a spacer-cell per level. Comes with its own keyboard, see "Tree" below. - `navigation` — host `role="navigation"`, items with `selected` get `aria-current="page"` on their inner `<a>` or `<button>`. - `listbox` — an accessible, filterable listbox (combobox pattern). The list renders its OWN search input (`role="combobox"`) pinned above the options; `.list__items` becomes `role="listbox"` and items become `role="option"`. Focus stays in the input, the active option moves via `aria-activedescendant`, and filtering is consumer-managed via the `input` event (toggle `[hidden]` on items). See "Listbox" below. Selection state is consumer-managed: the list never mutates `selected` itself. Every list answers to the arrow keys, and there is no attribute to switch that on. Whether the keys do something is not a property of one list: it is what a reader may assume about all of them, and a per-list setting made that unknowable from the outside. - ArrowUp / ArrowDown — move focus between the rows there is something to do with. A row of nothing but text is skipped, because focus that leads nowhere is a dead end. - Home / End — the first / last of those rows. - Tab — the list is ONE tab stop, so Tab moves past it rather than through it. Within the current row Tab walks that row's own controls: a chevron beside a checkbox, a menu button at the end. The same controls in the other rows are held out of the tab order (`tabindex="-1"`, or `no-tab` on a design-system control that keeps its tab stop in its own shadow root). Arrows move focus only; selection stays consumer-managed. Two types answer differently, and both say so on screen before you touch a key: a listbox runs its keyboard from its search field, and a reorderable list moves rows with the arrows. In `type="listbox"` the list owns a native `<input role="combobox">` (mirroring how `nldd-combo-box` wires an input to a slotted listbox). Keyboard, handled on the input so focus never leaves it: - ArrowDown / ArrowUp — move the active option among the VISIBLE (non-`[hidden]`) options (wrap around). - Home / End — first / last visible option. - Enter — activate the active option by triggering its inner action (a link navigates, a button fires the consumer's handler). Selection stays consumer-managed. - Escape — clear the search value (and refire `input`). On every active change the input's `aria-activedescendant` is set to the active option's id and the option is scrolled into view. The active option (`_highlighted` on the item, a highlight) is distinct from `selected`. Filtering is the consumer's job: listen to `input` (`{ detail: { value } }`) and toggle `[hidden]` on items; after the visible set changes the list resets the active option to the first visible one. `reorderable` and the roving arrow keys are ignored in listbox mode (listbox has its own keyboard). A tree adds to that keyboard, and counts the rows of an open branch as part of the order the arrows walk: - ArrowRight — opens a closed branch; on an open one it steps to its first child. - ArrowLeft — closes an open branch; on a leaf it steps out to the parent row. - Enter — follows the row: its own link or button, or on a segmented branch the first action that is not the chevron. A branch with only a chevron folds instead. - Space — open and close, the same as Right and Left. Only while focus sits on the row itself: a row that is its own control, and a segmented action you tabbed into, handle both keys themselves. Opening and closing runs through the row's own disclosure control — the segment marked `disclosure`, or the row itself when it is a button. The list activates that control rather than writing `expanded`, so the state keeps being set in one place: the consumer's handler. A row that is a link is never activated this way, since that would navigate away. The tree is one tab stop. Focus lands on the row itself when the row has no control of its own, because that is where `treeitem` sits and it makes assistive technology announce the row rather than a button inside it. Tab then walks the controls of THAT row (a chevron beside a checkbox, say) and leaves the list after the last one. A deliberate deviation: strictly speaking a row with several controls is a `treegrid`, not a `tree`. We keep the tree semantics — level and set size are what matters here, not rows and columns — and borrow the "Tab within the row" behavior from the grid pattern. Should a tree with real columns come up, that is when `treegrid` earns its own type. On reorder (type="list" + reorderable), the list dispatches `nldd-reorder` with `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their data model that renders the DOM). Focus is restored to the moved item's drag handle via a single `requestAnimationFrame` — this assumes the consumer reorders **synchronously** in the event handler. Async renderers (React, Vue, …) that update the DOM on a later tick will miss the focus restore and should manage focus themselves after their render commits. */
 		'nldd-list': DefineComponent<NLDDListProps>;
-		/** A row within an `nldd-list`. Renders as a link when `href` is set, as a checkbox when `checkbox` is set, as a button when `button` is set, or as a plain container otherwise. All cells and action segmented actions share one flat slot, in source order. Two rules govern every row: 1. State fills always paint the WIDENED row geometry — the row box extended by the indicator inline inset on both sides — whether or not the row is interactive. Paint never differs between a selected plain row and a selected interactive row. 2. The widened strip belongs to the ROW, never to a segment. A row with any action (its own `href`/`button`/`checkbox`, or a slotted segment) pulls itself outward (`is-interactive` host class → negative inline margin) and pads the row block back by the same amount, so content stays on the grid. A row-wide action owns that padding itself, making the whole widened box one hit area; slotted segmented actions stay in the grid, so their footprint is position-independent and tree columns line up at any depth. By default the divider starts at the row's first text or title cell, so the line lands on the words rather than on whatever leads up to them — an icon, an avatar, a checkbox, or the spacers a tree indents with. Rows of different shapes then still line their dividers up with each other, and a tree's dividers step inward with its indentation. Text inside an `nldd-list-item-action` counts as the row's content, and the marker is that text cell rather than the action: the action carries its own inline padding, so its edge sits before the words. A row with no text or title cell keeps the full content width. Mark a cell with `divider-start` and/or `divider-end` to place it yourself instead — an explicit marker replaces the derived one entirely, so `divider-start` on the leading cell restores the full-width line. Multiple markers resolve as the union: first `divider-start` through last `divider-end`. A start past the last end is an authoring error — the item DEV-warns and falls back to the full content width. A branch row can disclose its children in two ways: a dedicated `nldd-list-item-action[disclosure]` segment (only the chevron is clickable), or the row itself as the control (`button` + `expanded`, the whole row toggles). In the second case, mark the chevron's `nldd-icon-cell` with `disclosure` and the row turns it with `expanded` — the same affordance, without having to trade a clickable row for a turning chevron. `checkbox` makes the WHOLE row the control: the inner action becomes a `role="checkbox"` button carrying `aria-checked`, it toggles `checked` on activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph) before the text and mark it `aria-hidden` + non-focusable — the row already conveys role and state, and a second focusable control would double the tab stops. Do NOT nest a real `<input type="checkbox">` in the action: interactive content inside a `<button>` is invalid HTML and AT announces the button, not the checked state. A `<label>` variant is not offered for the same reason it cannot work — label-to-input association walks the DOM tree, and a slotted input is not a descendant of a label in the shadow root. When it renders as a link, `target` and `rel` are forwarded to the inner `<a>` (e.g. `target="_blank" rel="noopener noreferrer"`). With `target="_blank"` the item also injects a visually hidden "opens in new tab" announcement for assistive technology (WCAG 2.1 SC 3.2.2). The item synchronizes its ARIA with its parent `nldd-list`'s `type`: - `list` parent → `role="listitem"` - `navigation` parent → `role="listitem"` + `aria-current="page"` on the inner `<a>` / `<button>` when `selected` - `listbox` parent → `role="option"` + `aria-selected` reflecting `selected`. The list points its search input's `aria-activedescendant` at the active option via `_highlighted` (separate from `selected`). */
+		/** A row within an `nldd-list`. Renders as a link when `href` is set, as a checkbox when `checkbox` is set, as a button when `button` is set, or as a plain container otherwise. All cells and segments share one flat slot, in source order. Two rules govern every row: 1. State fills always paint the WIDENED row geometry — the row box extended by the indicator inline inset on both sides — whether or not the row is interactive. Paint never differs between a selected plain row and a selected interactive row. 2. The widened strip belongs to the ROW, never to a segment. A row with any action (its own `href`/`button`/`checkbox`, or a slotted segment) pulls itself outward (`is-interactive` host class → negative inline margin) and pads the row block back by the same amount, so content stays on the grid. A row-wide action owns that padding itself, making the whole widened box one hit area; slotted segments stay in the grid, so their footprint is position-independent and tree columns line up at any depth. By default the divider starts at the row's first text or title cell, so the line lands on the words rather than on whatever leads up to them — an icon, an avatar, a checkbox, or the spacers a tree indents with. Rows of different shapes then still line their dividers up with each other, and a tree's dividers step inward with its indentation. Text inside an `nldd-list-item-segment` counts as the row's content, and the marker is that text cell rather than the action: the action carries its own inline padding, so its edge sits before the words. A row with no text or title cell keeps the full content width. Mark a cell with `divider-start` and/or `divider-end` to place it yourself instead — an explicit marker replaces the derived one entirely, so `divider-start` on the leading cell restores the full-width line. Multiple markers resolve as the union: first `divider-start` through last `divider-end`. A start past the last end is an authoring error — the item DEV-warns and falls back to the full content width. A branch row can disclose its children in two ways: a dedicated `nldd-list-item-segment[disclosure]` segment (only the chevron is clickable), or the row itself as the control (`button` + `expanded`, the whole row toggles). In the second case, mark the chevron's `nldd-icon-cell` with `disclosure` and the row turns it with `expanded` — the same affordance, without having to trade a clickable row for a turning chevron. `checkbox` makes the WHOLE row the control: the inner action becomes a `role="checkbox"` button carrying `aria-checked`, it toggles `checked` on activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph) before the text and mark it `aria-hidden` + non-focusable — the row already conveys role and state, and a second focusable control would double the tab stops. Do NOT nest a real `<input type="checkbox">` in the action: interactive content inside a `<button>` is invalid HTML and AT announces the button, not the checked state. A `<label>` variant is not offered for the same reason it cannot work — label-to-input association walks the DOM tree, and a slotted input is not a descendant of a label in the shadow root. When it renders as a link, `target` and `rel` are forwarded to the inner `<a>` (e.g. `target="_blank" rel="noopener noreferrer"`). With `target="_blank"` the item also injects a visually hidden "opens in new tab" announcement for assistive technology (WCAG 2.1 SC 3.2.2). The item synchronizes its ARIA with its parent `nldd-list`'s `type`: - `list` parent → `role="listitem"` - `navigation` parent → `role="listitem"` + `aria-current="page"` on the inner `<a>` / `<button>` when `selected` - `listbox` parent → `role="option"` + `aria-selected` reflecting `selected`. The list points its search input's `aria-activedescendant` at the active option via `_highlighted` (separate from `selected`). */
 		'nldd-list-item': DefineComponent<NLDDListItemProps>;
-		/** A segmented action inside an `nldd-list-item`: it groups a run of cells and makes just that run clickable. Use it when a row needs more than one action — a tree row whose chevron expands while the label toggles a checkbox, or a row that navigates with a separate button beside it. Put it in the row where its cells would go: the item has one flat slot, and a segmented action takes the place of the cells it covers. Where the divider starts or stops is marked on the cells themselves (`divider-start` / `divider-end`), not by the slot an action sits in. A row is EITHER row-level interactive (`href` / `button` / `checkbox` on the `nldd-list-item`) OR segmented (one or more of these). Both at once nests a control inside a control, which is invalid HTML; the item DEV-warns. Unlike the row-wide action this does not bleed outward: a segmented action sits between siblings, so an outward inset would overlap them. It owns its inline padding and never drops below the row's control size, so an icon-only one still meets the WCAG 2.5.8 target size — do not add spacer cells inside it for room or hit area, that doubles the space. In a `type="listbox"` list the segmented action renders as a plain container (no control, not focusable) and DEV-warns: an `option` may not contain interactive descendants. The cells render unchanged, so nothing shifts. */
-		'nldd-list-item-action': DefineComponent<NLDDListItemActionProps>;
+		/** A segment inside an `nldd-list-item`: it groups a run of cells and makes just that run clickable. Use it when a row needs more than one segment — a tree row whose chevron expands while the label toggles a checkbox, or a row that navigates with a separate button beside it. Put it in the row where its cells would go: the item has one flat slot, and a segment takes the place of the cells it covers. Where the divider starts or stops is marked on the cells themselves (`divider-start` / `divider-end`), not by the slot a segment sits in. A row is EITHER row-level interactive (`href` / `button` / `checkbox` on the `nldd-list-item`) OR segmented (one or more of these). Both at once nests a control inside a control, which is invalid HTML; the item DEV-warns. Unlike the row-wide action this does not bleed outward: a segment sits between siblings, so an outward inset would overlap them. It owns its inline padding and never drops below the row's control size, so an icon-only one still meets the WCAG 2.5.8 target size — do not add spacer cells inside it for room or hit area, that doubles the space. In a `type="listbox"` list the segment renders as a plain container (no control, not focusable) and DEV-warns: an `option` may not contain interactive descendants. The cells render unchanged, so nothing shifts. */
+		'nldd-list-item-segment': DefineComponent<NLDDListItemSegmentProps>;
 		/** A floating menu component using the Popover API. Positioned relative to an anchor element using Floating UI. Supports filtering, keyboard navigation, and highlight management. Use nldd-menu-item and nldd-menu-divider as children. Note: Only type="button" items are supported when used inside nldd-combo-box-field. Radio and checkbox types may be used in standalone menus. */
 		'nldd-menu': DefineComponent<NLDDMenuProps>;
 		/** Horizontale rij van nldd-menu-bar-item elementen met automatische overflow detectie. Items die niet passen worden verborgen achter een overflow button met een popover menu. */
@@ -3577,6 +3633,8 @@ declare module 'vue' {
 		'nldd-table-row': DefineComponent<NLDDTableRowProps>;
 		/** A compact property that has been assigned to something: a category, a type, a role, a certification. What it says changes only when someone edits the content. A tag is not interactive. Do not use it for a state the system keeps itself, such as "Active" or "Expired", because that is `nldd-badge`. If the user can remove the thing or click it, it is `nldd-token`. */
 		'nldd-tag': DefineComponent<NLDDTagProps>;
+		/** One run of body text at a size from the type scale. It is what you reach for where an app would otherwise write a bare `<p>` and inherit whatever the page happens to set: a line under a title, a sentence in a panel, a caption. Every combination it offers exists as a token, so it cannot invent typography — it only names what the scale already has. The three axes are the same three the tokens carry: size, weight and line height. Not for headings, which is `nldd-title`, and not for a block of prose with its own rhythm, spacing and media widths, which is `nldd-rich-text`. This is one run of text and nothing around it. Color follows the context channel a list item, menu or table sets on its content, so text inside a row travels with that row as it is hovered or selected. Standalone that channel is unset and the semantic color answers. */
+		'nldd-text': DefineComponent<NLDDTextProps>;
 		/** A cell component for displaying text content in lists with configurable alignment, size and color. This is the most fundamental list cell component. `vertical-alignment="center"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment="top"`. Each text region (overline, main text, supporting text) accepts either a string attribute or slotted DOM content. The slot is the source of truth: if the consumer provides slotted content, it replaces the attribute-based render for that region. Use slots when you need inline elements like `<nldd-tag>`, `<a>` or `<nldd-icon>` mixed with text. Note that `query` highlighting and `**bold**` parsing only apply to the attribute path — slotted content is rendered as-is. */
 		'nldd-text-cell': DefineComponent<NLDDTextCellProps>;
 		/** 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. */

package/dist/utilities/implicit-submission.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Enter in a single-line field submits the form it belongs to.
+ *
+ * The browser does this by itself and calls it implicit submission, but only
+ * for a control that has a form owner. The real `<input>` of an nldd field
+ * lives in a shadow root, and form ownership does not cross that boundary:
+ * `input.form` is null, so the browser has no form to submit and nothing
+ * happens. The component is form-associated through ElementInternals, which
+ * does know the form, so the behavior is handed back over that connection. It
+ * mirrors what `nldd-button type="submit"` already does from the other side.
+ */
+/**
+ * Submits the form this field belongs to, under the same conditions the browser
+ * uses.
+ *
+ * Does nothing when something already handled the Enter. A component that owns
+ * the key calls `preventDefault` when it acts on it and leaves it alone when it
+ * does not, so an open date picker keeps its Enter and a token field that
+ * commits nothing lets the form through.
+ *
+ * Without a submit button the specification submits only when the form holds a
+ * single field that blocks implicit submission. Reproducing that rule matters
+ * more than it looks: an Enter that behaves differently inside this design
+ * system than outside it is worse than one that does nothing.
+ *
+ * @returns whether the form was submitted, so a caller can tell.
+ */
+export declare function submitOnEnter(host: HTMLElement & {
+    internals: ElementInternals;
+}, event: KeyboardEvent): boolean;
+//# sourceMappingURL=implicit-submission.d.ts.map

package/dist/utilities/implicit-submission.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"implicit-submission.d.ts","sourceRoot":"","sources":["../../src/utilities/implicit-submission.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AA0BH;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAC5B,IAAI,EAAE,WAAW,GAAG;IAAE,SAAS,EAAE,gBAAgB,CAAA;CAAE,EACnD,KAAK,EAAE,aAAa,GAClB,OAAO,CAcT"}

package/dist/utilities/implicit-submission.js

@@ -0,0 +1,65 @@
+/**
+ * Enter in a single-line field submits the form it belongs to.
+ *
+ * The browser does this by itself and calls it implicit submission, but only
+ * for a control that has a form owner. The real `<input>` of an nldd field
+ * lives in a shadow root, and form ownership does not cross that boundary:
+ * `input.form` is null, so the browser has no form to submit and nothing
+ * happens. The component is form-associated through ElementInternals, which
+ * does know the form, so the behavior is handed back over that connection. It
+ * mirrors what `nldd-button type="submit"` already does from the other side.
+ */
+/** Input types that block implicit submission, per the HTML specification. */
+const BLOCKING_INPUT_TYPES = new Set([
+    'text', 'search', 'url', 'tel', 'email', 'password',
+    'date', 'month', 'week', 'time', 'datetime-local', 'number',
+]);
+/**
+ * Whether this control counts for the "more than one field" rule below. Native
+ * inputs are classified by type, the way the specification does it; an nldd
+ * field says so itself with `static blocksImplicitSubmission = true`.
+ */
+function blocksImplicitSubmission(el) {
+    if (el instanceof HTMLInputElement)
+        return BLOCKING_INPUT_TYPES.has(el.type);
+    return el.constructor.blocksImplicitSubmission === true;
+}
+/**
+ * The button the browser would press. A `<button>` without a type is a submit
+ * button, and `nldd-button type="submit"` carries the same attribute.
+ */
+function hasDefaultButton(form) {
+    return form.querySelector('button:not([type]), [type="submit"], [type="image"]') !== null;
+}
+/**
+ * Submits the form this field belongs to, under the same conditions the browser
+ * uses.
+ *
+ * Does nothing when something already handled the Enter. A component that owns
+ * the key calls `preventDefault` when it acts on it and leaves it alone when it
+ * does not, so an open date picker keeps its Enter and a token field that
+ * commits nothing lets the form through.
+ *
+ * Without a submit button the specification submits only when the form holds a
+ * single field that blocks implicit submission. Reproducing that rule matters
+ * more than it looks: an Enter that behaves differently inside this design
+ * system than outside it is worse than one that does nothing.
+ *
+ * @returns whether the form was submitted, so a caller can tell.
+ */
+export function submitOnEnter(host, event) {
+    if (event.key !== 'Enter' || event.isComposing || event.defaultPrevented)
+        return false;
+    const form = host.internals.form;
+    if (!form)
+        return false;
+    if (!hasDefaultButton(form)) {
+        const blocking = Array.from(form.elements).filter(blocksImplicitSubmission);
+        if (blocking.length > 1)
+            return false;
+    }
+    event.preventDefault();
+    form.requestSubmit();
+    return true;
+}
+//# sourceMappingURL=implicit-submission.js.map

package/dist/utilities/implicit-submission.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"implicit-submission.js","sourceRoot":"","sources":["../../src/utilities/implicit-submission.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,8EAA8E;AAC9E,MAAM,oBAAoB,GAAG,IAAI,GAAG,CAAC;IACpC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU;IACnD,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,QAAQ;CAC3D,CAAC,CAAC;AAEH;;;;GAIG;AACH,SAAS,wBAAwB,CAAC,EAAW;IAC5C,IAAI,EAAE,YAAY,gBAAgB;QAAE,OAAO,oBAAoB,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IAC7E,OAAQ,EAAE,CAAC,WAAsD,CAAC,wBAAwB,KAAK,IAAI,CAAC;AACrG,CAAC;AAED;;;GAGG;AACH,SAAS,gBAAgB,CAAC,IAAqB;IAC9C,OAAO,IAAI,CAAC,aAAa,CAAC,qDAAqD,CAAC,KAAK,IAAI,CAAC;AAC3F,CAAC;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,aAAa,CAC5B,IAAmD,EACnD,KAAoB;IAEpB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,gBAAgB;QAAE,OAAO,KAAK,CAAC;IAEvF,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IACjC,IAAI,CAAC,IAAI;QAAE,OAAO,KAAK,CAAC;IAExB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC;QAC7B,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC;QAC5E,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO,KAAK,CAAC;IACvC,CAAC;IAED,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,OAAO,IAAI,CAAC;AACb,CAAC"}

package/dist/utilities/owned-attribute.d.ts

@@ -0,0 +1,19 @@
+/**
+ * An attribute one component hands to another without overruling what is
+ * already there.
+ *
+ * The closer to the control, the more specific, so the heavier it weighs. An
+ * `aria-label` on a slotted `<select>` beats the `accessible-label` on the
+ * wrapper around it, which beats the caption of the `nldd-form-field` above
+ * that. Every layer does two things and no more: it fills a gap, and it takes
+ * back only what it wrote itself.
+ *
+ * Without that second half a component reads "I have no name to give" as
+ * "remove the name that is there", which is how a documented way of naming a
+ * control quietly stopped working.
+ *
+ * @param applied what this component wrote here last time, or null
+ * @returns the new value to remember, to pass back in on the next call
+ */
+export declare function setOwnedAttribute(el: Element, name: string, value: string, applied: string | null): string | null;
+//# sourceMappingURL=owned-attribute.d.ts.map

package/dist/utilities/owned-attribute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"owned-attribute.d.ts","sourceRoot":"","sources":["../../src/utilities/owned-attribute.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAChC,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,GAAG,IAAI,GACpB,MAAM,GAAG,IAAI,CAcf"}

package/dist/utilities/owned-attribute.js

@@ -0,0 +1,32 @@
+/**
+ * An attribute one component hands to another without overruling what is
+ * already there.
+ *
+ * The closer to the control, the more specific, so the heavier it weighs. An
+ * `aria-label` on a slotted `<select>` beats the `accessible-label` on the
+ * wrapper around it, which beats the caption of the `nldd-form-field` above
+ * that. Every layer does two things and no more: it fills a gap, and it takes
+ * back only what it wrote itself.
+ *
+ * Without that second half a component reads "I have no name to give" as
+ * "remove the name that is there", which is how a documented way of naming a
+ * control quietly stopped working.
+ *
+ * @param applied what this component wrote here last time, or null
+ * @returns the new value to remember, to pass back in on the next call
+ */
+export function setOwnedAttribute(el, name, value, applied) {
+    const current = el.getAttribute(name);
+    // Someone else's value. Leave it alone, and keep remembering ours as it was,
+    // so a later change of theirs does not suddenly look like ours.
+    if (current !== null && current !== applied)
+        return applied;
+    if (value) {
+        el.setAttribute(name, value);
+        return value;
+    }
+    if (current !== null)
+        el.removeAttribute(name);
+    return null;
+}
+//# sourceMappingURL=owned-attribute.js.map

package/dist/utilities/owned-attribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"owned-attribute.js","sourceRoot":"","sources":["../../src/utilities/owned-attribute.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,iBAAiB,CAChC,EAAW,EACX,IAAY,EACZ,KAAa,EACb,OAAsB;IAEtB,MAAM,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAEtC,6EAA6E;IAC7E,gEAAgE;IAChE,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,OAAO;QAAE,OAAO,OAAO,CAAC;IAE5D,IAAI,KAAK,EAAE,CAAC;QACX,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC7B,OAAO,KAAK,CAAC;IACd,CAAC;IAED,IAAI,OAAO,KAAK,IAAI;QAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC/C,OAAO,IAAI,CAAC;AACb,CAAC"}

package/dist/utilities/scroll-mode-controller.d.ts

@@ -23,7 +23,15 @@ export interface ScrollModeProvider {
 }
 /** Nearest ancestor app-view (light-DOM `closest`; slotted layers stay in the
  *  consumer's light tree so this reaches across the slot boundaries), or null
- *  when a layer is used stand-alone (e.g. a bare page in the docs). */
+ *  when a layer is used stand-alone (e.g. a bare page in the docs).
+ *
+ *  An overlay ends the search: a sheet or a modal dialog is its own scroll
+ *  container and its own top edge, so a page inside one owns its scroller
+ *  whatever the app around it does. Without this the app-view would push its
+ *  root mode straight through the overlay and the page's sticky header would
+ *  stick against the document, over the content of the overlay. The overlays
+ *  reset --context-scroll-mode as well, which is what the stand-alone read
+ *  below then finds. */
 export declare function findScrollModeProvider(host: Element): ScrollModeProvider | null;
 /**
  * Reads the inherited `--context-scroll-mode` and reflects it to the host's

package/dist/utilities/scroll-mode-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-mode-controller.d.ts","sourceRoot":"","sources":["../../src/utilities/scroll-mode-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3C;;iDAEiD;AACjD,eAAO,MAAM,0BAA0B,8BAA8B,CAAC;AAEtE,MAAM,WAAW,wBAAwB;IACxC,YAAY,EAAE,OAAO,CAAC;CACtB;AAED,qEAAqE;AACrE,MAAM,WAAW,kBAAkB;IAClC;;;;OAIG;IACH,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CACxC;AAED,qFAAqF;AACrF,MAAM,WAAW,kBAAkB;IAClC,sBAAsB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC3D,wBAAwB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;CAC7D;AAED;;uEAEuE;AACvE,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,OAAO,GAAG,kBAAkB,GAAG,IAAI,CAG/E;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,oBAAqB,YAAW,kBAAkB,EAAE,kBAAkB;IAClF,IAAI,EAAE,UAAU,CAAY;IAE5B,OAAO,CAAC,KAAK,CAAuC;IACpD,OAAO,CAAC,SAAS,CAAC,CAA6B;IAC/C,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,SAAS,CAAmC;gBAExC,IAAI,EAAE,sBAAsB,GAAG,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI;IAM7F,aAAa,IAAI,IAAI;IAkBrB,gBAAgB,IAAI,IAAI;IAUxB;;;;;;;OAOG;IACH,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI;IAQvC,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,SAAS,CAMf;IAEF,gFAAgF;IAChF,IAAI,IAAI,IAAI;CAGZ"}
+{"version":3,"file":"scroll-mode-controller.d.ts","sourceRoot":"","sources":["../../src/utilities/scroll-mode-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3C;;iDAEiD;AACjD,eAAO,MAAM,0BAA0B,8BAA8B,CAAC;AAEtE,MAAM,WAAW,wBAAwB;IACxC,YAAY,EAAE,OAAO,CAAC;CACtB;AAED,qEAAqE;AACrE,MAAM,WAAW,kBAAkB;IAClC;;;;OAIG;IACH,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CACxC;AAED,qFAAqF;AACrF,MAAM,WAAW,kBAAkB;IAClC,sBAAsB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC3D,wBAAwB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;CAC7D;AAED;;;;;;;;;;wBAUwB;AACxB,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,OAAO,GAAG,kBAAkB,GAAG,IAAI,CAG/E;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,oBAAqB,YAAW,kBAAkB,EAAE,kBAAkB;IAClF,IAAI,EAAE,UAAU,CAAY;IAE5B,OAAO,CAAC,KAAK,CAAuC;IACpD,OAAO,CAAC,SAAS,CAAC,CAA6B;IAC/C,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,SAAS,CAAmC;gBAExC,IAAI,EAAE,sBAAsB,GAAG,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI;IAM7F,aAAa,IAAI,IAAI;IAkBrB,gBAAgB,IAAI,IAAI;IAUxB;;;;;;;OAOG;IACH,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI;IAQvC,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,SAAS,CAMf;IAEF,gFAAgF;IAChF,IAAI,IAAI,IAAI;CAGZ"}

package/dist/utilities/scroll-mode-controller.js

@@ -4,9 +4,17 @@
 export const SINGLE_COLUMN_CHANGE_EVENT = 'nldd-single-column-change';
 /** Nearest ancestor app-view (light-DOM `closest`; slotted layers stay in the
  *  consumer's light tree so this reaches across the slot boundaries), or null
- *  when a layer is used stand-alone (e.g. a bare page in the docs). */
+ *  when a layer is used stand-alone (e.g. a bare page in the docs).
+ *
+ *  An overlay ends the search: a sheet or a modal dialog is its own scroll
+ *  container and its own top edge, so a page inside one owns its scroller
+ *  whatever the app around it does. Without this the app-view would push its
+ *  root mode straight through the overlay and the page's sticky header would
+ *  stick against the document, over the content of the overlay. The overlays
+ *  reset --context-scroll-mode as well, which is what the stand-alone read
+ *  below then finds. */
 export function findScrollModeProvider(host) {
-    const el = host.closest?.('nldd-app-view');
+    const el = host.closest?.('nldd-app-view, nldd-sheet, nldd-modal-dialog');
     return el && 'registerScrollConsumer' in el ? el : null;
 }
 /**