@m3e/web 2.5.5 → 2.5.6

package/dist/all.js

@@ -403,9 +403,9 @@ var M3eAutocompleteElement_1;
  * @slot loading - Renders content when loading options.
  * @slot no-data - Renders content when there are no options to show.
  *
- * @fires toggle - Emitted when the options menu opens or closes.
- * @fires query - Emitted when the input is focused or when the user modifies its value.
- * @fires change - Emitted when the committed value changes due to selecting an option or clearing the input.
+ * @fires toggle - Dispatched when the options menu opens or closes.
+ * @fires query - Dispatched when the input is focused or when the user modifies its value.
+ * @fires change - Dispatched when the committed value changes due to selecting an option or clearing the input.
  */
 let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteElement extends HtmlFor$1(LitElement) {
   constructor() {
@@ -1468,11 +1468,11 @@ var M3eBottomSheetElement_1;
  * @attr open - Whether the bottom sheet is open.
  * @attr overshoot-limit - A fractional value, between 0 and 100, indicating the maximum visual overshoot allowed when dragging past the minimum or maximum size.
  *
- * @fires opening - Emitted when the sheet begins to open.
- * @fires opened - Emitted when the sheet has opened.
- * @fires cancel - Emitted when the sheet is cancelled.
- * @fires closing - Emitted when the sheet begins to close.
- * @fires closed - Emitted when the sheet has closed.
+ * @fires opening - Dispatched when the sheet begins to open.
+ * @fires opened - Dispatched when the sheet has opened.
+ * @fires cancel - Dispatched when the sheet is cancelled.
+ * @fires closing - Dispatched when the sheet begins to close.
+ * @fires closed - Dispatched when the sheet has closed.
  *
  * @cssprop --m3e-bottom-sheet-width - The width of the sheet.
  * @cssprop --m3e-bottom-sheet-max-width - The maximum width of the sheet.
@@ -2358,7 +2358,7 @@ var _M3eBreadcrumbItemElement_instances, _M3eBreadcrumbItemElement_defaultSepara
  * @attr download - A value indicating whether the internal link target will be downloaded, optionally specifying a file name.
  * @attr rel - The relationship between the internal link target and the document.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-breadcrumb-item-shape - Shape of the internal breadcrumb item button.
  * @cssprop --m3e-breadcrumb-item-container-height - Height of the internal breadcrumb item button container.
@@ -3196,9 +3196,10 @@ var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonEleme
  * @attr value - The value associated with the element's name when it's submitted with form data.
  * @attr variant - The appearance variant 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-button-container-height - Height of the button container, for all size variants.
  * @cssprop --m3e-button-outline-thickness - Thickness of the button outline, for all size variants.
@@ -3710,19 +3711,17 @@ _M3eButtonElement_handleClick = function _M3eButtonElement_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;
     }
   }
 };
@@ -4592,7 +4591,7 @@ var _M3eCalendarElement_instances, _M3eCalendarElement_transitionComplete, _M3eC
  * @attr previous-multi-year-label - The accessible label given to the button used to move to the previous 24 years.
  * @attr next-multi-year-label - The accessible label given to the button used to move to the next 24 years.
  *
- * @fires change - Emitted when the selected date changes.
+ * @fires change - Dispatched when the selected date changes.
  *
  * @cssprop --m3e-calendar-container-color - Background color of the container surface.
  * @cssprop --m3e-calendar-container-elevation - Elevation shadow applied to the container surface.
@@ -5244,7 +5243,7 @@ var _M3eCardElement_instances, _M3eCardElement_clickHandler, _M3eCardElement_han
  * @attr orientation - The orientation of the card.
  * @attr variant - The appearance variant of the card.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-card-padding - Internal spacing for all slotted regions
  * @cssprop --m3e-card-shape - Corner radius of the card container.
@@ -5476,10 +5475,11 @@ var _M3eCheckboxElement_instances, _M3eCheckboxElement_clickHandler, _M3eCheckbo
  * @attr required - Whether the element is required.
  * @attr value - A string representing the value of the checkbox.
  *
- * @fires input - Emitted when the checked state changes.
- * @fires invalid - Emitted when a form is submitted and the element fails constraint validation.
- * @fires change - Emitted when the checked state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the checked state changes.
+ * @fires input - Dispatched when the checked state changes.
+ * @fires invalid - Dispatched when a form is submitted and the element fails constraint validation.
+ * @fires change - Dispatched when the checked state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-checkbox-icon-size - Size of the checkbox icon inside the container.
  * @cssprop --m3e-checkbox-container-size - Base size of the checkbox container.
@@ -5589,18 +5589,18 @@ _M3eCheckboxElement_renderIcon = function _M3eCheckboxElement_renderIcon() {
 };
 _M3eCheckboxElement_handleClick = function _M3eCheckboxElement_handleClick(e) {
   if (e.defaultPrevented) return;
-  this.checked = !this.checked;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.checked = !this.checked;
     this.indeterminate = false;
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.checked = !this.checked;
   }
   // Prevent default avoids double-click in FireFox.
   if (this.closest("label")) {
@@ -5786,7 +5786,7 @@ M3eChipElement = __decorate([customElement$1("m3e-chip")], M3eChipElement);
  * @attr value - A string representing the value of the chip.
  * @attr variant - The appearance variant of the chip.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
  * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
@@ -5899,9 +5899,10 @@ var _M3eFilterChipElement_instances, _M3eFilterChipElement_clickHandler, _M3eFil
  * @attr value - A string representing the value of the chip.
  * @attr variant - The appearance variant of the chip.
  *
- * @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-chip-container-shape - Border radius of the chip container.
  * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
@@ -5980,19 +5981,18 @@ _M3eFilterChipElement_clickHandler = new WeakMap();
 _M3eFilterChipElement_instances = new WeakSet();
 _M3eFilterChipElement_handleClick = function _M3eFilterChipElement_handleClick(e) {
   if (e.defaultPrevented) return;
-  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;
     this.closest("m3e-filter-chip-set")?.[selectionManager].notifySelectionChange(this);
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.selected = selected;
   }
 };
 /** Indicates that this custom element participates in form submission, validation, and form state restoration. */
