npm - @nldd/design-system - Versions diffs - 0.8.76 → 0.8.78 - Mend

@nldd/design-system 0.8.76 → 0.8.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (141) hide show

package/dist/palettes.html ADDED Viewed

@@ -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/sample-images/butterfly-1200.jpg ADDED Viewed

Binary file

package/dist/sample-images/butterfly-1600.jpg ADDED Viewed

Binary file

package/dist/sample-images/butterfly-480.jpg ADDED Viewed

Binary file

package/dist/sample-images/butterfly-960.jpg ADDED Viewed

Binary file

package/dist/types/vue.d.ts CHANGED Viewed

@@ -116,6 +116,8 @@ import type { NLDDTag } from '@nldd/design-system/tag';
 import type { NLDDTextCell } from '@nldd/design-system/text-cell';
 import type { NLDDTextEditor } from '@nldd/design-system/text-editor';
 import type { NLDDTextField } from '@nldd/design-system/text-field';
+import type { NLDDTimeField } from '@nldd/design-system/time-field';
+import type { NLDDTimePicker } from '@nldd/design-system/time-picker';
 import type { NLDDTimelineTrackCell } from '@nldd/design-system/timeline-track-cell';
 import type { NLDDTitle } from '@nldd/design-system/title';
 import type { NLDDTitleCell } from '@nldd/design-system/title-cell';
