@nldd/design-system 0.8.37

package/dist/components/lists-and-menus/cells/text-cell/text-cell.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Nederlandse Digitale Dienst Text Cell Component (Lit + TypeScript)
+ *
+ * A cell component for displaying text content in lists with configurable
+ * alignment, size and color. This is the most fundamental list cell component.
+ *
+ * ### Vertical alignment
+ * `vertical-alignment="center"` (default) stretches the cell to fill the full
+ * row height and centers its content within that space. Use `min-height` to set
+ * a minimum centered region. For strict top alignment without a minimum height,
+ * use `vertical-alignment="top"`.
+ *
+ * @element nldd-text-cell
+ * @attr {string} size - Cell size: 'sm' | 'md' (default: 'md')
+ * @attr {string} color - Text color variant: 'default' | 'secondary' | 'inherit' (default: 'default')
+ * @attr {string} width - 'stretch' | 'fit-content' | CSS length (e.g. '200px', '20rem'). Default: 'stretch'
+ * @attr {string} min-width - Minimum width as CSS length (e.g. '80px', '5rem')
+ * @attr {string} max-width - Maximum width as CSS length (e.g. '200px', '20rem')
+ * @attr {string} min-height - Minimum height as CSS length (e.g. '44px', '3rem')
+ * @attr {string} horizontal-alignment - Horizontal alignment: 'left' | 'right' (default: 'left')
+ * @attr {string} vertical-alignment - Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center')
+ *
+ * @attr {string} text - Main text content. Supports **bold** syntax for inline bold segments.
+ * @attr {string} overline - Optional overline text displayed above the main content. Supports **bold**.
+ * @attr {string} supporting-text - Optional supporting text displayed below the main content. Supports **bold**.
+ *
+ * ### Query mark
+ * Set `query` to a substring to bold-highlight the match across text, overline
+ * and supporting-text. `query-mark-mode` selects the strategy:
+ * - `'predictive'` (default): bolds the non-matched remainder — the ARIA APG
+ *   pattern for combobox predictive completion.
+ * - `'match'`: bolds the matched query — useful for search-result highlighting
+ *   in longer text.
+ *
+ * When `query` is set, `**bold**` markdown in the same field is ignored.
+ *
+ * @attr {string} query - Query substring to bold-highlight across text fields. Empty = no marking.
+ * @attr {string} query-mark-mode - 'match' | 'predictive' (default: 'predictive')
+ */
+import { LitElement } from 'lit';
+import type { QueryMarkMode } from '../../../../utilities/render-marked.js';
+type Size = 'sm' | 'md';
+type Color = 'default' | 'secondary' | 'inherit';
+type HorizontalAlignment = 'left' | 'right';
+type VerticalAlignment = 'top' | 'center' | 'bottom';
+declare const NLDDTextCell_base: typeof LitElement & (new (...args: any[]) => LitElement & {
+    hideBelow?: string;
+    hideAbove?: string;
+});
+export declare class NLDDTextCell extends NLDDTextCell_base {
+    static styles: import("lit").CSSResult[];
+    size: Size;
+    color: Color;
+    /** 'stretch' | 'fit-content' | CSS length (e.g. '200px', '20rem'). */
+    width: string;
+    minWidth?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    horizontalAlignment: HorizontalAlignment;
+    verticalAlignment: VerticalAlignment;
+    text: string;
+    overline: string;
+    supportingText: string;
+    query: string;
+    queryMarkMode: QueryMarkMode;
+    updated(changed: Map<string, unknown>): void;
+    private _applyDimensionStyles;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-text-cell': NLDDTextCell;
+    }
+}
+export {};
+//# sourceMappingURL=text-cell.d.ts.map

package/dist/components/lists-and-menus/cells/text-cell/text-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/text-cell/text-cell.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAE5E,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACxB,KAAK,KAAK,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AACjD,KAAK,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,KAAK,iBAAiB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;;;;;AAErD,qBACa,YAAa,SAAQ,iBAA2B;IAC5D,OAAgB,MAAM,4BAAoB;IAG1C,IAAI,EAAE,IAAI,CAAQ;IAGlB,KAAK,EAAE,KAAK,CAAa;IAEzB,sEAAsE;IAEtE,KAAK,EAAE,MAAM,CAAa;IAG1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,mBAAmB,EAAE,mBAAmB,CAAU;IAGlD,iBAAiB,EAAE,iBAAiB,CAAY;IAGhD,IAAI,SAAM;IAGV,QAAQ,SAAM;IAGd,cAAc,SAAM;IAGpB,KAAK,SAAM;IAGX,aAAa,EAAE,aAAa,CAAgB;IAEnC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAO,CAAC,qBAAqB;IA0BpB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD"}

