@m3e/web 2.5.5 → 2.5.7

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. */
@@ -24342,6 +24376,7 @@ let M3eSlideGroupElement = class M3eSlideGroupElement extends ReconnectedCallbac
   }
   /** @private */
   _updatePaging() {
+    const canPage = this._canPage;
     if (this.disabled) {
       this._canPage = false;
     } else if (!this.vertical) {
@@ -24360,6 +24395,10 @@ let M3eSlideGroupElement = class M3eSlideGroupElement extends ReconnectedCallbac
     if (!this._canPage) {
       this._canPageStart = this._canPageEnd = false;
     }
+    if (canPage != this._canPage) {
+      // Emit internal (undocumented) event for use with tabs.
+      this.dispatchEvent(new CustomEvent("pagination-changed"));
+    }
   }
 };
 _M3eSlideGroupElement_directionalitySubscription = new WeakMap();
@@ -24408,7 +24447,7 @@ _M3eSlideGroupElement_pageEnd = function _M3eSlideGroupElement_pageEnd() {
   }
 };
 /** The styles of the element. */
-M3eSlideGroupElement.styles = css`:host { display: flex; flex-wrap: nowrap; overflow: hidden; } :host([vertical]) { flex-direction: column; } .prev-button, .next-button { flex: none; --m3e-icon-button-small-shape-round: 0px; --m3e-icon-button-small-shape-square: 0px; --m3e-icon-button-small-shape-pressed-morph: 0px; --m3e-focus-ring-visibility: hidden; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important; } :host(:not([vertical])) .prev-button, :host(:not([vertical])) .next-button { --m3e-icon-button-small-container-height: 100%; width: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button, :host([vertical]) .next-button { width: unset; --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button .icon, :host([vertical]) .next-button .icon { transform: rotate(90deg); } .content { flex: 1 1 auto; display: inherit; flex-wrap: inherit; flex-direction: inherit; overflow: inherit; position: relative; border-top: var(--m3e-slide-group-divider-top); border-bottom: var(--m3e-slide-group-divider-bottom); }`;
+M3eSlideGroupElement.styles = css`:host { display: flex; flex-wrap: nowrap; } :host([vertical]) { flex-direction: column; } .prev-button, .next-button { flex: none; --m3e-icon-button-small-shape-round: 0px; --m3e-icon-button-small-shape-square: 0px; --m3e-icon-button-small-shape-pressed-morph: 0px; --m3e-focus-ring-visibility: hidden; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important; } :host(:not([vertical])) .prev-button, :host(:not([vertical])) .next-button { --m3e-icon-button-small-container-height: 100%; width: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button, :host([vertical]) .next-button { width: unset; --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button .icon, :host([vertical]) .next-button .icon { transform: rotate(90deg); } .content { flex: 1 1 auto; display: inherit; flex-wrap: inherit; flex-direction: inherit; position: relative; border-top: var(--m3e-slide-group-divider-top); border-bottom: var(--m3e-slide-group-divider-bottom); scrollbar-width: none; } .content::-webkit-scrollbar { display: none; } :host([vertical]) .content { overflow-x: hidden; overflow-y: auto; } :host(:not([vertical])) .content { overflow-x: auto; overflow-y: hidden; }`;
 __decorate([query(".content")], M3eSlideGroupElement.prototype, "scrollContainer", void 0);
 __decorate([state()], M3eSlideGroupElement.prototype, "_canPage", void 0);
 __decorate([state()], M3eSlideGroupElement.prototype, "_canPageStart", void 0);
