@leavepulse/ui 0.43.4 → 0.45.0

package/dist/chunks/{LpRadioGroup-xPIuVDO_.js → LpRadioGroup-DmEW0l78.js}

@@ -1,5 +1,6 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, Fragment, renderList, createVNode, createElementVNode, createTextVNode, toDisplayString } from "vue";
 import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator } from "reka-ui";
+import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -12,13 +13,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["update:modelValue"],
   setup(__props) {
+    const props = __props;
+    const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }));
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       "flex flex-col gap-2"
     );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps({
         "model-value": __props.modelValue,
-        disabled: __props.disabled,
+        disabled: unref(field).disabled,
+        required: unref(field).required,
+        "aria-labelledby": unref(field).labelId,
+        "aria-describedby": unref(field).describedBy,
+        "aria-invalid": unref(field).invalid || void 0,
         class: unref(rootClass)
       }, unref(rest), {
         "onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => _ctx.$emit("update:modelValue", v))
@@ -50,7 +57,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])
         ]),
         _: 3
-      }, 16, ["model-value", "disabled", "class"]);
+      }, 16, ["model-value", "disabled", "required", "aria-labelledby", "aria-describedby", "aria-invalid", "class"]);
     };
   }
 });

package/dist/chunks/LpRangeCalendar-DZuaRV0W.js

