@nldd/design-system 0.8.61 → 0.8.63

package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.js

@@ -0,0 +1,301 @@
+import { css } from 'lit';
+import { inheritedTextReset } from '../../../assets/styles/slotted-reset.js';
+export const justInTimeEducationStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_arrow-length: var(--primitives-space-64); /* JS overrides this with the arrow-length attribute when valid */
+		--_desired-arrow-length: max(var(--primitives-space-40), var(--_arrow-length));
+		--_no-arrow-gap: var(--primitives-space-16);
+		--_gap: min(var(--_desired-arrow-length), var(--_available-distance));
+		--_available-distance: 9999px; /* JS sets the px distance to the viewport/document edge; default = no clamp */
+		--_background-blur: var(--primitives-space-8);
+		--_background-z-index: -1;
+		--_corner-radius: var(--primitives-space-40);
+		--_text-width: var(--primitives-area-320);
+		--_min-text-width: var(--primitives-area-200);
+		--_dismiss-width: var(--semantics-controls-md-min-size);
+		--_main-width: var(--_text-width);
+		--_max-width: var(--_main-width);
+		--_show-duration: var(--primitives-transition-duration-fast);
+		--_hide-duration: var(--primitives-transition-duration-medium);
+		--_offset: 0; /* px, unitless — read by JS */
+		--_shift-padding: 8; /* px, unitless — read by JS */
+		--_main-padding: var(--primitives-space-16);
+		--_main-background-color: color-mix(in srgb, var(--semantics-surfaces-base-background-color) 90%, transparent);
+		--_text-color: var(--semantics-content-color);
+		--_text-font: var(--primitives-font-body-lg-bold-tight);
+		--_supporting-text-color: var(--semantics-content-color);
+		--_supporting-text-font: var(--primitives-font-body-md-regular-tight);
+		--_arrow-color: var(--semantics-content-color);
+
+		${inheritedTextReset}
+		display: contents;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	/* no-arrow (consumer) or the auto-collapsed state (JS sets it when the gap would
+	 * fall below its minimum): drop to a small fixed gap, with no arrow drawn. */
+	:host([no-arrow]),
+	:host([data-arrow-collapsed]) {
+		--_gap: var(--_no-arrow-gap);
+	}
+
+	/* Horizontal placement: the arrow gap is horizontal here (unlike vertical), so
+	 * the container is the main plus the arrow length. (Vertical keeps the base
+	 * --_max-width = --_main-width.) */
+	:host([data-arrow-side="left"]),
+	:host([data-arrow-side="right"]) {
+		--_max-width: calc(var(--_main-width) + var(--_desired-arrow-length));
+	}
+
+	/* The dismiss button widens the main — it sits beside the text — for horizontal
+	 * placement only; vertical stacks it below. --_max-width follows via --_main-width. */
+	:host([dismissable][data-arrow-side="left"]),
+	:host([dismissable][data-arrow-side="right"]) {
+		--_main-width: calc(var(--_text-width) + var(--_dismiss-width));
+	}
+
+	/* Horizontal placement near a viewport edge: --_available-distance (JS) is the
+	 * distance to that edge. Reserve the main's width (--_main-width) so the arrow
+	 * gap absorbs the first shrink and falls to 0; the container cap then narrows
+	 * the main itself. Skipped for no-arrow, which keeps its fixed gap. */
+	:host(:not([no-arrow]):not([data-arrow-collapsed])[data-arrow-side="left"]),
+	:host(:not([no-arrow]):not([data-arrow-collapsed])[data-arrow-side="right"]) {
+		--_gap: clamp(0px, var(--_desired-arrow-length), calc(var(--_available-distance) - var(--_main-width)));
+	}
+
+
+	/* # Container */
+
+	/* Transparent top-layer wrapper. It carries the arrow gap as padding on the
+	 * side facing the control (so the arrow lives INSIDE the box and is never
+	 * clipped); the other sides keep a small margin for the blurred background.
+	 * pointer-events are off so clicks on the empty padding fall through to the
+	 * page (counted as "outside"). The whole thing fades as one on open/close;
+	 * the base rule holds the (slower) hide timing, :popover-open the show. */
+	.just-in-time-education {
+		box-sizing: border-box;
+		position: fixed;
+		opacity: 0;
+		margin: 0;
+		border: none;
+		background: none;
+		width: max-content;
+		max-width: var(--_max-width);
+		padding: var(--_background-blur);
+		pointer-events: none;
+		overflow: visible;
+		transition:
+			opacity var(--_hide-duration) ease,
+			display var(--_hide-duration) allow-discrete,
+			overlay var(--_hide-duration) allow-discrete;
+		/* Force a GPU layer so Safari paints the freshly-opened top-layer popover
+		 * (blurred background + SVG arrow) correctly instead of leaving it stale
+		 * until a manual resize. */
+		transform: translate3d(0, 0, 0);
+	}
+
+	/* Horizontal placement: never exceed the room to the viewport edge. Once the
+	 * arrow gap has shrunk to 0, this is what makes the main itself narrower. */
+	:host([data-arrow-side="left"]) .just-in-time-education,
+	:host([data-arrow-side="right"]) .just-in-time-education {
+		max-width: min(var(--_max-width), var(--_available-distance));
+	}
+
+
+	/* ## Arrow-side padding (only the side facing the control needs the gap) */
+
+	:host([data-arrow-side="bottom"]) .just-in-time-education {
+		padding-block-start: var(--_gap);
+	}
+
+	:host([data-arrow-side="top"]) .just-in-time-education {
+		padding-block-end: var(--_gap);
+	}
+
+	:host([data-arrow-side="left"]) .just-in-time-education {
+		padding-inline-end: var(--_gap);
+	}
+
+	:host([data-arrow-side="right"]) .just-in-time-education {
+		padding-inline-start: var(--_gap);
+	}
+
+
+	/* ## Fade */
+
+	.just-in-time-education:popover-open {
+		opacity: 1;
+		transition:
+			opacity var(--_show-duration) ease,
+			display var(--_show-duration) allow-discrete,
+			overlay var(--_show-duration) allow-discrete;
+	}
+
+	@starting-style {
+		.just-in-time-education:popover-open {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.just-in-time-education {
+			transition: none;
+		}
+	}
+
+
+	/* # Main */
+
+	.just-in-time-education__main {
+		box-sizing: border-box;
+		position: relative;
+		isolation: isolate;
+		pointer-events: auto;
+		padding: var(--_main-padding);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	/* The dismiss sits on the side away from the arrow: below the text for bottom,
+	 * above it for top, beside it (on the placement's own side) for left/right —
+	 * so the text always leans toward the control. */
+	:host([data-arrow-side="top"]) .just-in-time-education__main {
+		flex-direction: column-reverse;
+	}
+
+	:host([data-arrow-side="left"]) .just-in-time-education__main {
+		flex-direction: row-reverse;
+		align-items: center;
+	}
+
+	:host([data-arrow-side="right"]) .just-in-time-education__main {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	/* Horizontal placement floor: as the room narrows the main (after the arrow
+	 * has collapsed), keep it usable at this minimum — the card overflows the
+	 * viewport edge rather than shrinking further. */
+	:host([data-arrow-side="left"]) .just-in-time-education__main,
+	:host([data-arrow-side="right"]) .just-in-time-education__main {
+		min-width: var(--_min-text-width);
+	}
+
+	/* ...plus the dismiss button when dismissable: it sits beside the text, so the
+	 * text keeps its 200px floor with the button next to it. */
+	:host([dismissable][data-arrow-side="left"]) .just-in-time-education__main,
+	:host([dismissable][data-arrow-side="right"]) .just-in-time-education__main {
+		min-width: calc(var(--_min-text-width) + var(--_dismiss-width));
+	}
+
+	/* Background lives on a blurred pseudo-element so its edges fade softly (no
+	 * hard border, no drop shadow). The radius is a local, free value because
+	 * this surface has a different function than the standard surfaces. The
+	 * element is grown by the blur radius so the solid centre still covers the
+	 * content after blurring. */
+	.just-in-time-education__main::before {
+		content: '';
+		position: absolute;
+		z-index: var(--_background-z-index);
+		inset: calc(-1 * var(--_background-blur));
+		border-radius: var(--_corner-radius);
+		background-color: var(--_main-background-color);
+		filter: blur(var(--_background-blur));
+		transform: translate3d(0, 0, 0);
+	}
+
+
+	/* ## Text */
+
+	.just-in-time-education__text-area {
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+	}
+
+	:host([data-arrow-side="left"]) .just-in-time-education__text-area {
+		text-align: right;
+	}
+
+	:host([data-arrow-side="right"]) .just-in-time-education__text-area {
+		text-align: left;
+	}
+
+	.just-in-time-education__text {
+		margin: 0;
+		color: var(--_text-color);
+		font: var(--_text-font);
+		font-style: italic;
+		text-wrap: pretty;
+	}
+
+	.just-in-time-education__supporting-text {
+		margin: 0;
+		color: var(--_supporting-text-color);
+		font: var(--_supporting-text-font);
+		font-style: italic;
+		text-wrap: pretty;
+	}
+
+
+	/* ## Dismiss button */
+
+	.just-in-time-education__dismiss-button {
+		display: flex;
+	}
+
+
+	/* # Arrow */
+
+	.just-in-time-education__arrow {
+		position: absolute;
+		pointer-events: none;
+		overflow: visible;
+		color: var(--_arrow-color);
+		transform: translate3d(0, 0, 0);
+	}
+
+	/* Auto-collapsed (gap below its minimum near an edge): hide the arrow; the gap
+	 * has already dropped to the small no-arrow value. */
+	:host([data-arrow-collapsed]) .just-in-time-education__arrow {
+		display: none;
+	}
+
+	.just-in-time-education__arrow-path {
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 2;
+		stroke-linecap: butt;
+		stroke-dasharray: 5 3;
+	}
+
+	.just-in-time-education__arrow-head {
+		fill: currentColor;
+	}
+
+
+	/* # Live-region announcer */
+
+	/* Visually hidden but present in the a11y tree, so the polite announcement set
+	 * on open reaches assistive tech without moving focus into the callout. */
+	.just-in-time-education__announcer {
+		position: absolute;
+		margin: -1px;
+		border: 0;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		padding: 0;
+		white-space: nowrap;
+		clip-path: inset(50%);
+	}
+`;
+//# sourceMappingURL=just-in-time-education.styles.js.map

package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"just-in-time-education.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+BxC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0QrB,CAAC"}

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

@@ -0,0 +1,4 @@
+import type { TemplateResult } from 'lit';
+import type { NLDDJustInTimeEducation } from './just-in-time-education.js';
+export declare function justInTimeEducationTemplate(component: NLDDJustInTimeEducation): TemplateResult;
+//# sourceMappingURL=just-in-time-education.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"just-in-time-education.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/just-in-time-education/just-in-time-education.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,wBAAgB,2BAA2B,CAAC,SAAS,EAAE,uBAAuB,GAAG,cAAc,CAqE9F"}

package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.template.js

@@ -0,0 +1,72 @@
+import { html, nothing } from 'lit';
+export function justInTimeEducationTemplate(component) {
+    return html `
+		<slot
+			@slotchange=${component._handleSlotChange}
+			@focusin=${component._handleAdvisedInteraction}
+			@pointerdown=${component._handleAdvisedInteraction}
+		></slot>
+		<div class="just-in-time-education__announcer"
+			aria-live="polite"
+			aria-atomic="true"
+		></div>
+		<div class="just-in-time-education"
+			popover="manual"
+			role=${component.dismissable ? 'dialog' : 'region'}
+			tabindex=${component.dismissable ? '-1' : nothing}
+			aria-label=${component.text || component._t('components.just-in-time-education.accessible-label')}
+			@keydown=${component._handleCalloutKeydown}
+		>
+			<div class="just-in-time-education__main">
+				<div class="just-in-time-education__text-area">
+					${component.text ? html `
+						<p class="just-in-time-education__text">
+							${component.text}
+						</p>
+					` : nothing}
+					${component.supportingText ? html `
+						<p class="just-in-time-education__supporting-text">
+							${component.supportingText}
+						</p>
+					` : nothing}
+				</div>
+				${component.dismissable ? html `
+					<div class="just-in-time-education__dismiss-button">
+						<nldd-icon-button
+							icon="dismiss"
+							variant="neutral-transparent"
+							size="md"
+							accessible-label=${component._t('components.just-in-time-education.dismiss-action')}
+							@click=${component._handleDismiss}
+						></nldd-icon-button>
+					</div>
+				` : nothing}
+			</div>
+			${component.noArrow ? nothing : html `
+				<svg class="just-in-time-education__arrow"
+					aria-hidden="true"
+				>
+					<defs>
+						<marker
+							id=${component._arrowMarkerId}
+							markerWidth="10"
+							markerHeight="12"
+							refX="0"
+							refY="5.78"
+							orient="auto"
+							markerUnits="userSpaceOnUse"
+						>
+							<path class="just-in-time-education__arrow-head"
+								d="M0,0 L10,5.78 L0,11.55 Z"
+							></path>
+						</marker>
+					</defs>
+					<path class="just-in-time-education__arrow-path"
+						marker-end=${`url(#${component._arrowMarkerId})`}
+					></path>
+				</svg>
+			`}
+		</div>
+	`;
+}
+//# sourceMappingURL=just-in-time-education.template.js.map

package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"just-in-time-education.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/just-in-time-education/just-in-time-education.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAIpC,MAAM,UAAU,2BAA2B,CAAC,SAAkC;IAC7E,OAAO,IAAI,CAAA;;iBAEK,SAAS,CAAC,iBAAiB;cAC9B,SAAS,CAAC,yBAAyB;kBAC/B,SAAS,CAAC,yBAAyB;;;;;;;;UAQ3C,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;cACvC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;gBACpC,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,EAAE,CAAC,oDAAoD,CAAC;cACtF,SAAS,CAAC,qBAAqB;;;;OAItC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;SAEnB,SAAS,CAAC,IAAI;;MAEjB,CAAC,CAAC,CAAC,OAAO;OACT,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;;SAE7B,SAAS,CAAC,cAAc;;MAE3B,CAAC,CAAC,CAAC,OAAO;;MAEV,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;0BAMR,SAAS,CAAC,EAAE,CAAC,kDAAkD,CAAC;gBAC1E,SAAS,CAAC,cAAc;;;KAGnC,CAAC,CAAC,CAAC,OAAO;;KAEV,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;YAM3B,SAAS,CAAC,cAAc;;;;;;;;;;;;;;mBAcjB,QAAQ,SAAS,CAAC,cAAc,GAAG;;;IAGlD;;EAEF,CAAC;AACH,CAAC"}

package/dist/components/status-and-feedback/status-bar/status-bar.d.ts

@@ -8,6 +8,11 @@
  * benoemen ("Storing: …", "Gepland onderhoud …"), zodat de betekenis niet
  * alleen uit kleur volgt (WCAG 1.4.1).
  *
+ * Houd de tekst kort: de balk toont één regel en kapt af met ellipsis, zeker
+ * op smallere schermen. Bij een lang bericht met veel informatie hoort alleen
+ * de kern in de balk; verwijs voor de rest naar een losse pagina of sheet
+ * (bijvoorbeeld via `href` of `button`) waar de gebruiker verder kan lezen.
+ *
  * De hele balk kan klikbaar zijn: zet `href` (rendert een `<a>`) of `button`
  * (rendert een `<button>`; luister naar het native `click` event). Zonder
  * beide is de balk statisch. Bij interactie verschijnt een chevron als
@@ -45,7 +50,7 @@ export declare class NLDDStatusBar extends LitElement {
     /** Link rel attribute. Only used when href is set. */
     rel: string;
     button: boolean;
-    constructor();
+    connectedCallback(): void;
     /** @internal Auto-secure rel for new-tab links unless the consumer set one. */
     _resolvedRel(): string;
     updated(changed: Map<string, unknown>): void;

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

@@ -1 +1 @@
-{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,4BAA4B,CAAC;AAEpC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEzF,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAGzC,OAAO,EAAE,gBAAgB,CAAa;IAGtC,IAAI,SAAM;IAGV,IAAI,SAAM;IAEV,+DAA+D;IAE/D,MAAM,SAAM;IAEZ,sDAAsD;IAEtD,GAAG,SAAM;IAGT,MAAM,UAAS;;IAcf,+EAA+E;IAC/E,YAAY,IAAI,MAAM;IAKb,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,oBAAoB;IAanB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}
+{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,4BAA4B,CAAC;AAEpC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEzF,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAGzC,OAAO,EAAE,gBAAgB,CAAa;IAGtC,IAAI,SAAM;IAGV,IAAI,SAAM;IAEV,+DAA+D;IAE/D,MAAM,SAAM;IAEZ,sDAAsD;IAEtD,GAAG,SAAM;IAGT,MAAM,UAAS;IAEN,iBAAiB,IAAI,IAAI;IAYlC,+EAA+E;IAC/E,YAAY,IAAI,MAAM;IAKb,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,oBAAoB;IAmBnB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}

package/dist/components/status-and-feedback/status-bar/status-bar.js

@@ -14,6 +14,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * benoemen ("Storing: …", "Gepland onderhoud …"), zodat de betekenis niet
  * alleen uit kleur volgt (WCAG 1.4.1).
  *
+ * Houd de tekst kort: de balk toont één regel en kapt af met ellipsis, zeker
+ * op smallere schermen. Bij een lang bericht met veel informatie hoort alleen
+ * de kern in de balk; verwijs voor de rest naar een losse pagina of sheet
+ * (bijvoorbeeld via `href` of `button`) waar de gebruiker verder kan lezen.
+ *
  * De hele balk kan klikbaar zijn: zet `href` (rendert een `<a>`) of `button`
  * (rendert een `<button>`; luister naar het native `click` event). Zonder
  * beide is de balk statisch. Bij interactie verschijnt een chevron als
@@ -45,7 +50,7 @@ import { statusBarTemplate } from './status-bar.template.js';
 import '../../content/icon/icon.js';
 let NLDDStatusBar = class NLDDStatusBar extends LitElement {
     constructor() {
-        super();
+        super(...arguments);
         this.variant = 'neutral';
         this.text = '';
         this.href = '';
@@ -54,14 +59,17 @@ let NLDDStatusBar = class NLDDStatusBar extends LitElement {
         /** Link rel attribute. Only used when href is set. */
         this.rel = '';
         this.button = false;
-        // AT requires role + aria-live to be present on the element by the time
-        // it's first inserted into the DOM, otherwise the initial announcement
-        // is missed. Reading the raw attribute here (instead of waiting for
-        // Lit to project the @property) covers both HTML-declared and
-        // document.createElement + setAttribute flows. updated() keeps the
-        // host in sync when variant changes at runtime.
-        const initialVariant = this.getAttribute('variant');
-        this._applyAriaForVariant(initialVariant ?? 'neutral');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Set role + aria-live here, NOT in the constructor: the custom-element
+        // spec forbids a constructor from adding attributes to its element, so
+        // document.createElement (the path Vue, React and other createElement-based
+        // frameworks use) would throw NotSupportedError and the element would never
+        // upgrade. connectedCallback runs at insertion, before the first render, so
+        // the live-region role is present from the start; updated() keeps it in sync
+        // on later variant changes.
+        this._applyAriaForVariant(this.variant);
     }
     /** @internal Auto-secure rel for new-tab links unless the consumer set one. */
     _resolvedRel() {
@@ -74,6 +82,12 @@ let NLDDStatusBar = class NLDDStatusBar extends LitElement {
             this._applyAriaForVariant(this.variant);
     }
     _applyAriaForVariant(variant) {
+        // role + aria-live are component-owned and tied to the variant for correct
+        // announcement (critical = assertive alert, else polite status). They are
+        // (re)applied unconditionally on every connect/variant change, NOT guarded
+        // behind "consumer hasn't set role" — deliberately, since the docs state they
+        // are not consumer-overridable: a wrong role here (e.g. presentation on a
+        // critical alert) would silently break the a11y contract.
         if (variant === 'critical') {
             this.setAttribute('role', 'alert');
             this.removeAttribute('aria-live');

package/dist/components/status-and-feedback/status-bar/status-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-bar.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,4BAA4B,CAAC;AAK7B,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAuB5C;QACC,KAAK,EAAE,CAAC;QApBT,YAAO,GAAqB,SAAS,CAAC;QAGtC,SAAI,GAAG,EAAE,CAAC;QAGV,SAAI,GAAG,EAAE,CAAC;QAEV,+DAA+D;QAE/D,WAAM,GAAG,EAAE,CAAC;QAEZ,sDAAsD;QAEtD,QAAG,GAAG,EAAE,CAAC;QAGT,WAAM,GAAG,KAAK,CAAC;QAId,wEAAwE;QACxE,uEAAuE;QACvE,oEAAoE;QACpE,8DAA8D;QAC9D,mEAAmE;QACnE,gDAAgD;QAChD,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAA4B,CAAC;QAC/E,IAAI,CAAC,oBAAoB,CAAC,cAAc,IAAI,SAAS,CAAC,CAAC;IACxD,CAAC;IAED,+EAA+E;IAC/E,YAAY;QACX,IAAI,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC,GAAG,CAAC;QAC9B,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC7C,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;YAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrE,CAAC;IAEO,oBAAoB,CAAC,OAAyB;QACrD,IAAI,OAAO,KAAK,UAAU,EAAE,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACnC,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;YACpC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QAC1C,CAAC;QACD,oEAAoE;QACpE,6DAA6D;QAC7D,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC;IAEQ,MAAM;QACd,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;;AA3De,oBAAM,GAAG,eAAe,AAAlB,CAAmB;AAGzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACJ;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACjB;AAIV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACf;AAIZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC5B;AArBH,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA6DzB"}
+{"version":3,"file":"status-bar.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,4BAA4B,CAAC;AAK7B,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAIN,YAAO,GAAqB,SAAS,CAAC;QAGtC,SAAI,GAAG,EAAE,CAAC;QAGV,SAAI,GAAG,EAAE,CAAC;QAEV,+DAA+D;QAE/D,WAAM,GAAG,EAAE,CAAC;QAEZ,sDAAsD;QAEtD,QAAG,GAAG,EAAE,CAAC;QAGT,WAAM,GAAG,KAAK,CAAC;IA8ChB,CAAC;IA5CS,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,wEAAwE;QACxE,uEAAuE;QACvE,4EAA4E;QAC5E,4EAA4E;QAC5E,4EAA4E;QAC5E,6EAA6E;QAC7E,4BAA4B;QAC5B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC;IAED,+EAA+E;IAC/E,YAAY;QACX,IAAI,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC,GAAG,CAAC;QAC9B,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC7C,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;YAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrE,CAAC;IAEO,oBAAoB,CAAC,OAAyB;QACrD,2EAA2E;QAC3E,0EAA0E;QAC1E,2EAA2E;QAC3E,8EAA8E;QAC9E,0EAA0E;QAC1E,0DAA0D;QAC1D,IAAI,OAAO,KAAK,UAAU,EAAE,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACnC,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;YACpC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QAC1C,CAAC;QACD,oEAAoE;QACpE,6DAA6D;QAC7D,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC;IAEQ,MAAM;QACd,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;;AAjEe,oBAAM,GAAG,eAAe,AAAlB,CAAmB;AAGzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACJ;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACjB;AAIV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACf;AAIZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC5B;AArBH,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAmEzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.61",
+  "version": "0.8.63",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -379,6 +379,10 @@
       "types": "./dist/components/status-and-feedback/status-bar/status-bar.d.ts",
       "default": "./dist/components/status-and-feedback/status-bar/status-bar.js"
     },
+    "./just-in-time-education": {
+      "types": "./dist/components/status-and-feedback/just-in-time-education/just-in-time-education.d.ts",
+      "default": "./dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js"
+    },
     "./styles": "./dist/css/global.css",
     "./styles/tokens": "./dist/css/settings.css",
     "./tokens": {