@momentum-design/components 0.70.2 → 0.70.4

package/dist/components/card/card.constants.js

@@ -6,7 +6,7 @@ const TAG_NAME = utils.constructTagName('card');
 const VARIANTS = {
     BORDER: 'border',
     GHOST: 'ghost',
-    PROMOTIONAL: 'promotional', // This is applicable only on interactive-card
+    PROMOTIONAL: 'promotional',
 };
 const ORIENTATIONS = {
     HORIZONTAL: 'horizontal',

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

@@ -12,11 +12,11 @@ const styles = css `
     border-color: transparent;
   }
   :host([orientation="horizontal"]){
-    width: 40rem;
+    max-width: 40rem;
   }
 
   :host([orientation="vertical"]){
-    width: 20rem;
+    max-width: 20rem;
     flex-direction: column;
   }
   
@@ -59,16 +59,25 @@ const styles = css `
     border-color: var(--mds-color-theme-outline-promotion-normal);
   }
 
-  :host::part(icon-button), :host::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) {
+    margin-right: auto;
+  }
+
+  :host::part(icon-button), :host::part(footer) {
     display: flex;
     gap: 0.5rem;
     align-items: center;
     justify-content: center;
   }
+
   :host::part(footer){
     gap: 1rem;
   }
+  
   ::slotted([slot='footer-link']), 
   ::slotted([slot='footer-button-primary']), 
   ::slotted([slot='footer-button-secondary']){

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

@@ -14,6 +14,7 @@ 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';
 /**
  * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.
  *
@@ -63,7 +64,7 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.role = 'checkbox';
+        this.role = ROLE.CHECKBOX;
     }
     update(changedProperties) {
         super.update(changedProperties);
@@ -72,6 +73,7 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
         }
         if (changedProperties.has('disabled')) {
             this.setAttribute('aria-disabled', `${this.disabled}`);
+            this.tabIndex = this.disabled ? -1 : 0;
         }
     }
     /**
@@ -153,7 +155,7 @@ __decorate([
     __metadata("design:type", Boolean)
 ], CardCheckbox.prototype, "checked", void 0);
 __decorate([
-    property({ type: String, attribute: 'selection-type' }),
+    property({ type: String, attribute: 'selection-type', reflect: true }),
     __metadata("design:type", String)
 ], CardCheckbox.prototype, "selectionType", void 0);
 export default CardCheckbox;

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

@@ -6,10 +6,14 @@ const styles = css `
     user-select: none;
   }
 
-  :host::part(check){
+  :host(:dir(ltr))::part(check){
     margin-left: auto;
   }
 
+  :host(:dir(rtl))::part(check){
+    margin-right: auto;
+  }
+
   :host(:hover) {
     background-color: var(--mds-color-theme-background-primary-hover);
   }

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

@@ -54,7 +54,9 @@ declare class CardRadio extends CardRadio_base {
       * Dispatches the change event.
       */
     private toggleChecked;
+    setDisabled(disabled: boolean): void;
     update(changedProperties: PropertyValues<CardRadio>): void;
+    private updateCardRadio;
     /**
      * Toggles the checked state when enter key is used
      * @param event - The keyboard event

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

@@ -14,6 +14,7 @@ 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';
 /**
  * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.
  *
@@ -63,7 +64,7 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.role = 'radio';
+        this.role = ROLE.RADIO;
     }
     /**
       * Returns all cards within the same group (name).
@@ -88,20 +89,43 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
         });
         this.checked = true;
     }
+    setDisabled(disabled) {
+        this.setAttribute('aria-disabled', `${disabled}`);
+        this.tabIndex = disabled ? -1 : 0;
+    }
     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}`);
+            this.setDisabled(this.disabled);
         }
     }
+    updateCardRadio(cards, index) {
+        cards[index].focus();
+        cards[index].toggleChecked();
+    }
     /**
      * Toggles the checked state when enter key is used
      * @param event - The keyboard event
      */
     toggleOnEnter(event) {
+        if (this.disabled)
+            return;
+        const cards = this.getAllCardsWithinSameGroup();
+        const enabledCards = cards.filter((card) => !card.disabled);
+        const currentIndex = enabledCards.indexOf(this);
+        if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
+            // Move focus to the next radio
+            const nextIndex = (currentIndex + 1) % enabledCards.length;
+            this.updateCardRadio(enabledCards, nextIndex);
+        }
+        else if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {
+            // Move focus to the previous radio
+            const prevIndex = (currentIndex - 1 + enabledCards.length) % enabledCards.length;
+            this.updateCardRadio(enabledCards, prevIndex);
+        }
         if (event.key === 'Enter') {
             this.toggleChecked();
         }

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

@@ -6,10 +6,14 @@ const styles = css `
     user-select: none;
   }
 
-  :host::part(check){
+  :host(:dir(ltr))::part(check){
     margin-left: auto;
   }
 
+  :host(:dir(rtl))::part(check){
+    margin-right: auto;
+  }
+
   :host(:hover) {
     background-color: var(--mds-color-theme-background-primary-hover);
   }

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

@@ -2,6 +2,7 @@ import type { PropertyValues, TemplateResult } from 'lit';
 import { CSSResult } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+import type { IconNames } from '../icon/icon.types';
 declare const Select_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
@@ -45,6 +46,8 @@ declare class Select extends Select_base implements AssociatedFormControl {
     /** @internal */
     selectedValueText?: string;
     /** @internal */
+    selectedIcon?: IconNames | null;
+    /** @internal */
     selectedValue: string;
     /** @internal */
     displayPopover: boolean;

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

@@ -143,6 +143,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     setSelectedValue(option) {
         var _a, _b, _c, _d;
         this.selectedValueText = (_b = (_a = option === null || option === void 0 ? void 0 : option.getAttribute('label')) !== null && _a !== void 0 ? _a : option === null || option === void 0 ? void 0 : option.textContent) !== null && _b !== void 0 ? _b : '';
+        this.selectedIcon = option === null || option === void 0 ? void 0 : option.getAttribute('prefix-icon');
         this.selectedValue = (_d = (_c = option === null || option === void 0 ? void 0 : option.getAttribute('value')) !== null && _c !== void 0 ? _c : option === null || option === void 0 ? void 0 : option.textContent) !== null && _d !== void 0 ? _d : '';
         // Set form value
         this.internals.setFormValue(this.selectedValue);
@@ -176,6 +177,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     formResetCallback() {
         this.selectedValue = '';
         this.selectedValueText = undefined;
+        this.selectedIcon = null;
         this.internals.setFormValue(this.selectedValue);
         this.updateTabIndexForAllOptions();
     }
@@ -486,6 +488,9 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           aria-labelledby="${this.label ? FORMFIELD_DEFAULTS.HEADING_ID : ''}"
           aria-expanded="${this.displayPopover ? 'true' : 'false'}"
         >
+      ${this.selectedIcon
+            ? html `<mdc-icon length-unit="rem" size="1" name="${this.selectedIcon}" part="selected-icon"></mdc-icon>`
+            : nothing}
           <mdc-text
             part="base-text ${this.selectedValueText ? 'selected' : ''}"
             type="${TYPE.BODY_MIDSIZE_REGULAR}"
@@ -529,6 +534,10 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], Select.prototype, "selectedValueText", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Select.prototype, "selectedIcon", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)

package/dist/components/select/select.styles.js

@@ -42,6 +42,7 @@ const styles = css `
     background: var(--mdc-select-background-color);
     display: flex;
     gap: 0.375rem;
+    align-items: center;
     user-select: none;
   }
   :host::part(base-container):hover {
@@ -61,6 +62,9 @@ const styles = css `
   :host::part(selected) {
     color: var(--mdc-select-selected-text-color);
   }
+  :host::part(selected-icon) {
+    flex-shrink: 0;
+  }
   :host::part(icon-container) {
     margin-left: auto;
     display: flex;