@m3e/button 1.1.2 → 1.1.4

package/dist/custom-elements.json

@@ -1469,6 +1469,47 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "#handlePressedChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "pressed",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "#keyPressed",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "inheritedFrom": {
+                "name": "KeyboardClick",
+                "module": "../core/src/shared/mixins/KeyboardClick.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#keyDownHandler",
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "KeyboardClick",
+                "module": "../core/src/shared/mixins/KeyboardClick.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "#keyUpHandler",
@@ -1479,6 +1520,38 @@
                 "module": "../core/src/shared/mixins/KeyboardClick.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "#focusOutHandler",
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "KeyboardClick",
+                "module": "../core/src/shared/mixins/KeyboardClick.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "KeyboardClick",
+                "module": "../core/src/shared/mixins/KeyboardClick.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "#handleKeyUp",
@@ -3738,12 +3811,51 @@
           "description": "Mixin to augment an element with behavior emits a click event on keyboard events.",
           "name": "KeyboardClick",
           "members": [
+            {
+              "kind": "field",
+              "name": "#keyPressed",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#keyDownHandler",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#keyUpHandler",
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#focusOutHandler",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "#handleKeyUp",

package/dist/index.js

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license text.
  */
 import { unsafeCSS, css, LitElement, nothing, html } from 'lit';
-import { DesignToken, KeyboardClick, LinkButton, FormSubmitter, Focusable, DisabledInteractive, Disabled, AttachInternals, Role, ResizeController, FocusController, PressedController, renderPseudoLink, debounce, hasAssignedNodes } from '@m3e/core';
+import { DesignToken, KeyboardClick, LinkButton, FormSubmitter, Focusable, DisabledInteractive, Disabled, AttachInternals, Role, ResizeController, FocusController, PressedController, prefersReducedMotion, renderPseudoLink, debounce, hasAssignedNodes } from '@m3e/core';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1115,7 +1115,7 @@ function buttonVariantStyle(variant) {
  */
 const ButtonVariantStyle = [buttonVariantStyle("text"), buttonVariantStyle("elevated"), buttonVariantStyle("outlined"), buttonVariantStyle("filled"), buttonVariantStyle("tonal"), css`:host([variant="outlined"]) .base { outline-style: solid; }`];
 
-var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonElement_handleClick, _M3eButtonElement_handleSelectedIconSlotChange, _M3eButtonElement_updateButtonShape;
+var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonElement_handleClick, _M3eButtonElement_handleSelectedIconSlotChange, _M3eButtonElement_updateButtonShape, _M3eButtonElement_handlePressedChange;
 /**
  * A button users interact with to perform an action.
  *
@@ -1523,12 +1523,8 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick(LinkButton(F
     });
     new FocusController(this, {
       callback: focused => {
-        if (!this.disabledInteractive && this._base) {
-          if (focused) {
-            __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_updateButtonShape).call(this);
-          } else if (!this.grouped) {
-            this._base?.style.removeProperty("--_button-shape");
-          }
+        if (!this.disabledInteractive && !focused && !this.grouped) {
+          this._base?.style.removeProperty("--_button-shape");
         }
       }
     });
@@ -1537,26 +1533,15 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick(LinkButton(F
       minPressedDuration: 150,
       callback: pressed => {
         if (!this.disabled && !this.disabledInteractive) {
-          this.classList.toggle("-pressed", pressed);
-          this.classList.toggle("-resting", !pressed);
-          const group = this.closest("m3e-button-group");
-          if (group) {
-            const clientWidth = this.getBoundingClientRect().width;
-            const buttons = [...group.querySelectorAll("m3e-button,m3e-icon-button")];
-            const index = buttons.indexOf(this);
-            for (let i = 0; i < buttons.length; i++) {
-              const button = buttons[i];
-              if (i === index - 1) {
-                button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-                button.classList.toggle("-adjacent-pressed", pressed);
-              } else if (i === index + 1) {
-                button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
-                button.classList.toggle("-adjacent-pressed", pressed);
-              } else {
-                button.style.removeProperty("--_adjacent-button-width");
-                button.classList.remove("-adjacent-pressed");
-              }
+          if (pressed) {
+            __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_updateButtonShape).call(this);
+            if (prefersReducedMotion()) {
+              __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_handlePressedChange).call(this, true);
+            } else {
+              requestAnimationFrame(() => __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_handlePressedChange).call(this, true));
             }
+          } else {
+            __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_handlePressedChange).call(this, false);
           }
         }
       }
@@ -1651,6 +1636,29 @@ _M3eButtonElement_updateButtonShape = function _M3eButtonElement_updateButtonSha
     }
   }
 };
+_M3eButtonElement_handlePressedChange = function _M3eButtonElement_handlePressedChange(pressed) {
+  this.classList.toggle("-pressed", pressed);
+  this.classList.toggle("-resting", !pressed);
+  const group = this.closest("m3e-button-group");
+  if (group) {
+    const clientWidth = this.getBoundingClientRect().width;
+    const buttons = [...group.querySelectorAll("m3e-button,m3e-icon-button")];
+    const index = buttons.indexOf(this);
+    for (let i = 0; i < buttons.length; i++) {
+      const button = buttons[i];
+      if (i === index - 1) {
+        button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
+        button.classList.toggle("-adjacent-pressed", pressed);
+      } else if (i === index + 1) {
+        button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
+        button.classList.toggle("-adjacent-pressed", pressed);
+      } else {
+        button.style.removeProperty("--_adjacent-button-width");
+        button.classList.remove("-adjacent-pressed");
+      }
+    }
+  }
+};
 /** The styles of the element. */
 M3eButtonElement.styles = [ButtonSizeStyle, ButtonVariantStyle, ButtonStyle];
 __decorate([e(".base")], M3eButtonElement.prototype, "_base", void 0);