@nldd/design-system 0.8.96 → 0.8.97

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

@@ -1,7 +1,7 @@
 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
+ *  (or expands out of) a single visible column. nldd-shell 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 {
@@ -10,44 +10,57 @@ export interface SingleColumnChangeDetail {
 /** 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)
+     * Apply the derived scroll mode. shell passes the mode it derived so the
+     * consumer applies it directly; called with no argument (resize / no shell)
      * 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. */
+/** nldd-shell — 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
+/** Nearest ancestor shell (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).
  *
  *  An overlay ends the search: a sheet or a modal dialog is its own scroll
  *  container and its own top edge, so a page inside one owns its scroller
- *  whatever the app around it does. Without this the app-view would push its
+ *  whatever the app around it does. Without this the shell would push its
  *  root mode straight through the overlay and the page's sticky header would
  *  stick against the document, over the content of the overlay. The overlays
  *  reset --context-scroll-mode as well, which is what the stand-alone read
  *  below then finds. */
 export declare function findScrollModeProvider(host: Element): ScrollModeProvider | null;
+/**
+ * Hands `adopt` the provider above `host` once it is defined, when it was not
+ * yet at the moment `host` connected.
+ *
+ * Custom elements upgrade in the order their modules are defined, and an app
+ * does not control that: importing nldd-sidebar-section defines nldd-page, and
+ * a route that loads before its shell defines the page before the shell. The
+ * provider is then in the DOM but has no `registerScrollConsumer` yet, so
+ * findScrollModeProvider returns null and the layer starts out stand-alone.
+ * This lets it register as soon as the provider is defined. Nothing happens
+ * when the host has left the DOM by then, or sits under another provider.
+ */
+export declare function whenScrollModeProviderDefined(host: Element, adopt: (provider: ScrollModeProvider) => void): void;
 /**
  * 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
+ * In root-scroll mode the DOCUMENT scrolls (see nldd-shell): every layout
+ * layer between the document and an nldd-page — shell, 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
+ * The mode is derived upstream by nldd-shell. When a shell is present the
+ * host registers as a consumer and shell 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
+ * a shell (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.
  */
@@ -59,13 +72,16 @@ export declare class ScrollModeController implements ReactiveController, ScrollM
     private _provider;
     constructor(host: ReactiveControllerHost & HTMLElement, onChange?: (mode: ScrollMode) => void);
     hostConnected(): void;
+    /** Switches from stand-alone to push once a provider that was not yet
+     *  defined at connect is. */
+    private _adopt;
     hostDisconnected(): void;
     /**
-     * ScrollModeConsumer — nldd-app-view pushes the mode it derived. When a mode is
+     * ScrollModeConsumer — nldd-shell 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
+     * pending re-render yet). With no argument (resize / no shell) the inherited
      * var is re-read instead.
      */
     readScrollMode(mode?: ScrollMode): void;

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

@@ -1 +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;;;;;;;;;;wBAUwB;AACxB,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"}
+{"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,kFAAkF;AAClF,MAAM,WAAW,kBAAkB;IAClC,sBAAsB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC3D,wBAAwB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;CAC7D;AAID;;;;;;;;;;wBAUwB;AACxB,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,OAAO,GAAG,kBAAkB,GAAG,IAAI,CAG/E;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,GAAG,IAAI,CAQhH;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;IAmBrB;iCAC6B;IAC7B,OAAO,CAAC,MAAM,CAKZ;IAEF,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

@@ -1,37 +1,62 @@
 /** 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
+ *  (or expands out of) a single visible column. nldd-shell 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
+const PROVIDER_SELECTOR = 'nldd-shell, nldd-sheet, nldd-modal-dialog';
+/** Nearest ancestor shell (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).
  *
  *  An overlay ends the search: a sheet or a modal dialog is its own scroll
  *  container and its own top edge, so a page inside one owns its scroller
- *  whatever the app around it does. Without this the app-view would push its
+ *  whatever the app around it does. Without this the shell would push its
  *  root mode straight through the overlay and the page's sticky header would
  *  stick against the document, over the content of the overlay. The overlays
  *  reset --context-scroll-mode as well, which is what the stand-alone read
  *  below then finds. */
 export function findScrollModeProvider(host) {
-    const el = host.closest?.('nldd-app-view, nldd-sheet, nldd-modal-dialog');
+    const el = host.closest?.(PROVIDER_SELECTOR);
     return el && 'registerScrollConsumer' in el ? el : null;
 }
+/**
+ * Hands `adopt` the provider above `host` once it is defined, when it was not
+ * yet at the moment `host` connected.
+ *
+ * Custom elements upgrade in the order their modules are defined, and an app
+ * does not control that: importing nldd-sidebar-section defines nldd-page, and
+ * a route that loads before its shell defines the page before the shell. The
+ * provider is then in the DOM but has no `registerScrollConsumer` yet, so
+ * findScrollModeProvider returns null and the layer starts out stand-alone.
+ * This lets it register as soon as the provider is defined. Nothing happens
+ * when the host has left the DOM by then, or sits under another provider.
+ */
+export function whenScrollModeProviderDefined(host, adopt) {
+    const el = host.closest?.(PROVIDER_SELECTOR);
+    if (!el || 'registerScrollConsumer' in el)
+        return;
+    void customElements.whenDefined(el.localName).then(() => {
+        if (!host.isConnected)
+            return;
+        const provider = findScrollModeProvider(host);
+        if (provider && provider === el)
+            adopt(provider);
+    });
+}
 /**
  * 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
+ * In root-scroll mode the DOCUMENT scrolls (see nldd-shell): every layout
+ * layer between the document and an nldd-page — shell, 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
+ * The mode is derived upstream by nldd-shell. When a shell is present the
+ * host registers as a consumer and shell 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
+ * a shell (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.
  */
@@ -40,6 +65,15 @@ export class ScrollModeController {
         this.mode = 'nested';
         this._raf = 0;
         this._provider = null;
+        /** Switches from stand-alone to push once a provider that was not yet
+         *  defined at connect is. */
+        this._adopt = (provider) => {
+            if (this._provider)
+                return;
+            window.removeEventListener('resize', this._onResize);
+            this._provider = provider;
+            provider.registerScrollConsumer(this);
+        };
         this._onResize = () => {
             if (this._raf)
                 return;
@@ -55,7 +89,7 @@ export class ScrollModeController {
     hostConnected() {
         this._provider = findScrollModeProvider(this._host);
         if (this._provider) {
-            // Push-driven: the app-view pushes the authoritative mode on register
+            // Push-driven: the shell 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
@@ -63,11 +97,12 @@ export class ScrollModeController {
             this._provider.registerScrollConsumer(this);
         }
         else {
-            // Stand-alone (no app-view, e.g. docs): the mode comes from the
+            // Stand-alone (no shell, 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();
+            whenScrollModeProviderDefined(this._host, this._adopt);
         }
     }
     hostDisconnected() {
@@ -82,11 +117,11 @@ export class ScrollModeController {
             cancelAnimationFrame(this._raf);
     }
     /**
-     * ScrollModeConsumer — nldd-app-view pushes the mode it derived. When a mode is
+     * ScrollModeConsumer — nldd-shell 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
+     * pending re-render yet). With no argument (resize / no shell) the inherited
      * var is re-read instead.
      */
     readScrollMode(mode) {

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

@@ -1 +1 @@
-{"version":3,"file":"scroll-mode-controller.js","sourceRoot":"","sources":["../../src/utilities/scroll-mode-controller.ts"],"names":[],"mappings":"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"}
+{"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.96",
+  "version": "0.8.97",
   "description": "Designsysteem voor de Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -218,9 +218,9 @@
       "types": "./dist/components/inputs/token-field/token-field.d.ts",
       "default": "./dist/components/inputs/token-field/token-field.js"
     },
-    "./app-view": {
-      "types": "./dist/components/layout/app-view/app-view.d.ts",
-      "default": "./dist/components/layout/app-view/app-view.js"
+    "./shell": {
+      "types": "./dist/components/layout/shell/shell.d.ts",
+      "default": "./dist/components/layout/shell/shell.js"
     },
     "./bar-split-view": {
       "types": "./dist/components/layout/split-views/bar-split-view/bar-split-view.d.ts",

package/dist/components/layout/app-view/app-view.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"app-view.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/app-view/app-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAc,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAyBvH,qBACa,WAAY,SAAQ,UAAW,YAAW,kBAAkB;IACxE,OAAgB,MAAM,0BAAiB;IAGvC,UAAU,EAAE,MAAM,GAAG,QAAQ,CAAU;IAIvC,OAAO,CAAC,gBAAgB,CAAiC;IAIzD,OAAO,CAAC,YAAY,CAA2B;IAK/C,OAAO,CAAC,WAAW,CAAiE;IAIpF,gBAAgB;IAChB,sBAAsB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI;IAe1D,gBAAgB;IAChB,wBAAwB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI;IAa5D,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,qBAAqB,CAE3B;IAEF;;;;;;;OAOG;IACH,OAAO,CAAC,mBAAmB;IAqBlB,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAsBrC,OAAO,CAAC,gBAAgB;IAWf,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAM/C,OAAO,CAAC,oBAAoB;IAOnB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,WAAW,CAAC;KAC7B;CACD"}

package/dist/components/layout/app-view/app-view.js.map

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

package/dist/components/layout/app-view/app-view.styles.d.ts

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

package/dist/components/layout/app-view/app-view.styles.d.ts.map

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

package/dist/components/layout/app-view/app-view.styles.js.map

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

package/dist/components/layout/app-view/app-view.template.d.ts

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

package/dist/components/layout/app-view/app-view.template.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"app-view.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/app-view/app-view.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,wBAAgB,eAAe,CAAC,UAAU,EAAE,WAAW,GAAG,cAAc,CAMvE"}

package/dist/components/layout/app-view/app-view.template.js

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

package/dist/components/layout/app-view/app-view.template.js.map

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

package/dist/components/palettes.html

@@ -1,245 +0,0 @@
-<!DOCTYPE html>
-<html lang="nl" data-scheme="light">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>NLDD Paletten</title>
-	<link rel="stylesheet" href="/css/settings.css">
-	<style>
-		body {
-			margin: 0;
-			padding: 2rem;
-			font-family: 'RijksSansVF', system-ui, sans-serif;
-			background: light-dark(#fff, #111);
-			color: light-dark(#111, #fff);
-		}
-
-		header {
-			display: flex;
-			align-items: baseline;
-			justify-content: space-between;
-			gap: 1rem;
-			max-width: 1400px;
-			margin: 0 auto 2rem;
-		}
-
-		h1 {
-			margin: 0;
-			font-size: 1.5rem;
-			font-weight: 600;
-		}
-
-		h2 {
-			margin: 2rem 0 0.5rem;
-			font-size: 1rem;
-			font-weight: 600;
-			text-transform: capitalize;
-			display: flex;
-			align-items: baseline;
-			gap: 0.75rem;
-		}
-
-		h2 small {
-			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-			font-size: 0.75rem;
-			opacity: 0.6;
-			font-weight: 400;
-		}
-
-		main {
-			max-width: 1400px;
-			margin: 0 auto;
-		}
-
-		section + section h1 {
-			margin-top: 3rem;
-		}
-
-		.section-title {
-			margin: 2.5rem 0 0.5rem;
-			font-size: 0.875rem;
-			font-weight: 600;
-			text-transform: uppercase;
-			letter-spacing: 0.05em;
-			opacity: 0.6;
-		}
-
-		.strip {
-			display: grid;
-			grid-template-columns: repeat(25, 1fr);
-			gap: 2px;
-			border-radius: 6px;
-			overflow: hidden;
-		}
-
-		.swatch {
-			aspect-ratio: 1 / 2;
-			display: flex;
-			flex-direction: column;
-			justify-content: flex-end;
-			padding: 4px;
-			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-			font-size: 9px;
-			line-height: 1;
-			position: relative;
-		}
-
-		.swatch.light-text { color: rgba(255,255,255,0.85); }
-		.swatch.dark-text { color: rgba(0,0,0,0.7); }
-
-		.swatch span {
-			text-align: center;
-		}
-
-		.swatch.is-ref::before {
-			content: '★';
-			position: absolute;
-			top: 4px;
-			right: 4px;
-			font-size: 10px;
-		}
-
-		button.toggle {
-			padding: 0.4rem 0.8rem;
-			border: 1px solid currentColor;
-			background: transparent;
-			color: inherit;
-			border-radius: 4px;
-			font: inherit;
-			font-size: 0.8rem;
-			cursor: pointer;
-		}
-
-		button.toggle:hover {
-			background: light-dark(#0001, #fff1);
-		}
-
-		footer {
-			max-width: 1400px;
-			margin: 3rem auto 0;
-			font-size: 0.75rem;
-			opacity: 0.6;
-			line-height: 1.5;
-		}
-
-		footer code {
-			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-		}
-	</style>
-</head>
-<body>
-	<header>
-		<h1>NLDD Paletten</h1>
-		<button class="toggle" type="button" aria-label="Wissel kleurenschema">Light / Dark</button>
-	</header>
-
-	<main>
-		<div class="section-title">Functionele aliassen</div>
-		<div id="aliases"></div>
-
-		<div class="section-title">Descriptive paletten</div>
-		<div id="descriptive"></div>
-	</main>
-
-	<footer>
-		<p>★ markeert de step die het dichtst bij de oorspronkelijke referentiekleur ligt.
-		Step 500 = peak chroma. Plateau van mirror(ref) tot ref op volle chroma; daarbuiten taper.</p>
-		<p>Hex-waarden vind je in <code>src/assets/styles/palettes.generated.css</code>.</p>
-	</footer>
-
-	<script type="module">
-		const STEPS = [0, 25, 50, 75, 100, 150, 200, 250, 300, 350, 400, 450, 500,
-			550, 600, 650, 700, 750, 800, 850, 900, 925, 950, 975, 1000];
-
-		const ALIASES = ['accent', 'critical', 'mark', 'neutral', 'success', 'warning'];
-
-		const DESCRIPTIVE = [
-			{ name: 'coolgray',    hex: '#64748B' },
-			{ name: 'lintblauw',   hex: '#154273' },
-			{ name: 'donkerblauw', hex: '#01689B' },
-			{ name: 'hemelblauw',  hex: '#007BC7' },
-			{ name: 'lichtblauw',  hex: '#8FCAE7' },
-			{ name: 'paars',       hex: '#42145F' },
-			{ name: 'violet',      hex: '#A90061' },
-			{ name: 'robijnrood',  hex: '#CA005D' },
-			{ name: 'roze',        hex: '#F092CD' },
-			{ name: 'rood',        hex: '#D52B1E' },
-			{ name: 'oranje',      hex: '#E17000' },
-			{ name: 'donkergeel',  hex: '#FFB612' },
-			{ name: 'geel',        hex: '#F9E11E' },
-			{ name: 'donkerbruin', hex: '#673327' },
-			{ name: 'bruin',       hex: '#94710A' },
-			{ name: 'donkergroen', hex: '#275937' },
-			{ name: 'groen',       hex: '#39870C' },
-			{ name: 'mosgroen',    hex: '#777B00' },
-			{ name: 'mintgroen',   hex: '#76D2B6' },
-		];
-
-		// WCAG luminance from hex
-		function relLum(hex) {
-			const c = hex.slice(1).match(/.{2}/g).map(h => {
-				const v = parseInt(h, 16) / 255;
-				return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
-			});
-			return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-		}
-
-		// Find the step whose target_lum is closest to the reference color's lum
-		function nearestStep(refHex) {
-			const lum = relLum(refHex);
-			const centerLum = Math.sqrt(1.05 * 0.05) - 0.05;
-			const logTarget = Math.log(Math.max(lum, 0.0001) + 0.05);
-			const logWhite = Math.log(1.05);
-			const logCenter = Math.log(centerLum + 0.05);
-			const logBlack = Math.log(0.05);
-
-			let pos;
-			if (logTarget >= logCenter) {
-				const t = (logTarget - logWhite) / (logCenter - logWhite);
-				pos = Math.max(0, Math.min(0.5, t * 0.5));
-			} else {
-				const t = (logTarget - logCenter) / (logBlack - logCenter);
-				pos = Math.max(0.5, Math.min(1.0, 0.5 + t * 0.5));
-			}
-			const target = pos * 1000;
-			return STEPS.reduce((a, b) =>
-				Math.abs(b - target) < Math.abs(a - target) ? b : a
-			);
-		}
-
-		// Decide light/dark text per swatch based on step (rough proxy for lightness in current scheme)
-		function textClass(step, scheme) {
-			// In light scheme, lower steps = lighter; in dark scheme, mirrored
-			const effective = scheme === 'dark' ? 1000 - step : step;
-			return effective < 500 ? 'dark-text' : 'light-text';
-		}
-
-		function renderPalette(name, refHex) {
-			const refStep = refHex ? nearestStep(refHex) : null;
-			const scheme = document.documentElement.dataset.scheme;
-			const swatches = STEPS.map(step => {
-				const cls = ['swatch', textClass(step, scheme)];
-				if (step === refStep) cls.push('is-ref');
-				return `<div class="${cls.join(' ')}" style="background:var(--primitives-color-${name}-${step})"><span>${step}</span></div>`;
-			}).join('');
-			const refLabel = refHex ? `<small>${refHex}</small>` : '';
-			return `<h2>${name}${refLabel}</h2><div class="strip">${swatches}</div>`;
-		}
-
-		function render() {
-			document.getElementById('aliases').innerHTML =
-				ALIASES.map(name => renderPalette(name)).join('');
-			document.getElementById('descriptive').innerHTML =
-				DESCRIPTIVE.map(({ name, hex }) => renderPalette(name, hex)).join('');
-		}
-
-		document.querySelector('button.toggle').addEventListener('click', () => {
-			const root = document.documentElement;
-			root.dataset.scheme = root.dataset.scheme === 'light' ? 'dark' : 'light';
-			render();
-		});
-
-		render();
-	</script>
-</body>
-</html>