@vielzeug/refine 1.1.1

package/dist/overlay/shared/use-floating-trigger.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-floating-trigger.cjs","names":[],"sources":["../../../src/overlay/shared/use-floating-trigger.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport { computePosition, flip, offset, shift } from '@vielzeug/orbit';\nimport { type Readable, type Signal, signal, watch } from '@vielzeug/ripple';\n\nimport { lifecycleSignal, createOverlayControl, type DialogCloseReason, type OverlayOpenReason } from '../../headless';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type FloatingTriggerType = 'click' | 'focus' | 'hover';\n\nexport type AriaBindFn = (triggerEl: HTMLElement) => () => void;\n\nexport type FloatingTriggerOptions = {\n  /** ARIA binding factory: called with the trigger element, returns a cleanup. */\n  bindTriggerAria: AriaBindFn;\n  /** If true, disable all trigger interactions and close if open. */\n  disabled: Readable<boolean>;\n  /** Returns the host element (e.g. ore-popover) so slotted content clicks aren't treated as outside clicks. */\n  getHost?: () => Element | null;\n  /** Returns the panel element, if mounted. */\n  getPanel: () => HTMLElement | null;\n  /** Gap from reference to floating panel in px. Default: 8. Accepts a signal for runtime reactivity. */\n  offset?: Readable<number | undefined> | number;\n  /** Cleanup registrar from the component setup ctx. Automatically called on disconnect. */\n  onCleanup: (fn: () => void) => void;\n  /** Called when the popover closes. */\n  onClose?: (reason: DialogCloseReason) => void;\n  /** Called when the popover opens. */\n  onOpen?: (reason: OverlayOpenReason) => void;\n  /** Callback when resolved placement changes (useful for CSS attribute). */\n  onPlacementChange?: (placement: Placement) => void;\n  /** Controlled open prop. When defined, disables uncontrolled logic. */\n  openProp: Readable<boolean | undefined>;\n  /** Preferred placement. Default: 'bottom'. */\n  placement: Readable<Placement>;\n  /** Slot element or a factory to lazily find it. Resolved each time bindEvents runs. */\n  slot: HTMLSlotElement | null | (() => HTMLSlotElement | null);\n  /** Slot elements signal — used to rebind when slotted elements change. */\n  slotElements: Readable<Element[]>;\n  /** Which triggers are active. Set to empty array or omit if handling events manually. */\n  triggers: Readable<FloatingTriggerType[]>;\n};\n\nexport type FloatingTriggerHandle = {\n  /** Closes the panel. No-op if controlled. */\n  close: (reason?: DialogCloseReason) => void;\n  /**\n   * Call inside `onMounted`. Sets up slot + trigger event watchers\n   * and returns a cleanup function to pass back to the framework.\n   */\n  mount: () => () => void;\n  /** Opens the panel. No-op if controlled. */\n  open: (reason?: OverlayOpenReason) => void;\n  /** Toggles the panel. No-op if controlled. */\n  toggle: () => void;\n  /** Manually trigger a position recalculation. */\n  updatePosition: () => void;\n  /** Whether the panel is currently visible. */\n  visible: Signal<boolean>;\n};\n\n// ── Implementation ─────────────────────────────────────────────────────────────\n\n/**\n * Shared logic for floating-panel triggers (tooltip, popover).\n *\n * Handles:\n * - Slot-based trigger element detection and rebinding\n * - Event binding per trigger type (hover / focus / click)\n * - Floating-element positioning via `@vielzeug/orbit`\n * - Controlled mode via `openProp` watcher\n * - Keyboard escape dismissal\n *\n * ARIA binding is intentionally delegated to the caller via `bindTriggerAria`\n * so that tooltip (`describedby`) and popover (`expanded`/`controls`/…) can diverge.\n */\nexport const useFloatingTrigger = (options: FloatingTriggerOptions): FloatingTriggerHandle => {\n  const {\n    bindTriggerAria,\n    disabled,\n    getPanel,\n    onClose,\n    onOpen,\n    onPlacementChange,\n    openProp,\n    placement,\n    slot,\n    slotElements,\n    triggers,\n  } = options;\n\n  const resolveSlot = (): HTMLSlotElement | null => (typeof slot === 'function' ? slot() : slot);\n  const getOffset = (): number => {\n    const o = options.offset;\n\n    if (o == null) return 8;\n\n    const val = typeof o === 'object' ? (o as Readable<number | undefined>).value : o;\n\n    return val ?? 8;\n  };\n  const abortSignal = lifecycleSignal(options.onCleanup);\n  const visible = signal(false);\n  const isControlled = () => openProp.value !== undefined;\n  let currentTrigger: HTMLElement | null = null;\n  let triggerBinding: (() => void) | null = null;\n\n  const overlay = createOverlayControl({\n    getBoundary: () => document.body,\n    getPanel,\n    getTrigger: () => currentTrigger,\n    isDisabled: () => disabled.value,\n    isOpen: () => visible.value,\n    onClose,\n    onOpen,\n    positioner: {\n      floating: getPanel,\n      reference: () => currentTrigger,\n      update: updatePosition,\n    },\n    restoreFocus: false,\n    setOpen: (next) => {\n      if (isControlled()) return;\n\n      if (next) showFloat();\n      else hideFloat();\n    },\n    signal: abortSignal,\n  });\n\n  function updatePosition(): void {\n    const panel = getPanel();\n\n    if (!panel || !currentTrigger) return;\n\n    const result = computePosition(currentTrigger, panel, {\n      middleware: [offset(getOffset()), flip(), shift({ padding: 8 })],\n      placement: placement.value,\n    });\n\n    panel.style.left = `${result.x}px`;\n    panel.style.top = `${result.y}px`;\n\n    panel.dataset.placement = result.placement;\n\n    onPlacementChange?.(result.placement as Placement);\n  }\n\n  function showFloat(): void {\n    visible.value = true;\n\n    const panel = getPanel();\n\n    if (panel) {\n      panel.dataset.open = '';\n\n      if ('showPopover' in panel) {\n        try {\n          if (!panel.matches(':popover-open')) panel.showPopover();\n        } catch {\n          // Popover API restricted (e.g. sandboxed iframe); data-open CSS fallback handles visibility.\n        }\n      }\n    }\n\n    updatePosition();\n  }\n\n  function hideFloat(): void {\n    visible.value = false;\n\n    const panel = getPanel();\n\n    if (panel) {\n      delete panel.dataset.open;\n\n      if ('hidePopover' in panel) {\n        try {\n          if (panel.matches(':popover-open')) panel.hidePopover();\n        } catch {\n          // Popover API restricted; data-open removal handles visibility.\n        }\n      }\n    }\n  }\n\n  function open(reason: OverlayOpenReason = 'programmatic'): void {\n    if (!isControlled()) overlay.open(reason);\n  }\n\n  function close(reason: DialogCloseReason = 'trigger'): void {\n    if (!isControlled()) overlay.close(reason, false);\n  }\n\n  function toggle(): void {\n    if (!isControlled()) overlay.toggle();\n  }\n\n  function handleKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Escape') close('escape');\n  }\n\n  function handleClickOutside(e: PointerEvent | MouseEvent): void {\n    if (!visible.value) return;\n\n    const path = e.composedPath();\n    const panel = getPanel();\n    const host = options.getHost?.();\n\n    if (\n      (currentTrigger && path.includes(currentTrigger)) ||\n      (panel && path.includes(panel)) ||\n      (host && path.includes(host))\n    )\n      return;\n\n    close('outsideClick');\n  }\n\n  function handleFocusOut(e: FocusEvent): void {\n    const next = e.relatedTarget as Element | null;\n    const panel = getPanel();\n\n    if (next && panel?.contains(next)) return;\n\n    if (next && currentTrigger?.contains(next)) return;\n\n    close('trigger');\n  }\n\n  const bindEvents = (): void => {\n    triggerBinding?.();\n    triggerBinding = null;\n\n    const triggerEl = resolveSlot()?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n    if (!triggerEl) {\n      currentTrigger = null;\n\n      return;\n    }\n\n    currentTrigger = triggerEl;\n\n    const removeAria = bindTriggerAria(triggerEl);\n    const cleanups: Array<() => void> = [];\n\n    const add = (\n      target: EventTarget,\n      event: string,\n      listener: EventListener,\n      eventOptions?: AddEventListenerOptions,\n    ): void => {\n      target.addEventListener(event, listener, eventOptions);\n      cleanups.push(() => target.removeEventListener(event, listener, eventOptions));\n    };\n\n    const t = triggers.value;\n\n    if (t.includes('click')) {\n      add(triggerEl, 'click', toggle as EventListener);\n      add(document, 'pointerdown', handleClickOutside as EventListener, { capture: true });\n    }\n\n    if (t.includes('hover')) {\n      add(triggerEl, 'pointerenter', () => open('hover'));\n      add(triggerEl, 'pointerleave', () => close('trigger'));\n\n      const panelEl = getPanel();\n\n      if (panelEl) {\n        add(panelEl, 'pointerenter', () => open('hover'));\n        add(panelEl, 'pointerleave', () => close('trigger'));\n      }\n    }\n\n    if (t.includes('focus')) {\n      add(triggerEl, 'focusin', () => open('focus'));\n      add(triggerEl, 'focusout', handleFocusOut as EventListener);\n\n      const panelEl = getPanel();\n\n      if (panelEl) add(panelEl, 'focusout', handleFocusOut as EventListener);\n    }\n\n    add(document, 'keydown', handleKeydown as EventListener);\n\n    triggerBinding = () => {\n      removeAria();\n\n      for (const cleanup of cleanups) cleanup();\n\n      currentTrigger = null;\n    };\n  };\n\n  const mount = (): (() => void) => {\n    watch(slotElements, bindEvents, { immediate: true });\n\n    watch(\n      openProp,\n      (openVal) => {\n        if (openVal === undefined || openVal === null) return;\n\n        if (openVal) {\n          showFloat();\n          onOpen?.('programmatic');\n        } else if (visible.value) {\n          hideFloat();\n          onClose?.('programmatic');\n        }\n      },\n      { immediate: true },\n    );\n\n    watch(disabled, (isNowDisabled) => {\n      if (isNowDisabled) close('programmatic');\n    });\n\n    return () => {\n      triggerBinding?.();\n      triggerBinding = null;\n\n      const panel = getPanel();\n\n      if (panel) {\n        delete panel.dataset.open;\n\n        if ('hidePopover' in panel) {\n          try {\n            if (panel.matches(':popover-open')) panel.hidePopover();\n          } catch {\n            // Popover API restricted; data-open removal handles visibility.\n          }\n        }\n      }\n\n      overlay.dispose();\n    };\n  };\n\n  return { close, mount, open, toggle, updatePosition, visible };\n};\n"],"mappings":"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"}

