@momentum-design/components 0.62.2 → 0.62.4

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

@@ -0,0 +1,76 @@
+import { CSSResult, nothing, PropertyValues } from 'lit';
+import Card from '../card/card.component';
+import type { SelectionType } from './cardcheckbox.types';
+declare const CardCheckbox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Card;
+/**
+ * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.
+ *
+ * While using this component within a form or group of cards, make sure cards are in a role = "checkbox-group".
+ * This card would have events for selected and unselected (similar to checkbox)
+ *
+ * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
+ * Make sure to pass only non-interactable elements within the slots.
+ *
+ * Make sure to pass the `card-title` mandatorily for this card.
+ *
+ * @tagname mdc-cardcheckbox
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-staticcheckbox
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It toggles the checked state when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It toggles the checked state when space key is used.
+ * @event change - (React: onChange) Event that gets dispatched when the card state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
+ */
+declare class CardCheckbox extends CardCheckbox_base {
+    /**
+      * The checked state of the card
+      * @default false
+      */
+    checked: boolean;
+    /**
+      * The selection type of the card. It can either be set to 'check' or 'checkbox'
+      * @default 'check'
+      */
+    selectionType: SelectionType;
+    constructor();
+    connectedCallback(): void;
+    update(changedProperties: PropertyValues<CardCheckbox>): void;
+    /**
+     * Toggles the checked state
+     */
+    private toggleChecked;
+    /**
+     * Toggles the checked state when enter key is used
+     * @param event - The keyboard event
+     */
+    private toggleOnEnter;
+    /**
+     * Toggles the checked state when space key is used
+     * @param event - The keyboard event
+     */
+    private toggleOnSpace;
+    /**
+     * Renders the selection icon or checkbox based on the selection type
+     * @returns The selection icon or checkbox
+     */
+    private renderSelection;
+    /**
+     * Renders the header of the card
+     * @returns The header of the card
+     */
+    renderHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default CardCheckbox;

package/dist/components/cardcheckbox/cardcheckbox.component.js

@@ -0,0 +1,159 @@
+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 styles from './cardcheckbox.styles';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
+import Card from '../card/card.component';
+import { CHECK_MARK, DEFAULTS, SELECTION_TYPE } from './cardcheckbox.constants';
+/**
+ * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.
+ *
+ * While using this component within a form or group of cards, make sure cards are in a role = "checkbox-group".
+ * This card would have events for selected and unselected (similar to checkbox)
+ *
+ * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
+ * Make sure to pass only non-interactable elements within the slots.
+ *
+ * Make sure to pass the `card-title` mandatorily for this card.
+ *
+ * @tagname mdc-cardcheckbox
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-staticcheckbox
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It toggles the checked state when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It toggles the checked state when space key is used.
+ * @event change - (React: onChange) Event that gets dispatched when the card state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
+ */
+class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
+    constructor() {
+        super();
+        /**
+          * The checked state of the card
+          * @default false
+          */
+        this.checked = false;
+        /**
+          * The selection type of the card. It can either be set to 'check' or 'checkbox'
+          * @default 'check'
+          */
+        this.selectionType = DEFAULTS.SELECTION_TYPE;
+        this.addEventListener('click', this.toggleChecked);
+        this.addEventListener('keydown', this.toggleOnEnter);
+        this.addEventListener('keyup', this.toggleOnSpace);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = 'checkbox';
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('checked')) {
+            this.setAttribute('aria-checked', `${this.checked}`);
+        }
+        if (changedProperties.has('disabled')) {
+            this.setAttribute('aria-disabled', `${this.disabled}`);
+        }
+    }
+    /**
+     * Toggles the checked state
+     */
+    toggleChecked() {
+        if (!this.disabled) {
+            this.checked = !this.checked;
+        }
+    }
+    /**
+     * Toggles the checked state when enter key is used
+     * @param event - The keyboard event
+     */
+    toggleOnEnter(event) {
+        if (event.key === 'Enter') {
+            this.toggleChecked();
+        }
+    }
+    /**
+     * Toggles the checked state when space key is used
+     * @param event - The keyboard event
+     */
+    toggleOnSpace(event) {
+        if (event.key === ' ') {
+            this.toggleChecked();
+        }
+    }
+    /**
+     * Renders the selection icon or checkbox based on the selection type
+     * @returns The selection icon or checkbox
+     */
+    renderSelection() {
+        const ICON_NAME = this.checked ? CHECK_MARK.CHECKED : CHECK_MARK.DEFAULT;
+        switch (this.selectionType) {
+            case SELECTION_TYPE.CHECK: {
+                return html `<mdc-icon part="check check-icon" 
+                   size="${DEFAULTS.ICON_SIZE}"
+                   length-unit="${DEFAULTS.ICON_LENGTH_UNIT}" 
+                   name="${ICON_NAME}"></mdc-icon>`;
+            }
+            case SELECTION_TYPE.CHECKBOX: {
+                return html `<mdc-staticcheckbox part="check" 
+                   ?checked="${this.checked}" 
+                   ?disabled="${this.disabled}"></mdc-staticcheckbox>`;
+            }
+            default: return nothing;
+        }
+    }
+    /**
+     * Renders the header of the card
+     * @returns The header of the card
+     */
+    renderHeader() {
+        if (!this.cardTitle) {
+            return nothing;
+        }
+        return html `<div part="header">
+     ${this.renderIcon()}
+     ${this.renderTitle()}
+     ${this.renderSelection()}
+   </div>`;
+    }
+    render() {
+        return html `
+  ${this.renderImage()}
+    <div part="body">
+    ${this.renderHeader()}
+      <slot name="before-body"></slot>
+      <slot name="body"></slot>
+      <slot name="after-body"></slot>
+    </div>
+  `;
+    }
+}
+CardCheckbox.styles = [...Card.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], CardCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: String, attribute: 'selection-type' }),
+    __metadata("design:type", String)
+], CardCheckbox.prototype, "selectionType", void 0);
+export default CardCheckbox;

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

