@nldd/design-system 0.8.37

package/dist/components/layout/split-views/split-view-divider/split-view-divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-divider.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-divider/split-view-divider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,KAAK,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;AAE7C,qBACa,oBAAqB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAA0B;IAGhD,WAAW,EAAE,WAAW,CAAc;IAGtC,aAAa,UAAS;IAEb,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,oBAAoB,CAAC;KAChD;CACD"}

package/dist/components/layout/split-views/split-view-divider/split-view-divider.js

@@ -0,0 +1,45 @@
+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 Split View Divider Component (Lit + TypeScript)
+ *
+ * A divider line between panels in a split view.
+ * The divider runs from edge to edge in the direction perpendicular to
+ * the orientation. An optional drag handle indicates that the divider
+ * is draggable (future functionality).
+ *
+ * @element nldd-split-view-divider
+ *
+ * @attr {string} orientation - Orientation: 'vertical' | 'horizontal'
+ * @attr {boolean} has-drag-handle - Show a drag handle
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { splitViewDividerStyles } from './split-view-divider.styles.js';
+import { splitViewDividerTemplate } from './split-view-divider.template.js';
+let NLDDSplitViewDivider = class NLDDSplitViewDivider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.orientation = 'vertical';
+        this.hasDragHandle = false;
+    }
+    render() {
+        return splitViewDividerTemplate(this);
+    }
+};
+NLDDSplitViewDivider.styles = splitViewDividerStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDSplitViewDivider.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'has-drag-handle' })
+], NLDDSplitViewDivider.prototype, "hasDragHandle", void 0);
+NLDDSplitViewDivider = __decorate([
+    customElement('nldd-split-view-divider')
+], NLDDSplitViewDivider);
+export { NLDDSplitViewDivider };
+//# sourceMappingURL=split-view-divider.js.map

package/dist/components/layout/split-views/split-view-divider/split-view-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-divider.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-divider/split-view-divider.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAKrE,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAIN,gBAAW,GAAgB,UAAU,CAAC;QAGtC,kBAAa,GAAG,KAAK,CAAC;IAKvB,CAAC;IAHS,MAAM;QACd,OAAO,wBAAwB,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;;AAVe,2BAAM,GAAG,sBAAsB,AAAzB,CAA0B;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACJ;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;2DACnD;AAPV,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAYhC"}

package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.d.ts

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

package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-divider.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-divider/split-view-divider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBAgFlC,CAAC"}

package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js