package/dist/overlay/shared/use-floating-trigger.d.ts

@@ -0,0 +1,67 @@
+import type { Placement } from '@vielzeug/orbit';
+import { type Readable, type Signal } from '@vielzeug/ripple';
+import { type DialogCloseReason, type OverlayOpenReason } from '../../headless';
+export type FloatingTriggerType = 'click' | 'focus' | 'hover';
+export type AriaBindFn = (triggerEl: HTMLElement) => () => void;
+export type FloatingTriggerOptions = {
+    /** ARIA binding factory: called with the trigger element, returns a cleanup. */
+    bindTriggerAria: AriaBindFn;
+    /** If true, disable all trigger interactions and close if open. */
+    disabled: Readable<boolean>;
+    /** Returns the host element (e.g. ore-popover) so slotted content clicks aren't treated as outside clicks. */
+    getHost?: () => Element | null;
+    /** Returns the panel element, if mounted. */
+    getPanel: () => HTMLElement | null;
+    /** Gap from reference to floating panel in px. Default: 8. Accepts a signal for runtime reactivity. */
+    offset?: Readable<number | undefined> | number;
+    /** Cleanup registrar from the component setup ctx. Automatically called on disconnect. */
+    onCleanup: (fn: () => void) => void;
+    /** Called when the popover closes. */
+    onClose?: (reason: DialogCloseReason) => void;
+    /** Called when the popover opens. */
+    onOpen?: (reason: OverlayOpenReason) => void;
+    /** Callback when resolved placement changes (useful for CSS attribute). */
+    onPlacementChange?: (placement: Placement) => void;
+    /** Controlled open prop. When defined, disables uncontrolled logic. */
+    openProp: Readable<boolean | undefined>;
+    /** Preferred placement. Default: 'bottom'. */
+    placement: Readable<Placement>;
+    /** Slot element or a factory to lazily find it. Resolved each time bindEvents runs. */
+    slot: HTMLSlotElement | null | (() => HTMLSlotElement | null);
+    /** Slot elements signal — used to rebind when slotted elements change. */
+    slotElements: Readable<Element[]>;
+    /** Which triggers are active. Set to empty array or omit if handling events manually. */
+    triggers: Readable<FloatingTriggerType[]>;
+};
+export type FloatingTriggerHandle = {
+    /** Closes the panel. No-op if controlled. */
+    close: (reason?: DialogCloseReason) => void;
+    /**
+     * Call inside `onMounted`. Sets up slot + trigger event watchers
+     * and returns a cleanup function to pass back to the framework.
+     */
+    mount: () => () => void;
+    /** Opens the panel. No-op if controlled. */
+    open: (reason?: OverlayOpenReason) => void;
+    /** Toggles the panel. No-op if controlled. */
+    toggle: () => void;
+    /** Manually trigger a position recalculation. */
+    updatePosition: () => void;
+    /** Whether the panel is currently visible. */
+    visible: Signal<boolean>;
+};
+/**
+ * Shared logic for floating-panel triggers (tooltip, popover).
+ *
+ * Handles:
+ * - Slot-based trigger element detection and rebinding
+ * - Event binding per trigger type (hover / focus / click)
+ * - Floating-element positioning via `@vielzeug/orbit`
+ * - Controlled mode via `openProp` watcher
+ * - Keyboard escape dismissal
+ *
+ * ARIA binding is intentionally delegated to the caller via `bindTriggerAria`
+ * so that tooltip (`describedby`) and popover (`expanded`/`controls`/…) can diverge.
+ */
+export declare const useFloatingTrigger: (options: FloatingTriggerOptions) => FloatingTriggerHandle;
+//# sourceMappingURL=use-floating-trigger.d.ts.map

package/dist/overlay/shared/use-floating-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-floating-trigger.d.ts","sourceRoot":"","sources":["../../../src/overlay/shared/use-floating-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAGjD,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,MAAM,EAAiB,MAAM,kBAAkB,CAAC;AAE7E,OAAO,EAAyC,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIvH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG,CAAC,SAAS,EAAE,WAAW,KAAK,MAAM,IAAI,CAAC;AAEhE,MAAM,MAAM,sBAAsB,GAAG;IACnC,gFAAgF;IAChF,eAAe,EAAE,UAAU,CAAC;IAC5B,mEAAmE;IACnE,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,8GAA8G;IAC9G,OAAO,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;IAC/B,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACnC,uGAAuG;IACvG,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,GAAG,MAAM,CAAC;IAC/C,0FAA0F;IAC1F,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACpC,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,qCAAqC;IACrC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7C,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD,uEAAuE;IACvE,QAAQ,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACxC,8CAA8C;IAC9C,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC/B,uFAAuF;IACvF,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,CAAC;IAC9D,0EAA0E;IAC1E,YAAY,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;IAClC,yFAAyF;IACzF,QAAQ,EAAE,QAAQ,CAAC,mBAAmB,EAAE,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,6CAA6C;IAC7C,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,KAAK,EAAE,MAAM,MAAM,IAAI,CAAC;IACxB,4CAA4C;IAC5C,IAAI,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC3C,8CAA8C;IAC9C,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,iDAAiD;IACjD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;CAC1B,CAAC;AAIF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,GAAI,SAAS,sBAAsB,KAAG,qBA0QpE,CAAC"}

package/dist/overlay/shared/use-floating-trigger.js

