@leavepulse/ui 0.70.0 → 0.71.0

package/dist/chunks/{LpRelativeTime-CKzVqAo9.js → LpRelativeTime-UM8EkfrN.js}

@@ -2,8 +2,8 @@ import { defineComponent, computed, openBlock, createBlock, withCtx, createEleme
 import { useLocale } from "../composables/useLocale.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useNow } from "../composables/useNow.js";
-import { _ as _sfc_main$2 } from "./LpRollingText-DB7upf-5.js";
-import { _ as _sfc_main$1 } from "./LpTooltip-Cz8SQwRt.js";
+import { _ as _sfc_main$2 } from "./LpRollingText-DiL717LK.js";
+import { _ as _sfc_main$1 } from "./LpTooltip-BcBvIx4z.js";
 import { formatRelativeTime } from "../components/relativeTime.js";
 import { toEpoch } from "../components/timeSpan.js";
 const _hoisted_1 = ["datetime"];

package/dist/chunks/LpRepeater-OvzByE5L.js

@@ -0,0 +1,180 @@
+import { defineComponent, useModel, ref, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString, createCommentVNode, createVNode, withCtx, createTextVNode, TransitionGroup, Fragment, renderList, renderSlot, mergeModels, nextTick } from "vue";
+import { useFieldControl } from "../composables/useField.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useRepeater } from "../composables/useRepeater.js";
+import { usePrefersReducedMotion } from "../composables/useReducedMotion.js";
+import { _ as _sfc_main$1 } from "./LpButton-BQDAFXBd.js";
+import { _ as _sfc_main$2 } from "./LpIcon-DkP-9mzK.js";
+import { _ as _sfc_main$3 } from "./LpShift-DXNsauQZ.js";
+import '../assets/LpRepeater-C1Cw27hj.css';const _hoisted_1 = { class: "flex items-center justify-between gap-2" };
+const _hoisted_2 = {
+  key: 0,
+  class: "text-sm font-medium text-ink"
+};
+const _hoisted_3 = { class: "min-w-0 flex-1" };
+const _hoisted_4 = {
+  key: "empty",
+  class: "text-xs text-muted"
+};
+const focusable = 'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex="0"], [contenteditable="true"]';
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "LpRepeater",
+  props: /* @__PURE__ */ mergeModels({
+    createItem: { type: Function },
+    itemKey: { type: Function },
+    label: {},
+    disabled: { type: Boolean },
+    labels: {}
+  }, {
+    "modelValue": { default: () => [] },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const model = useModel(__props, "modelValue");
+    const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }));
+    const text = useLabels("repeater", { add: "Add item", remove: "Remove item {index}", empty: "No items" }, () => props.labels);
+    const list = useRepeater({
+      value: () => model.value,
+      set: (items) => {
+        model.value = items;
+      },
+      createItem: () => props.createItem(),
+      itemKey: () => props.itemKey,
+      disabled: () => field.value.disabled
+    });
+    const { rows } = list;
+    const rowsHost = ref(null);
+    const reducedMotion = usePrefersReducedMotion();
+    const addButton = ref(null);
+    function focusRow(index) {
+      rowAt(index)?.querySelector(focusable)?.focus({ preventScroll: true });
+    }
+    function rowAt(index) {
+      return Array.from(rowsHost.value?.children ?? []).filter(
+        (node) => node.hasAttribute("data-lp-repeater-row") && !node.hasAttribute("inert")
+      )[index];
+    }
+    function beforeLeave(el) {
+      const row = el;
+      row.style.width = `${row.offsetWidth}px`;
+      row.style.top = `${row.offsetTop}px`;
+      row.setAttribute("inert", "");
+      row.setAttribute("aria-hidden", "true");
+    }
+    function beforeEnter(el) {
+      const row = el;
+      row.removeAttribute("inert");
+      row.removeAttribute("aria-hidden");
+      row.style.removeProperty("top");
+      row.style.removeProperty("width");
+    }
+    async function add() {
+      if (field.value.disabled) return;
+      list.add();
+      await nextTick();
+      focusRow(model.value.length - 1);
+    }
+    async function remove(index) {
+      if (field.value.disabled) return;
+      const row = rowAt(index);
+      const restore = row?.contains(row.ownerDocument.activeElement);
+      list.remove(index);
+      if (!restore) return;
+      await nextTick();
+      if (model.value.length) focusRow(Math.min(index, model.value.length - 1));
+      else addButton.value?.$el?.focus({ preventScroll: true });
+    }
+    __expose({ add, remove, update: list.update });
+    const { class: rootClass, attrs: rest } = useMergedAttrs("flex min-w-0 flex-col gap-2");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps(unref(rest), { class: unref(rootClass) }), [
+        createElementVNode("div", _hoisted_1, [
+          __props.label ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+          createVNode(_sfc_main$1, {
+            ref_key: "addButton",
+            ref: addButton,
+            size: "xs",
+            variant: "ghost",
+            disabled: unref(field).disabled,
+            onClick: add
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                name: "lucide:plus",
+                size: 14
+              }),
+              createTextVNode(toDisplayString(unref(text).add), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ]),
+        createVNode(_sfc_main$3, { axis: "height" }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              ref_key: "rowsHost",
+              ref: rowsHost,
+              class: "relative flex min-w-0 flex-col gap-2"
+            }, [
+              createVNode(TransitionGroup, {
+                name: "lp-repeater",
+                css: !unref(reducedMotion),
+                onBeforeEnter: beforeEnter,
+                onBeforeLeave: beforeLeave
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), ({ item, key }, index) => {
+                    return openBlock(), createElementBlock("div", {
+                      key,
+                      "data-lp-repeater-row": "",
+                      class: "flex min-w-0 items-start gap-2"
+                    }, [
+                      createElementVNode("div", _hoisted_3, [
+                        renderSlot(_ctx.$slots, "default", {
+                          item,
+                          index,
+                          disabled: unref(field).disabled,
+                          update: (next) => unref(list).update(index, next),
+                          remove: () => remove(index)
+                        })
+                      ]),
+                      createVNode(_sfc_main$1, {
+                        variant: "ghost",
+                        size: "sm",
+                        square: "",
+                        disabled: unref(field).disabled,
+                        "aria-label": unref(text).remove.replace("{index}", String(index + 1)),
+                        onClick: ($event) => remove(index)
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$2, {
+                            name: "lucide:x",
+                            size: 14
+                          })
+                        ]),
+                        _: 1
+                      }, 8, ["disabled", "aria-label", "onClick"])
+                    ]);
+                  }), 128)),
+                  !unref(rows).length ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                    renderSlot(_ctx.$slots, "empty", {}, () => [
+                      createTextVNode(toDisplayString(unref(text).empty), 1)
+                    ])
+                  ])) : createCommentVNode("", true)
+                ]),
+                _: 3
+              }, 8, ["css"])
+            ], 512)
+          ]),
+          _: 3
+        })
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

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

