@helixui/library 2.1.2-next.47 → 2.1.2-next.49

package/dist/shared/{hx-color-picker-DhOaNe6-.js → hx-color-picker-C6EIuS9t.js}

@@ -1,8 +1,9 @@
-import { css as F, LitElement as H, html as f, nothing as k } from "lit";
+import { css as H, html as v, nothing as k } from "lit";
 import "./document-token-adoption-DuYNKd4k.js";
-import { property as c, state as D, query as V, customElement as O } from "lit/decorators.js";
+import { property as c, state as F, query as D, customElement as V } from "lit/decorators.js";
 import { styleMap as g } from "lit/directives/style-map.js";
-const R = 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}}`;
+import { H as O } from "./helix-element-CZvaIEQP.js";
+const R = H`: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-visible{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));
 }
@@ -31,28 +32,28 @@ function S(t) {
 }
 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;
+  let l = 0, p = 0, f = 0;
   switch (a % 6) {
     case 0:
-      l = i, p = u, v = s;
+      l = i, p = u, f = s;
       break;
     case 1:
-      l = d, p = i, v = s;
+      l = d, p = i, f = s;
       break;
     case 2:
-      l = s, p = i, v = u;
+      l = s, p = i, f = u;
       break;
     case 3:
-      l = s, p = d, v = i;
+      l = s, p = d, f = i;
       break;
     case 4:
-      l = u, p = s, v = i;
+      l = u, p = s, f = i;
       break;
     case 5:
-      l = i, p = s, v = d;
+      l = i, p = s, f = d;
       break;
   }
-  return { r: Math.round(l * 255), g: Math.round(p * 255), b: Math.round(v * 255), a: t.a };
+  return { r: Math.round(l * 255), g: Math.round(p * 255), b: Math.round(f * 255), a: t.a };
 }
 function L(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;
@@ -85,13 +86,13 @@ function P(t) {
     /hsla?\(\s*([\d.]+)(?:\s*,\s*|\s+)([\d.]+)%(?:\s*,\s*|\s+)([\d.]+)%(?:\s*(?:\/|,)\s*([\d.]+))?\s*\)/
   );
   if (r) {
-    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;
+    const [, a, h, s, d] = r, u = parseFloat(a ?? "0"), l = parseFloat(h ?? "0") / 100, p = parseFloat(s ?? "0") / 100, f = d !== void 0 ? parseFloat(d) : 1, m = (1 - Math.abs(2 * p - 1)) * l, _ = m * (1 - Math.abs(u / 60 % 2 - 1)), C = p - m / 2;
     let y = 0, x = 0, w = 0;
     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
+      r: Math.round((y + C) * 255),
+      g: Math.round((x + C) * 255),
+      b: Math.round((w + C) * 255),
+      a: f
     });
   }
   const i = t.match(
@@ -108,7 +109,7 @@ function P(t) {
   }
   return null;
 }
