@vielzeug/refine 1.8.0 → 2.0.0

package/dist/input.js

@@ -1,22 +1,21 @@
-import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
-import { forcedColorsFocusMixin as t } from "./styles/mixins/theme.css.js";
-import { fieldVariantMixin as n } from "./styles/mixins/field-variants.css.js";
-import { fieldMixins as r } from "./styles/index.js";
-import { disablableBundle as i, roundableBundle as a, sizableBundle as o, themableBundle as s } from "./shared/prop-bundles.js";
-import { FIELD_SIZE_PRESET as c } from "./shared/size-presets.js";
-import { lifecycleSignal as l } from "./headless/ore.js";
-import { bindRefCallback as u } from "./headless/ref-callback.js";
-import { createTextField as d } from "./headless/text-field.js";
-import { errorAttr as f } from "./inputs/shared/field-binding.js";
-import { FORM_CTX as p, useFormContext as m } from "./inputs/shared/form-context.js";
-import { renderStatusIcon as h } from "./inputs/shared/templates.js";
-import g from "./inputs/input/input.css.js";
-import { bind as _, define as v, html as y, inject as b, onCleanup as x, onElement as S, prop as C, ref as w, useEmit as T, useSlots as E } from "@vielzeug/ore";
-import { computed as D, signal as O } from "@vielzeug/ripple";
-import { useField as k } from "@vielzeug/ore/forms";
-import { live as A } from "@vielzeug/ore/directives";
+import { lifecycleSignal as e } from "./core/ore.js";
+import { bindRefCallback as t } from "./core/ref-callback.js";
+import { createTextField as n } from "./core/text-field.js";
+import { coarsePointerMixin as r, reducedMotionMixin as i } from "./styles/mixins/accessibility.css.js";
+import { roundedVariantMixin as a, sizeVariantMixin as o } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as s } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as c, forcedColorsFocusMixin as l } from "./styles/mixins/theme.css.js";
+import { fieldVariantMixin as u } from "./styles/mixins/field-variants.css.js";
+import { disablableBundle as d, roundableBundle as f, sizableBundle as p, themableBundle as m } from "./shared/prop-bundles.js";
+import { FIELD_SIZE_PRESET as h } from "./shared/size-presets.js";
+import { errorAttr as g } from "./inputs/shared/field-binding.js";
+import { renderStatusIcon as _ } from "./inputs/shared/templates.js";
+import { defineFieldValue as v, dispatchNativeFieldEvent as y, setFieldValue as b } from "./inputs/shared/native-field-event.js";
+import x from "./inputs/input/input.css.js";
+import { bind as S, define as C, getHost as w, html as T, live as E, onCleanup as D, onElement as O, prop as k, ref as A, useField as j, useSlots as M } from "@vielzeug/ore";
+import { computed as N, signal as P } from "@vielzeug/ripple";
 //#region src/inputs/input/input.ts