@@ -0,0 +1,15 @@
+declare const TAG_NAME: "mdc-cardcheckbox";
+declare const CHECK_MARK: {
+    readonly DEFAULT: "check-circle-bold";
+    readonly CHECKED: "check-circle-filled";
+};
+declare const SELECTION_TYPE: {
+    readonly CHECK: "check";
+    readonly CHECKBOX: "checkbox";
+};
+declare const DEFAULTS: {
+    SELECTION_TYPE: "check";
+    ICON_SIZE: number;
+    ICON_LENGTH_UNIT: string;
+};
+export { TAG_NAME, DEFAULTS, SELECTION_TYPE, CHECK_MARK };

package/dist/components/cardcheckbox/cardcheckbox.constants.js

@@ -0,0 +1,16 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('cardcheckbox');
+const CHECK_MARK = {
+    DEFAULT: 'check-circle-bold',
+    CHECKED: 'check-circle-filled',
+};
+const SELECTION_TYPE = {
+    CHECK: 'check',
+    CHECKBOX: 'checkbox',
+};
+const DEFAULTS = {
+    SELECTION_TYPE: SELECTION_TYPE.CHECK,
+    ICON_SIZE: 1.5,
+    ICON_LENGTH_UNIT: 'rem',
+};
+export { TAG_NAME, DEFAULTS, SELECTION_TYPE, CHECK_MARK };

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

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

package/dist/components/cardcheckbox/cardcheckbox.styles.js