@@ -1,12 +1,13 @@
 import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, Transition, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
-import '../assets/LpRollingText-BGnE6q9j.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/LpRollingText-dyOXedGO.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpRollingText",
   props: {
     value: {},
     mode: { default: "slide" },
     direction: { default: "up" },
     duration: { default: 320 },
-    align: { default: "center" }
+    align: { default: "center" },
+    wrap: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -25,7 +26,7 @@ import '../assets/LpRollingText-BGnE6q9j.css';const _sfc_main = /* @__PURE__ */
     }));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("span", {
-        class: normalizeClass(["lp-roll relative inline-flex overflow-hidden align-bottom", justify.value]),
+        class: normalizeClass(["lp-roll relative inline-flex overflow-hidden align-bottom", [justify.value, __props.wrap && "lp-roll--wrap"]]),
         style: normalizeStyle(style.value)
       }, [
         createVNode(Transition, { name: name.value }, {

package/dist/chunks/{LpSecretField-DMfdJ1cQ.js → LpSecretField-DwQiPOko.js}

@@ -1,16 +1,18 @@
 import { defineComponent, useModel, computed, ref, watch, onMounted, onBeforeUnmount, useId, openBlock, createBlock, mergeProps, unref, createSlots, withCtx, createCommentVNode, renderSlot, createVNode, normalizeStyle, normalizeClass, createElementVNode, Transition, createElementBlock, toDisplayString, mergeModels } from "vue";
+import { suppressPaletteDiscovery } from "../composables/usePaletteCommands.js";
 import { prefersReducedMotion } from "../composables/easing.js";
 import { useScramble } from "../composables/useScramble.js";
 import { useLabels } from "../composables/useLpConfig.js";
+import { useFieldControl } from "../composables/useField.js";
 import { mergeClass } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$5 } from "./FieldWrapper-BiennROB.js";
-import { _ as _sfc_main$3 } from "./LpButton-CVxBfGjd.js";
-import { _ as _sfc_main$2 } from "./LpCopyButton-DzHjnFs0.js";
-import { _ as _sfc_main$4 } from "./LpIcon-HJP5xMz4.js";
-import { _ as _sfc_main$1 } from "./LpPasswordInput-DTV18FIh.js";
+import { _ as _sfc_main$5 } from "./FieldWrapper-YzbvvC3M.js";
+import { _ as _sfc_main$3 } from "./LpButton-BQDAFXBd.js";
+import { _ as _sfc_main$2 } from "./LpCopyButton-Dmq7DmFw.js";
+import { _ as _sfc_main$4 } from "./LpIcon-DkP-9mzK.js";
+import { _ as _sfc_main$1 } from "./LpPasswordInput-BzAZsf5V.js";
 import { _ as _sfc_main$6 } from "./LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$8 } from "./LpTooltip-Cz8SQwRt.js";
-import { _ as _sfc_main$7 } from "./RevealToggle-C-KzaQGJ.js";
+import { _ as _sfc_main$8 } from "./LpTooltip-BcBvIx4z.js";
+import { _ as _sfc_main$7 } from "./RevealToggle-BVFM_FAU.js";
 const _hoisted_1 = ["id", "aria-label"];
 const _hoisted_2 = {
   key: "empty",
@@ -57,7 +59,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const revealed = useModel(__props, "revealed");
+    const revealedModel = useModel(__props, "revealed");
+    const revealed = computed({
+      get: () => props.revealable && revealedModel.value,
+      set: (value) => {
+        revealedModel.value = value;
+      }
+    });
     const text = useLabels(
       "secretField",
       {
@@ -71,6 +79,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => props.labels
     );
     const secret = computed(() => (props.input ? props.modelValue : props.value) ?? "");
+    const control = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }));
     const decrypt = useScramble(() => revealed.value ? secret.value : "", { onChange: true, duration: 650 });
     const mask = computed(() => "•".repeat(props.maskLength));
     let hideTimer;
@@ -117,11 +126,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => mergeClass(
         "relative flex w-full items-center gap-1 overflow-hidden rounded-control border bg-surface-soft text-ink transition-colors duration-(--duration-fast)",
         props.error ? "border-danger" : "border-line",
-        props.disabled ? "opacity-55" : "",
+        control.value.disabled ? "opacity-55" : "",
         props.wrap ? "py-1.5" : "",
         { sm: "min-h-(--size-control-sm) pl-2.5 pr-1 text-xs", md: "min-h-(--size-control-md) pl-3 pr-1.5 text-sm", lg: "min-h-(--size-control-lg) pl-3.5 pr-1.5 text-sm" }[props.size]
       )
     );
+    suppressPaletteDiscovery();
     return (_ctx, _cache) => {
       return __props.input ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
         key: 0,
@@ -133,7 +143,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: "[&_input]:font-mono",
         "model-value": __props.modelValue,
         placeholder: __props.placeholder,
-        disabled: __props.disabled,
+        disabled: unref(control).disabled,
+        revealable: __props.revealable,
         label: __props.label,
         hint: __props.hint,
         error: __props.error,
@@ -147,7 +158,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             value: secret.value,
             size: "xs",
             class: "size-7",
-            disabled: __props.disabled,
+            disabled: unref(control).disabled,
             onCopied: _cache[0] || (_cache[0] = (t) => emit("copied", t))
           }, null, 8, ["value", "disabled"])) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "actions"),
