@nldd/design-system 0.8.61 → 0.8.63

package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js

@@ -18,6 +18,8 @@ export const activityIndicatorStyles = css `
 		--_gap: var(--primitives-space-4);
 		--_text-font: var(--primitives-font-body-sm-regular-flat);
 		--_backdrop-blur: 3px;
+		--_overlay-panel-padding: var(--primitives-space-12);
+		--_overlay-panel-corner-radius: var(--primitives-corner-radius-md);
 
 		${inheritedTextReset}
 		box-sizing: border-box;
@@ -35,10 +37,13 @@ export const activityIndicatorStyles = css `
 		display: none;
 	}
 
-	/* The opt-in backdrop is an absolutely-positioned layer that fills the host,
-	   so the host has to be its containing block. */
-	:host([backdrop]) {
+	/* Overlay mode (content in the default slot): the host wraps the content and
+	   is the containing block for the absolutely-positioned indicator + backdrop,
+	   so it sizes to the content instead of filling its parent. */
+	:host([has-content]) {
+		display: block;
 		position: relative;
+		height: auto;
 	}
 
 
@@ -59,35 +64,75 @@ export const activityIndicatorStyles = css `
 
 
 	/* # Block
-	   Fades the indicator in once it becomes visible (both timing modes), and
-	   stacks the default circle + label as a centred column. width:100% +
+	   Stacks the default circle + label as a centred column. width:100% +
 	   max-width gives a slotted progress-bar a width to fill; the fixed-size
 	   circle and the label stay centred via align-items. */
 
 	.activity-indicator {
 		/* position:relative so it paints above the absolutely-positioned backdrop
-		   (both are z-index:auto; the backdrop comes first in the DOM). */
+		   (both are z-index:auto; the backdrop comes first in the DOM). Hidden by
+		   default; the loading host attribute fades it (and the backdrop) in and
+		   out — opacity + display via transition-behavior: allow-discrete, with a
+		   starting-style for the entry. */
 		position: relative;
-		display: flex;
-		flex-direction: column;
+		display: none;
+		opacity: 0;
+		pointer-events: none;
 		width: 100%;
 		max-width: var(--_max-width);
+		flex-direction: column;
 		align-items: center;
 		gap: var(--_gap);
-		animation: activity-indicator-fade-in var(--_fade-duration) var(--_fade-easing);
+		transition-property: opacity, display;
+		transition-duration: var(--_fade-duration);
+		transition-timing-function: var(--_fade-easing);
+		transition-behavior: allow-discrete;
+	}
+
+	:host([loading]) .activity-indicator {
+		display: flex;
+		opacity: 1;
+	}
+
+	@starting-style {
+		:host([loading]) .activity-indicator {
+			opacity: 0;
+		}
 	}
 
-	@keyframes activity-indicator-fade-in {
-		from { opacity: 0; }
+	/* Overlay mode: the wrapped content flows normally; the indicator + backdrop
+	   sit on top as absolute layers that fill the host. */
+	.activity-indicator__content {
+		display: block;
 	}
 
-	/* Opt-in dimming layer (the backdrop attribute): the context parent
-	   background colour — fallback the base surface — at one minus the disabled
-	   opacity, so the content underneath reads as inactive while loading. Fades
-	   in with the indicator. */
+	/* Overlay mode: the indicator + label sit on a small rounded base-surface
+	   panel that hugs them with padding (not the full component width) so they
+	   keep contrast over the dimmed content, and read in the content colour
+	   instead of inheriting currentColor. */
+	:host([has-content]) .activity-indicator {
+		box-sizing: border-box;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		border-radius: var(--_overlay-panel-corner-radius);
+		background-color: var(--semantics-surfaces-base-background-color);
+		width: max-content;
+		max-width: calc(100% - var(--primitives-space-32));
+		padding: var(--_overlay-panel-padding);
+		color: var(--semantics-content-color);
+		transform: translate(-50%, -50%);
+	}
+
+	/* Dimming layer (overlay mode, on by default; opt out with no-backdrop): the
+	   context parent background colour — fallback the base surface — at one minus
+	   the disabled opacity, so the content underneath reads as inactive while
+	   loading. Fades in and out with the indicator via the loading attribute. */
 	.activity-indicator__backdrop {
 		position: absolute;
 		inset: 0;
+		display: none;
+		opacity: 0;
 		/* Frosted dim: the parent surface — fallback base surface — as a
 		   translucent fill at one minus the disabled opacity (a translucent
 		   colour, not element opacity, which would hide the blur), plus a blur so
@@ -96,7 +141,22 @@ export const activityIndicatorStyles = css `
 		background-color: color-mix(in oklab, var(--context-parent-background-color, var(--semantics-surfaces-base-background-color)) calc((1 - var(--primitives-opacity-disabled)) * 100%), transparent);
 		-webkit-backdrop-filter: blur(var(--_backdrop-blur));
 		backdrop-filter: blur(var(--_backdrop-blur));
-		animation: activity-indicator-fade-in var(--_fade-duration) var(--_fade-easing);
+		pointer-events: none;
+		transition-property: opacity, display;
+		transition-duration: var(--_fade-duration);
+		transition-timing-function: var(--_fade-easing);
+		transition-behavior: allow-discrete;
+	}
+
+	:host([loading]) .activity-indicator__backdrop {
+		display: block;
+		opacity: 1;
+	}
+
+	@starting-style {
+		:host([loading]) .activity-indicator__backdrop {
+			opacity: 0;
+		}
 	}
 
 	/* display:contents so the default circle + label (or a slotted override)
@@ -162,7 +222,7 @@ export const activityIndicatorStyles = css `
 	@media (prefers-reduced-motion: reduce) {
 		.activity-indicator,
 		.activity-indicator__backdrop {
-			animation: none;
+			transition: none;
 		}
 
 		.activity-indicator__indicator {

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

@@ -1 +1 @@
-{"version":3,"file":"activity-indicator.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;IAmBtC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JrB,CAAC"}
+{"version":3,"file":"activity-indicator.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;IAqBtC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuNrB,CAAC"}

package/dist/components/status-and-feedback/activity-indicator/activity-indicator.template.d.ts

@@ -1,4 +1,3 @@
-import { nothing } from 'lit';
 import type { NLDDActivityIndicator } from './activity-indicator.js';
-export declare function activityIndicatorTemplate(component: NLDDActivityIndicator): import("lit-html").TemplateResult<1> | typeof nothing;
+export declare function activityIndicatorTemplate(component: NLDDActivityIndicator): import("lit-html").TemplateResult<1>;
 //# sourceMappingURL=activity-indicator.template.d.ts.map

package/dist/components/status-and-feedback/activity-indicator/activity-indicator.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"activity-indicator.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,qBAAqB,yDAqCzE"}
+{"version":3,"file":"activity-indicator.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,qBAAqB,wCAoDzE"}

package/dist/components/status-and-feedback/activity-indicator/activity-indicator.template.js

@@ -1,18 +1,32 @@
 import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 export function activityIndicatorTemplate(component) {
-    // Render nothing while the delay window is open so the indicator doesn't
-    // even flash for sub-second loads, or once `complete` is set so the
-    // element stays mounted but ARIA / visuals reflect the finished state.
-    if (!component._visible || component.complete)
-        return nothing;
+    // Disable + busy-mark the wrapped content while loading (overlay mode). `inert`
+    // works over the flat tree, so it reaches the slotted (light-DOM) content and
+    // takes its controls out of the tab order — which pointer-events alone can't.
+    // (aria-busy below reflects the busy state explicitly as true/false rather than
+    // toggling the attribute, which some AT track more reliably; note that inert also
+    // removes the subtree from the a11y tree, so AT relies on the role="status" host,
+    // not this aria-busy, for the loading announcement.)
+    const disableContent = component._visible && !component.complete && component._hasContent;
+    // The backdrop dims the inert content in overlay mode (unless opted out). It
+    // renders for the whole overlay-mode lifetime; the `loading` host attribute —
+    // not conditional rendering — drives its (and the indicator's) fade in AND
+    // out, so the overlay can also transition away when loading finishes.
+    const renderBackdrop = component._hasContent && !component.noBackdrop;
     // The label always renders so it is the announced content of the
     // role="status" host; show-text only controls whether it is visible.
     const text = component._accessibleName;
     return html `
-		${component.backdrop ? html `<div class="activity-indicator__backdrop" aria-hidden="true"></div>` : nothing}
+		<div class="activity-indicator__content"
+			?inert=${disableContent}
+			aria-busy=${disableContent ? 'true' : 'false'}
+		>
+			<slot @slotchange=${component._onContentSlotChange}></slot>
+		</div>
+		${renderBackdrop ? html `<div class="activity-indicator__backdrop" aria-hidden="true"></div>` : nothing}
 		<div class="activity-indicator">
-			<slot>
+			<slot name="indicator">
 				<svg class="activity-indicator__circle"
 					viewBox="0 0 24 24"
 					fill="none"

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

@@ -1 +1 @@
-{"version":3,"file":"activity-indicator.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD,MAAM,UAAU,yBAAyB,CAAC,SAAgC;IACzE,yEAAyE;IACzE,oEAAoE;IACpE,uEAAuE;IACvE,IAAI,CAAC,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ;QAAE,OAAO,OAAO,CAAC;IAC9D,iEAAiE;IACjE,qEAAqE;IACrE,MAAM,IAAI,GAAG,SAAS,CAAC,eAAe,CAAC;IACvC,OAAO,IAAI,CAAA;IACR,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,qEAAqE,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;kBAqB1F,QAAQ,CAAC;QACvB,0BAA0B,EAAE,IAAI;QAChC,2CAA2C,EAAE,CAAC,SAAS,CAAC,QAAQ;KAChE,CAAC,IAAI,IAAI;;;EAGX,CAAC;AACH,CAAC"}
+{"version":3,"file":"activity-indicator.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD,MAAM,UAAU,yBAAyB,CAAC,SAAgC;IACzE,gFAAgF;IAChF,8EAA8E;IAC9E,8EAA8E;IAC9E,gFAAgF;IAChF,kFAAkF;IAClF,kFAAkF;IAClF,qDAAqD;IACrD,MAAM,cAAc,GAAG,SAAS,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,WAAW,CAAC;IAC1F,6EAA6E;IAC7E,8EAA8E;IAC9E,2EAA2E;IAC3E,sEAAsE;IACtE,MAAM,cAAc,GAAG,SAAS,CAAC,WAAW,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;IACtE,iEAAiE;IACjE,qEAAqE;IACrE,MAAM,IAAI,GAAG,SAAS,CAAC,eAAe,CAAC;IACvC,OAAO,IAAI,CAAA;;YAEA,cAAc;eACX,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;uBAEzB,SAAS,CAAC,oBAAoB;;IAEjD,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA,qEAAqE,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;kBAqBtF,QAAQ,CAAC;QACvB,0BAA0B,EAAE,IAAI;QAChC,2CAA2C,EAAE,CAAC,SAAS,CAAC,QAAQ;KAChE,CAAC,IAAI,IAAI;;;EAGX,CAAC;AACH,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"inline-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4CAA4C,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAEhG,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAsB;IAG5C,OAAO,EAAE,mBAAmB,GAAG,EAAE,CAAM;IAGvC,IAAI,EAAE,gBAAgB,CAAQ;IAG9B,IAAI,SAAM;IAGV,SAAS,EAAE,qBAAqB,GAAG,EAAE,CAAM;IAG3C,IAAI,SAAM;IAGV,cAAc,SAAM;IAGpB,YAAY,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAQ;IAGlD,WAAW,UAAS;IAGpB,WAAW,UAAS;IAEpB,IAAI,iBAAiB,IAAI,MAAM,CAK9B;IAEQ,YAAY;IAsBZ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}
+{"version":3,"file":"inline-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4CAA4C,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAEhG,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAsB;IAG5C,OAAO,EAAE,mBAAmB,GAAG,EAAE,CAAM;IAGvC,IAAI,EAAE,gBAAgB,CAAQ;IAG9B,IAAI,SAAM;IAGV,SAAS,EAAE,qBAAqB,GAAG,EAAE,CAAM;IAG3C,IAAI,SAAM;IAGV,cAAc,SAAM;IAGpB,YAAY,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAQ;IAGlD,WAAW,UAAS;IAGpB,WAAW,UAAS;IAEpB,IAAI,iBAAiB,IAAI,MAAM,CAK9B;IAEQ,YAAY;IAgCZ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}

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

@@ -67,8 +67,18 @@ let NLDDInlineDialog = class NLDDInlineDialog extends LitElement {
         const syncActions = () => { this._hasActions = hasMeaningfulContent(actionsSlot); };
         contentSlot?.addEventListener('slotchange', syncContent);
         actionsSlot?.addEventListener('slotchange', syncActions);
-        syncContent();
-        syncActions();
+        // Defer the initial sync out of the update lifecycle: setting reactive
+        // state synchronously here re-enters the current update and triggers Lit's
+        // change-in-update warning. A microtask runs after this update completes,
+        // so the follow-up render (when a slot has content) is scheduled cleanly.
+        // slotchange handles every later change; this covers the initial state.
+        // SSR caveat (no SSR today): on hydration the first paint can land before this
+        // microtask drains, briefly showing the empty-slot state. If SSR is adopted,
+        // move this into willUpdate (or a second requestUpdate in firstUpdated).
+        queueMicrotask(() => {
+            syncContent();
+            syncActions();
+        });
     }
     render() {
         return inlineDialogTemplate(this);

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

@@ -1 +1 @@
-{"version":3,"file":"inline-dialog.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"inline-dialog.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,123 @@
+/**
+ * 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.
+ *
+ * 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).
+ *
+ * @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.
+ *
+ * @slot - Het control waar de coach-mark naar wijst (blijft in de normale flow).
+ *
+ * @fires nldd-close - Wanneer de coach-mark sluit. 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 `strategy: 'fixed'` + `autoUpdate`. De kant
+ * wordt bepaald door de beschikbare ruimte (horizontaal de viewport, verticaal
+ * het hele document) bij openen en bij window-resize; scrollen laat de kant vast
+ * en verschuift de callout alleen mee met het control.
+ *
+ * @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.
+ */
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+import '../../actions/icon-button/icon-button.js';
+type Placement = 'auto' | 'top' | 'bottom' | 'left' | 'right';
+export type JustInTimeEducationCloseReason = 'completed' | 'dismissed' | 'ignored';
+declare const NLDDJustInTimeEducation_base: (abstract new (...args: any[]) => LitElement & {
+    translations: Partial<{
+        'components.just-in-time-education.accessible-label': string;
+        'components.just-in-time-education.dismiss-action': string;
+    }>;
+    _t(key: "components.just-in-time-education.accessible-label" | "components.just-in-time-education.dismiss-action", vars?: Record<string, string | number>): string;
+}) & typeof LitElement;
+export declare class NLDDJustInTimeEducation extends NLDDJustInTimeEducation_base {
+    static styles: import("lit").CSSResult;
+    private static readonly _ownAttributes;
+    active: boolean;
+    text: string;
+    supportingText: string;
+    placement: Placement;
+    dismissable: boolean;
+    arrowLength: string;
+    noArrow: boolean;
+    private _cleanupAutoUpdate;
+    private _attachTimeout;
+    private _attributeObserver;
+    private _boundDocumentInteraction;
+    private _resolvedSide;
+    private _lastViewportWidth;
+    private _lastViewportHeight;
+    readonly _arrowMarkerId: string;
+    updated(changed: PropertyValues): void;
+    private get _containerEl();
+    private get _cardEl();
+    private get _announcerEl();
+    private _getControl;
+    private _getControls;
+    /** Mirror one host attribute onto the slotted control(s) — or remove it —
+     *  unless the component owns that attribute. */
+    private _forwardAttribute;
+    /** Forward every non-owned host attribute to the slotted control(s); run on
+     *  slotchange so a freshly slotted control catches up with what's already set. */
+    _handleSlotChange(): void;
+    private _open;
+    private _closePopover;
+    private _startPositioning;
+    private _stopPositioning;
+    private _updatePosition;
+    private _chooseSide;
+    private _updateArrow;
+    /** Route 1: the advised interaction on the slotted control (only when
+     *  dismissable; otherwise the consumer drives completion via complete()).
+     *  A mouse click fires pointerdown then focusin, both landing here; the
+     *  !this.active guard makes the second call a no-op so 'completed' fires once. */
+    _handleAdvisedInteraction(): void;
+    /** Route 2: a click/keystroke outside the coach-mark (only when dismissable). */
+    private _handleDocumentInteraction;
+    /** Route 3: the dismiss button. */
+    _handleDismiss(): void;
+    /** Escape while focus is inside the callout dismisses it (the ARIA non-modal
+     *  dialog expectation). The document capture listener (route 2) treats inside
+     *  events as not-outside and bails, so Escape is handled here. stopPropagation
+     *  keeps it from also closing an ancestor (e.g. a modal the coach-mark sits in). */
+    _handleCalloutKeydown(e: KeyboardEvent): void;
+    /** Programmatically mark the advised interaction as done (success close). */
+    complete(): void;
+    private _close;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-just-in-time-education': NLDDJustInTimeEducation;
+    }
+}
+export {};
+//# sourceMappingURL=just-in-time-education.d.ts.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ1C,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,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;IA8Bb,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,gBAAgB;YAMV,eAAe;IAyF7B,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"}

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

@@ -0,0 +1,6 @@
+export declare const nlddJustInTimeEducationTranslations: {
+    'components.just-in-time-education.accessible-label': string;
+    'components.just-in-time-education.dismiss-action': string;
+};
+export type NLDDJustInTimeEducationTranslations = typeof nlddJustInTimeEducationTranslations;
+//# sourceMappingURL=just-in-time-education.i18n.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"just-in-time-education.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/just-in-time-education/just-in-time-education.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mCAAmC;;;CAG/C,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,OAAO,mCAAmC,CAAC"}

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

@@ -0,0 +1,5 @@
+export const nlddJustInTimeEducationTranslations = {
+    'components.just-in-time-education.accessible-label': 'Uitleg',
+    'components.just-in-time-education.dismiss-action': 'Sluit',
+};
+//# sourceMappingURL=just-in-time-education.i18n.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"just-in-time-education.i18n.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/just-in-time-education/just-in-time-education.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mCAAmC,GAAG;IAClD,oDAAoD,EAAE,QAAQ;IAC9D,kDAAkD,EAAE,OAAO;CAC3D,CAAC"}