@nldd/design-system 0.8.37

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

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

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

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

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

@@ -0,0 +1,65 @@
+/**
+ * Nederlandse Digitale Dienst Bar Split View Component (Lit + TypeScript)
+ *
+ * A vertical split view with a main area and an unlimited number of bar panels.
+ * Each child determines its order per breakpoint via sm-order, md-order, and lg-order.
+ * Children without order attributes are sorted by DOM order.
+ *
+ * On sm viewports, bars are absolutely positioned over the main area:
+ * bars before main (based on order) stack from top to bottom,
+ * bars after main stack from bottom to top. On md and lg, all panels
+ * are in normal flow with a divider between each adjacent pair.
+ *
+ * CSS custom properties on the host for consumers like nldd-page:
+ *   --context-bar-split-view-top-bars-height
+ *   --context-bar-split-view-bottom-bars-height
+ *
+ * ## Slot names
+ * Give each bar a unique slot name (e.g. slot="toolbar", slot="status-bar").
+ * Use slot="bar-1", slot="bar-2" if no meaningful name applies.
+ * The main panel always uses slot="main".
+ *
+ * ## Background color
+ * Sets --context-parent-background-color, which cascades to all descendants
+ * including nldd-page and the fade overlays.
+ *
+ * @element nldd-bar-split-view
+ *
+ * @attr {'inherit'|'default'|'tinted'} background  - Background color variant (default: inherit)
+ *
+ * Responsive visibility per child (direct children of nldd-bar-split-view):
+ * @attr {'sm'|'md'|'lg'} above - Show this panel from this breakpoint and larger
+ * @attr {'sm'|'md'|'lg'} below - Show this panel up to and including this breakpoint
+ * @attr {'sm'|'md'|'lg'} only  - Show this panel only at this breakpoint
+ *
+ * @slot main  - Central panel for primary content
+ * @slot *     - Any other unique slot name creates a bar panel
+ */
+import { LitElement } from 'lit';
+export type Breakpoint = 'sm' | 'md' | 'lg';
+type BreakpointOrUnmeasured = Breakpoint | null;
+export declare class NLDDBarSplitView extends LitElement {
+    static styles: import("lit").CSSResult;
+    background: 'inherit' | 'default' | 'tinted';
+    _currentBreakpoint: BreakpointOrUnmeasured;
+    _smTopBars: Set<Element>;
+    _smOffsets: Map<Element, number>;
+    private _observer;
+    private _resizeObserver;
+    private _childResizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _getBreakpoint;
+    private _isChildVisible;
+    _getSortedChildren(): Element[];
+    private _observeChildren;
+    private _updateLayout;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-bar-split-view': NLDDBarSplitView;
+    }
+}
+export {};
+//# sourceMappingURL=bar-split-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar-split-view.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AASjC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,KAAK,sBAAsB,GAAG,UAAU,GAAG,IAAI,CAAC;AAEhD,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAsB;IAG5C,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAa;IAMzD,kBAAkB,EAAE,sBAAsB,CAAQ;IAKlD,UAAU,eAAsB;IAMhC,UAAU,uBAA8B;IAExC,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,oBAAoB,CAA+B;IAElD,iBAAiB;IA0BjB,oBAAoB;IAU7B,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAkBvB,kBAAkB,IAAI,OAAO,EAAE;IAmB/B,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,aAAa;IAgDZ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,gBAAgB,CAAC;KACxC;CACD"}

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

