@nldd/design-system 0.8.69 → 0.8.71

package/dist/types/vue.d.ts

@@ -0,0 +1,3421 @@
+// Generated by scripts/generate-vue-types.js. Do not edit.
+//
+// Declares every nldd-* element for Vue's template type-checking. Import it once
+// in your project (for example in env.d.ts):
+//
+//     import '@nldd/design-system/vue';
+//
+// Every attribute is available both as written in markup (week-numbers) and in
+// the form Vue normalizes it to (weekNumbers). Events are the prop Vue derives
+// from @change, so onChange.
+
+import type { DefineComponent } from 'vue';
+import type { NLDDActivityIndicator } from '@nldd/design-system/activity-indicator';
+import type { NLDDAppView } from '@nldd/design-system/app-view';
+import type { NLDDAvatar } from '@nldd/design-system/avatar';
+import type { NLDDBadge } from '@nldd/design-system/badge';
+import type { NLDDBanner } from '@nldd/design-system/banner';
+import type { NLDDBarSplitView } from '@nldd/design-system/bar-split-view';
+import type { NLDDBlockquote } from '@nldd/design-system/blockquote';
+import type { NLDDBox } from '@nldd/design-system/box';
+import type { NLDDBreadcrumbs } from '@nldd/design-system/breadcrumbs';
+import type { NLDDBreadcrumbsItem } from '@nldd/design-system/breadcrumbs';
+import type { NLDDButton } from '@nldd/design-system/button';
+import type { NLDDButtonBar } from '@nldd/design-system/button-bar';
+import type { anonymous_0 } from '@nldd/design-system/button-bar';
+import type { NLDDButtonGroup } from '@nldd/design-system/button-group';
+import type { NLDDByline } from '@nldd/design-system/byline';
+import type { NLDDCard } from '@nldd/design-system/card';
+import type { NLDDCell } from '@nldd/design-system/cell';
+import type { NLDDCheckbox } from '@nldd/design-system/checkbox';
+import type { NLDDCheckboxField } from '@nldd/design-system/checkbox-field';
+import type { NLDDCodeEditor } from '@nldd/design-system/code-editor';
+import type { NLDDCodeViewer } from '@nldd/design-system/code-viewer';
+import type { NLDDCollection } from '@nldd/design-system/collection';
+import type { NLDDComboBox } from '@nldd/design-system/combo-box';
+import type { NLDDContainer } from '@nldd/design-system/container';
+import type { NLDDDateField } from '@nldd/design-system/date-field';
+import type { NLDDDatePicker } from '@nldd/design-system/date-picker';
+import type { NLDDDescriptionCell } from '@nldd/design-system/description-cell';
+import type { NLDDDivider } from '@nldd/design-system/divider';
+import type { NLDDDocumentTabBar } from '@nldd/design-system/document-tab-bar';
+import type { NLDDDocumentTabBarItem } from '@nldd/design-system/document-tab-bar';
+import type { NLDDDragHandleCell } from '@nldd/design-system/drag-handle-cell';
+import type { NLDDDropdown } from '@nldd/design-system/dropdown';
+import type { NLDDForm } from '@nldd/design-system/form';
+import type { NLDDFormActions } from '@nldd/design-system/form-actions';
+import type { NLDDFormField } from '@nldd/design-system/form-field';
+import type { NLDDFormFieldErrorText } from '@nldd/design-system/form-field';
+import type { NLDDFormFieldHelpText } from '@nldd/design-system/form-field';
+import type { NLDDFormSection } from '@nldd/design-system/form-section';
+import type { NLDDFullBleedSection } from '@nldd/design-system/full-bleed-section';
+import type { NLDDHero } from '@nldd/design-system/hero';
+import type { NLDDIcon } from '@nldd/design-system/icon';
+import type { NLDDIconButton } from '@nldd/design-system/icon-button';
+import type { NLDDIconCell } from '@nldd/design-system/icon-cell';
+import type { NLDDImage } from '@nldd/design-system/image';
+import type { NLDDInlineDialog } from '@nldd/design-system/inline-dialog';
+import type { NLDDJustInTimeEducation } from '@nldd/design-system/just-in-time-education';
+import type { NLDDKeyboardShortcut } from '@nldd/design-system/keyboard-shortcut';
+import type { NLDDLink } from '@nldd/design-system/link';
+import type { NLDDList } from '@nldd/design-system/list';
+import type { NLDDListItem } from '@nldd/design-system/list-item';
+import type { NLDDListItemAction } from '@nldd/design-system/list-item-action';
+import type { NLDDMenu } from '@nldd/design-system/menu';
+import type { NLDDMenuBar } from '@nldd/design-system/menu-bar';
+import type { NLDDMenuBarItem } from '@nldd/design-system/menu-bar-item';
+import type { NLDDMenuDivider } from '@nldd/design-system/menu';
+import type { NLDDMenuGroup } from '@nldd/design-system/menu';
+import type { NLDDMenuItem } from '@nldd/design-system/menu';
+import type { NLDDModalDialog } from '@nldd/design-system/modal-dialog';
+import type { NLDDMultiLineTextField } from '@nldd/design-system/multi-line-text-field';
+import type { NLDDNavigationSplitView } from '@nldd/design-system/navigation-split-view';
+import type { NLDDNumberField } from '@nldd/design-system/number-field';
+import type { NLDDOneHalfOneHalfSection } from '@nldd/design-system/one-half-one-half-section';
+import type { NLDDOneThirdTwoThirdsSection } from '@nldd/design-system/one-third-two-thirds-section';
+import type { NLDDPage } from '@nldd/design-system/page';
+import type { NLDDPageFooter } from '@nldd/design-system/page-footer';
+import type { NLDDPageFooterLegalBar } from '@nldd/design-system/page-footer';
+import type { NLDDPageFooterLegalBarItem } from '@nldd/design-system/page-footer';
+import type { NLDDPagination } from '@nldd/design-system/pagination';
+import type { NLDDPasswordField } from '@nldd/design-system/password-field';
+import type { NLDDPopover } from '@nldd/design-system/popover';
+import type { NLDDProgressBar } from '@nldd/design-system/progress-bar';
+import type { NLDDProgressBarSegmentIndicator } from '@nldd/design-system/progress-bar';
+import type { NLDDProgressCircle } from '@nldd/design-system/progress-circle';
+import type { NLDDProgressCircleSegmentIndicator } from '@nldd/design-system/progress-circle';
+import type { NLDDRadioButton } from '@nldd/design-system/radio-button';
+import type { NLDDRadioButtonField } from '@nldd/design-system/radio-button-field';
+import type { NLDDRadioButtonGroup } from '@nldd/design-system/radio-button-group';
+import type { NLDDRichText } from '@nldd/design-system/rich-text';
+import type { NLDDSearchField } from '@nldd/design-system/search-field';
+import type { NLDDSegmentedControl } from '@nldd/design-system/segmented-control';
+import type { NLDDSegmentedControlItem } from '@nldd/design-system/segmented-control';
+import type { NLDDSheet } from '@nldd/design-system/sheet';
+import type { NLDDSideBySideSplitView } from '@nldd/design-system/side-by-side-split-view';
+import type { NLDDSidebarSection } from '@nldd/design-system/sidebar-section';
+import type { NLDDSimpleSection } from '@nldd/design-system/simple-section';
+import type { NLDDSkipLink } from '@nldd/design-system/skip-link';
+import type { NLDDSpacer } from '@nldd/design-system/spacer';
+import type { NLDDSpacerCell } from '@nldd/design-system/spacer-cell';
+import type { NLDDSplitButton } from '@nldd/design-system/split-button';
+import type { NLDDSplitViewDivider } from '@nldd/design-system/split-view-divider';
+import type { NLDDSplitViewPane } from '@nldd/design-system/split-view-pane';
+import type { NLDDStackedSplitView } from '@nldd/design-system/stacked-split-view';
+import type { NLDDStatusBar } from '@nldd/design-system/status-bar';
+import type { NLDDStepIndicator } from '@nldd/design-system/step-indicator';
+import type { NLDDStepIndicatorItem } from '@nldd/design-system/step-indicator';
+import type { NLDDStepper } from '@nldd/design-system/stepper';
+import type { NLDDSwitch } from '@nldd/design-system/switch';
+import type { NLDDSwitchField } from '@nldd/design-system/switch-field';
+import type { NLDDTabBar } from '@nldd/design-system/tab-bar';
+import type { NLDDTabBarItem } from '@nldd/design-system/tab-bar';
+import type { NLDDTable } from '@nldd/design-system/table';
+import type { NLDDTableRow } from '@nldd/design-system/table';
+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 { 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';
+import type { NLDDToggleButton } from '@nldd/design-system/toggle-button';
+import type { NLDDToggleButtonGroup } from '@nldd/design-system/toggle-button-group';
+import type { NLDDToken } from '@nldd/design-system/token';
+import type { NLDDTokenField } from '@nldd/design-system/token-field';
+import type { NLDDToolbar } from '@nldd/design-system/toolbar';
+import type { NLDDToolbarItem } from '@nldd/design-system/toolbar';
+import type { NLDDToolbarTitle } from '@nldd/design-system/toolbar';
+import type { NLDDTooltip } from '@nldd/design-system/tooltip';
+import type { NLDDTopNavigationBar } from '@nldd/design-system/top-navigation-bar';
+import type { NLDDTopTitleBar } from '@nldd/design-system/top-title-bar';
+import type { NLDDTwoThirdsOneThirdSection } from '@nldd/design-system/two-thirds-one-third-section';
+import type { NLDDWindow } from '@nldd/design-system/window';
+
+declare module 'vue' {
+	type NLDDActivityIndicatorProps = {
+		/** Circle diameter on the icon scale: 16,20,24,28,32,40,44,48,56,64,80,96 (default '32') */
+		'size'?: NLDDActivityIndicator['size'];
+		/** Show the label under the indicator (default false; the label still feeds the accessible name) */
+		'show-text'?: NLDDActivityIndicator['showText'];
+		/** Show the label under the indicator (default false; the label still feeds the accessible name) */
+		'showText'?: NLDDActivityIndicator['showText'];
+		/** Label text. Falls back to the translated "Laden" when unset. */
+		'text'?: NLDDActivityIndicator['text'];
+		/** 'default' waits 1000ms before showing (anti-flash); 'instant' shows immediately (the fade-in still plays). Default 'default'. */
+		'timing'?: NLDDActivityIndicator['timing'];
+		/** Mark the loader as finished while keeping the element mounted; clears aria-busy and hides the indicator. */
+		'complete'?: NLDDActivityIndicator['complete'];
+		/** Overlay mode dims and blurs the wrapped content with a frosted backdrop by default; set this to show only the indicator panel without dimming. No effect in standalone mode. */
+		'no-backdrop'?: NLDDActivityIndicator['noBackdrop'];
+		/** Overlay mode dims and blurs the wrapped content with a frosted backdrop by default; set this to show only the indicator panel without dimming. No effect in standalone mode. */
+		'noBackdrop'?: NLDDActivityIndicator['noBackdrop'];
+		/** Override translation keys; unset keys fall back to Dutch */
+		'translations'?: NLDDActivityIndicator['translations'];
+	};
+
+	type NLDDAppViewProps = {
+		/** Background color (cascades to descendants) */
+		'background'?: NLDDAppView['background'];
+	};
+
+	type NLDDAvatarProps = {
+		/** Afbeeldingsbron; valt bij een laadfout terug op initialen/icoon */
+		'src'?: NLDDAvatar['src'];
+		/** Responsive source set voor de afbeelding (het component zet zelf `sizes`) */
+		'srcset'?: NLDDAvatar['srcset'];
+		/** Naam van de persoon/organisatie; levert de afgeleide initialen en het toegankelijke label */
+		'name'?: NLDDAvatar['name'];
+		/** Expliciete initialen, max 3 tekens (overschrijft de afleiding uit `name`; ook voor organisatie-acroniemen) */
+		'initials'?: NLDDAvatar['initials'];
+		/** Overschrijft het type-afhankelijke terugval-icoon */
+		'icon'?: NLDDAvatar['icon'];
+		/** `person` (cirkel, person-icoon) of `organization` (afgerond, building-icoon); standaard `person` */
+		'type'?: NLDDAvatar['type'];
+		/** `default` (neutrale vulling) of `inherit` (vulling in de content-kleur: de `--context-content-color`-channel, of `currentColor` als die niet gezet is; tekst in de contrastkleur, zodat de avatar een icoon in bijvoorbeeld een knop kan vervangen); standaard `default` */
+		'color'?: NLDDAvatar['color'];
+		/** `full` (standaard) schaalt mee met de container, net als nldd-icon; of een vaste maat in px (spacer-uitgelijnd: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Leeg gedraagt zich als `full`. De initialen en het icoon schalen mee */
+		'size'?: NLDDAvatar['size'];
+		/** Krimpt de zichtbare schijf naar 5/6 van de host, gecentreerd, zodat de avatar optisch uitlijnt met een icoon op hetzelfde grid (een icoon-glyph heeft ingebouwde marge) */
+		'icon-aligned'?: NLDDAvatar['iconAligned'];
+		/** Krimpt de zichtbare schijf naar 5/6 van de host, gecentreerd, zodat de avatar optisch uitlijnt met een icoon op hetzelfde grid (een icoon-glyph heeft ingebouwde marge) */
+		'iconAligned'?: NLDDAvatar['iconAligned'];
+		/** Verbergt de avatar voor hulpsoftware (gebruik wanneer de naam er al als tekst naast staat) */
+		'decorative'?: NLDDAvatar['decorative'];
+		/** Maakt de avatar een link naar deze URL; de schijf zelf wordt de link, dus klikgebied en focusring volgen de vorm */
+		'href'?: NLDDAvatar['href'];
+		/** Maakt de avatar een knop; genegeerd wanneer `href` is gezet */
+		'button'?: NLDDAvatar['button'];
+		/** Link target voor href (bijv. '_blank'); vult rel aan en meldt "Opent in nieuw tabblad" */
+		'target'?: NLDDAvatar['target'];
+		/** Link rel voor href; standaard 'noopener noreferrer' bij target='_blank' */
+		'rel'?: NLDDAvatar['rel'];
+		/** Naam van de link of knop; zonder deze wordt `name` gebruikt */
+		'accessible-label'?: NLDDAvatar['accessibleLabel'];
+		/** Naam van de link of knop; zonder deze wordt `name` gebruikt */
+		'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. */
+		'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'];
+		/** Fallback icon when there is neither image nor initials. */
+		'resolvedIcon'?: NLDDAvatar['resolvedIcon'];
+	};
+
+	type NLDDBadgeProps = {
+		/** Semantisch ('critical' | 'accent' | 'neutral' | 'warning' | 'success') of een Rijkskleur ('lintblauw' | 'hemelblauw' | 'oranje' | …). Default: 'critical' */
+		'color'?: NLDDBadge['color'];
+		/** Grootte: 'sm' | 'md' (default: 'md') */
+		'size'?: NLDDBadge['size'];
+		/** Tekst (heeft voorrang op number) */
+		'text'?: NLDDBadge['text'];
+		/** Numerieke waarde. Wordt beknopt als meer dan max */
+		'number'?: NLDDBadge['number'];
+		/** Maximum waarde boven welke number wordt getoond als "{max}+" (default: 99) */
+		'max'?: NLDDBadge['max'];
+		/** Icoon naam. Icon-only wordt als vierkant gerenderd; met text/number komt het icoon links. */
+		'icon'?: NLDDBadge['icon'];
+		/** Toegankelijk label voor screenreaders. Fallback naar text/number; anders naar i18n default ("Notificatie"). */
+		'accessible-label'?: NLDDBadge['accessibleLabel'];
+		/** Toegankelijk label voor screenreaders. Fallback naar text/number; anders naar i18n default ("Notificatie"). */
+		'accessibleLabel'?: NLDDBadge['accessibleLabel'];
+		'translations'?: NLDDBadge['translations'];
+	};
+
+	type NLDDBannerProps = {
+		/** Color and default icon (default: 'neutral') */
+		'variant'?: NLDDBanner['variant'];
+		/** 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) */
+		'text'?: NLDDBanner['text'];
+		/** Supporting text below the heading */
+		'supporting-text'?: NLDDBanner['supportingText'];
+		/** Supporting text below the heading */
+		'supportingText'?: NLDDBanner['supportingText'];
+		/** Renders text as h1–h6; absent renders a p */
+		'heading-level'?: NLDDBanner['headingLevel'];
+		/** Renders text as h1–h6; absent renders a p */
+		'headingLevel'?: NLDDBanner['headingLevel'];
+		/** Show a close button in the top-right; emits `dismiss` when clicked */
+		'dismissible'?: NLDDBanner['dismissible'];
+		/** Override translation keys; unset keys fall back to Dutch */
+		'translations'?: NLDDBanner['translations'];
+		/** Fired when the dismiss button is clicked. The consumer is responsible for removing/hiding the banner. */
+		'onDismiss'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDBarSplitViewProps = {
+		/** Background color variant (default: inherit) */
+		'background'?: NLDDBarSplitView['background'];
+	};
+
+	type NLDDBlockquoteProps = {
+		/** URL van de bron (wordt doorgegeven aan het <blockquote> element) */
+		'cite'?: NLDDBlockquote['cite'];
+	};
+
+	type NLDDBoxProps = {
+		/** Surface fill. - `tinted` (default): for a box on a plain page bg. - `base`: for a box sitting on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card). */
+		'background'?: NLDDBox['background'];
+	};
+
+	type NLDDBreadcrumbsProps = {
+		/** Override the nav's aria-label. Defaults to the i18n value (NL: "Kruimelpad"). */
+		'accessible-label'?: NLDDBreadcrumbs['accessibleLabel'];
+		/** Override the nav's aria-label. Defaults to the i18n value (NL: "Kruimelpad"). */
+		'accessibleLabel'?: NLDDBreadcrumbs['accessibleLabel'];
+		/** Override translation keys; unset keys fall back to the Dutch default. */
+		'translations'?: NLDDBreadcrumbs['translations'];
+	};
+
+	type NLDDBreadcrumbsItemProps = {
+		/** Link target. Ignored when `current` is set. */
+		'href'?: NLDDBreadcrumbsItem['href'];
+		/** Marks this item as the current page (renders as plain text + `aria-current="page"`). Typical use is on the last item. */
+		'current'?: NLDDBreadcrumbsItem['current'];
+		/** Item label. Falls back to the default slot. */
+		'text'?: NLDDBreadcrumbsItem['text'];
+	};
+
+	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'. De inherit-varianten leiden hun kleuren af van currentColor, voor knoppen op gekleurde vlakken; inherit-filled gebruikt de vlakkleur (--context-parent-background-color) als labelkleur met een wit/zwart-contrastflip als fallback. */
+		'variant'?: NLDDButton['variant'];
+		/** 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. */
+		'horizontal-alignment'?: NLDDButton['horizontalAlignment'];
+		/** Horizontal alignment of the button content: 'left' | 'center' | 'right' (default: unset, centered). Most visible with width="full" or a fixed width. */
+		'horizontalAlignment'?: NLDDButton['horizontalAlignment'];
+		/** Width mode: 'full' (stretches to container) or any CSS length (e.g. '240px') */
+		'width'?: NLDDButton['width'];
+		/** Caps the width at this CSS length (e.g. '320px'). Combines with `width="full"`: the button follows its container up to the cap. A label that doesn't fit is truncated with an ellipsis — a cap only means something if the content respects it. */
+		'max-width'?: NLDDButton['maxWidth'];
+		/** Caps the width at this CSS length (e.g. '320px'). Combines with `width="full"`: the button follows its container up to the cap. A label that doesn't fit is truncated with an ellipsis — a cap only means something if the content respects it. */
+		'maxWidth'?: NLDDButton['maxWidth'];
+		/** Whether the button has a icon to indicate it opens a menu or popover */
+		'expandable'?: NLDDButton['expandable'];
+		/** Whether the popover/menu controlled by this button is currently open. Forwarded as aria-expanded on the inner button; toggles the is-expanded visual state. */
+		'expanded'?: NLDDButton['expanded'];
+		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. */
+		'popup-type'?: NLDDButton['popupType'];
+		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. */
+		'popupType'?: NLDDButton['popupType'];
+		/** Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set) */
+		'type'?: NLDDButton['type'];
+		/** ID of a popover element this button invokes; forwarded to the inner button. Use the popoverTargetElement property instead when the popover lives in another tree. */
+		'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'];
+		/** Disabled state */
+		'disabled'?: NLDDButton['disabled'];
+		/** Button text */
+		'text'?: NLDDButton['text'];
+		/** Supporting text shown below the text (md/lg) or after it (sm/xs), in a secondary color. Part of the accessible name (unless `accessible-label` is set, which replaces the whole accessible name). */
+		'supporting-text'?: NLDDButton['supportingText'];
+		/** Supporting text shown below the text (md/lg) or after it (sm/xs), in a secondary color. Part of the accessible name (unless `accessible-label` is set, which replaces the whole accessible name). */
+		'supportingText'?: NLDDButton['supportingText'];
+		/** When true, truncates overflowing text with an ellipsis instead of letting it wrap. Requires the button (or an ancestor) to constrain the width. */
+		'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). */
+		'no-highlight-border'?: NLDDButton['noHighlightBorder'];
+		/** Removes the per-variant 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'];
+		/** Icon name for the start icon (before text) */
+		'startIcon'?: NLDDButton['startIcon'];
+		/** Icon name for the end icon (after text) */
+		'end-icon'?: NLDDButton['endIcon'];
+		/** Icon name for the end icon (after text) */
+		'endIcon'?: NLDDButton['endIcon'];
+		/** Accessible label for the button, overrides text for screen readers */
+		'accessible-label'?: NLDDButton['accessibleLabel'];
+		/** Accessible label for the button, overrides text for screen readers */
+		'accessibleLabel'?: NLDDButton['accessibleLabel'];
+		/** When set, renders an <a> element instead of <button> */
+		'href'?: NLDDButton['href'];
+		/** Link target (e.g. '_blank'); only used when href is set. With '_blank' the button adds a visually hidden "opens in new tab" announcement for screen readers (WCAG 2.1 SC 3.2.2). */
+		'target'?: NLDDButton['target'];
+		/** Link rel attribute; defaults to 'noopener noreferrer' when target is '_blank' */
+		'rel'?: NLDDButton['rel'];
+		/** Override translation keys (e.g. the "opens in new tab" announcement); unset keys fall back to Dutch. */
+		'translations'?: NLDDButton['translations'];
+		/** Direct element reference to the popover this button invokes — IDL-only counterpart to `popovertarget` that works across shadow boundaries. Use this when the popover lives in a different tree (e.g. an `nldd-menu` reparented to `<body>`) so the browser still recognizes this button as the popover's invoker and excludes it from the popover light-dismiss algorithm. Set programmatically; not reflected to an HTML attribute (the attribute form is `popovertarget`, ID-based). */
+		'popoverTargetElement'?: NLDDButton['popoverTargetElement'];
+		/** Action the browser performs when the button is clicked, mirroring the standard `popovertargetaction` attribute. Defaults to `'toggle'`. Use `'show'` when a separate handler owns the close path (e.g. the consumer toggles the popover programmatically) so the browser's default action doesn't double-fire. */
+		'popoverTargetAction'?: NLDDButton['popoverTargetAction'];
+		/** When button is clicked (not fired when disabled) */
+		'onClick'?: (event: CustomEvent) => void;
+	};
+
+	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'];
+		/** Disabled state */
+		'disabled'?: NLDDButtonBar['disabled'];
+	};
+
+	type anonymous_0Props = {
+	};
+
+	type NLDDButtonGroupProps = {
+		/** Button group size: 'sm' | 'md' (default: 'md') */
+		'size'?: NLDDButtonGroup['size'];
+		/** Layout direction: 'horizontal' | 'vertical' (default: 'vertical') */
+		'orientation'?: NLDDButtonGroup['orientation'];
+	};
+
+	type NLDDBylineProps = {
+		/** Naamregel (bijv. "Jan Jansen en Piet Pietersen"); fallback wanneer de text-slot leeg is */
+		'text'?: NLDDByline['text'];
+		/** Ondersteunende tekst onder de naamregel (bijv. rol of datum); fallback wanneer de supporting-text-slot leeg is */
+		'supporting-text'?: NLDDByline['supportingText'];
+		/** Ondersteunende tekst onder de naamregel (bijv. rol of datum); fallback wanneer de supporting-text-slot leeg is */
+		'supportingText'?: NLDDByline['supportingText'];
+		/** Bron van één avatar (alternatief voor de avatars-slot); genegeerd zodra de avatars-slot gevuld is */
+		'avatar-src'?: NLDDByline['avatarSrc'];
+		/** Bron van één avatar (alternatief voor de avatars-slot); genegeerd zodra de avatars-slot gevuld is */
+		'avatarSrc'?: NLDDByline['avatarSrc'];
+		/** Responsive source set voor de avatar-src-afbeelding */
+		'avatar-srcset'?: NLDDByline['avatarSrcset'];
+		/** Responsive source set voor de avatar-src-afbeelding */
+		'avatarSrcset'?: NLDDByline['avatarSrcset'];
+		/** Alt-tekst voor de avatar-src-afbeelding; leeg = decoratief */
+		'avatar-alt'?: NLDDByline['avatarAlt'];
+		/** Alt-tekst voor de avatar-src-afbeelding; leeg = decoratief */
+		'avatarAlt'?: NLDDByline['avatarAlt'];
+	};
+
+	type NLDDCardProps = {
+		/** Toegankelijke naam van de kaart; bij `href`/`button` benoemt deze de link of knop, anders de kaart-region */
+		'accessible-label'?: NLDDCard['accessibleLabel'];
+		/** Toegankelijke naam van de kaart; bij `href`/`button` benoemt deze de link of knop, anders de kaart-region */
+		'accessibleLabel'?: NLDDCard['accessibleLabel'];
+		/** Maakt de hele kaart een link naar deze URL (leeg = geen link) */
+		'href'?: NLDDCard['href'];
+		/** Maakt de hele kaart een knop; genegeerd wanneer `href` is gezet */
+		'button'?: NLDDCard['button'];
+		/** Link target voor href (bijv. '_blank'); stelt rel automatisch bij en voegt bij '_blank' een "Opent in nieuw tabblad"-melding toe */
+		'target'?: NLDDCard['target'];
+		/** Link rel voor href; standaard 'noopener noreferrer' bij target='_blank' */
+		'rel'?: NLDDCard['rel'];
+		/** Overschrijf vertaalsleutels (bijv. de "Opent in nieuw tabblad"-melding) */
+		'translations'?: NLDDCard['translations'];
+	};
+
+	type NLDDCellProps = {
+		/** 'full' | 'fit-content' | CSS length (e.g. '120px', '10rem'). Default: 'fit-content' */
+		'width'?: NLDDCell['width'];
+		/** Minimum width as CSS length (e.g. '80px', '5rem') */
+		'min-width'?: NLDDCell['minWidth'];
+		/** Minimum width as CSS length (e.g. '80px', '5rem') */
+		'minWidth'?: NLDDCell['minWidth'];
+		/** Maximum width as CSS length (e.g. '200px', '20rem') */
+		'max-width'?: NLDDCell['maxWidth'];
+		/** Maximum width as CSS length (e.g. '200px', '20rem') */
+		'maxWidth'?: NLDDCell['maxWidth'];
+		/** Minimum height as CSS length (e.g. '44px', '3rem') */
+		'min-height'?: NLDDCell['minHeight'];
+		/** Minimum height as CSS length (e.g. '44px', '3rem') */
+		'minHeight'?: NLDDCell['minHeight'];
+		/** Vertical alignment of slotted content (default: 'center') */
+		'vertical-alignment'?: NLDDCell['verticalAlignment'];
+		/** Vertical alignment of slotted content (default: 'center') */
+		'verticalAlignment'?: NLDDCell['verticalAlignment'];
+		/** Horizontal alignment of slotted content (default: 'left') */
+		'horizontal-alignment'?: NLDDCell['horizontalAlignment'];
+		/** Horizontal alignment of slotted content (default: 'left') */
+		'horizontalAlignment'?: NLDDCell['horizontalAlignment'];
+		'hide-below'?: NLDDCell['hideBelow'];
+		'hideBelow'?: NLDDCell['hideBelow'];
+		'hide-above'?: NLDDCell['hideAbove'];
+		'hideAbove'?: NLDDCell['hideAbove'];
+	};
+
+	type NLDDCheckboxProps = {
+		/** Checked state */
+		'checked'?: NLDDCheckbox['checked'];
+		/** Disabled state */
+		'disabled'?: NLDDCheckbox['disabled'];
+		/** Indeterminate state (takes precedence over checked visually) */
+		'indeterminate'?: NLDDCheckbox['indeterminate'];
+		/** Value for form submission */
+		'value'?: NLDDCheckbox['value'];
+		/** Name for form submission */
+		'name'?: NLDDCheckbox['name'];
+		/** Accessible label forwarded as aria-label to the native input. Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries. */
+		'accessible-label'?: NLDDCheckbox['accessibleLabel'];
+		/** Accessible label forwarded as aria-label to the native input. Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries. */
+		'accessibleLabel'?: NLDDCheckbox['accessibleLabel'];
+		'internals'?: NLDDCheckbox['internals'];
+		/** Fired when the checkbox state changes; detail: { checked: boolean, value: string } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDCheckboxFieldProps = {
+		/** Checked state */
+		'checked'?: NLDDCheckboxField['checked'];
+		/** Indeterminate state */
+		'indeterminate'?: NLDDCheckboxField['indeterminate'];
+		/** Disabled state */
+		'disabled'?: NLDDCheckboxField['disabled'];
+		/** Value for form submission */
+		'value'?: NLDDCheckboxField['value'];
+		/** Name for form submission */
+		'name'?: NLDDCheckboxField['name'];
+		/** Label text for the checkbox */
+		'label'?: NLDDCheckboxField['label'];
+		'internals'?: NLDDCheckboxField['internals'];
+		/** When checked state changes; detail: { checked: boolean, value: string } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDCodeEditorProps = {
+		/** Editor content */
+		'value'?: NLDDCodeEditor['value'];
+		/** Sets the id on the editable element. Set automatically by nldd-form-field. */
+		'input-id'?: NLDDCodeEditor['inputId'];
+		/** Sets the id on the editable element. Set automatically by nldd-form-field. */
+		'inputId'?: NLDDCodeEditor['inputId'];
+		/** Placeholder text shown while empty */
+		'placeholder'?: NLDDCodeEditor['placeholder'];
+		/** Disabled state */
+		'disabled'?: NLDDCodeEditor['disabled'];
+		/** Field name for form submission */
+		'name'?: NLDDCodeEditor['name'];
+		/** Readonly state (focusable and selectable, not editable) */
+		'readonly'?: NLDDCodeEditor['readonly'];
+		/** Required state */
+		'required'?: NLDDCodeEditor['required'];
+		/** Wrap long lines instead of horizontal scroll */
+		'wrap'?: NLDDCodeEditor['wrap'];
+		/** Minimum visible rows (the floor in every resize mode). Default: 6. */
+		'rows'?: NLDDCodeEditor['rows'];
+		/** 'none' (fixed) | 'vertical' (drag) | 'auto' (grow, default) */
+		'resize'?: NLDDCodeEditor['resize'];
+		/** 'simple' (default, bare) | 'input-field' (framed surface) */
+		'variant'?: NLDDCodeEditor['variant'];
+		/** 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 */
+		'line-numbers'?: NLDDCodeEditor['lineNumbers'];
+		/** Show a line-number gutter */
+		'lineNumbers'?: NLDDCodeEditor['lineNumbers'];
+		/** Accessible label forwarded to the editor. Set automatically by nldd-form-field. */
+		'accessible-label'?: NLDDCodeEditor['accessibleLabel'];
+		/** Accessible label forwarded to the editor. Set automatically by nldd-form-field. */
+		'accessibleLabel'?: NLDDCodeEditor['accessibleLabel'];
+		'internals'?: NLDDCodeEditor['internals'];
+		/** When the content changes (detail: { value }) */
+		'onInput'?: (event: CustomEvent) => void;
+		/** When the content is committed on blur (detail: { value }) */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDCodeViewerProps = {
+		/** Visual style. `box` (default) is a framed card with rounded corners, padding, fill, and a 1px border ring. `simple` drops the entire frame — use when embedding inside a parent surface. */
+		'variant'?: NLDDCodeViewer['variant'];
+		/** Surface fill when `variant="box"`. */
+		'background'?: NLDDCodeViewer['background'];
+		/** Grammar to highlight with. Empty disables highlighting. */
+		'language'?: NLDDCodeViewer['language'];
+		/** Hide the copy-to-clipboard button (shown by default). */
+		'no-copy'?: NLDDCodeViewer['noCopy'];
+		/** Hide the copy-to-clipboard button (shown by default). */
+		'noCopy'?: NLDDCodeViewer['noCopy'];
+		/** Wrap long lines instead of horizontal scroll */
+		'wrap'?: NLDDCodeViewer['wrap'];
+		'copy-unavailable'?: NLDDCodeViewer['_copyUnavailable'];
+		'_copyUnavailable'?: NLDDCodeViewer['_copyUnavailable'];
+		/** Override translation keys (e.g. the copy button labels and the scroll-region label); unset keys fall back to Dutch. */
+		'translations'?: NLDDCodeViewer['translations'];
+	};
+
+	type NLDDCollectionProps = {
+		/** Layout mode: 'grid' | 'stack' | 'horizontal-scroll' (default: 'grid') */
+		'layout'?: NLDDCollection['layout'];
+		/** Show load-more button in grid/stack (default: false) */
+		'show-load-more'?: NLDDCollection['showLoadMore'];
+		/** Show load-more button in grid/stack (default: false) */
+		'showLoadMore'?: NLDDCollection['showLoadMore'];
+		/** Number of visible items per page (default: 24) */
+		'max-items'?: NLDDCollection['maxItems'];
+		/** Number of visible items per page (default: 24) */
+		'maxItems'?: NLDDCollection['maxItems'];
+		/** Automatically load more items when the button becomes visible */
+		'lazy-load'?: NLDDCollection['lazyLoad'];
+		/** Automatically load more items when the button becomes visible */
+		'lazyLoad'?: NLDDCollection['lazyLoad'];
+		/** Preferred width for each item (e.g. '280px', '20rem'). In grid layout used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width. */
+		'item-width'?: NLDDCollection['itemWidth'];
+		/** Preferred width for each item (e.g. '280px', '20rem'). In grid layout used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width. */
+		'itemWidth'?: NLDDCollection['itemWidth'];
+		/** Custom gap between items (any CSS length, e.g. '8px'). Overrides the responsive default at every breakpoint; unset keeps the default. */
+		'gap'?: NLDDCollection['gap'];
+		/** Translation overrides; unset keys fall back to Dutch. Available keys: 'components.collection.previous-action', 'components.collection.next-action', 'components.collection.load-more-action' */
+		'translations'?: NLDDCollection['translations'];
+		/** When the load-more button is clicked */
+		'onLoadMore'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDComboBoxProps = {
+		/** The selected form value */
+		'value'?: NLDDComboBox['value'];
+		/** The text shown in the input. May differ from `value` (e.g. value="nl" → text="Nederland"). Set this when pre-populating an existing record. If left empty and `value` matches a slotted menu item, the matching item's `text` is used automatically. */
+		'text'?: NLDDComboBox['text'];
+		/** Placeholder text for the input */
+		'placeholder'?: NLDDComboBox['placeholder'];
+		/** Size: 'sm' | 'md' (default: 'md') */
+		'size'?: NLDDComboBox['size'];
+		/** Marks the field as valid */
+		'valid'?: NLDDComboBox['valid'];
+		/** Marks the field as invalid */
+		'invalid'?: NLDDComboBox['invalid'];
+		/** Disabled state */
+		'disabled'?: NLDDComboBox['disabled'];
+		/** Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted. */
+		'allow-custom'?: NLDDComboBox['allowCustom'];
+		/** Allow committing free-typed values that match no option (Enter/blur). Default false: only menu options are accepted. */
+		'allowCustom'?: NLDDComboBox['allowCustom'];
+		/** 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. */
+		'autocomplete'?: NLDDComboBox['autocomplete'];
+		/** Maximum visible items before scrolling (default: 8) */
+		'max-items'?: NLDDComboBox['maxItems'];
+		/** Maximum visible items before scrolling (default: 8) */
+		'maxItems'?: NLDDComboBox['maxItems'];
+		/** Accessible label forwarded as aria-label to the input. Required for screen reader accessibility. */
+		'accessible-label'?: NLDDComboBox['accessibleLabel'];
+		/** Accessible label forwarded as aria-label to the input. Required for screen reader accessibility. */
+		'accessibleLabel'?: NLDDComboBox['accessibleLabel'];
+		/** Override translation keys; unset keys fall back to Dutch */
+		'translations'?: NLDDComboBox['translations'];
+		/** Disables browser spellchecking on the inner input */
+		'no-spellcheck'?: NLDDComboBox['noSpellcheck'];
+		/** Disables browser spellchecking on the inner input */
+		'noSpellcheck'?: NLDDComboBox['noSpellcheck'];
+		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
+		'width'?: NLDDComboBox['width'];
+		'internals'?: NLDDComboBox['internals'];
+		/** When the input value changes; detail: { value: string } */
+		'onInput'?: (event: CustomEvent) => void;
+		/** When an option is selected or a custom value is committed; detail: { value: string } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDContainerProps = {
+		/** 'stack' | 'row' | 'wrap' | 'grid' | 'columns' | 'lanes' (default: 'stack') */
+		'layout'?: NLDDContainer['layout'];
+		/** Force N columns (1-8) for layout=grid/columns/lanes */
+		'column-count'?: NLDDContainer['columnCount'];
+		/** Force N columns (1-8) for layout=grid/columns/lanes */
+		'columnCount'?: NLDDContainer['columnCount'];
+		/** Column count when this container is sm-wide */
+		'sm-column-count'?: NLDDContainer['smColumnCount'];
+		/** Column count when this container is sm-wide */
+		'smColumnCount'?: NLDDContainer['smColumnCount'];
+		/** Column count when this container is md-wide */
+		'md-column-count'?: NLDDContainer['mdColumnCount'];
+		/** Column count when this container is md-wide */
+		'mdColumnCount'?: NLDDContainer['mdColumnCount'];
+		/** Column count when this container is lg-wide */
+		'lg-column-count'?: NLDDContainer['lgColumnCount'];
+		/** Column count when this container is lg-wide */
+		'lgColumnCount'?: NLDDContainer['lgColumnCount'];
+		/** 'left' | 'center' | 'right' */
+		'horizontal-alignment'?: NLDDContainer['horizontalAlignment'];
+		/** 'left' | 'center' | 'right' */
+		'horizontalAlignment'?: NLDDContainer['horizontalAlignment'];
+		/** 'top' | 'center' | 'bottom' */
+		'vertical-alignment'?: NLDDContainer['verticalAlignment'];
+		/** 'top' | 'center' | 'bottom' */
+		'verticalAlignment'?: NLDDContainer['verticalAlignment'];
+		/** Gap between children */
+		'gap'?: NLDDContainer['gap'];
+		/** Gap at sm breakpoint */
+		'sm-gap'?: NLDDContainer['smGap'];
+		/** Gap at sm breakpoint */
+		'smGap'?: NLDDContainer['smGap'];
+		/** Gap at md breakpoint */
+		'md-gap'?: NLDDContainer['mdGap'];
+		/** Gap at md breakpoint */
+		'mdGap'?: NLDDContainer['mdGap'];
+		/** Gap at lg breakpoint */
+		'lg-gap'?: NLDDContainer['lgGap'];
+		/** Gap at lg breakpoint */
+		'lgGap'?: NLDDContainer['lgGap'];
+		/** Padding for all sides */
+		'padding'?: NLDDContainer['padding'];
+		/** Padding for left and right */
+		'padding-inline'?: NLDDContainer['paddingInline'];
+		/** Padding for left and right */
+		'paddingInline'?: NLDDContainer['paddingInline'];
+		/** Padding for top and bottom */
+		'padding-block'?: NLDDContainer['paddingBlock'];
+		/** Padding for top and bottom */
+		'paddingBlock'?: NLDDContainer['paddingBlock'];
+		/** Padding top */
+		'padding-top'?: NLDDContainer['paddingTop'];
+		/** Padding top */
+		'paddingTop'?: NLDDContainer['paddingTop'];
+		/** Padding right */
+		'padding-right'?: NLDDContainer['paddingRight'];
+		/** Padding right */
+		'paddingRight'?: NLDDContainer['paddingRight'];
+		/** Padding bottom */
+		'padding-bottom'?: NLDDContainer['paddingBottom'];
+		/** Padding bottom */
+		'paddingBottom'?: NLDDContainer['paddingBottom'];
+		/** Padding left Breakpoints for the sm/md/lg padding attributes below: sm is up to 640px, md is 641px to 1007px, lg is 1008px and up. Each is emitted as both an */
+		'padding-left'?: NLDDContainer['paddingLeft'];
+		/** Padding left Breakpoints for the sm/md/lg padding attributes below: sm is up to 640px, md is 641px to 1007px, lg is 1008px and up. Each is emitted as both an */
+		'paddingLeft'?: NLDDContainer['paddingLeft'];
+		/** Padding for all sides at sm */
+		'sm-padding'?: NLDDContainer['smPadding'];
+		/** Padding for all sides at sm */
+		'smPadding'?: NLDDContainer['smPadding'];
+		/** Padding left and right at sm */
+		'sm-padding-inline'?: NLDDContainer['smPaddingInline'];
+		/** Padding left and right at sm */
+		'smPaddingInline'?: NLDDContainer['smPaddingInline'];
+		/** Padding top and bottom at sm */
+		'sm-padding-block'?: NLDDContainer['smPaddingBlock'];
+		/** Padding top and bottom at sm */
+		'smPaddingBlock'?: NLDDContainer['smPaddingBlock'];
+		/** Padding top at sm */
+		'sm-padding-top'?: NLDDContainer['smPaddingTop'];
+		/** Padding top at sm */
+		'smPaddingTop'?: NLDDContainer['smPaddingTop'];
+		/** Padding right at sm */
+		'sm-padding-right'?: NLDDContainer['smPaddingRight'];
+		/** Padding right at sm */
+		'smPaddingRight'?: NLDDContainer['smPaddingRight'];
+		/** Padding bottom at sm */
+		'sm-padding-bottom'?: NLDDContainer['smPaddingBottom'];
+		/** Padding bottom at sm */
+		'smPaddingBottom'?: NLDDContainer['smPaddingBottom'];
+		/** Padding left at sm */
+		'sm-padding-left'?: NLDDContainer['smPaddingLeft'];
+		/** Padding left at sm */
+		'smPaddingLeft'?: NLDDContainer['smPaddingLeft'];
+		/** Padding for all sides at md */
+		'md-padding'?: NLDDContainer['mdPadding'];
+		/** Padding for all sides at md */
+		'mdPadding'?: NLDDContainer['mdPadding'];
+		/** Padding left and right at md */
+		'md-padding-inline'?: NLDDContainer['mdPaddingInline'];
+		/** Padding left and right at md */
+		'mdPaddingInline'?: NLDDContainer['mdPaddingInline'];
+		/** Padding top and bottom at md */
+		'md-padding-block'?: NLDDContainer['mdPaddingBlock'];
+		/** Padding top and bottom at md */
+		'mdPaddingBlock'?: NLDDContainer['mdPaddingBlock'];
+		/** Padding top at md */
+		'md-padding-top'?: NLDDContainer['mdPaddingTop'];
+		/** Padding top at md */
+		'mdPaddingTop'?: NLDDContainer['mdPaddingTop'];
+		/** Padding right at md */
+		'md-padding-right'?: NLDDContainer['mdPaddingRight'];
+		/** Padding right at md */
+		'mdPaddingRight'?: NLDDContainer['mdPaddingRight'];
+		/** Padding bottom at md */
+		'md-padding-bottom'?: NLDDContainer['mdPaddingBottom'];
+		/** Padding bottom at md */
+		'mdPaddingBottom'?: NLDDContainer['mdPaddingBottom'];
+		/** Padding left at md */
+		'md-padding-left'?: NLDDContainer['mdPaddingLeft'];
+		/** Padding left at md */
+		'mdPaddingLeft'?: NLDDContainer['mdPaddingLeft'];
+		/** Padding for all sides at lg */
+		'lg-padding'?: NLDDContainer['lgPadding'];
+		/** Padding for all sides at lg */
+		'lgPadding'?: NLDDContainer['lgPadding'];
+		/** Padding left and right at lg */
+		'lg-padding-inline'?: NLDDContainer['lgPaddingInline'];
+		/** Padding left and right at lg */
+		'lgPaddingInline'?: NLDDContainer['lgPaddingInline'];
+		/** Padding top and bottom at lg */
+		'lg-padding-block'?: NLDDContainer['lgPaddingBlock'];
+		/** Padding top and bottom at lg */
+		'lgPaddingBlock'?: NLDDContainer['lgPaddingBlock'];
+		/** Padding top at lg */
+		'lg-padding-top'?: NLDDContainer['lgPaddingTop'];
+		/** Padding top at lg */
+		'lgPaddingTop'?: NLDDContainer['lgPaddingTop'];
+		/** Padding right at lg */
+		'lg-padding-right'?: NLDDContainer['lgPaddingRight'];
+		/** Padding right at lg */
+		'lgPaddingRight'?: NLDDContainer['lgPaddingRight'];
+		/** Padding bottom at lg */
+		'lg-padding-bottom'?: NLDDContainer['lgPaddingBottom'];
+		/** Padding bottom at lg */
+		'lgPaddingBottom'?: NLDDContainer['lgPaddingBottom'];
+		/** Padding left at lg */
+		'lg-padding-left'?: NLDDContainer['lgPaddingLeft'];
+		/** Padding left at lg */
+		'lgPaddingLeft'?: NLDDContainer['lgPaddingLeft'];
+	};
+
+	type NLDDDateFieldProps = {
+		/** 'md' (standaard) | 'sm'. Wordt automatisch gezet door nldd-form-field. */
+		'size'?: NLDDDateField['size'];
+		/** De datum als ISO (jjjj-mm-dd). Met `range` een ISO 8601-interval: `jjjj-mm-dd/jjjj-mm-dd`. Leeg wanneer er geen geldige datum staat. */
+		'value'?: NLDDDateField['value'];
+		/** Kies een periode: twee invoervelden en een kalender in bereikmodus. */
+		'range'?: NLDDDateField['range'];
+		/** Vroegst toegestane datum als ISO (jjjj-mm-dd). */
+		'min'?: NLDDDateField['min'];
+		/** Laatst toegestane datum als ISO (jjjj-mm-dd). */
+		'max'?: NLDDDateField['max'];
+		/** Verbergt de kalenderknop. Standaard staat die knop er wel. */
+		'no-picker'?: NLDDDateField['noPicker'];
+		/** Verbergt de kalenderknop. Standaard staat die knop er wel. */
+		'noPicker'?: NLDDDateField['noPicker'];
+		/** Zet het id op de interne input. Wordt automatisch gezet door nldd-form-field. */
+		'input-id'?: NLDDDateField['inputId'];
+		/** Zet het id op de interne input. Wordt automatisch gezet door nldd-form-field. */
+		'inputId'?: NLDDDateField['inputId'];
+		/** Placeholdertekst. Zet hier geen formaat in; gebruik daarvoor de supporting-label van nldd-form-field. */
+		'placeholder'?: NLDDDateField['placeholder'];
+		/** Markeert het veld als ongeldig. */
+		'invalid'?: NLDDDateField['invalid'];
+		/** Markeert het veld als geldig. */
+		'valid'?: NLDDDateField['valid'];
+		/** Uitgeschakelde staat. */
+		'disabled'?: NLDDDateField['disabled'];
+		/** Alleen-lezen staat. */
+		'readonly'?: NLDDDateField['readonly'];
+		/** Verplichte staat. */
+		'required'?: NLDDDateField['required'];
+		/** Naam voor formulierverzending. */
+		'name'?: NLDDDateField['name'];
+		/** Autocomplete-hint, bijvoorbeeld 'bday'. */
+		'autocomplete'?: NLDDDateField['autocomplete'];
+		/** Toegankelijk label voor de interne input. Wordt automatisch gezet door nldd-form-field. */
+		'accessible-label'?: NLDDDateField['accessibleLabel'];
+		/** Toegankelijk label voor de interne input. Wordt automatisch gezet door nldd-form-field. */
+		'accessibleLabel'?: NLDDDateField['accessibleLabel'];
+		/** Ids voor aria-describedby. Wordt automatisch gezet door nldd-form-field. */
+		'error-message-ids'?: NLDDDateField['errorMessageIds'];
+		/** Ids voor aria-describedby. Wordt automatisch gezet door nldd-form-field. */
+		'errorMessageIds'?: NLDDDateField['errorMessageIds'];
+		/** Breedte. Standaard precies breed genoeg voor een datum plus de iconen; 'full' vult de container, of geef een eigen CSS-lengte. */
+		'width'?: NLDDDateField['width'];
+		/** Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands. */
+		'translations'?: NLDDDateField['translations'];
+		'internals'?: NLDDDateField['internals'];
+		/** Bij elke wijziging. detail: { value } met de ISO-datum, of '' zolang er geen geldige datum staat. */
+		'onInput'?: (event: CustomEvent) => void;
+		/** Wanneer de waarde is vastgelegd. detail: { value } met de ISO-datum, of ''. */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDDatePickerProps = {
+		/** De gekozen datum als ISO (jjjj-mm-dd). Alleen zonder `range`. */
+		'value'?: NLDDDatePicker['value'];
+		/** Begin van de periode als ISO. Alleen met `range`. */
+		'start'?: NLDDDatePicker['start'];
+		/** Einde van de periode als ISO. Alleen met `range`. */
+		'end'?: NLDDDatePicker['end'];
+		/** Breedte: `full` (vult de container) of een CSS-lengte (bv. `560px`). Leeg (standaard) is de intrinsieke breedte van zeven dagcellen; de cellen rekken mee met de opgegeven breedte. */
+		'width'?: NLDDDatePicker['width'];
+		/** Kies een periode in plaats van één datum. */
+		'range'?: NLDDDatePicker['range'];
+		/** Vroegst toegestane datum: ISO, of `today` met een verschuiving (`today-18y`). */
+		'min'?: NLDDDatePicker['min'];
+		/** Laatst toegestane datum: ISO, of `today` met een verschuiving (`today+1y`). */
+		'max'?: NLDDDatePicker['max'];
+		/** Eerste dag van de week, 0 is zondag. Standaard 1 (maandag). */
+		'first-day-of-week'?: NLDDDatePicker['firstDayOfWeek'];
+		/** Eerste dag van de week, 0 is zondag. Standaard 1 (maandag). */
+		'firstDayOfWeek'?: NLDDDatePicker['firstDayOfWeek'];
+		/** Toont ISO-weeknummers in een kolom links. */
+		'week-numbers'?: NLDDDatePicker['weekNumbers'];
+		/** Toont ISO-weeknummers in een kolom links. */
+		'weekNumbers'?: NLDDDatePicker['weekNumbers'];
+		/** Toegankelijke naam van de kalender. */
+		'accessible-label'?: NLDDDatePicker['accessibleLabel'];
+		/** Toegankelijke naam van de kalender. */
+		'accessibleLabel'?: NLDDDatePicker['accessibleLabel'];
+		/** Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands. */
+		'translations'?: NLDDDatePicker['translations'];
+		/** Marks individual dates as unselectable - weekends, holidays, dates already booked. */
+		'isDateUnavailable'?: NLDDDatePicker['isDateUnavailable'];
+		/** Wanneer een datum of een volledige periode is gekozen. detail: { value } of { start, end }. */
+		'onChange'?: (event: CustomEvent) => void;
+		/** Ook bij de tussenstap van een periode, wanneer alleen de begindatum staat. */
+		'onInput'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDDescriptionCellProps = {
+		/** 'full' | 'fit-content' | CSS length (e.g. '200px', '20rem'). Default: 'full' */
+		'width'?: NLDDDescriptionCell['width'];
+		/** Minimum width as CSS length (e.g. '80px', '5rem') */
+		'min-width'?: NLDDDescriptionCell['minWidth'];
+		/** Minimum width as CSS length (e.g. '80px', '5rem') */
+		'minWidth'?: NLDDDescriptionCell['minWidth'];
+		/** Maximum width as CSS length (e.g. '300px', '20rem') */
+		'max-width'?: NLDDDescriptionCell['maxWidth'];
+		/** Maximum width as CSS length (e.g. '300px', '20rem') */
+		'maxWidth'?: NLDDDescriptionCell['maxWidth'];
+		/** Minimum height as CSS length (e.g. '44px', '3rem') */
+		'min-height'?: NLDDDescriptionCell['minHeight'];
+		/** Minimum height as CSS length (e.g. '44px', '3rem') */
+		'minHeight'?: NLDDDescriptionCell['minHeight'];
+		/** Vertical alignment (default: 'center') */
+		'vertical-alignment'?: NLDDDescriptionCell['verticalAlignment'];
+		/** Vertical alignment (default: 'center') */
+		'verticalAlignment'?: NLDDDescriptionCell['verticalAlignment'];
+		'hide-below'?: NLDDDescriptionCell['hideBelow'];
+		'hideBelow'?: NLDDDescriptionCell['hideBelow'];
+		'hide-above'?: NLDDDescriptionCell['hideAbove'];
+		'hideAbove'?: NLDDDescriptionCell['hideAbove'];
+	};
+
+	type NLDDDividerProps = {
+	};
+
+	type NLDDDocumentTabBarProps = {
+		/** Accessible name for the navigation landmark */
+		'accessible-label'?: NLDDDocumentTabBar['accessibleLabel'];
+		/** Accessible name for the navigation landmark */
+		'accessibleLabel'?: NLDDDocumentTabBar['accessibleLabel'];
+		/** Renders a nav landmark instead of tablist; use when items have hrefs */
+		'navigation'?: NLDDDocumentTabBar['navigation'];
+		/** Translation overrides; unset keys fall back to Dutch. Available keys: 'components.document-tab-bar.overflow-action' (default: 'Meer') */
+		'translations'?: NLDDDocumentTabBar['translations'];
+		/** Fired when a tab is selected; detail: { item } */
+		'onTabchange'?: (event: CustomEvent) => void;
+		/** Fired when a tab is dismissed; detail: { item, nextItem } */
+		'onTabdismiss'?: (event: CustomEvent) => void;
+		/** Fired when the last tab is dismissed */
+		'onTabempty'?: (event: CustomEvent) => void;
+		/** Fired when tabs are reordered via drag; detail: { fromIndex, toIndex } */
+		'onNlddReorder'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDDocumentTabBarItemProps = {
+		/** Selected state (managed by nldd-document-tab-bar) */
+		'selected'?: NLDDDocumentTabBarItem['selected'];
+		/** Primary text */
+		'text'?: NLDDDocumentTabBarItem['text'];
+		/** Supporting text */
+		'supporting-text'?: NLDDDocumentTabBarItem['supportingText'];
+		/** Supporting text */
+		'supportingText'?: NLDDDocumentTabBarItem['supportingText'];
+		/** Short primary text (visible below 200px width) */
+		'short-text'?: NLDDDocumentTabBarItem['shortText'];
+		/** Short primary text (visible below 200px width) */
+		'shortText'?: NLDDDocumentTabBarItem['shortText'];
+		/** Short supporting text (visible below 200px width) */
+		'short-supporting-text'?: NLDDDocumentTabBarItem['shortSupportingText'];
+		/** Short supporting text (visible below 200px width) */
+		'shortSupportingText'?: NLDDDocumentTabBarItem['shortSupportingText'];
+		/** Optional link URL; renders an anchor instead of a div */
+		'href'?: NLDDDocumentTabBarItem['href'];
+		/** Fired when the item is activated; detail: { item } */
+		'onSelect'?: (event: CustomEvent) => void;
+		/** Fired when the dismiss button is clicked; detail: { item } */
+		'onDismiss'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDDragHandleCellProps = {
+		/** Handle size: 'sm' | 'md' (default: 'md') */
+		'size'?: NLDDDragHandleCell['size'];
+		/** Override translation keys; unset keys fall back to Dutch. Sets the handle's accessible label. */
+		'translations'?: NLDDDragHandleCell['translations'];
+	};
+
+	type NLDDDropdownProps = {
+		/** Size: 'xs' | 'sm' | 'md' (default: 'md') */
+		'size'?: NLDDDropdown['size'];
+		/** Marks the field as valid */
+		'valid'?: NLDDDropdown['valid'];
+		/** Marks the field as invalid */
+		'invalid'?: NLDDDropdown['invalid'];
+		/** Disabled state; also forwarded to the slotted select */
+		'disabled'?: NLDDDropdown['disabled'];
+		/** Reflects whether the native picker popup is open (driven internally) */
+		'expanded'?: NLDDDropdown['expanded'];
+		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
+		'width'?: NLDDDropdown['width'];
+		/** Bubbles up from the slotted select; detail: { value: string } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDFormProps = {
+		/** Default `label-alignment` voor descendant nldd-form-field en nldd-form-actions ('top' | 'right' | 'left'). Wordt naar descendants gepropageerd als `form-label-alignment`. Een eigen `label-alignment` op de descendant heeft voorrang via CSS-cascade. */
+		'label-alignment'?: NLDDForm['labelAlignment'];
+		/** Default `label-alignment` voor descendant nldd-form-field en nldd-form-actions ('top' | 'right' | 'left'). Wordt naar descendants gepropageerd als `form-label-alignment`. Een eigen `label-alignment` op de descendant heeft voorrang via CSS-cascade. */
+		'labelAlignment'?: NLDDForm['labelAlignment'];
+		/** The inner <form> element. Useful for `form.checkValidity()` etc. */
+		'form'?: NLDDForm['form'];
+		'onSubmit'?: (event: CustomEvent) => void;
+		'onReset'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDFormActionsProps = {
+		/** 'top' (default) | 'right' | 'left'. Een eigen waarde wint altijd over de inherited form-label-alignment. */
+		'label-alignment'?: NLDDFormActions['labelAlignment'];
+		/** 'top' (default) | 'right' | 'left'. Een eigen waarde wint altijd over de inherited form-label-alignment. */
+		'labelAlignment'?: NLDDFormActions['labelAlignment'];
+	};
+
+	type NLDDFormFieldProps = {
+		/** 'top' (default) | 'right' | 'left'. Een eigen waarde wint altijd over de inherited form-label-alignment. */
+		'label-alignment'?: NLDDFormField['labelAlignment'];
+		/** 'top' (default) | 'right' | 'left'. Een eigen waarde wint altijd over de inherited form-label-alignment. */
+		'labelAlignment'?: NLDDFormField['labelAlignment'];
+		/** Field label text. Omit for no-label layout. */
+		'label'?: NLDDFormField['label'];
+		/** Short supporting text below the label. Same typography as optional badge. */
+		'supporting-label'?: NLDDFormField['supportingLabel'];
+		/** Short supporting text below the label. Same typography as optional badge. */
+		'supportingLabel'?: NLDDFormField['supportingLabel'];
+		/** Shows an optional badge next to the label. */
+		'optional'?: NLDDFormField['optional'];
+		/** Text for the optional badge. Defaults to 'Optioneel'. */
+		'optional-label'?: NLDDFormField['optionalLabel'];
+		/** Text for the optional badge. Defaults to 'Optioneel'. */
+		'optionalLabel'?: NLDDFormField['optionalLabel'];
+	};
+
+	type NLDDFormFieldErrorTextProps = {
+		/** Visibility managed automatically by nldd-form-field. */
+		'invalid'?: NLDDFormFieldErrorText['invalid'];
+	};
+
+	type NLDDFormFieldHelpTextProps = {
+	};
+
+	type NLDDFormSectionProps = {
+		/** Heading-tekst (gerenderd in `<legend>`). */
+		'text'?: NLDDFormSection['text'];
+		/** Korte beschrijving onder de heading. Houd ≤ ~80 tekens (zie a11y-note). */
+		'supporting-text'?: NLDDFormSection['supportingText'];
+		/** Korte beschrijving onder de heading. Houd ≤ ~80 tekens (zie a11y-note). */
+		'supportingText'?: NLDDFormSection['supportingText'];
+	};
+
+	type NLDDFullBleedSectionProps = {
+		/** Body max-width: 'full' removes the constraint so the section spans the full available width. Any CSS length (e.g. '480px') overrides the default max-width. */
+		'width'?: NLDDFullBleedSection['width'];
+		/** Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface). */
+		'background'?: NLDDFullBleedSection['background'];
+		/** Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme). */
+		'scheme'?: NLDDFullBleedSection['scheme'];
+		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
+		'padding-block'?: NLDDFullBleedSection['paddingBlock'];
+		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
+		'paddingBlock'?: NLDDFullBleedSection['paddingBlock'];
+		/** Top padding override. */
+		'padding-top'?: NLDDFullBleedSection['paddingTop'];
+		/** Top padding override. */
+		'paddingTop'?: NLDDFullBleedSection['paddingTop'];
+		/** Bottom padding override. */
+		'padding-bottom'?: NLDDFullBleedSection['paddingBottom'];
+		/** Bottom padding override. */
+		'paddingBottom'?: NLDDFullBleedSection['paddingBottom'];
+		/** Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}). */
+		'sm-padding-block'?: NLDDFullBleedSection['smPaddingBlock'];
+		/** Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}). */
+		'smPaddingBlock'?: NLDDFullBleedSection['smPaddingBlock'];
+		'sm-padding-top'?: NLDDFullBleedSection['smPaddingTop'];
+		'smPaddingTop'?: NLDDFullBleedSection['smPaddingTop'];
+		'sm-padding-bottom'?: NLDDFullBleedSection['smPaddingBottom'];
+		'smPaddingBottom'?: NLDDFullBleedSection['smPaddingBottom'];
+		'md-padding-block'?: NLDDFullBleedSection['mdPaddingBlock'];
+		'mdPaddingBlock'?: NLDDFullBleedSection['mdPaddingBlock'];
+		'md-padding-top'?: NLDDFullBleedSection['mdPaddingTop'];
+		'mdPaddingTop'?: NLDDFullBleedSection['mdPaddingTop'];
+		'md-padding-bottom'?: NLDDFullBleedSection['mdPaddingBottom'];
+		'mdPaddingBottom'?: NLDDFullBleedSection['mdPaddingBottom'];
+		'lg-padding-block'?: NLDDFullBleedSection['lgPaddingBlock'];
+		'lgPaddingBlock'?: NLDDFullBleedSection['lgPaddingBlock'];
+		'lg-padding-top'?: NLDDFullBleedSection['lgPaddingTop'];
+		'lgPaddingTop'?: NLDDFullBleedSection['lgPaddingTop'];
+		'lg-padding-bottom'?: NLDDFullBleedSection['lgPaddingBottom'];
+		'lgPaddingBottom'?: NLDDFullBleedSection['lgPaddingBottom'];
+		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
+		'height'?: NLDDFullBleedSection['height'];
+	};
+
+	type NLDDHeroProps = {
+		/** Positie van het tekstpaneel (default: 'bottom-left'); 'left'/'right' beslaan de volle hoogte */
+		'main-position'?: NLDDHero['mainPosition'];
+		/** Positie van het tekstpaneel (default: 'bottom-left'); 'left'/'right' beslaan de volle hoogte */
+		'mainPosition'?: NLDDHero['mainPosition'];
+		/** Breedte van het paneel (default: '1/2'); 'full' maakt een volle boven- of onderstrook en wordt bij 'left'/'right' genegeerd */
+		'main-width'?: NLDDHero['mainWidth'];
+		/** Breedte van het paneel (default: '1/2'); 'full' maakt een volle boven- of onderstrook en wordt bij 'left'/'right' genegeerd */
+		'mainWidth'?: NLDDHero['mainWidth'];
+		/** Vlakkleur van het paneel: 'base' (de base surface) of een categoriekleur — 'accent' (default) of een rijkskleur zoals 'lintblauw'|'donkerblauw'|'oranje' */
+		'main-background'?: NLDDHero['mainBackground'];
+		/** Vlakkleur van het paneel: 'base' (de base surface) of een categoriekleur — 'accent' (default) of een rijkskleur zoals 'lintblauw'|'donkerblauw'|'oranje' */
+		'mainBackground'?: NLDDHero['mainBackground'];
+		/** Aspect ratio van het mediavlak (CSS-vorm, '16/9' of '16:9'); default '21/9'. Bepaalt op md/lg de hoogte van de hero, op sm de hoogte van het mediavlak */
+		'media-aspect-ratio'?: NLDDHero['mediaAspectRatio'];
+		/** Aspect ratio van het mediavlak (CSS-vorm, '16/9' of '16:9'); default '21/9'. Bepaalt op md/lg de hoogte van de hero, op sm de hoogte van het mediavlak */
+		'mediaAspectRatio'?: NLDDHero['mediaAspectRatio'];
+		/** Body max-width; 'full' verwijdert de begrenzing (sectie-API) */
+		'width'?: NLDDHero['width'];
+		/** Bron van het mediavlak (alternatief voor de media-slot); genegeerd zodra de media-slot gevuld is */
+		'media-src'?: NLDDHero['mediaSrc'];
+		/** Bron van het mediavlak (alternatief voor de media-slot); genegeerd zodra de media-slot gevuld is */
+		'mediaSrc'?: NLDDHero['mediaSrc'];
+		/** Responsive source set voor media-src */
+		'media-srcset'?: NLDDHero['mediaSrcset'];
+		/** Responsive source set voor media-src */
+		'mediaSrcset'?: NLDDHero['mediaSrcset'];
+		/** Source sizes-hint voor media-src */
+		'media-sizes'?: NLDDHero['mediaSizes'];
+		/** Source sizes-hint voor media-src */
+		'mediaSizes'?: NLDDHero['mediaSizes'];
+		/** Alt-tekst voor media-src; leeg = decoratief */
+		'media-alt'?: NLDDHero['mediaAlt'];
+		/** Alt-tekst voor media-src; leeg = decoratief */
+		'mediaAlt'?: NLDDHero['mediaAlt'];
+		/** Surface achter de hero (sectie-API) */
+		'background'?: NLDDHero['background'];
+		/** Kleurschema (sectie-API) */
+		'scheme'?: NLDDHero['scheme'];
+		/** Blokpadding-override, ook per rand en responsief (sectie-API) */
+		'padding-block'?: NLDDHero['paddingBlock'];
+		/** Blokpadding-override, ook per rand en responsief (sectie-API) */
+		'paddingBlock'?: NLDDHero['paddingBlock'];
+		'padding-top'?: NLDDHero['paddingTop'];
+		'paddingTop'?: NLDDHero['paddingTop'];
+		'padding-bottom'?: NLDDHero['paddingBottom'];
+		'paddingBottom'?: NLDDHero['paddingBottom'];
+		'sm-padding-block'?: NLDDHero['smPaddingBlock'];
+		'smPaddingBlock'?: NLDDHero['smPaddingBlock'];
+		'sm-padding-top'?: NLDDHero['smPaddingTop'];
+		'smPaddingTop'?: NLDDHero['smPaddingTop'];
+		'sm-padding-bottom'?: NLDDHero['smPaddingBottom'];
+		'smPaddingBottom'?: NLDDHero['smPaddingBottom'];
+		'md-padding-block'?: NLDDHero['mdPaddingBlock'];
+		'mdPaddingBlock'?: NLDDHero['mdPaddingBlock'];
+		'md-padding-top'?: NLDDHero['mdPaddingTop'];
+		'mdPaddingTop'?: NLDDHero['mdPaddingTop'];
+		'md-padding-bottom'?: NLDDHero['mdPaddingBottom'];
+		'mdPaddingBottom'?: NLDDHero['mdPaddingBottom'];
+		'lg-padding-block'?: NLDDHero['lgPaddingBlock'];
+		'lgPaddingBlock'?: NLDDHero['lgPaddingBlock'];
+		'lg-padding-top'?: NLDDHero['lgPaddingTop'];
+		'lgPaddingTop'?: NLDDHero['lgPaddingTop'];
+		'lg-padding-bottom'?: NLDDHero['lgPaddingBottom'];
+		'lgPaddingBottom'?: NLDDHero['lgPaddingBottom'];
+		/** Minimale hoogte van de sectie (sectie-API) */
+		'height'?: NLDDHero['height'];
+	};
+
+	type NLDDIconProps = {
+		/** The name of the icon to display */
+		'name'?: NLDDIcon['name'];
+		/** `full` (default) fills the container; `inherit` follows the surrounding text (1em); or a fixed spacer-aligned size in px (16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Empty behaves as `full`. */
+		'size'?: NLDDIcon['size'];
+		/** Functional (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or rijkskleur (`lintblauw`, `donkerblauw`, `hemelblauw`, `lichtblauw`, `paars`, `violet`, `robijnrood`, `roze`, `rood`, `oranje`, `donkergeel`, `geel`, `donkerbruin`, `bruin`, `donkergroen`, `groen`, `mosgroen`, `mintgroen`). Empty = inherit `color` from parent. */
+		'color'?: NLDDIcon['color'];
+	};
+
+	type NLDDIconButtonProps = {
+		/** Button variant: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted' | 'primary' | 'secondary' | 'destructive'. De inherit-varianten leiden hun kleuren af van currentColor, voor knoppen op gekleurde vlakken. */
+		'variant'?: NLDDIconButton['variant'];
+		/** 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) */
+		'hide-lg-text'?: NLDDIconButton['hideLgText'];
+		/** In lg size, hides the text label and enlarges the icon by one step (28px) */
+		'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'];
+		/** Disabled state */
+		'disabled'?: NLDDIconButton['disabled'];
+		/** Removes the per-variant 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). */
+		'noHighlightBorder'?: NLDDIconButton['noHighlightBorder'];
+		/** Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set) */
+		'type'?: NLDDIconButton['type'];
+		/** Whether the button opens a menu or popover and shows chevron next to the icon */
+		'expandable'?: NLDDIconButton['expandable'];
+		/** Whether the popover/menu controlled by this button is currently open. Forwarded as aria-expanded on the inner button; toggles the is-expanded visual state. */
+		'expanded'?: NLDDIconButton['expanded'];
+		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (e.g. an nldd-token in nldd-token-field) that manages focus itself. Still mouse- and script-focusable. */
+		'no-tab'?: NLDDIconButton['noTab'];
+		/** Takes the button out of the tab order (tabindex="-1"), for a control owned by a roving container (e.g. an nldd-token in nldd-token-field) that manages focus itself. Still mouse- and script-focusable. */
+		'noTab'?: NLDDIconButton['noTab'];
+		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. */
+		'popup-type'?: NLDDIconButton['popupType'];
+		/** Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state. */
+		'popupType'?: NLDDIconButton['popupType'];
+		/** Width mode: 'full' (stretches to container) or any CSS length (e.g. '240px') */
+		'width'?: NLDDIconButton['width'];
+		/** ID of a popover element to toggle; forwarded to the inner <button> */
+		'popovertarget'?: NLDDIconButton['popovertarget'];
+		/** Button text, used as aria-label and shown below the icon in lg size */
+		'text'?: NLDDIconButton['text'];
+		/** Icon name for the nldd-icon element. Defaults to a placeholder icon when neither this attribute nor the icon slot is set. */
+		'icon'?: NLDDIconButton['icon'];
+		/** Accessible label for screen readers. Overrides text as aria-label and title tooltip. Use when the visible text alone lacks context for screen readers (e.g. text "Toon", accessible-label "Toon wachtwoord"). The text is still shown visually in lg size regardless. */
+		'accessible-label'?: NLDDIconButton['accessibleLabel'];
+		/** Accessible label for screen readers. Overrides text as aria-label and title tooltip. Use when the visible text alone lacks context for screen readers (e.g. text "Toon", accessible-label "Toon wachtwoord"). The text is still shown visually in lg size regardless. */
+		'accessibleLabel'?: NLDDIconButton['accessibleLabel'];
+		/** Forwarded to the inner nldd-tooltip's `timing`: 'default' (700 ms show-delay), 'instant', or 'never' (suppress the visual tooltip; screen readers still get the aria-label). Use 'never' when the surrounding context already explains the button (e.g. spin buttons in nldd-number-field, the chevron in nldd-split-button). */
+		'tooltip-timing'?: NLDDIconButton['tooltipTiming'];
+		/** Forwarded to the inner nldd-tooltip's `timing`: 'default' (700 ms show-delay), 'instant', or 'never' (suppress the visual tooltip; screen readers still get the aria-label). Use 'never' when the surrounding context already explains the button (e.g. spin buttons in nldd-number-field, the chevron in nldd-split-button). */
+		'tooltipTiming'?: NLDDIconButton['tooltipTiming'];
+		/** When set, renders an <a> element instead of <button> */
+		'href'?: NLDDIconButton['href'];
+		/** Link target (e.g. '_blank'); only used when href is set. With '_blank' the "opens in new tab" announcement is folded into the aria-label for screen readers (WCAG 2.1 SC 3.2.2). */
+		'target'?: NLDDIconButton['target'];
+		/** Link rel attribute; defaults to 'noopener noreferrer' when target is '_blank' */
+		'rel'?: NLDDIconButton['rel'];
+		/** Override translation keys (e.g. the "opens in new tab" announcement); unset keys fall back to Dutch. */
+		'translations'?: NLDDIconButton['translations'];
+		/** Direct element reference to the popover this button invokes — IDL-only counterpart to `popovertarget` that works across shadow boundaries. Use this when the popover lives in a different tree (e.g. an `nldd-menu` reparented to `<body>`) so the browser still recognizes this button as the popover's invoker and excludes it from the popover light-dismiss algorithm. Set programmatically; not reflected to an HTML attribute (the attribute form is `popovertarget`, ID-based). */
+		'popoverTargetElement'?: NLDDIconButton['popoverTargetElement'];
+		/** Action the browser performs when the button is clicked, mirroring the standard `popovertargetaction` attribute. Defaults to `'toggle'`. Use `'show'` when a separate handler owns the close path (e.g. the consumer toggles the popover programmatically) so the browser's default action doesn't double-fire. */
+		'popoverTargetAction'?: NLDDIconButton['popoverTargetAction'];
+		/** When button is clicked (not fired when disabled) */
+		'onClick'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDIconCellProps = {
+		/** Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center') */
+		'vertical-alignment'?: NLDDIconCell['verticalAlignment'];
+		/** Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center') */
+		'verticalAlignment'?: NLDDIconCell['verticalAlignment'];
+		/** Size: '16' | '20' | '24' | '32' (default: '24') */
+		'size'?: NLDDIconCell['size'];
+		/** Color variant of the icon (default: 'default') */
+		'color'?: NLDDIconCell['color'];
+		/** Icon name (renders `<nldd-icon>`). Takes precedence over the default slot. */
+		'icon'?: NLDDIconCell['icon'];
+		'hide-below'?: NLDDIconCell['hideBelow'];
+		'hideBelow'?: NLDDIconCell['hideBelow'];
+		'hide-above'?: NLDDIconCell['hideAbove'];
+		'hideAbove'?: NLDDIconCell['hideAbove'];
+	};
+
+	type NLDDImageProps = {
+		/** Image URL */
+		'src'?: NLDDImage['src'];
+		/** Alt text. Required unless `decorative`. */
+		'alt'?: NLDDImage['alt'];
+		/** Responsive source set */
+		'srcset'?: NLDDImage['srcset'];
+		/** Source sizes hint */
+		'sizes'?: NLDDImage['sizes'];
+		/** Display width. `full` (default) fills the parent. A numeric value sets host `max-width` AND the `<img>` layout-hint width. */
+		'width'?: NLDDImage['width'];
+		/** Intrinsic height (for layout reservation) */
+		'height'?: NLDDImage['height'];
+		/** Loading strategy (default: 'lazy'). Lazy defers fetch until the image is near the viewport — the right choice for below-the-fold content. Set to 'eager' on images that appear in the initial viewport, especially the LCP candidate (hero illustration, top-of-list thumbnail); leaving them lazy silently regresses Core Web Vitals because the LCP fetch waits for the intersection observer. Pair with `fetchpriority="high"` on the LCP image for the strongest signal. */
+		'loading'?: NLDDImage['loading'];
+		/** Decoding hint (default: 'async') */
+		'decoding'?: NLDDImage['decoding'];
+		/** Fetch priority hint */
+		'fetchpriority'?: NLDDImage['fetchPriority'];
+		/** Fetch priority hint */
+		'fetchPriority'?: NLDDImage['fetchPriority'];
+		/** Aspect ratio in CSS form (e.g. "16/9", "1/1", "4/3"). "16:9" colon notation is also accepted for convenience. */
+		'aspect-ratio'?: NLDDImage['aspectRatio'];
+		/** Aspect ratio in CSS form (e.g. "16/9", "1/1", "4/3"). "16:9" colon notation is also accepted for convenience. */
+		'aspectRatio'?: NLDDImage['aspectRatio'];
+		/** default: 'cover' */
+		'object-fit'?: NLDDImage['objectFit'];
+		/** default: 'cover' */
+		'objectFit'?: NLDDImage['objectFit'];
+		/** default: 'center' */
+		'object-position'?: NLDDImage['objectPosition'];
+		/** default: 'center' */
+		'objectPosition'?: NLDDImage['objectPosition'];
+		/** Corner shape (default: 'square') */
+		'shape'?: NLDDImage['shape'];
+		/** Caption text shown below the image */
+		'caption'?: NLDDImage['caption'];
+		/** Smaller credit/attribution text shown beside the caption */
+		'credit'?: NLDDImage['credit'];
+		/** Decorative image: alt is forced empty + aria-hidden */
+		'decorative'?: NLDDImage['decorative'];
+		/** Low-quality image placeholder as a CSV string `"base,c1,c2,c3,c4,c5,c6"` — seven 0-255 bytes, each packing an 8-bit Oklab triplet (2 bits L, 3 bits a, 3 bits b). The first is the base color shown outside the cell gradients; the other six are per-cell colors in row-major 3×2 order. Generate via the encoder in `lqip-encoder.ts` or via the "LQIP encoder tool" Storybook story. Extends Lean Rada's CSS-only LQIP (https://leanrada.com/notes/css-only-lqip/) with per-cell hue — Lean's original format encodes grayscale cells only; ours encodes a color per cell so multi-color subjects survive the placeholder. */
+		'lqip'?: NLDDImage['lqip'];
+		/** Override translation keys (e.g. the message shown when the image fails to load); unset keys fall back to Dutch. */
+		'translations'?: NLDDImage['translations'];
+	};
+
+	type NLDDInlineDialogProps = {
+		/** Semantic variant. 'alert' / 'success' force a matching icon and color; 'loading' shows an nldd-activity-indicator (a role="status" spinner announcing "Laden") in place of the icon — for an empty state that is still loading. */
+		'variant'?: NLDDInlineDialog['variant'];
+		/** Typography size: 'md' (default) keeps body-md text + body-sm supporting; 'lg' bumps both up a step. */
+		'size'?: NLDDInlineDialog['size'];
+		/** Name of the nldd-icon icon above the text; absent when not set. Ignored when variant is set. */
+		'icon'?: NLDDInlineDialog['icon'];
+		/** 'secondary' | 'accent' | 'critical' | 'warning' | 'success'. Overrides the default and variant icon color. */
+		'icon-color'?: NLDDInlineDialog['iconColor'];
+		/** 'secondary' | 'accent' | 'critical' | 'warning' | 'success'. Overrides the default and variant icon color. */
+		'iconColor'?: NLDDInlineDialog['iconColor'];
+		/** Main text (heading or paragraph, depending on heading-level) */
+		'text'?: NLDDInlineDialog['text'];
+		/** Supporting text below the heading */
+		'supporting-text'?: NLDDInlineDialog['supportingText'];
+		/** Supporting text below the heading */
+		'supportingText'?: NLDDInlineDialog['supportingText'];
+		/** Renders text as h1–h6; absent renders a p */
+		'heading-level'?: NLDDInlineDialog['headingLevel'];
+		/** Renders text as h1–h6; absent renders a p */
+		'headingLevel'?: NLDDInlineDialog['headingLevel'];
+	};
+
+	type NLDDJustInTimeEducationProps = {
+		/** Toon de coach-mark. App-gestuurd; standaard false. */
+		'active'?: NLDDJustInTimeEducation['active'];
+		/** Titel van de callout. */
+		'text'?: NLDDJustInTimeEducation['text'];
+		/** Ondersteunende tekst onder de titel. */
+		'supporting-text'?: NLDDJustInTimeEducation['supportingText'];
+		/** Ondersteunende tekst onder de titel. */
+		'supportingText'?: NLDDJustInTimeEducation['supportingText'];
+		/** 'auto' | 'top' | 'bottom' | 'left' | 'right' (standaard 'auto'). */
+		'placement'?: NLDDJustInTimeEducation['placement'];
+		/** Toon de dismiss-knop en sta sluiten toe via 1 klik/toets buiten de coach-mark. Standaard false: dan beheert de consumer het sluiten zelf. */
+		'dismissable'?: NLDDJustInTimeEducation['dismissable'];
+		/** Pijllengte en dus de afstand tussen card en control, als CSS-lengte (bijv. \`333px\`, \`30vh\`). Leeg = DS-standaard; onder 40px wordt geklemd. */
+		'arrow-length'?: NLDDJustInTimeEducation['arrowLength'];
+		/** Pijllengte en dus de afstand tussen card en control, als CSS-lengte (bijv. \`333px\`, \`30vh\`). Leeg = DS-standaard; onder 40px wordt geklemd. */
+		'arrowLength'?: NLDDJustInTimeEducation['arrowLength'];
+		/** Verberg de pijl; de card staat dan dicht tegen het control. */
+		'no-arrow'?: NLDDJustInTimeEducation['noArrow'];
+		/** Verberg de pijl; de card staat dan dicht tegen het control. */
+		'noArrow'?: NLDDJustInTimeEducation['noArrow'];
+		'translations'?: NLDDJustInTimeEducation['translations'];
+		/** Wanneer de coach-mark sluit. detail: { reason: 'completed' | 'dismissed' | 'ignored' }. */
+		'onNlddClose'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDKeyboardShortcutProps = {
+		/** Toetsen gescheiden door '+' (bijv. 'Cmd+K' of 'Ctrl+Shift+P'). Gebruik '+++' voor een letterlijke '+' toets: 'Ctrl+++' wordt 'Ctrl' + '+'. Voor complexere scenario's (bijv. combo met meerdere '+' keys) kun je in plaats van het keys-attribuut de default slot gebruiken met eigen <kbd> elementen. */
+		'keys'?: NLDDKeyboardShortcut['keys'];
+		/** Optionele override voor macOS (incl. iPhone/iPad/iPod). */
+		'mac-keys'?: NLDDKeyboardShortcut['macKeys'];
+		/** Optionele override voor macOS (incl. iPhone/iPad/iPod). */
+		'macKeys'?: NLDDKeyboardShortcut['macKeys'];
+		/** Optionele override voor Windows. */
+		'windows-keys'?: NLDDKeyboardShortcut['windowsKeys'];
+		/** Optionele override voor Windows. */
+		'windowsKeys'?: NLDDKeyboardShortcut['windowsKeys'];
+		/** Optionele override voor Linux/ChromeOS. */
+		'linux-keys'?: NLDDKeyboardShortcut['linuxKeys'];
+		/** Optionele override voor Linux/ChromeOS. */
+		'linuxKeys'?: NLDDKeyboardShortcut['linuxKeys'];
+		/** Grootte: 'sm' | 'md' | 'inherit' (default: 'md'). 'inherit' neemt de font-size over van de container; bij de box-variant schalen de keycaps dan mee in em. */
+		'size'?: NLDDKeyboardShortcut['size'];
+		/** 'box' (default) toont elke toets als keycap met vulling en highlight-rand; 'simple' toont de toetsen als platte tekst met scheidingstekens — lichter, voor inline gebruik zoals in een menu-item. */
+		'variant'?: NLDDKeyboardShortcut['variant'];
+		/** 'neutral' (default) gebruikt de eigen component-kleuren. 'inherit' laat de toetsen en scheidingstekens de omringende tekstkleur (currentColor) volgen, met een doorschijnende contrast-vulling en highlight-rand — handig op een gevulde vlakkleur of een gemarkeerde rij. */
+		'color'?: NLDDKeyboardShortcut['color'];
+		/** Toon ook op touch-only devices waar shortcuts niet aanroepbaar zijn. */
+		'always-visible'?: NLDDKeyboardShortcut['alwaysVisible'];
+		/** Toon ook op touch-only devices waar shortcuts niet aanroepbaar zijn. */
+		'alwaysVisible'?: NLDDKeyboardShortcut['alwaysVisible'];
+	};
+
+	type NLDDLinkProps = {
+		/** Link doel */
+		'href'?: NLDDLink['href'];
+		/** Link target (bijv. '_blank'); stelt rel automatisch bij. Bij '_blank' voegt de link een visueel verborgen "Opent in nieuw tabblad"-melding toe voor screenreaders (WCAG 2.1 SC 3.2.2). */
+		'target'?: NLDDLink['target'];
+		/** Link rel attribuut; standaard 'noopener noreferrer' bij target='_blank' */
+		'rel'?: NLDDLink['rel'];
+		/** Tekstgrootte: 'xs' | 'sm' | 'md' | 'lg' | 'inherit'. Leeg = inherit. */
+		'size'?: NLDDLink['size'];
+		/** Link tekst (alternatief voor default slot) */
+		'text'?: NLDDLink['text'];
+		/** Icoon voor de tekst */
+		'start-icon'?: NLDDLink['startIcon'];
+		/** Icoon voor de tekst */
+		'startIcon'?: NLDDLink['startIcon'];
+		/** Icoon na de tekst */
+		'end-icon'?: NLDDLink['endIcon'];
+		/** Icoon na de tekst */
+		'endIcon'?: NLDDLink['endIcon'];
+		/** Toegankelijk label voor screen readers */
+		'accessible-label'?: NLDDLink['accessibleLabel'];
+		/** Toegankelijk label voor screen readers */
+		'accessibleLabel'?: NLDDLink['accessibleLabel'];
+		/** Uitgeschakelde staat */
+		'disabled'?: NLDDLink['disabled'];
+		/** Overschrijf vertaalsleutels (bijv. de "Opent in nieuw tabblad"-melding); niet-gezette sleutels vallen terug op Nederlands. */
+		'translations'?: NLDDLink['translations'];
+	};
+
+	type NLDDListProps = {
+		/** Visual style (default 'simple'): `simple` is a plain vertical strip with no chrome, `box` a framed card with rounded corners, fill and inset border ring */
+		'variant'?: NLDDList['variant'];
+		/** Surface fill for `variant="box"` (default 'tinted'). Use `base` on an already-tinted parent. No effect with `variant="simple"`. */
+		'background'?: NLDDList['background'];
+		/** A11y role and behavior (default 'list'). See the docblock above. */
+		'type'?: NLDDList['type'];
+		/** Enables drag-to-reorder and pushes `reorderable` onto the items. Only valid with `type="list"`; wins over `arrow-navigation` when both are set. */
+		'reorderable'?: NLDDList['reorderable'];
+		/** Hides the dividers between list items */
+		'no-dividers'?: NLDDList['noDividers'];
+		/** Hides the dividers between list items */
+		'noDividers'?: NLDDList['noDividers'];
+		/** Roving-tabindex arrow-key navigation: ArrowUp/ArrowDown move focus between the rows, Home/End jump to first/last, and the list becomes a single tab stop. Implied by `type="tree"` (which adds ArrowLeft/ArrowRight, see above). Ignored when `reorderable` is active on a `type="list"`, and in listbox mode. */
+		'arrow-navigation'?: NLDDList['arrowNavigation'];
+		/** Roving-tabindex arrow-key navigation: ArrowUp/ArrowDown move focus between the rows, Home/End jump to first/last, and the list becomes a single tab stop. Implied by `type="tree"` (which adds ArrowLeft/ArrowRight, see above). Ignored when `reorderable` is active on a `type="list"`, and in listbox mode. */
+		'arrowNavigation'?: NLDDList['arrowNavigation'];
+		/** Listbox only: caps the options' scroll region at this CSS length (e.g. '320px'). Unset means no cap. */
+		'height'?: NLDDList['height'];
+		/** Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled. */
+		'empty-text'?: NLDDList['emptyText'];
+		/** Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled. */
+		'emptyText'?: NLDDList['emptyText'];
+		/** Supporting text for the default empty-state dialog. Ignored when `[slot=empty]` is filled. */
+		'empty-supporting-text'?: NLDDList['emptySupportingText'];
+		/** Supporting text for the default empty-state dialog. Ignored when `[slot=empty]` is filled. */
+		'emptySupportingText'?: NLDDList['emptySupportingText'];
+		/** Accessible name, forwarded to the list in `type="list"` and to the search field in `type="listbox"`. For `type="navigation"` set `aria-label` / `aria-labelledby` on the element itself. Falls back to the i18n default. */
+		'accessible-label'?: NLDDList['accessibleLabel'];
+		/** Accessible name, forwarded to the list in `type="list"` and to the search field in `type="listbox"`. For `type="navigation"` set `aria-label` / `aria-labelledby` on the element itself. Falls back to the i18n default. */
+		'accessibleLabel'?: NLDDList['accessibleLabel'];
+		/** Override translation keys; unset keys fall back to Dutch */
+		'translations'?: NLDDList['translations'];
+		/** Reorderable `type="list"`: `{ fromIndex, toIndex }` on drop */
+		'onNlddReorder'?: (event: CustomEvent) => void;
+		/** `type="listbox"`: search value changed; `{ value }`. Toggle `[hidden]` on items to filter. */
+		'onInput'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDListItemProps = {
+		/** Row size (default: 'md'). Pushed onto the cells whose `size` means the same scale (nldd-text-cell, nldd-drag-handle-cell), so it is written once per row instead of once per cell. A size set on the cell itself wins. Cells where `size` means something else — pixels on nldd-icon-cell / nldd-spacer-cell, a heading scale on nldd-title-cell — are left alone. */
+		'size'?: NLDDListItem['size'];
+		/** Marks the item as selected. Selection is consumer-managed; the list never sets it. In a `navigation` parent it puts `aria-current="page"` on the inner action, in a `listbox` parent it drives `aria-selected`. */
+		'selected'?: NLDDListItem['selected'];
+		/** Renders the item as a `<button>`; ignored when `href` is set (a link wins) */
+		'button'?: NLDDListItem['button'];
+		/** Makes the whole row a `role="checkbox"` control; ignored when `href` is set */
+		'checkbox'?: NLDDListItem['checkbox'];
+		/** Checked state of a `checkbox` row; the item toggles it on activation */
+		'checked'?: NLDDListItem['checked'];
+		/** Disclosure state. Drives the `children` group's visibility AND supplies `aria-expanded` — to the row's own control when the row is interactive, or to the segmented action marked `disclosure`. Written once either way; the item DEV-warns when there is nowhere for it to live. */
+		'expanded'?: NLDDListItem['expanded'];
+		/** Renders the item as an `<a>` with this URL. Takes precedence over `button`; without either the item is a plain container with no action. */
+		'href'?: NLDDListItem['href'];
+		/** Link target forwarded to the `<a>` (e.g. '_blank'); only applies with `href`. With '_blank' a visually hidden "opens in new tab" announcement is added for assistive technology. */
+		'target'?: NLDDListItem['target'];
+		/** Link rel forwarded to the `<a>` (e.g. 'noopener noreferrer'); only applies with `href` */
+		'rel'?: NLDDListItem['rel'];
+		/** Set by the parent `nldd-list` when its own `reorderable` is on (with `type="list"`); consumers do not set this. Serves as a CSS hook for drag handle visibility. */
+		'reorderable'?: NLDDListItem['reorderable'];
+		'translations'?: NLDDListItem['translations'];
+		/** Nested rows sit in this item's `children` slot, not the list's, so a plain `querySelector` from the list walks past them. */
+		'childRows'?: NLDDListItem['childRows'];
+		/** The branch this row hangs under, or undefined for a top-level row. */
+		'parentRow'?: NLDDListItem['parentRow'];
+		/** On a `checkbox` row after it toggles; detail: { checked: boolean } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDListItemActionProps = {
+		/** Renders the segmented action as a `<button>`; ignored when `href` is set */
+		'button'?: NLDDListItemAction['button'];
+		/** Renders the segmented action as an `<a>` with this URL; wins over `button` and `checkbox` */
+		'href'?: NLDDListItemAction['href'];
+		/** Link target forwarded to the `<a>`; only applies with `href` */
+		'target'?: NLDDListItemAction['target'];
+		/** Link rel forwarded to the `<a>`; only applies with `href` */
+		'rel'?: NLDDListItemAction['rel'];
+		/** Makes the segmented action a `role="checkbox"` control; ignored when `href` is set */
+		'checkbox'?: NLDDListItemAction['checkbox'];
+		/** Checked state of a `checkbox` action; it toggles on activation */
+		'checked'?: NLDDListItemAction['checked'];
+		/** Disclosure state, reflected as `aria-expanded` on the control. Set it on the segmented action that opens something (e.g. a tree row's chevron). Leave it off entirely when the segmented action discloses nothing — an absent attribute emits no aria-expanded. */
+		'expanded'?: NLDDListItemAction['expanded'];
+		/** Marks the segmented action as the row's disclosure control: `aria-expanded` comes from the parent item's `expanded`, so the state lives in one place. A slotted `nldd-icon-cell` rotates a quarter turn while the row is open */
+		'disclosure'?: NLDDListItemAction['disclosure'];
+		/** Marks the segmented action as the current page (`aria-current="page"`) */
+		'current'?: NLDDListItemAction['current'];
+		/** Disabled state; only applies to button and checkbox segmented actions */
+		'disabled'?: NLDDListItemAction['disabled'];
+		/** `full` lets the segmented action grow to fill the row (default: 'fit-content') */
+		'width'?: NLDDListItemAction['width'];
+		/** Accessible name for the control. Set it when the segmented action holds only an icon, or when the cell text does not describe the action. */
+		'accessible-label'?: NLDDListItemAction['accessibleLabel'];
+		/** Accessible name for the control. Set it when the segmented action holds only an icon, or when the cell text does not describe the action. */
+		'accessibleLabel'?: NLDDListItemAction['accessibleLabel'];
+		/** On a `checkbox` action after it toggles; detail: { checked: boolean } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDMenuProps = {
+		/** ID of the anchor element. Positions the menu against it AND makes it a toggle: the menu listens on document click and opens/closes itself when the click lands on the anchor. Use this for a menu hung off a button. For a menu you open yourself (a type-ahead under a text field, say), set the `anchorElement` property instead — same positioning, no toggle. */
+		'anchor'?: NLDDMenu['anchor'];
+		/** Floating UI placement. Default: 'bottom-start'. */
+		'placement'?: NLDDMenu['placement'];
+		/** Text of the default empty-state dialog. Falls back to Dutch i18n "Geen opties beschikbaar". */
+		'empty-text'?: NLDDMenu['emptyText'];
+		/** Text of the default empty-state dialog. Falls back to Dutch i18n "Geen opties beschikbaar". */
+		'emptyText'?: NLDDMenu['emptyText'];
+		/** Supporting text of the default empty-state dialog. */
+		'empty-supporting-text'?: NLDDMenu['emptySupportingText'];
+		/** Supporting text of the default empty-state dialog. */
+		'emptySupportingText'?: NLDDMenu['emptySupportingText'];
+		/** Explicit width, pinned exactly (sets --_width and clamps min/max to it). Leave unset to let the menu size to its content between a minimum and a viewport-aware maximum of min(100vw - inset, 640px). */
+		'width'?: NLDDMenu['width'];
+		/** Maximum number of visible items before the menu scrolls. Sets --_max-items internally. Default: 0 (no limit). */
+		'max-items'?: NLDDMenu['maxItems'];
+		/** Maximum number of visible items before the menu scrolls. Sets --_max-items internally. Default: 0 (no limit). */
+		'maxItems'?: NLDDMenu['maxItems'];
+		/** Override one or more translation keys. Unset keys fall back to the Dutch default. */
+		'translations'?: NLDDMenu['translations'];
+		/** Custom filter function (query, item) => boolean. */
+		'filterFn'?: NLDDMenu['filterFn'];
+		/** Render variant. Use 'listbox' when the menu serves as a combobox popup — this switches role to "listbox" and item roles to "option" per ARIA spec. Default: 'menu'. */
+		'variant'?: NLDDMenu['variant'];
+		/** The anchor as an element reference. Positions the menu exactly like the `anchor` attribute, but does NOT turn the anchor into a toggle — clicking it does not open the menu. Use this whenever you drive open/close yourself (`showPopover()` / `hidePopover()`), which is what nldd-combo-box and nldd-token-field do: their input must stay an input, not a menu button. */
+		'anchorElement'?: NLDDMenu['anchorElement'];
+	};
+
+	type NLDDMenuBarProps = {
+		/** Tekst voor de overflow button (standaard via i18n) */
+		'overflow-text'?: NLDDMenuBar['overflowText'];
+		/** Tekst voor de overflow button (standaard via i18n) */
+		'overflowText'?: NLDDMenuBar['overflowText'];
+		/** aria-label voor de nav landmark */
+		'accessible-label'?: NLDDMenuBar['accessibleLabel'];
+		/** aria-label voor de nav landmark */
+		'accessibleLabel'?: NLDDMenuBar['accessibleLabel'];
+		/** Propageert compact attribuut naar slotted items (activeert content-priority) */
+		'compact'?: NLDDMenuBar['compact'];
+		'translations'?: NLDDMenuBar['translations'];
+	};
+
+	type NLDDMenuBarItemProps = {
+		/** Tekst van het item */
+		'text'?: NLDDMenuBarItem['text'];
+		/** Markeer als actief/huidig item */
+		'current'?: NLDDMenuBarItem['current'];
+		/** aria-current waarde als current is true ('page', 'step', 'location', 'true'). Standaard: 'page' */
+		'current-type'?: NLDDMenuBarItem['currentType'];
+		/** aria-current waarde als current is true ('page', 'step', 'location', 'true'). Standaard: 'page' */
+		'currentType'?: NLDDMenuBarItem['currentType'];
+		/** Optionele link URL. Zonder href rendert als button. */
+		'href'?: NLDDMenuBarItem['href'];
+		/** Optioneel icon naam (nldd-icon) */
+		'icon'?: NLDDMenuBarItem['icon'];
+		/** Toon disclosure icon en open de geslotte `<nldd-menu>` bij klik */
+		'expandable'?: NLDDMenuBarItem['expandable'];
+		/** Verberg tekst visueel (altijd) */
+		'icon-only'?: NLDDMenuBarItem['iconOnly'];
+		/** Verberg tekst visueel (altijd) */
+		'iconOnly'?: NLDDMenuBarItem['iconOnly'];
+		/** Bepaalt wat zichtbaar blijft in compact modus: 'icon' verbergt tekst, 'text' verbergt icon */
+		'content-priority'?: NLDDMenuBarItem['contentPriority'];
+		/** Bepaalt wat zichtbaar blijft in compact modus: 'icon' verbergt tekst, 'text' verbergt icon */
+		'contentPriority'?: NLDDMenuBarItem['contentPriority'];
+		/** Activeert content-priority gedrag (gezet door parent nldd-menu-bar) */
+		'compact'?: NLDDMenuBarItem['compact'];
+		/** Schakel interactie uit */
+		'disabled'?: NLDDMenuBarItem['disabled'];
+		/** Overschrijf aria-label */
+		'accessible-label'?: NLDDMenuBarItem['accessibleLabel'];
+		/** Overschrijf aria-label */
+		'accessibleLabel'?: NLDDMenuBarItem['accessibleLabel'];
+		/** aria-haspopup waarde (bijv. "menu", "dialog") */
+		'haspopup'?: NLDDMenuBarItem['haspopup'];
+		/** Of de bijbehorende popover open is; zet aria-expanded op de knop wanneer expandable of haspopup is gezet. Wordt automatisch bijgehouden voor een geslotte `<nldd-menu>`. */
+		'expanded'?: NLDDMenuBarItem['expanded'];
+		/** Direct element reference to the popover this item invokes — IDL-only counterpart to `popovertarget` that works across shadow boundaries. Set by `nldd-menu` when this item is wired up as the menu's anchor so the browser recognizes the inner button as the menu's invoker and excludes the click from popover light-dismiss. */
+		'popoverTargetElement'?: NLDDMenuBarItem['popoverTargetElement'];
+		/** Action the browser performs when the inner button is clicked, mirroring the standard `popovertargetaction` attribute. The menu keeps this in sync with its open state — `'hide'` while open, `'show'` while closed — so the browser's native invoker action always matches the intent of the click without racing. */
+		'popoverTargetAction'?: NLDDMenuBarItem['popoverTargetAction'];
+		/** Bij klik op non-expandable button item (bubbles, composed) */
+		'onSelect'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDMenuDividerProps = {
+	};
+
+	type NLDDMenuGroupProps = {
+		/** Group title text shown above the items. */
+		'text'?: NLDDMenuGroup['text'];
+	};
+
+	type NLDDMenuItemProps = {
+		/** Display text. Supports **bold** markdown syntax. */
+		'text'?: NLDDMenuItem['text'];
+		/** Form value. Falls back to text when not set. */
+		'value'?: NLDDMenuItem['value'];
+		/** 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'];
+		/** Space-separated alternative search terms. */
+		'aliases'?: NLDDMenuItem['aliases'];
+		/** Secondary label shown on the right side. */
+		'details'?: NLDDMenuItem['details'];
+		/** Keyboard shortcut hint shown on the right, e.g. 'Cmd+E'. Display only (rendered via nldd-keyboard-shortcut) — it does not bind the key; wire up the handling in your app. Hidden on touch-only devices, where it isn't invokable. */
+		'shortcut'?: NLDDMenuItem['shortcut'];
+		/** / shortcut-windows / shortcut-linux - Per-OS overrides for `shortcut`, picked by detected OS (falls back to `shortcut`). */
+		'shortcut-mac'?: NLDDMenuItem['shortcutMac'];
+		/** / shortcut-windows / shortcut-linux - Per-OS overrides for `shortcut`, picked by detected OS (falls back to `shortcut`). */
+		'shortcutMac'?: NLDDMenuItem['shortcutMac'];
+		/** Icon name rendered before the text (nldd-icon name). */
+		'icon'?: NLDDMenuItem['icon'];
+		/** Item type: 'button' | 'checkbox' | 'radio'. Default: 'button'. */
+		'type'?: NLDDMenuItem['type'];
+		/** Selected state for checkbox and radio types. */
+		'selected'?: NLDDMenuItem['selected'];
+		/** Marks the item as destructive (red text; red highlight bg). Use for irreversible actions like "Delete". Color is the only built-in signal, so per WCAG 1.4.1 the item's own label must convey the destructive nature (e.g. "Verwijder") — don't rely on the red alone. Confirming the action (e.g. a follow-up dialog) is the consumer's responsibility. */
+		'destructive'?: NLDDMenuItem['destructive'];
+		/** Disabled state. */
+		'disabled'?: NLDDMenuItem['disabled'];
+		/** Query substring to bold-highlight in text. Set by menu's filter(); also settable by consumers. */
+		'query'?: NLDDMenuItem['query'];
+		/** 'match' | 'predictive' (default: 'predictive'). See text-cell for details. */
+		'query-mark-mode'?: NLDDMenuItem['queryMarkMode'];
+		/** 'match' | 'predictive' (default: 'predictive'). See text-cell for details. */
+		'queryMarkMode'?: NLDDMenuItem['queryMarkMode'];
+		'shortcut-windows'?: NLDDMenuItem['shortcutWindows'];
+		'shortcutWindows'?: NLDDMenuItem['shortcutWindows'];
+		'shortcut-linux'?: NLDDMenuItem['shortcutLinux'];
+		'shortcutLinux'?: NLDDMenuItem['shortcutLinux'];
+		/** Set by nldd-menu. Not part of the public API. */
+		'menuVariant'?: NLDDMenuItem['menuVariant'];
+		'onMenuItemFocused'?: (event: CustomEvent) => void;
+		'onSubmenuOpen'?: (event: CustomEvent) => void;
+		/** Fired when the item is clicked and not disabled. */
+		'onSelect'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDModalDialogProps = {
+		/** Forwarded to nldd-inline-dialog; 'alert' forces icon and color */
+		'variant'?: NLDDModalDialog['variant'];
+		/** Forwarded to nldd-inline-dialog; absent when not set */
+		'icon'?: NLDDModalDialog['icon'];
+		/** Forwarded to nldd-inline-dialog; main text */
+		'text'?: NLDDModalDialog['text'];
+		/** Forwarded to nldd-inline-dialog; supporting text */
+		'supporting-text'?: NLDDModalDialog['supportingText'];
+		/** Forwarded to nldd-inline-dialog; supporting text */
+		'supportingText'?: NLDDModalDialog['supportingText'];
+		/** Accessible name for the dialog (aria-label); falls back to text */
+		'accessible-label'?: NLDDModalDialog['accessibleLabel'];
+		/** Accessible name for the dialog (aria-label); falls back to text */
+		'accessibleLabel'?: NLDDModalDialog['accessibleLabel'];
+		/** When the dialog is opened */
+		'onOpen'?: (event: CustomEvent) => void;
+		/** When the dialog is fully closed */
+		'onClose'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDMultiLineTextFieldProps = {
+		/** 'md' (default) | 'sm'. Set automatically by nldd-form-field. */
+		'size'?: NLDDMultiLineTextField['size'];
+		/** The textarea value */
+		'value'?: NLDDMultiLineTextField['value'];
+		/** Sets the id on the native textarea. Set automatically by nldd-form-field. */
+		'input-id'?: NLDDMultiLineTextField['inputId'];
+		/** Sets the id on the native textarea. Set automatically by nldd-form-field. */
+		'inputId'?: NLDDMultiLineTextField['inputId'];
+		/** Placeholder text */
+		'placeholder'?: NLDDMultiLineTextField['placeholder'];
+		/** Marks the field as invalid */
+		'invalid'?: NLDDMultiLineTextField['invalid'];
+		/** Marks the field as valid */
+		'valid'?: NLDDMultiLineTextField['valid'];
+		/** Disabled state */
+		'disabled'?: NLDDMultiLineTextField['disabled'];
+		/** Textarea name for form submission */
+		'name'?: NLDDMultiLineTextField['name'];
+		/** Readonly state */
+		'readonly'?: NLDDMultiLineTextField['readonly'];
+		/** Required state */
+		'required'?: NLDDMultiLineTextField['required'];
+		/** Autocomplete hint */
+		'autocomplete'?: NLDDMultiLineTextField['autocomplete'];
+		/** Initial visible rows (minimum height). Default: 3. */
+		'rows'?: NLDDMultiLineTextField['rows'];
+		/** 'none' | 'vertical' | 'auto' (default). 'auto' grows with content (native field-sizing), no manual handle. */
+		'resize'?: NLDDMultiLineTextField['resize'];
+		/** Accessible label forwarded to the inner textarea. Set automatically by nldd-form-field. */
+		'accessible-label'?: NLDDMultiLineTextField['accessibleLabel'];
+		/** Accessible label forwarded to the inner textarea. Set automatically by nldd-form-field. */
+		'accessibleLabel'?: NLDDMultiLineTextField['accessibleLabel'];
+		/** Ids for aria-describedby on the inner textarea. Set automatically by nldd-form-field. */
+		'error-message-ids'?: NLDDMultiLineTextField['errorMessageIds'];
+		/** Ids for aria-describedby on the inner textarea. Set automatically by nldd-form-field. */
+		'errorMessageIds'?: NLDDMultiLineTextField['errorMessageIds'];
+		/** Disables browser spellchecking on the inner textarea */
+		'no-spellcheck'?: NLDDMultiLineTextField['noSpellcheck'];
+		/** Disables browser spellchecking on the inner textarea */
+		'noSpellcheck'?: NLDDMultiLineTextField['noSpellcheck'];
+		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
+		'width'?: NLDDMultiLineTextField['width'];
+		'internals'?: NLDDMultiLineTextField['internals'];
+		/** When value changes */
+		'onInput'?: (event: CustomEvent) => void;
+		/** When value is committed (blur) */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDNavigationSplitViewProps = {
+		/** Inspector hidden to free up space for other panes (read-only, set by the split view) */
+		'inspector-auto-hidden'?: NLDDNavigationSplitView['inspectorAutoHidden'];
+		/** Inspector hidden to free up space for other panes (read-only, set by the split view) */
+		'inspectorAutoHidden'?: NLDDNavigationSplitView['inspectorAutoHidden'];
+		/** Always show the inspector as a sheet regardless of available space */
+		'inspector-as-sheet'?: NLDDNavigationSplitView['inspectorAsSheet'];
+		/** Always show the inspector as a sheet regardless of available space */
+		'inspectorAsSheet'?: NLDDNavigationSplitView['inspectorAsSheet'];
+		/** Always show the primary sidebar as a sheet, keeping main visible at full width */
+		'primary-sidebar-as-sheet'?: NLDDNavigationSplitView['primarySidebarAsSheet'];
+		/** Always show the primary sidebar as a sheet, keeping main visible at full width */
+		'primarySidebarAsSheet'?: NLDDNavigationSplitView['primarySidebarAsSheet'];
+		/** @deprecated alias for primary-sidebar-as-sheet (kept for backwards compatibility) */
+		'sidebar-as-sheet'?: NLDDNavigationSplitView['sidebarAsSheet'];
+		/** @deprecated alias for primary-sidebar-as-sheet (kept for backwards compatibility) */
+		'sidebarAsSheet'?: NLDDNavigationSplitView['sidebarAsSheet'];
+		/** Accessible name for the inspector sheet dialog (default: 'Details') */
+		'inspector-accessible-label'?: NLDDNavigationSplitView['inspectorAccessibleLabel'];
+		/** Accessible name for the inspector sheet dialog (default: 'Details') */
+		'inspectorAccessibleLabel'?: NLDDNavigationSplitView['inspectorAccessibleLabel'];
+		/** Accessible name for the primary sidebar sheet dialog (default: 'Navigatie') */
+		'primary-sidebar-accessible-label'?: NLDDNavigationSplitView['primarySidebarAccessibleLabel'];
+		/** Accessible name for the primary sidebar sheet dialog (default: 'Navigatie') */
+		'primarySidebarAccessibleLabel'?: NLDDNavigationSplitView['primarySidebarAccessibleLabel'];
+		/** @deprecated alias for primary-sidebar-accessible-label (kept for backwards compatibility) */
+		'sidebar-accessible-label'?: NLDDNavigationSplitView['sidebarAccessibleLabel'];
+		/** @deprecated alias for primary-sidebar-accessible-label (kept for backwards compatibility) */
+		'sidebarAccessibleLabel'?: NLDDNavigationSplitView['sidebarAccessibleLabel'];
+		'onSINGLE_COLUMN_CHANGE_EVENT'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDNumberFieldProps = {
+		/** Current value */
+		'value'?: NLDDNumberField['value'];
+		/** Minimum value (default: -Infinity) */
+		'min'?: NLDDNumberField['min'];
+		/** Maximum value (default: Infinity) */
+		'max'?: NLDDNumberField['max'];
+		/** Step size (default: 1) */
+		'step'?: NLDDNumberField['step'];
+		/** Size: 'sm' | 'md' (default: 'md') */
+		'size'?: NLDDNumberField['size'];
+		/** Disabled state */
+		'disabled'?: NLDDNumberField['disabled'];
+		/** Name for form submission */
+		'name'?: NLDDNumberField['name'];
+		/** Width mode: 'full' (stretches to container) or any CSS length (e.g. '240px') */
+		'width'?: NLDDNumberField['width'];
+		/** When set, hides the decrement and increment buttons */
+		'hide-spin-buttons'?: NLDDNumberField['hideSpinButtons'];
+		/** When set, hides the decrement and increment buttons */
+		'hideSpinButtons'?: NLDDNumberField['hideSpinButtons'];
+		/** Accessible label (aria-label) forwarded to the native input */
+		'accessible-label'?: NLDDNumberField['accessibleLabel'];
+		/** Accessible label (aria-label) forwarded to the native input */
+		'accessibleLabel'?: NLDDNumberField['accessibleLabel'];
+		/** Translations; unspecified keys fall back to Dutch */
+		'translations'?: NLDDNumberField['translations'];
+		'internals'?: NLDDNumberField['internals'];
+		/** When the value changes (typing, +/- button, or on-commit correction); detail: { value: number } */
+		'onInput'?: (event: CustomEvent) => void;
+		/** When the value is committed (blur/Enter or +/- button), clamped to [min, max]; empty input falls back to the last valid value. When the committed value differs from the typed value, a matching input event is fired immediately before this one. detail: { value: number } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDOneHalfOneHalfSectionProps = {
+		/** Body max-width: 'full' removes the constraint so the section spans the full available width. Any CSS length (e.g. '480px') overrides the default max-width. */
+		'width'?: NLDDOneHalfOneHalfSection['width'];
+		/** Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface). */
+		'background'?: NLDDOneHalfOneHalfSection['background'];
+		/** Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme). */
+		'scheme'?: NLDDOneHalfOneHalfSection['scheme'];
+		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
+		'padding-block'?: NLDDOneHalfOneHalfSection['paddingBlock'];
+		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
+		'paddingBlock'?: NLDDOneHalfOneHalfSection['paddingBlock'];
+		/** Top padding override. */
+		'padding-top'?: NLDDOneHalfOneHalfSection['paddingTop'];
+		/** Top padding override. */
+		'paddingTop'?: NLDDOneHalfOneHalfSection['paddingTop'];
+		/** Bottom padding override. */
+		'padding-bottom'?: NLDDOneHalfOneHalfSection['paddingBottom'];
+		/** Bottom padding override. */
+		'paddingBottom'?: NLDDOneHalfOneHalfSection['paddingBottom'];
+		/** Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}). */
+		'sm-padding-block'?: NLDDOneHalfOneHalfSection['smPaddingBlock'];
+		/** Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}). */
+		'smPaddingBlock'?: NLDDOneHalfOneHalfSection['smPaddingBlock'];
+		'sm-padding-top'?: NLDDOneHalfOneHalfSection['smPaddingTop'];
+		'smPaddingTop'?: NLDDOneHalfOneHalfSection['smPaddingTop'];
+		'sm-padding-bottom'?: NLDDOneHalfOneHalfSection['smPaddingBottom'];
+		'smPaddingBottom'?: NLDDOneHalfOneHalfSection['smPaddingBottom'];
+		'md-padding-block'?: NLDDOneHalfOneHalfSection['mdPaddingBlock'];
+		'mdPaddingBlock'?: NLDDOneHalfOneHalfSection['mdPaddingBlock'];
+		'md-padding-top'?: NLDDOneHalfOneHalfSection['mdPaddingTop'];
+		'mdPaddingTop'?: NLDDOneHalfOneHalfSection['mdPaddingTop'];
+		'md-padding-bottom'?: NLDDOneHalfOneHalfSection['mdPaddingBottom'];
+		'mdPaddingBottom'?: NLDDOneHalfOneHalfSection['mdPaddingBottom'];
+		'lg-padding-block'?: NLDDOneHalfOneHalfSection['lgPaddingBlock'];
+		'lgPaddingBlock'?: NLDDOneHalfOneHalfSection['lgPaddingBlock'];
+		'lg-padding-top'?: NLDDOneHalfOneHalfSection['lgPaddingTop'];
+		'lgPaddingTop'?: NLDDOneHalfOneHalfSection['lgPaddingTop'];
+		'lg-padding-bottom'?: NLDDOneHalfOneHalfSection['lgPaddingBottom'];
+		'lgPaddingBottom'?: NLDDOneHalfOneHalfSection['lgPaddingBottom'];
+		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
+		'height'?: NLDDOneHalfOneHalfSection['height'];
+	};
+
+	type NLDDOneThirdTwoThirdsSectionProps = {
+		/** Body max-width: 'full' removes the constraint so the section spans the full available width. Any CSS length (e.g. '480px') overrides the default max-width. */
+		'width'?: NLDDOneThirdTwoThirdsSection['width'];
+		/** Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface). */
+		'background'?: NLDDOneThirdTwoThirdsSection['background'];
+		/** Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme). */
+		'scheme'?: NLDDOneThirdTwoThirdsSection['scheme'];
+		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
+		'padding-block'?: NLDDOneThirdTwoThirdsSection['paddingBlock'];
+		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
+		'paddingBlock'?: NLDDOneThirdTwoThirdsSection['paddingBlock'];
+		/** Top padding override. */
+		'padding-top'?: NLDDOneThirdTwoThirdsSection['paddingTop'];
+		/** Top padding override. */
+		'paddingTop'?: NLDDOneThirdTwoThirdsSection['paddingTop'];
+		/** Bottom padding override. */
+		'padding-bottom'?: NLDDOneThirdTwoThirdsSection['paddingBottom'];
+		/** Bottom padding override. */
+		'paddingBottom'?: NLDDOneThirdTwoThirdsSection['paddingBottom'];
+		/** Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}). */
+		'sm-padding-block'?: NLDDOneThirdTwoThirdsSection['smPaddingBlock'];
+		/** Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}). */
+		'smPaddingBlock'?: NLDDOneThirdTwoThirdsSection['smPaddingBlock'];
+		'sm-padding-top'?: NLDDOneThirdTwoThirdsSection['smPaddingTop'];
+		'smPaddingTop'?: NLDDOneThirdTwoThirdsSection['smPaddingTop'];
+		'sm-padding-bottom'?: NLDDOneThirdTwoThirdsSection['smPaddingBottom'];
+		'smPaddingBottom'?: NLDDOneThirdTwoThirdsSection['smPaddingBottom'];
+		'md-padding-block'?: NLDDOneThirdTwoThirdsSection['mdPaddingBlock'];
+		'mdPaddingBlock'?: NLDDOneThirdTwoThirdsSection['mdPaddingBlock'];
+		'md-padding-top'?: NLDDOneThirdTwoThirdsSection['mdPaddingTop'];
+		'mdPaddingTop'?: NLDDOneThirdTwoThirdsSection['mdPaddingTop'];
+		'md-padding-bottom'?: NLDDOneThirdTwoThirdsSection['mdPaddingBottom'];
+		'mdPaddingBottom'?: NLDDOneThirdTwoThirdsSection['mdPaddingBottom'];
+		'lg-padding-block'?: NLDDOneThirdTwoThirdsSection['lgPaddingBlock'];
+		'lgPaddingBlock'?: NLDDOneThirdTwoThirdsSection['lgPaddingBlock'];
+		'lg-padding-top'?: NLDDOneThirdTwoThirdsSection['lgPaddingTop'];
+		'lgPaddingTop'?: NLDDOneThirdTwoThirdsSection['lgPaddingTop'];
+		'lg-padding-bottom'?: NLDDOneThirdTwoThirdsSection['lgPaddingBottom'];
+		'lgPaddingBottom'?: NLDDOneThirdTwoThirdsSection['lgPaddingBottom'];
+		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
+		'height'?: NLDDOneThirdTwoThirdsSection['height'];
+	};
+
+	type NLDDPageProps = {
+		/** Sticky header */
+		'sticky-header'?: NLDDPage['stickyHeader'];
+		/** Sticky header */
+		'stickyHeader'?: NLDDPage['stickyHeader'];
+		/** Sticky footer */
+		'sticky-footer'?: NLDDPage['stickyFooter'];
+		/** Sticky footer */
+		'stickyFooter'?: NLDDPage['stickyFooter'];
+		/** Use a gray background instead of white */
+		'background'?: NLDDPage['background'];
+		'scrollTarget'?: NLDDPage['scrollTarget'];
+	};
+
+	type NLDDPageFooterProps = {
+		/** Body max-width, mirroring a page section: 'full' removes the constraint so the content spans the full width; any CSS length (e.g. '480px') overrides the default max-width. */
+		'width'?: NLDDPageFooter['width'];
+	};
+
+	type NLDDPageFooterLegalBarProps = {
+		/** Override the nav's aria-label. Defaults to the i18n value (NL: "Juridische links"). */
+		'accessible-label'?: NLDDPageFooterLegalBar['accessibleLabel'];
+		/** Override the nav's aria-label. Defaults to the i18n value (NL: "Juridische links"). */
+		'accessibleLabel'?: NLDDPageFooterLegalBar['accessibleLabel'];
+		/** Override translation keys; unset keys fall back to the Dutch default. */
+		'translations'?: NLDDPageFooterLegalBar['translations'];
+	};
+
+	type NLDDPageFooterLegalBarItemProps = {
+		/** Link target. When omitted, the item renders as plain text. */
+		'href'?: NLDDPageFooterLegalBarItem['href'];
+		/** Item label. Falls back to the default slot. */
+		'text'?: NLDDPageFooterLegalBarItem['text'];
+	};
+
+	type NLDDPaginationProps = {
+		/** Currently active page (1-based) */
+		'current'?: NLDDPagination['current'];
+		/** Total number of pages (recommended max: 200 for compact select performance) */
+		'total'?: NLDDPagination['total'];
+		/** Disabled state */
+		'disabled'?: NLDDPagination['disabled'];
+		/** Centreert de pagination in de container (host fills row, items grouped in the middle) */
+		'centered'?: NLDDPagination['centered'];
+		/** URL patroon met {page} placeholder, rendert links in plaats van buttons */
+		'href-pattern'?: NLDDPagination['hrefPattern'];
+		/** URL patroon met {page} placeholder, rendert links in plaats van buttons */
+		'hrefPattern'?: NLDDPagination['hrefPattern'];
+		/** Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands */
+		'translations'?: NLDDPagination['translations'];
+		/** Bij paginawisseling (detail: { page: number, href?: string }). Alleen cancelable in href-mode: preventDefault() voorkomt navigatie (SPA). */
+		'onPageChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDPasswordFieldProps = {
+		/** 'md' (default) | 'sm'. Set automatically by nldd-form-field. */
+		'size'?: NLDDPasswordField['size'];
+		/** The input value */
+		'value'?: NLDDPasswordField['value'];
+		/** Sets the id on the native input. Set automatically by nldd-form-field. */
+		'input-id'?: NLDDPasswordField['inputId'];
+		/** Sets the id on the native input. Set automatically by nldd-form-field. */
+		'inputId'?: NLDDPasswordField['inputId'];
+		/** Placeholder text */
+		'placeholder'?: NLDDPasswordField['placeholder'];
+		/** Marks the field as valid */
+		'valid'?: NLDDPasswordField['valid'];
+		/** Marks the field as invalid */
+		'invalid'?: NLDDPasswordField['invalid'];
+		/** Disabled state */
+		'disabled'?: NLDDPasswordField['disabled'];
+		/** Whether the password is masked (default: true) */
+		'masked'?: NLDDPasswordField['masked'];
+		/** Visible toggle button text when masked (default: 'Toon') */
+		'show-button-text'?: NLDDPasswordField['showButtonText'];
+		/** Visible toggle button text when masked (default: 'Toon') */
+		'showButtonText'?: NLDDPasswordField['showButtonText'];
+		/** Visible toggle button text when unmasked (default: 'Verberg') */
+		'hide-button-text'?: NLDDPasswordField['hideButtonText'];
+		/** Visible toggle button text when unmasked (default: 'Verberg') */
+		'hideButtonText'?: NLDDPasswordField['hideButtonText'];
+		/** aria-label for toggle when masked (default: 'Toon wachtwoord') */
+		'show-button-accessible-label'?: NLDDPasswordField['showButtonAccessibleLabel'];
+		/** aria-label for toggle when masked (default: 'Toon wachtwoord') */
+		'showButtonAccessibleLabel'?: NLDDPasswordField['showButtonAccessibleLabel'];
+		/** aria-label for toggle when unmasked (default: 'Verberg wachtwoord') */
+		'hide-button-accessible-label'?: NLDDPasswordField['hideButtonAccessibleLabel'];
+		/** aria-label for toggle when unmasked (default: 'Verberg wachtwoord') */
+		'hideButtonAccessibleLabel'?: NLDDPasswordField['hideButtonAccessibleLabel'];
+		/** Readonly state */
+		'readonly'?: NLDDPasswordField['readonly'];
+		/** Required state */
+		'required'?: NLDDPasswordField['required'];
+		/** Input name for form submission */
+		'name'?: NLDDPasswordField['name'];
+		/** Autocomplete hint */
+		'autocomplete'?: NLDDPasswordField['autocomplete'];
+		/** Accessible label forwarded to the inner input. Set automatically by nldd-form-field. */
+		'accessible-label'?: NLDDPasswordField['accessibleLabel'];
+		/** Accessible label forwarded to the inner input. Set automatically by nldd-form-field. */
+		'accessibleLabel'?: NLDDPasswordField['accessibleLabel'];
+		/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
+		'error-message-ids'?: NLDDPasswordField['errorMessageIds'];
+		/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
+		'errorMessageIds'?: NLDDPasswordField['errorMessageIds'];
+		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
+		'width'?: NLDDPasswordField['width'];
+		'internals'?: NLDDPasswordField['internals'];
+		/** When the input value changes ({ detail: { value } }) */
+		'onInput'?: (event: CustomEvent) => void;
+		/** When the input value is committed ({ detail: { value } }) */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDPopoverProps = {
+		/** ID van het trigger-element voor positionering */
+		'anchor'?: NLDDPopover['anchor'];
+		/** Floating UI placement (default: 'bottom-start') */
+		'placement'?: NLDDPopover['placement'];
+		/** Expliciete width (default: 320px via --components-popover-default-width) */
+		'width'?: NLDDPopover['width'];
+		/** CSS top-positie. Wanneer gezet (alleen of samen met andere edge-attrs of `centered`) wordt Floating UI's anchor-positionering overgeslagen — de popover staat dan vrij op het scherm. De `anchor` blijft wel nodig voor ARIA-koppeling op de trigger. Geen effect op sm (bottom-sheet wint). */
+		'top'?: NLDDPopover['top'];
+		/** CSS left-positie. Zie `top` voor semantiek. */
+		'left'?: NLDDPopover['left'];
+		/** CSS right-positie. Zie `top` voor semantiek. */
+		'right'?: NLDDPopover['right'];
+		/** CSS bottom-positie. Zie `top` voor semantiek. */
+		'bottom'?: NLDDPopover['bottom'];
+		/** Centreert beide assen op de viewport. Per as overrideable: `centered top="0"` = horizontaal gecentreerd, top-aligned. Mirrort CSS `place-items: center` met `align-items`/`justify-items` overrides. */
+		'centered'?: NLDDPopover['centered'];
+		/** Op sm-viewport (waar de popover als bottom-sheet rendert) de volledige beschikbare hoogte vullen i.p.v. te krimpen naar content. Geen effect op md+ (anchored modus). Opt-in voor content-heavy use cases zoals zoekresultaten of lange detail-views; volgt Apple/Material conventie van content-sized als default. */
+		'sm-full-height'?: NLDDPopover['smFullHeight'];
+		/** Op sm-viewport (waar de popover als bottom-sheet rendert) de volledige beschikbare hoogte vullen i.p.v. te krimpen naar content. Geen effect op md+ (anchored modus). Opt-in voor content-heavy use cases zoals zoekresultaten of lange detail-views; volgt Apple/Material conventie van content-sized als default. */
+		'smFullHeight'?: NLDDPopover['smFullHeight'];
+		/** (verplicht) Toegankelijke naam (aria-label). Valt terug op de i18n default ('Popover') als niet gezet — geef altijd een unieke, beschrijvende naam. */
+		'accessible-label'?: NLDDPopover['accessibleLabel'];
+		/** (verplicht) Toegankelijke naam (aria-label). Valt terug op de i18n default ('Popover') als niet gezet — geef altijd een unieke, beschrijvende naam. */
+		'accessibleLabel'?: NLDDPopover['accessibleLabel'];
+		/** Override translation keys; unset keys vallen terug op de Nederlandse default. */
+		'translations'?: NLDDPopover['translations'];
+		'anchorElement'?: NLDDPopover['anchorElement'];
+		'open'?: NLDDPopover['open'];
+		/** Wanneer de popover wordt geopend */
+		'onOpen'?: (event: CustomEvent) => void;
+		/** Wanneer de popover wordt gesloten */
+		'onClose'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDProgressBarProps = {
+		/** Semantics for ARIA and visualization (default: 'progress') */
+		'mode'?: NLDDProgressBar['mode'];
+		/** Total value (default: 100) */
+		'max'?: NLDDProgressBar['max'];
+		/** Single-segment shorthand (ignored when segment children are present) */
+		'value'?: NLDDProgressBar['value'];
+		/** Color for the single-segment shorthand (default: 'accent') */
+		'color'?: NLDDProgressBar['color'];
+		/** Height of the bar (default: 'md') */
+		'size'?: NLDDProgressBar['size'];
+		/** Label above the bar (left) */
+		'text'?: NLDDProgressBar['text'];
+		/** Format for the displayed value (default: 'percentage') */
+		'value-format'?: NLDDProgressBar['valueFormat'];
+		/** Format for the displayed value (default: 'percentage') */
+		'valueFormat'?: NLDDProgressBar['valueFormat'];
+		/** Full override of the displayed value */
+		'value-text'?: NLDDProgressBar['valueText'];
+		/** Full override of the displayed value */
+		'valueText'?: NLDDProgressBar['valueText'];
+		/** Where the value shows: inline in the caption, in a tooltip on the bar, or hidden (default: 'inline') */
+		'value-display'?: NLDDProgressBar['valueDisplay'];
+		/** Where the value shows: inline in the caption, in a tooltip on the bar, or hidden (default: 'inline') */
+		'valueDisplay'?: NLDDProgressBar['valueDisplay'];
+		/** Full override of aria-valuetext */
+		'accessible-label'?: NLDDProgressBar['accessibleLabel'];
+		/** Full override of aria-valuetext */
+		'accessibleLabel'?: NLDDProgressBar['accessibleLabel'];
+		/** Shows a sliding indicator animation (only without segments) */
+		'indeterminate'?: NLDDProgressBar['indeterminate'];
+		/** Override translation keys; unset keys fall back to Dutch */
+		'translations'?: NLDDProgressBar['translations'];
+	};
+
+	type NLDDProgressBarSegmentIndicatorProps = {
+		/** Share of the parent's total (default 0; <=0 hides segment) */
+		'value'?: NLDDProgressBarSegmentIndicator['value'];
+		/** Color. Semantic (neutral, accent, success, warning, critical) or a Rijkskleur. Default 'accent'. */
+		'color'?: NLDDProgressBarSegmentIndicator['color'];
+		/** Name for screenreader text (optional) */
+		'name'?: NLDDProgressBarSegmentIndicator['name'];
+		/** Override of the auto-generated tooltip text */
+		'tooltip-text'?: NLDDProgressBarSegmentIndicator['tooltipText'];
+		/** Override of the auto-generated tooltip text */
+		'tooltipText'?: NLDDProgressBarSegmentIndicator['tooltipText'];
+	};
+
+	type NLDDProgressCircleProps = {
+		/** Semantics for ARIA and gap behavior (default: 'progress') */
+		'mode'?: NLDDProgressCircle['mode'];
+		/** Total value (default: 100) */
+		'max'?: NLDDProgressCircle['max'];
+		/** Single-segment shorthand (ignored when segment children exist) */
+		'value'?: NLDDProgressCircle['value'];
+		/** Color. Semantic (neutral, accent, success, warning, critical) or a Rijkskleur. Default 'accent'. */
+		'color'?: NLDDProgressCircle['color'];
+		/** Circle diameter in px. Matches nldd-icon sizes: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96 (default: '28') */
+		'size'?: NLDDProgressCircle['size'];
+		/** Label below the circle */
+		'text'?: NLDDProgressCircle['text'];
+		/** Format of the displayed value (default: 'percentage') */
+		'value-format'?: NLDDProgressCircle['valueFormat'];
+		/** Format of the displayed value (default: 'percentage') */
+		'valueFormat'?: NLDDProgressCircle['valueFormat'];
+		/** Full override of the displayed value (inline + tooltip) */
+		'value-text'?: NLDDProgressCircle['valueText'];
+		/** Full override of the displayed value (inline + tooltip) */
+		'valueText'?: NLDDProgressCircle['valueText'];
+		/** Where the value shows: inline below the label, in a tooltip, or hidden (default: 'tooltip') */
+		'value-display'?: NLDDProgressCircle['valueDisplay'];
+		/** Where the value shows: inline below the label, in a tooltip, or hidden (default: 'tooltip') */
+		'valueDisplay'?: NLDDProgressCircle['valueDisplay'];
+		/** Full override of aria-valuetext */
+		'accessible-label'?: NLDDProgressCircle['accessibleLabel'];
+		/** Full override of aria-valuetext */
+		'accessibleLabel'?: NLDDProgressCircle['accessibleLabel'];
+		/** Renders the rotating elastic arc animation */
+		'indeterminate'?: NLDDProgressCircle['indeterminate'];
+		/** Override translation keys; unset keys fall back to Dutch */
+		'translations'?: NLDDProgressCircle['translations'];
+	};
+
+	type NLDDProgressCircleSegmentIndicatorProps = {
+		/** Share of the parent's total (default 0; <=0 hides segment) */
+		'value'?: NLDDProgressCircleSegmentIndicator['value'];
+		/** Color (semantic or Rijkskleur). Default 'accent'. */
+		'color'?: NLDDProgressCircleSegmentIndicator['color'];
+		/** Optional name used in the combined tooltip + screenreader text */
+		'name'?: NLDDProgressCircleSegmentIndicator['name'];
+	};
+
+	type NLDDRadioButtonProps = {
+		/** Checked state */
+		'checked'?: NLDDRadioButton['checked'];
+		/** Disabled state */
+		'disabled'?: NLDDRadioButton['disabled'];
+		/** Required state */
+		'required'?: NLDDRadioButton['required'];
+		/** Radio group name for form submission; ties the buttons of one group together */
+		'name'?: NLDDRadioButton['name'];
+		/** Value submitted with the form when this radio button is checked */
+		'value'?: NLDDRadioButton['value'];
+		/** Accessible label forwarded as aria-label to the native input. Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries. */
+		'accessible-label'?: NLDDRadioButton['accessibleLabel'];
+		/** Accessible label forwarded as aria-label to the native input. Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries. */
+		'accessibleLabel'?: NLDDRadioButton['accessibleLabel'];
+		'internals'?: NLDDRadioButton['internals'];
+		/** When checked state changes; detail: { checked: boolean, value: string, name: string } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDRadioButtonFieldProps = {
+		/** Checked state */
+		'checked'?: NLDDRadioButtonField['checked'];
+		/** Disabled state */
+		'disabled'?: NLDDRadioButtonField['disabled'];
+		/** Value for form submission */
+		'value'?: NLDDRadioButtonField['value'];
+		/** Radio group name for form submission, forwarded to the inner nldd-radio-button. Set automatically by nldd-radio-button-group. */
+		'name'?: NLDDRadioButtonField['name'];
+		/** Required state, forwarded to the inner nldd-radio-button. Set automatically by nldd-radio-button-group. */
+		'required'?: NLDDRadioButtonField['required'];
+		/** Label text for the radio button */
+		'label'?: NLDDRadioButtonField['label'];
+		'internals'?: NLDDRadioButtonField['internals'];
+		/** When checked state changes; detail: { checked: boolean, value: string } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDRadioButtonGroupProps = {
+		/** Forwarded to all slotted nldd-radio-button-field elements */
+		'name'?: NLDDRadioButtonGroup['name'];
+		/** Disables all slotted fields */
+		'disabled'?: NLDDRadioButtonGroup['disabled'];
+		/** Marks the group as required */
+		'required'?: NLDDRadioButtonGroup['required'];
+		/** Id of an external label element, set as aria-labelledby on the group */
+		'accessible-labeled-by'?: NLDDRadioButtonGroup['accessibleLabeledBy'];
+		/** Id of an external label element, set as aria-labelledby on the group */
+		'accessibleLabeledBy'?: NLDDRadioButtonGroup['accessibleLabeledBy'];
+		/** Bubbles up from the checked field; detail: { checked: boolean, value: string } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDRichTextProps = {
+		/** Spacing between elements: 'flat' | 'tight' | 'snug' (default) | 'loose' */
+		'spacing'?: NLDDRichText['spacing'];
+		/** Centers the main column inside the container; without it, content is left-aligned */
+		'centered'?: NLDDRichText['centered'];
+		/** Opt-in automatische woordafbreking voor doorlopende tekst (p, li, dd). Vereist een correcte `lang` op de pagina (bijv. `lang="nl"` op `<html>`): zonder taalinfo breekt de browser niet af. Een `overflow-wrap: break-word`-vangnet op p/li staat altijd aan, los van dit attribuut, zodat lange URLs en samenstellingen ook zonder woordenboek netjes breken in plaats van te overlopen. */
+		'hyphens'?: NLDDRichText['hyphens'];
+		/** 'inherit' laat alle tekst de kleur van de ondergrond volgen (voor gekleurde vlakken zoals de filled-categories). Links blijven onderstreept als affordance; secundaire tekst (figcaption) krijgt dezelfde kleur op verlaagde dekking. Bekende v1-gaten: inline code, mark, tabellen en hr behouden hun eigen surfaces. Leeg = standaard contentkleuren. */
+		'color'?: NLDDRichText['color'];
+		/** Override translation keys; unset keys fall back to Dutch */
+		'translations'?: NLDDRichText['translations'];
+	};
+
+	type NLDDSearchFieldProps = {
+		/** The search value */
+		'value'?: NLDDSearchField['value'];
+		/** Placeholder text for the input */
+		'placeholder'?: NLDDSearchField['placeholder'];
+		/** Accessible label (aria-label) for the native input. Falls back to placeholder when not set. Set explicitly when a value is already present and the placeholder is no longer visible. */
+		'accessible-label'?: NLDDSearchField['accessibleLabel'];
+		/** Accessible label (aria-label) for the native input. Falls back to placeholder when not set. Set explicitly when a value is already present and the placeholder is no longer visible. */
+		'accessibleLabel'?: NLDDSearchField['accessibleLabel'];
+		/** Field size: 'sm' | 'md' (default: 'md') */
+		'size'?: NLDDSearchField['size'];
+		/** Disabled state */
+		'disabled'?: NLDDSearchField['disabled'];
+		/** Input name for form submission */
+		'name'?: NLDDSearchField['name'];
+		/** When set, shows a search button on the right */
+		'show-search-button'?: NLDDSearchField['showSearchButton'];
+		/** When set, shows a search button on the right */
+		'showSearchButton'?: NLDDSearchField['showSearchButton'];
+		/** Override translation keys; unset keys fall back to Dutch */
+		'translations'?: NLDDSearchField['translations'];
+		/** Disables browser spellchecking on the inner input */
+		'no-spellcheck'?: NLDDSearchField['noSpellcheck'];
+		/** Disables browser spellchecking on the inner input */
+		'noSpellcheck'?: NLDDSearchField['noSpellcheck'];
+		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
+		'width'?: NLDDSearchField['width'];
+		'internals'?: NLDDSearchField['internals'];
+		/** When the input value changes; detail: { value: string } */
+		'onInput'?: (event: CustomEvent) => void;
+		/** When the input value is committed; detail: { value: string } */
+		'onChange'?: (event: CustomEvent) => void;
+		/** When search is submitted via Enter or the search button; detail: { value: string } */
+		'onSearch'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDSegmentedControlProps = {
+		/** Selected value for radio type */
+		'value'?: NLDDSegmentedControl['value'];
+		/** Control size: 'sm' | 'md' | 'lg' (default: 'md') */
+		'size'?: NLDDSegmentedControl['size'];
+		/** Input type: 'radio' | 'checkbox' (default: 'radio'). */
+		'type'?: NLDDSegmentedControl['type'];
+		/** Content type for all items: 'text' | 'icon' | 'icon-and-text' (default: 'text') */
+		'variant'?: NLDDSegmentedControl['variant'];
+		/** Disabled state for all items */
+		'disabled'?: NLDDSegmentedControl['disabled'];
+		/** Width mode: 'full' (stretches to container), 'fit-content' (per-item content size), or any CSS length (e.g. '240px') */
+		'width'?: NLDDSegmentedControl['width'];
+		/** Name for form submission, forwarded to native inputs */
+		'name'?: NLDDSegmentedControl['name'];
+		/** Accessible name for the group, set as aria-label */
+		'accessible-label'?: NLDDSegmentedControl['accessibleLabel'];
+		/** Accessible name for the group, set as aria-label */
+		'accessibleLabel'?: NLDDSegmentedControl['accessibleLabel'];
+		/** Id of an external label element, set as aria-labelledby on the group */
+		'accessible-labeled-by'?: NLDDSegmentedControl['accessibleLabeledBy'];
+		/** Id of an external label element, set as aria-labelledby on the group */
+		'accessibleLabeledBy'?: NLDDSegmentedControl['accessibleLabeledBy'];
+		/** Selected values for checkbox type. Use property binding: .values=${['New York', 'Amsterdam']} Does not reflect to an attribute — safe for values containing spaces or special characters. */
+		'values'?: NLDDSegmentedControl['values'];
+		'internals'?: NLDDSegmentedControl['internals'];
+		/** When selection changes; detail: { value: string } for radio, detail: { values: string[] } for checkbox */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDSegmentedControlItemProps = {
+		/** Value for this item */
+		'value'?: NLDDSegmentedControlItem['value'];
+		/** Whether this item is selected (set by parent) */
+		'selected'?: NLDDSegmentedControlItem['selected'];
+		/** Disabled state */
+		'disabled'?: NLDDSegmentedControlItem['disabled'];
+		/** 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. */
+		'variant'?: NLDDSegmentedControlItem['variant'];
+		/** Type of the native input: 'radio' | 'checkbox' (default: 'radio'). Set by nldd-segmented-control. */
+		'input-type'?: NLDDSegmentedControlItem['inputType'];
+		/** Type of the native input: 'radio' | 'checkbox' (default: 'radio'). Set by nldd-segmented-control. */
+		'inputType'?: NLDDSegmentedControlItem['inputType'];
+		/** Name of the group for form submission, put on the native input. Set by nldd-segmented-control. */
+		'group-name'?: NLDDSegmentedControlItem['groupName'];
+		/** Name of the group for form submission, put on the native input. Set by nldd-segmented-control. */
+		'groupName'?: NLDDSegmentedControlItem['groupName'];
+		/** Text label (shown for variant "text" and "icon-and-text"; used as aria-label and tooltip for variant "icon") */
+		'text'?: NLDDSegmentedControlItem['text'];
+		/** Icon name for nldd-icon */
+		'icon'?: NLDDSegmentedControlItem['icon'];
+		/** When item is activated; detail: { value: string, checked: boolean } */
+		'onItemChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDSheetProps = {
+		/** Sheet position: 'left' | 'right' | 'bottom' (default: 'right') */
+		'placement'?: NLDDSheet['placement'];
+		/** Custom height for bottom sheets (and for any sheet on sm viewports, where all placements collapse to bottom). Accepts: `'full'` (default — viewport minus top-inset, identical to omitting the attribute), `'fit-content'` (collapse to content size), or any CSS length/percentage (e.g. `'50dvh'`, `'480px'`, `'50%'`). Always clamped to `100dvh - top-inset` so the sheet can't extend past the dismiss-tap area. No effect on side sheets at md+. */
+		'height'?: NLDDSheet['height'];
+		/** Non-modal (no backdrop or focus lock); the sheet is modal by default */
+		'modeless'?: NLDDSheet['modeless'];
+		/** Accessible name for the dialog, forwarded as aria-label (default: 'Venster') */
+		'accessible-label'?: NLDDSheet['accessibleLabel'];
+		/** Accessible name for the dialog, forwarded as aria-label (default: 'Venster') */
+		'accessibleLabel'?: NLDDSheet['accessibleLabel'];
+		/** Custom width for side sheets (left/right) as a CSS length (e.g. '480px', '32rem'). Applied from the md breakpoint up; ignored on sm (bottom sheet) and for `placement="bottom"`. Clamped to `100vw - 2 * inset` so the sheet always fits. */
+		'width'?: NLDDSheet['width'];
+		/** Fired when the sheet is opened */
+		'onOpen'?: (event: CustomEvent) => void;
+		/** Fired when the sheet is fully closed */
+		'onClose'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDSideBySideSplitViewProps = {
+		/** Use a tinted background color (cascades to descendants) */
+		'background'?: NLDDSideBySideSplitView['background'];
+		/** Number of panes (default: 2) */
+		'panes'?: NLDDSideBySideSplitView['panes'];
+		'onSINGLE_COLUMN_CHANGE_EVENT'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDSidebarSectionProps = {
+		/** Body max-width: 'full' removes the constraint; any CSS length overrides the default. */
+		'width'?: NLDDSidebarSection['width'];
+		/** Sticky top inset on lg (CSS length; default = 16px). */
+		'sticky-top'?: NLDDSidebarSection['stickyTop'];
+		/** Sticky top inset on lg (CSS length; default = 16px). */
+		'stickyTop'?: NLDDSidebarSection['stickyTop'];
+		/** Sticky bottom inset on lg (CSS length; default = 16px). */
+		'sticky-bottom'?: NLDDSidebarSection['stickyBottom'];
+		/** Sticky bottom inset on lg (CSS length; default = 16px). */
+		'stickyBottom'?: NLDDSidebarSection['stickyBottom'];
+		/** Accessible name for the sidebar (the aside landmark on lg and the sheet on sm/md). Default 'Zijbalk'. */
+		'sidebar-label'?: NLDDSidebarSection['sidebarLabel'];
+		/** Accessible name for the sidebar (the aside landmark on lg and the sheet on sm/md). Default 'Zijbalk'. */
+		'sidebarLabel'?: NLDDSidebarSection['sidebarLabel'];
+		/** Opt out of the sheet: a narrow section stacks the sidebar above the main instead of collapsing. `collapsed` then stays false. */
+		'no-collapse'?: NLDDSidebarSection['noCollapse'];
+		/** Opt out of the sheet: a narrow section stacks the sidebar above the main instead of collapsing. `collapsed` then stays false. */
+		'noCollapse'?: NLDDSidebarSection['noCollapse'];
+		/** Override translation keys (sheet title fallback, dismiss label); unset keys fall back to Dutch. */
+		'translations'?: NLDDSidebarSection['translations'];
+		/** Read-only, reflected: true while the sidebar is a sheet (the section is narrower than lg). Target it via CSS to reveal sheet-only chrome. */
+		'collapsed'?: NLDDSidebarSection['collapsed'];
+		'background'?: NLDDSidebarSection['background'];
+		'scheme'?: NLDDSidebarSection['scheme'];
+		'padding-block'?: NLDDSidebarSection['paddingBlock'];
+		'paddingBlock'?: NLDDSidebarSection['paddingBlock'];
+		'padding-top'?: NLDDSidebarSection['paddingTop'];
+		'paddingTop'?: NLDDSidebarSection['paddingTop'];
+		'padding-bottom'?: NLDDSidebarSection['paddingBottom'];
+		'paddingBottom'?: NLDDSidebarSection['paddingBottom'];
+		'sm-padding-block'?: NLDDSidebarSection['smPaddingBlock'];
+		'smPaddingBlock'?: NLDDSidebarSection['smPaddingBlock'];
+		'sm-padding-top'?: NLDDSidebarSection['smPaddingTop'];
+		'smPaddingTop'?: NLDDSidebarSection['smPaddingTop'];
+		'sm-padding-bottom'?: NLDDSidebarSection['smPaddingBottom'];
+		'smPaddingBottom'?: NLDDSidebarSection['smPaddingBottom'];
+		'md-padding-block'?: NLDDSidebarSection['mdPaddingBlock'];
+		'mdPaddingBlock'?: NLDDSidebarSection['mdPaddingBlock'];
+		'md-padding-top'?: NLDDSidebarSection['mdPaddingTop'];
+		'mdPaddingTop'?: NLDDSidebarSection['mdPaddingTop'];
+		'md-padding-bottom'?: NLDDSidebarSection['mdPaddingBottom'];
+		'mdPaddingBottom'?: NLDDSidebarSection['mdPaddingBottom'];
+		'lg-padding-block'?: NLDDSidebarSection['lgPaddingBlock'];
+		'lgPaddingBlock'?: NLDDSidebarSection['lgPaddingBlock'];
+		'lg-padding-top'?: NLDDSidebarSection['lgPaddingTop'];
+		'lgPaddingTop'?: NLDDSidebarSection['lgPaddingTop'];
+		'lg-padding-bottom'?: NLDDSidebarSection['lgPaddingBottom'];
+		'lgPaddingBottom'?: NLDDSidebarSection['lgPaddingBottom'];
+		'height'?: NLDDSidebarSection['height'];
+		/** The sidebar sheet opened. */
+		'onOpen'?: (event: CustomEvent) => void;
+		/** The sidebar sheet closed. */
+		'onClose'?: (event: CustomEvent) => void;
+		/** The collapsed state flipped because the section's width crossed the lg breakpoint; `{ collapsed }`. */
+		'onCollapseChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDSimpleSectionProps = {
+		/** Body max-width: 'full' removes the constraint so the section spans the full available width. Any CSS length (e.g. '480px') overrides the default max-width. */
+		'width'?: NLDDSimpleSection['width'];
+		/** Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface). */
+		'background'?: NLDDSimpleSection['background'];
+		/** Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme). */
+		'scheme'?: NLDDSimpleSection['scheme'];
+		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
+		'padding-block'?: NLDDSimpleSection['paddingBlock'];
+		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
+		'paddingBlock'?: NLDDSimpleSection['paddingBlock'];
+		/** Top padding override. */
+		'padding-top'?: NLDDSimpleSection['paddingTop'];
+		/** Top padding override. */
+		'paddingTop'?: NLDDSimpleSection['paddingTop'];
+		/** Bottom padding override. */
+		'padding-bottom'?: NLDDSimpleSection['paddingBottom'];
+		/** Bottom padding override. */
+		'paddingBottom'?: NLDDSimpleSection['paddingBottom'];
+		/** Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}). */
+		'sm-padding-block'?: NLDDSimpleSection['smPaddingBlock'];
+		/** Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}). */
+		'smPaddingBlock'?: NLDDSimpleSection['smPaddingBlock'];
+		'sm-padding-top'?: NLDDSimpleSection['smPaddingTop'];
+		'smPaddingTop'?: NLDDSimpleSection['smPaddingTop'];
+		'sm-padding-bottom'?: NLDDSimpleSection['smPaddingBottom'];
+		'smPaddingBottom'?: NLDDSimpleSection['smPaddingBottom'];
+		'md-padding-block'?: NLDDSimpleSection['mdPaddingBlock'];
+		'mdPaddingBlock'?: NLDDSimpleSection['mdPaddingBlock'];
+		'md-padding-top'?: NLDDSimpleSection['mdPaddingTop'];
+		'mdPaddingTop'?: NLDDSimpleSection['mdPaddingTop'];
+		'md-padding-bottom'?: NLDDSimpleSection['mdPaddingBottom'];
+		'mdPaddingBottom'?: NLDDSimpleSection['mdPaddingBottom'];
+		'lg-padding-block'?: NLDDSimpleSection['lgPaddingBlock'];
+		'lgPaddingBlock'?: NLDDSimpleSection['lgPaddingBlock'];
+		'lg-padding-top'?: NLDDSimpleSection['lgPaddingTop'];
+		'lgPaddingTop'?: NLDDSimpleSection['lgPaddingTop'];
+		'lg-padding-bottom'?: NLDDSimpleSection['lgPaddingBottom'];
+		'lgPaddingBottom'?: NLDDSimpleSection['lgPaddingBottom'];
+		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
+		'height'?: NLDDSimpleSection['height'];
+	};
+
+	type NLDDSkipLinkProps = {
+		/** Tekst van de skip-link. Fallback naar i18n default. */
+		'text'?: NLDDSkipLink['text'];
+		/** Optioneel extern doel-ID. Zonder href springt naar eind van eigen content. */
+		'href'?: NLDDSkipLink['href'];
+		'translations'?: NLDDSkipLink['translations'];
+	};
+
+	type NLDDSpacerProps = {
+		/** Base spacer size. 'flexible' or one of the fixed tokens (2–96). Default: '16'. */
+		'size'?: NLDDSpacer['size'];
+		/** Spacer size at sm breakpoint (max-width: 640px). */
+		'sm-size'?: NLDDSpacer['smSize'];
+		/** Spacer size at sm breakpoint (max-width: 640px). */
+		'smSize'?: NLDDSpacer['smSize'];
+		/** Spacer size at md breakpoint (641px–1007px). */
+		'md-size'?: NLDDSpacer['mdSize'];
+		/** Spacer size at md breakpoint (641px–1007px). */
+		'mdSize'?: NLDDSpacer['mdSize'];
+		/** Spacer size at lg breakpoint (min-width: 1008px). */
+		'lg-size'?: NLDDSpacer['lgSize'];
+		/** Spacer size at lg breakpoint (min-width: 1008px). */
+		'lgSize'?: NLDDSpacer['lgSize'];
+		/** Direction: 'horizontal' | 'vertical' | 'both' (default: 'both') */
+		'direction'?: NLDDSpacer['direction'];
+	};
+
+	type NLDDSpacerCellProps = {
+		/** Spacer size in pixels: '2' | '4' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '28' | '32' | '40' | '44' | '48' | '56' | '64' | '80' | '96' (default: '16') */
+		'size'?: NLDDSpacerCell['size'];
+		'hide-below'?: NLDDSpacerCell['hideBelow'];
+		'hideBelow'?: NLDDSpacerCell['hideBelow'];
+		'hide-above'?: NLDDSpacerCell['hideAbove'];
+		'hideAbove'?: NLDDSpacerCell['hideAbove'];
+	};
+
+	type NLDDSplitButtonProps = {
+		/** Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md') */
+		'size'?: NLDDSplitButton['size'];
+		/** Button variant (default: 'neutral-tinted') */
+		'variant'?: NLDDSplitButton['variant'];
+		/** Disabled state */
+		'disabled'?: NLDDSplitButton['disabled'];
+		/** Width mode: 'full' (stretches to container) or any CSS length; the main action button fills the available space */
+		'width'?: NLDDSplitButton['width'];
+		/** Button text for the primary action */
+		'text'?: NLDDSplitButton['text'];
+		/** Icon name shown before the text on the primary action button */
+		'icon'?: NLDDSplitButton['icon'];
+		/** Translations; unset keys fall back to Dutch */
+		'translations'?: NLDDSplitButton['translations'];
+		/** Fired when the main button is clicked */
+		'onActionClick'?: (event: CustomEvent) => void;
+		/** Fired when the dropdown trigger is clicked and no overlay is slotted */
+		'onMenuClick'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDSplitViewDividerProps = {
+		/** Orientation: 'vertical' | 'horizontal' */
+		'orientation'?: NLDDSplitViewDivider['orientation'];
+		/** Show a drag handle */
+		'has-drag-handle'?: NLDDSplitViewDivider['hasDragHandle'];
+		/** Show a drag handle */
+		'hasDragHandle'?: NLDDSplitViewDivider['hasDragHandle'];
+	};
+
+	type NLDDSplitViewPaneProps = {
+		/** The pane has content (default: false) */
+		'has-content'?: NLDDSplitViewPane['hasContent'];
+		/** The pane has content (default: false) */
+		'hasContent'?: NLDDSplitViewPane['hasContent'];
+		/** Hide the back button (set automatically by the split view) */
+		'hide-back'?: NLDDSplitViewPane['hideBack'];
+		/** Hide the back button (set automatically by the split view) */
+		'hideBack'?: NLDDSplitViewPane['hideBack'];
+		/** Use a tinted background color (cascades to descendants) */
+		'background'?: NLDDSplitViewPane['background'];
+	};
+
+	type NLDDStackedSplitViewProps = {
+		/** Use a tinted background color (cascades to descendants) */
+		'background'?: NLDDStackedSplitView['background'];
+		/** Number of panes (default: 2) */
+		'panes'?: NLDDStackedSplitView['panes'];
+	};
+
+	type NLDDStatusBarProps = {
+		/** Kleur van de balk (standaard: 'neutral') */
+		'variant'?: NLDDStatusBar['variant'];
+		/** De statustekst (één regel; afgekapt met ellipsis) */
+		'text'?: NLDDStatusBar['text'];
+		/** Maakt de hele balk een link (rendert een <a>) */
+		'href'?: NLDDStatusBar['href'];
+		/** Link target (bijv. '_blank'); alleen gebruikt bij href */
+		'target'?: NLDDStatusBar['target'];
+		/** Link rel; standaard 'noopener noreferrer' bij target='_blank' */
+		'rel'?: NLDDStatusBar['rel'];
+		/** Maakt de hele balk een button; genegeerd als href is gezet */
+		'button'?: NLDDStatusBar['button'];
+	};
+
+	type NLDDStepIndicatorProps = {
+		/** Naam van de nav; standaard de i18n-waarde ("Voortgang") */
+		'accessible-label'?: NLDDStepIndicator['accessibleLabel'];
+		/** Naam van de nav; standaard de i18n-waarde ("Voortgang") */
+		'accessibleLabel'?: NLDDStepIndicator['accessibleLabel'];
+		/** 1-based nummer van de huidige stap (standaard 1) */
+		'current'?: NLDDStepIndicator['current'];
+		/** Overschrijf vertaalsleutels; niet gezette vallen terug op Nederlands */
+		'translations'?: NLDDStepIndicator['translations'];
+		'total'?: NLDDStepIndicator['total'];
+		/** The current step, clamped to the number of steps: an out-of-range `current` would otherwise mark every step past (or none at all). */
+		'resolvedCurrent'?: NLDDStepIndicator['resolvedCurrent'];
+		'currentItem'?: NLDDStepIndicator['currentItem'];
+	};
+
+	type NLDDStepIndicatorItemProps = {
+		/** `past` | `current` | `future`; overschrijft wat de ouder afleidt */
+		'status'?: NLDDStepIndicatorItem['status'];
+		/** Label onder de bol */
+		'text'?: NLDDStepIndicatorItem['text'];
+		/** Icoon in de bol in plaats van het cijfer of het vinkje */
+		'icon'?: NLDDStepIndicatorItem['icon'];
+		/** Maakt de stap een link (bijvoorbeeld terug naar een afgeronde stap) */
+		'href'?: NLDDStepIndicatorItem['href'];
+		/** For flows without a URL per step (a wizard inside one window). Ignored once `href` is set: one step is one action, and a link outranks a button -- the same rule as nldd-card and nldd-avatar. */
+		'button'?: NLDDStepIndicatorItem['button'];
+		/** The status that counts: the item's own wins over the derived one. */
+		'resolvedStatus'?: NLDDStepIndicatorItem['resolvedStatus'];
+	};
+
+	type NLDDStepperProps = {
+		/** Current value */
+		'value'?: NLDDStepper['value'];
+		/** Minimum value (default: 0) */
+		'min'?: NLDDStepper['min'];
+		/** Maximum value (default: Infinity) */
+		'max'?: NLDDStepper['max'];
+		/** Step size (default: 1) */
+		'step'?: NLDDStepper['step'];
+		/** Disabled state */
+		'disabled'?: NLDDStepper['disabled'];
+		/** Size: 'xs' | 'sm' | 'md' (default: 'md') */
+		'size'?: NLDDStepper['size'];
+		/** Name for form submission; the value is submitted under this name */
+		'name'?: NLDDStepper['name'];
+		/** Translations; unspecified keys fall back to Dutch */
+		'translations'?: NLDDStepper['translations'];
+		'internals'?: NLDDStepper['internals'];
+		/** When the value changes; detail: { value: number } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDSwitchProps = {
+		/** Name for form submission; nothing is submitted when the switch is off */
+		'name'?: NLDDSwitch['name'];
+		/** Whether the switch is on/off */
+		'checked'?: NLDDSwitch['checked'];
+		/** Disabled state */
+		'disabled'?: NLDDSwitch['disabled'];
+		/** Switch size: 'xs' | 'sm' (default: 'sm') */
+		'size'?: NLDDSwitch['size'];
+		/** Accessible label forwarded as aria-label to the native input. Required when using nldd-switch without nldd-switch-field. */
+		'accessible-label'?: NLDDSwitch['accessibleLabel'];
+		/** Accessible label forwarded as aria-label to the native input. Required when using nldd-switch without nldd-switch-field. */
+		'accessibleLabel'?: NLDDSwitch['accessibleLabel'];
+		/** Value submitted with the form when the switch is on (default: 'on') */
+		'value'?: NLDDSwitch['value'];
+		'internals'?: NLDDSwitch['internals'];
+		/** When the switch state changes; detail: { checked: boolean, value: string } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDSwitchFieldProps = {
+		/** Checked state */
+		'checked'?: NLDDSwitchField['checked'];
+		/** Disabled state */
+		'disabled'?: NLDDSwitchField['disabled'];
+		/** Value for form submission */
+		'value'?: NLDDSwitchField['value'];
+		/** Name for form submission */
+		'name'?: NLDDSwitchField['name'];
+		/** Label text for the switch */
+		'label'?: NLDDSwitchField['label'];
+		/** When checked state changes; detail: { checked: boolean, value: string } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDTabBarProps = {
+		/** Centers the tabs in the container (host fills the row, tabs group in the middle) */
+		'centered'?: NLDDTabBar['centered'];
+		/** Visual mode: 'icon-and-text' | 'text' | 'icon'. When unset, the variant is inferred from each item's content. Drives the layout at every size. */
+		'variant'?: NLDDTabBar['variant'];
+		/** Size: 'md' | 'lg' (default: 'md'). 'lg' enlarges the touch target; the per-variant layout is preserved (icon-and-text stacks the icon over the text, text renders large text, icon renders a larger icon-only control). */
+		'size'?: NLDDTabBar['size'];
+		/** Renders a nav landmark instead of tablist; use for href-based items that navigate between routes */
+		'navigation'?: NLDDTabBar['navigation'];
+		/** Disables the whole bar: dims it, blocks pointer interaction, and takes the tabs out of the tab order */
+		'disabled'?: NLDDTabBar['disabled'];
+		/** Accessible name for the navigation region; defaults to 'Tabs' */
+		'accessible-label'?: NLDDTabBar['accessibleLabel'];
+		/** Accessible name for the navigation region; defaults to 'Tabs' */
+		'accessibleLabel'?: NLDDTabBar['accessibleLabel'];
+		/** When a tab is selected; detail: { item: NLDDTabBarItem } */
+		'onTabchange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDTabBarItemProps = {
+		/** Selected state (managed by nldd-tab-bar) */
+		'selected'?: NLDDTabBarItem['selected'];
+		/** Optional link URL; renders an anchor instead of a button */
+		'href'?: NLDDTabBarItem['href'];
+		/** Set by nldd-tab-bar. Not part of the public API. */
+		'_groupVariant'?: NLDDTabBarItem['_groupVariant'];
+		/** Tab text; also used as accessible name for icon-only items */
+		'text'?: NLDDTabBarItem['text'];
+		/** Icon name for nldd-icon; an alternative to the icon slot. The icon and icon-and-text variants fall back to a placeholder icon when neither is provided. */
+		'icon'?: NLDDTabBarItem['icon'];
+		/** Size: 'md' (default) | 'lg'. Set by nldd-tab-bar from its own size; 'lg' enlarges the touch target while keeping the variant layout. */
+		'size'?: NLDDTabBarItem['size'];
+		/** When the item is activated; detail: { item: NLDDTabBarItem } */
+		'onSelect'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDTableProps = {
+		/** Surface fill of the box (default 'base') */
+		'background'?: NLDDTable['background'];
+		/** CSS grid track list defining the columns once, e.g. "minmax(200px,1fr) 120px 80px" */
+		'columns'?: NLDDTable['columns'];
+		/** Track list when the table is sm-wide (≤640px); falls back to `columns` */
+		'sm-columns'?: NLDDTable['smColumns'];
+		/** Track list when the table is sm-wide (≤640px); falls back to `columns` */
+		'smColumns'?: NLDDTable['smColumns'];
+		/** Track list when the table is md-wide (641–1007px); falls back to `columns` */
+		'md-columns'?: NLDDTable['mdColumns'];
+		/** Track list when the table is md-wide (641–1007px); falls back to `columns` */
+		'mdColumns'?: NLDDTable['mdColumns'];
+		/** Track list when the table is lg-wide (≥1008px); falls back to `columns` */
+		'lg-columns'?: NLDDTable['lgColumns'];
+		/** Track list when the table is lg-wide (≥1008px); falls back to `columns` */
+		'lgColumns'?: NLDDTable['lgColumns'];
+		/** Accessible name for the table. Strongly recommended — role="table" needs a name. A missing label is DEV-warned and a generic fallback name is used. */
+		'accessible-label'?: NLDDTable['accessibleLabel'];
+		/** Accessible name for the table. Strongly recommended — role="table" needs a name. A missing label is DEV-warned and a generic fallback name is used. */
+		'accessibleLabel'?: NLDDTable['accessibleLabel'];
+		/** Opt into row selection: body rows expose aria-selected (true/false). Without it, rows omit aria-selected so a non-selectable table isn't announced as selectable. */
+		'selectable'?: NLDDTable['selectable'];
+		/** Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled */
+		'empty-text'?: NLDDTable['emptyText'];
+		/** Text for the default empty-state dialog (falls back to the Dutch i18n default). Ignored when `[slot=empty]` is filled */
+		'emptyText'?: NLDDTable['emptyText'];
+		/** Supporting text for the default empty-state dialog. Ignored when `[slot=empty]` is filled */
+		'empty-supporting-text'?: NLDDTable['emptySupportingText'];
+		/** Supporting text for the default empty-state dialog. Ignored when `[slot=empty]` is filled */
+		'emptySupportingText'?: NLDDTable['emptySupportingText'];
+		/** Override translation keys; unset keys fall back to Dutch */
+		'translations'?: NLDDTable['translations'];
+	};
+
+	type NLDDTableRowProps = {
+		/** Highlights the row (same treatment as nldd-list-item[selected]) */
+		'selected'?: NLDDTableRow['selected'];
+	};
+
+	type NLDDTagProps = {
+		/** Kleurvariant. Semantisch: 'neutral' | 'accent' | 'success' | 'warning' | 'critical'. Rijkskleuren: 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen'. (default: 'neutral') */
+		'color'?: NLDDTag['color'];
+		/** Tag grootte: 'sm' | 'md' (default: 'md') */
+		'size'?: NLDDTag['size'];
+		/** Tag tekst (alternatief voor default slot) */
+		'text'?: NLDDTag['text'];
+		/** Icoon voor de tekst */
+		'icon'?: NLDDTag['icon'];
+		/** Wat zichtbaar is: 'text' | 'icon' | 'icon-and-text'. Onbepaald → auto-detect op basis van welke van text/icon aanwezig is. */
+		'variant'?: NLDDTag['variant'];
+		/** Toegankelijk label voor screenreaders. Gebruik dit bij icon-only tags zonder zichtbare tekst. */
+		'accessible-label'?: NLDDTag['accessibleLabel'];
+		/** Toegankelijk label voor screenreaders. Gebruik dit bij icon-only tags zonder zichtbare tekst. */
+		'accessibleLabel'?: NLDDTag['accessibleLabel'];
+	};
+
+	type NLDDTextCellProps = {
+		/** Cell size: 'sm' | 'md' (default: 'md') */
+		'size'?: NLDDTextCell['size'];
+		/** Text color variant: 'default' | 'secondary' | 'accent' | 'success' | 'warning' | 'critical' (default: 'default'). All non-default/-secondary variants apply to all three text fields so the cell reads as a coherent state. */
+		'color'?: NLDDTextCell['color'];
+		/** 'full' | 'fit-content' | CSS length (e.g. '200px', '20rem'). Default: 'full' */
+		'width'?: NLDDTextCell['width'];
+		/** Minimum width as CSS length (e.g. '80px', '5rem') */
+		'min-width'?: NLDDTextCell['minWidth'];
+		/** Minimum width as CSS length (e.g. '80px', '5rem') */
+		'minWidth'?: NLDDTextCell['minWidth'];
+		/** Maximum width as CSS length (e.g. '200px', '20rem') */
+		'max-width'?: NLDDTextCell['maxWidth'];
+		/** Maximum width as CSS length (e.g. '200px', '20rem') */
+		'maxWidth'?: NLDDTextCell['maxWidth'];
+		/** Minimum height as CSS length (e.g. '44px', '3rem') */
+		'min-height'?: NLDDTextCell['minHeight'];
+		/** Minimum height as CSS length (e.g. '44px', '3rem') */
+		'minHeight'?: NLDDTextCell['minHeight'];
+		/** Horizontal alignment: 'left' | 'center' | 'right' (default: 'left') */
+		'horizontal-alignment'?: NLDDTextCell['horizontalAlignment'];
+		/** Horizontal alignment: 'left' | 'center' | 'right' (default: 'left') */
+		'horizontalAlignment'?: NLDDTextCell['horizontalAlignment'];
+		/** Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center') */
+		'vertical-alignment'?: NLDDTextCell['verticalAlignment'];
+		/** Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center') */
+		'verticalAlignment'?: NLDDTextCell['verticalAlignment'];
+		/** Main text content. Supports **bold** syntax for inline bold segments. Falls back to default slot. */
+		'text'?: NLDDTextCell['text'];
+		/** Optional overline text displayed above the main content. Supports **bold**. Falls back to `overline` slot. */
+		'overline'?: NLDDTextCell['overline'];
+		/** Optional supporting text displayed below the main content. Supports **bold**. Falls back to `supporting-text` slot. */
+		'supporting-text'?: NLDDTextCell['supportingText'];
+		/** Optional supporting text displayed below the main content. Supports **bold**. Falls back to `supporting-text` slot. */
+		'supportingText'?: NLDDTextCell['supportingText'];
+		/** Query substring to bold-highlight across text fields. Empty = no marking. */
+		'query'?: NLDDTextCell['query'];
+		/** 'match' | 'predictive' (default: 'predictive') */
+		'query-mark-mode'?: NLDDTextCell['queryMarkMode'];
+		/** 'match' | 'predictive' (default: 'predictive') */
+		'queryMarkMode'?: NLDDTextCell['queryMarkMode'];
+		'hide-below'?: NLDDTextCell['hideBelow'];
+		'hideBelow'?: NLDDTextCell['hideBelow'];
+		'hide-above'?: NLDDTextCell['hideAbove'];
+		'hideAbove'?: NLDDTextCell['hideAbove'];
+	};
+
+	type NLDDTextEditorProps = {
+		/** Editor content (markdown) */
+		'value'?: NLDDTextEditor['value'];
+		/** Sets the id on the editable element. Set automatically by nldd-form-field. */
+		'input-id'?: NLDDTextEditor['inputId'];
+		/** Sets the id on the editable element. Set automatically by nldd-form-field. */
+		'inputId'?: NLDDTextEditor['inputId'];
+		/** Placeholder text shown while empty */
+		'placeholder'?: NLDDTextEditor['placeholder'];
+		/** Disabled state */
+		'disabled'?: NLDDTextEditor['disabled'];
+		/** Field name for form submission */
+		'name'?: NLDDTextEditor['name'];
+		/** Readonly state (focusable and selectable, not editable) */
+		'readonly'?: NLDDTextEditor['readonly'];
+		/** Required state */
+		'required'?: NLDDTextEditor['required'];
+		/** Wrap long lines (default true; prose wraps) */
+		'wrap'?: NLDDTextEditor['wrap'];
+		/** Minimum visible rows (the floor in every resize mode). Default: 6. */
+		'rows'?: NLDDTextEditor['rows'];
+		/** 'none' (fixed) | 'vertical' (drag) | 'auto' (grow, default) */
+		'resize'?: NLDDTextEditor['resize'];
+		/** 'simple' (default, bare) | 'input-field' (framed surface) */
+		'variant'?: NLDDTextEditor['variant'];
+		/** 'sans' (default) | 'mono' */
+		'font'?: NLDDTextEditor['font'];
+		/** 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. */
+		'accessibleLabel'?: NLDDTextEditor['accessibleLabel'];
+		/** Enable the annotation overlay (off by default). Annotations only render when this is set. */
+		'annotatable'?: NLDDTextEditor['annotatable'];
+		/** Override the editor's assistive-tech strings (the open-in-new-tab link badge and the annotation count badge). Unset keys fall back to Dutch. */
+		'translations'?: NLDDTextEditor['translations'];
+		/** Consumer-supplied */
+		'mentionSource'?: NLDDTextEditor['mentionSource'];
+		/** 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]`. */
+		'annotations'?: NLDDTextEditor['annotations'];
+		'internals'?: NLDDTextEditor['internals'];
+		/** When the content changes (detail: { value }) */
+		'onInput'?: (event: CustomEvent) => void;
+		/** When the content is committed on blur (detail: { value }) */
+		'onChange'?: (event: CustomEvent) => void;
+		/** When the selection or content changes (detail: TextEditorState), for toolbar toggle state */
+		'onNlddTextEditorState'?: (event: CustomEvent) => void;
+		/** When an @-mention is inserted (detail: MentionInsertedDetail with id, label, from, to) */
+		'onNlddTextEditorMention'?: (event: CustomEvent) => void;
+		/** When an annotation's count badge is clicked (detail: { ids: string[], rect: DOMRect }); rect is the badge's viewport box so a consumer can anchor its own note UI to it */
+		'onNlddTextEditorAnnotationClick'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDTextFieldProps = {
+		/** 'md' (default) | 'sm'. Set automatically by nldd-form-field. */
+		'size'?: NLDDTextField['size'];
+		/** The input value */
+		'value'?: NLDDTextField['value'];
+		/** Sets the id on the native input. Set automatically by nldd-form-field. */
+		'input-id'?: NLDDTextField['inputId'];
+		/** Sets the id on the native input. Set automatically by nldd-form-field. */
+		'inputId'?: NLDDTextField['inputId'];
+		/** Placeholder text */
+		'placeholder'?: NLDDTextField['placeholder'];
+		/** Marks the field as invalid */
+		'invalid'?: NLDDTextField['invalid'];
+		/** Marks the field as valid */
+		'valid'?: NLDDTextField['valid'];
+		/** Disabled state */
+		'disabled'?: NLDDTextField['disabled'];
+		/** Input type: 'text' | 'email' | 'tel' | 'url' */
+		'type'?: NLDDTextField['type'];
+		/** Input name for form submission */
+		'name'?: NLDDTextField['name'];
+		/** Readonly state */
+		'readonly'?: NLDDTextField['readonly'];
+		/** Required state */
+		'required'?: NLDDTextField['required'];
+		/** Autocomplete hint */
+		'autocomplete'?: NLDDTextField['autocomplete'];
+		/** Accessible label forwarded to the inner input. Set automatically by nldd-form-field. */
+		'accessible-label'?: NLDDTextField['accessibleLabel'];
+		/** Accessible label forwarded to the inner input. Set automatically by nldd-form-field. */
+		'accessibleLabel'?: NLDDTextField['accessibleLabel'];
+		/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
+		'error-message-ids'?: NLDDTextField['errorMessageIds'];
+		/** Ids for aria-describedby on the inner input. Set automatically by nldd-form-field. */
+		'errorMessageIds'?: NLDDTextField['errorMessageIds'];
+		/** Disables browser spellchecking on the inner input */
+		'no-spellcheck'?: NLDDTextField['noSpellcheck'];
+		/** Disables browser spellchecking on the inner input */
+		'noSpellcheck'?: NLDDTextField['noSpellcheck'];
+		/** Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container. */
+		'width'?: NLDDTextField['width'];
+		'internals'?: NLDDTextField['internals'];
+		/** When input value changes */
+		'onInput'?: (event: CustomEvent) => void;
+		/** When input value is committed */
+		'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'];
+		/** Wat deze rij is: een `dot` (standaard) op een tijdlijn van gebeurtenissen, stip van 16px, of een `step` in een stappenlijst, stip van 24px waar een cijfer of icoon in past */
+		'variant'?: NLDDTimelineTrackCell['variant'];
+		/** Deze rij hoort onder de vorige: een kleinere stip in dezelfde baan, dus het spoor loopt recht door en er springt niets in. De stip blijft leeg (een cijfer of icoon past er niet in en zou de rij tot een eigen stap maken); de hiërarchie zet je verder met de rij zelf, bijvoorbeeld een `nldd-text-cell` in plaats van een `nldd-title-cell` */
+		'minor'?: NLDDTimelineTrackCell['minor'];
+		/** Richting waarin de tijdlijn vooruit loopt: `down` (standaard) zet het verleden boven, `up` eronder. Alleen de huidige stap heeft een half spoor, dus alleen daar heeft dit effect */
+		'direction'?: NLDDTimelineTrackCell['direction'];
+		/** Plek in de reeks (standaard 'between'): bepaalt of de lijn boven, onder of aan beide kanten van de stip doorloopt */
+		'position'?: NLDDTimelineTrackCell['position'];
+		/** Cijfer of korte tekst in de stip */
+		'text'?: NLDDTimelineTrackCell['text'];
+		/** Icoonnaam in de stip; wint van `text` */
+		'icon'?: NLDDTimelineTrackCell['icon'];
+		/** Only a step marker has room to read a number in, and a minor row is smaller still -- besides, a number would claim it is a step of its own. */
+		'showsContent'?: NLDDTimelineTrackCell['showsContent'];
+	};
+
+	type NLDDTitleProps = {
+		/** Visual size of the title: 1–6 (default: 3) */
+		'size'?: NLDDTitle['size'];
+		/** 'inherit' laat de titel de tekstkleur van de ondergrond volgen (voor gekleurde vlakken zoals de filled-categories); overline en subtitle krijgen dezelfde kleur op verlaagde dekking. Leeg = standaard contentkleuren. */
+		'color'?: NLDDTitle['color'];
+	};
+
+	type NLDDTitleCellProps = {
+		/** Visual size of the title (default: 5) */
+		'size'?: NLDDTitleCell['size'];
+		/** Text color variant (default: 'default'). `secondary` demotes the title to match the muted overline/supporting-text. `accent`, `success`, `warning` and `critical` tint all three regions so the cell reads as a coherent state. */
+		'color'?: NLDDTitleCell['color'];
+		/** 'full' | 'fit-content' | CSS length (e.g. '200px', '20rem'). Default: 'full' */
+		'width'?: NLDDTitleCell['width'];
+		/** Minimum width as CSS length (e.g. '80px', '5rem') */
+		'min-width'?: NLDDTitleCell['minWidth'];
+		/** Minimum width as CSS length (e.g. '80px', '5rem') */
+		'minWidth'?: NLDDTitleCell['minWidth'];
+		/** Maximum width as CSS length (e.g. '300px', '20rem') */
+		'max-width'?: NLDDTitleCell['maxWidth'];
+		/** Maximum width as CSS length (e.g. '300px', '20rem') */
+		'maxWidth'?: NLDDTitleCell['maxWidth'];
+		/** Minimum height as CSS length (e.g. '44px', '3rem') */
+		'min-height'?: NLDDTitleCell['minHeight'];
+		/** Minimum height as CSS length (e.g. '44px', '3rem') */
+		'minHeight'?: NLDDTitleCell['minHeight'];
+		/** Horizontal alignment (default: 'left') */
+		'horizontal-alignment'?: NLDDTitleCell['horizontalAlignment'];
+		/** Horizontal alignment (default: 'left') */
+		'horizontalAlignment'?: NLDDTitleCell['horizontalAlignment'];
+		/** Vertical alignment (default: 'center') */
+		'vertical-alignment'?: NLDDTitleCell['verticalAlignment'];
+		/** Vertical alignment (default: 'center') */
+		'verticalAlignment'?: NLDDTitleCell['verticalAlignment'];
+		/** Title text content. Supports **bold** syntax for inline bold segments. Falls back to default slot. */
+		'text'?: NLDDTitleCell['text'];
+		/** Optional overline text displayed above the title. Supports **bold**. Falls back to `overline` slot. */
+		'overline'?: NLDDTitleCell['overline'];
+		/** Optional supporting text displayed below the title. Supports **bold**. Falls back to `supporting-text` slot. */
+		'supporting-text'?: NLDDTitleCell['supportingText'];
+		/** Optional supporting text displayed below the title. Supports **bold**. Falls back to `supporting-text` slot. */
+		'supportingText'?: NLDDTitleCell['supportingText'];
+		/** Heading level for the title element: 1–6 (default: none, renders a <p>) */
+		'heading-level'?: NLDDTitleCell['headingLevel'];
+		/** Heading level for the title element: 1–6 (default: none, renders a <p>) */
+		'headingLevel'?: NLDDTitleCell['headingLevel'];
+		/** Query substring to bold-highlight across text fields. Empty = no marking. */
+		'query'?: NLDDTitleCell['query'];
+		/** 'match' | 'predictive' (default: 'predictive') */
+		'query-mark-mode'?: NLDDTitleCell['queryMarkMode'];
+		/** 'match' | 'predictive' (default: 'predictive') */
+		'queryMarkMode'?: NLDDTitleCell['queryMarkMode'];
+		'hide-below'?: NLDDTitleCell['hideBelow'];
+		'hideBelow'?: NLDDTitleCell['hideBelow'];
+		'hide-above'?: NLDDTitleCell['hideAbove'];
+		'hideAbove'?: NLDDTitleCell['hideAbove'];
+	};
+
+	type NLDDToggleButtonProps = {
+		/** Underlying element (default: 'button') */
+		'type'?: NLDDToggleButton['type'];
+		/** Button size (default: 'md') */
+		'size'?: NLDDToggleButton['size'];
+		/** Selected state */
+		'selected'?: NLDDToggleButton['selected'];
+		/** Disabled state */
+		'disabled'?: NLDDToggleButton['disabled'];
+		/** Value for form submission (checkbox/radio) */
+		'value'?: NLDDToggleButton['value'];
+		/** Name for form submission (checkbox/radio) */
+		'name'?: NLDDToggleButton['name'];
+		/** Button text */
+		'text'?: NLDDToggleButton['text'];
+		/** Icon name for nldd-icon */
+		'icon'?: NLDDToggleButton['icon'];
+		/** What renders: text, icon, or both. Unset → auto-detect from text/icon attributes. */
+		'variant'?: NLDDToggleButton['variant'];
+		/** Accessible label; required for icon-only usage */
+		'accessible-label'?: NLDDToggleButton['accessibleLabel'];
+		/** Accessible label; required for icon-only usage */
+		'accessibleLabel'?: NLDDToggleButton['accessibleLabel'];
+		'internals'?: NLDDToggleButton['internals'];
+		/** When selection changes; detail: { selected: boolean, value: string } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDToggleButtonGroupProps = {
+		/** Selection mode (default: 'checkbox') */
+		'type'?: NLDDToggleButtonGroup['type'];
+		/** Forwarded to all buttons */
+		'name'?: NLDDToggleButtonGroup['name'];
+		/** Forwarded to all buttons (default: 'md') */
+		'size'?: NLDDToggleButtonGroup['size'];
+		/** Disables all buttons */
+		'disabled'?: NLDDToggleButtonGroup['disabled'];
+		/** Accessible name for the group (aria-label) */
+		'accessible-label'?: NLDDToggleButtonGroup['accessibleLabel'];
+		/** Accessible name for the group (aria-label) */
+		'accessibleLabel'?: NLDDToggleButtonGroup['accessibleLabel'];
+		/** ID of an external label element (aria-labelledby) */
+		'accessible-labeled-by'?: NLDDToggleButtonGroup['accessibleLabeledBy'];
+		/** ID of an external label element (aria-labelledby) */
+		'accessibleLabeledBy'?: NLDDToggleButtonGroup['accessibleLabeledBy'];
+		/** Bubbles up from the changed button; detail: { selected: boolean, value: string } */
+		'onChange'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDTokenProps = {
+		/** Token text; falls back to the default slot when unset. */
+		'text'?: NLDDToken['text'];
+		/** Control type (default: 'none') */
+		'control'?: NLDDToken['control'];
+		/** Reflects whether the token's menu is open (control="menu"); managed by the token. */
+		'expanded'?: NLDDToken['expanded'];
+		/** Disabled state */
+		'disabled'?: NLDDToken['disabled'];
+		/** Accessible label for the dismiss button (default: 'Verwijder') */
+		'dismiss-text'?: NLDDToken['dismissText'];
+		/** Accessible label for the dismiss button (default: 'Verwijder') */
+		'dismissText'?: NLDDToken['dismissText'];
+		/** Accessible label for the menu button (default: 'Toon opties') */
+		'menu-text'?: NLDDToken['menuText'];
+		/** Accessible label for the menu button (default: 'Toon opties') */
+		'menuText'?: NLDDToken['menuText'];
+		/** Inside a roving-focus container (e.g. nldd-token-field): the host is the single tab stop, so the trailing control is not separately tabbable. */
+		'roving'?: NLDDToken['roving'];
+		/** When the dismiss button is clicked */
+		'onDismiss'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDTokenFieldProps = {
+		/** Initial token values as a comma-separated string (e.g. "nl, be, de"). Not reflected; the live value is the `.values` array property. Values can't contain commas. */
+		'values'?: NLDDTokenField['values'];
+		/** Placeholder shown in the input */
+		'placeholder'?: NLDDTokenField['placeholder'];
+		/** Input type forwarded to the inner input (e.g. 'email') */
+		'type'?: NLDDTokenField['type'];
+		/** Autocomplete hint forwarded to the inner input */
+		'autocomplete'?: NLDDTokenField['autocomplete'];
+		/** Accessible label forwarded as aria-label to the input */
+		'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-custom'?: NLDDTokenField['allowCustom'];
+		/** Allow free-typed values (not just menu options) */
+		'allowCustom'?: NLDDTokenField['allowCustom'];
+		/** Marks the field valid (shows the valid icon) */
+		'valid'?: NLDDTokenField['valid'];
+		/** Marks the field invalid (shows the invalid icon) */
+		'invalid'?: NLDDTokenField['invalid'];
+		/** Disables browser spellchecking on the inner input */
+		'no-spellcheck'?: NLDDTokenField['noSpellcheck'];
+		/** Disables browser spellchecking on the inner input */
+		'noSpellcheck'?: NLDDTokenField['noSpellcheck'];
+		/** Readonly: static tokens, no input/picker, read-only surface */
+		'readonly'?: NLDDTokenField['readonly'];
+		/** Marks the field required (invalid when it has no tokens) */
+		'required'?: NLDDTokenField['required'];
+		/** Disabled state */
+		'disabled'?: NLDDTokenField['disabled'];
+		/** Trailing control per token: 'dismiss' (default, a ✕ that removes it) or 'menu' (a ⌄ opening a per-token action menu supplied by the template prototypes) */
+		'token-control'?: NLDDTokenField['tokenControl'];
+		/** Trailing control per token: 'dismiss' (default, a ✕ that removes it) or 'menu' (a ⌄ opening a per-token action menu supplied by the template prototypes) */
+		'tokenControl'?: NLDDTokenField['tokenControl'];
+		/** Name for form submission */
+		'name'?: NLDDTokenField['name'];
+		/** Override translation keys; unset keys fall back to Dutch */
+		'translations'?: NLDDTokenField['translations'];
+		'internals'?: NLDDTokenField['internals'];
+		/** When the selected values change; detail: { values: string[] } */
+		'onChange'?: (event: CustomEvent) => void;
+		/** When the input text changes; detail: { value: string } */
+		'onInput'?: (event: CustomEvent) => void;
+		/** When a token's menu action is chosen (token-control="menu"); detail: { value: string, action: string } */
+		'onTokenAction'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDToolbarProps = {
+		/** Toolbar size, propagated to all child controls: 'sm' | 'md' | 'lg' (default: 'md'). At 'lg' the overflow button (and lg-capable children like nldd-icon-button) stack their label below the icon. */
+		'size'?: NLDDToolbar['size'];
+		/** When true, shows a text label below each toolbar item and the overflow button */
+		'show-item-labels'?: NLDDToolbar['showItemLabels'];
+		/** When true, shows a text label below each toolbar item and the overflow button */
+		'showItemLabels'?: NLDDToolbar['showItemLabels'];
+		/** Accessible label for the toolbar. Only needed when multiple toolbars appear on the same page */
+		'label'?: NLDDToolbar['label'];
+		/** Override translation keys (e.g. the overflow button label); unset keys fall back to Dutch. */
+		'translations'?: NLDDToolbar['translations'];
+	};
+
+	type NLDDToolbarItemProps = {
+		/** Fluid width: a percentage (e.g. '40%') or any CSS length (e.g. '240px'). Setting it (or min-width or max-width) makes the item fluid so it grows to fill the available space. */
+		'width'?: NLDDToolbarItem['width'];
+		/** Minimum (fluid) width as a CSS length (e.g. '240px'). Setting it also makes the item fluid. */
+		'min-width'?: NLDDToolbarItem['minWidth'];
+		/** Minimum (fluid) width as a CSS length (e.g. '240px'). Setting it also makes the item fluid. */
+		'minWidth'?: NLDDToolbarItem['minWidth'];
+		/** Maximum (fluid) width as a CSS length (e.g. '480px'). Setting it also makes the item fluid. */
+		'max-width'?: NLDDToolbarItem['maxWidth'];
+		/** Maximum (fluid) width as a CSS length (e.g. '480px'). Setting it also makes the item fluid. */
+		'maxWidth'?: NLDDToolbarItem['maxWidth'];
+		/** Text label shown below the item when the toolbar has show-item-labels. */
+		'label'?: NLDDToolbarItem['label'];
+		/** Overflow order: items with a lower priority move into the overflow menu first (default 0). Items sharing a priority overflow together, regardless of position. */
+		'priority'?: NLDDToolbarItem['priority'];
+	};
+
+	type NLDDToolbarTitleProps = {
+		/** Title text. */
+		'text'?: NLDDToolbarTitle['text'];
+		/** Secondary supporting text shown below the title. */
+		'supporting-text'?: NLDDToolbarTitle['supportingText'];
+		/** Secondary supporting text shown below the title. */
+		'supportingText'?: NLDDToolbarTitle['supportingText'];
+		/** Text alignment: 'left' | 'center' (default: 'left'). */
+		'align'?: NLDDToolbarTitle['align'];
+		/** Preferred (fluid) width as a CSS length or percentage; the title grows toward it and shrinks to min-width. */
+		'width'?: NLDDToolbarTitle['width'];
+		/** Minimum width as a CSS length (default: '0', so the title shrink-wraps its content and the next element sits against it). */
+		'min-width'?: NLDDToolbarTitle['minWidth'];
+		/** Minimum width as a CSS length (default: '0', so the title shrink-wraps its content and the next element sits against it). */
+		'minWidth'?: NLDDToolbarTitle['minWidth'];
+		/** Maximum width as a CSS length (default: '240px'); the title text truncates with an ellipsis beyond it. The cap is lifted while the title is the sole toolbar element (it then stretches to fill the row). */
+		'max-width'?: NLDDToolbarTitle['maxWidth'];
+		/** Maximum width as a CSS length (default: '240px'); the title text truncates with an ellipsis beyond it. The cap is lifted while the title is the sole toolbar element (it then stretches to fill the row). */
+		'maxWidth'?: NLDDToolbarTitle['maxWidth'];
+	};
+
+	type NLDDTooltipProps = {
+		/** Tooltip tekst */
+		'text'?: NLDDTooltip['text'];
+		/** Forceer de tooltip zichtbaar, ongeacht hover/focus. Gebruik voor programmatische feedback (bv. "Gekopieerd"). Reset naar false om hover-gedrag te herstellen. */
+		'open'?: NLDDTooltip['open'];
+		/** Positie: 'top' | 'bottom' | 'left' | 'right' (standaard: 'bottom'; op touch devices automatisch 'top') */
+		'placement'?: NLDDTooltip['placement'];
+		/** Wanneer de tooltip verschijnt op hover: 'instant' — direct, zonder show-delay. 'default' — na de standaard show-delay (700ms). 'never' — tooltip wordt nooit getoond; hover/focus events worden genegeerd, aria-describedby wordt onderdrukt en een al zichtbare tooltip verdwijnt. Hide-delay en touch suppression blijven onder alle waarden van kracht. Focus-trigger is altijd instant. */
+		'timing'?: NLDDTooltip['timing'];
+		/** Wanneer een gebruiker Escape drukt terwijl `open=true` is. De consumer beheert dan de open-lifecycle (wij kunnen `open` niet eenzijdig wissen), dus dit event geeft de consumer de kans om `open` terug naar `false` te zetten. WCAG 1.4.13: persistent hover-/ focus-overlays moeten dismissible zijn zonder focus te verplaatsen. */
+		'onNlddTooltipDismiss'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDTopNavigationBarProps = {
+		/** Naam van de website of applicatie, boven de menubalk. Leeg laat de titelregel weg. */
+		'website-title'?: NLDDTopNavigationBar['websiteTitle'];
+		/** Naam van de website of applicatie, boven de menubalk. Leeg laat de titelregel weg. */
+		'websiteTitle'?: NLDDTopNavigationBar['websiteTitle'];
+		/** Verbergt de hele logobalk, inclusief woordmerk. */
+		'no-logo'?: NLDDTopNavigationBar['noLogo'];
+		/** Verbergt de hele logobalk, inclusief woordmerk. */
+		'noLogo'?: NLDDTopNavigationBar['noLogo'];
+		/** Begrenst de bar-content tot een max-width zodat die uitlijnt met de page-sections. 'full' vult de volle breedte, of geef een eigen CSS-lengte. */
+		'width'?: NLDDTopNavigationBar['width'];
+		/** Titel van het woordmerk naast het logo. Zonder deze waarde staat het logo er alleen. */
+		'logo-title'?: NLDDTopNavigationBar['logoTitle'];
+		/** Titel van het woordmerk naast het logo. Zonder deze waarde staat het logo er alleen. */
+		'logoTitle'?: NLDDTopNavigationBar['logoTitle'];
+		/** Subtitel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is. */
+		'logo-subtitle'?: NLDDTopNavigationBar['logoSubtitle'];
+		/** Subtitel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is. */
+		'logoSubtitle'?: NLDDTopNavigationBar['logoSubtitle'];
+		/** Eerste ondersteunende regel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is. */
+		'logo-supporting-text-1'?: NLDDTopNavigationBar['logoSupportingText1'];
+		/** Eerste ondersteunende regel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is. */
+		'logoSupportingText1'?: NLDDTopNavigationBar['logoSupportingText1'];
+		/** Tweede ondersteunende regel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is. */
+		'logo-supporting-text-2'?: NLDDTopNavigationBar['logoSupportingText2'];
+		/** Tweede ondersteunende regel onder de woordmerktitel. Alleen zichtbaar als er een woordmerk is. */
+		'logoSupportingText2'?: NLDDTopNavigationBar['logoSupportingText2'];
+		/** URL voor logo en woordmerk. Zonder deze waarde zijn ze geen link, maar een afbeelding met een toegankelijk label. */
+		'logo-href'?: NLDDTopNavigationBar['logoHref'];
+		/** URL voor logo en woordmerk. Zonder deze waarde zijn ze geen link, maar een afbeelding met een toegankelijk label. */
+		'logoHref'?: NLDDTopNavigationBar['logoHref'];
+		/** URL voor de websitetitel. Zonder deze waarde blijft de titel gewone tekst. */
+		'website-href'?: NLDDTopNavigationBar['websiteHref'];
+		/** URL voor de websitetitel. Zonder deze waarde blijft de titel gewone tekst. */
+		'websiteHref'?: NLDDTopNavigationBar['websiteHref'];
+		/** URL van de terugknop. Zonder deze waarde vuurt een klik het `back-click`-event, zodat de consument zelf navigeert. */
+		'back-href'?: NLDDTopNavigationBar['backHref'];
+		/** URL van de terugknop. Zonder deze waarde vuurt een klik het `back-click`-event, zodat de consument zelf navigeert. */
+		'backHref'?: NLDDTopNavigationBar['backHref'];
+		/** Tekst van de terugknop. De knop verschijnt zodra back-text of back-href is gezet; zonder tekst valt hij terug op de vertaling ("Terug"). */
+		'back-text'?: NLDDTopNavigationBar['backText'];
+		/** Tekst van de terugknop. De knop verschijnt zodra back-text of back-href is gezet; zonder tekst valt hij terug op de vertaling ("Terug"). */
+		'backText'?: NLDDTopNavigationBar['backText'];
+		'translations'?: NLDDTopNavigationBar['translations'];
+	};
+
+	type NLDDTopTitleBarProps = {
+		/** Title of the bar, rendered as the h1 in the title group. */
+		'text'?: NLDDTopTitleBar['text'];
+		/** Subtitle under the title. */
+		'supporting-text'?: NLDDTopTitleBar['supportingText'];
+		/** Subtitle under the title. */
+		'supportingText'?: NLDDTopTitleBar['supportingText'];
+		/** Id of the element whose top edge triggers the compact state on scroll. Without it the state is static (see above). */
+		'collapse-anchor'?: NLDDTopTitleBar['collapseAnchor'];
+		/** Id of the element whose top edge triggers the compact state on scroll. Without it the state is static (see above). */
+		'collapseAnchor'?: NLDDTopTitleBar['collapseAnchor'];
+		/** Text of the back button and its accessible name. Empty hides the back button (and the divider). */
+		'back-text'?: NLDDTopTitleBar['backText'];
+		/** Text of the back button and its accessible name. Empty hides the back button (and the divider). */
+		'backText'?: NLDDTopTitleBar['backText'];
+		/** URL for the back button; renders a link and suppresses the `back` event. */
+		'back-href'?: NLDDTopTitleBar['backHref'];
+		/** URL for the back button; renders a link and suppresses the `back` event. */
+		'backHref'?: NLDDTopTitleBar['backHref'];
+		/** Text of the dismiss button. Empty hides that button. */
+		'dismiss-text'?: NLDDTopTitleBar['dismissText'];
+		/** Text of the dismiss button. Empty hides that button. */
+		'dismissText'?: NLDDTopTitleBar['dismissText'];
+		/** Fired when the back button is clicked (not fired when back-href is set) */
+		'onBack'?: (event: CustomEvent) => void;
+		/** Fired when the dismiss button is clicked */
+		'onDismiss'?: (event: CustomEvent) => void;
+	};
+
+	type NLDDTwoThirdsOneThirdSectionProps = {
+		/** Body max-width: 'full' removes the constraint so the section spans the full available width. Any CSS length (e.g. '480px') overrides the default max-width. */
+		'width'?: NLDDTwoThirdsOneThirdSection['width'];
+		/** Surface background ('inherit' default; 'base'/'tinted' paint and cascade a surface). */
+		'background'?: NLDDTwoThirdsOneThirdSection['background'];
+		/** Color scheme ('inherit' default; 'inverted' = opposite of the surrounding page scheme). */
+		'scheme'?: NLDDTwoThirdsOneThirdSection['scheme'];
+		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
+		'padding-block'?: NLDDTwoThirdsOneThirdSection['paddingBlock'];
+		/** Block (top and bottom) padding override (token 0-96; '0' strips it). */
+		'paddingBlock'?: NLDDTwoThirdsOneThirdSection['paddingBlock'];
+		/** Top padding override. */
+		'padding-top'?: NLDDTwoThirdsOneThirdSection['paddingTop'];
+		/** Top padding override. */
+		'paddingTop'?: NLDDTwoThirdsOneThirdSection['paddingTop'];
+		/** Bottom padding override. */
+		'padding-bottom'?: NLDDTwoThirdsOneThirdSection['paddingBottom'];
+		/** Bottom padding override. */
+		'paddingBottom'?: NLDDTwoThirdsOneThirdSection['paddingBottom'];
+		/** Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}). */
+		'sm-padding-block'?: NLDDTwoThirdsOneThirdSection['smPaddingBlock'];
+		/** Responsive block padding (sm/md/lg, also per edge: {sm,md,lg}-padding-{top,bottom}). */
+		'smPaddingBlock'?: NLDDTwoThirdsOneThirdSection['smPaddingBlock'];
+		'sm-padding-top'?: NLDDTwoThirdsOneThirdSection['smPaddingTop'];
+		'smPaddingTop'?: NLDDTwoThirdsOneThirdSection['smPaddingTop'];
+		'sm-padding-bottom'?: NLDDTwoThirdsOneThirdSection['smPaddingBottom'];
+		'smPaddingBottom'?: NLDDTwoThirdsOneThirdSection['smPaddingBottom'];
+		'md-padding-block'?: NLDDTwoThirdsOneThirdSection['mdPaddingBlock'];
+		'mdPaddingBlock'?: NLDDTwoThirdsOneThirdSection['mdPaddingBlock'];
+		'md-padding-top'?: NLDDTwoThirdsOneThirdSection['mdPaddingTop'];
+		'mdPaddingTop'?: NLDDTwoThirdsOneThirdSection['mdPaddingTop'];
+		'md-padding-bottom'?: NLDDTwoThirdsOneThirdSection['mdPaddingBottom'];
+		'mdPaddingBottom'?: NLDDTwoThirdsOneThirdSection['mdPaddingBottom'];
+		'lg-padding-block'?: NLDDTwoThirdsOneThirdSection['lgPaddingBlock'];
+		'lgPaddingBlock'?: NLDDTwoThirdsOneThirdSection['lgPaddingBlock'];
+		'lg-padding-top'?: NLDDTwoThirdsOneThirdSection['lgPaddingTop'];
+		'lgPaddingTop'?: NLDDTwoThirdsOneThirdSection['lgPaddingTop'];
+		'lg-padding-bottom'?: NLDDTwoThirdsOneThirdSection['lgPaddingBottom'];
+		'lgPaddingBottom'?: NLDDTwoThirdsOneThirdSection['lgPaddingBottom'];
+		/** Minimum section height (any CSS length, e.g. '400px', '100dvh') (mirrors width, which sets the body max-width). */
+		'height'?: NLDDTwoThirdsOneThirdSection['height'];
+	};
+
+	type NLDDWindowProps = {
+		/** Niet-modaal (geen backdrop of focusvergrendeling); standaard is het venster modaal */
+		'modeless'?: NLDDWindow['modeless'];
+		/** Een klik op de backdrop sluit het venster niet. Voor vensters waar per ongeluk wegklikken werk kost: een wizard, een formulier met ingevulde velden. Escape en de dismiss-knop blijven werken. */
+		'no-light-dismiss'?: NLDDWindow['noLightDismiss'];
+		/** Een klik op de backdrop sluit het venster niet. Voor vensters waar per ongeluk wegklikken werk kost: een wizard, een formulier met ingevulde velden. Escape en de dismiss-knop blijven werken. */
+		'noLightDismiss'?: NLDDWindow['noLightDismiss'];
+		/** (verplicht) Toegankelijke naam (aria-label). Valt terug op de i18n default ('Venster') als niet gezet — geef altijd een unieke, beschrijvende naam per venster. */
+		'accessible-label'?: NLDDWindow['accessibleLabel'];
+		/** (verplicht) Toegankelijke naam (aria-label). Valt terug op de i18n default ('Venster') als niet gezet — geef altijd een unieke, beschrijvende naam per venster. */
+		'accessibleLabel'?: NLDDWindow['accessibleLabel'];
+		/** Override translation keys; unset keys vallen terug op de Nederlandse default. */
+		'translations'?: NLDDWindow['translations'];
+		/** CSS top positie van de bovenrand (bijv. '0', '100px') */
+		'top'?: NLDDWindow['top'];
+		/** CSS left positie van de linkerrand */
+		'left'?: NLDDWindow['left'];
+		/** CSS right waarde */
+		'right'?: NLDDWindow['right'];
+		/** CSS bottom waarde */
+		'bottom'?: NLDDWindow['bottom'];
+		/** Centreert beide assen op de viewport. Per as overrideable: `centered top="0"` = horizontaal gecentreerd, top-aligned. Mirrort CSS `place-items: center` met `align-items`/`justify-items` overrides. */
+		'centered'?: NLDDWindow['centered'];
+		/** CSS width (standaard: var(--components-window-default-width)) */
+		'width'?: NLDDWindow['width'];
+		/** CSS height (standaard: content height) */
+		'height'?: NLDDWindow['height'];
+		/** Color scheme (default 'inherit'). */
+		'scheme'?: NLDDWindow['scheme'];
+		/** Wanneer het venster wordt geopend */
+		'onOpen'?: (event: CustomEvent) => void;
+		/** Wanneer het venster volledig is gesloten */
+		'onClose'?: (event: CustomEvent) => void;
+	};
+
+	export interface GlobalComponents {
+		/** Layout placeholder that fills its parent and centers an indeterminate activity indicator. By default the indicator is held back for 1000ms so brief loading states don't flash; once the delay passes it fades in. Set `timing="instant"` to skip the delay (the fade-in still plays) — this is what embedding components such as `nldd-button` use for their loading state. The default indicator is a simple icon-sized circle that follows the shared `--context-content-color` channel (set by list-item / table / menu on their content), falling back to `currentColor` wherever that channel is unset (buttons, rich-text, standalone) — so a spinner inside a cell tracks the row's state-aware content color, while embedders relying on currentColor are unaffected. An optional label sits below (hidden unless `show-text` is set). Drop a `<nldd-progress-circle>`, `<nldd-progress-bar>` or any element in the `indicator` slot to override it. Icon alignment: the visible ring already sits at 5/6 of its box (the SVG's r=9 plus a 2-unit stroke in a 24 view-box, the same optical inset a filled icon glyph has), so a standalone spinner lines up with an icon or an `icon-aligned` `nldd-avatar` on the same grid — no extra option needed (unlike `nldd-avatar`, which fills edge-to-edge and opts in via `icon-aligned`). Overlay mode: put content in the default slot and the indicator wraps it — it becomes a `position: relative` container, renders the spinner over a dimming backdrop (opt out with `no-backdrop`), and makes the content `inert` so its controls can't be focused or clicked. Toggle loading with `complete` (`?complete=${!isLoading}`). With no slotted content it stays the standalone placeholder described above. Reconnect behavior: every `connectedCallback` resets the timer and hides the indicator again. If a consumer toggles the element via a conditional render (remove + re-insert) the indicator disappears and re-fades after another delay. Keep the element mounted and toggle visibility / `hidden` instead if you want the timer to run only once. Accessibility: while connected and not `complete` the host is a polite live region (`role="status"`). The label (`text`, or the translated "Laden" fallback) always renders as the region's content — visually hidden when `show-text` is off (the default) — so assistive tech announces the loading state when the indicator appears. Set `complete` (or unmount) to clear it. */
+		'nldd-activity-indicator': DefineComponent<NLDDActivityIndicatorProps>;
+		/** The required root shell of a Nederlandse Digitale Dienst application. Always contains a split view or an nldd-page as direct content. Set background="tinted" to give the whole application a tinted background. All descendants read --context-parent-background-color via --_background-color automatically. Individual components can override locally with their own background attribute. The same background color is forced on `document.body` so that browser- chrome surfaces (iOS overscroll bounce, status bar, page-margin areas) blend with the app instead of revealing the user-agent's default white. Cleared when the app-view disconnects. The app scrolls the DOCUMENT (root mode) or lets each `nldd-page` scroll inside its pane (nested mode). The mode is derived from the outermost horizontal split view: one column means the document scrolls, several columns mean the panes do. An app without such a split view is a single column at every width and therefore scrolls the document too — nested scrolling would cost it the rubber-band and the collapsing browser toolbar on iOS for nothing. Set `--context-scroll-mode` on the `nldd-app-view` itself to override the derived mode; an inherited value loses from it. In nested scroll mode `overscroll-behavior: none` is set on `document.documentElement` and `document.body` while the app-view is connected. Combined with `overscroll-behavior: contain` on `nldd-page`'s scroll target, this prevents iOS rubber-band on the viewport when scroll gestures land outside an `nldd-page` (e.g. on a top-bar). In root scroll mode the document itself is the scroller, so this is lifted to let the native rubber-band happen. Cleared on last disconnect. */
+		'nldd-app-view': DefineComponent<NLDDAppViewProps>;
+		/** Toont één persoon of organisatie als een compacte, ronde (persoon) of afgeronde (organisatie) representatie. De inhoud volgt een vaste terugvalketen: een afbeelding wanneer `src` laadt, anders de initialen (uit `initials` of afgeleid uit `name`), en anders een terugval-icoon. `type` bepaalt zowel de vorm als het terugval-icoon: `person` geeft een cirkel met een person-icoon, `organization` een afgeronde vierkant met een building-icoon. De vorm hoort dus bij de betekenis en is niet los instelbaar. Overschrijf het terugval-icoon desgewenst met `icon`. Zonder `size` schaalt de avatar mee met zijn container (net als `nldd-icon`); een vaste maat (dezelfde spacer-uitgelijnde schaal, 16 tot en met 96) is de uitzondering. De initialen en het icoon schalen mee. Brede initialen (WW, MMM) worden automatisch teruggeschaald zodat ze binnen de schijf blijven. Toegankelijkheid: het host-element draagt de betekenis. Met een `name` (en zonder `decorative`) krijgt het `role="img"` met de naam als label. Staat de naam al als tekst ernaast (bijvoorbeeld in een byline), zet dan `decorative` zodat de avatar voor hulpsoftware verborgen blijft. Een dode `src` valt automatisch terug op de initialen of het icoon, nooit op een gebroken-afbeelding-icoon. */
+		'nldd-avatar': DefineComponent<NLDDAvatarProps>;
+		/** Een notificatie-indicator, vaak voor ongelezen aantallen of statusdots. Kan tekst, een getal en/of een icoon tonen. Zonder inhoud verschijnt automatisch een stip. Gebruik in een hoek van een ander element (bijv. een icon) of standalone. */
+		'nldd-badge': DefineComponent<NLDDBadgeProps>;
+		/** An inline notification with a tinted background per variant. Use for persistent, page-level feedback (e.g. an error summary at the top of a form). Banner is more visually present than nldd-inline-dialog — the tinted color catches the eye. If you need a quieter component, pick a different one rather than overriding the banner's ARIA. Layout: icon left, text + supporting text + optional rich content + actions in the center, optional dismiss button right. Buttons wrap to a second row on narrow viewports via nldd-button-group's flex wrapping. role and aria-live are set automatically from the variant: - critical → role="alert" (interrupts screen reader) - others → role="status" aria-live="polite" Not overridable — if you need a less prominent component, use one. aria-atomic="true" is also set so that updates to the structured region (icon + heading + supporting-text + actions) are announced as one unit rather than as a partial subtree. Trade-off: any programmatic content mutation re-reads the entire banner. Banners are designed for short, heading-scale copy — if you slot in a paragraph of rich body text and then toggle variant or supporting-text at runtime, AT will re-announce the whole thing. Keep banner content concise, or render long-form messages in a different surface. */
+		'nldd-banner': DefineComponent<NLDDBannerProps>;
+		/** A vertical split view with a main area and an unlimited number of bar panels. Each child determines its order per breakpoint via sm-order, md-order, and lg-order. Children without order attributes are sorted by DOM order. All bars are in normal flow at every breakpoint and stack vertically. A divider is drawn only where the main pane meets an adjacent bar — directly above and/or below main — at every breakpoint (including sm). Two stacked bars on the same side never get a divider between them, so a toolbar and a tab-bar read as one visual unit. Consumers never manage dividers themselves. Give each bar a unique slot name (e.g. slot="toolbar", slot="status-bar"). Use slot="bar-1", slot="bar-2" if no meaningful name applies. The main panel always uses slot="main". Sets --context-parent-background-color, which cascades to all descendants. */
+		'nldd-bar-split-view': DefineComponent<NLDDBarSplitViewProps>;
+		/** Toont een citaat met optionele bron-attributie. */
+		'nldd-blockquote': DefineComponent<NLDDBlockquoteProps>;
+		/** Use a box to visually group related components in a distinct, contained region. Boxes draw attention to a set of controls or content that belong together, helping users understand their relationship at a glance. */
+		'nldd-box': DefineComponent<NLDDBoxProps>;
+		/** A trail of `nldd-breadcrumbs-item`s separated by `›`, rendered as a `<nav>` landmark wrapping a `<div role="list">` (with each item carrying `role="listitem"`). Explicit ARIA roles travel reliably across the slot boundary where the implicit `<ol>`/`<li>` mapping is inconsistent across AT + browser combos. The trail wraps onto multiple lines when it doesn't fit, so it adapts to any width. */
+		'nldd-breadcrumbs': DefineComponent<NLDDBreadcrumbsProps>;
+		/** 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. */
+		'nldd-button-bar': DefineComponent<NLDDButtonBarProps>;
+		'nldd-button-bar-divider': DefineComponent<anonymous_0Props>;
+		/** A container for grouping related buttons together, either horizontally or vertically. */
+		'nldd-button-group': DefineComponent<NLDDButtonGroupProps>;
+		/** Een redactionele regel die auteurs of redacteuren toont: optionele avatar(s), een naamregel en ondersteunende tekst (bijvoorbeeld functie of datum). Alle onderdelen zijn optioneel. De naamregel en ondersteunende tekst kunnen als attribuut of als slot worden aangeleverd. Gebruik de slots voor rijkere inhoud, zoals een `<time datetime="…">` voor machine-leesbare datums of een link naar het auteursprofiel. Geslotte inhoud vervangt het bijbehorende attribuut (het attribuut is de fallback van de slot). Bij meerdere redacteuren overlappen de avatars elkaar subtiel; elke avatar krijgt een ring in de surface-kleur (zelfde mechaniek als badge) zodat ze visueel gescheiden blijven. Op een gekleurde ondergrond kan de ringkleur meegegeven worden via `--context-parent-background-color`. Op smalle breedtes (een sm-container, ≤ 640px) met meerdere avatars komt de avatarrij boven de namen te staan, zodat de tekst de volle breedte houdt; met één avatar blijft de byline op één regel. Avatars worden geslot als `<img slot="avatars">`. Zet `alt=""` wanneer de namen al in de tekst staan (decoratief); geef anders een beschrijvende alt-tekst op. Voor één avatar kun je in plaats van slotten ook `avatar-src` (met optioneel `avatar-srcset`) als attribuut meegeven; de afmetingen liggen vast (40px), dus `sizes` zet het component zelf. Meerdere avatars gaan altijd via de slot, en geslotte avatars hebben voorrang op `avatar-src`. */
+		'nldd-byline': DefineComponent<NLDDBylineProps>;
+		/** Een visueel afgebakende kaart met optionele header, body en footer secties. De kaart heeft een elevated look als standaard. Padding wordt overgelaten aan geneste containers. Met `href` wordt de hele kaart een link (een overlay-anchor over de kaart); met `button` een knop (een overlay-button die een gewone, composed `click` geeft — een klik-listener of htmx-attribuut op de kaart zelf werkt dus direct, en Enter/Space doen het native). `href` wint als beide gezet zijn. Geneste interactieve content (bijv. footer-knoppen) moet je erboven tillen met `position: relative; z-index: 1` om klikbaar te blijven. */
+		'nldd-card': DefineComponent<NLDDCardProps>;
+		/** A generic cell for wrapping arbitrary content in a list item. Controls vertical alignment and sizing without imposing content opinions. `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). */
+		'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>;
+		/** A container for displaying collections of items. Supports grid, stack, and horizontal scroll layouts. In grid and stack modes, items are paginated via a load-more button. In horizontal scroll, the prev/next controls and the edge fade appear only when the items overflow the container. With `lazy-load`, the next items are automatically loaded when the load-more button comes into view. */
+		'nldd-collection': DefineComponent<NLDDCollectionProps>;
+		/** A text input with autocomplete dropdown via nldd-menu. Add a slotted nldd-menu with nldd-menu-item children to provide options. The slotted nldd-menu keeps its default focus behavior (menu container receives focus) so that typing keeps focus on the input. The picker button moves focus to the menu explicitly on activation. Note: Only nldd-menu-item type="button" is supported. Radio and checkbox types are not supported in this context. */
+		'nldd-combo-box': DefineComponent<NLDDComboBoxProps>;
+		/** A simple layout primitive: pick a layout mode, give it a gap, optionally align contents, and add padding. Padding can be set for all sides, per axis (inline/block), or per individual side. Specificity: per side > per axis > all sides. Responsive padding and gap have sm/md/lg variants. Each variant emits both an @media (viewport) and @container (layout-container) query. When inside a layout-container the @container query wins; otherwise the @media query provides the viewport-based fallback. Layout modes: - `stack` (default): block items, stacked vertically. The "what you expect from DOM flow" mode. - `row`: flex row, no wrapping. Items shrink or overflow. - `wrap`: flex row, items wrap to new lines. - `grid`: CSS grid, auto-fit columns at min 280px wide. - `columns`: CSS multi-column flow, 280px minimum column width, items don't split across column breaks. Alignment maps to the layout's natural axis: - `stack`: vertical = main-axis (justify-content), horizontal = cross-axis (align-items) - `row` / `wrap`: horizontal = main-axis, vertical = cross-axis - `grid`: horizontal = justify-items, vertical = align-items (per cell) - `columns`: alignment props have no effect (CSS multicol doesn't expose alignment) Item order is set per-child via attributes on the slotted children themselves: `<child order="3">` for a fixed position, or `<child sm-order="N">` / `<child md-order="N">` / `<child lg-order="N">` to override per breakpoint (resolved against THIS container's width via @container queries, same scope as the responsive padding/gap). The container observes slot changes and child attribute mutations and bridges these to `--_slot-order` / `--_slot-sm-order` / etc. custom properties on each child's inline style, which the container's CSS then reads via `::slotted(*)` inside @container queries. Cascade: `sm-order` falls back to `order` falls back to `0` at sm (and analogously for md/lg). No-op for `layout="columns"` (CSS multicol has no per-item ordering hook). The `column-count` attribute (1-8) forces an exact column count for `layout="grid"` (overrides auto-fit) and `layout="columns"` (overrides the natural width-driven count). `sm-column-count` / `md-column-count` / `lg-column-count` resolve against this container's OWN width via an `@container (...)` query on the host — not against the viewport. That lets a footer in a narrow sidebar choose its own column count independent of the surrounding page width. `layout="lanes"` packs items into balanced columns using native CSS grid lanes where supported, falling back to CSS multicol (column-order) elsewhere. CSS-only, no JS. Honours `gap` on both axes and `column-count`. */
+		'nldd-container': DefineComponent<NLDDContainerProps>;
+		/** Een tekstveld voor een datum, met een optionele kalender in een popover. De waarde is altijd ISO (jjjj-mm-dd); op het scherm staat de Nederlandse notatie (dd-mm-jjjj). Er wordt niet gemaskerd 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. */
+		'nldd-date-field': DefineComponent<NLDDDateFieldProps>;
+		/** Een kalender waarin een datum of een periode wordt gekozen. Het component is zelfstandig bruikbaar - inline op een pagina, in een filterpaneel - en zit ook in de popover van nldd-date-field. Waarden zijn altijd ISO (jjjj-mm-dd). Met `range` kiest de gebruiker in twee stappen een begin- en einddatum. */
+		'nldd-date-picker': DefineComponent<NLDDDatePickerProps>;
+		/** A cell component for displaying a title-description pair 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"`. */
+		'nldd-description-cell': DefineComponent<NLDDDescriptionCellProps>;
+		/** Een scheidingslijn die secties van inhoud visueel van elkaar scheidt. */
+		'nldd-divider': DefineComponent<NLDDDividerProps>;
+		/** A horizontal tab bar for document tabs with an automatic overflow button and an end slot for action buttons. Exports both NLDDDocumentTabBar and NLDDDocumentTabBarItem. */
+		'nldd-document-tab-bar': DefineComponent<NLDDDocumentTabBarProps>;
+		'nldd-document-tab-bar-item': DefineComponent<NLDDDocumentTabBarItemProps>;
+		/** A cell that displays a drag handle for reorderable list items. Always vertically centered and sized to fit the handle. To enable drag-to-reorder, add the `reorderable-only` attribute to this element. This attribute is required for `nldd-list` to detect the drag handle in the composed event path and activate pointer and keyboard drag mode: ```html <nldd-list reorderable> <nldd-list-item> <nldd-drag-handle-cell reorderable-only></nldd-drag-handle-cell> <nldd-text-cell text="Item"></nldd-text-cell> </nldd-list-item> </nldd-list> ``` Without `reorderable-only`, pointer and keyboard drag will never trigger. */
+		'nldd-drag-handle-cell': DefineComponent<NLDDDragHandleCellProps>;
+		/** A visual wrapper around a native `<select>` element. The consumer provides a native `<select>` as a slotted child — this way the browser retains full control over form submission, accessibility and keyboard navigation, including `<optgroup>`, `data-*` attributes and dynamic changes to options. */
+		'nldd-dropdown': DefineComponent<NLDDDropdownProps>;
+		/** 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:** - Geen shadowRoot — alle children leven in light DOM (binnen het inner <form>) - Geen Lit — pure HTMLElement met handmatige attribute-mirroring - **Vereist global stylesheet import** — vertical rhythm en form-section divider-suppression regels staan in `dist/css/form.css` (of `global.css`), niet in een component-specifieke shadow stylesheet. Import deze als deel van je app's globale CSS bundle. **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, en skipt de migration. Children blijven waar je framework ze plaatst — geen DOM-shuffling die met React/Vue/Angular reconciliation conflicteert. **Framework interop:** In auto-wrap mode wordt elke direct child verplaatst naar het inner form via een MutationObserver. Voor de meeste React/Vue use cases werkt dit prima omdat frameworks alleen DOM-mutaties doen wanneer hun virtual DOM verandert. Voor edge cases (animatie-libs die DOM-positie tracken, SSR-hydration mismatches, frameworks die actief sibling-positions controleren) gebruik dan **user-provided form** mode. Voor programmatische manipulatie: gebruik de `form` getter zodat je direct met het inner `<form>` element werkt: const inner = document.querySelector('nldd-form').form; inner.checkValidity(); inner.appendChild(myInput); // skipt migration-overhead */
+		'nldd-form': DefineComponent<NLDDFormProps>;
+		/** Een layout-wrapper voor de actie-knoppen onderaan een formulier (typisch een submit-button of button-group). Volgt dezelfde responsive layout als `nldd-form-field`: met `label-alignment="right"` of `"left"` krijgt de inhoud dezelfde insprong als de invoervelden boven, dankzij een `::before`-pseudo-element dat fungeert als spacer-kolom waar de label zou staan. Erft `label-alignment` automatisch over van een wrappende `<nldd-form>`: de form propageert z'n eigen `label-alignment` als `form-label-alignment` naar descendant `nldd-form-actions` (en `nldd-form-field`) via een MutationObserver. Een expliciete eigen `label-alignment` op de form-actions wint via CSS-cascade — de form-code raakt het `label-alignment` attribuut van de descendant nooit aan. <nldd-form label-alignment="right"> <nldd-form-field>...</nldd-form-field> <nldd-form-actions> <nldd-button-group> <nldd-button variant="primary" type="submit" text="Opslaan"></nldd-button> </nldd-button-group> </nldd-form-actions> </nldd-form> */
+		'nldd-form-actions': DefineComponent<NLDDFormActionsProps>;
+		'nldd-form-field': DefineComponent<NLDDFormFieldProps>;
+		'nldd-form-field-error-text': DefineComponent<NLDDFormFieldErrorTextProps>;
+		'nldd-form-field-help-text': DefineComponent<NLDDFormFieldHelpTextProps>;
+		/** Nederlandse Digitale Dienst Form Section Component Plain custom element (extends HTMLElement, no Lit) — light-DOM render lost een NVDA + Firefox a11y-bug op waar shadow-DOM <fieldset> + <legend> niet betrouwbaar als group-label aangekondigd worden voor slotted controls. Native fieldset/legend in light DOM werkt correct over alle AT/browser-combinaties. **Differs from shadow components:** - Geen shadowRoot — alle children leven in light DOM (binnen het gerenderde <fieldset>). - Geen Lit — pure HTMLElement met handmatige DOM-mutation. - **Vereist global stylesheet import** — `dist/css/form-section.css` (of `global.css`). Form-section heeft geen shadow stylesheet. Renders to: <nldd-form-section> <fieldset class="form-section"> <legend class="form-section__header"> <span class="form-section__title">Title</span> <span class="form-section__subtitle">Subtitle</span> </legend> <div class="form-section__main"> [user's children] </div> </fieldset> </nldd-form-section> **Accessibility note**: de title rendert als `<legend>`. Dat is semantisch een **groep-label**, geen heading. Screenreaders kondigen 't aan wanneer de gebruiker in de fieldset komt, maar gebruikers die met de H-toets door headings springen slaan 'm over. Visueel lijkt 't op een heading; gebruik dit component dus voor *form-grouping*, niet als pagina-structuur. Voor echte page-headings: gebruik een apart heading-element boven het form. **Supporting-text lengte**: de subtitle staat als `<span>` binnen de `<legend>` zodat SR 'm meeleest als group label. Bijwerking: bij elke field-entry binnen de sectie wordt de hele legend (titel + subtitel) opnieuw uitgesproken. Houd `supporting-text` daarom kort (richtlijn: ≤ ~80 tekens) en gebruik 'm voor groep-introductie ("Vul je adresgegevens in"), niet voor uitgebreide instructies. Voor langere uitleg op een specifiek veld: gebruik `nldd-form-field-help-text` op dat veld. <nldd-form> <nldd-form-section text="Persoonsgegevens" supporting-text="Vul je gegevens in."> <nldd-form-field label="Voornaam">...</nldd-form-field> <nldd-form-field label="Achternaam">...</nldd-form-field> </nldd-form-section> <nldd-form-section text="Adres"> <nldd-form-field label="Straat">...</nldd-form-field> </nldd-form-section> <nldd-form-actions>...</nldd-form-actions> </nldd-form> */
+		'nldd-form-section': DefineComponent<NLDDFormSectionProps>;
+		/** A section that spans the full width without horizontal padding. Useful for background colors, images, or other content that runs edge to edge. Vertical padding and gap adjust via container queries. */
+		'nldd-full-bleed-section': DefineComponent<NLDDFullBleedSectionProps>;
+		/** Een paginakop met een mediavlak en een tekstpaneel (de main) dat op zes posities kan staan. Alle vlakken zijn rechthoekig. Bij `main-width="full"` staat het mediavlak als losse strook boven of onder het paneel, niet erachter. Op mobiel stapelt de media altijd boven het volle-breedte paneel. Zonder media vult de main het volledige vlak; met `main-background="base"` krijgt dat vlak een rand zodat het zichtbaar blijft op de base-surface. Met `main-background` krijgt het paneel een vlakkleur uit de filled-categories; die leveren een pure witte of zwarte contentkleur mee, zodat componenten met `color="inherit"` (title, rich-text) gegarandeerd contrast houden. */
+		'nldd-hero': DefineComponent<NLDDHeroProps>;
+		/** A customizable icon component that renders SVG icons from a predefined library. Icons are decorative by default: the host gets `aria-hidden="true"` automatically. If you want the icon to be announced by assistive tech, set `aria-hidden="false"` on the consumer side together with an `aria-label`. Sizing: the icon fills whatever sizes it — an `nldd-icon-cell`, a button, a menu item. `size="full"` names that default explicitly. `size="inherit"` makes it follow the surrounding text (1em), for an icon set inline in a sentence. Any spacer-aligned number (16–96) pins a fixed dimension. Reach for `inherit` rather than a global `nldd-icon { width: 1em }` rule in the consumer: such a rule wins over the component's own :host styling and so also shrinks the icons that a cell or button was already sizing correctly. Color: by default the icon inherits its parent's `color`. Set `color` to one of the functional semantics (`primary-content`, `secondary-content`, `accent`, `critical`, `warning`, `success`) or a rijkskleur (`lintblauw`, `paars`, `groen`, …). For arbitrary one-off colors, set `style="color: …"` on the host — the inherited `color` still drives the SVG fill/stroke. */
+		'nldd-icon': DefineComponent<NLDDIconProps>;
+		'nldd-icon-button': DefineComponent<NLDDIconButtonProps>;
+		/** A cell component for displaying icons in lists with configurable alignment and size. Set `icon` to render an `nldd-icon` by name, or slot custom content as an escape hatch for non-standard iconography. */
+		'nldd-icon-cell': DefineComponent<NLDDIconCellProps>;
+		/** Wraps a native `<img>` with design-system styling: corner radius variants, aspect-ratio reservation, object-fit/position control, optional caption + credit. Renders as `<figure>` + `<figcaption>` only when a caption or credit is set — otherwise just the image, no extra wrapping. Hybrid source: the `src` attribute renders an internal `<img>`. To use a custom `<img>` or `<picture>` (e.g. with art-direction sources), slot it into the default slot and we'll style and wrap it like our own image. */
+		'nldd-image': DefineComponent<NLDDImageProps>;
+		/** An inline status component for empty state, confirmations and feedback. Fills the container and has no minimum width. */
+		'nldd-inline-dialog': DefineComponent<NLDDInlineDialogProps>;
+		/** Een guided-discovery coach-mark. Plaats een control (bijv. nldd-search-field) in de default slot; zolang `active` is gezet tilt het component een callout (titel + supporting text + dismiss) in de top layer via de Popover API (`popover="manual"`), geankerd aan het control met Floating UI. Geen backdrop, non-modaal: de achtergrond blijft interactief. Het control zelf blijft op zijn plek in de flow staan. Met `dismissable` beheert het component het sluiten en vuurt het nldd-close: - de gebruiker voert de geadviseerde interactie uit op het control -> close{completed} - de dismiss-knop -> close{dismissed} - een klik/toets BUITEN de coach-mark -> close{ignored} Zonder `dismissable` sluit niets vanzelf (geen knop, geen buiten- of slot-klik); dan bepaalt de consumer het sluiten zelf via `active` of `complete()`. `complete()` werkt altijd en sluit met close{completed} (bijv. pas bij een echte zoekopdracht). */
+		'nldd-just-in-time-education': DefineComponent<NLDDJustInTimeEducationProps>;
+		/** Toont een toetsencombinatie (zoals Cmd+K of Ctrl+Shift+P) in één gecombineerde container met semantische <kbd>-elementen per toets. Op touch-only devices (geen hover-capable input) wordt de shortcut standaard verborgen omdat hij niet aanroepbaar is. Gebruik het `always-visible` attribuut wanneer de shortcut puur informatief is en altijd zichtbaar moet blijven. Voor cross-platform shortcuts kunnen `mac-keys`, `windows-keys` en `linux-keys` worden gezet — het component picks de juiste op basis van de gedetecteerde OS, met `keys` als fallback voor onbekende platforms. */
+		'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. */
+		'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. Mark a cell with `divider-start` and/or `divider-end` to run it from that cell's start edge to that cell's end edge instead (e.g. starting after an avatar). 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`). */
+		'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>;
+		/** A floating menu component using the Popover API. Positioned relative to an anchor element using Floating UI. Supports filtering, keyboard navigation, and highlight management. Use nldd-menu-item and nldd-menu-divider as children. Note: Only type="button" items are supported when used inside nldd-combo-box-field. Radio and checkbox types may be used in standalone menus. */
+		'nldd-menu': DefineComponent<NLDDMenuProps>;
+		/** Horizontale rij van nldd-menu-bar-item elementen met automatische overflow detectie. Items die niet passen worden verborgen achter een overflow button met een popover menu. */
+		'nldd-menu-bar': DefineComponent<NLDDMenuBarProps>;
+		/** Interactief bouwblok voor gebruik in een menu bar. Rendert als <a> (met href) of <button> (zonder href). Ondersteunt icon, text, disclosure indicator, en een expandable popover via een geslotte `<nldd-menu>` (of ander popover-element). */
+		'nldd-menu-bar-item': DefineComponent<NLDDMenuBarItemProps>;
+		/** A horizontal rule between groups of items in an `nldd-menu`. */
+		'nldd-menu-divider': DefineComponent<NLDDMenuDividerProps>;
+		/** A labeled group of menu items inside an nldd-menu. Wraps its slotted items in `role="group"` with `aria-labelledby` pointing to the group's `text`, providing native ARIA group semantics that a flat title element can't deliver. The group renders an automatic divider above itself, except when it's the first child of the menu — so consumers don't need to manage separator placement around groups themselves. Spacing above the title is intentionally larger than below, to bind the title visually to the items it labels. Use the wrapper for grouping with a title; for ungrouped flat menus or a divider without a title, the existing `nldd-menu-item` + `nldd-menu-divider` flat structure keeps working unchanged. */
+		'nldd-menu-group': DefineComponent<NLDDMenuGroupProps>;
+		/** A single item within an nldd-menu. */
+		'nldd-menu-item': DefineComponent<NLDDMenuItemProps>;
+		/** A modal window with overlay backdrop, based on the native <dialog> element. Internally renders an <nldd-inline-dialog> for the visual structure. */
+		'nldd-modal-dialog': DefineComponent<NLDDModalDialogProps>;
+		'nldd-multi-line-text-field': DefineComponent<NLDDMultiLineTextFieldProps>;
+		/** A four-column layout with a primary sidebar, secondary sidebar, main content area, and inspector. The sidebars show navigation or lists, the main area shows primary content, and the inspector shows additional details or properties of the selection. Panes are shown automatically when content is slotted into them. */
+		'nldd-navigation-split-view': DefineComponent<NLDDNavigationSplitViewProps>;
+		/** A numeric input field with decrement and increment buttons. */
+		'nldd-number-field': DefineComponent<NLDDNumberFieldProps>;
+		/** A section with two equal columns side by side. The columns wrap automatically when they become smaller than 280px. Padding and gap adjust via container queries. */
+		'nldd-one-half-one-half-section': DefineComponent<NLDDOneHalfOneHalfSectionProps>;
+		/** A section with a 1/3 sidebar on the left and 2/3 main content on the right. The columns wrap automatically when they become smaller than 280px. Padding and gap adjust via container queries. */
+		'nldd-one-third-two-thirds-section': DefineComponent<NLDDOneThirdTwoThirdsSectionProps>;
+		/** A page layout with optional sticky header and footer. Without sticky-header, the host is the scroll container and the header is in normal flow. With sticky-header, the header becomes absolute and .page__scroll takes over scrolling. A ResizeObserver on the header sets padding-top on the scroll wrapper (only when not scrolled). In root-scroll mode (--context-scroll-mode: root, derived upstream by nldd-app-view) the page stops owning a scroller: the document scrolls and the sticky header/footer become position:sticky layers offset by --context-layer-top/bottom. The mode is read on connect/resize and reflected to [data-scroll] so the CSS can branch. */
+		'nldd-page': DefineComponent<NLDDPageProps>;
+		/** The footer band at the bottom of a page. Hosts three optional rows in a fixed order: breadcrumbs (top), consumer-defined main content (middle), and a legal-bar (bottom). Dividers are drawn automatically between non-empty rows. Establishes its own container query (`page-footer-container`) so the responsive padding and gap react to the footer's own width, not the viewport. The host has `id="page-footer"` so a skip-link can target it directly. Use the sub-components `nldd-page-footer-legal-bar` and `nldd-page-footer-legal-bar-item` for the bottom row. */
+		'nldd-page-footer': DefineComponent<NLDDPageFooterProps>;
+		/** Holds the legal links row at the bottom of a `nldd-page-footer`. Items in `start` render flush-left, items in `end` flush-right, separated by spacing only (no separators). On narrow containers the two groups wrap to their own rows with `start` above `end`. */
+		'nldd-page-footer-legal-bar': DefineComponent<NLDDPageFooterLegalBarProps>;
+		/** A single entry in an `nldd-page-footer-legal-bar`. Renders as a link when `href` is set, as plain text otherwise. Uses the content color (not the link color) so the legal bar reads as a subdued utility row. */
+		'nldd-page-footer-legal-bar-item': DefineComponent<NLDDPageFooterLegalBarItemProps>;
+		/** A pagination control for navigating between pages of content. */
+		'nldd-pagination': DefineComponent<NLDDPaginationProps>;
+		/** A password input field with visibility toggle and validation states. */
+		'nldd-password-field': DefineComponent<NLDDPasswordFieldProps>;
+		/** Een non-modal floating panel dat is verankerd aan een trigger-element. Gebouwd op de native Popover API (popover="auto") met Floating UI voor positionering. De browser regelt open/toggle/light-dismiss; deze component regelt alleen positionering en focus. Aanbevolen gebruik via popovertarget zodat de browser de toggle regelt: <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>Inhoud van de popover.</p> </nldd-container> </nldd-popover> Voor een custom focus-target binnen de popover: zet `autofocus` op het gewenste child-element. Anders krijgt de popover-host zelf 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. */
+		'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. */
+		'nldd-progress-circle': DefineComponent<NLDDProgressCircleProps>;
+		'nldd-progress-circle-segment-indicator': DefineComponent<NLDDProgressCircleSegmentIndicatorProps>;
+		/** WAI-ARIA: Wrap radio buttons in a <fieldset>/<legend> or a container with role="radiogroup" and aria-labelledby for proper group semantics. <fieldset> <legend>Kies een optie</legend> <nldd-radio-button name="options" value="1">Optie 1</nldd-radio-button> <nldd-radio-button name="options" value="2">Optie 2</nldd-radio-button> </fieldset> */
+		'nldd-radio-button': DefineComponent<NLDDRadioButtonProps>;
+		/** A radio button with an inline label. Use inside nldd-radio-button-group for keyboard navigation and group semantics. The group sets the name. Form-associated: the checked field submits its `value` under `name` (the inner nldd-radio-button sits in the shadow root and never joins the consumer's form; the field submits on its behalf). Unchecking siblings is the group's job, so exactly one value per group reaches the form. */
+		'nldd-radio-button-field': DefineComponent<NLDDRadioButtonFieldProps>;
+		/** Groups nldd-radio-button-field elements, handles keyboard navigation, and forwards name and disabled state to all child fields. Use inside nldd-form-field which provides the group label. */
+		'nldd-radio-button-group': DefineComponent<NLDDRadioButtonGroupProps>;
+		/** A container for rich text content that automatically applies responsive typography. Uses no shadow DOM so styles apply to all nested elements. Import nldd-rich-text.css globally in your application. Kinderen worden in drie zones geplaatst: tekst (headings, paragrafen, lijsten, blockquote, div/section) leest op de `main`-maat; media en tabellen (img, figure, video, iframe, table) krijgen het `wide`-accent; al het overige — codeblokken en élke component — krijgt de volledige `full`-span met `justify-self: start`, zodat de ruimte beschikbaar is maar niet geforceerd wordt. Per kind te overschrijven met `data-width="main" | "wide" | "full"`. In de linkse layout lezen wide en full als bleed naar rechts; met `centered` zijn ze symmetrisch. */
+		'nldd-rich-text': DefineComponent<NLDDRichTextProps>;
+		/** A search input with a leading search icon, an optional dismiss button, and an optional search button. */
+		'nldd-search-field': DefineComponent<NLDDSearchFieldProps>;
+		/** A horizontal group of mutually exclusive (radio) or multi-select (checkbox) options. Exports both NLDDSegmentedControl and NLDDSegmentedControlItem. */
+		'nldd-segmented-control': DefineComponent<NLDDSegmentedControlProps>;
+		'nldd-segmented-control-item': DefineComponent<NLDDSegmentedControlItemProps>;
+		/** An overlay component that slides in from the side or bottom of the screen. Based on the native <dialog> element for built-in accessibility, focus management, and Escape key support. On small (sm) viewports the sheet always renders as a bottom sheet, regardless of the configured placement. Render the sheet at the document root (teleport/portal it to `document.body`), never inside a split view's content flow: as a slotted flex child it would steal pane height (see `nldd-split-view-pane`). */
+		'nldd-sheet': DefineComponent<NLDDSheetProps>;
+		/** A horizontal split view with multiple equal panes side by side. The number of panes is set via the `panes` attribute. Each pane automatically gets a numbered slot: pane-1, pane-2, etc. Panes that do not fit the available width are automatically hidden. */
+		'nldd-side-by-side-split-view': DefineComponent<NLDDSideBySideSplitViewProps>;
+		/** A page section with a left sidebar alongside the main content. - **Wide (section >= 1008px):** two columns. The sidebar is a sticky, scrollable tinted box (max-width 320px) beside the main content. Its sticky top/bottom insets default to 16px; override with `sticky-top` / `sticky-bottom` so it clears other sticky page elements (e.g. a sticky header). - **Narrow (section < 1008px):** the sidebar collapses behind a sheet (a left panel on md+ viewports, a bottom sheet on mobile), and the host reflects a `collapsed` attribute. The consumer owns the trigger: place any chrome (a button, a chosen-filters bar, …) wherever you want, show it only while collapsed (e.g. `nldd-sidebar-section[collapsed] .my-trigger { … }` or by reading `collapsed` / listening to `collapse-change`), and call `show()` / `toggle()` to open the sheet. Bind `aria-expanded` via the `open`/`close` events. The sheet gets a sticky title bar by default — the `sidebar-label` as title plus a "Sluit" button — overridable via the `sheet-top-title-bar` slot. The sidebar content lives in `slot="sidebar"`. Its slot outlet moves between the box (expanded) and the sheet (collapsed) so there is a single, never-duplicated copy — the light DOM (and its state) is preserved across the switch. The box <-> sheet switch follows the section's OWN width (a ResizeObserver on the host), not the viewport — so a sidebar-section in a narrow column or a split-view pane collapses to the sheet just like one in a narrow viewport, and the sidebar never stacks above or crowds the main. Set `no-collapse` to opt out: a narrow section then stacks the sidebar (full-width) above the main instead of using a sheet. Inherits block `padding` and `height` from PageSectionMixin. */
+		'nldd-sidebar-section': DefineComponent<NLDDSidebarSectionProps>;
+		/** A basic section with responsive padding and gap based on container size. Contains optional header and footer slots. The padding and spacing between slots adjust automatically via container queries. */
+		'nldd-simple-section': DefineComponent<NLDDSimpleSectionProps>;
+		/** Accessibility-patroon dat keyboard-gebruikers toestaat om content over te slaan. Wraps content in een default slot — zonder href focust het het eerste element na de skip-link in het DOM (nextElementSibling). Zorg dat er een focusbaar element na het component staat, anders heeft de skip-link geen effect. */
+		'nldd-skip-link': DefineComponent<NLDDSkipLinkProps>;
+		/** Add explicit space between elements. Components in this design system have no margins of their own — all whitespace is set by a spacer. Use a single `size` attribute for whitespace that's the same at every viewport. Combine with `sm-size`, `md-size` and/or `lg-size` to override the size at specific breakpoints (mobile-first cascade is intentionally avoided — each breakpoint that needs a different value declares it explicitly): - `size` applies at every breakpoint that has no per-viewport override. - `sm-size` overrides at sm (max-width: 640px). - `md-size` overrides at md (641px–1007px). - `lg-size` overrides at lg (min-width: 1008px). Use `flexible` (in any of the four attributes) to fill the remaining space in a flex container. */
+		'nldd-spacer': DefineComponent<NLDDSpacerProps>;
+		/** A cell component that provides fixed horizontal spacing within list items. */
+		'nldd-spacer-cell': DefineComponent<NLDDSpacerCellProps>;
+		/** A split button combines a primary action button with a dropdown trigger. The main button performs the default action, while the icon button opens a menu or popover. Provide the dropdown by slotting an `nldd-menu` (with its `nldd-menu-item` / `nldd-menu-divider` children) or an `nldd-popover` directly: ```html <nldd-split-button text="Opslaan"> <nldd-menu> <nldd-menu-item text="Opslaan als…"></nldd-menu-item> </nldd-menu> </nldd-split-button> ``` The slotted overlay stays in the light DOM — no item-moving — so consumers keep their references and the full overlay API. The split-button anchors it to the chevron and opens it on click. When no overlay is slotted, the chevron dispatches `menu-click` and the consumer manages their own popover. */
+		'nldd-split-button': DefineComponent<NLDDSplitButtonProps>;
+		/** A divider line between panels in a split view. The divider runs from edge to edge in the direction perpendicular to the orientation. An optional drag handle indicates that the divider is draggable (future functionality). */
+		'nldd-split-view-divider': DefineComponent<NLDDSplitViewDividerProps>;
+		/** A simple pane container for use inside split views. The split view automatically sets context: whether a back button should be shown. The consumer sets `has-content` to indicate the pane has content. The consumer sets `back-text` on the `nldd-top-title-bar` inside the pane. The split view sets `hide-back` when the back button is not applicable. The pane automatically hides the back button via CSS when `hide-back` is active. The pane sets `--context-parent-background-color` which cascades down to all descendants. Set `background="tinted"` on a pane to give it a tinted background independently of sibling panes. Descendants such as `nldd-page` read `--context-parent-background-color` automatically. A pane stretches its slotted content to fill it (`::slotted(*) { flex-grow: 1 }`), so slot only layout content here. Overlays (`nldd-sheet`, popovers, dialogs, menus) belong at the document root — teleport/portal them to `document.body`. Do not leave an overlay as a light-DOM sibling of a split view: it gets slotted into the main pane and becomes an extra flex-grow child that steals pane height, so in document-scroll (root) mode a short page's sticky footer floats mid-screen instead of docking. */
+		'nldd-split-view-pane': DefineComponent<NLDDSplitViewPaneProps>;
+		/** A vertical split view with multiple stacked panes. The number of panes is set via the `panes` attribute. Each pane automatically gets a numbered slot: pane-1, pane-2, etc. Panes that do not fit the available height are automatically hidden. */
+		'nldd-stacked-split-view': DefineComponent<NLDDStackedSplitViewProps>;
+		/** Een smalle, paginabrede statusbalk (24px) met een diepe achtergrondkleur per variant. Gebruik voor persistente systeemtoestand: een storing, gepland onderhoud, een conceptweergave of een lopende opname. De balk toont bewust geen icoon en ondersteunt alleen tekst — de tekst zelf moet de status benoemen ("Storing: …", "Gepland onderhoud …"), zodat de betekenis niet alleen uit kleur volgt (WCAG 1.4.1). Houd de tekst kort: de balk toont één regel en kapt af met ellipsis, zeker op smallere schermen. Bij een lang bericht met veel informatie hoort alleen de kern in de balk; verwijs voor de rest naar een losse pagina of sheet (bijvoorbeeld via `href` of `button`) waar de gebruiker verder kan lezen. De hele balk kan klikbaar zijn: zet `href` (rendert een `<a>`) of `button` (rendert een `<button>`; luister naar het native `click` event). Zonder beide is de balk statisch. Bij interactie verschijnt een chevron als affordance. Maximaal één actie per balk; meerdere acties of links in lopende tekst horen in nldd-banner. role en aria-live worden automatisch gezet op basis van de variant: - critical → role="alert" (impliceert aria-live="assertive"; onderbreekt de screen reader) - overige → role="status" aria-live="polite" Niet overschrijfbaar — is een rustiger component nodig, kies dan een ander. Gebruik `critical` alleen voor een echte noodsituatie: role="alert" onderbreekt de screen reader bij élke wijziging van de inhoud, dus plaats er geen tekst in die regelmatig verandert (zoals een aftellende timer). */
+		'nldd-status-bar': DefineComponent<NLDDStatusBarProps>;
+		/** Toont waar je staat in een proces van meerdere stappen: een rij bollen met een cijfer (of een vinkje op wat af is), een label eronder en een lijn die ze verbindt. De ouder houdt de waarheid vast: `current` (1-based) leidt de status van elk kind af — ervoor `past`, daarna `future`. Een kind kan dat overschrijven met een eigen `status`, voor flows die terugspringen of een stap overslaan. Alleen horizontaal. Wil je stappen onder elkaar, bouw dan een `nldd-list` met per rij een `nldd-timeline-track-cell` en een `nldd-title-cell`: verticale stappen dragen meestal meer dan een titel, en dat kan een lijstrij al. Onder de sm-breakpoint (container query, dus gemeten op het component zelf en niet op de viewport) klapt het om naar één regel tekst plus een segmentbalk. De volledige stappenlijst blijft dan in de DOM staan, alleen visueel verborgen, zodat hulpsoftware niet minder te horen krijgt dan een breed scherm laat zien. Toegankelijkheid: een `nav` met een label, daarin een `role="list"` met per stap een `role="listitem"`. De huidige stap krijgt `aria-current="step"` — het enige begrip dat WAI-ARIA hiervoor kent. "Afgerond" en "nog te doen" bestaan niet als ARIA-token en reizen daarom als visueel verborgen tekst mee. */
+		'nldd-step-indicator': DefineComponent<NLDDStepIndicatorProps>;
+		/** Eén stap in een `nldd-step-indicator`. De ouder bepaalt de status en het volgnummer; die staan hier als interne state en niet als publieke API, op `status` na — dat overschrijft de afleiding uit `current`. */
+		'nldd-step-indicator-item': DefineComponent<NLDDStepIndicatorItemProps>;
+		/** A numeric control with increment and decrement buttons. */
+		'nldd-stepper': DefineComponent<NLDDStepperProps>;
+		/** A toggle control for on/off settings. Prefer nldd-switch-field for labeled usage — it combines the switch with a visible label. Direct use of nldd-switch requires an accessible-label attribute for screen reader accessibility. */
+		'nldd-switch': DefineComponent<NLDDSwitchProps>;
+		/** A switch toggle with an inline label for use in forms. */
+		'nldd-switch-field': DefineComponent<NLDDSwitchFieldProps>;
+		/** A horizontal navigation bar with mutually exclusive tabs. Exports both NLDDTabBar and NLDDTabBarItem. */
+		'nldd-tab-bar': DefineComponent<NLDDTabBarProps>;
+		'nldd-tab-bar-item': DefineComponent<NLDDTabBarItemProps>;
+		/** Exports both NLDDTable and NLDDTableRow. A data table presented as a boxed surface (rounded corners, an inset border ring, a base or tinted fill) that aligns content into shared columns using a CSS grid + subgrid. Row dividers run full-bleed to the edges; the inline padding lives on the rows, so it insets the cell content but not the dividers. Column widths are defined ONCE on the table via the `columns` attribute (a CSS grid track list), like an HTML `<colgroup>`. Rows are `<nldd-table-row>` elements whose children are the existing `nldd-cell` family — every row uses `grid-template-columns: subgrid`, so all rows snap to the same columns. Header: put one `<nldd-table-row slot="header">` in the `header` slot. Its cells become column headers (role="columnheader"). Responsive: two complementary strategies. (1) Give columns a minimum width (e.g. `minmax(160px,1fr)`) — the table is its own scroll container, so it scrolls horizontally when too narrow (no wrapper needed). (2) Drop columns at breakpoints: provide `sm-columns`/`md-columns`/ `lg-columns` (shorter track lists) and hide the dropped columns' cells with `hide-below`/`hide-above` at the matching breakpoint. The table picks the track list for its own width via the standard sm/md/lg breakpoints. Selection and sorting are intentionally NOT built in: add a column with an `nldd-cell` + `nldd-checkbox` for selection, and drive sorting from an external control (e.g. a dropdown). */
+		'nldd-table': DefineComponent<NLDDTableProps>;
+		'nldd-table-row': DefineComponent<NLDDTableRowProps>;
+		/** Een compacte label voor categorieën, statussen of metadata. Niet interactief. Voor interactieve chips (filter, dismiss) gebruik je <nldd-token>. */
+		'nldd-tag': DefineComponent<NLDDTagProps>;
+		/** 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 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>;
+		/** 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. */
+		'nldd-title': DefineComponent<NLDDTitleProps>;
+		/** A cell component for displaying a title with optional overline and subtitle 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), checkbox, or radio input. */
+		'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. */
+		'nldd-toggle-button-group': DefineComponent<NLDDToggleButtonGroupProps>;
+		/** A token component representing a piece of data — such as a person in an address field or an active filter value. Optionally dismissable or interactive via a contextual menu. */
+		'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. */
+		'nldd-token-field': DefineComponent<NLDDTokenFieldProps>;
+		'nldd-toolbar': DefineComponent<NLDDToolbarProps>;
+		'nldd-toolbar-item': DefineComponent<NLDDToolbarItemProps>;
+		'nldd-toolbar-title': DefineComponent<NLDDToolbarTitleProps>;
+		/** Wrapper component dat een tooltip toont bij hover of focus op het child element. Gebruikt `display: contents` zodat het de layout van het child niet beïnvloedt. */
+		'nldd-tooltip': DefineComponent<NLDDTooltipProps>;
+		/** De bovenste balk van een pagina: een logobalk met het Rijkslogo en een optioneel woordmerk, en daaronder de hoofdbalk met de websitetitel, een terugknop, de globale navigatie en de utility-navigatie. Op smalle breedtes verhuist de globale navigatie naar een menusheet achter de menuknop. */
+		'nldd-top-navigation-bar': DefineComponent<NLDDTopNavigationBarProps>;
+		/** A toolbar for page and container headings with optional navigation and action buttons. The component has two states: - Default: the back button shows the previous page title as a text button - Compact (class `is-compact`): the back button is an icon button, a divider and the toolbar title are visible When `collapse-anchor` is set, the `is-compact` class is automatically applied as soon as the top of the anchor element reaches this bar's own top edge (the sticky header line). Measuring the bar rather than the page keeps it correct in both nested and root scroll modes; it also re-points at the live scroll target when the page switches mode. Without `collapse-anchor` the bar takes a static state: compact when `text` is set (so the title shows in the title-group), non-compact otherwise (so the `back-text` button stays visible). */
+		'nldd-top-title-bar': DefineComponent<NLDDTopTitleBarProps>;
+		/** A section with 2/3 main content on the left and a 1/3 sidebar on the right. The columns wrap automatically when they become smaller than 280px. Padding and gap adjust via container queries. */
+		'nldd-two-thirds-one-third-section': DefineComponent<NLDDTwoThirdsOneThirdSectionProps>;
+		/** Een zwevend venster gebaseerd op het native <dialog>-element. Kan modaal of niet-modaal worden weergegeven. Positioneerbaar via CSS-waarden. Geen eigen header — consumers gebruiken nldd-page met sticky-header binnenin voor een title bar. */
+		'nldd-window': DefineComponent<NLDDWindowProps>;
+	}
+}
+
+export {};