@nldd/design-system 0.8.95 → 0.8.97

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

@@ -9,19 +9,19 @@ export const descriptionCellStyles = css `
 	/* # Host */
 
 	:host {
-		--_width: auto;
-		--_min-width: 0;
-		--_max-width: none;
-		--_min-height: 0;
+		--_description-cell-width: auto;
+		--_description-cell-min-width: 0;
+		--_description-cell-max-width: none;
+		--_description-cell-min-height: 0;
 
 		${inheritedTextReset}
 		/* !important: shields the row padding from consumer universal resets, which beat normal :host declarations per CSS Scoping. */
 		padding-block: var(--context-cell-padding-block, 0px) !important;
 		display: flex;
-		width: var(--_width);
-		min-width: var(--_min-width);
-		max-width: var(--_max-width);
-		min-height: var(--_min-height);
+		width: var(--_description-cell-width);
+		min-width: var(--_description-cell-min-width);
+		max-width: var(--_description-cell-max-width);
+		min-height: var(--_description-cell-min-height);
 		flex-direction: column;
 		justify-content: center;
 	}
@@ -45,7 +45,7 @@ export const descriptionCellStyles = css `
 		/* min-content rather than 0 as the floor: the cell gives way as soon as
 		   the row is too narrow, but never past the width of its longest word,
 		   so the text stays readable instead of breaking mid-word. */
-		--_min-width: min-content;
+		--_description-cell-min-width: min-content;
 
 		width: fit-content;
 		flex-grow: 0;
@@ -61,7 +61,7 @@ export const descriptionCellStyles = css `
 	}
 
 	:host([max-width]) {
-		flex-basis: var(--_max-width);
+		flex-basis: var(--_description-cell-max-width);
 	}
 
 

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

@@ -8,9 +8,9 @@ export const dragHandleCellStyles = css `
 	/* # Host */
 
 	:host {
-		--_corner-radius: var(--semantics-controls-md-corner-radius);
-		--_width: var(--semantics-controls-sm-min-size);
-		--_height: var(--semantics-controls-md-min-size);
+		--_drag-handle-cell-corner-radius: var(--semantics-controls-md-corner-radius);
+		--_drag-handle-cell-width: var(--semantics-controls-sm-min-size);
+		--_drag-handle-cell-height: var(--semantics-controls-md-min-size);
 
 		display: inline-flex;
 		/* !important: shields the row padding from consumer universal resets, which beat normal :host declarations per CSS Scoping. */
@@ -30,9 +30,9 @@ export const dragHandleCellStyles = css `
 	}
 
 	:host([size="sm"]) {
-		--_corner-radius: var(--semantics-controls-sm-corner-radius);
-		--_width: var(--semantics-controls-xs-min-size);
-		--_height: var(--semantics-controls-sm-min-size);
+		--_drag-handle-cell-corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_drag-handle-cell-width: var(--semantics-controls-xs-min-size);
+		--_drag-handle-cell-height: var(--semantics-controls-sm-min-size);
 	}
 
 
@@ -42,11 +42,11 @@ export const dragHandleCellStyles = css `
 		display: flex;
 		margin: 0;
 		border: none;
-		border-radius: var(--_corner-radius);
+		border-radius: var(--_drag-handle-cell-corner-radius);
 		background-color: var(--semantics-grab-handles-background-color);
 		cursor: inherit;
-		width: var(--_width);
-		height: var(--_height);
+		width: var(--_drag-handle-cell-width);
+		height: var(--_drag-handle-cell-height);
 		padding: 0;
 		align-items: center;
 		justify-content: center;

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

@@ -8,16 +8,16 @@ export const iconCellStyles = css `
 	/* # Host */
 
 	:host {
-		--_size: var(--primitives-space-24);
-		--_content-color: var(--context-content-color, var(--semantics-content-color));
+		--_icon-cell-size: var(--primitives-space-24);
+		--_icon-cell-content-color: var(--context-content-color, var(--semantics-content-color));
 
 		display: flex;
 		/* !important: shields the row padding from consumer universal resets, which beat normal :host declarations per CSS Scoping. */
 		padding-block: var(--context-cell-padding-block, 0px) !important;
-		width: var(--_size);
+		width: var(--_icon-cell-size);
 		flex-direction: column;
 		align-items: center;
-		color: var(--_content-color);
+		color: var(--_icon-cell-content-color);
 	}
 
 	:host([hidden]) {
@@ -25,37 +25,37 @@ export const iconCellStyles = css `
 	}
 
 	:host([size="16"]) {
-		--_size: var(--primitives-space-16);
+		--_icon-cell-size: var(--primitives-space-16);
 	}
 
 	:host([size="20"]) {
-		--_size: var(--primitives-space-20);
+		--_icon-cell-size: var(--primitives-space-20);
 	}
 
 	:host([size="32"]) {
-		--_size: var(--primitives-space-32);
+		--_icon-cell-size: var(--primitives-space-32);
 	}
 
 	/* ## Color */
 
 	:host([color="secondary"]) {
-		--_content-color: var(--context-content-secondary-color, var(--semantics-content-secondary-color));
+		--_icon-cell-content-color: var(--context-content-secondary-color, var(--semantics-content-secondary-color));
 	}
 
 	:host([color="accent"]) {
-		--_content-color: var(--context-content-accent-color, var(--semantics-content-accent-color));
+		--_icon-cell-content-color: var(--context-content-accent-color, var(--semantics-content-accent-color));
 	}
 
 	:host([color="success"]) {
-		--_content-color: var(--context-content-success-color, var(--semantics-content-success-color));
+		--_icon-cell-content-color: var(--context-content-success-color, var(--semantics-content-success-color));
 	}
 
 	:host([color="warning"]) {
-		--_content-color: var(--context-content-warning-color, var(--semantics-content-warning-color));
+		--_icon-cell-content-color: var(--context-content-warning-color, var(--semantics-content-warning-color));
 	}
 
 	:host([color="critical"]) {
-		--_content-color: var(--context-content-critical-color, var(--semantics-content-critical-color));
+		--_icon-cell-content-color: var(--context-content-critical-color, var(--semantics-content-critical-color));
 	}
 
 
