@expressivecss/expressive 0.7.0-rc.0 → 0.8.0

package/dist/js/expressive.js

@@ -29,68 +29,28 @@ var Expressive = (() => {
     Chips: () => Chips,
     Datepicker: () => Datepicker,
     Dialogs: () => Dialogs,
+    ExpandingCard: () => ExpandingCard,
     FloatingActionButton: () => FloatingActionButton,
     FormSelect: () => FormSelect,
     Forms: () => Forms,
     Lightbox: () => Lightbox,
     Menu: () => Menu,
+    NavigationDrawer: () => NavigationDrawer,
     NavigationRail: () => NavigationRail,
-    Parallax: () => Parallax,
-    Range: () => Range,
+    Range: () => Slider,
     ScrollSpy: () => ScrollSpy,
     SideSheets: () => SideSheets,
-    Sidenav: () => Sidenav,
+    Sidenav: () => NavigationDrawer,
     Slider: () => Slider,
     Snackbar: () => Snackbar,
     Tabs: () => Tabs,
     Timepicker: () => Timepicker,
     Tooltip: () => Tooltip,
-    Waves: () => Waves,
     version: () => version
   });
 
   // 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.
      *
@@ -108,13 +68,46 @@ var Expressive = (() => {
       }
     }
     /**
-     * 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
@@ -211,43 +204,50 @@ var Expressive = (() => {
      * 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;
       };
     }
     /**
@@ -264,7 +264,7 @@ var Expressive = (() => {
      * 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";
@@ -274,7 +274,7 @@ var Expressive = (() => {
       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);
@@ -353,36 +353,22 @@ var Expressive = (() => {
       };
     }
   };
-  /** 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
@@ -466,13 +452,14 @@ var Expressive = (() => {
         this._handleRevealEvent();
       };
       this._handleKeypressEvent = (e) => {
-        if (Utils.keys.ENTER.includes(e.key)) {
+        if (e.key === Utils.keys.ENTER || e.key === " ") {
+          e.preventDefault();
           this._handleRevealEvent();
         }
       };
       this._handleRevealEvent = () => {
-        this._activators.forEach((el) => el.tabIndex = -1);
-        this.open();
+        if (this.isOpen) this.close();
+        else this.open();
       };
       this._setupRevealCloseEventHandlers = () => {
         this.cardRevealClose.addEventListener("click", this.close);
@@ -483,7 +470,7 @@ var Expressive = (() => {
         this.cardRevealClose.removeEventListener("keypress", this._handleKeypressCloseEvent);
       };
       this._handleKeypressCloseEvent = (e) => {
-        if (Utils.keys.ENTER.includes(e.key)) {
+        if (e.key === Utils.keys.ENTER) {
           this.close();
         }
       };
@@ -494,6 +481,7 @@ var Expressive = (() => {
         if (this.isOpen || !this.cardReveal) return;
         this.isOpen = true;
         this.cardReveal.ariaExpanded = "true";
+        this._activators.forEach((el) => el.ariaExpanded = "true");
         if (this.cardRevealClose) this.cardRevealClose.tabIndex = 0;
         if (typeof this.options.onOpen === "function") {
           this.options.onOpen.call(this);
@@ -507,7 +495,7 @@ var Expressive = (() => {
         if (!this.isOpen || !this.cardReveal) return;
         this.isOpen = false;
         this.cardReveal.ariaExpanded = "false";
-        this._activators.forEach((el) => el.tabIndex = 0);
+        this._activators.forEach((el) => el.ariaExpanded = "false");
         if (this.cardRevealClose) this.cardRevealClose.tabIndex = -1;
         if (typeof this.options.onClose === "function") {
           this.options.onClose.call(this);
@@ -522,9 +510,18 @@ var Expressive = (() => {
       this._activators = [];
       this.cardReveal = this.el.querySelector(":scope > aside");
       if (this.cardReveal) {
-        this._activators = Array.from(this.el.querySelectorAll(".activator"));
+        this._activators = Array.from(
+          this.el.querySelectorAll(".activator")
+        ).filter(
+          (activator) => !this.cardReveal.contains(activator)
+        );
         this._activators.forEach((el2) => {
-          if (el2) el2.tabIndex = 0;
+          if (!el2) return;
+          el2.tabIndex = 0;
+          el2.ariaExpanded = "false";
+          if (!el2.matches("a[href], button, input, select, textarea")) {
+            el2.setAttribute("role", "button");
+          }
         });
         this.cardRevealClose = this.cardReveal.querySelector(
           ":scope > :is(h1, h2, h3, h4, h5, h6)"
@@ -567,8 +564,171 @@ var Expressive = (() => {
     }
   };
 
-  // src/ts/components/menu.ts
+  // src/ts/components/expandingCard.ts
   var _defaults2 = {
+    onOpen: null,
+    onClose: null
+  };
+  var MOTION_DURATION = 500;
+  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.closeTimer = null;
+      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.isOpen) return;
+        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;
+        if (this.closeTimer !== null) {
+          window.clearTimeout(this.closeTimer);
+          this.closeTimer = null;
+        }
+        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;
+        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 = () => {
+          this.closeTimer = null;
+          if (this.dialog.open) this.dialog.close();
+          this.trigger.focus();
+        };
+        const reducedMotion = window.matchMedia(
+          "(prefers-reduced-motion: reduce)"
+        ).matches;
+        if (reducedMotion) finish();
+        else this.closeTimer = window.setTimeout(finish, MOTION_DURATION);
+      };
+      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();
+      if (this.closeTimer !== null) window.clearTimeout(this.closeTimer);
+      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,
@@ -584,6 +744,7 @@ var Expressive = (() => {
     onCloseEnd: null,
     onItemClick: null
   };
+  var SPACE = " ";
   var _Menu = class _Menu extends Component {
     constructor(el, options) {
       super(el, options, _Menu);
@@ -629,8 +790,8 @@ var Expressive = (() => {
         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();
         }
@@ -644,13 +805,18 @@ var Expressive = (() => {
       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);
         }
       };
@@ -663,11 +829,11 @@ var Expressive = (() => {
         }
       };
       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();
@@ -677,7 +843,7 @@ var Expressive = (() => {
             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();
@@ -688,7 +854,7 @@ var Expressive = (() => {
           }
         } 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;
@@ -700,17 +866,17 @@ var Expressive = (() => {
             }
           } 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;
           }
@@ -721,7 +887,7 @@ var Expressive = (() => {
           } 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) {
@@ -735,11 +901,12 @@ var Expressive = (() => {
         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);
@@ -810,7 +977,7 @@ var Expressive = (() => {
       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
@@ -821,13 +988,17 @@ var Expressive = (() => {
       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.
@@ -877,7 +1048,9 @@ var Expressive = (() => {
     }
     _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);
     }
@@ -887,6 +1060,33 @@ var Expressive = (() => {
       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");
@@ -973,7 +1173,7 @@ var Expressive = (() => {
     _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");
@@ -982,6 +1182,15 @@ var Expressive = (() => {
         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({
@@ -1076,7 +1285,7 @@ var Expressive = (() => {
         this.menuEl.style.transform = "scale(1)";
       }, 1);
       setTimeout(() => {
-        if (this.options.autoFocus) this.menuEl.focus();
+        this._focusInitialItem();
         if (typeof this.options.onOpenEnd === "function") this.options.onOpenEnd.call(this, this.el);
       }, duration);
     }
@@ -1093,11 +1302,11 @@ var Expressive = (() => {
     }
     _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;
     }
@@ -1109,12 +1318,14 @@ var Expressive = (() => {
         }
       );
       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";
@@ -1128,7 +1339,7 @@ var Expressive = (() => {
   var Menu = _Menu;
 
   // src/ts/components/autocomplete.ts
-  var _defaults3 = {
+  var _defaults4 = {
     data: [],
     // Autocomplete data set
     onAutocomplete: null,
@@ -1158,7 +1369,7 @@ var Expressive = (() => {
     constructor(el, options) {
       super(el, options, _Autocomplete);
       this._handleInputBlur = () => {
-        if (!this._mousedown) {
+        if (!this._pointerDown) {
           this.close();
           this._resetAutocomplete();
         }
@@ -1167,9 +1378,9 @@ var Expressive = (() => {
         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);
@@ -1193,7 +1404,7 @@ var Expressive = (() => {
       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"));
@@ -1201,15 +1412,14 @@ var Expressive = (() => {
           }
           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",
@@ -1221,11 +1431,17 @@ var Expressive = (() => {
       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.
@@ -1238,7 +1454,9 @@ var Expressive = (() => {
           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();
@@ -1261,12 +1479,32 @@ var Expressive = (() => {
       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.
@@ -1292,6 +1530,10 @@ var Expressive = (() => {
       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;
@@ -1302,12 +1544,9 @@ var Expressive = (() => {
       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);
@@ -1315,12 +1554,9 @@ var Expressive = (() => {
       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");
@@ -1328,6 +1564,10 @@ var Expressive = (() => {
       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);
@@ -1366,14 +1606,14 @@ var Expressive = (() => {
     }
     _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());
@@ -1385,6 +1625,10 @@ var Expressive = (() => {
     }
     _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",
@@ -1397,7 +1641,7 @@ var Expressive = (() => {
         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);
@@ -1543,7 +1787,7 @@ var Expressive = (() => {
   var Autocomplete = _Autocomplete;
 
   // src/ts/components/chips.ts
-  var _defaults4 = {
+  var _defaults5 = {
     data: [],
     placeholder: "",
     secondaryPlaceholder: "",
@@ -1552,6 +1796,7 @@ var Expressive = (() => {
     autocompleteOnly: false,
     limit: Infinity,
     allowUserInput: false,
+    i18n: { remove: "Remove" },
     onChipAdd: null,
     onChipSelect: null,
     onChipDelete: null
@@ -1561,7 +1806,7 @@ var Expressive = (() => {
       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;
@@ -1583,7 +1828,7 @@ var Expressive = (() => {
       };
       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;
           }
@@ -1592,7 +1837,7 @@ var Expressive = (() => {
             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);
         }
@@ -1602,6 +1847,7 @@ var Expressive = (() => {
         ..._Chips.defaults,
         ...options
       };
+      if (options?.i18n) this.options.i18n = { ..._Chips.defaults.i18n, ...options.i18n };
       this.el.classList.add("chips");
       this.chipsData = [];
       this._chips = [];
@@ -1617,8 +1863,22 @@ var Expressive = (() => {
       }
       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.
@@ -1668,28 +1928,30 @@ var Expressive = (() => {
       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);
         }
       }
     }
@@ -1700,25 +1962,31 @@ var Expressive = (() => {
       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;
     }
@@ -1793,6 +2061,7 @@ var Expressive = (() => {
     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);
@@ -1808,8 +2077,8 @@ var Expressive = (() => {
     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);
       }
@@ -1820,7 +2089,7 @@ var Expressive = (() => {
         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();
             }
@@ -1832,97 +2101,93 @@ var Expressive = (() => {
   _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");
@@ -1939,7 +2204,7 @@ var Expressive = (() => {
       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();
@@ -1994,7 +2259,7 @@ var Expressive = (() => {
      */
     static Init() {
       Utils.onDocumentReady(() => {
-        _Range.init(document.querySelectorAll("input[type=range]"), {});
+        _Slider.init(document.querySelectorAll("input[type=range]"), {});
       });
     }
   };
