@nldd/design-system 0.8.63 → 0.8.65

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js

@@ -0,0 +1,219 @@
+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 Sidebar Section Component (Lit + TypeScript)
+ *
+ * A page section with a left sidebar alongside the main content.
+ *
+ * - **Wide (section >= 1008px):** two columns. The sidebar is a sticky, scrollable
+ *   tinted box (max-width 320px) beside the main content. Its sticky top/bottom insets
+ *   default to 16px; override with `sticky-top` / `sticky-bottom` so it clears
+ *   other sticky page elements (e.g. a sticky header).
+ * - **Narrow (section < 1008px):** the sidebar collapses behind a sheet (a left panel on
+ *   md+ viewports, a bottom sheet on mobile), and the host reflects a `collapsed`
+ *   attribute. The consumer owns the trigger: place
+ *   any chrome (a button, a chosen-filters bar, …) wherever you want, show it only
+ *   while collapsed (e.g. `nldd-sidebar-section[collapsed] .my-trigger { … }` or by
+ *   reading `collapsed` / listening to `collapse-change`), and call `show()` /
+ *   `toggle()` to open the sheet. Bind `aria-expanded` via the `open`/`close` events.
+ *   The sheet gets a sticky title bar by default — the `sidebar-label` as title plus a
+ *   "Sluit" button — overridable via the `sheet-top-title-bar` slot.
+ *
+ * The sidebar content lives in `slot="sidebar"`. Its slot outlet moves between the
+ * box (expanded) and the sheet (collapsed) so there is a single, never-duplicated
+ * copy — the light DOM (and its state) is preserved across the switch.
+ *
+ * The box <-> sheet switch follows the section's OWN width (a ResizeObserver on the
+ * host), not the viewport — so a sidebar-section in a narrow column or a split-view
+ * pane collapses to the sheet just like one in a narrow viewport, and the sidebar
+ * never stacks above or crowds the main. Set `no-collapse` to opt out: a narrow
+ * section then stacks the sidebar (full-width) above the main instead of using a sheet.
+ *
+ * Inherits block `padding` and `height` from PageSectionMixin.
+ *
+ * @element nldd-sidebar-section
+ *
+ * @slot                    - Main content
+ * @slot sidebar            - Sidebar content (sticky box when expanded, a left/bottom sheet when
+ *                            collapsed). The box and the sheet add no padding of their own — wrap
+ *                            the content in a padded container (e.g. nldd-container) for inset spacing.
+ * @slot sheet-top-title-bar - Replaces the sheet's default title bar (when collapsed). Empty falls back to an
+ *                            `nldd-top-title-bar` with the `sidebar-label` as title and a "Sluit" button.
+ * @slot header              - Content above the columns
+ * @slot footer              - Content below the columns
+ *
+ * @attr {boolean} [collapsed]    - Read-only, reflected: true while the sidebar is a sheet (the section is narrower than lg). Target it via CSS to reveal sheet-only chrome.
+ * @attr {boolean} [no-collapse]  - Opt out of the sheet: a narrow section stacks the sidebar above the main instead of collapsing. `collapsed` then stays false.
+ * @attr {string}  [width]        - Body max-width: 'full' removes the constraint; any CSS length overrides the default.
+ * @attr {string}  [sticky-top]   - Sticky top inset on lg (CSS length; default = 16px).
+ * @attr {string}  [sticky-bottom]- Sticky bottom inset on lg (CSS length; default = 16px).
+ * @attr {string}  [sidebar-label]- Accessible name for the sidebar (the aside landmark on lg and the sheet on sm/md). Default 'Zijbalk'.
+ *
+ * @fires open            - The sidebar sheet opened.
+ * @fires close           - The sidebar sheet closed.
+ * @fires collapse-change - The collapsed state flipped because the section's width crossed the lg breakpoint; `{ collapsed }`.
+ *
+ * @method show()   - Opens the sidebar sheet (collapsed only; no-op on lg).
+ * @method hide()   - Closes the sidebar sheet.
+ * @method toggle() - Opens or closes the sidebar sheet (collapsed only).
+ */
+import { LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { PageSectionMixin } from '../../../../utilities/page-section-mixin.js';
+import { breakpoints } from '../../../../assets/styles/breakpoints.js';
+import { sidebarSectionStyles } from './sidebar-section.styles.js';
+import { sidebarSectionTemplate } from './sidebar-section.template.js';
+import { nlddSidebarSectionTranslations } from './sidebar-section.i18n.js';
+import '../../sheet/sheet.js';
+import '../../page/page.js';
+import '../../../navigation/top-title-bar/top-title-bar.js';
+let NLDDSidebarSection = class NLDDSidebarSection extends PageSectionMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.width = '';
+        this.stickyTop = '';
+        this.stickyBottom = '';
+        this.sidebarLabel = '';
+        this.noCollapse = false;
+        this.collapsed = false;
+        this._lgMin = parseInt(breakpoints.lgMin, 10);
+        this._hasMeasured = false;
+        this._sheetOpen = false;
+        this._onResize = (entries) => {
+            const entry = entries[0];
+            const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+            // The first delivery is the initial measurement, not a breakpoint crossing.
+            const announce = this._hasMeasured;
+            this._hasMeasured = true;
+            this._applyCollapsed(width, announce);
+        };
+        // Track open state for toggle(); the open/close events still bubble out to the
+        // consumer (for aria-expanded) — these handlers don't stop them.
+        this._onSheetOpen = () => { this._sheetOpen = true; };
+        this._onSheetClose = () => { this._sheetOpen = false; };
+    }
+    get _resolvedSidebarLabel() {
+        return this.sidebarLabel || nlddSidebarSectionTranslations['components.sidebar-section.sidebar-label'];
+    }
+    /** Dismiss-button label for the sheet's default title bar (i18n). */
+    get _sheetDismissText() {
+        return nlddSidebarSectionTranslations['components.sidebar-section.sheet-dismiss-action'];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Collapse on the section's OWN width, not the viewport, so it adapts to
+        // whatever space it's placed in (a narrow column, a split-view pane, …).
+        this._ro = new ResizeObserver(this._onResize);
+        this._ro.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._ro?.disconnect();
+        this._ro = undefined;
+        this._hasMeasured = false;
+    }
+    firstUpdated() {
+        // Seed the collapsed state from the rendered width before the first paint,
+        // so there's no flash of the wrong layout; the ResizeObserver owns it after.
+        this._applyCollapsed(this.clientWidth, false);
+    }
+    _applyCollapsed(width, announce) {
+        // no-collapse opts out of the sheet entirely — the sidebar stacks instead.
+        const next = width < this._lgMin && !this.noCollapse;
+        if (next === this.collapsed)
+            return;
+        this.collapsed = next;
+        if (announce) {
+            this.dispatchEvent(new CustomEvent('collapse-change', {
+                detail: { collapsed: next },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('width')) {
+            const w = this.width;
+            // 'full' is handled by CSS (--_max-width: none); CSS lengths feed the var.
+            if (w && w !== 'full' && CSS.supports('max-width', w)) {
+                this.style.setProperty('--_max-width', w);
+            }
+            else {
+                this.style.removeProperty('--_max-width');
+            }
+        }
+        if (changed.has('stickyTop'))
+            this._applyInset('--_sticky-top', this.stickyTop);
+        if (changed.has('stickyBottom'))
+            this._applyInset('--_sticky-bottom', this.stickyBottom);
+        // Toggling no-collapse flips whether a narrow section collapses — re-evaluate.
+        if (changed.has('noCollapse'))
+            this._applyCollapsed(this.clientWidth, false);
+        // Expanding to the box (lg) moves the sidebar slot out of the sheet, so close
+        // any open sheet rather than leave an empty modal behind.
+        if (changed.has('collapsed') && !this.collapsed)
+            this._sheet?.hide();
+    }
+    _applyInset(name, value) {
+        if (value && CSS.supports('top', value)) {
+            this.style.setProperty(name, value);
+        }
+        else {
+            this.style.removeProperty(name);
+        }
+    }
+    /** Opens the sidebar sheet. No-op on lg, where the sidebar is always visible. */
+    show() {
+        if (!this.collapsed)
+            return;
+        this._sheet?.show();
+    }
+    /** Closes the sidebar sheet. */
+    hide() {
+        this._sheet?.hide();
+    }
+    /** Opens or closes the sidebar sheet. No-op on lg. */
+    toggle() {
+        if (!this.collapsed)
+            return;
+        if (this._sheetOpen)
+            this._sheet?.hide();
+        else
+            this._sheet?.show();
+    }
+    render() {
+        return sidebarSectionTemplate(this);
+    }
+};
+NLDDSidebarSection.styles = sidebarSectionStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDSidebarSection.prototype, "width", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'sticky-top' })
+], NLDDSidebarSection.prototype, "stickyTop", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'sticky-bottom' })
+], NLDDSidebarSection.prototype, "stickyBottom", void 0);
+__decorate([
+    property({ type: String, attribute: 'sidebar-label' })
+], NLDDSidebarSection.prototype, "sidebarLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-collapse' })
+], NLDDSidebarSection.prototype, "noCollapse", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDSidebarSection.prototype, "collapsed", void 0);
+__decorate([
+    query('.sidebar-section__sheet')
+], NLDDSidebarSection.prototype, "_sheet", void 0);
+NLDDSidebarSection = __decorate([
+    customElement('nldd-sidebar-section')
+], NLDDSidebarSection);
+export { NLDDSidebarSection };
+//# sourceMappingURL=sidebar-section.js.map

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js.map

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

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.d.ts

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

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB,yBAqJhC,CAAC"}

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js