@@ -80,8 +80,8 @@ export const iconCellStyles = css `
 
 	/* # Elements */
 
-	/* No width/height here: a slotted nldd-icon defines its own --_size,
-	   which shadows this cell's --_size in ::slotted var() resolution
+	/* No width/height here: a slotted nldd-icon defines its own --_icon-cell-size,
+	   which shadows this cell's --_icon-cell-size in ::slotted var() resolution
 	   (custom props resolve against the slotted element). The icon sizes
 	   itself — width fills the cell, height auto keeps it square. */
 	::slotted(*) {

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

@@ -8,10 +8,10 @@ export const spacerCellStyles = css `
 	/* # Host */
 
 	:host {
-		--_width: var(--primitives-space-16);
+		--_spacer-cell-width: var(--primitives-space-16);
 
 		display: block;
-		width: var(--_width);
+		width: var(--_spacer-cell-width);
 		flex-grow: 0;
 		flex-shrink: 0;
 	}
@@ -23,26 +23,26 @@ export const spacerCellStyles = css `
 
 	/* # Size */
 
-	:host([size="2"])  { --_width: var(--primitives-space-2); }
-	:host([size="4"])  { --_width: var(--primitives-space-4); }
-	:host([size="6"])  { --_width: var(--primitives-space-6); }
-	:host([size="8"])  { --_width: var(--primitives-space-8); }
-	:host([size="10"]) { --_width: var(--primitives-space-10); }
-	:host([size="12"]) { --_width: var(--primitives-space-12); }
-	:host([size="20"]) { --_width: var(--primitives-space-20); }
-	:host([size="24"]) { --_width: var(--primitives-space-24); }
-	:host([size="28"]) { --_width: var(--primitives-space-28); }
-	:host([size="32"]) { --_width: var(--primitives-space-32); }
-	:host([size="40"]) { --_width: var(--primitives-space-40); }
-	:host([size="44"]) { --_width: var(--primitives-space-44); }
-	:host([size="48"]) { --_width: var(--primitives-space-48); }
-	:host([size="56"]) { --_width: var(--primitives-space-56); }
-	:host([size="64"]) { --_width: var(--primitives-space-64); }
-	:host([size="80"]) { --_width: var(--primitives-space-80); }
-	:host([size="96"]) { --_width: var(--primitives-space-96); }
+	:host([size="2"])  { --_spacer-cell-width: var(--primitives-space-2); }
+	:host([size="4"])  { --_spacer-cell-width: var(--primitives-space-4); }
+	:host([size="6"])  { --_spacer-cell-width: var(--primitives-space-6); }
+	:host([size="8"])  { --_spacer-cell-width: var(--primitives-space-8); }
+	:host([size="10"]) { --_spacer-cell-width: var(--primitives-space-10); }
+	:host([size="12"]) { --_spacer-cell-width: var(--primitives-space-12); }
+	:host([size="20"]) { --_spacer-cell-width: var(--primitives-space-20); }
+	:host([size="24"]) { --_spacer-cell-width: var(--primitives-space-24); }
+	:host([size="28"]) { --_spacer-cell-width: var(--primitives-space-28); }
+	:host([size="32"]) { --_spacer-cell-width: var(--primitives-space-32); }
+	:host([size="40"]) { --_spacer-cell-width: var(--primitives-space-40); }
+	:host([size="44"]) { --_spacer-cell-width: var(--primitives-space-44); }
+	:host([size="48"]) { --_spacer-cell-width: var(--primitives-space-48); }
+	:host([size="56"]) { --_spacer-cell-width: var(--primitives-space-56); }
+	:host([size="64"]) { --_spacer-cell-width: var(--primitives-space-64); }
+	:host([size="80"]) { --_spacer-cell-width: var(--primitives-space-80); }
+	:host([size="96"]) { --_spacer-cell-width: var(--primitives-space-96); }
 
 	:host([size="flexible"]) {
-		--_width: auto;
+		--_spacer-cell-width: auto;
 		flex-grow: 1;
 		flex-shrink: 1;
 		flex-basis: 0;

package/dist/components/lists-and-tables/cells/{timeline-track-cell/timeline-track-cell.d.ts → step-cell/step-cell.d.ts}

@@ -1,22 +1,23 @@
 /**
- * Nederlandse Digitale Dienst Timeline Track Cell Component (Lit + TypeScript)
+ * Nederlandse Digitale Dienst Step Cell Component (Lit + TypeScript)
  *
- * A cell component for displaying timeline track indicators in lists.
- * Shows a vertical line with a dot indicating timeline position and state.
- * 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.
+ * A cell that draws steps under each other in an `nldd-list`: a vertical track
+ * with a dot per row, colored by how far along each step is. It is the vertical
+ * counterpart of `nldd-step-bar`, with the same `status` values. Other systems
+ * call this a stepper, a progress list or a timeline. 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.
  *
- * By default the cell is a bare track: a line with a dot per row, for a timeline
- * of events. With `size="md"` the dot grows big enough for a number or an
- * icon and you have a list of steps under each other, the vertical counterpart
- * of `nldd-step-indicator`. The size belongs to the lane rather than to the
+ * By default the dot is small and empty, for steps without a number, such as
+ * the moments in the history of a case. With `size="md"` it grows big enough
+ * for a number or an icon. The size belongs to the lane rather than to the
  * content: every dot in a list is the same size, or the track would jump.
  *
- * @element nldd-timeline-track-cell
+ * @element nldd-step-cell
  * @attr {'major' | 'minor' | 'none'} level - What stands in the lane: a whole dot (`major`, the default), a smaller one for a row that belongs under the one above it (`minor`), or nothing at all (`none`) for a row that carries what a step holds rather than being a step. A `none` row keeps its `size` and its `status`, so it stays in the same lane and the track runs on in the right color
- * @attr {'past' | 'current' | 'future'} status - How far along this row is (default 'past'); the same values as `nldd-step-indicator-item`. It colors the dot and the track around it: covered above where you are, still ahead below
- * @attr {'sm' | 'md'} size - How wide the lane is and so how big the dot: `sm` (default, 16px) for a timeline of events, `md` (24px) where a number or an icon has to fit. Every row in one list takes the same size, or the track jumps
+ * @attr {'past' | 'current' | 'future'} status - How far along this row is (default 'past'); the same values as `nldd-step-bar-item`. It colors the dot and the track around it: covered above where you are, still ahead below
+ * @attr {'sm' | 'md'} size - How wide the lane is and so how big the dot: `sm` (default, 16px) for steps without a number, `md` (24px) where a number or an icon has to fit. Every row in one list takes the same size, or the track jumps
  * @attr {'down' | 'up'} direction - The direction the timeline moves forward in: `down` (default) puts the past above, `up` below. Only the current step has half a track, so this only has an effect there
  * @attr {'first' | 'between' | 'last' | 'only'} position - Place of the row in the list as it stands on screen (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `first` is the top row and only has a line below, `last` the bottom row and only has a line above, also with `direction="up"`: position is about where the row stands, `direction` about which way time runs. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `level="none"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it
  * @attr {'auto' | 'top' | 'bottom' | 'both' | 'none'} line - Which halves of the track you have covered, when `status` and `direction` get it wrong (default 'auto', which is what those two say). The halves you name are drawn as covered and the other one as still ahead, so `none` covers neither. Which halves are drawn at all stays with `position`, except that naming a half draws it: `line="both"` on a `first` row draws one above too. A row that opens a group of its own is the case for `both`, since the going carries on below it. A `level="none"` row has one line rather than two halves, and no point where a fill could change over, so there the status colors the whole of it and `line` overrules the whole of it. On a `current` row that leans the way the timeline runs: what belongs to a point usually comes after it, so going `down` the stretch reads as still ahead and going `up` as behind you
