@vielzeug/buildit 2.0.0

package/dist/radio.cjs.map

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

package/dist/radio.js

@@ -0,0 +1,135 @@
+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 "./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({
+	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 = 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,
+			onToggle: (t) => {
+				e("change", {
+					checked: S.checked.value,
+					fieldValue: n.value.value ?? "",
+					originalEvent: t,
+					value: S.checked.value
+				});
+			},
+			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({
+			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);
+				else {
+					if (!_.value) return;
+					if (!S.checked.value) {
+						let r = n.name.value;
+						document.querySelectorAll(`bit-radio[name="${r}"]`).forEach((e) => {
+							e !== t && 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();
+					}
+				}
+			},
+			size: () => v.value,
+			tabindex: () => {
+				if (!b.value) return S.checked.value ? 0 : -1;
+			}
+		}), p`
+      <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>
+      <div
+        class="helper-text"
+        part="helper-text"
+        data-a11y-helper
+        id="${w.helperId}"
+        aria-live="polite"
+        hidden></div>
+    `;
+	},
+	styles: [
+		...n,
+		e,
+		t(s),
+		l
+	],
+	tag: "bit-radio"
+});
+//#endregion
+export { _ as RADIO_TAG };
+
+//# sourceMappingURL=radio.js.map

package/dist/radio.js.map

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

package/dist/rating.cjs

@@ -0,0 +1,37 @@
+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`
+      <div
+        class="stars"
+        part="stars"
+        role="radiogroup"
+        :aria-label="${()=>n.label.value}"
+        :aria-required="${()=>null}">
+        ${()=>g.value.map(e=>s.html`<button
+                class="star-btn"
+                part="star"
+                type="button"
+                role="radio"
+                :aria-label="${()=>`${e} ${e===1?`star`:`stars`}`}"
+                :aria-checked="${()=>String(e===l.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>
+              </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;
+//# sourceMappingURL=rating.cjs.map

package/dist/rating.cjs.map

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

package/dist/rating.js

@@ -0,0 +1,123 @@
+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 "./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 "./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({
+	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)
+	},
+	setup({ emit: e, host: t, props: n }) {
+		let r = f(i, void 0);
+		a(t, r, n);
+		let s = c(() => {
+			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))
+		}, { onReset: () => {
+			t.removeAttribute("value");
+		} })), m = p(null), g = c(() => m.value ?? s.value);
+		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 (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", {
+				originalEvent: r,
+				value: a
+			}), l("change"), _(a));
+		}
+		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());
+		}
+		let b = c(() => {
+			let e = Number(n.max.value) || 5;
+			return Array.from({ length: e }, (e, t) => t + 1);
+		});
+		return d`
+      <div
+        class="stars"
+        part="stars"
+        role="radiogroup"
+        :aria-label="${() => n.label.value}"
+        :aria-required="${() => null}">
+        ${() => b.value.map((e) => d`<button
+                class="star-btn"
+                part="star"
+                type="button"
+                role="radio"
+                :aria-label="${() => `${e} ${e === 1 ? "star" : "stars"}`}"
+                :aria-checked="${() => String(e === s.value)}"
+                :data-star="${e}"
+                ?data-filled="${() => e <= g.value}"
+                :disabled="${() => n.disabled.value || n.readonly.value || null}"
+                @click="${(t) => v(e, t)}"
+                @pointerenter="${() => {
+			!n.readonly.value && !n.disabled.value && (m.value = e);
+		}}"
+                @pointerleave="${() => {
+			m.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>
+              </button>`)}
+        <div class="sparkle-layer"></div>
+      </div>
+    `;
+	},
+	styles: [
+		r,
+		n({}),
+		e,
+		t,
+		s
+	],
+	tag: "bit-rating"
+});
+//#endregion
+export { g as RATING_TAG };
+
+//# sourceMappingURL=rating.js.map

package/dist/rating.js.map

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

package/dist/select.cjs