@@ -0,0 +1,83 @@
+import { css } from 'lit';
+export const splitViewDividerStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: flex;
+		flex-shrink: 0;
+		align-self: stretch;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.split-view-divider {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		background-color: var(--semantics-dividers-color);
+	}
+
+
+	/* # Drag handle */
+
+	.split-view-divider__drag-handle {
+		background-color: var(--semantics-content-secondary-color);
+		border-radius: 9999px;
+		position: absolute;
+	}
+
+
+	/* # Vertical */
+
+	:host([orientation='vertical']) .split-view-divider {
+		width: var(--semantics-dividers-thickness);
+		height: 100%;
+	}
+
+	:host([orientation='vertical'][has-drag-handle]) .split-view-divider {
+		width: 12px;
+	}
+
+	:host([orientation='vertical']) .split-view-divider__drag-handle {
+		width: 4px;
+		height: 40px;
+	}
+
+
+	/* # Horizontal */
+
+	:host([orientation='horizontal']) .split-view-divider,
+	:host(:not([orientation])) .split-view-divider {
+		width: 100%;
+		height: var(--semantics-dividers-thickness);
+	}
+
+	:host([orientation='horizontal'][has-drag-handle]) .split-view-divider,
+	:host(:not([orientation])[has-drag-handle]) .split-view-divider {
+		height: 12px;
+	}
+
+	:host([orientation='horizontal']) .split-view-divider__drag-handle,
+	:host(:not([orientation])) .split-view-divider__drag-handle {
+		width: 40px;
+		height: 4px;
+	}
+
+
+	/* # High contrast */
+
+	@media (forced-colors: active) {
+		.split-view-divider {
+			background-color: CanvasText;
+		}
+	}
+`;
+//# sourceMappingURL=split-view-divider.styles.js.map

package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-divider.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-divider/split-view-divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFxC,CAAC"}

package/dist/components/layout/split-views/split-view-divider/split-view-divider.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import type { NLDDSplitViewDivider } from './split-view-divider.js';
+export declare function splitViewDividerTemplate(component: NLDDSplitViewDivider): TemplateResult;
+//# sourceMappingURL=split-view-divider.template.d.ts.map

package/dist/components/layout/split-views/split-view-divider/split-view-divider.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-divider.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-divider/split-view-divider.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAW,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,oBAAoB,GAAG,cAAc,CAYxF"}

package/dist/components/layout/split-views/split-view-divider/split-view-divider.template.js

@@ -0,0 +1,15 @@
+import { html, nothing } from 'lit';
+export function splitViewDividerTemplate(component) {
+    return html `
+		<div
+			class="split-view-divider"
+			role="separator"
+			aria-orientation=${component.orientation}
+		>
+			${component.hasDragHandle
+        ? html `<div class="split-view-divider__drag-handle"></div>`
+        : nothing}
+		</div>
+	`;
+}
+//# sourceMappingURL=split-view-divider.template.js.map

package/dist/components/layout/split-views/split-view-divider/split-view-divider.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-divider.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-divider/split-view-divider.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,wBAAwB,CAAC,SAA+B;IACvE,OAAO,IAAI,CAAA;;;;sBAIU,SAAS,CAAC,WAAW;;KAEtC,SAAS,CAAC,aAAa;QACxB,CAAC,CAAC,IAAI,CAAA,qDAAqD;QAC3D,CAAC,CAAC,OAAO;;EAEX,CAAC;AACH,CAAC"}

package/dist/components/layout/split-views/split-view-pane/split-view-pane.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Nederlandse Digitale Dienst Split View Pane Component (Lit + TypeScript)
+ *
+ * A simple pane container for use inside split views.
+ * The split view automatically sets context: whether a back button should be shown.
+ *
+ * The consumer sets `has-content` to indicate the pane has content.
+ * The consumer sets `back-text` on the `nldd-top-title-bar` inside the pane.
+ * The split view sets `hide-back` when the back button is not applicable.
+ * The pane automatically hides the back button via CSS when `hide-back` is active.
+ *
+ * ## Background color
+ * The pane sets `--context-parent-background-color` which cascades down to all descendants.
+ * Set `background="tinted"` on a pane to give it a tinted background independently of sibling panes.
+ * Descendants such as `nldd-page` read `--context-parent-background-color` automatically.
+ *
+ * @element nldd-split-view-pane
+ *
+ * @attr {boolean} has-content - The pane has content (default: false)
+ * @attr {boolean} hide-back   - Hide the back button (set automatically by the split view)
+ * @attr {'inherit'|'default'|'tinted'} background      - Use a tinted background color (cascades to descendants)
+ *
+ * @slot - Pane content
+ */
+import { LitElement } from 'lit';
+export declare class NLDDSplitViewPane extends LitElement {
+    static styles: import("lit").CSSResult;
+    hasContent: boolean;
+    hideBack: boolean;
+    background: 'inherit' | 'default' | 'tinted';
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-split-view-pane': NLDDSplitViewPane;
+    }
+}
+//# sourceMappingURL=split-view-pane.d.ts.map

package/dist/components/layout/split-views/split-view-pane/split-view-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-pane.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,iBAAkB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAAuB;IAG7C,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAGjB,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAa;IAEhD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,iBAAiB,CAAC;KAC1C;CACD"}

package/dist/components/layout/split-views/split-view-pane/split-view-pane.js

@@ -0,0 +1,60 @@
+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 Split View Pane Component (Lit + TypeScript)
+ *
+ * A simple pane container for use inside split views.
+ * The split view automatically sets context: whether a back button should be shown.
+ *
+ * The consumer sets `has-content` to indicate the pane has content.
+ * The consumer sets `back-text` on the `nldd-top-title-bar` inside the pane.
+ * The split view sets `hide-back` when the back button is not applicable.
+ * The pane automatically hides the back button via CSS when `hide-back` is active.
+ *
+ * ## Background color
+ * The pane sets `--context-parent-background-color` which cascades down to all descendants.
+ * Set `background="tinted"` on a pane to give it a tinted background independently of sibling panes.
+ * Descendants such as `nldd-page` read `--context-parent-background-color` automatically.
+ *
+ * @element nldd-split-view-pane
+ *
+ * @attr {boolean} has-content - The pane has content (default: false)
+ * @attr {boolean} hide-back   - Hide the back button (set automatically by the split view)
+ * @attr {'inherit'|'default'|'tinted'} background      - Use a tinted background color (cascades to descendants)
+ *
+ * @slot - Pane content
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { splitViewPaneStyles } from './split-view-pane.styles.js';
+import { splitViewPaneTemplate } from './split-view-pane.template.js';
+let NLDDSplitViewPane = class NLDDSplitViewPane extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hasContent = false;
+        this.hideBack = false;
+        this.background = 'inherit';
+    }
+    render() {
+        return splitViewPaneTemplate(this);
+    }
+};
+NLDDSplitViewPane.styles = splitViewPaneStyles;
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'has-content' })
+], NLDDSplitViewPane.prototype, "hasContent", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-back' })
+], NLDDSplitViewPane.prototype, "hideBack", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDSplitViewPane.prototype, "background", void 0);
+NLDDSplitViewPane = __decorate([
+    customElement('nldd-split-view-pane')
+], NLDDSplitViewPane);
+export { NLDDSplitViewPane };
+//# sourceMappingURL=split-view-pane.js.map

package/dist/components/layout/split-views/split-view-pane/split-view-pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-pane.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAG/D,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAIN,eAAU,GAAG,KAAK,CAAC;QAGnB,aAAQ,GAAG,KAAK,CAAC;QAGjB,eAAU,GAAqC,SAAS,CAAC;IAK1D,CAAC;IAHS,MAAM;QACd,OAAO,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;;AAbe,wBAAM,GAAG,mBAAmB,AAAtB,CAAuB;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;qDAClD;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;mDAClD;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACe;AAV7C,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAe7B"}

package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.d.ts

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

package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-pane.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,mBAAmB,yBAmD/B,CAAC"}

package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js

@@ -0,0 +1,56 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../../assets/styles/breakpoints.js';
+const mdMin = unsafeCSS(breakpoints.mdMin);
+export const splitViewPaneStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+
+		display: flex;
+		width: 100%;
+		height: 100%;
+
+		@media (min-width: ${mdMin}) {
+			background-color: var(--_background-color);
+		}
+	}
+
+	:host([background="default"]) {
+		--context-parent-background-color: var(--semantics-surfaces-background-color);
+		--_background-color: var(--context-parent-background-color);
+	}
+
+	:host([background="tinted"]) {
+		--context-parent-background-color: var(--semantics-surfaces-tinted-background-color);
+		--_background-color: var(--context-parent-background-color);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([hide-back]) {
+		--context-back-button-display: none;
+	}
+
+
+	/* # Block */
+
+	.split-view-pane {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	::slotted(*) {
+		flex: 1;
+		min-height: 0;
+	}
+`;
+//# sourceMappingURL=split-view-pane.styles.js.map