-function C(t, e, r) {
+function M(t, e, r) {
   const i = E(t);
   switch (e) {
     case "hex":
@@ -123,14 +124,14 @@ function C(t, e, r) {
       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)}%)`;
   }
 }
-var q = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (t, e, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? I(e, r) : e, h = t.length - 1, s; h >= 0; h--)
+var q = 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 && q(e, r, a), a;
 };
-let o = class extends H {
+let o = class extends O {
   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._dragRect = null, 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._boundPointerMove = this._handlePointerMove.bind(this), this._boundPointerUp = this._handlePointerUp.bind(this), this._boundDocumentClick = this._handleDocumentClick.bind(this);
   }
   // ─── Lifecycle ───────────────────────────────────────────────────────────
   connectedCallback() {
@@ -146,18 +147,18 @@ let o = class extends H {
   /** @internal */
   _syncFromValue() {
     const t = P(this.value);
-    t && (this._hsv = t), this._inputValue = C(this._hsv, this.format, this.opacity), this._internals.setFormValue(this.value), this._updateValidity();
+    t && (this._hsv = t), this._inputValue = M(this._hsv, this.format, this.opacity), this._internals.setFormValue(this.value), this._updateValidity();
   }
   /** @internal */
-  formDisabledCallback(t) {
+  _onFormDisabled(t) {
     this.disabled = t;
   }
   /** @internal */
-  formResetCallback() {
+  _onFormReset() {
     this.value = "#000000", this._internals.setFormValue(null);
   }
   /** @internal */
-  formStateRestoreCallback(t, e) {
+  _onFormStateRestore(t, e) {
     typeof t == "string" && (this.value = t);
   }
   /** Returns the ValidityState object. */
@@ -187,7 +188,7 @@ let o = class extends H {
   }
   /** @internal */
   _commit(t) {
-    const e = C(this._hsv, this.format, this.opacity);
+    const e = M(this._hsv, this.format, this.opacity);
     this.value = e, this._inputValue = e, this._internals.setFormValue(e);
     const i = {
       bubbles: !0,
@@ -339,12 +340,12 @@ let o = class extends H {
   /** @internal */
   _handleInputBlur(t) {
     const e = t.target, r = P(e.value.trim());
-    r ? (this._hsv = r, this._commit("change")) : this._inputValue = C(this._hsv, this.format, this.opacity);
+    r ? (this._hsv = r, this._commit("change")) : this._inputValue = M(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 = C(this._hsv, this.format, this.opacity);
+    r !== void 0 && (this.format = r), this._inputValue = M(this._hsv, this.format, this.opacity);
   }
   // ─── Swatches ────────────────────────────────────────────────────────────
   /** @internal */
@@ -366,7 +367,7 @@ let o = class extends H {
   /** @internal */
   _renderGrid() {
     const t = `${this._hsv.s}%`, e = `${100 - this._hsv.v}%`, r = this._hueColor();
-    return f`
+    return v`
       <div
         part="grid"
         class="gradient-grid"
@@ -392,7 +393,7 @@ let o = class extends H {
   /** @internal */
   _renderHueSlider() {
     const t = `${this._hsv.h / 360 * 100}%`, e = this._hueColor();
-    return f`
+    return v`
       <div
         part="slider hue-slider"
         class="slider-track hue-track"
@@ -418,7 +419,7 @@ let o = class extends H {
   _renderOpacitySlider() {
     if (!this.opacity) return k;
     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`
+    return v`
       <div
         part="slider opacity-slider"
         class="slider-track opacity-track"
@@ -444,10 +445,10 @@ let o = class extends H {
   /** @internal */
   _renderSwatches() {
     var t;
-    return (t = this.swatches) != null && t.length ? f`
+    return (t = this.swatches) != null && t.length ? v`
       <div part="swatches" class="swatches" role="group" aria-label=${this.labelSwatches}>
         ${this.swatches.map(
-      (e) => f`
+      (e) => v`
             <button
               type="button"
               class="swatch-btn"
@@ -463,7 +464,7 @@ let o = class extends H {
   }
   /** @internal */
   _renderInput() {
-    return f`
+    return v`
       <div part="input" class="input-area">
         <div
           class="input-preview"
@@ -494,7 +495,7 @@ let o = class extends H {
   }
   /** @internal */
   _renderPanel() {
-    return f`
+    return v`
       <div
         class="panel"
         role="group"
@@ -502,7 +503,7 @@ let o = class extends H {
         tabindex="-1"
         @keydown=${this._handlePanelKeydown}
       >
-        ${this.swatchesOnly ? k : f`${this._renderGrid()} ${this._renderHueSlider()} ${this._renderOpacitySlider()}`}
+        ${this.swatchesOnly ? k : v`${this._renderGrid()} ${this._renderHueSlider()} ${this._renderOpacitySlider()}`}
         ${this._renderSwatches()} ${this._renderInput()}
       </div>
     `;
@@ -510,9 +511,9 @@ let o = class extends H {
   // ─── Main render ─────────────────────────────────────────────────────────
   render() {
     const t = this._previewColor();
-    return this.inline ? f`
+    return this.inline ? v`
         <div style=${g({ "--_preview-color": t })}>${this._renderPanel()}</div>
-      ` : f`
+      ` : v`
       <button
         part="trigger"
         type="button"
@@ -586,27 +587,27 @@ n([
   c({ attribute: !1 })
 ], o.prototype, "labelTrigger", 2);
 n([
-  D()
+  F()
 ], o.prototype, "_hsv", 2);
 n([
-  D()
+  F()
 ], o.prototype, "_open", 2);
 n([
-  D()
+  F()
 ], o.prototype, "_inputValue", 2);
 n([
-  V('[part="grid"]')
+  D('[part="grid"]')
 ], o.prototype, "_gridEl", 2);
 n([
-  V('[part="hue-slider"]')
+  D('[part="hue-slider"]')
 ], o.prototype, "_hueSliderEl", 2);
 n([
-  V('[part="opacity-slider"]')
+  D('[part="opacity-slider"]')
 ], o.prototype, "_opacitySliderEl", 2);
 o = n([
-  O("hx-color-picker")
+  V("hx-color-picker")
 ], o);
 export {
   o as H
 };
-//# sourceMappingURL=hx-color-picker-DhOaNe6-.js.map
+//# sourceMappingURL=hx-color-picker-C6EIuS9t.js.map

package/dist/shared/hx-color-picker-C6EIuS9t.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-color-picker-C6EIuS9t.js","sources":["../../src/components/hx-color-picker/hx-color-picker.styles.ts","../../src/components/hx-color-picker/color-utils.ts","../../src/components/hx-color-picker/hx-color-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\n// prettier-ignore\nexport const helixColorPickerStyles = css`: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-visible{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}}`;\n","// ─── Color utility types ──────────────────────────────────────────────────────\n\nexport interface HSV {\n  h: number; // 0-360\n  s: number; // 0-100\n  v: number; // 0-100\n  a: number; // 0-1\n}\n\nexport interface RGB {\n  r: number; // 0-255\n  g: number; // 0-255\n  b: number; // 0-255\n  a: number; // 0-1\n}\n\nexport type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';\n\n// ─── Color utilities ──────────────────────────────────────────────────────────\n\nexport function clamp(n: number, min: number, max: number): number {\n  return Math.max(min, Math.min(max, n));\n}\n\nexport function hexToRgb(hex: string): RGB | null {\n  let h = hex.trim().replace(/^#/, '');\n  if (h.length === 3) h = h.replace(/(.)/g, '$1$1');\n  if (h.length === 4) h = h.replace(/(.)/g, '$1$1');\n  if (h.length === 6) h += 'ff';\n  if (h.length !== 8) return null;\n  const n = parseInt(h, 16);\n  if (isNaN(n)) return null;\n  return {\n    r: (n >>> 24) & 0xff,\n    g: (n >>> 16) & 0xff,\n    b: (n >>> 8) & 0xff,\n    a: (n & 0xff) / 255,\n  };\n}\n\nfunction toHex2(n: number): string {\n  return Math.round(clamp(n, 0, 255))\n    .toString(16)\n    .padStart(2, '0');\n}\n\nexport function rgbToHex(rgb: RGB, includeAlpha: boolean): string {\n  const base = `#${toHex2(rgb.r)}${toHex2(rgb.g)}${toHex2(rgb.b)}`;\n  if (includeAlpha && rgb.a < 1) return base + toHex2(rgb.a * 255);\n  return base;\n}\n\nexport function rgbToHsv(rgb: RGB): HSV {\n  const r = rgb.r / 255;\n  const g = rgb.g / 255;\n  const b = rgb.b / 255;\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  const d = max - min;\n  const s = max === 0 ? 0 : d / max;\n  const v = max;\n  let h = 0;\n  if (d !== 0) {\n    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;\n    else if (max === g) h = ((b - r) / d + 2) / 6;\n    else h = ((r - g) / d + 4) / 6;\n  }\n  return { h: h * 360, s: s * 100, v: v * 100, a: rgb.a };\n}\n\nexport function hsvToRgb(hsv: HSV): RGB {\n  const h = hsv.h / 360;\n  const s = hsv.s / 100;\n  const v = hsv.v / 100;\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  switch (i % 6) {\n    case 0:\n      r = v;\n      g = t;\n      b = p;\n      break;\n    case 1:\n      r = q;\n      g = v;\n      b = p;\n      break;\n    case 2:\n      r = p;\n      g = v;\n      b = t;\n      break;\n    case 3:\n      r = p;\n      g = q;\n      b = v;\n      break;\n    case 4:\n      r = t;\n      g = p;\n      b = v;\n      break;\n    case 5:\n      r = v;\n      g = p;\n      b = q;\n      break;\n  }\n  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255), a: hsv.a };\n}\n\nexport function rgbToHsl(rgb: RGB): { h: number; s: number; l: number; a: number } {\n  const r = rgb.r / 255;\n  const g = rgb.g / 255;\n  const b = rgb.b / 255;\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  const l = (max + min) / 2;\n  let h = 0;\n  let s = 0;\n  if (max !== min) {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;\n    else if (max === g) h = ((b - r) / d + 2) / 6;\n    else h = ((r - g) / d + 4) / 6;\n  }\n  return { h: h * 360, s: s * 100, l: l * 100, a: rgb.a };\n}\n\n// P2-1: parseColor handles HSV/HSVA input strings for round-trip correctness\nexport function parseColor(value: string): HSV | null {\n  if (!value) return null;\n\n  if (value.startsWith('#')) {\n    const rgb = hexToRgb(value);\n    return rgb ? rgbToHsv(rgb) : null;\n  }\n\n  const rgbMatch = value.match(\n    /rgba?\\(\\s*(\\d+)(?:\\s*,\\s*|\\s+)(\\d+)(?:\\s*,\\s*|\\s+)(\\d+)(?:\\s*(?:\\/|,)\\s*([\\d.]+))?\\s*\\)/,\n  );\n  if (rgbMatch) {\n    const [, rm1, rm2, rm3, rm4] = rgbMatch;\n    return rgbToHsv({\n      r: parseInt(rm1 ?? '0', 10),\n      g: parseInt(rm2 ?? '0', 10),\n      b: parseInt(rm3 ?? '0', 10),\n      a: rm4 !== undefined ? parseFloat(rm4) : 1,\n    });\n  }\n\n  const hslMatch = value.match(\n    /hsla?\\(\\s*([\\d.]+)(?:\\s*,\\s*|\\s+)([\\d.]+)%(?:\\s*,\\s*|\\s+)([\\d.]+)%(?:\\s*(?:\\/|,)\\s*([\\d.]+))?\\s*\\)/,\n  );\n  if (hslMatch) {\n    const [, hm1, hm2, hm3, hm4] = hslMatch;\n    const h = parseFloat(hm1 ?? '0');\n    const s = parseFloat(hm2 ?? '0') / 100;\n    const l = parseFloat(hm3 ?? '0') / 100;\n    const a = hm4 !== undefined ? parseFloat(hm4) : 1;\n    const c = (1 - Math.abs(2 * l - 1)) * s;\n    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n    const m = l - c / 2;\n    let r = 0;\n    let g = 0;\n    let b = 0;\n    if (h < 60) {\n      r = c;\n      g = x;\n    } else if (h < 120) {\n      r = x;\n      g = c;\n    } else if (h < 180) {\n      g = c;\n      b = x;\n    } else if (h < 240) {\n      g = x;\n      b = c;\n    } else if (h < 300) {\n      r = x;\n      b = c;\n    } else {\n      r = c;\n      b = x;\n    }\n    return rgbToHsv({\n      r: Math.round((r + m) * 255),\n      g: Math.round((g + m) * 255),\n      b: Math.round((b + m) * 255),\n      a,\n    });\n  }\n\n  // P2-1: Support HSV/HSVA input strings (component's own output format)\n  const hsvMatch = value.match(\n    /hsva?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)%\\s*,\\s*([\\d.]+)%(?:\\s*,\\s*([\\d.]+))?\\s*\\)/,\n  );\n  if (hsvMatch) {\n    const [, hm1, hm2, hm3, hm4] = hsvMatch;\n    return {\n      h: parseFloat(hm1 ?? '0'),\n      s: parseFloat(hm2 ?? '0'),\n      v: parseFloat(hm3 ?? '0'),\n      a: hm4 !== undefined ? parseFloat(hm4) : 1,\n    };\n  }\n\n  return null;\n}\n\nexport function formatColor(hsv: HSV, format: ColorFormat, includeAlpha: boolean): string {\n  const rgb = hsvToRgb(hsv);\n  switch (format) {\n    case 'hex':\n      return rgbToHex(rgb, includeAlpha);\n    case 'rgb': {\n      if (includeAlpha && hsv.a < 1) {\n        return `rgb(${rgb.r} ${rgb.g} ${rgb.b} / ${Math.round(hsv.a * 100) / 100})`;\n      }\n      return `rgb(${rgb.r} ${rgb.g} ${rgb.b})`;\n    }\n    case 'hsl': {\n      const hsl = rgbToHsl(rgb);\n      if (includeAlpha && hsv.a < 1) {\n        return `hsl(${Math.round(hsl.h)} ${Math.round(hsl.s)}% ${Math.round(hsl.l)}% / ${Math.round(hsv.a * 100) / 100})`;\n      }\n      return `hsl(${Math.round(hsl.h)} ${Math.round(hsl.s)}% ${Math.round(hsl.l)}%)`;\n    }\n    case 'hsv': {\n      if (includeAlpha && hsv.a < 1) {\n        return `hsva(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%, ${Math.round(hsv.a * 100) / 100})`;\n      }\n      return `hsv(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%)`;\n    }\n  }\n}\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { HelixElement } from '../../base/index.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { helixColorPickerStyles } from './hx-color-picker.styles.js';\nimport {\n  type ColorFormat,\n  type HSV,\n  clamp,\n  hsvToRgb,\n  parseColor,\n  formatColor,\n} from './color-utils.js';\n\n// Re-export ColorFormat so existing consumers using this module path still work\nexport type { ColorFormat };\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * A color picker control with gradient picker, hue/opacity sliders, swatches,\n * and formatted text input. Supports hex, rgb, hsl, and hsv output formats.\n *\n * @summary Color selection control with swatches, gradient picker, and formatted input.\n *\n * @tag hx-color-picker\n *\n * @slot trigger - Custom trigger element. Default: a color swatch button.\n *\n * @fires {CustomEvent<{value: string}>} hx-input - Dispatched while dragging sliders or grid.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when a color is committed.\n *\n * @csspart trigger - The trigger button element.\n * @csspart swatches - The swatch color buttons container.\n * @csspart grid - The 2D saturation/value gradient picker area.\n * @csspart slider - Shared slider container (also on hue-slider and opacity-slider).\n * @csspart hue-slider - The hue slider track.\n * @csspart opacity-slider - The alpha/opacity slider track.\n * @csspart input - The text input area.\n *\n * @cssprop [--hx-color-picker-z-index=1000] - z-index of the popover panel.\n * @cssprop [--hx-color-picker-width=260px] - Width of the picker panel.\n * @cssprop [--hx-color-picker-grid-height=160px] - Height of the gradient grid.\n * @cssprop [--hx-color-picker-thumb-border=#fff] - Border color of slider/grid thumbs.\n * @cssprop [--hx-color-picker-thumb-shadow=rgba(0,0,0,0.3)] - Shadow color of slider/grid thumbs.\n * @cssprop [--hx-color-picker-panel-shadow=rgba(0,0,0,0.15)] - Panel drop-shadow color.\n * @cssprop [--hx-color-picker-swatch-border=rgba(0,0,0,0.1)] - Swatch button border color.\n * @cssprop [--hx-color-picker-swatch-border-hover=rgba(0,0,0,0.3)] - Swatch button border on hover.\n *\n * @example\n * ```html\n * <hx-color-picker value=\"#3b82f6\" format=\"hex\"></hx-color-picker>\n * ```\n *\n * @example Drupal / Twig usage\n * The `swatches` property must be set via JavaScript (Drupal behavior) because arrays\n * cannot be serialized as HTML attributes:\n * ```js\n * // my-theme/js/color-picker-behavior.js\n * Drupal.behaviors.helixColorPicker = {\n *   attach(context) {\n *     context.querySelectorAll('hx-color-picker[data-swatches]').forEach((el) => {\n *       el.swatches = JSON.parse(el.dataset.swatches);\n *     });\n *   },\n * };\n * ```\n * ```twig\n * <hx-color-picker\n *   value=\"{{ color }}\"\n *   data-swatches='{{ swatches | json_encode }}'\n * ></hx-color-picker>\n * ```\n */\n@customElement('hx-color-picker')\nexport class HelixColorPicker extends HelixElement {\n  static override styles = [helixColorPickerStyles];\n\n  /**\n   * Declares this element as form-associated so it participates in native form submission.\n   * @internal\n   */\n  static override formAssociated = true;\n\n  constructor() {\n    super();\n    // P1-1: Store bound references so connectedCallback/disconnectedCallback use the same object\n    /** @internal */\n    this._boundPointerMove = this._handlePointerMove.bind(this);\n    /** @internal */\n    this._boundPointerUp = this._handlePointerUp.bind(this);\n    /** @internal */\n    this._boundDocumentClick = this._handleDocumentClick.bind(this);\n  }\n\n  // ─── Public Properties ───────────────────────────────────────────────────\n\n  /**\n   * Current color value as a CSS color string.\n   * @attr value\n   */\n  @property({ type: String, reflect: true })\n  value = '#000000';\n\n  /**\n   * Output format for the color value.\n   * @attr format\n   */\n  @property({ type: String, reflect: true })\n  format: ColorFormat = 'hex';\n\n  /**\n   * Whether to show the alpha/opacity channel slider and include alpha in the output.\n   * @attr opacity\n   */\n  @property({ type: Boolean, reflect: true })\n  opacity = false;\n\n  /**\n   * Array of preset swatch color strings.\n   * Set via JS property only — arrays cannot be serialized as HTML attributes.\n   * In Drupal/Twig, use a behavior to read `data-swatches` and set this property.\n   * See JSDoc example above.\n   */\n  @property({ attribute: false })\n  swatches: string[] = [];\n\n  /**\n   * When true, hides the gradient grid and sliders, showing only swatches and the input.\n   * Useful for compact preset-only color selection UIs.\n   * @attr swatches-only\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'swatches-only' })\n  swatchesOnly = false;\n\n  /**\n   * Whether the control is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Form field name for form participation.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * When true the picker is shown inline instead of in a popover.\n   * @attr inline\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /**\n   * When true, the picker requires a non-empty value for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /** Accessible label for the color gradient canvas. */\n  @property({ type: String, attribute: 'label-gradient' })\n  labelGradient = 'Color gradient';\n\n  /** Accessible label for the hue slider. */\n  @property({ type: String, attribute: 'label-hue' })\n  labelHue = 'Hue';\n\n  /** Accessible label for the opacity slider. */\n  @property({ type: String, attribute: 'label-opacity' })\n  labelOpacity = 'Opacity';\n\n  /** Accessible label for the preset color swatches section. */\n  @property({ type: String, attribute: 'label-swatches' })\n  labelSwatches = 'Preset colors';\n\n  /** Accessible label for the format-switch button. */\n  @property({ type: String, attribute: 'label-switch-format' })\n  labelSwitchFormat = 'Switch color format';\n\n  /** Accessible label for the color value input. */\n  @property({ type: String, attribute: 'label-color-value' })\n  labelColorValue = 'Color value';\n\n  /** Accessible label for the color picker dialog/panel. */\n  @property({ type: String, attribute: 'label-picker' })\n  labelPicker = 'Color picker';\n\n  /**\n   * Generates the accessible label for the trigger button.\n   * @param color - current color value string\n   */\n  @property({ attribute: false })\n  labelTrigger: (color: string) => string = (color) => `Choose color: ${color}`;\n\n  // ─── Internal State ──────────────────────────────────────────────────────\n\n  /**\n   * Internal HSV representation of the current color, used to drive all picker UI elements.\n   * @internal\n   */\n  @state() private _hsv: HSV = { h: 0, s: 0, v: 0, a: 1 };\n  /**\n   * Whether the color picker popover panel is currently open.\n   * @internal\n   */\n  @state() private _open = false;\n  /**\n   * The formatted color string displayed in the text input, kept in sync with `_hsv` and `format`.\n   * @internal\n   */\n  @state() private _inputValue = '#000000';\n\n  // ─── Cached element references ───────────────────────────────────────────\n\n  /** Cached reference to the gradient grid element. @internal */\n  @query('[part=\"grid\"]') private _gridEl!: HTMLElement | null;\n  /** Cached reference to the hue slider element. @internal */\n  @query('[part=\"hue-slider\"]') private _hueSliderEl!: HTMLElement | null;\n  /** Cached reference to the opacity slider element. @internal */\n  @query('[part=\"opacity-slider\"]') private _opacitySliderEl!: HTMLElement | null;\n\n  // ─── Dragging state (not reactive, managed manually) ─────────────────────\n\n  /**\n   * Whether the user is actively dragging within the gradient grid.\n   * @internal\n   */\n  private _draggingGrid = false;\n  /**\n   * Whether the user is actively dragging the hue slider thumb.\n   * @internal\n   */\n  private _draggingHue = false;\n  /**\n   * Whether the user is actively dragging the opacity slider thumb.\n   * @internal\n   */\n  private _draggingOpacity = false;\n\n  /**\n   * Cached bounding rect from pointerdown; avoids repeated getBoundingClientRect on every pointermove.\n   * @internal\n   */\n  private _dragRect: DOMRect | null = null;\n\n  // P1-1: Stored bound references to prevent memory leaks\n  /**\n   * Stable bound reference to the pointermove handler, stored to allow correct listener removal.\n   * @internal\n   */\n  private _boundPointerMove: (e: PointerEvent) => void;\n  /**\n   * Stable bound reference to the pointerup handler, stored to allow correct listener removal.\n   * @internal\n   */\n  private _boundPointerUp: () => void;\n  /**\n   * Stable bound reference to the document click handler, stored to allow correct listener removal.\n   * @internal\n   */\n  private _boundDocumentClick: (e: MouseEvent) => void;\n\n  // ─── Lifecycle ───────────────────────────────────────────────────────────\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._syncFromValue();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    // P1-1: Remove using the same stored references added in connectedCallback\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document !== 'undefined') {\n      document.removeEventListener('click', this._boundDocumentClick, true);\n      document.removeEventListener('pointermove', this._boundPointerMove);\n      document.removeEventListener('pointerup', this._boundPointerUp);\n    }\n  }\n\n  override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('value')) {\n      this._syncFromValue();\n    }\n    if (changedProperties.has('required')) {\n      this._updateValidity();\n    }\n  }\n\n  // ─── Sync ────────────────────────────────────────────────────────────────\n\n  /** @internal */\n  private _syncFromValue(): void {\n    const parsed = parseColor(this.value);\n    if (parsed) {\n      this._hsv = parsed;\n    }\n    this._inputValue = formatColor(this._hsv, this.format, this.opacity);\n    this._internals.setFormValue(this.value);\n    this._updateValidity();\n  }\n\n  /** @internal */\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  /** @internal */\n  protected override _onFormReset(): void {\n    this.value = '#000000';\n    this._internals.setFormValue(null);\n  }\n\n  /** @internal */\n  protected override _onFormStateRestore(\n    state: string | File | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (typeof state === 'string') {\n      this.value = state;\n    }\n  }\n\n  /** Returns the ValidityState object. */\n  override get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Returns the current validation message. */\n  override get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Checks whether the picker satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** @internal */\n  private _updateValidity(): void {\n    if (this.required && !this.value) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        'Please select a color.',\n        this.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]') ??\n          this.shadowRoot?.querySelector<HTMLElement>('[part=\"grid\"]') ??\n          undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** @internal */\n  private _commit(source: 'drag' | 'change'): void {\n    const formatted = formatColor(this._hsv, this.format, this.opacity);\n    this.value = formatted;\n    this._inputValue = formatted;\n    this._internals.setFormValue(formatted);\n    const detail = { value: formatted };\n    const opts: CustomEventInit<{ value: string }> = {\n      bubbles: true,\n      composed: true,\n      detail,\n    };\n    if (source === 'drag') {\n      this.dispatchEvent(new CustomEvent<{ value: string }>('hx-input', opts));\n    } else {\n      this.dispatchEvent(new CustomEvent<{ value: string }>('hx-change', opts));\n    }\n  }\n\n  // ─── Panel open/close ────────────────────────────────────────────────────\n\n  /** @internal */\n  private _show(): void {\n    if (this._open || this.inline) return;\n    this._open = true;\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document !== 'undefined') {\n      document.addEventListener('click', this._boundDocumentClick, true);\n    }\n    // WCAG 2.4.3: move focus into the panel after it renders so keyboard/AT\n    // users land on the first interactive element rather than staying on the trigger.\n    void this.updateComplete.then(() => {\n      const panel = this.shadowRoot?.querySelector<HTMLElement>('.panel');\n      // Prefer the color value input; fall back to the panel itself (tabindex=\"-1\").\n      const firstFocusable = panel?.querySelector<HTMLElement>('input, button') ?? panel;\n      firstFocusable?.focus();\n    });\n  }\n\n  /** @internal */\n  private _hide(): void {\n    if (!this._open) return;\n    this._open = false;\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document !== 'undefined') {\n      document.removeEventListener('click', this._boundDocumentClick, true);\n    }\n  }\n\n  /** @internal */\n  private _handleDocumentClick(e: MouseEvent): void {\n    if (!this._open) return;\n    if (!e.composedPath().includes(this)) {\n      this._hide();\n    }\n  }\n\n  /** @internal */\n  private _handleTriggerClick(e: MouseEvent): void {\n    e.stopPropagation();\n    if (this._open) {\n      this._hide();\n    } else {\n      this._show();\n    }\n  }\n\n  /** @internal */\n  private _handlePanelKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      this._hide();\n      this.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]')?.focus();\n    }\n  }\n\n  // ─── Gradient grid dragging ───────────────────────────────────────────────\n\n  /** @internal */\n  private _handleGridPointerDown(e: PointerEvent): void {\n    if (this.disabled) return;\n    e.preventDefault();\n    this._draggingGrid = true;\n    // Cache rect at pointerdown — element doesn't move during drag\n    this._dragRect = this._gridEl?.getBoundingClientRect() ?? null;\n    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document !== 'undefined') {\n      document.addEventListener('pointermove', this._boundPointerMove);\n      document.addEventListener('pointerup', this._boundPointerUp);\n    }\n    this._updateGridFromPointer(e);\n  }\n\n  /** @internal */\n  private _updateGridFromPointer(e: PointerEvent): void {\n    const rect = this._dragRect ?? this._gridEl?.getBoundingClientRect();\n    if (!rect) return;\n    const x = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n    const y = clamp((e.clientY - rect.top) / rect.height, 0, 1);\n    this._hsv = { ...this._hsv, s: x * 100, v: (1 - y) * 100 };\n    this._commit('drag');\n    this.requestUpdate();\n  }\n\n  // P0-1: Keyboard support for gradient grid — fixes WCAG 2.1 SC 2.1.1 failure\n  /** @internal */\n  private _handleGridKeydown(e: KeyboardEvent): void {\n    let sDelta = 0;\n    let vDelta = 0;\n    if (e.key === 'ArrowLeft') sDelta = -1;\n    else if (e.key === 'ArrowRight') sDelta = 1;\n    else if (e.key === 'ArrowUp') vDelta = 1;\n    else if (e.key === 'ArrowDown') vDelta = -1;\n    else if (e.key === 'PageUp') vDelta = 10;\n    else if (e.key === 'PageDown') vDelta = -10;\n    else if (e.key === 'Home') {\n      this._hsv = { ...this._hsv, s: 0, v: 100 };\n      this._commit('change');\n      return;\n    } else if (e.key === 'End') {\n      this._hsv = { ...this._hsv, s: 100, v: 0 };\n      this._commit('change');\n      return;\n    }\n    if (sDelta !== 0 || vDelta !== 0) {\n      e.preventDefault();\n      this._hsv = {\n        ...this._hsv,\n        s: clamp(this._hsv.s + sDelta, 0, 100),\n        v: clamp(this._hsv.v + vDelta, 0, 100),\n      };\n      this._commit('change');\n    }\n  }\n\n  // ─── Hue slider dragging ─────────────────────────────────────────────────\n\n  /** @internal */\n  private _handleHuePointerDown(e: PointerEvent): void {\n    if (this.disabled) return;\n    e.preventDefault();\n    this._draggingHue = true;\n    // Cache rect at pointerdown — element doesn't move during drag\n    this._dragRect = this._hueSliderEl?.getBoundingClientRect() ?? null;\n    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document !== 'undefined') {\n      document.addEventListener('pointermove', this._boundPointerMove);\n      document.addEventListener('pointerup', this._boundPointerUp);\n    }\n    this._updateHueFromPointer(e);\n  }\n\n  /** @internal */\n  private _updateHueFromPointer(e: PointerEvent): void {\n    const rect = this._dragRect ?? this._hueSliderEl?.getBoundingClientRect();\n    if (!rect) return;\n    const pct = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n    this._hsv = { ...this._hsv, h: pct * 360 };\n    this._commit('drag');\n    this.requestUpdate();\n  }\n\n  // ─── Opacity slider dragging ──────────────────────────────────────────────\n\n  /** @internal */\n  private _handleOpacityPointerDown(e: PointerEvent): void {\n    if (this.disabled) return;\n    e.preventDefault();\n    this._draggingOpacity = true;\n    // Cache rect at pointerdown — element doesn't move during drag\n    this._dragRect = this._opacitySliderEl?.getBoundingClientRect() ?? null;\n    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document !== 'undefined') {\n      document.addEventListener('pointermove', this._boundPointerMove);\n      document.addEventListener('pointerup', this._boundPointerUp);\n    }\n    this._updateOpacityFromPointer(e);\n  }\n\n  /** @internal */\n  private _updateOpacityFromPointer(e: PointerEvent): void {\n    const rect = this._dragRect ?? this._opacitySliderEl?.getBoundingClientRect();\n    if (!rect) return;\n    const pct = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n    this._hsv = { ...this._hsv, a: pct };\n    this._commit('drag');\n    this.requestUpdate();\n  }\n\n  // ─── Document-level pointer handlers ─────────────────────────────────────\n\n  /** @internal */\n  private _handlePointerMove(e: PointerEvent): void {\n    if (this._draggingGrid) this._updateGridFromPointer(e);\n    else if (this._draggingHue) this._updateHueFromPointer(e);\n    else if (this._draggingOpacity) this._updateOpacityFromPointer(e);\n  }\n\n  /** @internal */\n  private _handlePointerUp(): void {\n    if (this._draggingGrid || this._draggingHue || this._draggingOpacity) {\n      this._draggingGrid = false;\n      this._draggingHue = false;\n      this._draggingOpacity = false;\n      this._dragRect = null;\n      // Guard for SSR — document is unavailable server-side\n      if (typeof document !== 'undefined') {\n        document.removeEventListener('pointermove', this._boundPointerMove);\n        document.removeEventListener('pointerup', this._boundPointerUp);\n      }\n      this._commit('change');\n    }\n  }\n\n  // ─── Keyboard handling for sliders ───────────────────────────────────────\n\n  /** @internal */\n  private _handleHueKeydown(e: KeyboardEvent): void {\n    let delta = 0;\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') delta = -1;\n    else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = 1;\n    else if (e.key === 'PageDown') delta = -10;\n    else if (e.key === 'PageUp') delta = 10;\n    else if (e.key === 'Home') {\n      this._hsv = { ...this._hsv, h: 0 };\n      this._commit('change');\n      return;\n    } else if (e.key === 'End') {\n      this._hsv = { ...this._hsv, h: 360 };\n      this._commit('change');\n      return;\n    }\n    if (delta !== 0) {\n      e.preventDefault();\n      this._hsv = { ...this._hsv, h: clamp(this._hsv.h + delta, 0, 360) };\n      this._commit('change');\n    }\n  }\n\n  /** @internal */\n  private _handleOpacityKeydown(e: KeyboardEvent): void {\n    let delta = 0;\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') delta = -0.01;\n    else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = 0.01;\n    else if (e.key === 'PageDown') delta = -0.1;\n    else if (e.key === 'PageUp') delta = 0.1;\n    else if (e.key === 'Home') {\n      this._hsv = { ...this._hsv, a: 0 };\n      this._commit('change');\n      return;\n    } else if (e.key === 'End') {\n      this._hsv = { ...this._hsv, a: 1 };\n      this._commit('change');\n      return;\n    }\n    if (delta !== 0) {\n      e.preventDefault();\n      this._hsv = { ...this._hsv, a: clamp(this._hsv.a + delta, 0, 1) };\n      this._commit('change');\n    }\n  }\n\n  // ─── Input ───────────────────────────────────────────────────────────────\n\n  // P1-7: Bound to @input (was @change) for real-time color preview while typing\n  /** @internal */\n  private _handleInputChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    const parsed = parseColor(input.value.trim());\n    if (parsed) {\n      this._hsv = parsed;\n      this._commit('change');\n    }\n    this._inputValue = input.value;\n  }\n\n  /** @internal */\n  private _handleInputBlur(e: FocusEvent): void {\n    const input = e.target as HTMLInputElement;\n    const parsed = parseColor(input.value.trim());\n    if (parsed) {\n      this._hsv = parsed;\n      this._commit('change');\n    } else {\n      // Revert to current valid value\n      this._inputValue = formatColor(this._hsv, this.format, this.opacity);\n    }\n  }\n\n  /** @internal */\n  private _handleFormatCycle(): void {\n    const formats: ColorFormat[] = ['hex', 'rgb', 'hsl', 'hsv'];\n    const idx = formats.indexOf(this.format);\n    const next = formats[(idx + 1) % formats.length];\n    if (next !== undefined) this.format = next;\n    this._inputValue = formatColor(this._hsv, this.format, this.opacity);\n  }\n\n  // ─── Swatches ────────────────────────────────────────────────────────────\n\n  /** @internal */\n  private _handleSwatchClick(color: string): void {\n    const parsed = parseColor(color);\n    if (parsed) {\n      this._hsv = parsed;\n      this._commit('change');\n    }\n  }\n\n  // ─── Computed values ──────────────────────────────────────────────────────\n\n  /** @internal */\n  private _hueColor(): string {\n    return `hsl(${Math.round(this._hsv.h)}, 100%, 50%)`;\n  }\n\n  /** @internal */\n  private _previewColor(): string {\n    const rgb = hsvToRgb(this._hsv);\n    if (this.opacity && this._hsv.a < 1) {\n      return `rgb(${rgb.r} ${rgb.g} ${rgb.b} / ${Math.round(this._hsv.a * 100) / 100})`;\n    }\n    return `rgb(${rgb.r} ${rgb.g} ${rgb.b})`;\n  }\n\n  // ─── Render helpers ───────────────────────────────────────────────────────\n\n  /** @internal */\n  private _renderGrid() {\n    const thumbX = `${this._hsv.s}%`;\n    const thumbY = `${100 - this._hsv.v}%`;\n    const hueColor = this._hueColor();\n\n    // P0-1: Grid is now keyboard-operable — WCAG 2.1 SC 2.1.1 compliance\n    // Arrow keys adjust saturation (left/right) and value (up/down)\n    //\n    // A11y note (WCAG 4.1.2 — 2D slider aria-valuenow limitation): The ARIA slider role\n    // requires a single numeric aria-valuenow. This 2D control has two axes (saturation and\n    // value), so aria-valuenow reports only saturation (the primary/horizontal axis) per\n    // the ARIA 1.2 \"slider\" pattern. aria-valuetext compensates by announcing both axes\n    // (\"Saturation X%, Value Y%\") for all assistive technologies that support it.\n    return html`\n      <div\n        part=\"grid\"\n        class=\"gradient-grid\"\n        role=\"slider\"\n        tabindex=\"0\"\n        aria-label=${this.labelGradient}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=${Math.round(this._hsv.s)}\n        aria-valuetext=\"Saturation ${Math.round(this._hsv.s)}%, Value ${Math.round(this._hsv.v)}%\"\n        @pointerdown=${this._handleGridPointerDown}\n        @keydown=${this._handleGridKeydown}\n      >\n        <div class=\"gradient-grid-bg\" style=${styleMap({ '--_hue-color': hueColor })}></div>\n        <div\n          class=\"gradient-thumb\"\n          style=${styleMap({ '--_thumb-x': thumbX, '--_thumb-y': thumbY })}\n          aria-hidden=\"true\"\n        ></div>\n      </div>\n    `;\n  }\n\n  /** @internal */\n  private _renderHueSlider() {\n    const pct = `${(this._hsv.h / 360) * 100}%`;\n    const hueColor = this._hueColor();\n\n    // P1-8: part=\"slider hue-slider\" — exposes the documented shared \"slider\" CSS part\n    // P1-4: aria-valuetext announces the hue angle with degree symbol\n    return html`\n      <div\n        part=\"slider hue-slider\"\n        class=\"slider-track hue-track\"\n        role=\"slider\"\n        tabindex=\"0\"\n        aria-label=${this.labelHue}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"360\"\n        aria-valuenow=${Math.round(this._hsv.h)}\n        aria-valuetext=\"${Math.round(this._hsv.h)}°\"\n        @pointerdown=${this._handleHuePointerDown}\n        @keydown=${this._handleHueKeydown}\n      >\n        <div\n          class=\"slider-thumb\"\n          style=${styleMap({ '--_slider-pct': pct, '--_thumb-color': hueColor })}\n          aria-hidden=\"true\"\n        ></div>\n      </div>\n    `;\n  }\n\n  /** @internal */\n  private _renderOpacitySlider() {\n    if (!this.opacity) return nothing;\n    const pct = `${this._hsv.a * 100}%`;\n    const rgb = hsvToRgb(this._hsv);\n    const thumbColor = `rgb(${rgb.r} ${rgb.g} ${rgb.b} / ${Math.round(this._hsv.a * 100) / 100})`;\n    const hueColor = this._hueColor();\n\n    // P1-8: part=\"slider opacity-slider\" — exposes the documented shared \"slider\" CSS part\n    // P1-4: aria-valuetext announces the opacity as a percentage\n    return html`\n      <div\n        part=\"slider opacity-slider\"\n        class=\"slider-track opacity-track\"\n        role=\"slider\"\n        tabindex=\"0\"\n        aria-label=${this.labelOpacity}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=${Math.round(this._hsv.a * 100)}\n        aria-valuetext=\"${Math.round(this._hsv.a * 100)}%\"\n        style=${styleMap({ '--_hue-color': hueColor })}\n        @pointerdown=${this._handleOpacityPointerDown}\n        @keydown=${this._handleOpacityKeydown}\n      >\n        <div\n          class=\"slider-thumb\"\n          style=${styleMap({ '--_slider-pct': pct, '--_thumb-color': thumbColor })}\n          aria-hidden=\"true\"\n        ></div>\n      </div>\n    `;\n  }\n\n  /** @internal */\n  private _renderSwatches() {\n    if (!this.swatches?.length) return nothing;\n    return html`\n      <div part=\"swatches\" class=\"swatches\" role=\"group\" aria-label=${this.labelSwatches}>\n        ${this.swatches.map(\n          (color) => html`\n            <button\n              type=\"button\"\n              class=\"swatch-btn\"\n              style=${styleMap({ background: color })}\n              aria-label=${color}\n              title=${color}\n              @click=${() => this._handleSwatchClick(color)}\n            ></button>\n          `,\n        )}\n      </div>\n    `;\n  }\n\n  /** @internal */\n  private _renderInput() {\n    return html`\n      <div part=\"input\" class=\"input-area\">\n        <div\n          class=\"input-preview\"\n          style=${styleMap({ '--_preview-color': this._previewColor() })}\n          aria-hidden=\"true\"\n        ></div>\n        <button\n          type=\"button\"\n          class=\"format-btn\"\n          aria-label=${this.labelSwitchFormat}\n          title=\"Switch format\"\n          @click=${this._handleFormatCycle}\n        >\n          ${this.format}\n        </button>\n        <input\n          type=\"text\"\n          class=\"color-input\"\n          .value=${this._inputValue}\n          aria-label=${this.labelColorValue}\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          @input=${this._handleInputChange}\n          @blur=${this._handleInputBlur}\n        />\n      </div>\n    `;\n  }\n\n  /** @internal */\n  private _renderPanel() {\n    // A11y fix (WCAG 4.1.2): use role=\"group\" instead of role=\"dialog\" + aria-modal=\"true\".\n    // aria-modal=\"true\" requires a programmatic focus trap so screen readers restrict virtual\n    // cursor navigation to the dialog. Without Tab-key trapping, aria-modal causes JAWS/NVDA\n    // to hide all content outside the panel, stranding keyboard users who Tab out. role=\"group\"\n    // with aria-label provides the same grouping semantics without the false modal contract.\n    return html`\n      <div\n        class=\"panel\"\n        role=\"group\"\n        aria-label=${this.labelPicker}\n        tabindex=\"-1\"\n        @keydown=${this._handlePanelKeydown}\n      >\n        ${this.swatchesOnly\n          ? nothing\n          : html`${this._renderGrid()} ${this._renderHueSlider()} ${this._renderOpacitySlider()}`}\n        ${this._renderSwatches()} ${this._renderInput()}\n      </div>\n    `;\n  }\n\n  // ─── Main render ─────────────────────────────────────────────────────────\n\n  override render() {\n    const previewColor = this._previewColor();\n\n    if (this.inline) {\n      return html`\n        <div style=${styleMap({ '--_preview-color': previewColor })}>${this._renderPanel()}</div>\n      `;\n    }\n\n    // P1-3: aria-label includes the current color value so AT users know the selected color\n    return html`\n      <button\n        part=\"trigger\"\n        type=\"button\"\n        class=\"trigger\"\n        aria-label=${this.labelTrigger(this._inputValue)}\n        aria-expanded=${this._open ? 'true' : 'false'}\n        ?disabled=${this.disabled}\n        style=${styleMap({ '--_preview-color': previewColor })}\n        @click=${this._handleTriggerClick}\n      >\n        <slot name=\"trigger\">\n          <span class=\"trigger-swatch\" aria-hidden=\"true\"></span>\n          <span class=\"trigger-label\">${this._inputValue}</span>\n        </slot>\n      </button>\n      ${this._open ? this._renderPanel() : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-color-picker': HelixColorPicker;\n  }\n}\n"],"names":["helixColorPickerStyles","css","clamp","n","min","max","hexToRgb","hex","h","toHex2","rgbToHex","rgb","includeAlpha","base","rgbToHsv","r","g","b","d","s","v","hsvToRgb","hsv","i","f","p","q","t","rgbToHsl","l","parseColor","value","rgbMatch","rm1","rm2","rm3","rm4","hslMatch","hm1","hm2","hm3","hm4","a","c","x","m","hsvMatch","formatColor","format","hsl","HelixColorPicker","HelixElement","color","changedProperties","parsed","disabled","state","_mode","_a","_b","source","formatted","opts","panel","firstFocusable","e","rect","y","sDelta","vDelta","pct","delta","input","formats","idx","next","thumbX","thumbY","hueColor","html","styleMap","nothing","thumbColor","previewColor","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-container-31QT9KV_.js → hx-container-BwWbMPTH.js}

@@ -2,7 +2,7 @@ import { css as c, LitElement as h, html as x } from "lit";
 import "./document-token-adoption-DuYNKd4k.js";
 import { property as s, customElement as m } from "lit/decorators.js";
 import { classMap as l } from "lit/directives/class-map.js";
-const g = c`
+const v = c`
   :host {
     display: block;
     contain: layout style;
@@ -13,12 +13,6 @@ const g = c`
 
   /* ─── Vertical Padding Variants ─── */
 
-  /* Defensive reset: ensures zero vertical padding even if a future base rule adds it */
-  :host([padding='none']) {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
   :host([padding='sm']) {
     padding-top: var(--hx-space-6, 1.5rem);
     padding-bottom: var(--hx-space-6, 1.5rem);
@@ -85,10 +79,10 @@ const g = c`
     max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));
   }
 `;
-var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (t, a, i, e) => {
+var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (t, a, i, e) => {
   for (var n = e > 1 ? void 0 : e ? _(a, i) : a, o = t.length - 1, d; o >= 0; o--)
     (d = t[o]) && (n = (e ? d(a, i, n) : d(n)) || n);
-  return e && n && v(a, i, n), n;
+  return e && n && g(a, i, n), n;
 };
 let r = class extends h {
   constructor() {
@@ -107,7 +101,7 @@ let r = class extends h {
     `;
   }
 };
-r.styles = [g];
+r.styles = [v];
 p([
   s({ type: String, reflect: !0 })
 ], r.prototype, "width", 2);
@@ -120,4 +114,4 @@ r = p([
 export {
   r as H
 };
-//# sourceMappingURL=hx-container-31QT9KV_.js.map
+//# sourceMappingURL=hx-container-BwWbMPTH.js.map

package/dist/shared/hx-container-BwWbMPTH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-container-BwWbMPTH.js","sources":["../../src/components/hx-container/hx-container.styles.ts","../../src/components/hx-container/hx-container.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixContainerStyles = css`\n  :host {\n    display: block;\n    contain: layout style;\n    width: 100%;\n    background-color: var(--hx-container-bg, transparent);\n    box-sizing: border-box;\n  }\n\n  /* ─── Vertical Padding Variants ─── */\n\n  :host([padding='sm']) {\n    padding-top: var(--hx-space-6, 1.5rem);\n    padding-bottom: var(--hx-space-6, 1.5rem);\n  }\n\n  :host([padding='md']) {\n    padding-top: var(--hx-space-12, 3rem);\n    padding-bottom: var(--hx-space-12, 3rem);\n  }\n\n  :host([padding='lg']) {\n    padding-top: var(--hx-space-16, 4rem);\n    padding-bottom: var(--hx-space-16, 4rem);\n  }\n\n  :host([padding='xl']) {\n    padding-top: var(--hx-space-24, 6rem);\n    padding-bottom: var(--hx-space-24, 6rem);\n  }\n\n  :host([padding='2xl']) {\n    padding-top: var(--hx-space-32, 8rem);\n    padding-bottom: var(--hx-space-32, 8rem);\n  }\n\n  /* ─── Inner Container ─── */\n\n  .container__inner {\n    margin-inline-start: auto;\n    margin-inline-end: auto;\n    padding-inline-start: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));\n    padding-inline-end: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  /* ─── Width Variants ─── */\n\n  .container__inner--full {\n    max-width: none;\n  }\n\n  .container__inner--content {\n    max-width: var(--hx-container-max-width, var(--hx-container-content, 1152px));\n  }\n\n  .container__inner--narrow {\n    max-width: var(--hx-container-max-width, var(--hx-container-narrow, 768px));\n  }\n\n  .container__inner--sm {\n    max-width: var(--hx-container-max-width, var(--hx-container-sm, 640px));\n  }\n\n  .container__inner--md {\n    max-width: var(--hx-container-max-width, var(--hx-container-md, 768px));\n  }\n\n  .container__inner--lg {\n    max-width: var(--hx-container-max-width, var(--hx-container-lg, 1024px));\n  }\n\n  .container__inner--xl {\n    max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixContainerStyles } from './hx-container.styles.js';\n\n/**\n * A layout container that constrains content width and provides\n * consistent vertical spacing and horizontal gutters.\n *\n * Uses a two-layer model: the outer host spans full width (background,\n * vertical padding), while the inner wrapper constrains max-width,\n * centers content, and applies horizontal gutters.\n *\n * ## Accessibility\n *\n * `hx-container` is a purely visual layout primitive with no semantic meaning.\n * It carries no ARIA role and is intentionally transparent to assistive\n * technologies. Screen readers announce the container's children directly,\n * not the container itself.\n *\n * The inner wrapper always centers content horizontally (via `margin: auto`).\n * This is by design for page-layout use cases. If you need non-centered\n * alignment at a specific breakpoint, override `margin-left` and\n * `margin-right` on `::part(inner)` from your stylesheet.\n *\n * @summary Layout primitive for constraining content width with consistent spacing.\n *\n * @tag hx-container\n *\n * @slot - Default slot for container content.\n *\n * @csspart inner - The inner wrapper that constrains max-width and applies gutters.\n *\n * @cssprop [--hx-container-bg=transparent] - Background color on the outer wrapper.\n * @cssprop [--hx-container-gutter=var(--hx-space-6)] - Horizontal padding on the inner box.\n * @cssprop [--hx-container-max-width] - Override the max-width set by the width property.\n * @cssprop [--hx-container-content=72rem] - Max-width for the content width preset.\n * @cssprop [--hx-container-narrow=48rem] - Max-width for the narrow width preset.\n * @cssprop [--hx-container-sm=640px] - Max-width for the sm width preset.\n * @cssprop [--hx-container-md=768px] - Max-width for the md width preset.\n * @cssprop [--hx-container-lg=1024px] - Max-width for the lg width preset.\n * @cssprop [--hx-container-xl=1280px] - Max-width for the xl width preset.\n */\n@customElement('hx-container')\nexport class HelixContainer extends LitElement {\n  static override styles = [helixContainerStyles];\n\n  /**\n   * Controls the max-width of the inner content wrapper.\n   * @attr width\n   * @example\n   * // Width presets and their default max-width values:\n   * // full    → no max-width constraint\n   * // content → 72rem (1152px)\n   * // narrow  → 48rem (768px) — override with --hx-container-narrow\n   * // sm      → 640px — override with --hx-container-sm\n   * // md      → 768px — override with --hx-container-md\n   * // lg      → 1024px — override with --hx-container-lg\n   * // xl      → 1280px — override with --hx-container-xl\n   */\n  @property({ type: String, reflect: true })\n  width: 'full' | 'content' | 'narrow' | 'sm' | 'md' | 'lg' | 'xl' = 'content';\n\n  /**\n   * Vertical padding applied to the outer wrapper.\n   * @attr padding\n   */\n  @property({ type: String, reflect: true })\n  padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'none';\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      container__inner: true,\n      [`container__inner--${this.width}`]: true,\n    };\n\n    return html`\n      <div part=\"inner\" class=${classMap(classes)}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n/** Canonical type alias for the hx-container component. */\nexport type HxContainer = HelixContainer;\n\n/** @deprecated Use {@link HxContainer} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcContainer = HelixContainer;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-container': HelixContainer;\n  }\n}\n"],"names":["helixContainerStyles","css","HelixContainer","LitElement","classes","html","classMap","__decorateClass","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAuBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC2C7B,IAAMC,IAAN,cAA6BC,EAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAiBL,KAAA,QAAmE,WAOnE,KAAA,UAAsD;AAAA,EAAA;AAAA;AAAA,EAI7C,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,kBAAkB;AAAA,MAClB,CAAC,qBAAqB,KAAK,KAAK,EAAE,GAAG;AAAA,IAAA;AAGvC,WAAOC;AAAA,gCACqBC,EAASF,CAAO,CAAC;AAAA;AAAA;AAAA;AAAA,EAI/C;AACF;AAxCaF,EACK,SAAS,CAACF,CAAoB;AAgB9CO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhB9BN,EAiBX,WAAA,SAAA,CAAA;AAOAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvB9BN,EAwBX,WAAA,WAAA,CAAA;AAxBWA,IAANK,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBP,CAAA;"}

package/dist/shared/{hx-link-B8IwUMSc.js → hx-link-CN7AvGOW.js}

@@ -3,7 +3,7 @@ import "./document-token-adoption-DuYNKd4k.js";
 import { property as o, customElement as k } from "lit/decorators.js";
 import { classMap as p } from "lit/directives/class-map.js";
 import { ifDefined as a } from "lit/directives/if-defined.js";
-const m = v`
+const y = v`
   :host {
     display: inline;
   }
@@ -77,7 +77,7 @@ const m = v`
   .link--disabled {
     color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));
     text-decoration: none;
-    pointer-events: none;
+    cursor: not-allowed;
   }
 
   /* --- External link icon --- */
@@ -109,27 +109,31 @@ const m = v`
     border: 0;
   }
 `;
-var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (r, n, s, l) => {
-  for (var t = l > 1 ? void 0 : l ? b(n, s) : n, d = r.length - 1, h; d >= 0; d--)
-    (h = r[d]) && (t = (l ? h(n, s, t) : h(t)) || t);
-  return l && t && g(n, s, t), t;
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (e, n, s, l) => {
+  for (var t = l > 1 ? void 0 : l ? b(n, s) : n, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (t = (l ? h(n, s, t) : h(t)) || t);
+  return l && t && m(n, s, t), t;
 };
-let e = class extends x {
+let r = class extends x {
   constructor() {
     super(...arguments), this.href = void 0, this.target = void 0, this.variant = "default", this.disabled = !1, this.download = void 0, this.rel = void 0;
   }
   // --- Event Handling ---
+  /** @internal Blocks Enter and Space activation on disabled span. */
+  _handleDisabledKeydown(e) {
+    (e.key === "Enter" || e.key === " ") && e.preventDefault();
+  }
   /** @internal */
-  _handleClick(r) {
+  _handleClick(e) {
     if (this.disabled) {
-      r.preventDefault(), r.stopPropagation();
+      e.preventDefault(), e.stopPropagation();
       return;
     }
     this.dispatchEvent(
       new CustomEvent("hx-click", {
         bubbles: !0,
         composed: !0,
-        detail: { originalEvent: r }
+        detail: { originalEvent: e }
       })
     );
   }
@@ -160,7 +164,7 @@ let e = class extends x {
   }
   // --- Render ---
   render() {
-    const r = {
+    const e = {
       link: !0,
       [`link--${this.variant}`]: this.variant !== "default",
       "link--disabled": this.disabled
@@ -168,18 +172,19 @@ let e = class extends x {
     return this.disabled ? c`
         <span
           part="link"
