@vuelor/picker 0.1.0-beta.1 → 0.2.0

package/dist/index.js

@@ -1,31 +1,122 @@
-import { ref as W, computed as g, toRaw as G, watch as ee, defineComponent as C, createElementBlock as H, openBlock as $, normalizeClass as c, unref as a, renderSlot as D, onMounted as oe, onUnmounted as se, useTemplateRef as ne, watchEffect as re, withModifiers as ie, normalizeStyle as y, createElementVNode as v, createCommentVNode as j, createBlock as F, withCtx as A, createVNode as S } from "vue";
-import { twMerge as ue } from "tailwind-merge";
-import { createContext as ce, SliderRoot as R, SliderTrack as L, SliderThumb as M } from "reka-ui";
-const de = {
+import { ref as O, watch as te, computed as m, toRaw as j, defineComponent as V, createElementBlock as P, openBlock as y, normalizeClass as c, unref as l, renderSlot as T, onMounted as ne, onUnmounted as re, useTemplateRef as ue, watchEffect as ie, withModifiers as ce, normalizeStyle as x, createElementVNode as h, createBlock as A, createCommentVNode as W, withCtx as F, getCurrentInstance as de, createVNode as w } from "vue";
+import { twMerge as ve } from "tailwind-merge";
+import { createContext as pe, Primitive as ae, SliderRoot as L, SliderTrack as G, SliderThumb as N } from "reka-ui";
+function _(a, e = 0, t = 1) {
+  return Math.max(e, Math.min(t, a));
+}
+function le(a, e = 1) {
+  const t = [];
+  let s = 0;
+  for (; s < a.length; )
+    t.push(a.substring(s, s + e)), s += e;
+  return t;
+}
+function se(a) {
+  const { h: e, s: t, l: s } = a, u = s + t * Math.min(s, 1 - s), i = u === 0 ? 0 : 2 - 2 * s / u;
+  return { h: e, s: i, v: u };
+}
+function oe(a) {
+  const { h: e, s: t, v: s } = a, u = s - s * t / 2, i = u === 1 || u === 0 ? 0 : (s - u) / Math.min(u, 1 - u);
+  return { h: e, s: i, l: u };
+}
+function X(a) {
+  const { h: e, s: t, v: s } = a, u = (o) => {
+    const r = (o + e / 60) % 6;
+    return s - s * t * Math.max(Math.min(r, 4 - r, 1), 0);
+  }, i = [u(5), u(3), u(1)].map((o) => Math.round(o * 255));
+  return { r: i[0], g: i[1], b: i[2] };
+}
+function he(a) {
+  if (!a) return { h: 0, s: 1, v: 1 };
+  const e = a.r / 255, t = a.g / 255, s = a.b / 255, u = Math.max(e, t, s), i = Math.min(e, t, s);
+  let o = 0;
+  u !== i && (u === e ? o = 60 * (0 + (t - s) / (u - i)) : u === t ? o = 60 * (2 + (s - e) / (u - i)) : u === s && (o = 60 * (4 + (e - t) / (u - i)))), o < 0 && (o = o + 360);
+  const r = u === 0 ? 0 : (u - i) / u, n = [o, r, u];
+  return { h: n[0], s: n[1], v: n[2] };
+}
+const R = (a) => {
+  const e = Math.round(a).toString(16);
+  return ("00".substring(0, 2 - e.length) + e).toUpperCase();
+};
+function q(a) {
+  return `#${[
+    R(a.r),
+    R(a.g),
+    R(a.b)
+  ].join("")}`;
+}
+function be(a) {
+  return `#${[
+    R(a.r),
+    R(a.g),
+    R(a.b),
+    R(a.a * 255)
+  ].join("")}`;
+}
+function J(a) {
+  const e = le(a.slice(1), 2).map((t) => parseInt(t, 16));
+  return {
+    r: e[0],
+    g: e[1],
+    b: e[2]
+  };
+}
+function ot(a) {
+  const e = le(a.slice(1), 2).map((t) => parseInt(t, 16));
+  return {
+    r: e[0],
+    g: e[1],
+    b: e[2],
+    a: e[3] / 255
+  };
+}
+function fe(a) {
+  return `rgba(${a.r}, ${a.g}, ${a.b}, ${a.a})`;
+}
+function me(a, e, t) {
+  const s = O(void 0);
+  return te(
+    () => a.modelValue,
+    (u) => {
+      u !== s.value && t(u);
+    },
+    { immediate: !0 }
+  ), m({
+    get: () => a.modelValue,
+    set: (u) => {
+      s.value = u, e("update:modelValue", u);
+    }
+  });
+}
+const ge = {
   picker: {
     root: "w-60 bg-white rounded-[13px] p-4 flex flex-col gap-2 shadow-vuelor-card"
   },
   dropper: {
-    base: "hover:bg-[#0000000d] rounded-[5px] focus-within:outline-1 focus-within:outline-[#0d99ff] p-1"
+    base: "enabled:hover:bg-[#0000000d] disabled:opacity-50 rounded-[5px] focus-within:outline-1 focus-within:outline-[#0d99ff] p-1"
   },
   shared: {
     thumb: "block w-4 h-4 rounded-full border-4 border-white shadow-vuelor-thumb focus:outline-1 outline-[#0d99ff]"
   },
   canvas: {
-    root: "relative touch-none data-disabled:pointer-events-none data-disabled:opacity-50",
+    root: "relative touch-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
     area: "rounded-[5px] outline-1 outline-solid -outline-offset-1 outline-[#0000001a]"
   },
   slider: {
-    root: "relative h-4 w-full data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-4 flex items-center data-[orientation=vertical]:flex-col select-none touch-none data-disabled:pointer-events-none data-disabled:opacity-50",
-    track: "relative h-4 w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-4 grow rounded-full shadow-[inset_0_0_0_1px_#0000001a]"
+    root: "relative h-4 w-full flex items-center select-none touch-none data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-4 data-[orientation=vertical]:flex-col data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    track: "relative h-4 w-full shadow-vuelor-inner grow rounded-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-4"
   },
   input: {
-    group: "w-full flex gap-[1px] rounded-[5px] hover:outline-1 outline-[#e6e6e6] focus-within:outline-1 focus-within:outline-[#0d99ff] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-    item: "flex flex-1 data-[alpha-input]:grow-0 items-center px-1.5 gap-1 bg-[#f5f5f5] first:rounded-l-[5px] last:rounded-r-[5px]",
-    label: "select-none text-black text-[11px] opacity-40",
-    field: "w-full h-6 min-w-5 text-[11px] focus:outline-none"
+    group: "w-full flex gap-[1px] rounded-[5px] enabled:hover:outline-1 outline-[#e6e6e6] focus-within:outline-1 focus-within:outline-[#0d99ff] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    item: "flex flex-1 data-[before]:grow-0 data-[alpha-input]:grow-0 items-center px-1 gap-1 bg-[#f5f5f5] first:rounded-l-[5px] last:rounded-r-[5px]",
+    label: "select-none text-black text-[11px] opacity-40 data-[alpha-label]:block",
+    field: "w-full min-w-5 h-6 text-[11px] focus:outline-none"
+  },
+  swatch: {
+    base: "relative grow-0 h-4 w-4 rounded-[20%] overflow-hidden focus-within:outline-1 focus-within:outline-[#0d99ff] disabled:opacity-50",
+    alpha: "absolute top-0 right-0 h-full w-1/2"
   }
-}, pe = {
+}, ke = {
   picker: {
     root: "vuelor-picker-root"
   },
@@ -48,23 +139,27 @@ const de = {
     item: "vuelor-picker-input-item",
     label: "vuelor-picker-input-label",
     field: "vuelor-picker-input-field"
+  },
+  swatch: {
+    base: "vuelor-picker-swatch-base",
+    alpha: "vuelor-picker-swatch-alpha"
   }
-}, ve = {
-  tailwindcss: de,
-  vanillacss: pe
+}, $e = {
+  tailwindcss: ge,
+  vanillacss: ke
 };
-function he(l, e) {
+function Ce(a, e) {
   return (...t) => {
     const s = {};
     for (const u of t) {
-      const i = l[u];
+      const i = a[u];
       if (i)
         for (const [o, r] of Object.entries(i))
           s[o] = (...n) => {
-            const h = e?.[u]?.[o];
-            return ue(
+            const p = e?.[u]?.[o];
+            return ve(
               r,
-              h,
+              p,
               ...n.filter(Boolean)
             );
           };
@@ -72,63 +167,8 @@ function he(l, e) {
     return s;
   };
 }
-function _(l, e = 0, t = 1) {
-  return Math.max(e, Math.min(t, l));
-}
-function be(l, e = 1) {
-  const t = [];
-  let s = 0;
-  for (; s < l.length; )
-    t.push(l.substring(s, s + e)), s += e;
-  return t;
-}
-function te(l) {
-  const { h: e, s: t, l: s } = l, u = s + t * Math.min(s, 1 - s), i = u === 0 ? 0 : 2 - 2 * s / u;
-  return { h: e, s: i, v: u };
-}
-function ae(l) {
-  const { h: e, s: t, v: s } = l, u = s - s * t / 2, i = u === 1 || u === 0 ? 0 : (s - u) / Math.min(u, 1 - u);
-  return { h: e, s: i, l: u };
-}
-function X(l) {
-  const { h: e, s: t, v: s } = l, u = (o) => {
-    const r = (o + e / 60) % 6;
-    return s - s * t * Math.max(Math.min(r, 4 - r, 1), 0);
-  }, i = [u(5), u(3), u(1)].map((o) => Math.round(o * 255));
-  return { r: i[0], g: i[1], b: i[2] };
-}
-function fe(l) {
-  if (!l) return { h: 0, s: 1, v: 1 };
-  const e = l.r / 255, t = l.g / 255, s = l.b / 255, u = Math.max(e, t, s), i = Math.min(e, t, s);
-  let o = 0;
-  u !== i && (u === e ? o = 60 * (0 + (t - s) / (u - i)) : u === t ? o = 60 * (2 + (s - e) / (u - i)) : u === s && (o = 60 * (4 + (e - t) / (u - i)))), o < 0 && (o = o + 360);
-  const r = u === 0 ? 0 : (u - i) / u, n = [o, r, u];
-  return { h: n[0], s: n[1], v: n[2] };
-}
-const O = (l) => {
-  const e = Math.round(l).toString(16);
-  return ("00".substring(0, 2 - e.length) + e).toUpperCase();
-};
-function Z(l) {
-  return `#${[
-    O(l.r),
-    O(l.g),
-    O(l.b)
-  ].join("")}`;
-}
-function q(l) {
-  const e = be(l.slice(1), 2).map((t) => parseInt(t, 16));
-  return {
-    r: e[0],
-    g: e[1],
-    b: e[2]
-  };
-}
-function ge(l) {
-  return `rgba(${l.r}, ${l.g}, ${l.b}, ${l.a})`;
-}
-function Y(l) {
-  const e = l.trim(), t = e.match(/^#?(?<r>[A-Fa-f0-9]{2})(?<g>[A-Fa-f0-9]{2})(?<b>[A-Fa-f0-9]{2})$/);
+function Z(a) {
+  const e = a.trim(), t = e.match(/^#?(?<r>[A-Fa-f0-9]{2})(?<g>[A-Fa-f0-9]{2})(?<b>[A-Fa-f0-9]{2})$/);
   if (t?.groups) {
     const { r: o, g: r, b: n } = t.groups;
     return {
@@ -150,28 +190,36 @@ function Y(l) {
   }
   const u = e.match(/^#?(?<r>[A-Fa-f0-9])(?<g>[A-Fa-f0-9])(?<b>[A-Fa-f0-9])$/);
   if (u?.groups) {
-    const { r: o, g: r, b: n } = u.groups, d = o + o, h = r + r, b = n + n;
+    const { r: o, g: r, b: n } = u.groups, d = o + o, p = r + r, b = n + n;
     return {
       r: parseInt(d, 16),
-      g: parseInt(h, 16),
+      g: parseInt(p, 16),
       b: parseInt(b, 16),
       a: 1
     };
   }
   const i = e.match(/^#?(?<r>[A-Fa-f0-9])(?<g>[A-Fa-f0-9])(?<b>[A-Fa-f0-9])(?<a>[A-Fa-f0-9])$/);
   if (i?.groups) {
-    const { r: o, g: r, b: n, a: d } = i.groups, h = o + o, b = r + r, f = n + n, B = d + d;
+    const { r: o, g: r, b: n, a: d } = i.groups, p = o + o, b = r + r, f = n + n, k = d + d;
     return {
-      r: parseInt(h, 16),
+      r: parseInt(p, 16),
       g: parseInt(b, 16),
       b: parseInt(f, 16),
-      a: parseInt(B, 16) / 255
+      a: parseInt(k, 16) / 255
     };
   }
-  return { r: 255, g: 0, b: 0, a: 1 };
+  return null;
+}
+function ye(a) {
+  return a ? a.substring(0, 7).replace("#", "") : null;
 }
-function N(l) {
-  const e = /^([a-zA-Z]{3,4})\(\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+)%?)\s*,\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+)%?)\s*,\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+)%?)(?:\s*,\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+)%?))?\s*\)$/i, t = l.match(e);
+function xe(a) {
+  if (!a || a.length < 9) return 100;
+  const e = a.substring(7, 9).replace("#", "");
+  return Math.round(parseInt(e, 16) / 255 * 100);
+}
+function z(a) {
+  const e = /^([a-zA-Z]{3,4})\(\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+)%?)\s*,\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+)%?)\s*,\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+)%?)(?:\s*,\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+)%?))?\s*\)$/i, t = a.match(e);
   if (!t) return null;
   const [, s, u, i, o, r] = t;
   return {
@@ -179,19 +227,19 @@ function N(l) {
     values: [u, i, o, r].filter(Boolean)
   };
 }
