@nldd/design-system 0.8.37

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

@@ -0,0 +1,64 @@
+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 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 { customElement, property } from 'lit/decorators.js';
+import { dragHandleCellStyles } from './drag-handle-cell.styles.js';
+import { template } from './drag-handle-cell.template.js';
+import { nlddDragHandleCellTranslations } from './drag-handle-cell.i18n.js';
+let NLDDDragHandleCell = class NLDDDragHandleCell extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = 'md';
+        /** Override one or more translation keys. Unset keys fall back to the Dutch default. */
+        this.translations = {};
+    }
+    // — i18n ————————————————————————————————————————————————————————————————
+    _t(key) {
+        return this.translations[key] ?? nlddDragHandleCellTranslations[key];
+    }
+    render() {
+        const label = this._t('components.drag-handle-cell.label-text');
+        return template(this.size, label);
+    }
+};
+NLDDDragHandleCell.styles = dragHandleCellStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDDragHandleCell.prototype, "size", void 0);
+__decorate([
+    property({ type: Object })
+], NLDDDragHandleCell.prototype, "translations", void 0);
+NLDDDragHandleCell = __decorate([
+    customElement('nldd-drag-handle-cell')
+], NLDDDragHandleCell);
+export { NLDDDragHandleCell };
+//# sourceMappingURL=drag-handle-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drag-handle-cell.js","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;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AAMrE,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAIN,SAAI,GAAS,IAAI,CAAC;QAElB,wFAAwF;QAExF,iBAAY,GAA4C,EAAE,CAAC;IAY5D,CAAC;IAVA,0EAA0E;IAElE,EAAE,CAAC,GAAyC;QACnD,OAAO,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,8BAA8B,CAAC,GAAG,CAAC,CAAC;IACtE,CAAC;IAEQ,MAAM;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,wCAAwC,CAAC,CAAC;QAChE,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;;AAlBe,yBAAM,GAAG,oBAAoB,AAAvB,CAAwB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACxB;AAIlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACgC;AAR/C,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAoB9B"}

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

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

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

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

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