package/dist/components/lists-and-menus/cells/text-cell/text-cell.js

@@ -0,0 +1,149 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Nederlandse Digitale Dienst Text Cell Component (Lit + TypeScript)
+ *
+ * A cell component for displaying text content in lists with configurable
+ * alignment, size and color. This is the most fundamental list cell component.
+ *
+ * ### Vertical alignment
+ * `vertical-alignment="center"` (default) stretches the cell to fill the full
+ * row height and centers its content within that space. Use `min-height` to set
+ * a minimum centered region. For strict top alignment without a minimum height,
+ * use `vertical-alignment="top"`.
+ *
+ * @element nldd-text-cell
+ * @attr {string} size - Cell size: 'sm' | 'md' (default: 'md')
+ * @attr {string} color - Text color variant: 'default' | 'secondary' | 'inherit' (default: 'default')
+ * @attr {string} width - 'stretch' | 'fit-content' | CSS length (e.g. '200px', '20rem'). Default: 'stretch'
+ * @attr {string} min-width - Minimum width as CSS length (e.g. '80px', '5rem')
+ * @attr {string} max-width - Maximum width as CSS length (e.g. '200px', '20rem')
+ * @attr {string} min-height - Minimum height as CSS length (e.g. '44px', '3rem')
+ * @attr {string} horizontal-alignment - Horizontal alignment: 'left' | 'right' (default: 'left')
+ * @attr {string} vertical-alignment - Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center')
+ *
+ * @attr {string} text - Main text content. Supports **bold** syntax for inline bold segments.
+ * @attr {string} overline - Optional overline text displayed above the main content. Supports **bold**.
+ * @attr {string} supporting-text - Optional supporting text displayed below the main content. Supports **bold**.
+ *
+ * ### Query mark
+ * Set `query` to a substring to bold-highlight the match across text, overline
+ * and supporting-text. `query-mark-mode` selects the strategy:
+ * - `'predictive'` (default): bolds the non-matched remainder — the ARIA APG
+ *   pattern for combobox predictive completion.
+ * - `'match'`: bolds the matched query — useful for search-result highlighting
+ *   in longer text.
+ *
+ * When `query` is set, `**bold**` markdown in the same field is ignored.
+ *
+ * @attr {string} query - Query substring to bold-highlight across text fields. Empty = no marking.
+ * @attr {string} query-mark-mode - 'match' | 'predictive' (default: 'predictive')
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { textCellStyles } from './text-cell.styles.js';
+import { template } from './text-cell.template.js';
+import { VisibilityMixin } from '../../../../utilities/visibility-mixin.js';
+let NLDDTextCell = class NLDDTextCell extends VisibilityMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.size = 'md';
+        this.color = 'default';
+        /** 'stretch' | 'fit-content' | CSS length (e.g. '200px', '20rem'). */
+        this.width = 'stretch';
+        this.horizontalAlignment = 'left';
+        this.verticalAlignment = 'center';
+        this.text = '';
+        this.overline = '';
+        this.supportingText = '';
+        this.query = '';
+        this.queryMarkMode = 'predictive';
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('width') || changed.has('minWidth') || changed.has('maxWidth') || changed.has('minHeight')) {
+            this._applyDimensionStyles();
+        }
+    }
+    _applyDimensionStyles() {
+        // width's 'stretch' and 'fit-content' are handled via [width] attribute
+        // selectors in CSS; any other value is a CSS length fed through --_width.
+        const widthIsKeyword = this.width === 'stretch' || this.width === 'fit-content';
+        if (this.width && !widthIsKeyword) {
+            this.style.setProperty('--_width', this.width);
+        }
+        else {
+            this.style.removeProperty('--_width');
+        }
+        if (this.minWidth) {
+            this.style.setProperty('--_min-width', this.minWidth);
+        }
+        else {
+            this.style.removeProperty('--_min-width');
+        }
+        if (this.maxWidth) {
+            this.style.setProperty('--_max-width', this.maxWidth);
+        }
+        else {
+            this.style.removeProperty('--_max-width');
+        }
+        if (this.minHeight) {
+            this.style.setProperty('--_min-height', this.minHeight);
+        }
+        else {
+            this.style.removeProperty('--_min-height');
+        }
+    }
+    render() {
+        return template.call(this);
+    }
+};
+NLDDTextCell.styles = [textCellStyles];
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTextCell.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTextCell.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTextCell.prototype, "width", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'min-width' })
+], NLDDTextCell.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'max-width' })
+], NLDDTextCell.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'min-height' })
+], NLDDTextCell.prototype, "minHeight", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'horizontal-alignment' })
+], NLDDTextCell.prototype, "horizontalAlignment", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'vertical-alignment' })
+], NLDDTextCell.prototype, "verticalAlignment", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTextCell.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTextCell.prototype, "overline", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], NLDDTextCell.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTextCell.prototype, "query", void 0);
+__decorate([
+    property({ type: String, attribute: 'query-mark-mode' })
+], NLDDTextCell.prototype, "queryMarkMode", void 0);
+NLDDTextCell = __decorate([
+    customElement('nldd-text-cell')
+], NLDDTextCell);
+export { NLDDTextCell };
+//# sourceMappingURL=text-cell.js.map