@@ -24465,9 +24504,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 +24580,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 +24618,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 +24666,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 +24749,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 +24761,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 +24876,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 +24937,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 +25004,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 +25017,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 +25558,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 +25867,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 +26003,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 +26302,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 +26449,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 +26574,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 +26645,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 +26684,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 +26761,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 +27057,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 +27207,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 +27269,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 +27349,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. */
@@ -27347,7 +27416,7 @@ let M3eTabPanelElement = class M3eTabPanelElement extends Role$1(LitElement, "ta
 M3eTabPanelElement.styles = css`:host { display: block; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.width}; scrollbar-color: ${DesignToken$1.scrollbar.color}; }`;
 M3eTabPanelElement = __decorate([customElement$1("m3e-tab-panel")], M3eTabPanelElement);
 
-var _M3eTabsElement_instances, _M3eTabsElement_directionalitySubscription, _M3eTabsElement_renderHeader, _M3eTabsElement_handleSlotChange, _M3eTabsElement_handleKeyDown, _M3eTabsElement_handleChange, _M3eTabsElement_handleSelectedChange, _M3eTabsElement_updateInkBar, _a$2;
+var _M3eTabsElement_instances, _M3eTabsElement_directionalitySubscription, _M3eTabsElement_swipe, _M3eTabsElement_velocityTracker, _M3eTabsElement_renderHeader, _M3eTabsElement_handleSlotChange, _M3eTabsElement_handleKeyDown, _M3eTabsElement_handleChange, _M3eTabsElement_handleSelectedChange, _M3eTabsElement_handleActiveItemChange, _M3eTabsElement_handleTabsPaginationChange, _M3eTabsElement_handleTabsPointerDown, _M3eTabsElement_handleTabsPointerMove, _M3eTabsElement_handleTabsPointerUp, _M3eTabsElement_handleTabsPointerCancel, _M3eTabsElement_handleTabsLostPointerCapture, _M3eTabsElement_endSwipeGesture, _M3eTabsElement_scrollTabIntoView, _M3eTabsElement_updateInkBar, _a$2;
 const MIN_PRIMARY_TAB_WIDTH = 24;
 /**
  * Organizes content into separate views where only one view can be visible at a time.
@@ -27389,7 +27458,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.
@@ -27407,13 +27478,12 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals$1(LitElement)
     _M3eTabsElement_directionalitySubscription.set(this, void 0);
     /** @private */
     this._selectedIndex = null;
+    /** @private */
+    _M3eTabsElement_swipe.set(this, void 0);
+    /** @private */
+    _M3eTabsElement_velocityTracker.set(this, new VelocityTracker$1());
     /** @internal */
-    this[_a$2] = new SelectionManager().onSelectedItemsChange(() => __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleSelectedChange).call(this)).withHomeAndEnd().withWrap().withDirectionality(M3eDirectionality.current);
-    /**
-     * Whether scroll buttons are disabled.
-     * @default false
-     */
-    this.disablePagination = false;
+    this[_a$2] = new SelectionManager().onSelectedItemsChange(() => __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleSelectedChange).call(this)).onActiveItemChange(() => __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleActiveItemChange).call(this)).withHomeAndEnd().withWrap().withDirectionality(M3eDirectionality.current);
     /**
      * The position of the tab headers.
      * @default "before"
@@ -27443,10 +27513,43 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals$1(LitElement)
       skipInitial: true,
       callback: () => {
         addCustomState$1(this, "--no-animate");
-        __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
+        const activeTab = this[selectionManager].activeItem ?? this.selectedTab;
+        if (activeTab) {
+          __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_scrollTabIntoView).call(this, activeTab, true);
+        } else {
+          __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
+        }
       }
     });
   }
+  /**
+   * Whether scroll buttons are disabled.
+   * @default false
+   */
+  get disablePagination() {
+    switch (this.getAttribute("disable-pagination")) {
+      case "auto":
+        return "auto";
+      case "":
+      case "true":
+        return true;
+      default:
+        return false;
+    }
+  }
+  set disablePagination(value) {
+    switch (value) {
+      case false:
+        this.removeAttribute("disable-pagination");
+        break;
+      case true:
+        this.toggleAttribute("disable-pagination", true);
+        break;
+      case "auto":
+        this.setAttribute("disable-pagination", "auto");
+        break;
+    }
+  }
   /** The tabs. */
   get tabs() {
     return this[selectionManager]?.items ?? [];
@@ -27499,14 +27602,16 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals$1(LitElement)
         panelIndex = undefined;
       }
     }
