@wow-two-beta/ui-vue 0.0.4 → 0.0.5

package/dist/chunks/{ChatComposer.vue_vue_type_script_setup_true_lang-lNcRhKIv.js → ChatComposer.vue_vue_type_script_setup_true_lang-DfeVsj9h.js}

@@ -2,39 +2,39 @@ import { defineComponent, useAttrs, computed, useTemplateRef, openBlock, createE
 import { u as useFormControl, a as useFormControlChrome } from "./FormControlContext-B71MFW26.js";
 import { u as useControlled } from "./useControlled-B6M4kTLn.js";
 import { c as cn } from "./cn-CzDCF-Ah.js";
-import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, Loader2, ChevronDown, ChevronLeft, ChevronRight, Calendar, Clock, UploadCloud, Heading1, Heading2, Bold, Italic, Code, Link2, List, Quote, Copy, Zap, Wallet, Video, User, Trash, Tag, Sun, Star, ShoppingCart, Share2, Settings, Send, Play, Pin, Phone, Pencil, Paperclip, Music, Moon, Mic, MessageCircle, Map as Map$1, Mail, Lock, Lightbulb, Layers, Info, Inbox, Image, Home, Heart, Globe, Folder, File, ExternalLink, Edit, Download, Compass, Coffee, Cloud, Camera, Bookmark, Bell, Flag, Hash, Car, Bike, Utensils, PawPrint, Smile } from "lucide-vue-next";
-import { _ as _sfc_main$1K } from "./Icon.vue_vue_type_script_setup_true_lang-DgwdLCRR.js";
+import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, Loader2, ChevronDown, ChevronLeft, ChevronRight, Calendar, CalendarClock, Clock, UploadCloud, Heading1, Heading2, Bold, Italic, Code, Link2, List, Quote, Copy, Zap, Wallet, Video, User, Trash, Tag, Sun, Star, ShoppingCart, Share2, Settings, Send, Play, Pin, Phone, Pencil, Paperclip, Music, Moon, Mic, MessageCircle, Map as Map$1, Mail, Lock, Lightbulb, Layers, Info, Inbox, Image, Home, Heart, Globe, Folder, File, ExternalLink, Edit, Download, Compass, Coffee, Cloud, Camera, Bookmark, Bell, Flag, Hash, Car, Bike, Utensils, PawPrint, Smile } from "lucide-vue-next";
+import { _ as _sfc_main$1L } from "./Icon.vue_vue_type_script_setup_true_lang-DgwdLCRR.js";
 import { S as Size } from "./StyleTokens-Bkz7Dm5L.js";
-import { _ as _sfc_main$1L } from "./FormControlProvider.vue_vue_type_script_setup_true_lang-Fak7Jv46.js";
+import { _ as _sfc_main$1M } from "./FormControlProvider.vue_vue_type_script_setup_true_lang-Fak7Jv46.js";
 import { tv } from "tailwind-variants";
 import { a as ColorTone, C as ColorExtensions } from "./Environment-CuQav_mw.js";
 import { C as CssExtensions, S as SizePreset } from "./CssExtensions-BzLJG57F.js";
 import { u as useId } from "./useId-CtgAhGrn.js";
 import { S as Side } from "./Side-CSys3p-F.js";
-import { b as _sfc_main$1M, f as _sfc_main$1X, k as ToggleMode, e as _sfc_main$1Y, i as ToggleButtonVariant, h as ToggleButtonGroupVariant, _ as _sfc_main$1_, a as ButtonVariant, B as ButtonShape, d as _sfc_main$20, c as _sfc_main$21 } from "./OptionTileGroup.vue_vue_type_script_setup_true_lang-BGSmXM_u.js";
+import { b as _sfc_main$1N, f as _sfc_main$1Y, k as ToggleMode, e as _sfc_main$1Z, i as ToggleButtonVariant, h as ToggleButtonGroupVariant, _ as _sfc_main$1$, a as ButtonVariant, B as ButtonShape, d as _sfc_main$21, c as _sfc_main$22 } from "./OptionTileGroup.vue_vue_type_script_setup_true_lang-CKSVGCby.js";
 import { O as Orientation } from "./Orientation-u-sYunuG.js";
 import { d as listboxVariants, L as ListboxItemState, a as listboxItemVariants, l as listboxGroupLabelVariants, c as listboxSeparatorVariants, b as listboxEmptyVariants } from "./Listbox.variants-CqAkYsmK.js";
 import { E as Equality } from "./Equality-DIQYQysz.js";
-import { _ as _sfc_main$1N, b as _sfc_main$1P, a as _sfc_main$1Q } from "./PopoverContent.vue_vue_type_script_setup_true_lang-D-OiGICS.js";
+import { _ as _sfc_main$1O, b as _sfc_main$1Q, a as _sfc_main$1R } from "./PopoverContent.vue_vue_type_script_setup_true_lang-DYd617X5.js";
 import { b as useTypeahead, a as useRecentItems } from "./useRecentItems-DFnt5CBy.js";
-import { _ as _sfc_main$1O } from "./Announce.vue_vue_type_script_setup_true_lang-CDTltiIl.js";
-import { s as surfaceVariants } from "./SurfaceStyles-ChdpGRBO.js";
-import { _ as _sfc_main$1R } from "./Portal.vue_vue_type_script_setup_true_lang-CF3R0VCZ.js";
-import { P as Presence } from "./Presence-C7IJvh_P.js";
-import { _ as _sfc_main$1S } from "./AnchoredPositioner.vue_vue_type_script_setup_true_lang-BpBVI2Cu.js";
-import { a as _sfc_main$1T } from "./DismissableLayer.vue_vue_type_script_setup_true_lang-6nRnzsJW.js";
-import { b as buildMonthGrid, M as MONTHS_LONG, c as addMonths, W as WEEKDAYS_SHORT, i as isSameDay, d as isToday, e as addDays, s as sundayIndex, f as startOfMonth, g as today, h as isDateDisabled, j as formatISODate, p as parseISODate, k as formatISODateTime, l as parseISODateTime, m as formatISOTime, n as parseISOTime, o as isInRange, a as _sfc_main$1V, q as daysInMonth, _ as _sfc_main$1W } from "./DateExtensions-QahSUlRy.js";
+import { _ as _sfc_main$1P } from "./Announce.vue_vue_type_script_setup_true_lang-CDTltiIl.js";
+import { s as surfaceVariants } from "./SurfaceStyles-B6W7zdMi.js";
+import { _ as _sfc_main$1S } from "./Portal.vue_vue_type_script_setup_true_lang-CF3R0VCZ.js";
+import { P as Presence } from "./Presence-DE4MlrJz.js";
+import { _ as _sfc_main$1T } from "./AnchoredPositioner.vue_vue_type_script_setup_true_lang-BpBVI2Cu.js";
+import { a as _sfc_main$1U } from "./DismissableLayer.vue_vue_type_script_setup_true_lang-ptH1ttBL.js";
+import { b as buildMonthGrid, M as MONTHS_LONG, c as addMonths, W as WEEKDAYS_SHORT, i as isSameDay, d as isToday, e as addDays, s as sundayIndex, f as startOfMonth, g as today, h as isDateDisabled, j as formatISODate, p as parseISODate, k as formatISODateTime, l as parseISODateTime, m as formatISOTime, n as isInRange, a as _sfc_main$1W, o as daysInMonth, _ as _sfc_main$1X } from "./DateExtensions-C6a-h8ji.js";
 import { Temporal } from "temporal-polyfill";
-import { b as useRovingFocusItem, _ as _sfc_main$1U, O as Orientation$1 } from "./RovingFocusGroup.vue_vue_type_script_setup_true_lang-DCpYSP2V.js";
+import { b as useRovingFocusItem, _ as _sfc_main$1V, O as Orientation$1 } from "./RovingFocusGroup.vue_vue_type_script_setup_true_lang-DCpYSP2V.js";
 import { d as dataAttr } from "./dataAttr-7BR67dTj.js";
 import { a as matchesAcceptType, m as matchesAccept } from "./Accept-BWpCXDmS.js";
 import { Marked } from "marked";
 import { u as useEventListener } from "./useEventListener-gohT6zGs.js";
 import { a as EmojiCategory, E as EmojiCatalog } from "./EmojiCatalog-CR4Lcm43.js";
 import { K as Key } from "./KeyboardExtensions-CQlkK53D.js";
-import { a as _sfc_main$1Z, _ as _sfc_main$1$ } from "./ControlGroup.vue_vue_type_script_setup_true_lang-CV8Xstes.js";
-const _hoisted_1$1j = ["for", "id"];
-const _hoisted_2$I = {
+import { a as _sfc_main$1_, _ as _sfc_main$20 } from "./ControlGroup.vue_vue_type_script_setup_true_lang-CV8Xstes.js";
+const _hoisted_1$1k = ["for", "id"];
+const _hoisted_2$L = {
   key: 0,
   class: "ml-0.5 text-destructive",
   "aria-hidden": "true"
@@ -44,7 +44,7 @@ const SIZE$4 = {
   sm: "text-sm",
   md: "text-sm"
 };
-const _sfc_main$1J = /* @__PURE__ */ defineComponent({
+const _sfc_main$1K = /* @__PURE__ */ defineComponent({
   ...{ name: "Label", inheritAttrs: false },
   __name: "Label",
   props: {
@@ -85,13 +85,13 @@ const _sfc_main$1J = /* @__PURE__ */ defineComponent({
         class: rootClass.value
       }, passthroughAttrs.value), [
         renderSlot(_ctx.$slots, "default"),
-        isRequired.value ? (openBlock(), createElementBlock("span", _hoisted_2$I, "*")) : createCommentVNode("", true)
-      ], 16, _hoisted_1$1j);
+        isRequired.value ? (openBlock(), createElementBlock("span", _hoisted_2$L, "*")) : createCommentVNode("", true)
+      ], 16, _hoisted_1$1k);
     };
   }
 });
-const _hoisted_1$1i = ["id"];
-const _sfc_main$1I = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1j = ["id"];
+const _sfc_main$1J = /* @__PURE__ */ defineComponent({
   ...{ name: "FormHelperText", inheritAttrs: false },
   __name: "FormHelperText",
   props: {
@@ -120,12 +120,12 @@ const _sfc_main$1I = /* @__PURE__ */ defineComponent({
         class: rootClass.value
       }, passthroughAttrs.value), [
         renderSlot(_ctx.$slots, "default")
-      ], 16, _hoisted_1$1i);
+      ], 16, _hoisted_1$1j);
     };
   }
 });
-const _hoisted_1$1h = ["id"];
-const _sfc_main$1H = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1i = ["id"];
+const _sfc_main$1I = /* @__PURE__ */ defineComponent({
   ...{ name: "FormErrorMessage", inheritAttrs: false },
   __name: "FormErrorMessage",
   props: {
@@ -172,11 +172,11 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
             class: "block"
           }, toDisplayString(entry), 1);
         }), 128))
-      ], 16, _hoisted_1$1h)) : createCommentVNode("", true);
+      ], 16, _hoisted_1$1i)) : createCommentVNode("", true);
     };
   }
 });