@@ -0,0 +1,72 @@
+import { css } from 'lit';
+export const dragHandleCellStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: fit-content;
+		cursor: grab;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host(:active) {
+		cursor: grabbing;
+	}
+
+
+	/* # Control */
+
+	.drag-handle-cell__control {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: var(--semantics-grab-handles-background-color);
+		border: none;
+		padding: 0;
+		margin: 0;
+		cursor: inherit;
+		-webkit-appearance: none;
+		appearance: none;
+	}
+
+	.drag-handle-cell__control:focus-visible {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+
+	/* ## Size: MD (default) */
+
+	:host([size="md"]) .drag-handle-cell__control,
+	:host(:not([size])) .drag-handle-cell__control {
+		width: var(--semantics-controls-sm-min-size);
+		height: var(--semantics-controls-md-min-size);
+		border-radius: var(--semantics-controls-md-corner-radius);
+	}
+
+
+	/* ## Size: SM */
+
+	:host([size="sm"]) .drag-handle-cell__control {
+		width: var(--semantics-controls-xs-min-size);
+		height: var(--semantics-controls-sm-min-size);
+		border-radius: var(--semantics-controls-sm-corner-radius);
+	}
+
+
+	/* # Grip */
+
+	.drag-handle-cell__control-grip {
+		display: block;
+		color: var(--semantics-grab-handles-grip-color);
+	}
+`;
+//# sourceMappingURL=drag-handle-cell.styles.js.map

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

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

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

@@ -0,0 +1,2 @@
+export declare function template(size: 'sm' | 'md', label: string): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=drag-handle-cell.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drag-handle-cell.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.template.ts"],"names":[],"mappings":"AAoCA,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,wCASxD"}

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

@@ -0,0 +1,44 @@
+import { html, svg } from 'lit';
+const gripMd = svg `
+	<svg aria-hidden="true" class="drag-handle-cell__control-grip"
+		width="10"
+		height="22"
+		viewBox="0 0 10 22"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<circle cx="2" cy="2"  r="2" fill="currentColor"/>
+		<circle cx="8" cy="2"  r="2" fill="currentColor"/>
+		<circle cx="2" cy="8"  r="2" fill="currentColor"/>
+		<circle cx="8" cy="8"  r="2" fill="currentColor"/>
+		<circle cx="2" cy="14" r="2" fill="currentColor"/>
+		<circle cx="8" cy="14" r="2" fill="currentColor"/>
+		<circle cx="2" cy="20" r="2" fill="currentColor"/>
+		<circle cx="8" cy="20" r="2" fill="currentColor"/>
+	</svg>
+`;
+const gripSm = svg `
+	<svg aria-hidden="true" class="drag-handle-cell__control-grip"
+		width="10"
+		height="16"
+		viewBox="0 0 10 16"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<circle cx="2" cy="2"  r="2" fill="currentColor"/>
+		<circle cx="8" cy="2"  r="2" fill="currentColor"/>
+		<circle cx="2" cy="8"  r="2" fill="currentColor"/>
+		<circle cx="8" cy="8"  r="2" fill="currentColor"/>
+		<circle cx="2" cy="14" r="2" fill="currentColor"/>
+		<circle cx="8" cy="14" r="2" fill="currentColor"/>
+	</svg>
+`;
+export function template(size, label) {
+    return html `
+		<button class="drag-handle-cell__control"
+			type="button"
+			aria-label=${label}
+		>
+			${size === 'sm' ? gripSm : gripMd}
+		</button>
+	`;
+}
+//# sourceMappingURL=drag-handle-cell.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drag-handle-cell.template.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAEhC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBjB,CAAC;AAEF,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAcjB,CAAC;AAEF,MAAM,UAAU,QAAQ,CAAC,IAAiB,EAAE,KAAa;IACxD,OAAO,IAAI,CAAA;;;gBAGI,KAAK;;KAEhB,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;EAElC,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,39 @@
+/**
+ * Nederlandse Digitale Dienst Icon Cell Component (Lit + TypeScript)
+ *
+ * A cell component for displaying icons in lists with configurable
+ * alignment and size. Set `icon` to render an `nldd-icon` by name, or
+ * slot custom content as an escape hatch for non-standard iconography.
+ *
+ * @element nldd-icon-cell
+ * @attr {string} vertical-alignment - Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center')
+ * @attr {string} size - Size: '16' | '20' | '24' | '32' (default: '24')
+ * @attr {string} color - Color: 'default' | 'inherit' (default: 'default')
+ * @attr {string} icon - Icon name (renders `<nldd-icon>`). Takes precedence over the default slot.
+ *
+ * @slot - Fallback for custom icon content when `icon` is not set.
+ */
+import { LitElement } from 'lit';
+import '../../../content/icon/icon.js';
+type VerticalAlignment = 'top' | 'center' | 'bottom';
+type Size = '16' | '20' | '24' | '32';
+type Color = 'default' | 'inherit';
+declare const NLDDIconCell_base: typeof LitElement & (new (...args: any[]) => LitElement & {
+    hideBelow?: string;
+    hideAbove?: string;
+});
+export declare class NLDDIconCell extends NLDDIconCell_base {
+    static styles: import("lit").CSSResult;
+    verticalAlignment: VerticalAlignment;
+    size: Size;
+    color: Color;
+    icon: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-icon-cell': NLDDIconCell;
+    }
+}
+export {};
+//# sourceMappingURL=icon-cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/icon-cell/icon-cell.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,+BAA+B,CAAC;AAEvC,KAAK,iBAAiB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACrD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;;;;;AAEnC,qBACa,YAAa,SAAQ,iBAA2B;IAC5D,OAAgB,MAAM,0BAAkB;IAGxC,iBAAiB,EAAE,iBAAiB,CAAY;IAGhD,IAAI,EAAE,IAAI,CAAQ;IAGlB,KAAK,EAAE,KAAK,CAAa;IAGzB,IAAI,SAAM;IAED,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/icon-cell/icon-cell.js

@@ -0,0 +1,57 @@
+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 Icon Cell Component (Lit + TypeScript)
+ *
+ * A cell component for displaying icons in lists with configurable
+ * alignment and size. Set `icon` to render an `nldd-icon` by name, or
+ * slot custom content as an escape hatch for non-standard iconography.
+ *
+ * @element nldd-icon-cell
+ * @attr {string} vertical-alignment - Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center')
+ * @attr {string} size - Size: '16' | '20' | '24' | '32' (default: '24')
+ * @attr {string} color - Color: 'default' | 'inherit' (default: 'default')
+ * @attr {string} icon - Icon name (renders `<nldd-icon>`). Takes precedence over the default slot.
+ *
+ * @slot - Fallback for custom icon content when `icon` is not set.
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { iconCellStyles } from './icon-cell.styles.js';
+import { template } from './icon-cell.template.js';
+import { VisibilityMixin } from '../../../../utilities/visibility-mixin.js';
+import '../../../content/icon/icon.js';
+let NLDDIconCell = class NLDDIconCell extends VisibilityMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.verticalAlignment = 'center';
+        this.size = '24';
+        this.color = 'default';
+        this.icon = '';
+    }
+    render() {
+        return template.call(this);
+    }
+};
+NLDDIconCell.styles = iconCellStyles;
+__decorate([
+    property({ type: String, reflect: true, attribute: 'vertical-alignment' })
+], NLDDIconCell.prototype, "verticalAlignment", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDIconCell.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDIconCell.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDIconCell.prototype, "icon", void 0);
+NLDDIconCell = __decorate([
+    customElement('nldd-icon-cell')
+], NLDDIconCell);
+export { NLDDIconCell };
+//# sourceMappingURL=icon-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-cell.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/icon-cell/icon-cell.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAC5E,OAAO,+BAA+B,CAAC;AAOhC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,eAAe,CAAC,UAAU,CAAC;IAAtD;;QAIN,sBAAiB,GAAsB,QAAQ,CAAC;QAGhD,SAAI,GAAS,IAAI,CAAC;QAGlB,UAAK,GAAU,SAAS,CAAC;QAGzB,SAAI,GAAG,EAAE,CAAC;IAKX,CAAC;IAHS,MAAM;QACd,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;;AAhBe,mBAAM,GAAG,cAAc,AAAjB,CAAkB;AAGxC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;uDAC3B;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACxB;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACjB;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAChC;AAbE,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAkBxB"}

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

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

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

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

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

@@ -0,0 +1,103 @@
+import { css } from 'lit';
+export const iconCellStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		color: var(--context-cell-content-color, var(--semantics-content-color));
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # vertical-alignment */
+
+	/* ## vertical-alignment: center (default) */
+
+	:host([vertical-alignment="center"]),
+	:host(:not([vertical-alignment])) {
+		align-self: stretch;
+		justify-content: center;
+	}
+
+	/* ## vertical-alignment: top */
+
+	:host([vertical-alignment="top"]) {
+		align-self: flex-start;
+		justify-content: flex-start;
+	}
+
+	/* ## vertical-alignment: bottom */
+
+	:host([vertical-alignment="bottom"]) {
+		align-self: flex-end;
+		justify-content: flex-end;
+	}
+
+
+	/* # size */
+
+	::slotted(*) {
+		display: block;
+		flex-shrink: 0;
+	}
+
+	/* ## size: 16 */
+
+	:host([size="16"]) {
+		width: var(--primitives-space-16);
+	}
+
+	:host([size="16"]) ::slotted(*) {
+		width: var(--primitives-space-16);
+		height: var(--primitives-space-16);
+	}
+
+	/* ## size: 20 */
+
+	:host([size="20"]) {
+		width: var(--primitives-space-20);
+	}
+
+	:host([size="20"]) ::slotted(*) {
+		width: var(--primitives-space-20);
+		height: var(--primitives-space-20);
+	}
+
+	/* ## size: 24 (default) */
+
+	:host([size="24"]) {
+		width: var(--primitives-space-24);
+	}
+
+	:host([size="24"]) ::slotted(*),
+	:host(:not([size])) ::slotted(*) {
+		width: var(--primitives-space-24);
+		height: var(--primitives-space-24);
+	}
+
+	/* ## size: 32 */
+
+	:host([size="32"]) {
+		width: var(--primitives-space-32);
+	}
+
+	:host([size="32"]) ::slotted(*) {
+		width: var(--primitives-space-32);
+		height: var(--primitives-space-32);
+	}
+
+
+	/* # color: inherit */
+
+	:host([color="inherit"]) {
+		color: inherit;
+	}
+`;
+//# sourceMappingURL=icon-cell.styles.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { html } from 'lit';
+export function template() {
+    return html `
+		${this.icon
+        ? html `<nldd-icon name=${this.icon}></nldd-icon>`
+        : html `<slot></slot>`}
+	`;
+}
+//# sourceMappingURL=icon-cell.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-cell.template.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/icon-cell/icon-cell.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,UAAU,QAAQ;IACvB,OAAO,IAAI,CAAA;IACR,IAAI,CAAC,IAAI;QACV,CAAC,CAAC,IAAI,CAAA,mBAAmB,IAAI,CAAC,IAAI,eAAe;QACjD,CAAC,CAAC,IAAI,CAAA,eAAe;EACtB,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,26 @@
+/**
+ * Nederlandse Digitale Dienst Spacer Cell Component (Lit + TypeScript)
+ *
+ * A cell component that provides fixed horizontal spacing within list items.
+ *
+ * @element nldd-spacer-cell
+ * @attr {string} size - Spacer size in pixels: '2' | '4' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '28' | '32' | '40' | '44' | '48' | '56' | '64' | '80' | '96' (default: '16')
+ */
+import { LitElement } from 'lit';
+type Size = '2' | '4' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '28' | '32' | '40' | '44' | '48' | '56' | '64' | '80' | '96' | 'flexible';
+declare const NLDDSpacerCell_base: typeof LitElement & (new (...args: any[]) => LitElement & {
+    hideBelow?: string;
+    hideAbove?: string;
+});
+export declare class NLDDSpacerCell extends NLDDSpacerCell_base {
+    static styles: import("lit").CSSResult;
+    size: Size;
+    render(): null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-spacer-cell': NLDDSpacerCell;
+    }
+}
+export {};
+//# sourceMappingURL=spacer-cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacer-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/spacer-cell/spacer-cell.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,UAAU,CAAC;;;;;AAEjJ,qBACa,cAAe,SAAQ,mBAA2B;IAC9D,OAAgB,MAAM,0BAAoB;IAG1C,IAAI,EAAE,IAAI,CAAQ;IAET,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD"}

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

