@momentum-design/components 0.129.25 → 0.129.27

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

@@ -16,16 +16,11 @@ import type { Events as EventsInherited } from '../../components/dialog/dialog.t
  * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
  * or Escape is pressed).
  *
- * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
+ * ## Accessibility
+ * - You have to be explicitly set the following attributes:
+ *  * The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
+ *  * Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
  *
- * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
- * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
- *
- * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**
- * - Use `?visible=true/false` as an attribute instead of `visible=true/false`
- * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
- *
- * @dependency mdc-button
  * @dependency mdc-illustration
  * @dependency mdc-text
  *

package/dist/react/announcementdialog/index.js

@@ -17,16 +17,11 @@ import { TAG_NAME } from '../../components/announcementdialog/announcementdialog
  * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
  * or Escape is pressed).
  *
- * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
+ * ## Accessibility
+ * - You have to be explicitly set the following attributes:
+ *  * The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
+ *  * Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
  *
- * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
- * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
- *
- * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**
- * - Use `?visible=true/false` as an attribute instead of `visible=true/false`
- * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
- *
- * @dependency mdc-button
  * @dependency mdc-illustration
  * @dependency mdc-text
  *

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

@@ -2,12 +2,25 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/checkbox';
 import type { Events } from '../../components/checkbox/checkbox.types';
 /**
- * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
- * These are often used in forms, settings, and selections in lists.
+ * The Checkbox component allows users to select one or multiple options from a list, toggle features on/off,
+ * or indicate agreement in forms and settings. These are commonly used in forms, lists, and settings panels
+ * where users need to make selections or express preferences.
  *
- * A checkbox component contains an optional label and an optional helper text.
+ * To create a group of checkboxes, use the `mdc-formfieldgroup` component.
  *
- * To create a group of checkboxes, use the FormFieldGroup component.
+ * **Note:** This component internally renders a native checkbox input element with custom styling.
+ *
+ * ## When to use
+ * Use checkboxes when users can select multiple options from a list, or when a single checkbox represents a binary choice (e.g., agreeing to terms).
+ *
+ * ## Accessibility
+ * - Provide clear labels that describe what the checkbox 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-checkbox` part to apply custom styles to the checkbox visual element.
+ * This part exposes the underlying [StaticCheckbox](?path=/docs/components-decorator-staticcheckbox--docs) component for advanced styling.
  *
  * @dependency mdc-button
  * @dependency mdc-icon
@@ -20,26 +33,6 @@ import type { Events } from '../../components/checkbox/checkbox.types';
  * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  *
- * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
- * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
- * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
- * @cssproperty --mdc-label-font-size - Font size for the label text.
- * @cssproperty --mdc-label-font-weight - Font weight for the label text.
- * @cssproperty --mdc-label-line-height - Line height for the label text.
- * @cssproperty --mdc-label-color - Color for the label text.
- * @cssproperty --mdc-help-text-font-size - Font size for the help text.
- * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
- * @cssproperty --mdc-help-text-line-height - Line height for the help text.
- * @cssproperty --mdc-help-text-color - Color for the help text.
- * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.
- *
- * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
- * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
- * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
- * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
- *
  * @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.
@@ -48,9 +41,9 @@ import type { Events } from '../../components/checkbox/checkbox.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 checkbox-input - The native checkbox input element.
+ * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.
  * @csspart text-container - The container for the label and helper text elements.
- * @csspart static-checkbox - The static checkbox element.
+ * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;

package/dist/react/checkbox/index.js

@@ -3,12 +3,25 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/checkbox';
 import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
 /**
- * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
- * These are often used in forms, settings, and selections in lists.
+ * The Checkbox component allows users to select one or multiple options from a list, toggle features on/off,
+ * or indicate agreement in forms and settings. These are commonly used in forms, lists, and settings panels
+ * where users need to make selections or express preferences.
  *
- * A checkbox component contains an optional label and an optional helper text.
+ * To create a group of checkboxes, use the `mdc-formfieldgroup` component.
  *
- * To create a group of checkboxes, use the FormFieldGroup component.
+ * **Note:** This component internally renders a native checkbox input element with custom styling.
+ *
+ * ## When to use
+ * Use checkboxes when users can select multiple options from a list, or when a single checkbox represents a binary choice (e.g., agreeing to terms).
+ *
+ * ## Accessibility
+ * - Provide clear labels that describe what the checkbox 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-checkbox` part to apply custom styles to the checkbox visual element.
+ * This part exposes the underlying [StaticCheckbox](?path=/docs/components-decorator-staticcheckbox--docs) component for advanced styling.
  *
  * @dependency mdc-button
  * @dependency mdc-icon
@@ -21,26 +34,6 @@ import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
  * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  *
- * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
- * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
- * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
- * @cssproperty --mdc-label-font-size - Font size for the label text.
- * @cssproperty --mdc-label-font-weight - Font weight for the label text.
- * @cssproperty --mdc-label-line-height - Line height for the label text.
- * @cssproperty --mdc-label-color - Color for the label text.
- * @cssproperty --mdc-help-text-font-size - Font size for the help text.
- * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
- * @cssproperty --mdc-help-text-line-height - Line height for the help text.
- * @cssproperty --mdc-help-text-color - Color for the help text.
- * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.
- *
- * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
- * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
- * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
- * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
- *
  * @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.
@@ -49,9 +42,9 @@ import { TAG_NAME } from '../../components/checkbox/checkbox.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 checkbox-input - The native checkbox input element.
+ * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.
  * @csspart text-container - The container for the label and helper text elements.
- * @csspart static-checkbox - The static checkbox element.
+ * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -5,11 +5,11 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.
  * Consumers can wrap this component around a tooltip to provide additional context.
  *
- * It is recommended to keep the label text for the chip component concise and compact.
+ * It is recommended to keep the label text for the chip component concise and compact.<br/>
  * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,
  * including empty spaces to split words.
  *
- * This component is built by extending Buttonsimple.
+ * This component is built by extending `Buttonsimple`.
  *
  * @tagname mdc-chip
  *
@@ -19,15 +19,14 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * @cssproperty --mdc-chip-color - The color of the chip.
  * @cssproperty --mdc-chip-border-color - The border color of the chip.
  * @cssproperty --mdc-chip-background-color - The background color of the chip.
- * @cssproperty --mdc-button-height - Height for button size
  *
+ * @csspart icon - The icon part of the chip.
  * @csspart label - The label part of the chip.
  *
  * @event click - (React: onClick) This event is dispatched when the chip is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
  * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
- *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<EventsInherited["onClickEvent"]>;

package/dist/react/chip/index.js

@@ -6,11 +6,11 @@ import { TAG_NAME } from '../../components/chip/chip.constants';
  * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.
  * Consumers can wrap this component around a tooltip to provide additional context.
  *
- * It is recommended to keep the label text for the chip component concise and compact.
+ * It is recommended to keep the label text for the chip component concise and compact.<br/>
  * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,
  * including empty spaces to split words.
  *
- * This component is built by extending Buttonsimple.
+ * This component is built by extending `Buttonsimple`.
  *
  * @tagname mdc-chip
  *
@@ -20,15 +20,14 @@ import { TAG_NAME } from '../../components/chip/chip.constants';
  * @cssproperty --mdc-chip-color - The color of the chip.
  * @cssproperty --mdc-chip-border-color - The border color of the chip.
  * @cssproperty --mdc-chip-background-color - The background color of the chip.
- * @cssproperty --mdc-button-height - Height for button size
  *
+ * @csspart icon - The icon part of the chip.
  * @csspart label - The label part of the chip.
  *
  * @event click - (React: onClick) This event is dispatched when the chip is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
  * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
- *
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

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

package/dist/react/staticcheckbox/index.js

@@ -3,25 +3,25 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/staticcheckbox';
 import { TAG_NAME } from '../../components/staticcheckbox/staticcheckbox.constants';
 /**
- * This is a decorative component that is styled to look as a checkbox.
+ * StaticCheckbox is a decorative component styled as a checkbox for visual presentation.
+ * Unlike the interactive `mdc-checkbox`, this component does not handle user interactions or form submissions.
+ * It is used purely for displaying checkbox states in read-only scenarios.
  *
- * It has 5 properties - checked, indeterminate, disabled, readonly and soft-disabled.
- *
- * We are using the same styling that has been created for the `mdc-checkbox` component.
+ * This component supports five display states: checked, indeterminate, disabled, readonly, and soft-disabled.
  *
  * @tagname mdc-staticcheckbox
  *
  * @dependency mdc-icon
  *
- * @cssproperty --mdc-checkbox-border-color - Controls the border color of the checkbox.
- * @cssproperty --mdc-checkbox-background-color - Controls the background color of the checkbox.
- * @cssproperty --mdc-checkbox-icon-color - Controls the icon color of the checkbox.
- * @cssproperty --mdc-checkbox-size - Controls the size of the checkbox.
+ * @cssproperty --mdc-staticcheckbox-border-color - The border color of the checkbox.
+ * @cssproperty --mdc-staticcheckbox-background-color - The background color of the checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-color - The icon color of the checkbox.
+ * @cssproperty --mdc-staticcheckbox-size - The size of the checkbox.
  *
- * @csspart icon-container - The container for the checkbox icon.
- * @csspart checkbox-icon - The checkbox icon.
+ * @csspart icon-container - The container for the checkbox icon
+ * @csspart checkbox-icon - The checkbox icon element
  *
- * @slot - Default slot for adding label text.
+ * @slot - Default slot for adding label text
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -2,10 +2,9 @@ import Component from '../../components/staticchip';
 /**
  * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.
  *
- * It is recommended to keep the label text for the chip component concise and compact.
+ * It is recommended to keep the label text for the chip component concise and compact.<br/>
  * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.
  *
- *
  * @tagname mdc-staticchip
  *
  * @dependency mdc-icon
@@ -16,6 +15,7 @@ import Component from '../../components/staticchip';
  * @cssproperty --mdc-chip-background-color - The background color of the static chip.
  *
  * @csspart label - The label of the static chip.
+ * @csspart icon - The icon of the static chip.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/staticchip/index.js

@@ -5,10 +5,9 @@ import { TAG_NAME } from '../../components/staticchip/staticchip.constants';
 /**
  * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.
  *
- * It is recommended to keep the label text for the chip component concise and compact.
+ * It is recommended to keep the label text for the chip component concise and compact.<br/>
  * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.
  *
- *
  * @tagname mdc-staticchip
  *
  * @dependency mdc-icon
@@ -19,6 +18,7 @@ import { TAG_NAME } from '../../components/staticchip/staticchip.constants';
  * @cssproperty --mdc-chip-background-color - The background color of the static chip.
  *
  * @csspart label - The label of the static chip.
+ * @csspart icon - The icon of the static chip.
  */
 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.25",
+  "version": "0.129.27",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"