@nldd/design-system 0.8.57 → 0.8.59

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"}

package/dist/css/rich-text.css

@@ -49,8 +49,89 @@ nldd-rich-text[hidden] {
 	display: none;
 }
 
+/* # Color inherit
+   color="inherit" makes all text follow the surface's text color (e.g. a
+   filled-categories panel that sets a pure white/black content color).
+   Links keep the underline as their affordance and signal hover with a
+   thicker line instead of a color shift; figcaption takes the same color
+   at the system-wide secondary opacity tier. Known v1 gaps: inline code,
+   mark, tables and hr keep their own surfaces. */
+
+nldd-rich-text[color="inherit"] {
+	color: inherit;
+}
+
+nldd-rich-text[color="inherit"] a {
+	color: currentColor;
+	/* Pin the underline to the inherited color in every state. The hover rule
+	   below only changes thickness, so without this an underline could keep the
+	   default link blue and leak it against a colored surface. */
+	text-decoration-color: currentColor;
+}
+
+nldd-rich-text[color="inherit"] a:hover {
+	color: currentColor;
+	text-decoration-thickness: var(--primitives-border-width-regular);
+}
+
+nldd-rich-text[color="inherit"] a:active {
+	color: currentColor;
+}
+
+nldd-rich-text[color="inherit"] figcaption {
+	color: color-mix(in oklab, currentColor var(--semantics-content-secondary-opacity), transparent);
+}
+
+/* # Child placement
+   Text reads at the main measure; everything else (components, tables,
+   code) gets the full span by default so new components automatically
+   receive room. justify-self: start makes that room available without
+   forcing it: width-100% children fill the span, the rest shrinkwraps.
+   In the left-aligned layout the full/wide start lines collapse onto
+   main-start, so `full` and `wide` read as rightward bleed there and as
+   symmetric spans in [centered]. */
+
 nldd-rich-text > * {
+	grid-column: full;
+	justify-self: start;
+}
+
+nldd-rich-text[centered] > * {
+	justify-self: center;
+}
+
+nldd-rich-text > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, div, section, blockquote) {
 	grid-column: main;
+	/* Fill the main column so short text blocks keep a shared left edge —
+	   justify-self: center would otherwise float a shrinkwrapped heading
+	   loose from the paragraphs below it. border-box keeps padded elements
+	   (ul/ol list indent) inside the column. */
+	box-sizing: border-box;
+	width: 100%;
+}
+
+/* nldd-table stays on the generic full default; use data-width to
+   override per table. */
+nldd-rich-text > :is(img, figure, video, iframe, table) {
+	grid-column: wide;
+}
+
+nldd-rich-text > :is(pre, nldd-code-viewer) {
+	width: 100%;
+}
+
+/* Per-item override for editors; wins on specificity from every default
+   above. */
+nldd-rich-text > [data-width="main"] {
+	grid-column: main;
+}
+
+nldd-rich-text > [data-width="wide"] {
+	grid-column: wide;
+}
+
+nldd-rich-text > [data-width="full"] {
+	grid-column: full;
 }
 
 nldd-rich-text > :first-child {
@@ -305,10 +386,6 @@ nldd-rich-text figcaption {
 
 /* # Blockquote */
 
-nldd-rich-text > blockquote {
-	grid-column: main-start / wide-end;
-}
-
 nldd-rich-text blockquote {
 	display: flex;
 	flex-direction: column;
@@ -361,6 +438,7 @@ nldd-rich-text q {
 
 nldd-rich-text img {
 	display: block;
+	border-radius: var(--semantics-controls-md-corner-radius);
 	max-width: 100%;
 	height: auto;
 }
@@ -368,26 +446,25 @@ nldd-rich-text img {
 
 /* # Horizontal Rule */
 
-nldd-rich-text > hr {
-	grid-column: full;
-}
-
 nldd-rich-text hr {
 	margin: 0;
 	border: none;
 	border-top: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
+	/* An hr has no content, so the justify-self: start default would
+	   shrinkwrap it to zero width. */
+	width: 100%;
 }
 
 
 /* # Table */
 
-nldd-rich-text > table {
-	grid-column: main-start / full-end;
-}
-
 nldd-rich-text table {
 	display: block;
-	width: 100%;
+	/* Mobile scroll: the block shrinks to its content (so the border hugs
+	   narrow tables) but caps at the container, scrolling when the columns
+	   need more room. width: auto would instead fill 100% as a block. */
+	width: max-content;
+	max-width: 100%;
 	margin-block: max(
 		0px,
 		calc(var(--components-rich-text-spacing-snug) - var(--_spacing))
@@ -404,6 +481,7 @@ nldd-rich-text table {
 
 	@container (min-width: 641px) {
 		display: table;
+		width: 100%;
 		overflow-x: unset;
 		scrollbar-width: unset;
 	}