@@ -0,0 +1,36 @@
+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 Spacer Cell Component (Lit + TypeScript)
+ *
+ * A cell component that provides fixed horizontal spacing within list items.
+ *
+ * @element nldd-spacer-cell
+ * @attr {string} size - Spacer size in pixels: '2' | '4' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '28' | '32' | '40' | '44' | '48' | '56' | '64' | '80' | '96' (default: '16')
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { spacerCellStyles } from './spacer-cell.styles.js';
+import { VisibilityMixin } from '../../../../utilities/visibility-mixin.js';
+let NLDDSpacerCell = class NLDDSpacerCell extends VisibilityMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.size = '16';
+    }
+    render() {
+        return null;
+    }
+};
+NLDDSpacerCell.styles = spacerCellStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDSpacerCell.prototype, "size", void 0);
+NLDDSpacerCell = __decorate([
+    customElement('nldd-spacer-cell')
+], NLDDSpacerCell);
+export { NLDDSpacerCell };
+//# sourceMappingURL=spacer-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacer-cell.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/spacer-cell/spacer-cell.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAKrE,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,eAAe,CAAC,UAAU,CAAC;IAAxD;;QAIN,SAAI,GAAS,IAAI,CAAC;IAKnB,CAAC;IAHS,MAAM;QACd,OAAO,IAAI,CAAC;IACb,CAAC;;AAPe,qBAAM,GAAG,gBAAgB,AAAnB,CAAoB;AAG1C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACxB;AAJN,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAS1B"}

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

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

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

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

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

@@ -0,0 +1,47 @@
+import { css } from 'lit';
+export const spacerCellStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: block;
+		flex-shrink: 0;
+		flex-grow: 0;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # 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="16"]),
+	:host(:not([size])) { width: var(--primitives-space-16); }
+
+	: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="flexible"]) {
+		flex-grow: 1;
+		width: auto;
+	}
+`;
+//# sourceMappingURL=spacer-cell.styles.js.map

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

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

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

@@ -0,0 +1 @@
+//# sourceMappingURL=spacer-cell.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacer-cell.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/spacer-cell/spacer-cell.template.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=spacer-cell.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacer-cell.template.js","sourceRoot":"","sources":["../../../../../src/components/lists-and-menus/cells/spacer-cell/spacer-cell.template.ts"],"names":[],"mappings":""}