@nldd/design-system 0.8.37

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

@@ -0,0 +1,134 @@
+import { css } from 'lit';
+export const badgeStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_background-color: var(--components-badge-critical-background-color);
+		--_content-color: var(--components-badge-critical-content-color);
+		--_height: var(--primitives-space-20);
+		--_inline-padding: var(--primitives-space-6);
+		--_gap: var(--primitives-space-3);
+		--_font: var(--primitives-font-body-xs-bold-flat);
+		--_icon-size: var(--primitives-space-14);
+		--_icon-offset-correction: var(--primitives-space-1);
+		--_dot-size: var(--primitives-space-10);
+		display: inline-flex;
+		vertical-align: middle;
+	}
+
+	:host([size="sm"]) {
+		--_height: var(--primitives-space-16);
+		--_inline-padding: var(--primitives-space-4);
+		--_gap: var(--primitives-space-2);
+		--_font: var(--primitives-font-body-xxs-bold-flat);
+		--_icon-size: var(--primitives-space-12);
+		--_dot-size: var(--primitives-space-6);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* ## Variants */
+
+	:host([variant="critical"]),
+	:host(:not([variant])) {
+		--_background-color: var(--components-badge-critical-background-color);
+		--_content-color: var(--components-badge-critical-content-color);
+	}
+
+	:host([variant="accent"]) {
+		--_background-color: var(--components-badge-accent-background-color);
+		--_content-color: var(--components-badge-accent-content-color);
+	}
+
+	:host([variant="neutral"]) {
+		--_background-color: var(--components-badge-neutral-background-color);
+		--_content-color: var(--components-badge-neutral-content-color);
+	}
+
+	:host([variant="warning"]) {
+		--_background-color: var(--components-badge-warning-background-color);
+		--_content-color: var(--components-badge-warning-content-color);
+	}
+
+	:host([variant="success"]) {
+		--_background-color: var(--components-badge-success-background-color);
+		--_content-color: var(--components-badge-success-content-color);
+	}
+
+
+	/* # Block */
+
+	.badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		min-width: var(--_height);
+		height: var(--_height);
+		padding: 0 var(--_inline-padding);
+		gap: var(--_gap);
+		background-color: var(--_background-color);
+		color: var(--_content-color);
+		border-radius: var(--components-badge-corner-radius);
+		white-space: nowrap;
+		font: var(--_font);
+	}
+
+	.badge--dot {
+		min-width: var(--_dot-size);
+		width: var(--_dot-size);
+		height: var(--_dot-size);
+		padding: 0;
+	}
+
+	.badge--icon-only {
+		min-width: var(--_height);
+		width: var(--_height);
+		padding: 0;
+	}
+
+
+	/* # Icon */
+
+	.badge__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: var(--_icon-size);
+		height: var(--_icon-size);
+	}
+
+	.badge__icon:has(+ .badge__text) {
+		margin-left: calc((var(--_height) - var(--_icon-size)) / 2 - var(--_inline-padding) + var(--_icon-offset-correction));
+	}
+
+	.badge__icon nldd-icon {
+		width: 100%;
+		height: 100%;
+	}
+
+
+	/* # Text */
+
+	.badge__text {
+		display: inline-block;
+	}
+
+
+	/* # Toegankelijkheid */
+
+	@media (forced-colors: active) {
+		.badge {
+			border: 1px solid CanvasText;
+			background-color: Canvas;
+			color: CanvasText;
+		}
+	}
+`;
+//# sourceMappingURL=badge.styles.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,wBAAgB,QAAQ,CAAC,SAAS,EAAE,SAAS,wCAoB5C"}

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

@@ -0,0 +1,24 @@
+import { html, nothing } from 'lit';
+export function template(component) {
+    const modifiers = [];
+    if (component._isDot)
+        modifiers.push('badge--dot');
+    if (component._isIconOnly)
+        modifiers.push('badge--icon-only');
+    const classes = ['badge', ...modifiers].join(' ');
+    const needsAriaImg = component._isDot || component._isIconOnly;
+    return html `
+		<span class=${classes}
+			role=${needsAriaImg ? 'img' : nothing}
+			aria-label=${needsAriaImg ? component._ariaLabel : nothing}
+		>
+			${component.icon ? html `
+				<span class="badge__icon">
+					<nldd-icon name=${component.icon}></nldd-icon>
+				</span>
+			` : ''}
+			${component._hasText ? html `<span class="badge__text">${component._displayValue}</span>` : ''}
+		</span>
+	`;
+}
+//# sourceMappingURL=badge.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,QAAQ,CAAC,SAAoB;IAC5C,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,IAAI,SAAS,CAAC,MAAM;QAAE,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACnD,IAAI,SAAS,CAAC,WAAW;QAAE,SAAS,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,IAAI,SAAS,CAAC,WAAW,CAAC;IAE/D,OAAO,IAAI,CAAA;gBACI,OAAO;UACb,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;gBACxB,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;;KAExD,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;uBAEH,SAAS,CAAC,IAAI;;IAEjC,CAAC,CAAC,CAAC,EAAE;KACJ,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,6BAA6B,SAAS,CAAC,aAAa,SAAS,CAAC,CAAC,CAAC,EAAE;;EAE9F,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,40 @@
+/**
+ * Nederlandse Digitale Dienst Dialog Component (Lit + TypeScript)
+ *
+ * An inline status component for empty state, confirmations and feedback.
+ * Fills the container and has no minimum width.
+ *
+ * @element nldd-inline-dialog
+ *
+ * @attr {'alert'} variant       - Semantic variant; 'alert' forces icon="alert" and colors the icon
+ * @attr {string}  icon          - Name of the nldd-icon icon above the text; absent when not set. Ignored when variant is set.
+ * @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
+ *
+ * @slot         - Optional custom content between text and actions
+ * @slot actions - nldd-button elements, wrapped in nldd-button-group (max 3)
+ */
+import { LitElement } from 'lit';
+import '../../content/icon/icon.js';
+import '../../actions/button-group/button-group.js';
+export type InlineDialogVariant = 'alert';
+export declare class NLDDInlineDialog extends LitElement {
+    static styles: import("lit").CSSResult;
+    variant: InlineDialogVariant | '';
+    icon: string;
+    text: string;
+    supportingText: string;
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6 | null;
+    _hasContent: boolean;
+    _hasActions: boolean;
+    get _resolvedIconName(): string;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-inline-dialog': NLDDInlineDialog;
+    }
+}
+//# sourceMappingURL=inline-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inline-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4CAA4C,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC;AAE1C,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAsB;IAG5C,OAAO,EAAE,mBAAmB,GAAG,EAAE,CAAM;IAGvC,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;IAGpB,WAAW,UAAS;IAEpB,IAAI,iBAAiB,IAAI,MAAM,CAI9B;IAEQ,YAAY;IAsBZ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}

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

@@ -0,0 +1,97 @@
+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 Dialog Component (Lit + TypeScript)
+ *
+ * An inline status component for empty state, confirmations and feedback.
+ * Fills the container and has no minimum width.
+ *
+ * @element nldd-inline-dialog
+ *
+ * @attr {'alert'} variant       - Semantic variant; 'alert' forces icon="alert" and colors the icon
+ * @attr {string}  icon          - Name of the nldd-icon icon above the text; absent when not set. Ignored when variant is set.
+ * @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
+ *
+ * @slot         - Optional custom content between text and actions
+ * @slot actions - nldd-button elements, wrapped in nldd-button-group (max 3)
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { inlineDialogStyles } from './inline-dialog.styles.js';
+import { inlineDialogTemplate } from './inline-dialog.template.js';
+import '../../content/icon/icon.js';
+import '../../actions/button-group/button-group.js';
+let NLDDInlineDialog = class NLDDInlineDialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = '';
+        this.icon = '';
+        this.text = '';
+        this.supportingText = '';
+        this.headingLevel = null;
+        this._hasContent = false;
+        this._hasActions = false;
+    }
+    get _resolvedIconName() {
+        if (this.variant === 'alert')
+            return 'alert';
+        if (this.icon)
+            return this.icon;
+        return '';
+    }
+    firstUpdated() {
+        const contentSlot = this.shadowRoot?.querySelector('slot:not([name])');
+        const actionsSlot = this.shadowRoot?.querySelector('slot[name="actions"]');
+        // Check assignedNodes (not assignedElements) so that plain text content
+        // — e.g. `<nldd-inline-dialog>Some note</nldd-inline-dialog>` — is also
+        // detected. Whitespace-only text nodes (formatting indentation) are
+        // filtered out.
+        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() ?? '') !== ''));
+        };
+        const syncContent = () => { this._hasContent = hasMeaningfulContent(contentSlot); };
+        const syncActions = () => { this._hasActions = hasMeaningfulContent(actionsSlot); };
+        contentSlot?.addEventListener('slotchange', syncContent);
+        actionsSlot?.addEventListener('slotchange', syncActions);
+        syncContent();
+        syncActions();
+    }
+    render() {
+        return inlineDialogTemplate(this);
+    }
+};
+NLDDInlineDialog.styles = inlineDialogStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDInlineDialog.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDInlineDialog.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDInlineDialog.prototype, "text", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'supporting-text' })
+], NLDDInlineDialog.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'heading-level' })
+], NLDDInlineDialog.prototype, "headingLevel", void 0);
+__decorate([
+    state()
+], NLDDInlineDialog.prototype, "_hasContent", void 0);
+__decorate([
+    state()
+], NLDDInlineDialog.prototype, "_hasActions", void 0);
+NLDDInlineDialog = __decorate([
+    customElement('nldd-inline-dialog')
+], NLDDInlineDialog);
+export { NLDDInlineDialog };
+//# sourceMappingURL=inline-dialog.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,95 @@
+import { css } from 'lit';
+export const inlineDialogStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: flex;
+		justify-content: center;
+
+		--_icon-color: var(--semantics-content-color);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([variant='alert']) {
+		--_icon-color: var(--primitives-color-warning-350);
+	}
+
+
+	/* # Body */
+
+	.inline-dialog__body {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		flex-grow: 1;
+		box-sizing: border-box;
+		max-width: var(--primitives-area-480);
+	}
+
+
+	/* # Icon */
+
+	.inline-dialog__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--primitives-space-48);
+		height: var(--primitives-space-48);
+		color: var(--_icon-color);
+		flex-shrink: 0;
+	}
+
+
+	/* # Text */
+
+	.inline-dialog__text {
+		margin: 0;
+		font: var(--primitives-font-body-md-bold-tight);
+		color: var(--semantics-content-color);
+		text-align: center;
+	}
+
+	.inline-dialog__text:focus-visible {
+		box-shadow: none;
+		outline: none;
+	}
+
+
+	/* # Supporting text */
+
+	.inline-dialog__supporting-text {
+		margin: 0;
+		font: var(--primitives-font-body-sm-regular-tight);
+		color: var(--semantics-content-color);
+		text-align: center;
+	}
+
+
+	/* # Content */
+
+	.inline-dialog__content {
+		width: 100%;
+	}
+
+	.inline-dialog__content[hidden] {
+		display: none;
+	}
+
+
+	/* # Actions */
+
+	.inline-dialog__actions {
+		width: 100%;
+		padding-top: var(--primitives-space-16);
+	}
+
+	.inline-dialog__actions[hidden] {
+		display: none;
+	}
+`;
+//# sourceMappingURL=inline-dialog.styles.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"inline-dialog.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,gBAAgB,wCA8B/D"}

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