@@ -0,0 +1,203 @@
+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 Bar Split View Component (Lit + TypeScript)
+ *
+ * A vertical split view with a main area and an unlimited number of bar panels.
+ * Each child determines its order per breakpoint via sm-order, md-order, and lg-order.
+ * Children without order attributes are sorted by DOM order.
+ *
+ * On sm viewports, bars are absolutely positioned over the main area:
+ * bars before main (based on order) stack from top to bottom,
+ * bars after main stack from bottom to top. On md and lg, all panels
+ * are in normal flow with a divider between each adjacent pair.
+ *
+ * CSS custom properties on the host for consumers like nldd-page:
+ *   --context-bar-split-view-top-bars-height
+ *   --context-bar-split-view-bottom-bars-height
+ *
+ * ## Slot names
+ * Give each bar a unique slot name (e.g. slot="toolbar", slot="status-bar").
+ * Use slot="bar-1", slot="bar-2" if no meaningful name applies.
+ * The main panel always uses slot="main".
+ *
+ * ## Background color
+ * Sets --context-parent-background-color, which cascades to all descendants
+ * including nldd-page and the fade overlays.
+ *
+ * @element nldd-bar-split-view
+ *
+ * @attr {'inherit'|'default'|'tinted'} background  - Background color variant (default: inherit)
+ *
+ * Responsive visibility per child (direct children of nldd-bar-split-view):
+ * @attr {'sm'|'md'|'lg'} above - Show this panel from this breakpoint and larger
+ * @attr {'sm'|'md'|'lg'} below - Show this panel up to and including this breakpoint
+ * @attr {'sm'|'md'|'lg'} only  - Show this panel only at this breakpoint
+ *
+ * @slot main  - Central panel for primary content
+ * @slot *     - Any other unique slot name creates a bar panel
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { barSplitViewStyles } from './bar-split-view.styles.js';
+import { barSplitViewTemplate } from './bar-split-view.template.js';
+import { breakpoints } from '../../../../assets/styles/breakpoints.js';
+const smMaxPx = parseInt(breakpoints.smMax);
+const mdMaxPx = parseInt(breakpoints.mdMax);
+let NLDDBarSplitView = class NLDDBarSplitView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.background = 'inherit';
+        // null until connectedCallback measures the viewport. Before measurement the
+        // template falls back to DOM order with dividers — no breakpoint-specific
+        // sorting or mobile overlay behaviour is applied.
+        this._currentBreakpoint = null;
+        // Bars that sit above main in the sm sort order. Used as a membership test in
+        // the template: bars not in this Set are implicitly bottom bars. Only populated
+        // on sm viewports — on md/lg bars are in normal flow and need no offset.
+        this._smTopBars = new Set();
+        // Computed top or bottom pixel offset for every bar on sm viewports. Holds both
+        // top-bar and bottom-bar values in the same Map — the template uses _smTopBars
+        // to know which CSS property (top vs bottom) to apply the value to. Cleared on
+        // md/lg where absolute positioning is not used.
+        this._smOffsets = new Map();
+        this._observer = null;
+        this._resizeObserver = null;
+        this._childResizeObserver = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._currentBreakpoint = this._getBreakpoint(this.getBoundingClientRect().width);
+        this._observer = new MutationObserver(() => {
+            this._observeChildren();
+            this._updateLayout();
+            this.requestUpdate();
+        });
+        this._observer.observe(this, { childList: true, attributes: true, attributeFilter: ['above', 'below', 'only', 'sm-order', 'md-order', 'lg-order'], subtree: false });
+        this._resizeObserver = new ResizeObserver(() => {
+            const bp = this._getBreakpoint(this.getBoundingClientRect().width);
+            if (bp !== this._currentBreakpoint) {
+                this._currentBreakpoint = bp;
+                this.requestUpdate();
+            }
+            this._updateLayout();
+        });
+        this._resizeObserver.observe(this);
+        this._childResizeObserver = new ResizeObserver(() => this._updateLayout());
+        this._observeChildren();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._observer?.disconnect();
+        this._observer = null;
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+        this._childResizeObserver?.disconnect();
+        this._childResizeObserver = null;
+    }
+    _getBreakpoint(width) {
+        if (width <= smMaxPx)
+            return 'sm';
+        if (width <= mdMaxPx)
+            return 'md';
+        return 'lg';
+    }
+    _isChildVisible(el) {
+        if (this._currentBreakpoint === null)
+            return true;
+        const bp = this._currentBreakpoint;
+        const order = ['sm', 'md', 'lg'];
+        const bpIndex = order.indexOf(bp);
+        const only = el.getAttribute('only');
+        if (only)
+            return bp === only;
+        const above = el.getAttribute('above');
+        if (above)
+            return bpIndex >= order.indexOf(above);
+        const below = el.getAttribute('below');
+        if (below)
+            return bpIndex <= order.indexOf(below);
+        return true;
+    }
+    _getSortedChildren() {
+        const all = Array.from(this.children).filter(el => {
+            if (!el.slot) {
+                if (import.meta.env?.DEV) {
+                    console.warn('<nldd-bar-split-view>: every child must have a slot attribute (e.g. slot="toolbar", slot="status-bar", or slot="bar-1" if no meaningful name applies). Child without slot attribute is ignored:', el);
+                }
+                return false;
+            }
+            return this._isChildVisible(el);
+        });
+        if (this._currentBreakpoint === null)
+            return all;
+        const attr = `${this._currentBreakpoint}-order`;
+        return [...all].sort((a, b) => {
+            const aVal = a.hasAttribute(attr) ? parseInt(a.getAttribute(attr)) : all.indexOf(a);
+            const bVal = b.hasAttribute(attr) ? parseInt(b.getAttribute(attr)) : all.indexOf(b);
+            return aVal - bVal;
+        });
+    }
+    _observeChildren() {
+        this._childResizeObserver?.disconnect();
+        for (const child of Array.from(this.children)) {
+            this._childResizeObserver?.observe(child);
+        }
+    }
+    _updateLayout() {
+        const width = this.getBoundingClientRect().width;
+        if (width > smMaxPx) {
+            this.style.removeProperty('--context-bar-split-view-top-bars-height');
+            this.style.removeProperty('--context-bar-split-view-bottom-bars-height');
+            this._smTopBars = new Set();
+            this._smOffsets = new Map();
+            return;
+        }
+        const sorted = this._getSortedChildren();
+        const mainIndex = sorted.findIndex(el => el.slot === 'main');
+        // Bars before main stack downward from the top; bars after main stack upward from the bottom
+        const topBars = mainIndex > 0 ? sorted.slice(0, mainIndex) : [];
+        const bottomBars = mainIndex >= 0 ? sorted.slice(mainIndex + 1) : sorted;
+        this._smTopBars = new Set(topBars);
+        const newOffsets = new Map();
+        let topOffset = 0;
+        for (const el of topBars) {
+            newOffsets.set(el, topOffset);
+            topOffset += el.getBoundingClientRect().height;
+        }
+        let bottomOffset = 0;
+        for (const el of [...bottomBars].reverse()) {
+            newOffsets.set(el, bottomOffset);
+            bottomOffset += el.getBoundingClientRect().height;
+        }
+        this._smOffsets = newOffsets;
+        const prevTop = this.style.getPropertyValue('--context-bar-split-view-top-bars-height');
+        const prevBottom = this.style.getPropertyValue('--context-bar-split-view-bottom-bars-height');
+        const nextTop = `${topOffset}px`;
+        const nextBottom = `${bottomOffset}px`;
+        if (prevTop !== nextTop || prevBottom !== nextBottom) {
+            this.style.setProperty('--context-bar-split-view-top-bars-height', nextTop);
+            this.style.setProperty('--context-bar-split-view-bottom-bars-height', nextBottom);
+            this.requestUpdate();
+        }
+    }
+    render() {
+        return barSplitViewTemplate(this);
+    }
+};
+NLDDBarSplitView.styles = barSplitViewStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDBarSplitView.prototype, "background", void 0);
+__decorate([
+    state()
+], NLDDBarSplitView.prototype, "_currentBreakpoint", void 0);
+NLDDBarSplitView = __decorate([
+    customElement('nldd-bar-split-view')
+], NLDDBarSplitView);
+export { NLDDBarSplitView };
+//# sourceMappingURL=bar-split-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar-split-view.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.ts"],"names":[],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1,128 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../../assets/styles/breakpoints.js';
+const smMax = unsafeCSS(breakpoints.smMax);
+export const barSplitViewStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: 100%;
+		background-color: var(--_background-color);
+
+		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
+		--context-bar-split-view-top-bars-height: 0px;
+		--context-bar-split-view-bottom-bars-height: 0px;
+	}
+
+	: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 */
+
+	.bar-split-view {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		min-width: 0;
+		position: relative;
+	}
+
+
+	/* # Bar */
+
+	.bar-split-view__bar {
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		min-width: 0;
+		overflow: hidden;
+		container-type: inline-size;
+		container-name: layout-area;
+
+		@media (max-width: ${smMax}) {
+			position: absolute;
+			left: 0;
+			right: 0;
+			z-index: 2;
+		}
+	}
+
+
+	/* # Divider */
+
+	.bar-split-view__divider {
+		flex-shrink: 0;
+	}
+
+
+	/* # Main */
+
+	.bar-split-view__main {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		min-width: 0;
+		overflow: hidden;
+		container-type: inline-size;
+		container-name: layout-area;
+
+		@media (max-width: ${smMax}) {
+			&::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				z-index: 1;
+				height: calc(var(--context-bar-split-view-top-bars-height) + var(--primitives-space-32));
+				background: linear-gradient(
+					to bottom,
+					color-mix(in srgb, var(--_background-color) 95%, transparent) var(--context-bar-split-view-top-bars-height),
+					transparent);
+				pointer-events: none;
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				z-index: 1;
+				height: calc(var(--context-bar-split-view-bottom-bars-height) + var(--primitives-space-32));
+				background: linear-gradient(
+					to top,
+					color-mix(in srgb, var(--_background-color) 95%, transparent) var(--context-bar-split-view-bottom-bars-height),
+					transparent);
+				pointer-events: none;
+			}
+		}
+	}
+
+
+	/* # Slotted */
+
+	::slotted(*) {
+		flex: 1;
+		min-height: 0;
+	}
+`;
+//# sourceMappingURL=bar-split-view.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar-split-view.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.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,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuDd,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4BL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC3B,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar-split-view.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAW,MAAM,KAAK,CAAC;AAGpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,6CAA6C,CAAC;AAErD,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,gBAAgB,GAAG,cAAc,CAoChF"}

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

@@ -0,0 +1,39 @@
+import { html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import '../split-view-divider/split-view-divider.js';
+export function barSplitViewTemplate(component) {
+    const sorted = component._getSortedChildren();
+    const isSm = component._currentBreakpoint === 'sm';
+    return html `
+		<div class="bar-split-view">
+			${sorted.map((el, index) => {
+        const isMain = el.slot === 'main';
+        const isLast = index === sorted.length - 1;
+        // Inline position is only applied to bars on sm viewports
+        const barStyles = !isMain && isSm
+            ? component._smTopBars.has(el)
+                ? { top: `${component._smOffsets.get(el) ?? 0}px` }
+                : { bottom: `${component._smOffsets.get(el) ?? 0}px` }
+            : {};
+        return html `
+					<div class=${classMap({ 'bar-split-view__main': isMain, 'bar-split-view__bar': !isMain })}
+						style=${styleMap(barStyles)}>
+						<slot name=${el.slot}></slot>
+					</div>
+					${!isSm && !isLast ? html `
+						<div class="bar-split-view__divider">
+							<nldd-split-view-divider orientation="horizontal"></nldd-split-view-divider>
+						</div>
+					` : nothing}
+				`;
+    })}
+			${!sorted.some(el => el.slot === 'main') ? html `
+				<div class="bar-split-view__main">
+					<slot name="main"></slot>
+				</div>
+			` : nothing}
+		</div>
+	`;
+}
+//# sourceMappingURL=bar-split-view.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar-split-view.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,6CAA6C,CAAC;AAErD,MAAM,UAAU,oBAAoB,CAAC,SAA2B;IAC/D,MAAM,MAAM,GAAG,SAAS,CAAC,kBAAkB,EAAE,CAAC;IAC9C,MAAM,IAAI,GAAG,SAAS,CAAC,kBAAkB,KAAK,IAAI,CAAC;IAEnD,OAAO,IAAI,CAAA;;KAEP,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;QAC1B,MAAM,MAAM,GAAG,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC;QAClC,MAAM,MAAM,GAAG,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAE3C,0DAA0D;QAC1D,MAAM,SAAS,GAAG,CAAC,MAAM,IAAI,IAAI;YAChC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC7B,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;gBACnD,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;YACvD,CAAC,CAAC,EAAE,CAAC;QAEN,OAAO,IAAI,CAAA;kBACG,QAAQ,CAAC,EAAE,sBAAsB,EAAE,MAAM,EAAE,qBAAqB,EAAE,CAAC,MAAM,EAAE,CAAC;cAChF,QAAQ,CAAC,SAAS,CAAC;mBACd,EAAE,CAAC,IAAI;;OAEnB,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;;MAIxB,CAAC,CAAC,CAAC,OAAO;KACX,CAAC;IACH,CAAC,CAAC;KACA,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI9C,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,86 @@
+/**
+ * Nederlandse Digitale Dienst Navigation Split View Component (Lit + TypeScript)
+ *
+ * A four-column layout with a sidebar, secondary sidebar, main content area, and inspector.
+ * The sidebars show navigation or lists, the main area shows primary content,
+ * and the inspector shows additional details or properties of the selection.
+ * Panes are shown automatically when content is slotted into them.
+ *
+ * @element nldd-navigation-split-view
+ *
+ * Use <code>nldd-split-view-pane</code> as direct children for automatic
+ * back button handling.
+ *
+ * @attr {boolean} inspector-auto-hidden       - Inspector hidden to free up space for other panes (read-only, set by the split view)
+ * @attr {boolean} inspector-as-sheet          - Always show the inspector as a sheet regardless of available space
+ * @attr {boolean} sidebar-as-sheet            - Always show the sidebar as a sheet, keeping main visible at full width
+ * @attr {string}  inspector-accessible-label  - Accessible name for the inspector sheet dialog (default: 'Details')
+ * @attr {string}  sidebar-accessible-label    - Accessible name for the sidebar sheet dialog (default: 'Navigatie')
+ *
+ * @slot sidebar           - Left pane for primary navigation
+ * @slot secondary-sidebar - Second pane for secondary navigation (shown when slotted)
+ * @slot main              - Center pane for primary content
+ * @slot inspector         - Right pane for details or properties
+ *
+ * @method showInspectorSheet() - Opens the inspector as a sheet (async); only has effect when inspector-auto-hidden or inspector-as-sheet is active
+ * @method hideInspectorSheet() - Closes the inspector sheet
+ * @method showSidebarSheet()   - Opens the sidebar as a sheet (async); only has effect when sidebar-as-sheet is active
+ * @method hideSidebarSheet()   - Closes the sidebar sheet
+ */
+import { LitElement } from 'lit';
+export declare class NLDDNavigationSplitView extends LitElement {
+    static styles: import("lit").CSSResult;
+    inspectorAutoHidden: boolean;
+    inspectorAsSheet: boolean;
+    sidebarAsSheet: boolean;
+    /** Accessible name for the inspector sheet dialog. */
+    inspectorAccessibleLabel: string;
+    /** Accessible name for the sidebar sheet dialog. */
+    sidebarAccessibleLabel: string;
+    _showSidebar: boolean;
+    _showSecondarySidebar: boolean;
+    _showMain: boolean;
+    _showInspector: boolean;
+    private _mode;
+    private _resizeObserver;
+    private _paneObserver;
+    private _hostObserver;
+    private _paneMinWidths;
+    private get _inspectorSheet();
+    private get _sidebarSheet();
+    private get _hasSidebar();
+    /** @internal */
+    get _hasSecondarySidebar(): boolean;
+    private get _hasInspector();
+    _paneHasContent(slot: string): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _observePanes;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    _updateLayout(): void;
+    private _updatePaneBackButtons;
+    /** Opens the sidebar as a sheet. Awaitable — resolves once the dialog is open. */
+    showSidebarSheet(): Promise<void>;
+    hideSidebarSheet(): void;
+    private _manageSidebarSheetFocus;
+    _handleSidebarSheetClick(e: MouseEvent): void;
+    _handleSidebarSheetCancel(e: Event): void;
+    /** Opens the inspector as a sheet. Awaitable — resolves once the dialog is open. */
+    showInspectorSheet(): Promise<void>;
+    hideInspectorSheet(): void;
+    private _manageInspectorSheetFocus;
+    _handleInspectorSheetClick(e: MouseEvent): void;
+    _handleInspectorSheetCancel(e: Event): void;
+    private _manageFocusForSlot;
+    private _handleDismiss;
+    private _hideSheet;
+    private _closeSheetImmediate;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-navigation-split-view': NLDDNavigationSplitView;
+    }
+}
+//# sourceMappingURL=navigation-split-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-split-view.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/navigation-split-view/navigation-split-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,qBACa,uBAAwB,SAAQ,UAAU;IACtD,OAAgB,MAAM,0BAA6B;IAGnD,mBAAmB,UAAS;IAG5B,gBAAgB,UAAS;IAGzB,cAAc,UAAS;IAEvB,sDAAsD;IAEtD,wBAAwB,SAAa;IAErC,oDAAoD;IAEpD,sBAAsB,SAAe;IAIrC,YAAY,UAAS;IAGrB,qBAAqB,UAAS;IAG9B,SAAS,UAAQ;IAGjB,cAAc,UAAQ;IAEtB,OAAO,CAAC,KAAK,CAAyD;IACtE,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,aAAa,CAAiC;IACtD,OAAO,CAAC,aAAa,CAAiC;IAGtD,OAAO,CAAC,cAAc,CAAsE;IAE5F,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,gBAAgB;IAChB,IAAI,oBAAoB,IAAI,OAAO,CAElC;IAED,OAAO,KAAK,aAAa,GAExB;IAED,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAI7B,iBAAiB;IAejB,oBAAoB;IAW7B,OAAO,CAAC,aAAa;IAUZ,YAAY;IAaZ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU9C,aAAa;IA0Eb,OAAO,CAAC,sBAAsB;IA2C9B,kFAAkF;IAC5E,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;IAOvC,gBAAgB;IAIhB,OAAO,CAAC,wBAAwB;IAUhC,wBAAwB,CAAC,CAAC,EAAE,UAAU;IAItC,yBAAyB,CAAC,CAAC,EAAE,KAAK;IASlC,oFAAoF;IAC9E,kBAAkB,IAAI,OAAO,CAAC,IAAI,CAAC;IAOzC,kBAAkB;IAIlB,OAAO,CAAC,0BAA0B;IAMlC,0BAA0B,CAAC,CAAC,EAAE,UAAU;IAIxC,2BAA2B,CAAC,CAAC,EAAE,KAAK;IASpC,OAAO,CAAC,mBAAmB;IAc3B,OAAO,CAAC,cAAc,CAQpB;IAEF,OAAO,CAAC,UAAU;IAwBlB,OAAO,CAAC,oBAAoB;IAMnB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,4BAA4B,EAAE,uBAAuB,CAAC;KACtD;CACD"}