@editora/ui-core 0.1.24 → 0.2.0

package/dist/color-picker.esm.js

@@ -1,17 +1,17 @@
 import { E as q } from "./ElementBase-BeZT54Hj.mjs";
-import { r as O, e as F, l as U, i as A, s as N, c as V } from "./date-time-utils-BTlxnz5j.mjs";
-function g(s, t, e) {
-  return Math.max(t, Math.min(e, s));
+import { r as O, e as F, l as U, i as A, s as N, c as V } from "./date-time-utils-B4hAkt36.mjs";
+function g(o, t, e) {
+  return Math.max(t, Math.min(e, o));
 }
-function m(s, t = 3) {
+function m(o, t = 3) {
   const e = 10 ** t;
-  return Math.round(s * e) / e;
+  return Math.round(o * e) / e;
 }
-function S(s) {
-  return g(Math.round(s), 0, 255);
+function S(o) {
+  return g(Math.round(o), 0, 255);
 }
-function D(s) {
-  const t = s.trim();
+function D(o) {
+  const t = o.trim();
   if (!t) return null;
   if (t.endsWith("%")) {
     const r = Number(t.slice(0, -1));
@@ -20,8 +20,8 @@ function D(s) {
   const e = Number(t);
   return Number.isFinite(e) ? g(e, 0, 1) : null;
 }
-function C(s) {
-  const t = s.trim();
+function C(o) {
+  const t = o.trim();
   if (!t) return null;
   if (t.endsWith("%")) {
     const r = Number(t.slice(0, -1));
@@ -30,14 +30,14 @@ function C(s) {
   const e = Number(t);
   return Number.isFinite(e) ? S(e) : null;
 }
-function B(s) {
-  const t = s.trim();
+function B(o) {
+  const t = o.trim();
   if (!t.endsWith("%")) return null;
   const e = Number(t.slice(0, -1));
   return Number.isFinite(e) ? g(e, 0, 100) : null;
 }
-function W(s) {
-  const t = s.trim().toLowerCase();
+function W(o) {
+  const t = o.trim().toLowerCase();
   if (!t) return null;
   if (t.endsWith("deg")) {
     const r = Number(t.slice(0, -3));
@@ -54,12 +54,12 @@ function W(s) {
   const e = Number(t);
   return Number.isFinite(e) ? y(e) : null;
 }
-function y(s) {
-  const t = s % 360;
+function y(o) {
+  const t = o % 360;
   return t < 0 ? t + 360 : t;
 }
-function T(s) {
-  const t = s.trim();
+function T(o) {
+  const t = o.trim();
   if (!t) return null;
   if (t.includes("/")) {
     const [r, i] = t.split("/");
@@ -83,18 +83,18 @@ function T(s) {
     alpha: e[3] ?? null
   };
 }
-function K(s) {
-  const t = s.trim().replace(/^#/, "");
+function K(o) {
+  const t = o.trim().replace(/^#/, "");
   if (![3, 4, 6, 8].includes(t.length) || !/^[0-9a-f]+$/i.test(t)) return null;
   if (t.length === 3 || t.length === 4) {
-    const n = parseInt(t[0] + t[0], 16), o = parseInt(t[1] + t[1], 16), l = parseInt(t[2] + t[2], 16), c = t.length === 4 ? parseInt(t[3] + t[3], 16) / 255 : 1;
-    return b({ r: n, g: o, b: l, a: c });
+    const n = parseInt(t[0] + t[0], 16), s = parseInt(t[1] + t[1], 16), l = parseInt(t[2] + t[2], 16), c = t.length === 4 ? parseInt(t[3] + t[3], 16) / 255 : 1;
+    return b({ r: n, g: s, b: l, a: c });
   }
   const e = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16), a = t.length === 8 ? parseInt(t.slice(6, 8), 16) / 255 : 1;
   return b({ r: e, g: r, b: i, a });
 }
-function G(s) {
-  const t = /^rgba?\((.+)\)$/i.exec(s.trim());
+function G(o) {
+  const t = /^rgba?\((.+)\)$/i.exec(o.trim());
   if (!t) return null;
   const e = T(t[1]);
   if (!e || e.channels.length < 3) return null;
@@ -103,8 +103,8 @@ function G(s) {
   const n = e.alpha != null ? D(e.alpha) : 1;
   return n == null ? null : b({ r, g: i, b: a, a: n });
 }
-function X(s) {
-  const t = /^hsla?\((.+)\)$/i.exec(s.trim());
+function X(o) {
+  const t = /^hsla?\((.+)\)$/i.exec(o.trim());
   if (!t) return null;
   const e = T(t[1]);
   if (!e || e.channels.length < 3) return null;
@@ -113,35 +113,35 @@ function X(s) {
   const n = e.alpha != null ? D(e.alpha) : 1;
   return n == null ? null : $({ h: r, s: i, l: a, a: n });
 }
-function b(s) {
+function b(o) {
   return {
-    r: S(s.r),
-    g: S(s.g),
-    b: S(s.b),
-    a: m(g(s.a, 0, 1), 4)
+    r: S(o.r),
+    g: S(o.g),
+    b: S(o.b),
+    a: m(g(o.a, 0, 1), 4)
   };
 }
-function f(s) {
-  const t = (s || "").trim();
+function v(o) {
+  const t = (o || "").trim();
   return t ? t.startsWith("#") ? K(t) : /^rgba?\(/i.test(t) ? G(t) : /^hsla?\(/i.test(t) ? X(t) : null : null;
 }
-function Y(s, t = !1) {
-  const e = b(s), r = (a) => a.toString(16).padStart(2, "0"), i = `#${r(e.r)}${r(e.g)}${r(e.b)}`;
+function Y(o, t = !1) {
+  const e = b(o), r = (a) => a.toString(16).padStart(2, "0"), i = `#${r(e.r)}${r(e.g)}${r(e.b)}`;
   return t ? `${i}${r(Math.round(e.a * 255))}` : i;
 }
-function j(s, t = !0) {
-  const e = b(s);
+function j(o, t = !0) {
+  const e = b(o);
   return !t || e.a >= 1 ? `rgb(${e.r} ${e.g} ${e.b})` : `rgb(${e.r} ${e.g} ${e.b} / ${m(e.a, 3)})`;
 }
-function J(s, t = !0) {
-  const e = Math.round(y(s.h)), r = Math.round(g(s.s, 0, 100)), i = Math.round(g(s.l, 0, 100)), a = m(g(s.a, 0, 1), 3);
+function J(o, t = !0) {
+  const e = Math.round(y(o.h)), r = Math.round(g(o.s, 0, 100)), i = Math.round(g(o.l, 0, 100)), a = m(g(o.a, 0, 1), 3);
   return !t || a >= 1 ? `hsl(${e} ${r}% ${i}%)` : `hsl(${e} ${r}% ${i}% / ${a})`;
 }
-function z(s) {
-  const t = b(s), e = t.r / 255, r = t.g / 255, i = t.b / 255, a = Math.max(e, r, i), n = Math.min(e, r, i), o = a - n;
+function z(o) {
+  const t = b(o), e = t.r / 255, r = t.g / 255, i = t.b / 255, a = Math.max(e, r, i), n = Math.min(e, r, i), s = a - n;
   let l = 0;
-  o !== 0 && (a === e ? l = (r - i) / o % 6 : a === r ? l = (i - e) / o + 2 : l = (e - r) / o + 4, l *= 60, l < 0 && (l += 360));
-  const c = a === 0 ? 0 : o / a * 100, p = a * 100;
+  s !== 0 && (a === e ? l = (r - i) / s % 6 : a === r ? l = (i - e) / s + 2 : l = (e - r) / s + 4, l *= 60, l < 0 && (l += 360));
+  const c = a === 0 ? 0 : s / a * 100, p = a * 100;
   return {
     h: m(l, 3),
     s: m(c, 3),
@@ -149,44 +149,44 @@ function z(s) {
     a: t.a
   };
 }
-function Q(s) {
-  const t = y(s.h), e = g(s.s, 0, 100) / 100, r = g(s.v, 0, 100) / 100, i = r * e, a = i * (1 - Math.abs(t / 60 % 2 - 1)), n = r - i;
-  let o = 0, l = 0, c = 0;
-  return t < 60 ? (o = i, l = a) : t < 120 ? (o = a, l = i) : t < 180 ? (l = i, c = a) : t < 240 ? (l = a, c = i) : t < 300 ? (o = a, c = i) : (o = i, c = a), b({
-    r: (o + n) * 255,
+function Q(o) {
+  const t = y(o.h), e = g(o.s, 0, 100) / 100, r = g(o.v, 0, 100) / 100, i = r * e, a = i * (1 - Math.abs(t / 60 % 2 - 1)), n = r - i;
+  let s = 0, l = 0, c = 0;
+  return t < 60 ? (s = i, l = a) : t < 120 ? (s = a, l = i) : t < 180 ? (l = i, c = a) : t < 240 ? (l = a, c = i) : t < 300 ? (s = a, c = i) : (s = i, c = a), b({
+    r: (s + n) * 255,
     g: (l + n) * 255,
     b: (c + n) * 255,
-    a: s.a
+    a: o.a
   });
 }
-function M(s) {
-  const t = b(s), e = t.r / 255, r = t.g / 255, i = t.b / 255, a = Math.max(e, r, i), n = Math.min(e, r, i), o = a - n, l = (a + n) / 2;
+function M(o) {
+  const t = b(o), e = t.r / 255, r = t.g / 255, i = t.b / 255, a = Math.max(e, r, i), n = Math.min(e, r, i), s = a - n, l = (a + n) / 2;
   let c = 0, p = 0;
-  return o !== 0 && (p = o / (1 - Math.abs(2 * l - 1)), a === e ? c = (r - i) / o % 6 : a === r ? c = (i - e) / o + 2 : c = (e - r) / o + 4, c *= 60, c < 0 && (c += 360)), {
+  return s !== 0 && (p = s / (1 - Math.abs(2 * l - 1)), a === e ? c = (r - i) / s % 6 : a === r ? c = (i - e) / s + 2 : c = (e - r) / s + 4, c *= 60, c < 0 && (c += 360)), {
     h: m(c, 3),
     s: m(p * 100, 3),
     l: m(l * 100, 3),
     a: t.a
   };
 }
-function $(s) {
-  const t = y(s.h), e = g(s.s, 0, 100) / 100, r = g(s.l, 0, 100) / 100, i = (1 - Math.abs(2 * r - 1)) * e, a = i * (1 - Math.abs(t / 60 % 2 - 1)), n = r - i / 2;
-  let o = 0, l = 0, c = 0;
-  return t < 60 ? (o = i, l = a) : t < 120 ? (o = a, l = i) : t < 180 ? (l = i, c = a) : t < 240 ? (l = a, c = i) : t < 300 ? (o = a, c = i) : (o = i, c = a), b({
-    r: (o + n) * 255,
+function $(o) {
+  const t = y(o.h), e = g(o.s, 0, 100) / 100, r = g(o.l, 0, 100) / 100, i = (1 - Math.abs(2 * r - 1)) * e, a = i * (1 - Math.abs(t / 60 % 2 - 1)), n = r - i / 2;
+  let s = 0, l = 0, c = 0;
+  return t < 60 ? (s = i, l = a) : t < 120 ? (s = a, l = i) : t < 180 ? (l = i, c = a) : t < 240 ? (l = a, c = i) : t < 300 ? (s = a, c = i) : (s = i, c = a), b({
+    r: (s + n) * 255,
     g: (l + n) * 255,
     b: (c + n) * 255,
-    a: s.a
+    a: o.a
   });
 }
-function _(s, t) {
-  return Y(s, t).toUpperCase();
+function _(o, t) {
+  return Y(o, t).toUpperCase();
 }
-function w(s, t) {
-  return j(s, t);
+function w(o, t) {
+  return j(o, t);
 }
-function Z(s, t) {
-  return J(M(s), t);
+function Z(o, t) {
+  return J(M(o), t);
 }
 const I = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
@@ -194,15 +194,15 @@ const I = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
   </svg>
 `, H = `
   :host {
-    --ui-cp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
-    --ui-cp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-cp-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-cp-border: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
     --ui-cp-text: var(--ui-color-text, #0f172a);
     --ui-cp-muted: var(--ui-color-muted, #526175);
     --ui-cp-accent: var(--ui-color-primary, #2563eb);
     --ui-cp-success: var(--ui-color-success, #15803d);
     --ui-cp-warning: var(--ui-color-warning, #b45309);
     --ui-cp-danger: var(--ui-color-danger, #dc2626);
-    --ui-cp-radius: 14px;
+    --ui-cp-radius: calc(var(--ui-radius, 6px) + 2px);
     --ui-cp-shadow: none;
     --ui-cp-padding: 10px;
     --ui-cp-duration: 160ms;
@@ -457,7 +457,7 @@ const I = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
     color: var(--ui-cp-text);
     min-inline-size: 32px;
     block-size: 30px;
-    border-radius: 9px;
+    border-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
     padding: 0 8px;
     display: inline-grid;
     place-items: center;
@@ -497,7 +497,7 @@ const I = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
     position: relative;
     inline-size: 100%;
     block-size: clamp(128px, 16vw, 156px);
-    border-radius: 10px;
+    border-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
     border: 1px solid color-mix(in srgb, var(--ui-cp-border) 82%, transparent);
     overflow: visible;
     cursor: crosshair;
@@ -602,7 +602,7 @@ const I = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
     display: inline-grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     border: 1px solid color-mix(in srgb, var(--ui-cp-border) 84%, transparent);
-    border-radius: 10px;
+    border-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
     overflow: hidden;
   }
 
@@ -618,6 +618,11 @@ const I = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
       color var(--ui-cp-duration) var(--ui-cp-ease);
   }
 
+  .tab:hover:not([data-active="true"]) {
+    background: color-mix(in srgb, var(--ui-cp-accent) 8%, transparent);
+    color: var(--ui-cp-text);
+  }
+
   .tab[data-active="true"] {
     background: color-mix(in srgb, var(--ui-cp-accent) 15%, transparent);
     color: var(--ui-cp-text);
@@ -665,7 +670,7 @@ const I = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
     min-inline-size: 0;
     inline-size: 100%;
     min-block-size: 28px;
-    border-radius: 8px;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     border: 1px solid color-mix(in srgb, var(--ui-cp-border) 86%, transparent);
     background: color-mix(in srgb, var(--ui-cp-bg) 95%, transparent);
     color: var(--ui-cp-text);
@@ -714,9 +719,7 @@ const I = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
   }
 
   .swatch:hover {
-    transform: translateY(-1px);
-    border-color: color-mix(in srgb, var(--ui-cp-accent) 40%, var(--ui-cp-border));
-    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.18);
+    border-color: color-mix(in srgb, var(--ui-cp-accent) 55%, var(--ui-cp-border));
   }
 
   .swatch[data-selected="true"] {
@@ -747,7 +750,7 @@ const I = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
 
   .actions .btn {
     min-block-size: 28px;
-    border-radius: 9px;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     border: 1px solid color-mix(in srgb, var(--ui-cp-border) 84%, transparent);
     background: color-mix(in srgb, var(--ui-cp-bg) 95%, transparent);
     color: var(--ui-cp-text);
@@ -760,9 +763,25 @@ const I = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
       color var(--ui-cp-duration) var(--ui-cp-ease);
   }
 
+  .actions .btn:hover {
+    background: color-mix(in srgb, var(--ui-cp-accent) 10%, var(--ui-cp-bg));
+    border-color: color-mix(in srgb, var(--ui-cp-accent) 34%, var(--ui-cp-border));
+  }
+
+  .actions .btn[data-tone="primary"]:hover {
+    border-color: transparent;
+    background: color-mix(in srgb, var(--ui-color-primary, var(--ui-cp-accent)) 88%, #000);
+  }
+
+  .actions .btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-cp-accent) 64%, transparent);
+    outline-offset: 2px;
+  }
+
   .actions .btn[data-tone="primary"] {
-    border-color: color-mix(in srgb, var(--ui-cp-accent) 62%, transparent);
-    background: color-mix(in srgb, var(--ui-cp-accent) 18%, transparent);
+    border-color: transparent;
+    background: var(--ui-color-primary, var(--ui-cp-accent));
+    color: var(--ui-color-foreground-on-primary, #ffffff);
   }
 
   .actions .btn[hidden] {
@@ -897,18 +916,18 @@ const I = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
     overflow: auto;
   }
 `;
-function u(s, t, e) {
-  return Math.max(t, Math.min(e, s));
+function u(o, t, e) {
+  return Math.max(t, Math.min(e, o));
 }
-function E(s, t) {
-  return Math.abs(s - t) <= 5e-4;
+function E(o, t) {
+  return Math.abs(o - t) <= 5e-4;
 }
-function k(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function k(o) {
+  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 class rt extends q {
   constructor() {
-    super(), this._syncing = !1, this._initialized = !1, this._rgba = b(f(I) || { r: 37, g: 99, b: 235, a: 1 }), this._hsva = z(this._rgba), this._format = "hex", this._open = !1, this._error = "", this._presets = [], this._recentColors = [], this._panelCache = /* @__PURE__ */ new WeakMap(), this._overlay = null, this._overlayRoot = null, this._releaseScrollLock = null, this._restoreFocusEl = null, this._isSheetOpen = !1, this._dragTarget = null, this._dragPointerId = -1, this._dragRect = null, this._dragX = 0, this._dragY = 0, this._dragRaf = 0, this._dragChanged = !1, this._dragSource = "drag", this._renderingSwatches = !1, this._scheduleOverlayPosition = O(() => this._positionOverlay()), this._onRootClickBound = (t) => this._onPanelClick(t, "root"), this._onRootInputBound = (t) => this._onPanelInput(t, "root"), this._onRootChangeBound = (t) => this._onPanelChange(t, "root"), this._onRootKeyDownBound = (t) => this._onPanelKeyDown(t, "root"), this._onRootPointerDownBound = (t) => this._onPanelPointerDown(t, "root"), this._onRootPointerMoveBound = (t) => this._onPanelPointerMove(t), this._onRootPointerUpBound = (t) => this._onPanelPointerUp(t), this._onRootPointerCancelBound = (t) => this._onPanelPointerCancel(t), this._onDocumentPointerDownBound = (t) => this._onDocumentPointerDown(t), this._onDocumentKeyDownBound = (t) => this._onDocumentKeyDown(t), this._onWindowResizeBound = () => this._scheduleOverlayPosition.run(), this._onWindowScrollBound = (t) => {
+    super(), this._syncing = !1, this._initialized = !1, this._rgba = b(v(I) || { r: 37, g: 99, b: 235, a: 1 }), this._hsva = z(this._rgba), this._format = "hex", this._open = !1, this._error = "", this._presets = [], this._recentColors = [], this._panelCache = /* @__PURE__ */ new WeakMap(), this._overlay = null, this._overlayRoot = null, this._releaseScrollLock = null, this._restoreFocusEl = null, this._isSheetOpen = !1, this._dragTarget = null, this._dragPointerId = -1, this._dragRect = null, this._dragX = 0, this._dragY = 0, this._dragRaf = 0, this._dragChanged = !1, this._dragSource = "drag", this._renderingSwatches = !1, this._scheduleOverlayPosition = O(() => this._positionOverlay()), this._onRootClickBound = (t) => this._onPanelClick(t, "root"), this._onRootInputBound = (t) => this._onPanelInput(t, "root"), this._onRootChangeBound = (t) => this._onPanelChange(t, "root"), this._onRootKeyDownBound = (t) => this._onPanelKeyDown(t, "root"), this._onRootPointerDownBound = (t) => this._onPanelPointerDown(t, "root"), this._onRootPointerMoveBound = (t) => this._onPanelPointerMove(t), this._onRootPointerUpBound = (t) => this._onPanelPointerUp(t), this._onRootPointerCancelBound = (t) => this._onPanelPointerCancel(t), this._onDocumentPointerDownBound = (t) => this._onDocumentPointerDown(t), this._onDocumentKeyDownBound = (t) => this._onDocumentKeyDown(t), this._onWindowResizeBound = () => this._scheduleOverlayPosition.run(), this._onWindowScrollBound = (t) => {
       F(t, [this._overlay]) || this._scheduleOverlayPosition.run();
     }, this._applyValueAttribute(!1), this._applyFormatAttribute(), this._open = this.hasAttribute("open"), this._parsePresetsAttribute();
   }
@@ -994,7 +1013,7 @@ class rt extends q {
     this._setOpen(t, "api");
   }
   setColor(t) {
-    const e = f(t || "");
+    const e = v(t || "");
     if (!e) {
       this._setInvalid(t, "Invalid color format");
       return;
@@ -1218,10 +1237,10 @@ class rt extends q {
   _applyValueAttribute(t) {
     const e = this.getAttribute("value");
     if (!e) {
-      this._applyRgba(f(I) || this._rgba, !1);
+      this._applyRgba(v(I) || this._rgba, !1);
       return;
     }
-    const r = f(e);
+    const r = v(e);
     if (!r) {
       t && this._setInvalid(e, "Unable to parse color value");
       return;
@@ -1243,7 +1262,7 @@ class rt extends q {
       const r = [];
       for (const i of e) {
         if (typeof i != "string") continue;
-        const a = f(i);
+        const a = v(i);
         if (!a) continue;
         const n = _(this._normalizeByAlpha(a), this._alphaEnabled());
         r.includes(n) || r.push(n);
@@ -1264,7 +1283,7 @@ class rt extends q {
         if (!t) return;
         const e = JSON.parse(t);
         if (!Array.isArray(e)) return;
-        this._recentColors = e.filter((r) => typeof r == "string").map((r) => f(r)).filter((r) => !!r).map((r) => _(this._normalizeByAlpha(r), this._alphaEnabled())).slice(0, this._maxRecent());
+        this._recentColors = e.filter((r) => typeof r == "string").map((r) => v(r)).filter((r) => !!r).map((r) => _(this._normalizeByAlpha(r), this._alphaEnabled())).slice(0, this._maxRecent());
       } catch {
         this._recentColors = [];
       }
@@ -1479,12 +1498,12 @@ class rt extends q {
     return this._isPopoverMode() && this._open && this._overlayRoot ? this._overlayRoot.querySelector('[data-cp-panel="overlay"]') : this.root.querySelector('[data-cp-panel="inline"]');
   }
   _updateUI(t, e = !1) {
-    const r = this.root.querySelector('[data-role="trigger-wrap"]'), i = this.root.querySelector(".trigger"), a = this.root.querySelector('[data-role="trigger-value"]'), n = this.root.querySelector('[data-role="trigger-preview"]'), o = this.root.querySelector('[data-role="inline-panel"]'), l = this._isPopoverMode(), c = this._state(), p = this._tone(), v = c === "loading", h = this._isDisabled(), x = this._isReadonly(), R = this._serializeValue() || this._placeholder();
-    r && (r.hidden = !l), i && (i.disabled = h || v, i.dataset.state = c, i.dataset.tone = p, i.setAttribute("aria-expanded", l && this._open ? "true" : "false"), this._applyAria(i, R)), a && (a.textContent = R), n && (n.style.background = w(this._rgba, !0)), o && (o.hidden = l), this._forEachPanel((d) => this._updatePanel(d, { skipSwatches: t, disabled: h, readonly: x, loading: v, state: c, tone: p, modePopover: l, liveOnly: e }));
+    const r = this.root.querySelector('[data-role="trigger-wrap"]'), i = this.root.querySelector(".trigger"), a = this.root.querySelector('[data-role="trigger-value"]'), n = this.root.querySelector('[data-role="trigger-preview"]'), s = this.root.querySelector('[data-role="inline-panel"]'), l = this._isPopoverMode(), c = this._state(), p = this._tone(), f = c === "loading", h = this._isDisabled(), x = this._isReadonly(), R = this._serializeValue() || this._placeholder();
+    r && (r.hidden = !l), i && (i.disabled = h || f, i.dataset.state = c, i.dataset.tone = p, i.setAttribute("aria-expanded", l && this._open ? "true" : "false"), this._applyAria(i, R)), a && (a.textContent = R), n && (n.style.background = w(this._rgba, !0)), s && (s.hidden = l), this._forEachPanel((d) => this._updatePanel(d, { skipSwatches: t, disabled: h, readonly: x, loading: f, state: c, tone: p, modePopover: l, liveOnly: e }));
   }
   _updatePanel(t, e) {
-    const r = this._rgba, i = M(r), a = this._hsva, n = `hsl(${Math.round(a.h)} 100% 50%)`, o = t.panel.getAttribute("data-cp-panel") === "overlay", l = !!this._error || e.state === "error", c = e.disabled || e.readonly || e.loading;
-    if (this._applyAria(t.panel), t.panel.dataset.state = l ? "error" : e.state, t.panel.dataset.tone = e.tone, t.panel.setAttribute("aria-busy", e.loading ? "true" : "false"), o && e.modePopover ? (t.panel.setAttribute("role", "dialog"), t.panel.setAttribute("aria-modal", "true"), t.panel.tabIndex = -1) : (t.panel.removeAttribute("role"), t.panel.removeAttribute("aria-modal"), t.panel.removeAttribute("tabindex")), t.label && (t.label.textContent = this._labelText()), t.valueText && (t.valueText.textContent = this._serializeValue()), t.preview && (t.preview.style.background = w(r, !0)), t.status) {
+    const r = this._rgba, i = M(r), a = this._hsva, n = `hsl(${Math.round(a.h)} 100% 50%)`, s = t.panel.getAttribute("data-cp-panel") === "overlay", l = !!this._error || e.state === "error", c = e.disabled || e.readonly || e.loading;
+    if (this._applyAria(t.panel), t.panel.dataset.state = l ? "error" : e.state, t.panel.dataset.tone = e.tone, t.panel.setAttribute("aria-busy", e.loading ? "true" : "false"), s && e.modePopover ? (t.panel.setAttribute("role", "dialog"), t.panel.setAttribute("aria-modal", "true"), t.panel.tabIndex = -1) : (t.panel.removeAttribute("role"), t.panel.removeAttribute("aria-modal"), t.panel.removeAttribute("tabindex")), t.label && (t.label.textContent = this._labelText()), t.valueText && (t.valueText.textContent = this._serializeValue()), t.preview && (t.preview.style.background = w(r, !0)), t.status) {
       let d = "";
       l ? d = "Error" : e.state === "loading" ? d = "Syncing" : e.state === "success" && (d = "Saved"), t.status.hidden = !d, t.status.textContent = d, t.status.dataset.tone = e.tone;
     }
@@ -1499,7 +1518,7 @@ class rt extends q {
         linear-gradient(-45deg, transparent 75%, var(--ui-cp-checker-a) 75%),
         linear-gradient(to right, rgba(${r.r}, ${r.g}, ${r.b}, 0), rgba(${r.r}, ${r.g}, ${r.b}, 1))
       `), t.alphaThumb && (t.alphaThumb.style.left = `${u(a.a * 100, 1, 99)}%`);
-    const p = t.panel.getRootNode(), v = p instanceof ShadowRoot ? p.activeElement : t.panel.ownerDocument.activeElement, h = v && t.panel.contains(v) ? v.getAttribute("data-input") : null;
+    const p = t.panel.getRootNode(), f = p instanceof ShadowRoot ? p.activeElement : t.panel.ownerDocument.activeElement, h = f && t.panel.contains(f) ? f.getAttribute("data-input") : null;
     if (t.inputHex && h !== "hex" && (t.inputHex.value = _(r, this._alphaEnabled())), t.inputR && h !== "r" && (t.inputR.value = String(r.r)), t.inputG && h !== "g" && (t.inputG.value = String(r.g)), t.inputB && h !== "b" && (t.inputB.value = String(r.b)), t.inputA1 && h !== "a1" && (t.inputA1.value = this._alphaEnabled() ? String(Number(r.a.toFixed(3))) : "1"), t.inputH && h !== "h" && (t.inputH.value = String(Math.round(i.h))), t.inputS && h !== "s" && (t.inputS.value = String(Math.round(i.s))), t.inputL && h !== "l" && (t.inputL.value = String(Math.round(i.l))), t.inputA2 && h !== "a2" && (t.inputA2.value = this._alphaEnabled() ? String(Number(r.a.toFixed(3))) : "1"), e.liveOnly) return;
     if (t.tabHex && (t.tabHex.dataset.active = String(this._format === "hex")), t.tabRgb && (t.tabRgb.dataset.active = String(this._format === "rgb")), t.tabHsl && (t.tabHsl.dataset.active = String(this._format === "hsl")), t.groupHex && (t.groupHex.hidden = this._format !== "hex"), t.groupRgb && (t.groupRgb.hidden = this._format !== "rgb"), t.groupHsl && (t.groupHsl.hidden = this._format !== "hsl"), t.inputA1 && (t.inputA1.disabled = !this._alphaEnabled() || c), t.inputA2 && (t.inputA2.disabled = !this._alphaEnabled() || c), t.error) {
       const d = this._error || (e.state === "error" ? "Unable to validate current color value." : "");
@@ -1525,12 +1544,12 @@ class rt extends q {
   _renderSwatches(t) {
     const e = this._currentHex().toLowerCase();
     t.presets && (t.presets.innerHTML = this._presets.map((r) => {
-      const i = f(r);
+      const i = v(r);
       if (!i) return "";
       const a = _(this._normalizeByAlpha(i), this._alphaEnabled()), n = a.toLowerCase() === e ? ' data-selected="true"' : "";
       return `<button type="button" class="swatch" part="swatch" data-action="preset" data-color="${k(a)}"${n} title="${k(a)}" style="background:${k(w(i, !0))}"></button>`;
     }).join("")), t.recentTitle && (t.recentTitle.hidden = !this._recentEnabled() || this._recentColors.length === 0), t.recent && (t.recent.hidden = !this._recentEnabled() || this._recentColors.length === 0, t.recent.innerHTML = this._recentColors.map((r) => {
-      const i = f(r);
+      const i = v(r);
       if (!i) return "";
       const a = _(this._normalizeByAlpha(i), this._alphaEnabled()), n = a.toLowerCase() === e ? ' data-selected="true"' : "";
       return `<button type="button" class="swatch" part="swatch recent" data-action="recent" data-color="${k(a)}"${n} title="${k(a)}" style="background:${k(w(i, !0))}"></button>`;
@@ -1572,7 +1591,7 @@ class rt extends q {
       }
       if (a === "clear") {
         if (this._isReadonly()) return;
-        const n = f(I);
+        const n = v(I);
         n && (this._applyRgba(n, !1), this._error = "", this._syncValueAttribute(), this._emitInput("text"), this._emitChange("text"), this._pushRecent(this._currentHex()), this._updateUI(!1));
         return;
       }
@@ -1582,10 +1601,10 @@ class rt extends q {
       }
       if (a === "preset" || a === "recent") {
         if (this._isReadonly()) return;
-        const n = i.getAttribute("data-color") || "", o = f(n);
-        if (!o) return;
+        const n = i.getAttribute("data-color") || "", s = v(n);
+        if (!s) return;
         const l = a === "preset" ? "preset" : "recent";
-        this._applyRgba(o, !0), this._error = "", this._syncValueAttribute(), this._emitInput(l), this._emitChange(l), this._pushRecent(this._currentHex()), this._updateUI(!1);
+        this._applyRgba(s, !0), this._error = "", this._syncValueAttribute(), this._emitInput(l), this._emitChange(l), this._pushRecent(this._currentHex()), this._updateUI(!1);
         return;
       }
     }
@@ -1628,18 +1647,18 @@ class rt extends q {
     if (!i || this._isReadonly() || this._isLoading()) return;
     const a = t.shiftKey ? 5 : 1;
     let n = !1;
-    const o = { ...this._hsva };
+    const s = { ...this._hsva };
     if (i === "sv") {
-      t.key === "ArrowLeft" ? (o.s = u(o.s - a, 0, 100), n = !0) : t.key === "ArrowRight" ? (o.s = u(o.s + a, 0, 100), n = !0) : t.key === "ArrowUp" ? (o.v = u(o.v + a, 0, 100), n = !0) : t.key === "ArrowDown" ? (o.v = u(o.v - a, 0, 100), n = !0) : t.key === "Home" ? (o.s = 0, o.v = 100, n = !0) : t.key === "End" && (o.s = 100, o.v = 0, n = !0), n && (t.preventDefault(), this._commitHsva(o, "drag"));
+      t.key === "ArrowLeft" ? (s.s = u(s.s - a, 0, 100), n = !0) : t.key === "ArrowRight" ? (s.s = u(s.s + a, 0, 100), n = !0) : t.key === "ArrowUp" ? (s.v = u(s.v + a, 0, 100), n = !0) : t.key === "ArrowDown" ? (s.v = u(s.v - a, 0, 100), n = !0) : t.key === "Home" ? (s.s = 0, s.v = 100, n = !0) : t.key === "End" && (s.s = 100, s.v = 0, n = !0), n && (t.preventDefault(), this._commitHsva(s, "drag"));
       return;
     }
     if (i === "hue") {
-      t.key === "ArrowLeft" || t.key === "ArrowDown" ? (o.h = u(o.h - a, 0, 360), n = !0) : t.key === "ArrowRight" || t.key === "ArrowUp" ? (o.h = u(o.h + a, 0, 360), n = !0) : t.key === "Home" ? (o.h = 0, n = !0) : t.key === "End" && (o.h = 360, n = !0), n && (t.preventDefault(), this._commitHsva(o, "slider"));
+      t.key === "ArrowLeft" || t.key === "ArrowDown" ? (s.h = u(s.h - a, 0, 360), n = !0) : t.key === "ArrowRight" || t.key === "ArrowUp" ? (s.h = u(s.h + a, 0, 360), n = !0) : t.key === "Home" ? (s.h = 0, n = !0) : t.key === "End" && (s.h = 360, n = !0), n && (t.preventDefault(), this._commitHsva(s, "slider"));
       return;
     }
     if (i === "alpha" && this._alphaEnabled()) {
       const l = t.shiftKey ? 0.1 : 0.01;
-      t.key === "ArrowLeft" || t.key === "ArrowDown" ? (o.a = u(o.a - l, 0, 1), n = !0) : t.key === "ArrowRight" || t.key === "ArrowUp" ? (o.a = u(o.a + l, 0, 1), n = !0) : t.key === "Home" ? (o.a = 0, n = !0) : t.key === "End" && (o.a = 1, n = !0), n && (t.preventDefault(), this._commitHsva(o, "slider"));
+      t.key === "ArrowLeft" || t.key === "ArrowDown" ? (s.a = u(s.a - l, 0, 1), n = !0) : t.key === "ArrowRight" || t.key === "ArrowUp" ? (s.a = u(s.a + l, 0, 1), n = !0) : t.key === "Home" ? (s.a = 0, n = !0) : t.key === "End" && (s.a = 1, n = !0), n && (t.preventDefault(), this._commitHsva(s, "slider"));
     }
   }
   _commitHsva(t, e) {
@@ -1649,22 +1668,22 @@ class rt extends q {
     if (!t) return null;
     const e = this._panelRefs(t);
     if (this._format === "hex") {
-      const l = e.inputHex?.value || "", c = l.trim().startsWith("#") ? l.trim() : `#${l.trim()}`, p = f(c);
+      const l = e.inputHex?.value || "", c = l.trim().startsWith("#") ? l.trim() : `#${l.trim()}`, p = v(c);
       return p ? this._normalizeByAlpha(p) : null;
     }
     if (this._format === "rgb") {
-      const l = Number(e.inputR?.value ?? ""), c = Number(e.inputG?.value ?? ""), p = Number(e.inputB?.value ?? ""), v = this._alphaEnabled() ? Number(e.inputA1?.value ?? "") : 1;
-      return [l, c, p, v].every((h) => Number.isFinite(h)) ? this._normalizeByAlpha({ r: l, g: c, b: p, a: v }) : null;
+      const l = Number(e.inputR?.value ?? ""), c = Number(e.inputG?.value ?? ""), p = Number(e.inputB?.value ?? ""), f = this._alphaEnabled() ? Number(e.inputA1?.value ?? "") : 1;
+      return [l, c, p, f].every((h) => Number.isFinite(h)) ? this._normalizeByAlpha({ r: l, g: c, b: p, a: f }) : null;
     }
     const r = Number(e.inputH?.value ?? ""), i = Number(e.inputS?.value ?? ""), a = Number(e.inputL?.value ?? ""), n = this._alphaEnabled() ? Number(e.inputA2?.value ?? "") : 1;
     if (![r, i, a, n].every((l) => Number.isFinite(l))) return null;
-    const o = {
+    const s = {
       h: u(r, 0, 360),
       s: u(i, 0, 100),
       l: u(a, 0, 100),
       a: u(n, 0, 1)
     };
-    return this._normalizeByAlpha($(o));
+    return this._normalizeByAlpha($(s));
   }
   _onPanelPointerDown(t, e) {
     if (this._isDisabled() || this._isReadonly() || this._isLoading()) return;
@@ -1728,7 +1747,7 @@ class rt extends q {
     const t = window.EyeDropper;
     if (typeof t == "function")
       try {
-        const r = await new t().open(), i = f(r?.sRGBHex || "");
+        const r = await new t().open(), i = v(r?.sRGBHex || "");
         if (!i) return;
         this._applyRgba(i, !0), this._error = "", this._syncValueAttribute(), this._emitInput("eyedropper"), this._emitChange("eyedropper"), this._pushRecent(this._currentHex()), this._updateUI(!1);
       } catch {
@@ -1765,9 +1784,9 @@ class rt extends q {
       this.dispatchEvent(new CustomEvent("toast", { detail: { message: r }, bubbles: !0, composed: !0 }));
   }
   _applyAria(t, e = "") {
-    const r = this.getAttribute("aria-labelledby"), i = this.getAttribute("aria-describedby"), a = this.getAttribute("aria-label"), n = this.getRootNode(), o = r ? r.split(/\s+/).map((p) => n.getElementById?.(p)?.textContent?.trim() || "").filter(Boolean).join(" ") : "";
+    const r = this.getAttribute("aria-labelledby"), i = this.getAttribute("aria-describedby"), a = this.getAttribute("aria-label"), n = this.getRootNode(), s = r ? r.split(/\s+/).map((p) => n.getElementById?.(p)?.textContent?.trim() || "").filter(Boolean).join(" ") : "";
     t.removeAttribute("aria-labelledby"), i ? t.setAttribute("aria-describedby", i) : t.removeAttribute("aria-describedby");
-    const l = o || a || "Color picker", c = e && !l.includes(e) ? `${l}, ${e}` : l;
+    const l = s || a || "Color picker", c = e && !l.includes(e) ? `${l}, ${e}` : l;
     t.setAttribute("aria-label", c);
   }
 }