@@ -0,0 +1,33 @@
+import { html, nothing } from 'lit';
+export function inlineDialogTemplate(component) {
+    return html `
+		<div class="inline-dialog__body">
+			${component._resolvedIconName ? html `
+				<div class="inline-dialog__icon">
+					<nldd-icon name=${component._resolvedIconName}></nldd-icon>
+				</div>
+			` : nothing}
+			${component.text ? html `
+				${component.headingLevel === 1 ? html `<h1 class="inline-dialog__text">${component.text}</h1>`
+        : component.headingLevel === 2 ? html `<h2 class="inline-dialog__text">${component.text}</h2>`
+            : component.headingLevel === 3 ? html `<h3 class="inline-dialog__text">${component.text}</h3>`
+                : component.headingLevel === 4 ? html `<h4 class="inline-dialog__text">${component.text}</h4>`
+                    : component.headingLevel === 5 ? html `<h5 class="inline-dialog__text">${component.text}</h5>`
+                        : component.headingLevel === 6 ? html `<h6 class="inline-dialog__text">${component.text}</h6>`
+                            : html `<p class="inline-dialog__text">${component.text}</p>`}
+			` : nothing}
+			${component.supportingText ? html `
+				<p class="inline-dialog__supporting-text">${component.supportingText}</p>
+			` : nothing}
+			<div class="inline-dialog__content" ?hidden=${!component._hasContent}>
+				<slot></slot>
+			</div>
+			<div class="inline-dialog__actions" ?hidden=${!component._hasActions}>
+				<nldd-button-group orientation="vertical">
+					<slot name="actions"></slot>
+				</nldd-button-group>
+			</div>
+		</div>
+	`;
+}
+//# sourceMappingURL=inline-dialog.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inline-dialog.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,oBAAoB,CAAC,SAA2B;IAC/D,OAAO,IAAI,CAAA;;KAEP,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAA;;uBAEhB,SAAS,CAAC,iBAAiB;;IAE9C,CAAC,CAAC,CAAC,OAAO;KACT,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;MACpB,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;QAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;YAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;gBAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;oBAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;wBAC7F,CAAC,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,SAAS,CAAC,IAAI,OAAO;4BAC7F,CAAC,CAAC,IAAI,CAAA,kCAAkC,SAAS,CAAC,IAAI,MAAM;IAC5D,CAAC,CAAC,CAAC,OAAO;KACT,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;gDACY,SAAS,CAAC,cAAc;IACpE,CAAC,CAAC,CAAC,OAAO;iDACmC,CAAC,SAAS,CAAC,WAAW;;;iDAGtB,CAAC,SAAS,CAAC,WAAW;;;;;;EAMrE,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,49 @@
+/**
+ * Nederlandse Digitale Dienst Modal Dialog Component (Lit + TypeScript)
+ *
+ * A modal window with overlay backdrop, based on the native <dialog> element.
+ * Internally renders an <nldd-inline-dialog> for the visual structure.
+ *
+ * @element nldd-modal-dialog
+ *
+ * @attr {'alert'} variant          - Forwarded to nldd-inline-dialog; 'alert' forces icon and color
+ * @attr {string}  icon             - Forwarded to nldd-inline-dialog; absent when not set
+ * @attr {string}  text             - Forwarded to nldd-inline-dialog; main text
+ * @attr {string}  supporting-text  - Forwarded to nldd-inline-dialog; supporting text
+ * @attr {string}  accessible-label - Accessible name for the dialog (aria-label); falls back to text
+ *
+ * @slot         - Optional custom content, forwarded to nldd-inline-dialog
+ * @slot actions - nldd-button elements, forwarded to nldd-inline-dialog
+ *
+ * @fires open  - When the dialog is opened
+ * @fires close - When the dialog is fully closed
+ *
+ * @method show() - Opens the modal dialog
+ * @method hide() - Closes the modal dialog with a closing animation
+ */
+import { LitElement } from 'lit';
+import type { InlineDialogVariant } from '../inline-dialog/inline-dialog.js';
+import '../inline-dialog/inline-dialog.js';
+export declare class NLDDModalDialog extends LitElement {
+    static styles: import("lit").CSSResult;
+    variant: InlineDialogVariant | '';
+    icon: string;
+    text: string;
+    supportingText: string;
+    /** Accessible name for the dialog — forwarded as aria-label. Falls back to text. */
+    accessibleLabel: string;
+    private _closing;
+    private get _dialog();
+    show(): void;
+    private _manageFocus;
+    hide(): void;
+    _handleBackdropClick(e: MouseEvent): void;
+    _handleCancel(e: Event): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-modal-dialog': NLDDModalDialog;
+    }
+}
+//# sourceMappingURL=modal-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,mCAAmC,CAAC;AAE3C,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,OAAO,EAAE,mBAAmB,GAAG,EAAE,CAAM;IAGvC,IAAI,SAAM;IAGV,IAAI,SAAM;IAGV,cAAc,SAAM;IAEpB,oFAAoF;IAEpF,eAAe,SAAM;IAErB,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,KAAK,OAAO,GAElB;IAED,IAAI,IAAI,IAAI;IAQZ,OAAO,CAAC,YAAY;IAWpB,IAAI,IAAI,IAAI;IAuBZ,oBAAoB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAIzC,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAKpB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

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