@@ -6034,8 +6034,9 @@ var _M3eFilterChipSetElement_instances, _M3eFilterChipSetElement_directionalityS
  * @attr name - The name that identifies the element when submitting the associated form.
  * @attr vertical - Whether the element is oriented vertically.
  *
- * @fires input - Emitted when the selected state of a chip changes.
- * @fires change - Emitted when the selected state of a chip changes.
+ * @fires beforeinput - Dispatched before the selected state of a chip changes.
+ * @fires input - Dispatched when the selected state of a chip changes.
+ * @fires change - Dispatched when the selected state of a chip changes.
  *
  * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.
  */
@@ -6194,8 +6195,8 @@ var _M3eInputChipElement_instances, _M3eInputChipElement_handleAvatarSlotChange,
  * @attr value - A string representing the value of the chip.
  * @attr variant - The appearance variant of the chip.
  *
- * @fires remove - Emitted when the remove button is clicked or DELETE or BACKSPACE key is pressed.
- * @fires click - Emitted when the element is clicked.
+ * @fires remove - Dispatched when the remove button is clicked or DELETE or BACKSPACE key is pressed.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
  * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
@@ -6336,7 +6337,7 @@ var _M3eInputChipSetElement_instances, _M3eInputChipSetElement_directionalitySub
  * @attr required - Whether a value is required for the element.
  * @attr vertical - Whether the element is oriented vertically.
  *
- * @fires change - Emitted when a chip is added to, or removed from, the set.
+ * @fires change - Dispatched when a chip is added to, or removed from, the set.
  *
  * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.
  */
