@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/otp-input.js

@@ -1,93 +1,113 @@
-import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
-import { colorThemeMixin as t, forcedColorsFocusMixin as n } from "./styles/mixins/theme.css.js";
+import { disablableBundle as e, sizableBundle as t, themableBundle as n } from "./inputs/shared/bundles.js";
+import { sizeVariantMixin as r } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as i, forcedColorsFocusMixin as a } from "./styles/mixins/theme.css.js";
 import "./styles/index.js";
-import r from "./inputs/otp-input/otp-input.css?inline.js";
-import { computed as i, defineComponent as a, html as o, onMount as s, typed as c } from "@vielzeug/craftit";
-//#region src/inputs/otp-input/otp-input.ts
-var l = a({
+import { n as o } from "./packages/craftit/dist/controls/list-control.js";
+import { n as s } from "./packages/craftit/dist/controls/list-key-control.js";
+import "./packages/craftit/dist/controls.js";
+import c from "./inputs/otp-input/otp-input.css?inline.js";
+import { computed as l, define as u, html as d, onMount as f, signal as p, watch as m } from "@vielzeug/craftit";
+var h = u("bit-otp-input", {
 	props: {
-		color: c(void 0),
-		disabled: c(!1),
-		label: c("One-time password"),
-		length: c(6),
-		masked: c(!1),
-		name: c(void 0),
-		separator: c(void 0),
-		size: c(void 0),
-		type: c("numeric"),
-		value: c(""),
-		variant: c(void 0)
+		...n,
+		...t,
+		...e,
+		label: "One-time password",
+		length: 6,
+		masked: !1,
+		name: void 0,
+		separator: void 0,
+		type: "numeric",
+		value: "",
+		variant: void 0
 	},
 	setup({ emit: e, host: t, props: n }) {
-		let r = i(() => Array.from({ length: Number(n.length.value) || 6 }, (e, t) => t));
-		function a() {
+		let r = l(() => Number(n.length.value) || 6), i = l(() => !!n.disabled.value), a = l(() => Array.from({ length: r.value }, (e, t) => t)), c = p(0), u = p(String(n.value.value || "")), h = () => String(n.value.value || "");
+		t.bind("attr", { value: () => u.value || null });
+		function g() {
 			return [...t.shadowRoot?.querySelectorAll("input.cell") ?? []];
 		}
-		function c() {
-			return a().map((e) => e.value).join("");
+		let _ = o({
+			getIndex: () => c.value,
+			getItems: () => g(),
+			loop: !1,
+			setIndex: (e) => {
+				c.value = e, g()[e]?.focus();
+			}
+		}), v = s({
+			control: _,
+			keys: {
+				next: ["ArrowRight"],
+				prev: ["ArrowLeft"]
+			}
+		});
+		function y() {
+			return g().map((e) => e.value).join("");
+		}
+		function b(e) {
+			let t = g(), n = String(e || "").slice(0, t.length);
+			for (let e of t) e.value = "";
+			n.split("").forEach((e, n) => {
+				t[n] && (t[n].value = e);
+			}), u.value = y();
 		}
-		function l(e) {
+		function x(t, n) {
+			let r = g(), i = y(), a = n ?? (i.length === r.length && i.split("").every(Boolean));
+			u.value = i, e("change", {
+				complete: a,
+				originalEvent: t,
+				value: i
+			}), a && e("complete", {
+				originalEvent: t,
+				value: i
+			});
+		}
+		function S(e) {
 			return n.type.value === "numeric" ? /^\d$/.test(e) : /^[a-z\d]$/i.test(e);
 		}
-		function u(n, r) {
-			let i = n.target, o = i.value;
-			if (o.length > 1 && (o = o.slice(-1)), o && !l(o)) {
-				i.value = "";
+		function C(e, t) {
+			let n = e.target, r = n.value;
+			if (r.length > 1 && (r = r.slice(-1)), r && !S(r)) {
+				n.value = "";
 				return;
 			}
-			i.value = o;
-			let s = a(), u = c(), d = u.length === s.length && u.split("").every(Boolean);
-			t.setAttribute("value", u), e("change", {
-				complete: d,
-				originalEvent: n,
-				value: u
-			}), d && e("complete", {
-				originalEvent: n,
-				value: u
-			}), o && r < s.length - 1 && (s[r + 1].focus(), s[r + 1].select());
+			n.value = r;
+			let i = g();
+			x(e), r && t < i.length - 1 && (i[t + 1].focus(), i[t + 1].select());
 		}
-		function d(n, r) {
-			let i = n.target, o = a();
-			if (n.key === "Backspace") {
-				i.value ? i.value = "" : r > 0 && (o[r - 1].focus(), o[r - 1].select(), o[r - 1].value = "");
-				let a = c();
-				t.setAttribute("value", a), e("change", {
-					complete: !1,
-					originalEvent: n,
-					value: a
-				}), n.preventDefault();
-			} else n.key === "ArrowLeft" && r > 0 ? (o[r - 1].focus(), n.preventDefault()) : n.key === "ArrowRight" && r < o.length - 1 ? (o[r + 1].focus(), n.preventDefault()) : n.key === "Home" ? (o[0].focus(), n.preventDefault()) : n.key === "End" && (o[o.length - 1].focus(), n.preventDefault());
+		function w(e, t) {
+			let n = e.target, r = g();
+			if (c.value = t, e.key === "Backspace") {
+				if (n.value) n.value = "";
+				else if (t > 0) {
+					let e = r[_.prev().index];
+					e && (e.select(), e.value = "");
+				}
+				x(e, !1), e.preventDefault();
+			} else v.handleKeydown(e);
 		}
-		function f(r) {
-			r.preventDefault();
-			let i = (r.clipboardData?.getData("text") ?? "").split("").filter((e) => l(e)).slice(0, Number(n.length.value) || 6), o = a();
-			i.forEach((e, t) => {
-				o[t] && (o[t].value = e);
-			});
-			let s = c(), u = s.length === o.length && s.split("").every(Boolean);
-			t.setAttribute("value", s), e("change", {
-				complete: u,
-				originalEvent: r,
-				value: s
-			}), u && e("complete", {
-				originalEvent: r,
-				value: s
-			}), o[Math.min(i.length, o.length - 1)]?.focus();
+		function T(e) {
+			e.preventDefault();
+			let t = (e.clipboardData?.getData("text") ?? "").split("").filter((e) => S(e)).slice(0, r.value), n = g();
+			t.forEach((e, t) => {
+				n[t] && (n[t].value = e);
+			}), x(e), n[Math.min(t.length, n.length - 1)]?.focus();
 		}
-		s(() => {
-			let e = String(n.value.value || ""), t = a();
-			e.split("").forEach((e, n) => {
-				t[n] && (t[n].value = e);
-			});
+		f(() => {
+			b(h());
+		}), m(n.value, (e) => {
+			b(String(e || ""));
+		}), m(n.length, () => {
+			requestAnimationFrame(() => b(h()));
 		});
-		let p = i(() => {
+		let E = l(() => {
 			let e = Number(n.length.value) || 6;
 			return n.separator.value == null ? -1 : Math.floor(e / 2);
 		});
-		return o`
+		return d`
       <div class="otp-group" part="group" role="group" :aria-label="${() => n.label.value}">
-        ${() => r.value.map((e) => o`
-              ${() => p.value > 0 && e === p.value ? o`<span class="separator" aria-hidden="true">${() => n.separator.value || "-"}</span>` : ""}
+        ${() => a.value.map((e) => d`
+              ${() => E.value > 0 && e === E.value ? d`<span class="separator" aria-hidden="true">${() => n.separator.value || "-"}</span>` : ""}
               <input
                 class="cell"
                 part="cell"
@@ -95,26 +115,25 @@ var l = a({
                 :inputmode="${() => n.type.value === "numeric" ? "numeric" : "text"}"
                 maxlength="1"
                 :autocomplete="${() => e === 0 ? "one-time-code" : "off"}"
-                :aria-label="${() => `Digit ${e + 1} of ${n.length.value}`}"
-                :disabled="${() => n.disabled.value || null}"
+                :aria-label="${() => `Digit ${e + 1} of ${r.value}`}"
+                :disabled="${() => i.value ? !0 : null}"
                 :name="${() => n.name.value ? `${n.name.value}[${e}]` : null}"
-                @input="${(t) => u(t, e)}"
-                @keydown="${(t) => d(t, e)}"
-                @paste="${(t) => e === 0 ? f(t) : t.preventDefault()}"
+                @input="${(t) => C(t, e)}"
+                @keydown="${(t) => w(t, e)}"
+                @paste="${(t) => e === 0 ? T(t) : t.preventDefault()}"
                 @focus="${(e) => e.target.select()}" />
             `)}
       </div>
     `;
 	},
 	styles: [
-		t,
-		e({}),
-		n(".cell"),
-		r
-	],
-	tag: "bit-otp-input"
+		i,
+		r({}),
+		a(".cell"),
+		c
+	]
 });
 //#endregion
-export { l as OTP_INPUT_TAG };
+export { h as OTP_INPUT_TAG };
 
 //# sourceMappingURL=otp-input.js.map

package/dist/otp-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.js","names":[],"sources":["../src/inputs/otp-input/otp-input.ts"],"sourcesContent":["import { computed, defineComponent, html, onMount, typed } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { colorThemeMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport styles from './otp-input.css?inline';\n\nexport type BitOtpInputEvents = {\n  change: { complete: boolean; originalEvent?: Event; value: string };\n  complete: { originalEvent?: Event; value: string };\n};\n\n/** OTP Input props */\nexport type BitOtpInputProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Make inputs disabled */\n  disabled?: boolean;\n  /** Accessible label */\n  label?: string;\n  /** Number of input cells */\n  length?: number;\n  /** Mask input (show dots instead of characters) */\n  masked?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Show a separator in the middle (e.g. \"–\") */\n  separator?: string;\n  /** Component size */\n  size?: ComponentSize;\n  /** Input type: 'numeric' (digits only) or 'alphanumeric' */\n  type?: 'numeric' | 'alphanumeric';\n  /** Current value */\n  value?: string;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost' | 'glass'>;\n};\n\n/**\n * A segmented OTP (One-Time Password) input with N individual cells.\n * Auto-advances focus on input, auto-backs on Backspace, handles paste.\n *\n * @element bit-otp-input\n *\n * @attr {number} length - Number of cells (default: 6)\n * @attr {string} type - 'numeric' (default) | 'alphanumeric'\n * @attr {string} value - Current code value\n * @attr {boolean} disabled - Disable all cells\n * @attr {boolean} masked - Show as password\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color\n * @attr {string} name - Form field name\n * @attr {string} label - Group aria-label\n * @attr {string} separator - Optional separator character shown in the middle\n *\n * @fires change - Emitted whenever a cell changes. detail: { value: string, complete: boolean, originalEvent?: Event }\n * @fires complete - Emitted when all cells are filled. detail: { value: string, originalEvent?: Event }\n *\n * @cssprop --otp-cell-size - Width and height of each cell\n * @cssprop --otp-cell-gap - Gap between cells\n * @cssprop --otp-cell-font-size - Font size inside cells\n * @cssprop --otp-cell-radius - Border radius of cells\n * @cssprop --otp-cell-border-color - Default border color\n * @cssprop --otp-cell-focus-border - Focused border color\n *\n * @example\n * ```html\n * <bit-otp-input length=\"6\" color=\"primary\"></bit-otp-input>\n * ```\n */\nexport const OTP_INPUT_TAG = defineComponent<BitOtpInputProps, BitOtpInputEvents>({\n  props: {\n    color: typed<BitOtpInputProps['color']>(undefined),\n    disabled: typed<boolean>(false),\n    label: typed<string>('One-time password'),\n    length: typed<number>(6),\n    masked: typed<boolean>(false),\n    name: typed<string | undefined>(undefined),\n    separator: typed<string | undefined>(undefined),\n    size: typed<BitOtpInputProps['size']>(undefined),\n    type: typed<BitOtpInputProps['type']>('numeric'),\n    value: typed<string>(''),\n    variant: typed<BitOtpInputProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    const cells = computed(() => Array.from({ length: Number(props.length.value) || 6 }, (_, i) => i));\n\n    function getInputs(): HTMLInputElement[] {\n      return [...(host.shadowRoot?.querySelectorAll<HTMLInputElement>('input.cell') ?? [])];\n    }\n    function getValue(): string {\n      return getInputs()\n        .map((i) => i.value)\n        .join('');\n    }\n    function isAllowed(char: string): boolean {\n      if (props.type.value === 'numeric') return /^\\d$/.test(char);\n\n      return /^[a-z\\d]$/i.test(char);\n    }\n    function handleInput(e: Event, index: number) {\n      const input = e.target as HTMLInputElement;\n      let val = input.value;\n\n      // Keep only last character if multiple were typed somehow\n      if (val.length > 1) val = val.slice(-1);\n\n      // Validate character\n      if (val && !isAllowed(val)) {\n        input.value = '';\n\n        return;\n      }\n\n      input.value = val;\n\n      const allInputs = getInputs();\n      const full = getValue();\n      const complete = full.length === allInputs.length && full.split('').every(Boolean);\n\n      host.setAttribute('value', full);\n      emit('change', { complete, originalEvent: e, value: full });\n\n      if (complete) emit('complete', { originalEvent: e, value: full });\n\n      // Auto-advance\n      if (val && index < allInputs.length - 1) {\n        allInputs[index + 1].focus();\n        allInputs[index + 1].select();\n      }\n    }\n    function handleKeydown(e: KeyboardEvent, index: number) {\n      const input = e.target as HTMLInputElement;\n      const allInputs = getInputs();\n\n      if (e.key === 'Backspace') {\n        if (input.value) {\n          input.value = '';\n        } else if (index > 0) {\n          allInputs[index - 1].focus();\n          allInputs[index - 1].select();\n          allInputs[index - 1].value = '';\n        }\n\n        const full = getValue();\n\n        host.setAttribute('value', full);\n        emit('change', { complete: false, originalEvent: e, value: full });\n        e.preventDefault();\n      } else if (e.key === 'ArrowLeft' && index > 0) {\n        allInputs[index - 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'ArrowRight' && index < allInputs.length - 1) {\n        allInputs[index + 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'Home') {\n        allInputs[0].focus();\n        e.preventDefault();\n      } else if (e.key === 'End') {\n        allInputs[allInputs.length - 1].focus();\n        e.preventDefault();\n      }\n    }\n    function handlePaste(e: ClipboardEvent) {\n      e.preventDefault();\n\n      const pasted = e.clipboardData?.getData('text') ?? '';\n      const chars = pasted\n        .split('')\n        .filter((c) => isAllowed(c))\n        .slice(0, Number(props.length.value) || 6);\n      const allInputs = getInputs();\n\n      chars.forEach((char, i) => {\n        if (allInputs[i]) allInputs[i].value = char;\n      });\n\n      const full = getValue();\n      const complete = full.length === allInputs.length && full.split('').every(Boolean);\n\n      host.setAttribute('value', full);\n      emit('change', { complete, originalEvent: e, value: full });\n\n      if (complete) emit('complete', { originalEvent: e, value: full });\n\n      // Focus the cell after last pasted char\n      const focusIdx = Math.min(chars.length, allInputs.length - 1);\n\n      allInputs[focusIdx]?.focus();\n    }\n    onMount(() => {\n      // Populate cells from value prop on mount\n      const initialVal = String(props.value.value || '');\n      const allInputs = getInputs();\n\n      initialVal.split('').forEach((c, i) => {\n        if (allInputs[i]) allInputs[i].value = c;\n      });\n    });\n\n    const separatorIdx = computed(() => {\n      const len = Number(props.length.value) || 6;\n\n      return props.separator.value != null ? Math.floor(len / 2) : -1;\n    });\n\n    return html`\n      <div class=\"otp-group\" part=\"group\" role=\"group\" :aria-label=\"${() => props.label.value}\">\n        ${() =>\n          cells.value.map(\n            (i) => html`\n              ${() =>\n                separatorIdx.value > 0 && i === separatorIdx.value\n                  ? html`<span class=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '-'}</span>`\n                  : ''}\n              <input\n                class=\"cell\"\n                part=\"cell\"\n                :type=\"${() => (props.masked.value ? 'password' : 'text')}\"\n                :inputmode=\"${() => (props.type.value === 'numeric' ? 'numeric' : 'text')}\"\n                maxlength=\"1\"\n                :autocomplete=\"${() => (i === 0 ? 'one-time-code' : 'off')}\"\n                :aria-label=\"${() => `Digit ${i + 1} of ${props.length.value}`}\"\n                :disabled=\"${() => props.disabled.value || null}\"\n                :name=\"${() => (props.name.value ? `${props.name.value}[${i}]` : null)}\"\n                @input=\"${(e: Event) => handleInput(e, i)}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, i)}\"\n                @paste=\"${(e: ClipboardEvent) => (i === 0 ? handlePaste(e) : e.preventDefault())}\"\n                @focus=\"${(e: FocusEvent) => (e.target as HTMLInputElement).select()}\" />\n            `,\n          )}\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), forcedColorsFocusMixin('.cell'), styles],\n  tag: 'bit-otp-input',\n});\n"],"mappings":"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"}
+{"version":3,"file":"otp-input.js","names":[],"sources":["../src/inputs/otp-input/otp-input.ts"],"sourcesContent":["import { define, computed, html, onMount, signal, watch } from '@vielzeug/craftit';\nimport { createListControl, createListKeyControl } from '@vielzeug/craftit/controls';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { colorThemeMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { disablableBundle, sizableBundle, themableBundle, type PropBundle } from '../shared/bundles';\nimport styles from './otp-input.css?inline';\n\nexport type BitOtpInputEvents = {\n  change: { complete: boolean; originalEvent?: Event; value: string };\n  complete: { originalEvent?: Event; value: string };\n};\n\n/** OTP Input props */\nexport type BitOtpInputProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Make inputs disabled */\n  disabled?: boolean;\n  /** Accessible label */\n  label?: string;\n  /** Number of input cells */\n  length?: number;\n  /** Mask input (show dots instead of characters) */\n  masked?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Show a separator in the middle (e.g. \"–\") */\n  separator?: string;\n  /** Component size */\n  size?: ComponentSize;\n  /** Input type: 'numeric' (digits only) or 'alphanumeric' */\n  type?: 'numeric' | 'alphanumeric';\n  /** Current value */\n  value?: string;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost' | 'glass'>;\n};\n\nconst otpInputProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  label: 'One-time password',\n  length: 6,\n  masked: false,\n  name: undefined,\n  separator: undefined,\n  type: 'numeric',\n  value: '',\n  variant: undefined,\n} satisfies PropBundle<BitOtpInputProps>;\n\n/**\n * A segmented OTP (One-Time Password) input with N individual cells.\n * Auto-advances focus on input, auto-backs on Backspace, handles paste.\n *\n * @element bit-otp-input\n *\n * @attr {number} length - Number of cells (default: 6)\n * @attr {string} type - 'numeric' (default) | 'alphanumeric'\n * @attr {string} value - Current code value\n * @attr {boolean} disabled - Disable all cells\n * @attr {boolean} masked - Show as password\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color\n * @attr {string} name - Form field name\n * @attr {string} label - Group aria-label\n * @attr {string} separator - Optional separator character shown in the middle\n *\n * @fires change - Emitted whenever a cell changes. detail: { value: string, complete: boolean, originalEvent?: Event }\n * @fires complete - Emitted when all cells are filled. detail: { value: string, originalEvent?: Event }\n *\n * @cssprop --otp-cell-size - Width and height of each cell\n * @cssprop --otp-cell-gap - Gap between cells\n * @cssprop --otp-cell-font-size - Font size inside cells\n * @cssprop --otp-cell-radius - Border radius of cells\n * @cssprop --otp-cell-border-color - Default border color\n * @cssprop --otp-cell-focus-border - Focused border color\n *\n * @example\n * ```html\n * <bit-otp-input length=\"6\" color=\"primary\"></bit-otp-input>\n * ```\n */\nexport const OTP_INPUT_TAG = define<BitOtpInputProps, BitOtpInputEvents>('bit-otp-input', {\n  props: otpInputProps,\n  setup({ emit, host, props }) {\n    const lengthValue = computed(() => Number(props.length.value) || 6);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const cells = computed(() => Array.from({ length: lengthValue.value }, (_, i) => i));\n    const focusedIndex = signal(0);\n    const otpValue = signal(String(props.value.value || ''));\n    const normalizedPropValue = () => String(props.value.value || '');\n\n    host.bind('attr', {\n      value: () => otpValue.value || null,\n    });\n\n    function getInputs(): HTMLInputElement[] {\n      return [...(host.shadowRoot?.querySelectorAll<HTMLInputElement>('input.cell') ?? [])];\n    }\n\n    const listControl = createListControl({\n      getIndex: () => focusedIndex.value,\n      getItems: () => getInputs(),\n      loop: false,\n      setIndex: (index) => {\n        focusedIndex.value = index;\n\n        const inputs = getInputs();\n\n        inputs[index]?.focus();\n      },\n    });\n\n    const otpListKeys = createListKeyControl({\n      control: listControl,\n      keys: { next: ['ArrowRight'], prev: ['ArrowLeft'] },\n    });\n\n    function getValue(): string {\n      return getInputs()\n        .map((i) => i.value)\n        .join('');\n    }\n    function syncInputsFromValue(raw: string) {\n      const allInputs = getInputs();\n      const normalized = String(raw || '').slice(0, allInputs.length);\n\n      for (const input of allInputs) input.value = '';\n\n      normalized.split('').forEach((c, i) => {\n        if (allInputs[i]) allInputs[i].value = c;\n      });\n\n      otpValue.value = getValue();\n    }\n    function emitOtpState(originalEvent?: Event, forceComplete?: boolean): void {\n      const allInputs = getInputs();\n      const full = getValue();\n      const complete = forceComplete ?? (full.length === allInputs.length && full.split('').every(Boolean));\n\n      otpValue.value = full;\n      emit('change', { complete, originalEvent, value: full });\n\n      if (complete) emit('complete', { originalEvent, value: full });\n    }\n    function isAllowed(char: string): boolean {\n      if (props.type.value === 'numeric') return /^\\d$/.test(char);\n\n      return /^[a-z\\d]$/i.test(char);\n    }\n    function handleInput(e: Event, index: number) {\n      const input = e.target as HTMLInputElement;\n      let val = input.value;\n\n      // Keep only last character if multiple were typed somehow\n      if (val.length > 1) val = val.slice(-1);\n\n      // Validate character\n      if (val && !isAllowed(val)) {\n        input.value = '';\n\n        return;\n      }\n\n      input.value = val;\n\n      const allInputs = getInputs();\n\n      emitOtpState(e);\n\n      // Auto-advance\n      if (val && index < allInputs.length - 1) {\n        allInputs[index + 1].focus();\n        allInputs[index + 1].select();\n      }\n    }\n    function handleKeydown(e: KeyboardEvent, index: number) {\n      const input = e.target as HTMLInputElement;\n      const allInputs = getInputs();\n\n      focusedIndex.value = index;\n\n      if (e.key === 'Backspace') {\n        if (input.value) {\n          input.value = '';\n        } else if (index > 0) {\n          const prevIndex = listControl.prev().index;\n          const prevInput = allInputs[prevIndex];\n\n          if (prevInput) {\n            prevInput.select();\n            prevInput.value = '';\n          }\n        }\n\n        emitOtpState(e, false);\n        e.preventDefault();\n      } else {\n        otpListKeys.handleKeydown(e);\n      }\n    }\n    function handlePaste(e: ClipboardEvent) {\n      e.preventDefault();\n\n      const pasted = e.clipboardData?.getData('text') ?? '';\n      const chars = pasted\n        .split('')\n        .filter((c) => isAllowed(c))\n        .slice(0, lengthValue.value);\n      const allInputs = getInputs();\n\n      chars.forEach((char, i) => {\n        if (allInputs[i]) allInputs[i].value = char;\n      });\n\n      emitOtpState(e);\n\n      // Focus the cell after last pasted char\n      const focusIdx = Math.min(chars.length, allInputs.length - 1);\n\n      allInputs[focusIdx]?.focus();\n    }\n    onMount(() => {\n      // Populate cells from value prop on mount\n      syncInputsFromValue(normalizedPropValue());\n    });\n\n    watch(props.value, (value) => {\n      syncInputsFromValue(String(value || ''));\n    });\n\n    watch(props.length, () => {\n      // Cells re-render when length changes; sync after DOM updates.\n      requestAnimationFrame(() => syncInputsFromValue(normalizedPropValue()));\n    });\n\n    const separatorIdx = computed(() => {\n      const len = Number(props.length.value) || 6;\n\n      return props.separator.value != null ? Math.floor(len / 2) : -1;\n    });\n\n    return html`\n      <div class=\"otp-group\" part=\"group\" role=\"group\" :aria-label=\"${() => props.label.value}\">\n        ${() =>\n          cells.value.map(\n            (i) => html`\n              ${() =>\n                separatorIdx.value > 0 && i === separatorIdx.value\n                  ? html`<span class=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '-'}</span>`\n                  : ''}\n              <input\n                class=\"cell\"\n                part=\"cell\"\n                :type=\"${() => (props.masked.value ? 'password' : 'text')}\"\n                :inputmode=\"${() => (props.type.value === 'numeric' ? 'numeric' : 'text')}\"\n                maxlength=\"1\"\n                :autocomplete=\"${() => (i === 0 ? 'one-time-code' : 'off')}\"\n                :aria-label=\"${() => `Digit ${i + 1} of ${lengthValue.value}`}\"\n                :disabled=\"${() => (isDisabled.value ? true : null)}\"\n                :name=\"${() => (props.name.value ? `${props.name.value}[${i}]` : null)}\"\n                @input=\"${(e: Event) => handleInput(e, i)}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, i)}\"\n                @paste=\"${(e: ClipboardEvent) => (i === 0 ? handlePaste(e) : e.preventDefault())}\"\n                @focus=\"${(e: FocusEvent) => (e.target as HTMLInputElement).select()}\" />\n            `,\n          )}\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), forcedColorsFocusMixin('.cell'), styles],\n});\n"],"mappings":"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"}

package/dist/overlay/dialog/dialog.d.ts

@@ -1,11 +1,13 @@
+import type { OverlayCloseDetail, OverlayOpenDetail } from '@vielzeug/craftit/controls';
 import type { PaddingSize, RoundedSize } from '../../types';
+import '../../content/icon/icon';
 type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 type DialogBackdrop = 'opaque' | 'blur' | 'transparent';
 type DialogElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 /** Dialog component properties */
 export type BitDialogEvents = {
-    close: undefined;
-    open: undefined;
+    close: OverlayCloseDetail;
+    open: OverlayOpenDetail;
 };
 export type BitDialogProps = {
     /** Backdrop style — 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */
@@ -29,7 +31,7 @@ export type BitDialogProps = {
     /** When true, clicking the backdrop does not close the dialog */
     persistent?: boolean;
     /**
-     * When true (default), focus returns to the element that triggered the dialog after it closes.
+     * When true (default), the focus returns to the element that triggered the dialog after it closes.
      * Set to false if you want to manage focus manually.
      */
     'return-focus'?: boolean;
@@ -38,61 +40,6 @@ export type BitDialogProps = {
     /** Dialog size */
     size?: DialogSize;
 };
-/**
- * A modal dialog that traps focus, blocks page interaction, and dismisses on
- * `Escape`. Built on the native `<dialog>` element for correct top-layer stacking
- * and browser-managed accessibility.
- *
- * @element bit-dialog
- *
- * @attr {boolean} open - Open/close the dialog
- * @attr {string} label - Dialog title (also used as aria-label)
- * @attr {string} size - Size: 'sm' | 'md' | 'lg' | 'xl' | 'full'
- * @attr {boolean} dismissible - Show a close (×) button in the header
- * @attr {boolean} persistent - Prevent backdrop-click from closing
- * @attr {string} rounded - Border radius size
- * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'
- * @attr {string} elevation - Panel shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
- * @attr {string} padding - Padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'
- *
- * @fires open - Fired when the dialog opens
- * @fires close - Fired when the dialog closes (any trigger)
- *
- * @slot - Dialog body content
- * @slot header - Custom header content (replaces the default title + close layout)
- * @slot footer - Action buttons or additional content at the bottom
- *
- * @cssprop --dialog-bg - Panel background color
- * @cssprop --dialog-border-color - Panel border color
- * @cssprop --dialog-radius - Panel border radius
- * @cssprop --dialog-shadow - Panel drop shadow
- * @cssprop --dialog-padding - Padding for header, body, and footer sections
- * @cssprop --dialog-gap - Gap between footer action buttons
- * @cssprop --dialog-backdrop - Backdrop overlay color
- * @cssprop --dialog-max-width - Maximum panel width (overridden by size prop)
- *
- * @example
- * ```html
- * <bit-dialog label="Confirm action" dismissible>
- *   <p>Are you sure you want to delete this item?</p>
- *   <div slot="footer">
- *     <bit-button variant="ghost" id="cancel">Cancel</bit-button>
- *     <bit-button color="error" id="confirm">Delete</bit-button>
- *   </div>
- * </bit-dialog>
- *
- * <script type="module">
- *   import '@vielzeug/buildit/dialog';
- *   const dialog = document.querySelector('bit-dialog');
- *   document.querySelector('#open-btn').addEventListener('click', () => {
- *     dialog.setAttribute('open', '');
- *   });
- *   document.querySelector('#cancel').addEventListener('click', () => {
- *     dialog.removeAttribute('open');
- *   });
- * </script>
- * ```
- */
 export declare const DIALOG_TAG: string;
 export {};
 //# sourceMappingURL=dialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/overlay/dialog/dialog.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAS5D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AACrD,KAAK,cAAc,GAAG,QAAQ,GAAG,MAAM,GAAG,aAAa,CAAC;AACxD,KAAK,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAElE,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,qHAAqH;IACrH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,kBAAkB;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,UAAU,QAmJrB,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/overlay/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAsB,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK5G,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE5D,OAAO,yBAAyB,CAAC;AAOjC,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AACrD,KAAK,cAAc,GAAG,QAAQ,GAAG,MAAM,GAAG,aAAa,CAAC;AACxD,KAAK,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAElE,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,IAAI,EAAE,iBAAiB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,qHAAqH;IACrH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,kBAAkB;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAyEF,eAAO,MAAM,UAAU,QAsLrB,CAAC"}

package/dist/overlay/drawer/drawer.d.ts

@@ -1,3 +1,5 @@
+import type { OverlayCloseDetail, OverlayOpenDetail } from '@vielzeug/craftit/controls';
+import '../../content/icon/icon';
 type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
 type DrawerSize = 'sm' | 'lg' | 'full';
 type DrawerBackdrop = 'opaque' | 'blur' | 'transparent';
@@ -10,10 +12,10 @@ export interface DrawerElement extends HTMLElement, Omit<BitDrawerProps, 'title'
 }
 /** Drawer component properties */
 export type BitDrawerEvents = {
-    close: {
+    close: OverlayCloseDetail & {
         placement: DrawerPlacement;
     };
-    open: {
+    open: OverlayOpenDetail & {
         placement: DrawerPlacement;
     };
 };
@@ -21,7 +23,7 @@ export type BitDrawerProps = {
     /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */
     backdrop?: DrawerBackdrop;
     /** Show the close (×) button in the header (default: true) */
-    dismissable?: boolean;
+    dismissible?: boolean;
     /**
      * CSS selector for the element inside the drawer that should receive focus on open.
      * Defaults to native dialog focus management (first focusable element).
@@ -53,46 +55,6 @@ export type BitDrawerProps = {
      */
     title?: string;
 };
-/**
- * A panel that slides in from any edge of the screen, built on the native `<dialog>` element.
- *
- * @element bit-drawer
- *
- * @attr {boolean} open - Controlled open/close state
- * @attr {string} placement - 'left' | 'right' (default) | 'top' | 'bottom'
- * @attr {string} size - 'sm' | 'lg' | 'full'
- * @attr {string} title - Visible header title text
- * @attr {string} label - Invisible aria-label (for drawers without a visible title)
- * @attr {boolean} dismissable - Show the close (×) button (default: true)
- * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'
- * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)
- *
- * @slot header - Drawer header content
- * @slot - Main body content
- * @slot footer - Drawer footer content
- *
- * @fires open - When the drawer opens
- * @fires close - When the drawer closes
- *
- * @cssprop --drawer-backdrop - Backdrop background
- * @cssprop --drawer-bg - Panel background color
- * @cssprop --drawer-size - Panel width (horizontal) or height (vertical)
- * @cssprop --drawer-shadow - Panel box-shadow
- *
- * @example
- * ```html
- * <!-- With visible title -->
- * <bit-drawer open title="Settings" placement="right">
- *   <p>Settings content here.</p>
- * </bit-drawer>
- *
- * <!-- With custom header slot -->
- * <bit-drawer open placement="right">
- *   <span slot="header">Settings</span>
- *   <p>Settings content here.</p>
- * </bit-drawer>
- * ```
- */
 export declare const DRAWER_TAG: string;
 export {};
 //# sourceMappingURL=drawer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/overlay/drawer/drawer.ts"],"names":[],"mappings":"AAOA,KAAK,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC3D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AACvC,KAAK,cAAc,GAAG,QAAQ,GAAG,MAAM,GAAG,aAAa,CAAC;AAExD,sEAAsE;AACtE,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/E,sEAAsE;IACtE,IAAI,IAAI,IAAI,CAAC;IACb,iEAAiE;IACjE,IAAI,IAAI,IAAI,CAAC;CACd;AAED,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE;QAAE,SAAS,EAAE,eAAe,CAAA;KAAE,CAAC;IACtC,IAAI,EAAE;QAAE,SAAS,EAAE,eAAe,CAAA;KAAE,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,UAAU,QA6IrB,CAAC"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/overlay/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAsB,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK5G,OAAO,yBAAyB,CAAC;AAMjC,KAAK,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC3D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AACvC,KAAK,cAAc,GAAG,QAAQ,GAAG,MAAM,GAAG,aAAa,CAAC;AAExD,sEAAsE;AACtE,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/E,sEAAsE;IACtE,IAAI,IAAI,IAAI,CAAC;IACb,iEAAiE;IACjE,IAAI,IAAI,IAAI,CAAC;CACd;AAED,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,kBAAkB,GAAG;QAAE,SAAS,EAAE,eAAe,CAAA;KAAE,CAAC;IAC3D,IAAI,EAAE,iBAAiB,GAAG;QAAE,SAAS,EAAE,eAAe,CAAA;KAAE,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA0DF,eAAO,MAAM,UAAU,QA8LrB,CAAC"}

package/dist/overlay/menu/menu.d.ts

@@ -1,17 +1,13 @@
-import { type OverlayOpenReason, type OverlayCloseReason } from '@vielzeug/craftit/labs';
-import type { AddEventListeners, ComponentSize, ThemeColor } from '../../types';
+import { type OverlayCloseDetail, type OverlayOpenDetail } from '@vielzeug/craftit/controls';
+import type { ComponentSize, ThemeColor } from '../../types';
 export interface MenuSelectDetail {
     value: string;
     checked?: boolean;
 }
 export type BitMenuItemType = 'checkbox' | 'radio';
 export type BitMenuEvents = {
-    close: {
-        reason: OverlayCloseReason;
-    };
-    open: {
-        reason: OverlayOpenReason;
-    };
+    close: OverlayCloseDetail;
+    open: OverlayOpenDetail;
     select: MenuSelectDetail;
 };
 export type BitMenuItemProps = {
@@ -41,5 +37,5 @@ export declare const SEPARATOR_TAG: string;
  * </bit-menu>
  * ```
  */
-export declare const MENU_TAG: AddEventListeners<BitMenuEvents>;
+export declare const MENU_TAG: string;
 //# sourceMappingURL=menu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/overlay/menu/menu.ts"],"names":[],"mappings":"AAaA,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACxB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQhF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,OAAO,CAAC;AAEnD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE;QAAE,MAAM,EAAE,kBAAkB,CAAA;KAAE,CAAC;IACtC,IAAI,EAAE;QAAE,MAAM,EAAE,iBAAiB,CAAA;KAAE,CAAC;IACpC,MAAM,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,cAAc,GAAG,YAAY,GAAG,KAAK,GAAG,WAAW,GAAG,SAAS,CAAC;IACvF,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAkBF,eAAO,MAAM,aAAa,QAoJxB,CAAC;AAMH,eAAO,MAAM,aAAa,QAaxB,CAAC;AAMH;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,EAmOJ,iBAAiB,CAAC,aAAa,CAAC,CAAC"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/overlay/menu/menu.ts"],"names":[],"mappings":"AAaA,OAAO,EAKL,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACvB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAS7D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,OAAO,CAAC;AAEnD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,cAAc,GAAG,YAAY,GAAG,KAAK,GAAG,WAAW,GAAG,SAAS,CAAC;IACvF,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAyBF,eAAO,MAAM,aAAa,QA8IxB,CAAC;AAMH,eAAO,MAAM,aAAa,QAYxB,CAAC;AAgBH;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,QAmPnB,CAAC"}

package/dist/overlay/popover/popover.d.ts

@@ -1,10 +1,11 @@
-import type { Placement } from '@vielzeug/floatit';
+import type { OverlayCloseDetail, OverlayOpenDetail } from '@vielzeug/craftit/controls';
+import { type Placement } from '@vielzeug/floatit';
 export type PopoverTrigger = 'click' | 'hover' | 'focus';
 export type BitPopoverEvents = {
     /** Emitted when the popover closes */
-    close: undefined;
+    close: OverlayCloseDetail;
     /** Emitted when the popover opens */
-    open: undefined;
+    open: OverlayOpenDetail;
 };
 /** Popover component properties */
 export type BitPopoverProps = {
@@ -37,8 +38,8 @@ export type BitPopoverProps = {
  * @slot - The trigger element
  * @slot content - Panel content
  *
- * @fires open - When the panel opens
- * @fires close - When the panel closes
+ * @fires open - When the panel opens with detail: { reason }
+ * @fires close - When the panel closes with detail: { reason }
  *
  * @cssprop --popover-min-width - Min width of the panel
  * @cssprop --popover-max-width - Max width of the panel

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/overlay/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAOnD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAiBzD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,sCAAsC;IACtC,KAAK,EAAE,SAAS,CAAC;IACjB,qCAAqC;IACrC,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,mCAAmC;AACnC,MAAM,MAAM,eAAe,GAAG;IAC5B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kDAAkD;IAClD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,WAAW,QAiNtB,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/overlay/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAIxF,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAOvF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAezD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,sCAAsC;IACtC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,qCAAqC;IACrC,IAAI,EAAE,iBAAiB,CAAC;CACzB,CAAC;AAEF,mCAAmC;AACnC,MAAM,MAAM,eAAe,GAAG;IAC5B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kDAAkD;IAClD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAWF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,WAAW,QAgOtB,CAAC"}

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

@@ -1,2 +1,2 @@
-var e=`.tooltip{inset:unset;padding:var(--size-1-5) var(--size-3);border:var(--_tooltip-border-width,var(--border-0)) solid var(--_tooltip-border-color,transparent);transform-origin:50%;will-change:opacity, transform, filter;margin:0;overflow:visible}@layer buildit.base{:host{display:inline-block;position:relative}.tooltip{--_tooltip-fg:var(--lightningcss-light,var(--color-contrast-100))var(--lightningcss-dark,var(--color-contrast-900));--_tooltip-bg:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 80%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 80%, transparent));--_tooltip-border-width:var(--border);--_tooltip-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-100) 12%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-900) 12%, transparent));--_tooltip-shadow:var(--shadow-md);--_tooltip-closed-transform:translateY(var(--size-1)) 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-snug);color:var(--_tooltip-fg);word-break:auto-phrase;white-space:pre-line;pointer-events:none;background:var(--_tooltip-bg);border-radius:var(--rounded);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-normal) var(--ease-out), display var(--transition-fast) allow-discrete, overlay var(--transition-fast) allow-discrete;position:fixed}.tooltip[data-placement=top]{--_tooltip-closed-transform:translateY(var(--size-2)) scale(.96)}.tooltip[data-placement=bottom]{--_tooltip-closed-transform:translateY(calc(var(--size-2) * -1)) scale(.96)}.tooltip[data-placement=left]{--_tooltip-closed-transform:translateX(var(--size-2)) scale(.96)}.tooltip[data-placement=right]{--_tooltip-closed-transform:translateX(calc(var(--size-2) * -1)) scale(.96)}.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;transform:translate(0)scale(1)}@starting-style{.tooltip:popover-open{opacity:0;transform:var(--_tooltip-closed-transform)}}}@layer buildit.variants{:host([variant=light]) .tooltip{--_tooltip-fg:var(--lightningcss-light,var(--color-contrast-900))var(--lightningcss-dark,var(--color-contrast-100));--_tooltip-bg:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-100) 80%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-900) 80%, transparent));--_tooltip-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 12%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 12%, transparent));--_tooltip-shadow:var(--shadow-md)}}@layer buildit.utilities{:host([size=sm]) .tooltip{font-size:var(--text-xs)}:host([size=lg]) .tooltip{font-size:var(--text-base)}}`;exports.default=e;
+var e=`.tooltip{inset:unset;padding:var(--size-0-5) var(--size-2);border:var(--_tooltip-border-width,var(--border-0)) solid var(--_tooltip-border-color,transparent);transform-origin:50%;will-change:opacity, transform, filter;margin:0;overflow:visible}@layer buildit.base{:host{display:inline-block;position:relative}.tooltip{--_tooltip-fg:var(--lightningcss-light,var(--color-contrast-100))var(--lightningcss-dark,var(--color-contrast-900));--_tooltip-bg:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 80%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 80%, transparent));--_tooltip-border-width:var(--border);--_tooltip-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-100) 12%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-900) 12%, transparent));--_tooltip-shadow:var(--shadow-md);--_tooltip-closed-transform:translateY(var(--size-1)) 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:pre-line;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-normal) var(--ease-out), display var(--transition-fast) allow-discrete, overlay var(--transition-fast) allow-discrete;position:fixed}.tooltip[data-placement=top]{--_tooltip-closed-transform:translateY(var(--size-2)) scale(.96)}.tooltip[data-placement=bottom]{--_tooltip-closed-transform:translateY(calc(var(--size-2) * -1)) scale(.96)}.tooltip[data-placement=left]{--_tooltip-closed-transform:translateX(var(--size-2)) scale(.96)}.tooltip[data-placement=right]{--_tooltip-closed-transform:translateX(calc(var(--size-2) * -1)) scale(.96)}.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;transform:translate(0)scale(1)}@starting-style{.tooltip:popover-open{opacity:0;transform:var(--_tooltip-closed-transform)}}}@layer buildit.variants{:host([variant=light]) .tooltip{--_tooltip-fg:var(--lightningcss-light,var(--color-contrast-900))var(--lightningcss-dark,var(--color-contrast-100));--_tooltip-bg:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-100) 80%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-900) 80%, transparent));--_tooltip-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 12%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 12%, transparent));--_tooltip-shadow:var(--shadow-md)}}@layer buildit.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