@@ -0,0 +1,128 @@
+import { lifecycleSignal as e } from "../../headless/ore.js";
+import { createOverlayControl as t } from "../../headless/overlay.js";
+import { signal as n, watch as r } from "@vielzeug/ripple";
+import { computePosition as i, flip as a, offset as o, shift as s } from "@vielzeug/orbit";
+//#region src/overlay/shared/use-floating-trigger.ts
+var c = (c) => {
+	let { bindTriggerAria: l, disabled: u, getPanel: d, onClose: f, onOpen: p, onPlacementChange: m, openProp: h, placement: g, slot: _, slotElements: v, triggers: y } = c, b = () => typeof _ == "function" ? _() : _, x = () => {
+		let e = c.offset;
+		return e == null ? 8 : (typeof e == "object" ? e.value : e) ?? 8;
+	}, S = e(c.onCleanup), C = n(!1), w = () => h.value !== void 0, T = null, E = null, D = t({
+		getBoundary: () => document.body,
+		getPanel: d,
+		getTrigger: () => T,
+		isDisabled: () => u.value,
+		isOpen: () => C.value,
+		onClose: f,
+		onOpen: p,
+		positioner: {
+			floating: d,
+			reference: () => T,
+			update: O
+		},
+		restoreFocus: !1,
+		setOpen: (e) => {
+			w() || (e ? k() : A());
+		},
+		signal: S
+	});
+	function O() {
+		let e = d();
+		if (!e || !T) return;
+		let t = i(T, e, {
+			middleware: [
+				o(x()),
+				a(),
+				s({ padding: 8 })
+			],
+			placement: g.value
+		});
+		e.style.left = `${t.x}px`, e.style.top = `${t.y}px`, e.dataset.placement = t.placement, m?.(t.placement);
+	}
+	function k() {
+		C.value = !0;
+		let e = d();
+		if (e && (e.dataset.open = "", "showPopover" in e)) try {
+			e.matches(":popover-open") || e.showPopover();
+		} catch {}
+		O();
+	}
+	function A() {
+		C.value = !1;
+		let e = d();
+		if (e && (delete e.dataset.open, "hidePopover" in e)) try {
+			e.matches(":popover-open") && e.hidePopover();
+		} catch {}
+	}
+	function j(e = "programmatic") {
+		w() || D.open(e);
+	}
+	function M(e = "trigger") {
+		w() || D.close(e, !1);
+	}
+	function N() {
+		w() || D.toggle();
+	}
+	function P(e) {
+		e.key === "Escape" && M("escape");
+	}
+	function F(e) {
+		if (!C.value) return;
+		let t = e.composedPath(), n = d(), r = c.getHost?.();
+		T && t.includes(T) || n && t.includes(n) || r && t.includes(r) || M("outsideClick");
+	}
+	function I(e) {
+		let t = e.relatedTarget, n = d();
+		t && n?.contains(t) || t && T?.contains(t) || M("trigger");
+	}
+	let L = () => {
+		E?.(), E = null;
+		let e = b()?.assignedElements({ flatten: !0 })[0];
+		if (!e) {
+			T = null;
+			return;
+		}
+		T = e;
+		let t = l(e), n = [], r = (e, t, r, i) => {
+			e.addEventListener(t, r, i), n.push(() => e.removeEventListener(t, r, i));
+		}, i = y.value;
+		if (i.includes("click") && (r(e, "click", N), r(document, "pointerdown", F, { capture: !0 })), i.includes("hover")) {
+			r(e, "pointerenter", () => j("hover")), r(e, "pointerleave", () => M("trigger"));
+			let t = d();
+			t && (r(t, "pointerenter", () => j("hover")), r(t, "pointerleave", () => M("trigger")));
+		}
+		if (i.includes("focus")) {
+			r(e, "focusin", () => j("focus")), r(e, "focusout", I);
+			let t = d();
+			t && r(t, "focusout", I);
+		}
+		r(document, "keydown", P), E = () => {
+			t();
+			for (let e of n) e();
+			T = null;
+		};
+	};
+	return {
+		close: M,
+		mount: () => (r(v, L, { immediate: !0 }), r(h, (e) => {
+			e != null && (e ? (k(), p?.("programmatic")) : C.value && (A(), f?.("programmatic")));
+		}, { immediate: !0 }), r(u, (e) => {
+			e && M("programmatic");
+		}), () => {
+			E?.(), E = null;
+			let e = d();
+			if (e && (delete e.dataset.open, "hidePopover" in e)) try {
+				e.matches(":popover-open") && e.hidePopover();
+			} catch {}
+			D.dispose();
+		}),
+		open: j,
+		toggle: N,
+		updatePosition: O,
+		visible: C
+	};
+};
+//#endregion
+export { c as useFloatingTrigger };
+
+//# sourceMappingURL=use-floating-trigger.js.map