@@ -6613,7 +6614,7 @@ M3eInputChipSetElement = __decorate([customElement$1("m3e-input-chip-set")], M3e
  * @attr value - A string representing the value of the chip.
  * @attr variant - The appearance variant of the chip.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
  * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
@@ -10550,10 +10551,10 @@ var _M3eCollapsibleElement_instances, _M3eCollapsibleElement_slotChanged, _M3eCo
  * @attr orientation - Orientation of collapsible content.
  * @attr no-animate - Whether to disable animation.
  *
- * @fires opening - Emitted when the collapsible begins to open.
- * @fires opened - Emitted when the collapsible has opened.
- * @fires closing - Emitted when the collapsible begins to close.
- * @fires closed - Emitted when the collapsible has closed.
+ * @fires opening - Dispatched when the collapsible begins to open.
+ * @fires opened - Dispatched when the collapsible has opened.
+ * @fires closing - Dispatched when the collapsible begins to close.
+ * @fires closed - Dispatched when the collapsible has closed.
  *
  * @cssprop --m3e-collapsible-animation-duration - The duration of the expand / collapse animation.
  */
@@ -11699,7 +11700,7 @@ var M3eTextHighlightElement_1;
  * @attr mode - The mode in which to highlight text.
  * @attr term - The term to highlight.
  *
- * @fires highlight - Emitted when content is highlighted.
+ * @fires highlight - Dispatched when content is highlighted.
  *
  * @cssprop --m3e-text-highlight-container-color - Background color applied to highlighted text ranges.
  * @cssprop --m3e-text-highlight-color - Foreground color of highlighted text content.
@@ -11964,6 +11965,7 @@ var M3eDatepickerElement_1;
  * @attr date - The selected date.
  * @attr max-date - The maximum date that can be selected.
  * @attr min-date - The minimum date that can be selected.
+ * @attr range - Whether a range of dates can be selected.
  * @attr range-end - End of a date range.
  * @attr range-start - Start of a date range.
  * @attr start-at - A date specifying the period (month or year) to start the calendar in.
@@ -12065,6 +12067,11 @@ let M3eDatepickerElement = M3eDatepickerElement_1 = class M3eDatepickerElement e
      * @default null
      */
     this.maxDate = null;
+    /**
+     * Whether a range of dates can be selected.
+     * @default false
+     */
+    this.range = false;
     /**
      * Start of a date range.
      * @default null
@@ -12247,6 +12254,9 @@ let M3eDatepickerElement = M3eDatepickerElement_1 = class M3eDatepickerElement e
     if (["date", "rangeStart", "rangeEnd"].some(x => changedProperties.has(x))) {
       __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_clearSelectionState).call(this);
     }
+    if (changedProperties.has("rangeStart") && this.rangeStart) {
+      this.range = true;
+    }
     if (changedProperties.has("rangeStart") && this.rangeStart && !changedProperties.has("date")) {
       this.date = new Date(this.rangeStart);
     }
@@ -12284,12 +12294,20 @@ _M3eDatepickerElement_toggleHandler = new WeakMap();
 _M3eDatepickerElement_instances = new WeakSet();
 _M3eDatepickerElement_renderHeader = function _M3eDatepickerElement_renderHeader() {
   if (this.currentVariant === "docked") return nothing;
+  const rangeStart = this._rangeStart ?? this.rangeStart;
+  const rangeEnd = this._rangeStart ? this._rangeEnd : this._rangeEnd ?? this.rangeEnd;
   const selectedDate = this._date ?? this.date;
-  return html`<div class="supporting-text">${this.label}</div><div class="headline">${selectedDate ? new Intl.DateTimeFormat(navigator.language, {
+  return html`<div class="supporting-text">${this.label}</div>${rangeStart ? html`<div class="headline">${new Intl.DateTimeFormat(navigator.language, {
+    month: "short",
+    day: "numeric"
+  }).format(rangeStart) + " – " + (rangeEnd ? new Intl.DateTimeFormat(navigator.language, {
+    month: "short",
+    day: "numeric"
+  }).format(rangeEnd) : "")}</div>` : html`<div class="headline">${selectedDate ? new Intl.DateTimeFormat(navigator.language, {
     weekday: "short",
     month: "short",
     day: "numeric"
-  }).format(selectedDate) : "––"}</div><div class="divider"></div>`;
+  }).format(selectedDate) : "––"}</div>`}<div class="divider"></div>`;
 };
 _M3eDatepickerElement_handleDocumentClick = function _M3eDatepickerElement_handleDocumentClick(e) {
   if (!e.composedPath().some(x => x instanceof M3eDatepickerElement_1 || x === __classPrivateFieldGet(this, _M3eDatepickerElement_trigger, "f") || x === __classPrivateFieldGet(this, _M3eDatepickerElement_anchor, "f"))) {
@@ -12300,6 +12318,10 @@ _M3eDatepickerElement_handleCalendarChange = function _M3eDatepickerElement_hand
   this._date = this._calendar.date;
   this._rangeStart = this._calendar.rangeStart;
   this._rangeEnd = this._calendar.rangeEnd;
+  if (this.range && !this._rangeStart && this._date) {
+    this._rangeStart = new Date(this._date);
+    this._calendar.rangeStart = this._rangeStart;
+  }
 };
 _M3eDatepickerElement_handleClearClick = function _M3eDatepickerElement_handleClearClick() {
   this.date = null;
@@ -12425,6 +12447,9 @@ __decorate([property({
   attribute: "max-date",
   converter: dateConverter$1
 })], M3eDatepickerElement.prototype, "maxDate", void 0);
+__decorate([property({
+  type: Boolean
+})], M3eDatepickerElement.prototype, "range", void 0);
 __decorate([property({
   attribute: "range-start",
   converter: dateConverter$1
@@ -12565,11 +12590,11 @@ var M3eDialogElement_1;
  * @attr no-focus-trap - Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.
  * @attr open - Whether the dialog is open.
  *
- * @fires opening - Emitted when the dialog begins to open.
- * @fires opened - Emitted when the dialog has opened.
- * @fires cancel - Emitted when the dialog is cancelled.
- * @fires closing - Emitted when the dialog begins to close.
- * @fires closed - Emitted when the dialog has closed.
+ * @fires opening - Dispatched when the dialog begins to open.
+ * @fires opened - Dispatched when the dialog has opened.
+ * @fires cancel - Dispatched when the dialog is cancelled.
+ * @fires closing - Dispatched when the dialog begins to close.
+ * @fires closed - Dispatched when the dialog has closed.
  *
  * @cssprop --m3e-dialog-shape - Border radius of the dialog container.
  * @cssprop --m3e-dialog-min-width - Minimum width of the dialog.
@@ -12967,7 +12992,7 @@ var _M3eDrawerContainerElement_instances, _M3eDrawerContainerElement_breakpointU
  * @attr start-mode - The behavior mode of the start drawer.
  * @attr start-divider - Whether to show a divider between the start drawer and content for `side` mode.
  *
- * @fires change - Emitted when the state of the start or end drawers change.
+ * @fires change - Dispatched when the state of the start or end drawers change.
  *
  * @cssprop --m3e-drawer-container-color - The background color of the drawer container.
  * @cssprop --m3e-drawer-container-elevation - The elevation level of the drawer container.
@@ -13488,7 +13513,7 @@ var _M3eExpansionHeaderElement_instances, _M3eExpansionHeaderElement_renderToggl
  * @attr toggle-direction - The direction of the expansion toggle.
  * @attr toggle-position - The position of the expansion toggle.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.
  * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.
@@ -13596,10 +13621,10 @@ var M3eExpansionPanelElement_1;
  * @attr toggle-direction - The direction of the expansion toggle.
  * @attr toggle-position - The position of the expansion toggle.
  *
- * @fires opening - Emitted when the expansion panel begins to open.
- * @fires opened - Emitted when the expansion panel has opened.
- * @fires closing - Emitted when the expansion panel begins to close.
- * @fires closed - Emitted when the expansion panel has closed.
+ * @fires opening - Dispatched when the expansion panel begins to open.
+ * @fires opened - Dispatched when the expansion panel has opened.
+ * @fires closing - Dispatched when the expansion panel begins to close.
+ * @fires closed - Dispatched when the expansion panel has closed.
  *
  * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.
  * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.
@@ -14463,7 +14488,7 @@ var _M3eFabElement_instances, _M3eFabElement_handleSlotChange;
  * @attr value - The value associated with the element's name when it's submitted with form data.
  * @attr variant - The appearance variant of the button.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-fab-container-height - Height of the FAB container for all size variants.
  * @cssprop --m3e-fab-label-text-font-size - Font size for the FAB label text for all size variants.
@@ -14873,7 +14898,7 @@ var _M3eFabMenuItemElement_instances, _M3eFabMenuItemElement_clickHandler, _M3eF
  * @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-fab-menu-item-height - Height of the menu item.
  * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.
@@ -16718,9 +16743,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.
@@ -17135,19 +17161,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;
     }
   }
 };
@@ -17550,10 +17574,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.
@@ -17874,7 +17898,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.
@@ -17996,9 +18020,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.
@@ -18139,19 +18164,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;
     }
   }
 };
@@ -18183,8 +18207,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.
@@ -18621,7 +18646,7 @@ var M3eMenuItemElement_1;
  * @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-menu-item-container-height - Height of the menu item container.
  * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.
@@ -19164,7 +19189,7 @@ var _M3eMenuItemCheckboxElement_instances, _M3eMenuItemCheckboxElement_clickHand
  * @attr disabled - Whether the element is disabled.
  * @attr checked - Whether the element is checked.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-menu-item-container-height - Height of the menu item container.
  * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.
@@ -19337,7 +19362,7 @@ var _M3eMenuItemRadioElement_instances, _M3eMenuItemRadioElement_clickHandler, _
  * @attr disabled - Whether the element is disabled.
  * @attr checked - Whether the element is checked.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-menu-item-container-height - Height of the menu item container.
  * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.
@@ -19493,7 +19518,9 @@ var _M3eNavBarElement_instances, _M3eNavBarElement_breakpointUnobserve, _M3eNavB
  *
  * @attr mode - The mode in which items in the bar are presented.
  *
- * @fires change - Emitted when the selected state of an item changes.
+ * @fires beforeinput - Dispatched before the selected state of an item changes.
+ * @fires input - Dispatched when the selected state of an item changes.
+ * @fires change - Dispatched when the selected state of an item changes.
  *
  * @cssprop --m3e-nav-bar-height - Height of the navigation bar.
  * @cssprop --m3e-nav-bar-container-color - Background color of the navigation bar container.
@@ -19634,9 +19661,10 @@ var _M3eNavItemElement_instances, _M3eNavItemElement_inRail, _M3eNavItemElement_
  * @attr selected - A value indicating whether the element is selected.
  * @attr target - The target of the link button.
  *
- * @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-nav-item-label-text-font-size - Font size for the label text.
  * @cssprop --m3e-nav-item-label-text-font-weight - Font weight for the label text.
@@ -19752,18 +19780,18 @@ let M3eNavItemElement = class M3eNavItemElement extends ReconnectedCallback$1(Su
 };
 _M3eNavItemElement_handleClick = function _M3eNavItemElement_handleClick(e) {
   if (e.defaultPrevented) return;
-  this.selected = true;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.selected = true;
     this.navBar?.[selectionManager].notifySelectionChange(this);
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.selected = false;
   }
 };
 _M3eNavItemElement_handleSelectedIconSlotChange = function _M3eNavItemElement_handleSelectedIconSlotChange(e) {
@@ -19865,11 +19893,11 @@ var M3eNavMenuItemElement_1;
  * @attr open - Whether the item is expanded.
  * @attr selected - Whether the item is selected.
  *
- * @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 click - Emitted when the element is clicked.
+ * @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.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-nav-menu-item-font-size - Font size for the item label.
  * @cssprop --m3e-nav-menu-item-font-weight - Font weight for the item label.
@@ -20554,7 +20582,9 @@ var _M3eNavRailElement_instances, _M3eNavRailElement_focusKeyManager, _M3eNavRai
  *
  * @attr mode - The mode in which items in the rail are presented.
  *
- * @fires change - Emitted when the selected state of an item changes.
+ * @fires beforeinput - Dispatched before the selected state of an item changes.
+ * @fires input - Dispatched when the selected state of an item changes.
+ * @fires change - Dispatched when the selected state of an item changes.
  *
  * @cssprop --m3e-nav-rail-top-space - Top block padding for the nav rail.
  * @cssprop --m3e-nav-rail-bottom-space - Bottom block padding for the nav rail.
@@ -21071,7 +21101,7 @@ var M3ePaginatorElement_1;
  * @attr previous-page-label - The accessible label given to the button used to move to the previous page.
  * @attr show-first-last-buttons - Whether to show first/last buttons.
  *
- * @fires page - Emitted when a user selects a different page size or navigates to another page.
+ * @fires page - Dispatched when a user selects a different page size or navigates to another page.
  *
  * @cssprop --m3e-paginator-font-size - The font size used for paginator text.
  * @cssprop --m3e-paginator-font-weight - The font weight used for paginator text.
@@ -21990,9 +22020,10 @@ var _M3eRadioElement_instances, _M3eRadioElement_clickHandler, _M3eRadioElement_
  * @attr required - Whether the element is required.
  * @attr value - A string representing the value of the radio.
  *
- * @fires input - Emitted when the checked state changes.
- * @fires change - Emitted when the checked state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the checked state changes.
+ * @fires input - Dispatched when the checked state changes.
+ * @fires change - Dispatched when the checked state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-radio-container-size - Base size of the radio button container.
  * @cssprop --m3e-radio-icon-size - Size of the radio icon inside the wrapper.
@@ -22091,18 +22122,18 @@ _M3eRadioElement_renderIcon = function _M3eRadioElement_renderIcon() {
 };
 _M3eRadioElement_handleClick = function _M3eRadioElement_handleClick(e) {
   if (e.defaultPrevented || this.checked || this.disabled) return;
-  this.checked = true;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.checked = true;
     __classPrivateFieldGet(this, _M3eRadioElement_instances, "m", _M3eRadioElement_notifySelectionChange).call(this);
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.checked = false;
   }
   // Prevent default avoids double-click in FireFox.
   if (this.closest("label")) {
@@ -22158,7 +22189,9 @@ var _M3eRadioGroupElement_instances, _M3eRadioGroupElement_directionalitySubscri
  * @attr name - The name that identifies the element when submitting the associated form.
  * @attr required - Whether the element is required.
  *
- * @fires change - Emitted when the checked state of a radio button changes.
+ * @fires beforeinput - Dispatched before the checked state of a radio button changes.
+ * @fires input - Dispatched when the checked state of a radio button changes.
+ * @fires change - Dispatched when the checked state of a radio button changes.
  */
 let M3eRadioGroupElement = class M3eRadioGroupElement extends Labelled$1(RequiredConstraintValidation$1(Dirty$1(Touched$1(Required$1(ConstraintValidation$1(FormAssociated$1(Disabled$1(AttachInternals$1(Role$1(LitElement, "radiogroup")))))))))) {
   constructor() {
@@ -23115,9 +23148,10 @@ var M3eButtonSegmentElement_1;
  * @attr disabled - Whether the element is disabled.
  * @attr value - A string representing the value of the segment.
  *
- * @fires input - Emitted when the checked state changes.
- * @fires change - Emitted when the checked state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the checked state changes.
+ * @fires input - Dispatched when the checked state changes.
+ * @fires change - Dispatched when the checked state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-segmented-button-height - Total height of the segmented button.
  * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.
@@ -23221,19 +23255,18 @@ _M3eButtonSegmentElement_handleClick = function _M3eButtonSegmentElement_handleC
   if (e.defaultPrevented) return;
   const segmentedButton = this.closest("m3e-segmented-button");
   if (segmentedButton && (segmentedButton.multi || !this.checked)) {
-    const checked = this.checked;
-    this.checked = !this.checked;
-    if (this.dispatchEvent(new Event("input", {
+    if (this.dispatchEvent(new Event("beforeinput", {
       bubbles: true,
-      composed: true,
       cancelable: true
     }))) {
+      this.checked = !this.checked;
       this.closest("m3e-segmented-button")?.[selectionManager].notifySelectionChange(this);
+      this.dispatchEvent(new Event("input", {
+        bubbles: true
+      }));
       this.dispatchEvent(new Event("change", {
         bubbles: true
       }));
-    } else {
-      this.checked = checked;
     }
   }
 };
@@ -23285,8 +23318,9 @@ var _M3eSegmentedButtonElement_instances, _M3eSegmentedButtonElement_directional
  * @attr multi - Whether multiple options can be selected.
  * @attr name - The name that identifies the element when submitting the associated form.
  *
- * @fires input - Emitted when the checked state of a segment changes.
- * @fires change - Emitted when the checked state of a segment changes.
+ * @fires beforeinput - Dispatched before the checked state of a segment changes.
+ * @fires input - Dispatched when the checked state of a segment changes.
+ * @fires change - Dispatched when the checked state of a segment changes.
  *
  * @cssprop --m3e-segmented-button-start-shape - Border radius for the first segment in a segmented button.
  * @cssprop --m3e-segmented-button-end-shape - Border radius for the last segment in a segmented button.
@@ -23453,8 +23487,9 @@ var M3eSelectElement_1;
  * @attr panel-class - Class or list of classes to be applied to the select's overlay panel.
  * @attr required - Whether the element is required.
  *
- * @fires input - Emitted when the selected state changes.
- * @fires change - Emitted when the selected state changes.
+ * @fires beforeinput - Dispatched before the selected state changes.
+ * @fires input - Dispatched when the selected state changes.
+ * @fires change - Dispatched when the selected state changes.
  *
  * @cssprop --m3e-form-field-font-size - The font size of the select control.
  * @cssprop --m3e-form-field-font-weight - The font weight of the select control.
@@ -23874,13 +23909,12 @@ _M3eSelectElement_updateSelectionState = function _M3eSelectElement_updateSelect
 _M3eSelectElement_selectOption = function _M3eSelectElement_selectOption(option) {
   const selected = this.multi ? !option.selected : true;
   if (option.selected === selected) return;
-  option.selected = selected;
-  __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_updateSelectionState).call(this, option);
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    option.selected = selected;
+    __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_updateSelectionState).call(this, option);
     if (!this.multi) {
       __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_selected_get).filter(x => x !== option).forEach(x => {
         x.selected = false;
@@ -23889,12 +23923,12 @@ _M3eSelectElement_selectOption = function _M3eSelectElement_selectOption(option)
     }
     this.requestUpdate();
     __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    option.selected = !selected;
-    __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_updateSelectionState).call(this, option);
   }
 };
 /** The styles of the element. */
@@ -24465,9 +24499,10 @@ var _M3eSliderThumbElement_instances, _M3eSliderThumbElement_labelText_get;
  * @attr name - The name that identifies the element when submitting the associated form.
  * @attr value - The value of the thumb.
  *
- * @fires input - Emitted when the value changes.
- * @fires change - Emitted when the value changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the value changes.
+ * @fires input - Dispatched when the value changes.
+ * @fires change - Dispatched when the value changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-slider-thumb-width - Width of the slider thumb.
  * @cssprop --m3e-slider-thumb-padding - Horizontal padding around the thumb.
@@ -24540,7 +24575,7 @@ __decorate([property({
 })], M3eSliderThumbElement.prototype, "value", void 0);
 M3eSliderThumbElement = __decorate([customElement$1("m3e-slider-thumb")], M3eSliderThumbElement);
 
-var _M3eSliderElement_instances, _M3eSliderElement_directionalitySubscription, _M3eSliderElement_thumbs, _M3eSliderElement_activeThumb, _M3eSliderElement_cachedWidth, _M3eSliderElement_cachedThumbWidth, _M3eSliderElement_cachedLeft, _M3eSliderElement_renderTick, _M3eSliderElement_handleSlotChange, _M3eSliderElement_updateThumbs, _M3eSliderElement_pointFromValue, _M3eSliderElement_valueFromPoint, _M3eSliderElement_updateCachedDimensions, _M3eSliderElement_updateDimensions, _M3eSliderElement_updateTicks, _M3eSliderElement_handlePointerDown, _M3eSliderElement_handlePointerMove, _M3eSliderElement_handlePointerUp, _M3eSliderElement_handleKeyDown, _M3eSliderElement_handleThumbChange, _M3eSliderElement_changeThumb;
+var _M3eSliderElement_instances, _M3eSliderElement_directionalitySubscription, _M3eSliderElement_changedThumbs, _M3eSliderElement_thumbs, _M3eSliderElement_activeThumb, _M3eSliderElement_cachedWidth, _M3eSliderElement_cachedThumbWidth, _M3eSliderElement_cachedLeft, _M3eSliderElement_renderTick, _M3eSliderElement_handleSlotChange, _M3eSliderElement_updateThumbs, _M3eSliderElement_pointFromValue, _M3eSliderElement_valueFromPoint, _M3eSliderElement_updateCachedDimensions, _M3eSliderElement_updateDimensions, _M3eSliderElement_updateTicks, _M3eSliderElement_handlePointerDown, _M3eSliderElement_handlePointerMove, _M3eSliderElement_handlePointerUp, _M3eSliderElement_handleKeyDown, _M3eSliderElement_handleKeyUp, _M3eSliderElement_handleThumbChange, _M3eSliderElement_changeThumb, _M3eSliderElement_commitThumb;
 /**
  * Allows for the selection of numeric values from a range.
  *
@@ -24578,6 +24613,10 @@ var _M3eSliderElement_instances, _M3eSliderElement_directionalitySubscription, _
  * @attr step - The value at which the thumb will snap.
  * @attr size - The size of the slider.
  *
+ * @fires beforeinput - Dispatched before the value of a thumb changes.
+ * @fires input - Dispatched when the value of a thumb changes.
+ * @fires change - Dispatched when the value of a thumb changes.
+ *
  * @cssprop --m3e-slider-min-width - Minimum inline size of the slider host.
  * @cssprop --m3e-slider-small-height - Height of the slider when size is small or extra-small.
  * @cssprop --m3e-slider-medium-height - Height of the slider when size is medium.
@@ -24622,6 +24661,8 @@ let M3eSliderElement = class M3eSliderElement extends AttachInternals$1(LitEleme
     /** @private */
     this._ticks = new Array();
     /** @private */
+    _M3eSliderElement_changedThumbs.set(this, new Set());
+    /** @private */
     _M3eSliderElement_thumbs.set(this, new Array());
     /** @private */
     _M3eSliderElement_activeThumb.set(this, void 0);
@@ -24703,6 +24744,7 @@ let M3eSliderElement = class M3eSliderElement extends AttachInternals$1(LitEleme
   /** @inheritdoc */
   disconnectedCallback() {
     super.disconnectedCallback();
+    __classPrivateFieldGet(this, _M3eSliderElement_changedThumbs, "f").clear();
     __classPrivateFieldGet(this, _M3eSliderElement_directionalitySubscription, "f")?.call(this);
   }
   /** @inheritdoc */
@@ -24714,10 +24756,11 @@ let M3eSliderElement = class M3eSliderElement extends AttachInternals$1(LitEleme
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base" tabindex="${ifDefined(!this.disabled ? "-1" : undefined)}" @pointerdown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerUp)}" @keydown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleKeyDown)}" @value-change="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleThumbChange)}"><div class="track" aria-hidden="true"><div class="track-inactive start"></div><div class="track-active"></div><div class="track-inactive end"></div></div><div class="ticks" aria-hidden="true">${this._ticks.map(x => __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_renderTick).call(this, x))}</div><slot @slotchange="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleSlotChange)}"></slot></div>`;
+    return html`<div class="base" tabindex="${ifDefined(!this.disabled ? "-1" : undefined)}" @pointerdown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handlePointerUp)}" @keydown="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleKeyDown)}" @keyup="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleKeyUp)}" @value-change="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleThumbChange)}"><div class="track" aria-hidden="true"><div class="track-inactive start"></div><div class="track-active"></div><div class="track-inactive end"></div></div><div class="ticks" aria-hidden="true">${this._ticks.map(x => __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_renderTick).call(this, x))}</div><slot @slotchange="${__classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_handleSlotChange)}"></slot></div>`;
   }
 };
 _M3eSliderElement_directionalitySubscription = new WeakMap();
