@momentum-design/components 0.129.22 → 0.129.24

package/dist/index.d.ts

@@ -104,6 +104,7 @@ import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES }
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
 import type { TablistChangeEvent } from './components/tablist/tablist.types';
+import type { ToggleOnChangeEvent } from './components/toggle/toggle.types';
 export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, 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, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
-export type { BadgeType, ChipColorType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, };
+export type { BadgeType, ChipColorType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, ToggleOnChangeEvent, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

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

@@ -1,27 +1,25 @@
 import Component from '../../components/statictoggle';
 /**
- * This is a decorative component that is styled to look as a toggle. <br/>
- * It has 5 properties - checked, size, disabled, readonly and soft-disabled. <br/>
- * We are using the same styling that has been created for the `mdc-toggle` 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.
  *
  * @dependency mdc-icon
  *
  * @tagname mdc-statictoggle
  *
- * @slot default - This is a default/unnamed slot
+ * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).
  *
- * @cssproperty --mdc-toggle-width - The width of the toggle
- * @cssproperty --mdc-toggle-height - The height of the toggle
- * @cssproperty --mdc-toggle-border-radius - The border radius of the toggle
- * @cssproperty --mdc-toggle-border-color - The border color of the toggle
- * @cssproperty --mdc-toggle-background-color - The background color of the toggle
- * @cssproperty --mdc-toggle-icon-color - The icon color of the toggle
- * @cssproperty --mdc-toggle-icon-background-color - The icon background color of the toggle
+ * @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.
  *
- * @csspart slider - The slider part of the toggle
- * @csspart toggle-icon - The icon part of the toggle
- *
- * @slot - Default slot for adding label text.
+ * @csspart slider - The slider part of the toggle.
+ * @csspart toggle-icon - The icon part of the toggle.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/statictoggle/index.js

@@ -3,28 +3,26 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/statictoggle';
 import { TAG_NAME } from '../../components/statictoggle/statictoggle.constants';
 /**
- * This is a decorative component that is styled to look as a toggle. <br/>
- * It has 5 properties - checked, size, disabled, readonly and soft-disabled. <br/>
- * We are using the same styling that has been created for the `mdc-toggle` 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.
  *
  * @dependency mdc-icon
  *
  * @tagname mdc-statictoggle
  *
- * @slot default - This is a default/unnamed slot
+ * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).
  *
- * @cssproperty --mdc-toggle-width - The width of the toggle
- * @cssproperty --mdc-toggle-height - The height of the toggle
- * @cssproperty --mdc-toggle-border-radius - The border radius of the toggle
- * @cssproperty --mdc-toggle-border-color - The border color of the toggle
- * @cssproperty --mdc-toggle-background-color - The background color of the toggle
- * @cssproperty --mdc-toggle-icon-color - The icon color of the toggle
- * @cssproperty --mdc-toggle-icon-background-color - The icon background color of the toggle
+ * @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.
  *
- * @csspart slider - The slider part of the toggle
- * @csspart toggle-icon - The icon part of the toggle
- *
- * @slot - Default slot for adding label text.
+ * @csspart slider - The slider part of the toggle.
+ * @csspart toggle-icon - The icon part of the toggle.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -2,14 +2,25 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/toggle';
 import type { Events } from '../../components/toggle/toggle.types';
 /**
- * Toggle Component is an interactive control used to switch between two mutually exclusive options,
- * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections
+ * The Toggle component is an interactive control used to switch between two mutually exclusive states,
+ * such as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections
  * where users need to enable or disable a feature.
- * It contains an optional label and an optional helper text.
  *
- * To create a group of toggles, use the FormFieldGroup component.
+ * To create a group of toggles, use the `mdc-formfieldgroup` component.
  *
- * Note: It internally renders a checkbox styled as a toggle switch.
+ * **Note:** This component internally renders a native checkbox input element 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.
+ *
+ * ## Accessibility
+ * - Provide clear labels that describe what the toggle controls
+ * - Use `data-aria-label` when a visual label is not present
+ * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form
+ *
+ * ## Styling
+ * Use the `static-toggle` part to apply custom styles to the toggle switch visual element.
+ * This part exposes the underlying [StaticToggle](?path=/docs/components-decorator-statictoggle--docs) component for advanced styling.
  *
  * @dependency mdc-button
  * @dependency mdc-icon
@@ -22,14 +33,6 @@ import type { Events } from '../../components/toggle/toggle.types';
  * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
  *
- * @cssproperty --mdc-toggle-width - The width of the toggle
- * @cssproperty --mdc-toggle-height - The height of the toggle
- * @cssproperty --mdc-toggle-border-radius - The border radius of the toggle
- * @cssproperty --mdc-toggle-border-color - The border color of the toggle
- * @cssproperty --mdc-toggle-background-color - The background color of the toggle
- * @cssproperty --mdc-toggle-icon-color - The icon color of the toggle
- * @cssproperty --mdc-toggle-icon-background-color - The icon background color of the toggle
- *
  * @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.
@@ -38,8 +41,8 @@ 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 static-toggle - The static-toggle element that wraps the toggle input.
- * @csspart toggle-input - The native checkbox input element styled as a toggle switch.
+ * @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.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;

package/dist/react/toggle/index.js

@@ -3,14 +3,25 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/toggle';
 import { TAG_NAME } from '../../components/toggle/toggle.constants';
 /**
- * Toggle Component is an interactive control used to switch between two mutually exclusive options,
- * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections
+ * The Toggle component is an interactive control used to switch between two mutually exclusive states,
+ * such as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections
  * where users need to enable or disable a feature.
- * It contains an optional label and an optional helper text.
  *
- * To create a group of toggles, use the FormFieldGroup component.
+ * To create a group of toggles, use the `mdc-formfieldgroup` component.
  *
- * Note: It internally renders a checkbox styled as a toggle switch.
+ * **Note:** This component internally renders a native checkbox input element 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.
+ *
+ * ## Accessibility
+ * - Provide clear labels that describe what the toggle controls
+ * - Use `data-aria-label` when a visual label is not present
+ * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form
+ *
+ * ## Styling
+ * Use the `static-toggle` part to apply custom styles to the toggle switch visual element.
+ * This part exposes the underlying [StaticToggle](?path=/docs/components-decorator-statictoggle--docs) component for advanced styling.
  *
  * @dependency mdc-button
  * @dependency mdc-icon
@@ -23,14 +34,6 @@ import { TAG_NAME } from '../../components/toggle/toggle.constants';
  * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
  *
- * @cssproperty --mdc-toggle-width - The width of the toggle
- * @cssproperty --mdc-toggle-height - The height of the toggle
- * @cssproperty --mdc-toggle-border-radius - The border radius of the toggle
- * @cssproperty --mdc-toggle-border-color - The border color of the toggle
- * @cssproperty --mdc-toggle-background-color - The background color of the toggle
- * @cssproperty --mdc-toggle-icon-color - The icon color of the toggle
- * @cssproperty --mdc-toggle-icon-background-color - The icon background color of the toggle
- *
  * @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.
@@ -39,8 +42,8 @@ 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 static-toggle - The static-toggle element that wraps the toggle input.
- * @csspart toggle-input - The native checkbox input element styled as a toggle switch.
+ * @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.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/package.json

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