@@ -196,7 +198,7 @@ declare module 'vue' {
 		'accessibleLabel'?: NLDDAvatar['accessibleLabel'];
 		/** Overschrijf translation keys; niet gezette keys vallen terug op het Nederlands */
 		'translations'?: NLDDAvatar['translations'];
-		/** True zodra de avatar zelf een control is. */
+		/** True once the avatar is a control itself. */
 		'isInteractive'?: NLDDAvatar['isInteractive'];
 		/** Initials shown when there is no image: an explicit `initials` wins, otherwise the first letter of the first and last word of `name`. */
 		'resolvedInitials'?: NLDDAvatar['resolvedInitials'];
@@ -227,6 +229,8 @@ declare module 'vue' {
 	type NLDDBannerProps = {
 		/** Color and default icon (default: 'neutral') */
 		'variant'?: NLDDBanner['variant'];
+		/** Banner size (default: 'md'). 'sm' tightens the padding to 8px, drops the icon to 24px and uses a smaller dismiss button — for a bar that sits between chrome and content rather than a standalone page-level notice. The typography is unchanged. */
+		'size'?: NLDDBanner['size'];
 		/** Icon override. Default per variant: neutral → info-circle-filled, accent → info-circle-filled, success → check-circle-filled, warning → exclamation-triangle-filled, critical → exclamation-circle-filled */
 		'icon'?: NLDDBanner['icon'];
 		/** Main text (heading or paragraph, depending on heading-level) */
@@ -2778,6 +2782,85 @@ declare module 'vue' {
 		'onChange'?: (event: CustomEvent) => void;
 	};
+	type NLDDTimeFieldProps = {
+		/** 'md' (standaard) | 'sm'. Wordt automatisch gezet door nldd-form-field. */
+		'size'?: NLDDTimeField['size'];
+		/** De tijd als `HH:mm` (24-uurs). Leeg wanneer er geen geldige tijd staat. */
+		'value'?: NLDDTimeField['value'];
+		/** Vroegst toegestane tijd als `HH:mm`. Is tevens de basis waarvandaan `step` telt. */
+		'min'?: NLDDTimeField['min'];
+		/** Laatst toegestane tijd als `HH:mm`. */
+		'max'?: NLDDTimeField['max'];
+		/** Minutenstap (standaard 1). Bepaalt welke tijden geldig zijn, waarop wordt afgerond en hoe ver de pijltjestoetsen verspringen. */
+		'step'?: NLDDTimeField['step'];
+		/** Verbergt de picker-knop. Standaard staat die knop er wel. */
+		'no-picker'?: NLDDTimeField['noPicker'];
+		/** Verbergt de picker-knop. Standaard staat die knop er wel. */
+		'noPicker'?: NLDDTimeField['noPicker'];
+		/** Zet het id op de interne input. Wordt automatisch gezet door nldd-form-field. */
+		'input-id'?: NLDDTimeField['inputId'];
+		/** Zet het id op de interne input. Wordt automatisch gezet door nldd-form-field. */
+		'inputId'?: NLDDTimeField['inputId'];
+		/** Placeholdertekst. Zet hier geen formaat in; gebruik daarvoor de supporting-label van nldd-form-field. */
+		'placeholder'?: NLDDTimeField['placeholder'];
+		/** Markeert het veld als ongeldig. */
+		'invalid'?: NLDDTimeField['invalid'];
+		/** Markeert het veld als geldig. */
+		'valid'?: NLDDTimeField['valid'];
+		/** Uitgeschakelde staat. */
+		'disabled'?: NLDDTimeField['disabled'];
+		/** Alleen-lezen staat. */
+		'readonly'?: NLDDTimeField['readonly'];
+		/** Verplichte staat. */
+		'required'?: NLDDTimeField['required'];
+		/** Naam voor formulierverzending. */
+		'name'?: NLDDTimeField['name'];
+		/** Autocomplete-hint. */
+		'autocomplete'?: NLDDTimeField['autocomplete'];
+		/** Toegankelijk label voor de interne input. Wordt automatisch gezet door nldd-form-field. */
+		'accessible-label'?: NLDDTimeField['accessibleLabel'];
+		/** Toegankelijk label voor de interne input. Wordt automatisch gezet door nldd-form-field. */
+		'accessibleLabel'?: NLDDTimeField['accessibleLabel'];
+		/** Ids voor aria-describedby. Wordt automatisch gezet door nldd-form-field. */
+		'error-message-ids'?: NLDDTimeField['errorMessageIds'];
+		/** Ids voor aria-describedby. Wordt automatisch gezet door nldd-form-field. */
+		'errorMessageIds'?: NLDDTimeField['errorMessageIds'];
+		/** Breedte. Standaard precies breed genoeg voor een tijd plus het validatie-icoon; 'full' vult de container, of geef een eigen CSS-lengte. */
+		'width'?: NLDDTimeField['width'];
+		/** Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands. */
+		'translations'?: NLDDTimeField['translations'];
+		'internals'?: NLDDTimeField['internals'];
+		/** Bij elke wijziging. detail: { value } met `HH:mm`, of '' zolang er geen geldige tijd staat. */
+		'onInput'?: (event: CustomEvent) => void;
+		/** Wanneer de waarde is vastgelegd: bij het verlaten van het veld, en bij het sluiten van de picker op een manier die de keuze houdt. detail: { value } met `HH:mm`, of ''. */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+	type NLDDTimePickerProps = {
+		/** De gekozen tijd als `HH:mm` (24-uurs). */
+		'value'?: NLDDTimePicker['value'];
+		/** Vroegst toegestane tijd als `HH:mm`. Is tevens de basis waarvandaan `step` telt. */
+		'min'?: NLDDTimePicker['min'];
+		/** Laatst toegestane tijd als `HH:mm`. */
+		'max'?: NLDDTimePicker['max'];
+		/** Minutenstap (standaard 1). Bepaalt welke minuten in de kolom staan. */
+		'step'?: NLDDTimePicker['step'];
+		/** Hoogte van de kolommen in rijen (standaard 7, minimaal 3). De gekozen waarde staat altijd in het midden, dus een oneven aantal toont hele rijen en een even aantal kapt boven en onder een halve rij af. */
+		'rows'?: NLDDTimePicker['rows'];
+		/** Breedte: `full` vult de container, of geef een eigen CSS-lengte. */
+		'width'?: NLDDTimePicker['width'];
+		/** Toegankelijke naam van de picker. */
+		'accessible-label'?: NLDDTimePicker['accessibleLabel'];
+		/** Toegankelijke naam van de picker. */
+		'accessibleLabel'?: NLDDTimePicker['accessibleLabel'];
+		/** Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands. */
+		'translations'?: NLDDTimePicker['translations'];
+		/** Bij elke wijziging: scrollen, de pijltjestoetsen. detail: { value } met `HH:mm`. */
+		'onInput'?: (event: CustomEvent) => void;
+		/** Wanneer de keuze is bevestigd: een klik op een waarde of op de selectie, of Enter. detail: { value } met `HH:mm`. Scrollen geeft alleen `input`, want anders zou een veld dat de picker in een popover toont al vastleggen zodra je stopt met scrollen. */
+		'onChange'?: (event: CustomEvent) => void;
+	};
 	type NLDDTimelineTrackCellProps = {
 		/** Status van deze stap (standaard 'past'); dezelfde waarden als `nldd-step-indicator-item`. `none` tekent alleen de lijn, zonder stip */
 		'status'?: NLDDTimelineTrackCell['status'];
@@ -3285,9 +3368,9 @@ declare module 'vue' {
 		'nldd-keyboard-shortcut': DefineComponent<NLDDKeyboardShortcutProps>;
 		/** Hyperlink component met twee modi: 1. **Standalone (sized)** — set `size="xs"|"sm"|"md"|"lg"` voor menu's, actiegebieden of overzichten. Vaste tekstgrootte, `display: inline-flex` met `gap` voor icon-spacing. 2. **Inline (inherit)** — laat `size` weg of zet expliciet `size="inherit"`. De link erft `font-size`, `line-height` en `font-family` van zijn omgeving. Tekst wraps natuurlijk over regels (`display: inline`). Icons werken ook hier; de natuurlijke whitespace tussen icon en tekst zorgt voor de spacing. Voor links in CMS/markdown-output (waar de `<a>` als HTML binnenkomt) blijft `<nldd-rich-text>` met raw `<a>` de aangewezen route. */
 		'nldd-link': DefineComponent<NLDDLinkProps>;
-		/** A container for `nldd-list-item` elements. The `type` attribute switches the list's a11y role and behavior: - `list` (default) — `role="list"`, items `role="listitem"`. Reorderable allowed. - `tree` — `role="tree"`, items `role="treeitem"`. Branch rows put their child rows in their own `slot="children"`, which the item renders as a `role="group"`. Level, position and set size are NOT authored: the nesting represents the hierarchy, so assistive technology derives them. A branch row must carry `expanded`; the group is hidden while it is false. Visual indentation is the consumer's — repeat a spacer-cell per level. Comes with its own keyboard, see "Tree" below. - `navigation` — host `role="navigation"`, items with `selected` get `aria-current="page"` on their inner `<a>` or `<button>`. - `listbox` — an accessible, filterable listbox (combobox pattern). The list renders its OWN search input (`role="combobox"`) pinned above the options; `.list__items` becomes `role="listbox"` and items become `role="option"`. Focus stays in the input, the active option moves via `aria-activedescendant`, and filtering is consumer-managed via the `input` event (toggle `[hidden]` on items). See "Listbox" below. Selection state is consumer-managed: the list never mutates `selected` itself. In `type="listbox"` the list owns a native `<input role="combobox">` (mirroring how `nldd-combo-box` wires an input to a slotted listbox). Keyboard, handled on the input so focus never leaves it: - ArrowDown / ArrowUp — move the active option among the VISIBLE (non-`[hidden]`) options (wrap around). - Home / End — first / last visible option. - Enter — activate the active option by triggering its inner action (a link navigates, a button fires the consumer's handler). Selection stays consumer-managed. - Escape — clear the search value (and refire `input`). On every active change the input's `aria-activedescendant` is set to the active option's id and the option is scrolled into view. The active option (`_highlighted` on the item, a highlight) is distinct from `selected`. Filtering is the consumer's job: listen to `input` (`{ detail: { value } }`) and toggle `[hidden]` on items; after the visible set changes the list resets the active option to the first visible one. `reorderable` and `arrow-navigation` are ignored in listbox mode (listbox has its own keyboard). A tree is a composite widget, so it brings its own keyboard — `arrow-navigation` is implied and needn't be set: - ArrowDown / ArrowUp — move between the rows in the order they appear on screen, the rows of an open branch included. - Home / End — first / last row. - ArrowRight — opens a closed branch; on an open one it steps to its first child. - ArrowLeft — closes an open branch; on a leaf it steps out to the parent row. - Enter / Space — open and close, the same as Right and Left. Only while focus sits on the row itself: a row that is its own control, and a segmented action you tabbed into, handle both keys themselves. Opening and closing runs through the row's own disclosure control — the segmented action marked `disclosure`, or the row itself when it is a button. The list activates that control rather than writing `expanded`, so the state keeps being set in one place: the consumer's handler. A row that is a link is never activated this way, since that would navigate away. The tree is one tab stop. Focus lands on the row itself when the row has no control of its own, because that is where `treeitem` sits and it makes assistive technology announce the row rather than a button inside it. Tab then walks the controls of THAT row (a chevron beside a checkbox, say) and leaves the list after the last one. A deliberate deviation: strictly speaking a row with several controls is a `treegrid`, not a `tree`. We keep the tree semantics — level and set size are what matters here, not rows and columns — and borrow the "Tab within the row" behaviour from the grid pattern. Should a tree with real columns come up, that is when `treegrid` earns its own type. On reorder (type="list" + reorderable), the list dispatches `nldd-reorder` with `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their data model that renders the DOM). Focus is restored to the moved item's drag handle via a single `requestAnimationFrame` — this assumes the consumer reorders **synchronously** in the event handler. Async renderers (React, Vue, …) that update the DOM on a later tick will miss the focus restore and should manage focus themselves after their render commits. */
+		/** A container for `nldd-list-item` elements. The `type` attribute switches the list's a11y role and behavior: - `list` (default) — `role="list"`, items `role="listitem"`. Reorderable allowed. - `tree` — `role="tree"`, items `role="treeitem"`. Branch rows put their child rows in their own `slot="children"`, which the item renders as a `role="group"`. Level, position and set size are NOT authored: the nesting represents the hierarchy, so assistive technology derives them. A branch row must carry `expanded`; the group is hidden while it is false. Visual indentation is the consumer's — repeat a spacer-cell per level. Comes with its own keyboard, see "Tree" below. - `navigation` — host `role="navigation"`, items with `selected` get `aria-current="page"` on their inner `<a>` or `<button>`. - `listbox` — an accessible, filterable listbox (combobox pattern). The list renders its OWN search input (`role="combobox"`) pinned above the options; `.list__items` becomes `role="listbox"` and items become `role="option"`. Focus stays in the input, the active option moves via `aria-activedescendant`, and filtering is consumer-managed via the `input` event (toggle `[hidden]` on items). See "Listbox" below. Selection state is consumer-managed: the list never mutates `selected` itself. In `type="listbox"` the list owns a native `<input role="combobox">` (mirroring how `nldd-combo-box` wires an input to a slotted listbox). Keyboard, handled on the input so focus never leaves it: - ArrowDown / ArrowUp — move the active option among the VISIBLE (non-`[hidden]`) options (wrap around). - Home / End — first / last visible option. - Enter — activate the active option by triggering its inner action (a link navigates, a button fires the consumer's handler). Selection stays consumer-managed. - Escape — clear the search value (and refire `input`). On every active change the input's `aria-activedescendant` is set to the active option's id and the option is scrolled into view. The active option (`_highlighted` on the item, a highlight) is distinct from `selected`. Filtering is the consumer's job: listen to `input` (`{ detail: { value } }`) and toggle `[hidden]` on items; after the visible set changes the list resets the active option to the first visible one. `reorderable` and `arrow-navigation` are ignored in listbox mode (listbox has its own keyboard). A tree is a composite widget, so it brings its own keyboard — `arrow-navigation` is implied and needn't be set: - ArrowDown / ArrowUp — move between the rows in the order they appear on screen, the rows of an open branch included. - Home / End — first / last row. - ArrowRight — opens a closed branch; on an open one it steps to its first child. - ArrowLeft — closes an open branch; on a leaf it steps out to the parent row. - Enter / Space — open and close, the same as Right and Left. Only while focus sits on the row itself: a row that is its own control, and a segmented action you tabbed into, handle both keys themselves. Opening and closing runs through the row's own disclosure control — the segmented action marked `disclosure`, or the row itself when it is a button. The list activates that control rather than writing `expanded`, so the state keeps being set in one place: the consumer's handler. A row that is a link is never activated this way, since that would navigate away. The tree is one tab stop. Focus lands on the row itself when the row has no control of its own, because that is where `treeitem` sits and it makes assistive technology announce the row rather than a button inside it. Tab then walks the controls of THAT row (a chevron beside a checkbox, say) and leaves the list after the last one. A deliberate deviation: strictly speaking a row with several controls is a `treegrid`, not a `tree`. We keep the tree semantics — level and set size are what matters here, not rows and columns — and borrow the "Tab within the row" behavior from the grid pattern. Should a tree with real columns come up, that is when `treegrid` earns its own type. On reorder (type="list" + reorderable), the list dispatches `nldd-reorder` with `fromIndex` / `toIndex` and expects the consumer to mutate the DOM (or their data model that renders the DOM). Focus is restored to the moved item's drag handle via a single `requestAnimationFrame` — this assumes the consumer reorders **synchronously** in the event handler. Async renderers (React, Vue, …) that update the DOM on a later tick will miss the focus restore and should manage focus themselves after their render commits. */
 		'nldd-list': DefineComponent<NLDDListProps>;
-		/** A row within an `nldd-list`. Renders as a link when `href` is set, as a checkbox when `checkbox` is set, as a button when `button` is set, or as a plain container otherwise. All cells and action segmented actions share one flat slot, in source order. Two rules govern every row: 1. State fills always paint the WIDENED row geometry — the row box extended by the indicator inline inset on both sides — whether or not the row is interactive. Paint never differs between a selected plain row and a selected interactive row. 2. The widened strip belongs to the ROW, never to a segment. A row with any action (its own `href`/`button`/`checkbox`, or a slotted segment) pulls itself outward (`is-interactive` host class → negative inline margin) and pads the row block back by the same amount, so content stays on the grid. A row-wide action owns that padding itself, making the whole widened box one hit area; slotted segmented actions stay in the grid, so their footprint is position-independent and tree columns line up at any depth. The divider spans the content width by default, with one exception: a row that opens with an `nldd-icon-cell` followed by a text or title cell starts the divider at that text, so the line aligns with the words rather than the icon. Leading spacers are ignored when deciding this. Mark a cell with `divider-start` and/or `divider-end` to place it yourself instead — an explicit marker replaces the derived one entirely, so `divider-start` on the icon cell restores the full-width line. Multiple markers resolve as the union: first `divider-start` through last `divider-end`. A start past the last end is an authoring error — the item DEV-warns and falls back to the full content width. A branch row can disclose its children in two ways: a dedicated `nldd-list-item-action[disclosure]` segment (only the chevron is clickable), or the row itself as the control (`button` + `expanded`, the whole row toggles). In the second case, mark the chevron's `nldd-icon-cell` with `disclosure` and the row turns it with `expanded` — the same affordance, without having to trade a clickable row for a turning chevron. `checkbox` makes the WHOLE row the control: the inner action becomes a `role="checkbox"` button carrying `aria-checked`, it toggles `checked` on activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph) before the text and mark it `aria-hidden` + non-focusable — the row already conveys role and state, and a second focusable control would double the tab stops. Do NOT nest a real `<input type="checkbox">` in the action: interactive content inside a `<button>` is invalid HTML and AT announces the button, not the checked state. A `<label>` variant is not offered for the same reason it cannot work — label-to-input association walks the DOM tree, and a slotted input is not a descendant of a label in the shadow root. When it renders as a link, `target` and `rel` are forwarded to the inner `<a>` (e.g. `target="_blank" rel="noopener noreferrer"`). With `target="_blank"` the item also injects a visually hidden "opens in new tab" announcement for assistive technology (WCAG 2.1 SC 3.2.2). The item synchronises its ARIA with its parent `nldd-list`'s `type`: - `list` parent → `role="listitem"` - `navigation` parent → `role="listitem"` + `aria-current="page"` on the inner `<a>` / `<button>` when `selected` - `listbox` parent → `role="option"` + `aria-selected` reflecting `selected`. The list points its search input's `aria-activedescendant` at the active option via `_highlighted` (separate from `selected`). */
+		/** A row within an `nldd-list`. Renders as a link when `href` is set, as a checkbox when `checkbox` is set, as a button when `button` is set, or as a plain container otherwise. All cells and action segmented actions share one flat slot, in source order. Two rules govern every row: 1. State fills always paint the WIDENED row geometry — the row box extended by the indicator inline inset on both sides — whether or not the row is interactive. Paint never differs between a selected plain row and a selected interactive row. 2. The widened strip belongs to the ROW, never to a segment. A row with any action (its own `href`/`button`/`checkbox`, or a slotted segment) pulls itself outward (`is-interactive` host class → negative inline margin) and pads the row block back by the same amount, so content stays on the grid. A row-wide action owns that padding itself, making the whole widened box one hit area; slotted segmented actions stay in the grid, so their footprint is position-independent and tree columns line up at any depth. The divider spans the content width by default, with one exception: a row that opens with an `nldd-icon-cell` followed by a text or title cell starts the divider at that text, so the line aligns with the words rather than the icon. Leading spacers are ignored when deciding this. Mark a cell with `divider-start` and/or `divider-end` to place it yourself instead — an explicit marker replaces the derived one entirely, so `divider-start` on the icon cell restores the full-width line. Multiple markers resolve as the union: first `divider-start` through last `divider-end`. A start past the last end is an authoring error — the item DEV-warns and falls back to the full content width. A branch row can disclose its children in two ways: a dedicated `nldd-list-item-action[disclosure]` segment (only the chevron is clickable), or the row itself as the control (`button` + `expanded`, the whole row toggles). In the second case, mark the chevron's `nldd-icon-cell` with `disclosure` and the row turns it with `expanded` — the same affordance, without having to trade a clickable row for a turning chevron. `checkbox` makes the WHOLE row the control: the inner action becomes a `role="checkbox"` button carrying `aria-checked`, it toggles `checked` on activation and fires `change`. Slot a visual `nldd-checkbox` (or any glyph) before the text and mark it `aria-hidden` + non-focusable — the row already conveys role and state, and a second focusable control would double the tab stops. Do NOT nest a real `<input type="checkbox">` in the action: interactive content inside a `<button>` is invalid HTML and AT announces the button, not the checked state. A `<label>` variant is not offered for the same reason it cannot work — label-to-input association walks the DOM tree, and a slotted input is not a descendant of a label in the shadow root. When it renders as a link, `target` and `rel` are forwarded to the inner `<a>` (e.g. `target="_blank" rel="noopener noreferrer"`). With `target="_blank"` the item also injects a visually hidden "opens in new tab" announcement for assistive technology (WCAG 2.1 SC 3.2.2). The item synchronizes its ARIA with its parent `nldd-list`'s `type`: - `list` parent → `role="listitem"` - `navigation` parent → `role="listitem"` + `aria-current="page"` on the inner `<a>` / `<button>` when `selected` - `listbox` parent → `role="option"` + `aria-selected` reflecting `selected`. The list points its search input's `aria-activedescendant` at the active option via `_highlighted` (separate from `selected`). */
 		'nldd-list-item': DefineComponent<NLDDListItemProps>;
 		/** A segmented action inside an `nldd-list-item`: it groups a run of cells and makes just that run clickable. Use it when a row needs more than one action — a tree row whose chevron expands while the label toggles a checkbox, or a row that navigates with a separate button beside it. Put it in the row where its cells would go: the item has one flat slot, and a segmented action takes the place of the cells it covers. Where the divider starts or stops is marked on the cells themselves (`divider-start` / `divider-end`), not by the slot an action sits in. A row is EITHER row-level interactive (`href` / `button` / `checkbox` on the `nldd-list-item`) OR segmented (one or more of these). Both at once nests a control inside a control, which is invalid HTML; the item DEV-warns. Unlike the row-wide action this does not bleed outward: a segmented action sits between siblings, so an outward inset would overlap them. It owns its inline padding and never drops below the row's control size, so an icon-only one still meets the WCAG 2.5.8 target size — do not add spacer cells inside it for room or hit area, that doubles the space. In a `type="listbox"` list the segmented action renders as a plain container (no control, not focusable) and DEV-warns: an `option` may not contain interactive descendants. The cells render unchanged, so nothing shifts. */
 		'nldd-list-item-action': DefineComponent<NLDDListItemActionProps>;
@@ -3394,6 +3477,10 @@ declare module 'vue' {
 		/** A hybrid markdown editor built on CodeMirror 6 (via NLDDCodeMirrorElement): the document stays plain markdown text, but formatting is shown inline (bold is bold, headings are larger, links are colored) while the syntax markers stay visible, only dimmed — the iA Writer / Kirby approach. No WYSIWYG tree, so the data stays portable. Default `variant="simple"` is bare (no frame, no focus ring) for use inside a composition (e.g. a message field) that owns its chrome and focus; the caret is a prominent accent. `variant="input-field"` adds a framed surface + focus ring. `font` is `sans` (default, best for prose) or `mono`. Headless: there is no built-in toolbar. A consumer drives formatting via the command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/ toggleHeading/toggleBulletList/toggleQuote/toggleLink/runCommand to toggle, and setHeading/setList for picker-style "set" semantics), reads the active formats with getState(), listens to the nldd-text-editor-state event to render toggle states, and forwards padding clicks with focusFromPoint(). Cmd/Ctrl+B/I/E/K are bound out of the box. Commands keep focus on the editor. An @-mention typeahead (mentionSource) collapses to an atomic token, and a W3C-style annotation overlay (annotations) marks ranges with a dashed underline, light tint and a count badge without touching the underlying text. */
 		'nldd-text-editor': DefineComponent<NLDDTextEditorProps>;
 		'nldd-text-field': DefineComponent<NLDDTextFieldProps>;
+		/** Een tekstveld voor een tijd. De waarde is altijd 24-uurs `HH:mm`; dat is in het Nederlands ook de weergave, dus anders dan bij nldd-date-field valt er niets om te rekenen. Er wordt niet gemaskeerd tijdens het typen: invoer wordt royaal geaccepteerd en pas bij het verlaten van het veld genormaliseerd. Foutmeldingen horen bij nldd-form-field, niet hier. Dit veld reflecteert alleen `invalid` / `valid`, net als nldd-text-field. Wat je in de picker doet is een voorbeeld tot je hem verlaat: het veld toont de tijd meteen, maar legt hem pas vast bij het sluiten. "Klaar" en Enter houden de keuze, een klik ernaast ook zodra je iets gekozen hebt, en Annuleer en Escape zetten de oude tijd terug. Op een leeg veld openen de wielen op `min`, of anders op de huidige tijd afgerond op `step`; dat vult het veld nog niet in. */
+		'nldd-time-field': DefineComponent<NLDDTimeFieldProps>;
+		/** Twee kolommen, uren en minuten, die als een wiel langs de selectie in het midden schuiven. Het component is zelfstandig bruikbaar (inline op een pagina, in een filterpaneel) en zit ook in de popover van nldd-time-field. Waarden zijn altijd 24-uurs `HH:mm`. Scrollen ís kiezen: wat in het midden tot stilstand komt, is de waarde. Met het toetsenbord bedien je de selectie, want dat is wat een wiel is: uur en minuut zijn er elk een spinbutton. De kolommen eronder staan op aria-hidden, zodat dezelfde waarden niet twee keer worden voorgelezen. */
+		'nldd-time-picker': DefineComponent<NLDDTimePickerProps>;
 		/** A cell component for displaying timeline track indicators in lists. Shows a vertical line with a dot indicating timeline position and state. The row's block padding belongs to the cell itself (via `--context-cell-padding-block`), so the line spans the cell's own box edge to edge and consecutive steps connect without gaps. Standaard is de cel een kaal spoor: een lijn met een stip per rij, voor een tijdlijn van gebeurtenissen. Met `variant="step"` wordt de stip groot genoeg voor een cijfer of icoon en heb je een stappenlijst onder elkaar, de verticale tegenhanger van `nldd-step-indicator`. De maat hoort bij de variant en niet bij de inhoud: elke stip in een lijst is even groot, anders verspringt het spoor. */
 		'nldd-timeline-track-cell': DefineComponent<NLDDTimelineTrackCellProps>;
 		/** A title bar with an optional overline, title, and subtitle on the left, and a slot for actions on the right. */

package/package.json CHANGED Viewed

@@ -1,12 +1,15 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.76",
+  "version": "0.8.78",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
   "module": "dist/components/components.js",
+  "unpkg": "dist/nldd.min.js",
+  "jsdelivr": "dist/nldd.min.js",
   "exports": {
     ".": "./dist/components/components.js",
+    "./bundle": "./dist/nldd.min.js",
     "./button": {
       "types": "./dist/components/actions/button/button.d.ts",
       "default": "./dist/components/actions/button/button.js"
@@ -179,6 +182,14 @@
       "types": "./dist/components/inputs/text-field/text-field.d.ts",
       "default": "./dist/components/inputs/text-field/text-field.js"
     },
+    "./time-field": {
+      "types": "./dist/components/inputs/time-field/time-field.d.ts",
+      "default": "./dist/components/inputs/time-field/time-field.js"
+    },
+    "./time-picker": {
+      "types": "./dist/components/inputs/time-picker/time-picker.d.ts",
+      "default": "./dist/components/inputs/time-picker/time-picker.js"
+    },
     "./toggle-button": {
       "types": "./dist/components/inputs/toggle-button/toggle-button.d.ts",
       "default": "./dist/components/inputs/toggle-button/toggle-button.js"
@@ -461,13 +472,13 @@
     "validate:styles": "node scripts/validate-css-variables.js",
     "validate:host-styles": "node scripts/validate-host-styles.js",
     "validate:component-api": "node scripts/validate-component-api.js",
-    "build:components": "npm run clean:components && npm run build:icons && npm run build:components:modules && npm run build:components:bundle && npm run build:exports && npm run generate:cem",
+    "build:components": "npm run clean:components && npm run build:icons && npm run build:components:modules && npm run build:components:bundle && npm run build:components:standalone && npm run build:exports && npm run generate:cem",
     "build:icons": "node scripts/generate-icon-registry.js && node scripts/generate-logo.js",
     "build:components:modules": "tsc -p tsconfig.build.json",
     "build:components:bundle": "vite build",
     "build:exports": "node scripts/generate-exports.js",
     "clean": "rm -rf dist",
-    "clean:components": "rm -rf dist/components",
+    "clean:components": "rm -rf dist/components dist/nldd.min.js",
     "prestorybook": "npm run build:icons",
     "storybook": "storybook dev -p 6006",
     "sb:start": "node scripts/storybook-manager.js start",
@@ -488,7 +499,8 @@
     "test:scripts": "node --test scripts/*.test.mjs scripts/lib/*.test.mjs",
     "pretypecheck": "npm run build:icons",
     "typecheck": "tsc --noEmit",
-    "test:vue-types": "vue-tsc --noEmit -p type-tests/vue/tsconfig.json"
+    "test:vue-types": "vue-tsc --noEmit -p type-tests/vue/tsconfig.json",
+    "build:components:standalone": "vite build --config vite.bundle.config.ts"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",