@leavepulse/ui 0.77.2 → 0.78.0

package/dist/chunks/{LpAutocomplete-DOu7FN5P.js → LpAutocomplete-DkY6CSyD.js}

@@ -1,12 +1,14 @@
-import { defineComponent, computed, useAttrs, ref, watch, useId, openBlock, createBlock, unref, normalizeStyle, normalizeClass, withCtx, createVNode, createElementBlock, createCommentVNode, createElementVNode, mergeProps, Transition, toDisplayString, withModifiers, createTextVNode, Fragment, renderList, nextTick } from "vue";
+import { defineComponent, computed, ref, watch, useId, openBlock, createBlock, unref, normalizeStyle, normalizeClass, withCtx, createVNode, createElementBlock, createCommentVNode, createElementVNode, mergeProps, Transition, toDisplayString, withModifiers, createTextVNode, Fragment, renderList, nextTick } from "vue";
+import { _ as _sfc_main$2 } from "./IconCloseButton-COZEsa9u.js";
+import { CONTROL_SIZE } from "../components/controlSize.js";
 import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxItem } from "reka-ui";
-import { useFieldControl } from "../composables/useField.js";
+import { useAttrsField, mergeDescribedBy } from "../composables/useField.js";
 import { useInputFilter } from "../composables/useInputFilter.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { CLOSE_ICON, POPOVER_PANEL, OPTION_ITEM, optionStagger } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
-import { _ as _sfc_main$2 } from "./OptionContent-22UT8zLn.js";
+import { COMBOBOX_PANEL, POPOVER_PANEL, OPTION_ITEM, optionStagger } from "../components/dropdown.js";
+import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$3 } from "./OptionContent-CGb8QlHA.js";
 import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 const _hoisted_1 = ["src"];
 const _hoisted_2 = { class: "relative flex min-w-0 flex-1 self-stretch" };
@@ -16,8 +18,7 @@ const _hoisted_3 = {
   "aria-hidden": "true"
 };
 const _hoisted_4 = ["id"];
-const _hoisted_5 = ["aria-label"];
-const _hoisted_6 = {
+const _hoisted_5 = {
   key: 0,
   class: "px-3 py-4 text-center text-sm italic text-muted"
 };
@@ -57,17 +58,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       get: () => props.modelValue ?? "",
       set: (v) => emit("update:modelValue", v)
     });
-    const attrs = useAttrs();
     const inputAttrs = computed(() => {
       const { class: _c, style: _s, ...rest } = attrs;
       return rest;
     });
-    const field = useFieldControl(() => ({
-      wrapped: false,
-      id: typeof attrs.id === "string" ? attrs.id : void 0,
-      invalid: props.invalid || isInvalid(props.modelValue),
-      disabled: props.disabled
-    }));
+    const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid || isInvalid(props.modelValue), disabled: props.disabled }));
     const isInvalidState = computed(() => field.value.invalid);
     const labels = useLabels(
       "autocomplete",
@@ -102,7 +97,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const selectedId = useId();
     const describedBy = computed(
-      () => [field.value.describedBy, showSelected.value ? selectedId : void 0].filter(Boolean).join(" ") || void 0
+      () => mergeDescribedBy(attrs["aria-describedby"], field.value.describedBy, showSelected.value ? selectedId : void 0)
     );
     const canOpen = computed(
       () => text.value.length >= props.minChars && (props.loading || filtered.value.length > 0)
@@ -114,11 +109,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       open.value = next && canOpen.value;
     }
     const hasValue = computed(() => (props.modelValue ?? "").length > 0);
-    const anchorSize = {
-      sm: "h-(--size-control-sm) text-xs",
-      md: "h-(--size-control-md) text-sm",
-      lg: "h-(--size-control-lg) text-sm"
-    };
+    const anchorSize = CONTROL_SIZE;
     function onInput(event) {
       filterInput(event);
       typing.value = true;
@@ -177,7 +168,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(ComboboxAnchor), {
             "data-lp-ring-owner": "",
             class: normalizeClass(["flex w-full items-center gap-2 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", [
-              anchorSize[__props.size],
+              unref(anchorSize)[__props.size],
               isInvalidState.value ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand"
             ]])
           }, {
@@ -241,40 +232,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   _: 1
                 })
               ]),
