@nldd/design-system 0.8.83 → 0.8.84

package/dist/components/navigation/tab-bar/tab-bar.styles.js

@@ -11,7 +11,7 @@ export const tabBarStyles = css `
 	:host {
 		--_corner-radius: var(--semantics-controls-md-corner-radius);
 		--_gap: var(--primitives-space-1);
-		--_selected-z-index: 1;
+		--_current-z-index: 1;
 		--_focus-z-index: 2;
 
 		${inheritedTextReset}
@@ -79,9 +79,9 @@ export const tabBarStyles = css `
 
 	/* # Focus */
 
-	::slotted(nldd-tab-bar-item[selected]) {
+	::slotted(nldd-tab-bar-item[current]) {
 		position: relative;
-		z-index: var(--_selected-z-index);
+		z-index: var(--_current-z-index);
 	}
 
 	::slotted(nldd-tab-bar-item:focus-within) {
@@ -202,7 +202,7 @@ export const tabBarItemStyles = css `
 		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 	}
 
-	:host([selected]) .tab-bar__item {
+	:host([current]) .tab-bar__item {
 		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
 
 		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
@@ -210,7 +210,7 @@ export const tabBarItemStyles = css `
 	}
 
 	@media (hover: hover) {
-		:host([selected]) .tab-bar__item:hover {
+		:host([current]) .tab-bar__item:hover {
 			--_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
 
 			background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
@@ -218,7 +218,7 @@ export const tabBarItemStyles = css `
 		}
 	}
 
-	:host([selected]) .tab-bar__item:active {
+	:host([current]) .tab-bar__item:active {
 		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
 
 		background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
@@ -226,7 +226,7 @@ export const tabBarItemStyles = css `
 	}
 
 	@media (forced-colors: active) {
-		:host([selected]) .tab-bar__item {
+		:host([current]) .tab-bar__item {
 			background-color: Highlight;
 		}
 	}
@@ -237,7 +237,7 @@ export const tabBarItemStyles = css `
 		box-shadow: var(--semantics-focus-ring-box-shadow);
 	}
 
-	:host([selected]) .tab-bar__item:focus-visible {
+	:host([current]) .tab-bar__item:focus-visible {
 		box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
 	}
 

package/dist/components/navigation/tab-bar/tab-bar.template.js

@@ -34,10 +34,10 @@ export function tabBarItemTemplate(component) {
     const isNavigation = component._navigation;
     const isDisabled = component._groupDisabled;
     // A disabled bar takes every tab out of the tab order; otherwise the roving
-    // tabindex keeps the selected (or fallback) tab as the single entry point.
+    // tabindex keeps the current (or fallback) tab as the single entry point.
     const tabindex = isDisabled
         ? '-1'
-        : component.selected || component._isFallbackFocusable ? '0' : '-1';
+        : component.current || component._isFallbackFocusable ? '0' : '-1';
     const isIconVariant = component._effectiveVariant === 'icon';
     const iconLabel = isIconVariant ? component.text || nothing : nothing;
     /* The icon and icon-and-text variants reserve an icon area; fill it with a
@@ -61,8 +61,8 @@ export function tabBarItemTemplate(component) {
 			<a class="tab-bar__item"
 				href=${safeHref}
 				role=${isNavigation ? nothing : 'tab'}
-				aria-current=${isNavigation && component.selected ? 'page' : nothing}
-				aria-selected=${!isNavigation ? (component.selected ? 'true' : 'false') : nothing}
+				aria-current=${isNavigation && component.current ? 'page' : nothing}
+				aria-selected=${!isNavigation ? (component.current ? 'true' : 'false') : nothing}
 				aria-disabled=${isDisabled ? 'true' : nothing}
 				aria-label=${iconLabel}
 				tabindex=${tabindex}
@@ -75,7 +75,7 @@ export function tabBarItemTemplate(component) {
 			<button class="tab-bar__item"
 				type="button"
 				role="tab"
-				aria-selected=${component.selected ? 'true' : 'false'}
+				aria-selected=${component.current ? 'true' : 'false'}
 				aria-disabled=${isDisabled ? 'true' : nothing}
 				aria-label=${iconLabel}
 				tabindex=${tabindex}

package/dist/components/navigation/tab-bar/tab-bar.template.js.map

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

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.d.ts

@@ -1,24 +1,24 @@
 /**
  * Nederlandse Digitale Dienst Top Navigation Bar Component (Lit + TypeScript)
  *
- * De bovenste balk van een pagina: een logobalk met het Rijkslogo en een
- * optioneel woordmerk, en daaronder de hoofdbalk met de websitetitel, een
- * terugknop, de globale navigatie en de utility-navigatie. Op smalle breedtes
- * verhuist de globale navigatie naar een menusheet achter de menuknop.
+ * The top bar of a page: a logo bar with the Rijkslogo and an optional
+ * wordmark, and below it the main bar with the website title, a back button,
+ * the global navigation and the utility navigation. On narrow widths the global
+ * navigation moves into a menu sheet behind the menu button.
  *
  * @element nldd-top-navigation-bar
  *
- * @attr {boolean} no-logo - Verbergt de hele logobalk, inclusief woordmerk.
- * @attr {string} logo-title - Titel van het woordmerk naast het logo. Zonder deze waarde staat het logo er alleen.
- * @attr {string} logo-subtitle - Subtitel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is.
- * @attr {string} logo-supporting-text-1 - Eerste ondersteunende regel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is.
- * @attr {string} logo-supporting-text-2 - Tweede ondersteunende regel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is.
- * @attr {string} logo-href - URL voor logo en woordmerk. Zonder deze waarde zijn ze geen link, maar een afbeelding met een toegankelijk label.
- * @attr {string} website-title - Naam van de website of applicatie, boven de menubalk. Leeg laat de titelregel weg.
- * @attr {string} website-href - URL voor de websitetitel. Zonder deze waarde blijft de titel gewone tekst.
- * @attr {string} back-href - URL van de terugknop. Zonder deze waarde vuurt een klik het `back-click`-event, zodat de consument zelf navigeert.
- * @attr {string} back-text - Tekst van de terugknop. De knop verschijnt zodra back-text of back-href is gezet; zonder tekst valt hij terug op de vertaling ("Terug").
- * @attr {string} width - Begrenst de bar-content tot een max-width zodat die uitlijnt met de page-sections. 'full' vult de volle breedte, of geef een eigen CSS-lengte.
+ * @attr {boolean} no-logo - Hides the whole logo bar, wordmark included.
+ * @attr {string} logo-title - Title of the wordmark next to the logo. Without it the logo stands alone.
+ * @attr {string} logo-subtitle - Subtitle under the wordmark title. Only visible when there is a wordmark.
+ * @attr {string} logo-supporting-text-1 - First supporting line under the wordmark title. Only visible when there is a wordmark.
+ * @attr {string} logo-supporting-text-2 - Second supporting line under the wordmark title. Only visible when there is a wordmark.
+ * @attr {string} logo-href - URL for the logo and wordmark. Without it they are not a link but an image with an accessible label.
+ * @attr {string} website-title - Name of the website or application, above the menu bar. Empty leaves the title line out.
+ * @attr {string} website-href - URL for the website title. Without it the title stays plain text.
+ * @attr {string} back-href - URL of the back button. Without it a click fires the `back-click` event, so the consumer navigates itself.
+ * @attr {string} back-text - Text of the back button. The button appears as soon as back-text or back-href is set; without text it falls back to the translation ("Terug").
+ * @attr {string} width - Limits the bar content to a max-width so it lines up with the page sections. 'full' fills the entire width, or pass your own CSS length.
  */
 import { LitElement, type PropertyValues } from 'lit';
 import '../menu-bar-item/menu-bar-item.js';

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

@@ -1,24 +1,24 @@
 /**
  * Nederlandse Digitale Dienst Top Navigation Bar Component (Lit + TypeScript)
  *
- * De bovenste balk van een pagina: een logobalk met het Rijkslogo en een
- * optioneel woordmerk, en daaronder de hoofdbalk met de websitetitel, een
- * terugknop, de globale navigatie en de utility-navigatie. Op smalle breedtes
- * verhuist de globale navigatie naar een menusheet achter de menuknop.
+ * The top bar of a page: a logo bar with the Rijkslogo and an optional
+ * wordmark, and below it the main bar with the website title, a back button,
+ * the global navigation and the utility navigation. On narrow widths the global
+ * navigation moves into a menu sheet behind the menu button.
  *
  * @element nldd-top-navigation-bar
  *
- * @attr {boolean} no-logo - Verbergt de hele logobalk, inclusief woordmerk.
- * @attr {string} logo-title - Titel van het woordmerk naast het logo. Zonder deze waarde staat het logo er alleen.
- * @attr {string} logo-subtitle - Subtitel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is.
- * @attr {string} logo-supporting-text-1 - Eerste ondersteunende regel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is.
- * @attr {string} logo-supporting-text-2 - Tweede ondersteunende regel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is.
- * @attr {string} logo-href - URL voor logo en woordmerk. Zonder deze waarde zijn ze geen link, maar een afbeelding met een toegankelijk label.
- * @attr {string} website-title - Naam van de website of applicatie, boven de menubalk. Leeg laat de titelregel weg.
- * @attr {string} website-href - URL voor de websitetitel. Zonder deze waarde blijft de titel gewone tekst.
- * @attr {string} back-href - URL van de terugknop. Zonder deze waarde vuurt een klik het `back-click`-event, zodat de consument zelf navigeert.
- * @attr {string} back-text - Tekst van de terugknop. De knop verschijnt zodra back-text of back-href is gezet; zonder tekst valt hij terug op de vertaling ("Terug").
- * @attr {string} width - Begrenst de bar-content tot een max-width zodat die uitlijnt met de page-sections. 'full' vult de volle breedte, of geef een eigen CSS-lengte.
+ * @attr {boolean} no-logo - Hides the whole logo bar, wordmark included.
+ * @attr {string} logo-title - Title of the wordmark next to the logo. Without it the logo stands alone.
+ * @attr {string} logo-subtitle - Subtitle under the wordmark title. Only visible when there is a wordmark.
+ * @attr {string} logo-supporting-text-1 - First supporting line under the wordmark title. Only visible when there is a wordmark.
+ * @attr {string} logo-supporting-text-2 - Second supporting line under the wordmark title. Only visible when there is a wordmark.
+ * @attr {string} logo-href - URL for the logo and wordmark. Without it they are not a link but an image with an accessible label.
+ * @attr {string} website-title - Name of the website or application, above the menu bar. Empty leaves the title line out.
+ * @attr {string} website-href - URL for the website title. Without it the title stays plain text.
+ * @attr {string} back-href - URL of the back button. Without it a click fires the `back-click` event, so the consumer navigates itself.
+ * @attr {string} back-text - Text of the back button. The button appears as soon as back-text or back-href is set; without text it falls back to the translation ("Terug").
+ * @attr {string} width - Limits the bar content to a max-width so it lines up with the page sections. 'full' fills the entire width, or pass your own CSS length.
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-navigation-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,sBAAsB,yBAuVlC,CAAC"}
+{"version":3,"file":"top-navigation-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,sBAAsB,yBAmWlC,CAAC"}

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

@@ -217,7 +217,6 @@ export const topNavigationBarStyles = css `
 		align-items: center;
 
 		@container (max-width: ${smMax}) {
-			padding-top: var(--primitives-space-4);
 			justify-content: center;
 		}
 
@@ -227,19 +226,32 @@ export const topNavigationBarStyles = css `
 		}
 	}
 
+	/* Without a logo above it the title is the first thing in the bar, so its
+	   focus ring has nothing to sit in. Six is what that ring needs: two of
+	   offset, two of outline, and the halo that follows it. */
+
 	:host([no-logo]) .top-navigation-bar__website-title-bar {
 		@container (max-width: ${smMax}) {
-			padding-top: var(--primitives-space-8);
+			padding-top: var(--primitives-space-6);
 		}
 	}
 
 	/* ## Title */
 
 	.top-navigation-bar__website-title {
+		box-sizing: border-box;
+		display: inline-flex;
+		align-items: center;
+		min-width: var(--semantics-controls-xs-min-size);
+		min-height: var(--semantics-controls-xs-min-size);
 		font: var(--components-top-navigation-bar-title-sm-font);
 		color: var(--semantics-content-color);
 		white-space: nowrap;
 
+		@container (max-width: ${smMax}) {
+			padding-top: var(--primitives-space-4);
+		}
+
 		@container (min-width: ${mdMin}) {
 			font: var(--components-top-navigation-bar-title-md-font);
 		}

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

@@ -1 +1 @@
-{"version":3,"file":"top-navigation-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;IAcrC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;2BAuBK,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAgCL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAuGL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;;2BAKL,KAAK;;;;;;;2BAOL,KAAK;;;;;;;;;;;;2BAYL,KAAK;;;;2BAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAoCL,KAAK;;;;;2BAKL,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;;2BAKL,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;;;;;;;;;2BAYL,KAAK;;;;;;;;;;;;;;;;;;;;CAoB/B,CAAC"}
+{"version":3,"file":"top-navigation-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;IAcrC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;2BAuBK,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAgCL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAuGL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;2BAIL,KAAK;;;;;;;;;;;2BAWL,KAAK;;;;;;;;;;;;;;;;;2BAiBL,KAAK;;;;2BAIL,KAAK;;;;2BAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAoCL,KAAK;;;;;2BAKL,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;;2BAKL,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;;;;;;;;;2BAYL,KAAK;;;;;;;;;;;;;;;;;;;;CAoB/B,CAAC"}

package/dist/components/navigation/top-title-bar/top-title-bar.d.ts

@@ -36,8 +36,8 @@
  *
  * @slot toolbar - Optional buttons to the left of the dismiss button
  *
- * @fires back - Fired when the back button is clicked (not fired when back-href is set)
- * @fires dismiss - Fired when the dismiss button is clicked
+ * @fires back - Fired when the back button is clicked (not fired when back-href is set). It bubbles and is composed, so an ancestor hears it too, which is how nldd-navigation-split-view lets a consumer catch the back of any pane in one place. Listen in one place then: bound to both this bar and an ancestor, a single press runs the handler twice.
+ * @fires dismiss - Fired when the dismiss button is clicked. Bubbles and is composed, with the same caveat as `back`.
  */
 import { LitElement } from 'lit';
 export declare class NLDDTopTitleBar extends LitElement {

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

@@ -36,8 +36,8 @@
  *
  * @slot toolbar - Optional buttons to the left of the dismiss button
  *
- * @fires back - Fired when the back button is clicked (not fired when back-href is set)
- * @fires dismiss - Fired when the dismiss button is clicked
+ * @fires back - Fired when the back button is clicked (not fired when back-href is set). It bubbles and is composed, so an ancestor hears it too, which is how nldd-navigation-split-view lets a consumer catch the back of any pane in one place. Listen in one place then: bound to both this bar and an ancestor, a single press runs the handler twice.
+ * @fires dismiss - Fired when the dismiss button is clicked. Bubbles and is composed, with the same caveat as `back`.
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

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

@@ -114,13 +114,13 @@ export const topTitleBarStyles = css `
 		margin: 0;
 		overflow: hidden;
 		color: var(--semantics-content-color);
-		font: var(--primitives-font-body-lg-medium-flat);
+		font: var(--primitives-font-body-lg-semi-bold-flat);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
 	.top-title-bar__title:has(+ .top-title-bar__subtitle) {
-		font: var(--primitives-font-body-md-medium-flat);
+		font: var(--primitives-font-body-md-semi-bold-flat);
 	}
 
 	@media (forced-colors: active) {

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

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBAyUvB,CAAC"}
+{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBA2UvB,CAAC"}

package/dist/components/status-and-feedback/badge/badge.styles.js

@@ -21,6 +21,8 @@ export const badgeStyles = css `
 		--_dot-size: var(--primitives-space-12);
 		--_icon-size: var(--primitives-space-14);
 		--_icon-offset-correction: var(--primitives-space-1);
+		--_ring-thickness: var(--semantics-surfaces-ring-thickness);
+		--_ring-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
 		--_pulse-spread: var(--primitives-space-8);
 		--_pulse-duration: 1.5s;
 
@@ -212,7 +214,7 @@ export const badgeStyles = css `
 		position: relative;
 		border-radius: var(--components-badge-corner-radius);
 		box-shadow:
-			0 0 0 1px var(--context-parent-background-color, var(--semantics-surfaces-base-background-color)),
+			0 0 0 var(--_ring-thickness) var(--_ring-color),
 			inset 0 0 0 var(--_border-width) var(--_border-color);
 		background-color: var(--_background-color);
 		min-width: var(--_height);
@@ -242,7 +244,7 @@ export const badgeStyles = css `
 	   the same distance on every side, whatever the badge measures.
 
 	   Painted after the badge, so the ring passes over the contrast border the
-	   badge draws in the surface colour instead of starting behind it. The
+	   badge draws in the surface color instead of starting behind it. The
 	   element itself is transparent (the ring is the shadow, which paints
 	   outside the box), so nothing covers the badge's own fill or text. */
 	.badge__pulse {
@@ -254,7 +256,7 @@ export const badgeStyles = css `
 		animation: badge-pulse var(--_pulse-duration) infinite;
 	}
 
-	/* The ring rides on the shadow's own colour rather than on the element's
+	/* The ring rides on the shadow's own color rather than on the element's
 	   opacity: at spread zero the shadow has no area, so it can start at full
 	   strength without a flash, and it is already transparent when the spread
 	   snaps back for the next cycle. Same shape as Shoelace's badge pulse. */
@@ -278,7 +280,7 @@ export const badgeStyles = css `
 		}
 	}
 
-	/* Forced colors paints the badge in system colours; a ring in the same
+	/* Forced colors paints the badge in system colors; a ring in the same
 	   Canvas would read as a second, half-drawn badge. */
 	@media (forced-colors: active) {
 		.badge__pulse {

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

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;IAwB1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiTrB,CAAC"}
+{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;IA0B1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiTrB,CAAC"}

package/dist/components/status-and-feedback/badge/badge.template.js

@@ -8,7 +8,7 @@ export function template(component) {
     const classes = ['badge', ...modifiers].join(' ');
     // A badge without text or an icon-only badge has nothing to read, so it carries
     // its own label. Unless it is decorative: then the words beside it already say
-    // what the colour says, and announcing it again is noise.
+    // what the color says, and announcing it again is noise.
     const needsAriaImg = !component.decorative && (component._isDot || component._isIconOnly);
     return html `
 		<span class=${classes}

package/dist/components/status-and-feedback/badge/badge.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,QAAQ,CAAC,SAAoB;IAC5C,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,IAAI,SAAS,CAAC,MAAM;QAAE,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACnD,IAAI,SAAS,CAAC,WAAW;QAAE,SAAS,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClD,gFAAgF;IAChF,+EAA+E;IAC/E,0DAA0D;IAC1D,MAAM,YAAY,GAAG,CAAC,SAAS,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1F,OAAO,IAAI,CAAA;gBACI,OAAO;UACb,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;gBACxB,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;iBAC5C,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;KAEnD,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,oCAAoC,CAAC,CAAC,CAAC,EAAE;KAC/D,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;uBAEH,SAAS,CAAC,IAAI;;IAEjC,CAAC,CAAC,CAAC,EAAE;KACJ,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,6BAA6B,SAAS,CAAC,aAAa,SAAS,CAAC,CAAC,CAAC,EAAE;;EAE9F,CAAC;AACH,CAAC"}
+{"version":3,"file":"badge.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,QAAQ,CAAC,SAAoB;IAC5C,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,IAAI,SAAS,CAAC,MAAM;QAAE,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACnD,IAAI,SAAS,CAAC,WAAW;QAAE,SAAS,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClD,gFAAgF;IAChF,+EAA+E;IAC/E,yDAAyD;IACzD,MAAM,YAAY,GAAG,CAAC,SAAS,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1F,OAAO,IAAI,CAAA;gBACI,OAAO;UACb,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;gBACxB,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;iBAC5C,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;KAEnD,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,oCAAoC,CAAC,CAAC,CAAC,EAAE;KAC/D,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;uBAEH,SAAS,CAAC,IAAI;;IAEjC,CAAC,CAAC,CAAC,EAAE;KACJ,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,6BAA6B,SAAS,CAAC,aAAa,SAAS,CAAC,CAAC,CAAC,EAAE;;EAE9F,CAAC;AACH,CAAC"}

package/dist/components/status-and-feedback/banner/banner.styles.js

@@ -42,8 +42,8 @@ export const bannerStyles = css `
 	   the reserved right padding tracks the control size rather than a fixed
 	   value. --_text-icon-offset follows --_icon-size on its own.
 
-	   --_dismiss-inset pulls the 32px button up until its centre sits on the
-	   24px icon's centre (8 - (32 - 24) / 2 = 4), and the same value on the
+	   --_dismiss-inset pulls the 32px button up until its center sits on the
+	   24px icon's center (8 - (32 - 24) / 2 = 4), and the same value on the
 	   right gives the button equal air on both sides of its corner. */
 
 	:host([size="sm"]) {

package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.d.ts

@@ -1,49 +1,50 @@
 /**
  * Nederlandse Digitale Dienst Just in Time Education Component (Lit + TypeScript)
  *
- * Een guided-discovery coach-mark. Plaats een control (bijv. nldd-search-field)
- * in de default slot; zolang `active` is gezet tilt het component een callout
- * (titel + supporting text + dismiss) in de top layer via de Popover API
- * (`popover="manual"`), geankerd aan het control met Floating UI. Geen backdrop,
- * non-modaal: de achtergrond blijft interactief. Het control zelf blijft op zijn
- * plek in de flow staan.
+ * A guided-discovery coach mark. Put a control (nldd-search-field, for
+ * instance) in the default slot. While `active` is set, the component lifts a
+ * callout (title + supporting text + dismiss) into the top layer through the
+ * Popover API (`popover="manual"`), anchored to the control with Floating UI.
+ * No backdrop, non-modal: the background stays interactive. The control itself
+ * stays where it is in the flow.
  *
- * Met `dismissable` beheert het component het sluiten en vuurt het nldd-close:
- *  - de gebruiker voert de geadviseerde interactie uit op het control -> close{completed}
- *  - de dismiss-knop -> close{dismissed}
- *  - een klik/toets BUITEN de coach-mark -> close{ignored}
- * Zonder `dismissable` sluit niets vanzelf (geen knop, geen buiten- of slot-klik);
- * dan bepaalt de consumer het sluiten zelf via `active` of `complete()`. `complete()`
- * werkt altijd en sluit met close{completed} (bijv. pas bij een echte zoekopdracht).
+ * With `dismissable` the component manages closing and fires nldd-close:
+ *  - the user performs the suggested interaction on the control -> close{completed}
+ *  - the dismiss button -> close{dismissed}
+ *  - a click or key press OUTSIDE the coach mark -> close{ignored}
+ * Without `dismissable` nothing closes by itself (no button, no outside or slot
+ * click); the consumer then decides when to close through `active` or
+ * `complete()`. `complete()` always works and closes with close{completed}, for
+ * example only once a real search has been submitted.
  *
  * @element nldd-just-in-time-education
- * @attr {boolean} active - Toon de coach-mark. App-gestuurd; standaard false.
- * @attr {string} text - Titel van de callout.
- * @attr {string} supporting-text - Ondersteunende tekst onder de titel.
- * @attr {string} placement - 'auto' | 'top' | 'bottom' | 'left' | 'right' (standaard 'auto').
- * @attr {boolean} dismissable - Toon de dismiss-knop en sta sluiten toe via 1 klik/toets buiten de coach-mark. Standaard false: dan beheert de consumer het sluiten zelf.
- * @attr {string} arrow-length - Pijllengte en dus de afstand tussen card en control, als CSS-lengte (bijv. \`333px\`, \`30vh\`). Leeg = DS-standaard; onder 40px wordt geklemd.
- * @attr {boolean} no-arrow - Verberg de pijl; de card staat dan dicht tegen het control.
+ * @attr {boolean} active - Show the coach mark. Driven by the app; false by default.
+ * @attr {string} text - Title of the callout.
+ * @attr {string} supporting-text - Supporting text under the title.
+ * @attr {string} placement - 'auto' | 'top' | 'bottom' | 'left' | 'right' (default 'auto').
+ * @attr {boolean} dismissable - Show the dismiss button and allow closing with one click or key press outside the coach mark. False by default: the consumer then manages closing itself.
+ * @attr {string} arrow-length - Arrow length, and therefore the distance between card and control, as a CSS length (e.g. `333px`, `30vh`). Empty = the DS default; anything under 40px is clamped.
+ * @attr {boolean} no-arrow - Hide the arrow; the card then sits close against the control.
  *
- * @slot - Het control waar de coach-mark naar wijst (blijft in de normale flow).
+ * @slot - The control the coach mark points at (stays in the normal flow).
  *
- * @fires nldd-close - Wanneer de coach-mark sluit. detail: { reason: 'completed' | 'dismissed' | 'ignored' }.
+ * @fires nldd-close - When the coach mark closes. detail: { reason: 'completed' | 'dismissed' | 'ignored' }.
  *
- * @note Rendert via de native Popover API (`popover="manual"`) in de top layer,
- * dus het escapet ancestor stacking contexts en `overflow: hidden` clipping.
- * Positionering via Floating UI met `position: absolute` (default strategy) +
- * `autoUpdate`: de callout staat in de documentstroom en scrollt native mee met
- * de pagina, dus scrollen vraagt geen herpositionering. De kant wordt bepaald uit
- * de beschikbare ruimte (horizontaal de viewport, verticaal het hele document)
- * bij openen en bij window-resize.
+ * @note Renders through the native Popover API (`popover="manual"`) in the top
+ * layer, so it escapes ancestor stacking contexts and `overflow: hidden`
+ * clipping. Positioned with Floating UI using `position: absolute` (the default
+ * strategy) plus `autoUpdate`: the callout sits in the document flow and
+ * scrolls along natively with the page, so scrolling needs no repositioning.
+ * The side is picked from the available room (the viewport horizontally, the
+ * whole document vertically) on open and on window resize.
  *
- * @note Focus-model (dismissable): de callout is een bewust NIET-modale dialog
- * (`role="dialog"`, geen `aria-modal`, geen focus-trap). Bij openen gaat focus
- * erin zodat de dismiss-knop bereikbaar is en Escape sluit; Tab verlaat de callout
- * daarna expres naar de pagina, want de coach-mark wijst naar een control dat de
- * gebruiker moet kunnen bereiken, dus focus vasthouden zou het doel ondermijnen.
- * Niet-dismissable gebruikt een benoemde `role="region"` (aria-label = de titel) en
- * verplaatst focus nooit; de polite live region kondigt de tip aan.
+ * @note Focus model (dismissable): the callout is a deliberately NON-modal
+ * dialog (`role="dialog"`, no `aria-modal`, no focus trap). On open, focus moves
+ * into it so the dismiss button is reachable and Escape closes. Tab then leaves
+ * the callout on purpose, because the coach mark points at a control the user
+ * has to be able to reach, so holding focus would defeat the point.
+ * Non-dismissable uses a named `role="region"` (aria-label = the title) and
+ * never moves focus; the polite live region announces the tip.
  */
 import { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';

package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"just-in-time-education.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/just-in-time-education/just-in-time-education.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU1C,OAAO,0CAA0C,CAAC;AAElD,KAAK,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,8BAA8B,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS,CAAC;;;;;;;;AAInF,qBACa,uBAAwB,SAAQ,4BAAsG;IAClJ,OAAgB,MAAM,0BAA6B;IAOnD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAGnC;IAGH,MAAM,UAAS;IAGf,IAAI,SAAM;IAGV,cAAc,SAAM;IAGpB,SAAS,EAAE,SAAS,CAAU;IAG9B,WAAW,UAAS;IAGpB,WAAW,SAAM;IAGjB,OAAO,UAAS;IAEhB,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,cAAc,CAA8C;IACpE,OAAO,CAAC,cAAc,CAA8C;IACpE,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,yBAAyB,CAAoD;IACrF,OAAO,CAAC,aAAa,CAAoD;IACzE,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,mBAAmB,CAAK;IAChC,QAAQ,CAAC,cAAc,SAAsC;IAEpD,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IA2B/C,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAKpB;oDACgD;IAChD,OAAO,CAAC,iBAAiB;IAUzB;sFACkF;IAClF,iBAAiB,IAAI,IAAI;IAIzB,OAAO,CAAC,KAAK;IAiDb,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,gBAAgB;YAMV,eAAe;IA6F7B,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,YAAY;IAiFpB;;;sFAGkF;IAClF,yBAAyB,IAAI,IAAI;IAKjC,iFAAiF;IACjF,OAAO,CAAC,0BAA0B;IASlC,mCAAmC;IACnC,cAAc,IAAI,IAAI;IAItB;;;wFAGoF;IACpF,qBAAqB,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAM7C,6EAA6E;IAC7E,QAAQ,IAAI,IAAI;IAIhB,OAAO,CAAC,MAAM;IASL,iBAAiB,IAAI,IAAI;IAezB,oBAAoB,IAAI,IAAI;IAM5B,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,6BAA6B,EAAE,uBAAuB,CAAC;KACvD;CACD"}
+{"version":3,"file":"just-in-time-education.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/just-in-time-education/just-in-time-education.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU1C,OAAO,0CAA0C,CAAC;AAElD,KAAK,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,8BAA8B,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS,CAAC;;;;;;;;AAInF,qBACa,uBAAwB,SAAQ,4BAAsG;IAClJ,OAAgB,MAAM,0BAA6B;IAOnD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAGnC;IAGH,MAAM,UAAS;IAGf,IAAI,SAAM;IAGV,cAAc,SAAM;IAGpB,SAAS,EAAE,SAAS,CAAU;IAG9B,WAAW,UAAS;IAGpB,WAAW,SAAM;IAGjB,OAAO,UAAS;IAEhB,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,cAAc,CAA8C;IACpE,OAAO,CAAC,cAAc,CAA8C;IACpE,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,yBAAyB,CAAoD;IACrF,OAAO,CAAC,aAAa,CAAoD;IACzE,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,mBAAmB,CAAK;IAChC,QAAQ,CAAC,cAAc,SAAsC;IAEpD,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IA2B/C,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAKpB;oDACgD;IAChD,OAAO,CAAC,iBAAiB;IAUzB;sFACkF;IAClF,iBAAiB,IAAI,IAAI;IAIzB,OAAO,CAAC,KAAK;IAiDb,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,gBAAgB;YAMV,eAAe;IA6F7B,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,YAAY;IAiFpB;;;sFAGkF;IAClF,yBAAyB,IAAI,IAAI;IAKjC,iFAAiF;IACjF,OAAO,CAAC,0BAA0B;IASlC,mCAAmC;IACnC,cAAc,IAAI,IAAI;IAItB;;;wFAGoF;IACpF,qBAAqB,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAM7C,6EAA6E;IAC7E,QAAQ,IAAI,IAAI;IAIhB,OAAO,CAAC,MAAM;IASL,iBAAiB,IAAI,IAAI;IAezB,oBAAoB,IAAI,IAAI;IAM5B,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,6BAA6B,EAAE,uBAAuB,CAAC;KACvD;CACD"}