@nldd/design-system 0.8.37

package/dist/components/navigation/top-title-bar/top-title-bar.styles.js

@@ -0,0 +1,159 @@
+import { css } from 'lit';
+export const topTitleBarStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: block;
+		width: 100%;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.top-title-bar {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		width: 100%;
+		box-sizing: border-box;
+		padding-inline: var(--primitives-space-6);
+	}
+
+
+	/* # Start */
+
+	.top-title-bar__start {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
+		min-width: 0;
+	}
+
+
+	/* # End */
+
+	.top-title-bar__end {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		flex-grow: 0;
+		flex-shrink: 0;
+		margin-top: var(--primitives-space-6);
+	}
+
+	.top-title-bar__end[hidden] {
+		display: none;
+	}
+
+
+	/* # Back button — text variant (default state) */
+
+	.top-title-bar__back-button {
+		display: var(--context-back-button-display, flex);
+		flex-direction: row;
+		align-items: center;
+		margin-top: var(--primitives-space-6);
+	}
+
+	.top-title-bar__text-back-button {
+		display: flex;
+	}
+
+	:host(.is-compact) .top-title-bar__text-back-button {
+		display: none;
+	}
+
+
+	/* # Back button — icon variant (compact state) */
+
+	.top-title-bar__icon-back-button {
+		display: none;
+	}
+
+	:host(.is-compact) .top-title-bar__icon-back-button {
+		display: flex;
+	}
+
+
+	/* # Divider */
+
+	.top-title-bar__divider {
+		display: none;
+		width: var(--semantics-dividers-thickness);
+		height: var(--primitives-space-24);
+		background-color: var(--components-top-title-bar-divider-color);
+		flex-shrink: 0;
+	}
+
+	:host(.is-compact) .top-title-bar__divider {
+		display: block;
+	}
+
+
+	/* # Title group */
+
+	.top-title-bar__title-group {
+		display: none;
+		flex-direction: column;
+		justify-content: center;
+		flex-grow: 1;
+		flex-shrink: 1;
+		min-width: 0;
+		min-height: var(--semantics-controls-md-min-size);
+		margin-top: var(--primitives-space-6);
+		padding-inline: var(--primitives-space-10);
+		overflow: hidden;
+	}
+
+	:host(.is-compact) .top-title-bar__title-group {
+		display: flex;
+	}
+
+	.top-title-bar__title {
+		margin: 0;
+		font: var(--primitives-font-body-lg-bold-flat);
+		color: var(--semantics-content-color);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.top-title-bar__title:has(+ .top-title-bar__subtitle) {
+		font: var(--primitives-font-body-md-bold-flat);
+	}
+
+	.top-title-bar__subtitle {
+		margin: 0;
+		font: var(--primitives-font-body-xxs-regular-flat);
+		color: var(--semantics-content-secondary-color);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+
+	/* # Dismiss button */
+
+	.top-title-bar__dismiss-button {
+		display: var(--context-dismiss-button-display, block);
+	}
+
+
+	/* # Accessibility: High Contrast Mode */
+
+	@media (forced-colors: active) {
+		.top-title-bar__title {
+			color: CanvasText;
+		}
+	}
+`;
+//# sourceMappingURL=top-title-bar.styles.js.map

package/dist/components/navigation/top-title-bar/top-title-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-title-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4JnC,CAAC"}

package/dist/components/navigation/top-title-bar/top-title-bar.template.d.ts

@@ -0,0 +1,5 @@
+import type { NLDDTopTitleBar } from './top-title-bar.js';
+import '../../actions/button/button.js';
+import '../../actions/icon-button/icon-button.js';
+export declare function topTitleBarTemplate(component: NLDDTopTitleBar): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=top-title-bar.template.d.ts.map

package/dist/components/navigation/top-title-bar/top-title-bar.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-title-bar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,gCAAgC,CAAC;AACxC,OAAO,0CAA0C,CAAC;AAElD,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,wCAmD7D"}

package/dist/components/navigation/top-title-bar/top-title-bar.template.js

@@ -0,0 +1,55 @@
+import { html, nothing } from 'lit';
+import '../../actions/button/button.js';
+import '../../actions/icon-button/icon-button.js';
+export function topTitleBarTemplate(component) {
+    const showBack = !!component.backText;
+    return html `
+		<div class="top-title-bar">
+			<div class="top-title-bar__start">
+				${showBack ? html `
+					<div class="top-title-bar__back-button">
+						<div class="top-title-bar__text-back-button">
+							<nldd-button
+								variant="accent-transparent"
+								start-icon="chevron-left"
+								text=${component.backText}
+								href=${component.backHref || nothing}
+								@click=${component._handleBack}
+							></nldd-button>
+						</div>
+						<div class="top-title-bar__icon-back-button">
+							<nldd-icon-button
+								variant="accent-transparent"
+								icon="chevron-left"
+								text=${component.backText}
+								accessible-label=${component.backText || nothing}
+								href=${component.backHref || nothing}
+								@click=${component._handleBack}
+							></nldd-icon-button>
+						</div>
+						<div class="top-title-bar__divider"></div>
+					</div>
+				` : nothing}
+				<div class="top-title-bar__title-group">
+					<h1 class="top-title-bar__title">${component.text}</h1>
+					${component.supportingText ? html `
+						<p class="top-title-bar__subtitle">${component.supportingText}</p>
+					` : nothing}
+				</div>
+			</div>
+			<div class="top-title-bar__end" ?hidden=${!component.dismissText && !component._hasToolbarItems}>
+				<slot name="toolbar" @slotchange=${component._onToolbarSlotChange}></slot>
+				${component.dismissText ? html `
+					<div class="top-title-bar__dismiss-button">
+						<nldd-button
+							variant="accent-transparent"
+							text=${component.dismissText}
+							@click=${component._handleDismiss}
+						></nldd-button>
+					</div>
+				` : nothing}
+			</div>
+		</div>
+	`;
+}
+//# sourceMappingURL=top-title-bar.template.js.map

package/dist/components/navigation/top-title-bar/top-title-bar.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-title-bar.template.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,0CAA0C,CAAC;AAElD,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,MAAM,QAAQ,GAAG,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC;IAEtC,OAAO,IAAI,CAAA;;;MAGN,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;eAMN,SAAS,CAAC,QAAQ;eAClB,SAAS,CAAC,QAAQ,IAAI,OAAO;iBAC3B,SAAS,CAAC,WAAW;;;;;;;eAOvB,SAAS,CAAC,QAAQ;2BACN,SAAS,CAAC,QAAQ,IAAI,OAAO;eACzC,SAAS,CAAC,QAAQ,IAAI,OAAO;iBAC3B,SAAS,CAAC,WAAW;;;;;KAKjC,CAAC,CAAC,CAAC,OAAO;;wCAEyB,SAAS,CAAC,IAAI;OAC/C,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;2CACK,SAAS,CAAC,cAAc;MAC7D,CAAC,CAAC,CAAC,OAAO;;;6CAG6B,CAAC,SAAS,CAAC,WAAW,IAAI,CAAC,SAAS,CAAC,gBAAgB;uCAC3D,SAAS,CAAC,oBAAoB;MAC/D,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAIpB,SAAS,CAAC,WAAW;gBACnB,SAAS,CAAC,cAAc;;;KAGnC,CAAC,CAAC,CAAC,OAAO;;;EAGb,CAAC;AACH,CAAC"}

package/dist/components/palettes.html

@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="nl" data-scheme="light">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>NLDD Paletten</title>
+	<link rel="stylesheet" href="/css/settings.css">
+	<style>
+		body {
+			margin: 0;
+			padding: 2rem;
+			font-family: 'RijksSansVF', system-ui, sans-serif;
+			background: light-dark(#fff, #111);
+			color: light-dark(#111, #fff);
+		}
+
+		header {
+			display: flex;
+			align-items: baseline;
+			justify-content: space-between;
+			gap: 1rem;
+			max-width: 1400px;
+			margin: 0 auto 2rem;
+		}
+
+		h1 {
+			margin: 0;
+			font-size: 1.5rem;
+			font-weight: 600;
+		}
+
+		h2 {
+			margin: 2rem 0 0.5rem;
+			font-size: 1rem;
+			font-weight: 600;
+			text-transform: capitalize;
+			display: flex;
+			align-items: baseline;
+			gap: 0.75rem;
+		}
+
+		h2 small {
+			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+			font-size: 0.75rem;
+			opacity: 0.6;
+			font-weight: 400;
+		}
+
+		main {
+			max-width: 1400px;
+			margin: 0 auto;
+		}
+
+		section + section h1 {
+			margin-top: 3rem;
+		}
+
+		.section-title {
+			margin: 2.5rem 0 0.5rem;
+			font-size: 0.875rem;
+			font-weight: 600;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			opacity: 0.6;
+		}
+
+		.strip {
+			display: grid;
+			grid-template-columns: repeat(25, 1fr);
+			gap: 2px;
+			border-radius: 6px;
+			overflow: hidden;
+		}
+
+		.swatch {
+			aspect-ratio: 1 / 2;
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-end;
+			padding: 4px;
+			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+			font-size: 9px;
+			line-height: 1;
+			position: relative;
+		}
+
+		.swatch.light-text { color: rgba(255,255,255,0.85); }
+		.swatch.dark-text { color: rgba(0,0,0,0.7); }
+
+		.swatch span {
+			text-align: center;
+		}
+
+		.swatch.is-ref::before {
+			content: '★';
+			position: absolute;
+			top: 4px;
+			right: 4px;
+			font-size: 10px;
+		}
+
+		button.toggle {
+			padding: 0.4rem 0.8rem;
+			border: 1px solid currentColor;
+			background: transparent;
+			color: inherit;
+			border-radius: 4px;
+			font: inherit;
+			font-size: 0.8rem;
+			cursor: pointer;
+		}
+
+		button.toggle:hover {
+			background: light-dark(#0001, #fff1);
+		}
+
+		footer {
+			max-width: 1400px;
+			margin: 3rem auto 0;
+			font-size: 0.75rem;
+			opacity: 0.6;
+			line-height: 1.5;
+		}
+
+		footer code {
+			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+		}
+	</style>
+</head>
+<body>
+	<header>
+		<h1>NLDD Paletten</h1>
+		<button class="toggle" type="button" aria-label="Wissel kleurenschema">Light / Dark</button>
+	</header>
+
+	<main>
+		<div class="section-title">Functionele aliassen</div>
+		<div id="aliases"></div>
+
+		<div class="section-title">Descriptive paletten</div>
+		<div id="descriptive"></div>
+	</main>
+
+	<footer>
+		<p>★ markeert de step die het dichtst bij de oorspronkelijke referentiekleur ligt.
+		Step 500 = peak chroma. Plateau van mirror(ref) tot ref op volle chroma; daarbuiten taper.</p>
+		<p>Hex-waarden vind je in <code>src/assets/styles/palettes.generated.css</code>.</p>
+	</footer>
+
+	<script type="module">
+		const STEPS = [0, 25, 50, 75, 100, 150, 200, 250, 300, 350, 400, 450, 500,
+			550, 600, 650, 700, 750, 800, 850, 900, 925, 950, 975, 1000];
+
+		const ALIASES = ['accent', 'critical', 'mark', 'neutral', 'success', 'warning'];
+
+		const DESCRIPTIVE = [
+			{ name: 'coolgray',    hex: '#64748B' },
+			{ name: 'lintblauw',   hex: '#154273' },
+			{ name: 'donkerblauw', hex: '#01689B' },
+			{ name: 'hemelblauw',  hex: '#007BC7' },
+			{ name: 'lichtblauw',  hex: '#8FCAE7' },
+			{ name: 'paars',       hex: '#42145F' },
+			{ name: 'violet',      hex: '#A90061' },
+			{ name: 'robijnrood',  hex: '#CA005D' },
+			{ name: 'roze',        hex: '#F092CD' },
+			{ name: 'rood',        hex: '#D52B1E' },
+			{ name: 'oranje',      hex: '#E17000' },
+			{ name: 'donkergeel',  hex: '#FFB612' },
+			{ name: 'geel',        hex: '#F9E11E' },
+			{ name: 'donkerbruin', hex: '#673327' },
+			{ name: 'bruin',       hex: '#94710A' },
+			{ name: 'donkergroen', hex: '#275937' },
+			{ name: 'groen',       hex: '#39870C' },
+			{ name: 'mosgroen',    hex: '#777B00' },
+			{ name: 'mintgroen',   hex: '#76D2B6' },
+		];
+
+		// WCAG luminance from hex
+		function relLum(hex) {
+			const c = hex.slice(1).match(/.{2}/g).map(h => {
+				const v = parseInt(h, 16) / 255;
+				return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+			});
+			return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+		}
+
+		// Find the step whose target_lum is closest to the reference color's lum
+		function nearestStep(refHex) {
+			const lum = relLum(refHex);
+			const centerLum = Math.sqrt(1.05 * 0.05) - 0.05;
+			const logTarget = Math.log(Math.max(lum, 0.0001) + 0.05);
+			const logWhite = Math.log(1.05);
+			const logCenter = Math.log(centerLum + 0.05);
+			const logBlack = Math.log(0.05);
+
+			let pos;
+			if (logTarget >= logCenter) {
+				const t = (logTarget - logWhite) / (logCenter - logWhite);
+				pos = Math.max(0, Math.min(0.5, t * 0.5));
+			} else {
+				const t = (logTarget - logCenter) / (logBlack - logCenter);
+				pos = Math.max(0.5, Math.min(1.0, 0.5 + t * 0.5));
+			}
+			const target = pos * 1000;
+			return STEPS.reduce((a, b) =>
+				Math.abs(b - target) < Math.abs(a - target) ? b : a
+			);
+		}
+
+		// Decide light/dark text per swatch based on step (rough proxy for lightness in current scheme)
+		function textClass(step, scheme) {
+			// In light scheme, lower steps = lighter; in dark scheme, mirrored
+			const effective = scheme === 'dark' ? 1000 - step : step;
+			return effective < 500 ? 'dark-text' : 'light-text';
+		}
+
+		function renderPalette(name, refHex) {
+			const refStep = refHex ? nearestStep(refHex) : null;
+			const scheme = document.documentElement.dataset.scheme;
+			const swatches = STEPS.map(step => {
+				const cls = ['swatch', textClass(step, scheme)];
+				if (step === refStep) cls.push('is-ref');
+				return `<div class="${cls.join(' ')}" style="background:var(--primitives-color-${name}-${step})"><span>${step}</span></div>`;
+			}).join('');
+			const refLabel = refHex ? `<small>${refHex}</small>` : '';
+			return `<h2>${name}${refLabel}</h2><div class="strip">${swatches}</div>`;
+		}
+
+		function render() {
+			document.getElementById('aliases').innerHTML =
+				ALIASES.map(name => renderPalette(name)).join('');
+			document.getElementById('descriptive').innerHTML =
+				DESCRIPTIVE.map(({ name, hex }) => renderPalette(name, hex)).join('');
+		}
+
+		document.querySelector('button.toggle').addEventListener('click', () => {
+			const root = document.documentElement;
+			root.dataset.scheme = root.dataset.scheme === 'light' ? 'dark' : 'light';
+			render();
+		});
+
+		render();
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,49 @@
+/**
+ * Nederlandse Digitale Dienst Badge Component (Lit + TypeScript)
+ *
+ * Een notificatie-indicator, vaak voor ongelezen aantallen of statusdots. Kan tekst,
+ * een getal en/of een icoon tonen. Zonder inhoud verschijnt automatisch een stip.
+ * Gebruik in een hoek van een ander element (bijv. een icon) of standalone.
+ *
+ * @element nldd-badge
+ * @attr {string} variant - 'critical' | 'accent' | 'neutral' | 'warning' | 'success' (default: 'critical')
+ * @attr {string} size - Grootte: 'sm' | 'md' (default: 'md')
+ * @attr {string} text - Tekst (heeft voorrang op number)
+ * @attr {number} number - Numerieke waarde. Wordt beknopt als meer dan max
+ * @attr {number} max - Maximum waarde boven welke number wordt getoond als "{max}+" (default: 99)
+ * @attr {string} icon - Icoon naam. Icon-only wordt als vierkant gerenderd; met text/number komt het icoon links.
+ * @attr {string} accessible-label - Toegankelijk label voor screenreaders. Fallback naar text/number; anders naar i18n default ("Notificatie").
+ */
+import { LitElement } from 'lit';
+import './../../content/icon/icon.js';
+type Variant = 'critical' | 'accent' | 'neutral' | 'warning' | 'success';
+type Size = 'sm' | 'md';
+declare const NLDDBadge_base: (abstract new (...args: any[]) => LitElement & {
+    translations: Partial<{
+        'components.badge.notification-text': string;
+    }>;
+    _t(key: "components.badge.notification-text", vars?: Record<string, string | number>): string;
+}) & typeof LitElement;
+export declare class NLDDBadge extends NLDDBadge_base {
+    static styles: import("lit").CSSResult;
+    variant: Variant;
+    size: Size;
+    text: string;
+    number: number | undefined;
+    max: number;
+    icon: string;
+    accessibleLabel: string;
+    get _hasText(): boolean;
+    get _isDot(): boolean;
+    get _isIconOnly(): boolean;
+    get _displayValue(): string;
+    get _ariaLabel(): string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-badge': NLDDBadge;
+    }
+}
+export {};
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,OAAO,8BAA8B,CAAC;AAEtC,KAAK,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AACzE,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;;;;;;AAExB,qBACa,SAAU,SAAQ,cAAmD;IACjF,OAAgB,MAAM,0BAAe;IAGrC,OAAO,EAAE,OAAO,CAAc;IAG9B,IAAI,EAAE,IAAI,CAAQ;IAGlB,IAAI,SAAM;IAGV,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAGvC,GAAG,SAAM;IAGT,IAAI,SAAM;IAGV,eAAe,SAAM;IAErB,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,aAAa,IAAI,MAAM,CAM1B;IAED,IAAI,UAAU,IAAI,MAAM,CAIvB;IAEQ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

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

@@ -0,0 +1,5 @@
+export declare const nlddBadgeTranslations: {
+    'components.badge.notification-text': string;
+};
+export type NLDDBadgeTranslations = typeof nlddBadgeTranslations;
+//# sourceMappingURL=badge.i18n.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+export const nlddBadgeTranslations = {
+    'components.badge.notification-text': 'Notificatie',
+};
+//# sourceMappingURL=badge.i18n.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.i18n.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACpC,oCAAoC,EAAE,aAAa;CACnD,CAAC"}

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

@@ -0,0 +1,95 @@
+/**
+ * Nederlandse Digitale Dienst Badge Component (Lit + TypeScript)
+ *
+ * Een notificatie-indicator, vaak voor ongelezen aantallen of statusdots. Kan tekst,
+ * een getal en/of een icoon tonen. Zonder inhoud verschijnt automatisch een stip.
+ * Gebruik in een hoek van een ander element (bijv. een icon) of standalone.
+ *
+ * @element nldd-badge
+ * @attr {string} variant - 'critical' | 'accent' | 'neutral' | 'warning' | 'success' (default: 'critical')
+ * @attr {string} size - Grootte: 'sm' | 'md' (default: 'md')
+ * @attr {string} text - Tekst (heeft voorrang op number)
+ * @attr {number} number - Numerieke waarde. Wordt beknopt als meer dan max
+ * @attr {number} max - Maximum waarde boven welke number wordt getoond als "{max}+" (default: 99)
+ * @attr {string} icon - Icoon naam. Icon-only wordt als vierkant gerenderd; met text/number komt het icoon links.
+ * @attr {string} accessible-label - Toegankelijk label voor screenreaders. Fallback naar text/number; anders naar i18n default ("Notificatie").
+ */
+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;
+};
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { badgeStyles } from './badge.styles.js';
+import { template } from './badge.template.js';
+import { withTranslations } from '../../../utilities/with-translations.js';
+import { nlddBadgeTranslations } from './badge.i18n.js';
+import './../../content/icon/icon.js';
+let NLDDBadge = class NLDDBadge extends withTranslations(LitElement, nlddBadgeTranslations) {
+    constructor() {
+        super(...arguments);
+        this.variant = 'critical';
+        this.size = 'md';
+        this.text = '';
+        this.number = undefined;
+        this.max = 99;
+        this.icon = '';
+        this.accessibleLabel = '';
+    }
+    get _hasText() {
+        return !!this.text || typeof this.number === 'number';
+    }
+    get _isDot() {
+        return !this._hasText && !this.icon;
+    }
+    get _isIconOnly() {
+        return !!this.icon && !this._hasText;
+    }
+    get _displayValue() {
+        if (this.text)
+            return this.text;
+        if (typeof this.number === 'number') {
+            return this.number > this.max ? `${this.max}+` : String(this.number);
+        }
+        return '';
+    }
+    get _ariaLabel() {
+        if (this.accessibleLabel)
+            return this.accessibleLabel;
+        if (this._hasText)
+            return this._displayValue;
+        return this._t('components.badge.notification-text');
+    }
+    render() {
+        return template(this);
+    }
+};
+NLDDBadge.styles = badgeStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDBadge.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDBadge.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NLDDBadge.prototype, "text", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NLDDBadge.prototype, "number", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NLDDBadge.prototype, "max", void 0);
+__decorate([
+    property({ type: String })
+], NLDDBadge.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDBadge.prototype, "accessibleLabel", void 0);
+NLDDBadge = __decorate([
+    customElement('nldd-badge')
+], NLDDBadge);
+export { NLDDBadge };
+//# sourceMappingURL=badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,8BAA8B,CAAC;AAM/B,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,gBAAgB,CAAC,UAAU,EAAE,qBAAqB,CAAC;IAA3E;;QAIN,YAAO,GAAY,UAAU,CAAC;QAG9B,SAAI,GAAS,IAAI,CAAC;QAGlB,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAuB,SAAS,CAAC;QAGvC,QAAG,GAAG,EAAE,CAAC;QAGT,SAAI,GAAG,EAAE,CAAC;QAGV,oBAAe,GAAG,EAAE,CAAC;IA+BtB,CAAC;IA7BA,IAAI,QAAQ;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;IACvD,CAAC;IAED,IAAI,MAAM;QACT,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;IACrC,CAAC;IAED,IAAI,WAAW;QACd,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IACtC,CAAC;IAED,IAAI,aAAa;QAChB,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC,IAAI,CAAC;QAChC,IAAI,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YACrC,OAAO,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtE,CAAC;QACD,OAAO,EAAE,CAAC;IACX,CAAC;IAED,IAAI,UAAU;QACb,IAAI,IAAI,CAAC,eAAe;YAAE,OAAO,IAAI,CAAC,eAAe,CAAC;QACtD,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,aAAa,CAAC;QAC7C,OAAO,IAAI,CAAC,EAAE,CAAC,oCAAoC,CAAC,CAAC;IACtD,CAAC;IAEQ,MAAM;QACd,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;;AAnDe,gBAAM,GAAG,WAAW,AAAd,CAAe;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACZ;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACxB;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACH;AAGvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACjC;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;kDACrC;AAtBT,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAqDrB"}

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

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

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

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