@m3e/web 2.5.5 → 2.5.6

package/dist/icon-button.js

@@ -579,9 +579,10 @@ var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIco
  * @attr variant - The appearance variant of the button.
  * @attr width - The width of the button.
  *
+ * @fires beforeinput - Dispatched before a toggle button's selected state changes.
  * @fires input - Dispatched when a toggle button's selected state changes.
  * @fires change - Dispatched when a toggle button's selected state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-icon-button-container-height - Height of the container for all size variants.
  * @cssprop --m3e-icon-button-outline-thickness - Outline thickness for all size variants.
@@ -996,19 +997,17 @@ _M3eIconButtonElement_handleClick = function _M3eIconButtonElement_handleClick(e
     e.stopImmediatePropagation();
   }
   if (this.toggle && !e.defaultPrevented) {
-    this.selected = !this.selected;
-    // Dispatch an input event and if not prevented, dispatch a change event.
-    // Otherwise, reset the selected state.
-    if (this.dispatchEvent(new Event("input", {
+    if (this.dispatchEvent(new Event("beforeinput", {
       bubbles: true,
-      composed: true,
       cancelable: true
     }))) {
+      this.selected = !this.selected;
+      this.dispatchEvent(new Event("input", {
+        bubbles: true
+      }));
       this.dispatchEvent(new Event("change", {
         bubbles: true
       }));
-    } else {
-      this.selected = !this.selected;
     }
   }
 };