@nldd/design-system 0.8.44 → 0.8.45

package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js

@@ -9,84 +9,86 @@ export const inlineDialogStyles = css `
 		--_icon-color: var(--components-inline-dialog-icon-color);
 
 		display: flex;
-		justify-content: center;
-		align-items: center;
 		flex-grow: 1;
+		align-items: center;
+		justify-content: center;
 	}
 
-	:host([hidden]) {
-		display: none;
+	:host([variant="alert"]) {
+		--_icon-color: var(--components-inline-dialog-icon-warning-color);
 	}
 
-	:host([variant='alert']) {
+	:host([variant="success"]) {
+		--_icon-color: var(--components-inline-dialog-icon-success-color);
+	}
+
+	:host([icon-color="secondary"]) {
+		--_icon-color: var(--components-inline-dialog-icon-secondary-color);
+	}
+
+	:host([icon-color="accent"]) {
+		--_icon-color: var(--components-inline-dialog-icon-accent-color);
+	}
+
+	:host([icon-color="critical"]) {
+		--_icon-color: var(--components-inline-dialog-icon-critical-color);
+	}
+
+	:host([icon-color="warning"]) {
 		--_icon-color: var(--components-inline-dialog-icon-warning-color);
 	}
 
-	:host([variant='success']) {
+	:host([icon-color="success"]) {
 		--_icon-color: var(--components-inline-dialog-icon-success-color);
 	}
 
-	:host([icon-color='secondary']) { --_icon-color: var(--components-inline-dialog-icon-secondary-color); }
-	:host([icon-color='accent'])    { --_icon-color: var(--components-inline-dialog-icon-accent-color); }
-	:host([icon-color='critical'])  { --_icon-color: var(--components-inline-dialog-icon-critical-color); }
-	:host([icon-color='warning'])   { --_icon-color: var(--components-inline-dialog-icon-warning-color); }
-	:host([icon-color='success'])   { --_icon-color: var(--components-inline-dialog-icon-success-color); }
+	:host([hidden]) {
+		display: none;
+	}
 
 
-	/* # Body */
+	/* # Elements */
 
 	.inline-dialog__body {
-		display: flex;
 		box-sizing: border-box;
+		display: flex;
 		max-width: var(--primitives-area-480);
 		flex-direction: column;
-		align-items: center;
 		flex-grow: 1;
+		align-items: center;
 	}
 
-
-	/* # Icon */
-
 	.inline-dialog__icon {
 		display: flex;
 		width: var(--_icon-size);
 		height: var(--_icon-size);
+		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
-		flex-shrink: 0;
 		color: var(--_icon-color);
 	}
 
-
-	/* # Text */
-
 	.inline-dialog__text {
 		margin: 0;
 		text-align: center;
-		font: var(--primitives-font-body-md-bold-tight);
 		color: var(--semantics-content-color);
+		font: var(--primitives-font-body-md-bold-tight);
 		text-wrap: pretty;
 	}
 
 	.inline-dialog__text:focus-visible {
-		box-shadow: none;
 		outline: none;
+		box-shadow: none;
 	}
 
-
-	/* # Supporting text */
-
 	.inline-dialog__supporting-text {
 		margin: 0;
 		text-align: center;
-		font: var(--primitives-font-body-sm-regular-tight);
 		color: var(--semantics-content-color);
+		font: var(--primitives-font-body-sm-regular-tight);
 		text-wrap: pretty;
 	}
 
-
-	/* # Content */
-
 	.inline-dialog__content {
 		width: 100%;
 	}
@@ -95,9 +97,6 @@ export const inlineDialogStyles = css `
 		display: none;
 	}
 
-
-	/* # Actions */
-
 	.inline-dialog__actions {
 		width: 100%;
 		padding-top: var(--primitives-space-16);

package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GpC,CAAC"}
+{"version":3,"file":"inline-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GpC,CAAC"}

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,yBA+F7B,CAAC"}
+{"version":3,"file":"modal-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,yBA2F7B,CAAC"}

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js

@@ -23,16 +23,15 @@ export const modalDialogStyles = css `
 
 	.modal-dialog {
 		box-sizing: border-box;
+		outline: none;
 		border: none;
 		border-radius: var(--semantics-overlays-corner-radius);
 		box-shadow: var(--semantics-overlays-box-shadow);
-		outline: none;
 		background-color: var(--semantics-surfaces-background-color);
-		max-width: var(--primitives-area-480);
 		width: calc(100% - var(--primitives-space-16) * 2);
+		max-width: var(--primitives-area-480);
 		max-height: var(--_max-height);
 		overflow-y: auto;
-
 		padding: var(--primitives-space-16);
 
 		@media (min-width: ${mdMin}) {
@@ -45,15 +44,30 @@ export const modalDialogStyles = css `
 	}
 
 	.modal-dialog:focus-visible:not(.is-pointer-focus) {
-		box-shadow: var(--semantics-focus-ring-box-shadow), var(--semantics-overlays-box-shadow);
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow), var(--semantics-overlays-box-shadow);
 	}
 
 	.modal-dialog::backdrop {
 		background: var(--semantics-overlays-backdrop-color);
 	}
 
+	.modal-dialog[open] {
+		animation: modal-dialog-in var(--_animation-duration) var(--_animation-easing) both;
+	}
+
+	.modal-dialog.is-closing {
+		animation: modal-dialog-out var(--_animation-duration) var(--_animation-easing) both;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.modal-dialog[open],
+		.modal-dialog.is-closing {
+			animation: none;
+		}
+	}
+
 
 	/* # Keyframes */
 