+_M3eSliderElement_changedThumbs = new WeakMap();
 _M3eSliderElement_thumbs = new WeakMap();
 _M3eSliderElement_activeThumb = new WeakMap();
 _M3eSliderElement_cachedWidth = new WeakMap();
@@ -24828,6 +24871,7 @@ _M3eSliderElement_handlePointerDown = function _M3eSliderElement_handlePointerDo
   if (e.target instanceof HTMLElement) {
     e.target.setPointerCapture(e.pointerId);
   }
+  __classPrivateFieldGet(this, _M3eSliderElement_changedThumbs, "f").clear();
   __classPrivateFieldSet(this, _M3eSliderElement_activeThumb, e.composedPath().find(x => x instanceof M3eSliderThumbElement), "f");
   if (__classPrivateFieldGet(this, _M3eSliderElement_activeThumb, "f")) {
     return;
@@ -24888,6 +24932,7 @@ _M3eSliderElement_handlePointerUp = function _M3eSliderElement_handlePointerUp(e
     e.target.releasePointerCapture(e.pointerId);
   }
   if (__classPrivateFieldGet(this, _M3eSliderElement_activeThumb, "f") && !__classPrivateFieldGet(this, _M3eSliderElement_activeThumb, "f").disabled) {
+    __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_commitThumb).call(this, __classPrivateFieldGet(this, _M3eSliderElement_activeThumb, "f"));
     __classPrivateFieldGet(this, _M3eSliderElement_activeThumb, "f").focus();
   }
 };
