@nldd/design-system 0.8.49 → 0.8.51

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

@@ -0,0 +1,89 @@
+/**
+ * Nederlandse Digitale Dienst Banner Component (Lit + TypeScript)
+ *
+ * An inline notification with a tinted background per variant. Use for
+ * persistent, page-level feedback (e.g. an error summary at the top of
+ * a form). Banner is more visually present than nldd-inline-dialog —
+ * the tinted colour catches the eye. If you need a quieter component,
+ * pick a different one rather than overriding the banner's ARIA.
+ *
+ * Layout: icon left, text + supporting text + optional rich content +
+ * actions in the centre, optional dismiss button right. Buttons wrap
+ * to a second row on narrow viewports via nldd-button-group's flex
+ * wrapping.
+ *
+ * ## ARIA
+ * role and aria-live are set automatically from the variant:
+ * - critical → role="alert" (interrupts screen reader)
+ * - others   → role="status" aria-live="polite"
+ * Not overridable — if you need a less prominent component, use one.
+ *
+ * aria-atomic="true" is also set so that updates to the structured region
+ * (icon + heading + supporting-text + actions) are announced as one unit
+ * rather than as a partial subtree. Trade-off: any programmatic content
+ * mutation re-reads the entire banner. Banners are designed for short,
+ * heading-scale copy — if you slot in a paragraph of rich body text and
+ * then toggle variant or supporting-text at runtime, AT will re-announce
+ * the whole thing. Keep banner content concise, or render long-form
+ * messages in a different surface.
+ *
+ * @element nldd-banner
+ *
+ * @attr {'neutral'|'success'|'warning'|'critical'} variant - Colour and default icon (default: 'neutral')
+ * @attr {string}  icon            - Icon override. Default per variant: neutral → info-circle-filled, success → check-circle-filled, warning → exclamation-triangle-filled, critical → exclamation-circle-filled
+ * @attr {string}  text            - Main text (heading or paragraph, depending on heading-level)
+ * @attr {string}  supporting-text - Supporting text below the heading
+ * @attr {1|2|3|4|5|6} heading-level - Renders text as h1–h6; absent renders a p
+ * @attr {boolean} dismissible     - Show a close button in the top-right; emits `dismiss` when clicked
+ * @attr {object}  translations    - Override translation keys; unset keys fall back to Dutch
+ *
+ * @slot         - Optional rich content between text and actions (e.g. nldd-rich-text)
+ * @slot actions - nldd-button elements, wrapped in a horizontal nldd-button-group
+ *
+ * @fires dismiss - Fired when the dismiss button is clicked. The consumer is responsible for removing/hiding the banner.
+ */
+import { LitElement } from 'lit';
+import type { NLDDBannerTranslations } from './banner.i18n.js';
+import '../../content/icon/icon.js';
+import '../../actions/button-group/button-group.js';
+import '../../actions/icon-button/icon-button.js';
+export type BannerVariant = 'neutral' | 'success' | 'warning' | 'critical';
+export declare class NLDDBanner extends LitElement {
+    static styles: import("lit").CSSResult;
+    variant: BannerVariant;
+    icon: string;
+    text: string;
+    supportingText: string;
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6 | null;
+    dismissible: boolean;
+    /** Override one or more translation keys. Unspecified keys fall back to Dutch. */
+    translations: Partial<NLDDBannerTranslations>;
+    _hasContent: boolean;
+    _hasActions: boolean;
+    /** Stored slot-change listener references so disconnectedCallback can
+     *  remove them. Shadow-DOM slots are GC'd with the host, so leakage is
+     *  cosmetic — but we keep cleanup symmetric with addEventListener. */
+    private _syncContent?;
+    private _syncActions?;
+    constructor();
+    _t(key: keyof NLDDBannerTranslations): string;
+    get _resolvedIcon(): string;
+    updated(changed: Map<string, unknown>): void;
+    private _applyAriaForVariant;
+    /** Re-runs every connectedCallback (i.e. also after a move-and-reinsert),
+     *  unlike firstUpdated which is one-shot. Without this, slotchange after
+     *  a reconnect would never update _hasContent / _hasActions because the
+     *  listeners were torn down in disconnectedCallback and never re-attached. */
+    private _attachSlotListeners;
+    firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    _onDismissClick(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-banner': NLDDBanner;
+    }
+}
+//# sourceMappingURL=banner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/banner/banner.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,4BAA4B,CAAC;AACpC,OAAO,4CAA4C,CAAC;AACpD,OAAO,0CAA0C,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAS3E,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAGtC,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,SAAM;IAGV,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;IAEpB,kFAAkF;IAElF,YAAY,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAM;IAGnD,WAAW,UAAS;IAGpB,WAAW,UAAS;IAEpB;;0EAEsE;IACtE,OAAO,CAAC,YAAY,CAAC,CAAa;IAClC,OAAO,CAAC,YAAY,CAAC,CAAa;;IAe3B,EAAE,CAAC,GAAG,EAAE,MAAM,sBAAsB,GAAG,MAAM;IAIpD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAaQ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,oBAAoB;IAc5B;;;kFAG8E;IAC9E,OAAO,CAAC,oBAAoB;IAmBnB,YAAY,IAAI,IAAI;IAIpB,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAU9B,eAAe,IAAI,IAAI;IAIrB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/dist/components/status-and-feedback/banner/banner.i18n.d.ts

