@nldd/design-system 0.8.70 → 0.8.72

package/dist/components/lists-and-tables/list/list.styles.js

@@ -17,11 +17,12 @@ export const listStyles = css `
 		--_max-height: none;
 		--_background-color: transparent;
 		--_highlight-border-color: transparent;
+		--_box-padding: var(--primitives-space-4);
 		--_gap: var(--primitives-space-8);
 		--_search-field-min-size: var(--semantics-controls-md-min-size);
 		--_search-field-icon-size: var(--primitives-space-24);
-		--_search-field-end-padding-right: calc((var(--_search-field-min-size) - var(--semantics-controls-sm-min-size)) / 2 - var(--semantics-input-fields-border-thickness));
-		--_search-field-z-index-button-focus: 1;
+		--_search-field-end-padding-right: calc((var(--_search-field-min-size) - var(--semantics-controls-sm-min-size)) / 2 - var(--semantics-input-fields-border-width));
+		--_search-field-button-focus-z-index: 1;
 		--_search-bar-gap: var(--primitives-space-8);
 		--_toolbar-gap: var(--primitives-space-8);
 		--_empty-padding: var(--primitives-space-16);
@@ -46,16 +47,8 @@ export const listStyles = css `
 		--_highlight-border-color: var(--semantics-surfaces-base-border-color);
 	}
 
-	:host([variant="box"]) .list__main {
-		position: relative;
-		border-radius: var(--components-list-corner-radius);
-		background-color: var(--_background-color);
-		box-shadow: inset 0 0 0 1px var(--_highlight-border-color);
-		overflow: hidden;
-	}
-
 
-	/* # Elements */
+	/* # Block */
 
 	.list {
 		display: flex;
@@ -63,6 +56,9 @@ export const listStyles = css `
 		gap: var(--_gap);
 	}
 
+
+	/* # Elements */
+
 	.list__header {
 		display: contents;
 	}
@@ -84,17 +80,29 @@ export const listStyles = css `
 		flex-direction: column;
 	}
 