package/dist/overlay/shared/use-floating-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-floating-trigger.js","names":[],"sources":["../../../src/overlay/shared/use-floating-trigger.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport { computePosition, flip, offset, shift } from '@vielzeug/orbit';\nimport { type Readable, type Signal, signal, watch } from '@vielzeug/ripple';\n\nimport { lifecycleSignal, createOverlayControl, type DialogCloseReason, type OverlayOpenReason } from '../../headless';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type FloatingTriggerType = 'click' | 'focus' | 'hover';\n\nexport type AriaBindFn = (triggerEl: HTMLElement) => () => void;\n\nexport type FloatingTriggerOptions = {\n  /** ARIA binding factory: called with the trigger element, returns a cleanup. */\n  bindTriggerAria: AriaBindFn;\n  /** If true, disable all trigger interactions and close if open. */\n  disabled: Readable<boolean>;\n  /** Returns the host element (e.g. ore-popover) so slotted content clicks aren't treated as outside clicks. */\n  getHost?: () => Element | null;\n  /** Returns the panel element, if mounted. */\n  getPanel: () => HTMLElement | null;\n  /** Gap from reference to floating panel in px. Default: 8. Accepts a signal for runtime reactivity. */\n  offset?: Readable<number | undefined> | number;\n  /** Cleanup registrar from the component setup ctx. Automatically called on disconnect. */\n  onCleanup: (fn: () => void) => void;\n  /** Called when the popover closes. */\n  onClose?: (reason: DialogCloseReason) => void;\n  /** Called when the popover opens. */\n  onOpen?: (reason: OverlayOpenReason) => void;\n  /** Callback when resolved placement changes (useful for CSS attribute). */\n  onPlacementChange?: (placement: Placement) => void;\n  /** Controlled open prop. When defined, disables uncontrolled logic. */\n  openProp: Readable<boolean | undefined>;\n  /** Preferred placement. Default: 'bottom'. */\n  placement: Readable<Placement>;\n  /** Slot element or a factory to lazily find it. Resolved each time bindEvents runs. */\n  slot: HTMLSlotElement | null | (() => HTMLSlotElement | null);\n  /** Slot elements signal — used to rebind when slotted elements change. */\n  slotElements: Readable<Element[]>;\n  /** Which triggers are active. Set to empty array or omit if handling events manually. */\n  triggers: Readable<FloatingTriggerType[]>;\n};\n\nexport type FloatingTriggerHandle = {\n  /** Closes the panel. No-op if controlled. */\n  close: (reason?: DialogCloseReason) => void;\n  /**\n   * Call inside `onMounted`. Sets up slot + trigger event watchers\n   * and returns a cleanup function to pass back to the framework.\n   */\n  mount: () => () => void;\n  /** Opens the panel. No-op if controlled. */\n  open: (reason?: OverlayOpenReason) => void;\n  /** Toggles the panel. No-op if controlled. */\n  toggle: () => void;\n  /** Manually trigger a position recalculation. */\n  updatePosition: () => void;\n  /** Whether the panel is currently visible. */\n  visible: Signal<boolean>;\n};\n\n// ── Implementation ─────────────────────────────────────────────────────────────\n\n/**\n * Shared logic for floating-panel triggers (tooltip, popover).\n *\n * Handles:\n * - Slot-based trigger element detection and rebinding\n * - Event binding per trigger type (hover / focus / click)\n * - Floating-element positioning via `@vielzeug/orbit`\n * - Controlled mode via `openProp` watcher\n * - Keyboard escape dismissal\n *\n * ARIA binding is intentionally delegated to the caller via `bindTriggerAria`\n * so that tooltip (`describedby`) and popover (`expanded`/`controls`/…) can diverge.\n */\nexport const useFloatingTrigger = (options: FloatingTriggerOptions): FloatingTriggerHandle => {\n  const {\n    bindTriggerAria,\n    disabled,\n    getPanel,\n    onClose,\n    onOpen,\n    onPlacementChange,\n    openProp,\n    placement,\n    slot,\n    slotElements,\n    triggers,\n  } = options;\n\n  const resolveSlot = (): HTMLSlotElement | null => (typeof slot === 'function' ? slot() : slot);\n  const getOffset = (): number => {\n    const o = options.offset;\n\n    if (o == null) return 8;\n\n    const val = typeof o === 'object' ? (o as Readable<number | undefined>).value : o;\n\n    return val ?? 8;\n  };\n  const abortSignal = lifecycleSignal(options.onCleanup);\n  const visible = signal(false);\n  const isControlled = () => openProp.value !== undefined;\n  let currentTrigger: HTMLElement | null = null;\n  let triggerBinding: (() => void) | null = null;\n\n  const overlay = createOverlayControl({\n    getBoundary: () => document.body,\n    getPanel,\n    getTrigger: () => currentTrigger,\n    isDisabled: () => disabled.value,\n    isOpen: () => visible.value,\n    onClose,\n    onOpen,\n    positioner: {\n      floating: getPanel,\n      reference: () => currentTrigger,\n      update: updatePosition,\n    },\n    restoreFocus: false,\n    setOpen: (next) => {\n      if (isControlled()) return;\n\n      if (next) showFloat();\n      else hideFloat();\n    },\n    signal: abortSignal,\n  });\n\n  function updatePosition(): void {\n    const panel = getPanel();\n\n    if (!panel || !currentTrigger) return;\n\n    const result = computePosition(currentTrigger, panel, {\n      middleware: [offset(getOffset()), flip(), shift({ padding: 8 })],\n      placement: placement.value,\n    });\n\n    panel.style.left = `${result.x}px`;\n    panel.style.top = `${result.y}px`;\n\n    panel.dataset.placement = result.placement;\n\n    onPlacementChange?.(result.placement as Placement);\n  }\n\n  function showFloat(): void {\n    visible.value = true;\n\n    const panel = getPanel();\n\n    if (panel) {\n      panel.dataset.open = '';\n\n      if ('showPopover' in panel) {\n        try {\n          if (!panel.matches(':popover-open')) panel.showPopover();\n        } catch {\n          // Popover API restricted (e.g. sandboxed iframe); data-open CSS fallback handles visibility.\n        }\n      }\n    }\n\n    updatePosition();\n  }\n\n  function hideFloat(): void {\n    visible.value = false;\n\n    const panel = getPanel();\n\n    if (panel) {\n      delete panel.dataset.open;\n\n      if ('hidePopover' in panel) {\n        try {\n          if (panel.matches(':popover-open')) panel.hidePopover();\n        } catch {\n          // Popover API restricted; data-open removal handles visibility.\n        }\n      }\n    }\n  }\n\n  function open(reason: OverlayOpenReason = 'programmatic'): void {\n    if (!isControlled()) overlay.open(reason);\n  }\n\n  function close(reason: DialogCloseReason = 'trigger'): void {\n    if (!isControlled()) overlay.close(reason, false);\n  }\n\n  function toggle(): void {\n    if (!isControlled()) overlay.toggle();\n  }\n\n  function handleKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Escape') close('escape');\n  }\n\n  function handleClickOutside(e: PointerEvent | MouseEvent): void {\n    if (!visible.value) return;\n\n    const path = e.composedPath();\n    const panel = getPanel();\n    const host = options.getHost?.();\n\n    if (\n      (currentTrigger && path.includes(currentTrigger)) ||\n      (panel && path.includes(panel)) ||\n      (host && path.includes(host))\n    )\n      return;\n\n    close('outsideClick');\n  }\n\n  function handleFocusOut(e: FocusEvent): void {\n    const next = e.relatedTarget as Element | null;\n    const panel = getPanel();\n\n    if (next && panel?.contains(next)) return;\n\n    if (next && currentTrigger?.contains(next)) return;\n\n    close('trigger');\n  }\n\n  const bindEvents = (): void => {\n    triggerBinding?.();\n    triggerBinding = null;\n\n    const triggerEl = resolveSlot()?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n    if (!triggerEl) {\n      currentTrigger = null;\n\n      return;\n    }\n\n    currentTrigger = triggerEl;\n\n    const removeAria = bindTriggerAria(triggerEl);\n    const cleanups: Array<() => void> = [];\n\n    const add = (\n      target: EventTarget,\n      event: string,\n      listener: EventListener,\n      eventOptions?: AddEventListenerOptions,\n    ): void => {\n      target.addEventListener(event, listener, eventOptions);\n      cleanups.push(() => target.removeEventListener(event, listener, eventOptions));\n    };\n\n    const t = triggers.value;\n\n    if (t.includes('click')) {\n      add(triggerEl, 'click', toggle as EventListener);\n      add(document, 'pointerdown', handleClickOutside as EventListener, { capture: true });\n    }\n\n    if (t.includes('hover')) {\n      add(triggerEl, 'pointerenter', () => open('hover'));\n      add(triggerEl, 'pointerleave', () => close('trigger'));\n\n      const panelEl = getPanel();\n\n      if (panelEl) {\n        add(panelEl, 'pointerenter', () => open('hover'));\n        add(panelEl, 'pointerleave', () => close('trigger'));\n      }\n    }\n\n    if (t.includes('focus')) {\n      add(triggerEl, 'focusin', () => open('focus'));\n      add(triggerEl, 'focusout', handleFocusOut as EventListener);\n\n      const panelEl = getPanel();\n\n      if (panelEl) add(panelEl, 'focusout', handleFocusOut as EventListener);\n    }\n\n    add(document, 'keydown', handleKeydown as EventListener);\n\n    triggerBinding = () => {\n      removeAria();\n\n      for (const cleanup of cleanups) cleanup();\n\n      currentTrigger = null;\n    };\n  };\n\n  const mount = (): (() => void) => {\n    watch(slotElements, bindEvents, { immediate: true });\n\n    watch(\n      openProp,\n      (openVal) => {\n        if (openVal === undefined || openVal === null) return;\n\n        if (openVal) {\n          showFloat();\n          onOpen?.('programmatic');\n        } else if (visible.value) {\n          hideFloat();\n          onClose?.('programmatic');\n        }\n      },\n      { immediate: true },\n    );\n\n    watch(disabled, (isNowDisabled) => {\n      if (isNowDisabled) close('programmatic');\n    });\n\n    return () => {\n      triggerBinding?.();\n      triggerBinding = null;\n\n      const panel = getPanel();\n\n      if (panel) {\n        delete panel.dataset.open;\n\n        if ('hidePopover' in panel) {\n          try {\n            if (panel.matches(':popover-open')) panel.hidePopover();\n          } catch {\n            // Popover API restricted; data-open removal handles visibility.\n          }\n        }\n      }\n\n      overlay.dispose();\n    };\n  };\n\n  return { close, mount, open, toggle, updatePosition, visible };\n};\n"],"mappings":"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"}