-          class=${p(r)}
+          class=${p(e)}
           role="link"
           aria-disabled="true"
           tabindex="0"
           @click=${this._handleClick}
+          @keydown=${this._handleDisabledKeydown}
         >
           <slot></slot>
         </span>
       ` : c`
       <a
         part="link"
-        class=${p(r)}
+        class=${p(e)}
         href=${a(this.href)}
         target=${a(this.target)}
         rel=${a(this._computeRel())}
@@ -192,29 +197,29 @@ let e = class extends x {
     `;
   }
 };
-e.styles = [m];
+r.styles = [y];
 i([
   o({ type: String })
-], e.prototype, "href", 2);
+], r.prototype, "href", 2);
 i([
   o({ type: String })
-], e.prototype, "target", 2);
+], r.prototype, "target", 2);
 i([
   o({ type: String, reflect: !0 })
-], e.prototype, "variant", 2);
+], r.prototype, "variant", 2);
 i([
   o({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
+], r.prototype, "disabled", 2);
 i([
   o({ type: String })
-], e.prototype, "download", 2);
+], r.prototype, "download", 2);
 i([
   o({ type: String })
-], e.prototype, "rel", 2);
-e = i([
+], r.prototype, "rel", 2);
+r = i([
   k("hx-link")
-], e);
+], r);
 export {
-  e as H
+  r as H
 };
-//# sourceMappingURL=hx-link-B8IwUMSc.js.map
+//# sourceMappingURL=hx-link-CN7AvGOW.js.map