-	.list__main[hidden] {
-		display: none;
+	/* No overflow clip: the rows sit 4px inside the frame, so their fills never
+	   reach its corners and have nothing to be clipped against. Without it a
+	   focus ring inside the box paints outward, like every other control in the
+	   system, instead of being cut off by the frame. */
+	:host([variant="box"]) .list__main {
+		position: relative;
+		border-radius: var(--semantics-surfaces-corner-radius);
+		background-color: var(--_background-color);
+		box-shadow: inset 0 0 0 1px var(--_highlight-border-color);
 	}
 
 	/* Listbox: give the options a bit more breathing room from the pinned
 	   search bar (and toolbar) above them than the default inter-row gap, so
 	   the search field reads as a zone distinct from the scrolling options. */
+
 	:host([type="listbox"]) .list__main {
 		margin-block-start: var(--primitives-space-8);
 	}
 
+	.list__main[hidden] {
+		display: none;
+	}
+
 	.list__items {
 		display: flex;
 		flex-direction: column;
@@ -104,6 +112,11 @@ export const listStyles = css `
 		display: none;
 	}
 
+	:host([variant="box"]) .list__items {
+		padding-inline: calc(var(--components-list-item-indicator-inline-inset) + var(--_box-padding));
+		padding-block: var(--_box-padding);
+	}
+
 	:host([type="listbox"]) .list__items {
 		max-height: var(--_max-height);
 		overflow-x: hidden;
@@ -111,10 +124,6 @@ export const listStyles = css `
 		padding-inline: var(--components-list-item-indicator-inline-inset);
 	}
 
-	:host([type="listbox"][variant="box"]) .list__items {
-		padding-inline: 0;
-	}
-
 	.list__empty {
 		padding: var(--_empty-padding);
 	}
@@ -123,8 +132,6 @@ export const listStyles = css `
 		display: none;
 	}
 
-	/* ## Search */
-
 	.list__search-bar {
 		display: flex;
 		flex-direction: row;
@@ -175,7 +182,7 @@ export const listStyles = css `
 
 	.list__search-field-icon {
 		display: flex;
-		margin-inline: calc((var(--_search-field-min-size) - var(--_search-field-icon-size)) / 2 - var(--semantics-input-fields-border-thickness));
+		margin-inline: calc((var(--_search-field-min-size) - var(--_search-field-icon-size)) / 2 - var(--semantics-input-fields-border-width));
 		width: var(--_search-field-icon-size);
 		height: var(--_search-field-icon-size);
 		flex-shrink: 0;
@@ -215,7 +222,7 @@ export const listStyles = css `
 
 	.list__search-field-clear:focus-within {
 		position: relative;
-		z-index: var(--_search-field-z-index-button-focus);
+		z-index: var(--_search-field-button-focus-z-index);
 	}
 
 	::slotted(.nldd-list-drag-placeholder) {
@@ -256,7 +263,7 @@ export const listStyles = css `
 	}
 
 
-	/* # Accessibility*/
+	/* # Accessibility */
 
 	@media (forced-colors: active) {
 		:host([variant="box"]) .list__main {

package/dist/components/lists-and-tables/list/list.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list/list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwQ5B,CAAC"}
+{"version":3,"file":"list.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list/list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Q5B,CAAC"}

package/dist/components/lists-and-tables/list/list.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.template.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list/list.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,6EAA6E;AAC7E,MAAM,WAAW,cAAc;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,wBAAwB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,iBAAiB;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,OAAO,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,GAAI,qFAQtB,iBAAiB,yCAwGnB,CAAC"}
+{"version":3,"file":"list.template.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list/list.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,6EAA6E;AAC7E,MAAM,WAAW,cAAc;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,wBAAwB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,iBAAiB;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,OAAO,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,GAAI,qFAQtB,iBAAiB,yCAyGnB,CAAC"}

package/dist/components/lists-and-tables/list/list.template.js

@@ -6,13 +6,14 @@ export const template = ({ itemsLabel, hasToolbar, type, isEmpty, emptyText, emp
     // Navigation: the host carries role="navigation" with its own label; an
     // extra aria-label on the inner role="list" would make the landmark name
     // and the inner list name stack in screen-reader announcements. Listbox:
-    // the input is the labelled control, so the listbox itself stays unlabelled.
+    // the input is the labeled control, so the listbox itself stays unlabeled.
     const skipItemsLabel = isNavigation || isListbox;
-    // Role on .list__items: role="listbox" in listbox mode, else role="list".
+    // Role on .list__items: role="listbox" in listbox mode, role="tree" for a
+    // tree, else role="list".
     // The empty-state (a non-option) is now a SIBLING of .list__items inside
     // .list__main, so .list__items only ever contains options/items — the role
     // can be set unconditionally per type (it's hidden when empty anyway).
-    const itemsRole = isListbox ? 'listbox' : 'list';
+    const itemsRole = isListbox ? 'listbox' : type === 'tree' ? 'tree' : 'list';
     // In listbox mode an empty search has no "no results" meaning yet, so the
     // empty state is suppressed — the consumer shows just the search field (and
     // may place its own hint outside the list). It appears only once a query is

package/dist/components/lists-and-tables/list/list.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.template.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list/list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AA8BzD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,UAAU,EACV,UAAU,EACV,IAAI,EACJ,OAAO,EACP,SAAS,EACT,mBAAmB,EACnB,OAAO,GACY,EAAE,EAAE;IACvB,MAAM,YAAY,GAAG,IAAI,KAAK,YAAY,CAAC;IAC3C,MAAM,SAAS,GAAG,IAAI,KAAK,SAAS,CAAC;IACrC,wEAAwE;IACxE,yEAAyE;IACzE,yEAAyE;IACzE,6EAA6E;IAC7E,MAAM,cAAc,GAAG,YAAY,IAAI,SAAS,CAAC;IACjD,0EAA0E;IAC1E,yEAAyE;IACzE,2EAA2E;IAC3E,uEAAuE;IACvE,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IACjD,0EAA0E;IAC1E,4EAA4E;IAC5E,4EAA4E;IAC5E,4EAA4E;IAC5E,mDAAmD;IACnD,MAAM,SAAS,GAAG,OAAO,IAAI,CAAC,CAAC,SAAS,IAAI,OAAO,CAAC,WAAW,KAAK,EAAE,CAAC,CAAC;IACxE,MAAM,QAAQ,GAAG,CAAC,OAAO,IAAI,SAAS,CAAC;IACvC,OAAO,IAAI,CAAA;;;MAGN,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;yBAYG,OAAO,CAAC,SAAS;yBACjB,CAAC,OAAO;;iCAEA,OAAO,CAAC,QAAQ,IAAI,OAAO;sBACtC,OAAO,CAAC,qBAAqB;uBAC5B,OAAO,CAAC,iBAAiB;kBAC9B,OAAO,CAAC,WAAW;kBACnB,OAAO,CAAC,aAAa;oBACnB,OAAO,CAAC,eAAe;kBACzB,OAAO,CAAC,aAAa;iBACtB,OAAO,CAAC,YAAY;;;SAG5B,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;kBAOjB,OAAO,CAAC,gBAAgB;;oBAEtB,OAAO,CAAC,YAAY;;;;QAIhC,CAAC,CAAC,CAAC,OAAO;;kDAEgC,CAAC,OAAO,CAAC,eAAe;iDACzB,OAAO,CAAC,wBAAwB;;;KAG5E,CAAC,CAAC,CAAC,OAAO;yCAC0B,CAAC,UAAU;;;;qCAIf,CAAC,QAAQ;;UAEpC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;YAClD,SAAS;kBACH,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;eACrD,OAAO;;;;;eAKP,CAAC,SAAS;;;;cAIX,SAAS;yBACE,mBAAmB,IAAI,OAAO;;;;;;;;;;;;;;;;EAgBrD,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"list.template.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list/list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AA8BzD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,UAAU,EACV,UAAU,EACV,IAAI,EACJ,OAAO,EACP,SAAS,EACT,mBAAmB,EACnB,OAAO,GACY,EAAE,EAAE;IACvB,MAAM,YAAY,GAAG,IAAI,KAAK,YAAY,CAAC;IAC3C,MAAM,SAAS,GAAG,IAAI,KAAK,SAAS,CAAC;IACrC,wEAAwE;IACxE,yEAAyE;IACzE,yEAAyE;IACzE,2EAA2E;IAC3E,MAAM,cAAc,GAAG,YAAY,IAAI,SAAS,CAAC;IACjD,0EAA0E;IAC1E,0BAA0B;IAC1B,yEAAyE;IACzE,2EAA2E;IAC3E,uEAAuE;IACvE,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAC5E,0EAA0E;IAC1E,4EAA4E;IAC5E,4EAA4E;IAC5E,4EAA4E;IAC5E,mDAAmD;IACnD,MAAM,SAAS,GAAG,OAAO,IAAI,CAAC,CAAC,SAAS,IAAI,OAAO,CAAC,WAAW,KAAK,EAAE,CAAC,CAAC;IACxE,MAAM,QAAQ,GAAG,CAAC,OAAO,IAAI,SAAS,CAAC;IACvC,OAAO,IAAI,CAAA;;;MAGN,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;yBAYG,OAAO,CAAC,SAAS;yBACjB,CAAC,OAAO;;iCAEA,OAAO,CAAC,QAAQ,IAAI,OAAO;sBACtC,OAAO,CAAC,qBAAqB;uBAC5B,OAAO,CAAC,iBAAiB;kBAC9B,OAAO,CAAC,WAAW;kBACnB,OAAO,CAAC,aAAa;oBACnB,OAAO,CAAC,eAAe;kBACzB,OAAO,CAAC,aAAa;iBACtB,OAAO,CAAC,YAAY;;;SAG5B,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;kBAOjB,OAAO,CAAC,gBAAgB;;oBAEtB,OAAO,CAAC,YAAY;;;;QAIhC,CAAC,CAAC,CAAC,OAAO;;kDAEgC,CAAC,OAAO,CAAC,eAAe;iDACzB,OAAO,CAAC,wBAAwB;;;KAG5E,CAAC,CAAC,CAAC,OAAO;yCAC0B,CAAC,UAAU;;;;qCAIf,CAAC,QAAQ;;UAEpC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;YAClD,SAAS;kBACH,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;eACrD,OAAO;;;;;eAKP,CAAC,SAAS;;;;cAIX,SAAS;yBACE,mBAAmB,IAAI,OAAO;;;;;;;;;;;;;;;;EAgBrD,CAAC;AACH,CAAC,CAAC"}

package/dist/components/lists-and-tables/list-item/list-item.d.ts

@@ -1,17 +1,60 @@
 import { LitElement } from 'lit';
 import type { ListType } from '../list/list.js';
-import '../cells/spacer-cell/spacer-cell.js';
 export type ListItemSize = 'sm' | 'md';
 declare const NLDDListItem_base: (abstract new (...args: any[]) => LitElement & {
     translations: Partial<{
-        'components.list-item.opens-in-new-tab-text': string;
+        'components.list-item.opens-in-new-tab-label': string;
     }>;
-    _t(key: "components.list-item.opens-in-new-tab-text", vars?: Record<string, string | number>): string;
+    _t(key: "components.list-item.opens-in-new-tab-label", vars?: Record<string, string | number>): string;
 }) & typeof LitElement;
 /**
- * A row within an `nldd-list`, providing layout for start, main and end areas.
- * Renders as a link when `href` is set, as a button when `button` is set, or
- * as a plain container otherwise. When it renders as a link, `target` and `rel`
+ * A row within an `nldd-list`. Renders as a link when `href` is set, as a
+ * checkbox when `checkbox` is set, as a button when `button` is set, or as a
+ * plain container otherwise. All cells and action segmented actions share one flat
+ * slot, in source order.
+ *
+ * ## Geometry
+ * Two rules govern every row:
+ * 1. State fills always paint the WIDENED row geometry — the row box extended
+ *    by the indicator inline inset on both sides — whether or not the row is
+ *    interactive. Paint never differs between a selected plain row and a
+ *    selected interactive row.
+ * 2. The widened strip belongs to the ROW, never to a segment. A row with any
+ *    action (its own `href`/`button`/`checkbox`, or a slotted segment) pulls
+ *    itself outward (`is-interactive` host class → negative inline margin)
+ *    and pads the row block back by the same amount, so content stays on the
+ *    grid. A row-wide action owns that padding itself, making the whole
+ *    widened box one hit area; slotted segmented actions stay in the grid, so their
+ *    footprint is position-independent and tree columns line up at any depth.
+ *
+ * ## Divider
+ * The divider spans the content width by default. Mark a cell with
+ * `divider-start` and/or `divider-end` to run it from that cell's start edge
+ * to that cell's end edge instead (e.g. starting after an avatar). Multiple
+ * markers resolve as the union: first `divider-start` through last
+ * `divider-end`. A start past the last end is an authoring error — the item
+ * DEV-warns and falls back to the full content width.
+ *
+ * ## Disclosure
+ * A branch row can disclose its children in two ways: a dedicated
+ * `nldd-list-item-action[disclosure]` segment (only the chevron is clickable),
+ * or the row itself as the control (`button` + `expanded`, the whole row
+ * toggles). In the second case, mark the chevron's `nldd-icon-cell` with
+ * `disclosure` and the row turns it with `expanded` — the same affordance,
+ * without having to trade a clickable row for a turning chevron.
+ *
+ * `checkbox` makes the WHOLE row the control: the inner action becomes a
+ * `role="checkbox"` button carrying `aria-checked`, it toggles `checked` on
+ * activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph)
+ * before the text and mark it `aria-hidden` + non-focusable — the row already
+ * conveys role and state, and a second focusable control would double the tab
+ * stops. Do NOT nest a real `<input type="checkbox">` in the action: interactive
+ * content inside a `<button>` is invalid HTML and AT announces the button, not
+ * the checked state. A `<label>` variant is not offered for the same reason it
+ * cannot work — label-to-input association walks the DOM tree, and a slotted
+ * input is not a descendant of a label in the shadow root.
+ *
+ * When it renders as a link, `target` and `rel`
  * are forwarded to the inner `<a>` (e.g. `target="_blank" rel="noopener noreferrer"`). With
  * `target="_blank"` the item also injects a visually hidden "opens in new tab"
  * announcement for assistive technology (WCAG 2.1 SC 3.2.2).
@@ -19,24 +62,28 @@ declare const NLDDListItem_base: (abstract new (...args: any[]) => LitElement &
  * The item synchronises its ARIA with its parent `nldd-list`'s `type`:
  * - `list` parent       → `role="listitem"`
  * - `navigation` parent → `role="listitem"` + `aria-current="page"` on the
- *                         inner `<a>` / `<button>` when `selected`
+ *   inner `<a>` / `<button>` when `selected`
  * - `listbox` parent    → `role="option"` + `aria-selected` reflecting `selected`.
- *                         The list points its search input's `aria-activedescendant`
- *                         at the active option via `_highlighted` (separate from `selected`).
+ *   The list points its search input's `aria-activedescendant`
+ *   at the active option via `_highlighted` (separate from `selected`).
  *
  * @element nldd-list-item
  *
- * @attr {'sm'|'md'} size - Row size (default: 'md')
+ * @attr {'sm'|'md'} size - Row size (default: 'md'). Pushed onto the cells whose `size` means the same scale (nldd-text-cell, nldd-drag-handle-cell), so it is written once per row instead of once per cell. A size set on the cell itself wins. Cells where `size` means something else — pixels on nldd-icon-cell / nldd-spacer-cell, a heading scale on nldd-title-cell — are left alone.
  * @attr {boolean} selected - Marks the item as selected. Selection is consumer-managed; the list never sets it. In a `navigation` parent it puts `aria-current="page"` on the inner action, in a `listbox` parent it drives `aria-selected`.
  * @attr {boolean} button - Renders the item as a `<button>`; ignored when `href` is set (a link wins)
+ * @attr {boolean} checkbox - Makes the whole row a `role="checkbox"` control; ignored when `href` is set
+ * @attr {boolean} checked - Checked state of a `checkbox` row; the item toggles it on activation
+ * @attr {boolean} expanded - Disclosure state. Drives the `children` group's visibility AND supplies `aria-expanded` — to the row's own control when the row is interactive, or to the segmented action marked `disclosure`. Written once either way; the item DEV-warns when there is nowhere for it to live.
  * @attr {string} href - Renders the item as an `<a>` with this URL. Takes precedence over `button`; without either the item is a plain container with no action.
  * @attr {string} target - Link target forwarded to the `<a>` (e.g. '_blank'); only applies with `href`. With '_blank' a visually hidden "opens in new tab" announcement is added for assistive technology.
  * @attr {string} rel - Link rel forwarded to the `<a>` (e.g. 'noopener noreferrer'); only applies with `href`
  * @attr {boolean} reorderable - Set by the parent `nldd-list` when its own `reorderable` is on (with `type="list"`); consumers do not set this. Serves as a CSS hook for drag handle visibility.
  *
- * @slot         - Main content area
- * @slot start   - Content at the start of the row
- * @slot end     - Content at the end of the row
+ * @slot - Cells and segmented actions, in source order
+ * @slot children - Child rows of a branch in an `nldd-list type="tree"`. Rendered as a `role="group"` below the row, hidden while `expanded` is false. The nesting IS the hierarchy, so aria-level / -posinset / -setsize are derived, not authored. The group has no styling of its own: repeat a spacer-cell per level to indent, or show depth some other way.
+ *
+ * @fires change - On a `checkbox` row after it toggles; detail: { checked: boolean }
  */
 export declare class NLDDListItem extends NLDDListItem_base {
     static styles: import("lit").CSSResult[];
@@ -44,6 +91,17 @@ export declare class NLDDListItem extends NLDDListItem_base {
     selected: boolean;
     /** When set, renders the item as a button; ignored when href is set. */
     button: boolean;
+    /** When set, the whole row is the checkbox control. Ignored when href is set. */
+    checkbox: boolean;
+    /** Checked state of a `checkbox` row. Toggled by the item on activation. */
+    checked: boolean;
+    /**
+     * Disclosure state of a row that opens something (a tree row's children, a
+     * details panel). Reflected as `aria-expanded` on the row's own control —
+     * `listitem` does not support the property, a `<button>` / `<a>` does. Leave
+     * the attribute off entirely when the row discloses nothing.
+     */
+    expanded?: boolean;
     /** When set, renders the item as a link. */
     href?: string;
     /**
@@ -57,8 +115,7 @@ export declare class NLDDListItem extends NLDDListItem_base {
     rel?: string;
     /** Set by the parent nldd-list when reorderable is enabled. Used as a CSS hook for drag handle visibility. */
     reorderable: boolean;
-    private _showStart;
-    private _showEnd;
+    private _showChildren;
     private _parentType;
     /** Set by the parent nldd-list when `arrow-navigation` (roving tabindex) is on.
      *  Switches the inner action from a normal tab stop to a roving one. */
@@ -74,10 +131,79 @@ export declare class NLDDListItem extends NLDDListItem_base {
     _highlighted: boolean;
     private _action?;
     private _isBoxed;
+    private _hasCheckedSegment;
+    private _lightDomObserver;
+    /** Watches the row and its divider-marker cells for size changes; marker
+     *  insets are measured, so any reflow can move them. */
+    private _dividerMarkerObserver;
+    private _observedMarkerTargets;
+    private _warnedDegenerateDivider;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private _onLightDomChange;
+    /** 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
+     *  row in a nested branch must not light up its ancestors. */
+    private _updateCheckedSegment;
+    /** 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.
+     *  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. */
+    private _updateInteractive;
     firstUpdated(): void;
+    /**
+     * Cells whose `size` means the sm/md scale. NOT every cell: `size` on
+     * nldd-icon-cell and nldd-spacer-cell is a pixel value and on nldd-title-cell
+     * a 1-6 heading scale, so pushing 'sm' there would corrupt them.
+     */
+    private static readonly SIZED_CELLS;
+    /** Remembers the size a cell was authored with, so a later push can restore it. */
+    private _ownCellSize;
+    /**
+     * 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
+     * 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.
+     */
+    private _ownDescendants;
+    /**
+     * Records the authored `size` before the cells upgrade. Custom elements
+     * upgrade in document order, so the item's connectedCallback runs before its
+     * children's — the only moment an authored `size="md"` is still readable.
+     * After upgrade `reflectNonDefault` strips it, making it indistinguishable
+     * from no attribute at all.
+     */
+    private _captureAuthoredCellSizes;
+    /**
+     * Pushes the row's size onto its sized cells so `size="sm"` is written once
+     * instead of on the row and on every cell. An explicit size on the cell wins
+     * and survives later pushes.
+     */
+    private _propagateSize;
     updated(changed: Map<string, unknown>): void;
+    /**
+     * A row WITH children is a branch, and a branch is either open or closed —
+     * there is no third state. So an absent `expanded` reads as collapsed there,
+     * and aria-expanded is always emitted. On a row without children an absent
+     * attribute keeps its other meaning: this row discloses nothing, emit no
+     * aria-expanded at all. Without this split, `?expanded=\${false}` (which
+     * removes the attribute) would leave a branch that never collapses.
+     */
+    private get _resolvedExpanded();
+    /** Segments marked `disclosure` announce the row's expanded state, so the
+     *  consumer writes it once — here, where it also drives the children group. */
+    private _relayExpanded;
+    /** `expanded` needs a control to sit on; a plain container has none. */
+    private _warnOnStrayExpanded;
     /** True when the item is an option in a `type="listbox"` parent. */
     get _isListboxOption(): boolean;
     /**
@@ -91,20 +217,65 @@ export declare class NLDDListItem extends NLDDListItem_base {
     private _syncWithList;
     _applyVariant(variant: string): void;
     _applyParentType(type: ListType): void;
+    /** Nested rows sit in this item's `children` slot, not the list's, so a plain
+     *  `querySelector` from the list walks past them. */
+    get childRows(): NLDDListItem[];
+    /** Every push the item receives is relayed one level down. */
+    private _relayToChildren;
     private _updateAriaState;
-    private _updateVisibility;
-    private _observeStartSlot;
-    private _observeEndSlot;
+    /**
+     * Measures the divider markers and writes the result as `--_divider-inset-
+     * start/-end` on the host. No markers → the vars are cleared and CSS falls
+     * back to the content width. Union semantics: the divider runs from the
+     * FIRST `divider-start` to the LAST `divider-end`; a side without markers
+     * keeps its default. Insets are measured against the row block (the widened
+     * box on interactive rows), so the values compose with the edge geometry.
+     */
+    private _measureDividerMarkers;
+    private _observeChildrenSlot;
+    /** Renders the group only when there is something in it — an empty
+     *  `role="group"` would be an empty branch in the accessibility tree. */
+    private _updateChildren;
     private _handleClick;
     private _handleFocusIn;
     private _handleFocusOut;
     private _onPointerDown;
+    /** Whether the event started in a row nested inside this one. Only the part
+     *  of the path BELOW this row counts — everything above it is this row's own
+     *  ancestry, which is where the event is heading, not where it came from. */
+    private _isFromNestedRow;
     private _clearPressed;
     /**
      * Delegates focus to the inner `.list-item__action` (the button or anchor),
      * so consumers can call `listItemEl.focus()` without reaching into shadow DOM.
      */
     focus(options?: FocusOptions): void;
+    /**
+     * 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.
+     *
+     * 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
+     * walks straight past such a scope when tabbing BACKWARDS if the host itself
+     * isn't tabbable — so a `-1` on a branch made every row inside it
+     * unreachable with Shift+Tab, while forward navigation still found them.
+     *
+     * @internal Also called by the list right after it moves the roving, so the
+     * tab stop is in the DOM before focus is handed over.
+     */
+    _syncRovingTabStops(): void;
+    /** The control that opens and closes this row: the segmented action marked
+     *  `disclosure`, or the row itself when it is a button. Never a link — Left
+     *  and Right may not navigate away. */
+    private get _disclosureControl();
+    /** Activates whatever opens this row, so the consumer's own click handler runs
+     *  and stays the only place `expanded` is written. Returns false when the row
+     *  has nothing to activate. */
+    _activateDisclosure(): boolean;
+    /** The branch this row hangs under, or undefined for a top-level row. */
+    get parentRow(): NLDDListItem | undefined;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/components/lists-and-tables/list-item/list-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAQjC,OAAO,KAAK,EAAY,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,qCAAqC,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC;;;;;;;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,YAAa,SAAQ,iBAAsD;IACvF,OAAgB,MAAM,4BAAoB;IAG1C,IAAI,EAAE,YAAY,CAAQ;IAG1B,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,MAAM,UAAS;IAEf,4CAA4C;IAE5C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IAEH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,6FAA6F;IAE7F,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,8GAA8G;IAE9G,WAAW,UAAS;IAGpB,OAAO,CAAC,UAAU,CAAS;IAG3B,OAAO,CAAC,QAAQ,CAAS;IAGzB,OAAO,CAAC,WAAW,CAAoB;IAEvC;4EACwE;IAExE,gBAAgB,UAAS;IAEzB;4EACwE;IAExE,aAAa,UAAS;IAEtB;;;;+EAI2E;IAE3E,YAAY,UAAS;IAGrB,OAAO,CAAC,OAAO,CAAC,CAAc;IAE9B,OAAO,CAAC,QAAQ,CAAS;IAEhB,iBAAiB;IAmBjB,oBAAoB;IAUpB,YAAY;IAaZ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM9C,oEAAoE;IACpE,IAAI,gBAAgB,IAAI,OAAO,CAE9B;IAED;;;;;;;OAOG;IACH,OAAO,CAAC,aAAa;IAYrB,aAAa,CAAC,OAAO,EAAE,MAAM;IAM7B,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAI/B,OAAO,CAAC,gBAAgB;IAsBxB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,cAAc,CAOpB;IAEF,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,cAAc,CAIpB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF;;;OAGG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,MAAM;CA8Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD"}
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.ts"],"names":[],"mappings":"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"}

package/dist/components/lists-and-tables/list-item/list-item.i18n.d.ts

@@ -1,5 +1,5 @@
 export declare const nlddListItemTranslations: {
-    'components.list-item.opens-in-new-tab-text': string;
+    'components.list-item.opens-in-new-tab-label': string;
 };
 export type NLDDListItemTranslations = typeof nlddListItemTranslations;
 //# sourceMappingURL=list-item.i18n.d.ts.map

package/dist/components/lists-and-tables/list-item/list-item.i18n.js

@@ -1,4 +1,4 @@
 export const nlddListItemTranslations = {
-    'components.list-item.opens-in-new-tab-text': 'Opent in nieuw tabblad',
+    'components.list-item.opens-in-new-tab-label': 'Opent in nieuw tabblad',
 };
 //# sourceMappingURL=list-item.i18n.js.map

package/dist/components/lists-and-tables/list-item/list-item.i18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.i18n.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACvC,4CAA4C,EAAE,wBAAwB;CACtE,CAAC"}
+{"version":3,"file":"list-item.i18n.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACvC,6CAA6C,EAAE,wBAAwB;CACvE,CAAC"}