-              __props.clearable && hasValue.value && !unref(field).disabled ? (openBlock(), createElementBlock("button", {
+              __props.clearable && hasValue.value && !unref(field).disabled ? (openBlock(), createBlock(_sfc_main$2, {
                 key: 1,
-                type: "button",
-                class: "group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink",
-                "aria-label": unref(labels).clear,
+                inline: "",
+                label: unref(labels).clear,
                 onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
                 }, ["prevent"])),
                 onClick: clear
-              }, [
-                createVNode(_sfc_main$1, {
-                  name: "lucide:x",
-                  size: 16,
-                  class: normalizeClass(unref(CLOSE_ICON))
-                }, null, 8, ["class"])
-              ], 40, _hoisted_5)) : createCommentVNode("", true)
+              }, null, 8, ["label"])) : createCommentVNode("", true)
             ]),
             _: 1
           }, 8, ["class"]),
           createVNode(unref(ComboboxPortal), { to: unref(portalTo) }, {
             default: withCtx(() => [
-              createVNode(unref(ComboboxContent), {
+              createVNode(unref(ComboboxContent), mergeProps({
                 onInteractOutside: unref(guardOutside),
-                onEscapeKeyDown: unref(guardOutside),
-                "collision-padding": 8,
-                position: "popper",
-                "side-offset": 6,
-                class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden"]),
+                onEscapeKeyDown: unref(guardOutside)
+              }, unref(COMBOBOX_PANEL), {
+                class: [unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden"],
                 onOpenAutoFocus: _cache[1] || (_cache[1] = withModifiers(() => {
+                }, ["prevent"])),
+                onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {
                 }, ["prevent"]))
-              }, {
+              }), {
                 default: withCtx(() => [
                   createVNode(unref(ComboboxViewport), { class: "max-h-72 overflow-y-auto p-1" }, {
                     default: withCtx(() => [
-                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(__props.loadingText ?? unref(labels).loading), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
+                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(__props.loadingText ?? unref(labels).loading), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
                         key: 1,
                         class: "px-3 py-4 text-center text-sm italic text-muted"
                       }, {
@@ -293,7 +277,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           onSelect: withModifiers(($event) => choose(opt), ["prevent"])
                         }, {
                           default: withCtx(() => [
-                            createVNode(_sfc_main$2, { option: opt }, null, 8, ["option"])
+                            createVNode(_sfc_main$3, { option: opt }, null, 8, ["option"])
                           ]),
                           _: 2
                         }, 1032, ["value", "disabled", "style", "class", "onSelect"]);
@@ -303,7 +287,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   })
                 ]),
                 _: 1
-              }, 8, ["onInteractOutside", "onEscapeKeyDown", "class"])
+              }, 16, ["onInteractOutside", "onEscapeKeyDown", "class"])
             ]),
             _: 1
           }, 8, ["to"])

package/dist/chunks/{LpAvatar-Cg6Az3wz.js → LpAvatar-cQVsNk6F.js}

@@ -2,8 +2,8 @@ import { defineComponent, computed, ref, onMounted, openBlock, createBlock, unre
 import { AvatarRoot, AvatarImage, AvatarFallback } from "reka-ui";
 import { tv } from "tailwind-variants";
 import { MenuWhen } from "../components/menuWhen.js";
-import { _ as _sfc_main$2 } from "./LpIcon--5WSb3jJ.js";
-import { _ as _sfc_main$1 } from "./LpIdenticon-BzdC_qz9.js";
+import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$1 } from "./LpIdenticon-Dbbr4fvt.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/{LpBadge-wUYLN4U9.js → LpBadge-D5QQdDQ_.js}

@@ -3,9 +3,9 @@ import { tv } from "tailwind-variants";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMergedClass } from "../composables/useMergedClass.js";
 import { BADGE_REMOVE } from "../components/badge.js";
-import { _ as _sfc_main$3 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$3 } from "./LpIcon-C6JpQ5td.js";
 import { _ as _sfc_main$2 } from "./LpRollingText-B54Pje7P.js";
