@momentum-design/components 0.120.14 → 0.120.15

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

@@ -16,7 +16,7 @@ import { ICON_NAME } from './staticcheckbox.constants';
 /**
  * This is a decorative component that is styled to look as a checkbox.
  *
- * It has 3 properties - checked, indeterminate and disabled.
+ * 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.
  *
@@ -54,6 +54,18 @@ class StaticCheckbox extends DisabledMixin(Component) {
          * @default false
          */
         this.indeterminate = false;
+        /**
+         * Determines whether the checkbox is read-only.
+         *
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * Determines whether the checkbox is soft-disabled.
+         *
+         * @default false
+         */
+        this.softDisabled = false;
     }
     render() {
         const checkboxIconContent = this.checked || this.indeterminate
@@ -79,4 +91,12 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], StaticCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], StaticCheckbox.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'soft-disabled', reflect: true }),
+    __metadata("design:type", Object)
+], StaticCheckbox.prototype, "softDisabled", void 0);
 export default StaticCheckbox;

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

@@ -13,22 +13,33 @@ const styles = [
       --mdc-staticcheckbox-icon-color: var(--mds-color-theme-inverted-text-primary-normal);
       --mdc-staticcheckbox-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
       --mdc-staticcheckbox-disabled-checked-icon-color: var(--mds-color-theme-control-active-disabled);
+      --mdc-staticcheckbox-readonly-border-color: var(--mds-color-theme-outline-primary-normal);
+      --mdc-staticcheckbox-text-normal-color: var(--mds-color-theme-text-primary-normal);
     }
 
     :host([checked])::part(icon-container),
     :host([indeterminate])::part(icon-container) {
-      background: var(--mdc-staticcheckbox-checked-background-color);
+      background-color: var(--mdc-staticcheckbox-checked-background-color);
       border-color: transparent;
     }
 
