@nldd/design-system 0.8.64 → 0.8.66

package/dist/utilities/reflect-non-default.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reflect-non-default.d.ts","sourceRoot":"","sources":["../../src/utilities/reflect-non-default.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,KAAK,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,YAAY,EAAE,CAAC,GAAG,yBAAyB,CAAC,CAAC,CAAC,CAKjG"}

package/dist/utilities/reflect-non-default.js

@@ -0,0 +1,34 @@
+/**
+ * A Lit attribute converter for a reflected enum property whose DEFAULT value
+ * should not appear in the DOM.
+ *
+ * It reflects any non-default value to the attribute (so `:host([prop="x"])`
+ * styling and framework property binding keep working), but maps the default to
+ * *no* attribute (`toAttribute` returns null), so the DOM isn't polluted with a
+ * redundant `prop="<default>"` on every instance.
+ *
+ * Pair it with `reflect: true`. The component's default styling must then live
+ * on the bare `:host` (not `:host([prop="<default>"])`), since a default-valued
+ * element carries no attribute to select on.
+ *
+ * Known edge: if markup writes the default *explicitly* (e.g. `<nldd-button
+ * size="md">`), `fromAttribute` resolves the property to the value it already
+ * holds, so Lit's default `hasChanged` sees no change, schedules no update, and
+ * `toAttribute` never runs to strip the attribute — so that one authored default
+ * attribute stays in the DOM. Visual behavior is unaffected (styling keys off the
+ * bare `:host`); it only matters to code matching `[prop="<default>"]`, which
+ * should read the property instead. Not worth a fragile `hasChanged` workaround.
+ *
+ * @example
+ * ```ts
+ * @property({ reflect: true, converter: reflectNonDefault<Size>('md') })
+ * size: Size = 'md';
+ * ```
+ */
+export function reflectNonDefault(defaultValue) {
+    return {
+        fromAttribute: (value) => (value === null ? defaultValue : value),
+        toAttribute: (value) => (value === defaultValue ? null : value),
+    };
+}
+//# sourceMappingURL=reflect-non-default.js.map

package/dist/utilities/reflect-non-default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reflect-non-default.js","sourceRoot":"","sources":["../../src/utilities/reflect-non-default.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,iBAAiB,CAAmB,YAAe;IAClE,OAAO;QACN,aAAa,EAAE,CAAC,KAAoB,EAAK,EAAE,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAE,KAAW,CAAC;QAC1F,WAAW,EAAE,CAAC,KAAQ,EAAiB,EAAE,CAAC,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;KACjF,CAAC;AACH,CAAC"}

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.64",
+  "version": "0.8.66",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -35,6 +35,18 @@
       "types": "./dist/components/actions/menu/menu.d.ts",
       "default": "./dist/components/actions/menu/menu.js"
     },
+    "./blockquote": {
+      "types": "./dist/components/content/blockquote/blockquote.d.ts",
+      "default": "./dist/components/content/blockquote/blockquote.js"
+    },
+    "./byline": {
+      "types": "./dist/components/content/byline/byline.d.ts",
+      "default": "./dist/components/content/byline/byline.js"
+    },
+    "./code-viewer": {
+      "types": "./dist/components/content/code-viewer/code-viewer.d.ts",
+      "default": "./dist/components/content/code-viewer/code-viewer.js"
+    },
     "./icon": {
       "types": "./dist/components/content/icon/icon.d.ts",
       "default": "./dist/components/content/icon/icon.js"
@@ -43,38 +55,30 @@
       "types": "./dist/components/content/image/image.d.ts",
       "default": "./dist/components/content/image/image.js"
     },
+    "./keyboard-shortcut": {
+      "types": "./dist/components/content/keyboard-shortcut/keyboard-shortcut.d.ts",
+      "default": "./dist/components/content/keyboard-shortcut/keyboard-shortcut.js"
+    },
     "./rich-text": {
       "types": "./dist/components/content/rich-text/rich-text.d.ts",
       "default": "./dist/components/content/rich-text/rich-text.js"
     },