package/dist/overlay/tooltip/tooltip.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`.tooltip{inset:unset;padding:calc(var(--size-0-5) / 2) var(--size-2) var(--size-0-5);border:var(--_tooltip-border-width,var(--border-0)) solid var(--_tooltip-border-color,transparent);transform-origin:50%;margin:0;overflow:visible}@layer refine.base{:host{display:inline-block;position:relative}.tooltip{--_tooltip-fg:var(--color-contrast-100);--_tooltip-bg:color-mix(in oklch, var(--color-contrast-900) 80%, transparent);--_tooltip-border-width:var(--border);--_tooltip-border-color:color-mix(in oklch, var(--color-contrast-100) 12%, transparent);--_tooltip-shadow:var(--shadow-md);--_tooltip-closed-transform:translateY(4px) scale(.98);max-width:var(--tooltip-max-width,var(--size-72));font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--_tooltip-fg);word-break:auto-phrase;white-space:normal;pointer-events:none;background:var(--_tooltip-bg);border-radius:var(--tooltip-radius,var(--rounded-lg));box-shadow:var(--_tooltip-shadow);opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));transform:var(--_tooltip-closed-transform);transition:opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete, overlay var(--transition-fast) allow-discrete;position:fixed}@media (prefers-color-scheme:dark){.tooltip{--_tooltip-fg:var(--color-contrast-900);--_tooltip-bg:color-mix(in oklch, var(--color-contrast-100) 80%, transparent);--_tooltip-border-color:color-mix(in oklch, var(--color-contrast-900) 12%, transparent)}}.tooltip-text{white-space:pre-line;display:block}.tooltip[data-placement=top]{--_tooltip-closed-transform:translateY(4px) scale(var(--overlay-enter-scale-dialog))}.tooltip[data-placement=bottom]{--_tooltip-closed-transform:translateY(-4px) scale(var(--overlay-enter-scale-dialog))}.tooltip[data-placement=left]{--_tooltip-closed-transform:translateX(4px) scale(var(--overlay-enter-scale-dialog))}.tooltip[data-placement=right]{--_tooltip-closed-transform:translateX(-4px) scale(var(--overlay-enter-scale-dialog))}.tooltip[data-open]{opacity:1;transition:opacity var(--transition-normal), transform var(--transition-spring), display var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete;will-change:opacity, transform;display:block;transform:translate(0)scale(1)}.tooltip:popover-open{opacity:1;transition:opacity var(--transition-normal), transform var(--transition-spring), display var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete;will-change:opacity, transform;transform:translate(0)scale(1)}@starting-style{.tooltip:popover-open{opacity:0;transform:var(--_tooltip-closed-transform)}}@starting-style{.tooltip[data-open]{opacity:0;transform:var(--_tooltip-closed-transform)}}}@layer refine.variants{:host([variant=light]) .tooltip{--_tooltip-fg:var(--color-contrast-900);--_tooltip-bg:color-mix(in oklch, var(--color-contrast-100) 80%, transparent);--_tooltip-border-color:color-mix(in oklch, var(--color-contrast-900) 12%, transparent);--_tooltip-shadow:var(--shadow-md)}@media (prefers-color-scheme:dark){:host([variant=light]) .tooltip{--_tooltip-fg:var(--color-contrast-100);--_tooltip-bg:color-mix(in oklch, var(--color-contrast-900) 80%, transparent);--_tooltip-border-color:color-mix(in oklch, var(--color-contrast-100) 12%, transparent)}}}@layer refine.utilities{:host([size=sm]) .tooltip{font-size:var(--text-xs)}:host([size=lg]) .tooltip{font-size:var(--text-base)}}`;exports.default=e;
+//# sourceMappingURL=tooltip.css?inline.cjs.map

package/dist/overlay/tooltip/tooltip.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.css?inline.cjs","names":[],"sources":["../../../src/overlay/tooltip/tooltip.css?inline"],"sourcesContent":["/* ========================================\n   Popover UA resets — unlayered so they unconditionally beat\n   the browser's [popover] UA stylesheet (padding / inset / border / margin).\n   Must NOT be inside @layer; unlayered author rules win over every layer and\n   every UA default.\n   ======================================== */\n.tooltip {\n  inset: unset;\n  padding: calc(var(--size-0-5) / 2) var(--size-2) var(--size-0-5);\n  margin: 0;\n  overflow: visible;\n  border: var(--_tooltip-border-width, var(--border-0)) solid var(--_tooltip-border-color, transparent);\n  transform-origin: center;\n}\n\n@layer refine.base {\n  :host {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tooltip {\n    --_tooltip-fg: var(--color-contrast-100);\n    --_tooltip-bg: color-mix(in oklch, var(--color-contrast-900) 80%, transparent);\n    --_tooltip-border-width: var(--border);\n    --_tooltip-border-color: color-mix(in oklch, var(--color-contrast-100) 12%, transparent);\n    --_tooltip-shadow: var(--shadow-md);\n    --_tooltip-closed-transform: translateY(4px) scale(0.98);\n\n    /* Positioning — JS sets top/left inline */\n    position: fixed;\n    max-width: var(--tooltip-max-width, var(--size-72));\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-normal);\n    color: var(--_tooltip-fg);\n    word-break: auto-phrase;\n    white-space: normal;\n    pointer-events: none;\n    background: var(--_tooltip-bg);\n    border-radius: var(--tooltip-radius, var(--rounded-lg));\n    box-shadow: var(--_tooltip-shadow);\n\n    /* Hidden by default (also serves as exit state) */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: var(--_tooltip-closed-transform);\n    transition:\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete,\n      overlay var(--transition-fast) allow-discrete;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .tooltip {\n      --_tooltip-fg: var(--color-contrast-900);\n      --_tooltip-bg: color-mix(in oklch, var(--color-contrast-100) 80%, transparent);\n      --_tooltip-border-color: color-mix(in oklch, var(--color-contrast-900) 12%, transparent);\n    }\n  }\n\n  .tooltip-text {\n    display: block;\n    white-space: pre-line;\n  }\n\n  .tooltip[data-placement='top'] {\n    --_tooltip-closed-transform: translateY(4px) scale(var(--overlay-enter-scale-dialog));\n  }\n\n  .tooltip[data-placement='bottom'] {\n    --_tooltip-closed-transform: translateY(-4px) scale(var(--overlay-enter-scale-dialog));\n  }\n\n  .tooltip[data-placement='left'] {\n    --_tooltip-closed-transform: translateX(4px) scale(var(--overlay-enter-scale-dialog));\n  }\n\n  .tooltip[data-placement='right'] {\n    --_tooltip-closed-transform: translateX(-4px) scale(var(--overlay-enter-scale-dialog));\n  }\n\n  .tooltip[data-open] {\n    display: block;\n  }\n\n  /* Entry animation via @starting-style */\n  .tooltip:popover-open,\n  .tooltip[data-open] {\n    opacity: 1;\n    transform: translate(0, 0) scale(1);\n    transition:\n      opacity var(--transition-normal),\n      transform var(--transition-spring),\n      display var(--transition-normal) allow-discrete,\n      overlay var(--transition-normal) allow-discrete;\n    will-change: opacity, transform;\n\n    @starting-style {\n      opacity: 0;\n      transform: var(--_tooltip-closed-transform);\n    }\n  }\n}\n\n@layer refine.variants {\n  /* Light tooltip */\n  :host([variant='light']) .tooltip {\n    --_tooltip-fg: var(--color-contrast-900);\n    --_tooltip-bg: color-mix(in oklch, var(--color-contrast-100) 80%, transparent);\n    --_tooltip-border-color: color-mix(in oklch, var(--color-contrast-900) 12%, transparent);\n    --_tooltip-shadow: var(--shadow-md);\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :host([variant='light']) .tooltip {\n      --_tooltip-fg: var(--color-contrast-100);\n      --_tooltip-bg: color-mix(in oklch, var(--color-contrast-900) 80%, transparent);\n      --_tooltip-border-color: color-mix(in oklch, var(--color-contrast-100) 12%, transparent);\n    }\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) .tooltip {\n    font-size: var(--text-xs);\n  }\n\n  :host([size='lg']) .tooltip {\n    font-size: var(--text-base);\n  }\n}\n"],"mappings":""}

package/dist/overlay/tooltip/tooltip.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/overlay/tooltip/tooltip.css?inline
+var e = ".tooltip{inset:unset;padding:calc(var(--size-0-5) / 2) var(--size-2) var(--size-0-5);border:var(--_tooltip-border-width,var(--border-0)) solid var(--_tooltip-border-color,transparent);transform-origin:50%;margin:0;overflow:visible}@layer refine.base{:host{display:inline-block;position:relative}.tooltip{--_tooltip-fg:var(--color-contrast-100);--_tooltip-bg:color-mix(in oklch, var(--color-contrast-900) 80%, transparent);--_tooltip-border-width:var(--border);--_tooltip-border-color:color-mix(in oklch, var(--color-contrast-100) 12%, transparent);--_tooltip-shadow:var(--shadow-md);--_tooltip-closed-transform:translateY(4px) scale(.98);max-width:var(--tooltip-max-width,var(--size-72));font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--_tooltip-fg);word-break:auto-phrase;white-space:normal;pointer-events:none;background:var(--_tooltip-bg);border-radius:var(--tooltip-radius,var(--rounded-lg));box-shadow:var(--_tooltip-shadow);opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));transform:var(--_tooltip-closed-transform);transition:opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete, overlay var(--transition-fast) allow-discrete;position:fixed}@media (prefers-color-scheme:dark){.tooltip{--_tooltip-fg:var(--color-contrast-900);--_tooltip-bg:color-mix(in oklch, var(--color-contrast-100) 80%, transparent);--_tooltip-border-color:color-mix(in oklch, var(--color-contrast-900) 12%, transparent)}}.tooltip-text{white-space:pre-line;display:block}.tooltip[data-placement=top]{--_tooltip-closed-transform:translateY(4px) scale(var(--overlay-enter-scale-dialog))}.tooltip[data-placement=bottom]{--_tooltip-closed-transform:translateY(-4px) scale(var(--overlay-enter-scale-dialog))}.tooltip[data-placement=left]{--_tooltip-closed-transform:translateX(4px) scale(var(--overlay-enter-scale-dialog))}.tooltip[data-placement=right]{--_tooltip-closed-transform:translateX(-4px) scale(var(--overlay-enter-scale-dialog))}.tooltip[data-open]{opacity:1;transition:opacity var(--transition-normal), transform var(--transition-spring), display var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete;will-change:opacity, transform;display:block;transform:translate(0)scale(1)}.tooltip:popover-open{opacity:1;transition:opacity var(--transition-normal), transform var(--transition-spring), display var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete;will-change:opacity, transform;transform:translate(0)scale(1)}@starting-style{.tooltip:popover-open{opacity:0;transform:var(--_tooltip-closed-transform)}}@starting-style{.tooltip[data-open]{opacity:0;transform:var(--_tooltip-closed-transform)}}}@layer refine.variants{:host([variant=light]) .tooltip{--_tooltip-fg:var(--color-contrast-900);--_tooltip-bg:color-mix(in oklch, var(--color-contrast-100) 80%, transparent);--_tooltip-border-color:color-mix(in oklch, var(--color-contrast-900) 12%, transparent);--_tooltip-shadow:var(--shadow-md)}@media (prefers-color-scheme:dark){:host([variant=light]) .tooltip{--_tooltip-fg:var(--color-contrast-100);--_tooltip-bg:color-mix(in oklch, var(--color-contrast-900) 80%, transparent);--_tooltip-border-color:color-mix(in oklch, var(--color-contrast-100) 12%, transparent)}}}@layer refine.utilities{:host([size=sm]) .tooltip{font-size:var(--text-xs)}:host([size=lg]) .tooltip{font-size:var(--text-base)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=tooltip.css?inline.js.map

