@momentum-design/components 0.129.25 → 0.129.27

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

@@ -2,48 +2,48 @@ import { CSSResult } from 'lit';
 import { Component } from '../../models';
 declare const StaticCheckbox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
- * 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 class StaticCheckbox extends StaticCheckbox_base {
     /**
-     * Determines whether the checkbox is selected or unselected.
-     *
+     * Determines whether the checkbox appears checked (selected) or unchecked.
      * @default false
      */
     checked: boolean;
     /**
-     * Determines whether the checkbox is in an indeterminate state.
-     *
+     * Determines whether the checkbox appears in an indeterminate (mixed) state.
+     * Typically used to represent partial selection in nested checkbox groups.
      * @default false
      */
     indeterminate: boolean;
     /**
-     * Determines whether the checkbox is read-only.
-     *
+     * Determines whether the checkbox appears in a read-only state.
+     * Note: This is purely visual as StaticCheckbox is non-interactive by design.
      * @default false
      */
     readonly: boolean;
     /**
-     * Determines whether the checkbox is soft-disabled.
-     *
+     * Determines whether the checkbox appears in a soft-disabled state.
+     * Soft-disabled provides a less prominent disabled appearance than the standard disabled state.
+     * Note: This is purely visual as StaticCheckbox is non-interactive by design.
      * @default false
      */
     softDisabled: boolean;

package/dist/components/staticcheckbox/staticcheckbox.component.js

@@ -14,50 +14,50 @@ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import styles from './staticcheckbox.styles';
 import { ICON_NAME } from './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
  */
 class StaticCheckbox extends DisabledMixin(Component) {
     constructor() {
         super(...arguments);
         /**
-         * Determines whether the checkbox is selected or unselected.
-         *
+         * Determines whether the checkbox appears checked (selected) or unchecked.
          * @default false
          */
         this.checked = false;
         /**
-         * Determines whether the checkbox is in an indeterminate state.
-         *
+         * Determines whether the checkbox appears in an indeterminate (mixed) state.
+         * Typically used to represent partial selection in nested checkbox groups.
          * @default false
          */
         this.indeterminate = false;
         /**
-         * Determines whether the checkbox is read-only.
-         *
+         * Determines whether the checkbox appears in a read-only state.
+         * Note: This is purely visual as StaticCheckbox is non-interactive by design.
          * @default false
          */
         this.readonly = false;
         /**
-         * Determines whether the checkbox is soft-disabled.
-         *
+         * Determines whether the checkbox appears in a soft-disabled state.
+         * Soft-disabled provides a less prominent disabled appearance than the standard disabled state.
+         * Note: This is purely visual as StaticCheckbox is non-interactive by design.
          * @default false
          */
         this.softDisabled = false;

package/dist/components/staticcheckbox/staticcheckbox.styles.js

@@ -2,10 +2,10 @@ import { css } from 'lit';
 const styles = [
     css `
     :host {
-      --mdc-checkbox-border-color: var(--mds-color-theme-outline-input-normal);
-      --mdc-checkbox-background-color: var(--mds-color-theme-control-inactive-normal);
-      --mdc-checkbox-icon-color: var(--mds-color-theme-inverted-text-primary-normal);
-      --mdc-checkbox-size: 1rem;
+      --mdc-staticcheckbox-border-color: var(--mds-color-theme-outline-input-normal);
+      --mdc-staticcheckbox-background-color: var(--mds-color-theme-control-inactive-normal);
+      --mdc-staticcheckbox-icon-color: var(--mds-color-theme-inverted-text-primary-normal);
+      --mdc-staticcheckbox-size: 1rem;
       margin: 0.125rem 0;
       border-radius: 0.125rem;
     }
@@ -13,34 +13,34 @@ const styles = [
     :host::part(icon-container) {
       display: flex;
       align-items: center;
-      border: 0.0625rem solid var(--mdc-checkbox-border-color);
-      background-color: var(--mdc-checkbox-background-color);
-      width: var(--mdc-checkbox-size);
-      height: var(--mdc-checkbox-size);
+      border: 0.0625rem solid var(--mdc-staticcheckbox-border-color);
+      background-color: var(--mdc-staticcheckbox-background-color);
+      width: var(--mdc-staticcheckbox-size);
+      height: var(--mdc-staticcheckbox-size);
       border-radius: 0.125rem;
     }
 
     :host::part(checkbox-icon) {
-      --mdc-icon-fill-color: var(--mdc-checkbox-icon-color);
+      --mdc-icon-fill-color: var(--mdc-staticcheckbox-icon-color);
     }
 
     :host([checked]),
     :host([indeterminate]) {
-      --mdc-checkbox-background-color: var(--mds-color-theme-control-active-normal);
-      --mdc-checkbox-border-color: transparent;
+      --mdc-staticcheckbox-background-color: var(--mds-color-theme-control-active-normal);
+      --mdc-staticcheckbox-border-color: transparent;
     }
 
     :host([readonly]) {
-      --mdc-checkbox-border-color: var(--mds-color-theme-outline-primary-normal);
-      --mdc-checkbox-background-color: var(--mds-color-theme-control-inactive-disabled);
-      --mdc-checkbox-icon-color: var(--mds-color-theme-text-primary-normal);
+      --mdc-staticcheckbox-border-color: var(--mds-color-theme-outline-primary-normal);
+      --mdc-staticcheckbox-background-color: var(--mds-color-theme-control-inactive-disabled);
+      --mdc-staticcheckbox-icon-color: var(--mds-color-theme-text-primary-normal);
     }
 
     :host([disabled]),
     :host([soft-disabled]) {
-      --mdc-checkbox-border-color: var(--mds-color-theme-outline-primary-disabled);
-      --mdc-checkbox-background-color: var(--mds-color-theme-control-inactive-disabled);
-      --mdc-checkbox-icon-color: var(--mds-color-theme-text-primary-disabled);
+      --mdc-staticcheckbox-border-color: var(--mds-color-theme-outline-primary-disabled);
+      --mdc-staticcheckbox-background-color: var(--mds-color-theme-control-inactive-disabled);
+      --mdc-staticcheckbox-icon-color: var(--mds-color-theme-text-primary-disabled);
       cursor: default;
     }
 
@@ -48,34 +48,34 @@ const styles = [
     :host([disabled][indeterminate]),
     :host([soft-disabled][checked]),
     :host([soft-disabled][indeterminate]) {
-      --mdc-checkbox-background-color: var(--mds-color-theme-control-active-disabled);
-      --mdc-checkbox-border-color: var(--mds-color-theme-outline-primary-disabled);
+      --mdc-staticcheckbox-background-color: var(--mds-color-theme-control-active-disabled);
+      --mdc-staticcheckbox-border-color: var(--mds-color-theme-outline-primary-disabled);
     }
 
     /* High Contrast Mode */
     @media (forced-colors: active) {
       :host([checked]),
       :host([indeterminate]) {
-        --mdc-checkbox-background-color: SelectedItem;
-        --mdc-checkbox-border-color: SelectedItemText;
-        --mdc-checkbox-icon-color: SelectedItemText;
+        --mdc-staticcheckbox-background-color: SelectedItem;
+        --mdc-staticcheckbox-border-color: SelectedItemText;
+        --mdc-staticcheckbox-icon-color: SelectedItemText;
       }
       :host([readonly]) {
-        --mdc-checkbox-border-color: Highlight;
-        --mdc-checkbox-icon-color: HighlightText;
+        --mdc-staticcheckbox-border-color: Highlight;
+        --mdc-staticcheckbox-icon-color: HighlightText;
       }
       :host([disabled]),
       :host([soft-disabled]) {
-        --mdc-checkbox-background-color: GrayText;
-        --mdc-checkbox-border-color: GrayText;
-        --mdc-checkbox-icon-color: GrayText;
+        --mdc-staticcheckbox-background-color: GrayText;
+        --mdc-staticcheckbox-border-color: GrayText;
+        --mdc-staticcheckbox-icon-color: GrayText;
       }
       :host([disabled][checked]),
       :host([disabled][indeterminate]),
       :host([soft-disabled][checked]),
       :host([soft-disabled][indeterminate]) {
-        --mdc-checkbox-border-color: GrayText;
-        --mdc-checkbox-icon-color: GrayText;
+        --mdc-staticcheckbox-border-color: GrayText;
+        --mdc-staticcheckbox-icon-color: GrayText;
       }
     }
   `,

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

@@ -1,14 +1,13 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { ColorType } from './staticchip.types';
 declare const StaticChip_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
 /**
  * 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 @@ declare const StaticChip_base: import("../../utils/mixins/index.types").Construc
  * @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 class StaticChip extends StaticChip_base {
     /**
@@ -42,8 +42,10 @@ declare class StaticChip extends StaticChip_base {
      *
      * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
      * including empty spaces to split words.
+     *
+     * @default undefined
      */
-    label: string;
+    label?: string;
     /**
      * Renders the icon element if available.
      * @returns The icon element if available, otherwise nothing.

package/dist/components/staticchip/staticchip.component.js

@@ -16,10 +16,9 @@ import styles from './staticchip.styles';
 /**
  * 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
@@ -30,6 +29,7 @@ import styles from './staticchip.styles';
  * @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.
  */
 class StaticChip extends IconNameMixin(Component) {
     constructor() {
@@ -50,13 +50,6 @@ class StaticChip extends IconNameMixin(Component) {
          * @default default
          */
         this.color = DEFAULTS.COLOR;
-        /**
-         * The visible label text of the chip.
-         *
-         * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
-         * including empty spaces to split words.
-         */
-        this.label = '';
     }
     /**
      * Renders the icon element if available.
@@ -85,6 +78,6 @@ __decorate([
 ], StaticChip.prototype, "color", void 0);
 __decorate([
     property({ type: String }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], StaticChip.prototype, "label", void 0);
 export default StaticChip;

package/dist/components/statictoggle/statictoggle.styles.js

@@ -24,7 +24,7 @@ const styles = [
       justify-content: flex-start;
       transition: background-color 0.3s ease;
       outline: none;
-      padding: 1px;
+      padding: 0.125rem;
     }
 
     :host::part(toggle-icon) {