@nldd/design-system 0.8.69 → 0.8.71

package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.js

@@ -9,24 +9,69 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  *
  * A cell component for displaying timeline track indicators in lists.
  * Shows a vertical line with a dot indicating timeline position and state.
- * The line extends into the surrounding list-item's block padding via the
- * `--context-list-item-padding-block` cascade so consecutive steps connect
- * without gaps.
+ * The row's block padding belongs to the cell itself (via
+ * `--context-cell-padding-block`), so the line spans the cell's own box edge to
+ * edge and consecutive steps connect without gaps.
+ *
+ * Standaard is de cel een kaal spoor: een lijn met een stip per rij, voor een
+ * tijdlijn van gebeurtenissen. Met `variant="step"` wordt de stip groot genoeg
+ * voor een cijfer of icoon en heb je een stappenlijst onder elkaar, de verticale
+ * tegenhanger van `nldd-step-indicator`. De maat hoort bij de variant en niet bij
+ * de inhoud: elke stip in een lijst is even groot, anders verspringt het spoor.
  *
  * @element nldd-timeline-track-cell
- * @attr {'past' | 'future' | 'none'} step - Timeline step state (default: 'past')
- * @attr {'first' | 'between' | 'last'} child - Position in timeline (default: 'between')
+ * @attr {'past' | 'current' | 'future' | 'none'} status - Status van deze stap (standaard 'past'); dezelfde waarden als `nldd-step-indicator-item`. `none` tekent alleen de lijn, zonder stip
+ * @attr {'dot' | 'step'} variant - Wat deze rij is: een `dot` (standaard) op een tijdlijn van gebeurtenissen, stip van 16px, of een `step` in een stappenlijst, stip van 24px waar een cijfer of icoon in past
+ * @attr {boolean} minor - Deze rij hoort onder de vorige: een kleinere stip in dezelfde baan, dus het spoor loopt recht door en er springt niets in. De stip blijft leeg (een cijfer of icoon past er niet in en zou de rij tot een eigen stap maken); de hiërarchie zet je verder met de rij zelf, bijvoorbeeld een `nldd-text-cell` in plaats van een `nldd-title-cell`
+ * @attr {'down' | 'up'} direction - Richting waarin de tijdlijn vooruit loopt: `down` (standaard) zet het verleden boven, `up` eronder. Alleen de huidige stap heeft een half spoor, dus alleen daar heeft dit effect
+ * @attr {'first' | 'between' | 'last'} position - Plek in de reeks (standaard 'between'): bepaalt of de lijn boven, onder of aan beide kanten van de stip doorloopt
+ * @attr {string} text - Cijfer of korte tekst in de stip
+ * @attr {string} icon - Icoonnaam in de stip; wint van `text`
+ *
+ * @slot - Eigen inhoud in de stip (alternatief voor `text` en `icon`)
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { reflectNonDefault } from '../../../../utilities/reflect-non-default.js';
 import { timelineTrackCellStyles } from './timeline-track-cell.styles.js';
 import { timelineTrackCellTemplate } from './timeline-track-cell.template.js';
