@nldd/design-system 0.8.88 → 0.8.90

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'];
@@ -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.88",
+  "version": "0.8.90",
   "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"