@@ -2067,169 +2332,144 @@ var Expressive = (() => {
   _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 {
@@ -2285,7 +2525,7 @@ var Expressive = (() => {
         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
@@ -2323,61 +2563,8 @@ var Expressive = (() => {
     }
   };
 
-  // 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);
-        }
-      };
-      animationFrame = window.requestAnimationFrame(animationStep);
-    }
-    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);
-          }
-        });
-      });
-    }
-  };
-
   // src/ts/components/buttons.ts
-  var _defaults6 = {
+  var _defaults7 = {
     direction: "top",
     hoverEnabled: true,
     toolbarEnabled: false
@@ -2412,13 +2599,13 @@ var Expressive = (() => {
         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;
@@ -2438,22 +2625,19 @@ var Expressive = (() => {
       };
       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 _defaults7;
     }
     static init(els, options = {}) {
       return super.init(els, options, _FloatingActionButton);
@@ -2491,16 +2675,21 @@ var Expressive = (() => {
   };
 
   // src/ts/components/carousel.ts
-  var _defaults7 = {
+  var _defaults8 = {
     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) {
@@ -2511,101 +2700,112 @@ var Expressive = (() => {
       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();
@@ -2618,112 +2818,107 @@ var Expressive = (() => {
       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 _defaults8;
     }
     static init(els, options = {}) {
       return super.init(els, options, _Carousel);
@@ -2748,6 +2943,39 @@ var Expressive = (() => {
         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")
@@ -2755,7 +2983,7 @@ var Expressive = (() => {
       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");
@@ -2765,158 +2993,124 @@ var Expressive = (() => {
           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;
@@ -2928,18 +3122,12 @@ var Expressive = (() => {
         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);
@@ -2949,6 +3137,81 @@ var Expressive = (() => {
         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";
@@ -2963,11 +3226,16 @@ var Expressive = (() => {
       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;
@@ -2978,13 +3246,24 @@ var Expressive = (() => {
     _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;
       };
@@ -2992,63 +3271,38 @@ var Expressive = (() => {
       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);
     }
   };
@@ -3060,7 +3314,7 @@ var Expressive = (() => {
   var Carousel = _Carousel;
 
   // src/ts/components/characterCounter.ts
-  var _defaults8 = Object.freeze({});
+  var _defaults9 = Object.freeze({});
   var CharacterCounter = class _CharacterCounter extends Component {
     constructor(el, options) {
       super(el, {}, _CharacterCounter);
@@ -3085,7 +3339,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults8;
+      return _defaults9;
     }
     /**
      * Initializes instances of CharacterCounter.
@@ -3114,6 +3368,8 @@ var Expressive = (() => {
     _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";
@@ -3135,7 +3391,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/select.ts
-  var _defaults9 = {
+  var _defaults10 = {
     classes: "",
     menuOptions: {}
   };
@@ -3184,7 +3440,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults9;
+      return _defaults10;
     }
     /**
      * Initializes instances of FormSelect.
@@ -3355,10 +3611,8 @@ var Expressive = (() => {
       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;
@@ -3558,7 +3812,7 @@ var Expressive = (() => {
   };
 
   // src/ts/plugins/dockedDisplayPlugin.ts
-  var _defaults10 = {
+  var _defaults11 = {
     margin: 5,
     transition: 10,
     duration: 250,
@@ -3607,7 +3861,7 @@ var Expressive = (() => {
       };
       this.el = el;
       this.options = {
-        ..._defaults10,
+        ..._defaults11,
         ...options
       };
       this.container = document.createElement("div");
@@ -3628,7 +3882,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/datepicker.ts
-  var _defaults11 = {
+  var _defaults12 = {
     // the default output format for the input field value
     format: "mmm dd, yyyy",
     // Used to create date object from current input string
@@ -3753,7 +4007,7 @@ var Expressive = (() => {
         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);
@@ -3893,7 +4147,7 @@ var Expressive = (() => {
       }
     }
     static get defaults() {
-      return _defaults11;
+      return _defaults12;
     }
     /**
      * Initializes instances of Datepicker.
@@ -4476,11 +4730,11 @@ var Expressive = (() => {
       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);
@@ -4611,7 +4865,7 @@ var Expressive = (() => {
   var Datepicker = _Datepicker;
 
   // src/ts/components/lightbox.ts
-  var _defaults12 = {
+  var _defaults13 = {
     inDuration: 275,
     outDuration: 200,
     onOpenStart: null,
@@ -4626,7 +4880,7 @@ var Expressive = (() => {
         this._handleLightboxToggle();
       };
       this._handleLightboxKeypress = (e) => {
-        if (Utils.keys.ENTER.includes(e.key)) {
+        if (e.key === Utils.keys.ENTER) {
           this._handleLightboxToggle();
         }
       };
@@ -4641,7 +4895,7 @@ var Expressive = (() => {
         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.
@@ -4730,7 +4984,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults12;
+      return _defaults13;
     }
     /**
      * Initializes instances of Lightbox.
@@ -4760,13 +5014,13 @@ var Expressive = (() => {
     _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) {
@@ -4830,7 +5084,7 @@ var Expressive = (() => {
         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);
@@ -4840,7 +5094,7 @@ var Expressive = (() => {
       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";
@@ -4894,34 +5148,6 @@ var Expressive = (() => {
     }
   };
 
-  // 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 = {
@@ -5068,7 +5294,7 @@ var Expressive = (() => {
   };
   var ScrollSpy = _ScrollSpy;
 
-  // src/ts/components/sidenav.ts
+  // src/ts/components/navigationDrawer.ts
   var _defaults15 = {
     edge: "left",
     draggable: true,
@@ -5078,17 +5304,17 @@ var Expressive = (() => {
     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") {
@@ -5140,7 +5366,7 @@ var Expressive = (() => {
       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();
         }
@@ -5184,14 +5410,14 @@ var Expressive = (() => {
         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;
@@ -5203,27 +5429,27 @@ var Expressive = (() => {
       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;
     }
     /**
-     * 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();
@@ -5236,10 +5462,10 @@ var Expressive = (() => {
       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() {
@@ -5270,6 +5496,11 @@ var Expressive = (() => {
       }
       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;
@@ -5287,7 +5518,7 @@ var Expressive = (() => {
       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() {
@@ -5302,8 +5533,8 @@ var Expressive = (() => {
       }
     }
     _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);
@@ -5315,8 +5546,8 @@ var Expressive = (() => {
       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);
@@ -5329,10 +5560,10 @@ var Expressive = (() => {
     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();
@@ -5386,7 +5617,7 @@ var Expressive = (() => {
     }
     _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");
@@ -5394,8 +5625,8 @@ var Expressive = (() => {
       });
     }
   };
-  _Sidenav._sidenavs = [];
-  var Sidenav = _Sidenav;
+  _NavigationDrawer._sidenavs = [];
+  var NavigationDrawer = _NavigationDrawer;
 
   // src/ts/components/navigationRail.ts
   var _defaults16 = {
@@ -5404,7 +5635,7 @@ var Expressive = (() => {
     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);
@@ -5503,309 +5734,8 @@ var Expressive = (() => {
     }
   };
 
-  // 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 _defaults17 = {
     duration: 300,
     onShow: null,
     swipeable: false,
@@ -5834,12 +5764,10 @@ var Expressive = (() => {
           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) {
@@ -5883,7 +5811,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults18;
+      return _defaults17;
     }
     /**
      * Initializes instances of Tabs.
@@ -5934,6 +5862,26 @@ var Expressive = (() => {
       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
@@ -5945,8 +5893,7 @@ var Expressive = (() => {
         }
         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);
@@ -6051,7 +5998,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/timepicker.ts
-  var _defaults19 = {
+  var _defaults18 = {
     dialRadius: 135,
     outerRadius: 105,
     innerRadius: 70,
@@ -6085,6 +6032,8 @@ var Expressive = (() => {
   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 = () => {
@@ -6094,7 +6043,7 @@ var Expressive = (() => {
         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();
@@ -6103,12 +6052,14 @@ var Expressive = (() => {
         }
       };
       this._handleTimeInputEnterKey = (e) => {
-        if (Utils.keys.ENTER.includes(e.key)) {
+        if (e.key === Utils.keys.ENTER) {
           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();
@@ -6116,30 +6067,30 @@ var Expressive = (() => {
         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);
         }
@@ -6154,14 +6105,27 @@ var Expressive = (() => {
         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);
         }
       };
@@ -6176,8 +6140,6 @@ var Expressive = (() => {
        */
       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");
@@ -6249,7 +6211,7 @@ var Expressive = (() => {
       }
     }
     static get defaults() {
-      return _defaults19;
+      return _defaults18;
     }
     /**
      * Initializes instances of Timepicker.
@@ -6266,15 +6228,6 @@ var Expressive = (() => {
       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"];
     }
@@ -6287,8 +6240,7 @@ var Expressive = (() => {
     _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());
@@ -6298,10 +6250,9 @@ var Expressive = (() => {
     _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");
@@ -6330,15 +6281,6 @@ var Expressive = (() => {
       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,
@@ -6619,7 +6561,7 @@ var Expressive = (() => {
   var Timepicker = _Timepicker;
 
   // src/ts/components/snackbar.ts
-  var _defaults20 = {
+  var _defaults19 = {
     text: "",
     action: "",
     onAction: null,
@@ -6629,7 +6571,8 @@ var Expressive = (() => {
     outDuration: 375,
     classes: "",
     completeCallback: null,
-    activationPercent: 0.8
+    activationPercent: 0.8,
+    root: null
   };
   var _Snackbar = class _Snackbar {
     constructor(options = {}) {
@@ -6652,8 +6595,10 @@ var Expressive = (() => {
         }
         _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();
@@ -6663,30 +6608,31 @@ var Expressive = (() => {
       this._setTimer();
     }
     static get defaults() {
-      return _defaults20;
+      return _defaults19;
     }
     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");
@@ -6697,17 +6643,19 @@ var Expressive = (() => {
         _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;
@@ -6716,7 +6664,9 @@ var Expressive = (() => {
         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;
@@ -6736,11 +6686,23 @@ var Expressive = (() => {
         _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.
@@ -6751,7 +6713,7 @@ var Expressive = (() => {
       }
     }
     _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;
@@ -6873,13 +6835,15 @@ var Expressive = (() => {
       }, 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 _defaults20 = {
     exitDelay: 200,
     enterDelay: 0,
     text: "",
@@ -6924,8 +6888,10 @@ var Expressive = (() => {
         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);
         }
@@ -6947,7 +6913,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults21;
+      return _defaults20;
     }
     /**
      * Initializes instances of Tooltip.
@@ -6974,7 +6940,7 @@ var Expressive = (() => {
       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");
       }
@@ -6982,7 +6948,7 @@ var Expressive = (() => {
       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;
@@ -7121,26 +7087,44 @@ var Expressive = (() => {
 
   // src/ts/components/registry.ts
   var AUTO_INIT_COMPONENTS = {
-    Autocomplete: { component: Autocomplete, selector: ".autocomplete" },
+    Autocomplete: {
+      component: Autocomplete,
+      selector: ".autocomplete"
+    },
     // Shared with Cards.Init() - see CARDS_SELECTOR. This entry used to read
     // '.cards', which no card markup uses.
     Cards: { component: Cards, selector: CARDS_SELECTOR },
+    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) {
@@ -7152,18 +7136,12 @@ var Expressive = (() => {
   }
 
   // src/ts/index.ts
-  var version = "0.7.0-rc.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.8.0";
   Forms.Init();
   Chips.Init();
-  Waves.Init();
-  Range.Init();
+  Slider.Init();
   Cards.Init();
+  ExpandingCard.Init();
   Dialogs.Init();
   BottomSheets.Init();
   SideSheets.Init();