fokus-styles 2.3.0 → 2.5.0

package/packages/fokus-components/scss/forms/_forms.scss

@@ -2,6 +2,22 @@
 @use "../../../fokus-core/scss/tools" as *;
 
 @layer components {
+  .fs-form-fieldset {
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--fs-space-3);
+    border: var(--fs-border-width) solid var(--fs-color-border);
+    border-radius: var(--fs-radius-md);
+  }
+
+  .fs-form-fieldset > legend {
+    max-inline-size: 100%;
+    padding-inline: var(--fs-space-1);
+    color: var(--fs-color-text);
+    font-size: $font-size-sm;
+    font-weight: $font-weight-semibold;
+  }
+
   .fs-form-row {
     display: flex;
     flex-direction: row;

package/packages/fokus-core/scss/base/_accessibility.scss

@@ -10,6 +10,20 @@
       outline: 2px solid CanvasText;
       outline-offset: 2px;
     }
+
+    button,
+    [role="button"],
+    input,
+    select,
+    textarea,
+    .fs-btn {
+      border-color: ButtonText;
+      forced-color-adjust: auto;
+    }
+
+    .fs-u-focus-ring:focus-visible {
+      outline: 3px solid Highlight;
+    }
   }
 }
 

package/packages/fokus-core/scss/tokens/_root.scss

@@ -75,6 +75,8 @@
     --fs-component-overlay-backdrop: rgb(0 0 0 / 55%);
     --fs-component-panel-radius: var(--fs-radius-md);
     --fs-component-panel-shadow: var(--fs-shadow-lg);
+    --fs-contrast-border-width: var(--fs-border-width);
+    --fs-contrast-focus-width: var(--fs-focus-width);
 
     // Referência dos limiares usados pelos utilitários `@container` (ver
     // `packages/fokus-utilities/scss/utilities/_container-queries.scss`).
@@ -128,4 +130,13 @@
       }
     }
   }
+
+  @media (prefers-contrast: more) {
+    :root {
+      --fs-contrast-border-width: 2px;
+      --fs-contrast-focus-width: 3px;
+      --fs-focus-width: var(--fs-contrast-focus-width);
+      --fs-border-width: var(--fs-contrast-border-width);
+    }
+  }
 }

package/packages/fokus-js/js/carousel.d.ts

@@ -4,6 +4,10 @@ export class Carousel {
   constructor(carouselEl: HTMLElement);
 
   static getInstance(el: Element): Carousel | undefined;
+  static getOrCreateInstance(el: Element): Carousel;
+  static next(el: Element): void;
+  static prev(el: Element): void;
+  static goTo(el: Element, index: number): void;
 
   next(): void;
   prev(): void;

package/packages/fokus-js/js/carousel.js

@@ -91,6 +91,11 @@ export class Carousel {
     return instances.get(el);
   }
 
+  static getOrCreateInstance(el) { return this.getInstance(el) ?? 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";
   }
@@ -165,6 +170,9 @@ export class Carousel {
 
     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 } }),
     );

package/packages/fokus-js/js/core/positioning.js

@@ -32,21 +32,18 @@ function alignCrossAxis(align, referenceStart, referenceSize, floatingSize) {
 }
 
 export function computePosition(referenceEl, floatingEl, options = {}) {
-  const { placement = "bottom", align = "center", offset = 8, padding = 8 } = options;
+  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 ?? [placement, OPPOSITE_PLACEMENT[placement], "bottom", "top", "right", "left"])]
+    .filter(Boolean);
+  const primaryCandidates = candidates.slice(0, 2);
+  const finalPlacement = primaryCandidates.find((candidate) => fitsPlacement(candidate, referenceRect, floatingRect, offset, viewportWidth, viewportHeight))
+    ?? placement;
 
   let top;
   let left;
@@ -70,10 +67,18 @@ export function computePosition(referenceEl, floatingEl, options = {}) {
   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,
+    arrowOffset: `${crossOffset}px`,
   };
 }
 
@@ -109,4 +114,8 @@ export function applyPosition(floatingEl, position) {
   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);
+  }
 }

package/packages/fokus-js/js/dropdown.d.ts