-import { _ as _sfc_main$1 } from "./LpShift-CCq7dofl.js";
+import { _ as _sfc_main$1 } from "./LpShift-DAgS_d2x.js";
 import { slotText } from "../components/slotText.js";
 import { TONES } from "../components/tone.js";
 const _hoisted_1 = { class: "inline-flex max-w-full items-center gap-1.5 whitespace-nowrap" };

package/dist/chunks/{LpBottomNav-CbNQQPuL.js → LpBottomNav-zxLGGbjm.js}

@@ -3,9 +3,10 @@ import { Motion } from "motion-v";
 import { usePillTransition } from "../composables/usePillTransition.js";
 import { useLabels, useLinkComponent } from "../composables/useLpConfig.js";
 import { resolveLink } from "../components/link.js";
-import { _ as _sfc_main$1 } from "./LpTabFace-DPCwKkH2.js";
+import { _ as _sfc_main$1 } from "./LpTabFace-DQoV8mQG.js";
 import { BOTTOM_BAR, BOTTOM_ITEM, BOTTOM_MARKER } from "../components/tabs.js";
 const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = ["aria-expanded", "aria-controls", "aria-current"];
 const ROW = "relative flex items-center justify-center outline-none transition-[color,opacity] duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpBottomNav",
@@ -15,6 +16,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     isActive: {},
     more: { type: Boolean, default: false },
     moreActive: { type: Boolean, default: false },
+    moreExpanded: { type: Boolean, default: false },
+    moreControls: {},
     label: {},
     labels: {}
   },
@@ -65,6 +68,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         __props.more ? (openBlock(), createElementBlock("button", {
           key: 0,
           type: "button",
+          "aria-haspopup": "dialog",
+          "aria-expanded": __props.moreExpanded,
+          "aria-controls": __props.moreControls,
+          "aria-current": __props.moreActive ? "true" : void 0,
           class: normalizeClass([ROW, unref(BOTTOM_ITEM), __props.moreActive ? "text-brand" : "text-muted"]),
           onClick: _cache[0] || (_cache[0] = ($event) => emit("more"))
         }, [
@@ -79,7 +86,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             bottom: "",
             active: __props.moreActive
           }, null, 8, ["item", "active"])
-        ], 2)) : createCommentVNode("", true)
+        ], 10, _hoisted_2)) : createCommentVNode("", true)
       ], 10, _hoisted_1);
     };
   }

package/dist/chunks/{LpBreadcrumbs-DPdbth-c.js → LpBreadcrumbs-CIIBsygI.js}

@@ -1,7 +1,8 @@
 import { defineComponent, computed, ref, watch, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, TransitionGroup, normalizeClass, Fragment, renderList, createBlock, createCommentVNode, resolveDynamicComponent } from "vue";
-import { _ as _sfc_main$2 } from "./LpIcon--5WSb3jJ.js";
+import { isHTMLElement } from "../composables/realm.js";
+import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
 import { _ as _sfc_main$3 } from "./LpRollingText-B54Pje7P.js";
-import { _ as _sfc_main$1 } from "./LpShift-CCq7dofl.js";
+import { _ as _sfc_main$1 } from "./LpShift-DAgS_d2x.js";
 import { useLabels, useLinkComponent } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { resolveLink } from "../components/link.js";
@@ -41,7 +42,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       crumbs,
       () => {
         for (const crumb of Array.from(list.value?.$el.children ?? [])) {
-          if (crumb instanceof HTMLElement) spots.set(crumb, [crumb.offsetLeft, crumb.offsetTop]);
+          if (isHTMLElement(crumb)) spots.set(crumb, [crumb.offsetLeft, crumb.offsetTop]);
         }
       },
       { flush: "pre" }

package/dist/chunks/{LpButton-CFb44IjC.js → LpButton-DSHioIfD.js}

@@ -1,4 +1,5 @@
 import { defineComponent, useAttrs, getCurrentInstance, ref, computed, onMounted, onUpdated, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot, createElementBlock, normalizeClass, createVNode, createCommentVNode } from "vue";