+import '../../../content/icon/icon.js';
 let NLDDTimelineTrackCell = class NLDDTimelineTrackCell extends LitElement {
     constructor() {
         super(...arguments);
-        this.step = 'past';
-        this.child = 'between';
+        this.status = 'past';
+        this.variant = 'dot';
+        /** A step below a main step. A meaning, not a measurement: the cell picks the
+         *  size, so the scale can change later without every consumer following. Its
+         *  dot stays empty -- text, icon and slotted content are ignored. */
+        this.minor = false;
+        /** Which way the timeline moves forward. The cell only knows its own step, so
+         *  it cannot tell which neighbor came first: with `up` (newest at the top)
+         *  the traveled half of the track is the one below the marker. Only the
+         *  current step has a half-and-half track, so this is the only row where it
+         *  changes anything. */
+        this.direction = 'down';
+        this.position = 'between';
+        this.text = '';
+        this.icon = '';
+        this._warnedContent = false;
+    }
+    /** Only a step marker has room to read a number in, and a minor row is smaller
+     *  still -- besides, a number would claim it is a step of its own. */
+    get showsContent() {
+        return !this.minor && this.variant === 'step';
+    }
+    updated() {
+        if (!import.meta.env?.DEV)
+            return;
+        const ignored = !this.showsContent && Boolean(this.text || this.icon);
+        if (ignored && !this._warnedContent) {
+            this._warnedContent = true;
+            console.warn('<nldd-timeline-track-cell>: `text` en `icon` passen alleen in `variant="step"` zonder `minor`; hier worden ze niet getoond.');
+        }
+        else if (!ignored) {
+            this._warnedContent = false;
+        }
     }
     render() {
         return timelineTrackCellTemplate(this);
@@ -35,10 +80,25 @@ let NLDDTimelineTrackCell = class NLDDTimelineTrackCell extends LitElement {
 NLDDTimelineTrackCell.styles = timelineTrackCellStyles;
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('past') })
-], NLDDTimelineTrackCell.prototype, "step", void 0);
+], NLDDTimelineTrackCell.prototype, "status", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('dot') })
+], NLDDTimelineTrackCell.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTimelineTrackCell.prototype, "minor", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('down') })
+], NLDDTimelineTrackCell.prototype, "direction", void 0);
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('between') })
-], NLDDTimelineTrackCell.prototype, "child", void 0);
+], NLDDTimelineTrackCell.prototype, "position", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTimelineTrackCell.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTimelineTrackCell.prototype, "icon", void 0);
 NLDDTimelineTrackCell = __decorate([
     customElement('nldd-timeline-track-cell')
 ], NLDDTimelineTrackCell);

package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-track-cell.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAMvE,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAIN,SAAI,GAAS,MAAM,CAAC;QAGpB,UAAK,GAAU,SAAS,CAAC;IAK1B,CAAC;IAHS,MAAM;QACd,OAAO,yBAAyB,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;;AAVe,4BAAM,GAAG,uBAAuB,AAA1B,CAA2B;AAGjD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAO,MAAM,CAAC,EAAE,CAAC;mDACpD;AAGpB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAQ,SAAS,CAAC,EAAE,CAAC;oDACnD;AAPb,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAYjC"}
+{"version":3,"file":"timeline-track-cell.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,+BAA+B,CAAC;AAQhC,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAIN,WAAM,GAAW,MAAM,CAAC;QAGxB,YAAO,GAAY,KAAK,CAAC;QAEzB;;6EAEqE;QAErE,UAAK,GAAG,KAAK,CAAC;QAEd;;;;gCAIwB;QAExB,cAAS,GAAc,MAAM,CAAC;QAG9B,aAAQ,GAAa,SAAS,CAAC;QAG/B,SAAI,GAAG,EAAE,CAAC;QAGV,SAAI,GAAG,EAAE,CAAC;QAQF,mBAAc,GAAG,KAAK,CAAC;IAiBhC,CAAC;IAvBA;0EACsE;IACtE,IAAI,YAAY;QACf,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;IAC/C,CAAC;IAIQ,OAAO;QACf,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG;YAAE,OAAO;QAClC,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;QACtE,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACrC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,OAAO,CAAC,IAAI,CAAC,6HAA6H,CAAC,CAAC;QAC7I,CAAC;aACI,IAAI,CAAC,OAAO,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC7B,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,yBAAyB,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;;AArDe,4BAAM,GAAG,uBAAuB,AAA1B,CAA2B;AAGjD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAS,MAAM,CAAC,EAAE,CAAC;qDAClD;AAGxB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAU,KAAK,CAAC,EAAE,CAAC;sDACjD;AAMzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAC7B;AAQd;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAY,MAAM,CAAC,EAAE,CAAC;wDAC/C;AAG9B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAW,SAAS,CAAC,EAAE,CAAC;uDAChD;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACjB;AA9BE,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAuDjC"}

package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-track-cell.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,yBA8FnC,CAAC"}
+{"version":3,"file":"timeline-track-cell.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,yBAmJnC,CAAC"}

package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js