@@ -13,6 +13,10 @@ export class Dropdown {
   constructor(toggleEl: HTMLElement, options?: DropdownOptions);
 
   static getInstance(el: Element): Dropdown | undefined;
+  static getOrCreateInstance(el: Element, options?: DropdownOptions): Dropdown;
+  static show(el: Element, options?: DropdownOptions): void;
+  static hide(el: Element): void;
+  static toggle(el: Element, options?: DropdownOptions): void;
 
   show(): void;
   hide(): void;

package/packages/fokus-js/js/dropdown.js

@@ -57,6 +57,11 @@ export class Dropdown {
     return instances.get(el);
   }
 
+  static getOrCreateInstance(el, options = {}) { return this.getInstance(el) ?? new Dropdown(el, options); }
+  static show(el, options = {}) { return this.getOrCreateInstance(el, options).show(); }
+  static hide(el) { return this.getInstance(el)?.hide(); }
+  static toggle(el, options = {}) { return this.getOrCreateInstance(el, options).toggle(); }
+
   _handleToggleClick(event) {
     event.preventDefault();
     this.toggle();
@@ -127,6 +132,7 @@ export class Dropdown {
       this.hide();
     });
 
+    this.toggleEl.dispatchEvent(new CustomEvent("fs:shown", { bubbles: true }));
     this.toggleEl.dispatchEvent(new CustomEvent("fs:dropdown:shown", { bubbles: true }));
   }
 
@@ -145,6 +151,7 @@ export class Dropdown {
     this._positionCleanup?.();
     this._positionCleanup = null;
 
+    this.toggleEl.dispatchEvent(new CustomEvent("fs:hidden", { bubbles: true }));
     this.toggleEl.dispatchEvent(new CustomEvent("fs:dropdown:hidden", { bubbles: true }));
   }
 

package/packages/fokus-js/js/popover.js

@@ -6,6 +6,7 @@ import { autoInit, createInstanceRegistry } from "./core/register.js";
 const instances = createInstanceRegistry();
 let idCounter = 0;
 const HOVER_HIDE_DELAY = 100;
