@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/shared/hx-color-picker-Dk2Myvaf.js

@@ -0,0 +1,612 @@
+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 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);
+  return isNaN(r) ? null : {
+    r: r >>> 24 & 255,
+    g: r >>> 16 & 255,
+    b: r >>> 8 & 255,
+    a: (r & 255) / 255
+  };
+}
+function $(t) {
+  return Math.round(b(t, 0, 255)).toString(16).padStart(2, "0");
+}
+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), h = Math.min(e, r, i), s = a - h, d = a === 0 ? 0 : s / a, u = a;
+  let l = 0;
+  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 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 = s;
+      break;
+    case 1:
+      l = d, p = i, v = s;
+      break;
+    case 2:
+      l = s, p = i, v = u;
+      break;
+    case 3:
+      l = s, p = d, v = i;
+      break;
+    case 4:
+      l = u, p = s, v = i;
+      break;
+    case 5:
+      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 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 !== 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: s * 100, a: t.a };
+}
+function P(t) {
+  if (!t) return null;
+  if (t.startsWith("#")) {
+    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, h, s, d] = e;
+    return S({
+      r: parseInt(a ?? "0", 10),
+      g: parseInt(h ?? "0", 10),
+      b: parseInt(s ?? "0", 10),
+      a: d !== void 0 ? parseFloat(d) : 1
+    });
+  }
+  const r = t.match(
+    /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;
+    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
+    });
+  }
+  const i = t.match(
+    /hsva?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)/
+  );
+  if (i) {
+    const [, a, h, s, d] = i;
+    return {
+      h: parseFloat(a ?? "0"),
+      s: parseFloat(h ?? "0"),
+      v: parseFloat(s ?? "0"),
+      a: d !== void 0 ? parseFloat(d) : 1
+    };
+  }
+  return null;
+}
+function C(t, e, r) {
+  const i = E(t);
+  switch (e) {
+    case "hex":
+      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 = 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)}%)`;
+  }
+}
+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._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() {
+    super.connectedCallback(), this._syncFromValue();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), typeof document < "u" && (document.removeEventListener("click", this._boundDocumentClick, !0), document.removeEventListener("pointermove", this._boundPointerMove), document.removeEventListener("pointerup", this._boundPointerUp));
+  }
+  willUpdate(t) {
+    t.has("value") && this._syncFromValue(), t.has("required") && this._updateValidity();
+  }
+  // ─── Sync ────────────────────────────────────────────────────────────────
+  /** @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();
+  }
+  /** @internal */
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
+  /** @internal */
+  formResetCallback() {
+    this.value = "#000000", this._internals.setFormValue(null);
+  }
+  /** @internal */
+  formStateRestoreCallback(t, e) {
+    typeof t == "string" && (this.value = t);
+  }
+  /** Returns the ValidityState object. */
+  get validity() {
+    return this._internals.validity;
+  }
+  /** Returns the current validation message. */
+  get validationMessage() {
+    return this._internals.validationMessage;
+  }
+  /** Checks whether the picker satisfies its constraints. */
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  /** Reports validity and shows the browser's constraint validation UI. */
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+  /** @internal */
+  _updateValidity() {
+    var t, e;
+    this.required && !this.value ? this._internals.setValidity(
+      { valueMissing: !0 },
+      "Please select a color.",
+      ((t = this.shadowRoot) == null ? void 0 : t.querySelector('[part="trigger"]')) ?? ((e = this.shadowRoot) == null ? void 0 : e.querySelector('[part="grid"]')) ?? void 0
+    ) : this._internals.setValidity({});
+  }
+  /** @internal */
+  _commit(t) {
+    const e = C(this._hsv, this.format, this.opacity);
+    this.value = e, this._inputValue = e, this._internals.setFormValue(e);
+    const i = {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: e }
+    };
+    t === "drag" ? this.dispatchEvent(new CustomEvent("hx-input", i)) : this.dispatchEvent(new CustomEvent("hx-change", i));
+  }
+  // ─── Panel open/close ────────────────────────────────────────────────────
+  /** @internal */
+  _show() {
+    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() {
+    this._open && (this._open = !1, typeof document < "u" && document.removeEventListener("click", this._boundDocumentClick, !0));
+  }
+  /** @internal */
+  _handleDocumentClick(t) {
+    this._open && (t.composedPath().includes(this) || this._hide());
+  }
+  /** @internal */
+  _handleTriggerClick(t) {
+    t.stopPropagation(), this._open ? this._hide() : this._show();
+  }
+  /** @internal */
+  _handlePanelKeydown(t) {
+    var e, r;
+    t.key === "Escape" && (t.stopPropagation(), this._hide(), (r = (e = this.shadowRoot) == null ? void 0 : e.querySelector('[part="trigger"]')) == null || r.focus());
+  }
+  // ─── Gradient grid dragging ───────────────────────────────────────────────
+  /** @internal */
+  _handleGridPointerDown(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 a;
+    const e = this._dragRect ?? ((a = this._gridEl) == null ? void 0 : a.getBoundingClientRect());
+    if (!e) return;
+    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 */
+  _handleGridKeydown(t) {
+    let e = 0, r = 0;
+    if (t.key === "ArrowLeft") e = -1;
+    else if (t.key === "ArrowRight") e = 1;
+    else if (t.key === "ArrowUp") r = 1;
+    else if (t.key === "ArrowDown") r = -1;
+    else if (t.key === "PageUp") r = 10;
+    else if (t.key === "PageDown") r = -10;
+    else if (t.key === "Home") {
+      this._hsv = { ...this._hsv, s: 0, v: 100 }, this._commit("change");
+      return;
+    } else if (t.key === "End") {
+      this._hsv = { ...this._hsv, s: 100, v: 0 }, this._commit("change");
+      return;
+    }
+    (e !== 0 || r !== 0) && (t.preventDefault(), this._hsv = {
+      ...this._hsv,
+      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) {
+    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 i;
+    const e = this._dragRect ?? ((i = this._hueSliderEl) == null ? void 0 : i.getBoundingClientRect());
+    if (!e) return;
+    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) {
+    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 i;
+    const e = this._dragRect ?? ((i = this._opacitySliderEl) == null ? void 0 : i.getBoundingClientRect());
+    if (!e) return;
+    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 */
+  _handlePointerMove(t) {
+    this._draggingGrid ? this._updateGridFromPointer(t) : this._draggingHue ? this._updateHueFromPointer(t) : this._draggingOpacity && this._updateOpacityFromPointer(t);
+  }
+  /** @internal */
+  _handlePointerUp() {
+    (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 */
+  _handleHueKeydown(t) {
+    let e = 0;
+    if (t.key === "ArrowLeft" || t.key === "ArrowDown") e = -1;
+    else if (t.key === "ArrowRight" || t.key === "ArrowUp") e = 1;
+    else if (t.key === "PageDown") e = -10;
+    else if (t.key === "PageUp") e = 10;
+    else if (t.key === "Home") {
+      this._hsv = { ...this._hsv, h: 0 }, this._commit("change");
+      return;
+    } else if (t.key === "End") {
+      this._hsv = { ...this._hsv, h: 360 }, this._commit("change");
+      return;
+    }
+    e !== 0 && (t.preventDefault(), this._hsv = { ...this._hsv, h: b(this._hsv.h + e, 0, 360) }, this._commit("change"));
+  }
+  /** @internal */
+  _handleOpacityKeydown(t) {
+    let e = 0;
+    if (t.key === "ArrowLeft" || t.key === "ArrowDown") e = -0.01;
+    else if (t.key === "ArrowRight" || t.key === "ArrowUp") e = 0.01;
+    else if (t.key === "PageDown") e = -0.1;
+    else if (t.key === "PageUp") e = 0.1;
+    else if (t.key === "Home") {
+      this._hsv = { ...this._hsv, a: 0 }, this._commit("change");
+      return;
+    } else if (t.key === "End") {
+      this._hsv = { ...this._hsv, a: 1 }, this._commit("change");
+      return;
+    }
+    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
+  /** @internal */
+  _handleInputChange(t) {
+    const e = t.target, r = P(e.value.trim());
+    r && (this._hsv = r, this._commit("change")), this._inputValue = e.value;
+  }
+  /** @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);
+  }
+  /** @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);
+  }
+  // ─── Swatches ────────────────────────────────────────────────────────────
+  /** @internal */
+  _handleSwatchClick(t) {
+    const e = P(t);
+    e && (this._hsv = e, this._commit("change"));
+  }
+  // ─── Computed values ──────────────────────────────────────────────────────
+  /** @internal */
+  _hueColor() {
+    return `hsl(${Math.round(this._hsv.h)}, 100%, 50%)`;
+  }
+  /** @internal */
+  _previewColor() {
+    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 ───────────────────────────────────────────────────────
+  /** @internal */
+  _renderGrid() {
+    const t = `${this._hsv.s}%`, e = `${100 - this._hsv.v}%`, r = this._hueColor();
+    return f`
+      <div
+        part="grid"
+        class="gradient-grid"
+        role="slider"
+        tabindex="0"
+        aria-label=${this.labelGradient}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${Math.round(this._hsv.s)}
+        aria-valuetext="Saturation ${Math.round(this._hsv.s)}%, Value ${Math.round(this._hsv.v)}%"
+        @pointerdown=${this._handleGridPointerDown}
+        @keydown=${this._handleGridKeydown}
+      >
+        <div class="gradient-grid-bg" style=${g({ "--_hue-color": r })}></div>
+        <div
+          class="gradient-thumb"
+          style=${g({ "--_thumb-x": t, "--_thumb-y": e })}
+          aria-hidden="true"
+        ></div>
+      </div>
+    `;
+  }
+  /** @internal */
+  _renderHueSlider() {
+    const t = `${this._hsv.h / 360 * 100}%`, e = this._hueColor();
+    return f`
+      <div
+        part="slider hue-slider"
+        class="slider-track hue-track"
+        role="slider"
+        tabindex="0"
+        aria-label=${this.labelHue}
+        aria-valuemin="0"
+        aria-valuemax="360"
+        aria-valuenow=${Math.round(this._hsv.h)}
+        aria-valuetext="${Math.round(this._hsv.h)}°"
+        @pointerdown=${this._handleHuePointerDown}
+        @keydown=${this._handleHueKeydown}
+      >
+        <div
+          class="slider-thumb"
+          style=${g({ "--_slider-pct": t, "--_thumb-color": e })}
+          aria-hidden="true"
+        ></div>
+      </div>
+    `;
+  }
+  /** @internal */
+  _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`
+      <div
+        part="slider opacity-slider"
+        class="slider-track opacity-track"
+        role="slider"
+        tabindex="0"
+        aria-label=${this.labelOpacity}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${Math.round(this._hsv.a * 100)}
+        aria-valuetext="${Math.round(this._hsv.a * 100)}%"
+        style=${g({ "--_hue-color": i })}
+        @pointerdown=${this._handleOpacityPointerDown}
+        @keydown=${this._handleOpacityKeydown}
+      >
+        <div
+          class="slider-thumb"
+          style=${g({ "--_slider-pct": t, "--_thumb-color": r })}
+          aria-hidden="true"
+        ></div>
+      </div>
+    `;
+  }
+  /** @internal */
+  _renderSwatches() {
+    var t;
+    return (t = this.swatches) != null && t.length ? f`
+      <div part="swatches" class="swatches" role="group" aria-label=${this.labelSwatches}>
+        ${this.swatches.map(
+      (e) => f`
+            <button
+              type="button"
+              class="swatch-btn"
+              style=${g({ background: e })}
+              aria-label=${e}
+              title=${e}
+              @click=${() => this._handleSwatchClick(e)}
+            ></button>
+          `
+    )}
+      </div>
+    ` : k;
+  }
+  /** @internal */
+  _renderInput() {
+    return f`
+      <div part="input" class="input-area">
+        <div
+          class="input-preview"
+          style=${g({ "--_preview-color": this._previewColor() })}
+          aria-hidden="true"
+        ></div>
+        <button
+          type="button"
+          class="format-btn"
+          aria-label=${this.labelSwitchFormat}
+          title="Switch format"
+          @click=${this._handleFormatCycle}
+        >
+          ${this.format}
+        </button>
+        <input
+          type="text"
+          class="color-input"
+          .value=${this._inputValue}
+          aria-label=${this.labelColorValue}
+          autocomplete="off"
+          spellcheck="false"
+          @input=${this._handleInputChange}
+          @blur=${this._handleInputBlur}
+        />
+      </div>
+    `;
+  }
+  /** @internal */
+  _renderPanel() {
+    return f`
+      <div
+        class="panel"
+        role="group"
+        aria-label=${this.labelPicker}
+        tabindex="-1"
+        @keydown=${this._handlePanelKeydown}
+      >
+        ${this.swatchesOnly ? k : f`${this._renderGrid()} ${this._renderHueSlider()} ${this._renderOpacitySlider()}`}
+        ${this._renderSwatches()} ${this._renderInput()}
+      </div>
+    `;
+  }
+  // ─── Main render ─────────────────────────────────────────────────────────
+  render() {
+    const t = this._previewColor();
+    return this.inline ? f`
+        <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" : "false"}
+        ?disabled=${this.disabled}
+        style=${g({ "--_preview-color": t })}
+        @click=${this._handleTriggerClick}
+      >
+        <slot name="trigger">
+          <span class="trigger-swatch" aria-hidden="true"></span>
+          <span class="trigger-label">${this._inputValue}</span>
+        </slot>
+      </button>
+      ${this._open ? this._renderPanel() : k}
+    `;
+  }
+};
+o.styles = [R, U];
+o.formAssociated = !0;
+n([
+  c({ type: String, reflect: !0 })
+], o.prototype, "value", 2);
+n([
+  c({ type: String, reflect: !0 })
+], o.prototype, "format", 2);
+n([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "opacity", 2);
+n([
+  c({ attribute: !1 })
+], o.prototype, "swatches", 2);
+n([
+  c({ type: Boolean, reflect: !0, attribute: "swatches-only" })
+], o.prototype, "swatchesOnly", 2);
+n([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+n([
+  c({ type: String, reflect: !0 })
+], o.prototype, "name", 2);
+n([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "inline", 2);
+n([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "required", 2);
+n([
+  c({ type: String, attribute: "label-gradient" })
+], o.prototype, "labelGradient", 2);
+n([
+  c({ type: String, attribute: "label-hue" })
+], o.prototype, "labelHue", 2);
+n([
+  c({ type: String, attribute: "label-opacity" })
+], o.prototype, "labelOpacity", 2);
+n([
+  c({ type: String, attribute: "label-swatches" })
+], o.prototype, "labelSwatches", 2);
+n([
+  c({ type: String, attribute: "label-switch-format" })
+], o.prototype, "labelSwitchFormat", 2);
+n([
+  c({ type: String, attribute: "label-color-value" })
+], o.prototype, "labelColorValue", 2);
+n([
+  c({ type: String, attribute: "label-picker" })
+], o.prototype, "labelPicker", 2);
+n([
+  c({ attribute: !1 })
+], 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")
+], o);
+export {
+  o as H
+};
+//# sourceMappingURL=hx-color-picker-Dk2Myvaf.js.map