@momentum-design/components 0.133.13 → 0.133.15

package/dist/components/listbox/listbox.component.d.ts

@@ -3,7 +3,10 @@ import type Option from '../option';
 import { Component } from '../../models';
 declare const ListBox_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface & import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface & import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & typeof Component;
 /**
- * listbox component presents a list of options and allows a user to select one of them.
+ * listbox component presents a list of options and allows a user to select one or more of them.
+ *
+ * When `multiple` is enabled, clicking/pressing Enter/Space on an option toggles its selection
+ * instead of replacing the current selection.
  *
  * Notes:
  * - This is a standalone listbox component. Select has its own mdc-selectlistbox component.
@@ -41,6 +44,11 @@ declare class ListBox extends ListBox_base {
      * The value attribute is used to represent the last selected option's value in the listbox.
      */
     value?: undefined | string;
+    /**
+     * When true, multiple options can be selected.
+     * @default false
+     */
+    multiple: boolean;
     /** @internal */
     selectedOption?: Option | null;
     /** @internal */
@@ -62,8 +70,26 @@ declare class ListBox extends ListBox_base {
     private isValidItem;
     /** @internal */
     private handleClick;
+    /**
+     * Toggles the selection state of an option (for multiselect mode).
+     * @internal
+     */
+    private toggleOptionSelection;
     /** @internal */
     private getFirstSelectedOption;
+    /**
+     * Syncs value and selectedOption to reflect the first selected option (when multiple)
+     * @internal
+     */
+    private syncValueToFirstSelected;
+    /** @internal */
+    private getSelectedValues;
+    /**
+     * Override to focus the first selected option per W3C APG.
+     * This applies to both single-select and multi-select listboxes.
+     * @internal
+     */
+    protected setInitialFocus(): void;
     /**
      * Handles the updated lifecycle event.
      *
@@ -85,7 +111,7 @@ declare class ListBox extends ListBox_base {
      */
     private updateSelectedInChildOptions;
     /**
-     * Dispatch change event when an option is selected.
+     * Dispatch change event when selection changes.
      */
     private fireEvents;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/listbox/listbox.component.js

@@ -18,7 +18,10 @@ import { Component } from '../../models';
 import { ElementStore } from '../../utils/controllers/ElementStore';
 import styles from './listbox.styles';
 /**
- * listbox component presents a list of options and allows a user to select one of them.
+ * listbox component presents a list of options and allows a user to select one or more of them.
+ *
+ * When `multiple` is enabled, clicking/pressing Enter/Space on an option toggles its selection
+ * instead of replacing the current selection.
  *
  * Notes:
  * - This is a standalone listbox component. Select has its own mdc-selectlistbox component.
@@ -58,6 +61,11 @@ class ListBox extends ListNavigationMixin(CaptureDestroyEventForChildElement(Com
          * The value attribute is used to represent the last selected option's value in the listbox.
          */
         this.value = undefined;
+        /**
+         * When true, multiple options can be selected.
+         * @default false
+         */
+        this.multiple = false;
         /** @internal */
         this.itemsStore = new ElementStore(this, {
             isValidItem: this.isValidItem,
@@ -85,11 +93,20 @@ class ListBox extends ListNavigationMixin(CaptureDestroyEventForChildElement(Com
                 this.itemsStore.delete(item);
                 break;
             case 'selected':
-                // When selection changed on the option
-                this.setSelectedOption(item, false, false);
+                if (this.multiple) {
+                    this.syncValueToFirstSelected();
+                }
+                else {
+                    this.setSelectedOption(item, false, false);
+                }
                 break;
             case 'unselected':
-                this.handleNoSelection();
+                if (this.multiple) {
+                    this.syncValueToFirstSelected();
+                }
+                else {
+                    this.handleNoSelection();
+                }
                 break;
             default:
                 break;
@@ -117,21 +134,82 @@ class ListBox extends ListNavigationMixin(CaptureDestroyEventForChildElement(Com
     /** @internal */
     handleClick(event) {
         const target = event.target;
-        if (this.isValidItem(target)) {
-            this.setSelectedOption(target);
+        if (!this.isValidItem(target))
+            return;
+        const option = target;
+        if (this.multiple) {
+            this.toggleOptionSelection(option);
+        }
+        else {
+            this.setSelectedOption(option);
         }
     }
+    /**
+     * Toggles the selection state of an option (for multiselect mode).
+     * @internal
+     */
+    toggleOptionSelection(option) {
+        if (option.disabled || option.softDisabled)
+            return;
+        const isCurrentlySelected = option.hasAttribute('selected');
+        option.toggleAttribute('selected', !isCurrentlySelected);
+        this.syncValueToFirstSelected();
+        this.fireEvents();
+    }
     /** @internal */
     getFirstSelectedOption() {
         return this.itemsStore.items.find(el => el.matches('[selected]'));
     }
+    /**
+     * Syncs value and selectedOption to reflect the first selected option (when multiple)
+     * @internal
+     */
+    syncValueToFirstSelected() {
+        const firstSelected = this.getFirstSelectedOption();
+        this.value = firstSelected === null || firstSelected === void 0 ? void 0 : firstSelected.value;
+        this.selectedOption = firstSelected !== null && firstSelected !== void 0 ? firstSelected : null;
+    }
+    /** @internal */
+    getSelectedValues() {
+        return this.itemsStore.items.reduce((acc, option) => {
+            const { value } = option;
+            if (option.hasAttribute('selected') && value !== undefined) {
+                acc.push(value);
+            }
+            return acc;
+        }, []);
+    }
+    /**
+     * Override to focus the first selected option per W3C APG.
+     * This applies to both single-select and multi-select listboxes.
+     * @internal
+     */
+    setInitialFocus() {
+        const firstSelected = this.getFirstSelectedOption();
+        if (firstSelected) {
+            const index = this.itemsStore.items.indexOf(firstSelected);
+            if (index !== -1) {
+                this.resetTabIndexAndSetFocus(index, undefined, false);
+                return;
+            }
+        }
+        super.setInitialFocus();
+    }
     /**
      * Handles the updated lifecycle event.
      *
      * @param changedProperties - The properties that have changed since the last update.
      */
     updated(changedProperties) {
-        if (changedProperties.has('value')) {
+        if (changedProperties.has('multiple')) {
+            if (this.multiple) {
+                this.setAttribute('aria-multiselectable', 'true');
+            }
+            else {
+                this.removeAttribute('aria-multiselectable');
+            }
+        }
+        if (changedProperties.has('value') && !this.multiple) {
             const newSelectedOption = this.itemsStore.items.find(option => option.value === this.value);
             if (newSelectedOption) {
                 this.setSelectedOption(newSelectedOption, false);
@@ -171,12 +249,17 @@ class ListBox extends ListNavigationMixin(CaptureDestroyEventForChildElement(Com
         selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.toggleAttribute('selected', true);
     }
     /**
-     * Dispatch change event when an option is selected.
+     * Dispatch change event when selection changes.
      */
     fireEvents() {
-        if (this.selectedOption) {
-            this.dispatchEvent(new Event('change', { composed: true, bubbles: true }));
-        }
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+                value: this.value,
+                selectedValues: this.getSelectedValues(),
+            },
+            composed: true,
+            bubbles: true,
+        }));
     }
     render() {
         return html `<slot part="container"></slot>`;
@@ -191,6 +274,10 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", Object)
 ], ListBox.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], ListBox.prototype, "multiple", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)

package/dist/components/listbox/listbox.types.d.ts

@@ -1,6 +1,10 @@
-import { OverrideEventTarget } from '../../utils/types';
+import type { TypedCustomEvent } from '../../utils/types';
 import type ListBox from './listbox.component';
-export type ListBoxChangeEvent = OverrideEventTarget<Event, ListBox>;
+export interface ListBoxChangeEventDetail {
+    value: string | undefined;
+    selectedValues: string[];
+}
+export type ListBoxChangeEvent = TypedCustomEvent<ListBox, ListBoxChangeEventDetail>;
 interface Events {
     onChangeEvent: ListBoxChangeEvent;
 }

package/dist/components/radio/radio.component.d.ts

@@ -31,9 +31,14 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
  *
  * ## Styling
  *
- * Use the `static-radio` part to apply custom styles to the radio visual element.
+ * Use the `radio-indicator` part to apply custom styles to the radio visual element.
  * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.
  *
+ * The `indicator` slot allows replacing the default radio circle with a custom element.
+ * When a custom indicator is slotted, the component automatically adds the `mdc-focus-ring`
+ * class to the host element. This shifts the focus ring from the default static radio to the
+ * entire host element, ensuring keyboard focus remains visible.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-text
@@ -48,7 +53,7 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
- * @csspart static-radio - The staticradio that provides the visual radio appearance.
+ * @csspart radio-indicator - The staticradio that provides the visual radio appearance.
  *
  * @slot indicator - Slot for the radio indicator element. If not provided, a default styled radio will be rendered.
  * @slot label - Slot for the label of the radio.
@@ -133,6 +138,15 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
      */
     private updateAriaLabel;
     setValidity(): void;
+    /**
+     * Handles the slotchange event on the indicator slot.
+     * Adds the `mdc-focus-ring` class to the host when a custom indicator
+     * is slotted, so the focus ring shifts from the default static radio
+     * to the entire host element.
+     *
+     * @internal
+     */
+    private handleIndicatorSlotChange;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/radio/radio.component.js

@@ -46,9 +46,14 @@ import styles from './radio.styles';
  *
  * ## Styling
  *
- * Use the `static-radio` part to apply custom styles to the radio visual element.
+ * Use the `radio-indicator` part to apply custom styles to the radio visual element.
  * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.
  *
+ * The `indicator` slot allows replacing the default radio circle with a custom element.
+ * When a custom indicator is slotted, the component automatically adds the `mdc-focus-ring`
+ * class to the host element. This shifts the focus ring from the default static radio to the
+ * entire host element, ensuring keyboard focus remains visible.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-text
@@ -63,7 +68,7 @@ import styles from './radio.styles';
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
- * @csspart static-radio - The staticradio that provides the visual radio appearance.
+ * @csspart radio-indicator - The staticradio that provides the visual radio appearance.
  *
  * @slot indicator - Slot for the radio indicator element. If not provided, a default styled radio will be rendered.
  * @slot label - Slot for the label of the radio.
@@ -317,9 +322,22 @@ class Radio extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
         }
         this.internals.setValidity({});
     }
+    /**
+     * Handles the slotchange event on the indicator slot.
+     * Adds the `mdc-focus-ring` class to the host when a custom indicator
+     * is slotted, so the focus ring shifts from the default static radio
+     * to the entire host element.
+     *
+     * @internal
+     */
+    handleIndicatorSlotChange(event) {
+        const slot = event.target;
+        const assignedNodes = slot.assignedNodes({ flatten: true }).filter(node => node.nodeType === Node.ELEMENT_NODE);
+        this.classList.toggle('mdc-focus-ring', assignedNodes.length > 0);
+    }
     render() {
         return html `
-      <slot name="indicator">
+      <slot name="indicator" @slotchange=${this.handleIndicatorSlotChange}>
         <mdc-staticradio
           part="radio-indicator"
           role="presentation"

package/dist/components/radio/radio.styles.js

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import { focusRingBoxShadow, hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
+import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
 const styles = [
     hostFitContentStyles,
     css `
@@ -56,25 +56,13 @@ const styles = [
       outline: none;
     }
 
-    :host(:focus-visible)::part(radio-indicator) {
-      outline: none;
-    }
-    :host([disabled]:focus) {
-      box-shadow: none;
-    }
-
-    :host(:focus-within)::part(radio-indicator) {
-      position: relative;
-      box-shadow: ${focusRingBoxShadow};
-    }
-
     /* High Contrast Mode */
     @media (forced-colors: active) {
-      :host(:focus-visible)::part(radio-indicator) {
+      :host(:focus-within)::part(radio-indicator) {
         outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
       }
     }
   `,
-    ...hostFocusRingStyles(true),
+    ...hostFocusRingStyles(true, 'parent-to-child'),
 ];
 export default styles;

package/dist/custom-elements.json

@@ -23217,7 +23217,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "listbox component presents a list of options and allows a user to select one of them.\n\nNotes:\n- This is a standalone listbox component. Select has its own mdc-selectlistbox component.\n- this component has name and value attributes and also emits change event,\n  but it is not a form control (yet).",
+          "description": "listbox component presents a list of options and allows a user to select one or more of them.\n\nWhen `multiple` is enabled, clicking/pressing Enter/Space on an option toggles its selection\ninstead of replacing the current selection.\n\nNotes:\n- This is a standalone listbox component. Select has its own mdc-selectlistbox component.\n- this component has name and value attributes and also emits change event,\n  but it is not a form control (yet).",
           "name": "ListBox",
           "cssProperties": [
             {
@@ -23247,7 +23247,7 @@
                   "text": "void"
                 }
               },
-              "description": "Dispatch change event when an option is selected."
+              "description": "Dispatch change event when selection changes."
             },
             {
               "kind": "method",
@@ -23273,6 +23273,17 @@
                 "module": "utils/mixins/ListNavigationMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, multiple options can be selected.",
+              "attribute": "multiple",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "name",
@@ -23436,7 +23447,7 @@
             {
               "name": "change",
               "type": {
-                "text": "Event"
+                "text": "CustomEvent"
               },
               "description": "(React: onChange) This event is emitted when the selected item changed",
               "reactName": "onChange"
@@ -23460,6 +23471,15 @@
               "default": "undefined",
               "description": "The value attribute is used to represent the last selected option's value in the listbox.",
               "fieldName": "value"
+            },
+            {
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, multiple options can be selected.",
+              "fieldName": "multiple"
             }
           ],
           "mixins": [
@@ -23477,7 +23497,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-listbox",
-          "jsDoc": "/**\n * listbox component presents a list of options and allows a user to select one of them.\n *\n * Notes:\n * - This is a standalone listbox component. Select has its own mdc-selectlistbox component.\n * - this component has name and value attributes and also emits change event,\n *   but it is not a form control (yet).\n *\n * @dependency mdc-list\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-option\n * @dependency mdc-optgroup\n *\n * @tagname mdc-listbox\n *\n * @cssproperty --mdc-listbox-max-height - max height of the listbox\n *\n * @slot default - This is a default/unnamed slot, where options and optgroups are placed\n *\n * @csspart container - The container of the listbox\n *\n * @event change - (React: onChange) This event is emitted when the selected item changed\n */",
+          "jsDoc": "/**\n * listbox component presents a list of options and allows a user to select one or more of them.\n *\n * When `multiple` is enabled, clicking/pressing Enter/Space on an option toggles its selection\n * instead of replacing the current selection.\n *\n * Notes:\n * - This is a standalone listbox component. Select has its own mdc-selectlistbox component.\n * - this component has name and value attributes and also emits change event,\n *   but it is not a form control (yet).\n *\n * @dependency mdc-list\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-option\n * @dependency mdc-optgroup\n *\n * @tagname mdc-listbox\n *\n * @cssproperty --mdc-listbox-max-height - max height of the listbox\n *\n * @slot default - This is a default/unnamed slot, where options and optgroups are placed\n *\n * @csspart container - The container of the listbox\n *\n * @event change - (React: onChange) This event is emitted when the selected item changed\n */",
           "customElement": true
         }
       ],
@@ -36486,7 +36506,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The Radio component allows users to select a single option from a group of mutually exclusive choices.\nUnlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected\nat a time within the same group. These are commonly used in forms, surveys, and settings where users\nneed to make a single selection from multiple options.\n\nTo create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons\nshare the same `name` attribute.\n\n## Validation\n\nRadio component support native form validation. But it does not have default validation message.\nAlso, `required` attribute does not render indicator (red asterisk) for the radio component.\n\nThe recommended way to show validation message for radio groups is to wrap the `mdc-radio` with `mdc-radiogroup`\nand set the `help-text` of the `mdc-radiogroup` based on its validation state.\n\nAlternatively you can also set the `validation-message` attribute of the `mdc-radio`. This message will appear\nin a native tooltip when the radio is checked and invalid.\n\n## Accessibility\n\n- Provide clear labels that describe each option\n- Use `data-aria-label` when a visual label is not present\n- Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form\n- Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component\n\n## Styling\n\nUse the `static-radio` part to apply custom styles to the radio visual element.\nThis part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.",
+          "description": "The Radio component allows users to select a single option from a group of mutually exclusive choices.\nUnlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected\nat a time within the same group. These are commonly used in forms, surveys, and settings where users\nneed to make a single selection from multiple options.\n\nTo create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons\nshare the same `name` attribute.\n\n## Validation\n\nRadio component support native form validation. But it does not have default validation message.\nAlso, `required` attribute does not render indicator (red asterisk) for the radio component.\n\nThe recommended way to show validation message for radio groups is to wrap the `mdc-radio` with `mdc-radiogroup`\nand set the `help-text` of the `mdc-radiogroup` based on its validation state.\n\nAlternatively you can also set the `validation-message` attribute of the `mdc-radio`. This message will appear\nin a native tooltip when the radio is checked and invalid.\n\n## Accessibility\n\n- Provide clear labels that describe each option\n- Use `data-aria-label` when a visual label is not present\n- Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form\n- Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component\n\n## Styling\n\nUse the `radio-indicator` part to apply custom styles to the radio visual element.\nThis part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.\n\nThe `indicator` slot allows replacing the default radio circle with a custom element.\nWhen a custom indicator is slotted, the component automatically adds the `mdc-focus-ring`\nclass to the host element. This shifts the focus ring from the default static radio to the\nentire host element, ensuring keyboard focus remains visible.",
           "name": "Radio",
           "cssParts": [
             {
@@ -36507,7 +36527,7 @@
             },
             {
               "description": "The staticradio that provides the visual radio appearance.",
-              "name": "static-radio"
+              "name": "radio-indicator"
             },
             {
               "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
@@ -37231,7 +37251,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-radio",
-          "jsDoc": "/**\n * The Radio component allows users to select a single option from a group of mutually exclusive choices.\n * Unlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected\n * at a time within the same group. These are commonly used in forms, surveys, and settings where users\n * need to make a single selection from multiple options.\n *\n * To create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons\n * share the same `name` attribute.\n *\n * ## Validation\n *\n * Radio component support native form validation. But it does not have default validation message.\n * Also, `required` attribute does not render indicator (red asterisk) for the radio component.\n *\n * The recommended way to show validation message for radio groups is to wrap the `mdc-radio` with `mdc-radiogroup`\n * and set the `help-text` of the `mdc-radiogroup` based on its validation state.\n *\n * Alternatively you can also set the `validation-message` attribute of the `mdc-radio`. This message will appear\n * in a native tooltip when the radio is checked and invalid.\n *\n * ## Accessibility\n *\n * - Provide clear labels that describe each option\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form\n * - Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component\n *\n * ## Styling\n *\n * Use the `static-radio` part to apply custom styles to the radio visual element.\n * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event input - (React: onInput) Event that gets dispatched when the radio state changes (before the change event).\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes (after the input event).\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart static-radio - The staticradio that provides the visual radio appearance.\n *\n * @slot indicator - Slot for the radio indicator element. If not provided, a default styled radio will be rendered.\n * @slot label - Slot for the label of the radio.\n */",
+          "jsDoc": "/**\n * The Radio component allows users to select a single option from a group of mutually exclusive choices.\n * Unlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected\n * at a time within the same group. These are commonly used in forms, surveys, and settings where users\n * need to make a single selection from multiple options.\n *\n * To create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons\n * share the same `name` attribute.\n *\n * ## Validation\n *\n * Radio component support native form validation. But it does not have default validation message.\n * Also, `required` attribute does not render indicator (red asterisk) for the radio component.\n *\n * The recommended way to show validation message for radio groups is to wrap the `mdc-radio` with `mdc-radiogroup`\n * and set the `help-text` of the `mdc-radiogroup` based on its validation state.\n *\n * Alternatively you can also set the `validation-message` attribute of the `mdc-radio`. This message will appear\n * in a native tooltip when the radio is checked and invalid.\n *\n * ## Accessibility\n *\n * - Provide clear labels that describe each option\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form\n * - Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component\n *\n * ## Styling\n *\n * Use the `radio-indicator` part to apply custom styles to the radio visual element.\n * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.\n *\n * The `indicator` slot allows replacing the default radio circle with a custom element.\n * When a custom indicator is slotted, the component automatically adds the `mdc-focus-ring`\n * class to the host element. This shifts the focus ring from the default static radio to the\n * entire host element, ensuring keyboard focus remains visible.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event input - (React: onInput) Event that gets dispatched when the radio state changes (before the change event).\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes (after the input event).\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart radio-indicator - The staticradio that provides the visual radio appearance.\n *\n * @slot indicator - Slot for the radio indicator element. If not provided, a default styled radio will be rendered.\n * @slot label - Slot for the label of the radio.\n */",
           "customElement": true,
           "cssProperties": [
             {

package/dist/index.d.ts

@@ -118,6 +118,7 @@ import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
 import type { TimePickerChangeEvent, TimePickerInputEvent } from './components/timepicker/timepicker.types';
 import type { DatePickerChangeEvent, DatePickerInputEvent } from './components/datepicker/datepicker.types';
 import type { CalendarDateSelectedEvent, CalendarMonthChangedEvent } from './components/calendar/calendar.types';
+import type { ListBoxChangeEvent } from './components/listbox/listbox.types';
 export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, };
-export type { AvatarSize, BadgeType, ChipColorType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, PresenceType, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, ToggleOnChangeEvent, CheckboxOnChangeEvent, LinkButtonSize, TimePickerChangeEvent, TimePickerInputEvent, DatePickerChangeEvent, DatePickerInputEvent, CalendarDateSelectedEvent, CalendarMonthChangedEvent, VerticaltablistChangeEvent, };
+export type { AvatarSize, BadgeType, ChipColorType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, PresenceType, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, ToggleOnChangeEvent, CheckboxOnChangeEvent, LinkButtonSize, TimePickerChangeEvent, TimePickerInputEvent, DatePickerChangeEvent, DatePickerInputEvent, CalendarDateSelectedEvent, CalendarMonthChangedEvent, VerticaltablistChangeEvent, ListBoxChangeEvent, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/react/listbox/index.d.ts

@@ -2,7 +2,10 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/listbox';
 import type { Events } from '../../components/listbox/listbox.types';
 /**
- * listbox component presents a list of options and allows a user to select one of them.
+ * listbox component presents a list of options and allows a user to select one or more of them.
+ *
+ * When `multiple` is enabled, clicking/pressing Enter/Space on an option toggles its selection
+ * instead of replacing the current selection.
  *
  * Notes:
  * - This is a standalone listbox component. Select has its own mdc-selectlistbox component.

package/dist/react/listbox/index.js

@@ -3,7 +3,10 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/listbox';
 import { TAG_NAME } from '../../components/listbox/listbox.constants';
 /**
- * listbox component presents a list of options and allows a user to select one of them.
+ * listbox component presents a list of options and allows a user to select one or more of them.
+ *
+ * When `multiple` is enabled, clicking/pressing Enter/Space on an option toggles its selection
+ * instead of replacing the current selection.
  *
  * Notes:
  * - This is a standalone listbox component. Select has its own mdc-selectlistbox component.

package/dist/react/radio/index.d.ts

@@ -30,9 +30,14 @@ import type { Events } from '../../components/radio/radio.types';
  *
  * ## Styling
  *
- * Use the `static-radio` part to apply custom styles to the radio visual element.
+ * Use the `radio-indicator` part to apply custom styles to the radio visual element.
  * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.
  *
+ * The `indicator` slot allows replacing the default radio circle with a custom element.
+ * When a custom indicator is slotted, the component automatically adds the `mdc-focus-ring`
+ * class to the host element. This shifts the focus ring from the default static radio to the
+ * entire host element, ensuring keyboard focus remains visible.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-text
@@ -47,7 +52,7 @@ import type { Events } from '../../components/radio/radio.types';
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
- * @csspart static-radio - The staticradio that provides the visual radio appearance.
+ * @csspart radio-indicator - The staticradio that provides the visual radio appearance.
  *
  * @slot indicator - Slot for the radio indicator element. If not provided, a default styled radio will be rendered.
  * @slot label - Slot for the label of the radio.

package/dist/react/radio/index.js

@@ -31,9 +31,14 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
  *
  * ## Styling
  *
- * Use the `static-radio` part to apply custom styles to the radio visual element.
+ * Use the `radio-indicator` part to apply custom styles to the radio visual element.
  * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.
  *
+ * The `indicator` slot allows replacing the default radio circle with a custom element.
+ * When a custom indicator is slotted, the component automatically adds the `mdc-focus-ring`
+ * class to the host element. This shifts the focus ring from the default static radio to the
+ * entire host element, ensuring keyboard focus remains visible.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-text
@@ -48,7 +53,7 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
- * @csspart static-radio - The staticradio that provides the visual radio appearance.
+ * @csspart radio-indicator - The staticradio that provides the visual radio appearance.
  *
  * @slot indicator - Slot for the radio indicator element. If not provided, a default styled radio will be rendered.
  * @slot label - Slot for the label of the radio.

package/dist/utils/styles/index.d.ts

@@ -1,5 +1,6 @@
+type FocusRingClassMode = 'focus-on-child' | 'parent-to-child';
 declare const hostFitContentStyles: import("lit").CSSResult;
 declare const baseHostStyleVariables: import("lit").CSSResult;
 declare const focusRingBoxShadow: import("lit").CSSResult;
-declare const hostFocusRingStyles: (applyFocusRingOnClass?: boolean) => import("lit").CSSResult[];
+declare const hostFocusRingStyles: (applyFocusRingOnClass?: boolean, classMode?: FocusRingClassMode) => import("lit").CSSResult[];
 export { hostFitContentStyles, hostFocusRingStyles, baseHostStyleVariables, focusRingBoxShadow };

package/dist/utils/styles/index.js

@@ -26,8 +26,9 @@ const focusRingBoxShadow = css `0 0 0 var(--mdc-focus-ring-inner-width) var(--md
     0 0 0 var(--mdc-focus-ring-middle-width) var(--mdc-focus-ring-middle-color),
     0 0 0 var(--mdc-focus-ring-outer-width) var(--mdc-focus-ring-outer-color)
   `;
-const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
-    if (applyFocusRingOnClass) {
+const hostFocusRingStyles = (applyFocusRingOnClass = false, classMode = 'focus-on-child') => {
+    if (applyFocusRingOnClass && classMode === 'focus-on-child') {
+        // the child is focused, the child gets the visual focus ring:
         return [
             baseHostStyleVariables,
             css `
@@ -38,6 +39,7 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
           box-shadow: none;
         }
         /* Add focus ring to parent when child is focused. The parent element must have class name mdc-focus-ring */
+        /* .mdc-focus-ring:focus-visible, */
         .mdc-focus-ring:focus-within {
           position: relative;
           box-shadow: ${focusRingBoxShadow};
@@ -57,6 +59,31 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
       `,
         ];
     }
+    if (applyFocusRingOnClass && classMode === 'parent-to-child') {
+        // the parent is focused, the child gets the visual focus ring:
+        return [
+            baseHostStyleVariables,
+            css `
+        :host([disabled]:focus) {
+          box-shadow: none;
+        }
+        :host(.mdc-focus-ring:focus-visible),
+        :host(:focus-visible) .mdc-focus-ring {
+          outline: none;
+          position: relative;
+          box-shadow: ${focusRingBoxShadow};
+        }
+        /* High Contrast Mode */
+        @media (forced-colors: active) {
+          :host(.mdc-focus-ring:focus-visible),
+          :host(:focus-visible) .mdc-focus-ring {
+            outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
+          }
+        }
+      `,
+        ];
+    }
+    // the parent is focused, the parent gets the visual focus ring:
     return [
         baseHostStyleVariables,
         css `

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.133.13",
+  "version": "0.133.15",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"