+const openPopovers = new Set();
 
 export class Popover {
   constructor(triggerEl, options = {}) {
@@ -25,6 +26,7 @@ export class Popover {
     this._outsideClickCleanup = null;
     this._removeEscapeListener = null;
     this._hideTimer = null;
+    this._suppressNextFocus = false;
     this._positionCleanup = null;
     this._originalParent = popoverEl.parentNode;
     this._originalNextSibling = popoverEl.nextSibling;
@@ -43,6 +45,12 @@ export class Popover {
       popoverEl.setAttribute("aria-labelledby", headerEl.id);
     }
 
+    const descriptionEl = popoverEl.querySelector(".fs-popover-text");
+    if (descriptionEl) {
+      if (!descriptionEl.id) descriptionEl.id = `fokus-popover-text-${idCounter}`;
+      popoverEl.setAttribute("aria-describedby", descriptionEl.id);
+    }
+
     triggerEl.setAttribute("aria-controls", popoverEl.id);
     triggerEl.setAttribute("aria-expanded", "false");
 
@@ -80,7 +88,13 @@ export class Popover {
       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();
@@ -105,7 +119,12 @@ export class Popover {
 
   _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();
+      }
     }
   }
 
@@ -122,6 +141,10 @@ export class Popover {
 
     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,
@@ -134,6 +157,7 @@ export class Popover {
       offset: 10,
     });
     this.popoverEl.setAttribute("data-placement", position.placement);
+    openPopovers.add(this);
 
     this.triggerEl.setAttribute("aria-expanded", "true");
 
@@ -150,6 +174,7 @@ export class Popover {
   hide() {
     if (!this.isOpen) return;
     this.isOpen = false;
+    openPopovers.delete(this);
 
     this.popoverEl.classList.remove("is-open");
     this._positionCleanup?.();

package/packages/fokus-js/js/tabs.d.ts

@@ -4,6 +4,9 @@ export class Tabs {
   constructor(tablistEl: HTMLElement);
 
   static getInstance(el: Element): Tabs | undefined;
+  static getOrCreateInstance(el: Element): Tabs;
+  static show(el: Element, tab: HTMLElement): void;
+  static dispose(el: Element): void;
 
   show(tab: HTMLElement): void;
   dispose(): void;

package/packages/fokus-js/js/tabs.js

@@ -45,6 +45,10 @@ export class Tabs {
     return instances.get(el);
   }
 
+  static getOrCreateInstance(el) { return this.getInstance(el) ?? new Tabs(el); }
+  static show(el, tab) { return this.getOrCreateInstance(el).show(tab); }
+  static dispose(el) { return this.getInstance(el)?.dispose(); }
+
   _handleClick(event) {
     const tab = event.target.closest(".fs-nav-link:not(.is-disabled)");
     if (!tab || !this.tabs.includes(tab)) return;
@@ -86,6 +90,7 @@ export class Tabs {
       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") } }),
     );

package/packages/fokus-js/js/tag.js

@@ -33,14 +33,31 @@ export class Tag {
   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?.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) {

package/packages/fokus-js/js/toast.js

@@ -10,13 +10,39 @@ export class Toast {
     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);
 
     instances.set(toastEl, this);
   }
@@ -35,17 +61,52 @@ export class Toast {
     if (this.isOpen) return;
     this.toastEl.dispatchEvent(new CustomEvent("fs:show", { bubbles: true }));
     this.isOpen = true;
+    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();
+    }
 
-    expand(this.toastEl).then(() => {
+    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 }));
@@ -53,6 +114,14 @@ export class Toast {
 
     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 }));
@@ -70,7 +139,12 @@ export class Toast {
 
   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);
     instances.delete(this.toastEl);
   }
 }

package/packages/fokus-js/js/tooltip.d.ts

@@ -1,8 +1,15 @@
 import type { Placement } from "./core/positioning.js";
 
+export type TooltipAlign = "start" | "center" | "end";
+export type TooltipPlacement = Placement | `${Placement}-${Exclude<TooltipAlign, "center">}`;
+
 export interface TooltipOptions {
-  placement?: Placement;
+  placement?: TooltipPlacement;
+  align?: TooltipAlign;
+  offset?: number;
   title?: string;
+  showDelay?: number;
+  hideDelay?: number;
 }
 
 export class Tooltip {

package/packages/fokus-js/js/tooltip.js

@@ -4,6 +4,19 @@ import { autoInit, createInstanceRegistry } from "./core/register.js";
 
 const instances = createInstanceRegistry();
 let idCounter = 0;
+let openInstance = null;
+const DEFAULT_TOOLTIP_OFFSET = 8;
+
+function toDelay(value, fallback = 0) {
+  if (value === null || value === undefined || 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" };
+}
 
 export class Tooltip {
   constructor(referenceEl, options = {}) {
@@ -19,10 +32,18 @@ export class Tooltip {
 
     this.referenceEl = referenceEl;
     this.title = title;
-    this.placement = options.placement ?? referenceEl.getAttribute("data-placement") ?? "top";
+    const parsedPlacement = parsePlacement(options.placement ?? referenceEl.getAttribute("data-placement") ?? "top");
+    this.placement = parsedPlacement.placement;
+    this.align = options.align ?? referenceEl.getAttribute("data-align") ?? parsedPlacement.align;
+    this.offset = toDelay(options.offset ?? referenceEl.getAttribute("data-offset"), DEFAULT_TOOLTIP_OFFSET);
+    this.showDelay = toDelay(options.showDelay ?? referenceEl.getAttribute("data-show-delay"), 0);
+    this.hideDelay = toDelay(options.hideDelay ?? 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");
@@ -33,16 +54,36 @@ export class Tooltip {
     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();
     });
@@ -54,8 +95,46 @@ export class Tooltip {
     return instances.get(el);
   }
 
+  _clearTimers() {
+    clearTimeout(this._showTimer);
+    clearTimeout(this._hideTimer);
+    this._showTimer = null;
+    this._hideTimer = null;
+  }
+
+  _addDescribedBy() {
+    const ids = new Set((this.referenceEl.getAttribute("aria-describedby") ?? "").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() {
+    this._clearTimers();
     if (this.isOpen) return;
+    if (openInstance && openInstance !== this) openInstance.hide(true);
+    openInstance = this;
     this.isOpen = true;
 
     const theme = this.referenceEl.closest("[data-theme]")?.getAttribute("data-theme");
@@ -67,26 +146,35 @@ export class Tooltip {
 
     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() {
+    this._clearTimers();
     if (!this.isOpen) return;
     this.isOpen = false;
+    this._touchOpened = false;
 
     this.tooltipEl.classList.remove("is-open");
     this._positionCleanup?.();
     this._positionCleanup = null;
 
     this.referenceEl.dispatchEvent(new CustomEvent("fs:tooltip:hidden", { bubbles: true }));
+    if (openInstance === this) openInstance = null;
   }
 
   toggle() {
@@ -98,11 +186,16 @@ export class Tooltip {
   }
 
   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);