+import { isElement, isHTMLElement } from "../composables/realm.js";
 import { usePaletteAction } from "../composables/usePaletteCommands.js";
 import { tv } from "tailwind-variants";
 import { HINT_SIGNALS, noteHotkeyTarget } from "../composables/useHintSystem.js";
@@ -7,7 +8,7 @@ import { useHotkeys, useAppleKeyboard, appleModifierLabel, parseCombo } from "..
 import { useLabels, useLinkComponent } from "../composables/useLpConfig.js";
 import { useToast } from "../composables/useToast.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpLoader-DVwkOmt9.js";
+import { _ as _sfc_main$1 } from "./LpLoader-Bf1yZwaU.js";
 import { resolveLink } from "../components/link.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -117,8 +118,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const root = ref(null);
     const rootEl = () => {
       const node = root.value;
-      if (node instanceof HTMLElement) return node;
-      return node?.$el instanceof HTMLElement ? node.$el : null;
+      if (isHTMLElement(node)) return node;
+      return isHTMLElement(node?.$el) ? node.$el : null;
     };
     let viaKey = false;
     const spoken = ref("");
@@ -127,7 +128,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       spoken.value = String(attrs["aria-label"] ?? (el ? labelText(el).trim() : ""));
     }
     function labelText(node) {
-      if (node instanceof Element && node.getAttribute("role") === "status") return "";
+      if (isElement(node) && node.getAttribute("role") === "status") return "";
       if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? "";
       return Array.from(node.childNodes, labelText).join("");
     }

package/dist/chunks/{LpCalendar-CuoWks-0.js → LpCalendar-D4-LVjfF.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, shallowRef, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeClass, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
 import { today, getLocalTimeZone, parseDate } from "@internationalized/date";
 import { CalendarRoot, CalendarHeader, CalendarPrev, CalendarHeading, CalendarNext, CalendarGrid, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarGridBody, CalendarCell, CalendarCellTrigger } from "reka-ui";
-import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { CALENDAR_LABELS, CALENDAR_NAV, CALENDAR_FRAME } from "../components/calendar.js";

package/dist/chunks/{LpCard-r13WRqox.js → LpCard-BPtYXwnT.js}

@@ -3,7 +3,7 @@ import { tv } from "tailwind-variants";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { MenuWhen } from "../components/menuWhen.js";
 import { _ as _sfc_main$2 } from "./LpSkeleton-BB6XIV-w.js";
-import { _ as _sfc_main$1 } from "./LpSwap-C96c0LWh.js";
+import { _ as _sfc_main$1 } from "./LpSwap-M7nFeW3C.js";
 import { useSpotlight } from "../composables/useSpotlight.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/{LpCheckbox-Cs4SHaHX.js → LpCheckbox-D6RuDW4X.js}

@@ -1,9 +1,9 @@
-import { defineComponent, useId, computed, openBlock, createElementBlock, mergeProps, unref, createVNode, normalizeClass, withCtx, createBlock, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createElementVNode } from "vue";
+import { defineComponent, computed, useId, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, normalizeClass, createBlock, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createElementVNode } from "vue";
 import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { CheckboxRoot, CheckboxIndicator } from "reka-ui";
-import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
-import { _ as _sfc_main$2 } from "./LpLoader-DVwkOmt9.js";
-import { useFieldControl } from "../composables/useField.js";
+import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$2 } from "./LpLoader-Bf1yZwaU.js";
+import { useFieldControl, isAttrOn, mergeDescribedBy } from "../composables/useField.js";
 import { useOptimisticToggle } from "../composables/useOptimisticToggle.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = {
@@ -25,32 +25,54 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     name: {},
     action: {}
   },
