@expressivecss/expressive 0.7.0 → 0.9.0

package/dist/js/expressive.mjs

@@ -1,45 +1,5 @@
 // src/ts/core/utils.ts
 var _Utils = class _Utils {
-  /**
-   * Detects when a key is pressed.
-   * @param e Event instance.
-   */
-  static docHandleKeydown(e) {
-    _Utils.keyDown = true;
-    if (_Utils._navigationKeys.has(e.key)) {
-      _Utils.tabPressed = true;
-    }
-  }
-  /**
-   * Detects when a key is released.
-   * @param e Event instance.
-   */
-  static docHandleKeyup(e) {
-    _Utils.keyDown = false;
-    if (_Utils._navigationKeys.has(e.key)) {
-      _Utils.tabPressed = false;
-    }
-  }
-  /**
-   * Detects when document is focused.
-   * @param e Event instance.
-   */
-  /* eslint-disabled as of required event type condition check */
-  /* eslint-disable-next-line */
-  static docHandleFocus(e) {
-    if (_Utils.keyDown) {
-      document.body.classList.add("keyboard-focused");
-    }
-  }
-  /**
-   * Detects when document is not focused.
-   * @param e Event instance.
-   */
-  /* eslint-disabled as of required event type condition check */
-  /* eslint-disable-next-line */
-  static docHandleBlur(e) {
-    document.body.classList.remove("keyboard-focused");
-  }
   /**
    * Run `callback` once the document is parsed.
    *
@@ -57,13 +17,46 @@ var _Utils = class _Utils {
     }
   }
   /**
-   * Generates a unique string identifier.
+   * Generates a unique string identifier. Every caller prefixes the result and
+   * uses it as an element id, and a UUID is valid in that position.
+   *
+   * `randomUUID` is exposed only in secure contexts, and a dev server on a
+   * plain-HTTP LAN address - the usual way a page is opened on a phone - is
+   * not one. Without the fallback every component that stamps an id would
+   * throw there. The ids only have to be unique within one document, so the
+   * fallback does not need to be cryptographic.
    */
   static guid() {
-    const s4 = () => {
-      return Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
-    };
-    return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
+    return globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  }
+  /**
+   * Where an element created at runtime has to be appended to stay in the same
+   * tree as `el`. A stylesheet adopted into a shadow root cannot match a node
+   * in the document, so a portal that lands on `document.body` is unstyled
+   * whenever its origin lives in a shadow root (adr/0002).
+   *
+   * Light-DOM elements still get `document.body`, which is what escapes an
+   * ancestor's `overflow: hidden` and stacking context. Inside a shadow root
+   * both hazards come back: the host's own ancestors still form the containing
+   * block, so a transformed ancestor re-anchors `position: fixed` and a
+   * positioned one re-anchors `position: absolute`.
+   */
+  static portalRoot(el) {
+    const root = el.getRootNode();
+    return root.host ? root : document.body;
+  }
+  /**
+   * `getElementById` against the tree `el` lives in. The mirror of
+   * `portalRoot`: an id in a shadow root is invisible to
+   * `document.getElementById`, so a trigger and its target inside the same
+   * root could not find each other at all.
+   *
+   * Falls back to the document for a detached `el`, whose root is a plain
+   * element with no lookup of its own.
+   */
+  static getElementById(el, id) {
+    const root = el.getRootNode();
+    return root.getElementById ? root.getElementById(id) : document.getElementById(id);
   }
   /**
    * Checks for exceeded edges
@@ -160,43 +153,50 @@ var _Utils = class _Utils {
    * Retrieves document scroll postion from top.
    */
   static getDocumentScrollTop() {
-    return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    return window.scrollY;
   }
   /**
    * Retrieves document scroll postion from left.
    */
   static getDocumentScrollLeft() {
-    return window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+    return window.scrollX;
   }
   /**
-   * Fires the given function after a certain ammount of time.
-   * @param func Function to be fired.
-   * @param wait Wait time.
-   * @param options Additional options.
+   * Trailing-edge throttle: run `func` now, then at most once per `wait` ms
+   * with the most recent arguments.
+   *
+   * This used to carry its underscore ancestor's whole configuration - leading
+   * and trailing switches, a result passthrough - and both call sites are
+   * resize handlers passing nothing but a function and a delay.
+   *
+   * Assign the return value once. `x = Utils.throttle(fn, 200)` is right;
+   * wrapping it in an arrow builds a fresh closure per event and never calls
+   * it, which is how resize handling was dead in three components.
    */
-  static throttle(func, wait, options = {}) {
-    let lastArgs = null, result, timeout = null, previous = 0;
-    const later = () => {
-      previous = options?.leading === false ? 0 : Date.now();
-      timeout = null;
-      result = func(...lastArgs ?? []);
-      lastArgs = null;
-    };
+  static throttle(func, wait) {
+    let timeout = null;
+    let lastArgs = null;
+    let previous = 0;
     return (...args) => {
       const now = Date.now();
-      if (!previous && options?.leading === false) previous = now;
       const remaining = wait - (now - previous);
-      lastArgs = args;
       if (remaining <= 0) {
         clearTimeout(timeout);
         timeout = null;
         previous = now;
         lastArgs = null;
-        result = func(...args);
-      } else if (!timeout && options?.trailing !== false) {
-        timeout = setTimeout(later, remaining);
+        func(...args);
+      } else if (!timeout) {
+        lastArgs = args;
+        timeout = setTimeout(() => {
+          previous = Date.now();
+          timeout = null;
+          func(...lastArgs ?? []);
+          lastArgs = null;
+        }, remaining);
+      } else {
+        lastArgs = args;
       }
-      return result;
     };
   }
   /**
@@ -213,7 +213,7 @@ var _Utils = class _Utils {
    * Renders a button with optional callback function
    */
   static createButton(container, text, className = [], visibility = true, callback = null) {
-    className = className.concat(["waves-effect", "text"]);
+    className = className.concat(["text"]);
     const button = document.createElement("button");
     button.className = className.join(" ");
     button.style.visibility = visibility ? "visible" : "hidden";
@@ -223,7 +223,7 @@ var _Utils = class _Utils {
     if (typeof callback === "function") {
       button.addEventListener("click", callback);
       button.addEventListener("keypress", (e) => {
-        if (_Utils.keys.ENTER.includes(e.key)) callback(e);
+        if (e.key === _Utils.keys.ENTER) callback(e);
       });
     }
     container.append(button);
@@ -302,36 +302,22 @@ var _Utils = class _Utils {
     };
   }
 };
-/** Specifies wether tab is pressed or not. */
-_Utils.tabPressed = false;
-/** Specifies wether there is a key pressed. */
-_Utils.keyDown = false;
 /**
- * Key maps.
+ * Key maps. One `KeyboardEvent.key` value each: the second entries these used
+ * to carry (`Esc`, `Up`, `Del`, ...) were IE and Edge Legacy spellings, and
+ * the support baseline excludes both.
  */
 _Utils.keys = {
-  TAB: ["Tab"],
-  ENTER: ["Enter"],
-  ESC: ["Escape", "Esc"],
-  BACKSPACE: ["Backspace"],
-  ARROW_UP: ["ArrowUp", "Up"],
-  ARROW_DOWN: ["ArrowDown", "Down"],
-  ARROW_LEFT: ["ArrowLeft", "Left"],
-  ARROW_RIGHT: ["ArrowRight", "Right"],
-  DELETE: ["Delete", "Del"]
+  TAB: "Tab",
+  ENTER: "Enter",
+  ESC: "Escape",
+  BACKSPACE: "Backspace",
+  ARROW_UP: "ArrowUp",
+  ARROW_DOWN: "ArrowDown",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_RIGHT: "ArrowRight",
+  DELETE: "Delete"
 };
-/**
- * Keys that count as keyboard navigation, precomputed.
- *
- * These handlers run at capture phase on the document for every keystroke on
- * the page, and used to rebuild three arrays and spread them into a fourth
- * on each one.
- */
-_Utils._navigationKeys = /* @__PURE__ */ new Set([
-  ..._Utils.keys.TAB,
-  ..._Utils.keys.ARROW_DOWN,
-  ..._Utils.keys.ARROW_UP
-]);
 var Utils = _Utils;
 
 // src/ts/core/component.ts
@@ -394,47 +380,63 @@ var _defaults = {
   onOpen: null,
   onClose: null
 };
-var CARDS_SELECTOR = "article:has(> aside)";
+var CARDS_SELECTOR = 'article:has(> aside[id]:not([id=""])):not(:has(> aside ~ aside)):has(> button.card-reveal-trigger[type="button"], > :not(aside) button.card-reveal-trigger[type="button"])';
+var REVEAL_INITIALIZED_CLASS = "card-reveal-initialized";
+function hasAccessibleName(trigger) {
+  const label = trigger.getAttribute("aria-label");
+  if (label?.trim()) return true;
+  const labelledBy = trigger.getAttribute("aria-labelledby");
+  if (labelledBy) {
+    const referencedText = labelledBy.trim().split(/\s+/).map((id) => trigger.ownerDocument.getElementById(id)?.textContent ?? "").join(" ").trim();
+    if (referencedText) return true;
+  }
+  const content = trigger.cloneNode(true);
+  content.querySelectorAll('[aria-hidden="true"]').forEach((node) => node.remove());
+  return Boolean(content.textContent?.trim());
+}
+function isUsableCardTrigger(trigger, card, panel) {
+  return trigger.closest("article") === card && !panel.contains(trigger) && !trigger.disabled && trigger.getAttribute("aria-disabled") !== "true" && hasAccessibleName(trigger);
+}
+function isCardReveal(el) {
+  if (el.tagName !== "ARTICLE") return false;
+  const panels = el.querySelectorAll(":scope > aside");
+  if (panels.length !== 1 || !panels[0].id) return false;
+  return Array.from(
+    el.querySelectorAll('button.card-reveal-trigger[type="button"]')
+  ).some((trigger) => isUsableCardTrigger(trigger, el, panels[0]));
+}
 var Cards = class _Cards extends Component {
-  constructor(el, options) {
+  constructor(el, options = {}) {
     super(el, options, _Cards);
     this.isOpen = false;
+    this._ownsRevealInitializedClass = false;
+    this._initialAriaControls = /* @__PURE__ */ new Map();
+    this._lastActivator = null;
     this._setupEventHandlers = () => {
-      this._activators.forEach((el) => {
-        el.addEventListener("click", this._handleClickInteraction);
-        el.addEventListener("keypress", this._handleKeypressEvent);
+      this._activators.forEach((activator) => {
+        activator.addEventListener("click", this._handleClickInteraction);
       });
+      this.el.addEventListener("keydown", this._handleKeydownEvent);
     };
     this._removeEventHandlers = () => {
-      this._activators.forEach((el) => {
-        el.removeEventListener("click", this._handleClickInteraction);
-        el.removeEventListener("keypress", this._handleKeypressEvent);
+      this._activators.forEach((activator) => {
+        activator.removeEventListener("click", this._handleClickInteraction);
       });
+      this.el.removeEventListener("keydown", this._handleKeydownEvent);
     };
-    this._handleClickInteraction = () => {
+    this._handleClickInteraction = (event) => {
+      this._lastActivator = event.currentTarget;
       this._handleRevealEvent();
     };
-    this._handleKeypressEvent = (e) => {
-      if (Utils.keys.ENTER.includes(e.key)) {
-        this._handleRevealEvent();
-      }
+    this._handleKeydownEvent = (event) => {
+      const target = event.target instanceof Element ? event.target.closest("article") : null;
+      if (target !== this.el || event.key !== "Escape" || !this.isOpen) return;
+      event.preventDefault();
+      this.close();
     };
     this._handleRevealEvent = () => {
-      this._activators.forEach((el) => el.tabIndex = -1);
-      this.open();
-    };
-    this._setupRevealCloseEventHandlers = () => {
-      this.cardRevealClose.addEventListener("click", this.close);
-      this.cardRevealClose.addEventListener("keypress", this._handleKeypressCloseEvent);
-    };
-    this._removeRevealCloseEventHandlers = () => {
-      this.cardRevealClose.removeEventListener("click", this.close);
-      this.cardRevealClose.removeEventListener("keypress", this._handleKeypressCloseEvent);
-    };
-    this._handleKeypressCloseEvent = (e) => {
-      if (Utils.keys.ENTER.includes(e.key)) {
-        this.close();
-      }
+      if (this.isOpen) this.close();
+      else this.open();
     };
     /**
      * Show card reveal.
@@ -442,44 +444,56 @@ var Cards = class _Cards extends Component {
     this.open = () => {
       if (this.isOpen || !this.cardReveal) return;
       this.isOpen = true;
-      this.cardReveal.ariaExpanded = "true";
-      if (this.cardRevealClose) this.cardRevealClose.tabIndex = 0;
+      this.cardReveal.classList.add("open");
+      this.cardReveal.inert = false;
+      this._activators.forEach((activator) => activator.ariaExpanded = "true");
       if (typeof this.options.onOpen === "function") {
-        this.options.onOpen.call(this);
+        this.options.onOpen.call(this, this.el);
       }
-      if (this.cardRevealClose) this._setupRevealCloseEventHandlers();
     };
     /**
      * Hide card reveal.
      */
     this.close = () => {
       if (!this.isOpen || !this.cardReveal) return;
+      const focusWasInside = this.cardReveal.contains(document.activeElement);
       this.isOpen = false;
-      this.cardReveal.ariaExpanded = "false";
-      this._activators.forEach((el) => el.tabIndex = 0);
-      if (this.cardRevealClose) this.cardRevealClose.tabIndex = -1;
+      this.cardReveal.classList.remove("open");
+      this.cardReveal.inert = true;
+      this._activators.forEach((activator) => activator.ariaExpanded = "false");
       if (typeof this.options.onClose === "function") {
-        this.options.onClose.call(this);
+        this.options.onClose.call(this, this.el);
+      }
+      if (focusWasInside) {
+        (this._lastActivator ?? this._activators[0])?.focus();
       }
-      if (this.cardRevealClose) this._removeRevealCloseEventHandlers();
     };
     this.el["Expressive_Cards"] = this;
     this.options = {
       ..._Cards.defaults,
       ...options
     };
-    this._activators = [];
-    this.cardReveal = this.el.querySelector(":scope > aside");
+    const cardReveals = this.el.querySelectorAll(":scope > aside");
+    const cardReveal = cardReveals.length === 1 ? cardReveals[0] : null;
+    const activators = cardReveal ? Array.from(
+      this.el.querySelectorAll(
+        'button.card-reveal-trigger[type="button"]'
+      )
+    ).filter(
+      (activator) => isUsableCardTrigger(activator, this.el, cardReveal)
+    ) : [];
+    this.cardReveal = cardReveal?.id && activators.length > 0 ? cardReveal : null;
+    this._activators = this.cardReveal ? activators : [];
     if (this.cardReveal) {
-      this._activators = Array.from(this.el.querySelectorAll(".activator"));
-      this._activators.forEach((el2) => {
-        if (el2) el2.tabIndex = 0;
+      this._ownsRevealInitializedClass = !this.el.classList.contains(REVEAL_INITIALIZED_CLASS);
+      this.el.classList.add(REVEAL_INITIALIZED_CLASS);
+      this._activators.forEach((activator) => {
+        this._initialAriaControls.set(activator, activator.getAttribute("aria-controls"));
+        activator.ariaExpanded = "false";
+        activator.setAttribute("aria-controls", this.cardReveal.id);
       });
-      this.cardRevealClose = this.cardReveal.querySelector(
-        ":scope > :is(h1, h2, h3, h4, h5, h6)"
-      );
-      if (this.cardRevealClose) this.cardRevealClose.tabIndex = -1;
-      this.cardReveal.ariaExpanded = "false";
+      this.cardReveal.classList.remove("open");
+      this.cardReveal.inert = true;
       this._setupEventHandlers();
     }
   }
@@ -502,13 +516,28 @@ var Cards = class _Cards extends Component {
    */
   destroy() {
     this._removeEventHandlers();
-    if (this.cardRevealClose) this._removeRevealCloseEventHandlers();
+    if (this.cardReveal) {
+      this.cardReveal.classList.remove("open");
+      this.cardReveal.inert = false;
+      if (this._ownsRevealInitializedClass) this.el.classList.remove(REVEAL_INITIALIZED_CLASS);
+    }
+    this._activators.forEach((activator) => {
+      activator.removeAttribute("aria-expanded");
+      const initialAriaControls = this._initialAriaControls.get(activator);
+      if (initialAriaControls === null) activator.removeAttribute("aria-controls");
+      else if (initialAriaControls !== void 0) {
+        activator.setAttribute("aria-controls", initialAriaControls);
+      }
+    });
+    this.isOpen = false;
     this._activators = [];
+    this._initialAriaControls.clear();
+    this._lastActivator = null;
     this.el["Expressive_Cards"] = void 0;
   }
   static Init() {
     Utils.onDocumentReady(() => {
-      const cards = document.querySelectorAll(CARDS_SELECTOR);
+      const cards = Array.from(document.querySelectorAll(CARDS_SELECTOR)).filter(isCardReveal);
       cards.forEach((el) => {
         if (el && el["Expressive_Cards"] == void 0) this.init(el);
       });
@@ -516,8 +545,173 @@ var Cards = class _Cards extends Component {
   }
 };
 
-// src/ts/components/menu.ts
+// src/ts/components/expandingCard.ts
 var _defaults2 = {
+  onOpen: null,
+  onClose: null
+};
+var EXPANDING_CARD_SELECTOR = "article.expanding-card:has(> dialog.expanding-card-dialog)";
+var ExpandingCard = class _ExpandingCard extends Component {
+  constructor(el, options) {
+    super(el, options, _ExpandingCard);
+    this.isOpen = false;
+    this.closeGeneration = 0;
+    this._setupEventHandlers = () => {
+      this.trigger?.addEventListener("click", this.open);
+      this.trigger?.addEventListener("keypress", this._handleTriggerKeypress);
+      this.closeButton?.addEventListener("click", this.close);
+      this.dialog?.addEventListener("cancel", this._handleCancel);
+      this.dialog?.addEventListener("close", this._handleNativeClose);
+    };
+    this._removeEventHandlers = () => {
+      this.trigger?.removeEventListener("click", this.open);
+      this.trigger?.removeEventListener("keypress", this._handleTriggerKeypress);
+      this.closeButton?.removeEventListener("click", this.close);
+      this.dialog?.removeEventListener("cancel", this._handleCancel);
+      this.dialog?.removeEventListener("close", this._handleNativeClose);
+    };
+    this._handleTriggerKeypress = (event) => {
+      if (event.key === Utils.keys.ENTER || event.key === " ") {
+        event.preventDefault();
+        this.open();
+      }
+    };
+    this._handleCancel = (event) => {
+      event.preventDefault();
+      this.close();
+    };
+    this._handleNativeClose = () => {
+      if (this.dialog.open) return;
+      this.closeGeneration++;
+      this.isOpen = false;
+      this.trigger.ariaExpanded = "false";
+      this.dialog.ariaExpanded = "false";
+      this.dialog.classList.remove("expanded");
+    };
+    this._setTransitionOrigin = () => {
+      if (!this.dialog) return;
+      const card = this.el.getBoundingClientRect();
+      const media = this.el.querySelector(
+        ":scope > figure, :scope > img"
+      );
+      const mediaRect = media?.getBoundingClientRect();
+      this.dialog.style.setProperty(
+        "--md-comp-expanding-card-from-top",
+        `${Math.max(0, card.top)}px`
+      );
+      this.dialog.style.setProperty(
+        "--md-comp-expanding-card-from-right",
+        `${Math.max(0, window.innerWidth - card.right)}px`
+      );
+      this.dialog.style.setProperty(
+        "--md-comp-expanding-card-from-bottom",
+        `${Math.max(0, window.innerHeight - card.bottom)}px`
+      );
+      this.dialog.style.setProperty(
+        "--md-comp-expanding-card-from-left",
+        `${Math.max(0, card.left)}px`
+      );
+      this.dialog.style.setProperty(
+        "--md-comp-expanding-card-from-media-height",
+        `${Math.max(0, mediaRect?.height ?? 0)}px`
+      );
+    };
+    this.open = () => {
+      if (this.isOpen || !this.dialog || !this.trigger) return;
+      this.closeGeneration++;
+      this._setTransitionOrigin();
+      this.isOpen = true;
+      this.trigger.ariaExpanded = "true";
+      this.dialog.ariaExpanded = "true";
+      this.dialog.showModal();
+      void this.dialog.offsetWidth;
+      this.dialog.classList.add("expanded");
+      this.closeButton?.focus();
+      if (typeof this.options.onOpen === "function") {
+        this.options.onOpen.call(this, this.el);
+      }
+    };
+    this.close = () => {
+      if (!this.isOpen || !this.dialog || !this.trigger) return;
+      const generation = ++this.closeGeneration;
+      this._setTransitionOrigin();
+      this.isOpen = false;
+      this.trigger.ariaExpanded = "false";
+      this.dialog.ariaExpanded = "false";
+      this.dialog.classList.remove("expanded");
+      if (typeof this.options.onClose === "function") {
+        this.options.onClose.call(this, this.el);
+      }
+      const finish = () => {
+        if (generation !== this.closeGeneration || this.isOpen || !this.dialog.open) return;
+        this.dialog.close();
+        if (this.dialog.isConnected && this.trigger.isConnected) this.trigger.focus();
+      };
+      const reducedMotion = window.matchMedia(
+        "(prefers-reduced-motion: reduce)"
+      ).matches;
+      const transitions = reducedMotion ? [] : (this.dialog.getAnimations?.() ?? []).filter((animation) => animation.transitionProperty === "clip-path");
+      if (transitions.length === 0) finish();
+      else void Promise.allSettled(transitions.map((animation) => animation.finished)).then(finish);
+    };
+    this.el["Expressive_ExpandingCard"] = this;
+    this.options = {
+      ..._ExpandingCard.defaults,
+      ...options
+    };
+    this.dialog = this.el.querySelector(
+      ":scope > dialog.expanding-card-dialog"
+    );
+    this.trigger = this.el.querySelector(
+      ":scope > .expanding-card-trigger, :scope > figure > .expanding-card-trigger"
+    );
+    this.closeButton = this.dialog?.querySelector(".expanding-card-close") ?? null;
+    if (this.trigger && this.dialog) {
+      this.trigger.ariaExpanded = "false";
+      if (this.dialog.id)
+        this.trigger.setAttribute("aria-controls", this.dialog.id);
+      if (!this.trigger.matches("a[href], button, input, select, textarea")) {
+        this.trigger.tabIndex = 0;
+        this.trigger.setAttribute("role", "button");
+      }
+      this.dialog.ariaExpanded = "false";
+      this._setupEventHandlers();
+    }
+  }
+  static get defaults() {
+    return _defaults2;
+  }
+  static init(els, options) {
+    return super.init(els, options, _ExpandingCard);
+  }
+  static getInstance(el) {
+    return el["Expressive_ExpandingCard"];
+  }
+  destroy() {
+    this._removeEventHandlers();
+    this.closeGeneration++;
+    this.isOpen = false;
+    if (this.trigger) this.trigger.ariaExpanded = "false";
+    if (this.dialog) this.dialog.ariaExpanded = "false";
+    this.dialog?.classList.remove("expanded");
+    if (this.dialog?.open) this.dialog.close();
+    this.el["Expressive_ExpandingCard"] = void 0;
+  }
+  static Init() {
+    Utils.onDocumentReady(() => {
+      document.querySelectorAll(EXPANDING_CARD_SELECTOR).forEach((el) => {
+        if (el && el["Expressive_ExpandingCard"] == void 0) {
+          this.init(el);
+        }
+      });
+    });
+  }
+};
+
+// src/ts/components/menu.ts
+var MIN_SURFACE_WIDTH = 112;
+var MAX_SURFACE_WIDTH = 280;
+var _defaults3 = {
   alignment: "left",
   autoFocus: true,
   constrainWidth: true,
@@ -533,9 +727,12 @@ var _defaults2 = {
   onCloseEnd: null,
   onItemClick: null
 };
+var SPACE = " ";
 var _Menu = class _Menu extends Component {
   constructor(el, options) {
     super(el, options, _Menu);
+    this._pendingTimers = /* @__PURE__ */ new Set();
+    this._transition = 0;
     this._handleClick = (e) => {
       e.preventDefault();
       if (this.isOpen) {
@@ -569,7 +766,7 @@ var _Menu = class _Menu extends Component {
       if (this.options.closeOnClick && this.menuEl?.contains(target) && !this.isTouchMoving) {
         this.close();
       } else if (!this.menuEl?.contains(target)) {
-        setTimeout(() => {
+        this._schedule(() => {
           if (this.isOpen) {
             this.close();
           }
@@ -578,8 +775,8 @@ var _Menu = class _Menu extends Component {
       this.isTouchMoving = false;
     };
     this._handleTriggerKeydown = (e) => {
-      const arrowDownOrEnter = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ENTER.includes(e.key);
-      if (arrowDownOrEnter && !this.isOpen) {
+      const opensMenu = e.key === SPACE || e.key === Utils.keys.ENTER || e.key === Utils.keys.ARROW_DOWN || e.key === Utils.keys.ARROW_UP;
+      if (opensMenu && !this.isOpen) {
         e.preventDefault();
         this.open();
       }
@@ -593,13 +790,18 @@ var _Menu = class _Menu extends Component {
     this._handleMenuClick = (e) => {
       const target = e.target;
       const li = target.closest("li");
+      if (li?.matches('.disabled, [aria-disabled="true"]')) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
       if (li && this._isSubmenuTriggerClick(target)) {
         e.preventDefault();
         e.stopPropagation();
         this._toggleSubmenu(li);
         return;
       }
-      if (typeof this.options.onItemClick === "function") {
+      if (li && typeof this.options.onItemClick === "function") {
         this.options.onItemClick.call(this, li);
       }
     };
@@ -612,11 +814,11 @@ var _Menu = class _Menu extends Component {
       }
     };
     this._handleMenuKeydown = (e) => {
-      const arrowUpOrDown = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key);
-      if (Utils.keys.TAB.includes(e.key)) {
+      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 (Utils.keys.ARROW_RIGHT.includes(e.key) && this.isOpen) {
+      } else if (e.key === Utils.keys.ARROW_RIGHT && this.isOpen) {
         const li = this._focusedRow(e);
         if (li?.querySelector(":scope > menu")) {
           e.preventDefault();
@@ -626,7 +828,7 @@ var _Menu = class _Menu extends Component {
           const first = li.querySelector(":scope > menu > li");
           first?.focus();
         }
-      } else if (Utils.keys.ARROW_LEFT.includes(e.key) && this.isOpen) {
+      } else if (e.key === Utils.keys.ARROW_LEFT && this.isOpen) {
         const submenu = this._containingSubmenu(e);
         if (submenu) {
           e.preventDefault();
@@ -637,7 +839,7 @@ var _Menu = class _Menu extends Component {
         }
       } else if (arrowUpOrDown && this.isOpen) {
         e.preventDefault();
-        const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1;
+        const direction = e.key === Utils.keys.ARROW_DOWN ? 1 : -1;
         const list = this._containingSubmenu(e) ?? this.menuEl;
         let newFocusedIndex = this.focusedIndex;
         let hasFoundNewIndex = false;
@@ -649,17 +851,17 @@ 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");
+          if (this.focusedIndex >= 0) list.children[this.focusedIndex]?.classList.remove("active");
           this.focusedIndex = newFocusedIndex;
           const item = list.children[this.focusedIndex];
           item.classList.add("active");
           item.focus({ preventScroll: true });
         }
-      } else if (Utils.keys.ENTER.includes(e.key) && this.isOpen) {
+      } else if ((e.key === Utils.keys.ENTER || e.key === SPACE) && this.isOpen) {
         const li = this._focusedRow(e);
+        e.preventDefault();
+        if (li?.matches('.disabled, [aria-disabled="true"]')) return;
         if (li?.querySelector(":scope > menu")) {
-          e.preventDefault();
           this._toggleSubmenu(li);
           return;
         }
@@ -670,7 +872,7 @@ var _Menu = class _Menu extends Component {
         } else if (focusedElement instanceof HTMLElement) {
           focusedElement.click();
         }
-      } else if (Utils.keys.ESC.includes(e.key) && this.isOpen) {
+      } else if (e.key === Utils.keys.ESC && this.isOpen) {
         e.preventDefault();
         const openSub = this.menuEl.querySelector("li.open");
         if (openSub) {
@@ -684,11 +886,12 @@ var _Menu = class _Menu extends Component {
       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
+        Utils.keys.ARROW_DOWN,
+        Utils.keys.ARROW_UP,
+        Utils.keys.ENTER,
+        Utils.keys.ESC,
+        Utils.keys.TAB,
+        SPACE
       ];
       if (isLetter && !specialKeys.includes(e.key)) {
         this.filterQuery.push(keyText);
@@ -717,16 +920,18 @@ var _Menu = class _Menu extends Component {
      * Open menu.
      */
     this.open = () => {
-      if (this.isOpen) return;
+      if (this.isOpen || this.el["Expressive_Menu"] !== this) return;
+      const transition = this._clearPendingTimers();
       this.isOpen = true;
       if (typeof this.options.onOpenStart === "function") {
         this.options.onOpenStart.call(this, this.el);
       }
+      if (transition !== this._transition) return;
       this._resetMenuStyles();
       this.menuEl.style.display = "block";
       this._placeMenu();
+      this._schedule(() => this._setupTemporaryEventHandlers(), 0);
       this._animateIn();
-      setTimeout(() => this._setupTemporaryEventHandlers(), 0);
       this.el.ariaExpanded = "true";
     };
     /**
@@ -734,18 +939,20 @@ var _Menu = class _Menu extends Component {
      */
     this.close = () => {
       if (!this.isOpen) return;
+      const transition = this._clearPendingTimers();
       this.isOpen = false;
       this.focusedIndex = -1;
       this._closeSubmenus();
       if (typeof this.options.onCloseStart === "function") {
         this.options.onCloseStart.call(this, this.el);
       }
+      if (transition !== this._transition) return;
       this._animateOut();
       this._removeTemporaryEventHandlers();
+      this.el.ariaExpanded = "false";
       if (this.options.autoFocus) {
         this.el.focus();
       }
-      this.el.ariaExpanded = "false";
     };
     /**
      * While menu is open, you can recalculate its dimensions if its contents have changed.
@@ -759,7 +966,7 @@ var _Menu = class _Menu extends Component {
     this.el["Expressive_Menu"] = this;
     _Menu._menus.push(this);
     this.id = Utils.getIdFromTrigger(el);
-    this.menuEl = document.getElementById(this.id);
+    this.menuEl = Utils.getElementById(el, this.id);
     this.options = {
       ..._Menu.defaults,
       ...options
@@ -770,13 +977,17 @@ var _Menu = class _Menu extends Component {
     this.focusedIndex = -1;
     this.filterQuery = [];
     this.el.ariaExpanded = "false";
+    if (!this.el.hasAttribute("aria-haspopup")) this.el.setAttribute("aria-haspopup", "menu");
+    if (this.id && !this.el.hasAttribute("aria-controls"))
+      this.el.setAttribute("aria-controls", this.id);
     this._moveMenuToElement();
+    this._setupAccessibility();
     this._makeMenuFocusable();
     this._setupSubmenus();
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults2;
+    return _defaults3;
   }
   /**
    * Initializes instances of Menu.
@@ -790,6 +1001,9 @@ var _Menu = class _Menu extends Component {
     return el["Expressive_Menu"];
   }
   destroy() {
+    this._clearPendingTimers();
+    this.isOpen = false;
+    this.el.ariaExpanded = "false";
     clearTimeout(this.filterTimeout);
     this._resetMenuStyles();
     this._removeEventHandlers();
@@ -826,7 +1040,9 @@ var _Menu = class _Menu extends Component {
   }
   _setupTemporaryEventHandlers() {
     document.body.addEventListener("click", this._handleDocumentClick);
-    document.body.addEventListener("touchmove", this._handleDocumentTouchmove, { passive: true });
+    document.body.addEventListener("touchmove", this._handleDocumentTouchmove, {
+      passive: true
+    });
     this.menuEl?.addEventListener("keydown", this._handleMenuKeydown);
     window.addEventListener("resize", this._handleWindowResize);
   }
@@ -836,6 +1052,33 @@ var _Menu = class _Menu extends Component {
     this.menuEl?.removeEventListener("keydown", this._handleMenuKeydown);
     window.removeEventListener("resize", this._handleWindowResize);
   }
+  _setupAccessibility() {
+    if (!this.menuEl) return;
+    if (!this.menuEl.hasAttribute("role")) this.menuEl.setAttribute("role", "menu");
+    const menus = [this.menuEl, ...this.menuEl.querySelectorAll("menu")];
+    menus.forEach((menu) => {
+      if (!menu.hasAttribute("role")) menu.setAttribute("role", "menu");
+      if (menu.getAttribute("role") !== "menu") return;
+      menu.querySelectorAll(":scope > li").forEach((li) => {
+        if (li.classList.contains("divider")) {
+          if (!li.hasAttribute("role")) li.setAttribute("role", "separator");
+          return;
+        }
+        if (li.classList.contains("gap")) {
+          li.setAttribute("aria-hidden", "true");
+          return;
+        }
+        if (li.classList.contains("label") || li.classList.contains("optgroup")) {
+          if (!li.hasAttribute("role")) li.setAttribute("role", "presentation");
+          return;
+        }
+        if (!li.hasAttribute("role")) li.setAttribute("role", "menuitem");
+        if (li.classList.contains("disabled") && !li.hasAttribute("aria-disabled")) {
+          li.setAttribute("aria-disabled", "true");
+        }
+      });
+    });
+  }
   _isSubmenuTriggerClick(target) {
     if (!this.menuEl) return false;
     const li = target.closest("li");
@@ -922,7 +1165,7 @@ var _Menu = class _Menu extends Component {
   _makeMenuFocusable() {
     if (!this.menuEl) return;
     this.menuEl.popover = "";
-    this.menuEl.tabIndex = 0;
+    this.menuEl.tabIndex = -1;
     this.menuEl.querySelectorAll(":scope li, :scope > hr").forEach((el) => {
       if (el instanceof HTMLHRElement || el.classList.contains("divider") || el.classList.contains("gap") || el.classList.contains("label") || el.classList.contains("optgroup")) {
         el.setAttribute("tabindex", "-1");
@@ -931,6 +1174,15 @@ var _Menu = class _Menu extends Component {
       if (!el.getAttribute("tabindex")) el.setAttribute("tabindex", "0");
     });
   }
+  _focusInitialItem() {
+    if (!this.menuEl || !this.options.autoFocus) return;
+    const first = Array.from(this.menuEl.children).find(
+      (child) => child instanceof HTMLElement && child.tabIndex !== -1
+    );
+    if (!first) return;
+    this.focusedIndex = Array.from(this.menuEl.children).indexOf(first);
+    first.focus({ preventScroll: true });
+  }
   _focusFocusedItem() {
     if (this.focusedIndex >= 0 && this.focusedIndex < this.menuEl.children.length && this.options.autoFocus) {
       this.menuEl.children[this.focusedIndex].focus({
@@ -1014,18 +1266,32 @@ var _Menu = class _Menu extends Component {
       width: idealWidth
     };
   }
+  _schedule(callback, delay) {
+    const timer = setTimeout(() => {
+      this._pendingTimers.delete(timer);
+      callback();
+    }, delay);
+    this._pendingTimers.add(timer);
+  }
+  _clearPendingTimers() {
+    for (const timer of this._pendingTimers) clearTimeout(timer);
+    this._pendingTimers.clear();
+    return ++this._transition;
+  }
   _animateIn() {
+    const transition = this._transition;
     const duration = this.options.inDuration;
     this.menuEl.style.transition = "none";
     this.menuEl.style.opacity = "0";
     this.menuEl.style.transform = "scale(0.85)";
-    setTimeout(() => {
+    this._schedule(() => {
       this.menuEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
       this.menuEl.style.opacity = "1";
       this.menuEl.style.transform = "scale(1)";
     }, 1);
-    setTimeout(() => {
-      if (this.options.autoFocus) this.menuEl.focus();
+    this._schedule(() => {
+      this._focusInitialItem();
+      if (transition !== this._transition) return;
       if (typeof this.options.onOpenEnd === "function") this.options.onOpenEnd.call(this, this.el);
     }, duration);
   }
@@ -1034,7 +1300,7 @@ var _Menu = class _Menu extends Component {
     this.menuEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
     this.menuEl.style.opacity = "0";
     this.menuEl.style.transform = "scale(0.85)";
-    setTimeout(() => {
+    this._schedule(() => {
       this._resetMenuStyles();
       if (typeof this.options.onCloseEnd === "function")
         this.options.onCloseEnd.call(this, this.el);
@@ -1042,11 +1308,11 @@ var _Menu = class _Menu extends Component {
   }
   _getClosestAncestor(el, condition) {
     let ancestor = el.parentNode;
-    while (ancestor !== null && ancestor !== document) {
-      if (condition(ancestor)) {
+    while (ancestor !== null && ancestor !== void 0 && ancestor !== document) {
+      if (ancestor.nodeType === Node.ELEMENT_NODE && condition(ancestor)) {
         return ancestor;
       }
-      ancestor = ancestor.parentElement;
+      ancestor = ancestor.parentNode ?? ancestor.host;
     }
     return null;
   }
@@ -1058,12 +1324,14 @@ var _Menu = class _Menu extends Component {
       }
     );
     if (!closestOverflowParent) {
-      closestOverflowParent = !!this.menuEl.offsetParent ? this.menuEl.offsetParent : this.menuEl.parentNode;
+      const parent = !!this.menuEl.offsetParent ? this.menuEl.offsetParent : this.menuEl.parentNode;
+      closestOverflowParent = parent.host ?? parent;
     }
     if (getComputedStyle(closestOverflowParent).position === "static")
       closestOverflowParent.style.position = "relative";
     const natural = this.menuEl.getBoundingClientRect().width;
-    const idealWidth = this.options.constrainWidth ? this.el.getBoundingClientRect().width : Math.min(280, Math.max(112, natural));
+    const triggerWidth = this.el.getBoundingClientRect().width;
+    const idealWidth = this.options.constrainWidth && triggerWidth >= MIN_SURFACE_WIDTH ? triggerWidth : Math.min(MAX_SURFACE_WIDTH, Math.max(MIN_SURFACE_WIDTH, natural));
     this.menuEl.style.width = idealWidth + "px";
     const positionInfo = this._getMenuPosition(closestOverflowParent);
     this.menuEl.style.left = positionInfo.x + "px";
@@ -1077,7 +1345,7 @@ _Menu._menus = [];
 var Menu = _Menu;
 
 // src/ts/components/autocomplete.ts
-var _defaults3 = {
+var _defaults4 = {
   data: [],
   // Autocomplete data set
   onAutocomplete: null,
@@ -1107,7 +1375,7 @@ var _Autocomplete = class _Autocomplete extends Component {
   constructor(el, options) {
     super(el, options, _Autocomplete);
     this._handleInputBlur = () => {
-      if (!this._mousedown) {
+      if (!this._pointerDown) {
         this.close();
         this._resetAutocomplete();
       }
@@ -1116,9 +1384,9 @@ var _Autocomplete = class _Autocomplete extends Component {
       if (e.type === "keyup") _Autocomplete._keydown = false;
       this.count = 0;
       const actualValue = this.el.value.toLocaleLowerCase();
-      if (Utils.keys.ENTER.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key) || Utils.keys.ARROW_DOWN.includes(e.key))
+      if (e.key === Utils.keys.ENTER || e.key === Utils.keys.ARROW_UP || e.key === Utils.keys.ARROW_DOWN)
         return;
-      if (this.oldVal !== actualValue && Utils.tabPressed) {
+      if (this.oldVal !== actualValue && this.el.matches(":focus-visible")) {
         this.open();
       }
       this._inputChangeDetection(actualValue);
@@ -1142,7 +1410,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     this._handleInputKeydown = (e) => {
       _Autocomplete._keydown = true;
       const numItems = this.container.querySelectorAll("li").length;
-      if (Utils.keys.ENTER.includes(e.key) && this.activeIndex >= 0) {
+      if (e.key === Utils.keys.ENTER && this.activeIndex >= 0) {
         const liElement = this.container.querySelectorAll("li")[this.activeIndex];
         if (liElement) {
           this.selectOption(liElement.getAttribute("data-id"));
@@ -1150,15 +1418,14 @@ var _Autocomplete = class _Autocomplete extends Component {
         }
         return;
       }
-      if (Utils.keys.ARROW_UP.includes(e.key) || Utils.keys.ARROW_DOWN.includes(e.key)) {
+      if (e.key === Utils.keys.ARROW_UP || e.key === Utils.keys.ARROW_DOWN) {
         e.preventDefault();
-        if (Utils.keys.ARROW_UP.includes(e.key) && this.activeIndex > 0) this.activeIndex--;
-        if (Utils.keys.ARROW_DOWN.includes(e.key) && this.activeIndex < numItems - 1)
+        if (e.key === Utils.keys.ARROW_UP && this.activeIndex > 0) this.activeIndex--;
+        if (e.key === Utils.keys.ARROW_DOWN && this.activeIndex < numItems - 1)
           this.activeIndex++;
-        this.$active?.classList.remove("active");
+        this._setActive(null);
         if (this.activeIndex >= 0) {
-          this.$active = this.container.querySelectorAll("li")[this.activeIndex];
-          this.$active?.classList.add("active");
+          this._setActive(this.container.querySelectorAll("li")[this.activeIndex]);
           this.container.children[this.activeIndex].scrollIntoView({
             behavior: "smooth",
             block: "nearest",
@@ -1170,11 +1437,17 @@ var _Autocomplete = class _Autocomplete extends Component {
     this._handleInputClick = () => {
       this.open();
     };
-    this._handleContainerMousedownAndTouchstart = () => {
-      this._mousedown = true;
+    // The flag says "a press is in flight inside the option list", so that a blur
+    // caused by that press does not close the list out from under it. Without the
+    // cancel half, a cancelled gesture left the flag set and the next blur could
+    // not close the list at all.
+    this._handleContainerPointerDown = (e) => {
+      if (!e.isPrimary) return;
+      if (e.pointerType === "mouse" && e.button !== 0) return;
+      this._pointerDown = true;
     };
-    this._handleContainerMouseupAndTouchend = () => {
-      this._mousedown = false;
+    this._handleContainerPointerUp = () => {
+      this._pointerDown = false;
     };
     /**
      * Show autocomplete.
@@ -1187,7 +1460,9 @@ var _Autocomplete = class _Autocomplete extends Component {
         this._renderMenu();
       }
       if (!this.menu.isOpen) {
-        setTimeout(() => {
+        if (this._openTimer !== void 0) clearTimeout(this._openTimer);
+        this._openTimer = setTimeout(() => {
+          this._openTimer = void 0;
           this.menu.open();
         }, 0);
       } else this.menu.recalculateDimensions();
@@ -1210,12 +1485,32 @@ var _Autocomplete = class _Autocomplete extends Component {
     this.selectedValues = this.selectedValues || this.options.selected.map((value) => ({ id: value })) || [];
     this.menuItems = this.options.data || [];
     this.$active = null;
-    this._mousedown = false;
+    this._pointerDown = false;
     this._setupMenu();
     this._setupEventHandlers();
   }
+  /**
+   * The active entry, for both the eye and the screen reader. The class alone
+   * was invisible to assistive technology; aria-activedescendant on the input
+   * is what reports the move.
+   *
+   * Deliberately does not touch aria-selected. Active and selected are two
+   * different things - in a multi-select the checkboxes track real choices,
+   * and folding the highlight into aria-selected would announce a committed
+   * choice as unselected the moment the user arrowed past it.
+   */
+  _setActive(item) {
+    this.$active?.classList.remove("active");
+    this.$active = item;
+    if (item) {
+      item.classList.add("active");
+      this.el.setAttribute("aria-activedescendant", item.id);
+    } else {
+      this.el.removeAttribute("aria-activedescendant");
+    }
+  }
   static get defaults() {
-    return _defaults3;
+    return _defaults4;
   }
   /**
    * Initializes instances of Autocomplete.
@@ -1241,6 +1536,10 @@ var _Autocomplete = class _Autocomplete extends Component {
     return _Autocomplete._loadingTemplate.cloneNode(true);
   }
   destroy() {
+    if (this._openTimer !== void 0) {
+      clearTimeout(this._openTimer);
+      this._openTimer = void 0;
+    }
     this._removeEventHandlers();
     this._removeMenu();
     this.el["Expressive_Autocomplete"] = void 0;
@@ -1251,12 +1550,9 @@ var _Autocomplete = class _Autocomplete extends Component {
     this.el.addEventListener("focus", this._handleInputFocus);
     this.el.addEventListener("keydown", this._handleInputKeydown);
     this.el.addEventListener("click", this._handleInputClick);
-    this.container.addEventListener("mousedown", this._handleContainerMousedownAndTouchstart);
-    this.container.addEventListener("mouseup", this._handleContainerMouseupAndTouchend);
-    if (typeof window.ontouchstart !== "undefined") {
-      this.container.addEventListener("touchstart", this._handleContainerMousedownAndTouchstart);
-      this.container.addEventListener("touchend", this._handleContainerMouseupAndTouchend);
-    }
+    this.container.addEventListener("pointerdown", this._handleContainerPointerDown);
+    this.container.addEventListener("pointerup", this._handleContainerPointerUp);
+    this.container.addEventListener("pointercancel", this._handleContainerPointerUp);
   }
   _removeEventHandlers() {
     this.el.removeEventListener("blur", this._handleInputBlur);
@@ -1264,12 +1560,9 @@ var _Autocomplete = class _Autocomplete extends Component {
     this.el.removeEventListener("focus", this._handleInputFocus);
     this.el.removeEventListener("keydown", this._handleInputKeydown);
     this.el.removeEventListener("click", this._handleInputClick);
-    this.container.removeEventListener("mousedown", this._handleContainerMousedownAndTouchstart);
-    this.container.removeEventListener("mouseup", this._handleContainerMouseupAndTouchend);
-    if (typeof window.ontouchstart !== "undefined") {
-      this.container.removeEventListener("touchstart", this._handleContainerMousedownAndTouchstart);
-      this.container.removeEventListener("touchend", this._handleContainerMouseupAndTouchend);
-    }
+    this.container.removeEventListener("pointerdown", this._handleContainerPointerDown);
+    this.container.removeEventListener("pointerup", this._handleContainerPointerUp);
+    this.container.removeEventListener("pointercancel", this._handleContainerPointerUp);
   }
   _setupMenu() {
     this.container = document.createElement("menu");
@@ -1277,6 +1570,10 @@ var _Autocomplete = class _Autocomplete extends Component {
     this.container.id = `autocomplete-options-${Utils.guid()}`;
     this.container.classList.add("autocomplete-content");
     this.container.ariaExpanded = "true";
+    this.container.setAttribute("role", "listbox");
+    this.el.setAttribute("role", "combobox");
+    this.el.setAttribute("aria-autocomplete", "list");
+    this.el.setAttribute("aria-controls", this.container.id);
     this.el.setAttribute("data-target", this.container.id);
     this.menuItems.forEach((menuItem) => {
       const itemElement = this._createMenuItem(menuItem);
@@ -1315,14 +1612,14 @@ var _Autocomplete = class _Autocomplete extends Component {
   }
   _resetCurrentElementPosition() {
     this.activeIndex = -1;
-    this.$active?.classList.remove("active");
+    this._setActive(null);
   }
   _resetAutocomplete() {
     this.container.replaceChildren();
     this._resetCurrentElementPosition();
     this.oldVal = null;
     this.isOpen = false;
-    this._mousedown = false;
+    this._pointerDown = false;
   }
   _highlightPartialText(input, label) {
     const start = label.toLocaleLowerCase().indexOf("" + input.toLocaleLowerCase());
@@ -1334,6 +1631,10 @@ var _Autocomplete = class _Autocomplete extends Component {
   }
   _createMenuItem(entry) {
     const item = document.createElement("li");
+    item.id = `autocomplete-option-${Utils.guid()}`;
+    item.setAttribute("role", "option");
+    const isSelected = this.selectedValues.some((sel) => sel.id === entry.id);
+    item.setAttribute("aria-selected", isSelected ? "true" : "false");
     item.setAttribute("data-id", entry.id);
     item.setAttribute(
       "style",
@@ -1346,7 +1647,7 @@ var _Autocomplete = class _Autocomplete extends Component {
       selection.style.textAlign = "center";
       const checkbox = document.createElement("input");
       checkbox.type = "checkbox";
-      checkbox.checked = this.selectedValues.some((sel) => sel.id === entry.id);
+      checkbox.checked = isSelected;
       const spacer = document.createElement("span");
       spacer.style.paddingLeft = "21px";
       selection.append(checkbox, spacer);
@@ -1492,7 +1793,7 @@ _Autocomplete._loadingTemplate = null;
 var Autocomplete = _Autocomplete;
 
 // src/ts/components/chips.ts
-var _defaults4 = {
+var _defaults5 = {
   data: [],
   placeholder: "",
   secondaryPlaceholder: "",
@@ -1501,6 +1802,7 @@ var _defaults4 = {
   autocompleteOnly: false,
   limit: Infinity,
   allowUserInput: false,
+  i18n: { remove: "Remove" },
   onChipAdd: null,
   onChipSelect: null,
   onChipDelete: null
@@ -1510,7 +1812,7 @@ var _Chips = class _Chips extends Component {
     super(el, options, _Chips);
     this._handleChipClick = (e) => {
       const _chip = e.target.closest(".chip");
-      const clickedClose = e.target.classList.contains("close");
+      const clickedClose = !!e.target.closest(".close");
       if (_chip) {
         const index = this._chips.indexOf(_chip);
         if (index < 0) return;
@@ -1532,7 +1834,7 @@ var _Chips = class _Chips extends Component {
     };
     this._handleInputKeydown = (e) => {
       _Chips._keydown = true;
-      if (Utils.keys.ENTER.includes(e.key)) {
+      if (e.key === Utils.keys.ENTER) {
         if (this.hasAutocomplete && this.autocomplete && this.autocomplete.isOpen) {
           return;
         }
@@ -1541,7 +1843,7 @@ var _Chips = class _Chips extends Component {
           this.addChip({ id: this._input.value });
         }
         this._input.value = "";
-      } else if ((Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.ARROW_LEFT.includes(e.key)) && this._input.value === "" && this.chipsData.length) {
+      } else if ((e.key === Utils.keys.BACKSPACE || e.key === Utils.keys.ARROW_LEFT) && this._input.value === "" && this.chipsData.length) {
         e.preventDefault();
         this.selectChip(this.chipsData.length - 1);
       }
@@ -1551,6 +1853,7 @@ var _Chips = class _Chips extends Component {
       ..._Chips.defaults,
       ...options
     };
+    if (options?.i18n) this.options.i18n = { ..._Chips.defaults.i18n, ...options.i18n };
     this.el.classList.add("chips");
     this.chipsData = [];
     this._chips = [];
@@ -1566,8 +1869,22 @@ var _Chips = class _Chips extends Component {
     }
     this._setupLabel();
   }
+  /**
+   * Selection is drawn by a class now, not by `:focus`, so it does not clear
+   * itself when focus moves - every path that changes the selection has to go
+   * through here or the class and the field drift apart.
+   *
+   * Deliberately no `aria-selected`: the chip is not an option in a listbox,
+   * and putting the attribute on an element with no such role is the same
+   * defect the semantics standard exists to remove.
+   */
+  _setSelected(chip) {
+    this._selectedChip?.classList.remove("selected");
+    this._selectedChip = chip;
+    chip?.classList.add("selected");
+  }
   static get defaults() {
-    return _defaults4;
+    return _defaults5;
   }
   /**
    * Initializes instances of Chips.
@@ -1617,28 +1934,30 @@ var _Chips = class _Chips extends Component {
     if (tag === "INPUT" || tag === "TEXTAREA" || !chipsKeydown) return;
     const currChips = chips["Expressive_Chips"];
     if (!currChips) return;
-    if (Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.DELETE.includes(e.key)) {
+    if (e.key === Utils.keys.BACKSPACE || e.key === Utils.keys.DELETE) {
       e.preventDefault();
       let selectIndex = currChips.chipsData.length;
       if (currChips._selectedChip) {
         const index = currChips._chips.indexOf(currChips._selectedChip);
         currChips.deleteChip(index);
-        currChips._selectedChip = null;
+        currChips._setSelected(null);
         selectIndex = Math.max(index - 1, 0);
       }
       if (currChips.chipsData.length) currChips.selectChip(selectIndex);
       else currChips._input.focus();
-    } else if (Utils.keys.ARROW_LEFT.includes(e.key)) {
+    } else if (e.key === Utils.keys.ARROW_LEFT) {
       if (currChips._selectedChip) {
         const selectIndex = currChips._chips.indexOf(currChips._selectedChip) - 1;
         if (selectIndex < 0) return;
         currChips.selectChip(selectIndex);
       }
-    } else if (Utils.keys.ARROW_RIGHT.includes(e.key)) {
+    } else if (e.key === Utils.keys.ARROW_RIGHT) {
       if (currChips._selectedChip) {
         const selectIndex = currChips._chips.indexOf(currChips._selectedChip) + 1;
-        if (selectIndex >= currChips.chipsData.length) currChips._input.focus();
-        else currChips.selectChip(selectIndex);
+        if (selectIndex >= currChips.chipsData.length) {
+          currChips._setSelected(null);
+          currChips._input.focus();
+        } else currChips.selectChip(selectIndex);
       }
     }
   }
@@ -1649,25 +1968,31 @@ var _Chips = class _Chips extends Component {
     if (!_Chips._keydown && document.hidden) {
       const chips = e.target.closest(".chips");
       const currChips = chips?.["Expressive_Chips"];
-      if (currChips) currChips._selectedChip = null;
+      if (currChips) currChips._setSelected(null);
     }
   }
   _renderChip(chip) {
     if (!chip.id) return;
-    const renderedChip = document.createElement("div");
+    const label = chip.text || chip.id;
+    const renderedChip = document.createElement("span");
     renderedChip.classList.add("chip");
-    renderedChip.innerText = chip.text || chip.id;
+    renderedChip.innerText = label;
     if (chip.image) {
       const img = document.createElement("img");
       img.setAttribute("src", chip.image);
       renderedChip.insertBefore(img, renderedChip.firstChild);
     }
     if (this.options.allowUserInput) {
-      renderedChip.setAttribute("tabindex", "0");
-      const closeIcon = document.createElement("i");
-      closeIcon.classList.add(this.options.closeIconClass, "close");
+      const closeButton = document.createElement("button");
+      closeButton.type = "button";
+      closeButton.classList.add("close");
+      closeButton.setAttribute("aria-label", `${this.options.i18n.remove} ${label}`);
+      const closeIcon = document.createElement("span");
+      closeIcon.classList.add(this.options.closeIconClass);
+      closeIcon.setAttribute("aria-hidden", "true");
       closeIcon.innerText = "close";
-      renderedChip.appendChild(closeIcon);
+      closeButton.appendChild(closeIcon);
+      renderedChip.appendChild(closeButton);
     }
     return renderedChip;
   }
@@ -1742,6 +2067,7 @@ var _Chips = class _Chips extends Component {
   deleteChip(chipIndex) {
     const chip = this._chips[chipIndex];
     if (!chip) return;
+    if (this._selectedChip === chip) this._setSelected(null);
     chip.remove();
     this._chips.splice(chipIndex, 1);
     this.chipsData.splice(chipIndex, 1);
@@ -1757,8 +2083,8 @@ var _Chips = class _Chips extends Component {
   selectChip(chipIndex) {
     const chip = this._chips[chipIndex];
     if (!chip) return;
-    this._selectedChip = chip;
-    chip.focus();
+    this._setSelected(chip);
+    chip.querySelector(".close")?.focus();
     if (typeof this.options.onChipSelect === "function") {
       this.options.onChipSelect(this.el, chip);
     }
@@ -1769,7 +2095,7 @@ var _Chips = class _Chips extends Component {
       chips.forEach((el) => {
         el.addEventListener("click", (e) => {
           if (el["Expressive_Chips"]) return;
-          if (e.target.classList.contains("close")) {
+          if (e.target.closest(".close")) {
             const chip = e.target.closest(".chip");
             if (chip) chip.remove();
           }
@@ -1781,97 +2107,93 @@ var _Chips = class _Chips extends Component {
 _Chips._keydown = false;
 var Chips = _Chips;
 
-// src/ts/components/range.ts
-var _defaults5 = {};
-var Range = class _Range extends Component {
+// src/ts/components/slider.ts
+var _defaults6 = {};
+var Slider = class _Slider extends Component {
   constructor(el, options) {
-    super(el, options, _Range);
+    super(el, options, _Slider);
     this._handleRangeChange = () => {
       this._clampDual();
       this._sync();
       this.thumb.classList.add("active");
     };
-    this._handleRangeMousedownTouchstart = (e) => {
-      this._mousedown = true;
+    this._handleRangePointerDown = (e) => {
+      if (!e.isPrimary) return;
+      if (e.pointerType === "mouse" && e.button !== 0) return;
+      this._pointerDown = true;
       this.el.classList.add("active");
       this._clampDual();
       this._sync();
-      if (e.type !== "input") {
-        this.thumb.classList.add("active");
-      }
+      this.thumb.classList.add("active");
     };
-    this._handleRangeInputMousemoveTouchmove = () => {
-      if (this._mousedown) {
+    this._handleRangeInputOrMove = () => {
+      if (this._pointerDown) {
         this._clampDual();
         this._sync();
         this.thumb.classList.add("active");
       }
     };
-    this._handleRangeMouseupTouchend = () => {
-      this._mousedown = false;
+    this._handleRangePointerUp = (e) => {
+      if (!e.isPrimary) return;
+      this._pointerDown = false;
       this.el.classList.remove("active");
     };
-    this._handleRangeBlurMouseoutTouchleave = () => {
-      if (!this._mousedown) {
+    this._handleRangeRelease = () => {
+      if (!this._pointerDown) {
         this.thumb.classList.remove("active");
       }
     };
-    this.el["Expressive_Range"] = this;
+    this.el["Expressive_Slider"] = this;
     this.options = {
-      ..._Range.defaults,
+      ..._Slider.defaults,
       ...options
     };
-    this._mousedown = false;
+    this._pointerDown = false;
     this._setupThumb();
     this._sync();
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults5;
+    return _defaults6;
   }
   /**
-   * Initializes instances of Range.
+   * Initializes instances of Slider.
    * @param els HTML elements.
    * @param options Component options.
    */
   static init(els, options = {}) {
-    return super.init(els, options, _Range);
+    return super.init(els, options, _Slider);
   }
   static getInstance(el) {
-    return el["Expressive_Range"];
+    return el["Expressive_Slider"];
   }
   destroy() {
     this._removeEventHandlers();
     this._removeThumb();
-    this.el["Expressive_Range"] = void 0;
+    this.el["Expressive_Slider"] = void 0;
   }
+  // Eleven listeners used to cover four stages, because each one was written
+  // twice - once for mouse, once for touch. One of the touch spellings,
+  // `touchleave`, was never implemented by any browser at all.
   _setupEventHandlers() {
     this.el.addEventListener("change", this._handleRangeChange);
-    this.el.addEventListener("mousedown", this._handleRangeMousedownTouchstart);
-    this.el.addEventListener("touchstart", this._handleRangeMousedownTouchstart);
-    this.el.addEventListener("input", this._handleRangeInputMousemoveTouchmove);
-    this.el.addEventListener("mousemove", this._handleRangeInputMousemoveTouchmove);
-    this.el.addEventListener("touchmove", this._handleRangeInputMousemoveTouchmove, {
-      passive: true
-    });
-    this.el.addEventListener("mouseup", this._handleRangeMouseupTouchend);
-    this.el.addEventListener("touchend", this._handleRangeMouseupTouchend);
-    this.el.addEventListener("blur", this._handleRangeBlurMouseoutTouchleave);
-    this.el.addEventListener("mouseout", this._handleRangeBlurMouseoutTouchleave);
-    this.el.addEventListener("touchleave", this._handleRangeBlurMouseoutTouchleave);
+    this.el.addEventListener("pointerdown", this._handleRangePointerDown);
+    this.el.addEventListener("input", this._handleRangeInputOrMove);
+    this.el.addEventListener("pointermove", this._handleRangeInputOrMove, { passive: true });
+    this.el.addEventListener("pointerup", this._handleRangePointerUp);
+    this.el.addEventListener("pointercancel", this._handleRangePointerUp);
+    this.el.addEventListener("blur", this._handleRangeRelease);
+    this.el.addEventListener("mouseout", this._handleRangeRelease);
   }
   _removeEventHandlers() {
     this.el.removeEventListener("change", this._handleRangeChange);
-    this.el.removeEventListener("mousedown", this._handleRangeMousedownTouchstart);
-    this.el.removeEventListener("touchstart", this._handleRangeMousedownTouchstart);
-    this.el.removeEventListener("input", this._handleRangeInputMousemoveTouchmove);
-    this.el.removeEventListener("mousemove", this._handleRangeInputMousemoveTouchmove);
-    this.el.removeEventListener("touchmove", this._handleRangeInputMousemoveTouchmove);
-    this.el.removeEventListener("mouseup", this._handleRangeMouseupTouchend);
-    this.el.removeEventListener("touchend", this._handleRangeMouseupTouchend);
-    this.el.removeEventListener("blur", this._handleRangeBlurMouseoutTouchleave);
-    this.el.removeEventListener("mouseout", this._handleRangeBlurMouseoutTouchleave);
-    this.el.removeEventListener("touchleave", this._handleRangeBlurMouseoutTouchleave);
+    this.el.removeEventListener("pointerdown", this._handleRangePointerDown);
+    this.el.removeEventListener("input", this._handleRangeInputOrMove);
+    this.el.removeEventListener("pointermove", this._handleRangeInputOrMove);
+    this.el.removeEventListener("pointerup", this._handleRangePointerUp);
+    this.el.removeEventListener("pointercancel", this._handleRangePointerUp);
+    this.el.removeEventListener("blur", this._handleRangeRelease);
+    this.el.removeEventListener("mouseout", this._handleRangeRelease);
   }
   _setupThumb() {
     this.thumb = document.createElement("span");
@@ -1888,7 +2210,7 @@ var Range = class _Range extends Component {
     return !!this.el.closest(".vertical");
   }
   _host() {
-    return this.el.closest(".range, .range-field, label");
+    return this.el.closest(".slider, .range, .range-field, label");
   }
   _clampDual() {
     const host = this._host();
@@ -1943,7 +2265,7 @@ var Range = class _Range extends Component {
    */
   static Init() {
     Utils.onDocumentReady(() => {
-      _Range.init(document.querySelectorAll("input[type=range]"), {});
+      _Slider.init(document.querySelectorAll("input[type=range]"), {});
     });
   }
 };
@@ -2016,169 +2338,144 @@ var _Dialogs = class _Dialogs {
 _Dialogs._down = null;
 var Dialogs = _Dialogs;
 
-// src/ts/behaviors/bottomSheets.ts
-var _BottomSheets = class _BottomSheets {
-  static Init() {
-    Utils.onDocumentReady(() => {
-      document.addEventListener("pointerdown", _BottomSheets._onDown, { passive: true });
-      document.addEventListener("pointermove", _BottomSheets._onMove, { passive: true });
-      document.addEventListener("pointerup", _BottomSheets._onUp, { passive: true });
-      document.addEventListener("pointercancel", _BottomSheets._onCancel, { passive: true });
-    });
-  }
-  static _onDown(event) {
+// src/ts/behaviors/sheetDrag.ts
+var DISMISS_DISTANCE = 96;
+var DISMISS_VELOCITY = 0.5;
+var DRAG_SLOP = 4;
+function installSheetDrag(config) {
+  const coord = (event) => config.axis === "x" ? event.clientX : event.clientY;
+  let drag = null;
+  const sheetFor = (target) => {
+    if (!(target instanceof Element)) return null;
+    const dialog = target.closest(config.selector);
+    return dialog instanceof HTMLDialogElement ? dialog : null;
+  };
+  const reset = (dialog) => {
+    dialog.style.transition = "";
+    dialog.style.setProperty(config.property, "0px");
+  };
+  const onDown = (event) => {
+    config.onPress?.();
     if (!event.isPrimary) return;
     if (event.pointerType === "mouse" && event.button !== 0) return;
-    const dialog = _BottomSheets._sheet(event.target);
+    const dialog = sheetFor(event.target);
     if (!dialog?.open) {
-      _BottomSheets._drag = null;
+      drag = null;
       return;
     }
-    if (!_BottomSheets._inHandle(event, dialog)) {
-      _BottomSheets._drag = null;
+    if (!config.inHandle(event, dialog)) {
+      drag = null;
       return;
     }
     dialog.style.transition = "none";
-    _BottomSheets._drag = {
+    drag = {
       dialog,
       pointerId: event.pointerId,
-      startY: event.clientY,
-      lastY: event.clientY,
+      direction: config.direction(dialog),
+      start: coord(event),
+      last: coord(event),
       lastT: Date.now(),
       shift: 0
     };
-  }
-  static _onMove(event) {
-    const drag = _BottomSheets._drag;
+  };
+  const onMove = (event) => {
     if (!drag || drag.pointerId !== event.pointerId) return;
-    const shift = Math.max(0, event.clientY - drag.startY);
-    drag.shift = shift;
-    drag.lastY = event.clientY;
+    const delta = coord(event) - drag.start;
+    drag.shift = drag.direction === 1 ? Math.max(0, delta) : Math.min(0, delta);
+    drag.last = coord(event);
     drag.lastT = Date.now();
-    drag.dialog.style.setProperty("--md-comp-bottom-sheet-shift", `${shift}px`);
-  }
-  static _onUp(event) {
-    const drag = _BottomSheets._drag;
-    _BottomSheets._drag = null;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-    const dialog = drag.dialog;
-    dialog.style.transition = "";
-    const dt = Math.max(1, Date.now() - drag.lastT);
-    const velocity = (event.clientY - drag.lastY) / dt;
-    const dismiss = drag.shift > 96 || velocity > 0.5;
-    if (dismiss && dialog.open) {
-      dialog.close();
-    }
-    dialog.style.setProperty("--md-comp-bottom-sheet-shift", "0px");
-  }
-  static _onCancel() {
-    const drag = _BottomSheets._drag;
-    _BottomSheets._drag = null;
-    if (!drag) return;
-    drag.dialog.style.transition = "";
-    drag.dialog.style.setProperty("--md-comp-bottom-sheet-shift", "0px");
-  }
-  static _sheet(target) {
-    if (!(target instanceof Element)) return null;
-    const dialog = target.closest("dialog.bottom-sheet, dialog.bottom");
-    return dialog instanceof HTMLDialogElement ? dialog : null;
+    drag.dialog.style.setProperty(config.property, `${drag.shift}px`);
+  };
+  const onUp = (event) => {
+    const held = drag;
+    if (!held || held.pointerId !== event.pointerId) return;
+    drag = null;
+    held.dialog.style.transition = "";
+    const dt = Math.max(1, Date.now() - held.lastT);
+    const velocity = (coord(event) - held.last) / dt;
+    config.onRelease?.(Math.abs(held.shift) > DRAG_SLOP);
+    const dismiss = held.direction === 1 ? held.shift > DISMISS_DISTANCE || velocity > DISMISS_VELOCITY : held.shift < -DISMISS_DISTANCE || velocity < -DISMISS_VELOCITY;
+    if (dismiss && held.dialog.open) held.dialog.close();
+    held.dialog.style.setProperty(config.property, "0px");
+  };
+  const onCancel = () => {
+    config.onRelease?.(false);
+    const held = drag;
+    drag = null;
+    if (held) reset(held.dialog);
+  };
+  Utils.onDocumentReady(() => {
+    document.addEventListener("pointerdown", onDown, { passive: true });
+    document.addEventListener("pointermove", onMove, { passive: true });
+    document.addEventListener("pointerup", onUp, { passive: true });
+    document.addEventListener("pointercancel", onCancel, { passive: true });
+  });
+}
+
+// src/ts/behaviors/bottomSheets.ts
+var SHEET_SELECTOR = "dialog.bottom-sheet, dialog.bottom";
+var _BottomSheets = class _BottomSheets {
+  static Init() {
+    installSheetDrag({
+      selector: SHEET_SELECTOR,
+      axis: "y",
+      property: "--md-comp-bottom-sheet-shift",
+      direction: () => 1,
+      inHandle: (event, dialog) => {
+        const target = event.target;
+        if (target instanceof Element && target.closest(".handle")) return true;
+        const rect = dialog.getBoundingClientRect();
+        return event.clientY >= rect.top && event.clientY <= rect.top + 48;
+      },
+      onPress: () => {
+        _BottomSheets._dragged = false;
+      },
+      onRelease: (dragged) => {
+        _BottomSheets._dragged = dragged;
+      }
+    });
+    Utils.onDocumentReady(() => {
+      document.addEventListener("click", _BottomSheets._onClick);
+    });
   }
-  static _inHandle(event, dialog) {
+  static _onClick(event) {
     const target = event.target;
-    if (target instanceof Element && target.closest(".handle")) return true;
-    const rect = dialog.getBoundingClientRect();
-    return event.clientY >= rect.top && event.clientY <= rect.top + 48;
+    if (!(target instanceof Element)) return;
+    const handle = target.closest(".handle, .drag-handle");
+    if (!(handle instanceof HTMLButtonElement)) return;
+    if (event.detail !== 0 && _BottomSheets._dragged) return;
+    const dialog = handle.closest(SHEET_SELECTOR);
+    if (dialog instanceof HTMLDialogElement && dialog.open) dialog.close();
   }
 };
-_BottomSheets._drag = null;
+/**
+ * Whether the last pointer sequence moved. A drag ends with a `click` on the
+ * element it started on, so without this the tail of a drag that snapped back
+ * would dismiss the sheet the drag had just declined to dismiss.
+ */
+_BottomSheets._dragged = false;
 var BottomSheets = _BottomSheets;
 
 // src/ts/behaviors/sideSheets.ts
-var _SideSheets = class _SideSheets {
+var startDocked = (dialog) => dialog.classList.contains("left") || dialog.classList.contains("left-sheet") || dialog.classList.contains("start");
+var SideSheets = class {
   static Init() {
-    Utils.onDocumentReady(() => {
-      document.addEventListener("pointerdown", _SideSheets._onDown, { passive: true });
-      document.addEventListener("pointermove", _SideSheets._onMove, { passive: true });
-      document.addEventListener("pointerup", _SideSheets._onUp, { passive: true });
-      document.addEventListener("pointercancel", _SideSheets._onCancel, { passive: true });
+    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,
+      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;
+      }
     });
   }
-  static _onDown(event) {
-    if (!event.isPrimary) return;
-    if (event.pointerType === "mouse" && event.button !== 0) return;
-    const dialog = _SideSheets._sheet(event.target);
-    if (!dialog?.open) {
-      _SideSheets._drag = null;
-      return;
-    }
-    if (!_SideSheets._inHandle(event, dialog)) {
-      _SideSheets._drag = null;
-      return;
-    }
-    dialog.style.transition = "none";
-    _SideSheets._drag = {
-      dialog,
-      pointerId: event.pointerId,
-      startX: event.clientX,
-      lastX: event.clientX,
-      lastT: Date.now(),
-      shift: 0,
-      startDocked: _SideSheets._startDocked(dialog)
-    };
-  }
-  static _onMove(event) {
-    const drag = _SideSheets._drag;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-    const delta = event.clientX - drag.startX;
-    const shift = drag.startDocked ? Math.min(0, delta) : Math.max(0, delta);
-    drag.shift = shift;
-    drag.lastX = event.clientX;
-    drag.lastT = Date.now();
-    drag.dialog.style.setProperty("--md-comp-side-sheet-shift", `${shift}px`);
-  }
-  static _onUp(event) {
-    const drag = _SideSheets._drag;
-    _SideSheets._drag = null;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-    const dialog = drag.dialog;
-    dialog.style.transition = "";
-    const dt = Math.max(1, Date.now() - drag.lastT);
-    const velocity = (event.clientX - drag.lastX) / dt;
-    const dismiss = drag.startDocked ? drag.shift < -96 || velocity < -0.5 : drag.shift > 96 || velocity > 0.5;
-    if (dismiss && dialog.open) {
-      dialog.close();
-    }
-    dialog.style.setProperty("--md-comp-side-sheet-shift", "0px");
-  }
-  static _onCancel() {
-    const drag = _SideSheets._drag;
-    _SideSheets._drag = null;
-    if (!drag) return;
-    drag.dialog.style.transition = "";
-    drag.dialog.style.setProperty("--md-comp-side-sheet-shift", "0px");
-  }
-  static _sheet(target) {
-    if (!(target instanceof Element)) return null;
-    const dialog = target.closest(
-      "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet"
-    );
-    return dialog instanceof HTMLDialogElement ? dialog : null;
-  }
-  static _startDocked(dialog) {
-    return dialog.classList.contains("left") || dialog.classList.contains("left-sheet") || dialog.classList.contains("start");
-  }
-  static _inHandle(event, dialog) {
-    const target = event.target;
-    if (target instanceof Element && target.closest("header")) return true;
-    const rect = dialog.getBoundingClientRect();
-    if (_SideSheets._startDocked(dialog)) {
-      return event.clientX >= rect.right - 24 && event.clientX <= rect.right;
-    }
-    return event.clientX >= rect.left && event.clientX <= rect.left + 24;
-  }
 };
-_SideSheets._drag = null;
-var SideSheets = _SideSheets;
 
 // src/ts/behaviors/forms.ts
 var Forms = class _Forms {
@@ -2234,7 +2531,7 @@ var Forms = class _Forms {
       document.addEventListener("keyup", (e) => {
         const target = e.target;
         if (target instanceof HTMLInputElement && ["radio", "checkbox"].includes(target.type)) {
-          if (Utils.keys.TAB.includes(e.key)) {
+          if (e.key === Utils.keys.TAB) {
             target.classList.add("tabbed");
             target.addEventListener("blur", () => target.classList.remove("tabbed"), {
               once: true
@@ -2272,61 +2569,89 @@ var Forms = class _Forms {
   }
 };
 
-// src/ts/behaviors/waves.ts
-var Waves = class _Waves {
-  static _offset(el) {
-    const box = el.getBoundingClientRect();
-    const docElem = document.documentElement;
-    return {
-      top: box.top + window.pageYOffset - docElem.clientTop,
-      left: box.left + window.pageXOffset - docElem.clientLeft
-    };
-  }
-  // https://phoenix-dx.com/css-techniques-for-material-ripple-effect/
-  static renderWaveEffect(targetElement, position = null, color = null) {
-    const isCentered = position === null;
-    const duration = 500;
-    let animationFrame, animationStart;
-    const animationStep = function(timestamp) {
-      if (!animationStart) {
-        animationStart = timestamp;
-      }
-      const frame = timestamp - animationStart;
-      if (frame < duration) {
-        const easing = frame / duration * (2 - frame / duration);
-        const circle = isCentered ? "circle at 50% 50%" : `circle at ${position.x}px ${position.y}px`;
-        const waveColor = `rgba(${color?.r || 0}, ${color?.g || 0}, ${color?.b || 0}, ${0.3 * (1 - easing)})`;
-        const stop = 90 * easing + "%";
-        targetElement.style.backgroundImage = "radial-gradient(" + circle + ", " + waveColor + " " + stop + ", transparent " + stop + ")";
-        animationFrame = window.requestAnimationFrame(animationStep);
-      } else {
-        targetElement.style.backgroundImage = "none";
-        window.cancelAnimationFrame(animationFrame);
+// src/ts/components/appBar.ts
+var _defaults7 = {};
+var AppBar = class _AppBar extends Component {
+  constructor(el, options) {
+    super(el, options, _AppBar);
+    this._observer = null;
+    this._sentinel = null;
+    this._input = null;
+    this._view = null;
+    this._suppressSearchOpen = false;
+    this._onIntersect = (entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      this.el.classList.toggle("collapsed", !entry.isIntersecting);
+    };
+    this._onSearchViewClose = () => {
+      this._suppressSearchOpen = true;
+    };
+    this._onSearchFocus = () => {
+      if (!this._view) return;
+      if (this._suppressSearchOpen) {
+        this._suppressSearchOpen = false;
+        return;
       }
+      if (this._view instanceof HTMLDialogElement) {
+        if (!this._view.open) this._view.showModal();
+        return;
+      }
+      this._view.hidden = false;
+      this._input?.setAttribute("aria-expanded", "true");
     };
-    animationFrame = window.requestAnimationFrame(animationStep);
+    this.el["Expressive_AppBar"] = this;
+    this.options = { ..._AppBar.defaults, ...options };
+    this._setupCollapse();
+    this._setupSearch();
   }
-  static Init() {
-    Utils.onDocumentReady(() => {
-      document.body.addEventListener("click", (e) => {
-        const trigger = e.target;
-        const el = trigger.closest(".waves-effect");
-        if (el && el.contains(trigger)) {
-          const isCircular = el.classList.contains("waves-circle");
-          const offset = _Waves._offset(el);
-          const x = e.pageX - offset.left;
-          const y = e.pageY - offset.top;
-          let color = null;
-          if (el.classList.contains("waves-light")) color = { r: 255, g: 255, b: 255 };
-          _Waves.renderWaveEffect(el, isCircular ? null : { x, y }, color);
-        }
-      });
-    });
+  static get defaults() {
+    return _defaults7;
+  }
+  static init(els, options = {}) {
+    return super.init(els, options, _AppBar);
+  }
+  static getInstance(el) {
+    return el["Expressive_AppBar"];
+  }
+  destroy() {
+    this._observer?.disconnect();
+    this._observer = null;
+    this._sentinel?.remove();
+    this._sentinel = null;
+    this._input?.removeEventListener("focus", this._onSearchFocus);
+    this._view?.removeEventListener("close", this._onSearchViewClose);
+    this.el.classList.remove("collapsed");
+    this.el["Expressive_AppBar"] = void 0;
+  }
+  _setupCollapse() {
+    if (!this.el.classList.contains("medium") && !this.el.classList.contains("large")) {
+      return;
+    }
+    if (typeof IntersectionObserver === "undefined") return;
+    this._sentinel = document.createElement("span");
+    this._sentinel.setAttribute("aria-hidden", "true");
+    this._sentinel.style.cssText = "display:block;width:100%;height:1px;margin-top:-1px;pointer-events:none;visibility:hidden";
+    this.el.insertAdjacentElement("beforebegin", this._sentinel);
+    this._observer = new IntersectionObserver(this._onIntersect);
+    this._observer.observe(this._sentinel);
+  }
+  _setupSearch() {
+    this._input = this.el.querySelector('input[type="search"]');
+    if (!this._input) return;
+    const id = this._input.getAttribute("aria-controls");
+    if (id) this._view = document.getElementById(id);
+    if (!this._view) this._view = this.el.querySelector(".search-view");
+    if (!this._view) return;
+    this._input.addEventListener("focus", this._onSearchFocus);
+    if (this._view instanceof HTMLDialogElement) {
+      this._view.addEventListener("close", this._onSearchViewClose);
+    }
   }
 };
 
 // src/ts/components/buttons.ts
-var _defaults6 = {
+var _defaults8 = {
   direction: "top",
   hoverEnabled: true,
   toolbarEnabled: false
@@ -2361,13 +2686,13 @@ var FloatingActionButton = class _FloatingActionButton extends Component {
       this._toggle();
     };
     this._handleAnchorKeydown = (e) => {
-      if (Utils.keys.ENTER.includes(e.key) || e.key === " ") {
+      if (e.key === Utils.keys.ENTER || e.key === " ") {
         e.preventDefault();
         this._toggle();
       }
     };
     this._handleDocumentKeydown = (e) => {
-      if (Utils.keys.ESC.includes(e.key)) this.close();
+      if (e.key === Utils.keys.ESC) this.close();
     };
     this._handleDocumentClick = (e) => {
       const target = e.target;
@@ -2387,22 +2712,19 @@ var FloatingActionButton = class _FloatingActionButton extends Component {
     };
     this.isOpen = false;
     this._anchor = this.el.querySelector(":scope > a, :scope > button");
-    this._menu = this.el.querySelector("ul, menu");
     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-haspopup", "menu");
       this._anchor.setAttribute("aria-expanded", "false");
       if (this._anchor instanceof HTMLAnchorElement && !this._anchor.hasAttribute("href") && this._anchor.tabIndex < 0) {
         this._anchor.tabIndex = 0;
       }
     }
-    if (this._menu) this._menu.setAttribute("role", "menu");
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults6;
+    return _defaults8;
   }
   static init(els, options = {}) {
     return super.init(els, options, _FloatingActionButton);
@@ -2439,17 +2761,240 @@ var FloatingActionButton = class _FloatingActionButton extends Component {
   }
 };
 
+// src/ts/components/buttonGroup.ts
+var _defaults9 = {};
+var VALID_SELECTION_MODES = /* @__PURE__ */ new Set(["single", "multiple"]);
+var PRESSED_CLASS = "button-group-pressed";
+var MAX_ICON_COMPRESSION = 0.15;
+var ButtonGroup = class _ButtonGroup extends Component {
+  constructor(el, options = {}) {
+    super(el, options, _ButtonGroup);
+    this._pressedStyles = /* @__PURE__ */ new Map();
+    this._releaseStyles = /* @__PURE__ */ new Map();
+    this._releaseTimer = null;
+    this._originalPressed = /* @__PURE__ */ new Map();
+    this._activeItem = null;
+    this._handleClick = (event) => {
+      if (!this._selectionMode) return;
+      const item = this._itemFromEvent(event);
+      if (!(item instanceof HTMLButtonElement) || this._isDisabled(item)) return;
+      this._rememberPressed(item);
+      const willSelect = item.getAttribute("aria-pressed") !== "true";
+      const selectedCount = this._toggleItems.filter(
+        (button) => button.getAttribute("aria-pressed") === "true"
+      ).length;
+      if (!willSelect && this.el.hasAttribute("data-selection-required") && selectedCount === 1) {
+        return;
+      }
+      if (this._selectionMode === "single" && willSelect) {
+        this._toggleItems.forEach((button) => {
+          this._rememberPressed(button);
+          button.setAttribute("aria-pressed", "false");
+        });
+      }
+      item.setAttribute("aria-pressed", willSelect ? "true" : "false");
+    };
+    this._handlePointerDown = (event) => {
+      if (event.button !== 0) return;
+      const item = this._itemFromEvent(event);
+      if (item && !this._isDisabled(item)) this._startPress(item);
+    };
+    this._handleKeyDown = (event) => {
+      if (event.repeat || event.key !== " " && event.key !== "Enter") return;
+      const item = this._itemFromEvent(event);
+      if (item && !this._isDisabled(item)) this._startPress(item);
+    };
+    this._handleKeyUp = (event) => {
+      if (event.key === " " || event.key === "Enter") this._resetPress();
+    };
+    this._handleFocusOut = (event) => {
+      if (event.target === this._activeItem) this._resetPress();
+    };
+    this._resetPress = () => {
+      this._activeItem?.classList.remove(PRESSED_CLASS);
+      this._activeItem = null;
+      if (!this._pressedStyles.size) return;
+      this._finishRelease();
+      this._releaseStyles = new Map(this._pressedStyles);
+      for (const [item, style] of this._releaseStyles) {
+        item.style.width = `${style.baseWidth}px`;
+      }
+      this._pressedStyles.clear();
+      this._releaseTimer = window.setTimeout(this._finishRelease, 200);
+    };
+    this._finishRelease = () => {
+      if (this._releaseTimer !== null) window.clearTimeout(this._releaseTimer);
+      this._releaseTimer = null;
+      for (const [item, style] of this._releaseStyles) item.style.width = style.width;
+      this._releaseStyles.clear();
+    };
+    this.el["Expressive_ButtonGroup"] = this;
+    this.options = { ..._ButtonGroup.defaults, ...options };
+    if (this._selectionMode) {
+      this._normalizeSelection();
+      this.el.addEventListener("click", this._handleClick, true);
+    }
+    this.el.addEventListener("pointerdown", this._handlePointerDown);
+    this.el.addEventListener("keydown", this._handleKeyDown);
+    this.el.addEventListener("focusout", this._handleFocusOut);
+    document.addEventListener("pointerup", this._resetPress);
+    document.addEventListener("pointercancel", this._resetPress);
+    document.addEventListener("keyup", this._handleKeyUp);
+    window.addEventListener("blur", this._resetPress);
+  }
+  static get defaults() {
+    return _defaults9;
+  }
+  static init(els, options = {}) {
+    return super.init(els, options, _ButtonGroup);
+  }
+  static getInstance(el) {
+    return el["Expressive_ButtonGroup"];
+  }
+  destroy() {
+    this._resetPress();
+    this._finishRelease();
+    this.el.removeEventListener("click", this._handleClick, true);
+    this.el.removeEventListener("pointerdown", this._handlePointerDown);
+    this.el.removeEventListener("keydown", this._handleKeyDown);
+    this.el.removeEventListener("focusout", this._handleFocusOut);
+    document.removeEventListener("pointerup", this._resetPress);
+    document.removeEventListener("pointercancel", this._resetPress);
+    document.removeEventListener("keyup", this._handleKeyUp);
+    window.removeEventListener("blur", this._resetPress);
+    for (const [item, value] of this._originalPressed) {
+      if (value === null) item.removeAttribute("aria-pressed");
+      else item.setAttribute("aria-pressed", value);
+    }
+    this._originalPressed.clear();
+    this.el["Expressive_ButtonGroup"] = void 0;
+  }
+  get _selectionMode() {
+    const mode = this.el.dataset.selection;
+    return VALID_SELECTION_MODES.has(mode) ? mode : null;
+  }
+  get _items() {
+    return Array.from(this.el.children).filter(
+      (child) => child instanceof HTMLButtonElement || child instanceof HTMLAnchorElement && child.classList.contains("button")
+    );
+  }
+  get _toggleItems() {
+    return this._items.filter(
+      (item) => item instanceof HTMLButtonElement
+    );
+  }
+  _normalizeSelection() {
+    const items = this._toggleItems;
+    items.forEach((item) => {
+      this._rememberPressed(item);
+      if (!["true", "false"].includes(item.getAttribute("aria-pressed") || "")) {
+        item.setAttribute("aria-pressed", "false");
+      }
+    });
+    if (this._selectionMode === "single") {
+      const selected = items.filter((item) => item.getAttribute("aria-pressed") === "true");
+      selected.slice(1).forEach((item) => item.setAttribute("aria-pressed", "false"));
+    }
+    if (this.el.hasAttribute("data-selection-required") && !items.some((item) => item.getAttribute("aria-pressed") === "true")) {
+      items.find((item) => !this._isDisabled(item))?.setAttribute("aria-pressed", "true");
+    }
+  }
+  _itemFromEvent(event) {
+    if (!(event.target instanceof Element)) return null;
+    const item = event.target.closest("button, a.button");
+    return item instanceof HTMLElement && item.parentElement === this.el ? item : null;
+  }
+  _isDisabled(item) {
+    return item instanceof HTMLButtonElement && item.disabled || item.getAttribute("aria-disabled") === "true" || item.classList.contains("disabled");
+  }
+  _rememberPressed(item) {
+    if (!this._originalPressed.has(item)) {
+      this._originalPressed.set(item, item.getAttribute("aria-pressed"));
+    }
+  }
+  _startPress(item) {
+    if (this._activeItem) return;
+    this._finishRelease();
+    const items = this._items;
+    const activeIndex = items.indexOf(item);
+    if (activeIndex < 0) return;
+    this._activeItem = item;
+    item.classList.add(PRESSED_CLASS);
+    if (this.el.classList.contains("connected") || items.length < 2) return;
+    const rects = items.map((candidate) => candidate.getBoundingClientRect());
+    const activeWidth = rects[activeIndex].width;
+    if (activeWidth <= 0) return;
+    const parsedMultiplier = Number.parseFloat(
+      getComputedStyle(this.el).getPropertyValue(
+        "--md-comp-button-group-pressed-item-width-multiplier"
+      )
+    );
+    const multiplier = Number.isFinite(parsedMultiplier) ? parsedMultiplier : 0.15;
+    const desiredGrowth = activeWidth * multiplier;
+    const neighborIndexes = [activeIndex - 1, activeIndex + 1].filter(
+      (index) => index >= 0 && index < items.length
+    );
+    const compression = /* @__PURE__ */ new Map();
+    if (neighborIndexes.length === 1) {
+      const index = neighborIndexes[0];
+      compression.set(
+        index,
+        Math.min(desiredGrowth, this._compressionCapacity(items[index], rects[index]))
+      );
+    } else {
+      const half = desiredGrowth / 2;
+      for (const index of neighborIndexes) {
+        compression.set(
+          index,
+          Math.min(half, this._compressionCapacity(items[index], rects[index]))
+        );
+      }
+      let remaining = desiredGrowth - [...compression.values()].reduce((sum, value) => sum + value, 0);
+      for (const index of neighborIndexes) {
+        if (remaining <= 0) break;
+        const capacity = this._compressionCapacity(items[index], rects[index]) - compression.get(index);
+        const extra = Math.min(remaining, capacity);
+        compression.set(index, compression.get(index) + extra);
+        remaining -= extra;
+      }
+    }
+    const actualGrowth = [...compression.values()].reduce((sum, value) => sum + value, 0);
+    if (actualGrowth <= 0) return;
+    items.forEach((candidate, index) => {
+      this._pressedStyles.set(candidate, {
+        width: candidate.style.width,
+        baseWidth: rects[index].width
+      });
+      candidate.style.width = `${rects[index].width}px`;
+    });
+    void this.el.offsetWidth;
+    items.forEach((candidate, index) => {
+      const adjustment = index === activeIndex ? actualGrowth : -(compression.get(index) || 0);
+      candidate.style.width = `${rects[index].width + adjustment}px`;
+    });
+  }
+  _compressionCapacity(item, rect) {
+    const minimumWidth = item.classList.contains("icon-button") ? rect.width * (1 - MAX_ICON_COMPRESSION) : rect.height;
+    return Math.max(0, rect.width - minimumWidth);
+  }
+};
+
 // src/ts/components/carousel.ts
-var _defaults7 = {
+var _defaults10 = {
   duration: 200,
-  dist: -100,
-  shift: 0,
-  padding: 0,
-  numVisible: 5,
   fullWidth: false,
   indicators: false,
   noWrap: false,
-  onCycleTo: null
+  interval: 0,
+  height: null,
+  onCycleTo: null,
+  i18n: {
+    carousel: "Carousel",
+    item: "Item",
+    of: "of",
+    indicators: "Slides",
+    slide: "Slide"
+  }
 };
 var _Carousel = class _Carousel extends Component {
   constructor(el, options) {
@@ -2460,101 +3005,112 @@ var _Carousel = class _Carousel extends Component {
     this._ignoreScroll = false;
     this._trackRaf = null;
     this._started = false;
+    this._vertical = false;
+    this._resizeObserver = null;
+    this._usesWindowResize = false;
+    this._dragPointerId = null;
+    this._dragStartX = 0;
+    this._dragStartY = 0;
+    this._dragStartScroll = 0;
+    this._suppressClick = false;
+    this._suppressClickTimeout = null;
+    this._generatedContainerRole = false;
+    this._generatedContainerLabel = false;
+    this._generatedContainerDescription = false;
+    this._generatedWideLayout = false;
+    this._generatedFixedHeight = false;
+    this._authoredInlineHeight = null;
+    this._autoAdvanceTimer = null;
+    this._autoAdvances = false;
+    this._autoPaused = false;
+    this._hovered = false;
+    this._focused = false;
+    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._handleCarouselTap = (e) => {
-      if (e.pointerType === "mouse" && e.button !== 0) return;
-      if (e.target instanceof HTMLElement && e.target.tagName === "IMG") {
-        e.preventDefault();
+    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;
+      this._syncAutoAdvance();
+    };
+    this._tick = () => {
+      this._autoAdvanceTimer = null;
+      this._advance();
+      this._syncAutoAdvance();
+    };
+    this._advance = () => {
+      const next = this.center + 1;
+      if (next < this.count) {
+        this.set(next);
+        return;
+      }
+      if (this.options.noWrap) {
+        this._autoAdvances = false;
+        this._syncAutoAdvance();
+        return;
       }
+      this.set(0);
+    };
+    this._handleTrackPointerDown = (e) => {
+      if (e.pointerType !== "mouse" || e.button !== 0) return;
       this.pressed = true;
       this.dragged = false;
-      this.verticalDragged = false;
-      this.reference = e.clientX;
-      this.referenceY = e.clientY;
-      this.velocity = this.amplitude = 0;
-      this.frame = this.offset;
-      this.timestamp = Date.now();
+      this._suppressClick = false;
+      this._dragPointerId = e.pointerId;
+      this._dragStartX = e.clientX;
+      this._dragStartY = e.clientY;
+      this._dragStartScroll = this._vertical ? this._scroller.scrollTop : this._scroller.scrollLeft;
       try {
-        this.el.setPointerCapture(e.pointerId);
+        this._scroller.setPointerCapture(e.pointerId);
       } catch {
       }
-      if (this._trackRaf !== null) cancelAnimationFrame(this._trackRaf);
-      const loop = () => {
-        this._track();
-        if (this.pressed) this._trackRaf = requestAnimationFrame(loop);
-        else this._trackRaf = null;
-      };
-      this._trackRaf = requestAnimationFrame(loop);
-    };
-    this._handleCarouselDrag = (e) => {
-      if (!this.pressed) return;
-      const delta = this.reference - e.clientX;
-      const deltaY = Math.abs(this.referenceY - e.clientY);
-      if (deltaY < 30 && !this.verticalDragged) {
-        if (delta > 2 || delta < -2) {
-          this.dragged = true;
-          this.reference = e.clientX;
-          this._scroll(this.offset + delta);
-        }
-      } else if (this.dragged) {
-        e.preventDefault();
-      } else {
-        this.verticalDragged = true;
+    };
+    this._handleTrackPointerMove = (e) => {
+      if (!this.pressed || e.pointerId !== this._dragPointerId) return;
+      const deltaX = e.clientX - this._dragStartX;
+      const deltaY = e.clientY - this._dragStartY;
+      const primaryDelta = this._vertical ? deltaY : deltaX;
+      const crossDelta = this._vertical ? deltaX : deltaY;
+      if (!this.dragged) {
+        if (Math.abs(primaryDelta) < 6 || Math.abs(primaryDelta) <= Math.abs(crossDelta)) return;
+        this.dragged = true;
+        this.el.classList.add("dragging");
       }
-      if (this.dragged) e.preventDefault();
+      if (this._vertical) this._scroller.scrollTop = this._dragStartScroll - deltaY;
+      else this._scroller.scrollLeft = this._dragStartScroll - deltaX;
+      e.preventDefault();
     };
-    this._handleCarouselRelease = (e) => {
-      if (!this.pressed) return;
+    this._handleTrackPointerUp = (e) => {
+      if (!this.pressed || e.pointerId !== this._dragPointerId) return;
       this.pressed = false;
-      if (this._trackRaf !== null) {
-        cancelAnimationFrame(this._trackRaf);
-        this._trackRaf = null;
-      }
+      this._dragPointerId = null;
+      this.el.classList.remove("dragging");
       try {
-        this.el.releasePointerCapture(e.pointerId);
+        this._scroller.releasePointerCapture(e.pointerId);
       } catch {
       }
-      this.target = this.offset;
-      if (this.velocity > 10 || this.velocity < -10) {
-        this.amplitude = 0.9 * this.velocity;
-        this.target = this.offset + this.amplitude;
-      }
-      this.target = Math.round(this.target / this.dim) * this.dim;
-      if (this.noWrap) {
-        if (this.target >= this.dim * (this.count - 1)) {
-          this.target = this.dim * (this.count - 1);
-        } else if (this.target < 0) {
-          this.target = 0;
-        }
-      }
-      this.amplitude = this.target - this.offset;
-      this.timestamp = Date.now();
-      requestAnimationFrame(this._autoScroll);
-      if (this.dragged) e.preventDefault();
+      if (!this.dragged) return;
+      this._suppressClick = true;
+      window.clearTimeout(this._suppressClickTimeout);
+      this._suppressClickTimeout = setTimeout(() => {
+        this._suppressClick = false;
+      }, 0);
+      this._syncActive(this._nearestIndex(), true);
+    };
+    this._handleTrackClick = (e) => {
+      if (!this._suppressClick) return;
+      this._suppressClick = false;
+      e.preventDefault();
+      e.stopImmediatePropagation();
     };
-    this._handleCarouselClick = (e) => {
-      if (this.dragged) {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-      const clickedElem = e.target.closest(".carousel-item");
-      if (!clickedElem || !this.el.contains(clickedElem)) return;
-      const clickedIndex = this.images.indexOf(clickedElem);
-      const diff = this._wrap(this.center) - clickedIndex;
-      if (diff !== 0) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-      if (clickedIndex < 0) {
-        if (e.clientX - e.target.getBoundingClientRect().left > this.el.clientWidth / 2) {
-          this.next();
-        } else {
-          this.prev();
-        }
-      } else {
-        this._cycleTo(clickedIndex);
-      }
+    this._handleTrackDragStart = (e) => {
+      if (e.target.closest("img, picture, video")) e.preventDefault();
     };
     this._handleIndicatorClick = (e) => {
       e.stopPropagation();
@@ -2567,112 +3123,107 @@ var _Carousel = class _Carousel extends Component {
     this._handleKeydown = (e) => {
       const target = e.target;
       if (target.closest('input, textarea, select, [contenteditable="true"]')) return;
-      if (Utils.keys.ARROW_RIGHT.includes(e.key)) {
+      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 (e.key === "Home") {
+        e.preventDefault();
+        this.set(0);
+        this._focusItem(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        this.set(this.count - 1);
+        this._focusItem(this.count - 1);
+      } else if (forward) {
         e.preventDefault();
         this.next();
-      } else if (Utils.keys.ARROW_LEFT.includes(e.key)) {
+        this._focusItem(this.center);
+      } else if (backward) {
         e.preventDefault();
         this.prev();
+        this._focusItem(this.center);
       }
     };
-    this._handleFlatScroll = () => {
-      if (this._ignoreScroll) return;
-      const index = this._nearestIndex();
-      if (index !== this.center) this._syncActive(index, this.dragged);
+    this._handleTrackScroll = () => {
+      if (!this.el.classList.contains("scrolling")) this.el.classList.add("scrolling");
+      window.clearTimeout(this.scrollingTimeout);
+      this.scrollingTimeout = setTimeout(() => this.el.classList.remove("scrolling"), 120);
+      if (this._trackRaf !== null) return;
+      this._trackRaf = requestAnimationFrame(() => {
+        this._trackRaf = null;
+        this._updateParallax();
+        if (this._ignoreScroll) return;
+        const index = this._nearestIndex();
+        if (index !== this.center) this._syncActive(index, this.dragged);
+      });
     };
     this._handleResize = () => {
       if (!this.images.length) return;
-      if (this._flat) {
-        this._scrollToIndex(this.center, false);
-        return;
-      }
-      if (this.options.fullWidth) {
-        const firstItem = this.images[0];
-        if (!firstItem) return;
-        this.itemWidth = firstItem.clientWidth;
-        this.dim = this.itemWidth * 2 + this.options.padding;
-        this.offset = this.center * 2 * this.itemWidth;
-        this.target = this.offset;
-      } else {
-        this._scroll();
-      }
-    };
-    this._track = () => {
-      const now = Date.now();
-      const elapsed = now - this.timestamp;
-      const delta = this.offset - this.frame;
-      const v = 1e3 * delta / (1 + elapsed);
-      this.timestamp = now;
-      this.frame = this.offset;
-      this.velocity = 0.8 * v + 0.2 * this.velocity;
-    };
-    this._autoScroll = () => {
-      if (!this.amplitude) return;
-      const elapsed = Date.now() - this.timestamp;
-      const delta = this.amplitude * Math.exp(-elapsed / this.options.duration);
-      if (delta > 2 || delta < -2) {
-        this._scroll(this.target - delta);
-        requestAnimationFrame(this._autoScroll);
-      } else {
-        this._scroll(this.target);
-      }
+      this._syncAdaptiveMode();
+      this._syncLayoutRoles(this.center);
+      this._scrollToIndex(this.center, false);
+      this._updateParallax();
     };
     this.el["Expressive_Carousel"] = this;
     this.options = {
       ..._Carousel.defaults,
       ...options
     };
-    this._flat = this.options.fullWidth || this.el.classList.contains("flat");
-    if (this._flat) {
+    if (options?.i18n) {
+      this.options.i18n = { ..._Carousel.defaults.i18n, ...options.i18n };
+    }
+    if (this.options.fullWidth || this.el.classList.contains("flat")) {
       this.el.classList.add("flat");
       this.options.fullWidth = true;
-      this.options.dist = 0;
-    }
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-      this.options.duration = 1;
-      if (!this._flat) this.options.dist = 0;
     }
+    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.offset = this.target = 0;
     this.images = this._collectItems();
     if (!this.images.length) {
       console.error("Carousel: no .carousel-item elements to show");
       return;
     }
+    this.images.forEach((item) => {
+      this._itemA11yOriginal.set(item, {
+        ariaHidden: item.getAttribute("aria-hidden"),
+        tabIndex: item.getAttribute("tabindex")
+      });
+      if (item.hasAttribute("data-carousel-size")) this._authoredItemSizes.add(item);
+    });
     this.hasMultipleSlides = this.images.length > 1;
     this.showIndicators = this.options.indicators && this.hasMultipleSlides;
-    this.noWrap = this.options.noWrap || !this.hasMultipleSlides || this._flat;
     this.count = this.images.length;
-    this.options.numVisible = Math.min(this.count, this.options.numVisible);
+    this._autoAdvances = this.options.interval > 0 && this.hasMultipleSlides && !reducedMotion;
     this.images.forEach((item) => item.classList.add("carousel-item"));
-    if (this._flat) this._wrapTrack();
-    const firstItem = this.images[0];
-    this.itemWidth = firstItem.clientWidth || this.el.clientWidth || 1;
-    this.itemHeight = firstItem.clientHeight || this.el.clientHeight || 1;
-    this.dim = this.itemWidth * 2 + this.options.padding || 1;
+    if (this.options.height !== null) {
+      this._generatedFixedHeight = !this.el.classList.contains("fixed-height");
+      this._authoredInlineHeight = this.el.style.getPropertyValue("--carousel-height") || null;
+      this.el.classList.add("fixed-height");
+      this.el.style.setProperty("--carousel-height", `${this.options.height}px`);
+    }
+    this._wrapTrack();
+    this._syncAdaptiveMode();
     if (this.showIndicators) this._setupIndicators();
-    this.el.tabIndex = this.el.tabIndex >= 0 ? this.el.tabIndex : 0;
-    this.el.setAttribute("aria-roledescription", "carousel");
+    this._setupAccessibility();
     this._setupEventHandlers();
     this._started = true;
-    if (this._flat) {
-      const start = Math.max(
-        0,
-        this.images.findIndex((el2) => el2.classList.contains("active"))
-      );
-      this.center = start;
-      this._syncActive(start, false);
-      this._scrollToIndex(start, false);
-    } else {
-      this._scroll(this.offset);
-    }
+    const start = Math.max(
+      0,
+      this.images.findIndex((el2) => el2.classList.contains("active"))
+    );
+    this.center = start;
+    this._syncActive(start, false);
+    this._updateParallax();
+    this._scrollToIndex(start, false);
+    this._syncAutoAdvance();
   }
   get _scroller() {
     return this._trackEl ?? this.el;
   }
   static get defaults() {
-    return _defaults7;
+    return _defaults10;
   }
   static init(els, options = {}) {
     return super.init(els, options, _Carousel);
@@ -2697,6 +3248,39 @@ var _Carousel = class _Carousel extends Component {
       return el.tagName !== "NAV";
     });
   }
+  _setupAccessibility() {
+    if (!this.el.hasAttribute("role")) {
+      this.el.setAttribute("role", "region");
+      this._generatedContainerRole = true;
+    }
+    if (!this.el.hasAttribute("aria-label") && !this.el.hasAttribute("aria-labelledby")) {
+      this.el.setAttribute("aria-label", this.options.i18n.carousel);
+      this._generatedContainerLabel = true;
+    }
+    if (!this.el.hasAttribute("aria-roledescription")) {
+      this.el.setAttribute("aria-roledescription", "carousel");
+      this._generatedContainerDescription = true;
+    }
+    const naturallyFocusable = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    this.images.forEach((item, index) => {
+      if (!item.hasAttribute("aria-roledescription")) {
+        item.setAttribute("aria-roledescription", "slide");
+        this._generatedItemDescriptions.add(item);
+      }
+      if (!item.hasAttribute("aria-label") && !item.hasAttribute("aria-labelledby")) {
+        const mediaName = item.querySelector("img[alt]")?.getAttribute("alt")?.trim();
+        const textName = item.textContent?.replace(/\s+/g, " ").trim();
+        const name = mediaName || textName;
+        const position = `${this.options.i18n.item} ${index + 1} ${this.options.i18n.of} ${this.count}`;
+        item.setAttribute("aria-label", name ? `${name}, ${position}` : position);
+        this._generatedItemLabels.add(item);
+      }
+      if (!item.matches(naturallyFocusable) && !item.querySelector(naturallyFocusable)) {
+        item.tabIndex = 0;
+        this._generatedItemTabIndexes.add(item);
+      }
+    });
+  }
   _setupIndicators() {
     const existing = Array.from(this.el.children).find(
       (el) => el instanceof HTMLElement && el.classList.contains("indicators")
@@ -2704,7 +3288,7 @@ var _Carousel = class _Carousel extends Component {
     this._indicators = existing ?? document.createElement("nav");
     this._ownIndicators = !existing;
     this._indicators.classList.add("indicators");
-    this._indicators.setAttribute("aria-label", "Slides");
+    this._indicators.setAttribute("aria-label", this.options.i18n.indicators);
     this._indicators.replaceChildren();
     this.images.forEach((_, i) => {
       const button = document.createElement("button");
@@ -2714,158 +3298,124 @@ var _Carousel = class _Carousel extends Component {
         button.classList.add("active");
         button.setAttribute("aria-current", "true");
       }
-      button.setAttribute("aria-label", `Slide ${i + 1}`);
+      button.setAttribute("aria-label", `${this.options.i18n.slide} ${i + 1}`);
       this._indicators.appendChild(button);
     });
     if (this._ownIndicators) this.el.appendChild(this._indicators);
-    if (this._flat) {
-      this.el.querySelector(".carousel-fixed-item")?.classList.add("with-indicators");
-    }
+    this.el.querySelector(".carousel-fixed-item")?.classList.add("with-indicators");
   }
   _setupEventHandlers() {
     this.el.addEventListener("keydown", this._handleKeydown);
+    if (this._autoAdvances) {
+      this.el.addEventListener("mouseenter", this._handleAutoAdvanceState);
+      this.el.addEventListener("mouseleave", this._handleAutoAdvanceState);
+      this.el.addEventListener("focusin", this._handleAutoAdvanceState);
+      this.el.addEventListener("focusout", this._handleAutoAdvanceState);
+      document.addEventListener("visibilitychange", this._handleAutoAdvanceState);
+    }
     if (this.showIndicators && this._indicators) {
       this._indicators.addEventListener("click", this._handleIndicatorClick);
     }
-    _Carousel._live.add(this);
-    if (!_Carousel._resizeListening) {
-      window.addEventListener("resize", _Carousel._onResize, { passive: true });
-      _Carousel._resizeListening = true;
+    if (typeof ResizeObserver !== "undefined") {
+      this._resizeObserver = new ResizeObserver(() => this._handleThrottledResize());
+      this._resizeObserver.observe(this.el);
     }
-    if (this._flat) {
-      this._scroller.addEventListener("scroll", this._handleFlatScroll, { passive: true });
-      return;
+    this._usesWindowResize = !this._resizeObserver || this.el.classList.contains("full-screen");
+    if (this._usesWindowResize) {
+      _Carousel._live.add(this);
+      if (!_Carousel._resizeListening) {
+        window.addEventListener("resize", _Carousel._onResize, {
+          passive: true
+        });
+        _Carousel._resizeListening = true;
+      }
     }
-    this.el.addEventListener("pointerdown", this._handleCarouselTap);
-    this.el.addEventListener("pointermove", this._handleCarouselDrag);
-    this.el.addEventListener("pointerup", this._handleCarouselRelease);
-    this.el.addEventListener("pointercancel", this._handleCarouselRelease);
-    this.el.addEventListener("click", this._handleCarouselClick);
+    this._scroller.addEventListener("scroll", this._handleTrackScroll, {
+      passive: true
+    });
+    this._scroller.addEventListener("pointerdown", this._handleTrackPointerDown);
+    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);
   }
   _removeEventHandlers() {
     this.el.removeEventListener("keydown", this._handleKeydown);
+    this.el.removeEventListener("mouseenter", this._handleAutoAdvanceState);
+    this.el.removeEventListener("mouseleave", this._handleAutoAdvanceState);
+    this.el.removeEventListener("focusin", this._handleAutoAdvanceState);
+    this.el.removeEventListener("focusout", this._handleAutoAdvanceState);
+    document.removeEventListener("visibilitychange", this._handleAutoAdvanceState);
     if (this._indicators) {
       this._indicators.removeEventListener("click", this._handleIndicatorClick);
     }
-    this._scroller.removeEventListener("scroll", this._handleFlatScroll);
-    this.el.removeEventListener("pointerdown", this._handleCarouselTap);
-    this.el.removeEventListener("pointermove", this._handleCarouselDrag);
-    this.el.removeEventListener("pointerup", this._handleCarouselRelease);
-    this.el.removeEventListener("pointercancel", this._handleCarouselRelease);
-    this.el.removeEventListener("click", this._handleCarouselClick);
-    _Carousel._live.delete(this);
-    if (_Carousel._live.size === 0 && _Carousel._resizeListening) {
-      window.removeEventListener("resize", _Carousel._onResize);
-      _Carousel._resizeListening = false;
+    this._scroller.removeEventListener("scroll", this._handleTrackScroll);
+    this._scroller.removeEventListener("pointerdown", this._handleTrackPointerDown);
+    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._resizeObserver?.disconnect();
+    this._resizeObserver = null;
+    if (this._usesWindowResize) {
+      _Carousel._live.delete(this);
+      if (_Carousel._live.size === 0 && _Carousel._resizeListening) {
+        window.removeEventListener("resize", _Carousel._onResize);
+        _Carousel._resizeListening = false;
+      }
     }
   }
   _teardown() {
     this._removeEventHandlers();
+    this._autoAdvances = false;
+    this._syncAutoAdvance();
     if (this._trackRaf !== null) cancelAnimationFrame(this._trackRaf);
     window.clearTimeout(this.scrollingTimeout);
+    window.clearTimeout(this._suppressClickTimeout);
     if (this._ownIndicators) this._indicators?.remove();
     this._unwrapTrack();
     this.images.forEach((el) => {
-      el.style.transform = "";
-      el.style.zIndex = "";
-      el.style.opacity = "";
-      el.style.visibility = "";
+      el.style.removeProperty("--md-comp-carousel-item-parallax");
+      if (this._generatedItemLabels.has(el)) el.removeAttribute("aria-label");
+      if (this._generatedItemDescriptions.has(el)) el.removeAttribute("aria-roledescription");
+      if (this._generatedItemSizes.has(el)) el.removeAttribute("data-carousel-size");
+      const original = this._itemA11yOriginal.get(el);
+      if (original?.ariaHidden === null) el.removeAttribute("aria-hidden");
+      else if (original) el.setAttribute("aria-hidden", original.ariaHidden);
+      if (original?.tabIndex === null) el.removeAttribute("tabindex");
+      else if (original) el.setAttribute("tabindex", original.tabIndex);
     });
-  }
-  _xpos(e) {
-    if ("clientX" in e) return e.clientX;
-    return 0;
-  }
-  _ypos(e) {
-    if ("clientY" in e) return e.clientY;
-    return 0;
-  }
-  _wrap(x) {
-    return x >= this.count ? x % this.count : x < 0 ? this._wrap(this.count + x % this.count) : x;
-  }
-  _scroll(x = 0) {
-    if (!this.el.classList.contains("scrolling")) {
-      this.el.classList.add("scrolling");
-    }
-    window.clearTimeout(this.scrollingTimeout);
-    this.scrollingTimeout = setTimeout(() => {
-      this.el.classList.remove("scrolling");
-    }, this.options.duration);
-    this.offset = typeof x === "number" ? x : this.offset;
-    this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
-    const half = this.count >> 1;
-    const delta = this.offset - this.center * this.dim;
-    const dir = delta < 0 ? 1 : -1;
-    const tween = -dir * delta * 2 / this.dim;
-    const lastCenter = this.center;
-    const numVisibleOffset = 1 / this.options.numVisible;
-    let alignment;
-    let centerTweenedOpacity;
-    if (this.options.fullWidth) {
-      alignment = "translateX(0)";
-      centerTweenedOpacity = 1;
-    } else {
-      alignment = "translateX(" + (this.el.clientWidth - this.itemWidth) / 2 + "px) ";
-      alignment += "translateY(" + (this.el.clientHeight - this.itemHeight) / 2 + "px)";
-      centerTweenedOpacity = 1 - numVisibleOffset * tween;
-    }
-    this._paintIndicators(this.center);
-    if (!this.noWrap || this.center >= 0 && this.center < this.count) {
-      const el = this.images[this._wrap(this.center)];
-      if (el && !el.classList.contains("active")) {
-        this.el.querySelector(".carousel-item.active")?.classList.remove("active");
-        el.classList.add("active");
-      }
-    }
-    for (let i = 1; i <= half; ++i) {
-      let zTranslation;
-      let tweenedOpacity;
-      if (this.options.fullWidth) {
-        zTranslation = this.options.dist;
-        tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
-      } else {
-        zTranslation = this.options.dist * (i * 2 + tween * dir);
-        tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
-      }
-      if (!this.noWrap || this.center + i < this.count) {
-        const el = this.images[this._wrap(this.center + i)];
-        const transformString = `${alignment} translateX(${this.options.shift + (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
-        this._updateItemStyle(el, tweenedOpacity, -i, transformString);
-      }
-      if (this.options.fullWidth) {
-        zTranslation = this.options.dist;
-        tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
-      } else {
-        zTranslation = this.options.dist * (i * 2 - tween * dir);
-        tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
-      }
-      if (!this.noWrap || this.center - i >= 0) {
-        const el = this.images[this._wrap(this.center - i)];
-        const transformString = `${alignment} translateX(${-this.options.shift + (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
-        this._updateItemStyle(el, tweenedOpacity, -i, transformString);
-      }
-    }
-    if (!this.noWrap || this.center >= 0 && this.center < this.count) {
-      const el = this.images[this._wrap(this.center)];
-      const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * this.options.shift * tween}px) translateZ(${this.options.dist * tween}px)`;
-      this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
-    }
-    const currItem = this.images[this._wrap(this.center)];
-    this._syncA11y(this._wrap(this.center));
-    if (lastCenter !== this.center && typeof this.options.onCycleTo === "function") {
-      this.options.onCycleTo.call(this, currItem, this.dragged);
-    }
-    if (typeof this.oneTimeCallback === "function") {
-      this.oneTimeCallback.call(this, currItem, this.dragged);
-      this.oneTimeCallback = null;
+    if (this._generatedContainerRole) this.el.removeAttribute("role");
+    if (this._generatedContainerLabel) this.el.removeAttribute("aria-label");
+    if (this._generatedContainerDescription) this.el.removeAttribute("aria-roledescription");
+    if (this._generatedFixedHeight) this.el.classList.remove("fixed-height");
+    if (this.options.height !== null) {
+      if (this._authoredInlineHeight === null) this.el.style.removeProperty("--carousel-height");
+      else this.el.style.setProperty("--carousel-height", this._authoredInlineHeight);
+    }
+    if (this._generatedWideLayout) {
+      this.el.classList.remove(
+        "multi-wide",
+        "multi-large",
+        "multi-extra-large",
+        "full-screen-horizontal"
+      );
     }
   }
-  _updateItemStyle(el, opacity, zIndex, transform) {
-    if (!el) return;
-    el.style.transform = transform;
-    el.style.zIndex = zIndex.toString();
-    el.style.opacity = opacity.toString();
-    el.style.visibility = "visible";
+  /** Start or stop the timer to match the current pause state. */
+  _syncAutoAdvance() {
+    const run = this._autoAdvances && !this._autoPaused && !this._hovered && !this._focused && !document.hidden;
+    if (run && this._autoAdvanceTimer === null) {
+      this._autoAdvanceTimer = setTimeout(
+        this._tick,
+        this.options.duration + this.options.interval
+      );
+    } else if (!run && this._autoAdvanceTimer !== null) {
+      clearTimeout(this._autoAdvanceTimer);
+      this._autoAdvanceTimer = null;
+    }
   }
   _paintIndicators(center) {
     if (!this.showIndicators || !this._indicators) return;
@@ -2877,18 +3427,12 @@ var _Carousel = class _Carousel extends Component {
       else el.removeAttribute("aria-current");
     });
   }
-  _syncA11y(index) {
-    this.images.forEach((el, i) => {
-      if (i === index) el.removeAttribute("aria-hidden");
-      else el.setAttribute("aria-hidden", "true");
-    });
-  }
   _syncActive(index, dragged) {
     const prev = this.center;
     this.center = index;
     this.images.forEach((el, i) => el.classList.toggle("active", i === index));
     this._paintIndicators(index);
-    this._syncA11y(index);
+    this._syncLayoutRoles(index);
     const curr = this.images[index];
     if (prev !== index && typeof this.options.onCycleTo === "function") {
       this.options.onCycleTo.call(this, curr, dragged);
@@ -2898,6 +3442,81 @@ var _Carousel = class _Carousel extends Component {
       this.oneTimeCallback = null;
     }
   }
+  _syncLayoutRoles(index) {
+    const setSize = (item, size) => {
+      if (this._authoredItemSizes.has(item)) return;
+      item.setAttribute("data-carousel-size", size);
+      this._generatedItemSizes.add(item);
+    };
+    this.images.forEach((item) => setSize(item, "large"));
+    if (this.el.classList.contains("flat") || this.el.classList.contains("uncontained") || this.el.classList.contains("full-screen") && this._vertical) {
+      return;
+    }
+    if (this.el.classList.contains("hero") || this.el.classList.contains("full-screen-horizontal")) {
+      const next = this.images[index + 1];
+      if (next) setSize(next, "small");
+      if (this.el.classList.contains("center-aligned")) {
+        const previous = this.images[index - 1];
+        if (previous) setSize(previous, "small");
+      }
+      return;
+    }
+    const width = this.el.clientWidth;
+    const desiredLargeCount = width >= 1600 ? 4 : width >= 1200 ? 3 : width >= 600 ? 2 : 1;
+    const largeCount = Math.min(desiredLargeCount, Math.max(1, this.count - 2));
+    this.el.classList.remove("multi-wide", "multi-large", "multi-extra-large");
+    if (largeCount === 2) this.el.classList.add("multi-wide");
+    else if (largeCount === 3) this.el.classList.add("multi-large");
+    else if (largeCount >= 4) this.el.classList.add("multi-extra-large");
+    this._generatedWideLayout = this._generatedWideLayout || largeCount > 1;
+    for (let offset = 1; offset < largeCount; offset += 1) {
+      const item = this.images[index + offset];
+      if (item) setSize(item, "large");
+    }
+    const medium = this.images[index + largeCount];
+    const small = this.images[index + largeCount + 1];
+    if (medium) setSize(medium, "medium");
+    if (small) setSize(small, "small");
+  }
+  _syncAdaptiveMode() {
+    if (!this.el.classList.contains("full-screen")) return;
+    const landscape = window.matchMedia("(orientation: landscape)").matches;
+    const horizontal = this.el.clientWidth >= 840 || landscape;
+    const wasVertical = this._vertical;
+    this._vertical = !horizontal;
+    this.el.classList.toggle("full-screen-horizontal", horizontal);
+    this._generatedWideLayout = this._generatedWideLayout || horizontal;
+    if (this._started && wasVertical !== this._vertical) {
+      this._scroller.scrollTo({ left: 0, top: 0, behavior: "auto" });
+    }
+  }
+  _focusItem(index) {
+    const item = this.images[index];
+    if (!item) return;
+    const focusable = item.matches(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    ) ? item : item.querySelector(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    (focusable ?? item).focus({ preventScroll: true });
+  }
+  _updateParallax() {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      this.images.forEach(
+        (item) => item.style.setProperty("--md-comp-carousel-item-parallax", "0px")
+      );
+      return;
+    }
+    const scrollerRect = this._scroller.getBoundingClientRect();
+    const viewportCenter = this._vertical ? scrollerRect.top + scrollerRect.height / 2 : scrollerRect.left + scrollerRect.width / 2;
+    const viewportSize = Math.max(1, this._vertical ? scrollerRect.height : scrollerRect.width);
+    this.images.forEach((item) => {
+      const rect = item.getBoundingClientRect();
+      const itemCenter = this._vertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+      const progress = Math.max(-1, Math.min(1, (itemCenter - viewportCenter) / viewportSize));
+      item.style.setProperty("--md-comp-carousel-item-parallax", `${progress * -24}px`);
+    });
+  }
   _wrapTrack() {
     const track = document.createElement("div");
     track.className = "carousel-track";
@@ -2912,11 +3531,16 @@ var _Carousel = class _Carousel extends Component {
     this._trackEl = null;
   }
   _nearestIndex() {
-    const left = this._scroller.scrollLeft;
+    const centered = this.el.classList.contains("center-aligned");
+    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;
     let bestDist = Infinity;
     this.images.forEach((el, i) => {
-      const dist = Math.abs(el.offsetLeft - left);
+      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) {
         bestDist = dist;
         best = i;
@@ -2927,13 +3551,24 @@ var _Carousel = class _Carousel extends Component {
   _scrollToIndex(n, smooth = true) {
     const el = this.images[n];
     if (!el) return;
-    const left = el.offsetLeft;
-    if (Math.abs(this._scroller.scrollLeft - left) < 1) {
+    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 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, behavior: smooth ? "smooth" : "auto" });
+    this._scroller.scrollTo({
+      left: this._vertical ? 0 : left,
+      top: this._vertical ? top : 0,
+      behavior: smooth ? "smooth" : "auto"
+    });
     const done = () => {
       this._ignoreScroll = false;
     };
@@ -2941,63 +3576,38 @@ var _Carousel = class _Carousel extends Component {
     window.setTimeout(done, this.options.duration + 350);
   }
   _cycleTo(n, callback = null) {
-    if (this._flat) {
-      if (typeof callback === "function") this.oneTimeCallback = callback;
-      this._syncActive(n, false);
-      this._scrollToIndex(n);
-      return;
-    }
-    let diff = this.center % this.count - n;
-    if (!this.noWrap) {
-      if (diff < 0) {
-        if (Math.abs(diff + this.count) < Math.abs(diff)) {
-          diff += this.count;
-        }
-      } else if (diff > 0) {
-        if (Math.abs(diff - this.count) < diff) {
-          diff -= this.count;
-        }
-      }
-    }
-    this.target = this.dim * Math.round(this.offset / this.dim);
-    if (diff < 0) {
-      this.target += this.dim * Math.abs(diff);
-    } else if (diff > 0) {
-      this.target -= this.dim * diff;
-    }
-    if (typeof callback === "function") {
-      this.oneTimeCallback = callback;
-    }
-    if (this.offset !== this.target) {
-      this.amplitude = this.target - this.offset;
-      this.timestamp = Date.now();
-      requestAnimationFrame(this._autoScroll);
-    }
+    if (typeof callback === "function") this.oneTimeCallback = callback;
+    this._syncActive(n, false);
+    this._scrollToIndex(n);
+  }
+  /**
+   * Stop auto-advance until start() is called. Without an `interval` there is
+   * nothing to stop and this does nothing.
+   */
+  pause() {
+    this._autoPaused = true;
+    this._syncAutoAdvance();
+  }
+  /** Resume auto-advance after pause(). */
+  start() {
+    this._autoPaused = false;
+    this._syncAutoAdvance();
   }
   next(n = 1) {
     if (n === void 0 || isNaN(n)) n = 1;
-    let index = this.center + n;
-    if (index >= this.count || index < 0) {
-      if (this.noWrap) return;
-      index = this._wrap(index);
-    }
+    const index = this.center + n;
+    if (index >= this.count || index < 0) return;
     this._cycleTo(index);
   }
   prev(n = 1) {
     if (n === void 0 || isNaN(n)) n = 1;
-    let index = this.center - n;
-    if (index >= this.count || index < 0) {
-      if (this.noWrap) return;
-      index = this._wrap(index);
-    }
+    const index = this.center - n;
+    if (index >= this.count || index < 0) return;
     this._cycleTo(index);
   }
   set(n, callback) {
     if (n === void 0 || isNaN(n)) n = 0;
-    if (n > this.count || n < 0) {
-      if (this.noWrap) return;
-      n = this._wrap(n);
-    }
+    if (n >= this.count || n < 0) return;
     this._cycleTo(n, callback);
   }
 };
@@ -3009,7 +3619,7 @@ _Carousel._onResize = Utils.throttle(() => {
 var Carousel = _Carousel;
 
 // src/ts/components/characterCounter.ts
-var _defaults8 = Object.freeze({});
+var _defaults11 = Object.freeze({});
 var CharacterCounter = class _CharacterCounter extends Component {
   constructor(el, options) {
     super(el, {}, _CharacterCounter);
@@ -3034,7 +3644,7 @@ var CharacterCounter = class _CharacterCounter extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults8;
+    return _defaults11;
   }
   /**
    * Initializes instances of CharacterCounter.
@@ -3063,6 +3673,8 @@ var CharacterCounter = class _CharacterCounter extends Component {
   _setupCounter() {
     this.counterEl = document.createElement("span");
     this.counterEl.classList.add("character-counter");
+    this.counterEl.setAttribute("aria-live", "polite");
+    this.counterEl.setAttribute("aria-atomic", "true");
     this.counterEl.style.float = "right";
     this.counterEl.style.fontSize = "12px";
     this.counterEl.style.height = "1";
@@ -3084,7 +3696,7 @@ var CharacterCounter = class _CharacterCounter extends Component {
 };
 
 // src/ts/components/select.ts
-var _defaults9 = {
+var _defaults12 = {
   classes: "",
   menuOptions: {}
 };
@@ -3133,7 +3745,7 @@ var FormSelect = class _FormSelect extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults9;
+    return _defaults12;
   }
   /**
    * Initializes instances of FormSelect.
@@ -3264,7 +3876,7 @@ var FormSelect = class _FormSelect extends Component {
   _buildInput() {
     this.input = document.createElement("input");
     this.input.id = "select-input-" + Utils.guid();
-    this.input.classList.add("menu-trigger");
+    this.input.classList.add("menu-trigger", "no-autoinit");
     this.input.type = "text";
     this.input.readOnly = true;
     this.input.setAttribute("data-target", this.menuEl.id);
@@ -3304,10 +3916,8 @@ var FormSelect = class _FormSelect extends Component {
     menuOptions.onOpenEnd = () => {
       const selectedOption = this.menuEl.querySelector(".selected");
       if (selectedOption) {
-        Utils.keyDown = true;
         this.menu.focusedIndex = [...selectedOption.parentNode.children].indexOf(selectedOption);
         this.menu._focusFocusedItem();
-        Utils.keyDown = false;
         if (this.menu.isScrollable) {
           let scrollOffset = selectedOption.getBoundingClientRect().top - this.menuEl.getBoundingClientRect().top;
           scrollOffset -= this.menuEl.clientHeight / 2;
@@ -3507,7 +4117,7 @@ var FormSelect = class _FormSelect extends Component {
 };
 
 // src/ts/plugins/dockedDisplayPlugin.ts
-var _defaults10 = {
+var _defaults13 = {
   margin: 5,
   transition: 10,
   duration: 250,
@@ -3556,7 +4166,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     };
     this.el = el;
     this.options = {
-      ..._defaults10,
+      ..._defaults13,
       ...options
     };
     this.container = document.createElement("div");
@@ -3577,7 +4187,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
 };
 
 // src/ts/components/datepicker.ts
-var _defaults11 = {
+var _defaults14 = {
   // the default output format for the input field value
   format: "mmm dd, yyyy",
   // Used to create date object from current input string
@@ -3702,7 +4312,7 @@ var _Datepicker = class _Datepicker extends Component {
       if (this.options.onInputInteraction) this.options.onInputInteraction.call(this);
     };
     this._handleInputKeydown = (e) => {
-      if (Utils.keys.ENTER.includes(e.key)) {
+      if (e.key === Utils.keys.ENTER) {
         e.preventDefault();
         this._batchDraws(() => {
           this.setDateFromInput(e.target);
@@ -3842,7 +4452,7 @@ var _Datepicker = class _Datepicker extends Component {
     }
   }
   static get defaults() {
-    return _defaults11;
+    return _defaults14;
   }
   /**
    * Initializes instances of Datepicker.
@@ -4425,11 +5035,11 @@ var _Datepicker = class _Datepicker extends Component {
     const monthSelect = this.calendarEl.querySelector(".orig-select-month");
     FormSelect.init(yearSelect, {
       classes: "select-year",
-      menuOptions: { container: document.body, constrainWidth: false }
+      menuOptions: { container: Utils.portalRoot(this.el), constrainWidth: false }
     });
     FormSelect.init(monthSelect, {
       classes: "select-month",
-      menuOptions: { container: document.body, constrainWidth: false }
+      menuOptions: { container: Utils.portalRoot(this.el), constrainWidth: false }
     });
     yearSelect.addEventListener("change", this._handleYearChange);
     monthSelect.addEventListener("change", this._handleMonthChange);
@@ -4560,7 +5170,7 @@ _Datepicker._template = `
 var Datepicker = _Datepicker;
 
 // src/ts/components/lightbox.ts
-var _defaults12 = {
+var _defaults15 = {
   inDuration: 275,
   outDuration: 200,
   onOpenStart: null,
@@ -4575,7 +5185,7 @@ var Lightbox = class _Lightbox extends Component {
       this._handleLightboxToggle();
     };
     this._handleLightboxKeypress = (e) => {
-      if (Utils.keys.ENTER.includes(e.key)) {
+      if (e.key === Utils.keys.ENTER) {
         this._handleLightboxToggle();
       }
     };
@@ -4590,7 +5200,7 @@ var Lightbox = class _Lightbox extends Component {
       if (this.overlayActive) this.close();
     };
     this._handleWindowEscape = (e) => {
-      if (Utils.keys.ESC.includes(e.key) && this.doneAnimating && this.overlayActive) this.close();
+      if (e.key === Utils.keys.ESC && this.doneAnimating && this.overlayActive) this.close();
     };
     /**
      * Open lightbox.
@@ -4679,7 +5289,7 @@ var Lightbox = class _Lightbox extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults12;
+    return _defaults15;
   }
   /**
    * Initializes instances of Lightbox.
@@ -4709,13 +5319,13 @@ var Lightbox = class _Lightbox extends Component {
   _makeAncestorsOverflowVisible() {
     this._changedAncestorList = [];
     let ancestor = this.placeholder.parentNode;
-    while (ancestor !== null && ancestor !== document) {
+    while (ancestor !== null && ancestor !== void 0 && ancestor !== document) {
       const curr = ancestor;
-      if (curr.style.overflow !== "visible") {
+      if (curr.style && curr.style.overflow !== "visible") {
+        this._changedAncestorList.push([curr, curr.style.overflow]);
         curr.style.overflow = "visible";
-        this._changedAncestorList.push(curr);
       }
-      ancestor = ancestor.parentNode;
+      ancestor = ancestor.parentNode ?? ancestor.host;
     }
   }
   _offset(el) {
@@ -4779,7 +5389,7 @@ var Lightbox = class _Lightbox extends Component {
       if (this.originInlineStyles) this.el.setAttribute("style", this.originInlineStyles);
       this.el.classList.remove("active");
       this.doneAnimating = true;
-      this._changedAncestorList.forEach((anchestor) => anchestor.style.overflow = "");
+      this._changedAncestorList.forEach(([ancestor, overflow]) => ancestor.style.overflow = overflow);
       if (typeof this.options.onCloseEnd === "function")
         this.options.onCloseEnd.call(this, this.el);
     }, duration);
@@ -4789,7 +5399,7 @@ var Lightbox = class _Lightbox extends Component {
     this._photoCaption = document.createElement("div");
     this._photoCaption.classList.add("lightbox-caption");
     this._photoCaption.innerText = this.caption;
-    document.body.append(this._photoCaption);
+    Utils.portalRoot(this.el).append(this._photoCaption);
     this._photoCaption.style.display = "inline";
     this._photoCaption.style.transition = "none";
     this._photoCaption.style.opacity = "0";
@@ -4843,37 +5453,9 @@ var Lightbox = class _Lightbox extends Component {
   }
 };
 
-// src/ts/components/parallax.ts
-var _defaults13 = {};
-var Parallax = class _Parallax extends Component {
-  constructor(el, options) {
-    super(el, options, _Parallax);
-    this.el["Expressive_Parallax"] = this;
-    this.options = {
-      ..._Parallax.defaults,
-      ...options
-    };
-    if (!this.el.querySelector("img, video")) {
-      console.error("Parallax: no <img> or <video> to move inside the .parallax element");
-    }
-  }
-  static get defaults() {
-    return _defaults13;
-  }
-  static init(els, options = {}) {
-    return super.init(els, options, _Parallax);
-  }
-  static getInstance(el) {
-    return el["Expressive_Parallax"];
-  }
-  destroy() {
-    this.el["Expressive_Parallax"] = void 0;
-  }
-};
-
 // src/ts/components/scrollspy.ts
 var _defaultGetActiveElement = (id) => `a[href="#${id}"]`;
-var _defaults14 = {
+var _defaults16 = {
   scrollOffset: 200,
   activeClass: "active",
   getActiveElement: _defaultGetActiveElement,
@@ -4896,7 +5478,7 @@ var _ScrollSpy = class _ScrollSpy extends Component {
     _ScrollSpy._observer?.observe(this.el);
   }
   static get defaults() {
-    return _defaults14;
+    return _defaults16;
   }
   static init(els, options = {}) {
     return super.init(els, options, _ScrollSpy);
@@ -5017,8 +5599,8 @@ _ScrollSpy._onIntersect = (entries) => {
 };
 var ScrollSpy = _ScrollSpy;
 
-// src/ts/components/sidenav.ts
-var _defaults15 = {
+// src/ts/components/navigationDrawer.ts
+var _defaults17 = {
   edge: "left",
   draggable: true,
   dragTargetWidth: "10px",
@@ -5027,17 +5609,17 @@ var _defaults15 = {
   onCloseStart: null,
   onCloseEnd: null
 };
-var LARGE_UP = "(width >= 993px)";
-var _Sidenav = class _Sidenav extends Component {
+var EXPANDED_UP = "(width >= 840px)";
+var _NavigationDrawer = class _NavigationDrawer extends Component {
   constructor(el, options) {
-    super(el, options, _Sidenav);
+    super(el, options, _NavigationDrawer);
     /**
      * Opens the overlay drawer. No-op while the sidenav is docked
-     * (sidenav-fixed at the large breakpoint).
+     * (navigation-drawer-fixed at the Expanded breakpoint).
      */
     this.open = () => {
       if (this._isCurrentlyFixed() || this.isOpen || !this._dialog) return;
-      _Sidenav._sidenavs.forEach((other) => {
+      _NavigationDrawer._sidenavs.forEach((other) => {
         if (other !== this && other.isOpen) other.close();
       });
       if (typeof this.options.onOpenStart === "function") {
@@ -5089,7 +5671,7 @@ var _Sidenav = class _Sidenav extends Component {
     this._handleCloseTriggerClick = (e) => {
       const target = e.target;
       if (!(target instanceof Element)) return;
-      const closeTrigger = target.closest(".sidenav-close");
+      const closeTrigger = target.closest(".sidenav-close, .navigation-drawer-close");
       if (closeTrigger && !this._isCurrentlyFixed()) {
         this.close();
       }
@@ -5133,14 +5715,14 @@ var _Sidenav = class _Sidenav extends Component {
       this.isDragged = false;
       this._verticallyScrolling = false;
     };
-    this.el["Expressive_Sidenav"] = this;
+    this.el["Expressive_NavigationDrawer"] = this;
     this.options = {
-      ..._Sidenav.defaults,
+      ..._NavigationDrawer.defaults,
       ...options
     };
     this.id = this.el.id;
     this.isOpen = false;
-    this.isFixed = this.el.classList.contains("sidenav-fixed");
+    this.isFixed = this.el.classList.contains("navigation-drawer-fixed") || this.el.classList.contains("sidenav-fixed");
     this.isDragged = false;
     this.dragTarget = null;
     this._dialog = null;
@@ -5152,27 +5734,27 @@ var _Sidenav = class _Sidenav extends Component {
     this._width = 0;
     this._initialScrollTop = 0;
     this._verticallyScrolling = false;
-    this._mql = window.matchMedia(LARGE_UP);
+    this._mql = window.matchMedia(EXPANDED_UP);
     this._setupDialog();
     this._createDragTarget();
     this._setupClasses();
     this._setupEventHandlers();
     this._syncTriggers();
-    _Sidenav._sidenavs.push(this);
+    _NavigationDrawer._sidenavs.push(this);
   }
   static get defaults() {
-    return _defaults15;
+    return _defaults17;
   }
   /**
-   * Initializes instances of Sidenav.
+   * Initializes instances of NavigationDrawer.
    * @param els HTML elements.
    * @param options Component options.
    */
   static init(els, options = {}) {
-    return super.init(els, options, _Sidenav);
+    return super.init(els, options, _NavigationDrawer);
   }
   static getInstance(el) {
-    return el["Expressive_Sidenav"];
+    return el["Expressive_NavigationDrawer"];
   }
   destroy() {
     this._removeEventHandlers();
@@ -5185,10 +5767,10 @@ var _Sidenav = class _Sidenav extends Component {
     this._clearShift();
     this._unwrapDialog();
     this._removeDragTarget();
-    this.el["Expressive_Sidenav"] = void 0;
-    const index = _Sidenav._sidenavs.indexOf(this);
+    this.el["Expressive_NavigationDrawer"] = void 0;
+    const index = _NavigationDrawer._sidenavs.indexOf(this);
     if (index >= 0) {
-      _Sidenav._sidenavs.splice(index, 1);
+      _NavigationDrawer._sidenavs.splice(index, 1);
     }
   }
   _beginClose() {
@@ -5219,6 +5801,11 @@ var _Sidenav = class _Sidenav extends Component {
     }
     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;
@@ -5236,7 +5823,7 @@ var _Sidenav = class _Sidenav extends Component {
     dragTarget.classList.add("drag-target");
     dragTarget.style.width = this.options.dragTargetWidth;
     if (this.isFixed) dragTarget.dataset.fixed = "";
-    document.body.appendChild(dragTarget);
+    Utils.portalRoot(this.el).appendChild(dragTarget);
     this.dragTarget = dragTarget;
   }
   _removeDragTarget() {
@@ -5251,8 +5838,8 @@ var _Sidenav = class _Sidenav extends Component {
     }
   }
   _setupEventHandlers() {
-    if (_Sidenav._sidenavs.length === 0) {
-      document.body.addEventListener("click", _Sidenav._handleTriggerClick);
+    if (_NavigationDrawer._sidenavs.length === 0) {
+      document.body.addEventListener("click", _NavigationDrawer._handleTriggerClick);
     }
     const passive = { passive: true };
     this.dragTarget?.addEventListener("touchmove", this._handleDragTargetDrag, passive);
@@ -5264,8 +5851,8 @@ var _Sidenav = class _Sidenav extends Component {
     this._mql.addEventListener("change", this._onBreakpointChange);
   }
   _removeEventHandlers() {
-    if (_Sidenav._sidenavs.length === 1) {
-      document.body.removeEventListener("click", _Sidenav._handleTriggerClick);
+    if (_NavigationDrawer._sidenavs.length === 1) {
+      document.body.removeEventListener("click", _NavigationDrawer._handleTriggerClick);
     }
     this.dragTarget?.removeEventListener("touchmove", this._handleDragTargetDrag);
     this.dragTarget?.removeEventListener("touchend", this._handleDragTargetRelease);
@@ -5278,10 +5865,10 @@ var _Sidenav = class _Sidenav extends Component {
   static _handleTriggerClick(e) {
     const target = e.target;
     if (!(target instanceof Element)) return;
-    const trigger = target.closest(".sidenav-trigger");
+    const trigger = target.closest(".sidenav-trigger, .navigation-drawer-trigger");
     if (!trigger || !(trigger instanceof HTMLElement)) return;
     const sidenavId = Utils.getIdFromTrigger(trigger);
-    const sidenavInstance = document.getElementById(sidenavId)?.["Expressive_Sidenav"];
+    const sidenavInstance = Utils.getElementById(trigger, sidenavId)?.["Expressive_NavigationDrawer"];
     if (sidenavInstance) {
       sidenavInstance.open();
       e.preventDefault();
@@ -5335,7 +5922,7 @@ var _Sidenav = class _Sidenav extends Component {
   }
   _syncTriggers() {
     if (!this.id) return;
-    document.querySelectorAll(".sidenav-trigger").forEach((trigger) => {
+    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");
@@ -5343,17 +5930,17 @@ var _Sidenav = class _Sidenav extends Component {
     });
   }
 };
-_Sidenav._sidenavs = [];
-var Sidenav = _Sidenav;
+_NavigationDrawer._sidenavs = [];
+var NavigationDrawer = _NavigationDrawer;
 
 // src/ts/components/navigationRail.ts
-var _defaults16 = {
+var _defaults18 = {
   onOpenStart: null,
   onOpenEnd: null,
   onCloseStart: null,
   onCloseEnd: null
 };
-var COMPACT = "(width < 601px)";
+var COMPACT = "(width < 600px)";
 var NavigationRail = class _NavigationRail extends Component {
   constructor(el, options) {
     super(el, options, _NavigationRail);
@@ -5423,7 +6010,7 @@ var NavigationRail = class _NavigationRail extends Component {
     document.addEventListener("keydown", this._onKeyDown);
   }
   static get defaults() {
-    return _defaults16;
+    return _defaults18;
   }
   static init(els, options = {}) {
     return super.init(els, options, _NavigationRail);
@@ -5452,309 +6039,8 @@ var NavigationRail = class _NavigationRail extends Component {
   }
 };
 
-// src/ts/components/slider.ts
-var _defaults17 = {
-  indicators: true,
-  height: 400,
-  duration: 500,
-  interval: 6e3,
-  pauseOnFocus: true,
-  pauseOnHover: true,
-  indicatorLabelFunc: null
-  // Function which will generate a label for the indicators (ARIA)
-};
-var Slider = class _Slider extends Component {
-  constructor(el, options) {
-    super(el, options, _Slider);
-    // Nobody is watching a backgrounded tab. Browsers clamp the timer rather
-    // than stopping it, so without this the slider keeps cycling slides - and
-    // running their transitions - out of sight.
-    this._handleVisibilityChange = () => {
-      if (document.hidden) {
-        if (this.interval != null) this._pause(true);
-      } else if (this.eventPause && !(this.options.pauseOnHover && this._hovered) && !(this.options.pauseOnFocus && this._focused)) {
-        this.start();
-      }
-    };
-    this._handleIndicatorClick = (e) => {
-      const el = e.target.parentElement;
-      const currIndex = [...el.parentNode.children].indexOf(el);
-      this._focusCurrent = true;
-      this.set(currIndex);
-    };
-    this._handleAutoPauseHover = () => {
-      this._hovered = true;
-      if (this.interval != null) {
-        this._pause(true);
-      }
-    };
-    this._handleAutoPauseFocus = () => {
-      this._focused = true;
-      if (this.interval != null) {
-        this._pause(true);
-      }
-    };
-    this._handleAutoStartHover = () => {
-      this._hovered = false;
-      if (!(this.options.pauseOnFocus && this._focused) && this.eventPause) {
-        this.start();
-      }
-    };
-    this._handleAutoStartFocus = () => {
-      this._focused = false;
-      if (!(this.options.pauseOnHover && this._hovered) && this.eventPause) {
-        this.start();
-      }
-    };
-    this._handleInterval = () => {
-      const activeElem = this._slider.querySelector(".active");
-      let newActiveIndex = [...activeElem.parentNode.children].indexOf(activeElem);
-      if (this._slides.length === newActiveIndex + 1)
-        newActiveIndex = 0;
-      else newActiveIndex += 1;
-      this.set(newActiveIndex);
-    };
-    /**
-     * Pause slider autoslide.
-     */
-    this.pause = () => {
-      this._pause(false);
-    };
-    /**
-     * Start slider autoslide.
-     */
-    this.start = () => {
-      clearInterval(this.interval);
-      this.interval = setInterval(
-        this._handleInterval,
-        this.options.duration + this.options.interval
-      );
-      this.eventPause = false;
-    };
-    /**
-     * Move to next slider.
-     */
-    this.next = () => {
-      let newIndex = this.activeIndex + 1;
-      if (newIndex >= this._slides.length) newIndex = 0;
-      else if (newIndex < 0) newIndex = this._slides.length - 1;
-      this.set(newIndex);
-    };
-    /**
-     * Move to prev slider.
-     */
-    this.prev = () => {
-      let newIndex = this.activeIndex - 1;
-      if (newIndex >= this._slides.length) newIndex = 0;
-      else if (newIndex < 0) newIndex = this._slides.length - 1;
-      this.set(newIndex);
-    };
-    this.el["Expressive_Slider"] = this;
-    this.options = {
-      ..._Slider.defaults,
-      ...options
-    };
-    this.interval = null;
-    this.eventPause = false;
-    this._hovered = false;
-    this._focused = false;
-    this._focusCurrent = false;
-    this._slider = this.el.querySelector(".slides");
-    this._slides = Array.from(this._slider.querySelectorAll("li"));
-    this.activeIndex = this._slides.findIndex((li) => li.classList.contains("active"));
-    if (this.activeIndex !== -1) {
-      this._activeSlide = this._slides[this.activeIndex];
-    }
-    this._setSliderHeight();
-    if (this._slider.hasAttribute("id")) this._sliderId = this._slider.getAttribute("id");
-    else {
-      this._sliderId = "slider-" + Utils.guid();
-      this._slider.setAttribute("id", this._sliderId);
-    }
-    const placeholderBase64 = "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
-    this._slides.forEach((slide) => {
-      const img = slide.querySelector("img");
-      if (img) {
-        if (img.src !== placeholderBase64) {
-          img.style.backgroundImage = "url(" + img.src + ")";
-          img.src = placeholderBase64;
-        }
-      }
-      if (!slide.hasAttribute("tabindex")) slide.setAttribute("tabindex", "-1");
-      slide.style.visibility = "hidden";
-    });
-    this._setupIndicators();
-    if (this._activeSlide) {
-      this._activeSlide.style.display = "block";
-      this._activeSlide.style.visibility = "visible";
-    } else {
-      this.activeIndex = 0;
-      this._slides[0].classList.add("active");
-      this._slides[0].style.visibility = "visible";
-      this._activeSlide = this._slides[0];
-      this._animateSlide(this._slides[0], true);
-      if (this.options.indicators) {
-        this._indicators[this.activeIndex].children[0].classList.add("active");
-      }
-    }
-    this._setupEventHandlers();
-    this.start();
-  }
-  static get defaults() {
-    return _defaults17;
-  }
-  /**
-   * Initializes instances of Slider.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _Slider);
-  }
-  static getInstance(el) {
-    return el["Expressive_Slider"];
-  }
-  destroy() {
-    this.pause();
-    this._removeIndicators();
-    this._removeEventHandlers();
-    this.el["Expressive_Slider"] = void 0;
-  }
-  _setupEventHandlers() {
-    if (this.options.pauseOnFocus) {
-      this.el.addEventListener("focusin", this._handleAutoPauseFocus);
-      this.el.addEventListener("focusout", this._handleAutoStartFocus);
-    }
-    if (this.options.pauseOnHover) {
-      this.el.addEventListener("mouseenter", this._handleAutoPauseHover);
-      this.el.addEventListener("mouseleave", this._handleAutoStartHover);
-    }
-    if (this.options.indicators) {
-      this._indicators.forEach((el) => {
-        el.addEventListener("click", this._handleIndicatorClick);
-      });
-    }
-    document.addEventListener("visibilitychange", this._handleVisibilityChange);
-  }
-  _removeEventHandlers() {
-    if (this.options.pauseOnFocus) {
-      this.el.removeEventListener("focusin", this._handleAutoPauseFocus);
-      this.el.removeEventListener("focusout", this._handleAutoStartFocus);
-    }
-    if (this.options.pauseOnHover) {
-      this.el.removeEventListener("mouseenter", this._handleAutoPauseHover);
-      this.el.removeEventListener("mouseleave", this._handleAutoStartHover);
-    }
-    if (this.options.indicators) {
-      this._indicators.forEach((el) => {
-        el.removeEventListener("click", this._handleIndicatorClick);
-      });
-    }
-    document.removeEventListener("visibilitychange", this._handleVisibilityChange);
-  }
-  _animateSlide(slide, isDirectionIn) {
-    let dx = 0, dy = 0;
-    slide.style.opacity = isDirectionIn ? "0" : "1";
-    setTimeout(() => {
-      slide.style.transition = `opacity ${this.options.duration}ms ease`;
-      slide.style.opacity = isDirectionIn ? "1" : "0";
-    }, 1);
-    const caption = slide.querySelector(".caption");
-    if (!caption) return;
-    if (caption.classList.contains("center-align")) dy = -100;
-    else if (caption.classList.contains("right-align")) dx = 100;
-    else if (caption.classList.contains("left-align")) dx = -100;
-    caption.style.opacity = isDirectionIn ? "0" : "1";
-    caption.style.transform = isDirectionIn ? `translate(${dx}px, ${dy}px)` : `translate(0, 0)`;
-    setTimeout(() => {
-      caption.style.transition = `opacity ${this.options.duration}ms ease, transform ${this.options.duration}ms ease`;
-      caption.style.opacity = isDirectionIn ? "1" : "0";
-      caption.style.transform = isDirectionIn ? `translate(0, 0)` : `translate(${dx}px, ${dy}px)`;
-    }, this.options.duration);
-  }
-  _setSliderHeight() {
-    if (!this.el.classList.contains("fullscreen")) {
-      if (this.options.indicators) {
-        this.el.style.height = this.options.height + 40 + "px";
-      } else {
-        this.el.style.height = this.options.height + "px";
-      }
-      this._slider.style.height = this.options.height + "px";
-    }
-  }
-  _setupIndicators() {
-    if (this.options.indicators) {
-      const ul = document.createElement("ul");
-      ul.classList.add("indicators");
-      const arrLi = [];
-      this._slides.forEach((el, i) => {
-        const label = this.options.indicatorLabelFunc ? this.options.indicatorLabelFunc.call(this, i + 1, i === 0) : `${i + 1}`;
-        const li = document.createElement("li");
-        li.classList.add("indicator-item");
-        const button = document.createElement("button");
-        button.type = "button";
-        button.classList.add("indicator-item-btn");
-        button.setAttribute("aria-label", label);
-        button.setAttribute("aria-controls", this._sliderId);
-        li.appendChild(button);
-        arrLi.push(li);
-        ul.append(li);
-      });
-      this.el.append(ul);
-      this._indicators = arrLi;
-    }
-  }
-  _removeIndicators() {
-    this.el.querySelector("ul.indicators").remove();
-  }
-  set(index) {
-    if (index >= this._slides.length) index = 0;
-    else if (index < 0) index = this._slides.length - 1;
-    if (this.activeIndex === index) return;
-    this._activeSlide = this._slides[this.activeIndex];
-    const _caption = this._activeSlide.querySelector(".caption");
-    this._activeSlide.classList.remove("active");
-    this._slides.forEach((slide) => slide.style.visibility = "visible");
-    this._activeSlide.style.opacity = "0";
-    setTimeout(() => {
-      this._slides.forEach((slide) => {
-        if (slide.classList.contains("active")) return;
-        slide.style.opacity = "0";
-        slide.style.transform = "translate(0, 0)";
-        slide.style.visibility = "hidden";
-      });
-    }, this.options.duration);
-    if (_caption) _caption.style.opacity = "0";
-    if (this.options.indicators) {
-      const activeIndicator = this._indicators[this.activeIndex].children[0];
-      const nextIndicator = this._indicators[index].children[0];
-      activeIndicator.classList.remove("active");
-      nextIndicator.classList.add("active");
-      if (typeof this.options.indicatorLabelFunc === "function") {
-        activeIndicator.ariaLabel = this.options.indicatorLabelFunc.call(
-          this,
-          this.activeIndex,
-          false
-        );
-        nextIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, index, true);
-      }
-    }
-    this._animateSlide(this._slides[index], true);
-    this._slides[index].classList.add("active");
-    this.activeIndex = index;
-    if (this.interval != null) {
-      this.start();
-    }
-  }
-  _pause(fromEvent) {
-    clearInterval(this.interval);
-    this.eventPause = fromEvent;
-    this.interval = null;
-  }
-};
-
 // src/ts/components/tabs.ts
-var _defaults18 = {
+var _defaults19 = {
   duration: 300,
   onShow: null,
   swipeable: false,
@@ -5783,12 +6069,10 @@ var Tabs = class _Tabs extends Component {
         return;
       }
       if (tabLink.hasAttribute("target")) return;
-      this._activeTabLink.classList.remove("active");
       const _oldContent = this._content;
-      this._activeTabLink = tabLink;
       if (tabLink.hash) this._content = document.querySelector(tabLink.hash);
       this._tabLinks = this._queryTabLinks();
-      this._activeTabLink.classList.add("active");
+      this._setActiveTabLink(tabLink);
       const prevIndex = this._index;
       this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0);
       if (this.options.swipeable) {
@@ -5832,7 +6116,7 @@ var Tabs = class _Tabs extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults18;
+    return _defaults19;
   }
   /**
    * Initializes instances of Tabs.
@@ -5883,6 +6167,26 @@ var Tabs = class _Tabs extends Component {
     this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + "px";
     this._indicator.style.right = this._calcRightPos(this._activeTabLink) + "px";
   }
+  /**
+   * Which tab is current, for the eye and for assistive technology.
+   *
+   * The class alone is a colour. `aria-current` is the part a screen reader
+   * reads, and because tabs are navigation rather than a tablist (rule 2 -
+   * there is no keyboard model here to back a tablist), "current" is exactly
+   * the right word for it. Its *value* changes as the user clicks, which makes
+   * maintaining it the component's job, not the author's - see CONTEXT.md on
+   * static semantics versus dynamic state. Writing it once in the markup and
+   * never moving it left the old tab announcing itself as current.
+   */
+  _setActiveTabLink(tabLink) {
+    Array.from(this._tabLinks).forEach((a) => {
+      a.classList.remove("active");
+      a.removeAttribute("aria-current");
+    });
+    this._activeTabLink = tabLink;
+    tabLink.classList.add("active");
+    tabLink.setAttribute("aria-current", "page");
+  }
   _setupActiveTabLink() {
     this._activeTabLink = Array.from(this._tabLinks).find(
       (a) => a.getAttribute("href") === location.hash
@@ -5894,8 +6198,7 @@ var Tabs = class _Tabs extends Component {
       }
       this._activeTabLink = activeTabLink;
     }
-    Array.from(this._tabLinks).forEach((a) => a.classList.remove("active"));
-    this._activeTabLink.classList.add("active");
+    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);
@@ -6000,7 +6303,7 @@ var Tabs = class _Tabs extends Component {
 };
 
 // src/ts/components/timepicker.ts
-var _defaults19 = {
+var _defaults20 = {
   dialRadius: 135,
   outerRadius: 105,
   innerRadius: 70,
@@ -6034,6 +6337,8 @@ var _defaults19 = {
 var _Timepicker = class _Timepicker extends Component {
   constructor(el, options) {
     super(el, options, _Timepicker);
+    /** Which pointer is dragging the clock hand; a second finger is ignored. */
+    this._dragPointerId = null;
     /** Whether the dial (ticks + SVG + AM/PM buttons) has been built yet. */
     this._clockBuilt = false;
     this._handleInputClick = () => {
@@ -6043,7 +6348,7 @@ var _Timepicker = class _Timepicker extends Component {
       if (this.displayPlugin) this.displayPlugin.show();
     };
     this._handleInputKeydown = (e) => {
-      if (Utils.keys.ENTER.includes(e.key)) {
+      if (e.key === Utils.keys.ENTER) {
         e.preventDefault();
         this._ensureClockBuilt();
         this.inputHours.focus();
@@ -6051,13 +6356,9 @@ var _Timepicker = class _Timepicker extends Component {
         if (this.displayPlugin) this.displayPlugin.show();
       }
     };
-    this._handleTimeInputEnterKey = (e) => {
-      if (Utils.keys.ENTER.includes(e.key)) {
-        e.preventDefault();
-        this._inputFromTextField();
-      }
-    };
     this._handleClockClickStart = (e) => {
+      if (!e.isPrimary) return;
+      if (e.pointerType === "mouse" && e.button !== 0) return;
       e.preventDefault();
       this._ensureClockBuilt();
       const clockPlateBR = this.plate.getBoundingClientRect();
@@ -6065,30 +6366,30 @@ var _Timepicker = class _Timepicker extends Component {
       this.x0 = offset.x + this.options.dialRadius;
       this.y0 = offset.y + this.options.dialRadius;
       this.moved = false;
-      const clickPos = _Timepicker._Pos(e);
-      this.dx = clickPos.x - this.x0;
-      this.dy = clickPos.y - this.y0;
+      this._dragPointerId = e.pointerId;
+      this.dx = e.clientX - this.x0;
+      this.dy = e.clientY - this.y0;
       this.setHand(this.dx, this.dy, false);
-      document.addEventListener("mousemove", this._handleDocumentClickMove);
-      document.addEventListener("touchmove", this._handleDocumentClickMove);
-      document.addEventListener("mouseup", this._handleDocumentClickEnd);
-      document.addEventListener("touchend", this._handleDocumentClickEnd);
+      document.addEventListener("pointermove", this._handleDocumentClickMove);
+      document.addEventListener("pointerup", this._handleDocumentClickEnd);
+      document.addEventListener("pointercancel", this._handleDocumentClickCancel);
     };
     this._handleDocumentClickMove = (e) => {
+      if (e.pointerId !== this._dragPointerId) return;
       e.preventDefault();
-      const clickPos = _Timepicker._Pos(e);
-      const x = clickPos.x - this.x0;
-      const y = clickPos.y - this.y0;
+      const x = e.clientX - this.x0;
+      const y = e.clientY - this.y0;
       this.moved = true;
       this.setHand(x, y, false);
     };
     this._handleDocumentClickEnd = (e) => {
+      if (e.pointerId !== this._dragPointerId) return;
+      this._dragPointerId = null;
       e.preventDefault();
-      document.removeEventListener("mouseup", this._handleDocumentClickEnd);
-      document.removeEventListener("touchend", this._handleDocumentClickEnd);
-      const clickPos = _Timepicker._Pos(e);
-      const x = clickPos.x - this.x0;
-      const y = clickPos.y - this.y0;
+      document.removeEventListener("pointerup", this._handleDocumentClickEnd);
+      document.removeEventListener("pointercancel", this._handleDocumentClickCancel);
+      const x = e.clientX - this.x0;
+      const y = e.clientY - this.y0;
       if (this.moved && x === this.dx && y === this.dy) {
         this.setHand(x, y);
       }
@@ -6103,14 +6404,27 @@ var _Timepicker = class _Timepicker extends Component {
       if (typeof this.options.onSelect === "function") {
         this.options.onSelect.call(this, this.hours, this.minutes);
       }
-      document.removeEventListener("mousemove", this._handleDocumentClickMove);
-      document.removeEventListener("touchmove", this._handleDocumentClickMove);
+      document.removeEventListener("pointermove", this._handleDocumentClickMove);
+    };
+    /**
+     * A cancelled pointer is not a completed selection. The browser or the OS
+     * took the gesture over, so this only lets go of the drag - it must not run
+     * the pointer-up path, which advances hours to minutes, fires `onSelect`,
+     * and under `autoSubmit` closes the picker on a time the user never chose.
+     */
+    this._handleDocumentClickCancel = (e) => {
+      if (e.pointerId !== this._dragPointerId) return;
+      this._dragPointerId = null;
+      this.moved = false;
+      document.removeEventListener("pointermove", this._handleDocumentClickMove);
+      document.removeEventListener("pointerup", this._handleDocumentClickEnd);
+      document.removeEventListener("pointercancel", this._handleDocumentClickCancel);
     };
     this._handleAmPmClick = (e) => {
       this._handleAmPmInteraction(e.target);
     };
     this._handleAmPmKeypress = (e) => {
-      if (Utils.keys.ENTER.includes(e.key)) {
+      if (e.key === Utils.keys.ENTER) {
         this._handleAmPmInteraction(e.target);
       }
     };
@@ -6125,8 +6439,6 @@ var _Timepicker = class _Timepicker extends Component {
      */
     this.showView = (view, delay = null) => {
       this._ensureClockBuilt();
-      if (view === "minutes" && getComputedStyle(this.hoursView).visibility === "visible") {
-      }
       const isHours = view === "hours", nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView;
       this.currentView = view;
       hideView.classList.add("timepicker-dial-out");
@@ -6198,7 +6510,7 @@ var _Timepicker = class _Timepicker extends Component {
     }
   }
   static get defaults() {
-    return _defaults19;
+    return _defaults20;
   }
   /**
    * Initializes instances of Timepicker.
@@ -6215,15 +6527,6 @@ var _Timepicker = class _Timepicker extends Component {
     const svgNS = "http://www.w3.org/2000/svg";
     return document.createElementNS(svgNS, name);
   }
-  static _Pos(e) {
-    if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
-      return {
-        x: e.targetTouches[0].clientX,
-        y: e.targetTouches[0].clientY
-      };
-    }
-    return { x: e.clientX, y: e.clientY };
-  }
   static getInstance(el) {
     return el["Expressive_Timepicker"];
   }
@@ -6236,8 +6539,7 @@ var _Timepicker = class _Timepicker extends Component {
   _setupEventHandlers() {
     this.el.addEventListener("click", this._handleInputClick);
     this.el.addEventListener("keydown", this._handleInputKeydown);
-    this.plate.addEventListener("mousedown", this._handleClockClickStart);
-    this.plate.addEventListener("touchstart", this._handleClockClickStart);
+    this.plate.addEventListener("pointerdown", this._handleClockClickStart);
     this.digitalClock.addEventListener("keyup", this._inputFromTextField);
     this.inputHours.addEventListener("focus", () => this.showView("hours"));
     this.inputHours.addEventListener("focusout", () => this.formatHours());
@@ -6247,10 +6549,9 @@ var _Timepicker = class _Timepicker extends Component {
   _removeEventHandlers() {
     this.el.removeEventListener("click", this._handleInputClick);
     this.el.removeEventListener("keydown", this._handleInputKeydown);
-    document.removeEventListener("mousemove", this._handleDocumentClickMove);
-    document.removeEventListener("touchmove", this._handleDocumentClickMove);
-    document.removeEventListener("mouseup", this._handleDocumentClickEnd);
-    document.removeEventListener("touchend", this._handleDocumentClickEnd);
+    document.removeEventListener("pointermove", this._handleDocumentClickMove);
+    document.removeEventListener("pointerup", this._handleDocumentClickEnd);
+    document.removeEventListener("pointercancel", this._handleDocumentClickCancel);
   }
   _insertHTMLIntoDOM() {
     const template = document.createElement("template");
@@ -6279,15 +6580,6 @@ var _Timepicker = class _Timepicker extends Component {
     this.footer = this.containerEl.querySelector(".timepicker-footer");
     this.amOrPm = "PM";
   }
-  /*private _createButton(text: string, visibility: string): HTMLButtonElement {
-    const button = document.createElement('button');
-    button.classList.add('waves-effect', 'text');
-    button.style.visibility = visibility;
-    button.type = 'button';
-    button.tabIndex = -1;
-    button.innerText = text;
-    return button;
-  }*/
   _pickerSetup() {
     Utils.createButton(
       this.footer,
@@ -6568,7 +6860,7 @@ _Timepicker._template = `<div class="timepicker-container">
 var Timepicker = _Timepicker;
 
 // src/ts/components/snackbar.ts
-var _defaults20 = {
+var _defaults21 = {
   text: "",
   action: "",
   onAction: null,
@@ -6578,7 +6870,8 @@ var _defaults20 = {
   outDuration: 375,
   classes: "",
   completeCallback: null,
-  activationPercent: 0.8
+  activationPercent: 0.8,
+  root: null
 };
 var _Snackbar = class _Snackbar {
   constructor(options = {}) {
@@ -6601,8 +6894,10 @@ var _Snackbar = class _Snackbar {
       }
       _Snackbar._snackbars.length = 0;
     }
-    if (!_Snackbar._container || !_Snackbar._container.isConnected) {
-      _Snackbar._createContainer();
+    const root = Utils.portalRoot(this.options.root ?? document.body);
+    if (!_Snackbar._container || !_Snackbar._container.isConnected || _Snackbar._container.parentNode !== root) {
+      if (_Snackbar._container) _Snackbar._removeContainer();
+      _Snackbar._createContainer(root);
     }
     _Snackbar._snackbars.push(this);
     const snackbarElement = this._createSnackbar();
@@ -6612,30 +6907,31 @@ var _Snackbar = class _Snackbar {
     this._setTimer();
   }
   static get defaults() {
-    return _defaults20;
+    return _defaults21;
   }
   static getInstance(el) {
     return el["Expressive_Snackbar"];
   }
-  static _createContainer() {
+  static _createContainer(root = document.body) {
     const container = document.createElement("div");
     container.setAttribute("id", "snackbar-container");
-    container.addEventListener("touchstart", _Snackbar._onDragStart);
-    container.addEventListener("touchmove", _Snackbar._onDragMove);
-    container.addEventListener("touchend", _Snackbar._onDragEnd);
-    container.addEventListener("mousedown", _Snackbar._onDragStart);
-    document.addEventListener("mousemove", _Snackbar._onDragMove);
-    document.addEventListener("mouseup", _Snackbar._onDragEnd);
-    document.body.appendChild(container);
+    container.addEventListener("pointerdown", _Snackbar._onDragStart);
+    document.addEventListener("pointermove", _Snackbar._onDragMove);
+    document.addEventListener("pointerup", _Snackbar._onDragEnd);
+    document.addEventListener("pointercancel", _Snackbar._onDragCancel);
+    root.appendChild(container);
     _Snackbar._container = container;
   }
   static _removeContainer() {
-    document.removeEventListener("mousemove", _Snackbar._onDragMove);
-    document.removeEventListener("mouseup", _Snackbar._onDragEnd);
+    document.removeEventListener("pointermove", _Snackbar._onDragMove);
+    document.removeEventListener("pointerup", _Snackbar._onDragEnd);
+    document.removeEventListener("pointercancel", _Snackbar._onDragCancel);
     _Snackbar._container.remove();
     _Snackbar._container = null;
   }
   static _onDragStart(e) {
+    if (!e.isPrimary) return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
     const target = e.target;
     if (target && !target.closest("button, a") && target.closest(".snackbar")) {
       const snackbarElem = target.closest(".snackbar");
@@ -6646,17 +6942,19 @@ var _Snackbar = class _Snackbar {
       _Snackbar._draggedSnackbar = snackbar;
       snackbar.el.classList.add("panning");
       snackbar.el.style.transition = "";
-      snackbar.startingXPos = _Snackbar._xPos(e);
+      _Snackbar._dragPointerId = e.pointerId;
+      snackbar.startingXPos = e.clientX;
       snackbar.time = Date.now();
-      snackbar.xPos = _Snackbar._xPos(e);
+      snackbar.xPos = e.clientX;
     }
   }
   static _onDragMove(e) {
+    if (_Snackbar._dragPointerId !== e.pointerId) return;
     if (!!_Snackbar._draggedSnackbar) {
       e.preventDefault();
       const snackbar = _Snackbar._draggedSnackbar;
-      snackbar.deltaX = Math.abs(snackbar.xPos - _Snackbar._xPos(e));
-      snackbar.xPos = _Snackbar._xPos(e);
+      snackbar.deltaX = Math.abs(snackbar.xPos - e.clientX);
+      snackbar.xPos = e.clientX;
       snackbar.velocityX = snackbar.deltaX / (Date.now() - snackbar.time);
       snackbar.time = Date.now();
       const totalDeltaX = snackbar.xPos - snackbar.startingXPos;
@@ -6665,7 +6963,9 @@ var _Snackbar = class _Snackbar {
       snackbar.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString();
     }
   }
-  static _onDragEnd() {
+  static _onDragEnd(e) {
+    if (_Snackbar._dragPointerId !== e.pointerId) return;
+    _Snackbar._dragPointerId = null;
     if (!!_Snackbar._draggedSnackbar) {
       const snackbar = _Snackbar._draggedSnackbar;
       snackbar.panning = false;
@@ -6685,11 +6985,23 @@ var _Snackbar = class _Snackbar {
       _Snackbar._draggedSnackbar = null;
     }
   }
-  static _xPos(e) {
-    if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
-      return e.targetTouches[0].clientX;
-    }
-    return e.clientX;
+  /**
+   * A cancelled pointer is not a short swipe. Snap back and resume the timer
+   * without consulting the distance travelled - the browser took the gesture
+   * over, so the movement so far says nothing about what the user wanted.
+   */
+  static _onDragCancel(e) {
+    if (_Snackbar._dragPointerId !== e.pointerId) return;
+    _Snackbar._dragPointerId = null;
+    const snackbar = _Snackbar._draggedSnackbar;
+    if (!snackbar) return;
+    snackbar.panning = false;
+    snackbar.el.classList.remove("panning");
+    snackbar.el.style.transition = "transform .2s, opacity .2s";
+    snackbar.el.style.transform = "";
+    snackbar.el.style.opacity = "";
+    snackbar._resumeTimer();
+    _Snackbar._draggedSnackbar = null;
   }
   /**
    * dismiss all snackbars.
@@ -6700,7 +7012,7 @@ var _Snackbar = class _Snackbar {
     }
   }
   _createSnackbar() {
-    let snackbar = this.options.snackbarId ? document.getElementById(this.options.snackbarId) : document.createElement("div");
+    let snackbar = this.options.snackbarId ? Utils.getElementById(this.options.root ?? document.body, this.options.snackbarId) : document.createElement("div");
     if (snackbar instanceof HTMLTemplateElement) {
       const node = snackbar.content.cloneNode(true);
       snackbar = node.firstElementChild;
@@ -6822,13 +7134,15 @@ var _Snackbar = class _Snackbar {
     }, this.options.outDuration);
   }
 };
+/** Which pointer owns the drag in flight; a second finger is ignored. */
+_Snackbar._dragPointerId = null;
 _Snackbar._snackbars = [];
 _Snackbar._container = null;
 _Snackbar._draggedSnackbar = null;
 var Snackbar = _Snackbar;
 
 // src/ts/components/tooltip.ts
-var _defaults21 = {
+var _defaults22 = {
   exitDelay: 200,
   enterDelay: 0,
   text: "",
@@ -6873,8 +7187,10 @@ var Tooltip = class _Tooltip extends Component {
       this.isFocused = false;
       this.close();
     };
+    // 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 (Utils.tabPressed) {
+      if (this.el.matches(":focus-visible")) {
         this.isFocused = true;
         this.open(false);
       }
@@ -6896,7 +7212,7 @@ var Tooltip = class _Tooltip extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults21;
+    return _defaults22;
   }
   /**
    * Initializes instances of Tooltip.
@@ -6910,6 +7226,12 @@ var Tooltip = class _Tooltip extends Component {
     return el["Expressive_Tooltip"];
   }
   destroy() {
+    clearTimeout(this._enterDelayTimeout);
+    clearTimeout(this._exitDelayTimeout);
+    clearTimeout(this._animationTimeout);
+    this.isOpen = false;
+    this.isHovered = false;
+    this.isFocused = false;
     if (this.el.getAttribute("aria-describedby") === this.tooltipEl.id) {
       this.el.removeAttribute("aria-describedby");
     }
@@ -6923,7 +7245,7 @@ var Tooltip = class _Tooltip extends Component {
     this.tooltipEl.id = `tooltip-${Utils.guid()}`;
     this.tooltipEl.setAttribute("role", "tooltip");
     this.el.setAttribute("aria-describedby", this.tooltipEl.id);
-    const tooltipContentEl = this.options.tooltipId ? document.getElementById(this.options.tooltipId) : document.createElement("div");
+    const tooltipContentEl = this.options.tooltipId ? Utils.getElementById(this.el, this.options.tooltipId) : document.createElement("div");
     if (this.options.tooltipId) {
       this.tooltipEl.classList.add("rich");
     }
@@ -6931,7 +7253,7 @@ var Tooltip = class _Tooltip extends Component {
     tooltipContentEl.classList.add("tooltip-content");
     this._setTooltipContent(tooltipContentEl);
     this.tooltipEl.appendChild(tooltipContentEl);
-    document.body.appendChild(this.tooltipEl);
+    Utils.portalRoot(this.el).appendChild(this.tooltipEl);
   }
   _setTooltipContent(tooltipContentEl) {
     if (this.options.tooltipId) return;
@@ -7001,32 +7323,15 @@ var Tooltip = class _Tooltip extends Component {
     tooltip.style.left = newCoordinates.x + "px";
   }
   _repositionWithinScreen(x, y, width, height) {
-    const scrollLeft = Utils.getDocumentScrollLeft();
-    const scrollTop = Utils.getDocumentScrollTop();
-    let newX = x - scrollLeft;
-    let newY = y - scrollTop;
-    const bounding = {
-      left: newX,
-      top: newY,
+    return Utils._repositionWithinScreen(
+      x,
+      y,
       width,
-      height
-    };
-    const offset = this.options.margin + this.options.transitionMovement;
-    const edges = Utils.checkWithinContainer(document.body, bounding, offset);
-    if (edges.left) {
-      newX = offset;
-    } else if (edges.right) {
-      newX -= newX + width - window.innerWidth;
-    }
-    if (edges.top) {
-      newY = offset;
-    } else if (edges.bottom) {
-      newY -= newY + height - window.innerHeight;
-    }
-    return {
-      x: newX + scrollLeft,
-      y: newY + scrollTop
-    };
+      height,
+      this.options.margin,
+      this.options.transitionMovement,
+      "center"
+    );
   }
   _animateIn() {
     this._positionTooltip();
@@ -7035,7 +7340,8 @@ var Tooltip = class _Tooltip extends Component {
     this.tooltipEl.style.transition = `
       transform ${duration}ms ease-out,
       opacity ${duration}ms ease-out`;
-    setTimeout(() => {
+    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);
@@ -7045,7 +7351,8 @@ var Tooltip = class _Tooltip extends Component {
     this.tooltipEl.style.transition = `
       transform ${duration}ms ease-out,
       opacity ${duration}ms ease-out`;
-    setTimeout(() => {
+    clearTimeout(this._animationTimeout);
+    this._animationTimeout = setTimeout(() => {
       this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`;
       this.tooltipEl.style.opacity = "0";
     }, 1);
@@ -7070,79 +7377,107 @@ var Tooltip = class _Tooltip extends Component {
 
 // src/ts/components/registry.ts
 var AUTO_INIT_COMPONENTS = {
-  Autocomplete: { component: Autocomplete, selector: ".autocomplete" },
+  AppBar: {
+    component: AppBar,
+    selector: "header.medium, header.large, header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(.search-bar, .searchbar))"
+  },
+  Autocomplete: {
+    component: Autocomplete,
+    selector: ".autocomplete"
+  },
+  ButtonGroup: {
+    component: ButtonGroup,
+    selector: ".button-group"
+  },
   // Shared with Cards.Init() - see CARDS_SELECTOR. This entry used to read
   // '.cards', which no card markup uses.
-  Cards: { component: Cards, selector: CARDS_SELECTOR },
+  Cards: { component: Cards, selector: CARDS_SELECTOR, filter: isCardReveal },
+  ExpandingCard: {
+    component: ExpandingCard,
+    selector: EXPANDING_CARD_SELECTOR
+  },
   Carousel: { component: Carousel, selector: ".carousel" },
   Chips: { component: Chips, selector: ".chips" },
-  Datepicker: { component: Datepicker, selector: ".datepicker" },
+  Datepicker: {
+    component: Datepicker,
+    selector: ".datepicker, .date-picker"
+  },
   Menu: { component: Menu, selector: ".menu-trigger" },
   Lightbox: { component: Lightbox, selector: ".lightboxed" },
-  Parallax: { component: Parallax, selector: ".parallax" },
   ScrollSpy: { component: ScrollSpy, selector: ".scrollspy" },
   FormSelect: { component: FormSelect, selector: "select" },
-  Sidenav: { component: Sidenav, selector: ".sidenav" },
-  NavigationRail: { component: NavigationRail, selector: ".navigation-rail" },
+  NavigationDrawer: {
+    component: NavigationDrawer,
+    selector: ".sidenav, .navigation-drawer"
+  },
+  NavigationRail: {
+    component: NavigationRail,
+    selector: ".navigation-rail"
+  },
   Tabs: { component: Tabs, selector: ".tabs" },
-  Timepicker: { component: Timepicker, selector: ".timepicker" },
+  Timepicker: {
+    component: Timepicker,
+    selector: ".timepicker, .time-picker"
+  },
   Tooltip: { component: Tooltip, selector: ".tooltipped" },
   FloatingActionButton: {
     component: FloatingActionButton,
-    selector: ".fixed-action-btn"
+    selector: ".fab, .fixed-action-btn, .fab-menu"
   }
 };
 function AutoInit(context = document.body, options) {
   for (const name of Object.keys(AUTO_INIT_COMPONENTS)) {
-    const { component, selector } = AUTO_INIT_COMPONENTS[name];
+    const { component, selector, filter } = AUTO_INIT_COMPONENTS[name];
     const els = context.querySelectorAll(`:is(${selector}):not(.no-autoinit)`);
-    component.init(els, options?.[name] ?? {});
+    if (filter) {
+      els.forEach((el) => {
+        if (filter(el)) component.init(el, options?.[name] ?? {});
+      });
+    } else {
+      component.init(els, options?.[name] ?? {});
+    }
   }
 }
 
 // src/ts/index.ts
-var version = "0.7.0";
-if (typeof document !== "undefined") {
-  document.addEventListener("keydown", Utils.docHandleKeydown, true);
-  document.addEventListener("keyup", Utils.docHandleKeyup, true);
-  document.addEventListener("focus", Utils.docHandleFocus, true);
-  document.addEventListener("blur", Utils.docHandleBlur, true);
-}
+var version = "0.9.0";
 Forms.Init();
 Chips.Init();
-Waves.Init();
-Range.Init();
+Slider.Init();
 Cards.Init();
+ExpandingCard.Init();
 Dialogs.Init();
 BottomSheets.Init();
 SideSheets.Init();
 export {
+  AppBar,
   AutoInit,
   Autocomplete,
   BottomSheets,
+  ButtonGroup,
   Cards,
   Carousel,
   CharacterCounter,
   Chips,
   Datepicker,
   Dialogs,
+  ExpandingCard,
   FloatingActionButton,
   FormSelect,
   Forms,
   Lightbox,
   Menu,
+  NavigationDrawer,
   NavigationRail,
-  Parallax,
-  Range,
+  Slider as Range,
   ScrollSpy,
   SideSheets,
-  Sidenav,
+  NavigationDrawer as Sidenav,
   Slider,
   Snackbar,
   Tabs,
   Timepicker,
   Tooltip,
-  Waves,
   version
 };
 //# sourceMappingURL=expressive.mjs.map