@@ -33,11 +34,11 @@ type Level = 'major' | 'minor' | 'none';
 type Direction = 'down' | 'up';
 type Position = 'first' | 'between' | 'last' | 'only';
 type Line = 'auto' | 'top' | 'bottom' | 'both' | 'none';
-declare const NLDDTimelineTrackCell_base: typeof LitElement & (new (...args: any[]) => LitElement & {
+declare const NLDDStepCell_base: typeof LitElement & (new (...args: any[]) => LitElement & {
     hideBelow?: string;
     hideAbove?: string;
 });
-export declare class NLDDTimelineTrackCell extends NLDDTimelineTrackCell_base {
+export declare class NLDDStepCell extends NLDDStepCell_base {
     static styles: import("lit").CSSResult;
     /**
      * What stands in the lane: a whole dot, a smaller one, or nothing.
@@ -89,8 +90,8 @@ export declare class NLDDTimelineTrackCell extends NLDDTimelineTrackCell_base {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'nldd-timeline-track-cell': NLDDTimelineTrackCell;
+        'nldd-step-cell': NLDDStepCell;
     }
 }
 export {};
-//# sourceMappingURL=timeline-track-cell.d.ts.map
+//# sourceMappingURL=step-cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/step-cell/step-cell.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMtD,OAAO,+BAA+B,CAAC;AAEvC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC5C,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACxB,KAAK,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AACxC,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,CAAC;AAC/B,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AACtD,KAAK,IAAI,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;;;;;AAExD,qBACa,YAAa,SAAQ,iBAA8C;IAC/E,OAAgB,MAAM,0BAAkB;IAExC;;;;;;;;;OASG;IAEH,KAAK,EAAE,KAAK,CAAW;IAGvB,MAAM,EAAE,MAAM,CAAU;IAExB;2DACuD;IAEvD,IAAI,EAAE,IAAI,CAAQ;IAElB;;;;4BAIwB;IAExB,SAAS,EAAE,SAAS,CAAU;IAG9B,QAAQ,EAAE,QAAQ,CAAa;IAE/B;;;;;;;;;;;;;;;OAeG;IAEH,IAAI,EAAE,IAAI,CAAU;IAGpB,IAAI,SAAM;IAGV,IAAI,SAAM;IAEV;kEAC8D;IAC9D,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,OAAO,CAAC,cAAc,CAAS;IAEtB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAatC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD"}

package/dist/components/lists-and-tables/cells/{timeline-track-cell/timeline-track-cell.js → step-cell/step-cell.js}

@@ -5,24 +5,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Nederlandse Digitale Dienst Timeline Track Cell Component (Lit + TypeScript)
+ * Nederlandse Digitale Dienst Step Cell Component (Lit + TypeScript)
  *
- * A cell component for displaying timeline track indicators in lists.
- * Shows a vertical line with a dot indicating timeline position and state.
- * 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.
+ * A cell that draws steps under each other in an `nldd-list`: a vertical track
+ * with a dot per row, colored by how far along each step is. It is the vertical
+ * counterpart of `nldd-step-bar`, with the same `status` values. Other systems
+ * call this a stepper, a progress list or a timeline. 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.
  *
- * By default the cell is a bare track: a line with a dot per row, for a timeline
- * of events. With `size="md"` the dot grows big enough for a number or an
- * icon and you have a list of steps under each other, the vertical counterpart
- * of `nldd-step-indicator`. The size belongs to the lane rather than to the
+ * By default the dot is small and empty, for steps without a number, such as
+ * the moments in the history of a case. With `size="md"` it grows big enough
+ * for a number or an icon. The size belongs to the lane rather than to the
  * content: every dot in a list is the same size, or the track would jump.
  *
- * @element nldd-timeline-track-cell
+ * @element nldd-step-cell
  * @attr {'major' | 'minor' | 'none'} level - What stands in the lane: a whole dot (`major`, the default), a smaller one for a row that belongs under the one above it (`minor`), or nothing at all (`none`) for a row that carries what a step holds rather than being a step. A `none` row keeps its `size` and its `status`, so it stays in the same lane and the track runs on in the right color
- * @attr {'past' | 'current' | 'future'} status - How far along this row is (default 'past'); the same values as `nldd-step-indicator-item`. It colors the dot and the track around it: covered above where you are, still ahead below
- * @attr {'sm' | 'md'} size - How wide the lane is and so how big the dot: `sm` (default, 16px) for a timeline of events, `md` (24px) where a number or an icon has to fit. Every row in one list takes the same size, or the track jumps
+ * @attr {'past' | 'current' | 'future'} status - How far along this row is (default 'past'); the same values as `nldd-step-bar-item`. It colors the dot and the track around it: covered above where you are, still ahead below
+ * @attr {'sm' | 'md'} size - How wide the lane is and so how big the dot: `sm` (default, 16px) for steps without a number, `md` (24px) where a number or an icon has to fit. Every row in one list takes the same size, or the track jumps
  * @attr {'down' | 'up'} direction - The direction the timeline moves forward in: `down` (default) puts the past above, `up` below. Only the current step has half a track, so this only has an effect there
  * @attr {'first' | 'between' | 'last' | 'only'} position - Place of the row in the list as it stands on screen (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `first` is the top row and only has a line below, `last` the bottom row and only has a line above, also with `direction="up"`: position is about where the row stands, `direction` about which way time runs. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `level="none"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it
  * @attr {'auto' | 'top' | 'bottom' | 'both' | 'none'} line - Which halves of the track you have covered, when `status` and `direction` get it wrong (default 'auto', which is what those two say). The halves you name are drawn as covered and the other one as still ahead, so `none` covers neither. Which halves are drawn at all stays with `position`, except that naming a half draws it: `line="both"` on a `first` row draws one above too. A row that opens a group of its own is the case for `both`, since the going carries on below it. A `level="none"` row has one line rather than two halves, and no point where a fill could change over, so there the status colors the whole of it and `line` overrules the whole of it. On a `current` row that leans the way the timeline runs: what belongs to a point usually comes after it, so going `down` the stretch reads as still ahead and going `up` as behind you
@@ -35,10 +36,10 @@ import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { reflectNonDefault } from '../../../../utilities/reflect-non-default.js';
 import { VisibilityMixin } from '../../../../utilities/visibility-mixin.js';
-import { timelineTrackCellStyles } from './timeline-track-cell.styles.js';
-import { timelineTrackCellTemplate } from './timeline-track-cell.template.js';
+import { stepCellStyles } from './step-cell.styles.js';
+import { stepCellTemplate } from './step-cell.template.js';
 import '../../../content/icon/icon.js';
-let NLDDTimelineTrackCell = class NLDDTimelineTrackCell extends VisibilityMixin(LitElement, 'cells-container') {
+let NLDDStepCell = class NLDDStepCell extends VisibilityMixin(LitElement, 'cells-container') {
     constructor() {
         super(...arguments);
         /**
@@ -96,43 +97,43 @@ let NLDDTimelineTrackCell = class NLDDTimelineTrackCell extends VisibilityMixin(
         const ignored = !this.showsContent && Boolean(this.text || this.icon);
         if (ignored && !this._warnedContent) {
             this._warnedContent = true;
-            console.warn('<nldd-timeline-track-cell>: `text` and `icon` only fit in a full dot on a wide track (`size="md"` with `level="major"`); they are not shown here.');
+            console.warn('<nldd-step-cell>: `text` and `icon` only fit in a full dot on a wide track (`size="md"` with `level="major"`); they are not shown here.');
         }
         else if (!ignored) {
             this._warnedContent = false;
         }
     }
     render() {
-        return timelineTrackCellTemplate(this);
+        return stepCellTemplate(this);
     }
 };
-NLDDTimelineTrackCell.styles = timelineTrackCellStyles;
+NLDDStepCell.styles = stepCellStyles;
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('major') })
-], NLDDTimelineTrackCell.prototype, "level", void 0);
+], NLDDStepCell.prototype, "level", void 0);
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('past') })
-], NLDDTimelineTrackCell.prototype, "status", void 0);
+], NLDDStepCell.prototype, "status", void 0);
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('sm') })
-], NLDDTimelineTrackCell.prototype, "size", void 0);
+], NLDDStepCell.prototype, "size", void 0);
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('down') })
-], NLDDTimelineTrackCell.prototype, "direction", void 0);
+], NLDDStepCell.prototype, "direction", void 0);
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('between') })
-], NLDDTimelineTrackCell.prototype, "position", void 0);
+], NLDDStepCell.prototype, "position", void 0);
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('auto') })
-], NLDDTimelineTrackCell.prototype, "line", void 0);
+], NLDDStepCell.prototype, "line", void 0);
 __decorate([
     property({ type: String })
-], NLDDTimelineTrackCell.prototype, "text", void 0);
+], NLDDStepCell.prototype, "text", void 0);
 __decorate([
     property({ type: String })
-], NLDDTimelineTrackCell.prototype, "icon", void 0);
-NLDDTimelineTrackCell = __decorate([
-    customElement('nldd-timeline-track-cell')
-], NLDDTimelineTrackCell);
-export { NLDDTimelineTrackCell };
-//# sourceMappingURL=timeline-track-cell.js.map
+], NLDDStepCell.prototype, "icon", void 0);
+NLDDStepCell = __decorate([
+    customElement('nldd-step-cell')
+], NLDDStepCell);
+export { NLDDStepCell };
+//# sourceMappingURL=step-cell.js.map

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

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

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

@@ -0,0 +1,2 @@
+export declare const stepCellStyles: import("lit").CSSResult;
+//# sourceMappingURL=step-cell.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-cell.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/step-cell/step-cell.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAqL1B,CAAC"}

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

@@ -0,0 +1,184 @@
+import { css } from 'lit';
+export const stepCellStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+	:host {
+		--_step-cell-lane-size: var(--primitives-space-16);
+		--_step-cell-marker-size: var(--primitives-space-16);
+		--_step-cell-marker-corner-radius: var(--primitives-corner-radius-full);
+
+		--_step-cell-line-width: var(--primitives-space-2);
+		--_step-cell-track-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
+		--_step-cell-future-fill-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
+		--_step-cell-marker-z-index: 1;
+		--_step-cell-ring-thickness: var(--semantics-surfaces-ring-thickness);
+		--_step-cell-ring-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
+		--_step-cell-marker-content-color: var(--semantics-content-contrast-color);
+		--_step-cell-future-content-color: var(--semantics-content-secondary-color);
+		--_step-cell-current-fill-color: light-dark(var(--primitives-color-accent-75), var(--primitives-color-accent-100));
+		--_step-cell-icon-size: calc(var(--_step-cell-marker-size) * 2 / 3);
+
+		isolation: isolate;
+		display: flex;
+		/* !important: shields the row padding from consumer universal resets, which beat normal :host declarations per CSS Scoping. */
+		padding-block: var(--context-cell-padding-block, 0px) !important;
+		width: var(--_step-cell-lane-size);
+		flex-direction: column;
+		align-self: stretch;
+		align-items: center;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([size="md"]) {
+		--_step-cell-lane-size: var(--primitives-space-24);
+		--_step-cell-marker-size: var(--primitives-space-24);
+	}
+
+	:host([level="minor"]) {
+		--_step-cell-marker-size: var(--primitives-space-10);
+	}
+
+	:host([size="md"][level="minor"]) {
+		--_step-cell-marker-size: var(--primitives-space-12);
+	}
+
+	/* Bleeds back over the host's block padding, so consecutive rows connect. */
+	.step-cell {
+		position: relative;
+		width: var(--_step-cell-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);
+	}
+
+	/* The ring, but only left and right. A spread would put the same band above
+	   and below the line, and there it would cut the track at every row
+	   boundary: the lines that run on downward deliberately reach past the cell
+	   to bridge the divider. Two offset copies do the sides and nothing else. A
+	   copy shifted sideways has the same top and bottom as the line itself, so
+	   it can only show along the edge it is pushed out from. */
+	.step-cell__full-line,
+	.step-cell__top-line,
+	.step-cell__bottom-line {
+		position: absolute;
+		left: 50%;
+		margin-left: calc(var(--_step-cell-line-width) / -2);
+		box-shadow:
+			calc(-1 * var(--_step-cell-ring-thickness)) 0 0 0 var(--_step-cell-ring-color),
+			var(--_step-cell-ring-thickness) 0 0 0 var(--_step-cell-ring-color);
+		background-color: var(--_step-cell-track-color);
+		width: var(--_step-cell-line-width);
+	}
+
+	/* The lines that run on downward also bridge the row boundary: an
+	   nldd-list-item reserves a divider's worth of space below itself, and
+	   without this the track breaks at every row. The top line needs nothing —
+	   the row above already covers the band. */
+	.step-cell__full-line {
+		top: 0;
+		bottom: calc(-1 * var(--semantics-dividers-thickness));
+	}
+
+	.step-cell__top-line {
+		bottom: 50%;
+		height: 50%;
+	}
+
+	.step-cell__bottom-line {
+		top: 50%;
+		bottom: calc(-1 * var(--semantics-dividers-thickness));
+	}
+
+	:host([status="future"]:not([line])) .step-cell__top-line,
+	:host([status="future"]:not([line])) .step-cell__bottom-line {
+		background-color: var(--_step-cell-future-fill-color);
+	}
+
+	:host([status="current"]:not([line])) .step-cell__bottom-line {
+		background-color: var(--_step-cell-future-fill-color);
+	}
+
+	:host([status="current"][direction="up"]:not([line])) .step-cell__bottom-line {
+		background-color: var(--_step-cell-track-color);
+	}
+
+	:host([status="current"][direction="up"]:not([line])) .step-cell__top-line {
+		background-color: var(--_step-cell-future-fill-color);
+	}
+
+	:host([line="top"]) .step-cell__top-line,
+	:host([line="bottom"]) .step-cell__bottom-line,
+	:host([line="both"]) .step-cell__top-line,
+	:host([line="both"]) .step-cell__bottom-line {
+		background-color: var(--_step-cell-track-color);
+	}
+
+	:host([level="none"][status="future"]) .step-cell__full-line,
+	:host([level="none"][status="current"]:not([direction="up"])) .step-cell__full-line,
+	:host([level="none"][line="none"]) .step-cell__full-line {
+		background-color: var(--_step-cell-future-fill-color);
+	}
+
+	:host([line="top"]) .step-cell__bottom-line,
+	:host([line="bottom"]) .step-cell__top-line,
+	:host([line="none"]) .step-cell__top-line,
+	:host([line="none"]) .step-cell__bottom-line {
+		background-color: var(--_step-cell-future-fill-color);
+	}
+
+	.step-cell__marker {
+		box-sizing: border-box;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		z-index: var(--_step-cell-marker-z-index);
+		display: flex;
+		width: var(--_step-cell-marker-size);
+		height: var(--_step-cell-marker-size);
+		margin-top: calc(var(--_step-cell-marker-size) / -2);
+		margin-left: calc(var(--_step-cell-marker-size) / -2);
+		align-items: center;
+		justify-content: center;
+		border: var(--_step-cell-line-width) solid var(--_step-cell-track-color);
+		border-radius: var(--_step-cell-marker-corner-radius);
+		box-shadow: 0 0 0 var(--_step-cell-ring-thickness) var(--_step-cell-ring-color);
+		color: var(--_step-cell-marker-content-color);
+		font: var(--primitives-font-body-sm-medium-flat);
+	}
+
+	:host([status="past"]) .step-cell__marker,
+	:host(:not([status])) .step-cell__marker {
+		background-color: var(--_step-cell-track-color);
+	}
+
+	:host([status="current"]) .step-cell__marker {
+		background-color: var(--_step-cell-current-fill-color);
+		color: var(--_step-cell-track-color);
+	}
+
+	:host([status="future"]) .step-cell__marker {
+		border-color: var(--_step-cell-future-fill-color);
+		background-color: var(--_step-cell-future-fill-color);
+		color: var(--_step-cell-future-content-color);
+	}
+
+	.step-cell__icon {
+		width: var(--_step-cell-icon-size);
+		height: var(--_step-cell-icon-size);
+	}
+
+	@media (forced-colors: active) {
+		.step-cell__marker,
+		.step-cell__top-line,
+		.step-cell__bottom-line,
+		.step-cell__full-line {
+			forced-color-adjust: none;
+		}
+	}
+`;
+//# sourceMappingURL=step-cell.styles.js.map

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

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

package/dist/components/lists-and-tables/cells/step-cell/step-cell.template.d.ts

@@ -0,0 +1,4 @@
+import { type TemplateResult } from 'lit';
+import type { NLDDStepCell } from './step-cell.js';
+export declare function stepCellTemplate(component: NLDDStepCell): TemplateResult;
+//# sourceMappingURL=step-cell.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-cell.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-tables/cells/step-cell/step-cell.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,YAAY,GAAG,cAAc,CAuCxE"}