@nldd/design-system 0.8.57 → 0.8.58

package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js

@@ -106,30 +106,29 @@ export const progressCircleStyles = css `
 
 	/* ## Arc color per variant */
 
-	.progress-circle__segment-indicator--neutral { stroke: var(--components-progress-circle-neutral-background-color); }
-	.progress-circle__segment-indicator--accent { stroke: var(--components-progress-circle-accent-background-color); }
-	.progress-circle__segment-indicator--success { stroke: var(--components-progress-circle-success-background-color); }
-	.progress-circle__segment-indicator--warning { stroke: var(--components-progress-circle-warning-background-color); }
-	.progress-circle__segment-indicator--critical { stroke: var(--components-progress-circle-critical-background-color); }
-	.progress-circle__segment-indicator--coolgray { stroke: var(--components-progress-circle-coolgray-background-color); }
-	.progress-circle__segment-indicator--lintblauw { stroke: var(--components-progress-circle-lintblauw-background-color); }
-	.progress-circle__segment-indicator--donkerblauw { stroke: var(--components-progress-circle-donkerblauw-background-color); }
-	.progress-circle__segment-indicator--hemelblauw { stroke: var(--components-progress-circle-hemelblauw-background-color); }
-	.progress-circle__segment-indicator--lichtblauw { stroke: var(--components-progress-circle-lichtblauw-background-color); }
-	.progress-circle__segment-indicator--paars { stroke: var(--components-progress-circle-paars-background-color); }
-	.progress-circle__segment-indicator--violet { stroke: var(--components-progress-circle-violet-background-color); }
-	.progress-circle__segment-indicator--robijnrood { stroke: var(--components-progress-circle-robijnrood-background-color); }
-	.progress-circle__segment-indicator--roze { stroke: var(--components-progress-circle-roze-background-color); }
-	.progress-circle__segment-indicator--rood { stroke: var(--components-progress-circle-rood-background-color); }
-	.progress-circle__segment-indicator--oranje { stroke: var(--components-progress-circle-oranje-background-color); }
-	.progress-circle__segment-indicator--donkergeel { stroke: var(--components-progress-circle-donkergeel-background-color); }
-	.progress-circle__segment-indicator--geel { stroke: var(--components-progress-circle-geel-background-color); }
-	.progress-circle__segment-indicator--donkerbruin { stroke: var(--components-progress-circle-donkerbruin-background-color); }
-	.progress-circle__segment-indicator--bruin { stroke: var(--components-progress-circle-bruin-background-color); }
-	.progress-circle__segment-indicator--donkergroen { stroke: var(--components-progress-circle-donkergroen-background-color); }
-	.progress-circle__segment-indicator--groen { stroke: var(--components-progress-circle-groen-background-color); }
-	.progress-circle__segment-indicator--mosgroen { stroke: var(--components-progress-circle-mosgroen-background-color); }
-	.progress-circle__segment-indicator--mintgroen { stroke: var(--components-progress-circle-mintgroen-background-color); }
+	.progress-circle__segment-indicator--neutral { stroke: var(--semantics-categories-neutral-filled-background-color); }
+	.progress-circle__segment-indicator--accent { stroke: var(--semantics-categories-accent-filled-background-color); }
+	.progress-circle__segment-indicator--success { stroke: var(--semantics-categories-success-filled-background-color); }
+	.progress-circle__segment-indicator--warning { stroke: var(--semantics-categories-warning-filled-background-color); }
+	.progress-circle__segment-indicator--critical { stroke: var(--semantics-categories-critical-filled-background-color); }
+	.progress-circle__segment-indicator--lintblauw { stroke: var(--semantics-categories-lintblauw-filled-background-color); }
+	.progress-circle__segment-indicator--donkerblauw { stroke: var(--semantics-categories-donkerblauw-filled-background-color); }
+	.progress-circle__segment-indicator--hemelblauw { stroke: var(--semantics-categories-hemelblauw-filled-background-color); }
+	.progress-circle__segment-indicator--lichtblauw { stroke: var(--semantics-categories-lichtblauw-filled-background-color); }
+	.progress-circle__segment-indicator--paars { stroke: var(--semantics-categories-paars-filled-background-color); }
+	.progress-circle__segment-indicator--violet { stroke: var(--semantics-categories-violet-filled-background-color); }
+	.progress-circle__segment-indicator--robijnrood { stroke: var(--semantics-categories-robijnrood-filled-background-color); }
+	.progress-circle__segment-indicator--roze { stroke: var(--semantics-categories-roze-filled-background-color); }
+	.progress-circle__segment-indicator--rood { stroke: var(--semantics-categories-rood-filled-background-color); }
+	.progress-circle__segment-indicator--oranje { stroke: var(--semantics-categories-oranje-filled-background-color); }
+	.progress-circle__segment-indicator--donkergeel { stroke: var(--semantics-categories-donkergeel-filled-background-color); }
+	.progress-circle__segment-indicator--geel { stroke: var(--semantics-categories-geel-filled-background-color); }
+	.progress-circle__segment-indicator--donkerbruin { stroke: var(--semantics-categories-donkerbruin-filled-background-color); }
+	.progress-circle__segment-indicator--bruin { stroke: var(--semantics-categories-bruin-filled-background-color); }
+	.progress-circle__segment-indicator--donkergroen { stroke: var(--semantics-categories-donkergroen-filled-background-color); }
+	.progress-circle__segment-indicator--groen { stroke: var(--semantics-categories-groen-filled-background-color); }
+	.progress-circle__segment-indicator--mosgroen { stroke: var(--semantics-categories-mosgroen-filled-background-color); }
+	.progress-circle__segment-indicator--mintgroen { stroke: var(--semantics-categories-mintgroen-filled-background-color); }
 
 
 	/* # Spinner (indeterminate)
@@ -163,34 +162,33 @@ export const progressCircleStyles = css `
 	/* # Indeterminate fill + border colour follow the color variant; default accent (blue) */
 
 	:host {
-		--_indeterminate-background-color: var(--components-progress-circle-accent-background-color);
-		--_indeterminate-border-color: var(--components-progress-circle-accent-border-color);
+		--_indeterminate-background-color: var(--semantics-categories-accent-filled-background-color);
+		--_indeterminate-border-color: var(--semantics-categories-accent-filled-highlight-border-color);
 	}
 
