@momentum-design/components 0.70.3 → 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);
   }