@@ -0,0 +1,57 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  :host::part(check){
+    margin-left: auto;
+  }
+
+  :host(:hover) {
+    background-color: var(--mds-color-theme-background-primary-hover);
+  }
+
+  :host(:active) {
+    background-color: var(--mds-color-theme-background-primary-active);
+  }
+
+  :host([checked]){
+    border: 1px solid var(--mds-color-theme-outline-input-active);
+    box-shadow: 0 0 0 1px var(--mds-color-theme-outline-input-active);
+    background-color: var(--mds-color-theme-background-primary-active);
+  }
+
+  :host([checked]:hover){
+    background-color: var(--mds-color-theme-background-primary-hover);
+  }
+
+  :host([checked]:active){
+    background-color: var(--mds-color-theme-background-primary-ghost);
+  }
+
+  :host::part(check-icon){
+    color: var(--mds-color-theme-text-secondary-normal);
+  }
+
+  :host([checked])::part(check-icon){
+    color: var(--mds-color-theme-text-accent-normal);
+  }
+
+  :host([disabled]) {
+    background-color: var(--mds-color-theme-background-primary-ghost);
+    color: var(--mds-color-theme-text-primary-disabled);
+    border-color: var(--mds-color-theme-outline-primary-disabled);
+  }
+
+  :host([disabled])::part(image){
+    opacity: 0.5;
+  }
+  
+  :host([disabled])::part(check-icon){
+    color: var(--mds-color-theme-text-primary-disabled);
+  }
+`;
+export default [styles, ...hostFocusRingStyles()];

package/dist/components/cardcheckbox/cardcheckbox.types.d.ts

@@ -0,0 +1,11 @@
+import type { ValueOf } from '../../utils/types';
+import { SELECTION_TYPE } from './cardcheckbox.constants';
+type SelectionType = ValueOf<typeof SELECTION_TYPE>;
+interface Events {
+    onClickEvent: MouseEvent;
+    onKeyDownEvent: KeyboardEvent;
+    onKeyUpEvent: KeyboardEvent;
+    onFocusEvent: FocusEvent;
+    onChangeEvent: Event;
+}
+export { SelectionType, Events };

package/dist/components/cardcheckbox/cardcheckbox.types.js

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/cardcheckbox/index.js

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

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

@@ -0,0 +1,76 @@
+import { CSSResult, nothing, PropertyValues } from 'lit';
+import Card from '../card/card.component';
+declare const CardRadio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Card;
+/**
+ * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.
+ *
+ * While using this component within a form or group of cards, make sure cards are in a role = "radio-group".
+ * This card would have events for selected and unselected (similar to radio)
+ *
+ * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
+ * Make sure to pass only non-interactable elements within the slots.
+ *
+ * Make sure to pass the `card-title` mandatorily for this card.
+ *
+ * @tagname mdc-cardradio
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-staticradio
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It toggles the checked state when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It toggles the checked state when space key is used.
+ * @event change - (React: onChange) Event that gets dispatched when the card state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
+ */
+declare class CardRadio extends CardRadio_base {
+    /**
+      * The checked state of the card
+      * @default false
+      */
+    checked: boolean;
+    /**
+      * The name of the radio.
+      * @default ''
+      */
+    name: string;
+    constructor();
+    connectedCallback(): void;
+    /**
+      * Returns all cards within the same group (name).
+      */
+    private getAllCardsWithinSameGroup;
+    /**
+      * Handles the change event on the radio element.
+      * This will toggle the state of the radio element.
+      * Dispatches the change event.
+      */
+    private toggleChecked;
+    update(changedProperties: PropertyValues<CardRadio>): void;
+    /**
+     * Toggles the checked state when enter key is used
+     * @param event - The keyboard event
+     */
+    private toggleOnEnter;
+    /**
+     * Toggles the checked state when space key is used
+     * @param event - The keyboard event
+     */
+    private toggleOnSpace;
+    /**
+     * Renders the header of the card
+     * @returns The header of the card
+     */
+    renderHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default CardRadio;

package/dist/components/cardradio/cardradio.component.js

@@ -0,0 +1,155 @@
+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);
+};
+/* eslint-disable no-param-reassign */
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './cardradio.styles';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
+import Card from '../card/card.component';
+/**
+ * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.
+ *
+ * While using this component within a form or group of cards, make sure cards are in a role = "radio-group".
+ * This card would have events for selected and unselected (similar to radio)
+ *
+ * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
+ * Make sure to pass only non-interactable elements within the slots.
+ *
+ * Make sure to pass the `card-title` mandatorily for this card.
+ *
+ * @tagname mdc-cardradio
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-staticradio
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It toggles the checked state when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It toggles the checked state when space key is used.
+ * @event change - (React: onChange) Event that gets dispatched when the card state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
+ */
+class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
+    constructor() {
+        super();
+        /**
+          * The checked state of the card
+          * @default false
+          */
+        this.checked = false;
+        /**
+          * The name of the radio.
+          * @default ''
+          */
+        this.name = '';
+        this.addEventListener('click', this.toggleChecked);
+        this.addEventListener('keydown', this.toggleOnEnter);
+        this.addEventListener('keyup', this.toggleOnSpace);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = 'radio';
+    }
+    /**
+      * Returns all cards within the same group (name).
+      */
+    getAllCardsWithinSameGroup() {
+        return Array.from(document.querySelectorAll(`mdc-cardradio[name="${this.name}"]`));
+    }
+    /**
+      * Handles the change event on the radio element.
+      * This will toggle the state of the radio element.
+      * Dispatches the change event.
+      */
+    toggleChecked() {
+        if (this.disabled)
+            return;
+        const cards = this.getAllCardsWithinSameGroup();
+        cards.forEach((card) => {
+            /**
+             *  Uncheck all cards in the same group (name)
+           */
+            card.checked = false;
+        });
+        this.checked = true;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('checked')) {
+            this.setAttribute('aria-checked', `${this.checked}`);
+        }
+        if (changedProperties.has('disabled')) {
+            this.setAttribute('aria-disabled', `${this.disabled}`);
+        }
+    }
+    /**
+     * Toggles the checked state when enter key is used
+     * @param event - The keyboard event
+     */
+    toggleOnEnter(event) {
+        if (event.key === 'Enter') {
+            this.toggleChecked();
+        }
+    }
+    /**
+     * Toggles the checked state when space key is used
+     * @param event - The keyboard event
+     */
+    toggleOnSpace(event) {
+        if (event.key === ' ') {
+            this.toggleChecked();
+        }
+    }
+    /**
+     * Renders the header of the card
+     * @returns The header of the card
+     */
+    renderHeader() {
+        if (!this.cardTitle) {
+            return nothing;
+        }
+        return html `<div part="header">
+     ${this.renderIcon()}
+     ${this.renderTitle()}
+     <mdc-staticradio part="check" 
+        ?checked="${this.checked}" 
+        ?disabled="${this.disabled}"></mdc-staticradio>
+   </div>`;
+    }
+    render() {
+        return html `
+  ${this.renderImage()}
+    <div part="body">
+    ${this.renderHeader()}
+      <slot name="before-body"></slot>
+      <slot name="body"></slot>
+      <slot name="after-body"></slot>
+    </div>
+  `;
+    }
+}
+CardRadio.styles = [...Card.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], CardRadio.prototype, "checked", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], CardRadio.prototype, "name", void 0);
+export default CardRadio;

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

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

package/dist/components/cardradio/cardradio.constants.js

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

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

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

package/dist/components/cardradio/cardradio.styles.js

@@ -0,0 +1,53 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  :host::part(check){
+    margin-left: auto;
+  }
+
+  :host(:hover) {
+    background-color: var(--mds-color-theme-background-primary-hover);
+  }
+
+  :host(:active) {
+    background-color: var(--mds-color-theme-background-primary-active);
+  }
+
+  :host([checked]){
+    border: 1px solid var(--mds-color-theme-outline-input-active);
+    box-shadow: 0 0 0 1px var(--mds-color-theme-outline-input-active);
+    background-color: var(--mds-color-theme-background-primary-active);
+  }
+
+  :host([checked]:hover){
+    background-color: var(--mds-color-theme-background-primary-hover);
+  }
+
+  :host([checked]:active){
+    background-color: var(--mds-color-theme-background-primary-ghost);
+  }
+
+  :host::part(check-icon){
+    color: var(--mds-color-theme-text-secondary-normal);
+  }
+
+  :host([checked])::part(check-icon){
+    color: var(--mds-color-theme-text-accent-normal);
+  }
+
+  :host([disabled]) {
+    background-color: var(--mds-color-theme-background-primary-ghost);
+    color: var(--mds-color-theme-text-primary-disabled);
+    border-color: var(--mds-color-theme-outline-primary-disabled);
+  }
+
+  :host([disabled])::part(image){
+    opacity: 0.5;
+  }
+`;
+export default [styles, ...hostFocusRingStyles()];

package/dist/components/cardradio/cardradio.types.d.ts

@@ -0,0 +1,8 @@
+interface Events {
+    onClickEvent: MouseEvent;
+    onKeyDownEvent: KeyboardEvent;
+    onKeyUpEvent: KeyboardEvent;
+    onFocusEvent: FocusEvent;
+    onChangeEvent: Event;
+}
+export type { Events };

package/dist/components/cardradio/cardradio.types.js

@@ -0,0 +1 @@
+export {};