@@ -0,0 +1,77 @@
+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`),r=require(`./styles/index.cjs`),i=require(`./icons.cjs`);require(`./chip.cjs`);const a=require(`./craftit/dist/labs/list.cjs`),o=require(`./craftit/dist/labs/overlay.cjs`);require(`./craftit/dist/labs.cjs`);const s=require(`./inputs/shared/dom-sync/dropdown.cjs`),c=require(`./inputs/shared/utils/assistive-text.cjs`),l=require(`./inputs/shared/utils/choice-change.cjs`),u=require(`./inputs/shared/utils/controlled-csv.cjs`),d=require(`./inputs/shared/form-context.cjs`),f=require(`./inputs/shared/dom-sync/label-sync.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const p=require(`./inputs/shared/validation/index.cjs`),m=require(`./inputs/shared/design-presets.cjs`),h=require(`./inputs/select/select.css?inline.cjs`);let g=require(`@vielzeug/craftit`);var _=(0,g.defineComponent)({formAssociated:!0,props:{color:{default:void 0},disabled:{default:!1},error:{default:``,omit:!0},fullwidth:{default:!1},helper:{default:``},label:{default:``},"label-placement":{default:`inset`},loading:{default:!1},multiple:{default:!1},name:{default:``},options:(0,g.typed)(void 0,{reflect:!1}),placeholder:{default:``},required:{default:!1},rounded:{default:void 0},size:{default:void 0},value:{default:``},variant:{default:void 0}},setup({emit:e,host:t,props:n}){let r=(0,g.signal)([]),m=(0,g.signal)([]),h=(0,g.signal)(!1),_=(0,g.signal)(-1),v=(0,g.computed)(()=>!!n.loading.value),y=(0,g.computed)(()=>{let e=n.options.value;return e===void 0?m.value:e}),b=(0,g.inject)(d.FORM_CTX,void 0),x=(0,g.computed)(()=>r.value.join(`,`)),{triggerValidation:S}=p.createFieldValidation(b,(0,g.defineField)({disabled:(0,g.computed)(()=>!!n.disabled.value||!!b?.disabled.value),value:x},{onReset:()=>{r.value=[]}}));(0,g.watch)(h,e=>{t.toggleAttribute(`open`,(e=>!!e)(e))},{immediate:!0}),(0,g.watch)(n.error,e=>{t.toggleAttribute(`has-error`,(e=>!!e)(e))},{immediate:!0});let{fieldId:C,labelId:w}=(0,g.createFormIds)(`select`,n.name.value),T=`listbox-${C}`,E=null,D=null,O=(0,g.ref)(),k=(0,g.ref)();function A(){let e=t.shadowRoot?.querySelector(`slot`);if(!e)return;let n=e.assignedElements({flatten:!0}),r=[];for(let e of n)if(e.tagName===`OPTION`){let t=e;r.push({disabled:t.disabled,label:t.text||t.value,value:t.value})}else if(e.tagName===`OPTGROUP`){let t=e,n=t.label;for(let e of Array.from(t.querySelectorAll(`option`))){let t=e;r.push({disabled:t.disabled,group:n,label:t.text||t.value,value:t.value})}}m.value=r}(0,g.effect)(()=>{r.value=u.computeControlledCsvState(n.value.value).values});let j=(0,g.computed)(()=>{if(r.value.length===0)return``;if(n.multiple.value&&r.value.length>1)return`${r.value.length} selected`;let e=r.value[0];return y.value.find(t=>t.value===e)?.label??e}),M=(0,g.computed)(()=>n.multiple.value?r.value.map(e=>({label:y.value.find(t=>t.value===e)?.label??e,value:e})):[]),N=(0,g.computed)(()=>c.resolveMergedAssistiveText(n.error.value,n.helper.value)),P=(0,g.computed)(()=>n.multiple.value&&r.value.length>0),F=(0,g.computed)(()=>j.value||n.placeholder.value||``),I=(0,g.computed)(()=>!!n.label.value);function L(e){let t=[],n=new Map;for(let t of e){let e=t.group;n.has(e)||n.set(e,[]),n.get(e).push(t)}let r=0;for(let[e,i]of n){e!==void 0&&t.push({label:e,type:`group`});for(let e of i)t.push({idx:r++,opt:e,type:`option`})}return t}let R=(0,g.computed)(()=>L(y.value));function z(e){return y.value.find(t=>t.value===e)?.label??e}function B(t){let n=r.value;e(`change`,l.createChoiceChangeDetail(n,n.map(e=>z(e)),t))}function V(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(r.value=r.value.filter(e=>e!==t),B(e),S(`change`))}let H=s.createDropdownPositioner(()=>E,()=>D),U=a.e({getIndex:()=>_.value,getItems:()=>y.value,isItemDisabled:e=>e.disabled,setIndex:e=>{_.value=e,J()}}),W=o.t({getBoundaryElement:()=>t,getPanelElement:()=>D,getTriggerElement:()=>E,isDisabled:()=>!!n.disabled.value,isOpen:()=>h.value,positioner:{floating:()=>D,reference:()=>E,update:()=>H.updatePosition()},setOpen:e=>{h.value=e,e||U.reset()}});function G(){W.open(),requestAnimationFrame(()=>{let e=r.value.length>0?y.value.findIndex(e=>e.value===r.value[0]):0;U.set(e>=0?e:0)})}function K(e=`programmatic`){W.close({reason:e}),S(`blur`)}function q(e,t){e.disabled||(n.multiple.value?r.value=r.value.includes(e.value)?r.value.filter(t=>t!==e.value):[...r.value,e.value]:(r.value=[e.value],K()),B(t),S(`change`))}function J(){let e=_.value;if(e>=0){(D?.querySelector(`#${C}-opt-${e}`))?.scrollIntoView({block:`nearest`});return}D&&D.querySelector(`[data-focused]`)?.scrollIntoView({block:`nearest`})}function Y(e){if(n.disabled.value)return;let t=y.value;switch(e.key){case` `:case`Enter`:if(e.preventDefault(),h.value){let n=_.value;n>=0&&n<t.length&&q(t[n],e)}else G();break;case`ArrowDown`:e.preventDefault(),h.value?U.next():G();break;case`ArrowUp`:e.preventDefault(),h.value?U.prev():G();break;case`End`:h.value&&(e.preventDefault(),U.last());break;case`Escape`:e.preventDefault(),K(`escape`);break;case`Home`:h.value&&(e.preventDefault(),U.first());break;case`Tab`:K();break}}return(0,g.onMount)(()=>{(0,g.onSlotChange)(`default`,A),A(),f.mountLabelSyncStandalone(k,O,n),E&&(0,g.aria)(E,{activedescendant:()=>_.value>=0?`${C}-opt-${_.value}`:null,disabled:()=>n.disabled.value,expanded:()=>h.value?`true`:`false`,invalid:()=>!!n.error.value,labelledby:()=>I.value?w:null});let e=W.bindOutsideClick(document);return()=>{H.destroy(),e()}}),g.html`<slot style="display:none"></slot>
+      <div class="select-wrapper">
+        <label class="label-outside" id="${w}" ref=${O} hidden></label>
+        <div
+          class="field"
+          ref=${e=>{E=e}}
+          role="combobox"
+          tabindex=${()=>n.disabled.value?`-1`:`0`}
+          aria-controls="${T}"
+          aria-expanded="false"
+          aria-labelledby="${w}"
+          @click=${e=>{e.stopPropagation(),h.value?K():G()}}
+          @keydown=${Y}>
+          <label class="label-inset" id="${w}" ref=${k} hidden></label>
+          <div class="trigger-row">
+            <div class="chips-row" ?hidden=${()=>!P.value}>
+              ${()=>M.value.map(e=>g.html`
+                    <bit-chip
+                      value=${e.value}
+                      aria-label=${e.label}
+                      mode="removable"
+                      variant="flat"
+                      size="sm"
+                      color=${()=>n.color.value}
+                      @remove=${V}>
+                      ${e.label}
+                    </bit-chip>
+                  `)}
+            </div>
+            <span
+              class="trigger-value ${()=>j.value?``:`trigger-placeholder`}"
+              ?hidden=${()=>P.value}
+              >${()=>F.value}</span
+            >
+          </div>
+          <span class="trigger-icon" aria-hidden="true">
+            ${i.chevronDownIcon}
+            <span class="loader" aria-label="Loading"></span>
+          </span>
+        </div>
+        <div
+          class="helper-text"
+          aria-live="polite"
+          ?hidden=${()=>N.value.hidden}
+          style=${()=>N.value.isError?`color: var(--color-error);`:``}>
+          ${()=>N.value.text}
+        </div>
+      </div>
+      <div
+        class="dropdown"
+        ?data-open=${()=>h.value}
+        role="listbox"
+        id="${T}"
+        aria-label="Options"
+        ref=${e=>{D=e}}>
+        <div class="dropdown-loading" ?hidden=${()=>!v.value}>Loading…</div>
+        <div class="dropdown-empty" ?hidden=${()=>v.value||y.value.length>0}>No options</div>
+        <div class="options-list" ?hidden=${()=>v.value||y.value.length===0}>
+          ${()=>R.value.map(e=>e.type===`group`?g.html`<div class="optgroup-label" role="presentation">${e.label}</div>`:g.html`<div
+                    class="option"
+                    role="option"
+                    id=${`${C}-opt-${e.idx}`}
+                    data-option-index=${()=>String(e.idx)}
+                    data-option-value=${e.opt.value}
+                    aria-selected=${()=>String(r.value.includes(e.opt.value))}
+                    aria-disabled=${()=>String(e.opt.disabled)}
+                    ?data-focused=${()=>_.value===e.idx}
+                    ?data-selected=${()=>r.value.includes(e.opt.value)}
+                    ?data-disabled=${()=>e.opt.disabled}
+                    @click=${t=>{t.stopPropagation(),q(e.opt,t)}}
+                    @pointerenter=${()=>{_.value=e.idx}}>
+                    <span>${e.opt.label}</span>
+                    <span class="option-check" aria-hidden="true">${i.checkIcon}</span>
+                  </div>`)}
+        </div>
+      </div>`},shadow:{delegatesFocus:!0},styles:[e.sizeVariantMixin(m.FIELD_SIZE_PRESET),...r.formFieldMixins,t.disabledLoadingMixin(),n.forcedColorsFocusMixin(`.field`),h.default],tag:`bit-select`});exports.SELECT_TAG=_;
+//# sourceMappingURL=select.cjs.map