package/dist/overlay/tooltip/tooltip.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.css?inline.js","names":[],"sources":["../../../src/overlay/tooltip/tooltip.css?inline"],"sourcesContent":["/* ========================================\n   Popover UA resets — unlayered so they unconditionally beat\n   the browser's [popover] UA stylesheet (padding / inset / border / margin).\n   Must NOT be inside @layer; unlayered author rules win over every layer and\n   every UA default.\n   ======================================== */\n.tooltip {\n  inset: unset;\n  padding: calc(var(--size-0-5) / 2) var(--size-2) var(--size-0-5);\n  margin: 0;\n  overflow: visible;\n  border: var(--_tooltip-border-width, var(--border-0)) solid var(--_tooltip-border-color, transparent);\n  transform-origin: center;\n}\n\n@layer refine.base {\n  :host {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tooltip {\n    --_tooltip-fg: var(--color-contrast-100);\n    --_tooltip-bg: color-mix(in oklch, var(--color-contrast-900) 80%, transparent);\n    --_tooltip-border-width: var(--border);\n    --_tooltip-border-color: color-mix(in oklch, var(--color-contrast-100) 12%, transparent);\n    --_tooltip-shadow: var(--shadow-md);\n    --_tooltip-closed-transform: translateY(4px) scale(0.98);\n\n    /* Positioning — JS sets top/left inline */\n    position: fixed;\n    max-width: var(--tooltip-max-width, var(--size-72));\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-normal);\n    color: var(--_tooltip-fg);\n    word-break: auto-phrase;\n    white-space: normal;\n    pointer-events: none;\n    background: var(--_tooltip-bg);\n    border-radius: var(--tooltip-radius, var(--rounded-lg));\n    box-shadow: var(--_tooltip-shadow);\n\n    /* Hidden by default (also serves as exit state) */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: var(--_tooltip-closed-transform);\n    transition:\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete,\n      overlay var(--transition-fast) allow-discrete;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .tooltip {\n      --_tooltip-fg: var(--color-contrast-900);\n      --_tooltip-bg: color-mix(in oklch, var(--color-contrast-100) 80%, transparent);\n      --_tooltip-border-color: color-mix(in oklch, var(--color-contrast-900) 12%, transparent);\n    }\n  }\n\n  .tooltip-text {\n    display: block;\n    white-space: pre-line;\n  }\n\n  .tooltip[data-placement='top'] {\n    --_tooltip-closed-transform: translateY(4px) scale(var(--overlay-enter-scale-dialog));\n  }\n\n  .tooltip[data-placement='bottom'] {\n    --_tooltip-closed-transform: translateY(-4px) scale(var(--overlay-enter-scale-dialog));\n  }\n\n  .tooltip[data-placement='left'] {\n    --_tooltip-closed-transform: translateX(4px) scale(var(--overlay-enter-scale-dialog));\n  }\n\n  .tooltip[data-placement='right'] {\n    --_tooltip-closed-transform: translateX(-4px) scale(var(--overlay-enter-scale-dialog));\n  }\n\n  .tooltip[data-open] {\n    display: block;\n  }\n\n  /* Entry animation via @starting-style */\n  .tooltip:popover-open,\n  .tooltip[data-open] {\n    opacity: 1;\n    transform: translate(0, 0) scale(1);\n    transition:\n      opacity var(--transition-normal),\n      transform var(--transition-spring),\n      display var(--transition-normal) allow-discrete,\n      overlay var(--transition-normal) allow-discrete;\n    will-change: opacity, transform;\n\n    @starting-style {\n      opacity: 0;\n      transform: var(--_tooltip-closed-transform);\n    }\n  }\n}\n\n@layer refine.variants {\n  /* Light tooltip */\n  :host([variant='light']) .tooltip {\n    --_tooltip-fg: var(--color-contrast-900);\n    --_tooltip-bg: color-mix(in oklch, var(--color-contrast-100) 80%, transparent);\n    --_tooltip-border-color: color-mix(in oklch, var(--color-contrast-900) 12%, transparent);\n    --_tooltip-shadow: var(--shadow-md);\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :host([variant='light']) .tooltip {\n      --_tooltip-fg: var(--color-contrast-100);\n      --_tooltip-bg: color-mix(in oklch, var(--color-contrast-900) 80%, transparent);\n      --_tooltip-border-color: color-mix(in oklch, var(--color-contrast-100) 12%, transparent);\n    }\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) .tooltip {\n    font-size: var(--text-xs);\n  }\n\n  :host([size='lg']) .tooltip {\n    font-size: var(--text-base);\n  }\n}\n"],"mappings":""}

package/dist/overlay/tooltip/tooltip.d.ts

@@ -0,0 +1,72 @@
+import type { ComponentSize } from '../../types';
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+/** Tooltip component properties */
+export type OreTooltipProps = {
+    /** Hide delay in ms */
+    'close-delay'?: number;
+    /** Tooltip text content */
+    content?: string;
+    /** Show delay in ms */
+    delay?: number;
+    /** Disable the tooltip */
+    disabled?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Preferred placement relative to trigger */
+    placement?: TooltipPlacement;
+    /** Tooltip size */
+    size?: ComponentSize;
+    /** Which trigger(s) show/hide the tooltip */
+    trigger?: string;
+    /** Visual variant */
+    variant?: 'dark' | 'light';
+};
+/**
+ * A lightweight tooltip shown on hover/focus/click relative to the slotted trigger.
+ *
+ * @element ore-tooltip
+ *
+ * @attr {string} content - Tooltip text content
+ * @attr {string} placement - 'top' | 'bottom' | 'left' | 'right' (default: 'top')
+ * @attr {string} trigger - 'hover' | 'focus' | 'click' or comma-separated combination
+ * @attr {number} delay - Show delay in milliseconds (default: 0)
+ * @attr {string} size - Size: 'sm' | 'md' | 'lg'
+ * @attr {string} variant - 'dark' (default) | 'light'
+ * @attr {boolean} disabled - Disable the tooltip
+ *
+ * @slot - Trigger element that the tooltip is anchored to
+ * @slot content - Complex tooltip content (overrides the `content` attribute)
+ *
+ * @cssprop --tooltip-max-width - Max width of the tooltip bubble
+ *
+ * @part tooltip - Tooltip container.
+ * @example
+ * ```html
+ * <!-- Simple text tooltip -->
+ * <ore-tooltip content="Copy to clipboard">
+ *   <button>Copy</button>
+ * </ore-tooltip>
+ *
+ * <!-- Placement and delay -->
+ * <ore-tooltip content="Save your work" placement="right" delay="300">
+ *   <ore-icon name="save"></ore-icon>
+ * </ore-tooltip>
+ *
+ * <!-- Hover + focus trigger -->
+ * <ore-tooltip content="Required field" trigger="hover,focus" placement="top">
+ *   <ore-input label="Email" type="email"></ore-input>
+ * </ore-tooltip>
+ *
+ * <!-- Rich content slot -->
+ * <ore-tooltip>
+ *   <ore-button>Help</ore-button>
+ *   <div slot="content">
+ *     <strong>Keyboard shortcuts</strong>
+ *     <p>Press Ctrl+S to save.</p>
+ *   </div>
+ * </ore-tooltip>
+ * ```
+ */
+export declare const TOOLTIP_TAG: "ore-tooltip";
+export {};
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/overlay/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlay/tooltip/tooltip.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAQjD,KAAK,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAqB5D,mCAAmC;AACnC,MAAM,MAAM,eAAe,GAAG;IAC5B,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,mBAAmB;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,WAAW,EAAG,aAAsB,CAAC"}

