@momentum-design/components 0.129.37 → 0.129.39

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

@@ -2,23 +2,33 @@ import { CSSResult } from 'lit';
 import { Component } from '../../models';
 declare const StaticRadio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
- * 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.
+ * The StaticRadio component is a decorative, non-interactive radio button used for visual
+ * presentation in read-only scenarios. Unlike the interactive `mdc-radio`, it does not
+ * handle user interactions or form submissions.
  *
- * This component supports four display states: checked, disabled, readonly, and soft-disabled.
+ * This component supports multiple visual states: checked, disabled, readonly, and soft-disabled.
+ *
+ * ## When to use
+ * Use StaticRadio to display radio button states in read-only contexts such as summary views,
+ * confirmation screens, or when showing historical form data. For interactive radio buttons, use
+ * `mdc-radio` instead.
+ *
+ * ## Accessibility
+ * - StaticRadio is decorative and non-interactive by design
+ * - Always pair with descriptive text labels in the default slot
+ * - Do not use this as a replacement for interactive radio buttons in forms
  *
  * @tagname mdc-staticradio
  *
- * @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.
+ * @cssproperty --mdc-staticradio-inner-circle-size - Size of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-size - Size of the outer circle border.
+ * @cssproperty --mdc-staticradio-inner-circle-background-color - Background color of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-border-color - Border color of the outer circle.
+ * @cssproperty --mdc-staticradio-outer-circle-background-color - Background color of the outer circle.
  *