-  emits: ["update:modelValue", "change", "done", "error"],
+  emits: ["update:modelValue", "update:indeterminate", "change", "done", "error"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const { pending, set } = useOptimisticToggle(() => props.action, emit);
+    let wasMixed = false;
+    const { pending, set } = useOptimisticToggle(() => props.action, emit, () => {
+      if (wasMixed) emit("update:indeterminate", true);
+    });
     function onUpdate(v) {
       const checked = v === true;
       if (pending.value) return;
+      wasMixed = !!props.indeterminate;
+      if (wasMixed) emit("update:indeterminate", false);
       void set(checked);
       emit("change", checked);
     }
-    const field = useFieldControl(() => ({ wrapped: false, id: props.id, disabled: props.disabled }));
-    const descriptionId = `${useId()}-description`;
-    const describedBy = computed(
-      () => [props.description ? descriptionId : "", field.value.describedBy ?? ""].filter(Boolean).join(" ") || void 0
-    );
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       () => [
         "group/check inline-flex cursor-pointer gap-2 text-sm text-ink",
         props.description ? "items-start" : "items-center"
       ].join(" ")
     );
+    const FOCUS_LISTENER = /^on(Focus|Blur)/;
+    const LISTENER = /^on[A-Z]/;
+    const parts = computed(() => {
+      const label = {};
+      const control = {};
+      for (const [key, value] of Object.entries(rest.value)) {
+        const onLabel = key === "style" || LISTENER.test(key) && !FOCUS_LISTENER.test(key);
+        if (onLabel) label[key] = value;
+        else control[key] = value;
+      }
+      return { label, control };
+    });
+    const field = useFieldControl(() => ({
+      wrapped: false,
+      id: props.id,
+      required: isAttrOn(rest.value.required),
+      disabled: props.disabled
+    }));
+    const descriptionId = `${useId()}-description`;
+    const describedBy = computed(
+      () => mergeDescribedBy(rest.value["aria-describedby"], props.description ? descriptionId : void 0, field.value.describedBy)
+    );
     usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled || pending.value, editorProps: () => ({ action: void 0, "onUpdate:modelValue": onUpdate, onChange: void 0 }) });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", mergeProps({ class: unref(rootClass) }, unref(rest)), [
