@momentum-design/components 0.120.14 → 0.120.16

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

@@ -86,7 +86,7 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
     formStateRestoreCallback(state: string): void;
     /**
      * Toggles the state of the checkbox element.
-     * If the element is not disabled, then
+     * If the element is not disabled, soft-disabled, or readonly, then
      * the checked property is toggled and the indeterminate property is set to false.
      */
     private toggleState;

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

@@ -151,11 +151,11 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
     }
     /**
      * Toggles the state of the checkbox element.
-     * If the element is not disabled, then
+     * If the element is not disabled, soft-disabled, or readonly, then
      * the checked property is toggled and the indeterminate property is set to false.
      */
     toggleState() {
-        if (!this.disabled) {
+        if (!this.disabled && !this.softDisabled && !this.readonly) {
             this.checked = !this.checked;
             this.indeterminate = false;
         }
@@ -167,6 +167,9 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
      */
     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();
         }
@@ -194,6 +197,8 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
         ?checked="${this.checked}"
         ?indeterminate="${this.indeterminate}"
         ?disabled="${this.disabled}"
+        ?readonly="${this.readonly}"
+        ?soft-disabled="${this.softDisabled}"
       >
         <input
           id="${this.inputId}"
@@ -206,6 +211,7 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
           aria-checked="${this.indeterminate ? 'mixed' : this.checked}"
           .indeterminate="${this.indeterminate}"
           .disabled="${this.disabled}"
+          ?readonly="${this.readonly}"
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           tabindex="${this.disabled ? -1 : 0}"
           aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"

package/dist/components/checkbox/checkbox.styles.js

@@ -2,86 +2,108 @@ import { css } from 'lit';
 import { hostFocusRingStyles } from '../../utils/styles';
 const styles = [
     css `
+    /* Base styles and CSS custom properties */
     :host {
       --mdc-checkbox-background-color-hover: var(--mds-color-theme-control-inactive-hover);
       --mdc-checkbox-pressed-icon-color: var(--mds-color-theme-control-inactive-pressed);
       --mdc-checkbox-checked-pressed-icon-color: var(--mds-color-theme-control-active-pressed);
       --mdc-checkbox-checked-background-color-hover: var(--mds-color-theme-control-active-hover);
       --mdc-checkbox-disabled-checked-icon-color: var(--mds-color-theme-control-active-disabled);
+      --mdc-checkbox-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
 
       flex-direction: row;
       align-items: flex-start;
     }
 
+    /* Component structure and layout */
+    :host mdc-staticcheckbox {
+      position: relative;
+    }
+
+    :host::part(checkbox-input) {
+      margin: 0;
+      padding: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0.1%;
+      overflow: visible;
+      z-index: 1;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 0.125rem;
+    }
+
+    :host::part(text-container) {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
     :host::part(label) {
       font-size: var(--mds-font-apps-body-midsize-regular-font-size);
       font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
       line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+      word-break: break-word;
+      white-space: normal;
     }
 
-    :host::part(label) :host::part(checkbox-input) {
+    /* Default interactive states */
+    :host::part(label),
+    :host::part(checkbox-input) {
       cursor: pointer;
     }
 
-    :host([disabled])::part(label) :host([disabled])::part(checkbox-input) {
-      cursor: default;
-    }
-
     :host(:hover) mdc-staticcheckbox {
-      background: var(--mdc-checkbox-background-color-hover);
+      background-color: var(--mdc-checkbox-background-color-hover);
     }
+
     :host(:active) mdc-staticcheckbox {
-      background: var(--mdc-checkbox-pressed-icon-color);
+      background-color: var(--mdc-checkbox-pressed-icon-color);
     }
 
     :host([checked]:hover)::part(icon-container),
     :host([indeterminate]:hover)::part(icon-container) {
-      background: var(--mdc-checkbox-checked-background-color-hover);
+      background-color: var(--mdc-checkbox-checked-background-color-hover);
     }
+
     :host([checked]:active)::part(icon-container),
     :host([indeterminate]:active)::part(icon-container) {
-      background: var(--mdc-checkbox-checked-pressed-icon-color);
+      background-color: var(--mdc-checkbox-checked-pressed-icon-color);
     }
 
-    :host([disabled]) mdc-staticcheckbox {
-      background: unset;
+    /* Readonly state - disables pointer events */
+    :host([readonly]),
+    :host([soft-disabled]) {
+      pointer-events: none;
     }
 
-    :host([disabled][checked])::part(icon-container),
-    :host([disabled][indeterminate])::part(icon-container) {
-      background-color: var(--mdc-checkbox-disabled-checked-icon-color);
-    }
-
-    :host mdc-staticcheckbox {
-      position: relative;
-    }
-
-    :host::part(checkbox-input) {
-      margin: 0;
-      padding: 0;
-      position: absolute;
-      top: 0;
-      left: 0;
-      opacity: 0.1%;
-      overflow: visible;
-      z-index: 1;
+    /* Disabled states override interactive styles */
+    :host([disabled])::part(label),
+    :host([disabled])::part(checkbox-input),
+    :host([soft-disabled])::part(label),
+    :host([soft-disabled])::part(checkbox-input) {
+      cursor: default;
     }
 
-    :host::part(checkbox-input) {
-      width: 1rem;
-      height: 1rem;
-      border-radius: 0.125rem;
+    :host([disabled]) mdc-staticcheckbox,
+    :host([soft-disabled]) mdc-staticcheckbox {
+      background-color: unset;
     }
 
-    :host::part(text-container) {
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
+    :host([disabled][checked])::part(icon-container),
+    :host([disabled][indeterminate])::part(icon-container),
+    :host([soft-disabled][checked])::part(icon-container),
+    :host([soft-disabled][indeterminate])::part(icon-container) {
+      background-color: var(--mdc-checkbox-disabled-checked-icon-color);
     }
 
-    :host::part(label) {
-      word-break: break-word;
-      white-space: normal;
+    :host([disabled])::part(label),
+    :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-checkbox-disabled-text-color);
     }
   `,
     ...hostFocusRingStyles(true),

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

@@ -83,11 +83,6 @@ declare class Combobox extends Combobox_base implements AssociatedFormControl {
      * The placeholder text which will be shown on the text if provided.
      */
     placeholder?: string;
-    /**
-     * readonly attribute of the combobox field. If true, the combobox is read-only.
-     * @default false
-     */
-    readonly: boolean;
     /**
      * The placement of the popover within Combobox.
      * This defines the position of the popover relative to the combobox input field.

package/dist/components/combobox/combobox.component.js

@@ -109,11 +109,6 @@ class Combobox extends CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(
     }
     constructor() {
         super();
-        /**
-         * readonly attribute of the combobox field. If true, the combobox is read-only.
-         * @default false
-         */
-        this.readonly = false;
         /**
          * The placement of the popover within Combobox.
          * This defines the position of the popover relative to the combobox input field.
@@ -704,10 +699,6 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], Combobox.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Combobox.prototype, "readonly", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)

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

@@ -70,6 +70,16 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      * This is used for accessibility purposes to provide a description of the icon.
      */
     infoIconAriaLabel?: string;
+    /**
+     * Determines whether the form field is read-only.
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * Determines whether the form field is soft-disabled.
+     * @default false
+     */
+    softDisabled: boolean;
     /** @internal */
     protected shouldRenderLabel: Boolean;
     /**

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -68,6 +68,16 @@ class FormfieldWrapper extends DisabledMixin(Component) {
          */
         this.toggletipPlacement = DEFAULTS.TOGGLETIP_PLACEMENT;
         this.toggletipStrategy = DEFAULTS.TOGGLETIP_STRATEGY;
+        /**
+         * Determines whether the form field is read-only.
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * Determines whether the form field is soft-disabled.
+         * @default false
+         */
+        this.softDisabled = false;
         /** @internal */
         this.shouldRenderLabel = true;
     }
@@ -133,6 +143,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         if (!this.label)
             return nothing;
         const triggerId = `toggletip-trigger-${uuidv4()}`;
+        const shouldDisableToggletip = this.disabled || this.softDisabled;
         return html `<div part="label-text">
       <slot name="label">${this.renderLabelElement()}</slot>
       ${this.required ? html `<span part="required-indicator">*</span>` : nothing}
@@ -144,7 +155,8 @@ class FormfieldWrapper extends DisabledMixin(Component) {
                 size="${DEFAULTS.ICON_SIZE}"
                 variant="${BUTTON_VARIANTS.TERTIARY}"
                 aria-label="${ifDefined(this.infoIconAriaLabel)}"
-                ?disabled="${this.disabled}"
+                ?disabled="${shouldDisableToggletip}"
+                ?soft-disabled="${this.softDisabled}"
                 id="${triggerId}"
               ></mdc-button>
               <mdc-toggletip
@@ -207,4 +219,12 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'info-icon-aria-label' }),
     __metadata("design:type", String)
 ], FormfieldWrapper.prototype, "infoIconAriaLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], FormfieldWrapper.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'soft-disabled' }),
+    __metadata("design:type", Object)
+], FormfieldWrapper.prototype, "softDisabled", void 0);
 export default FormfieldWrapper;

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

@@ -75,10 +75,6 @@ declare class Input extends Input_base implements AssociatedFormControl {
      * The placeholder text that is displayed when the input field is empty.
      */
     placeholder: string;
-    /**
-     * readonly attribute of the input field. If true, the input field is read-only.
-     */
-    readonly: boolean;
     /**
      * The prefix text that is displayed before the input field. It has a max length of 10 characters.
      * When the prefix text is set, make sure to set the 'data-aria-label'

package/dist/components/input/input.component.js

@@ -92,10 +92,6 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
          * The placeholder text that is displayed when the input field is empty.
          */
         this.placeholder = '';
-        /**
-         * readonly attribute of the input field. If true, the input field is read-only.
-         */
-        this.readonly = false;
         /**
          * The trailing button when set to true, shows a clear button that clears the input field.
          * @default false
@@ -353,10 +349,6 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], Input.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Input.prototype, "readonly", void 0);
 __decorate([
     property({ type: String, attribute: 'prefix-text' }),
     __metadata("design:type", String)

package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js

@@ -120,6 +120,7 @@ class MenuItemCheckbox extends ControlledMixin(MenuItem) {
           slot="leading-controls"
           ?checked="${this.checked}"
           ?disabled="${this.disabled}"
+          ?soft-disabled="${this.softDisabled}"
         ></mdc-staticcheckbox>
       `;
         }
@@ -139,6 +140,7 @@ class MenuItemCheckbox extends ControlledMixin(MenuItem) {
           slot="trailing-controls"
           ?checked="${this.checked}"
           ?disabled="${this.disabled}"
+          ?soft-disabled="${this.softDisabled}"
           size="${TOGGLE_SIZE.COMPACT}"
         ></mdc-statictoggle>
       `;

package/dist/components/menuitemradio/menuitemradio.component.js

@@ -146,6 +146,7 @@ class MenuItemRadio extends MenuItem {
           slot="leading-controls"
           ?checked="${this.checked}"
           ?disabled="${this.disabled}"
+          ?soft-disabled="${this.softDisabled}"
         ></mdc-staticradio>
       `;
         }

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

@@ -46,12 +46,6 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
      * @default false
      */
     checked: boolean;
-    /**
-     * Determines whether the radio is read-only.
-     *
-     * @default false
-     */
-    readonly: boolean;
     connectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /**

package/dist/components/radio/radio.component.js

@@ -65,12 +65,6 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
          * @default false
          */
         this.checked = false;
-        /**
-         * Determines whether the radio is read-only.
-         *
-         * @default false
-         */
-        this.readonly = false;
         this.renderLabelAndHelperText = () => {
             if (!this.label)
                 return nothing;
@@ -188,7 +182,7 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
      */
     handleChange() {
         var _a;
-        if (this.disabled || this.readonly)
+        if (this.disabled || this.readonly || this.softDisabled)
             return;
         const radios = this.getAllRadiosWithinSameGroup();
         radios.forEach(radio => {
@@ -228,6 +222,9 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
         var _a;
         if (this.disabled)
             return;
+        if ((this.readonly || this.softDisabled) && event.key === KEYS.SPACE) {
+            event.preventDefault();
+        }
         const radios = this.getAllRadiosWithinSameGroup();
         const enabledRadios = radios.filter(radio => !radio.disabled);
         const currentIndex = enabledRadios.indexOf(this);
@@ -286,6 +283,7 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
         ?checked="${this.checked}"
         ?disabled="${this.disabled}"
         ?readonly="${this.readonly}"
+        ?soft-disabled="${this.softDisabled}"
       >
         <input
           id="${this.inputId}"
@@ -315,8 +313,4 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], Radio.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], Radio.prototype, "readonly", void 0);
 export default Radio;

package/dist/components/radio/radio.styles.js

@@ -3,6 +3,7 @@ import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
 const styles = [
     hostFitContentStyles,
     css `
+    /* Base styles and CSS custom properties */
     :host {
       display: flex;
       flex-direction: row;
@@ -19,11 +20,44 @@ const styles = [
       --mdc-radio-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
     }
 
-    :host(:hover)::part(radio-icon) {
+    /* Component structure and layout */
+    :host::part(radio-input) {
+      position: absolute;
+      opacity: 0;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      z-index: 2;
+    }
+
+    :host::part(text-container) {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 0.25rem;
+      flex: 1;
+    }
+
+    :host::part(required-indicator) {
+      display: none;
+    }
+
+    :host::part(label) {
+      cursor: pointer;
+      word-break: break-word;
+      white-space: normal;
+      font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+      font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
+      line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+    }
+
+    /* Default interactive states */
+    :host(:hover) mdc-staticradio {
       background-color: var(--mdc-radio-control-inactive-hover);
     }
 
-    :host(:active)::part(radio-icon) {
+    :host(:active) mdc-staticradio {
       background-color: var(--mdc-radio-control-inactive-pressed-color);
     }
 
@@ -37,54 +71,56 @@ const styles = [
       background-color: var(--mdc-radio-control-active-pressed-color);
     }
 
+    /* Readonly state - disables pointer events but allows specific hover behavior */
+    :host([readonly]) {
+      pointer-events: none;
+    }
+
     :host([readonly]:hover)::part(radio-icon) {
       border-color: var(--mdc-staticradio-normal-border-color);
       background-color: var(--mdc-staticradio-control-inactive-color);
     }
 
-    :host([disabled]:hover)::part(radio-icon),
-    :host([disabled][readonly]:hover)::part(radio-icon) {
-      border-color: var(--mdc-radio-disabled-border-color);
-      background-color: var(--mdc-radio-control-inactive-disabled-background);
-    }
-
-    :host([disabled][checked]:hover)::part(radio-icon) {
-      background-color: var(--mdc-radio-control-active-disabled-background);
+    :host([soft-disabled]) {
+      pointer-events: none;
     }
 
-    :host([readonly])::part(radio-input) :host([disabled])::part(radio-input) :host([disabled])::part(label),
+    /* Disabled states override interactive styles */
+    :host([disabled])::part(radio-input),
+    :host([soft-disabled])::part(radio-input),
+    :host([readonly])::part(radio-input),
+    :host([disabled])::part(label),
+    :host([soft-disabled])::part(label),
     :host([readonly])::part(label) {
       cursor: default;
     }
 
-    :host::part(label) {
-      cursor: pointer;
-      word-break: break-word;
-      white-space: normal;
-      font-size: var(--mds-font-apps-body-midsize-regular-font-size);
-      font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
-      line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+    :host([disabled]:hover) mdc-staticradio,
+    :host([disabled]:active) mdc-staticradio,
+    :host([soft-disabled]:hover) mdc-staticradio,
+    :host([soft-disabled]:active) mdc-staticradio {
+      background-color: unset;
     }
 
-    :host::part(radio-input) {
-      position: absolute;
-      opacity: 0;
-      margin: 0;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      z-index: 2;
+    :host([disabled]:hover)::part(radio-icon),
+    :host([soft-disabled]:hover)::part(radio-icon),
+    :host([disabled][readonly]:hover)::part(radio-icon),
+    :host([soft-disabled][readonly]:hover)::part(radio-icon) {
+      border-color: var(--mdc-radio-disabled-border-color);
+      background-color: var(--mdc-radio-control-inactive-disabled-background);
     }
 
-    :host::part(text-container) {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: 0.25rem;
-      flex: 1;
+    :host([disabled][checked]:hover)::part(radio-icon),
+    :host([soft-disabled][checked]:hover)::part(radio-icon) {
+      background-color: var(--mdc-radio-control-active-disabled-background);
     }
-    :host::part(required-indicator) {
-      display: none;
+
+    :host([disabled])::part(label-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-radio-text-disabled-color);
     }
   `,
     ...hostFocusRingStyles(true),

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

@@ -71,11 +71,6 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * The placeholder text which will be shown on the text if provided.
      */
     placeholder?: string;
-    /**
-     * readonly attribute of the select field. If true, the select is read-only.
-     * @default false
-     */
-    readonly: boolean;
     /**
      * The placement of the popover within Select component.
      * This defines the position of the popover relative to the select input field.
@@ -86,14 +81,6 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @default 'bottom-start'
      */
     placement: Placement;
-    /**
-     * Indicates whether the select is soft disabled.
-     * When set to `true`, the select appears visually disabled but still allows
-     * focus.
-     *
-     * @default undefined
-     */
-    softDisabled?: boolean;
     /**
      * This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.
      * The default is 'clippingAncestors', which are the overflow ancestors which will cause the

package/dist/components/select/select.component.js

@@ -89,11 +89,6 @@ import styles from './select.styles';
 class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
     constructor() {
         super();
-        /**
-         * readonly attribute of the select field. If true, the select is read-only.
-         * @default false
-         */
-        this.readonly = false;
         /**
          * The placement of the popover within Select component.
          * This defines the position of the popover relative to the select input field.
@@ -619,18 +614,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], Select.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Select.prototype, "readonly", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Select.prototype, "placement", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'soft-disabled', reflect: true }),
-    __metadata("design:type", Boolean)
-], Select.prototype, "softDisabled", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'boundary' }),
     __metadata("design:type", String)

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

@@ -4,7 +4,7 @@ declare const StaticCheckbox_base: import("../../utils/mixins/index.types").Cons
 /**
  * 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.
  *
@@ -40,6 +40,18 @@ declare class StaticCheckbox extends StaticCheckbox_base {
      * @default false
      */
     indeterminate: boolean;
+    /**
+     * Determines whether the checkbox is read-only.
+     *
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * Determines whether the checkbox is soft-disabled.
+     *
+     * @default false
+     */
+    softDisabled: boolean;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }