@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/popover.js

@@ -1,110 +1,153 @@
-import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import { disablableBundle as e } from "./inputs/shared/bundles.js";
+import { reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
 import "./styles/index.js";
-import t from "./overlay/popover/popover.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, flip as d, offset as f, positionFloat as p, shift as m } from "@vielzeug/floatit";
+import { i as n } from "./packages/craftit/dist/controls/overlay-control.js";
+import "./packages/craftit/dist/controls.js";
+import { syncAria as r } from "./utils/aria.js";
+import i from "./overlay/popover/popover.css?inline.js";
+import { computed as a, createCleanupSignal as o, createId as s, define as c, html as l, onMount as u, signal as d, watch as f } from "@vielzeug/craftit";
+import { flip as p, offset as m, positionFloat as h, shift as g } from "@vielzeug/floatit";
 //#region src/overlay/popover/popover.ts
-var h = 8, g = new Set([
+var _ = 8, v = new Set([
 	"click",
 	"hover",
 	"focus"
 ]);
-function _(e) {
-	let t = String(e).split(",").map((e) => e.trim()).filter((e) => g.has(e));
+function y(e) {
+	let t = String(e).split(",").map((e) => e.trim()).filter((e) => v.has(e));
 	return t.length > 0 ? t : ["click"];
 }
-var v = i({
+var b = c("bit-popover", {
 	props: {
-		disabled: { default: !1 },
-		label: { default: void 0 },
-		offset: { default: h },
-		open: { default: void 0 },
-		placement: { default: "bottom" },
-		trigger: { default: "click" }
+		...e,
+		label: void 0,
+		offset: _,
+		open: void 0,
+		placement: "bottom",
+		trigger: "click"
 	},
-	setup({ emit: e, host: t, props: i }) {
-		let g = c(!1), v = r("popover"), y = null, b = null, x = null, S = n(() => _(i.trigger.value));
-		function C() {
-			!y || !b || p(b, y, {
+	setup({ emit: e, host: t, props: i, slots: c }) {
+		let v = d(!1), b = a(() => !!i.disabled.value), x = a(() => String(b.value)), S = a(() => i.open.value !== void 0), C = (e) => {
+			S.value || e();
+		}, w = s("popover"), T = null, E = null, D = a(() => y(i.trigger.value)), O = n({
+			disabled: b,
+			elements: {
+				boundary: t.el,
+				panel: T,
+				trigger: E
+			},
+			isOpen: v,
+			onClose: (t) => e("close", { reason: t }),
+			onOpen: (t) => e("open", { reason: t }),
+			positioner: {
+				floating: () => T,
+				reference: () => E,
+				update: k
+			},
+			restoreFocus: !1,
+			setOpen: (e) => {
+				if (!S.value) {
+					if (e) {
+						A();
+						return;
+					}
+					j();
+				}
+			}
+		});
+		function k() {
+			if (!T || !E) return;
+			let e = h(E, T, {
 				middleware: [
-					f(i.offset.value ?? h),
-					d(),
-					m({ padding: 8 })
+					m(i.offset.value ?? _),
+					p(),
+					g({ padding: 8 })
 				],
 				placement: i.placement.value
-			}).then((e) => {
-				y && (y.dataset.placement = e);
 			});
+			T && (T.dataset.placement = e);
 		}
-		function w() {
-			g.value = !0, b?.setAttribute("aria-expanded", "true"), y && !y.matches(":popover-open") && y.showPopover(), b && y && (x?.(), x = u(b, y, C)), C();
+		function A() {
+			v.value = !0, T && !T.matches(":popover-open") && T.showPopover(), k();
 		}
-		function T() {
-			x?.(), x = null, b?.setAttribute("aria-expanded", "false"), g.value = !1, y?.matches(":popover-open") && y.hidePopover();
+		function j() {
+			v.value = !1, T?.matches(":popover-open") && T.hidePopover();
 		}
-		function E() {
-			i.open.value === void 0 && (i.disabled.value || g.value || (w(), e("open")));
+		function M(e = "trigger") {
+			C(() => O.open(e));
 		}
-		function D() {
-			i.open.value === void 0 && g.value && (T(), e("close"));
+		function N(e = "trigger") {
+			C(() => O.close(e, !1));
 		}
-		function O() {
-			g.value ? D() : E();
+		function P() {
+			C(() => O.toggle());
 		}
-		function k(e) {
-			e.key === "Escape" && D();
+		function F(e) {
+			e.key === "Escape" && N("escape");
 		}
-		function A(e) {
-			if (!g.value) return;
-			let n = e.composedPath();
-			n.includes(t) || y && n.includes(y) || b && n.includes(b) || D();
+		function I(e) {
+			return e.includes(t.el) || !!(T && e.includes(T)) || !!(E && e.includes(E));
 		}
-		function j(e) {
+		function L(e) {
+			v.value && (I(e.composedPath()) || N("outside-click"));
+		}
+		function R(e) {
 			let t = e.relatedTarget;
-			t && y?.contains(t) || t && b?.contains(t) || D();
+			t && T?.contains(t) || t && E?.contains(t) || N("trigger");
 		}
-		return o(() => {
-			let n = t.shadowRoot?.querySelector("slot:not([name])");
+		return u(() => {
+			let n = t.shadowRoot?.querySelector("slot:not([name])"), a = o();
 			if (!n) return;
-			let r = () => {
-				a();
+			let s = () => {
+				a.clear();
 				let e = n.assignedElements({ flatten: !0 })[0];
-				if (!e) return;
-				b = e, e.setAttribute("aria-controls", v), e.setAttribute("aria-haspopup", "dialog"), e.setAttribute("aria-expanded", String(g.value)), e.setAttribute("aria-disabled", String(!!i.disabled.value));
-				let t = S.value;
-				t.includes("click") && (e.addEventListener("click", O), document.addEventListener("click", A, { capture: !0 })), t.includes("hover") && (e.addEventListener("pointerenter", E), e.addEventListener("pointerleave", D), y?.addEventListener("pointerenter", E), y?.addEventListener("pointerleave", D)), t.includes("focus") && (e.addEventListener("focusin", E), e.addEventListener("focusout", j), y?.addEventListener("focusout", j)), document.addEventListener("keydown", k);
-			}, a = () => {
-				b &&= (b.removeAttribute("aria-controls"), b.removeAttribute("aria-haspopup"), b.removeAttribute("aria-expanded"), b.removeAttribute("aria-disabled"), b.removeEventListener("click", O), b.removeEventListener("pointerenter", E), b.removeEventListener("pointerleave", D), b.removeEventListener("focusin", E), b.removeEventListener("focusout", j), y?.removeEventListener("pointerenter", E), y?.removeEventListener("pointerleave", D), y?.removeEventListener("focusout", j), document.removeEventListener("click", A, { capture: !0 }), document.removeEventListener("keydown", k), null);
+				if (!e) {
+					E = null;
+					return;
+				}
+				E = e;
+				let t = r(e, {
+					controls: () => w,
+					disabled: () => x.value,
+					expanded: () => String(v.value),
+					haspopup: "dialog"
+				}), i = [], o = (e, t, n, r) => {
+					e.addEventListener(t, n, r), i.push(() => e.removeEventListener(t, n, r));
+				}, s = D.value, c = (e) => s.includes(e);
+				c("click") && (o(e, "click", P), o(document, "click", L, { capture: !0 })), c("hover") && (o(e, "pointerenter", () => M("trigger")), o(e, "pointerleave", () => N("trigger")), T && (o(T, "pointerenter", () => M("trigger")), o(T, "pointerleave", () => N("trigger")))), c("focus") && (o(e, "focusin", () => M("trigger")), o(e, "focusout", R), T && o(T, "focusout", R)), o(document, "keydown", F), a.set(() => {
+					t();
+					for (let e of i) e();
+					E = null;
+				});
 			};
-			return s("default", r), l(i.open, (t) => {
-				t != null && (t ? (w(), e("open")) : (T(), e("close")));
-			}), l(i.trigger, r), l(i.disabled, (e) => {
-				b?.setAttribute("aria-disabled", String(!!e)), e && D();
+			return f(c.elements(), s, { immediate: !0 }), f(i.open, (t) => {
+				t != null && (t ? (A(), e("open", { reason: "programmatic" })) : (j(), e("close", { reason: "programmatic" })));
+			}), f(i.trigger, s), f(i.disabled, (e) => {
+				e && N("programmatic");
 			}), () => {
-				a(), x?.(), x = null, y?.matches(":popover-open") && y.hidePopover();
+				a.clear(), T?.matches(":popover-open") && T.hidePopover();
 			};
-		}), a`
+		}), l`
       <slot></slot>
       <div
         class="panel"
         part="panel"
-        id="${v}"
+        id="${w}"
         role="dialog"
         aria-modal="false"
         popover="manual"
         :aria-label="${() => i.label.value ?? null}"
-        :aria-hidden="${() => String(!g.value)}"
+        :aria-hidden="${() => String(!v.value)}"
         ref=${(e) => {
-			y = e;
+			T = e;
 		}}>
         <slot name="content"></slot>
       </div>
     `;
 	},
-	styles: [e, t],
-	tag: "bit-popover"
+	styles: [t, i]
 });
 //#endregion
-export { v as POPOVER_TAG };
+export { b as POPOVER_TAG };
 
 //# sourceMappingURL=popover.js.map

package/dist/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":[],"sources":["../src/overlay/popover/popover.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/floatit';\n\nimport { computed, createId, defineComponent, html, onMount, onSlotChange, signal, watch } from '@vielzeug/craftit';\nimport { autoUpdate, flip, offset, positionFloat, shift } from '@vielzeug/floatit';\n\nimport { reducedMotionMixin } from '../../styles';\n\nexport type PopoverTrigger = 'click' | 'hover' | 'focus';\n\nconst PANEL_OFFSET = 8;\nconst VALID_TRIGGERS = new Set<PopoverTrigger>(['click', 'hover', 'focus']);\n\nfunction normalizeTriggers(value: unknown): PopoverTrigger[] {\n  const parsed = String(value)\n    .split(',')\n    .map((item) => item.trim())\n    .filter((item): item is PopoverTrigger => VALID_TRIGGERS.has(item as PopoverTrigger));\n\n  // Keep behavior predictable for invalid input.\n  return parsed.length > 0 ? parsed : ['click'];\n}\n\nimport styles from './popover.css?inline';\n\nexport type BitPopoverEvents = {\n  /** Emitted when the popover closes */\n  close: undefined;\n  /** Emitted when the popover opens */\n  open: undefined;\n};\n\n/** Popover component properties */\nexport type BitPopoverProps = {\n  /** Disable the popover */\n  disabled?: boolean;\n  /** Accessible label for the panel */\n  label?: string;\n  /** Gap between trigger and panel in px */\n  offset?: number;\n  /** Controlled open state */\n  open?: boolean;\n  /** Preferred placement relative to the trigger */\n  placement?: Placement;\n  /** Which trigger(s) open/close the popover — comma-separated */\n  trigger?: string;\n};\n\n/**\n * A floating informational or interactive panel anchored to a trigger element.\n * Unlike tooltips, popovers support arbitrary interactive content via slots.\n *\n * @element bit-popover\n *\n * @attr {string} placement - Preferred placement (default: 'bottom')\n * @attr {string} trigger - 'click' | 'hover' | 'focus' or comma-separated (default: 'click')\n * @attr {boolean} open - Controlled open state\n * @attr {number} offset - Gap in px between trigger and panel (default: 8)\n * @attr {boolean} disabled - Disables the popover\n * @attr {string} label - aria-label on the panel\n *\n * @slot - The trigger element\n * @slot content - Panel content\n *\n * @fires open - When the panel opens\n * @fires close - When the panel closes\n *\n * @cssprop --popover-min-width - Min width of the panel\n * @cssprop --popover-max-width - Max width of the panel\n * @cssprop --popover-max-height - Max height of the panel\n *\n * @example\n * ```html\n * <bit-popover>\n *   <button>Open</button>\n *   <div slot=\"content\">Panel content here</div>\n * </bit-popover>\n * ```\n */\nexport const POPOVER_TAG = defineComponent<BitPopoverProps, BitPopoverEvents>({\n  props: {\n    disabled: { default: false },\n    label: { default: undefined },\n    offset: { default: PANEL_OFFSET },\n    open: { default: undefined },\n    placement: { default: 'bottom' },\n    trigger: { default: 'click' },\n  },\n  setup({ emit, host, props }) {\n    const visible = signal(false);\n    const panelId = createId('popover');\n    let panelEl: HTMLElement | null = null;\n    let currentTrigger: HTMLElement | null = null;\n    let autoUpdateCleanup: (() => void) | null = null;\n    const triggers = computed<PopoverTrigger[]>(() => normalizeTriggers(props.trigger.value));\n\n    function updatePosition() {\n      if (!panelEl || !currentTrigger) return;\n\n      positionFloat(currentTrigger, panelEl, {\n        middleware: [offset(props.offset.value ?? PANEL_OFFSET), flip(), shift({ padding: 8 })],\n        placement: props.placement.value,\n      }).then((resolvedPlacement) => {\n        if (panelEl) panelEl.dataset.placement = resolvedPlacement;\n      });\n    }\n    /** Show the panel and start auto-updating its position. */\n    function showFloat() {\n      visible.value = true;\n      currentTrigger?.setAttribute('aria-expanded', 'true');\n\n      if (panelEl && !panelEl.matches(':popover-open')) panelEl.showPopover();\n\n      if (currentTrigger && panelEl) {\n        autoUpdateCleanup?.();\n        autoUpdateCleanup = autoUpdate(currentTrigger, panelEl, updatePosition);\n      }\n\n      updatePosition();\n    }\n    /** Hide the panel and stop auto-updating its position. */\n    function hideFloat() {\n      autoUpdateCleanup?.();\n      autoUpdateCleanup = null;\n      currentTrigger?.setAttribute('aria-expanded', 'false');\n      visible.value = false;\n\n      if (panelEl?.matches(':popover-open')) panelEl.hidePopover();\n    }\n    function open() {\n      if (props.open.value !== undefined) return;\n\n      if (props.disabled.value) return;\n\n      if (visible.value) return;\n\n      showFloat();\n      emit('open');\n    }\n    function close() {\n      if (props.open.value !== undefined) return;\n\n      if (!visible.value) return;\n\n      hideFloat();\n      emit('close');\n    }\n    function toggle() {\n      if (visible.value) close();\n      else open();\n    }\n    function handleKeydown(e: KeyboardEvent) {\n      if (e.key === 'Escape') close();\n    }\n    function handleClickOutside(e: MouseEvent) {\n      if (!visible.value) return;\n\n      const path = e.composedPath();\n\n      if (path.includes(host)) return;\n\n      if (panelEl && path.includes(panelEl)) return;\n\n      if (currentTrigger && path.includes(currentTrigger)) return;\n\n      close();\n    }\n    // Don't close when focus moves from the trigger into the panel content.\n    function handleFocusOut(e: FocusEvent) {\n      const next = e.relatedTarget as Element | null;\n\n      if (next && panelEl?.contains(next)) return;\n\n      if (next && currentTrigger?.contains(next)) return;\n\n      close();\n    }\n    onMount(() => {\n      const triggerSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n      if (!triggerSlot) return;\n\n      const bindEvents = () => {\n        unbindEvents();\n\n        const el = triggerSlot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!el) return;\n\n        currentTrigger = el;\n        el.setAttribute('aria-controls', panelId);\n        el.setAttribute('aria-haspopup', 'dialog');\n        el.setAttribute('aria-expanded', String(visible.value));\n        el.setAttribute('aria-disabled', String(Boolean(props.disabled.value)));\n\n        const t = triggers.value;\n\n        if (t.includes('click')) {\n          el.addEventListener('click', toggle);\n          document.addEventListener('click', handleClickOutside, { capture: true });\n        }\n\n        if (t.includes('hover')) {\n          el.addEventListener('pointerenter', open);\n          el.addEventListener('pointerleave', close);\n          panelEl?.addEventListener('pointerenter', open);\n          panelEl?.addEventListener('pointerleave', close);\n        }\n\n        if (t.includes('focus')) {\n          el.addEventListener('focusin', open);\n          el.addEventListener('focusout', handleFocusOut);\n          panelEl?.addEventListener('focusout', handleFocusOut);\n        }\n\n        document.addEventListener('keydown', handleKeydown);\n      };\n      const unbindEvents = () => {\n        if (!currentTrigger) return;\n\n        currentTrigger.removeAttribute('aria-controls');\n        currentTrigger.removeAttribute('aria-haspopup');\n        currentTrigger.removeAttribute('aria-expanded');\n        currentTrigger.removeAttribute('aria-disabled');\n        currentTrigger.removeEventListener('click', toggle);\n        currentTrigger.removeEventListener('pointerenter', open);\n        currentTrigger.removeEventListener('pointerleave', close);\n        currentTrigger.removeEventListener('focusin', open);\n        currentTrigger.removeEventListener('focusout', handleFocusOut);\n        panelEl?.removeEventListener('pointerenter', open);\n        panelEl?.removeEventListener('pointerleave', close);\n        panelEl?.removeEventListener('focusout', handleFocusOut);\n        document.removeEventListener('click', handleClickOutside, { capture: true });\n        document.removeEventListener('keydown', handleKeydown);\n        currentTrigger = null;\n      };\n\n      onSlotChange('default', bindEvents);\n      // Controlled mode\n      watch(props.open, (openVal) => {\n        if (openVal === undefined || openVal === null) return;\n\n        if (openVal) {\n          showFloat();\n          emit('open');\n        } else {\n          hideFloat();\n          emit('close');\n        }\n      });\n      watch(props.trigger, bindEvents);\n      watch(props.disabled, (isDisabled) => {\n        currentTrigger?.setAttribute('aria-disabled', String(Boolean(isDisabled)));\n\n        if (isDisabled) {\n          close();\n        }\n      });\n\n      return () => {\n        unbindEvents();\n        autoUpdateCleanup?.();\n        autoUpdateCleanup = null;\n\n        if (panelEl?.matches(':popover-open')) panelEl.hidePopover();\n      };\n    });\n\n    return html`\n      <slot></slot>\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        id=\"${panelId}\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        popover=\"manual\"\n        :aria-label=\"${() => props.label.value ?? null}\"\n        :aria-hidden=\"${() => String(!visible.value)}\"\n        ref=${(el: HTMLElement) => {\n          panelEl = el;\n        }}>\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n  tag: 'bit-popover',\n});\n"],"mappings":"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"}
+{"version":3,"file":"popover.js","names":[],"sources":["../src/overlay/popover/popover.ts"],"sourcesContent":["import type { OverlayCloseDetail, OverlayOpenDetail } from '@vielzeug/craftit/controls';\n\nimport { define, computed, createCleanupSignal, createId, html, onMount, signal, watch } from '@vielzeug/craftit';\nimport { createOverlayControl } from '@vielzeug/craftit/controls';\nimport { flip, offset, positionFloat, shift, type Placement } from '@vielzeug/floatit';\n\nimport { disablableBundle, type PropBundle } from '../../inputs/shared/bundles';\nimport { reducedMotionMixin } from '../../styles';\nimport { syncAria } from '../../utils/aria';\nimport styles from './popover.css?inline';\n\nexport type PopoverTrigger = 'click' | 'hover' | 'focus';\n\nconst PANEL_OFFSET = 8;\nconst VALID_TRIGGERS = new Set<PopoverTrigger>(['click', 'hover', 'focus']);\n\nfunction normalizeTriggers(value: unknown): PopoverTrigger[] {\n  const parsed = String(value)\n    .split(',')\n    .map((item) => item.trim())\n    .filter((item): item is PopoverTrigger => VALID_TRIGGERS.has(item as PopoverTrigger));\n\n  // Keep behavior predictable for invalid input.\n  return parsed.length > 0 ? parsed : ['click'];\n}\n\nexport type BitPopoverEvents = {\n  /** Emitted when the popover closes */\n  close: OverlayCloseDetail;\n  /** Emitted when the popover opens */\n  open: OverlayOpenDetail;\n};\n\n/** Popover component properties */\nexport type BitPopoverProps = {\n  /** Disable the popover */\n  disabled?: boolean;\n  /** Accessible label for the panel */\n  label?: string;\n  /** Gap between trigger and panel in px */\n  offset?: number;\n  /** Controlled open state */\n  open?: boolean;\n  /** Preferred placement relative to the trigger */\n  placement?: Placement;\n  /** Which trigger(s) open/close the popover — comma-separated */\n  trigger?: string;\n};\n\nconst popoverProps: PropBundle<BitPopoverProps> = {\n  ...disablableBundle,\n  label: undefined,\n  offset: PANEL_OFFSET,\n  open: undefined,\n  placement: 'bottom',\n  trigger: 'click',\n};\n\n/**\n * A floating informational or interactive panel anchored to a trigger element.\n * Unlike tooltips, popovers support arbitrary interactive content via slots.\n *\n * @element bit-popover\n *\n * @attr {string} placement - Preferred placement (default: 'bottom')\n * @attr {string} trigger - 'click' | 'hover' | 'focus' or comma-separated (default: 'click')\n * @attr {boolean} open - Controlled open state\n * @attr {number} offset - Gap in px between trigger and panel (default: 8)\n * @attr {boolean} disabled - Disables the popover\n * @attr {string} label - aria-label on the panel\n *\n * @slot - The trigger element\n * @slot content - Panel content\n *\n * @fires open - When the panel opens with detail: { reason }\n * @fires close - When the panel closes with detail: { reason }\n *\n * @cssprop --popover-min-width - Min width of the panel\n * @cssprop --popover-max-width - Max width of the panel\n * @cssprop --popover-max-height - Max height of the panel\n *\n * @example\n * ```html\n * <bit-popover>\n *   <button>Open</button>\n *   <div slot=\"content\">Panel content here</div>\n * </bit-popover>\n * ```\n */\nexport const POPOVER_TAG = define<BitPopoverProps, BitPopoverEvents>('bit-popover', {\n  props: popoverProps,\n  setup({ emit, host, props, slots }) {\n    const visible = signal(false);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const ariaDisabled = computed(() => String(isDisabled.value));\n    const isControlled = computed(() => props.open.value !== undefined);\n    const runIfUncontrolled = (action: () => void) => {\n      if (isControlled.value) return;\n\n      action();\n    };\n    const panelId = createId('popover');\n    let panelEl: HTMLElement | null = null;\n    let currentTrigger: HTMLElement | null = null;\n    const triggers = computed<PopoverTrigger[]>(() => normalizeTriggers(props.trigger.value));\n    const overlay = createOverlayControl({\n      disabled: isDisabled,\n      elements: {\n        boundary: host.el,\n        panel: panelEl,\n        trigger: currentTrigger,\n      },\n      isOpen: visible,\n      onClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { reason }),\n      positioner: {\n        floating: () => panelEl,\n        reference: () => currentTrigger,\n        update: updatePosition,\n      },\n      restoreFocus: false,\n      setOpen: (next) => {\n        if (isControlled.value) return;\n\n        if (next) {\n          showFloat();\n\n          return;\n        }\n\n        hideFloat();\n      },\n    });\n\n    function updatePosition() {\n      if (!panelEl || !currentTrigger) return;\n\n      const resolvedPlacement = positionFloat(currentTrigger, panelEl, {\n        middleware: [offset(props.offset.value ?? PANEL_OFFSET), flip(), shift({ padding: 8 })],\n        placement: props.placement.value,\n      });\n\n      if (panelEl) panelEl.dataset.placement = resolvedPlacement;\n    }\n    /** Show the panel and start auto-updating its position. */\n    function showFloat() {\n      visible.value = true;\n\n      if (panelEl && !panelEl.matches(':popover-open')) panelEl.showPopover();\n\n      updatePosition();\n    }\n    /** Hide the panel and stop auto-updating its position. */\n    function hideFloat() {\n      visible.value = false;\n\n      if (panelEl?.matches(':popover-open')) panelEl.hidePopover();\n    }\n    function open(reason: OverlayOpenDetail['reason'] = 'trigger') {\n      runIfUncontrolled(() => overlay.open(reason));\n    }\n    function close(reason: OverlayCloseDetail['reason'] = 'trigger') {\n      runIfUncontrolled(() => overlay.close(reason, false));\n    }\n    function toggle() {\n      runIfUncontrolled(() => overlay.toggle());\n    }\n    function handleKeydown(e: KeyboardEvent) {\n      if (e.key === 'Escape') close('escape');\n    }\n    function isPathInside(path: EventTarget[]): boolean {\n      return (\n        path.includes(host.el) ||\n        !!(panelEl && path.includes(panelEl)) ||\n        !!(currentTrigger && path.includes(currentTrigger))\n      );\n    }\n    function handleClickOutside(e: MouseEvent) {\n      if (!visible.value) return;\n\n      const path = e.composedPath();\n\n      if (isPathInside(path)) return;\n\n      close('outside-click');\n    }\n    // Don't close when focus moves from the trigger into the panel content.\n    function handleFocusOut(e: FocusEvent) {\n      const next = e.relatedTarget as Element | null;\n\n      if (next && panelEl?.contains(next)) return;\n\n      if (next && currentTrigger?.contains(next)) return;\n\n      close('trigger');\n    }\n    onMount(() => {\n      const triggerSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n      const triggerBinding = createCleanupSignal();\n\n      if (!triggerSlot) return;\n\n      const bindEvents = () => {\n        triggerBinding.clear();\n\n        const el = triggerSlot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!el) {\n          currentTrigger = null;\n\n          return;\n        }\n\n        currentTrigger = el;\n\n        const removeAria = syncAria(el, {\n          controls: () => panelId,\n          disabled: () => ariaDisabled.value,\n          expanded: () => String(visible.value),\n          haspopup: 'dialog',\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        const hasTrigger = (trigger: PopoverTrigger) => t.includes(trigger);\n\n        if (hasTrigger('click')) {\n          add(el, 'click', toggle as EventListener);\n          add(document, 'click', handleClickOutside as EventListener, { capture: true });\n        }\n\n        if (hasTrigger('hover')) {\n          add(el, 'pointerenter', () => open('trigger'));\n          add(el, 'pointerleave', () => close('trigger'));\n\n          if (panelEl) {\n            add(panelEl, 'pointerenter', () => open('trigger'));\n            add(panelEl, 'pointerleave', () => close('trigger'));\n          }\n        }\n\n        if (hasTrigger('focus')) {\n          add(el, 'focusin', () => open('trigger'));\n          add(el, 'focusout', handleFocusOut as EventListener);\n\n          if (panelEl) add(panelEl, 'focusout', handleFocusOut as EventListener);\n        }\n\n        add(document, 'keydown', handleKeydown as EventListener);\n\n        triggerBinding.set(() => {\n          removeAria();\n\n          for (const cleanup of cleanups) cleanup();\n\n          currentTrigger = null;\n        });\n      };\n\n      watch(slots.elements(), bindEvents, { immediate: true });\n      // Controlled mode\n      watch(props.open, (openVal) => {\n        if (openVal === undefined || openVal === null) return;\n\n        if (openVal) {\n          showFloat();\n          emit('open', { reason: 'programmatic' });\n        } else {\n          hideFloat();\n          emit('close', { reason: 'programmatic' });\n        }\n      });\n      watch(props.trigger, bindEvents);\n      watch(props.disabled, (isDisabled) => {\n        if (isDisabled) close('programmatic');\n      });\n\n      return () => {\n        triggerBinding.clear();\n\n        if (panelEl?.matches(':popover-open')) panelEl.hidePopover();\n      };\n    });\n\n    return html`\n      <slot></slot>\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        id=\"${panelId}\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        popover=\"manual\"\n        :aria-label=\"${() => props.label.value ?? null}\"\n        :aria-hidden=\"${() => String(!visible.value)}\"\n        ref=${(el: HTMLElement) => {\n          panelEl = el;\n        }}>\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":"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"}

package/dist/progress.cjs

@@ -1,5 +1,5 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`),t=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const n=require(`./feedback/progress/progress.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i=(0,r.defineComponent)({props:{color:{default:void 0},"floating-label":{default:void 0},indeterminate:{default:!1},label:{default:void 0},max:{default:100},size:{default:void 0},title:{default:void 0},type:{default:`linear`},value:{default:0},"value-text":{default:void 0}},setup({host:e,props:t}){let n=2*Math.PI*45,i=(0,r.computed)(()=>`${Math.max(0,Math.min(Number(t.value.value),Number(t.max.value)))/Math.max(1,Number(t.max.value))*100}%`),a=(0,r.computed)(()=>n-Math.max(0,Math.min(Number(t.value.value),Number(t.max.value)))/Math.max(1,Number(t.max.value))*n),o=(0,r.computed)(()=>t.type.value===`circular`);return(0,r.watch)([t.value,t.max,t.indeterminate],()=>{e.style.setProperty(`--_percent`,t.indeterminate.value?`0%`:i.value)},{immediate:!0}),r.html`
-      ${()=>o.value?r.html` <div
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/accessibility.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const r=require(`./feedback/progress/progress.css?inline.cjs`);let i=require(`@vielzeug/craftit`);var a=(0,i.define)(`bit-progress`,{props:{...e.themableBundle,...e.sizableBundle,"floating-label":void 0,indeterminate:!1,label:void 0,max:100,title:void 0,type:`linear`,value:0,"value-text":void 0},setup({host:e,props:t}){let n=2*Math.PI*45,r=(0,i.computed)(()=>`${Math.max(0,Math.min(Number(t.value.value),Number(t.max.value)))/Math.max(1,Number(t.max.value))*100}%`),a=(0,i.computed)(()=>n-Math.max(0,Math.min(Number(t.value.value),Number(t.max.value)))/Math.max(1,Number(t.max.value))*n),o=(0,i.computed)(()=>t.type.value===`circular`);return(0,i.effect)(()=>{t.value.value,t.max.value,t.indeterminate.value,e.el.style.setProperty(`--_percent`,t.indeterminate.value?`0%`:r.value)}),i.html`
+      ${()=>o.value?i.html` <div
               class="circular-track"
               role="progressbar"
               :aria-valuenow="${()=>t.indeterminate.value?null:String(t.value.value)}"
@@ -22,7 +22,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                 <span class="circular-label">${()=>t.label.value}</span>
                 <span class="circular-title">${()=>t.title.value}</span>
               </div>
-            </div>`:r.html` <div class="wrapper">
+            </div>`:i.html` <div class="wrapper">
               <div class="header">
                 <span class="progress-title">${()=>t.title.value}</span>
                 <span class="end-label header-label">${()=>t.label.value}</span>
@@ -40,12 +40,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                     <div
                       class="fill"
                       part="fill"
-                      :style="${()=>t.indeterminate.value?null:`width:${i.value}`}"></div>
+                      :style="${()=>t.indeterminate.value?null:`width:${r.value}`}"></div>
                   </div>
                   <span class="floating-label">${()=>t[`floating-label`].value}</span>
                 </div>
                 <span class="end-label row-label">${()=>t.label.value}</span>
               </div>
             </div>`}
-    `},styles:[t.colorThemeMixin,t.forcedColorsMixin,e.reducedMotionMixin,n.default],tag:`bit-progress`});exports.PROGRESS_TAG=i;
+    `},styles:[n.colorThemeMixin,n.forcedColorsMixin,t.reducedMotionMixin,r.default]});exports.PROGRESS_TAG=a;
 //# sourceMappingURL=progress.cjs.map

package/dist/progress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"progress.cjs","names":[],"sources":["../src/feedback/progress/progress.ts"],"sourcesContent":["import { computed, defineComponent, html, watch } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { colorThemeMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './progress.css?inline';\n\n/** Progress bar component properties */\nexport type BitProgressProps = {\n  /** Theme color for the fill bar */\n  color?: ThemeColor;\n  /** Floating chip centered above the fill endpoint (linear only). Hidden in indeterminate mode. Position formula: left = fill% − half chip width (CSS: left:X%; transform:translateX(−50%)). */\n  'floating-label'?: string;\n  /** When true, shows an infinite animation — use when progress is unknown. */\n  indeterminate?: boolean;\n  /** Accessible name AND visible text label.\n   * - Linear without `title`: rendered at the end of the bar.\n   * - Linear with `title`: moved into the header row above the bar.\n   * - Circular: large text centered inside the ring. */\n  label?: string;\n  /** Maximum value. Defaults to 100. */\n  max?: number;\n  /** Size variant controlling bar height */\n  size?: ComponentSize;\n  /** Title text.\n   * - Linear: displayed as a header above the bar; moves `label` into the header row.\n   * - Circular: smaller text displayed below the `label` inside the ring. */\n  title?: string;\n  /** 'linear' (default) or 'circular' */\n  type?: 'linear' | 'circular';\n  /** Current progress value (0 to `max`). Ignored when `indeterminate`. */\n  value?: number;\n  /** Human-readable value text for screen readers (e.g. \"Step 2 of 5\", \"75%\"). Overrides the raw aria-valuenow when set. */\n  'value-text'?: string;\n};\n\n/**\n * A linear progress bar for conveying operation progress.\n * Supports determinate (known value) and indeterminate (unknown duration) modes.\n *\n * @element bit-progress\n *\n * @attr {number} value   - Current value (0–max). Defaults to 0.\n * @attr {number} max     - Maximum value. Defaults to 100.\n * @attr {boolean} indeterminate - Show infinite animation (ignores value/max).\n * @attr {string} color   - Theme color: 'primary' | 'success' | 'warning' | 'error' | …\n * @attr {string} size    - Bar height: 'sm' | 'md' | 'lg'\n * @attr {string} label          - Visible text label + accessible name. Linear: at bar end (or header row with title). Circular: large text centered inside the ring.\n * @attr {string} title          - Title text. Linear: header above the bar (moves label to header row). Circular: smaller text below the label inside the ring.\n * @attr {string} floating-label - Floating chip centered above the fill endpoint (linear only); hidden when indeterminate.\n *\n * @cssprop --progress-height               - Bar height override\n * @cssprop --progress-track-bg             - Track background color\n * @cssprop --progress-fill                 - Fill bar color\n * @cssprop --progress-radius               - Border radius\n * @cssprop --progress-label-gap            - Gap between header/bar row and between bar and trailing label (default 0.25 rem)\n * @cssprop --progress-title-color          - Title text color (defaults to currentColor)\n * @cssprop --progress-label-color          - Label text color (defaults to currentColor)\n * @cssprop --progress-circle-size          - Circular indicator diameter (default 6rem)\n * @cssprop --progress-circular-label-size  - Font size of the label inside the ring (default --text-xl)\n * @cssprop --progress-circular-title-size  - Font size of the title inside the ring (default --text-xs)\n *\n * @example\n * ```html\n * <bit-progress value=\"45\"></bit-progress>\n * <bit-progress value=\"75\" max=\"100\" color=\"success\" size=\"lg\"></bit-progress>\n * <bit-progress indeterminate color=\"primary\" label=\"Loading…\"></bit-progress>\n * ```\n */\nexport const PROGRESS_TAG = defineComponent<BitProgressProps>({\n  props: {\n    color: { default: undefined },\n    'floating-label': { default: undefined },\n    indeterminate: { default: false },\n    label: { default: undefined },\n    max: { default: 100 },\n    size: { default: undefined },\n    title: { default: undefined },\n    type: { default: 'linear' },\n    value: { default: 0 },\n    'value-text': { default: undefined },\n  },\n  setup({ host, props }) {\n    // The SVG circle circumference for a radius of 45 (viewBox 0 0 100 100)\n    const RADIUS = 45;\n    const CIRC = 2 * Math.PI * RADIUS; // ~282.7\n    const percent = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return `${(v / m) * 100}%`;\n    });\n    const dashoffset = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return CIRC - (v / m) * CIRC;\n    });\n    const isCircular = computed(() => props.type.value === 'circular');\n\n    // Use watch([...], fn, { immediate: true }) at setup-level so it fires during\n    // connectedCallback (when attributes are already synced) rather than deferring\n    // to onMount. The immediate flag triggers the first run synchronously.\n    watch(\n      [props.value, props.max, props.indeterminate],\n      () => {\n        host.style.setProperty('--_percent', props.indeterminate.value ? '0%' : percent.value);\n      },\n      { immediate: true },\n    );\n\n    return html`\n      ${() =>\n        isCircular.value\n          ? html` <div\n              class=\"circular-track\"\n              role=\"progressbar\"\n              :aria-valuenow=\"${() => (props.indeterminate.value ? null : String(props.value.value))}\"\n              aria-valuemin=\"0\"\n              :aria-valuemax=\"${() => String(props.max.value)}\"\n              :aria-label=\"${() => props.label.value ?? props.title.value ?? 'Progress'}\"\n              :aria-valuetext=\"${() => props['value-text'].value ?? null}\"\n              :style=\"${() => `--_circ:${CIRC}px`}\">\n              <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n                <circle class=\"circle-bg\" cx=\"50\" cy=\"50\" r=\"${RADIUS}\"></circle>\n                <circle\n                  class=\"circle-fill\"\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"${RADIUS}\"\n                  :stroke-dasharray=\"${() => (props.indeterminate.value ? undefined : `${CIRC}px`)}\"\n                  :stroke-dashoffset=\"${() =>\n                    props.indeterminate.value ? undefined : `${dashoffset.value}px`}\"></circle>\n              </svg>\n              <div class=\"circular-inner\">\n                <span class=\"circular-label\">${() => props.label.value}</span>\n                <span class=\"circular-title\">${() => props.title.value}</span>\n              </div>\n            </div>`\n          : html` <div class=\"wrapper\">\n              <div class=\"header\">\n                <span class=\"progress-title\">${() => props.title.value}</span>\n                <span class=\"end-label header-label\">${() => props.label.value}</span>\n              </div>\n              <div class=\"bar-row\">\n                <div class=\"track-outer\">\n                  <div\n                    class=\"track\"\n                    role=\"progressbar\"\n                    :aria-valuenow=\"${() => (props.indeterminate.value ? null : String(props.value.value))}\"\n                    aria-valuemin=\"0\"\n                    :aria-valuemax=\"${() => String(props.max.value)}\"\n                    :aria-label=\"${() => props.label.value ?? props.title.value ?? 'Progress'}\"\n                    :aria-valuetext=\"${() => props['value-text'].value ?? null}\">\n                    <div\n                      class=\"fill\"\n                      part=\"fill\"\n                      :style=\"${() => (!props.indeterminate.value ? `width:${percent.value}` : null)}\"></div>\n                  </div>\n                  <span class=\"floating-label\">${() => props['floating-label'].value}</span>\n                </div>\n                <span class=\"end-label row-label\">${() => props.label.value}</span>\n              </div>\n            </div>`}\n    `;\n  },\n  styles: [colorThemeMixin, forcedColorsMixin, reducedMotionMixin, componentStyles],\n  tag: 'bit-progress',\n});\n"],"mappings":"uSAqEA,IAAa,GAAA,EAAA,EAAA,iBAAiD,CAC5D,MAAO,CACL,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,iBAAkB,CAAE,QAAS,IAAA,GAAW,CACxC,cAAe,CAAE,QAAS,GAAO,CACjC,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,IAAK,CAAE,QAAS,IAAK,CACrB,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,KAAM,CAAE,QAAS,SAAU,CAC3B,MAAO,CAAE,QAAS,EAAG,CACrB,aAAc,CAAE,QAAS,IAAA,GAAW,CACrC,CACD,MAAM,CAAE,OAAM,SAAS,CAErB,IACM,EAAO,EAAI,KAAK,GAAK,GACrB,GAAA,EAAA,EAAA,cAIG,GAHG,KAAK,IAAI,EAAG,KAAK,IAAI,OAAO,EAAM,MAAM,MAAM,CAAE,OAAO,EAAM,IAAI,MAAM,CAAC,CAAC,CACzE,KAAK,IAAI,EAAG,OAAO,EAAM,IAAI,MAAM,CAAC,CAE1B,IAAI,GACxB,CACI,GAAA,EAAA,EAAA,cAIG,EAHG,KAAK,IAAI,EAAG,KAAK,IAAI,OAAO,EAAM,MAAM,MAAM,CAAE,OAAO,EAAM,IAAI,MAAM,CAAC,CAAC,CACzE,KAAK,IAAI,EAAG,OAAO,EAAM,IAAI,MAAM,CAAC,CAEtB,EACxB,CACI,GAAA,EAAA,EAAA,cAA4B,EAAM,KAAK,QAAU,WAAW,CAalE,OARA,EAAA,EAAA,OACE,CAAC,EAAM,MAAO,EAAM,IAAK,EAAM,cAAc,KACvC,CACJ,EAAK,MAAM,YAAY,aAAc,EAAM,cAAc,MAAQ,KAAO,EAAQ,MAAM,EAExF,CAAE,UAAW,GAAM,CACpB,CAEM,EAAA,IAAI;YAEP,EAAW,MACP,EAAA,IAAI;;;oCAGuB,EAAM,cAAc,MAAQ,KAAO,OAAO,EAAM,MAAM,MAAM,CAAE;;oCAE/D,OAAO,EAAM,IAAI,MAAM,CAAC;iCAC3B,EAAM,MAAM,OAAS,EAAM,MAAM,OAAS,WAAW;qCACjD,EAAM,cAAc,OAAS,KAAK;4BAC3C,WAAW,EAAK,IAAI;;+DAEa,GAAO;;;;;uBAK/C,GAAO;2CACgB,EAAM,cAAc,MAAQ,IAAA,GAAY,GAAG,EAAK,IAAK;4CAE/E,EAAM,cAAc,MAAQ,IAAA,GAAY,GAAG,EAAW,MAAM,IAAI;;;mDAG/B,EAAM,MAAM,MAAM;mDAClB,EAAM,MAAM,MAAM;;oBAG3D,EAAA,IAAI;;mDAEqC,EAAM,MAAM,MAAM;2DACV,EAAM,MAAM,MAAM;;;;;;;0CAOlC,EAAM,cAAc,MAAQ,KAAO,OAAO,EAAM,MAAM,MAAM,CAAE;;0CAE/D,OAAO,EAAM,IAAI,MAAM,CAAC;uCAC3B,EAAM,MAAM,OAAS,EAAM,MAAM,OAAS,WAAW;2CACjD,EAAM,cAAc,OAAS,KAAK;;;;oCAIvC,EAAM,cAAc,MAAmC,KAA3B,SAAS,EAAQ,QAAgB;;qDAE9C,EAAM,kBAAkB,MAAM;;wDAE3B,EAAM,MAAM,MAAM;;oBAExD;OAGlB,OAAQ,CAAC,EAAA,gBAAiB,EAAA,kBAAmB,EAAA,mBAAoB,EAAA,QAAgB,CACjF,IAAK,eACN,CAAC"}
+{"version":3,"file":"progress.cjs","names":[],"sources":["../src/feedback/progress/progress.ts"],"sourcesContent":["import { define, computed, effect, html } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { type PropBundle, sizableBundle, themableBundle } from '../../inputs/shared/bundles';\nimport { colorThemeMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './progress.css?inline';\n\n/** Progress bar component properties */\nexport type BitProgressProps = {\n  /** Theme color for the fill bar */\n  color?: ThemeColor;\n  /** Floating chip centered above the fill endpoint (linear only). Hidden in indeterminate mode. Position formula: left = fill% − half chip width (CSS: left:X%; transform:translateX(−50%)). */\n  'floating-label'?: string;\n  /** When true, shows an infinite animation — use when progress is unknown. */\n  indeterminate?: boolean;\n  /** Accessible name AND visible text label.\n   * - Linear without `title`: rendered at the end of the bar.\n   * - Linear with `title`: moved into the header row above the bar.\n   * - Circular: large text centered inside the ring. */\n  label?: string;\n  /** Maximum value. Defaults to 100. */\n  max?: number;\n  /** Size variant controlling bar height */\n  size?: ComponentSize;\n  /** Title text.\n   * - Linear: displayed as a header above the bar; moves `label` into the header row.\n   * - Circular: smaller text displayed below the `label` inside the ring. */\n  title?: string;\n  /** 'linear' (default) or 'circular' */\n  type?: 'linear' | 'circular';\n  /** Current progress value (0 to `max`). Ignored when `indeterminate`. */\n  value?: number;\n  /** Human-readable value text for screen readers (e.g. \"Step 2 of 5\", \"75%\"). Overrides the raw aria-valuenow when set. */\n  'value-text'?: string;\n};\n\n/**\n * A linear progress bar for conveying operation progress.\n * Supports determinate (known value) and indeterminate (unknown duration) modes.\n *\n * @element bit-progress\n *\n * @attr {number} value   - Current value (0–max). Defaults to 0.\n * @attr {number} max     - Maximum value. Defaults to 100.\n * @attr {boolean} indeterminate - Show infinite animation (ignores value/max).\n * @attr {string} color   - Theme color: 'primary' | 'success' | 'warning' | 'error' | …\n * @attr {string} size    - Bar height: 'sm' | 'md' | 'lg'\n * @attr {string} label          - Visible text label + accessible name. Linear: at bar end (or header row with title). Circular: large text centered inside the ring.\n * @attr {string} title          - Title text. Linear: header above the bar (moves label to header row). Circular: smaller text below the label inside the ring.\n * @attr {string} floating-label - Floating chip centered above the fill endpoint (linear only); hidden when indeterminate.\n *\n * @cssprop --progress-height               - Bar height override\n * @cssprop --progress-track-bg             - Track background color\n * @cssprop --progress-fill                 - Fill bar color\n * @cssprop --progress-radius               - Border radius\n * @cssprop --progress-label-gap            - Gap between header/bar row and between bar and trailing label (default 0.25 rem)\n * @cssprop --progress-title-color          - Title text color (defaults to currentColor)\n * @cssprop --progress-label-color          - Label text color (defaults to currentColor)\n * @cssprop --progress-circle-size          - Circular indicator diameter (default 6rem)\n * @cssprop --progress-circular-label-size  - Font size of the label inside the ring (default --text-xl)\n * @cssprop --progress-circular-title-size  - Font size of the title inside the ring (default --text-xs)\n *\n * @example\n * ```html\n * <bit-progress value=\"45\"></bit-progress>\n * <bit-progress value=\"75\" max=\"100\" color=\"success\" size=\"lg\"></bit-progress>\n * <bit-progress indeterminate color=\"primary\" label=\"Loading…\"></bit-progress>\n * ```\n */\nexport const PROGRESS_TAG = define<BitProgressProps>('bit-progress', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    'floating-label': undefined,\n    indeterminate: false,\n    label: undefined,\n    max: 100,\n    title: undefined,\n    type: 'linear',\n    value: 0,\n    'value-text': undefined,\n  } satisfies PropBundle<BitProgressProps>,\n  setup({ host, props }) {\n    // The SVG circle circumference for a radius of 45 (viewBox 0 0 100 100)\n    const RADIUS = 45;\n    const CIRC = 2 * Math.PI * RADIUS; // ~282.7\n    const percent = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return `${(v / m) * 100}%`;\n    });\n    const dashoffset = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return CIRC - (v / m) * CIRC;\n    });\n    const isCircular = computed(() => props.type.value === 'circular');\n\n    effect(() => {\n      void props.value.value;\n      void props.max.value;\n      void props.indeterminate.value;\n      host.el.style.setProperty('--_percent', props.indeterminate.value ? '0%' : percent.value);\n    });\n\n    return html`\n      ${() =>\n        isCircular.value\n          ? html` <div\n              class=\"circular-track\"\n              role=\"progressbar\"\n              :aria-valuenow=\"${() => (props.indeterminate.value ? null : String(props.value.value))}\"\n              aria-valuemin=\"0\"\n              :aria-valuemax=\"${() => String(props.max.value)}\"\n              :aria-label=\"${() => props.label.value ?? props.title.value ?? 'Progress'}\"\n              :aria-valuetext=\"${() => props['value-text'].value ?? null}\"\n              :style=\"${() => `--_circ:${CIRC}px`}\">\n              <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n                <circle class=\"circle-bg\" cx=\"50\" cy=\"50\" r=\"${RADIUS}\"></circle>\n                <circle\n                  class=\"circle-fill\"\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"${RADIUS}\"\n                  :stroke-dasharray=\"${() => (props.indeterminate.value ? undefined : `${CIRC}px`)}\"\n                  :stroke-dashoffset=\"${() =>\n                    props.indeterminate.value ? undefined : `${dashoffset.value}px`}\"></circle>\n              </svg>\n              <div class=\"circular-inner\">\n                <span class=\"circular-label\">${() => props.label.value}</span>\n                <span class=\"circular-title\">${() => props.title.value}</span>\n              </div>\n            </div>`\n          : html` <div class=\"wrapper\">\n              <div class=\"header\">\n                <span class=\"progress-title\">${() => props.title.value}</span>\n                <span class=\"end-label header-label\">${() => props.label.value}</span>\n              </div>\n              <div class=\"bar-row\">\n                <div class=\"track-outer\">\n                  <div\n                    class=\"track\"\n                    role=\"progressbar\"\n                    :aria-valuenow=\"${() => (props.indeterminate.value ? null : String(props.value.value))}\"\n                    aria-valuemin=\"0\"\n                    :aria-valuemax=\"${() => String(props.max.value)}\"\n                    :aria-label=\"${() => props.label.value ?? props.title.value ?? 'Progress'}\"\n                    :aria-valuetext=\"${() => props['value-text'].value ?? null}\">\n                    <div\n                      class=\"fill\"\n                      part=\"fill\"\n                      :style=\"${() => (!props.indeterminate.value ? `width:${percent.value}` : null)}\"></div>\n                  </div>\n                  <span class=\"floating-label\">${() => props['floating-label'].value}</span>\n                </div>\n                <span class=\"end-label row-label\">${() => props.label.value}</span>\n              </div>\n            </div>`}\n    `;\n  },\n  styles: [colorThemeMixin, forcedColorsMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"gVAsEA,IAAa,GAAA,EAAA,EAAA,QAAwC,eAAgB,CACnE,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,iBAAkB,IAAA,GAClB,cAAe,GACf,MAAO,IAAA,GACP,IAAK,IACL,MAAO,IAAA,GACP,KAAM,SACN,MAAO,EACP,aAAc,IAAA,GACf,CACD,MAAM,CAAE,OAAM,SAAS,CAErB,IACM,EAAO,EAAI,KAAK,GAAK,GACrB,GAAA,EAAA,EAAA,cAIG,GAHG,KAAK,IAAI,EAAG,KAAK,IAAI,OAAO,EAAM,MAAM,MAAM,CAAE,OAAO,EAAM,IAAI,MAAM,CAAC,CAAC,CACzE,KAAK,IAAI,EAAG,OAAO,EAAM,IAAI,MAAM,CAAC,CAE1B,IAAI,GACxB,CACI,GAAA,EAAA,EAAA,cAIG,EAHG,KAAK,IAAI,EAAG,KAAK,IAAI,OAAO,EAAM,MAAM,MAAM,CAAE,OAAO,EAAM,IAAI,MAAM,CAAC,CAAC,CACzE,KAAK,IAAI,EAAG,OAAO,EAAM,IAAI,MAAM,CAAC,CAEtB,EACxB,CACI,GAAA,EAAA,EAAA,cAA4B,EAAM,KAAK,QAAU,WAAW,CASlE,OAPA,EAAA,EAAA,YAAa,CACN,EAAM,MAAM,MACZ,EAAM,IAAI,MACV,EAAM,cAAc,MACzB,EAAK,GAAG,MAAM,YAAY,aAAc,EAAM,cAAc,MAAQ,KAAO,EAAQ,MAAM,EACzF,CAEK,EAAA,IAAI;YAEP,EAAW,MACP,EAAA,IAAI;;;oCAGuB,EAAM,cAAc,MAAQ,KAAO,OAAO,EAAM,MAAM,MAAM,CAAE;;oCAE/D,OAAO,EAAM,IAAI,MAAM,CAAC;iCAC3B,EAAM,MAAM,OAAS,EAAM,MAAM,OAAS,WAAW;qCACjD,EAAM,cAAc,OAAS,KAAK;4BAC3C,WAAW,EAAK,IAAI;;+DAEa,GAAO;;;;;uBAK/C,GAAO;2CACgB,EAAM,cAAc,MAAQ,IAAA,GAAY,GAAG,EAAK,IAAK;4CAE/E,EAAM,cAAc,MAAQ,IAAA,GAAY,GAAG,EAAW,MAAM,IAAI;;;mDAG/B,EAAM,MAAM,MAAM;mDAClB,EAAM,MAAM,MAAM;;oBAG3D,EAAA,IAAI;;mDAEqC,EAAM,MAAM,MAAM;2DACV,EAAM,MAAM,MAAM;;;;;;;0CAOlC,EAAM,cAAc,MAAQ,KAAO,OAAO,EAAM,MAAM,MAAM,CAAE;;0CAE/D,OAAO,EAAM,IAAI,MAAM,CAAC;uCAC3B,EAAM,MAAM,OAAS,EAAM,MAAM,OAAS,WAAW;2CACjD,EAAM,cAAc,OAAS,KAAK;;;;oCAIvC,EAAM,cAAc,MAAmC,KAA3B,SAAS,EAAQ,QAAgB;;qDAE9C,EAAM,kBAAkB,MAAM;;wDAE3B,EAAM,MAAM,MAAM;;oBAExD;OAGlB,OAAQ,CAAC,EAAA,gBAAiB,EAAA,kBAAmB,EAAA,mBAAoB,EAAA,QAAgB,CAClF,CAAC"}

package/dist/progress.js

@@ -1,32 +1,29 @@
-import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
-import { colorThemeMixin as t, forcedColorsMixin as n } from "./styles/mixins/theme.css.js";
+import { sizableBundle as e, themableBundle as t } from "./inputs/shared/bundles.js";
+import { reducedMotionMixin as n } from "./styles/mixins/accessibility.css.js";
+import { colorThemeMixin as r, forcedColorsMixin as i } from "./styles/mixins/theme.css.js";
 import "./styles/index.js";
-import r from "./feedback/progress/progress.css?inline.js";
-import { computed as i, defineComponent as a, html as o, watch as s } from "@vielzeug/craftit";
+import a from "./feedback/progress/progress.css?inline.js";
+import { computed as o, define as s, effect as c, html as l } from "@vielzeug/craftit";
 //#region src/feedback/progress/progress.ts
-var c = a({
+var u = s("bit-progress", {
 	props: {
-		color: { default: void 0 },
-		"floating-label": { default: void 0 },
-		indeterminate: { default: !1 },
-		label: { default: void 0 },
-		max: { default: 100 },
-		size: { default: void 0 },
-		title: { default: void 0 },
-		type: { default: "linear" },
-		value: { default: 0 },
-		"value-text": { default: void 0 }
+		...t,
+		...e,
+		"floating-label": void 0,
+		indeterminate: !1,
+		label: void 0,
+		max: 100,
+		title: void 0,
+		type: "linear",
+		value: 0,
+		"value-text": void 0
 	},
 	setup({ host: e, props: t }) {
-		let n = 2 * Math.PI * 45, r = i(() => `${Math.max(0, Math.min(Number(t.value.value), Number(t.max.value))) / Math.max(1, Number(t.max.value)) * 100}%`), a = i(() => n - Math.max(0, Math.min(Number(t.value.value), Number(t.max.value))) / Math.max(1, Number(t.max.value)) * n), c = i(() => t.type.value === "circular");
-		return s([
-			t.value,
-			t.max,
-			t.indeterminate
-		], () => {
-			e.style.setProperty("--_percent", t.indeterminate.value ? "0%" : r.value);
-		}, { immediate: !0 }), o`
-      ${() => c.value ? o` <div
+		let n = 2 * Math.PI * 45, r = o(() => `${Math.max(0, Math.min(Number(t.value.value), Number(t.max.value))) / Math.max(1, Number(t.max.value)) * 100}%`), i = o(() => n - Math.max(0, Math.min(Number(t.value.value), Number(t.max.value))) / Math.max(1, Number(t.max.value)) * n), a = o(() => t.type.value === "circular");
+		return c(() => {
+			t.value.value, t.max.value, t.indeterminate.value, e.el.style.setProperty("--_percent", t.indeterminate.value ? "0%" : r.value);
+		}), l`
+      ${() => a.value ? l` <div
               class="circular-track"
               role="progressbar"
               :aria-valuenow="${() => t.indeterminate.value ? null : String(t.value.value)}"
@@ -43,13 +40,13 @@ var c = a({
                   cy="50"
                   r="${45}"
                   :stroke-dasharray="${() => t.indeterminate.value ? void 0 : `${n}px`}"
-                  :stroke-dashoffset="${() => t.indeterminate.value ? void 0 : `${a.value}px`}"></circle>
+                  :stroke-dashoffset="${() => t.indeterminate.value ? void 0 : `${i.value}px`}"></circle>
               </svg>
               <div class="circular-inner">
                 <span class="circular-label">${() => t.label.value}</span>
                 <span class="circular-title">${() => t.title.value}</span>
               </div>
-            </div>` : o` <div class="wrapper">
+            </div>` : l` <div class="wrapper">
               <div class="header">
                 <span class="progress-title">${() => t.title.value}</span>
                 <span class="end-label header-label">${() => t.label.value}</span>
@@ -77,14 +74,13 @@ var c = a({
     `;
 	},
 	styles: [
-		t,
+		r,
+		i,
 		n,
-		e,
-		r
-	],
-	tag: "bit-progress"
+		a
+	]
 });
 //#endregion
-export { c as PROGRESS_TAG };
+export { u as PROGRESS_TAG };
 
 //# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":[],"sources":["../src/feedback/progress/progress.ts"],"sourcesContent":["import { computed, defineComponent, html, watch } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { colorThemeMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './progress.css?inline';\n\n/** Progress bar component properties */\nexport type BitProgressProps = {\n  /** Theme color for the fill bar */\n  color?: ThemeColor;\n  /** Floating chip centered above the fill endpoint (linear only). Hidden in indeterminate mode. Position formula: left = fill% − half chip width (CSS: left:X%; transform:translateX(−50%)). */\n  'floating-label'?: string;\n  /** When true, shows an infinite animation — use when progress is unknown. */\n  indeterminate?: boolean;\n  /** Accessible name AND visible text label.\n   * - Linear without `title`: rendered at the end of the bar.\n   * - Linear with `title`: moved into the header row above the bar.\n   * - Circular: large text centered inside the ring. */\n  label?: string;\n  /** Maximum value. Defaults to 100. */\n  max?: number;\n  /** Size variant controlling bar height */\n  size?: ComponentSize;\n  /** Title text.\n   * - Linear: displayed as a header above the bar; moves `label` into the header row.\n   * - Circular: smaller text displayed below the `label` inside the ring. */\n  title?: string;\n  /** 'linear' (default) or 'circular' */\n  type?: 'linear' | 'circular';\n  /** Current progress value (0 to `max`). Ignored when `indeterminate`. */\n  value?: number;\n  /** Human-readable value text for screen readers (e.g. \"Step 2 of 5\", \"75%\"). Overrides the raw aria-valuenow when set. */\n  'value-text'?: string;\n};\n\n/**\n * A linear progress bar for conveying operation progress.\n * Supports determinate (known value) and indeterminate (unknown duration) modes.\n *\n * @element bit-progress\n *\n * @attr {number} value   - Current value (0–max). Defaults to 0.\n * @attr {number} max     - Maximum value. Defaults to 100.\n * @attr {boolean} indeterminate - Show infinite animation (ignores value/max).\n * @attr {string} color   - Theme color: 'primary' | 'success' | 'warning' | 'error' | …\n * @attr {string} size    - Bar height: 'sm' | 'md' | 'lg'\n * @attr {string} label          - Visible text label + accessible name. Linear: at bar end (or header row with title). Circular: large text centered inside the ring.\n * @attr {string} title          - Title text. Linear: header above the bar (moves label to header row). Circular: smaller text below the label inside the ring.\n * @attr {string} floating-label - Floating chip centered above the fill endpoint (linear only); hidden when indeterminate.\n *\n * @cssprop --progress-height               - Bar height override\n * @cssprop --progress-track-bg             - Track background color\n * @cssprop --progress-fill                 - Fill bar color\n * @cssprop --progress-radius               - Border radius\n * @cssprop --progress-label-gap            - Gap between header/bar row and between bar and trailing label (default 0.25 rem)\n * @cssprop --progress-title-color          - Title text color (defaults to currentColor)\n * @cssprop --progress-label-color          - Label text color (defaults to currentColor)\n * @cssprop --progress-circle-size          - Circular indicator diameter (default 6rem)\n * @cssprop --progress-circular-label-size  - Font size of the label inside the ring (default --text-xl)\n * @cssprop --progress-circular-title-size  - Font size of the title inside the ring (default --text-xs)\n *\n * @example\n * ```html\n * <bit-progress value=\"45\"></bit-progress>\n * <bit-progress value=\"75\" max=\"100\" color=\"success\" size=\"lg\"></bit-progress>\n * <bit-progress indeterminate color=\"primary\" label=\"Loading…\"></bit-progress>\n * ```\n */\nexport const PROGRESS_TAG = defineComponent<BitProgressProps>({\n  props: {\n    color: { default: undefined },\n    'floating-label': { default: undefined },\n    indeterminate: { default: false },\n    label: { default: undefined },\n    max: { default: 100 },\n    size: { default: undefined },\n    title: { default: undefined },\n    type: { default: 'linear' },\n    value: { default: 0 },\n    'value-text': { default: undefined },\n  },\n  setup({ host, props }) {\n    // The SVG circle circumference for a radius of 45 (viewBox 0 0 100 100)\n    const RADIUS = 45;\n    const CIRC = 2 * Math.PI * RADIUS; // ~282.7\n    const percent = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return `${(v / m) * 100}%`;\n    });\n    const dashoffset = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return CIRC - (v / m) * CIRC;\n    });\n    const isCircular = computed(() => props.type.value === 'circular');\n\n    // Use watch([...], fn, { immediate: true }) at setup-level so it fires during\n    // connectedCallback (when attributes are already synced) rather than deferring\n    // to onMount. The immediate flag triggers the first run synchronously.\n    watch(\n      [props.value, props.max, props.indeterminate],\n      () => {\n        host.style.setProperty('--_percent', props.indeterminate.value ? '0%' : percent.value);\n      },\n      { immediate: true },\n    );\n\n    return html`\n      ${() =>\n        isCircular.value\n          ? html` <div\n              class=\"circular-track\"\n              role=\"progressbar\"\n              :aria-valuenow=\"${() => (props.indeterminate.value ? null : String(props.value.value))}\"\n              aria-valuemin=\"0\"\n              :aria-valuemax=\"${() => String(props.max.value)}\"\n              :aria-label=\"${() => props.label.value ?? props.title.value ?? 'Progress'}\"\n              :aria-valuetext=\"${() => props['value-text'].value ?? null}\"\n              :style=\"${() => `--_circ:${CIRC}px`}\">\n              <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n                <circle class=\"circle-bg\" cx=\"50\" cy=\"50\" r=\"${RADIUS}\"></circle>\n                <circle\n                  class=\"circle-fill\"\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"${RADIUS}\"\n                  :stroke-dasharray=\"${() => (props.indeterminate.value ? undefined : `${CIRC}px`)}\"\n                  :stroke-dashoffset=\"${() =>\n                    props.indeterminate.value ? undefined : `${dashoffset.value}px`}\"></circle>\n              </svg>\n              <div class=\"circular-inner\">\n                <span class=\"circular-label\">${() => props.label.value}</span>\n                <span class=\"circular-title\">${() => props.title.value}</span>\n              </div>\n            </div>`\n          : html` <div class=\"wrapper\">\n              <div class=\"header\">\n                <span class=\"progress-title\">${() => props.title.value}</span>\n                <span class=\"end-label header-label\">${() => props.label.value}</span>\n              </div>\n              <div class=\"bar-row\">\n                <div class=\"track-outer\">\n                  <div\n                    class=\"track\"\n                    role=\"progressbar\"\n                    :aria-valuenow=\"${() => (props.indeterminate.value ? null : String(props.value.value))}\"\n                    aria-valuemin=\"0\"\n                    :aria-valuemax=\"${() => String(props.max.value)}\"\n                    :aria-label=\"${() => props.label.value ?? props.title.value ?? 'Progress'}\"\n                    :aria-valuetext=\"${() => props['value-text'].value ?? null}\">\n                    <div\n                      class=\"fill\"\n                      part=\"fill\"\n                      :style=\"${() => (!props.indeterminate.value ? `width:${percent.value}` : null)}\"></div>\n                  </div>\n                  <span class=\"floating-label\">${() => props['floating-label'].value}</span>\n                </div>\n                <span class=\"end-label row-label\">${() => props.label.value}</span>\n              </div>\n            </div>`}\n    `;\n  },\n  styles: [colorThemeMixin, forcedColorsMixin, reducedMotionMixin, componentStyles],\n  tag: 'bit-progress',\n});\n"],"mappings":";;;;;;AAqEA,IAAa,IAAe,EAAkC;CAC5D,OAAO;EACL,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,kBAAkB,EAAE,SAAS,KAAA,GAAW;EACxC,eAAe,EAAE,SAAS,IAAO;EACjC,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,KAAK,EAAE,SAAS,KAAK;EACrB,MAAM,EAAE,SAAS,KAAA,GAAW;EAC5B,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,MAAM,EAAE,SAAS,UAAU;EAC3B,OAAO,EAAE,SAAS,GAAG;EACrB,cAAc,EAAE,SAAS,KAAA,GAAW;EACrC;CACD,MAAM,EAAE,SAAM,YAAS;EAErB,IACM,IAAO,IAAI,KAAK,KAAK,IACrB,IAAU,QAIP,GAHG,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,EAAM,MAAM,MAAM,EAAE,OAAO,EAAM,IAAI,MAAM,CAAC,CAAC,GACzE,KAAK,IAAI,GAAG,OAAO,EAAM,IAAI,MAAM,CAAC,GAE1B,IAAI,GACxB,EACI,IAAa,QAIV,IAHG,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,EAAM,MAAM,MAAM,EAAE,OAAO,EAAM,IAAI,MAAM,CAAC,CAAC,GACzE,KAAK,IAAI,GAAG,OAAO,EAAM,IAAI,MAAM,CAAC,GAEtB,EACxB,EACI,IAAa,QAAe,EAAM,KAAK,UAAU,WAAW;AAalE,SARA,EACE;GAAC,EAAM;GAAO,EAAM;GAAK,EAAM;GAAc,QACvC;AACJ,KAAK,MAAM,YAAY,cAAc,EAAM,cAAc,QAAQ,OAAO,EAAQ,MAAM;KAExF,EAAE,WAAW,IAAM,CACpB,EAEM,CAAI;cAEP,EAAW,QACP,CAAI;;;sCAGuB,EAAM,cAAc,QAAQ,OAAO,OAAO,EAAM,MAAM,MAAM,CAAE;;sCAE/D,OAAO,EAAM,IAAI,MAAM,CAAC;mCAC3B,EAAM,MAAM,SAAS,EAAM,MAAM,SAAS,WAAW;uCACjD,EAAM,cAAc,SAAS,KAAK;8BAC3C,WAAW,EAAK,IAAI;;+DAEa,GAAO;;;;;uBAK/C,GAAO;6CACgB,EAAM,cAAc,QAAQ,KAAA,IAAY,GAAG,EAAK,IAAK;8CAE/E,EAAM,cAAc,QAAQ,KAAA,IAAY,GAAG,EAAW,MAAM,IAAI;;;qDAG/B,EAAM,MAAM,MAAM;qDAClB,EAAM,MAAM,MAAM;;sBAG3D,CAAI;;qDAEqC,EAAM,MAAM,MAAM;6DACV,EAAM,MAAM,MAAM;;;;;;;4CAOlC,EAAM,cAAc,QAAQ,OAAO,OAAO,EAAM,MAAM,MAAM,CAAE;;4CAE/D,OAAO,EAAM,IAAI,MAAM,CAAC;yCAC3B,EAAM,MAAM,SAAS,EAAM,MAAM,SAAS,WAAW;6CACjD,EAAM,cAAc,SAAS,KAAK;;;;sCAIvC,EAAM,cAAc,QAAmC,OAA3B,SAAS,EAAQ,QAAgB;;uDAE9C,EAAM,kBAAkB,MAAM;;0DAE3B,EAAM,MAAM,MAAM;;oBAExD;;;CAGlB,QAAQ;EAAC;EAAiB;EAAmB;EAAoB;EAAgB;CACjF,KAAK;CACN,CAAC"}
+{"version":3,"file":"progress.js","names":[],"sources":["../src/feedback/progress/progress.ts"],"sourcesContent":["import { define, computed, effect, html } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { type PropBundle, sizableBundle, themableBundle } from '../../inputs/shared/bundles';\nimport { colorThemeMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './progress.css?inline';\n\n/** Progress bar component properties */\nexport type BitProgressProps = {\n  /** Theme color for the fill bar */\n  color?: ThemeColor;\n  /** Floating chip centered above the fill endpoint (linear only). Hidden in indeterminate mode. Position formula: left = fill% − half chip width (CSS: left:X%; transform:translateX(−50%)). */\n  'floating-label'?: string;\n  /** When true, shows an infinite animation — use when progress is unknown. */\n  indeterminate?: boolean;\n  /** Accessible name AND visible text label.\n   * - Linear without `title`: rendered at the end of the bar.\n   * - Linear with `title`: moved into the header row above the bar.\n   * - Circular: large text centered inside the ring. */\n  label?: string;\n  /** Maximum value. Defaults to 100. */\n  max?: number;\n  /** Size variant controlling bar height */\n  size?: ComponentSize;\n  /** Title text.\n   * - Linear: displayed as a header above the bar; moves `label` into the header row.\n   * - Circular: smaller text displayed below the `label` inside the ring. */\n  title?: string;\n  /** 'linear' (default) or 'circular' */\n  type?: 'linear' | 'circular';\n  /** Current progress value (0 to `max`). Ignored when `indeterminate`. */\n  value?: number;\n  /** Human-readable value text for screen readers (e.g. \"Step 2 of 5\", \"75%\"). Overrides the raw aria-valuenow when set. */\n  'value-text'?: string;\n};\n\n/**\n * A linear progress bar for conveying operation progress.\n * Supports determinate (known value) and indeterminate (unknown duration) modes.\n *\n * @element bit-progress\n *\n * @attr {number} value   - Current value (0–max). Defaults to 0.\n * @attr {number} max     - Maximum value. Defaults to 100.\n * @attr {boolean} indeterminate - Show infinite animation (ignores value/max).\n * @attr {string} color   - Theme color: 'primary' | 'success' | 'warning' | 'error' | …\n * @attr {string} size    - Bar height: 'sm' | 'md' | 'lg'\n * @attr {string} label          - Visible text label + accessible name. Linear: at bar end (or header row with title). Circular: large text centered inside the ring.\n * @attr {string} title          - Title text. Linear: header above the bar (moves label to header row). Circular: smaller text below the label inside the ring.\n * @attr {string} floating-label - Floating chip centered above the fill endpoint (linear only); hidden when indeterminate.\n *\n * @cssprop --progress-height               - Bar height override\n * @cssprop --progress-track-bg             - Track background color\n * @cssprop --progress-fill                 - Fill bar color\n * @cssprop --progress-radius               - Border radius\n * @cssprop --progress-label-gap            - Gap between header/bar row and between bar and trailing label (default 0.25 rem)\n * @cssprop --progress-title-color          - Title text color (defaults to currentColor)\n * @cssprop --progress-label-color          - Label text color (defaults to currentColor)\n * @cssprop --progress-circle-size          - Circular indicator diameter (default 6rem)\n * @cssprop --progress-circular-label-size  - Font size of the label inside the ring (default --text-xl)\n * @cssprop --progress-circular-title-size  - Font size of the title inside the ring (default --text-xs)\n *\n * @example\n * ```html\n * <bit-progress value=\"45\"></bit-progress>\n * <bit-progress value=\"75\" max=\"100\" color=\"success\" size=\"lg\"></bit-progress>\n * <bit-progress indeterminate color=\"primary\" label=\"Loading…\"></bit-progress>\n * ```\n */\nexport const PROGRESS_TAG = define<BitProgressProps>('bit-progress', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    'floating-label': undefined,\n    indeterminate: false,\n    label: undefined,\n    max: 100,\n    title: undefined,\n    type: 'linear',\n    value: 0,\n    'value-text': undefined,\n  } satisfies PropBundle<BitProgressProps>,\n  setup({ host, props }) {\n    // The SVG circle circumference for a radius of 45 (viewBox 0 0 100 100)\n    const RADIUS = 45;\n    const CIRC = 2 * Math.PI * RADIUS; // ~282.7\n    const percent = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return `${(v / m) * 100}%`;\n    });\n    const dashoffset = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return CIRC - (v / m) * CIRC;\n    });\n    const isCircular = computed(() => props.type.value === 'circular');\n\n    effect(() => {\n      void props.value.value;\n      void props.max.value;\n      void props.indeterminate.value;\n      host.el.style.setProperty('--_percent', props.indeterminate.value ? '0%' : percent.value);\n    });\n\n    return html`\n      ${() =>\n        isCircular.value\n          ? html` <div\n              class=\"circular-track\"\n              role=\"progressbar\"\n              :aria-valuenow=\"${() => (props.indeterminate.value ? null : String(props.value.value))}\"\n              aria-valuemin=\"0\"\n              :aria-valuemax=\"${() => String(props.max.value)}\"\n              :aria-label=\"${() => props.label.value ?? props.title.value ?? 'Progress'}\"\n              :aria-valuetext=\"${() => props['value-text'].value ?? null}\"\n              :style=\"${() => `--_circ:${CIRC}px`}\">\n              <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n                <circle class=\"circle-bg\" cx=\"50\" cy=\"50\" r=\"${RADIUS}\"></circle>\n                <circle\n                  class=\"circle-fill\"\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"${RADIUS}\"\n                  :stroke-dasharray=\"${() => (props.indeterminate.value ? undefined : `${CIRC}px`)}\"\n                  :stroke-dashoffset=\"${() =>\n                    props.indeterminate.value ? undefined : `${dashoffset.value}px`}\"></circle>\n              </svg>\n              <div class=\"circular-inner\">\n                <span class=\"circular-label\">${() => props.label.value}</span>\n                <span class=\"circular-title\">${() => props.title.value}</span>\n              </div>\n            </div>`\n          : html` <div class=\"wrapper\">\n              <div class=\"header\">\n                <span class=\"progress-title\">${() => props.title.value}</span>\n                <span class=\"end-label header-label\">${() => props.label.value}</span>\n              </div>\n              <div class=\"bar-row\">\n                <div class=\"track-outer\">\n                  <div\n                    class=\"track\"\n                    role=\"progressbar\"\n                    :aria-valuenow=\"${() => (props.indeterminate.value ? null : String(props.value.value))}\"\n                    aria-valuemin=\"0\"\n                    :aria-valuemax=\"${() => String(props.max.value)}\"\n                    :aria-label=\"${() => props.label.value ?? props.title.value ?? 'Progress'}\"\n                    :aria-valuetext=\"${() => props['value-text'].value ?? null}\">\n                    <div\n                      class=\"fill\"\n                      part=\"fill\"\n                      :style=\"${() => (!props.indeterminate.value ? `width:${percent.value}` : null)}\"></div>\n                  </div>\n                  <span class=\"floating-label\">${() => props['floating-label'].value}</span>\n                </div>\n                <span class=\"end-label row-label\">${() => props.label.value}</span>\n              </div>\n            </div>`}\n    `;\n  },\n  styles: [colorThemeMixin, forcedColorsMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;AAsEA,IAAa,IAAe,EAAyB,gBAAgB;CACnE,OAAO;EACL,GAAG;EACH,GAAG;EACH,kBAAkB,KAAA;EAClB,eAAe;EACf,OAAO,KAAA;EACP,KAAK;EACL,OAAO,KAAA;EACP,MAAM;EACN,OAAO;EACP,cAAc,KAAA;EACf;CACD,MAAM,EAAE,SAAM,YAAS;EAErB,IACM,IAAO,IAAI,KAAK,KAAK,IACrB,IAAU,QAIP,GAHG,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,EAAM,MAAM,MAAM,EAAE,OAAO,EAAM,IAAI,MAAM,CAAC,CAAC,GACzE,KAAK,IAAI,GAAG,OAAO,EAAM,IAAI,MAAM,CAAC,GAE1B,IAAI,GACxB,EACI,IAAa,QAIV,IAHG,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,EAAM,MAAM,MAAM,EAAE,OAAO,EAAM,IAAI,MAAM,CAAC,CAAC,GACzE,KAAK,IAAI,GAAG,OAAO,EAAM,IAAI,MAAM,CAAC,GAEtB,EACxB,EACI,IAAa,QAAe,EAAM,KAAK,UAAU,WAAW;AASlE,SAPA,QAAa;AAIX,GAHK,EAAM,MAAM,OACZ,EAAM,IAAI,OACV,EAAM,cAAc,OACzB,EAAK,GAAG,MAAM,YAAY,cAAc,EAAM,cAAc,QAAQ,OAAO,EAAQ,MAAM;IACzF,EAEK,CAAI;cAEP,EAAW,QACP,CAAI;;;sCAGuB,EAAM,cAAc,QAAQ,OAAO,OAAO,EAAM,MAAM,MAAM,CAAE;;sCAE/D,OAAO,EAAM,IAAI,MAAM,CAAC;mCAC3B,EAAM,MAAM,SAAS,EAAM,MAAM,SAAS,WAAW;uCACjD,EAAM,cAAc,SAAS,KAAK;8BAC3C,WAAW,EAAK,IAAI;;+DAEa,GAAO;;;;;uBAK/C,GAAO;6CACgB,EAAM,cAAc,QAAQ,KAAA,IAAY,GAAG,EAAK,IAAK;8CAE/E,EAAM,cAAc,QAAQ,KAAA,IAAY,GAAG,EAAW,MAAM,IAAI;;;qDAG/B,EAAM,MAAM,MAAM;qDAClB,EAAM,MAAM,MAAM;;sBAG3D,CAAI;;qDAEqC,EAAM,MAAM,MAAM;6DACV,EAAM,MAAM,MAAM;;;;;;;4CAOlC,EAAM,cAAc,QAAQ,OAAO,OAAO,EAAM,MAAM,MAAM,CAAE;;4CAE/D,OAAO,EAAM,IAAI,MAAM,CAAC;yCAC3B,EAAM,MAAM,SAAS,EAAM,MAAM,SAAS,WAAW;6CACjD,EAAM,cAAc,SAAS,KAAK;;;;sCAIvC,EAAM,cAAc,QAAmC,OAA3B,SAAS,EAAQ,QAAgB;;uDAE9C,EAAM,kBAAkB,MAAM;;0DAE3B,EAAM,MAAM,MAAM;;oBAExD;;;CAGlB,QAAQ;EAAC;EAAiB;EAAmB;EAAoB;EAAgB;CAClF,CAAC"}

package/dist/radio-group.cjs

@@ -1,20 +1,20 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/shape.css.cjs`),t=require(`./styles/mixins/states.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const r=require(`./inputs/shared/utils/choice-change.cjs`),i=require(`./inputs/shared/form-context.cjs`),a=require(`./inputs/shared/dom-sync/form-context.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const o=require(`./inputs/radio-group/radio-group.css?inline.cjs`);let s=require(`@vielzeug/craftit`);var c=(0,s.createContext)(`RadioGroupContext`),l=(0,s.defineComponent)({props:{color:{default:void 0},disabled:{default:!1},error:{default:``},helper:{default:``},label:{default:``},name:{default:``},orientation:{default:`vertical`},required:{default:!1},size:{default:void 0},value:{default:``}},setup({emit:e,host:t,props:n}){let o=(0,s.signal)(``);(0,s.watch)(n.value,e=>{o.value=e??``},{immediate:!0});let l=()=>Array.from(t.getElementsByTagName(`bit-radio`)),u=e=>l().find(t=>(t.getAttribute(`value`)??``)===e)?.textContent?.replace(/\s+/g,` `).trim()||e,d=(t,n)=>{o.value=t;let i=t?[u(t)]:[];e(`change`,r.createChoiceChangeDetail(t?[t]:[],i,n))};a.mountFormContextSync(t,(0,s.inject)(i.FORM_CTX,void 0),n),(0,s.provide)(c,{color:n.color,disabled:(0,s.computed)(()=>!!n.disabled.value),name:n.name,select:d,size:n.size,value:o});let f=()=>{for(let e of l())(e.getAttribute(`value`)??``)===o.value?e.setAttribute(`checked`,``):e.removeAttribute(`checked`),n.name.value&&e.setAttribute(`name`,n.name.value),n.color.value?e.setAttribute(`color`,n.color.value):e.removeAttribute(`color`),n.size.value?e.setAttribute(`size`,n.size.value):e.removeAttribute(`size`),n.disabled.value?e.setAttribute(`disabled`,``):e.removeAttribute(`disabled`)};(0,s.onMount)(()=>{(0,s.onSlotChange)(`default`,f),f(),(0,s.effect)(f),(0,s.effect)(()=>{let e=l(),t=!1;for(let r of e)r.getAttribute(`value`)===o.value&&!n.disabled.value?(r.setAttribute(`tabindex`,`0`),t=!0):r.setAttribute(`tabindex`,`-1`);if(!t&&e.length>0){let t=e.find(e=>!e.hasAttribute(`disabled`));t&&t.setAttribute(`tabindex`,`0`)}}),(0,s.handle)(t,`keydown`,e=>{if(![`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`].includes(e.key))return;let t=l().filter(e=>!e.hasAttribute(`disabled`));if(!t.length)return;let n=t.indexOf(document.activeElement);if(n===-1)return;e.preventDefault();let r=e.key===`ArrowDown`||e.key===`ArrowRight`?(n+1)%t.length:(n-1+t.length)%t.length;t[r].focus(),d(t[r].getAttribute(`value`)??``,e)}),(0,s.handle)(t,`change`,e=>{e.target!==t&&(e.stopPropagation(),d(e.target.getAttribute(`value`)??``,e))})});let p=(0,s.createId)(`radio-group-legend`),m=`${p}-error`,h=`${p}-helper`,g=(0,s.computed)(()=>!!n.error.value),_=(0,s.computed)(()=>!!n.helper.value&&!g.value);return s.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/shape.css.cjs`),n=require(`./styles/mixins/states.css.cjs`),r=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const i=require(`./packages/craftit/dist/controls/list-control.cjs`),a=require(`./packages/craftit/dist/controls/list-key-control.cjs`);require(`./packages/craftit/dist/controls.cjs`);const o=require(`./inputs/shared/form-context.cjs`),s=require(`./inputs/shared/dom-sync/form-context.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const c=require(`./inputs/shared/utils/choice-change.cjs`),l=require(`./inputs/radio-group/radio-group.css?inline.cjs`);let u=require(`@vielzeug/craftit`);var d=(0,u.createContext)(`RadioGroupContext`),f={...e.themableBundle,...e.sizableBundle,...e.disablableBundle,error:``,helper:``,label:``,name:void 0,orientation:`vertical`,required:!1,value:``},p=(0,u.define)(`bit-radio-group`,{props:f,setup({emit:e,host:t,props:n,slots:r}){let l=(0,u.signal)(n.value.value??``),f=(0,u.computed)(()=>!!n.disabled.value);t.bind(`attr`,{value:()=>l.value||null}),(0,u.watch)(n.value,e=>{l.value=e??``},{immediate:!0});let p=()=>Array.from(t.el.getElementsByTagName(`bit-radio`)),m=()=>f.value?[]:p().filter(e=>!e.hasAttribute(`disabled`)),h=e=>p().find(t=>(t.getAttribute(`value`)??``)===e)?.textContent?.replace(/\s+/g,` `).trim()||e,g=(t,n)=>{l.value=t;let r=t?[h(t)]:[];e(`change`,c.createChoiceChangeDetail(t?[t]:[],r,n))},_=(0,u.inject)(o.FORM_CTX,void 0);s.mountFormContextSync(t.el,_,n),(0,u.provide)(d,{color:n.color,disabled:f,name:n.name,select:g,size:n.size,value:l});let v=()=>{let e=(e,t,n)=>{n?e.setAttribute(t,n):e.removeAttribute(t)},t=(e,t,n)=>{e.toggleAttribute(t,n)};for(let r of p())t(r,`checked`,(r.getAttribute(`value`)??``)===l.value),e(r,`name`,n.name.value),e(r,`color`,n.color.value),e(r,`size`,n.size.value),t(r,`disabled`,f.value)};(0,u.effect)(()=>{r.elements().value,v()}),(0,u.effect)(()=>{r.elements().value;let e=p(),t=(e,t)=>{e.setAttribute(`tabindex`,t&&!f.value?`0`:`-1`)},n=!1;for(let r of e){let e=r.getAttribute(`value`)===l.value;t(r,e),e&&!f.value&&(n=!0)}if(!n&&e.length>0){let t=e.find(e=>!e.hasAttribute(`disabled`));t&&t.setAttribute(`tabindex`,`0`)}});let y=a.n({control:i.n({getIndex:()=>m().indexOf(document.activeElement),getItems:m,loop:!0,setIndex:e=>{let t=m()[e];t&&t.focus()}}),keys:{next:[`ArrowDown`,`ArrowRight`],prev:[`ArrowUp`,`ArrowLeft`]},onInvoke:(e,t,n)=>{let r=document.activeElement;r?.tagName===`BIT-RADIO`&&g(r.getAttribute(`value`)??``,n)}});t.bind(`on`,{change:e=>{e.target!==t.el&&(e.stopPropagation(),g(e.target.getAttribute(`value`)??``,e))},keydown:e=>{let t=m();t.length&&t.indexOf(document.activeElement)!==-1&&y.handleKeydown(e)}});let b=(0,u.createId)(`radio-group-legend`),x=`${b}-error`,S=`${b}-helper`,C=(0,u.computed)(()=>!!n.error.value),w=(0,u.computed)(()=>!!n.helper.value&&!C.value);return u.html`
       <fieldset
         role="radiogroup"
         aria-required="${()=>String(!!n.required.value)}"
-        aria-invalid="${()=>String(g.value)}"
-        aria-errormessage="${()=>g.value?m:null}"
-        aria-describedby="${()=>g.value?m:_.value?h:null}">
-        <legend id="${p}" ?hidden=${()=>!n.label.value}>
-          ${()=>n.label.value}${()=>n.required.value?s.html`<span aria-hidden="true"> *</span>`:``}
+        aria-invalid="${()=>String(C.value)}"
+        aria-errormessage="${()=>C.value?x:null}"
+        aria-describedby="${()=>C.value?x:w.value?S:null}">
+        <legend id="${b}" ?hidden=${()=>!n.label.value}>
+          ${()=>n.label.value}${()=>n.required.value?u.html`<span aria-hidden="true"> *</span>`:``}
         </legend>
         <div class="radio-group-items" part="items">
           <slot></slot>
         </div>
-        <div class="error-text" id="${m}" role="alert" ?hidden=${()=>!g.value}>
+        <div class="error-text" id="${x}" role="alert" ?hidden=${()=>!C.value}>
           ${()=>n.error.value}
         </div>
-        <div class="helper-text" id="${h}" ?hidden=${()=>!_.value}>${()=>n.helper.value}</div>
+        <div class="helper-text" id="${S}" ?hidden=${()=>!w.value}>${()=>n.helper.value}</div>
       </fieldset>
-    `},styles:[n.colorThemeMixin,e.sizeVariantMixin(),t.disabledStateMixin(),o.default],tag:`bit-radio-group`});exports.RADIO_GROUP_CTX=c,exports.RADIO_GROUP_TAG=l;
+    `},styles:[r.colorThemeMixin,t.sizeVariantMixin(),n.disabledStateMixin(),l.default]});exports.RADIO_GROUP_CTX=d,exports.RADIO_GROUP_TAG=p;
 //# sourceMappingURL=radio-group.cjs.map