@expressivecss/expressive 0.2.0 → 0.3.0

package/dist/js/expressive.js

@@ -1476,7 +1476,7 @@ var Expressive = (() => {
     data: [],
     placeholder: "",
     secondaryPlaceholder: "",
-    closeIconClass: "material-icons",
+    closeIconClass: "material-symbols",
     autocompleteOptions: {},
     autocompleteOnly: false,
     limit: Infinity,
@@ -2115,83 +2115,76 @@ var Expressive = (() => {
   var FloatingActionButton = class _FloatingActionButton extends Component {
     constructor(el, options) {
       super(el, options, _FloatingActionButton);
-      /** Toolbar-mode backdrop, kept so closing can take it back out. */
-      this._backdrop = null;
-      this._handleFABClick = () => {
-        this._handleFABToggle();
-      };
-      this._handleFABKeyPress = (e) => {
-        if (Utils.keys.ENTER.includes(e.key)) {
-          this._handleFABToggle();
-        }
-      };
-      this._handleFABToggle = () => {
-        if (this.isOpen) {
-          this.close();
-        } else {
-          this.open();
-        }
-      };
-      this._handleDocumentClick = (e) => {
-        const elem = e.target;
-        if (elem !== this._menu) this.close();
-      };
       /**
        * Open FAB.
        */
       this.open = () => {
         if (this.isOpen) return;
-        if (this.options.toolbarEnabled) this._animateInToolbar();
-        else this._animateInFAB();
         this.isOpen = true;
+        this.el.classList.add("active");
+        this._anchor?.setAttribute("aria-expanded", "true");
+        document.addEventListener("click", this._handleDocumentClick);
+        document.addEventListener("keydown", this._handleDocumentKeydown);
       };
       /**
        * Close FAB.
        */
       this.close = () => {
         if (!this.isOpen) return;
-        if (this.options.toolbarEnabled) {
-          window.removeEventListener("scroll", this.close, true);
-          document.body.removeEventListener("click", this._handleDocumentClick, true);
-          this._animateOutToolbar();
-        } else {
-          this._animateOutFAB();
-        }
         this.isOpen = false;
+        this.el.classList.remove("active");
+        this._anchor?.setAttribute("aria-expanded", "false");
+        document.removeEventListener("click", this._handleDocumentClick);
+        document.removeEventListener("keydown", this._handleDocumentKeydown);
+      };
+      this._handleFABClick = (e) => {
+        e.stopPropagation();
+        this._toggle();
+      };
+      this._handleAnchorKeydown = (e) => {
+        if (Utils.keys.ENTER.includes(e.key) || e.key === " ") {
+          e.preventDefault();
+          this._toggle();
+        }
+      };
+      this._handleDocumentKeydown = (e) => {
+        if (Utils.keys.ESC.includes(e.key)) this.close();
+      };
+      this._handleDocumentClick = (e) => {
+        const target = e.target;
+        if (!(target instanceof Node) || this.el.contains(target)) return;
+        this.close();
       };
       this.el["Expressive_FloatingActionButton"] = this;
+      const fromMarkup = this._directionFromClass();
+      const toolbar = el.classList.contains("toolbar") || options.toolbarEnabled === true;
+      const clickToToggle = el.classList.contains("click-to-toggle") || options.hoverEnabled === false;
       this.options = {
         ..._FloatingActionButton.defaults,
-        ...options
+        ...options,
+        direction: options.direction ?? fromMarkup ?? _FloatingActionButton.defaults.direction,
+        hoverEnabled: !clickToToggle,
+        toolbarEnabled: toolbar
       };
       this.isOpen = false;
-      this._anchor = this.el.querySelector("a, button");
-      this._menu = this.el.querySelector("ul");
-      this._floatingBtns = Array.from(this.el.querySelectorAll("ul .btn-floating"));
-      this._floatingBtnsReverse = this._floatingBtns.reverse();
-      this.offsetY = 0;
-      this.offsetX = 0;
+      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 (this._anchor) this._anchor.tabIndex = 0;
-      if (this._menu) this._menu.ariaExpanded = "false";
-      if (this.options.direction === "top")
-        this.offsetY = 40;
-      else if (this.options.direction === "right")
-        this.offsetX = -40;
-      else if (this.options.direction === "bottom")
-        this.offsetY = -40;
-      else
-        this.offsetX = 40;
+      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;
     }
-    /**
-     * Initializes instances of FloatingActionButton.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
     static init(els, options = {}) {
       return super.init(els, options, _FloatingActionButton);
     }
@@ -2199,229 +2192,109 @@ var Expressive = (() => {
       return el["Expressive_FloatingActionButton"];
     }
     destroy() {
-      this._removeEventHandlers();
       this.close();
+      this._removeEventHandlers();
       this.el["Expressive_FloatingActionButton"] = void 0;
     }
+    _directionFromClass() {
+      const match = [...this.el.classList].find((c) => c.startsWith("direction-"));
+      const value = match?.slice("direction-".length);
+      if (value === "top" || value === "right" || value === "bottom" || value === "left") {
+        return value;
+      }
+      return null;
+    }
     _setupEventHandlers() {
-      if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
-        this.el.addEventListener("mouseenter", this.open);
-        this.el.addEventListener("mouseleave", this.close);
-      } else {
-        this.el.addEventListener("click", this._handleFABClick);
+      this.el.addEventListener("click", this._handleFABClick);
+      if (this._anchor instanceof HTMLAnchorElement && !this._anchor.hasAttribute("href")) {
+        this._anchor.addEventListener("keydown", this._handleAnchorKeydown);
       }
-      this.el.addEventListener("keypress", this._handleFABKeyPress);
     }
     _removeEventHandlers() {
-      if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
-        this.el.removeEventListener("mouseenter", this.open);
-        this.el.removeEventListener("mouseleave", this.close);
-      } else {
-        this.el.removeEventListener("click", this._handleFABClick);
-      }
-      this.el.removeEventListener("keypress", this._handleFABKeyPress);
-    }
-    _animateInFAB() {
-      this.el.classList.add("active");
-      if (this._menu) this._menu.ariaExpanded = "true";
-      const delayIncrement = 40;
-      const duration = 275;
-      this._floatingBtnsReverse.forEach((el, index) => {
-        const delay = delayIncrement * index;
-        el.style.transition = "none";
-        el.style.opacity = "0";
-        el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
-        setTimeout(() => {
-          el.style.opacity = "0.4";
-          setTimeout(() => {
-            el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
-            el.style.opacity = "1";
-            el.style.transform = "translate(0, 0) scale(1)";
-            el.tabIndex = 0;
-          }, 1);
-        }, delay);
-      });
-    }
-    _animateOutFAB() {
-      const duration = 175;
-      setTimeout(() => {
-        this.el.classList.remove("active");
-        if (this._menu) this._menu.ariaExpanded = "false";
-      }, duration);
-      this._floatingBtnsReverse.forEach((el) => {
-        el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
-        el.style.opacity = "0";
-        el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
-        el.tabIndex = -1;
-      });
-    }
-    _animateInToolbar() {
-      const windowWidth = window.innerWidth;
-      const windowHeight = window.innerHeight;
-      const btnRect = this.el.getBoundingClientRect();
-      const fabColor = getComputedStyle(this._anchor).backgroundColor;
-      const backdrop = document.createElement("div");
-      backdrop.classList.add("fab-backdrop");
-      backdrop.style.backgroundColor = fabColor;
-      this._anchor.append(backdrop);
-      this._backdrop = backdrop;
-      const backdropWidth = backdrop.clientWidth;
-      const scaleFactor = backdropWidth > 0 ? windowWidth / backdropWidth : 1;
-      this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
-      this.offsetY = windowHeight - btnRect.bottom;
-      this.btnBottom = btnRect.bottom;
-      this.btnLeft = btnRect.left;
-      this.btnWidth = btnRect.width;
-      this.el.classList.add("active");
-      this.el.style.textAlign = "center";
-      this.el.style.width = "100%";
-      this.el.style.bottom = "0";
-      this.el.style.left = "0";
-      this.el.style.transform = "translateX(" + this.offsetX + "px)";
-      this.el.style.transition = "none";
-      if (this._menu) this._menu.ariaExpanded = "true";
-      this._anchor.style.transform = `translateY(${this.offsetY}px)`;
-      this._anchor.style.transition = "none";
-      setTimeout(() => {
-        this.el.style.transform = "";
-        this.el.style.transition = "transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s";
-        this._anchor.style.overflow = "visible";
-        this._anchor.style.transform = "";
-        this._anchor.style.transition = "transform .2s";
-        setTimeout(() => {
-          this.el.style.overflow = "hidden";
-          this.el.style.backgroundColor = fabColor;
-          backdrop.style.transform = "scale(" + scaleFactor + ")";
-          backdrop.style.transition = "transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)";
-          this._menu.querySelectorAll("li > a").forEach((a) => {
-            a.style.opacity = "1";
-            a.tabIndex = 0;
-          });
-          window.addEventListener("scroll", this.close, true);
-          document.body.addEventListener("click", this._handleDocumentClick, true);
-        }, 100);
-      }, 0);
+      this.el.removeEventListener("click", this._handleFABClick);
+      this._anchor?.removeEventListener("keydown", this._handleAnchorKeydown);
     }
-    /**
-     * Reverse {@link _animateInToolbar}.
-     *
-     * Closing used to only unbind the listeners, leaving the FAB stretched
-     * across the viewport with its backdrop still in the DOM - and a fresh
-     * backdrop appended on every subsequent open.
-     */
-    _animateOutToolbar() {
-      const backdrop = this._backdrop;
-      this._backdrop = null;
-      this._menu?.querySelectorAll("li > a").forEach((a) => {
-        a.style.opacity = "";
-        a.tabIndex = -1;
-      });
-      if (backdrop) {
-        backdrop.style.transition = "transform .2s";
-        backdrop.style.transform = "scale(0)";
-      }
-      this.el.style.overflow = "";
-      this.el.style.backgroundColor = "";
-      this.el.style.transition = "transform .2s";
-      this.el.style.transform = `translateX(${this.offsetX}px)`;
-      this._anchor.style.transition = "transform .2s";
-      this._anchor.style.transform = `translateY(${this.offsetY}px)`;
-      setTimeout(() => {
-        backdrop?.remove();
-        this.el.classList.remove("active");
-        if (this._menu) this._menu.ariaExpanded = "false";
-        this.el.style.textAlign = "";
-        this.el.style.width = "";
-        this.el.style.bottom = "";
-        this.el.style.left = "";
-        this.el.style.transform = "";
-        this.el.style.transition = "";
-        this._anchor.style.overflow = "";
-        this._anchor.style.transform = "";
-        this._anchor.style.transition = "";
-      }, 200);
+    _toggle() {
+      if (this.isOpen) this.close();
+      else this.open();
     }
   };
 
   // src/ts/components/carousel.ts
   var _defaults7 = {
     duration: 200,
-    // ms
     dist: -100,
-    // zoom scale TODO: make this more intuitive as an option
     shift: 0,
-    // spacing for center image
     padding: 0,
-    // Padding between non center items
     numVisible: 5,
-    // Number of visible items in carousel
     fullWidth: false,
-    // Change to full width styles
     indicators: false,
-    // Toggle indicators
     noWrap: false,
-    // Don't wrap around and cycle through items.
     onCycleTo: null
-    // Callback for when a new slide is cycled to.
   };
-  var Carousel = class _Carousel extends Component {
+  var _Carousel = class _Carousel extends Component {
     constructor(el, options) {
       super(el, options, _Carousel);
-      /** The index of the center carousel item. */
       this.center = 0;
-      // Built once per instance. Creating the throttled function inside the
-      // handler - as this used to - produced a fresh closure per resize event and
-      // never actually called it, so resizing did nothing at all.
+      this._ownIndicators = false;
+      this._trackEl = null;
+      this._ignoreScroll = false;
+      this._trackRaf = null;
+      this._started = false;
       this._handleThrottledResize = Utils.throttle(() => this._handleResize(), 200);
       this._handleCarouselTap = (e) => {
-        if (e.type === "mousedown" && e.target.tagName === "IMG") {
+        if (e.pointerType === "mouse" && e.button !== 0) return;
+        if (e.target instanceof HTMLElement && e.target.tagName === "IMG") {
           e.preventDefault();
         }
         this.pressed = true;
         this.dragged = false;
         this.verticalDragged = false;
-        this.reference = this._xpos(e);
-        this.referenceY = this._ypos(e);
+        this.reference = e.clientX;
+        this.referenceY = e.clientY;
         this.velocity = this.amplitude = 0;
         this.frame = this.offset;
         this.timestamp = Date.now();
-        clearInterval(this.ticker);
-        this.ticker = setInterval(this._track, 100);
+        try {
+          this.el.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) => {
-        let x, y, delta, deltaY;
-        if (this.pressed) {
-          x = this._xpos(e);
-          y = this._ypos(e);
-          delta = this.reference - x;
-          deltaY = Math.abs(this.referenceY - y);
-          if (deltaY < 30 && !this.verticalDragged) {
-            if (delta > 2 || delta < -2) {
-              this.dragged = true;
-              this.reference = x;
-              this._scroll(this.offset + delta);
-            }
-          } else if (this.dragged) {
-            e.preventDefault();
-            e.stopPropagation();
-            return false;
-          } else {
-            this.verticalDragged = true;
+        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);
           }
-        }
-        if (this.dragged) {
+        } else if (this.dragged) {
           e.preventDefault();
-          e.stopPropagation();
-          return false;
+        } else {
+          this.verticalDragged = true;
         }
+        if (this.dragged) e.preventDefault();
       };
       this._handleCarouselRelease = (e) => {
-        if (this.pressed) {
-          this.pressed = false;
-        } else {
-          return;
+        if (!this.pressed) return;
+        this.pressed = false;
+        if (this._trackRaf !== null) {
+          cancelAnimationFrame(this._trackRaf);
+          this._trackRaf = null;
+        }
+        try {
+          this.el.releasePointerCapture(e.pointerId);
+        } catch {
         }
-        clearInterval(this.ticker);
         this.target = this.offset;
         if (this.velocity > 10 || this.velocity < -10) {
           this.amplitude = 0.9 * this.velocity;
@@ -2438,86 +2311,91 @@ var Expressive = (() => {
         this.amplitude = this.target - this.offset;
         this.timestamp = Date.now();
         requestAnimationFrame(this._autoScroll);
+        if (this.dragged) e.preventDefault();
+      };
+      this._handleCarouselClick = (e) => {
         if (this.dragged) {
           e.preventDefault();
           e.stopPropagation();
+          return;
         }
-        return false;
-      };
-      this._handleCarouselClick = (e) => {
-        if (this.dragged) {
+        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();
-          return false;
-        } else if (!this.options.fullWidth) {
-          const clickedElem = e.target.closest(".carousel-item");
-          if (!clickedElem) return;
-          const clickedIndex = [...clickedElem.parentNode.children].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();
-            }
+        }
+        if (clickedIndex < 0) {
+          if (e.clientX - e.target.getBoundingClientRect().left > this.el.clientWidth / 2) {
+            this.next();
           } else {
-            this._cycleTo(clickedIndex);
+            this.prev();
           }
+        } else {
+          this._cycleTo(clickedIndex);
         }
       };
       this._handleIndicatorClick = (e) => {
         e.stopPropagation();
-        this._handleIndicatorInteraction(e);
+        const indicator = e.target.closest(".indicator-item");
+        if (!indicator || !this._indicators.contains(indicator)) return;
+        const index = [...this._indicators.children].indexOf(indicator);
+        if (index < 0) return;
+        this._cycleTo(index);
       };
-      this._handleIndicatorKeyPress = (e) => {
-        e.stopPropagation();
-        if (Utils.keys.ENTER.includes(e.key)) {
-          this._handleIndicatorInteraction(e);
+      this._handleKeydown = (e) => {
+        const target = e.target;
+        if (target.closest('input, textarea, select, [contenteditable="true"]')) return;
+        if (Utils.keys.ARROW_RIGHT.includes(e.key)) {
+          e.preventDefault();
+          this.next();
+        } else if (Utils.keys.ARROW_LEFT.includes(e.key)) {
+          e.preventDefault();
+          this.prev();
         }
       };
-      this._handleIndicatorInteraction = (e) => {
-        const indicator = e.target.closest(".indicator-item");
-        if (indicator) {
-          const index = [...indicator.parentNode.children].indexOf(indicator);
-          this._cycleTo(index);
-        }
+      this._handleFlatScroll = () => {
+        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.el.querySelector(".carousel-item");
-          const activeItem = this.el.querySelector(".carousel-item.active");
-          if (!firstItem || !activeItem) return;
+          const firstItem = this.images[0];
+          if (!firstItem) return;
           this.itemWidth = firstItem.clientWidth;
-          this.imageHeight = activeItem.clientHeight;
           this.dim = this.itemWidth * 2 + this.options.padding;
           this.offset = this.center * 2 * this.itemWidth;
           this.target = this.offset;
-          this._setCarouselHeight(true);
         } else {
           this._scroll();
         }
       };
       this._track = () => {
-        const now = Date.now(), elapsed = now - this.timestamp, delta = this.offset - this.frame, v = 1e3 * delta / (1 + elapsed);
+        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 = () => {
-        let elapsed, delta;
-        if (this.amplitude) {
-          elapsed = Date.now() - this.timestamp;
-          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);
-          }
+        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.el["Expressive_Carousel"] = this;
@@ -2525,56 +2403,58 @@ var Expressive = (() => {
         ..._Carousel.defaults,
         ...options
       };
-      this.hasMultipleSlides = this.el.querySelectorAll(".carousel-item").length > 1;
-      this.showIndicators = this.options.indicators && this.hasMultipleSlides;
-      this.noWrap = this.options.noWrap || !this.hasMultipleSlides;
+      this._flat = this.options.fullWidth || this.el.classList.contains("flat") || this.el.classList.contains("carousel-slider");
+      if (this._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.pressed = false;
       this.dragged = false;
       this.offset = this.target = 0;
-      this.images = [];
-      const firstItem = this.el.querySelector(".carousel-item");
-      if (!firstItem) {
+      this.images = this._collectItems();
+      if (!this.images.length) {
         console.error("Carousel: no .carousel-item elements to show");
         return;
       }
-      this.itemWidth = firstItem.clientWidth;
-      this.itemHeight = firstItem.clientHeight;
-      this.dim = this.itemWidth * 2 + this.options.padding || 1;
-      if (this.options.fullWidth) {
-        this.options.dist = 0;
-        this._setCarouselHeight();
-        if (this.showIndicators) {
-          this.el.querySelector(".carousel-fixed-item")?.classList.add("with-indicators");
-        }
-      }
-      this._indicators = document.createElement("ul");
-      this._indicators.classList.add("indicators");
-      this.el.querySelectorAll(".carousel-item").forEach((item, i) => {
-        this.images.push(item);
-        if (this.showIndicators) {
-          const indicator = document.createElement("li");
-          indicator.classList.add("indicator-item");
-          indicator.tabIndex = 0;
-          if (i === 0) {
-            indicator.classList.add("active");
-          }
-          this._indicators.appendChild(indicator);
-        }
-      });
-      if (this.showIndicators) this.el.appendChild(this._indicators);
+      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.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.showIndicators) this._setupIndicators();
+      this.el.tabIndex = this.el.tabIndex >= 0 ? this.el.tabIndex : 0;
+      this.el.setAttribute("aria-roledescription", "carousel");
       this._setupEventHandlers();
-      this._scroll(this.offset);
+      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);
+      }
+    }
+    get _scroller() {
+      return this._trackEl ?? this.el;
     }
     static get defaults() {
       return _defaults7;
     }
-    /**
-     * Initializes instances of Carousel.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
     static init(els, options = {}) {
       return super.init(els, options, _Carousel);
     }
@@ -2582,81 +2462,104 @@ var Expressive = (() => {
       return el["Expressive_Carousel"];
     }
     destroy() {
-      this._removeEventHandlers();
+      if (this._started) this._teardown();
       this.el["Expressive_Carousel"] = void 0;
     }
+    _collectItems() {
+      const explicit = Array.from(this.el.children).filter(
+        (el) => el instanceof HTMLElement && el.classList.contains("carousel-item")
+      );
+      if (explicit.length) return explicit;
+      return Array.from(this.el.children).filter((el) => {
+        if (!(el instanceof HTMLElement)) return false;
+        if (el.classList.contains("indicators") || el.classList.contains("carousel-fixed-item")) {
+          return false;
+        }
+        return el.tagName !== "NAV";
+      });
+    }
+    _setupIndicators() {
+      const existing = Array.from(this.el.children).find(
+        (el) => el instanceof HTMLElement && el.classList.contains("indicators")
+      );
+      this._indicators = existing ?? document.createElement("nav");
+      this._ownIndicators = !existing;
+      this._indicators.classList.add("indicators");
+      this._indicators.setAttribute("aria-label", "Slides");
+      this._indicators.replaceChildren();
+      this.images.forEach((_, i) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.classList.add("indicator-item");
+        if (i === 0) {
+          button.classList.add("active");
+          button.setAttribute("aria-current", "true");
+        }
+        button.setAttribute("aria-label", `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");
+      }
+    }
     _setupEventHandlers() {
-      if (typeof window.ontouchstart !== "undefined") {
-        this.el.addEventListener("touchstart", this._handleCarouselTap);
-        this.el.addEventListener("touchmove", this._handleCarouselDrag);
-        this.el.addEventListener("touchend", this._handleCarouselRelease);
-      }
-      this.el.addEventListener("mousedown", this._handleCarouselTap);
-      this.el.addEventListener("mousemove", this._handleCarouselDrag);
-      this.el.addEventListener("mouseup", this._handleCarouselRelease);
-      this.el.addEventListener("mouseleave", this._handleCarouselRelease);
-      this.el.addEventListener("click", this._handleCarouselClick);
+      this.el.addEventListener("keydown", this._handleKeydown);
       if (this.showIndicators && this._indicators) {
-        this._indicators.querySelectorAll(".indicator-item").forEach((el) => {
-          el.addEventListener("click", this._handleIndicatorClick);
-          el.addEventListener("keypress", this._handleIndicatorKeyPress);
-        });
+        this._indicators.addEventListener("click", this._handleIndicatorClick);
+      }
+      _Carousel._live.add(this);
+      if (!_Carousel._resizeListening) {
+        window.addEventListener("resize", _Carousel._onResize, { passive: true });
+        _Carousel._resizeListening = true;
+      }
+      if (this._flat) {
+        this._scroller.addEventListener("scroll", this._handleFlatScroll, { passive: true });
+        return;
       }
-      window.addEventListener("resize", this._handleThrottledResize);
+      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);
     }
     _removeEventHandlers() {
-      if (typeof window.ontouchstart !== "undefined") {
-        this.el.removeEventListener("touchstart", this._handleCarouselTap);
-        this.el.removeEventListener("touchmove", this._handleCarouselDrag);
-        this.el.removeEventListener("touchend", this._handleCarouselRelease);
-      }
-      this.el.removeEventListener("mousedown", this._handleCarouselTap);
-      this.el.removeEventListener("mousemove", this._handleCarouselDrag);
-      this.el.removeEventListener("mouseup", this._handleCarouselRelease);
-      this.el.removeEventListener("mouseleave", this._handleCarouselRelease);
+      this.el.removeEventListener("keydown", this._handleKeydown);
+      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);
-      if (this.showIndicators && this._indicators) {
-        this._indicators.querySelectorAll(".indicator-item").forEach((el) => {
-          el.removeEventListener("click", this._handleIndicatorClick);
-        });
+      _Carousel._live.delete(this);
+      if (_Carousel._live.size === 0 && _Carousel._resizeListening) {
+        window.removeEventListener("resize", _Carousel._onResize);
+        _Carousel._resizeListening = false;
       }
-      window.removeEventListener("resize", this._handleThrottledResize);
     }
-    _setCarouselHeight(imageOnly = false) {
-      const firstSlide = this.el.querySelector(".carousel-item.active") ? this.el.querySelector(".carousel-item.active") : this.el.querySelector(".carousel-item");
-      const firstImage = firstSlide.querySelector("img");
-      if (firstImage) {
-        if (firstImage.complete) {
-          const imageHeight = firstImage.clientHeight;
-          if (imageHeight > 0) {
-            this.el.style.height = imageHeight + "px";
-          } else {
-            const naturalWidth = firstImage.naturalWidth;
-            const naturalHeight = firstImage.naturalHeight;
-            const adjustedHeight = this.el.clientWidth / naturalWidth * naturalHeight;
-            this.el.style.height = adjustedHeight + "px";
-          }
-        } else {
-          firstImage.addEventListener("load", () => {
-            this.el.style.height = firstImage.offsetHeight + "px";
-          });
-        }
-      } else if (!imageOnly) {
-        const slideHeight = firstSlide.clientHeight;
-        this.el.style.height = slideHeight + "px";
-      }
+    _teardown() {
+      this._removeEventHandlers();
+      if (this._trackRaf !== null) cancelAnimationFrame(this._trackRaf);
+      window.clearTimeout(this.scrollingTimeout);
+      if (this._ownIndicators) this._indicators?.remove();
+      this._unwrapTrack();
+      this.images.forEach((el) => {
+        el.style.transform = "";
+        el.style.zIndex = "";
+        el.style.opacity = "";
+        el.style.visibility = "";
+      });
     }
     _xpos(e) {
-      if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
-        return e.targetTouches[0].clientX;
-      }
-      return e.clientX;
+      if ("clientX" in e) return e.clientX;
+      return 0;
     }
     _ypos(e) {
-      if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
-        return e.targetTouches[0].clientY;
-      }
-      return e.clientY;
+      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;
@@ -2665,18 +2568,20 @@ var Expressive = (() => {
       if (!this.el.classList.contains("scrolling")) {
         this.el.classList.add("scrolling");
       }
-      if (this.scrollingTimeout != null) {
-        clearTimeout(this.scrollingTimeout);
-      }
+      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, delta = this.offset - this.center * this.dim, dir = delta < 0 ? 1 : -1, tween = -dir * delta * 2 / this.dim;
-      let i, el, alignment, zTranslation, tweenedOpacity, centerTweenedOpacity;
+      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;
@@ -2685,26 +2590,17 @@ var Expressive = (() => {
         alignment += "translateY(" + (this.el.clientHeight - this.itemHeight) / 2 + "px)";
         centerTweenedOpacity = 1 - numVisibleOffset * tween;
       }
-      if (this.showIndicators) {
-        const diff = this.center % this.count;
-        const activeIndicator = this._indicators.querySelector(".indicator-item.active");
-        const activeIndicatorIndex = [...activeIndicator.parentNode.children].indexOf(
-          activeIndicator
-        );
-        if (activeIndicatorIndex !== diff) {
-          activeIndicator.classList.remove("active");
-          const pos = diff < 0 ? this.count + diff : diff;
-          this._indicators.querySelectorAll(".indicator-item")[pos].classList.add("active");
-        }
-      }
+      this._paintIndicators(this.center);
       if (!this.noWrap || this.center >= 0 && this.center < this.count) {
-        el = this.images[this._wrap(this.center)];
-        if (!el.classList.contains("active")) {
+        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 (i = 1; i <= half; ++i) {
+      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;
@@ -2713,7 +2609,7 @@ var Expressive = (() => {
           tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
         }
         if (!this.noWrap || this.center + i < this.count) {
-          el = this.images[this._wrap(this.center + i)];
+          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);
         }
@@ -2725,32 +2621,113 @@ var Expressive = (() => {
           tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
         }
         if (!this.noWrap || this.center - i >= 0) {
-          el = this.images[this._wrap(this.center - i)];
+          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) {
-        el = this.images[this._wrap(this.center)];
+        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.el.querySelectorAll(".carousel-item")[this._wrap(this.center)];
+      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);
+        this.options.onCycleTo.call(this, currItem, this.dragged);
       }
       if (typeof this.oneTimeCallback === "function") {
-        this.oneTimeCallback.call(this, _currItem, this.dragged);
+        this.oneTimeCallback.call(this, currItem, this.dragged);
         this.oneTimeCallback = null;
       }
     }
     _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";
     }
+    _paintIndicators(center) {
+      if (!this.showIndicators || !this._indicators) return;
+      const pos = (center % this.count + this.count) % this.count;
+      this._indicators.querySelectorAll(".indicator-item").forEach((el, i) => {
+        const on = i === pos;
+        el.classList.toggle("active", on);
+        if (on) el.setAttribute("aria-current", "true");
+        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);
+      const curr = this.images[index];
+      if (prev !== index && typeof this.options.onCycleTo === "function") {
+        this.options.onCycleTo.call(this, curr, dragged);
+      }
+      if (typeof this.oneTimeCallback === "function") {
+        this.oneTimeCallback.call(this, curr, dragged);
+        this.oneTimeCallback = null;
+      }
+    }
+    _wrapTrack() {
+      const track = document.createElement("div");
+      track.className = "carousel-track";
+      this.images[0].before(track);
+      this.images.forEach((el) => track.appendChild(el));
+      this._trackEl = track;
+    }
+    _unwrapTrack() {
+      if (!this._trackEl) return;
+      this.images.forEach((el) => this.el.insertBefore(el, this._trackEl));
+      this._trackEl.remove();
+      this._trackEl = null;
+    }
+    _nearestIndex() {
+      const left = this._scroller.scrollLeft;
+      let best = 0;
+      let bestDist = Infinity;
+      this.images.forEach((el, i) => {
+        const dist = Math.abs(el.offsetLeft - left);
+        if (dist < bestDist) {
+          bestDist = dist;
+          best = i;
+        }
+      });
+      return best;
+    }
+    _scrollToIndex(n, smooth = true) {
+      const el = this.images[n];
+      if (!el) return;
+      const left = el.offsetLeft;
+      if (Math.abs(this._scroller.scrollLeft - left) < 1) {
+        this._syncActive(n, false);
+        return;
+      }
+      this._ignoreScroll = true;
+      this._scroller.scrollTo({ left, behavior: smooth ? "smooth" : "auto" });
+      const done = () => {
+        this._ignoreScroll = false;
+      };
+      this._scroller.addEventListener("scrollend", done, { once: true });
+      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) {
@@ -2778,14 +2755,8 @@ var Expressive = (() => {
         requestAnimationFrame(this._autoScroll);
       }
     }
-    /**
-     * Move carousel to next slide or go forward a given amount of slides.
-     * @param n How many times the carousel slides.
-     */
     next(n = 1) {
-      if (n === void 0 || isNaN(n)) {
-        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;
@@ -2793,14 +2764,8 @@ var Expressive = (() => {
       }
       this._cycleTo(index);
     }
-    /**
-     * Move carousel to previous slide or go back a given amount of slides.
-     * @param n How many times the carousel slides.
-     */
     prev(n = 1) {
-      if (n === void 0 || isNaN(n)) {
-        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;
@@ -2808,15 +2773,8 @@ var Expressive = (() => {
       }
       this._cycleTo(index);
     }
-    /**
-     * Move carousel to nth slide.
-     * @param n Index of slide.
-     * @param callback "onCycleTo" optional callback.
-     */
     set(n, callback) {
-      if (n === void 0 || isNaN(n)) {
-        n = 0;
-      }
+      if (n === void 0 || isNaN(n)) n = 0;
       if (n > this.count || n < 0) {
         if (this.noWrap) return;
         n = this._wrap(n);
@@ -2824,6 +2782,12 @@ var Expressive = (() => {
       this._cycleTo(n, callback);
     }
   };
+  _Carousel._live = /* @__PURE__ */ new Set();
+  _Carousel._resizeListening = false;
+  _Carousel._onResize = Utils.throttle(() => {
+    _Carousel._live.forEach((c) => c._handleResize());
+  }, 200);
+  var Carousel = _Carousel;
 
   // src/ts/components/characterCounter.ts
   var _defaults8 = Object.freeze({});
@@ -2913,77 +2877,75 @@ var Expressive = (() => {
   var Collapsible = class _Collapsible extends Component {
     constructor(el, options) {
       super(el, options, _Collapsible);
-      this._handleCollapsibleClick = (e) => {
-        const header = e.target.closest(".collapsible-header");
-        if (e.target && header) {
-          const collapsible = header.closest(".collapsible");
-          if (collapsible !== this.el) return;
-          const li = header.closest("li");
-          const isActive = li.classList.contains("active");
-          const index = [...li.parentNode.children].indexOf(li);
-          if (isActive) this.close(index);
-          else this.open(index);
-        }
-      };
-      this._handleCollapsibleKeydown = (e) => {
-        if (Utils.keys.ENTER.includes(e.key)) {
-          this._handleCollapsibleClick(e);
-        }
-      };
+      this._items = [];
+      this._endTimers = [];
+      this._wrappedBodies = [];
       /**
        * Open collapsible section.
-       * @param n Nth section to open.
+       * @param index 0-based index of the section to open.
        */
       this.open = (index) => {
-        const listItems = Array.from(this.el.children).filter((c) => c.tagName === "LI");
-        const li = listItems[index];
-        if (li && !li.classList.contains("active")) {
-          if (typeof this.options.onOpenStart === "function") {
-            this.options.onOpenStart.call(this, li);
-          }
-          if (this.options.accordion) {
-            const activeLis = listItems.filter((li2) => li2.classList.contains("active"));
-            activeLis.forEach((activeLi) => {
-              const index2 = listItems.indexOf(activeLi);
-              this.close(index2);
-            });
-          }
-          li.classList.add("active");
-          this._animateIn(index);
+        const item = this._items[index];
+        if (!item || this._isOpen(item)) return;
+        if (this.options.accordion) {
+          this._items.forEach((other, i) => {
+            if (i !== index && this._isOpen(other)) this.close(i);
+          });
         }
+        this._setOpen(item, true);
       };
       /**
        * Close collapsible section.
-       * @param n Nth section to close.
+       * @param index 0-based index of the section to close.
        */
       this.close = (index) => {
-        const li = Array.from(this.el.children).filter((c) => c.tagName === "LI")[index];
-        if (li && li.classList.contains("active")) {
-          if (typeof this.options.onCloseStart === "function") {
-            this.options.onCloseStart.call(this, li);
-          }
-          li.classList.remove("active");
-          this._animateOut(index);
-        }
+        const item = this._items[index];
+        if (!item || !this._isOpen(item)) return;
+        this._setOpen(item, false);
+      };
+      this._handleClick = (e) => {
+        const header = e.target.closest(".collapsible-header");
+        if (!header || header.closest(".collapsible") !== this.el) return;
+        if (header.closest("details")) return;
+        const item = header.closest("li");
+        if (!item) return;
+        const index = this._items.indexOf(item);
+        if (index < 0) return;
+        if (this._isOpen(item)) this.close(index);
+        else this.open(index);
+      };
+      this._handleKeydown = (e) => {
+        if (!Utils.keys.ENTER.includes(e.key) && e.key !== " ") return;
+        const header = e.target.closest(".collapsible-header");
+        if (!header || header.closest(".collapsible") !== this.el) return;
+        if (header.closest("details")) return;
+        if (header.matches("a, button")) return;
+        e.preventDefault();
+        const item = header.closest("li");
+        if (!item) return;
+        const index = this._items.indexOf(item);
+        if (index < 0) return;
+        if (this._isOpen(item)) this.close(index);
+        else this.open(index);
+      };
+      this._handleToggle = (e) => {
+        const item = e.target;
+        if (!(item instanceof HTMLDetailsElement)) return;
+        if (!this._items.includes(item)) return;
+        this._notify(item, item.open);
       };
       this.el["Expressive_Collapsible"] = this;
+      const accordion = options.accordion !== void 0 ? options.accordion : !el.classList.contains("expandable");
       this.options = {
         ..._Collapsible.defaults,
-        ...options
+        ...options,
+        accordion
       };
-      this._headers = Array.from(this.el.querySelectorAll("li > .collapsible-header"));
-      this._headers.forEach((el2) => el2.tabIndex = 0);
+      this._groupName = el.id ? `collapsible-${el.id}` : `collapsible-${Utils.guid()}`;
+      this._items = this._collectItems();
+      this._wrapDetailsBodies();
+      this._setupItems();
       this._setupEventHandlers();
-      const activeBodies = Array.from(
-        this.el.querySelectorAll("li.active > .collapsible-body")
-      );
-      if (this.options.accordion) {
-        if (activeBodies.length > 0) {
-          this._setExpanded(activeBodies[0]);
-        }
-      } else {
-        activeBodies.forEach((el2) => this._setExpanded(el2));
-      }
     }
     static get defaults() {
       return _defaults9;
@@ -3001,48 +2963,130 @@ var Expressive = (() => {
     }
     destroy() {
       this._removeEventHandlers();
+      this._endTimers.forEach((id) => clearTimeout(id));
+      this._endTimers = [];
+      this._unwrapDetailsBodies();
       this.el["Expressive_Collapsible"] = void 0;
     }
-    _setupEventHandlers() {
-      this.el.addEventListener("click", this._handleCollapsibleClick);
-      this._headers.forEach(
-        (header) => header.addEventListener("keydown", this._handleCollapsibleKeydown)
-      );
+    _collectItems() {
+      const details = Array.from(this.el.querySelectorAll(":scope > details"));
+      if (details.length) return details;
+      return Array.from(this.el.children).filter((c) => c.tagName === "LI");
     }
-    _removeEventHandlers() {
-      this.el.removeEventListener("click", this._handleCollapsibleClick);
-      this._headers.forEach(
-        (header) => header.removeEventListener("keydown", this._handleCollapsibleKeydown)
-      );
+    _setupItems() {
+      if (this.options.accordion) {
+        this._items.forEach((item) => {
+          if (item instanceof HTMLDetailsElement && !item.getAttribute("name")) {
+            item.setAttribute("name", this._groupName);
+          }
+        });
+      }
+      const opened = this._items.filter((item) => this._isOpen(item));
+      if (this.options.accordion && opened.length > 1) {
+        opened.slice(1).forEach((item) => {
+          if (item instanceof HTMLDetailsElement) item.open = false;
+          else item.classList.remove("active");
+        });
+      }
+      this._items.forEach((item) => this._syncAria(item));
     }
-    _setExpanded(li) {
-      li.style.maxHeight = li.scrollHeight + "px";
+    _isOpen(item) {
+      if (item instanceof HTMLDetailsElement) return item.open;
+      return item.classList.contains("active");
     }
-    _animateIn(index) {
-      const li = this.el.children[index];
-      if (!li) return;
-      const body = li.querySelector(".collapsible-body");
-      const duration = this.options.inDuration;
-      body.style.transition = `max-height ${duration}ms ease-out`;
-      this._setExpanded(body);
-      setTimeout(() => {
-        if (typeof this.options.onOpenEnd === "function") {
-          this.options.onOpenEnd.call(this, li);
-        }
-      }, duration);
+    _setOpen(item, open) {
+      if (item instanceof HTMLDetailsElement) {
+        item.open = open;
+        return;
+      }
+      item.classList.toggle("active", open);
+      this._syncAria(item);
+      this._notify(item, open);
+    }
+    _headerOf(item) {
+      if (item instanceof HTMLDetailsElement) {
+        return item.querySelector(":scope > summary");
+      }
+      return item.querySelector(":scope > .collapsible-header");
+    }
+    _wrapDetailsBodies() {
+      this._items.forEach((item) => {
+        if (!(item instanceof HTMLDetailsElement)) return;
+        if (item.querySelector(":scope > .collapsible-body")) return;
+        const body = document.createElement("div");
+        body.className = "collapsible-body";
+        Array.from(item.childNodes).forEach((node) => {
+          if (node instanceof HTMLElement && node.tagName === "SUMMARY") return;
+          body.appendChild(node);
+        });
+        item.appendChild(body);
+        this._wrappedBodies.push(body);
+      });
     }
-    _animateOut(index) {
-      const li = this.el.children[index];
-      if (!li) return;
-      const body = li.querySelector(".collapsible-body");
-      const duration = this.options.outDuration;
-      body.style.transition = `max-height ${duration}ms ease-out`;
-      body.style.maxHeight = "0";
-      setTimeout(() => {
-        if (typeof this.options.onCloseEnd === "function") {
-          this.options.onCloseEnd.call(this, li);
-        }
-      }, duration);
+    _unwrapDetailsBodies() {
+      this._wrappedBodies.forEach((body) => {
+        const parent = body.parentNode;
+        if (!parent) return;
+        while (body.firstChild) parent.insertBefore(body.firstChild, body);
+        body.remove();
+      });
+      this._wrappedBodies = [];
+    }
+    _bodyOf(item) {
+      return item.querySelector(":scope > .collapsible-body");
+    }
+    _syncAria(item) {
+      if (item instanceof HTMLDetailsElement) return;
+      const header = this._headerOf(item);
+      const body = this._bodyOf(item);
+      if (!header) return;
+      header.setAttribute("aria-expanded", String(this._isOpen(item)));
+      if (body) {
+        if (!body.id) body.id = `collapsible-body-${Utils.guid()}`;
+        header.setAttribute("aria-controls", body.id);
+      }
+      if (!header.matches("a, button, summary")) {
+        header.setAttribute("role", "button");
+        if (header.tabIndex < 0) header.tabIndex = 0;
+      }
+    }
+    _setupEventHandlers() {
+      this.el.addEventListener("click", this._handleClick);
+      this.el.addEventListener("keydown", this._handleKeydown);
+      this.el.addEventListener("toggle", this._handleToggle, true);
+    }
+    _removeEventHandlers() {
+      this.el.removeEventListener("click", this._handleClick);
+      this.el.removeEventListener("keydown", this._handleKeydown);
+      this.el.removeEventListener("toggle", this._handleToggle, true);
+    }
+    _notify(item, opening) {
+      const start = opening ? this.options.onOpenStart : this.options.onCloseStart;
+      if (typeof start === "function") start.call(this, item);
+      const end = opening ? this.options.onOpenEnd : this.options.onCloseEnd;
+      if (typeof end !== "function") return;
+      const target = this._bodyOf(item) ?? item;
+      let done = false;
+      const finish = () => {
+        if (done) return;
+        done = true;
+        target.removeEventListener("transitionend", onEnd);
+        end.call(this, item);
+      };
+      const onEnd = (ev) => {
+        if (ev.target !== target) return;
+        finish();
+      };
+      target.addEventListener("transitionend", onEnd);
+      this._endTimers.push(window.setTimeout(finish, this._durationMs() + 50));
+    }
+    _durationMs() {
+      const raw = getComputedStyle(this.el).getPropertyValue("--md-comp-collapsible-duration").trim();
+      if (!raw) return 500;
+      if (raw.endsWith("ms")) return parseFloat(raw);
+      if (raw.endsWith("s")) return parseFloat(raw) * 1e3;
+      const n = parseFloat(raw);
+      return Number.isFinite(n) ? n : 500;
     }
   };
 
@@ -4842,38 +4886,22 @@ var Expressive = (() => {
   // src/ts/components/parallax.ts
   var _defaults15 = {
     responsiveThreshold: 0
-    // breakpoint for swipeable
   };
-  var _Parallax = class _Parallax extends Component {
+  var Parallax = class _Parallax extends Component {
     constructor(el, options) {
       super(el, options, _Parallax);
-      this._handleImageLoad = () => {
-        this._updateParallax();
-      };
       this.el["Expressive_Parallax"] = this;
       this.options = {
         ..._Parallax.defaults,
         ...options
       };
-      this._enabled = window.innerWidth > this.options.responsiveThreshold;
-      this._img = this.el.querySelector("img");
-      if (!this._img) {
-        console.error("Parallax: no <img> to move inside the .parallax element");
-        return;
+      if (!this.el.querySelector("img, video")) {
+        console.error("Parallax: no <img> or <video> to move inside the .parallax element");
       }
-      this._updateParallax();
-      this._setupEventHandlers();
-      this._setupStyles();
-      _Parallax._parallaxes.push(this);
     }
     static get defaults() {
       return _defaults15;
     }
-    /**
-     * Initializes instances of Parallax.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
     static init(els, options = {}) {
       return super.init(els, options, _Parallax);
     }
@@ -4881,84 +4909,9 @@ var Expressive = (() => {
       return el["Expressive_Parallax"];
     }
     destroy() {
-      const index = _Parallax._parallaxes.indexOf(this);
-      if (index >= 0) _Parallax._parallaxes.splice(index, 1);
-      if (this._img) this._img.style.transform = "";
-      this._removeEventHandlers();
       this.el["Expressive_Parallax"] = void 0;
     }
-    static _handleScroll() {
-      for (let i = 0; i < _Parallax._parallaxes.length; i++) {
-        const parallaxInstance = _Parallax._parallaxes[i];
-        parallaxInstance._updateParallax.call(parallaxInstance);
-      }
-    }
-    static _handleWindowResize() {
-      for (let i = 0; i < _Parallax._parallaxes.length; i++) {
-        const parallaxInstance = _Parallax._parallaxes[i];
-        parallaxInstance._enabled = window.innerWidth > parallaxInstance.options.responsiveThreshold;
-      }
-    }
-    _setupEventHandlers() {
-      this._img?.addEventListener("load", this._handleImageLoad);
-      if (_Parallax._parallaxes.length === 0) {
-        if (!_Parallax._handleWindowResizeThrottled) {
-          _Parallax._handleWindowResizeThrottled = Utils.throttle(_Parallax._handleWindowResize, 100);
-        }
-        window.addEventListener("scroll", _Parallax._requestScrollUpdate, { passive: true });
-        window.addEventListener("resize", _Parallax._handleWindowResizeThrottled, { passive: true });
-      }
-    }
-    _removeEventHandlers() {
-      this._img?.removeEventListener("load", this._handleImageLoad);
-      if (_Parallax._parallaxes.length === 0) {
-        window.removeEventListener("scroll", _Parallax._requestScrollUpdate);
-        window.removeEventListener("resize", _Parallax._handleWindowResizeThrottled);
-        if (_Parallax._scrollFrame !== null) {
-          cancelAnimationFrame(_Parallax._scrollFrame);
-          _Parallax._scrollFrame = null;
-        }
-      }
-    }
-    _setupStyles() {
-      if (this._img) this._img.style.opacity = "1";
-    }
-    _updateParallax() {
-      const rect = this.el.getBoundingClientRect();
-      const containerHeight = rect.height > 0 ? this.el.parentElement.offsetHeight : 500;
-      const imgHeight = this._img.offsetHeight;
-      const parallaxDist = imgHeight - containerHeight;
-      const top = rect.top + window.scrollY - document.documentElement.clientTop;
-      const bottom = top + containerHeight;
-      const scrollTop = Utils.getDocumentScrollTop();
-      const windowHeight = window.innerHeight;
-      const windowBottom = scrollTop + windowHeight;
-      const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
-      const parallax = parallaxDist * percentScrolled;
-      if (!this._enabled) {
-        this._img.style.transform = "";
-      } else if (bottom > scrollTop && top < scrollTop + windowHeight) {
-        this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`;
-      }
-    }
-  };
-  _Parallax._parallaxes = [];
-  _Parallax._scrollFrame = null;
-  /**
-   * Coalesce scroll events onto animation frames.
-   *
-   * The handler reads layout and then writes a transform, so running it more
-   * than once per frame is wasted work - and the 5ms throttle it replaces was
-   * short enough to let several run per frame anyway.
-   */
-  _Parallax._requestScrollUpdate = () => {
-    if (_Parallax._scrollFrame !== null) return;
-    _Parallax._scrollFrame = requestAnimationFrame(() => {
-      _Parallax._scrollFrame = null;
-      _Parallax._handleScroll();
-    });
   };
-  var Parallax = _Parallax;
 
   // src/ts/components/pushpin.ts
   var _defaults16 = {
@@ -6198,60 +6151,96 @@ var Expressive = (() => {
   var _TapTarget = class _TapTarget extends Component {
     constructor(el, options) {
       super(el, options, _TapTarget);
-      // Built once per instance; see the note in carousel.ts - the previous form
-      // returned a new throttled function on every resize and never invoked it.
-      this._handleThrottledResize = Utils.throttle(() => this._handleResize(), 200);
-      this._handleKeyboardInteraction = (e) => {
-        if (Utils.keys.ENTER.includes(e.key)) {
-          this._handleTargetToggle();
-        }
-      };
-      this._handleTargetToggle = () => {
-        if (!this.isOpen) this.open();
-        else this.close();
-      };
-      /*_handleOriginClick = () => {
-        this.close();
-      }*/
-      this._handleResize = () => {
-        this._calculatePositioning();
-      };
-      this._handleDocumentClick = (e) => {
-        const target = e.target;
-        if (!(target instanceof Element)) return;
-        if (!this.originEl.contains(target) && !target.closest(".tap-target-wrapper")) {
-          this.close();
-        }
-      };
+      this.wrapper = null;
+      this.waveEl = null;
+      this.contentEl = null;
+      this._createdWrapper = false;
+      this._createdWave = false;
+      this._usePopover = false;
+      this._liftedStatic = false;
+      this._opening = false;
       /**
        * Open Tap Target.
        */
       this.open = () => {
-        if (this.isOpen) return;
+        if (this.isOpen || !this.originEl || !this.wrapper) return;
+        _TapTarget._taptargets.forEach((other) => {
+          if (other !== this) other.close();
+        });
+        this._calculatePositioning();
         if (typeof this.options.onOpen === "function") {
           this.options.onOpen.call(this, this.originEl);
         }
         this.isOpen = true;
         this.wrapper.classList.add("open");
-        this.wrapper.ariaExpanded = "true";
-        document.body.addEventListener("click", this._handleDocumentClick, true);
-        document.body.addEventListener("keypress", this._handleDocumentClick, true);
-        document.body.addEventListener("touchend", this._handleDocumentClick);
+        this.originEl.setAttribute("aria-expanded", "true");
+        if (!this._usePopover) {
+          this.originEl.classList.add("tap-target-origin");
+          if (getComputedStyle(this.originEl).position === "static") {
+            this.originEl.style.position = "relative";
+            this._liftedStatic = true;
+          }
+        }
+        if (this._usePopover) {
+          this._opening = true;
+          try {
+            this.wrapper.showPopover();
+          } catch {
+          }
+          requestAnimationFrame(() => {
+            this._opening = false;
+          });
+        }
       };
       /**
        * Close Tap Target.
        */
       this.close = () => {
         if (!this.isOpen) return;
-        if (typeof this.options.onClose === "function") {
+        if (typeof this.options.onClose === "function" && this.originEl) {
           this.options.onClose.call(this, this.originEl);
         }
         this.isOpen = false;
-        this.wrapper.classList.remove("open");
-        this.wrapper.ariaExpanded = "false";
-        document.body.removeEventListener("click", this._handleDocumentClick, true);
-        document.body.removeEventListener("keypress", this._handleDocumentClick, true);
-        document.body.removeEventListener("touchend", this._handleDocumentClick);
+        this.wrapper?.classList.remove("open");
+        this.originEl?.setAttribute("aria-expanded", "false");
+        this.originEl?.classList.remove("tap-target-origin");
+        if (this._liftedStatic && this.originEl) {
+          this.originEl.style.position = "";
+          this._liftedStatic = false;
+        }
+        if (this._usePopover && this.wrapper) {
+          try {
+            this.wrapper.hidePopover();
+          } catch {
+          }
+        }
+      };
+      // Built once per instance; a fresh throttle per event never fires.
+      this._handleThrottledResize = Utils.throttle(() => this._handleResize(), 200);
+      this._handleOriginKeydown = (e) => {
+        if (Utils.keys.ENTER.includes(e.key) || e.key === " ") {
+          e.preventDefault();
+          this._handleTargetToggle();
+        }
+      };
+      this._handleTargetToggle = () => {
+        if (!this.isOpen) this.open();
+        else this.close();
+      };
+      this._handleResize = () => {
+        if (this.isOpen) this._calculatePositioning();
+      };
+      this._handlePopoverToggle = (e) => {
+        const state = "newState" in e ? String(e.newState) : "";
+        if (state === "open") return;
+        if (this._opening) {
+          try {
+            this.wrapper?.showPopover();
+          } catch {
+          }
+          return;
+        }
+        if (this.isOpen) this.close();
       };
       this.el["Expressive_TapTarget"] = this;
       this.options = {
@@ -6264,7 +6253,6 @@ var Expressive = (() => {
         console.error(`TapTarget: no element with id "${el.dataset.target ?? ""}" to attach to`);
         return;
       }
-      this.originEl.tabIndex = 0;
       this._setup();
       this._calculatePositioning();
       this._setupEventHandlers();
@@ -6273,11 +6261,6 @@ var Expressive = (() => {
     static get defaults() {
       return _defaults21;
     }
-    /**
-     * Initializes instances of TapTarget.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
     static init(els, options = {}) {
       return super.init(els, options, _TapTarget);
     }
@@ -6287,116 +6270,95 @@ var Expressive = (() => {
     destroy() {
       this.close();
       this._removeEventHandlers();
+      this._teardownDom();
       this.el["Expressive_TapTarget"] = void 0;
       const index = _TapTarget._taptargets.indexOf(this);
-      if (index >= 0) {
-        _TapTarget._taptargets.splice(index, 1);
-      }
-    }
-    _setupEventHandlers() {
-      if (!this.originEl) return;
-      this.originEl.addEventListener("click", this._handleTargetToggle);
-      this.originEl.addEventListener("keypress", this._handleKeyboardInteraction, true);
-      window.addEventListener("resize", this._handleThrottledResize);
-    }
-    _removeEventHandlers() {
-      if (!this.originEl) return;
-      this.originEl.removeEventListener("click", this._handleTargetToggle);
-      this.originEl.removeEventListener("keypress", this._handleKeyboardInteraction, true);
-      window.removeEventListener("resize", this._handleThrottledResize);
+      if (index >= 0) _TapTarget._taptargets.splice(index, 1);
     }
     _setup() {
-      this.wrapper = this.el.parentElement;
-      this.waveEl = this.wrapper.querySelector(".tap-target-wave");
-      this.el.parentElement.ariaExpanded = "false";
-      this.originEl.style.zIndex = "1002";
-      this.contentEl = this.el.querySelector(".tap-target-content");
-      if (!this.wrapper.classList.contains(".tap-target-wrapper")) {
+      const parent = this.el.parentElement;
+      if (parent?.classList.contains("tap-target-wrapper")) {
+        this.wrapper = parent;
+      } else {
         this.wrapper = document.createElement("div");
         this.wrapper.classList.add("tap-target-wrapper");
         this.el.before(this.wrapper);
         this.wrapper.append(this.el);
+        this._createdWrapper = true;
       }
+      this.contentEl = this.el.querySelector(".tap-target-content");
       if (!this.contentEl) {
         this.contentEl = document.createElement("div");
-        this.contentEl.classList.add("tap-target-content");
+        this.contentEl.className = "tap-target-content";
+        while (this.el.firstChild) this.contentEl.append(this.el.firstChild);
         this.el.append(this.contentEl);
       }
+      this.waveEl = this.el.querySelector(".tap-target-wave") ?? this.wrapper.querySelector(".tap-target-wave");
       if (!this.waveEl) {
         this.waveEl = document.createElement("div");
-        this.waveEl.classList.add("tap-target-wave");
-        this.wrapper.append(this.waveEl);
+        this.waveEl.className = "tap-target-wave";
+        this._createdWave = true;
+      }
+      this.el.prepend(this.waveEl);
+      this.el.setAttribute("role", "dialog");
+      this._labelFromHeading();
+      const origin = this.originEl;
+      origin.setAttribute("aria-expanded", "false");
+      origin.setAttribute("aria-controls", this.el.id || this._ensureId());
+      this._usePopover = typeof this.wrapper.showPopover === "function";
+      if (this._usePopover) {
+        this.wrapper.setAttribute("popover", "auto");
+      }
+    }
+    _ensureId() {
+      if (!this.el.id) this.el.id = `tap-target-${Utils.guid()}`;
+      return this.el.id;
+    }
+    _labelFromHeading() {
+      const heading = this.contentEl?.querySelector("h1, h2, h3, h4, h5, h6");
+      if (!heading) return;
+      if (!heading.id) heading.id = `tap-target-title-${Utils.guid()}`;
+      this.el.setAttribute("aria-labelledby", heading.id);
+    }
+    _teardownDom() {
+      if (this._createdWave) this.waveEl?.remove();
+      if (this._createdWrapper && this.wrapper) {
+        this.wrapper.before(this.el);
+        this.wrapper.remove();
+      }
+      this.wrapper = null;
+      this.waveEl = null;
+    }
+    _setupEventHandlers() {
+      if (!this.originEl) return;
+      this.originEl.addEventListener("click", this._handleTargetToggle);
+      if (!this.originEl.matches('button, a, [tabindex], .btn, [role="button"]')) {
+        this.originEl.tabIndex = 0;
+        this.originEl.addEventListener("keydown", this._handleOriginKeydown);
       }
+      this.wrapper?.addEventListener("toggle", this._handlePopoverToggle);
+      window.addEventListener("resize", this._handleThrottledResize, { passive: true });
     }
-    _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
-      };
+    _removeEventHandlers() {
+      if (!this.originEl) return;
+      this.originEl.removeEventListener("click", this._handleTargetToggle);
+      this.originEl.removeEventListener("keydown", this._handleOriginKeydown);
+      this.wrapper?.removeEventListener("toggle", this._handlePopoverToggle);
+      window.removeEventListener("resize", this._handleThrottledResize);
     }
     _calculatePositioning() {
-      let isFixed = getComputedStyle(this.originEl).position === "fixed";
-      if (!isFixed) {
-        let currentElem = this.originEl;
-        const parents = [];
-        while ((currentElem = currentElem.parentNode) && currentElem !== document)
-          parents.push(currentElem);
-        for (let i = 0; i < parents.length; i++) {
-          isFixed = getComputedStyle(parents[i]).position === "fixed";
-          if (isFixed) break;
-        }
-      }
-      const originWidth = this.originEl.offsetWidth;
-      const originHeight = this.originEl.offsetHeight;
-      const originOffset = this._offset(this.originEl);
-      const originTop = isFixed ? originOffset.top - Utils.getDocumentScrollTop() : originOffset.top;
-      const originLeft = isFixed ? originOffset.left - Utils.getDocumentScrollLeft() : originOffset.left;
-      const windowWidth = window.innerWidth;
-      const windowHeight = window.innerHeight;
-      const scrollBarWidth = windowWidth - document.documentElement.clientWidth;
-      const centerX = windowWidth / 2;
-      const centerY = windowHeight / 2;
-      const isLeft = originLeft <= centerX;
-      const isRight = originLeft > centerX;
-      const isTop = originTop <= centerY;
-      const isBottom = originTop > centerY;
-      const isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75;
-      const tapTargetWidth = this.el.offsetWidth;
-      const tapTargetHeight = this.el.offsetHeight;
-      const tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2;
-      const tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2;
-      const tapTargetPosition = isFixed ? "fixed" : "absolute";
-      const tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth;
-      const tapTargetTextHeight = tapTargetHeight / 2;
-      const tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0;
-      const tapTargetTextBottom = 0;
-      const tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0;
-      const tapTargetTextRight = 0;
-      const tapTargetTextPadding = originWidth;
-      const tapTargetTextAlign = isBottom ? "bottom" : "top";
-      const tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2;
-      const tapTargetWaveHeight = tapTargetWaveWidth;
-      const tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2;
-      const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2;
-      this.wrapper.style.top = isTop ? tapTargetTop + "px" : "";
-      this.wrapper.style.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + "px" : "";
-      this.wrapper.style.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight + "px" : "";
-      this.wrapper.style.left = isLeft ? tapTargetLeft + "px" : "";
-      this.wrapper.style.position = tapTargetPosition;
-      this.contentEl.style.width = tapTargetTextWidth + "px";
-      this.contentEl.style.height = tapTargetTextHeight + "px";
-      this.contentEl.style.top = tapTargetTextTop + "px";
-      this.contentEl.style.right = tapTargetTextRight + "px";
-      this.contentEl.style.bottom = tapTargetTextBottom + "px";
-      this.contentEl.style.left = tapTargetTextLeft + "px";
-      this.contentEl.style.padding = tapTargetTextPadding + "px";
-      this.contentEl.style.verticalAlign = tapTargetTextAlign;
-      this.waveEl.style.top = tapTargetWaveTop + "px";
-      this.waveEl.style.left = tapTargetWaveLeft + "px";
-      this.waveEl.style.width = tapTargetWaveWidth + "px";
-      this.waveEl.style.height = tapTargetWaveHeight + "px";
+      if (!this.originEl || !this.wrapper) return;
+      const rect = this.originEl.getBoundingClientRect();
+      const x = rect.left + rect.width / 2;
+      const y = rect.top + rect.height / 2;
+      const size = Math.max(rect.width, rect.height, 1);
+      this.wrapper.style.setProperty("--md-comp-tap-target-x", `${x}px`);
+      this.wrapper.style.setProperty("--md-comp-tap-target-y", `${y}px`);
+      this.wrapper.style.setProperty("--md-comp-tap-target-origin-size", `${size}px`);
+      const vertical = y <= window.innerHeight / 2 ? "top" : "bottom";
+      const onCenter = x >= window.innerWidth * 0.25 && x <= window.innerWidth * 0.75;
+      const horizontal = onCenter ? "center" : x <= window.innerWidth / 2 ? "left" : "right";
+      this.wrapper.dataset.edge = `${vertical}-${horizontal}`;
     }
   };
   _TapTarget._taptargets = [];
@@ -7140,7 +7102,7 @@ var Expressive = (() => {
         close.className = "circle";
         close.setAttribute("aria-label", "Dismiss");
         const icon = document.createElement("i");
-        icon.className = "material-icons";
+        icon.className = "material-symbols";
         icon.setAttribute("aria-hidden", "true");
         icon.textContent = "close";
         close.appendChild(icon);
@@ -7505,7 +7467,7 @@ var Expressive = (() => {
   }
 
   // src/ts/index.ts
-  var version = "0.2.0";
+  var version = "0.3.0";
   if (typeof document !== "undefined") {
     document.addEventListener("keydown", Utils.docHandleKeydown, true);
     document.addEventListener("keyup", Utils.docHandleKeyup, true);