@vielzeug/refine 1.5.4 → 1.8.0

package/dist/time-picker.js

@@ -1,13 +1,14 @@
 import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
 import { colorThemeMixin as t } from "./styles/mixins/theme.css.js";
 import { disablableBundle as n, roundableBundle as r, sizableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
-import { FORM_CTX as o, useFormContext as s } from "./inputs/shared/form-context.js";
-import c from "./inputs/time-picker/time-picker.css.js";
-import { bind as l, define as u, getHost as d, html as f, inject as p, onMounted as m, prop as h, useEmit as g } from "@vielzeug/ore";
-import { computed as _, signal as v } from "@vielzeug/ripple";
-import { useField as y } from "@vielzeug/ore/forms";
+import { createDropdownPositioner as o } from "./headless/positioner.js";
+import { FORM_CTX as s, useFormContext as c } from "./inputs/shared/form-context.js";
+import l from "./inputs/time-picker/time-picker.css.js";
+import { bind as u, define as d, getHost as f, html as p, inject as m, onMounted as h, prop as g, ref as _, useEmit as v } from "@vielzeug/ore";
+import { computed as y, signal as b } from "@vielzeug/ripple";
+import { useField as x } from "@vielzeug/ore/forms";
 //#region src/inputs/time-picker/time-picker.ts
-function b(e) {
+function S(e) {
 	if (!e) return null;
 	let t = /^(\d{1,2}):(\d{2})$/.exec(e.trim());
 	if (!t) return null;
@@ -17,184 +18,195 @@ function b(e) {
 		minutes: r
 	};
 }
-function x(e, t) {
+function C(e, t) {
 	return `${String(e).padStart(2, "0")}:${String(t).padStart(2, "0")}`;
 }
-function S(e, t, n) {
+function w(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 x(e, t);
+	return C(e, t);
 }
-function C(e, t, n, r) {
-	let i = e * 60 + t, a = b(n), o = b(r), s = a ? a.hours * 60 + a.minutes : 0, c = o ? o.hours * 60 + o.minutes : 1439, l = Math.min(Math.max(i, s), c);
+function T(e, t, n, r) {
+	let i = e * 60 + t, a = S(n), o = S(r), s = a ? a.hours * 60 + a.minutes : 0, c = o ? o.hours * 60 + o.minutes : 1439, l = Math.min(Math.max(i, s), c);
 	return {
 		hours: Math.floor(l / 60),
 		minutes: l % 60
 	};
 }
-var w = "ore-time-picker";
-u(w, {
+var E = "ore-time-picker";
+d(E, {
 	formAssociated: !0,
 	props: {
 		...a,
 		...i,
 		...n,
 		...r,
-		error: h.string(),
-		fullwidth: h.bool(!1),
-		helper: h.string(),
-		label: h.string(),
-		"label-placement": h.oneOf(["inset", "outside"], "inset"),
-		max: h.string(),
-		min: h.string(),
-		"minute-step": h.number(5),
-		name: h.string(),
-		placeholder: h.string(),
-		required: h.bool(!1),
-		"time-format": h.oneOf(["12", "24"], "24"),
-		value: h.string(),
-		variant: h.string()
+		error: g.string(),
+		fullwidth: g.bool(!1),
+		helper: g.string(),
+		label: g.string(),
+		"label-placement": g.oneOf(["inset", "outside"], "inset"),
+		max: g.string(),
+		min: g.string(),
+		"minute-step": g.number(5),
+		name: g.string(),
+		placeholder: g.string(),
+		required: g.bool(!1),
+		success: g.bool(!1),
+		"time-format": g.oneOf(["12", "24"], "24"),
+		value: g.string(),
+		variant: g.string()
 	},
 	setup(e) {
-		let t = d(), n = g(), r = v(!1), i = v(b(e.value.value)), a = s(e, p(o)), c = a.disabled;
-		y({
-			disabled: c,
+		let t = f(), n = v(), r = b(!1), i = b(S(e.value.value)), a = _(), l = _(), d = o({
+			getFloating: () => l.value ?? null,
+			getReference: () => a.value ?? null,
+			matchWidth: !1,
+			offsetPx: 4
+		}), g = null, E = c(e, m(s)), D = E.disabled;
+		x({
+			disabled: D,
 			toFormValue: (e) => e || null,
-			value: _(() => {
+			value: y(() => {
 				let e = i.value;
-				return e ? x(e.hours, e.minutes) : "";
+				return e ? C(e.hours, e.minutes) : "";
 			})
 		});
-		let u = _(() => e["time-format"].value ?? "24"), h = _(() => Math.max(1, Math.min(59, e["minute-step"].value ?? 5))), w = _(() => i.value ? S(i.value.hours, i.value.minutes, u.value) : e.placeholder.value || ""), T = _(() => u.value === "12" ? Array.from({ length: 12 }, (e, t) => t + 1) : Array.from({ length: 24 }, (e, t) => t)), E = _(() => {
-			let e = h.value, t = [];
+		let O = y(() => e["time-format"].value ?? "24"), k = y(() => Math.max(1, Math.min(59, e["minute-step"].value ?? 5))), A = y(() => i.value ? w(i.value.hours, i.value.minutes, O.value) : e.placeholder.value || ""), j = y(() => O.value === "12" ? Array.from({ length: 12 }, (e, t) => t + 1) : Array.from({ length: 24 }, (e, t) => t)), M = y(() => {
+			let e = k.value, t = [];
 			for (let n = 0; n < 60; n += e) t.push(n);
 			return t;
-		}), D = `time-picker-${Math.random().toString(36).slice(2, 9)}-dropdown`;
-		function O(e) {
-			if (u.value === "24") return e;
+		}), N = `time-picker-${Math.random().toString(36).slice(2, 9)}-dropdown`;
+		function P(e) {
+			if (O.value === "24") return e;
 			let t = e % 12;
 			return t === 0 ? 12 : t;
 		}
-		function k(e, t) {
-			return u.value === "24" ? e : t === "AM" ? e === 12 ? 0 : e : e === 12 ? 12 : e + 12;
+		function F(e, t) {
+			return O.value === "24" ? e : t === "AM" ? e === 12 ? 0 : e : e === 12 ? 12 : e + 12;
 		}
-		function A(t, n) {
-			let r = t * 60 + n, i = b(e.min.value), a = b(e.max.value);
+		function I(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 j = v(i.value?.hours ?? 0), M = v(i.value?.minutes ?? 0), N = v((i.value?.hours ?? 0) >= 12 ? "PM" : "AM"), P = e.value.value;
-		m(() => {
+		let L = b(i.value?.hours ?? 0), R = b(i.value?.minutes ?? 0), z = b((i.value?.hours ?? 0) >= 12 ? "PM" : "AM"), B = e.value.value;
+		h(() => {
 			let t = setInterval(() => {
 				let t = e.value.value;
-				if (t !== P) {
-					P = t;
-					let e = b(t);
-					i.value = e, e && (j.value = e.hours, M.value = e.minutes, N.value = e.hours >= 12 ? "PM" : "AM");
+				if (t !== B) {
+					B = t;
+					let e = S(t);
+					i.value = e, e && (L.value = e.hours, R.value = e.minutes, z.value = e.hours >= 12 ? "PM" : "AM");
 				}
 			}, 50);
 			return () => clearInterval(t);
 		});
-		function F(t, r) {
-			let a = C(t, r, e.min.value, e.max.value), o = Math.round(a.minutes / h.value) * h.value, s = Math.min(o, 59);
+		function V(t, r) {
+			let a = T(t, r, e.min.value, e.max.value), o = Math.round(a.minutes / k.value) * k.value, s = Math.min(o, 59);
 			i.value = {
 				hours: a.hours,
 				minutes: s
-			}, n("change", { value: x(a.hours, s) });
+			}, n("change", { value: C(a.hours, s) });
 		}
-		function I(e) {
-			let t = u.value === "12" ? k(j.value, N.value) : j.value;
-			M.value = e, F(t, e), R();
+		function H(e) {
+			let t = O.value === "12" ? F(L.value, z.value) : L.value;
+			R.value = e, V(t, e), W();
 		}
-		function L() {
-			if (c.value) return;
+		function U() {
+			if (D.value) return;
 			let e = i.value;
-			e ? (j.value = u.value === "12" ? O(e.hours) : e.hours, M.value = e.minutes, N.value = e.hours >= 12 ? "PM" : "AM") : (j.value = u.value === "12" ? 12 : 0, M.value = 0, N.value = "AM"), r.value = !0;
+			e ? (L.value = O.value === "12" ? P(e.hours) : e.hours, R.value = e.minutes, z.value = e.hours >= 12 ? "PM" : "AM") : (L.value = O.value === "12" ? 12 : 0, R.value = 0, z.value = "AM"), r.value = !0, d.update(), g = d.startAutoUpdate?.() ?? null;
 		}
-		function R() {
-			r.value = !1;
+		function W() {
+			r.value = !1, g?.(), g = null;
 		}
-		function z() {
-			r.value ? R() : L();
+		function G() {
+			r.value ? W() : U();
 		}
-		function B(e) {
-			r.value && (e.composedPath().includes(t) || R());
+		function K(e) {
+			r.value && (e.composedPath().includes(t) || W());
 		}
-		m(() => (document.addEventListener("pointerdown", B, { capture: !0 }), () => document.removeEventListener("pointerdown", B, { capture: !0 })));
-		function V(e) {
-			c.value || (e.key === "Enter" || e.key === " " ? (e.preventDefault(), z()) : e.key === "Escape" && r.value ? (e.preventDefault(), R()) : (e.key === "ArrowDown" || e.key === "ArrowUp") && !r.value && (e.preventDefault(), L()));
+		h(() => (document.addEventListener("pointerdown", K, { capture: !0 }), () => {
+			document.removeEventListener("pointerdown", K, { capture: !0 }), g?.(), g = null;
+		}));
+		function q(e) {
+			D.value || (e.key === "Enter" || e.key === " " ? (e.preventDefault(), G()) : e.key === "Escape" && r.value ? (e.preventDefault(), W()) : (e.key === "ArrowDown" || e.key === "ArrowUp") && !r.value && (e.preventDefault(), U()));
 		}
-		function H(e) {
-			e.key === "Escape" && (e.preventDefault(), R());
+		function J(e) {
+			e.key === "Escape" && (e.preventDefault(), W());
 		}
-		function U(e) {
-			let t = T.value, n = t.indexOf(j.value);
-			e.key === "ArrowUp" ? (e.preventDefault(), j.value = t[(n - 1 + t.length) % t.length]) : e.key === "ArrowDown" && (e.preventDefault(), j.value = t[(n + 1) % t.length]);
+		function Y(e) {
+			let t = j.value, n = t.indexOf(L.value);
+			e.key === "ArrowUp" ? (e.preventDefault(), L.value = t[(n - 1 + t.length) % t.length]) : e.key === "ArrowDown" && (e.preventDefault(), L.value = t[(n + 1) % t.length]);
 		}
-		function W(e) {
-			let t = E.value, n = t.indexOf(M.value);
-			e.key === "ArrowUp" ? (e.preventDefault(), M.value = t[(n - 1 + t.length) % t.length]) : e.key === "ArrowDown" && (e.preventDefault(), M.value = t[(n + 1) % t.length]);
+		function X(e) {
+			let t = M.value, n = t.indexOf(R.value);
+			e.key === "ArrowUp" ? (e.preventDefault(), R.value = t[(n - 1 + t.length) % t.length]) : e.key === "ArrowDown" && (e.preventDefault(), R.value = t[(n + 1) % t.length]);
 		}
-		function G(e) {
-			(e.key === "ArrowUp" || e.key === "ArrowDown") && (e.preventDefault(), N.value = N.value === "AM" ? "PM" : "AM");
+		function Z(e) {
+			(e.key === "ArrowUp" || e.key === "ArrowDown") && (e.preventDefault(), z.value = z.value === "AM" ? "PM" : "AM");
 		}
-		return l({ attr: { open: () => r.value ? !0 : void 0 } }), f`
+		return u({ attr: { open: () => r.value ? !0 : void 0 } }), p`
       <!-- Trigger -->
       <ore-input
         class="trigger"
+        ref="${a}"
         readonly
         tabindex="0"
         role="combobox"
         aria-haspopup="listbox"
-        aria-controls="${D}"
+        aria-controls="${N}"
         :aria-expanded="${() => String(r.value)}"
-        :aria-disabled="${() => c.value ? "true" : null}"
-        :value="${() => w.value}"
+        :aria-disabled="${() => D.value ? "true" : null}"
+        :value="${() => A.value}"
         :label="${() => e.label.value ?? ""}"
         :placeholder="${() => e.placeholder.value ?? ""}"
         :label-placement="${() => e["label-placement"].value ?? "inset"}"
         :color="${() => e.color?.value ?? void 0}"
-        :size="${() => a.size?.value ?? void 0}"
-        :variant="${() => a.variant?.value ?? void 0}"
+        :size="${() => E.size?.value ?? void 0}"
+        :variant="${() => E.variant?.value ?? void 0}"
         :rounded="${() => e.rounded?.value ?? void 0}"
         :helper="${() => e.helper.value ?? ""}"
         :error="${() => e.error.value ?? ""}"
-        ?disabled="${() => c.value ? !0 : void 0}"
+        ?disabled="${() => D.value ? !0 : void 0}"
         ?required="${() => e.required.value ? !0 : void 0}"
         ?fullwidth="${() => e.fullwidth.value ? !0 : void 0}"
-        @click="${z}"
-        @keydown="${V}">
+        ?success="${() => e.success.value}"
+        @click="${G}"
+        @keydown="${q}">
         <ore-icon slot="suffix" name="clock" size="16" stroke-width="1.75" aria-hidden="true"></ore-icon>
       </ore-input>
 
       <!-- Dropdown -->
       <div
         class="dropdown"
-        id="${D}"
+        ref="${l}"
+        id="${N}"
         role="listbox"
         aria-label="${() => e.label.value ? `${e.label.value} — select time` : "Select time"}"
         ?data-open="${r}"
-        @keydown="${H}">
+        @keydown="${J}">
         <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">
-              ${() => T.value.map((e) => {
-			let t = A(u.value === "12" ? k(e, N.value) : e, M.value);
-			return f`<div
+              ${() => j.value.map((e) => {
+			let t = I(O.value === "12" ? F(e, z.value) : e, R.value);
+			return p`<div
                     class="option"
                     part="option"
                     role="option"
-                    tabindex="${() => j.value === e && !t ? "0" : "-1"}"
-                    :aria-selected="${() => String(j.value === e)}"
+                    tabindex="${() => L.value === e && !t ? "0" : "-1"}"
+                    :aria-selected="${() => String(L.value === e)}"
                     :aria-disabled="${() => String(t)}"
                     ?data-disabled="${() => t}"
                     @click="${() => {
-				t || (j.value = e);
+				t || (L.value = e);
 			}}"
-                    @keydown="${U}">
+                    @keydown="${Y}">
                     ${String(e).padStart(2, "0")}
                   </div>`;
 		})}
@@ -207,20 +219,20 @@ u(w, {
           <div class="col" part="column" role="group" aria-label="Minutes">
             <div class="col-label" aria-hidden="true">MM</div>
             <div class="col-scroll">
-              ${() => E.value.map((e) => {
-			let t = A(u.value === "12" ? k(j.value, N.value) : j.value, e);
-			return f`<div
+              ${() => M.value.map((e) => {
+			let t = I(O.value === "12" ? F(L.value, z.value) : L.value, e);
+			return p`<div
                     class="option"
                     part="option"
                     role="option"
-                    tabindex="${() => M.value === e && !t ? "0" : "-1"}"
-                    :aria-selected="${() => String(M.value === e)}"
+                    tabindex="${() => R.value === e && !t ? "0" : "-1"}"
+                    :aria-selected="${() => String(R.value === e)}"
                     :aria-disabled="${() => String(t)}"
                     ?data-disabled="${() => t}"
                     @click="${() => {
-				t || I(e);
+				t || H(e);
 			}}"
-                    @keydown="${W}">
+                    @keydown="${X}">
                     ${String(e).padStart(2, "0")}
                   </div>`;
 		})}
@@ -228,23 +240,23 @@ u(w, {
           </div>
 
           <!-- AM/PM column (12h mode only) -->
-          ${() => u.value === "12" ? f` <div class="col col-period" part="column" role="group" aria-label="Period">
+          ${() => O.value === "12" ? p` <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) => f`<div
+                    ${["AM", "PM"].map((e) => p`<div
                           class="option"
                           part="option"
                           role="option"
-                          tabindex="${() => N.value === e ? "0" : "-1"}"
-                          :aria-selected="${() => String(N.value === e)}"
+                          tabindex="${() => z.value === e ? "0" : "-1"}"
+                          :aria-selected="${() => String(z.value === e)}"
                           @click="${() => {
-			N.value = e;
+			z.value = e;
 		}}"
-                          @keydown="${G}">
+                          @keydown="${Z}">
                           ${e}
                         </div>`)}
                   </div>
-                </div>` : f``}
+                </div>` : p``}
         </div>
       </div>
     `;
@@ -253,10 +265,10 @@ u(w, {
 	styles: [
 		t,
 		e,
-		c
+		l
 	]
 });
 //#endregion
-export { w as TIME_PICKER_TAG };
+export { E as TIME_PICKER_TAG };
 
 //# sourceMappingURL=time-picker.js.map

package/dist/time-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.js","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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"}
+{"version":3,"file":"time-picker.js","names":[],"sources":["../src/inputs/time-picker/time-picker.ts"],"sourcesContent":["import { define, html, inject, prop, ref, 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 { createDropdownPositioner } from '../../headless';\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  /**\n   * Shows an inline green check icon inside the field to confirm the value has\n   * passed validation. Ignored while `error` is set — an error always wins.\n   */\n  success?: boolean;\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 {boolean} success - Show an inline success check icon (suppressed while `error` is set)\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    success: 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    // ── Floating position ────────────────────────────────────────────────────\n    // Same Orbit-powered positioner ore-date-picker's `.calendar` popup uses (see its own\n    // comment for the full rationale) — `fixed` + computed `top`/`left` instead of a static\n    // `position: absolute; top: 100%`, so the dropdown flips/shifts to stay within the nearest\n    // clipping ancestor instead of silently overflowing it.\n    const triggerRef = ref<HTMLElement>();\n    const dropdownRef = ref<HTMLElement>();\n\n    const positioner = createDropdownPositioner({\n      getFloating: () => dropdownRef.value ?? null,\n      getReference: () => triggerRef.value ?? null,\n      matchWidth: false,\n      offsetPx: 4,\n    });\n\n    let stopAutoUpdate: (() => void) | null = null;\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      positioner.update();\n      stopAutoUpdate = positioner.startAutoUpdate?.() ?? null;\n    }\n\n    function closePicker(): void {\n      isOpen.value = false;\n      stopAutoUpdate?.();\n      stopAutoUpdate = null;\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 () => {\n        document.removeEventListener('pointerdown', handleOutsideClick, { capture: true });\n        stopAutoUpdate?.();\n        stopAutoUpdate = null;\n      };\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        ref=\"${triggerRef}\"\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        ?success=\"${() => props.success.value}\"\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        ref=\"${dropdownRef}\"\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":";;;;;;;;;;AAmEA,SAAS,EAAU,GAA2E;CAC5F,IAAI,CAAC,GAAK,OAAO;CAEjB,IAAM,IAAQ,sBAAsB,KAAK,EAAI,KAAK,CAAC;CAEnD,IAAI,CAAC,GAAO,OAAO;CAEnB,IAAM,IAAI,OAAO,EAAM,EAAE,GACnB,IAAI,OAAO,EAAM,EAAE;CAIzB,OAFI,IAAI,KAAK,IAAI,MAAM,IAAI,KAAK,IAAI,KAAW,OAExC;EAAE,OAAO;EAAG,SAAS;CAAE;AAChC;AAGA,SAAS,EAAW,GAAW,GAAmB;CAChD,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG;AACnE;AAGA,SAAS,EAAc,GAAW,GAAW,GAA6B;CACxE,IAAI,MAAW,MAAM;EACnB,IAAM,IAAS,KAAK,KAAK,OAAO,MAC1B,IAAW,IAAI,MAAO,IAAI,KAAK,IAAI;EAEzC,OAAO,GAAG,OAAO,CAAQ,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG;CAC/E;CAEA,OAAO,EAAW,GAAG,CAAC;AACxB;AAGA,SAAS,EACP,GACA,GACA,GACA,GACoC;CACpC,IAAM,IAAQ,IAAI,KAAK,GACjB,IAAY,EAAU,CAAM,GAC5B,IAAY,EAAU,CAAM,GAC5B,IAAU,IAAY,EAAU,QAAQ,KAAK,EAAU,UAAU,GACjE,IAAU,IAAY,EAAU,QAAQ,KAAK,EAAU,UAAU,MACjE,IAAU,KAAK,IAAI,KAAK,IAAI,GAAO,CAAO,GAAG,CAAO;CAE1D,OAAO;EAAE,OAAO,KAAK,MAAM,IAAU,EAAE;EAAG,SAAS,IAAU;CAAG;AAClE;AA0DA,IAAa,IAAkB;AAE/B,EAA2B,GAAiB;CAC1C,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,OAAO,EAAK,OAAO;EACnB,WAAW,EAAK,KAAK,EAAK;EAC1B,QAAQ,EAAK,OAAO;EACpB,OAAO,EAAK,OAAO;EACnB,mBAAmB,EAAK,MAAM,CAAC,SAAS,SAAS,GAAY,OAAO;EACpE,KAAK,EAAK,OAAO;EACjB,KAAK,EAAK,OAAO;EACjB,eAAe,EAAK,OAAO,CAAC;EAC5B,MAAM,EAAK,OAAO;EAClB,aAAa,EAAK,OAAO;EACzB,UAAU,EAAK,KAAK,EAAK;EACzB,SAAS,EAAK,KAAK,EAAK;EACxB,eAAe,EAAK,MAAM,CAAC,MAAM,IAAI,GAAY,IAAI;EACrD,OAAO,EAAK,OAAO;EACnB,SAAS,EAAK,OAA4D;CAC5E;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAA6B,GAIpC,IAAS,EAAO,EAAK,GACrB,IAAe,EAAkD,EAAU,EAAM,MAAM,KAAK,CAAC,GAO7F,IAAa,EAAiB,GAC9B,IAAc,EAAiB,GAE/B,IAAa,EAAyB;GAC1C,mBAAmB,EAAY,SAAS;GACxC,oBAAoB,EAAW,SAAS;GACxC,YAAY;GACZ,UAAU;EACZ,CAAC,GAEG,IAAsC,MAKpC,IAAY,EAAe,GADjB,EAAO,CACiB,CAAO,GACzC,IAAa,EAAU;EAI7B,EAAiB;GACf,UAAU;GACV,cAAc,MAAM,KAAK;GACzB,OAAO,QAAe;IACpB,IAAM,IAAI,EAAa;IAEvB,OAAO,IAAI,EAAW,EAAE,OAAO,EAAE,OAAO,IAAI;GAC9C,CAAC;EACH,CAAC;EAID,IAAM,IAAM,QAAe,EAAM,cAAc,CAAC,SAAS,IAAI,GACvD,IAAa,QAAe,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,EAAM,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,GAEtF,IAAc,QACb,EAAa,QAEX,EAAc,EAAa,MAAM,OAAO,EAAa,MAAM,SAAS,EAAI,KAAoB,IAFnE,EAAM,YAAY,SAAS,EAG5D,GAGK,IAAc,QACd,EAAI,UAAU,OACT,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,IAAI,CAAC,IAG5C,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,CAAC,CAC9C,GAGK,IAAgB,QAAyB;GAC7C,IAAM,IAAO,EAAW,OAClB,IAAiB,CAAC;GAExB,KAAK,IAAI,IAAI,GAAG,IAAI,IAAI,KAAK,GAAM,EAAK,KAAK,CAAC;GAE9C,OAAO;EACT,CAAC,GAEK,IAAW,eAAe,KAAK,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;EAGvE,SAAS,EAAc,GAAqB;GAC1C,IAAI,EAAI,UAAU,MAAM,OAAO;GAE/B,IAAM,IAAM,IAAM;GAElB,OAAO,MAAQ,IAAI,KAAK;EAC1B;EAGA,SAAS,EAAS,GAAqB,GAA6B;GAKlE,OAJI,EAAI,UAAU,OAAa,IAE3B,MAAW,OAAa,MAAgB,KAAK,IAAI,IAE9C,MAAgB,KAAK,KAAK,IAAc;EACjD;EAGA,SAAS,EAAe,GAAW,GAAoB;GACrD,IAAM,IAAQ,IAAI,KAAK,GACjB,IAAY,EAAU,EAAM,IAAI,KAAK,GACrC,IAAY,EAAU,EAAM,IAAI,KAAK;GAM3C,OAFA,GAFI,KAAa,IAAQ,EAAU,QAAQ,KAAK,EAAU,WAEtD,KAAa,IAAQ,EAAU,QAAQ,KAAK,EAAU;EAG5D;EAKA,IAAM,IAAc,EAAe,EAAa,OAAO,SAAS,CAAC,GAE3D,IAAgB,EAAe,EAAa,OAAO,WAAW,CAAC,GAE/D,IAAgB,GAAqB,EAAa,OAAO,SAAS,MAAM,KAAK,OAAO,IAAI,GAI1F,IAAgB,EAAM,MAAM;EAEhC,QAAgB;GACd,IAAM,IAAW,kBAAkB;IACjC,IAAM,IAAU,EAAM,MAAM;IAE5B,IAAI,MAAY,GAAe;KAC7B,IAAgB;KAEhB,IAAM,IAAS,EAAU,CAAO;KAIhC,AAFA,EAAa,QAAQ,GAEjB,MACF,EAAY,QAAQ,EAAO,OAC3B,EAAc,QAAQ,EAAO,SAC7B,EAAc,QAAQ,EAAO,SAAS,KAAK,OAAO;IAEtD;GACF,GAAG,EAAE;GAEL,aAAa,cAAc,CAAQ;EACrC,CAAC;EAID,SAAS,EAAO,GAAa,GAAiB;GAC5C,IAAM,IAAU,EAAU,GAAK,GAAG,EAAM,IAAI,OAAO,EAAM,IAAI,KAAK,GAC5D,IAAU,KAAK,MAAM,EAAQ,UAAU,EAAW,KAAK,IAAI,EAAW,OACtE,IAAa,KAAK,IAAI,GAAS,EAAE;GAGvC,AADA,EAAa,QAAQ;IAAE,OAAO,EAAQ;IAAO,SAAS;GAAW,GACjE,EAAK,UAAU,EAAE,OAAO,EAAW,EAAQ,OAAO,CAAU,EAAE,CAAC;EACjE;EAEA,SAAS,EAAiB,GAAiB;GACzC,IAAM,IAAM,EAAI,UAAU,OAAO,EAAS,EAAY,OAAO,EAAc,KAAK,IAAI,EAAY;GAIhG,AAFA,EAAc,QAAQ,GACtB,EAAO,GAAK,CAAC,GACb,EAAY;EACd;EAIA,SAAS,IAAmB;GAC1B,IAAI,EAAW,OAAO;GAEtB,IAAM,IAAU,EAAa;GAc7B,AAZI,KACF,EAAY,QAAQ,EAAI,UAAU,OAAO,EAAc,EAAQ,KAAK,IAAI,EAAQ,OAChF,EAAc,QAAQ,EAAQ,SAC9B,EAAc,QAAQ,EAAQ,SAAS,KAAK,OAAO,SAEnD,EAAY,QAAQ,EAAI,UAAU,OAAO,KAAK,GAC9C,EAAc,QAAQ,GACtB,EAAc,QAAQ,OAGxB,EAAO,QAAQ,IACf,EAAW,OAAO,GAClB,IAAiB,EAAW,kBAAkB,KAAK;EACrD;EAEA,SAAS,IAAoB;GAG3B,AAFA,EAAO,QAAQ,IACf,IAAiB,GACjB,IAAiB;EACnB;EAEA,SAAS,IAA2B;GAClC,AAAI,EAAO,QAAO,EAAY,IACzB,EAAW;EAClB;EAIA,SAAS,EAAmB,GAAoC;GACzD,EAAO,UAEP,EAAE,aAAa,CAAC,CAAC,SAAS,CAAE,KAAG,EAAY;EAClD;EAEA,SACE,SAAS,iBAAiB,eAAe,GAAoB,EAAE,SAAS,GAAK,CAAC,SAEjE;GAGX,AAFA,SAAS,oBAAoB,eAAe,GAAoB,EAAE,SAAS,GAAK,CAAC,GACjF,IAAiB,GACjB,IAAiB;EACnB,EACD;EAID,SAAS,EAAqB,GAAwB;GAChD,EAAW,UAEX,EAAE,QAAQ,WAAW,EAAE,QAAQ,OACjC,EAAE,eAAe,GACjB,EAAmB,KACV,EAAE,QAAQ,YAAY,EAAO,SACtC,EAAE,eAAe,GACjB,EAAY,MACF,EAAE,QAAQ,eAAe,EAAE,QAAQ,cAAc,CAAC,EAAO,UACnE,EAAE,eAAe,GACjB,EAAW;EAEf;EAEA,SAAS,EAAsB,GAAwB;GACrD,AAAI,EAAE,QAAQ,aACZ,EAAE,eAAe,GACjB,EAAY;EAEhB;EAEA,SAAS,EAAkB,GAAwB;GACjD,IAAM,IAAO,EAAY,OACnB,IAAM,EAAK,QAAQ,EAAY,KAAK;GAE1C,AAAI,EAAE,QAAQ,aACZ,EAAE,eAAe,GACjB,EAAY,QAAQ,GAAM,IAAM,IAAI,EAAK,UAAU,EAAK,WAC/C,EAAE,QAAQ,gBACnB,EAAE,eAAe,GACjB,EAAY,QAAQ,GAAM,IAAM,KAAK,EAAK;EAE9C;EAEA,SAAS,EAAoB,GAAwB;GACnD,IAAM,IAAO,EAAc,OACrB,IAAM,EAAK,QAAQ,EAAc,KAAK;GAE5C,AAAI,EAAE,QAAQ,aACZ,EAAE,eAAe,GACjB,EAAc,QAAQ,GAAM,IAAM,IAAI,EAAK,UAAU,EAAK,WACjD,EAAE,QAAQ,gBACnB,EAAE,eAAe,GACjB,EAAc,QAAQ,GAAM,IAAM,KAAK,EAAK;EAEhD;EAEA,SAAS,EAAoB,GAAwB;GACnD,CAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,iBACnC,EAAE,eAAe,GACjB,EAAc,QAAQ,EAAc,UAAU,OAAO,OAAO;EAEhE;EA0BA,OAtBA,EAAK,EACH,MAAM,EACJ,YAAa,EAAO,QAAQ,KAAO,KAAA,EACrC,EACF,CAAC,GAkBM,CAAI;;;;eAIA,EAAW;;;;;yBAKD,EAAS;gCACF,OAAO,EAAO,KAAK,EAAE;gCACpB,EAAW,QAAQ,SAAS,KAAM;wBAzBtC,EAAY,MA0BZ;wBAzBA,EAAM,MAAM,SAAS,GA0BrB;8BAzBM,EAAM,YAAY,SAAS,GA0BrB;kCAzBH,EAAM,kBAAkB,CAAC,SAAS,QA0BxB;wBAzBnB,EAAM,OAAO,SAAS,KAAA,EA0BtB;uBAzBD,EAAU,MAAM,SAAS,KAAA,EA0B1B;0BAzBI,EAAU,SAAS,SAAS,KAAA,EA0B1B;0BAzBF,EAAM,SAAS,SAAS,KAAA,EA0BtB;yBAzBH,EAAM,OAAO,SAAS,GA0BrB;wBAzBF,EAAM,MAAM,SAAS,GA0BrB;2BAzBI,EAAW,QAAQ,KAAO,KAAA,EA0BxB;2BAzBF,EAAM,SAAS,QAAQ,KAAO,KAAA,EA0B5B;4BAzBD,EAAM,UAAU,QAAQ,KAAO,KAAA,EA0B5B;0BACX,EAAM,QAAQ,MAAM;kBAC5B,EAAmB;oBACjB,EAAqB;;;;;;;eAO1B,EAAY;cACb,EAAS;;4BAEM,EAAM,MAAM,QAAQ,GAAG,EAAM,MAAM,MAAM,kBAAkB,cAAe;sBACjF,EAAO;oBACT,EAAsB;;;;;;sBAO1B,EAAY,MAAM,KAAK,MAAM;GAE3B,IAAM,IAAW,EADL,EAAI,UAAU,OAAO,EAAS,GAAG,EAAc,KAAK,IAAI,GAC/B,EAAc,KAAK;GAExD,OAAO,CAAI;;;;sCAIU,EAAY,UAAU,KAAK,CAAC,IAAW,MAAM,KAAM;4CAC9C,OAAO,EAAY,UAAU,CAAC,EAAE;4CAChC,OAAO,CAAQ,EAAE;4CACjB,EAAS;oCACjB;IACd,AAAK,MAAU,EAAY,QAAQ;GACrC,EAAE;gCACU,EAAkB;sBAC5B,OAAO,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE;;EAEjC,CAAC,EAAE;;;;;;;;;;sBAWH,EAAc,MAAM,KAAK,MAAM;GAE7B,IAAM,IAAW,EADL,EAAI,UAAU,OAAO,EAAS,EAAY,OAAO,EAAc,KAAK,IAAI,EAAY,OAC3D,CAAC;GAEtC,OAAO,CAAI;;;;sCAIU,EAAc,UAAU,KAAK,CAAC,IAAW,MAAM,KAAM;4CAChD,OAAO,EAAc,UAAU,CAAC,EAAE;4CAClC,OAAO,CAAQ,EAAE;4CACjB,EAAS;oCACjB;IACd,AAAK,KAAU,EAAiB,CAAC;GACnC,EAAE;gCACU,EAAoB;sBAC9B,OAAO,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE;;EAEjC,CAAC,EAAE;;;;;kBAMP,EAAI,UAAU,OACV,CAAI;;;sBAGG,CAAC,MAAM,IAAI,CAAC,CAAW,KACvB,MACC,CAAI;;;;4CAIiB,EAAc,UAAU,IAAI,MAAM,KAAM;kDACnC,OAAO,EAAc,UAAU,CAAC,EAAE;0CAC1C;GACd,EAAc,QAAQ;EACxB,EAAE;sCACU,EAAoB;4BAC9B,EAAE;+BAEV,EAAE;;0BAGN,CAAI,GAAG;;;;CAIrB;CAEA,QAAQ,EAAE,gBAAgB,GAAK;CAC/B,QAAQ;EAAC;EAAiB;EAAoB;CAAe;AAC/D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vielzeug/refine",
-  "version": "1.5.4",
+  "version": "1.8.0",
   "description": "Accessible, themeable web components built on Ore custom element primitives",
   "keywords": [
     "web-components",
@@ -23,7 +23,7 @@
     "url": "https://github.com/helmuthdu/vielzeug/issues"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=22"
   },
   "type": "module",
   "customElements": "dist/custom-elements.json",
@@ -285,6 +285,18 @@
       "require": "./dist/input.cjs",
       "types": "./dist/inputs/input/input.d.ts"
     },
+    "./list": {
+      "source": "./src/content/list/list.ts",
+      "import": "./dist/list.js",
+      "require": "./dist/list.cjs",
+      "types": "./dist/content/list/list.d.ts"
+    },
+    "./list-item": {
+      "source": "./src/content/list/list-item.ts",
+      "import": "./dist/list-item.js",
+      "require": "./dist/list-item.cjs",
+      "types": "./dist/content/list/list-item.d.ts"
+    },
     "./menu": {
       "source": "./src/overlay/menu/menu.ts",
       "import": "./dist/menu.js",
@@ -466,13 +478,14 @@
     "build:bundle:watch": "vite build --watch --config vite.bundle.config.ts"
   },
   "dependencies": {
-    "@vielzeug/arsenal": "1.1.1",
-    "@vielzeug/dnd": "1.2.1",
-    "@vielzeug/keymap": "1.1.1",
-    "@vielzeug/orbit": "1.1.1",
-    "@vielzeug/ore": "1.2.2",
-    "@vielzeug/ripple": "1.2.2",
-    "@vielzeug/tempo": "1.0.3",
+    "@vielzeug/arsenal": "1.1.2",
+    "@vielzeug/assay": "1.0.0",
+    "@vielzeug/dnd": "1.2.2",
+    "@vielzeug/keymap": "1.1.2",
+    "@vielzeug/orbit": "1.1.3",
+    "@vielzeug/ore": "1.3.0",
+    "@vielzeug/ripple": "1.3.0",
+    "@vielzeug/tempo": "1.0.5",
     "lucide": "^1.23.0"
   },
   "devDependencies": {

package/dist/headless/dialog-focus.cjs

@@ -1,2 +0,0 @@
-const e=require("./focus.cjs"),t=require("./focus-trap.cjs");var n=n=>{let r=t.createFocusTrap(n.getContainer,{enabled:n.trapEnabled}),i=e.createFocusManager({getInitialFocusSelector:n.getInitialFocusSelector,getReturnFocus:n.getReturnFocus,host:n.host});return{activate(){i.captureReturnFocus(),r.activate(),i.applyInitialFocus()},deactivate(){i.cancelInitialFocus(),r.deactivate(),i.restoreFocus()}}};exports.createDialogFocusControl=n;
-//# sourceMappingURL=dialog-focus.cjs.map

package/dist/headless/dialog-focus.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialog-focus.cjs","names":[],"sources":["../../src/headless/dialog-focus.ts"],"sourcesContent":["import { createFocusManager } from './focus';\nimport { createFocusTrap } from './focus-trap';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type DialogFocusControlOptions = {\n  /** Returns the container element (dialog or shadow root) for focus trapping. */\n  getContainer: () => HTMLElement | ShadowRoot | null;\n  /** Returns the CSS selector for the element to focus on open (e.g. `'[autofocus]'`). */\n  getInitialFocusSelector: () => string | undefined;\n  /** Returns whether focus should be restored to the trigger on close. */\n  getReturnFocus: () => boolean | undefined;\n  /** Host element used to resolve `getInitialFocusSelector`. */\n  host: HTMLElement;\n  /** When provided, the trap only intercepts Tab when this returns `true`. */\n  trapEnabled?: () => boolean;\n};\n\nexport type DialogFocusControl = {\n  /** Capture return focus, activate the trap, and apply initial focus. */\n  activate(): void;\n  /** Deactivate the trap and restore focus. */\n  deactivate(): void;\n};\n\n// ── Factory ───────────────────────────────────────────────────────────────────\n\n/**\n * Combines {@link createFocusTrap} and {@link createFocusManager} into a single\n * `activate / deactivate` API suited for modal dialogs and drawers.\n *\n * @example\n * ```ts\n * const focusCtrl = createDialogFocusControl({\n *   getContainer: () => dialog,\n *   getInitialFocusSelector: () => props['initial-focus'].value,\n *   getReturnFocus: () => props['return-focus'].value !== false,\n *   host: el,\n * });\n *\n * // On open:\n * focusCtrl.activate();\n *\n * // On close:\n * focusCtrl.deactivate();\n * ```\n */\nexport const createDialogFocusControl = (options: DialogFocusControlOptions): DialogFocusControl => {\n  const trap = createFocusTrap(options.getContainer, { enabled: options.trapEnabled });\n\n  const manager = createFocusManager({\n    getInitialFocusSelector: options.getInitialFocusSelector,\n    getReturnFocus: options.getReturnFocus,\n    host: options.host,\n  });\n\n  return {\n    activate() {\n      manager.captureReturnFocus();\n      trap.activate();\n      manager.applyInitialFocus();\n    },\n\n    deactivate() {\n      manager.cancelInitialFocus();\n      trap.deactivate();\n      manager.restoreFocus();\n    },\n  };\n};\n"],"mappings":"6DA+CA,IAAa,EAA4B,GAA2D,CAClG,IAAM,EAAO,EAAA,gBAAgB,EAAQ,aAAc,CAAE,QAAS,EAAQ,WAAY,CAAC,EAE7E,EAAU,EAAA,mBAAmB,CACjC,wBAAyB,EAAQ,wBACjC,eAAgB,EAAQ,eACxB,KAAM,EAAQ,IAChB,CAAC,EAED,MAAO,CACL,UAAW,CACT,EAAQ,mBAAmB,EAC3B,EAAK,SAAS,EACd,EAAQ,kBAAkB,CAC5B,EAEA,YAAa,CACX,EAAQ,mBAAmB,EAC3B,EAAK,WAAW,EAChB,EAAQ,aAAa,CACvB,CACF,CACF"}