@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/input.js

@@ -1,20 +1,19 @@
-import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
-import { disabledLoadingMixin as t } from "./styles/mixins/states.css.js";
-import { forcedColorsFocusMixin as n } from "./styles/mixins/theme.css.js";
-import { formFieldMixins as r } from "./styles/index.js";
-import { t as i } from "./craftit/dist/directives/attr.js";
-import "./craftit/dist/directives/index.js";
-import { clearIcon as a, eyeIcon as o, eyeOffIcon as s } from "./icons.js";
-import { parsePositiveNumber as c } from "./inputs/shared/utils/field-values.js";
-import { setupFieldEvents as l, syncCounter as u, syncSplitAssistive as d } from "./inputs/shared/dom-sync/field-sync.js";
+import "./icon.js";
+import { disablableBundle as e, roundableBundle as t, sizableBundle as n, themableBundle as r } from "./inputs/shared/bundles.js";
+import { sizeVariantMixin as i } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as a } from "./styles/mixins/states.css.js";
+import { forcedColorsFocusMixin as o } from "./styles/mixins/theme.css.js";
+import { formFieldMixins as s } from "./styles/index.js";
+import { y as c } from "./packages/craftit/dist/controls/field-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 { useTextField as f } from "./inputs/shared/composables/use-text-field.js";
-import "./inputs/shared/composables/index.js";
-import { FIELD_SIZE_PRESET as p } from "./inputs/shared/design-presets.js";
-import m from "./inputs/input/input.css?inline.js";
-import { defineComponent as h, effect as g, handle as _, html as v, onMount as y, ref as b, signal as x } from "@vielzeug/craftit";
+import { FIELD_SIZE_PRESET as d } from "./inputs/shared/design-presets.js";
+import f from "./inputs/input/input.css?inline.js";
+import { define as p, html as m, inject as h, ref as g, signal as _ } from "@vielzeug/craftit";
 //#region src/inputs/input/input.ts
