@nldd/design-system 0.8.37

package/dist/components/layout/window/window.template.js

@@ -0,0 +1,18 @@
+/* eslint-disable lit-a11y/click-events-have-key-events -- native dialog handles keyboard via @cancel */
+import { html, nothing } from 'lit';
+export function windowTemplate(component) {
+    return html `
+		<dialog class="window"
+			aria-label=${component._resolvedAccessibleLabel}
+			aria-modal=${component.modeless ? nothing : 'true'}
+			@click=${component._handleDialogClick}
+			@cancel=${component._handleCancel}
+			@pointerdown=${component._handlePointerDown}
+		>
+			<div class="window__body">
+				<slot @slotchange=${component._detectDragHandle}></slot>
+			</div>
+		</dialog>
+	`;
+}
+//# sourceMappingURL=window.template.js.map

package/dist/components/layout/window/window.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"window.template.js","sourceRoot":"","sources":["../../../../src/components/layout/window/window.template.ts"],"names":[],"mappings":"AAAA,wGAAwG;AACxG,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,cAAc,CAAC,SAAqB;IACnD,OAAO,IAAI,CAAA;;gBAEI,SAAS,CAAC,wBAAwB;gBAClC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;YACzC,SAAS,CAAC,kBAAkB;aAC3B,SAAS,CAAC,aAAa;kBAClB,SAAS,CAAC,kBAAkB;;;wBAGtB,SAAS,CAAC,iBAAiB;;;EAGjD,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,44 @@
+/**
+ * A generic cell for wrapping arbitrary content in a list item.
+ * Controls vertical alignment and sizing without imposing content opinions.
+ *
+ * ### 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-cell
+ * @attr {string} width - 'stretch' | 'fit-content' | CSS length (e.g. '120px', '10rem'). Default: 'fit-content'
+ * @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 {'top' | 'center' | 'bottom'} vertical-alignment - Vertical alignment of slotted content (default: 'center')
+ *
+ * @slot - Default slot for any content (buttons, switches, icons, etc.)
+ */
+import { LitElement } from 'lit';
+export type CellVerticalAlignment = 'top' | 'center' | 'bottom';
+declare const NLDDCell_base: typeof LitElement & (new (...args: any[]) => LitElement & {
+    hideBelow?: string;
+    hideAbove?: string;
+});
+export declare class NLDDCell extends NLDDCell_base {
+    static styles: import("lit").CSSResult[];
+    /** 'stretch' | 'fit-content' | CSS length (e.g. '120px', '10rem'). */
+    width: string;
+    minWidth?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    verticalAlignment: CellVerticalAlignment;
+    updated(changed: Map<string, unknown>): void;
+    private _applyDimensionStyles;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-cell': NLDDCell;
+    }
+}
+export {};
+//# sourceMappingURL=cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/cell/cell.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;;;;;AAEhE,qBACa,QAAS,SAAQ,aAA2B;IACxD,OAAgB,MAAM,4BAAgB;IAEtC,sEAAsE;IAEtE,KAAK,EAAE,MAAM,CAAiB;IAG9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,iBAAiB,EAAE,qBAAqB,CAAY;IAE3C,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,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

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

