@leavepulse/ui 0.43.3 → 0.44.0

package/dist/chunks/{LpTableOfContents-CjvxPMpU.js → LpTableOfContents-BUcAfGPQ.js}

@@ -1,23 +1,26 @@
-import { defineComponent, ref, useId, computed, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, normalizeClass, createBlock, unref, createCommentVNode, createTextVNode } from "vue";
+import { defineComponent, computed, ref, useId, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, normalizeStyle, normalizeClass, createBlock, unref, createCommentVNode, createTextVNode } from "vue";
 import { Motion } from "motion-v";
+import { useLabels } from "../composables/useLpConfig.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = { class: "mb-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted" };
-const _hoisted_3 = ["href", "onClick", "onMouseenter"];
-const _hoisted_4 = {
-  key: 0,
-  class: "flex flex-col gap-0.5"
-};
-const _hoisted_5 = ["href", "onClick", "onMouseenter"];
+const _hoisted_3 = ["href", "aria-current", "onClick", "onMouseenter"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTableOfContents",
   props: {
     links: {},
-    title: { default: "On this page" },
-    offset: { default: 96 }
+    title: {},
+    offset: { default: 96 },
+    labels: {}
   },
   setup(__props) {
     const props = __props;
+    const text = useLabels("toc", { title: "On this page" }, () => props.labels);
+    const heading = computed(() => props.title ?? text.value.title);
+    function flatten(links, depth = 0) {
+      return links.flatMap((link) => [{ link, depth }, ...flatten(link.children ?? [], depth + 1)]);
+    }
+    const rows = computed(() => flatten(props.links));
     const activeId = ref("");
     const hoveredId = ref(null);
     const pillId = `lp-toc-${useId()}`;
@@ -60,13 +63,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       rafId = null;
       safetyTimer = null;
     }
-    function suppressSpyUntilScrollEnds() {
+    function scrollerOf(el) {
+      for (let node = el.parentElement; node; node = node.parentElement) {
+        const { overflowY } = getComputedStyle(node);
+        if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) return node;
+      }
+      return null;
+    }
+    function suppressSpyUntilScrollEnds(target) {
       spySuppressed = true;
       if (rafId != null) cancelAnimationFrame(rafId);
       if (safetyTimer != null) clearTimeout(safetyTimer);
-      let last = window.scrollY;
+      const scroller = scrollerOf(target);
+      const position = () => scroller ? scroller.scrollTop : window.scrollY;
+      let last = position();
       const tick = () => {
-        const y = window.scrollY;
+        const y = position();
         if (y === last) {
           unfreeze();
           return;
@@ -82,9 +94,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!el) return;
       ev.preventDefault();
       activeId.value = id;
-      suppressSpyUntilScrollEnds();
+      suppressSpyUntilScrollEnds(el);
       el.scrollIntoView({ behavior: "smooth", block: "start" });
-      history.replaceState(null, "", `#${id}`);
+      history.replaceState(history.state, "", `#${id}`);
     }
     onMounted(setup);
     watch(() => props.links, setup, { deep: true });
@@ -94,22 +106,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("nav", {
-        "aria-label": __props.title,
+        "aria-label": heading.value,
         class: "text-sm"
       }, [
-        createElementVNode("p", _hoisted_2, toDisplayString(__props.title), 1),
+        createElementVNode("p", _hoisted_2, toDisplayString(heading.value), 1),
         createElementVNode("ul", {
           class: "relative flex flex-col gap-0.5 border-l border-line",
           onMouseleave: _cache[0] || (_cache[0] = ($event) => hoveredId.value = null)
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.links, (link) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, ({ link, depth }) => {
             return openBlock(), createElementBlock("li", {
               key: link.id,
               class: "flex flex-col"
             }, [
               createElementVNode("a", {
                 href: `#${link.id}`,
-                class: normalizeClass(["relative -ml-px block py-1 pl-3.5 leading-snug transition-colors duration-[var(--duration-fast)]", litId.value === link.id ? "text-brand" : "text-muted hover:text-ink"]),
+                class: normalizeClass(["relative -ml-px block py-1 leading-snug transition-colors duration-[var(--duration-fast)]", [
+                  depth > 0 ? "text-[13px]" : "",
+                  litId.value === link.id ? "text-brand" : "text-muted hover:text-ink"
+                ]]),
+                style: normalizeStyle({ paddingLeft: `${0.875 + depth * 0.875}rem` }),
+                "aria-current": activeId.value === link.id ? "location" : void 0,
                 onClick: ($event) => onClick(link.id, $event),
                 onMouseenter: ($event) => hoveredId.value = link.id
               }, [
@@ -120,29 +137,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   class: "absolute -left-px top-0 h-full w-0.5 rounded-full bg-brand"
                 }, null, 8, ["transition"])) : createCommentVNode("", true),
                 createTextVNode(" " + toDisplayString(link.text), 1)
-              ], 42, _hoisted_3),
-              link.children?.length ? (openBlock(), createElementBlock("ul", _hoisted_4, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(link.children, (child) => {
-                  return openBlock(), createElementBlock("li", {
-                    key: child.id
-                  }, [
-                    createElementVNode("a", {
-                      href: `#${child.id}`,
-                      class: normalizeClass(["relative -ml-px block py-1 pl-7 text-[13px] leading-snug transition-colors duration-[var(--duration-fast)]", litId.value === child.id ? "text-brand" : "text-muted hover:text-ink"]),
-                      onClick: ($event) => onClick(child.id, $event),
-                      onMouseenter: ($event) => hoveredId.value = child.id
-                    }, [
-                      litId.value === child.id ? (openBlock(), createBlock(unref(Motion), {
-                        key: 0,
-                        "layout-id": pillId,
-                        transition: unref(pillTransition),
-                        class: "absolute -left-px top-0 h-full w-0.5 rounded-full bg-brand"
-                      }, null, 8, ["transition"])) : createCommentVNode("", true),
-                      createTextVNode(" " + toDisplayString(child.text), 1)
-                    ], 42, _hoisted_5)
-                  ]);
-                }), 128))
-              ])) : createCommentVNode("", true)
+              ], 46, _hoisted_3)
             ]);
           }), 128))
         ], 32)