package/dist/select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.cjs","names":[],"sources":["../src/inputs/select/select.ts"],"sourcesContent":["import {\n  aria,\n  computed,\n  createFormIds,\n  defineComponent,\n  defineField,\n  effect,\n  html,\n  inject,\n  onMount,\n  onSlotChange,\n  ref,\n  signal,\n  typed,\n  watch,\n} from '@vielzeug/craftit';\nimport { createListNavigation, createOverlayControl } from '@vielzeug/craftit/labs';\n\nimport type { VisualVariant } from '../../types';\n\nimport '../../feedback/chip/chip';\nimport type { SelectableFieldProps } from '../shared/base-props';\n\nimport { checkIcon, chevronDownIcon } from '../../icons';\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { FIELD_SIZE_PRESET } from '../shared/design-presets';\nimport { createDropdownPositioner, mountLabelSyncStandalone } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport {\n  type ChoiceChangeDetail,\n  computeControlledCsvState,\n  createChoiceChangeDetail,\n  resolveMergedAssistiveText,\n} from '../shared/utils';\nimport { createFieldValidation } from '../shared/validation';\nimport componentStyles from './select.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\ntype OptionItem = {\n  disabled: boolean;\n  group?: string;\n  label: string;\n  value: string;\n};\n\ntype FlatRow =\n  | {\n      idx: number;\n      opt: OptionItem;\n      type: 'option';\n    }\n  | {\n      label: string;\n      type: 'group';\n    };\n\n// ============================================\n// Styles\n// ============================================\n\n// ============================================\n// Component Props\n// ============================================\n\n/** Select component properties */\n\nexport type BitSelectEvents = {\n  change: ChoiceChangeDetail;\n};\n\nexport type BitSelectProps = SelectableFieldProps<Exclude<VisualVariant, 'glass' | 'text' | 'frost'>> & {\n  /** Show loading state in dropdown */\n  loading?: boolean;\n  /** Allow selecting multiple options */\n  multiple?: boolean;\n  /** JS options array (alternative to slotted <option> elements) */\n  options?: OptionItem[];\n  /** Mark the field as required */\n  required?: boolean;\n};\n\n/**\n * A fully custom form-associated select dropdown with keyboard navigation and ARIA support.\n * Reads `<option>` and `<optgroup>` children from the default slot.\n *\n * @element bit-select\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} value - Current selected value(s) (comma-separated for multiple)\n * @attr {string} placeholder - Placeholder when no option selected\n * @attr {string} name - Form field name\n * @attr {boolean} multiple - Enable multi-select\n * @attr {boolean} disabled - Disable the select\n * @attr {boolean} required - Required field\n * @attr {string} helper - Helper text below the select\n * @attr {string} error - Error message\n * @attr {string} color - Theme color\n * @attr {string} variant - Visual variant\n * @attr {string} size - Component size\n * @attr {string} rounded - Border radius\n * @attr {boolean} fullwidth - Expand to full width\n *\n * @fires change - Fired when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - `<option>` and `<optgroup>` elements\n *\n * @cssprop --select-bg - Background\n * @cssprop --select-border-color - Border color\n * @cssprop --select-radius - Border radius\n * @cssprop --select-padding - Padding\n * @cssprop --select-font-size - Font size\n * @cssprop --select-placeholder-color - Placeholder text color\n *\n * @example\n * ```html\n * <bit-select label=\"Role\" value=\"admin\">\n *   <option value=\"admin\">Administrator</option>\n *   <option value=\"editor\">Editor</option>\n *   <option value=\"viewer\">Viewer</option>\n * </bit-select>\n *\n * <bit-select label=\"Tags\" multiple color=\"primary\">\n *   <optgroup label=\"Frontend\">\n *     <option value=\"react\">React</option>\n *     <option value=\"vue\">Vue</option>\n *   </optgroup>\n *   <optgroup label=\"Backend\">\n *     <option value=\"node\">Node.js</option>\n *   </optgroup>\n * </bit-select>\n * ```\n */\nexport const SELECT_TAG = defineComponent<BitSelectProps, BitSelectEvents>({\n  formAssociated: true,\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '', omit: true },\n    fullwidth: { default: false },\n    helper: { default: '' },\n    label: { default: '' },\n    'label-placement': { default: 'inset' },\n    loading: { default: false },\n    multiple: { default: false },\n    name: { default: '' },\n    options: typed<OptionItem[] | undefined>(undefined, { reflect: false }),\n    placeholder: { default: '' },\n    required: { default: false },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    value: { default: '' },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    // ============================================\n    // State\n    // ============================================\n    const selectedValues = signal<string[]>([]);\n    const slottedOptions = signal<OptionItem[]>([]);\n    const isOpen = signal(false);\n    const focusedIndex = signal(-1);\n    const isLoading = computed(() => Boolean(props.loading.value));\n    // Merged options: explicit prop value overrides slotted options.\n    const options = computed(() => {\n      const propOptions = props.options.value;\n\n      return propOptions !== undefined ? propOptions : slottedOptions.value;\n    });\n    const formCtx = inject(FORM_CTX, undefined);\n    // Form-associated value (comma-separated for multiple)\n    const formValue = computed(() => selectedValues.value.join(','));\n    const fd = defineField(\n      { disabled: computed(() => Boolean(props.disabled.value) || Boolean(formCtx?.disabled.value)), value: formValue },\n      {\n        onReset: () => {\n          selectedValues.value = [];\n        },\n      },\n    );\n\n    const { triggerValidation } = createFieldValidation(formCtx, fd);\n\n    // Sync host attributes from component state for CSS hooks.\n    watch(\n      isOpen,\n      (value) => {\n        host.toggleAttribute('open', ((value) => Boolean(value))(value));\n      },\n      { immediate: true },\n    );\n    watch(\n      props.error,\n      (value) => {\n        host.toggleAttribute('has-error', ((value) => Boolean(value))(value));\n      },\n      { immediate: true },\n    );\n\n    // Accessibility IDs\n    const { fieldId: selectId, labelId } = createFormIds('select', props.name.value);\n    const listboxId = `listbox-${selectId}`;\n    // DOM refs\n    let triggerEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n    // Refs for dynamic content\n    const labelOutsideRef = ref<HTMLSpanElement>();\n    const labelInsetRef = ref<HTMLSpanElement>();\n\n    // ============================================\n    // Option reading from slot\n    // ============================================\n    function readOptions() {\n      const slot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot');\n\n      if (!slot) return;\n\n      const assigned = slot.assignedElements({ flatten: true });\n      const items: OptionItem[] = [];\n\n      for (const el of assigned) {\n        if (el.tagName === 'OPTION') {\n          const opt = el as HTMLOptionElement;\n\n          items.push({ disabled: opt.disabled, label: opt.text || opt.value, value: opt.value });\n        } else if (el.tagName === 'OPTGROUP') {\n          const group = el as HTMLOptGroupElement;\n          const groupLabel = group.label;\n\n          for (const child of Array.from(group.querySelectorAll('option'))) {\n            const opt = child as HTMLOptionElement;\n\n            items.push({ disabled: opt.disabled, group: groupLabel, label: opt.text || opt.value, value: opt.value });\n          }\n        }\n      }\n      slottedOptions.value = items;\n    }\n    // Initialize selectedValues from prop\n    effect(() => {\n      selectedValues.value = computeControlledCsvState(props.value.value).values;\n    });\n\n    // ============================================\n    // Display value\n    // ============================================\n    const displayLabel = computed(() => {\n      if (selectedValues.value.length === 0) return '';\n\n      if (props.multiple.value && selectedValues.value.length > 1) {\n        return `${selectedValues.value.length} selected`;\n      }\n\n      const first = selectedValues.value[0];\n\n      return options.value.find((o) => o.value === first)?.label ?? first;\n    });\n    const selectedChipItems = computed(() => {\n      if (!props.multiple.value) return [];\n\n      return selectedValues.value.map((value) => ({\n        label: options.value.find((o) => o.value === value)?.label ?? value,\n        value,\n      }));\n    });\n    const assistiveText = computed(() => resolveMergedAssistiveText(props.error.value, props.helper.value));\n    const showChips = computed(() => props.multiple.value && selectedValues.value.length > 0);\n    const triggerText = computed(() => displayLabel.value || props.placeholder.value || '');\n    const hasLabel = computed(() => !!props.label.value);\n\n    function buildFlatList(opts: OptionItem[]): FlatRow[] {\n      const flat: FlatRow[] = [];\n      const groups = new Map<string | undefined, OptionItem[]>();\n\n      for (const opt of opts) {\n        const key = opt.group;\n\n        if (!groups.has(key)) groups.set(key, []);\n\n        groups.get(key)!.push(opt);\n      }\n\n      let globalIdx = 0;\n\n      for (const [groupLabel, groupOpts] of groups) {\n        if (groupLabel !== undefined) flat.push({ label: groupLabel, type: 'group' });\n\n        for (const opt of groupOpts) flat.push({ idx: globalIdx++, opt, type: 'option' });\n      }\n\n      return flat;\n    }\n\n    const flatRows = computed(() => buildFlatList(options.value));\n\n    function getLabelForValue(value: string): string {\n      return options.value.find((option) => option.value === value)?.label ?? value;\n    }\n\n    function emitChange(originalEvent?: Event): void {\n      const values = selectedValues.value;\n      const labels = values.map((value) => getLabelForValue(value));\n\n      emit('change', createChoiceChangeDetail(values, labels, originalEvent));\n    }\n\n    function removeChip(event: Event): void {\n      event.stopPropagation();\n\n      const value = (event as CustomEvent<{ value?: string }>).detail?.value;\n\n      if (value === undefined) return;\n\n      selectedValues.value = selectedValues.value.filter((v) => v !== value);\n      emitChange(event);\n      triggerValidation('change');\n    }\n\n    // ============================================\n    // Dropdown positioning (shared positioner)\n    // ============================================\n    const positioner = createDropdownPositioner(\n      () => triggerEl,\n      () => dropdownEl,\n    );\n\n    const listNavigation = createListNavigation<OptionItem>({\n      getIndex: () => focusedIndex.value,\n      getItems: () => options.value,\n      isItemDisabled: (option) => option.disabled,\n      setIndex: (index) => {\n        focusedIndex.value = index;\n        scrollFocusedIntoView();\n      },\n    });\n\n    const overlay = createOverlayControl({\n      getBoundaryElement: () => host,\n      getPanelElement: () => dropdownEl,\n      getTriggerElement: () => triggerEl,\n      isDisabled: () => Boolean(props.disabled.value),\n      isOpen: () => isOpen.value,\n      positioner: {\n        floating: () => dropdownEl,\n        reference: () => triggerEl,\n        update: () => positioner.updatePosition(),\n      },\n      setOpen: (next) => {\n        isOpen.value = next;\n\n        if (!next) listNavigation.reset();\n      },\n    });\n\n    // ============================================\n    // Open / Close\n    // ============================================\n    function open() {\n      overlay.open();\n\n      requestAnimationFrame(() => {\n        const selectedIndex =\n          selectedValues.value.length > 0\n            ? options.value.findIndex((option) => option.value === selectedValues.value[0])\n            : 0;\n\n        listNavigation.set(selectedIndex >= 0 ? selectedIndex : 0);\n      });\n    }\n\n    function close(reason: 'escape' | 'programmatic' = 'programmatic') {\n      overlay.close({ reason });\n      triggerValidation('blur');\n    }\n    // ============================================\n    // Selection\n    // ============================================\n    function selectOption(opt: OptionItem, e?: Event) {\n      if (opt.disabled) return;\n\n      if (props.multiple.value) {\n        selectedValues.value = selectedValues.value.includes(opt.value)\n          ? selectedValues.value.filter((entry) => entry !== opt.value)\n          : [...selectedValues.value, opt.value];\n      } else {\n        selectedValues.value = [opt.value];\n        close();\n      }\n\n      emitChange(e);\n      triggerValidation('change');\n    }\n    // ============================================\n    // Keyboard navigation\n    // ============================================\n    function scrollFocusedIntoView() {\n      const idx = focusedIndex.value;\n\n      if (idx >= 0) {\n        const focusedOptionEl = dropdownEl?.querySelector<HTMLElement>(`#${selectId}-opt-${idx}`);\n\n        focusedOptionEl?.scrollIntoView({ block: 'nearest' });\n\n        return;\n      }\n\n      if (!dropdownEl) return;\n\n      const focusedEl = dropdownEl.querySelector<HTMLElement>('[data-focused]');\n\n      focusedEl?.scrollIntoView({ block: 'nearest' });\n    }\n    function handleTriggerKeydown(e: KeyboardEvent) {\n      if (props.disabled.value) return;\n\n      const opts = options.value;\n\n      switch (e.key) {\n        case ' ':\n        case 'Enter':\n          e.preventDefault();\n\n          if (isOpen.value) {\n            const idx = focusedIndex.value;\n\n            if (idx >= 0 && idx < opts.length) selectOption(opts[idx], e);\n          } else {\n            open();\n          }\n\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            open();\n          } else {\n            listNavigation.next();\n          }\n\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            open();\n          } else {\n            listNavigation.prev();\n          }\n\n          break;\n        case 'End':\n          if (isOpen.value) {\n            e.preventDefault();\n            listNavigation.last();\n          }\n\n          break;\n        case 'Escape':\n          e.preventDefault();\n          close('escape');\n          break;\n        case 'Home':\n          if (isOpen.value) {\n            e.preventDefault();\n            listNavigation.first();\n          }\n\n          break;\n        case 'Tab':\n          close();\n          break;\n      }\n    }\n    onMount(() => {\n      onSlotChange('default', readOptions);\n      // Ensure initial light-DOM <option>/<optgroup> content is available immediately.\n      readOptions();\n      mountLabelSyncStandalone(labelInsetRef, labelOutsideRef, props);\n\n      if (triggerEl) {\n        aria(triggerEl, {\n          activedescendant: () => (focusedIndex.value >= 0 ? `${selectId}-opt-${focusedIndex.value}` : null),\n          disabled: () => props.disabled.value,\n          expanded: () => (isOpen.value ? 'true' : 'false'),\n          invalid: () => !!props.error.value,\n          labelledby: () => (hasLabel.value ? labelId : null),\n        });\n      }\n\n      const removeOutsideClick = overlay.bindOutsideClick(document);\n\n      return () => {\n        positioner.destroy();\n        removeOutsideClick();\n      };\n    });\n\n    return html`<slot style=\"display:none\"></slot>\n      <div class=\"select-wrapper\">\n        <label class=\"label-outside\" id=\"${labelId}\" ref=${labelOutsideRef} hidden></label>\n        <div\n          class=\"field\"\n          ref=${(el: HTMLElement) => {\n            triggerEl = el;\n          }}\n          role=\"combobox\"\n          tabindex=${() => (props.disabled.value ? '-1' : '0')}\n          aria-controls=\"${listboxId}\"\n          aria-expanded=\"false\"\n          aria-labelledby=\"${labelId}\"\n          @click=${(e: MouseEvent) => {\n            e.stopPropagation();\n\n            if (isOpen.value) close();\n            else open();\n          }}\n          @keydown=${handleTriggerKeydown}>\n          <label class=\"label-inset\" id=\"${labelId}\" ref=${labelInsetRef} hidden></label>\n          <div class=\"trigger-row\">\n            <div class=\"chips-row\" ?hidden=${() => !showChips.value}>\n              ${() =>\n                selectedChipItems.value.map(\n                  (item) => html`\n                    <bit-chip\n                      value=${item.value}\n                      aria-label=${item.label}\n                      mode=\"removable\"\n                      variant=\"flat\"\n                      size=\"sm\"\n                      color=${() => props.color.value}\n                      @remove=${removeChip}>\n                      ${item.label}\n                    </bit-chip>\n                  `,\n                )}\n            </div>\n            <span\n              class=\"trigger-value ${() => (displayLabel.value ? '' : 'trigger-placeholder')}\"\n              ?hidden=${() => showChips.value}\n              >${() => triggerText.value}</span\n            >\n          </div>\n          <span class=\"trigger-icon\" aria-hidden=\"true\">\n            ${chevronDownIcon}\n            <span class=\"loader\" aria-label=\"Loading\"></span>\n          </span>\n        </div>\n        <div\n          class=\"helper-text\"\n          aria-live=\"polite\"\n          ?hidden=${() => assistiveText.value.hidden}\n          style=${() => (assistiveText.value.isError ? 'color: var(--color-error);' : '')}>\n          ${() => assistiveText.value.text}\n        </div>\n      </div>\n      <div\n        class=\"dropdown\"\n        ?data-open=${() => isOpen.value}\n        role=\"listbox\"\n        id=\"${listboxId}\"\n        aria-label=\"Options\"\n        ref=${(el: HTMLElement) => {\n          dropdownEl = el;\n        }}>\n        <div class=\"dropdown-loading\" ?hidden=${() => !isLoading.value}>Loading…</div>\n        <div class=\"dropdown-empty\" ?hidden=${() => isLoading.value || options.value.length > 0}>No options</div>\n        <div class=\"options-list\" ?hidden=${() => isLoading.value || options.value.length === 0}>\n          ${() =>\n            flatRows.value.map((row) =>\n              row.type === 'group'\n                ? html`<div class=\"optgroup-label\" role=\"presentation\">${row.label}</div>`\n                : html`<div\n                    class=\"option\"\n                    role=\"option\"\n                    id=${`${selectId}-opt-${row.idx}`}\n                    data-option-index=${() => String(row.idx)}\n                    data-option-value=${row.opt.value}\n                    aria-selected=${() => String(selectedValues.value.includes(row.opt.value))}\n                    aria-disabled=${() => String(row.opt.disabled)}\n                    ?data-focused=${() => focusedIndex.value === row.idx}\n                    ?data-selected=${() => selectedValues.value.includes(row.opt.value)}\n                    ?data-disabled=${() => row.opt.disabled}\n                    @click=${(e: MouseEvent) => {\n                      e.stopPropagation();\n                      selectOption(row.opt, e);\n                    }}\n                    @pointerenter=${() => {\n                      focusedIndex.value = row.idx;\n                    }}>\n                    <span>${row.opt.label}</span>\n                    <span class=\"option-check\" aria-hidden=\"true\">${checkIcon}</span>\n                  </div>`,\n            )}\n        </div>\n      </div>`;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    sizeVariantMixin(FIELD_SIZE_PRESET),\n    ...formFieldMixins,\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('.field'),\n    componentStyles,\n  ],\n  tag: 'bit-select',\n});\n"],"mappings":"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"}