@momentum-design/components 0.133.39 → 0.133.40

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

@@ -61,11 +61,12 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
  *
  * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-button-background - Background of the button
- * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-border-color - Border color of the button
  * @cssproperty --mdc-button-text-color - Text color of the button
  * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
  * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  * @cssproperty --mdc-button-line-height - Line height of the button text
+ *
  */
 declare class Button extends Button_base {
     /**

package/dist/components/button/button.component.js

@@ -73,11 +73,12 @@ import { getIconNameWithoutStyle } from './button.utils';
  *
  * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-button-background - Background of the button
- * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-border-color - Border color of the button
  * @cssproperty --mdc-button-text-color - Text color of the button
  * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
  * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  * @cssproperty --mdc-button-line-height - Line height of the button text
+ *
  */
 class Button extends OverflowMixin(ButtonComponentMixin(Buttonsimple)) {
     constructor() {

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

@@ -47,6 +47,8 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * @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 staticcheckbox that provides the visual checkbox appearance.
+ *
+ * @cssstate checked - Active when the checkbox is checked.
  */
 declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
     /**

package/dist/components/checkbox/checkbox.component.js

@@ -63,6 +63,8 @@ import { CHECKBOX_VALIDATION } from './checkbox.constants';
  * @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 staticcheckbox that provides the visual checkbox appearance.
+ *
+ * @cssstate checked - Active when the checkbox is checked.
  */
 class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
     constructor() {
@@ -209,6 +211,12 @@ class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
         super.update(changedProperties);
         if (changedProperties.has('checked')) {
             this.setFormValue();
+            if (this.checked) {
+                this.internals.states.add('checked');
+            }
+            else {
+                this.internals.states.delete('checked');
+            }
         }
     }
     render() {

package/dist/custom-elements.json

@@ -4859,7 +4859,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -5626,7 +5626,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-button",
-          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * ## Button configuration\n *\n * The appearance of the button depends on combination of multiple attributes.\n *\n * ### Button Types\n *\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n *\n * - **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n * - **Pill button with icons**: Contains an icon on the left or right side of the button\n * - **Icon button**: Represented by just an icon without any text\n *\n * ### Button Variants:\n *\n * Options for button backgrounds and borders:\n *\n * - **Primary**: Solid background color\n * - **Secondary**: Transparent background with solid border\n * - **Tertiary**: No background or border, text-only appearance\n *\n * ### Button Colors\n *\n * Color options for **Primary** and **Secondary** buttons:\n *\n * - **Default**: For standard actions\n * - **Positive**: For success or confirmation actions\n * - **Negative**: For destructive or error actions\n * - **Accent**: For informational actions\n * - **Promotional**: For promotional actions\n *\n * ### Button Sizes\n *\n * Size options for different button configurations in REM:\n *\n * - **Pill button**: 40, 32, 28, 24\n * - **Icon button**: 64, 52, 40, 32, 28, 24\n * - **Tertiary icon button**: 20\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n * @slot prefix - Content to be displayed before the text label.\n * @slot postfix - Content to be displayed after the text label.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n * @csspart prefix - Content before the text label, passed in `prefix` slot\n * @csspart postfix - Content after the text label, passed in `postfix` slot\n * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set\n * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background of the button\n * @cssproperty --mdc-button-border-color - Borer color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n * @cssproperty --mdc-button-line-height - Line height of the button text\n */",
+          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * ## Button configuration\n *\n * The appearance of the button depends on combination of multiple attributes.\n *\n * ### Button Types\n *\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n *\n * - **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n * - **Pill button with icons**: Contains an icon on the left or right side of the button\n * - **Icon button**: Represented by just an icon without any text\n *\n * ### Button Variants:\n *\n * Options for button backgrounds and borders:\n *\n * - **Primary**: Solid background color\n * - **Secondary**: Transparent background with solid border\n * - **Tertiary**: No background or border, text-only appearance\n *\n * ### Button Colors\n *\n * Color options for **Primary** and **Secondary** buttons:\n *\n * - **Default**: For standard actions\n * - **Positive**: For success or confirmation actions\n * - **Negative**: For destructive or error actions\n * - **Accent**: For informational actions\n * - **Promotional**: For promotional actions\n *\n * ### Button Sizes\n *\n * Size options for different button configurations in REM:\n *\n * - **Pill button**: 40, 32, 28, 24\n * - **Icon button**: 64, 52, 40, 32, 28, 24\n * - **Tertiary icon button**: 20\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n * @slot prefix - Content to be displayed before the text label.\n * @slot postfix - Content to be displayed after the text label.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n * @csspart prefix - Content before the text label, passed in `prefix` slot\n * @csspart postfix - Content after the text label, passed in `postfix` slot\n * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set\n * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background of the button\n * @cssproperty --mdc-button-border-color - Border color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n * @cssproperty --mdc-button-line-height - Line height of the button text\n *\n */",
           "customElement": true,
           "events": [
             {
@@ -11373,6 +11373,12 @@
               }
             }
           ],
+          "cssStates": [
+            {
+              "description": "Active when the checkbox is checked.",
+              "name": "checked"
+            }
+          ],
           "mixins": [
             {
               "name": "KeyDownHandledMixin",
@@ -11400,7 +11406,13 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-checkbox",
-          "jsDoc": "/**\n * The Checkbox component allows users to select one or multiple options from a list, toggle features on/off,\n * or indicate agreement in forms and settings. These are commonly used in forms, lists, and settings panels\n * where users need to make selections or express preferences.\n *\n * To create a group of checkboxes, use the `mdc-formfieldgroup` component.\n *\n * **Note:** This component internally renders a native checkbox input element with custom styling.\n *\n * ## When to use\n *\n * 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).\n *\n * ## Accessibility\n * - Provide clear labels that describe what the checkbox controls\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n *\n * ## Styling\n * Use the `static-checkbox` part to apply custom styles to the checkbox visual element.\n * This part exposes the underlying [StaticCheckbox](?path=/docs/components-decorator-staticcheckbox--docs) component for advanced styling.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.\n * @csspart text-container - The container for the label and helper text elements.\n * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.\n */",
+          "jsDoc": "/**\n * The Checkbox component allows users to select one or multiple options from a list, toggle features on/off,\n * or indicate agreement in forms and settings. These are commonly used in forms, lists, and settings panels\n * where users need to make selections or express preferences.\n *\n * To create a group of checkboxes, use the `mdc-formfieldgroup` component.\n *\n * **Note:** This component internally renders a native checkbox input element with custom styling.\n *\n * ## When to use\n *\n * 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).\n *\n * ## Accessibility\n * - Provide clear labels that describe what the checkbox controls\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n *\n * ## Styling\n * Use the `static-checkbox` part to apply custom styles to the checkbox visual element.\n * This part exposes the underlying [StaticCheckbox](?path=/docs/components-decorator-staticcheckbox--docs) component for advanced styling.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.\n * @csspart text-container - The container for the label and helper text elements.\n * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.\n *\n * @cssstate checked - Active when the checkbox is checked.\n */",
+          "cssCustomStates": [
+            {
+              "name": "checked",
+              "description": "Active when the checkbox is checked."
+            }
+          ],
           "customElement": true,
           "slots": [
             {

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

@@ -58,11 +58,12 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  *
  * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-button-background - Background of the button
- * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-border-color - Border color of the button
  * @cssproperty --mdc-button-text-color - Text color of the button
  * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
  * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  * @cssproperty --mdc-button-line-height - Line height of the button text
+ *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<EventsInherited["onClickEvent"]>;

package/dist/react/button/index.js

@@ -59,11 +59,12 @@ import { TAG_NAME } from '../../components/button/button.constants';
  *
  * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-button-background - Background of the button
- * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-border-color - Border color of the button
  * @cssproperty --mdc-button-text-color - Text color of the button
  * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
  * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  * @cssproperty --mdc-button-line-height - Line height of the button text
+ *
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -45,6 +45,8 @@ import type { Events } from '../../components/checkbox/checkbox.types';
  * @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 staticcheckbox that provides the visual checkbox appearance.
+ *
+ * @cssstate checked - Active when the checkbox is checked.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;

package/dist/react/checkbox/index.js

@@ -46,6 +46,8 @@ import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
  * @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 staticcheckbox that provides the visual checkbox appearance.
+ *
+ * @cssstate checked - Active when the checkbox is checked.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/package.json

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