fokus-styles 2.3.0 → 2.5.0

package/dist/js/fokus.js

@@ -110,15 +110,15 @@ var FokusStyles = (() => {
     }
   }
   function computePosition(referenceEl, floatingEl, options = {}) {
-    const { placement = "bottom", align = "center", offset = 8, padding = 8 } = options;
+    var _a;
+    const { placement = "bottom", align = "center", offset = 8, padding = 8, fallbackPlacements } = options;
     const referenceRect = referenceEl.getBoundingClientRect();
     const floatingRect = floatingEl.getBoundingClientRect();
     const viewportWidth = document.documentElement.clientWidth;
     const viewportHeight = document.documentElement.clientHeight;
-    let finalPlacement = placement;
-    if (!fitsPlacement(placement, referenceRect, floatingRect, offset, viewportWidth, viewportHeight) && fitsPlacement(OPPOSITE_PLACEMENT[placement], referenceRect, floatingRect, offset, viewportWidth, viewportHeight)) {
-      finalPlacement = OPPOSITE_PLACEMENT[placement];
-    }
+    const candidates = [...new Set(fallbackPlacements != null ? fallbackPlacements : [placement, OPPOSITE_PLACEMENT[placement], "bottom", "top", "right", "left"])].filter(Boolean);
+    const primaryCandidates = candidates.slice(0, 2);
+    const finalPlacement = (_a = primaryCandidates.find((candidate) => fitsPlacement(candidate, referenceRect, floatingRect, offset, viewportWidth, viewportHeight))) != null ? _a : placement;
     let top;
     let left;
     if (finalPlacement === "top" || finalPlacement === "bottom") {
@@ -132,10 +132,15 @@ var FokusStyles = (() => {
     const maxTop = Math.max(padding, viewportHeight - floatingRect.height - padding);
     left = Math.min(Math.max(left, padding), maxLeft);
     top = Math.min(Math.max(top, padding), maxTop);
+    const crossSize = finalPlacement === "top" || finalPlacement === "bottom" ? floatingRect.width : floatingRect.height;
+    const crossStart = finalPlacement === "top" || finalPlacement === "bottom" ? left : top;
+    const referenceCenter = finalPlacement === "top" || finalPlacement === "bottom" ? referenceRect.left + referenceRect.width / 2 : referenceRect.top + referenceRect.height / 2;
+    const crossOffset = Math.min(Math.max(referenceCenter - crossStart, 8), Math.max(8, crossSize - 8));
     return {
       top: top + window.scrollY,
       left: left + window.scrollX,
-      placement: finalPlacement
+      placement: finalPlacement,
+      arrowOffset: `${crossOffset}px`
     };
   }
   function watchPosition(referenceEl, floatingEl, options = {}) {
@@ -164,6 +169,10 @@ var FokusStyles = (() => {
     floatingEl.style.position = "absolute";
     floatingEl.style.top = `${position.top}px`;
     floatingEl.style.left = `${position.left}px`;
+    if (position.arrowOffset) {
+      floatingEl.style.setProperty("--fs-popover-arrow-offset", position.arrowOffset);
+      floatingEl.style.setProperty("--fs-tooltip-arrow-offset", position.arrowOffset);
+    }
   }
 
   // packages/fokus-js/js/core/overlay.js
@@ -385,7 +394,7 @@ var FokusStyles = (() => {
 
   // packages/fokus-js/js/dropdown.js
   var instances = createInstanceRegistry();
-  var Dropdown = class {
+  var Dropdown = class _Dropdown {
     constructor(toggleEl, options = {}) {
       var _a, _b, _c, _d;
       const targetSelector = toggleEl.getAttribute("data-fs-target");
@@ -428,6 +437,20 @@ var FokusStyles = (() => {
     static getInstance(el) {
       return instances.get(el);
     }
+    static getOrCreateInstance(el, options = {}) {
+      var _a;
+      return (_a = this.getInstance(el)) != null ? _a : new _Dropdown(el, options);
+    }
+    static show(el, options = {}) {
+      return this.getOrCreateInstance(el, options).show();
+    }
+    static hide(el) {
+      var _a;
+      return (_a = this.getInstance(el)) == null ? void 0 : _a.hide();
+    }
+    static toggle(el, options = {}) {
+      return this.getOrCreateInstance(el, options).toggle();
+    }
     _handleToggleClick(event) {
       event.preventDefault();
       this.toggle();
@@ -489,6 +512,7 @@ var FokusStyles = (() => {
         if (this.toggleEl.contains(event.target)) return;
         this.hide();
       });
+      this.toggleEl.dispatchEvent(new CustomEvent("fs:shown", { bubbles: true }));
       this.toggleEl.dispatchEvent(new CustomEvent("fs:dropdown:shown", { bubbles: true }));
     }
     hide() {
@@ -504,6 +528,7 @@ var FokusStyles = (() => {
       this._outsideClickCleanup = null;
       (_b = this._positionCleanup) == null ? void 0 : _b.call(this);
       this._positionCleanup = null;
+      this.toggleEl.dispatchEvent(new CustomEvent("fs:hidden", { bubbles: true }));
       this.toggleEl.dispatchEvent(new CustomEvent("fs:dropdown:hidden", { bubbles: true }));
     }
     toggle() {
@@ -530,9 +555,20 @@ var FokusStyles = (() => {
   // packages/fokus-js/js/tooltip.js
   var instances2 = createInstanceRegistry();
   var idCounter = 0;
+  var openInstance = null;
+  var DEFAULT_TOOLTIP_OFFSET = 8;
+  function toDelay(value, fallback = 0) {
+    if (value === null || value === void 0 || value === "") return fallback;
+    const parsed = Number(value);
+    return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback;
+  }
+  function parsePlacement(value = "top") {
+    const [placement, align = "center"] = value.split("-");
+    return { placement, align: ["start", "center", "end"].includes(align) ? align : "center" };
+  }
   var Tooltip = class {
     constructor(referenceEl, options = {}) {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
       const title = (_b = (_a = referenceEl.getAttribute("title")) != null ? _a : referenceEl.getAttribute("data-title")) != null ? _b : options.title;
       if (!title) {
         throw new Error("FokusStyles.Tooltip: elemento sem texto (atributo title/data-title).");
@@ -541,10 +577,18 @@ var FokusStyles = (() => {
       idCounter += 1;
       this.referenceEl = referenceEl;
       this.title = title;
-      this.placement = (_d = (_c = options.placement) != null ? _c : referenceEl.getAttribute("data-placement")) != null ? _d : "top";
+      const parsedPlacement = parsePlacement((_d = (_c = options.placement) != null ? _c : referenceEl.getAttribute("data-placement")) != null ? _d : "top");
+      this.placement = parsedPlacement.placement;
+      this.align = (_f = (_e = options.align) != null ? _e : referenceEl.getAttribute("data-align")) != null ? _f : parsedPlacement.align;
+      this.offset = toDelay((_g = options.offset) != null ? _g : referenceEl.getAttribute("data-offset"), DEFAULT_TOOLTIP_OFFSET);
+      this.showDelay = toDelay((_h = options.showDelay) != null ? _h : referenceEl.getAttribute("data-show-delay"), 0);
+      this.hideDelay = toDelay((_i = options.hideDelay) != null ? _i : referenceEl.getAttribute("data-hide-delay"));
       this.isOpen = false;
       this.id = `fokus-tooltip-${idCounter}`;
       this._positionCleanup = null;
+      this._showTimer = null;
+      this._hideTimer = null;
+      this._touchOpened = false;
       this._originalDescribedBy = referenceEl.getAttribute("aria-describedby");
       this.tooltipEl = document.createElement("div");
       this.tooltipEl.className = "fs-tooltip";
@@ -553,13 +597,32 @@ var FokusStyles = (() => {
       this.tooltipEl.innerHTML = '<div class="fs-tooltip-arrow"></div><div class="fs-tooltip-inner"></div>';
       this.tooltipEl.querySelector(".fs-tooltip-inner").textContent = this.title;
       document.body.appendChild(this.tooltipEl);
-      referenceEl.setAttribute("aria-describedby", this.id);
-      this._handleShow = this.show.bind(this);
-      this._handleHide = this.hide.bind(this);
-      referenceEl.addEventListener("mouseenter", this._handleShow);
-      referenceEl.addEventListener("mouseleave", this._handleHide);
+      this._addDescribedBy();
+      this._handleShow = () => this._scheduleShow(true);
+      this._handleHide = () => this._scheduleHide();
+      this._handlePointerEnter = () => this._scheduleShow();
+      this._handlePointerLeave = () => this._scheduleHide();
+      this._handlePointerDown = (event) => {
+        if (event.pointerType === "touch") {
+          if (this._touchOpened && this.isOpen) {
+            this.hideImmediate();
+            return;
+          }
+          this._touchOpened = true;
+          this._scheduleShow(true);
+        }
+      };
+      referenceEl.addEventListener("pointerenter", this._handlePointerEnter);
+      referenceEl.addEventListener("pointerleave", this._handlePointerLeave);
+      referenceEl.addEventListener("pointerdown", this._handlePointerDown);
+      referenceEl.addEventListener("mouseenter", this._handlePointerEnter);
+      referenceEl.addEventListener("mouseleave", this._handlePointerLeave);
       referenceEl.addEventListener("focus", this._handleShow);
       referenceEl.addEventListener("blur", this._handleHide);
+      this._handleDocumentPointerDown = (event) => {
+        if (this._touchOpened && !this.referenceEl.contains(event.target) && !this.tooltipEl.contains(event.target)) this.hide();
+      };
+      document.addEventListener("pointerdown", this._handleDocumentPointerDown, true);
       this._removeEscapeListener = onEscapeKey(() => {
         if (this.isOpen) this.hide();
       });
@@ -568,9 +631,44 @@ var FokusStyles = (() => {
     static getInstance(el) {
       return instances2.get(el);
     }
+    _clearTimers() {
+      clearTimeout(this._showTimer);
+      clearTimeout(this._hideTimer);
+      this._showTimer = null;
+      this._hideTimer = null;
+    }
+    _addDescribedBy() {
+      var _a;
+      const ids = new Set(((_a = this.referenceEl.getAttribute("aria-describedby")) != null ? _a : "").split(/\s+/).filter(Boolean));
+      ids.add(this.id);
+      this.referenceEl.setAttribute("aria-describedby", [...ids].join(" "));
+    }
+    _scheduleShow(immediate = false) {
+      this._clearTimers();
+      if (this.isOpen) return;
+      const delay = immediate ? 0 : this.showDelay;
+      if (delay === 0) {
+        this.show();
+        return;
+      }
+      this._showTimer = setTimeout(() => this.show(), delay);
+    }
+    _scheduleHide(immediate = false) {
+      this._clearTimers();
+      if (!this.isOpen) return;
+      const delay = immediate ? 0 : this.hideDelay;
+      if (delay === 0) {
+        this.hide();
+        return;
+      }
+      this._hideTimer = setTimeout(() => this.hide(), delay);
+    }
     show() {
       var _a;
+      this._clearTimers();
       if (this.isOpen) return;
+      if (openInstance && openInstance !== this) openInstance.hide(true);
+      openInstance = this;
       this.isOpen = true;
       const theme = (_a = this.referenceEl.closest("[data-theme]")) == null ? void 0 : _a.getAttribute("data-theme");
       if (theme) {
@@ -579,23 +677,31 @@ var FokusStyles = (() => {
         this.tooltipEl.removeAttribute("data-theme");
       }
       this.tooltipEl.classList.add("is-open");
-      const position = computePosition(this.referenceEl, this.tooltipEl, { placement: this.placement, offset: 10 });
+      const position = computePosition(this.referenceEl, this.tooltipEl, { placement: this.placement, align: this.align, offset: this.offset });
       applyPosition(this.tooltipEl, position);
       this._positionCleanup = watchPosition(this.referenceEl, this.tooltipEl, {
         placement: this.placement,
-        offset: 10
+        align: this.align,
+        offset: this.offset
       });
       this.tooltipEl.setAttribute("data-placement", position.placement);
+      this.tooltipEl.setAttribute("data-align", this.align);
       this.referenceEl.dispatchEvent(new CustomEvent("fs:tooltip:shown", { bubbles: true }));
     }
     hide() {
+      this.hideImmediate();
+    }
+    hideImmediate() {
       var _a;
+      this._clearTimers();
       if (!this.isOpen) return;
       this.isOpen = false;
+      this._touchOpened = false;
       this.tooltipEl.classList.remove("is-open");
       (_a = this._positionCleanup) == null ? void 0 : _a.call(this);
       this._positionCleanup = null;
       this.referenceEl.dispatchEvent(new CustomEvent("fs:tooltip:hidden", { bubbles: true }));
+      if (openInstance === this) openInstance = null;
     }
     toggle() {
       if (this.isOpen) {
@@ -605,11 +711,16 @@ var FokusStyles = (() => {
       }
     }
     dispose() {
-      this.hide();
-      this.referenceEl.removeEventListener("mouseenter", this._handleShow);
-      this.referenceEl.removeEventListener("mouseleave", this._handleHide);
+      this.hideImmediate();
+      this._clearTimers();
+      this.referenceEl.removeEventListener("pointerenter", this._handlePointerEnter);
+      this.referenceEl.removeEventListener("pointerleave", this._handlePointerLeave);
+      this.referenceEl.removeEventListener("pointerdown", this._handlePointerDown);
+      this.referenceEl.removeEventListener("mouseenter", this._handlePointerEnter);
+      this.referenceEl.removeEventListener("mouseleave", this._handlePointerLeave);
       this.referenceEl.removeEventListener("focus", this._handleShow);
       this.referenceEl.removeEventListener("blur", this._handleHide);
+      document.removeEventListener("pointerdown", this._handleDocumentPointerDown, true);
       this._removeEscapeListener();
       if (this._originalDescribedBy === null) this.referenceEl.removeAttribute("aria-describedby");
       else this.referenceEl.setAttribute("aria-describedby", this._originalDescribedBy);
@@ -623,6 +734,7 @@ var FokusStyles = (() => {
   var instances3 = createInstanceRegistry();
   var idCounter2 = 0;
   var HOVER_HIDE_DELAY = 100;
+  var openPopovers = /* @__PURE__ */ new Set();
   var Popover = class {
     constructor(triggerEl, options = {}) {
       var _a, _b, _c, _d, _e, _f;
@@ -640,6 +752,7 @@ var FokusStyles = (() => {
       this._outsideClickCleanup = null;
       this._removeEscapeListener = null;
       this._hideTimer = null;
+      this._suppressNextFocus = false;
       this._positionCleanup = null;
       this._originalParent = popoverEl.parentNode;
       this._originalNextSibling = popoverEl.nextSibling;
@@ -653,6 +766,11 @@ var FokusStyles = (() => {
         if (!headerEl.id) headerEl.id = `fokus-popover-header-${idCounter2}`;
         popoverEl.setAttribute("aria-labelledby", headerEl.id);
       }
+      const descriptionEl = popoverEl.querySelector(".fs-popover-text");
+      if (descriptionEl) {
+        if (!descriptionEl.id) descriptionEl.id = `fokus-popover-text-${idCounter2}`;
+        popoverEl.setAttribute("aria-describedby", descriptionEl.id);
+      }
       triggerEl.setAttribute("aria-controls", popoverEl.id);
       triggerEl.setAttribute("aria-expanded", "false");
       this._handleDismissClick = this._handleDismissClick.bind(this);
@@ -684,7 +802,13 @@ var FokusStyles = (() => {
         this.popoverEl.addEventListener("mouseenter", this._handleMouseEnter);
         this.popoverEl.addEventListener("mouseleave", this._handleMouseLeave);
       } else if (this.trigger === "focus") {
-        this._handleTriggerFocus = () => this.show();
+        this._handleTriggerFocus = () => {
+          if (this._suppressNextFocus) {
+            this._suppressNextFocus = false;
+            return;
+          }
+          this.show();
+        };
         this._handleTriggerFocusOut = (event) => {
           if (this.popoverEl.contains(event.relatedTarget)) return;
           this.hide();
@@ -707,7 +831,12 @@ var FokusStyles = (() => {
     }
     _handleDismissClick(event) {
       if (event.target.closest('[data-fs-dismiss="popover"]')) {
+        const restoreFocus = this.popoverEl.contains(document.activeElement);
+        if (restoreFocus && this.trigger === "focus") this._suppressNextFocus = true;
         this.hide();
+        if (restoreFocus && typeof this.triggerEl.focus === "function") {
+          this.triggerEl.focus();
+        }
       }
     }
     show() {
@@ -721,6 +850,9 @@ var FokusStyles = (() => {
         this.popoverEl.removeAttribute("data-theme");
       }
       this.popoverEl.classList.add("is-open");
+      openPopovers.forEach((popover) => {
+        if (popover !== this) popover.hide();
+      });
       const position = computePosition(this.triggerEl, this.popoverEl, {
         placement: this.placement,
         align: this.align,
@@ -733,6 +865,7 @@ var FokusStyles = (() => {
         offset: 10
       });
       this.popoverEl.setAttribute("data-placement", position.placement);
+      openPopovers.add(this);
       this.triggerEl.setAttribute("aria-expanded", "true");
       if (this.trigger === "click") {
         this._outsideClickCleanup = onClickOutside(this.popoverEl, (event) => {
@@ -746,6 +879,7 @@ var FokusStyles = (() => {
       var _a, _b;
       if (!this.isOpen) return;
       this.isOpen = false;
+      openPopovers.delete(this);
       this.popoverEl.classList.remove("is-open");
       (_a = this._positionCleanup) == null ? void 0 : _a.call(this);
       this._positionCleanup = null;
@@ -975,12 +1109,25 @@ var FokusStyles = (() => {
     // fs:stepper:beforechange): preventDefault() bloqueia a remoção.
     dismiss() {
       if (this._isLoading) return false;
+      const dismissButton = this.tagEl.querySelector('[data-fs-dismiss="tag"]');
+      const shouldRestoreFocus = dismissButton && document.activeElement === dismissButton;
       const event = new CustomEvent("fs:tag:dismissed", { bubbles: true, cancelable: true });
       this.tagEl.dispatchEvent(event);
       if (event.defaultPrevented) return false;
+      const focusTarget = shouldRestoreFocus ? this._getFocusTarget() : null;
       this.tagEl.remove();
+      focusTarget == null ? void 0 : focusTarget.focus();
       return true;
     }
+    _getFocusTarget() {
+      const group = this.tagEl.closest(".fs-tag-group");
+      if (!group) return null;
+      const buttons = [...group.querySelectorAll('[data-fs-dismiss="tag"]')].filter((button) => !button.disabled && !button.hidden && button.getAttribute("aria-hidden") !== "true");
+      const currentButton = this.tagEl.querySelector('[data-fs-dismiss="tag"]');
+      const currentIndex = buttons.indexOf(currentButton);
+      const remaining = buttons.filter((button) => button !== currentButton);
+      return remaining[currentIndex] || remaining[currentIndex - 1] || null;
+    }
     // Estado útil enquanto uma remoção ou atualização assíncrona está pendente.
     // Além da aparência, bloqueia o dismiss e comunica o estado a AT.
     setLoading(loading) {
@@ -1422,7 +1569,7 @@ var FokusStyles = (() => {
   // packages/fokus-js/js/tabs.js
   var instances11 = createInstanceRegistry();
   var idCounter6 = 0;
-  var Tabs = class {
+  var Tabs = class _Tabs {
     constructor(tablistEl) {
       this.tablistEl = tablistEl;
       this.tabs = Array.from(tablistEl.querySelectorAll(".fs-nav-link"));
@@ -1453,6 +1600,17 @@ var FokusStyles = (() => {
     static getInstance(el) {
       return instances11.get(el);
     }
+    static getOrCreateInstance(el) {
+      var _a;
+      return (_a = this.getInstance(el)) != null ? _a : new _Tabs(el);
+    }
+    static show(el, tab) {
+      return this.getOrCreateInstance(el).show(tab);
+    }
+    static dispose(el) {
+      var _a;
+      return (_a = this.getInstance(el)) == null ? void 0 : _a.dispose();
+    }
     _handleClick(event) {
       const tab = event.target.closest(".fs-nav-link:not(.is-disabled)");
       if (!tab || !this.tabs.includes(tab)) return;
@@ -1485,6 +1643,7 @@ var FokusStyles = (() => {
         pane == null ? void 0 : pane.classList.toggle("is-active", isActive);
         if (pane) pane.hidden = !isActive;
       });
+      tab.dispatchEvent(new CustomEvent("fs:shown", { bubbles: true }));
       tab.dispatchEvent(
         new CustomEvent("fs:tab:changed", { bubbles: true, detail: { target: tab.getAttribute("data-fs-target") } })
       );
@@ -1506,11 +1665,37 @@ var FokusStyles = (() => {
       this.autohide = toastEl.getAttribute("data-autohide") !== "false";
       this.isOpen = false;
       this._hideTimer = null;
+      this._paused = false;
+      this._remaining = this.delay;
+      this._startedAt = 0;
+      this._progressTimer = null;
       toastEl.setAttribute("role", "status");
       toastEl.setAttribute("aria-live", "polite");
       toastEl.style.display = "none";
       this._handleDismissClick = this._handleDismissClick.bind(this);
+      this._pause = () => {
+        if (!this.isOpen || this._paused) return;
+        this._paused = true;
+        clearTimeout(this._hideTimer);
+        if (this.autohide && this._startedAt) {
+          this._remaining = Math.max(0, this._remaining - (Date.now() - this._startedAt));
+        }
+        this._updateProgress();
+        clearInterval(this._progressTimer);
+        this.toastEl.classList.add("is-paused");
+      };
+      this._resume = () => {
+        if (!this.isOpen || !this._paused) return;
+        this._paused = false;
+        this.toastEl.classList.remove("is-paused");
+        this._startProgress();
+        if (this.autohide) this._scheduleHide();
+      };
       toastEl.addEventListener("click", this._handleDismissClick);
+      toastEl.addEventListener("mouseenter", this._pause);
+      toastEl.addEventListener("mouseleave", this._resume);
+      toastEl.addEventListener("focusin", this._pause);
+      toastEl.addEventListener("focusout", this._resume);
       instances12.set(toastEl, this);
     }
     static getInstance(el) {
@@ -1525,20 +1710,59 @@ var FokusStyles = (() => {
       if (this.isOpen) return;
       this.toastEl.dispatchEvent(new CustomEvent("fs:show", { bubbles: true }));
       this.isOpen = true;
-      expand(this.toastEl).then(() => {
+      this._remaining = this.delay;
+      this._startedAt = Date.now();
+      this.toastEl.style.setProperty("--fs-toast-duration", `${this.delay}ms`);
+      const expansion = expand(this.toastEl);
+      this.toastEl.classList.remove("is-progressing");
+      void this.toastEl.offsetWidth;
+      if (this.toastEl.getAttribute("data-toast-progress") === "true" && this.autohide) {
+        this.toastEl.classList.add("is-progressing");
+        this._startProgress();
+      }
+      expansion.then(() => {
         this.toastEl.dispatchEvent(new CustomEvent("fs:shown", { bubbles: true }));
         this.toastEl.dispatchEvent(new CustomEvent("fs:toast:shown", { bubbles: true }));
       });
-      if (this.autohide) {
-        this._hideTimer = setTimeout(() => this.hide(), this.delay);
+      this._scheduleHide();
+    }
+    _scheduleHide() {
+      clearTimeout(this._hideTimer);
+      if (this.autohide && !this._paused) {
+        this._startedAt = Date.now();
+        this._hideTimer = setTimeout(() => this.hide(), this._remaining);
       }
     }
+    _updateProgress() {
+      if (this.toastEl.getAttribute("data-toast-progress") !== "true" || !this.autohide) return;
+      const percentage = Math.max(0, Math.min(100, this._remaining / this.delay * 100));
+      const progressEl = this.toastEl.querySelector(".fs-toast-progress");
+      if (progressEl) progressEl.style.inlineSize = `${percentage}%`;
+    }
+    _startProgress() {
+      if (this.toastEl.getAttribute("data-toast-progress") !== "true" || !this.autohide) return;
+      clearInterval(this._progressTimer);
+      this._updateProgress();
+      this._progressTimer = setInterval(() => {
+        if (!this.isOpen || this._paused) return;
+        this._remaining = Math.max(0, this.delay - (Date.now() - this._startedAt));
+        this._updateProgress();
+      }, 50);
+    }
     hide() {
       if (!this.isOpen) return;
       this.toastEl.dispatchEvent(new CustomEvent("fs:hide", { bubbles: true }));
       this.isOpen = false;
       clearTimeout(this._hideTimer);
       this._hideTimer = null;
+      clearInterval(this._progressTimer);
+      this._progressTimer = null;
+      this._startedAt = 0;
+      this._remaining = this.delay;
+      this.toastEl.classList.remove("is-paused");
+      this.toastEl.classList.remove("is-progressing");
+      const progressEl = this.toastEl.querySelector(".fs-toast-progress");
+      if (progressEl) progressEl.style.removeProperty("inline-size");
       collapse(this.toastEl).then(() => {
         this.toastEl.dispatchEvent(new CustomEvent("fs:hidden", { bubbles: true }));
         this.toastEl.dispatchEvent(new CustomEvent("fs:toast:hidden", { bubbles: true }));
@@ -1553,7 +1777,12 @@ var FokusStyles = (() => {
     }
     dispose() {
       clearTimeout(this._hideTimer);
+      clearInterval(this._progressTimer);
       this.toastEl.removeEventListener("click", this._handleDismissClick);
+      this.toastEl.removeEventListener("mouseenter", this._pause);
+      this.toastEl.removeEventListener("mouseleave", this._resume);
+      this.toastEl.removeEventListener("focusin", this._pause);
+      this.toastEl.removeEventListener("focusout", this._resume);
       instances12.delete(this.toastEl);
     }
   };
@@ -1562,7 +1791,7 @@ var FokusStyles = (() => {
   // packages/fokus-js/js/carousel.js
   var instances13 = createInstanceRegistry();
   var interactiveSelector = "a, button, input, select, textarea, label, [contenteditable='true']";
-  var Carousel = class {
+  var Carousel = class _Carousel {
     constructor(carouselEl) {
       var _a, _b, _c;
       this.carouselEl = carouselEl;
@@ -1643,6 +1872,19 @@ var FokusStyles = (() => {
     static getInstance(el) {
       return instances13.get(el);
     }
+    static getOrCreateInstance(el) {
+      var _a;
+      return (_a = this.getInstance(el)) != null ? _a : new _Carousel(el);
+    }
+    static next(el) {
+      return this.getOrCreateInstance(el).next();
+    }
+    static prev(el) {
+      return this.getOrCreateInstance(el).prev();
+    }
+    static goTo(el, index) {
+      return this.getOrCreateInstance(el).goTo(index);
+    }
     _isDocumentVisible() {
       return document.visibilityState !== "hidden";
     }
@@ -1707,6 +1949,9 @@ var FokusStyles = (() => {
       if (to === from) return;
       this.index = to;
       this._render();
+      this.carouselEl.dispatchEvent(
+        new CustomEvent("fs:shown", { bubbles: true, detail: { from, to } })
+      );
       this.carouselEl.dispatchEvent(
         new CustomEvent("fs:carousel:slid", { bubbles: true, detail: { from, to } })
       );