package/dist/chunks/{LpTabs-Cefe_lys.js → LpTabs-_qMVaZJ6.js}

@@ -1,4 +1,4 @@
-import { defineComponent, useId, ref, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
+import { defineComponent, ref, watch, useId, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
 import { useReducedMotion, Motion } from "motion-v";
 import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "reka-ui";
 import { usePillTransition } from "../composables/usePillTransition.js";
@@ -8,13 +8,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTabs",
   props: {
     modelValue: {},
+    defaultValue: {},
     items: {},
     variant: { default: "contained" },
     accent: { type: Boolean, default: false },
     block: { type: Boolean, default: false }
   },
   emits: ["update:modelValue"],
-  setup(__props) {
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const current = ref(props.modelValue ?? props.defaultValue ?? props.items[0]?.value);
+    watch(
+      () => props.modelValue,
+      (value) => {
+        if (value !== void 0) current.value = value;
+      }
+    );
+    function select(value) {
+      if (props.modelValue === void 0) current.value = value;
+      emit("update:modelValue", value);
+    }
     const pillId = `lp-tab-indicator-${useId()}`;
     const hovered = ref(null);
     const pillTransition = usePillTransition();
@@ -31,8 +45,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TabsRoot), {
-        "model-value": __props.modelValue,
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = (v) => _ctx.$emit("update:modelValue", v))
+        "model-value": current.value,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = (v) => select(v))
       }, {
         default: withCtx(() => [
           createVNode(unref(TabsList), {
@@ -58,7 +72,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   onPointerup: releaseFocusAfterPointer
                 }, {
                   default: withCtx(() => [
-                    pillUnder(item.value, __props.modelValue) ? (openBlock(), createBlock(unref(Motion), {
+                    pillUnder(item.value, current.value) ? (openBlock(), createBlock(unref(Motion), {
                       key: 0,
                       "layout-id": pillId,
                       transition: unref(pillTransition),

package/dist/chunks/LpTextarea-yP8hGedR.js

@@ -0,0 +1,77 @@
+import { defineComponent, computed, useAttrs, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, unref, normalizeClass, withCtx, createElementVNode, mergeProps } from "vue";
+import { useFieldControl } from "../composables/useField.js";
+import { mergeClass } from "../composables/useMergedClass.js";
+import { _ as _sfc_main$1 } from "./LpFormField-CIk5qosh.js";
+const _hoisted_1 = ["id", "value", "placeholder", "rows", "disabled", "required", "aria-invalid", "aria-describedby"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpTextarea",
+  props: {
+    modelValue: {},
+    placeholder: {},
+    rows: {},
+    invalid: { type: Boolean },
+    disabled: { type: Boolean },
+    label: {},
+    hint: {},
+    error: {},
+    required: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const hasField = computed(() => !!props.label || !!props.hint || !!props.error);
+    const attrs = useAttrs();
+    const textareaAttrs = computed(() => {
+      const { class: _c, style: _s, ...rest } = attrs;
+      return rest;
+    });
+    const field = useFieldControl(() => ({
+      wrapped: hasField.value,
+      hasMessage: !!props.error || !!props.hint,
+      id: typeof attrs.id === "string" ? attrs.id : void 0,
+      invalid: props.invalid || !!props.error,
+      required: props.required,
+      disabled: props.disabled
+    }));
+    const textareaClass = computed(
+      () => mergeClass(
+        "w-full resize-y rounded-control border bg-surface-soft px-3 py-2 text-sm text-ink outline-none transition-colors duration-[var(--duration-fast)] placeholder:text-muted focus:border-brand focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-55",
+        field.value.invalid ? "border-danger focus:border-danger focus:ring-danger-soft" : "border-line",
+        hasField.value ? "" : attrs.class
+      )
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(hasField.value ? _sfc_main$1 : "div"), {
+        id: hasField.value ? unref(field).id : void 0,
+        label: hasField.value ? __props.label : void 0,
+        hint: hasField.value ? __props.hint : void 0,
+        error: hasField.value ? __props.error : void 0,
+        required: hasField.value ? __props.required : void 0,
+        class: normalizeClass(hasField.value ? unref(attrs).class : "contents"),
+        style: normalizeStyle(hasField.value ? unref(attrs).style : void 0)
+      }, {
+        default: withCtx(() => [
+          createElementVNode("textarea", mergeProps(textareaAttrs.value, {
+            id: unref(field).id,
+            value: __props.modelValue,
+            placeholder: __props.placeholder,
+            rows: __props.rows ?? 4,
+            disabled: unref(field).disabled,
+            required: unref(field).required || void 0,
+            "aria-invalid": unref(field).invalid || void 0,
+            "aria-describedby": unref(field).describedBy,
+            class: textareaClass.value,
+            style: hasField.value ? void 0 : unref(attrs).style,
+            onInput: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.value))
+          }), null, 16, _hoisted_1)
+        ]),
+        _: 1
+      }, 8, ["id", "label", "hint", "error", "required", "class", "style"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpThemeProvider-Wjm7Tuit.js

@@ -0,0 +1,35 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot } from "vue";
+import { t as themeEntries } from "./useTheme-C8JHUlPM.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpThemeProvider",
+  props: {
+    theme: {},
+    as: { default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const { class: rootClass, attrs: rest } = useMergedAttrs("bg-surface text-ink");
+    const style = computed(() => ({
+      ...Object.fromEntries(themeEntries(props.theme)),
+      colorScheme: props.theme.mode
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+        style: style.value,
+        "data-theme-mode": __props.theme.mode,
+        class: unref(rootClass)
+      }, unref(rest)), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["style", "data-theme-mode", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpThemeSwitcher-CKLc10KZ.js

@@ -0,0 +1,169 @@
+import { defineComponent, computed, onMounted, ref, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createElementBlock, createVNode, toDisplayString, createCommentVNode } from "vue";
+import { useLabels } from "../composables/useLpConfig.js";
+import { u as useTheme, p as presets } from "./useTheme-C8JHUlPM.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-DQw5dGfG.js";
+import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = ["aria-label", "title"];
+const _hoisted_2 = {
+  key: 2,
+  class: "text-sm font-medium"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpThemeSwitcher",
+  props: {
+    modelValue: {},
+    themes: {},
+    cycleThemes: {},
+    variant: { default: "swatch" },
+    showLabel: { type: Boolean },
+    default: {},
+    transition: { type: Boolean, default: true },
+    size: { default: "md" },
+    "aria-label": {},
+    system: {},
+    labels: {}
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const theme = useTheme();
+    const text = useLabels(
+      "themeSwitcher",
+      { trigger: "Theme: {name}. Click to switch, right-click to choose.", system: "System" },
+      () => props.labels
+    );
+    const list = computed(
+      () => props.themes && props.themes.length ? props.themes : Object.values(presets)
+    );
+    const activeName = computed(
+      () => props.modelValue ?? (theme.currentName.value || list.value[0]?.name || "")
+    );
+    onMounted(() => {
+      if (props.default == null) return;
+      const fallback = typeof props.default === "string" ? list.value.find((t) => t.name === props.default) : props.default;
+      if (fallback) theme.init(fallback);
+    });
+    const SIZES = { sm: "size-7", md: "size-8", lg: "size-9" };
+    const ICON_SIZE = { sm: 15, md: 16, lg: 18 };
+    const wantsLabel = computed(() => props.showLabel || props.variant === "pill");
+    const bareIcon = computed(() => props.variant === "icon" && !wantsLabel.value);
+    function applyTheme(t, ev) {
+      if (props.transition) {
+        theme.setTheme(t, ev ? { x: ev.clientX, y: ev.clientY } : void 0);
+      } else {
+        theme.apply(t);
+      }
+      emit("update:modelValue", t.name);
+      emit("change", t);
+    }
+    const cycleList = computed(() => {
+      if (!props.cycleThemes?.length) return list.value;
+      const resolved = props.cycleThemes.map(
+        (t) => typeof t === "string" ? list.value.find((x) => x.name === t) : t
+      ).filter((t) => Boolean(t));
+      return resolved.length ? resolved : list.value;
+    });
+    function cycle(ev) {
+      const arr = cycleList.value;
+      if (!arr.length) return;
+      const i = arr.findIndex((t) => t.name === activeName.value);
+      const next = arr[(i + 1) % arr.length];
+      if (next) applyTheme(next, ev);
+    }
+    function resolve(t) {
+      return typeof t === "string" ? list.value.find((x) => x.name === t) : t;
+    }
+    const systemPair = computed(() => {
+      if (!props.system) return null;
+      const light = resolve(props.system.light);
+      const dark = resolve(props.system.dark);
+      return light && dark ? { light, dark } : null;
+    });
+    function followSystem() {
+      const pair = systemPair.value;
+      if (!pair) return;
+      theme.setSystem(pair);
+      const next = theme.current.value;
+      if (next) {
+        emit("update:modelValue", next.name);
+        emit("change", next);
+      }
+    }
+    const menu = computed(() => {
+      const following = theme.system.value;
+      const items = list.value.map((t) => ({
+        label: t.name,
+        icon: !following && t.name === activeName.value ? "lucide:check" : t.mode === "dark" ? "lucide:moon" : "lucide:sun",
+        onSelect: () => applyTheme(t)
+      }));
+      if (systemPair.value) {
+        items.unshift({
+          label: text.value.system,
+          icon: following ? "lucide:check" : "lucide:monitor",
+          onSelect: followSystem
+        });
+      }
+      return items;
+    });
+    const hydrated = ref(false);
+    onMounted(() => {
+      hydrated.value = true;
+    });
+    const labelName = computed(
+      () => hydrated.value ? activeName.value : list.value[0]?.name ?? ""
+    );
+    const triggerLabel = computed(
+      () => props["aria-label"] ?? text.value.trigger.replace("{name}", labelName.value)
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, { items: menu.value }, {
+        default: withCtx(() => [
+          createElementVNode("button", {
+            type: "button",
+            "aria-label": triggerLabel.value,
+            title: triggerLabel.value,
+            class: normalizeClass([
+              "inline-flex items-center justify-center gap-2 rounded-control outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+              bareIcon.value ? [SIZES[__props.size], "text-muted hover:bg-surface-soft hover:text-ink"] : [
+                "border border-line bg-surface-raised px-1.5 text-ink hover:border-line-strong",
+                wantsLabel.value ? "py-1 pr-2.5" : ""
+              ]
+            ]),
+            onClick: cycle
+          }, [
+            __props.variant !== "icon" ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(["grid shrink-0 place-items-center rounded-control border border-line/60", SIZES[__props.size]]),
+              style: { "background": "var(--color-surface)" }
+            }, [..._cache[0] || (_cache[0] = [
+              createElementVNode("span", {
+                class: "size-3 rounded-full",
+                style: { "background": "var(--color-brand)" }
+              }, null, -1)
+            ])], 2)) : (openBlock(), createElementBlock("span", {
+              key: 1,
+              class: normalizeClass(["grid shrink-0 place-items-center", SIZES[__props.size]])
+            }, [
+              createVNode(_sfc_main$2, {
+                name: "lucide:moon",
+                size: ICON_SIZE[__props.size],
+                class: "in-data-[theme-mode=light]:hidden"
+              }, null, 8, ["size"]),
+              createVNode(_sfc_main$2, {
+                name: "lucide:sun",
+                size: ICON_SIZE[__props.size],
+                class: "hidden in-data-[theme-mode=light]:block"
+              }, null, 8, ["size"])
+            ], 2)),
+            wantsLabel.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(labelName.value), 1)) : createCommentVNode("", true)
+          ], 10, _hoisted_1)
+        ]),
+        _: 1
+      }, 8, ["items"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpTilt-DuyKbpkA.js → LpTilt-B7KHX1zH.js}

@@ -11,12 +11,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const tilt = useTilt({
+    const tilt = useTilt(() => ({
       max: props.max,
       lift: props.lift,
       scale: props.scale,
       glare: props.glare
-    });
+    }));
     const stageStyle = computed(() => ({ perspective: `${props.perspective}px` }));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {

package/dist/chunks/{LpTimeField-K6nAGboX.js → LpTimeField-C5HRgS5H.js}

@@ -1,6 +1,7 @@
 import { defineComponent, computed, openBlock, createBlock, unref, normalizeClass, withCtx, createCommentVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
 import { Time } from "@internationalized/date";
 import { TimeFieldRoot, TimeFieldInput } from "reka-ui";
+import { useFieldControl } from "../composables/useField.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTimeField",
@@ -29,6 +30,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const pad = (n) => String(n).padStart(2, "0");
       emit("update:modelValue", `${pad(next.hour)}:${pad(next.minute)}`);
     }
+    const field = useFieldControl(() => ({
+      wrapped: false,
+      invalid: props.invalid,
+      disabled: props.disabled
+    }));
     const shellSize = {
       sm: "h-(--size-control-sm) text-xs",
       md: "h-(--size-control-md) text-sm",
@@ -40,10 +46,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "hour-cycle": __props.hourCycle,
         locale: __props.locale,
         granularity: "minute",
-        disabled: __props.disabled,
+        disabled: unref(field).disabled,
+        "aria-invalid": unref(field).invalid || void 0,
+        "aria-describedby": unref(field).describedBy,
         class: normalizeClass(["flex w-full items-center gap-0.5 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55", [
           shellSize[__props.size],
-          __props.invalid ? "border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand"
+          unref(field).invalid ? "border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand"
         ]]),
         "onUpdate:modelValue": onUpdate
       }, {
@@ -54,10 +62,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             size: 15,
             class: "mr-1.5 shrink-0 text-muted"
           })) : createCommentVNode("", true),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(segments, (item) => {
-            return openBlock(), createElementBlock(Fragment, {
-              key: item.part
-            }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(segments, (item, i) => {
+            return openBlock(), createElementBlock(Fragment, { key: i }, [
               item.part === "literal" ? (openBlock(), createBlock(unref(TimeFieldInput), {
                 key: 0,
                 part: item.part,
@@ -81,7 +87,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 8, ["model-value", "hour-cycle", "locale", "disabled", "class"]);
+      }, 8, ["model-value", "hour-cycle", "locale", "disabled", "aria-invalid", "aria-describedby", "class"]);
     };
   }
 });