@@ -0,0 +1,95 @@
+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;
+};
+/**
+ * A generic cell for wrapping arbitrary content in a list item.
+ * Controls vertical alignment and sizing without imposing content opinions.
+ *
+ * ### 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-cell
+ * @attr {string} width - 'stretch' | 'fit-content' | CSS length (e.g. '120px', '10rem'). Default: 'fit-content'
+ * @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 {'top' | 'center' | 'bottom'} vertical-alignment - Vertical alignment of slotted content (default: 'center')
+ *
+ * @slot - Default slot for any content (buttons, switches, icons, etc.)
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { cellStyles } from './cell.styles.js';
+import { template } from './cell.template.js';
+import { VisibilityMixin } from '../../../../utilities/visibility-mixin.js';
+let NLDDCell = class NLDDCell extends VisibilityMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** 'stretch' | 'fit-content' | CSS length (e.g. '120px', '10rem'). */
+        this.width = 'fit-content';
+        this.verticalAlignment = 'center';
+    }
+    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();
+    }
+};
+NLDDCell.styles = [cellStyles];
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDCell.prototype, "width", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'min-width' })
+], NLDDCell.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'max-width' })
+], NLDDCell.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'min-height' })
+], NLDDCell.prototype, "minHeight", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'vertical-alignment' })
+], NLDDCell.prototype, "verticalAlignment", void 0);
+NLDDCell = __decorate([
+    customElement('nldd-cell')
+], NLDDCell);
+export { NLDDCell };
+//# sourceMappingURL=cell.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+export const cellStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		flex-shrink: 0;
+		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']) {
+		flex-grow: 1;
+		flex-shrink: 1;
+		min-width: 0;
+	}
+
+	:host([width='fit-content']),
+	:host(:not([width])) {
+		flex-grow: 0;
+		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;
+	}
+
+
+	/* # Slotted content */
+
+	::slotted(*) {
+		flex-shrink: 0;
+	}
+`;
+//# sourceMappingURL=cell.styles.js.map

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

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

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

@@ -0,0 +1,2 @@
+export declare const template: () => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=cell.template.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+import { html } from 'lit';
+export const template = () => html `<slot></slot>`;
+//# sourceMappingURL=cell.template.js.map

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

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

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

@@ -0,0 +1,46 @@
+/**
+ * Nederlandse Digitale Dienst Description Cell Component (Lit + TypeScript)
+ *
+ * A cell component for displaying a title-description pair 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-description-cell
+ * @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 {'top' | 'center' | 'bottom'} vertical-alignment - Vertical alignment (default: 'center')
+ *
+ * @slot title - The label displayed above the description
+ * @slot description - The description content
+ */
+import { LitElement } from 'lit';
+type VerticalAlignment = 'top' | 'center' | 'bottom';
+declare const NLDDDescriptionCell_base: typeof LitElement & (new (...args: any[]) => LitElement & {
+    hideBelow?: string;
+    hideAbove?: string;
+});
+export declare class NLDDDescriptionCell extends NLDDDescriptionCell_base {
+    static styles: import("lit").CSSResult[];
+    /** 'stretch' | 'fit-content' | CSS length (e.g. '200px', '20rem'). */
+    width: string;
+    minWidth?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    verticalAlignment: VerticalAlignment;
+    updated(changed: Map<string, unknown>): void;
+    private _applyDimensionStyles;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-description-cell': NLDDDescriptionCell;
+    }
+}
+export {};
+//# sourceMappingURL=description-cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"description-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/description-cell/description-cell.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,KAAK,iBAAiB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;;;;;AAErD,qBACa,mBAAoB,SAAQ,wBAA2B;IACnE,OAAgB,MAAM,4BAA2B;IAEjD,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,iBAAiB,EAAE,iBAAiB,CAAY;IAEvC,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,uBAAuB,EAAE,mBAAmB,CAAC;KAC7C;CACD"}

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

@@ -0,0 +1,97 @@
+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 Description Cell Component (Lit + TypeScript)
+ *
+ * A cell component for displaying a title-description pair 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-description-cell
+ * @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 {'top' | 'center' | 'bottom'} vertical-alignment - Vertical alignment (default: 'center')
+ *
+ * @slot title - The label displayed above the description
+ * @slot description - The description content
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { descriptionCellStyles } from './description-cell.styles.js';
+import { template } from './description-cell.template.js';
+import { VisibilityMixin } from '../../../../utilities/visibility-mixin.js';
+let NLDDDescriptionCell = class NLDDDescriptionCell extends VisibilityMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** 'stretch' | 'fit-content' | CSS length (e.g. '200px', '20rem'). */
+        this.width = 'stretch';
+        this.verticalAlignment = 'center';
+    }
+    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();
+    }
+};
+NLDDDescriptionCell.styles = [descriptionCellStyles];
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDDescriptionCell.prototype, "width", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'min-width' })
+], NLDDDescriptionCell.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'max-width' })
+], NLDDDescriptionCell.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'min-height' })
+], NLDDDescriptionCell.prototype, "minHeight", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'vertical-alignment' })
+], NLDDDescriptionCell.prototype, "verticalAlignment", void 0);
+NLDDDescriptionCell = __decorate([
+    customElement('nldd-description-cell')
+], NLDDDescriptionCell);
+export { NLDDDescriptionCell };
+//# sourceMappingURL=description-cell.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,99 @@
+import { css } from 'lit';
+export const descriptionCellStyles = 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;
+	}
+
+
+	/* # Title */
+
+	::slotted([slot='title']) {
+		margin: 0;
+		align-self: stretch;
+		min-width: 0;
+		font: var(--primitives-font-body-sm-regular-flat);
+		color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
+	}
+
+
+	/* # Description */
+
+	::slotted([slot='description']) {
+		margin: 0;
+		align-self: stretch;
+		min-width: 0;
+		font: var(--primitives-font-body-md-regular-tight);
+		color: var(--context-cell-content-color, var(--semantics-content-color));
+	}
+
+
+	/* # Forced colors */
+
+	@media (forced-colors: active) {
+		::slotted([slot='title']),
+		::slotted([slot='description']) {
+			forced-color-adjust: none;
+		}
+	}
+`;
+//# sourceMappingURL=description-cell.styles.js.map

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

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

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

