@momentum-design/components 0.129.21 → 0.129.23

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/dist/utils/mixins/CardComponentMixin.js

@@ -36,12 +36,17 @@ export const CardComponentMixin = (superClass) => {
              */
             this.imageAlt = '';
             /**
-             * The variant of the card. It can either be set to 'border' or 'ghost'
+             * The variant of the card that represents the border styling.
+             * - `border`: Card with border (default)
+             * - `ghost`: Card without border
+             * - `promotional`: Card with promotional styling
              * @default 'border'
              */
             this.variant = DEFAULTS.VARIANT;
             /**
-             * The orientation of the card. It can either be set to 'vertical' or 'horizontal'
+             * The orientation of the card.
+             * - `vertical`: Card in vertical layout with min-width of 20rem (default)
+             * - `horizontal`: Card in horizontal layout with min-width of 40rem
              * @default 'vertical'
              */
             this.orientation = DEFAULTS.ORIENTATION;

package/package.json

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