@@ -1 +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: var(--size-1-5) var(--size-3);\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  will-change: opacity, transform, filter;\n}\n\n@layer buildit.base {\n  :host {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tooltip {\n    --_tooltip-fg: light-dark(var(--color-contrast-100), var(--color-contrast-900));\n    --_tooltip-bg: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 80%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 80%, transparent)\n    );\n    --_tooltip-border-width: var(--border);\n    --_tooltip-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-100) 12%, transparent),\n      color-mix(in srgb, var(--color-contrast-900) 12%, transparent)\n    );\n    --_tooltip-shadow: var(--shadow-md);\n    --_tooltip-closed-transform: translateY(var(--size-1)) 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-snug);\n    color: var(--_tooltip-fg);\n    word-break: auto-phrase;\n    white-space: pre-line;\n    pointer-events: none;\n    background: var(--_tooltip-bg);\n    border-radius: var(--rounded);\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-normal) var(--ease-out),\n      display var(--transition-fast) allow-discrete,\n      overlay var(--transition-fast) allow-discrete;\n  }\n\n  .tooltip[data-placement='top'] {\n    --_tooltip-closed-transform: translateY(var(--size-2)) scale(0.96);\n  }\n\n  .tooltip[data-placement='bottom'] {\n    --_tooltip-closed-transform: translateY(calc(var(--size-2) * -1)) scale(0.96);\n  }\n\n  .tooltip[data-placement='left'] {\n    --_tooltip-closed-transform: translateX(var(--size-2)) scale(0.96);\n  }\n\n  .tooltip[data-placement='right'] {\n    --_tooltip-closed-transform: translateX(calc(var(--size-2) * -1)) scale(0.96);\n  }\n\n  /* Entry animation via @starting-style */\n  .tooltip:popover-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\n    @starting-style {\n      opacity: 0;\n      transform: var(--_tooltip-closed-transform);\n    }\n  }\n}\n\n@layer buildit.variants {\n  /* Light tooltip */\n  :host([variant='light']) .tooltip {\n    --_tooltip-fg: light-dark(var(--color-contrast-900), var(--color-contrast-100));\n    --_tooltip-bg: light-dark(\n      color-mix(in srgb, var(--color-contrast-100) 80%, transparent),\n      color-mix(in srgb, var(--color-contrast-900) 80%, transparent)\n    );\n    --_tooltip-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 12%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 12%, transparent)\n    );\n    --_tooltip-shadow: var(--shadow-md);\n  }\n}\n\n@layer buildit.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":""}
+{"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: var(--size-0-5) var(--size-2);\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  will-change: opacity, transform, filter;\n}\n\n@layer buildit.base {\n  :host {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tooltip {\n    --_tooltip-fg: light-dark(var(--color-contrast-100), var(--color-contrast-900));\n    --_tooltip-bg: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 80%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 80%, transparent)\n    );\n    --_tooltip-border-width: var(--border);\n    --_tooltip-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-100) 12%, transparent),\n      color-mix(in srgb, var(--color-contrast-900) 12%, transparent)\n    );\n    --_tooltip-shadow: var(--shadow-md);\n    --_tooltip-closed-transform: translateY(var(--size-1)) 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: pre-line;\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-normal) var(--ease-out),\n      display var(--transition-fast) allow-discrete,\n      overlay var(--transition-fast) allow-discrete;\n  }\n\n  .tooltip[data-placement='top'] {\n    --_tooltip-closed-transform: translateY(var(--size-2)) scale(0.96);\n  }\n\n  .tooltip[data-placement='bottom'] {\n    --_tooltip-closed-transform: translateY(calc(var(--size-2) * -1)) scale(0.96);\n  }\n\n  .tooltip[data-placement='left'] {\n    --_tooltip-closed-transform: translateX(var(--size-2)) scale(0.96);\n  }\n\n  .tooltip[data-placement='right'] {\n    --_tooltip-closed-transform: translateX(calc(var(--size-2) * -1)) scale(0.96);\n  }\n\n  /* Entry animation via @starting-style */\n  .tooltip:popover-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\n    @starting-style {\n      opacity: 0;\n      transform: var(--_tooltip-closed-transform);\n    }\n  }\n}\n\n@layer buildit.variants {\n  /* Light tooltip */\n  :host([variant='light']) .tooltip {\n    --_tooltip-fg: light-dark(var(--color-contrast-900), var(--color-contrast-100));\n    --_tooltip-bg: light-dark(\n      color-mix(in srgb, var(--color-contrast-100) 80%, transparent),\n      color-mix(in srgb, var(--color-contrast-900) 80%, transparent)\n    );\n    --_tooltip-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 12%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 12%, transparent)\n    );\n    --_tooltip-shadow: var(--shadow-md);\n  }\n}\n\n@layer buildit.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

@@ -1,5 +1,5 @@
 //#region src/overlay/tooltip/tooltip.css?inline
-var e = ".tooltip{inset:unset;padding:var(--size-1-5) var(--size-3);border:var(--_tooltip-border-width,var(--border-0)) solid var(--_tooltip-border-color,transparent);transform-origin:50%;will-change:opacity, transform, filter;margin:0;overflow:visible}@layer buildit.base{:host{display:inline-block;position:relative}.tooltip{--_tooltip-fg:var(--lightningcss-light,var(--color-contrast-100))var(--lightningcss-dark,var(--color-contrast-900));--_tooltip-bg:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 80%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 80%, transparent));--_tooltip-border-width:var(--border);--_tooltip-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-100) 12%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-900) 12%, transparent));--_tooltip-shadow:var(--shadow-md);--_tooltip-closed-transform:translateY(var(--size-1)) 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-snug);color:var(--_tooltip-fg);word-break:auto-phrase;white-space:pre-line;pointer-events:none;background:var(--_tooltip-bg);border-radius:var(--rounded);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-normal) var(--ease-out), display var(--transition-fast) allow-discrete, overlay var(--transition-fast) allow-discrete;position:fixed}.tooltip[data-placement=top]{--_tooltip-closed-transform:translateY(var(--size-2)) scale(.96)}.tooltip[data-placement=bottom]{--_tooltip-closed-transform:translateY(calc(var(--size-2) * -1)) scale(.96)}.tooltip[data-placement=left]{--_tooltip-closed-transform:translateX(var(--size-2)) scale(.96)}.tooltip[data-placement=right]{--_tooltip-closed-transform:translateX(calc(var(--size-2) * -1)) scale(.96)}.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;transform:translate(0)scale(1)}@starting-style{.tooltip:popover-open{opacity:0;transform:var(--_tooltip-closed-transform)}}}@layer buildit.variants{:host([variant=light]) .tooltip{--_tooltip-fg:var(--lightningcss-light,var(--color-contrast-900))var(--lightningcss-dark,var(--color-contrast-100));--_tooltip-bg:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-100) 80%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-900) 80%, transparent));--_tooltip-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 12%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 12%, transparent));--_tooltip-shadow:var(--shadow-md)}}@layer buildit.utilities{:host([size=sm]) .tooltip{font-size:var(--text-xs)}:host([size=lg]) .tooltip{font-size:var(--text-base)}}";
+var e = ".tooltip{inset:unset;padding:var(--size-0-5) var(--size-2);border:var(--_tooltip-border-width,var(--border-0)) solid var(--_tooltip-border-color,transparent);transform-origin:50%;will-change:opacity, transform, filter;margin:0;overflow:visible}@layer buildit.base{:host{display:inline-block;position:relative}.tooltip{--_tooltip-fg:var(--lightningcss-light,var(--color-contrast-100))var(--lightningcss-dark,var(--color-contrast-900));--_tooltip-bg:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 80%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 80%, transparent));--_tooltip-border-width:var(--border);--_tooltip-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-100) 12%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-900) 12%, transparent));--_tooltip-shadow:var(--shadow-md);--_tooltip-closed-transform:translateY(var(--size-1)) 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:pre-line;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-normal) var(--ease-out), display var(--transition-fast) allow-discrete, overlay var(--transition-fast) allow-discrete;position:fixed}.tooltip[data-placement=top]{--_tooltip-closed-transform:translateY(var(--size-2)) scale(.96)}.tooltip[data-placement=bottom]{--_tooltip-closed-transform:translateY(calc(var(--size-2) * -1)) scale(.96)}.tooltip[data-placement=left]{--_tooltip-closed-transform:translateX(var(--size-2)) scale(.96)}.tooltip[data-placement=right]{--_tooltip-closed-transform:translateX(calc(var(--size-2) * -1)) scale(.96)}.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;transform:translate(0)scale(1)}@starting-style{.tooltip:popover-open{opacity:0;transform:var(--_tooltip-closed-transform)}}}@layer buildit.variants{:host([variant=light]) .tooltip{--_tooltip-fg:var(--lightningcss-light,var(--color-contrast-900))var(--lightningcss-dark,var(--color-contrast-100));--_tooltip-bg:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-100) 80%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-900) 80%, transparent));--_tooltip-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 12%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 12%, transparent));--_tooltip-shadow:var(--shadow-md)}}@layer buildit.utilities{:host([size=sm]) .tooltip{font-size:var(--text-xs)}:host([size=lg]) .tooltip{font-size:var(--text-base)}}";
 //#endregion
 export { e as default };
 

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

@@ -1 +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: var(--size-1-5) var(--size-3);\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  will-change: opacity, transform, filter;\n}\n\n@layer buildit.base {\n  :host {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tooltip {\n    --_tooltip-fg: light-dark(var(--color-contrast-100), var(--color-contrast-900));\n    --_tooltip-bg: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 80%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 80%, transparent)\n    );\n    --_tooltip-border-width: var(--border);\n    --_tooltip-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-100) 12%, transparent),\n      color-mix(in srgb, var(--color-contrast-900) 12%, transparent)\n    );\n    --_tooltip-shadow: var(--shadow-md);\n    --_tooltip-closed-transform: translateY(var(--size-1)) 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-snug);\n    color: var(--_tooltip-fg);\n    word-break: auto-phrase;\n    white-space: pre-line;\n    pointer-events: none;\n    background: var(--_tooltip-bg);\n    border-radius: var(--rounded);\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-normal) var(--ease-out),\n      display var(--transition-fast) allow-discrete,\n      overlay var(--transition-fast) allow-discrete;\n  }\n\n  .tooltip[data-placement='top'] {\n    --_tooltip-closed-transform: translateY(var(--size-2)) scale(0.96);\n  }\n\n  .tooltip[data-placement='bottom'] {\n    --_tooltip-closed-transform: translateY(calc(var(--size-2) * -1)) scale(0.96);\n  }\n\n  .tooltip[data-placement='left'] {\n    --_tooltip-closed-transform: translateX(var(--size-2)) scale(0.96);\n  }\n\n  .tooltip[data-placement='right'] {\n    --_tooltip-closed-transform: translateX(calc(var(--size-2) * -1)) scale(0.96);\n  }\n\n  /* Entry animation via @starting-style */\n  .tooltip:popover-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\n    @starting-style {\n      opacity: 0;\n      transform: var(--_tooltip-closed-transform);\n    }\n  }\n}\n\n@layer buildit.variants {\n  /* Light tooltip */\n  :host([variant='light']) .tooltip {\n    --_tooltip-fg: light-dark(var(--color-contrast-900), var(--color-contrast-100));\n    --_tooltip-bg: light-dark(\n      color-mix(in srgb, var(--color-contrast-100) 80%, transparent),\n      color-mix(in srgb, var(--color-contrast-900) 80%, transparent)\n    );\n    --_tooltip-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 12%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 12%, transparent)\n    );\n    --_tooltip-shadow: var(--shadow-md);\n  }\n}\n\n@layer buildit.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":""}
+{"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: var(--size-0-5) var(--size-2);\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  will-change: opacity, transform, filter;\n}\n\n@layer buildit.base {\n  :host {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tooltip {\n    --_tooltip-fg: light-dark(var(--color-contrast-100), var(--color-contrast-900));\n    --_tooltip-bg: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 80%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 80%, transparent)\n    );\n    --_tooltip-border-width: var(--border);\n    --_tooltip-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-100) 12%, transparent),\n      color-mix(in srgb, var(--color-contrast-900) 12%, transparent)\n    );\n    --_tooltip-shadow: var(--shadow-md);\n    --_tooltip-closed-transform: translateY(var(--size-1)) 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: pre-line;\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-normal) var(--ease-out),\n      display var(--transition-fast) allow-discrete,\n      overlay var(--transition-fast) allow-discrete;\n  }\n\n  .tooltip[data-placement='top'] {\n    --_tooltip-closed-transform: translateY(var(--size-2)) scale(0.96);\n  }\n\n  .tooltip[data-placement='bottom'] {\n    --_tooltip-closed-transform: translateY(calc(var(--size-2) * -1)) scale(0.96);\n  }\n\n  .tooltip[data-placement='left'] {\n    --_tooltip-closed-transform: translateX(var(--size-2)) scale(0.96);\n  }\n\n  .tooltip[data-placement='right'] {\n    --_tooltip-closed-transform: translateX(calc(var(--size-2) * -1)) scale(0.96);\n  }\n\n  /* Entry animation via @starting-style */\n  .tooltip:popover-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\n    @starting-style {\n      opacity: 0;\n      transform: var(--_tooltip-closed-transform);\n    }\n  }\n}\n\n@layer buildit.variants {\n  /* Light tooltip */\n  :host([variant='light']) .tooltip {\n    --_tooltip-fg: light-dark(var(--color-contrast-900), var(--color-contrast-100));\n    --_tooltip-bg: light-dark(\n      color-mix(in srgb, var(--color-contrast-100) 80%, transparent),\n      color-mix(in srgb, var(--color-contrast-900) 80%, transparent)\n    );\n    --_tooltip-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 12%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 12%, transparent)\n    );\n    --_tooltip-shadow: var(--shadow-md);\n  }\n}\n\n@layer buildit.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":""}