@leavepulse/ui 0.78.1 → 0.78.2

package/dist/chunks/LpColorPicker-BONURBFN.js

@@ -0,0 +1,574 @@
+import { defineComponent, ref, watch, computed, useAttrs, openBlock, createBlock, normalizeProps, guardReactiveProps, unref, withCtx, createVNode, normalizeClass, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, toDisplayString, withDirectives, vShow, withKeys, Fragment, renderList, renderSlot, nextTick } from "vue";
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
+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 { useOwnField, 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$2 } from "./LpContextMenu-Bx_IhQDS.js";
+import { _ as _sfc_main$3 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$4 } from "./LpRollingText-B54Pje7P.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
+const _hoisted_1 = ["id", "disabled", "aria-label", "title"];
+const _hoisted_2 = ["id", "disabled", "aria-label", "aria-invalid", "aria-describedby"];
+const _hoisted_3 = { class: "min-w-0 flex-1 truncate font-mono text-xs text-muted-strong" };
+const _hoisted_4 = { class: "flex flex-col gap-3" };
+const _hoisted_5 = ["tabindex", "aria-label", "aria-valuenow", "aria-valuetext"];
+const _hoisted_6 = ["aria-label", "aria-valuenow", "tabindex"];
+const _hoisted_7 = ["aria-label", "aria-valuenow", "tabindex"];
+const _hoisted_8 = {
+  key: 1,
+  "data-lp-ring-owner": "",
+  class: "flex h-(--size-control-sm) items-center gap-2 overflow-hidden rounded-control border border-line bg-surface-soft px-2 transition-colors duration-[var(--duration-fast)] focus-within:border-brand focus-within:ring-2 focus-within:ring-ring"
+};
+const _hoisted_9 = { class: "relative flex min-w-0 flex-1 items-center" };
+const _hoisted_10 = ["value", "disabled", "aria-label"];
+const _hoisted_11 = {
+  key: 0,
+  class: "text-[11px] font-medium uppercase tracking-wide text-muted"
+};
+const _hoisted_12 = ["disabled", "aria-label", "aria-pressed", "onClick"];
+const ANY_COLOUR = "conic-gradient(from 90deg, #ff5c5c, #ffd23f, #39e58c, #2dd4bf, #00bcff, #7c5cff, #ff5ca8, #ff5c5c)";
+const CHECKERBOARD = "repeating-conic-gradient(var(--color-line-strong) 0% 25%, transparent 0% 50%) 0 0 / 12px 12px";
+const ROLL_MS = 320;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpColorPicker",
+  props: {
+    modelValue: { default: "#3b82f6" },
+    format: { default: "hex" },
+    alpha: { type: Boolean, default: false },
+    swatches: { default: () => DEFAULT_SWATCHES },
+    hideInput: { type: Boolean },
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    error: {},
+    size: { default: "md" },
+    label: {},
+    variant: { default: "field" },
+    selected: { type: Boolean, default: true },
+    ariaLabel: {},
+    side: { default: "bottom" },
+    align: { default: "start" },
+    menu: {},
+    menuItems: {},
+    recent: { type: Boolean, default: false },
+    recentKey: { default: "lp.color.recent" },
+    recentLimit: { default: 8 },
+    labels: {},
+    copyToast: { type: [String, Boolean] }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    function fill(tpl, vars) {
+      return tpl.replace(/\{(\w+)\}/g, (_, k) => String(vars[k] ?? ""));
+    }
+    const l = useLabels(
+      "colorPicker",
+      {
+        saturation: "Saturation and brightness",
+        hue: "Hue",
+        opacity: "Opacity",
+        value: "Colour value",
+        recent: "Recent",
+        copyHex: "Copy hex",
+        copyRgb: "Copy rgb",
+        copyHsl: "Copy hsl",
+        paste: "Paste colour",
+        formatAs: "Show as",
+        format_hex: "HEX",
+        format_rgb: "RGB",
+        format_hsl: "HSL",
+        saturationValueText: "saturation {s}%, brightness {v}%",
+        copyToast: "Copied {value}"
+      },
+      () => props.labels
+    );
+    const { copy } = useClipboard();
+    const open = ref(false);
+    const hsv = ref({ h: 217, s: 0.76, v: 0.96, a: 1 });
+    function adopt(value) {
+      const rgb = parseColor(value ?? "");
+      if (!rgb) return;
+      const next = rgbToHsv(rgb);
+      if (next.s === 0) next.h = hsv.value.h;
+      if (next.v === 0) next.s = hsv.value.s;
+      hsv.value = next;
+    }
+    adopt(props.modelValue);
+    watch(
+      () => props.modelValue,
+      (v) => {
+        if (v !== current.value) adopt(v);
+      }
+    );
+    const activeFormat = ref(props.format);
+    watch(() => props.format, (f) => activeFormat.value = f);
+    const current = computed(
+      () => formatColor(props.alpha ? hsv.value : { ...hsv.value, a: 1 }, activeFormat.value)
+    );
+    function set(patch, commit = false) {
+      if (props.disabled) return;
+      hsv.value = clampHsv({ ...hsv.value, ...patch });
+      emit("update:modelValue", current.value);
+      if (commit) emit("change", current.value);
+    }
+    function trackPointer(e, onMove) {
+      if (props.disabled) return;
+      if (e.button !== 0) return;
+      e.preventDefault();
+      const el = e.currentTarget;
+      const rect = el.getBoundingClientRect();
+      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(clamp(x, 0, 1), clamp(y, 0, 1));
+      };
+      el.setPointerCapture(e.pointerId);
+      at(e);
+      const move = (ev) => at(ev);
+      const up = () => {
+        el.removeEventListener("pointermove", move);
+        el.removeEventListener("pointerup", up);
+        el.removeEventListener("pointercancel", up);
+        emit("change", current.value);
+      };
+      el.addEventListener("pointermove", move);
+      el.addEventListener("pointerup", up);
+      el.addEventListener("pointercancel", up);
+    }
+    const onFieldPointer = (e) => trackPointer(e, (x, y) => set({ s: x, v: 1 - y }));
+    const onHuePointer = (e) => trackPointer(e, (x) => set({ h: Math.min(x * 360, 359.9) }));
+    const onAlphaPointer = (e) => trackPointer(e, (x) => set({ a: x }));
+    function step(e, axis) {
+      const big = e.shiftKey;
+      const k = e.key;
+      const arrows = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
+      if (!arrows.includes(k)) return;
+      e.preventDefault();
+      const dx = (k === "ArrowRight" ? 1 : k === "ArrowLeft" ? -1 : 0) * (big ? 10 : 1);
+      const dy = (k === "ArrowUp" ? 1 : k === "ArrowDown" ? -1 : 0) * (big ? 10 : 1);
+      if (axis === "h") {
+        if (k === "Home") return set({ h: 0 }, true);
+        if (k === "End") return set({ h: 359 }, true);
+        return set({ h: hsv.value.h + (dx || dy) }, true);
+      }
+      if (axis === "a") {
+        if (k === "Home") return set({ a: 0 }, true);
+        if (k === "End") return set({ a: 1 }, true);
+        return set({ a: hsv.value.a + (dx || dy) / 100 }, true);
+      }
+      if (k === "Home") return set({ s: 0 }, true);
+      if (k === "End") return set({ s: 1 }, true);
+      set({ s: hsv.value.s + dx / 100, v: hsv.value.v + dy / 100 }, true);
+    }
+    const typed = ref(null);
+    let typedChange = false;
+    const inputValue = computed(() => typed.value ?? current.value);
+    function onInput(e) {
+      const value = e.target.value;
+      typed.value = value;
+      const rgb = parseColor(value);
+      if (!rgb) return;
+      const next = rgbToHsv(rgb);
+      if (next.s === 0) next.h = hsv.value.h;
+      if (next.v === 0) next.s = hsv.value.s;
+      set(props.alpha ? next : { ...next, a: 1 });
+      typedChange = true;
+    }
+    function commitTyped() {
+      if (!typedChange) return;
+      typedChange = false;
+      emit("change", current.value);
+    }
+    function onInputBlur() {
+      typed.value = null;
+      commitTyped();
+    }
+    function pickSwatch(value) {
+      const rgb = parseColor(value);
+      if (!rgb) return;
+      typed.value = null;
+      set(rgbToHsv(rgb), true);
+    }
+    function isActiveSwatch(value) {
+      const rgb = parseColor(value);
+      return !!rgb && formatColor(rgbToHsv(rgb), "hex") === formatColor({ ...hsv.value, a: 1 }, "hex");
+    }
+    function tickClass(value) {
+      const rgb = parseColor(value);
+      return rgb && isLight(rgbToHsv(rgb)) ? "text-black" : "text-white";
+    }
+    const SWATCH_SIZE = { sm: "size-6", md: "size-7", lg: "size-8" };
+    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"));
+    const fieldCss = computed(() => opaqueCss({ ...hsv.value, s: 1, v: 1 }));
+    const fieldStyle = computed(() => ({
+      background: [
+        "linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))",
+        "linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
+        fieldCss.value
+      ].join(", ")
+    }));
+    const store = useKitStorage();
+    function readRecent() {
+      try {
+        const raw = JSON.parse(store.get(props.recentKey) ?? "[]");
+        return Array.isArray(raw) ? raw.filter((v) => typeof v === "string" && !!parseColor(v)).slice(0, props.recentLimit) : [];
+      } catch {
+        return [];
+      }
+    }
+    const recentColors = ref(props.recent ? readRecent() : []);
+    function remember(value) {
+      if (!props.recent) return;
+      const key = formatColor({ ...hsv.value, a: 1 }, "hex");
+      const without = recentColors.value.filter(
+        (c) => formatColor(rgbToHsv(parseColor(c) ?? { r: 0, g: 0, b: 0, a: 1 }), "hex") !== key
+      );
+      recentColors.value = [value, ...without].slice(0, props.recentLimit);
+      store.set(props.recentKey, JSON.stringify(recentColors.value));
+    }
+    let openedOn = "";
+    watch(open, (isOpen, was) => {
+      if (isOpen) openedOn = current.value;
+      else if (was && current.value !== openedOn) remember(current.value);
+    });
+    const swatchRows = computed(
+      () => [
+        {
+          key: "recent",
+          heading: l.value.recent,
+          colors: props.recent ? recentColors.value : [],
+          cols: "grid-cols-8",
+          size: "size-6"
+        },
+        {
+          key: "presets",
+          heading: "",
+          colors: [...props.swatches],
+          cols: "grid-cols-6",
+          size: "size-7"
+        }
+      ].filter((r) => r.colors.length)
+    );
+    function onPanelOpen(e) {
+      e.preventDefault();
+      e.currentTarget?.focus?.({ preventScroll: true });
+    }
+    function copyAs(fmt) {
+      const text = formatColor(props.alpha ? hsv.value : { ...hsv.value, a: 1 }, fmt);
+      const toast = props.copyToast ?? l.value.copyToast;
+      void copy(text, { toast: toast === false ? false : fill(toast, { value: text }) });
+    }
+    async function pasteColor() {
+      try {
+        const text = await navigator.clipboard.readText();
+        const rgb = parseColor(text);
+        if (!rgb) return;
+        typed.value = null;
+        const next = rgbToHsv(rgb);
+        set(props.alpha ? next : { ...next, a: 1 }, true);
+      } catch {
+      }
+    }
+    const rollText = ref(current.value);
+    const rolling = ref(false);
+    let rollTimer;
+    function setFormat(f) {
+      if (activeFormat.value === f) return;
+      rollText.value = inputValue.value;
+      activeFormat.value = f;
+      if (!prefersReducedMotion()) {
+        rolling.value = true;
+        void nextTick(() => rollText.value = current.value);
+        if (rollTimer) clearTimeout(rollTimer);
+        rollTimer = setTimeout(() => rolling.value = false, ROLL_MS + 40);
+      }
+      typed.value = null;
+      emit("update:modelValue", current.value);
+      emit("change", current.value);
+    }
+    const menuItems = computed(() => {
+      const own = props.menuItems ?? [];
+      if (props.menu === "none") return own;
+      const builtin = [
+        { label: l.value.copyHex, icon: "lucide:copy", onSelect: () => copyAs("hex") },
+        { label: l.value.copyRgb, icon: "lucide:copy", onSelect: () => copyAs("rgb") },
+        { label: l.value.copyHsl, icon: "lucide:copy", onSelect: () => copyAs("hsl") },
+        { label: l.value.paste, icon: "lucide:clipboard", onSelect: pasteColor },
+        {
+          // Ticks rather than a plain list: this is a setting with a current value,
+          // and the menu should say which one is on without being opened twice.
+          label: l.value.formatAs,
+          icon: "lucide:code",
+          separatorBefore: true,
+          children: ["hex", "rgb", "hsl"].map((f) => ({
+            label: l.value[`format_${f}`],
+            checked: activeFormat.value === f,
+            onSelect: () => setFormat(f)
+          }))
+        }
+      ];
+      return own.length ? [...builtin, { ...own[0], separatorBefore: true }, ...own.slice(1)] : builtin;
+    });
+    const attrs = useAttrs();
+    const { field, wrapper, ownAttrs } = useOwnField(() => ({
+      error: props.error,
+      invalid: props.invalid,
+      disabled: props.disabled
+    }));
+    __expose({ open });
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(unref(wrapper))), {
+        default: withCtx(() => [
+          createVNode(unref(PopoverRoot), {
+            open: open.value,
+            "onUpdate:open": _cache[3] || (_cache[3] = ($event) => open.value = $event)
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(PopoverAnchor), {
+                class: normalizeClass(__props.variant === "swatch" ? "inline-block" : "block w-full")
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$2, { items: menuItems.value }, {
+                    default: withCtx(() => [
+                      createVNode(unref(PopoverTrigger), { "as-child": "" }, {
+                        default: withCtx(() => [
+                          __props.variant === "swatch" ? (openBlock(), createElementBlock("button", {
+                            key: 0,
+                            type: "button",
+                            id: unref(field).id,
+                            disabled: unref(field).disabled,
+                            "aria-label": __props.ariaLabel ?? current.value,
+                            title: current.value,
+                            class: normalizeClass(["relative shrink-0 overflow-hidden rounded-full outline-none ring-2 ring-offset-2 ring-offset-surface-raised transition-[box-shadow,scale] duration-(--duration-fast) hover:scale-110 focus-visible:ring-ring data-[state=open]:ring-brand disabled:cursor-not-allowed disabled:opacity-55", [SWATCH_SIZE[__props.size], __props.selected ? "ring-ink" : "ring-line"]]),
+                            style: normalizeStyle({ background: CHECKERBOARD })
+                          }, [
+                            createElementVNode("span", {
+                              class: "block size-full",
+                              style: normalizeStyle({ background: __props.selected ? previewCss.value : ANY_COLOUR })
+                            }, null, 4),
+                            !__props.selected ? (openBlock(), createBlock(_sfc_main$3, {
+                              key: 0,
+                              name: "lucide:pipette",
+                              size: 12,
+                              class: "absolute inset-0 m-auto text-white drop-shadow"
+                            })) : createCommentVNode("", true)
+                          ], 14, _hoisted_1)) : (openBlock(), createElementBlock("button", {
+                            key: 1,
+                            type: "button",
+                            id: unref(field).id,
+                            disabled: unref(field).disabled,
+                            "aria-label": __props.ariaLabel,
+                            "aria-invalid": unref(field).invalid || void 0,
+                            "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", [
+                              unref(triggerSize)[__props.size],
+                              unref(field).invalid ? "border-danger focus-visible:ring-danger-soft" : "border-line focus-visible:border-brand"
+                            ]])
+                          }, [
+                            createElementVNode("span", {
+                              class: "relative size-5 shrink-0 overflow-hidden rounded-inner",
+                              style: normalizeStyle({ background: CHECKERBOARD })
+                            }, [
+                              createElementVNode("span", {
+                                class: "block size-full",
+                                style: normalizeStyle({ backgroundColor: previewCss.value })
+                              }, null, 4),
+                              _cache[4] || (_cache[4] = createElementVNode("span", { class: "pointer-events-none absolute inset-0 rounded-inner ring-1 ring-inset ring-line" }, null, -1))
+                            ], 4),
+                            createElementVNode("span", _hoisted_3, toDisplayString(__props.label ?? current.value), 1),
+                            createVNode(_sfc_main$3, {
+                              name: "lucide:chevron-down",
+                              size: 15,
+                              class: "shrink-0 text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[state=open]:rotate-180"
+                            })
+                          ], 10, _hoisted_2))
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["items"])
+                ]),
+                _: 1
+              }, 8, ["class"]),
+              createVNode(unref(PopoverPortal), { to: unref(portalTo) }, {
+                default: withCtx(() => [
+                  createVNode(unref(PopoverContent), {
+                    onInteractOutside: unref(guardOutside),
+                    onEscapeKeyDown: unref(guardOutside),
+                    "collision-padding": 8,
+                    side: __props.side,
+                    align: __props.align,
+                    "side-offset": 6,
+                    class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) w-64 select-none rounded-card p-3 outline-none"]),
+                    onOpenAutoFocus: onPanelOpen
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_sfc_main$2, { items: menuItems.value }, {
+                        default: withCtx(() => [
+                          createElementVNode("div", _hoisted_4, [
+                            createElementVNode("div", {
+                              role: "slider",
+                              tabindex: __props.disabled ? -1 : 0,
+                              "aria-label": unref(l).saturation,
+                              "aria-valuemin": 0,
+                              "aria-valuemax": 100,
+                              "aria-valuenow": Math.round(hsv.value.s * 100),
+                              "aria-valuetext": fill(unref(l).saturationValueText, { s: Math.round(hsv.value.s * 100), v: Math.round(hsv.value.v * 100) }),
+                              class: "relative h-36 w-full cursor-crosshair touch-none overflow-hidden rounded-control outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                              style: normalizeStyle(fieldStyle.value),
+                              onPointerdown: onFieldPointer,
+                              onKeydown: _cache[0] || (_cache[0] = ($event) => step($event, "sv"))
+                            }, [
+                              createElementVNode("span", {
+                                class: "pointer-events-none absolute size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-pill border-2 border-white shadow ring-1 ring-black/30",
+                                style: normalizeStyle({
+                                  left: `${hsv.value.s * 100}%`,
+                                  top: `${(1 - hsv.value.v) * 100}%`,
+                                  backgroundColor: previewCss.value
+                                })
+                              }, null, 4)
+                            ], 44, _hoisted_5),
+                            createElementVNode("div", {
+                              role: "slider",
+                              "aria-label": unref(l).hue,
+                              "aria-valuemin": 0,
+                              "aria-valuemax": 360,
+                              "aria-valuenow": Math.round(hsv.value.h),
+                              tabindex: __props.disabled ? -1 : 0,
+                              class: "relative h-3 w-full cursor-pointer touch-none rounded-pill outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                              style: { "background": "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)" },
+                              onPointerdown: onHuePointer,
+                              onKeydown: _cache[1] || (_cache[1] = ($event) => step($event, "h"))
+                            }, [
+                              createElementVNode("span", {
+                                class: "pointer-events-none absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-pill border-2 border-white shadow ring-1 ring-black/30",
+                                style: normalizeStyle({ left: `${hsv.value.h / 360 * 100}%`, backgroundColor: hueCss.value })
+                              }, null, 4)
+                            ], 40, _hoisted_6),
+                            __props.alpha ? (openBlock(), createElementBlock("div", {
+                              key: 0,
+                              role: "slider",
+                              "aria-label": unref(l).opacity,
+                              "aria-valuemin": 0,
+                              "aria-valuemax": 100,
+                              "aria-valuenow": Math.round(hsv.value.a * 100),
+                              tabindex: __props.disabled ? -1 : 0,
+                              class: "relative h-3 w-full cursor-pointer touch-none rounded-pill outline-none ring-1 ring-inset ring-line focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                              style: normalizeStyle({ background: CHECKERBOARD }),
+                              onPointerdown: onAlphaPointer,
+                              onKeydown: _cache[2] || (_cache[2] = ($event) => step($event, "a"))
+                            }, [
+                              createElementVNode("div", {
+                                class: "absolute inset-0 overflow-hidden rounded-pill",
+                                style: normalizeStyle({ backgroundImage: `linear-gradient(to right, ${alphaRampStart.value}, ${unref(opaqueCss)(hsv.value)})` })
+                              }, null, 4),
+                              createElementVNode("span", {
+                                class: "pointer-events-none absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-pill border-2 border-white shadow ring-1 ring-black/30",
+                                style: normalizeStyle({ left: `${hsv.value.a * 100}%`, backgroundColor: previewCss.value })
+                              }, null, 4)
+                            ], 44, _hoisted_7)) : createCommentVNode("", true),
+                            !__props.hideInput ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                              createElementVNode("span", {
+                                class: "size-4 shrink-0 rounded-[5px] border border-line",
+                                style: normalizeStyle({ backgroundColor: previewCss.value })
+                              }, null, 4),
+                              createElementVNode("span", _hoisted_9, [
+                                withDirectives(createVNode(_sfc_main$4, {
+                                  value: rollText.value,
+                                  duration: ROLL_MS,
+                                  align: "start",
+                                  "aria-hidden": "true",
+                                  class: "pointer-events-none absolute inset-0 font-mono text-xs text-ink"
+                                }, null, 8, ["value"]), [
+                                  [vShow, rolling.value]
+                                ]),
+                                createElementVNode("input", {
+                                  value: inputValue.value,
+                                  disabled: __props.disabled,
+                                  spellcheck: "false",
+                                  autocapitalize: "off",
+                                  autocomplete: "off",
+                                  "aria-label": unref(l).value,
+                                  class: normalizeClass(["min-w-0 flex-1 select-text bg-transparent font-mono text-xs text-ink outline-none placeholder:text-muted", rolling.value ? "text-transparent" : ""]),
+                                  onInput,
+                                  onKeydown: withKeys(commitTyped, ["enter"]),
+                                  onBlur: onInputBlur
+                                }, null, 42, _hoisted_10)
+                              ])
+                            ])) : createCommentVNode("", true),
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(swatchRows.value, (row) => {
+                              return openBlock(), createElementBlock("div", {
+                                key: row.key,
+                                class: "flex flex-col gap-1.5"
+                              }, [
+                                row.heading ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(row.heading), 1)) : createCommentVNode("", true),
+                                createElementVNode("div", {
+                                  class: normalizeClass(["grid gap-1.5", row.cols])
+                                }, [
+                                  (openBlock(true), createElementBlock(Fragment, null, renderList(row.colors, (c) => {
+                                    return openBlock(), createElementBlock("button", {
+                                      key: c,
+                                      type: "button",
+                                      disabled: __props.disabled,
+                                      "aria-label": c,
+                                      "aria-pressed": isActiveSwatch(c),
+                                      class: normalizeClass(["relative flex items-center justify-center overflow-hidden rounded-inner outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed motion-reduce:hover:scale-100 motion-reduce:active:scale-95", row.size]),
+                                      style: normalizeStyle({ background: CHECKERBOARD }),
+                                      onClick: ($event) => pickSwatch(c)
+                                    }, [
+                                      createElementVNode("span", {
+                                        class: "absolute inset-0",
+                                        style: normalizeStyle({ backgroundColor: c })
+                                      }, null, 4),
+                                      _cache[5] || (_cache[5] = createElementVNode("span", { class: "pointer-events-none absolute inset-0 rounded-inner ring-1 ring-inset ring-line" }, null, -1)),
+                                      isActiveSwatch(c) ? (openBlock(), createBlock(_sfc_main$3, {
+                                        key: 0,
+                                        name: "lucide:check",
+                                        size: 13,
+                                        class: normalizeClass(["relative", tickClass(c)])
+                                      }, null, 8, ["class"])) : createCommentVNode("", true)
+                                    ], 14, _hoisted_12);
+                                  }), 128))
+                                ], 2)
+                              ]);
+                            }), 128)),
+                            renderSlot(_ctx.$slots, "default", {
+                              color: current.value,
+                              hsv: hsv.value
+                            })
+                          ])
+                        ]),
+                        _: 3
+                      }, 8, ["items"])
+                    ]),
+                    _: 3
+                  }, 8, ["onInteractOutside", "onEscapeKeyDown", "side", "align", "class"])
+                ]),
+                _: 3
+              }, 8, ["to"])
+            ]),
+            _: 3
+          }, 8, ["open"])
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};