@nldd/design-system 0.8.65 → 0.8.67

package/dist/components/navigation/top-title-bar/top-title-bar.js

@@ -9,7 +9,10 @@
  *   toolbar title are visible
  *
  * When `collapse-anchor` is set, the `is-compact` class is automatically applied
- * as soon as the top of the anchor element reaches the top of the scroll container.
+ * as soon as the top of the anchor element reaches this bar's own top edge (the
+ * sticky header line). Measuring the bar rather than the page keeps it correct in
+ * both nested and root scroll modes; it also re-points at the live scroll target
+ * when the page switches mode.
  *
  * Without `collapse-anchor` the bar takes a static state: compact when `text`
  * is set (so the title shows in the title-group), non-compact otherwise (so
@@ -45,6 +48,7 @@ let NLDDTopTitleBar = class NLDDTopTitleBar extends LitElement {
         this._anchorElement = null;
         this._activeScrollTarget = null;
         this._scrollTargetStyleObserver = null;
+        this._pageModeObserver = null;
         this._boundOnScroll = this._onScroll.bind(this);
         this._onToolbarSlotChange = (e) => {
             const slot = e.target;
@@ -104,8 +108,33 @@ let NLDDTopTitleBar = class NLDDTopTitleBar extends LitElement {
             ?? root.querySelector(`#${this.collapseAnchor}`);
         if (!this._anchorElement)
             return;
+        this._wireScrollTarget();
+        // The page's scroll target flips when it switches scroll mode (nested
+        // inner scroller <-> the document, derived on resize by nldd-app-view).
+        // Re-wire onto the new target whenever the page reflects a new
+        // [data-scroll], so the collapse keeps tracking the live scroller.
+        if (this._pageElement) {
+            this._pageModeObserver = new MutationObserver(() => this._wireScrollTarget());
+            this._pageModeObserver.observe(this._pageElement, {
+                attributes: true,
+                attributeFilter: ['data-scroll'],
+            });
+        }
+        // Initial check after layout is complete
+        this.updateComplete.then(() => this._onScroll());
+    }
+    // (Re)attach the scroll + style listeners to the page's current scroll
+    // target — the host document in root-scroll mode, the page (or its inner
+    // scroller) in nested mode.
+    _wireScrollTarget() {
+        this._activeScrollTarget?.removeEventListener('scroll', this._boundOnScroll);
+        this._scrollTargetStyleObserver?.disconnect();
+        this._scrollTargetStyleObserver = null;
         const page = this._pageElement;
-        this._activeScrollTarget = page ? page.scrollTarget : window;
+        // scrollEventTarget (not scrollTarget): in root-scroll mode the viewport's
+        // scroll event fires on `window`, not on document.scrollingElement, so a
+        // listener on the latter would never fire and the bar would never collapse.
+        this._activeScrollTarget = page ? page.scrollEventTarget : window;
         this._activeScrollTarget.addEventListener('scroll', this._boundOnScroll, { passive: true });
         // nldd-page sets padding-top on its scroll target asynchronously
         // (ResizeObserver on the header). If our initial _onScroll runs
@@ -120,8 +149,7 @@ let NLDDTopTitleBar = class NLDDTopTitleBar extends LitElement {
                 attributeFilter: ['style'],
             });
         }
-        // Initial check after layout is complete
-        this.updateComplete.then(() => this._onScroll());
+        this._onScroll();
     }
     _teardownAnchor() {
         this._activeScrollTarget?.removeEventListener('scroll', this._boundOnScroll);
@@ -129,13 +157,21 @@ let NLDDTopTitleBar = class NLDDTopTitleBar extends LitElement {
         this._anchorElement = null;
         this._scrollTargetStyleObserver?.disconnect();
         this._scrollTargetStyleObserver = null;
+        this._pageModeObserver?.disconnect();
+        this._pageModeObserver = null;
     }
     _onScroll() {
         if (!this._anchorElement || !this._pageElement)
             return;
-        const pageTop = this._pageElement.getBoundingClientRect().top;
+        // Collapse once the anchor reaches this bar's own top edge. Measuring the
+        // bar (not the page) keeps this correct in both scroll modes: in nested
+        // scroll the bar is pinned at the page top, so its top equals the page top
+        // (unchanged behaviour); in root-scroll mode the bar is position:sticky
+        // against the document while the page element itself scrolls away, so the
+        // page top is no longer the sticky line — the bar's own top still is.
+        const barTop = this.getBoundingClientRect().top;
         const anchorTop = this._anchorElement.getBoundingClientRect().top;
-        this.classList.toggle('is-compact', anchorTop <= pageTop);
+        this.classList.toggle('is-compact', anchorTop <= barTop);
     }
     _handleBack() {
         if (this.backHref)

package/dist/components/navigation/top-title-bar/top-title-bar.js.map

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

package/dist/utilities/scroll-mode-controller.d.ts

@@ -0,0 +1,69 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export type ScrollMode = 'nested' | 'root';
+/** Bubbling + composed event a horizontal split view fires when it collapses to
+ *  (or expands out of) a single visible column. nldd-app-view listens for it to
+ *  derive the document-vs-nested scroll mode. */
+export declare const SINGLE_COLUMN_CHANGE_EVENT = "nldd-single-column-change";
+export interface SingleColumnChangeDetail {
+    singleColumn: boolean;
+}
+/** A layout layer that reflects the upstream-derived scroll mode. */
+export interface ScrollModeConsumer {
+    /**
+     * Apply the derived scroll mode. app-view passes the mode it derived so the
+     * consumer applies it directly; called with no argument (resize / no-app-view)
+     * it re-reads the inherited `--context-scroll-mode` instead.
+     */
+    readScrollMode(mode?: ScrollMode): void;
+}
+/** nldd-app-view — derives the mode and pushes re-reads to its registered layers. */
+export interface ScrollModeProvider {
+    registerScrollConsumer(consumer: ScrollModeConsumer): void;
+    unregisterScrollConsumer(consumer: ScrollModeConsumer): void;
+}
+/** Nearest ancestor app-view (light-DOM `closest`; slotted layers stay in the
+ *  consumer's light tree so this reaches across the slot boundaries), or null
+ *  when a layer is used stand-alone (e.g. a bare page in the docs). */
+export declare function findScrollModeProvider(host: Element): ScrollModeProvider | null;
+/**
+ * Reads the inherited `--context-scroll-mode` and reflects it to the host's
+ * `[data-scroll]` attribute so CSS can branch.
+ *
+ * In root-scroll mode the DOCUMENT scrolls (see nldd-app-view): every layout
+ * layer between the document and an nldd-page — app-view, the split views and
+ * their panes — must flow (overflow: visible) instead of clipping, so the page's
+ * sticky header/footer can stick against the document. Rather than duplicate the
+ * read-and-reflect logic in each of those components, they share this controller.
+ *
+ * The mode is derived upstream by nldd-app-view. When an app-view is present the
+ * host registers as a consumer and app-view pushes an authoritative re-read on
+ * every change (a bare `--context-scroll-mode` update would otherwise not reach
+ * the resize-polling layers in time — rAF runs before ResizeObserver). Without
+ * an app-view (a stand-alone page), it falls back to re-reading on window resize
+ * so a manual/media-query override still works. `nldd-page` keeps its own inline
+ * logic because it also has to re-wire scroll listeners.
+ */
+export declare class ScrollModeController implements ReactiveController, ScrollModeConsumer {
+    mode: ScrollMode;
+    private _host;
+    private _onChange?;
+    private _raf;
+    private _provider;
+    constructor(host: ReactiveControllerHost & HTMLElement, onChange?: (mode: ScrollMode) => void);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * ScrollModeConsumer — nldd-app-view pushes the mode it derived. When a mode is
+     * passed it is applied directly; this is race-free, whereas re-reading
+     * `getComputedStyle` during a synchronous push can return a stale value for a
+     * deeply-nested host (the var may not have propagated through an ancestor's
+     * pending re-render yet). With no argument (resize / no app-view) the inherited
+     * var is re-read instead.
+     */
+    readScrollMode(mode?: ScrollMode): void;
+    private _readVar;
+    private _onResize;
+    /** Re-read the inherited `--context-scroll-mode` (used on connect + resize). */
+    read(): void;
+}
+//# sourceMappingURL=scroll-mode-controller.d.ts.map

package/dist/utilities/scroll-mode-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-mode-controller.d.ts","sourceRoot":"","sources":["../../src/utilities/scroll-mode-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3C;;iDAEiD;AACjD,eAAO,MAAM,0BAA0B,8BAA8B,CAAC;AAEtE,MAAM,WAAW,wBAAwB;IACxC,YAAY,EAAE,OAAO,CAAC;CACtB;AAED,qEAAqE;AACrE,MAAM,WAAW,kBAAkB;IAClC;;;;OAIG;IACH,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CACxC;AAED,qFAAqF;AACrF,MAAM,WAAW,kBAAkB;IAClC,sBAAsB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC3D,wBAAwB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;CAC7D;AAED;;uEAEuE;AACvE,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,OAAO,GAAG,kBAAkB,GAAG,IAAI,CAG/E;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,oBAAqB,YAAW,kBAAkB,EAAE,kBAAkB;IAClF,IAAI,EAAE,UAAU,CAAY;IAE5B,OAAO,CAAC,KAAK,CAAuC;IACpD,OAAO,CAAC,SAAS,CAAC,CAA6B;IAC/C,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,SAAS,CAAmC;gBAExC,IAAI,EAAE,sBAAsB,GAAG,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI;IAM7F,aAAa,IAAI,IAAI;IAkBrB,gBAAgB,IAAI,IAAI;IAUxB;;;;;;;OAOG;IACH,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI;IAQvC,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,SAAS,CAMf;IAEF,gFAAgF;IAChF,IAAI,IAAI,IAAI;CAGZ"}

package/dist/utilities/scroll-mode-controller.js

@@ -0,0 +1,101 @@
+/** Bubbling + composed event a horizontal split view fires when it collapses to
+ *  (or expands out of) a single visible column. nldd-app-view listens for it to
+ *  derive the document-vs-nested scroll mode. */
+export const SINGLE_COLUMN_CHANGE_EVENT = 'nldd-single-column-change';
+/** Nearest ancestor app-view (light-DOM `closest`; slotted layers stay in the
+ *  consumer's light tree so this reaches across the slot boundaries), or null
+ *  when a layer is used stand-alone (e.g. a bare page in the docs). */
+export function findScrollModeProvider(host) {
+    const el = host.closest?.('nldd-app-view');
+    return el && 'registerScrollConsumer' in el ? el : null;
+}
+/**
+ * Reads the inherited `--context-scroll-mode` and reflects it to the host's
+ * `[data-scroll]` attribute so CSS can branch.
+ *
+ * In root-scroll mode the DOCUMENT scrolls (see nldd-app-view): every layout
+ * layer between the document and an nldd-page — app-view, the split views and
+ * their panes — must flow (overflow: visible) instead of clipping, so the page's
+ * sticky header/footer can stick against the document. Rather than duplicate the
+ * read-and-reflect logic in each of those components, they share this controller.
+ *
+ * The mode is derived upstream by nldd-app-view. When an app-view is present the
+ * host registers as a consumer and app-view pushes an authoritative re-read on
+ * every change (a bare `--context-scroll-mode` update would otherwise not reach
+ * the resize-polling layers in time — rAF runs before ResizeObserver). Without
+ * an app-view (a stand-alone page), it falls back to re-reading on window resize
+ * so a manual/media-query override still works. `nldd-page` keeps its own inline
+ * logic because it also has to re-wire scroll listeners.
+ */
+export class ScrollModeController {
+    constructor(host, onChange) {
+        this.mode = 'nested';
+        this._raf = 0;
+        this._provider = null;
+        this._onResize = () => {
+            if (this._raf)
+                return;
+            this._raf = requestAnimationFrame(() => {
+                this._raf = 0;
+                this.read();
+            });
+        };
+        this._host = host;
+        this._onChange = onChange;
+        host.addController(this);
+    }
+    hostConnected() {
+        this._provider = findScrollModeProvider(this._host);
+        if (this._provider) {
+            // Push-driven: the app-view pushes the authoritative mode on register
+            // and on every change. We deliberately do NOT self-read the var here —
+            // a getComputedStyle read while a freshly (re)mounted host settles can
+            // be stale (the inherited var not yet propagated), which stuck a layer
+            // re-mounted on navigation in the wrong mode until a resize.
+            this._provider.registerScrollConsumer(this);
+        }
+        else {
+            // Stand-alone (no app-view, e.g. docs): the mode comes from the
+            // inherited var; re-read on resize since it can flip at a media-query
+            // breakpoint.
+            window.addEventListener('resize', this._onResize, { passive: true });
+            this.read();
+        }
+    }
+    hostDisconnected() {
+        if (this._provider) {
+            this._provider.unregisterScrollConsumer(this);
+            this._provider = null;
+        }
+        else {
+            window.removeEventListener('resize', this._onResize);
+        }
+        if (this._raf)
+            cancelAnimationFrame(this._raf);
+    }
+    /**
+     * ScrollModeConsumer — nldd-app-view pushes the mode it derived. When a mode is
+     * passed it is applied directly; this is race-free, whereas re-reading
+     * `getComputedStyle` during a synchronous push can return a stale value for a
+     * deeply-nested host (the var may not have propagated through an ancestor's
+     * pending re-render yet). With no argument (resize / no app-view) the inherited
+     * var is re-read instead.
+     */
+    readScrollMode(mode) {
+        const next = mode ?? this._readVar();
+        if (next === this.mode)
+            return;
+        this.mode = next;
+        this._host.dataset.scroll = next;
+        this._onChange?.(next);
+    }
+    _readVar() {
+        const raw = getComputedStyle(this._host).getPropertyValue('--context-scroll-mode').trim();
+        return raw === 'root' ? 'root' : 'nested';
+    }
+    /** Re-read the inherited `--context-scroll-mode` (used on connect + resize). */
+    read() {
+        this.readScrollMode();
+    }
+}
+//# sourceMappingURL=scroll-mode-controller.js.map

package/dist/utilities/scroll-mode-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-mode-controller.js","sourceRoot":"","sources":["../../src/utilities/scroll-mode-controller.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.65",
+  "version": "0.8.67",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",