@@ -160,7 +171,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "aria-label": unref(text).regenerate,
             title: unref(text).regenerate,
             action: __props.regenerate,
-            disabled: __props.disabled
+            disabled: unref(control).disabled
           }, {
             default: withCtx(() => [
               createVNode(_sfc_main$4, {
@@ -180,7 +191,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1040, ["visible", "model-value", "placeholder", "disabled", "label", "hint", "error", "size", "labels"])) : (openBlock(), createBlock(_sfc_main$5, {
+      ]), 1040, ["visible", "model-value", "placeholder", "disabled", "revealable", "label", "hint", "error", "size", "labels"])) : (openBlock(), createBlock(_sfc_main$5, {
         key: 1,
         wrapped: !!(__props.label || __props.hint || __props.error),
         id: unref(id),
@@ -239,7 +250,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "icon-size": iconSize.value,
                 "show-label": unref(text).show,
                 "hide-label": unref(text).hide,
-                disabled: __props.disabled,
+                disabled: unref(control).disabled,
                 controls: unref(id),
                 class: "size-7"
               }, null, 8, ["modelValue", "icon-size", "show-label", "hide-label", "disabled", "controls"])) : createCommentVNode("", true),
@@ -248,7 +259,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 value: secret.value,
                 size: copySize.value,
                 class: "size-7 text-muted hover:text-ink",
-                disabled: __props.disabled,
+                disabled: unref(control).disabled,
                 onCopied: _cache[4] || (_cache[4] = (t) => emit("copied", t))
               }, null, 8, ["value", "size", "disabled"])) : createCommentVNode("", true),
               renderSlot(_ctx.$slots, "actions"),