package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-pane.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;uBAYf,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC3B,CAAC"}

package/dist/components/layout/split-views/split-view-pane/split-view-pane.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import type { NLDDSplitViewPane } from './split-view-pane.js';
+export declare function splitViewPaneTemplate(_component: NLDDSplitViewPane): TemplateResult;
+//# sourceMappingURL=split-view-pane.template.d.ts.map

package/dist/components/layout/split-views/split-view-pane/split-view-pane.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-pane.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,iBAAiB,GAAG,cAAc,CAMnF"}

package/dist/components/layout/split-views/split-view-pane/split-view-pane.template.js

@@ -0,0 +1,9 @@
+import { html } from 'lit';
+export function splitViewPaneTemplate(_component) {
+    return html `
+		<div class="split-view-pane">
+			<slot></slot>
+		</div>
+	`;
+}
+//# sourceMappingURL=split-view-pane.template.js.map

package/dist/components/layout/split-views/split-view-pane/split-view-pane.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-view-pane.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/split-view-pane/split-view-pane.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,qBAAqB,CAAC,UAA6B;IAClE,OAAO,IAAI,CAAA;;;;EAIV,CAAC;AACH,CAAC"}

package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Nederlandse Digitale Dienst Stacked Split View Component (Lit + TypeScript)
+ *
+ * A vertical split view with multiple stacked panes.
+ * The number of panes is set via the `panes` attribute. Each pane
+ * automatically gets a numbered slot: pane-1, pane-2, etc.
+ * Panes that do not fit the available height are automatically hidden.
+ *
+ * @element nldd-stacked-split-view
+ *
+ * @attr {'inherit'|'default'|'tinted'} background - Use a tinted background color (cascades to descendants)
+ * @attr {number} panes - Number of panes (default: 2)
+ *
+ * @slot pane-1 - First pane
+ * @slot pane-2 - Second pane
+ * @slot pane-n - Each subsequent pane based on the `panes` attribute
+ */
+import { LitElement } from 'lit';
+export declare class NLDDStackedSplitView extends LitElement {
+    static styles: import("lit").CSSResult;
+    background: 'inherit' | 'default' | 'tinted';
+    panes: number;
+    _visiblePanes: number;
+    private _paneMinHeight;
+    private _resizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _updateVisiblePanes;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-stacked-split-view': NLDDStackedSplitView;
+    }
+}
+//# sourceMappingURL=stacked-split-view.d.ts.map