package/dist/components/lists-and-menus/cells/text-cell/text-cell.js.map

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

package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.d.ts

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

package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.d.ts.map

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

package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.js

@@ -0,0 +1,180 @@
+import { css } from 'lit';
+export const textCellStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		--_width: auto;
+		--_min-width: 0;
+		--_max-width: none;
+		--_min-height: 0;
+		width: var(--_width);
+		min-width: var(--_min-width);
+		max-width: var(--_max-width);
+		min-height: var(--_min-height);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Width */
+
+	:host([width='stretch']),
+	:host(:not([width])) {
+		flex-grow: 1;
+		min-width: 0;
+	}
+
+	:host([width='fit-content']) {
+		flex-grow: 0;
+		flex-shrink: 0;
+		flex-basis: auto;
+		width: fit-content;
+	}
+
+	:host([width]:not([width='stretch']):not([width='fit-content'])) {
+		flex-shrink: 0;
+	}
+
+
+	/* # Vertical alignment
+	 *
+	 * 'center' (default): the cell stretches to fill the full row height, then
+	 * centers its content within that space. When min-height is set, the cell is
+	 * at least that tall and the content sits centered inside it. For strict top
+	 * alignment without a minimum height, use vertical-alignment="top".
+	 */
+
+	:host([vertical-alignment='center']),
+	:host(:not([vertical-alignment])) {
+		align-self: stretch;
+	}
+
+	:host([vertical-alignment='top']) {
+		align-self: flex-start;
+	}
+
+	:host([vertical-alignment='bottom']) {
+		align-self: flex-end;
+	}
+
+
+	/* # Horizontal alignment */
+
+	:host([horizontal-alignment='left']),
+	:host(:not([horizontal-alignment])) {
+		align-items: flex-start;
+	}
+
+	:host([horizontal-alignment='right']) {
+		align-items: flex-end;
+	}
+
+
+	/* # Overline */
+
+	.text-cell__overline {
+		margin: 0;
+		align-self: stretch;
+		min-width: 0;
+		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
+	}
+
+	:host([size='md']) .text-cell__overline,
+	:host(:not([size])) .text-cell__overline {
+		font: var(--primitives-font-body-xs-regular-tight);
+	}
+
+	:host([size='sm']) .text-cell__overline {
+		font: var(--primitives-font-body-xxs-regular-tight);
+	}
+
+	:host([horizontal-alignment='right']) .text-cell__overline {
+		text-align: right;
+	}
+
+
+	/* # Text */
+
+	.text-cell__text {
+		margin: 0;
+		align-self: stretch;
+		min-width: 0;
+	}
+
+	:host([size='md']) .text-cell__text,
+	:host(:not([size])) .text-cell__text {
+		font: var(--primitives-font-body-md-regular-tight);
+	}
+
+	:host([size='sm']) .text-cell__text {
+		font: var(--primitives-font-body-sm-regular-tight);
+	}
+
+	:host([horizontal-alignment='right']) .text-cell__text {
+		text-align: right;
+	}
+
+
+	/* # Color */
+
+	/* ## Color: default */
+
+	:host([color='default']) .text-cell__text,
+	:host(:not([color])) .text-cell__text {
+		color: var(--context-cell-content-color, var(--semantics-content-color));
+	}
+
+	/* ## Color: secondary */
+
+	:host([color='secondary']) .text-cell__text {
+		color: var(--context-cell-content-secondary-color, var(--semantics-content-secondary-color));
+	}
+
+	/* ## Color: inherit */
+
+	:host([color='inherit']) .text-cell__text,
+	:host([color='inherit']) .text-cell__overline,
+	:host([color='inherit']) .text-cell__supporting-text {
+		color: inherit;
+	}
+
+
+	/* # Supporting text */
+
+	.text-cell__supporting-text {
+		margin: 0;
+		align-self: stretch;
+		min-width: 0;
+		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
+	}
+
+	:host([size='md']) .text-cell__supporting-text,
+	:host(:not([size])) .text-cell__supporting-text {
+		font: var(--primitives-font-body-xs-regular-tight);
+	}
+
+	:host([size='sm']) .text-cell__supporting-text {
+		font: var(--primitives-font-body-xxs-regular-tight);
+	}
+
+	:host([horizontal-alignment='right']) .text-cell__supporting-text {
+		text-align: right;
+	}
+
+
+	/* # Forced colors */
+
+	@media (forced-colors: active) {
+		.text-cell__text {
+			forced-color-adjust: none;
+		}
+	}
+`;
+//# sourceMappingURL=text-cell.styles.js.map

package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.js.map

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

package/dist/components/lists-and-menus/cells/text-cell/text-cell.template.d.ts

@@ -0,0 +1,3 @@
+import type { NLDDTextCell } from './text-cell.js';
+export declare function template(this: NLDDTextCell): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=text-cell.template.d.ts.map

package/dist/components/lists-and-menus/cells/text-cell/text-cell.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-cell.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/text-cell/text-cell.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,YAAY,wCAM1C"}

package/dist/components/lists-and-menus/cells/text-cell/text-cell.template.js

@@ -0,0 +1,10 @@
+import { html, nothing } from 'lit';
+import { renderQueryMark } from '../../../../utilities/render-marked.js';
+export function template() {
+    return html `
+		${this.overline ? html `<p class="text-cell__overline">${renderQueryMark(this.overline, this.query, this.queryMarkMode)}</p>` : nothing}
+		${this.text ? html `<p class="text-cell__text">${renderQueryMark(this.text, this.query, this.queryMarkMode)}</p>` : nothing}
+		${this.supportingText ? html `<p class="text-cell__supporting-text">${renderQueryMark(this.supportingText, this.query, this.queryMarkMode)}</p>` : nothing}
+	`;
+}
+//# sourceMappingURL=text-cell.template.js.map

package/dist/components/lists-and-menus/cells/text-cell/text-cell.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-cell.template.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/text-cell/text-cell.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAEzE,MAAM,UAAU,QAAQ;IACvB,OAAO,IAAI,CAAA;IACR,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;IACpI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,8BAA8B,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;IACxH,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA,yCAAyC,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;EACzJ,CAAC;AACH,CAAC"}

package/dist/components/lists-and-menus/cells/timeline-track-cell/timeline-track-cell.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Nederlandse Digitale Dienst Timeline Track 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.
+ *
+ * @element nldd-timeline-track-cell
+ * @attr {string} step - Timeline step state: 'past' | 'future' | 'none' (default: 'past')
+ * @attr {string} child - Position in timeline: 'first' | 'between' | 'last' (default: 'between')
+ *
+ * @csspart track - The timeline track container
+ */
+import { LitElement } from 'lit';
+type Step = 'past' | 'future' | 'none';
+type Child = 'first' | 'between' | 'last';
+export declare class NLDDTimelineTrackCell extends LitElement {
+    static styles: import("lit").CSSResult;
+    step: Step;
+    child: Child;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-timeline-track-cell': NLDDTimelineTrackCell;
+    }
+}
+export {};
+//# sourceMappingURL=timeline-track-cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-track-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/timeline-track-cell/timeline-track-cell.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,KAAK,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AACvC,KAAK,KAAK,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAE1C,qBACa,qBAAsB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BAmFpB;IAGF,IAAI,EAAE,IAAI,CAAU;IAGpB,KAAK,EAAE,KAAK,CAAa;IAEhB,MAAM;CAoBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,qBAAqB,CAAC;KAClD;CACD"}

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

@@ -0,0 +1,140 @@
+/**
+ * Nederlandse Digitale Dienst Timeline Track 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.
+ *
+ * @element nldd-timeline-track-cell
+ * @attr {string} step - Timeline step state: 'past' | 'future' | 'none' (default: 'past')
+ * @attr {string} child - Position in timeline: 'first' | 'between' | 'last' (default: 'between')
+ *
+ * @csspart track - The timeline track container
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let NLDDTimelineTrackCell = class NLDDTimelineTrackCell extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.step = 'past';
+        this.child = 'between';
+    }
+    render() {
+        if (this.step === 'none') {
+            return html `
+				<div class="timeline-track" part="track">
+					<div class="timeline-track__line-full"></div>
+				</div>
+			`;
+        }
+        const showTopLine = this.child === 'between' || this.child === 'last';
+        const showBottomLine = this.child === 'between' || this.child === 'first';
+        return html `
+			<div class="timeline-track" part="track">
+				${showTopLine ? html `<div class="timeline-track__line-top"></div>` : ''}
+				<div class="timeline-track__dot"></div>
+				${showBottomLine ? html `<div class="timeline-track__line-bottom"></div>` : ''}
+			</div>
+		`;
+    }
+};
+NLDDTimelineTrackCell.styles = css `
+		:host {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			width: 18px;
+		}
+
+		:host([hidden]) {
+			display: none;
+		}
+
+		.timeline-track {
+			position: relative;
+			width: 18px;
+			height: 100%;
+			min-height: 50px;
+		}
+
+		/* Vertical lines */
+		.timeline-track__line-top,
+		.timeline-track__line-bottom {
+			position: absolute;
+			left: 50%;
+			width: 2px;
+			margin-left: -1px;
+			background-color: var(--semantics-buttons-accent-filled-background-color);
+		}
+
+		.timeline-track__line-top {
+			bottom: 50%;
+			height: 59px;
+		}
+
+		.timeline-track__line-bottom {
+			top: 50%;
+			height: 59px;
+		}
+
+		/* Dot indicator */
+		.timeline-track__dot {
+			position: absolute;
+			top: 50%;
+			left: 0;
+			width: 18px;
+			height: 18px;
+			margin-top: -9px;
+			border-radius: 50%;
+			box-sizing: border-box;
+			border: 2px solid var(--semantics-buttons-accent-filled-background-color);
+		}
+
+		/* Step: past (filled dot) */
+		:host([step="past"]) .timeline-track__dot,
+		:host(:not([step])) .timeline-track__dot {
+			background-color: var(--semantics-buttons-accent-filled-background-color);
+		}
+
+		/* Step: future (hollow dot with white fill) */
+		:host([step="future"]) .timeline-track__dot {
+			background-color: var(--semantics-surfaces-background-color);
+		}
+
+		/* Step: none - continuous line, no dot */
+		.timeline-track__line-full {
+			position: absolute;
+			left: 50%;
+			width: 2px;
+			margin-left: -1px;
+			top: -34px;
+			bottom: -34px;
+			background-color: var(--semantics-buttons-accent-filled-background-color);
+		}
+
+		/* Accessibility: High Contrast Mode */
+		@media (forced-colors: active) {
+			.timeline-track__dot,
+			.timeline-track__line-top,
+			.timeline-track__line-bottom,
+			.timeline-track__line-full {
+				forced-color-adjust: none;
+			}
+		}
+	`;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTimelineTrackCell.prototype, "step", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTimelineTrackCell.prototype, "child", void 0);
+NLDDTimelineTrackCell = __decorate([
+    customElement('nldd-timeline-track-cell')
+], NLDDTimelineTrackCell);
+export { NLDDTimelineTrackCell };
+//# sourceMappingURL=timeline-track-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-track-cell.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/timeline-track-cell/timeline-track-cell.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAMrD,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAuFN,SAAI,GAAS,MAAM,CAAC;QAGpB,UAAK,GAAU,SAAS,CAAC;IAsB1B,CAAC;IApBS,MAAM;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YAC1B,OAAO,IAAI,CAAA;;;;IAIV,CAAC;QACH,CAAC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC;QACtE,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;QAE1E,OAAO,IAAI,CAAA;;MAEP,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,8CAA8C,CAAC,CAAC,CAAC,EAAE;;MAErE,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA,iDAAiD,CAAC,CAAC,CAAC,EAAE;;GAE9E,CAAC;IACH,CAAC;;AA9Ge,4BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmF3B,AAnFqB,CAmFpB;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACtB;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACjB;AA1Fb,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAgHjC"}