@@ -4,18 +4,25 @@ export const timelineTrackCellStyles = css `
 		box-sizing: border-box;
 	}
 
-
-	/* # Host */
-
 	:host {
-		--_size: var(--primitives-space-16);
+		--_lane-size: var(--primitives-space-16);
+		--_marker-size: var(--primitives-space-16);
+		--_marker-corner-radius: var(--primitives-corner-radius-full);
 		--_line-width: var(--primitives-space-2);
-		--_z-index-dot: 1;
-		--_color: var(--components-timeline-track-cell-color);
-		--_future-background-color: var(--components-timeline-track-cell-future-background-color);
-
+		--_track-color: var(--components-timeline-track-cell-color);
+		--_future-fill-color: var(--components-timeline-track-cell-future-background-color);
+		--_marker-z-index: 1;
+		--_ring-thickness: var(--primitives-space-2);
+		--_ring-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
+		--_marker-content-color: var(--semantics-content-contrast-color);
+		--_future-content-color: var(--semantics-content-secondary-color);
+		--_current-fill-color: light-dark(var(--primitives-color-accent-100), var(--primitives-color-accent-150));
+		--_icon-size: calc(var(--_marker-size) * 2 / 3);
+
+		isolation: isolate;
 		display: flex;
-		width: var(--_size);
+		padding-block: var(--context-cell-padding-block, 0px);
+		width: var(--_lane-size);
 		flex-direction: column;
 		align-self: stretch;
 		align-items: center;
@@ -25,71 +32,117 @@ export const timelineTrackCellStyles = css `
 		display: none;
 	}
 
+	:host([minor]) {
+		--_marker-size: var(--primitives-space-8);
+	}
+
+	:host([variant="step"]) {
+		--_lane-size: var(--primitives-space-24);
+		--_marker-size: var(--primitives-space-24);
+	}
 
-	/* # Block */
+	:host([variant="step"][minor]) {
+		--_marker-size: var(--primitives-space-12);
+	}
 
+	/* Bleeds back over the host's block padding, so consecutive rows connect. */
 	.timeline-track-cell {
 		position: relative;
-		width: var(--_size);
-		height: 100%;
+		width: var(--_lane-size);
+		height: calc(100% + 2 * var(--context-cell-padding-block, 0px));
 		min-height: var(--primitives-space-48);
+		margin-block: calc(var(--context-cell-padding-block, 0px) * -1);
 	}
 