-var S = [
+var v = [
 	"text",
 	"email",
 	"password",
@@ -27,156 +26,144 @@ var S = [
 	"datetime-local",
 	"month",
 	"week"
-], C = (e) => S.includes(e) ? e : "text", w = h({
+], y = (e) => v.includes(e) ? e : "text", b = p("bit-input", {
 	formAssociated: !0,
 	props: {
-		autocomplete: { default: void 0 },
-		clearable: { default: !1 },
-		color: { default: void 0 },
-		disabled: { default: !1 },
+		...r,
+		...n,
+		...e,
+		...t,
+		autocomplete: void 0,
+		clearable: !1,
 		error: {
 			default: "",
 			omit: !0
 		},
-		fullwidth: { default: !1 },
-		helper: { default: "" },
-		inputmode: { default: void 0 },
-		label: { default: "" },
-		"label-placement": { default: "inset" },
-		maxlength: { default: void 0 },
-		minlength: { default: void 0 },
-		name: { default: "" },
-		pattern: { default: void 0 },
-		placeholder: { default: "" },
-		readonly: { default: !1 },
-		required: { default: !1 },
-		rounded: { default: void 0 },
-		size: { default: void 0 },
-		type: { default: "text" },
-		value: { default: "" },
-		variant: { default: void 0 }
+		fullwidth: !1,
+		helper: "",
+		inputmode: void 0,
+		label: "",
+		"label-placement": "inset",
+		maxlength: void 0,
+		minlength: void 0,
+		name: "",
+		pattern: void 0,
+		placeholder: "",
+		readonly: !1,
+		required: !1,
+		type: "text",
+		value: "",
+		variant: void 0
 	},
 	setup({ emit: e, host: t, props: n }) {
-		let r = x(!1), p = () => n.type.value === "password" && r.value ? "text" : C(n.type.value), m = f(n, "input"), { errorId: h, fieldId: S, helperId: w, labelInsetId: T, labelInsetRef: E, labelOutsideId: D, labelOutsideRef: O, valueSignal: k } = m, A = b(), j = b(), M = b(), N = b(), P = b(), F = (e, t, n) => {
-			n == null || n === "" ? e.removeAttribute(t) : e.setAttribute(t, n);
-		};
-		return y(() => {
-			let r = A.value;
-			r && (l(r, {
-				onBlur: () => m.triggerValidation("blur"),
-				onChange: (t, n) => {
-					e("change", {
-						originalEvent: t,
-						value: n
-					}), m.triggerValidation("change");
-				},
-				onInput: (t, n) => e("input", {
+		let r = h(l, void 0), i = _(!1), a = g();
+		u(t.el, r, n);
+		let { assistive: o, attrs: s, clear: d, errorId: f, fieldId: p, helperId: v, labelInsetId: b, labelInsetRef: x, labelOutsideId: S, labelOutsideRef: C, value: w } = c({
+			autocomplete: n.autocomplete,
+			context: r,
+			disabled: n.disabled,
+			elementRef: a,
+			error: n.error,
+			helper: n.helper,
+			inputmode: n.inputmode,
+			label: n.label,
+			labelPlacement: n["label-placement"],
+			maxLength: n.maxlength,
+			minLength: n.minlength,
+			name: n.name,
+			onChange: (t, n) => {
+				e("change", {
 					originalEvent: t,
 					value: n
-				})
-			}), m.mountLabelSync(), g(() => {
-				let e = c(n.maxlength.value);
-				e == null ? r.removeAttribute("maxlength") : r.maxLength = e;
-				let t = c(n.minlength.value);
-				t == null ? r.removeAttribute("minlength") : r.minLength = t, F(r, "pattern", n.pattern.value ?? null), F(r, "inputmode", n.inputmode.value ?? null);
-				let i = n.autocomplete.value;
-				i == null || i === "" ? r.removeAttribute("autocomplete") : r.autocomplete = i;
-			}), d({
-				error: () => n.error.value,
-				errorRef: M,
-				helper: () => n.helper.value,
-				helperRef: j
-			}), u({
-				count: () => k.value.length,
-				format: "split",
-				maxLength: () => n.maxlength.value,
-				ref: P
-			}), g(() => {
-				k.value ? t.setAttribute("has-value", "") : t.removeAttribute("has-value");
-			}), import("@vielzeug/craftit").then(({ aria: e }) => {
-				e(r, {
-					describedby: () => n.error.value ? h : w,
-					errormessage: () => n.error.value ? h : null,
-					invalid: () => !!n.error.value
 				});
-			}), N.value && _(N.value, "click", (t) => {
-				t.preventDefault(), k.value = "", e("input", {
+			},
+			onInput: (t, n) => {
+				e("input", {
 					originalEvent: t,
-					value: ""
-				}), e("change", {
-					originalEvent: t,
-					value: ""
-				}), m.triggerValidation("change"), A.value?.focus();
-			}));
-		}), v`
+					value: n
+				});
+			},
+			pattern: n.pattern,
+			placeholder: n.placeholder,
+			prefix: "input",
+			readOnly: n.readonly,
+			required: n.required,
+			type: () => n.type.value === "password" && i.value ? "text" : y(n.type.value),
+			value: n.value
+		});
+		return t.bind("attr", { "has-value": () => w.value ? !0 : void 0 }), m`
       <div class="input-wrapper" part="wrapper">
         <label
           class="label-outside"
-          for="${S}"
-          id="${D}"
+          for="${p}"
+          id="${S}"
           part="label"
-          ref=${O}
+          ref=${C}
           hidden></label>
         <div class="field" part="field">
           <label
             class="label-inset"
-            for="${S}"
-            id="${T}"
+            for="${p}"
+            id="${b}"
             part="label"
-            ref=${E}
+            ref=${x}
             hidden></label>
           <div class="input-row" part="input-row">
             <slot name="prefix"></slot>
             <input
               part="input"
-              id="${S}"
-              ${i({
-			disabled: n.disabled,
-			name: n.name,
-			placeholder: n.placeholder,
-			readOnly: n.readonly,
-			required: n.required,
-			type: p,
-			value: k
-		})}
-              :aria-labelledby="${() => n["label-placement"].value === "outside" ? D : T}"
-              aria-describedby="${w}"
-              ref=${A} />
+              id="${p}"
+              ${s}
+              :aria-labelledby="${() => n["label-placement"].value === "outside" ? S : b}"
+              :aria-describedby="${() => o.value.hasError ? f : v}"
+              :aria-errormessage="${() => o.value.hasError ? f : null}"
+              :aria-invalid="${() => String(o.value.hasError)}"
+              ref=${a} />
             <slot name="suffix"></slot>
             <button
               class="pwd-toggle-btn"
               part="pwd-toggle"
               type="button"
-              :aria-label="${() => r.value ? "Hide password" : "Show password"}"
-              :aria-pressed="${() => String(r.value)}"
+              :aria-label="${() => i.value ? "Hide password" : "Show password"}"
+              :aria-pressed="${() => String(i.value)}"
               tabindex="-1"
               @click="${() => {
-			r.value = !r.value, A.value?.focus();
+			i.value = !i.value, a.value?.focus();
 		}}">
-              ${() => r.value ? s : o}
+              ${() => i.value ? m`<bit-icon name="eye-off" size="14" stroke-width="2" aria-hidden="true"></bit-icon>` : m`<bit-icon name="eye" size="14" stroke-width="2" aria-hidden="true"></bit-icon>`}
             </button>
-            <button class="clear-btn" part="clear" type="button" aria-label="Clear" tabindex="-1" ref=${N}>
-              ${a}
+            <button aria-label="Clear" class="clear-btn" part="clear" tabindex="-1" type="button" @click=${d}>
+              <bit-icon aria-hidden="true" name="x" size="12" stroke-width="2.5"></bit-icon>
             </button>
           </div>
         </div>
-        <div class="helper-text" id="${w}" part="helper" ref=${j} hidden></div>
-        <div class="helper-text" id="${h}" role="alert" part="error" ref=${M} hidden></div>
-        <div class="char-counter" part="char-counter" ref=${P} hidden></div>
+        <div class="helper-text" id="${v}" part="helper" ?hidden=${() => !o.value.showHelper}>
+          ${() => o.value.helperText}
+        </div>
+        <div class="helper-text" id="${f}" role="alert" part="error" ?hidden=${() => !o.value.hasError}>
+          ${() => o.value.errorText}
+        </div>
+        <div
+          class="char-counter"
+          part="char-counter"
+          :data-near-limit="${() => o.value.counterNearLimit && !o.value.counterAtLimit ? "" : null}"
+          :data-at-limit="${() => o.value.counterAtLimit ? "" : null}"
+          ?hidden=${() => !o.value.hasCounter}>
+          ${() => o.value.counterText}
+        </div>
       </div>
     `;
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [
-		e(p),
-		...r,
-		t(),
-		n("input"),
-		m
-	],
-	tag: "bit-input"
+		i(d),
+		...s,
+		a(),
+		o("input"),
+		f
+	]
 });
 //#endregion
-export { w as INPUT_TAG };
+export { b as INPUT_TAG };
 
 //# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../src/inputs/input/input.ts"],"sourcesContent":["import { defineComponent, effect, handle, html, onMount, ref, signal } from '@vielzeug/craftit';\nimport { attr } from '@vielzeug/craftit/directives';\n\nimport type { InputType, VisualVariant } from '../../types';\nimport type { TextFieldProps } from '../shared/base-props';\n\nimport { clearIcon, eyeIcon, eyeOffIcon } from '../../icons';\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { useTextField } from '../shared/composables';\nimport { FIELD_SIZE_PRESET } from '../shared/design-presets';\nimport { setupFieldEvents, syncCounter, syncSplitAssistive } from '../shared/dom-sync';\nimport { parsePositiveNumber } from '../shared/utils';\nimport componentStyles from './input.css?inline';\n\n/** Input component properties */\n\nexport type BitInputEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type BitInputProps = TextFieldProps<Exclude<VisualVariant, 'glass' | 'frost'>> & {\n  /** Autocomplete hint */\n  autocomplete?: string;\n  /** Show a clear (×) button when the field has a value */\n  clearable?: boolean;\n  /** Virtual keyboard hint for mobile devices */\n  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n  /** Maximum character length — shows a counter below the input */\n  maxlength?: number;\n  /** Minimum character length */\n  minlength?: number;\n  /** HTML pattern attribute for client-side validation */\n  pattern?: string;\n  /** HTML input type */\n  type?: InputType;\n};\n\nconst VALID_INPUT_TYPES = [\n  'text',\n  'email',\n  'password',\n  'search',\n  'url',\n  'tel',\n  'number',\n  'date',\n  'time',\n  'datetime-local',\n  'month',\n  'week',\n] as const;\n\nconst validateInputType = (type: string | null | undefined): string => {\n  return VALID_INPUT_TYPES.includes(type as (typeof VALID_INPUT_TYPES)[number]) ? type! : 'text';\n};\n\n/**\n * A customizable text input component with multiple variants, label placements, and form features.\n *\n * @element bit-input\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - Label placement: 'inset' | 'outside'\n * @attr {string} type - HTML input type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'\n * @attr {string} value - Current input value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {string} helper - Helper text displayed below the input\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {boolean} disabled - Disable input interaction\n * @attr {boolean} readonly - Make the input read-only\n * @attr {boolean} required - Mark the field as required\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text'\n * @attr {string} size - Input size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Emitted when input value changes (on every keystroke)\n * @fires change - Emitted when input loses focus with changed value\n *\n * @slot prefix - Content before the input (e.g., icons)\n * @slot suffix - Content after the input (e.g., clear button, validation icon)\n * @slot helper - Complex helper content below the input\n *\n * @part wrapper - The input wrapper element\n * @part label - The label element (inset or outside)\n * @part field - The field container element\n * @part input-row - The input row container element\n * @part input - The input element\n * @part helper - The helper text element\n *\n * @cssprop --input-bg - Background color\n * @cssprop --input-color - Text color\n * @cssprop --input-border-color - Border color\n * @cssprop --input-focus - Focus border color\n * @cssprop --input-placeholder-color - Placeholder text color\n * @cssprop --input-radius - Border radius\n * @cssprop --input-padding - Inner padding (vertical horizontal)\n * @cssprop --input-gap - Gap between prefix/suffix and input\n * @cssprop --input-font-size - Font size\n *\n * @example\n * ```html\n * <bit-input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n * <bit-input label=\"Name\" variant=\"bordered\" color=\"primary\" />\n * ```\n */\nexport const INPUT_TAG = defineComponent<BitInputProps, BitInputEvents>({\n  formAssociated: true,\n  props: {\n    autocomplete: { default: undefined },\n    clearable: { default: false },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '', omit: true },\n    fullwidth: { default: false },\n    helper: { default: '' },\n    inputmode: { default: undefined },\n    label: { default: '' },\n    'label-placement': { default: 'inset' },\n    maxlength: { default: undefined },\n    minlength: { default: undefined },\n    name: { default: '' },\n    pattern: { default: undefined },\n    placeholder: { default: '' },\n    readonly: { default: false },\n    required: { default: false },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    type: { default: 'text' },\n    value: { default: '' },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const showPassword = signal(false);\n\n    const resolvedInputType = (): string =>\n      props.type.value === 'password' && showPassword.value ? 'text' : validateInputType(props.type.value);\n\n    const tf = useTextField(props, 'input');\n    const {\n      errorId,\n      fieldId: inputId,\n      helperId,\n      labelInsetId,\n      labelInsetRef,\n      labelOutsideId,\n      labelOutsideRef,\n      valueSignal,\n    } = tf;\n\n    const inputRef = ref<HTMLInputElement>();\n    const helperRef = ref<HTMLDivElement>();\n    const errorRef = ref<HTMLDivElement>();\n    const clearBtnRef = ref<HTMLButtonElement>();\n    const charCounterRef = ref<HTMLDivElement>();\n\n    const syncOptionalAttr = (\n      inp: HTMLInputElement,\n      name: 'autocomplete' | 'inputmode' | 'pattern',\n      value: string | null | undefined,\n    ) => {\n      if (value == null || value === '') inp.removeAttribute(name);\n      else inp.setAttribute(name, value);\n    };\n\n    onMount(() => {\n      const inp = inputRef.value;\n\n      if (!inp) return;\n\n      setupFieldEvents(inp, {\n        onBlur: () => tf.triggerValidation('blur'),\n        onChange: (e, value) => {\n          emit('change', { originalEvent: e, value });\n          tf.triggerValidation('change');\n        },\n        onInput: (e, value) => emit('input', { originalEvent: e, value }),\n      });\n\n      tf.mountLabelSync();\n\n      effect(() => {\n        const maxLen = parsePositiveNumber(props.maxlength.value);\n\n        if (maxLen != null) inp.maxLength = maxLen;\n        else inp.removeAttribute('maxlength');\n\n        const minLen = parsePositiveNumber(props.minlength.value);\n\n        if (minLen != null) inp.minLength = minLen;\n        else inp.removeAttribute('minlength');\n\n        syncOptionalAttr(inp, 'pattern', props.pattern.value ?? null);\n        syncOptionalAttr(inp, 'inputmode', props.inputmode.value ?? null);\n\n        const autocomplete = props.autocomplete.value;\n\n        if (autocomplete == null || autocomplete === '') inp.removeAttribute('autocomplete');\n        else inp.autocomplete = autocomplete as AutoFill;\n      });\n\n      syncSplitAssistive({\n        error: () => props.error.value,\n        errorRef,\n        helper: () => props.helper.value,\n        helperRef,\n      });\n\n      syncCounter({\n        count: () => valueSignal.value.length,\n        format: 'split',\n        maxLength: () => props.maxlength.value,\n        ref: charCounterRef,\n      });\n\n      effect(() => {\n        if (valueSignal.value) host.setAttribute('has-value', '');\n        else host.removeAttribute('has-value');\n      });\n\n      // TODO: migrate aria() on inner elements to a future useA11yField() composable\n      // For now, keep the imperative aria() call inside onMount as-is\n      import('@vielzeug/craftit').then(({ aria }) => {\n        aria(inp, {\n          describedby: () => (props.error.value ? errorId : helperId),\n          errormessage: () => (props.error.value ? errorId : null),\n          invalid: () => !!props.error.value,\n        });\n      });\n\n      if (clearBtnRef.value) {\n        handle(clearBtnRef.value, 'click', (e: MouseEvent) => {\n          e.preventDefault();\n          valueSignal.value = '';\n          emit('input', { originalEvent: e, value: '' });\n          emit('change', { originalEvent: e, value: '' });\n          tf.triggerValidation('change');\n          inputRef.value?.focus();\n        });\n      }\n    });\n\n    return html`\n      <div class=\"input-wrapper\" part=\"wrapper\">\n        <label\n          class=\"label-outside\"\n          for=\"${inputId}\"\n          id=\"${labelOutsideId}\"\n          part=\"label\"\n          ref=${labelOutsideRef}\n          hidden></label>\n        <div class=\"field\" part=\"field\">\n          <label\n            class=\"label-inset\"\n            for=\"${inputId}\"\n            id=\"${labelInsetId}\"\n            part=\"label\"\n            ref=${labelInsetRef}\n            hidden></label>\n          <div class=\"input-row\" part=\"input-row\">\n            <slot name=\"prefix\"></slot>\n            <input\n              part=\"input\"\n              id=\"${inputId}\"\n              ${attr({\n                disabled: props.disabled,\n                name: props.name,\n                placeholder: props.placeholder,\n                readOnly: props.readonly,\n                required: props.required,\n                type: resolvedInputType,\n                value: valueSignal,\n              })}\n              :aria-labelledby=\"${() => (props['label-placement'].value === 'outside' ? labelOutsideId : labelInsetId)}\"\n              aria-describedby=\"${helperId}\"\n              ref=${inputRef} />\n            <slot name=\"suffix\"></slot>\n            <button\n              class=\"pwd-toggle-btn\"\n              part=\"pwd-toggle\"\n              type=\"button\"\n              :aria-label=\"${() => (showPassword.value ? 'Hide password' : 'Show password')}\"\n              :aria-pressed=\"${() => String(showPassword.value)}\"\n              tabindex=\"-1\"\n              @click=\"${() => {\n                showPassword.value = !showPassword.value;\n                inputRef.value?.focus();\n              }}\">\n              ${() => (showPassword.value ? eyeOffIcon : eyeIcon)}\n            </button>\n            <button class=\"clear-btn\" part=\"clear\" type=\"button\" aria-label=\"Clear\" tabindex=\"-1\" ref=${clearBtnRef}>\n              ${clearIcon}\n            </button>\n          </div>\n        </div>\n        <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ref=${helperRef} hidden></div>\n        <div class=\"helper-text\" id=\"${errorId}\" role=\"alert\" part=\"error\" ref=${errorRef} hidden></div>\n        <div class=\"char-counter\" part=\"char-counter\" ref=${charCounterRef} hidden></div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    sizeVariantMixin(FIELD_SIZE_PRESET),\n    ...formFieldMixins,\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('input'),\n    componentStyles,\n  ],\n  tag: 'bit-input',\n});\n"],"mappings":"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"}
+{"version":3,"file":"input.js","names":[],"sources":["../src/inputs/input/input.ts"],"sourcesContent":["import { define, html, inject, ref, signal } from '@vielzeug/craftit';\nimport { createTextFieldControl } from '@vielzeug/craftit/controls';\n\nimport type { InputType, VisualVariant } from '../../types';\nimport type { TextFieldProps } from '../shared/base-props';\n\nimport '../../content/icon/icon';\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle, type PropBundle } from '../shared/bundles';\nimport { FIELD_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport componentStyles from './input.css?inline';\n\n/** Input component properties */\n\nexport type BitInputEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type BitInputProps = TextFieldProps<Exclude<VisualVariant, 'glass' | 'frost'>> & {\n  /** Autocomplete hint */\n  autocomplete?: string;\n  /** Show a clear (×) button when the field has a value */\n  clearable?: boolean;\n  /** Virtual keyboard hint for mobile devices */\n  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n  /** Maximum character length — shows a counter below the input */\n  maxlength?: number;\n  /** Minimum character length */\n  minlength?: number;\n  /** HTML pattern attribute for client-side validation */\n  pattern?: string;\n  /** HTML input type */\n  type?: InputType;\n};\n\nconst VALID_INPUT_TYPES = [\n  'text',\n  'email',\n  'password',\n  'search',\n  'url',\n  'tel',\n  'number',\n  'date',\n  'time',\n  'datetime-local',\n  'month',\n  'week',\n] as const;\n\nconst validateInputType = (type: string | null | undefined): string => {\n  return VALID_INPUT_TYPES.includes(type as (typeof VALID_INPUT_TYPES)[number]) ? type! : 'text';\n};\n\nconst inputProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  ...roundableBundle,\n  autocomplete: undefined,\n  clearable: false,\n  error: { default: '' as string, omit: true },\n  fullwidth: false,\n  helper: '',\n  inputmode: undefined,\n  label: '',\n  'label-placement': 'inset',\n  maxlength: undefined,\n  minlength: undefined,\n  name: '',\n  pattern: undefined,\n  placeholder: '',\n  readonly: false,\n  required: false,\n  type: 'text',\n  value: '',\n  variant: undefined,\n} satisfies PropBundle<BitInputProps>;\n\n/**\n * A customizable text input component with multiple variants, label placements, and form features.\n *\n * @element bit-input\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - Label placement: 'inset' | 'outside'\n * @attr {string} type - HTML input type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'\n * @attr {string} value - Current input value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {string} helper - Helper text displayed below the input\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {boolean} disabled - Disable input interaction\n * @attr {boolean} readonly - Make the input read-only\n * @attr {boolean} required - Mark the field as required\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text'\n * @attr {string} size - Input size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Emitted when input value changes (on every keystroke)\n * @fires change - Emitted when input loses focus with changed value\n *\n * @slot prefix - Content before the input (e.g., icons)\n * @slot suffix - Content after the input (e.g., clear button, validation icon)\n * @slot helper - Complex helper content below the input\n *\n * @part wrapper - The input wrapper element\n * @part label - The label element (inset or outside)\n * @part field - The field container element\n * @part input-row - The input row container element\n * @part input - The input element\n * @part helper - The helper text element\n *\n * @cssprop --input-bg - Background color\n * @cssprop --input-color - Text color\n * @cssprop --input-border-color - Border color\n * @cssprop --input-focus - Focus border color\n * @cssprop --input-placeholder-color - Placeholder text color\n * @cssprop --input-radius - Border radius\n * @cssprop --input-padding - Inner padding (vertical horizontal)\n * @cssprop --input-gap - Gap between prefix/suffix and input\n * @cssprop --input-font-size - Font size\n *\n * @example\n * ```html\n * <bit-input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n * <bit-input label=\"Name\" variant=\"bordered\" color=\"primary\" />\n * ```\n */\nexport const INPUT_TAG = define<BitInputProps, BitInputEvents>('bit-input', {\n  formAssociated: true,\n  props: inputProps,\n  setup({ emit, host, props }) {\n    const formCtx = inject(FORM_CTX, undefined);\n    const showPassword = signal(false);\n    const inputRef = ref<HTMLInputElement>();\n\n    mountFormContextSync(host.el, formCtx, props);\n\n    const resolvedInputType = (): string =>\n      props.type.value === 'password' && showPassword.value ? 'text' : validateInputType(props.type.value);\n\n    const {\n      assistive,\n      attrs: inputAttrs,\n      clear,\n      errorId,\n      fieldId: inputId,\n      helperId,\n      labelInsetId,\n      labelInsetRef,\n      labelOutsideId,\n      labelOutsideRef,\n      value: fieldValue,\n    } = createTextFieldControl({\n      autocomplete: props.autocomplete,\n      context: formCtx,\n      disabled: props.disabled,\n      elementRef: inputRef,\n      error: props.error,\n      helper: props.helper,\n      inputmode: props.inputmode,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      minLength: props.minlength,\n      name: props.name,\n      onChange: (event, value) => {\n        emit('change', { originalEvent: event, value });\n      },\n      onInput: (event, value) => {\n        emit('input', { originalEvent: event, value });\n      },\n      pattern: props.pattern,\n      placeholder: props.placeholder,\n      prefix: 'input',\n      readOnly: props.readonly,\n      required: props.required,\n      type: resolvedInputType,\n      value: props.value,\n    });\n\n    host.bind('attr', {\n      'has-value': () => (fieldValue.value ? true : undefined),\n    });\n\n    return html`\n      <div class=\"input-wrapper\" part=\"wrapper\">\n        <label\n          class=\"label-outside\"\n          for=\"${inputId}\"\n          id=\"${labelOutsideId}\"\n          part=\"label\"\n          ref=${labelOutsideRef}\n          hidden></label>\n        <div class=\"field\" part=\"field\">\n          <label\n            class=\"label-inset\"\n            for=\"${inputId}\"\n            id=\"${labelInsetId}\"\n            part=\"label\"\n            ref=${labelInsetRef}\n            hidden></label>\n          <div class=\"input-row\" part=\"input-row\">\n            <slot name=\"prefix\"></slot>\n            <input\n              part=\"input\"\n              id=\"${inputId}\"\n              ${inputAttrs}\n              :aria-labelledby=\"${() => (props['label-placement'].value === 'outside' ? labelOutsideId : labelInsetId)}\"\n              :aria-describedby=\"${() => (assistive.value.hasError ? errorId : helperId)}\"\n              :aria-errormessage=\"${() => (assistive.value.hasError ? errorId : null)}\"\n              :aria-invalid=\"${() => String(assistive.value.hasError)}\"\n              ref=${inputRef} />\n            <slot name=\"suffix\"></slot>\n            <button\n              class=\"pwd-toggle-btn\"\n              part=\"pwd-toggle\"\n              type=\"button\"\n              :aria-label=\"${() => (showPassword.value ? 'Hide password' : 'Show password')}\"\n              :aria-pressed=\"${() => String(showPassword.value)}\"\n              tabindex=\"-1\"\n              @click=\"${() => {\n                showPassword.value = !showPassword.value;\n                inputRef.value?.focus();\n              }}\">\n              ${() =>\n                showPassword.value\n                  ? html`<bit-icon name=\"eye-off\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></bit-icon>`\n                  : html`<bit-icon name=\"eye\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></bit-icon>`}\n            </button>\n            <button aria-label=\"Clear\" class=\"clear-btn\" part=\"clear\" tabindex=\"-1\" type=\"button\" @click=${clear}>\n              <bit-icon aria-hidden=\"true\" name=\"x\" size=\"12\" stroke-width=\"2.5\"></bit-icon>\n            </button>\n          </div>\n        </div>\n        <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ?hidden=${() => !assistive.value.showHelper}>\n          ${() => assistive.value.helperText}\n        </div>\n        <div class=\"helper-text\" id=\"${errorId}\" role=\"alert\" part=\"error\" ?hidden=${() => !assistive.value.hasError}>\n          ${() => assistive.value.errorText}\n        </div>\n        <div\n          class=\"char-counter\"\n          part=\"char-counter\"\n          :data-near-limit=\"${() => (assistive.value.counterNearLimit && !assistive.value.counterAtLimit ? '' : null)}\"\n          :data-at-limit=\"${() => (assistive.value.counterAtLimit ? '' : null)}\"\n          ?hidden=${() => !assistive.value.hasCounter}>\n          ${() => assistive.value.counterText}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    sizeVariantMixin(FIELD_SIZE_PRESET),\n    ...formFieldMixins,\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('input'),\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}

package/dist/inputs/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/inputs/button/button.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAaxH,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG,aAAa,GACxC,YAAY,GACZ,eAAe,GAAG;IAChB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,kCAAkC;IAClC,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;CAC3C,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,UAAU,QA6HrB,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/inputs/button/button.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAqBxH,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG,aAAa,GACxC,YAAY,GACZ,eAAe,GAAG;IAChB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,kCAAkC;IAClC,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;CAC3C,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,UAAU,QAiIrB,CAAC"}

package/dist/inputs/button-group/button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/button-group/button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiD,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEvG,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5E,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,cAAc,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9C,IAAI,EAAE,cAAc,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAChD,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;CACtE,CAAC;AACF,kDAAkD;AAClD,eAAO,MAAM,gBAAgB,8DAA0D,CAAC;AAIxF,wCAAwC;AACxC,MAAM,MAAM,mBAAmB,GAAG;IAChC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,gDAAgD;IAChD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;CAC3C,CAAC;AAGF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,gBAAgB,QAyB3B,CAAC"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/button-group/button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE9F,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAK5E,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,cAAc,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9C,IAAI,EAAE,cAAc,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAChD,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;CACtE,CAAC;AACF,kDAAkD;AAClD,eAAO,MAAM,gBAAgB,8DAA0D,CAAC;AAExF,wCAAwC;AACxC,MAAM,MAAM,mBAAmB,GAAG;IAChC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,gDAAgD;IAChD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;CAC3C,CAAC;AAGF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,gBAAgB,QAwB3B,CAAC"}

package/dist/inputs/checkbox/checkbox.d.ts

@@ -1,11 +1,8 @@
+import { type CheckableChangePayload } from '@vielzeug/craftit/controls';
 import type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';
+import '../../content/icon/icon';
 export type BitCheckboxEvents = {
-    change: {
-        checked: boolean;
-        fieldValue: string;
-        originalEvent?: Event;
-        value: boolean;
-    };
+    change: CheckableChangePayload;
 };
 export type BitCheckboxProps = CheckableProps & ThemableProps & SizableProps & DisablableProps & {
     /** Error message (marks field as invalid) */
@@ -30,7 +27,7 @@ export type BitCheckboxProps = CheckableProps & ThemableProps & SizableProps & D
  * @attr {string} error - Error message (marks field as invalid)
  * @attr {string} helper - Helper text displayed below the checkbox
  *
- * @fires change - Emitted when checkbox is toggled. detail: { value: boolean, checked: boolean, fieldValue: string, originalEvent?: Event }
+ * @fires change - Emitted when checkbox is toggled. detail: { checked: boolean, fieldValue: string, originalEvent?: Event }
  *
  * @slot - Checkbox label text
  *

package/dist/inputs/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox/checkbox.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAShG,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC;CACzF,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAC3C,aAAa,GACb,YAAY,GACZ,eAAe,GAAG;IAChB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,YAAY,QAsHvB,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox/checkbox.ts"],"names":[],"mappings":"AACA,OAAO,EAA+B,KAAK,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEtG,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEhG,OAAO,yBAAyB,CAAC;AASjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,sBAAsB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAC3C,aAAa,GACb,YAAY,GACZ,eAAe,GAAG;IAChB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAcJ;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,YAAY,QA0EvB,CAAC"}

package/dist/inputs/checkbox-group/checkbox-group.d.ts

@@ -20,6 +20,8 @@ export type BitCheckboxGroupProps = {
     helper?: string;
     /** Legend / label for the fieldset. Required for accessibility. */
     label?: string;
+    /** Form field name used during submission */
+    name?: string;
     /** Layout direction of the checkbox options */
     orientation?: 'vertical' | 'horizontal';
     /** Mark the group as required */
@@ -43,6 +45,7 @@ export type BitCheckboxGroupEvents = {
  * @attr {boolean} disabled - Disable all checkboxes in the group
  * @attr {string} error - Error message
  * @attr {string} helper - Helper text
+ * @attr {string} name - Form field name
  * @attr {string} color - Theme color
  * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
  * @attr {string} orientation - Layout: 'vertical' | 'horizontal'

package/dist/inputs/checkbox-group/checkbox-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox-group/checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAYL,KAAK,cAAc,EAEpB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK7D,OAAO,EAA4C,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKpG,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,cAAc,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9C,QAAQ,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,EAAE,cAAc,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAChD,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvD,MAAM,EAAE,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,kBAAkB,gEAA8D,CAAC;AAI9F,MAAM,MAAM,qBAAqB,GAAG;IAClC,kEAAkE;IAClE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,kBAAkB,QA4H7B,CAAC"}
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox-group/checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EAEpB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM7D,OAAO,EAA4B,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKpF,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,cAAc,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9C,QAAQ,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,EAAE,cAAc,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAChD,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvD,MAAM,EAAE,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,kBAAkB,gEAA8D,CAAC;AAI9F,MAAM,MAAM,qBAAqB,GAAG;IAClC,kEAAkE;IAClE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAeF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,kBAAkB,QAsI7B,CAAC"}

package/dist/inputs/combobox/combobox-virtualizer.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../virtualit/dist/dom/dom.cjs`);require(`../../virtualit/dist/dom.cjs`);function t(t){let n=[],r=null;function i(e){return t.getIsMultiple()?t.getSelectedValues().some(t=>t.value===e.value):e.value===t.getSelectedValue()}function a(e){if(!r)return;for(let e of Array.from(r.querySelectorAll(`.option`)))e.remove();let a=t.getFocusedIndex();for(let o of e){let e=n[o.index];if(!e)continue;let s=i(e),c=document.createElement(`div`);if(c.className=`option`,c.setAttribute(`role`,`option`),c.id=`${t.comboId}-opt-${o.index}`,c.setAttribute(`aria-selected`,String(s)),c.setAttribute(`aria-disabled`,String(!!e.disabled)),c.style.cssText=`position:absolute;top:0;left:0;right:0;transform:translateY(${o.top}px);`,a===o.index&&c.setAttribute(`data-focused`,``),s&&c.setAttribute(`data-selected`,``),e.disabled&&c.setAttribute(`data-disabled`,``),e.iconEl){let t=document.createElement(`span`);t.className=`option-icon`,t.setAttribute(`aria-hidden`,`true`);let n=e.iconEl.cloneNode(!0);n.removeAttribute(`slot`),t.appendChild(n),c.appendChild(t)}let l=document.createElement(`span`);l.textContent=e.label,c.appendChild(l);let u=document.createElement(`span`);u.className=`option-check`,u.setAttribute(`aria-hidden`,`true`),u.innerHTML=t.checkIconHTML,c.appendChild(u),c.addEventListener(`pointerdown`,e=>{e.preventDefault()}),c.addEventListener(`click`,n=>{n.stopPropagation(),t.onSelectOption(e,n)}),c.addEventListener(`pointerenter`,()=>{t.setFocusedIndex(o.index);for(let e of r.querySelectorAll(`[data-focused]`))e.removeAttribute(`data-focused`);c.setAttribute(`data-focused`,``)}),r.appendChild(c)}}function o(){if(!r)return;let e=t.getFocusedIndex();for(let a of r.querySelectorAll(`.option`)){let r=Number(a.id.replace(`${t.comboId}-opt-`,``)),o=n[r];if(!o)continue;let s=i(o);a.toggleAttribute(`data-focused`,r===e),a.toggleAttribute(`data-selected`,s),a.setAttribute(`aria-selected`,String(s))}}let s=e.t({clear:e=>{for(let t of Array.from(e.querySelectorAll(`.option`)))t.remove()},estimateSize:36,getListElement:t.getListboxElement,getScrollElement:t.getDropdownElement,overscan:4,render:({items:e,listEl:t,virtualItems:i})=>{n=e,r=t,a(i)}});function c(e,t){n=e,s.update(n,t)}return{domVirtualList:s,setupVirtualizer:c,updateRenderedItemState:o}}exports.createComboboxVirtualizer=t;
+const e=require(`../../packages/virtualit/dist/dom/dom.cjs`);function t(t){let n=[],r=null;function i(e){return t.getIsMultiple()?t.getSelectedValues().some(t=>t.value===e.value):e.value===t.getSelectedValue()}function a(e){if(!r)return;for(let e of Array.from(r.querySelectorAll(`.option`)))e.remove();let a=t.getFocusedIndex();for(let s of e){let e=n[s.index];if(!e)continue;let c=i(e),l=document.createElement(`div`);if(l.className=`option`,l.setAttribute(`role`,`option`),l.id=`${t.comboId}-opt-${s.index}`,l.setAttribute(`aria-selected`,String(c)),l.setAttribute(`aria-disabled`,String(!!e.disabled)),l.style.cssText=`position:absolute;top:0;left:0;right:0;transform:translateY(${s.top}px);`,l.toggleAttribute(`data-focused`,a===s.index),l.toggleAttribute(`data-selected`,c),l.toggleAttribute(`data-disabled`,!!e.disabled),e.iconEl){let t=document.createElement(`span`);t.className=`option-icon`,t.setAttribute(`aria-hidden`,`true`);let n=e.iconEl.cloneNode(!0);n.removeAttribute(`slot`),t.appendChild(n),l.appendChild(t)}let u=document.createElement(`span`);u.textContent=e.label,l.appendChild(u);let d=document.createElement(`span`);d.className=`option-check`,d.setAttribute(`aria-hidden`,`true`),d.innerHTML=t.checkIconHTML,l.appendChild(d),l.addEventListener(`pointerdown`,e=>{e.preventDefault()}),l.addEventListener(`click`,n=>{n.stopPropagation(),t.onSelectOption(e,n)}),l.addEventListener(`pointerenter`,()=>{t.setFocusedIndex(s.index),o()}),r.appendChild(l)}}function o(){if(!r)return;let e=t.getFocusedIndex();for(let a of r.querySelectorAll(`.option`)){let r=Number(a.id.replace(`${t.comboId}-opt-`,``)),o=n[r];if(!o)continue;let s=i(o);a.toggleAttribute(`data-focused`,r===e),a.toggleAttribute(`data-selected`,s),a.setAttribute(`aria-selected`,String(s))}}let s=e.t({clear:e=>{for(let t of Array.from(e.querySelectorAll(`.option`)))t.remove()},estimateSize:36,getListElement:t.getListboxElement,getScrollElement:t.getDropdownElement,overscan:4,render:({items:e,listEl:t,virtualItems:i})=>{n=e,r=t,a(i)}});function c(e,t){n=e,s.setActive(t),s.setItems(n)}return{domVirtualList:s,setupVirtualizer:c,updateRenderedItemState:o}}exports.createComboboxVirtualizer=t;
 //# sourceMappingURL=combobox-virtualizer.cjs.map

package/dist/inputs/combobox/combobox-virtualizer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-virtualizer.cjs","names":[],"sources":["../../../src/inputs/combobox/combobox-virtualizer.ts"],"sourcesContent":["import { createDomVirtualList, type VirtualItem } from '@vielzeug/virtualit/dom';\n\nimport type { ComboboxOptionItem, ComboboxSelectionItem } from './combobox.types';\n\ntype ComboboxVirtualizerDeps = {\n  checkIconHTML: string;\n  comboId: string;\n  getDropdownElement: () => HTMLElement | null;\n  getFocusedIndex: () => number;\n  getIsMultiple: () => boolean;\n  getListboxElement: () => HTMLElement | null;\n  getSelectedValue: () => string;\n  getSelectedValues: () => ComboboxSelectionItem[];\n  onSelectOption: (opt: ComboboxOptionItem, event?: Event) => void;\n  setFocusedIndex: (index: number) => void;\n};\n\nexport function createComboboxVirtualizer(deps: ComboboxVirtualizerDeps) {\n  let currentOptions: ComboboxOptionItem[] = [];\n  let cachedListbox: HTMLElement | null = null;\n\n  function isSelectedOption(option: ComboboxOptionItem): boolean {\n    if (deps.getIsMultiple()) return deps.getSelectedValues().some((selected) => selected.value === option.value);\n\n    return option.value === deps.getSelectedValue();\n  }\n\n  function renderVirtualItems(virtualItems: VirtualItem[]) {\n    if (!cachedListbox) return;\n\n    for (const element of Array.from(cachedListbox.querySelectorAll('.option'))) element.remove();\n\n    const focused = deps.getFocusedIndex();\n\n    for (const item of virtualItems) {\n      const option = currentOptions[item.index];\n\n      if (!option) continue;\n\n      const isSelected = isSelectedOption(option);\n      const optionElement = document.createElement('div');\n\n      optionElement.className = 'option';\n      optionElement.setAttribute('role', 'option');\n      optionElement.id = `${deps.comboId}-opt-${item.index}`;\n      optionElement.setAttribute('aria-selected', String(isSelected));\n      optionElement.setAttribute('aria-disabled', String(!!option.disabled));\n      optionElement.style.cssText = `position:absolute;top:0;left:0;right:0;transform:translateY(${item.top}px);`;\n\n      if (focused === item.index) optionElement.setAttribute('data-focused', '');\n\n      if (isSelected) optionElement.setAttribute('data-selected', '');\n\n      if (option.disabled) optionElement.setAttribute('data-disabled', '');\n\n      if (option.iconEl) {\n        const iconWrapper = document.createElement('span');\n\n        iconWrapper.className = 'option-icon';\n        iconWrapper.setAttribute('aria-hidden', 'true');\n\n        const iconClone = option.iconEl.cloneNode(true) as Element;\n\n        iconClone.removeAttribute('slot');\n        iconWrapper.appendChild(iconClone);\n        optionElement.appendChild(iconWrapper);\n      }\n\n      const labelElement = document.createElement('span');\n\n      labelElement.textContent = option.label;\n      optionElement.appendChild(labelElement);\n\n      const checkElement = document.createElement('span');\n\n      checkElement.className = 'option-check';\n      checkElement.setAttribute('aria-hidden', 'true');\n      checkElement.innerHTML = deps.checkIconHTML;\n      optionElement.appendChild(checkElement);\n      optionElement.addEventListener('pointerdown', (event: PointerEvent) => {\n        event.preventDefault();\n      });\n      optionElement.addEventListener('click', (event: MouseEvent) => {\n        event.stopPropagation();\n        deps.onSelectOption(option, event);\n      });\n      optionElement.addEventListener('pointerenter', () => {\n        deps.setFocusedIndex(item.index);\n\n        for (const focusedElement of cachedListbox!.querySelectorAll<HTMLElement>('[data-focused]')) {\n          focusedElement.removeAttribute('data-focused');\n        }\n        optionElement.setAttribute('data-focused', '');\n      });\n      cachedListbox.appendChild(optionElement);\n    }\n  }\n\n  function updateRenderedItemState() {\n    if (!cachedListbox) return;\n\n    const focused = deps.getFocusedIndex();\n\n    for (const element of cachedListbox.querySelectorAll<HTMLElement>('.option')) {\n      const idx = Number(element.id.replace(`${deps.comboId}-opt-`, ''));\n      const option = currentOptions[idx];\n\n      if (!option) continue;\n\n      const isSelected = isSelectedOption(option);\n\n      element.toggleAttribute('data-focused', idx === focused);\n      element.toggleAttribute('data-selected', isSelected);\n      element.setAttribute('aria-selected', String(isSelected));\n    }\n  }\n\n  const domVirtualList = createDomVirtualList<ComboboxOptionItem>({\n    clear: (listEl) => {\n      for (const element of Array.from(listEl.querySelectorAll('.option'))) element.remove();\n    },\n    estimateSize: 36,\n    getListElement: deps.getListboxElement,\n    getScrollElement: deps.getDropdownElement,\n    overscan: 4,\n    render: ({ items, listEl, virtualItems }) => {\n      currentOptions = items;\n      cachedListbox = listEl;\n      renderVirtualItems(virtualItems);\n    },\n  });\n\n  function setupVirtualizer(options: ComboboxOptionItem[], isOpen: boolean) {\n    currentOptions = options;\n    domVirtualList.update(currentOptions, isOpen);\n  }\n\n  return { domVirtualList, setupVirtualizer, updateRenderedItemState };\n}\n"],"mappings":"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"}
+{"version":3,"file":"combobox-virtualizer.cjs","names":[],"sources":["../../../src/inputs/combobox/combobox-virtualizer.ts"],"sourcesContent":["import { createDomVirtualList, type VirtualItem } from '@vielzeug/virtualit/dom';\n\nimport type { ComboboxOptionItem, ComboboxSelectionItem } from './combobox.types';\n\ntype ComboboxVirtualizerDeps = {\n  checkIconHTML: string;\n  comboId: string;\n  getDropdownElement: () => HTMLElement | null;\n  getFocusedIndex: () => number;\n  getIsMultiple: () => boolean;\n  getListboxElement: () => HTMLElement | null;\n  getSelectedValue: () => string;\n  getSelectedValues: () => ComboboxSelectionItem[];\n  onSelectOption: (opt: ComboboxOptionItem, event?: Event) => void;\n  setFocusedIndex: (index: number) => void;\n};\n\nexport function createComboboxVirtualizer(deps: ComboboxVirtualizerDeps) {\n  let currentOptions: ComboboxOptionItem[] = [];\n  let cachedListbox: HTMLElement | null = null;\n\n  function isSelectedOption(option: ComboboxOptionItem): boolean {\n    if (deps.getIsMultiple()) return deps.getSelectedValues().some((selected) => selected.value === option.value);\n\n    return option.value === deps.getSelectedValue();\n  }\n\n  function renderVirtualItems(virtualItems: VirtualItem[]) {\n    if (!cachedListbox) return;\n\n    for (const element of Array.from(cachedListbox.querySelectorAll('.option'))) element.remove();\n\n    const focused = deps.getFocusedIndex();\n\n    for (const item of virtualItems) {\n      const option = currentOptions[item.index];\n\n      if (!option) continue;\n\n      const isSelected = isSelectedOption(option);\n      const optionElement = document.createElement('div');\n\n      optionElement.className = 'option';\n      optionElement.setAttribute('role', 'option');\n      optionElement.id = `${deps.comboId}-opt-${item.index}`;\n      optionElement.setAttribute('aria-selected', String(isSelected));\n      optionElement.setAttribute('aria-disabled', String(!!option.disabled));\n      optionElement.style.cssText = `position:absolute;top:0;left:0;right:0;transform:translateY(${item.top}px);`;\n      optionElement.toggleAttribute('data-focused', focused === item.index);\n      optionElement.toggleAttribute('data-selected', isSelected);\n      optionElement.toggleAttribute('data-disabled', !!option.disabled);\n\n      if (option.iconEl) {\n        const iconWrapper = document.createElement('span');\n\n        iconWrapper.className = 'option-icon';\n        iconWrapper.setAttribute('aria-hidden', 'true');\n\n        const iconClone = option.iconEl.cloneNode(true) as Element;\n\n        iconClone.removeAttribute('slot');\n        iconWrapper.appendChild(iconClone);\n        optionElement.appendChild(iconWrapper);\n      }\n\n      const labelElement = document.createElement('span');\n\n      labelElement.textContent = option.label;\n      optionElement.appendChild(labelElement);\n\n      const checkElement = document.createElement('span');\n\n      checkElement.className = 'option-check';\n      checkElement.setAttribute('aria-hidden', 'true');\n      checkElement.innerHTML = deps.checkIconHTML;\n      optionElement.appendChild(checkElement);\n      optionElement.addEventListener('pointerdown', (event: PointerEvent) => {\n        event.preventDefault();\n      });\n      optionElement.addEventListener('click', (event: MouseEvent) => {\n        event.stopPropagation();\n        deps.onSelectOption(option, event);\n      });\n      optionElement.addEventListener('pointerenter', () => {\n        deps.setFocusedIndex(item.index);\n\n        updateRenderedItemState();\n      });\n      cachedListbox.appendChild(optionElement);\n    }\n  }\n\n  function updateRenderedItemState() {\n    if (!cachedListbox) return;\n\n    const focused = deps.getFocusedIndex();\n\n    for (const element of cachedListbox.querySelectorAll<HTMLElement>('.option')) {\n      const idx = Number(element.id.replace(`${deps.comboId}-opt-`, ''));\n      const option = currentOptions[idx];\n\n      if (!option) continue;\n\n      const isSelected = isSelectedOption(option);\n\n      element.toggleAttribute('data-focused', idx === focused);\n      element.toggleAttribute('data-selected', isSelected);\n      element.setAttribute('aria-selected', String(isSelected));\n    }\n  }\n\n  const domVirtualList = createDomVirtualList<ComboboxOptionItem>({\n    clear: (listEl) => {\n      for (const element of Array.from(listEl.querySelectorAll('.option'))) element.remove();\n    },\n    estimateSize: 36,\n    getListElement: deps.getListboxElement,\n    getScrollElement: deps.getDropdownElement,\n    overscan: 4,\n    render: ({ items, listEl, virtualItems }) => {\n      currentOptions = items;\n      cachedListbox = listEl;\n      renderVirtualItems(virtualItems);\n    },\n  });\n\n  function setupVirtualizer(options: ComboboxOptionItem[], isOpen: boolean) {\n    currentOptions = options;\n    domVirtualList.setActive(isOpen);\n    domVirtualList.setItems(currentOptions);\n  }\n\n  return { domVirtualList, setupVirtualizer, updateRenderedItemState };\n}\n"],"mappings":"6DAiBA,SAAgB,EAA0B,EAA+B,CACvE,IAAI,EAAuC,EAAE,CACzC,EAAoC,KAExC,SAAS,EAAiB,EAAqC,CAG7D,OAFI,EAAK,eAAe,CAAS,EAAK,mBAAmB,CAAC,KAAM,GAAa,EAAS,QAAU,EAAO,MAAM,CAEtG,EAAO,QAAU,EAAK,kBAAkB,CAGjD,SAAS,EAAmB,EAA6B,CACvD,GAAI,CAAC,EAAe,OAEpB,IAAK,IAAM,KAAW,MAAM,KAAK,EAAc,iBAAiB,UAAU,CAAC,CAAE,EAAQ,QAAQ,CAE7F,IAAM,EAAU,EAAK,iBAAiB,CAEtC,IAAK,IAAM,KAAQ,EAAc,CAC/B,IAAM,EAAS,EAAe,EAAK,OAEnC,GAAI,CAAC,EAAQ,SAEb,IAAM,EAAa,EAAiB,EAAO,CACrC,EAAgB,SAAS,cAAc,MAAM,CAYnD,GAVA,EAAc,UAAY,SAC1B,EAAc,aAAa,OAAQ,SAAS,CAC5C,EAAc,GAAK,GAAG,EAAK,QAAQ,OAAO,EAAK,QAC/C,EAAc,aAAa,gBAAiB,OAAO,EAAW,CAAC,CAC/D,EAAc,aAAa,gBAAiB,OAAO,CAAC,CAAC,EAAO,SAAS,CAAC,CACtE,EAAc,MAAM,QAAU,+DAA+D,EAAK,IAAI,MACtG,EAAc,gBAAgB,eAAgB,IAAY,EAAK,MAAM,CACrE,EAAc,gBAAgB,gBAAiB,EAAW,CAC1D,EAAc,gBAAgB,gBAAiB,CAAC,CAAC,EAAO,SAAS,CAE7D,EAAO,OAAQ,CACjB,IAAM,EAAc,SAAS,cAAc,OAAO,CAElD,EAAY,UAAY,cACxB,EAAY,aAAa,cAAe,OAAO,CAE/C,IAAM,EAAY,EAAO,OAAO,UAAU,GAAK,CAE/C,EAAU,gBAAgB,OAAO,CACjC,EAAY,YAAY,EAAU,CAClC,EAAc,YAAY,EAAY,CAGxC,IAAM,EAAe,SAAS,cAAc,OAAO,CAEnD,EAAa,YAAc,EAAO,MAClC,EAAc,YAAY,EAAa,CAEvC,IAAM,EAAe,SAAS,cAAc,OAAO,CAEnD,EAAa,UAAY,eACzB,EAAa,aAAa,cAAe,OAAO,CAChD,EAAa,UAAY,EAAK,cAC9B,EAAc,YAAY,EAAa,CACvC,EAAc,iBAAiB,cAAgB,GAAwB,CACrE,EAAM,gBAAgB,EACtB,CACF,EAAc,iBAAiB,QAAU,GAAsB,CAC7D,EAAM,iBAAiB,CACvB,EAAK,eAAe,EAAQ,EAAM,EAClC,CACF,EAAc,iBAAiB,mBAAsB,CACnD,EAAK,gBAAgB,EAAK,MAAM,CAEhC,GAAyB,EACzB,CACF,EAAc,YAAY,EAAc,EAI5C,SAAS,GAA0B,CACjC,GAAI,CAAC,EAAe,OAEpB,IAAM,EAAU,EAAK,iBAAiB,CAEtC,IAAK,IAAM,KAAW,EAAc,iBAA8B,UAAU,CAAE,CAC5E,IAAM,EAAM,OAAO,EAAQ,GAAG,QAAQ,GAAG,EAAK,QAAQ,OAAQ,GAAG,CAAC,CAC5D,EAAS,EAAe,GAE9B,GAAI,CAAC,EAAQ,SAEb,IAAM,EAAa,EAAiB,EAAO,CAE3C,EAAQ,gBAAgB,eAAgB,IAAQ,EAAQ,CACxD,EAAQ,gBAAgB,gBAAiB,EAAW,CACpD,EAAQ,aAAa,gBAAiB,OAAO,EAAW,CAAC,EAI7D,IAAM,EAAiB,EAAA,EAAyC,CAC9D,MAAQ,GAAW,CACjB,IAAK,IAAM,KAAW,MAAM,KAAK,EAAO,iBAAiB,UAAU,CAAC,CAAE,EAAQ,QAAQ,EAExF,aAAc,GACd,eAAgB,EAAK,kBACrB,iBAAkB,EAAK,mBACvB,SAAU,EACV,QAAS,CAAE,QAAO,SAAQ,kBAAmB,CAC3C,EAAiB,EACjB,EAAgB,EAChB,EAAmB,EAAa,EAEnC,CAAC,CAEF,SAAS,EAAiB,EAA+B,EAAiB,CACxE,EAAiB,EACjB,EAAe,UAAU,EAAO,CAChC,EAAe,SAAS,EAAe,CAGzC,MAAO,CAAE,iBAAgB,mBAAkB,0BAAyB"}

package/dist/inputs/combobox/combobox-virtualizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-virtualizer.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox-virtualizer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAElF,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,iBAAiB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC5C,gBAAgB,EAAE,MAAM,MAAM,CAAC;IAC/B,iBAAiB,EAAE,MAAM,qBAAqB,EAAE,CAAC;IACjD,cAAc,EAAE,CAAC,GAAG,EAAE,kBAAkB,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjE,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,uBAAuB;;gCAmHlC,kBAAkB,EAAE,UAAU,OAAO;;EAMzE"}
+{"version":3,"file":"combobox-virtualizer.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox-virtualizer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAElF,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,iBAAiB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC5C,gBAAgB,EAAE,MAAM,MAAM,CAAC;IAC/B,iBAAiB,EAAE,MAAM,qBAAqB,EAAE,CAAC;IACjD,cAAc,EAAE,CAAC,GAAG,EAAE,kBAAkB,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjE,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,uBAAuB;;gCA6GlC,kBAAkB,EAAE,UAAU,OAAO;;EAOzE"}

package/dist/inputs/combobox/combobox-virtualizer.js

@@ -1,5 +1,4 @@
-import { t as e } from "../../virtualit/dist/dom/dom.js";
-import "../../virtualit/dist/dom.js";
+import { t as e } from "../../packages/virtualit/dist/dom/dom.js";
 //#region src/inputs/combobox/combobox-virtualizer.ts
 function t(t) {
 	let n = [], r = null;
@@ -10,28 +9,26 @@ function t(t) {
 		if (!r) return;
 		for (let e of Array.from(r.querySelectorAll(".option"))) e.remove();
 		let a = t.getFocusedIndex();
-		for (let o of e) {
-			let e = n[o.index];
+		for (let s of e) {
+			let e = n[s.index];
 			if (!e) continue;
-			let s = i(e), c = document.createElement("div");
-			if (c.className = "option", c.setAttribute("role", "option"), c.id = `${t.comboId}-opt-${o.index}`, c.setAttribute("aria-selected", String(s)), c.setAttribute("aria-disabled", String(!!e.disabled)), c.style.cssText = `position:absolute;top:0;left:0;right:0;transform:translateY(${o.top}px);`, a === o.index && c.setAttribute("data-focused", ""), s && c.setAttribute("data-selected", ""), e.disabled && c.setAttribute("data-disabled", ""), e.iconEl) {
+			let c = i(e), l = document.createElement("div");
+			if (l.className = "option", l.setAttribute("role", "option"), l.id = `${t.comboId}-opt-${s.index}`, l.setAttribute("aria-selected", String(c)), l.setAttribute("aria-disabled", String(!!e.disabled)), l.style.cssText = `position:absolute;top:0;left:0;right:0;transform:translateY(${s.top}px);`, l.toggleAttribute("data-focused", a === s.index), l.toggleAttribute("data-selected", c), l.toggleAttribute("data-disabled", !!e.disabled), e.iconEl) {
 				let t = document.createElement("span");
 				t.className = "option-icon", t.setAttribute("aria-hidden", "true");
 				let n = e.iconEl.cloneNode(!0);
-				n.removeAttribute("slot"), t.appendChild(n), c.appendChild(t);
+				n.removeAttribute("slot"), t.appendChild(n), l.appendChild(t);
 			}
-			let l = document.createElement("span");
-			l.textContent = e.label, c.appendChild(l);
 			let u = document.createElement("span");
-			u.className = "option-check", u.setAttribute("aria-hidden", "true"), u.innerHTML = t.checkIconHTML, c.appendChild(u), c.addEventListener("pointerdown", (e) => {
+			u.textContent = e.label, l.appendChild(u);
+			let d = document.createElement("span");
+			d.className = "option-check", d.setAttribute("aria-hidden", "true"), d.innerHTML = t.checkIconHTML, l.appendChild(d), l.addEventListener("pointerdown", (e) => {
 				e.preventDefault();
-			}), c.addEventListener("click", (n) => {
+			}), l.addEventListener("click", (n) => {
 				n.stopPropagation(), t.onSelectOption(e, n);
-			}), c.addEventListener("pointerenter", () => {
-				t.setFocusedIndex(o.index);
-				for (let e of r.querySelectorAll("[data-focused]")) e.removeAttribute("data-focused");
-				c.setAttribute("data-focused", "");
-			}), r.appendChild(c);
+			}), l.addEventListener("pointerenter", () => {
+				t.setFocusedIndex(s.index), o();
+			}), r.appendChild(l);
 		}
 	}
 	function o() {
@@ -57,7 +54,7 @@ function t(t) {
 		}
 	});
 	function c(e, t) {
-		n = e, s.update(n, t);
+		n = e, s.setActive(t), s.setItems(n);
 	}
 	return {
 		domVirtualList: s,

package/dist/inputs/combobox/combobox-virtualizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-virtualizer.js","names":[],"sources":["../../../src/inputs/combobox/combobox-virtualizer.ts"],"sourcesContent":["import { createDomVirtualList, type VirtualItem } from '@vielzeug/virtualit/dom';\n\nimport type { ComboboxOptionItem, ComboboxSelectionItem } from './combobox.types';\n\ntype ComboboxVirtualizerDeps = {\n  checkIconHTML: string;\n  comboId: string;\n  getDropdownElement: () => HTMLElement | null;\n  getFocusedIndex: () => number;\n  getIsMultiple: () => boolean;\n  getListboxElement: () => HTMLElement | null;\n  getSelectedValue: () => string;\n  getSelectedValues: () => ComboboxSelectionItem[];\n  onSelectOption: (opt: ComboboxOptionItem, event?: Event) => void;\n  setFocusedIndex: (index: number) => void;\n};\n\nexport function createComboboxVirtualizer(deps: ComboboxVirtualizerDeps) {\n  let currentOptions: ComboboxOptionItem[] = [];\n  let cachedListbox: HTMLElement | null = null;\n\n  function isSelectedOption(option: ComboboxOptionItem): boolean {\n    if (deps.getIsMultiple()) return deps.getSelectedValues().some((selected) => selected.value === option.value);\n\n    return option.value === deps.getSelectedValue();\n  }\n\n  function renderVirtualItems(virtualItems: VirtualItem[]) {\n    if (!cachedListbox) return;\n\n    for (const element of Array.from(cachedListbox.querySelectorAll('.option'))) element.remove();\n\n    const focused = deps.getFocusedIndex();\n\n    for (const item of virtualItems) {\n      const option = currentOptions[item.index];\n\n      if (!option) continue;\n\n      const isSelected = isSelectedOption(option);\n      const optionElement = document.createElement('div');\n\n      optionElement.className = 'option';\n      optionElement.setAttribute('role', 'option');\n      optionElement.id = `${deps.comboId}-opt-${item.index}`;\n      optionElement.setAttribute('aria-selected', String(isSelected));\n      optionElement.setAttribute('aria-disabled', String(!!option.disabled));\n      optionElement.style.cssText = `position:absolute;top:0;left:0;right:0;transform:translateY(${item.top}px);`;\n\n      if (focused === item.index) optionElement.setAttribute('data-focused', '');\n\n      if (isSelected) optionElement.setAttribute('data-selected', '');\n\n      if (option.disabled) optionElement.setAttribute('data-disabled', '');\n\n      if (option.iconEl) {\n        const iconWrapper = document.createElement('span');\n\n        iconWrapper.className = 'option-icon';\n        iconWrapper.setAttribute('aria-hidden', 'true');\n\n        const iconClone = option.iconEl.cloneNode(true) as Element;\n\n        iconClone.removeAttribute('slot');\n        iconWrapper.appendChild(iconClone);\n        optionElement.appendChild(iconWrapper);\n      }\n\n      const labelElement = document.createElement('span');\n\n      labelElement.textContent = option.label;\n      optionElement.appendChild(labelElement);\n\n      const checkElement = document.createElement('span');\n\n      checkElement.className = 'option-check';\n      checkElement.setAttribute('aria-hidden', 'true');\n      checkElement.innerHTML = deps.checkIconHTML;\n      optionElement.appendChild(checkElement);\n      optionElement.addEventListener('pointerdown', (event: PointerEvent) => {\n        event.preventDefault();\n      });\n      optionElement.addEventListener('click', (event: MouseEvent) => {\n        event.stopPropagation();\n        deps.onSelectOption(option, event);\n      });\n      optionElement.addEventListener('pointerenter', () => {\n        deps.setFocusedIndex(item.index);\n\n        for (const focusedElement of cachedListbox!.querySelectorAll<HTMLElement>('[data-focused]')) {\n          focusedElement.removeAttribute('data-focused');\n        }\n        optionElement.setAttribute('data-focused', '');\n      });\n      cachedListbox.appendChild(optionElement);\n    }\n  }\n\n  function updateRenderedItemState() {\n    if (!cachedListbox) return;\n\n    const focused = deps.getFocusedIndex();\n\n    for (const element of cachedListbox.querySelectorAll<HTMLElement>('.option')) {\n      const idx = Number(element.id.replace(`${deps.comboId}-opt-`, ''));\n      const option = currentOptions[idx];\n\n      if (!option) continue;\n\n      const isSelected = isSelectedOption(option);\n\n      element.toggleAttribute('data-focused', idx === focused);\n      element.toggleAttribute('data-selected', isSelected);\n      element.setAttribute('aria-selected', String(isSelected));\n    }\n  }\n\n  const domVirtualList = createDomVirtualList<ComboboxOptionItem>({\n    clear: (listEl) => {\n      for (const element of Array.from(listEl.querySelectorAll('.option'))) element.remove();\n    },\n    estimateSize: 36,\n    getListElement: deps.getListboxElement,\n    getScrollElement: deps.getDropdownElement,\n    overscan: 4,\n    render: ({ items, listEl, virtualItems }) => {\n      currentOptions = items;\n      cachedListbox = listEl;\n      renderVirtualItems(virtualItems);\n    },\n  });\n\n  function setupVirtualizer(options: ComboboxOptionItem[], isOpen: boolean) {\n    currentOptions = options;\n    domVirtualList.update(currentOptions, isOpen);\n  }\n\n  return { domVirtualList, setupVirtualizer, updateRenderedItemState };\n}\n"],"mappings":"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"}
+{"version":3,"file":"combobox-virtualizer.js","names":[],"sources":["../../../src/inputs/combobox/combobox-virtualizer.ts"],"sourcesContent":["import { createDomVirtualList, type VirtualItem } from '@vielzeug/virtualit/dom';\n\nimport type { ComboboxOptionItem, ComboboxSelectionItem } from './combobox.types';\n\ntype ComboboxVirtualizerDeps = {\n  checkIconHTML: string;\n  comboId: string;\n  getDropdownElement: () => HTMLElement | null;\n  getFocusedIndex: () => number;\n  getIsMultiple: () => boolean;\n  getListboxElement: () => HTMLElement | null;\n  getSelectedValue: () => string;\n  getSelectedValues: () => ComboboxSelectionItem[];\n  onSelectOption: (opt: ComboboxOptionItem, event?: Event) => void;\n  setFocusedIndex: (index: number) => void;\n};\n\nexport function createComboboxVirtualizer(deps: ComboboxVirtualizerDeps) {\n  let currentOptions: ComboboxOptionItem[] = [];\n  let cachedListbox: HTMLElement | null = null;\n\n  function isSelectedOption(option: ComboboxOptionItem): boolean {\n    if (deps.getIsMultiple()) return deps.getSelectedValues().some((selected) => selected.value === option.value);\n\n    return option.value === deps.getSelectedValue();\n  }\n\n  function renderVirtualItems(virtualItems: VirtualItem[]) {\n    if (!cachedListbox) return;\n\n    for (const element of Array.from(cachedListbox.querySelectorAll('.option'))) element.remove();\n\n    const focused = deps.getFocusedIndex();\n\n    for (const item of virtualItems) {\n      const option = currentOptions[item.index];\n\n      if (!option) continue;\n\n      const isSelected = isSelectedOption(option);\n      const optionElement = document.createElement('div');\n\n      optionElement.className = 'option';\n      optionElement.setAttribute('role', 'option');\n      optionElement.id = `${deps.comboId}-opt-${item.index}`;\n      optionElement.setAttribute('aria-selected', String(isSelected));\n      optionElement.setAttribute('aria-disabled', String(!!option.disabled));\n      optionElement.style.cssText = `position:absolute;top:0;left:0;right:0;transform:translateY(${item.top}px);`;\n      optionElement.toggleAttribute('data-focused', focused === item.index);\n      optionElement.toggleAttribute('data-selected', isSelected);\n      optionElement.toggleAttribute('data-disabled', !!option.disabled);\n\n      if (option.iconEl) {\n        const iconWrapper = document.createElement('span');\n\n        iconWrapper.className = 'option-icon';\n        iconWrapper.setAttribute('aria-hidden', 'true');\n\n        const iconClone = option.iconEl.cloneNode(true) as Element;\n\n        iconClone.removeAttribute('slot');\n        iconWrapper.appendChild(iconClone);\n        optionElement.appendChild(iconWrapper);\n      }\n\n      const labelElement = document.createElement('span');\n\n      labelElement.textContent = option.label;\n      optionElement.appendChild(labelElement);\n\n      const checkElement = document.createElement('span');\n\n      checkElement.className = 'option-check';\n      checkElement.setAttribute('aria-hidden', 'true');\n      checkElement.innerHTML = deps.checkIconHTML;\n      optionElement.appendChild(checkElement);\n      optionElement.addEventListener('pointerdown', (event: PointerEvent) => {\n        event.preventDefault();\n      });\n      optionElement.addEventListener('click', (event: MouseEvent) => {\n        event.stopPropagation();\n        deps.onSelectOption(option, event);\n      });\n      optionElement.addEventListener('pointerenter', () => {\n        deps.setFocusedIndex(item.index);\n\n        updateRenderedItemState();\n      });\n      cachedListbox.appendChild(optionElement);\n    }\n  }\n\n  function updateRenderedItemState() {\n    if (!cachedListbox) return;\n\n    const focused = deps.getFocusedIndex();\n\n    for (const element of cachedListbox.querySelectorAll<HTMLElement>('.option')) {\n      const idx = Number(element.id.replace(`${deps.comboId}-opt-`, ''));\n      const option = currentOptions[idx];\n\n      if (!option) continue;\n\n      const isSelected = isSelectedOption(option);\n\n      element.toggleAttribute('data-focused', idx === focused);\n      element.toggleAttribute('data-selected', isSelected);\n      element.setAttribute('aria-selected', String(isSelected));\n    }\n  }\n\n  const domVirtualList = createDomVirtualList<ComboboxOptionItem>({\n    clear: (listEl) => {\n      for (const element of Array.from(listEl.querySelectorAll('.option'))) element.remove();\n    },\n    estimateSize: 36,\n    getListElement: deps.getListboxElement,\n    getScrollElement: deps.getDropdownElement,\n    overscan: 4,\n    render: ({ items, listEl, virtualItems }) => {\n      currentOptions = items;\n      cachedListbox = listEl;\n      renderVirtualItems(virtualItems);\n    },\n  });\n\n  function setupVirtualizer(options: ComboboxOptionItem[], isOpen: boolean) {\n    currentOptions = options;\n    domVirtualList.setActive(isOpen);\n    domVirtualList.setItems(currentOptions);\n  }\n\n  return { domVirtualList, setupVirtualizer, updateRenderedItemState };\n}\n"],"mappings":";;AAiBA,SAAgB,EAA0B,GAA+B;CACvE,IAAI,IAAuC,EAAE,EACzC,IAAoC;CAExC,SAAS,EAAiB,GAAqC;AAG7D,SAFI,EAAK,eAAe,GAAS,EAAK,mBAAmB,CAAC,MAAM,MAAa,EAAS,UAAU,EAAO,MAAM,GAEtG,EAAO,UAAU,EAAK,kBAAkB;;CAGjD,SAAS,EAAmB,GAA6B;AACvD,MAAI,CAAC,EAAe;AAEpB,OAAK,IAAM,KAAW,MAAM,KAAK,EAAc,iBAAiB,UAAU,CAAC,CAAE,GAAQ,QAAQ;EAE7F,IAAM,IAAU,EAAK,iBAAiB;AAEtC,OAAK,IAAM,KAAQ,GAAc;GAC/B,IAAM,IAAS,EAAe,EAAK;AAEnC,OAAI,CAAC,EAAQ;GAEb,IAAM,IAAa,EAAiB,EAAO,EACrC,IAAgB,SAAS,cAAc,MAAM;AAYnD,OAVA,EAAc,YAAY,UAC1B,EAAc,aAAa,QAAQ,SAAS,EAC5C,EAAc,KAAK,GAAG,EAAK,QAAQ,OAAO,EAAK,SAC/C,EAAc,aAAa,iBAAiB,OAAO,EAAW,CAAC,EAC/D,EAAc,aAAa,iBAAiB,OAAO,CAAC,CAAC,EAAO,SAAS,CAAC,EACtE,EAAc,MAAM,UAAU,+DAA+D,EAAK,IAAI,OACtG,EAAc,gBAAgB,gBAAgB,MAAY,EAAK,MAAM,EACrE,EAAc,gBAAgB,iBAAiB,EAAW,EAC1D,EAAc,gBAAgB,iBAAiB,CAAC,CAAC,EAAO,SAAS,EAE7D,EAAO,QAAQ;IACjB,IAAM,IAAc,SAAS,cAAc,OAAO;AAGlD,IADA,EAAY,YAAY,eACxB,EAAY,aAAa,eAAe,OAAO;IAE/C,IAAM,IAAY,EAAO,OAAO,UAAU,GAAK;AAI/C,IAFA,EAAU,gBAAgB,OAAO,EACjC,EAAY,YAAY,EAAU,EAClC,EAAc,YAAY,EAAY;;GAGxC,IAAM,IAAe,SAAS,cAAc,OAAO;AAGnD,GADA,EAAa,cAAc,EAAO,OAClC,EAAc,YAAY,EAAa;GAEvC,IAAM,IAAe,SAAS,cAAc,OAAO;AAkBnD,GAhBA,EAAa,YAAY,gBACzB,EAAa,aAAa,eAAe,OAAO,EAChD,EAAa,YAAY,EAAK,eAC9B,EAAc,YAAY,EAAa,EACvC,EAAc,iBAAiB,gBAAgB,MAAwB;AACrE,MAAM,gBAAgB;KACtB,EACF,EAAc,iBAAiB,UAAU,MAAsB;AAE7D,IADA,EAAM,iBAAiB,EACvB,EAAK,eAAe,GAAQ,EAAM;KAClC,EACF,EAAc,iBAAiB,sBAAsB;AAGnD,IAFA,EAAK,gBAAgB,EAAK,MAAM,EAEhC,GAAyB;KACzB,EACF,EAAc,YAAY,EAAc;;;CAI5C,SAAS,IAA0B;AACjC,MAAI,CAAC,EAAe;EAEpB,IAAM,IAAU,EAAK,iBAAiB;AAEtC,OAAK,IAAM,KAAW,EAAc,iBAA8B,UAAU,EAAE;GAC5E,IAAM,IAAM,OAAO,EAAQ,GAAG,QAAQ,GAAG,EAAK,QAAQ,QAAQ,GAAG,CAAC,EAC5D,IAAS,EAAe;AAE9B,OAAI,CAAC,EAAQ;GAEb,IAAM,IAAa,EAAiB,EAAO;AAI3C,GAFA,EAAQ,gBAAgB,gBAAgB,MAAQ,EAAQ,EACxD,EAAQ,gBAAgB,iBAAiB,EAAW,EACpD,EAAQ,aAAa,iBAAiB,OAAO,EAAW,CAAC;;;CAI7D,IAAM,IAAiB,EAAyC;EAC9D,QAAQ,MAAW;AACjB,QAAK,IAAM,KAAW,MAAM,KAAK,EAAO,iBAAiB,UAAU,CAAC,CAAE,GAAQ,QAAQ;;EAExF,cAAc;EACd,gBAAgB,EAAK;EACrB,kBAAkB,EAAK;EACvB,UAAU;EACV,SAAS,EAAE,UAAO,WAAQ,sBAAmB;AAG3C,GAFA,IAAiB,GACjB,IAAgB,GAChB,EAAmB,EAAa;;EAEnC,CAAC;CAEF,SAAS,EAAiB,GAA+B,GAAiB;AAGxE,EAFA,IAAiB,GACjB,EAAe,UAAU,EAAO,EAChC,EAAe,SAAS,EAAe;;AAGzC,QAAO;EAAE;EAAgB;EAAkB;EAAyB"}