@leavepulse/ui 0.59.0 → 0.61.0

package/README.md

@@ -161,6 +161,14 @@ scroll restoration and anchor jumps keep working:
 
 Hide a specific scrollbar with the `lp-scrollbar-none` class.
 
+Selected text takes the operating system's accent unless told otherwise (on
+Linux that is the GTK theme, so it can come out red or green next to the kit
+palette). Opt into the theme's colour the same way:
+
+```css
+@import "@leavepulse/ui/selection.css"; /* after the tokens — reads --color-brand */
+```
+
 ## Develop
 
 ```bash

package/dist/assets/{LpCommandPalette-BM_IyzwB.css → LpCommandPalette-DA5pmuPi.css}

@@ -5,81 +5,81 @@
  * pane from its right edge as it grows. Animating the columns themselves made
  * every line of the list and the pane re-wrap on every frame.
  */
-.lp-cmd-dialog[data-v-14ce7a99] {
+.lp-cmd-dialog[data-v-a545acf6] {
   --lp-cmd-list: min(92vw, 40rem);
   --lp-cmd-pane: max(0px, min(26rem, 96vw - var(--lp-cmd-list)));
   width: var(--lp-cmd-list);
 }
-.lp-cmd-split[data-v-14ce7a99] {
+.lp-cmd-split[data-v-a545acf6] {
   transition:
     width 300ms var(--ease-emphasized, ease),
     min-height 300ms var(--ease-emphasized, ease);
 }
 @media (min-width: 768px) {
-.lp-cmd-split .lp-cmd-list[data-v-14ce7a99] {
+.lp-cmd-split .lp-cmd-list[data-v-a545acf6] {
     flex: 0 0 auto;
     /* the dialog's 1px border on each side */
     width: calc(var(--lp-cmd-list) - 2px);
 }
-.lp-cmd-dialog[data-pane="open"][data-v-14ce7a99] {
+.lp-cmd-dialog[data-pane="open"][data-v-a545acf6] {
     width: calc(var(--lp-cmd-list) + var(--lp-cmd-pane));
     min-height: min(76vh, 36rem);
 }
 }
-.lp-cmd-pane[data-v-14ce7a99] {
+.lp-cmd-pane[data-v-a545acf6] {
   width: var(--lp-cmd-pane);
 }
 /*
  * The pane rides in from the right edge while the dialog opens up to it, and
  * leaves the same way, for as long as the dialog takes to close over it.
  */
-.lp-cmd-pane-enter-active[data-v-14ce7a99],
-.lp-cmd-pane-leave-active[data-v-14ce7a99] {
+.lp-cmd-pane-enter-active[data-v-a545acf6],
+.lp-cmd-pane-leave-active[data-v-a545acf6] {
   transition:
     transform 300ms var(--ease-emphasized, ease),
     opacity 300ms ease;
 }
-.lp-cmd-pane-enter-from[data-v-14ce7a99],
-.lp-cmd-pane-leave-to[data-v-14ce7a99] {
+.lp-cmd-pane-enter-from[data-v-a545acf6],
+.lp-cmd-pane-leave-to[data-v-a545acf6] {
   opacity: 0;
   transform: translateX(40%);
 }
-.lp-cmd-para[data-v-14ce7a99] {
-  animation: lp-cmd-para-in-14ce7a99 260ms ease-out both;
+.lp-cmd-para[data-v-a545acf6] {
+  animation: lp-cmd-para-in-a545acf6 260ms ease-out both;
 }
-@keyframes lp-cmd-para-in-14ce7a99 {
+@keyframes lp-cmd-para-in-a545acf6 {
 from {
     opacity: 0;
     transform: translateY(4px);
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-split[data-v-14ce7a99],
-  .lp-cmd-pane-enter-active[data-v-14ce7a99],
-  .lp-cmd-pane-leave-active[data-v-14ce7a99] {
+.lp-cmd-split[data-v-a545acf6],
+  .lp-cmd-pane-enter-active[data-v-a545acf6],
+  .lp-cmd-pane-leave-active[data-v-a545acf6] {
     transition: none;
 }
-.lp-cmd-para[data-v-14ce7a99] {
+.lp-cmd-para[data-v-a545acf6] {
     animation: none;
 }
 }
-.lp-cmd-excerpt[data-v-14ce7a99] {
+.lp-cmd-excerpt[data-v-a545acf6] {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 /* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-14ce7a99] {
-  animation: lp-cmd-in-14ce7a99 140ms ease-out both;
+.lp-cmd-item[data-v-a545acf6] {
+  animation: lp-cmd-in-a545acf6 140ms ease-out both;
 }
-@keyframes lp-cmd-in-14ce7a99 {
+@keyframes lp-cmd-in-a545acf6 {
 from {
     opacity: 0;
     transform: translateY(3px);
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-14ce7a99] {
+.lp-cmd-item[data-v-a545acf6] {
     animation: none;
 }
 }

package/dist/assets/{LpTable-B_QCQCbB.css → LpTable-DpXyPzs8.css}

@@ -11,17 +11,17 @@
  * fade before closing the gap and the whole list lurches at the end instead of
  * gliding.
  */
-.lp-row-enter-active[data-v-344d1bc2],
-.lp-row-leave-active[data-v-344d1bc2] {
+.lp-row-enter-active[data-v-a9d69d56],
+.lp-row-leave-active[data-v-a9d69d56] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-344d1bc2] {
+.lp-row-move[data-v-a9d69d56] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-344d1bc2],
-.lp-row-leave-to[data-v-344d1bc2] {
+.lp-row-enter-from[data-v-a9d69d56],
+.lp-row-leave-to[data-v-a9d69d56] {
   opacity: 0;
   transform: translateX(-0.5rem);
 }
@@ -35,7 +35,7 @@
  * drops out of the table layout entirely. Nothing sits below this row to be
  * dragged around, so simply not animating its exit costs nothing.
  */
-.lp-row-empty.lp-row-leave-active[data-v-344d1bc2] {
+.lp-row-empty.lp-row-leave-active[data-v-a9d69d56] {
   display: none;
 }
 
@@ -54,7 +54,7 @@
  * once anything is selected. An earlier version collapsed the column to nothing
  * and floated the hover box over the first cell, where it sat on the text.
  */
-.lp-tick[data-v-344d1bc2] {
+.lp-tick[data-v-a9d69d56] {
   display: flex;
   align-items: center;
   max-width: 0;
@@ -66,17 +66,17 @@
     padding var(--duration-medium) var(--ease-emphasized),
     opacity var(--duration-fast) ease;
 }
-.lp-tick-open[data-v-344d1bc2] {
+.lp-tick-open[data-v-a9d69d56] {
   max-width: 3.25rem;
   padding-inline: 1rem;
   opacity: 1;
 }
-.lp-tick-hidden[data-v-344d1bc2],
-.lp-tick-cue[data-v-344d1bc2] {
+.lp-tick-hidden[data-v-a9d69d56],
+.lp-tick-cue[data-v-a9d69d56] {
   opacity: 0;
 }
-tr:hover .lp-tick-cue[data-v-344d1bc2],
-.lp-tick-cue[data-v-344d1bc2]:focus-within {
+tr:hover .lp-tick-cue[data-v-a9d69d56],
+.lp-tick-cue[data-v-a9d69d56]:focus-within {
   opacity: 1;
 }
 
@@ -84,24 +84,24 @@ tr:hover .lp-tick-cue[data-v-344d1bc2],
    turned down the rows change without animating rather than not changing. */
 /* Only where there is a hover to reveal it; a finger long-presses instead. */
 @media (hover: none) {
-tr:hover .lp-tick-cue[data-v-344d1bc2] {
+tr:hover .lp-tick-cue[data-v-a9d69d56] {
     opacity: 0;
 }
 
   /* Nor is there anything for the column's width to hold until then: on a
      touch screen it stays closed until a long press starts selecting, and
      eases open like the rest of the column. */
-.lp-tick-hidden[data-v-344d1bc2],
-  .lp-tick-cue[data-v-344d1bc2] {
+.lp-tick-hidden[data-v-a9d69d56],
+  .lp-tick-cue[data-v-a9d69d56] {
     max-width: 0;
     padding-inline: 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-344d1bc2],
-  .lp-row-leave-active[data-v-344d1bc2],
-  .lp-row-move[data-v-344d1bc2],
-  .lp-tick[data-v-344d1bc2] {
+.lp-row-enter-active[data-v-a9d69d56],
+  .lp-row-leave-active[data-v-a9d69d56],
+  .lp-row-move[data-v-a9d69d56],
+  .lp-tick[data-v-a9d69d56] {
     transition: none;
 }
 }

package/dist/chunks/{ContextMenuItems-CioDScj3.js → ContextMenuItems-qXReFtQW.js}

@@ -1,6 +1,6 @@
 import { defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, unref, createCommentVNode, withCtx, createVNode, normalizeClass, createElementVNode, createTextVNode, toDisplayString, withModifiers } from "vue";
 import { ContextMenuSeparator, ContextMenuSub, ContextMenuSubTrigger, ContextMenuPortal, ContextMenuSubContent, ContextMenuCheckboxItem, ContextMenuItem } from "reka-ui";
-import { _ as _sfc_main$1 } from "./LpIcon-B5guGKrW.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _hoisted_2 = { class: "flex items-center gap-2" };
 const _hoisted_3 = {

package/dist/chunks/{LayoutCanvas-BcGLJVBq.js → LayoutCanvas-t7LWFCEn.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, openBlock, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
-import { _ as _sfc_main$1 } from "./LayoutNode-BkBn6dvM.js";
+import { _ as _sfc_main$1 } from "./LayoutNode-DHsE6GwM.js";
 import { resizeAt, setActiveTab, reorderTab, removeBlock, moveLeaf } from "../layout/tree.js";
 import { layoutController } from "../layout/useLayout.js";
 const _hoisted_1 = { class: "flex min-h-0 min-w-0 flex-1" };

package/dist/chunks/{LayoutNode-BkBn6dvM.js → LayoutNode-DHsE6GwM.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, onBeforeUnmount, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createVNode, normalizeStyle, withCtx, renderSlot, mergeProps, createElementVNode, createCommentVNode, createBlock, unref, withModifiers, toDisplayString } from "vue";
 import { useReducedMotion, Motion } from "motion-v";
 import { blockTitle } from "../layout/registry.js";
-import { _ as _sfc_main$1 } from "./LpIcon-B5guGKrW.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
 const _hoisted_1 = ["onPointerdown"];
 const _hoisted_2 = {
   key: 1,

package/dist/chunks/{LpActionBar-DCN-_pZP.js → LpActionBar-BsSp66S_.js}

@@ -2,8 +2,8 @@ import { defineComponent, useSlots, computed, ref, watch, onBeforeUnmount, openB
 import { useLabels } from "../composables/useLpConfig.js";
 import { useBarStack } from "../components/actionBar.js";
 import { CLOSE_ICON } from "../components/dropdown.js";
-import { _ as _sfc_main$2 } from "./LpButton-vhlwmpBy.js";
-import { _ as _sfc_main$1 } from "./LpIcon-B5guGKrW.js";
+import { _ as _sfc_main$2 } from "./LpButton-CJSD7N0Z.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = {
   key: 1,

package/dist/chunks/{LpAddressInput-D-H94m4q.js → LpAddressInput-CzdZguBo.js}

@@ -2,13 +2,13 @@ import { defineComponent, defineAsyncComponent, computed, watch, ref, onMounted,
 import { useAsyncTask } from "../composables/useAsyncTask.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress } from "../components/address.js";
 import { flagEmoji, loadCountries } from "../components/countries.js";
-import { _ as _sfc_main$2 } from "./LpAutocomplete-hJ_6CHlh.js";
-import { _ as _sfc_main$3 } from "./LpButton-vhlwmpBy.js";
-import { _ as _sfc_main$1 } from "./LpFormField-BpQ6WJPe.js";
-import { _ as _sfc_main$4 } from "./LpIcon-B5guGKrW.js";
-import { _ as _sfc_main$5 } from "./LpInput-WvyP02ID.js";
-import { _ as _sfc_main$7 } from "./LpModal-DvGD6kEe.js";
-import { _ as _sfc_main$6 } from "./LpSelect-DynjWK1A.js";
+import { _ as _sfc_main$2 } from "./LpAutocomplete-D9mY5Tqk.js";
+import { _ as _sfc_main$3 } from "./LpButton-CJSD7N0Z.js";
+import { _ as _sfc_main$1 } from "./LpFormField-DMPPL1jF.js";
+import { _ as _sfc_main$4 } from "./LpIcon-CTuDVTYv.js";
+import { _ as _sfc_main$5 } from "./LpInput-C7FHxzj2.js";
+import { _ as _sfc_main$7 } from "./LpModal-QFfctZsj.js";
+import { _ as _sfc_main$6 } from "./LpSelect-C4OXN_q3.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = { class: "flex items-stretch gap-2" };
 const _hoisted_2 = { class: "grid gap-3 sm:grid-cols-[minmax(0,1fr)_10rem]" };

package/dist/chunks/{LpAlert-CXMn1GYE.js → LpAlert--KLL4NLk.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createVNode, createElementVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
 import { tv } from "tailwind-variants";
-import { _ as _sfc_main$1 } from "./LpIcon-B5guGKrW.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
 const _hoisted_1 = ["role"];
 const _hoisted_2 = { class: "min-w-0" };
 const _hoisted_3 = {

package/dist/chunks/{LpAppShell-BeMuKEjh.js → LpAppShell-BXMNDEpF.js}

@@ -1,10 +1,10 @@
 import { defineComponent, computed, ref, useId, watch, openBlock, createElementBlock, mergeProps, unref, createElementVNode, withModifiers, toDisplayString, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, normalizeClass, createBlock } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$2 } from "./LpButton-vhlwmpBy.js";
-import { _ as _sfc_main$3 } from "./LpIcon-B5guGKrW.js";
+import { _ as _sfc_main$2 } from "./LpButton-CJSD7N0Z.js";
+import { _ as _sfc_main$3 } from "./LpIcon-CTuDVTYv.js";
 import { _ as _sfc_main$5 } from "./LpScrollArea-Hz3-JWUG.js";
 import { _ as _sfc_main$4 } from "./LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-CKamWtPo.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-D8tub3bt.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = ["href"];
 const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };

package/dist/chunks/{LpAutocomplete-hJ_6CHlh.js → LpAutocomplete-D9mY5Tqk.js}

@@ -1,18 +1,27 @@
-import { defineComponent, computed, useAttrs, ref, watch, openBlock, createBlock, unref, normalizeStyle, normalizeClass, withCtx, createVNode, createCommentVNode, mergeProps, createElementBlock, withModifiers, toDisplayString, createTextVNode, Fragment, renderList, createElementVNode } from "vue";
+import { defineComponent, computed, useAttrs, ref, watch, openBlock, createBlock, unref, normalizeStyle, normalizeClass, withCtx, createVNode, createElementBlock, createCommentVNode, createElementVNode, mergeProps, Transition, toDisplayString, withModifiers, createTextVNode, Fragment, renderList, nextTick } from "vue";
 import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxItem } from "reka-ui";
 import { useFieldControl } from "../composables/useField.js";
 import { useInputFilter } from "../composables/useInputFilter.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { CLOSE_ICON, POPOVER_PANEL, OPTION_ITEM } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon-B5guGKrW.js";
-const _hoisted_1 = ["aria-label"];
-const _hoisted_2 = {
+import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
+const _hoisted_1 = ["src"];
+const _hoisted_2 = { class: "relative flex min-w-0 flex-1 self-stretch" };
+const _hoisted_3 = {
   key: 0,
-  class: "px-3 py-4 text-center text-sm italic text-muted"
+  class: "pointer-events-none absolute inset-0 flex min-w-0 items-center gap-1.5",
+  "aria-hidden": "true"
 };
-const _hoisted_3 = { class: "flex min-w-0 flex-col" };
-const _hoisted_4 = { class: "truncate" };
+const _hoisted_4 = ["aria-label"];
 const _hoisted_5 = {
+  key: 0,
+  class: "px-3 py-4 text-center text-sm italic text-muted"
+};
+const _hoisted_6 = { class: "flex min-w-0 items-center gap-2.5" };
+const _hoisted_7 = ["src"];
+const _hoisted_8 = { class: "flex min-w-0 flex-col" };
+const _hoisted_9 = { class: "truncate" };
+const _hoisted_10 = {
   key: 0,
   class: "truncate text-xs text-muted"
 };
@@ -35,7 +44,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     filter: { type: Boolean, default: true },
     minChars: { default: 1 },
     pattern: {},
-    restrict: {}
+    restrict: {},
+    selected: {}
   },
   emits: ["update:modelValue", "select"],
   setup(__props, { emit: __emit }) {
@@ -78,6 +88,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const open = ref(false);
     const focused = ref(false);
+    const showSelected = computed(() => !!props.selected?.label && !focused.value);
+    const draft = ref(null);
+    const showImage = computed(() => !!props.selected?.image && (!focused.value || draft.value !== null));
     const canOpen = computed(
       () => text.value.length >= props.minChars && (props.loading || filtered.value.length > 0)
     );
@@ -96,21 +109,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onInput(event) {
       filterInput(event);
       typing.value = true;
+      draft.value = null;
       text.value = event.target.value;
     }
-    function onFocus() {
+    function onFocus(event) {
       typing.value = false;
       focused.value = true;
+      if (props.selected?.label) {
+        draft.value = props.selected.label;
+        const input = event.target;
+        void nextTick(() => input.select());
+      }
       if (canOpen.value) open.value = true;
     }
+    function onBlur() {
+      focused.value = false;
+      draft.value = null;
+    }
     function choose(opt) {
       typing.value = false;
+      draft.value = null;
       emit("update:modelValue", opt.value);
       emit("select", opt.value);
       open.value = false;
     }
     function clear() {
       typing.value = false;
+      draft.value = null;
       emit("update:modelValue", "");
       open.value = false;
     }
@@ -134,34 +159,66 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]])
           }, {
             default: withCtx(() => [
-              __props.icon ? (openBlock(), createBlock(_sfc_main$1, {
+              __props.icon || __props.selected?.image ? (openBlock(), createElementBlock("span", {
                 key: 0,
-                name: __props.icon,
-                size: 16,
-                class: "shrink-0 text-muted"
-              }, null, 8, ["name"])) : createCommentVNode("", true),
-              createVNode(unref(ComboboxInput), mergeProps(inputAttrs.value, {
-                id: unref(field).id,
-                "model-value": text.value,
-                placeholder: __props.placeholder,
-                disabled: unref(field).disabled,
-                required: unref(field).required || void 0,
-                "aria-invalid": isInvalidState.value || void 0,
-                "aria-describedby": unref(field).describedBy,
-                class: "lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted",
-                onBeforeinput: unref(onBeforeInput),
-                onPaste: unref(onPaste),
-                onCompositionend: unref(onCompositionEnd),
-                onInput,
-                onFocus,
-                onBlur: _cache[0] || (_cache[0] = ($event) => focused.value = false)
-              }), null, 16, ["id", "model-value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby", "onBeforeinput", "onPaste", "onCompositionend"]),
+                class: normalizeClass(["relative grid shrink-0 place-items-center", __props.selected?.image ? "size-5" : "size-4"])
+              }, [
+                __props.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                  key: 0,
+                  name: __props.icon,
+                  size: 16,
+                  class: normalizeClass(["col-start-1 row-start-1 text-muted transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none", showImage.value ? "scale-75 opacity-0" : "opacity-100"])
+                }, null, 8, ["name", "class"])) : createCommentVNode("", true),
+                __props.selected?.image ? (openBlock(), createElementBlock("img", {
+                  key: 1,
+                  src: __props.selected.image,
+                  alt: "",
+                  class: normalizeClass(["col-start-1 row-start-1 size-5 rounded-full object-cover transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none", showImage.value ? "opacity-100" : "scale-75 opacity-0"])
+                }, null, 10, _hoisted_1)) : createCommentVNode("", true)
+              ], 2)) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_2, [
+                createVNode(unref(ComboboxInput), mergeProps(inputAttrs.value, {
+                  id: unref(field).id,
+                  "model-value": draft.value ?? text.value,
+                  placeholder: __props.placeholder,
+                  disabled: unref(field).disabled,
+                  required: unref(field).required || void 0,
+                  "aria-invalid": isInvalidState.value || void 0,
+                  "aria-describedby": unref(field).describedBy,
+                  class: ["lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted", showSelected.value && "text-transparent placeholder:text-transparent"],
+                  onBeforeinput: unref(onBeforeInput),
+                  onPaste: unref(onPaste),
+                  onCompositionend: unref(onCompositionEnd),
+                  onInput,
+                  onFocus,
+                  onBlur
+                }), null, 16, ["id", "model-value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby", "class", "onBeforeinput", "onPaste", "onCompositionend"]),
+                createVNode(Transition, {
+                  "enter-active-class": "transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none",
+                  "leave-active-class": "transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none",
+                  "enter-from-class": "opacity-0",
+                  "leave-to-class": "opacity-0"
+                }, {
+                  default: withCtx(() => [
+                    __props.selected?.label ? (openBlock(), createElementBlock("span", _hoisted_3, [
+                      createElementVNode("span", {
+                        class: normalizeClass(["max-w-full shrink-0 truncate", showSelected.value ? "" : "invisible"])
+                      }, toDisplayString(__props.selected.label), 3),
+                      __props.selected.hint ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        class: normalizeClass(["min-w-0 truncate text-sm text-muted transition-[opacity,translate] duration-[var(--duration-fast)] motion-reduce:transition-none", showSelected.value ? "opacity-100" : "-translate-x-1 opacity-0"])
+                      }, toDisplayString(__props.selected.hint), 3)) : createCommentVNode("", true)
+                    ])) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                })
+              ]),
               __props.clearable && hasValue.value ? (openBlock(), createElementBlock("button", {
                 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,
-                onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {
+                onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
                 }, ["prevent"])),
                 onClick: clear
               }, [
@@ -170,7 +227,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   size: 16,
                   class: normalizeClass(unref(CLOSE_ICON))
                 }, null, 8, ["class"])
-              ], 40, _hoisted_1)) : createCommentVNode("", true)
+              ], 40, _hoisted_4)) : createCommentVNode("", true)
             ]),
             _: 1
           }, 8, ["class"]),
@@ -181,13 +238,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 position: "popper",
                 "side-offset": 6,
                 class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden"]),
-                onOpenAutoFocus: _cache[2] || (_cache[2] = withModifiers(() => {
+                onOpenAutoFocus: _cache[1] || (_cache[1] = withModifiers(() => {
                 }, ["prevent"]))
               }, {
                 default: withCtx(() => [
                   createVNode(unref(ComboboxViewport), { class: "max-h-72 overflow-y-auto p-1" }, {
                     default: withCtx(() => [
-                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.loadingText), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
+                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(__props.loadingText), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
                         key: 1,
                         class: "px-3 py-4 text-center text-sm italic text-muted"
                       }, {
@@ -205,9 +262,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           onSelect: withModifiers(($event) => choose(opt), ["prevent"])
                         }, {
                           default: withCtx(() => [
-                            createElementVNode("span", _hoisted_3, [
-                              createElementVNode("span", _hoisted_4, toDisplayString(opt.label ?? opt.value), 1),
-                              opt.description ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(opt.description), 1)) : createCommentVNode("", true)
+                            createElementVNode("span", _hoisted_6, [
+                              opt.image ? (openBlock(), createElementBlock("img", {
+                                key: 0,
+                                src: opt.image,
+                                alt: "",
+                                class: "size-6 shrink-0 rounded-full object-cover"
+                              }, null, 8, _hoisted_7)) : createCommentVNode("", true),
+                              createElementVNode("span", _hoisted_8, [
+                                createElementVNode("span", _hoisted_9, toDisplayString(opt.label ?? opt.value), 1),
+                                opt.description ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(opt.description), 1)) : createCommentVNode("", true)
+                              ])
                             ])
                           ]),
                           _: 2

package/dist/chunks/{LpAvatar-CeW4Z5CL.js → LpAvatar-K6MOMfgn.js}

@@ -1,8 +1,8 @@
 import { defineComponent, computed, ref, onMounted, openBlock, createBlock, withCtx, createVNode, unref, mergeProps, createCommentVNode, createElementBlock, Fragment, createTextVNode, toDisplayString } from "vue";
 import { AvatarRoot, AvatarImage, AvatarFallback } from "reka-ui";
 import { tv } from "tailwind-variants";
-import { _ as _sfc_main$1 } from "./LpContextMenu-DRFd-iyc.js";
-import { _ as _sfc_main$2 } from "./LpIcon-B5guGKrW.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-Cv_F2iCG.js";
+import { _ as _sfc_main$2 } from "./LpIcon-CTuDVTYv.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/{LpBreadcrumbs-BLzOEgAF.js → LpBreadcrumbs-CndzPYiG.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, Fragment, renderList, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, toDisplayString } from "vue";
-import { _ as _sfc_main$1 } from "./LpIcon-B5guGKrW.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
 import { useLabels, useLinkComponent } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { resolveLink } from "../components/link.js";

package/dist/chunks/{LpButton-vhlwmpBy.js → LpButton-CJSD7N0Z.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, openBlock, createBlock, resolveDynamicCompon
 import { tv } from "tailwind-variants";
 import { useLinkComponent } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpIcon-B5guGKrW.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
 import { resolveLink } from "../components/link.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/{LpCalendar-BLoE8Qm7.js → LpCalendar-CXVDbb2M.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeClass, 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-B5guGKrW.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/{LpCard-Gbr8a1xK.js → LpCard-D9HVgX8Y.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, openBlock, createBlock, withCtx, resolveDynamicComponent, mergeProps, unref, renderSlot } from "vue";
 import { tv } from "tailwind-variants";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-DRFd-iyc.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-Cv_F2iCG.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,

package/dist/chunks/{LpCheckbox-B_C8sOoT.js → LpCheckbox-DV9W6T3H.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
 import { CheckboxRoot, CheckboxIndicator } from "reka-ui";
-import { _ as _sfc_main$1 } from "./LpIcon-B5guGKrW.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
 import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const __default__ = { inheritAttrs: false };

package/dist/chunks/{LpCodeBlock-D6zhp30a.js → LpCodeBlock-t6MLA3fb.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, reactive, watch, ref, openBlock, createEleme
 import { useClipboard } from "../composables/useClipboard.js";
 import { tokenizeLines } from "../components/codeHighlight.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$1 } from "./LpIcon-B5guGKrW.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = {
   key: 0,

package/dist/chunks/{LpColorPicker-CVXwjEtX.js → LpColorPicker-BO1ZTY51.js}

@@ -5,8 +5,8 @@ import { useFieldControl } from "../composables/useField.js";
 import { DEFAULT_SWATCHES, formatColor, opaqueCss, parseColor, rgbToHsv, isLight, clampHsv } from "../components/color.js";
 import { useClipboard } from "../composables/useClipboard.js";
 import { POPOVER_PANEL } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-DRFd-iyc.js";
-import { _ as _sfc_main$2 } from "./LpIcon-B5guGKrW.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-Cv_F2iCG.js";
+import { _ as _sfc_main$2 } from "./LpIcon-CTuDVTYv.js";
 import { _ as _sfc_main$3 } from "./LpRollingText-DB7upf-5.js";
 const _hoisted_1 = ["id", "disabled", "aria-label", "aria-invalid", "aria-describedby"];
 const _hoisted_2 = { class: "min-w-0 flex-1 truncate font-mono text-xs text-muted-strong" };

package/dist/chunks/{LpConfirmDialog-DkgIT-Xg.js → LpConfirmDialog-tkgyY3eu.js}

@@ -1,8 +1,8 @@
 import { defineComponent, computed, ref, watch, openBlock, createBlock, createSlots, withCtx, renderSlot, createElementBlock, toDisplayString, createCommentVNode, createVNode, createTextVNode, unref, createElementVNode, normalizeClass, nextTick } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$2 } from "./LpButton-vhlwmpBy.js";
-import { _ as _sfc_main$3 } from "./LpIcon-B5guGKrW.js";
-import { _ as _sfc_main$1 } from "./LpModal-DvGD6kEe.js";
+import { _ as _sfc_main$2 } from "./LpButton-CJSD7N0Z.js";
+import { _ as _sfc_main$3 } from "./LpIcon-CTuDVTYv.js";
+import { _ as _sfc_main$1 } from "./LpModal-QFfctZsj.js";
 const _hoisted_1 = { class: "inline-flex items-center gap-2.5" };
 const _hoisted_2 = {
   key: 0,

package/dist/chunks/{LpConfirmHost-CYzXWFOI.js → LpConfirmHost-CoYIcUdl.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, watch, openBlock, createBlock, createCommentVNode } from "vue";
 import { confirmQueue, settleConfirm } from "../components/confirm.js";
-import { _ as _sfc_main$1 } from "./LpConfirmDialog-DkgIT-Xg.js";
+import { _ as _sfc_main$1 } from "./LpConfirmDialog-tkgyY3eu.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmHost",
   props: {