@vielzeug/refine 1.1.3 → 1.3.0

package/dist/textarea.js

@@ -7,99 +7,101 @@ import { disablableBundle as i, roundableBundle as a, sizableBundle as o, themab
 import { TEXTAREA_SIZE_PRESET as c } from "./shared/size-presets.js";
 import { lifecycleSignal as l } from "./headless/ore.js";
 import { createTextField as u } from "./headless/text-field.js";
-import { FORM_CTX as d, useFormContext as f } from "./inputs/shared/form-context.js";
-import p from "./inputs/textarea/textarea.css?inline.js";
-import { define as m, html as h, inject as g, prop as _, ref as v, useField as y } from "@vielzeug/ore";
-import { watch as b } from "@vielzeug/ripple";
+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/textarea/textarea.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, watchEffect as w } from "@vielzeug/ore";
+import { watch as T } from "@vielzeug/ripple";
 //#region src/inputs/textarea/textarea.ts
-var x = "ore-textarea";
-m(x, {
+var E = "ore-textarea";
+g(E, {
 	formAssociated: !0,
 	props: {
 		...s,
 		...o,
 		...i,
 		...a,
-		"auto-resize": _.bool(!1),
-		error: _.string(),
-		fullwidth: _.bool(!1),
-		helper: _.string(),
-		label: _.string(),
-		"label-placement": _.oneOf(["inset", "outside"], "inset"),
-		maxlength: _.json(void 0),
-		name: _.string(),
-		"no-resize": _.bool(!1),
-		placeholder: _.string(),
-		readonly: _.bool(!1),
-		ref: _.json(void 0),
-		required: _.bool(!1),
-		resize: _.string(),
-		rows: _.json(void 0),
-		value: _.string(),
-		variant: _.string()
+		"auto-resize": x.bool(!1),
+		error: x.string(),
+		fullwidth: x.bool(!1),
+		helper: x.string(),
+		label: x.string(),
+		"label-placement": x.oneOf(["inset", "outside"], "inset"),
+		maxlength: x.json(void 0),
+		name: x.string(),
+		"no-resize": x.bool(!1),
+		placeholder: x.string(),
+		readonly: x.bool(!1),
+		ref: x.json(void 0),
+		required: x.bool(!1),
+		resize: x.string(),
+		rows: x.json(void 0),
+		value: x.string(),
+		variant: x.string()
 	},
-	setup(t, { bind: n, emit: r, onCleanup: i, onElement: a, watch: o }) {
-		let s = g(d), c = f(n, t, s), p = v(), m = () => {
-			if (!t["auto-resize"].value || !p.value) return;
-			let e = p.value;
+	setup(t) {
+		let n = C(), r = w, i = v(f), a = p(t, i), o = S(), s = () => {
+			if (!t["auto-resize"].value || !o.value) return;
+			let e = o.value;
 			e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
-		}, _ = l(i), x = null, S = u({
-			disabled: c.disabled,
+		}, c = l(y), m = null, g = u({
+			disabled: a.disabled,
 			error: t.error,
-			getFormField: () => x,
+			getFormField: () => m,
 			helper: t.helper,
 			label: t.label,
 			labelPlacement: t["label-placement"],
 			maxLength: t.maxlength,
-			onBeforeInput: m,
+			onBeforeInput: s,
 			onChange: (e, t) => {
-				r("change", {
+				n("change", {
 					originalEvent: e,
 					value: t
 				});
 			},
 			onInput: (e, t) => {
-				r("input", {
+				n("input", {
 					originalEvent: e,
 					value: t
 				});
 			},
 			prefix: "textarea",
-			signal: _,
-			validateOn: s?.validateOn,
+			signal: c,
+			validateOn: i?.validateOn,
 			value: t.value
 		});
-		x = y({
-			disabled: S.disabled,
+		m = d({
+			disabled: g.disabled,
 			toFormValue: (e) => e,
-			value: S.value
+			value: g.value
 		});
-		let { ariaDescribedBy: C, ariaErrorMessage: w, ariaInvalid: T, ariaLabelledBy: E, assistiveId: D, counter: O, errorId: k, errorText: A, fieldId: j, helperText: M, labelId: N, labelVisible: P } = S;
-		return a(p, (e) => {
-			let n = S.wire(e);
+		let { ariaDescribedBy: x, ariaErrorMessage: E, ariaInvalid: D, ariaLabelledBy: O, assistiveId: k, counter: A, errorId: j, errorText: M, fieldId: N, helperText: P, labelId: F, labelVisible: I } = g;
+		return b(o, (e) => {
+			let n = g.wire(e);
 			t.ref.value?.(e);
-			let r = b(t.ref, (t) => {
+			let i = T(t.ref, (t) => {
 				t?.(e);
-			}), i = o(() => {
-				e.style.resize = t["auto-resize"].value || t["no-resize"].value ? "none" : t.resize.value || "vertical", t["auto-resize"].value && requestAnimationFrame(m);
+			}), a = r(() => {
+				e.style.resize = t["auto-resize"].value || t["no-resize"].value ? "none" : t.resize.value || "vertical", t["auto-resize"].value && requestAnimationFrame(s);
 			});
 			return () => {
-				r.dispose(), t.ref.value?.(null), n(), i();
+				i.dispose(), t.ref.value?.(null), n(), a();
 			};
-		}), n({ attr: {
-			error: () => A.value || void 0,
-			size: c.size,
-			variant: c.variant
-		} }), h`
+		}), h({ attr: {
+			error: () => M.value || void 0,
+			size: a.size,
+			variant: a.variant
+		} }), _`
       <div class="textarea-wrapper" part="wrapper">
-        <label class="label" part="label" for="${j}" id="${N}" ?hidden="${() => !P.value}"
+        <label class="label" part="label" for="${N}" id="${F}" ?hidden="${() => !I.value}"
           >${t.label}</label
         >
         <div class="field" part="field">
           <textarea
             part="textarea"
-            ref="${p}"
-            id="${j}"
+            ref="${o}"
+            id="${N}"
             :name="${t.name}"
             :placeholder="${t.placeholder}"
             :rows="${t.rows}"
@@ -107,18 +109,18 @@ m(x, {
             ?disabled="${t.disabled}"
             ?readonly="${t.readonly}"
             ?required="${t.required}"
-            :value="${e(S.value)}"
-            :aria-describedby="${C}"
-            :aria-errormessage="${w}"
-            :aria-invalid="${T}"
-            :aria-labelledby="${E}"></textarea>
+            :value="${e(g.value)}"
+            :aria-describedby="${x}"
+            :aria-errormessage="${E}"
+            :aria-invalid="${D}"
+            :aria-labelledby="${O}"></textarea>
         </div>
-        <span class="${() => O?.value.counterAtLimit ? "counter at-limit" : O?.value.counterNearLimit ? "counter near-limit" : "counter"}" aria-live="polite" ?hidden="${() => !O}">${() => O?.value.counterText.replace(" / ", "/") ?? ""}</span>
-        <div id="${D}" class="helper-text" aria-live="polite" part="helper" ?hidden="${() => !!A.value || !M.value}">
-          ${() => M.value}
+        <span class="${() => A?.value.counterAtLimit ? "counter at-limit" : A?.value.counterNearLimit ? "counter near-limit" : "counter"}" aria-live="polite" ?hidden="${() => !A}">${() => A?.value.counterText.replace(" / ", "/") ?? ""}</span>
+        <div id="${k}" class="helper-text" aria-live="polite" part="helper" ?hidden="${() => !!M.value || !P.value}">
+          ${() => P.value}
         </div>
-        <div id="${k}" class="helper-text" role="alert" part="error" ?hidden="${() => !A.value}">
-          ${() => A.value}
+        <div id="${j}" class="helper-text" role="alert" part="error" ?hidden="${() => !M.value}">
+          ${() => M.value}
         </div>
       </div>
     `;
@@ -128,10 +130,10 @@ m(x, {
 		...r,
 		t(c),
 		n("textarea"),
-		p
+		m
 	]
 });
 //#endregion
-export { x as TEXTAREA_TAG };
+export { E as TEXTAREA_TAG };
 
 //# sourceMappingURL=textarea.js.map

package/dist/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../src/inputs/textarea/textarea.ts"],"sourcesContent":["import { define, useField, html, inject, prop, ref } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { watch as rippleWatch } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createTextField } from '../../headless';\nimport { disablableBundle, roundableBundle, sizableBundle, TEXTAREA_SIZE_PRESET, themableBundle } from '../../shared';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './textarea.css?inline';\n\n/** Textarea component properties */\n\nexport type OreTextareaEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type OreTextareaProps = TextFieldProps<Exclude<VisualVariant, 'frost' | 'text'>> & {\n  /** Allow auto-grow with content */\n  'auto-resize'?: boolean;\n  /** Maximum character count; shows a counter when set */\n  maxlength?: number;\n  /** Disable a manual resize handle */\n  'no-resize'?: boolean;\n  /**\n   * JS-only callback fired with the inner `<textarea>` element when it mounts,\n   * and with `null` when it unmounts. Intended for composed components that\n   * need imperative access to the raw element.\n   * Set as a JS property: `bitTextarea.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLTextAreaElement | null) => void) | null;\n  /** Resize direction override */\n  resize?: 'none' | 'horizontal' | 'both' | 'vertical';\n  /** Number of visible text rows */\n  rows?: number;\n};\n\n/**\n * A multi-line text input with label, helper text, character counter, and auto-resize.\n *\n * @element ore-textarea\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} value - Current value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {number} rows - Visible row count\n * @attr {number} maxlength - Max character count (shows counter)\n * @attr {string} helper - Helper text below the textarea\n * @attr {string} error - Error message\n * @attr {boolean} disabled - Disable interaction\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Required field\n * @attr {boolean} no-resize - Disable manual resize\n * @attr {boolean} auto-resize - Grow with content\n * @attr {string} resize - Resize direction: 'none' | 'horizontal' | 'both' | 'vertical'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Fired on every keystroke with current value. detail: { value: string; originalEvent: Event }\n * @fires change - Fired on blur with changed value. detail: { value: string; originalEvent: Event }\n *\n * @slot helper - Complex helper content\n *\n * @cssprop --textarea-bg - Background color\n * @cssprop --textarea-border-color - Border color\n * @cssprop --textarea-placeholder-color - Placeholder text color\n * @cssprop --textarea-radius - Border radius\n * @cssprop --textarea-padding - Inner padding (block inline)\n * @cssprop --textarea-gap - Gap between label and field\n * @cssprop --textarea-font-size - Font size\n * @cssprop --textarea-min-height - Minimum field height\n * @cssprop --textarea-max-height - Maximum field height (none = unlimited)\n * @cssprop --textarea-resize - CSS resize direction ('vertical' | 'horizontal' | 'both' | 'none')\n * @cssprop --textarea-hover-bg - Field background on hover (flat/ghost variants)\n * @cssprop --textarea-hover-border-color - Field border on hover (flat/bordered variants)\n * @cssprop --textarea-focus-bg - Field background when focused (flat variant)\n * @cssprop --textarea-focus-border-color - Field border when focused (flat variant)\n *\n * @part wrapper - Outer wrapper element.\n * @part label - Label element.\n * @part field - Field container.\n * @part textarea - The native `<textarea>` element.\n * @part helper - The helper text element.\n * @part error - The error text element (`role=\"alert\"`).\n *\n * @example\n * ```html\n * <ore-textarea></ore-textarea>\n * ```\n */\nexport const TEXTAREA_TAG = 'ore-textarea' as const;\ndefine<OreTextareaProps, OreTextareaEvents>(TEXTAREA_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    'auto-resize': prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    maxlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    'no-resize': prop.bool(false),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.json(undefined as ((el: HTMLTextAreaElement | null) => void) | null | undefined),\n    required: prop.bool(false),\n    resize: prop.string<'none' | 'both' | 'horizontal' | 'vertical'>(),\n    rows: prop.json(undefined as number | undefined),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props, { bind, emit, onCleanup, onElement, watch }) {\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n\n    const textareaRef = ref<HTMLTextAreaElement>();\n\n    const autoGrow = () => {\n      if (!props['auto-resize'].value || !textareaRef.value) return;\n\n      const textareaEl = textareaRef.value;\n\n      textareaEl.style.height = 'auto';\n      textareaEl.style.height = `${textareaEl.scrollHeight}px`;\n    };\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      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      onBeforeInput: autoGrow,\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: 'textarea',\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      counter,\n      errorId,\n      errorText,\n      fieldId: textareaId,\n      helperText,\n      labelId,\n      labelVisible,\n    } = tf;\n\n    onElement(textareaRef, (textareaEl) => {\n      const unwireEl = tf.wire(textareaEl);\n\n      props.ref.value?.(textareaEl);\n\n      const sub = rippleWatch(props.ref, (cb) => {\n        cb?.(textareaEl);\n      });\n\n      const stopLayoutEffect = watch(() => {\n        textareaEl.style.resize =\n          props['auto-resize'].value || props['no-resize'].value ? 'none' : props.resize.value || 'vertical';\n\n        if (props['auto-resize'].value) {\n          requestAnimationFrame(autoGrow);\n        }\n      });\n\n      return () => {\n        sub.dispose();\n        props.ref.value?.(null);\n        unwireEl();\n        stopLayoutEffect();\n      };\n    });\n\n    bind({\n      attr: {\n        error: () => errorText.value || undefined,\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    const counterClass = () =>\n      counter?.value.counterAtLimit\n        ? 'counter at-limit'\n        : counter?.value.counterNearLimit\n          ? 'counter near-limit'\n          : 'counter';\n    const counterHidden = () => !counter;\n    const counterText = () => counter?.value.counterText.replace(' / ', '/') ?? '';\n    const helperHidden = () => !!errorText.value || !helperText.value;\n    const errorHidden = () => !errorText.value;\n\n    return html`\n      <div class=\"textarea-wrapper\" part=\"wrapper\">\n        <label class=\"label\" part=\"label\" for=\"${textareaId}\" id=\"${labelId}\" ?hidden=\"${() => !labelVisible.value}\"\n          >${props.label}</label\n        >\n        <div class=\"field\" part=\"field\">\n          <textarea\n            part=\"textarea\"\n            ref=\"${textareaRef}\"\n            id=\"${textareaId}\"\n            :name=\"${props.name}\"\n            :placeholder=\"${props.placeholder}\"\n            :rows=\"${props.rows}\"\n            :maxlength=\"${props.maxlength}\"\n            ?disabled=\"${props.disabled}\"\n            ?readonly=\"${props.readonly}\"\n            ?required=\"${props.required}\"\n            :value=\"${live(tf.value)}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            :aria-errormessage=\"${ariaErrorMessage}\"\n            :aria-invalid=\"${ariaInvalid}\"\n            :aria-labelledby=\"${ariaLabelledBy}\"></textarea>\n        </div>\n        <span class=\"${counterClass}\" aria-live=\"polite\" ?hidden=\"${counterHidden}\">${counterText}</span>\n        <div id=\"${assistiveId}\" class=\"helper-text\" aria-live=\"polite\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          ${() => helperText.value}\n        </div>\n        <div id=\"${errorId}\" class=\"helper-text\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          ${() => errorText.value}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [...fieldMixins, sizeVariantMixin(TEXTAREA_SIZE_PRESET), forcedColorsFocusMixin('textarea'), componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../src/inputs/textarea/textarea.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, onCleanup, onElement, useEmit, watchEffect } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { watch as rippleWatch } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createTextField } from '../../headless';\nimport { disablableBundle, roundableBundle, sizableBundle, TEXTAREA_SIZE_PRESET, themableBundle } from '../../shared';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './textarea.css?inline';\n\n/** Textarea component properties */\n\nexport type OreTextareaEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type OreTextareaProps = TextFieldProps<Exclude<VisualVariant, 'frost' | 'text'>> & {\n  /** Allow auto-grow with content */\n  'auto-resize'?: boolean;\n  /** Maximum character count; shows a counter when set */\n  maxlength?: number;\n  /** Disable a manual resize handle */\n  'no-resize'?: boolean;\n  /**\n   * JS-only callback fired with the inner `<textarea>` element when it mounts,\n   * and with `null` when it unmounts. Intended for composed components that\n   * need imperative access to the raw element.\n   * Set as a JS property: `bitTextarea.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLTextAreaElement | null) => void) | null;\n  /** Resize direction override */\n  resize?: 'none' | 'horizontal' | 'both' | 'vertical';\n  /** Number of visible text rows */\n  rows?: number;\n};\n\n/**\n * A multi-line text input with label, helper text, character counter, and auto-resize.\n *\n * @element ore-textarea\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} value - Current value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {number} rows - Visible row count\n * @attr {number} maxlength - Max character count (shows counter)\n * @attr {string} helper - Helper text below the textarea\n * @attr {string} error - Error message\n * @attr {boolean} disabled - Disable interaction\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Required field\n * @attr {boolean} no-resize - Disable manual resize\n * @attr {boolean} auto-resize - Grow with content\n * @attr {string} resize - Resize direction: 'none' | 'horizontal' | 'both' | 'vertical'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Fired on every keystroke with current value. detail: { value: string; originalEvent: Event }\n * @fires change - Fired on blur with changed value. detail: { value: string; originalEvent: Event }\n *\n * @slot helper - Complex helper content\n *\n * @cssprop --textarea-bg - Background color\n * @cssprop --textarea-border-color - Border color\n * @cssprop --textarea-placeholder-color - Placeholder text color\n * @cssprop --textarea-radius - Border radius\n * @cssprop --textarea-padding - Inner padding (block inline)\n * @cssprop --textarea-gap - Gap between label and field\n * @cssprop --textarea-font-size - Font size\n * @cssprop --textarea-min-height - Minimum field height\n * @cssprop --textarea-max-height - Maximum field height (none = unlimited)\n * @cssprop --textarea-resize - CSS resize direction ('vertical' | 'horizontal' | 'both' | 'none')\n * @cssprop --textarea-hover-bg - Field background on hover (flat/ghost variants)\n * @cssprop --textarea-hover-border-color - Field border on hover (flat/bordered variants)\n * @cssprop --textarea-focus-bg - Field background when focused (flat variant)\n * @cssprop --textarea-focus-border-color - Field border when focused (flat variant)\n *\n * @part wrapper - Outer wrapper element.\n * @part label - Label element.\n * @part field - Field container.\n * @part textarea - The native `<textarea>` element.\n * @part helper - The helper text element.\n * @part error - The error text element (`role=\"alert\"`).\n *\n * @example\n * ```html\n * <ore-textarea></ore-textarea>\n * ```\n */\nexport const TEXTAREA_TAG = 'ore-textarea' as const;\ndefine<OreTextareaProps>(TEXTAREA_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    'auto-resize': prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    maxlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    'no-resize': prop.bool(false),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.json(undefined as ((el: HTMLTextAreaElement | null) => void) | null | undefined),\n    required: prop.bool(false),\n    resize: prop.string<'none' | 'both' | 'horizontal' | 'vertical'>(),\n    rows: prop.json(undefined as number | undefined),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const emit = useEmit<OreTextareaEvents>();\n    const watch = watchEffect;\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const textareaRef = ref<HTMLTextAreaElement>();\n\n    const autoGrow = () => {\n      if (!props['auto-resize'].value || !textareaRef.value) return;\n\n      const textareaEl = textareaRef.value;\n\n      textareaEl.style.height = 'auto';\n      textareaEl.style.height = `${textareaEl.scrollHeight}px`;\n    };\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      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      onBeforeInput: autoGrow,\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: 'textarea',\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      counter,\n      errorId,\n      errorText,\n      fieldId: textareaId,\n      helperText,\n      labelId,\n      labelVisible,\n    } = tf;\n\n    onElement(textareaRef, (textareaEl) => {\n      const unwireEl = tf.wire(textareaEl);\n\n      props.ref.value?.(textareaEl);\n\n      const sub = rippleWatch(props.ref, (cb) => {\n        cb?.(textareaEl);\n      });\n\n      const stopLayoutEffect = watch(() => {\n        textareaEl.style.resize =\n          props['auto-resize'].value || props['no-resize'].value ? 'none' : props.resize.value || 'vertical';\n\n        if (props['auto-resize'].value) {\n          requestAnimationFrame(autoGrow);\n        }\n      });\n\n      return () => {\n        sub.dispose();\n        props.ref.value?.(null);\n        unwireEl();\n        stopLayoutEffect();\n      };\n    });\n\n    bind({\n      attr: {\n        error: () => errorText.value || undefined,\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    const counterClass = () =>\n      counter?.value.counterAtLimit\n        ? 'counter at-limit'\n        : counter?.value.counterNearLimit\n          ? 'counter near-limit'\n          : 'counter';\n    const counterHidden = () => !counter;\n    const counterText = () => counter?.value.counterText.replace(' / ', '/') ?? '';\n    const helperHidden = () => !!errorText.value || !helperText.value;\n    const errorHidden = () => !errorText.value;\n\n    return html`\n      <div class=\"textarea-wrapper\" part=\"wrapper\">\n        <label class=\"label\" part=\"label\" for=\"${textareaId}\" id=\"${labelId}\" ?hidden=\"${() => !labelVisible.value}\"\n          >${props.label}</label\n        >\n        <div class=\"field\" part=\"field\">\n          <textarea\n            part=\"textarea\"\n            ref=\"${textareaRef}\"\n            id=\"${textareaId}\"\n            :name=\"${props.name}\"\n            :placeholder=\"${props.placeholder}\"\n            :rows=\"${props.rows}\"\n            :maxlength=\"${props.maxlength}\"\n            ?disabled=\"${props.disabled}\"\n            ?readonly=\"${props.readonly}\"\n            ?required=\"${props.required}\"\n            :value=\"${live(tf.value)}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            :aria-errormessage=\"${ariaErrorMessage}\"\n            :aria-invalid=\"${ariaInvalid}\"\n            :aria-labelledby=\"${ariaLabelledBy}\"></textarea>\n        </div>\n        <span class=\"${counterClass}\" aria-live=\"polite\" ?hidden=\"${counterHidden}\">${counterText}</span>\n        <div id=\"${assistiveId}\" class=\"helper-text\" aria-live=\"polite\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          ${() => helperText.value}\n        </div>\n        <div id=\"${errorId}\" class=\"helper-text\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          ${() => errorText.value}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [...fieldMixins, sizeVariantMixin(TEXTAREA_SIZE_PRESET), forcedColorsFocusMixin('textarea'), componentStyles],\n});\n"],"mappings":"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"}

package/dist/time-picker.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./inputs/shared/form-context.cjs"),i=require("./inputs/time-picker/time-picker.css?inline.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");function s(e){if(!e)return null;let t=/^(\d{1,2}):(\d{2})$/.exec(e.trim());if(!t)return null;let n=Number(t[1]),r=Number(t[2]);return n<0||n>23||r<0||r>59?null:{hours:n,minutes:r}}function c(e,t){return`${String(e).padStart(2,`0`)}:${String(t).padStart(2,`0`)}`}function l(e,t,n){if(n===`12`){let n=e>=12?`PM`:`AM`,r=e%12==0?12:e%12;return`${String(r).padStart(2,`0`)}:${String(t).padStart(2,`0`)} ${n}`}return c(e,t)}function u(e,t,n,r){let i=e*60+t,a=s(n),o=s(r),c=a?a.hours*60+a.minutes:0,l=o?o.hours*60+o.minutes:1439,u=Math.min(Math.max(i,c),l);return{hours:Math.floor(u/60),minutes:u%60}}var d=`ore-time-picker`;(0,a.define)(d,{formAssociated:!0,props:{...n.themableBundle,...n.sizableBundle,...n.disablableBundle,...n.roundableBundle,error:a.prop.string(),fullwidth:a.prop.bool(!1),helper:a.prop.string(),label:a.prop.string(),"label-placement":a.prop.oneOf([`inset`,`outside`],`inset`),max:a.prop.string(),min:a.prop.string(),"minute-step":a.prop.number(5),name:a.prop.string(),placeholder:a.prop.string(),required:a.prop.bool(!1),"time-format":a.prop.oneOf([`12`,`24`],`24`),value:a.prop.string(),variant:a.prop.string()},setup(e,{bind:t,el:n,emit:i,onMounted:d}){let f=(0,o.signal)(!1),p=(0,o.signal)(s(e.value.value)),m=r.useFormContext(t,e,(0,a.inject)(r.FORM_CTX)),h=m.disabled;(0,a.useField)({disabled:h,toFormValue:e=>e||null,value:(0,o.computed)(()=>{let e=p.value;return e?c(e.hours,e.minutes):``})});let g=(0,o.computed)(()=>e[`time-format`].value??`24`),_=(0,o.computed)(()=>Math.max(1,Math.min(59,e[`minute-step`].value??5))),v=(0,o.computed)(()=>p.value?l(p.value.hours,p.value.minutes,g.value):e.placeholder.value||``),y=(0,o.computed)(()=>g.value===`12`?Array.from({length:12},(e,t)=>t+1):Array.from({length:24},(e,t)=>t)),b=(0,o.computed)(()=>{let e=_.value,t=[];for(let n=0;n<60;n+=e)t.push(n);return t}),x=`time-picker-${Math.random().toString(36).slice(2,9)}-dropdown`;function S(e){if(g.value===`24`)return e;let t=e%12;return t===0?12:t}function C(e,t){return g.value===`24`?e:t===`AM`?e===12?0:e:e===12?12:e+12}function w(t,n){let r=t*60+n,i=s(e.min.value),a=s(e.max.value);return!!(i&&r<i.hours*60+i.minutes||a&&r>a.hours*60+a.minutes)}let T=(0,o.signal)(p.value?.hours??0),E=(0,o.signal)(p.value?.minutes??0),D=(0,o.signal)((p.value?.hours??0)>=12?`PM`:`AM`),O=e.value.value;d(()=>{let t=setInterval(()=>{let t=e.value.value;if(t!==O){O=t;let e=s(t);p.value=e,e&&(T.value=e.hours,E.value=e.minutes,D.value=e.hours>=12?`PM`:`AM`)}},50);return()=>clearInterval(t)});function k(t,n){let r=u(t,n,e.min.value,e.max.value),a=Math.round(r.minutes/_.value)*_.value,o=Math.min(a,59);p.value={hours:r.hours,minutes:o},i(`change`,{value:c(r.hours,o)})}function A(e){let t=g.value===`12`?C(T.value,D.value):T.value;E.value=e,k(t,e),M()}function j(){if(h.value)return;let e=p.value;e?(T.value=g.value===`12`?S(e.hours):e.hours,E.value=e.minutes,D.value=e.hours>=12?`PM`:`AM`):(T.value=g.value===`12`?12:0,E.value=0,D.value=`AM`),f.value=!0}function M(){f.value=!1}function N(){f.value?M():j()}function P(e){f.value&&(e.composedPath().includes(n)||M())}d(()=>(document.addEventListener(`pointerdown`,P,{capture:!0}),()=>document.removeEventListener(`pointerdown`,P,{capture:!0})));function F(e){h.value||(e.key===`Enter`||e.key===` `?(e.preventDefault(),N()):e.key===`Escape`&&f.value?(e.preventDefault(),M()):(e.key===`ArrowDown`||e.key===`ArrowUp`)&&!f.value&&(e.preventDefault(),j()))}function I(e){e.key===`Escape`&&(e.preventDefault(),M())}function L(e){let t=y.value,n=t.indexOf(T.value);e.key===`ArrowUp`?(e.preventDefault(),T.value=t[(n-1+t.length)%t.length]):e.key===`ArrowDown`&&(e.preventDefault(),T.value=t[(n+1)%t.length])}function R(e){let t=b.value,n=t.indexOf(E.value);e.key===`ArrowUp`?(e.preventDefault(),E.value=t[(n-1+t.length)%t.length]):e.key===`ArrowDown`&&(e.preventDefault(),E.value=t[(n+1)%t.length])}function z(e){(e.key===`ArrowUp`||e.key===`ArrowDown`)&&(e.preventDefault(),D.value=D.value===`AM`?`PM`:`AM`)}return t({attr:{open:()=>f.value?!0:void 0}}),a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const i=require("./inputs/shared/form-context.cjs"),a=require("./inputs/time-picker/time-picker.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");function c(e){if(!e)return null;let t=/^(\d{1,2}):(\d{2})$/.exec(e.trim());if(!t)return null;let n=Number(t[1]),r=Number(t[2]);return n<0||n>23||r<0||r>59?null:{hours:n,minutes:r}}function l(e,t){return`${String(e).padStart(2,`0`)}:${String(t).padStart(2,`0`)}`}function u(e,t,n){if(n===`12`){let n=e>=12?`PM`:`AM`,r=e%12==0?12:e%12;return`${String(r).padStart(2,`0`)}:${String(t).padStart(2,`0`)} ${n}`}return l(e,t)}function d(e,t,n,r){let i=e*60+t,a=c(n),o=c(r),s=a?a.hours*60+a.minutes:0,l=o?o.hours*60+o.minutes:1439,u=Math.min(Math.max(i,s),l);return{hours:Math.floor(u/60),minutes:u%60}}var f=`ore-time-picker`;(0,o.define)(f,{formAssociated:!0,props:{...n.themableBundle,...n.sizableBundle,...n.disablableBundle,...n.roundableBundle,error:o.prop.string(),fullwidth:o.prop.bool(!1),helper:o.prop.string(),label:o.prop.string(),"label-placement":o.prop.oneOf([`inset`,`outside`],`inset`),max:o.prop.string(),min:o.prop.string(),"minute-step":o.prop.number(5),name:o.prop.string(),placeholder:o.prop.string(),required:o.prop.bool(!1),"time-format":o.prop.oneOf([`12`,`24`],`24`),value:o.prop.string(),variant:o.prop.string()},setup(e){let t=(0,o.getHost)(),n=(0,o.useEmit)(),a=(0,s.signal)(!1),f=(0,s.signal)(c(e.value.value)),p=i.useFormContext(e,(0,o.inject)(i.FORM_CTX)),m=p.disabled;r.useField({disabled:m,toFormValue:e=>e||null,value:(0,s.computed)(()=>{let e=f.value;return e?l(e.hours,e.minutes):``})});let h=(0,s.computed)(()=>e[`time-format`].value??`24`),g=(0,s.computed)(()=>Math.max(1,Math.min(59,e[`minute-step`].value??5))),_=(0,s.computed)(()=>f.value?u(f.value.hours,f.value.minutes,h.value):e.placeholder.value||``),v=(0,s.computed)(()=>h.value===`12`?Array.from({length:12},(e,t)=>t+1):Array.from({length:24},(e,t)=>t)),y=(0,s.computed)(()=>{let e=g.value,t=[];for(let n=0;n<60;n+=e)t.push(n);return t}),b=`time-picker-${Math.random().toString(36).slice(2,9)}-dropdown`;function x(e){if(h.value===`24`)return e;let t=e%12;return t===0?12:t}function S(e,t){return h.value===`24`?e:t===`AM`?e===12?0:e:e===12?12:e+12}function C(t,n){let r=t*60+n,i=c(e.min.value),a=c(e.max.value);return!!(i&&r<i.hours*60+i.minutes||a&&r>a.hours*60+a.minutes)}let w=(0,s.signal)(f.value?.hours??0),T=(0,s.signal)(f.value?.minutes??0),E=(0,s.signal)((f.value?.hours??0)>=12?`PM`:`AM`),D=e.value.value;(0,o.onMounted)(()=>{let t=setInterval(()=>{let t=e.value.value;if(t!==D){D=t;let e=c(t);f.value=e,e&&(w.value=e.hours,T.value=e.minutes,E.value=e.hours>=12?`PM`:`AM`)}},50);return()=>clearInterval(t)});function O(t,r){let i=d(t,r,e.min.value,e.max.value),a=Math.round(i.minutes/g.value)*g.value,o=Math.min(a,59);f.value={hours:i.hours,minutes:o},n(`change`,{value:l(i.hours,o)})}function k(e){let t=h.value===`12`?S(w.value,E.value):w.value;T.value=e,O(t,e),j()}function A(){if(m.value)return;let e=f.value;e?(w.value=h.value===`12`?x(e.hours):e.hours,T.value=e.minutes,E.value=e.hours>=12?`PM`:`AM`):(w.value=h.value===`12`?12:0,T.value=0,E.value=`AM`),a.value=!0}function j(){a.value=!1}function M(){a.value?j():A()}function N(e){a.value&&(e.composedPath().includes(t)||j())}(0,o.onMounted)(()=>(document.addEventListener(`pointerdown`,N,{capture:!0}),()=>document.removeEventListener(`pointerdown`,N,{capture:!0})));function P(e){m.value||(e.key===`Enter`||e.key===` `?(e.preventDefault(),M()):e.key===`Escape`&&a.value?(e.preventDefault(),j()):(e.key===`ArrowDown`||e.key===`ArrowUp`)&&!a.value&&(e.preventDefault(),A()))}function F(e){e.key===`Escape`&&(e.preventDefault(),j())}function I(e){let t=v.value,n=t.indexOf(w.value);e.key===`ArrowUp`?(e.preventDefault(),w.value=t[(n-1+t.length)%t.length]):e.key===`ArrowDown`&&(e.preventDefault(),w.value=t[(n+1)%t.length])}function L(e){let t=y.value,n=t.indexOf(T.value);e.key===`ArrowUp`?(e.preventDefault(),T.value=t[(n-1+t.length)%t.length]):e.key===`ArrowDown`&&(e.preventDefault(),T.value=t[(n+1)%t.length])}function R(e){(e.key===`ArrowUp`||e.key===`ArrowDown`)&&(e.preventDefault(),E.value=E.value===`AM`?`PM`:`AM`)}return(0,o.bind)({attr:{open:()=>a.value?!0:void 0}}),o.html`
       <!-- Trigger -->
       <ore-input
         class="trigger"
@@ -6,50 +6,50 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         tabindex="0"
         role="combobox"
         aria-haspopup="listbox"
-        aria-controls="${x}"
-        :aria-expanded="${()=>String(f.value)}"
-        :aria-disabled="${()=>h.value?`true`:null}"
-        :value="${()=>v.value}"
+        aria-controls="${b}"
+        :aria-expanded="${()=>String(a.value)}"
+        :aria-disabled="${()=>m.value?`true`:null}"
+        :value="${()=>_.value}"
         :label="${()=>e.label.value??``}"
         :placeholder="${()=>e.placeholder.value??``}"
         :label-placement="${()=>e[`label-placement`].value??`inset`}"
         :color="${()=>e.color?.value??void 0}"
-        :size="${()=>m.size?.value??void 0}"
-        :variant="${()=>m.variant?.value??void 0}"
+        :size="${()=>p.size?.value??void 0}"
+        :variant="${()=>p.variant?.value??void 0}"
         :rounded="${()=>e.rounded?.value??void 0}"
         :helper="${()=>e.helper.value??``}"
         :error="${()=>e.error.value??``}"
-        ?disabled="${()=>h.value?!0:void 0}"
+        ?disabled="${()=>m.value?!0:void 0}"
         ?required="${()=>e.required.value?!0:void 0}"
         ?fullwidth="${()=>e.fullwidth.value?!0:void 0}"
-        @click="${N}"
-        @keydown="${F}">
+        @click="${M}"
+        @keydown="${P}">
         <ore-icon slot="suffix" name="clock" size="16" stroke-width="1.75" aria-hidden="true"></ore-icon>
       </ore-input>
 
       <!-- Dropdown -->
       <div
         class="dropdown"
-        id="${x}"
+        id="${b}"
         role="listbox"
         aria-label="${()=>e.label.value?`${e.label.value} — select time`:`Select time`}"
-        ?data-open="${f}"
-        @keydown="${I}">
+        ?data-open="${a}"
+        @keydown="${F}">
         <div class="cols-row">
           <!-- Hours column -->
           <div class="col" part="column" role="group" aria-label="Hours">
             <div class="col-label" aria-hidden="true">HH</div>
             <div class="col-scroll">
-              ${()=>y.value.map(e=>{let t=w(g.value===`12`?C(e,D.value):e,E.value);return a.html`<div
+              ${()=>v.value.map(e=>{let t=C(h.value===`12`?S(e,E.value):e,T.value);return o.html`<div
                     class="option"
                     part="option"
                     role="option"
-                    tabindex="${()=>T.value===e&&!t?`0`:`-1`}"
-                    :aria-selected="${()=>String(T.value===e)}"
+                    tabindex="${()=>w.value===e&&!t?`0`:`-1`}"
+                    :aria-selected="${()=>String(w.value===e)}"
                     :aria-disabled="${()=>String(t)}"
                     ?data-disabled="${()=>t}"
-                    @click="${()=>{t||(T.value=e)}}"
-                    @keydown="${L}">
+                    @click="${()=>{t||(w.value=e)}}"
+                    @keydown="${I}">
                     ${String(e).padStart(2,`0`)}
                   </div>`})}
             </div>
@@ -61,38 +61,38 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           <div class="col" part="column" role="group" aria-label="Minutes">
             <div class="col-label" aria-hidden="true">MM</div>
             <div class="col-scroll">
-              ${()=>b.value.map(e=>{let t=w(g.value===`12`?C(T.value,D.value):T.value,e);return a.html`<div
+              ${()=>y.value.map(e=>{let t=C(h.value===`12`?S(w.value,E.value):w.value,e);return o.html`<div
                     class="option"
                     part="option"
                     role="option"
-                    tabindex="${()=>E.value===e&&!t?`0`:`-1`}"
-                    :aria-selected="${()=>String(E.value===e)}"
+                    tabindex="${()=>T.value===e&&!t?`0`:`-1`}"
+                    :aria-selected="${()=>String(T.value===e)}"
                     :aria-disabled="${()=>String(t)}"
                     ?data-disabled="${()=>t}"
-                    @click="${()=>{t||A(e)}}"
-                    @keydown="${R}">
+                    @click="${()=>{t||k(e)}}"
+                    @keydown="${L}">
                     ${String(e).padStart(2,`0`)}
                   </div>`})}
             </div>
           </div>
 
           <!-- AM/PM column (12h mode only) -->
-          ${()=>g.value===`12`?a.html` <div class="col col-period" part="column" role="group" aria-label="Period">
+          ${()=>h.value===`12`?o.html` <div class="col col-period" part="column" role="group" aria-label="Period">
                   <div class="col-label" aria-hidden="true">AM/PM</div>
                   <div class="col-scroll">
-                    ${[`AM`,`PM`].map(e=>a.html`<div
+                    ${[`AM`,`PM`].map(e=>o.html`<div
                           class="option"
                           part="option"
                           role="option"
-                          tabindex="${()=>D.value===e?`0`:`-1`}"
-                          :aria-selected="${()=>String(D.value===e)}"
-                          @click="${()=>{D.value=e}}"
-                          @keydown="${z}">
+                          tabindex="${()=>E.value===e?`0`:`-1`}"
+                          :aria-selected="${()=>String(E.value===e)}"
+                          @click="${()=>{E.value=e}}"
+                          @keydown="${R}">
                           ${e}
                         </div>`)}
                   </div>
-                </div>`:a.html``}
+                </div>`:o.html``}
         </div>
       </div>
-    `},shadow:{delegatesFocus:!0},styles:[t.colorThemeMixin,e.reducedMotionMixin,i.default]}),exports.TIME_PICKER_TAG=d;
+    `},shadow:{delegatesFocus:!0},styles:[t.colorThemeMixin,e.reducedMotionMixin,a.default]}),exports.TIME_PICKER_TAG=f;
 //# sourceMappingURL=time-picker.cjs.map

package/dist/time-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.cjs","names":[],"sources":["../src/inputs/time-picker/time-picker.ts"],"sourcesContent":["import { define, useField, html, inject, prop } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { VisualVariant } from '../../shared';\n\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './time-picker.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreTimePickerEvents = {\n  change: { value: string | null };\n};\n\nexport type OreTimePickerProps = {\n  /** Theme color */\n  color?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Validation error message */\n  error?: string;\n  /** Expand to container width */\n  fullwidth?: boolean;\n  /** Helper text below the field */\n  helper?: string;\n  /** Visible label */\n  label?: string;\n  /** Label placement */\n  'label-placement'?: 'inset' | 'outside';\n  /** Maximum selectable time in HH:MM format (24-hour) */\n  max?: string;\n  /** Minimum selectable time in HH:MM format (24-hour) */\n  min?: string;\n  /** Minute step interval (1–59) */\n  'minute-step'?: number;\n  /** Form field name */\n  name?: string;\n  /** Placeholder shown in the trigger */\n  placeholder?: string;\n  /** Mark field as required */\n  required?: boolean;\n  /** Border radius */\n  rounded?: string;\n  /** Component size */\n  size?: string;\n  /** Display format: '12' for AM/PM, '24' for 24-hour (default: '24') */\n  'time-format'?: '12' | '24';\n  /** Selected time in HH:MM format (24-hour) */\n  value?: string;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n};\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\n/** Parse \"HH:MM\" → { hours: 0-23, minutes: 0-59 } | null */\nfunction parseTime(val: string | undefined | null): { hours: number; minutes: number } | null {\n  if (!val) return null;\n\n  const match = /^(\\d{1,2}):(\\d{2})$/.exec(val.trim());\n\n  if (!match) return null;\n\n  const h = Number(match[1]);\n  const m = Number(match[2]);\n\n  if (h < 0 || h > 23 || m < 0 || m > 59) return null;\n\n  return { hours: h, minutes: m };\n}\n\n/** Format { hours, minutes } → \"HH:MM\" (24-hour, zero-padded) */\nfunction formatTime(h: number, m: number): string {\n  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;\n}\n\n/** Format for display label (respects 12/24 mode) */\nfunction formatDisplay(h: number, m: number, format: '12' | '24'): string {\n  if (format === '12') {\n    const period = h >= 12 ? 'PM' : 'AM';\n    const displayH = h % 12 === 0 ? 12 : h % 12;\n\n    return `${String(displayH).padStart(2, '0')}:${String(m).padStart(2, '0')} ${period}`;\n  }\n\n  return formatTime(h, m);\n}\n\n/** Clamp value to [min, max] in total minutes */\nfunction clampTime(\n  h: number,\n  m: number,\n  minVal: string | undefined | null,\n  maxVal: string | undefined | null,\n): { hours: number; minutes: number } {\n  const total = h * 60 + m;\n  const minParsed = parseTime(minVal);\n  const maxParsed = parseTime(maxVal);\n  const minMins = minParsed ? minParsed.hours * 60 + minParsed.minutes : 0;\n  const maxMins = maxParsed ? maxParsed.hours * 60 + maxParsed.minutes : 23 * 60 + 59;\n  const clamped = Math.min(Math.max(total, minMins), maxMins);\n\n  return { hours: Math.floor(clamped / 60), minutes: clamped % 60 };\n}\n\n/**\n * An accessible time picker with a scrollable clock dropdown.\n * Supports 12/24-hour display formats, min/max bounds, minute steps, and form association.\n *\n * @element ore-time-picker\n *\n * @attr {string} value - Selected time in HH:MM (24-hour) format\n * @attr {string} min - Minimum selectable time (HH:MM)\n * @attr {string} max - Maximum selectable time (HH:MM)\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} placeholder - Trigger placeholder\n * @attr {boolean} disabled - Disable the picker\n * @attr {boolean} required - Required field\n * @attr {string} name - Form field name\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} time-format - '12' or '24' (default: '24')\n * @attr {number} minute-step - Minute increment (default: 5)\n *\n * @fires change - Fired when a time is selected. detail: { value: string | null }\n *\n * @slot label - Custom label for the trigger field\n * @slot prefix - Content before the trigger text (e.g. icon)\n * @slot helper - Custom helper text\n * @slot error - Custom error content\n *\n * @cssprop --time-picker-bg - Dropdown background\n * @cssprop --time-picker-border-color - Dropdown border color\n * @cssprop --time-picker-radius - Dropdown border radius\n * @cssprop --time-picker-shadow - Dropdown shadow\n * @cssprop --time-picker-selected-bg - Selected option background\n * @cssprop --time-picker-option-hover-bg - Option hover background\n *\n * @part field - The trigger field\n * @part dropdown - The floating time dropdown\n * @part column - A scrollable column (hours / minutes / period)\n * @part option - An individual time option cell\n *\n * @example\n * ```html\n * <!-- 24-hour clock, 15-minute steps -->\n * <ore-time-picker label=\"Meeting time\" value=\"09:30\" minute-step=\"15\" color=\"primary\"></ore-time-picker>\n *\n * <!-- 12-hour AM/PM format -->\n * <ore-time-picker label=\"Appointment\" time-format=\"12\" minute-step=\"30\"></ore-time-picker>\n *\n * <!-- Outside label, bordered variant -->\n * <ore-time-picker label=\"Start time\" label-placement=\"outside\" variant=\"bordered\"></ore-time-picker>\n * ```\n */\nexport const TIME_PICKER_TAG = 'ore-time-picker' as const;\n\ndefine<OreTimePickerProps, OreTimePickerEvents>(TIME_PICKER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    max: prop.string(),\n    min: prop.string(),\n    'minute-step': prop.number(5),\n    name: prop.string(),\n    placeholder: prop.string(),\n    required: prop.bool(false),\n    'time-format': prop.oneOf(['12', '24'] as const, '24'),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n\n  setup(props, { bind, el, emit, onMounted }) {\n    // ── Signals ──────────────────────────────────────────────────────────────\n\n    const isOpen = signal(false);\n    const selectedTime = signal<{ hours: number; minutes: number } | null>(parseTime(props.value.value));\n\n    // ── Form context ─────────────────────────────────────────────────────────\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n    const isDisabled = fCtxProps.disabled;\n\n    // ── Form value ────────────────────────────────────────────────────────────\n\n    useField<string>({\n      disabled: isDisabled,\n      toFormValue: (v) => v || null,\n      value: computed(() => {\n        const t = selectedTime.value;\n\n        return t ? formatTime(t.hours, t.minutes) : '';\n      }),\n    });\n\n    // ── Computed helpers ──────────────────────────────────────────────────────\n\n    const fmt = computed(() => props['time-format'].value ?? '24');\n    const minuteStep = computed(() => Math.max(1, Math.min(59, props['minute-step'].value ?? 5)));\n\n    const triggerText = computed(() => {\n      if (!selectedTime.value) return props.placeholder.value || '';\n\n      return formatDisplay(selectedTime.value.hours, selectedTime.value.minutes, fmt.value as '12' | '24');\n    });\n\n    /** All hour options for the column (0-23 in 24h; 1-12 in 12h) */\n    const hourOptions = computed<number[]>(() => {\n      if (fmt.value === '12') {\n        return Array.from({ length: 12 }, (_, i) => i + 1);\n      }\n\n      return Array.from({ length: 24 }, (_, i) => i);\n    });\n\n    /** All minute options for the column, stepped */\n    const minuteOptions = computed<number[]>(() => {\n      const step = minuteStep.value;\n      const opts: number[] = [];\n\n      for (let m = 0; m < 60; m += step) opts.push(m);\n\n      return opts;\n    });\n\n    const dialogId = `time-picker-${Math.random().toString(36).slice(2, 9)}-dropdown`;\n\n    /** Convert 24h hour to display hour in current format */\n    function toDisplayHour(h24: number): number {\n      if (fmt.value === '24') return h24;\n\n      const h12 = h24 % 12;\n\n      return h12 === 0 ? 12 : h12;\n    }\n\n    /** Convert display hour + period → 24h hour */\n    function to24Hour(displayHour: number, period: 'AM' | 'PM'): number {\n      if (fmt.value === '24') return displayHour;\n\n      if (period === 'AM') return displayHour === 12 ? 0 : displayHour;\n\n      return displayHour === 12 ? 12 : displayHour + 12;\n    }\n\n    /** Whether a given HH:MM is out of [min, max] */\n    function isTimeDisabled(h: number, m: number): boolean {\n      const total = h * 60 + m;\n      const minParsed = parseTime(props.min.value);\n      const maxParsed = parseTime(props.max.value);\n\n      if (minParsed && total < minParsed.hours * 60 + minParsed.minutes) return true;\n\n      if (maxParsed && total > maxParsed.hours * 60 + maxParsed.minutes) return true;\n\n      return false;\n    }\n\n    // ── State for focused/pending selection ───────────────────────────────────\n\n    /** Pending hour (24h) while user is navigating columns */\n    const pendingHour = signal<number>(selectedTime.value?.hours ?? 0);\n    /** Pending minute */\n    const pendingMinute = signal<number>(selectedTime.value?.minutes ?? 0);\n    /** Pending period (12h mode) */\n    const pendingPeriod = signal<'AM' | 'PM'>((selectedTime.value?.hours ?? 0) >= 12 ? 'PM' : 'AM');\n\n    // ── Sync value prop externally ────────────────────────────────────────────\n\n    let lastValueProp = props.value.value;\n\n    onMounted(() => {\n      const interval = setInterval(() => {\n        const current = props.value.value;\n\n        if (current !== lastValueProp) {\n          lastValueProp = current;\n\n          const parsed = parseTime(current);\n\n          selectedTime.value = parsed;\n\n          if (parsed) {\n            pendingHour.value = parsed.hours;\n            pendingMinute.value = parsed.minutes;\n            pendingPeriod.value = parsed.hours >= 12 ? 'PM' : 'AM';\n          }\n        }\n      }, 50);\n\n      return () => clearInterval(interval);\n    });\n\n    // ── Commit ────────────────────────────────────────────────────────────────\n\n    function commit(h24: number, m: number): void {\n      const clamped = clampTime(h24, m, props.min.value, props.max.value);\n      const snapped = Math.round(clamped.minutes / minuteStep.value) * minuteStep.value;\n      const snappedMin = Math.min(snapped, 59);\n\n      selectedTime.value = { hours: clamped.hours, minutes: snappedMin };\n      emit('change', { value: formatTime(clamped.hours, snappedMin) });\n    }\n\n    function commitFromMinute(m: number): void {\n      const h24 = fmt.value === '12' ? to24Hour(pendingHour.value, pendingPeriod.value) : pendingHour.value;\n\n      pendingMinute.value = m;\n      commit(h24, m);\n      closePicker();\n    }\n\n    // ── Open / close ──────────────────────────────────────────────────────────\n\n    function openPicker(): void {\n      if (isDisabled.value) return;\n\n      const current = selectedTime.value;\n\n      if (current) {\n        pendingHour.value = fmt.value === '12' ? toDisplayHour(current.hours) : current.hours;\n        pendingMinute.value = current.minutes;\n        pendingPeriod.value = current.hours >= 12 ? 'PM' : 'AM';\n      } else {\n        pendingHour.value = fmt.value === '12' ? 12 : 0;\n        pendingMinute.value = 0;\n        pendingPeriod.value = 'AM';\n      }\n\n      isOpen.value = true;\n    }\n\n    function closePicker(): void {\n      isOpen.value = false;\n    }\n\n    function handleTriggerClick(): void {\n      if (isOpen.value) closePicker();\n      else openPicker();\n    }\n\n    // ── Outside click ─────────────────────────────────────────────────────────\n\n    function handleOutsideClick(e: PointerEvent | MouseEvent): void {\n      if (!isOpen.value) return;\n\n      if (!e.composedPath().includes(el)) closePicker();\n    }\n\n    onMounted(() => {\n      document.addEventListener('pointerdown', handleOutsideClick, { capture: true });\n\n      return () => document.removeEventListener('pointerdown', handleOutsideClick, { capture: true });\n    });\n\n    // ── Keyboard ──────────────────────────────────────────────────────────────\n\n    function handleTriggerKeydown(e: KeyboardEvent): void {\n      if (isDisabled.value) return;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleTriggerClick();\n      } else if (e.key === 'Escape' && isOpen.value) {\n        e.preventDefault();\n        closePicker();\n      } else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !isOpen.value) {\n        e.preventDefault();\n        openPicker();\n      }\n    }\n\n    function handleDropdownKeydown(e: KeyboardEvent): void {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        closePicker();\n      }\n    }\n\n    function handleHourKeydown(e: KeyboardEvent): void {\n      const opts = hourOptions.value;\n      const idx = opts.indexOf(pendingHour.value);\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        pendingHour.value = opts[(idx - 1 + opts.length) % opts.length];\n      } else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        pendingHour.value = opts[(idx + 1) % opts.length];\n      }\n    }\n\n    function handleMinuteKeydown(e: KeyboardEvent): void {\n      const opts = minuteOptions.value;\n      const idx = opts.indexOf(pendingMinute.value);\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        pendingMinute.value = opts[(idx - 1 + opts.length) % opts.length];\n      } else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        pendingMinute.value = opts[(idx + 1) % opts.length];\n      }\n    }\n\n    function handlePeriodKeydown(e: KeyboardEvent): void {\n      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n        e.preventDefault();\n        pendingPeriod.value = pendingPeriod.value === 'AM' ? 'PM' : 'AM';\n      }\n    }\n\n    // ── Host bindings ─────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n      },\n    });\n\n    // ── ore-input prop helpers ────────────────────────────────────────────────\n\n    const inputValue = () => triggerText.value;\n    const inputLabel = () => props.label.value ?? '';\n    const inputPlaceholder = () => props.placeholder.value ?? '';\n    const inputLabelPlacement = () => props['label-placement'].value ?? 'inset';\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => fCtxProps.size?.value ?? undefined;\n    const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputHelper = () => props.helper.value ?? '';\n    const inputError = () => props.error.value ?? '';\n    const inputDisabled = () => (isDisabled.value ? true : undefined);\n    const inputRequired = () => (props.required.value ? true : undefined);\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n    return html`\n      <!-- Trigger -->\n      <ore-input\n        class=\"trigger\"\n        readonly\n        tabindex=\"0\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-controls=\"${dialogId}\"\n        :aria-expanded=\"${() => String(isOpen.value)}\"\n        :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n        :value=\"${inputValue}\"\n        :label=\"${inputLabel}\"\n        :placeholder=\"${inputPlaceholder}\"\n        :label-placement=\"${inputLabelPlacement}\"\n        :color=\"${inputColor}\"\n        :size=\"${inputSize}\"\n        :variant=\"${inputVariant}\"\n        :rounded=\"${inputRounded}\"\n        :helper=\"${inputHelper}\"\n        :error=\"${inputError}\"\n        ?disabled=\"${inputDisabled}\"\n        ?required=\"${inputRequired}\"\n        ?fullwidth=\"${inputFullwidth}\"\n        @click=\"${handleTriggerClick}\"\n        @keydown=\"${handleTriggerKeydown}\">\n        <ore-icon slot=\"suffix\" name=\"clock\" size=\"16\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n      </ore-input>\n\n      <!-- Dropdown -->\n      <div\n        class=\"dropdown\"\n        id=\"${dialogId}\"\n        role=\"listbox\"\n        aria-label=\"${() => (props.label.value ? `${props.label.value} — select time` : 'Select time')}\"\n        ?data-open=\"${isOpen}\"\n        @keydown=\"${handleDropdownKeydown}\">\n        <div class=\"cols-row\">\n          <!-- Hours column -->\n          <div class=\"col\" part=\"column\" role=\"group\" aria-label=\"Hours\">\n            <div class=\"col-label\" aria-hidden=\"true\">HH</div>\n            <div class=\"col-scroll\">\n              ${() =>\n                hourOptions.value.map((h) => {\n                  const h24 = fmt.value === '12' ? to24Hour(h, pendingPeriod.value) : h;\n                  const disabled = isTimeDisabled(h24, pendingMinute.value);\n\n                  return html`<div\n                    class=\"option\"\n                    part=\"option\"\n                    role=\"option\"\n                    tabindex=\"${() => (pendingHour.value === h && !disabled ? '0' : '-1')}\"\n                    :aria-selected=\"${() => String(pendingHour.value === h)}\"\n                    :aria-disabled=\"${() => String(disabled)}\"\n                    ?data-disabled=\"${() => disabled}\"\n                    @click=\"${() => {\n                      if (!disabled) pendingHour.value = h;\n                    }}\"\n                    @keydown=\"${handleHourKeydown}\">\n                    ${String(h).padStart(2, '0')}\n                  </div>`;\n                })}\n            </div>\n          </div>\n\n          <div class=\"col-sep\" aria-hidden=\"true\">:</div>\n\n          <!-- Minutes column -->\n          <div class=\"col\" part=\"column\" role=\"group\" aria-label=\"Minutes\">\n            <div class=\"col-label\" aria-hidden=\"true\">MM</div>\n            <div class=\"col-scroll\">\n              ${() =>\n                minuteOptions.value.map((m) => {\n                  const h24 = fmt.value === '12' ? to24Hour(pendingHour.value, pendingPeriod.value) : pendingHour.value;\n                  const disabled = isTimeDisabled(h24, m);\n\n                  return html`<div\n                    class=\"option\"\n                    part=\"option\"\n                    role=\"option\"\n                    tabindex=\"${() => (pendingMinute.value === m && !disabled ? '0' : '-1')}\"\n                    :aria-selected=\"${() => String(pendingMinute.value === m)}\"\n                    :aria-disabled=\"${() => String(disabled)}\"\n                    ?data-disabled=\"${() => disabled}\"\n                    @click=\"${() => {\n                      if (!disabled) commitFromMinute(m);\n                    }}\"\n                    @keydown=\"${handleMinuteKeydown}\">\n                    ${String(m).padStart(2, '0')}\n                  </div>`;\n                })}\n            </div>\n          </div>\n\n          <!-- AM/PM column (12h mode only) -->\n          ${() =>\n            fmt.value === '12'\n              ? html` <div class=\"col col-period\" part=\"column\" role=\"group\" aria-label=\"Period\">\n                  <div class=\"col-label\" aria-hidden=\"true\">AM/PM</div>\n                  <div class=\"col-scroll\">\n                    ${(['AM', 'PM'] as const).map(\n                      (p) =>\n                        html`<div\n                          class=\"option\"\n                          part=\"option\"\n                          role=\"option\"\n                          tabindex=\"${() => (pendingPeriod.value === p ? '0' : '-1')}\"\n                          :aria-selected=\"${() => String(pendingPeriod.value === p)}\"\n                          @click=\"${() => {\n                            pendingPeriod.value = p;\n                          }}\"\n                          @keydown=\"${handlePeriodKeydown}\">\n                          ${p}\n                        </div>`,\n                    )}\n                  </div>\n                </div>`\n              : html``}\n        </div>\n      </div>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"time-picker.cjs","names":[],"sources":["../src/inputs/time-picker/time-picker.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost, onMounted, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { VisualVariant } from '../../shared';\n\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './time-picker.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreTimePickerEvents = {\n  change: { value: string | null };\n};\n\nexport type OreTimePickerProps = {\n  /** Theme color */\n  color?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Validation error message */\n  error?: string;\n  /** Expand to container width */\n  fullwidth?: boolean;\n  /** Helper text below the field */\n  helper?: string;\n  /** Visible label */\n  label?: string;\n  /** Label placement */\n  'label-placement'?: 'inset' | 'outside';\n  /** Maximum selectable time in HH:MM format (24-hour) */\n  max?: string;\n  /** Minimum selectable time in HH:MM format (24-hour) */\n  min?: string;\n  /** Minute step interval (1–59) */\n  'minute-step'?: number;\n  /** Form field name */\n  name?: string;\n  /** Placeholder shown in the trigger */\n  placeholder?: string;\n  /** Mark field as required */\n  required?: boolean;\n  /** Border radius */\n  rounded?: string;\n  /** Component size */\n  size?: string;\n  /** Display format: '12' for AM/PM, '24' for 24-hour (default: '24') */\n  'time-format'?: '12' | '24';\n  /** Selected time in HH:MM format (24-hour) */\n  value?: string;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n};\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\n/** Parse \"HH:MM\" → { hours: 0-23, minutes: 0-59 } | null */\nfunction parseTime(val: string | undefined | null): { hours: number; minutes: number } | null {\n  if (!val) return null;\n\n  const match = /^(\\d{1,2}):(\\d{2})$/.exec(val.trim());\n\n  if (!match) return null;\n\n  const h = Number(match[1]);\n  const m = Number(match[2]);\n\n  if (h < 0 || h > 23 || m < 0 || m > 59) return null;\n\n  return { hours: h, minutes: m };\n}\n\n/** Format { hours, minutes } → \"HH:MM\" (24-hour, zero-padded) */\nfunction formatTime(h: number, m: number): string {\n  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;\n}\n\n/** Format for display label (respects 12/24 mode) */\nfunction formatDisplay(h: number, m: number, format: '12' | '24'): string {\n  if (format === '12') {\n    const period = h >= 12 ? 'PM' : 'AM';\n    const displayH = h % 12 === 0 ? 12 : h % 12;\n\n    return `${String(displayH).padStart(2, '0')}:${String(m).padStart(2, '0')} ${period}`;\n  }\n\n  return formatTime(h, m);\n}\n\n/** Clamp value to [min, max] in total minutes */\nfunction clampTime(\n  h: number,\n  m: number,\n  minVal: string | undefined | null,\n  maxVal: string | undefined | null,\n): { hours: number; minutes: number } {\n  const total = h * 60 + m;\n  const minParsed = parseTime(minVal);\n  const maxParsed = parseTime(maxVal);\n  const minMins = minParsed ? minParsed.hours * 60 + minParsed.minutes : 0;\n  const maxMins = maxParsed ? maxParsed.hours * 60 + maxParsed.minutes : 23 * 60 + 59;\n  const clamped = Math.min(Math.max(total, minMins), maxMins);\n\n  return { hours: Math.floor(clamped / 60), minutes: clamped % 60 };\n}\n\n/**\n * An accessible time picker with a scrollable clock dropdown.\n * Supports 12/24-hour display formats, min/max bounds, minute steps, and form association.\n *\n * @element ore-time-picker\n *\n * @attr {string} value - Selected time in HH:MM (24-hour) format\n * @attr {string} min - Minimum selectable time (HH:MM)\n * @attr {string} max - Maximum selectable time (HH:MM)\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} placeholder - Trigger placeholder\n * @attr {boolean} disabled - Disable the picker\n * @attr {boolean} required - Required field\n * @attr {string} name - Form field name\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} time-format - '12' or '24' (default: '24')\n * @attr {number} minute-step - Minute increment (default: 5)\n *\n * @fires change - Fired when a time is selected. detail: { value: string | null }\n *\n * @slot label - Custom label for the trigger field\n * @slot prefix - Content before the trigger text (e.g. icon)\n * @slot helper - Custom helper text\n * @slot error - Custom error content\n *\n * @cssprop --time-picker-bg - Dropdown background\n * @cssprop --time-picker-border-color - Dropdown border color\n * @cssprop --time-picker-radius - Dropdown border radius\n * @cssprop --time-picker-shadow - Dropdown shadow\n * @cssprop --time-picker-selected-bg - Selected option background\n * @cssprop --time-picker-option-hover-bg - Option hover background\n *\n * @part field - The trigger field\n * @part dropdown - The floating time dropdown\n * @part column - A scrollable column (hours / minutes / period)\n * @part option - An individual time option cell\n *\n * @example\n * ```html\n * <!-- 24-hour clock, 15-minute steps -->\n * <ore-time-picker label=\"Meeting time\" value=\"09:30\" minute-step=\"15\" color=\"primary\"></ore-time-picker>\n *\n * <!-- 12-hour AM/PM format -->\n * <ore-time-picker label=\"Appointment\" time-format=\"12\" minute-step=\"30\"></ore-time-picker>\n *\n * <!-- Outside label, bordered variant -->\n * <ore-time-picker label=\"Start time\" label-placement=\"outside\" variant=\"bordered\"></ore-time-picker>\n * ```\n */\nexport const TIME_PICKER_TAG = 'ore-time-picker' as const;\n\ndefine<OreTimePickerProps>(TIME_PICKER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    max: prop.string(),\n    min: prop.string(),\n    'minute-step': prop.number(5),\n    name: prop.string(),\n    placeholder: prop.string(),\n    required: prop.bool(false),\n    'time-format': prop.oneOf(['12', '24'] as const, '24'),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreTimePickerEvents>();\n\n    // ── Signals ──────────────────────────────────────────────────────────────\n\n    const isOpen = signal(false);\n    const selectedTime = signal<{ hours: number; minutes: number } | null>(parseTime(props.value.value));\n\n    // ── Form context ─────────────────────────────────────────────────────────\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const isDisabled = fCtxProps.disabled;\n\n    // ── Form value ────────────────────────────────────────────────────────────\n\n    useField<string>({\n      disabled: isDisabled,\n      toFormValue: (v) => v || null,\n      value: computed(() => {\n        const t = selectedTime.value;\n\n        return t ? formatTime(t.hours, t.minutes) : '';\n      }),\n    });\n\n    // ── Computed helpers ──────────────────────────────────────────────────────\n\n    const fmt = computed(() => props['time-format'].value ?? '24');\n    const minuteStep = computed(() => Math.max(1, Math.min(59, props['minute-step'].value ?? 5)));\n\n    const triggerText = computed(() => {\n      if (!selectedTime.value) return props.placeholder.value || '';\n\n      return formatDisplay(selectedTime.value.hours, selectedTime.value.minutes, fmt.value as '12' | '24');\n    });\n\n    /** All hour options for the column (0-23 in 24h; 1-12 in 12h) */\n    const hourOptions = computed<number[]>(() => {\n      if (fmt.value === '12') {\n        return Array.from({ length: 12 }, (_, i) => i + 1);\n      }\n\n      return Array.from({ length: 24 }, (_, i) => i);\n    });\n\n    /** All minute options for the column, stepped */\n    const minuteOptions = computed<number[]>(() => {\n      const step = minuteStep.value;\n      const opts: number[] = [];\n\n      for (let m = 0; m < 60; m += step) opts.push(m);\n\n      return opts;\n    });\n\n    const dialogId = `time-picker-${Math.random().toString(36).slice(2, 9)}-dropdown`;\n\n    /** Convert 24h hour to display hour in current format */\n    function toDisplayHour(h24: number): number {\n      if (fmt.value === '24') return h24;\n\n      const h12 = h24 % 12;\n\n      return h12 === 0 ? 12 : h12;\n    }\n\n    /** Convert display hour + period → 24h hour */\n    function to24Hour(displayHour: number, period: 'AM' | 'PM'): number {\n      if (fmt.value === '24') return displayHour;\n\n      if (period === 'AM') return displayHour === 12 ? 0 : displayHour;\n\n      return displayHour === 12 ? 12 : displayHour + 12;\n    }\n\n    /** Whether a given HH:MM is out of [min, max] */\n    function isTimeDisabled(h: number, m: number): boolean {\n      const total = h * 60 + m;\n      const minParsed = parseTime(props.min.value);\n      const maxParsed = parseTime(props.max.value);\n\n      if (minParsed && total < minParsed.hours * 60 + minParsed.minutes) return true;\n\n      if (maxParsed && total > maxParsed.hours * 60 + maxParsed.minutes) return true;\n\n      return false;\n    }\n\n    // ── State for focused/pending selection ───────────────────────────────────\n\n    /** Pending hour (24h) while user is navigating columns */\n    const pendingHour = signal<number>(selectedTime.value?.hours ?? 0);\n    /** Pending minute */\n    const pendingMinute = signal<number>(selectedTime.value?.minutes ?? 0);\n    /** Pending period (12h mode) */\n    const pendingPeriod = signal<'AM' | 'PM'>((selectedTime.value?.hours ?? 0) >= 12 ? 'PM' : 'AM');\n\n    // ── Sync value prop externally ────────────────────────────────────────────\n\n    let lastValueProp = props.value.value;\n\n    onMounted(() => {\n      const interval = setInterval(() => {\n        const current = props.value.value;\n\n        if (current !== lastValueProp) {\n          lastValueProp = current;\n\n          const parsed = parseTime(current);\n\n          selectedTime.value = parsed;\n\n          if (parsed) {\n            pendingHour.value = parsed.hours;\n            pendingMinute.value = parsed.minutes;\n            pendingPeriod.value = parsed.hours >= 12 ? 'PM' : 'AM';\n          }\n        }\n      }, 50);\n\n      return () => clearInterval(interval);\n    });\n\n    // ── Commit ────────────────────────────────────────────────────────────────\n\n    function commit(h24: number, m: number): void {\n      const clamped = clampTime(h24, m, props.min.value, props.max.value);\n      const snapped = Math.round(clamped.minutes / minuteStep.value) * minuteStep.value;\n      const snappedMin = Math.min(snapped, 59);\n\n      selectedTime.value = { hours: clamped.hours, minutes: snappedMin };\n      emit('change', { value: formatTime(clamped.hours, snappedMin) });\n    }\n\n    function commitFromMinute(m: number): void {\n      const h24 = fmt.value === '12' ? to24Hour(pendingHour.value, pendingPeriod.value) : pendingHour.value;\n\n      pendingMinute.value = m;\n      commit(h24, m);\n      closePicker();\n    }\n\n    // ── Open / close ──────────────────────────────────────────────────────────\n\n    function openPicker(): void {\n      if (isDisabled.value) return;\n\n      const current = selectedTime.value;\n\n      if (current) {\n        pendingHour.value = fmt.value === '12' ? toDisplayHour(current.hours) : current.hours;\n        pendingMinute.value = current.minutes;\n        pendingPeriod.value = current.hours >= 12 ? 'PM' : 'AM';\n      } else {\n        pendingHour.value = fmt.value === '12' ? 12 : 0;\n        pendingMinute.value = 0;\n        pendingPeriod.value = 'AM';\n      }\n\n      isOpen.value = true;\n    }\n\n    function closePicker(): void {\n      isOpen.value = false;\n    }\n\n    function handleTriggerClick(): void {\n      if (isOpen.value) closePicker();\n      else openPicker();\n    }\n\n    // ── Outside click ─────────────────────────────────────────────────────────\n\n    function handleOutsideClick(e: PointerEvent | MouseEvent): void {\n      if (!isOpen.value) return;\n\n      if (!e.composedPath().includes(el)) closePicker();\n    }\n\n    onMounted(() => {\n      document.addEventListener('pointerdown', handleOutsideClick, { capture: true });\n\n      return () => document.removeEventListener('pointerdown', handleOutsideClick, { capture: true });\n    });\n\n    // ── Keyboard ──────────────────────────────────────────────────────────────\n\n    function handleTriggerKeydown(e: KeyboardEvent): void {\n      if (isDisabled.value) return;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleTriggerClick();\n      } else if (e.key === 'Escape' && isOpen.value) {\n        e.preventDefault();\n        closePicker();\n      } else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !isOpen.value) {\n        e.preventDefault();\n        openPicker();\n      }\n    }\n\n    function handleDropdownKeydown(e: KeyboardEvent): void {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        closePicker();\n      }\n    }\n\n    function handleHourKeydown(e: KeyboardEvent): void {\n      const opts = hourOptions.value;\n      const idx = opts.indexOf(pendingHour.value);\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        pendingHour.value = opts[(idx - 1 + opts.length) % opts.length];\n      } else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        pendingHour.value = opts[(idx + 1) % opts.length];\n      }\n    }\n\n    function handleMinuteKeydown(e: KeyboardEvent): void {\n      const opts = minuteOptions.value;\n      const idx = opts.indexOf(pendingMinute.value);\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        pendingMinute.value = opts[(idx - 1 + opts.length) % opts.length];\n      } else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        pendingMinute.value = opts[(idx + 1) % opts.length];\n      }\n    }\n\n    function handlePeriodKeydown(e: KeyboardEvent): void {\n      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n        e.preventDefault();\n        pendingPeriod.value = pendingPeriod.value === 'AM' ? 'PM' : 'AM';\n      }\n    }\n\n    // ── Host bindings ─────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n      },\n    });\n\n    // ── ore-input prop helpers ────────────────────────────────────────────────\n\n    const inputValue = () => triggerText.value;\n    const inputLabel = () => props.label.value ?? '';\n    const inputPlaceholder = () => props.placeholder.value ?? '';\n    const inputLabelPlacement = () => props['label-placement'].value ?? 'inset';\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => fCtxProps.size?.value ?? undefined;\n    const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputHelper = () => props.helper.value ?? '';\n    const inputError = () => props.error.value ?? '';\n    const inputDisabled = () => (isDisabled.value ? true : undefined);\n    const inputRequired = () => (props.required.value ? true : undefined);\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n    return html`\n      <!-- Trigger -->\n      <ore-input\n        class=\"trigger\"\n        readonly\n        tabindex=\"0\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-controls=\"${dialogId}\"\n        :aria-expanded=\"${() => String(isOpen.value)}\"\n        :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n        :value=\"${inputValue}\"\n        :label=\"${inputLabel}\"\n        :placeholder=\"${inputPlaceholder}\"\n        :label-placement=\"${inputLabelPlacement}\"\n        :color=\"${inputColor}\"\n        :size=\"${inputSize}\"\n        :variant=\"${inputVariant}\"\n        :rounded=\"${inputRounded}\"\n        :helper=\"${inputHelper}\"\n        :error=\"${inputError}\"\n        ?disabled=\"${inputDisabled}\"\n        ?required=\"${inputRequired}\"\n        ?fullwidth=\"${inputFullwidth}\"\n        @click=\"${handleTriggerClick}\"\n        @keydown=\"${handleTriggerKeydown}\">\n        <ore-icon slot=\"suffix\" name=\"clock\" size=\"16\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n      </ore-input>\n\n      <!-- Dropdown -->\n      <div\n        class=\"dropdown\"\n        id=\"${dialogId}\"\n        role=\"listbox\"\n        aria-label=\"${() => (props.label.value ? `${props.label.value} — select time` : 'Select time')}\"\n        ?data-open=\"${isOpen}\"\n        @keydown=\"${handleDropdownKeydown}\">\n        <div class=\"cols-row\">\n          <!-- Hours column -->\n          <div class=\"col\" part=\"column\" role=\"group\" aria-label=\"Hours\">\n            <div class=\"col-label\" aria-hidden=\"true\">HH</div>\n            <div class=\"col-scroll\">\n              ${() =>\n                hourOptions.value.map((h) => {\n                  const h24 = fmt.value === '12' ? to24Hour(h, pendingPeriod.value) : h;\n                  const disabled = isTimeDisabled(h24, pendingMinute.value);\n\n                  return html`<div\n                    class=\"option\"\n                    part=\"option\"\n                    role=\"option\"\n                    tabindex=\"${() => (pendingHour.value === h && !disabled ? '0' : '-1')}\"\n                    :aria-selected=\"${() => String(pendingHour.value === h)}\"\n                    :aria-disabled=\"${() => String(disabled)}\"\n                    ?data-disabled=\"${() => disabled}\"\n                    @click=\"${() => {\n                      if (!disabled) pendingHour.value = h;\n                    }}\"\n                    @keydown=\"${handleHourKeydown}\">\n                    ${String(h).padStart(2, '0')}\n                  </div>`;\n                })}\n            </div>\n          </div>\n\n          <div class=\"col-sep\" aria-hidden=\"true\">:</div>\n\n          <!-- Minutes column -->\n          <div class=\"col\" part=\"column\" role=\"group\" aria-label=\"Minutes\">\n            <div class=\"col-label\" aria-hidden=\"true\">MM</div>\n            <div class=\"col-scroll\">\n              ${() =>\n                minuteOptions.value.map((m) => {\n                  const h24 = fmt.value === '12' ? to24Hour(pendingHour.value, pendingPeriod.value) : pendingHour.value;\n                  const disabled = isTimeDisabled(h24, m);\n\n                  return html`<div\n                    class=\"option\"\n                    part=\"option\"\n                    role=\"option\"\n                    tabindex=\"${() => (pendingMinute.value === m && !disabled ? '0' : '-1')}\"\n                    :aria-selected=\"${() => String(pendingMinute.value === m)}\"\n                    :aria-disabled=\"${() => String(disabled)}\"\n                    ?data-disabled=\"${() => disabled}\"\n                    @click=\"${() => {\n                      if (!disabled) commitFromMinute(m);\n                    }}\"\n                    @keydown=\"${handleMinuteKeydown}\">\n                    ${String(m).padStart(2, '0')}\n                  </div>`;\n                })}\n            </div>\n          </div>\n\n          <!-- AM/PM column (12h mode only) -->\n          ${() =>\n            fmt.value === '12'\n              ? html` <div class=\"col col-period\" part=\"column\" role=\"group\" aria-label=\"Period\">\n                  <div class=\"col-label\" aria-hidden=\"true\">AM/PM</div>\n                  <div class=\"col-scroll\">\n                    ${(['AM', 'PM'] as const).map(\n                      (p) =>\n                        html`<div\n                          class=\"option\"\n                          part=\"option\"\n                          role=\"option\"\n                          tabindex=\"${() => (pendingPeriod.value === p ? '0' : '-1')}\"\n                          :aria-selected=\"${() => String(pendingPeriod.value === p)}\"\n                          @click=\"${() => {\n                            pendingPeriod.value = p;\n                          }}\"\n                          @keydown=\"${handlePeriodKeydown}\">\n                          ${p}\n                        </div>`,\n                    )}\n                  </div>\n                </div>`\n              : html``}\n        </div>\n      </div>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}