@@ -24954,6 +24999,12 @@ _M3eSliderElement_handleKeyDown = function _M3eSliderElement_handleKeyDown(e) {
       break;
   }
 };
+_M3eSliderElement_handleKeyUp = function _M3eSliderElement_handleKeyUp(e) {
+  const activeThumb = e.composedPath().find(x => x instanceof M3eSliderThumbElement);
+  if (activeThumb) {
+    __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_commitThumb).call(this, activeThumb);
+  }
+};
 _M3eSliderElement_handleThumbChange = function _M3eSliderElement_handleThumbChange(e) {
   e.stopPropagation();
   __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_updateThumbs).call(this);
@@ -24961,31 +25012,35 @@ _M3eSliderElement_handleThumbChange = function _M3eSliderElement_handleThumbChan
 };
 _M3eSliderElement_changeThumb = function _M3eSliderElement_changeThumb(thumb, value, animate = false) {
   if (thumb.value === value) return;
-  const prev = thumb.value;
-  if (animate && !prefersReducedMotion$1()) {
-    addCustomState$1(this, "--animating");
-    thumb.addEventListener("transitionend", () => {
-      thumb.style.transition = "";
-      deleteCustomState$1(this, "--animating");
-    }, {
-      once: true
-    });
-    thumb.style.transition = `transform ${DesignToken$1.motion.spring.fastEffects}`;
-  }
-  thumb.value = value;
-  thumb.markAsDirty();
-  thumb.markAsTouched();
-  if (thumb.dispatchEvent(new Event("input", {
+  if (thumb.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    if (animate && !prefersReducedMotion$1()) {
+      addCustomState$1(this, "--animating");
+      thumb.addEventListener("transitionend", () => {
+        thumb.style.transition = "";
+        deleteCustomState$1(this, "--animating");
+      }, {
+        once: true
+      });
+      thumb.style.transition = `transform ${DesignToken$1.motion.spring.fastEffects}`;
+    }
+    __classPrivateFieldGet(this, _M3eSliderElement_changedThumbs, "f").add(thumb);
+    thumb.value = value;
+    thumb.markAsDirty();
+    thumb.markAsTouched();
+    thumb.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
+  }
+};
+_M3eSliderElement_commitThumb = function _M3eSliderElement_commitThumb(thumb) {
+  if (__classPrivateFieldGet(this, _M3eSliderElement_changedThumbs, "f").has(thumb)) {
     thumb.dispatchEvent(new Event("change", {
-      bubbles: true,
-      composed: true
+      bubbles: true
     }));
-  } else {
-    thumb.value = prev;
+    __classPrivateFieldGet(this, _M3eSliderElement_changedThumbs, "f").delete(thumb);
   }
 };
 /** The styles of the element. */
@@ -25498,8 +25553,9 @@ var _M3eSplitPaneElement_instances, _M3eSplitPaneElement_breakpointUnobserve, _M
  * @attr value - A fractional value, between 0 and 100, indicating the size of the start pane.
  * @attr wrap-detents - Whether cycling through detents will wrap.
  *
- * @fires input - Fired continuously while the user adjusts the drag handle.
- * @fires change - Fired when the user finishes adjusting the drag handle.
+ * @fires beforeinput - Dispatched continuously before the user adjusts the drag handle.
+ * @fires input - Dispatched continuously while the user adjusts the drag handle.
+ * @fires change - Dispatched when the user finishes adjusting the drag handle.
  *
  * @cssprop --m3e-split-pane-drag-handle-hover-color - Color used for the drag handle hover state.
  * @cssprop --m3e-split-pane-drag-handle-hover-opacity - Opacity used for the drag handle hover state.
@@ -25806,8 +25862,7 @@ _M3eSplitPaneElement_handlePointerUp = function _M3eSplitPaneElement_handlePoint
     }
     if (__classPrivateFieldGet(this, _M3eSplitPaneElement_valueChanged, "f")) {
       this.dispatchEvent(new Event("change", {
-        bubbles: true,
-        composed: true
+        bubbles: true
       }));
       __classPrivateFieldSet(this, _M3eSplitPaneElement_valueChanged, false, "f");
     }
@@ -25943,27 +25998,25 @@ _M3eSplitPaneElement_handleKeyDown = function _M3eSplitPaneElement_handleKeyDown
 };
 _M3eSplitPaneElement_changeValue = function _M3eSplitPaneElement_changeValue(value, emitChange = true, allowOvershoot = false) {
   __classPrivateFieldGet(this, _M3eSplitPaneElement_instances, "m", _M3eSplitPaneElement_clearSnapAnimation).call(this);
-  if (!allowOvershoot) {
-    value = Math.max(this.min, Math.min(this.max, value));
-  }
-  if (value != this.value) {
-    const prev = this.value;
-    this.value = value;
-    if (this.dispatchEvent(new Event("input", {
-      bubbles: true,
-      composed: true,
-      cancelable: true
-    }))) {
+  if (this.dispatchEvent(new Event("beforeinput", {
+    bubbles: true,
+    cancelable: true
+  }))) {
+    if (!allowOvershoot) {
+      value = Math.max(this.min, Math.min(this.max, value));
+    }
+    if (value != this.value) {
+      this.value = value;
       this._base.style.setProperty("--_split-pane-value", `${this.value}%`);
+      this.dispatchEvent(new Event("input", {
+        bubbles: true
+      }));
       if (emitChange) {
         this.dispatchEvent(new Event("change", {
-          bubbles: true,
-          composed: true
+          bubbles: true
         }));
       }
       return true;
-    } else {
-      this.value = prev;
     }
   }
   return false;
@@ -26244,9 +26297,10 @@ var M3eStepElement_1;
  * @attr optional - Whether the step is optional.
  * @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-step-shape - Border radius of the step container, defining its visual shape.
  * @cssprop --m3e-step-padding - Internal padding of the step container, used for layout spacing.
@@ -26390,17 +26444,17 @@ _M3eStepElement_handleClick = function _M3eStepElement_handleClick(e) {
     e.stopImmediatePropagation();
   }
   if (e.defaultPrevented || this.selected) return;
-  this.selected = true;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
-  })) && this.closest("m3e-stepper")?.moveTo(this.index)) {
+  })) && this.closest("m3e-stepper")?._moveTo(this.index)) {
+    this.selected = true;
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.selected = false;
   }
 };
 /** The styles of the element. */