-    :host([disabled])::part(icon-container) {
+    :host([disabled])::part(icon-container),
+    :host([soft-disabled])::part(icon-container),
+    :host([disabled][readonly])::part(icon-container),
+    :host([soft-disabled][readonly])::part(icon-container) {
       border-color: var(--mdc-staticcheckbox-disabled-border-color);
-      background: var(--mdc-staticcheckbox-disabled-background-color);
+      background-color: var(--mdc-staticcheckbox-disabled-background-color);
     }
 
     :host([disabled][checked])::part(icon-container),
-    :host([disabled][indeterminate])::part(icon-container) {
-      background: var(--mdc-staticcheckbox-disabled-checked-icon-color);
+    :host([disabled][indeterminate])::part(icon-container),
+    :host([soft-disabled][checked])::part(icon-container),
+    :host([soft-disabled][indeterminate])::part(icon-container),
+    :host([disabled][readonly][checked])::part(icon-container),
+    :host([disabled][readonly][indeterminate])::part(icon-container),
+    :host([soft-disabled][readonly][checked])::part(icon-container),
+    :host([soft-disabled][readonly][indeterminate])::part(icon-container) {
+      background-color: var(--mdc-staticcheckbox-disabled-checked-icon-color);
       border: 0.0625rem solid var(--mdc-staticcheckbox-disabled-border-color);
     }
 
@@ -36,20 +47,32 @@ const styles = [
       display: flex;
       align-items: center;
       border: 0.0625rem solid var(--mdc-staticcheckbox-icon-border-color);
-      background: var(--mdc-staticcheckbox-icon-background-color);
+      background-color: var(--mdc-staticcheckbox-icon-background-color);
       width: 1rem;
       height: 1rem;
       border-radius: 0.125rem;
     }
 
+    :host([readonly])::part(icon-container) {
+      border-color: var(--mdc-staticcheckbox-readonly-border-color);
+      background-color: unset;
+    }
+
     :host::part(checkbox-icon) {
       --mdc-icon-fill-color: var(--mdc-staticcheckbox-icon-color);
     }
 
-    :host([disabled])::part(checkbox-icon) {
+    :host([disabled])::part(checkbox-icon),
+    :host([soft-disabled])::part(checkbox-icon),
+    :host([disabled][readonly])::part(checkbox-icon),
+    :host([soft-disabled][readonly])::part(checkbox-icon) {
       --mdc-icon-fill-color: var(--mdc-staticcheckbox-disabled-icon-color);
     }
 
+    :host([readonly])::part(checkbox-icon) {
+      --mdc-icon-fill-color: var(--mdc-staticcheckbox-text-normal-color);
+    }
+
     /* High Contrast Mode */
     @media (forced-colors: active) {
       :host([checked])::part(icon-container),

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

@@ -3,7 +3,7 @@ import { Component } from '../../models';
 declare const StaticRadio_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 radio.
- * It has 2 properties - checked and disabled.
+ * It has 4 properties - checked, disabled, readonly and soft-disabled.
  *
  * We are using the same styling that has been created for the `mdc-radio` component.
  *
@@ -39,6 +39,12 @@ declare class StaticRadio extends StaticRadio_base {
      * @default false
      */
     readonly: boolean;
+    /**
+     * Determines whether the radio is soft-disabled.
+     *
+     * @default false
+     */
+    softDisabled: boolean;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/staticradio/staticradio.component.js

@@ -14,7 +14,7 @@ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import styles from './staticradio.styles';
 /**
  * This is a decorative component that is styled to look as a radio.
- * It has 2 properties - checked and disabled.
+ * It has 4 properties - checked, disabled, readonly and soft-disabled.
  *
  * We are using the same styling that has been created for the `mdc-radio` component.
  *
@@ -52,6 +52,12 @@ class StaticRadio extends DisabledMixin(Component) {
          * @default false
          */
         this.readonly = false;
+        /**
+         * Determines whether the radio is soft-disabled.
+         *
+         * @default false
+         */
+        this.softDisabled = false;
     }
     render() {
         return html ` <slot></slot>
@@ -67,4 +73,8 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], StaticRadio.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'soft-disabled', reflect: true }),
+    __metadata("design:type", Object)
+], StaticRadio.prototype, "softDisabled", void 0);
 export default StaticRadio;

package/dist/components/staticradio/staticradio.styles.js

@@ -10,6 +10,7 @@ const styles = [
       border-radius: 50%;
 
       --mdc-staticradio-inner-circle-size: 0.375rem;
+      --mdc-staticradio-text-normal-color: var(--mds-color-theme-text-primary-normal);
       --mdc-staticradio-text-disabled-color: var(--mds-color-theme-text-primary-disabled);
       --mdc-staticradio-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
       --mdc-staticradio-normal-border-color: var(--mds-color-theme-outline-input-normal);
@@ -28,20 +29,26 @@ const styles = [
     }
 
     :host([disabled])::part(radio-icon),
-    :host([disabled][readonly])::part(radio-icon) {
+    :host([soft-disabled])::part(radio-icon),
+    :host([disabled][readonly])::part(radio-icon),
+    :host([soft-disabled][readonly])::part(radio-icon) {
       border-color: var(--mdc-staticradio-disabled-border-color);
-      background: var(--mdc-staticradio-control-inactive-disabled-background);
+      background-color: var(--mdc-staticradio-control-inactive-disabled-background);
     }
 
     :host([disabled][checked])::part(radio-icon),
-    :host([disabled][readonly][checked])::part(radio-icon) {
+    :host([soft-disabled][checked])::part(radio-icon),
+    :host([disabled][readonly][checked])::part(radio-icon),
+    :host([soft-disabled][readonly][checked])::part(radio-icon) {
       border: var(--mdc-staticradio-control-active-disabled-background);
-      background: var(--mdc-staticradio-control-active-disabled-background);
+      background-color: var(--mdc-staticradio-control-active-disabled-background);
     }
 
     :host([disabled][checked]) .radio-icon:after,
-    :host([disabled][readonly][checked]) .radio-icon:after {
-      background: var(--mdc-staticradio-inner-circle-disabled-background);
+    :host([soft-disabled][checked]) .radio-icon:after,
+    :host([disabled][readonly][checked]) .radio-icon:after,
+    :host([soft-disabled][readonly][checked]) .radio-icon:after {
+      background-color: var(--mdc-staticradio-inner-circle-disabled-background);
     }
 
     :host::part(radio-icon) {
@@ -68,12 +75,12 @@ const styles = [
       width: var(--mdc-staticradio-inner-circle-size);
       height: var(--mdc-staticradio-inner-circle-size);
       border-radius: 50%;
-      background: var(--mdc-staticradio-inner-circle-normal-background);
+      background-color: var(--mdc-staticradio-inner-circle-normal-background);
     }
 
     :host([readonly])::part(radio-icon) {
       border-color: var(--mdc-staticradio-normal-border-color);
-      background-color: var(--mdc-staticradio-control-inactive-color);
+      background-color: unset;
     }
 
     :host([readonly][checked])::part(radio-icon) {
@@ -81,7 +88,7 @@ const styles = [
     }
 
     :host([readonly][checked]) .radio-icon:after {
-      background-color: var(--mdc-staticradio-text-disabled-color);
+      background-color: var(--mdc-staticradio-text-normal-color);
     }
   `,
 ];

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

@@ -4,7 +4,7 @@ import type { ToggleSize } from './statictoggle.types';
 declare const StaticToggle_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 toggle. <br/>
- * It has 3 properties - checked, size and disabled. <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.
  *
  * @dependency mdc-icon
@@ -47,6 +47,18 @@ declare class StaticToggle extends StaticToggle_base {
      * @default default
      */
     size: ToggleSize;
+    /**
+     * Determines whether the toggle is read-only.
+     *
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * Determines whether the toggle is soft-disabled.
+     *
+     * @default false
+     */
+    softDisabled: boolean;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/statictoggle/statictoggle.component.js

@@ -15,7 +15,7 @@ import { DEFAULTS, ICON_NAME, ICON_SIZE_IN_REM } from './statictoggle.constants'
 import styles from './statictoggle.styles';
 /**
  * This is a decorative component that is styled to look as a toggle. <br/>
- * It has 3 properties - checked, size and disabled. <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.
  *
  * @dependency mdc-icon
@@ -60,6 +60,18 @@ class StaticToggle extends DisabledMixin(Component) {
          * @default default
          */
         this.size = DEFAULTS.SIZE;
+        /**
+         * Determines whether the toggle is read-only.
+         *
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * Determines whether the toggle is soft-disabled.
+         *
+         * @default false
+         */
+        this.softDisabled = false;
     }
     render() {
         return html `
@@ -84,4 +96,12 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], StaticToggle.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], StaticToggle.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'soft-disabled', reflect: true }),
+    __metadata("design:type", Object)
+], StaticToggle.prototype, "softDisabled", void 0);
 export default StaticToggle;

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

@@ -9,6 +9,7 @@ const styles = [
       --mdc-statictoggle-border-radius: 0.75rem;
       --mdc-statictoggle-border-radius-compact: 0.5rem;
       --mdc-statictoggle-border: 1px solid var(--mds-color-theme-outline-input-normal);
+      --mdc-statictoggle-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
 
       --mdc-statictoggle-inactive-rest-color: var(--mds-color-theme-control-inactive-normal);
       --mdc-statictoggle-inactive-disabled-color: var(--mds-color-theme-control-inactive-disabled);
@@ -26,7 +27,7 @@ const styles = [
     :host::part(slider) {
       width: var(--mdc-statictoggle-width);
       height: var(--mdc-statictoggle-height);
-      background: var(--mdc-statictoggle-inactive-rest-color);
+      background-color: var(--mdc-statictoggle-inactive-rest-color);
       border-radius: var(--mdc-statictoggle-border-radius);
       border: var(--mdc-statictoggle-border);
       display: flex;
@@ -56,7 +57,10 @@ const styles = [
       border-radius: 50%;
     }
 
-    :host([disabled])::part(toggle-icon) {
+    :host([disabled])::part(toggle-icon),
+    :host([soft-disabled])::part(toggle-icon),
+    :host([disabled][readonly])::part(toggle-icon),
+    :host([soft-disabled][readonly])::part(toggle-icon) {
       --mdc-icon-fill-color: var(--mdc-statictoggle-icon-color-disabled);
       background-color: var(--mdc-statictoggle-icon-background-color-disabled);
     }
@@ -65,12 +69,28 @@ const styles = [
       padding: 0.125rem;
     }
 
-    :host([disabled])::part(slider) {
+    :host([disabled])::part(slider),
+    :host([soft-disabled])::part(slider),
+    :host([readonly])::part(slider) {
       background-color: var(--mdc-statictoggle-inactive-disabled-color);
+      border-color: var(--mdc-statictoggle-disabled-border-color);
     }
 
-    :host([disabled][checked])::part(slider) {
+    :host([disabled][checked])::part(slider),
+    :host([soft-disabled][checked])::part(slider),
+    :host([disabled][readonly][checked])::part(slider),
+    :host([soft-disabled][readonly][checked])::part(slider) {
       background-color: var(--mdc-statictoggle-active-disabled-color);
+      border-color: transparent;
+    }
+
+    :host([readonly])::part(toggle-icon) {
+      background-color: var(--mdc-statictoggle-icon-background-color-normal);
+    }
+
+    :host([disabled][readonly])::part(slider),
+    :host([soft-disabled][readonly])::part(slider) {
+      background-color: var(--mdc-statictoggle-inactive-disabled-color);
     }
 
     /* High Contrast Mode */

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

@@ -70,11 +70,6 @@ declare class Textarea extends Textarea_base {
      * The placeholder text that is displayed when the textarea field is empty.
      */
     placeholder?: string;
-    /**
-     * readonly attribute of the textarea field. If true, the textarea field is read-only.
-     * @default false
-     */
-    readonly: boolean;
     /**
      * The rows attribute specifies the visible number of lines in a text area.
      * @default 5

package/dist/components/textarea/textarea.component.js

@@ -83,11 +83,6 @@ import styles from './textarea.styles';
 class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {
         super(...arguments);
-        /**
-         * readonly attribute of the textarea field. If true, the textarea field is read-only.
-         * @default false
-         */
-        this.readonly = false;
         /**
          * The rows attribute specifies the visible number of lines in a text area.
          * @default 5
@@ -328,10 +323,6 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], Textarea.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Textarea.prototype, "readonly", void 0);
 __decorate([
     property({ type: Number }),
     __metadata("design:type", Number)

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

@@ -83,7 +83,7 @@ declare class Toggle extends Toggle_base implements AssociatedFormControl {
     private setFormValue;
     /**
      * Toggles the state of the toggle element.
-     * If the element is not disabled, then the checked property is toggled.
+     * If the element is not disabled, soft-disabled, or readonly, then the checked property is toggled.
      */
     private toggleState;
     /**

package/dist/components/toggle/toggle.component.js

@@ -80,7 +80,7 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
     }
     connectedCallback() {
         super.connectedCallback();
-        // Toggle does not contain helpTextType property.
+        // Toggle does not contain helpTextType property.   
         this.helpTextType = undefined;
     }
     firstUpdated(_changedProperties) {
@@ -143,10 +143,10 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
     }
     /**
      * Toggles the state of the toggle element.
-     * If the element is not disabled, then the checked property is toggled.
+     * If the element is not disabled, soft-disabled, or readonly, then the checked property is toggled.
      */
     toggleState() {
-        if (!this.disabled) {
+        if (!this.disabled && !this.softDisabled && !this.readonly) {
             this.checked = !this.checked;
         }
     }
@@ -157,6 +157,9 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
      */
     handleKeyDown(event) {
         var _a;
+        if ((this.readonly || this.softDisabled) && event.key === KEYS.SPACE) {
+            event.preventDefault();
+        }
         if (event.key === KEYS.ENTER) {
             (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
         }
@@ -195,6 +198,8 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
       <mdc-statictoggle
         ?checked="${this.checked}"
         ?disabled="${this.disabled}"
+        ?readonly="${this.readonly}"
+        ?soft-disabled="${this.softDisabled}"
         size="${this.size}"
         class="mdc-focus-ring"
         part="container"
@@ -210,6 +215,7 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
           .checked="${this.checked}"
           aria-checked="${this.checked}"
           .disabled="${this.disabled}"
+          ?readonly="${this.readonly}"
           aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           tabindex="${this.disabled ? -1 : 0}"

package/dist/components/toggle/toggle.styles.js

@@ -3,6 +3,7 @@ import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
 const styles = [
     hostFitContentStyles,
     css `
+    /* Base styles and CSS custom properties */
     :host {
       --mdc-toggle-width: 3rem;
       --mdc-toggle-height: 1.5rem;
@@ -18,6 +19,7 @@ const styles = [
       --mdc-toggle-inactive-pressed-color: var(--mds-color-theme-control-inactive-pressed);
     }
 
+    /* Grid layout for labeled toggles */
     :host([label]),
     :host([help-text]) {
       display: grid;
@@ -32,6 +34,12 @@ const styles = [
       row-gap: 0rem;
     }
 
+    :host::part(label-text),
+    :host::part(help-text-container) {
+      grid-column: 2;
+    }
+
+    /* Component structure and layout */
     :host::part(toggle-input) {
       margin: 0;
       padding: 0;
@@ -43,16 +51,6 @@ const styles = [
       height: var(--mdc-toggle-height);
     }
 
-    :host::part(label-text),
-    :host::part(help-text-container) {
-      grid-column: 2;
-    }
-
-    :host::part(label),
-    :host::part(toggle-input) {
-      cursor: pointer;
-    }
-
     :host::part(label) {
       word-break: break-word;
       white-space: normal;
@@ -61,33 +59,62 @@ const styles = [
       line-height: var(--mds-font-apps-body-midsize-regular-line-height);
     }
 
-    :host([disabled])::part(label),
-    :host([disabled])::part(toggle-input) {
-      cursor: default;
-    }
-
     :host::part(help-text) {
       color: var(--mdc-toggle-help-text-color);
     }
 
-    :host(:hover:not([disabled]))::part(container) {
+    /* Default interactive states */
+    :host::part(label),
+    :host::part(toggle-input) {
+      cursor: pointer;
+    }
+
+    :host(:hover)::part(container) {
       background-color: var(--mdc-toggle-inactive-hover-color);
     }
 
-    :host(:active:not([disabled]))::part(container) {
+    :host(:active)::part(container) {
       background-color: var(--mdc-toggle-inactive-pressed-color);
     }
 
-    :host(:hover:not([disabled])[checked])::part(container) {
+    :host([checked]:hover)::part(container) {
       background-color: var(--mdc-toggle-active-hover-color);
     }
 
-    :host(:active:not([disabled])[checked])::part(container) {
+    :host([checked]:active)::part(container) {
       background-color: var(--mdc-toggle-active-pressed-color);
     }
 
+    /* Readonly state - disables pointer events */
+    :host([readonly]),
+    :host([soft-disabled]) {
+      pointer-events: none;
+    }
+
+    /* Disabled states override interactive styles */
+    :host([disabled])::part(label),
+    :host([disabled])::part(toggle-input),
+    :host([soft-disabled])::part(label),
+    :host([soft-disabled])::part(toggle-input) {
+      cursor: default;
+    }
+
+    :host([disabled]:hover)::part(container),
+    :host([disabled]:active)::part(container),
+    :host([disabled][checked]:hover)::part(container),
+    :host([disabled][checked]:active)::part(container),
+    :host([soft-disabled]:hover)::part(container),
+    :host([soft-disabled]:active)::part(container),
+    :host([soft-disabled][checked]:hover)::part(container),
+    :host([soft-disabled][checked]:active)::part(container) {
+      background-color: unset;
+    }
+
     :host([disabled])::part(label-text),
-    :host([disabled])::part(help-text) {
+    :host([disabled])::part(help-text),
+    :host([soft-disabled])::part(label),
+    :host([soft-disabled])::part(label-text),
+    :host([soft-disabled])::part(help-text) {
       color: var(--mdc-toggle-label-color-disabled);
     }
   `,