@@ -0,0 +1,157 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../../assets/styles/breakpoints.js';
+const smMax = unsafeCSS(breakpoints.smMax);
+const mdMin = unsafeCSS(breakpoints.mdMin);
+const mdMax = unsafeCSS(breakpoints.mdMax);
+const lgMin = unsafeCSS(breakpoints.lgMin);
+export const sidebarSectionStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+
+	/* # Host
+
+	   Container queries on the section's OWN width (not the viewport): the row
+	   <-> stacked switch and the padding follow the space the section is given.
+	   The collapse-to-sheet is JS-driven — a ResizeObserver on the host sets
+	   [collapsed] (see the .ts) — and only happens when the section is narrow AND
+	   not [no-collapse]; the lg breakpoint (>= ${lgMin}) is the switch. */
+
+	:host {
+		container-type: inline-size;
+		/* Block-padding overrides from PageSectionMixin; resolved per breakpoint
+		   below (scope override -> base override -> responsive default). */
+		--_padding-top: initial;
+		--_padding-bottom: initial;
+		--_sm-padding-top: initial;
+		--_sm-padding-bottom: initial;
+		--_md-padding-top: initial;
+		--_md-padding-bottom: initial;
+		--_lg-padding-top: initial;
+		--_lg-padding-bottom: initial;
+		--_max-width: var(--semantics-page-sections-body-max-width);
+		/* Sticky insets default to 16px top and bottom; override via sticky-top /
+		   sticky-bottom to clear other sticky page elements (e.g. a sticky header). */
+		--_sticky-top: var(--primitives-space-16);
+		--_sticky-bottom: var(--primitives-space-16);
+		--_sidebar-width: var(--primitives-area-320);
+
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([width="full"]) {
+		--_max-width: none;
+	}
+
+
+	/* # Block */
+
+	.sidebar-section {
+		box-sizing: border-box;
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		align-items: center;
+
+		@container (max-width: ${smMax}) {
+			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+			padding-top: var(--_sm-padding-top, var(--_padding-top, var(--semantics-page-sections-sm-margin-block)));
+			padding-bottom: var(--_sm-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-sm-margin-block)));
+		}
+
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			padding-inline: var(--semantics-page-sections-md-margin-inline);
+			padding-top: var(--_md-padding-top, var(--_padding-top, var(--semantics-page-sections-md-margin-block)));
+			padding-bottom: var(--_md-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-md-margin-block)));
+		}
+
+		@container (min-width: ${lgMin}) {
+			padding-inline: var(--semantics-page-sections-lg-margin-inline);
+			padding-top: var(--_lg-padding-top, var(--_padding-top, var(--semantics-page-sections-lg-margin-block)));
+			padding-bottom: var(--_lg-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-lg-margin-block)));
+		}
+	}
+
+
+	/* # Body */
+
+	.sidebar-section__body {
+		display: flex;
+		width: 100%;
+		max-width: var(--_max-width);
+		flex-direction: column;
+
+		@container (max-width: ${smMax}) { gap: var(--semantics-page-sections-sm-gap); }
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) { gap: var(--semantics-page-sections-md-gap); }
+		@container (min-width: ${lgMin}) { gap: var(--semantics-page-sections-lg-gap); }
+	}
+
+	.sidebar-section__header[hidden],
+	.sidebar-section__footer[hidden] {
+		display: none;
+	}
+
+
+	/* # Columns — stacked (column) by default, two columns (row) when the section
+	   is wide. Pure width switch, like the other page-sections. When collapsed the
+	   aside is removed in JS (it moves to the sheet), so only the main remains;
+	   with [no-collapse] the aside stays and this is the stacked fallback. */
+
+	.sidebar-section__columns {
+		display: flex;
+		flex-direction: column;
+
+		@container (max-width: ${smMax}) { gap: var(--semantics-page-sections-sm-gap); }
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) { gap: var(--semantics-page-sections-md-gap); }
+		@container (min-width: ${lgMin}) {
+			flex-direction: row;
+			gap: var(--semantics-page-sections-lg-gap);
+		}
+	}
+
+	.sidebar-section__main {
+		min-width: 0;
+		flex-grow: 1;
+	}
+
+
+	/* # Sidebar — full-width when stacked (narrow, [no-collapse]); a fixed-width
+	   column beside the main when wide. */
+
+	.sidebar-section__sidebar {
+		flex-shrink: 0;
+
+		@container (min-width: ${lgMin}) {
+			width: var(--_sidebar-width);
+			max-width: var(--_sidebar-width);
+		}
+	}
+
+	/* # Box — tinted always. Sticky + scrollable only beside the main (wide); when
+	   stacked it's a plain full-width tinted box above the main, so no sticky (which
+	   would scroll over the main) and no viewport height cap. */
+
+	.sidebar-section__sidebar-box {
+		box-sizing: border-box;
+		border-radius: var(--components-sidebar-section-sidebar-box-corner-radius);
+		background-color: var(--components-sidebar-section-sidebar-box-background-color);
+		box-shadow: inset 0 0 0 1px var(--components-sidebar-section-sidebar-box-highlight-border-color);
+
+		@container (min-width: ${lgMin}) {
+			position: sticky;
+			top: var(--_sticky-top);
+			bottom: var(--_sticky-bottom);
+			max-height: calc(100dvh - var(--_sticky-top) - var(--_sticky-bottom));
+			overflow-y: auto;
+		}
+	}
+`;
+//# sourceMappingURL=sidebar-section.styles.js.map

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.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;AAC3C,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,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;+CAYQ,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA6CzB,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;2BACL,KAAK,qBAAqB,KAAK;2BAC/B,KAAK;;;;;;;;;;;;;;;;;;2BAkBL,KAAK;2BACL,KAAK,qBAAqB,KAAK;2BAC/B,KAAK;;;;;;;;;;;;;;;;;;2BAkBL,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;;;;;CAQ/B,CAAC"}

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.d.ts

@@ -0,0 +1,4 @@
+import { type TemplateResult } from 'lit';
+import type { NLDDSidebarSection } from './sidebar-section.js';
+export declare function sidebarSectionTemplate(component: NLDDSidebarSection): TemplateResult;
+//# sourceMappingURL=sidebar-section.template.d.ts.map

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,kBAAkB,GAAG,cAAc,CAsDpF"}

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.js

@@ -0,0 +1,57 @@
+import { html, nothing } from 'lit';
+export function sidebarSectionTemplate(component) {
+    const collapsed = component.collapsed;
+    const sidebarLabel = component._resolvedSidebarLabel;
+    return html `
+		<section class="sidebar-section">
+			<div class="sidebar-section__body">
+				<header class="sidebar-section__header"
+					hidden
+				>
+					<slot name="header" @slotchange=${component._onSlotChange}></slot>
+				</header>
+				<div class="sidebar-section__columns">
+					${!collapsed ? html `
+						<aside class="sidebar-section__sidebar"
+							aria-label=${sidebarLabel}
+						>
+							<div class="sidebar-section__sidebar-box">
+								<slot name="sidebar"></slot>
+							</div>
+						</aside>
+					` : nothing}
+					<div class="sidebar-section__main">
+						<slot></slot>
+					</div>
+				</div>
+				<footer class="sidebar-section__footer"
+					hidden
+				>
+					<slot name="footer" @slotchange=${component._onSlotChange}></slot>
+				</footer>
+			</div>
+		</section>
+		<nldd-sheet class="sidebar-section__sheet"
+			placement="left"
+			accessible-label=${sidebarLabel}
+			@open=${component._onSheetOpen}
+			@close=${component._onSheetClose}
+		>
+			${collapsed ? html `
+				<nldd-page sticky-header>
+					<slot
+						name="sheet-top-title-bar"
+						slot="header"
+					>
+						<nldd-top-title-bar
+							text=${sidebarLabel}
+							dismiss-text=${component._sheetDismissText}
+						></nldd-top-title-bar>
+					</slot>
+					<slot name="sidebar"></slot>
+				</nldd-page>
+			` : nothing}
+		</nldd-sheet>
+	`;
+}
+//# sourceMappingURL=sidebar-section.template.js.map

package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAGzD,MAAM,UAAU,sBAAsB,CAAC,SAA6B;IACnE,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC;IACtC,MAAM,YAAY,GAAG,SAAS,CAAC,qBAAqB,CAAC;IACrD,OAAO,IAAI,CAAA;;;;;;uCAM2B,SAAS,CAAC,aAAa;;;OAGvD,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;oBAEJ,YAAY;;;;;;MAM1B,CAAC,CAAC,CAAC,OAAO;;;;;;;;uCAQuB,SAAS,CAAC,aAAa;;;;;;sBAMxC,YAAY;WACvB,SAAS,CAAC,YAAY;YACrB,SAAS,CAAC,aAAa;;KAE9B,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;cAOP,YAAY;sBACJ,SAAS,CAAC,iBAAiB;;;;;IAK7C,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}

package/dist/components/layout/page-sections/simple-section/simple-section.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simple-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,yBA0G/B,CAAC"}
+{"version":3,"file":"simple-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,yBA6G/B,CAAC"}

package/dist/components/layout/page-sections/simple-section/simple-section.styles.js

@@ -5,6 +5,9 @@ const mdMin = unsafeCSS(breakpoints.mdMin);
 const mdMax = unsafeCSS(breakpoints.mdMax);
 const lgMin = unsafeCSS(breakpoints.lgMin);
 export const simpleSectionStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */

package/dist/components/layout/page-sections/simple-section/simple-section.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.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;AAC3C,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,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAmDX,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;;2BAiBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
+{"version":3,"file":"simple-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.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;AAC3C,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,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAsDX,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;;2BAiBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}

package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"two-thirds-one-third-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,8BAA8B,yBAiI1C,CAAC"}
+{"version":3,"file":"two-thirds-one-third-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,8BAA8B,yBAoI1C,CAAC"}

package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js

@@ -5,6 +5,9 @@ const mdMin = unsafeCSS(breakpoints.mdMin);
 const mdMax = unsafeCSS(breakpoints.mdMax);
 const lgMin = unsafeCSS(breakpoints.lgMin);
 export const twoThirdsOneThirdSectionStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
 
 
 	/* # Host */

package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"two-thirds-one-third-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.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;AAC3C,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,8BAA8B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA4CtB,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;2BAuBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
+{"version":3,"file":"two-thirds-one-third-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.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;AAC3C,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,8BAA8B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA+CtB,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;2BAuBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}

package/dist/components/layout/popover/popover.d.ts

@@ -130,6 +130,7 @@ export declare class NLDDPopover extends LitElement {
     private _handleViewportChange;
     private _handleDocumentPointerdown;
     private _handleDocumentClick;
+    private _handleBeforeToggle;
     private _handleToggle;
     private _handleKeydown;
     private _manageFocus;

package/dist/components/layout/popover/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/popover/popover.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjD,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlG,OAAO,EAA2B,KAAK,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAI1F,qBACa,WAAY,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAAiB;IAGvC,MAAM,SAAM;IAGZ,aAAa,EAAE,OAAO,GAAG,IAAI,CAAQ;IAGrC,SAAS,EAAE,SAAS,CAAkB;IAGtC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAO1B,GAAG,EAAE,MAAM,GAAG,SAAS,CAAa;IAGpC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAGtC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAGvC,QAAQ,UAAS;IAGjB,YAAY,UAAS;IAGrB,eAAe,SAAM;IAErB;;;OAGG;IAEH,YAAY,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAM;IAEpD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,cAAc,CAA4B;IAClD,OAAO,CAAC,6BAA6B,CAAS;IAC9C,gFAAgF;IAChF,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,iBAAiB,CAAwB;IAEjD,IAAI,IAAI,IAAI,OAAO,CAElB;IAEQ,iBAAiB,IAAI,IAAI;IA2BzB,oBAAoB,IAAI,IAAI;IA2B5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAoC/C,OAAO,CAAC,EAAE;IAIV,IAAI,wBAAwB,IAAI,MAAM,CAErC;IAID,IAAI,IAAI,IAAI;IAUZ,OAAO,CAAC,mBAAmB;IAQ3B,IAAI,IAAI,IAAI;IAKZ,MAAM,IAAI,IAAI;IAKd;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB;IAK1B,mFAAmF;IAC7E,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IA+FjC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,qBAAqB,CAa3B;IAEF,OAAO,CAAC,0BAA0B,CAMhC;IAEF,OAAO,CAAC,oBAAoB,CAuB1B;IAEF,OAAO,CAAC,aAAa,CA8BnB;IAEF,OAAO,CAAC,cAAc,CAiBpB;IAIF,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;IA2Cb,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/popover/popover.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjD,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlG,OAAO,EAA2B,KAAK,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAI1F,qBACa,WAAY,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAAiB;IAGvC,MAAM,SAAM;IAGZ,aAAa,EAAE,OAAO,GAAG,IAAI,CAAQ;IAGrC,SAAS,EAAE,SAAS,CAAkB;IAGtC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAO1B,GAAG,EAAE,MAAM,GAAG,SAAS,CAAa;IAGpC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAGtC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAGvC,QAAQ,UAAS;IAGjB,YAAY,UAAS;IAGrB,eAAe,SAAM;IAErB;;;OAGG;IAEH,YAAY,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAM;IAEpD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,cAAc,CAA4B;IAClD,OAAO,CAAC,6BAA6B,CAAS;IAC9C,gFAAgF;IAChF,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,iBAAiB,CAAwB;IAEjD,IAAI,IAAI,IAAI,OAAO,CAElB;IAEQ,iBAAiB,IAAI,IAAI;IA4BzB,oBAAoB,IAAI,IAAI;IA4B5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAoC/C,OAAO,CAAC,EAAE;IAIV,IAAI,wBAAwB,IAAI,MAAM,CAErC;IAID,IAAI,IAAI,IAAI;IAUZ,OAAO,CAAC,mBAAmB;IAQ3B,IAAI,IAAI,IAAI;IAKZ,MAAM,IAAI,IAAI;IAKd;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB;IAK1B,mFAAmF;IAC7E,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IA+FjC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,qBAAqB,CAa3B;IAEF,OAAO,CAAC,0BAA0B,CAMhC;IAEF,OAAO,CAAC,oBAAoB,CAuB1B;IAOF,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,aAAa,CA+BnB;IAEF,OAAO,CAAC,cAAc,CAiBpB;IAIF,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;IA2Cb,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}

package/dist/components/layout/popover/popover.js

@@ -84,6 +84,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { computePosition, flip, shift, size, autoUpdate } from '@floating-ui/dom';
+import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
 import { popoverStyles } from './popover.styles.js';
 import { popoverTemplate } from './popover.template.js';
 import { nlddPopoverTranslations } from './popover.i18n.js';
@@ -174,6 +175,15 @@ let NLDDPopover = class NLDDPopover extends LitElement {
                 this.showPopover();
             }
         };
+        // On the desktop (Floating UI) layout a popover paints at its default position the
+        // instant it opens, before the async reposition runs — a flash in the wrong place.
+        // Clearing `positioned` here (beforetoggle fires before the popover is shown) keeps
+        // it hidden via CSS until reposition() has placed it. (The sm bottom-sheet is
+        // CSS-animated, so its hide rule is scoped to md; this is harmless there.)
+        this._handleBeforeToggle = (event) => {
+            if (event.newState === 'open')
+                this.removeAttribute('positioned');
+        };
         this._handleToggle = async (event) => {
             const toggleEvent = event;
             this._isOpen = toggleEvent.newState === 'open';
@@ -188,6 +198,7 @@ let NLDDPopover = class NLDDPopover extends LitElement {
             }
             this._previousFocus = document.activeElement ?? this._getAnchorEl();
             await this.reposition();
+            this.setAttribute('positioned', ''); // placed — reveal it (see _handleBeforeToggle)
             // Start scroll/resize/layout-change tracking. Floating UI's autoUpdate
             // luistert naar ancestor scroll, window resize, en ResizeObserver op
             // de anchor — dekt window-resize binnen viewport-breakpoint, dynamic
@@ -235,6 +246,7 @@ let NLDDPopover = class NLDDPopover extends LitElement {
             this.setAttribute('tabindex', '-1');
         if (!this.hasAttribute('role'))
             this.setAttribute('role', 'dialog');
+        this.addEventListener('beforetoggle', this._handleBeforeToggle);
         this.addEventListener('toggle', this._handleToggle);
         this.addEventListener('keydown', this._handleKeydown);
         document.addEventListener('pointerdown', this._handleDocumentPointerdown, true);
@@ -256,6 +268,7 @@ let NLDDPopover = class NLDDPopover extends LitElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('beforetoggle', this._handleBeforeToggle);
         this.removeEventListener('toggle', this._handleToggle);
         this.removeEventListener('keydown', this._handleKeydown);
         document.removeEventListener('pointerdown', this._handleDocumentPointerdown, true);
@@ -569,7 +582,7 @@ __decorate([
     property({ attribute: false })
 ], NLDDPopover.prototype, "anchorElement", void 0);
 __decorate([
-    property({ type: String, reflect: true })
+    property({ reflect: true, converter: reflectNonDefault('bottom-start') })
 ], NLDDPopover.prototype, "placement", void 0);
 __decorate([
     property({ type: String, reflect: true })