@nldd/design-system 0.8.87 → 0.8.89

package/dist/types/vue.d.ts

@@ -1354,7 +1354,7 @@ declare module 'vue' {
 	type NLDDImageProps = {
 		/** Image URL */
 		'src'?: NLDDImage['src'];
-		/** Alt text. Required unless `decorative`. */
+		/** Alt text for the image from `src`. Required unless `decorative`; slotted media carries its own. */
 		'alt'?: NLDDImage['alt'];
 		/** Responsive source set */
 		'srcset'?: NLDDImage['srcset'];
@@ -2246,7 +2246,7 @@ declare module 'vue' {
 	type NLDDRadioButtonProps = {
 		/** Checked state */
 		'checked'?: NLDDRadioButton['checked'];
-		/** Renders the shape without the input: no focus, no name/value, nothing announced. For a control that owns the state elsewhere, such as a list row that is itself the radio; putting a real input in there would nest a control inside a control. */
+		/** Renders the shape only: no role, no focus, no name/value, nothing announced. For a control that owns the state elsewhere, such as a list row or an nldd-radio-button-field that is itself the radio; putting a second radio in there would nest a control inside a control. */
 		'decorative'?: NLDDRadioButton['decorative'];
 		/** Disabled state */
 		'disabled'?: NLDDRadioButton['disabled'];
@@ -2254,15 +2254,19 @@ declare module 'vue' {
 		'no-tab'?: NLDDRadioButton['noTab'];
 		/** Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable. */
 		'noTab'?: NLDDRadioButton['noTab'];
-		/** Required state */
+		/** Required state. What it asks is whether anything in the group is checked, as a native radio does. */
 		'required'?: NLDDRadioButton['required'];
+		/** Draws the focus ring around the shape. Set by nldd-radio-button-field, which is the radio itself and holds the focus. Not part of the public API. */
+		'focus-ring'?: NLDDRadioButton['focusRing'];
+		/** Draws the focus ring around the shape. Set by nldd-radio-button-field, which is the radio itself and holds the focus. Not part of the public API. */
+		'focusRing'?: NLDDRadioButton['focusRing'];
 		/** 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. */
+		/** Accessible label, set as aria-label on this element: it is the radio. */
 		'accessible-label'?: NLDDRadioButton['accessibleLabel'];
-		/** Accessible label forwarded as aria-label to the native input. */
+		/** Accessible label, set as aria-label on this element: it is the radio. */
 		'accessibleLabel'?: NLDDRadioButton['accessibleLabel'];
 		/** Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it. Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries. */
 		'invalid'?: NLDDRadioButton['invalid'];
@@ -2280,9 +2284,9 @@ declare module 'vue' {
 		'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. */
+		/** Radio group name for form submission; ties the fields of one group together. 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 state. What it asks is whether anything in the group is checked, as a native radio does. Set automatically by nldd-radio-button-group. */
 		'required'?: NLDDRadioButtonField['required'];
 		/** Label text for the radio button */
 		'label'?: NLDDRadioButtonField['label'];
@@ -2386,7 +2390,7 @@ declare module 'vue' {
 		'value'?: NLDDSegmentedControl['value'];
 		/** Control size: 'sm' | 'md' | 'lg' (default: 'md') */
 		'size'?: NLDDSegmentedControl['size'];
-		/** Input type: 'radio' | 'checkbox' (default: 'radio'). */
+		/** Selection mode: 'radio' | 'checkbox' (default: 'radio'). */
 		'type'?: NLDDSegmentedControl['type'];
 		/** Content type for all items: 'text' | 'icon' | 'icon-and-text' (default: 'text') */
 		'variant'?: NLDDSegmentedControl['variant'];
@@ -2394,7 +2398,7 @@ declare module 'vue' {
 		'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 for form submission */
 		'name'?: NLDDSegmentedControl['name'];
 		/** Accessible name for the group, set as aria-label */
 		'accessible-label'?: NLDDSegmentedControl['accessibleLabel'];
@@ -2412,7 +2416,7 @@ declare module 'vue' {
 	};
 
 	type NLDDSegmentedControlItemProps = {
-		/** Required state. Set by nldd-segmented-control. */
+		/** Required state of the native checkbox. In radio mode the group carries the constraint. */
 		'required'?: NLDDSegmentedControlItem['required'];
 		/** Value for this item */
 		'value'?: NLDDSegmentedControlItem['value'];
@@ -2424,13 +2428,13 @@ declare module 'vue' {
 		'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. */
+		/** Selection mode: 'radio' | 'checkbox' (default: 'radio'). In radio mode the item is the radio itself, in checkbox mode it renders a native checkbox. Set by nldd-segmented-control. */
 		'input-type'?: NLDDSegmentedControlItem['inputType'];
-		/** Type of the native input: 'radio' | 'checkbox' (default: 'radio'). Set by nldd-segmented-control. */
+		/** Selection mode: 'radio' | 'checkbox' (default: 'radio'). In radio mode the item is the radio itself, in checkbox mode it renders a native checkbox. 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. */
+		/** Name of the group for form submission, put on the native checkbox. 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. */
+		/** Name of the group for form submission, put on the native checkbox. 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'];
@@ -3218,7 +3222,7 @@ declare module 'vue' {
 	type NLDDToggleButtonProps = {
 		/** Required state. Set by nldd-toggle-button-group. */
 		'required'?: NLDDToggleButton['required'];
-		/** Underlying element (default: 'button') */
+		/** What the button is: a button with aria-pressed, a native checkbox, or a radio (default: 'button') */
 		'type'?: NLDDToggleButton['type'];
 		/** Button size (default: 'md') */
 		'size'?: NLDDToggleButton['size'];
@@ -3719,7 +3723,7 @@ declare module 'vue' {
 		'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 short message that arrives over the interface and leaves on its own: a save that worked, a request that failed. Not a banner, which stands in the page and stays there — this one floats, stacks, and goes away. It places itself. Write it wherever it belongs in your code and it moves to one shared region: top right from md, full width across the top below that. Nothing about the position is settable, so notifications from anywhere in an application land in the same place and stack in the same order. More than one is a deck, not a list: the front one is readable and the older ones peek out below it, so a burst of messages takes the room of roughly one. The newest is in front. Behind it a notification is a bare surface, cut to the height of the one in front; dismiss the front and it slides up into the place that came free while its message fades in, because it was standing there all along. Under the front notification sits a strip as wide as the deck and as tall as the deck is when it fans out. Pointing at it fans the deck out to fill it, which is the only hint that there is more here than the message you can read; clicking it, or moving focus into the region, lays the whole deck out as a list. Clicking or tabbing away puts it back. The notification itself is not a button: a click on the message you are reading does nothing. Only the front of the deck counts down, and only while the deck is closed: open means someone is reading. The rest wait, so nothing disappears from under the one you are reading. `critical` never leaves on its own: a failure is worth reading, and the count-down would take it away while you were. That also keeps this within WCAG 2.2.1, which allows a time limit when what disappears is not essential. The clock pauses while a pointer moves over the notification and while focus is inside it, and resumes where it left off rather than starting over. A pointer that merely happens to rest where the notification appears does not count: it never moved, so nobody is reading. role follows the variant: `critical` becomes role="alert", the rest role="status". Focus never moves on its own. Escape dismisses the notification that focus is in. */
+		/** A short message that arrives over the interface and leaves on its own: a save that worked, a request that failed. Not a banner, which stands in the page and stays there — this one floats, stacks, and goes away. It places itself. Write it wherever it belongs in your code and it moves to one shared region: top right from md, full width across the top below that. Nothing about the position is settable, so notifications from anywhere in an application land in the same place and stack in the same order. A modal overlay is the one thing that moves it. An nldd-sheet, nldd-window or nldd-modal-dialog paints in the browser's top layer, above the whole page and out of reach of any z-index, and while one is open everything outside it is inert. So the region goes in: into the topmost overlay that is open, and back down as they close. A notification already on screen travels with it, and one raised from inside a sheet is readable and reachable where it is raised. More than one is a deck, not a list: the front one is readable and the older ones peek out below it, so a burst of messages takes the room of roughly one. The newest is in front. Behind it a notification is a bare surface, cut to the height of the one in front; dismiss the front and it slides up into the place that came free while its message fades in, because it was standing there all along. Under the front notification sits a strip as wide as the deck and as tall as the deck is when it fans out. Pointing at it fans the deck out to fill it, which is the only hint that there is more here than the message you can read; clicking it, or moving focus into the region, lays the whole deck out as a list. Clicking or tabbing away puts it back. The notification itself is not a button: a click on the message you are reading does nothing. Only the front of the deck counts down, and only while the deck is closed: open means someone is reading. The rest wait, so nothing disappears from under the one you are reading. `critical` never leaves on its own: a failure is worth reading, and the count-down would take it away while you were. That also keeps this within WCAG 2.2.1, which allows a time limit when what disappears is not essential. The clock pauses while a pointer moves over the notification and while focus is inside it, and resumes where it left off rather than starting over. A pointer that merely happens to rest where the notification appears does not count: it never moved, so nobody is reading. role follows the variant: `critical` becomes role="alert", the rest role="status". Focus never moves on its own. Escape dismisses the notification that focus is in. */
 		'nldd-notification': DefineComponent<NLDDNotificationProps>;
 		/** A numeric input field with decrement and increment buttons. */
 		'nldd-number-field': DefineComponent<NLDDNumberFieldProps>;
@@ -3727,7 +3731,7 @@ declare module 'vue' {
 		'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 stick against the document, offset by --context-inset-top/bottom. The mode is read on connect/resize and reflected to [data-scroll] so the CSS can branch. The page passes those insets on to its own content, with its sticky header and footer added: anything sticky inside (an nldd-sidebar-section, a sticky table head) reads --context-inset-top / --context-inset-bottom and clears every bar above and below it without being told a number. The heights are measured, because a top title bar shrinks as you scroll past its anchor. While the page owns the scroller, only its own bars count: the chrome above the page sits outside that scroller and does not push sticky content down. */
+		/** 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, padded by the measured header height. That padding freezes once you scroll, so a collapsing bar cannot drag the content up under the cursor. 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 stick against the document, offset by --context-inset-top/bottom. The mode is read on connect/resize and reflected to [data-scroll] so the CSS can branch. The page passes those insets on to its own content, with its sticky header and footer added: anything sticky inside (an nldd-sidebar-section, a sticky table head) reads --context-inset-top / --context-inset-bottom and clears every bar above and below it without being told a number. The heights are measured, because a top title bar shrinks as you scroll past its anchor. While the page owns the scroller, only its own bars count: the chrome above the page sits outside that scroller and does not push sticky content down. */
 		'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>;
@@ -3747,9 +3751,9 @@ declare module 'vue' {
 		/** 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> */
+		/** WAI-ARIA: put the buttons of one group in a container with role="radiogroup" and a name of its own. A screen reader counts the options from that container, so a bare <fieldset> (which is a group, not a radiogroup) leaves them uncounted. nldd-radio-button-group does this for you. Radio buttons with the same name, in the same form and the same tree, form one group the way native radios do: checking one unchecks the others, the arrow keys move between them, Tab stops at the group once, and a screen reader hears each one's place in it. The element itself is the radio, because an input per shadow root would leave every button a group of one. The shape is all this component draws. A radio with a label beside it is nldd-radio-button-field. <fieldset role="radiogroup" aria-labelledby="options-label"> <legend id="options-label">Kies een optie</legend> <nldd-radio-button name="options" value="1" accessible-label="Optie 1"></nldd-radio-button> <nldd-radio-button name="options" value="2" accessible-label="Optie 2"></nldd-radio-button> </fieldset> */
 		'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. */
+		/** A radio button with an inline label. Use inside nldd-radio-button-group, which sets the name and labels the group. Fields that stand on their own group by name, the way native radios do: checking one unchecks the others, the arrow keys move between them and Tab stops at the group once. Put them in a container with role="radiogroup", or a screen reader has nothing to count them from. The field is the radio: it carries the role, the state, the label it is announced by and the focus, and the nldd-radio-button inside only draws the shape. A radio of its own in there would be a second control inside a control, and a group of one to count. Form-associated: the checked field submits its `value` under `name`. 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>;
@@ -3819,7 +3823,7 @@ declare module 'vue' {
 		'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. */
+		/** A selectable button that toggles between selected and unselected. Available as a button (aria-pressed), a checkbox, or a radio. In radio mode the button itself is the radio: it carries the role, the state and its place in the group. A native radio in a shadow root of its own would be a group of one, counted as "1 of 1" and stopped at by Tab. */
 		'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>;

package/dist/utilities/described-by-mixin.d.ts

@@ -16,7 +16,7 @@ export interface DescribedElement {
  * `ariaDescribedByElements` takes the elements themselves and crosses the
  * boundary.
  */
-export declare function applyDescribedBy(target: Element | null | undefined, elements: readonly Element[]): void;
+export declare function applyDescribedBy(target: Element | null | undefined, elements: readonly Element[], onSelf?: boolean): void;
 /**
  * Announces that a control is invalid, on the element assistive software meets.
  *
@@ -29,7 +29,7 @@ export declare function applyDescribedBy(target: Element | null | undefined, ele
  * A component that wraps another one hands the state on, the same way it hands
  * on the description.
  */
-export declare function applyInvalid(target: Element | null | undefined, invalid: boolean): void;
+export declare function applyInvalid(target: Element | null | undefined, invalid: boolean, onSelf?: boolean): void;
 /**
  * Lets nldd-form-field hand a control the help and error texts that describe
  * it, wherever that control renders them.

package/dist/utilities/described-by-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"described-by-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/described-by-mixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEnF,wEAAwE;AACxE,MAAM,WAAW,gBAAgB;IAChC,mBAAmB,EAAE,SAAS,OAAO,EAAE,CAAC;IACxC,yEAAyE;IACzE,eAAe,IAAI,OAAO,GAAG,IAAI,CAAC;CAClC;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,EAAE,QAAQ,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAavG;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAQvF;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC5D,IAAI,EAAE,CAAC,GACL,CAAC,GAAG,WAAW,CAAC,gBAAgB,CAAC,CAsCnC"}
+{"version":3,"file":"described-by-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/described-by-mixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEnF,wEAAwE;AACxE,MAAM,WAAW,gBAAgB;IAChC,mBAAmB,EAAE,SAAS,OAAO,EAAE,CAAC;IACxC,yEAAyE;IACzE,eAAe,IAAI,OAAO,GAAG,IAAI,CAAC;CAClC;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC/B,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,EAClC,QAAQ,EAAE,SAAS,OAAO,EAAE,EAC5B,MAAM,UAAQ,GACZ,IAAI,CAaN;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,UAAQ,GAAG,IAAI,CAQvG;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC5D,IAAI,EAAE,CAAC,GACL,CAAC,GAAG,WAAW,CAAC,gBAAgB,CAAC,CA2CnC"}

package/dist/utilities/described-by-mixin.js

@@ -15,13 +15,13 @@ import { property } from 'lit/decorators.js';
  * `ariaDescribedByElements` takes the elements themselves and crosses the
  * boundary.
  */
-export function applyDescribedBy(target, elements) {
+export function applyDescribedBy(target, elements, onSelf = false) {
     if (!target)
         return;
     // A component that wraps another one hands the question on rather than
     // answering it. nldd-checkbox-field renders an nldd-checkbox, and only that
     // one knows which element inside itself is the control.
-    if ('describedByElements' in target) {
+    if (!onSelf && 'describedByElements' in target) {
         target.describedByElements = [...elements];
         return;
     }
@@ -40,10 +40,10 @@ export function applyDescribedBy(target, elements) {
  * A component that wraps another one hands the state on, the same way it hands
  * on the description.
  */
-export function applyInvalid(target, invalid) {
+export function applyInvalid(target, invalid, onSelf = false) {
     if (!target)
         return;
-    if ('invalid' in target) {
+    if (!onSelf && 'invalid' in target) {
         target.invalid = invalid;
         return;
     }
@@ -75,12 +75,17 @@ export function DescribedBy(Base) {
             const apply = {
                 hostUpdated: () => {
                     const target = this.describedTarget();
-                    applyDescribedBy(target, this.describedByElements);
+                    // A component that is the control itself, such as an
+                    // nldd-radio-button carrying role="radio", puts the ARIA on its own
+                    // element. Handing it on there would hand it to itself, and a
+                    // component that does that renders forever.
+                    const onSelf = target === this;
+                    applyDescribedBy(target, this.describedByElements, onSelf);
                     // Optional: nldd-button carries this mixin for its description and
                     // has no validity of its own.
                     const invalid = this.invalid;
                     if (invalid !== undefined)
-                        applyInvalid(target, invalid);
+                        applyInvalid(target, invalid, onSelf);
                 },
             };
             this.addController(apply);

package/dist/utilities/described-by-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"described-by-mixin.js","sourceRoot":"","sources":["../../src/utilities/described-by-mixin.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAc7C;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAAC,MAAkC,EAAE,QAA4B;IAChG,IAAI,CAAC,MAAM;QAAE,OAAO;IAEpB,uEAAuE;IACvE,4EAA4E;IAC5E,wDAAwD;IACxD,IAAI,qBAAqB,IAAI,MAAM,EAAE,CAAC;QACpC,MAAsC,CAAC,mBAAmB,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;QAC5E,OAAO;IACR,CAAC;IAED,MAAM,EAAE,GAAG,MAA0E,CAAC;IACtF,EAAE,CAAC,uBAAuB,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACrE,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,YAAY,CAAC,MAAkC,EAAE,OAAgB;IAChF,IAAI,CAAC,MAAM;QAAE,OAAO;IACpB,IAAI,SAAS,IAAI,MAAM,EAAE,CAAC;QACxB,MAAyC,CAAC,OAAO,GAAG,OAAO,CAAC;QAC7D,OAAO;IACR,CAAC;IACD,IAAI,OAAO;QAAE,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;;QACpD,MAAM,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;AAC7C,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAC1B,IAAO;IAEP,MAAe,gBAAiB,SAAQ,IAAI;QAK3C,YAAY,GAAG,IAAW;YACzB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YALhB,4DAA4D;YAE5D,wBAAmB,GAAuB,EAAE,CAAC;YAI5C,MAAM,KAAK,GAAuB;gBACjC,WAAW,EAAE,GAAG,EAAE;oBACjB,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;oBACtC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;oBACnD,mEAAmE;oBACnE,8BAA8B;oBAC9B,MAAM,OAAO,GAAI,IAA8B,CAAC,OAAO,CAAC;oBACxD,IAAI,OAAO,KAAK,SAAS;wBAAE,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;gBAC1D,CAAC;aACD,CAAC;YACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;QAED;;;;;;;WAOG;QACH,eAAe;YACd,OAAO,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,yBAAyB,CAAC,IAAI,IAAI,CAAC;QAC1E,CAAC;KACD;IA5BA;QADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iEACc;IA6B9C,2EAA2E;IAC3E,2EAA2E;IAC3E,wEAAwE;IACxE,WAAW;IACX,OAAO,gBAAgE,CAAC;AACzE,CAAC"}
+{"version":3,"file":"described-by-mixin.js","sourceRoot":"","sources":["../../src/utilities/described-by-mixin.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAc7C;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAC/B,MAAkC,EAClC,QAA4B,EAC5B,MAAM,GAAG,KAAK;IAEd,IAAI,CAAC,MAAM;QAAE,OAAO;IAEpB,uEAAuE;IACvE,4EAA4E;IAC5E,wDAAwD;IACxD,IAAI,CAAC,MAAM,IAAI,qBAAqB,IAAI,MAAM,EAAE,CAAC;QAC/C,MAAsC,CAAC,mBAAmB,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;QAC5E,OAAO;IACR,CAAC;IAED,MAAM,EAAE,GAAG,MAA0E,CAAC;IACtF,EAAE,CAAC,uBAAuB,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACrE,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,YAAY,CAAC,MAAkC,EAAE,OAAgB,EAAE,MAAM,GAAG,KAAK;IAChG,IAAI,CAAC,MAAM;QAAE,OAAO;IACpB,IAAI,CAAC,MAAM,IAAI,SAAS,IAAI,MAAM,EAAE,CAAC;QACnC,MAAyC,CAAC,OAAO,GAAG,OAAO,CAAC;QAC7D,OAAO;IACR,CAAC;IACD,IAAI,OAAO;QAAE,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;;QACpD,MAAM,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;AAC7C,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAC1B,IAAO;IAEP,MAAe,gBAAiB,SAAQ,IAAI;QAK3C,YAAY,GAAG,IAAW;YACzB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YALhB,4DAA4D;YAE5D,wBAAmB,GAAuB,EAAE,CAAC;YAI5C,MAAM,KAAK,GAAuB;gBACjC,WAAW,EAAE,GAAG,EAAE;oBACjB,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;oBACtC,qDAAqD;oBACrD,oEAAoE;oBACpE,8DAA8D;oBAC9D,4CAA4C;oBAC5C,MAAM,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;oBAC/B,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;oBAC3D,mEAAmE;oBACnE,8BAA8B;oBAC9B,MAAM,OAAO,GAAI,IAA8B,CAAC,OAAO,CAAC;oBACxD,IAAI,OAAO,KAAK,SAAS;wBAAE,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;gBAClE,CAAC;aACD,CAAC;YACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;QAED;;;;;;;WAOG;QACH,eAAe;YACd,OAAO,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,yBAAyB,CAAC,IAAI,IAAI,CAAC;QAC1E,CAAC;KACD;IAjCA;QADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iEACc;IAkC9C,2EAA2E;IAC3E,2EAA2E;IAC3E,wEAAwE;IACxE,WAAW;IACX,OAAO,gBAAgE,CAAC;AACzE,CAAC"}

package/dist/utilities/radio-grouping.d.ts

@@ -0,0 +1,66 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import { type RadioPosition } from './radio-position.js';
+/**
+ * Groups a radio with the ones that share its name, the way the browser does.
+ *
+ * The platform groups native radios by name, within one tree and one form, and
+ * every radio of ours renders in a shadow root of its own. Left to the browser
+ * each of them is a group of one: checking one leaves the others checked, Tab
+ * stops at every option, and none of them knows its place in the set.
+ *
+ * A group component around the radios (nldd-radio-button-group) hands its
+ * members their position and wins where it is there. This is for the radios
+ * that stand on their own, in a `<fieldset role="radiogroup">` or a layout of
+ * the consumer's own.
+ */
+/** What a radio has to offer to be grouped with the others of its name. */
+export interface GroupedRadio extends HTMLElement {
+    name: string;
+    checked: boolean;
+    disabled: boolean;
+    readonly internals: ElementInternals;
+    commitFormValue(): void;
+    /** Checks this radio, the way a click does. */
+    select(): void;
+}
+type RadioHost = GroupedRadio & ReactiveControllerHost;
+export declare class RadioGrouping implements ReactiveController {
+    private host;
+    /** Its place among the radios that share its name, or null when it has none. */
+    position: RadioPosition | null;
+    /**
+     * Whether anything in the group is checked, which is what `required` asks of
+     * a radio: one of these, not this one. A radio without a group answers for
+     * itself, because it is the whole group.
+     */
+    answered: boolean;
+    /** Where it was grouped last, so the radios it leaves behind hear of it. */
+    private _groupedIn;
+    constructor(host: RadioHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /** Reads which group this radio is in now, and recounts the one it left. */
+    regroup(): void;
+    /** Counts the group again, after this radio was checked or disabled. */
+    refresh(): void;
+    /** Unchecks the others, as checking a native radio does. */
+    uncheckOthers(): void;
+    /**
+     * Moves to the next radio of the group and checks it, as the arrow keys do
+     * for native radios. Disabled options are stepped over, and the ends wrap.
+     *
+     * @returns whether the key was handled.
+     */
+    moveWithArrow(e: KeyboardEvent): boolean;
+    private _key;
+    /** Compared by value: a recount hands out new objects for the same place, and
+     *  asking for a render on every one of those is a render per radio per
+     *  keystroke, each of them scheduled from inside an update that had just
+     *  finished. */
+    private _apply;
+    private static _radiosIn;
+    /** A radio on its own keeps the place the browser gives it: none. */
+    private static _recount;
+}
+export {};
+//# sourceMappingURL=radio-grouping.d.ts.map

package/dist/utilities/radio-grouping.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-grouping.d.ts","sourceRoot":"","sources":["../../src/utilities/radio-grouping.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AACtE,OAAO,EAAkB,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;;;;;;GAYG;AAEH,2EAA2E;AAC3E,MAAM,WAAW,YAAa,SAAQ,WAAW;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IACrC,eAAe,IAAI,IAAI,CAAC;IACxB,+CAA+C;IAC/C,MAAM,IAAI,IAAI,CAAC;CACf;AAED,KAAK,SAAS,GAAG,YAAY,GAAG,sBAAsB,CAAC;AA0BvD,qBAAa,aAAc,YAAW,kBAAkB;IAe3C,OAAO,CAAC,IAAI;IAbxB,gFAAgF;IAChF,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAQ;IAEtC;;;;OAIG;IACH,QAAQ,UAAS;IAEjB,4EAA4E;IAC5E,OAAO,CAAC,UAAU,CAA8B;gBAE5B,IAAI,EAAE,SAAS;IAKnC,aAAa,IAAI,IAAI;IAKrB,gBAAgB,IAAI,IAAI;IAIxB,4EAA4E;IAC5E,OAAO,IAAI,IAAI;IAUf,wEAAwE;IACxE,OAAO,IAAI,IAAI;IAKf,4DAA4D;IAC5D,aAAa,IAAI,IAAI;IAYrB;;;;;OAKG;IACH,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO;IAcxC,OAAO,CAAC,IAAI;IAKZ;;;oBAGgB;IAChB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,MAAM,CAAC,SAAS;IAUxB,qEAAqE;IACrE,OAAO,CAAC,MAAM,CAAC,QAAQ;CAUvB"}

package/dist/utilities/radio-grouping.js

@@ -0,0 +1,133 @@
+import { radioPositions } from './radio-position.js';
+/**
+ * Both tags in one list, because the platform groups on the name and not on the
+ * element. A button and a field that share a name are one group to the browser,
+ * and two lists would have them counting different sets.
+ */
+const RADIO_TAGS = 'nldd-radio-button, nldd-radio-button-field';
+const ARROW_STEPS = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
+/** The controller of each radio, so a recount can reach its siblings. */
+const groupings = new WeakMap();
+/** A radio that draws the shape for something else owns no state of its own. */
+function isMember(radio) {
+    return !radio.decorative;
+}
+export class RadioGrouping {
+    constructor(host) {
+        this.host = host;
+        /** Its place among the radios that share its name, or null when it has none. */
+        this.position = null;
+        /**
+         * Whether anything in the group is checked, which is what `required` asks of
+         * a radio: one of these, not this one. A radio without a group answers for
+         * itself, because it is the whole group.
+         */
+        this.answered = false;
+        /** Where it was grouped last, so the radios it leaves behind hear of it. */
+        this._groupedIn = null;
+        groupings.set(host, this);
+        host.addController(this);
+    }
+    hostConnected() {
+        // A tick later, once the radios parsed after this one are there too.
+        queueMicrotask(() => this.regroup());
+    }
+    hostDisconnected() {
+        this.regroup();
+    }
+    /** Reads which group this radio is in now, and recounts the one it left. */
+    regroup() {
+        const was = this._groupedIn;
+        const now = this._key();
+        this._groupedIn = now;
+        const moved = !now || !was || was.root !== now.root || was.name !== now.name || was.form !== now.form;
+        if (was && moved)
+            RadioGrouping._recount(was);
+        if (now)
+            RadioGrouping._recount(now);
+        else
+            this._apply(null, this.host.checked);
+    }
+    /** Counts the group again, after this radio was checked or disabled. */
+    refresh() {
+        if (this._groupedIn)
+            RadioGrouping._recount(this._groupedIn);
+        else
+            this._apply(null, this.host.checked);
+    }
+    /** Unchecks the others, as checking a native radio does. */
+    uncheckOthers() {
+        const key = this._key();
+        if (!key)
+            return;
+        for (const radio of RadioGrouping._radiosIn(key)) {
+            if (radio === this.host || !radio.checked)
+                continue;
+            radio.checked = false;
+            // Synchronously: a change listener that reads the form should not find
+            // two values under one name.
+            radio.commitFormValue();
+        }
+    }
+    /**
+     * Moves to the next radio of the group and checks it, as the arrow keys do
+     * for native radios. Disabled options are stepped over, and the ends wrap.
+     *
+     * @returns whether the key was handled.
+     */
+    moveWithArrow(e) {
+        const step = ARROW_STEPS[e.key];
+        const key = step ? this._key() : null;
+        if (!key || !this.position)
+            return false;
+        const radios = RadioGrouping._radiosIn(key).filter((radio) => !radio.disabled);
+        const at = radios.indexOf(this.host);
+        if (at === -1)
+            return false;
+        e.preventDefault();
+        const next = radios[(at + step + radios.length) % radios.length];
+        next.focus();
+        next.select();
+        return true;
+    }
+    _key() {
+        if (!this.host.isConnected || !isMember(this.host) || !this.host.name)
+            return null;
+        return { root: this.host.getRootNode(), name: this.host.name, form: this.host.internals.form };
+    }
+    /** Compared by value: a recount hands out new objects for the same place, and
+     *  asking for a render on every one of those is a render per radio per
+     *  keystroke, each of them scheduled from inside an update that had just
+     *  finished. */
+    _apply(position, answered) {
+        const same = this.answered === answered
+            && this.position?.posInSet === position?.posInSet
+            && this.position?.setSize === position?.setSize
+            && this.position?.tabbable === position?.tabbable;
+        if (same)
+            return;
+        this.position = position;
+        this.answered = answered;
+        this.host.requestUpdate();
+    }
+    static _radiosIn({ root, name, form }) {
+        const radios = root.querySelectorAll?.(RADIO_TAGS) ?? [];
+        return Array.from(radios).filter((radio) => groupings.has(radio)
+            && radio.isConnected
+            && radio.name === name
+            && isMember(radio)
+            && radio.internals.form === form);
+    }
+    /** A radio on its own keeps the place the browser gives it: none. */
+    static _recount(key) {
+        const radios = RadioGrouping._radiosIn(key);
+        const positions = radios.length > 1
+            ? radioPositions(radios, (radio) => radio.checked, (radio) => radio.disabled)
+            : [];
+        const answered = radios.some((radio) => radio.checked);
+        radios.forEach((radio, index) => {
+            groupings.get(radio)?._apply(positions[index] ?? null, answered);
+        });
+    }
+}
+//# sourceMappingURL=radio-grouping.js.map

package/dist/utilities/radio-grouping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-grouping.js","sourceRoot":"","sources":["../../src/utilities/radio-grouping.ts"],"names":[],"mappings":"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"}

package/dist/utilities/radio-position.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Where a radio sits in its group, for a component that renders its native
+ * radio in a shadow root of its own.
+ *
+ * The browser groups radios by name within one tree scope. One input per
+ * shadow root makes every radio a group of one: a screen reader announces
+ * "1 of 1" for each, and each is a stop of its own for Tab. Whatever holds the
+ * group knows better, so it hands every radio its place, and the radio puts
+ * that on its input.
+ */
+export interface RadioPosition {
+    posInSet: number;
+    setSize: number;
+    /** The group's one stop for Tab: the checked radio, or the first enabled
+     *  one when none is checked, which is where the browser would land too. */
+    tabbable: boolean;
+}
+/** A position for every radio of a group, in the order given. */
+export declare function radioPositions<T>(radios: readonly T[], isChecked: (radio: T) => boolean, isDisabled: (radio: T) => boolean): RadioPosition[];
+//# sourceMappingURL=radio-position.d.ts.map

package/dist/utilities/radio-position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-position.d.ts","sourceRoot":"","sources":["../../src/utilities/radio-position.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAa;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB;+EAC2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;CAClB;AAED,iEAAiE;AACjE,wBAAgB,cAAc,CAAC,CAAC,EAC/B,MAAM,EAAE,SAAS,CAAC,EAAE,EACpB,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,EAChC,UAAU,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,GAC/B,aAAa,EAAE,CAQjB"}

package/dist/utilities/radio-position.js

@@ -0,0 +1,11 @@
+/** A position for every radio of a group, in the order given. */
+export function radioPositions(radios, isChecked, isDisabled) {
+    const enabled = radios.filter((radio) => !isDisabled(radio));
+    const stop = enabled.find(isChecked) ?? enabled[0];
+    return radios.map((radio, index) => ({
+        posInSet: index + 1,
+        setSize: radios.length,
+        tabbable: radio === stop,
+    }));
+}
+//# sourceMappingURL=radio-position.js.map

package/dist/utilities/radio-position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-position.js","sourceRoot":"","sources":["../../src/utilities/radio-position.ts"],"names":[],"mappings":"AAkBA,iEAAiE;AACjE,MAAM,UAAU,cAAc,CAC7B,MAAoB,EACpB,SAAgC,EAChC,UAAiC;IAEjC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IAC7D,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IACnD,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QACpC,QAAQ,EAAE,KAAK,GAAG,CAAC;QACnB,OAAO,EAAE,MAAM,CAAC,MAAM;QACtB,QAAQ,EAAE,KAAK,KAAK,IAAI;KACxB,CAAC,CAAC,CAAC;AACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.87",
+  "version": "0.8.89",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -473,7 +473,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/MinBZK/storybook.git"
+    "url": "https://github.com/NederlandseDigitaleDienst/design-system.git"
   },
   "publishConfig": {
     "access": "public",
@@ -533,25 +533,25 @@
     "@semantic-release/changelog": "^7.0.0",
     "@semantic-release/exec": "^7.1.0",
     "@semantic-release/git": "^11.0.1",
-    "@storybook/addon-a11y": "^10.5.7",
-    "@storybook/addon-docs": "^10.5.7",
-    "@storybook/addon-themes": "^10.5.7",
-    "@storybook/addon-vitest": "^10.5.7",
-    "@storybook/web-components-vite": "^10.5.7",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-themes": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/web-components-vite": "^10.6.0",
     "@vitest/browser-playwright": "4.1.11",
     "@vitest/coverage-v8": "4.1.11",
     "conventional-changelog": "^8.1.0",
     "conventional-changelog-conventionalcommits": "10.2.1",
     "eslint": "^10.8.0",
     "eslint-plugin-lit-a11y": "^5.1.1",
-    "eslint-plugin-storybook": "^10.5.7",
+    "eslint-plugin-storybook": "^10.6.0",
     "globals": "^17.8.0",
     "playwright": "^1.57.0",
     "semantic-release": "^25.0.2",
-    "storybook": "^10.5.7",
+    "storybook": "^10.6.0",
     "typescript": "^5.3.0",
     "typescript-eslint": "^8.58.0",
-    "vite": "8.2.2",
+    "vite": "8.3.0",
     "vitest": "4.1.11",
     "vue": "^3.5.40",
     "vue-tsc": "^3.3.7"