@@ -0,0 +1,5 @@
+export declare const nlddBannerTranslations: {
+    'components.banner.dismiss-action': string;
+};
+export type NLDDBannerTranslations = typeof nlddBannerTranslations;
+//# sourceMappingURL=banner.i18n.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/banner/banner.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB;;CAElC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,OAAO,sBAAsB,CAAC"}

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

@@ -0,0 +1,4 @@
+export const nlddBannerTranslations = {
+    'components.banner.dismiss-action': 'Sluit',
+};
+//# sourceMappingURL=banner.i18n.js.map

package/dist/components/status-and-feedback/banner/banner.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.i18n.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/banner/banner.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACrC,kCAAkC,EAAE,OAAO;CAC3C,CAAC"}

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

@@ -0,0 +1,206 @@
+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;
+};
+/**
+ * Nederlandse Digitale Dienst Banner Component (Lit + TypeScript)
+ *
+ * An inline notification with a tinted background per variant. Use for
+ * persistent, page-level feedback (e.g. an error summary at the top of
+ * a form). Banner is more visually present than nldd-inline-dialog —
+ * the tinted colour catches the eye. If you need a quieter component,
+ * pick a different one rather than overriding the banner's ARIA.
+ *
+ * Layout: icon left, text + supporting text + optional rich content +
+ * actions in the centre, optional dismiss button right. Buttons wrap
+ * to a second row on narrow viewports via nldd-button-group's flex
+ * wrapping.
+ *
+ * ## ARIA
+ * role and aria-live are set automatically from the variant:
+ * - critical → role="alert" (interrupts screen reader)
+ * - others   → role="status" aria-live="polite"
+ * Not overridable — if you need a less prominent component, use one.
+ *
+ * aria-atomic="true" is also set so that updates to the structured region
+ * (icon + heading + supporting-text + actions) are announced as one unit
+ * rather than as a partial subtree. Trade-off: any programmatic content
+ * mutation re-reads the entire banner. Banners are designed for short,
+ * heading-scale copy — if you slot in a paragraph of rich body text and
+ * then toggle variant or supporting-text at runtime, AT will re-announce
+ * the whole thing. Keep banner content concise, or render long-form
+ * messages in a different surface.
+ *
+ * @element nldd-banner
+ *
+ * @attr {'neutral'|'success'|'warning'|'critical'} variant - Colour and default icon (default: 'neutral')
+ * @attr {string}  icon            - Icon override. Default per variant: neutral → info-circle-filled, success → check-circle-filled, warning → exclamation-triangle-filled, critical → exclamation-circle-filled
+ * @attr {string}  text            - Main text (heading or paragraph, depending on heading-level)
+ * @attr {string}  supporting-text - Supporting text below the heading
+ * @attr {1|2|3|4|5|6} heading-level - Renders text as h1–h6; absent renders a p
+ * @attr {boolean} dismissible     - Show a close button in the top-right; emits `dismiss` when clicked
+ * @attr {object}  translations    - Override translation keys; unset keys fall back to Dutch
+ *
+ * @slot         - Optional rich content between text and actions (e.g. nldd-rich-text)
+ * @slot actions - nldd-button elements, wrapped in a horizontal nldd-button-group
+ *
+ * @fires dismiss - Fired when the dismiss button is clicked. The consumer is responsible for removing/hiding the banner.
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { bannerStyles } from './banner.styles.js';
+import { bannerTemplate } from './banner.template.js';
+import { nlddBannerTranslations } from './banner.i18n.js';
+import '../../content/icon/icon.js';
+import '../../actions/button-group/button-group.js';
+import '../../actions/icon-button/icon-button.js';
+const DEFAULT_ICONS = {
+    neutral: 'info-circle-filled',
+    success: 'check-circle-filled',
+    warning: 'exclamation-triangle-filled',
+    critical: 'exclamation-circle-filled',
+};
+let NLDDBanner = class NLDDBanner extends LitElement {
+    constructor() {
+        super();
+        this.variant = 'neutral';
+        this.icon = '';
+        this.text = '';
+        this.supportingText = '';
+        this.headingLevel = null;
+        this.dismissible = false;
+        /** Override one or more translation keys. Unspecified keys fall back to Dutch. */
+        this.translations = {};
+        this._hasContent = false;
+        this._hasActions = 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) lets us cover both HTML-declared
+        // (attribute set before constructor returns) and document.createElement
+        // + setAttribute (attribute set before appendChild) flows. updated()
+        // still keeps the host in sync when variant changes at runtime.
+        const initialVariant = this.getAttribute('variant');
+        this._applyAriaForVariant(initialVariant ?? 'neutral');
+    }
+    _t(key) {
+        return this.translations[key] ?? nlddBannerTranslations[key];
+    }
+    get _resolvedIcon() {
+        return this.icon || DEFAULT_ICONS[this.variant];
+    }
+    /* The host gets role+aria-live based on variant. Critical interrupts
+     * (assertive); other variants are polite announcements. Not exposed
+     * for override — consumers who need quieter semantics should pick a
+     * different component.
+     *
+     * Note on dynamic variant changes: AT engines vary on whether they
+     * re-announce when a live-region's role / aria-live changes after the
+     * element is already in the AT tree. Constructor-time setup covers
+     * the common case (variant fixed at insertion). Toggling variant at
+     * runtime updates the visual treatment immediately but the new
+     * announcement may not fire on every screen reader. */
+    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');
+        }
+        // Banner is a structured region (icon + heading + supporting-text +
+        // actions). Without aria-atomic some screen readers announce only the
+        // changed subtree on updates, producing incomplete announcements.
+        this.setAttribute('aria-atomic', 'true');
+    }
+    /** Re-runs every connectedCallback (i.e. also after a move-and-reinsert),
+     *  unlike firstUpdated which is one-shot. Without this, slotchange after
+     *  a reconnect would never update _hasContent / _hasActions because the
+     *  listeners were torn down in disconnectedCallback and never re-attached. */
+    _attachSlotListeners() {
+        const contentSlot = this.shadowRoot?.querySelector('slot:not([name])');
+        const actionsSlot = this.shadowRoot?.querySelector('slot[name="actions"]');
+        if (!contentSlot && !actionsSlot)
+            return;
+        const hasMeaningfulContent = (slot) => {
+            const nodes = slot?.assignedNodes({ flatten: true }) ?? [];
+            return nodes.some((n) => n.nodeType === Node.ELEMENT_NODE
+                || (n.nodeType === Node.TEXT_NODE && (n.textContent?.trim() ?? '') !== ''));
+        };
+        this._syncContent = () => { this._hasContent = hasMeaningfulContent(contentSlot); };
+        this._syncActions = () => { this._hasActions = hasMeaningfulContent(actionsSlot); };
+        contentSlot?.addEventListener('slotchange', this._syncContent);
+        actionsSlot?.addEventListener('slotchange', this._syncActions);
+        this._syncContent();
+        this._syncActions();
+    }
+    firstUpdated() {
+        this._attachSlotListeners();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Re-attach when reconnecting after a previous disconnect; firstUpdated
+        // doesn't fire again. Guard on shadowRoot existence so we don't run
+        // twice on the very first connect (firstUpdated will handle that one).
+        if (this.shadowRoot && !this._syncContent) {
+            this._attachSlotListeners();
+        }
+    }
+    disconnectedCallback() {
+        const contentSlot = this.shadowRoot?.querySelector('slot:not([name])');
+        const actionsSlot = this.shadowRoot?.querySelector('slot[name="actions"]');
+        if (this._syncContent)
+            contentSlot?.removeEventListener('slotchange', this._syncContent);
+        if (this._syncActions)
+            actionsSlot?.removeEventListener('slotchange', this._syncActions);
+        this._syncContent = undefined;
+        this._syncActions = undefined;
+        super.disconnectedCallback();
+    }
+    _onDismissClick() {
+        this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));
+    }
+    render() {
+        return bannerTemplate(this);
+    }
+};
+NLDDBanner.styles = bannerStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDBanner.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDBanner.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], NLDDBanner.prototype, "text", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], NLDDBanner.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'heading-level' })
+], NLDDBanner.prototype, "headingLevel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDBanner.prototype, "dismissible", void 0);
+__decorate([
+    property({ type: Object })
+], NLDDBanner.prototype, "translations", void 0);
+__decorate([
+    state()
+], NLDDBanner.prototype, "_hasContent", void 0);
+__decorate([
+    state()
+], NLDDBanner.prototype, "_hasActions", void 0);
+NLDDBanner = __decorate([
+    customElement('nldd-banner')
+], NLDDBanner);
+export { NLDDBanner };
+//# sourceMappingURL=banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/banner/banner.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,4BAA4B,CAAC;AACpC,OAAO,4CAA4C,CAAC;AACpD,OAAO,0CAA0C,CAAC;AAIlD,MAAM,aAAa,GAAkC;IACpD,OAAO,EAAE,oBAAoB;IAC7B,OAAO,EAAE,qBAAqB;IAC9B,OAAO,EAAE,6BAA6B;IACtC,QAAQ,EAAE,2BAA2B;CACrC,CAAC;AAGK,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAqCzC;QACC,KAAK,EAAE,CAAC;QAlCT,YAAO,GAAkB,SAAS,CAAC;QAGnC,SAAI,GAAG,EAAE,CAAC;QAGV,SAAI,GAAG,EAAE,CAAC;QAGV,mBAAc,GAAG,EAAE,CAAC;QAGpB,iBAAY,GAAiC,IAAI,CAAC;QAGlD,gBAAW,GAAG,KAAK,CAAC;QAEpB,kFAAkF;QAElF,iBAAY,GAAoC,EAAE,CAAC;QAGnD,gBAAW,GAAG,KAAK,CAAC;QAGpB,gBAAW,GAAG,KAAK,CAAC;QAUnB,wEAAwE;QACxE,uEAAuE;QACvE,oEAAoE;QACpE,iEAAiE;QACjE,wEAAwE;QACxE,qEAAqE;QACrE,gEAAgE;QAChE,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAyB,CAAC;QAC5E,IAAI,CAAC,oBAAoB,CAAC,cAAc,IAAI,SAAS,CAAC,CAAC;IACxD,CAAC;IAEM,EAAE,CAAC,GAAiC;QAC1C,OAAO,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,sBAAsB,CAAC,GAAG,CAAC,CAAC;IAC9D,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACjD,CAAC;IAED;;;;;;;;;;2DAUuD;IAC9C,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,OAAsB;QAClD,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,sEAAsE;QACtE,kEAAkE;QAClE,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED;;;kFAG8E;IACtE,oBAAoB;QAC3B,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAkB,kBAAkB,CAAC,CAAC;QACxF,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAkB,sBAAsB,CAAC,CAAC;QAC5F,IAAI,CAAC,WAAW,IAAI,CAAC,WAAW;YAAE,OAAO;QACzC,MAAM,oBAAoB,GAAG,CAAC,IAAwC,EAAW,EAAE;YAClF,MAAM,KAAK,GAAG,IAAI,EAAE,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;YAC3D,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CACvB,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;mBAC7B,CAAC,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,CAC1E,CAAC;QACH,CAAC,CAAC;QACF,IAAI,CAAC,YAAY,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QACpF,IAAI,CAAC,YAAY,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QACpF,WAAW,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC/D,WAAW,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC/D,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,YAAY,EAAE,CAAC;IACrB,CAAC;IAEQ,YAAY;QACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC7B,CAAC;IAEQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,wEAAwE;QACxE,oEAAoE;QACpE,uEAAuE;QACvE,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YAC3C,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC7B,CAAC;IACF,CAAC;IAEQ,oBAAoB;QAC5B,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAkB,kBAAkB,CAAC,CAAC;QACxF,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAkB,sBAAsB,CAAC,CAAC;QAC5F,IAAI,IAAI,CAAC,YAAY;YAAE,WAAW,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACzF,IAAI,IAAI,CAAC,YAAY;YAAE,WAAW,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACzF,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAC9B,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAC9B,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEM,eAAe;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACnF,CAAC;IAEQ,MAAM;QACd,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;;AA3Ie,iBAAM,GAAG,YAAY,AAAf,CAAgB;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACP;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAChC;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;kDACrC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;gDACpB;AAGlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACvB;AAIpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACwB;AAGnD;IADC,KAAK,EAAE;+CACY;AAGpB;IADC,KAAK,EAAE;+CACY;AA7BR,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA6ItB"}

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

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

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

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

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