package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked-split-view.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/stacked-split-view/stacked-split-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,oBAAqB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAA0B;IAGhD,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAa;IAGzD,KAAK,SAAK;IAGV,aAAa,SAAY;IAGzB,OAAO,CAAC,cAAc,CAAK;IAE3B,OAAO,CAAC,eAAe,CAA+B;IAE7C,iBAAiB;IAMjB,oBAAoB;IAMpB,YAAY;IAMZ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM9C,OAAO,CAAC,mBAAmB;IAOlB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,oBAAoB,CAAC;KAChD;CACD"}

package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.js

@@ -0,0 +1,83 @@
+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 Stacked Split View Component (Lit + TypeScript)
+ *
+ * A vertical split view with multiple stacked panes.
+ * The number of panes is set via the `panes` attribute. Each pane
+ * automatically gets a numbered slot: pane-1, pane-2, etc.
+ * Panes that do not fit the available height are automatically hidden.
+ *
+ * @element nldd-stacked-split-view
+ *
+ * @attr {'inherit'|'default'|'tinted'} background - Use a tinted background color (cascades to descendants)
+ * @attr {number} panes - Number of panes (default: 2)
+ *
+ * @slot pane-1 - First pane
+ * @slot pane-2 - Second pane
+ * @slot pane-n - Each subsequent pane based on the `panes` attribute
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { stackedSplitViewStyles } from './stacked-split-view.styles.js';
+import { stackedSplitViewTemplate } from './stacked-split-view.template.js';
+let NLDDStackedSplitView = class NLDDStackedSplitView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.background = 'inherit';
+        this.panes = 2;
+        this._visiblePanes = Infinity;
+        // Cached pane min-height — read from CSS in firstUpdated
+        this._paneMinHeight = 0;
+        this._resizeObserver = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._resizeObserver = new ResizeObserver(() => this._updateVisiblePanes());
+        this._resizeObserver.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+    }
+    firstUpdated() {
+        // Read pane min-height from CSS after first render — styles are guaranteed applied
+        this._paneMinHeight = parseFloat(getComputedStyle(this).getPropertyValue('--_pane-min-height'));
+        this._updateVisiblePanes();
+    }
+    updated(changed) {
+        if (changed.has('panes')) {
+            this._updateVisiblePanes();
+        }
+    }
+    _updateVisiblePanes() {
+        if (!this._paneMinHeight)
+            return;
+        const height = this.getBoundingClientRect().height;
+        const fitting = Math.floor(height / this._paneMinHeight);
+        this._visiblePanes = Math.min(this.panes, Math.max(1, fitting));
+    }
+    render() {
+        return stackedSplitViewTemplate(this);
+    }
+};
+NLDDStackedSplitView.styles = stackedSplitViewStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDStackedSplitView.prototype, "background", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NLDDStackedSplitView.prototype, "panes", void 0);
+__decorate([
+    state()
+], NLDDStackedSplitView.prototype, "_visiblePanes", void 0);
+NLDDStackedSplitView = __decorate([
+    customElement('nldd-stacked-split-view')
+], NLDDStackedSplitView);
+export { NLDDStackedSplitView };
+//# sourceMappingURL=stacked-split-view.js.map

