@m3e/web 2.5.5 → 2.5.7

package/dist/list.js

@@ -376,10 +376,10 @@ var M3eExpandableListItemElement_1;
  * @attr disabled - Whether the element is disabled.
  * @attr open - Whether the item is expanded.
  *
- * @fires opening - Emitted when the item begins to open.
- * @fires opened - Emitted when the item has opened.
- * @fires closing - Emitted when the item begins to close.
- * @fires closed - Emitted when the item has closed.
+ * @fires opening - Dispatched when the item begins to open.
+ * @fires opened - Dispatched when the item has opened.
+ * @fires closing - Dispatched when the item begins to close.
+ * @fires closed - Dispatched when the item has closed.
  *
  * @cssprop --m3e-expandable-list-item-toggle-icon-container-width - Width of the toggle icon container.
  * @cssprop --m3e-expandable-list-item-toggle-icon-container-shape - Border radius of the toggle icon container.
@@ -700,7 +700,7 @@ var _M3eListActionElement_instances, _M3eListActionElement_handleClick;
  * @attr rel - The relationship between the `target` of the link button and the document.
  * @attr target - The target of the link button.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-list-item-between-space - Horizontal gap between elements.
  * @cssprop --m3e-list-item-padding-inline - Horizontal padding for the list item.
@@ -822,9 +822,10 @@ var _M3eListOptionElement_instances, _M3eListOptionElement_value, _M3eListOption
  * @attr disabled - Whether the element is disabled.
  * @attr selected - Whether the element is selected.
  *
- * @fires input - Emitted when the selected state changes.
- * @fires change - Emitted when the selected state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the selected state changes.
+ * @fires input - Dispatched when the selected state changes.
+ * @fires change - Dispatched when the selected state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-list-item-between-space - Horizontal gap between elements.
  * @cssprop --m3e-list-item-padding-inline - Horizontal padding for the list item.
@@ -965,19 +966,18 @@ _M3eListOptionElement_handleClick = function _M3eListOptionElement_handleClick(e
   const selectionList = this.closest("m3e-selection-list");
   if (e.defaultPrevented || !selectionList) return;
   if (selectionList.multi || !this.selected) {
-    const selected = this.selected;
-    this.selected = !this.selected;
-    if (this.dispatchEvent(new Event("input", {
+    if (this.dispatchEvent(new Event("beforeinput", {
       bubbles: true,
-      composed: true,
       cancelable: true
     }))) {
+      this.selected = !this.selected;
       selectionList[selectionManager].notifySelectionChange(this);
+      this.dispatchEvent(new Event("input", {
+        bubbles: true
+      }));
       this.dispatchEvent(new Event("change", {
         bubbles: true
       }));
-    } else {
-      this.selected = selected;
     }
   }
 };
@@ -1009,8 +1009,9 @@ var _M3eSelectionListElement_instances, _M3eSelectionListElement_keyDownHandler,
  * @attr multi - Whether multiple items can be selected.
  * @attr variant - The appearance variant of the list.
  *
- * @fires input - Emitted when the selected state of an option changes.
- * @fires change - Emitted when the selected state of an option changes.
+ * @fires beforeinput - Dispatched before the selected state of an option changes.
+ * @fires input - Dispatched when the selected state of an option changes.
+ * @fires change - Dispatched when the selected state of an option changes.
  *
  * @cssprop --m3e-list-divider-inset-start-size - Start inset for dividers within the list.
  * @cssprop --m3e-list-divider-inset-end-size - End inset for dividers within the list.