@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/radio.js

@@ -1,135 +1,139 @@
-import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
-import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
-import { formControlMixins as n } from "./styles/index.js";
-import { r } from "./craftit/dist/labs/a11y.js";
-import { t as i } from "./craftit/dist/labs/selectable.js";
-import "./craftit/dist/labs.js";
-import { FORM_CTX as a } from "./inputs/shared/form-context.js";
-import { mountFormContextSync as o } from "./inputs/shared/dom-sync/form-context.js";
+import { disablableBundle as e, sizableBundle as t, themableBundle as n } from "./inputs/shared/bundles.js";
+import { coarsePointerMixin as r } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as i } from "./styles/mixins/shape.css.js";
+import { formControlMixins as a } from "./styles/index.js";
+import { r as o } from "./packages/craftit/dist/controls/checkable-control.js";
+import { n as s } from "./packages/craftit/dist/controls/list-control.js";
+import { n as c } from "./packages/craftit/dist/controls/list-key-control.js";
+import "./packages/craftit/dist/controls.js";
+import { FORM_CTX as l } from "./inputs/shared/form-context.js";
+import { mountFormContextSync as u } from "./inputs/shared/dom-sync/form-context.js";
 import "./inputs/shared/dom-sync/index.js";
-import { CONTROL_SIZE_PRESET as s } from "./inputs/shared/design-presets.js";
-import { RADIO_GROUP_CTX as c } from "./radio-group.js";
-import l from "./inputs/radio/radio.css?inline.js";
-import { computed as u, defineComponent as d, defineField as f, html as p, inject as m, signal as h, watch as g } from "@vielzeug/craftit";
-//#region src/inputs/radio/radio.ts
-var _ = d({
+import { CONTROL_SIZE_PRESET as d } from "./inputs/shared/design-presets.js";
+import { RADIO_GROUP_CTX as f } from "./radio-group.js";
+import p from "./inputs/radio/radio.css?inline.js";
+import { computed as m, define as h, html as g, inject as _ } from "@vielzeug/craftit";
+var v = h("bit-radio", {
 	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: "" }
+		...n,
+		...t,
+		...e,
+		checked: !1,
+		error: "",
+		helper: "",
+		name: "",
+		value: ""
 	},
-	setup({ emit: e, host: t, props: n, reflect: s }) {
-		let l = m(c, void 0), d = m(a, void 0), _ = u(() => l?.name.value || n.name.value || ""), v = u(() => l?.size.value ?? n.size.value), y = u(() => l?.color.value ?? n.color.value), b = u(() => !!(l?.disabled.value || n.disabled.value));
-		o(t, d, n);
-		let x = h(!!n.checked.value);
-		l ? g(u(() => l.value.value === n.value.value), (e) => {
-			x.value = e;
-		}, { immediate: !0 }) : g(n.checked, (e) => {
-			x.value = !!e;
-		}, { immediate: !0 });
-		let S = i({
-			checked: x,
-			disabled: n.disabled,
+	setup({ emit: e, host: t, props: n }) {
+		let r = _(f, void 0), i = _(l, void 0), a = m(() => r?.name.value || n.name.value || ""), d = m(() => r?.size.value ?? n.size.value), p = m(() => r?.color.value ?? n.color.value), h = m(() => r ? r.value.value === n.value.value : !!n.checked.value), v = () => {
+			let e = a.value;
+			return e ? Array.from(document.querySelectorAll(`bit-radio[name="${e}"]`)).filter((e) => !e.hasAttribute("disabled")) : [];
+		}, y = (e, t) => {
+			if (r) {
+				r.select(e.getAttribute("value") ?? "", t);
+				return;
+			}
+			e.click();
+		}, b = (e) => {
+			if (!S.checked.value) {
+				if (r) {
+					r.select(n.value.value ?? "", e);
+					return;
+				}
+				S.toggle(e ?? new Event("change"));
+			}
+		}, { a11y: x, control: S, press: C } = o({
+			checked: h,
+			disabled: m(() => !!n.disabled.value || !!r?.disabled.value || !!i?.disabled.value),
+			error: n.error,
+			helper: n.helper,
+			host: t.el,
+			onPress: (e, t) => {
+				b(t);
+			},
 			onToggle: (t) => {
-				e("change", {
-					checked: S.checked.value,
-					fieldValue: n.value.value ?? "",
-					originalEvent: t,
-					value: S.checked.value
-				});
+				e("change", t);
 			},
+			prefix: "radio",
+			role: "radio",
+			validateOn: i?.validateOn,
 			value: n.value
 		});
-		f({
-			disabled: b,
-			toFormValue: (e) => e,
-			value: u(() => x.value ? n.value.value ?? "" : null)
-		}, { onReset: () => {
-			x.value = !!n.checked.value;
-		} });
-		let C = () => {
-			let e = _.value;
-			return e ? Array.from(document.querySelectorAll(`bit-radio[name="${e}"]`)).filter((e) => !e.hasAttribute("disabled")) : [];
-		}, w = r(t, {
-			checked: () => S.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({
+		return u(t.el, i, n), t.bind("class", () => ({
+			"is-checked": S.checked.value,
+			"is-disabled": S.disabled.value
+		})), t.bind("attr", {
 			checked: () => S.checked.value,
-			classMap: () => ({
-				"is-checked": S.checked.value,
-				"is-disabled": b.value
-			}),
-			color: () => y.value,
-			disabled: () => b.value ? !0 : void 0,
-			name: () => _.value || void 0,
-			onClick: (e) => {
-				if (!b.value) if (l) l.select(n.value.value ?? "", e);
+			color: () => p.value,
+			disabled: () => S.disabled.value ? !0 : void 0,
+			name: () => a.value || void 0,
+			size: () => d.value,
+			tabindex: () => {
+				if (!S.disabled.value) return S.checked.value ? 0 : -1;
+			}
+		}), t.bind("on", {
+			click: (e) => {
+				if (!S.disabled.value) if (r) r.select(n.value.value ?? "", e);
 				else {
-					if (!_.value) return;
+					if (!a.value) return;
 					if (!S.checked.value) {
 						let r = n.name.value;
 						document.querySelectorAll(`bit-radio[name="${r}"]`).forEach((e) => {
-							e !== t && e.removeAttribute("checked");
+							e !== t.el && e.removeAttribute("checked");
 						}), S.toggle(e);
 					}
 				}
 			},
-			onKeydown: (e) => {
-				let r = e, i = C();
-				if (i.length === 0) return;
-				let a = i.indexOf(t);
-				if (a !== -1) {
-					if (r.key === " " || r.key === "Enter") r.preventDefault(), S.checked.value || (l ? l.select(n.value.value ?? "", r) : S.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();
+			keydown: (e) => {
+				let n = v();
+				if (n.length === 0) return;
+				let r = n.indexOf(t.el);
+				if (r === -1) return;
+				let i = s({
+					getIndex: () => r,
+					getItems: () => n,
+					loop: !0,
+					setIndex: (e) => {
+						r = e, n[e]?.focus();
 					}
-				}
-			},
-			size: () => v.value,
-			tabindex: () => {
-				if (!b.value) return S.checked.value ? 0 : -1;
+				});
+				C.handleKeydown(e) || c({
+					control: i,
+					keys: {
+						next: ["ArrowDown", "ArrowRight"],
+						prev: ["ArrowUp", "ArrowLeft"]
+					},
+					onInvoke: (e, t, i) => {
+						let a = n[r];
+						a && y(a, i);
+					}
+				}).handleKeydown(e);
 			}
-		}), p`
+		}), g`
       <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="${w.labelId}"><slot></slot></span>
+      <span class="label" part="label" data-a11y-label id="${x.labelId}"><slot></slot></span>
       <div
         class="helper-text"
         part="helper-text"
         data-a11y-helper
-        id="${w.helperId}"
+        id="${x.helperId}"
         aria-live="polite"
         hidden></div>
     `;
 	},
 	styles: [
-		...n,
-		e,
-		t(s),
-		l
-	],
-	tag: "bit-radio"
+		...a,
+		r,
+		i(d),
+		p
+	]
 });
 //#endregion
-export { _ as RADIO_TAG };
+export { v as RADIO_TAG };
 
 //# sourceMappingURL=radio.js.map

package/dist/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { computed, defineComponent, defineField, html, inject, signal, watch } from '@vielzeug/craftit';\nimport { useA11yControl, createCheckableControl } from '@vielzeug/craftit/labs';\n\nimport type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { coarsePointerMixin, formControlMixins, sizeVariantMixin } from '../../styles';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { CONTROL_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type BitRadioEvents = {\n  change: { checked: boolean; fieldValue: string; originalEvent?: Event; value: boolean };\n};\n\nexport type BitRadioProps = CheckableProps &\n  ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Error message (marks field as invalid) */\n    error?: string;\n    /** Helper text displayed below the radio */\n    helper?: string;\n  };\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element bit-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires change - Emitted when radio is selected. detail: { value: boolean, checked: boolean, fieldValue: string, originalEvent?: Event }\n *\n * @slot - Radio button label text\n *\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n */\nexport const RADIO_TAG = defineComponent<BitRadioProps, BitRadioEvents>({\n  formAssociated: true,\n  props: {\n    checked: { default: false },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '' },\n    helper: { default: '' },\n    name: { default: '' },\n    size: { default: undefined },\n    value: { default: '' },\n  },\n  setup({ emit, host, props, reflect }) {\n    const groupCtx = inject(RADIO_GROUP_CTX, undefined);\n    const formCtx = inject(FORM_CTX, undefined);\n\n    const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n    const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n    const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n    const effectiveDisabled = computed(() => Boolean(groupCtx?.disabled.value || props.disabled.value));\n\n    mountFormContextSync(host, formCtx, props);\n\n    // Local signal — source of truth for checked state.\n    // Driven by group context when inside a radio-group, otherwise by the checked prop.\n    const checkedSignal = signal(Boolean(props.checked.value));\n\n    if (groupCtx) {\n      watch(\n        computed(() => groupCtx.value.value === props.value.value),\n        (isChecked) => {\n          checkedSignal.value = isChecked;\n        },\n        { immediate: true },\n      );\n    } else {\n      watch(\n        props.checked,\n        (v) => {\n          checkedSignal.value = Boolean(v);\n        },\n        { immediate: true },\n      );\n    }\n\n    const control = createCheckableControl({\n      checked: checkedSignal,\n      disabled: props.disabled,\n      onToggle: (e) => {\n        emit('change', {\n          checked: control.checked.value,\n          fieldValue: props.value.value ?? '',\n          originalEvent: e,\n          value: control.checked.value,\n        });\n      },\n      value: props.value,\n    });\n\n    defineField(\n      {\n        disabled: effectiveDisabled,\n        toFormValue: (v: string | null) => v,\n        value: computed(() => (checkedSignal.value ? (props.value.value ?? '') : null)),\n      },\n      {\n        onReset: () => {\n          checkedSignal.value = Boolean(props.checked.value);\n        },\n      },\n    );\n\n    const getRadioGroup = (): HTMLElement[] => {\n      const radioName = effectiveName.value;\n\n      if (!radioName) return [];\n\n      return Array.from(document.querySelectorAll<HTMLElement>(`bit-radio[name=\"${radioName}\"]`)).filter(\n        (r) => !r.hasAttribute('disabled'),\n      );\n    };\n\n    const a11y = useA11yControl(host, {\n      checked: () => (control.checked.value ? 'true' : 'false'),\n      helperText: () => props.error.value || props.helper.value,\n      helperTone: () => (props.error.value ? 'error' : 'default'),\n      invalid: () => !!props.error.value,\n      role: 'radio',\n    });\n\n    reflect({\n      checked: () => control.checked.value,\n      classMap: () => ({\n        'is-checked': control.checked.value,\n        'is-disabled': effectiveDisabled.value,\n      }),\n      color: () => effectiveColor.value,\n      disabled: () => (effectiveDisabled.value ? true : undefined),\n      name: () => effectiveName.value || undefined,\n      onClick: (e: Event) => {\n        if (effectiveDisabled.value) return;\n\n        if (groupCtx) {\n          groupCtx.select(props.value.value ?? '', e);\n        } else {\n          // For non-grouped radios, require a name attribute\n          // (radios should be part of a group, either via radio-group or via name)\n          if (!effectiveName.value) return;\n\n          // Only toggle if not already checked\n          // (radio buttons can only be checked, never unchecked by clicking)\n          if (!control.checked.value) {\n            // Uncheck all other radios with the same name\n            const radioName = props.name.value;\n            const allRadios = document.querySelectorAll<HTMLElement>(`bit-radio[name=\"${radioName}\"]`);\n\n            allRadios.forEach((radio) => {\n              if (radio !== host) {\n                radio.removeAttribute('checked');\n              }\n            });\n\n            control.toggle(e);\n          }\n        }\n      },\n      onKeydown: (e: Event) => {\n        const ke = e as KeyboardEvent;\n        const radios = getRadioGroup();\n\n        if (radios.length === 0) return;\n\n        const currentIndex = radios.indexOf(host);\n\n        if (currentIndex === -1) return;\n\n        if (ke.key === ' ' || ke.key === 'Enter') {\n          ke.preventDefault();\n\n          if (!control.checked.value) {\n            if (groupCtx) {\n              groupCtx.select(props.value.value ?? '', ke);\n            } else {\n              control.toggle(ke);\n            }\n          }\n        } else if (ke.key === 'ArrowDown' || ke.key === 'ArrowRight') {\n          ke.preventDefault();\n\n          const nextIndex = (currentIndex + 1) % radios.length;\n          const nextRadio = radios[nextIndex];\n\n          nextRadio.focus();\n\n          if (groupCtx) {\n            groupCtx.select(nextRadio.getAttribute('value') ?? '');\n          } else {\n            // For non-grouped radios, trigger the select on the focused radio\n            nextRadio.click();\n          }\n        } else if (ke.key === 'ArrowUp' || ke.key === 'ArrowLeft') {\n          ke.preventDefault();\n\n          const prevIndex = currentIndex === 0 ? radios.length - 1 : currentIndex - 1;\n          const prevRadio = radios[prevIndex];\n\n          prevRadio.focus();\n\n          if (groupCtx) {\n            groupCtx.select(prevRadio.getAttribute('value') ?? '');\n          } else {\n            // For non-grouped radios, trigger the select on the focused radio\n            prevRadio.click();\n          }\n        }\n      },\n      size: () => effectiveSize.value,\n      tabindex: () => {\n        if (effectiveDisabled.value) return undefined;\n\n        return control.checked.value ? 0 : -1;\n      },\n    });\n\n    return html`\n      <div class=\"radio-wrapper\" part=\"radio\">\n        <div class=\"circle\" part=\"circle\">\n          <div class=\"dot\" part=\"dot\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" data-a11y-label id=\"${a11y.labelId}\"><slot></slot></span>\n      <div\n        class=\"helper-text\"\n        part=\"helper-text\"\n        data-a11y-helper\n        id=\"${a11y.helperId}\"\n        aria-live=\"polite\"\n        hidden></div>\n    `;\n  },\n  styles: [...formControlMixins, coarsePointerMixin, sizeVariantMixin(CONTROL_SIZE_PRESET), componentStyles],\n  tag: 'bit-radio',\n});\n"],"mappings":"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"}
+{"version":3,"file":"radio.js","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { define, computed, html, inject } from '@vielzeug/craftit';\nimport {\n  createCheckableFieldControl,\n  createListControl,\n  createListKeyControl,\n  type CheckableChangePayload,\n} from '@vielzeug/craftit/controls';\n\nimport type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { coarsePointerMixin, formControlMixins, sizeVariantMixin } from '../../styles';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { disablableBundle, sizableBundle, themableBundle, type PropBundle } from '../shared/bundles';\nimport { CONTROL_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type BitRadioEvents = {\n  change: CheckableChangePayload;\n};\n\nexport type BitRadioProps = CheckableProps &\n  ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Error message (marks field as invalid) */\n    error?: string;\n    /** Helper text displayed below the radio */\n    helper?: string;\n  };\n\nconst radioProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  checked: false,\n  error: '',\n  helper: '',\n  name: '',\n  value: '',\n} satisfies PropBundle<BitRadioProps>;\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element bit-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires change - Emitted when radio is selected. detail: { checked: boolean, fieldValue: string, originalEvent?: Event }\n *\n * @slot - Radio button label text\n *\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n */\nexport const RADIO_TAG = define<BitRadioProps, BitRadioEvents>('bit-radio', {\n  formAssociated: true,\n  props: radioProps,\n  setup({ emit, host, props }) {\n    const groupCtx = inject(RADIO_GROUP_CTX, undefined);\n    const formCtx = inject(FORM_CTX, undefined);\n\n    const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n    const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n    const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n    const checkedFromState = computed(() => {\n      if (groupCtx) return groupCtx.value.value === props.value.value;\n\n      return Boolean(props.checked.value);\n    });\n\n    const getRadioGroup = (): HTMLElement[] => {\n      const radioName = effectiveName.value;\n\n      if (!radioName) return [];\n\n      return Array.from(document.querySelectorAll<HTMLElement>(`bit-radio[name=\"${radioName}\"]`)).filter(\n        (r) => !r.hasAttribute('disabled'),\n      );\n    };\n\n    const selectRadio = (radio: HTMLElement, originalEvent?: Event): void => {\n      if (groupCtx) {\n        groupCtx.select(radio.getAttribute('value') ?? '', originalEvent);\n\n        return;\n      }\n\n      radio.click();\n    };\n\n    const activateSelf = (originalEvent?: Event): void => {\n      if (control.checked.value) return;\n\n      if (groupCtx) {\n        groupCtx.select(props.value.value ?? '', originalEvent);\n\n        return;\n      }\n\n      control.toggle(originalEvent ?? new Event('change'));\n    };\n\n    const checkable = createCheckableFieldControl({\n      checked: checkedFromState,\n      disabled: computed(\n        () => Boolean(props.disabled.value) || Boolean(groupCtx?.disabled.value) || Boolean(formCtx?.disabled.value),\n      ),\n      error: props.error,\n      helper: props.helper,\n      host: host.el,\n      onPress: (_control, originalEvent) => {\n        activateSelf(originalEvent);\n      },\n      onToggle: (payload) => {\n        emit('change', payload);\n      },\n      prefix: 'radio',\n      role: 'radio',\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n    const { a11y, control, press: pressControl } = checkable;\n\n    mountFormContextSync(host.el, formCtx, props);\n\n    host.bind('class', () => ({\n      'is-checked': control.checked.value,\n      'is-disabled': control.disabled.value,\n    }));\n    host.bind('attr', {\n      checked: () => control.checked.value,\n      color: () => effectiveColor.value,\n      disabled: () => (control.disabled.value ? true : undefined),\n      name: () => effectiveName.value || undefined,\n      size: () => effectiveSize.value,\n      tabindex: () => {\n        if (control.disabled.value) return undefined;\n\n        return control.checked.value ? 0 : -1;\n      },\n    });\n\n    host.bind('on', {\n      click: (e) => {\n        if (control.disabled.value) return;\n\n        if (groupCtx) {\n          groupCtx.select(props.value.value ?? '', e);\n        } else {\n          if (!effectiveName.value) return;\n\n          if (!control.checked.value) {\n            const radioName = props.name.value;\n            const allRadios = document.querySelectorAll<HTMLElement>(`bit-radio[name=\"${radioName}\"]`);\n\n            allRadios.forEach((radio) => {\n              if (radio !== host.el) radio.removeAttribute('checked');\n            });\n\n            control.toggle(e);\n          }\n        }\n      },\n      keydown: (e) => {\n        const radios = getRadioGroup();\n\n        if (radios.length === 0) return;\n\n        let activeIndex = radios.indexOf(host.el);\n\n        if (activeIndex === -1) return;\n\n        const listControl = createListControl({\n          getIndex: () => activeIndex,\n          getItems: () => radios,\n          loop: true,\n          setIndex: (index) => {\n            activeIndex = index;\n            radios[index]?.focus();\n          },\n        });\n\n        if (pressControl.handleKeydown(e)) return;\n\n        const radioListKeys = createListKeyControl({\n          control: listControl,\n          keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n          onInvoke: (_action, _result, event) => {\n            const nextRadio = radios[activeIndex];\n\n            if (nextRadio) selectRadio(nextRadio, event);\n          },\n        });\n\n        radioListKeys.handleKeydown(e);\n      },\n    });\n\n    return html`\n      <div class=\"radio-wrapper\" part=\"radio\">\n        <div class=\"circle\" part=\"circle\">\n          <div class=\"dot\" part=\"dot\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" data-a11y-label id=\"${a11y.labelId}\"><slot></slot></span>\n      <div\n        class=\"helper-text\"\n        part=\"helper-text\"\n        data-a11y-helper\n        id=\"${a11y.helperId}\"\n        aria-live=\"polite\"\n        hidden></div>\n    `;\n  },\n  styles: [...formControlMixins, coarsePointerMixin, sizeVariantMixin(CONTROL_SIZE_PRESET), componentStyles],\n});\n"],"mappings":"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"}

package/dist/rating.cjs

@@ -1,37 +1,27 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`),t=require(`./styles/mixins/shape.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const r=require(`./inputs/shared/form-context.cjs`),i=require(`./inputs/shared/dom-sync/form-context.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const a=require(`./inputs/shared/validation/index.cjs`),o=require(`./inputs/rating/rating.css?inline.cjs`);let s=require(`@vielzeug/craftit`);var c=`M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z`,l=(0,s.defineComponent)({formAssociated:!0,props:{color:(0,s.typed)(void 0),disabled:(0,s.typed)(!1),label:(0,s.typed)(`Rating`),max:(0,s.typed)(5),name:(0,s.typed)(void 0),readonly:(0,s.typed)(!1),size:(0,s.typed)(void 0),value:(0,s.typed)(0)},setup({emit:e,host:t,props:n}){let o=(0,s.inject)(r.FORM_CTX,void 0);i.mountFormContextSync(t,o,n);let l=(0,s.computed)(()=>{let e=Math.max(1,Number(n.max.value)||5),t=Number(n.value.value);return Math.min(e,Math.max(0,Number.isFinite(t)?t:0))}),{triggerValidation:u}=a.createFieldValidation(o,(0,s.defineField)({disabled:(0,s.computed)(()=>!!n.disabled.value),value:(0,s.computed)(()=>String(l.value||0))},{onReset:()=>{t.removeAttribute(`value`)}})),d=(0,s.signal)(null),f=(0,s.computed)(()=>d.value??l.value);function p(e){let n=t.shadowRoot?.querySelector(`.sparkle-layer`),r=t.shadowRoot?.querySelector(`[data-star="${e}"]`);if(!n||!r)return;let i=r.offsetLeft+r.offsetWidth/2,a=r.offsetTop+r.offsetHeight/2;for(let e=0;e<10;e++){let t=document.createElement(`span`),r=360/10*e+(Math.random()*30-15),o=18+Math.random()*20,s=3+Math.random()*4,c=380+Math.random()*220;t.className=`sparkle`,t.style.cssText=[`left:${i}px`,`top:${a}px`,`--_angle:${r}deg`,`--_dist:${o}px`,`width:${s}px`,`height:${s}px`,`--_dur:${c}ms`,`animation-delay:${Math.random()*60}ms`].join(`;`),n.appendChild(t),t.addEventListener(`animationend`,()=>t.remove(),{once:!0})}}function m(t,r){if(n.readonly.value||n.disabled.value)return;let i=Math.max(1,Number(n.max.value)||5),a=Math.min(i,Math.max(0,t));a!==l.value&&(n.value.value=a,e(`change`,{originalEvent:r,value:a}),u(`change`),p(a))}function h(e,r){let i=Number(n.max.value)||5;e.key===`ArrowRight`||e.key===`ArrowUp`?(e.preventDefault(),m(Math.min(i,r+1),e),(t.shadowRoot?.querySelector(`[data-star="${Math.min(i,r+1)}"]`))?.focus()):(e.key===`ArrowLeft`||e.key===`ArrowDown`)&&(e.preventDefault(),m(Math.max(1,r-1),e),(t.shadowRoot?.querySelector(`[data-star="${Math.max(1,r-1)}"]`))?.focus())}let g=(0,s.computed)(()=>{let e=Number(n.max.value)||5;return Array.from({length:e},(e,t)=>t+1)});return s.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./icon.cjs`);const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/accessibility.css.cjs`),n=require(`./styles/mixins/shape.css.cjs`),r=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const i=require(`./packages/craftit/dist/controls/internal/control-state.cjs`),a=require(`./packages/craftit/dist/controls/slider-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/rating/rating.css?inline.cjs`);let l=require(`@vielzeug/craftit`);var u={...e.themableBundle,...e.sizableBundle,...e.disablableBundle,label:`Rating`,max:5,name:void 0,readonly:!1,solid:!1,value:0},d=(0,l.define)(`bit-rating`,{formAssociated:!0,props:u,setup({emit:e,host:t,props:n}){let r=(0,l.inject)(o.FORM_CTX,void 0);s.mountFormContextSync(t.el,r,n);let c=(0,l.computed)(()=>{let e=Math.max(1,Number(n.max.value)||5),t=Number(n.value.value);return Math.min(e,Math.max(0,Number.isFinite(t)?t:0))}),u=(0,l.defineField)({disabled:(0,l.computed)(()=>!!n.disabled.value),value:(0,l.computed)(()=>String(c.value||0))},{onReset:()=>{n.value.value=0}}),{triggerValidation:d}=i.i(r?.validateOn,u),f=(0,l.computed)(()=>!n.readonly.value&&!n.disabled.value),p=(0,l.signal)(null),m=(0,l.computed)(()=>p.value??c.value),h=()=>[...t.shadowRoot?.querySelectorAll(`[data-star]`)??[]],g=a.i({max:()=>Number(n.max.value)||5,min:()=>1,step:()=>1});function _(e){let n=t.shadowRoot?.querySelector(`.sparkle-layer`),r=t.shadowRoot?.querySelector(`[data-star="${e}"]`);if(!n||!r)return;let i=r.offsetLeft+r.offsetWidth/2,a=r.offsetTop+r.offsetHeight/2;for(let e=0;e<10;e++){let t=document.createElement(`span`),r=360/10*e+(Math.random()*30-15),o=18+Math.random()*20,s=3+Math.random()*4,c=380+Math.random()*220;t.className=`sparkle`,t.style.cssText=[`left:${i}px`,`top:${a}px`,`--_angle:${r}deg`,`--_dist:${o}px`,`width:${s}px`,`height:${s}px`,`--_dur:${c}ms`,`animation-delay:${Math.random()*60}ms`].join(`;`),n.appendChild(t),t.addEventListener(`animationend`,()=>t.remove(),{once:!0})}}function v(t,r){if(!f.value)return;let i=Math.max(1,Number(n.max.value)||5),a=Math.min(i,Math.max(0,t));a!==c.value&&(n.value.value=a,e(`change`,{originalEvent:r,value:a}),d(`change`),_(a))}function y(e,t){let n=g.nextFromKey(e.key,t);n!=null&&(e.preventDefault(),v(n,e),h()[n-1]?.focus())}let b=(0,l.computed)(()=>{let e=Number(n.max.value)||5;return Array.from({length:e},(e,t)=>t+1)});return l.html`
       <div
         class="stars"
         part="stars"
         role="radiogroup"
         :aria-label="${()=>n.label.value}"
         :aria-required="${()=>null}">
-        ${()=>g.value.map(e=>s.html`<button
+        ${()=>b.value.map(e=>l.html`<button
                 class="star-btn"
                 part="star"
                 type="button"
                 role="radio"
                 :aria-label="${()=>`${e} ${e===1?`star`:`stars`}`}"
-                :aria-checked="${()=>String(e===l.value)}"
+                :aria-checked="${()=>String(e===c.value)}"
                 :data-star="${e}"
-                ?data-filled="${()=>e<=f.value}"
-                :disabled="${()=>n.disabled.value||n.readonly.value||null}"
-                @click="${t=>m(e,t)}"
-                @pointerenter="${()=>{!n.readonly.value&&!n.disabled.value&&(d.value=e)}}"
-                @pointerleave="${()=>{d.value=null}}"
-                @keydown="${t=>h(t,e)}">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                  fill="${()=>e<=f.value?`currentColor`:`none`}"
-                  stroke="currentColor"
-                  stroke-width="${()=>e<=f.value?0:1.5}"
-                  stroke-linecap="round"
-                  stroke-linejoin="round">
-                  <path d="${c}" />
-                </svg>
+                ?data-filled="${()=>e<=m.value}"
+                :disabled="${()=>f.value?null:!0}"
+                @click="${t=>v(e,t)}"
+                @pointerenter="${()=>{f.value&&(p.value=e)}}"
+                @pointerleave="${()=>{p.value=null}}"
+                @keydown="${t=>y(t,e)}">
+                <bit-icon name="star" size="var(--_star-size)" stroke-width="1.5" aria-hidden="true"></bit-icon>
               </button>`)}
         <div class="sparkle-layer"></div>
       </div>
-    `},styles:[n.colorThemeMixin,t.sizeVariantMixin({}),e.coarsePointerMixin,e.reducedMotionMixin,o.default],tag:`bit-rating`});exports.RATING_TAG=l;
+    `},styles:[r.colorThemeMixin,n.sizeVariantMixin({}),t.coarsePointerMixin,t.reducedMotionMixin,c.default]});exports.RATING_TAG=d;
 //# sourceMappingURL=rating.cjs.map

package/dist/rating.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"rating.cjs","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { computed, defineComponent, typed, defineField, html, inject, signal } from '@vielzeug/craftit';\n\nimport type { DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport { createFieldValidation } from '../shared/validation';\nimport styles from './rating.css?inline';\n\nconst FULL_STAR_PATH = 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z';\n\nexport type BitRatingEvents = {\n  change: { originalEvent?: Event; value: number };\n};\n\n/** Rating props */\nexport type BitRatingProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Accessible group label */\n    label?: string;\n    /** Maximum rating (number of stars) */\n    max?: number;\n    /** Form field name */\n    name?: string;\n    /** Make rating read-only */\n    readonly?: boolean;\n    /** Current rating value */\n    value?: number;\n  };\n\n/**\n * A star rating input.\n *\n * @element bit-rating\n *\n * @attr {number} value - Current rating value (default: 0)\n * @attr {number} max - Maximum number of stars (default: 5)\n * @attr {boolean} readonly - Read-only display mode\n * @attr {boolean} disabled - Disabled state\n * @attr {string} label - aria-label for the group (default: 'Rating')\n * @attr {string} color - Theme color for filled stars\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} name - Form field name\n *\n * @fires change - Emitted when value changes. detail: { value: number, originalEvent?: Event }\n *\n * @cssprop --rating-star-size - Star diameter\n * @cssprop --rating-color-empty - Empty star color\n * @cssprop --rating-color-filled - Filled star color\n * @cssprop --rating-gap - Gap between stars\n *\n * @example\n * ```html\n * <bit-rating value=\"3\" max=\"5\" color=\"warning\"></bit-rating>\n * ```\n */\nexport const RATING_TAG = defineComponent<BitRatingProps, BitRatingEvents>({\n  formAssociated: true,\n  props: {\n    color: typed<BitRatingProps['color']>(undefined),\n    disabled: typed<boolean>(false),\n    label: typed<string>('Rating'),\n    max: typed<number>(5),\n    name: typed<string | undefined>(undefined),\n    readonly: typed<boolean>(false),\n    size: typed<BitRatingProps['size']>(undefined),\n    value: typed<number>(0),\n  },\n  setup({ emit, host, props }) {\n    const formCtx = inject(FORM_CTX, undefined);\n\n    mountFormContextSync(host, formCtx, props);\n\n    const normalizedValue = computed(() => {\n      const max = Math.max(1, Number(props.max.value) || 5);\n      const raw = Number(props.value.value);\n      const safe = Number.isFinite(raw) ? raw : 0;\n\n      return Math.min(max, Math.max(0, safe));\n    });\n\n    const fd = defineField(\n      {\n        disabled: computed(() => Boolean(props.disabled.value)),\n        value: computed(() => String(normalizedValue.value || 0)),\n      },\n      {\n        onReset: () => {\n          host.removeAttribute('value');\n        },\n      },\n    );\n\n    const { triggerValidation } = createFieldValidation(formCtx, fd);\n\n    const hovered = signal<number | null>(null);\n    const displayValue = computed(() => hovered.value ?? normalizedValue.value);\n\n    function spawnSparkles(star: number) {\n      const layer = host.shadowRoot?.querySelector<HTMLElement>('.sparkle-layer');\n      const btn = host.shadowRoot?.querySelector<HTMLElement>(`[data-star=\"${star}\"]`);\n\n      if (!layer || !btn) return;\n\n      const cx = btn.offsetLeft + btn.offsetWidth / 2;\n      const cy = btn.offsetTop + btn.offsetHeight / 2;\n      const count = 10;\n\n      for (let i = 0; i < count; i++) {\n        const p = document.createElement('span');\n        const angle = (360 / count) * i + (Math.random() * 30 - 15);\n        const dist = 18 + Math.random() * 20;\n        const size = 3 + Math.random() * 4;\n        const dur = 380 + Math.random() * 220;\n\n        p.className = 'sparkle';\n        p.style.cssText = [\n          `left:${cx}px`,\n          `top:${cy}px`,\n          `--_angle:${angle}deg`,\n          `--_dist:${dist}px`,\n          `width:${size}px`,\n          `height:${size}px`,\n          `--_dur:${dur}ms`,\n          `animation-delay:${Math.random() * 60}ms`,\n        ].join(';');\n        layer.appendChild(p);\n        p.addEventListener('animationend', () => p.remove(), { once: true });\n      }\n    }\n    function select(star: number, originalEvent?: Event) {\n      if (props.readonly.value || props.disabled.value) return;\n\n      const max = Math.max(1, Number(props.max.value) || 5);\n      const nextValue = Math.min(max, Math.max(0, star));\n\n      if (nextValue === normalizedValue.value) return;\n\n      // Write through the reactive prop signal; craftit handles host reflection.\n      props.value.value = nextValue;\n      emit('change', { originalEvent, value: nextValue });\n      triggerValidation('change');\n      spawnSparkles(nextValue);\n    }\n    function handleKeydown(e: KeyboardEvent, star: number) {\n      const max = Number(props.max.value) || 5;\n\n      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n        e.preventDefault();\n        select(Math.min(max, star + 1), e);\n\n        const nextBtn = host.shadowRoot?.querySelector<HTMLButtonElement>(`[data-star=\"${Math.min(max, star + 1)}\"]`);\n\n        nextBtn?.focus();\n      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n        e.preventDefault();\n        select(Math.max(1, star - 1), e);\n\n        const prevBtn = host.shadowRoot?.querySelector<HTMLButtonElement>(`[data-star=\"${Math.max(1, star - 1)}\"]`);\n\n        prevBtn?.focus();\n      }\n    }\n\n    const stars = computed(() => {\n      const max = Number(props.max.value) || 5;\n\n      return Array.from({ length: max }, (_, i) => i + 1);\n    });\n\n    return html`\n      <div\n        class=\"stars\"\n        part=\"stars\"\n        role=\"radiogroup\"\n        :aria-label=\"${() => props.label.value}\"\n        :aria-required=\"${() => null}\">\n        ${() =>\n          stars.value.map(\n            (star) =>\n              html`<button\n                class=\"star-btn\"\n                part=\"star\"\n                type=\"button\"\n                role=\"radio\"\n                :aria-label=\"${() => `${star} ${star === 1 ? 'star' : 'stars'}`}\"\n                :aria-checked=\"${() => String(star === normalizedValue.value)}\"\n                :data-star=\"${star}\"\n                ?data-filled=\"${() => star <= displayValue.value}\"\n                :disabled=\"${() => props.disabled.value || props.readonly.value || null}\"\n                @click=\"${(e: Event) => select(star, e)}\"\n                @pointerenter=\"${() => {\n                  if (!props.readonly.value && !props.disabled.value) hovered.value = star;\n                }}\"\n                @pointerleave=\"${() => {\n                  hovered.value = null;\n                }}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, star)}\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  aria-hidden=\"true\"\n                  fill=\"${() => (star <= displayValue.value ? 'currentColor' : 'none')}\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"${() => (star <= displayValue.value ? 0 : 1.5)}\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <path d=\"${FULL_STAR_PATH}\" />\n                </svg>\n              </button>`,\n          )}\n        <div class=\"sparkle-layer\"></div>\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, reducedMotionMixin, styles],\n  tag: 'bit-rating',\n});\n"],"mappings":"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"}
+{"version":3,"file":"rating.cjs","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { define, computed, defineField, html, inject, signal } from '@vielzeug/craftit';\nimport { createSliderControl, createValidationControl } from '@vielzeug/craftit/controls';\n\nimport type { DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport { disablableBundle, sizableBundle, themableBundle, type PropBundle } from '../shared/bundles';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport styles from './rating.css?inline';\n\nexport type BitRatingEvents = {\n  change: { originalEvent?: Event; value: number };\n};\n\n/** Rating props */\nexport type BitRatingProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Accessible group label */\n    label?: string;\n    /** Maximum rating (number of stars) */\n    max?: number;\n    /** Form field name */\n    name?: string;\n    /** Make rating read-only */\n    readonly?: boolean;\n    /** Render selected stars as solid-filled instead of outline-only */\n    solid?: boolean;\n    /** Current rating value */\n    value?: number;\n  };\n\nconst ratingProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  label: 'Rating',\n  max: 5,\n  name: undefined,\n  readonly: false,\n  solid: false,\n  value: 0,\n} satisfies PropBundle<BitRatingProps>;\n\n/**\n * A star rating input.\n *\n * @element bit-rating\n *\n * @attr {number} value - Current rating value (default: 0)\n * @attr {number} max - Maximum number of stars (default: 5)\n * @attr {boolean} readonly - Read-only display mode\n * @attr {boolean} disabled - Disabled state\n * @attr {string} label - aria-label for the group (default: 'Rating')\n * @attr {string} color - Theme color for filled stars\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} name - Form field name\n * @attr {boolean} solid - Fill selected stars (outline remains default when omitted)\n *\n * @fires change - Emitted when value changes. detail: { value: number, originalEvent?: Event }\n *\n * @cssprop --rating-star-size - Star diameter\n * @cssprop --rating-color-empty - Empty star color\n * @cssprop --rating-color-filled - Filled star color\n * @cssprop --rating-gap - Gap between stars\n *\n * @example\n * ```html\n * <bit-rating value=\"3\" max=\"5\" color=\"warning\"></bit-rating>\n * <bit-rating value=\"4\" solid></bit-rating>\n * ```\n */\nexport const RATING_TAG = define<BitRatingProps, BitRatingEvents>('bit-rating', {\n  formAssociated: true,\n  props: ratingProps,\n  setup({ emit, host, props }) {\n    const formCtx = inject(FORM_CTX, undefined);\n\n    mountFormContextSync(host.el, formCtx, props);\n\n    const normalizedValue = computed(() => {\n      const max = Math.max(1, Number(props.max.value) || 5);\n      const raw = Number(props.value.value);\n      const safe = Number.isFinite(raw) ? raw : 0;\n\n      return Math.min(max, Math.max(0, safe));\n    });\n\n    const fd = defineField(\n      {\n        disabled: computed(() => Boolean(props.disabled.value)),\n        value: computed(() => String(normalizedValue.value || 0)),\n      },\n      {\n        onReset: () => {\n          props.value.value = 0;\n        },\n      },\n    );\n\n    const { triggerValidation } = createValidationControl(formCtx?.validateOn, fd);\n\n    const isInteractive = computed(() => !props.readonly.value && !props.disabled.value);\n    const hovered = signal<number | null>(null);\n    const displayValue = computed(() => hovered.value ?? normalizedValue.value);\n    const getStarButtons = () => {\n      return [...(host.shadowRoot?.querySelectorAll<HTMLButtonElement>('[data-star]') ?? [])];\n    };\n    const ratingControl = createSliderControl({\n      max: () => Number(props.max.value) || 5,\n      min: () => 1,\n      step: () => 1,\n    });\n\n    function spawnSparkles(star: number) {\n      const layer = host.shadowRoot?.querySelector<HTMLElement>('.sparkle-layer');\n      const btn = host.shadowRoot?.querySelector<HTMLElement>(`[data-star=\"${star}\"]`);\n\n      if (!layer || !btn) return;\n\n      const cx = btn.offsetLeft + btn.offsetWidth / 2;\n      const cy = btn.offsetTop + btn.offsetHeight / 2;\n      const count = 10;\n\n      for (let i = 0; i < count; i++) {\n        const p = document.createElement('span');\n        const angle = (360 / count) * i + (Math.random() * 30 - 15);\n        const dist = 18 + Math.random() * 20;\n        const size = 3 + Math.random() * 4;\n        const dur = 380 + Math.random() * 220;\n\n        p.className = 'sparkle';\n        p.style.cssText = [\n          `left:${cx}px`,\n          `top:${cy}px`,\n          `--_angle:${angle}deg`,\n          `--_dist:${dist}px`,\n          `width:${size}px`,\n          `height:${size}px`,\n          `--_dur:${dur}ms`,\n          `animation-delay:${Math.random() * 60}ms`,\n        ].join(';');\n        layer.appendChild(p);\n        p.addEventListener('animationend', () => p.remove(), { once: true });\n      }\n    }\n    function select(star: number, originalEvent?: Event) {\n      if (!isInteractive.value) return;\n\n      const max = Math.max(1, Number(props.max.value) || 5);\n      const nextValue = Math.min(max, Math.max(0, star));\n\n      if (nextValue === normalizedValue.value) return;\n\n      // Write through the reactive prop signal; craftit handles host reflection.\n      props.value.value = nextValue;\n      emit('change', { originalEvent, value: nextValue });\n      triggerValidation('change');\n      spawnSparkles(nextValue);\n    }\n    function handleKeydown(e: KeyboardEvent, star: number) {\n      const next = ratingControl.nextFromKey(e.key, star);\n\n      if (next == null) return;\n\n      e.preventDefault();\n      select(next, e);\n\n      const buttons = getStarButtons();\n\n      buttons[next - 1]?.focus();\n    }\n\n    const stars = computed(() => {\n      const max = Number(props.max.value) || 5;\n\n      return Array.from({ length: max }, (_, i) => i + 1);\n    });\n\n    return html`\n      <div\n        class=\"stars\"\n        part=\"stars\"\n        role=\"radiogroup\"\n        :aria-label=\"${() => props.label.value}\"\n        :aria-required=\"${() => null}\">\n        ${() =>\n          stars.value.map(\n            (star) =>\n              html`<button\n                class=\"star-btn\"\n                part=\"star\"\n                type=\"button\"\n                role=\"radio\"\n                :aria-label=\"${() => `${star} ${star === 1 ? 'star' : 'stars'}`}\"\n                :aria-checked=\"${() => String(star === normalizedValue.value)}\"\n                :data-star=\"${star}\"\n                ?data-filled=\"${() => star <= displayValue.value}\"\n                :disabled=\"${() => (!isInteractive.value ? true : null)}\"\n                @click=\"${(e: Event) => select(star, e)}\"\n                @pointerenter=\"${() => {\n                  if (isInteractive.value) hovered.value = star;\n                }}\"\n                @pointerleave=\"${() => {\n                  hovered.value = null;\n                }}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, star)}\">\n                <bit-icon name=\"star\" size=\"var(--_star-size)\" stroke-width=\"1.5\" aria-hidden=\"true\"></bit-icon>\n              </button>`,\n          )}\n        <div class=\"sparkle-layer\"></div>\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":"ouBAkCA,IAAM,EAAc,CAClB,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,MAAO,SACP,IAAK,EACL,KAAM,IAAA,GACN,SAAU,GACV,MAAO,GACP,MAAO,EACR,CA8BY,GAAA,EAAA,EAAA,QAAqD,aAAc,CAC9E,eAAgB,GAChB,MAAO,EACP,MAAM,CAAE,OAAM,OAAM,SAAS,CAC3B,IAAM,GAAA,EAAA,EAAA,QAAiB,EAAA,SAAU,IAAA,GAAU,CAE3C,EAAA,qBAAqB,EAAK,GAAI,EAAS,EAAM,CAE7C,IAAM,GAAA,EAAA,EAAA,cAAiC,CACrC,IAAM,EAAM,KAAK,IAAI,EAAG,OAAO,EAAM,IAAI,MAAM,EAAI,EAAE,CAC/C,EAAM,OAAO,EAAM,MAAM,MAAM,CAGrC,OAAO,KAAK,IAAI,EAAK,KAAK,IAAI,EAFjB,OAAO,SAAS,EAAI,CAAG,EAAM,EAEJ,CAAC,EACvC,CAEI,GAAA,EAAA,EAAA,aACJ,CACE,UAAA,EAAA,EAAA,cAAyB,EAAQ,EAAM,SAAS,MAAO,CACvD,OAAA,EAAA,EAAA,cAAsB,OAAO,EAAgB,OAAS,EAAE,CAAC,CAC1D,CACD,CACE,YAAe,CACb,EAAM,MAAM,MAAQ,GAEvB,CACF,CAEK,CAAE,qBAAsB,EAAA,EAAwB,GAAS,WAAY,EAAG,CAExE,GAAA,EAAA,EAAA,cAA+B,CAAC,EAAM,SAAS,OAAS,CAAC,EAAM,SAAS,MAAM,CAC9E,GAAA,EAAA,EAAA,QAAgC,KAAK,CACrC,GAAA,EAAA,EAAA,cAA8B,EAAQ,OAAS,EAAgB,MAAM,CACrE,MACG,CAAC,GAAI,EAAK,YAAY,iBAAoC,cAAc,EAAI,EAAE,CAAE,CAEnF,EAAgB,EAAA,EAAoB,CACxC,QAAW,OAAO,EAAM,IAAI,MAAM,EAAI,EACtC,QAAW,EACX,SAAY,EACb,CAAC,CAEF,SAAS,EAAc,EAAc,CACnC,IAAM,EAAQ,EAAK,YAAY,cAA2B,iBAAiB,CACrE,EAAM,EAAK,YAAY,cAA2B,eAAe,EAAK,IAAI,CAEhF,GAAI,CAAC,GAAS,CAAC,EAAK,OAEpB,IAAM,EAAK,EAAI,WAAa,EAAI,YAAc,EACxC,EAAK,EAAI,UAAY,EAAI,aAAe,EAG9C,IAAK,IAAI,EAAI,EAAG,EAAI,GAAO,IAAK,CAC9B,IAAM,EAAI,SAAS,cAAc,OAAO,CAClC,EAAS,IAAM,GAAS,GAAK,KAAK,QAAQ,CAAG,GAAK,IAClD,EAAO,GAAK,KAAK,QAAQ,CAAG,GAC5B,EAAO,EAAI,KAAK,QAAQ,CAAG,EAC3B,EAAM,IAAM,KAAK,QAAQ,CAAG,IAElC,EAAE,UAAY,UACd,EAAE,MAAM,QAAU,CAChB,QAAQ,EAAG,IACX,OAAO,EAAG,IACV,YAAY,EAAM,KAClB,WAAW,EAAK,IAChB,SAAS,EAAK,IACd,UAAU,EAAK,IACf,UAAU,EAAI,IACd,mBAAmB,KAAK,QAAQ,CAAG,GAAG,IACvC,CAAC,KAAK,IAAI,CACX,EAAM,YAAY,EAAE,CACpB,EAAE,iBAAiB,mBAAsB,EAAE,QAAQ,CAAE,CAAE,KAAM,GAAM,CAAC,EAGxE,SAAS,EAAO,EAAc,EAAuB,CACnD,GAAI,CAAC,EAAc,MAAO,OAE1B,IAAM,EAAM,KAAK,IAAI,EAAG,OAAO,EAAM,IAAI,MAAM,EAAI,EAAE,CAC/C,EAAY,KAAK,IAAI,EAAK,KAAK,IAAI,EAAG,EAAK,CAAC,CAE9C,IAAc,EAAgB,QAGlC,EAAM,MAAM,MAAQ,EACpB,EAAK,SAAU,CAAE,gBAAe,MAAO,EAAW,CAAC,CACnD,EAAkB,SAAS,CAC3B,EAAc,EAAU,EAE1B,SAAS,EAAc,EAAkB,EAAc,CACrD,IAAM,EAAO,EAAc,YAAY,EAAE,IAAK,EAAK,CAE/C,GAAQ,OAEZ,EAAE,gBAAgB,CAClB,EAAO,EAAM,EAAE,CAEC,GAAgB,CAExB,EAAO,IAAI,OAAO,EAG5B,IAAM,GAAA,EAAA,EAAA,cAAuB,CAC3B,IAAM,EAAM,OAAO,EAAM,IAAI,MAAM,EAAI,EAEvC,OAAO,MAAM,KAAK,CAAE,OAAQ,EAAK,EAAG,EAAG,IAAM,EAAI,EAAE,EACnD,CAEF,MAAO,GAAA,IAAI;;;;;2BAKc,EAAM,MAAM,MAAM;8BACf,KAAK;cAE3B,EAAM,MAAM,IACT,GACC,EAAA,IAAI;;;;;mCAKmB,GAAG,EAAK,GAAG,IAAS,EAAI,OAAS,UAAU;qCACzC,OAAO,IAAS,EAAgB,MAAM,CAAC;8BAChD,EAAK;oCACG,GAAQ,EAAa,MAAM;iCAC5B,EAAc,MAAe,KAAP,GAAa;0BAC7C,GAAa,EAAO,EAAM,EAAE,CAAC;qCACjB,CACjB,EAAc,QAAO,EAAQ,MAAQ,IACzC;qCACqB,CACrB,EAAQ,MAAQ,MAChB;4BACW,GAAqB,EAAc,EAAG,EAAK,CAAC;;yBAG9D,CAAC;;;OAKV,OAAQ,CAAC,EAAA,gBAAiB,EAAA,iBAAiB,EAAE,CAAC,CAAE,EAAA,mBAAoB,EAAA,mBAAoB,EAAA,QAAO,CAChG,CAAC"}

package/dist/rating.js

@@ -1,39 +1,47 @@
-import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
-import { sizeVariantMixin as n } from "./styles/mixins/shape.css.js";
-import { colorThemeMixin as r } from "./styles/mixins/theme.css.js";
+import "./icon.js";
+import { disablableBundle as e, sizableBundle as t, themableBundle as n } from "./inputs/shared/bundles.js";
+import { coarsePointerMixin as r, reducedMotionMixin as i } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as a } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as o } from "./styles/mixins/theme.css.js";
 import "./styles/index.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 { i as s } from "./packages/craftit/dist/controls/internal/control-state.js";
+import { i as c } from "./packages/craftit/dist/controls/slider-control.js";
+import "./packages/craftit/dist/controls.js";
+import { FORM_CTX as l } from "./inputs/shared/form-context.js";
+import { mountFormContextSync as u } from "./inputs/shared/dom-sync/form-context.js";
 import "./inputs/shared/dom-sync/index.js";
-import { createFieldValidation as o } from "./inputs/shared/validation/index.js";
-import s from "./inputs/rating/rating.css?inline.js";
-import { computed as c, defineComponent as l, defineField as u, html as d, inject as f, signal as p, typed as m } from "@vielzeug/craftit";
-//#region src/inputs/rating/rating.ts
-var h = "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", g = l({
+import d from "./inputs/rating/rating.css?inline.js";
+import { computed as f, define as p, defineField as m, html as h, inject as g, signal as _ } from "@vielzeug/craftit";
+var v = p("bit-rating", {
 	formAssociated: !0,
 	props: {
-		color: m(void 0),
-		disabled: m(!1),
-		label: m("Rating"),
-		max: m(5),
-		name: m(void 0),
-		readonly: m(!1),
-		size: m(void 0),
-		value: m(0)
+		...n,
+		...t,
+		...e,
+		label: "Rating",
+		max: 5,
+		name: void 0,
+		readonly: !1,
+		solid: !1,
+		value: 0
 	},
 	setup({ emit: e, host: t, props: n }) {
-		let r = f(i, void 0);
-		a(t, r, n);
-		let s = c(() => {
+		let r = g(l, void 0);
+		u(t.el, r, n);
+		let i = f(() => {
 			let e = Math.max(1, Number(n.max.value) || 5), t = Number(n.value.value);
 			return Math.min(e, Math.max(0, Number.isFinite(t) ? t : 0));
-		}), { triggerValidation: l } = o(r, u({
-			disabled: c(() => !!n.disabled.value),
-			value: c(() => String(s.value || 0))
+		}), a = m({
+			disabled: f(() => !!n.disabled.value),
+			value: f(() => String(i.value || 0))
 		}, { onReset: () => {
-			t.removeAttribute("value");
-		} })), m = p(null), g = c(() => m.value ?? s.value);
-		function _(e) {
+			n.value.value = 0;
+		} }), { triggerValidation: o } = s(r?.validateOn, a), d = f(() => !n.readonly.value && !n.disabled.value), p = _(null), v = f(() => p.value ?? i.value), y = () => [...t.shadowRoot?.querySelectorAll("[data-star]") ?? []], b = c({
+			max: () => Number(n.max.value) || 5,
+			min: () => 1,
+			step: () => 1
+		});
+		function x(e) {
 			let n = t.shadowRoot?.querySelector(".sparkle-layer"), r = t.shadowRoot?.querySelector(`[data-star="${e}"]`);
 			if (!n || !r) return;
 			let i = r.offsetLeft + r.offsetWidth / 2, a = r.offsetTop + r.offsetHeight / 2;
@@ -51,73 +59,62 @@ var h = "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2
 				].join(";"), n.appendChild(t), t.addEventListener("animationend", () => t.remove(), { once: !0 });
 			}
 		}
-		function v(t, r) {
-			if (n.readonly.value || n.disabled.value) return;
-			let i = Math.max(1, Number(n.max.value) || 5), a = Math.min(i, Math.max(0, t));
-			a !== s.value && (n.value.value = a, e("change", {
+		function S(t, r) {
+			if (!d.value) return;
+			let a = Math.max(1, Number(n.max.value) || 5), s = Math.min(a, Math.max(0, t));
+			s !== i.value && (n.value.value = s, e("change", {
 				originalEvent: r,
-				value: a
-			}), l("change"), _(a));
+				value: s
+			}), o("change"), x(s));
 		}
-		function y(e, r) {
-			let i = Number(n.max.value) || 5;
-			e.key === "ArrowRight" || e.key === "ArrowUp" ? (e.preventDefault(), v(Math.min(i, r + 1), e), (t.shadowRoot?.querySelector(`[data-star="${Math.min(i, r + 1)}"]`))?.focus()) : (e.key === "ArrowLeft" || e.key === "ArrowDown") && (e.preventDefault(), v(Math.max(1, r - 1), e), (t.shadowRoot?.querySelector(`[data-star="${Math.max(1, r - 1)}"]`))?.focus());
+		function C(e, t) {
+			let n = b.nextFromKey(e.key, t);
+			n != null && (e.preventDefault(), S(n, e), y()[n - 1]?.focus());
 		}
-		let b = c(() => {
+		let w = f(() => {
 			let e = Number(n.max.value) || 5;
 			return Array.from({ length: e }, (e, t) => t + 1);
 		});
-		return d`
+		return h`
       <div
         class="stars"
         part="stars"
         role="radiogroup"
         :aria-label="${() => n.label.value}"
         :aria-required="${() => null}">
-        ${() => b.value.map((e) => d`<button
+        ${() => w.value.map((e) => h`<button
                 class="star-btn"
                 part="star"
                 type="button"
                 role="radio"
                 :aria-label="${() => `${e} ${e === 1 ? "star" : "stars"}`}"
-                :aria-checked="${() => String(e === s.value)}"
+                :aria-checked="${() => String(e === i.value)}"
                 :data-star="${e}"
-                ?data-filled="${() => e <= g.value}"
-                :disabled="${() => n.disabled.value || n.readonly.value || null}"
-                @click="${(t) => v(e, t)}"
+                ?data-filled="${() => e <= v.value}"
+                :disabled="${() => d.value ? null : !0}"
+                @click="${(t) => S(e, t)}"
                 @pointerenter="${() => {
-			!n.readonly.value && !n.disabled.value && (m.value = e);
+			d.value && (p.value = e);
 		}}"
                 @pointerleave="${() => {
-			m.value = null;
+			p.value = null;
 		}}"
-                @keydown="${(t) => y(t, e)}">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                  fill="${() => e <= g.value ? "currentColor" : "none"}"
-                  stroke="currentColor"
-                  stroke-width="${() => e <= g.value ? 0 : 1.5}"
-                  stroke-linecap="round"
-                  stroke-linejoin="round">
-                  <path d="${h}" />
-                </svg>
+                @keydown="${(t) => C(t, e)}">
+                <bit-icon name="star" size="var(--_star-size)" stroke-width="1.5" aria-hidden="true"></bit-icon>
               </button>`)}
         <div class="sparkle-layer"></div>
       </div>
     `;
 	},
 	styles: [
+		o,
+		a({}),
 		r,
-		n({}),
-		e,
-		t,
-		s
-	],
-	tag: "bit-rating"
+		i,
+		d
+	]
 });
 //#endregion
-export { g as RATING_TAG };
+export { v as RATING_TAG };
 
 //# sourceMappingURL=rating.js.map