x-next 1.10.1 → 1.11.0

package/dist/es/_hooks/use-popup-close.js

@@ -0,0 +1,27 @@
+import { reactive as h, watch as m, onBeforeUnmount as d } from "vue";
+const y = (n, f, u) => {
+  const e = h({ ok: !1, cancel: !1 });
+  let r = 0, l = !1;
+  const c = () => {
+    r++, e.ok = e.cancel = !1;
+  };
+  return m(n, c, { flush: "sync" }), d(() => {
+    l = !0, c();
+  }), { loading: e, requestClose: (s, a) => {
+    if (l || !n.value || e.ok || e.cancel) return;
+    const i = ++r;
+    e[s] = !0;
+    const p = () => !l && n.value && i === r, o = (t) => {
+      p() && (e[s] = !1, t && u(s, a));
+    };
+    try {
+      const t = f(s, a);
+      t && typeof t == "object" && "then" in t ? Promise.resolve(t).then(o, () => o(!1)) : o(t);
+    } catch {
+      o(!1);
+    }
+  } };
+};
+export {
+  y as usePopupClose
+};

package/dist/es/_hooks/use-popup-manager.js

@@ -1,51 +1,53 @@
 var c = Object.defineProperty;
-var i = (o, e, t) => e in o ? c(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var p = (o, e, t) => i(o, typeof e != "symbol" ? e + "" : e, t);
-import { ref as l, watch as g, onMounted as S, onBeforeUnmount as f, readonly as m } from "vue";
-const h = 1e3, k = 3e3, E = 1;
-class _ {
+var l = (o, e, t) => e in o ? c(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var a = (o, e, t) => l(o, typeof e != "symbol" ? e + "" : e, t);
+import { ref as f, watch as g, onMounted as S, onBeforeUnmount as m, readonly as h } from "vue";
+const k = 1e3, E = 3e3, _ = 1;
+class x {
   constructor() {
-    p(this, "popupStack", {
+    a(this, "popupStack", {
       popup: /* @__PURE__ */ new Set(),
       dialog: /* @__PURE__ */ new Set(),
       message: /* @__PURE__ */ new Set()
     });
-    p(this, "getNextZIndex", (e) => (e === "message" ? Array.from(this.popupStack.message).pop() || k : Array.from(this.popupStack.popup).pop() || h) + E);
-    p(this, "add", (e) => {
+    a(this, "getNextZIndex", (e) => (e === "message" ? Array.from(this.popupStack.message).pop() || E : Array.from(this.popupStack.popup).pop() || k) + _);
+    a(this, "add", (e) => {
       const t = this.getNextZIndex(e);
       return this.popupStack[e].add(t), e === "dialog" && this.popupStack.popup.add(t), t;
     });
-    p(this, "delete", (e, t) => {
+    a(this, "delete", (e, t) => {
       this.popupStack[t].delete(e), t === "dialog" && this.popupStack.popup.delete(e);
     });
-    p(this, "isLastDialog", (e) => this.popupStack.dialog.size > 1 ? e === Array.from(this.popupStack.dialog).pop() : !0);
+    a(this, "isLastDialog", (e) => this.popupStack.dialog.size > 1 ? e === Array.from(this.popupStack.dialog).pop() : !0);
   }
 }
-const u = new _();
-function A(o, {
+const s = new x();
+function D(o, {
   visible: e,
   runOnMounted: t
 } = {}) {
-  const a = l(0), n = () => {
-    a.value = u.add(o);
-  }, r = () => {
-    u.delete(a.value, o);
-  }, s = () => o === "dialog" ? u.isLastDialog(a.value) : !1;
+  const p = f(0);
+  let r = !1;
+  const n = () => {
+    r || (p.value = s.add(o), r = !0);
+  }, u = () => {
+    r && (s.delete(p.value, o), r = !1);
+  }, d = () => o === "dialog" ? s.isLastDialog(p.value) : !1;
   return g(
     () => e == null ? void 0 : e.value,
-    (d) => {
-      d ? n() : r();
+    (i) => {
+      i ? n() : u();
     },
     {
       immediate: !0
     }
-  ), t && (S(n), f(r)), {
-    zIndex: m(a),
+  ), t && S(n), m(u), {
+    zIndex: h(p),
     open: n,
-    close: r,
-    isLastDialog: s
+    close: u,
+    isLastDialog: d
   };
 }
 export {
-  A as default
+  D as default
 };

package/dist/es/_hooks/use-popup-theme.js

@@ -0,0 +1,18 @@
+import { inject as m, computed as o } from "vue";
+import { configProviderInjectionKey as r } from "../components/config-provider/context.js";
+const d = () => {
+  const e = m(r, void 0);
+  return {
+    popupThemeStyle: o(() => {
+      var p;
+      return (p = e == null ? void 0 : e.popupTheme) == null ? void 0 : p.value.style;
+    }),
+    popupThemeName: o(() => {
+      var p;
+      return (p = e == null ? void 0 : e.popupTheme) != null && p.value.dark ? "dark" : void 0;
+    })
+  };
+};
+export {
+  d as usePopupTheme
+};

package/dist/es/_hooks/use-teleport-container.js

@@ -1,20 +1,19 @@
-import { ref as c, onMounted as i, watch as v } from "vue";
+import { ref as u, onMounted as f, watch as i } from "vue";
 import { getElement as s } from "../_utils/dom.js";
 const g = ({
   popupContainer: e,
-  visible: u,
+  visible: a,
   defaultContainer: m = "body",
-  documentContainer: f
+  documentContainer: d
 }) => {
-  const t = c(e.value), o = c(), l = () => {
-    const n = s(e.value), r = n ? e.value : m, a = n ?? document.documentElement;
-    r !== t.value && (t.value = r), a !== o.value && (o.value = a);
+  const t = u(e.value), n = u(), o = () => {
+    if (typeof document > "u") return;
+    const r = s(e.value), l = r ? e.value : m, c = r ?? document.documentElement;
+    l !== t.value && (t.value = l), c !== n.value && (n.value = c);
   };
-  return i(() => l()), v(u, (n) => {
-    t.value !== e.value && n && l();
-  }), {
+  return f(() => o()), i([e, a], o, { flush: "post" }), {
     teleportContainer: t,
-    containerRef: o
+    containerRef: n
   };
 };
 export {

package/dist/es/_utils/palette.js

@@ -1,65 +1,70 @@
-import { PALETTE_ALIASES as g, PALETTE_ALIASES_DARK as E } from "../_styles/palette-aliases.js";
-const x = 2.05, d = 95.5, p = 22, A = [1, 0.8, 0.6, 0.4, 0.2], _ = [1 / 3, 2 / 3, 1], b = 90, y = 300, m = (s, a, i) => Math.min(i, Math.max(a, s)), $ = (s) => {
-  if (typeof s != "string") return null;
-  const a = s.trim();
-  if (a.startsWith("#")) {
-    const t = a.slice(1);
+import { PALETTE_ALIASES as x, PALETTE_ALIASES_DARK as b } from "../_styles/palette-aliases.js";
+const y = 2.05, p = 95.5, d = 22, A = [1, 0.8, 0.6, 0.4, 0.2], _ = [1 / 3, 2 / 3, 1], S = 90, H = 300, u = (r, c, i) => Math.min(i, Math.max(c, r)), P = (r) => {
+  if (typeof r != "string") return null;
+  const c = r.trim();
+  if (c.startsWith("#")) {
+    const t = c.slice(1);
     if (!/^(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)) return null;
-    const c = t.length === 3 ? [...t].map((h) => h + h).join("") : t.length === 6 || t.length === 8 ? t.slice(0, 6) : null;
-    return c ? [0, 2, 4].map((h) => parseInt(c.slice(h, h + 2), 16)) : null;
+    const m = t.length === 3 ? [...t].map((a) => a + a).join("") : t.length === 6 || t.length === 8 ? t.slice(0, 6) : null;
+    return m ? [0, 2, 4].map((a) => parseInt(m.slice(a, a + 2), 16)) : null;
   }
-  const i = a.match(/^rgba?\(([^)]+)\)$/i);
+  const i = c.match(/^rgba?\(([^)]+)\)$/i);
   if (!i) return null;
-  const o = i[1].trim(), r = o.includes(",") ? o.split(",").map((t) => t.trim()) : o.split(/\s*\/\s*/)[0].split(/\s+/), e = o.includes(",") ? r[3] : o.includes("/") ? o.split("/")[1].trim() : void 0;
-  if (o.split("/").length > 2 || r.length < 3 || r.length > (o.includes(",") ? 4 : 3)) return null;
-  const n = /^[+-]?(?:\d+\.?\d*|\.\d+)%?$/;
-  if (r.slice(0, 3).some((t) => !n.test(t)) || e !== void 0 && !n.test(e)) return null;
-  const l = r.slice(0, 3).map((t) => t.endsWith("%") ? Math.round(parseFloat(t) / 100 * 255) : Number(t));
-  return l.some((t) => !Number.isFinite(t)) ? null : l.map((t) => m(Math.round(t), 0, 255));
-}, H = ([s, a, i]) => {
-  const o = s / 255, r = a / 255, e = i / 255, n = Math.max(o, r, e), l = Math.min(o, r, e), t = n - l, c = (n + l) / 2;
-  let h = 0, u = 0;
-  return t !== 0 && (u = c > 0.5 ? t / (2 - n - l) : t / (n + l), n === o ? h = (r - e) / t + (r < e ? 6 : 0) : n === r ? h = (e - o) / t + 2 : h = (o - r) / t + 4, h *= 60), { h, s: u * 100, l: c * 100 };
-}, S = ({ h: s, s: a, l: i }) => {
-  const o = m(a, 0, 100) / 100, r = m(i, 0, 100) / 100, e = (s % 360 + 360) % 360, n = (1 - Math.abs(2 * r - 1)) * o, l = n * (1 - Math.abs(e / 60 % 2 - 1)), t = r - n / 2;
-  let c;
-  return e < 60 ? c = [n, l, 0] : e < 120 ? c = [l, n, 0] : e < 180 ? c = [0, n, l] : e < 240 ? c = [0, l, n] : e < 300 ? c = [l, 0, n] : c = [n, 0, l], c.map((h) => m(Math.round((h + t) * 255), 0, 255));
-}, P = (s) => `#${s.map((a) => m(Math.round(a), 0, 255).toString(16).padStart(2, "0")).join("")}`, I = (s) => s <= b || s >= y ? 1 : -1, L = (s, a = {}) => {
-  const i = $(s);
+  const n = i[1].trim(), s = n.includes(",") ? n.split(",").map((t) => t.trim()) : n.split(/\s*\/\s*/)[0].split(/\s+/), e = n.includes(",") ? s[3] : n.includes("/") ? n.split("/")[1].trim() : void 0;
+  if (n.split("/").length > 2 || s.length < 3 || s.length > (n.includes(",") ? 4 : 3)) return null;
+  const o = /^[+-]?(?:\d+\.?\d*|\.\d+)%?$/;
+  if (s.slice(0, 3).some((t) => !o.test(t)) || e !== void 0 && !o.test(e)) return null;
+  const l = s.slice(0, 3).map((t) => t.endsWith("%") ? Math.round(parseFloat(t) / 100 * 255) : Number(t));
+  return l.some((t) => !Number.isFinite(t)) ? null : l.map((t) => u(Math.round(t), 0, 255));
+}, $ = ([r, c, i]) => {
+  const n = r / 255, s = c / 255, e = i / 255, o = Math.max(n, s, e), l = Math.min(n, s, e), t = o - l, m = (o + l) / 2;
+  let a = 0, h = 0;
+  return t !== 0 && (h = m > 0.5 ? t / (2 - o - l) : t / (o + l), o === n ? a = (s - e) / t + (s < e ? 6 : 0) : o === s ? a = (e - n) / t + 2 : a = (n - s) / t + 4, a *= 60), { h: a, s: h * 100, l: m * 100 };
+}, I = ({ h: r, s: c, l: i }) => {
+  const n = u(c, 0, 100) / 100, s = u(i, 0, 100) / 100, e = (r % 360 + 360) % 360, o = (1 - Math.abs(2 * s - 1)) * n, l = o * (1 - Math.abs(e / 60 % 2 - 1)), t = s - o / 2;
+  let m;
+  return e < 60 ? m = [o, l, 0] : e < 120 ? m = [l, o, 0] : e < 180 ? m = [0, o, l] : e < 240 ? m = [0, l, o] : e < 300 ? m = [l, 0, o] : m = [o, 0, l], m.map((a) => u(Math.round((a + t) * 255), 0, 255));
+}, L = (r) => `#${r.map((c) => u(Math.round(c), 0, 255).toString(16).padStart(2, "0")).join("")}`, R = (r) => r <= S || r >= H ? 1 : -1, g = (r, c = {}) => {
+  const i = P(r);
   if (!i)
-    throw new Error(`[x-next] generatePalette: 无法解析种子色 "${s}"`);
-  const { h: o, s: r, l: e } = H(i), n = I(o), { dark: l = !1 } = a, t = l ? Math.min(p, e) : Math.max(d, e), c = l ? Math.max(d, e) : Math.min(p, e), h = [];
-  for (let u = 0; u < 9; u += 1) {
+    throw new Error(`[x-next] generatePalette: 无法解析种子色 "${r}"`);
+  const { h: n, s, l: e } = $(i), o = R(n), { dark: l = !1 } = c, t = l ? Math.min(d, e) : Math.max(p, e), m = l ? Math.max(p, e) : Math.min(d, e), a = [];
+  for (let h = 0; h < 9; h += 1) {
     let f;
-    u < 5 ? f = e + (t - e) * A[u] : u === 5 ? f = e : f = e + (c - e) * _[u - 6];
-    const T = 5 - u, M = n * x * T * (l ? -1 : 1);
-    h.push(P(S({ h: o + M, s: r, l: m(f, 0, 100) })));
+    h < 5 ? f = e + (t - e) * A[h] : h === 5 ? f = e : f = e + (m - e) * _[h - 6];
+    const E = 5 - h, M = o * y * E * (l ? -1 : 1);
+    a.push(L(I({ h: n + M, s, l: u(f, 0, 100) })));
   }
-  return h;
-}, G = (s, a = {}) => {
-  const { name: i = "primary", target: o, dark: r } = a, e = L(s, { dark: r }), n = o ?? (typeof document < "u" ? document.documentElement : null);
-  if (n) {
-    n.style.setProperty(`--x-color-${i}`, e[5]), e.forEach((t, c) => {
-      n.style.setProperty(`--x-color-${i}-${c + 1}`, t);
+  return a;
+}, G = (r, c = {}) => {
+  const { name: i = "primary", target: n, dark: s } = c, e = g(r, { dark: s }), o = n ?? (typeof document < "u" ? document.documentElement : null);
+  if (o) {
+    o.style.setProperty(`--x-color-${i}`, e[5]), e.forEach((l, t) => {
+      o.style.setProperty(`--x-color-${i}-${t + 1}`, l);
     });
-    const l = g[i];
-    if (l) {
-      const t = r ? E[i] : void 0;
-      for (const [c, h] of Object.entries(l))
-        n.style.setProperty(c, (t == null ? void 0 : t[c]) ?? h);
-    }
+    for (const [l, t] of Object.entries(T(i, s)))
+      o.style.setProperty(l, t);
   }
   return e;
-}, W = (s = "primary") => {
-  const a = [`--x-color-${s}`, ...Array.from({ length: 9 }, (o, r) => `--x-color-${s}-${r + 1}`)], i = g[s];
-  return i ? [...a, ...Object.keys(i)] : a;
+}, T = (r, c) => {
+  const i = x[r] ?? {}, n = c ? b[r] : void 0;
+  return Object.fromEntries(
+    Object.entries(i).map(([s, e]) => [s, (n == null ? void 0 : n[s]) ?? e])
+  );
+}, W = (r, c = !1) => {
+  const i = g(r, { dark: c });
+  return {
+    "--x-color-primary": i[5],
+    ...Object.fromEntries(i.map((n, s) => [`--x-color-primary-${s + 1}`, n])),
+    ...T("primary", c)
+  };
 };
 export {
   G as applyThemeColor,
-  L as generatePalette,
-  W as getThemeColorProperties,
-  S as hslToRgb,
-  $ as parseColor,
-  H as rgbToHsl,
-  P as toHex
+  g as generatePalette,
+  W as getThemeColorStyles,
+  I as hslToRgb,
+  P as parseColor,
+  $ as rgbToHsl,
+  L as toHex
 };

package/dist/es/components/color-picker/ColorPicker.js

@@ -1,13 +1,14 @@
-import { defineComponent as L, toRefs as k, ref as C, computed as c, watch as A, createVNode as n } from "vue";
-import { getClassNameMixin as R } from "../../_utils/config.js";
-import { useFormItem as j } from "../../_hooks/use-form-item.js";
-import { useSize as D } from "../../_hooks/use-size.js";
-import { useLocale as G } from "../../locale/index.js";
-import { parseColorAlpha as H, formatColor as v } from "../../_utils/color.js";
-import I from "../trigger/Trigger.js";
-import K from "./panel.js";
-const Y = /* @__PURE__ */ L({
+import { defineComponent as G, toRefs as E, useId as q, ref as w, computed as m, watch as O, createVNode as h, nextTick as J, mergeProps as T } from "vue";
+import { getClassNameMixin as Q } from "../../_utils/config.js";
+import { useFormItem as U, useFormItemControl as X } from "../../_hooks/use-form-item.js";
+import { useSize as Y } from "../../_hooks/use-size.js";
+import { useLocale as Z } from "../../locale/index.js";
+import { parseColorAlpha as ee, formatColor as A } from "../../_utils/color.js";
+import ae from "../trigger/Trigger.js";
+import oe from "./panel.js";
+const de = /* @__PURE__ */ G({
   name: "ColorPicker",
+  inheritAttrs: !1,
   props: {
     /**
      * @zh 颜色值，支持 hex / rgb / hsl（含 alpha）
@@ -116,124 +117,152 @@ const Y = /* @__PURE__ */ L({
     }
   },
   emits: {
-    "update:modelValue": (a, d) => !0,
-    change: (a, d) => !0,
-    "update:show": (a) => !0,
-    showChange: (a) => !0,
-    confirm: (a) => !0,
+    "update:modelValue": (o, n) => !0,
+    change: (o, n) => !0,
+    "update:show": (o) => !0,
+    showChange: (o) => !0,
+    confirm: (o) => !0,
     clear: () => !0
   },
   slots: Object,
-  setup(a, {
-    attrs: d,
-    emit: t,
-    slots: s
+  setup(o, {
+    attrs: n,
+    emit: d,
+    slots: f
   }) {
-    const f = R("color-picker"), {
-      t: u
-    } = G(), {
-      mergedDisabled: g,
-      mergedSize: x,
-      eventHandlers: B
-    } = j({
-      disabled: k(a).disabled,
-      size: k(a).size
-    });
-    D(x);
-    const h = C(a.defaultShow), i = c(() => a.show ?? h.value), m = (e) => {
-      e !== i.value && (h.value = e, t("update:show", e), t("showChange", e));
+    const u = Q("color-picker"), {
+      t: i
+    } = Z(), {
+      formItemCtx: P,
+      mergedDisabled: s,
+      mergedSize: j,
+      mergedError: F,
+      eventHandlers: b
+    } = U({
+      disabled: E(o).disabled,
+      size: E(o).size
+    }), {
+      mergedSize: I
+    } = Y(j), k = `x-color-picker-panel-${q()}`, L = X(P, () => ({
+      ...Object.fromEntries(Object.entries(n).filter(([e]) => e === "id" || e.startsWith("aria-"))),
+      "aria-label": n["aria-label"] ?? (P.labelId ? void 0 : i("colorPicker.trigger"))
+    })), D = () => Object.fromEntries(Object.entries(n).filter(([e]) => e !== "id" && !e.startsWith("aria-") && e !== "class" && e !== "style")), p = w(o.defaultShow), c = m(() => o.show ?? p.value), g = (e) => {
+      e !== c.value && (p.value = e, d("update:show", e), d("showChange", e));
     };
-    A(() => a.show, (e) => {
-      e !== void 0 && e !== h.value && (h.value = e);
+    O(() => o.show, (e) => {
+      e !== void 0 && e !== p.value && (p.value = e);
     });
-    const p = C(a.defaultValue), w = c(() => a.modelValue ?? p.value ?? ""), S = {
+    const x = w(o.defaultValue), V = m(() => o.modelValue ?? x.value ?? ""), N = {
       r: 28,
       g: 97,
       b: 255,
       a: 1
-    }, b = c(() => H(w.value ?? "") ?? S), y = c(() => v(b.value, "hex", a.showAlpha)), _ = (e, l) => {
-      var r, P;
-      const o = v(e, "hex", a.showAlpha);
-      o !== w.value && (p.value = o, t("update:modelValue", o, l), t("change", o, l), (P = (r = B.value) == null ? void 0 : r.onChange) == null || P.call(r, l));
-    }, z = c(() => ({
-      clear: u("colorPicker.clear"),
-      confirm: u("colorPicker.confirm"),
-      hue: u("colorPicker.hue"),
-      alpha: u("colorPicker.alpha"),
-      saturation: u("colorPicker.saturation")
-    })), T = (e, l) => {
-      _(e, l);
-    }, F = (e) => {
-      const l = v(e, "hex", a.showAlpha);
-      p.value = l, t("update:modelValue", l), t("change", l), t("confirm", l), m(!1);
-    }, N = () => {
-      const e = a.defaultValue;
-      p.value = e, t("update:modelValue", e ?? ""), t("change", e ?? ""), t("clear");
-    }, V = C();
-    A(i, (e, l) => {
-      var o, r;
-      l && !e && ((r = (o = V.value) == null ? void 0 : o.focus) == null || r.call(o));
+    }, B = m(() => ee(V.value ?? "") ?? N), S = m(() => A(B.value, "hex", o.showAlpha)), y = (e, a, t = !1) => {
+      var r, l;
+      s.value || !t && e === V.value || (x.value = e, d("update:modelValue", e, a), d("change", e, a), (l = (r = b.value) == null ? void 0 : r.onChange) == null || l.call(r, a));
+    }, R = m(() => ({
+      clear: i("colorPicker.clear"),
+      confirm: i("colorPicker.confirm"),
+      hue: i("colorPicker.hue"),
+      alpha: i("colorPicker.alpha"),
+      saturation: i("colorPicker.saturation")
+    })), K = (e, a) => {
+      y(A(e, "hex", o.showAlpha), a);
+    }, $ = (e) => {
+      const a = A(e, "hex", o.showAlpha);
+      s.value || (y(a, void 0, !0), d("confirm", a), g(!1));
+    }, H = () => {
+      const e = o.defaultValue;
+      s.value || (y(e ?? "", void 0, !0), d("clear"));
+    }, v = w(), C = w(), M = (e) => {
+      s.value || (["Enter", " ", "ArrowDown"].includes(e.key) ? (e.preventDefault(), g(!0), J(() => {
+        var a;
+        return (a = C.value) == null ? void 0 : a.focus();
+      })) : e.key === "Escape" && c.value && (e.preventDefault(), g(!1)));
+    };
+    O(c, (e, a) => {
+      var r, l, _;
+      if (!a || e || typeof document > "u") return;
+      const t = document.activeElement;
+      (t === document.body || t === v.value || (l = (r = C.value) == null ? void 0 : r.$el) != null && l.contains(t)) && ((_ = v.value) == null || _.focus());
     });
-    const O = () => {
-      var o;
-      if (s.trigger)
-        return s.trigger({
-          value: y.value,
-          visible: i.value
-        });
-      const e = (o = s.default) == null ? void 0 : o.call(s), l = n("button", {
-        ref: V,
-        type: "button",
-        class: f.element("trigger"),
-        disabled: g.value,
-        "aria-haspopup": "dialog",
-        "aria-expanded": i.value ? "true" : "false",
-        "aria-label": u("colorPicker.trigger")
-      }, [n("span", {
-        class: f.element("trigger-color"),
+    const z = m(() => ({
+      ...L.value,
+      ref: (e) => {
+        v.value = e instanceof HTMLElement ? e : void 0;
+      },
+      type: "button",
+      disabled: s.value,
+      "aria-haspopup": "dialog",
+      "aria-expanded": c.value,
+      "aria-controls": c.value ? k : void 0,
+      onKeydown: M,
+      onFocus: (e) => {
+        var a, t;
+        return (t = (a = b.value) == null ? void 0 : a.onFocus) == null ? void 0 : t.call(a, e);
+      },
+      onBlur: (e) => {
+        var a, t;
+        return (t = (a = b.value) == null ? void 0 : a.onBlur) == null ? void 0 : t.call(a, e);
+      }
+    })), W = () => {
+      var r, l;
+      const e = (r = f.default) == null ? void 0 : r.call(f), a = (l = f.trigger) == null ? void 0 : l.call(f, {
+        value: S.value,
+        visible: c.value,
+        triggerAttrs: z.value
+      }), t = h("button", T(z.value, {
+        class: u.element("trigger")
+      }), [h("span", {
+        class: u.element("trigger-color"),
         style: {
-          backgroundColor: y.value
+          backgroundColor: S.value
         }
       }, null)]);
-      return e ? n("span", {
-        class: [f.element("trigger-wrapper"), d.class]
-      }, [l, n("span", {
-        class: f.element("trigger-label")
-      }, [e])]) : n("span", {
-        class: d.class
-      }, [l]);
+      return h("span", T(D(), {
+        class: [u.block, u.modifier(`size-${I.value}`), e && u.element("trigger-wrapper"), F.value && u.modifier("error"), n.class],
+        style: n.style
+      }), [a ?? t, e && h("span", {
+        class: u.element("trigger-label")
+      }, [e])]);
     };
-    return () => n(I, {
+    return () => h(ae, {
       trigger: "click",
       position: "bl",
       popupOffset: 4,
       clickToClose: !1,
-      preventFocus: !0,
       autoFitTransformOrigin: !0,
       animationName: "x-zoom-in-fade-out",
-      disabled: g.value,
-      popupVisible: i.value,
-      popupContainer: a.popupContainer,
-      onPopupVisibleChange: m
+      disabled: s.value,
+      popupVisible: c.value,
+      popupContainer: o.popupContainer,
+      onPopupVisibleChange: g,
+      onShow: () => {
+        var e;
+        document.activeElement === v.value && ((e = C.value) == null || e.focus());
+      }
     }, {
-      default: O,
-      content: () => n(K, {
-        value: b.value,
-        modes: a.modes,
-        showAlpha: a.showAlpha,
-        swatches: a.swatches,
-        disabled: g.value,
-        showConfirm: a.showConfirm,
-        showClear: a.showClear,
-        texts: z.value,
-        onChange: T,
-        onConfirm: F,
-        onClear: N,
-        onClose: () => m(!1)
+      default: W,
+      content: () => h(oe, {
+        ref: C,
+        id: k,
+        ariaLabel: i("colorPicker.trigger"),
+        value: B.value,
+        modes: o.modes,
+        showAlpha: o.showAlpha,
+        swatches: o.swatches,
+        disabled: s.value,
+        showConfirm: o.showConfirm,
+        showClear: o.showClear,
+        texts: R.value,
+        onChange: K,
+        onConfirm: $,
+        onClear: H,
+        onClose: () => g(!1)
       }, null)
     });
   }
 });
 export {
-  Y as default
+  de as default
 };