@nldd/design-system 0.8.82 → 0.8.83

package/dist/components/components.js

@@ -3,8 +3,8 @@ import { n as slottedReset, t as inheritedTextReset } from "./shadow-resets-aG-r
 import { t as __decorate } from "./decorate-BKn10QQi.js";
 import { t as withTranslations } from "./with-translations-DzAdFTK8.js";
 import { t as reflectNonDefault } from "./reflect-non-default-OLaK60rT.js";
-import { i as PopupAnchorController, n as NLDDTooltip, r as NLDDActivityIndicator, t as NLDDIconButton } from "./icon-button-BAkUJTn6.js";
-import { t as NLDDIcon } from "./icon-CIpJq_cf.js";
+import { i as PopupAnchorController, n as NLDDTooltip, r as NLDDActivityIndicator, t as NLDDIconButton } from "./icon-button-BYy6hnAY.js";
+import { t as NLDDIcon } from "./icon-C1Kikpol.js";
 import { n as isPointerMode, r as isTouchMode, t as isKeyboardMode } from "./input-modality-DhTeUxKi.js";
 import { t as breakpoints } from "./breakpoints-CkxsiRgH.js";
 import { t as VisibilityMixin } from "./visibility-mixin-GxbwkBb1.js";
@@ -664,7 +664,7 @@ function renderContent(component) {
 		` : nothing}
 	`;
 }