-var j = [
+var F = [
 	"text",
 	"email",
 	"password",
@@ -29,166 +28,169 @@ var j = [
 	"datetime-local",
 	"month",
 	"week"
-], M = "ore-input";
-v(M, {
+], I = "ore-input";
+C(I, {
 	formAssociated: !0,
 	props: {
-		...s,
-		...o,
-		...i,
-		...a,
-		autocomplete: C.string(),
-		clearable: C.bool(!1),
-		error: C.string(),
-		fullwidth: C.bool(!1),
-		helper: C.string(),
-		inputmode: C.string(),
-		label: C.string(),
-		"label-placement": C.oneOf(["inset", "outside"], "inset"),
-		loading: C.bool(!1),
-		maxlength: C.json(void 0),
-		minlength: C.json(void 0),
-		name: C.string(),
-		pattern: C.string(),
-		placeholder: C.string(),
-		readonly: C.bool(!1),
-		ref: C.data(),
-		required: C.bool(!1),
-		success: C.bool(!1),
-		type: C.oneOf(j, "text"),
-		value: C.string(),
-		variant: C.string()
+		...m,
+		...p,
+		...d,
+		...f,
+		autocomplete: k.string(),
+		clearable: k.bool(!1),
+		error: k.string(),
+		fullwidth: k.bool(!1),
+		helper: k.string(),
+		inputmode: k.string(),
+		label: k.string(),
+		"label-placement": k.oneOf(["inset", "outside"], "inset"),
+		loading: k.bool(!1),
+		maxlength: k.json(void 0),
+		minlength: k.json(void 0),
+		name: k.string(),
+		pattern: k.string(),
+		placeholder: k.string(),
+		readonly: k.bool(!1),
+		ref: k.data(),
+		required: k.bool(!1),
+		success: k.bool(!1),
+		type: k.oneOf(F, "text"),
+		value: k.string(),
+		variant: k.string()
 	},
-	setup(e) {
-		let t = T(), n = E(), r = b(p), i = m(e, r), a = O(!1), o = w(), s = D(() => !!e.label.value || n.has("label").value), c = D(() => i.disabled.value || e.loading.value), g = l(x), v = d({
-			disabled: c,
-			error: e.error,
-			hasLabel: s,
-			helper: e.helper,
-			label: e.label,
-			labelPlacement: e["label-placement"],
-			maxLength: e.maxlength,
-			onChange: (e, n) => {
-				t("change", {
-					originalEvent: e,
-					value: n
-				});
+	setup(r) {
+		let i = w(), a = M(), o = P(!1), s = A(), c = N(() => !!r.label.value || a.has("label").value), l = N(() => r.disabled.value || r.loading.value), u = e(D), d = n({
+			disabled: l,
+			error: r.error,
+			hasLabel: c,
+			helper: r.helper,
+			label: r.label,
+			labelPlacement: r["label-placement"],
+			maxLength: r.maxlength,
+			onChange: (e, t) => {
+				b(i, t), y(i, "change");
 			},
-			onInput: (e, n) => {
-				t("input", {
-					originalEvent: e,
-					value: n
-				});
+			onInput: (e, t) => {
+				b(i, t), y(i, "input");
 			},
 			prefix: "input",
-			readonly: e.readonly,
-			required: e.required,
-			signal: g,
-			validateOn: r?.validateOn,
-			value: e.value
+			readonly: r.readonly,
+			required: r.required,
+			signal: u,
+			value: r.value
 		});
-		v.attachFormField(k({
-			disabled: v.disabled,
-			onReset: v.reset,
+		v(i, () => d.value.value, (e) => {
+			d.value.value = e;
+		}), d.attachFormField(j({
+			disabled: d.disabled,
+			onReset: d.reset,
 			toFormValue: (e) => e,
-			validationMessage: v.validationMessage,
-			validity: v.validity,
-			value: v.value
+			validationMessage: d.validationMessage,
+			validity: d.validity,
+			value: d.value
 		}));
-		let { ariaDescribedBy: C, ariaErrorMessage: j, ariaInvalid: M, ariaLabelledBy: N, assistiveId: P, clear: F, counter: I, errorId: L, errorText: R, fieldId: z, helperText: B, labelId: V, labelVisible: H, value: U, wire: W } = v;
-		return S(o, (t) => {
-			W(t, g);
-			let n = u(e.ref, t);
+		let { ariaDescribedBy: f, ariaErrorMessage: p, ariaInvalid: m, ariaLabelledBy: h, assistiveId: x, clear: C, counter: k, errorId: F, errorText: I, fieldId: L, helperText: R, labelId: z, labelVisible: B, value: V, wire: H } = d;
+		return O(s, (e) => {
+			H(e, u);
+			let n = t(r.ref, e);
 			return () => {
 				n();
 			};
-		}), _({ attr: {
-			error: f(R),
-			"has-value": () => U.value ? !0 : void 0,
-			size: i.size,
-			success: () => e.success.value && !R.value ? !0 : void 0,
-			variant: i.variant
-		} }), y`
+		}), S({ attr: {
+			error: g(I),
+			"has-value": () => V.value ? !0 : void 0,
+			size: r.size,
+			success: () => r.success.value && !I.value ? !0 : void 0,
+			variant: r.variant
+		} }), T`
       <div class="input-wrapper" part="wrapper">
-        <label class="label" for="${z}" id="${V}" part="label" ?hidden="${() => !H.value}"
-          ><slot name="label">${e.label}</slot></label
-        >
+        <label class="label" for="${L}" id="${z}" part="label" ?hidden="${() => !B.value}">
+          <slot name="label">${r.label}</slot>
+        </label>
         <div class="field" part="field">
           <div class="input-row" part="input-row">
             <slot name="prefix"></slot>
             <input
               part="input"
-              id="${z}"
-              :type="${() => e.type.value === "password" && a.value ? "text" : e.type.value ?? "text"}"
-              :name="${e.name}"
-              :placeholder="${e.placeholder}"
-              :autocomplete="${e.autocomplete}"
-              :inputmode="${e.inputmode}"
-              :maxlength="${e.maxlength}"
-              :minlength="${e.minlength}"
-              :pattern="${e.pattern}"
-              ?disabled="${c}"
-              ?readonly="${e.readonly}"
-              ?required="${e.required}"
-              :value="${A(U)}"
-              :aria-labelledby="${N}"
-              :aria-describedby="${C}"
-              :aria-errormessage="${j}"
-              :aria-invalid="${M}"
-              :aria-busy="${() => e.loading.value ? "true" : null}"
-              ref="${o}" />
+              id="${L}"
+              type="${() => r.type.value === "password" && o.value ? "text" : r.type.value ?? "text"}"
+              name="${r.name}"
+              placeholder="${r.placeholder}"
+              autocomplete="${r.autocomplete}"
+              inputmode="${r.inputmode}"
+              maxlength="${r.maxlength}"
+              minlength="${r.minlength}"
+              pattern="${r.pattern}"
+              ?disabled="${l}"
+              ?readonly="${r.readonly}"
+              ?required="${r.required}"
+              value="${E(V)}"
+              aria-labelledby="${h}"
+              aria-describedby="${f}"
+              aria-errormessage="${p}"
+              aria-invalid="${m}"
+              aria-busy="${() => r.loading.value ? "true" : null}"
+              ref="${s}" />
             <slot name="suffix"></slot>
-            ${h(R)}
+            ${_(I)}
             <span class="field-spinner" part="spinner" role="status" aria-label="Loading"></span>
             <button
               class="pwd-toggle-btn"
               part="pwd-toggle"
               type="button"
-              :aria-label="${() => a.value ? "Hide password" : "Show password"}"
-              :aria-pressed="${() => String(a.value)}"
-              :tabindex="${() => e.type.value === "password" ? "0" : "-1"}"
+              aria-label="${() => o.value ? "Hide password" : "Show password"}"
+              aria-pressed="${() => String(o.value)}"
+              tabindex="${() => r.type.value === "password" ? "0" : "-1"}"
               @click="${() => {
-			a.value = !a.value, o.value?.focus();
+			o.value = !o.value, s.value?.focus();
 		}}">
-              ${() => a.value ? y`<ore-icon name="eye-off" size="14" stroke-width="2" aria-hidden="true"></ore-icon>` : y`<ore-icon name="eye" size="14" stroke-width="2" aria-hidden="true"></ore-icon>`}
+              ${() => o.value ? T`
+            <ore-icon name="eye-off" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+          ` : T`
+            <ore-icon name="eye" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+          `}
             </button>
             <button
               aria-label="Clear"
               class="clear-btn"
               part="clear"
               type="button"
-              :tabindex="${() => U.value ? "0" : "-1"}"
+              tabindex="${() => V.value ? "0" : "-1"}"
               @click="${(e) => {
-			F(e), o.value?.focus();
+			C(e), s.value?.focus();
 		}}">
               <ore-icon aria-hidden="true" name="x" size="12" stroke-width="2.5"></ore-icon>
             </button>
           </div>
         </div>
-        <div class="helper-text" aria-live="polite" id="${P}" part="helper" ?hidden="${() => !!R.value || !B.value}">
-          <slot name="helper">${() => B.value}</slot>
+        <div class="helper-text" aria-live="polite" id="${x}" part="helper" ?hidden="${() => !!I.value || !R.value}">
+          <slot name="helper">${() => R.value}</slot>
         </div>
-        <div class="helper-text" id="${L}" role="alert" part="error" ?hidden="${() => !R.value}">
-          <slot name="error">${() => R.value}</slot>
+        <div class="helper-text" id="${F}" role="alert" part="error" ?hidden="${() => !I.value}">
+          <slot name="error">${() => I.value}</slot>
         </div>
         <div
           class="char-counter"
           part="char-counter"
-          :data-near-limit="${() => I?.value.counterNearLimit && !I?.value.counterAtLimit ? "" : null}"
-          :data-at-limit="${() => I?.value.counterAtLimit ? "" : null}"
-          ?hidden="${() => !I}">
-          ${() => I?.value.counterText ?? ""}
+          data-near-limit="${() => k?.value.counterNearLimit && !k?.value.counterAtLimit ? "" : null}"
+          data-at-limit="${() => k?.value.counterAtLimit ? "" : null}"
+          ?hidden="${() => !k}">
+          ${() => k?.value.counterText ?? ""}
         </div>
       </div>
     `;
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [
-		...r,
-		e(c),
-		t("input"),
-		g,
-		n({
+		c,
+		r,
+		i,
+		a,
+		s,
+		o(h),
+		l("input"),
+		x,
+		u({
 			container: ".field",
 			text: "input",
 			tokenPrefix: "input"
@@ -196,6 +198,6 @@ v(M, {
 	]
 });
 //#endregion
-export { M as INPUT_TAG };
+export { I 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 { define, html, inject, prop, ref, bind, onCleanup, onElement, useEmit, useSlots } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { InputType, VisualVariant } from '../../types';\n\nimport { bindRefCallback, lifecycleSignal, createTextField } from '../../headless';\nimport { disablableBundle, FIELD_SIZE_PRESET, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport '../../content/icon/icon';\nimport { fieldMixins, fieldVariantMixin, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { errorAttr } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderStatusIcon } from '../shared/templates';\nimport componentStyles from './input.css?inline';\n\n/** Input component properties */\n\nexport type OreInputEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type OreInputProps = TextFieldProps<Exclude<VisualVariant, '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  /**\n   * Shows an inline spinner inside the field and forces the inner `<input>` into\n   * `disabled` for the duration — use while an async validation/submission request\n   * is in flight (e.g. checking username availability) to prevent double-submits.\n   */\n  loading?: boolean;\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  /**\n   * JS-only callback fired with the inner `<input>` element when it mounts,\n   * and with `null` when it unmounts. Intended for composed components that\n   * need imperative access to the raw input element.\n   * Set as a JS property: `bitInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\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\n/**\n * A customizable text input component with multiple variants, label placements, and form features.\n *\n * @element ore-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 (fallback when the `helper` slot is empty)\n * @attr {string} error - Error message — marks the field as invalid (fallback when the `error` slot is empty)\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 {boolean} loading - Show an inline spinner and force the field disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\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). detail: { value: string; originalEvent: Event }\n * @fires change - Emitted when input loses focus with changed value. detail: { value: string; originalEvent: Event }\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 label - Replaces the label text — slotted content takes precedence over the `label` prop\n * @slot helper - Replaces the helper text — slotted content takes precedence over the `helper` prop\n * @slot error - Replaces the error text — slotted content takes precedence over the `error` prop\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 status-icon - The inline error/success icon shown inside the field\n * @part spinner - The inline loading spinner shown inside the field while `loading`\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-placeholder-color - Placeholder text color\n * @cssprop --input-radius - Border radius\n * @cssprop --input-padding - Inner padding (block inline)\n * @cssprop --input-gap - Gap between prefix/suffix icons and input text\n * @cssprop --input-font-size - Font size\n * @cssprop --input-height - Field height\n * @cssprop --input-hover-bg - Field background on hover (flat/ghost variants)\n * @cssprop --input-hover-border-color - Field border on hover (flat/bordered variants)\n * @cssprop --input-focus-bg - Field background when focused (flat variant)\n * @cssprop --input-focus-border-color - Field border when focused (flat/text variants)\n *\n * @example\n * ```html\n * <ore-input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n * <ore-input label=\"Name\" variant=\"bordered\" color=\"primary\" />\n * <ore-input label=\"Username\" error=\"That username is taken\" />\n * <ore-input label=\"Username\" success />\n * <ore-input label=\"Username\" loading />\n * ```\n */\nexport const INPUT_TAG = 'ore-input' as const;\ndefine<OreInputProps>(INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    autocomplete: prop.string(),\n    clearable: prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    inputmode: prop.string<'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'>(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    loading: prop.bool(false),\n    maxlength: prop.json(undefined as number | undefined),\n    minlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    pattern: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLInputElement | null) => void) | null>(),\n    required: prop.bool(false),\n    success: prop.bool(false),\n    type: prop.oneOf(VALID_INPUT_TYPES, 'text'),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'text' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const emit = useEmit<OreInputEvents>();\n    const slots = useSlots();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const showPassword = signal(false);\n    const inputRef = ref<HTMLInputElement>();\n\n    const hasLabel = computed(() => !!props.label.value || slots.has('label').value);\n    // `loading` behaves like a temporary `disabled` — forces the inner <input> out of\n    // constraint validation and interaction for the duration, layered on top of any real\n    // `disabled` prop or form-context disabling already folded into `fCtxProps.disabled`.\n    const isDisabled = computed(() => fCtxProps.disabled.value || props.loading.value);\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const tf = createTextField({\n      disabled: isDisabled,\n      error: props.error,\n      hasLabel,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      onChange: (event: Event, value: string) => {\n        emit('change', { originalEvent: event, value });\n      },\n      onInput: (event: Event, value: string) => {\n        emit('input', { originalEvent: event, value });\n      },\n      prefix: 'input',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    tf.attachFormField(\n      useField<string>({\n        disabled: tf.disabled,\n        onReset: tf.reset,\n        toFormValue: (v) => v,\n        validationMessage: tf.validationMessage,\n        validity: tf.validity,\n        value: tf.value,\n      }),\n    );\n\n    const {\n      ariaDescribedBy,\n      ariaErrorMessage,\n      ariaInvalid,\n      ariaLabelledBy,\n      assistiveId,\n      clear: clearValue,\n      counter,\n      errorId,\n      errorText,\n      fieldId: inputId,\n      helperText,\n      labelId,\n      labelVisible,\n      value: fieldValue,\n      wire,\n    } = tf;\n\n    onElement(inputRef, (el) => {\n      wire(el, abortSignal);\n\n      const unwireRef = bindRefCallback(props.ref, el);\n\n      return () => {\n        unwireRef();\n      };\n    });\n\n    const clear = (event?: Event): void => {\n      clearValue(event);\n      inputRef.value?.focus();\n    };\n\n    const resolvedInputType = (): string =>\n      props.type.value === 'password' && showPassword.value ? 'text' : (props.type.value ?? 'text');\n\n    bind({\n      attr: {\n        error: errorAttr(errorText),\n        'has-value': () => (fieldValue.value ? true : undefined),\n        size: fCtxProps.size,\n        // Reflects `success` only once `error` is confirmed empty — keeps the two host\n        // attributes mutually exclusive even if a consumer sets both props at once.\n        success: () => (props.success.value && !errorText.value ? true : undefined),\n        variant: fCtxProps.variant,\n      },\n    });\n\n    const labelHidden = () => !labelVisible.value;\n    const passwordToggleLabel = () => (showPassword.value ? 'Hide password' : 'Show password');\n    const passwordTogglePressed = () => String(showPassword.value);\n    const passwordToggleIcon = () =>\n      showPassword.value\n        ? html`<ore-icon name=\"eye-off\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>`\n        : html`<ore-icon name=\"eye\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>`;\n    const helperHidden = () => !!errorText.value || !helperText.value;\n    const errorHidden = () => !errorText.value;\n    const counterNearLimit = () => (counter?.value.counterNearLimit && !counter?.value.counterAtLimit ? '' : null);\n    const counterAtLimit = () => (counter?.value.counterAtLimit ? '' : null);\n    const counterHidden = () => !counter;\n    const counterText = () => counter?.value.counterText ?? '';\n\n    const clearTabIndex = () => (fieldValue.value ? '0' : '-1');\n    const pwdToggleTabIndex = () => (props.type.value === 'password' ? '0' : '-1');\n\n    const togglePassword = () => {\n      showPassword.value = !showPassword.value;\n      inputRef.value?.focus();\n    };\n\n    return html`\n      <div class=\"input-wrapper\" part=\"wrapper\">\n        <label class=\"label\" for=\"${inputId}\" id=\"${labelId}\" part=\"label\" ?hidden=\"${labelHidden}\"\n          ><slot name=\"label\">${props.label}</slot></label\n        >\n        <div class=\"field\" part=\"field\">\n          <div class=\"input-row\" part=\"input-row\">\n            <slot name=\"prefix\"></slot>\n            <input\n              part=\"input\"\n              id=\"${inputId}\"\n              :type=\"${resolvedInputType}\"\n              :name=\"${props.name}\"\n              :placeholder=\"${props.placeholder}\"\n              :autocomplete=\"${props.autocomplete}\"\n              :inputmode=\"${props.inputmode}\"\n              :maxlength=\"${props.maxlength}\"\n              :minlength=\"${props.minlength}\"\n              :pattern=\"${props.pattern}\"\n              ?disabled=\"${isDisabled}\"\n              ?readonly=\"${props.readonly}\"\n              ?required=\"${props.required}\"\n              :value=\"${live(fieldValue)}\"\n              :aria-labelledby=\"${ariaLabelledBy}\"\n              :aria-describedby=\"${ariaDescribedBy}\"\n              :aria-errormessage=\"${ariaErrorMessage}\"\n              :aria-invalid=\"${ariaInvalid}\"\n              :aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"\n              ref=\"${inputRef}\" />\n            <slot name=\"suffix\"></slot>\n            ${renderStatusIcon(errorText)}\n            <span class=\"field-spinner\" part=\"spinner\" role=\"status\" aria-label=\"Loading\"></span>\n            <button\n              class=\"pwd-toggle-btn\"\n              part=\"pwd-toggle\"\n              type=\"button\"\n              :aria-label=\"${passwordToggleLabel}\"\n              :aria-pressed=\"${passwordTogglePressed}\"\n              :tabindex=\"${pwdToggleTabIndex}\"\n              @click=\"${togglePassword}\">\n              ${passwordToggleIcon}\n            </button>\n            <button\n              aria-label=\"Clear\"\n              class=\"clear-btn\"\n              part=\"clear\"\n              type=\"button\"\n              :tabindex=\"${clearTabIndex}\"\n              @click=\"${clear}\">\n              <ore-icon aria-hidden=\"true\" name=\"x\" size=\"12\" stroke-width=\"2.5\"></ore-icon>\n            </button>\n          </div>\n        </div>\n        <div class=\"helper-text\" aria-live=\"polite\" id=\"${assistiveId}\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          <slot name=\"helper\">${() => helperText.value}</slot>\n        </div>\n        <div class=\"helper-text\" id=\"${errorId}\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          <slot name=\"error\">${() => errorText.value}</slot>\n        </div>\n        <div\n          class=\"char-counter\"\n          part=\"char-counter\"\n          :data-near-limit=\"${counterNearLimit}\"\n          :data-at-limit=\"${counterAtLimit}\"\n          ?hidden=\"${counterHidden}\">\n          ${counterText}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...fieldMixins,\n    sizeVariantMixin(FIELD_SIZE_PRESET),\n    forcedColorsFocusMixin('input'),\n    componentStyles,\n    // Must come after `componentStyles` — `@layer` precedence is fixed by which layer name is\n    // *first* referenced across this whole array, and `componentStyles` is what establishes\n    // `refine.base` (the unconditional `--_bg`/`--_border-color` defaults this mixin's\n    // `refine.variants` rules need to win over). Placed earlier, `refine.variants` would end up\n    // registered as the *lower*-priority layer, and every variant would silently render as the\n    // base default — exactly the bug this ordering fixes.\n    fieldVariantMixin({ container: '.field', text: 'input', tokenPrefix: 'input' }),\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsDA,IAAM,IAAoB;CACxB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GAkEa,IAAY;AACzB,EAAsB,GAAW;CAC/B,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,cAAc,EAAK,OAAO;EAC1B,WAAW,EAAK,KAAK,EAAK;EAC1B,OAAO,EAAK,OAAO;EACnB,WAAW,EAAK,KAAK,EAAK;EAC1B,QAAQ,EAAK,OAAO;EACpB,WAAW,EAAK,OAAqF;EACrG,OAAO,EAAK,OAAO;EACnB,mBAAmB,EAAK,MAAM,CAAC,SAAS,SAAS,GAAY,OAAO;EACpE,SAAS,EAAK,KAAK,EAAK;EACxB,WAAW,EAAK,KAAK,KAAA,CAA+B;EACpD,WAAW,EAAK,KAAK,KAAA,CAA+B;EACpD,MAAM,EAAK,OAAO;EAClB,SAAS,EAAK,OAAO;EACrB,aAAa,EAAK,OAAO;EACzB,UAAU,EAAK,KAAK,EAAK;EACzB,KAAK,EAAK,KAAqD;EAC/D,UAAU,EAAK,KAAK,EAAK;EACzB,SAAS,EAAK,KAAK,EAAK;EACxB,MAAM,EAAK,MAAM,GAAmB,MAAM;EAC1C,OAAO,EAAK,OAAO;EACnB,SAAS,EAAK,OAAqE;CACrF;CACA,MAAM,GAAO;EACX,IAAM,IAAO,EAAwB,GAC/B,IAAQ,EAAS,GAEjB,IAAU,EAAO,CAAQ,GACzB,IAAY,EAAe,GAAO,CAAO,GACzC,IAAe,EAAO,EAAK,GAC3B,IAAW,EAAsB,GAEjC,IAAW,QAAe,CAAC,CAAC,EAAM,MAAM,SAAS,EAAM,IAAI,OAAO,CAAC,CAAC,KAAK,GAIzE,IAAa,QAAe,EAAU,SAAS,SAAS,EAAM,QAAQ,KAAK,GAE3E,IAAc,EAAgB,CAAS,GACvC,IAAK,EAAgB;GACzB,UAAU;GACV,OAAO,EAAM;GACb;GACA,QAAQ,EAAM;GACd,OAAO,EAAM;GACb,gBAAgB,EAAM;GACtB,WAAW,EAAM;GACjB,WAAW,GAAc,MAAkB;IACzC,EAAK,UAAU;KAAE,eAAe;KAAO;IAAM,CAAC;GAChD;GACA,UAAU,GAAc,MAAkB;IACxC,EAAK,SAAS;KAAE,eAAe;KAAO;IAAM,CAAC;GAC/C;GACA,QAAQ;GACR,UAAU,EAAM;GAChB,UAAU,EAAM;GAChB,QAAQ;GACR,YAAY,GAAS;GACrB,OAAO,EAAM;EACf,CAAC;EAED,EAAG,gBACD,EAAiB;GACf,UAAU,EAAG;GACb,SAAS,EAAG;GACZ,cAAc,MAAM;GACpB,mBAAmB,EAAG;GACtB,UAAU,EAAG;GACb,OAAO,EAAG;EACZ,CAAC,CACH;EAEA,IAAM,EACJ,oBACA,qBACA,gBACA,mBACA,gBACA,OAAO,GACP,YACA,YACA,cACA,SAAS,GACT,eACA,YACA,iBACA,OAAO,GACP,YACE;EAsDJ,OApDA,EAAU,IAAW,MAAO;GAC1B,EAAK,GAAI,CAAW;GAEpB,IAAM,IAAY,EAAgB,EAAM,KAAK,CAAE;GAE/C,aAAa;IACX,EAAU;GACZ;EACF,CAAC,GAUD,EAAK,EACH,MAAM;GACJ,OAAO,EAAU,CAAS;GAC1B,mBAAoB,EAAW,QAAQ,KAAO,KAAA;GAC9C,MAAM,EAAU;GAGhB,eAAgB,EAAM,QAAQ,SAAS,CAAC,EAAU,QAAQ,KAAO,KAAA;GACjE,SAAS,EAAU;EACrB,EACF,CAAC,GAwBM,CAAI;;oCAEqB,EAAQ,QAAQ,EAAQ,gCAxB9B,CAAC,EAAa,MAwBsD;gCAClE,EAAM,MAAM;;;;;;;oBAOxB,EAAQ;6BA9CtB,EAAM,KAAK,UAAU,cAAc,EAAa,QAAQ,SAAU,EAAM,KAAK,SAAS,OA+CnD;uBAClB,EAAM,KAAK;8BACJ,EAAM,YAAY;+BACjB,EAAM,aAAa;4BACtB,EAAM,UAAU;4BAChB,EAAM,UAAU;4BAChB,EAAM,UAAU;0BAClB,EAAM,QAAQ;2BACb,EAAW;2BACX,EAAM,SAAS;2BACf,EAAM,SAAS;wBAClB,EAAK,CAAU,EAAE;kCACP,EAAe;mCACd,EAAgB;oCACf,EAAiB;+BACtB,EAAY;kCACR,EAAM,QAAQ,QAAQ,SAAS,KAAM;qBACnD,EAAS;;cAEhB,EAAiB,CAAS,EAAE;;;;;;mCAnDH,EAAa,QAAQ,kBAAkB,gBAyD7B;qCAxDT,OAAO,EAAa,KAAK,EAyDZ;iCA5ChB,EAAM,KAAK,UAAU,aAAa,MAAM,KA6ChC;8BA3CZ;GAE3B,AADA,EAAa,QAAQ,CAAC,EAAa,OACnC,EAAS,OAAO,MAAM;EACxB,EAyCmC;sBAzDjC,EAAa,QACT,CAAI,uFACJ,CAAI,iFAwDqB;;;;;;;iCAhDF,EAAW,QAAQ,MAAM,KAuDjB;yBAzFtB,MAAwB;GAErC,AADA,EAAW,CAAK,GAChB,EAAS,OAAO,MAAM;EACxB,EAuF0B;;;;;0DAK4B,EAAY,iCApEvC,CAAC,CAAC,EAAU,SAAS,CAAC,EAAW,MAoE8C;sCACxE,EAAW,MAAM;;uCAEhB,EAAQ,6CAtEjB,CAAC,EAAU,MAsEyD;qCAC7D,EAAU,MAAM;;;;;oCAtEjB,GAAS,MAAM,oBAAoB,CAAC,GAAS,MAAM,iBAAiB,KAAK,KA2E9D;kCA1Eb,GAAS,MAAM,iBAAiB,KAAK,KA2E5B;2BA1EX,CAAC,EA2EE;kBA1EL,GAAS,MAAM,eAAe,GA2EpC;;;;CAItB;CACA,QAAQ,EAAE,gBAAgB,GAAK;CAC/B,QAAQ;EACN,GAAG;EACH,EAAiB,CAAiB;EAClC,EAAuB,OAAO;EAC9B;EAOA,EAAkB;GAAE,WAAW;GAAU,MAAM;GAAS,aAAa;EAAQ,CAAC;CAChF;AACF,CAAC"}
+{"version":3,"file":"input.js","names":[],"sources":["../src/inputs/input/input.ts"],"sourcesContent":["import { define, html, prop, ref, bind, getHost, onCleanup, onElement, useSlots } from '@vielzeug/ore';\nimport { live, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { InputType, VisualVariant } from '../../types';\n\nimport { bindRefCallback, lifecycleSignal, createTextField } from '../../core';\nimport { disablableBundle, FIELD_SIZE_PRESET, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport '../../content/icon/icon';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledLoadingMixin,\n  fieldVariantMixin,\n  forcedColorsFocusMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { errorAttr } from '../shared/field-binding';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderStatusIcon } from '../shared/templates';\nimport componentStyles from './input.css?inline';\n\n/** Input component properties */\n\nexport type OreInputEvents = {\n  change: Event;\n  input: InputEvent;\n};\n\nexport type OreInputProps = TextFieldProps<Exclude<VisualVariant, '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  /**\n   * Shows an inline spinner inside the field and forces the inner `<input>` into\n   * `disabled` for the duration — use while an async validation/submission request\n   * is in flight (e.g. checking username availability) to prevent double-submits.\n   */\n  loading?: boolean;\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  /**\n   * JS-only callback fired with the inner `<input>` element when it mounts,\n   * and with `null` when it unmounts. Intended for composed components that\n   * need imperative access to the raw input element.\n   * Set as a JS property: `bitInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\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\n/**\n * A customizable text input component with multiple variants, label placements, and form features.\n *\n * @element ore-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 (fallback when the `helper` slot is empty)\n * @attr {string} error - Error message — marks the field as invalid (fallback when the `error` slot is empty)\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 {boolean} loading - Show an inline spinner and force the field disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\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 label - Replaces the label text — slotted content takes precedence over the `label` prop\n * @slot helper - Replaces the helper text — slotted content takes precedence over the `helper` prop\n * @slot error - Replaces the error text — slotted content takes precedence over the `error` prop\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 status-icon - The inline error/success icon shown inside the field\n * @part spinner - The inline loading spinner shown inside the field while `loading`\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-placeholder-color - Placeholder text color\n * @cssprop --input-radius - Border radius\n * @cssprop --input-padding - Inner padding (block inline)\n * @cssprop --input-gap - Gap between prefix/suffix icons and input text\n * @cssprop --input-font-size - Font size\n * @cssprop --input-height - Field height\n * @cssprop --input-hover-bg - Field background on hover (flat/ghost variants)\n * @cssprop --input-hover-border-color - Field border on hover (flat/bordered variants)\n * @cssprop --input-focus-bg - Field background when focused (flat variant)\n * @cssprop --input-focus-border-color - Field border when focused (flat/text variants)\n *\n * @example\n * ```html\n * <ore-input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n * <ore-input label=\"Name\" variant=\"bordered\" color=\"primary\" />\n * <ore-input label=\"Username\" error=\"That username is taken\" />\n * <ore-input label=\"Username\" success />\n * <ore-input label=\"Username\" loading />\n * ```\n */\nexport const INPUT_TAG = 'ore-input' as const;\ndefine<OreInputProps>(INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    autocomplete: prop.string(),\n    clearable: prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    inputmode: prop.string<'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'>(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    loading: prop.bool(false),\n    maxlength: prop.json(undefined as number | undefined),\n    minlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    pattern: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLInputElement | null) => void) | null>(),\n    required: prop.bool(false),\n    success: prop.bool(false),\n    type: prop.oneOf(VALID_INPUT_TYPES, 'text'),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'text' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const slots = useSlots();\n\n    const showPassword = signal(false);\n    const inputRef = ref<HTMLInputElement>();\n\n    const hasLabel = computed(() => !!props.label.value || slots.has('label').value);\n    // `loading` behaves like a temporary `disabled` — forces the inner <input> out of\n    // constraint validation and interaction for the duration, layered on top of any real\n    // `loading` is layered on top of the consumer's explicit `disabled` prop.\n    const isDisabled = computed(() => props.disabled.value || props.loading.value);\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const tf = createTextField({\n      disabled: isDisabled,\n      error: props.error,\n      hasLabel,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      onChange: (_event: Event, value: string) => {\n        setFieldValue(el, value);\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      onInput: (_event: Event, value: string) => {\n        setFieldValue(el, value);\n        dispatchNativeFieldEvent(el, 'input');\n      },\n      prefix: 'input',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      value: props.value,\n    });\n\n    defineFieldValue(\n      el,\n      () => tf.value.value,\n      (value) => {\n        tf.value.value = value;\n      },\n    );\n\n    tf.attachFormField(\n      useField<string>({\n        disabled: tf.disabled,\n        onReset: tf.reset,\n        toFormValue: (v) => v,\n        validationMessage: tf.validationMessage,\n        validity: tf.validity,\n        value: tf.value,\n      }),\n    );\n\n    const {\n      ariaDescribedBy,\n      ariaErrorMessage,\n      ariaInvalid,\n      ariaLabelledBy,\n      assistiveId,\n      clear: clearValue,\n      counter,\n      errorId,\n      errorText,\n      fieldId: inputId,\n      helperText,\n      labelId,\n      labelVisible,\n      value: fieldValue,\n      wire,\n    } = tf;\n\n    onElement(inputRef, (el) => {\n      wire(el, abortSignal);\n\n      const unwireRef = bindRefCallback(props.ref, el);\n\n      return () => {\n        unwireRef();\n      };\n    });\n\n    const clear = (event?: Event): void => {\n      clearValue(event);\n      inputRef.value?.focus();\n    };\n\n    const resolvedInputType = (): string =>\n      props.type.value === 'password' && showPassword.value ? 'text' : (props.type.value ?? 'text');\n\n    bind({\n      attr: {\n        error: errorAttr(errorText),\n        'has-value': () => (fieldValue.value ? true : undefined),\n        size: props.size,\n        // Reflects `success` only once `error` is confirmed empty — keeps the two host\n        // attributes mutually exclusive even if a consumer sets both props at once.\n        success: () => (props.success.value && !errorText.value ? true : undefined),\n        variant: props.variant,\n      },\n    });\n\n    const labelHidden = () => !labelVisible.value;\n    const passwordToggleLabel = () => (showPassword.value ? 'Hide password' : 'Show password');\n    const passwordTogglePressed = () => String(showPassword.value);\n    const passwordToggleIcon = () =>\n      showPassword.value\n        ? html`\n            <ore-icon name=\"eye-off\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          `\n        : html`\n            <ore-icon name=\"eye\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          `;\n    const helperHidden = () => !!errorText.value || !helperText.value;\n    const errorHidden = () => !errorText.value;\n    const counterNearLimit = () => (counter?.value.counterNearLimit && !counter?.value.counterAtLimit ? '' : null);\n    const counterAtLimit = () => (counter?.value.counterAtLimit ? '' : null);\n    const counterHidden = () => !counter;\n    const counterText = () => counter?.value.counterText ?? '';\n\n    const clearTabIndex = () => (fieldValue.value ? '0' : '-1');\n    const pwdToggleTabIndex = () => (props.type.value === 'password' ? '0' : '-1');\n\n    const togglePassword = () => {\n      showPassword.value = !showPassword.value;\n      inputRef.value?.focus();\n    };\n\n    return html`\n      <div class=\"input-wrapper\" part=\"wrapper\">\n        <label class=\"label\" for=\"${inputId}\" id=\"${labelId}\" part=\"label\" ?hidden=\"${labelHidden}\">\n          <slot name=\"label\">${props.label}</slot>\n        </label>\n        <div class=\"field\" part=\"field\">\n          <div class=\"input-row\" part=\"input-row\">\n            <slot name=\"prefix\"></slot>\n            <input\n              part=\"input\"\n              id=\"${inputId}\"\n              type=\"${resolvedInputType}\"\n              name=\"${props.name}\"\n              placeholder=\"${props.placeholder}\"\n              autocomplete=\"${props.autocomplete}\"\n              inputmode=\"${props.inputmode}\"\n              maxlength=\"${props.maxlength}\"\n              minlength=\"${props.minlength}\"\n              pattern=\"${props.pattern}\"\n              ?disabled=\"${isDisabled}\"\n              ?readonly=\"${props.readonly}\"\n              ?required=\"${props.required}\"\n              value=\"${live(fieldValue)}\"\n              aria-labelledby=\"${ariaLabelledBy}\"\n              aria-describedby=\"${ariaDescribedBy}\"\n              aria-errormessage=\"${ariaErrorMessage}\"\n              aria-invalid=\"${ariaInvalid}\"\n              aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"\n              ref=\"${inputRef}\" />\n            <slot name=\"suffix\"></slot>\n            ${renderStatusIcon(errorText)}\n            <span class=\"field-spinner\" part=\"spinner\" role=\"status\" aria-label=\"Loading\"></span>\n            <button\n              class=\"pwd-toggle-btn\"\n              part=\"pwd-toggle\"\n              type=\"button\"\n              aria-label=\"${passwordToggleLabel}\"\n              aria-pressed=\"${passwordTogglePressed}\"\n              tabindex=\"${pwdToggleTabIndex}\"\n              @click=\"${togglePassword}\">\n              ${passwordToggleIcon}\n            </button>\n            <button\n              aria-label=\"Clear\"\n              class=\"clear-btn\"\n              part=\"clear\"\n              type=\"button\"\n              tabindex=\"${clearTabIndex}\"\n              @click=\"${clear}\">\n              <ore-icon aria-hidden=\"true\" name=\"x\" size=\"12\" stroke-width=\"2.5\"></ore-icon>\n            </button>\n          </div>\n        </div>\n        <div class=\"helper-text\" aria-live=\"polite\" id=\"${assistiveId}\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          <slot name=\"helper\">${() => helperText.value}</slot>\n        </div>\n        <div class=\"helper-text\" id=\"${errorId}\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          <slot name=\"error\">${() => errorText.value}</slot>\n        </div>\n        <div\n          class=\"char-counter\"\n          part=\"char-counter\"\n          data-near-limit=\"${counterNearLimit}\"\n          data-at-limit=\"${counterAtLimit}\"\n          ?hidden=\"${counterHidden}\">\n          ${counterText}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    roundedVariantMixin,\n    disabledLoadingMixin,\n    sizeVariantMixin(FIELD_SIZE_PRESET),\n    forcedColorsFocusMixin('input'),\n    componentStyles,\n    // Must come after `componentStyles` — `@layer` precedence is fixed by which layer name is\n    // *first* referenced across this whole array, and `componentStyles` is what establishes\n    // `refine.base` (the unconditional `--_bg`/`--_border-color` defaults this mixin's\n    // `refine.variants` rules need to win over). Placed earlier, `refine.variants` would end up\n    // registered as the *lower*-priority layer, and every variant would silently render as the\n    // base default — exactly the bug this ordering fixes.\n    fieldVariantMixin({ container: '.field', text: 'input', tokenPrefix: 'input' }),\n  ],\n});\n"],"mappings":"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"}

package/dist/inputs/button-group/button-group.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--group-gap:var(--size-2);--group-radius:var(--rounded-lg);display:inline-flex}.button-group{gap:var(--group-gap);flex-direction:row;display:flex}}@layer refine.variants{:host([orientation=vertical]) .button-group{flex-direction:column}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullwidth]) .button-group{width:100%}:host([fullwidth]) ::slotted(ore-button){flex:1}:host([attached]) .button-group{gap:0}:host([attached]) ::slotted(ore-button:hover),:host([attached]) ::slotted(ore-button:focus-within){z-index:1;position:relative}:host([attached]:not([orientation=vertical])) ::slotted(ore-button){--button-radius:0}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:not(:first-child)){--button-border-start:0}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:first-child){--button-radius:var(--group-radius) 0 0 var(--group-radius)}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:last-child){--button-radius:0 var(--group-radius) var(--group-radius) 0}:host([attached][orientation=vertical]) ::slotted(ore-button){--button-radius:0}:host([attached][orientation=vertical]) ::slotted(ore-button:not(:first-child)){--button-border-top:0}:host([attached][orientation=vertical]) ::slotted(ore-button:first-child){--button-radius:var(--group-radius) var(--group-radius) 0 0}:host([attached][orientation=vertical]) ::slotted(ore-button:last-child){--button-radius:0 0 var(--group-radius) var(--group-radius)}}`;exports.default=e;
+var e=`@layer refine.base{:host{--group-gap:var(--size-2);--group-radius:var(--_radius,var(--rounded-lg));display:inline-flex}.button-group{gap:var(--group-gap);flex-direction:row;display:flex}}@layer refine.variants{:host([orientation=vertical]) .button-group{flex-direction:column}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullwidth]) .button-group{width:100%}:host([fullwidth]) ::slotted(ore-button){flex:1}:host([attached]) .button-group{gap:0}:host([attached]) ::slotted(ore-button:hover),:host([attached]) ::slotted(ore-button:focus-within){z-index:1;position:relative}:host([attached]:not([orientation=vertical])) ::slotted(ore-button){--button-radius:0}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:not(:first-child)){--button-border-start:0}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:first-child){--button-radius:var(--group-radius) 0 0 var(--group-radius)}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:last-child){--button-radius:0 var(--group-radius) var(--group-radius) 0}:host([attached][orientation=vertical]) ::slotted(ore-button){--button-radius:0}:host([attached][orientation=vertical]) ::slotted(ore-button:not(:first-child)){--button-border-top:0}:host([attached][orientation=vertical]) ::slotted(ore-button:first-child){--button-radius:var(--group-radius) var(--group-radius) 0 0}:host([attached][orientation=vertical]) ::slotted(ore-button:last-child){--button-radius:0 0 var(--group-radius) var(--group-radius)}}`;exports.default=e;
 //# sourceMappingURL=button-group.css.cjs.map

package/dist/inputs/button-group/button-group.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.css.cjs","names":[],"sources":["../../../src/inputs/button-group/button-group.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles\n       ======================================== */\n\n  :host {\n    display: inline-flex;\n\n    --group-gap: var(--size-2);\n    --group-radius: var(--rounded-lg);\n  }\n\n  .button-group {\n    display: flex;\n    flex-direction: row;\n    gap: var(--group-gap);\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Orientation\n       ======================================== */\n\n  :host([orientation='vertical']) .button-group {\n    flex-direction: column;\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Full Width\n       ======================================== */\n\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  :host([fullwidth]) .button-group {\n    width: 100%;\n  }\n\n  :host([fullwidth]) ::slotted(ore-button) {\n    flex: 1;\n  }\n\n  /* ========================================\n       Attached Mode\n       ======================================== */\n\n  :host([attached]) .button-group {\n    gap: 0;\n  }\n\n  /* Ensure attached buttons have proper z-index on hover/focus */\n  :host([attached]) ::slotted(ore-button:hover),\n  :host([attached]) ::slotted(ore-button:focus-within) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* Horizontal attached - remove inner borders and round corners */\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:not(:first-child)) {\n    --button-border-start: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:first-child) {\n    --button-radius: var(--group-radius) 0 0 var(--group-radius);\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:last-child) {\n    --button-radius: 0 var(--group-radius) var(--group-radius) 0;\n  }\n\n  /* Vertical attached - remove inner borders and round corners */\n  :host([attached][orientation='vertical']) ::slotted(ore-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:not(:first-child)) {\n    --button-border-top: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:first-child) {\n    --button-radius: var(--group-radius) var(--group-radius) 0 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:last-child) {\n    --button-radius: 0 0 var(--group-radius) var(--group-radius);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"button-group.css.cjs","names":[],"sources":["../../../src/inputs/button-group/button-group.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles\n       ======================================== */\n\n  :host {\n    display: inline-flex;\n\n    --group-gap: var(--size-2);\n    --group-radius: var(--_radius, var(--rounded-lg));\n  }\n\n  .button-group {\n    display: flex;\n    flex-direction: row;\n    gap: var(--group-gap);\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Orientation\n       ======================================== */\n\n  :host([orientation='vertical']) .button-group {\n    flex-direction: column;\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Full Width\n       ======================================== */\n\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  :host([fullwidth]) .button-group {\n    width: 100%;\n  }\n\n  :host([fullwidth]) ::slotted(ore-button) {\n    flex: 1;\n  }\n\n  /* ========================================\n       Attached Mode\n       ======================================== */\n\n  :host([attached]) .button-group {\n    gap: 0;\n  }\n\n  /* Ensure attached buttons have proper z-index on hover/focus */\n  :host([attached]) ::slotted(ore-button:hover),\n  :host([attached]) ::slotted(ore-button:focus-within) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* Horizontal attached - remove inner borders and round corners */\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:not(:first-child)) {\n    --button-border-start: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:first-child) {\n    --button-radius: var(--group-radius) 0 0 var(--group-radius);\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:last-child) {\n    --button-radius: 0 var(--group-radius) var(--group-radius) 0;\n  }\n\n  /* Vertical attached - remove inner borders and round corners */\n  :host([attached][orientation='vertical']) ::slotted(ore-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:not(:first-child)) {\n    --button-border-top: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:first-child) {\n    --button-radius: var(--group-radius) var(--group-radius) 0 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:last-child) {\n    --button-radius: 0 0 var(--group-radius) var(--group-radius);\n  }\n}\n"],"mappings":""}

package/dist/inputs/button-group/button-group.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/button-group/button-group.css?inline
-var e = "@layer refine.base{:host{--group-gap:var(--size-2);--group-radius:var(--rounded-lg);display:inline-flex}.button-group{gap:var(--group-gap);flex-direction:row;display:flex}}@layer refine.variants{:host([orientation=vertical]) .button-group{flex-direction:column}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullwidth]) .button-group{width:100%}:host([fullwidth]) ::slotted(ore-button){flex:1}:host([attached]) .button-group{gap:0}:host([attached]) ::slotted(ore-button:hover),:host([attached]) ::slotted(ore-button:focus-within){z-index:1;position:relative}:host([attached]:not([orientation=vertical])) ::slotted(ore-button){--button-radius:0}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:not(:first-child)){--button-border-start:0}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:first-child){--button-radius:var(--group-radius) 0 0 var(--group-radius)}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:last-child){--button-radius:0 var(--group-radius) var(--group-radius) 0}:host([attached][orientation=vertical]) ::slotted(ore-button){--button-radius:0}:host([attached][orientation=vertical]) ::slotted(ore-button:not(:first-child)){--button-border-top:0}:host([attached][orientation=vertical]) ::slotted(ore-button:first-child){--button-radius:var(--group-radius) var(--group-radius) 0 0}:host([attached][orientation=vertical]) ::slotted(ore-button:last-child){--button-radius:0 0 var(--group-radius) var(--group-radius)}}";
+var e = "@layer refine.base{:host{--group-gap:var(--size-2);--group-radius:var(--_radius,var(--rounded-lg));display:inline-flex}.button-group{gap:var(--group-gap);flex-direction:row;display:flex}}@layer refine.variants{:host([orientation=vertical]) .button-group{flex-direction:column}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullwidth]) .button-group{width:100%}:host([fullwidth]) ::slotted(ore-button){flex:1}:host([attached]) .button-group{gap:0}:host([attached]) ::slotted(ore-button:hover),:host([attached]) ::slotted(ore-button:focus-within){z-index:1;position:relative}:host([attached]:not([orientation=vertical])) ::slotted(ore-button){--button-radius:0}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:not(:first-child)){--button-border-start:0}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:first-child){--button-radius:var(--group-radius) 0 0 var(--group-radius)}:host([attached]:not([orientation=vertical])) ::slotted(ore-button:last-child){--button-radius:0 var(--group-radius) var(--group-radius) 0}:host([attached][orientation=vertical]) ::slotted(ore-button){--button-radius:0}:host([attached][orientation=vertical]) ::slotted(ore-button:not(:first-child)){--button-border-top:0}:host([attached][orientation=vertical]) ::slotted(ore-button:first-child){--button-radius:var(--group-radius) var(--group-radius) 0 0}:host([attached][orientation=vertical]) ::slotted(ore-button:last-child){--button-radius:0 0 var(--group-radius) var(--group-radius)}}";
 //#endregion
 export { e as default };
 

package/dist/inputs/button-group/button-group.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.css.js","names":[],"sources":["../../../src/inputs/button-group/button-group.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles\n       ======================================== */\n\n  :host {\n    display: inline-flex;\n\n    --group-gap: var(--size-2);\n    --group-radius: var(--rounded-lg);\n  }\n\n  .button-group {\n    display: flex;\n    flex-direction: row;\n    gap: var(--group-gap);\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Orientation\n       ======================================== */\n\n  :host([orientation='vertical']) .button-group {\n    flex-direction: column;\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Full Width\n       ======================================== */\n\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  :host([fullwidth]) .button-group {\n    width: 100%;\n  }\n\n  :host([fullwidth]) ::slotted(ore-button) {\n    flex: 1;\n  }\n\n  /* ========================================\n       Attached Mode\n       ======================================== */\n\n  :host([attached]) .button-group {\n    gap: 0;\n  }\n\n  /* Ensure attached buttons have proper z-index on hover/focus */\n  :host([attached]) ::slotted(ore-button:hover),\n  :host([attached]) ::slotted(ore-button:focus-within) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* Horizontal attached - remove inner borders and round corners */\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:not(:first-child)) {\n    --button-border-start: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:first-child) {\n    --button-radius: var(--group-radius) 0 0 var(--group-radius);\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:last-child) {\n    --button-radius: 0 var(--group-radius) var(--group-radius) 0;\n  }\n\n  /* Vertical attached - remove inner borders and round corners */\n  :host([attached][orientation='vertical']) ::slotted(ore-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:not(:first-child)) {\n    --button-border-top: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:first-child) {\n    --button-radius: var(--group-radius) var(--group-radius) 0 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:last-child) {\n    --button-radius: 0 0 var(--group-radius) var(--group-radius);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"button-group.css.js","names":[],"sources":["../../../src/inputs/button-group/button-group.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles\n       ======================================== */\n\n  :host {\n    display: inline-flex;\n\n    --group-gap: var(--size-2);\n    --group-radius: var(--_radius, var(--rounded-lg));\n  }\n\n  .button-group {\n    display: flex;\n    flex-direction: row;\n    gap: var(--group-gap);\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Orientation\n       ======================================== */\n\n  :host([orientation='vertical']) .button-group {\n    flex-direction: column;\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Full Width\n       ======================================== */\n\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  :host([fullwidth]) .button-group {\n    width: 100%;\n  }\n\n  :host([fullwidth]) ::slotted(ore-button) {\n    flex: 1;\n  }\n\n  /* ========================================\n       Attached Mode\n       ======================================== */\n\n  :host([attached]) .button-group {\n    gap: 0;\n  }\n\n  /* Ensure attached buttons have proper z-index on hover/focus */\n  :host([attached]) ::slotted(ore-button:hover),\n  :host([attached]) ::slotted(ore-button:focus-within) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* Horizontal attached - remove inner borders and round corners */\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:not(:first-child)) {\n    --button-border-start: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:first-child) {\n    --button-radius: var(--group-radius) 0 0 var(--group-radius);\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(ore-button:last-child) {\n    --button-radius: 0 var(--group-radius) var(--group-radius) 0;\n  }\n\n  /* Vertical attached - remove inner borders and round corners */\n  :host([attached][orientation='vertical']) ::slotted(ore-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:not(:first-child)) {\n    --button-border-top: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:first-child) {\n    --button-radius: var(--group-radius) var(--group-radius) 0 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(ore-button:last-child) {\n    --button-radius: 0 0 var(--group-radius) var(--group-radius);\n  }\n}\n"],"mappings":""}

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

@@ -1,5 +1,5 @@
 import { type Readable } from '@vielzeug/ripple';
-import type { ComponentSize, ThemeColor } from '../../shared';
+import type { ComponentSize, RoundedSize, ThemeColor } from '../../shared';
 import type { ButtonVariant } from '../button/button';
 /** Button group properties */
 export type OreButtonGroupProps = {
@@ -13,6 +13,8 @@ export type OreButtonGroupProps = {
     label?: string;
     /** Layout direction */
     orientation?: 'horizontal' | 'vertical';
+    /** Corner radius of the group container (and its attached-mode end buttons) */
+    rounded?: RoundedSize | '';
     /** Shared size for all child buttons */
     size?: ComponentSize;
     /** Shared visual variant for all child buttons */
@@ -36,20 +38,21 @@ export declare const BUTTON_GROUP_CTX: import("@vielzeug/ore").InjectionKey<Butt
  * @attr {boolean} fullwidth - Group spans full width
  * @attr {string} label - Accessible label
  * @attr {string} orientation - 'horizontal' | 'vertical'
+ * @attr {string} rounded - Corner radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' (bare attribute defaults to 'full')
  * @attr {string} size - Shared size: 'sm' | 'md' | 'lg'
  * @attr {string} variant - Shared visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'frost'
  *
  * @slot - Place ore-button elements here
  *
  * @cssprop --group-gap - Gap between buttons (non-attached mode)
- * @cssprop --group-radius - Border radius of the group container
+ * @cssprop --group-radius - Border radius of the group container, defaults to the `rounded` attribute's token
  * @cssprop --button-radius - Passed through to child buttons to control corner radius
  * @cssprop --button-border-start - Passed through to suppress start borders in attached mode
  * @cssprop --button-border-top - Passed through to suppress top borders in vertical attached mode
  * @part group - Group container.
  * @example
  * ```html
