@momentum-design/components 0.129.28 → 0.129.30

package/dist/react/radio/index.js

@@ -3,10 +3,29 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/radio';
 import { TAG_NAME } from '../../components/radio/radio.constants';
 /**
- * Radio allow users to select single options from a list or turn an item/feature on or off.
- * These are often used in forms, settings, and selection in lists.
+ * The Radio component allows users to select a single option from a group of mutually exclusive choices.
+ * Unlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected
+ * at a time within the same group. These are commonly used in forms, surveys, and settings where users
+ * need to make a single selection from multiple options.
  *
- * A radio component contains an optional label, optional info icon and an optional helper text.
+ * To create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons
+ * share the same `name` attribute.
+ *
+ * **Note:** This component internally renders a native radio input element with custom styling.
+ *
+ * ## When to use
+ * Use radio buttons when users must select exactly one option from a list of 2-5 choices. For longer lists,
+ * consider using a dropdown menu instead.
+ *
+ * ## Accessibility
+ * - Provide clear labels that describe each option
+ * - Use `data-aria-label` when a visual label is not present
+ * - Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form
+ * - Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component
+ *
+ * ## Styling
+ * Use the `static-radio` 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.
  *
  * @dependency mdc-button
  * @dependency mdc-icon
@@ -19,12 +38,6 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
  * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
  *
- * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
- * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle
- * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle
- * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle
- * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle
- *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
@@ -33,8 +46,9 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
- * @csspart radio-input - The native radio input element.
+ * @csspart radio-input - The native radio input element that provides the interactive functionality.
  * @csspart text-container - The container for the label and helper text elements.
+ * @csspart static-radio - The staticradio that provides the visual radio appearance.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -1,21 +1,22 @@
 import Component from '../../components/staticradio';
 /**
- * This is a decorative component that is styled to look as a radio.
- * It has 4 properties - checked, disabled, readonly and soft-disabled.
+ * StaticRadio is a decorative component styled as a radio button for visual presentation.
+ * Unlike the interactive `mdc-radio`, this component does not handle user interactions or form submissions.
+ * It is used purely for displaying radio button states in read-only scenarios.
  *
- * We are using the same styling that has been created for the `mdc-radio` component.
+ * This component supports four display states: checked, disabled, readonly, and soft-disabled.
  *
  * @tagname mdc-staticradio
  *
- * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
- * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle
- * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle
- * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle
- * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle
+ * @cssproperty --mdc-staticradio-inner-circle-size - The size of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-size - The size of the outer circle border.
+ * @cssproperty --mdc-staticradio-inner-circle-background-color - The background color of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-border-color - The border color of the outer circle.
+ * @cssproperty --mdc-staticradio-outer-circle-background-color - The background color of the outer circle.
  *
- * @csspart radio-icon - The radio icon.
+ * @csspart radio-icon - The radio icon element
  *
- * @slot - Default slot for the label of the radio.
+ * @slot - Default slot for the label of the radio
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/staticradio/index.js

@@ -3,22 +3,23 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/staticradio';
 import { TAG_NAME } from '../../components/staticradio/staticradio.constants';
 /**
- * This is a decorative component that is styled to look as a radio.
- * It has 4 properties - checked, disabled, readonly and soft-disabled.
+ * StaticRadio is a decorative component styled as a radio button for visual presentation.
+ * Unlike the interactive `mdc-radio`, this component does not handle user interactions or form submissions.
+ * It is used purely for displaying radio button states in read-only scenarios.
  *
- * We are using the same styling that has been created for the `mdc-radio` component.
+ * This component supports four display states: checked, disabled, readonly, and soft-disabled.
  *
  * @tagname mdc-staticradio
  *
- * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
- * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle
- * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle
- * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle
- * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle
+ * @cssproperty --mdc-staticradio-inner-circle-size - The size of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-size - The size of the outer circle border.
+ * @cssproperty --mdc-staticradio-inner-circle-background-color - The background color of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-border-color - The border color of the outer circle.
+ * @cssproperty --mdc-staticradio-outer-circle-background-color - The background color of the outer circle.
  *
- * @csspart radio-icon - The radio icon.
+ * @csspart radio-icon - The radio icon element
  *
- * @slot - Default slot for the label of the radio.
+ * @slot - Default slot for the label of the radio
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -8,7 +8,7 @@ import type { Events } from '../../components/toggle/toggle.types';
  *
  * To create a group of toggles, use the `mdc-formfieldgroup` component.
  *
- * **Note:** This component internally renders a native checkbox input element styled as a toggle switch.
+ * **Note:** This component internally renders a native checkbox input element with the `switch` role, styled as a toggle switch.
  *
  * ## When to use
  * Use toggles for binary choices where the change takes effect immediately, such as enabling/disabling settings or features.
@@ -41,8 +41,9 @@ import type { Events } from '../../components/toggle/toggle.types';
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-toggle - The statictoggle that provides the visual toggle switch appearance.
- * @csspart toggle-input - The native checkbox input element that provides the interactive functionality.
+ * @csspart toggle-input - The native input element with switch role that provides the interactive functionality.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;

package/dist/react/toggle/index.js

@@ -9,7 +9,7 @@ import { TAG_NAME } from '../../components/toggle/toggle.constants';
  *
  * To create a group of toggles, use the `mdc-formfieldgroup` component.
  *
- * **Note:** This component internally renders a native checkbox input element styled as a toggle switch.
+ * **Note:** This component internally renders a native checkbox input element with the `switch` role, styled as a toggle switch.
  *
  * ## When to use
  * Use toggles for binary choices where the change takes effect immediately, such as enabling/disabling settings or features.
@@ -42,8 +42,9 @@ import { TAG_NAME } from '../../components/toggle/toggle.constants';
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-toggle - The statictoggle that provides the visual toggle switch appearance.
- * @csspart toggle-input - The native checkbox input element that provides the interactive functionality.
+ * @csspart toggle-input - The native input element with switch role that provides the interactive functionality.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/utils/roles.d.ts

@@ -24,6 +24,7 @@ declare const ROLE: {
     readonly RADIO: "radio";
     readonly RADIOGROUP: "radiogroup";
     readonly REGION: "region";
+    readonly SWITCH: "switch";
     readonly TAB: "tab";
     readonly TABLIST: "tablist";
     readonly TOOLTIP: "tooltip";

package/dist/utils/roles.js

@@ -24,6 +24,7 @@ const ROLE = {
     RADIO: 'radio',
     RADIOGROUP: 'radiogroup',
     REGION: 'region',
+    SWITCH: 'switch',
     TAB: 'tab',
     TABLIST: 'tablist',
     TOOLTIP: 'tooltip',

package/package.json

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