-	:host([color="neutral"]) { --_indeterminate-background-color: var(--components-progress-circle-neutral-background-color); --_indeterminate-border-color: var(--components-progress-circle-neutral-border-color); }
-	:host([color="accent"]) { --_indeterminate-background-color: var(--components-progress-circle-accent-background-color); --_indeterminate-border-color: var(--components-progress-circle-accent-border-color); }
-	:host([color="success"]) { --_indeterminate-background-color: var(--components-progress-circle-success-background-color); --_indeterminate-border-color: var(--components-progress-circle-success-border-color); }
-	:host([color="warning"]) { --_indeterminate-background-color: var(--components-progress-circle-warning-background-color); --_indeterminate-border-color: var(--components-progress-circle-warning-border-color); }
-	:host([color="critical"]) { --_indeterminate-background-color: var(--components-progress-circle-critical-background-color); --_indeterminate-border-color: var(--components-progress-circle-critical-border-color); }
-	:host([color="coolgray"]) { --_indeterminate-background-color: var(--components-progress-circle-coolgray-background-color); --_indeterminate-border-color: var(--components-progress-circle-coolgray-border-color); }
-	:host([color="lintblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-lintblauw-background-color); --_indeterminate-border-color: var(--components-progress-circle-lintblauw-border-color); }
-	:host([color="donkerblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-donkerblauw-background-color); --_indeterminate-border-color: var(--components-progress-circle-donkerblauw-border-color); }
-	:host([color="hemelblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-hemelblauw-background-color); --_indeterminate-border-color: var(--components-progress-circle-hemelblauw-border-color); }
-	:host([color="lichtblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-lichtblauw-background-color); --_indeterminate-border-color: var(--components-progress-circle-lichtblauw-border-color); }
-	:host([color="paars"]) { --_indeterminate-background-color: var(--components-progress-circle-paars-background-color); --_indeterminate-border-color: var(--components-progress-circle-paars-border-color); }
-	:host([color="violet"]) { --_indeterminate-background-color: var(--components-progress-circle-violet-background-color); --_indeterminate-border-color: var(--components-progress-circle-violet-border-color); }
-	:host([color="robijnrood"]) { --_indeterminate-background-color: var(--components-progress-circle-robijnrood-background-color); --_indeterminate-border-color: var(--components-progress-circle-robijnrood-border-color); }
-	:host([color="roze"]) { --_indeterminate-background-color: var(--components-progress-circle-roze-background-color); --_indeterminate-border-color: var(--components-progress-circle-roze-border-color); }
-	:host([color="rood"]) { --_indeterminate-background-color: var(--components-progress-circle-rood-background-color); --_indeterminate-border-color: var(--components-progress-circle-rood-border-color); }
-	:host([color="oranje"]) { --_indeterminate-background-color: var(--components-progress-circle-oranje-background-color); --_indeterminate-border-color: var(--components-progress-circle-oranje-border-color); }
-	:host([color="donkergeel"]) { --_indeterminate-background-color: var(--components-progress-circle-donkergeel-background-color); --_indeterminate-border-color: var(--components-progress-circle-donkergeel-border-color); }
-	:host([color="geel"]) { --_indeterminate-background-color: var(--components-progress-circle-geel-background-color); --_indeterminate-border-color: var(--components-progress-circle-geel-border-color); }
-	:host([color="donkerbruin"]) { --_indeterminate-background-color: var(--components-progress-circle-donkerbruin-background-color); --_indeterminate-border-color: var(--components-progress-circle-donkerbruin-border-color); }
-	:host([color="bruin"]) { --_indeterminate-background-color: var(--components-progress-circle-bruin-background-color); --_indeterminate-border-color: var(--components-progress-circle-bruin-border-color); }
-	:host([color="donkergroen"]) { --_indeterminate-background-color: var(--components-progress-circle-donkergroen-background-color); --_indeterminate-border-color: var(--components-progress-circle-donkergroen-border-color); }
-	:host([color="groen"]) { --_indeterminate-background-color: var(--components-progress-circle-groen-background-color); --_indeterminate-border-color: var(--components-progress-circle-groen-border-color); }
-	:host([color="mosgroen"]) { --_indeterminate-background-color: var(--components-progress-circle-mosgroen-background-color); --_indeterminate-border-color: var(--components-progress-circle-mosgroen-border-color); }
-	:host([color="mintgroen"]) { --_indeterminate-background-color: var(--components-progress-circle-mintgroen-background-color); --_indeterminate-border-color: var(--components-progress-circle-mintgroen-border-color); }
+	:host([color="neutral"]) { --_indeterminate-background-color: var(--semantics-categories-neutral-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-neutral-filled-highlight-border-color); }
+	:host([color="accent"]) { --_indeterminate-background-color: var(--semantics-categories-accent-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-accent-filled-highlight-border-color); }
+	:host([color="success"]) { --_indeterminate-background-color: var(--semantics-categories-success-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-success-filled-highlight-border-color); }
+	:host([color="warning"]) { --_indeterminate-background-color: var(--semantics-categories-warning-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-warning-filled-highlight-border-color); }
+	:host([color="critical"]) { --_indeterminate-background-color: var(--semantics-categories-critical-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-critical-filled-highlight-border-color); }
+	:host([color="lintblauw"]) { --_indeterminate-background-color: var(--semantics-categories-lintblauw-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-lintblauw-filled-highlight-border-color); }
+	:host([color="donkerblauw"]) { --_indeterminate-background-color: var(--semantics-categories-donkerblauw-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-donkerblauw-filled-highlight-border-color); }
+	:host([color="hemelblauw"]) { --_indeterminate-background-color: var(--semantics-categories-hemelblauw-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-hemelblauw-filled-highlight-border-color); }
+	:host([color="lichtblauw"]) { --_indeterminate-background-color: var(--semantics-categories-lichtblauw-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-lichtblauw-filled-highlight-border-color); }
+	:host([color="paars"]) { --_indeterminate-background-color: var(--semantics-categories-paars-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-paars-filled-highlight-border-color); }
+	:host([color="violet"]) { --_indeterminate-background-color: var(--semantics-categories-violet-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-violet-filled-highlight-border-color); }
+	:host([color="robijnrood"]) { --_indeterminate-background-color: var(--semantics-categories-robijnrood-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-robijnrood-filled-highlight-border-color); }
+	:host([color="roze"]) { --_indeterminate-background-color: var(--semantics-categories-roze-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-roze-filled-highlight-border-color); }
+	:host([color="rood"]) { --_indeterminate-background-color: var(--semantics-categories-rood-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-rood-filled-highlight-border-color); }
+	:host([color="oranje"]) { --_indeterminate-background-color: var(--semantics-categories-oranje-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-oranje-filled-highlight-border-color); }
+	:host([color="donkergeel"]) { --_indeterminate-background-color: var(--semantics-categories-donkergeel-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-donkergeel-filled-highlight-border-color); }
+	:host([color="geel"]) { --_indeterminate-background-color: var(--semantics-categories-geel-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-geel-filled-highlight-border-color); }
+	:host([color="donkerbruin"]) { --_indeterminate-background-color: var(--semantics-categories-donkerbruin-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-donkerbruin-filled-highlight-border-color); }
+	:host([color="bruin"]) { --_indeterminate-background-color: var(--semantics-categories-bruin-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-bruin-filled-highlight-border-color); }
+	:host([color="donkergroen"]) { --_indeterminate-background-color: var(--semantics-categories-donkergroen-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-donkergroen-filled-highlight-border-color); }
+	:host([color="groen"]) { --_indeterminate-background-color: var(--semantics-categories-groen-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-groen-filled-highlight-border-color); }
+	:host([color="mosgroen"]) { --_indeterminate-background-color: var(--semantics-categories-mosgroen-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-mosgroen-filled-highlight-border-color); }
+	:host([color="mintgroen"]) { --_indeterminate-background-color: var(--semantics-categories-mintgroen-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-mintgroen-filled-highlight-border-color); }
 
 
 	/* # Caption (label + value) */

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

@@ -1 +1 @@
-{"version":3,"file":"progress-circle.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-circle/progress-circle.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;IAqBnC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwOrB,CAAC;AAGF,MAAM,CAAC,MAAM,oCAAoC,GAAG,GAAG,CAAA;;;;CAItD,CAAC"}
+{"version":3,"file":"progress-circle.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-circle/progress-circle.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;IAqBnC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsOrB,CAAC;AAGF,MAAM,CAAC,MAAM,oCAAoC,GAAG,GAAG,CAAA;;;;CAItD,CAAC"}

package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js

@@ -94,7 +94,7 @@ export function progressCircleTemplate(component, onSlotChange) {
 						<filter id="progress-circle-border-${color}-${uid}" filterUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
 							<feMorphology in="SourceGraphic" operator="erode" radius=${borderErodeRadius} result="eroded"></feMorphology>
 							<feComposite operator="out" in="SourceGraphic" in2="eroded" result="edge"></feComposite>
-							<feFlood style="flood-color: var(--components-progress-circle-${color}-border-color)" result="flood"></feFlood>
+							<feFlood style="flood-color: var(--semantics-categories-${color}-filled-highlight-border-color)" result="flood"></feFlood>
 							<feComposite operator="in" in="flood" in2="edge" result="colored"></feComposite>
 							<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
 						</filter>

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

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

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

@@ -0,0 +1,60 @@
+/**
+ * NLDD Design System Status Bar Component (Lit + TypeScript)
+ *
+ * Een smalle, paginabrede statusbalk (24px) met een diepe achtergrondkleur
+ * per variant. Gebruik voor persistente systeemtoestand: een storing, gepland
+ * onderhoud, een conceptweergave of een lopende opname. De balk toont bewust
+ * geen icoon en ondersteunt alleen tekst — de tekst zelf moet de status
+ * benoemen ("Storing: …", "Gepland onderhoud …"), zodat de betekenis niet
+ * alleen uit kleur volgt (WCAG 1.4.1).
+ *
+ * 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
+ * affordance. Maximaal één actie per balk; meerdere acties of links in
+ * lopende tekst horen in nldd-banner.
+ *
+ * ## ARIA
+ * role en aria-live worden automatisch gezet op basis van de variant:
+ * - critical → role="alert" (impliceert aria-live="assertive"; onderbreekt de screen reader)
+ * - overige  → role="status" aria-live="polite"
+ * Niet overschrijfbaar — is een rustiger component nodig, kies dan een ander.
+ * Gebruik `critical` alleen voor een echte noodsituatie: role="alert" onderbreekt
+ * de screen reader bij élke wijziging van de inhoud, dus plaats er geen tekst in
+ * die regelmatig verandert (zoals een aftellende timer).
+ *
+ * @element nldd-status-bar
+ *
+ * @attr {'neutral'|'accent'|'success'|'warning'|'critical'} variant - Kleur van de balk (standaard: 'neutral')
+ * @attr {string}  text   - De statustekst (één regel; afgekapt met ellipsis)
+ * @attr {string}  href   - Maakt de hele balk een link (rendert een <a>)
+ * @attr {string}  target - Link target (bijv. '_blank'); alleen gebruikt bij href
+ * @attr {string}  rel    - Link rel; standaard 'noopener noreferrer' bij target='_blank'
+ * @attr {boolean} button - Maakt de hele balk een button; genegeerd als href is gezet
+ */
+import { LitElement } from 'lit';
+import '../../content/icon/icon.js';
+export type StatusBarVariant = 'neutral' | 'accent' | 'success' | 'warning' | 'critical';
+export declare class NLDDStatusBar extends LitElement {
+    static styles: import("lit").CSSResult;
+    variant: StatusBarVariant;
+    text: string;
+    href: string;
+    /** Link target (e.g. '_blank'). Only used when href is set. */
+    target: string;
+    /** Link rel attribute. Only used when href is set. */
+    rel: string;
+    button: boolean;
+    constructor();
+    /** @internal Auto-secure rel for new-tab links unless the consumer set one. */
+    _resolvedRel(): string;
+    updated(changed: Map<string, unknown>): void;
+    private _applyAriaForVariant;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-status-bar': NLDDStatusBar;
+    }
+}
+//# sourceMappingURL=status-bar.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,116 @@
+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;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * NLDD Design System Status Bar Component (Lit + TypeScript)
+ *
+ * Een smalle, paginabrede statusbalk (24px) met een diepe achtergrondkleur
+ * per variant. Gebruik voor persistente systeemtoestand: een storing, gepland
+ * onderhoud, een conceptweergave of een lopende opname. De balk toont bewust
+ * geen icoon en ondersteunt alleen tekst — de tekst zelf moet de status
+ * benoemen ("Storing: …", "Gepland onderhoud …"), zodat de betekenis niet
+ * alleen uit kleur volgt (WCAG 1.4.1).
+ *
+ * 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
+ * affordance. Maximaal één actie per balk; meerdere acties of links in
+ * lopende tekst horen in nldd-banner.
+ *
+ * ## ARIA
+ * role en aria-live worden automatisch gezet op basis van de variant:
+ * - critical → role="alert" (impliceert aria-live="assertive"; onderbreekt de screen reader)
+ * - overige  → role="status" aria-live="polite"
+ * Niet overschrijfbaar — is een rustiger component nodig, kies dan een ander.
+ * Gebruik `critical` alleen voor een echte noodsituatie: role="alert" onderbreekt
+ * de screen reader bij élke wijziging van de inhoud, dus plaats er geen tekst in
+ * die regelmatig verandert (zoals een aftellende timer).
+ *
+ * @element nldd-status-bar
+ *
+ * @attr {'neutral'|'accent'|'success'|'warning'|'critical'} variant - Kleur van de balk (standaard: 'neutral')
+ * @attr {string}  text   - De statustekst (één regel; afgekapt met ellipsis)
+ * @attr {string}  href   - Maakt de hele balk een link (rendert een <a>)
+ * @attr {string}  target - Link target (bijv. '_blank'); alleen gebruikt bij href
+ * @attr {string}  rel    - Link rel; standaard 'noopener noreferrer' bij target='_blank'
+ * @attr {boolean} button - Maakt de hele balk een button; genegeerd als href is gezet
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { statusBarStyles } from './status-bar.styles.js';
+import { statusBarTemplate } from './status-bar.template.js';
+import '../../content/icon/icon.js';
+let NLDDStatusBar = class NLDDStatusBar extends LitElement {
+    constructor() {
+        super();
+        this.variant = 'neutral';
+        this.text = '';
+        this.href = '';
+        /** Link target (e.g. '_blank'). Only used when href is set. */
+        this.target = '';
+        /** 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');
+    }
+    /** @internal Auto-secure rel for new-tab links unless the consumer set one. */
+    _resolvedRel() {
+        if (this.rel)
+            return this.rel;
+        return this.target === '_blank' ? 'noopener noreferrer' : '';
+    }
+    updated(changed) {
+        if (changed.has('variant'))
+            this._applyAriaForVariant(this.variant);
+    }
+    _applyAriaForVariant(variant) {
+        if (variant === 'critical') {
+            this.setAttribute('role', 'alert');
+            this.removeAttribute('aria-live');
+        }
+        else {
+            this.setAttribute('role', 'status');
+            this.setAttribute('aria-live', 'polite');
+        }
+        // The bar is announced as one unit; without aria-atomic some screen
+        // readers announce only the changed subtree on text updates.
+        this.setAttribute('aria-atomic', 'true');
+    }
+    render() {
+        return statusBarTemplate(this);
+    }
+};
+NLDDStatusBar.styles = statusBarStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDStatusBar.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], NLDDStatusBar.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], NLDDStatusBar.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], NLDDStatusBar.prototype, "target", void 0);
+__decorate([
+    property({ type: String })
+], NLDDStatusBar.prototype, "rel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDStatusBar.prototype, "button", void 0);
+NLDDStatusBar = __decorate([
+    customElement('nldd-status-bar')
+], NLDDStatusBar);
+export { NLDDStatusBar };
+//# sourceMappingURL=status-bar.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+export declare const statusBarStyles: import("lit").CSSResult;
+//# sourceMappingURL=status-bar.styles.d.ts.map

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

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

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

@@ -0,0 +1,142 @@
+import { css } from 'lit';
+import { inheritedTextReset } from '../../../assets/styles/slotted-reset.js';
+export const statusBarStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_corner-radius: var(--primitives-corner-radius-none);
+		--_background-color: var(--components-status-bar-neutral-background-color);
+		--_height: var(--components-status-bar-height);
+		--_inline-padding: var(--primitives-space-8);
+		--_gap: var(--primitives-space-2);
+		--_content-color: var(--components-status-bar-neutral-content-color);
+		--_font: var(--primitives-font-body-xs-medium-flat);
+		--_is-hovered-background-color: var(--components-status-bar-neutral-is-hovered-background-color);
+		--_is-active-background-color: var(--components-status-bar-neutral-is-active-background-color);
+		--_action-icon-size: var(--primitives-space-16);
+
+		${inheritedTextReset}
+		display: block;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([variant="accent"]) {
+		--_background-color: var(--components-status-bar-accent-background-color);
+		--_content-color: var(--components-status-bar-accent-content-color);
+		--_is-hovered-background-color: var(--components-status-bar-accent-is-hovered-background-color);
+		--_is-active-background-color: var(--components-status-bar-accent-is-active-background-color);
+	}
+
+	:host([variant="success"]) {
+		--_background-color: var(--components-status-bar-success-background-color);
+		--_content-color: var(--components-status-bar-success-content-color);
+		--_is-hovered-background-color: var(--components-status-bar-success-is-hovered-background-color);
+		--_is-active-background-color: var(--components-status-bar-success-is-active-background-color);
+	}
+
+	:host([variant="warning"]) {
+		--_background-color: var(--components-status-bar-warning-background-color);
+		--_content-color: var(--components-status-bar-warning-content-color);
+		--_is-hovered-background-color: var(--components-status-bar-warning-is-hovered-background-color);
+		--_is-active-background-color: var(--components-status-bar-warning-is-active-background-color);
+	}
+
+	:host([variant="critical"]) {
+		--_background-color: var(--components-status-bar-critical-background-color);
+		--_content-color: var(--components-status-bar-critical-content-color);
+		--_is-hovered-background-color: var(--components-status-bar-critical-is-hovered-background-color);
+		--_is-active-background-color: var(--components-status-bar-critical-is-active-background-color);
+	}
+
+
+	/* # Bar
+	   One rule for all three render modes (div, a, button); the resets
+	   neutralise the a/button UA styles so the modes are visually
+	   identical. */
+
+	.status-bar {
+		appearance: none;
+		box-sizing: border-box;
+		display: flex;
+		margin: 0;
+		border: none;
+		border-radius: var(--_corner-radius);
+		background-color: var(--_background-color);
+		width: 100%;
+		height: var(--_height);
+		overflow: hidden;
+		padding-inline: var(--_inline-padding);
+		gap: var(--_gap);
+		align-items: center;
+		justify-content: center;
+		color: var(--_content-color);
+		font: var(--_font);
+		text-decoration: none;
+		white-space: nowrap;
+	}
+
+	@media (forced-colors: active) {
+		.status-bar {
+			border: var(--primitives-border-width-thin) solid CanvasText;
+		}
+	}
+
+	a.status-bar {
+		cursor: var(--semantics-controls-link-cursor);
+	}
+
+	a.status-bar:hover,
+	button.status-bar:hover {
+		background-color: var(--_is-hovered-background-color);
+	}
+
+	a.status-bar:active,
+	button.status-bar:active {
+		background-color: var(--_is-active-background-color);
+	}
+
+
+	/* # Focus */
+
+	.status-bar:focus-visible {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	.status-bar:focus:not(:focus-visible) {
+		outline: none;
+	}
+
+	@media (forced-colors: active) {
+		.status-bar:focus-visible {
+			outline: 2px solid CanvasText;
+		}
+	}
+
+
+	/* # Text */
+
+	.status-bar__text {
+		display: block;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+
+	/* # Action icon */
+
+	.status-bar__action-icon {
+		display: flex;
+		flex-shrink: 0;
+		width: var(--_action-icon-size);
+	}
+`;
+//# sourceMappingURL=status-bar.styles.js.map

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

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

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

@@ -0,0 +1,3 @@
+import type { NLDDStatusBar } from './status-bar.js';
+export declare function statusBarTemplate(component: NLDDStatusBar): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=status-bar.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,aAAa,wCA6BzD"}

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

@@ -0,0 +1,32 @@
+import { html, nothing } from 'lit';
+export function statusBarTemplate(component) {
+    const interactive = Boolean(component.href || component.button);
+    const content = html `
+		<span class="status-bar__text">${component.text}</span>
+		${interactive ? html `
+			<span class="status-bar__action-icon"
+				aria-hidden="true"
+			>
+				<nldd-icon name="chevron-right-small"></nldd-icon>
+			</span>
+		` : nothing}
+	`;
+    if (component.href) {
+        return html `
+			<a class="status-bar"
+				href=${component.href}
+				target=${component.target || nothing}
+				rel=${component._resolvedRel() || nothing}
+			>${content}</a>
+		`;
+    }
+    if (component.button) {
+        return html `
+			<button class="status-bar"
+				type="button"
+			>${content}</button>
+		`;
+    }
+    return html `<div class="status-bar">${content}</div>`;
+}
+//# sourceMappingURL=status-bar.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,iBAAiB,CAAC,SAAwB;IACzD,MAAM,WAAW,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC;IAChE,MAAM,OAAO,GAAG,IAAI,CAAA;mCACc,SAAS,CAAC,IAAI;IAC7C,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;GAMnB,CAAC,CAAC,CAAC,OAAO;EACX,CAAC;IACF,IAAI,SAAS,CAAC,IAAI,EAAE,CAAC;QACpB,OAAO,IAAI,CAAA;;WAEF,SAAS,CAAC,IAAI;aACZ,SAAS,CAAC,MAAM,IAAI,OAAO;UAC9B,SAAS,CAAC,YAAY,EAAE,IAAI,OAAO;MACvC,OAAO;GACV,CAAC;IACH,CAAC;IACD,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;QACtB,OAAO,IAAI,CAAA;;;MAGP,OAAO;GACV,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAA,2BAA2B,OAAO,QAAQ,CAAC;AACvD,CAAC"}