@momentum-design/components 0.84.3 → 0.84.4

package/dist/components/card/card.styles.js

@@ -6,83 +6,85 @@ const styles = css `
     border-radius: 0.5rem;
     border: 1px solid var(--mds-color-theme-outline-primary-normal);
     box-shadow: none;
-  transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
-  :host([variant='ghost']){
+  :host([variant='ghost']) {
     border-color: transparent;
   }
-  :host([orientation="horizontal"]){
+  :host([orientation='horizontal']) {
     max-width: 40rem;
   }
 
-  :host([orientation="vertical"]){
+  :host([orientation='vertical']) {
     max-width: 20rem;
     flex-direction: column;
   }
-  
-  :host([orientation="vertical"])::part(image){
+
+  :host([orientation='vertical'])::part(image) {
     height: 12.5rem;
     width: 100%;
     border-top-left-radius: 0.5rem;
     border-top-right-radius: 0.5rem;
   }
-  
-  :host([orientation="horizontal"])::part(image){
+
+  :host([orientation='horizontal'])::part(image) {
     width: 10rem;
     height: 100%;
     border-top-left-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem;
   }
 
-  :host::part(header){
+  :host::part(header) {
     display: flex;
     gap: 0.5rem;
   }
 
-  :host::part(icon){
+  :host::part(icon) {
     margin-top: 0.25rem;
   }
 
-  :host::part(body){
+  :host::part(body) {
     width: 100%;
     padding: 1.5rem;
     display: flex;
     flex-direction: column;
   }
 
-  ::slotted([slot='body']){
+  ::slotted([slot='body']) {
     padding-bottom: 0.5rem;
     margin-top: 0.75rem;
   }
 
-  :host([variant='promotional']){
+  :host([variant='promotional']) {
     border-color: var(--mds-color-theme-outline-promotion-normal);
   }
 
-  :host(:dir(ltr))::part(icon-button), :host(:dir(ltr))::part(footer) {
+  :host(:dir(ltr))::part(icon-button),
+  :host(:dir(ltr))::part(footer) {
     margin-left: auto;
   }
 
-  :host(:dir(rtl))::part(icon-button), :host(:dir(rtl))::part(footer) {
+  :host(:dir(rtl))::part(icon-button),
+  :host(:dir(rtl))::part(footer) {
     margin-right: auto;
   }
 
-  :host::part(icon-button), :host::part(footer) {
+  :host::part(icon-button),
+  :host::part(footer) {
     display: flex;
     gap: 0.5rem;
     align-items: center;
     justify-content: center;
   }
 
-  :host::part(footer){
+  :host::part(footer) {
     gap: 1rem;
   }
-  
-  ::slotted([slot='footer-link']), 
-  ::slotted([slot='footer-button-primary']), 
-  ::slotted([slot='footer-button-secondary']){
+
+  ::slotted([slot='footer-link']),
+  ::slotted([slot='footer-button-primary']),
+  ::slotted([slot='footer-button-secondary']) {
     margin-bottom: 0.5rem;
   }
-
 `;
 export default [hostFitContentStyles, styles];

package/dist/components/cardbutton/cardbutton.component.js

@@ -1,8 +1,8 @@
 import { html, nothing } from 'lit';
-import styles from './cardbutton.styles';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import Card from '../card/card.component';
 import { CardComponentMixin } from '../../utils/mixins/CardComponentMixin';