@@ -264,7 +275,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     square: "",
                     class: "size-7 text-muted hover:text-ink",
                     action: __props.regenerate,
-                    disabled: __props.disabled
+                    disabled: unref(control).disabled
                   }, {
                     default: withCtx(() => [
                       createVNode(_sfc_main$4, {

package/dist/chunks/{LpSection-BW4xJ-Li.js → LpSection-DcQsieHG.js}

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

package/dist/chunks/{LpSegmented-BO99Sr4m.js → LpSegmented-D2VST0o3.js}

@@ -1,11 +1,12 @@
 import { defineComponent, useId, ref, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createCommentVNode, createVNode, toDisplayString } from "vue";
+import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { Motion } from "motion-v";
 import { ToggleGroupRoot, ToggleGroupItem } from "reka-ui";
 import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 import { _ as _sfc_main$2 } from "./AttentionDot-DCBf4aWg.js";
-import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DkP-9mzK.js";
 const _hoisted_1 = {
   key: 1,
   class: "relative z-10 inline-flex shrink-0"
@@ -19,6 +20,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "LpSegmented",
   props: {
+    palette: { type: [Boolean, Object], default: void 0 },
     modelValue: {},
     options: {},
     size: { default: "md" },
@@ -59,6 +61,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const target = event.currentTarget;
       if (target instanceof HTMLElement) target.blur();
     }
+    usePaletteControl({ disabled: () => field.value.disabled });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ToggleGroupRoot), mergeProps({
         "model-value": __props.modelValue,

package/dist/chunks/{LpSelect-B4f_yRi5.js → LpSelect-DYX2-u5A.js}

@@ -1,12 +1,13 @@
-import { defineComponent, computed, ref, useId, useAttrs, reactive, watch, nextTick, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeClass, createElementVNode, toDisplayString, createElementBlock, TransitionGroup, Fragment, renderList, createCommentVNode, withModifiers, createTextVNode, normalizeStyle } from "vue";
+import { defineComponent, computed, ref, useAttrs, useId, reactive, watch, nextTick, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeClass, createElementVNode, toDisplayString, createElementBlock, TransitionGroup, Fragment, renderList, createCommentVNode, withModifiers, createTextVNode, normalizeStyle } from "vue";
+import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { ComboboxRoot, ComboboxAnchor, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxInput, ComboboxViewport, ComboboxEmpty, ComboboxItem, ComboboxItemIndicator } from "reka-ui";
-import { useFieldControl } from "../composables/useField.js";
+import { useFieldControl, useFieldBlur } from "../composables/useField.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { POPOVER_PANEL, OPTION_ITEM, optionStagger } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
-import { _ as _sfc_main$3 } from "./OptionContent-CmYUUeWj.js";
-import { _ as _sfc_main$2 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DkP-9mzK.js";
+import { _ as _sfc_main$3 } from "./OptionContent-DPzNsybd.js";
+import { _ as _sfc_main$2 } from "./LpRollingText-DiL717LK.js";
 import { fitChips, toggledValues } from "../components/select.js";
 import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 import { useResizeObserver } from "../composables/useResizeObserver.js";
@@ -48,6 +49,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "LpSelect",
   props: {
+    palette: { type: [Boolean, Object], default: void 0 },
     modelValue: {},
     options: {},
     placeholder: {},
@@ -112,11 +114,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       isOpen.value = open;
       query.value = "";
     }
-    const partOf = `lp-select-${useId()}`;
-    function onFocusOut(event) {
-      const next = event.relatedTarget;
-      const inside = !!next && typeof next.closest === "function" && !!next.closest(`[data-lp-select-part="${partOf}"]`);
-      if (!inside) emit("blur", event);
+    async function openFromKeyboard(event) {
+      if (field.value.disabled || isOpen.value || !["ArrowDown", "ArrowUp"].includes(event.key)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const trigger = event.currentTarget;
+      trigger.click();
+      await nextTick();
+      const panel = trigger.ownerDocument.getElementById(trigger.getAttribute("aria-controls") ?? "");
+      const search = panel?.querySelector("input:not([disabled])");
+      const items = panel?.querySelectorAll('[role="option"]:not([data-disabled])');
+      const selected = panel?.querySelector('[role="option"][aria-selected="true"]:not([data-disabled])');
+      const target = search ?? selected ?? (event.key === "ArrowUp" ? items?.[items.length - 1] : items?.[0]);
+      target?.focus();
+    }
+    const { partId, onFocusOut } = useFieldBlur((event) => emit("blur", event));
+    const triggerRef = ref(null);
+    function onListFocusOut(event) {
+      const trigger = triggerRef.value?.$el;
+      if (isOpen.value || event.relatedTarget || !trigger?.isConnected) {
+        onFocusOut(event);
+        return;
+      }
+      trigger.focus({ preventScroll: true });
     }
     const attrs = useAttrs();
     const valueId = `lp-select-${useId()}-value`;
@@ -238,6 +258,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     const portalTo = usePortalTarget();
     const guardOutside = useOutsideGuard();
+    usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid, editorProps: () => ({ selected: props.multiple ? modelList.value.map((value, index) => shown(value, index)) : current.value }) });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ComboboxRoot), mergeProps({
         "model-value": comboModel.value,
@@ -254,8 +275,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }), {
         default: withCtx(() => [
           createVNode(unref(ComboboxAnchor), {
-            "data-lp-select-part": partOf,
-            onFocusout: onFocusOut,
+            "data-lp-field-part": unref(partId),
+            onFocusout: unref(onFocusOut),
             class: normalizeClass([
               anchorHeight.value,
               "group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-sm text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2",
@@ -269,7 +290,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 hidden: ""
               }, toDisplayString(valueText.value), 1),
               createVNode(unref(ComboboxTrigger), mergeProps({
-                id: unref(field).id
+                ref_key: "triggerRef",
+                ref: triggerRef,
+                id: unref(field).id,
+                tabindex: unref(field).disabled ? -1 : 0,
+                onKeydown: openFromKeyboard
               }, triggerName.value, {
                 "aria-invalid": unref(field).invalid || void 0,
                 "aria-describedby": unref(field).describedBy,
@@ -362,7 +387,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }, 8, ["value"]))
                 ]),
                 _: 1
-              }, 16, ["id", "aria-invalid", "aria-describedby"]),
+              }, 16, ["id", "tabindex", "aria-invalid", "aria-describedby"]),
               __props.clearable && hasValue.value && !unref(field).disabled ? (openBlock(), createElementBlock("button", {
                 key: 0,
                 type: "button",
@@ -394,12 +419,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               })
             ]),
             _: 1
-          }, 8, ["class"]),
+          }, 8, ["data-lp-field-part", "onFocusout", "class"]),
           createVNode(unref(ComboboxPortal), { to: unref(portalTo) }, {
             default: withCtx(() => [
               createVNode(unref(ComboboxContent), {
-                "data-lp-select-part": partOf,
-                onFocusout: onFocusOut,
+                "data-lp-field-part": unref(partId),
+                onFocusout: onListFocusOut,
                 onInteractOutside: unref(guardOutside),
                 onEscapeKeyDown: unref(guardOutside),
                 position: "popper",
@@ -455,7 +480,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   })
                 ]),
                 _: 1
-              }, 8, ["onInteractOutside", "onEscapeKeyDown", "class"])
+              }, 8, ["data-lp-field-part", "onInteractOutside", "onEscapeKeyDown", "class"])
             ]),
             _: 1
           }, 8, ["to"])