-function template$22(helpers) {
+function template$23(helpers) {
 	const content = renderContent(this);
 	const buttonClass = ["button", this.supportingText ? "has-supporting-text" : ""].filter(Boolean).join(" ");
 	const ariaExpanded = this.expandable || !!this.popupType ? String(this.expanded) : this.expanded ? "true" : nothing;
@@ -694,6 +694,7 @@ function template$22(helpers) {
 				aria-haspopup=${this.popupType || nothing}
 				aria-expanded=${ariaExpanded}
 				aria-busy=${ariaBusy}
+				tabindex=${this.noTab ? "-1" : nothing}
 				@pointerdown=${this._popup.handlePointerdown}
 				@click=${helpers.handleClick}
 			>
@@ -713,6 +714,7 @@ function template$22(helpers) {
 			aria-haspopup=${this.popupType || nothing}
 			aria-expanded=${ariaExpanded}
 			aria-busy=${ariaBusy}
+			tabindex=${this.noTab ? "-1" : nothing}
 			popovertarget=${this.popovertarget || nothing}
 			.popoverTargetElement=${this.popoverTargetElement}
 			.popoverTargetAction=${this.popoverTargetAction}
@@ -750,6 +752,7 @@ var nlddButtonTranslations = { "components.button.opens-in-new-tab-label": "Open
 * @attr {string} supporting-text - Supporting text shown below the text (md/lg) or after it (sm/xs), in a secondary color. Part of the accessible name (unless `accessible-label` is set, which replaces the whole accessible name).
 * @attr {boolean} single-line - When true, truncates overflowing text with an ellipsis instead of letting it wrap. Requires the button (or an ancestor) to constrain the width.
 * @attr {boolean} no-highlight-border - Removes the per-variant highlight border (e.g. when nldd-button-bar draws a single group border instead).
+* @attr {boolean} no-tab - 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.
 * @attr {string} start-icon - Icon name for the start icon (before text)
 * @attr {string} end-icon - Icon name for the end icon (after text)
 * @attr {string} accessible-label - Accessible label for the button, overrides text for screen readers
@@ -775,6 +778,7 @@ var NLDDButton = (_NLDDButton = class NLDDButton extends withTranslations(LitEle
 		this.horizontalAlignment = "";
 		this.width = "";
 		this.maxWidth = "";
+		this.noTab = false;
 		this.expandable = false;
 		this.expanded = false;
 		this.type = "button";
@@ -839,7 +843,7 @@ var NLDDButton = (_NLDDButton = class NLDDButton extends withTranslations(LitEle
 		this.shadowRoot?.querySelector(".button")?.focus(options);
 	}
 	render() {
-		return template$22.call(this, { handleClick: this._handleClick.bind(this) });
+		return template$23.call(this, { handleClick: this._handleClick.bind(this) });
 	}
 }, _NLDDButton.styles = buttonStyles, _NLDDButton.formAssociated = true, _NLDDButton);
 __decorate([property({
@@ -864,6 +868,11 @@ __decorate([property({
 	attribute: "max-width",
 	converter: reflectNonDefault("")
 })], NLDDButton.prototype, "maxWidth", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "no-tab"
+})], NLDDButton.prototype, "noTab", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true,
@@ -1050,7 +1059,7 @@ var splitButtonStyles = css`
 `;
 //#endregion
 //#region src/components/actions/split-button/split-button.template.ts
-function template$21() {
+function template$22() {
 	return html`
 		<div class="split-button">
 			<nldd-button
@@ -1832,7 +1841,7 @@ var iconCellStyles = css`
 `;
 //#endregion
 //#region src/components/lists-and-tables/cells/icon-cell/icon-cell.template.ts
-function template$20() {
+function template$21() {
 	return html`
 		${this.icon ? html`<nldd-icon name=${this.icon}></nldd-icon>` : html`<slot></slot>`}
 	`;
@@ -1865,7 +1874,7 @@ var NLDDIconCell = (_NLDDIconCell = class NLDDIconCell extends VisibilityMixin(L
 		this.icon = "";
 	}
 	render() {
-		return template$20.call(this);
+		return template$21.call(this);
 	}
 }, _NLDDIconCell.styles = iconCellStyles, _NLDDIconCell);
 __decorate([property({
@@ -2207,7 +2216,7 @@ function renderQueryMark(text, query, mode = "predictive") {
 }
 //#endregion
 //#region src/components/lists-and-tables/cells/text-cell/text-cell.template.ts
-function template$19() {
+function template$20() {
 	return html`
 		<p
 			class="text-cell__overline"
@@ -2342,7 +2351,7 @@ var NLDDTextCell = (_NLDDTextCell = class NLDDTextCell extends VisibilityMixin(L
 		else this.style.removeProperty("--_min-height");
 	}
 	render() {
-		return template$19.call(this);
+		return template$20.call(this);
 	}
 }, _NLDDTextCell.styles = [textCellStyles], _NLDDTextCell);
 __decorate([property({
@@ -2549,7 +2558,7 @@ var keyboardShortcutStyles = css`
 `;
 //#endregion
 //#region src/components/content/keyboard-shortcut/keyboard-shortcut.template.ts
-function template$18(component) {
+function template$19(component) {
 	const keys = component._parsedKeys;
 	if (keys.length === 0) return html`
 			<kbd class="keyboard-shortcut">
@@ -2663,7 +2672,7 @@ var NLDDKeyboardShortcut = (_NLDDKeyboardShortcut = class NLDDKeyboardShortcut e
 		return spec.replace(/\+\+\+/g, `+${MARKER}+`).split("+").map((k) => k.trim().replace(new RegExp(MARKER, "g"), "+")).filter(Boolean);
 	}
 	render() {
-		return template$18(this);
+		return template$19(this);
 	}
 }, _NLDDKeyboardShortcut.styles = keyboardShortcutStyles, _NLDDKeyboardShortcut);
 __decorate([property({
@@ -2932,7 +2941,7 @@ var buttonGroupStyles = css`
 `;
 //#endregion
 //#region src/components/actions/button-group/button-group.template.ts
-function template$17() {
+function template$18() {
 	return html`
 	<div class="button-group">
 		<slot @slotchange=${this.handleSlotChange}></slot>
@@ -2973,7 +2982,7 @@ var NLDDButtonGroup = (_NLDDButtonGroup = class NLDDButtonGroup extends LitEleme
 		if (changedProperties.has("orientation") || changedProperties.has("size")) this.handleSlotChange();
 	}
 	render() {
-		return template$17.call(this);
+		return template$18.call(this);
 	}
 }, _NLDDButtonGroup.styles = buttonGroupStyles, _NLDDButtonGroup);
 __decorate([property({
@@ -4549,7 +4558,7 @@ var NLDDSplitButton = (_NLDDSplitButton = class NLDDSplitButton extends LitEleme
 		}
 	}
 	render() {
-		return template$21.call(this);
+		return template$22.call(this);
 	}
 }, _NLDDSplitButton.styles = splitButtonStyles, _NLDDSplitButton);
 __decorate([property({
@@ -4693,7 +4702,7 @@ var buttonBarStyles = css`
 `;
 //#endregion
 //#region src/components/actions/button-bar/button-bar.template.ts
-function template$16() {
+function template$17() {
 	return html`
 		<div class="button-bar"
 			part="bar"
@@ -4826,7 +4835,7 @@ var NLDDButtonBar = (_NLDDButtonBar = class NLDDButtonBar extends LitElement {
 		this._building = false;
 	}
 	render() {
-		return template$16.call(this);
+		return template$17.call(this);
 	}
 }, _NLDDButtonBar.styles = buttonBarStyles, _NLDDButtonBar);
 __decorate([property({
@@ -5245,7 +5254,7 @@ function toolbarTitleTemplate(component) {
 		<slot name="action"></slot>
 	`;
 }
-function template$15(component, hasCenterChildren, leftSpacerZero, rightSpacerZero, isSoloFluidItem, hasOverflow, menuOpen, label, centerOnly, t) {
+function template$16(component, hasCenterChildren, leftSpacerZero, rightSpacerZero, isSoloFluidItem, hasOverflow, menuOpen, label, centerOnly, t) {
 	return html`
 		<div class="toolbar"
 			role="toolbar"
@@ -5959,7 +5968,7 @@ var NLDDToolbar = (_NLDDToolbar = class NLDDToolbar extends LitElement {
 	render() {
 		const visibleNonDivider = this._allHostChildren().filter((c) => !this._overflowIds.has(c.id));
 		const isSoloFluid = this._soloFluid || visibleNonDivider.length === 1 && (visibleNonDivider[0].type === "title" || visibleNonDivider[0].type === "item" && visibleNonDivider[0].isFluid);
-		return template$15(this, this._centerChildren.length > 0, this._leftSpacerZero, this._rightSpacerZero, isSoloFluid, this._pinnedOverflowItems.length > 0 || this._overflowIds.size > 0, this._menuOpen, this.label, this._centerOnly, (key) => this._t(key));
+		return template$16(this, this._centerChildren.length > 0, this._leftSpacerZero, this._rightSpacerZero, isSoloFluid, this._pinnedOverflowItems.length > 0 || this._overflowIds.size > 0, this._menuOpen, this.label, this._centerOnly, (key) => this._t(key));
 	}
 }, _NLDDToolbar.styles = toolbarStyles, _NLDDToolbar);
 __decorate([property({
@@ -6061,8 +6070,12 @@ var avatarStyles = css`
 	   nldd-activity-indicator. The fill (not the text) color must resolve here,
 	   so .avatar keeps its inherited color and the contrast text lives on the
 	   child elements. */
+	/* color on the host: the contrast token reads currentColor, so the flip has to
+	   be computed against the same value the fill uses. */
 	:host([color="inherit"]) {
-		--_background-color: var(--context-content-color, currentColor);
+		color: var(--context-content-color, currentColor);
+
+		--_background-color: currentColor;
 		--_content-color: var(--semantics-content-contrast-color);
 	}
 
@@ -6536,7 +6549,7 @@ var blockquoteStyles = css`
 `;
 //#endregion
 //#region src/components/content/blockquote/blockquote.template.ts
-function template$14(component) {
+function template$15(component) {
 	return html`
 		<blockquote class="blockquote"
 			cite=${component.cite || nothing}
@@ -6583,7 +6596,7 @@ var NLDDBlockquote = (_NLDDBlockquote = class NLDDBlockquote extends LitElement
 		};
 	}
 	render() {
-		return template$14(this);
+		return template$15(this);
 	}
 }, _NLDDBlockquote.styles = blockquoteStyles, _NLDDBlockquote);
 __decorate([property({ type: String })], NLDDBlockquote.prototype, "cite", void 0);
@@ -8399,7 +8412,7 @@ var listStyles = css`
 `;
 //#endregion
 //#region src/components/lists-and-tables/list/list.template.ts
-var template$13 = ({ itemsLabel, hasToolbar, type, isEmpty, emptyText, emptySupportingText, listbox }) => {
+var template$14 = ({ itemsLabel, hasToolbar, type, isEmpty, emptyText, emptySupportingText, listbox }) => {
 	const isNavigation = type === "navigation";
 	const isListbox = type === "listbox";
 	const skipItemsLabel = isNavigation || isListbox;
@@ -8517,7 +8530,6 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		this.type = "list";
 		this.reorderable = false;
 		this.dividers = "always";
-		this.arrowNavigation = false;
 		this.height = "";
 		this.emptyText = "";
 		this.emptySupportingText = "";
@@ -8700,7 +8712,7 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 			if (!mutations.some((m) => {
 				if (m.type === "childList") return m.target === this || isRow(m.target);
 				if (m.type !== "attributes" || !isRow(m.target)) return false;
-				if (m.attributeName === "expanded") return true;
+				if (m.attributeName === "expanded" || m.attributeName === "disabled") return true;
 				return m.attributeName === "hidden" && (m.target.parentElement === this || isRow(m.target.parentElement));
 			})) return;
 			this._updateItems();
@@ -8710,7 +8722,11 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 			childList: true,
 			subtree: true,
 			attributes: true,
-			attributeFilter: ["hidden", "expanded"]
+			attributeFilter: [
+				"hidden",
+				"expanded",
+				"disabled"
+			]
 		});
 		this._applyHostType();
 	}
@@ -8734,7 +8750,7 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		this._cancelDrag();
 	}
 	updated(changed) {
-		if (changed.has("reorderable") || changed.has("type") || changed.has("arrowNavigation")) {
+		if (changed.has("reorderable") || changed.has("type")) {
 			if (this.reorderable && this.type !== "list" && false);
 			this._updateItems();
 			this._warnArrowNav();
@@ -8900,30 +8916,38 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		this._emitListboxInput("");
 		this._searchInput?.focus();
 	}
-	/** Arrow-navigation is effective only when reorderable isn't already claiming
-	*  the arrow keys for drag-reorder (reorderable wins). The guard also checks
-	*  `type === 'list'` on purpose: reorderable is inert without it, so there is no
-	*  conflict to resolve. `arrow-navigation reorderable` without `type="list"`
-	*  therefore keeps arrow-nav active (reorderable does nothing), and
-	*  `_warnArrowNav` likewise only warns for the real reorderable-list conflict. */
+	/**
+	* Every list answers to the arrow keys. There is no switch for it, on purpose:
+	* 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.
+	*
+	* Two lists answer differently, and you can see which before you touch a key:
+	* a listbox has a search field and runs its own keyboard from there, and a
+	* reorderable list uses the arrows to move rows. The guard checks
+	* `type === 'list'` because reorderable is inert without it, so there is no
+	* conflict to resolve.
+	*/
 	get _arrowNavActive() {
 		if (this.type === "listbox") return false;
-		if (this.type === "tree") return true;
-		return this.arrowNavigation && !(this.reorderable && this.type === "list");
+		return !(this.reorderable && this.type === "list");
 	}
 	/** Interactive, painted rows — the roving stops, in the order they appear on
-	*  screen. Non-interactive rows (no link/button) and hidden ones are skipped.
+	*  screen. Rows with nothing to operate and hidden ones are skipped.
 	*  Painted, not top-level: in a tree the rows of an open branch sit between
 	*  the branch and the next top-level row, and arrows have to walk them too. */
 	_getInteractiveItems() {
 		const painted = this._getPaintedRows();
 		if (this.type === "tree") return painted;
-		return painted.filter((row) => Boolean(row.href || row.button));
+		return painted.filter((row) => row._isRovingStop);
 	}
 	/** Push roving state onto the items, deferred to a microtask: _updateItems can
 	*  run inside the update lifecycle (firstUpdated/updated), and setting the
 	*  items' reactive state there would trip Lit's change-in-update warning.
-	*  Coalesced so repeated item updates schedule it only once. */
+	*  Coalesced so repeated item updates schedule it only once.
+	*
+	*  @internal Also called by a row whose content changed after the stops were
+	*  picked. */
 	_updateRoving() {
 		if (this._rovingScheduled) return;
 		this._rovingScheduled = true;
@@ -8941,7 +8965,8 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		rows.forEach((row) => {
 			row._arrowNavigation = active;
 		});
-		if (active) {
+		const interactive = active ? this._getInteractiveItems() : [];
+		if (interactive.length > 0) {
 			this.setAttribute("aria-keyshortcuts", "ArrowUp ArrowDown Home End");
 			this.setAttribute("aria-description", this._t("components.list.arrow-navigation-description-text"));
 		} else {
@@ -8954,7 +8979,6 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 			});
 			return;
 		}
-		const interactive = this._getInteractiveItems();
 		if (interactive.length === 0) return;
 		const entry = interactive.find((row) => row._rovingActive) ?? interactive.find((row) => row.selected) ?? interactive[0];
 		rows.forEach((row) => {
@@ -9023,15 +9047,26 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		event.preventDefault();
 		this._moveRovingTo(parent);
 	}
-	/** Tree only: Enter and Space open and close the row, the same thing Right and
-	*  Left do. Only when focus sits on the row ITSELF — a row that is its own
-	*  control, and a segmented action you tabbed into, handle both keys
-	*  natively, and acting here as well would toggle twice. */
+	/**
+	* Tree only, and only while focus sits on the row ITSELF: a row that is its
+	* own control, and a segment you tabbed into, handle both keys
+	* natively, and acting here as well would fire twice.
+	*
+	* Enter does what the row is for — it follows the row's own link or button,
+	* or on a branch cut into segments the first one that is not the chevron.
+	* Space folds, the same thing Right and Left do, because a chevron is a
+	* button and Space is what a button answers to. A branch with nothing but a
+	* chevron takes Enter for folding too, so the key is never dead.
+	*/
 	_onTreeActivate(event) {
 		const target = event.target;
 		if (!(target instanceof Element) || target.tagName.toLowerCase() !== "nldd-list-item") return;
 		const row = target;
 		if (row.shadowRoot?.activeElement) return;
+		if (event.key === "Enter" && row._activatePrimary()) {
+			event.preventDefault();
+			return;
+		}
 		if (row._activateDisclosure()) event.preventDefault();
 	}
 	_moveRovingTo(row) {
@@ -9161,7 +9196,7 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		}));
 	}
 	render() {
-		return template$13({
+		return template$14({
 			itemsLabel: this.accessibleLabel || this._t("components.list.items-accessible-label"),
 			hasToolbar: this._hasToolbar,
 			type: this.type,
@@ -9202,11 +9237,6 @@ __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("always")
 })], NLDDList.prototype, "dividers", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true,
-	attribute: "arrow-navigation"
-})], NLDDList.prototype, "arrowNavigation", void 0);
 __decorate([property({
 	type: String,
 	reflect: true
@@ -9267,8 +9297,6 @@ var listItemStyles = css`
 		--context-list-item-size: var(--semantics-controls-sm-min-size);
 	}
 
-	/* An interactive row widens by the indicator inset and pads the block back,
-	   so the content stays on the grid while the fill covers the wider box. */
 	:host(.is-interactive) {
 		/* Not the host's 100%: a width plus negative margins is over-constrained
 		   in block layout, so the row would shift instead of widen. */
@@ -9287,13 +9315,13 @@ var listItemStyles = css`
 		padding-inline: 0;
 	}
 
-	/* A segmented action at a row edge already owns the padding for that side,
+	/* A segment at a row edge already owns the padding for that side,
 	   so the row drops its own there. Mid-row it claims nothing. */
-	:host(.is-interactive.has-leading-action) .list-item {
+	:host(.is-interactive.has-leading-segment) .list-item {
 		padding-inline-start: 0;
 	}
 
-	:host(.is-interactive.has-trailing-action) .list-item {
+	:host(.is-interactive.has-trailing-segment) .list-item {
 		padding-inline-end: 0;
 	}
 
@@ -9378,6 +9406,14 @@ var listItemStyles = css`
 		cursor: var(--semantics-controls-link-cursor);
 	}
 
+	/* There is no disabled attribute for an anchor, so the row blocks the click
+	   itself and aria-disabled carries the state. */
+	button.list-item__action:disabled,
+	:host([disabled]) a.list-item__action {
+		cursor: default;
+		opacity: var(--primitives-opacity-disabled);
+	}
+
 	.list-item__opens-in-new-tab-hint {
 		position: absolute;
 		margin: -1px;
@@ -9392,9 +9428,7 @@ var listItemStyles = css`
 
 
 
-	/* The fill always covers the widened geometry: an interactive row is already
-	   widened, a plain row bleeds outward by the same amount. It sits on the
-	   control when the row is one, so hover / focus / press can drive it. */
+	/* On the control when the row is one, so hover, focus and press can drive it. */
 	.list-item:not(:has(.list-item__action))::before,
 	.list-item__action::before {
 		content: '';
@@ -9413,12 +9447,16 @@ var listItemStyles = css`
 		inset-inline: 0;
 	}
 
-	:host([selected]) {
+	/* data-current is set by the row itself when one of its own segments carries
+	   current, so a segmented row paints without one on the host. */
+	:host(:is([selected], [checkbox][checked])),
+	:host(:is([current], [data-current])) {
 		--_background-color: var(--components-list-item-is-selected-background-color);
 		--context-content-color: var(--components-list-item-is-selected-content-color);
 		--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
 	}
 
+
 	/* A checked checkbox action selects the whole row, so the fill runs across
 	   the disclosure action too instead of stopping at its boundary. */
 	.list-item.is-action-checked {
@@ -9427,49 +9465,124 @@ var listItemStyles = css`
 		--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
 	}
 
-	/* hover only on hover-capable devices: avoids touch-scroll flashing the
-	   hover state on the row under the finger */
+	/* Hover only on hover-capable devices, so a touch that turns into a scroll
+	   does not flash the row under the finger.
+
+	   The row hands its rung down to its segments through the two context
+	   variables at the end of each block: a segmented row has no control of its
+	   own, so the segment paints, and it must paint on the same scale as the
+	   row it sits in. */
 	@media (hover: hover) {
-		.list-item__action:hover {
+		:host(:not([disabled])) .list-item__action:hover {
 			--_background-color: var(--components-list-item-is-hovered-background-color);
 			--context-content-color: var(--components-list-item-is-hovered-content-color);
 			--context-content-secondary-color: var(--components-list-item-is-hovered-content-color);
 		}
 
-		:host([selected]) .list-item__action:hover {
-			--_background-color: var(--components-list-item-is-selected-background-color);
+		:host(:is([selected], [checkbox][checked]):not([disabled])) .list-item__action:hover,
+		:host(:is([current], [data-current]):not([disabled])) .list-item__action:hover {
+			--_background-color: var(--components-list-item-is-selected-is-hovered-background-color);
 			--context-content-color: var(--components-list-item-is-selected-content-color);
 			--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
 		}
+	}
 
-		:host([selected]) .list-item__action:focus:hover {
-			--_background-color: var(--components-list-item-is-highlighted-background-color);
-			--context-content-color: var(--components-list-item-is-highlighted-content-color);
-			--context-content-secondary-color: var(--components-list-item-is-highlighted-content-color);
+	:host(:is([selected], [checkbox][checked])) {
+		--context-list-item-hovered-background-color: var(--components-list-item-is-selected-is-hovered-background-color);
+		--context-list-item-hovered-content-color: var(--components-list-item-is-selected-content-color);
+		--context-list-item-active-background-color: var(--components-list-item-is-selected-is-active-background-color);
+	}
+
+	/* Pressing the row you are on lands on the accent whether or not focus got
+	   there first. Safari does not focus a button on click, and a press that
+	   waits for focus would go grey there while the other browsers go accent.
+	   Hover still follows the focus: that is the state, not the gesture. */
+	:host(:is([current], [data-current])) {
+		--context-list-item-hovered-background-color: var(--components-list-item-is-selected-is-hovered-background-color);
+		--context-list-item-hovered-content-color: var(--components-list-item-is-selected-content-color);
+		--context-list-item-active-background-color: var(--components-list-item-is-highlighted-is-active-background-color);
+		--context-list-item-active-content-color: var(--components-list-item-is-highlighted-content-color);
+	}
+
+	/* focus-within on the host, not on the row-wide control: focus inside a
+	   nested nldd-list-item-segment has to match, and a segmented row has no
+	   control of its own to key off.
+
+	   After the hover rules on purpose: a pointer that lands on the row is
+	   hovering it as well, and the state it just gave focus to has to win. */
+	:host(:is([current], [data-current]):focus-within) .list-item,
+	:host(:is([current], [data-current]):focus-within) .list-item__action {
+		--context-content-color: var(--components-list-item-is-highlighted-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-highlighted-content-color);
+	}
+
+	:host(:is([current], [data-current]):focus-within) {
+		--context-list-item-hovered-background-color: var(--components-list-item-is-highlighted-is-hovered-background-color);
+		--context-list-item-hovered-content-color: var(--components-list-item-is-highlighted-content-color);
+		--context-list-item-active-background-color: var(--components-list-item-is-highlighted-is-active-background-color);
+	}
+
+	:host(:is([current], [data-current]):focus-within) .list-item::before,
+	:host(:is([current], [data-current]):focus-within) .list-item__action::before {
+		background-color: var(--components-list-item-is-highlighted-background-color);
+	}
+
+	/* Only the row-wide control, never the row itself: on a segmented row the
+	   hovered segment deepens on its own, and a row that darkened as a whole
+	   would hide which segment you are on. */
+	@media (hover: hover) {
+		:host(:is([current], [data-current]):focus-within:not([disabled])) .list-item__action:hover::before {
+			background-color: var(--components-list-item-is-highlighted-is-hovered-background-color);
 		}
 	}
 
+	/* Two selectors, because pressing means hovering too and the hover rule
+	   above carries a pseudo-class more: the focused one has to match its
+	   weight to win, and the plain one catches Safari, where the mouse being
+	   down means the row is not focused at all. */
+	:host(:is([current], [data-current]):not([disabled])) .list-item__action.is-pressed::before,
+	:host(:is([current], [data-current]):focus-within:not([disabled])) .list-item__action.is-pressed::before {
+		background-color: var(--components-list-item-is-highlighted-is-active-background-color);
+	}
+
+	/* The content colour has to travel with the fill: the neutral press rule
+	   above sets it too, and black on a deep accent is unreadable. */
+	:host(:is([current], [data-current]):focus-within:not([disabled])) .list-item__action:hover {
+		--context-content-color: var(--components-list-item-is-highlighted-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-highlighted-content-color);
+	}
+
 	/* JS-driven rather than :active, so a touch that turns into a scroll clears
 	   the press (pointercancel) instead of flashing it. */
-	.list-item__action.is-pressed {
-		--_background-color: var(--components-list-item-is-hovered-background-color);
-		--context-content-color: var(--components-list-item-is-hovered-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-hovered-content-color);
+	:host(:not([disabled])) .list-item__action.is-pressed {
+		--_background-color: var(--components-list-item-is-active-background-color);
+		--context-content-color: var(--components-list-item-is-active-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-active-content-color);
 	}
 
-	:host([selected]) .list-item__action {
+	:host(:is([selected], [checkbox][checked]):not([disabled])) .list-item__action.is-pressed,
+	:host(:is([current], [data-current]):not([disabled])) .list-item__action.is-pressed {
+		--_background-color: var(--components-list-item-is-selected-is-active-background-color);
+		--context-content-color: var(--components-list-item-is-selected-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
+	}
+
+	:host(:is([selected], [checkbox][checked])) .list-item__action {
 		--_background-color: var(--components-list-item-is-selected-background-color);
 		--context-content-color: var(--components-list-item-is-selected-content-color);
 		--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
 	}
 
-	/* The strongest fill: a selected row that is pressed or focused, and the
-	   listbox active descendant (.is-highlighted, set by the list because focus
-	   stays in the search input). */
-	:host([selected]) .list-item__action.is-pressed,
-	:host([selected]) .list-item__action:focus,
+	/* .is-highlighted is set by the list: in a listbox the focus stays in the
+	   search input, so the option cannot carry the state itself. */
+	/* After the neutral press rules above, or black lands on a deep accent. */
+	:host(:is([current], [data-current]):not([disabled])) .list-item__action.is-pressed {
+		--context-content-color: var(--components-list-item-is-highlighted-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-highlighted-content-color);
+	}
+
 	.list-item.is-highlighted,
-	:host([selected]) .list-item.is-highlighted .list-item__action {
+	:host(:is([selected], [checkbox][checked])) .list-item.is-highlighted .list-item__action {
 		--_background-color: var(--components-list-item-is-highlighted-background-color);
 		--context-content-color: var(--components-list-item-is-highlighted-content-color);
 		--context-content-secondary-color: var(--components-list-item-is-highlighted-content-color);
@@ -9499,9 +9612,8 @@ var listItemStyles = css`
 		outline: none;
 	}
 
-	/* A row that is itself the disclosure control turns the chevron: mark its
-	   icon-cell disclosure. The cell rotates, not the icon — ::slotted reaches a
-	   direct child only, and rotating the cell turns the glyph in place. */
+	/* The cell rotates, not the icon: ::slotted reaches a direct child only, and
+	   rotating the cell turns the glyph in place. */
 	::slotted(nldd-icon-cell[disclosure]) {
 		rotate: 0deg;
 		transition: rotate var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default);
@@ -9537,10 +9649,10 @@ var listItemStyles = css`
 	/* Content-wide by default; the divider-start/divider-end cell markers
 	   override it through the measured --_divider-inset-* vars. */
 
-	/* A segmented action with focus paints its ring past its own box, and the
+	/* A segment with focus paints its ring past its own box, and the
 	   divider is rendered after the slot — so without this the line ran straight
 	   through the ring. Lifting the focused action puts the ring on top. */
-	::slotted(nldd-list-item-action:focus-within) {
+	::slotted(nldd-list-item-segment:focus-within) {
 		z-index: var(--_focus-z-index);
 	}
 
@@ -9575,7 +9687,7 @@ var listItemStyles = css`
 //#region src/components/lists-and-tables/list-item/list-item.template.ts
 var content = html`<slot></slot>`;
 var divider = html`<div class="list-item__divider"></div>`;
-var template$12 = (button, href, target, rel, opensInNewTabLabel, actionTabindex, isHighlighted = false, checkbox = false, checked = false, expanded, showChildren = false, hasCheckedSegment = false) => {
+var template$13 = (button, href, target, rel, opensInNewTabLabel, actionTabindex, isHighlighted = false, checkbox = false, checked = false, expanded, showChildren = false, hasCheckedSegment = false, disabled = false) => {
 	const ariaExpanded = expanded === void 0 ? nothing : String(expanded);
 	const children = showChildren ? html`<div class="list-item__children"
 			role="group"
@@ -9591,6 +9703,7 @@ var template$12 = (button, href, target, rel, opensInNewTabLabel, actionTabindex
 				href=${href}
 				target=${target ?? nothing}
 				rel=${rel ?? nothing}
+				aria-disabled=${disabled ? "true" : nothing}
 				aria-expanded=${ariaExpanded}
 				tabindex=${actionTabindex ?? nothing}
 			>${content}${opensInNewTabLabel ? html`<span class="list-item__opens-in-new-tab-hint">${opensInNewTabLabel}</span>` : nothing}</a>
@@ -9600,6 +9713,7 @@ var template$12 = (button, href, target, rel, opensInNewTabLabel, actionTabindex
 			<button class="list-item__action"
 				type="button"
 				role="checkbox"
+				?disabled=${disabled}
 				aria-checked=${String(checked)}
 				aria-expanded=${ariaExpanded}
 				tabindex=${actionTabindex ?? nothing}
@@ -9609,6 +9723,7 @@ var template$12 = (button, href, target, rel, opensInNewTabLabel, actionTabindex
 	if (button) return html`<div class=${blockClass}>
 			<button class="list-item__action"
 				type="button"
+				?disabled=${disabled}
 				aria-expanded=${ariaExpanded}
 				tabindex=${actionTabindex ?? nothing}
 			>${content}</button>
@@ -9627,14 +9742,66 @@ var nlddListItemTranslations = { "components.list-item.opens-in-new-tab-label":
 var list_item_exports = /* @__PURE__ */ __exportAll({ NLDDListItem: () => NLDDListItem });
 var _NLDDListItem2;
 var _NLDDListItem;
+/** Anything in a row's light DOM that is a tab stop of its own. `[tabindex]`
+*  counts because an authored one makes any element focusable; the value itself
+*  is read per element, and put back when the row becomes the current one. */
+var OWN_TAB_STOP = "a[href], button, input, select, textarea, [contenteditable]:not([contenteditable=\"false\"]), [tabindex]";
+/** Keyed on the element, so a row that is re-rendered around the same control
+*  still knows what the consumer authored. */
+var authoredTabState = /* @__PURE__ */ new WeakMap();
+function authoredStateOf(el) {
+	let authored = authoredTabState.get(el);
+	if (!authored) {
+		authored = {
+			noTab: "noTab" in el ? el.noTab : void 0,
+			tabindex: el.getAttribute("tabindex")
+		};
+		authoredTabState.set(el, authored);
+	}
+	return authored;
+}
+function applyAuthoredTabState(el, authored) {
+	if (authored.noTab !== void 0) {
+		el.noTab = authored.noTab;
+		return;
+	}
+	if (authored.tabindex === null) el.removeAttribute("tabindex");
+	else el.setAttribute("tabindex", authored.tabindex);
+}
+/**
+* Puts one control in or out of the tab order on behalf of the row it sits in.
+*
+* A design-system control keeps its tab stop inside its own shadow root, where
+* a tabindex on the host cannot reach it, so it carries `no-tab` for exactly
+* this. Everything else is native and takes the tabindex directly. A consumer
+* who set either themselves keeps it: their `no-tab` or `tabindex="-1"` is a
+* decision, not a leftover.
+*/
+function setTabbable(el, tabbable) {
+	const authored = authoredStateOf(el);
+	if (authored.noTab !== void 0) {
+		el.noTab = authored.noTab || !tabbable;
+		return;
+	}
+	if (tabbable) applyAuthoredTabState(el, authored);
+	else el.setAttribute("tabindex", "-1");
+}
+function releaseTabbable(el) {
+	const authored = authoredTabState.get(el);
+	if (!authored) return;
+	applyAuthoredTabState(el, authored);
+	authoredTabState.delete(el);
+}
 var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations(LitElement, nlddListItemTranslations) {
 	constructor(..._args) {
 		super(..._args);
 		this.size = "md";
 		this.selected = false;
+		this.current = false;
 		this.button = false;
 		this.checkbox = false;
 		this.checked = false;
+		this.disabled = false;
 		this.reorderable = false;
 		this._showChildren = false;
 		this._parentType = "list";
@@ -9644,11 +9811,17 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		this._isBoxed = false;
 		this._hasCheckedSegment = false;
 		this._lightDomObserver = null;
+		this._rovingControlsCache = null;
 		this._dividerMarkerObserver = null;
 		this._observedMarkerTargets = [];
 		this._warnedDegenerateDivider = false;
 		this._ownCellSize = /* @__PURE__ */ new WeakMap();
 		this._handleClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault();
+				e.stopPropagation();
+				return;
+			}
 			this._action?.focus();
 			if (this.checkbox && !this.href && e.composedPath().includes(this._action)) {
 				this.checked = !this.checked;
@@ -9665,10 +9838,18 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		this._handleFocusOut = () => {
 			this._action?.classList.remove("is-pointer-focus");
 		};
+		this._onMouseDown = (e) => {
+			if (e.button > 0 || this.reorderable) return;
+			if (this._isFromNestedRow(e)) return;
+			if (!this._action) return;
+			e.preventDefault();
+		};
 		this._onPointerDown = (e) => {
+			if (this.disabled) return;
 			if (e.button > 0) return;
 			if (this._isFromNestedRow(e)) return;
 			this._action?.classList.add("is-pressed");
+			this._action?.focus({ preventScroll: true });
 		};
 		this._clearPressed = () => {
 			this._action?.classList.remove("is-pressed");
@@ -9683,6 +9864,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		this.addEventListener("focusout", this._handleFocusOut);
 		this.addEventListener("click", this._handleClick);
 		this.addEventListener("pointerdown", this._onPointerDown);
+		this.addEventListener("mousedown", this._onMouseDown);
 		this.addEventListener("pointerup", this._clearPressed);
 		this.addEventListener("pointercancel", this._clearPressed);
 		this._lightDomObserver = new MutationObserver(() => this._onLightDomChange());
@@ -9692,6 +9874,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 			attributes: true,
 			attributeFilter: [
 				"checked",
+				"current",
 				"divider-start",
 				"divider-end"
 			]
@@ -9704,6 +9887,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		this.removeEventListener("focusout", this._handleFocusOut);
 		this.removeEventListener("click", this._handleClick);
 		this.removeEventListener("pointerdown", this._onPointerDown);
+		this.removeEventListener("mousedown", this._onMouseDown);
 		this.removeEventListener("pointerup", this._clearPressed);
 		this.removeEventListener("pointercancel", this._clearPressed);
 		this._lightDomObserver?.disconnect();
@@ -9713,32 +9897,100 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	}
 	_onLightDomChange() {
 		this._updateCheckedSegment();
+		this._updateCurrentSegment();
 		this._updateInteractive();
 		this._measureDividerMarkers();
+		this._rovingControlsCache = null;
+		if (this._arrowNavigation) {
+			this._syncRovingTabStops();
+			this._parentList?._updateRoving();
+		}
+	}
+	get _parentList() {
+		return this.closest("nldd-list");
+	}
+	/**
+	* The controls in this row that own a tab stop: a design-system control that
+	* carries `no-tab`, or anything natively focusable. Segments are left
+	* out — they have their own channel (`_tabbable`) — but a control slotted
+	* inside one is not, so it is managed here.
+	*
+	* Custom elements that have not upgraded yet cannot answer whether they carry
+	* `no-tab`, so the cache is dropped and the row re-syncs once they do.
+	*/
+	_rovingControls() {
+		if (this._rovingControlsCache) return this._rovingControlsCache;
+		const pending = /* @__PURE__ */ new Set();
+		const controls = this._ownDescendants("*").filter((el) => {
+			const tag = el.tagName.toLowerCase();
+			if (tag === "nldd-list-item-segment") return false;
+			if (tag.includes("-") && !customElements.get(tag)) {
+				pending.add(tag);
+				return false;
+			}
+			return "noTab" in el || el.matches(OWN_TAB_STOP);
+		});
+		this._rovingControlsCache = controls;
+		pending.forEach((tag) => {
+			customElements.whenDefined(tag).then(() => {
+				this._rovingControlsCache = null;
+				if (this._arrowNavigation) this._syncRovingTabStops();
+			});
+		});
+		return controls;
+	}
+	/**
+	* Whether the arrow keys stop at this row.
+	*
+	* Anything you can operate makes a row a stop: its own link, button or
+	* checkbox, a segment, or a control sitting in one of its cells. A
+	* row of nothing but text is skipped, because focus that leads nowhere is a
+	* dead end for a keyboard.
+	*
+	* @internal Read by the parent nldd-list.
+	*/
+	get _isRovingStop() {
+		if (this.disabled) return false;
+		if (this.href || this.button || this.checkbox) return true;
+		if (this._ownDescendants("nldd-list-item-segment:not([disabled])").length > 0) return true;
+		return this._rovingControls().some((control) => !control.hasAttribute("disabled"));
+	}
+	/**
+	* A segment marked `current` makes the whole row the current one.
+	*
+	* A row cut into segments has no control of its own, so `aria-current="page"`
+	* belongs on the segment that holds the link. Written there, the row would
+	* stay unpainted and the consumer had to set `current` twice, once for the
+	* semantics and once for the colour, with nothing to catch the two drifting
+	* apart. The row reads it off its own segments instead — reading, not
+	* writing: the attributes stay the consumer's.
+	*/
+	_updateCurrentSegment() {
+		this.toggleAttribute("data-current", this._ownDescendants("nldd-list-item-segment[current]").length > 0);
 	}
 	/** A checked checkbox-segment reads as "this row is selected", so the fill
 	*  covers the whole row — including a disclosure segment — instead of
-	*  stopping at the segmented action boundary. Scoped to own descendants: a checked
+	*  stopping at the segment boundary. Scoped to own descendants: a checked
 	*  row in a nested branch must not light up its ancestors. */
 	_updateCheckedSegment() {
-		this._hasCheckedSegment = this._ownDescendants("nldd-list-item-action[checkbox][checked]").length > 0;
+		this._hasCheckedSegment = this._ownDescendants("nldd-list-item-segment[checkbox][checked]").length > 0;
 	}
 	/** A row with any action — its own href/button/checkbox or a slotted
 	*  segment — carries the widened geometry: negative host margin plus the
 	*  compensating row padding (see the geometry rules in the class doc).
 	*
-	*  An action segment at a row edge owns the padding for that side itself,
-	*  so the row drops its own there and the segmented action lands on the row's edge.
+	*  An segment at a row edge owns the padding for that side itself,
+	*  so the row drops its own there and the segment lands on the row's edge.
 	*  Stamped as classes because the CSS cannot ask: `:has()` is not allowed
 	*  inside `:host()`, and the row's own padding is what has to change — a
-	*  `::slotted()` rule could only reach the segmented action. */
+	*  `::slotted()` rule could only reach the segment. */
 	_updateInteractive() {
-		const interactive = !!this.href || this.button || this.checkbox || this._ownDescendants("nldd-list-item-action").length > 0;
+		const interactive = !!this.href || this.button || this.checkbox || this._ownDescendants("nldd-list-item-segment").length > 0;
 		this.classList.toggle("is-interactive", interactive);
 		const ownChildren = Array.from(this.children).filter((el) => el.getAttribute("slot") !== "children");
-		const isSegment = (el) => el?.tagName.toLowerCase() === "nldd-list-item-action";
-		this.classList.toggle("has-leading-action", isSegment(ownChildren[0]));
-		this.classList.toggle("has-trailing-action", isSegment(ownChildren[ownChildren.length - 1]));
+		const isSegment = (el) => el?.tagName.toLowerCase() === "nldd-list-item-segment";
+		this.classList.toggle("has-leading-segment", isSegment(ownChildren[0]));
+		this.classList.toggle("has-trailing-segment", isSegment(ownChildren[ownChildren.length - 1]));
 	}
 	firstUpdated() {
 		if (this.hasAttribute("data-nldd-clone")) return;
@@ -9750,12 +10002,12 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	}
 	/**
 	* The row's own descendants for `selector` — everything down to and inside
-	* its action segmented actions, but NOT inside a nested row. In a tree the child rows
+	* its segments, but NOT inside a nested row. In a tree the child rows
 	* are DOM children of this row, so a plain querySelectorAll would push this
 	* row's state into theirs (a parent's `expanded` turning every nested
 	* chevron, its `size` overwriting theirs). A `:scope >` child selector is
 	* too strict the other way: cells legitimately sit one level deeper, inside
-	* an nldd-list-item-action.
+	* an nldd-list-item-segment.
 	*/
 	_ownDescendants(selector) {
 		return Array.from(this.querySelectorAll(selector)).filter((el) => el.closest("nldd-list-item") === this);
@@ -9786,13 +10038,17 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		});
 	}
 	updated(changed) {
-		if (changed.has("selected") || changed.has("button") || changed.has("checkbox") || changed.has("href") || changed.has("_parentType")) this._updateAriaState();
+		if (changed.has("selected") || changed.has("current") || changed.has("button") || changed.has("checkbox") || changed.has("href") || changed.has("_parentType")) this._updateAriaState();
 		if (changed.has("button") || changed.has("checkbox") || changed.has("href")) this._updateInteractive();
 		if (changed.has("expanded")) {
 			this._relayExpanded();
 			this._warnOnStrayExpanded();
 		}
 		if (changed.has("_arrowNavigation") || changed.has("_rovingActive")) this._syncRovingTabStops();
+		if (changed.has("disabled")) {
+			this._syncRovingTabStops();
+			this._parentList?._updateRoving();
+		}
 		this._propagateSize();
 	}
 	/**
@@ -9810,8 +10066,8 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	/** Segments marked `disclosure` announce the row's expanded state, so the
 	*  consumer writes it once — here, where it also drives the children group. */
 	_relayExpanded() {
-		this._ownDescendants("nldd-list-item-action[disclosure]").forEach((action) => {
-			action._rowExpanded = this._resolvedExpanded;
+		this._ownDescendants("nldd-list-item-segment[disclosure]").forEach((segment) => {
+			segment._rowExpanded = this._resolvedExpanded;
 		});
 	}
 	/** `expanded` needs a control to sit on; a plain container has none. */
@@ -9842,7 +10098,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	_applyParentType(type) {
 		this._parentType = type;
 		this._relayToChildren((item) => item._applyParentType(type));
-		this._ownDescendants("nldd-list-item-action").forEach((action) => action._applyParentType?.(type));
+		this._ownDescendants("nldd-list-item-segment").forEach((segment) => segment._applyParentType?.(type));
 	}
 	/** Nested rows sit in this item's `children` slot, not the list's, so a plain
 	*  `querySelector` from the list walks past them. */
@@ -9865,7 +10121,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 			this.removeAttribute("aria-selected");
 		}
 		const action = this._action;
-		if (this._parentType === "navigation" && this.selected && action) action.setAttribute("aria-current", "page");
+		if (this._parentType === "navigation" && (this.current || this.selected) && action) action.setAttribute("aria-current", "page");
 		else action?.removeAttribute("aria-current");
 	}
 	/**
@@ -9970,8 +10226,9 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	/**
 	* The roving tab stop, spread over the row and the controls inside it: the
 	* current row is reachable with Tab, everything else only with the arrow
-	* keys. Within the current row Tab then walks its segmented actions, so a row
-	* that holds a checkbox and a chevron stays fully operable.
+	* keys. Within the current row Tab then walks its segments and any
+	* control in its cells, so a row that holds a checkbox and a chevron, or a
+	* menu button at its end, stays fully operable.
 	*
 	* A row that is not the current one carries NO tabindex at all rather than
 	* -1. A shadow host with a tabindex is a focus scope of its own, and Chromium
@@ -9983,25 +10240,29 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	* tab stop is in the DOM before focus is handed over.
 	*/
 	_syncRovingTabStops() {
-		const ownActions = Array.from(this.children).filter((el) => el.getAttribute("slot") !== "children" && el.tagName.toLowerCase() === "nldd-list-item-action");
+		const ownSegments = Array.from(this.children).filter((el) => el.getAttribute("slot") !== "children" && el.tagName.toLowerCase() === "nldd-list-item-segment");
 		if (!this._arrowNavigation) {
 			this.removeAttribute("tabindex");
-			ownActions.forEach((action) => {
-				action._tabbable = void 0;
+			ownSegments.forEach((segment) => {
+				segment._tabbable = void 0;
 			});
+			this._rovingControls().forEach(releaseTabbable);
 			return;
 		}
 		if (this._action || !this._rovingActive) this.removeAttribute("tabindex");
 		else this.setAttribute("tabindex", "0");
-		ownActions.forEach((action) => {
-			action._tabbable = this._rovingActive;
+		ownSegments.forEach((segment) => {
+			segment._tabbable = this._rovingActive;
+		});
+		this._rovingControls().forEach((control) => {
+			setTabbable(control, this._rovingActive);
 		});
 	}
-	/** The control that opens and closes this row: the segmented action marked
+	/** The control that opens and closes this row: the segment marked
 	*  `disclosure`, or the row itself when it is a button. Never a link — Left
 	*  and Right may not navigate away. */
 	get _disclosureControl() {
-		const action = Array.from(this.children).find((el) => el.getAttribute("slot") !== "children" && el.tagName.toLowerCase() === "nldd-list-item-action" && el.hasAttribute("disclosure"));
+		const action = Array.from(this.children).find((el) => el.getAttribute("slot") !== "children" && el.tagName.toLowerCase() === "nldd-list-item-segment" && el.hasAttribute("disclosure"));
 		if (action) return action;
 		if (this.button && !this.href) return this._action;
 	}
@@ -10016,6 +10277,22 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		if (hadFocus) this.focus();
 		return true;
 	}
+	/**
+	* Activates what this row is FOR, as opposed to what folds it: the first
+	* segment that is not the disclosure. A row that is its own control
+	* needs none of this, because the key reaches that control by itself.
+	* Returns false when there is nothing but a chevron.
+	*/
+	_activatePrimary() {
+		const primary = [...this.querySelectorAll(":scope > nldd-list-item-segment")].find((segment) => !segment.hasAttribute("disclosure"));
+		if (!primary) return false;
+		const control = primary.shadowRoot?.querySelector("a, button");
+		if (!control) return false;
+		const hadFocus = this.matches(":focus-within");
+		control.click();
+		if (hadFocus) this.focus();
+		return true;
+	}
 	/** The branch this row hangs under, or undefined for a top-level row. */
 	get parentRow() {
 		const parent = this.parentElement;
@@ -10025,7 +10302,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	render() {
 		const opensInNewTabLabel = this.href && this.target === "_blank" ? this._t("components.list-item.opens-in-new-tab-label") : void 0;
 		const actionTabindex = this._isListboxOption ? "-1" : this._arrowNavigation ? this._rovingActive ? "0" : "-1" : void 0;
-		return template$12(this.button, this.href, this.target, this.rel, opensInNewTabLabel, actionTabindex, this._highlighted, this.checkbox, this.checked, this._resolvedExpanded, this._showChildren, this._hasCheckedSegment);
+		return template$13(this.button, this.href, this.target, this.rel, opensInNewTabLabel, actionTabindex, this._highlighted, this.checkbox, this.checked, this._resolvedExpanded, this._showChildren, this._hasCheckedSegment, this.disabled);
 	}
 }, _NLDDListItem = _NLDDListItem2, _NLDDListItem2.styles = [listItemStyles], _NLDDListItem2.SIZED_CELLS = "nldd-text-cell, nldd-drag-handle-cell", _NLDDListItem2);
 __decorate([property({
@@ -10036,6 +10313,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDListItem.prototype, "selected", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NLDDListItem.prototype, "current", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -10048,6 +10329,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDListItem.prototype, "checked", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NLDDListItem.prototype, "disabled", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -10167,7 +10452,7 @@ var cellStyles = css`
 `;
 //#endregion
 //#region src/components/lists-and-tables/cells/cell/cell.template.ts
-var template$11 = () => html`<slot></slot>`;
+var template$12 = () => html`<slot></slot>`;
 //#endregion
 //#region src/components/lists-and-tables/cells/cell/cell.ts
 /**
@@ -10217,7 +10502,7 @@ var NLDDCell = (_NLDDCell = class NLDDCell extends VisibilityMixin(LitElement, "
 		else this.style.removeProperty("--_min-height");
 	}
 	render() {
-		return template$11();
+		return template$12();
 	}
 }, _NLDDCell.styles = [cellStyles], _NLDDCell);
 __decorate([property({
@@ -12453,7 +12738,7 @@ var tagStyles = css`
 `;
 //#endregion
 //#region src/components/content/tag/tag.template.ts
-function template$10(component) {
+function template$11(component) {
 	const variant = component._effectiveVariant;
 	const showIcon = variant === "icon" || variant === "icon-and-text" && component._hasIcon;
 	const showText = (variant === "text" || variant === "icon-and-text") && component._hasText;
@@ -12551,7 +12836,7 @@ var NLDDTag = (_NLDDTag = class NLDDTag extends LitElement {
 	}
 	updated() {}
 	render() {
-		return template$10(this);
+		return template$11(this);
 	}
 }, _NLDDTag.styles = tagStyles, _NLDDTag);
 __decorate([property({
@@ -12579,6 +12864,196 @@ __decorate([state()], NLDDTag.prototype, "_hasSlotText", void 0);
 __decorate([state()], NLDDTag.prototype, "_hasSlotIcon", void 0);
 NLDDTag = __decorate([customElement("nldd-tag")], NLDDTag);
 //#endregion
+//#region src/components/content/text/text.styles.ts
+var textStyles = css`
+
+
+	/* # Host */
+
+	:host {
+		--_font-size: var(--primitives-font-size-100);
+		--_font-weight: var(--primitives-font-weight-body-regular);
+		--_line-height: var(--primitives-line-height-snug);
+		--_color: var(--context-content-color, var(--semantics-content-color));
+		--_text-align: left;
+
+		display: block;
+		color: var(--_color);
+		text-align: var(--_text-align);
+		font: var(--_font-weight) var(--_font-size) / var(--_line-height) var(--primitives-font-family-body);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Size */
+
+	:host([size="xxs"]) {
+		--_font-size: var(--primitives-font-size-70);
+	}
+
+	:host([size="xs"]) {
+		--_font-size: var(--primitives-font-size-80);
+	}
+
+	:host([size="sm"]) {
+		--_font-size: var(--primitives-font-size-90);
+	}
+
+	:host([size="lg"]) {
+		--_font-size: var(--primitives-font-size-200);
+	}
+
+
+	/* # Weight */
+
+	:host([weight="medium"]) {
+		--_font-weight: var(--primitives-font-weight-body-medium);
+	}
+
+	:host([weight="bold"]) {
+		--_font-weight: var(--primitives-font-weight-body-bold);
+	}
+
+	/* Not the browser's "bolder", which is relative: from medium it lands on 700
+	   and from bold it asks for a weight this font does not have, so the browser
+	   thickens the glyphs itself. */
+	::slotted(strong),
+	::slotted(b) {
+		color: inherit;
+		font-weight: var(--primitives-font-weight-body-bold);
+	}
+
+
+	/* # Line height */
+
+	:host([line-height="flat"]) {
+		--_line-height: var(--primitives-line-height-flat);
+	}
+
+	:host([line-height="tight"]) {
+		--_line-height: var(--primitives-line-height-tight);
+	}
+
+	:host([line-height="loose"]) {
+		--_line-height: var(--primitives-line-height-loose);
+	}
+
+
+	/* # Color */
+
+	:host([color="secondary"]) {
+		--_color: var(--context-content-secondary-color, var(--semantics-content-secondary-color));
+	}
+
+	:host([color="accent"]) {
+		--_color: var(--semantics-content-accent-color);
+	}
+
+	:host([color="success"]) {
+		--_color: var(--semantics-content-success-color);
+	}
+
+	:host([color="warning"]) {
+		--_color: var(--semantics-content-warning-color);
+	}
+
+	:host([color="critical"]) {
+		--_color: var(--semantics-content-critical-color);
+	}
+
+	:host([color="inherit"]) {
+		--_color: inherit;
+	}
+
+
+	/* # Alignment */
+
+	:host([horizontal-alignment="center"]) {
+		--_text-align: center;
+	}
+
+	:host([horizontal-alignment="right"]) {
+		--_text-align: right;
+	}
+`;
+//#endregion
+//#region src/components/content/text/text.template.ts
+function template$10() {
+	return html`
+		<slot></slot>
+	`;
+}
+//#endregion
+//#region src/components/content/text/text.ts
+/**
+* Nederlandse Digitale Dienst Text Component (Lit + TypeScript)
+*
+* 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.
+*
+* @element nldd-text
+* @attr {string} size - Text size on the body scale: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
+* @attr {string} weight - Font weight: 'regular' | 'medium' | 'bold' (default: 'regular'). With 'bold' a slotted `<strong>` no longer stands out: there is nothing bolder in the scale.
+* @attr {string} line-height - Line height: 'flat' | 'tight' | 'snug' | 'loose' (default: 'snug')
+* @attr {string} color - 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.
+* @attr {string} horizontal-alignment - Alignment of the text within the block: 'left' | 'center' | 'right' (default: 'left'). Aligns the words; `horizontal-alignment` on nldd-container moves the box.
+*
+* @slot - The text. Inline elements work as they are: `<strong>` and `<b>` take the bold weight from the scale, `<a>`, `<em>` and components such as `nldd-tag` are left alone.
+*/
+var _NLDDText;
+var NLDDText = (_NLDDText = class NLDDText extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.size = "md";
+		this.weight = "regular";
+		this.lineHeight = "snug";
+		this.color = "default";
+		this.horizontalAlignment = "left";
+	}
+	render() {
+		return template$10();
+	}
+}, _NLDDText.styles = textStyles, _NLDDText);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("md")
+})], NLDDText.prototype, "size", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("regular")
+})], NLDDText.prototype, "weight", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "line-height",
+	converter: reflectNonDefault("snug")
+})], NLDDText.prototype, "lineHeight", void 0);
+__decorate([property({
+	reflect: true,
+	converter: reflectNonDefault("default")
+})], NLDDText.prototype, "color", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "horizontal-alignment",
+	converter: reflectNonDefault("left")
+})], NLDDText.prototype, "horizontalAlignment", void 0);
+NLDDText = __decorate([customElement("nldd-text")], NLDDText);
+//#endregion
 //#region src/components/content/title/title.styles.ts
 var smMax$15 = unsafeCSS(breakpoints.smMax);
 var mdMin$19 = unsafeCSS(breakpoints.mdMin);
@@ -12787,13 +13262,8 @@ var titleStyles = css`
 		overflow-wrap: anywhere !important;
 	}
 
-	/* balance, not pretty: a heading is a handful of words, so evening out the
-	   line lengths reads better than only protecting the last line.
-	 *
-	 * The measure is in ch, so one value covers every size: ch scales with the
-	 * font, and 40 characters stays 40 characters whether the title is 18px or
-	 * 52px. It only bites in a wide container — inside a card or a column the
-	 * box is already narrower than the cap. */
+	/* The measure is in ch, so one value covers every size: ch scales with the
+	   font, and 40 characters stays 40 characters at 18px and at 52px. */
 	::slotted(:not([slot])) {
 		${slottedReset}
 		${inheritedTextReset}
@@ -12810,15 +13280,16 @@ var titleStyles = css`
 		${inheritedTextReset}
 		margin: 0 !important;
 		color: var(--semantics-content-secondary-color) !important;
-		font: var(--primitives-font-body-sm-regular-tight) !important;
+		font: var(--primitives-font-body-md-regular-tight) !important;
 		overflow-wrap: anywhere !important;
 	}
 
-	/* color="inherit": follow the surface's text color (e.g. a
-	   filled-categories panel that sets a pure white/black content color);
-	   overline and subtitle take the same color at the system-wide
-	   secondary opacity tier. !important matches the hardened slotted
-	   rules above. */
+	:host([size="5"]) ::slotted([slot="subtitle"]),
+	:host([size="6"]) ::slotted([slot="subtitle"]) {
+		font: var(--primitives-font-body-sm-regular-tight) !important;
+	}
+
+	/* !important matches the hardened slotted rules above. */
 
 	:host([color="inherit"]) ::slotted(:not([slot])) {
 		color: inherit !important;
@@ -17037,6 +17508,11 @@ var comboBoxStyles = css`
 		border-color: var(--semantics-input-fields-is-invalid-border-color);
 	}
 
+	:host([readonly]) .combo-box {
+		--_background-color: var(--semantics-input-fields-is-read-only-background-color);
+		border-color: var(--semantics-input-fields-is-read-only-border-color);
+	}
+
 	.combo-box:has(input:-webkit-autofill),
 	.combo-box:has(input:autofill) {
 		--_background-color: var(--semantics-input-fields-is-autofill-background-color);
@@ -17168,17 +17644,18 @@ function comboBoxTemplate(component) {
 		<div class="combo-box">
 			<input class="combo-box__input"
 				type="text"
-				role="combobox"
+				role=${component.readonly ? nothing : "combobox"}
 				aria-label=${component.accessibleLabel || nothing}
-				aria-expanded=${component._isOpen ? "true" : "false"}
-				aria-controls=${component._menuId}
-				aria-autocomplete="list"
-				aria-haspopup="listbox"
+				aria-expanded=${component.readonly ? nothing : component._isOpen ? "true" : "false"}
+				aria-controls=${component.readonly ? nothing : component._menuId}
+				aria-autocomplete=${component.readonly ? nothing : "list"}
+				aria-haspopup=${component.readonly ? nothing : "listbox"}
 				aria-activedescendant=${component._highlightedId || nothing}
 				aria-invalid=${component.invalid ? "true" : nothing}
 				.value=${component.text}
 				placeholder=${component.placeholder || nothing}
 				?disabled=${component.disabled}
+				?readonly=${component.readonly}
 				name=${component.name || nothing}
 				autocomplete=${component.autocomplete || nothing}
 				spellcheck=${component.noSpellcheck ? "false" : "true"}
@@ -17188,7 +17665,7 @@ function comboBoxTemplate(component) {
 			>
 			<div class="combo-box__input-fade"></div>
 			<div class="combo-box__end">
-				${component.text ? html`
+				${component.text && !component.readonly ? html`
 					<div class="combo-box__clear-button">
 						<nldd-icon-button
 							variant="neutral-transparent"
@@ -17202,20 +17679,22 @@ function comboBoxTemplate(component) {
 					</div>
 				` : nothing}
 				${renderValidationIcon$8(component)}
-				<div class="combo-box__picker-button">
-					<nldd-icon-button
-						variant="neutral-tinted"
-						size=${iconButtonSize}
-						icon="chevron-down"
-						text=${component._t("components.combo-box.open-menu-action")}
-						tooltip-timing="never"
-						?disabled=${component.disabled}
-						?expanded=${component._isOpen}
-						popup-type="listbox"
-						@pointerdown=${component._handlePickerPointerdown}
-						@click=${component._toggleMenu}
-					></nldd-icon-button>
-				</div>
+				${component.readonly ? nothing : html`
+					<div class="combo-box__picker-button">
+						<nldd-icon-button
+							variant="neutral-tinted"
+							size=${iconButtonSize}
+							icon="chevron-down"
+							text=${component._t("components.combo-box.open-menu-action")}
+							tooltip-timing="never"
+							?disabled=${component.disabled}
+							?expanded=${component._isOpen}
+							popup-type="listbox"
+							@pointerdown=${component._handlePickerPointerdown}
+							@click=${component._toggleMenu}
+						></nldd-icon-button>
+					</div>
+				`}
 			</div>
 		</div>
 		<slot @slotchange=${component._onSlotChange}></slot>
@@ -17321,6 +17800,7 @@ function submitOnEnter(host, event) {
 * @attr {boolean} valid - Marks the field as valid
 * @attr {boolean} invalid - Marks the field as invalid
 * @attr {boolean} disabled - Disabled state
+* @attr {boolean} readonly - 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.
 * @attr {boolean} allow-custom - Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted.
 * @attr {string} name - Input name for form submission
 * @attr {string} autocomplete - Browser autofill hint. Default 'off' to prevent the native autofill panel from competing with the menu dropdown. Set to a valid token (e.g. 'country', 'organization') when browser autofill is desired.
@@ -17364,6 +17844,7 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends FormAssociated(L
 		this.valid = false;
 		this.invalid = false;
 		this.disabled = false;
+		this.readonly = false;
 		this.allowCustom = false;
 		this.name = "";
 		this.autocomplete = "off";
@@ -17522,6 +18003,7 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends FormAssociated(L
 	*/
 	_openMenu() {
 		if (!this._menu || this._isOpen) return;
+		if (this.readonly) return;
 		if (this.allowCustom && !this._hasVisibleMenuItems()) return;
 		if (!("showPopover" in this._menu)) {
 			console.warn("<nldd-combo-box>: Popover API is not supported in this browser. The dropdown will not open.");
@@ -17591,6 +18073,7 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends FormAssociated(L
 	/** On blur: with allow-custom, accept a custom typed value; otherwise discard a
 	*  non-matching typed value by reverting the input to the current value. */
 	_handleBlur(e) {
+		if (this.readonly) return;
 		const relatedTarget = e.relatedTarget;
 		const focusMovedIntoMenu = !!relatedTarget && !!this._menu?.contains(relatedTarget);
 		if (!focusMovedIntoMenu) this._closeMenu();
@@ -17616,6 +18099,10 @@ var NLDDComboBox = (_NLDDComboBox2 = class NLDDComboBox extends FormAssociated(L
 		this._menu?.filter("");
 	}
 	_handleKeydown(e) {
+		if (this.readonly) {
+			if (e.key === "Enter") submitOnEnter(this, e);
+			return;
+		}
 		if (!this._isOpen) {
 			if (e.key === "ArrowDown") {
 				e.preventDefault();
@@ -17702,6 +18189,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDComboBox.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NLDDComboBox.prototype, "readonly", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true,
@@ -19808,6 +20299,7 @@ function renderValidationIcon$7(component) {
 */
 function renderPicker$2(component) {
 	if (component.noPicker) return nothing;
+	if (component.readonly) return nothing;
 	const buttonSize = component.size === "sm" ? "xs" : "sm";
 	return html`
 		<div class="date-field__picker-button">
@@ -19817,7 +20309,7 @@ function renderPicker$2(component) {
 				icon="calendar"
 				text=${component._t("components.date-field.to-pick-date-action")}
 				tooltip-timing="never"
-				?disabled=${component.disabled || component.readonly}
+				?disabled=${component.disabled}
 				@click=${component._handlePickerClick}
 			></nldd-icon-button>
 			<nldd-popover
@@ -21366,6 +21858,8 @@ function multiLineTextFieldTemplate(component) {
 			<textarea class="multi-line-text-field__input"
 				id=${component.inputId || nothing}
 				rows=${component.rows}
+				inputmode=${component.keyboard || nothing}
+				enterkeyhint=${component.enterKey || nothing}
 				.value=${component.value}
 				placeholder=${component.placeholder || nothing}
 				?disabled=${component.disabled}
@@ -21401,6 +21895,8 @@ function multiLineTextFieldTemplate(component) {
 * @attr {boolean} readonly - Readonly state
 * @attr {boolean} required - Required state
 * @attr {string} autocomplete - Autocomplete hint
+* @attr {string} keyboard - 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.
+* @attr {string} enter-key - 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.
 * @attr {number} rows - Initial visible rows (minimum height). Default: 3.
 * @attr {string} resize - 'none' | 'vertical' | 'auto' (default). 'auto' grows with content (native field-sizing), no manual handle.
 * @attr {string} accessible-label - Accessible label forwarded to the inner textarea. Set automatically by nldd-form-field.
@@ -21525,6 +22021,15 @@ __decorate([property({
 	reflect: true
 })], NLDDMultiLineTextField.prototype, "required", void 0);
 __decorate([property({ type: String })], NLDDMultiLineTextField.prototype, "autocomplete", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], NLDDMultiLineTextField.prototype, "keyboard", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "enter-key"
+})], NLDDMultiLineTextField.prototype, "enterKey", void 0);
 __decorate([property({ type: Number })], NLDDMultiLineTextField.prototype, "rows", void 0);
 __decorate([property({
 	reflect: true,
@@ -30191,6 +30696,8 @@ function textFieldTemplate(component) {
 			<input class="text-field__input"
 				id=${component.inputId || nothing}
 				type=${component.type}
+				inputmode=${component.keyboard || nothing}
+				enterkeyhint=${component.enterKey || nothing}
 				.value=${component.value}
 				placeholder=${component.placeholder || nothing}
 				?disabled=${component.disabled}
@@ -30226,6 +30733,8 @@ function textFieldTemplate(component) {
 * @attr {boolean} valid - Marks the field as valid
 * @attr {boolean} disabled - Disabled state
 * @attr {string} type - Input type: 'text' | 'email' | 'tel' | 'url'
+* @attr {string} keyboard - 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`.
+* @attr {string} enter-key - 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.
 * @attr {string} name - Input name for form submission
 * @attr {boolean} readonly - Readonly state
 * @attr {boolean} required - Required state
@@ -30239,6 +30748,35 @@ function textFieldTemplate(component) {
 * @fires change - When input value is committed
 */
 var _NLDDTextField;
+/** The tokens `inputmode` and `enterkeyhint` accept. Arrays, so one list types
+*  the property and answers at runtime: a value outside it is dropped by the
+*  browser without a word, which is a typo you only find on a phone. */
+var KEYBOARDS = [
+	"none",
+	"text",
+	"decimal",
+	"numeric",
+	"tel",
+	"search",
+	"email",
+	"url"
+];
+var ENTER_KEYS = [
+	"enter",
+	"done",
+	"go",
+	"next",
+	"previous",
+	"search",
+	"send"
+];
+/** The keyboard each `type` already asks for. Setting `keyboard` to something
+*  else contradicts the type, which is worth saying out loud in dev. */
+var KEYBOARD_IMPLIED_BY_TYPE = {
+	email: "email",
+	tel: "tel",
+	url: "url"
+};
 var NLDDTextField = (_NLDDTextField = class NLDDTextField extends FormAssociated(LitElement) {
 	constructor(..._args) {
 		super(..._args);
@@ -30259,17 +30797,31 @@ var NLDDTextField = (_NLDDTextField = class NLDDTextField extends FormAssociated
 		this.errorMessageIds = "";
 		this.noSpellcheck = false;
 		this.width = "";
+		this._warnedKeyboard = false;
 	}
 	firstUpdated() {
 		this._initialValue = this.value;
 	}
 	updated(changed) {
+		if (changed.has("keyboard") || changed.has("type")) this._warnKeyboardVsType();
+		if (changed.has("keyboard")) this._warnUnknownToken("keyboard", this.keyboard, KEYBOARDS);
+		if (changed.has("enterKey")) this._warnUnknownToken("enter-key", this.enterKey, ENTER_KEYS);
 		if (changed.has("width")) {
 			const w = this.width;
 			if (w && w !== "full" && CSS.supports("width", w)) this.style.setProperty("--_width", w);
 			else this.style.removeProperty("--_width");
 		}
 	}
+	/** A token the browser does not know is dropped silently, and the field falls
+	*  back to the default keyboard. */
+	_warnUnknownToken(attribute, value, allowed) {}
+	/** A `type` other than text already asks for its own keyboard. Overriding it
+	*  with a different one gives a field that says "email" and shows digits,
+	*  which is never what was meant. */
+	_warnKeyboardVsType() {
+		const implied = KEYBOARD_IMPLIED_BY_TYPE[this.type];
+		if (!(!!this.keyboard && !!implied && this.keyboard !== implied)) this._warnedKeyboard = false;
+	}
 	formValue() {
 		return this.value;
 	}
@@ -30349,6 +30901,15 @@ __decorate([property({
 	reflect: true
 })], NLDDTextField.prototype, "disabled", void 0);
 __decorate([property({ type: String })], NLDDTextField.prototype, "type", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], NLDDTextField.prototype, "keyboard", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "enter-key"
+})], NLDDTextField.prototype, "enterKey", void 0);
 __decorate([property({
 	type: String,
 	reflect: true
@@ -31465,6 +32026,7 @@ function renderValidationIcon$1(component) {
 */
 function renderPicker$1(component) {
 	if (component.noPicker) return nothing;
+	if (component.readonly) return nothing;
 	const buttonSize = component.size === "sm" ? "xs" : "sm";
 	return html`
 		<div class="time-field__picker-button">
@@ -31474,7 +32036,7 @@ function renderPicker$1(component) {
 				icon="clock"
 				text=${component._t("components.time-field.to-pick-time-action")}
 				tooltip-timing="never"
-				?disabled=${component.disabled || component.readonly}
+				?disabled=${component.disabled}
 				@click=${component._handlePickerClick}
 			></nldd-icon-button>
 			<nldd-popover
@@ -33649,9 +34211,17 @@ NLDDTokenField = _NLDDTokenField = __decorate([customElement("nldd-token-field")
 var 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. */
 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;
 }
 /**
@@ -38289,6 +38859,14 @@ var sheetStyles = css`
 	/* # Block */
 
 	.sheet {
+		/* Where the app's layout context ends. The sheet scrolls itself and starts
+		   at its own top edge, so a page inside it keeps its own scroller and its
+		   sticky header sticks to that edge instead of to a bar that stands
+		   outside. See findScrollModeProvider for the other half. */
+		--context-scroll-mode: nested;
+		--context-layer-top: 0px;
+		--context-layer-bottom: 0px;
+
 		display: flex;
 		position: fixed;
 		margin: 0;
@@ -38418,9 +38996,8 @@ var sheetStyles = css`
 		flex-grow: 1;
 	}
 
-	/* A slotted page or container fills the sheet body (so its own content scrolls
-	   within the sheet). Scoped to these two so other direct children keep their
-	   intrinsic height instead of being stretched. */
+	/* Scoped to these two so other direct children keep their intrinsic height
+	   instead of being stretched. */
 	::slotted(nldd-page),
 	::slotted(nldd-container) {
 		min-height: 0;
@@ -38917,17 +39494,14 @@ var boxStyles = css`
 	}
 
 
-	/* ## Background variants */
+	/* ## Backgrounds */
 
-	:host([variant="base"]) {
+	:host([background="base"]) {
 		--_background-color: var(--components-box-base-background-color);
 		--_border-color: var(--components-box-base-border-color);
 	}
 
-
-	/* ## Variants */
-
-	:host([variant="critical"]) {
+	:host([background="critical"]) {
 		--_background-color: var(--components-box-critical-background-color);
 		--_border-color: var(--components-box-critical-border-color);
 	}
@@ -38970,7 +39544,7 @@ function boxTemplate(_component) {
 * helping users understand their relationship at a glance.
 *
 * @element nldd-box
-* @attr {'tinted'|'base'|'critical'} variant - Which surface this box draws.
+* @attr {'tinted'|'base'|'critical'} background - 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).
@@ -38990,7 +39564,7 @@ var _NLDDBox;
 var NLDDBox = (_NLDDBox = class NLDDBox extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.variant = "tinted";
+		this.background = "tinted";
 	}
 	render() {
 		return boxTemplate(this);
@@ -38999,7 +39573,7 @@ var NLDDBox = (_NLDDBox = class NLDDBox extends LitElement {
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("tinted")
-})], NLDDBox.prototype, "variant", void 0);
+})], NLDDBox.prototype, "background", void 0);
 NLDDBox = __decorate([customElement("nldd-box")], NLDDBox);
 //#endregion
 //#region src/components/layout/card/card.styles.ts
@@ -40552,8 +41126,8 @@ __decorate([state()], NLDDPageFooter.prototype, "_hasMain", void 0);
 __decorate([state()], NLDDPageFooter.prototype, "_hasLegalBar", void 0);
 NLDDPageFooter = __decorate([customElement("nldd-page-footer")], NLDDPageFooter);
 //#endregion
-//#region src/components/lists-and-tables/list-item-action/list-item-action.styles.ts
-var listItemActionStyles = css`
+//#region src/components/lists-and-tables/list-item-segment/list-item-segment.styles.ts
+var listItemSegmentStyles = css`
 	:host {
 		box-sizing: border-box;
 	}
@@ -40566,6 +41140,11 @@ var listItemActionStyles = css`
 
 		display: flex;
 		position: relative;
+		/* Its own stacking context, so the fill below (z-index -1) stays behind
+		   this segment's content but in front of the row's fill. Without it the
+		   two -1 layers land in the same context — the row's while it is lit —
+		   and the segment's disappears underneath. */
+		isolation: isolate;
 		align-items: stretch;
 		/* The row's areas center their children; this must span instead, so its hit
 		   area and fill reach the row's top and bottom edges. */
@@ -40592,7 +41171,7 @@ var listItemActionStyles = css`
 		min-width: 0;
 	}
 
-	:host([width="full"]) .list-item-action {
+	:host([width="full"]) .list-item-segment {
 		justify-content: flex-start;
 	}
 
@@ -40613,11 +41192,9 @@ var listItemActionStyles = css`
 		}
 	}
 
-	/* The control is the whole action: hit area, fill and focus ring. Its inline
-	   padding is fixed at the indicator inset, the way a button owns its padding,
-	   so the fill always sits the same distance from the content. Do not add
-	   spacer cells for room or hit area — that doubles the space. */
-	.list-item-action {
+	/* The control owns its inline padding, fixed at the indicator inset. Do not
+	   add spacer cells for room or hit area: that doubles the space. */
+	.list-item-segment {
 		box-sizing: border-box;
 		display: flex;
 		position: relative;
@@ -40631,25 +41208,25 @@ var listItemActionStyles = css`
 		padding-inline: var(--components-list-item-indicator-inline-inset);
 		flex-direction: row;
 		align-items: center;
-		/* Content narrower than the floor is centered in the leftover space, which
-		   is the floor's doing and not the author's. A growing action keeps its
-		   content leading: that is text, and text reads from the start. */
 		justify-content: center;
 		color: inherit;
 		text-align: start;
 		text-decoration: none;
 	}
 
-	a.list-item-action {
+	a.list-item-segment {
 		cursor: var(--semantics-controls-link-cursor);
 	}
 
-	button.list-item-action:disabled {
-		cursor: not-allowed;
+	/* There is no disabled attribute for an anchor, so the segment blocks the
+	   click itself and aria-disabled carries the state. */
+	button.list-item-segment:disabled,
+	:host([disabled]) a.list-item-segment {
+		cursor: default;
 		opacity: var(--primitives-opacity-disabled);
 	}
 
-	.list-item-action::before {
+	.list-item-segment::before {
 		content: '';
 		display: block;
 		position: absolute;
@@ -40661,30 +41238,61 @@ var listItemActionStyles = css`
 		pointer-events: none;
 	}
 
+	/* The row hands down which fill a hovered segment takes. Unset on an ordinary
+	   row, where the fallback answers. */
 	@media (hover: hover) {
-		a.list-item-action:hover,
-		button.list-item-action:not(:disabled):hover {
-			--_background-color: var(--components-list-item-is-hovered-background-color);
-			--context-content-color: var(--components-list-item-is-hovered-content-color);
-			--context-content-secondary-color: var(--components-list-item-is-hovered-content-color);
+		:host(:not([disabled])) a.list-item-segment:hover,
+		button.list-item-segment:not(:disabled):hover {
+			--_background-color: var(--context-list-item-hovered-background-color, var(--components-list-item-is-hovered-background-color));
+			--context-content-color: var(--context-list-item-hovered-content-color, var(--components-list-item-is-hovered-content-color));
+			--context-content-secondary-color: var(--context-list-item-hovered-content-color, var(--components-list-item-is-hovered-content-color));
 		}
 	}
 
 	/* Press feedback — works on touch where :hover doesn't. JS-driven so a touch
 	   that turns into a scroll clears it (pointercancel) instead of flashing. */
-	.list-item-action.is-pressed {
-		--_background-color: var(--components-list-item-is-hovered-background-color);
-		--context-content-color: var(--components-list-item-is-hovered-content-color);
-		--context-content-secondary-color: var(--components-list-item-is-hovered-content-color);
+	/* The element selectors match the weight of the hover rule above: a pointer
+	   that presses is hovering as well, and the press has to win. */
+	:host(:not([disabled])) a.list-item-segment.is-pressed,
+	button.list-item-segment:not(:disabled).is-pressed,
+	:host(:not([disabled])) .list-item-segment.is-pressed {
+		--_background-color: var(--context-list-item-active-background-color, var(--components-list-item-is-active-background-color));
+		--context-content-color: var(--context-list-item-active-content-color, var(--context-list-item-hovered-content-color, var(--components-list-item-is-active-content-color)));
+		--context-content-secondary-color: var(--context-list-item-active-content-color, var(--context-list-item-hovered-content-color, var(--components-list-item-is-active-content-color)));
+	}
+
+	/* After the hover rule on purpose: hovering back over the segment must not
+	   dim it while what it opened is still on screen. */
+	:host([expanded]) .list-item-segment {
+		--_background-color: var(--components-list-item-is-expanded-background-color);
+		--context-content-color: var(--components-list-item-is-expanded-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-expanded-content-color);
+	}
+
+	@media (hover: hover) {
+		:host([expanded]:not([disabled])) a.list-item-segment:hover,
+		:host([expanded]) button.list-item-segment:not(:disabled):hover {
+			--_background-color: var(--components-list-item-is-expanded-is-hovered-background-color);
+			--context-content-color: var(--components-list-item-is-expanded-content-color);
+			--context-content-secondary-color: var(--components-list-item-is-expanded-content-color);
+		}
+	}
+
+	:host([expanded]:not([disabled])) a.list-item-segment.is-pressed,
+	:host([expanded]) button.list-item-segment:not(:disabled).is-pressed,
+	:host([expanded]:not([disabled])) .list-item-segment.is-pressed {
+		--_background-color: var(--components-list-item-is-expanded-is-active-background-color);
+		--context-content-color: var(--components-list-item-is-expanded-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-expanded-content-color);
 	}
 
-	:host([checked]) .list-item-action {
+	:host([checked]) .list-item-segment {
 		--_background-color: var(--components-list-item-is-selected-background-color);
 		--context-content-color: var(--components-list-item-is-selected-content-color);
 		--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
 	}
 
-	.list-item-action:focus-visible:not(.is-pointer-focus)::after {
+	.list-item-segment:focus-visible:not(.is-pointer-focus)::after {
 		content: '';
 		display: block;
 		position: absolute;
@@ -40697,22 +41305,23 @@ var listItemActionStyles = css`
 	}
 `;
 //#endregion
-//#region src/components/lists-and-tables/list-item-action/list-item-action.template.ts
+//#region src/components/lists-and-tables/list-item-segment/list-item-segment.template.ts
 function template$9(control, href, target, rel, checked, expanded, current, disabled, accessibleLabel, actionTabindex) {
 	const content = html`<slot></slot>`;
 	const ariaExpanded = expanded === void 0 ? nothing : String(expanded);
 	const ariaCurrent = current ? "page" : nothing;
 	const label = accessibleLabel || nothing;
-	if (control === "link") return html`<a class="list-item-action"
+	if (control === "link") return html`<a class="list-item-segment"
 			href=${href ?? nothing}
 			target=${target ?? nothing}
 			rel=${rel ?? nothing}
+			aria-disabled=${disabled ? "true" : nothing}
 			aria-expanded=${ariaExpanded}
 			aria-current=${ariaCurrent}
 			aria-label=${label}
 			tabindex=${actionTabindex ?? nothing}
 		>${content}</a>`;
-	if (control === "checkbox" || control === "button") return html`<button class="list-item-action"
+	if (control === "checkbox" || control === "button") return html`<button class="list-item-segment"
 			type="button"
 			role=${control === "checkbox" ? "checkbox" : nothing}
 			aria-checked=${control === "checkbox" ? String(checked) : nothing}
@@ -40722,12 +41331,12 @@ function template$9(control, href, target, rel, checked, expanded, current, disa
 			?disabled=${disabled}
 			tabindex=${actionTabindex ?? nothing}
 		>${content}</button>`;
-	return html`<div class="list-item-action">${content}</div>`;
+	return html`<div class="list-item-segment">${content}</div>`;
 }
 //#endregion
-//#region src/components/lists-and-tables/list-item-action/list-item-action.ts
-var _NLDDListItemAction;
-var NLDDListItemAction = (_NLDDListItemAction = class NLDDListItemAction extends LitElement {
+//#region src/components/lists-and-tables/list-item-segment/list-item-segment.ts
+var _NLDDListItemSegment;
+var NLDDListItemSegment = (_NLDDListItemSegment = class NLDDListItemSegment extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.button = false;
@@ -40740,7 +41349,11 @@ var NLDDListItemAction = (_NLDDListItemAction = class NLDDListItemAction extends
 		this.accessibleLabel = "";
 		this._parentType = "list";
 		this._handleClick = (e) => {
-			if (this.disabled) return;
+			if (this.disabled) {
+				e.preventDefault();
+				e.stopPropagation();
+				return;
+			}
 			this._control?.focus();
 			if (this._controlType !== "checkbox") return;
 			if (!e.composedPath().includes(this._control)) return;
@@ -40757,9 +41370,14 @@ var NLDDListItemAction = (_NLDDListItemAction = class NLDDListItemAction extends
 		this._handleFocusOut = () => {
 			this._control?.classList.remove("is-pointer-focus");
 		};
+		this._onMouseDown = (e) => {
+			if (e.button > 0 || this.disabled) return;
+			e.preventDefault();
+		};
 		this._onPointerDown = (e) => {
 			if (e.button > 0 || this.disabled) return;
 			this._control?.classList.add("is-pressed");
+			this._control?.focus({ preventScroll: true });
 		};
 		this._clearPressed = () => {
 			this._control?.classList.remove("is-pressed");
@@ -40771,6 +41389,7 @@ var NLDDListItemAction = (_NLDDListItemAction = class NLDDListItemAction extends
 		this.addEventListener("focusout", this._handleFocusOut);
 		this.addEventListener("click", this._handleClick);
 		this.addEventListener("pointerdown", this._onPointerDown);
+		this.addEventListener("mousedown", this._onMouseDown);
 		this.addEventListener("pointerup", this._clearPressed);
 		this.addEventListener("pointercancel", this._clearPressed);
 	}
@@ -40780,6 +41399,7 @@ var NLDDListItemAction = (_NLDDListItemAction = class NLDDListItemAction extends
 		this.removeEventListener("focusout", this._handleFocusOut);
 		this.removeEventListener("click", this._handleClick);
 		this.removeEventListener("pointerdown", this._onPointerDown);
+		this.removeEventListener("mousedown", this._onMouseDown);
 		this.removeEventListener("pointerup", this._clearPressed);
 		this.removeEventListener("pointercancel", this._clearPressed);
 	}
@@ -40791,7 +41411,7 @@ var NLDDListItemAction = (_NLDDListItemAction = class NLDDListItemAction extends
 	_applyParentType(type) {
 		this._parentType = type;
 	}
-	/** Whether the consumer asked for an interactive action at all. */
+	/** Whether the consumer asked for an interactive segment at all. */
 	get _wantsControl() {
 		return Boolean(this.href) || this.button || this.checkbox;
 	}
@@ -40806,7 +41426,7 @@ var NLDDListItemAction = (_NLDDListItemAction = class NLDDListItemAction extends
 		this._control?.focus(options);
 	}
 	/** The open state has to reach the styles, and it lives in a property (the
-	*  row's, for a disclosure action) that CSS cannot see. A host class is the
+	*  row's, for a disclosure segment) that CSS cannot see. A host class is the
 	*  hook — the same mechanism nldd-list already uses for .is-boxed / .is-first. */
 	updated() {
 		const expanded = this.disclosure ? this._rowExpanded : this.expanded;
@@ -40815,48 +41435,48 @@ var NLDDListItemAction = (_NLDDListItemAction = class NLDDListItemAction extends
 	render() {
 		return template$9(this._controlType, this.href, this.target, this.rel, this.checked, this.disclosure ? this._rowExpanded : this.expanded, this.current, this.disabled, this.accessibleLabel, this._tabbable === void 0 ? void 0 : this._tabbable ? "0" : "-1");
 	}
-}, _NLDDListItemAction.styles = [listItemActionStyles], _NLDDListItemAction);
+}, _NLDDListItemSegment.styles = [listItemSegmentStyles], _NLDDListItemSegment);
 __decorate([property({
 	type: Boolean,
 	reflect: true
-})], NLDDListItemAction.prototype, "button", void 0);
-__decorate([property({ reflect: true })], NLDDListItemAction.prototype, "href", void 0);
-__decorate([property({ reflect: true })], NLDDListItemAction.prototype, "target", void 0);
-__decorate([property({ reflect: true })], NLDDListItemAction.prototype, "rel", void 0);
+})], NLDDListItemSegment.prototype, "button", void 0);
+__decorate([property({ reflect: true })], NLDDListItemSegment.prototype, "href", void 0);
+__decorate([property({ reflect: true })], NLDDListItemSegment.prototype, "target", void 0);
+__decorate([property({ reflect: true })], NLDDListItemSegment.prototype, "rel", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
-})], NLDDListItemAction.prototype, "checkbox", void 0);
+})], NLDDListItemSegment.prototype, "checkbox", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
-})], NLDDListItemAction.prototype, "checked", void 0);
+})], NLDDListItemSegment.prototype, "checked", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
-})], NLDDListItemAction.prototype, "expanded", void 0);
+})], NLDDListItemSegment.prototype, "expanded", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
-})], NLDDListItemAction.prototype, "disclosure", void 0);
+})], NLDDListItemSegment.prototype, "disclosure", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
-})], NLDDListItemAction.prototype, "current", void 0);
+})], NLDDListItemSegment.prototype, "current", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
-})], NLDDListItemAction.prototype, "disabled", void 0);
+})], NLDDListItemSegment.prototype, "disabled", void 0);
 __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("fit-content")
-})], NLDDListItemAction.prototype, "width", void 0);
-__decorate([property({ attribute: "accessible-label" })], NLDDListItemAction.prototype, "accessibleLabel", void 0);
-__decorate([state()], NLDDListItemAction.prototype, "_parentType", void 0);
-__decorate([state()], NLDDListItemAction.prototype, "_tabbable", void 0);
-__decorate([state()], NLDDListItemAction.prototype, "_rowExpanded", void 0);
-__decorate([query(".list-item-action")], NLDDListItemAction.prototype, "_control", void 0);
-NLDDListItemAction = __decorate([customElement("nldd-list-item-action")], NLDDListItemAction);
+})], NLDDListItemSegment.prototype, "width", void 0);
+__decorate([property({ attribute: "accessible-label" })], NLDDListItemSegment.prototype, "accessibleLabel", void 0);
+__decorate([state()], NLDDListItemSegment.prototype, "_parentType", void 0);
+__decorate([state()], NLDDListItemSegment.prototype, "_tabbable", void 0);
+__decorate([state()], NLDDListItemSegment.prototype, "_rowExpanded", void 0);
+__decorate([query(".list-item-segment")], NLDDListItemSegment.prototype, "_control", void 0);
+NLDDListItemSegment = __decorate([customElement("nldd-list-item-segment")], NLDDListItemSegment);
 //#endregion
 //#region src/components/lists-and-tables/table/table.styles.ts
 var tableStyles = css`
@@ -44463,7 +45083,7 @@ var NLDDTopNavigationBar = (_NLDDTopNavigationBar = class NLDDTopNavigationBar e
 			Promise.resolve().then(() => list_item_exports),
 			Promise.resolve().then(() => text_cell_exports),
 			Promise.resolve().then(() => icon_cell_exports),
-			import("./icon-CIpJq_cf.js").then((n) => n.n)
+			import("./icon-C1Kikpol.js").then((n) => n.n)
 		]);
 	}
 	_createGlobalMenuSheet() {
@@ -47018,6 +47638,13 @@ var modalDialogStyles = css`
 	/* # Block */
 
 	.modal-dialog {
+		/* Where the app's layout context ends, as in nldd-sheet: the dialog scrolls
+		   itself and starts at its own top edge, so anything inside it stops
+		   following the app's scroll mode and its layer offsets. */
+		--context-scroll-mode: nested;
+		--context-layer-top: 0px;
+		--context-layer-bottom: 0px;
+
 		box-sizing: border-box;
 		outline: none;
 		border: none;
@@ -48328,6 +48955,7 @@ var badgeStyles = css`
 	/* # Host */
 
 	:host {
+		--_custom-color: transparent;
 		--_background-color: var(--semantics-categories-critical-filled-background-color);
 		--_border-color: var(--semantics-categories-critical-filled-highlight-border-color);
 		--_border-width: var(--components-badge-border-width);
@@ -48359,6 +48987,18 @@ var badgeStyles = css`
 
 	/* ## Color */
 
+	/* color on the host, for the same reason as custom-color below: the contrast
+	   token reads currentColor, so without this the flip is computed against the
+	   inherited color while the fill comes from the context channel. A row that
+	   sets the channel to white over dark text then paints white on white. */
+	:host([color="inherit"]) {
+		color: var(--context-content-color, currentColor);
+
+		--_background-color: currentColor;
+		--_border-color: transparent;
+		--_content-color: var(--semantics-content-contrast-color);
+	}
+
 	:host([color="accent"]) {
 		--_background-color: var(--semantics-categories-accent-filled-background-color);
 		--_border-color: var(--semantics-categories-accent-filled-highlight-border-color);
@@ -48494,6 +49134,17 @@ var badgeStyles = css`
 		--_content-color: var(--semantics-categories-mintgroen-filled-content-color);
 	}
 
+	/* color on the host rather than on the fill: the contrast token reads
+	   currentColor, so the text lands on black or white without a second formula
+	   to keep in step. After every [color] rule, so it wins over one. */
+	:host([custom-color]) {
+		color: var(--_custom-color);
+
+		--_background-color: var(--_custom-color);
+		--_border-color: transparent;
+		--_content-color: var(--semantics-content-contrast-color);
+	}
+
 	:host([hidden]) {
 		display: none;
 	}
@@ -48516,7 +49167,6 @@ var badgeStyles = css`
 		gap: var(--_gap);
 		align-items: center;
 		justify-content: center;
-		color: var(--_content-color);
 		font: var(--_font);
 		white-space: nowrap;
 	}
@@ -48525,15 +49175,15 @@ var badgeStyles = css`
 		.badge {
 			border: 1px solid CanvasText;
 			background-color: Canvas;
+		}
+
+		.badge__icon,
+		.badge__text {
 			color: CanvasText;
 		}
 	}
 
-	/* Grows out of the badge and fades: it borrows the badge's own shape and
-	   colour, so it works on a dot as well as on a counter. Behind the content
-	   and inert, so it never affects layout or hit area.
-
-	   A growing box-shadow rather than a scale: scaling multiplies, so a wide
+	/* A growing box-shadow rather than a scale: scaling multiplies, so a wide
 	   badge would throw a halo that is far wider than it is tall. A spread adds
 	   the same distance on every side, whatever the badge measures.
 
@@ -48598,7 +49248,12 @@ var badgeStyles = css`
 
 	/* # Elements */
 
+	/* The content carries the content color, not .badge itself: the fill is a
+	   custom property that resolves where it is used, and a fill of currentColor
+	   on an element that also sets color would take that color instead of the
+	   one around it. Mirrors nldd-avatar. */
 	.badge__icon {
+		color: var(--_content-color);
 		display: inline-flex;
 		width: var(--_icon-size);
 		height: var(--_icon-size);
@@ -48617,6 +49272,7 @@ var badgeStyles = css`
 	}
 
 	.badge__text {
+		color: var(--_content-color);
 		display: inline-block;
 	}
 `;
@@ -48666,7 +49322,8 @@ var nlddBadgeTranslations = { "components.badge.notification-label": "Notificati
 *
 * @element nldd-badge
 * @attr {string} size - Size: 'sm' | 'md' (default: 'md')
-* @attr {string} color - Semantic ('critical' | 'accent' | 'neutral' | 'warning' | 'success') or a Rijkshuisstijl color ('lintblauw' | 'hemelblauw' | 'oranje' | …). Default: 'critical'
+* @attr {string} color - 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'
+* @attr {string} custom-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.
 * @attr {boolean} pulse - Grows a ring out of the badge and fades it, for something happening right now (a live connection, an outage). Respects `prefers-reduced-motion`.
 * @attr {string} text - Text (takes precedence over number)
 * @attr {number} number - Numeric value. Shortened when it is over max
@@ -48681,6 +49338,7 @@ var NLDDBadge = (_NLDDBadge = class NLDDBadge extends withTranslations(LitElemen
 		super(..._args);
 		this.size = "md";
 		this.color = "critical";
+		this.customColor = "";
 		this.pulse = false;
 		this.text = "";
 		this.number = void 0;
@@ -48689,6 +49347,11 @@ var NLDDBadge = (_NLDDBadge = class NLDDBadge extends withTranslations(LitElemen
 		this.accessibleLabel = "";
 		this.decorative = false;
 	}
+	updated(changed) {
+		if (!changed.has("customColor")) return;
+		if (this.customColor) this.style.setProperty("--_custom-color", this.customColor);
+		else this.style.removeProperty("--_custom-color");
+	}
 	get _hasText() {
 		return !!this.text || typeof this.number === "number";
 	}
@@ -48720,6 +49383,11 @@ __decorate([property({
 	reflect: true,
 	converter: reflectNonDefault("critical")
 })], NLDDBadge.prototype, "color", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "custom-color",
+	converter: reflectNonDefault("")
+})], NLDDBadge.prototype, "customColor", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -51973,4 +52641,4 @@ __decorate([property({
 })], NLDDJustInTimeEducation.prototype, "noArrow", void 0);
 NLDDJustInTimeEducation = _NLDDJustInTimeEducation = __decorate([customElement("nldd-just-in-time-education")], NLDDJustInTimeEducation);
 //#endregion
-export { NLDDActivityIndicator, NLDDAppView, NLDDAvatar, NLDDAvatarGroup, NLDDBadge, NLDDBanner, NLDDBarSplitView, NLDDBlockquote, NLDDBox, NLDDBreadcrumbs, NLDDBreadcrumbsItem, NLDDButton, NLDDButtonBar, NLDDButtonGroup, NLDDCard, NLDDCell, NLDDCheckbox, NLDDCheckboxField, NLDDCodeEditor, NLDDCodeViewer, NLDDCollection, NLDDComboBox, NLDDContainer, NLDDDateField, NLDDDatePicker, NLDDDescriptionCell, NLDDDivider, NLDDDocumentTabBar, NLDDDragHandleCell, NLDDDropdown, NLDDFileField, NLDDForm, NLDDFormActions, NLDDFormField, NLDDFormSection, NLDDFullBleedSection, NLDDHero, NLDDIcon, NLDDIconButton, NLDDIconCell, NLDDIdentity, NLDDImage, NLDDInlineDialog, NLDDJustInTimeEducation, NLDDKeyboardShortcut, NLDDLink, NLDDList, NLDDListItem, NLDDListItemAction, NLDDMenu, NLDDMenuBar, NLDDMenuBarItem, NLDDModalDialog, NLDDMultiLineTextField, NLDDNavigationSplitView, NLDDNotification, NLDDNumberField, NLDDOneHalfOneHalfSection, NLDDOneThirdTwoThirdsSection, NLDDPage, NLDDPageFooter, NLDDPageFooterLegalBar, NLDDPageFooterLegalBarItem, NLDDPagination, NLDDPasswordField, NLDDPopover, NLDDProgressBar, NLDDProgressBarSegmentIndicator, NLDDProgressCircle, NLDDProgressCircleSegmentIndicator, NLDDRadioButton, NLDDRadioButtonField, NLDDRadioButtonGroup, NLDDRichText, NLDDSearchField, NLDDSegmentedControl, NLDDSheet, NLDDSideBySideSplitView, NLDDSidebarSection, NLDDSimpleSection, NLDDSkipLink, NLDDSpacer, NLDDSpacerCell, NLDDSplitButton, NLDDSplitViewDivider, NLDDSplitViewPane, NLDDStackedSplitView, NLDDStatusBar, NLDDStepIndicator, NLDDStepIndicatorItem, NLDDStepper, NLDDSwitch, NLDDSwitchField, NLDDTabBar, NLDDTable, NLDDTableRow, NLDDTag, NLDDTextCell, NLDDTextEditor, NLDDTextField, NLDDTimeField, NLDDTimePicker, NLDDTimelineTrackCell, NLDDTitle, NLDDTitleCell, NLDDToggleButton, NLDDToggleButtonGroup, NLDDToken, NLDDTokenField, NLDDToolbar, NLDDTooltip, NLDDTopNavigationBar, NLDDTopTitleBar, NLDDTwoThirdsOneThirdSection, NLDDWindow };
+export { NLDDActivityIndicator, NLDDAppView, NLDDAvatar, NLDDAvatarGroup, NLDDBadge, NLDDBanner, NLDDBarSplitView, NLDDBlockquote, NLDDBox, NLDDBreadcrumbs, NLDDBreadcrumbsItem, NLDDButton, NLDDButtonBar, NLDDButtonGroup, NLDDCard, NLDDCell, NLDDCheckbox, NLDDCheckboxField, NLDDCodeEditor, NLDDCodeViewer, NLDDCollection, NLDDComboBox, NLDDContainer, NLDDDateField, NLDDDatePicker, NLDDDescriptionCell, NLDDDivider, NLDDDocumentTabBar, NLDDDragHandleCell, NLDDDropdown, NLDDFileField, NLDDForm, NLDDFormActions, NLDDFormField, NLDDFormSection, NLDDFullBleedSection, NLDDHero, NLDDIcon, NLDDIconButton, NLDDIconCell, NLDDIdentity, NLDDImage, NLDDInlineDialog, NLDDJustInTimeEducation, NLDDKeyboardShortcut, NLDDLink, NLDDList, NLDDListItem, NLDDListItemSegment, NLDDMenu, NLDDMenuBar, NLDDMenuBarItem, NLDDModalDialog, NLDDMultiLineTextField, NLDDNavigationSplitView, NLDDNotification, NLDDNumberField, NLDDOneHalfOneHalfSection, NLDDOneThirdTwoThirdsSection, NLDDPage, NLDDPageFooter, NLDDPageFooterLegalBar, NLDDPageFooterLegalBarItem, NLDDPagination, NLDDPasswordField, NLDDPopover, NLDDProgressBar, NLDDProgressBarSegmentIndicator, NLDDProgressCircle, NLDDProgressCircleSegmentIndicator, NLDDRadioButton, NLDDRadioButtonField, NLDDRadioButtonGroup, NLDDRichText, NLDDSearchField, NLDDSegmentedControl, NLDDSheet, NLDDSideBySideSplitView, NLDDSidebarSection, NLDDSimpleSection, NLDDSkipLink, NLDDSpacer, NLDDSpacerCell, NLDDSplitButton, NLDDSplitViewDivider, NLDDSplitViewPane, NLDDStackedSplitView, NLDDStatusBar, NLDDStepIndicator, NLDDStepIndicatorItem, NLDDStepper, NLDDSwitch, NLDDSwitchField, NLDDTabBar, NLDDTable, NLDDTableRow, NLDDTag, NLDDText, NLDDTextCell, NLDDTextEditor, NLDDTextField, NLDDTimeField, NLDDTimePicker, NLDDTimelineTrackCell, NLDDTitle, NLDDTitleCell, NLDDToggleButton, NLDDToggleButtonGroup, NLDDToken, NLDDTokenField, NLDDToolbar, NLDDTooltip, NLDDTopNavigationBar, NLDDTopTitleBar, NLDDTwoThirdsOneThirdSection, NLDDWindow };