@@ -78,23 +92,5 @@ export const modalDialogStyles = css `
 			transform: scale(0.95);
 		}
 	}
-
-	.modal-dialog[open] {
-		animation: modal-dialog-in var(--_animation-duration) var(--_animation-easing) both;
-	}
-
-	.modal-dialog.is-closing {
-		animation: modal-dialog-out var(--_animation-duration) var(--_animation-easing) both;
-	}
-
-
-	/* # Reduced motion */
-
-	@media (prefers-reduced-motion: reduce) {
-		.modal-dialog[open],
-		.modal-dialog.is-closing {
-			animation: none;
-		}
-	}
 `;
 //# sourceMappingURL=modal-dialog.styles.js.map

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAkCb,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3B,CAAC"}
+{"version":3,"file":"modal-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAiCb,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D3B,CAAC"}

package/dist/css/settings.css

@@ -783,9 +783,9 @@
 
 	/* ## Links */
 
-	--semantics-links-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
-	--semantics-links-is-hovered-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
-	--semantics-links-is-active-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
+	--semantics-links-color: light-dark(var(--primitives-color-lintblauw-550), var(--primitives-color-lintblauw-650));
+	--semantics-links-is-hovered-color: light-dark(var(--primitives-color-lintblauw-600), var(--primitives-color-lintblauw-700));
+	--semantics-links-is-active-color: light-dark(var(--primitives-color-lintblauw-650), var(--primitives-color-lintblauw-750));
 
 	/* ## Blockquotes */
 
@@ -1074,6 +1074,33 @@
 
 	--components-form-field-gap: var(--primitives-space-2);
 
+	/* ## Icon — rijkskleuren
+
+	   Shade per rijkskleur picked to keep ≥400 shade distance from the
+	   surface it's painted on (default = neutral-0 / dark mode = neutral-100;
+	   tinted = neutral-25 / neutral-75). Within that contrast budget the
+	   shade closest to --primitives-color-reference-X is preferred. Middle
+	   shades (500) are self-mirroring so a single ref is used. */
+
+	--components-icon-color-lintblauw-color: light-dark(var(--primitives-color-lintblauw-750), var(--primitives-color-lintblauw-500));
+	--components-icon-color-donkerblauw-color: light-dark(var(--primitives-color-donkerblauw-600), var(--primitives-color-donkerblauw-500));
+	--components-icon-color-hemelblauw-color: var(--primitives-color-hemelblauw-500);
+	--components-icon-color-lichtblauw-color: light-dark(var(--primitives-color-lichtblauw-450), var(--primitives-color-lichtblauw-800));
+	--components-icon-color-paars-color: light-dark(var(--primitives-color-paars-850), var(--primitives-color-paars-500));
+	--components-icon-color-violet-color: light-dark(var(--primitives-color-violet-650), var(--primitives-color-violet-500));
+	--components-icon-color-robijnrood-color: light-dark(var(--primitives-color-robijnrood-550), var(--primitives-color-robijnrood-500));
+	--components-icon-color-roze-color: light-dark(var(--primitives-color-roze-450), var(--primitives-color-roze-750));
+	--components-icon-color-rood-color: light-dark(var(--primitives-color-rood-550), var(--primitives-color-rood-500));
+	--components-icon-color-oranje-color: light-dark(var(--primitives-color-oranje-450), var(--primitives-color-oranje-600));
+	--components-icon-color-donkergeel-color: light-dark(var(--primitives-color-donkergeel-450), var(--primitives-color-donkergeel-800));
+	--components-icon-color-geel-color: light-dark(var(--primitives-color-geel-450), var(--primitives-color-geel-900));
+	--components-icon-color-donkerbruin-color: light-dark(var(--primitives-color-donkerbruin-750), var(--primitives-color-donkerbruin-500));
+	--components-icon-color-bruin-color: var(--primitives-color-bruin-500);
+	--components-icon-color-donkergroen-color: light-dark(var(--primitives-color-donkergroen-700), var(--primitives-color-donkergroen-500));
+	--components-icon-color-groen-color: var(--primitives-color-groen-500);
+	--components-icon-color-mosgroen-color: var(--primitives-color-mosgroen-500);
+	--components-icon-color-mintgroen-color: light-dark(var(--primitives-color-mintgroen-450), var(--primitives-color-mintgroen-800));
+
 	/* ## Inline dialog */
 
 	--components-inline-dialog-icon-color: var(--semantics-content-color);
@@ -1149,6 +1176,9 @@
 	--components-menu-item-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);
 	--components-menu-item-is-expanded-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
 	--components-menu-item-is-expanded-content-color: var(--primitives-color-neutral-1000);
+	--components-menu-item-is-destructive-content-color: var(--semantics-content-critical-color);
+	--components-menu-item-is-destructive-is-highlighted-background-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-650));
+	--components-menu-item-is-destructive-is-highlighted-content-color: var(--primitives-color-neutral-0);
 
 	/* ## Menu bar */
 

package/dist/utilities/color-scheme-repaint.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+type Listener = () => void;
+/**
+ * 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 declare function onColorSchemeChange(callback: Listener): () => void;
+/**
+ * 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 declare function forceScrollLayerRepaint(el: HTMLElement): void;
+/** @internal Reset state for testing only. */
+export declare function _resetColorSchemeRepaintForTesting(): void;
+export {};
+//# sourceMappingURL=color-scheme-repaint.d.ts.map

package/dist/utilities/color-scheme-repaint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-scheme-repaint.d.ts","sourceRoot":"","sources":["../../src/utilities/color-scheme-repaint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AAqB3B;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,IAAI,CAUlE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,CAa7D;AAED,8CAA8C;AAC9C,wBAAgB,kCAAkC,IAAI,IAAI,CAIzD"}

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.45",
   "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"}