- * @csspart radio-icon - The radio icon element
+ * @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 class StaticRadio extends StaticRadio_base {
     /**

package/dist/components/staticradio/staticradio.component.js

@@ -13,23 +13,33 @@ import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import styles from './staticradio.styles';
 /**
- * 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.
+ * The StaticRadio component is a decorative, non-interactive radio button used for visual
+ * presentation in read-only scenarios. Unlike the interactive `mdc-radio`, it does not
+ * handle user interactions or form submissions.
  *
- * This component supports four display states: checked, disabled, readonly, and soft-disabled.
+ * This component supports multiple visual states: checked, disabled, readonly, and soft-disabled.
+ *
+ * ## When to use
+ * Use StaticRadio to display radio button states in read-only contexts such as summary views,
+ * confirmation screens, or when showing historical form data. For interactive radio buttons, use
+ * `mdc-radio` instead.
+ *
+ * ## Accessibility
+ * - StaticRadio is decorative and non-interactive by design
+ * - Always pair with descriptive text labels in the default slot
+ * - Do not use this as a replacement for interactive radio buttons in forms
  *
  * @tagname mdc-staticradio
  *
- * @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.
+ * @cssproperty --mdc-staticradio-inner-circle-size - Size of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-size - Size of the outer circle border.
+ * @cssproperty --mdc-staticradio-inner-circle-background-color - Background color of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-border-color - Border color of the outer circle.
+ * @cssproperty --mdc-staticradio-outer-circle-background-color - Background color of the outer circle.
  *
- * @csspart radio-icon - The radio icon element
+ * @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.
  */
 class StaticRadio extends DisabledMixin(Component) {
     constructor() {

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

@@ -3,26 +3,39 @@ import { Component } from '../../models';
 import type { ToggleSize } from './statictoggle.types';
 declare const StaticToggle_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
- * The StaticToggle is a decorative component that visually represents a toggle switch without interactive functionality.
- * It is primarily used for display purposes or as a building block within custom interactive components.
- * This component shares the same visual styling as the interactive `mdc-toggle` component.
+ * The StaticToggle component is a decorative, non-interactive toggle switch used for visual
+ * presentation. It shares the same styling as the interactive `mdc-toggle` component but does
+ * not provide user interaction functionality.
  *
- * @dependency mdc-icon
+ * This component supports multiple visual states: checked, disabled, readonly, soft-disabled,
+ * and size variations (default, compact).
+ *
+ * ## When to use
+ * Use StaticToggle to display toggle states in read-only contexts such as summary views,
+ * confirmation screens, or as a building block within custom interactive components. For
+ * interactive toggles, use `mdc-toggle` instead.
+ *
+ * ## Accessibility
+ * - StaticToggle is decorative and non-interactive by design
+ * - When used within parent components, ensure proper ARIA attributes are provided by the parent
+ * - Do not use this as a replacement for interactive toggles in forms
  *
  * @tagname mdc-statictoggle
  *
- * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).
+ * @dependency mdc-icon
  *
- * @cssproperty --mdc-statictoggle-width - The width of the static toggle.
- * @cssproperty --mdc-statictoggle-height - The height of the static toggle.
- * @cssproperty --mdc-statictoggle-border-radius - The border radius of the static toggle.
- * @cssproperty --mdc-statictoggle-border-color - The border color of the static toggle.
- * @cssproperty --mdc-statictoggle-background-color - The background color of the static toggle.
- * @cssproperty --mdc-statictoggle-icon-color - The icon color of the static toggle.
- * @cssproperty --mdc-statictoggle-icon-background-color - The icon background color of the static toggle.
+ * @cssproperty --mdc-statictoggle-width - Width of the static toggle.
+ * @cssproperty --mdc-statictoggle-height - Height of the static toggle.
+ * @cssproperty --mdc-statictoggle-border-radius - Border radius of the static toggle.
+ * @cssproperty --mdc-statictoggle-border-color - Border color of the static toggle.
+ * @cssproperty --mdc-statictoggle-background-color - Background color of the static toggle.
+ * @cssproperty --mdc-statictoggle-icon-color - Icon color of the static toggle.
+ * @cssproperty --mdc-statictoggle-icon-background-color - Icon background color of the static toggle.
  *
  * @csspart slider - The slider part of the toggle.
  * @csspart toggle-icon - The icon part of the toggle.
+ *
+ * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).
  */
 declare class StaticToggle extends StaticToggle_base {
     /**

package/dist/components/statictoggle/statictoggle.component.js

@@ -14,26 +14,39 @@ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { DEFAULTS, ICON_NAME, ICON_SIZE_IN_REM } from './statictoggle.constants';
 import styles from './statictoggle.styles';
 /**
- * The StaticToggle is a decorative component that visually represents a toggle switch without interactive functionality.
- * It is primarily used for display purposes or as a building block within custom interactive components.
- * This component shares the same visual styling as the interactive `mdc-toggle` component.
+ * The StaticToggle component is a decorative, non-interactive toggle switch used for visual
+ * presentation. It shares the same styling as the interactive `mdc-toggle` component but does
+ * not provide user interaction functionality.
  *
- * @dependency mdc-icon
+ * This component supports multiple visual states: checked, disabled, readonly, soft-disabled,
+ * and size variations (default, compact).
+ *
+ * ## When to use
+ * Use StaticToggle to display toggle states in read-only contexts such as summary views,
+ * confirmation screens, or as a building block within custom interactive components. For
+ * interactive toggles, use `mdc-toggle` instead.
+ *
+ * ## Accessibility
+ * - StaticToggle is decorative and non-interactive by design
+ * - When used within parent components, ensure proper ARIA attributes are provided by the parent
+ * - Do not use this as a replacement for interactive toggles in forms
  *
  * @tagname mdc-statictoggle
  *
- * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).
+ * @dependency mdc-icon
  *
- * @cssproperty --mdc-statictoggle-width - The width of the static toggle.
- * @cssproperty --mdc-statictoggle-height - The height of the static toggle.
- * @cssproperty --mdc-statictoggle-border-radius - The border radius of the static toggle.
- * @cssproperty --mdc-statictoggle-border-color - The border color of the static toggle.
- * @cssproperty --mdc-statictoggle-background-color - The background color of the static toggle.
- * @cssproperty --mdc-statictoggle-icon-color - The icon color of the static toggle.
- * @cssproperty --mdc-statictoggle-icon-background-color - The icon background color of the static toggle.
+ * @cssproperty --mdc-statictoggle-width - Width of the static toggle.
+ * @cssproperty --mdc-statictoggle-height - Height of the static toggle.
+ * @cssproperty --mdc-statictoggle-border-radius - Border radius of the static toggle.
+ * @cssproperty --mdc-statictoggle-border-color - Border color of the static toggle.
+ * @cssproperty --mdc-statictoggle-background-color - Background color of the static toggle.
+ * @cssproperty --mdc-statictoggle-icon-color - Icon color of the static toggle.
+ * @cssproperty --mdc-statictoggle-icon-background-color - Icon background color of the static toggle.
  *
  * @csspart slider - The slider part of the toggle.
  * @csspart toggle-icon - The icon part of the toggle.
+ *
+ * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).
  */
 class StaticToggle extends DisabledMixin(Component) {
     constructor() {