-        createVNode(unref(CheckboxRoot), {
+      return openBlock(), createElementBlock("label", mergeProps({ class: unref(rootClass) }, parts.value.label), [
+        createVNode(unref(CheckboxRoot), mergeProps(parts.value.control, {
           id: unref(field).id,
           name: __props.name,
           "model-value": __props.indeterminate ? "indeterminate" : __props.modelValue,
@@ -58,9 +80,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           required: unref(field).required,
           "aria-describedby": describedBy.value,
           "aria-busy": unref(pending) || void 0,
-          class: normalizeClass([__props.description ? "mt-px" : "", "relative flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border border-line-strong bg-surface-soft outline-none transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:not-data-[state=indeterminate]:group-hover/check:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"]),
+          class: [__props.description ? "mt-px" : "", "relative flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border border-line-strong bg-surface-soft outline-none transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:not-data-[state=indeterminate]:group-hover/check:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"],
           "onUpdate:modelValue": onUpdate
-        }, {
+        }), {
           default: withCtx(() => [
             createVNode(unref(CheckboxIndicator), { class: "flex items-center justify-center text-ink-inverse data-[state=checked]:animate-[indicator-in_140ms_var(--ease-emphasized)] data-[state=indeterminate]:animate-[indicator-in_140ms_var(--ease-emphasized)]" }, {
               default: withCtx(() => [
@@ -81,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, null, 8, ["class"])) : createCommentVNode("", true)
           ]),
           _: 1
-        }, 8, ["id", "name", "model-value", "disabled", "required", "aria-describedby", "aria-busy", "class"]),
+        }, 16, ["id", "name", "model-value", "disabled", "required", "aria-describedby", "aria-busy", "class"]),
         __props.description ? (openBlock(), createElementBlock("span", _hoisted_1, [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(__props.label), 1)

package/dist/chunks/{LpCodeBlock-DRC8VbXW.js → LpCodeBlock-DuzmnIHl.js}

@@ -1,8 +1,8 @@
-import { defineComponent, computed, reactive, watch, ref, openBlock, createElementBlock, mergeProps, unref, toDisplayString, createCommentVNode, createElementVNode, createVNode, createBlock, normalizeStyle, normalizeClass, Fragment, renderList } from "vue";
+import { defineComponent, computed, reactive, watch, ref, openBlock, createElementBlock, mergeProps, unref, toDisplayString, createCommentVNode, createElementVNode, createVNode, createBlock, normalizeStyle, normalizeClass, Fragment, renderList, h } from "vue";
 import { tokenizeLines } from "../components/codeHighlight.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$2 } from "./LpCopyButton-xF7wFVoU.js";
-import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$2 } from "./LpCopyButton-7EOSIuwa.js";
+import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = {
   key: 0,
@@ -20,22 +20,12 @@ const _hoisted_4 = { class: "ml-auto flex items-center gap-1" };
 const _hoisted_5 = ["aria-label"];
 const _hoisted_6 = ["value"];
 const _hoisted_7 = { class: "block" };
-const _hoisted_8 = {
-  key: 0,
-  class: "mr-3 inline-block w-7 select-none text-right text-muted/60",
-  "aria-hidden": "true"
-};
-const _hoisted_9 = ["aria-expanded", "onClick"];
-const _hoisted_10 = { class: "select-none" };
-const _hoisted_11 = {
+const _hoisted_8 = ["aria-expanded", "onClick"];
+const _hoisted_9 = { class: "select-none" };
+const _hoisted_10 = {
   key: 0,
   class: "select-none text-muted/50"
 };
-const _hoisted_12 = {
-  key: 0,
-  class: "mr-3 inline-block w-7 select-none text-right text-muted/60",
-  "aria-hidden": "true"
-};
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -166,6 +156,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       "overflow-hidden rounded-card border border-line bg-surface font-mono text-xs"
     );
+    const CodeLine = ({ n }) => h("span", { class: "block min-h-[1.4em]" }, [
+      props.lineNumbers ? h("span", { class: "mr-3 inline-block w-7 select-none text-right text-muted/60", "aria-hidden": "true" }, n) : null,
+      ...tokens(n).map((tok, j) => h("span", { key: j, class: tok.cls }, tok.text))
+    ]);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({ class: unref(rootClass) }, unref(rest)), [
         showHeader.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
@@ -220,18 +214,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               (openBlock(true), createElementBlock(Fragment, null, renderList(segments.value, (seg, s) => {
                 return openBlock(), createElementBlock(Fragment, { key: s }, [
                   seg.kind === "lines" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(seg.lines, (ln) => {
-                    return openBlock(), createElementBlock("span", {
+                    return openBlock(), createBlock(CodeLine, {
                       key: "l" + ln.n,
-                      class: "block min-h-[1.4em]"
-                    }, [
-                      __props.lineNumbers ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(ln.n), 1)) : createCommentVNode("", true),
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(tokens(ln.n), (tok, j) => {
-                        return openBlock(), createElementBlock("span", {
-                          key: j,
-                          class: normalizeClass(tok.cls)
-                        }, toDisplayString(tok.text), 3);
-                      }), 128))
-                    ]);
+                      n: ln.n
+                    }, null, 8, ["n"]);
                   }), 128)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                     createElementVNode("button", {
                       type: "button",
@@ -244,22 +230,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         size: 12,
                         class: "shrink-0"
                       }, null, 8, ["name"]),
-                      createElementVNode("span", _hoisted_10, toDisplayString(openState[seg.id] ? seg.label : seg.label + " …"), 1),
-                      !openState[seg.id] ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(unref(text).lines.replace("{n}", String(seg.lines.length))), 1)) : createCommentVNode("", true)
-                    ], 8, _hoisted_9),
+                      createElementVNode("span", _hoisted_9, toDisplayString(openState[seg.id] ? seg.label : seg.label + " …"), 1),
+                      !openState[seg.id] ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(unref(text).lines.replace("{n}", String(seg.lines.length))), 1)) : createCommentVNode("", true)
+                    ], 8, _hoisted_8),
                     openState[seg.id] ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(seg.lines, (ln) => {
-                      return openBlock(), createElementBlock("span", {
+                      return openBlock(), createBlock(CodeLine, {
                         key: "f" + ln.n,
-                        class: "block min-h-[1.4em]"
-                      }, [
-                        __props.lineNumbers ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(ln.n), 1)) : createCommentVNode("", true),
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(tokens(ln.n), (tok, j) => {
-                          return openBlock(), createElementBlock("span", {
-                            key: j,
-                            class: normalizeClass(tok.cls)
-                          }, toDisplayString(tok.text), 3);
-                        }), 128))
-                      ]);
+                        n: ln.n
+                      }, null, 8, ["n"]);
                     }), 128)) : createCommentVNode("", true)
                   ], 64))
                 ], 64);