@@ -0,0 +1,2 @@
+export declare const template: () => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=description-cell.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"description-cell.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/description-cell/description-cell.template.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,4CAGpB,CAAC"}

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

@@ -0,0 +1,6 @@
+import { html } from 'lit';
+export const template = () => html `
+	<slot name="title"></slot>
+	<slot name="description"></slot>
+`;
+//# sourceMappingURL=description-cell.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"description-cell.template.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/description-cell/description-cell.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;CAGjC,CAAC"}

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

@@ -0,0 +1,43 @@
+/**
+ * Nederlandse Digitale Dienst Drag Handle Cell Component (Lit + TypeScript)
+ *
+ * A cell that displays a drag handle for reorderable list items.
+ * Always vertically centered and sized to fit the handle.
+ *
+ * ### Usage with nldd-list
+ * To enable drag-to-reorder, add the `reorderable-only` attribute to this element.
+ * This attribute is required for `nldd-list` to detect the drag handle in the
+ * composed event path and activate pointer and keyboard drag mode:
+ *
+ * ```html
+ * <nldd-list reorderable>
+ *   <nldd-list-item>
+ *     <nldd-drag-handle-cell slot="start" reorderable-only></nldd-drag-handle-cell>
+ *     <nldd-text-cell text="Item"></nldd-text-cell>
+ *   </nldd-list-item>
+ * </nldd-list>
+ * ```
+ *
+ * Without `reorderable-only`, pointer and keyboard drag will never trigger.
+ *
+ * @element nldd-drag-handle-cell
+ * @attr {string} size - Handle size: 'sm' | 'md' (default: 'md')
+ */
+import { LitElement } from 'lit';
+import type { NLDDDragHandleCellTranslations } from './drag-handle-cell.i18n.js';
+type Size = 'sm' | 'md';
+export declare class NLDDDragHandleCell extends LitElement {
+    static styles: import("lit").CSSResult;
+    size: Size;
+    /** Override one or more translation keys. Unset keys fall back to the Dutch default. */
+    translations: Partial<NLDDDragHandleCellTranslations>;
+    private _t;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-drag-handle-cell': NLDDDragHandleCell;
+    }
+}
+export {};
+//# sourceMappingURL=drag-handle-cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drag-handle-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AAEjF,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExB,qBACa,kBAAmB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAwB;IAG9C,IAAI,EAAE,IAAI,CAAQ;IAElB,wFAAwF;IAExF,YAAY,EAAE,OAAO,CAAC,8BAA8B,CAAC,CAAM;IAI3D,OAAO,CAAC,EAAE;IAID,MAAM;CAIf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,uBAAuB,EAAE,kBAAkB,CAAC;KAC5C;CACD"}

package/dist/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.i18n.d.ts

@@ -0,0 +1,5 @@
+export declare const nlddDragHandleCellTranslations: {
+    'components.drag-handle-cell.label-text': string;
+};
+export type NLDDDragHandleCellTranslations = typeof nlddDragHandleCellTranslations;
+//# sourceMappingURL=drag-handle-cell.i18n.d.ts.map

package/dist/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-handle-cell.i18n.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,8BAA8B;;CAE1C,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,OAAO,8BAA8B,CAAC"}

package/dist/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.i18n.js

@@ -0,0 +1,4 @@
+export const nlddDragHandleCellTranslations = {
+    'components.drag-handle-cell.label-text': 'Sleepgreep, druk spatie of enter om te verplaatsen',
+};
+//# sourceMappingURL=drag-handle-cell.i18n.js.map

package/dist/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-handle-cell.i18n.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,8BAA8B,GAAG;IAC7C,wCAAwC,EAAE,oDAAoD;CAC9F,CAAC"}