@vielzeug/buildit 2.0.0

package/dist/popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.cjs","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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"}

package/dist/popover.js

@@ -0,0 +1,110 @@
+import { reducedMotionMixin as e } 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";
+//#region src/overlay/popover/popover.ts
+var h = 8, g = new Set([
+	"click",
+	"hover",
+	"focus"
+]);
+function _(e) {
+	let t = String(e).split(",").map((e) => e.trim()).filter((e) => g.has(e));
+	return t.length > 0 ? t : ["click"];
+}
+var v = i({
+	props: {
+		disabled: { default: !1 },
+		label: { default: void 0 },
+		offset: { default: h },
+		open: { default: void 0 },
+		placement: { default: "bottom" },
+		trigger: { default: "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, {
+				middleware: [
+					f(i.offset.value ?? h),
+					d(),
+					m({ padding: 8 })
+				],
+				placement: i.placement.value
+			}).then((e) => {
+				y && (y.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 T() {
+			x?.(), x = null, b?.setAttribute("aria-expanded", "false"), g.value = !1, y?.matches(":popover-open") && y.hidePopover();
+		}
+		function E() {
+			i.open.value === void 0 && (i.disabled.value || g.value || (w(), e("open")));
+		}
+		function D() {
+			i.open.value === void 0 && g.value && (T(), e("close"));
+		}
+		function O() {
+			g.value ? D() : E();
+		}
+		function k(e) {
+			e.key === "Escape" && D();
+		}
+		function A(e) {
+			if (!g.value) return;
+			let n = e.composedPath();
+			n.includes(t) || y && n.includes(y) || b && n.includes(b) || D();
+		}
+		function j(e) {
+			let t = e.relatedTarget;
+			t && y?.contains(t) || t && b?.contains(t) || D();
+		}
+		return o(() => {
+			let n = t.shadowRoot?.querySelector("slot:not([name])");
+			if (!n) return;
+			let r = () => {
+				a();
+				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);
+			};
+			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();
+			}), () => {
+				a(), x?.(), x = null, y?.matches(":popover-open") && y.hidePopover();
+			};
+		}), a`
+      <slot></slot>
+      <div
+        class="panel"
+        part="panel"
+        id="${v}"
+        role="dialog"
+        aria-modal="false"
+        popover="manual"
+        :aria-label="${() => i.label.value ?? null}"
+        :aria-hidden="${() => String(!g.value)}"
+        ref=${(e) => {
+			y = e;
+		}}>
+        <slot name="content"></slot>
+      </div>
+    `;
+	},
+	styles: [e, t],
+	tag: "bit-popover"
+});
+//#endregion
+export { v as POPOVER_TAG };
+
+//# sourceMappingURL=popover.js.map

package/dist/popover.js.map

@@ -0,0 +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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"}

package/dist/progress.cjs

@@ -0,0 +1,51 @@
+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
+              class="circular-track"
+              role="progressbar"
+              :aria-valuenow="${()=>t.indeterminate.value?null:String(t.value.value)}"
+              aria-valuemin="0"
+              :aria-valuemax="${()=>String(t.max.value)}"
+              :aria-label="${()=>t.label.value??t.title.value??`Progress`}"
+              :aria-valuetext="${()=>t[`value-text`].value??null}"
+              :style="${()=>`--_circ:${n}px`}">
+              <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                <circle class="circle-bg" cx="50" cy="50" r="${45}"></circle>
+                <circle
+                  class="circle-fill"
+                  cx="50"
+                  cy="50"
+                  r="${45}"
+                  :stroke-dasharray="${()=>t.indeterminate.value?void 0:`${n}px`}"
+                  :stroke-dashoffset="${()=>t.indeterminate.value?void 0:`${a.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>`:r.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>
+              </div>
+              <div class="bar-row">
+                <div class="track-outer">
+                  <div
+                    class="track"
+                    role="progressbar"
+                    :aria-valuenow="${()=>t.indeterminate.value?null:String(t.value.value)}"
+                    aria-valuemin="0"
+                    :aria-valuemax="${()=>String(t.max.value)}"
+                    :aria-label="${()=>t.label.value??t.title.value??`Progress`}"
+                    :aria-valuetext="${()=>t[`value-text`].value??null}">
+                    <div
+                      class="fill"
+                      part="fill"
+                      :style="${()=>t.indeterminate.value?null:`width:${i.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;
+//# sourceMappingURL=progress.cjs.map

package/dist/progress.cjs.map

@@ -0,0 +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"}

package/dist/progress.js

@@ -0,0 +1,90 @@
+import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import { colorThemeMixin as t, forcedColorsMixin as n } 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";
+//#region src/feedback/progress/progress.ts
+var c = a({
+	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, 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
+              class="circular-track"
+              role="progressbar"
+              :aria-valuenow="${() => t.indeterminate.value ? null : String(t.value.value)}"
+              aria-valuemin="0"
+              :aria-valuemax="${() => String(t.max.value)}"
+              :aria-label="${() => t.label.value ?? t.title.value ?? "Progress"}"
+              :aria-valuetext="${() => t["value-text"].value ?? null}"
+              :style="${() => `--_circ:${n}px`}">
+              <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                <circle class="circle-bg" cx="50" cy="50" r="${45}"></circle>
+                <circle
+                  class="circle-fill"
+                  cx="50"
+                  cy="50"
+                  r="${45}"
+                  :stroke-dasharray="${() => t.indeterminate.value ? void 0 : `${n}px`}"
+                  :stroke-dashoffset="${() => t.indeterminate.value ? void 0 : `${a.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 class="header">
+                <span class="progress-title">${() => t.title.value}</span>
+                <span class="end-label header-label">${() => t.label.value}</span>
+              </div>
+              <div class="bar-row">
+                <div class="track-outer">
+                  <div
+                    class="track"
+                    role="progressbar"
+                    :aria-valuenow="${() => t.indeterminate.value ? null : String(t.value.value)}"
+                    aria-valuemin="0"
+                    :aria-valuemax="${() => String(t.max.value)}"
+                    :aria-label="${() => t.label.value ?? t.title.value ?? "Progress"}"
+                    :aria-valuetext="${() => t["value-text"].value ?? null}">
+                    <div
+                      class="fill"
+                      part="fill"
+                      :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,
+		n,
+		e,
+		r
+	],
+	tag: "bit-progress"
+});
+//#endregion
+export { c as PROGRESS_TAG };
+
+//# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -0,0 +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"}

package/dist/radio-group.cjs

@@ -0,0 +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`
+      <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>`:``}
+        </legend>
+        <div class="radio-group-items" part="items">
+          <slot></slot>
+        </div>
+        <div class="error-text" id="${m}" role="alert" ?hidden=${()=>!g.value}>
+          ${()=>n.error.value}
+        </div>
+        <div class="helper-text" id="${h}" ?hidden=${()=>!_.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;
+//# sourceMappingURL=radio-group.cjs.map

package/dist/radio-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.cjs","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n  computed,\n  createContext,\n  createId,\n  defineComponent,\n  effect,\n  handle,\n  html,\n  inject,\n  onMount,\n  onSlotChange,\n  provide,\n  type ReadonlySignal,\n  signal,\n  watch,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport { createChoiceChangeDetail, type ChoiceChangeDetail } from '../shared/utils';\nimport componentStyles from './radio-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type RadioGroupContext = {\n  color: ReadonlySignal<ThemeColor | undefined>;\n  disabled: ReadonlySignal<boolean>;\n  name: ReadonlySignal<string | undefined>;\n  select: (value: string, originalEvent?: Event) => void;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  value: ReadonlySignal<string>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext>('RadioGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type BitRadioGroupProps = {\n  /** Theme color — propagated to all child bit-radio elements */\n  color?: ThemeColor;\n  /** Disable all radios in the group */\n  disabled?: boolean;\n  /** Error message shown below the group */\n  error?: string;\n  /** Helper text shown below the group */\n  helper?: string;\n  /** Legend / label for the fieldset. Required for accessibility. */\n  label?: string;\n  /** Form field name — propagated to all child bit-radio elements */\n  name?: string;\n  /** Layout direction of the radio options */\n  orientation?: 'vertical' | 'horizontal';\n  /** Mark the group as required */\n  required?: boolean;\n  /** Size — propagated to all child bit-radio elements */\n  size?: ComponentSize;\n  /** Currently selected value */\n  value?: string;\n};\n\nexport type BitRadioGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `bit-radio` elements, provides shared\n * `name`, `color`, and `size` via context, and manages roving tabindex\n * keyboard navigation.\n *\n * @element bit-radio-group\n *\n * @attr {string} label - Legend text (required for a11y)\n * @attr {string} value - Currently selected value\n * @attr {string} name - Form field name (propagated to all bit-radio children)\n * @attr {boolean} disabled - Disable all radios in the group\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} color - Theme color\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `bit-radio` elements here\n */\nexport const RADIO_GROUP_TAG = defineComponent<BitRadioGroupProps, BitRadioGroupEvents>({\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '' },\n    helper: { default: '' },\n    label: { default: '' },\n    name: { default: '' },\n    orientation: { default: 'vertical' },\n    required: { default: false },\n    size: { default: undefined },\n    value: { default: '' },\n  },\n  setup({ emit, host, props }) {\n    const selectedValue = signal('');\n\n    watch(\n      props.value,\n      (v) => {\n        selectedValue.value = (v as string | undefined) ?? '';\n      },\n      { immediate: true },\n    );\n\n    const getSlottedRadios = (): HTMLElement[] => Array.from(host.getElementsByTagName('bit-radio')) as HTMLElement[];\n\n    const getLabelForValue = (value: string): string => {\n      const radio = getSlottedRadios().find((el) => (el.getAttribute('value') ?? '') === value);\n\n      return radio?.textContent?.replace(/\\s+/g, ' ').trim() || value;\n    };\n\n    const selectRadio = (val: string, originalEvent?: Event) => {\n      selectedValue.value = val;\n\n      const labels = val ? [getLabelForValue(val)] : [];\n      const values = val ? [val] : [];\n\n      emit('change', createChoiceChangeDetail(values, labels, originalEvent));\n    };\n\n    const formCtx = inject(FORM_CTX, undefined);\n\n    mountFormContextSync(host, formCtx, props);\n\n    provide(RADIO_GROUP_CTX, {\n      color: props.color,\n      disabled: computed(() => Boolean(props.disabled.value)),\n      name: props.name,\n      select: selectRadio,\n      size: props.size,\n      value: selectedValue,\n    });\n\n    // Sync name/color/size/disabled onto slotted bit-radio children.\n    // Checked state is handled reactively inside bit-radio via group context.\n    const syncChildren = () => {\n      for (const radio of getSlottedRadios()) {\n        const val = radio.getAttribute('value') ?? '';\n\n        if (val === selectedValue.value) radio.setAttribute('checked', '');\n        else radio.removeAttribute('checked');\n\n        if (props.name.value) radio.setAttribute('name', props.name.value);\n\n        if (props.color.value) radio.setAttribute('color', props.color.value);\n        else radio.removeAttribute('color');\n\n        if (props.size.value) radio.setAttribute('size', props.size.value);\n        else radio.removeAttribute('size');\n\n        if (props.disabled.value) radio.setAttribute('disabled', '');\n        else radio.removeAttribute('disabled');\n      }\n    };\n\n    onMount(() => {\n      onSlotChange('default', syncChildren);\n      // Apply group props to already-slotted radios on first mount.\n      syncChildren();\n      effect(syncChildren);\n\n      // Roving tabindex: only the selected (or first) radio is tabbable\n      effect(() => {\n        const radios = getSlottedRadios();\n        let hasFocusable = false;\n\n        for (const radio of radios) {\n          const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n          if (isSelected && !props.disabled.value) {\n            radio.setAttribute('tabindex', '0');\n            hasFocusable = true;\n          } else {\n            radio.setAttribute('tabindex', '-1');\n          }\n        }\n\n        // If nothing is selected, make the first non-disabled radio tabbable\n        if (!hasFocusable && radios.length > 0) {\n          const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n          if (first) first.setAttribute('tabindex', '0');\n        }\n      });\n\n      // Arrow-key navigation within the group\n      handle(host, 'keydown', (e: KeyboardEvent) => {\n        if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return;\n\n        const radios = getSlottedRadios().filter((el) => !el.hasAttribute('disabled'));\n\n        if (!radios.length) return;\n\n        const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n        if (focused === -1) return;\n\n        e.preventDefault();\n\n        const next =\n          e.key === 'ArrowDown' || e.key === 'ArrowRight'\n            ? (focused + 1) % radios.length\n            : (focused - 1 + radios.length) % radios.length;\n\n        radios[next].focus();\n        selectRadio(radios[next].getAttribute('value') ?? '', e);\n      });\n\n      handle(host, 'change', (e: Event) => {\n        if (e.target === host) return;\n\n        e.stopPropagation();\n        selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n      });\n    });\n\n    const legendId = createId('radio-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = computed(() => Boolean(props.error.value));\n    const hasHelper = computed(() => Boolean(props.helper.value) && !hasError.value);\n\n    return html`\n      <fieldset\n        role=\"radiogroup\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError.value)}\"\n        aria-errormessage=\"${() => (hasError.value ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError.value ? errorId : hasHelper.value ? helperId : null)}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${() => props.label.value}${() => (props.required.value ? html`<span aria-hidden=\"true\"> *</span>` : '')}\n        </legend>\n        <div class=\"radio-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div class=\"error-text\" id=\"${errorId}\" role=\"alert\" ?hidden=${() => !hasError.value}>\n          ${() => props.error.value}\n        </div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper.value}>${() => props.helper.value}</div>\n      </fieldset>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin(), componentStyles],\n  tag: 'bit-radio-group',\n});\n"],"mappings":"6hBAoCA,IAAa,GAAA,EAAA,EAAA,eAAmD,oBAAoB,CAqDvE,GAAA,EAAA,EAAA,iBAA2E,CACtF,MAAO,CACL,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,SAAU,CAAE,QAAS,GAAO,CAC5B,MAAO,CAAE,QAAS,GAAI,CACtB,OAAQ,CAAE,QAAS,GAAI,CACvB,MAAO,CAAE,QAAS,GAAI,CACtB,KAAM,CAAE,QAAS,GAAI,CACrB,YAAa,CAAE,QAAS,WAAY,CACpC,SAAU,CAAE,QAAS,GAAO,CAC5B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,MAAO,CAAE,QAAS,GAAI,CACvB,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,CAC3B,IAAM,GAAA,EAAA,EAAA,QAAuB,GAAG,EAEhC,EAAA,EAAA,OACE,EAAM,MACL,GAAM,CACL,EAAc,MAAS,GAA4B,IAErD,CAAE,UAAW,GAAM,CACpB,CAED,IAAM,MAAwC,MAAM,KAAK,EAAK,qBAAqB,YAAY,CAAC,CAE1F,EAAoB,GACV,GAAkB,CAAC,KAAM,IAAQ,EAAG,aAAa,QAAQ,EAAI,MAAQ,EAAM,EAE3E,aAAa,QAAQ,OAAQ,IAAI,CAAC,MAAM,EAAI,EAGtD,GAAe,EAAa,IAA0B,CAC1D,EAAc,MAAQ,EAEtB,IAAM,EAAS,EAAM,CAAC,EAAiB,EAAI,CAAC,CAAG,EAAE,CAGjD,EAAK,SAAU,EAAA,yBAFA,EAAM,CAAC,EAAI,CAAG,EAAE,CAEiB,EAAQ,EAAc,CAAC,EAKzE,EAAA,qBAAqB,GAAA,EAAA,EAAA,QAFE,EAAA,SAAU,IAAA,GAAU,CAEP,EAAM,EAE1C,EAAA,EAAA,SAAQ,EAAiB,CACvB,MAAO,EAAM,MACb,UAAA,EAAA,EAAA,cAAyB,EAAQ,EAAM,SAAS,MAAO,CACvD,KAAM,EAAM,KACZ,OAAQ,EACR,KAAM,EAAM,KACZ,MAAO,EACR,CAAC,CAIF,IAAM,MAAqB,CACzB,IAAK,IAAM,KAAS,GAAkB,EACxB,EAAM,aAAa,QAAQ,EAAI,MAE/B,EAAc,MAAO,EAAM,aAAa,UAAW,GAAG,CAC7D,EAAM,gBAAgB,UAAU,CAEjC,EAAM,KAAK,OAAO,EAAM,aAAa,OAAQ,EAAM,KAAK,MAAM,CAE9D,EAAM,MAAM,MAAO,EAAM,aAAa,QAAS,EAAM,MAAM,MAAM,CAChE,EAAM,gBAAgB,QAAQ,CAE/B,EAAM,KAAK,MAAO,EAAM,aAAa,OAAQ,EAAM,KAAK,MAAM,CAC7D,EAAM,gBAAgB,OAAO,CAE9B,EAAM,SAAS,MAAO,EAAM,aAAa,WAAY,GAAG,CACvD,EAAM,gBAAgB,WAAW,GAI1C,EAAA,EAAA,aAAc,EACZ,EAAA,EAAA,cAAa,UAAW,EAAa,CAErC,GAAc,EACd,EAAA,EAAA,QAAO,EAAa,EAGpB,EAAA,EAAA,YAAa,CACX,IAAM,EAAS,GAAkB,CAC7B,EAAe,GAEnB,IAAK,IAAM,KAAS,EACC,EAAM,aAAa,QAAQ,GAAK,EAAc,OAE/C,CAAC,EAAM,SAAS,OAChC,EAAM,aAAa,WAAY,IAAI,CACnC,EAAe,IAEf,EAAM,aAAa,WAAY,KAAK,CAKxC,GAAI,CAAC,GAAgB,EAAO,OAAS,EAAG,CACtC,IAAM,EAAQ,EAAO,KAAM,GAAM,CAAC,EAAE,aAAa,WAAW,CAAC,CAEzD,GAAO,EAAM,aAAa,WAAY,IAAI,GAEhD,EAGF,EAAA,EAAA,QAAO,EAAM,UAAY,GAAqB,CAC5C,GAAI,CAAC,CAAC,UAAW,YAAa,YAAa,aAAa,CAAC,SAAS,EAAE,IAAI,CAAE,OAE1E,IAAM,EAAS,GAAkB,CAAC,OAAQ,GAAO,CAAC,EAAG,aAAa,WAAW,CAAC,CAE9E,GAAI,CAAC,EAAO,OAAQ,OAEpB,IAAM,EAAU,EAAO,QAAQ,SAAS,cAA6B,CAErE,GAAI,IAAY,GAAI,OAEpB,EAAE,gBAAgB,CAElB,IAAM,EACJ,EAAE,MAAQ,aAAe,EAAE,MAAQ,cAC9B,EAAU,GAAK,EAAO,QACtB,EAAU,EAAI,EAAO,QAAU,EAAO,OAE7C,EAAO,GAAM,OAAO,CACpB,EAAY,EAAO,GAAM,aAAa,QAAQ,EAAI,GAAI,EAAE,EACxD,EAEF,EAAA,EAAA,QAAO,EAAM,SAAW,GAAa,CAC/B,EAAE,SAAW,IAEjB,EAAE,iBAAiB,CACnB,EAAa,EAAE,OAAuB,aAAa,QAAQ,EAAI,GAAI,EAAE,GACrE,EACF,CAEF,IAAM,GAAA,EAAA,EAAA,UAAoB,qBAAqB,CACzC,EAAU,GAAG,EAAS,QACtB,EAAW,GAAG,EAAS,SACvB,GAAA,EAAA,EAAA,cAA0B,EAAQ,EAAM,MAAM,MAAO,CACrD,GAAA,EAAA,EAAA,cAA2B,EAAQ,EAAM,OAAO,OAAU,CAAC,EAAS,MAAM,CAEhF,MAAO,GAAA,IAAI;;;6BAGgB,OAAO,EAAQ,EAAM,SAAS,MAAO,CAAC;4BACvC,OAAO,EAAS,MAAM,CAAC;iCACjB,EAAS,MAAQ,EAAU,KAAM;gCAClC,EAAS,MAAQ,EAAU,EAAU,MAAQ,EAAW,KAAM;sBAC3E,EAAS,gBAAkB,CAAC,EAAM,MAAM,MAAM;gBAClD,EAAM,MAAM,YAAe,EAAM,SAAS,MAAQ,EAAA,IAAI,qCAAuC,GAAI;;;;;sCAK7E,EAAQ,6BAA+B,CAAC,EAAS,MAAM;gBAC3E,EAAM,MAAM,MAAM;;uCAEG,EAAS,gBAAkB,CAAC,EAAU,MAAM,OAAS,EAAM,OAAO,MAAM;;OAI7G,OAAQ,CAAC,EAAA,gBAAiB,EAAA,kBAAkB,CAAE,EAAA,oBAAoB,CAAE,EAAA,QAAgB,CACpF,IAAK,kBACN,CAAC"}

package/dist/radio-group.js

@@ -0,0 +1,104 @@
+import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
+import { disabledStateMixin as t } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as n } from "./styles/mixins/theme.css.js";
+import "./styles/index.js";
+import { createChoiceChangeDetail as r } from "./inputs/shared/utils/choice-change.js";
+import { FORM_CTX as i } from "./inputs/shared/form-context.js";
+import { mountFormContextSync as a } from "./inputs/shared/dom-sync/form-context.js";
+import "./inputs/shared/dom-sync/index.js";
+import o from "./inputs/radio-group/radio-group.css?inline.js";
+import { computed as s, createContext as c, createId as l, defineComponent as u, effect as d, handle as f, html as p, inject as m, onMount as h, onSlotChange as g, provide as _, signal as v, watch as y } from "@vielzeug/craftit";
+//#region src/inputs/radio-group/radio-group.ts
+var b = c("RadioGroupContext"), x = u({
+	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 = v("");
+		y(n.value, (e) => {
+			o.value = e ?? "";
+		}, { immediate: !0 });
+		let c = () => Array.from(t.getElementsByTagName("bit-radio")), u = (e) => c().find((t) => (t.getAttribute("value") ?? "") === e)?.textContent?.replace(/\s+/g, " ").trim() || e, x = (t, n) => {
+			o.value = t;
+			let i = t ? [u(t)] : [];
+			e("change", r(t ? [t] : [], i, n));
+		};
+		a(t, m(i, void 0), n), _(b, {
+			color: n.color,
+			disabled: s(() => !!n.disabled.value),
+			name: n.name,
+			select: x,
+			size: n.size,
+			value: o
+		});
+		let S = () => {
+			for (let e of c()) (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");
+		};
+		h(() => {
+			g("default", S), S(), d(S), d(() => {
+				let e = c(), 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");
+				}
+			}), f(t, "keydown", (e) => {
+				if (![
+					"ArrowUp",
+					"ArrowDown",
+					"ArrowLeft",
+					"ArrowRight"
+				].includes(e.key)) return;
+				let t = c().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(), x(t[r].getAttribute("value") ?? "", e);
+			}), f(t, "change", (e) => {
+				e.target !== t && (e.stopPropagation(), x(e.target.getAttribute("value") ?? "", e));
+			});
+		});
+		let C = l("radio-group-legend"), w = `${C}-error`, T = `${C}-helper`, E = s(() => !!n.error.value), D = s(() => !!n.helper.value && !E.value);
+		return p`
+      <fieldset
+        role="radiogroup"
+        aria-required="${() => String(!!n.required.value)}"
+        aria-invalid="${() => String(E.value)}"
+        aria-errormessage="${() => E.value ? w : null}"
+        aria-describedby="${() => E.value ? w : D.value ? T : null}">
+        <legend id="${C}" ?hidden=${() => !n.label.value}>
+          ${() => n.label.value}${() => n.required.value ? p`<span aria-hidden="true"> *</span>` : ""}
+        </legend>
+        <div class="radio-group-items" part="items">
+          <slot></slot>
+        </div>
+        <div class="error-text" id="${w}" role="alert" ?hidden=${() => !E.value}>
+          ${() => n.error.value}
+        </div>
+        <div class="helper-text" id="${T}" ?hidden=${() => !D.value}>${() => n.helper.value}</div>
+      </fieldset>
+    `;
+	},
+	styles: [
+		n,
+		e(),
+		t(),
+		o
+	],
+	tag: "bit-radio-group"
+});
+//#endregion
+export { b as RADIO_GROUP_CTX, x as RADIO_GROUP_TAG };
+
+//# sourceMappingURL=radio-group.js.map

package/dist/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n  computed,\n  createContext,\n  createId,\n  defineComponent,\n  effect,\n  handle,\n  html,\n  inject,\n  onMount,\n  onSlotChange,\n  provide,\n  type ReadonlySignal,\n  signal,\n  watch,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport { createChoiceChangeDetail, type ChoiceChangeDetail } from '../shared/utils';\nimport componentStyles from './radio-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type RadioGroupContext = {\n  color: ReadonlySignal<ThemeColor | undefined>;\n  disabled: ReadonlySignal<boolean>;\n  name: ReadonlySignal<string | undefined>;\n  select: (value: string, originalEvent?: Event) => void;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  value: ReadonlySignal<string>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext>('RadioGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type BitRadioGroupProps = {\n  /** Theme color — propagated to all child bit-radio elements */\n  color?: ThemeColor;\n  /** Disable all radios in the group */\n  disabled?: boolean;\n  /** Error message shown below the group */\n  error?: string;\n  /** Helper text shown below the group */\n  helper?: string;\n  /** Legend / label for the fieldset. Required for accessibility. */\n  label?: string;\n  /** Form field name — propagated to all child bit-radio elements */\n  name?: string;\n  /** Layout direction of the radio options */\n  orientation?: 'vertical' | 'horizontal';\n  /** Mark the group as required */\n  required?: boolean;\n  /** Size — propagated to all child bit-radio elements */\n  size?: ComponentSize;\n  /** Currently selected value */\n  value?: string;\n};\n\nexport type BitRadioGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `bit-radio` elements, provides shared\n * `name`, `color`, and `size` via context, and manages roving tabindex\n * keyboard navigation.\n *\n * @element bit-radio-group\n *\n * @attr {string} label - Legend text (required for a11y)\n * @attr {string} value - Currently selected value\n * @attr {string} name - Form field name (propagated to all bit-radio children)\n * @attr {boolean} disabled - Disable all radios in the group\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} color - Theme color\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `bit-radio` elements here\n */\nexport const RADIO_GROUP_TAG = defineComponent<BitRadioGroupProps, BitRadioGroupEvents>({\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '' },\n    helper: { default: '' },\n    label: { default: '' },\n    name: { default: '' },\n    orientation: { default: 'vertical' },\n    required: { default: false },\n    size: { default: undefined },\n    value: { default: '' },\n  },\n  setup({ emit, host, props }) {\n    const selectedValue = signal('');\n\n    watch(\n      props.value,\n      (v) => {\n        selectedValue.value = (v as string | undefined) ?? '';\n      },\n      { immediate: true },\n    );\n\n    const getSlottedRadios = (): HTMLElement[] => Array.from(host.getElementsByTagName('bit-radio')) as HTMLElement[];\n\n    const getLabelForValue = (value: string): string => {\n      const radio = getSlottedRadios().find((el) => (el.getAttribute('value') ?? '') === value);\n\n      return radio?.textContent?.replace(/\\s+/g, ' ').trim() || value;\n    };\n\n    const selectRadio = (val: string, originalEvent?: Event) => {\n      selectedValue.value = val;\n\n      const labels = val ? [getLabelForValue(val)] : [];\n      const values = val ? [val] : [];\n\n      emit('change', createChoiceChangeDetail(values, labels, originalEvent));\n    };\n\n    const formCtx = inject(FORM_CTX, undefined);\n\n    mountFormContextSync(host, formCtx, props);\n\n    provide(RADIO_GROUP_CTX, {\n      color: props.color,\n      disabled: computed(() => Boolean(props.disabled.value)),\n      name: props.name,\n      select: selectRadio,\n      size: props.size,\n      value: selectedValue,\n    });\n\n    // Sync name/color/size/disabled onto slotted bit-radio children.\n    // Checked state is handled reactively inside bit-radio via group context.\n    const syncChildren = () => {\n      for (const radio of getSlottedRadios()) {\n        const val = radio.getAttribute('value') ?? '';\n\n        if (val === selectedValue.value) radio.setAttribute('checked', '');\n        else radio.removeAttribute('checked');\n\n        if (props.name.value) radio.setAttribute('name', props.name.value);\n\n        if (props.color.value) radio.setAttribute('color', props.color.value);\n        else radio.removeAttribute('color');\n\n        if (props.size.value) radio.setAttribute('size', props.size.value);\n        else radio.removeAttribute('size');\n\n        if (props.disabled.value) radio.setAttribute('disabled', '');\n        else radio.removeAttribute('disabled');\n      }\n    };\n\n    onMount(() => {\n      onSlotChange('default', syncChildren);\n      // Apply group props to already-slotted radios on first mount.\n      syncChildren();\n      effect(syncChildren);\n\n      // Roving tabindex: only the selected (or first) radio is tabbable\n      effect(() => {\n        const radios = getSlottedRadios();\n        let hasFocusable = false;\n\n        for (const radio of radios) {\n          const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n          if (isSelected && !props.disabled.value) {\n            radio.setAttribute('tabindex', '0');\n            hasFocusable = true;\n          } else {\n            radio.setAttribute('tabindex', '-1');\n          }\n        }\n\n        // If nothing is selected, make the first non-disabled radio tabbable\n        if (!hasFocusable && radios.length > 0) {\n          const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n          if (first) first.setAttribute('tabindex', '0');\n        }\n      });\n\n      // Arrow-key navigation within the group\n      handle(host, 'keydown', (e: KeyboardEvent) => {\n        if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return;\n\n        const radios = getSlottedRadios().filter((el) => !el.hasAttribute('disabled'));\n\n        if (!radios.length) return;\n\n        const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n        if (focused === -1) return;\n\n        e.preventDefault();\n\n        const next =\n          e.key === 'ArrowDown' || e.key === 'ArrowRight'\n            ? (focused + 1) % radios.length\n            : (focused - 1 + radios.length) % radios.length;\n\n        radios[next].focus();\n        selectRadio(radios[next].getAttribute('value') ?? '', e);\n      });\n\n      handle(host, 'change', (e: Event) => {\n        if (e.target === host) return;\n\n        e.stopPropagation();\n        selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n      });\n    });\n\n    const legendId = createId('radio-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = computed(() => Boolean(props.error.value));\n    const hasHelper = computed(() => Boolean(props.helper.value) && !hasError.value);\n\n    return html`\n      <fieldset\n        role=\"radiogroup\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError.value)}\"\n        aria-errormessage=\"${() => (hasError.value ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError.value ? errorId : hasHelper.value ? helperId : null)}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${() => props.label.value}${() => (props.required.value ? html`<span aria-hidden=\"true\"> *</span>` : '')}\n        </legend>\n        <div class=\"radio-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div class=\"error-text\" id=\"${errorId}\" role=\"alert\" ?hidden=${() => !hasError.value}>\n          ${() => props.error.value}\n        </div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper.value}>${() => props.helper.value}</div>\n      </fieldset>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin(), componentStyles],\n  tag: 'bit-radio-group',\n});\n"],"mappings":"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"}

package/dist/radio.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`),t=require(`./styles/mixins/shape.css.cjs`),n=require(`./styles/index.cjs`),r=require(`./craftit/dist/labs/a11y.cjs`),i=require(`./craftit/dist/labs/selectable.cjs`);require(`./craftit/dist/labs.cjs`);const a=require(`./inputs/shared/form-context.cjs`),o=require(`./inputs/shared/dom-sync/form-context.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const s=require(`./inputs/shared/design-presets.cjs`),c=require(`./radio-group.cjs`),l=require(`./inputs/radio/radio.css?inline.cjs`);let u=require(`@vielzeug/craftit`);var d=(0,u.defineComponent)({formAssociated:!0,props:{checked:{default:!1},color:{default:void 0},disabled:{default:!1},error:{default:``},helper:{default:``},name:{default:``},size:{default:void 0},value:{default:``}},setup({emit:e,host:t,props:n,reflect:s}){let l=(0,u.inject)(c.RADIO_GROUP_CTX,void 0),d=(0,u.inject)(a.FORM_CTX,void 0),f=(0,u.computed)(()=>l?.name.value||n.name.value||``),p=(0,u.computed)(()=>l?.size.value??n.size.value),m=(0,u.computed)(()=>l?.color.value??n.color.value),h=(0,u.computed)(()=>!!(l?.disabled.value||n.disabled.value));o.mountFormContextSync(t,d,n);let g=(0,u.signal)(!!n.checked.value);l?(0,u.watch)((0,u.computed)(()=>l.value.value===n.value.value),e=>{g.value=e},{immediate:!0}):(0,u.watch)(n.checked,e=>{g.value=!!e},{immediate:!0});let _=i.t({checked:g,disabled:n.disabled,onToggle:t=>{e(`change`,{checked:_.checked.value,fieldValue:n.value.value??``,originalEvent:t,value:_.checked.value})},value:n.value});(0,u.defineField)({disabled:h,toFormValue:e=>e,value:(0,u.computed)(()=>g.value?n.value.value??``:null)},{onReset:()=>{g.value=!!n.checked.value}});let v=()=>{let e=f.value;return e?Array.from(document.querySelectorAll(`bit-radio[name="${e}"]`)).filter(e=>!e.hasAttribute(`disabled`)):[]},y=r.r(t,{checked:()=>_.checked.value?`true`:`false`,helperText:()=>n.error.value||n.helper.value,helperTone:()=>n.error.value?`error`:`default`,invalid:()=>!!n.error.value,role:`radio`});return s({checked:()=>_.checked.value,classMap:()=>({"is-checked":_.checked.value,"is-disabled":h.value}),color:()=>m.value,disabled:()=>h.value?!0:void 0,name:()=>f.value||void 0,onClick:e=>{if(!h.value)if(l)l.select(n.value.value??``,e);else{if(!f.value)return;if(!_.checked.value){let r=n.name.value;document.querySelectorAll(`bit-radio[name="${r}"]`).forEach(e=>{e!==t&&e.removeAttribute(`checked`)}),_.toggle(e)}}},onKeydown:e=>{let r=e,i=v();if(i.length===0)return;let a=i.indexOf(t);if(a!==-1){if(r.key===` `||r.key===`Enter`)r.preventDefault(),_.checked.value||(l?l.select(n.value.value??``,r):_.toggle(r));else if(r.key===`ArrowDown`||r.key===`ArrowRight`){r.preventDefault();let e=i[(a+1)%i.length];e.focus(),l?l.select(e.getAttribute(`value`)??``):e.click()}else if(r.key===`ArrowUp`||r.key===`ArrowLeft`){r.preventDefault();let e=i[a===0?i.length-1:a-1];e.focus(),l?l.select(e.getAttribute(`value`)??``):e.click()}}},size:()=>p.value,tabindex:()=>{if(!h.value)return _.checked.value?0:-1}}),u.html`
+      <div class="radio-wrapper" part="radio">
+        <div class="circle" part="circle">
+          <div class="dot" part="dot"></div>
+        </div>
+      </div>
+      <span class="label" part="label" data-a11y-label id="${y.labelId}"><slot></slot></span>
+      <div
+        class="helper-text"
+        part="helper-text"
+        data-a11y-helper
+        id="${y.helperId}"
+        aria-live="polite"
+        hidden></div>
+    `},styles:[...n.formControlMixins,e.coarsePointerMixin,t.sizeVariantMixin(s.CONTROL_SIZE_PRESET),l.default],tag:`bit-radio`});exports.RADIO_TAG=d;
+//# sourceMappingURL=radio.cjs.map