package/dist/pagination.cjs

@@ -0,0 +1,63 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./content/pagination/pagination.css?inline.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");function s(e,t,n){let r=t,i=[];if(r<=2+2*n+3)return Array.from({length:r},(e,t)=>t+1);let a=Math.max(e-n,2),o=Math.min(e+n,r-1);i.push(1),a>3?i.push(`ellipsis-start`):a===3&&i.push(2);for(let e=a;e<=o;e++)i.push(e);return o<r-1-1?i.push(`ellipsis-end`):o===r-1-1&&i.push(r-1),i.push(r),i}var c=`ore-pagination`;(0,a.define)(c,{props:{...r.themableBundle,...r.sizableBundle,label:a.prop.string(`Pagination`),page:a.prop.number(1),"show-first-last":a.prop.bool(!1),"show-prev-next":a.prop.bool(!1),siblings:a.prop.number(1),"total-pages":a.prop.number(1),variant:a.prop.string()},setup(e,{bind:t,el:n,emit:r}){function i(t){let i=e[`total-pages`].value||1,a=Math.min(Math.max(1,t),i);a!==e.page.value&&(n.setAttribute(`page`,String(a)),r(`change`,{page:a}))}let c=(0,o.computed)(()=>s(e.page.value||1,e[`total-pages`].value||1,e.siblings.value??1)),l=(0,o.computed)(()=>(e.page.value||1)<=1),u=(0,o.computed)(()=>(e.page.value||1)>=(e[`total-pages`].value||1));return a.html`
+      <nav :aria-label="${e.label}" part="nav">
+        <ol class="pagination" part="list">
+          ${()=>e[`show-first-last`].value?a.html`<li>
+                  <button
+                    type="button"
+                    class="nav-btn"
+                    part="first-btn"
+                    aria-label="First page"
+                    ?disabled=${l}
+                    @click=${()=>i(1)}>
+                    <ore-icon name="chevrons-left" size="16" aria-hidden="true"></ore-icon>
+                  </button>
+                </li>`:``}
+          ${()=>e[`show-prev-next`].value?a.html`<li>
+                  <button
+                    type="button"
+                    class="nav-btn"
+                    part="prev-btn"
+                    aria-label="Previous page"
+                    ?disabled=${l}
+                    @click=${()=>i((e.page.value||1)-1)}>
+                    <ore-icon name="chevron-left" size="16" aria-hidden="true"></ore-icon>
+                  </button>
+                </li>`:``}
+          <li style="display: contents;">
+            ${()=>c.value.map(t=>{if(t===`ellipsis-start`||t===`ellipsis-end`)return a.html`<span class="ellipsis" aria-hidden="true">&hellip;</span>`;let n=t,r=n===(e.page.value||1),o=`Page ${n}`;return r?a.html`<button
+                      type="button"
+                      part="page-btn"
+                      aria-label="${o}"
+                      aria-current="page"
+                      @click=${()=>i(n)}>
+                      ${n}
+                    </button>`:a.html`<button type="button" part="page-btn" aria-label="${o}" @click=${()=>i(n)}>
+                      ${n}
+                    </button>`})}
+          </li>
+          ${()=>e[`show-prev-next`].value?a.html`<li>
+                  <button
+                    type="button"
+                    class="nav-btn"
+                    part="next-btn"
+                    aria-label="Next page"
+                    ?disabled=${u}
+                    @click=${()=>i((e.page.value||1)+1)}>
+                    <ore-icon name="chevron-right" size="16" aria-hidden="true"></ore-icon>
+                  </button>
+                </li>`:``}
+          ${()=>e[`show-first-last`].value?a.html`<li>
+                  <button
+                    type="button"
+                    class="nav-btn"
+                    part="last-btn"
+                    aria-label="Last page"
+                    ?disabled=${u}
+                    @click=${()=>i(e[`total-pages`].value||1)}>
+                    <ore-icon name="chevrons-right" size="16" aria-hidden="true"></ore-icon>
+                  </button>
+                </li>`:``}
+        </ol>
+      </nav>
+    `},styles:[e.coarsePointerMixin,n.colorThemeMixin,t.sizeVariantMixin(),i.default]}),exports.PAGINATION_TAG=c;
+//# sourceMappingURL=pagination.cjs.map

package/dist/pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.cjs","names":[],"sources":["../src/content/pagination/pagination.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, sizeVariantMixin } from '../../styles';\nimport componentStyles from './pagination.css?inline';\n\nexport type OrePaginationEvents = {\n  change: { page: number };\n};\n\nexport type OrePaginationProps = {\n  color?: ThemeColor;\n  label?: string;\n  page?: number;\n  'show-first-last'?: boolean;\n  'show-prev-next'?: boolean;\n  siblings?: number;\n  size?: ComponentSize;\n  'total-pages'?: number;\n  variant?: VisualVariant;\n};\n\nfunction buildPageRange(\n  currentPage: number,\n  totalPages: number,\n  siblings: number,\n): Array<number | 'ellipsis-start' | 'ellipsis-end'> {\n  const BOUNDARY = 1; // always show first and last page\n  const total = totalPages;\n  const pages: Array<number | 'ellipsis-start' | 'ellipsis-end'> = [];\n\n  // If total is small enough, show all pages\n  if (total <= 2 * BOUNDARY + 2 * siblings + 3) {\n    return Array.from({ length: total }, (_, i) => i + 1);\n  }\n\n  const leftSibling = Math.max(currentPage - siblings, BOUNDARY + 1);\n  const rightSibling = Math.min(currentPage + siblings, total - BOUNDARY);\n\n  pages.push(1);\n\n  if (leftSibling > BOUNDARY + 2) pages.push('ellipsis-start');\n  else if (leftSibling === BOUNDARY + 2) pages.push(BOUNDARY + 1);\n\n  for (let i = leftSibling; i <= rightSibling; i++) pages.push(i);\n\n  if (rightSibling < total - BOUNDARY - 1) pages.push('ellipsis-end');\n  else if (rightSibling === total - BOUNDARY - 1) pages.push(total - BOUNDARY);\n\n  pages.push(total);\n\n  return pages;\n}\n\n/**\n * Page-based navigation control.\n *\n * @element ore-pagination\n *\n * @attr {number} page - Current page (1-indexed, default: 1)\n * @attr {number} total-pages - Total number of pages (required)\n * @attr {number} siblings - Sibling pages around current (default: 1)\n * @attr {boolean} show-first-last - Show first/last page buttons (default: false)\n * @attr {boolean} show-prev-next - Show prev/next buttons (default: false)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant for nav buttons: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'frost' (default: 'ghost')\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} label - Accessible nav label (default: 'Pagination')\n *\n * @fires change - Emitted when the page changes, with { page: number }\n *\n * @cssprop --pagination-item-size - Width/height of each item\n * @cssprop --pagination-gap - Gap between items\n * @cssprop --pagination-radius - Border radius of items\n *\n * @part page-btn - Page button.\n * @part nav - Navigation container.\n * @part list - List container.\n * @part first-btn - First page button.\n * @part prev-btn - Previous page button.\n * @part next-btn - Next page button.\n * @part last-btn - Last page button.\n * @example\n * ```html\n * <!-- Basic -->\n * <ore-pagination page=\"3\" total-pages=\"10\" color=\"primary\"></ore-pagination>\n *\n * <!-- With prev/next and first/last buttons -->\n * <ore-pagination page=\"5\" total-pages=\"20\" show-prev-next show-first-last siblings=\"2\"></ore-pagination>\n *\n * <!-- Compact size -->\n * <ore-pagination page=\"1\" total-pages=\"5\" size=\"sm\" variant=\"ghost\"></ore-pagination>\n * ```\n */\nexport const PAGINATION_TAG = 'ore-pagination' as const;\ndefine<OrePaginationProps, OrePaginationEvents>(PAGINATION_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    label: prop.string('Pagination'),\n    page: prop.number(1),\n    'show-first-last': prop.bool(false),\n    'show-prev-next': prop.bool(false),\n    siblings: prop.number(1),\n    'total-pages': prop.number(1),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props, { bind: _bind, el, emit }) {\n    function goTo(page: number) {\n      const total = props['total-pages'].value || 1;\n      const next = Math.min(Math.max(1, page), total);\n\n      if (next === props.page.value) return;\n\n      el.setAttribute('page', String(next));\n      emit('change', { page: next });\n    }\n\n    const pageItems = computed(() =>\n      buildPageRange(props.page.value || 1, props['total-pages'].value || 1, props.siblings.value ?? 1),\n    );\n\n    const isFirst = computed(() => (props.page.value || 1) <= 1);\n    const isLast = computed(() => (props.page.value || 1) >= (props['total-pages'].value || 1));\n\n    return html`\n      <nav :aria-label=\"${props.label}\" part=\"nav\">\n        <ol class=\"pagination\" part=\"list\">\n          ${() =>\n            props['show-first-last'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"first-btn\"\n                    aria-label=\"First page\"\n                    ?disabled=${isFirst}\n                    @click=${() => goTo(1)}>\n                    <ore-icon name=\"chevrons-left\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          ${() =>\n            props['show-prev-next'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"prev-btn\"\n                    aria-label=\"Previous page\"\n                    ?disabled=${isFirst}\n                    @click=${() => goTo((props.page.value || 1) - 1)}>\n                    <ore-icon name=\"chevron-left\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          <li style=\"display: contents;\">\n            ${() =>\n              pageItems.value.map((item) => {\n                if (item === 'ellipsis-start' || item === 'ellipsis-end') {\n                  return html`<span class=\"ellipsis\" aria-hidden=\"true\">&hellip;</span>`;\n                }\n\n                const pg = item as number;\n                const isCurrent = pg === (props.page.value || 1);\n                const pgLabel = `Page ${pg}`;\n\n                return isCurrent\n                  ? html`<button\n                      type=\"button\"\n                      part=\"page-btn\"\n                      aria-label=\"${pgLabel}\"\n                      aria-current=\"page\"\n                      @click=${() => goTo(pg)}>\n                      ${pg}\n                    </button>`\n                  : html`<button type=\"button\" part=\"page-btn\" aria-label=\"${pgLabel}\" @click=${() => goTo(pg)}>\n                      ${pg}\n                    </button>`;\n              })}\n          </li>\n          ${() =>\n            props['show-prev-next'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"next-btn\"\n                    aria-label=\"Next page\"\n                    ?disabled=${isLast}\n                    @click=${() => goTo((props.page.value || 1) + 1)}>\n                    <ore-icon name=\"chevron-right\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          ${() =>\n            props['show-first-last'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"last-btn\"\n                    aria-label=\"Last page\"\n                    ?disabled=${isLast}\n                    @click=${() => goTo(props['total-pages'].value || 1)}>\n                    <ore-icon name=\"chevrons-right\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n        </ol>\n      </nav>\n    `;\n  },\n\n  styles: [coarsePointerMixin, colorThemeMixin, sizeVariantMixin(), componentStyles],\n});\n"],"mappings":"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"}