-    return html`${this.headerPosition === "before" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}<m3e-slide class="tabs" selected-index="${ifDefined(panelIndex)}"><slot name="panel"></slot></m3e-slide>${this.headerPosition === "after" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}`;
+    return html`${this.headerPosition === "before" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}<m3e-slide class="tabs" selected-index="${ifDefined(panelIndex)}" @pointerdown="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPointerUp)}" @pointercancel="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPointerCancel)}" @lostpointercapture="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsLostPointerCapture)}"><slot name="panel"></slot></m3e-slide>${this.headerPosition === "after" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}`;
   }
 };
 _M3eTabsElement_directionalitySubscription = new WeakMap();
+_M3eTabsElement_swipe = new WeakMap();
+_M3eTabsElement_velocityTracker = new WeakMap();
 _M3eTabsElement_instances = new WeakSet();
 _a$2 = selectionManager;
 _M3eTabsElement_renderHeader = function _M3eTabsElement_renderHeader() {
-  return html`<m3e-slide-group class="tablist" threshold="8" previous-page-label="${this.previousPageLabel}" next-page-label="${this.nextPageLabel}" ?disabled="${this.disablePagination}"><slot name="prev-icon" slot="prev-icon">${M3eDirectionality.current === "ltr" ? html`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>` : html`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot><slot name="next-icon" slot="next-icon">${M3eDirectionality.current === "ltr" ? html`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>` : html`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot><div class="header" role="tablist"><div class="tabs"><slot @slotchange="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleSlotChange)}" @keydown="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleKeyDown)}" @change="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleChange)}"></slot></div><div class="ink-bar" aria-hidden="true"><div class="active-indicator"></div></div></div></m3e-slide-group>`;
+  return html`<m3e-slide-group class="tablist" threshold="8" previous-page-label="${this.previousPageLabel}" next-page-label="${this.nextPageLabel}" ?disabled="${this.disablePagination === "auto" ? matchMedia("(hover: none) and (pointer: coarse)").matches : this.disablePagination}" @pagination-changed="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPaginationChange)}"><slot name="prev-icon" slot="prev-icon">${M3eDirectionality.current === "ltr" ? html`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>` : html`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot><slot name="next-icon" slot="next-icon">${M3eDirectionality.current === "ltr" ? html`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>` : html`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot><div class="header" role="tablist"><div class="tabs"><slot @slotchange="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleSlotChange)}" @keydown="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleKeyDown)}" @change="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleChange)}"></slot></div><div class="ink-bar" aria-hidden="true"><div class="active-indicator"></div></div></div></m3e-slide-group>`;
 };
 _M3eTabsElement_handleSlotChange = function _M3eTabsElement_handleSlotChange() {
   this[selectionManager].setItems([...this.querySelectorAll("m3e-tab")]);
@@ -27527,6 +27632,142 @@ _M3eTabsElement_handleSelectedChange = function _M3eTabsElement_handleSelectedCh
     selectedIndex = null;
   }
   this._selectedIndex = selectedIndex;
+  if (selected) {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_scrollTabIntoView).call(this, selected, hasCustomState$1(this, "--no-animate"));
+  } else {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
+  }
+};
+_M3eTabsElement_handleActiveItemChange = function _M3eTabsElement_handleActiveItemChange() {
+  if (this[selectionManager].activeItem) {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_scrollTabIntoView).call(this, this[selectionManager].activeItem, hasCustomState$1(this, "--no-animate"));
+  }
+};
+_M3eTabsElement_handleTabsPaginationChange = function _M3eTabsElement_handleTabsPaginationChange() {
+  if (this.disablePagination) return;
+  const activeTab = this[selectionManager].activeItem ?? this.selectedTab;
+  if (activeTab) {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_scrollTabIntoView).call(this, activeTab, true);
+  }
+};
+_M3eTabsElement_handleTabsPointerDown = function _M3eTabsElement_handleTabsPointerDown(e) {
+  if (e.pointerType !== "touch") {
+    return; // swipe only supported for touch
+  }
+  e.currentTarget.setPointerCapture(e.pointerId);
+  __classPrivateFieldSet(this, _M3eTabsElement_swipe, {
+    x: e.clientX,
+    y: e.clientY
+  }, "f");
+  __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").reset();
+  __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").add(e.clientX);
+};
+_M3eTabsElement_handleTabsPointerMove = function _M3eTabsElement_handleTabsPointerMove(e) {
+  if (!__classPrivateFieldGet(this, _M3eTabsElement_swipe, "f") || !e.currentTarget.hasPointerCapture(e.pointerId)) {
+    return;
+  }
+  let dx = e.clientX - __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").x;
+  const dy = e.clientY - __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").y;
+  if (this.selectedIndex === 0 && dx > 0) {
+    dx = 0;
+  }
+  if (this.selectedIndex === this.tabs.length - 1 && dx < 0) {
+    dx = 0;
+  }
+  if (!__classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir) {
+    if (Math.abs(dx) > 10) {
+      __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir = "horizontal";
+    } else if (Math.abs(dy) > 10) {
+      __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir = "vertical";
+    } else {
+      return;
+    }
+  }
+  if (__classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir === "vertical") {
+    return;
+  }
+  __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").add(e.clientX);
+  __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").currentX = dx;
+  this.shadowRoot?.querySelector("m3e-slide")?.classList.add("sliding");
+  this.selectedTab?.control?.style.setProperty("--_tabs-slide-offset-x", `${dx}px`);
+  const nextTab = this.tabs[dx > 0 ? this.selectedIndex - 1 : this.selectedIndex + 1];
+  nextTab?.control?.style.setProperty("--_tabs-slide-offset-x", `${dx}px`);
+  nextTab?.control?.style.setProperty("--_tabs-slide-visibility", "visible");
+  const prevTab = this.tabs[dx > 0 ? this.selectedIndex + 1 : this.selectedIndex - 1];
+  prevTab?.control?.style.removeProperty("--_tabs-slide-offset-x");
+  prevTab?.control?.style.removeProperty("--_tabs-slide-visibility");
+};
+_M3eTabsElement_handleTabsPointerUp = function _M3eTabsElement_handleTabsPointerUp(e) {
+  if (!e.currentTarget.hasPointerCapture(e.pointerId)) {
+    return;
+  }
+  e.currentTarget.releasePointerCapture(e.pointerId);
+  if (__classPrivateFieldGet(this, _M3eTabsElement_swipe, "f") && __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir === "horizontal" && __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").currentX !== undefined) {
+    const dx = __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").currentX;
+    const threshold = this.clientWidth * 0.33;
+    const velocity = __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").getVelocity();
+    const significantVelocityThreshold = e.pointerType === "touch" ? 1200 : 500;
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_endSwipeGesture).call(this);
+    if (Math.abs(dx) > threshold || Math.abs(velocity) > significantVelocityThreshold) {
+      if (dx > threshold) {
+        // go to the previous tab only if its not disabled.
+        if (this.selectedIndex > 0 && this.tabs.length > 1 && !this.tabs[this.selectedIndex - 1].disabled) {
+          this.selectedIndex--;
+        }
+      } else if (dx < -threshold) {
+        // go to the next tab only if its not disabled.
+        if (this.selectedIndex < this.tabs.length - 1 && !this.tabs[this.selectedIndex + 1].disabled) {
+          this.selectedIndex++;
+        }
+      }
+    }
+  } else {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_endSwipeGesture).call(this);
+  }
+};
+_M3eTabsElement_handleTabsPointerCancel = function _M3eTabsElement_handleTabsPointerCancel(e) {
+  if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+    e.currentTarget.releasePointerCapture(e.pointerId);
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_endSwipeGesture).call(this);
+  }
+};
+_M3eTabsElement_handleTabsLostPointerCapture = function _M3eTabsElement_handleTabsLostPointerCapture() {
+  __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_endSwipeGesture).call(this);
+};
+_M3eTabsElement_endSwipeGesture = function _M3eTabsElement_endSwipeGesture() {
+  __classPrivateFieldSet(this, _M3eTabsElement_swipe, undefined, "f");
+  __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").reset();
+  const slide = this.shadowRoot?.querySelector("m3e-slide");
+  if (!slide || !slide.classList.contains("sliding")) {
+    return;
+  }
+  slide.classList.add("snap");
+  if (!prefersReducedMotion$1()) {
+    slide.addEventListener("transitionend", () => slide.classList.remove("snap"), {
+      once: true
+    });
+  }
+  slide.classList.remove("sliding");
+  this.tabs.forEach(x => {
+    x.control?.style.removeProperty("--_tabs-slide-offset-x");
+    x.control?.style.removeProperty("--_tabs-slide-visibility");
+  });
+};
+_M3eTabsElement_scrollTabIntoView = /** @private */
+async function _M3eTabsElement_scrollTabIntoView(tab, instant) {
+  await this.updateComplete;
+  for (const tab of this.tabs) {
+    await tab.updateComplete;
+  }
+  await this._tablist?.updateComplete;
+  const scrollMargin = 48;
+  const scrollContainer = this._tablist?.scrollContainer;
+  if (!scrollContainer) return;
+  scrollContainer?.scrollTo({
+    behavior: instant ? "instant" : "smooth",
+    top: 0,
+    left: Math.min(tab.offsetLeft - scrollContainer.offsetLeft - scrollMargin, Math.max(tab.offsetLeft + tab.offsetWidth - scrollContainer.offsetWidth - scrollContainer.offsetLeft + scrollMargin, scrollContainer.scrollLeft))
+  });
   __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
 };
 _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