package/dist/chunks/{LpCodeDisplay-CE9TxCA4.js → LpCodeDisplay-CO8fngxa.js}

@@ -2,12 +2,12 @@ import { defineComponent, useModel, computed, ref, watch, openBlock, createEleme
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useNow } from "../composables/useNow.js";
-import { _ as _sfc_main$6 } from "./LpCheckbox-Cs4SHaHX.js";
-import { _ as _sfc_main$3 } from "./LpCopyButton-xF7wFVoU.js";
-import { _ as _sfc_main$5 } from "./LpCountdown-DgeY3cLG.js";
-import { _ as _sfc_main$4 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$6 } from "./LpCheckbox-D6RuDW4X.js";
+import { _ as _sfc_main$3 } from "./LpCopyButton-7EOSIuwa.js";
+import { _ as _sfc_main$5 } from "./LpCountdown-DVl7vXI1.js";
+import { _ as _sfc_main$4 } from "./LpIcon-C6JpQ5td.js";
 import { _ as _sfc_main$1 } from "./LpRollingText-B54Pje7P.js";
-import { _ as _sfc_main$2 } from "./RevealToggle-BEit1n6Z.js";
+import { _ as _sfc_main$2 } from "./RevealToggle-CCPDE8Mv.js";
 import { groupCode } from "../components/fieldText.js";
 import { toEpoch, formatTime, ceilToSecond, msToNextSecond } from "../components/timeSpan.js";
 const _hoisted_1 = { class: "flex flex-wrap items-center gap-x-2 gap-y-1" };

package/dist/chunks/{LpCollapse-CWS9M_lm.js → LpCollapse-DrAw5DBZ.js}

@@ -1,4 +1,5 @@
 import { defineComponent, useModel, ref, watch, openBlock, createBlock, Transition, withCtx, withDirectives, createElementBlock, normalizeProps, mergeProps, renderSlot, vShow, createCommentVNode, mergeModels } from "vue";
