@nldd/design-system 0.8.93 → 0.8.94

package/dist/types/vue.d.ts

@@ -318,8 +318,8 @@ declare module 'vue' {
 	};
 
 	type NLDDButtonProps = {
-		/** Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted'. The inherit variants derive their colors from currentColor, for buttons on colored surfaces; inherit-filled uses the surface color (--context-parent-background-color) as the label color, with a white/black contrast flip as a fallback. */
-		'variant'?: NLDDButton['variant'];
+		/** Visual style, color included: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted'. The inherit appearances derive their colors from currentColor, for buttons on colored surfaces; inherit-filled uses the surface color (--context-parent-background-color) as the label color, with a white/black contrast flip as a fallback. */
+		'appearance'?: NLDDButton['appearance'];
 		/** Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md'). 'lg' uses larger text and 24px start/end icons. */
 		'size'?: NLDDButton['size'];
 		/** Horizontal alignment of the button content: 'left' | 'center' | 'right' (default: unset, centered). Most visible with width="full" or a fixed width. */
@@ -350,6 +350,10 @@ declare module 'vue' {
 		'popovertarget'?: NLDDButton['popovertarget'];
 		/** Loading state (default: false). Shows an activity indicator over the visually hidden content, sets aria-busy on the inner control and blocks activation, without dropping the button from the tab order (unlike disabled). The content stays laid out, so the button keeps its width. */
 		'loading'?: NLDDButton['loading'];
+		/** What the screen reader announces while `loading` is on, for a button that does more than load: "Aan het bewaren". Leave it out and the activity indicator says its translated "Laden". */
+		'loading-text'?: NLDDButton['loadingText'];
+		/** What the screen reader announces while `loading` is on, for a button that does more than load: "Aan het bewaren". Leave it out and the activity indicator says its translated "Laden". */
+		'loadingText'?: NLDDButton['loadingText'];
 		/** Disabled state */
 		'disabled'?: NLDDButton['disabled'];
 		/** Button text */
@@ -362,9 +366,9 @@ declare module 'vue' {
 		'single-line'?: NLDDButton['singleLine'];
 		/** When true, truncates overflowing text with an ellipsis instead of letting it wrap. Requires the button (or an ancestor) to constrain the width. */
 		'singleLine'?: NLDDButton['singleLine'];
-		/** Removes the per-variant highlight border (e.g. when nldd-button-bar draws a single group border instead). */
+		/** Removes the per-appearance highlight border (e.g. when nldd-button-bar draws a single group border instead). */
 		'no-highlight-border'?: NLDDButton['noHighlightBorder'];
-		/** Removes the per-variant highlight border (e.g. when nldd-button-bar draws a single group border instead). */
+		/** Removes the per-appearance highlight border (e.g. when nldd-button-bar draws a single group border instead). */
 		'noHighlightBorder'?: NLDDButton['noHighlightBorder'];
 		/** Icon name for the start icon (before text) */
 		'start-icon'?: NLDDButton['startIcon'];
@@ -399,8 +403,8 @@ declare module 'vue' {
 	type NLDDButtonBarProps = {
 		/** Bar size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md'). At 'lg', icon-button children stack their label below the icon (mobile action-bar style). */
 		'size'?: NLDDButtonBar['size'];
-		/** Button variant (default: 'neutral-tinted') */
-		'variant'?: NLDDButtonBar['variant'];
+		/** Visual style of the buttons (default: 'neutral-tinted'; 'inherit-tinted' and 'inherit-filled' for a colored surface) */
+		'appearance'?: NLDDButtonBar['appearance'];
 		/** Disabled state */
 		'disabled'?: NLDDButtonBar['disabled'];
 	};
@@ -543,7 +547,7 @@ declare module 'vue' {
 		/** 'none' (fixed) | 'vertical' (drag) | 'auto' (grow, default) */
 		'resize'?: NLDDCodeEditor['resize'];
 		/** 'simple' (default, bare) | 'input-field' (framed surface) */
-		'variant'?: NLDDCodeEditor['variant'];
+		'appearance'?: NLDDCodeEditor['appearance'];
 		/** Highlight grammar (yaml, json, javascript, typescript, css, html, xml, bash, markdown, rust, gherkin, toml, sql, python). Empty disables highlighting. */
 		'language'?: NLDDCodeEditor['language'];
 		/** Show a line-number gutter */
@@ -567,7 +571,7 @@ declare module 'vue' {
 
 	type NLDDCodeViewerProps = {
 		/** Visual style. The two `box` values are a framed card with rounded corners, padding, fill, and a 1px border ring, and differ in which surface they fill with; `box-tinted` is the default. `simple` drops the entire frame — use when embedding inside a parent surface. */
-		'variant'?: NLDDCodeViewer['variant'];
+		'appearance'?: NLDDCodeViewer['appearance'];
 		/** Grammar to highlight with. Empty disables highlighting. */
 		'language'?: NLDDCodeViewer['language'];
 		/** Hide the copy-to-clipboard button (shown by default). */
@@ -638,10 +642,14 @@ declare module 'vue' {
 		'disabled'?: NLDDComboBox['disabled'];
 		/** Read-only state: the value stays readable, selectable and in the tab order, but the menu does not open and there is nothing to clear. The input drops its combobox role and the aria that goes with it, so assistive technology is not told about a list it cannot open. Use this where the value belongs to the record rather than to the form, e.g. the product an asset is an instance of. */
 		'readonly'?: NLDDComboBox['readonly'];
-		/** Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted. */
+		/** Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted. Typing an option's label in full picks that option, ignoring case and the spaces around it; with two such labels, the first one. */
 		'allow-custom'?: NLDDComboBox['allowCustom'];
-		/** Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted. */
+		/** Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted. Typing an option's label in full picks that option, ignoring case and the spaces around it; with two such labels, the first one. */
 		'allowCustom'?: NLDDComboBox['allowCustom'];
+		/** Leaves the options as they are while typing, for a list your server already filtered per keystroke. Without it the field hides options that do not contain the typed text, which also hides a server match on, say, an e-mail address. */
+		'no-filter'?: NLDDComboBox['noFilter'];
+		/** Leaves the options as they are while typing, for a list your server already filtered per keystroke. Without it the field hides options that do not contain the typed text, which also hides a server match on, say, an e-mail address. */
+		'noFilter'?: NLDDComboBox['noFilter'];
 		/** Input name for form submission */
 		'name'?: NLDDComboBox['name'];
 		/** Browser autofill hint. Default 'off' to prevent the native autofill panel from competing with the menu dropdown. Set to a valid token (e.g. 'country', 'organization') when browser autofill is desired. */
@@ -1247,8 +1255,8 @@ declare module 'vue' {
 	};
 
 	type NLDDIconButtonProps = {
-		/** Button variant: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted' | 'primary' | 'secondary' | 'destructive'. The inherit variants derive their colors from currentColor, for buttons on colored surfaces. */
-		'variant'?: NLDDIconButton['variant'];
+		/** Visual style, color included: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted' | 'primary' | 'secondary' | 'destructive'. The inherit appearances derive their colors from currentColor, for buttons on colored surfaces. */
+		'appearance'?: NLDDIconButton['appearance'];
 		/** Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md') */
 		'size'?: NLDDIconButton['size'];
 		/** In lg size, hides the text label and enlarges the icon by one step (28px) */
@@ -1257,11 +1265,15 @@ declare module 'vue' {
 		'hideLgText'?: NLDDIconButton['hideLgText'];
 		/** Loading state (default: false). Shows an activity indicator over the visually hidden icon, sets aria-busy on the inner control and blocks activation, without dropping the button from the tab order (unlike disabled). */
 		'loading'?: NLDDIconButton['loading'];
+		/** What the screen reader announces while `loading` is on, for a button that does more than load: "Aan het bewaren". Leave it out and the activity indicator says its translated "Laden". */
+		'loading-text'?: NLDDIconButton['loadingText'];
+		/** What the screen reader announces while `loading` is on, for a button that does more than load: "Aan het bewaren". Leave it out and the activity indicator says its translated "Laden". */
+		'loadingText'?: NLDDIconButton['loadingText'];
 		/** Disabled state */
 		'disabled'?: NLDDIconButton['disabled'];
-		/** Removes the per-variant highlight border (e.g. when a control group draws a single border instead). */
+		/** Removes the per-appearance highlight border (e.g. when a control group draws a single border instead). */
 		'no-highlight-border'?: NLDDIconButton['noHighlightBorder'];
-		/** Removes the per-variant highlight border (e.g. when a control group draws a single border instead). */
+		/** Removes the per-appearance highlight border (e.g. when a control group draws a single border instead). */
 		'noHighlightBorder'?: NLDDIconButton['noHighlightBorder'];
 		/** Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set) */
 		'type'?: NLDDIconButton['type'];
@@ -1465,7 +1477,7 @@ declare module 'vue' {
 		/** Size: 'sm' | 'md' | 'inherit' (default: 'md'). 'inherit' takes the font-size from the container; in the box variant the keycaps then scale along in em. */
 		'size'?: NLDDKeyboardShortcut['size'];
 		/** 'box' (default) shows each key as a keycap with a fill and a highlight edge. 'simple' shows the keys as plain text with separators: lighter, for inline use such as in a menu item. */
-		'variant'?: NLDDKeyboardShortcut['variant'];
+		'appearance'?: NLDDKeyboardShortcut['appearance'];
 		/** 'neutral' (default) uses the component colors of its own. 'inherit' lets the keys and separators follow the surrounding text color (currentColor), with a translucent contrast fill and highlight edge. Useful on a filled surface color or a highlighted row. */
 		'color'?: NLDDKeyboardShortcut['color'];
 		/** Show on touch-only devices too, where shortcuts cannot be invoked. */
@@ -1509,7 +1521,7 @@ declare module 'vue' {
 
 	type NLDDListProps = {
 		/** Visual style (default 'simple'): `simple` is a plain vertical strip with no chrome, the two `box` values a framed card with rounded corners, fill and inset border ring. `box-tinted` for a list on a plain page, `box-base` for one on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card) */
-		'variant'?: NLDDList['variant'];
+		'appearance'?: NLDDList['appearance'];
 		/** A11y role and behavior (default 'list'). See the docblock above. */
 		'type'?: NLDDList['type'];
 		/** When to draw the lines between the items (default 'always'). `on-touch` draws them only where the primary input is touch, under `(pointer: coarse)`: a pointer has the hover highlight to tell one row from the next and a finger has nothing, so the line earns its place in the one case and is clutter in the other. `never` hides them everywhere */
@@ -1734,7 +1746,7 @@ declare module 'vue' {
 		'shortcutMac'?: NLDDMenuItem['shortcutMac'];
 		/** Optional link target. A plain button item with an href renders as an `<a>` so it is a real link (middle-click, open in new tab, copy link). Ignored for submenu openers, checkbox/radio items, and while disabled. */
 		'href'?: NLDDMenuItem['href'];
-		/** Item type: 'button' | 'checkbox' | 'radio'. Default: 'button'. */
+		/** Item type: 'button' | 'checkbox' | 'radio'. Default: 'button'. One checkbox or radio item gives every item in its menu the check-mark column, so the text of the whole menu starts at one line, as in a native menu. Submenus decide for themselves. */
 		'type'?: NLDDMenuItem['type'];
 		/** Selected state for checkbox and radio types. */
 		'selected'?: NLDDMenuItem['selected'];
@@ -1756,6 +1768,8 @@ declare module 'vue' {
 		'shortcutLinux'?: NLDDMenuItem['shortcutLinux'];
 		/** Which menu owns this item, set by that nldd-menu. Not part of the public API. `null` until one claims it, and an unclaimed item carries no menu role. A menu role is a promise about what is around you, so an item cannot make it on its own. `nldd-toolbar-item` holds exactly such an item: the declaration of what belongs in the overflow menu, which the toolbar clones into the real menu when it collapses. The clone is claimed there and the declaration stays what it is. */
 		'menuVariant'?: NLDDMenuItem['menuVariant'];
+		/** Whether this item keeps the check-mark column free without being checkable, because another item in its menu is. Set by that nldd-menu. Not part of the public API. */
+		'checkColumn'?: NLDDMenuItem['checkColumn'];
 		'onMenuItemFocused'?: (event: CustomEvent) => void;
 		'onSubmenuOpen'?: (event: CustomEvent) => void;
 		/** Fired when the item is clicked and not disabled. */
@@ -2180,7 +2194,7 @@ declare module 'vue' {
 
 	type NLDDProgressBarProps = {
 		/** Semantics for ARIA and visualization (default: 'progress') */
-		'mode'?: NLDDProgressBar['mode'];
+		'variant'?: NLDDProgressBar['variant'];
 		/** Total value (default: 100) */
 		'max'?: NLDDProgressBar['max'];
 		/** Single-segment shorthand (ignored when segment children are present) */
@@ -2228,7 +2242,7 @@ declare module 'vue' {
 
 	type NLDDProgressCircleProps = {
 		/** Semantics for ARIA and gap behavior (default: 'progress') */
-		'mode'?: NLDDProgressCircle['mode'];
+		'variant'?: NLDDProgressCircle['variant'];
 		/** Total value (default: 100) */
 		'max'?: NLDDProgressCircle['max'];
 		/** Single-segment shorthand (ignored when segment children exist) */
@@ -2415,6 +2429,8 @@ declare module 'vue' {
 		'invalid'?: NLDDSegmentedControl['invalid'];
 		/** Selected value for radio type */
 		'value'?: NLDDSegmentedControl['value'];
+		/** Visual style, color included: 'neutral-tinted' | 'neutral-base' (default: 'neutral-tinted'). neutral-base is for a tinted surface. For a quiet row without a track, use nldd-toggle-button-group with type="radio" and a transparent appearance. */
+		'appearance'?: NLDDSegmentedControl['appearance'];
 		/** Control size: 'sm' | 'md' | 'lg' (default: 'md') */
 		'size'?: NLDDSegmentedControl['size'];
 		/** Selection mode: 'radio' | 'checkbox' (default: 'radio'). */
@@ -2451,6 +2467,8 @@ declare module 'vue' {
 		'selected'?: NLDDSegmentedControlItem['selected'];
 		/** Disabled state */
 		'disabled'?: NLDDSegmentedControlItem['disabled'];
+		/** Visual style: 'neutral-tinted' | 'neutral-base' (default: 'neutral-tinted'). Set by nldd-segmented-control. */
+		'appearance'?: NLDDSegmentedControlItem['appearance'];
 		/** Control size: 'sm' | 'md' | 'lg' (default: 'md'). Set by nldd-segmented-control. */
 		'size'?: NLDDSegmentedControlItem['size'];
 		/** Content type: 'text' | 'icon' | 'icon-and-text' (default: 'text'). Set by nldd-segmented-control. */
@@ -2643,8 +2661,8 @@ declare module 'vue' {
 	type NLDDSplitButtonProps = {
 		/** Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md') */
 		'size'?: NLDDSplitButton['size'];
-		/** Button variant (default: 'neutral-tinted') */
-		'variant'?: NLDDSplitButton['variant'];
+		/** Visual style (default: 'neutral-tinted'; 'inherit-tinted' and 'inherit-filled' for a colored surface) */
+		'appearance'?: NLDDSplitButton['appearance'];
 		/** Disabled state */
 		'disabled'?: NLDDSplitButton['disabled'];
 		/** Width mode: 'full' (stretches to container) or any CSS length; the main action button fills the available space */
@@ -2982,6 +3000,10 @@ declare module 'vue' {
 		'readonly'?: NLDDTextEditor['readonly'];
 		/** Required state */
 		'required'?: NLDDTextEditor['required'];
+		/** Turns spellchecking off. It is on by default, like the other text fields, and leaves out what is not running text: inline code and code blocks, the address of a link and a bare URL (the link text is checked), and mentions. Autocorrect and autocapitalize follow the user's own settings, as in the other fields, also with `no-spellcheck`. Two limits come from the browser: text that was already there is checked once you edit near it, not when the editor opens (the editor lives in a shadow root; Firefox only checks around the caret), and markup that changes how a line is built, such as starting a list item, hides the underlines on that line until you type on. */
+		'no-spellcheck'?: NLDDTextEditor['noSpellcheck'];
+		/** Turns spellchecking off. It is on by default, like the other text fields, and leaves out what is not running text: inline code and code blocks, the address of a link and a bare URL (the link text is checked), and mentions. Autocorrect and autocapitalize follow the user's own settings, as in the other fields, also with `no-spellcheck`. Two limits come from the browser: text that was already there is checked once you edit near it, not when the editor opens (the editor lives in a shadow root; Firefox only checks around the caret), and markup that changes how a line is built, such as starting a list item, hides the underlines on that line until you type on. */
+		'noSpellcheck'?: NLDDTextEditor['noSpellcheck'];
 		/** Wrap long lines (default true; prose wraps) */
 		'wrap'?: NLDDTextEditor['wrap'];
 		/** Minimum visible rows (the floor in every resize mode). Default: 6. */
@@ -2989,7 +3011,7 @@ declare module 'vue' {
 		/** 'none' (fixed) | 'vertical' (drag) | 'auto' (grow, default) */
 		'resize'?: NLDDTextEditor['resize'];
 		/** 'simple' (default, bare) | 'input-field' (framed surface) */
-		'variant'?: NLDDTextEditor['variant'];
+		'appearance'?: NLDDTextEditor['appearance'];
 		/** Accessible label forwarded to the editor. Set automatically by nldd-form-field. */
 		'accessible-label'?: NLDDTextEditor['accessibleLabel'];
 		/** Accessible label forwarded to the editor. Set automatically by nldd-form-field. */
@@ -3002,6 +3024,10 @@ declare module 'vue' {
 		'invalid'?: NLDDTextEditor['invalid'];
 		/** Consumer-supplied */
 		'mentionSource'?: NLDDTextEditor['mentionSource'];
+		/** What may follow the `@` of a mention, as a regular expression without anchors or capturing groups. Property only. Without it: letters with any accent, digits, `_`, `.`, `+` and `-`. Allow one space to search on a full name: `'[\\p{L}\\p{M}\\p{N}_.+-]*(?: [\\p{L}\\p{M}\\p{N}_.+-]+)?'`. */
+		'mentionQuery'?: NLDDTextEditor['mentionQuery'];
+		/** What to say when the */
+		'mentionEmptyText'?: NLDDTextEditor['mentionEmptyText'];
 		/** Your own typeahead lists next to the */
 		'typeaheads'?: NLDDTextEditor['typeaheads'];
 		/** Consumer-supplied annotations (W3C-style overlay). Property only (set via JS). Render only when `annotatable` is on. The text stays clean; these render as a light tint and a count badge, anchored by offset and mapped through edits. IMPORTANT: assign a NEW array to apply changes. Lit dirty-checks this property by identity, so mutating the existing array in place (`editor.annotations.push(next)`, `editor.annotations[0].end = 9`, …) does NOT trigger a re-render. Always replace it: `editor.annotations = [...editor.annotations, next]`. */
@@ -3164,16 +3190,16 @@ declare module 'vue' {
 
 	type NLDDTimelineTrackCellProps = {
 		/** What stands in the lane: a whole dot (`major`, the default), a smaller one for a row that belongs under the one above it (`minor`), or nothing at all (`none`) for a row that carries what a step holds rather than being a step. A `none` row keeps its `size` and its `status`, so it stays in the same lane and the track runs on in the right color */
-		'variant'?: NLDDTimelineTrackCell['variant'];
+		'level'?: NLDDTimelineTrackCell['level'];
 		/** How far along this row is (default 'past'); the same values as `nldd-step-indicator-item`. It colors the dot and the track around it: covered above where you are, still ahead below */
 		'status'?: NLDDTimelineTrackCell['status'];
 		/** How wide the lane is and so how big the dot: `sm` (default, 16px) for a timeline of events, `md` (24px) where a number or an icon has to fit. Every row in one list takes the same size, or the track jumps */
 		'size'?: NLDDTimelineTrackCell['size'];
 		/** The direction the timeline moves forward in: `down` (default) puts the past above, `up` below. Only the current step has half a track, so this only has an effect there */
 		'direction'?: NLDDTimelineTrackCell['direction'];
-		/** Place in the series (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `variant="none"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it */
+		/** Place in the series (default 'between'): decides whether the line continues above the dot, below it, or on both sides. `only` is the single row in the series and gets a line on neither side: a track of one dot leads nowhere. On a `level="none"` row, which is nothing but line, `only` leaves it out altogether: the track ends above it */
 		'position'?: NLDDTimelineTrackCell['position'];
-		/** Which halves of the track you have covered, when `status` and `direction` get it wrong (default 'auto', which is what those two say). The halves you name are drawn as covered and the other one as still ahead, so `none` covers neither. Which halves are drawn at all stays with `position`, except that naming a half draws it: `line="both"` on a `first` row draws one above too. A row that opens a group of its own is the case for `both`, since the going carries on below it. A `variant="none"` row has one line rather than two halves, and no point where a fill could change over, so there the status colors the whole of it and `line` overrules the whole of it. On a `current` row that leans the way the timeline runs: what belongs to a point usually comes after it, so going `down` the stretch reads as still ahead and going `up` as behind you */
+		/** Which halves of the track you have covered, when `status` and `direction` get it wrong (default 'auto', which is what those two say). The halves you name are drawn as covered and the other one as still ahead, so `none` covers neither. Which halves are drawn at all stays with `position`, except that naming a half draws it: `line="both"` on a `first` row draws one above too. A row that opens a group of its own is the case for `both`, since the going carries on below it. A `level="none"` row has one line rather than two halves, and no point where a fill could change over, so there the status colors the whole of it and `line` overrules the whole of it. On a `current` row that leans the way the timeline runs: what belongs to a point usually comes after it, so going `down` the stretch reads as still ahead and going `up` as behind you */
 		'line'?: NLDDTimelineTrackCell['line'];
 		/** Number or short text in the dot */
 		'text'?: NLDDTimelineTrackCell['text'];
@@ -3262,6 +3288,8 @@ declare module 'vue' {
 		'required'?: NLDDToggleButton['required'];
 		/** What the button is: a button with aria-pressed, a native checkbox, or a radio (default: 'button') */
 		'type'?: NLDDToggleButton['type'];
+		/** Visual style, color included (default: 'neutral-tinted'). Selected is filled in each of them; the transparent ones are for a toggle among transparent buttons, and with a selected-icon they stay quiet when on. */
+		'appearance'?: NLDDToggleButton['appearance'];
 		/** Button size (default: 'md') */
 		'size'?: NLDDToggleButton['size'];
 		/** Selected state */
@@ -3280,6 +3308,10 @@ declare module 'vue' {
 		'text'?: NLDDToggleButton['text'];
 		/** Icon name for nldd-icon */
 		'icon'?: NLDDToggleButton['icon'];
+		/** Icon shown instead of `icon` while selected, such as `check-mark` for `plus` or `heart-filled` for `heart`. The appearances with a surface fill it when on, as without one. The transparent appearances have no surface to fill: with a selected-icon they stay quiet when on and the change of shape says it is on; without one they fill, so the state always shows. */
+		'selected-icon'?: NLDDToggleButton['selectedIcon'];
+		/** Icon shown instead of `icon` while selected, such as `check-mark` for `plus` or `heart-filled` for `heart`. The appearances with a surface fill it when on, as without one. The transparent appearances have no surface to fill: with a selected-icon they stay quiet when on and the change of shape says it is on; without one they fill, so the state always shows. */
+		'selectedIcon'?: NLDDToggleButton['selectedIcon'];
 		/** What renders: text, icon, or both. Unset → auto-detect from text/icon attributes. */
 		'variant'?: NLDDToggleButton['variant'];
 		/** Accessible label; required for icon-only usage */
@@ -3302,6 +3334,8 @@ declare module 'vue' {
 		'type'?: NLDDToggleButtonGroup['type'];
 		/** Forwarded to all buttons */
 		'name'?: NLDDToggleButtonGroup['name'];
+		/** Forwarded to all buttons (default: 'neutral-tinted') */
+		'appearance'?: NLDDToggleButtonGroup['appearance'];
 		/** Forwarded to all buttons (default: 'md') */
 		'size'?: NLDDToggleButtonGroup['size'];
 		/** Disables all buttons */
@@ -3358,10 +3392,14 @@ declare module 'vue' {
 		'accessible-label'?: NLDDTokenField['accessibleLabel'];
 		/** Accessible label forwarded as aria-label to the input */
 		'accessibleLabel'?: NLDDTokenField['accessibleLabel'];
-		/** Allow free-typed values (not just menu options) */
+		/** Allow free-typed values (not just menu options). Typing an option's label in full adds that option, with its value, ignoring case and the spaces around it; with two such labels, the first one. */
 		'allow-custom'?: NLDDTokenField['allowCustom'];
-		/** Allow free-typed values (not just menu options) */
+		/** Allow free-typed values (not just menu options). Typing an option's label in full adds that option, with its value, ignoring case and the spaces around it; with two such labels, the first one. */
 		'allowCustom'?: NLDDTokenField['allowCustom'];
+		/** Leaves the options as they are while typing, for a list your server already filtered per keystroke. Without it the field hides options that do not contain the typed text, which also hides a server match on, say, an e-mail address. */
+		'no-filter'?: NLDDTokenField['noFilter'];
+		/** Leaves the options as they are while typing, for a list your server already filtered per keystroke. Without it the field hides options that do not contain the typed text, which also hides a server match on, say, an e-mail address. */
+		'noFilter'?: NLDDTokenField['noFilter'];
 		/** Marks the field valid (shows the valid icon) */
 		'valid'?: NLDDTokenField['valid'];
 		/** Marks the field invalid (shows the invalid icon) */
@@ -3676,19 +3714,19 @@ declare module 'vue' {
 		/** A single entry in an `nldd-breadcrumbs` list. Renders as a link when `href` is set, as plain text marked `aria-current="page"` when `current` is set, and as plain text otherwise. Each item renders its own trailing `›` separator; the last item in the list hides it via `:host(:last-of-type)`. */
 		'nldd-breadcrumbs-item': DefineComponent<NLDDBreadcrumbsItemProps>;
 		'nldd-button': DefineComponent<NLDDButtonProps>;
-		/** A horizontal container for grouping buttons with a neutral background. Automatically propagates its size and variant to all child nldd-button and nldd-icon-button elements. Renders nldd-button-bar-divider elements as internal dividers — no separate component needed. */
+		/** A horizontal container for grouping buttons with a neutral background. Automatically propagates its size and appearance to all child nldd-button and nldd-icon-button elements. Renders nldd-button-bar-divider elements as internal dividers — no separate component needed. The bar is one surface for actions; on/off buttons do not go in it. For a row of toggles use nldd-toggle-button-group, and for one choice out of a few options on one surface nldd-segmented-control. An nldd-toggle-button placed here is shown as it is, and a warning says so in development. */
 		'nldd-button-bar': DefineComponent<NLDDButtonBarProps>;
 		'nldd-button-bar-divider': DefineComponent<anonymous_0Props>;
 		/** A container for grouping related buttons together, in a row or stacked. `auto`, the default, is a row on a container wide enough for one and a stack over the full width below the sm breakpoint, where two labels beside each other leave no room for either. The group is its own container, so it follows the width it was given rather than the width of the window: the same group is a row in a page and a stack in a sheet beside it. Being a container has one consequence to know: the width has to come from the parent, since a container may not size itself from what is inside it. In a parent that shrink-wraps its content (an inline-flex box, a float, a table cell, a flex item at `width: auto`) the group measures zero and its buttons are invisible. It says so once in development. Give the group or that parent a width. A stack fills the width with its buttons, except an `nldd-icon-button`, which keeps its own size: a bar with a single glyph in the middle is not a bigger target, only a wider one. */
 		'nldd-button-group': DefineComponent<NLDDButtonGroupProps>;
-		/** A visually bounded card with optional header, body and footer sections. The card is elevated by default. Padding is left to nested containers. With `href` the whole card becomes a link (an overlay anchor across the card), with `button` a button (an overlay button that fires a plain, composed `click`, so a click listener or htmx attribute on the card itself works directly, and Enter/Space work natively). `href` wins when both are set. Nested interactive content, footer buttons for instance, has to be lifted above it with `position: relative; z-index: 1` to stay clickable. */
+		/** A visually bounded card with optional header, body and footer sections. The card is elevated by default. Padding is left to nested containers. With `href` the whole card becomes a link (an overlay anchor across the card), with `button` a button (an overlay button that fires a plain, composed `click`, so a click listener or htmx attribute on the card itself works directly, and Enter/Space work natively). `href` wins when both are set. Nested interactive content, footer buttons for instance, has to be lifted above it with `position: relative; z-index: 1` to stay clickable. A card that is a link or button steps its surface and border one shade up on hover and one more while pressed, as a neutral-base button does; content lifted above the overlay does not set it off. */
 		'nldd-card': DefineComponent<NLDDCardProps>;
 		/** A generic cell for wrapping arbitrary content in a list item. Controls vertical alignment and sizing without imposing content opinions. For more than a line of text, such as paragraphs or markup, put an `nldd-rich-text` in it rather than loose text in the row. `vertical-alignment="center"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment="top"`. */
 		'nldd-cell': DefineComponent<NLDDCellProps>;
 		'nldd-checkbox': DefineComponent<NLDDCheckboxProps>;
 		/** A checkbox with an inline label for use in forms. Form-associated: participates in native form submission under `name` with `value` when checked (the inner nldd-checkbox sits in the shadow root and never joins the consumer's form; the field submits on its behalf). */
 		'nldd-checkbox-field': DefineComponent<NLDDCheckboxFieldProps>;
-		/** A monospace editor for code, YAML, JSON and other technical content, built on CodeMirror 6 (via NLDDCodeMirrorElement). Visually pairs with nldd-code-viewer for a matching read-only surface. Default `variant="simple"` is a bare, flush editor (no frame, no focus ring) for use inside an nldd-form-field or a consumer composition that owns its own chrome and focus treatment; the caret is rendered as a prominent accent as the focus cue. `variant="input-field"` adds the framed surface (border ring, tinted fill, inner padding, radius) and a focus ring for standalone use. The simple variant has no surrounding space of its own: let a layout container own the spacing and forward clicks with `focusFromPoint()` so clicking the padding still starts editing. Optional `language` enables lazy syntax highlighting; `line-numbers` adds a gutter (click a number to move the caret to that line). */
+		/** A monospace editor for code, YAML, JSON and other technical content, built on CodeMirror 6 (via NLDDCodeMirrorElement). Visually pairs with nldd-code-viewer for a matching read-only surface. Default `appearance="simple"` is a bare, flush editor (no frame, no focus ring) for use inside an nldd-form-field or a consumer composition that owns its own chrome and focus treatment; the caret is rendered as a prominent accent as the focus cue. `appearance="input-field"` adds the framed surface (border ring, tinted fill, inner padding, radius) and a focus ring for standalone use. The simple variant has no surrounding space of its own: let a layout container own the spacing and forward clicks with `focusFromPoint()` so clicking the padding still starts editing. Optional `language` enables lazy syntax highlighting; `line-numbers` adds a gutter (click a number to move the caret to that line). */
 		'nldd-code-editor': DefineComponent<NLDDCodeEditorProps>;
 		/** A read-only block of code/text built on a non-editable CodeMirror 6 view. Visually pairs with nldd-code-editor (same engine, same token palette). Whitespace is preserved; long lines scroll horizontally by default. Set `wrap` to break long lines onto the next visual line. Set `language` to one of the supported grammars (yaml, json, javascript, typescript, css, html, xml, bash, markdown, rust, gherkin, toml, sql, python) to highlight the content. Without `language` the content renders plain. Grammars are loaded lazily on first use, so a page that never sets `language` ships zero grammar code. Token colors are the `--components-code-viewer-token-*` custom properties (shared with the editor via the CodeMirror highlight style). Override them per-instance to swap the theme. */
 		'nldd-code-viewer': DefineComponent<NLDDCodeViewerProps>;
@@ -3717,7 +3755,7 @@ declare module 'vue' {
 		'nldd-file-field': DefineComponent<NLDDFileFieldProps>;
 		/** Nederlandse Digitale Dienst Form Component Plain custom element (extends HTMLElement, no Lit), required for light-DOM autofill. Renders a real <form> element in the LIGHT DOM around its children. Chrome's autofill engine looks for native <input> elements that have a <form> ancestor in the light DOM; with shadow-DOM inputs it can't find them, so we keep this component shadow-less. **Differs from other nldd-* components:** - No shadowRoot: all children live in the light DOM (inside the inner <form>) - No Lit: a plain HTMLElement with manual attribute mirroring - **Requires a global stylesheet import**: the vertical rhythm rules live in `dist/css/form.css` (or `global.css`), not in a component-specific shadow stylesheet. Import it as part of your app's global CSS bundle. **When a field turns red:** on submit the form marks every control the browser rejects with `invalid`, and clears it again once the value passes. Setting `invalid` yourself is fine, but do it on submit, not while someone is still typing, or a field turns red over a value that is not finished yet. **Two usage modes:** 1. **Auto-wrap** (default): write children directly. Component creates a `<form>` element and migrates children into it via MutationObserver. Simplest API. 2. **User-provided form** (framework-friendly): write your own `<form>` as direct child. Component detects it, takes over attribute mirroring, and skips the migration. Children stay where your framework puts them, so there is no DOM shuffling to conflict with React/Vue/Angular reconciliation. **Framework interop:** In auto-wrap mode every direct child is moved into the inner form through a MutationObserver. That works fine for most React/Vue use cases, because frameworks only mutate the DOM when their virtual DOM changes. For edge cases (animation libraries that track DOM position, SSR hydration mismatches, frameworks that actively check sibling positions) use **user-provided form** mode instead. For programmatic manipulation, use the `form` getter so you work with the inner `<form>` element directly: const inner = document.querySelector('nldd-form').form; inner.checkValidity(); inner.appendChild(myInput); // skips the migration overhead */
 		'nldd-form': DefineComponent<NLDDFormProps>;
-		/** A layout wrapper for the action buttons at the bottom of a form (typically a submit button or a button group). Follows the same responsive layout as `nldd-form-field`: with `label-alignment="right"` or `"left"` the content gets the same indent as the fields above it, thanks to a `::before` pseudo-element that acts as the spacer column where the label would sit. Inherits `label-alignment` automatically from a wrapping `<nldd-form>`: the form propagates its own `label-alignment` as `form-label-alignment` to descendant `nldd-form-actions` (and `nldd-form-field`) through a MutationObserver. An explicit `label-alignment` on the form-actions itself wins through the CSS cascade, and the form code never touches the `label-alignment` attribute of the descendant. <nldd-form label-alignment="right"> <nldd-form-field>...</nldd-form-field> <nldd-form-actions> <nldd-button-group> <nldd-button variant="primary" type="submit" text="Bewaar"></nldd-button> </nldd-button-group> </nldd-form-actions> </nldd-form> */
+		/** A layout wrapper for the action buttons at the bottom of a form (typically a submit button or a button group). Follows the same responsive layout as `nldd-form-field`: with `label-alignment="right"` or `"left"` the content gets the same indent as the fields above it, thanks to a `::before` pseudo-element that acts as the spacer column where the label would sit. Inherits `label-alignment` automatically from a wrapping `<nldd-form>`: the form propagates its own `label-alignment` as `form-label-alignment` to descendant `nldd-form-actions` (and `nldd-form-field`) through a MutationObserver. An explicit `label-alignment` on the form-actions itself wins through the CSS cascade, and the form code never touches the `label-alignment` attribute of the descendant. <nldd-form label-alignment="right"> <nldd-form-field>...</nldd-form-field> <nldd-form-actions> <nldd-button-group> <nldd-button appearance="primary" type="submit" text="Bewaar"></nldd-button> </nldd-button-group> </nldd-form-actions> </nldd-form> */
 		'nldd-form-actions': DefineComponent<NLDDFormActionsProps>;
 		/** A field around one input: its label, supporting label, optional badge, validation and help text. It finds the input among its children, hands it the label as its accessible name and gives it an id, so you write no `for` or `id` yourself. Mark the optional fields with `optional`, not the required ones; the design guidelines say why. Put the requirements on a value in an nldd-validation-list inside the same field. What only your server knows, such as a password found in a breach, the app names in `unmet` on the input itself: see nldd-validation-list. */
 		'nldd-form-field': DefineComponent<NLDDFormFieldProps>;
@@ -3790,10 +3828,10 @@ declare module 'vue' {
 		'nldd-password-field': DefineComponent<NLDDPasswordFieldProps>;
 		/** A non-modal floating panel anchored to a trigger element. Built on the native Popover API (popover="auto") with Floating UI for positioning. The browser handles opening, toggling and light dismiss; this component only handles positioning and focus. The recommended use is through popovertarget, so the browser owns the toggle: <nldd-button id="info-trigger" popovertarget="info-popover">Info</nldd-button> <nldd-popover id="info-popover" anchor="info-trigger" accessible-label="Info"> <nldd-container> <p>Content of the popover.</p> </nldd-container> </nldd-popover> To open it from your own state instead, bind `open` together with the close event: the popover clears `open` itself on light dismiss, Escape or a click on its anchor. It needs that anchor to open against. For a custom focus target inside the popover, put `autofocus` on the child you want. Without it the popover host itself takes focus. */
 		'nldd-popover': DefineComponent<NLDDPopoverProps>;
-		/** Exports both NLDDProgressBar and NLDDProgressBarSegmentIndicator. A progress bar that supports a single value (loading-style) or multiple segments (multi-stage progress, or distribution like storage usage). The consumer provides raw values; the component computes percentages from `max`. Two modes: - `progress` (default): segments sum toward `max`; remaining space is empty track. ARIA reads "X% voltooid". - `distribution`: segments fill the bar; ARIA enumerates segments. If the sum of segment values exceeds `max`, segments are normalized proportionally to fit and a warning is logged. */
+		/** Exports both NLDDProgressBar and NLDDProgressBarSegmentIndicator. A progress bar that supports a single value (loading-style) or multiple segments (multi-stage progress, or distribution like storage usage). The consumer provides raw values; the component computes percentages from `max`. Two variants: - `progress` (default): segments sum toward `max`; remaining space is empty track. ARIA reads "X% voltooid". - `distribution`: segments fill the bar; ARIA enumerates segments. If the sum of segment values exceeds `max`, segments are normalized proportionally to fit and a warning is logged. */
 		'nldd-progress-bar': DefineComponent<NLDDProgressBarProps>;
 		'nldd-progress-bar-segment-indicator': DefineComponent<NLDDProgressBarSegmentIndicatorProps>;
-		/** Exports both NLDDProgressCircle and NLDDProgressCircleSegmentIndicator. A circular progress indicator that mirrors the API of nldd-progress-bar: single-value or multi-segment, progress or distribution mode, 24 colors, fade transitions between determinate/indeterminate, indeterminate indicator. Visual differences vs the bar: - SVG arcs instead of rectangular bars. - Label below the circle (not above). - No center text; the consumer can wrap the circle if needed. - One combined tooltip on the whole circle showing all segment info (no per-segment tooltips). - Indeterminate uses a rotating elastic arc (Material-style) instead of the bar's Knight Rider scanner. */
+		/** Exports both NLDDProgressCircle and NLDDProgressCircleSegmentIndicator. A circular progress indicator that mirrors the API of nldd-progress-bar: single-value or multi-segment, progress or distribution variant, 24 colors, fade transitions between determinate/indeterminate, indeterminate indicator. Visual differences vs the bar: - SVG arcs instead of rectangular bars. - Label below the circle (not above). - No center text; the consumer can wrap the circle if needed. - One combined tooltip on the whole circle showing all segment info (no per-segment tooltips). - Indeterminate uses a rotating elastic arc (Material-style) instead of the bar's Knight Rider scanner. */
 		'nldd-progress-circle': DefineComponent<NLDDProgressCircleProps>;
 		'nldd-progress-circle-segment-indicator': DefineComponent<NLDDProgressCircleSegmentIndicatorProps>;
 		/** WAI-ARIA: put the buttons of one group in a container with role="radiogroup" and a name of its own. A screen reader counts the options from that container, so a bare <fieldset> (which is a group, not a radiogroup) leaves them uncounted. nldd-radio-button-group does this for you. Radio buttons with the same name, in the same form and the same tree, form one group the way native radios do: checking one unchecks the others, the arrow keys move between them, Tab stops at the group once, and a screen reader hears each one's place in it. The element itself is the radio, because an input per shadow root would leave every button a group of one. The shape is all this component draws. A radio with a label beside it is nldd-radio-button-field. <fieldset role="radiogroup" aria-labelledby="options-label"> <legend id="options-label">Kies een optie</legend> <nldd-radio-button name="options" value="1" accessible-label="Optie 1"></nldd-radio-button> <nldd-radio-button name="options" value="2" accessible-label="Optie 2"></nldd-radio-button> </fieldset> */
@@ -3855,26 +3893,26 @@ declare module 'vue' {
 		'nldd-text': DefineComponent<NLDDTextProps>;
 		/** A cell component for displaying text content in lists with configurable alignment, size and color. This is the most fundamental list cell component. `vertical-alignment="center"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment="top"`. Each text region (overline, main text, supporting text) accepts either a string attribute or slotted DOM content. The slot is the source of truth: if the consumer provides slotted content, it replaces the attribute-based render for that region. Use slots when you need inline elements like `<nldd-tag>`, `<a>` or `<nldd-icon>` mixed with text. Note that `query` highlighting and `**bold**` parsing only apply to the attribute path — slotted content is rendered as-is. */
 		'nldd-text-cell': DefineComponent<NLDDTextCellProps>;
-		/** 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 Headless: there is no built-in toolbar. A consumer drives formatting via the command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/ toggleHeading/toggleBulletList/toggleTaskList/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 inline toggle wraps the selected text (whitespace at its edges stays outside the markers), unwraps a run the caret is in, and with the caret at the very end of a run steps out of it. Bold that a typed space has broken (`**woord **`) keeps its styling while the caret is inside; the space moves outside the markers when the caret leaves. insertAtCursor(text) puts text at the caret and replaceRange(from, to, text) writes at the same clean offsets getSelection() reads. An @-mention typeahead (mentionSource) collapses to an atomic token, further typeahead lists on their own trigger (typeaheads) write what you tell them to, and a W3C-style annotation overlay (annotations) marks ranges with a dashed underline, light tint and a count badge without touching the underlying text. */
+		/** 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 `appearance="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. `appearance="input-field"` adds a framed surface + focus Headless: there is no built-in toolbar. A consumer drives formatting via the command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/ toggleHeading/toggleBulletList/toggleTaskList/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 inline toggle wraps the selected text (whitespace at its edges stays outside the markers), unwraps a run the caret is in, and with the caret at the very end of a run steps out of it. Bold that a typed space has broken (`**woord **`) keeps its styling while the caret is inside; the space moves outside the markers when the caret leaves. insertAtCursor(text) puts text at the caret and replaceRange(from, to, text) writes at the same clean offsets getSelection() reads. An @-mention typeahead (mentionSource) collapses to an atomic token, further typeahead lists on their own trigger (typeaheads) write what you tell them to, 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>;
 		/** A text field for a time. The value is always 24-hour `HH:mm`, which is how Dutch shows it too, so unlike nldd-date-field there is nothing to convert. Typing is not masked: input is accepted generously and normalized only when the field is left. Error messages belong to nldd-form-field, not here. This field reflects only `invalid` / `valid`, like nldd-text-field. What you do in the picker is a preview until you leave it. The field shows the time right away but commits it on close. "Klaar" and Enter keep the choice, and so does a click outside once you have picked something. Cancel and Escape put the old time back. On an empty field the wheels open at `min`, or otherwise at the current time rounded to `step`, which does not fill in the field yet. */
 		'nldd-time-field': DefineComponent<NLDDTimeFieldProps>;
 		/** Two columns, hours and minutes, that slide like a wheel past the selection in the middle. The component works on its own (inline on a page, in a filter panel) and also sits in the popover of nldd-time-field. Values are always 24-hour `HH:mm`. Scrolling is choosing: whatever comes to rest in the middle is the value. The keyboard drives that same selection, because that is what a wheel is: hour and minute are each a spinbutton. The columns underneath are aria-hidden, so the same values are not read out twice. */
 		'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. By default the cell is a bare track: a line with a dot per row, for a timeline of events. With `variant="step"` the dot grows big enough for a number or an icon and you have a list of steps under each other, the vertical counterpart of `nldd-step-indicator`. The size belongs to the variant rather than to the content: every dot in a list is the same size, or the track would jump. */
+		/** 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. By default the cell is a bare track: a line with a dot per row, for a timeline of events. With `size="md"` the dot grows big enough for a number or an icon and you have a list of steps under each other, the vertical counterpart of `nldd-step-indicator`. The size belongs to the lane rather than to the content: every dot in a list is the same size, or the track would jump. */
 		'nldd-timeline-track-cell': DefineComponent<NLDDTimelineTrackCellProps>;
 		/** A title bar with an optional overline, title, and supporting text on the left, and a slot at the end of the title line on the right. The title comes from `text`, with `heading-level` for its place in the heading structure. `size` is how it looks, `heading-level` what it is, and the two are set apart. `overline` and `supporting-text` go above and below it. Each of the three has a slot in the same place for content that is more than text, and a filled slot takes the place of the attribute. */
 		'nldd-title': DefineComponent<NLDDTitleProps>;
 		/** A cell component for displaying a title with optional overline and supporting text in lists. `vertical-alignment="center"` (default) stretches the cell to fill the full row height and centers its content within that space. Use `min-height` to set a minimum centered region. For strict top alignment without a minimum height, use `vertical-alignment="top"`. Each text region (overline, title, supporting text) accepts either a string attribute or slotted DOM content. The slot is the source of truth: if the consumer provides slotted content, it replaces the attribute-based render for that region. Use slots when you need inline elements like `<nldd-tag>`, `<nldd-icon>` or other components mixed with text. Note that `query` highlighting and `**bold**` parsing only apply to the attribute path — slotted content is rendered as-is. */
 		'nldd-title-cell': DefineComponent<NLDDTitleCellProps>;
-		/** A selectable button that toggles between selected and unselected. Available as a button (aria-pressed), a checkbox, or a radio. In radio mode the button itself is the radio: it carries the role, the state and its place in the group. A native radio in a shadow root of its own would be a group of one, counted as "1 of 1" and stopped at by Tab. */
+		/** A selectable button that toggles between selected and unselected. Available as a button (aria-pressed), a checkbox, or a radio. The label stays the same in both states: the state is in aria-pressed (or checked) and in the fill, so a screen reader says "Favoriet, pressed". A label that changes with the state ("Volgen", then "Ontvolgen") says what the button does next; that is an nldd-button whose text you change, not a toggle. In radio mode the button itself is the radio: it carries the role, the state and its place in the group. A native radio in a shadow root of its own would be a group of one, counted as "1 of 1" and stopped at by Tab. */
 		'nldd-toggle-button': DefineComponent<NLDDToggleButtonProps>;
-		/** Groups nldd-toggle-button elements and manages selection, keyboard navigation, and forwarding of type, name, size, and disabled state to all buttons. For type="radio" (single-select), arrow keys navigate between buttons and automatically select the focused one. For type="checkbox" (multi-select), multiple buttons can be selected simultaneously. */
+		/** Groups nldd-toggle-button elements and manages selection, keyboard navigation, and forwarding of type, name, appearance, size, and disabled state to all buttons. For type="radio" (single-select), arrow keys navigate between buttons and automatically select the focused one. For type="checkbox" (multi-select), multiple buttons can be selected simultaneously. */
 		'nldd-toggle-button-group': DefineComponent<NLDDToggleButtonGroupProps>;
 		/** A self-contained piece of data the user is handling: a person in an address field, an active filter value. Alone among the three it can be operated, so it is optionally dismissable or interactive through a contextual menu. For something you only read, reach for `nldd-tag` (a trait someone assigned) or `nldd-badge` (a state or a count the system keeps). */
 		'nldd-token': DefineComponent<NLDDTokenProps>;
-		/** A multi-select input that looks like a normal input field: chosen values show as dismissible tokens in a wrapping row, followed by an inline text input that stretches to fill the remaining space and wraps to a new line (growing the field) when it no longer fits. Options are supplied as a slotted nldd-menu, exactly like nldd-combo-box; the menu filters as you type, with a chevron picker button, arrow-key roving across the tokens and ElementInternals form participation. */
+		/** A multi-select input that looks like a normal input field: chosen values show as dismissible tokens in a wrapping row, followed by an inline text input that stretches to fill the remaining space and wraps to a new line (growing the field) when it no longer fits. Options are supplied as a slotted nldd-menu, exactly like nldd-combo-box; the menu filters as you type, with a chevron picker button, arrow-key roving across the tokens and ElementInternals form participation. Options can arrive after the keystroke, from a server you query per keystroke. Slot them into the menu when they come in: if the user is still in the field and the keystroke found nothing to show, the menu opens then. After Escape, or once the user left the field, it stays shut. */
 		'nldd-token-field': DefineComponent<NLDDTokenFieldProps>;
 		/** A row of controls that belong to a whole screen or pane, with an overflow menu for what does not fit. The toolbar measures itself: as the row runs out of room, items move into that menu, the lowest `priority` first, and items that share a priority move together. So the order in the HTML says where an item sits, and `priority` says how long it stays. Every item carries its own alternative for the menu, an nldd-menu-item in its `overflow` slot. Without one the action is simply gone once the item overflows, which on a wide screen you never see; the item warns about it in development. The toolbar's own `overflow` slot holds the actions that live in the menu at every width. */
 		'nldd-toolbar': DefineComponent<NLDDToolbarProps>;

package/dist/utilities/translations.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The translation layer shared by every component.
+ *
+ * A component looks a text up in this order: its own `translations` property,
+ * then what the app set for the whole package with `setTranslations()`, then
+ * its Dutch default. The package-wide layer is what reaches a component that
+ * another component builds in its shadow root, such as the activity indicator
+ * in a loading button or the calendar in a date field: nobody outside can set
+ * `translations` on those, but they all read this layer.
+ *
+ * Keys are language, not content. A text that differs per instance, such as
+ * "Aan het bewaren" on one button and "Aan het laden" on another, belongs in an
+ * attribute on that element.
+ */
+type Translations = Record<string, string>;
+/**
+ * Sets the texts for the whole package, replacing what was set before. Keys you
+ * leave out fall back to Dutch. To start from the shipped English and change a
+ * few texts, spread them: `setTranslations({ ...enUS, 'key': 'Mine' })`.
+ *
+ * Call it before the components render. Calling it again re-renders the
+ * components on the page, so a language switch at runtime works too. Call it
+ * when the language changes, not on every render: each call walks the page.
+ * A component inside a closed shadow root is out of its reach and keeps its old
+ * texts until it renders again; ask it to with `requestUpdate()`.
+ */
+export declare function setTranslations(translations: Translations): void;
+/** What the app set with `setTranslations()`, for tests and debugging. */
+export declare function getTranslations(): Readonly<Translations>;
+/**
+ * Looks a key up through the three layers and fills in `{placeholders}`. Every
+ * component's `_t()` goes through here, so none of them skips the package-wide
+ * layer.
+ */
+export declare function translate<T extends Translations>(own: Partial<T> | undefined, defaults: T, key: keyof T, vars?: Record<string, string | number>): string;
+export {};
+//# sourceMappingURL=translations.d.ts.map

package/dist/utilities/translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../src/utilities/translations.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAY3C;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,YAAY,EAAE,YAAY,GAAG,IAAI,CAIhE;AAED,0EAA0E;AAC1E,wBAAgB,eAAe,IAAI,QAAQ,CAAC,YAAY,CAAC,CAExD;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,YAAY,EAC/C,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,EAC3B,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,MAAM,CAAC,EACZ,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GACpC,MAAM,CASR"}

package/dist/utilities/translations.js

@@ -0,0 +1,80 @@
+/**
+ * The translation layer shared by every component.
+ *
+ * A component looks a text up in this order: its own `translations` property,
+ * then what the app set for the whole package with `setTranslations()`, then
+ * its Dutch default. The package-wide layer is what reaches a component that
+ * another component builds in its shadow root, such as the activity indicator
+ * in a loading button or the calendar in a date field: nobody outside can set
+ * `translations` on those, but they all read this layer.
+ *
+ * Keys are language, not content. A text that differs per instance, such as
+ * "Aan het bewaren" on one button and "Aan het laden" on another, belongs in an
+ * attribute on that element.
+ */
+var _a;
+// On globalThis under a registered symbol: the package entry is a bundle and
+// the per-component entries are separate modules, so an app that imports both
+// loads this file twice. Both copies have to read the same layer.
+const STORE_KEY = Symbol.for('nldd.translations');
+const store = ((_a = globalThis)[STORE_KEY] ?? (_a[STORE_KEY] = { translations: {} }));
+/**
+ * Sets the texts for the whole package, replacing what was set before. Keys you
+ * leave out fall back to Dutch. To start from the shipped English and change a
+ * few texts, spread them: `setTranslations({ ...enUS, 'key': 'Mine' })`.
+ *
+ * Call it before the components render. Calling it again re-renders the
+ * components on the page, so a language switch at runtime works too. Call it
+ * when the language changes, not on every render: each call walks the page.
+ * A component inside a closed shadow root is out of its reach and keeps its old
+ * texts until it renders again; ask it to with `requestUpdate()`.
+ */
+export function setTranslations(translations) {
+    store.translations = { ...translations };
+    if (import.meta.env?.DEV)
+        warnUnknownKeys(store.translations);
+    if (typeof document !== 'undefined')
+        rerender(document);
+}
+/** What the app set with `setTranslations()`, for tests and debugging. */
+export function getTranslations() {
+    return store.translations;
+}
+/**
+ * Looks a key up through the three layers and fills in `{placeholders}`. Every
+ * component's `_t()` goes through here, so none of them skips the package-wide
+ * layer.
+ */
+export function translate(own, defaults, key, vars) {
+    const name = key;
+    let text = own?.[key] ?? store.translations[name] ?? defaults[key] ?? name;
+    if (vars) {
+        for (const [k, v] of Object.entries(vars)) {
+            text = text.split(`{${k}}`).join(String(v));
+        }
+    }
+    return text;
+}
+/** Asks every nldd component on the page, also inside shadow roots, to render again. */
+function rerender(root) {
+    for (const el of Array.from(root.querySelectorAll('*'))) {
+        if (el.tagName.startsWith('NLDD-'))
+            el.requestUpdate?.();
+        if (el.shadowRoot)
+            rerender(el.shadowRoot);
+    }
+}
+/**
+ * A key no component knows does nothing, silently. That is what happens to an
+ * override after a key is renamed, so in DEV it says so. The full key list is
+ * loaded only here, so production bundles do not carry it.
+ */
+function warnUnknownKeys(translations) {
+    import('../translations/nl.generated.js').then(({ nl }) => {
+        const unknown = Object.keys(translations).filter((key) => !(key in nl));
+        if (unknown.length) {
+            console.warn(`setTranslations: no component knows ${unknown.length === 1 ? 'this key, so it does' : 'these keys, so they do'} nothing: ${unknown.join(', ')}`);
+        }
+    }).catch(() => { });
+}
+//# sourceMappingURL=translations.js.map

package/dist/utilities/translations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.js","sourceRoot":"","sources":["../../src/utilities/translations.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;;AAQH,6EAA6E;AAC7E,8EAA8E;AAC9E,kEAAkE;AAClE,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;AAClD,MAAM,KAAK,GAAU,OAAE,UAAsC,EAAC,SAAS,SAAT,SAAS,IAAM,EAAE,YAAY,EAAE,EAAE,EAAE,EAAU,CAAC;AAE5G;;;;;;;;;;GAUG;AACH,MAAM,UAAU,eAAe,CAAC,YAA0B;IACzD,KAAK,CAAC,YAAY,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IACzC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG;QAAE,eAAe,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC9D,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACzD,CAAC;AAED,0EAA0E;AAC1E,MAAM,UAAU,eAAe;IAC9B,OAAO,KAAK,CAAC,YAAY,CAAC;AAC3B,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,SAAS,CACxB,GAA2B,EAC3B,QAAW,EACX,GAAY,EACZ,IAAsC;IAEtC,MAAM,IAAI,GAAG,GAAa,CAAC;IAC3B,IAAI,IAAI,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC;IAC3E,IAAI,IAAI,EAAE,CAAC;QACV,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YAC3C,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7C,CAAC;IACF,CAAC;IACD,OAAO,IAAI,CAAC;AACb,CAAC;AAED,wFAAwF;AACxF,SAAS,QAAQ,CAAC,IAAqC;IACtD,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;QACzD,IAAI,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC;YAAG,EAA+C,CAAC,aAAa,EAAE,EAAE,CAAC;QACvG,IAAI,EAAE,CAAC,UAAU;YAAE,QAAQ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAC5C,CAAC;AACF,CAAC;AAED;;;;GAIG;AACH,SAAS,eAAe,CAAC,YAA0B;IAClD,MAAM,CAAC,iCAAiC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;QACzD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;QACxE,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;YACpB,OAAO,CAAC,IAAI,CAAC,uCAAuC,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,wBAAwB,aAAa,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChK,CAAC;IACF,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;AACpB,CAAC"}

package/dist/utilities/with-translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-translations.d.ts","sourceRoot":"","sources":["../../src/utilities/with-translations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAElE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAChE,IAAI,EAAE,WAAW,CAAC,UAAU,CAAC,GAAG,OAAO,UAAU,EACjD,QAAQ,EAAE,CAAC,GA4B4B,WAAW,CAAC,UAAU,GAAG;IAC/D,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACzB,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC;CACjE,CAAC,GAAG,OAAO,UAAU,CACtB"}
+{"version":3,"file":"with-translations.d.ts","sourceRoot":"","sources":["../../src/utilities/with-translations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAElE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAChE,IAAI,EAAE,WAAW,CAAC,UAAU,CAAC,GAAG,OAAO,UAAU,EACjD,QAAQ,EAAE,CAAC,GAY4B,WAAW,CAAC,UAAU,GAAG;IAC/D,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACzB,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC;CACjE,CAAC,GAAG,OAAO,UAAU,CACtB"}

package/dist/utilities/with-translations.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from 'lit/decorators.js';
+import { translate } from './translations.js';
 /**
  * Mixin that adds i18n support to a LitElement component.
  *
@@ -29,24 +30,10 @@ export function withTranslations(Base, defaults) {
         constructor() {
             super(...arguments);
             this.translations = {};
-            /** @internal */
-            this._mergedTranslations = { ...defaults };
         }
         /** @internal */
         _t(key, vars) {
-            let str = this._mergedTranslations[key] ?? String(key);
-            if (vars) {
-                for (const [k, v] of Object.entries(vars)) {
-                    str = str.split(`{${k}}`).join(String(v));
-                }
-            }
-            return str;
-        }
-        willUpdate(changed) {
-            super.willUpdate(changed);
-            if (changed.has('translations')) {
-                this._mergedTranslations = { ...defaults, ...this.translations };
-            }
+            return translate(this.translations, defaults, key, vars);
         }
     }
     __decorate([

package/dist/utilities/with-translations.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-translations.js","sourceRoot":"","sources":["../../src/utilities/with-translations.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,gBAAgB,CAC/B,IAAiD,EACjD,QAAW;IAEX,MAAM,iBAAkB,SAAQ,IAAI;QAApC;;YAEC,iBAAY,GAAe,EAAE,CAAC;YAE9B,gBAAgB;YAChB,wBAAmB,GAAM,EAAE,GAAG,QAAQ,EAAE,CAAC;QAmB1C,CAAC;QAjBA,gBAAgB;QAChB,EAAE,CAAC,GAAY,EAAE,IAAsC;YACtD,IAAI,GAAG,GAAW,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC;YAC/D,IAAI,IAAI,EAAE,CAAC;gBACV,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;oBAC3C,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC3C,CAAC;YACF,CAAC;YACD,OAAO,GAAG,CAAC;QACZ,CAAC;QAEQ,UAAU,CAAC,OAAuB;YAC1C,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAC1B,IAAI,OAAO,CAAC,GAAG,CAAC,cAA4B,CAAC,EAAE,CAAC;gBAC/C,IAAI,CAAC,mBAAmB,GAAG,EAAE,GAAG,QAAQ,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YAClE,CAAC;QACF,CAAC;KACD;IAtBA;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACG;IAwB/B,OAAO,iBAGe,CAAC;AACxB,CAAC"}
+{"version":3,"file":"with-translations.js","sourceRoot":"","sources":["../../src/utilities/with-translations.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAI9C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,gBAAgB,CAC/B,IAAiD,EACjD,QAAW;IAEX,MAAM,iBAAkB,SAAQ,IAAI;QAApC;;YAEC,iBAAY,GAAe,EAAE,CAAC;QAM/B,CAAC;QAJA,gBAAgB;QAChB,EAAE,CAAC,GAAY,EAAE,IAAsC;YACtD,OAAO,SAAS,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;QAC1D,CAAC;KACD;IANA;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACG;IAQ/B,OAAO,iBAGe,CAAC;AACxB,CAAC"}