@@ -26515,7 +26569,9 @@ var _M3eStepperElement_instances, _M3eStepperElement_breakpointUnobserve, _M3eSt
  * @slot step - Renders a step.
  * @slot panel - Renders a panel.
  *
- * @fires change - Emitted when the selected step changes.
+ * @fires beforeinput - Dispatched before the selected state of a step changes.
+ * @fires input - Dispatched when the selected state of a step changes.
+ * @fires change - Dispatched when the selected step changes.
  *
  * @cssprop --m3e-step-divider-thickness - Thickness of the divider line between steps.
  * @cssprop --m3e-step-divider-color - Color of the divider line between steps.
@@ -26584,6 +26640,16 @@ let M3eStepperElement = class M3eStepperElement extends ReconnectedCallback$1(At
    * @returns {boolean} Whether the stepper moved to the specified `index`.
    */
   moveTo(index) {
+    if (this._moveTo(index)) {
+      this.dispatchEvent(new Event("change", {
+        bubbles: true
+      }));
+      return true;
+    }
+    return false;
+  }
+  /** @internal */
+  _moveTo(index) {
     const selectedStep = this.selectedStep;
     if (selectedStep && selectedStep.index === index) {
       return true;
@@ -26613,16 +26679,10 @@ let M3eStepperElement = class M3eStepperElement extends ReconnectedCallback$1(At
       }
       this._selectedIndex = index;
       this[selectionManager].select(this.selectedStep);
-      this.dispatchEvent(new Event("change", {
-        bubbles: true
-      }));
       return true;
     } else {
       if (selectedStep) {
         this[selectionManager].deselect(selectedStep);
-        this.dispatchEvent(new Event("change", {
-          bubbles: true
-        }));
       }
       return false;
     }
@@ -26696,7 +26756,9 @@ _M3eStepperElement_renderHeader = function _M3eStepperElement_renderHeader() {
 };
 _M3eStepperElement_handleChange = function _M3eStepperElement_handleChange(e) {
   e.stopPropagation();
-  // Note: change event emitted from moveTo.
+  this.dispatchEvent(new Event("change", {
+    bubbles: true
+  }));
 };
 _M3eStepperElement_handleSlotChange = function _M3eStepperElement_handleSlotChange() {
   const {
@@ -26990,9 +27052,10 @@ var _M3eSwitchElement_instances, _M3eSwitchElement_clickHandler, _M3eSwitchEleme
  * @attr name - The name that identifies the element when submitting the associated form.
  * @attr value - A string representing the value of the switch.
  *
- * @fires input - Emitted when the checked state changes.
- * @fires change - Emitted when the checked state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the checked state changes.
+ * @fires input - Dispatched when the checked state changes.
+ * @fires change - Dispatched when the checked state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-switch-selected-icon-color - Color of the icon when the switch is selected.
  * @cssprop --m3e-switch-selected-icon-size - Size of the icon in the selected state.
@@ -27139,17 +27202,17 @@ _M3eSwitchElement_renderIcon = function _M3eSwitchElement_renderIcon() {
 };
 _M3eSwitchElement_handleClick = function _M3eSwitchElement_handleClick(e) {
   if (e.defaultPrevented) return;
-  this.checked = !this.checked;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.checked = !this.checked;
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.checked = !this.checked;
   }
   // Prevent default avoids double-click in FireFox.
   if (this.closest("label")) {
@@ -27201,9 +27264,10 @@ var M3eTabElement_1;
  * @attr for - The identifier of the interactive control to which this element is attached.
  * @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-tab-font-size - Font size for tab label.
  * @cssprop --m3e-tab-font-weight - Font weight for tab label.
@@ -27280,18 +27344,18 @@ _M3eTabElement_handleClick = function _M3eTabElement_handleClick(e) {
     e.stopImmediatePropagation();
   }
   if (e.defaultPrevented || this.selected) return;
-  this.selected = true;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.selected = true;
     this.closest("m3e-tabs")?.[selectionManager].notifySelectionChange(this);
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.selected = false;
   }
 };
 /** The styles of the element. */
@@ -27389,7 +27453,9 @@ const MIN_PRIMARY_TAB_WIDTH = 24;
  * @attr stretch - Whether tabs are stretched to fill the header.
  * @attr variant - The appearance variant of the tabs.
  *
- * @fires change - Emitted when the selected tab changes.
+ * @fires beforeinput - Dispatched before the selected state of a tab changes.
+ * @fires input - Dispatched when the selected state of a tab changes.
+ * @fires change - Dispatched when the selected tab changes.
  *
  * @cssprop --m3e-tabs-paginator-button-icon-size - Overrides the icon size for paginator buttons.
  * @cssprop --m3e-tabs-active-indicator-color - Color of the active tab indicator.
@@ -32154,7 +32220,7 @@ M3eThemeElement = __decorate([customElement$1("m3e-theme")], M3eThemeElement);
  *
  * @attr disabled - A value indicating whether the element is disabled.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-toc-item-shape - Border radius of the TOC item.
  * @cssprop --m3e-toc-item-padding-block - Block padding for the TOC item.
@@ -33267,11 +33333,11 @@ var M3eTreeItemElement_1;
  * @attr open - Whether the item is expanded.
  * @attr selected - Whether the item is selected.
  *
- * @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 click - Emitted when the element is clicked.
+ * @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.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-tree-item-font-size - Font size for the item label.
  * @cssprop --m3e-tree-item-font-weight - Font weight for the item label.
@@ -33632,7 +33698,7 @@ var M3eTreeElement_1;
  * @attr multi - Whether multiple items can be selected.
  * @attr cascade -Whether multiple item selection cascades to child items.
  *
- * @fires change - Emitted when the selected state changes.
+ * @fires change - Dispatched when the selected state changes.
  *
  * @cssprop --m3e-tree-scrollbar-width - Width of the tree scrollbar.
  * @cssprop --m3e-tree-scrollbar-color - Color of the tree scrollbar.