package/dist/pagination.js

@@ -0,0 +1,113 @@
+import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as n } from "./styles/mixins/theme.css.js";
+import { sizableBundle as r, themableBundle as i } from "./shared/prop-bundles.js";
+import a from "./content/pagination/pagination.css?inline.js";
+import { define as o, html as s, prop as c } from "@vielzeug/ore";
+import { computed as l } from "@vielzeug/ripple";
+//#region src/content/pagination/pagination.ts
+function u(e, t, n) {
+	let r = t, i = [];
+	if (r <= 2 + 2 * n + 3) return Array.from({ length: r }, (e, t) => t + 1);
+	let a = Math.max(e - n, 2), o = Math.min(e + n, r - 1);
+	i.push(1), a > 3 ? i.push("ellipsis-start") : a === 3 && i.push(2);
+	for (let e = a; e <= o; e++) i.push(e);
+	return o < r - 1 - 1 ? i.push("ellipsis-end") : o === r - 1 - 1 && i.push(r - 1), i.push(r), i;
+}
+var d = "ore-pagination";
+o(d, {
+	props: {
+		...i,
+		...r,
+		label: c.string("Pagination"),
+		page: c.number(1),
+		"show-first-last": c.bool(!1),
+		"show-prev-next": c.bool(!1),
+		siblings: c.number(1),
+		"total-pages": c.number(1),
+		variant: c.string()
+	},
+	setup(e, { bind: t, el: n, emit: r }) {
+		function i(t) {
+			let i = e["total-pages"].value || 1, a = Math.min(Math.max(1, t), i);
+			a !== e.page.value && (n.setAttribute("page", String(a)), r("change", { page: a }));
+		}
+		let a = l(() => u(e.page.value || 1, e["total-pages"].value || 1, e.siblings.value ?? 1)), o = l(() => (e.page.value || 1) <= 1), c = l(() => (e.page.value || 1) >= (e["total-pages"].value || 1));
+		return s`
+      <nav :aria-label="${e.label}" part="nav">
+        <ol class="pagination" part="list">
+          ${() => e["show-first-last"].value ? s`<li>
+                  <button
+                    type="button"
+                    class="nav-btn"
+                    part="first-btn"
+                    aria-label="First page"
+                    ?disabled=${o}
+                    @click=${() => i(1)}>
+                    <ore-icon name="chevrons-left" size="16" aria-hidden="true"></ore-icon>
+                  </button>
+                </li>` : ""}
+          ${() => e["show-prev-next"].value ? s`<li>
+                  <button
+                    type="button"
+                    class="nav-btn"
+                    part="prev-btn"
+                    aria-label="Previous page"
+                    ?disabled=${o}
+                    @click=${() => i((e.page.value || 1) - 1)}>
+                    <ore-icon name="chevron-left" size="16" aria-hidden="true"></ore-icon>
+                  </button>
+                </li>` : ""}
+          <li style="display: contents;">
+            ${() => a.value.map((t) => {
+			if (t === "ellipsis-start" || t === "ellipsis-end") return s`<span class="ellipsis" aria-hidden="true">&hellip;</span>`;
+			let n = t, r = n === (e.page.value || 1), a = `Page ${n}`;
+			return r ? s`<button
+                      type="button"
+                      part="page-btn"
+                      aria-label="${a}"
+                      aria-current="page"
+                      @click=${() => i(n)}>
+                      ${n}
+                    </button>` : s`<button type="button" part="page-btn" aria-label="${a}" @click=${() => i(n)}>
+                      ${n}
+                    </button>`;
+		})}
+          </li>
+          ${() => e["show-prev-next"].value ? s`<li>
+                  <button
+                    type="button"
+                    class="nav-btn"
+                    part="next-btn"
+                    aria-label="Next page"
+                    ?disabled=${c}
+                    @click=${() => i((e.page.value || 1) + 1)}>
+                    <ore-icon name="chevron-right" size="16" aria-hidden="true"></ore-icon>
+                  </button>
+                </li>` : ""}
+          ${() => e["show-first-last"].value ? s`<li>
+                  <button
+                    type="button"
+                    class="nav-btn"
+                    part="last-btn"
+                    aria-label="Last page"
+                    ?disabled=${c}
+                    @click=${() => i(e["total-pages"].value || 1)}>
+                    <ore-icon name="chevrons-right" size="16" aria-hidden="true"></ore-icon>
+                  </button>
+                </li>` : ""}
+        </ol>
+      </nav>
+    `;
+	},
+	styles: [
+		e,
+		n,
+		t(),
+		a
+	]
+});
+//#endregion
+export { d as PAGINATION_TAG };
+
+//# sourceMappingURL=pagination.js.map