@nldd/design-system 0.8.37

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

@@ -0,0 +1,78 @@
+/**
+ * Nederlandse Digitale Dienst Title Cell Component (Lit + TypeScript)
+ *
+ * A cell component for displaying a title with optional overline and subtitle in lists.
+ *
+ * ### 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-title-cell
+ * @attr {1|2|3|4|5|6} size - Visual size of the title (default: 5)
+ * @attr {'default' | 'inherit'} color - Text color variant (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. '300px', '20rem')
+ * @attr {string} min-height - Minimum height as CSS length (e.g. '44px', '3rem')
+ * @attr {'left' | 'right'} horizontal-alignment - Horizontal alignment (default: 'left')
+ * @attr {'top' | 'center' | 'bottom'} vertical-alignment - Vertical alignment (default: 'center')
+ *
+ * @attr {string} text - Title text content. Supports **bold** syntax for inline bold segments.
+ * @attr {string} overline - Optional overline text displayed above the title. Supports **bold**.
+ * @attr {string} supporting-text - Optional supporting text displayed below the title. Supports **bold**.
+ * @attr {number} heading-level - Heading level for the title element: 1–6 (default: none, renders a <p>)
+ *
+ * ### 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';
+export type TitleCellSize = 1 | 2 | 3 | 4 | 5 | 6;
+type Color = 'default' | 'inherit';
+type HorizontalAlignment = 'left' | 'right';
+type VerticalAlignment = 'top' | 'center' | 'bottom';
+declare const NLDDTitleCell_base: typeof LitElement & (new (...args: any[]) => LitElement & {
+    hideBelow?: string;
+    hideAbove?: string;
+});
+export declare class NLDDTitleCell extends NLDDTitleCell_base {
+    static styles: import("lit").CSSResult[];
+    size: TitleCellSize;
+    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;
+    /** Heading level for the title element (1–6). When not set, renders a <p>. */
+    headingLevel: number | undefined;
+    query: string;
+    queryMarkMode: QueryMarkMode;
+    updated(changed: Map<string, unknown>): void;
+    private _applyDimensionStyles;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-title-cell': NLDDTitleCell;
+    }
+}
+export {};
+//# sourceMappingURL=title-cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"title-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/title-cell/title-cell.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,MAAM,aAAa,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAClD,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;AACnC,KAAK,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,KAAK,iBAAiB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;;;;;AAErD,qBACa,aAAc,SAAQ,kBAA2B;IAC7D,OAAgB,MAAM,4BAAqB;IAG3C,IAAI,EAAE,aAAa,CAAK;IAGxB,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;IAEpB,8EAA8E;IAE9E,YAAY,EAAE,MAAM,GAAG,SAAS,CAAa;IAG7C,KAAK,SAAM;IAGX,aAAa,EAAE,aAAa,CAAgB;IAEnC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAO,CAAC,qBAAqB;IAwBpB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}

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

