@momentum-design/components 0.53.9 → 0.54.1

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -75,8 +75,10 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
             this.setSoftDisabled(this, this.softDisabled);
         }
         if (changedProperties.has('active')) {
-            if (this.active) {
-                // if active is true and no ariaStateKey is provided, set it to the default (= aria-pressed)
+            if (this.active !== undefined) {
+                // if active is not undefined and no ariaStateKey is provided, set it to the default (= aria-pressed)
+                // this will make sure that if active is set to true or false regardless
+                // the ariaStateKey fallback will still work
                 this.ariaStateKey = this.ariaStateKey || DEFAULTS.ARIA_STATE_KEY;
             }
             this.setActive(this, this.active);

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

@@ -18,18 +18,10 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * @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-border-color - Border color in high contrast.
- * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
  * @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-disabled-background-color - Background color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
- * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
  * @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.
  */
 declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
     /**

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

@@ -14,7 +14,6 @@ import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
-import { ICON_NAME } from './checkbox.constants';
 import styles from './checkbox.styles';
 /**
  * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
@@ -32,18 +31,10 @@ import styles from './checkbox.styles';
  * @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-border-color - Border color in high contrast.
- * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
  * @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-disabled-background-color - Background color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
- * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
  * @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.
  */
 class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
@@ -169,16 +160,12 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
     }
     render() {
         var _a;
-        const checkboxIconContent = (this.checked || this.indeterminate) ? html `
-      <mdc-icon
-        class="icon"
-        name="${this.indeterminate ? ICON_NAME.INDETERMINATE : ICON_NAME.CHECKED}"
-        size="1"
-        length-unit="rem"
-      ></mdc-icon>
-    ` : nothing;
         return html `
-      <div class="container mdc-focus-ring">
+      <mdc-staticcheckbox 
+      class="mdc-focus-ring"
+      ?checked="${this.checked}" 
+      ?indeterminate="${this.indeterminate}" 
+      ?disabled="${this.disabled}">
         <input
           id="${this.id}"
           type="checkbox"
@@ -197,8 +184,7 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
           @change=${this.handleChange}
           @keydown=${this.handleKeyDown}
         />
-        <div class="icon-container">${checkboxIconContent}</div>
-      </div>
+      </mdc-staticcheckbox>
       ${this.renderLabelAndHelperText()}
     `;
     }

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

@@ -3,59 +3,48 @@ import { hostFocusRingStyles } from '../../utils/styles';
 const styles = [css `
   :host {
     --mdc-checkbox-background-color-hover: var(--mds-color-theme-control-inactive-hover);
-    --mdc-checkbox-border-color: var(--mds-color-theme-outline-button-normal);
-    --mdc-checkbox-checked-background-color-hover: var(--mds-color-theme-control-active-hover);
-    --mdc-checkbox-checked-background-color: var(--mds-color-theme-control-active-normal);
+    --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-disabled-background-color: var(--mds-color-theme-control-inactive-disabled);
-    --mdc-checkbox-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --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-icon-color: var(--mds-color-theme-text-primary-disabled);
-    --mdc-checkbox-icon-background-color: var(--mds-color-theme-control-inactive-normal);
-    --mdc-checkbox-icon-border-color: var(--mds-color-theme-outline-input-normal);
-    --mdc-checkbox-icon-color: var(--mds-color-theme-inverted-text-primary-normal);
-    --mdc-checkbox-pressed-icon-color: var(--mds-color-theme-control-inactive-pressed);
-
+    
     flex-direction: row;
     align-items: flex-start;
   }
   .mdc-label, .input {
     cursor: pointer;
   }
-  :host([checked]) .icon-container,
-  :host([indeterminate]) .icon-container {
-    background: var(--mdc-checkbox-checked-background-color);
-    border: unset;
-  }
-  :host([checked]) .container:hover .icon-container,
-  :host([indeterminate]) .container:hover .icon-container {
-    background: var(--mdc-checkbox-checked-background-color-hover);
-  }
-  :host([checked]) .container:active .icon-container,
-  :host([indeterminate]) .container:active .icon-container {
-    background: var(--mdc-checkbox-checked-pressed-icon-color);
-  }
+
   :host([disabled]) .mdc-label,
   :host([disabled]) .input {
     cursor: default;
   }
-  :host([disabled]) .container:hover {
-    background: unset;
+
+  :host(:hover) mdc-staticcheckbox{
+    background: var(--mdc-checkbox-background-color-hover);
   }
-  :host([disabled]) .icon-container {
-    border-color: var(--mdc-checkbox-disabled-border-color);
-    background: var(--mdc-checkbox-disabled-background-color);
+  :host(:active) mdc-staticcheckbox{
+    background: var(--mdc-checkbox-pressed-icon-color);
   }
-  :host([disabled]) .icon {
-    --mdc-icon-fill-color: var(--mdc-checkbox-disabled-icon-color);
+
+  :host([checked]:hover)::part(icon-container),
+  :host([indeterminate]:hover)::part(icon-container) {
+    background: var(--mdc-checkbox-checked-background-color-hover);
   }
-  :host([disabled][checked]) .icon-container,
-  :host([disabled][indeterminate]) .icon-container,
-  :host([disabled][checked]) .container:hover .icon-container,
-  :host([disabled][indeterminate]) .container:hover .icon-container {
-    background: var(--mdc-checkbox-disabled-checked-icon-color);
-    border: 0.0625rem solid var(--mdc-checkbox-disabled-border-color);
+  :host([checked]:active)::part(icon-container),
+  :host([indeterminate]:active)::part(icon-container) {
+    background: var(--mdc-checkbox-checked-pressed-icon-color);
   }
+
+  :host([disabled])  mdc-staticcheckbox {
+    background: unset;
+  }
+
+  :host([disabled][checked])::part(icon-container),
+  :host([disabled][indeterminate])::part(icon-container) {
+    background-color: var(--mdc-checkbox-disabled-checked-icon-color);
+  }
+
   .input {
     margin: 0;
     padding: 0;
@@ -64,45 +53,19 @@ const styles = [css `
     overflow: visible;
     z-index: 1;
   }
-  .icon-container {
-    display: flex;
-    align-items: center;
-    border: 0.0625rem solid var(--mdc-checkbox-icon-border-color);
-    background: var(--mdc-checkbox-icon-background-color);
-  }
-  .container:hover {
-    background: var(--mdc-checkbox-background-color-hover);
-  }
-  .container:active {
-    background: var(--mdc-checkbox-pressed-icon-color);
-  }
-  .input, .icon-container {
+
+  .input {
     width: 1rem;
     height: 1rem;
-  }
-  .input,
-  .icon-container,
-  .container {
     border-radius: 0.125rem;
   }
-  .icon {
-    --mdc-icon-fill-color: var(--mdc-checkbox-icon-color);
-  }
-  .container {
-    margin: 0.125rem 0;
-  }
+ 
   .text-container {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
   }
   
-  /* High Contrast Mode */
-  @media (forced-colors: active) {
-    :host([checked]) .icon-container,
-    :host([indeterminate]) .icon-container {
-      border: 0.0625rem solid var(--mdc-checkbox-border-color);
-    }
-  }
+
 `, ...hostFocusRingStyles(true)];
 export default styles;

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

@@ -1,5 +1,6 @@
 import Checkbox from './checkbox.component';
 import '../icon';
+import '../staticcheckbox';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-checkbox']: Checkbox;

package/dist/components/checkbox/index.js

@@ -1,5 +1,6 @@
 import Checkbox from './checkbox.component';
 import { TAG_NAME } from './checkbox.constants';
 import '../icon';
+import '../staticcheckbox';
 Checkbox.register(TAG_NAME);
 export default Checkbox;

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

@@ -1,4 +1,5 @@
 import Radio from './radio.component';
+import '../staticradio';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-radio']: Radio;

package/dist/components/radio/index.js

@@ -1,4 +1,5 @@
 import Radio from './radio.component';
 import { TAG_NAME } from './radio.constants';
+import '../staticradio';
 Radio.register(TAG_NAME);
 export default Radio;

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

@@ -14,22 +14,14 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
  * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
  *
- * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
  * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
- * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled
- * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal
- * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal
- * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled
- * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive
  * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered
  * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed
- * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when
- *  inactive and disabled
- * @cssproperty --mdc-radio-control-active-color - color of the radio button when active
  * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered
  * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed
- * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button
- *  when active and disabled
+ * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled
+ * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled
+ * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled
  *
  */
 declare class Radio extends Radio_base implements AssociatedFormControl {

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

@@ -28,22 +28,14 @@ import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwra
  * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
  *
- * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
  * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
- * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled
- * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal
- * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal
- * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled
- * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive
  * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered
  * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed
- * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when
- *  inactive and disabled
- * @cssproperty --mdc-radio-control-active-color - color of the radio button when active
  * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered
  * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed
- * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button
- *  when active and disabled
+ * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled
+ * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled
+ * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled
  *
  */
 class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
@@ -279,8 +271,12 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     render() {
         var _a;
         return html `
-      <div class="mdc-radio__container">
-        <div class="mdc-radio__icon-container mdc-focus-ring">
+        <mdc-staticradio
+        class="mdc-focus-ring"
+        ?checked="${this.checked}"
+        ?disabled="${this.disabled}"
+        ?readonly="${this.readonly}"
+        >
           <input
             id="${this.id}"
             type="radio"
@@ -299,10 +295,8 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
             aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           />
-          <span class="mdc-radio__icon"></span>
-        </div>
+        </mdc-staticradio>
         ${this.renderLabelAndHelperText()}
-      </div>
     `;
     }
 }

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

@@ -2,141 +2,72 @@ import { css } from 'lit';
 import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
 const styles = [hostFitContentStyles, css `
   :host{
-    --mdc-radio-inner-circle-size: 0.375rem;
-    --mdc-radio-text-disabled-color: var(--mds-color-theme-text-primary-disabled);
-    --mdc-radio-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
-    --mdc-radio-normal-border-color: var(--mds-color-theme-outline-input-normal);
-    --mdc-radio-inner-circle-normal-background: var(--mds-color-theme-inverted-text-primary-normal);
-    --mdc-radio-inner-circle-disabled-background: var(--mds-color-theme-inverted-text-primary-disabled);
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    gap: 0.5rem;
 
-    --mdc-radio-control-inactive-color: var(--mds-color-theme-control-inactive-normal);
+    --mdc-radio-text-disabled-color: var(--mds-color-theme-text-primary-disabled);
     --mdc-radio-control-inactive-hover: var(--mds-color-theme-control-inactive-hover);
     --mdc-radio-control-inactive-pressed-color: var(--mds-color-theme-control-inactive-pressed);
-    --mdc-radio-control-inactive-disabled-background: var(--mds-color-theme-control-inactive-disabled);
-
-    --mdc-radio-control-active-color: var(--mds-color-theme-control-active-normal);
     --mdc-radio-control-active-hover-color: var(--mds-color-theme-control-active-hover);
     --mdc-radio-control-active-pressed-color: var(--mds-color-theme-control-active-pressed);
     --mdc-radio-control-active-disabled-background: var(--mds-color-theme-control-active-disabled);
-
-  }
-  :host([readonly]) .mdc-radio__input,
-  :host([disabled]) .mdc-radio__input,
-  :host([disabled]) .mdc-label,
-  :host([readonly]) .mdc-label{
-    cursor: default;
-  }
-
-  .mdc-label {
-    cursor: pointer;
-  }
-
-  :host([disabled]) .mdc-radio__label-text,
-  :host([disabled]) .mdc-radio__help-text {
-    color: var(--mdc-radio-text-disabled-color);
-  }
-
-  :host([disabled]) .mdc-radio__icon,
-  :host([disabled]) .mdc-radio__container:hover .mdc-radio__icon,
-  :host([disabled][readonly]) .mdc-radio__icon,
-  :host([disabled][readonly]) .mdc-radio__container:hover .mdc-radio__icon {
-    border-color: var(--mdc-radio-disabled-border-color);
-    background: var(--mdc-radio-control-inactive-disabled-background);
-  }
-
-  :host([disabled][checked]) .mdc-radio__icon,
-  :host([disabled][checked]) .mdc-radio__container:hover .mdc-radio__icon,
-  :host([disabled][readonly][checked]) .mdc-radio__icon,
-  :host([disabled][readonly][checked]) .mdc-radio__container:hover .mdc-radio__icon {
-    border: var(--mdc-radio-control-active-disabled-background);
-    background: var(--mdc-radio-control-active-disabled-background);
-  }
-
-  :host([disabled][checked]) .mdc-radio__icon:after,
-  :host([disabled][checked]) .mdc-radio__container:hover  .mdc-radio__icon:after,
-  :host([disabled][readonly][checked]) .mdc-radio__icon:after,
-  :host([disabled][readonly][checked]) .mdc-radio__container:hover  .mdc-radio__icon:after {
-    background: var(--mdc-radio-inner-circle-disabled-background);
-  }
-
-  :host .mdc-radio__icon {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 1rem;
-    height: 1rem;
-    border: 0.0625rem solid var(--mdc-radio-normal-border-color);
-    background-color: var(--mdc-radio-control-inactive-color);
-    border-radius: 50%;
+    --mdc-radio-control-inactive-disabled-background: var(--mds-color-theme-control-inactive-disabled);
+    --mdc-radio-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
   }
 
-  :host([checked]) .mdc-radio__icon {
-    border-color: var(--mdc-radio-control-active-color);
-    background-color: var(--mdc-radio-control-active-color);
-  }
 
-  :host([checked]) .mdc-radio__icon:after {
-    display: block;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: var(--mdc-radio-inner-circle-size);
-    height: var(--mdc-radio-inner-circle-size);
-    border-radius: 50%;
-    background: var(--mdc-radio-inner-circle-normal-background);
+  :host(:hover)::part(radio-icon) {
+    background-color: var(--mdc-radio-control-inactive-hover);
   }
 
-  :host .mdc-radio__input:hover ~ .mdc-radio__icon {
-    border-color: var(--mdc-radio-normal-border-color);
-    background-color: var(--mdc-radio-control-inactive-hover);
+  :host(:active)::part(radio-icon) {
+    background-color: var(--mdc-radio-control-inactive-pressed-color);
   }
 
-  :host([checked]) .mdc-radio__input:hover ~ .mdc-radio__icon {
+  :host([checked]:hover)::part(radio-icon) {
     border-color: var(--mdc-radio-control-active-hover-color);
     background-color: var(--mdc-radio-control-active-hover-color);
   }
 
-  :host .mdc-radio__input:active ~ .mdc-radio__icon {
-    border-color: var(--mdc-radio-normal-border-color);
-    background-color: var(--mdc-radio-control-inactive-pressed-color);
-  }
-
-  :host([checked]) .mdc-radio__input:active ~ .mdc-radio__icon {
+  :host([checked]:active)::part(radio-icon) {
     border-color: var(--mdc-radio-control-active-pressed-color);
     background-color: var(--mdc-radio-control-active-pressed-color);
   }
 
-  :host([readonly]) .mdc-radio__icon,
-  :host([readonly]) .mdc-radio__container:hover .mdc-radio__icon {
-    border-color: var(--mdc-radio-normal-border-color);
-    background-color: var(--mdc-radio-control-inactive-color);
+  :host([readonly]:hover)::part(radio-icon) {
+    border-color: var(--mdc-staticradio-normal-border-color);
+    background-color: var(--mdc-staticradio-control-inactive-color);
   }
 
-  :host([readonly][checked]) .mdc-radio__icon {
-    border-color: var(--mdc-radio-normal-border-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([readonly][checked]) .mdc-radio__icon:after,
-  :host([readonly][checked]) .mdc-radio__container:hover .mdc-radio__icon:after,
-  :host([readonly][checked]) .mdc-radio__container:active .mdc-radio__icon:after {
-    background-color: var(--mdc-radio-text-disabled-color);
+  :host([disabled][checked]:hover)::part(radio-icon){
+    background-color: var(--mdc-radio-control-active-disabled-background);
   }
 
-  .mdc-radio__container {
-    display: flex;
-    align-items: start;
-    gap: 0.5rem;
+  :host([readonly]) .mdc-radio__input,
+  :host([disabled]) .mdc-radio__input,
+  :host([disabled]) .mdc-label,
+  :host([readonly]) .mdc-label{
+    cursor: default;
   }
-  .mdc-radio__icon-container {
-    display: block;
-    position: relative;
-    width: 1rem;
-    height: 1rem;
-    margin: 0.125rem 0;
-    border-radius: 50%;
+
+  .mdc-label {
+    cursor: pointer;
   }
 
-  .mdc-radio__icon-container input{
+  :host([disabled]) .mdc-radio__label-text,
+  :host([disabled]) .mdc-radio__help-text {
+    color: var(--mdc-radio-text-disabled-color);
+  }
+
+  .mdc-radio__input{
     position: absolute;
     opacity: 0;
     margin: 0;
@@ -145,12 +76,6 @@ const styles = [hostFitContentStyles, css `
     cursor: pointer;
     z-index: 2;
   }
-  
-  .mdc-radio__icon-container .mdc-radio__icon:after {
-    content: "";
-    position: absolute;
-    display: none;
-  }
 
   .mdc-radio__label-container{
     display: flex;

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

@@ -0,0 +1,8 @@
+import StaticCheckbox from './staticcheckbox.component';
+import '../icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-staticcheckbox']: StaticCheckbox;
+    }
+}
+export default StaticCheckbox;

package/dist/components/staticcheckbox/index.js

@@ -0,0 +1,5 @@
+import StaticCheckbox from './staticcheckbox.component';
+import { TAG_NAME } from './staticcheckbox.constants';
+import '../icon';
+StaticCheckbox.register(TAG_NAME);
+export default StaticCheckbox;

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

@@ -0,0 +1,42 @@
+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.
+ *
+ * It has 3 properties - checked, indeterminate and disabled.
+ *
+ * We are using the same styling that has been created for the `mdc-checkbox` component.
+ *
+ * @tagname mdc-staticcheckbox
+ *
+ * @dependency mdc-icon
+ *
+ * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.
+ * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.
+ * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
+ * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
+ *
+ */
+declare class StaticCheckbox extends StaticCheckbox_base {
+    /**
+     * Determines whether the checkbox is selected or unselected.
+     *
+     * @default false
+     */
+    checked: boolean;
+    /**
+     * Determines whether the checkbox is in an indeterminate state.
+     *
+     * @default false
+     */
+    indeterminate: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default StaticCheckbox;