+    "./tag": {
+      "types": "./dist/components/content/tag/tag.d.ts",
+      "default": "./dist/components/content/tag/tag.js"
+    },
     "./title": {
       "types": "./dist/components/content/title/title.d.ts",
       "default": "./dist/components/content/title/title.js"
     },
+    "./token": {
+      "types": "./dist/components/content/token/token.d.ts",
+      "default": "./dist/components/content/token/token.js"
+    },
     "./tooltip": {
       "types": "./dist/components/content/tooltip/tooltip.d.ts",
       "default": "./dist/components/content/tooltip/tooltip.js"
     },
-    "./blockquote": {
-      "types": "./dist/components/content/blockquote/blockquote.d.ts",
-      "default": "./dist/components/content/blockquote/blockquote.js"
-    },
-    "./tag": {
-      "types": "./dist/components/content/tag/tag.d.ts",
-      "default": "./dist/components/content/tag/tag.js"
-    },
-    "./keyboard-shortcut": {
-      "types": "./dist/components/content/keyboard-shortcut/keyboard-shortcut.d.ts",
-      "default": "./dist/components/content/keyboard-shortcut/keyboard-shortcut.js"
-    },
-    "./code-viewer": {
-      "types": "./dist/components/content/code-viewer/code-viewer.d.ts",
-      "default": "./dist/components/content/code-viewer/code-viewer.js"
-    },
-    "./byline": {
-      "types": "./dist/components/content/byline/byline.d.ts",
-      "default": "./dist/components/content/byline/byline.js"
-    },
     "./form": {
       "types": "./dist/components/forms/form/form.d.ts",
       "default": "./dist/components/forms/form/form.js"
@@ -91,49 +95,37 @@
       "types": "./dist/components/forms/form-section/form-section.d.ts",
       "default": "./dist/components/forms/form-section/form-section.js"
     },