@@ -0,0 +1,152 @@
+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 Title Cell Component (Lit + TypeScript)
+ *
+ * A cell component for displaying a title with optional overline and subtitle in lists.
+ *
+ * ### 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-title-cell
+ * @attr {1|2|3|4|5|6} size - Visual size of the title (default: 5)
+ * @attr {'default' | 'inherit'} color - Text color variant (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. '300px', '20rem')
+ * @attr {string} min-height - Minimum height as CSS length (e.g. '44px', '3rem')
+ * @attr {'left' | 'right'} horizontal-alignment - Horizontal alignment (default: 'left')
+ * @attr {'top' | 'center' | 'bottom'} vertical-alignment - Vertical alignment (default: 'center')
+ *
+ * @attr {string} text - Title text content. Supports **bold** syntax for inline bold segments.
+ * @attr {string} overline - Optional overline text displayed above the title. Supports **bold**.
+ * @attr {string} supporting-text - Optional supporting text displayed below the title. Supports **bold**.
+ * @attr {number} heading-level - Heading level for the title element: 1–6 (default: none, renders a <p>)
+ *
+ * ### 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 { titleCellStyles } from './title-cell.styles.js';
+import { template } from './title-cell.template.js';
+import { VisibilityMixin } from '../../../../utilities/visibility-mixin.js';
+let NLDDTitleCell = class NLDDTitleCell extends VisibilityMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.size = 5;
+        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 = '';
+        /** Heading level for the title element (1–6). When not set, renders a <p>. */
+        this.headingLevel = undefined;
+        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() {
+        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);
+    }
+};
+NLDDTitleCell.styles = [titleCellStyles];
+__decorate([
+    property({ type: Number, reflect: true })
+], NLDDTitleCell.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTitleCell.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTitleCell.prototype, "width", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'min-width' })
+], NLDDTitleCell.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'max-width' })
+], NLDDTitleCell.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'min-height' })
+], NLDDTitleCell.prototype, "minHeight", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'horizontal-alignment' })
+], NLDDTitleCell.prototype, "horizontalAlignment", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'vertical-alignment' })
+], NLDDTitleCell.prototype, "verticalAlignment", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTitleCell.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTitleCell.prototype, "overline", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], NLDDTitleCell.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Number, attribute: 'heading-level' })
+], NLDDTitleCell.prototype, "headingLevel", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTitleCell.prototype, "query", void 0);
+__decorate([
+    property({ type: String, attribute: 'query-mark-mode' })
+], NLDDTitleCell.prototype, "queryMarkMode", void 0);
+NLDDTitleCell = __decorate([
+    customElement('nldd-title-cell')
+], NLDDTitleCell);
+export { NLDDTitleCell };
+//# sourceMappingURL=title-cell.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,178 @@
+import { css } from 'lit';
+export const titleCellStyles = 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 */
+
+	.title-cell__overline {
+		margin: 0;
+		align-self: stretch;
+		min-width: 0;
+		font: var(--primitives-font-body-xs-regular-tight);
+		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
+	}
+
+	:host([horizontal-alignment='right']) .title-cell__overline {
+		text-align: right;
+	}
+
+
+	/* # Title */
+
+	.title-cell__title {
+		margin: 0;
+		align-self: stretch;
+		min-width: 0;
+		color: var(--context-cell-content-color, var(--semantics-content-color));
+	}
+
+	:host([horizontal-alignment='right']) .title-cell__title {
+		text-align: right;
+	}
+
+	/* ## Size 1 */
+
+	:host([size='1']) .title-cell__title {
+		font: var(--primitives-font-display-1-sm);
+	}
+
+	/* ## Size 2 */
+
+	:host([size='2']) .title-cell__title {
+		font: var(--primitives-font-display-2-sm);
+	}
+
+	/* ## Size 3 */
+
+	:host([size='3']) .title-cell__title {
+		font: var(--primitives-font-display-3-sm);
+	}
+
+	/* ## Size 4 */
+
+	:host([size='4']) .title-cell__title {
+		font: var(--primitives-font-display-4-sm);
+	}
+
+	/* ## Size 5 */
+
+	:host([size='5']) .title-cell__title,
+	:host(:not([size])) .title-cell__title {
+		font: var(--primitives-font-display-5-sm);
+	}
+
+	/* ## Size 6 */
+
+	:host([size='6']) .title-cell__title {
+		font: var(--primitives-font-display-6-sm);
+	}
+
+
+	/* # Subtitle */
+
+	.title-cell__supporting-text {
+		margin: 0;
+		align-self: stretch;
+		min-width: 0;
+		font: var(--primitives-font-body-sm-regular-tight);
+		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
+	}
+
+	:host([horizontal-alignment='right']) .title-cell__supporting-text {
+		text-align: right;
+	}
+
+
+	/* # Color: inherit */
+
+	:host([color='inherit']) .title-cell__title,
+	:host([color='inherit']) .title-cell__overline,
+	:host([color='inherit']) .title-cell__supporting-text {
+		color: inherit;
+	}
+
+
+	/* # Forced colors */
+
+	@media (forced-colors: active) {
+		.title-cell__title {
+			forced-color-adjust: none;
+		}
+	}
+`;
+//# sourceMappingURL=title-cell.styles.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"title-cell.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/title-cell/title-cell.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AA4BrD,eAAO,MAAM,QAAQ,GAAa,MAAM,aAAa,yCAMpD,CAAC"}

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

@@ -0,0 +1,33 @@
+import { html, nothing } from 'lit';
+import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
+import { renderQueryMark } from '../../../../utilities/render-marked.js';
+// SAFETY: whitelist of allowed heading tags for unsafeStatic.
+// This map is the sole guard against XSS — never derive a tag name
+// from unvalidated input. Any heading-level value not in this map
+// falls back to <p>.
+const HEADING_TAGS = {
+    1: unsafeStatic('h1'),
+    2: unsafeStatic('h2'),
+    3: unsafeStatic('h3'),
+    4: unsafeStatic('h4'),
+    5: unsafeStatic('h5'),
+    6: unsafeStatic('h6'),
+};
+function renderTitle(component) {
+    if (!component.text)
+        return nothing;
+    const rendered = renderQueryMark(component.text, component.query, component.queryMarkMode);
+    const tag = HEADING_TAGS[component.headingLevel];
+    if (tag) {
+        return staticHtml `<${tag} class="title-cell__title">${rendered}</${tag}>`;
+    }
+    return html `<p class="title-cell__title">${rendered}</p>`;
+}
+export const template = function () {
+    return html `
+		${this.overline ? html `<p class="title-cell__overline">${renderQueryMark(this.overline, this.query, this.queryMarkMode)}</p>` : nothing}
+		${renderTitle(this)}
+		${this.supportingText ? html `<p class="title-cell__supporting-text">${renderQueryMark(this.supportingText, this.query, this.queryMarkMode)}</p>` : nothing}
+	`;
+};
+//# sourceMappingURL=title-cell.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"title-cell.template.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/title-cell/title-cell.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAEzE,8DAA8D;AAC9D,mEAAmE;AACnE,kEAAkE;AAClE,qBAAqB;AACrB,MAAM,YAAY,GAAoD;IACrE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IACrB,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IACrB,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IACrB,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IACrB,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IACrB,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;CACrB,CAAC;AAEF,SAAS,WAAW,CAAC,SAAwB;IAC5C,IAAI,CAAC,SAAS,CAAC,IAAI;QAAE,OAAO,OAAO,CAAC;IAEpC,MAAM,QAAQ,GAAG,eAAe,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IAC3F,MAAM,GAAG,GAAG,YAAY,CAAC,SAAS,CAAC,YAAsB,CAAC,CAAC;IAC3D,IAAI,GAAG,EAAE,CAAC;QACT,OAAO,UAAU,CAAA,IAAI,GAAG,8BAA8B,QAAQ,KAAK,GAAG,GAAG,CAAC;IAC3E,CAAC;IAED,OAAO,IAAI,CAAA,gCAAgC,QAAQ,MAAM,CAAC;AAC3D,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG;IACvB,OAAO,IAAI,CAAA;IACR,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;IACrI,WAAW,CAAC,IAAI,CAAC;IACjB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA,0CAA0C,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;EAC1J,CAAC;AACH,CAAC,CAAC"}

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

@@ -0,0 +1,111 @@
+import { LitElement } from 'lit';
+import type { NLDDListTranslations } from './list.i18n.js';
+import '../../status-and-feedback/inline-dialog/inline-dialog.js';
+export type ListVariant = 'simple' | 'box' | 'box-on-tinted';
+export type ListType = 'list' | 'navigation';
+export interface NLDDReorderEventDetail {
+    fromIndex: number;
+    toIndex: number;
+}
+/**
+ * A container for `nldd-list-item` elements, with optional header and footer slots.
+ *
+ * The `type` attribute switches the list's a11y role and behaviour:
+ * - `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>`.
+ *
+ * Selection state is consumer-managed: the list never mutates `selected` itself.
+ *
+ * ### Reorder
+ *
+ * On reorder (type="list" + reorderable), the list dispatches `nldd-reorder` with
+ * `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their
+ * data model that renders the DOM). Focus is restored to the moved item's drag
+ * handle via a single `requestAnimationFrame` — this assumes the consumer
+ * reorders **synchronously** in the event handler. Async renderers (React,
+ * 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 header  - Content above the list body (e.g. `nldd-title`)
+ * @slot footer  - Content below the list body (e.g. a short description)
+ * @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 resultaten"). Slot content
+ *                 overrides the default dialog entirely.
+ *
+ * @fires nldd-reorder - Reorderable `type="list"`: `{ fromIndex, toIndex }` on drop
+ */
+export declare class NLDDList extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Visual style of the list. */
+    variant: ListVariant;
+    /** A11y semantics. See class docblock. */
+    type: ListType;
+    /** Enables drag-to-reorder. Only valid when `type="list"` (the default). */
+    reorderable: boolean;
+    /** Hides dividers between list items. */
+    noDividers: boolean;
+    /**
+     * Text for the default empty-state dialog. Falls back to the Dutch
+     * i18n default ("Geen resultaten"). Ignored when consumers slot their
+     * own content into `[slot=empty]`.
+     */
+    emptyText: string;
+    /**
+     * Optional supporting text for the default empty-state dialog.
+     * Ignored when consumers slot their own content into `[slot=empty]`.
+     */
+    emptySupportingText: string;
+    /** Override one or more translation keys. Unset keys fall back to the Dutch default. */
+    translations: Partial<NLDDListTranslations>;
+    private _mergedTranslations;
+    private _hasHeader;
+    private _isEmpty;
+    private _draggingEl;
+    private _draggingFromIndex;
+    private _placeholder;
+    private _currentDropIndex;
+    private _pointerId;
+    private _clone;
+    private _cloneOffsetY;
+    private _listRect;
+    private _itemsObserver;
+    firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _applyHostType;
+    private _getItems;
+    private _updateItems;
+    private _updateEmpty;
+    private _onPointerDown;
+    private _lastPointerY;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _onPointerCancel;
+    private _onKeyDown;
+    private _getDeepActiveElement;
+    private _startDrag;
+    /**
+     * Places the placeholder so the dragged item will land at position `toIndex`
+     * among the non-dragging items (0 = before first, nonDragging.length = after last).
+     */
+    private _setDropIndex;
+    private _getDropIndex;
+    private _endDrag;
+    private _cancelDrag;
+    private _cleanupDrag;
+    private _t;
+    private _announce;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-list': NLDDList;
+    }
+}
+//# sourceMappingURL=list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,0DAA0D,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,CAAC;AAC7D,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,YAAY,CAAC;AAE7C,MAAM,WAAW,sBAAsB;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,QAAS,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAAgB;IAEtC,gCAAgC;IAEhC,OAAO,EAAE,WAAW,CAAY;IAEhC,0CAA0C;IAE1C,IAAI,EAAE,QAAQ,CAAU;IAExB,4EAA4E;IAE5E,WAAW,UAAS;IAEpB,yCAAyC;IAEzC,UAAU,UAAS;IAEnB;;;;OAIG;IAEH,SAAS,SAAM;IAEf;;;OAGG;IAEH,mBAAmB,SAAM;IAEzB,wFAAwF;IAExF,YAAY,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAM;IAGjD,OAAO,CAAC,mBAAmB,CAA+B;IAG1D,OAAO,CAAC,UAAU,CAAS;IAG3B,OAAO,CAAC,QAAQ,CAAS;IAIzB,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,kBAAkB,CAAM;IAChC,OAAO,CAAC,YAAY,CAA+B;IACnD,OAAO,CAAC,iBAAiB,CAAM;IAC/B,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,SAAS,CAAwB;IAIzC,OAAO,CAAC,cAAc,CAAiC;IAI9C,YAAY;IA4CZ,iBAAiB;IAMjB,oBAAoB;IASpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAiB9C,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc,CA2BpB;IAEF,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,cAAc,CA8BpB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAOF,OAAO,CAAC,UAAU,CA4ChB;IAEF,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,UAAU;IA0ClB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,QAAQ;IAgChB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,EAAE;IAYV,OAAO,CAAC,SAAS;IAWR,MAAM;CAUf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

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

@@ -0,0 +1,11 @@
+export declare const nlddListTranslations: {
+    'components.list.items-label-text': string;
+    'components.list.navigation-label-text': string;
+    'components.list.empty-text': 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;
+};
+export type NLDDListTranslations = typeof nlddListTranslations;
+//# sourceMappingURL=list.i18n.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list/list.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB;;;;;;;;CAQhC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC"}

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

@@ -0,0 +1,10 @@
+export const nlddListTranslations = {
+    'components.list.items-label-text': 'Lijst',
+    'components.list.navigation-label-text': 'Navigatie',
+    'components.list.empty-text': 'Geen resultaten',
+    '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.',
+};
+//# sourceMappingURL=list.i18n.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.i18n.js","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/list/list.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;IACnC,kCAAkC,EAAE,OAAO;IAC3C,uCAAuC,EAAE,WAAW;IACpD,4BAA4B,EAAE,iBAAiB;IAC/C,oCAAoC,EAAE,0CAA0C;IAChF,sCAAsC,EAAE,uCAAuC;IAC/E,wCAAwC,EAAE,sCAAsC;IAChF,wCAAwC,EAAE,qBAAqB;CAC/D,CAAC"}