@@ -0,0 +1,160 @@
+import { css } from 'lit';
+export const bannerStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_corner-radius: var(--components-banner-corner-radius);
+		--_padding: var(--components-banner-padding);
+		--_background-color: var(--components-banner-neutral-background-color);
+		--_border-color: var(--components-banner-neutral-border-color);
+		--_border-width: var(--primitives-border-width-thin);
+		--_icon-color: var(--components-banner-neutral-icon-color);
+		--_icon-size: var(--primitives-space-28);
+		--_content-color: var(--components-banner-content-color);
+		--_content-secondary-color: var(--components-banner-content-secondary-color);
+		--_text-icon-offset: calc((var(--_icon-size) - var(--primitives-font-size-100) * var(--primitives-line-height-tight)) / 2);
+		--_column-gap: var(--primitives-space-10);
+		--_dismissible-padding-right: var(--primitives-space-44);
+		--_main-gap: var(--primitives-space-8);
+		--_actions-gap: var(--primitives-space-4);
+
+		box-sizing: border-box;
+		display: grid;
+		position: relative;
+		/* Inset box-shadow paints the 1px edge inside the radius without
+		   taking layout space, matching the highlight pattern nldd-box
+		   uses. forced-colors fallback below restores a real border for
+		   Windows High Contrast users (box-shadow is dropped there). */
+		border-radius: var(--_corner-radius);
+		box-shadow: inset 0 0 0 var(--_border-width) var(--_border-color);
+		background-color: var(--_background-color);
+		width: 100%;
+		padding: var(--_padding);
+		grid-template-columns: auto 1fr;
+		gap: var(--_column-gap);
+		color: var(--_content-color);
+	}
+
+	:host([dismissible]) {
+		padding-right: var(--_dismissible-padding-right);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([variant="success"]) {
+		--_background-color: var(--components-banner-success-background-color);
+		--_border-color: var(--components-banner-success-border-color);
+		--_icon-color: var(--components-banner-success-icon-color);
+	}
+
+	:host([variant="warning"]) {
+		--_background-color: var(--components-banner-warning-background-color);
+		--_border-color: var(--components-banner-warning-border-color);
+		--_icon-color: var(--components-banner-warning-icon-color);
+	}
+
+	:host([variant="critical"]) {
+		--_background-color: var(--components-banner-critical-background-color);
+		--_border-color: var(--components-banner-critical-border-color);
+		--_icon-color: var(--components-banner-critical-icon-color);
+	}
+
+
+	/* # Icon */
+
+	.banner__icon-area {
+		display: flex;
+		grid-column: 1;
+		grid-row: 1;
+		align-items: flex-start;
+		justify-content: center;
+		color: var(--_icon-color);
+	}
+
+	.banner__icon {
+		width: var(--_icon-size);
+		height: var(--_icon-size);
+		flex-shrink: 0;
+	}
+
+
+	/* # Main */
+
+	.banner__main {
+		display: flex;
+		grid-column: 2;
+		grid-row: 1;
+		min-width: 0;
+		flex-direction: column;
+		gap: var(--_main-gap);
+	}
+
+	.banner__heading {
+		display: flex;
+		padding-top: var(--_text-icon-offset);
+		flex-direction: column;
+	}
+
+	.banner__heading:has(.banner__supporting-text) {
+		padding-top: calc(var(--_text-icon-offset) - var(--primitives-space-2));
+	}
+
+	.banner__text {
+		margin: 0;
+		font: var(--primitives-font-body-md-bold-tight);
+		text-wrap: pretty;
+	}
+
+	.banner__supporting-text {
+		margin: 0;
+		color: var(--_content-secondary-color);
+		font: var(--primitives-font-body-md-regular-tight);
+		text-wrap: pretty;
+	}
+
+	.banner__content {
+		display: contents;
+	}
+
+	.banner__content[hidden] {
+		display: none;
+	}
+
+	.banner__actions {
+		display: flex;
+		margin-top: var(--_actions-gap);
+	}
+
+	.banner__actions[hidden] {
+		display: none;
+	}
+
+
+	/* # Dismiss */
+
+	.banner__dismiss-button {
+		display: flex;
+		position: absolute;
+		top: 0;
+		right: 0;
+	}
+
+
+	/* # Accessibility
+	   forced-colors / Windows High Contrast strips box-shadow, so the inset
+	   edge would disappear and the banner would lose its semantic frame
+	   against the system background. Restore it with a real border in that
+	   mode. CanvasText is the system foreground color so the border always
+	   meets contrast. */
+
+	@media (forced-colors: active) {
+		:host {
+			border: var(--_border-width) solid CanvasText;
+		}
+	}
+`;
+//# sourceMappingURL=banner.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/banner/banner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6J9B,CAAC"}

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

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

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

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

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

@@ -0,0 +1,51 @@
+import { html, nothing } from 'lit';
+export function bannerTemplate(component) {
+    const heading = (text) => {
+        switch (component.headingLevel) {
+            case 1: return html `<h1 class="banner__text">${text}</h1>`;
+            case 2: return html `<h2 class="banner__text">${text}</h2>`;
+            case 3: return html `<h3 class="banner__text">${text}</h3>`;
+            case 4: return html `<h4 class="banner__text">${text}</h4>`;
+            case 5: return html `<h5 class="banner__text">${text}</h5>`;
+            case 6: return html `<h6 class="banner__text">${text}</h6>`;
+            default: return html `<p class="banner__text">${text}</p>`;
+        }
+    };
+    return html `
+		<div class="banner__icon-area" aria-hidden="true">
+			<nldd-icon class="banner__icon"
+				name=${component._resolvedIcon}
+			></nldd-icon>
+		</div>
+		<div class="banner__main">
+			${component.text || component.supportingText ? html `
+				<div class="banner__heading">
+					${component.text ? heading(component.text) : nothing}
+					${component.supportingText ? html `
+						<p class="banner__supporting-text">${component.supportingText}</p>
+					` : nothing}
+				</div>
+			` : nothing}
+			<div class="banner__content" ?hidden=${!component._hasContent}>
+				<slot></slot>
+			</div>
+			<div class="banner__actions" ?hidden=${!component._hasActions}>
+				<nldd-button-group orientation="horizontal">
+					<slot name="actions"></slot>
+				</nldd-button-group>
+			</div>
+		</div>
+		${component.dismissible ? html `
+			<div class="banner__dismiss-button">
+				<nldd-icon-button
+					icon="dismiss-small"
+					variant="neutral-transparent"
+					size="md"
+					accessible-label=${component._t('components.banner.dismiss-action')}
+					@click=${component._onDismissClick}
+				></nldd-icon-button>
+			</div>
+		` : nothing}
+	`;
+}
+//# sourceMappingURL=banner.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/banner/banner.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,cAAc,CAAC,SAAqB;IACnD,MAAM,OAAO,GAAG,CAAC,IAAY,EAAE,EAAE;QAChC,QAAQ,SAAS,CAAC,YAAY,EAAE,CAAC;YAChC,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,CAAA,4BAA4B,IAAI,OAAO,CAAC;YAC3D,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,CAAA,4BAA4B,IAAI,OAAO,CAAC;YAC3D,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,CAAA,4BAA4B,IAAI,OAAO,CAAC;YAC3D,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,CAAA,4BAA4B,IAAI,OAAO,CAAC;YAC3D,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,CAAA,4BAA4B,IAAI,OAAO,CAAC;YAC3D,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,CAAA,4BAA4B,IAAI,OAAO,CAAC;YAC3D,OAAO,CAAC,CAAC,OAAO,IAAI,CAAA,2BAA2B,IAAI,MAAM,CAAC;QAC3D,CAAC;IACF,CAAC,CAAC;IACF,OAAO,IAAI,CAAA;;;WAGD,SAAS,CAAC,aAAa;;;;KAI7B,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;;OAE/C,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO;OAClD,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;2CACK,SAAS,CAAC,cAAc;MAC7D,CAAC,CAAC,CAAC,OAAO;;IAEZ,CAAC,CAAC,CAAC,OAAO;0CAC4B,CAAC,SAAS,CAAC,WAAW;;;0CAGtB,CAAC,SAAS,CAAC,WAAW;;;;;;IAM5D,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;wBAMR,SAAS,CAAC,EAAE,CAAC,kCAAkC,CAAC;cAC1D,SAAS,CAAC,eAAe;;;GAGpC,CAAC,CAAC,CAAC,OAAO;EACX,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,77 @@
+/**
+ * Nederlandse Digitale Dienst Progress Component (Lit + TypeScript)
+ *
+ * Layout placeholder that fills its parent and centres an indeterminate
+ * progress indicator. Holds the indicator back for 1000ms so brief loading
+ * states don't flash a spinner; once the delay passes the indicator fades in.
+ *
+ * Default is an indeterminate `<nldd-progress-circle>` with the translated
+ * "Laden" label. Drop anything in the slot (a progress-bar, a customised
+ * progress-circle, etc.) to override.
+ *
+ * Reconnect behaviour: every `connectedCallback` resets the timer and hides
+ * the indicator again. If a consumer toggles the element via a conditional
+ * render (remove + re-insert) the spinner will disappear and re-fade after
+ * another 1000ms. Keep the element mounted and toggle visibility / `hidden`
+ * instead if you want the timer to run only once.
+ *
+ * Accessibility: the host element carries `aria-busy="true"` for as long as
+ * it is connected and not marked `complete`, including the silent 1000 ms
+ * pre-spinner window. AT users landing on the region during that window are
+ * told loading is in progress, even before the visual spinner appears.
+ *
+ * Two patterns to signal "done":
+ *   1. (Preferred.) Unmount `<nldd-progress>` entirely. aria-busy goes away
+ *      with the element, and the indicator's `progressbar` role disappears
+ *      from the AT tree.
+ *   2. Set the boolean `complete` attribute. aria-busy is cleared and the
+ *      indicator is hidden, but the element stays in the DOM. Use this when
+ *      you want a CSS transition out, or when the wrapper sits in a layout
+ *      slot that would collapse if unmounted.
+ *
+ * @element nldd-progress
+ *
+ * @attr {string} text - Label under the default indicator. Falls back to the
+ *   translated "Laden" string when unset. Ignored when the slot is filled.
+ * @attr {boolean} no-label - Suppress the label under the default indicator
+ *   entirely. Use when the surrounding UI already conveys "loading" and an
+ *   extra "Laden" caption would be redundant noise.
+ * @attr {boolean} complete - Mark the loader as finished while keeping the
+ *   element mounted; clears aria-busy and hides the indicator.
+ * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
+ *
+ * @slot - Optional custom indicator; overrides the default progress-circle.
+ *   The host carries `aria-busy="true"` for AT users, but the default ARIA
+ *   semantics on the visible indicator (role="progressbar", aria-valuetext)
+ *   come from the built-in `<nldd-progress-circle>`. Consumers replacing the
+ *   slot are responsible for supplying their own progressbar role / label
+ *   on the custom indicator.
+ */
+import { LitElement } from 'lit';
+import type { NLDDProgressTranslations } from './progress.i18n.js';
+import '../progress-circle/progress-circle.js';
+export declare class NLDDProgress extends LitElement {
+    static styles: import("lit").CSSResult;
+    text: string;
+    /** Suppress the indicator's label entirely. The component still
+     *  renders the spinner and announces aria-busy; only the visible
+     *  "Laden" caption is hidden. Replaces the old text=" " sentinel. */
+    noLabel: boolean;
+    /** Mark the loader as finished while keeping the element mounted.
+     *  Clears aria-busy and hides the indicator. Default false. */
+    complete: boolean;
+    translations: Partial<NLDDProgressTranslations>;
+    _visible: boolean;
+    private _delayTimeout?;
+    _t(key: keyof NLDDProgressTranslations): string;
+    connectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1> | typeof import("lit-html").nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-progress': NLDDProgress;
+    }
+}
+//# sourceMappingURL=progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress/progress.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,uCAAuC,CAAC;AAM/C,qBACa,YAAa,SAAQ,UAAU;IAC3C,OAAgB,MAAM,0BAAkB;IAGxC,IAAI,SAAM;IAEV;;yEAEqE;IAErE,OAAO,UAAS;IAEhB;mEAC+D;IAE/D,QAAQ,UAAS;IAGjB,YAAY,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAM;IAGrD,QAAQ,UAAS;IAEjB,OAAO,CAAC,aAAa,CAAC,CAAgC;IAE/C,EAAE,CAAC,GAAG,EAAE,MAAM,wBAAwB,GAAG,MAAM;IAI7C,iBAAiB,IAAI,IAAI;IAczB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAU/C,oBAAoB,IAAI,IAAI;IAQ5B,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}

package/dist/components/status-and-feedback/progress/progress.i18n.d.ts

@@ -0,0 +1,5 @@
+export declare const nlddProgressTranslations: {
+    'components.progress.loading-text': string;
+};
+export type NLDDProgressTranslations = typeof nlddProgressTranslations;
+//# sourceMappingURL=progress.i18n.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress/progress.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB;;CAEpC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,OAAO,wBAAwB,CAAC"}