@helixui/library 1.1.2 → 2.0.0

package/dist/shared/{hx-color-picker-Da8z6AlQ.js → hx-color-picker-Dk2Myvaf.js}

@@ -1,17 +1,12 @@
-import { css as V, LitElement as H, html as f, nothing as k } from "lit";
-import { property as c, state as F, customElement as O } from "lit/decorators.js";
-import { styleMap as b } from "lit/directives/style-map.js";
-import { tokenStyles as E } from "@helixui/tokens/lit";
-const U = V`:host{display:inline-block;position:relative;font-family:var(--hx-font-family-sans, sans-serif);font-size:var(--hx-font-size-sm, .875rem)}:host([disabled]){pointer-events:none;opacity:var(--hx-opacity-disabled, .4)}.trigger{display:inline-flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-1, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-md, .375rem);background:var(--hx-color-neutral-0, #fff);cursor:pointer;transition:border-color var(--hx-transition-fast, .15s ease)}.trigger:hover:not([disabled]){border-color:var(--hx-color-primary-500, #3b82f6)}:is(.trigger,.gradient-grid,.slider-track,.swatch-btn,.format-btn):focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, var(--hx-color-primary-500));outline-offset:var(--hx-focus-ring-offset, 2px)}.trigger-swatch{width:1.5rem;height:1.5rem;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);display:block;flex-shrink:0}.trigger-label{font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-700, #374151);font-family:var(--hx-font-family-mono, monospace);white-space:nowrap}.panel{position:absolute;z-index:var(--hx-color-picker-z-index, 1000);top:calc(100% + 4px);left:0;background:var(--hx-color-neutral-0, #fff);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem);box-shadow:0 8px 24px var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, .15)));padding:var(--hx-space-4, 1rem);width:var(--hx-color-picker-width, 260px);display:flex;flex-direction:column;gap:var(--hx-space-3, .75rem);outline:none}:host([inline]) .panel{position:static;box-shadow:none;border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem)}.gradient-grid{position:relative;width:100%;height:var(--hx-color-picker-grid-height, 160px);border-radius:var(--hx-border-radius-sm, .25rem);cursor:crosshair;overflow:hidden;touch-action:none;flex-shrink:0}.gradient-grid-bg{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,var(--_hue-color, hsl(0, 100%, 50%)));pointer-events:none}.gradient-thumb{position:absolute;width:12px;height:12px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;top:var(--_thumb-y, 0%);left:var(--_thumb-x, 100%)}.slider-track{position:relative;width:100%;height:12px;border-radius:6px;cursor:pointer;touch-action:none;flex-shrink:0}.hue-track{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.opacity-track{background-image:linear-gradient(to right,transparent,var(--_hue-color, hsl(0, 100%, 50%))),repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0 0 / 12px 12px}.slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;left:var(--_slider-pct, 0%);background:var(--_thumb-color, hsl(0, 100%, 50%))}.swatches{display:flex;flex-wrap:wrap;gap:var(--hx-space-1, .25rem)}.swatch-btn{width:20px;height:20px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));cursor:pointer;padding:0;flex-shrink:0;transition:transform var(--hx-transition-fast, .15s ease)}.swatch-btn:hover{transform:scale(1.15);border-color:var( --hx-color-picker-swatch-border-hover, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)) )}.input-area{display:flex;align-items:center;gap:var(--hx-space-2, .5rem)}.format-btn{flex-shrink:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);background:var(--hx-color-neutral-100, #f3f4f6);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);cursor:pointer;font-size:var(--hx-font-size-xs, .75rem);color:var(--hx-color-neutral-600, #4b5563);text-transform:uppercase;font-weight:var(--hx-font-weight-semibold, 600);letter-spacing:.05em}.color-input{flex:1;min-width:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);font-family:var(--hx-font-family-mono, monospace);font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-900, #111827);background:var(--hx-color-neutral-0, #fff);outline:none}.color-input:focus{border-color:var(--hx-focus-ring-color, var(--hx-color-primary-500));box-shadow:0 0 0 2px color-mix(in srgb,var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%,transparent)}.input-preview{width:24px;height:24px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);flex-shrink:0}@media(prefers-reduced-motion:reduce){.trigger,.swatch-btn{transition:none}}`;
-var G = Object.defineProperty, L = Object.getOwnPropertyDescriptor, h = (t, e, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? L(e, r) : e, n = t.length - 1, o; n >= 0; n--)
-    (o = t[n]) && (a = (i ? o(e, r, a) : o(a)) || a);
-  return i && a && G(e, r, a), a;
-};
-function m(t, e, r) {
+import { css as F, LitElement as H, html as f, nothing as k } from "lit";
+import { property as c, state as D, query as V, customElement as O } from "lit/decorators.js";
+import { styleMap as g } from "lit/directives/style-map.js";
+import { tokenStyles as R } from "@helixui/tokens/lit";
+const U = F`:host{display:inline-block;position:relative;font-family:var(--hx-font-family-sans, sans-serif);font-size:var(--hx-font-size-sm, .875rem)}:host([disabled]){pointer-events:none;opacity:var(--hx-opacity-disabled, .4)}.trigger{display:inline-flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-1, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-md, .375rem);background:var(--hx-color-neutral-0, #fff);cursor:pointer;transition:border-color var(--hx-transition-fast, .15s ease)}.trigger:hover:not([disabled]){border-color:var(--hx-color-primary-500, #3b82f6)}:is(.trigger,.gradient-grid,.slider-track,.swatch-btn,.format-btn):focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, var(--hx-color-primary-500));outline-offset:var(--hx-focus-ring-offset, 2px)}.trigger-swatch{width:1.5rem;height:1.5rem;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);display:block;flex-shrink:0}.trigger-label{font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-700, #374151);font-family:var(--hx-font-family-mono, monospace);white-space:nowrap}.panel{position:absolute;z-index:var(--hx-color-picker-z-index, 1000);top:calc(100% + 4px);left:0;background:var(--hx-color-neutral-0, #fff);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem);box-shadow:0 8px 24px var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, .15)));padding:var(--hx-space-4, 1rem);width:var(--hx-color-picker-width, 260px);display:flex;flex-direction:column;gap:var(--hx-space-3, .75rem);outline:none}:host([inline]) .panel{position:static;box-shadow:none;border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem)}.gradient-grid{position:relative;width:100%;height:var(--hx-color-picker-grid-height, 160px);border-radius:var(--hx-border-radius-sm, .25rem);cursor:crosshair;overflow:hidden;touch-action:none;flex-shrink:0}.gradient-grid-bg{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,var(--_hue-color, hsl(0, 100%, 50%)));pointer-events:none}.gradient-thumb{position:absolute;width:12px;height:12px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;top:var(--_thumb-y, 0%);left:var(--_thumb-x, 100%)}.slider-track{position:relative;width:100%;height:12px;border-radius:6px;cursor:pointer;touch-action:none;flex-shrink:0}.hue-track{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.opacity-track{background-image:linear-gradient(to right,transparent,var(--_hue-color, hsl(0, 100%, 50%))),repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0 0 / 12px 12px}.slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;left:var(--_slider-pct, 0%);background:var(--_thumb-color, hsl(0, 100%, 50%))}.swatches{display:flex;flex-wrap:wrap;gap:var(--hx-space-1, .25rem)}.swatch-btn{width:20px;height:20px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));cursor:pointer;padding:0;flex-shrink:0;transition:transform var(--hx-transition-fast, .15s ease)}.swatch-btn:hover{transform:scale(1.15);border-color:var( --hx-color-picker-swatch-border-hover, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)) )}.input-area{display:flex;align-items:center;gap:var(--hx-space-2, .5rem)}.format-btn{flex-shrink:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);background:var(--hx-color-neutral-100, #f3f4f6);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);cursor:pointer;font-size:var(--hx-font-size-xs, .75rem);color:var(--hx-color-neutral-600, #4b5563);text-transform:uppercase;font-weight:var(--hx-font-weight-semibold, 600);letter-spacing:.05em}.color-input{flex:1;min-width:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);font-family:var(--hx-font-family-mono, monospace);font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-900, #111827);background:var(--hx-color-neutral-0, #fff);outline:none}.color-input:focus{border-color:var(--hx-focus-ring-color, var(--hx-color-primary-500));box-shadow:0 0 0 2px color-mix(in srgb,var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%,transparent)}.input-preview{width:24px;height:24px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);flex-shrink:0}@media(prefers-reduced-motion:reduce){.trigger,.swatch-btn{transition:none}}`;
+function b(t, e, r) {
   return Math.max(e, Math.min(r, t));
 }
-function R(t) {
+function G(t) {
   let e = t.trim().replace(/^#/, "");
   if (e.length === 3 && (e = e.replace(/(.)/g, "$1$1")), e.length === 4 && (e = e.replace(/(.)/g, "$1$1")), e.length === 6 && (e += "ff"), e.length !== 8) return null;
   const r = parseInt(e, 16);
@@ -23,66 +18,66 @@ function R(t) {
   };
 }
 function $(t) {
-  return Math.round(m(t, 0, 255)).toString(16).padStart(2, "0");
+  return Math.round(b(t, 0, 255)).toString(16).padStart(2, "0");
 }
-function q(t, e) {
+function L(t, e) {
   const r = `#${$(t.r)}${$(t.g)}${$(t.b)}`;
   return e && t.a < 1 ? r + $(t.a * 255) : r;
 }
 function S(t) {
-  const 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, d = a === 0 ? 0 : o / a, u = a;
+  const e = t.r / 255, r = t.g / 255, i = t.b / 255, a = Math.max(e, r, i), h = Math.min(e, r, i), s = a - h, d = a === 0 ? 0 : s / a, u = a;
   let l = 0;
-  return o !== 0 && (a === e ? l = ((r - i) / o + (r < i ? 6 : 0)) / 6 : a === r ? l = ((i - e) / o + 2) / 6 : l = ((e - r) / o + 4) / 6), { h: l * 360, s: d * 100, v: u * 100, a: t.a };
+  return s !== 0 && (a === e ? l = ((r - i) / s + (r < i ? 6 : 0)) / 6 : a === r ? l = ((i - e) / s + 2) / 6 : l = ((e - r) / s + 4) / 6), { h: l * 360, s: d * 100, v: u * 100, a: t.a };
 }
-function D(t) {
-  const e = t.h / 360, r = t.s / 100, i = t.v / 100, a = Math.floor(e * 6), n = e * 6 - a, o = i * (1 - r), d = i * (1 - n * r), u = i * (1 - (1 - n) * r);
+function E(t) {
+  const e = t.h / 360, r = t.s / 100, i = t.v / 100, a = Math.floor(e * 6), h = e * 6 - a, s = i * (1 - r), d = i * (1 - h * r), u = i * (1 - (1 - h) * r);
   let l = 0, p = 0, v = 0;
   switch (a % 6) {
     case 0:
-      l = i, p = u, v = o;
+      l = i, p = u, v = s;
       break;
     case 1:
-      l = d, p = i, v = o;
+      l = d, p = i, v = s;
       break;
     case 2:
-      l = o, p = i, v = u;
+      l = s, p = i, v = u;
       break;
     case 3:
-      l = o, p = d, v = i;
+      l = s, p = d, v = i;
       break;
     case 4:
-      l = u, p = o, v = i;
+      l = u, p = s, v = i;
       break;
     case 5:
-      l = i, p = o, v = d;
+      l = i, p = s, v = d;
       break;
   }
   return { r: Math.round(l * 255), g: Math.round(p * 255), b: Math.round(v * 255), a: t.a };
 }
-function I(t) {
-  const 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) / 2;
+function q(t) {
+  const e = t.r / 255, r = t.g / 255, i = t.b / 255, a = Math.max(e, r, i), h = Math.min(e, r, i), s = (a + h) / 2;
   let d = 0, u = 0;
-  if (a !== n) {
-    const l = a - n;
-    u = o > 0.5 ? l / (2 - a - n) : l / (a + n), a === e ? d = ((r - i) / l + (r < i ? 6 : 0)) / 6 : a === r ? d = ((i - e) / l + 2) / 6 : d = ((e - r) / l + 4) / 6;
+  if (a !== h) {
+    const l = a - h;
+    u = s > 0.5 ? l / (2 - a - h) : l / (a + h), a === e ? d = ((r - i) / l + (r < i ? 6 : 0)) / 6 : a === r ? d = ((i - e) / l + 2) / 6 : d = ((e - r) / l + 4) / 6;
   }
-  return { h: d * 360, s: u * 100, l: o * 100, a: t.a };
+  return { h: d * 360, s: u * 100, l: s * 100, a: t.a };
 }
 function P(t) {
   if (!t) return null;
   if (t.startsWith("#")) {
-    const a = R(t);
+    const a = G(t);
     return a ? S(a) : null;
   }
   const e = t.match(
     /rgba?\(\s*(\d+)(?:\s*,\s*|\s+)(\d+)(?:\s*,\s*|\s+)(\d+)(?:\s*(?:\/|,)\s*([\d.]+))?\s*\)/
   );
   if (e) {
-    const [, a, n, o, d] = e;
+    const [, a, h, s, d] = e;
     return S({
       r: parseInt(a ?? "0", 10),
-      g: parseInt(n ?? "0", 10),
-      b: parseInt(o ?? "0", 10),
+      g: parseInt(h ?? "0", 10),
+      b: parseInt(s ?? "0", 10),
       a: d !== void 0 ? parseFloat(d) : 1
     });
   }
@@ -90,12 +85,12 @@ function P(t) {
     /hsla?\(\s*([\d.]+)(?:\s*,\s*|\s+)([\d.]+)%(?:\s*,\s*|\s+)([\d.]+)%(?:\s*(?:\/|,)\s*([\d.]+))?\s*\)/
   );
   if (r) {
-    const [, a, n, o, d] = r, u = parseFloat(a ?? "0"), l = parseFloat(n ?? "0") / 100, p = parseFloat(o ?? "0") / 100, v = d !== void 0 ? parseFloat(d) : 1, g = (1 - Math.abs(2 * p - 1)) * l, _ = g * (1 - Math.abs(u / 60 % 2 - 1)), C = p - g / 2;
+    const [, a, h, s, d] = r, u = parseFloat(a ?? "0"), l = parseFloat(h ?? "0") / 100, p = parseFloat(s ?? "0") / 100, v = d !== void 0 ? parseFloat(d) : 1, m = (1 - Math.abs(2 * p - 1)) * l, _ = m * (1 - Math.abs(u / 60 % 2 - 1)), M = p - m / 2;
     let y = 0, x = 0, w = 0;
-    return u < 60 ? (y = g, x = _) : u < 120 ? (y = _, x = g) : u < 180 ? (x = g, w = _) : u < 240 ? (x = _, w = g) : u < 300 ? (y = _, w = g) : (y = g, w = _), S({
-      r: Math.round((y + C) * 255),
-      g: Math.round((x + C) * 255),
-      b: Math.round((w + C) * 255),
+    return u < 60 ? (y = m, x = _) : u < 120 ? (y = _, x = m) : u < 180 ? (x = m, w = _) : u < 240 ? (x = _, w = m) : u < 300 ? (y = _, w = m) : (y = m, w = _), S({
+      r: Math.round((y + M) * 255),
+      g: Math.round((x + M) * 255),
+      b: Math.round((w + M) * 255),
       a: v
     });
   }
@@ -103,34 +98,39 @@ function P(t) {
     /hsva?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)/
   );
   if (i) {
-    const [, a, n, o, d] = i;
+    const [, a, h, s, d] = i;
     return {
       h: parseFloat(a ?? "0"),
-      s: parseFloat(n ?? "0"),
-      v: parseFloat(o ?? "0"),
+      s: parseFloat(h ?? "0"),
+      v: parseFloat(s ?? "0"),
       a: d !== void 0 ? parseFloat(d) : 1
     };
   }
   return null;
 }
-function M(t, e, r) {
-  const i = D(t);
+function C(t, e, r) {
+  const i = E(t);
   switch (e) {
     case "hex":
-      return q(i, r);
+      return L(i, r);
     case "rgb":
       return r && t.a < 1 ? `rgb(${i.r} ${i.g} ${i.b} / ${Math.round(t.a * 100) / 100})` : `rgb(${i.r} ${i.g} ${i.b})`;
     case "hsl": {
-      const a = I(i);
+      const a = q(i);
       return r && t.a < 1 ? `hsl(${Math.round(a.h)} ${Math.round(a.s)}% ${Math.round(a.l)}% / ${Math.round(t.a * 100) / 100})` : `hsl(${Math.round(a.h)} ${Math.round(a.s)}% ${Math.round(a.l)}%)`;
     }
     case "hsv":
       return r && t.a < 1 ? `hsva(${Math.round(t.h)}, ${Math.round(t.s)}%, ${Math.round(t.v)}%, ${Math.round(t.a * 100) / 100})` : `hsv(${Math.round(t.h)}, ${Math.round(t.s)}%, ${Math.round(t.v)}%)`;
   }
 }
-let s = class extends H {
+var I = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? B(e, r) : e, h = t.length - 1, s; h >= 0; h--)
+    (s = t[h]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && I(e, r, a), a;
+};
+let o = class extends H {
   constructor() {
-    super(), this.value = "#000000", this.format = "hex", this.opacity = !1, this.swatches = [], this.swatchesOnly = !1, this.disabled = !1, this.name = "", this.inline = !1, this.required = !1, this.labelGradient = "Color gradient", this.labelHue = "Hue", this.labelOpacity = "Opacity", this.labelSwatches = "Preset colors", this.labelSwitchFormat = "Switch color format", this.labelColorValue = "Color value", this.labelPicker = "Color picker", this.labelTrigger = (t) => `Choose color: ${t}`, this._hsv = { h: 0, s: 0, v: 0, a: 1 }, this._open = !1, this._inputValue = "#000000", this._draggingGrid = !1, this._draggingHue = !1, this._draggingOpacity = !1, this._internals = this.attachInternals(), this._boundPointerMove = this._handlePointerMove.bind(this), this._boundPointerUp = this._handlePointerUp.bind(this), this._boundDocumentClick = this._handleDocumentClick.bind(this);
+    super(), this.value = "#000000", this.format = "hex", this.opacity = !1, this.swatches = [], this.swatchesOnly = !1, this.disabled = !1, this.name = "", this.inline = !1, this.required = !1, this.labelGradient = "Color gradient", this.labelHue = "Hue", this.labelOpacity = "Opacity", this.labelSwatches = "Preset colors", this.labelSwitchFormat = "Switch color format", this.labelColorValue = "Color value", this.labelPicker = "Color picker", this.labelTrigger = (t) => `Choose color: ${t}`, this._hsv = { h: 0, s: 0, v: 0, a: 1 }, this._open = !1, this._inputValue = "#000000", this._draggingGrid = !1, this._draggingHue = !1, this._draggingOpacity = !1, this._dragRect = null, this._internals = this.attachInternals(), this._boundPointerMove = this._handlePointerMove.bind(this), this._boundPointerUp = this._handlePointerUp.bind(this), this._boundDocumentClick = this._handleDocumentClick.bind(this);
   }
   // ─── Lifecycle ───────────────────────────────────────────────────────────
   connectedCallback() {
@@ -146,17 +146,17 @@ let s = class extends H {
   /** @internal */
   _syncFromValue() {
     const t = P(this.value);
-    t && (this._hsv = t), this._inputValue = M(this._hsv, this.format, this.opacity), this._internals.setFormValue(this.value), this._updateValidity();
+    t && (this._hsv = t), this._inputValue = C(this._hsv, this.format, this.opacity), this._internals.setFormValue(this.value), this._updateValidity();
   }
-  /** Called when a parent fieldset is disabled/enabled. */
+  /** @internal */
   formDisabledCallback(t) {
     this.disabled = t;
   }
-  /** Called by the browser when the form is reset. */
+  /** @internal */
   formResetCallback() {
     this.value = "#000000", this._internals.setFormValue(null);
   }
-  /** Called by the browser to restore form state on navigation. */
+  /** @internal */
   formStateRestoreCallback(t, e) {
     typeof t == "string" && (this.value = t);
   }
@@ -187,7 +187,7 @@ let s = class extends H {
   }
   /** @internal */
   _commit(t) {
-    const e = M(this._hsv, this.format, this.opacity);
+    const e = C(this._hsv, this.format, this.opacity);
     this.value = e, this._inputValue = e, this._internals.setFormValue(e);
     const i = {
       bubbles: !0,
@@ -199,7 +199,11 @@ let s = class extends H {
   // ─── Panel open/close ────────────────────────────────────────────────────
   /** @internal */
   _show() {
-    this._open || this.inline || (this._open = !0, typeof document < "u" && document.addEventListener("click", this._boundDocumentClick, !0));
+    this._open || this.inline || (this._open = !0, typeof document < "u" && document.addEventListener("click", this._boundDocumentClick, !0), this.updateComplete.then(() => {
+      var r;
+      const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".panel"), e = (t == null ? void 0 : t.querySelector("input, button")) ?? t;
+      e == null || e.focus();
+    }));
   }
   /** @internal */
   _hide() {
@@ -221,15 +225,16 @@ let s = class extends H {
   // ─── Gradient grid dragging ───────────────────────────────────────────────
   /** @internal */
   _handleGridPointerDown(t) {
-    this.disabled || (t.preventDefault(), this._draggingGrid = !0, t.currentTarget.setPointerCapture(t.pointerId), typeof document < "u" && (document.addEventListener("pointermove", this._boundPointerMove), document.addEventListener("pointerup", this._boundPointerUp)), this._updateGridFromPointer(t));
+    var e;
+    this.disabled || (t.preventDefault(), this._draggingGrid = !0, this._dragRect = ((e = this._gridEl) == null ? void 0 : e.getBoundingClientRect()) ?? null, t.currentTarget.setPointerCapture(t.pointerId), typeof document < "u" && (document.addEventListener("pointermove", this._boundPointerMove), document.addEventListener("pointerup", this._boundPointerUp)), this._updateGridFromPointer(t));
   }
   /** @internal */
   _updateGridFromPointer(t) {
-    var n;
-    const e = (n = this.shadowRoot) == null ? void 0 : n.querySelector('[part="grid"]');
+    var a;
+    const e = this._dragRect ?? ((a = this._gridEl) == null ? void 0 : a.getBoundingClientRect());
     if (!e) return;
-    const r = e.getBoundingClientRect(), i = m((t.clientX - r.left) / r.width, 0, 1), a = m((t.clientY - r.top) / r.height, 0, 1);
-    this._hsv = { ...this._hsv, s: i * 100, v: (1 - a) * 100 }, this._commit("drag"), this.requestUpdate();
+    const r = b((t.clientX - e.left) / e.width, 0, 1), i = b((t.clientY - e.top) / e.height, 0, 1);
+    this._hsv = { ...this._hsv, s: r * 100, v: (1 - i) * 100 }, this._commit("drag"), this.requestUpdate();
   }
   // P0-1: Keyboard support for gradient grid — fixes WCAG 2.1 SC 2.1.1 failure
   /** @internal */
@@ -250,35 +255,37 @@ let s = class extends H {
     }
     (e !== 0 || r !== 0) && (t.preventDefault(), this._hsv = {
       ...this._hsv,
-      s: m(this._hsv.s + e, 0, 100),
-      v: m(this._hsv.v + r, 0, 100)
+      s: b(this._hsv.s + e, 0, 100),
+      v: b(this._hsv.v + r, 0, 100)
     }, this._commit("change"));
   }
   // ─── Hue slider dragging ─────────────────────────────────────────────────
   /** @internal */
   _handleHuePointerDown(t) {
-    this.disabled || (t.preventDefault(), this._draggingHue = !0, t.currentTarget.setPointerCapture(t.pointerId), typeof document < "u" && (document.addEventListener("pointermove", this._boundPointerMove), document.addEventListener("pointerup", this._boundPointerUp)), this._updateHueFromPointer(t));
+    var e;
+    this.disabled || (t.preventDefault(), this._draggingHue = !0, this._dragRect = ((e = this._hueSliderEl) == null ? void 0 : e.getBoundingClientRect()) ?? null, t.currentTarget.setPointerCapture(t.pointerId), typeof document < "u" && (document.addEventListener("pointermove", this._boundPointerMove), document.addEventListener("pointerup", this._boundPointerUp)), this._updateHueFromPointer(t));
   }
   /** @internal */
   _updateHueFromPointer(t) {
-    var a;
-    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector('[part="hue-slider"]');
+    var i;
+    const e = this._dragRect ?? ((i = this._hueSliderEl) == null ? void 0 : i.getBoundingClientRect());
     if (!e) return;
-    const r = e.getBoundingClientRect(), i = m((t.clientX - r.left) / r.width, 0, 1);
-    this._hsv = { ...this._hsv, h: i * 360 }, this._commit("drag"), this.requestUpdate();
+    const r = b((t.clientX - e.left) / e.width, 0, 1);
+    this._hsv = { ...this._hsv, h: r * 360 }, this._commit("drag"), this.requestUpdate();
   }
   // ─── Opacity slider dragging ──────────────────────────────────────────────
   /** @internal */
   _handleOpacityPointerDown(t) {
-    this.disabled || (t.preventDefault(), this._draggingOpacity = !0, t.currentTarget.setPointerCapture(t.pointerId), typeof document < "u" && (document.addEventListener("pointermove", this._boundPointerMove), document.addEventListener("pointerup", this._boundPointerUp)), this._updateOpacityFromPointer(t));
+    var e;
+    this.disabled || (t.preventDefault(), this._draggingOpacity = !0, this._dragRect = ((e = this._opacitySliderEl) == null ? void 0 : e.getBoundingClientRect()) ?? null, t.currentTarget.setPointerCapture(t.pointerId), typeof document < "u" && (document.addEventListener("pointermove", this._boundPointerMove), document.addEventListener("pointerup", this._boundPointerUp)), this._updateOpacityFromPointer(t));
   }
   /** @internal */
   _updateOpacityFromPointer(t) {
-    var a;
-    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector('[part="opacity-slider"]');
+    var i;
+    const e = this._dragRect ?? ((i = this._opacitySliderEl) == null ? void 0 : i.getBoundingClientRect());
     if (!e) return;
-    const r = e.getBoundingClientRect(), i = m((t.clientX - r.left) / r.width, 0, 1);
-    this._hsv = { ...this._hsv, a: i }, this._commit("drag"), this.requestUpdate();
+    const r = b((t.clientX - e.left) / e.width, 0, 1);
+    this._hsv = { ...this._hsv, a: r }, this._commit("drag"), this.requestUpdate();
   }
   // ─── Document-level pointer handlers ─────────────────────────────────────
   /** @internal */
@@ -287,7 +294,7 @@ let s = class extends H {
   }
   /** @internal */
   _handlePointerUp() {
-    (this._draggingGrid || this._draggingHue || this._draggingOpacity) && (this._draggingGrid = !1, this._draggingHue = !1, this._draggingOpacity = !1, typeof document < "u" && (document.removeEventListener("pointermove", this._boundPointerMove), document.removeEventListener("pointerup", this._boundPointerUp)), this._commit("change"));
+    (this._draggingGrid || this._draggingHue || this._draggingOpacity) && (this._draggingGrid = !1, this._draggingHue = !1, this._draggingOpacity = !1, this._dragRect = null, typeof document < "u" && (document.removeEventListener("pointermove", this._boundPointerMove), document.removeEventListener("pointerup", this._boundPointerUp)), this._commit("change"));
   }
   // ─── Keyboard handling for sliders ───────────────────────────────────────
   /** @internal */
@@ -304,7 +311,7 @@ let s = class extends H {
       this._hsv = { ...this._hsv, h: 360 }, this._commit("change");
       return;
     }
-    e !== 0 && (t.preventDefault(), this._hsv = { ...this._hsv, h: m(this._hsv.h + e, 0, 360) }, this._commit("change"));
+    e !== 0 && (t.preventDefault(), this._hsv = { ...this._hsv, h: b(this._hsv.h + e, 0, 360) }, this._commit("change"));
   }
   /** @internal */
   _handleOpacityKeydown(t) {
@@ -320,7 +327,7 @@ let s = class extends H {
       this._hsv = { ...this._hsv, a: 1 }, this._commit("change");
       return;
     }
-    e !== 0 && (t.preventDefault(), this._hsv = { ...this._hsv, a: m(this._hsv.a + e, 0, 1) }, this._commit("change"));
+    e !== 0 && (t.preventDefault(), this._hsv = { ...this._hsv, a: b(this._hsv.a + e, 0, 1) }, this._commit("change"));
   }
   // ─── Input ───────────────────────────────────────────────────────────────
   // P1-7: Bound to @input (was @change) for real-time color preview while typing
@@ -332,12 +339,12 @@ let s = class extends H {
   /** @internal */
   _handleInputBlur(t) {
     const e = t.target, r = P(e.value.trim());
-    r ? (this._hsv = r, this._commit("change")) : this._inputValue = M(this._hsv, this.format, this.opacity);
+    r ? (this._hsv = r, this._commit("change")) : this._inputValue = C(this._hsv, this.format, this.opacity);
   }
   /** @internal */
   _handleFormatCycle() {
     const t = ["hex", "rgb", "hsl", "hsv"], e = t.indexOf(this.format), r = t[(e + 1) % t.length];
-    r !== void 0 && (this.format = r), this._inputValue = M(this._hsv, this.format, this.opacity);
+    r !== void 0 && (this.format = r), this._inputValue = C(this._hsv, this.format, this.opacity);
   }
   // ─── Swatches ────────────────────────────────────────────────────────────
   /** @internal */
@@ -352,7 +359,7 @@ let s = class extends H {
   }
   /** @internal */
   _previewColor() {
-    const t = D(this._hsv);
+    const t = E(this._hsv);
     return this.opacity && this._hsv.a < 1 ? `rgb(${t.r} ${t.g} ${t.b} / ${Math.round(this._hsv.a * 100) / 100})` : `rgb(${t.r} ${t.g} ${t.b})`;
   }
   // ─── Render helpers ───────────────────────────────────────────────────────
@@ -373,10 +380,10 @@ let s = class extends H {
         @pointerdown=${this._handleGridPointerDown}
         @keydown=${this._handleGridKeydown}
       >
-        <div class="gradient-grid-bg" style=${b({ "--_hue-color": r })}></div>
+        <div class="gradient-grid-bg" style=${g({ "--_hue-color": r })}></div>
         <div
           class="gradient-thumb"
-          style=${b({ "--_thumb-x": t, "--_thumb-y": e })}
+          style=${g({ "--_thumb-x": t, "--_thumb-y": e })}
           aria-hidden="true"
         ></div>
       </div>
@@ -401,7 +408,7 @@ let s = class extends H {
       >
         <div
           class="slider-thumb"
-          style=${b({ "--_slider-pct": t, "--_thumb-color": e })}
+          style=${g({ "--_slider-pct": t, "--_thumb-color": e })}
           aria-hidden="true"
         ></div>
       </div>
@@ -410,7 +417,7 @@ let s = class extends H {
   /** @internal */
   _renderOpacitySlider() {
     if (!this.opacity) return k;
-    const t = `${this._hsv.a * 100}%`, e = D(this._hsv), r = `rgb(${e.r} ${e.g} ${e.b} / ${Math.round(this._hsv.a * 100) / 100})`, i = this._hueColor();
+    const t = `${this._hsv.a * 100}%`, e = E(this._hsv), r = `rgb(${e.r} ${e.g} ${e.b} / ${Math.round(this._hsv.a * 100) / 100})`, i = this._hueColor();
     return f`
       <div
         part="slider opacity-slider"
@@ -422,13 +429,13 @@ let s = class extends H {
         aria-valuemax="100"
         aria-valuenow=${Math.round(this._hsv.a * 100)}
         aria-valuetext="${Math.round(this._hsv.a * 100)}%"
-        style=${b({ "--_hue-color": i })}
+        style=${g({ "--_hue-color": i })}
         @pointerdown=${this._handleOpacityPointerDown}
         @keydown=${this._handleOpacityKeydown}
       >
         <div
           class="slider-thumb"
-          style=${b({ "--_slider-pct": t, "--_thumb-color": r })}
+          style=${g({ "--_slider-pct": t, "--_thumb-color": r })}
           aria-hidden="true"
         ></div>
       </div>
@@ -444,7 +451,7 @@ let s = class extends H {
             <button
               type="button"
               class="swatch-btn"
-              style=${b({ background: e })}
+              style=${g({ background: e })}
               aria-label=${e}
               title=${e}
               @click=${() => this._handleSwatchClick(e)}
@@ -460,7 +467,7 @@ let s = class extends H {
       <div part="input" class="input-area">
         <div
           class="input-preview"
-          style=${b({ "--_preview-color": this._previewColor() })}
+          style=${g({ "--_preview-color": this._previewColor() })}
           aria-hidden="true"
         ></div>
         <button
@@ -504,16 +511,16 @@ let s = class extends H {
   render() {
     const t = this._previewColor();
     return this.inline ? f`
-        <div style=${b({ "--_preview-color": t })}>${this._renderPanel()}</div>
+        <div style=${g({ "--_preview-color": t })}>${this._renderPanel()}</div>
       ` : f`
       <button
         part="trigger"
         type="button"
         class="trigger"
         aria-label=${this.labelTrigger(this._inputValue)}
-        aria-expanded=${this._open ? "true" : k}
+        aria-expanded=${this._open ? "true" : "false"}
         ?disabled=${this.disabled}
-        style=${b({ "--_preview-color": t })}
+        style=${g({ "--_preview-color": t })}
         @click=${this._handleTriggerClick}
       >
         <slot name="trigger">
@@ -525,72 +532,81 @@ let s = class extends H {
     `;
   }
 };
-s.styles = [E, U];
-s.formAssociated = !0;
-h([
+o.styles = [R, U];
+o.formAssociated = !0;
+n([
   c({ type: String, reflect: !0 })
-], s.prototype, "value", 2);
-h([
+], o.prototype, "value", 2);
+n([
   c({ type: String, reflect: !0 })
-], s.prototype, "format", 2);
-h([
+], o.prototype, "format", 2);
+n([
   c({ type: Boolean, reflect: !0 })
-], s.prototype, "opacity", 2);
-h([
+], o.prototype, "opacity", 2);
+n([
   c({ attribute: !1 })
-], s.prototype, "swatches", 2);
-h([
+], o.prototype, "swatches", 2);
+n([
   c({ type: Boolean, reflect: !0, attribute: "swatches-only" })
-], s.prototype, "swatchesOnly", 2);
-h([
+], o.prototype, "swatchesOnly", 2);
+n([
   c({ type: Boolean, reflect: !0 })
-], s.prototype, "disabled", 2);
-h([
+], o.prototype, "disabled", 2);
+n([
   c({ type: String, reflect: !0 })
-], s.prototype, "name", 2);
-h([
+], o.prototype, "name", 2);
+n([
   c({ type: Boolean, reflect: !0 })
-], s.prototype, "inline", 2);
-h([
+], o.prototype, "inline", 2);
+n([
   c({ type: Boolean, reflect: !0 })
-], s.prototype, "required", 2);
-h([
+], o.prototype, "required", 2);
+n([
   c({ type: String, attribute: "label-gradient" })
-], s.prototype, "labelGradient", 2);
-h([
+], o.prototype, "labelGradient", 2);
+n([
   c({ type: String, attribute: "label-hue" })
-], s.prototype, "labelHue", 2);
-h([
+], o.prototype, "labelHue", 2);
+n([
   c({ type: String, attribute: "label-opacity" })
-], s.prototype, "labelOpacity", 2);
-h([
+], o.prototype, "labelOpacity", 2);
+n([
   c({ type: String, attribute: "label-swatches" })
-], s.prototype, "labelSwatches", 2);
-h([
+], o.prototype, "labelSwatches", 2);
+n([
   c({ type: String, attribute: "label-switch-format" })
-], s.prototype, "labelSwitchFormat", 2);
-h([
+], o.prototype, "labelSwitchFormat", 2);
+n([
   c({ type: String, attribute: "label-color-value" })
-], s.prototype, "labelColorValue", 2);
-h([
+], o.prototype, "labelColorValue", 2);
+n([
   c({ type: String, attribute: "label-picker" })
-], s.prototype, "labelPicker", 2);
-h([
+], o.prototype, "labelPicker", 2);
+n([
   c({ attribute: !1 })
-], s.prototype, "labelTrigger", 2);
-h([
-  F()
-], s.prototype, "_hsv", 2);
-h([
-  F()
-], s.prototype, "_open", 2);
-h([
-  F()
-], s.prototype, "_inputValue", 2);
-s = h([
+], o.prototype, "labelTrigger", 2);
+n([
+  D()
+], o.prototype, "_hsv", 2);
+n([
+  D()
+], o.prototype, "_open", 2);
+n([
+  D()
+], o.prototype, "_inputValue", 2);
+n([
+  V('[part="grid"]')
+], o.prototype, "_gridEl", 2);
+n([
+  V('[part="hue-slider"]')
+], o.prototype, "_hueSliderEl", 2);
+n([
+  V('[part="opacity-slider"]')
+], o.prototype, "_opacitySliderEl", 2);
+o = n([
   O("hx-color-picker")
-], s);
+], o);
 export {
-  s as H
+  o as H
 };
-//# sourceMappingURL=hx-color-picker-Da8z6AlQ.js.map
+//# sourceMappingURL=hx-color-picker-Dk2Myvaf.js.map