@m3e/icon-button 1.1.1 → 1.1.3

package/dist/custom-elements.json

@@ -948,6 +948,24 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "#handlePressedChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "pressed",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "#handleClick",
@@ -984,6 +1002,29 @@
                 }
               ]
             },
+            {
+              "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",
@@ -994,6 +1035,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",
@@ -3276,12 +3349,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.
@@ -955,7 +955,7 @@ function iconButtonVariantStyle(variant) {
  */
 const IconButtonVariantStyle = [iconButtonVariantStyle("standard"), iconButtonVariantStyle("outlined"), iconButtonVariantStyle("filled"), iconButtonVariantStyle("tonal"), iconButtonVariantStyle("elevated"), css`:host([variant="outlined"]) .base { outline-style: solid; }`];
 
-var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIconButtonElement_updateButtonShape, _M3eIconButtonElement_handleClick, _M3eIconButtonElement_handleSelectedIconSlotChange;
+var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIconButtonElement_updateButtonShape, _M3eIconButtonElement_handlePressedChange, _M3eIconButtonElement_handleClick, _M3eIconButtonElement_handleSelectedIconSlotChange;
 /**
  * An icon button users interact with to perform a supplementary action.
  *
@@ -1249,12 +1249,8 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick(Link
     });
     new FocusController(this, {
       callback: focused => {
-        if (!this.disabledInteractive && this._base) {
-          if (focused) {
-            __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_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");
         }
       }
     });
@@ -1263,26 +1259,15 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick(Link
       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, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_updateButtonShape).call(this);
+            if (prefersReducedMotion()) {
+              __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handlePressedChange).call(this, true);
+            } else {
+              requestAnimationFrame(() => __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handlePressedChange).call(this, true));
             }
+          } else {
+            __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handlePressedChange).call(this, false);
           }
         }
       }
@@ -1352,6 +1337,29 @@ _M3eIconButtonElement_updateButtonShape = function _M3eIconButtonElement_updateB
     }
   }
 };
+_M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_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");
+      }
+    }
+  }
+};
 _M3eIconButtonElement_handleClick = function _M3eIconButtonElement_handleClick(e) {
   if (this.disabled || this.disabledInteractive) {
     e.preventDefault();