-const _sfc_main$1G = /* @__PURE__ */ defineComponent({
+const _sfc_main$1H = /* @__PURE__ */ defineComponent({
   ...{ name: "Legend", inheritAttrs: false },
   __name: "Legend",
   setup(__props, { expose: __expose }) {
@@ -278,8 +278,8 @@ const InputRing = {
   /** Refers to a 4px focus ring. */
   Lg: "lg"
 };
-const _hoisted_1$1g = ["id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
-const _sfc_main$1F = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1h = ["id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
+const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   ...{ name: "TextInput", inheritAttrs: false },
   __name: "TextInput",
   props: {
@@ -353,12 +353,12 @@ const _sfc_main$1F = /* @__PURE__ */ defineComponent({
         "aria-invalid": isInvalid.value,
         "aria-describedby": describedBy.value,
         class: rootClass.value
-      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1g);
+      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1h);
     };
   }
 });
-const _hoisted_1$1f = ["id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
-const _sfc_main$1E = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1g = ["id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
+const _sfc_main$1F = /* @__PURE__ */ defineComponent({
   ...{ name: "EmailInput", inheritAttrs: false },
   __name: "EmailInput",
   props: {
@@ -435,12 +435,12 @@ const _sfc_main$1E = /* @__PURE__ */ defineComponent({
         "aria-invalid": isInvalid.value,
         "aria-describedby": describedBy.value,
         class: rootClass.value
-      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1f);
+      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1g);
     };
   }
 });
-const _hoisted_1$1e = ["id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
-const _sfc_main$1D = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1f = ["id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
+const _sfc_main$1E = /* @__PURE__ */ defineComponent({
   ...{ name: "TelInput", inheritAttrs: false },
   __name: "TelInput",
   props: {
@@ -516,12 +516,12 @@ const _sfc_main$1D = /* @__PURE__ */ defineComponent({
         "aria-invalid": isInvalid.value,
         "aria-describedby": describedBy.value,
         class: rootClass.value
-      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1e);
+      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1f);
     };
   }
 });
-const _hoisted_1$1d = ["id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
-const _sfc_main$1C = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1e = ["id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
+const _sfc_main$1D = /* @__PURE__ */ defineComponent({
   ...{ name: "UrlInput", inheritAttrs: false },
   __name: "UrlInput",
   props: {
@@ -598,15 +598,15 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
         "aria-invalid": isInvalid.value,
         "aria-describedby": describedBy.value,
         class: rootClass.value
-      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1d);
+      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1e);
     };
   }
 });
-const _hoisted_1$1c = ["step", "id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
-const _hoisted_2$H = { class: "absolute right-1 top-1/2 flex -translate-y-1/2 items-center" };
+const _hoisted_1$1d = ["step", "id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
+const _hoisted_2$K = { class: "absolute right-1 top-1/2 flex -translate-y-1/2 items-center" };
 const _hoisted_3$u = ["disabled"];
-const _hoisted_4$l = ["disabled"];
-const _sfc_main$1B = /* @__PURE__ */ defineComponent({
+const _hoisted_4$m = ["disabled"];
+const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   ...{ name: "NumberInput", inheritAttrs: false },
   __name: "NumberInput",
   props: {
@@ -697,8 +697,8 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
           "aria-invalid": isInvalid.value,
           "aria-describedby": describedBy.value,
           class: inputClass.value
-        }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1c),
-        createElementVNode("div", _hoisted_2$H, [
+        }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1d),
+        createElementVNode("div", _hoisted_2$K, [
           createElementVNode("button", {
             type: "button",
             disabled: isDisabled.value,
@@ -706,7 +706,7 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
             class: "grid h-7 w-6 place-items-center rounded text-muted-foreground hover:bg-muted disabled:opacity-50",
             onClick: _cache[0] || (_cache[0] = ($event) => adjust(-1))
           }, [
-            createVNode(unref(_sfc_main$1K), {
+            createVNode(unref(_sfc_main$1L), {
               icon: unref(MinusIcon),
               size: 14
             }, null, 8, ["icon"])
@@ -718,19 +718,19 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
             class: "grid h-7 w-6 place-items-center rounded text-muted-foreground hover:bg-muted disabled:opacity-50",
             onClick: _cache[1] || (_cache[1] = ($event) => adjust(1))
           }, [
-            createVNode(unref(_sfc_main$1K), {
+            createVNode(unref(_sfc_main$1L), {
               icon: unref(PlusIcon),
               size: 14
             }, null, 8, ["icon"])
-          ], 8, _hoisted_4$l)
+          ], 8, _hoisted_4$m)
         ])
       ], 2);
     };
   }
 });
-const _hoisted_1$1b = ["type", "autocomplete", "id", "disabled", "required", "readonly", "value", "aria-invalid", "aria-describedby"];
-const _hoisted_2$G = ["disabled", "aria-label", "aria-pressed"];
-const _sfc_main$1A = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1c = ["type", "autocomplete", "id", "disabled", "required", "readonly", "value", "aria-invalid", "aria-describedby"];
+const _hoisted_2$J = ["disabled", "aria-label", "aria-pressed"];
+const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   ...{ name: "PasswordInput", inheritAttrs: false },
   __name: "PasswordInput",
   props: {
@@ -816,7 +816,7 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
           "aria-invalid": isInvalid.value,
           "aria-describedby": describedBy.value,
           class: inputClass.value
-        }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1b),
+        }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1c),
         __props.hasToggle ? (openBlock(), createElementBlock("button", {
           key: 0,
           type: "button",
@@ -826,18 +826,18 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
           class: "absolute right-1 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded text-muted-foreground hover:bg-muted disabled:opacity-50",
           onClick: toggle
         }, [
-          createVNode(unref(_sfc_main$1K), {
+          createVNode(unref(_sfc_main$1L), {
             icon: toggleIcon.value,
             size: 16
           }, null, 8, ["icon"])
-        ], 8, _hoisted_2$G)) : createCommentVNode("", true)
+        ], 8, _hoisted_2$J)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const _hoisted_1$1a = ["id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
-const _hoisted_2$F = ["disabled"];
-const _sfc_main$1z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1b = ["id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
+const _hoisted_2$I = ["disabled"];
+const _sfc_main$1A = /* @__PURE__ */ defineComponent({
   ...{ name: "SearchInput", inheritAttrs: false },
   __name: "SearchInput",
   props: {
@@ -922,7 +922,7 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(wrapperClass.value)
       }, [
-        createVNode(unref(_sfc_main$1K), {
+        createVNode(unref(_sfc_main$1L), {
           icon: unref(SearchIcon),
           size: 16,
           class: "absolute left-3 top-1/2 -translate-y-1/2 text-subtle-foreground"
@@ -939,7 +939,7 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
           "aria-invalid": isInvalid.value,
           "aria-describedby": describedBy.value,
           class: inputClass.value
-        }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1a),
+        }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1b),
         showClear.value ? (openBlock(), createElementBlock("button", {
           key: 0,
           type: "button",
@@ -948,17 +948,17 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
           class: "absolute right-1 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded text-subtle-foreground hover:bg-muted hover:text-muted-foreground",
           onClick: handleClear
         }, [
-          createVNode(unref(_sfc_main$1K), {
+          createVNode(unref(_sfc_main$1L), {
             icon: unref(ClearIcon),
             size: 14
           }, null, 8, ["icon"])
-        ], 8, _hoisted_2$F)) : createCommentVNode("", true)
+        ], 8, _hoisted_2$I)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const _hoisted_1$19 = ["rows", "id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
-const _sfc_main$1y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1a = ["rows", "id", "value", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
+const _sfc_main$1z = /* @__PURE__ */ defineComponent({
   ...{ name: "TextAreaInput", inheritAttrs: false },
   __name: "TextAreaInput",
   props: {
@@ -1034,7 +1034,7 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
         "aria-invalid": isInvalid.value,
         "aria-describedby": describedBy.value,
         class: rootClass.value
-      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$19);
+      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$1a);
     };
   }
 });
@@ -1114,7 +1114,7 @@ const checkboxVariants = tv({
     tone: "primary"
   }
 });
-const _hoisted_1$18 = ["id", "disabled", "required", "checked", "aria-checked", "aria-invalid", "aria-describedby"];
+const _hoisted_1$19 = ["id", "disabled", "required", "checked", "aria-checked", "aria-invalid", "aria-describedby"];
 const COMPONENT_NAME = "Checkbox";
 const BOX_SIZE_CLASS = {
   xs: "h-3.5 w-3.5",
@@ -1181,7 +1181,7 @@ const INDETERMINATE_CHECKED_CLASS = {
     warning: "text-white border-white/80"
   }
 };
-const _sfc_main$1x = /* @__PURE__ */ defineComponent({
+const _sfc_main$1y = /* @__PURE__ */ defineComponent({
   ...{ name: COMPONENT_NAME, inheritAttrs: false },
   __name: "Checkbox",
   props: {
@@ -1284,7 +1284,7 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
           "aria-invalid": isInvalid.value,
           "aria-describedby": describedBy.value,
           class: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
-        }, passthroughAttrs.value, { onChange }), null, 16, _hoisted_1$18),
+        }, passthroughAttrs.value, { onChange }), null, 16, _hoisted_1$19),
         createElementVNode("span", {
           "aria-hidden": "true",
           class: normalizeClass(visualClass.value)
@@ -1301,13 +1301,13 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$17 = ["id", "disabled", "required", "checked", "aria-invalid"];
+const _hoisted_1$18 = ["id", "disabled", "required", "checked", "aria-invalid"];
 const SIZE_CLASS = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6"
 };
-const _sfc_main$1w = /* @__PURE__ */ defineComponent({
+const _sfc_main$1x = /* @__PURE__ */ defineComponent({
   ...{ name: "Radio", inheritAttrs: false },
   __name: "Radio",
   props: {
@@ -1376,7 +1376,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
           checked: unref(isChecked),
           "aria-invalid": isInvalid.value,
           class: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
-        }, passthroughAttrs.value, { onChange }), null, 16, _hoisted_1$17),
+        }, passthroughAttrs.value, { onChange }), null, 16, _hoisted_1$18),
         createElementVNode("span", {
           "aria-hidden": "true",
           class: normalizeClass(unref(visualClass))
@@ -1387,7 +1387,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$16 = ["id", "disabled", "required", "checked", "aria-invalid"];
+const _hoisted_1$17 = ["id", "disabled", "required", "checked", "aria-invalid"];
 const TRACK_CLASS$1 = {
   sm: "h-4 w-7",
   md: "h-5 w-9",
@@ -1403,7 +1403,7 @@ const TRACK_CHECKED_CLASS = {
   md: "peer-checked:[&>span]:translate-x-4",
   lg: "peer-checked:[&>span]:translate-x-5"
 };
-const _sfc_main$1v = /* @__PURE__ */ defineComponent({
+const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   ...{ name: "Switch", inheritAttrs: false },
   __name: "Switch",
   props: {
@@ -1480,7 +1480,7 @@ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
           checked: unref(isChecked),
           "aria-invalid": isInvalid.value,
           class: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
-        }, passthroughAttrs.value, { onChange }), null, 16, _hoisted_1$16),
+        }, passthroughAttrs.value, { onChange }), null, 16, _hoisted_1$17),
         createElementVNode("span", {
           "aria-hidden": "true",
           class: normalizeClass(trackClass.value)
@@ -1493,13 +1493,13 @@ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$15 = ["id", "disabled", "required", "min", "max", "value", "aria-invalid", "aria-describedby"];
+const _hoisted_1$16 = ["id", "disabled", "required", "min", "max", "value", "aria-invalid", "aria-describedby"];
 const TRACK_CLASS = {
   sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1",
   md: "[&::-webkit-slider-runnable-track]:h-1.5 [&::-moz-range-track]:h-1.5",
   lg: "[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2"
 };
-const _sfc_main$1u = /* @__PURE__ */ defineComponent({
+const _sfc_main$1v = /* @__PURE__ */ defineComponent({
   ...{ name: "Slider", inheritAttrs: false },
   __name: "Slider",
   props: {
@@ -1570,11 +1570,11 @@ const _sfc_main$1u = /* @__PURE__ */ defineComponent({
         "aria-invalid": isInvalid.value,
         "aria-describedby": describedBy.value,
         class: rootClass.value
-      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$15);
+      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$16);
     };
   }
 });
-const _sfc_main$1t = /* @__PURE__ */ defineComponent({
+const _sfc_main$1u = /* @__PURE__ */ defineComponent({
   ...{ name: "Field", inheritAttrs: false },
   __name: "Field",
   props: {
@@ -1610,7 +1610,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
     const root = useTemplateRef("root");
     __expose({ el: root });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1L), {
+      return openBlock(), createBlock(unref(_sfc_main$1M), {
         id: parentId.value,
         errors: parentErrors.value,
         "is-invalid": isInvalid.value,
@@ -1624,7 +1624,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
             ref: root,
             class: rootClass.value
           }, passthroughAttrs.value), [
-            hasLabel.value ? (openBlock(), createBlock(_sfc_main$1J, { key: 0 }, {
+            hasLabel.value ? (openBlock(), createBlock(_sfc_main$1K, { key: 0 }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "label", {}, () => [
                   createTextVNode(toDisplayString(__props.label), 1)
@@ -1633,7 +1633,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
               _: 3
             })) : createCommentVNode("", true),
             renderSlot(_ctx.$slots, "default"),
-            showError.value ? (openBlock(), createBlock(_sfc_main$1H, {
+            showError.value ? (openBlock(), createBlock(_sfc_main$1I, {
               key: 1,
               message: hasOwnError.value ? __props.error : void 0
             }, createSlots({ _: 2 }, [
@@ -1644,7 +1644,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1032, ["message"])) : hasHelper.value ? (openBlock(), createBlock(_sfc_main$1I, { key: 2 }, {
+            ]), 1032, ["message"])) : hasHelper.value ? (openBlock(), createBlock(_sfc_main$1J, { key: 2 }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "helper", {}, () => [
                   createTextVNode(toDisplayString(__props.helper), 1)
@@ -1663,14 +1663,14 @@ const CheckboxGroupKey = Symbol("wow-two.checkboxGroup");
 function useCheckboxGroup() {
   return inject(CheckboxGroupKey, null);
 }
-const _hoisted_1$14 = ["for"];
-const _hoisted_2$E = { class: "flex flex-col gap-0.5 text-sm" };
+const _hoisted_1$15 = ["for"];
+const _hoisted_2$H = { class: "flex flex-col gap-0.5 text-sm" };
 const _hoisted_3$t = { class: "font-medium text-foreground" };
-const _hoisted_4$k = {
+const _hoisted_4$l = {
   key: 0,
   class: "text-muted-foreground"
 };
-const _sfc_main$1s = /* @__PURE__ */ defineComponent({
+const _sfc_main$1t = /* @__PURE__ */ defineComponent({
   ...{ name: "CheckboxField", inheritAttrs: false },
   __name: "CheckboxField",
   props: {
@@ -1733,13 +1733,13 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
         for: inputId.value,
         class: normalizeClass(wrapperClass.value)
       }, [
-        isInGroup.value ? (openBlock(), createBlock(unref(_sfc_main$1L), {
+        isInGroup.value ? (openBlock(), createBlock(unref(_sfc_main$1M), {
           key: 0,
           "is-disabled": groupDisabled.value,
           "is-invalid": groupInvalid.value
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$1x, mergeProps({
+            createVNode(_sfc_main$1y, mergeProps({
               ref_key: "inner",
               ref: inner
             }, { ...checkboxProps.value, ...passthroughAttrs.value }, {
@@ -1750,7 +1750,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
             }), null, 16, ["id", "checked", "class"])
           ]),
           _: 1
-        }, 8, ["is-disabled", "is-invalid"])) : (openBlock(), createBlock(_sfc_main$1x, mergeProps({
+        }, 8, ["is-disabled", "is-invalid"])) : (openBlock(), createBlock(_sfc_main$1y, mergeProps({
           key: 1,
           ref_key: "inner",
           ref: inner
@@ -1758,19 +1758,19 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
           id: inputId.value,
           class: checkboxClass.value
         }), null, 16, ["id", "class"])),
-        createElementVNode("span", _hoisted_2$E, [
+        createElementVNode("span", _hoisted_2$H, [
           createElementVNode("span", _hoisted_3$t, [
             renderSlot(_ctx.$slots, "label", {}, () => [
               createTextVNode(toDisplayString(__props.label), 1)
             ])
           ]),
-          hasDescription.value ? (openBlock(), createElementBlock("span", _hoisted_4$k, [
+          hasDescription.value ? (openBlock(), createElementBlock("span", _hoisted_4$l, [
             renderSlot(_ctx.$slots, "description", {}, () => [
               createTextVNode(toDisplayString(__props.description), 1)
             ])
           ])) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$14);
+      ], 10, _hoisted_1$15);
     };
   }
 });
@@ -1778,14 +1778,14 @@ const RadioGroupKey = Symbol("wow-two.radioGroup");
 function useRadioGroup() {
   return inject(RadioGroupKey, null);
 }
-const _hoisted_1$13 = ["for"];
-const _hoisted_2$D = { class: "flex flex-col gap-0.5 text-sm" };
+const _hoisted_1$14 = ["for"];
+const _hoisted_2$G = { class: "flex flex-col gap-0.5 text-sm" };
 const _hoisted_3$s = { class: "font-medium text-foreground" };
-const _hoisted_4$j = {
+const _hoisted_4$k = {
   key: 0,
   class: "text-muted-foreground"
 };
-const _sfc_main$1r = /* @__PURE__ */ defineComponent({
+const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   ...{ name: "RadioField", inheritAttrs: false },
   __name: "RadioField",
   props: {
@@ -1845,13 +1845,13 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
         for: inputId.value,
         class: normalizeClass(wrapperClass.value)
       }, [
-        isInGroup.value ? (openBlock(), createBlock(unref(_sfc_main$1L), {
+        isInGroup.value ? (openBlock(), createBlock(unref(_sfc_main$1M), {
           key: 0,
           "is-disabled": groupDisabled.value,
           "is-invalid": groupInvalid.value
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$1w, mergeProps({
+            createVNode(_sfc_main$1x, mergeProps({
               ref_key: "inner",
               ref: inner
             }, { ...radioProps.value, ...passthroughAttrs.value }, {
@@ -1863,7 +1863,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
             }), null, 16, ["id", "name", "checked", "class"])
           ]),
           _: 1
-        }, 8, ["is-disabled", "is-invalid"])) : (openBlock(), createBlock(_sfc_main$1w, mergeProps({
+        }, 8, ["is-disabled", "is-invalid"])) : (openBlock(), createBlock(_sfc_main$1x, mergeProps({
           key: 1,
           ref_key: "inner",
           ref: inner
@@ -1871,30 +1871,30 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
           id: inputId.value,
           class: radioClass.value
         }), null, 16, ["id", "class"])),
-        createElementVNode("span", _hoisted_2$D, [
+        createElementVNode("span", _hoisted_2$G, [
           createElementVNode("span", _hoisted_3$s, [
             renderSlot(_ctx.$slots, "label", {}, () => [
               createTextVNode(toDisplayString(__props.label), 1)
             ])
           ]),
-          hasDescription.value ? (openBlock(), createElementBlock("span", _hoisted_4$j, [
+          hasDescription.value ? (openBlock(), createElementBlock("span", _hoisted_4$k, [
             renderSlot(_ctx.$slots, "description", {}, () => [
               createTextVNode(toDisplayString(__props.description), 1)
             ])
           ])) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$13);
+      ], 10, _hoisted_1$14);
     };
   }
 });
-const _hoisted_1$12 = ["for"];
-const _hoisted_2$C = { class: "flex flex-col gap-0.5 text-sm" };
+const _hoisted_1$13 = ["for"];
+const _hoisted_2$F = { class: "flex flex-col gap-0.5 text-sm" };
 const _hoisted_3$r = { class: "font-medium text-foreground" };
-const _hoisted_4$i = {
+const _hoisted_4$j = {
   key: 0,
   class: "text-muted-foreground"
 };
-const _sfc_main$1q = /* @__PURE__ */ defineComponent({
+const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   ...{ name: "SwitchField", inheritAttrs: false },
   __name: "SwitchField",
   props: {
@@ -1949,30 +1949,30 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
         for: inputId.value,
         class: normalizeClass(wrapperClass.value)
       }, [
-        createVNode(_sfc_main$1v, mergeProps({
+        createVNode(_sfc_main$1w, mergeProps({
           ref_key: "inner",
           ref: inner
         }, { ...switchProps.value, ...passthroughAttrs.value }, {
           id: inputId.value,
           class: switchClass.value
         }), null, 16, ["id", "class"]),
-        createElementVNode("span", _hoisted_2$C, [
+        createElementVNode("span", _hoisted_2$F, [
           createElementVNode("span", _hoisted_3$r, [
             renderSlot(_ctx.$slots, "label", {}, () => [
               createTextVNode(toDisplayString(__props.label), 1)
             ])
           ]),
-          hasDescription.value ? (openBlock(), createElementBlock("span", _hoisted_4$i, [
+          hasDescription.value ? (openBlock(), createElementBlock("span", _hoisted_4$j, [
             renderSlot(_ctx.$slots, "description", {}, () => [
               createTextVNode(toDisplayString(__props.description), 1)
             ])
           ])) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$12);
+      ], 10, _hoisted_1$13);
     };
   }
 });
-const _sfc_main$1p = /* @__PURE__ */ defineComponent({
+const _sfc_main$1q = /* @__PURE__ */ defineComponent({
   ...{ name: "CheckboxGroup", inheritAttrs: false },
   __name: "CheckboxGroup",
   props: {
@@ -2033,7 +2033,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
     const root = useTemplateRef("root");
     __expose({ el: computed(() => root.value?.el ?? null) });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1M, mergeProps({
+      return openBlock(), createBlock(_sfc_main$1N, mergeProps({
         ref_key: "root",
         ref: root,
         id: groupId.value,
@@ -2044,7 +2044,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
         class: rootClass.value
       }, passthroughAttrs.value), {
         default: withCtx(() => [
-          hasLegend.value ? (openBlock(), createBlock(_sfc_main$1G, { key: 0 }, {
+          hasLegend.value ? (openBlock(), createBlock(_sfc_main$1H, { key: 0 }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "legend", {}, () => [
                 createTextVNode(toDisplayString(__props.legend), 1)
@@ -2063,7 +2063,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1o = /* @__PURE__ */ defineComponent({
+const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   ...{ name: "RadioGroup", inheritAttrs: false },
   __name: "RadioGroup",
   props: {
@@ -2125,7 +2125,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
     const root = useTemplateRef("root");
     __expose({ el: computed(() => root.value?.el ?? null) });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1M, mergeProps({
+      return openBlock(), createBlock(_sfc_main$1N, mergeProps({
         ref_key: "root",
         ref: root,
         role: "radiogroup",
@@ -2137,7 +2137,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
         class: rootClass.value
       }, passthroughAttrs.value), {
         default: withCtx(() => [
-          hasLegend.value ? (openBlock(), createBlock(_sfc_main$1G, { key: 0 }, {
+          hasLegend.value ? (openBlock(), createBlock(_sfc_main$1H, { key: 0 }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "legend", {}, () => [
                 createTextVNode(toDisplayString(__props.legend), 1)
@@ -2156,7 +2156,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$11 = ["type", "inputmode", "aria-label", "id", "aria-describedby", "aria-required", "aria-invalid", "disabled", "readonly", "value", "onInput", "onKeydown"];
+const _hoisted_1$12 = ["type", "inputmode", "aria-label", "id", "aria-describedby", "aria-required", "aria-invalid", "disabled", "readonly", "value", "onInput", "onKeydown"];
 const PinInputType = {
   /** Refers to digits only (`0-9`). */
   Numeric: "numeric",
@@ -2168,7 +2168,7 @@ const SIZE$3 = {
   md: "h-11 w-11 text-lg",
   lg: "h-14 w-14 text-xl"
 };
-const _sfc_main$1n = /* @__PURE__ */ defineComponent({
+const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   ...{ name: "PinInput", inheritAttrs: false },
   __name: "PinInput",
   props: {
@@ -2296,14 +2296,15 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
             onInput: ($event) => onCellInput(i, $event),
             onKeydown: ($event) => onCellKeydown(i, $event),
             onPaste
-          }, null, 42, _hoisted_1$11);
+          }, null, 42, _hoisted_1$12);
         }), 128))
       ], 16);
     };
   }
 });
-const _hoisted_1$10 = ["value", "id", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
+const _hoisted_1$11 = ["value", "id", "disabled", "required", "readonly", "aria-invalid", "aria-describedby"];
 function applyMask(raw, mask) {
+  if (!mask) return raw;
   let out = "";
   let r = 0;
   for (let m = 0; m < mask.length && r < raw.length; m++) {
@@ -2341,7 +2342,7 @@ function applyMask(raw, mask) {
   }
   return out;
 }
-const _sfc_main$1m = /* @__PURE__ */ defineComponent({
+const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   ...{ name: "MaskedInput", inheritAttrs: false },
   __name: "MaskedInput",
   props: {
@@ -2409,12 +2410,12 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
         "aria-invalid": isInvalid.value,
         "aria-describedby": describedBy.value,
         class: rootClass.value
-      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$10);
+      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$11);
     };
   }
 });
-const _hoisted_1$$ = { class: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground" };
-const _sfc_main$1l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$10 = { class: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground" };
+const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   ...{ name: "CurrencyInput", inheritAttrs: false },
   __name: "CurrencyInput",
   props: {
@@ -2451,8 +2452,8 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(wrapperClass.value)
       }, [
-        createElementVNode("span", _hoisted_1$$, toDisplayString(__props.symbol), 1),
-        createVNode(_sfc_main$1B, mergeProps({
+        createElementVNode("span", _hoisted_1$10, toDisplayString(__props.symbol), 1),
+        createVNode(_sfc_main$1C, mergeProps({
           ref_key: "inner",
           ref: inner
         }, { ...numberProps.value, ...passthroughAttrs.value }, { class: "pl-7" }), null, 16)
@@ -2460,7 +2461,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1k = /* @__PURE__ */ defineComponent({
+const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   ...{ name: "PercentInput", inheritAttrs: false },
   __name: "PercentInput",
   props: {
@@ -2492,7 +2493,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(wrapperClass.value)
       }, [
-        createVNode(_sfc_main$1B, mergeProps({
+        createVNode(_sfc_main$1C, mergeProps({
           ref_key: "inner",
           ref: inner
         }, { ...props, ...passthroughAttrs.value }, { class: "pr-16" }), null, 16),
@@ -2501,7 +2502,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1j = /* @__PURE__ */ defineComponent({
+const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   ...{ name: "CharacterCount", inheritAttrs: false },
   __name: "CharacterCount",
   props: {
@@ -2536,7 +2537,7 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1i = /* @__PURE__ */ defineComponent({
+const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   ...{ name: "InputAddon", inheritAttrs: false },
   __name: "InputAddon",
   props: {
@@ -2555,9 +2556,15 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     );
     const rootClass = computed(
       () => cn(
-        "inline-flex w-full items-stretch [&>*]:rounded-none",
+        "inline-flex w-full items-stretch rounded-md [&>*]:rounded-none",
         "[&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md",
         "[&>*:not(:first-child)]:-ml-px",
+        /* The group is the control, so the focus ring belongs to the group. Past the React
+           original, where the ring landed on the input segment alone and the addons read as
+           separate boxes hanging off a highlighted middle. The segment's own ring is
+           suppressed; it is raised instead so its border paints over its neighbours'. */
+        "[&:has(>*:focus-visible)]:ring-2 [&:has(>*:focus-visible)]:ring-ring",
+        "[&>*:focus-visible]:z-10 [&>*:focus-visible]:relative [&>*:focus-visible]:ring-0",
         attrs.class
       )
     );
@@ -2591,7 +2598,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1h = /* @__PURE__ */ defineComponent({
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   ...{ name: "InputGroup", inheritAttrs: false },
   __name: "InputGroup",
   props: {
@@ -2607,8 +2614,12 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     );
     const rootClass = computed(
       () => cn(
-        "inline-flex w-full",
+        "inline-flex w-full rounded-md",
         isHorizontal.value ? "flex-row" : "flex-col",
+        /* Same contract as `InputAddon`: the joined row is one control, so the ring goes round
+           the whole group and the focused segment only rises above its neighbours' borders. */
+        "[&:has(>*:focus-visible)]:ring-2 [&:has(>*:focus-visible)]:ring-ring",
+        "[&>*:focus-visible]:z-10 [&>*:focus-visible]:relative [&>*:focus-visible]:ring-0",
         isHorizontal.value ? "[&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px" : "[&>*]:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px",
         attrs.class
       )
@@ -2626,12 +2637,12 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$_ = { class: "flex items-center justify-between" };
-const _hoisted_2$B = {
+const _hoisted_1$$ = { class: "flex items-center justify-between" };
+const _hoisted_2$E = {
   key: 0,
   class: "text-xs text-muted-foreground"
 };
-const _sfc_main$1g = /* @__PURE__ */ defineComponent({
+const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   ...{ name: "LabeledInput", inheritAttrs: false },
   __name: "LabeledInput",
   props: {
@@ -2657,8 +2668,8 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
         ref: root,
         class: rootClass.value
       }, passthroughAttrs.value), [
-        createElementVNode("div", _hoisted_1$_, [
-          createVNode(_sfc_main$1J, { for: unref(generatedId) }, {
+        createElementVNode("div", _hoisted_1$$, [
+          createVNode(_sfc_main$1K, { for: unref(generatedId) }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "label", {}, () => [
                 createTextVNode(toDisplayString(__props.label), 1)
@@ -2666,7 +2677,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }, 8, ["for"]),
-          hasTrailing.value ? (openBlock(), createElementBlock("span", _hoisted_2$B, [
+          hasTrailing.value ? (openBlock(), createElementBlock("span", _hoisted_2$E, [
             renderSlot(_ctx.$slots, "trailing", {}, () => [
               createTextVNode(toDisplayString(__props.trailing), 1)
             ])
@@ -2677,13 +2688,13 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$Z = ["for"];
-const _hoisted_2$A = { class: "flex items-start gap-3 pr-7" };
+const _hoisted_1$_ = ["for"];
+const _hoisted_2$D = { class: "flex items-start gap-3 pr-7" };
 const _hoisted_3$q = {
   key: 0,
   class: "text-muted-foreground"
 };
-const _hoisted_4$h = { class: "min-w-0 flex-1" };
+const _hoisted_4$i = { class: "min-w-0 flex-1" };
 const _hoisted_5$b = { class: "font-medium text-foreground" };
 const _hoisted_6$8 = {
   key: 0,
@@ -2694,7 +2705,7 @@ const SIZE$2 = {
   md: "p-4 text-sm",
   lg: "p-5 text-base"
 };
-const _sfc_main$1f = /* @__PURE__ */ defineComponent({
+const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   ...{ name: "ChoiceCard", inheritAttrs: false },
   __name: "ChoiceCard",
   props: {
@@ -2761,13 +2772,13 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
         for: inputId.value,
         class: normalizeClass(rootClass.value)
       }, [
-        isInGroup.value ? (openBlock(), createBlock(unref(_sfc_main$1L), {
+        isInGroup.value ? (openBlock(), createBlock(unref(_sfc_main$1M), {
           key: 0,
           "is-disabled": groupDisabled.value,
           "is-invalid": groupInvalid.value
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$1w, mergeProps({
+            createVNode(_sfc_main$1x, mergeProps({
               ref_key: "inner",
               ref: inner
             }, { ...radioProps.value, ...passthroughAttrs.value }, {
@@ -2779,7 +2790,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
             }), null, 16, ["id", "name", "checked"])
           ]),
           _: 1
-        }, 8, ["is-disabled", "is-invalid"])) : (openBlock(), createBlock(_sfc_main$1w, mergeProps({
+        }, 8, ["is-disabled", "is-invalid"])) : (openBlock(), createBlock(_sfc_main$1x, mergeProps({
           key: 1,
           ref_key: "inner",
           ref: inner
@@ -2787,13 +2798,13 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
           id: inputId.value,
           class: "absolute right-3 top-3"
         }), null, 16, ["id"])),
-        createElementVNode("div", _hoisted_2$A, [
+        createElementVNode("div", _hoisted_2$D, [
           hasIcon.value ? (openBlock(), createElementBlock("span", _hoisted_3$q, [
             renderSlot(_ctx.$slots, "icon", {}, () => [
               createTextVNode(toDisplayString(__props.icon), 1)
             ])
           ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4$h, [
+          createElementVNode("div", _hoisted_4$i, [
             createElementVNode("div", _hoisted_5$b, [
               renderSlot(_ctx.$slots, "label", {}, () => [
                 createTextVNode(toDisplayString(__props.label), 1)
@@ -2806,15 +2817,15 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true)
           ])
         ])
-      ], 10, _hoisted_1$Z);
+      ], 10, _hoisted_1$_);
     };
   }
 });
-const _hoisted_1$Y = {
+const _hoisted_1$Z = {
   class: "flex gap-1",
   "aria-hidden": "true"
 };
-const _hoisted_2$z = {
+const _hoisted_2$C = {
   key: 0,
   class: "text-xs text-muted-foreground"
 };
@@ -2829,7 +2840,7 @@ function scorePassword(pw) {
   if (/[^A-Za-z0-9]/.test(pw)) score++;
   return Math.min(4, score);
 }
-const _sfc_main$1e = /* @__PURE__ */ defineComponent({
+const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   ...{ name: "PasswordStrength", inheritAttrs: false },
   __name: "PasswordStrength",
   props: {
@@ -2862,7 +2873,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
         ref: root,
         class: rootClass.value
       }, passthroughAttrs.value), [
-        createElementVNode("div", _hoisted_1$Y, [
+        createElementVNode("div", _hoisted_1$Z, [
           (openBlock(), createElementBlock(Fragment, null, renderList(4, (i) => {
             return createElementVNode("div", {
               key: i,
@@ -2870,13 +2881,13 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
             }, null, 2);
           }), 64))
         ]),
-        isLabelShown.value ? (openBlock(), createElementBlock("div", _hoisted_2$z, toDisplayString(label.value), 1)) : createCommentVNode("", true)
+        isLabelShown.value ? (openBlock(), createElementBlock("div", _hoisted_2$C, toDisplayString(label.value), 1)) : createCommentVNode("", true)
       ], 16);
     };
   }
 });
-const _hoisted_1$X = ["disabled", "aria-describedby"];
-const _hoisted_2$y = ["id", "disabled", "aria-invalid", "aria-describedby", "aria-required"];
+const _hoisted_1$Y = ["disabled", "aria-describedby"];
+const _hoisted_2$B = ["id", "disabled", "aria-invalid", "aria-describedby", "aria-required"];
 const _hoisted_3$p = {
   key: 0,
   class: "truncate text-sm text-muted-foreground"
@@ -2886,7 +2897,7 @@ const SIZE$1 = {
   md: "h-10 px-4 text-sm",
   lg: "h-12 px-6 text-base"
 };
-const _sfc_main$1d = /* @__PURE__ */ defineComponent({
+const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   ...{ name: "FilePicker", inheritAttrs: false },
   __name: "FilePicker",
   props: {
@@ -2944,14 +2955,14 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
           class: normalizeClass(buttonClass.value),
           onClick: openPicker
         }, [
-          createVNode(unref(_sfc_main$1K), {
+          createVNode(unref(_sfc_main$1L), {
             icon: unref(UploadIcon),
             size: 16
           }, null, 8, ["icon"]),
           renderSlot(_ctx.$slots, "label", {}, () => [
             createTextVNode(toDisplayString(__props.label), 1)
           ])
-        ], 10, _hoisted_1$X),
+        ], 10, _hoisted_1$Y),
         createElementVNode("input", mergeProps({
           ref_key: "input",
           ref: input,
@@ -2962,7 +2973,7 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
           "aria-describedby": describedBy.value,
           "aria-required": isRequired.value,
           class: "sr-only"
-        }, passthroughAttrs.value, { onChange }), null, 16, _hoisted_2$y),
+        }, passthroughAttrs.value, { onChange }), null, 16, _hoisted_2$B),
         hasPreview.value ? (openBlock(), createElementBlock("span", _hoisted_3$p, [
           renderSlot(_ctx.$slots, "preview", {}, () => [
             createTextVNode(toDisplayString(__props.preview), 1)
@@ -2991,8 +3002,8 @@ function useListboxContext() {
   if (!ctx) throw new Error("Listbox.Item / Group / Separator must be used inside <Listbox>");
   return ctx;
 }
-const _hoisted_1$W = ["tabindex", "aria-multiselectable", "aria-activedescendant", "aria-disabled"];
-const _sfc_main$1c = /* @__PURE__ */ defineComponent({
+const _hoisted_1$X = ["tabindex", "aria-multiselectable", "aria-activedescendant", "aria-disabled"];
+const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   ...{ name: "Listbox", inheritAttrs: false },
   __name: "Listbox",
   props: {
@@ -3189,12 +3200,12 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
         class: rootClass.value
       }, passthroughAttrs.value, { onKeydown: handleKeyDown }), [
         renderSlot(_ctx.$slots, "default")
-      ], 16, _hoisted_1$W);
+      ], 16, _hoisted_1$X);
     };
   }
 });
-const _hoisted_1$V = ["id", "aria-selected", "aria-disabled", "data-active", "data-selected", "data-disabled"];
-const _hoisted_2$x = {
+const _hoisted_1$W = ["id", "aria-selected", "aria-disabled", "data-active", "data-selected", "data-disabled"];
+const _hoisted_2$A = {
   key: 0,
   class: "h-2 w-2 rounded-full bg-primary"
 };
@@ -3202,7 +3213,7 @@ const _hoisted_3$o = {
   "data-listbox-item-content": "",
   class: "flex min-w-0 flex-1 items-center gap-2"
 };
-const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   ...{ name: "ListboxItem", inheritAttrs: false },
   __name: "ListboxItem",
   props: {
@@ -3287,7 +3298,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
             )
           )
         }, [
-          isSelected.value ? (openBlock(), createElementBlock("span", _hoisted_2$x)) : createCommentVNode("", true)
+          isSelected.value ? (openBlock(), createElementBlock("span", _hoisted_2$A)) : createCommentVNode("", true)
         ], 2)) : indicator.value === unref(ListboxIndicator).Dot ? (openBlock(), createElementBlock("span", {
           key: 2,
           "aria-hidden": "true",
@@ -3300,13 +3311,13 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
           key: 3,
           class: normalizeClass(unref(cn)("h-4 w-4 shrink-0", !unref(ctx).isMultiple && "opacity-80"))
         }, null, 8, ["class"])) : createCommentVNode("", true)
-      ], 16, _hoisted_1$V);
+      ], 16, _hoisted_1$W);
     };
   }
 });
-const _hoisted_1$U = ["aria-labelledby"];
-const _hoisted_2$w = ["id"];
-const _sfc_main$1a = /* @__PURE__ */ defineComponent({
+const _hoisted_1$V = ["aria-labelledby"];
+const _hoisted_2$z = ["id"];
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   ...{ name: "ListboxGroup" },
   __name: "ListboxGroup",
   props: {
@@ -3330,13 +3341,13 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "label", {}, () => [
             createTextVNode(toDisplayString(__props.label), 1)
           ])
-        ], 10, _hoisted_2$w)) : createCommentVNode("", true),
+        ], 10, _hoisted_2$z)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default")
-      ], 8, _hoisted_1$U);
+      ], 8, _hoisted_1$V);
     };
   }
 });
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   ...{ name: "ListboxSeparator" },
   __name: "ListboxSeparator",
   setup(__props) {
@@ -3348,7 +3359,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   ...{ name: "ListboxEmpty", inheritAttrs: false },
   __name: "ListboxEmpty",
   setup(__props) {
@@ -3379,8 +3390,8 @@ function useSelectContext() {
   if (!ctx) throw new Error("Select.* must be used inside <Select>");
   return ctx;
 }
-const _hoisted_1$T = ["name", "value"];
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$U = ["name", "value"];
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   ...{ name: "Select", inheritAttrs: false },
   __name: "Select",
   props: {
@@ -3606,7 +3617,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
     const isOpenNow = computed(() => openCtl.value.value);
     const serializedKey = computed(() => serializeKeyFn.value(keyCtl.value.value));
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1N), {
+      return openBlock(), createBlock(unref(_sfc_main$1O), {
         open: isOpenNow.value,
         placement: __props.placement,
         offset: 4,
@@ -3619,7 +3630,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
             type: "hidden",
             name: __props.name,
             value: serializedKey.value
-          }, null, 8, _hoisted_1$T)) : createCommentVNode("", true)
+          }, null, 8, _hoisted_1$U)) : createCommentVNode("", true)
         ]),
         _: 3
       }, 8, ["open", "placement"]);
@@ -3648,11 +3659,11 @@ const selectTriggerVariants = tv({
     }
   }
 });
-const _hoisted_1$S = {
+const _hoisted_1$T = {
   key: 0,
   class: "truncate"
 };
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   ...{ name: "SelectValue" },
   __name: "SelectValue",
   props: {
@@ -3671,7 +3682,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     });
     const valueClass = computed(() => cn("truncate text-left", !resolvedLabel.value && "text-muted-foreground"));
     return (_ctx, _cache) => {
-      return hasOverride.value ? (openBlock(), createElementBlock("span", _hoisted_1$S, [
+      return hasOverride.value ? (openBlock(), createElementBlock("span", _hoisted_1$T, [
         renderSlot(_ctx.$slots, "default", {}, () => [
           createTextVNode(toDisplayString(__props.label), 1)
         ])
@@ -3688,10 +3699,10 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$R = { class: "relative inline-flex w-full" };
-const _hoisted_2$v = ["id", "disabled", "aria-busy", "aria-controls", "aria-activedescendant", "aria-invalid", "aria-labelledby", "aria-describedby", "data-state"];
+const _hoisted_1$S = { class: "relative inline-flex w-full" };
+const _hoisted_2$y = ["id", "disabled", "aria-busy", "aria-controls", "aria-activedescendant", "aria-invalid", "aria-labelledby", "aria-describedby", "data-state"];
 const _hoisted_3$n = { class: "ml-auto flex shrink-0 items-center gap-1.5" };
-const _hoisted_4$g = ["aria-label"];
+const _hoisted_4$h = ["aria-label"];
 const TRIGGER_ICON_CLASSES = {
   xs: "h-3 w-3",
   sm: "h-3.5 w-3.5",
@@ -3723,7 +3734,7 @@ function triggerDataState(open, isLoading, isDisabled, isInvalid) {
   if (isInvalid) return "invalid";
   return void 0;
 }
-const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   ...{ name: "SelectTrigger", inheritAttrs: false },
   __name: "SelectTrigger",
   props: {
@@ -3796,14 +3807,14 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     const root = useTemplateRef("root");
     __expose({ el: root });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", _hoisted_1$R, [
-        createVNode(unref(_sfc_main$1O), null, {
+      return openBlock(), createElementBlock("span", _hoisted_1$S, [
+        createVNode(unref(_sfc_main$1P), null, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(unref(ctx).isLoading ? unref(ctx).loadingLabel : ""), 1)
           ]),
           _: 1
         }),
-        createVNode(unref(_sfc_main$1P), { "as-child": "" }, {
+        createVNode(unref(_sfc_main$1Q), { "as-child": "" }, {
           default: withCtx(() => [
             createElementVNode("button", mergeProps({
               ref_key: "root",
@@ -3822,7 +3833,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
               class: buttonClass.value
             }, passthroughAttrs.value, { onKeydown: handleTriggerKeyDown }), [
               renderSlot(_ctx.$slots, "default", {}, () => [
-                createVNode(_sfc_main$16)
+                createVNode(_sfc_main$17)
               ]),
               createElementVNode("span", _hoisted_3$n, [
                 showClear.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -3843,7 +3854,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
                   class: normalizeClass(chevronClass.value)
                 }, null, 8, ["class"]))
               ])
-            ], 16, _hoisted_2$v)
+            ], 16, _hoisted_2$y)
           ]),
           _: 3
         }),
@@ -3857,16 +3868,16 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
           createVNode(unref(ClearIcon), {
             class: normalizeClass(iconClass.value)
           }, null, 8, ["class"])
-        ], 10, _hoisted_4$g)) : createCommentVNode("", true)
+        ], 10, _hoisted_4$h)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$Q = {
+const _hoisted_1$R = {
   key: 0,
   class: "border-b border-border p-1"
 };
-const _hoisted_2$u = {
+const _hoisted_2$x = {
   key: 0,
   role: "status",
   class: "flex items-center gap-2 px-2 py-2 text-sm text-subtle-foreground"
@@ -3880,7 +3891,7 @@ const FORWARDED_NAV_KEYS = /* @__PURE__ */ new Set([
   "PageUp",
   "Enter"
 ]);
-const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   ...{ name: "SelectContent", inheritAttrs: false },
   __name: "SelectContent",
   props: {
@@ -3940,7 +3951,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
     );
     const selectedForListbox = computed(() => ctx.selectedKey ?? void 0);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1Q), {
+      return openBlock(), createBlock(unref(_sfc_main$1R), {
         variant: __props.variant,
         tone: __props.tone,
         radius: __props.radius,
@@ -3949,8 +3960,8 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(contentClass.value)
       }, {
         default: withCtx(() => [
-          __props.isSearchable ? (openBlock(), createElementBlock("div", _hoisted_1$Q, [
-            createVNode(_sfc_main$1z, {
+          __props.isSearchable ? (openBlock(), createElementBlock("div", _hoisted_1$R, [
+            createVNode(_sfc_main$1A, {
               size: "sm",
               autofocus: "",
               role: "combobox",
@@ -3967,7 +3978,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
               onClear: _cache[1] || (_cache[1] = ($event) => unref(ctx).setQuery(""))
             }, null, 8, ["aria-controls", "aria-activedescendant", "model-value", "placeholder"])
           ])) : createCommentVNode("", true),
-          createVNode(_sfc_main$1c, {
+          createVNode(_sfc_main$1d, {
             ref_key: "listbox",
             ref: listbox,
             id: unref(ctx).listboxId,
@@ -3980,12 +3991,12 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
             onActiveChange: _cache[2] || (_cache[2] = ($event) => unref(ctx).setActiveDescendant($event))
           }, {
             default: withCtx(() => [
-              unref(ctx).isLoading ? (openBlock(), createElementBlock("div", _hoisted_2$u, [
+              unref(ctx).isLoading ? (openBlock(), createElementBlock("div", _hoisted_2$x, [
                 createVNode(unref(LoaderIcon), { class: "h-4 w-4 animate-spin" }),
                 createElementVNode("span", null, toDisplayString(unref(ctx).loadingLabel), 1)
               ])) : createCommentVNode("", true),
               renderSlot(_ctx.$slots, "default"),
-              !unref(ctx).isLoading && showEmpty.value ? (openBlock(), createBlock(_sfc_main$18, { key: 1 }, {
+              !unref(ctx).isLoading && showEmpty.value ? (openBlock(), createBlock(_sfc_main$19, { key: 1 }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(__props.noResultsLabel), 1)
                 ]),
@@ -4000,7 +4011,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   ...{ name: "SelectItem", inheritAttrs: false },
   __name: "SelectItem",
   props: {
@@ -4031,7 +4042,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
       () => !ctx.query || itemText.value.toLowerCase().includes(ctx.query.toLowerCase())
     );
     return (_ctx, _cache) => {
-      return matchesQuery.value ? (openBlock(), createBlock(_sfc_main$1b, {
+      return matchesQuery.value ? (openBlock(), createBlock(_sfc_main$1c, {
         key: 0,
         value: __props.itemKey,
         "is-disabled": __props.isDisabled
@@ -4052,8 +4063,8 @@ function useMultiSelectContext() {
   if (!ctx) throw new Error("MultiSelect.* must be used inside <MultiSelect>");
   return ctx;
 }
-const _hoisted_1$P = ["name", "value"];
-const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$Q = ["name", "value"];
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   ...{ name: "MultiSelect", inheritAttrs: false },
   __name: "MultiSelect",
   props: {
@@ -4066,7 +4077,8 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     defaultOpen: { type: Boolean, default: false },
     open: { type: Boolean, default: void 0 },
     isOpen: { type: Boolean, default: void 0 },
-    placement: { default: "bottom" }
+    placement: { default: "bottom" },
+    getOptionLabel: {}
   },
   emits: ["update:modelValue", "value-change", "update:open", "open-change"],
   setup(__props, { emit: __emit }) {
@@ -4102,6 +4114,9 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
       delete next[value];
       labels.value = next;
     }
+    function getOptionLabelFn(value) {
+      return props.getOptionLabel?.(value) ?? null;
+    }
     provide(multiSelectContextKey, {
       get open() {
         return openCtl.value.value;
@@ -4116,6 +4131,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
       },
       registerLabel,
       unregisterLabel,
+      getOptionLabel: getOptionLabelFn,
       get isDisabled() {
         return finalDisabled.value;
       },
@@ -4138,7 +4154,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     const isOpenNow = computed(() => openCtl.value.value);
     const selected = computed(() => valuesCtl.value.value);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1N), {
+      return openBlock(), createBlock(unref(_sfc_main$1O), {
         open: isOpenNow.value,
         placement: __props.placement,
         offset: 6,
@@ -4152,7 +4168,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
               type: "hidden",
               name: __props.name,
               value: v
-            }, null, 8, _hoisted_1$P);
+            }, null, 8, _hoisted_1$Q);
           }), 128)) : createCommentVNode("", true)
         ]),
         _: 3
@@ -4160,28 +4176,44 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$O = {
+const _hoisted_1$P = {
   key: 0,
   class: "text-muted-foreground"
 };
-const _hoisted_2$t = {
-  key: 1,
-  class: "flex flex-1 flex-wrap items-center gap-1"
+const _hoisted_2$w = ["aria-label", "onClick"];
+const _hoisted_3$m = {
+  key: 0,
+  class: "ml-0.5 flex shrink-0 items-center gap-1.5"
 };
-const _hoisted_3$m = ["aria-label", "onClick"];
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const _hoisted_4$g = { class: "text-xs font-medium tabular-nums text-muted-foreground" };
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   ...{ name: "MultiSelectTags" },
   __name: "MultiSelectTags",
   props: {
-    placeholder: {}
+    placeholder: {},
+    maxVisible: {}
   },
   setup(__props) {
+    const props = __props;
     const ctx = useMultiSelectContext();
+    const isCapped = computed(
+      () => props.maxVisible !== void 0 && ctx.values.length > props.maxVisible
+    );
+    const visibleValues = computed(
+      () => isCapped.value ? ctx.values.slice(0, props.maxVisible) : ctx.values
+    );
+    const overflowCount = computed(() => ctx.values.length - visibleValues.value.length);
+    const stripClass = computed(
+      () => cn(
+        "flex min-w-0 flex-1 items-center gap-1",
+        isCapped.value ? "flex-nowrap overflow-hidden" : "flex-wrap"
+      )
+    );
     function tagLabel(value) {
-      return ctx.labels[value] ?? value;
+      return ctx.labels[value] ?? ctx.getOptionLabel(value) ?? value;
     }
     function removeLabel(value) {
-      const label = ctx.labels[value];
+      const label = tagLabel(value);
       return `Remove ${typeof label === "string" ? label : value}`;
     }
     function remove(value, event) {
@@ -4190,15 +4222,18 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     }
     const CloseIcon = X;
     return (_ctx, _cache) => {
-      return unref(ctx).values.length === 0 ? (openBlock(), createElementBlock("span", _hoisted_1$O, [
+      return unref(ctx).values.length === 0 ? (openBlock(), createElementBlock("span", _hoisted_1$P, [
         renderSlot(_ctx.$slots, "placeholder", {}, () => [
           createTextVNode(toDisplayString(__props.placeholder), 1)
         ])
-      ])) : (openBlock(), createElementBlock("span", _hoisted_2$t, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(ctx).values, (v) => {
+      ])) : (openBlock(), createElementBlock("span", {
+        key: 1,
+        class: normalizeClass(stripClass.value)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(visibleValues.value, (v) => {
           return openBlock(), createElementBlock("span", {
             key: v,
-            class: "inline-flex items-center gap-1 rounded-sm bg-muted px-1.5 py-0.5 text-xs"
+            class: "inline-flex max-w-full shrink-0 items-center gap-1 truncate rounded-sm border border-border bg-muted px-1.5 py-0.5 text-xs"
           }, [
             createTextVNode(toDisplayString(tagLabel(v)) + " ", 1),
             !unref(ctx).isDisabled ? (openBlock(), createElementBlock("span", {
@@ -4212,20 +4247,28 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
               }, ["stop"]))
             }, [
               createVNode(unref(CloseIcon), { class: "h-3 w-3" })
-            ], 40, _hoisted_3$m)) : createCommentVNode("", true)
+            ], 40, _hoisted_2$w)) : createCommentVNode("", true)
           ]);
-        }), 128))
-      ]));
+        }), 128)),
+        overflowCount.value > 0 ? (openBlock(), createElementBlock("span", _hoisted_3$m, [
+          _cache[1] || (_cache[1] = createElementVNode("span", {
+            "aria-hidden": "true",
+            class: "h-4 w-px shrink-0 bg-border"
+          }, null, -1)),
+          createElementVNode("span", _hoisted_4$g, " +" + toDisplayString(overflowCount.value), 1)
+        ])) : createCommentVNode("", true)
+      ], 2));
     };
   }
 });
-const _hoisted_1$N = ["id", "disabled", "aria-invalid", "aria-labelledby", "aria-describedby"];
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$O = ["id", "disabled", "aria-invalid", "aria-labelledby", "aria-describedby"];
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   ...{ name: "MultiSelectTrigger", inheritAttrs: false },
   __name: "MultiSelectTrigger",
   props: {
     size: {},
-    state: {}
+    state: {},
+    maxVisibleTags: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
@@ -4265,7 +4308,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     const ChevronDownIcon = ChevronDown;
     __expose({ el: root });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1P), { "as-child": "" }, {
+      return openBlock(), createBlock(unref(_sfc_main$1Q), { "as-child": "" }, {
         default: withCtx(() => [
           createElementVNode("button", mergeProps({
             ref_key: "root",
@@ -4278,18 +4321,21 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
             "aria-describedby": unref(ctx).describedBy,
             class: buttonClass.value
           }, passthroughAttrs.value, { onKeydown }), [
-            hasContent.value ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createBlock(_sfc_main$11, { key: 1 })),
+            hasContent.value ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createBlock(_sfc_main$12, {
+              key: 1,
+              "max-visible": __props.maxVisibleTags
+            }, null, 8, ["max-visible"])),
             createVNode(unref(ChevronDownIcon), {
               class: normalizeClass(chevronClass.value)
             }, null, 8, ["class"])
-          ], 16, _hoisted_1$N)
+          ], 16, _hoisted_1$O)
         ]),
         _: 3
       });
     };
   }
 });
-const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   ...{ name: "MultiSelectContent", inheritAttrs: false },
   __name: "MultiSelectContent",
   props: {
@@ -4312,7 +4358,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
       ctx.setValues(next);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1Q), {
+      return openBlock(), createBlock(unref(_sfc_main$1R), {
         variant: __props.variant,
         tone: __props.tone,
         radius: __props.radius,
@@ -4321,7 +4367,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
         class: normalizeClass(panelClass.value)
       }, {
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$1c), {
+          createVNode(unref(_sfc_main$1d), {
             "is-multiple": "",
             value: selected.value,
             variant: "flat",
@@ -4339,7 +4385,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   ...{ name: "MultiSelectItem", inheritAttrs: false },
   __name: "MultiSelectItem",
   props: {
@@ -4358,7 +4404,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
       { immediate: true }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1b), {
+      return openBlock(), createBlock(unref(_sfc_main$1c), {
         ref_key: "el",
         ref: el,
         value: __props.value,
@@ -4378,8 +4424,8 @@ function useComboboxContext() {
   if (!ctx) throw new Error("Combobox.* must be used inside <Combobox>");
   return ctx;
 }
-const _hoisted_1$M = ["name", "value"];
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$N = ["name", "value"];
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   ...{ name: "Combobox", inheritAttrs: false },
   __name: "Combobox",
   props: {
@@ -4504,13 +4550,13 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           type: "hidden",
           name: __props.name,
           value: selected.value
-        }, null, 8, _hoisted_1$M)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_1$N)) : createCommentVNode("", true)
       ], 64);
     };
   }
 });
-const _hoisted_1$L = ["aria-expanded", "aria-controls", "aria-activedescendant", "aria-disabled", "disabled", "value"];
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$M = ["aria-expanded", "aria-controls", "aria-activedescendant", "aria-disabled", "disabled", "value"];
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   ...{ name: "ComboboxInput", inheritAttrs: false },
   __name: "ComboboxInput",
   props: {
@@ -4638,12 +4684,12 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
         onFocus,
         onBlur,
         onKeydown
-      }), null, 16, _hoisted_1$L);
+      }), null, 16, _hoisted_1$M);
     };
   }
 });
-const _hoisted_1$K = { class: "group contents" };
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _hoisted_1$L = { class: "group contents" };
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   ...{ name: "ComboboxContent", inheritAttrs: false },
   __name: "ComboboxContent",
   props: {
@@ -4718,19 +4764,19 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       )
     );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1R), null, {
+      return openBlock(), createBlock(unref(_sfc_main$1S), null, {
         default: withCtx(() => [
           createVNode(unref(Presence), { "is-present": isOpen.value }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$K, [
-                createVNode(unref(_sfc_main$1S), {
+              createElementVNode("div", _hoisted_1$L, [
+                createVNode(unref(_sfc_main$1T), {
                   anchor: anchor.value,
                   placement: __props.placement,
                   offset: __props.offset,
                   class: "z-dropdown"
                 }, {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$1T), mergeProps({
+                    createVNode(unref(_sfc_main$1U), mergeProps({
                       ref: setRef,
                       "on-escape": onEscape,
                       "on-outside-pointer-down": onOutsidePointerDown,
@@ -4756,9 +4802,9 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$J = ["id", "aria-selected", "aria-disabled", "data-active", "data-selected"];
-const _hoisted_2$s = { class: "flex-1" };
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _hoisted_1$K = ["id", "aria-selected", "aria-disabled", "data-active", "data-selected"];
+const _hoisted_2$v = { class: "flex-1" };
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   ...{ name: "ComboboxItem", inheritAttrs: false },
   __name: "ComboboxItem",
   props: {
@@ -4818,20 +4864,20 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
         onClick,
         onPointerenter
       }), [
-        createElementVNode("span", _hoisted_2$s, [
+        createElementVNode("span", _hoisted_2$v, [
           renderSlot(_ctx.$slots, "default")
         ]),
         isSelected.value ? (openBlock(), createBlock(unref(CheckIcon), {
           key: 0,
           class: "h-4 w-4 opacity-80"
         })) : createCommentVNode("", true)
-      ], 16, _hoisted_1$J);
+      ], 16, _hoisted_1$K);
     };
   }
 });
-const _hoisted_1$I = ["aria-labelledby"];
-const _hoisted_2$r = ["id"];
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _hoisted_1$J = ["aria-labelledby"];
+const _hoisted_2$u = ["id"];
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   ...{ name: "ComboboxGroup" },
   __name: "ComboboxGroup",
   props: {
@@ -4855,13 +4901,13 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "label", {}, () => [
             createTextVNode(toDisplayString(__props.label), 1)
           ])
-        ], 10, _hoisted_2$r)) : createCommentVNode("", true),
+        ], 10, _hoisted_2$u)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default")
-      ], 8, _hoisted_1$I);
+      ], 8, _hoisted_1$J);
     };
   }
 });
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   ...{ name: "ComboboxSeparator" },
   __name: "ComboboxSeparator",
   setup(__props) {
@@ -4873,7 +4919,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   ...{ name: "ComboboxEmpty", inheritAttrs: false },
   __name: "ComboboxEmpty",
   setup(__props) {
@@ -4895,8 +4941,8 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$H = { class: "flex items-center justify-between gap-2 px-1" };
-const _hoisted_2$q = {
+const _hoisted_1$I = { class: "flex items-center justify-between gap-2 px-1" };
+const _hoisted_2$t = {
   class: "text-sm font-medium",
   "aria-live": "polite"
 };
@@ -4904,7 +4950,7 @@ const _hoisted_3$l = { class: "grid grid-cols-7 gap-0 px-1" };
 const _hoisted_4$f = ["aria-label"];
 const _hoisted_5$a = ["data-date", "aria-disabled", "data-today", "data-out-of-month", "data-disabled", "tabindex", "onClick", "onKeydown"];
 const MAX_DISABLED_SKIP = 400;
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   ...{ name: "MonthGrid", inheritAttrs: false },
   __name: "MonthGrid",
   props: {
@@ -5036,7 +5082,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       const consumer = props.dayProps?.(date, { outOfMonth });
       return cn(
         "grid h-9 w-9 place-items-center text-sm transition-colors",
-        "hover:bg-muted hover:text-foreground",
+        "hover:bg-primary/10 hover:text-foreground",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         outOfMonth && "text-muted-foreground/60",
         dayDisabled(date) && "pointer-events-none opacity-40",
@@ -5063,7 +5109,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         ref: root,
         class: normalizeClass(rootClass.value)
       }, [
-        createElementVNode("div", _hoisted_1$H, [
+        createElementVNode("div", _hoisted_1$I, [
           createElementVNode("button", {
             type: "button",
             "aria-label": "Previous month",
@@ -5072,7 +5118,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           }, [
             createVNode(unref(ChevronLeftIcon), { class: "h-4 w-4" })
           ]),
-          createElementVNode("div", _hoisted_2$q, toDisplayString(monthLabel.value), 1),
+          createElementVNode("div", _hoisted_2$t, toDisplayString(monthLabel.value), 1),
           createElementVNode("button", {
             type: "button",
             "aria-label": "Next month",
@@ -5127,7 +5173,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   ...{ name: "Calendar", inheritAttrs: false },
   __name: "Calendar",
   props: {
@@ -5179,7 +5225,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
         class: cn(
           "rounded-sm",
           isToday(date) && !isSelectedCell && "border border-border",
-          isSelectedCell && "bg-primary text-primary-foreground hover:bg-primary"
+          isSelectedCell && "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground"
         )
       };
     }
@@ -5197,7 +5243,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
         ref: root,
         class: rootClass.value
       }, passthroughAttrs.value), [
-        createVNode(_sfc_main$S, {
+        createVNode(_sfc_main$T, {
           "view-month": viewMonth.value,
           "on-view-month-change": setViewMonth,
           "focused-date": focusedDate.value,
@@ -5211,8 +5257,9 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$G = ["id", "value", "min", "max", "disabled", "required", "aria-invalid", "aria-describedby"];
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$H = ["id", "value", "min", "max", "disabled", "required", "aria-invalid", "aria-describedby"];
+const _hoisted_2$s = ["id", "value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby"];
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   ...{ name: "DateField", inheritAttrs: false },
   __name: "DateField",
   props: {
@@ -5225,6 +5272,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     defaultValue: {},
     min: {},
     max: {},
+    native: { type: Boolean, default: false },
+    placeholder: { default: "YYYY-MM-DD" },
     id: {},
     disabled: { type: Boolean, default: void 0 },
     required: { type: Boolean, default: void 0 }
@@ -5243,56 +5292,268 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         emit("value-change", next);
       }
     });
-    const displayValue = computed(() => formatISODate(controlled.value.value));
+    const committed = controlled.value;
+    const open = ref(false);
+    const displayValue = computed(() => formatISODate(committed.value));
+    const draft = ref(displayValue.value);
+    watch(displayValue, (next) => {
+      draft.value = next;
+    });
+    function commit() {
+      if (!draft.value.trim()) {
+        controlled.setValue(null);
+        draft.value = "";
+        return;
+      }
+      const next = parseISODate(draft.value.trim());
+      if (next) {
+        controlled.setValue(next);
+        draft.value = formatISODate(next);
+      } else {
+        draft.value = displayValue.value;
+      }
+    }
+    function onDraftInput(event) {
+      draft.value = event.target.value;
+    }
+    function onBlur() {
+      commit();
+    }
+    function onKeydown(event) {
+      if (event.defaultPrevented) return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        commit();
+      }
+    }
+    function onNativeInput(event) {
+      controlled.setValue(parseISODate(event.target.value));
+    }
+    function onCalendarChange(next) {
+      controlled.setValue(next);
+      open.value = false;
+    }
+    const calendarMonth = computed(() => committed.value ?? today());
     const minValue = computed(() => formatISODate(props.min));
     const maxValue = computed(() => formatISODate(props.max));
-    function onInput(event) {
-      controlled.setValue(parseISODate(event.target.value));
+    const finalState = computed(
+      () => props.state ?? (ctx?.isInvalid ? InputState.Invalid : InputState.Default)
+    );
+    const inputId = computed(() => props.id ?? ctx?.id);
+    const isDisabled = computed(() => props.disabled ?? ctx?.isDisabled);
+    const isRequired = computed(() => props.required ?? ctx?.isRequired);
+    const isInvalid = computed(() => ctx?.isInvalid || void 0);
+    const describedBy = computed(() => ctx?.describedBy);
+    const OWNED_ATTRS = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OWNED_ATTRS.has(key)))
+    );
+    const wrapperClass = computed(() => cn("relative", attrs.class));
+    const inputClass = computed(
+      () => cn(
+        inputBaseVariants({
+          size: props.size,
+          state: finalState.value,
+          border: props.border,
+          ring: props.ring
+        }),
+        !props.native && "pr-10"
+      )
+    );
+    const root = useTemplateRef("root");
+    __expose({ el: root });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(wrapperClass.value)
+      }, [
+        __props.native ? (openBlock(), createElementBlock("input", mergeProps({
+          key: 0,
+          ref_key: "root",
+          ref: root,
+          type: "date",
+          id: inputId.value,
+          value: displayValue.value,
+          min: minValue.value,
+          max: maxValue.value,
+          disabled: isDisabled.value,
+          required: isRequired.value,
+          "aria-invalid": isInvalid.value,
+          "aria-describedby": describedBy.value,
+          class: inputClass.value
+        }, passthroughAttrs.value, { onInput: onNativeInput }), null, 16, _hoisted_1$H)) : (openBlock(), createBlock(unref(_sfc_main$1O), {
+          key: 1,
+          open: open.value,
+          "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+          placement: "bottom-start",
+          offset: 6
+        }, {
+          default: withCtx(() => [
+            createElementVNode("input", mergeProps({
+              ref_key: "root",
+              ref: root,
+              type: "text",
+              autocomplete: "off",
+              spellcheck: false,
+              id: inputId.value,
+              value: draft.value,
+              placeholder: __props.placeholder,
+              disabled: isDisabled.value,
+              required: isRequired.value,
+              "aria-invalid": isInvalid.value,
+              "aria-describedby": describedBy.value,
+              class: inputClass.value
+            }, passthroughAttrs.value, {
+              onInput: onDraftInput,
+              onBlur,
+              onKeydown
+            }), null, 16, _hoisted_2$s),
+            createVNode(unref(_sfc_main$1Q), {
+              "aria-label": "Choose date",
+              disabled: isDisabled.value,
+              class: "absolute right-1 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(Calendar), { class: "h-4 w-4" })
+              ]),
+              _: 1
+            }, 8, ["disabled"]),
+            createVNode(unref(_sfc_main$1R), { "is-bare": "" }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$S, {
+                  value: unref(committed),
+                  "default-month": calendarMonth.value,
+                  min: __props.min,
+                  max: __props.max,
+                  onValueChange: onCalendarChange
+                }, null, 8, ["value", "default-month", "min", "max"])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["open"]))
+      ], 2);
+    };
+  }
+});
+const _hoisted_1$G = ["aria-selected", "data-selected", "onClick"];
+const _hoisted_2$r = ["aria-selected", "data-selected", "onClick"];
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+  ...{ name: "TimeColumns", inheritAttrs: false },
+  __name: "TimeColumns",
+  props: {
+    value: {},
+    minuteStep: { default: 5 },
+    onTimeChange: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const hoursEl = useTemplateRef("hoursEl");
+    const minutesEl = useTemplateRef("minutesEl");
+    const minuteList = computed(() => {
+      const list = [];
+      for (let m = 0; m < 60; m += props.minuteStep) list.push(m);
+      return list;
+    });
+    let raf = 0;
+    onMounted(() => {
+      raf = requestAnimationFrame(() => {
+        hoursEl.value?.querySelector("[data-selected]")?.scrollIntoView({
+          block: "center"
+        });
+        minutesEl.value?.querySelector("[data-selected]")?.scrollIntoView({
+          block: "center"
+        });
+      });
+    });
+    onBeforeUnmount(() => {
+      if (raf) cancelAnimationFrame(raf);
+    });
+    function update(next) {
+      props.onTimeChange(
+        Temporal.PlainTime.from({
+          hour: next.hour ?? props.value?.hour ?? 0,
+          minute: next.minute ?? props.value?.minute ?? 0
+        })
+      );
+    }
+    function cellClass(isSelected) {
+      return cn(
+        "grid h-8 w-12 place-items-center rounded-sm text-sm transition-colors hover:bg-primary/10",
+        isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"
+      );
+    }
+    function pad(n) {
+      return String(n).padStart(2, "0");
     }
-    const finalState = computed(
-      () => props.state ?? (ctx?.isInvalid ? InputState.Invalid : InputState.Default)
-    );
-    const inputId = computed(() => props.id ?? ctx?.id);
-    const isDisabled = computed(() => props.disabled ?? ctx?.isDisabled);
-    const isRequired = computed(() => props.required ?? ctx?.isRequired);
-    const isInvalid = computed(() => ctx?.isInvalid || void 0);
-    const describedBy = computed(() => ctx?.describedBy);
     const OWNED_ATTRS = /* @__PURE__ */ new Set(["class"]);
     const passthroughAttrs = computed(
       () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OWNED_ATTRS.has(key)))
     );
     const rootClass = computed(
       () => cn(
-        inputBaseVariants({
-          size: props.size,
-          state: finalState.value,
-          border: props.border,
-          ring: props.ring
-        }),
+        "flex gap-1 rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md",
         attrs.class
       )
     );
+    const HOUR_LIST = HOURS;
     const root = useTemplateRef("root");
     __expose({ el: root });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("input", mergeProps({
+      return openBlock(), createElementBlock("div", mergeProps({
         ref_key: "root",
         ref: root,
-        type: "date",
-        id: inputId.value,
-        value: displayValue.value,
-        min: minValue.value,
-        max: maxValue.value,
-        disabled: isDisabled.value,
-        required: isRequired.value,
-        "aria-invalid": isInvalid.value,
-        "aria-describedby": describedBy.value,
         class: rootClass.value
-      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$G);
+      }, passthroughAttrs.value), [
+        createElementVNode("div", {
+          ref_key: "hoursEl",
+          ref: hoursEl,
+          role: "listbox",
+          "aria-label": "Hours",
+          class: "flex max-h-56 flex-col gap-0.5 overflow-y-auto pr-1"
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(HOUR_LIST), (h) => {
+            return openBlock(), createElementBlock("button", {
+              key: h,
+              type: "button",
+              role: "option",
+              "aria-selected": props.value?.hour === h,
+              "data-selected": props.value?.hour === h ? "" : void 0,
+              class: normalizeClass(cellClass(props.value?.hour === h)),
+              onClick: ($event) => update({ hour: h })
+            }, toDisplayString(pad(h)), 11, _hoisted_1$G);
+          }), 128))
+        ], 512),
+        _cache[0] || (_cache[0] = createElementVNode("div", { class: "w-px self-stretch bg-border" }, null, -1)),
+        createElementVNode("div", {
+          ref_key: "minutesEl",
+          ref: minutesEl,
+          role: "listbox",
+          "aria-label": "Minutes",
+          class: "flex max-h-56 flex-col gap-0.5 overflow-y-auto pl-1"
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(minuteList.value, (m) => {
+            return openBlock(), createElementBlock("button", {
+              key: m,
+              type: "button",
+              role: "option",
+              "aria-selected": props.value?.minute === m,
+              "data-selected": props.value?.minute === m ? "" : void 0,
+              class: normalizeClass(cellClass(props.value?.minute === m)),
+              onClick: ($event) => update({ minute: m })
+            }, toDisplayString(pad(m)), 11, _hoisted_2$r);
+          }), 128))
+        ], 512)
+      ], 16);
     };
   }
 });
 const _hoisted_1$F = ["id", "value", "min", "max", "disabled", "required", "aria-invalid", "aria-describedby"];
+const _hoisted_2$q = ["id", "value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby"];
+const _hoisted_3$k = { class: "flex items-start gap-2" };
+const _hoisted_4$e = ["name", "value"];
 const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{ name: "DateTimeField", inheritAttrs: false },
   __name: "DateTimeField",
@@ -5306,6 +5567,10 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     defaultValue: {},
     min: {},
     max: {},
+    native: { type: Boolean, default: false },
+    minuteStep: { default: 5 },
+    placeholder: { default: "YYYY-MM-DD HH:MM" },
+    name: {},
     id: {},
     disabled: { type: Boolean, default: void 0 },
     required: { type: Boolean, default: void 0 }
@@ -5324,12 +5589,69 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         emit("value-change", next);
       }
     });
-    const displayValue = computed(() => formatISODateTime(controlled.value.value));
-    const minValue = computed(() => formatISODateTime(props.min));
-    const maxValue = computed(() => formatISODateTime(props.max));
-    function onInput(event) {
+    const committed = controlled.value;
+    const open = ref(false);
+    const isoValue = computed(() => formatISODateTime(committed.value));
+    const displayText = computed(() => isoValue.value.replace("T", " "));
+    const draft = ref(displayText.value);
+    watch(displayText, (next) => {
+      draft.value = next;
+    });
+    function parseDateTimeText(text) {
+      const normalised = text.trim().replace(/\s+/, "T");
+      const full = parseISODateTime(normalised);
+      if (full) return full;
+      const dateOnly = parseISODate(normalised);
+      return dateOnly ? dateOnly.toPlainDateTime() : null;
+    }
+    function commit() {
+      if (!draft.value.trim()) {
+        controlled.setValue(null);
+        draft.value = "";
+        return;
+      }
+      const next = parseDateTimeText(draft.value);
+      if (next) {
+        controlled.setValue(next);
+        draft.value = formatISODateTime(next).replace("T", " ");
+      } else {
+        draft.value = displayText.value;
+      }
+    }
+    function onDraftInput(event) {
+      draft.value = event.target.value;
+    }
+    function onBlur() {
+      commit();
+    }
+    function onKeydown(event) {
+      if (event.defaultPrevented) return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        commit();
+      }
+    }
+    function onNativeInput(event) {
       controlled.setValue(parseISODateTime(event.target.value));
     }
+    function onCalendarChange(date) {
+      if (!date) {
+        controlled.setValue(null);
+        return;
+      }
+      controlled.setValue(date.toPlainDateTime(committed.value?.toPlainTime()));
+    }
+    function onColumnsChange(time) {
+      const date = committed.value?.toPlainDate() ?? today();
+      controlled.setValue(date.toPlainDateTime(time));
+    }
+    const calendarValue = computed(() => committed.value?.toPlainDate() ?? null);
+    const calendarMonth = computed(() => calendarValue.value ?? today());
+    const timeValue = computed(() => committed.value?.toPlainTime() ?? null);
+    const minDate = computed(() => props.min?.toPlainDate() ?? null);
+    const maxDate = computed(() => props.max?.toPlainDate() ?? null);
+    const minValue = computed(() => formatISODateTime(props.min));
+    const maxValue = computed(() => formatISODateTime(props.max));
     const finalState = computed(
       () => props.state ?? (ctx?.isInvalid ? InputState.Invalid : InputState.Default)
     );
@@ -5342,7 +5664,8 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     const passthroughAttrs = computed(
       () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OWNED_ATTRS.has(key)))
     );
-    const rootClass = computed(
+    const wrapperClass = computed(() => cn("relative", attrs.class));
+    const inputClass = computed(
       () => cn(
         inputBaseVariants({
           size: props.size,
@@ -5350,30 +5673,101 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           border: props.border,
           ring: props.ring
         }),
-        attrs.class
+        !props.native && "pr-10"
       )
     );
     const root = useTemplateRef("root");
     __expose({ el: root });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("input", mergeProps({
-        ref_key: "root",
-        ref: root,
-        type: "datetime-local",
-        id: inputId.value,
-        value: displayValue.value,
-        min: minValue.value,
-        max: maxValue.value,
-        disabled: isDisabled.value,
-        required: isRequired.value,
-        "aria-invalid": isInvalid.value,
-        "aria-describedby": describedBy.value,
-        class: rootClass.value
-      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$F);
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(wrapperClass.value)
+      }, [
+        __props.native ? (openBlock(), createElementBlock("input", mergeProps({
+          key: 0,
+          ref_key: "root",
+          ref: root,
+          type: "datetime-local",
+          id: inputId.value,
+          value: isoValue.value,
+          min: minValue.value,
+          max: maxValue.value,
+          disabled: isDisabled.value,
+          required: isRequired.value,
+          "aria-invalid": isInvalid.value,
+          "aria-describedby": describedBy.value,
+          class: inputClass.value
+        }, passthroughAttrs.value, { onInput: onNativeInput }), null, 16, _hoisted_1$F)) : (openBlock(), createBlock(unref(_sfc_main$1O), {
+          key: 1,
+          open: open.value,
+          "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+          placement: "bottom-start",
+          offset: 6
+        }, {
+          default: withCtx(() => [
+            createElementVNode("input", mergeProps({
+              ref_key: "root",
+              ref: root,
+              type: "text",
+              autocomplete: "off",
+              spellcheck: false,
+              id: inputId.value,
+              value: draft.value,
+              placeholder: __props.placeholder,
+              disabled: isDisabled.value,
+              required: isRequired.value,
+              "aria-invalid": isInvalid.value,
+              "aria-describedby": describedBy.value,
+              class: inputClass.value
+            }, passthroughAttrs.value, {
+              onInput: onDraftInput,
+              onBlur,
+              onKeydown
+            }), null, 16, _hoisted_2$q),
+            createVNode(unref(_sfc_main$1Q), {
+              "aria-label": "Choose date and time",
+              disabled: isDisabled.value,
+              class: "absolute right-1 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(CalendarClock), { class: "h-4 w-4" })
+              ]),
+              _: 1
+            }, 8, ["disabled"]),
+            createVNode(unref(_sfc_main$1R), { "is-bare": "" }, {
+              default: withCtx(() => [
+                createElementVNode("div", _hoisted_3$k, [
+                  createVNode(_sfc_main$S, {
+                    value: calendarValue.value,
+                    "default-month": calendarMonth.value,
+                    min: minDate.value,
+                    max: maxDate.value,
+                    onValueChange: onCalendarChange
+                  }, null, 8, ["value", "default-month", "min", "max"]),
+                  createVNode(_sfc_main$Q, {
+                    value: timeValue.value,
+                    "minute-step": __props.minuteStep,
+                    "on-time-change": onColumnsChange
+                  }, null, 8, ["value", "minute-step"])
+                ])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["open"])),
+        __props.name ? (openBlock(), createElementBlock("input", {
+          key: 2,
+          type: "hidden",
+          name: __props.name,
+          value: isoValue.value
+        }, null, 8, _hoisted_4$e)) : createCommentVNode("", true)
+      ], 2);
     };
   }
 });
 const _hoisted_1$E = ["id", "value", "disabled", "required", "aria-invalid", "aria-describedby"];
+const _hoisted_2$p = ["id", "value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby"];
+const TIME_TEXT = /^(\d{1,2})(?::?(\d{2}))?$/;
 const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{ name: "TimeField", inheritAttrs: false },
   __name: "TimeField",
@@ -5385,6 +5779,9 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     modelValue: {},
     value: {},
     defaultValue: {},
+    native: { type: Boolean, default: false },
+    minuteStep: { default: 5 },
+    placeholder: { default: "--:--" },
     id: {},
     disabled: { type: Boolean, default: void 0 },
     required: { type: Boolean, default: void 0 }
@@ -5403,10 +5800,55 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
         emit("value-change", next);
       }
     });
-    const displayValue = computed(() => formatISOTime(controlled.value.value));
-    function onInput(event) {
-      controlled.setValue(parseISOTime(event.target.value));
+    const committed = controlled.value;
+    const open = ref(false);
+    const draft = ref(formatISOTime(committed.value));
+    watch(committed, (next) => {
+      draft.value = formatISOTime(next);
+    });
+    function parseTimeText(text) {
+      const match = TIME_TEXT.exec(text.trim());
+      if (!match) return null;
+      const hour = Number(match[1]);
+      const minute = match[2] === void 0 ? 0 : Number(match[2]);
+      if (hour > 23 || minute > 59) return null;
+      return new Temporal.PlainTime(hour, minute);
+    }
+    function commit() {
+      if (!draft.value.trim()) {
+        controlled.setValue(null);
+        draft.value = "";
+        return;
+      }
+      const next = parseTimeText(draft.value);
+      if (next) {
+        controlled.setValue(next);
+        draft.value = formatISOTime(next);
+      } else {
+        draft.value = formatISOTime(committed.value);
+      }
+    }
+    function onDraftInput(event) {
+      draft.value = event.target.value;
+    }
+    function onBlur() {
+      commit();
+    }
+    function onKeydown(event) {
+      if (event.defaultPrevented) return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        commit();
+      }
+    }
+    function onNativeInput(event) {
+      const raw = event.target.value;
+      controlled.setValue(raw ? parseTimeText(raw) : null);
+    }
+    function onColumnsChange(next) {
+      controlled.setValue(next);
     }
+    const displayValue = computed(() => formatISOTime(committed.value));
     const finalState = computed(
       () => props.state ?? (ctx?.isInvalid ? InputState.Invalid : InputState.Default)
     );
@@ -5419,7 +5861,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     const passthroughAttrs = computed(
       () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OWNED_ATTRS.has(key)))
     );
-    const rootClass = computed(
+    const wrapperClass = computed(() => cn("relative", attrs.class));
+    const inputClass = computed(
       () => cn(
         inputBaseVariants({
           size: props.size,
@@ -5427,24 +5870,79 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
           border: props.border,
           ring: props.ring
         }),
-        attrs.class
+        !props.native && "pr-10"
       )
     );
     const root = useTemplateRef("root");
     __expose({ el: root });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("input", mergeProps({
-        ref_key: "root",
-        ref: root,
-        type: "time",
-        id: inputId.value,
-        value: displayValue.value,
-        disabled: isDisabled.value,
-        required: isRequired.value,
-        "aria-invalid": isInvalid.value,
-        "aria-describedby": describedBy.value,
-        class: rootClass.value
-      }, passthroughAttrs.value, { onInput }), null, 16, _hoisted_1$E);
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(wrapperClass.value)
+      }, [
+        __props.native ? (openBlock(), createElementBlock("input", mergeProps({
+          key: 0,
+          ref_key: "root",
+          ref: root,
+          type: "time",
+          id: inputId.value,
+          value: displayValue.value,
+          disabled: isDisabled.value,
+          required: isRequired.value,
+          "aria-invalid": isInvalid.value,
+          "aria-describedby": describedBy.value,
+          class: inputClass.value
+        }, passthroughAttrs.value, { onInput: onNativeInput }), null, 16, _hoisted_1$E)) : (openBlock(), createBlock(unref(_sfc_main$1O), {
+          key: 1,
+          open: open.value,
+          "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+          placement: "bottom-start",
+          offset: 6
+        }, {
+          default: withCtx(() => [
+            createElementVNode("input", mergeProps({
+              ref_key: "root",
+              ref: root,
+              type: "text",
+              inputmode: "numeric",
+              autocomplete: "off",
+              spellcheck: false,
+              id: inputId.value,
+              value: draft.value,
+              placeholder: __props.placeholder,
+              disabled: isDisabled.value,
+              required: isRequired.value,
+              "aria-invalid": isInvalid.value,
+              "aria-describedby": describedBy.value,
+              class: inputClass.value
+            }, passthroughAttrs.value, {
+              onInput: onDraftInput,
+              onBlur,
+              onKeydown
+            }), null, 16, _hoisted_2$p),
+            createVNode(unref(_sfc_main$1Q), {
+              "aria-label": "Choose time",
+              disabled: isDisabled.value,
+              class: "absolute right-1 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(Clock), { class: "h-4 w-4" })
+              ]),
+              _: 1
+            }, 8, ["disabled"]),
+            createVNode(unref(_sfc_main$1R), { "is-bare": "" }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$Q, {
+                  value: unref(committed),
+                  "minute-step": __props.minuteStep,
+                  "on-time-change": onColumnsChange
+                }, null, 8, ["value", "minute-step"])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["open"]))
+      ], 2);
     };
   }
 });
@@ -5531,11 +6029,22 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         onPointerleave: () => {
           if (isSameDay(hoveredDate.value, date)) hoveredDate.value = null;
         },
+        /*
+         * Every painted cell has to restate BOTH `hover:bg-*` and `hover:text-*`. `MonthGrid`'s
+         * base hover is `hover:bg-primary/10 hover:text-foreground`, and a `:hover` rule outranks
+         * the unqualified `bg-primary` / `bg-primary-soft` here on specificity — so without an
+         * explicit hover the selected ends and the in-range run lost their fill the moment the
+         * pointer touched them. tailwind-merge only resolves same-group + same-variant pairs.
+         *
+         * The ladder: `/90` on the solid ends (the package's solid-surface hover), `/25` on the
+         * in-range run — a step deeper than its `primary-soft` fill, so the hover reads against
+         * the range without competing with the ends.
+         */
         class: cn(
           isToday(date) && !startCell && !endCell && "border border-border rounded-sm",
-          rangeCell && "bg-primary-soft text-primary-soft-foreground",
-          startCell && "bg-primary text-primary-foreground rounded-l-sm",
-          endCell && "bg-primary text-primary-foreground rounded-r-sm",
+          rangeCell && "bg-primary-soft text-primary-soft-foreground hover:bg-primary/25 hover:text-primary-soft-foreground",
+          startCell && "bg-primary text-primary-foreground rounded-l-sm hover:bg-primary/90 hover:text-primary-foreground",
+          endCell && "bg-primary text-primary-foreground rounded-r-sm hover:bg-primary/90 hover:text-primary-foreground",
           !startCell && !endCell && !rangeCell && "rounded-sm"
         )
       };
@@ -5556,7 +6065,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         ref: root,
         class: rootClass.value
       }, passthroughAttrs.value), [
-        createVNode(_sfc_main$S, {
+        createVNode(_sfc_main$T, {
           "view-month": viewMonth.value,
           "on-view-month-change": setViewMonth,
           "focused-date": focusedDate.value,
@@ -5643,14 +6152,14 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const trigger = useTemplateRef("trigger");
     __expose({ el: computed(() => trigger.value?.el ?? null) });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1N), {
+      return openBlock(), createBlock(unref(_sfc_main$1O), {
         open: open.value,
         "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
         placement: "bottom-start",
         offset: 6
       }, {
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$1P), mergeProps({
+          createVNode(unref(_sfc_main$1Q), mergeProps({
             ref_key: "trigger",
             ref: trigger,
             id: triggerId.value,
@@ -5669,9 +6178,9 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 16, ["id", "disabled", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "class"]),
-          createVNode(unref(_sfc_main$1Q), { "is-bare": "" }, {
+          createVNode(unref(_sfc_main$1R), { "is-bare": "" }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$R, {
+              createVNode(_sfc_main$S, {
                 value: unref(date),
                 "default-month": defaultMonth.value,
                 min: __props.min,
@@ -5694,11 +6203,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$C = { class: "flex gap-1 rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md" };
-const _hoisted_2$p = ["aria-selected", "data-selected", "onClick"];
-const _hoisted_3$k = ["aria-selected", "data-selected", "onClick"];
-const _hoisted_4$e = ["name", "value"];
-const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const _hoisted_1$C = ["name", "value"];
 const _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{ name: "TimePicker", inheritAttrs: false },
   __name: "TimePicker",
@@ -5736,42 +6241,11 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     });
     const time = controlled.value;
     const open = ref(false);
-    const hours = useTemplateRef("hours");
-    const minutesEl = useTemplateRef("minutesEl");
-    const minutes = computed(() => {
-      const list = [];
-      for (let m = 0; m < 60; m += props.minuteStep) list.push(m);
-      return list;
-    });
-    watch(
-      open,
-      (isOpen) => {
-        if (!isOpen) return;
-        requestAnimationFrame(() => {
-          hours.value?.querySelector("[data-selected]")?.scrollIntoView({ block: "center" });
-          minutesEl.value?.querySelector("[data-selected]")?.scrollIntoView({ block: "center" });
-        });
-      },
-      { flush: "post" }
-    );
     const triggerState = computed(
       () => props.state ?? (finalInvalid.value ? InputState.Invalid : InputState.Default)
     );
-    function update(next) {
-      const merged = Temporal.PlainTime.from({
-        hour: next.hour ?? time.value?.hour ?? 0,
-        minute: next.minute ?? time.value?.minute ?? 0
-      });
-      controlled.setValue(merged);
-    }
-    function cellClass(isSelected) {
-      return cn(
-        "grid h-8 w-12 place-items-center rounded-sm text-sm transition-colors hover:bg-muted",
-        isSelected && "bg-primary text-primary-foreground hover:bg-primary"
-      );
-    }
-    function pad(n) {
-      return String(n).padStart(2, "0");
+    function onColumnsChange(next) {
+      controlled.setValue(next);
     }
     const displayText = computed(
       () => time.value ? props.format(time.value) : props.placeholder
@@ -5795,18 +6269,17 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       )
     );
     const labelClass = computed(() => cn("truncate", !time.value && "text-muted-foreground"));
-    const HOUR_LIST = HOURS;
     const trigger = useTemplateRef("trigger");
     __expose({ el: computed(() => trigger.value?.el ?? null) });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1N), {
+      return openBlock(), createBlock(unref(_sfc_main$1O), {
         open: open.value,
         "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
         placement: "bottom-start",
         offset: 6
       }, {
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$1P), mergeProps({
+          createVNode(unref(_sfc_main$1Q), mergeProps({
             ref_key: "trigger",
             ref: trigger,
             id: triggerId.value,
@@ -5825,49 +6298,13 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 16, ["id", "disabled", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "class"]),
-          createVNode(unref(_sfc_main$1Q), { "is-bare": "" }, {
+          createVNode(unref(_sfc_main$1R), { "is-bare": "" }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$C, [
-                createElementVNode("div", {
-                  ref_key: "hours",
-                  ref: hours,
-                  role: "listbox",
-                  "aria-label": "Hours",
-                  class: "flex max-h-56 flex-col gap-0.5 overflow-y-auto pr-1"
-                }, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(HOUR_LIST), (h) => {
-                    return openBlock(), createElementBlock("button", {
-                      key: h,
-                      type: "button",
-                      role: "option",
-                      "aria-selected": unref(time)?.hour === h,
-                      "data-selected": unref(time)?.hour === h ? "" : void 0,
-                      class: normalizeClass(cellClass(unref(time)?.hour === h)),
-                      onClick: ($event) => update({ hour: h })
-                    }, toDisplayString(pad(h)), 11, _hoisted_2$p);
-                  }), 128))
-                ], 512),
-                _cache[1] || (_cache[1] = createElementVNode("div", { class: "w-px self-stretch bg-border" }, null, -1)),
-                createElementVNode("div", {
-                  ref_key: "minutesEl",
-                  ref: minutesEl,
-                  role: "listbox",
-                  "aria-label": "Minutes",
-                  class: "flex max-h-56 flex-col gap-0.5 overflow-y-auto pl-1"
-                }, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(minutes.value, (m) => {
-                    return openBlock(), createElementBlock("button", {
-                      key: m,
-                      type: "button",
-                      role: "option",
-                      "aria-selected": unref(time)?.minute === m,
-                      "data-selected": unref(time)?.minute === m ? "" : void 0,
-                      class: normalizeClass(cellClass(unref(time)?.minute === m)),
-                      onClick: ($event) => update({ minute: m })
-                    }, toDisplayString(pad(m)), 11, _hoisted_3$k);
-                  }), 128))
-                ], 512)
-              ])
+              createVNode(_sfc_main$Q, {
+                value: unref(time),
+                "minute-step": __props.minuteStep,
+                "on-time-change": onColumnsChange
+              }, null, 8, ["value", "minute-step"])
             ]),
             _: 1
           }),
@@ -5876,7 +6313,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             type: "hidden",
             name: __props.name,
             value: hiddenValue.value
-          }, null, 8, _hoisted_4$e)) : createCommentVNode("", true)
+          }, null, 8, _hoisted_1$C)) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["open"]);
@@ -5966,14 +6403,14 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     const trigger = useTemplateRef("trigger");
     __expose({ el: computed(() => trigger.value?.el ?? null) });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1N), {
+      return openBlock(), createBlock(unref(_sfc_main$1O), {
         open: open.value,
         "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
         placement: "bottom-start",
         offset: 6
       }, {
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$1P), mergeProps({
+          createVNode(unref(_sfc_main$1Q), mergeProps({
             ref_key: "trigger",
             ref: trigger,
             id: triggerId.value,
@@ -5992,7 +6429,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 16, ["id", "disabled", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "class"]),
-          createVNode(unref(_sfc_main$1Q), { "is-bare": "" }, {
+          createVNode(unref(_sfc_main$1R), { "is-bare": "" }, {
             default: withCtx(() => [
               createVNode(_sfc_main$N, {
                 value: unref(range),
@@ -6960,7 +7397,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     const root = useTemplateRef("root");
     __expose({ el: computed(() => root.value?.el ?? null) });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1U), mergeProps({
+      return openBlock(), createBlock(unref(_sfc_main$1V), mergeProps({
         ref_key: "root",
         ref: root,
         orientation: unref(Orientation$1).Both,
@@ -7096,9 +7533,9 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     const trigger = useTemplateRef("trigger");
     __expose({ el: computed(() => trigger.value?.el ?? null) });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1N), null, {
+      return openBlock(), createBlock(unref(_sfc_main$1O), null, {
         default: withCtx(() => [
-          hasCustomTrigger.value ? (openBlock(), createBlock(unref(_sfc_main$1P), {
+          hasCustomTrigger.value ? (openBlock(), createBlock(unref(_sfc_main$1Q), {
             key: 0,
             ref_key: "trigger",
             ref: trigger,
@@ -7108,7 +7545,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "trigger")
             ]),
             _: 3
-          }, 512)) : isSwatchTrigger.value ? (openBlock(), createBlock(unref(_sfc_main$1P), mergeProps({
+          }, 512)) : isSwatchTrigger.value ? (openBlock(), createBlock(unref(_sfc_main$1Q), mergeProps({
             key: 1,
             ref_key: "trigger",
             ref: trigger,
@@ -7129,7 +7566,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               }, null, 8, ["color", "size", "is-disabled", "class"])
             ]),
             _: 1
-          }, 16, ["id", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid"])) : (openBlock(), createBlock(unref(_sfc_main$1P), mergeProps({
+          }, 16, ["id", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid"])) : (openBlock(), createBlock(unref(_sfc_main$1Q), mergeProps({
             key: 2,
             ref_key: "trigger",
             ref: trigger,
@@ -7151,12 +7588,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 16, ["id", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "disabled", "class"])),
-          createVNode(unref(_sfc_main$1Q), {
+          createVNode(unref(_sfc_main$1R), {
             "aria-label": "Color picker",
             class: "flex w-64 flex-col gap-3"
           }, {
             default: withCtx(() => [
-              createVNode(unref(_sfc_main$1L), null, {
+              createVNode(unref(_sfc_main$1M), null, {
                 default: withCtx(() => [
                   createVNode(_sfc_main$G, {
                     hue: hsv.value.h,
@@ -7167,7 +7604,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }),
-              createVNode(unref(_sfc_main$1L), null, {
+              createVNode(unref(_sfc_main$1M), null, {
                 default: withCtx(() => [
                   createVNode(_sfc_main$H, {
                     channel: unref(ColorChannel).Hue,
@@ -7178,7 +7615,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }),
-              __props.hasAlpha ? (openBlock(), createBlock(unref(_sfc_main$1L), { key: 0 }, {
+              __props.hasAlpha ? (openBlock(), createBlock(unref(_sfc_main$1M), { key: 0 }, {
                 default: withCtx(() => [
                   createVNode(_sfc_main$H, {
                     channel: unref(ColorChannel).Alpha,
@@ -7190,7 +7627,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               })) : createCommentVNode("", true),
-              createVNode(unref(_sfc_main$1L), null, {
+              createVNode(unref(_sfc_main$1M), null, {
                 default: withCtx(() => [
                   createVNode(_sfc_main$I, {
                     "aria-label": "Hex color",
@@ -7201,7 +7638,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }),
-              hasPresets.value ? (openBlock(), createBlock(unref(_sfc_main$1L), { key: 1 }, {
+              hasPresets.value ? (openBlock(), createBlock(unref(_sfc_main$1M), { key: 1 }, {
                 default: withCtx(() => [
                   createVNode(_sfc_main$D, {
                     colors: __props.presets ?? [],
@@ -7332,7 +7769,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     );
     __expose({ el });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1U), mergeProps({
+      return openBlock(), createBlock(unref(_sfc_main$1V), mergeProps({
         ref_key: "el",
         ref: el,
         orientation: unref(stepper).orientation,
@@ -7670,7 +8107,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         onClick: onContainerClick
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(tags), (t, i) => {
-          return openBlock(), createBlock(_sfc_main$1V, mergeProps({
+          return openBlock(), createBlock(_sfc_main$1W, mergeProps({
             key: `${t}-${i}`,
             variant: __props.tagVariant,
             "data-pending-delete": isPendingDelete(i) ? "" : void 0,
@@ -7879,7 +8316,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           onDragleave: onDragLeave,
           onDrop
         }, [
-          createVNode(unref(_sfc_main$1K), {
+          createVNode(unref(_sfc_main$1L), {
             icon: unref(UploadIcon),
             size: 28,
             class: normalizeClass(iconClass.value)
@@ -8070,7 +8507,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         onClick
       }), [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          createVNode(unref(_sfc_main$1K), {
+          createVNode(unref(_sfc_main$1L), {
             icon: unref(CloseIcon),
             size: 14
           }, null, 8, ["icon"])
@@ -8237,7 +8674,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         onClick
       }), [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          createVNode(unref(_sfc_main$1K), {
+          createVNode(unref(_sfc_main$1L), {
             icon: unref(CheckIcon),
             size: 14
           }, null, 8, ["icon"])
@@ -8972,7 +9409,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                 class: "inline-flex h-7 w-7 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
                 onClick: ($event) => applyAction(a)
               }, [
-                createVNode(unref(_sfc_main$1K), {
+                createVNode(unref(_sfc_main$1L), {
                   icon: a.icon,
                   size: 14
                 }, null, 8, ["icon"])
@@ -9184,7 +9621,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             class: "inline-flex h-5 w-5 items-center justify-center text-muted-foreground hover:text-foreground",
             onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
           }, [
-            createVNode(unref(_sfc_main$1K), {
+            createVNode(unref(_sfc_main$1L), {
               icon: unref(ChevronIcon),
               size: 12,
               class: normalizeClass(chevronClass.value)
@@ -9217,7 +9654,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             class: "ml-auto opacity-0 transition-opacity group-hover:opacity-100 inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground",
             onClick: copyPath
           }, [
-            createVNode(unref(_sfc_main$1K), {
+            createVNode(unref(_sfc_main$1L), {
               icon: unref(CopyIcon),
               size: 11
             }, null, 8, ["icon"])
@@ -9500,20 +9937,17 @@ const _hoisted_16$1 = {
   "aria-label": "End mode",
   class: "flex flex-col gap-2 text-sm"
 };
-const _hoisted_17$1 = { class: "flex items-center gap-2" };
-const _hoisted_18$1 = ["name", "checked", "disabled"];
-const _hoisted_19$1 = { class: "flex items-center gap-2" };
-const _hoisted_20$1 = ["name", "checked", "disabled"];
-const _hoisted_21$1 = ["value", "disabled"];
-const _hoisted_22$1 = { class: "flex items-center gap-2" };
-const _hoisted_23$1 = ["name", "checked", "disabled"];
-const _hoisted_24$1 = ["value", "disabled"];
-const _hoisted_25$1 = { class: "rounded-md bg-muted/40 p-3 text-xs" };
-const _hoisted_26$1 = {
+const _hoisted_17$1 = ["for"];
+const _hoisted_18$1 = ["for"];
+const _hoisted_19$1 = ["value", "disabled"];
+const _hoisted_20$1 = { class: "flex items-center gap-2" };
+const _hoisted_21$1 = ["for"];
+const _hoisted_22$1 = { class: "rounded-md bg-muted/40 p-3 text-xs" };
+const _hoisted_23$1 = {
   "aria-live": "polite",
   class: "grid grid-cols-2 gap-x-4 gap-y-0.5 sm:grid-cols-3"
 };
-const _hoisted_27$1 = ["name", "value"];
+const _hoisted_24$1 = ["name", "value"];
 const RecurrenceFreq = {
   /** Refers to a daily recurrence. */
   Daily: "DAILY",
@@ -9703,8 +10137,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       const raw = Number(event.target.value) || 1;
       update({ count: Math.max(1, raw), until: null });
     }
-    function onUntilInput(event) {
-      update({ until: parseISODate(event.target.value), count: void 0 });
+    function onUntilPick(next) {
+      update({ until: next, count: void 0 });
     }
     function weekdayClass(wd) {
       return cn(
@@ -9717,7 +10151,6 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     }
     const rootId = computed(() => props.id ?? ctx?.id);
     const endRadioName = computed(() => `${props.name ?? "rule"}-end`);
-    const untilValue = computed(() => formatISODate(rule.value.until ?? null));
     const serialized = computed(() => serializeRule(rule.value));
     const OWNED_ATTRS = /* @__PURE__ */ new Set(["class"]);
     const passthroughAttrs = computed(
@@ -9734,7 +10167,6 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const freqClass = cn(inputBaseVariants({ size: InputSize.Sm }), "w-32");
     const monthDayClass = cn(inputBaseVariants({ size: InputSize.Sm }), "w-20");
     const countClass = cn(inputBaseVariants({ size: InputSize.Sm }), "w-20");
-    const untilClass = cn(inputBaseVariants({ size: InputSize.Sm }), "w-44");
     __expose({ el });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({
@@ -9811,24 +10243,32 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           _cache[4] || (_cache[4] = createElementVNode("span", { class: "text-muted-foreground" }, "of the month", -1))
         ])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_16$1, [
-          createElementVNode("label", _hoisted_17$1, [
-            createElementVNode("input", {
-              type: "radio",
+          createElementVNode("label", {
+            for: `${unref(uid)}-end-never`,
+            class: "flex items-center gap-2"
+          }, [
+            createVNode(_sfc_main$1x, {
+              id: `${unref(uid)}-end-never`,
+              size: "sm",
               name: endRadioName.value,
               checked: endMode.value === "never",
               disabled: isDisabled.value || isReadOnly.value,
-              onChange: _cache[0] || (_cache[0] = ($event) => update({ count: void 0, until: null }))
-            }, null, 40, _hoisted_18$1),
+              onValueChange: _cache[0] || (_cache[0] = ($event) => update({ count: void 0, until: null }))
+            }, null, 8, ["id", "name", "checked", "disabled"]),
             _cache[5] || (_cache[5] = createTextVNode(" Never ", -1))
-          ]),
-          createElementVNode("label", _hoisted_19$1, [
-            createElementVNode("input", {
-              type: "radio",
+          ], 8, _hoisted_17$1),
+          createElementVNode("label", {
+            for: `${unref(uid)}-end-count`,
+            class: "flex items-center gap-2"
+          }, [
+            createVNode(_sfc_main$1x, {
+              id: `${unref(uid)}-end-count`,
+              size: "sm",
               name: endRadioName.value,
               checked: endMode.value === "count",
               disabled: isDisabled.value || isReadOnly.value,
-              onChange: _cache[1] || (_cache[1] = ($event) => update({ count: unref(rule).count ?? 10, until: null }))
-            }, null, 40, _hoisted_20$1),
+              onValueChange: _cache[1] || (_cache[1] = ($event) => update({ count: unref(rule).count ?? 10, until: null }))
+            }, null, 8, ["id", "name", "checked", "disabled"]),
             _cache[6] || (_cache[6] = createTextVNode(" After ", -1)),
             createElementVNode("input", {
               type: "number",
@@ -9838,31 +10278,39 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
               disabled: isDisabled.value || isReadOnly.value || endMode.value !== "count",
               class: normalizeClass(unref(countClass)),
               onInput: onCountInput
-            }, null, 42, _hoisted_21$1),
+            }, null, 42, _hoisted_19$1),
             _cache[7] || (_cache[7] = createTextVNode(" occurrences ", -1))
-          ]),
-          createElementVNode("label", _hoisted_22$1, [
-            createElementVNode("input", {
-              type: "radio",
-              name: endRadioName.value,
-              checked: endMode.value === "until",
-              disabled: isDisabled.value || isReadOnly.value,
-              onChange: _cache[2] || (_cache[2] = ($event) => update({ until: unref(addMonths)(__props.from, 6), count: void 0 }))
-            }, null, 40, _hoisted_23$1),
-            _cache[8] || (_cache[8] = createTextVNode(" On ", -1)),
-            createElementVNode("input", {
-              type: "date",
+          ], 8, _hoisted_18$1),
+          createElementVNode("div", _hoisted_20$1, [
+            createElementVNode("label", {
+              for: `${unref(uid)}-end-until`,
+              class: "flex items-center gap-2"
+            }, [
+              createVNode(_sfc_main$1x, {
+                id: `${unref(uid)}-end-until`,
+                size: "sm",
+                name: endRadioName.value,
+                checked: endMode.value === "until",
+                disabled: isDisabled.value || isReadOnly.value,
+                onValueChange: _cache[2] || (_cache[2] = ($event) => update({ until: unref(addMonths)(__props.from, 6), count: void 0 }))
+              }, null, 8, ["id", "name", "checked", "disabled"]),
+              _cache[8] || (_cache[8] = createTextVNode(" On ", -1))
+            ], 8, _hoisted_21$1),
+            createVNode(_sfc_main$M, {
+              id: `${unref(uid)}-end-date`,
+              size: "sm",
               "aria-label": "End date",
-              value: untilValue.value,
+              class: "w-44",
+              placeholder: "Pick a date",
+              value: unref(rule).until ?? null,
               disabled: isDisabled.value || isReadOnly.value || endMode.value !== "until",
-              class: normalizeClass(unref(untilClass)),
-              onInput: onUntilInput
-            }, null, 42, _hoisted_24$1)
+              onValueChange: onUntilPick
+            }, null, 8, ["id", "value", "disabled"])
           ])
         ]),
-        createElementVNode("div", _hoisted_25$1, [
+        createElementVNode("div", _hoisted_22$1, [
           _cache[9] || (_cache[9] = createElementVNode("div", { class: "mb-1 font-medium text-muted-foreground" }, "Next occurrences", -1)),
-          createElementVNode("ul", _hoisted_26$1, [
+          createElementVNode("ul", _hoisted_23$1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(preview.value, (d, i) => {
               return openBlock(), createElementBlock("li", {
                 key: i,
@@ -9876,7 +10324,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           type: "hidden",
           name: __props.name,
           value: serialized.value
-        }, null, 8, _hoisted_27$1)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_24$1)) : createCommentVNode("", true)
       ], 16, _hoisted_1$d);
     };
   }
@@ -10295,7 +10743,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(keys), (k, i) => {
               return openBlock(), createElementBlock(Fragment, { key: i }, [
                 i > 0 ? (openBlock(), createElementBlock("span", _hoisted_5$4, "+")) : createCommentVNode("", true),
-                createVNode(_sfc_main$1W, null, {
+                createVNode(_sfc_main$1X, null, {
                   default: withCtx(() => [
                     createTextVNode(toDisplayString(modifierLabel(k)), 1)
                   ]),
@@ -10483,7 +10931,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(buttonClass(key)),
                 onClick: ($event) => unref(controlled).setValue(key)
               }, [
-                createVNode(unref(_sfc_main$1K), {
+                createVNode(unref(_sfc_main$1L), {
                   icon: iconComp,
                   size: __props.size
                 }, null, 8, ["icon", "size"])
@@ -10594,12 +11042,12 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const ChevronDownIcon = ChevronDown;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({ class: wrapperClass.value }, passthroughAttrs.value), [
-        createVNode(unref(_sfc_main$1N), {
+        createVNode(unref(_sfc_main$1O), {
           open: open.value,
           onOpenChange
         }, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$1P), { "as-child": "" }, {
+            createVNode(unref(_sfc_main$1Q), { "as-child": "" }, {
               default: withCtx(() => [
                 createElementVNode("button", {
                   type: "button",
@@ -10616,7 +11064,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                     style: normalizeStyle({ fontFamily: unref(family) }),
                     class: "truncate text-foreground"
                   }, toDisplayString(current.value?.name ?? __props.placeholder), 5),
-                  createVNode(unref(_sfc_main$1K), {
+                  createVNode(unref(_sfc_main$1L), {
                     icon: unref(ChevronDownIcon),
                     size: 14,
                     class: "text-muted-foreground"
@@ -10625,10 +11073,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            createVNode(unref(_sfc_main$1Q), {
-              "is-bare": "",
-              class: "w-[20rem] p-2"
-            }, {
+            createVNode(unref(_sfc_main$1R), { class: "w-[20rem] p-2" }, {
               default: withCtx(() => [
                 createElementVNode("input", {
                   type: "search",
@@ -11103,7 +11548,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 class: "inline-flex h-7 w-7 items-center justify-center rounded text-destructive hover:bg-destructive-soft disabled:pointer-events-none disabled:opacity-40",
                 onClick: ($event) => removeStop(i)
               }, [
-                createVNode(unref(_sfc_main$1K), {
+                createVNode(unref(_sfc_main$1L), {
                   icon: unref(TrashIcon),
                   size: 12
                 }, null, 8, ["icon"])
@@ -11117,7 +11562,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           class: "inline-flex h-8 w-full items-center justify-center gap-1 rounded-md border border-dashed border-border text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
           onClick: addStop
         }, [
-          createVNode(unref(_sfc_main$1K), {
+          createVNode(unref(_sfc_main$1L), {
             icon: unref(PlusIcon),
             size: 12
           }, null, 8, ["icon"]),
@@ -11745,7 +12190,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const isPills = computed(() => props.variant === CategoryNavVariant.Pills);
     const navSize = computed(() => EmojiPickerSizes[props.size].nav);
-    const stripIconSize = computed(() => props.iconSize ?? Math.round(navSize.value * 0.8));
+    const stripIconSize = computed(() => props.iconSize ?? Math.round(navSize.value * 0.55));
     const stripItemStyle = computed(() => ({ height: `${navSize.value}px` }));
     const categories = computed(
       () => CategoryOrder.map((key) => ({ key, label: CategoryDisplays[key].label, icon: CategoryDisplays[key].Icon }))
@@ -11754,7 +12199,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       if (typeof key === "string") emit("select", key);
     }
     return (_ctx, _cache) => {
-      return isPills.value ? (openBlock(), createBlock(unref(_sfc_main$1X), {
+      return isPills.value ? (openBlock(), createBlock(unref(_sfc_main$1Y), {
         key: 0,
         type: unref(ToggleMode).Single,
         "is-attached": false,
@@ -11765,7 +12210,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(categories.value, (category) => {
-            return openBlock(), createBlock(unref(_sfc_main$1Y), {
+            return openBlock(), createBlock(unref(_sfc_main$1Z), {
               key: category.key,
               value: category.key,
               variant: unref(ToggleButtonVariant).Outline,
@@ -11779,7 +12224,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 8, ["type", "value"])) : (openBlock(), createBlock(unref(_sfc_main$1X), {
+      }, 8, ["type", "value"])) : (openBlock(), createBlock(unref(_sfc_main$1Y), {
         key: 1,
         type: unref(ToggleMode).Single,
         variant: unref(ToggleButtonGroupVariant).Segmented,
@@ -11790,7 +12235,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(categories.value, (category) => {
-            return openBlock(), createBlock(unref(_sfc_main$1Y), {
+            return openBlock(), createBlock(unref(_sfc_main$1Z), {
               key: category.key,
               value: category.key,
               title: category.label,
@@ -12090,11 +12535,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       return picker.activeCategory.value === RecentCategory ? EmojiEmptyLabels.recents : EmojiEmptyLabels.category;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1Z), { gap: "3" }, {
+      return openBlock(), createBlock(unref(_sfc_main$1_), { gap: "3" }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$2, [
             createElementVNode("span", _hoisted_2$2, toDisplayString(__props.label), 1),
-            createVNode(unref(_sfc_main$1_), {
+            createVNode(unref(_sfc_main$1$), {
               variant: isNoneSelected.value ? void 0 : unref(ButtonVariant).Outline,
               tone: isNoneSelected.value ? unref(ColorTone).Primary : unref(ColorTone).Neutral,
               size: unref(SizePreset).Sm,
@@ -12107,14 +12552,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               _: 1
             }, 8, ["variant", "tone", "size", "aria-pressed"])
           ]),
-          createVNode(_sfc_main$1z, {
+          createVNode(_sfc_main$1A, {
             size: searchSize.value,
             placeholder: "Search emoji…",
             "model-value": unref(picker).searchKeyword.value,
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(picker).searchKeyword.value = $event),
             onClear: _cache[2] || (_cache[2] = ($event) => unref(picker).searchKeyword.value = "")
           }, null, 8, ["size", "model-value"]),
-          createVNode(unref(_sfc_main$1Z), { gap: "2" }, {
+          createVNode(unref(_sfc_main$1_), { gap: "2" }, {
             default: withCtx(() => [
               !unref(picker).showSearch.value ? (openBlock(), createBlock(_sfc_main$7, {
                 key: 0,
@@ -12190,16 +12635,16 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       if (entry !== null) openCtl.setValue(false);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1N), {
+      return openBlock(), createBlock(unref(_sfc_main$1O), {
         open: isOpenNow.value,
         placement: __props.placement,
         onOpenChange: _cache[0] || (_cache[0] = ($event) => unref(openCtl).setValue($event))
       }, {
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$1P), { "as-child": "" }, {
+          createVNode(unref(_sfc_main$1Q), { "as-child": "" }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "trigger", {}, () => [
-                createVNode(unref(_sfc_main$1_), {
+                createVNode(unref(_sfc_main$1$), {
                   variant: unref(ButtonVariant).Ghost,
                   tone: unref(ColorTone).Neutral,
                   size: unref(SizePreset).Sm,
@@ -12219,12 +12664,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }),
-          createVNode(unref(_sfc_main$1Q), {
+          createVNode(unref(_sfc_main$1R), {
             class: "w-80",
             padding: "sm"
           }, {
             default: withCtx(() => [
-              createVNode(unref(_sfc_main$1L), null, {
+              createVNode(unref(_sfc_main$1M), null, {
                 default: withCtx(() => [
                   createVNode(_sfc_main$4, {
                     "model-value": currentValue.value,
@@ -12304,16 +12749,16 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       emit("value-change", ratio);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1$), {
+      return openBlock(), createBlock(unref(_sfc_main$20), {
         label: "Size",
         orientation: "vertical",
         divided: false
       }, {
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$20), { label: "Emoji size" }, {
+          createVNode(unref(_sfc_main$21), { label: "Emoji size" }, {
             default: withCtx(() => [
               (openBlock(true), createElementBlock(Fragment, null, renderList(presets.value, (entry) => {
-                return openBlock(), createBlock(unref(_sfc_main$21), {
+                return openBlock(), createBlock(unref(_sfc_main$22), {
                   key: entry.preset,
                   size: __props.size,
                   selected: entry.selected,
@@ -12592,15 +13037,15 @@ export {
   ADDRESS_COUNTRIES as A,
   BUILT_IN_FONTS as B,
   CategoryDisplays as C,
-  _sfc_main$T as D,
-  _sfc_main$V as E,
-  _sfc_main$Y as F,
-  _sfc_main$W as G,
-  _sfc_main$U as H,
+  _sfc_main$U as D,
+  _sfc_main$W as E,
+  _sfc_main$Z as F,
+  _sfc_main$X as G,
+  _sfc_main$V as H,
   CronFieldKind as I,
   _sfc_main$b as J,
-  _sfc_main$1l as K,
-  _sfc_main$Q as L,
+  _sfc_main$1m as K,
+  _sfc_main$R as L,
   _sfc_main$M as M,
   _sfc_main$K as N,
   _sfc_main$P as O,
@@ -12612,40 +13057,40 @@ export {
   _sfc_main$t as U,
   _sfc_main$s as V,
   _sfc_main$r as W,
-  _sfc_main$1E as X,
+  _sfc_main$1F as X,
   EmojiEmptyLabels as Y,
   _sfc_main$4 as Z,
   _sfc_main$9 as _,
-  _sfc_main$R as a,
-  _sfc_main$17 as a$,
+  _sfc_main$S as a,
+  _sfc_main$18 as a$,
   EmojiPickerSizes as a0,
   EmojiRecentsKey as a1,
   _sfc_main$2 as a2,
   EmojiTileShape as a3,
-  _sfc_main$1t as a4,
-  _sfc_main$1d as a5,
+  _sfc_main$1u as a4,
+  _sfc_main$1e as a5,
   FileRejectionReason as a6,
   _sfc_main$w as a7,
   _sfc_main$c as a8,
-  _sfc_main$1H as a9,
-  _sfc_main$1m as aA,
-  _sfc_main$12 as aB,
-  _sfc_main$$ as aC,
-  _sfc_main$_ as aD,
-  _sfc_main$11 as aE,
-  _sfc_main$10 as aF,
-  _sfc_main$1B as aG,
+  _sfc_main$1I as a9,
+  _sfc_main$1n as aA,
+  _sfc_main$13 as aB,
+  _sfc_main$10 as aC,
+  _sfc_main$$ as aD,
+  _sfc_main$12 as aE,
+  _sfc_main$11 as aF,
+  _sfc_main$1C as aG,
   PHONE_COUNTRIES as aH,
-  _sfc_main$1A as aI,
-  _sfc_main$1e as aJ,
-  _sfc_main$1k as aK,
+  _sfc_main$1B as aI,
+  _sfc_main$1f as aJ,
+  _sfc_main$1l as aK,
   _sfc_main$8 as aL,
   PickerElement as aM,
-  _sfc_main$1n as aN,
+  _sfc_main$1o as aN,
   PinInputType as aO,
-  _sfc_main$1w as aP,
-  _sfc_main$1r as aQ,
-  _sfc_main$1o as aR,
+  _sfc_main$1x as aP,
+  _sfc_main$1s as aQ,
+  _sfc_main$1p as aR,
   RadioGroupKey as aS,
   _sfc_main$N as aT,
   _sfc_main$1 as aU,
@@ -12654,14 +13099,14 @@ export {
   RecurrenceEndMode as aX,
   RecurrenceFreq as aY,
   RecurrenceWeekday as aZ,
-  _sfc_main$1z as a_,
-  _sfc_main$1I as aa,
+  _sfc_main$1A as a_,
+  _sfc_main$1J as aa,
   GradientKind as ab,
   _sfc_main$a as ac,
   _sfc_main$d as ad,
-  _sfc_main$1i as ae,
+  _sfc_main$1j as ae,
   InputBorder as af,
-  _sfc_main$1h as ag,
+  _sfc_main$1i as ag,
   InputRing as ah,
   InputSize as ai,
   InputState as aj,
@@ -12670,24 +13115,24 @@ export {
   _sfc_main$e as am,
   _sfc_main$f as an,
   KnobTone as ao,
-  _sfc_main$1J as ap,
-  _sfc_main$1g as aq,
-  _sfc_main$1G as ar,
-  _sfc_main$1c as as,
-  _sfc_main$18 as at,
-  _sfc_main$1a as au,
+  _sfc_main$1K as ap,
+  _sfc_main$1h as aq,
+  _sfc_main$1H as ar,
+  _sfc_main$1d as as,
+  _sfc_main$19 as at,
+  _sfc_main$1b as au,
   ListboxIndicator as av,
-  _sfc_main$1b as aw,
-  _sfc_main$19 as ax,
+  _sfc_main$1c as aw,
+  _sfc_main$1a as ax,
   _sfc_main$l as ay,
   MarkdownEditorView as az,
   CategoryNavVariant as b,
-  _sfc_main$14 as b0,
-  _sfc_main$13 as b1,
+  _sfc_main$15 as b0,
+  _sfc_main$14 as b1,
   SelectSize as b2,
-  _sfc_main$15 as b3,
-  _sfc_main$16 as b4,
-  _sfc_main$1u as b5,
+  _sfc_main$16 as b3,
+  _sfc_main$17 as b4,
+  _sfc_main$1v as b5,
   StepStatus as b6,
   _sfc_main$B as b7,
   _sfc_main$A as b8,
@@ -12697,15 +13142,15 @@ export {
   _sfc_main$z as ba,
   SubmitTrigger as bb,
   SwatchShape as bc,
-  _sfc_main$1v as bd,
-  _sfc_main$1q as be,
+  _sfc_main$1w as bd,
+  _sfc_main$1r as be,
   _sfc_main$x as bf,
-  _sfc_main$1D as bg,
-  _sfc_main$1y as bh,
-  _sfc_main$1F as bi,
+  _sfc_main$1E as bg,
+  _sfc_main$1z as bh,
+  _sfc_main$1G as bi,
   _sfc_main$O as bj,
   _sfc_main$L as bk,
-  _sfc_main$1C as bl,
+  _sfc_main$1D as bl,
   _sfc_main$q as bm,
   _sfc_main$p as bn,
   _sfc_main$o as bo,
@@ -12723,14 +13168,14 @@ export {
   CategoryOrder as c,
   CenterEmojiSize as d,
   CenterEmojiSizeDisplays as e,
-  _sfc_main$1j as f,
+  _sfc_main$1k as f,
   _sfc_main as g,
-  _sfc_main$1x as h,
-  _sfc_main$1s as i,
-  _sfc_main$1p as j,
+  _sfc_main$1y as h,
+  _sfc_main$1t as i,
+  _sfc_main$1q as j,
   CheckboxGroupKey as k,
   CheckboxVariant as l,
-  _sfc_main$1f as m,
+  _sfc_main$1g as m,
   _sfc_main$m as n,
   _sfc_main$G as o,
   ColorChannel as p,
@@ -12742,7 +13187,7 @@ export {
   _sfc_main$D as v,
   ColorSwatchSize as w,
   _sfc_main$F as x,
-  _sfc_main$Z as y,
-  _sfc_main$X as z
+  _sfc_main$_ as y,
+  _sfc_main$Y as z
 };
-//# sourceMappingURL=ChatComposer.vue_vue_type_script_setup_true_lang-lNcRhKIv.js.map
+//# sourceMappingURL=ChatComposer.vue_vue_type_script_setup_true_lang-DfeVsj9h.js.map