@nldd/design-system 0.8.44 → 0.8.46

package/dist/utilities/color-scheme-repaint.js

@@ -0,0 +1,88 @@
+/**
+ * Notifies subscribers when `:root[data-scheme]` flips, so they can force
+ * a repaint of any scrollable region with `light-dark()` colours.
+ *
+ * Why this exists: browsers (Chromium especially) cache off-screen tiles
+ * for composited scroll layers and don't always invalidate them when a
+ * `color-scheme` flip re-resolves `light-dark()` values. Scroll back
+ * after a theme switch and you see stale colours from the old scheme.
+ * Components with overflowing scroll containers can subscribe here and
+ * drop their compositor layer on each scheme change.
+ *
+ * The MutationObserver runs lazily — set up on first subscribe, torn
+ * down when the last subscriber unsubscribes.
+ */
+const listeners = new Set();
+let observer = null;
+function init() {
+    if (observer)
+        return;
+    observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+            if (m.attributeName === 'data-scheme') {
+                for (const l of listeners)
+                    l();
+                return;
+            }
+        }
+    });
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-scheme'],
+    });
+}
+/**
+ * Subscribe to color-scheme changes. The callback fires synchronously
+ * from the MutationObserver — before the next paint — so dropping a
+ * compositor layer from inside it invalidates stale tiles before they
+ * become visible.
+ *
+ * @returns Unsubscribe function. Tears down the global observer when
+ *          the last subscriber leaves.
+ */
+export function onColorSchemeChange(callback) {
+    init();
+    listeners.add(callback);
+    return () => {
+        listeners.delete(callback);
+        if (listeners.size === 0) {
+            observer?.disconnect();
+            observer = null;
+        }
+    };
+}
+/**
+ * Force a scrollable element to drop and recreate its compositor layer,
+ * invalidating any stale off-screen paint tiles. Preserves scrollLeft/Top
+ * so the user doesn't lose their position, and restores the caller's
+ * inline `display` value.
+ *
+ * Use this from an `onColorSchemeChange` callback.
+ *
+ * Caveat: the display:none → reflow → display cycle fires any
+ * ResizeObserver watching this element (it reports width/height 0, then
+ * the original size). Harmless for elements no one observes, but a
+ * component that observes its own scroll container should audit for
+ * resize-driven side effects before adopting this.
+ */
+export function forceScrollLayerRepaint(el) {
+    const x = el.scrollLeft;
+    const y = el.scrollTop;
+    // Save the caller's inline display so a legitimate value (e.g. an
+    // explicit `display: flex`) survives — clearing to '' would drop it.
+    const prevDisplay = el.style.display;
+    el.style.display = 'none';
+    // Synchronous reflow drops the layer; the browser doesn't paint
+    // between this and re-showing, so there's no visible flicker.
+    void el.offsetHeight;
+    el.style.display = prevDisplay;
+    el.scrollLeft = x;
+    el.scrollTop = y;
+}
+/** @internal Reset state for testing only. */
+export function _resetColorSchemeRepaintForTesting() {
+    observer?.disconnect();
+    observer = null;
+    listeners.clear();
+}
+//# sourceMappingURL=color-scheme-repaint.js.map

package/dist/utilities/color-scheme-repaint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-scheme-repaint.js","sourceRoot":"","sources":["../../src/utilities/color-scheme-repaint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAIH,MAAM,SAAS,GAAG,IAAI,GAAG,EAAY,CAAC;AACtC,IAAI,QAAQ,GAA4B,IAAI,CAAC;AAE7C,SAAS,IAAI;IACZ,IAAI,QAAQ;QAAE,OAAO;IACrB,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;QAC7C,KAAK,MAAM,CAAC,IAAI,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,CAAC,aAAa,KAAK,aAAa,EAAE,CAAC;gBACvC,KAAK,MAAM,CAAC,IAAI,SAAS;oBAAE,CAAC,EAAE,CAAC;gBAC/B,OAAO;YACR,CAAC;QACF,CAAC;IACF,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;QAC1C,UAAU,EAAE,IAAI;QAChB,eAAe,EAAE,CAAC,aAAa,CAAC;KAChC,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,mBAAmB,CAAC,QAAkB;IACrD,IAAI,EAAE,CAAC;IACP,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACxB,OAAO,GAAG,EAAE;QACX,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC3B,IAAI,SAAS,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;YAC1B,QAAQ,EAAE,UAAU,EAAE,CAAC;YACvB,QAAQ,GAAG,IAAI,CAAC;QACjB,CAAC;IACF,CAAC,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,uBAAuB,CAAC,EAAe;IACtD,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC;IACxB,MAAM,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC;IACvB,kEAAkE;IAClE,qEAAqE;IACrE,MAAM,WAAW,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC;IACrC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAC1B,gEAAgE;IAChE,8DAA8D;IAC9D,KAAK,EAAE,CAAC,YAAY,CAAC;IACrB,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,WAAW,CAAC;IAC/B,EAAE,CAAC,UAAU,GAAG,CAAC,CAAC;IAClB,EAAE,CAAC,SAAS,GAAG,CAAC,CAAC;AAClB,CAAC;AAED,8CAA8C;AAC9C,MAAM,UAAU,kCAAkC;IACjD,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,QAAQ,GAAG,IAAI,CAAC;IAChB,SAAS,CAAC,KAAK,EAAE,CAAC;AACnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.44",
+  "version": "0.8.46",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -376,6 +376,7 @@
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix",
     "lint:a11y": "eslint src/ --rule 'lit-a11y/*: error'",