package/dist/chunks/{LpSidebar-D-M0Y_7U.js → LpSidebar-D44peKq2.js}

@@ -1,9 +1,9 @@
 import { defineComponent, computed, ref, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, unref, normalizeClass, renderSlot, createCommentVNode, createBlock, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
 import { usePersisted } from "../composables/usePersisted.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$3 } from "./LpDrawer-DGNKRsGq.js";
-import { _ as _sfc_main$1 } from "./LpInput-CDuwODJG.js";
-import { _ as _sfc_main$2 } from "./LpSidebarNav-DF-TYxOV.js";
+import { _ as _sfc_main$3 } from "./LpDrawer-u4rxnuR-.js";
+import { _ as _sfc_main$1 } from "./LpInput-2H-5ILOB.js";
+import { _ as _sfc_main$2 } from "./LpSidebarNav--VwkXO_a.js";
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = {
   key: 2,

package/dist/chunks/{LpSidebarNav-DF-TYxOV.js → LpSidebarNav--VwkXO_a.js}

@@ -2,9 +2,9 @@ import { defineComponent, computed, ref, openBlock, createBlock, mergeProps, unr
 import { Motion } from "motion-v";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
 import { usePillTransition } from "../composables/usePillTransition.js";
-import { _ as _sfc_main$4 } from "./LpBadge-HOEPBYmi.js";
-import { _ as _sfc_main$5 } from "./LpContextMenu-COwOwRgI.js";
-import { _ as _sfc_main$3 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$4 } from "./LpBadge-C8fKEmTF.js";
+import { _ as _sfc_main$5 } from "./LpContextMenu-DXpFJjlO.js";
+import { _ as _sfc_main$3 } from "./LpIcon-DkP-9mzK.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-Hz3-JWUG.js";
 import { _ as _sfc_main$1 } from "./LpSkeleton-BB6XIV-w.js";
 import { resolveLink } from "../components/link.js";

package/dist/chunks/{LpSlider-DuoRpOrH.js → LpSlider-DxYoCJJO.js}

@@ -1,4 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode } from "vue";
+import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "reka-ui";
 import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
@@ -8,6 +9,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "LpSlider",
   props: {
+    palette: { type: [Boolean, Object], default: void 0 },
     modelValue: { default: 0 },
     min: { default: 0 },
     max: { default: 100 },
@@ -30,6 +32,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       `relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`
     );
     const { dragging, onPointerDown } = useSliderDrag();
+    usePaletteControl({ disabled: () => field.value.disabled });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(SliderRoot), mergeProps({
         "model-value": [props.modelValue],

package/dist/chunks/{LpStat-B2ix1Q7t.js → LpStat-DIsQfbeD.js}

@@ -1,8 +1,8 @@
 import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createElementVNode, createBlock, createCommentVNode, createVNode, Transition, normalizeProps, guardReactiveProps, withCtx, toDisplayString, Fragment, createTextVNode, normalizeClass, renderSlot } from "vue";
-import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
-import { _ as _sfc_main$4 } from "./LpNumberFlow-Cfyh033Q.js";
+import { _ as _sfc_main$2 } from "./LpIcon-DkP-9mzK.js";
+import { _ as _sfc_main$4 } from "./LpNumberFlow-5khYxsfX.js";
 import { _ as _sfc_main$3 } from "./LpSkeleton-BB6XIV-w.js";
-import { _ as _sfc_main$1 } from "./LpStatus-C7kx5PKE.js";
+import { _ as _sfc_main$1 } from "./LpStatus-BQU1TUsv.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { TONES } from "../components/tone.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };

package/dist/chunks/{LpStatus-C7kx5PKE.js → LpStatus-BQU1TUsv.js}

@@ -1,8 +1,8 @@
 import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, createElementVNode, normalizeClass, normalizeStyle, createElementBlock, toDisplayString, createVNode } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpBadge-HOEPBYmi.js";
-import { _ as _sfc_main$2 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$1 } from "./LpBadge-C8fKEmTF.js";
+import { _ as _sfc_main$2 } from "./LpRollingText-DiL717LK.js";
 import { _ as _sfc_main$3 } from "./LpShift-DXNsauQZ.js";
 import { TONE_COLOR } from "../components/meter.js";
 import { STATUS_LABELS, STATUS_LOOK } from "../components/status.js";

package/dist/chunks/{LpStepMark-DK-5BKAt.js → LpStepMark-CXa7DJy_.js}

@@ -1,8 +1,8 @@
 import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createCommentVNode, createVNode, withCtx, createBlock, normalizeClass, Fragment, createTextVNode, toDisplayString } from "vue";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$3 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$3 } from "./LpIcon-DkP-9mzK.js";
 import { _ as _sfc_main$2 } from "./LpLoader-DjJEX8hL.js";
