@expressivecss/expressive 0.9.1 → 0.10.0

package/dist/js/expressive.cjs

@@ -36,12 +36,10 @@ __export(index_exports, {
   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 _Menu = class _Menu extends Component {
       }
     };
     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 _Menu = class _Menu extends Component {
         } 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 _Menu = class _Menu extends Component {
           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 _Menu = class _Menu extends Component {
         }
       } 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 _Menu = class _Menu extends Component {
       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 _Menu = class _Menu extends Component {
     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 _Menu = class _Menu extends Component {
       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 _Menu = class _Menu extends Component {
     _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 _Menu = class _Menu extends Component {
     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 _Menu = class _Menu extends Component {
     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 _Menu = class _Menu extends Component {
     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 Menu = _Menu;
 
 // 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 _defaults4 = {
   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 _Autocomplete = class _Autocomplete extends Component {
       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 _Autocomplete = class _Autocomplete extends Component {
       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 _Autocomplete = class _Autocomplete extends Component {
     };
     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 _Autocomplete = class _Autocomplete extends Component {
       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 _Autocomplete = class _Autocomplete extends Component {
      * 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 _Autocomplete = class _Autocomplete extends Component {
       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 _Autocomplete = class _Autocomplete extends Component {
       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 _Autocomplete = class _Autocomplete extends Component {
     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 _Autocomplete = class _Autocomplete extends Component {
       "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 _Autocomplete = class _Autocomplete extends Component {
     }
   }
   _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 _Autocomplete = class _Autocomplete extends Component {
    * @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 _Autocomplete = class _Autocomplete extends Component {
     }
     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 _Autocomplete = class _Autocomplete extends Component {
       this.close();
     }
     this._updateSelectedInfo();
+    if (this.options.isMultiSelect) this._announce(this.options.i18n.selected(this.selectedValues.length));
     this._triggerChanged();
   }
 };
@@ -1870,8 +1931,7 @@ var _Chips = class _Chips extends Component {
         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 _Chips = class _Chips extends Component {
   }
   _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 _Chips = class _Chips extends Component {
   }
   _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 _Chips = class _Chips extends Component {
     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 _Chips = class _Chips extends Component {
    * @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 _Chips = class _Chips extends Component {
     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 _defaults6 = {};
 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 Slider = class _Slider extends Component {
       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 Slider = class _Slider extends Component {
     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 Slider = class _Slider extends Component {
     return el["Expressive_Slider"];
   }
   destroy() {
+    this._resizeObserver?.disconnect();
     this._removeEventHandlers();
     this._removeThumb();
     this.el["Expressive_Slider"] = void 0;
@@ -2275,7 +2351,8 @@ var Slider = class _Slider extends Component {
     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 Slider = class _Slider extends Component {
     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 Slider = class _Slider extends Component {
       }
     }
     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 DISMISS_VELOCITY = 0.5;
 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 @@ function installSheetDrag(config) {
     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 @@ function installSheetDrag(config) {
       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 @@ function installSheetDrag(config) {
   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 @@ function installSheetDrag(config) {
     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 BottomSheets = _BottomSheets;
 
 // 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 AppBar = class _AppBar extends Component {
     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 AppBar = class _AppBar extends Component {
     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 AppBar = class _AppBar extends Component {
     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 AppBar = class _AppBar extends Component {
 };
 
 // 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 FloatingActionButton = class _FloatingActionButton extends Component {
       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 FloatingActionButton = class _FloatingActionButton extends Component {
       }
     };
     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 FloatingActionButton = class _FloatingActionButton extends Component {
   }
   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 _Carousel = class _Carousel extends Component {
     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 _Carousel = class _Carousel extends Component {
     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 _Carousel = class _Carousel extends Component {
       }
       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 _Carousel = class _Carousel extends Component {
     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 _Carousel = class _Carousel extends Component {
     };
     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 _Carousel = class _Carousel extends Component {
       });
     };
     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 _Carousel = class _Carousel extends Component {
       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 _Carousel = class _Carousel extends Component {
     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 _Carousel = class _Carousel extends Component {
   }
   _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 _Carousel = class _Carousel extends Component {
       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 _Carousel = class _Carousel extends Component {
     }
     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 _Carousel = class _Carousel extends Component {
     }
   }
   _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 _Carousel = class _Carousel extends Component {
   }
   /** 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 _Carousel = class _Carousel extends Component {
   }
   _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 _Carousel = class _Carousel extends Component {
   _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 FormSelect = class _FormSelect extends Component {
     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 FormSelect = class _FormSelect extends Component {
    */
   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 FormSelect = class _FormSelect extends Component {
     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 FormSelect = class _FormSelect extends Component {
         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 FormSelect = class _FormSelect extends Component {
     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 FormSelect = class _FormSelect extends Component {
     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 FormSelect = class _FormSelect extends Component {
     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 FormSelect = class _FormSelect extends Component {
     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 FormSelect = class _FormSelect extends Component {
     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 FormSelect = class _FormSelect extends Component {
     );
   }
   _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 _defaults13 = {
 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 _Datepicker = class _Datepicker extends Component {
     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 _Datepicker = class _Datepicker extends Component {
         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 _Datepicker = class _Datepicker extends Component {
     this._clearDates = () => {
       this.date = null;
       this.endDate = null;
+      this.dates?.splice(0);
       this.draw();
     };
     this._handleMonthChange = (e) => {
@@ -4449,6 +4621,7 @@ var _Datepicker = class _Datepicker extends Component {
         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 _Datepicker = class _Datepicker extends Component {
     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 _Datepicker = class _Datepicker extends Component {
         }
       }
     }
-    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 _Datepicker = class _Datepicker extends Component {
   }
   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 _Datepicker = class _Datepicker extends Component {
     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 _Datepicker = class _Datepicker extends Component {
     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 _Datepicker = class _Datepicker extends Component {
       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 _Datepicker = class _Datepicker extends Component {
       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 _Datepicker = class _Datepicker extends Component {
     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 _Datepicker = class _Datepicker extends Component {
     };
   }
   _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 _Datepicker = class _Datepicker extends Component {
     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 _defaults15 = {
   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 Lightbox = class _Lightbox extends Component {
       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 Lightbox = class _Lightbox extends Component {
       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 Lightbox = class _Lightbox extends Component {
         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 Lightbox = class _Lightbox extends Component {
     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 Lightbox = class _Lightbox extends Component {
     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 Lightbox = class _Lightbox extends Component {
   _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 Lightbox = class _Lightbox extends Component {
       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 Lightbox = class _Lightbox extends Component {
     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 Lightbox = class _Lightbox extends Component {
     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 Lightbox = class _Lightbox extends Component {
     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 Lightbox = class _Lightbox extends Component {
     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 @@ _ScrollSpy._onIntersect = (entries) => {
 };
 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 NavigationRail = class _NavigationRail extends Component {
     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 NavigationRail = class _NavigationRail extends Component {
 };
 
 // src/ts/components/tabs.ts
-var _defaults19 = {
+var _defaults18 = {
   duration: 300,
   onShow: null,
   swipeable: false,
@@ -6149,7 +6091,10 @@ var _defaults19 = {
 };
 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 Tabs = class _Tabs extends Component {
         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 Tabs = class _Tabs extends Component {
       ...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 Tabs = class _Tabs extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults19;
+    return _defaults18;
   }
   /**
    * Initializes instances of Tabs.
@@ -6231,12 +6185,21 @@ var Tabs = class _Tabs extends Component {
   }
   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 Tabs = class _Tabs extends Component {
     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 Tabs = class _Tabs extends Component {
       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 Tabs = class _Tabs extends Component {
     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 Tabs = class _Tabs extends Component {
 };
 
 // src/ts/components/timepicker.ts
-var _defaults20 = {
+var _defaults19 = {
   dialRadius: 135,
   outerRadius: 105,
   innerRadius: 70,
@@ -6420,7 +6374,9 @@ var _defaults20 = {
   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 _Timepicker = class _Timepicker extends Component {
     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 _Timepicker = class _Timepicker extends Component {
     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 _Timepicker = class _Timepicker extends Component {
         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 _Timepicker = class _Timepicker extends Component {
     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 _Timepicker = class _Timepicker extends Component {
     }
   }
   static get defaults() {
-    return _defaults20;
+    return _defaults19;
   }
   /**
    * Initializes instances of Timepicker.
@@ -6640,13 +6582,14 @@ var _Timepicker = class _Timepicker extends Component {
     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 _Timepicker = class _Timepicker extends Component {
     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 _Timepicker = class _Timepicker extends Component {
   }
   _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 _Timepicker = class _Timepicker extends Component {
   }
   _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 _Timepicker = class _Timepicker extends Component {
     }
   }
   _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 _Timepicker = class _Timepicker extends Component {
   }
   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 @@ _Timepicker._template = `<div class="timepicker-container">
 var Timepicker = _Timepicker;
 
 // src/ts/components/snackbar.ts
-var _defaults21 = {
+var _defaults20 = {
   text: "",
   action: "",
   onAction: null,
@@ -6976,24 +6919,28 @@ var _defaults21 = {
 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 _Snackbar = class _Snackbar {
     this._setTimer();
   }
   static get defaults() {
-    return _defaults21;
+    return _defaults20;
   }
   static getInstance(el) {
     return el["Expressive_Snackbar"];
@@ -7121,6 +7068,22 @@ var _Snackbar = class _Snackbar {
     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 _Snackbar = class _Snackbar {
       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 _Snackbar = class _Snackbar {
   }
   /** 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 _Snackbar = class _Snackbar {
     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 @@ _Snackbar._draggedSnackbar = null;
 var Snackbar = _Snackbar;
 
 // src/ts/components/tooltip.ts
-var _defaults22 = {
+var _defaults21 = {
   exitDelay: 200,
   enterDelay: 0,
   text: "",
@@ -7262,6 +7235,8 @@ var Tooltip = class _Tooltip extends Component {
     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 Tooltip = class _Tooltip extends Component {
       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 Tooltip = class _Tooltip extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults22;
+    return _defaults21;
   }
   /**
    * Initializes instances of Tooltip.
@@ -7363,16 +7349,22 @@ var Tooltip = class _Tooltip extends Component {
     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 Tooltip = class _Tooltip extends Component {
       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 Tooltip = class _Tooltip extends Component {
     );
   }
   _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 AUTO_INIT_COMPONENTS = {
   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 AUTO_INIT_COMPONENTS = {
   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 @@ function AutoInit(context = document.body, options) {
   }
 }
 
+// src/ts/modular.ts
+var version = "0.10.0";
+
 // src/ts/index.ts
-var version = "0.9.1";
 Forms.Init();
 Chips.Init();
 Slider.Init();