-    "./text-field": {
-      "types": "./dist/components/inputs/text-field/text-field.d.ts",
-      "default": "./dist/components/inputs/text-field/text-field.js"
+    "./checkbox": {
+      "types": "./dist/components/inputs/checkbox/checkbox.d.ts",
+      "default": "./dist/components/inputs/checkbox/checkbox.js"
     },
-    "./multi-line-text-field": {
-      "types": "./dist/components/inputs/multi-line-text-field/multi-line-text-field.d.ts",
-      "default": "./dist/components/inputs/multi-line-text-field/multi-line-text-field.js"
+    "./checkbox-field": {
+      "types": "./dist/components/inputs/checkbox-field/checkbox-field.d.ts",
+      "default": "./dist/components/inputs/checkbox-field/checkbox-field.js"
     },
     "./code-editor": {
       "types": "./dist/components/inputs/code-editor/code-editor.d.ts",
       "default": "./dist/components/inputs/code-editor/code-editor.js"
     },
-    "./password-field": {
-      "types": "./dist/components/inputs/password-field/password-field.d.ts",
-      "default": "./dist/components/inputs/password-field/password-field.js"
-    },
-    "./search-field": {
-      "types": "./dist/components/inputs/search-field/search-field.d.ts",
-      "default": "./dist/components/inputs/search-field/search-field.js"
-    },
-    "./number-field": {
-      "types": "./dist/components/inputs/number-field/number-field.d.ts",
-      "default": "./dist/components/inputs/number-field/number-field.js"
+    "./combo-box": {
+      "types": "./dist/components/inputs/combo-box/combo-box.d.ts",
+      "default": "./dist/components/inputs/combo-box/combo-box.js"
     },
     "./dropdown": {
       "types": "./dist/components/inputs/dropdown/dropdown.d.ts",
       "default": "./dist/components/inputs/dropdown/dropdown.js"
     },
-    "./combo-box": {
-      "types": "./dist/components/inputs/combo-box/combo-box.d.ts",
-      "default": "./dist/components/inputs/combo-box/combo-box.js"
-    },
-    "./stepper": {
-      "types": "./dist/components/inputs/stepper/stepper.d.ts",
-      "default": "./dist/components/inputs/stepper/stepper.js"
+    "./multi-line-text-field": {
+      "types": "./dist/components/inputs/multi-line-text-field/multi-line-text-field.d.ts",
+      "default": "./dist/components/inputs/multi-line-text-field/multi-line-text-field.js"
     },
-    "./checkbox": {
-      "types": "./dist/components/inputs/checkbox/checkbox.d.ts",
-      "default": "./dist/components/inputs/checkbox/checkbox.js"
+    "./number-field": {
+      "types": "./dist/components/inputs/number-field/number-field.d.ts",
+      "default": "./dist/components/inputs/number-field/number-field.js"
     },
-    "./checkbox-field": {
-      "types": "./dist/components/inputs/checkbox-field/checkbox-field.d.ts",
-      "default": "./dist/components/inputs/checkbox-field/checkbox-field.js"
+    "./password-field": {
+      "types": "./dist/components/inputs/password-field/password-field.d.ts",
+      "default": "./dist/components/inputs/password-field/password-field.js"
     },
     "./radio-button": {
       "types": "./dist/components/inputs/radio-button/radio-button.d.ts",
@@ -147,6 +139,18 @@
       "types": "./dist/components/inputs/radio-button-group/radio-button-group.d.ts",
       "default": "./dist/components/inputs/radio-button-group/radio-button-group.js"
     },
+    "./search-field": {
+      "types": "./dist/components/inputs/search-field/search-field.d.ts",
+      "default": "./dist/components/inputs/search-field/search-field.js"
+    },
+    "./segmented-control": {
+      "types": "./dist/components/inputs/segmented-control/segmented-control.d.ts",
+      "default": "./dist/components/inputs/segmented-control/segmented-control.js"
+    },
+    "./stepper": {
+      "types": "./dist/components/inputs/stepper/stepper.d.ts",
+      "default": "./dist/components/inputs/stepper/stepper.js"
+    },
     "./switch": {
       "types": "./dist/components/inputs/switch/switch.d.ts",
       "default": "./dist/components/inputs/switch/switch.js"
@@ -155,9 +159,13 @@
       "types": "./dist/components/inputs/switch-field/switch-field.d.ts",
       "default": "./dist/components/inputs/switch-field/switch-field.js"
     },
-    "./segmented-control": {
-      "types": "./dist/components/inputs/segmented-control/segmented-control.d.ts",
-      "default": "./dist/components/inputs/segmented-control/segmented-control.js"
+    "./text-editor": {
+      "types": "./dist/components/inputs/text-editor/text-editor.d.ts",
+      "default": "./dist/components/inputs/text-editor/text-editor.js"
+    },
+    "./text-field": {
+      "types": "./dist/components/inputs/text-field/text-field.d.ts",
+      "default": "./dist/components/inputs/text-field/text-field.js"
     },
     "./toggle-button": {
       "types": "./dist/components/inputs/toggle-button/toggle-button.d.ts",
@@ -167,9 +175,9 @@
       "types": "./dist/components/inputs/toggle-button-group/toggle-button-group.d.ts",
       "default": "./dist/components/inputs/toggle-button-group/toggle-button-group.js"
     },
-    "./token": {
-      "types": "./dist/components/inputs/token/token.d.ts",
-      "default": "./dist/components/inputs/token/token.js"
+    "./token-field": {
+      "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",
@@ -389,6 +397,7 @@
     },
     "./styles": "./dist/css/global.css",
     "./styles/tokens": "./dist/css/settings.css",
+    "./styles/fouc": "./dist/css/fouc.css",
     "./tokens": {
       "types": "./dist/assets/styles/tokens.d.ts",
       "default": "./dist/assets/styles/tokens.js"
@@ -407,7 +416,7 @@
   },
   "scripts": {
     "build": "npm run build:styles && npm run validate:styles && npm run build:components",
-    "build:styles": "mkdir -p dist/css dist/fonts && cp src/assets/styles/settings.css dist/css/settings.css && cp src/assets/styles/reset.css dist/css/reset.css && cp src/assets/styles/palettes.generated.css dist/css/palettes.generated.css && cp src/components/content/rich-text/rich-text.css dist/css/rich-text.css && cp src/components/forms/form/form.css dist/css/form.css && cp src/components/forms/form-section/form-section.css dist/css/form-section.css && printf '@import \"./settings.css\";\\n@import \"./reset.css\";\\n@import \"./rich-text.css\";\\n@import \"./form-section.css\";\\n@import \"./form.css\";\\n' > dist/css/global.css && cp src/assets/fonts/*.woff2 dist/fonts/",
+    "build:styles": "mkdir -p dist/css dist/fonts && cp src/assets/styles/settings.css dist/css/settings.css && cp src/assets/styles/reset.css dist/css/reset.css && cp src/assets/styles/palettes.generated.css dist/css/palettes.generated.css && cp src/components/content/rich-text/rich-text.css dist/css/rich-text.css && cp src/components/forms/form/form.css dist/css/form.css && cp src/components/forms/form-section/form-section.css dist/css/form-section.css && cp src/assets/styles/fouc.css dist/css/fouc.css && printf '@import \"./settings.css\";\\n@import \"./reset.css\";\\n@import \"./rich-text.css\";\\n@import \"./form-section.css\";\\n@import \"./form.css\";\\n@import \"./fouc.css\";\\n' > dist/css/global.css && cp src/assets/fonts/*.woff2 dist/fonts/",
     "generate:palettes": "node scripts/generate-palettes.js",
     "generate:component-reference": "node scripts/generate-component-reference.js",
     "generate:skill-changelog": "node scripts/generate-skill-changelog.js",
@@ -449,22 +458,21 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^7.1.0",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^10.4.0",
-    "@storybook/addon-docs": "^10.4.0",
-    "@storybook/addon-themes": "^10.4.0",
-    "@storybook/addon-vitest": "^10.4.0",
-    "@storybook/web-components-vite": "^10.4.0",
-    "@types/prismjs": "^1.26.6",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-themes": "^10.4.6",
+    "@storybook/addon-vitest": "^10.4.6",
+    "@storybook/web-components-vite": "^10.4.6",
     "@vitest/browser-playwright": "^4.0.16",
     "@vitest/coverage-v8": "^4.0.16",
     "conventional-changelog": "^7.2.0",
     "eslint": "^9.17.0",
     "eslint-plugin-lit-a11y": "^5.1.1",
-    "eslint-plugin-storybook": "^10.4.0",
+    "eslint-plugin-storybook": "^10.4.6",
     "globals": "^15.14.0",
     "playwright": "^1.57.0",
     "semantic-release": "^25.0.2",
-    "storybook": "^10.4.0",
+    "storybook": "^10.4.6",
     "typescript": "^5.3.0",
     "typescript-eslint": "^8.58.0",
     "vite": "^7.3.1",
@@ -481,9 +489,25 @@
   ],
   "license": "EUPL-1.2",
   "dependencies": {
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.10.4",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-rust": "^6.0.2",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/legacy-modes": "^6.5.3",
+    "@codemirror/state": "^6.7.0",
+    "@codemirror/view": "^6.43.4",
     "@floating-ui/dom": "^1.7.6",
+    "@lezer/highlight": "^1.2.3",
     "@rijkshuisstijl-community/font": "^1.1.2",
-    "lit": "^3.3.1",
-    "prismjs": "^1.30.0"
+    "lit": "^3.3.1"
   }
 }