@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/tooltip.js

@@ -1,111 +1,131 @@
-import { forcedColorsMixin as e } from "./styles/mixins/theme.css.js";
+import { disablableBundle as e, sizableBundle as t } from "./inputs/shared/bundles.js";
+import { forcedColorsMixin as n } from "./styles/mixins/theme.css.js";
 import "./styles/index.js";
-import t from "./overlay/tooltip/tooltip.css?inline.js";
-import { computed as n, createId as r, defineComponent as i, html as a, onMount as o, onSlotChange as s, signal as c, watch as l } from "@vielzeug/craftit";
-import { autoUpdate as u, computePosition as d, flip as f, offset as p, shift as m } from "@vielzeug/floatit";
+import { i as r } from "./packages/craftit/dist/controls/overlay-control.js";
+import "./packages/craftit/dist/controls.js";
+import { syncAria as i } from "./utils/aria.js";
+import a from "./overlay/tooltip/tooltip.css?inline.js";
+import { computed as o, createCleanupSignal as s, createId as c, define as l, html as u, onMount as d, signal as f, watch as p } from "@vielzeug/craftit";
+import { computePosition as m, flip as h, offset as g, shift as _ } from "@vielzeug/floatit";
 //#region src/overlay/tooltip/tooltip.ts
-var h = 8, g = 4, _ = i({
+var v = 8, y = 4, b = l("bit-tooltip", {
 	props: {
-		"close-delay": { default: 0 },
-		content: { default: "" },
-		delay: { default: 0 },
-		disabled: { default: !1 },
-		open: { default: void 0 },
-		placement: { default: "top" },
-		size: { default: void 0 },
-		trigger: { default: "hover,focus" },
-		variant: { default: void 0 }
+		...t,
+		...e,
+		"close-delay": 0,
+		content: "",
+		delay: 0,
+		open: void 0,
+		placement: "top",
+		trigger: "hover,focus",
+		variant: void 0
 	},
-	setup({ host: e, props: t }) {
-		let i = c(!1), _ = c("top"), v = null, y = null, b = null, x = null, S = r("tooltip"), C = n(() => String(t.trigger.value).split(",").map((e) => e.trim()).filter(Boolean));
-		function w() {
-			return (e.shadowRoot?.querySelector("slot:not([name])"))?.assignedElements({ flatten: !0 })?.[0] ?? null;
+	setup({ props: e, shadowRoot: t, slots: n }) {
+		let a = f(!1), l = o(() => !!e.disabled.value), b = o(() => e.open.value !== void 0), x = f("top"), S = null, C = null, w = null, T = c("tooltip"), E = o(() => String(e.trigger.value).split(",").map((e) => e.trim()).filter(Boolean)), D = () => {
+			S &&= (clearTimeout(S), null);
+		}, O = () => {
+			C &&= (clearTimeout(C), null);
+		};
+		function k() {
+			return (t?.querySelector("slot:not([name])"))?.assignedElements({ flatten: !0 })?.[0] ?? null;
 		}
-		function T() {
-			if (!x) return;
-			let e = w();
-			e && d(e, x, {
+		function A() {
+			if (!w) return;
+			let t = k();
+			if (!t) return;
+			let { placement: n, x: r, y: i } = m(t, w, {
 				middleware: [
-					p(h),
-					f(),
-					m({ padding: 6 })
+					g(v),
+					h(),
+					_({ padding: 6 })
 				],
-				placement: t.placement.value
-			}).then(({ placement: e, x: t, y: n }) => {
-				if (!x) return;
-				let r = e.split("-")[0], i = r === "left" ? t - g : t;
-				x.style.left = `${i}px`, x.style.top = `${n}px`, _.value = r;
-			});
+				placement: e.placement.value
+			}), a = n.split("-")[0], o = a === "left" ? r - y : r;
+			w.style.left = `${o}px`, w.style.top = `${i}px`, x.value = a;
 		}
-		function E() {
-			t.open.value !== void 0 || t.disabled.value || !t.content.value && !(((e.shadowRoot?.querySelector("slot[name=\"content\"]"))?.assignedNodes({ flatten: !0 }).length ?? 0) > 0) || (b &&= (clearTimeout(b), null), y && clearTimeout(y), y = setTimeout(() => {
-				i.value = !0, x && !x.matches(":popover-open") && x.showPopover();
-				let e = w();
-				e && x ? (v?.(), v = u(e, x, T)) : requestAnimationFrame(() => T());
-			}, Number(t.delay.value) || 0));
+		let j = r({
+			disabled: l,
+			elements: {
+				boundary: document.body,
+				panel: w,
+				trigger: k()
+			},
+			isOpen: a,
+			positioner: {
+				floating: () => w,
+				reference: () => k(),
+				update: A
+			},
+			restoreFocus: !1,
+			setOpen: (e) => {
+				if (e) {
+					a.value = !0, w && !w.matches(":popover-open") && w.showPopover();
+					return;
+				}
+				a.value = !1, w?.matches(":popover-open") && w.hidePopover();
+			}
+		});
+		function M() {
+			b.value || l.value || !e.content.value && !n.has("content").value || (O(), D(), S = setTimeout(() => {
+				j.open("trigger");
+			}, Number(e.delay.value) || 0));
 		}
-		function D() {
-			if (t.open.value !== void 0) return;
-			y &&= (clearTimeout(y), null);
-			let e = Number(t["close-delay"].value) || 0;
-			e > 0 ? (b && clearTimeout(b), b = setTimeout(() => {
-				b = null, O();
-			}, e)) : O();
+		function N() {
+			if (b.value) return;
+			D();
+			let t = Number(e["close-delay"].value) || 0;
+			t > 0 ? (O(), C = setTimeout(() => {
+				C = null, P();
+			}, t)) : P();
 		}
-		function O() {
-			v?.(), v = null, i.value = !1, x?.matches(":popover-open") && x.hidePopover();
+		function P() {
+			j.close("trigger", !1);
 		}
-		function k() {
-			i.value ? D() : E();
+		function F() {
+			a.value ? N() : M();
 		}
-		o(() => {
-			let n = e.shadowRoot?.querySelector("slot:not([name])");
-			if (!n) return;
-			let r = () => {
-				a();
-				let e = n.assignedElements({ flatten: !0 })[0];
+		d(() => {
+			let r = t?.querySelector("slot:not([name])"), a = s();
+			return r ? (p(n.elements(), () => {
+				a.clear();
+				let e = r.assignedElements({ flatten: !0 })[0];
 				if (!e) return;
-				e.setAttribute("aria-describedby", S);
-				let t = C.value;
-				t.includes("hover") && (e.addEventListener("pointerenter", E), e.addEventListener("pointerleave", D)), t.includes("focus") && (e.addEventListener("focusin", E), e.addEventListener("focusout", D)), t.includes("click") && e.addEventListener("click", k), document.addEventListener("keydown", A);
-			}, a = () => {
-				let e = n.assignedElements({ flatten: !0 })[0];
-				e && (e.removeAttribute("aria-describedby"), e.removeEventListener("pointerenter", E), e.removeEventListener("pointerleave", D), e.removeEventListener("focusin", E), e.removeEventListener("focusout", D), e.removeEventListener("click", k), document.removeEventListener("keydown", A));
-			};
-			return s("default", r), l(t.open, (e) => {
-				if (e != null) if (e) {
-					i.value = !0, x && !x.matches(":popover-open") && x.showPopover();
-					let e = w();
-					e && x ? (v?.(), v = u(e, x, T)) : requestAnimationFrame(() => T());
-				} else O();
+				let t = i(e, { describedby: () => T }), n = [], o = (e, t, r, i) => {
+					e.addEventListener(t, r, i), n.push(() => e.removeEventListener(t, r, i));
+				}, s = E.value;
+				s.includes("hover") && (o(e, "pointerenter", M), o(e, "pointerleave", N)), s.includes("focus") && (o(e, "focusin", M), o(e, "focusout", N)), s.includes("click") && o(e, "click", F), o(document, "keydown", I), a.set(() => {
+					t();
+					for (let e of n) e();
+				});
+			}, { immediate: !0 }), p(e.open, (e) => {
+				e != null && (e ? j.open("programmatic") : j.close("programmatic", !1));
 			}), () => {
-				a(), y && clearTimeout(y), b && clearTimeout(b), v?.(), v = null, x?.matches(":popover-open") && x.hidePopover();
-			};
+				a.clear(), D(), O();
+			}) : void 0;
 		});
-		function A(e) {
-			e.key === "Escape" && D();
+		function I(e) {
+			e.key === "Escape" && j.close("escape", !1);
 		}
-		return a`
+		return u`
       <slot></slot>
       <div
         class="tooltip"
         part="tooltip"
-        id="${S}"
+        id="${T}"
         role="tooltip"
         popover="manual"
         ref=${(e) => {
-			x = e;
+			w = e;
 		}}
-        :data-placement="${_}"
-        :aria-hidden="${() => String(!i.value)}">
-        <slot name="content">${() => t.content.value}</slot>
+        :data-placement="${x}"
+        :aria-hidden="${() => String(!a.value)}">
+        <slot name="content">${() => e.content.value}</slot>
       </div>
     `;
 	},
-	styles: [e, t],
-	tag: "bit-tooltip"
+	styles: [n, a]
 });
 //#endregion
-export { _ as TOOLTIP_TAG };
+export { b as TOOLTIP_TAG };
 
 //# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../src/overlay/tooltip/tooltip.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/floatit';\n\nimport { computed, createId, defineComponent, html, onMount, onSlotChange, signal, watch } from '@vielzeug/craftit';\nimport { autoUpdate, computePosition, flip, offset, shift } from '@vielzeug/floatit';\n\nimport type { ComponentSize } from '../../types';\n\nimport { forcedColorsMixin } from '../../styles';\n\ntype TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\ntype TooltipTrigger = 'hover' | 'focus' | 'click';\n\nconst TOOLTIP_OFFSET = 8; // gap from trigger to tooltip edge\nconst LEFT_GAP_COMPENSATION = 4; // left placement looks visually tighter in practice\n\nimport styles from './tooltip.css?inline';\n\n/** Tooltip component properties */\nexport type BitTooltipProps = {\n  /** Hide delay in ms (useful to keep tooltip open when moving focus between trigger and tooltip) */\n  'close-delay'?: number;\n  /** Tooltip text content */\n  content?: string;\n  /** Show delay in ms */\n  delay?: number;\n  /** Disable the tooltip */\n  disabled?: boolean;\n  /** Controlled open state. When provided, the tooltip acts as a controlled component and ignores trigger events for open/close. */\n  open?: boolean;\n  /** Preferred placement relative to trigger */\n  placement?: TooltipPlacement;\n  /** Tooltip size */\n  size?: ComponentSize;\n  /** Which trigger(s) show/hide the tooltip — comma-separated if multiple, e.g. \"hover,focus\" */\n  trigger?: string;\n  /** Visual variant: 'dark' (default) or 'light' */\n  variant?: 'dark' | 'light';\n};\n\n/**\n * A lightweight tooltip shown on hover/focus/click relative to the slotted trigger.\n *\n * @element bit-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} placement - 'top' | 'bottom' | 'left' | 'right' (default: 'top')\n * @attr {string} trigger - 'hover' | 'focus' | 'click' or comma-separated combination\n * @attr {number} delay - Show delay in milliseconds (default: 0)\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - 'dark' (default) | 'light'\n * @attr {boolean} disabled - Disable the tooltip\n *\n * @slot - Trigger element that the tooltip is anchored to\n * @slot content - Complex tooltip content (overrides the `content` attribute)\n *\n * @cssprop --tooltip-max-width - Max width of the tooltip bubble\n *\n * @example\n * ```html\n * <bit-tooltip content=\"Copy to clipboard\">\n *   <button>Copy</button>\n * </bit-tooltip>\n *\n * <bit-tooltip placement=\"right\" trigger=\"focus,hover\" content=\"Required field\">\n *   <input type=\"text\" />\n * </bit-tooltip>\n * ```\n */\nexport const TOOLTIP_TAG = defineComponent<BitTooltipProps>({\n  props: {\n    'close-delay': { default: 0 },\n    content: { default: '' },\n    delay: { default: 0 },\n    disabled: { default: false },\n    open: { default: undefined },\n    placement: { default: 'top' },\n    size: { default: undefined },\n    trigger: { default: 'hover,focus' },\n    variant: { default: undefined },\n  },\n  setup({ host, props }) {\n    const visible = signal(false);\n    const activePlacement = signal<TooltipPlacement>('top');\n    let autoUpdateCleanup: (() => void) | null = null;\n    let showTimer: ReturnType<typeof setTimeout> | null = null;\n    let hideTimer: ReturnType<typeof setTimeout> | null = null;\n    let tooltipEl: HTMLElement | null = null;\n    const tooltipId = createId('tooltip');\n    const triggers = computed<TooltipTrigger[]>(() =>\n      String(props.trigger.value)\n        .split(',')\n        .map((t: string) => t.trim() as TooltipTrigger)\n        .filter(Boolean),\n    );\n\n    function getTriggerEl(): Element | null {\n      // First slotted element is the trigger\n      const slot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n      const assigned = slot?.assignedElements({ flatten: true });\n\n      return assigned?.[0] ?? null;\n    }\n    function updatePosition() {\n      if (!tooltipEl) return;\n\n      const triggerEl = getTriggerEl();\n\n      if (!triggerEl) return;\n\n      computePosition(triggerEl, tooltipEl, {\n        middleware: [offset(TOOLTIP_OFFSET), flip(), shift({ padding: 6 })],\n        placement: props.placement.value as Placement,\n      }).then(({ placement, x, y }) => {\n        if (!tooltipEl) return;\n\n        const side = placement.split('-')[0] as TooltipPlacement;\n        const adjustedX = side === 'left' ? x - LEFT_GAP_COMPENSATION : x;\n\n        tooltipEl.style.left = `${adjustedX}px`;\n        tooltipEl.style.top = `${y}px`;\n\n        activePlacement.value = side;\n      });\n    }\n    function show() {\n      if (props.open.value !== undefined) return; // controlled mode\n\n      const hasSlottedContent = () => {\n        const contentSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"content\"]');\n\n        return (contentSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n      };\n\n      if (props.disabled.value || (!props.content.value && !hasSlottedContent())) return;\n\n      if (hideTimer) {\n        clearTimeout(hideTimer);\n        hideTimer = null;\n      }\n\n      if (showTimer) clearTimeout(showTimer);\n\n      showTimer = setTimeout(\n        () => {\n          visible.value = true;\n\n          if (tooltipEl && !tooltipEl.matches(':popover-open')) {\n            tooltipEl.showPopover();\n          }\n\n          // Start autoUpdate: repositions on scroll, resize, and reference size change\n          const triggerEl = getTriggerEl();\n\n          if (triggerEl && tooltipEl) {\n            autoUpdateCleanup?.();\n            autoUpdateCleanup = autoUpdate(triggerEl, tooltipEl, updatePosition);\n          } else {\n            requestAnimationFrame(() => updatePosition());\n          }\n        },\n        Number(props.delay.value) || 0,\n      );\n    }\n    function hide() {\n      if (props.open.value !== undefined) return; // controlled mode\n\n      if (showTimer) {\n        clearTimeout(showTimer);\n        showTimer = null;\n      }\n\n      const closeDelay = Number(props['close-delay'].value) || 0;\n\n      if (closeDelay > 0) {\n        if (hideTimer) clearTimeout(hideTimer);\n\n        hideTimer = setTimeout(() => {\n          hideTimer = null;\n          _doHide();\n        }, closeDelay);\n      } else {\n        _doHide();\n      }\n    }\n    function _doHide() {\n      autoUpdateCleanup?.();\n      autoUpdateCleanup = null;\n      visible.value = false;\n\n      if (tooltipEl?.matches(':popover-open')) {\n        tooltipEl.hidePopover();\n      }\n    }\n    function toggleClick() {\n      if (visible.value) hide();\n      else show();\n    }\n    onMount(() => {\n      const slot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n      if (!slot) return;\n\n      const bindTriggerEvents = () => {\n        unbindTriggerEvents(); // clean up previous bindings\n\n        const triggerEl = slot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!triggerEl) return;\n\n        triggerEl.setAttribute('aria-describedby', tooltipId);\n\n        const t = triggers.value;\n\n        if (t.includes('hover')) {\n          triggerEl.addEventListener('pointerenter', show);\n          triggerEl.addEventListener('pointerleave', hide);\n        }\n\n        if (t.includes('focus')) {\n          triggerEl.addEventListener('focusin', show);\n          triggerEl.addEventListener('focusout', hide);\n        }\n\n        if (t.includes('click')) {\n          triggerEl.addEventListener('click', toggleClick);\n        }\n\n        // Keyboard escape to dismiss\n        document.addEventListener('keydown', handleKeydown);\n      };\n      const unbindTriggerEvents = () => {\n        const triggerEl = slot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!triggerEl) return;\n\n        triggerEl.removeAttribute('aria-describedby');\n        triggerEl.removeEventListener('pointerenter', show);\n        triggerEl.removeEventListener('pointerleave', hide);\n        triggerEl.removeEventListener('focusin', show);\n        triggerEl.removeEventListener('focusout', hide);\n        triggerEl.removeEventListener('click', toggleClick);\n        document.removeEventListener('keydown', handleKeydown);\n      };\n\n      onSlotChange('default', bindTriggerEvents);\n      // Controlled mode: watch the `open` prop and show/hide accordingly\n      watch(props.open, (openVal) => {\n        if (openVal === undefined || openVal === null) return;\n\n        if (openVal) {\n          visible.value = true;\n\n          if (tooltipEl && !tooltipEl.matches(':popover-open')) tooltipEl.showPopover();\n\n          const triggerEl = getTriggerEl();\n\n          if (triggerEl && tooltipEl) {\n            autoUpdateCleanup?.();\n            autoUpdateCleanup = autoUpdate(triggerEl, tooltipEl, updatePosition);\n          } else {\n            requestAnimationFrame(() => updatePosition());\n          }\n        } else {\n          _doHide();\n        }\n      });\n\n      return () => {\n        unbindTriggerEvents();\n\n        if (showTimer) clearTimeout(showTimer);\n\n        if (hideTimer) clearTimeout(hideTimer);\n\n        autoUpdateCleanup?.();\n        autoUpdateCleanup = null;\n\n        if (tooltipEl?.matches(':popover-open')) {\n          tooltipEl.hidePopover();\n        }\n      };\n    });\n    function handleKeydown(e: KeyboardEvent) {\n      if (e.key === 'Escape') hide();\n    }\n\n    return html`\n      <slot></slot>\n      <div\n        class=\"tooltip\"\n        part=\"tooltip\"\n        id=\"${tooltipId}\"\n        role=\"tooltip\"\n        popover=\"manual\"\n        ref=${(el: HTMLElement) => {\n          tooltipEl = el;\n        }}\n        :data-placement=\"${activePlacement}\"\n        :aria-hidden=\"${() => String(!visible.value)}\">\n        <slot name=\"content\">${() => props.content.value}</slot>\n      </div>\n    `;\n  },\n  styles: [forcedColorsMixin, styles],\n  tag: 'bit-tooltip',\n});\n"],"mappings":";;;;;;AAYA,IAAM,IAAiB,GACjB,IAAwB,GAuDjB,IAAc,EAAiC;CAC1D,OAAO;EACL,eAAe,EAAE,SAAS,GAAG;EAC7B,SAAS,EAAE,SAAS,IAAI;EACxB,OAAO,EAAE,SAAS,GAAG;EACrB,UAAU,EAAE,SAAS,IAAO;EAC5B,MAAM,EAAE,SAAS,KAAA,GAAW;EAC5B,WAAW,EAAE,SAAS,OAAO;EAC7B,MAAM,EAAE,SAAS,KAAA,GAAW;EAC5B,SAAS,EAAE,SAAS,eAAe;EACnC,SAAS,EAAE,SAAS,KAAA,GAAW;EAChC;CACD,MAAM,EAAE,SAAM,YAAS;EACrB,IAAM,IAAU,EAAO,GAAM,EACvB,IAAkB,EAAyB,MAAM,EACnD,IAAyC,MACzC,IAAkD,MAClD,IAAkD,MAClD,IAAgC,MAC9B,IAAY,EAAS,UAAU,EAC/B,IAAW,QACf,OAAO,EAAM,QAAQ,MAAM,CACxB,MAAM,IAAI,CACV,KAAK,MAAc,EAAE,MAAM,CAAmB,CAC9C,OAAO,QAAQ,CACnB;EAED,SAAS,IAA+B;AAKtC,WAHa,EAAK,YAAY,cAA+B,mBAAmB,GACzD,iBAAiB,EAAE,SAAS,IAAM,CAAC,GAExC,MAAM;;EAE1B,SAAS,IAAiB;AACxB,OAAI,CAAC,EAAW;GAEhB,IAAM,IAAY,GAAc;AAE3B,QAEL,EAAgB,GAAW,GAAW;IACpC,YAAY;KAAC,EAAO,EAAe;KAAE,GAAM;KAAE,EAAM,EAAE,SAAS,GAAG,CAAC;KAAC;IACnE,WAAW,EAAM,UAAU;IAC5B,CAAC,CAAC,MAAM,EAAE,cAAW,MAAG,WAAQ;AAC/B,QAAI,CAAC,EAAW;IAEhB,IAAM,IAAO,EAAU,MAAM,IAAI,CAAC,IAC5B,IAAY,MAAS,SAAS,IAAI,IAAwB;AAKhE,IAHA,EAAU,MAAM,OAAO,GAAG,EAAU,KACpC,EAAU,MAAM,MAAM,GAAG,EAAE,KAE3B,EAAgB,QAAQ;KACxB;;EAEJ,SAAS,IAAO;AASV,GARA,EAAM,KAAK,UAAU,KAAA,KAQrB,EAAM,SAAS,SAAU,CAAC,EAAM,QAAQ,SAAS,IAL/B,EAAK,YAAY,cAA+B,yBAAuB,GAEtE,cAAc,EAAE,SAAS,IAAM,CAAC,CAAC,UAAU,KAAK,OAKvE,AAEE,OADA,aAAa,EAAU,EACX,OAGV,KAAW,aAAa,EAAU,EAEtC,IAAY,iBACJ;AAGJ,IAFA,EAAQ,QAAQ,IAEZ,KAAa,CAAC,EAAU,QAAQ,gBAAgB,IAClD,EAAU,aAAa;IAIzB,IAAM,IAAY,GAAc;AAEhC,IAAI,KAAa,KACf,KAAqB,EACrB,IAAoB,EAAW,GAAW,GAAW,EAAe,IAEpE,4BAA4B,GAAgB,CAAC;MAGjD,OAAO,EAAM,MAAM,MAAM,IAAI,EAC9B;;EAEH,SAAS,IAAO;AACd,OAAI,EAAM,KAAK,UAAU,KAAA,EAAW;AAEpC,GAEE,OADA,aAAa,EAAU,EACX;GAGd,IAAM,IAAa,OAAO,EAAM,eAAe,MAAM,IAAI;AAEzD,GAAI,IAAa,KACX,KAAW,aAAa,EAAU,EAEtC,IAAY,iBAAiB;AAE3B,IADA,IAAY,MACZ,GAAS;MACR,EAAW,IAEd,GAAS;;EAGb,SAAS,IAAU;AAKjB,GAJA,KAAqB,EACrB,IAAoB,MACpB,EAAQ,QAAQ,IAEZ,GAAW,QAAQ,gBAAgB,IACrC,EAAU,aAAa;;EAG3B,SAAS,IAAc;AACrB,GAAI,EAAQ,QAAO,GAAM,GACpB,GAAM;;AAEb,UAAc;GACZ,IAAM,IAAO,EAAK,YAAY,cAA+B,mBAAmB;AAEhF,OAAI,CAAC,EAAM;GAEX,IAAM,UAA0B;AAC9B,OAAqB;IAErB,IAAM,IAAY,EAAK,iBAAiB,EAAE,SAAS,IAAM,CAAC,CAAC;AAE3D,QAAI,CAAC,EAAW;AAEhB,MAAU,aAAa,oBAAoB,EAAU;IAErD,IAAM,IAAI,EAAS;AAiBnB,IAfI,EAAE,SAAS,QAAQ,KACrB,EAAU,iBAAiB,gBAAgB,EAAK,EAChD,EAAU,iBAAiB,gBAAgB,EAAK,GAG9C,EAAE,SAAS,QAAQ,KACrB,EAAU,iBAAiB,WAAW,EAAK,EAC3C,EAAU,iBAAiB,YAAY,EAAK,GAG1C,EAAE,SAAS,QAAQ,IACrB,EAAU,iBAAiB,SAAS,EAAY,EAIlD,SAAS,iBAAiB,WAAW,EAAc;MAE/C,UAA4B;IAChC,IAAM,IAAY,EAAK,iBAAiB,EAAE,SAAS,IAAM,CAAC,CAAC;AAEtD,UAEL,EAAU,gBAAgB,mBAAmB,EAC7C,EAAU,oBAAoB,gBAAgB,EAAK,EACnD,EAAU,oBAAoB,gBAAgB,EAAK,EACnD,EAAU,oBAAoB,WAAW,EAAK,EAC9C,EAAU,oBAAoB,YAAY,EAAK,EAC/C,EAAU,oBAAoB,SAAS,EAAY,EACnD,SAAS,oBAAoB,WAAW,EAAc;;AA0BxD,UAvBA,EAAa,WAAW,EAAkB,EAE1C,EAAM,EAAM,OAAO,MAAY;AACzB,aAAqC,KAEzC,KAAI,GAAS;AAGX,KAFA,EAAQ,QAAQ,IAEZ,KAAa,CAAC,EAAU,QAAQ,gBAAgB,IAAE,EAAU,aAAa;KAE7E,IAAM,IAAY,GAAc;AAEhC,KAAI,KAAa,KACf,KAAqB,EACrB,IAAoB,EAAW,GAAW,GAAW,EAAe,IAEpE,4BAA4B,GAAgB,CAAC;UAG/C,IAAS;KAEX,QAEW;AAUX,IATA,GAAqB,EAEjB,KAAW,aAAa,EAAU,EAElC,KAAW,aAAa,EAAU,EAEtC,KAAqB,EACrB,IAAoB,MAEhB,GAAW,QAAQ,gBAAgB,IACrC,EAAU,aAAa;;IAG3B;EACF,SAAS,EAAc,GAAkB;AACvC,GAAI,EAAE,QAAQ,YAAU,GAAM;;AAGhC,SAAO,CAAI;;;;;cAKD,EAAU;;;eAGT,MAAoB;AACzB,OAAY;IACZ;2BACiB,EAAgB;8BACb,OAAO,CAAC,EAAQ,MAAM,CAAC;qCAChB,EAAM,QAAQ,MAAM;;;;CAIvD,QAAQ,CAAC,GAAmB,EAAO;CACnC,KAAK;CACN,CAAC"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../src/overlay/tooltip/tooltip.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/floatit';\n\nimport { define, createCleanupSignal, computed, createId, html, onMount, signal, watch } from '@vielzeug/craftit';\nimport { createOverlayControl } from '@vielzeug/craftit/controls';\nimport { computePosition, flip, offset, shift } from '@vielzeug/floatit';\n\nimport type { ComponentSize } from '../../types';\n\nimport { disablableBundle, sizableBundle, type PropBundle } from '../../inputs/shared/bundles';\nimport { forcedColorsMixin } from '../../styles';\nimport { syncAria } from '../../utils/aria';\n\ntype TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\ntype TooltipTrigger = 'hover' | 'focus' | 'click';\n\nconst TOOLTIP_OFFSET = 8; // gap from trigger to tooltip edge\nconst LEFT_GAP_COMPENSATION = 4; // left placement looks visually tighter in practice\n\nimport styles from './tooltip.css?inline';\n\n/** Tooltip component properties */\nexport type BitTooltipProps = {\n  /** Hide delay in ms (useful to keep tooltip open when moving focus between trigger and tooltip) */\n  'close-delay'?: number;\n  /** Tooltip text content */\n  content?: string;\n  /** Show delay in ms */\n  delay?: number;\n  /** Disable the tooltip */\n  disabled?: boolean;\n  /** Controlled open state. When provided, the tooltip acts as a controlled component and ignores trigger events for open/close. */\n  open?: boolean;\n  /** Preferred placement relative to trigger */\n  placement?: TooltipPlacement;\n  /** Tooltip size */\n  size?: ComponentSize;\n  /** Which trigger(s) show/hide the tooltip — comma-separated if multiple, e.g. \"hover,focus\" */\n  trigger?: string;\n  /** Visual variant: 'dark' (default) or 'light' */\n  variant?: 'dark' | 'light';\n};\n\nconst tooltipProps = {\n  ...sizableBundle,\n  ...disablableBundle,\n  'close-delay': 0,\n  content: '',\n  delay: 0,\n  open: undefined,\n  placement: 'top',\n  trigger: 'hover,focus',\n  variant: undefined,\n} satisfies PropBundle<BitTooltipProps>;\n\n/**\n * A lightweight tooltip shown on hover/focus/click relative to the slotted trigger.\n *\n * @element bit-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} placement - 'top' | 'bottom' | 'left' | 'right' (default: 'top')\n * @attr {string} trigger - 'hover' | 'focus' | 'click' or comma-separated combination\n * @attr {number} delay - Show delay in milliseconds (default: 0)\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - 'dark' (default) | 'light'\n * @attr {boolean} disabled - Disable the tooltip\n *\n * @slot - Trigger element that the tooltip is anchored to\n * @slot content - Complex tooltip content (overrides the `content` attribute)\n *\n * @cssprop --tooltip-max-width - Max width of the tooltip bubble\n *\n * @example\n * ```html\n * <bit-tooltip content=\"Copy to clipboard\">\n *   <button>Copy</button>\n * </bit-tooltip>\n *\n * <bit-tooltip placement=\"right\" trigger=\"focus,hover\" content=\"Required field\">\n *   <input type=\"text\" />\n * </bit-tooltip>\n * ```\n */\nexport const TOOLTIP_TAG = define('bit-tooltip', {\n  props: tooltipProps,\n  setup({ props, shadowRoot, slots }) {\n    const visible = signal(false);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const isControlled = computed(() => props.open.value !== undefined);\n    const activePlacement = signal<TooltipPlacement>('top');\n    let showTimer: ReturnType<typeof setTimeout> | null = null;\n    let hideTimer: ReturnType<typeof setTimeout> | null = null;\n    let tooltipEl: HTMLElement | null = null;\n    const tooltipId = createId('tooltip');\n    const triggers = computed<TooltipTrigger[]>(() =>\n      String(props.trigger.value)\n        .split(',')\n        .map((t: string) => t.trim() as TooltipTrigger)\n        .filter(Boolean),\n    );\n    const clearShowTimer = () => {\n      if (!showTimer) return;\n\n      clearTimeout(showTimer);\n      showTimer = null;\n    };\n    const clearHideTimer = () => {\n      if (!hideTimer) return;\n\n      clearTimeout(hideTimer);\n      hideTimer = null;\n    };\n\n    function getTriggerEl(): Element | null {\n      // First slotted element is the trigger\n      const slot = shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n      const assigned = slot?.assignedElements({ flatten: true });\n\n      return assigned?.[0] ?? null;\n    }\n    function updatePosition() {\n      if (!tooltipEl) return;\n\n      const triggerEl = getTriggerEl();\n\n      if (!triggerEl) return;\n\n      const { placement, x, y } = computePosition(triggerEl, tooltipEl, {\n        middleware: [offset(TOOLTIP_OFFSET), flip(), shift({ padding: 6 })],\n        placement: props.placement.value as Placement,\n      });\n\n      const side = placement.split('-')[0] as TooltipPlacement;\n      const adjustedX = side === 'left' ? x - LEFT_GAP_COMPENSATION : x;\n\n      tooltipEl.style.left = `${adjustedX}px`;\n      tooltipEl.style.top = `${y}px`;\n\n      activePlacement.value = side;\n    }\n\n    const overlay = createOverlayControl({\n      disabled: isDisabled,\n      elements: {\n        boundary: document.body,\n        panel: tooltipEl,\n        trigger: getTriggerEl() as HTMLElement | null,\n      },\n      isOpen: visible,\n      positioner: {\n        floating: () => tooltipEl,\n        reference: () => getTriggerEl() as HTMLElement | null,\n        update: updatePosition,\n      },\n      restoreFocus: false,\n      setOpen: (next) => {\n        if (next) {\n          visible.value = true;\n\n          if (tooltipEl && !tooltipEl.matches(':popover-open')) {\n            tooltipEl.showPopover();\n          }\n\n          return;\n        }\n\n        visible.value = false;\n\n        if (tooltipEl?.matches(':popover-open')) {\n          tooltipEl.hidePopover();\n        }\n      },\n    });\n\n    function show() {\n      if (isControlled.value) return;\n\n      if (isDisabled.value || (!props.content.value && !slots.has('content').value)) return;\n\n      clearHideTimer();\n      clearShowTimer();\n\n      showTimer = setTimeout(\n        () => {\n          overlay.open('trigger');\n        },\n        Number(props.delay.value) || 0,\n      );\n    }\n    function hide() {\n      if (isControlled.value) return;\n\n      clearShowTimer();\n\n      const closeDelay = Number(props['close-delay'].value) || 0;\n\n      if (closeDelay > 0) {\n        clearHideTimer();\n\n        hideTimer = setTimeout(() => {\n          hideTimer = null;\n          closeNow();\n        }, closeDelay);\n      } else {\n        closeNow();\n      }\n    }\n    function closeNow() {\n      overlay.close('trigger', false);\n    }\n    function toggleClick() {\n      if (visible.value) hide();\n      else show();\n    }\n    onMount(() => {\n      const slot = shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n      const triggerBinding = createCleanupSignal();\n\n      if (!slot) return;\n\n      const bindTriggerEvents = () => {\n        triggerBinding.clear();\n\n        const triggerEl = slot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!triggerEl) return;\n\n        const removeAria = syncAria(triggerEl, {\n          describedby: () => tooltipId,\n        });\n\n        const cleanups: Array<() => void> = [];\n        const add = (\n          target: EventTarget,\n          event: string,\n          listener: EventListener,\n          options?: AddEventListenerOptions,\n        ) => {\n          target.addEventListener(event, listener, options);\n          cleanups.push(() => target.removeEventListener(event, listener, options));\n        };\n\n        const t = triggers.value;\n\n        if (t.includes('hover')) {\n          add(triggerEl, 'pointerenter', show as EventListener);\n          add(triggerEl, 'pointerleave', hide as EventListener);\n        }\n\n        if (t.includes('focus')) {\n          add(triggerEl, 'focusin', show as EventListener);\n          add(triggerEl, 'focusout', hide as EventListener);\n        }\n\n        if (t.includes('click')) {\n          add(triggerEl, 'click', toggleClick as EventListener);\n        }\n\n        // Keyboard escape to dismiss\n        add(document, 'keydown', handleKeydown as EventListener);\n\n        triggerBinding.set(() => {\n          removeAria();\n\n          for (const cleanup of cleanups) cleanup();\n        });\n      };\n\n      watch(slots.elements(), bindTriggerEvents, { immediate: true });\n      // Controlled mode: watch the `open` prop and show/hide accordingly\n      watch(props.open, (openVal) => {\n        if (openVal === undefined || openVal === null) return;\n\n        if (openVal) {\n          overlay.open('programmatic');\n        } else {\n          overlay.close('programmatic', false);\n        }\n      });\n\n      return () => {\n        triggerBinding.clear();\n\n        clearShowTimer();\n        clearHideTimer();\n      };\n    });\n    function handleKeydown(e: KeyboardEvent) {\n      if (e.key === 'Escape') overlay.close('escape', false);\n    }\n\n    return html`\n      <slot></slot>\n      <div\n        class=\"tooltip\"\n        part=\"tooltip\"\n        id=\"${tooltipId}\"\n        role=\"tooltip\"\n        popover=\"manual\"\n        ref=${(el: HTMLElement) => {\n          tooltipEl = el;\n        }}\n        :data-placement=\"${activePlacement}\"\n        :aria-hidden=\"${() => String(!visible.value)}\">\n        <slot name=\"content\">${() => props.content.value}</slot>\n      </div>\n    `;\n  },\n  styles: [forcedColorsMixin, styles],\n});\n"],"mappings":"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"}

package/dist/types/shared.d.ts

@@ -104,7 +104,7 @@ export type CheckableProps = FormElementProps & {
 /**
  * Adds type-safe `addEventListener` / `removeEventListener` overloads to a custom element type.
  *
- * The event map `T` uses plain detail shapes (the same type passed to `defineEmits`):
+ * The event map `T` uses plain detail shapes (the same shapes used in a component's `emits` schema):
  * ```ts
  * export interface BitInputEvents {
  *   change: { value: string; originalEvent: Event };

package/dist/utils/aria.cjs

@@ -0,0 +1,2 @@
+let e=require(`@vielzeug/craftit`);var t=e=>e===`role`||e.startsWith(`aria-`)?e:e.startsWith(`aria`)?`aria-${e.slice(4).toLowerCase()}`:`aria-${e}`,n=(e,t,n)=>{if(n==null||n===!1){e.removeAttribute(t);return}e.setAttribute(t,n===!0?`true`:String(n))},r=(r,i)=>{let a=[];for(let[o,s]of Object.entries(i)){let i=t(o);typeof s==`function`?a.push((0,e.effect)(()=>n(r,i,s()))):n(r,i,s)}return()=>{for(;a.length>0;)a.pop()?.()}};exports.syncAria=r;
+//# sourceMappingURL=aria.cjs.map

package/dist/utils/aria.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria.cjs","names":[],"sources":["../../src/utils/aria.ts"],"sourcesContent":["import { effect } from '@vielzeug/craftit';\n\ntype AriaValue = string | number | boolean | null | undefined | (() => string | number | boolean | null | undefined);\n\ntype AriaConfig = Record<string, AriaValue>;\n\nconst normalizeAriaKey = (key: string): string => {\n  if (key === 'role' || key.startsWith('aria-')) return key;\n\n  return key.startsWith('aria') ? `aria-${key.slice(4).toLowerCase()}` : `aria-${key}`;\n};\n\nconst setA11yAttr = (target: Element, key: string, value: string | number | boolean | null | undefined): void => {\n  if (value == null || value === false) {\n    target.removeAttribute(key);\n\n    return;\n  }\n\n  target.setAttribute(key, value === true ? 'true' : String(value));\n};\n\nexport const syncAria = (target: Element, config: AriaConfig): (() => void) => {\n  const disposers: Array<() => void> = [];\n\n  for (const [rawKey, rawValue] of Object.entries(config)) {\n    const key = normalizeAriaKey(rawKey);\n\n    if (typeof rawValue === 'function') {\n      disposers.push(effect(() => setA11yAttr(target, key, rawValue())));\n    } else {\n      setA11yAttr(target, key, rawValue);\n    }\n  }\n\n  return () => {\n    while (disposers.length > 0) disposers.pop()?.();\n  };\n};\n"],"mappings":"mCAMA,IAAM,EAAoB,GACpB,IAAQ,QAAU,EAAI,WAAW,QAAQ,CAAS,EAE/C,EAAI,WAAW,OAAO,CAAG,QAAQ,EAAI,MAAM,EAAE,CAAC,aAAa,GAAK,QAAQ,IAG3E,GAAe,EAAiB,EAAa,IAA8D,CAC/G,GAAI,GAAS,MAAQ,IAAU,GAAO,CACpC,EAAO,gBAAgB,EAAI,CAE3B,OAGF,EAAO,aAAa,EAAK,IAAU,GAAO,OAAS,OAAO,EAAM,CAAC,EAGtD,GAAY,EAAiB,IAAqC,CAC7E,IAAM,EAA+B,EAAE,CAEvC,IAAK,GAAM,CAAC,EAAQ,KAAa,OAAO,QAAQ,EAAO,CAAE,CACvD,IAAM,EAAM,EAAiB,EAAO,CAEhC,OAAO,GAAa,WACtB,EAAU,MAAA,EAAA,EAAA,YAAkB,EAAY,EAAQ,EAAK,GAAU,CAAC,CAAC,CAAC,CAElE,EAAY,EAAQ,EAAK,EAAS,CAItC,UAAa,CACX,KAAO,EAAU,OAAS,GAAG,EAAU,KAAK,IAAI"}

package/dist/utils/aria.d.ts

@@ -0,0 +1,5 @@
+type AriaValue = string | number | boolean | null | undefined | (() => string | number | boolean | null | undefined);
+type AriaConfig = Record<string, AriaValue>;
+export declare const syncAria: (target: Element, config: AriaConfig) => (() => void);
+export {};
+//# sourceMappingURL=aria.d.ts.map

package/dist/utils/aria.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria.d.ts","sourceRoot":"","sources":["../../src/utils/aria.ts"],"names":[],"mappings":"AAEA,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAErH,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAkB5C,eAAO,MAAM,QAAQ,GAAI,QAAQ,OAAO,EAAE,QAAQ,UAAU,KAAG,CAAC,MAAM,IAAI,CAgBzE,CAAC"}

package/dist/utils/aria.js

@@ -0,0 +1,22 @@
+import { effect as e } from "@vielzeug/craftit";
+//#region src/utils/aria.ts
+var t = (e) => e === "role" || e.startsWith("aria-") ? e : e.startsWith("aria") ? `aria-${e.slice(4).toLowerCase()}` : `aria-${e}`, n = (e, t, n) => {
+	if (n == null || n === !1) {
+		e.removeAttribute(t);
+		return;
+	}
+	e.setAttribute(t, n === !0 ? "true" : String(n));
+}, r = (r, i) => {
+	let a = [];
+	for (let [o, s] of Object.entries(i)) {
+		let i = t(o);
+		typeof s == "function" ? a.push(e(() => n(r, i, s()))) : n(r, i, s);
+	}
+	return () => {
+		for (; a.length > 0;) a.pop()?.();
+	};
+};
+//#endregion
+export { r as syncAria };
+
+//# sourceMappingURL=aria.js.map

package/dist/utils/aria.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria.js","names":[],"sources":["../../src/utils/aria.ts"],"sourcesContent":["import { effect } from '@vielzeug/craftit';\n\ntype AriaValue = string | number | boolean | null | undefined | (() => string | number | boolean | null | undefined);\n\ntype AriaConfig = Record<string, AriaValue>;\n\nconst normalizeAriaKey = (key: string): string => {\n  if (key === 'role' || key.startsWith('aria-')) return key;\n\n  return key.startsWith('aria') ? `aria-${key.slice(4).toLowerCase()}` : `aria-${key}`;\n};\n\nconst setA11yAttr = (target: Element, key: string, value: string | number | boolean | null | undefined): void => {\n  if (value == null || value === false) {\n    target.removeAttribute(key);\n\n    return;\n  }\n\n  target.setAttribute(key, value === true ? 'true' : String(value));\n};\n\nexport const syncAria = (target: Element, config: AriaConfig): (() => void) => {\n  const disposers: Array<() => void> = [];\n\n  for (const [rawKey, rawValue] of Object.entries(config)) {\n    const key = normalizeAriaKey(rawKey);\n\n    if (typeof rawValue === 'function') {\n      disposers.push(effect(() => setA11yAttr(target, key, rawValue())));\n    } else {\n      setA11yAttr(target, key, rawValue);\n    }\n  }\n\n  return () => {\n    while (disposers.length > 0) disposers.pop()?.();\n  };\n};\n"],"mappings":";;AAMA,IAAM,KAAoB,MACpB,MAAQ,UAAU,EAAI,WAAW,QAAQ,GAAS,IAE/C,EAAI,WAAW,OAAO,GAAG,QAAQ,EAAI,MAAM,EAAE,CAAC,aAAa,KAAK,QAAQ,KAG3E,KAAe,GAAiB,GAAa,MAA8D;AAC/G,KAAI,KAAS,QAAQ,MAAU,IAAO;AACpC,IAAO,gBAAgB,EAAI;AAE3B;;AAGF,GAAO,aAAa,GAAK,MAAU,KAAO,SAAS,OAAO,EAAM,CAAC;GAGtD,KAAY,GAAiB,MAAqC;CAC7E,IAAM,IAA+B,EAAE;AAEvC,MAAK,IAAM,CAAC,GAAQ,MAAa,OAAO,QAAQ,EAAO,EAAE;EACvD,IAAM,IAAM,EAAiB,EAAO;AAEpC,EAAI,OAAO,KAAa,aACtB,EAAU,KAAK,QAAa,EAAY,GAAQ,GAAK,GAAU,CAAC,CAAC,CAAC,GAElE,EAAY,GAAQ,GAAK,EAAS;;AAItC,cAAa;AACX,SAAO,EAAU,SAAS,GAAG,GAAU,KAAK,IAAI"}