@@ -27556,13 +27797,14 @@ _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
 };
 /** The styles of the element. */
 M3eTabsElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken$1.color.primary}); transition: ${unsafeCSS(`left var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard},
-        width var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken$1.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken$1.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
+        width var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken$1.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken$1.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } .tabs.sliding ::slotted([slot="panel"]) { transform: translateX(var(--_tabs-slide-offset-x)); visibility: var(--_tabs-slide-visibility, "hidden"); } .tabs.snap ::slotted([slot="panel"]) { transition: ${unsafeCSS(`inset-inline-start var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard},
+        transform var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard},
+        visibility var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } .tabs:not(.sliding) ::slotted([slot="panel"]) { transform: translateX(0); } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } .tabs.snap ::slotted([slot="panel"]) { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
 __decorate([query(".tablist")], M3eTabsElement.prototype, "_tablist", void 0);
 __decorate([state()], M3eTabsElement.prototype, "_selectedIndex", void 0);
 __decorate([property({
-  attribute: "disable-pagination",
-  type: Boolean
-})], M3eTabsElement.prototype, "disablePagination", void 0);
+  attribute: false
+})], M3eTabsElement.prototype, "disablePagination", null);
 __decorate([property({
   attribute: "header-position",
   reflect: true
@@ -32015,8 +32257,20 @@ let M3eThemeElement = class M3eThemeElement extends LitElement {
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    if (this.shadowRoot && !this.shadowRoot.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
-      this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f")];
+    if (this.parentElement instanceof HTMLBodyElement) {
+      if (this.shadowRoot?.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+        this.shadowRoot.adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets.filter(x => x !== __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"));
+      }
+      if (!document.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+        document.adoptedStyleSheets = [__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"), ...document.adoptedStyleSheets];
+      }
+    } else {
+      if (document.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+        document.adoptedStyleSheets = document.adoptedStyleSheets.filter(x => x !== __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"));
+      }
+      if (this.shadowRoot && !this.shadowRoot.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+        this.shadowRoot.adoptedStyleSheets = [__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"), ...this.shadowRoot.adoptedStyleSheets];
+      }
     }
     __classPrivateFieldSet(this, _M3eThemeElement_light, matchMedia("(prefers-color-scheme: light)"), "f");
     __classPrivateFieldSet(this, _M3eThemeElement_dark, matchMedia("(prefers-color-scheme: dark)"), "f");
@@ -32028,6 +32282,9 @@ let M3eThemeElement = class M3eThemeElement extends LitElement {
     super.disconnectedCallback();
     [__classPrivateFieldGet(this, _M3eThemeElement_light, "f"), __classPrivateFieldGet(this, _M3eThemeElement_dark, "f"), __classPrivateFieldGet(this, _M3eThemeElement_forcedColor, "f")].forEach(x => x?.removeEventListener("change", __classPrivateFieldGet(this, _M3eThemeElement_colorSchemeChangeHandler, "f")));
     __classPrivateFieldSet(this, _M3eThemeElement_light, __classPrivateFieldSet(this, _M3eThemeElement_dark, __classPrivateFieldSet(this, _M3eThemeElement_forcedColor, undefined, "f"), "f"), "f");
+    if (document.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+      document.adoptedStyleSheets = document.adoptedStyleSheets.filter(x => x !== __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"));
+    }
   }
   /** @inheritdoc */
   updated(_changedProperties) {
@@ -32085,9 +32342,20 @@ _M3eThemeElement_apply = function _M3eThemeElement_apply(forceReflow) {
   css += `--md-sys-density-scale: ${this.density};`;
   css += `--m3e-scrollbar-thumb-color: ${hexFromArgb(scheme.neutralPalette.tone(60))};`;
   css += `--m3e-focus-ring-visibility: ${this.strongFocus ? "visible" : "hidden"};`;
-  __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f").replaceSync(`:host { ${css} }`);
+  css += `font-size: ${DesignToken$1.typescale.standard.body.large.fontSize};`;
+  css += `font-weight: ${DesignToken$1.typescale.standard.body.large.fontWeight};`;
+  css += `line-height: ${DesignToken$1.typescale.standard.body.large.lineHeight};`;
+  css += `letter-spacing: ${DesignToken$1.typescale.standard.body.large.tracking};`;
   if (this.parentElement instanceof HTMLBodyElement) {
-    const computedStyle = getComputedStyle(this);
+    __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f").replaceSync(`
+        html { ${css} }
+        @media not (forced-colors: active) {
+          body { 
+            background-color: var(--md-sys-color-background);
+            color: var(--md-sys-color-on-background);
+            scrollbar-color: ${DesignToken$1.scrollbar.color};
+          }
+        }`);
     switch (this.scheme) {
       case "light":
         document.documentElement.style.colorScheme = "light";
@@ -32103,13 +32371,8 @@ _M3eThemeElement_apply = function _M3eThemeElement_apply(forceReflow) {
             break;
         }
     }
-    if (__classPrivateFieldGet(this, _M3eThemeElement_forcedColor, "f")?.matches) {
-      this.parentElement.style.backgroundColor = this.parentElement.style.color = this.parentElement.ownerDocument.documentElement.style.scrollbarColor = this.parentElement.style.scrollbarColor = "";
-    } else {
-      this.parentElement.style.backgroundColor = computedStyle.getPropertyValue("--md-sys-color-background");
-      this.parentElement.style.color = computedStyle.getPropertyValue("--md-sys-color-on-background");
-      this.parentElement.ownerDocument.documentElement.style.scrollbarColor = this.parentElement.style.scrollbarColor = `${computedStyle.getPropertyValue("--m3e-scrollbar-thumb-color")} ${computedStyle.getPropertyValue("--m3e-scrollbar-track-color")}`;
-    }
+  } else {
+    __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f").replaceSync(`:host { ${css} }`);
   }
   if (__classPrivateFieldGet(this, _M3eThemeElement_firstUpdated, "f")) {
     this.dispatchEvent(new Event("change", {
@@ -32132,7 +32395,7 @@ _M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel()
   }
 };
 /** The styles of the element. */
-M3eThemeElement.styles = css`:host { display: contents; font-size: ${DesignToken$1.typescale.standard.body.large.fontSize}; font-weight: ${DesignToken$1.typescale.standard.body.large.fontWeight}; line-height: ${DesignToken$1.typescale.standard.body.large.lineHeight}; letter-spacing: ${DesignToken$1.typescale.standard.body.large.tracking}; }`;
+M3eThemeElement.styles = css`:host { display: contents; }`;
 __decorate([property()], M3eThemeElement.prototype, "color", void 0);
 __decorate([property()], M3eThemeElement.prototype, "scheme", void 0);
 __decorate([property()], M3eThemeElement.prototype, "contrast", void 0);
@@ -32154,7 +32417,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 +33530,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 +33895,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.