package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked-split-view.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/stacked-split-view/stacked-split-view.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAIN,eAAU,GAAqC,SAAS,CAAC;QAGzD,UAAK,GAAG,CAAC,CAAC;QAGV,kBAAa,GAAG,QAAQ,CAAC;QAEzB,yDAAyD;QACjD,mBAAc,GAAG,CAAC,CAAC;QAEnB,oBAAe,GAA0B,IAAI,CAAC;IAoCvD,CAAC;IAlCS,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;QAC5E,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IAEQ,oBAAoB;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,eAAe,EAAE,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;IAC7B,CAAC;IAEQ,YAAY;QACpB,mFAAmF;QACnF,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;QAChG,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC5B,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC7C,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC5B,CAAC;IACF,CAAC;IAEO,mBAAmB;QAC1B,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO;QACjC,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QACnD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC;QACzD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IACjE,CAAC;IAEQ,MAAM;QACd,OAAO,wBAAwB,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;;AAjDe,2BAAM,GAAG,sBAAsB,AAAzB,CAA0B;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACe;AAGzD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAChC;AAGV;IADC,KAAK,EAAE;2DACiB;AAVb,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAmDhC"}

package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.d.ts

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

package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked-split-view.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/stacked-split-view/stacked-split-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBAgElC,CAAC"}

package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js

@@ -0,0 +1,67 @@
+import { css } from 'lit';
+export const stackedSplitViewStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: 100%;
+		background-color: var(--_background-color);
+
+		--_pane-min-height: var(--primitives-area-200); /* Pane min-height — read by JS via getComputedStyle in firstUpdated */
+		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+	}
+
+	:host([background="default"]) {
+		--context-parent-background-color: var(--semantics-surfaces-background-color);
+		--_background-color: var(--context-parent-background-color);
+	}
+
+	:host([background="tinted"]) {
+		--context-parent-background-color: var(--semantics-surfaces-tinted-background-color);
+		--_background-color: var(--context-parent-background-color);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.stacked-split-view {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+
+	/* # Pane */
+
+	.stacked-split-view__pane {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: var(--_pane-min-height);
+		min-width: 0;
+		overflow: hidden;
+		container-type: inline-size;
+		container-name: layout-area;
+	}
+
+	.stacked-split-view__pane[hidden] {
+		display: none;
+	}
+
+	::slotted(*) {
+		flex: 1;
+		min-height: 0;
+	}
+`;
+//# sourceMappingURL=stacked-split-view.styles.js.map

package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked-split-view.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/stacked-split-view/stacked-split-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgExC,CAAC"}

package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.template.d.ts

@@ -0,0 +1,5 @@
+import { TemplateResult } from 'lit';
+import type { NLDDStackedSplitView } from './stacked-split-view.js';
+import '../split-view-divider/split-view-divider.js';
+export declare function stackedSplitViewTemplate(component: NLDDStackedSplitView): TemplateResult;
+//# sourceMappingURL=stacked-split-view.template.d.ts.map

package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked-split-view.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/stacked-split-view/stacked-split-view.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAW,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,6CAA6C,CAAC;AAErD,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,oBAAoB,GAAG,cAAc,CAmBxF"}

package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.template.js

@@ -0,0 +1,22 @@
+import { html, nothing } from 'lit';
+import '../split-view-divider/split-view-divider.js';
+export function stackedSplitViewTemplate(component) {
+    // Render slots for all panes but only show the ones that fit
+    const panes = Array.from({ length: component.panes }, (_, i) => i + 1);
+    return html `
+		<div class="stacked-split-view">
+			${panes.map((n, i) => html `
+				${i > 0 && i < component._visiblePanes ? html `
+					<nldd-split-view-divider orientation="horizontal"></nldd-split-view-divider>
+				` : nothing}
+				<div
+					class="stacked-split-view__pane"
+					?hidden=${i >= component._visiblePanes}
+				>
+					<slot name="pane-${n}"></slot>
+				</div>
+			`)}
+		</div>
+	`;
+}
+//# sourceMappingURL=stacked-split-view.template.js.map

package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked-split-view.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/stacked-split-view/stacked-split-view.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpD,OAAO,6CAA6C,CAAC;AAErD,MAAM,UAAU,wBAAwB,CAAC,SAA+B;IACvE,6DAA6D;IAC7D,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAEvE,OAAO,IAAI,CAAA;;KAEP,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;MACvB,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA;;KAE5C,CAAC,CAAC,CAAC,OAAO;;;eAGA,CAAC,IAAI,SAAS,CAAC,aAAa;;wBAEnB,CAAC;;IAErB,CAAC;;EAEH,CAAC;AACH,CAAC"}