@@ -0,0 +1,331 @@
+import { defineComponent, shallowRef, watch, computed, ref, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeClass, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, nextTick } from "vue";
+import { today, getLocalTimeZone } from "@internationalized/date";
+import { RangeCalendarRoot, RangeCalendarHeader, RangeCalendarPrev, RangeCalendarHeading, RangeCalendarNext, RangeCalendarGrid, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarGridBody, RangeCalendarCell, RangeCalendarCellTrigger } from "reka-ui";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { normalizeRange, parseIsoDay, reshapeRange } from "../components/dateRange.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
+const _hoisted_1 = { class: "flex gap-4" };
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpRangeCalendar",
+  props: {
+    modelValue: {},
+    min: {},
+    max: {},
+    isDisabled: {},
+    isDateUnavailable: {},
+    months: { default: 1 },
+    maximumDays: {},
+    locale: {},
+    weekdayFormat: { default: "short" },
+    labels: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const text = useLabels(
+      "rangeCalendar",
+      { previous: "Previous month", next: "Next month" },
+      () => props.labels
+    );
+    function toReka(range) {
+      const r = normalizeRange(range);
+      return { start: parseIsoDay(r?.start), end: parseIsoDay(r?.end) };
+    }
+    const draft = shallowRef(toReka(props.modelValue));
+    watch(
+      () => [props.modelValue?.start, props.modelValue?.end],
+      () => {
+        draft.value = toReka(props.modelValue);
+      }
+    );
+    const placeholder = shallowRef(draft.value.start ?? today(getLocalTimeZone()));
+    function onUpdate(v) {
+      draft.value = v ?? { start: void 0, end: void 0 };
+      if (v?.start && v.end) emit("update:modelValue", { start: v.start.toString(), end: v.end.toString() }, { via: "pick" });
+    }
+    const committed = computed(() => normalizeRange(props.modelValue));
+    function allowed(iso) {
+      const day = parseIsoDay(iso);
+      if (!day) return false;
+      if (minValue.value && day.compare(minValue.value) < 0) return false;
+      if (maxValue.value && day.compare(maxValue.value) > 0) return false;
+      return !(props.isDisabled?.(iso) ?? false);
+    }
+    function reshape(anchor2, moving) {
+      return reshapeRange(anchor2, moving, {
+        allowed,
+        unavailable: props.isDateUnavailable,
+        maximumDays: props.maximumDays
+      });
+    }
+    const root = ref(null);
+    const HOLD_MS = 320;
+    const SLOP_PX = 8;
+    let anchor = null;
+    let pointerId = -1;
+    let armed = false;
+    let held = false;
+    let dragged = false;
+    let swallowClick = false;
+    let lastDay = "";
+    let startX = 0;
+    let startY = 0;
+    let holdTimer;
+    const dragging = ref(false);
+    function cellAt(x, y) {
+      const hit = document.elementFromPoint(x, y);
+      const cell = hit?.closest("[data-reka-calendar-cell-trigger]");
+      if (!cell || !root.value?.contains(cell)) return null;
+      if (cell.hasAttribute("data-outside-view") || cell.hasAttribute("data-disabled")) return null;
+      return cell;
+    }
+    function reset() {
+      if (holdTimer) clearTimeout(holdTimer);
+      holdTimer = void 0;
+      anchor = null;
+      armed = false;
+      held = false;
+      dragged = false;
+      dragging.value = false;
+    }
+    function onPointerDown(e) {
+      if (e.button !== 0) return;
+      const cell = e.target?.closest("[data-reka-calendar-cell-trigger]");
+      const day = cell?.dataset.value;
+      if (!cell || !day || cell.hasAttribute("data-disabled") || cell.hasAttribute("data-unavailable")) return;
+      reset();
+      const range = committed.value;
+      const onEdge = !!range && (day === range.start || day === range.end);
+      anchor = onEdge && range ? day === range.start ? range.end : range.start : day;
+      pointerId = e.pointerId;
+      lastDay = day;
+      startX = e.clientX;
+      startY = e.clientY;
+      if (e.pointerType !== "touch" || onEdge) {
+        armed = true;
+        return;
+      }
+      holdTimer = setTimeout(() => {
+        holdTimer = void 0;
+        armed = true;
+        held = true;
+        dragging.value = true;
+        draft.value = toReka({ start: day, end: day });
+        navigator.vibrate?.(8);
+      }, HOLD_MS);
+    }
+    function onPointerMove(e) {
+      if (anchor === null || e.pointerId !== pointerId) return;
+      if (!armed) {
+        if (Math.hypot(e.clientX - startX, e.clientY - startY) > SLOP_PX) reset();
+        return;
+      }
+      const day = cellAt(e.clientX, e.clientY)?.dataset.value;
+      if (!day || day === lastDay) return;
+      const next = reshape(anchor, day);
+      if (!next) return;
+      lastDay = day;
+      if (!dragged) {
+        dragged = true;
+        dragging.value = true;
+        try {
+          root.value?.setPointerCapture(e.pointerId);
+        } catch {
+        }
+      }
+      draft.value = toReka(next);
+    }
+    function onPointerUp(e) {
+      if (anchor === null || e.pointerId !== pointerId) return;
+      const finished = dragged || held;
+      if (root.value?.hasPointerCapture(e.pointerId)) root.value.releasePointerCapture(e.pointerId);
+      reset();
+      if (!finished || e.type === "pointercancel") {
+        if (finished) draft.value = toReka(props.modelValue);
+        return;
+      }
+      swallowClick = true;
+      setTimeout(() => swallowClick = false, 0);
+      const { start, end } = draft.value;
+      if (start && end) emit("update:modelValue", { start: start.toString(), end: end.toString() }, { via: "drag" });
+    }
+    function onClickCapture(e) {
+      if (!swallowClick) return;
+      swallowClick = false;
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    function onTouchMove(e) {
+      if (armed && anchor !== null) e.preventDefault();
+    }
+    function onContextMenu(e) {
+      if (held || dragging.value) e.preventDefault();
+    }
+    onMounted(() => root.value?.addEventListener("touchmove", onTouchMove, { passive: false }));
+    onBeforeUnmount(() => {
+      root.value?.removeEventListener("touchmove", onTouchMove);
+      reset();
+    });
+    const STEP = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+    function onKeydownCapture(e) {
+      const step = STEP[e.key];
+      const range = committed.value;
+      if (!e.shiftKey || step === void 0 || !range) return;
+      const day = e.target?.dataset?.value;
+      if (!day || day !== range.start && day !== range.end) return;
+      const moved = parseIsoDay(day)?.add({ days: step }).toString();
+      if (!moved) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const other = day === range.start ? range.end : range.start;
+      const next = reshape(other, moved);
+      if (!next) return;
+      placeholder.value = parseIsoDay(moved) ?? placeholder.value;
+      emit("update:modelValue", next, { via: "keyboard" });
+      void nextTick(() => root.value?.querySelector(`[data-value="${moved}"]:not([data-outside-view])`)?.focus());
+    }
+    const minValue = computed(() => parseIsoDay(props.min));
+    const maxValue = computed(() => parseIsoDay(props.max));
+    const disabledFor = (date) => props.isDisabled?.(date.toString()) ?? false;
+    const unavailableFor = (date) => props.isDateUnavailable?.(date.toString()) ?? false;
+    const navBtn = "flex size-8 items-center justify-center rounded-control text-muted outline-none transition-[color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:bg-surface-soft hover:text-ink active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring";
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      "inline-block rounded-card border border-line bg-surface-raised p-3"
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(RangeCalendarRoot), mergeProps({
+        ref: (c) => root.value = c?.$el ?? null,
+        placeholder: placeholder.value,
+        "onUpdate:placeholder": _cache[0] || (_cache[0] = ($event) => placeholder.value = $event),
+        "model-value": draft.value,
+        "min-value": minValue.value,
+        "max-value": maxValue.value,
+        "is-date-disabled": disabledFor,
+        "is-date-unavailable": unavailableFor,
+        "number-of-months": __props.months,
+        "maximum-days": __props.maximumDays,
+        locale: __props.locale,
+        "weekday-format": __props.weekdayFormat,
+        "prevent-deselect": "",
+        "paged-navigation": "",
+        "fixed-weeks": "",
+        class: unref(rootClass)
+      }, unref(rest), {
+        "data-dragging": dragging.value || void 0,
+        "onUpdate:modelValue": onUpdate,
+        onPointerdown: onPointerDown,
+        onPointermove: onPointerMove,
+        onPointerup: onPointerUp,
+        onPointercancel: onPointerUp,
+        onClickCapture,
+        onContextmenu: onContextMenu,
+        onKeydownCapture
+      }), {
+        default: withCtx(({ weekDays, grid }) => [
+          createVNode(unref(RangeCalendarHeader), { class: "mb-2 flex items-center justify-between gap-2" }, {
+            default: withCtx(() => [
+              createVNode(unref(RangeCalendarPrev), {
+                class: normalizeClass(navBtn),
+                "aria-label": unref(text).previous
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$1, {
+                    name: "lucide:chevron-left",
+                    size: 16
+                  })
+                ]),
+                _: 1
+              }, 8, ["aria-label"]),
+              createVNode(unref(RangeCalendarHeading), { class: "text-sm font-semibold text-ink" }),
+              createVNode(unref(RangeCalendarNext), {
+                class: normalizeClass(navBtn),
+                "aria-label": unref(text).next
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$1, {
+                    name: "lucide:chevron-right",
+                    size: 16
+                  })
+                ]),
+                _: 1
+              }, 8, ["aria-label"])
+            ]),
+            _: 1
+          }),
+          createElementVNode("div", _hoisted_1, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(grid, (month) => {
+              return openBlock(), createBlock(unref(RangeCalendarGrid), {
+                key: month.value.toString(),
+                class: "border-collapse select-none"
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(RangeCalendarGridHead), null, {
+                    default: withCtx(() => [
+                      createVNode(unref(RangeCalendarGridRow), { class: "mb-1 flex" }, {
+                        default: withCtx(() => [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(weekDays, (day) => {
+                            return openBlock(), createBlock(unref(RangeCalendarHeadCell), {
+                              key: day,
+                              class: "w-9 text-center text-[11px] font-medium text-muted"
+                            }, {
+                              default: withCtx(() => [
+                                createTextVNode(toDisplayString(day), 1)
+                              ]),
+                              _: 2
+                            }, 1024);
+                          }), 128))
+                        ]),
+                        _: 2
+                      }, 1024)
+                    ]),
+                    _: 2
+                  }, 1024),
+                  createVNode(unref(RangeCalendarGridBody), null, {
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(month.rows, (weekDates, i) => {
+                        return openBlock(), createBlock(unref(RangeCalendarGridRow), {
+                          key: `w-${i}`,
+                          class: "flex"
+                        }, {
+                          default: withCtx(() => [
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(weekDates, (weekDate) => {
+                              return openBlock(), createBlock(unref(RangeCalendarCell), {
+                                key: weekDate.toString(),
+                                date: weekDate,
+                                class: "py-0.5"
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(unref(RangeCalendarCellTrigger), {
+                                    day: weekDate,
+                                    month: month.value,
+                                    class: "flex h-8 w-9 items-center justify-center rounded-control text-sm text-ink outline-none transition-[color,background-color] duration-[var(--duration-fast)] hover:bg-surface-soft focus-visible:ring-2 focus-visible:ring-ring data-[outside-view]:text-muted/40 data-[today]:font-semibold data-[today]:not-data-[selected]:text-brand data-[selected]:rounded-none data-[selected]:bg-brand-soft data-[highlighted]:rounded-none data-[highlighted]:bg-brand-soft/60 data-[selection-start]:rounded-l-control data-[highlighted-start]:rounded-l-control data-[selection-end]:rounded-r-control data-[highlighted-end]:rounded-r-control data-[selection-start]:bg-brand data-[selection-start]:font-semibold data-[selection-start]:text-ink-inverse data-[selection-end]:bg-brand data-[selection-end]:font-semibold data-[selection-end]:text-ink-inverse data-[outside-view]:data-[selected]:bg-transparent data-[outside-view]:data-[highlighted]:bg-transparent data-[disabled]:pointer-events-none data-[disabled]:opacity-35 data-[unavailable]:pointer-events-none data-[unavailable]:line-through data-[unavailable]:opacity-35 data-[selection-start]:cursor-grab data-[selection-end]:cursor-grab data-[selection-start]:touch-none data-[selection-end]:touch-none [-webkit-touch-callout:none] in-data-[dragging]:cursor-grabbing"
+                                  }, null, 8, ["day", "month"])
+                                ]),
+                                _: 2
+                              }, 1032, ["date"]);
+                            }), 128))
+                          ]),
+                          _: 2
+                        }, 1024);
+                      }), 128))
+                    ]),
+                    _: 2
+                  }, 1024)
+                ]),
+                _: 2
+              }, 1024);
+            }), 128))
+          ])
+        ]),
+        _: 1
+      }, 16, ["placeholder", "model-value", "min-value", "max-value", "number-of-months", "maximum-days", "locale", "weekday-format", "class", "data-dragging"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpRollingText-CM5gkSeF.js → LpRollingText-DB7upf-5.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, Transition, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
-import '../assets/LpRollingText-CR1mb0Vt.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/LpRollingText-BGnE6q9j.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpRollingText",
   props: {
     value: {},

package/dist/chunks/{LpScrollArea-D8xyKXcF.js → LpScrollArea-Bry1fdOM.js}

@@ -19,6 +19,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => viewportRef.value?.viewportElement ?? null
     );
     __expose({ viewportEl });
+    const pointerFocus = ref(false);
+    function onViewportPointerDown() {
+      pointerFocus.value = true;
+    }
+    function onViewportBlur() {
+      pointerFocus.value = false;
+    }
     const dragging = ref(false);
     const atTop = ref(true);
     const atBottom = ref(true);
@@ -124,9 +131,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(ScrollAreaViewport), {
             ref_key: "viewportRef",
             ref: viewportRef,
-            class: normalizeClass(["w-full min-h-0 min-w-0 flex-1 [&>div]:!block [&>div]:!min-w-0", __props.instant ? "" : "scroll-smooth motion-reduce:scroll-auto"]),
+            class: normalizeClass(["w-full min-h-0 min-w-0 flex-1 rounded-[inherit] outline-none [&>div]:!block [&>div]:!min-w-0", [
+              __props.instant ? "" : "scroll-smooth motion-reduce:scroll-auto",
+              pointerFocus.value ? "" : "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+            ]]),
             style: normalizeStyle(__props.fade ? { maskImage: fadeMask.value, WebkitMaskImage: fadeMask.value } : void 0),
-            onScrollPassive: onViewportScroll
+            onScrollPassive: onViewportScroll,
+            onPointerdown: onViewportPointerDown,
+            onFocusout: _cache[0] || (_cache[0] = (e) => e.target === e.currentTarget && onViewportBlur())
           }, {
             default: withCtx(() => [
               createElementVNode("div", {

package/dist/chunks/{LpSection-aM6J_u51.js → LpSection-tKEH0jYf.js}

@@ -1,6 +1,6 @@
 import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
 import { tv } from "tailwind-variants";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 const _hoisted_1 = { class: "min-w-0 flex-1 break-words" };
 const _hoisted_2 = { class: "flex flex-wrap items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/{LpSegmented-fV0Sk92p.js → LpSegmented-C09EEam2.js}

@@ -1,9 +1,10 @@
 import { defineComponent, useId, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createCommentVNode, toDisplayString } from "vue";
 import { Motion } from "motion-v";
 import { ToggleGroupRoot, ToggleGroupItem } from "reka-ui";
+import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 const _hoisted_1 = {
   key: 2,
   class: "relative z-10"
@@ -37,13 +38,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         props.block ? "flex w-full" : ""
       ].join(" ")
     );
+    const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }));
     const pillId = `lp-segmented-${useId()}`;
     const pillTransition = usePillTransition();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ToggleGroupRoot), mergeProps({
         "model-value": __props.modelValue,
         type: "single",
-        disabled: __props.disabled,
+        disabled: unref(field).disabled,
+        "aria-labelledby": unref(field).labelId,
+        "aria-describedby": unref(field).describedBy,
         rovingFocus: true,
         class: unref(rootClass)
       }, unref(rest), { "onUpdate:modelValue": onChange }), {
@@ -52,7 +56,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             return openBlock(), createBlock(unref(ToggleGroupItem), {
               key: opt.value,
               value: opt.value,
-              "aria-label": opt.label ? void 0 : opt.value,
+              "aria-label": opt.ariaLabel ?? (opt.label ? void 0 : opt.value),
               class: normalizeClass(["relative inline-flex h-full items-center justify-center gap-1.5 rounded-md px-3 font-medium outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] focus-visible:ring-2 focus-visible:ring-ring data-[state=on]:text-ink data-[state=off]:text-muted data-[state=off]:hover:text-ink disabled:cursor-not-allowed disabled:opacity-55", __props.block ? "flex-1" : ""])
             }, {
               default: withCtx(() => [
@@ -75,7 +79,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 16, ["model-value", "disabled", "class"]);
+      }, 16, ["model-value", "disabled", "aria-labelledby", "aria-describedby", "class"]);
     };
   }
 });

package/dist/chunks/{LpSelect-ANIVtrpM.js → LpSelect-DNIL6MB9.js}

@@ -1,25 +1,21 @@
-import { defineComponent, computed, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, toDisplayString, withModifiers, createCommentVNode, createTextVNode, Fragment, renderList, normalizeStyle, createElementVNode } from "vue";
+import { defineComponent, computed, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, withModifiers, createCommentVNode, toDisplayString, createTextVNode, Fragment, renderList, normalizeStyle, createElementVNode } from "vue";
 import { ComboboxRoot, ComboboxAnchor, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxInput, ComboboxViewport, ComboboxEmpty, ComboboxItem, ComboboxItemIndicator } from "reka-ui";
+import { useFieldControl } from "../composables/useField.js";
+import { useLabels } from "../composables/useLpConfig.js";
 import { POPOVER_PANEL, OPTION_ITEM } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-const _hoisted_1 = {
-  key: 0,
-  class: "truncate"
-};
+import { _ as _sfc_main$2 } from "./LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$1 } from "./LpRollingText-DB7upf-5.js";
+const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = {
-  key: 1,
-  class: "truncate text-muted"
-};
-const _hoisted_3 = {
   key: 0,
   class: "border-b border-line p-2"
 };
-const _hoisted_4 = {
+const _hoisted_3 = {
   key: 0,
   class: "px-3 py-4 text-center text-sm italic text-muted"
 };
-const _hoisted_5 = { class: "flex flex-col" };
-const _hoisted_6 = {
+const _hoisted_4 = { class: "flex flex-col" };
+const _hoisted_5 = {
   key: 0,
   class: "text-xs text-muted"
 };
@@ -35,6 +31,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     multiple: { type: Boolean, default: false },
     clearable: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
+    invalid: { type: Boolean },
     emptyText: { default: "Nothing found" },
     searchTerm: { default: void 0 },
     loading: { type: Boolean, default: false },
@@ -50,6 +47,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       lg: "h-(--size-control-lg)"
     };
     const anchorHeight = computed(() => SIZE_HEIGHT[props.size]);
+    const field = useFieldControl(() => ({
+      wrapped: false,
+      invalid: props.invalid,
+      disabled: props.disabled
+    }));
+    const labels = useLabels("select", { clear: "Clear", selected: "{count} selected" });
     const emit = __emit;
     const serverSide = computed(() => props.searchTerm !== void 0);
     const localQuery = ref("");
@@ -93,7 +96,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (arr.length === 0) return "";
         if (arr.length === 1)
           return props.options.find((o) => o.value === arr[0])?.label ?? String(arr[0]);
-        return `${arr.length} selected`;
+        return labels.value.selected.replace("{count}", String(arr.length));
       }
       return props.options.find((o) => o.value === v)?.label ?? "";
     });
@@ -112,7 +115,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(ComboboxRoot), {
         "model-value": comboModel.value,
         multiple: __props.multiple,
-        disabled: __props.disabled,
+        disabled: unref(field).disabled,
         "ignore-filter": true,
         "reset-search-term-on-select": false,
         "reset-search-term-on-blur": false,
@@ -124,32 +127,48 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(ComboboxAnchor), {
             class: normalizeClass([
               anchorHeight.value,
-              "group flex w-full items-center gap-2 rounded-control border border-line bg-surface-soft px-3 text-sm text-ink transition-colors duration-[var(--duration-fast)] focus-within:border-brand focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55"
+              "group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-sm text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
+              unref(field).invalid ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand focus-within:ring-ring"
             ])
           }, {
             default: withCtx(() => [
-              createVNode(unref(ComboboxTrigger), { class: "flex min-w-0 flex-1 items-center gap-2 outline-none" }, {
+              createVNode(unref(ComboboxTrigger), {
+                id: unref(field).id,
+                "aria-invalid": unref(field).invalid || void 0,
+                "aria-describedby": unref(field).describedBy,
+                class: "flex min-w-0 flex-1 items-center gap-2 outline-none"
+              }, {
                 default: withCtx(() => [
-                  displayLabel.value ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(displayLabel.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.placeholder), 1))
+                  createVNode(_sfc_main$1, {
+                    value: displayLabel.value || __props.placeholder || "",
+                    align: "start",
+                    class: normalizeClass(["min-w-0", displayLabel.value ? "" : "text-muted"])
+                  }, null, 8, ["value", "class"])
                 ]),
                 _: 1
-              }),
+              }, 8, ["id", "aria-invalid", "aria-describedby"]),
               __props.clearable && hasValue.value ? (openBlock(), createElementBlock("button", {
                 key: 0,
                 type: "button",
                 class: "group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink",
-                "aria-label": "Clear",
-                onPointerdown: withModifiers(clear, ["prevent"])
+                "aria-label": unref(labels).clear,
+                onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
+                }, ["prevent"])),
+                onClick: clear
               }, [
-                createVNode(_sfc_main$1, {
+                createVNode(_sfc_main$2, {
                   name: "lucide:x",
                   size: 16,
                   class: "transition-transform duration-200 ease-[var(--ease-emphasized)] group-hover:rotate-90 group-active:scale-90 motion-reduce:group-hover:rotate-0"
                 })
-              ], 32)) : createCommentVNode("", true),
-              createVNode(unref(ComboboxTrigger), { class: "group/trig flex shrink-0 items-center text-muted transition-[rotate,color] duration-200 ease-[var(--ease-emphasized)] group-hover:text-ink data-[state=open]:rotate-180" }, {
+              ], 40, _hoisted_1)) : createCommentVNode("", true),
+              createVNode(unref(ComboboxTrigger), {
+                tabindex: "-1",
+                "aria-hidden": "true",
+                class: "group/trig flex shrink-0 items-center text-muted transition-[rotate,color] duration-200 ease-[var(--ease-emphasized)] group-hover:text-ink data-[state=open]:rotate-180"
+              }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$1, {
+                  createVNode(_sfc_main$2, {
                     name: "lucide:chevron-down",
                     size: 16,
                     class: "transition-transform duration-200 ease-[var(--ease-emphasized)] group-data-[state=closed]/trig:group-hover:translate-y-1"
@@ -168,17 +187,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden"])
               }, {
                 default: withCtx(() => [
-                  __props.searchable || serverSide.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                  __props.searchable || serverSide.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
                     createVNode(unref(ComboboxInput), {
                       modelValue: query.value,
-                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => query.value = $event),
                       placeholder: __props.searchPlaceholder,
                       class: "h-(--size-control-sm) w-full rounded-md border border-line bg-surface-soft px-2.5 text-sm text-ink outline-none placeholder:text-muted focus:border-brand"
                     }, null, 8, ["modelValue", "placeholder"])
                   ])) : createCommentVNode("", true),
                   createVNode(unref(ComboboxViewport), { class: "max-h-56 overflow-y-auto p-1" }, {
                     default: withCtx(() => [
-                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(__props.loadingText), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
+                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.loadingText), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
                         key: 1,
                         class: "px-3 py-4 text-center text-sm italic text-muted"
                       }, {
@@ -195,13 +214,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           class: normalizeClass([unref(OPTION_ITEM), "justify-between"])
                         }, {
                           default: withCtx(() => [
-                            createElementVNode("span", _hoisted_5, [
+                            createElementVNode("span", _hoisted_4, [
                               createElementVNode("span", null, toDisplayString(opt.label), 1),
-                              opt.description ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(opt.description), 1)) : createCommentVNode("", true)
+                              opt.description ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(opt.description), 1)) : createCommentVNode("", true)
                             ]),
                             createVNode(unref(ComboboxItemIndicator), { class: "flex shrink-0 items-center text-brand" }, {
                               default: withCtx(() => [
-                                createVNode(_sfc_main$1, {
+                                createVNode(_sfc_main$2, {
                                   name: "lucide:check",
                                   size: 16
                                 })