-function I(l) {
-  return l.endsWith("%") ? parseFloat(l) / 100 : parseFloat(l);
+function D(a) {
+  return a.endsWith("%") ? parseFloat(a) / 100 : parseFloat(a);
 }
-function me(l) {
-  const e = N(l);
+function Ve(a) {
+  const e = z(a);
   return e && e.type?.toLowerCase() === "rgb" ? {
     r: parseInt(e.values[0], 10),
     g: parseInt(e.values[1], 10),
     b: parseInt(e.values[2], 10)
   } : { r: 255, g: 0, b: 0 };
 }
-function ke(l) {
-  const e = N(l);
+function Se(a) {
+  const e = z(a);
   return e && e.type?.toLowerCase() === "rgb" ? {
     r: parseInt(e.values[0], 10),
     g: parseInt(e.values[1], 10),
@@ -199,203 +247,205 @@ function ke(l) {
     a: e.values[3] ? parseFloat(e.values[3]) : 1
   } : { r: 255, g: 0, b: 0, a: 1 };
 }
-function $e(l) {
-  const e = N(l);
+function we(a) {
+  const e = z(a);
   return e && e.type?.toLowerCase() === "hsl" ? {
     h: parseFloat(e.values[0]),
-    s: I(e.values[1]),
-    l: I(e.values[2])
+    s: D(e.values[1]),
+    l: D(e.values[2])
   } : { h: 0, s: 0, l: 0 };
 }
-function ye(l) {
-  const e = N(l);
+function _e(a) {
+  const e = z(a);
   return e && e.type?.toLowerCase() === "hsla" ? {
     h: parseFloat(e.values[0]),
-    s: I(e.values[1]),
-    l: I(e.values[2]),
+    s: D(e.values[1]),
+    l: D(e.values[2]),
     a: e.values[3] ? parseFloat(e.values[3]) : 1
   } : { h: 0, s: 0, l: 0, a: 1 };
 }
-function xe(l) {
-  const e = N(l);
+function He(a) {
+  const e = z(a);
   return e && e.type?.toLowerCase() === "hsv" ? {
     h: parseFloat(e.values[0]),
-    s: I(e.values[1]),
-    v: I(e.values[2])
+    s: D(e.values[1]),
+    v: D(e.values[2])
   } : { h: 0, s: 0, v: 0 };
 }
-function Se(l) {
-  const e = N(l);
+function Be(a) {
+  const e = z(a);
   return e && e.type?.toLowerCase() === "hsva" ? {
     h: parseFloat(e.values[0]),
-    s: I(e.values[1]),
-    v: I(e.values[2]),
+    s: D(e.values[1]),
+    v: D(e.values[2]),
     a: e.values[3] ? parseFloat(e.values[3]) : 1
   } : { h: 0, s: 0, v: 0, a: 1 };
 }
-function z(l) {
-  const e = fe(l), t = ae(e);
-  return { hsv: e, hsl: t, rgb: l };
+function K(a) {
+  const e = he(a), t = oe(e);
+  return { hsv: e, hsl: t, rgb: a };
 }
-function J(l) {
-  const e = te(l), t = X(e);
-  return { hsv: e, hsl: l, rgb: t };
+function Q(a) {
+  const e = se(a), t = X(e);
+  return { hsv: e, hsl: a, rgb: t };
 }
-function Q(l) {
-  const e = ae(l), t = X(l);
-  return { hsv: l, hsl: e, rgb: t };
+function ee(a) {
+  const e = oe(a), t = X(a);
+  return { hsv: a, hsl: e, rgb: t };
 }
-function Ce() {
-  const l = W({
+function Ie() {
+  const a = O({
     hsv: { h: 0, s: 0, v: 0 },
     hsl: { h: 0, s: 0, l: 0 },
     rgb: { r: 0, g: 0, b: 0 }
-  }), e = W(100), t = g({
-    get: () => l.value.rgb,
-    set: (p) => l.value = z(p)
-  }), s = g({
-    get: () => ({ ...l.value.rgb, a: e.value / 100 }),
-    set: (p) => {
-      e.value = Math.round((p.a ?? 1) * 100), l.value = z({ r: p.r, g: p.g, b: p.b });
+  }), e = O(100), t = m({
+    get: () => a.value.rgb,
+    set: (v) => a.value = K(v)
+  }), s = m({
+    get: () => ({ ...a.value.rgb, a: e.value / 100 }),
+    set: (v) => {
+      e.value = Math.round((v.a ?? 1) * 100), a.value = K({ r: v.r, g: v.g, b: v.b });
     }
-  }), u = g({
-    get: () => l.value.hsl,
-    set: (p) => l.value = J(p)
-  }), i = g({
-    get: () => ({ ...l.value.hsl, a: e.value / 100 }),
-    set: (p) => {
-      e.value = Math.round((p.a ?? 1) * 100), l.value = J({ h: p.h, s: p.s, l: p.l });
+  }), u = m({
+    get: () => a.value.hsl,
+    set: (v) => a.value = Q(v)
+  }), i = m({
+    get: () => ({ ...a.value.hsl, a: e.value / 100 }),
+    set: (v) => {
+      e.value = Math.round((v.a ?? 1) * 100), a.value = Q({ h: v.h, s: v.s, l: v.l });
     }
-  }), o = g({
-    get: () => l.value.hsv,
-    set: (p) => l.value = Q(p)
-  }), r = g({
-    get: () => ({ ...l.value.hsv, a: e.value / 100 }),
-    set: (p) => {
-      e.value = Math.round((p.a ?? 1) * 100), l.value = Q({ h: p.h, s: p.s, v: p.v });
+  }), o = m({
+    get: () => a.value.hsv,
+    set: (v) => a.value = ee(v)
+  }), r = m({
+    get: () => ({ ...a.value.hsv, a: e.value / 100 }),
+    set: (v) => {
+      e.value = Math.round((v.a ?? 1) * 100), a.value = ee({ h: v.h, s: v.s, v: v.v });
     }
-  }), n = g({
-    get: () => Z(l.value.rgb),
-    set: (p) => {
-      const k = q(p);
-      l.value = z(k);
+  }), n = m({
+    get: () => q(a.value.rgb),
+    set: (v) => {
+      const C = J(v);
+      a.value = K(C);
     }
-  }), d = g({
+  }), d = m({
     get: () => {
-      const p = Z(l.value.rgb), k = O(e.value / 100 * 255);
-      return p + k;
+      const v = q(a.value.rgb), C = R(e.value / 100 * 255);
+      return v + C;
     },
-    set: (p) => {
-      const k = q(p.slice(0, 7)), x = p.slice(7, 9), P = x ? parseInt(x, 16) / 255 : 1;
-      e.value = Math.round(P * 100), l.value = z(k);
+    set: (v) => {
+      const C = J(v.slice(0, 7)), $ = v.slice(7, 9), I = $ ? parseInt($, 16) / 255 : 1;
+      e.value = Math.round(I * 100), a.value = K(C);
     }
   });
-  function h() {
-    const { r: p, g: k, b: x } = l.value.rgb;
-    return `rgb(${p}, ${k}, ${x})`;
+  function p() {
+    const { r: v, g: C, b: $ } = a.value.rgb;
+    return `rgb(${v}, ${C}, ${$})`;
   }
   function b() {
-    const { r: p, g: k, b: x } = l.value.rgb, P = (e.value / 100).toFixed(2);
-    return `rgba(${p}, ${k}, ${x}, ${P})`;
+    const { r: v, g: C, b: $ } = a.value.rgb, I = (e.value / 100).toFixed(2);
+    return `rgba(${v}, ${C}, ${$}, ${I})`;
   }
   function f() {
-    const { h: p, s: k, l: x } = l.value.hsl, P = (k * 100).toFixed(1), E = (x * 100).toFixed(1);
-    return `hsl(${p}, ${P}%, ${E}%)`;
+    const { h: v, s: C, l: $ } = a.value.hsl, I = (C * 100).toFixed(1), E = ($ * 100).toFixed(1);
+    return `hsl(${v}, ${I}%, ${E}%)`;
   }
-  function B() {
-    const { h: p, s: k, l: x } = l.value.hsl, P = (k * 100).toFixed(1), E = (x * 100).toFixed(1), K = (e.value / 100).toFixed(2);
-    return `hsla(${p}, ${P}%, ${E}%, ${K})`;
+  function k() {
+    const { h: v, s: C, l: $ } = a.value.hsl, I = (C * 100).toFixed(1), E = ($ * 100).toFixed(1), Y = (e.value / 100).toFixed(2);
+    return `hsla(${v}, ${I}%, ${E}%, ${Y})`;
   }
-  function T() {
-    const { h: p, s: k, v: x } = l.value.hsv, P = (k * 100).toFixed(1), E = (x * 100).toFixed(1);
-    return `hsv(${p}, ${P}%, ${E}%)`;
+  function B() {
+    const { h: v, s: C, v: $ } = a.value.hsv, I = (C * 100).toFixed(1), E = ($ * 100).toFixed(1);
+    return `hsv(${v}, ${I}%, ${E}%)`;
   }
-  function m() {
-    const { h: p, s: k, v: x } = l.value.hsv, P = (k * 100).toFixed(1), E = (x * 100).toFixed(1), K = (e.value / 100).toFixed(2);
-    return `hsva(${p}, ${P}%, ${E}%, ${K})`;
+  function M() {
+    const { h: v, s: C, v: $ } = a.value.hsv, I = (C * 100).toFixed(1), E = ($ * 100).toFixed(1), Y = (e.value / 100).toFixed(2);
+    return `hsva(${v}, ${I}%, ${E}%, ${Y})`;
   }
-  function V() {
+  function g() {
     return {
-      rgb: G(t.value),
-      rgba: G(s.value),
-      hsl: G(u.value),
-      hsla: G(i.value),
-      hsv: G(o.value),
-      hsva: G(r.value),
+      rgb: j(t.value),
+      rgba: j(s.value),
+      hsl: j(u.value),
+      hsla: j(i.value),
+      hsv: j(o.value),
+      hsva: j(r.value),
       hex: n.value,
       hexa: d.value
     };
   }
-  function U(p) {
-    switch (p) {
+  function H(v) {
+    switch (v) {
       case "hex":
         return n.value;
       case "hexa":
         return d.value;
       case "rgb":
-        return h();
+        return p();
       case "rgba":
         return b();
       case "hsl":
         return f();
       case "hsla":
-        return B();
+        return k();
       case "hsv":
-        return T();
+        return B();
       case "hsva":
-        return m();
+        return M();
       case "object":
-        return V();
+        return g();
       default:
         return n.value;
     }
   }
-  function le(p, k) {
-    switch (k) {
+  function U(v, C) {
+    switch (C) {
       case "hex": {
-        s.value = Y(p);
+        const $ = Z(v);
+        $ && (s.value = $);
         break;
       }
       case "hexa": {
-        s.value = Y(p);
+        const $ = Z(v);
+        $ && (s.value = $);
         break;
       }
       case "rgb": {
-        t.value = me(p);
+        t.value = Ve(v);
         break;
       }
       case "rgba": {
-        s.value = ke(p);
+        s.value = Se(v);
         break;
       }
       case "hsl": {
-        u.value = $e(p);
+        u.value = we(v);
         break;
       }
       case "hsla": {
-        i.value = ye(p);
+        i.value = _e(v);
         break;
       }
       case "hsv": {
-        o.value = xe(p);
+        o.value = He(v);
         break;
       }
       case "hsva": {
-        r.value = Se(p);
+        r.value = Be(v);
         break;
       }
       case "object": {
-        l.value = {
-          hsv: p.hsv,
-          hsl: p.hsl,
-          rgb: p.rgb
-        }, e.value = (p.hsva?.a ?? 1) * 100;
+        a.value = {
+          hsv: v.hsv,
+          hsl: v.hsl,
+          rgb: v.rgb
+        }, e.value = (v.hsva?.a ?? 1) * 100;
         break;
       }
     }
   }
   return {
-    state: l,
+    state: a,
     alpha: e,
     rgb: t,
     rgba: s,
@@ -405,33 +455,18 @@ function Ce() {
     hsva: r,
     hex: n,
     hexa: d,
-    toRGBString: h,
+    toRGBString: p,
     toRGBAString: b,
     toHSLString: f,
-    toHSLAString: B,
-    toHSVString: T,
-    toHSVAString: m,
-    toObject: V,
-    toFormat: U,
-    fromFormat: le
+    toHSLAString: k,
+    toHSVString: B,
+    toHSVAString: M,
+    toObject: g,
+    toFormat: H,
+    fromFormat: U
   };
 }
-function we(l, e, t) {
-  const s = W(void 0);
-  return ee(
-    () => l.modelValue,
-    (u) => {
-      u !== s.value && t(u);
-    },
-    { immediate: !0 }
-  ), g({
-    get: () => l.modelValue,
-    set: (u) => {
-      s.value = u, e("update:modelValue", u);
-    }
-  });
-}
-const [w, Ve] = ce("ColorPickerRoot"), Ye = /* @__PURE__ */ C({
+const [S, Pe] = pe("ColorPickerRoot"), nt = /* @__PURE__ */ V({
   __name: "ColorPickerRoot",
   props: {
     ui: {},
@@ -442,203 +477,205 @@ const [w, Ve] = ce("ColorPickerRoot"), Ye = /* @__PURE__ */ C({
     modelValue: {},
     format: { default: "hexa" }
   },
-  emits: ["update:end", "update:modelValue"],
-  setup(l, { expose: e, emit: t }) {
-    const s = l, u = t, i = Ce(), o = we(s, u, (b) => {
+  emits: ["valueCommit", "update:modelValue"],
+  setup(a, { expose: e, emit: t }) {
+    const s = a, u = t, i = Ie(), o = me(s, u, (b) => {
       b === null || s.format === "object" && typeof b != "object" || s.format !== "object" && typeof b == "object" ? i.hexa.value = s.defaultValue : i.fromFormat(b, s.format);
     });
-    ee(
+    te(
       () => [i.hexa.value, i.hsv.value],
       () => o.value = i.toFormat(s.format)
     );
-    const r = g(() => s.disabled), n = g(() => ["hexa", "rgba", "hsva", "object"].includes(s.format)), d = he(ve[s.styling], s.ui), h = d("picker");
-    return Ve({
+    const r = m(() => s.disabled), n = m(() => ["hexa", "rgba", "hsva", "object"].includes(s.format)), d = Ce($e[s.styling], s.ui), p = d("picker");
+    return Pe({
       ...i,
       uiSlots: d,
       disabled: r,
       isAlphaEnabled: n,
-      emitUpdateEnd: () => {
-        s.disabled || u("update:end", i.toFormat(s.format));
+      commitValue: () => {
+        s.disabled || u("valueCommit", i.toFormat(s.format));
       }
     }), e({
       color: i
-    }), (b, f) => ($(), H("div", {
-      class: c(a(h).root(s.class))
+    }), (b, f) => (y(), P("div", {
+      class: c(l(p).root(s.class))
     }, [
-      D(b.$slots, "default")
+      T(b.$slots, "default")
     ], 2));
   }
 });
-function _e(l, e) {
-  const t = l.canvas.width, s = l.canvas.height, u = `hsl(${e},100%,50%)`;
-  l.rect(0, 0, t, s), l.fillStyle = u, l.fillRect(0, 0, t, s);
-  const i = l.createLinearGradient(0, 0, t, 0);
-  i.addColorStop(0, "rgba(255,255,255,1)"), i.addColorStop(1, "rgba(255,255,255,0)"), l.fillStyle = i, l.fillRect(0, 0, t, s);
-  const o = l.createLinearGradient(0, 0, 0, s);
-  o.addColorStop(0, "rgba(0,0,0,0)"), o.addColorStop(1, "rgba(0,0,0,1)"), l.fillStyle = o, l.fillRect(0, 0, t, s);
+function Ae(a, e) {
+  const t = a.canvas.width, s = a.canvas.height, u = `hsl(${e},100%,50%)`;
+  a.rect(0, 0, t, s), a.fillStyle = u, a.fillRect(0, 0, t, s);
+  const i = a.createLinearGradient(0, 0, t, 0);
+  i.addColorStop(0, "rgba(255,255,255,1)"), i.addColorStop(1, "rgba(255,255,255,0)"), a.fillStyle = i, a.fillRect(0, 0, t, s);
+  const o = a.createLinearGradient(0, 0, 0, s);
+  o.addColorStop(0, "rgba(0,0,0,0)"), o.addColorStop(1, "rgba(0,0,0,1)"), a.fillStyle = o, a.fillRect(0, 0, t, s);
 }
-function Be(l, e) {
-  const t = l.canvas.width, s = l.canvas.height;
-  l.clearRect(0, 0, t, s);
-  const u = l.createLinearGradient(0, 0, t, 0), i = 12;
+function Fe(a, e) {
+  const t = a.canvas.width, s = a.canvas.height;
+  a.clearRect(0, 0, t, s);
+  const u = a.createLinearGradient(0, 0, t, 0), i = 12;
   for (let n = 0; n <= i; n++) {
-    const d = n / i, { r: h, g: b, b: f } = X(te({ h: e, s: d, l: 0.5 }));
-    u.addColorStop(d, `rgb(${h} ${b} ${f})`);
+    const d = n / i, { r: p, g: b, b: f } = X(se({ h: e, s: d, l: 0.5 }));
+    u.addColorStop(d, `rgb(${p} ${b} ${f})`);
   }
-  l.fillStyle = u, l.fillRect(0, 0, t, s), l.globalCompositeOperation = "screen";
-  let o = l.createLinearGradient(0, 0, 0, s);
-  o.addColorStop(0, "white"), o.addColorStop(0.5, "rgba(255,255,255,0)"), l.fillStyle = o, l.fillRect(0, 0, t, s), l.globalCompositeOperation = "multiply";
-  let r = l.createLinearGradient(0, 0, 0, s);
-  r.addColorStop(0.5, "rgba(0,0,0,0)"), r.addColorStop(1, "black"), l.fillStyle = r, l.fillRect(0, 0, t, s), l.globalCompositeOperation = "source-over";
+  a.fillStyle = u, a.fillRect(0, 0, t, s), a.globalCompositeOperation = "screen";
+  let o = a.createLinearGradient(0, 0, 0, s);
+  o.addColorStop(0, "white"), o.addColorStop(0.5, "rgba(255,255,255,0)"), a.fillStyle = o, a.fillRect(0, 0, t, s), a.globalCompositeOperation = "multiply";
+  let r = a.createLinearGradient(0, 0, 0, s);
+  r.addColorStop(0.5, "rgba(0,0,0,0)"), r.addColorStop(1, "black"), a.fillStyle = r, a.fillRect(0, 0, t, s), a.globalCompositeOperation = "source-over";
 }
-function Pe(l, e) {
-  const t = w(), s = W({
+function Me(a, e) {
+  const t = S(), s = O({
     top: 1,
     left: 1,
     width: 1,
     height: 1
-  }), { hsl: u, hsv: i } = t, o = g({
+  }), { hsl: u, hsv: i } = t, o = m({
     get: () => e.value === "HSV" ? 1 - i.value.v : 1 - u.value.l,
-    set: (m) => {
-      e.value === "HSV" ? i.value = { ...i.value, v: _(1 - m, 0, 1) } : u.value = { ...u.value, l: _(1 - m, 0, 1) };
+    set: (g) => {
+      e.value === "HSV" ? i.value = { ...i.value, v: _(1 - g, 0, 1) } : u.value = { ...u.value, l: _(1 - g, 0, 1) };
     }
-  }), r = g({
+  }), r = m({
     get: () => e.value === "HSV" ? i.value.s : u.value.s,
-    set: (m) => {
-      e.value === "HSV" ? i.value = { ...i.value, s: _(m, 0, 1) } : u.value = { ...u.value, s: _(m, 0, 1) };
+    set: (g) => {
+      e.value === "HSV" ? i.value = { ...i.value, s: _(g, 0, 1) } : u.value = { ...u.value, s: _(g, 0, 1) };
     }
-  }), n = g(() => {
-    const m = r.value * s.value.width, V = o.value * s.value.height;
+  }), n = O(!1), d = m(() => {
+    const g = r.value * s.value.width, H = o.value * s.value.height;
     return {
       top: 0,
       left: 0,
       position: "absolute",
-      backgroundColor: ge({ ...t.rgba.value, a: 1 }),
-      transform: `translate3d(calc(-50% + ${m}px), calc(-50% + ${V}px), 0px)`
+      display: n.value ? void 0 : "none",
+      backgroundColor: fe({ ...t.rgba.value, a: 1 }),
+      transform: `translate3d(calc(-50% + ${g}px), calc(-50% + ${H}px), 0px)`
     };
   });
-  oe(() => {
-    d(), window.addEventListener("resize", d);
-  }), se(() => {
-    window.removeEventListener("resize", d);
+  ne(() => {
+    p(), n.value = !0, window.addEventListener("resize", p);
+  }), re(() => {
+    window.removeEventListener("resize", p);
   });
-  function d() {
-    const m = l.value;
-    m && (s.value = m.getBoundingClientRect());
+  function p() {
+    const g = a.value;
+    g && (s.value = g.getBoundingClientRect());
   }
-  function h(m) {
-    document.addEventListener("pointermove", b), document.addEventListener("pointerup", f), d(), b(m);
+  function b(g) {
+    t.disabled.value || (document.addEventListener("pointermove", f), document.addEventListener("pointerup", k), p(), f(g));
   }
-  function b(m) {
-    m.preventDefault();
-    const V = m.clientY - s.value.top, U = m.clientX - s.value.left;
-    r.value = _(U, 0, s.value.width) / s.value.width, o.value = _(V, 0, s.value.height) / s.value.height;
+  function f(g) {
+    g.preventDefault();
+    const H = g.clientY - s.value.top, U = g.clientX - s.value.left;
+    r.value = _(U, 0, s.value.width) / s.value.width, o.value = _(H, 0, s.value.height) / s.value.height;
   }
-  function f() {
-    document.removeEventListener("pointermove", b), document.removeEventListener("pointerup", f), t.emitUpdateEnd();
+  function k() {
+    document.removeEventListener("pointermove", f), document.removeEventListener("pointerup", k), t.commitValue();
   }
-  function B(m) {
-    const V = m.shiftKey ? 0.1 : 0.01;
-    switch (m.key) {
+  function B(g) {
+    if (t.disabled.value) return;
+    const H = g.shiftKey ? 0.1 : 0.01;
+    switch (g.key) {
       case "ArrowUp":
-        m.preventDefault(), o.value -= V, t.emitUpdateEnd();
+        g.preventDefault(), o.value -= H, t.commitValue();
         break;
       case "ArrowDown":
-        m.preventDefault(), o.value += V, t.emitUpdateEnd();
+        g.preventDefault(), o.value += H, t.commitValue();
         break;
       case "ArrowLeft":
-        m.preventDefault(), r.value -= V, t.emitUpdateEnd();
+        g.preventDefault(), r.value -= H, t.commitValue();
         break;
       case "ArrowRight":
-        m.preventDefault(), r.value += V, t.emitUpdateEnd();
+        g.preventDefault(), r.value += H, t.commitValue();
         break;
     }
   }
-  function T(m) {
-    const V = m.deltaY * 0.1, U = (t.hsv.value.h + V) % 360;
-    m.preventDefault(), t.hsv.value = {
+  function M(g) {
+    if (t.disabled.value) return;
+    const H = g.deltaY * 0.1, U = (t.hsv.value.h + H) % 360;
+    g.preventDefault(), t.hsv.value = {
       ...t.hsv.value,
       h: U < 0 ? 360 : U
     };
   }
   return {
-    thumbStyles: n,
-    handleWheel: T,
+    thumbStyles: d,
+    handleWheel: M,
     handleKeyDown: B,
-    handlePointerDown: h
+    handlePointerDown: b
   };
 }
-const He = ["height", "width"], Xe = /* @__PURE__ */ C({
+const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
   __name: "ColorPickerCanvas",
   props: {
     type: { default: "HSV" },
     height: { default: 208 },
     width: { default: 208 },
+    wheel: { type: Boolean, default: !0 },
     class: {},
     ui: {}
   },
-  setup(l) {
-    const e = w(), t = ne("canvasRef"), s = l, u = g(() => ({
+  setup(a) {
+    const e = S(), t = ue("canvasRef"), s = a, u = m(() => ({
       position: "relative",
       height: `${s.height}px`,
       width: `${s.width}px`
     }));
-    re(() => {
+    ie(() => {
       const b = t.value?.getContext("2d");
       if (b)
         switch (s.type) {
           case "HSL":
-            Be(b, e.hsv.value.h);
+            Fe(b, e.hsv.value.h);
             break;
           case "HSV":
-            _e(b, e.hsv.value.h);
+            Ae(b, e.hsv.value.h);
             break;
         }
     });
-    const i = g(() => s.type), {
+    const i = m(() => s.type), {
       thumbStyles: o,
       handleWheel: r,
       handleKeyDown: n,
       handlePointerDown: d
-    } = Pe(t, i), h = e.uiSlots("canvas", "shared");
-    return (b, f) => ($(), H("div", {
-      style: y(u.value),
-      class: c(a(h).root(s.ui?.root, s.class)),
-      onContextmenu: f[0] || (f[0] = ie(() => {
+    } = Me(t, i), p = e.uiSlots("canvas", "shared");
+    return (b, f) => (y(), P("div", {
+      style: x(u.value),
+      class: c(l(p).root(s.ui?.root, s.class)),
+      "data-disabled": l(e).disabled.value ? "" : null,
+      onContextmenu: f[0] || (f[0] = ce(() => {
       }, ["prevent"])),
-      onWheel: f[1] || (f[1] = //@ts-ignore
-      (...B) => a(r) && a(r)(...B)),
-      onKeydown: f[2] || (f[2] = //@ts-ignore
-      (...B) => a(n) && a(n)(...B)),
-      onPointerdown: f[3] || (f[3] = //@ts-ignore
-      (...B) => a(d) && a(d)(...B))
+      onKeydown: f[1] || (f[1] = //@ts-ignore
+      (...k) => l(n) && l(n)(...k)),
+      onPointerdown: f[2] || (f[2] = //@ts-ignore
+      (...k) => l(d) && l(d)(...k)),
+      onWheel: f[3] || (f[3] = (k) => s.wheel && l(r)(k))
     }, [
-      v("canvas", {
+      h("canvas", {
         ref_key: "canvasRef",
         ref: t,
         height: s.height,
         width: s.width,
-        class: c(a(h).area(s.ui?.area))
-      }, null, 10, He),
-      v("span", {
+        class: c(l(p).area(s.ui?.area))
+      }, null, 10, De),
+      h("span", {
         tabindex: "0",
-        style: y(a(o)),
-        class: c(a(h).thumb(s.ui?.thumb))
+        style: x(l(o)),
+        class: c(l(p).thumb(s.ui?.thumb))
       }, null, 6)
-    ], 38));
+    ], 46, Re));
   }
-}), Ze = /* @__PURE__ */ C({
+}), ut = /* @__PURE__ */ V({
   __name: "ColorPickerEyeDropper",
   props: {
-    class: {}
+    class: {},
+    as: { default: "button" },
+    asChild: { type: Boolean }
   },
-  setup(l) {
-    const e = l, t = w(), s = g(() => typeof window < "u" && !!window.EyeDropper);
+  setup(a) {
+    const e = a, t = S(), s = m(() => typeof window < "u" && !!window.EyeDropper);
     function u() {
-      if (!s.value) {
-        console.warn("EyeDropper API is not available in this environment.");
-        return;
-      }
       const o = window.EyeDropper;
       new o().open().then((n) => {
         t.hexa.value = n.sRGBHex;
@@ -647,389 +684,409 @@ const He = ["height", "width"], Xe = /* @__PURE__ */ C({
       });
     }
     const i = t.uiSlots("dropper");
-    return (o, r) => s.value ? ($(), H("button", {
+    return (o, r) => s.value ? (y(), A(l(ae), {
       key: 0,
-      class: c(a(i).base(e.class)),
+      as: e.as,
+      "as-child": e.asChild,
+      disabled: l(t).disabled.value,
+      class: c(l(i).base(e.class)),
       onClick: u
-    }, [
-      D(o.$slots, "default")
-    ], 2)) : j("", !0);
+    }, {
+      default: F(() => [
+        T(o.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as", "as-child", "disabled", "class"])) : W("", !0);
   }
-}), Ie = ["value", "disabled"], Ee = ["value", "disabled"], qe = /* @__PURE__ */ C({
+}), Ee = ["data-disabled"], Le = ["value", "disabled"], Ge = ["value", "disabled"], it = /* @__PURE__ */ V({
   __name: "ColorPickerInputHex",
   props: {
+    modelValue: {},
     class: {},
     ui: {}
   },
-  setup(l) {
-    const e = l, t = w();
-    function s(o) {
-      const r = o.target, n = Y(r.value);
-      n ? (t.rgba.value = n, t.emitUpdateEnd()) : r.value = t.hex.value;
+  emits: ["update:modelValue"],
+  setup(a, { emit: e }) {
+    const t = e, s = a, u = S(), i = de(), o = m(() => !!i?.vnode.props?.["onUpdate:modelValue"]), r = m(() => o.value ? ye(s.modelValue) : u.hex.value.replace("#", "")), n = m(() => o.value ? xe(s.modelValue) : u.alpha.value);
+    function d(f) {
+      const k = f.target, B = k.value ? Z(k.value) : null;
+      if (!B) {
+        k.value = r.value;
+        return;
+      }
+      o.value ? t("update:modelValue", be(B)) : (u.rgba.value = B, u.commitValue());
     }
-    function u(o) {
-      const r = o.target, n = parseInt(r.value, 10), d = isNaN(n) ? t.alpha.value : _(n, 0, 100);
-      t.alpha.value !== d ? (t.alpha.value = d, t.emitUpdateEnd()) : r.value = d.toString();
+    function p(f) {
+      const k = f.target, B = parseInt(k.value, 10), M = isNaN(B) ? u.alpha.value : _(B, 0, 100);
+      u.alpha.value !== M ? (u.alpha.value = M, u.commitValue()) : k.value = M.toString();
     }
-    const i = t.uiSlots("input");
-    return (o, r) => ($(), H("div", {
-      class: c(a(i).group(e.ui?.group, e.class))
+    const b = u.uiSlots("input");
+    return (f, k) => (y(), P("div", {
+      class: c(l(b).group(s.ui?.group, s.class)),
+      "data-disabled": l(u).disabled.value ? "" : null
     }, [
-      D(o.$slots, "before"),
-      v("div", {
-        class: c(a(i).item(e.ui?.item))
+      h("div", {
+        class: c(l(b).item(s.ui?.item))
       }, [
-        v("span", {
-          class: c(a(i).label(e.ui?.label))
+        T(f.$slots, "before"),
+        h("span", {
+          class: c(l(b).label(s.ui?.label))
         }, "#", 2),
-        v("input", {
+        h("input", {
           type: "text",
           name: "hex",
           "aria-label": "Hex",
-          value: a(t).hex.value.replace("#", ""),
-          disabled: a(t).disabled.value,
-          class: c(a(i).field(e.ui?.field)),
-          onBlur: s
-        }, null, 42, Ie)
+          value: r.value,
+          disabled: l(u).disabled.value,
+          class: c(l(b).field(s.ui?.field)),
+          onBlur: d
+        }, null, 42, Le)
       ], 2),
-      a(t).isAlphaEnabled.value ? ($(), H("div", {
+      l(u).isAlphaEnabled.value ? (y(), P("div", {
         key: 0,
         "data-alpha-input": "",
-        class: c(a(i).item(e.ui?.item))
+        class: c(l(b).item(s.ui?.item))
       }, [
-        v("input", {
+        h("input", {
           type: "text",
           name: "opacity",
           "aria-label": "Opacity",
-          value: a(t).alpha.value,
-          disabled: a(t).disabled.value,
-          class: c(a(i).field(e.ui?.field)),
-          onBlur: u
-        }, null, 42, Ee),
-        v("span", {
-          class: c(a(i).label(e.ui?.label))
+          value: n.value,
+          disabled: l(u).disabled.value,
+          class: c(l(b).field(s.ui?.field)),
+          onBlur: p
+        }, null, 42, Ge),
+        h("span", {
+          "data-alpha-label": "",
+          class: c(l(b).label(s.ui?.label))
         }, "%", 2)
-      ], 2)) : j("", !0)
-    ], 2));
+      ], 2)) : W("", !0)
+    ], 10, Ee));
   }
-}), Fe = ["disabled", "value"], Ae = ["disabled", "value"], Re = ["disabled", "value"], Le = ["value", "disabled"], Je = /* @__PURE__ */ C({
+}), Ne = ["data-disabled"], Ue = ["disabled", "value"], je = ["disabled", "value"], Te = ["disabled", "value"], ze = ["value", "disabled"], ct = /* @__PURE__ */ V({
   __name: "ColorPickerInputRGB",
   props: {
     class: {},
     ui: {}
   },
-  setup(l) {
-    const e = l, t = w();
+  setup(a) {
+    const e = a, t = S();
     function s(r, n) {
-      const d = r.target, h = parseInt(d.value, 10), b = isNaN(h) ? t.rgb.value[n] : _(h, 0, 255);
+      const d = r.target, p = parseInt(d.value, 10), b = isNaN(p) ? t.rgb.value[n] : _(p, 0, 255);
       t.rgb.value[n] !== b ? (t.rgb.value = {
         ...t.rgb.value,
         [n]: b
-      }, t.emitUpdateEnd()) : d.value = b.toString();
+      }, t.commitValue()) : d.value = b.toString();
     }
     function u(r) {
-      const n = r.target, d = parseInt(n.value, 10), h = isNaN(d) ? t.alpha.value : _(d, 0, 100);
-      t.alpha.value !== h ? (t.alpha.value = h, t.emitUpdateEnd()) : n.value = h.toString();
+      const n = r.target, d = parseInt(n.value, 10), p = isNaN(d) ? t.alpha.value : _(d, 0, 100);
+      t.alpha.value !== p ? (t.alpha.value = p, t.commitValue()) : n.value = p.toString();
     }
     const i = (r) => Math.round(r), o = t.uiSlots("input");
-    return (r, n) => ($(), H("div", {
-      class: c(a(o).group(e.ui?.group, e.class))
+    return (r, n) => (y(), P("div", {
+      class: c(l(o).group(e.ui?.group, e.class)),
+      "data-disabled": l(t).disabled.value ? "" : null
     }, [
-      D(r.$slots, "before"),
-      v("div", {
-        class: c(a(o).item(e.ui?.item))
+      h("div", {
+        class: c(l(o).item(e.ui?.item))
       }, [
-        v("span", {
-          class: c(a(o).label(e.ui?.label))
+        T(r.$slots, "before"),
+        h("span", {
+          class: c(l(o).label(e.ui?.label))
         }, "R", 2),
-        v("input", {
+        h("input", {
           type: "text",
           name: "red",
           "aria-label": "Red",
-          disabled: a(t).disabled.value,
-          class: c(a(o).field(e.ui?.field)),
-          value: i(a(t).rgb.value.r),
+          disabled: l(t).disabled.value,
+          class: c(l(o).field(e.ui?.field)),
+          value: i(l(t).rgb.value.r),
           onBlur: n[0] || (n[0] = (d) => s(d, "r"))
-        }, null, 42, Fe)
+        }, null, 42, Ue)
       ], 2),
-      v("div", {
-        class: c(a(o).item(e.ui?.item))
+      h("div", {
+        class: c(l(o).item(e.ui?.item))
       }, [
-        v("span", {
-          class: c(a(o).label(e.ui?.label))
+        h("span", {
+          class: c(l(o).label(e.ui?.label))
         }, "G", 2),
-        v("input", {
+        h("input", {
           type: "text",
           name: "green",
           "aria-label": "Green",
-          disabled: a(t).disabled.value,
-          class: c(a(o).field(e.ui?.field)),
-          value: i(a(t).rgb.value.g),
+          disabled: l(t).disabled.value,
+          class: c(l(o).field(e.ui?.field)),
+          value: i(l(t).rgb.value.g),
           onBlur: n[1] || (n[1] = (d) => s(d, "g"))
-        }, null, 42, Ae)
+        }, null, 42, je)
       ], 2),
-      v("div", {
-        class: c(a(o).item(e.ui?.item))
+      h("div", {
+        class: c(l(o).item(e.ui?.item))
       }, [
-        v("span", {
-          class: c(a(o).label(e.ui?.label))
+        h("span", {
+          class: c(l(o).label(e.ui?.label))
         }, "B", 2),
-        v("input", {
+        h("input", {
           type: "text",
           name: "blue",
           "aria-label": "Blue",
-          disabled: a(t).disabled.value,
-          class: c(a(o).field(e.ui?.field)),
-          value: i(a(t).rgb.value.b),
+          disabled: l(t).disabled.value,
+          class: c(l(o).field(e.ui?.field)),
+          value: i(l(t).rgb.value.b),
           onBlur: n[2] || (n[2] = (d) => s(d, "b"))
-        }, null, 42, Re)
+        }, null, 42, Te)
       ], 2),
-      a(t).isAlphaEnabled.value ? ($(), H("div", {
+      l(t).isAlphaEnabled.value ? (y(), P("div", {
         key: 0,
         "data-alpha-input": "",
-        class: c(a(o).item(e.ui?.item))
+        class: c(l(o).item(e.ui?.item))
       }, [
-        v("input", {
+        h("input", {
           type: "text",
           name: "opacity",
           "aria-label": "Opacity",
-          value: a(t).alpha.value,
-          disabled: a(t).disabled.value,
-          class: c(a(o).field(e.ui?.field)),
+          value: l(t).alpha.value,
+          disabled: l(t).disabled.value,
+          class: c(l(o).field(e.ui?.field)),
           onBlur: u
-        }, null, 42, Le),
-        v("span", {
-          class: c(a(o).label(e.ui?.label))
+        }, null, 42, ze),
+        h("span", {
+          "data-alpha-label": "",
+          class: c(l(o).label(e.ui?.label))
         }, "%", 2)
-      ], 2)) : j("", !0)
-    ], 2));
+      ], 2)) : W("", !0)
+    ], 10, Ne));
   }
-}), Me = ["disabled", "value"], Ue = ["disabled", "value"], Ge = ["disabled", "value"], De = ["value", "disabled"], Qe = /* @__PURE__ */ C({
+}), Oe = ["data-disabled"], We = ["disabled", "value"], Ke = ["disabled", "value"], Ze = ["disabled", "value"], Ye = ["value", "disabled"], dt = /* @__PURE__ */ V({
   __name: "ColorPickerInputHSL",
   props: {
     class: {},
     ui: {}
   },
-  setup(l) {
-    const e = l, t = w();
+  setup(a) {
+    const e = a, t = S();
     function s(r, n, d) {
-      const h = r.target, b = parseInt(h.value, 10), f = isNaN(b) ? t.hsl.value[n] : _(b, 0, d);
+      const p = r.target, b = parseInt(p.value, 10), f = isNaN(b) ? t.hsl.value[n] : _(b, 0, d);
       t.hsl.value[n] !== f ? (t.hsl.value = {
         ...t.hsl.value,
         [n]: n === "h" ? f : f / 100
-      }, t.emitUpdateEnd()) : h.value = n !== "h" ? Math.round(f * 100).toString() : f.toString();
+      }, t.commitValue()) : p.value = n !== "h" ? Math.round(f * 100).toString() : f.toString();
     }
     function u(r) {
-      const n = r.target, d = parseInt(n.value, 10), h = isNaN(d) ? t.alpha.value : _(d, 0, 100);
-      t.alpha.value !== h ? (t.alpha.value = h, t.emitUpdateEnd()) : n.value = h.toString();
+      const n = r.target, d = parseInt(n.value, 10), p = isNaN(d) ? t.alpha.value : _(d, 0, 100);
+      t.alpha.value !== p ? (t.alpha.value = p, t.commitValue()) : n.value = p.toString();
     }
     const i = (r) => Math.round(r * 100), o = t.uiSlots("input");
-    return (r, n) => ($(), H("div", {
-      class: c(a(o).group(e.ui?.group, e.class))
+    return (r, n) => (y(), P("div", {
+      class: c(l(o).group(e.ui?.group, e.class)),
+      "data-disabled": l(t).disabled.value ? "" : null
     }, [
-      D(r.$slots, "before"),
-      v("div", {
-        class: c(a(o).item(e.ui?.item))
+      h("div", {
+        class: c(l(o).item(e.ui?.item))
       }, [
-        v("span", {
-          class: c(a(o).label(e.ui?.label))
+        T(r.$slots, "before"),
+        h("span", {
+          class: c(l(o).label(e.ui?.label))
         }, "H", 2),
-        v("input", {
+        h("input", {
           type: "text",
           name: "hue",
           "aria-label": "Hue",
-          disabled: a(t).disabled.value,
-          class: c(a(o).field(e.ui?.field)),
-          value: Math.round(a(t).hsl.value.h),
+          disabled: l(t).disabled.value,
+          class: c(l(o).field(e.ui?.field)),
+          value: Math.round(l(t).hsl.value.h),
           onBlur: n[0] || (n[0] = (d) => s(d, "h", 360))
-        }, null, 42, Me)
+        }, null, 42, We)
       ], 2),
-      v("div", {
-        class: c(a(o).item(e.ui?.item))
+      h("div", {
+        class: c(l(o).item(e.ui?.item))
       }, [
-        v("span", {
-          class: c(a(o).label(e.ui?.label))
+        h("span", {
+          class: c(l(o).label(e.ui?.label))
         }, "S", 2),
-        v("input", {
+        h("input", {
           type: "text",
           name: "saturation",
           "aria-label": "Saturation",
-          disabled: a(t).disabled.value,
-          class: c(a(o).field(e.ui?.field)),
-          value: i(a(t).hsl.value.s),
+          disabled: l(t).disabled.value,
+          class: c(l(o).field(e.ui?.field)),
+          value: i(l(t).hsl.value.s),
           onBlur: n[1] || (n[1] = (d) => s(d, "s", 100))
-        }, null, 42, Ue)
+        }, null, 42, Ke)
       ], 2),
-      v("div", {
-        class: c(a(o).item(e.ui?.item))
+      h("div", {
+        class: c(l(o).item(e.ui?.item))
       }, [
-        v("span", {
-          class: c(a(o).label(e.ui?.label))
+        h("span", {
+          class: c(l(o).label(e.ui?.label))
         }, "L", 2),
-        v("input", {
+        h("input", {
           type: "text",
           name: "lightness",
           "aria-label": "Lightness",
-          disabled: a(t).disabled.value,
-          class: c(a(o).field(e.ui?.field)),
-          value: i(a(t).hsl.value.l),
+          disabled: l(t).disabled.value,
+          class: c(l(o).field(e.ui?.field)),
+          value: i(l(t).hsl.value.l),
           onBlur: n[2] || (n[2] = (d) => s(d, "l", 100))
-        }, null, 42, Ge)
+        }, null, 42, Ze)
       ], 2),
-      a(t).isAlphaEnabled.value ? ($(), H("div", {
+      l(t).isAlphaEnabled.value ? (y(), P("div", {
         key: 0,
         "data-alpha-input": "",
-        class: c(a(o).item(e.ui?.item))
+        class: c(l(o).item(e.ui?.item))
       }, [
-        v("input", {
+        h("input", {
           type: "text",
           name: "opacity",
           "aria-label": "Opacity",
-          value: a(t).alpha.value,
-          disabled: a(t).disabled.value,
-          class: c(a(o).field(e.ui?.field)),
+          value: l(t).alpha.value,
+          disabled: l(t).disabled.value,
+          class: c(l(o).field(e.ui?.field)),
           onBlur: u
-        }, null, 42, De),
-        v("span", {
-          class: c(a(o).label(e.ui?.label))
+        }, null, 42, Ye),
+        h("span", {
+          "data-alpha-label": "",
+          class: c(l(o).label(e.ui?.label))
         }, "%", 2)
-      ], 2)) : j("", !0)
-    ], 2));
+      ], 2)) : W("", !0)
+    ], 10, Oe));
   }
-}), Ne = ["disabled", "value"], je = ["disabled", "value"], Te = ["disabled", "value"], ze = ["value", "disabled"], et = /* @__PURE__ */ C({
+}), Xe = ["data-disabled"], qe = ["disabled", "value"], Je = ["disabled", "value"], Qe = ["disabled", "value"], et = ["value", "disabled"], vt = /* @__PURE__ */ V({
   __name: "ColorPickerInputHSB",
   props: {
     class: {},
     ui: {}
   },
-  setup(l) {
-    const e = l, t = w();
+  setup(a) {
+    const e = a, t = S();
     function s(r, n, d) {
-      const h = r.target, b = parseInt(h.value, 10), f = isNaN(b) ? t.hsv.value[n] : _(b, 0, d);
+      const p = r.target, b = parseInt(p.value, 10), f = isNaN(b) ? t.hsv.value[n] : _(b, 0, d);
       t.hsv.value[n] !== f ? (t.hsv.value = {
         ...t.hsv.value,
         [n]: n === "h" ? f : f / 100
-      }, t.emitUpdateEnd()) : h.value = n !== "h" ? Math.round(f * 100).toString() : f.toString();
+      }, t.commitValue()) : p.value = n !== "h" ? Math.round(f * 100).toString() : f.toString();
     }
     function u(r) {
-      const n = r.target, d = parseInt(n.value, 10), h = isNaN(d) ? t.alpha.value : _(d, 0, 100);
-      t.alpha.value !== h ? (t.alpha.value = h, t.emitUpdateEnd()) : n.value = h.toString();
+      const n = r.target, d = parseInt(n.value, 10), p = isNaN(d) ? t.alpha.value : _(d, 0, 100);
+      t.alpha.value !== p ? (t.alpha.value = p, t.commitValue()) : n.value = p.toString();
     }
     const i = (r) => Math.round(r * 100), o = t.uiSlots("input");
-    return (r, n) => ($(), H("div", {
-      class: c(a(o).group(e.ui?.group, e.class))
+    return (r, n) => (y(), P("div", {
+      class: c(l(o).group(e.ui?.group, e.class)),
+      "data-disabled": l(t).disabled.value ? "" : null
     }, [
-      D(r.$slots, "before"),
-      v("div", {
-        class: c(a(o).item(e.ui?.item))
+      h("div", {
+        class: c(l(o).item(e.ui?.item))
       }, [
-        v("span", {
-          class: c(a(o).label(e.ui?.label))
+        T(r.$slots, "before"),
+        h("span", {
+          class: c(l(o).label(e.ui?.label))
         }, "H", 2),
-        v("input", {
+        h("input", {
           type: "text",
           name: "hue",
           "aria-label": "Hue",
-          disabled: a(t).disabled.value,
-          class: c(a(o).field(e.ui?.field)),
-          value: Math.round(a(t).hsv.value.h),
+          disabled: l(t).disabled.value,
+          class: c(l(o).field(e.ui?.field)),
+          value: Math.round(l(t).hsv.value.h),
           onBlur: n[0] || (n[0] = (d) => s(d, "h", 360))
-        }, null, 42, Ne)
+        }, null, 42, qe)
       ], 2),
-      v("div", {
-        class: c(a(o).item(e.ui?.item))
+      h("div", {
+        class: c(l(o).item(e.ui?.item))
       }, [
-        v("span", {
-          class: c(a(o).label(e.ui?.label))
+        h("span", {
+          class: c(l(o).label(e.ui?.label))
         }, "S", 2),
-        v("input", {
+        h("input", {
           type: "text",
           name: "saturation",
           "aria-label": "Saturation",
-          disabled: a(t).disabled.value,
-          class: c(a(o).field(e.ui?.field)),
-          value: i(a(t).hsv.value.s),
+          disabled: l(t).disabled.value,
+          class: c(l(o).field(e.ui?.field)),
+          value: i(l(t).hsv.value.s),
           onBlur: n[1] || (n[1] = (d) => s(d, "s", 100))
-        }, null, 42, je)
+        }, null, 42, Je)
       ], 2),
-      v("div", {
-        class: c(a(o).item(e.ui?.item))
+      h("div", {
+        class: c(l(o).item(e.ui?.item))
       }, [
-        v("span", {
-          class: c(a(o).label(e.ui?.label))
+        h("span", {
+          class: c(l(o).label(e.ui?.label))
         }, "B", 2),
-        v("input", {
+        h("input", {
           type: "text",
           name: "brightness",
           "aria-label": "Brightness",
-          disabled: a(t).disabled.value,
-          class: c(a(o).field(e.ui?.field)),
-          value: i(a(t).hsv.value.v),
+          disabled: l(t).disabled.value,
+          class: c(l(o).field(e.ui?.field)),
+          value: i(l(t).hsv.value.v),
           onBlur: n[2] || (n[2] = (d) => s(d, "v", 100))
-        }, null, 42, Te)
+        }, null, 42, Qe)
       ], 2),
-      a(t).isAlphaEnabled.value ? ($(), H("div", {
+      l(t).isAlphaEnabled.value ? (y(), P("div", {
         key: 0,
         "data-alpha-input": "",
-        class: c(a(o).item(e.ui?.item))
+        class: c(l(o).item(e.ui?.item))
       }, [
-        v("input", {
+        h("input", {
           type: "text",
           name: "opacity",
           "aria-label": "Opacity",
-          value: a(t).alpha.value,
-          disabled: a(t).disabled.value,
-          class: c(a(o).field(e.ui?.field)),
+          value: l(t).alpha.value,
+          disabled: l(t).disabled.value,
+          class: c(l(o).field(e.ui?.field)),
           onBlur: u
-        }, null, 42, ze),
-        v("span", {
-          class: c(a(o).label(e.ui?.label))
+        }, null, 42, et),
+        h("span", {
+          "data-alpha-label": "",
+          class: c(l(o).label(e.ui?.label))
         }, "%", 2)
-      ], 2)) : j("", !0)
-    ], 2));
+      ], 2)) : W("", !0)
+    ], 10, Xe));
   }
-}), tt = /* @__PURE__ */ C({
+}), pt = /* @__PURE__ */ V({
   __name: "ColorPickerSliderAlpha",
   props: {
     class: {},
     orientation: { default: "horizontal" },
     ui: {}
   },
-  setup(l) {
-    const e = w(), t = g({
+  setup(a) {
+    const e = S(), t = m({
       get: () => [e.alpha.value],
       set: ([o]) => {
         e.alpha.value = o;
       }
-    }), s = l, u = g(() => ({
+    }), s = a, u = m(() => ({
       background: [
         `linear-gradient(${s.orientation === "vertical" ? "to top" : "to right"}, rgba(0, 0, 0, 0) 0%, ${e.hex.value} 100%)`,
         "repeating-conic-gradient(#ddd 0% 25%, transparent 0% 50%) 50% / 8px 8px"
       ].join(",")
     })), i = e.uiSlots("slider", "shared");
-    return (o, r) => ($(), F(a(R), {
+    return (o, r) => (y(), A(l(L), {
       modelValue: t.value,
       "onUpdate:modelValue": r[0] || (r[0] = (n) => t.value = n),
-      disabled: a(e).disabled.value,
+      disabled: l(e).disabled.value,
       orientation: s.orientation,
-      class: c(a(i).root(s.ui?.root, s.class)),
-      onPointerup: r[1] || (r[1] = (n) => a(e).emitUpdateEnd())
+      class: c(l(i).root(s.ui?.root, s.class)),
+      onValueCommit: r[1] || (r[1] = (n) => l(e).commitValue())
     }, {
-      default: A(() => [
-        S(a(L), {
-          style: y(u.value),
-          class: c(a(i).track(s.ui?.track))
+      default: F(() => [
+        w(l(G), {
+          style: x(u.value),
+          class: c(l(i).track(s.ui?.track))
         }, null, 8, ["style", "class"]),
-        S(a(M), {
-          style: y({ backgroundColor: a(e).hexa.value }),
-          class: c(a(i).thumb(s.ui?.thumb)),
+        w(l(N), {
+          style: x({ backgroundColor: l(e).hexa.value }),
+          class: c(l(i).thumb(s.ui?.thumb)),
           "aria-label": "Opacity"
         }, null, 8, ["style", "class"])
       ]),
       _: 1
     }, 8, ["modelValue", "disabled", "orientation", "class"]));
   }
-}), at = /* @__PURE__ */ C({
+}), ht = /* @__PURE__ */ V({
   __name: "ColorPickerSliderHue",
   props: {
     class: {},
@@ -1037,8 +1094,8 @@ const He = ["height", "width"], Xe = /* @__PURE__ */ C({
     orientation: { default: "horizontal" },
     ui: {}
   },
-  setup(l) {
-    const e = l, t = w(), s = g({
+  setup(a) {
+    const e = a, t = S(), s = m({
       get: () => [t.hsv.value.h],
       set: ([o]) => {
         t.hsv.value = {
@@ -1046,40 +1103,40 @@ const He = ["height", "width"], Xe = /* @__PURE__ */ C({
           h: o
         };
       }
-    }), u = g(() => `linear-gradient(${e.orientation === "vertical" ? "to top" : "to right"}, red, yellow, lime, cyan, blue, magenta, red)`), i = t.uiSlots("slider", "shared");
-    return (o, r) => ($(), F(a(R), {
+    }), u = m(() => `linear-gradient(${e.orientation === "vertical" ? "to top" : "to right"}, red, yellow, lime, cyan, blue, magenta, red)`), i = t.uiSlots("slider", "shared");
+    return (o, r) => (y(), A(l(L), {
       modelValue: s.value,
       "onUpdate:modelValue": r[0] || (r[0] = (n) => s.value = n),
-      disabled: a(t).disabled.value,
+      disabled: l(t).disabled.value,
       max: 360,
       inverted: e.inverted,
       orientation: e.orientation,
-      class: c(a(i).root(e.ui?.root, e.class)),
-      onPointerup: r[1] || (r[1] = (n) => a(t).emitUpdateEnd())
+      class: c(l(i).root(e.ui?.root, e.class)),
+      onValueCommit: r[1] || (r[1] = (n) => l(t).commitValue())
     }, {
-      default: A(() => [
-        S(a(L), {
-          style: y({ background: u.value }),
-          class: c(a(i).track(e.ui?.track))
+      default: F(() => [
+        w(l(G), {
+          style: x({ background: u.value }),
+          class: c(l(i).track(e.ui?.track))
         }, null, 8, ["style", "class"]),
-        S(a(M), {
+        w(l(N), {
           "aria-label": "Hue",
-          style: y({ background: `hsl(${a(t).hsv.value.h},100%,50%)` }),
-          class: c(a(i).thumb(e.ui?.thumb))
+          style: x({ background: `hsl(${l(t).hsv.value.h},100%,50%)` }),
+          class: c(l(i).thumb(e.ui?.thumb))
         }, null, 8, ["style", "class"])
       ]),
       _: 1
     }, 8, ["modelValue", "disabled", "inverted", "orientation", "class"]));
   }
-}), lt = /* @__PURE__ */ C({
+}), bt = /* @__PURE__ */ V({
   __name: "ColorPickerSliderSaturation",
   props: {
     class: {},
     orientation: { default: "horizontal" },
     ui: {}
   },
-  setup(l) {
-    const e = l, t = w(), s = g({
+  setup(a) {
+    const e = a, t = S(), s = m({
       get: () => [t.hsl.value.s],
       set: ([o]) => {
         t.hsl.value = {
@@ -1087,43 +1144,43 @@ const He = ["height", "width"], Xe = /* @__PURE__ */ C({
           s: o
         };
       }
-    }), u = g(() => {
+    }), u = m(() => {
       const o = e.orientation === "vertical" ? "to top" : "to right", r = `hsl(${Math.floor(t.hsl.value.h)}, 0%, ${Math.floor(t.hsl.value.l * 100)}%)`, n = `hsl(${Math.floor(t.hsl.value.h)}, 100%, ${Math.floor(t.hsl.value.l * 100)}%)`;
       return `linear-gradient(${o}, ${r}, ${n})`;
     }), i = t.uiSlots("slider", "shared");
-    return (o, r) => ($(), F(a(R), {
+    return (o, r) => (y(), A(l(L), {
       modelValue: s.value,
       "onUpdate:modelValue": r[0] || (r[0] = (n) => s.value = n),
       max: 1,
       step: 0.01,
-      disabled: a(t).disabled.value,
+      disabled: l(t).disabled.value,
       orientation: e.orientation,
-      class: c(a(i).root(e.ui?.root, e.class)),
-      onPointerup: r[1] || (r[1] = (n) => a(t).emitUpdateEnd())
+      class: c(l(i).root(e.ui?.root, e.class)),
+      onValueCommit: r[1] || (r[1] = (n) => l(t).commitValue())
     }, {
-      default: A(() => [
-        S(a(L), {
-          style: y({ background: u.value }),
-          class: c(a(i).track(e.ui?.track))
+      default: F(() => [
+        w(l(G), {
+          style: x({ background: u.value }),
+          class: c(l(i).track(e.ui?.track))
         }, null, 8, ["style", "class"]),
-        S(a(M), {
+        w(l(N), {
           "aria-label": "Saturation",
-          style: y({ background: a(t).hex.value }),
-          class: c(a(i).thumb(e.ui?.thumb))
+          style: x({ background: l(t).hex.value }),
+          class: c(l(i).thumb(e.ui?.thumb))
         }, null, 8, ["style", "class"])
       ]),
       _: 1
     }, 8, ["modelValue", "disabled", "orientation", "class"]));
   }
-}), ot = /* @__PURE__ */ C({
+}), ft = /* @__PURE__ */ V({
   __name: "ColorPickerSliderLightness",
   props: {
     class: {},
     orientation: { default: "horizontal" },
     ui: {}
   },
-  setup(l) {
-    const e = l, t = w(), s = g({
+  setup(a) {
+    const e = a, t = S(), s = m({
       get: () => [t.hsl.value.l],
       set: ([o]) => {
         t.hsl.value = {
@@ -1131,43 +1188,43 @@ const He = ["height", "width"], Xe = /* @__PURE__ */ C({
           l: o
         };
       }
-    }), u = g(() => {
+    }), u = m(() => {
       const o = e.orientation === "vertical" ? "to top" : "to right", r = `hsl(${Math.floor(t.hsl.value.h)}, ${Math.floor(t.hsl.value.s * 100)}%, 50%)`;
       return `linear-gradient(${o}, hsl(0, 0%, 0%), ${r}, hsl(0, 0%, 100%))`;
     }), i = t.uiSlots("slider", "shared");
-    return (o, r) => ($(), F(a(R), {
+    return (o, r) => (y(), A(l(L), {
       modelValue: s.value,
       "onUpdate:modelValue": r[0] || (r[0] = (n) => s.value = n),
       max: 1,
       step: 0.01,
-      disabled: a(t).disabled.value,
+      disabled: l(t).disabled.value,
       orientation: e.orientation,
-      class: c(a(i).root(e.ui?.root, e.class)),
-      onPointerup: r[1] || (r[1] = (n) => a(t).emitUpdateEnd())
+      class: c(l(i).root(e.ui?.root, e.class)),
+      onValueCommit: r[1] || (r[1] = (n) => l(t).commitValue())
     }, {
-      default: A(() => [
-        S(a(L), {
-          style: y({ background: u.value }),
-          class: c(a(i).track(e.ui?.track))
+      default: F(() => [
+        w(l(G), {
+          style: x({ background: u.value }),
+          class: c(l(i).track(e.ui?.track))
         }, null, 8, ["style", "class"]),
-        S(a(M), {
+        w(l(N), {
           "aria-label": "Lightness",
-          style: y({ background: a(t).hex.value }),
-          class: c(a(i).thumb(e.ui?.thumb))
+          style: x({ background: l(t).hex.value }),
+          class: c(l(i).thumb(e.ui?.thumb))
         }, null, 8, ["style", "class"])
       ]),
       _: 1
     }, 8, ["modelValue", "disabled", "orientation", "class"]));
   }
-}), st = /* @__PURE__ */ C({
+}), mt = /* @__PURE__ */ V({
   __name: "ColorPickerSliderRed",
   props: {
     class: {},
     orientation: { default: "horizontal" },
     ui: {}
   },
-  setup(l) {
-    const e = l, t = w(), s = g({
+  setup(a) {
+    const e = a, t = S(), s = m({
       get: () => [t.rgb.value.r],
       set: ([o]) => {
         t.rgb.value = {
@@ -1175,42 +1232,42 @@ const He = ["height", "width"], Xe = /* @__PURE__ */ C({
           r: o
         };
       }
-    }), u = g(() => {
+    }), u = m(() => {
       const o = e.orientation === "vertical" ? "to top" : "to right", r = `rgb(0, ${t.rgb.value.g}, ${t.rgb.value.b})`, n = `rgb(255, ${t.rgb.value.g}, ${t.rgb.value.b})`;
       return `linear-gradient(${o}, ${r}, ${n})`;
     }), i = t.uiSlots("slider", "shared");
-    return (o, r) => ($(), F(a(R), {
+    return (o, r) => (y(), A(l(L), {
       modelValue: s.value,
       "onUpdate:modelValue": r[0] || (r[0] = (n) => s.value = n),
-      disabled: a(t).disabled.value,
+      disabled: l(t).disabled.value,
       max: 255,
       orientation: e.orientation,
-      class: c(a(i).root(e.ui?.root, e.class)),
-      onPointerup: r[1] || (r[1] = (n) => a(t).emitUpdateEnd())
+      class: c(l(i).root(e.ui?.root, e.class)),
+      onValueCommit: r[1] || (r[1] = (n) => l(t).commitValue())
     }, {
-      default: A(() => [
-        S(a(L), {
-          style: y({ background: u.value }),
-          class: c(a(i).track(e.ui?.track))
+      default: F(() => [
+        w(l(G), {
+          style: x({ background: u.value }),
+          class: c(l(i).track(e.ui?.track))
         }, null, 8, ["style", "class"]),
-        S(a(M), {
+        w(l(N), {
           "aria-label": "Red",
-          style: y({ background: a(t).hex.value }),
-          class: c(a(i).thumb(e.ui?.thumb))
+          style: x({ background: l(t).hex.value }),
+          class: c(l(i).thumb(e.ui?.thumb))
         }, null, 8, ["style", "class"])
       ]),
       _: 1
     }, 8, ["modelValue", "disabled", "orientation", "class"]));
   }
-}), nt = /* @__PURE__ */ C({
+}), gt = /* @__PURE__ */ V({
   __name: "ColorPickerSliderGreen",
   props: {
     class: {},
     orientation: { default: "horizontal" },
     ui: {}
   },
-  setup(l) {
-    const e = l, t = w(), s = g({
+  setup(a) {
+    const e = a, t = S(), s = m({
       get: () => [t.rgb.value.g],
       set: ([o]) => {
         t.rgb.value = {
@@ -1218,42 +1275,42 @@ const He = ["height", "width"], Xe = /* @__PURE__ */ C({
           g: o
         };
       }
-    }), u = g(() => {
+    }), u = m(() => {
       const o = e.orientation === "vertical" ? "to top" : "to right", r = `rgb(${t.rgb.value.r}, 0, ${t.rgb.value.b})`, n = `rgb(${t.rgb.value.r}, 255, ${t.rgb.value.b})`;
       return `linear-gradient(${o}, ${r}, ${n})`;
     }), i = t.uiSlots("slider", "shared");
-    return (o, r) => ($(), F(a(R), {
+    return (o, r) => (y(), A(l(L), {
       modelValue: s.value,
       "onUpdate:modelValue": r[0] || (r[0] = (n) => s.value = n),
-      disabled: a(t).disabled.value,
+      disabled: l(t).disabled.value,
       max: 255,
       orientation: e.orientation,
-      class: c(a(i).root(e.ui?.root, e.class)),
-      onPointerup: r[1] || (r[1] = (n) => a(t).emitUpdateEnd())
+      class: c(l(i).root(e.ui?.root, e.class)),
+      onValueCommit: r[1] || (r[1] = (n) => l(t).commitValue())
     }, {
-      default: A(() => [
-        S(a(L), {
-          style: y({ background: u.value }),
-          class: c(a(i).track(e.ui?.track))
+      default: F(() => [
+        w(l(G), {
+          style: x({ background: u.value }),
+          class: c(l(i).track(e.ui?.track))
         }, null, 8, ["style", "class"]),
-        S(a(M), {
+        w(l(N), {
           "aria-label": "Green",
-          style: y({ background: a(t).hex.value }),
-          class: c(a(i).thumb(e.ui?.thumb))
+          style: x({ background: l(t).hex.value }),
+          class: c(l(i).thumb(e.ui?.thumb))
         }, null, 8, ["style", "class"])
       ]),
       _: 1
     }, 8, ["modelValue", "disabled", "orientation", "class"]));
   }
-}), rt = /* @__PURE__ */ C({
+}), kt = /* @__PURE__ */ V({
   __name: "ColorPickerSliderBlue",
   props: {
     class: {},
     orientation: { default: "horizontal" },
     ui: {}
   },
-  setup(l) {
-    const e = l, t = w(), s = g({
+  setup(a) {
+    const e = a, t = S(), s = m({
       get: () => [t.rgb.value.b],
       set: ([o]) => {
         t.rgb.value = {
@@ -1261,47 +1318,88 @@ const He = ["height", "width"], Xe = /* @__PURE__ */ C({
           b: o
         };
       }
-    }), u = g(() => {
+    }), u = m(() => {
       const o = e.orientation === "vertical" ? "to top" : "to right", r = `rgb(${t.rgb.value.r}, ${t.rgb.value.g}, 0)`, n = `rgb(${t.rgb.value.r}, ${t.rgb.value.g}, 255)`;
       return `linear-gradient(${o}, ${r}, ${n})`;
     }), i = t.uiSlots("slider", "shared");
-    return (o, r) => ($(), F(a(R), {
+    return (o, r) => (y(), A(l(L), {
       modelValue: s.value,
       "onUpdate:modelValue": r[0] || (r[0] = (n) => s.value = n),
-      disabled: a(t).disabled.value,
+      disabled: l(t).disabled.value,
       max: 255,
       orientation: e.orientation,
-      class: c(a(i).root(e.ui?.root, e.class)),
-      onPointerup: r[1] || (r[1] = (n) => a(t).emitUpdateEnd())
+      class: c(l(i).root(e.ui?.root, e.class)),
+      onValueCommit: r[1] || (r[1] = (n) => l(t).commitValue())
     }, {
-      default: A(() => [
-        S(a(L), {
-          style: y({ background: u.value }),
-          class: c(a(i).track(e.ui?.track))
+      default: F(() => [
+        w(l(G), {
+          style: x({ background: u.value }),
+          class: c(l(i).track(e.ui?.track))
         }, null, 8, ["style", "class"]),
-        S(a(M), {
+        w(l(N), {
           "aria-label": "Blue",
-          style: y({ background: a(t).hex.value }),
-          class: c(a(i).thumb(e.ui?.thumb))
+          style: x({ background: l(t).hex.value }),
+          class: c(l(i).thumb(e.ui?.thumb))
         }, null, 8, ["style", "class"])
       ]),
       _: 1
     }, 8, ["modelValue", "disabled", "orientation", "class"]));
   }
+}), tt = "data:image/svg+xml;utf8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200H3V3H0V0Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M3%200H6V3H3V0Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M3%203H6V6H3V3Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M0%203H3V6H0V3Z%22%20fill%3D%22white%22/%3E%3C/svg%3E%0A", $t = /* @__PURE__ */ V({
+  __name: "ColorPickerSwatch",
+  props: {
+    as: { default: "button" },
+    value: {},
+    class: {},
+    ui: {}
+  },
+  setup(a) {
+    const e = S(), t = a, s = m(() => Z(t.value) || e.rgba.value), u = e.uiSlots("swatch");
+    return (i, o) => (y(), A(l(ae), {
+      as: t.as,
+      disabled: l(e).disabled.value,
+      style: x({ backgroundColor: `rgb(${s.value.r}, ${s.value.g}, ${s.value.b})` }),
+      class: c(l(u).base(t.ui?.base, t.class))
+    }, {
+      default: F(() => [
+        h("span", {
+          style: x({
+            opacity: 1 - s.value.a,
+            background: `url(${l(tt)})`
+          }),
+          class: c(l(u).alpha(t.ui?.alpha))
+        }, null, 6)
+      ]),
+      _: 1
+    }, 8, ["as", "disabled", "style", "class"]));
+  }
 });
 export {
-  Xe as ColorPickerCanvas,
-  Ze as ColorPickerEyeDropper,
-  et as ColorPickerInputHSB,
-  Qe as ColorPickerInputHSL,
-  qe as ColorPickerInputHex,
-  Je as ColorPickerInputRGB,
-  Ye as ColorPickerRoot,
-  tt as ColorPickerSliderAlpha,
-  rt as ColorPickerSliderBlue,
-  nt as ColorPickerSliderGreen,
-  at as ColorPickerSliderHue,
-  ot as ColorPickerSliderLightness,
-  st as ColorPickerSliderRed,
-  lt as ColorPickerSliderSaturation
+  rt as ColorPickerCanvas,
+  ut as ColorPickerEyeDropper,
+  vt as ColorPickerInputHSB,
+  dt as ColorPickerInputHSL,
+  it as ColorPickerInputHex,
+  ct as ColorPickerInputRGB,
+  nt as ColorPickerRoot,
+  pt as ColorPickerSliderAlpha,
+  kt as ColorPickerSliderBlue,
+  gt as ColorPickerSliderGreen,
+  ht as ColorPickerSliderHue,
+  ft as ColorPickerSliderLightness,
+  mt as ColorPickerSliderRed,
+  bt as ColorPickerSliderSaturation,
+  $t as ColorPickerSwatch,
+  se as HSLtoHSV,
+  oe as HSVtoHSL,
+  X as HSVtoRGB,
+  J as HexToRGB,
+  ot as HexaToRGBA,
+  fe as RGBAtoCSS,
+  be as RGBAtoHexa,
+  he as RGBtoHSV,
+  q as RGBtoHex,
+  S as injectColorPickerContext,
+  R as toHex,
+  me as useVModel
 };