+import styles from './cardbutton.styles';
 /**
  * cardbutton component looks like a card and behaves as a button component.
  *
@@ -40,21 +40,18 @@ class CardButton extends CardComponentMixin(Buttonsimple) {
         if (!this.cardTitle) {
             return nothing;
         }
-        return html `<div part="header">
-     ${this.renderIcon()}
-     ${this.renderTitle()}
-   </div>`;
+        return html `<div part="header">${this.renderIcon()} ${this.renderTitle()}</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>
-  `;
+      <div part="body">
+        ${this.renderHeader()}
+        <slot name="before-body"></slot>
+        <slot name="body"></slot>
+        <slot name="after-body"></slot>
+      </div>
+    `;
     }
 }
 CardButton.styles = [...Card.styles, ...styles];

package/dist/components/cardbutton/cardbutton.styles.js

@@ -19,7 +19,7 @@ const styles = css `
     color: var(--mds-color-theme-text-primary-disabled);
   }
 
-  :host([disabled])::part(image){
+  :host([disabled])::part(image) {
     opacity: 0.5;
   }
 `;

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

@@ -34,14 +34,14 @@ declare const CardCheckbox_base: import("../../utils/mixins/index.types").Constr
  */
 declare class CardCheckbox extends CardCheckbox_base {
     /**
-      * The checked state of the card
-      * @default false
-      */
+     * 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'
-      */
+     * The selection type of the card. It can either be set to 'check' or 'checkbox'
+     * @default 'check'
+     */
     selectionType: SelectionType;
     constructor();
     connectedCallback(): void;

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

@@ -9,12 +9,12 @@ var __metadata = (this && this.__metadata) || function (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';
 import { ROLE } from '../../utils/roles';
+import { CHECK_MARK, DEFAULTS, SELECTION_TYPE } from './cardcheckbox.constants';
+import styles from './cardcheckbox.styles';
 /**
  * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.
  *
@@ -49,14 +49,14 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
     constructor() {
         super();
         /**
-          * The checked state of the card
-          * @default false
-          */
+         * 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'
-          */
+         * 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);
@@ -110,17 +110,22 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
         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>`;
+                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>`;
+                return html `<mdc-staticcheckbox
+          part="check"
+          ?checked="${this.checked}"
+          ?disabled="${this.disabled}"
+        ></mdc-staticcheckbox>`;
             }
-            default: return nothing;
+            default:
+                return nothing;
         }
     }
     /**
@@ -131,22 +136,18 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
         if (!this.cardTitle) {
             return nothing;
         }
-        return html `<div part="header">
-     ${this.renderIcon()}
-     ${this.renderTitle()}
-     ${this.renderSelection()}
-   </div>`;
+        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>
-  `;
+      ${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];

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

@@ -6,11 +6,11 @@ const styles = css `
     user-select: none;
   }
 
-  :host(:dir(ltr))::part(check){
+  :host(:dir(ltr))::part(check) {
     margin-left: auto;
   }
 
-  :host(:dir(rtl))::part(check){
+  :host(:dir(rtl))::part(check) {
     margin-right: auto;
   }
 
@@ -22,25 +22,25 @@ const styles = css `
     background-color: var(--mds-color-theme-background-primary-active);
   }
 
-  :host([checked]){
+  :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){
+  :host([checked]:hover) {
     background-color: var(--mds-color-theme-background-primary-hover);
   }
 
-  :host([checked]:active){
+  :host([checked]:active) {
     background-color: var(--mds-color-theme-background-primary-ghost);
   }
 
-  :host::part(check-icon){
+  :host::part(check-icon) {
     color: var(--mds-color-theme-text-secondary-normal);
   }
 
-  :host([checked])::part(check-icon){
+  :host([checked])::part(check-icon) {
     color: var(--mds-color-theme-text-accent-normal);
   }
 
@@ -50,11 +50,11 @@ const styles = css `
     border-color: var(--mds-color-theme-outline-primary-disabled);
   }
 
-  :host([disabled])::part(image){
+  :host([disabled])::part(image) {
     opacity: 0.5;
   }
-  
-  :host([disabled])::part(check-icon){
+
+  :host([disabled])::part(check-icon) {
     color: var(--mds-color-theme-text-primary-disabled);
   }
 `;

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

@@ -33,26 +33,26 @@ declare const CardRadio_base: import("../../utils/mixins/index.types").Construct
  */
 declare class CardRadio extends CardRadio_base {
     /**
-      * The checked state of the card
-      * @default false
-      */
+     * The checked state of the card
+     * @default false
+     */
     checked: boolean;
     /**
-      * The name of the radio.
-      * @default ''
-      */
+     * The name of the radio.
+     * @default ''
+     */
     name: string;
     constructor();
     connectedCallback(): void;
     /**
-      * Returns all cards within the same group (name).
-      */
+     * 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.
-      */
+     * Handles the change event on the radio element.
+     * This will toggle the state of the radio element.
+     * Dispatches the change event.
+     */
     private toggleChecked;
     setDisabled(disabled: boolean): void;
     update(changedProperties: PropertyValues<CardRadio>): void;

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

@@ -10,11 +10,11 @@ var __metadata = (this && this.__metadata) || function (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';
 import { ROLE } from '../../utils/roles';
+import styles from './cardradio.styles';
 /**
  * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.
  *
@@ -49,14 +49,14 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
     constructor() {
         super();
         /**
-          * The checked state of the card
-          * @default false
-          */
+         * The checked state of the card
+         * @default false
+         */
         this.checked = false;
         /**
-          * The name of the radio.
-          * @default ''
-          */
+         * The name of the radio.
+         * @default ''
+         */
         this.name = '';
         this.addEventListener('click', this.toggleChecked);
         this.addEventListener('keydown', this.toggleOnEnter);
@@ -67,24 +67,24 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
         this.role = ROLE.RADIO;
     }
     /**
-      * Returns all cards within the same group (name).
-      */
+     * 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.
-      */
+     * 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) => {
+        cards.forEach(card => {
             /**
              *  Uncheck all cards in the same group (name)
-           */
+             */
             card.checked = false;
         });
         this.checked = true;
@@ -114,7 +114,7 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
         if (this.disabled)
             return;
         const cards = this.getAllCardsWithinSameGroup();
-        const enabledCards = cards.filter((card) => !card.disabled);
+        const enabledCards = cards.filter(card => !card.disabled);
         const currentIndex = enabledCards.indexOf(this);
         if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
             // Move focus to the next radio
@@ -148,23 +148,20 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
             return nothing;
         }
         return html `<div part="header">
-     ${this.renderIcon()}
-     ${this.renderTitle()}
-     <mdc-staticradio part="check" 
-        ?checked="${this.checked}" 
-        ?disabled="${this.disabled}"></mdc-staticradio>
-   </div>`;
+      ${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>
-  `;
+      ${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];

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

@@ -6,11 +6,11 @@ const styles = css `
     user-select: none;
   }
 
