@momentum-design/components 0.53.8 → 0.54.0

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;

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

@@ -0,0 +1,76 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../models';
+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.
+ *
+ * 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.
+ *
+ */
+class StaticCheckbox extends DisabledMixin(Component) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Determines whether the checkbox is selected or unselected.
+         *
+         * @default false
+         */
+        this.checked = false;
+        /**
+         * Determines whether the checkbox is in an indeterminate state.
+         *
+         * @default false
+         */
+        this.indeterminate = false;
+    }
+    render() {
+        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 `<slot></slot>
+      <div part="icon-container">${checkboxIconContent}</div>`;
+    }
+}
+StaticCheckbox.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], StaticCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], StaticCheckbox.prototype, "indeterminate", void 0);
+export default StaticCheckbox;

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

@@ -0,0 +1,3 @@
+import { ICON_NAME } from '../checkbox/checkbox.constants';
+declare const TAG_NAME: "mdc-staticcheckbox";
+export { TAG_NAME, ICON_NAME };

package/dist/components/staticcheckbox/staticcheckbox.constants.js

@@ -0,0 +1,4 @@
+import utils from '../../utils/tag-name';
+import { ICON_NAME } from '../checkbox/checkbox.constants';
+const TAG_NAME = utils.constructTagName('staticcheckbox');
+export { TAG_NAME, ICON_NAME };

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

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

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

@@ -0,0 +1,60 @@
+import { css } from 'lit';
+const styles = [css `
+  :host{
+    margin: 0.125rem 0;
+    border-radius: 0.125rem;
+    --mdc-staticcheckbox-border-color: var(--mds-color-theme-outline-button-normal);
+    --mdc-staticcheckbox-checked-background-color: var(--mds-color-theme-control-active-normal);
+    --mdc-staticcheckbox-disabled-background-color: var(--mds-color-theme-control-inactive-disabled);
+    --mdc-staticcheckbox-disabled-icon-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-staticcheckbox-icon-background-color: var(--mds-color-theme-control-inactive-normal);
+    --mdc-staticcheckbox-icon-border-color: var(--mds-color-theme-outline-input-normal);
+    --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);
+  }
+
+  :host([checked])::part(icon-container),
+  :host([indeterminate])::part(icon-container) {
+    background: var(--mdc-staticcheckbox-checked-background-color);
+    border-color: transparent;
+  }
+
+  :host([disabled])::part(icon-container) {
+    border-color: var(--mdc-staticcheckbox-disabled-border-color);
+    background: 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);
+    border: 0.0625rem solid var(--mdc-staticcheckbox-disabled-border-color);
+  }
+  
+  :host::part(icon-container) {
+    display: flex;
+    align-items: center;
+    border: 0.0625rem solid var(--mdc-staticcheckbox-icon-border-color);
+    background: var(--mdc-staticcheckbox-icon-background-color);
+    width: 1rem;
+    height: 1rem;
+    border-radius: 0.125rem;
+  }
+
+  .icon {
+    --mdc-icon-fill-color: var(--mdc-staticcheckbox-icon-color);
+  }
+
+  :host([disabled]) .icon {
+    --mdc-icon-fill-color: var(--mdc-staticcheckbox-disabled-icon-color);
+  }
+
+  /* High Contrast Mode */
+  @media (forced-colors: active) {
+    :host([checked])::part(icon-container)
+    :host([indeterminate])::part(icon-container) {
+      border: 0.0625rem solid var(--mdc-staticcheckbox-border-color);
+    }
+  }
+`];
+export default styles;

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

@@ -0,0 +1,7 @@
+import DecorativeRadio from './staticradio.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-decorative-radio']: DecorativeRadio;
+    }
+}
+export default DecorativeRadio;

package/dist/components/staticradio/index.js

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

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

@@ -0,0 +1,41 @@
+import { CSSResult } from 'lit';
+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.
+ *
+ * We are using the same styling that has been created for the `mdc-radio` component.
+ *
+ * @tagname mdc-staticradio
+ *
+ * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle
+ * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled
+ * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal
+ * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled
+ * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal
+ * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled
+ * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive
+ * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when
+ *  inactive and disabled
+ * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active
+ * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button
+ *  when active and disabled
+ */
+declare class StaticRadio extends StaticRadio_base {
+    /**
+    * Determines whether the radio is selected or unselected.
+    *
+    * @default false
+    */
+    checked: boolean;
+    /**
+    * Determines whether the radio is read-only.
+    *
+    * @default false
+    */
+    readonly: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default StaticRadio;

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

@@ -0,0 +1,67 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../models';
+import styles from './staticradio.styles';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+/**
+ * This is a decorative component that is styled to look as a radio.
+ * It has 2 properties - checked and disabled.
+ *
+ * We are using the same styling that has been created for the `mdc-radio` component.
+ *
+ * @tagname mdc-staticradio
+ *
+ * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle
+ * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled
+ * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal
+ * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled
+ * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal
+ * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled
+ * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive
+ * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when
+ *  inactive and disabled
+ * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active
+ * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button
+ *  when active and disabled
+ */
+class StaticRadio extends DisabledMixin(Component) {
+    constructor() {
+        super(...arguments);
+        /**
+        * Determines whether the radio is selected or unselected.
+        *
+        * @default false
+        */
+        this.checked = false;
+        /**
+        * Determines whether the radio is read-only.
+        *
+        * @default false
+        */
+        this.readonly = false;
+    }
+    render() {
+        return html `
+      <slot></slot>
+      <span part="radio-icon" class="icon"></span>`;
+    }
+}
+StaticRadio.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], StaticRadio.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], StaticRadio.prototype, "readonly", void 0);
+export default StaticRadio;

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

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-staticradio";
+export { TAG_NAME };

package/dist/components/staticradio/staticradio.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('staticradio');
+export { TAG_NAME };

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

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;