- * <ore-button-group attached>
+ * <ore-button-group attached rounded="full">
  *   <ore-button variant="solid" color="primary">Save</ore-button>
  *   <ore-button variant="solid" color="primary">Save &amp; Continue</ore-button>
  * </ore-button-group>

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":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKtD,8BAA8B;AAC9B,MAAM,MAAM,mBAAmB,GAAG;IAChC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,wCAAwC;IACxC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,mFAAmF;AACnF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,OAAO,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,sEAAkE,CAAC;AAEhG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,gBAAgB,EAAG,kBAA2B,CAAC"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/button-group/button-group.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMtD,8BAA8B;AAC9B,MAAM,MAAM,mBAAmB,GAAG;IAChC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,+EAA+E;IAC/E,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,wCAAwC;IACxC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,mFAAmF;AACnF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,OAAO,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,sEAAkE,CAAC;AAEhG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,gBAAgB,EAAG,kBAA2B,CAAC"}

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

@@ -1,8 +1,8 @@
 import type { CheckableProps, ComponentSize, ThemeColor } from '../../types';
-import { type CheckableChangePayload } from '../../headless';
 import '../../content/icon/icon';
 export type OreCheckboxEvents = {
-    change: CheckableChangePayload;
+    change: Event;
+    input: Event;
 };
 export type OreCheckboxProps = CheckableProps & {
     /** Theme color */
@@ -15,7 +15,7 @@ export type OreCheckboxProps = CheckableProps & {
     helper?: string;
     /** Indeterminate state (partially checked) */
     indeterminate?: boolean;
-    /** Require this checkbox to be checked for `<ore-form>` validation (e.g. a consent checkbox) */
+    /** Require this checkbox to be checked for native form validation (e.g. a consent checkbox) */
     required?: boolean;
     /** Component size */
     size?: ComponentSize;
@@ -28,7 +28,7 @@ export type OreCheckboxProps = CheckableProps & {
  * @attr {boolean} checked - Checked state
  * @attr {boolean} disabled - Disable checkbox interaction
  * @attr {boolean} indeterminate - Indeterminate (partially checked) state
- * @attr {boolean} required - Require this checkbox to be checked for `<ore-form>` validation
+ * @attr {boolean} required - Require this checkbox to be checked for native form validation
  * @attr {string} value - Field value submitted with forms
  * @attr {string} name - Form field name
  * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
@@ -36,7 +36,8 @@ export type OreCheckboxProps = CheckableProps & {
  * @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: { checked: boolean, value: string, originalEvent?: Event }
+ * @fires input - Emitted when checkbox is toggled.
+ * @fires change - Emitted when checkbox is toggled.
  *
  * @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":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7E,OAAO,EAAE,KAAK,sBAAsB,EAAoC,MAAM,gBAAgB,CAAC;AAC/F,OAAO,yBAAyB,CAAC;AAejC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,sBAAsB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG;IAC9C,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;IACxB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox/checkbox.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG7E,OAAO,yBAAyB,CAAC;AAejC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG;IAC9C,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;IACxB,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}

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

@@ -1,6 +1,6 @@
 import { type Readable } from '@vielzeug/ripple';
 import type { ComponentSize, ThemeColor } from '../../types';
-import { type ChoiceChangeDetail } from '../../headless';
+import { type ChoiceChangeDetail } from '../../core';
 export type CheckboxGroupContext = {
     color: Readable<ThemeColor | undefined>;
     disabled: Readable<boolean>;

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":"AAiBA,OAAO,EAAY,KAAK,QAAQ,EAAU,MAAM,kBAAkB,CAAC;AAEnE,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,EACL,KAAK,kBAAkB,EAKxB,MAAM,gBAAgB,CAAC;AAQxB,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvD,MAAM,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,4DAA8D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,kBAAkB,EAAG,oBAA6B,CAAC"}
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox-group/checkbox-group.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAY,KAAK,QAAQ,EAAU,MAAM,kBAAkB,CAAC;AAEnE,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,EACL,KAAK,kBAAkB,EAKxB,MAAM,YAAY,CAAC;AAOpB,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvD,MAAM,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,4DAA8D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,kBAAkB,EAAG,oBAA6B,CAAC"}