-import { _ as _sfc_main$1 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$1 } from "./LpRollingText-DiL717LK.js";
 import { TONES } from "../components/tone.js";
 import '../assets/LpStepMark-Drvx33Vg.css';const _hoisted_1 = ["role", "aria-label", "aria-hidden", "data-status"];
 const _hoisted_2 = {

package/dist/chunks/{LpStepper-DRFfdJaq.js → LpStepper-C9RM_yTG.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, Fragment, renderList, createElementVNode, createVNode, normalizeClass, createTextVNode, toDisplayString, createBlock, createCommentVNode } from "vue";
-import { _ as _sfc_main$1 } from "./LpStepMark-DK-5BKAt.js";
+import { _ as _sfc_main$1 } from "./LpStepMark-CXa7DJy_.js";
 import { _ as _sfc_main$2 } from "./StepConnector-37OgEOXA.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = ["aria-current"];

package/dist/chunks/{LpSwitch-DrzKrZZV.js → LpSwitch-bGZxUDSx.js}

@@ -1,4 +1,5 @@
 import { defineComponent, useSlots, computed, useId, openBlock, createBlock, resolveDynamicComponent, normalizeClass, unref, withCtx, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, mergeProps } from "vue";
+import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { SwitchRoot, SwitchThumb } from "reka-ui";
 import { useFieldControl } from "../composables/useField.js";
 import { useOptimisticToggle } from "../composables/useOptimisticToggle.js";
@@ -17,6 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "LpSwitch",
   props: {
+    palette: { type: [Boolean, Object], default: void 0 },
     modelValue: { type: Boolean },
     disabled: { type: Boolean },
     label: {},
@@ -49,6 +51,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onUpdate(value) {
       void set(value);
     }
+    usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled || pending.value, editorProps: () => ({ action: void 0, "onUpdate:modelValue": onUpdate }) });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(labelled.value ? "label" : "span"), {
         class: normalizeClass(labelled.value ? [unref(rootClass), unref(field).disabled && "cursor-not-allowed"] : "contents")

package/dist/chunks/{LpTableFilter-DyvHGbOk.js → LpTableFilter-CTZMqFDU.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, openBlock, createElementBlock, createBlock, createCommentVNode, createElementVNode, Fragment, unref, normalizeClass, toDisplayString, createVNode, withCtx, renderList } from "vue";
-import { _ as _sfc_main$3 } from "./LpCheckbox-DHc2bHDe.js";
-import { _ as _sfc_main$1 } from "./LpInput-CDuwODJG.js";
+import { _ as _sfc_main$3 } from "./LpCheckbox-BoOuLnGB.js";
+import { _ as _sfc_main$1 } from "./LpInput-2H-5ILOB.js";
 import { _ as _sfc_main$2 } from "./LpShift-DXNsauQZ.js";
 import { usePaintSelect } from "../composables/usePaintSelect.js";
 import { matchesQuery, onlyValues, unhideValues, hideAllValues, invertHidden } from "../components/tableFilter.js";