@momentum-design/components 0.129.38 → 0.129.40

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

@@ -74,15 +74,10 @@ declare class CardCheckbox extends CardCheckbox_base {
      */
     private toggleChecked;
     /**
-     * Toggles the checked state when enter key is used
+     * Handles keydown events - toggles checked on Enter and prevents space scroll
      * @param event - The keyboard event
      */
-    private toggleOnEnter;
-    /**
-     * Prevents space key from scrolling the page
-     * @param event - The keyboard event
-     */
-    private preventSpaceScroll;
+    private handleKeyDown;
     /**
      * Toggles the checked state when space key is used
      * @param event - The keyboard event

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

@@ -83,8 +83,7 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
          */
         this.selectionType = DEFAULTS.SELECTION_TYPE;
         this.addEventListener('click', this.toggleChecked.bind(this));
-        this.addEventListener('keydown', this.toggleOnEnter.bind(this));
-        this.addEventListener('keydown', this.preventSpaceScroll.bind(this));
+        this.addEventListener('keydown', this.handleKeyDown.bind(this));
         this.addEventListener('keyup', this.toggleOnSpace.bind(this));
     }
     connectedCallback() {
@@ -111,20 +110,14 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
         }
     }
     /**
-     * Toggles the checked state when enter key is used
+     * Handles keydown events - toggles checked on Enter and prevents space scroll
      * @param event - The keyboard event
      */
-    toggleOnEnter(event) {
+    handleKeyDown(event) {
         if (event.key === KEYS.ENTER) {
             this.toggleChecked();
         }
-    }
-    /**
-     * Prevents space key from scrolling the page
-     * @param event - The keyboard event
-     */
-    preventSpaceScroll(event) {
-        if (event.key === KEYS.SPACE) {
+        else if (event.key === KEYS.SPACE) {
             event.preventDefault();
         }
     }

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

@@ -81,10 +81,10 @@ declare class CardRadio extends CardRadio_base {
     update(changedProperties: PropertyValues<CardRadio>): void;
     private updateCardRadio;
     /**
-     * Toggles the checked state when enter key is used
+     * Handles keydown events - Loss checked on Enter, arrow navigation, and prevents space scroll
      * @param event - The keyboard event
      */
-    private toggleOnEnter;
+    private handleKeyDown;
     /**
      * Toggles the checked state when space key is used
      * @param event - The keyboard event

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

@@ -83,7 +83,7 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
          */
         this.name = '';
         this.addEventListener('click', this.toggleChecked.bind(this));
-        this.addEventListener('keydown', this.toggleOnEnter.bind(this));
+        this.addEventListener('keydown', this.handleKeyDown.bind(this));
         this.addEventListener('keyup', this.toggleOnSpace.bind(this));
     }
     connectedCallback() {
@@ -132,10 +132,14 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
         cards[index].toggleChecked();
     }
     /**
-     * Toggles the checked state when enter key is used
+     * Handles keydown events - Loss checked on Enter, arrow navigation, and prevents space scroll
      * @param event - The keyboard event
      */
-    toggleOnEnter(event) {
+    handleKeyDown(event) {
+        if (event.key === KEYS.SPACE) {
+            event.preventDefault();
+            return;
+        }
         if (this.disabled)
             return;
         const cards = this.getAllCardsWithinSameGroup();

package/dist/components/dialog/dialog.styles.js

@@ -22,7 +22,13 @@ const styles = css `
     position: absolute;
     right: 50%;
     bottom: 50%;
-    transform: translateX(round(to-zero, 50%, 1px)) translateY(round(to-zero, 50%, 1px));
+    transform: translateX(50%) translateY(50%);
+  }
+
+  @supports (transform: translateX(round(to-zero, 1px, 1px))) {
+    :host {
+      transform: translateX(round(to-zero, 50%, 1px)) translateY(round(to-zero, 50%, 1px));
+    }
   }
 
   :host > [part='body']:first-of-type {

package/dist/custom-elements.json

@@ -9014,6 +9014,21 @@
                 "module": "utils/mixins/DisabledMixin.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event"
+                }
+              ],
+              "description": "Handles keydown events - toggles checked on Enter and prevents space scroll"
+            },
             {
               "kind": "field",
               "name": "iconName",
@@ -9073,21 +9088,6 @@
                 "module": "components/card/card.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "preventSpaceScroll",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event"
-                }
-              ],
-              "description": "Prevents space key from scrolling the page"
-            },
             {
               "kind": "method",
               "name": "renderFooter",
@@ -9251,21 +9251,6 @@
               "privacy": "private",
               "description": "Toggles the checked state"
             },
-            {
-              "kind": "method",
-              "name": "toggleOnEnter",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event"
-                }
-              ],
-              "description": "Toggles the checked state when enter key is used"
-            },
             {
               "kind": "method",
               "name": "toggleOnSpace",
@@ -9758,6 +9743,21 @@
               },
               "description": "Returns all cards within the same group (name)."
             },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event"
+                }
+              ],
+              "description": "Handles keydown events - Loss checked on Enter, arrow navigation, and prevents space scroll"
+            },
             {
               "kind": "field",
               "name": "iconName",
@@ -9990,21 +9990,6 @@
               },
               "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
             },
-            {
-              "kind": "method",
-              "name": "toggleOnEnter",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event"
-                }
-              ],
-              "description": "Toggles the checked state when enter key is used"
-            },
             {
               "kind": "method",
               "name": "toggleOnSpace",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.129.38",
+  "version": "0.129.40",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"