@expressivecss/expressive 0.9.1 → 0.10.0

package/dist/js/expressive.js

@@ -37,12 +37,10 @@ var Expressive = (() => {
     Forms: () => Forms,
     Lightbox: () => Lightbox,
     Menu: () => Menu,
-    NavigationDrawer: () => NavigationDrawer,
     NavigationRail: () => NavigationRail,
     Range: () => Slider,
     ScrollSpy: () => ScrollSpy,
     SideSheets: () => SideSheets,
-    Sidenav: () => NavigationDrawer,
     Slider: () => Slider,
     Snackbar: () => Snackbar,
     Tabs: () => Tabs,
@@ -867,34 +865,45 @@ var Expressive = (() => {
         }
       };
       this._handleMenuKeydown = (e) => {
+        if (!this.isOpen || e.ctrlKey || e.metaKey || e.altKey || e.isComposing) return;
+        const list = this._containingSubmenu(e) ?? this.menuEl;
+        const rtl = getComputedStyle(list).direction === "rtl";
+        const openKey = rtl ? Utils.keys.ARROW_LEFT : Utils.keys.ARROW_RIGHT;
+        const backKey = rtl ? Utils.keys.ARROW_RIGHT : Utils.keys.ARROW_LEFT;
+        if ([openKey, backKey, Utils.keys.ARROW_UP, Utils.keys.ARROW_DOWN, Utils.keys.ESC, Utils.keys.TAB].includes(e.key)) {
+          clearTimeout(this.filterTimeout);
+          this._resetFilterQuery();
+        }
         const arrowUpOrDown = e.key === Utils.keys.ARROW_DOWN || e.key === Utils.keys.ARROW_UP;
         if (e.key === Utils.keys.TAB) {
           e.preventDefault();
           this.close();
-        } else if (e.key === Utils.keys.ARROW_RIGHT && this.isOpen) {
+        } else if (e.key === openKey) {
           const li = this._focusedRow(e);
-          if (li?.querySelector(":scope > menu")) {
+          if (li?.querySelector(":scope > menu") && !li.matches('.disabled, [aria-disabled="true"]')) {
             e.preventDefault();
             li.classList.add("open");
             this._alignSubmenu(li);
             this._syncSubmenuAria(li, true);
-            const first = li.querySelector(":scope > menu > li");
-            first?.focus();
+            const first = Array.from(li.querySelector(":scope > menu").children).find(
+              (child) => child instanceof HTMLElement && child.tabIndex !== -1
+            );
+            if (first) this._focusRow(first);
           }
-        } else if (e.key === Utils.keys.ARROW_LEFT && this.isOpen) {
+        } else if (e.key === backKey) {
           const submenu = this._containingSubmenu(e);
           if (submenu) {
             e.preventDefault();
             const parentLi = submenu.parentElement;
             parentLi.classList.remove("open", "submenu-start");
             this._syncSubmenuAria(parentLi, false);
-            parentLi.focus();
+            this._focusRow(parentLi);
           }
         } else if (arrowUpOrDown && this.isOpen) {
           e.preventDefault();
           const direction = e.key === Utils.keys.ARROW_DOWN ? 1 : -1;
-          const list = this._containingSubmenu(e) ?? this.menuEl;
-          let newFocusedIndex = this.focusedIndex;
+          const row = this._focusedRow(e);
+          let newFocusedIndex = row ? Array.from(list.children).indexOf(row) : this.focusedIndex;
           let hasFoundNewIndex = false;
           do {
             newFocusedIndex = newFocusedIndex + direction;
@@ -905,10 +914,9 @@ var Expressive = (() => {
           } while (newFocusedIndex < list.children.length && newFocusedIndex >= 0);
           if (hasFoundNewIndex) {
             if (this.focusedIndex >= 0) list.children[this.focusedIndex]?.classList.remove("active");
-            this.focusedIndex = newFocusedIndex;
-            const item = list.children[this.focusedIndex];
+            const item = list.children[newFocusedIndex];
             item.classList.add("active");
-            item.focus({ preventScroll: true });
+            this._focusRow(item);
           }
         } else if ((e.key === Utils.keys.ENTER || e.key === SPACE) && this.isOpen) {
           const li = this._focusedRow(e);
@@ -919,7 +927,7 @@ var Expressive = (() => {
             return;
           }
           const focusedElement = li ?? this.menuEl.children[this.focusedIndex];
-          const activatableElement = focusedElement?.querySelector("a, button");
+          const activatableElement = focusedElement?.querySelector(":scope > a, :scope > button");
           if (!!activatableElement) {
             activatableElement.click();
           } else if (focusedElement instanceof HTMLElement) {
@@ -927,39 +935,28 @@ var Expressive = (() => {
           }
         } else if (e.key === Utils.keys.ESC && this.isOpen) {
           e.preventDefault();
-          const openSub = this.menuEl.querySelector("li.open");
+          const openSub = this._containingSubmenu(e)?.parentElement ?? Array.from(this.menuEl.querySelectorAll("li.open")).reverse()[0];
           if (openSub) {
             openSub.classList.remove("open", "submenu-start");
             this._syncSubmenuAria(openSub, false);
-            openSub.focus();
+            this._focusRow(openSub);
           } else {
             this.close();
           }
         }
         const keyText = e.key.toLowerCase();
-        const isLetter = /[a-zA-Z0-9-_]/.test(keyText);
-        const specialKeys = [
-          Utils.keys.ARROW_DOWN,
-          Utils.keys.ARROW_UP,
-          Utils.keys.ENTER,
-          Utils.keys.ESC,
-          Utils.keys.TAB,
-          SPACE
-        ];
-        if (isLetter && !specialKeys.includes(e.key)) {
+        if (e.key.length === 1 && e.key !== SPACE && !e.ctrlKey && !e.metaKey && !e.altKey && !e.isComposing) {
           this.filterQuery.push(keyText);
           const string = this.filterQuery.join("");
-          const list = this._containingSubmenu(e) ?? this.menuEl;
           const newOptionEl = Array.from(list.querySelectorAll(":scope > li")).find(
-            (el) => el.textContent.trim().toLowerCase().indexOf(string) === 0
+            (el) => el.tabIndex !== -1 && !el.matches('.disabled, [aria-disabled="true"]') && Array.from(el.childNodes).filter((node) => !(node instanceof Element && node.matches("menu"))).map((node) => node.textContent).join("").trim().toLowerCase().startsWith(string)
           );
           if (newOptionEl) {
-            this.focusedIndex = [...newOptionEl.parentNode.children].indexOf(newOptionEl);
-            this._focusFocusedItem();
+            this._focusRow(newOptionEl);
           }
+          clearTimeout(this.filterTimeout);
+          this.filterTimeout = setTimeout(this._resetFilterQuery, 1e3);
         }
-        clearTimeout(this.filterTimeout);
-        this.filterTimeout = setTimeout(this._resetFilterQuery, 1e3);
       };
       this._handleWindowResize = () => {
         if (this.el.offsetParent) {
@@ -982,6 +979,7 @@ var Expressive = (() => {
         if (transition !== this._transition) return;
         this._resetMenuStyles();
         this.menuEl.style.display = "block";
+        this._restoreInert();
         this._placeMenu();
         this._schedule(() => this._setupTemporaryEventHandlers(), 0);
         this._animateIn();
@@ -993,7 +991,12 @@ var Expressive = (() => {
       this.close = () => {
         if (!this.isOpen) return;
         const transition = this._clearPendingTimers();
+        const root = this.menuEl.getRootNode();
+        const focused = root.activeElement;
         this.isOpen = false;
+        this.menuEl.setAttribute("inert", "");
+        clearTimeout(this.filterTimeout);
+        this._resetFilterQuery();
         this.focusedIndex = -1;
         this._closeSubmenus();
         if (typeof this.options.onCloseStart === "function") {
@@ -1003,7 +1006,7 @@ var Expressive = (() => {
         this._animateOut();
         this._removeTemporaryEventHandlers();
         this.el.ariaExpanded = "false";
-        if (this.options.autoFocus) {
+        if (this.options.autoFocus && (root.activeElement === focused || !root.activeElement || root.activeElement === document.body)) {
           this.el.focus();
         }
       };
@@ -1020,6 +1023,7 @@ var Expressive = (() => {
       _Menu._menus.push(this);
       this.id = Utils.getIdFromTrigger(el);
       this.menuEl = Utils.getElementById(el, this.id);
+      this._originalInert = this.menuEl?.getAttribute("inert") ?? null;
       this.options = {
         ..._Menu.defaults,
         ...options
@@ -1059,6 +1063,7 @@ var Expressive = (() => {
       this.el.ariaExpanded = "false";
       clearTimeout(this.filterTimeout);
       this._resetMenuStyles();
+      this._restoreInert();
       this._removeEventHandlers();
       this._removeTemporaryEventHandlers();
       const index = _Menu._menus.indexOf(this);
@@ -1169,7 +1174,7 @@ var Expressive = (() => {
       if (!menu) return;
       li.classList.remove("submenu-start");
       const rect = menu.getBoundingClientRect();
-      if (rect.right > window.innerWidth - 8) li.classList.add("submenu-start");
+      if (rect.left < 8 || rect.right > window.innerWidth - 8) li.classList.add("submenu-start");
     }
     _closeSubmenus() {
       this.menuEl?.querySelectorAll("li.open").forEach((li) => {
@@ -1191,6 +1196,15 @@ var Expressive = (() => {
       if (li instanceof HTMLElement && this.menuEl?.contains(li)) return li;
       return null;
     }
+    _restoreInert() {
+      if (this._originalInert === null) this.menuEl?.removeAttribute("inert");
+      else this.menuEl?.setAttribute("inert", this._originalInert);
+    }
+    _focusRow(item) {
+      this.focusedIndex = Array.from(item.parentElement.children).indexOf(item);
+      item.focus({ preventScroll: true });
+      item.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
     _resetMenuStyles() {
       this.menuEl.style.display = "";
       this._resetMenuPositioningStyles();
@@ -1399,6 +1413,12 @@ var Expressive = (() => {
 
   // src/ts/components/autocomplete.ts
   var _defaults4 = {
+    i18n: {
+      loading: "Loading results.",
+      noResults: "No results.",
+      results: (count) => `${count} ${count === 1 ? "result" : "results"} available.`,
+      selected: (count) => `${count} ${count === 1 ? "item" : "items"} selected.`
+    },
     data: [],
     // Autocomplete data set
     onAutocomplete: null,
@@ -1414,11 +1434,13 @@ var Expressive = (() => {
     isMultiSelect: false,
     onSearch: (text, autocomplete) => {
       const normSearch = text.toLocaleLowerCase();
+      const data = autocomplete.options.data;
       autocomplete.setMenuItems(
-        autocomplete.options.data.filter(
+        data.filter(
           (option) => option.id.toString().toLocaleLowerCase().includes(normSearch) || option.text?.toLocaleLowerCase().includes(normSearch)
         )
       );
+      autocomplete.options.data = data;
     },
     maxMenuHeight: "300px",
     allowUnsafeHTML: false,
@@ -1437,7 +1459,7 @@ var Expressive = (() => {
         if (e.type === "keyup") _Autocomplete._keydown = false;
         this.count = 0;
         const actualValue = this.el.value.toLocaleLowerCase();
-        if (e.key === Utils.keys.ENTER || e.key === Utils.keys.ARROW_UP || e.key === Utils.keys.ARROW_DOWN)
+        if (e.key === Utils.keys.ENTER || e.key === Utils.keys.ARROW_UP || e.key === Utils.keys.ARROW_DOWN || e.key === Utils.keys.ESC || e.key === "Tab")
           return;
         if (this.oldVal !== actualValue && this.el.matches(":focus-visible")) {
           this.open();
@@ -1450,6 +1472,9 @@ var Expressive = (() => {
         this._inputChangeDetection(actualValue);
       };
       this._inputChangeDetection = (value) => {
+        if (!this.options.isMultiSelect && this.selectedValues.length && this.el.value !== (this.selectedValues[0].text || String(this.selectedValues[0].id))) {
+          this.selectedValues = [];
+        }
         if (this.oldVal !== value) {
           this._setStatusLoading();
           this.options.onSearch(this.el.value, this);
@@ -1462,6 +1487,11 @@ var Expressive = (() => {
       };
       this._handleInputKeydown = (e) => {
         _Autocomplete._keydown = true;
+        if (e.key === Utils.keys.ESC || e.key === "Tab") {
+          this.close();
+          this._resetCurrentElementPosition();
+          return;
+        }
         const numItems = this.container.querySelectorAll("li").length;
         if (e.key === Utils.keys.ENTER && this.activeIndex >= 0) {
           const liElement = this.container.querySelectorAll("li")[this.activeIndex];
@@ -1511,6 +1541,7 @@ var Expressive = (() => {
         if (inputText.length >= this.options.minLength) {
           this.isOpen = true;
           this._renderMenu();
+          this._announce(this.menuItems.length ? this.options.i18n.results(this.menuItems.length) : this.options.i18n.noResults);
         }
         if (!this.menu.isOpen) {
           if (this._openTimer !== void 0) clearTimeout(this._openTimer);
@@ -1524,18 +1555,25 @@ var Expressive = (() => {
        * Hide autocomplete.
        */
       this.close = () => {
+        if (this._announcer) this._announcer.textContent = "";
+        if (this._openTimer !== void 0) {
+          clearTimeout(this._openTimer);
+          this._openTimer = void 0;
+        }
+        this.isOpen = false;
         this.menu.close();
       };
       this.el["Expressive_Autocomplete"] = this;
       this.options = {
         ..._Autocomplete.defaults,
-        ...options
+        ...options,
+        i18n: { ..._Autocomplete.defaults.i18n, ...options?.i18n }
       };
       this.isOpen = false;
       this.count = 0;
       this.activeIndex = -1;
       this.oldVal = "";
-      this.selectedValues = this.selectedValues || this.options.selected.map((value) => ({ id: value })) || [];
+      this.selectedValues = this.options.selected.map((id) => this.options.data.find((entry) => entry.id === id) ?? { id });
       this.menuItems = this.options.data || [];
       this.$active = null;
       this._pointerDown = false;
@@ -1594,7 +1632,10 @@ var Expressive = (() => {
         this._openTimer = void 0;
       }
       this._removeEventHandlers();
+      this.menu.destroy();
       this._removeMenu();
+      this._statusInfo.remove();
+      this._announcer.remove();
       this.el["Expressive_Autocomplete"] = void 0;
     }
     _setupEventHandlers() {
@@ -1645,6 +1686,7 @@ var Expressive = (() => {
         if (typeof userOnItemClick === "function") userOnItemClick.call(this.menu, li);
       };
       this.menu = Menu.init(this.el, menuOptions);
+      this.el.setAttribute("aria-haspopup", "listbox");
       const label = this.el.parentElement.querySelector("label");
       if (label) this.el.after(label);
       this.el.removeEventListener("click", this.menu._handleClick);
@@ -1655,8 +1697,16 @@ var Expressive = (() => {
       if (this.el.value) this.selectOption(this.el.value);
       const div = document.createElement("div");
       div.classList.add("status-info");
+      div.setAttribute("aria-hidden", "true");
       div.setAttribute("style", "position: absolute;right:0;top:0;");
       this.el.parentElement.appendChild(div);
+      this._statusInfo = div;
+      this._announcer = document.createElement("div");
+      this._announcer.classList.add("autocomplete-status");
+      this._announcer.setAttribute("role", "status");
+      this._announcer.setAttribute("aria-live", "polite");
+      this._announcer.setAttribute("aria-atomic", "true");
+      this.el.parentElement.appendChild(this._announcer);
       this._updateSelectedInfo();
     }
     _removeMenu() {
@@ -1693,13 +1743,14 @@ var Expressive = (() => {
         "style",
         "display:grid; grid-auto-flow: column; user-select: none; align-items: center;"
       );
-      item.tabIndex = 0;
+      item.tabIndex = -1;
       if (this.options.isMultiSelect) {
         const selection = document.createElement("div");
         selection.classList.add("item-selection");
         selection.style.textAlign = "center";
         const checkbox = document.createElement("input");
         checkbox.type = "checkbox";
+        checkbox.tabIndex = -1;
         checkbox.checked = isSelected;
         const spacer = document.createElement("span");
         spacer.style.paddingLeft = "21px";
@@ -1764,11 +1815,17 @@ var Expressive = (() => {
       }
     }
     _setStatusLoading() {
-      const statusElement = this.el.parentElement.querySelector(".status-info");
+      const statusElement = this._statusInfo;
       if (statusElement) statusElement.replaceChildren(_Autocomplete._loadingIndicator());
+      this._announce(this.options.i18n.loading);
+    }
+    _announce(message) {
+      if (!this._announcer) return;
+      const text = this.el.matches(":focus") && this.el.value.length >= this.options.minLength ? message : "";
+      if (this._announcer.textContent !== text) this._announcer.textContent = text;
     }
     _updateSelectedInfo() {
-      const statusElement = this.el.parentElement.querySelector(".status-info");
+      const statusElement = this._statusInfo;
       if (statusElement) {
         if (this.options.isMultiSelect)
           statusElement.textContent = this.selectedValues.length.toString();
@@ -1793,6 +1850,8 @@ var Expressive = (() => {
      * @param open Option to conditionally open menu
      */
     setMenuItems(menuItems, selected = null, open = true) {
+      if (this.el["Expressive_Autocomplete"] !== this) return;
+      const resultCount = menuItems.length;
       this.menuItems = menuItems;
       this.options.data = menuItems;
       if (selected) {
@@ -1807,6 +1866,7 @@ var Expressive = (() => {
       }
       if (open) this.open();
       this._updateSelectedInfo();
+      this._announce(open ? resultCount ? this.options.i18n.results(resultCount) : this.options.i18n.noResults : "");
       this._triggerChanged();
     }
     /**
@@ -1832,6 +1892,7 @@ var Expressive = (() => {
         this.close();
       }
       this._updateSelectedInfo();
+      if (this.options.isMultiSelect) this._announce(this.options.i18n.selected(this.selectedValues.length));
       this._triggerChanged();
     }
   };
@@ -1870,8 +1931,7 @@ var Expressive = (() => {
           const index = this._chips.indexOf(_chip);
           if (index < 0) return;
           if (clickedClose) {
-            this.deleteChip(index);
-            this._input.focus();
+            this._deleteChip(index, "input");
           } else {
             this.selectChip(index);
           }
@@ -1963,8 +2023,8 @@ var Expressive = (() => {
     }
     _setupEventHandlers() {
       this.el.addEventListener("click", this._handleChipClick);
-      document.addEventListener("keydown", _Chips._handleChipsKeydown);
-      document.addEventListener("keyup", _Chips._handleChipsKeyup);
+      this.el.addEventListener("keydown", _Chips._handleChipsKeydown);
+      this.el.addEventListener("keyup", _Chips._handleChipsKeyup);
       this.el.addEventListener("blur", _Chips._handleChipsBlur, true);
       this._input.addEventListener("focus", this._handleInputFocus);
       this._input.addEventListener("blur", this._handleInputBlur);
@@ -1972,8 +2032,8 @@ var Expressive = (() => {
     }
     _removeEventHandlers() {
       this.el.removeEventListener("click", this._handleChipClick);
-      document.removeEventListener("keydown", _Chips._handleChipsKeydown);
-      document.removeEventListener("keyup", _Chips._handleChipsKeyup);
+      this.el.removeEventListener("keydown", _Chips._handleChipsKeydown);
+      this.el.removeEventListener("keyup", _Chips._handleChipsKeyup);
       this.el.removeEventListener("blur", _Chips._handleChipsBlur, true);
       this._input.removeEventListener("focus", this._handleInputFocus);
       this._input.removeEventListener("blur", this._handleInputBlur);
@@ -1988,16 +2048,10 @@ var Expressive = (() => {
       const currChips = chips["Expressive_Chips"];
       if (!currChips) return;
       if (e.key === Utils.keys.BACKSPACE || e.key === Utils.keys.DELETE) {
+        const index = currChips._chips.indexOf(e.target.closest(".chip"));
+        if (index < 0) return;
         e.preventDefault();
-        let selectIndex = currChips.chipsData.length;
-        if (currChips._selectedChip) {
-          const index = currChips._chips.indexOf(currChips._selectedChip);
-          currChips.deleteChip(index);
-          currChips._setSelected(null);
-          selectIndex = Math.max(index - 1, 0);
-        }
-        if (currChips.chipsData.length) currChips.selectChip(selectIndex);
-        else currChips._input.focus();
+        currChips._deleteChip(index, "previous");
       } else if (e.key === Utils.keys.ARROW_LEFT) {
         if (currChips._selectedChip) {
           const selectIndex = currChips._chips.indexOf(currChips._selectedChip) - 1;
@@ -2118,6 +2172,10 @@ var Expressive = (() => {
      * @param chipIndex  Index of chip
      */
     deleteChip(chipIndex) {
+      const root = this.el.getRootNode();
+      this._deleteChip(chipIndex, this._chips[chipIndex]?.contains(root.activeElement) ? "input" : null);
+    }
+    _deleteChip(chipIndex, focus) {
       const chip = this._chips[chipIndex];
       if (!chip) return;
       if (this._selectedChip === chip) this._setSelected(null);
@@ -2125,9 +2183,21 @@ var Expressive = (() => {
       this._chips.splice(chipIndex, 1);
       this.chipsData.splice(chipIndex, 1);
       this._setPlaceholder();
+      const focusPath = [];
+      let root = this.el.getRootNode();
+      while (root) {
+        focusPath.push({ root, element: root.activeElement });
+        root = "host" in root ? root.host.getRootNode() : null;
+      }
       if (typeof this.options.onChipDelete === "function") {
         this.options.onChipDelete(this.el, chip);
       }
+      if (!focus || focusPath.some(({ root: root2, element }) => root2.activeElement !== element) || this.el["Expressive_Chips"] !== this) return;
+      if (focus === "previous" && this._chips.length) this.selectChip(Math.max(chipIndex - 1, 0));
+      else {
+        this._setSelected(null);
+        this._input?.focus();
+      }
     }
     /**
      * Select nth chip.
@@ -2165,6 +2235,7 @@ var Expressive = (() => {
   var Slider = class _Slider extends Component {
     constructor(el, options) {
       super(el, options, _Slider);
+      this._resizeObserver = null;
       this._handleRangeChange = () => {
         this._clampDual();
         this._sync();
@@ -2179,8 +2250,8 @@ var Expressive = (() => {
         this._sync();
         this.thumb.classList.add("active");
       };
-      this._handleRangeInputOrMove = () => {
-        if (this._pointerDown) {
+      this._handleRangeInputOrMove = (e) => {
+        if (e.type === "input" || this._pointerDown) {
           this._clampDual();
           this._sync();
           this.thumb.classList.add("active");
@@ -2205,6 +2276,10 @@ var Expressive = (() => {
       this._setupThumb();
       this._sync();
       this._setupEventHandlers();
+      if (typeof ResizeObserver !== "undefined") {
+        this._resizeObserver = new ResizeObserver(() => this._sync());
+        this._resizeObserver.observe(this.el);
+      }
     }
     static get defaults() {
       return _defaults6;
@@ -2221,6 +2296,7 @@ var Expressive = (() => {
       return el["Expressive_Slider"];
     }
     destroy() {
+      this._resizeObserver?.disconnect();
       this._removeEventHandlers();
       this._removeThumb();
       this.el["Expressive_Slider"] = void 0;
@@ -2275,7 +2351,8 @@ var Expressive = (() => {
       if (this.el === end && +end.value < +start.value) end.value = start.value;
     }
     _fraction(el) {
-      const max = parseFloat(el.max) || 100;
+      const parsedMax = parseFloat(el.max);
+      const max = Number.isNaN(parsedMax) ? 100 : parsedMax;
       const min = parseFloat(el.min) || 0;
       const val = parseFloat(el.value) || 0;
       return max === min ? 0 : (val - min) / (max - min);
@@ -2287,16 +2364,26 @@ var Expressive = (() => {
       const top = this.el.offsetTop;
       const width = this.el.offsetWidth;
       const height = this.el.offsetHeight;
+      const style = getComputedStyle(this.el);
+      const rtl = style.direction === "rtl";
+      const vertical = this._isVertical();
+      const handle = parseFloat(style.getPropertyValue("--md-comp-slider-handle-width")) || 4;
+      const length = vertical ? height : width;
+      const position = handle / 2 + percent * (length - handle);
       this.el.style.setProperty("--md-comp-slider-active-fraction", fraction);
+      this.el.style.setProperty("--md-comp-slider-active-position", `${position}px`);
       const host = this._host();
       const peers = host?.querySelectorAll('input[type="range"]');
       if (host && peers && peers.length === 2) {
         const nums = Array.from(peers).map((el) => this._fraction(el));
         host.style.setProperty("--md-comp-slider-start-fraction", `${Math.min(...nums) * 100}%`);
         host.style.setProperty("--md-comp-slider-end-fraction", `${Math.max(...nums) * 100}%`);
+        host.style.setProperty("--md-comp-slider-start-position", `${handle / 2 + Math.min(...nums) * (length - handle)}px`);
+        host.style.setProperty("--md-comp-slider-end-position", `${handle / 2 + Math.max(...nums) * (length - handle)}px`);
       }
       if (host?.classList.contains("stops")) {
-        const max = parseFloat(this.el.max) || 100;
+        const parsedMax = parseFloat(this.el.max);
+        const max = Number.isNaN(parsedMax) ? 100 : parsedMax;
         const min = parseFloat(this.el.min) || 0;
         const step = parseFloat(this.el.step);
         if (step > 0 && Number.isFinite(step)) {
@@ -2305,11 +2392,11 @@ var Expressive = (() => {
         }
       }
       this.value.textContent = this.el.value;
-      if (this._isVertical()) {
+      if (vertical) {
         this.thumb.style.left = `${left + width / 2}px`;
-        this.thumb.style.top = `${top + (1 - percent) * height}px`;
+        this.thumb.style.top = `${top + height - position}px`;
       } else {
-        this.thumb.style.left = `${left + percent * width}px`;
+        this.thumb.style.left = `${left + (rtl ? width - position : position)}px`;
         this.thumb.style.top = `${top}px`;
       }
     }
@@ -2397,6 +2484,7 @@ var Expressive = (() => {
   var DRAG_SLOP = 4;
   function installSheetDrag(config) {
     const coord = (event) => config.axis === "x" ? event.clientX : event.clientY;
+    let observer;
     let drag = null;
     const sheetFor = (target) => {
       if (!(target instanceof Element)) return null;
@@ -2408,9 +2496,10 @@ var Expressive = (() => {
       dialog.style.setProperty(config.property, "0px");
     };
     const onDown = (event) => {
-      config.onPress?.();
       if (!event.isPrimary) return;
       if (event.pointerType === "mouse" && event.button !== 0) return;
+      onCancel();
+      config.onPress?.();
       const dialog = sheetFor(event.target);
       if (!dialog?.open) {
         drag = null;
@@ -2430,9 +2519,14 @@ var Expressive = (() => {
         lastT: Date.now(),
         shift: 0
       };
+      observer.observe(document, { childList: true, subtree: true, attributes: true, attributeFilter: ["open"], attributeOldValue: true });
     };
     const onMove = (event) => {
       if (!drag || drag.pointerId !== event.pointerId) return;
+      if (!drag.dialog.open || !drag.dialog.isConnected) {
+        onCancel();
+        return;
+      }
       const delta = coord(event) - drag.start;
       drag.shift = drag.direction === 1 ? Math.max(0, delta) : Math.min(0, delta);
       drag.last = coord(event);
@@ -2442,7 +2536,12 @@ var Expressive = (() => {
     const onUp = (event) => {
       const held = drag;
       if (!held || held.pointerId !== event.pointerId) return;
+      if (!held.dialog.open || !held.dialog.isConnected) {
+        onCancel();
+        return;
+      }
       drag = null;
+      observer.disconnect();
       held.dialog.style.transition = "";
       const dt = Math.max(1, Date.now() - held.lastT);
       const velocity = (coord(event) - held.last) / dt;
@@ -2451,13 +2550,21 @@ var Expressive = (() => {
       if (dismiss && held.dialog.open) held.dialog.close();
       held.dialog.style.setProperty(config.property, "0px");
     };
-    const onCancel = () => {
+    const onCancel = (event) => {
+      if (event && drag?.pointerId !== event.pointerId) return;
+      observer.disconnect();
       config.onRelease?.(false);
       const held = drag;
       drag = null;
       if (held) reset(held.dialog);
     };
     Utils.onDocumentReady(() => {
+      observer = new MutationObserver((records) => {
+        const dialog = drag?.dialog;
+        if (dialog && (!dialog.open || !dialog.isConnected || records.some(
+          (record) => record.type === "attributes" && record.target === dialog && record.oldValue === null || [...record.removedNodes].some((node) => node.contains(dialog))
+        ))) onCancel();
+      });
       document.addEventListener("pointerdown", onDown, { passive: true });
       document.addEventListener("pointermove", onMove, { passive: true });
       document.addEventListener("pointerup", onUp, { passive: true });
@@ -2511,20 +2618,19 @@ var Expressive = (() => {
 
   // src/ts/behaviors/sideSheets.ts
   var startDocked = (dialog) => dialog.classList.contains("left") || dialog.classList.contains("left-sheet") || dialog.classList.contains("start");
+  var leftDocked = (dialog) => startDocked(dialog) !== (getComputedStyle(dialog).direction === "rtl");
   var SideSheets = class {
     static Init() {
       installSheetDrag({
         selector: "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet",
         axis: "x",
         property: "--md-comp-side-sheet-shift",
-        // A start-docked sheet leaves toward the start edge, so its dismissal
-        // direction is the negative one.
-        direction: (dialog) => startDocked(dialog) ? -1 : 1,
+        direction: (dialog) => leftDocked(dialog) ? -1 : 1,
         inHandle: (event, dialog) => {
           const target = event.target;
           if (target instanceof Element && target.closest("header")) return true;
           const rect = dialog.getBoundingClientRect();
-          return startDocked(dialog) ? event.clientX >= rect.right - 24 && event.clientX <= rect.right : event.clientX >= rect.left && event.clientX <= rect.left + 24;
+          return leftDocked(dialog) ? event.clientX >= rect.right - 24 && event.clientX <= rect.right : event.clientX >= rect.left && event.clientX <= rect.left + 24;
         }
       });
     }
@@ -2631,22 +2737,19 @@ var Expressive = (() => {
       this._sentinel = null;
       this._input = null;
       this._view = null;
-      this._suppressSearchOpen = false;
+      this._searchOpen = false;
       this._onIntersect = (entries) => {
         const entry = entries[0];
         if (!entry) return;
         this.el.classList.toggle("collapsed", !entry.isIntersecting);
       };
       this._onSearchViewClose = () => {
-        this._suppressSearchOpen = true;
+        this._searchOpen = this._view.open;
       };
       this._onSearchFocus = () => {
-        if (!this._view) return;
-        if (this._suppressSearchOpen) {
-          this._suppressSearchOpen = false;
-          return;
-        }
+        if (!this._view || this._searchOpen) return;
         if (this._view instanceof HTMLDialogElement) {
+          this._searchOpen = true;
           if (!this._view.open) this._view.showModal();
           return;
         }
@@ -2673,6 +2776,7 @@ var Expressive = (() => {
       this._sentinel?.remove();
       this._sentinel = null;
       this._input?.removeEventListener("focus", this._onSearchFocus);
+      this._input?.removeEventListener("click", this._onSearchFocus);
       this._view?.removeEventListener("close", this._onSearchViewClose);
       this.el.classList.remove("collapsed");
       this.el["Expressive_AppBar"] = void 0;
@@ -2697,6 +2801,7 @@ var Expressive = (() => {
       if (!this._view) this._view = this.el.querySelector(".search-view");
       if (!this._view) return;
       this._input.addEventListener("focus", this._onSearchFocus);
+      this._input.addEventListener("click", this._onSearchFocus);
       if (this._view instanceof HTMLDialogElement) {
         this._view.addEventListener("close", this._onSearchViewClose);
       }
@@ -2704,30 +2809,24 @@ var Expressive = (() => {
   };
 
   // src/ts/components/buttons.ts
-  var _defaults8 = {
-    direction: "top",
-    hoverEnabled: true,
-    toolbarEnabled: false
-  };
+  var _defaults8 = {};
   var FloatingActionButton = class _FloatingActionButton extends Component {
     constructor(el, options) {
       super(el, options, _FloatingActionButton);
-      /**
-       * Open FAB.
-       */
       this.open = () => {
         if (this.isOpen) return;
         this.isOpen = true;
+        if (this._list) this._list.inert = false;
         this.el.classList.add("active");
         this._anchor?.setAttribute("aria-expanded", "true");
         document.addEventListener("click", this._handleDocumentClick);
         document.addEventListener("keydown", this._handleDocumentKeydown);
       };
-      /**
-       * Close FAB.
-       */
       this.close = () => {
         if (!this.isOpen) return;
+        const focused = this.el.getRootNode().activeElement;
+        if (focused && this._list?.contains(focused)) this._anchor?.focus();
+        if (this._list) this._list.inert = true;
         this.isOpen = false;
         this.el.classList.remove("active");
         this._anchor?.setAttribute("aria-expanded", "false");
@@ -2735,8 +2834,12 @@ var Expressive = (() => {
         document.removeEventListener("keydown", this._handleDocumentKeydown);
       };
       this._handleFABClick = (e) => {
-        e.stopPropagation();
-        this._toggle();
+        const target = e.target;
+        if (!(target instanceof Element)) return;
+        const control = target.closest("a, button");
+        if (!control || control.matches(':disabled, [aria-disabled="true"]')) return;
+        if (control === this._anchor) this._toggle();
+        else if (this._list?.contains(control)) this.close();
       };
       this._handleAnchorKeydown = (e) => {
         if (e.key === Utils.keys.ENTER || e.key === " ") {
@@ -2745,36 +2848,26 @@ var Expressive = (() => {
         }
       };
       this._handleDocumentKeydown = (e) => {
-        if (e.key === Utils.keys.ESC) this.close();
+        if (e.key === Utils.keys.ESC && !e.defaultPrevented) this.close();
       };
       this._handleDocumentClick = (e) => {
-        const target = e.target;
-        if (!(target instanceof Node) || this.el.contains(target)) return;
+        if (e.composedPath().includes(this.el)) return;
         this.close();
       };
       this.el["Expressive_FloatingActionButton"] = this;
-      const fromMarkup = this._directionFromClass();
-      const toolbar = el.classList.contains("toolbar") || options.toolbarEnabled === true;
-      const clickToToggle = el.classList.contains("click-to-toggle") || options.hoverEnabled === false;
-      this.options = {
-        ..._FloatingActionButton.defaults,
-        ...options,
-        direction: options.direction ?? fromMarkup ?? _FloatingActionButton.defaults.direction,
-        hoverEnabled: !clickToToggle,
-        toolbarEnabled: toolbar
-      };
+      this.options = { ..._FloatingActionButton.defaults, ...options };
       this.isOpen = false;
       this._anchor = this.el.querySelector(":scope > a, :scope > button");
-      this.el.classList.add(`direction-${this.options.direction}`);
-      if (clickToToggle) this.el.classList.add("click-to-toggle");
-      if (toolbar) this.el.classList.add("toolbar");
-      if (this._anchor) {
-        this._anchor.setAttribute("aria-expanded", "false");
-        if (this._anchor instanceof HTMLAnchorElement && !this._anchor.hasAttribute("href") && this._anchor.tabIndex < 0) {
-          this._anchor.tabIndex = 0;
-        }
+      this._list = this.el.querySelector(":scope > ul, :scope > menu");
+      this._listWasInert = this._list?.inert ?? false;
+      this.el.classList.remove("active");
+      if (this._list) this._list.inert = true;
+      this._anchor?.setAttribute("aria-expanded", "false");
+      if (this._anchor instanceof HTMLAnchorElement && !this._anchor.hasAttribute("href")) {
+        if (this._anchor.tabIndex < 0) this._anchor.tabIndex = 0;
+        this._anchor.addEventListener("keydown", this._handleAnchorKeydown);
       }
-      this._setupEventHandlers();
+      this.el.addEventListener("click", this._handleFABClick);
     }
     static get defaults() {
       return _defaults8;
@@ -2787,26 +2880,10 @@ var Expressive = (() => {
     }
     destroy() {
       this.close();
-      this._removeEventHandlers();
-      this.el["Expressive_FloatingActionButton"] = void 0;
-    }
-    _directionFromClass() {
-      const match = [...this.el.classList].find((c) => c.startsWith("direction-"));
-      const value = match?.slice("direction-".length);
-      if (value === "top" || value === "right" || value === "bottom" || value === "left") {
-        return value;
-      }
-      return null;
-    }
-    _setupEventHandlers() {
-      this.el.addEventListener("click", this._handleFABClick);
-      if (this._anchor instanceof HTMLAnchorElement && !this._anchor.hasAttribute("href")) {
-        this._anchor.addEventListener("keydown", this._handleAnchorKeydown);
-      }
-    }
-    _removeEventHandlers() {
+      if (this._list) this._list.inert = this._listWasInert;
       this.el.removeEventListener("click", this._handleFABClick);
       this._anchor?.removeEventListener("keydown", this._handleAnchorKeydown);
+      this.el["Expressive_FloatingActionButton"] = void 0;
     }
     _toggle() {
       if (this.isOpen) this.close();
@@ -3056,10 +3133,12 @@ var Expressive = (() => {
       this._ownIndicators = false;
       this._trackEl = null;
       this._ignoreScroll = false;
+      this._alignAfterResize = false;
       this._trackRaf = null;
       this._started = false;
       this._vertical = false;
       this._resizeObserver = null;
+      this._resizeTimeout = null;
       this._usesWindowResize = false;
       this._dragPointerId = null;
       this._dragStartX = 0;
@@ -3078,19 +3157,32 @@ var Expressive = (() => {
       this._autoPaused = false;
       this._hovered = false;
       this._focused = false;
+      this._motion = window.matchMedia("(prefers-reduced-motion: reduce)");
       this._generatedItemTabIndexes = /* @__PURE__ */ new Set();
       this._generatedItemLabels = /* @__PURE__ */ new Set();
       this._generatedItemDescriptions = /* @__PURE__ */ new Set();
       this._generatedItemSizes = /* @__PURE__ */ new Set();
       this._authoredItemSizes = /* @__PURE__ */ new Set();
       this._itemA11yOriginal = /* @__PURE__ */ new Map();
-      this._handleThrottledResize = Utils.throttle(() => this._handleResize(), 200);
+      this._handleThrottledResize = () => {
+        if (!this._started || this._resizeTimeout !== null) return;
+        this._handleResize();
+        this._resizeTimeout = setTimeout(() => {
+          this._resizeTimeout = null;
+          this._handleResize();
+        }, 200);
+      };
       this._handleAutoAdvanceState = (e) => {
         if (e.type === "mouseenter") this._hovered = true;
         else if (e.type === "mouseleave") this._hovered = false;
         else if (e.type === "focusin") this._focused = true;
-        else if (e.type === "focusout") this._focused = false;
+        else if (e.type === "focusout") this._focused = this.el.contains(e.relatedTarget);
+        this._syncAutoAdvance();
+      };
+      this._handleMotionChange = () => {
         this._syncAutoAdvance();
+        if (this._motion.matches) this._scrollToIndex(this.center, false);
+        this._updateParallax();
       };
       this._tick = () => {
         this._autoAdvanceTimer = null;
@@ -3110,7 +3202,12 @@ var Expressive = (() => {
         }
         this.set(0);
       };
+      this._handleNativeScroll = () => {
+        this._alignAfterResize = false;
+        this._finishScroll();
+      };
       this._handleTrackPointerDown = (e) => {
+        this._handleNativeScroll();
         if (e.pointerType !== "mouse" || e.button !== 0) return;
         this.pressed = true;
         this.dragged = false;
@@ -3165,6 +3262,11 @@ var Expressive = (() => {
       this._handleTrackDragStart = (e) => {
         if (e.target.closest("img, picture, video")) e.preventDefault();
       };
+      this._handleItemResize = (e) => {
+        if (this._alignAfterResize && !this.pressed && e.propertyName === "flex-basis" && this.images.includes(e.target)) {
+          this._scrollToIndex(this.center, false);
+        }
+      };
       this._handleIndicatorClick = (e) => {
         e.stopPropagation();
         const indicator = e.target.closest(".indicator-item");
@@ -3175,9 +3277,10 @@ var Expressive = (() => {
       };
       this._handleKeydown = (e) => {
         const target = e.target;
-        if (target.closest('input, textarea, select, [contenteditable="true"]')) return;
-        const forward = this._vertical ? e.key === "ArrowDown" : e.key === Utils.keys.ARROW_RIGHT;
-        const backward = this._vertical ? e.key === "ArrowUp" : e.key === Utils.keys.ARROW_LEFT;
+        if (target.isContentEditable || target.closest("input, textarea, select")) return;
+        const rtl = getComputedStyle(this._scroller).direction === "rtl";
+        const forward = this._vertical ? e.key === "ArrowDown" : e.key === (rtl ? Utils.keys.ARROW_LEFT : Utils.keys.ARROW_RIGHT);
+        const backward = this._vertical ? e.key === "ArrowUp" : e.key === (rtl ? Utils.keys.ARROW_RIGHT : Utils.keys.ARROW_LEFT);
         if (e.key === "Home") {
           e.preventDefault();
           this.set(0);
@@ -3210,12 +3313,22 @@ var Expressive = (() => {
         });
       };
       this._handleResize = () => {
-        if (!this.images.length) return;
+        if (!this._started || !this.images.length) return;
         this._syncAdaptiveMode();
         this._syncLayoutRoles(this.center);
         this._scrollToIndex(this.center, false);
         this._updateParallax();
       };
+      this._finishScroll = () => {
+        this._ignoreScroll = false;
+        clearTimeout(this._scrollEndTimeout);
+        this._scroller.removeEventListener("scrollend", this._handleScrollEnd);
+      };
+      this._handleScrollEnd = () => {
+        if (!this.images.some((item) => item.getAnimations().some((animation) => animation.playState === "running"))) {
+          this._finishScroll();
+        }
+      };
       this.el["Expressive_Carousel"] = this;
       this.options = {
         ..._Carousel.defaults,
@@ -3229,8 +3342,6 @@ var Expressive = (() => {
         this.options.fullWidth = true;
       }
       this._vertical = this.el.classList.contains("full-screen");
-      const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-      if (reducedMotion) this.options.duration = 1;
       this.pressed = false;
       this.dragged = false;
       this.images = this._collectItems();
@@ -3248,7 +3359,7 @@ var Expressive = (() => {
       this.hasMultipleSlides = this.images.length > 1;
       this.showIndicators = this.options.indicators && this.hasMultipleSlides;
       this.count = this.images.length;
-      this._autoAdvances = this.options.interval > 0 && this.hasMultipleSlides && !reducedMotion;
+      this._autoAdvances = this.options.interval > 0 && this.hasMultipleSlides;
       this.images.forEach((item) => item.classList.add("carousel-item"));
       if (this.options.height !== null) {
         this._generatedFixedHeight = !this.el.classList.contains("fixed-height");
@@ -3359,6 +3470,7 @@ var Expressive = (() => {
     }
     _setupEventHandlers() {
       this.el.addEventListener("keydown", this._handleKeydown);
+      this._motion.addEventListener("change", this._handleMotionChange);
       if (this._autoAdvances) {
         this.el.addEventListener("mouseenter", this._handleAutoAdvanceState);
         this.el.addEventListener("mouseleave", this._handleAutoAdvanceState);
@@ -3387,14 +3499,17 @@ var Expressive = (() => {
         passive: true
       });
       this._scroller.addEventListener("pointerdown", this._handleTrackPointerDown);
+      this._scroller.addEventListener("wheel", this._handleNativeScroll, { passive: true });
       this._scroller.addEventListener("pointermove", this._handleTrackPointerMove);
       this._scroller.addEventListener("pointerup", this._handleTrackPointerUp);
       this._scroller.addEventListener("pointercancel", this._handleTrackPointerUp);
       this._scroller.addEventListener("click", this._handleTrackClick, true);
       this._scroller.addEventListener("dragstart", this._handleTrackDragStart);
+      this._scroller.addEventListener("transitionend", this._handleItemResize);
     }
     _removeEventHandlers() {
       this.el.removeEventListener("keydown", this._handleKeydown);
+      this._motion.removeEventListener("change", this._handleMotionChange);
       this.el.removeEventListener("mouseenter", this._handleAutoAdvanceState);
       this.el.removeEventListener("mouseleave", this._handleAutoAdvanceState);
       this.el.removeEventListener("focusin", this._handleAutoAdvanceState);
@@ -3405,11 +3520,13 @@ var Expressive = (() => {
       }
       this._scroller.removeEventListener("scroll", this._handleTrackScroll);
       this._scroller.removeEventListener("pointerdown", this._handleTrackPointerDown);
+      this._scroller.removeEventListener("wheel", this._handleNativeScroll);
       this._scroller.removeEventListener("pointermove", this._handleTrackPointerMove);
       this._scroller.removeEventListener("pointerup", this._handleTrackPointerUp);
       this._scroller.removeEventListener("pointercancel", this._handleTrackPointerUp);
       this._scroller.removeEventListener("click", this._handleTrackClick, true);
       this._scroller.removeEventListener("dragstart", this._handleTrackDragStart);
+      this._scroller.removeEventListener("transitionend", this._handleItemResize);
       this._resizeObserver?.disconnect();
       this._resizeObserver = null;
       if (this._usesWindowResize) {
@@ -3421,12 +3538,15 @@ var Expressive = (() => {
       }
     }
     _teardown() {
+      this._started = false;
       this._removeEventHandlers();
+      this._finishScroll();
       this._autoAdvances = false;
       this._syncAutoAdvance();
       if (this._trackRaf !== null) cancelAnimationFrame(this._trackRaf);
       window.clearTimeout(this.scrollingTimeout);
       window.clearTimeout(this._suppressClickTimeout);
+      clearTimeout(this._resizeTimeout);
       if (this._ownIndicators) this._indicators?.remove();
       this._unwrapTrack();
       this.images.forEach((el) => {
@@ -3459,7 +3579,7 @@ var Expressive = (() => {
     }
     /** Start or stop the timer to match the current pause state. */
     _syncAutoAdvance() {
-      const run = this._autoAdvances && !this._autoPaused && !this._hovered && !this._focused && !document.hidden;
+      const run = this._autoAdvances && !this._autoPaused && !this._hovered && !this._focused && !this._motion.matches && !document.hidden;
       if (run && this._autoAdvanceTimer === null) {
         this._autoAdvanceTimer = setTimeout(
           this._tick,
@@ -3585,16 +3705,21 @@ var Expressive = (() => {
     }
     _nearestIndex() {
       const centered = this.el.classList.contains("center-aligned");
+      const style = getComputedStyle(this._scroller);
+      const rtl = !this._vertical && style.direction === "rtl";
       const position = this._vertical ? this._scroller.scrollTop : this._scroller.scrollLeft;
-      const viewportCenter = position + (this._vertical ? this._scroller.clientHeight : this._scroller.clientWidth) / 2;
-      let best = 0;
+      const viewport = this._vertical ? this._scroller.clientHeight : this._scroller.clientWidth;
+      const extent = (this._vertical ? this._scroller.scrollHeight : this._scroller.scrollWidth) - viewport;
+      const padding = parseFloat(this._vertical ? style.paddingBlockStart : style.paddingInlineStart) || 0;
+      let best = this.center;
       let bestDist = Infinity;
       this.images.forEach((el, i) => {
         const start = this._vertical ? el.offsetTop : el.offsetLeft;
         const size = this._vertical ? el.offsetHeight : el.offsetWidth;
-        const target = centered ? start + size / 2 : start;
-        const dist = Math.abs(target - (centered ? viewportCenter : position));
-        if (dist < bestDist) {
+        const target = centered ? start - (viewport - size) / 2 : start + (rtl ? size - viewport + padding : -padding);
+        const bounded = Math.max(rtl ? -extent : 0, Math.min(rtl ? 0 : extent, target));
+        const dist = Math.abs(bounded - position);
+        if (dist < bestDist || dist === bestDist && i === this.center) {
           bestDist = dist;
           best = i;
         }
@@ -3604,31 +3729,24 @@ var Expressive = (() => {
     _scrollToIndex(n, smooth = true) {
       const el = this.images[n];
       if (!el) return;
+      this._finishScroll();
       const centered = this.el.classList.contains("center-aligned");
       const style = getComputedStyle(this._scroller);
       const inlinePadding = Number.parseFloat(style.paddingInlineStart) || 0;
       const blockPadding = Number.parseFloat(style.paddingBlockStart) || 0;
-      const left = centered ? el.offsetLeft - (this._scroller.clientWidth - el.offsetWidth) / 2 : el.offsetLeft - inlinePadding;
+      const left = centered ? el.offsetLeft - (this._scroller.clientWidth - el.offsetWidth) / 2 : style.direction === "rtl" ? el.offsetLeft + el.offsetWidth - this._scroller.clientWidth + inlinePadding : el.offsetLeft - inlinePadding;
       const top = el.offsetTop - blockPadding;
-      const current = this._vertical ? this._scroller.scrollTop : this._scroller.scrollLeft;
-      const target = this._vertical ? top : left;
-      if (Math.abs(current - target) < 1) {
-        this._syncActive(n, false);
-        return;
-      }
       this._ignoreScroll = true;
       this._scroller.scrollTo({
         left: this._vertical ? 0 : left,
         top: this._vertical ? top : 0,
-        behavior: smooth ? "smooth" : "auto"
+        behavior: smooth && !this._motion.matches ? "smooth" : "instant"
       });
-      const done = () => {
-        this._ignoreScroll = false;
-      };
-      this._scroller.addEventListener("scrollend", done, { once: true });
-      window.setTimeout(done, this.options.duration + 350);
+      this._scroller.addEventListener("scrollend", this._handleScrollEnd);
+      this._scrollEndTimeout = setTimeout(this._finishScroll, this.options.duration + 350);
     }
     _cycleTo(n, callback = null) {
+      this._alignAfterResize = true;
       if (typeof callback === "function") this.oneTimeCallback = callback;
       this._syncActive(n, false);
       this._scrollToIndex(n);
@@ -3758,6 +3876,13 @@ var Expressive = (() => {
       super(el, options, _FormSelect);
       this._handleSelectChange = () => {
         this._setValueToInput();
+        this._setSelectedStates();
+      };
+      this._handleReset = (e) => {
+        clearTimeout(this._resetTimer);
+        this._resetTimer = setTimeout(() => {
+          if (!e.defaultPrevented) this._handleSelectChange();
+        }, 0);
       };
       // Named rather than inline so that _removeEventHandlers can actually detach
       // it - an anonymous listener per option was unremovable.
@@ -3828,21 +3953,41 @@ var Expressive = (() => {
      */
     refresh() {
       if (!this.menuEl) return;
+      this._bindForm();
+      const root = this.menuEl.getRootNode();
+      const focused = this._values.find((value) => value.optionEl.contains(root.activeElement))?.el;
+      this.input.disabled = this.el.matches(":disabled");
+      this.wrapper.classList.toggle("disabled", this.input.disabled);
+      if (this.input.disabled) this.menu?.close();
+      else if (!this.menu) this._initMenu();
+      this.input.removeAttribute("aria-activedescendant");
       this._rebuildOptions();
-      this._setValueToInput();
-      this._setSelectedStates();
+      this._handleSelectChange();
+      if (this.menu) this.menu.focusedIndex = -1;
+      if (this.menu?.isOpen) {
+        this.menu.recalculateDimensions();
+        if (focused) (this._values.find((value) => value.el === focused)?.optionEl ?? this.input).focus();
+      }
     }
     _setupEventHandlers() {
       this._setupOptionHandlers();
       this.el.addEventListener("change", this._handleSelectChange);
       this.input.addEventListener("click", this._handleInputClick);
       this.menuEl.addEventListener("focusin", this._handleOptionFocus);
+      this._bindForm();
+    }
+    _bindForm() {
+      this._form?.removeEventListener("reset", this._handleReset);
+      this._form = this.el.form;
+      this._form?.addEventListener("reset", this._handleReset);
     }
     _removeEventHandlers() {
       this._removeOptionHandlers();
       this.el.removeEventListener("change", this._handleSelectChange);
       this.input?.removeEventListener("click", this._handleInputClick);
       this.menuEl?.removeEventListener("focusin", this._handleOptionFocus);
+      this._form?.removeEventListener("reset", this._handleReset);
+      clearTimeout(this._resetTimer);
     }
     _setupOptionHandlers() {
       this.menuEl.querySelectorAll("li:not(.optgroup)").forEach((el) => {
@@ -3864,9 +4009,10 @@ var Expressive = (() => {
       return true;
     }
     _selectOptionElement(virtualOption) {
+      if (this.el.matches(":disabled")) return;
       if (!virtualOption.classList.contains("disabled") && !virtualOption.classList.contains("optgroup")) {
         const value = this._values.find((value2) => value2.optionEl === virtualOption);
-        if (!value) return;
+        if (!value || value.el.matches(":disabled")) return;
         const previousSelectedValues = this.getSelectedValues();
         if (this.isMultiple) {
           this._toggleEntryFromArray(value);
@@ -3874,7 +4020,7 @@ var Expressive = (() => {
           this._deselectAll();
           this._selectValue(value);
         }
-        this._setValueToInput();
+        this._handleSelectChange();
         const actualSelectedValues = this.getSelectedValues();
         const selectionHasChanged = !this._arraysEqual(previousSelectedValues, actualSelectedValues);
         if (selectionHasChanged)
@@ -3888,7 +4034,7 @@ var Expressive = (() => {
       this.labelEl = this.el.labels?.[0] ?? null;
       this._setupWrapper();
       this._hideNativeSelect();
-      if (this.el.disabled) this.wrapper.classList.add("disabled");
+      if (this.el.matches(":disabled")) this.wrapper.classList.add("disabled");
       this.menuEl = document.createElement("menu");
       this.menuEl.id = `select-options-${Utils.guid()}`;
       this.menuEl.setAttribute("popover", "auto");
@@ -3935,7 +4081,7 @@ var Expressive = (() => {
       this.input.setAttribute("data-target", this.menuEl.id);
       this.input.ariaReadOnly = "true";
       this.input.ariaRequired = this.el.hasAttribute("required").toString();
-      if (this.el.disabled) this.input.disabled = true;
+      this.input.disabled = this.el.matches(":disabled");
       this.input.setAttribute("tabindex", this.nativeTabIndex.toString());
       const attrs = this.el.attributes;
       for (let i = 0; i < attrs.length; ++i) {
@@ -3961,7 +4107,7 @@ var Expressive = (() => {
       this.wrapper.prepend(caret);
     }
     _initMenu() {
-      if (this.el.disabled) return;
+      if (this.el.matches(":disabled")) return;
       const menuOptions = { ...this.options.menuOptions };
       menuOptions.coverTrigger = false;
       const userOnOpenEnd = menuOptions.onOpenEnd;
@@ -4062,7 +4208,8 @@ var Expressive = (() => {
       li.id = "select-option-" + Utils.guid();
       li.setAttribute("role", "option");
       li.tabIndex = 0;
-      if (realOption.disabled) {
+      const disabled = this.el.matches(":disabled") || realOption.matches(":disabled");
+      if (disabled) {
         li.classList.add("disabled");
         li.ariaDisabled = "true";
         li.tabIndex = -1;
@@ -4070,7 +4217,7 @@ var Expressive = (() => {
       if (type === "optgroup-option") li.classList.add(type);
       const optionText = realOption.textContent;
       const span = document.createElement("span");
-      if (this.isMultiple && !realOption.disabled) {
+      if (this.isMultiple && !disabled) {
         const label = document.createElement("label");
         const checkbox = document.createElement("input");
         checkbox.type = "checkbox";
@@ -4137,22 +4284,7 @@ var Expressive = (() => {
       );
     }
     _setValueToInput() {
-      const selectedRealOptions = this._getSelectedOptions();
-      const selectedOptionPairs = this._values.filter(
-        (value) => selectedRealOptions.indexOf(value.el) >= 0
-      );
-      const notDisabledOptionPairs = selectedOptionPairs.filter((op) => !op.el.disabled);
-      const texts = notDisabledOptionPairs.map(
-        (value) => value.optionEl.querySelector("span").textContent.trim()
-      );
-      if (texts.length === 0) {
-        const firstDisabledOption = this.el.querySelector("option:disabled");
-        if (firstDisabledOption && firstDisabledOption.value === "") {
-          this.input.value = firstDisabledOption.textContent;
-          return;
-        }
-      }
-      this.input.value = texts.join(", ");
+      this.input.value = this._getSelectedOptions().map((option) => option.textContent.trim()).join(", ");
     }
     _setSelectedStates() {
       this._values.forEach((value) => {
@@ -4189,7 +4321,7 @@ var Expressive = (() => {
   var DockedDisplayPlugin = class _DockedDisplayPlugin {
     constructor(el, container, options) {
       this._handleDocumentClick = (e) => {
-        if (this.visible && !(this.el === e.target) && !e.target.closest(".display-docked")) {
+        if (this.visible && !e.composedPath().includes(this.el) && !e.composedPath().includes(this.container)) {
           this.hide();
         }
       };
@@ -4362,6 +4494,7 @@ var Expressive = (() => {
       this._controlsKey = null;
       /** id linking the controls element to the table's aria-labelledby. */
       this._randId = null;
+      this._focusedDate = null;
       this._handleInputClick = (e) => {
         if (e.type == "date") {
           e.preventDefault();
@@ -4379,17 +4512,55 @@ var Expressive = (() => {
           e.preventDefault();
           this._batchDraws(() => {
             this.setDateFromInput(e.target);
+            this._focusedDate = e.target === this.endDateEl ? this.endDate : this.date;
             this.draw();
           });
           if (this.displayPlugin) this.displayPlugin.show();
+          this._syncCalendarFocus(true);
           if (this.options.onInputInteraction) this.options.onInputInteraction.call(this);
         }
       };
+      this._handleCalendarFocus = (event) => {
+        const button = event.target;
+        if (!button.matches(".datepicker-day-button")) return;
+        this._focusedDate = this._dayDate(button);
+        this._syncCalendarFocus();
+      };
+      this._handleCalendarKeydown = (event) => {
+        const button = event.target;
+        if (!button.matches(".datepicker-day-button") || event.altKey || event.ctrlKey || event.metaKey) return;
+        const date = this._dayDate(button);
+        const weekday = (date.getDay() - this.options.firstDay + 7) % 7;
+        const offsets = {
+          ArrowLeft: this.options.isRTL ? 1 : -1,
+          ArrowRight: this.options.isRTL ? -1 : 1,
+          ArrowUp: -7,
+          ArrowDown: 7,
+          Home: -weekday,
+          End: 6 - weekday
+        };
+        if (Object.hasOwn(offsets, event.key)) date.setDate(date.getDate() + offsets[event.key]);
+        else if (event.key === "PageUp" || event.key === "PageDown") {
+          const day = date.getDate();
+          date.setDate(1);
+          date.setMonth(date.getMonth() + (event.key === "PageUp" ? -1 : 1) * (event.shiftKey ? 12 : 1));
+          const last = new Date(date.getTime());
+          last.setMonth(last.getMonth() + 1, 0);
+          date.setDate(Math.min(day, last.getDate()));
+        } else return;
+        event.preventDefault();
+        const { minDate, maxDate, minYear, maxYear, minMonth, maxMonth } = this.options;
+        if (minDate && date < minDate) date.setTime(minDate.getTime());
+        if (maxDate && date > maxDate) date.setTime(maxDate.getTime());
+        if (date.getFullYear() < minYear || date.getFullYear() > maxYear || date.getFullYear() === minYear && date.getMonth() < (minMonth ?? 0) || date.getFullYear() === maxYear && date.getMonth() > (maxMonth ?? 11)) return;
+        this._focusedDate = date;
+        this.gotoDate(date);
+      };
       this._handleCalendarClick = (e) => {
         const target = e.target;
         if (target.classList.contains("is-disabled")) return;
         this._batchDraws(() => {
-          if (target.classList.contains("datepicker-day-button") && !target.classList.contains("is-empty") && !target.parentElement.classList.contains("is-disabled")) {
+          if (target.classList.contains("datepicker-day-button") && !target.classList.contains("is-empty") && !target.parentElement.classList.contains("is-disabled") && !target.parentElement.classList.contains("is-selection-disabled")) {
             const selectedDate = new Date(
               e.target.getAttribute("data-year"),
               e.target.getAttribute("data-month"),
@@ -4427,6 +4598,7 @@ var Expressive = (() => {
       this._clearDates = () => {
         this.date = null;
         this.endDate = null;
+        this.dates?.splice(0);
         this.draw();
       };
       this._handleMonthChange = (e) => {
@@ -4449,6 +4621,7 @@ var Expressive = (() => {
           date = new Date(Date.parse(e.target.value));
         }
         if (_Datepicker._isDate(date)) {
+          if (el == this.endDateEl && date < this.date) return this.setInputValue(el, this.endDate);
           this.setDate(date, false, el == this.endDateEl, true);
           if (e.type == "date") {
             this.setDataDate(e, date);
@@ -4477,6 +4650,11 @@ var Expressive = (() => {
       if (this.options.minDate) this.options.minDate.setHours(0, 0, 0, 0);
       if (this.options.maxDate) this.options.maxDate.setHours(0, 0, 0, 0);
       this.id = Utils.guid();
+      if (this.options.isMultipleSelection) {
+        this.multiple = true;
+        this.dates = [];
+        this.dateEls = [el];
+      }
       this._setupVariables();
       this._insertHTMLIntoDOM();
       this._setupEventHandlers();
@@ -4504,12 +4682,6 @@ var Expressive = (() => {
           }
         }
       }
-      if (this.options.isMultipleSelection) {
-        this.multiple = true;
-        this.dates = [];
-        this.dateEls = [];
-        this.dateEls.push(el);
-      }
       if (this.options.displayPlugin) {
         if (this.options.displayPlugin === "docked") this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, this.options.displayPluginOptions);
       }
@@ -4570,6 +4742,8 @@ var Expressive = (() => {
     }
     destroy() {
       this._removeEventHandlers();
+      this.dateEls?.slice(1).forEach((input) => this._removeDateInput(input));
+      if (!this.options.dateRangeEndEl && this.endDateEl) this._removeDateInput(this.endDateEl);
       this.displayPlugin?.destroy();
       this.containerEl.remove();
       this.destroySelects();
@@ -4662,9 +4836,9 @@ var Expressive = (() => {
       if (!selectedDate) {
         return;
       }
+      _Datepicker._setToStartOfDay(selectedDate);
       if (!this.options.isMultipleSelection) this.setSingleDate(selectedDate, isEndDate);
       else if (!fromUserInput) this.setMultiDate(selectedDate);
-      _Datepicker._setToStartOfDay(selectedDate);
       this.gotoDate(selectedDate);
       if (!preventOnSelect && typeof this.options.onSelect === "function") {
         this.options.onSelect.call(this, selectedDate);
@@ -4736,27 +4910,20 @@ var Expressive = (() => {
       this.setMultipleSelectionInputValues();
     }
     setMultipleSelectionInputValues() {
-      const dateElsArr = Array.from(this.dateEls).filter((el, index) => {
-        if (index > this.dates.length - 1) return el;
-      });
-      dateElsArr.forEach((el) => {
-        el.remove();
-      });
-      this.dates.forEach((date, index) => {
-        if (Array.from(this.dateEls)[index]) {
-          this.setInputValue(this.dateEls[index], date);
-          return;
-        }
-        const dateEl = this.createDateInput();
-        this.setInputValue(dateEl, date);
-        this.dateEls.push(dateEl);
-      });
+      const count = Math.max(1, this.dates.length);
+      for (const input of this.dateEls.splice(count)) this._removeDateInput(input);
+      while (this.dateEls.length < count) this.dateEls.push(this.createDateInput());
+      this.dateEls.forEach((input, index) => this.setInputValue(input, this.dates[index] ?? null));
     }
     /**
      * Sets given date as the input value on the given element.
      */
     setInputValue(el, date) {
-      if (el.type == "date") {
+      if (!el) return;
+      if (!_Datepicker._isDate(date)) {
+        el.value = "";
+        if (el.type === "date") el.setAttribute("data-date", "");
+      } else if (el.type == "date") {
         this.setDataDate(el, date);
         el.value = this.formatDate(date, "yyyy-mm-dd");
       } else {
@@ -5094,6 +5261,9 @@ var Expressive = (() => {
         this._drawDirty = true;
         return;
       }
+      const active = this.calendarEl.getRootNode().activeElement;
+      const restoreDayFocus = active?.matches(".datepicker-day-button") && this.calendarEl.contains(active);
+      const restoreArrow = this.calendarEl.contains(active) && active?.matches(".month-prev, .month-next") ? active.classList.contains("month-prev") ? ".month-prev" : ".month-next" : null;
       const opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth;
       if (this._y <= minYear) {
         this._y = minYear;
@@ -5123,6 +5293,8 @@ var Expressive = (() => {
         this._rebuildControls(year, month);
       }
       this._renderCalendarTable(year, month);
+      this._syncCalendarFocus(!!restoreDayFocus);
+      if (restoreArrow) this.calendarEl.querySelector(restoreArrow)?.focus();
       if (typeof this.options.onDraw === "function") {
         this.options.onDraw.call(this);
       }
@@ -5169,7 +5341,12 @@ var Expressive = (() => {
       this.el.addEventListener("click", this._handleInputClick);
       this.el.addEventListener("keydown", this._handleInputKeydown);
       this.el.addEventListener("change", this._handleInputChange);
+      this.endDateEl?.addEventListener("click", this._handleInputClick);
+      this.endDateEl?.addEventListener("keydown", this._handleInputKeydown);
+      this.endDateEl?.addEventListener("change", this._handleInputChange);
       this.calendarEl.addEventListener("click", this._handleCalendarClick);
+      this.calendarEl.addEventListener("keydown", this._handleCalendarKeydown);
+      this.calendarEl.addEventListener("focusin", this._handleCalendarFocus);
     }
     _setupVariables() {
       const template = document.createElement("template");
@@ -5215,14 +5392,43 @@ var Expressive = (() => {
       };
     }
     _removeEventHandlers() {
-      this.el.removeEventListener("click", this._handleInputClick);
-      this.el.removeEventListener("keydown", this._handleInputKeydown);
-      this.el.removeEventListener("change", this._handleInputChange);
+      for (const input of this.dateEls ?? [this.el]) this._removeInputEventHandlers(input);
       this.calendarEl.removeEventListener("click", this._handleCalendarClick);
+      this.calendarEl.removeEventListener("keydown", this._handleCalendarKeydown);
+      this.calendarEl.removeEventListener("focusin", this._handleCalendarFocus);
       if (this.options.isDateRange && this.endDateEl) {
-        this.endDateEl.removeEventListener("click", this._handleInputClick);
-        this.endDateEl.removeEventListener("keypress", this._handleInputKeydown);
-        this.endDateEl.removeEventListener("change", this._handleInputChange);
+        this._removeInputEventHandlers(this.endDateEl);
+      }
+    }
+    _removeInputEventHandlers(input) {
+      input.removeEventListener("click", this._handleInputClick);
+      input.removeEventListener("keydown", this._handleInputKeydown);
+      input.removeEventListener("change", this._handleInputChange);
+    }
+    _removeDateInput(input) {
+      const focused = input.getRootNode().activeElement === input;
+      this._removeInputEventHandlers(input);
+      input.remove();
+      if (focused && document.activeElement === document.body) this.el.focus();
+    }
+    _dayDate(button) {
+      const date = /* @__PURE__ */ new Date(0);
+      date.setFullYear(Number(button.dataset.year), Number(button.dataset.month), Number(button.dataset.day));
+      _Datepicker._setToStartOfDay(date);
+      return date;
+    }
+    _syncCalendarFocus(restore = false) {
+      const buttons = [...this.calendarEl.querySelectorAll(".datepicker-day-button")];
+      const current = buttons.filter((button) => !button.parentElement.classList.contains("is-selection-disabled"));
+      const preferred = this._focusedDate || this.date || /* @__PURE__ */ new Date();
+      const target = current.find((button) => _Datepicker._compareDates(this._dayDate(button), preferred)) || current.find((button) => button.parentElement.classList.contains("is-selected")) || current.find((button) => !button.parentElement.classList.contains("is-disabled")) || current[0];
+      for (const button of buttons) {
+        button.tabIndex = button === target ? 0 : -1;
+        button.setAttribute("aria-disabled", String(button.parentElement.matches(".is-disabled, .is-selection-disabled")));
+      }
+      if (target) {
+        this._focusedDate = this._dayDate(target);
+        if (restore) target.focus();
       }
     }
     // change view to a specific month (zero-index, e.g. 0: January)
@@ -5250,7 +5456,7 @@ var Expressive = (() => {
       const dateInput = this.el.cloneNode(true);
       dateInput.removeAttribute("id");
       dateInput.addEventListener("click", this._handleInputClick);
-      dateInput.addEventListener("keypress", this._handleInputKeydown);
+      dateInput.addEventListener("keydown", this._handleInputKeydown);
       dateInput.addEventListener("change", this._handleInputChange);
       this.el.parentElement.appendChild(dateInput);
       return dateInput;
@@ -5278,19 +5484,39 @@ var Expressive = (() => {
     onCloseStart: null,
     onCloseEnd: null
   };
-  var Lightbox = class _Lightbox extends Component {
+  var _Lightbox = class _Lightbox extends Component {
     constructor(el, options) {
       super(el, options, _Lightbox);
+      /** Ancestors forced to `overflow: visible`, with the inline value to put back. */
+      this._changedAncestorList = [];
+      this._timers = /* @__PURE__ */ new Map();
+      this._motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+      this._isOpen = false;
+      this._destroyed = false;
+      this._revision = 0;
+      this._handleMotionChange = () => {
+        if (!this._motion.matches) return;
+        const callbacks = [...this._timers.values()];
+        const revision = this._cancel();
+        for (const callback of callbacks) {
+          if (revision !== this._revision) break;
+          callback();
+        }
+        if (this.overlayActive) {
+          for (const el of [this.el, this._overlay, this._photoCaption]) if (el) el.style.transition = "none";
+        }
+      };
       this._handleLightboxClick = () => {
         this._handleLightboxToggle();
       };
       this._handleLightboxKeypress = (e) => {
-        if (e.key === Utils.keys.ENTER) {
+        if (this._trigger === this.el && (e.key === Utils.keys.ENTER || e.key === " ")) {
+          e.preventDefault();
           this._handleLightboxToggle();
         }
       };
       this._handleLightboxToggle = () => {
-        if (this.doneAnimating === false || this.overlayActive && this.doneAnimating) this.close();
+        if (this._isOpen) this.close();
         else this.open();
       };
       this._handleWindowScroll = () => {
@@ -5300,12 +5526,16 @@ var Expressive = (() => {
         if (this.overlayActive) this.close();
       };
       this._handleWindowEscape = (e) => {
-        if (e.key === Utils.keys.ESC && this.doneAnimating && this.overlayActive) this.close();
+        if (e.key === Utils.keys.ESC) this.close();
       };
       /**
        * Open lightbox.
        */
       this.open = () => {
+        if (this._destroyed || this._isOpen) return;
+        const revision = this._cancel();
+        if (this.overlayActive) this._reset();
+        this._isOpen = true;
         this._updateVars();
         const originRect = this.el.getBoundingClientRect();
         const placeholderRect = this.placeholder.getBoundingClientRect();
@@ -5316,6 +5546,7 @@ var Expressive = (() => {
         this.overlayActive = true;
         if (typeof this.options.onOpenStart === "function")
           this.options.onOpenStart.call(this, this.el);
+        if (revision !== this._revision) return;
         this.placeholder.style.width = placeholderRect.width + "px";
         this.placeholder.style.height = placeholderRect.height + "px";
         this.placeholder.style.position = "relative";
@@ -5350,25 +5581,28 @@ var Expressive = (() => {
           this.newWidth = this.windowHeight * 0.9 * ratio;
           this.newHeight = this.windowHeight * 0.9;
         }
-        this._animateImageIn();
         window.addEventListener("scroll", this._handleWindowScroll, { passive: true });
         window.addEventListener("resize", this._handleWindowResize, { passive: true });
         window.addEventListener("keyup", this._handleWindowEscape);
+        this._animateImageIn();
       };
       /**
        * Close lightbox.
        */
       this.close = () => {
-        this._updateVars();
+        if (this._destroyed || !this._isOpen) return;
+        const revision = this._cancel();
+        this._isOpen = false;
         this.doneAnimating = false;
         if (typeof this.options.onCloseStart === "function")
           this.options.onCloseStart.call(this, this.el);
+        if (revision !== this._revision) return;
         window.removeEventListener("scroll", this._handleWindowScroll);
         window.removeEventListener("resize", this._handleWindowResize);
         window.removeEventListener("keyup", this._handleWindowEscape);
-        this._removeOverlay();
+        if (this._overlay) this._removeOverlay();
+        if (this._photoCaption) this._removeCaption();
         this._animateImageOut();
-        if (this.caption !== "") this._removeCaption();
       };
       this.el["Expressive_Lightbox"] = this;
       this.options = {
@@ -5383,7 +5617,9 @@ var Expressive = (() => {
       this.originalHeight = 0;
       this.originInlineStyles = this.el.getAttribute("style");
       this.caption = this.el.getAttribute("data-caption") || "";
-      this.el.tabIndex = 0;
+      this._tabindex = this.el.getAttribute("tabindex");
+      this._trigger = this.el.closest("button") ?? this.el;
+      this.el.tabIndex = this._trigger === this.el ? 0 : -1;
       this.el.before(this.placeholder);
       this.placeholder.append(this.el);
       this._setupEventHandlers();
@@ -5403,26 +5639,81 @@ var Expressive = (() => {
       return el["Expressive_Lightbox"];
     }
     destroy() {
+      if (this._destroyed) return;
+      this._destroyed = true;
+      const root = this.el.getRootNode();
+      const focused = root.activeElement === this.el;
       this._removeEventHandlers();
+      this._cancel();
+      this._reset();
+      this.placeholder.replaceWith(this.el);
+      let active = document.activeElement;
+      while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+      if (focused && (active === document.body || active === root.host)) this._trigger.focus();
+      if (this._tabindex === null) this.el.removeAttribute("tabindex");
+      else this.el.setAttribute("tabindex", this._tabindex);
       this.el["Expressive_Lightbox"] = void 0;
-      this.placeholder.remove();
-      this.el.removeAttribute("style");
+    }
+    _reset() {
+      window.removeEventListener("scroll", this._handleWindowScroll);
+      window.removeEventListener("resize", this._handleWindowResize);
+      window.removeEventListener("keyup", this._handleWindowEscape);
+      this._overlay?.remove();
+      this._photoCaption?.remove();
+      for (const ancestor of this._changedAncestorList) {
+        const saved = _Lightbox._overflow.get(ancestor);
+        if (--saved.count === 0) {
+          ancestor.style.setProperty("overflow", saved.value, saved.priority);
+          _Lightbox._overflow.delete(ancestor);
+        }
+      }
+      this._changedAncestorList = [];
+      if (this.attrWidth !== null && this.attrWidth !== void 0) this.el.setAttribute("width", this.attrWidth);
+      if (this.attrHeight !== null && this.attrHeight !== void 0) this.el.setAttribute("height", this.attrHeight);
+      this.el.classList.remove("active");
+      this.placeholder.removeAttribute("style");
+      if (this.originInlineStyles === null) this.el.removeAttribute("style");
+      else this.el.setAttribute("style", this.originInlineStyles);
+      this.overlayActive = false;
+      this._isOpen = false;
+      this.doneAnimating = true;
+    }
+    _cancel() {
+      for (const timer of this._timers.keys()) clearTimeout(timer);
+      this._timers.clear();
+      return ++this._revision;
+    }
+    _schedule(callback, delay) {
+      if (this._motion.matches) {
+        callback();
+        return;
+      }
+      const timer = setTimeout(() => {
+        this._timers.delete(timer);
+        callback();
+      }, delay);
+      this._timers.set(timer, callback);
     }
     _setupEventHandlers() {
-      this.el.addEventListener("click", this._handleLightboxClick);
-      this.el.addEventListener("keypress", this._handleLightboxKeypress);
+      this._motion.addEventListener("change", this._handleMotionChange);
+      this._trigger.addEventListener("click", this._handleLightboxClick);
+      this.el.addEventListener("keydown", this._handleLightboxKeypress);
     }
     _removeEventHandlers() {
-      this.el.removeEventListener("click", this._handleLightboxClick);
-      this.el.removeEventListener("keypress", this._handleLightboxKeypress);
+      this._motion.removeEventListener("change", this._handleMotionChange);
+      this._trigger.removeEventListener("click", this._handleLightboxClick);
+      this.el.removeEventListener("keydown", this._handleLightboxKeypress);
     }
     _makeAncestorsOverflowVisible() {
       this._changedAncestorList = [];
       let ancestor = this.placeholder.parentNode;
       while (ancestor !== null && ancestor !== void 0 && ancestor !== document) {
         const curr = ancestor;
-        if (curr.style && curr.style.overflow !== "visible") {
-          this._changedAncestorList.push([curr, curr.style.overflow]);
+        if (curr.style && (curr.style.overflow !== "visible" || _Lightbox._overflow.has(curr))) {
+          const saved = _Lightbox._overflow.get(curr) ?? { count: 0, value: curr.style.overflow, priority: curr.style.getPropertyPriority("overflow") };
+          saved.count++;
+          _Lightbox._overflow.set(curr, saved);
+          this._changedAncestorList.push(curr);
           curr.style.overflow = "visible";
         }
         ancestor = ancestor.parentNode ?? ancestor.host;
@@ -5445,11 +5736,11 @@ var Expressive = (() => {
     _animateImageIn() {
       this.el.style.maxHeight = this.newHeight.toString() + "px";
       this.el.style.maxWidth = this.newWidth.toString() + "px";
-      const duration = this.options.inDuration;
+      const duration = this._motion.matches ? 0 : this.options.inDuration;
       this.el.style.transition = "none";
       this.el.style.height = this.originalHeight + "px";
       this.el.style.width = this.originalWidth + "px";
-      setTimeout(() => {
+      this._schedule(() => {
         const placeholderOffset = this._offset(this.placeholder);
         this.el.style.transition = `height ${duration}ms ease,
         width ${duration}ms ease,
@@ -5461,13 +5752,13 @@ var Expressive = (() => {
         this.el.style.left = Utils.getDocumentScrollLeft() + this.windowWidth / 2 - placeholderOffset.left - this.newWidth / 2 + "px";
         this.el.style.top = Utils.getDocumentScrollTop() + this.windowHeight / 2 - placeholderOffset.top - this.newHeight / 2 + "px";
       }, 1);
-      setTimeout(() => {
+      this._schedule(() => {
         this.doneAnimating = true;
         if (typeof this.options.onOpenEnd === "function") this.options.onOpenEnd.call(this, this.el);
       }, duration);
     }
     _animateImageOut() {
-      const duration = this.options.outDuration;
+      const duration = this._motion.matches ? 0 : this.options.outDuration;
       this.el.style.transition = `height ${duration}ms ease,
       width ${duration}ms ease,
       left ${duration}ms ease,
@@ -5477,19 +5768,8 @@ var Expressive = (() => {
       this.el.style.width = this.originalWidth + "px";
       this.el.style.left = "0";
       this.el.style.top = "0";
-      setTimeout(() => {
-        this.placeholder.style.height = "";
-        this.placeholder.style.width = "";
-        this.placeholder.style.position = "";
-        this.placeholder.style.top = "";
-        this.placeholder.style.left = "";
-        if (this.attrWidth) this.el.setAttribute("width", this.attrWidth.toString());
-        if (this.attrHeight) this.el.setAttribute("height", this.attrHeight.toString());
-        this.el.removeAttribute("style");
-        if (this.originInlineStyles) this.el.setAttribute("style", this.originInlineStyles);
-        this.el.classList.remove("active");
-        this.doneAnimating = true;
-        this._changedAncestorList.forEach(([ancestor, overflow]) => ancestor.style.overflow = overflow);
+      this._schedule(() => {
+        this._reset();
         if (typeof this.options.onCloseEnd === "function")
           this.options.onCloseEnd.call(this, this.el);
       }, duration);
@@ -5503,19 +5783,16 @@ var Expressive = (() => {
       this._photoCaption.style.display = "inline";
       this._photoCaption.style.transition = "none";
       this._photoCaption.style.opacity = "0";
-      const duration = this.options.inDuration;
-      setTimeout(() => {
+      const duration = this._motion.matches ? 0 : this.options.inDuration;
+      this._schedule(() => {
         this._photoCaption.style.transition = `opacity ${duration}ms ease`;
         this._photoCaption.style.opacity = "1";
       }, 1);
     }
     _removeCaption() {
-      const duration = this.options.outDuration;
+      const duration = this._motion.matches ? 0 : this.options.outDuration;
       this._photoCaption.style.transition = `opacity ${duration}ms ease`;
       this._photoCaption.style.opacity = "0";
-      setTimeout(() => {
-        this._photoCaption.remove();
-      }, duration);
     }
     // Overlay
     _addOverlay() {
@@ -5523,8 +5800,9 @@ var Expressive = (() => {
       this._overlay.id = "lightbox-overlay";
       this._overlay.addEventListener(
         "click",
-        () => {
-          if (this.doneAnimating) this.close();
+        (event) => {
+          event.stopPropagation();
+          this.close();
         },
         { once: true }
       );
@@ -5536,22 +5814,20 @@ var Expressive = (() => {
       this._overlay.style.top = -1 * overlayOffset.top + "px";
       this._overlay.style.transition = "none";
       this._overlay.style.opacity = "0";
-      const duration = this.options.inDuration;
-      setTimeout(() => {
+      const duration = this._motion.matches ? 0 : this.options.inDuration;
+      this._schedule(() => {
         this._overlay.style.transition = `opacity ${duration}ms ease`;
         this._overlay.style.opacity = "1";
       }, 1);
     }
     _removeOverlay() {
-      const duration = this.options.outDuration;
+      const duration = this._motion.matches ? 0 : this.options.outDuration;
       this._overlay.style.transition = `opacity ${duration}ms ease`;
       this._overlay.style.opacity = "0";
-      setTimeout(() => {
-        this.overlayActive = false;
-        this._overlay.remove();
-      }, duration);
     }
   };
+  _Lightbox._overflow = /* @__PURE__ */ new WeakMap();
+  var Lightbox = _Lightbox;
 
   // src/ts/components/scrollspy.ts
   var _defaultGetActiveElement = (id) => `a[href="#${id}"]`;
@@ -5699,342 +5975,8 @@ var Expressive = (() => {
   };
   var ScrollSpy = _ScrollSpy;
 
-  // src/ts/components/navigationDrawer.ts
-  var _defaults17 = {
-    edge: "left",
-    draggable: true,
-    dragTargetWidth: "10px",
-    onOpenStart: null,
-    onOpenEnd: null,
-    onCloseStart: null,
-    onCloseEnd: null
-  };
-  var EXPANDED_UP = "(width >= 840px)";
-  var _NavigationDrawer = class _NavigationDrawer extends Component {
-    constructor(el, options) {
-      super(el, options, _NavigationDrawer);
-      /**
-       * Opens the overlay drawer. No-op while the sidenav is docked
-       * (navigation-drawer-fixed at the Expanded breakpoint).
-       */
-      this.open = () => {
-        if (this._isCurrentlyFixed() || this.isOpen || !this._dialog) return;
-        _NavigationDrawer._sidenavs.forEach((other) => {
-          if (other !== this && other.isOpen) other.close();
-        });
-        if (typeof this.options.onOpenStart === "function") {
-          this.options.onOpenStart.call(this, this.el);
-        }
-        this.isOpen = true;
-        this._dialog.classList.remove("dragging");
-        this._clearShift();
-        if (!this._dialog.open) {
-          try {
-            this._dialog.showModal();
-          } catch {
-          }
-        }
-        this._syncTriggers();
-        if (typeof this.options.onOpenEnd === "function") {
-          this.options.onOpenEnd.call(this, this.el);
-        }
-      };
-      /**
-       * Closes the overlay drawer. No-op while the sidenav is docked.
-       */
-      this.close = () => {
-        if (this._isCurrentlyFixed() || !this.isOpen) return;
-        this._beginClose();
-        if (this._dialog?.open) {
-          this._closing = true;
-          this._dialog.close();
-        } else {
-          this._finishClose();
-        }
-      };
-      this._onDialogClose = () => {
-        if (this.isOpen) {
-          this._beginClose();
-          this._finishClose();
-          return;
-        }
-        if (this._closing) {
-          this._closing = false;
-          this._finishClose();
-        }
-      };
-      this._onBreakpointChange = () => {
-        if (this._isCurrentlyFixed() && this.isOpen) {
-          this.close();
-        }
-      };
-      this._handleCloseTriggerClick = (e) => {
-        const target = e.target;
-        if (!(target instanceof Element)) return;
-        const closeTrigger = target.closest(".sidenav-close, .navigation-drawer-close");
-        if (closeTrigger && !this._isCurrentlyFixed()) {
-          this.close();
-        }
-      };
-      this._handleDragTargetDrag = (e) => {
-        if (!this._isDraggable()) return;
-        const delta = this._rawDelta(e);
-        const towardOpen = this.options.edge === "left" ? delta : -delta;
-        const visible = Math.min(this._width, Math.max(0, towardOpen));
-        const percentOpen = this._width ? visible / this._width : 0;
-        this._applyShift(visible - this._width, percentOpen);
-      };
-      this._handleDragTargetRelease = () => {
-        if (!this.isDragged) return;
-        this._dialog?.classList.remove("dragging");
-        if (this.percentOpen > 0.2) {
-          this.open();
-        } else if (this._dialog?.open && !this.isOpen) {
-          this._clearShift();
-          this._dialog.close();
-        }
-        this.isDragged = false;
-        this._verticallyScrolling = false;
-      };
-      this._handleCloseDrag = (e) => {
-        if (!this.isOpen || !this._isDraggable()) return;
-        const delta = this._rawDelta(e);
-        const towardClose = this.options.edge === "left" ? -delta : delta;
-        const hidden = Math.min(this._width, Math.max(0, towardClose));
-        const percentOpen = this._width ? 1 - hidden / this._width : 1;
-        this._applyShift(-hidden, percentOpen);
-      };
-      this._handleCloseRelease = () => {
-        if (!this.isOpen || !this.isDragged) return;
-        this._dialog?.classList.remove("dragging");
-        if (this.percentOpen > 0.8) {
-          this._clearShift();
-        } else {
-          this.close();
-        }
-        this.isDragged = false;
-        this._verticallyScrolling = false;
-      };
-      this.el["Expressive_NavigationDrawer"] = this;
-      this.options = {
-        ..._NavigationDrawer.defaults,
-        ...options
-      };
-      this.id = this.el.id;
-      this.isOpen = false;
-      this.isFixed = this.el.classList.contains("navigation-drawer-fixed") || this.el.classList.contains("sidenav-fixed");
-      this.isDragged = false;
-      this.dragTarget = null;
-      this._dialog = null;
-      this._createdDialog = false;
-      this._closing = false;
-      this.percentOpen = 0;
-      this._startingXpos = 0;
-      this._xPos = 0;
-      this._width = 0;
-      this._initialScrollTop = 0;
-      this._verticallyScrolling = false;
-      this._mql = window.matchMedia(EXPANDED_UP);
-      this._setupDialog();
-      this._createDragTarget();
-      this._setupClasses();
-      this._setupEventHandlers();
-      this._syncTriggers();
-      _NavigationDrawer._sidenavs.push(this);
-    }
-    static get defaults() {
-      return _defaults17;
-    }
-    /**
-     * Initializes instances of NavigationDrawer.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els, options = {}) {
-      return super.init(els, options, _NavigationDrawer);
-    }
-    static getInstance(el) {
-      return el["Expressive_NavigationDrawer"];
-    }
-    destroy() {
-      this._removeEventHandlers();
-      if (this._dialog?.open) {
-        try {
-          this._dialog.close();
-        } catch {
-        }
-      }
-      this._clearShift();
-      this._unwrapDialog();
-      this._removeDragTarget();
-      this.el["Expressive_NavigationDrawer"] = void 0;
-      const index = _NavigationDrawer._sidenavs.indexOf(this);
-      if (index >= 0) {
-        _NavigationDrawer._sidenavs.splice(index, 1);
-      }
-    }
-    _beginClose() {
-      this.isOpen = false;
-      this._dialog?.classList.remove("dragging");
-      this._clearShift();
-      if (typeof this.options.onCloseStart === "function") {
-        this.options.onCloseStart.call(this, this.el);
-      }
-      this._syncTriggers();
-    }
-    _finishClose() {
-      if (typeof this.options.onCloseEnd === "function") {
-        this.options.onCloseEnd.call(this, this.el);
-      }
-    }
-    _setupDialog() {
-      if (this.el instanceof HTMLDialogElement) {
-        this._dialog = this.el;
-        this._createdDialog = false;
-        return;
-      }
-      const parent = this.el.parentElement;
-      if (parent instanceof HTMLDialogElement && parent.classList.contains("sidenav-overlay")) {
-        this._dialog = parent;
-        this._createdDialog = false;
-        return;
-      }
-      const dialog = document.createElement("dialog");
-      dialog.classList.add("sidenav-overlay");
-      const named = this.el.closest("[aria-label], [aria-labelledby]") ?? this.el;
-      const label = named.getAttribute("aria-label");
-      const labelledBy = named.getAttribute("aria-labelledby");
-      if (label) dialog.setAttribute("aria-label", label);
-      else if (labelledBy) dialog.setAttribute("aria-labelledby", labelledBy);
-      this.el.replaceWith(dialog);
-      dialog.appendChild(this.el);
-      this._dialog = dialog;
-      this._createdDialog = true;
-    }
-    _unwrapDialog() {
-      if (!this._createdDialog || !this._dialog) return;
-      this._dialog.replaceWith(this.el);
-      this._dialog = null;
-      this._createdDialog = false;
-    }
-    _createDragTarget() {
-      if (!this.options.draggable) return;
-      const dragTarget = document.createElement("div");
-      dragTarget.classList.add("drag-target");
-      dragTarget.style.width = this.options.dragTargetWidth;
-      if (this.isFixed) dragTarget.dataset.fixed = "";
-      Utils.portalRoot(this.el).appendChild(dragTarget);
-      this.dragTarget = dragTarget;
-    }
-    _removeDragTarget() {
-      this.dragTarget?.remove();
-      this.dragTarget = null;
-    }
-    _setupClasses() {
-      if (this.options.edge === "right") {
-        this.el.classList.add("right-aligned");
-        this._dialog?.classList.add("right-aligned");
-        this.dragTarget?.classList.add("right-aligned");
-      }
-    }
-    _setupEventHandlers() {
-      if (_NavigationDrawer._sidenavs.length === 0) {
-        document.body.addEventListener("click", _NavigationDrawer._handleTriggerClick);
-      }
-      const passive = { passive: true };
-      this.dragTarget?.addEventListener("touchmove", this._handleDragTargetDrag, passive);
-      this.dragTarget?.addEventListener("touchend", this._handleDragTargetRelease);
-      this._dialog?.addEventListener("touchmove", this._handleCloseDrag, passive);
-      this._dialog?.addEventListener("touchend", this._handleCloseRelease);
-      this._dialog?.addEventListener("close", this._onDialogClose);
-      this.el.addEventListener("click", this._handleCloseTriggerClick);
-      this._mql.addEventListener("change", this._onBreakpointChange);
-    }
-    _removeEventHandlers() {
-      if (_NavigationDrawer._sidenavs.length === 1) {
-        document.body.removeEventListener("click", _NavigationDrawer._handleTriggerClick);
-      }
-      this.dragTarget?.removeEventListener("touchmove", this._handleDragTargetDrag);
-      this.dragTarget?.removeEventListener("touchend", this._handleDragTargetRelease);
-      this._dialog?.removeEventListener("touchmove", this._handleCloseDrag);
-      this._dialog?.removeEventListener("touchend", this._handleCloseRelease);
-      this._dialog?.removeEventListener("close", this._onDialogClose);
-      this.el.removeEventListener("click", this._handleCloseTriggerClick);
-      this._mql.removeEventListener("change", this._onBreakpointChange);
-    }
-    static _handleTriggerClick(e) {
-      const target = e.target;
-      if (!(target instanceof Element)) return;
-      const trigger = target.closest(".sidenav-trigger, .navigation-drawer-trigger");
-      if (!trigger || !(trigger instanceof HTMLElement)) return;
-      const sidenavId = Utils.getIdFromTrigger(trigger);
-      const sidenavInstance = Utils.getElementById(trigger, sidenavId)?.["Expressive_NavigationDrawer"];
-      if (sidenavInstance) {
-        sidenavInstance.open();
-        e.preventDefault();
-      }
-    }
-    _isDraggable() {
-      return this.options.draggable && !this._isCurrentlyFixed() && !this._verticallyScrolling;
-    }
-    _isCurrentlyFixed() {
-      return this.isFixed && this._mql.matches;
-    }
-    _startDrag(e) {
-      const clientX = e.targetTouches[0].clientX;
-      this.isDragged = true;
-      this._startingXpos = clientX;
-      this._xPos = clientX;
-      this._width = this._dialog?.getBoundingClientRect().width || this.el.getBoundingClientRect().width;
-      this._initialScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop();
-      this._verticallyScrolling = false;
-      this._dialog?.classList.add("dragging");
-      if (this._dialog && !this._dialog.open) {
-        try {
-          this._dialog.showModal();
-        } catch {
-        }
-      }
-    }
-    _dragMoveUpdate(e) {
-      const clientX = e.targetTouches[0].clientX;
-      const currentScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop();
-      this._xPos = clientX;
-      if (this._initialScrollTop !== currentScrollTop) {
-        this._verticallyScrolling = true;
-      }
-    }
-    _rawDelta(e) {
-      if (!this.isDragged) this._startDrag(e);
-      this._dragMoveUpdate(e);
-      return this._xPos - this._startingXpos;
-    }
-    _applyShift(shift, percentOpen) {
-      this.percentOpen = percentOpen;
-      const host = this._dialog ?? this.el;
-      host.style.setProperty("--md-comp-nav-drawer-shift", `${shift}px`);
-      host.style.setProperty("--md-comp-nav-drawer-open", String(percentOpen));
-    }
-    _clearShift() {
-      const host = this._dialog ?? this.el;
-      host.style.removeProperty("--md-comp-nav-drawer-shift");
-      host.style.removeProperty("--md-comp-nav-drawer-open");
-    }
-    _syncTriggers() {
-      if (!this.id) return;
-      document.querySelectorAll(".sidenav-trigger, .navigation-drawer-trigger").forEach((trigger) => {
-        if (!(trigger instanceof HTMLElement)) return;
-        if (Utils.getIdFromTrigger(trigger) !== this.id) return;
-        trigger.setAttribute("aria-expanded", this.isOpen ? "true" : "false");
-        trigger.setAttribute("aria-controls", this.id);
-      });
-    }
-  };
-  _NavigationDrawer._sidenavs = [];
-  var NavigationDrawer = _NavigationDrawer;
-
   // src/ts/components/navigationRail.ts
-  var _defaults18 = {
+  var _defaults17 = {
     onOpenStart: null,
     onOpenEnd: null,
     onCloseStart: null,
@@ -6110,7 +6052,7 @@ var Expressive = (() => {
       document.addEventListener("keydown", this._onKeyDown);
     }
     static get defaults() {
-      return _defaults18;
+      return _defaults17;
     }
     static init(els, options = {}) {
       return super.init(els, options, _NavigationRail);
@@ -6140,7 +6082,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/tabs.ts
-  var _defaults19 = {
+  var _defaults18 = {
     duration: 300,
     onShow: null,
     swipeable: false,
@@ -6149,7 +6091,10 @@ var Expressive = (() => {
   };
   var Tabs = class _Tabs extends Component {
     constructor(el, options) {
+      var _a;
       super(el, options, _Tabs);
+      this._originalPanels = /* @__PURE__ */ new Map();
+      this._originalLinks = /* @__PURE__ */ new Map();
       this._handleWindowResize = () => {
         this._setTabsAndTabWidth();
         if (this._tabWidth !== 0 && this._tabsWidth !== 0) {
@@ -6169,29 +6114,26 @@ var Expressive = (() => {
           return;
         }
         if (tabLink.hasAttribute("target")) return;
+        if (this.options.swipeable) {
+          const panel = tabLink.hash && document.querySelector(tabLink.hash);
+          const index = this._tabsCarousel.images.indexOf(panel);
+          if (index >= 0) this._tabsCarousel.set(index);
+          e.preventDefault();
+          return;
+        }
         const _oldContent = this._content;
         if (tabLink.hash) this._content = document.querySelector(tabLink.hash);
         this._tabLinks = this._queryTabLinks();
-        this._setActiveTabLink(tabLink);
         const prevIndex = this._index;
-        this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0);
-        if (this.options.swipeable) {
-          if (this._tabsCarousel) {
-            this._tabsCarousel.set(this._index, () => {
-              if (typeof this.options.onShow === "function")
-                this.options.onShow.call(this, this._content);
-            });
-          }
-        } else {
-          if (this._content) {
-            this._content.style.display = "block";
-            this._content.classList.add("active");
-            if (typeof this.options.onShow === "function")
-              this.options.onShow.call(this, this._content);
-            if (_oldContent && _oldContent !== this._content) {
-              _oldContent.style.display = "none";
-              _oldContent.classList.remove("active");
-            }
+        this._setActiveTabLink(tabLink);
+        if (this._content) {
+          this._content.style.display = "block";
+          this._content.classList.add("active");
+          if (typeof this.options.onShow === "function")
+            this.options.onShow.call(this, this._content);
+          if (_oldContent && _oldContent !== this._content) {
+            _oldContent.style.display = "none";
+            _oldContent.classList.remove("active");
           }
         }
         this._setTabsAndTabWidth();
@@ -6204,6 +6146,18 @@ var Expressive = (() => {
         ...options
       };
       this._tabLinks = this._queryTabLinks();
+      this._tabLinks.forEach((link) => {
+        this._originalLinks.set(link, { active: link.classList.contains("active"), current: link.getAttribute("aria-current") });
+        if (link.hasAttribute("target")) return;
+        const panel = link.hash && document.querySelector(link.hash);
+        if (panel) this._originalPanels.set(panel, {
+          display: panel.style.display,
+          priority: panel.style.getPropertyPriority("display"),
+          active: panel.classList.contains("active"),
+          carousel: panel.classList.contains("carousel-item")
+        });
+      });
+      (_a = this.options).swipeable && (_a.swipeable = window.innerWidth <= this.options.responsiveThreshold);
       this._index = 0;
       this._setupActiveTabLink();
       if (this.options.swipeable) {
@@ -6216,7 +6170,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults19;
+      return _defaults18;
     }
     /**
      * Initializes instances of Tabs.
@@ -6231,12 +6185,21 @@ var Expressive = (() => {
     }
     destroy() {
       this._removeEventHandlers();
-      this._indicator.parentNode.removeChild(this._indicator);
+      this._indicator.remove();
       if (this.options.swipeable) {
         this._teardownSwipeableTabs();
-      } else {
-        this._teardownNormalTabs();
       }
+      this._originalPanels.forEach((original, panel) => {
+        panel.style.setProperty("display", original.display, original.priority);
+        panel.classList.toggle("active", original.active);
+        panel.classList.toggle("carousel-item", original.carousel);
+        if (!panel.className) panel.removeAttribute("class");
+      });
+      this._originalLinks.forEach((original, link) => {
+        link.classList.toggle("active", original.active);
+        if (original.current === null) link.removeAttribute("aria-current");
+        else link.setAttribute("aria-current", original.current);
+      });
       this.el["Expressive_Tabs"] = void 0;
     }
     /**
@@ -6286,6 +6249,8 @@ var Expressive = (() => {
       this._activeTabLink = tabLink;
       tabLink.classList.add("active");
       tabLink.setAttribute("aria-current", "page");
+      this._index = Array.from(this._tabLinks).indexOf(tabLink);
+      this._content = tabLink.hasAttribute("target") ? null : document.getElementById(tabLink.hash.slice(1));
     }
     _setupActiveTabLink() {
       this._activeTabLink = Array.from(this._tabLinks).find(
@@ -6299,18 +6264,14 @@ var Expressive = (() => {
         this._activeTabLink = activeTabLink;
       }
       this._setActiveTabLink(this._activeTabLink);
-      this._index = Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink), 0);
-      if (this._activeTabLink && this._activeTabLink.hash) {
-        this._content = document.querySelector(this._activeTabLink.hash);
-        if (this._content) this._content.classList.add("active");
-      }
+      this._originalPanels.forEach((_, panel) => panel.classList.toggle("active", panel === this._content));
     }
     _setupSwipeableTabs() {
-      if (window.innerWidth > this.options.responsiveThreshold) this.options.swipeable = false;
       const tabsContent = [];
       this._tabLinks.forEach((a) => {
-        if (a.hash) {
+        if (a.hash && !a.hasAttribute("target")) {
           const currContent = document.querySelector(a.hash);
+          if (!currContent) return;
           currContent.classList.add("carousel-item");
           tabsContent.push(currContent);
         }
@@ -6319,48 +6280,41 @@ var Expressive = (() => {
       tabsWrapper.classList.add("tabs-content", "carousel", "flat");
       tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]);
       tabsContent.forEach((tabContent) => {
+        const marker = document.createComment("");
+        tabContent.before(marker);
+        this._originalPanels.get(tabContent).marker = marker;
         tabsWrapper.appendChild(tabContent);
         tabContent.style.display = "";
       });
       this._tabsCarousel = Carousel.init(tabsWrapper, {
         fullWidth: true,
         noWrap: true,
+        duration: this.options.duration,
         onCycleTo: (item) => {
           const prevIndex = this._index;
-          this._index = Array.from(item.parentNode.children).indexOf(item);
-          this._activeTabLink.classList.remove("active");
-          this._activeTabLink = Array.from(this._tabLinks)[this._index];
-          this._activeTabLink.classList.add("active");
+          this._setActiveTabLink(Array.from(this._tabLinks).find((a) => !a.hasAttribute("target") && a.hash === "#" + item.id));
+          this._setTabsAndTabWidth();
           this._animateIndicator(prevIndex);
           if (typeof this.options.onShow === "function")
             this.options.onShow.call(this, this._content);
         }
       });
-      this._tabsCarousel.set(this._index);
     }
     _teardownSwipeableTabs() {
       const tabsWrapper = this._tabsCarousel.el;
       this._tabsCarousel.destroy();
-      tabsWrapper.append(tabsWrapper.parentElement);
+      this._originalPanels.forEach((original, panel) => original.marker?.replaceWith(panel));
       tabsWrapper.remove();
     }
     _setupNormalTabs() {
       Array.from(this._tabLinks).forEach((a) => {
-        if (a === this._activeTabLink) return;
+        if (a === this._activeTabLink || a.hasAttribute("target")) return;
         if (a.hash) {
           const currContent = document.querySelector(a.hash);
           if (currContent) currContent.style.display = "none";
         }
       });
     }
-    _teardownNormalTabs() {
-      this._tabLinks.forEach((a) => {
-        if (a.hash) {
-          const currContent = document.querySelector(a.hash);
-          if (currContent) currContent.style.display = "";
-        }
-      });
-    }
     _setTabsAndTabWidth() {
       this._tabsWidth = this.el.getBoundingClientRect().width;
       this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length;
@@ -6403,7 +6357,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/timepicker.ts
-  var _defaults20 = {
+  var _defaults19 = {
     dialRadius: 135,
     outerRadius: 105,
     innerRadius: 70,
@@ -6420,7 +6374,9 @@ var Expressive = (() => {
     i18n: {
       cancel: "Cancel",
       clear: "Clear",
-      done: "Ok"
+      done: "Ok",
+      hours: "Hours",
+      minutes: "Minutes"
     },
     twelveHour: true,
     // change to 12 hour AM/PM clock from 24 hour
@@ -6443,17 +6399,17 @@ var Expressive = (() => {
       this._clockBuilt = false;
       this._handleInputClick = () => {
         this._ensureClockBuilt();
+        if (this.displayPlugin) this.displayPlugin.show();
         this.inputHours.focus();
         if (typeof this.options.onInputInteraction === "function") this.options.onInputInteraction.call(this);
-        if (this.displayPlugin) this.displayPlugin.show();
       };
       this._handleInputKeydown = (e) => {
         if (e.key === Utils.keys.ENTER) {
           e.preventDefault();
           this._ensureClockBuilt();
+          if (this.displayPlugin) this.displayPlugin.show();
           this.inputHours.focus();
           if (typeof this.options.onInputInteraction === "function") this.options.onInputInteraction.call(this);
-          if (this.displayPlugin) this.displayPlugin.show();
         }
       };
       this._handleClockClickStart = (e) => {
@@ -6523,11 +6479,6 @@ var Expressive = (() => {
       this._handleAmPmClick = (e) => {
         this._handleAmPmInteraction(e.target);
       };
-      this._handleAmPmKeypress = (e) => {
-        if (e.key === Utils.keys.ENTER) {
-          this._handleAmPmInteraction(e.target);
-        }
-      };
       this._handleAmPmInteraction = (e) => {
         this.amOrPm = e.classList.contains("am-btn") ? "AM" : "PM";
         this._updateAmPmView();
@@ -6550,26 +6501,16 @@ var Expressive = (() => {
           hideView.style.visibility = "hidden";
         }, this.options.duration);
       };
-      this._inputFromTextField = () => {
-        const isHours = this.currentView === "hours";
-        if (isHours && this.inputHours.value !== "") {
-          const value = parseInt(this.inputHours.value);
-          if (value > 0 && value < (this.options.twelveHour ? 13 : 24)) {
-            this.hours = value;
-          } else {
-            this.setHoursDefault();
-          }
-          this.drawClockFromTimeInput(this.hours, isHours);
-        } else if (!isHours && this.inputMinutes.value !== "") {
-          const value = parseInt(this.inputMinutes.value);
-          if (value >= 0 && value < 60) {
-            this.minutes = value;
-          } else {
-            this.minutes = (/* @__PURE__ */ new Date()).getMinutes();
-            this.inputMinutes.value = this.minutes.toString();
-          }
-          this.drawClockFromTimeInput(this.minutes, isHours);
-        }
+      this._inputFromTextField = (event) => {
+        const input = event.target;
+        const isHours = input === this.inputHours;
+        if (!isHours && input !== this.inputMinutes) return;
+        const value = Number(input.value);
+        const min = isHours && this.options.twelveHour ? 1 : 0;
+        const max = isHours ? this.options.twelveHour ? 12 : 23 : 59;
+        if (!input.value.trim() || !Number.isInteger(value) || value < min || value > max) return;
+        this[isHours ? "hours" : "minutes"] = value;
+        this.drawClockFromTimeInput(value, isHours);
       };
       this.done = (clearValue = null) => {
         const last = this.el.value;
@@ -6598,7 +6539,8 @@ var Expressive = (() => {
       this.el["Expressive_Timepicker"] = this;
       this.options = {
         ..._Timepicker.defaults,
-        ...options
+        ...options,
+        i18n: { ..._Timepicker.defaults.i18n, ...options?.i18n }
       };
       this.id = Utils.guid();
       this._insertHTMLIntoDOM();
@@ -6610,7 +6552,7 @@ var Expressive = (() => {
       }
     }
     static get defaults() {
-      return _defaults20;
+      return _defaults19;
     }
     /**
      * Initializes instances of Timepicker.
@@ -6640,13 +6582,14 @@ var Expressive = (() => {
       this.el.addEventListener("click", this._handleInputClick);
       this.el.addEventListener("keydown", this._handleInputKeydown);
       this.plate.addEventListener("pointerdown", this._handleClockClickStart);
-      this.digitalClock.addEventListener("keyup", this._inputFromTextField);
+      this.digitalClock.addEventListener("input", this._inputFromTextField);
       this.inputHours.addEventListener("focus", () => this.showView("hours"));
       this.inputHours.addEventListener("focusout", () => this.formatHours());
       this.inputMinutes.addEventListener("focus", () => this.showView("minutes"));
       this.inputMinutes.addEventListener("focusout", () => this.formatMinutes());
     }
     _removeEventHandlers() {
+      this.digitalClock.removeEventListener("input", this._inputFromTextField);
       this.el.removeEventListener("click", this._handleInputClick);
       this.el.removeEventListener("keydown", this._handleInputKeydown);
       document.removeEventListener("pointermove", this._handleDocumentClickMove);
@@ -6676,6 +6619,8 @@ var Expressive = (() => {
       this.minutesView = this.containerEl.querySelector(".timepicker-minutes");
       this.inputHours = this.containerEl.querySelector(".timepicker-input-hours");
       this.inputMinutes = this.containerEl.querySelector(".timepicker-input-minutes");
+      this.inputHours.setAttribute("aria-label", this.options.i18n.hours);
+      this.inputMinutes.setAttribute("aria-label", this.options.i18n.minutes);
       this.spanAmPm = this.containerEl.querySelector(".timepicker-span-am-pm");
       this.footer = this.containerEl.querySelector(".timepicker-footer");
       this.amOrPm = "PM";
@@ -6713,19 +6658,17 @@ var Expressive = (() => {
     }
     _clockSetup() {
       if (this.options.twelveHour) {
-        this._amBtn = document.createElement("div");
+        this._amBtn = document.createElement("button");
+        this._amBtn.type = "button";
         this._amBtn.classList.add("am-btn");
         this._amBtn.innerText = "AM";
-        this._amBtn.tabIndex = 0;
         this._amBtn.addEventListener("click", this._handleAmPmClick);
-        this._amBtn.addEventListener("keypress", this._handleAmPmKeypress);
         this.spanAmPm.appendChild(this._amBtn);
-        this._pmBtn = document.createElement("div");
+        this._pmBtn = document.createElement("button");
+        this._pmBtn.type = "button";
         this._pmBtn.classList.add("pm-btn");
         this._pmBtn.innerText = "PM";
-        this._pmBtn.tabIndex = 0;
         this._pmBtn.addEventListener("click", this._handleAmPmClick);
-        this._pmBtn.addEventListener("keypress", this._handleAmPmKeypress);
         this.spanAmPm.appendChild(this._pmBtn);
       }
       this._buildHoursView();
@@ -6801,6 +6744,10 @@ var Expressive = (() => {
     }
     _updateAmPmView() {
       if (!this._amBtn || !this._pmBtn) return;
+      this._amBtn.setAttribute("aria-pressed", String(this.amOrPm === "AM"));
+      this._pmBtn.setAttribute("aria-pressed", String(this.amOrPm === "PM"));
+      this._amBtn.classList.toggle("outlined", this.amOrPm !== "AM");
+      this._pmBtn.classList.toggle("outlined", this.amOrPm !== "PM");
       if (this.options.twelveHour) {
         if (this.amOrPm === "PM") {
           this._amBtn.classList.remove("filled");
@@ -6812,24 +6759,19 @@ var Expressive = (() => {
       }
     }
     _updateTimeFromInput() {
-      let value = ((this.el.value || this.options.defaultTime || "") + "").split(":");
-      if (this.options.twelveHour && !(typeof value[1] === "undefined")) {
-        if (value[1].toUpperCase().indexOf("AM") > 0) {
-          this.amOrPm = "AM";
-        } else {
-          this.amOrPm = "PM";
-        }
-        value[1] = value[1].replace("AM", "").replace("PM", "");
-      }
-      if (value[0] === "now") {
+      let value = ((this.el.value || this.options.defaultTime || "") + "").trim().toUpperCase().split(":");
+      const period = value[1]?.match(/AM|PM/)?.[0];
+      value[1] = value[1]?.replace(/AM|PM/, "");
+      if (value[0] === "NOW") {
         const now = new Date(+/* @__PURE__ */ new Date() + this.options.fromNow);
         value = [now.getHours().toString(), now.getMinutes().toString()];
-        if (this.options.twelveHour) {
-          this.amOrPm = parseInt(value[0]) >= 12 && parseInt(value[0]) < 24 ? "PM" : "AM";
-        }
       }
       this.hours = +value[0] || 0;
       this.minutes = +value[1] || 0;
+      if (this.options.twelveHour) {
+        this.amOrPm = period === "AM" || period === "PM" ? period : this.hours >= 12 ? "PM" : "AM";
+        this.hours = this.hours % 12 || 12;
+      }
       this.inputHours.value = _Timepicker._addLeadingZero(this.hours);
       this.inputMinutes.value = _Timepicker._addLeadingZero(this.minutes);
       this._updateAmPmView();
@@ -6918,15 +6860,16 @@ var Expressive = (() => {
     }
     formatHours() {
       if (this.inputHours.value == "") this.setHoursDefault();
-      this.inputHours.value = _Timepicker._addLeadingZero(Number(this.inputHours.value));
+      this.inputHours.value = _Timepicker._addLeadingZero(this.hours);
     }
     formatMinutes() {
       if (this.inputMinutes.value == "") this.minutes = (/* @__PURE__ */ new Date()).getMinutes();
-      this.inputMinutes.value = _Timepicker._addLeadingZero(Number(this.inputMinutes.value));
+      this.inputMinutes.value = _Timepicker._addLeadingZero(this.minutes);
     }
     setHoursDefault() {
       this.hours = (/* @__PURE__ */ new Date()).getHours();
-      this.inputHours.value = (this.hours % (this.options.twelveHour ? 12 : 24)).toString();
+      if (this.options.twelveHour) this.hours = this.hours % 12 || 12;
+      this.inputHours.value = this.hours.toString();
     }
   };
   _Timepicker._template = `<div class="timepicker-container">
@@ -6960,7 +6903,7 @@ var Expressive = (() => {
   var Timepicker = _Timepicker;
 
   // src/ts/components/snackbar.ts
-  var _defaults21 = {
+  var _defaults20 = {
     text: "",
     action: "",
     onAction: null,
@@ -6976,24 +6919,28 @@ var Expressive = (() => {
   var _Snackbar = class _Snackbar {
     constructor(options = {}) {
       this._dismissed = false;
+      this._returnFocus = null;
       this.options = {
         ..._Snackbar.defaults,
         ...options
       };
       if (options.displayLength === void 0 && this.options.action) {
-        this.options.displayLength = 1e4;
+        this.options.displayLength = Infinity;
       }
+      if (options.dismissible === void 0 && this.options.action) this.options.dismissible = true;
       this.message = this.options.text;
       this.panning = false;
       this.timeRemaining = this.options.displayLength;
-      if (_Snackbar._snackbars.length > 0) {
-        for (const snackbar of [..._Snackbar._snackbars]) {
-          snackbar._dismissed = true;
-          clearTimeout(snackbar.counterTimeout);
-          snackbar.el.remove();
-        }
-        _Snackbar._snackbars.length = 0;
-      }
+      while (_Snackbar._snackbars.length > 0) {
+        const snackbar = _Snackbar._snackbars.shift();
+        snackbar._dismissed = true;
+        clearTimeout(snackbar.counterTimeout);
+        snackbar._restoreFocus();
+        snackbar.el.remove();
+      }
+      let focused = document.activeElement;
+      while (focused?.shadowRoot?.activeElement) focused = focused.shadowRoot.activeElement;
+      this._returnFocus = focused instanceof HTMLElement ? focused : null;
       const root = Utils.portalRoot(this.options.root ?? document.body);
       if (!_Snackbar._container || !_Snackbar._container.isConnected || _Snackbar._container.parentNode !== root) {
         if (_Snackbar._container) _Snackbar._removeContainer();
@@ -7007,7 +6954,7 @@ var Expressive = (() => {
       this._setTimer();
     }
     static get defaults() {
-      return _defaults21;
+      return _defaults20;
     }
     static getInstance(el) {
       return el["Expressive_Snackbar"];
@@ -7121,6 +7068,22 @@ var Expressive = (() => {
       snackbar.setAttribute("role", "status");
       snackbar.setAttribute("aria-live", "polite");
       snackbar.setAttribute("aria-atomic", "true");
+      snackbar.inert = false;
+      snackbar.addEventListener("focusin", (e) => {
+        if (e.relatedTarget instanceof HTMLElement && !snackbar.contains(e.relatedTarget)) {
+          this._returnFocus = e.relatedTarget;
+        }
+        this._pauseTimer();
+      });
+      snackbar.addEventListener("keydown", (e) => {
+        if (e.key !== "Escape" || e.defaultPrevented || this._dismissed) return;
+        e.preventDefault();
+        e.stopPropagation();
+        this.dismiss();
+      });
+      snackbar.addEventListener("focusout", () => setTimeout(() => this._resumeTimer(), 0));
+      snackbar.addEventListener("pointerenter", () => this._pauseTimer());
+      snackbar.addEventListener("pointerleave", () => this._resumeTimer());
       if (this.options.classes.length > 0) {
         snackbar.classList.add(...this.options.classes.split(" ").filter(Boolean));
       }
@@ -7135,10 +7098,12 @@ var Expressive = (() => {
         action.textContent = this.options.action;
         action.addEventListener("click", (e) => {
           e.stopPropagation();
-          if (typeof this.options.onAction === "function") {
-            this.options.onAction();
+          if (this._dismissed) return;
+          try {
+            if (typeof this.options.onAction === "function") this.options.onAction();
+          } finally {
+            this.dismiss();
           }
-          this.dismiss();
         });
         snackbar.appendChild(action);
       }
@@ -7195,9 +7160,16 @@ var Expressive = (() => {
     }
     /** Restart a countdown stopped by {@link _pauseTimer}. */
     _resumeTimer() {
-      if (this.counterTimeout != null) return;
+      if (this._dismissed || this.panning || this.el.matches(":hover, :focus-within") || this.counterTimeout != null) return;
       this._setTimer();
     }
+    _restoreFocus() {
+      const focused = this.el.getRootNode().activeElement;
+      if (focused && this.el.contains(focused) && this._returnFocus?.isConnected) {
+        this._returnFocus.focus({ preventScroll: true });
+      }
+      this.el.inert = true;
+    }
     /**
      * Dismiss snackbar with animation.
      */
@@ -7206,6 +7178,7 @@ var Expressive = (() => {
       this._dismissed = true;
       clearTimeout(this.counterTimeout);
       this.counterTimeout = null;
+      this._restoreFocus();
       const activationDistance = this.el.offsetWidth * this.options.activationPercent;
       if (this.wasSwiped) {
         this.el.style.transition = "transform .05s, opacity .05s";
@@ -7242,7 +7215,7 @@ var Expressive = (() => {
   var Snackbar = _Snackbar;
 
   // src/ts/components/tooltip.ts
-  var _defaults22 = {
+  var _defaults21 = {
     exitDelay: 200,
     enterDelay: 0,
     text: "",
@@ -7262,6 +7235,8 @@ var Expressive = (() => {
       this.open = (isManual) => {
         if (this.isOpen) return;
         isManual = isManual === void 0 ? true : void 0;
+        clearTimeout(this._exitDelayTimeout);
+        clearTimeout(this._animationTimeout);
         this.isOpen = true;
         this.options = { ...this.options, ...this._getAttributeOptions() };
         this._updateTooltipContent();
@@ -7275,29 +7250,40 @@ var Expressive = (() => {
         this.isHovered = false;
         this.isFocused = false;
         this.isOpen = false;
+        clearTimeout(this._enterDelayTimeout);
         this._setExitDelayTimeout();
       };
       this._handleMouseEnter = () => {
         this.isHovered = true;
-        this.isFocused = false;
         this.open(false);
       };
-      this._handleMouseLeave = () => {
+      this._handleMouseLeave = (event) => {
+        const next = event.relatedTarget;
+        if (next && (this.el.contains(next) || this.tooltipEl.contains(next))) return;
         this.isHovered = false;
-        this.isFocused = false;
+        if (!this.isFocused) this.close();
+      };
+      this._handleKeydown = (event) => {
+        if (event.key !== "Escape" || !this.isOpen) return;
+        event.preventDefault();
+        event.stopPropagation();
         this.close();
+        clearTimeout(this._exitDelayTimeout);
+        this._animateOut();
       };
       // Focus opens the tooltip only when it arrived by keyboard: a pointer press
       // on the trigger also focuses it, and _handleMouseEnter already covers that.
-      this._handleFocus = () => {
-        if (this.el.matches(":focus-visible")) {
+      this._handleFocus = (event) => {
+        if (event.target.matches(":focus-visible")) {
           this.isFocused = true;
           this.open(false);
         }
       };
-      this._handleBlur = () => {
+      this._handleBlur = (event) => {
+        const next = event.relatedTarget;
+        if (next && (this.el.contains(next) || this.tooltipEl.contains(next))) return;
         this.isFocused = false;
-        this.close();
+        if (!this.isHovered) this.close();
       };
       this.el["Expressive_Tooltip"] = this;
       this.options = {
@@ -7312,7 +7298,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults22;
+      return _defaults21;
     }
     /**
      * Initializes instances of Tooltip.
@@ -7363,16 +7349,22 @@ var Expressive = (() => {
       this._setTooltipContent(this.tooltipEl.querySelector(".tooltip-content"));
     }
     _setupEventHandlers() {
-      this.el.addEventListener("mouseenter", this._handleMouseEnter);
-      this.el.addEventListener("mouseleave", this._handleMouseLeave);
-      this.el.addEventListener("focus", this._handleFocus, true);
-      this.el.addEventListener("blur", this._handleBlur, true);
+      for (const el of [this.el, this.tooltipEl]) {
+        el.addEventListener("mouseenter", this._handleMouseEnter);
+        el.addEventListener("mouseleave", this._handleMouseLeave);
+        el.addEventListener("focus", this._handleFocus, true);
+        el.addEventListener("blur", this._handleBlur, true);
+      }
+      this.el.ownerDocument.addEventListener("keydown", this._handleKeydown, true);
     }
     _removeEventHandlers() {
-      this.el.removeEventListener("mouseenter", this._handleMouseEnter);
-      this.el.removeEventListener("mouseleave", this._handleMouseLeave);
-      this.el.removeEventListener("focus", this._handleFocus, true);
-      this.el.removeEventListener("blur", this._handleBlur, true);
+      for (const el of [this.el, this.tooltipEl]) {
+        el.removeEventListener("mouseenter", this._handleMouseEnter);
+        el.removeEventListener("mouseleave", this._handleMouseLeave);
+        el.removeEventListener("focus", this._handleFocus, true);
+        el.removeEventListener("blur", this._handleBlur, true);
+      }
+      this.el.ownerDocument.removeEventListener("keydown", this._handleKeydown, true);
     }
     _setExitDelayTimeout() {
       clearTimeout(this._exitDelayTimeout);
@@ -7419,6 +7411,7 @@ var Expressive = (() => {
         tooltipWidth,
         tooltipHeight
       );
+      tooltip.style.setProperty("--md-comp-tooltip-anchor-gap", `${Math.max(0, margin) + Math.abs(this.options.transitionMovement)}px`);
       tooltip.style.top = newCoordinates.y + "px";
       tooltip.style.left = newCoordinates.x + "px";
     }
@@ -7434,27 +7427,29 @@ var Expressive = (() => {
       );
     }
     _animateIn() {
-      this._positionTooltip();
-      this.tooltipEl.style.visibility = "visible";
-      const duration = this.options.inDuration;
-      this.tooltipEl.style.transition = `
-      transform ${duration}ms ease-out,
-      opacity ${duration}ms ease-out`;
-      clearTimeout(this._animationTimeout);
-      this._animationTimeout = setTimeout(() => {
-        this.tooltipEl.style.transform = `translateX(${this.xMovement}px) translateY(${this.yMovement}px)`;
-        this.tooltipEl.style.opacity = (this.options.opacity || 1).toString();
-      }, 1);
+      this._animate(true);
     }
     _animateOut() {
-      const duration = this.options.outDuration;
-      this.tooltipEl.style.transition = `
-      transform ${duration}ms ease-out,
-      opacity ${duration}ms ease-out`;
+      this._animate(false);
+    }
+    _animate(show) {
+      const style = this.tooltipEl.style;
+      const reduce = this.el.ownerDocument.defaultView.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const duration = reduce ? 0 : show ? this.options.inDuration : this.options.outDuration;
+      if (show) {
+        this._positionTooltip();
+        style.visibility = "visible";
+        style.overflow = "visible";
+      }
+      style.transition = `transform ${duration}ms ease-out, opacity ${duration}ms ease-out`;
       clearTimeout(this._animationTimeout);
       this._animationTimeout = setTimeout(() => {
-        this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`;
-        this.tooltipEl.style.opacity = "0";
+        style.transform = show && !reduce ? `translateX(${this.xMovement}px) translateY(${this.yMovement}px)` : "none";
+        style.opacity = show ? (this.options.opacity || 1).toString() : "0";
+        if (!show) this._animationTimeout = setTimeout(() => {
+          style.visibility = "hidden";
+          style.overflow = "";
+        }, duration);
       }, 1);
     }
     _getAttributeOptions() {
@@ -7506,10 +7501,6 @@ var Expressive = (() => {
     Lightbox: { component: Lightbox, selector: ".lightboxed" },
     ScrollSpy: { component: ScrollSpy, selector: ".scrollspy" },
     FormSelect: { component: FormSelect, selector: "select" },
-    NavigationDrawer: {
-      component: NavigationDrawer,
-      selector: ".sidenav, .navigation-drawer"
-    },
     NavigationRail: {
       component: NavigationRail,
       selector: ".navigation-rail"
@@ -7522,7 +7513,7 @@ var Expressive = (() => {
     Tooltip: { component: Tooltip, selector: ".tooltipped" },
     FloatingActionButton: {
       component: FloatingActionButton,
-      selector: ".fab, .fixed-action-btn, .fab-menu"
+      selector: ".fab-menu"
     }
   };
   function AutoInit(context = document.body, options) {
@@ -7539,8 +7530,10 @@ var Expressive = (() => {
     }
   }
 
+  // src/ts/modular.ts
+  var version = "0.10.0";
+
   // src/ts/index.ts
-  var version = "0.9.1";
   Forms.Init();
   Chips.Init();
   Slider.Init();