+import { nodeWindow } from "../composables/realm.js";
 import { prefersReducedMotion, easingToken, durationToken } from "../composables/easing.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -29,7 +30,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const running = /* @__PURE__ */ new WeakMap();
     function current(el) {
       const rect = el.getBoundingClientRect();
-      return { height: rect.height, width: rect.width, opacity: Number(getComputedStyle(el).opacity) };
+      return { height: rect.height, width: rect.width, opacity: Number(nodeWindow(el).getComputedStyle(el).opacity) };
     }
     function natural(el) {
       return { height: el.scrollHeight, width: el.scrollWidth, opacity: 1 };
@@ -45,7 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function fold(el, opening, done) {
       const box = el;
       const previous = running.get(box);
-      if (prefersReducedMotion() || typeof box.animate !== "function") {
+      if (prefersReducedMotion(box.ownerDocument.defaultView ?? void 0) || typeof box.animate !== "function") {
         previous?.cancel();
         done();
         return;
@@ -55,8 +56,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const to = opening ? natural(box) : ZERO;
       box.style.overflow = "hidden";
       const animation = box.animate([frame(from), frame(to)], {
-        duration: props.duration ?? durationToken("duration-medium"),
-        easing: easingToken("ease-emphasized"),
+        duration: props.duration ?? durationToken("duration-medium", void 0, box),
+        easing: easingToken("ease-emphasized", void 0, box),
         // Closing holds the folded frame until Vue hides the element, so it never flashes back open.
         fill: opening ? "none" : "forwards"
       });

package/dist/chunks/{LpColorPicker-1y1QJHZR.js → LpColorPicker-BxAHEnR5.js}

@@ -1,14 +1,16 @@
-import { defineComponent, ref, watch, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, toDisplayString, withDirectives, vShow, withKeys, Fragment, renderList, renderSlot, nextTick } from "vue";
+import { defineComponent, ref, watch, computed, useAttrs, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, toDisplayString, withDirectives, vShow, withKeys, Fragment, renderList, renderSlot, nextTick } from "vue";
+import { CONTROL_SIZE } from "../components/controlSize.js";
+import { clamp } from "../composables/clamp.js";
 import { PopoverRoot, PopoverAnchor, PopoverTrigger, PopoverPortal, PopoverContent } from "reka-ui";
 import { useKitStorage } from "../composables/usePersisted.js";
 import { prefersReducedMotion } from "../composables/easing.js";
-import { useFieldControl } from "../composables/useField.js";
+import { useFieldControl, mergeDescribedBy } from "../composables/useField.js";
 import { DEFAULT_SWATCHES, formatColor, opaqueCss, parseColor, rgbToHsv, isLight, clampHsv } from "../components/color.js";
 import { useClipboard } from "../composables/useClipboard.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { POPOVER_PANEL } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-rx2tCjwk.js";
-import { _ as _sfc_main$2 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu--eMGIql6.js";
+import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
 import { _ as _sfc_main$3 } from "./LpRollingText-B54Pje7P.js";
 import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 const _hoisted_1 = ["id", "disabled", "aria-label", "title"];
@@ -124,7 +126,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const at = (ev) => {
         const x = rect.width === 0 ? 0 : (ev.clientX - rect.left) / rect.width;
         const y = rect.height === 0 ? 0 : (ev.clientY - rect.top) / rect.height;
-        onMove(Math.min(1, Math.max(0, x)), Math.min(1, Math.max(0, y)));
+        onMove(clamp(x, 0, 1), clamp(y, 0, 1));
       };
       el.setPointerCapture(e.pointerId);
       at(e);
@@ -202,11 +204,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return rgb && isLight(rgbToHsv(rgb)) ? "text-black" : "text-white";
     }
     const SWATCH_SIZE = { sm: "size-6", md: "size-7", lg: "size-8" };
-    const triggerSize = {
-      sm: "h-(--size-control-sm) text-xs",
-      md: "h-(--size-control-md) text-sm",
-      lg: "h-(--size-control-lg) text-sm"
-    };
+    const triggerSize = CONTROL_SIZE;
     const previewCss = computed(() => formatColor(props.alpha ? hsv.value : { ...hsv.value, a: 1 }, "rgb"));
     const hueCss = computed(() => `hsl(${Math.round(hsv.value.h)}, 100%, 50%)`);
     const alphaRampStart = computed(() => formatColor({ ...hsv.value, a: 0 }, "rgb"));
@@ -320,6 +318,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       ];
       return own.length ? [...builtin, { ...own[0], separatorBefore: true }, ...own.slice(1)] : builtin;
     });
+    const attrs = useAttrs();
     const field = useFieldControl(() => ({
       wrapped: false,
       invalid: props.invalid,
@@ -369,9 +368,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         disabled: unref(field).disabled,
                         "aria-label": __props.ariaLabel,
                         "aria-invalid": unref(field).invalid || void 0,
-                        "aria-describedby": unref(field).describedBy,
+                        "aria-describedby": unref(mergeDescribedBy)(unref(attrs)["aria-describedby"], unref(field).describedBy),
                         class: normalizeClass(["group inline-flex w-full items-center gap-2 rounded-control border bg-surface-soft px-2 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55", [
-                          triggerSize[__props.size],
+                          unref(triggerSize)[__props.size],
                           unref(field).invalid ? "border-danger focus-visible:ring-danger-soft" : "border-line focus-visible:border-brand"
                         ]])
                       }, [

package/dist/chunks/{LpCommandScope-CtUhJe8T.js → LpCommandScope-DRUvHiX7.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, renderSlot } from "vue";
 import { usePaletteScope, createPaletteRegistry, providePaletteScope, usePaletteCommands, bindPaletteScopeElement } from "../composables/usePaletteCommands.js";
-import { u as usePaletteTheme } from "./palette-Co8tSASo.js";
+import { usePaletteTheme } from "../theme/palette.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpCommandScope",
   props: {