-  :host(:dir(ltr))::part(check){
+  :host(:dir(ltr))::part(check) {
     margin-left: auto;
   }
 
-  :host(:dir(rtl))::part(check){
+  :host(:dir(rtl))::part(check) {
     margin-right: auto;
   }
 
@@ -22,25 +22,25 @@ const styles = css `
     background-color: var(--mds-color-theme-background-primary-active);
   }
 
-  :host([checked]){
+  :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){
+  :host([checked]:hover) {
     background-color: var(--mds-color-theme-background-primary-hover);
   }
 
-  :host([checked]:active){
+  :host([checked]:active) {
     background-color: var(--mds-color-theme-background-primary-ghost);
   }
 
-  :host::part(check-icon){
+  :host::part(check-icon) {
     color: var(--mds-color-theme-text-secondary-normal);
   }
 
-  :host([checked])::part(check-icon){
+  :host([checked])::part(check-icon) {
     color: var(--mds-color-theme-text-accent-normal);
   }
 
@@ -50,7 +50,7 @@ const styles = css `
     border-color: var(--mds-color-theme-outline-primary-disabled);
   }
 
-  :host([disabled])::part(image){
+  :host([disabled])::part(image) {
     opacity: 0.5;
   }
 `;

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

@@ -66,10 +66,7 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         this.renderLabelAndHelperText = () => {
             if (!this.label)
                 return nothing;
-            return html `<div class="text-container">
-      ${this.renderLabel()}
-      ${this.renderHelperText()}
-    </div>`;
+            return html `<div class="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
         };
     }
     connectedCallback() {
@@ -165,11 +162,12 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
     render() {
         var _a;
         return html `
-      <mdc-staticcheckbox 
-      class="mdc-focus-ring"
-      ?checked="${this.checked}" 
-      ?indeterminate="${this.indeterminate}" 
-      ?disabled="${this.disabled}">
+      <mdc-staticcheckbox
+        class="mdc-focus-ring"
+        ?checked="${this.checked}"
+        ?indeterminate="${this.indeterminate}"
+        ?disabled="${this.disabled}"
+      >
         <input
           id="${this.id}"
           type="checkbox"