+    "changelog:draft": "node scripts/changelog-draft.mjs",
     "prepare": "pre-commit install || true",
     "pretest": "npm run build:icons",
     "pretest:run": "npm run build:icons",
@@ -387,22 +388,24 @@
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@eslint/js": "^9.17.0",
+    "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^10.3.4",
-    "@storybook/addon-docs": "^10.3.4",
-    "@storybook/addon-themes": "^10.3.4",
-    "@storybook/addon-vitest": "^10.3.4",
-    "@storybook/web-components-vite": "^10.3.4",
+    "@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",
     "@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.3.4",
+    "eslint-plugin-storybook": "^10.4.0",
     "globals": "^15.14.0",
     "playwright": "^1.57.0",
     "semantic-release": "^25.0.2",
-    "storybook": "^10.3.4",
+    "storybook": "^10.4.0",
     "typescript": "^5.3.0",
     "typescript-eslint": "^8.58.0",
     "vite": "^7.3.1",

package/dist/components/content/blockquote/blockquote.i18n.d.ts

@@ -1,5 +0,0 @@
-export declare const nlddBlockquoteTranslations: {
-    'components.blockquote.attribution-prefix': string;
-};
-export type NLDDBlockquoteTranslations = typeof nlddBlockquoteTranslations;
-//# sourceMappingURL=blockquote.i18n.d.ts.map

package/dist/components/content/blockquote/blockquote.i18n.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"blockquote.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/content/blockquote/blockquote.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B;;CAEtC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC"}

package/dist/components/content/blockquote/blockquote.i18n.js

@@ -1,4 +0,0 @@
-export const nlddBlockquoteTranslations = {
-    'components.blockquote.attribution-prefix': '— ',
-};
-//# sourceMappingURL=blockquote.i18n.js.map

package/dist/components/content/blockquote/blockquote.i18n.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"blockquote.i18n.js","sourceRoot":"","sources":["../../../../src/components/content/blockquote/blockquote.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACzC,0CAA0C,EAAE,IAAI;CAChD,CAAC"}

package/dist/utilities/popover-guard.d.ts

@@ -1,10 +0,0 @@
-/**
- * Minimum ms between popover close and reopen to prevent iOS
- * touch light-dismiss from immediately reopening the popover.
- *
- * On iOS, tapping the anchor to close a popover triggers light dismiss
- * first (closing the popover), then the click handler fires and would
- * reopen it. This guard prevents reopening within the threshold.
- */
-export declare const POPOVER_REOPEN_GUARD_MS = 100;
-//# sourceMappingURL=popover-guard.d.ts.map

package/dist/utilities/popover-guard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-guard.d.ts","sourceRoot":"","sources":["../../src/utilities/popover-guard.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,MAAM,CAAC"}

package/dist/utilities/popover-guard.js

@@ -1,10 +0,0 @@
-/**
- * Minimum ms between popover close and reopen to prevent iOS
- * touch light-dismiss from immediately reopening the popover.
- *
- * On iOS, tapping the anchor to close a popover triggers light dismiss
- * first (closing the popover), then the click handler fires and would
- * reopen it. This guard prevents reopening within the threshold.
- */
-export const POPOVER_REOPEN_GUARD_MS = 100;
-//# sourceMappingURL=popover-guard.js.map

package/dist/utilities/popover-guard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-guard.js","sourceRoot":"","sources":["../../src/utilities/popover-guard.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAC"}