@@ -0,0 +1,122 @@
+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 Modal Dialog Component (Lit + TypeScript)
+ *
+ * A modal window with overlay backdrop, based on the native <dialog> element.
+ * Internally renders an <nldd-inline-dialog> for the visual structure.
+ *
+ * @element nldd-modal-dialog
+ *
+ * @attr {'alert'} variant          - Forwarded to nldd-inline-dialog; 'alert' forces icon and color
+ * @attr {string}  icon             - Forwarded to nldd-inline-dialog; absent when not set
+ * @attr {string}  text             - Forwarded to nldd-inline-dialog; main text
+ * @attr {string}  supporting-text  - Forwarded to nldd-inline-dialog; supporting text
+ * @attr {string}  accessible-label - Accessible name for the dialog (aria-label); falls back to text
+ *
+ * @slot         - Optional custom content, forwarded to nldd-inline-dialog
+ * @slot actions - nldd-button elements, forwarded to nldd-inline-dialog
+ *
+ * @fires open  - When the dialog is opened
+ * @fires close - When the dialog is fully closed
+ *
+ * @method show() - Opens the modal dialog
+ * @method hide() - Closes the modal dialog with a closing animation
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { modalDialogStyles } from './modal-dialog.styles.js';
+import { modalDialogTemplate } from './modal-dialog.template.js';
+import { isPointerMode } from '../../../utilities/input-modality.js';
+import '../inline-dialog/inline-dialog.js';
+let NLDDModalDialog = class NLDDModalDialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = '';
+        this.icon = '';
+        this.text = '';
+        this.supportingText = '';
+        /** Accessible name for the dialog — forwarded as aria-label. Falls back to text. */
+        this.accessibleLabel = '';
+        this._closing = false;
+    }
+    get _dialog() {
+        return this.shadowRoot?.querySelector('dialog') ?? null;
+    }
+    show() {
+        const dialog = this._dialog;
+        if (!dialog || dialog.open)
+            return;
+        dialog.showModal();
+        this._manageFocus();
+        this.dispatchEvent(new CustomEvent('open', { bubbles: true, composed: true }));
+    }
+    _manageFocus() {
+        // 1. autofocus element present — let the browser handle it natively
+        if (this.querySelector('[autofocus]'))
+            return;
+        // 2. Focus the dialog — show focus ring only when opened via keyboard
+        const dialog = this._dialog;
+        if (!dialog)
+            return;
+        dialog.classList.toggle('is-pointer-focus', isPointerMode());
+        dialog.focus();
+    }
+    hide() {
+        const dialog = this._dialog;
+        if (!dialog || !dialog.open || this._closing)
+            return;
+        this._closing = true;
+        dialog.classList.add('is-closing');
+        dialog.addEventListener('animationend', () => {
+            dialog.classList.remove('is-closing');
+            this._closing = false;
+            dialog.close();
+            this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+        }, { once: true });
+        requestAnimationFrame(() => {
+            if (this._closing && getComputedStyle(dialog).animationName === 'none') {
+                dialog.classList.remove('is-closing');
+                this._closing = false;
+                dialog.close();
+                this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+            }
+        });
+    }
+    _handleBackdropClick(e) {
+        if (e.target === this._dialog)
+            this.hide();
+    }
+    _handleCancel(e) {
+        e.preventDefault();
+        this.hide();
+    }
+    render() {
+        return modalDialogTemplate(this);
+    }
+};
+NLDDModalDialog.styles = modalDialogStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDModalDialog.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDModalDialog.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDModalDialog.prototype, "text", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'supporting-text' })
+], NLDDModalDialog.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDModalDialog.prototype, "accessibleLabel", void 0);
+NLDDModalDialog = __decorate([
+    customElement('nldd-modal-dialog')
+], NLDDModalDialog);
+export { NLDDModalDialog };
+//# sourceMappingURL=modal-dialog.js.map

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

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