-
-	/* # Elements */
-
-	.timeline-track-cell__line-top,
-	.timeline-track-cell__line-bottom,
-	.timeline-track-cell__line-full {
+	.timeline-track-cell__full-line,
+	.timeline-track-cell__top-line,
+	.timeline-track-cell__bottom-line {
 		position: absolute;
 		left: 50%;
 		margin-left: calc(var(--_line-width) / -2);
-		background-color: var(--_color);
+		background-color: var(--_track-color);
 		width: var(--_line-width);
 	}
 
-	.timeline-track-cell__line-top {
+	.timeline-track-cell__full-line {
+		top: 0;
+		bottom: 0;
+	}
+
+	.timeline-track-cell__top-line {
 		bottom: 50%;
-		height: calc(50% + var(--context-list-item-padding-block, 0px));
+		height: 50%;
 	}
 
-	.timeline-track-cell__line-bottom {
+	.timeline-track-cell__bottom-line {
 		top: 50%;
-		height: calc(50% + var(--context-list-item-padding-block, 0px));
+		height: 50%;
+	}
+
+	:host([status="future"]) .timeline-track-cell__top-line,
+	:host([status="future"]) .timeline-track-cell__bottom-line {
+		background-color: var(--_future-fill-color);
+	}
+
+	:host([status="current"]) .timeline-track-cell__bottom-line {
+		background-color: var(--_future-fill-color);
 	}
 
-	.timeline-track-cell__line-full {
-		top: calc(-1 * var(--context-list-item-padding-block, 0px));
-		bottom: calc(-1 * var(--context-list-item-padding-block, 0px));
+	:host([status="current"][direction="up"]) .timeline-track-cell__bottom-line {
+		background-color: var(--_track-color);
 	}
 
-	.timeline-track-cell__dot {
+	:host([status="current"][direction="up"]) .timeline-track-cell__top-line {
+		background-color: var(--_future-fill-color);
+	}
+
+	.timeline-track-cell__marker {
 		box-sizing: border-box;
 		position: absolute;
 		top: 50%;
-		left: 0;
-		z-index: var(--_z-index-dot);
-		margin-top: calc(var(--_size) / -2);
-		border: var(--_line-width) solid var(--_color);
-		border-radius: var(--primitives-corner-radius-full);
-		width: var(--_size);
-		height: var(--_size);
+		left: 50%;
+		z-index: var(--_marker-z-index);
+		display: flex;
+		width: var(--_marker-size);
+		height: var(--_marker-size);
+		margin-top: calc(var(--_marker-size) / -2);
+		margin-left: calc(var(--_marker-size) / -2);
+		align-items: center;
+		justify-content: center;
+		border: var(--_line-width) solid var(--_track-color);
+		border-radius: var(--_marker-corner-radius);
+		/* Ring in the background color: masks the line running underneath. */
+		box-shadow: 0 0 0 var(--_ring-thickness) var(--_ring-color);
+		color: var(--_marker-content-color);
+		font: var(--primitives-font-body-sm-regular-flat);
+	}
+
+	:host([status="past"]) .timeline-track-cell__marker,
+	:host(:not([status])) .timeline-track-cell__marker {
+		background-color: var(--_track-color);
+	}
+
+	:host([status="current"]) .timeline-track-cell__marker {
+		background-color: var(--_current-fill-color);
+		color: var(--_track-color);
 	}
 
-	:host([step="past"]) .timeline-track-cell__dot,
-	:host(:not([step])) .timeline-track-cell__dot {
-		background-color: var(--_color);
+	:host([status="future"]) .timeline-track-cell__marker {
+		border-color: var(--_future-fill-color);
+		background-color: var(--_future-fill-color);
+		color: var(--_future-content-color);
 	}
 
-	:host([step="future"]) .timeline-track-cell__dot {
-		background-color: var(--_future-background-color);
+	.timeline-track-cell__icon {
+		width: var(--_icon-size);
+		height: var(--_icon-size);
 	}
 
 	@media (forced-colors: active) {
-		.timeline-track-cell__dot,
-		.timeline-track-cell__line-top,
-		.timeline-track-cell__line-bottom,
-		.timeline-track-cell__line-full {
+		.timeline-track-cell__marker,
+		.timeline-track-cell__top-line,
+		.timeline-track-cell__bottom-line,
+		.timeline-track-cell__full-line {
 			forced-color-adjust: none;
 		}
 	}

package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-track-cell.styles.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FzC,CAAC"}
+{"version":3,"file":"timeline-track-cell.styles.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmJzC,CAAC"}

package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-track-cell.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,qBAAqB,GAAG,cAAc,CAmB1F"}
+{"version":3,"file":"timeline-track-cell.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,qBAAqB,GAAG,cAAc,CA+B1F"}

package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.js

@@ -1,19 +1,31 @@
 import { html, nothing } from 'lit';
 export function timelineTrackCellTemplate(component) {
-    if (component.step === 'none') {
+    if (component.status === 'none') {
         return html `
 			<div class="timeline-track-cell">
-				<div class="timeline-track-cell__line-full"></div>
+				<div class="timeline-track-cell__full-line"></div>
 			</div>
 		`;
     }
-    const showTopLine = component.child === 'between' || component.child === 'last';
-    const showBottomLine = component.child === 'between' || component.child === 'first';
+    const showTopLine = component.position === 'between' || component.position === 'last';
+    const showBottomLine = component.position === 'between' || component.position === 'first';
+    const marker = !component.showsContent
+        ? nothing
+        : component.icon
+            ? html `<nldd-icon class="timeline-track-cell__icon" name=${component.icon}></nldd-icon>`
+            : component.text
+                ? html `<span class="timeline-track-cell__text">${component.text}</span>`
+                : nothing;
+    // The attributes are the shorthand for the common cases; the slot is there for
+    // anything else.
+    const content = component.showsContent
+        ? html `${marker}<slot></slot>`
+        : marker;
     return html `
 		<div class="timeline-track-cell">
-			${showTopLine ? html `<div class="timeline-track-cell__line-top"></div>` : nothing}
-			<div class="timeline-track-cell__dot"></div>
-			${showBottomLine ? html `<div class="timeline-track-cell__line-bottom"></div>` : nothing}
+			${showTopLine ? html `<div class="timeline-track-cell__top-line"></div>` : nothing}
+			<div class="timeline-track-cell__marker">${content}</div>
+			${showBottomLine ? html `<div class="timeline-track-cell__bottom-line"></div>` : nothing}
 		</div>
 	`;
 }

package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-track-cell.template.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAGzD,MAAM,UAAU,yBAAyB,CAAC,SAAgC;IACzE,IAAI,SAAS,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC/B,OAAO,IAAI,CAAA;;;;GAIV,CAAC;IACH,CAAC;IAED,MAAM,WAAW,GAAG,SAAS,CAAC,KAAK,KAAK,SAAS,IAAI,SAAS,CAAC,KAAK,KAAK,MAAM,CAAC;IAChF,MAAM,cAAc,GAAG,SAAS,CAAC,KAAK,KAAK,SAAS,IAAI,SAAS,CAAC,KAAK,KAAK,OAAO,CAAC;IAEpF,OAAO,IAAI,CAAA;;KAEP,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,mDAAmD,CAAC,CAAC,CAAC,OAAO;;KAE/E,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA,sDAAsD,CAAC,CAAC,CAAC,OAAO;;EAExF,CAAC;AACH,CAAC"}
+{"version":3,"file":"timeline-track-cell.template.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAGzD,MAAM,UAAU,yBAAyB,CAAC,SAAgC;IACzE,IAAI,SAAS,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;QACjC,OAAO,IAAI,CAAA;;;;GAIV,CAAC;IACH,CAAC;IAED,MAAM,WAAW,GAAG,SAAS,CAAC,QAAQ,KAAK,SAAS,IAAI,SAAS,CAAC,QAAQ,KAAK,MAAM,CAAC;IACtF,MAAM,cAAc,GAAG,SAAS,CAAC,QAAQ,KAAK,SAAS,IAAI,SAAS,CAAC,QAAQ,KAAK,OAAO,CAAC;IAC1F,MAAM,MAAM,GAAG,CAAC,SAAS,CAAC,YAAY;QACrC,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,SAAS,CAAC,IAAI;YACf,CAAC,CAAC,IAAI,CAAA,qDAAqD,SAAS,CAAC,IAAI,eAAe;YACxF,CAAC,CAAC,SAAS,CAAC,IAAI;gBACf,CAAC,CAAC,IAAI,CAAA,2CAA2C,SAAS,CAAC,IAAI,SAAS;gBACxE,CAAC,CAAC,OAAO,CAAC;IACb,+EAA+E;IAC/E,iBAAiB;IACjB,MAAM,OAAO,GAAG,SAAS,CAAC,YAAY;QACrC,CAAC,CAAC,IAAI,CAAA,GAAG,MAAM,eAAe;QAC9B,CAAC,CAAC,MAAM,CAAC;IAEV,OAAO,IAAI,CAAA;;KAEP,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,mDAAmD,CAAC,CAAC,CAAC,OAAO;8CACtC,OAAO;KAChD,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA,sDAAsD,CAAC,CAAC,CAAC,OAAO;;EAExF,CAAC;AACH,CAAC"}

package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"title-cell.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/title-cell/title-cell.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,yBAwL3B,CAAC"}
+{"version":3,"file":"title-cell.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/title-cell/title-cell.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,yBAyL3B,CAAC"}

package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js

@@ -19,6 +19,7 @@ export const titleCellStyles = css `
 		--_title-font: var(--primitives-font-display-5-sm);
 
 		${inheritedTextReset}
+		padding-block: var(--context-cell-padding-block, 0px);
 		display: flex;
 		width: var(--_width);
 		min-width: var(--_min-width);

package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"title-cell.styles.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/title-cell/title-cell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAE/E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;IAkB9B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKrB,CAAC"}
+{"version":3,"file":"title-cell.styles.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/title-cell/title-cell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAE/E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;IAkB9B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKrB,CAAC"}

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

@@ -5,7 +5,7 @@ import '../../content/icon/icon.js';
 import '../../actions/icon-button/icon-button.js';
 export type ListVariant = 'simple' | 'box';
 export type ListBackground = 'tinted' | 'base';
-export type ListType = 'list' | 'navigation' | 'listbox';
+export type ListType = 'list' | 'navigation' | 'listbox' | 'tree';
 export interface NLDDReorderEventDetail {
     fromIndex: number;
     toIndex: number;
@@ -15,17 +15,22 @@ export interface NLDDReorderEventDetail {
  *
  * The `type` attribute switches the list's a11y role and behavior:
  * - `list` (default) — `role="list"`, items `role="listitem"`. Reorderable allowed.
- *                     Items may individually be buttons or links; the list itself
- *                     has no special keyboard semantics.
- * - `navigation`     — host `role="navigation"`, items with `selected` get
- *                     `aria-current="page"` on their inner `<a>` or `<button>`.
- * - `listbox`        — an accessible, filterable listbox (combobox pattern). The
- *                     list renders its OWN search input (`role="combobox"`) pinned
- *                     above the options; `.list__items` becomes `role="listbox"`
- *                     and items become `role="option"`. Focus stays in the input,
- *                     the active option moves via `aria-activedescendant`, and
- *                     filtering is consumer-managed via the `input` event (toggle
- *                     `[hidden]` on items). See "Listbox" below.
+ * - `tree` — `role="tree"`, items `role="treeitem"`. Branch rows put their child
+ *   rows in their own `slot="children"`, which the item renders as a
+ *   `role="group"`. Level, position and set size are NOT authored: the
+ *   nesting represents the hierarchy, so assistive technology derives
+ *   them. A branch row must carry `expanded`; the group is hidden while
+ *   it is false. Visual indentation is the consumer's — repeat a
+ *   spacer-cell per level. Comes with its own keyboard, see "Tree" below.
+ * - `navigation` — host `role="navigation"`, items with `selected` get
+ *   `aria-current="page"` on their inner `<a>` or `<button>`.
+ * - `listbox` — an accessible, filterable listbox (combobox pattern). The
+ *   list renders its OWN search input (`role="combobox"`) pinned
+ *   above the options; `.list__items` becomes `role="listbox"`
+ *   and items become `role="option"`. Focus stays in the input,
+ *   the active option moves via `aria-activedescendant`, and
+ *   filtering is consumer-managed via the `input` event (toggle
+ *   `[hidden]` on items). See "Listbox" below.
  *
  * Selection state is consumer-managed: the list never mutates `selected` itself.
  *
@@ -50,6 +55,37 @@ export interface NLDDReorderEventDetail {
  * first visible one. `reorderable` and `arrow-navigation` are ignored in listbox
  * mode (listbox has its own keyboard).
  *
+ * ### Tree
+ *
+ * A tree is a composite widget, so it brings its own keyboard — `arrow-navigation`
+ * is implied and needn't be set:
+ * - ArrowDown / ArrowUp — move between the rows in the order they appear on
+ *   screen, the rows of an open branch included.
+ * - Home / End — first / last row.
+ * - ArrowRight — opens a closed branch; on an open one it steps to its first child.
+ * - ArrowLeft — closes an open branch; on a leaf it steps out to the parent row.
+ * - Enter / Space — open and close, the same as Right and Left. Only while focus
+ *   sits on the row itself: a row that is its own control, and a segmented
+ *   action you tabbed into, handle both keys themselves.
+ *
+ * Opening and closing runs through the row's own disclosure control — the
+ * segmented action marked `disclosure`, or the row itself when it is a button.
+ * The list activates that control rather than writing `expanded`, so the state
+ * keeps being set in one place: the consumer's handler. A row that is a link is
+ * never activated this way, since that would navigate away.
+ *
+ * The tree is one tab stop. Focus lands on the row itself when the row has no
+ * control of its own, because that is where `treeitem` sits and it makes
+ * assistive technology announce the row rather than a button inside it. Tab then
+ * walks the controls of THAT row (a chevron beside a checkbox, say) and leaves
+ * the list after the last one.
+ *
+ * A deliberate deviation: strictly speaking a row with several controls is a
+ * `treegrid`, not a `tree`. We keep the tree semantics — level and set size are
+ * what matters here, not rows and columns — and borrow the "Tab within the row"
+ * behaviour from the grid pattern. Should a tree with real columns come up, that
+ * is when `treegrid` earns its own type.
+ *
  * ### Reorder
  *
  * On reorder (type="list" + reorderable), the list dispatches `nldd-reorder` with
@@ -60,23 +96,27 @@ export interface NLDDReorderEventDetail {
  * Vue, …) that update the DOM on a later tick will miss the focus restore and
  * should manage focus themselves after their render commits.
  *
- * @slot         - List items (`nldd-list-item`)
- * @slot toolbar - Controls below the search field (filters, sort, counts,
- *                 view toggles). Available for every type; collapses when empty.
- * @slot search-bar-end - Controls inline at the end of the search bar, beside the
- *                 search field (e.g. a filter or options button). Listbox only;
- *                 collapses when empty.
- * @slot empty   - Shown when no items are visible (all `[hidden]` or none). Defaults
- *                 to `nldd-inline-dialog` with `empty-text` / `empty-supporting-text`
- *                 (falling back to Dutch i18n "Geen items"). Slot content
- *                 overrides the default dialog entirely. In `type="listbox"` it is
- *                 suppressed while the search field is empty (no query yet), so the
- *                 consumer can show just the search field or its own hint outside
- *                 the list.
+ * @element nldd-list
+ *
+ * @attr {'simple'|'box'} variant - Visual style (default 'simple'): `simple` is a plain vertical strip with no chrome, `box` a framed card with rounded corners, fill and inset border ring
+ * @attr {'tinted'|'base'} background - Surface fill for `variant="box"` (default 'tinted'). Use `base` on an already-tinted parent. No effect with `variant="simple"`.
+ * @attr {'list'|'navigation'|'listbox'|'tree'} type - A11y role and behavior (default 'list'). See the docblock above.
+ * @attr {boolean} reorderable - Enables drag-to-reorder and pushes `reorderable` onto the items. Only valid with `type="list"`; wins over `arrow-navigation` when both are set.
+ * @attr {boolean} no-dividers - Hides the dividers between list items
+ * @attr {boolean} arrow-navigation - Roving-tabindex arrow-key navigation: ArrowUp/ArrowDown move focus between the rows, Home/End jump to first/last, and the list becomes a single tab stop. Implied by `type="tree"` (which adds ArrowLeft/ArrowRight, see above). Ignored when `reorderable` is active on a `type="list"`, and in listbox mode.
+ * @attr {string} height - Listbox only: caps the options' scroll region at this CSS length (e.g. '320px'). Unset means no cap.
+ * @attr {string} empty-text - Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled.
+ * @attr {string} empty-supporting-text - Supporting text for the default empty-state dialog. Ignored when `[slot=empty]` is filled.
+ * @attr {string} accessible-label - Accessible name, forwarded to the list in `type="list"` and to the search field in `type="listbox"`. For `type="navigation"` set `aria-label` / `aria-labelledby` on the element itself. Falls back to the i18n default.
+ * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
+ *
+ * @slot        - List items (`nldd-list-item`)
+ * @slot toolbar - Controls below the search field (filters, sort, counts, view toggles). Available for every type; collapses when empty.
+ * @slot search-bar-end - Controls inline at the end of the search bar, beside the search field (e.g. a filter or options button). Listbox only; collapses when empty.
+ * @slot empty - Shown when no items are visible (all `[hidden]` or none). Defaults to `nldd-inline-dialog` with `empty-text` / `empty-supporting-text` (falling back to Dutch i18n "Geen items"). Slot content overrides the default dialog entirely. In `type="listbox"` it is suppressed while the search field is empty (no query yet), so the consumer can show just the search field or its own hint outside the list.
  *
  * @fires nldd-reorder - Reorderable `type="list"`: `{ fromIndex, toIndex }` on drop
- * @fires input        - `type="listbox"`: search value changed; `{ value }`. Toggle
- *                       `[hidden]` on items to filter.
+ * @fires input - `type="listbox"`: search value changed; `{ value }`. Toggle `[hidden]` on items to filter.
  */
 export declare class NLDDList extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -179,6 +219,13 @@ export declare class NLDDList extends LitElement {
     /** Visible (non-`[hidden]`) items, in DOM order. The active-option model and
      *  listbox keyboard operate over this set. */
     private _getVisibleItems;
+    /** Every row in the tree, top-level rows and nested ones alike, so a stale
+     *  is-first / is-last never survives on a row deeper down. */
+    private _getAllRows;
+    /** Rows in the order they paint: an expanded branch's children sit between
+     *  the branch and the next top-level row, so the last row of the list is the
+     *  deepest last child, not the last item in the list's own slot. */
+    private _getPaintedRows;
     private _updateItems;
     private _contextScheduled;
     /** Push the list's variant + type onto every item, deferred to a microtask:
@@ -247,8 +294,10 @@ export declare class NLDDList extends LitElement {
      *  therefore keeps arrow-nav active (reorderable does nothing), and
      *  `_warnArrowNav` likewise only warns for the real reorderable-list conflict. */
     private get _arrowNavActive();
-    /** Interactive, visible items — the roving stops. Non-interactive items (no
-     *  link/button) and hidden items are skipped. */
+    /** Interactive, painted rows — the roving stops, in the order they appear on
+     *  screen. Non-interactive rows (no link/button) 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. */
     private _getInteractiveItems;
     private _rovingScheduled;
     /** Push roving state onto the items, deferred to a microtask: _updateItems can
@@ -263,6 +312,17 @@ export declare class NLDDList extends LitElement {
     private _setRovingActive;
     private _onFocusIn;
     private _onArrowNav;
+    /** Tree only: Right opens a closed branch and steps into an open one, Left
+     *  closes an open branch and steps out of a leaf. Opening and closing runs
+     *  through the row's own disclosure control, so `expanded` keeps being
+     *  written in one place — the consumer's handler. */
+    private _onTreeHorizontal;
+    /** 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. */
+    private _onTreeActivate;
+    private _moveRovingTo;
     private _warnArrowNav;
     private _onPointerDown;
     private _lastPointerY;

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

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list/list.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list/list.ts"],"names":[],"mappings":"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"}

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

@@ -1,14 +1,14 @@
 export declare const nlddListTranslations: {
-    'components.list.items-label-text': string;
-    'components.list.navigation-label-text': string;
+    'components.list.items-accessible-label': string;
+    'components.list.navigation-accessible-label': string;
     'components.list.empty-text': string;
     'components.list.arrow-navigation-description-text': string;
-    'components.list.search-placeholder-text': string;
+    'components.list.search-placeholder-label': string;
     'components.list.search-clear-action': string;
     'components.list.reorder-moved-text': string;
     'components.list.reorder-dropped-text': string;
     'components.list.reorder-no-change-text': string;
-    'components.list.reorder-cancelled-text': string;
+    'components.list.reorder-canceled-text': string;
 };
 export type NLDDListTranslations = typeof nlddListTranslations;
 //# sourceMappingURL=list.i18n.d.ts.map

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

@@ -1,13 +1,13 @@
 export const nlddListTranslations = {
-    'components.list.items-label-text': 'Lijst',
-    'components.list.navigation-label-text': 'Navigatie',
+    'components.list.items-accessible-label': 'Lijst',
+    'components.list.navigation-accessible-label': 'Navigatie',
     'components.list.empty-text': 'Geen items',
     'components.list.arrow-navigation-description-text': 'Gebruik de pijltjestoetsen om door de lijst te navigeren.',
-    'components.list.search-placeholder-text': 'Zoeken',
+    'components.list.search-placeholder-label': 'Zoeken',
     'components.list.search-clear-action': 'Wis zoekopdracht',
     'components.list.reorder-moved-text': 'Item verplaatst naar positie {position}.',
     'components.list.reorder-dropped-text': 'Item neergezet op positie {position}.',
     'components.list.reorder-no-change-text': 'Item neergezet. Positie ongewijzigd.',
-    'components.list.reorder-cancelled-text': 'Slepen geannuleerd.',
+    'components.list.reorder-canceled-text': 'Slepen geannuleerd.',
 };
 //# sourceMappingURL=list.i18n.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"list.i18n.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list/list.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;IACnC,kCAAkC,EAAE,OAAO;IAC3C,uCAAuC,EAAE,WAAW;IACpD,4BAA4B,EAAE,YAAY;IAC1C,mDAAmD,EAAE,2DAA2D;IAChH,yCAAyC,EAAE,QAAQ;IACnD,qCAAqC,EAAE,kBAAkB;IACzD,oCAAoC,EAAE,0CAA0C;IAChF,sCAAsC,EAAE,uCAAuC;IAC/E,wCAAwC,EAAE,sCAAsC;IAChF,wCAAwC,EAAE,qBAAqB;CAC/D,CAAC"}
+{"version":3,"file":"list.i18n.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list/list.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;IACnC,wCAAwC,EAAE,OAAO;IACjD,6CAA6C,EAAE,WAAW;IAC1D,4BAA4B,EAAE,YAAY;IAC1C,mDAAmD,EAAE,2DAA2D;IAChH,0CAA0C,EAAE,QAAQ;IACpD,qCAAqC,EAAE,kBAAkB;IACzD,oCAAoC,EAAE,0CAA0C;IAChF,sCAAsC,EAAE,uCAAuC;IAC/E,wCAAwC,EAAE,sCAAsC;IAChF,uCAAuC,EAAE,qBAAqB;CAC9D,CAAC"}