@vielzeug/refine 1.3.1 → 1.4.0

package/dist/input.js

@@ -9,12 +9,13 @@ import { lifecycleSignal as l } from "./headless/ore.js";
 import { createTextField as u } from "./headless/text-field.js";
 import { useField as d } from "./ore/dist/forms/field.js";
 import "./ore/dist/forms.js";
-import { FORM_CTX as f, useFormContext as p } from "./inputs/shared/form-context.js";
-import m from "./inputs/input/input.css.js";
-import { bind as h, define as g, html as _, inject as v, onCleanup as y, onElement as b, prop as x, ref as S, useEmit as C, useSlots as w } from "@vielzeug/ore";
-import { computed as T, signal as E, watch as D } from "@vielzeug/ripple";
+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 h from "./inputs/input/input.css.js";
+import { bind as g, define as _, html as v, inject as y, onCleanup as b, onElement as x, prop as S, ref as C, useEmit as w, useSlots as T } from "@vielzeug/ore";
+import { computed as E, signal as D, watch as O } from "@vielzeug/ripple";
 //#region src/inputs/input/input.ts
-var O = [
+var k = [
 	"text",
 	"email",
 	"password",
@@ -27,39 +28,38 @@ var O = [
 	"datetime-local",
 	"month",
 	"week"
-], k = "ore-input";
-g(k, {
+], A = "ore-input";
+_(A, {
 	formAssociated: !0,
 	props: {
 		...s,
 		...o,
 		...i,
 		...a,
-		autocomplete: x.string(),
-		clearable: x.bool(!1),
-		error: x.string(),
-		fullwidth: x.bool(!1),
-		helper: x.string(),
-		inputmode: x.string(),
-		label: x.string(),
-		"label-placement": x.oneOf(["inset", "outside"], "inset"),
-		maxlength: x.json(void 0),
-		minlength: x.json(void 0),
-		name: x.string(),
-		pattern: x.string(),
-		placeholder: x.string(),
-		readonly: x.bool(!1),
-		ref: x.json(void 0),
-		required: x.bool(!1),
-		type: x.oneOf(O, "text"),
-		value: x.string(),
-		variant: x.string()
+		autocomplete: S.string(),
+		clearable: S.bool(!1),
+		error: S.string(),
+		fullwidth: S.bool(!1),
+		helper: S.string(),
+		inputmode: S.string(),
+		label: S.string(),
+		"label-placement": S.oneOf(["inset", "outside"], "inset"),
+		maxlength: S.json(void 0),
+		minlength: S.json(void 0),
+		name: S.string(),
+		pattern: S.string(),
+		placeholder: S.string(),
+		readonly: S.bool(!1),
+		ref: S.json(void 0),
+		required: S.bool(!1),
+		type: S.oneOf(k, "text"),
+		value: S.string(),
+		variant: S.string()
 	},
 	setup(t) {
-		let n = C(), r = w(), i = v(f), a = p(t, i), o = E(!1), s = S(), c = T(() => !!t.label.value || r.has("label").value), m = l(y), g = null, x = u({
+		let n = w(), r = T(), i = y(p), a = m(t, i), o = D(!1), s = C(), c = E(() => !!t.label.value || r.has("label").value), h = l(b), _ = u({
 			disabled: a.disabled,
 			error: t.error,
-			getFormField: () => g,
 			hasLabel: c,
 			helper: t.helper,
 			label: t.label,
@@ -78,30 +78,35 @@ g(k, {
 				});
 			},
 			prefix: "input",
-			signal: m,
+			readonly: t.readonly,
+			required: t.required,
+			signal: h,
 			validateOn: i?.validateOn,
 			value: t.value
 		});
-		g = d({
-			disabled: x.disabled,
+		_.attachFormField(d({
+			disabled: _.disabled,
+			onReset: _.reset,
 			toFormValue: (e) => e,
-			value: x.value
-		});
-		let { ariaDescribedBy: O, ariaErrorMessage: k, ariaInvalid: A, ariaLabelledBy: j, assistiveId: M, clear: N, counter: P, errorId: F, errorText: I, fieldId: L, helperText: R, labelId: z, labelVisible: B, value: V, wire: H } = x;
-		return b(s, (e) => {
-			H(e, m), t.ref.value?.(e);
-			let n = D(t.ref, (t) => {
+			validationMessage: _.validationMessage,
+			validity: _.validity,
+			value: _.value
+		}));
+		let { ariaDescribedBy: S, ariaErrorMessage: k, ariaInvalid: A, ariaLabelledBy: j, assistiveId: M, clear: N, counter: P, errorId: F, errorText: I, fieldId: L, helperText: R, labelId: z, labelVisible: B, value: V, wire: H } = _;
+		return x(s, (e) => {
+			H(e, h), t.ref.value?.(e);
+			let n = O(t.ref, (t) => {
 				t?.(e);
 			});
 			return () => {
 				n.dispose(), t.ref.value?.(null);
 			};
-		}), h({ attr: {
-			error: () => I.value || void 0,
+		}), g({ attr: {
+			error: f(I),
 			"has-value": () => V.value ? !0 : void 0,
 			size: a.size,
 			variant: a.variant
-		} }), _`
+		} }), v`
       <div class="input-wrapper" part="wrapper">
         <label class="label" for="${L}" id="${z}" part="label" ?hidden="${() => !B.value}"
           ><slot name="label">${t.label}</slot></label
@@ -125,7 +130,7 @@ g(k, {
               ?required="${t.required}"
               :value="${e(V)}"
               :aria-labelledby="${j}"
-              :aria-describedby="${O}"
+              :aria-describedby="${S}"
               :aria-errormessage="${k}"
               :aria-invalid="${A}"
               ref="${s}" />
@@ -140,7 +145,7 @@ g(k, {
               @click="${() => {
 			o.value = !o.value, s.value?.focus();
 		}}">
-              ${() => o.value ? _`<ore-icon name="eye-off" size="14" stroke-width="2" aria-hidden="true"></ore-icon>` : _`<ore-icon name="eye" size="14" stroke-width="2" aria-hidden="true"></ore-icon>`}
+              ${() => o.value ? v`<ore-icon name="eye-off" size="14" stroke-width="2" aria-hidden="true"></ore-icon>` : v`<ore-icon name="eye" size="14" stroke-width="2" aria-hidden="true"></ore-icon>`}
             </button>
             <button
               aria-label="Clear"
@@ -177,10 +182,10 @@ g(k, {
 		...r,
 		t(c),
 		n("input"),
-		m
+		h
 	]
 });
 //#endregion
-export { k as INPUT_TAG };
+export { A 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, watch } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { InputType, VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createTextField } from '../../headless';\nimport { disablableBundle, FIELD_SIZE_PRESET, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport '../../content/icon/icon';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\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  /** 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 {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 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 * ```\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    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.json(undefined as ((el: HTMLInputElement | null) => void) | null | undefined),\n    required: 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\n    const abortSignal = lifecycleSignal(onCleanup);\n    let _formField: { reportValidity(): void } | null = null;\n    const tf = createTextField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\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      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    _formField = useField<string>({ disabled: tf.disabled, toFormValue: (v) => v, value: tf.value });\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      // Immediate fire for when the prop is already set on mount.\n      props.ref.value?.(el);\n\n      // Reactive watcher so that if props.ref is set *after* the inner\n      // <input> mounts (e.g. parent sets it via a ref callback after render),\n      // the new callback still receives the live element.\n      const sub = watch(props.ref, (cb) => {\n        cb?.(el);\n      });\n\n      return () => {\n        sub.dispose();\n        props.ref.value?.(null);\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: () => errorText.value || undefined,\n        'has-value': () => (fieldValue.value ? true : undefined),\n        size: fCtxProps.size,\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=\"${props.disabled}\"\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              ref=\"${inputRef}\" />\n            <slot name=\"suffix\"></slot>\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: [...fieldMixins, sizeVariantMixin(FIELD_SIZE_PRESET), forcedColorsFocusMixin('input'), componentStyles],\n});\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,IAAM,IAAoB;CACxB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GA2Da,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,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,KAAK,KAAA,CAAuE;EACtF,UAAU,EAAK,KAAK,EAAK;EACzB,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,GAEzE,IAAc,EAAgB,CAAS,GACzC,IAAgD,MAC9C,IAAK,EAAgB;GACzB,UAAU,EAAU;GACpB,OAAO,EAAM;GACb,oBAAoB;GACpB;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,QAAQ;GACR,YAAY,GAAS;GACrB,OAAO,EAAM;EACf,CAAC;EAED,IAAa,EAAiB;GAAE,UAAU,EAAG;GAAU,cAAc,MAAM;GAAG,OAAO,EAAG;EAAM,CAAC;EAE/F,IAAM,EACJ,oBACA,qBACA,gBACA,mBACA,gBACA,OAAO,GACP,YACA,YACA,cACA,SAAS,GACT,eACA,YACA,iBACA,OAAO,GACP,YACE;EA4DJ,OA1DA,EAAU,IAAW,MAAO;GAI1B,AAHA,EAAK,GAAI,CAAW,GAGpB,EAAM,IAAI,QAAQ,CAAE;GAKpB,IAAM,IAAM,EAAM,EAAM,MAAM,MAAO;IACnC,IAAK,CAAE;GACT,CAAC;GAED,aAAa;IAEX,AADA,EAAI,QAAQ,GACZ,EAAM,IAAI,QAAQ,IAAI;GACxB;EACF,CAAC,GAUD,EAAK,EACH,MAAM;GACJ,aAAa,EAAU,SAAS,KAAA;GAChC,mBAAoB,EAAW,QAAQ,KAAO,KAAA;GAC9C,MAAM,EAAU;GAChB,SAAS,EAAU;EACrB,EACF,CAAC,GAwBM,CAAI;;oCAEqB,EAAQ,QAAQ,EAAQ,gCAxB9B,CAAC,EAAa,MAwBsD;gCAClE,EAAM,MAAM;;;;;;;oBAOxB,EAAQ;6BA3CtB,EAAM,KAAK,UAAU,cAAc,EAAa,QAAQ,SAAU,EAAM,KAAK,SAAS,OA4CnD;uBAClB,EAAM,KAAK;8BACJ,EAAM,YAAY;+BACjB,EAAM,aAAa;4BACtB,EAAM,UAAU;4BAChB,EAAM,UAAU;4BAChB,EAAM,UAAU;0BAClB,EAAM,QAAQ;2BACb,EAAM,SAAS;2BACf,EAAM,SAAS;2BACf,EAAM,SAAS;wBAClB,EAAK,CAAU,EAAE;kCACP,EAAe;mCACd,EAAgB;oCACf,EAAiB;+BACtB,EAAY;qBACtB,EAAS;;;;;;mCAhDS,EAAa,QAAQ,kBAAkB,gBAsD7B;qCArDT,OAAO,EAAa,KAAK,EAsDZ;iCAzChB,EAAM,KAAK,UAAU,aAAa,MAAM,KA0ChC;8BAxCZ;GAE3B,AADA,EAAa,QAAQ,CAAC,EAAa,OACnC,EAAS,OAAO,MAAM;EACxB,EAsCmC;sBAtDjC,EAAa,QACT,CAAI,uFACJ,CAAI,iFAqDqB;;;;;;;iCA7CF,EAAW,QAAQ,MAAM,KAoDjB;yBAnFtB,MAAwB;GAErC,AADA,EAAW,CAAK,GAChB,EAAS,OAAO,MAAM;EACxB,EAiF0B;;;;;0DAK4B,EAAY,iCAjEvC,CAAC,CAAC,EAAU,SAAS,CAAC,EAAW,MAiE8C;sCACxE,EAAW,MAAM;;uCAEhB,EAAQ,6CAnEjB,CAAC,EAAU,MAmEyD;qCAC7D,EAAU,MAAM;;;;;oCAnEjB,GAAS,MAAM,oBAAoB,CAAC,GAAS,MAAM,iBAAiB,KAAK,KAwE9D;kCAvEb,GAAS,MAAM,iBAAiB,KAAK,KAwE5B;2BAvEX,CAAC,EAwEE;kBAvEL,GAAS,MAAM,eAAe,GAwEpC;;;;CAItB;CACA,QAAQ,EAAE,gBAAgB,GAAK;CAC/B,QAAQ;EAAC,GAAG;EAAa,EAAiB,CAAiB;EAAG,EAAuB,OAAO;EAAG;CAAe;AAChH,CAAC"}
+{"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, watch } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { InputType, VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createTextField } from '../../headless';\nimport { disablableBundle, FIELD_SIZE_PRESET, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport '../../content/icon/icon';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { errorAttr } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\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  /** 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 {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 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 * ```\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    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.json(undefined as ((el: HTMLInputElement | null) => void) | null | undefined),\n    required: 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\n    const abortSignal = lifecycleSignal(onCleanup);\n    const tf = createTextField({\n      disabled: fCtxProps.disabled,\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      // Immediate fire for when the prop is already set on mount.\n      props.ref.value?.(el);\n\n      // Reactive watcher so that if props.ref is set *after* the inner\n      // <input> mounts (e.g. parent sets it via a ref callback after render),\n      // the new callback still receives the live element.\n      const sub = watch(props.ref, (cb) => {\n        cb?.(el);\n      });\n\n      return () => {\n        sub.dispose();\n        props.ref.value?.(null);\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        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=\"${props.disabled}\"\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              ref=\"${inputRef}\" />\n            <slot name=\"suffix\"></slot>\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: [...fieldMixins, sizeVariantMixin(FIELD_SIZE_PRESET), forcedColorsFocusMixin('input'), componentStyles],\n});\n"],"mappings":"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"}

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

@@ -15,6 +15,8 @@ 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) */
+    required?: boolean;
     /** Component size */
     size?: ComponentSize;
 };
@@ -26,6 +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 {string} value - Field value submitted with forms
  * @attr {string} name - Form field name
  * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'

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,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;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;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"}

package/dist/inputs/combobox/combobox.d.ts

@@ -11,6 +11,7 @@ export type { OreComboboxEvents, OreComboboxProps } from './combobox.types';
  * @attr {boolean} creatable - Allow users to create custom options from search query
  * @attr {boolean} no-filter - Disable client-side filtering (useful for server-side search)
  * @attr {string} placeholder - Placeholder text
+ * @attr {boolean} required - Require a non-blank selection for `<ore-form>` validation
  *
  * @fires {CustomEvent} change - Emitted when selection changes. detail: { value: string | string[], values: string[], labels: string[] }
  * @fires {CustomEvent} search - Emitted when user types. detail: { query: string }

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox.ts"],"names":[],"mappings":"AA8BA,OAAO,0BAA0B,CAAC;AAClC,OAAO,gBAAgB,CAAC;AAGxB,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox.ts"],"names":[],"mappings":"AA8BA,OAAO,0BAA0B,CAAC;AAClC,OAAO,gBAAgB,CAAC;AAGxB,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}

package/dist/inputs/combobox/combobox.types.d.ts

@@ -34,6 +34,8 @@ export type OreComboboxProps = Omit<SelectableFieldProps<Exclude<VisualVariant,
     multiple?: boolean;
     'no-filter'?: boolean;
     options?: ComboboxOptionInput[];
+    /** Require a non-blank selection for `<ore-form>` validation */
+    required?: boolean;
     value?: string | string[];
 };
 export type OreComboboxOptionProps = {

package/dist/inputs/combobox/combobox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.types.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,EAAE;QAAE,MAAM,EAAE,mBAAmB,CAAA;KAAE,CAAC;IACvC,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,oBAAoB,CAAC,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,EAC9D,iBAAiB,GAAG,OAAO,CAC5B,GAAG;IACF,yFAAyF;IACzF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACxC,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}
+{"version":3,"file":"combobox.types.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,EAAE;QAAE,MAAM,EAAE,mBAAmB,CAAA;KAAE,CAAC;IACvC,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,oBAAoB,CAAC,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,EAC9D,iBAAiB,GAAG,OAAO,CAC5B,GAAG;IACF,yFAAyF;IACzF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACxC,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/dist/inputs/index.d.ts

@@ -21,6 +21,8 @@ export { FORM_TAG } from './form/form';
 export type { OreFormEvents, OreFormProps } from './form/form';
 export { INPUT_TAG } from './input/input';
 export type { OreInputEvents, OreInputProps } from './input/input';
+export { MESSAGE_COMPOSER_TAG } from './message-composer/message-composer';
+export type { OreMessageComposerEvents, OreMessageComposerProps } from './message-composer/message-composer';
 export { NUMBER_INPUT_TAG } from './number-input/number-input';
 export type { OreNumberInputEvents, OreNumberInputProps } from './number-input/number-input';
 export { OTP_INPUT_TAG } from './otp-input/otp-input';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/inputs/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/inputs/index.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/inputs/input/input.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5D,OAAO,yBAAyB,CAAC;AAKjC,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,KAAK,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG;IAC5E,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACzF,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/inputs/input/input.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5D,OAAO,yBAAyB,CAAC;AAMjC,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,KAAK,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG;IAC5E,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACzF,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}

package/dist/inputs/message-composer/message-composer.css.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_radius:var(--message-composer-radius,var(--rounded-2xl));--_padding:var(--message-composer-padding,var(--size-3));--_surface:var(--_bg);width:fit-content;max-width:100%;display:flex}:host([fullwidth]){width:100%}.composer{gap:var(--message-composer-gap,var(--_gap));width:100%;padding:var(--_padding);background:var(--_surface);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);flex-direction:column;display:flex}:host(:not([disabled],[variant=bordered],[variant=flat])) .composer:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=flat])) .composer:focus-within{--_surface:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow)}:host([error]:not([error=""])) .composer{border-color:var(--color-error)}:host([error]:not([error=""])) .composer:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}.field{box-sizing:border-box;width:100%;min-width:0;min-height:var(--message-composer-min-height,1lh);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--text-color-body);resize:none;background:0 0;border:none;outline:none;padding:0}.field::placeholder{color:var(--message-composer-placeholder-color,var(--color-contrast-500))}.helper-text[hidden]{display:none}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));padding-left:2px;padding-right:2px}.counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}.toolbar{gap:var(--message-composer-gap,var(--_gap));justify-content:space-between;align-items:center;display:flex}.toolbar-start,.toolbar-end{gap:var(--message-composer-gap,var(--_gap));align-items:center;min-width:0;display:flex}.send-btn{flex-shrink:0}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--message-composer-bg,var(--color-contrast-50));--_border-color:var(--message-composer-border-color,var(--color-contrast-300))}:host(:not([variant])) .composer,:host([variant=solid]) .composer{box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .composer:focus-within,:host([variant=solid]:not([disabled])) .composer:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]){--_bg:var(--message-composer-bg,var(--color-contrast-100));--_border-color:var(--message-composer-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent))}:host([variant=flat]) .composer{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]:not([disabled])) .composer:hover{background:var(--message-composer-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--message-composer-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]:not([disabled])) .composer:focus-within{background:var(--message-composer-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--message-composer-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--message-composer-bg,var(--_theme-backdrop));--_border-color:var(--message-composer-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]:not([disabled])) .composer:hover{border-color:var(--message-composer-hover-border-color,var(--_theme-focus))}:host([variant=bordered]) .field{color:var(--_theme-base)}:host([variant=bordered]) .field::placeholder{color:var(--message-composer-placeholder-color,color-mix(in oklch, var(--_theme-base) 45%, transparent))}:host([variant=outline]){--_bg:var(--message-composer-bg,transparent)}:host([variant=outline]) .composer{box-shadow:none}:host([variant=outline]:not([disabled])) .composer:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]){--_bg:var(--message-composer-bg,transparent);--_border-color:var(--message-composer-border-color,transparent)}:host([variant=ghost]) .composer{box-shadow:none}:host([variant=ghost]:not([disabled])) .composer:hover{background:var(--message-composer-hover-bg,var(--color-contrast-100))}}`;exports.default=e;
+//# sourceMappingURL=message-composer.css.cjs.map

package/dist/inputs/message-composer/message-composer.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-composer.css.cjs","names":[],"sources":["../../../src/inputs/message-composer/message-composer.css?inline"],"sourcesContent":["/*\n * Unlike the first version of this component, the field here is a plain `<textarea>` owned\n * directly by this stylesheet — not a nested `ore-textarea` with its own chrome suppressed via\n * `::part()` overrides. There is exactly one implementation of \"what the field looks like\" to\n * maintain (this file), not two.\n */\n@layer refine.base {\n  :host {\n    /* --_bg/--_border-color are set per-variant in @layer refine.variants below (every host\n       matches exactly one variant rule, including the implicit \"no attribute\" default) — no\n       fallback needed here. --_padding/--_font-size/--_gap are set per-size by\n       sizeVariantMixin(MESSAGE_COMPOSER_SIZE_PRESET) (see message-composer.ts's `styles`); this\n       is the `--message-composer-padding` public-override fallback for the \"md\" tier, matching\n       the same pattern `ore-textarea` uses for `--textarea-padding`. */\n    --_radius: var(--message-composer-radius, var(--rounded-2xl));\n    --_padding: var(--message-composer-padding, var(--size-3));\n    --_surface: var(--_bg);\n\n    display: flex;\n    width: fit-content;\n    max-width: 100%;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  .composer {\n    display: flex;\n    flex-direction: column;\n    gap: var(--message-composer-gap, var(--_gap));\n    width: 100%;\n    padding: var(--_padding);\n    background: var(--_surface);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* `flat` excluded — it gets its own theme-tinted hover/focus recipe below instead of the\n     plain canvas-background one every other variant shares (mirrors `ore-textarea`). */\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .composer:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='flat'])) .composer:focus-within {\n    --_surface: var(--color-canvas);\n\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  :host([error]:not([error=''])) .composer {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .composer:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  .field {\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 0;\n\n    /* Floor so an inline `height` from auto-resize (JS, set on `<textarea>` directly — see\n       auto-resize.ts) can never visually collapse the field below one line, e.g. before the\n       first `scrollHeight` read has actually happened. `ore-textarea` has the equivalent\n       `--_min-height` for the same reason. */\n    min-height: var(--message-composer-min-height, 1lh);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--text-color-body);\n    resize: none;\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  .field::placeholder {\n    color: var(--message-composer-placeholder-color, var(--color-contrast-500));\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  .toolbar {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .toolbar-start,\n  .toolbar-end {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    min-width: 0;\n  }\n\n  .send-btn {\n    flex-shrink: 0;\n  }\n}\n\n/*\n * Same five-variant set as `ore-textarea` (solid/flat/bordered/outline/ghost), applied to the\n * card (`.composer`) instead of a bare field — kept consistent with the rest of the field\n * family rather than a bespoke boolean \"flat or not\" so `ore-message-composer` doesn't read as\n * a special case next to `ore-input`/`ore-textarea`.\n */\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--message-composer-bg, var(--color-contrast-50));\n    --_border-color: var(--message-composer-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .composer,\n  :host([variant='solid']) .composer {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .composer:focus-within,\n  :host([variant='solid']:not([disabled])) .composer:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /*\n   * Flat — a filled, theme-tinted card that \"sinks in\" via an inset shadow rather than sitting\n   * on a border, same recipe as `ore-textarea`'s flat. Previously this was transparent at rest\n   * (identical to `ghost`) and only grew a visible identity nobody could see until it happened\n   * to line up with `ghost`'s own hover state — the two read as the same variant side-by-side.\n   */\n  :host([variant='flat']) {\n    --_bg: var(--message-composer-bg, var(--color-contrast-100));\n    --_border-color: var(--message-composer-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  :host([variant='flat']) .composer {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']:not([disabled])) .composer:hover {\n    background: var(--message-composer-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --message-composer-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']:not([disabled])) .composer:focus-within {\n    background: var(--message-composer-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--message-composer-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered — theme-tinted backdrop and border; field text picks up the theme color too. */\n  :host([variant='bordered']) {\n    --_bg: var(--message-composer-bg, var(--_theme-backdrop));\n    --_border-color: var(--message-composer-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']:not([disabled])) .composer:hover {\n    border-color: var(--message-composer-hover-border-color, var(--_theme-focus));\n  }\n\n  :host([variant='bordered']) .field {\n    color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) .field::placeholder {\n    color: var(--message-composer-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n  }\n\n  /* Outline — transparent background, border always visible, theme-colored focus ring. */\n  :host([variant='outline']) {\n    --_bg: var(--message-composer-bg, transparent);\n  }\n\n  :host([variant='outline']) .composer {\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .composer:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /*\n   * Ghost — fully transparent at rest and on hover-only background tint; focus falls through to\n   * the shared `:focus-within` rule above (canvas background + theme-focus border + theme\n   * shadow) instead of a second, bespoke focus recipe here — same as `ore-textarea`'s ghost.\n   */\n  :host([variant='ghost']) {\n    --_bg: var(--message-composer-bg, transparent);\n    --_border-color: var(--message-composer-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .composer {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']:not([disabled])) .composer:hover {\n    background: var(--message-composer-hover-bg, var(--color-contrast-100));\n  }\n}\n"],"mappings":""}

package/dist/inputs/message-composer/message-composer.css.js

@@ -0,0 +1,6 @@
+//#region src/inputs/message-composer/message-composer.css?inline
+var e = "@layer refine.base{:host{--_radius:var(--message-composer-radius,var(--rounded-2xl));--_padding:var(--message-composer-padding,var(--size-3));--_surface:var(--_bg);width:fit-content;max-width:100%;display:flex}:host([fullwidth]){width:100%}.composer{gap:var(--message-composer-gap,var(--_gap));width:100%;padding:var(--_padding);background:var(--_surface);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);flex-direction:column;display:flex}:host(:not([disabled],[variant=bordered],[variant=flat])) .composer:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=flat])) .composer:focus-within{--_surface:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow)}:host([error]:not([error=\"\"])) .composer{border-color:var(--color-error)}:host([error]:not([error=\"\"])) .composer:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}.field{box-sizing:border-box;width:100%;min-width:0;min-height:var(--message-composer-min-height,1lh);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--text-color-body);resize:none;background:0 0;border:none;outline:none;padding:0}.field::placeholder{color:var(--message-composer-placeholder-color,var(--color-contrast-500))}.helper-text[hidden]{display:none}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));padding-left:2px;padding-right:2px}.counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}.toolbar{gap:var(--message-composer-gap,var(--_gap));justify-content:space-between;align-items:center;display:flex}.toolbar-start,.toolbar-end{gap:var(--message-composer-gap,var(--_gap));align-items:center;min-width:0;display:flex}.send-btn{flex-shrink:0}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--message-composer-bg,var(--color-contrast-50));--_border-color:var(--message-composer-border-color,var(--color-contrast-300))}:host(:not([variant])) .composer,:host([variant=solid]) .composer{box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .composer:focus-within,:host([variant=solid]:not([disabled])) .composer:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]){--_bg:var(--message-composer-bg,var(--color-contrast-100));--_border-color:var(--message-composer-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent))}:host([variant=flat]) .composer{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]:not([disabled])) .composer:hover{background:var(--message-composer-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--message-composer-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]:not([disabled])) .composer:focus-within{background:var(--message-composer-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--message-composer-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--message-composer-bg,var(--_theme-backdrop));--_border-color:var(--message-composer-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]:not([disabled])) .composer:hover{border-color:var(--message-composer-hover-border-color,var(--_theme-focus))}:host([variant=bordered]) .field{color:var(--_theme-base)}:host([variant=bordered]) .field::placeholder{color:var(--message-composer-placeholder-color,color-mix(in oklch, var(--_theme-base) 45%, transparent))}:host([variant=outline]){--_bg:var(--message-composer-bg,transparent)}:host([variant=outline]) .composer{box-shadow:none}:host([variant=outline]:not([disabled])) .composer:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]){--_bg:var(--message-composer-bg,transparent);--_border-color:var(--message-composer-border-color,transparent)}:host([variant=ghost]) .composer{box-shadow:none}:host([variant=ghost]:not([disabled])) .composer:hover{background:var(--message-composer-hover-bg,var(--color-contrast-100))}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=message-composer.css.js.map

package/dist/inputs/message-composer/message-composer.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-composer.css.js","names":[],"sources":["../../../src/inputs/message-composer/message-composer.css?inline"],"sourcesContent":["/*\n * Unlike the first version of this component, the field here is a plain `<textarea>` owned\n * directly by this stylesheet — not a nested `ore-textarea` with its own chrome suppressed via\n * `::part()` overrides. There is exactly one implementation of \"what the field looks like\" to\n * maintain (this file), not two.\n */\n@layer refine.base {\n  :host {\n    /* --_bg/--_border-color are set per-variant in @layer refine.variants below (every host\n       matches exactly one variant rule, including the implicit \"no attribute\" default) — no\n       fallback needed here. --_padding/--_font-size/--_gap are set per-size by\n       sizeVariantMixin(MESSAGE_COMPOSER_SIZE_PRESET) (see message-composer.ts's `styles`); this\n       is the `--message-composer-padding` public-override fallback for the \"md\" tier, matching\n       the same pattern `ore-textarea` uses for `--textarea-padding`. */\n    --_radius: var(--message-composer-radius, var(--rounded-2xl));\n    --_padding: var(--message-composer-padding, var(--size-3));\n    --_surface: var(--_bg);\n\n    display: flex;\n    width: fit-content;\n    max-width: 100%;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  .composer {\n    display: flex;\n    flex-direction: column;\n    gap: var(--message-composer-gap, var(--_gap));\n    width: 100%;\n    padding: var(--_padding);\n    background: var(--_surface);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* `flat` excluded — it gets its own theme-tinted hover/focus recipe below instead of the\n     plain canvas-background one every other variant shares (mirrors `ore-textarea`). */\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .composer:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='flat'])) .composer:focus-within {\n    --_surface: var(--color-canvas);\n\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  :host([error]:not([error=''])) .composer {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .composer:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  .field {\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 0;\n\n    /* Floor so an inline `height` from auto-resize (JS, set on `<textarea>` directly — see\n       auto-resize.ts) can never visually collapse the field below one line, e.g. before the\n       first `scrollHeight` read has actually happened. `ore-textarea` has the equivalent\n       `--_min-height` for the same reason. */\n    min-height: var(--message-composer-min-height, 1lh);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--text-color-body);\n    resize: none;\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  .field::placeholder {\n    color: var(--message-composer-placeholder-color, var(--color-contrast-500));\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  .toolbar {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .toolbar-start,\n  .toolbar-end {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    min-width: 0;\n  }\n\n  .send-btn {\n    flex-shrink: 0;\n  }\n}\n\n/*\n * Same five-variant set as `ore-textarea` (solid/flat/bordered/outline/ghost), applied to the\n * card (`.composer`) instead of a bare field — kept consistent with the rest of the field\n * family rather than a bespoke boolean \"flat or not\" so `ore-message-composer` doesn't read as\n * a special case next to `ore-input`/`ore-textarea`.\n */\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--message-composer-bg, var(--color-contrast-50));\n    --_border-color: var(--message-composer-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .composer,\n  :host([variant='solid']) .composer {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .composer:focus-within,\n  :host([variant='solid']:not([disabled])) .composer:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /*\n   * Flat — a filled, theme-tinted card that \"sinks in\" via an inset shadow rather than sitting\n   * on a border, same recipe as `ore-textarea`'s flat. Previously this was transparent at rest\n   * (identical to `ghost`) and only grew a visible identity nobody could see until it happened\n   * to line up with `ghost`'s own hover state — the two read as the same variant side-by-side.\n   */\n  :host([variant='flat']) {\n    --_bg: var(--message-composer-bg, var(--color-contrast-100));\n    --_border-color: var(--message-composer-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  :host([variant='flat']) .composer {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']:not([disabled])) .composer:hover {\n    background: var(--message-composer-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --message-composer-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']:not([disabled])) .composer:focus-within {\n    background: var(--message-composer-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--message-composer-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered — theme-tinted backdrop and border; field text picks up the theme color too. */\n  :host([variant='bordered']) {\n    --_bg: var(--message-composer-bg, var(--_theme-backdrop));\n    --_border-color: var(--message-composer-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']:not([disabled])) .composer:hover {\n    border-color: var(--message-composer-hover-border-color, var(--_theme-focus));\n  }\n\n  :host([variant='bordered']) .field {\n    color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) .field::placeholder {\n    color: var(--message-composer-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n  }\n\n  /* Outline — transparent background, border always visible, theme-colored focus ring. */\n  :host([variant='outline']) {\n    --_bg: var(--message-composer-bg, transparent);\n  }\n\n  :host([variant='outline']) .composer {\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .composer:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /*\n   * Ghost — fully transparent at rest and on hover-only background tint; focus falls through to\n   * the shared `:focus-within` rule above (canvas background + theme-focus border + theme\n   * shadow) instead of a second, bespoke focus recipe here — same as `ore-textarea`'s ghost.\n   */\n  :host([variant='ghost']) {\n    --_bg: var(--message-composer-bg, transparent);\n    --_border-color: var(--message-composer-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .composer {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']:not([disabled])) .composer:hover {\n    background: var(--message-composer-hover-bg, var(--color-contrast-100));\n  }\n}\n"],"mappings":""}

package/dist/inputs/message-composer/message-composer.d.ts

@@ -0,0 +1,139 @@
+import type { ComponentSize, ThemeColor, VisualVariant } from '../../types';
+import { type SendShortcut } from '../../headless';
+import '../../content/icon/icon';
+import '../button/button';
+export type { SendShortcut } from '../../headless';
+/** Events emitted by the message composer */
+export type OreMessageComposerEvents = {
+    /** Fired on every keystroke with the current value. */
+    input: {
+        originalEvent: Event;
+        value: string;
+    };
+    /**
+     * Fired for a send attempt (the resolved `send-shortcut` or the send button) while the
+     * composer isn't blank/disabled/loading. Cancelable — call `preventDefault()` to keep the
+     * current text in the field instead of the default clear + refocus.
+     */
+    send: {
+        originalEvent: KeyboardEvent | MouseEvent;
+        value: string;
+    };
+};
+/** Message composer properties */
+export type OreMessageComposerProps = {
+    /** Clear the value and refocus after a non-cancelled `send` (default `true`) */
+    'clear-on-send'?: boolean;
+    /** Theme color (card focus ring + default send button color) */
+    color?: ThemeColor;
+    /** Disable the whole composer (field, slots, and send action) */
+    disabled?: boolean;
+    /** Error message shown below the field */
+    error?: string;
+    /** Stretch the composer to the full width of its container */
+    fullwidth?: boolean;
+    /** Helper text shown below the field */
+    helper?: string;
+    /** Accessible name for the field — never rendered visually, only as `aria-label` */
+    label?: string;
+    /** Blocks further sends (e.g. a send is already in flight) without disabling editing */
+    loading?: boolean;
+    /** Maximum character count; shows a counter */
+    maxlength?: number;
+    /** Form field name */
+    name?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Make the field read-only */
+    readonly?: boolean;
+    /**
+     * JS-only callback fired with the inner `<textarea>` element when it mounts, and with
+     * `null` when it unmounts. Set as a JS property: `composer.ref = (el) => { ... }`.
+     */
+    ref?: ((el: HTMLTextAreaElement | null) => void) | null;
+    /** Require a non-blank value for `<ore-form>` validation */
+    required?: boolean;
+    /** Number of visible rows before auto-resize grows the field */
+    rows?: number;
+    /** Lucide icon name for the default send button (default `'arrow-up'`) */
+    'send-icon'?: string;
+    /** Accessible label for the send button (default `'Send message'`) */
+    'send-label'?: string;
+    /** Keyboard shortcut that sends: 'enter' (Shift+Enter for a newline) or 'mod+enter' (Enter always inserts a newline; Ctrl/Cmd+Enter sends) */
+    'send-shortcut'?: SendShortcut;
+    /** Component size */
+    size?: ComponentSize;
+    /** Current text value */
+    value?: string;
+    /** Visual variant of the card — same variant set as `ore-textarea`, applied to the card. */
+    variant?: Exclude<VisualVariant, 'frost' | 'text'>;
+};
+/**
+ * A message/comment composer — a card with an auto-resizing field on top and a toolbar row
+ * below it, built directly on the same headless primitives as `ore-textarea` (`createTextField`,
+ * `createAutoResize`) rather than composing `ore-textarea` itself. Nesting a fully-styled sibling
+ * component and suppressing most of its chrome (as an earlier version of this component did) is
+ * a leaky composition — this owns its single `<textarea>` outright, so there's exactly one
+ * implementation of the field's appearance to reason about, not two fighting each other.
+ *
+ * Handles the send gesture (Enter to send, Shift+Enter for a newline, or a Ctrl/Cmd+Enter
+ * alternative), IME-safe composition, and clear-and-refocus after sending.
+ *
+ * @element ore-message-composer
+ *
+ * @attr {string} value - Current text value
+ * @attr {string} placeholder - Placeholder text
+ * @attr {string} label - Accessible name for the field (not rendered visually)
+ * @attr {string} name - Form field name
+ * @attr {string} helper - Helper text shown below the field
+ * @attr {string} error - Error message shown below the field
+ * @attr {boolean} disabled - Disable the whole composer
+ * @attr {boolean} readonly - Read-only mode
+ * @attr {boolean} required - Require a non-blank value for `<ore-form>` validation
+ * @attr {boolean} loading - Blocks further sends without disabling editing
+ * @attr {number} maxlength - Max character count; shows a counter
+ * @attr {number} rows - Visible rows before auto-resize grows the field (default 1)
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} variant - Visual variant of the card: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'
+ * @attr {string} size - 'sm' | 'md' | 'lg'
+ * @attr {boolean} fullwidth - Stretch to the full width of the container
+ * @attr {string} send-icon - Lucide icon name for the default send button (default 'arrow-up')
+ * @attr {string} send-label - Accessible label for the send button (default 'Send message')
+ * @attr {string} send-shortcut - 'enter' (default) | 'mod+enter'
+ * @attr {boolean} clear-on-send - Clear the value and refocus after a non-cancelled send (default true)
+ *
+ * @fires input - Fired on every keystroke. detail: { value, originalEvent }
+ * @fires send - Fired on a send attempt. Cancelable. detail: { value, originalEvent }
+ *
+ * @slot prefix - Content at the start of the toolbar row (e.g. an attach menu)
+ * @slot suffix - Content at the end of the toolbar row, before the send button (e.g. a model picker)
+ * @slot send - Replaces the default send button entirely — the only supported way to customize it
+ *
+ * @cssprop --message-composer-bg - Card background color
+ * @cssprop --message-composer-border-color - Card border color
+ * @cssprop --message-composer-radius - Card border radius
+ * @cssprop --message-composer-padding - Card inner padding
+ * @cssprop --message-composer-gap - Gap between the field/toolbar rows and between toolbar items
+ * @cssprop --message-composer-placeholder-color - Field placeholder text color
+ * @cssprop --message-composer-min-height - Minimum field height (default one line)
+ * @cssprop --message-composer-hover-bg - Card background on hover (flat/ghost variants)
+ * @cssprop --message-composer-hover-border-color - Card border on hover (flat/bordered variants)
+ * @cssprop --message-composer-focus-bg - Card background when focused (flat variant)
+ * @cssprop --message-composer-focus-border-color - Card border when focused (flat variant)
+ *
+ * @part composer - Root card container
+ * @part field - The native `<textarea>` element
+ * @part helper - Helper text element
+ * @part error - Error text element (`role="alert"`)
+ * @part toolbar - Toolbar row below the field
+ * @part toolbar-start - Toolbar group holding the `prefix` slot
+ * @part toolbar-end - Toolbar group holding the `suffix` slot and the send button
+ * @part send-button - The default send button (absent when the `send` slot is used)
+ *
+ * @example
+ * ```html
+ * <ore-message-composer placeholder="Message…" send-shortcut="mod+enter"></ore-message-composer>
+ * ```
+ */
+export declare const MESSAGE_COMPOSER_TAG: "ore-message-composer";
+//# sourceMappingURL=message-composer.d.ts.map

package/dist/inputs/message-composer/message-composer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-composer.d.ts","sourceRoot":"","sources":["../../../src/inputs/message-composer/message-composer.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5E,OAAO,EAML,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAC;AAmBxB,OAAO,yBAAyB,CAAC;AACjC,OAAO,kBAAkB,CAAC;AAG1B,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKnD,6CAA6C;AAC7C,MAAM,MAAM,wBAAwB,GAAG;IACrC,uDAAuD;IACvD,KAAK,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C;;;;OAIG;IACH,IAAI,EAAE;QAAE,aAAa,EAAE,aAAa,GAAG,UAAU,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACpE,CAAC;AAEF,kCAAkC;AAClC,MAAM,MAAM,uBAAuB,GAAG;IACpC,gFAAgF;IAChF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,mBAAmB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACxD,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8IAA8I;IAC9I,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4FAA4F;IAC5F,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,eAAO,MAAM,oBAAoB,EAAG,sBAA+B,CAAC"}

package/dist/inputs/shared/field-binding.cjs

@@ -1,2 +1,2 @@
-let e=require("@vielzeug/ore");var t=(t,n,r)=>{let{assistiveId:i,checked:a,disabled:o,errorText:s,handleClick:c,handleKeydown:l,helperText:u,indeterminate:d,labelId:f}=n;(0,e.bind)({attr:{...d!==void 0&&{indeterminate:d},ariaChecked:()=>r===`checkbox`&&d?.value?`mixed`:a.value?`true`:`false`,ariaDescribedby:()=>s.value||u.value?i:null,ariaDisabled:()=>o.value?`true`:null,ariaInvalid:()=>s.value?`true`:null,ariaLabelledby:f,checked:a,role:r,size:t,tabindex:()=>o.value?void 0:0},class:()=>({"is-checked":a.value,"is-disabled":o.value,...d!==void 0&&{"is-indeterminate":d.value}}),on:{click:c,keydown:l}})};exports.applyCheckableBinding=t;
+let e=require("@vielzeug/ore");var t=e=>()=>e.value||void 0,n=(t,n,r)=>{let{assistiveId:i,checked:a,disabled:o,errorText:s,handleClick:c,handleKeydown:l,helperText:u,indeterminate:d,labelId:f,required:p}=n;(0,e.bind)({attr:{...d!==void 0&&{indeterminate:d},ariaChecked:()=>r===`checkbox`&&d?.value?`mixed`:a.value?`true`:`false`,ariaDescribedby:()=>s.value||u.value?i:null,ariaDisabled:()=>o.value?`true`:null,ariaInvalid:()=>s.value?`true`:null,ariaLabelledby:f,ariaRequired:()=>p?.value?`true`:null,checked:a,role:r,size:t,tabindex:()=>o.value?void 0:0},class:()=>({"is-checked":a.value,"is-disabled":o.value,...d!==void 0&&{"is-indeterminate":d.value}}),on:{click:c,keydown:l}})};exports.applyCheckableBinding=n,exports.errorAttr=t;
 //# sourceMappingURL=field-binding.cjs.map

package/dist/inputs/shared/field-binding.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"field-binding.cjs","names":[],"sources":["../../../src/inputs/shared/field-binding.ts"],"sourcesContent":["import type { Readable, Signal } from '@vielzeug/ripple';\n\nimport { bind } from '@vielzeug/ore';\n\nimport type { ComponentSize } from '../../types';\n\n/**\n * Minimal shape of the handle returned by `createCheckable` that\n * `applyCheckableBinding` needs. Matches both checkbox (with `indeterminate`)\n * and switch (without).\n */\nexport type CheckableBindingHandle = {\n  assistiveId: string;\n  checked: Signal<boolean>;\n  disabled: Readable<boolean>;\n  errorText: Readable<string>;\n  handleClick: (event: MouseEvent) => boolean;\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  helperText: Readable<string>;\n  indeterminate?: Signal<boolean>;\n  labelId: string;\n};\n\n/**\n * Applies the standard host bindings shared by all checkable components\n * (checkbox, switch, radio).\n *\n * Wires `role`, all ARIA attributes, `checked`, `size`, `tabindex`, the\n * `is-checked`/`is-disabled` classes, and the `click`/`keydown` event handlers.\n *\n * Pass `handle.indeterminate` for components that need it (checkbox);\n * omit it for switch/radio.\n */\nexport const applyCheckableBinding = (\n  fCtxSize: Readable<ComponentSize | undefined>,\n  handle: CheckableBindingHandle,\n  role: 'checkbox' | 'radio' | 'switch',\n): void => {\n  const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, indeterminate, labelId } =\n    handle;\n\n  bind({\n    attr: {\n      ...(indeterminate !== undefined && { indeterminate }),\n      ariaChecked: () => {\n        if (role === 'checkbox' && indeterminate?.value) return 'mixed';\n\n        return checked.value ? 'true' : 'false';\n      },\n      ariaDescribedby: () => (errorText.value || helperText.value ? assistiveId : null),\n      ariaDisabled: () => (disabled.value ? 'true' : null),\n      ariaInvalid: () => (errorText.value ? 'true' : null),\n      ariaLabelledby: labelId,\n      checked,\n      role,\n      size: fCtxSize,\n      tabindex: () => (disabled.value ? undefined : 0),\n    },\n    class: () => ({\n      'is-checked': checked.value,\n      'is-disabled': disabled.value,\n      ...(indeterminate !== undefined && { 'is-indeterminate': indeterminate.value }),\n    }),\n    on: {\n      click: handleClick,\n      keydown: handleKeydown,\n    },\n  });\n};\n"],"mappings":"+BAiCA,IAAa,GACX,EACA,EACA,IACS,CACT,GAAM,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,gBAAe,WACxG,GAEF,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,GAAI,IAAkB,IAAA,IAAa,CAAE,eAAc,EACnD,gBACM,IAAS,YAAc,GAAe,MAAc,QAEjD,EAAQ,MAAQ,OAAS,QAElC,oBAAwB,EAAU,OAAS,EAAW,MAAQ,EAAc,KAC5E,iBAAqB,EAAS,MAAQ,OAAS,KAC/C,gBAAoB,EAAU,MAAQ,OAAS,KAC/C,eAAgB,EAChB,UACA,OACA,KAAM,EACN,aAAiB,EAAS,MAAQ,IAAA,GAAY,CAChD,EACA,WAAc,CACZ,aAAc,EAAQ,MACtB,cAAe,EAAS,MACxB,GAAI,IAAkB,IAAA,IAAa,CAAE,mBAAoB,EAAc,KAAM,CAC/E,GACA,GAAI,CACF,MAAO,EACP,QAAS,CACX,CACF,CAAC,CACH"}
+{"version":3,"file":"field-binding.cjs","names":[],"sources":["../../../src/inputs/shared/field-binding.ts"],"sourcesContent":["import type { Readable, Signal } from '@vielzeug/ripple';\n\nimport { bind } from '@vielzeug/ore';\n\nimport type { ComponentSize } from '../../types';\n\n/**\n * Minimal shape of the handle returned by `createCheckable` that\n * `applyCheckableBinding` needs. Matches both checkbox (with `indeterminate`)\n * and switch (without).\n */\nexport type CheckableBindingHandle = {\n  assistiveId: string;\n  checked: Signal<boolean>;\n  disabled: Readable<boolean>;\n  errorText: Readable<string>;\n  handleClick: (event: MouseEvent) => boolean;\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  helperText: Readable<string>;\n  indeterminate?: Signal<boolean>;\n  labelId: string;\n  /** Reflects `aria-required` — there's no native form control here to carry a real `required` attribute. */\n  required?: Readable<boolean | undefined>;\n};\n\n/**\n * `prop.string()` already reflects `error`'s raw value as an attribute, but that leaves the\n * attribute present-but-empty (`error=\"\"`) once set instead of removing it — this normalizes\n * an empty error back to \"no attribute at all\". Shared by every text-field component\n * (`ore-input`, `ore-textarea`, `ore-message-composer`) since `bind()`'s own `error` writer\n * needs a derived getter, not the raw prop, to get that behavior.\n *\n * @example\n * ```ts\n * bind({ attr: { error: errorAttr(errorText), size: fCtxProps.size, variant: fCtxProps.variant } });\n * ```\n */\nexport const errorAttr = (errorText: Readable<string>): (() => string | undefined) => {\n  return () => errorText.value || undefined;\n};\n\n/**\n * Applies the standard host bindings shared by all checkable components\n * (checkbox, switch, radio).\n *\n * Wires `role`, all ARIA attributes, `checked`, `size`, `tabindex`, the\n * `is-checked`/`is-disabled` classes, and the `click`/`keydown` event handlers.\n *\n * Pass `handle.indeterminate` for components that need it (checkbox);\n * omit it for switch/radio.\n */\nexport const applyCheckableBinding = (\n  fCtxSize: Readable<ComponentSize | undefined>,\n  handle: CheckableBindingHandle,\n  role: 'checkbox' | 'radio' | 'switch',\n): void => {\n  const {\n    assistiveId,\n    checked,\n    disabled,\n    errorText,\n    handleClick,\n    handleKeydown,\n    helperText,\n    indeterminate,\n    labelId,\n    required,\n  } = handle;\n\n  bind({\n    attr: {\n      ...(indeterminate !== undefined && { indeterminate }),\n      ariaChecked: () => {\n        if (role === 'checkbox' && indeterminate?.value) return 'mixed';\n\n        return checked.value ? 'true' : 'false';\n      },\n      ariaDescribedby: () => (errorText.value || helperText.value ? assistiveId : null),\n      ariaDisabled: () => (disabled.value ? 'true' : null),\n      ariaInvalid: () => (errorText.value ? 'true' : null),\n      ariaLabelledby: labelId,\n      ariaRequired: () => (required?.value ? 'true' : null),\n      checked,\n      role,\n      size: fCtxSize,\n      tabindex: () => (disabled.value ? undefined : 0),\n    },\n    class: () => ({\n      'is-checked': checked.value,\n      'is-disabled': disabled.value,\n      ...(indeterminate !== undefined && { 'is-indeterminate': indeterminate.value }),\n    }),\n    on: {\n      click: handleClick,\n      keydown: handleKeydown,\n    },\n  });\n};\n"],"mappings":"+BAqCA,IAAa,EAAa,OACX,EAAU,OAAS,IAAA,GAarB,GACX,EACA,EACA,IACS,CACT,GAAM,CACJ,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,UACA,YACE,GAEJ,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,GAAI,IAAkB,IAAA,IAAa,CAAE,eAAc,EACnD,gBACM,IAAS,YAAc,GAAe,MAAc,QAEjD,EAAQ,MAAQ,OAAS,QAElC,oBAAwB,EAAU,OAAS,EAAW,MAAQ,EAAc,KAC5E,iBAAqB,EAAS,MAAQ,OAAS,KAC/C,gBAAoB,EAAU,MAAQ,OAAS,KAC/C,eAAgB,EAChB,iBAAqB,GAAU,MAAQ,OAAS,KAChD,UACA,OACA,KAAM,EACN,aAAiB,EAAS,MAAQ,IAAA,GAAY,CAChD,EACA,WAAc,CACZ,aAAc,EAAQ,MACtB,cAAe,EAAS,MACxB,GAAI,IAAkB,IAAA,IAAa,CAAE,mBAAoB,EAAc,KAAM,CAC/E,GACA,GAAI,CACF,MAAO,EACP,QAAS,CACX,CACF,CAAC,CACH"}