@nldd/design-system 0.8.37

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

@@ -0,0 +1,318 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../../assets/styles/breakpoints.js';
+const smMax = unsafeCSS(breakpoints.smMax);
+const lgMin = unsafeCSS(breakpoints.lgMin);
+export const navigationSplitViewStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		background-color: var(--_background-color);
+
+		--_sidebar-min-width: var(--primitives-area-320); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
+		--_secondary-sidebar-min-width: var(--primitives-area-320); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
+		--_main-min-width: var(--primitives-area-480); /* Pane min-width — read by JS via getComputedStyle in firstUpdated */
+		--_inspector-min-width: var(--primitives-area-320); /* Pane min-width — 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);
+	}
+
+
+	/* # Block */
+
+	.navigation-split-view {
+		display: flex;
+		flex-direction: row;
+		flex: 1;
+		min-height: 0;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+
+	/* # Sidebar */
+
+	.navigation-split-view__sidebar-pane {
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		min-height: 0;
+		min-width: var(--_sidebar-min-width);
+		overflow: hidden;
+		container-type: inline-size;
+		container-name: layout-area;
+	}
+
+
+	/* # Secondary sidebar */
+
+	.navigation-split-view__secondary-sidebar-pane {
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		min-height: 0;
+		min-width: var(--_secondary-sidebar-min-width);
+		overflow: hidden;
+		container-type: inline-size;
+		container-name: layout-area;
+	}
+
+
+	/* # Main */
+
+	.navigation-split-view__main-pane {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		min-width: var(--_main-min-width);
+		overflow: hidden;
+		container-type: inline-size;
+		container-name: layout-area;
+	}
+
+
+	/* # Full-stack: single pane fills available space, no minimum */
+
+	:host(.full-stack) .navigation-split-view__sidebar-pane,
+	:host(.full-stack) .navigation-split-view__secondary-sidebar-pane,
+	:host(.full-stack) .navigation-split-view__main-pane {
+		min-width: 0;
+	}
+
+
+	/* # Sidebar — inline pane suppresses dismiss button */
+
+	.navigation-split-view__sidebar-pane,
+	.navigation-split-view__secondary-sidebar-pane {
+		--context-dismiss-button-display: none;
+	}
+
+	.navigation-split-view__inspector-pane {
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		min-height: 0;
+		min-width: var(--_inspector-min-width);
+		overflow: hidden;
+		container-type: inline-size;
+		container-name: layout-area;
+
+		/* Suppress dismiss button — inspector is always dismissable as a sheet, not inline */
+		--context-dismiss-button-display: none;
+	}
+
+
+	/* # Inspector — sheet (dialog) */
+
+	@keyframes navigation-split-view-inspector-slide-in {
+		from { transform: translateX(100%); }
+		to { transform: translateX(0); }
+	}
+
+	@keyframes navigation-split-view-inspector-slide-out {
+		from { transform: translateX(0); }
+		to { transform: translateX(100%); }
+	}
+
+	.navigation-split-view__inspector-sheet {
+		display: flex;
+		flex-direction: column;
+		border: none;
+		padding: 0;
+		margin: 0;
+		background: var(--semantics-surfaces-background-color);
+		box-shadow: var(--semantics-overlays-box-shadow);
+		overflow: hidden;
+		position: fixed;
+		outline: none;
+		inset: var(--semantics-overlays-inset) var(--semantics-overlays-inset) var(--semantics-overlays-inset) auto;
+		width: var(--semantics-sheets-side-md-width);
+		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+		border-radius: var(--semantics-overlays-corner-radius);
+
+		@media (min-width: ${lgMin}) {
+			width: var(--semantics-sheets-side-lg-width);
+		}
+
+		&:focus-visible:not(.is-pointer-focus) {
+			box-shadow: var(--semantics-focus-ring-box-shadow), var(--semantics-overlays-box-shadow);
+			outline: var(--semantics-focus-ring-outline);
+			outline-offset: var(--semantics-focus-ring-outline-offset);
+		}
+
+		&:not([open]) {
+			display: none;
+		}
+
+		&::backdrop {
+			background: var(--semantics-overlays-backdrop-color);
+		}
+
+		&[open] {
+			animation: navigation-split-view-inspector-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+		}
+
+		&.is-closing {
+			animation: navigation-split-view-inspector-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+		}
+	}
+
+	.navigation-split-view__inspector-sheet-body {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		min-height: 0;
+		width: 100%;
+	}
+
+
+	/* # Sidebar — sheet (dialog) */
+
+	@keyframes navigation-split-view-sidebar-slide-in {
+		from { transform: translateX(-100%); }
+		to { transform: translateX(0); }
+	}
+
+	@keyframes navigation-split-view-sidebar-slide-out {
+		from { transform: translateX(0); }
+		to { transform: translateX(-100%); }
+	}
+
+	.navigation-split-view__sidebar-sheet {
+		display: flex;
+		flex-direction: column;
+		border: none;
+		padding: 0;
+		margin: 0;
+		background: var(--semantics-surfaces-background-color);
+		box-shadow: var(--semantics-overlays-box-shadow);
+		overflow: hidden;
+		position: fixed;
+		outline: none;
+		inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
+		width: var(--semantics-sheets-side-md-width);
+		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+		border-radius: var(--semantics-overlays-corner-radius);
+
+		@media (min-width: ${lgMin}) {
+			width: var(--semantics-sheets-side-lg-width);
+		}
+
+		&:focus-visible:not(.is-pointer-focus) {
+			box-shadow: var(--semantics-focus-ring-box-shadow), var(--semantics-overlays-box-shadow);
+			outline: var(--semantics-focus-ring-outline);
+			outline-offset: var(--semantics-focus-ring-outline-offset);
+		}
+
+		&:not([open]) {
+			display: none;
+		}
+
+		&::backdrop {
+			background: var(--semantics-overlays-backdrop-color);
+		}
+
+		&[open] {
+			animation: navigation-split-view-sidebar-slide-in var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+		}
+
+		&.is-closing {
+			animation: navigation-split-view-sidebar-slide-out var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+		}
+	}
+
+	.navigation-split-view__sidebar-sheet-body {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		min-height: 0;
+		width: 100%;
+
+		/* Show dismiss button inside sidebar sheet */
+		--context-dismiss-button-display: block;
+	}
+
+
+	/* # Responsive: sm viewport — sheets become bottom sheets */
+
+	@keyframes navigation-split-view-slide-in-bottom {
+		from { transform: translateY(100%); }
+		to { transform: translateY(0); }
+	}
+
+	@keyframes navigation-split-view-slide-out-bottom {
+		from { transform: translateY(0); }
+		to { transform: translateY(100%); }
+	}
+
+	@media (max-width: ${smMax}) {
+		.navigation-split-view__inspector-sheet {
+			inset: auto 0 0 0;
+			width: 100%;
+			max-width: 100%;
+			height: auto;
+			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+
+			&[open] {
+				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			&.is-closing {
+				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+		}
+
+		.navigation-split-view__sidebar-sheet {
+			inset: auto 0 0 0;
+			width: 100%;
+			max-width: 100%;
+			height: auto;
+			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+
+			&[open] {
+				animation: navigation-split-view-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			&.is-closing {
+				animation: navigation-split-view-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+		}
+	}
+
+
+	/* # Reduced motion */
+
+	@media (prefers-reduced-motion: reduce) {
+		.navigation-split-view__inspector-sheet[open],
+		.navigation-split-view__inspector-sheet.is-closing,
+		.navigation-split-view__sidebar-sheet[open],
+		.navigation-split-view__sidebar-sheet.is-closing {
+			animation: none;
+		}
+	}
+
+
+	/* # Slotted */
+
+	::slotted(*) {
+		flex: 1;
+		min-height: 0;
+	}
+`;
+//# sourceMappingURL=navigation-split-view.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-split-view.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/navigation-split-view/navigation-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;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA8IrB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAgEL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAmDN,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD1B,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-split-view.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/navigation-split-view/navigation-split-view.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,cAAc,EAAW,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,6CAA6C,CAAC;AAErD,wBAAgB,2BAA2B,CAAC,SAAS,EAAE,uBAAuB,GAAG,cAAc,CAuD9F"}

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

@@ -0,0 +1,60 @@
+/* eslint-disable lit-a11y/click-events-have-key-events -- native dialog handles keyboard via @cancel */
+import { html, nothing } from 'lit';
+import '../split-view-divider/split-view-divider.js';
+export function navigationSplitViewTemplate(component) {
+    return html `
+		<div class="navigation-split-view">
+			${component._showSidebar ? html `
+				<div class="navigation-split-view__sidebar-pane">
+					<slot name="sidebar"></slot>
+				</div>
+				<nldd-split-view-divider orientation="vertical"></nldd-split-view-divider>
+			` : nothing}
+			${component._showSecondarySidebar ? html `
+				<div class="navigation-split-view__secondary-sidebar-pane">
+					<slot name="secondary-sidebar"></slot>
+				</div>
+				<nldd-split-view-divider orientation="vertical"></nldd-split-view-divider>
+			` : nothing}
+			${component._showMain ? html `
+				<div class="navigation-split-view__main-pane">
+					<slot name="main"></slot>
+				</div>
+			` : nothing}
+			${component._showInspector ? html `
+				<nldd-split-view-divider orientation="vertical"></nldd-split-view-divider>
+				<div class="navigation-split-view__inspector-pane">
+					<slot name="inspector"></slot>
+				</div>
+			` : component.inspectorAutoHidden || component.inspectorAsSheet ? html `
+				<dialog class="navigation-split-view__inspector-sheet"
+					aria-label=${component.inspectorAccessibleLabel}
+					aria-modal="true"
+					@click=${component._handleInspectorSheetClick}
+					@cancel=${component._handleInspectorSheetCancel}
+				>
+					<div class="navigation-split-view__inspector-sheet-body">
+						<slot name="inspector"></slot>
+					</div>
+				</dialog>
+			` : nothing}
+			${component.sidebarAsSheet ? html `
+				<dialog class="navigation-split-view__sidebar-sheet"
+					aria-label=${component.sidebarAccessibleLabel}
+					aria-modal="true"
+					@click=${component._handleSidebarSheetClick}
+					@cancel=${component._handleSidebarSheetCancel}
+				>
+					<div class="navigation-split-view__sidebar-sheet-body">
+						${component._hasSecondarySidebar && component._paneHasContent('secondary-sidebar') ? html `
+							<slot name="secondary-sidebar"></slot>
+						` : html `
+							<slot name="sidebar"></slot>
+						`}
+					</div>
+				</dialog>
+			` : nothing}
+		</div>
+	`;
+}
+//# sourceMappingURL=navigation-split-view.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-split-view.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/navigation-split-view/navigation-split-view.template.ts"],"names":[],"mappings":"AAAA,wGAAwG;AACxG,OAAO,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpD,OAAO,6CAA6C,CAAC;AAErD,MAAM,UAAU,2BAA2B,CAAC,SAAkC;IAC7E,OAAO,IAAI,CAAA;;KAEP,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;IAK9B,CAAC,CAAC,CAAC,OAAO;KACT,SAAS,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;IAKvC,CAAC,CAAC,CAAC,OAAO;KACT,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI3B,CAAC,CAAC,CAAC,OAAO;KACT,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;IAKhC,CAAC,CAAC,CAAC,SAAS,CAAC,mBAAmB,IAAI,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAA;;kBAEvD,SAAS,CAAC,wBAAwB;;cAEtC,SAAS,CAAC,0BAA0B;eACnC,SAAS,CAAC,2BAA2B;;;;;;IAMhD,CAAC,CAAC,CAAC,OAAO;KACT,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;;kBAElB,SAAS,CAAC,sBAAsB;;cAEpC,SAAS,CAAC,wBAAwB;eACjC,SAAS,CAAC,yBAAyB;;;QAG1C,SAAS,CAAC,oBAAoB,IAAI,SAAS,CAAC,eAAe,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;OAExF,CAAC,CAAC,CAAC,IAAI,CAAA;;OAEP;;;IAGH,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,38 @@
+/**
+ * Nederlandse Digitale Dienst Side-by-Side Split View Component (Lit + TypeScript)
+ *
+ * A horizontal split view with multiple equal panes side by side.
+ * 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 width are automatically hidden.
+ *
+ * @element nldd-side-by-side-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 NLDDSideBySideSplitView extends LitElement {
+    static styles: import("lit").CSSResult;
+    background: 'inherit' | 'default' | 'tinted';
+    panes: number;
+    _visiblePanes: number;
+    private _paneMinWidth;
+    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-side-by-side-split-view': NLDDSideBySideSplitView;
+    }
+}
+//# sourceMappingURL=side-by-side-split-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-by-side-split-view.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,uBAAwB,SAAQ,UAAU;IACtD,OAAgB,MAAM,0BAA6B;IAGnD,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAa;IAGzD,KAAK,SAAK;IAGV,aAAa,SAAY;IAGzB,OAAO,CAAC,aAAa,CAAK;IAE1B,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,8BAA8B,EAAE,uBAAuB,CAAC;KACxD;CACD"}

package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-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 Side-by-Side Split View Component (Lit + TypeScript)
+ *
+ * A horizontal split view with multiple equal panes side by side.
+ * 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 width are automatically hidden.
+ *
+ * @element nldd-side-by-side-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 { sideBySideSplitViewStyles } from './side-by-side-split-view.styles.js';
+import { sideBySideSplitViewTemplate } from './side-by-side-split-view.template.js';
+let NLDDSideBySideSplitView = class NLDDSideBySideSplitView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.background = 'inherit';
+        this.panes = 2;
+        this._visiblePanes = Infinity;
+        // Cached pane min-width — read from CSS in firstUpdated
+        this._paneMinWidth = 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-width from CSS after first render — styles are guaranteed applied
+        this._paneMinWidth = parseFloat(getComputedStyle(this).getPropertyValue('--_pane-min-width'));
+        this._updateVisiblePanes();
+    }
+    updated(changed) {
+        if (changed.has('panes')) {
+            this._updateVisiblePanes();
+        }
+    }
+    _updateVisiblePanes() {
+        if (!this._paneMinWidth)
+            return;
+        const width = this.getBoundingClientRect().width;
+        const fitting = Math.floor(width / this._paneMinWidth);
+        this._visiblePanes = Math.min(this.panes, Math.max(1, fitting));
+    }
+    render() {
+        return sideBySideSplitViewTemplate(this);
+    }
+};
+NLDDSideBySideSplitView.styles = sideBySideSplitViewStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDSideBySideSplitView.prototype, "background", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NLDDSideBySideSplitView.prototype, "panes", void 0);
+__decorate([
+    state()
+], NLDDSideBySideSplitView.prototype, "_visiblePanes", void 0);
+NLDDSideBySideSplitView = __decorate([
+    customElement('nldd-side-by-side-split-view')
+], NLDDSideBySideSplitView);
+export { NLDDSideBySideSplitView };
+//# sourceMappingURL=side-by-side-split-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-by-side-split-view.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/side-by-side-split-view/side-by-side-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,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAChF,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AAG7E,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAIN,eAAU,GAAqC,SAAS,CAAC;QAGzD,UAAK,GAAG,CAAC,CAAC;QAGV,kBAAa,GAAG,QAAQ,CAAC;QAEzB,wDAAwD;QAChD,kBAAa,GAAG,CAAC,CAAC;QAElB,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,kFAAkF;QAClF,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC9F,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,aAAa;YAAE,OAAO;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QACjD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;QACvD,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,2BAA2B,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC;;AAjDe,8BAAM,GAAG,yBAAyB,AAA5B,CAA6B;AAGnD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DACe;AAGzD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAChC;AAGV;IADC,KAAK,EAAE;8DACiB;AAVb,uBAAuB;IADnC,aAAa,CAAC,8BAA8B,CAAC;GACjC,uBAAuB,CAmDnC"}

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

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

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

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

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

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+export const sideBySideSplitViewStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		background-color: var(--_background-color);
+
+		--_pane-min-width: var(--primitives-area-320); /* Pane min-width — 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 */
+
+	.side-by-side-split-view {
+		display: flex;
+		flex-direction: row;
+		flex: 1;
+		min-height: 0;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+
+	/* # Pane */
+
+	.side-by-side-split-view__pane {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		min-width: var(--_pane-min-width);
+		overflow: hidden;
+		container-type: inline-size;
+		container-name: layout-area;
+	}
+
+	.side-by-side-split-view__pane[hidden] {
+		display: none;
+	}
+
+	::slotted(*) {
+		flex: 1;
+		min-height: 0;
+	}
+`;
+//# sourceMappingURL=side-by-side-split-view.styles.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-by-side-split-view.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAW,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,6CAA6C,CAAC;AAErD,wBAAgB,2BAA2B,CAAC,SAAS,EAAE,uBAAuB,GAAG,cAAc,CAmB9F"}

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

@@ -0,0 +1,22 @@
+import { html, nothing } from 'lit';
+import '../split-view-divider/split-view-divider.js';
+export function sideBySideSplitViewTemplate(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="side-by-side-split-view">
+			${panes.map((n, i) => html `
+				${i > 0 && i < component._visiblePanes ? html `
+					<nldd-split-view-divider orientation="vertical"></nldd-split-view-divider>
+				` : nothing}
+				<div
+					class="side-by-side-split-view__pane"
+					?hidden=${i >= component._visiblePanes}
+				>
+					<slot name="pane-${n}"></slot>
+				</div>
+			`)}
+		</div>
+	`;
+}
+//# sourceMappingURL=side-by-side-split-view.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-by-side-split-view.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpD,OAAO,6CAA6C,CAAC;AAErD,MAAM,UAAU,2BAA2B,CAAC,SAAkC;IAC7E,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"}

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

@@ -0,0 +1,28 @@
+/**
+ * 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';
+type Orientation = 'vertical' | 'horizontal';
+export declare class NLDDSplitViewDivider extends LitElement {
+    static styles: import("lit").CSSResult;
+    orientation: Orientation;
+    hasDragHandle: boolean;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-split-view-divider': NLDDSplitViewDivider;
+    }
+}
+export {};
+//# sourceMappingURL=split-view-divider.d.ts.map