@helixui/library 3.3.1 → 3.4.0

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

@@ -1,882 +0,0 @@
-import { css as D, html as f, nothing as k } from "lit";
-import { F as O } from "./FormMixin-B8PXk5RQ.js";
-import { property as c, state as H, query as E, customElement as R } from "lit/decorators.js";
-import { styleMap as g } from "lit/directives/style-map.js";
-import { b as T } from "./forced-colors-CTEDFRGa.js";
-import { H as V } from "./helix-element-BNEYeiys.js";
-const B = D`
-  :host {
-    display: inline-block;
-    position: relative;
-    font-family: var(--hx-font-family-sans, sans-serif);
-    font-size: var(--hx-font-size-sm, 0.875rem);
-  }
-  :host([disabled]) {
-    pointer-events: none;
-    opacity: var(--hx-opacity-disabled, 0.5);
-  }
-  .trigger {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--hx-space-2, 0.5rem);
-    padding: var(--hx-space-1, 0.25rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
-    border-radius: var(--hx-border-radius-md, 0.375rem);
-    background: var(--hx-color-neutral-0, #ffffff);
-    cursor: pointer;
-    transition: border-color var(--hx-transition-fast, 150ms ease);
-  }
-  .trigger:hover:not([disabled]) {
-    border-color: var(
-      --hx-color-picker-trigger-hover-border-color,
-      var(--hx-color-primary-500, #429797)
-    );
-  }
-  :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
-    outline-offset: var(--hx-focus-ring-offset, 2px);
-  }
-  .trigger-swatch {
-    width: 1.5rem;
-    height: 1.5rem;
-    border-radius: var(--hx-border-radius-sm, 0.25rem);
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));
-    background: var(--_preview-color, #000);
-    display: block;
-    flex-shrink: 0;
-  }
-  .trigger-label {
-    font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-700, #313e4b);
-    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, #ffffff);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #d6dbd5);
-    border-radius: var(--hx-border-radius-lg, 0.5rem);
-    box-shadow: 0 8px 24px
-      var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 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, 0.75rem);
-    outline: none;
-  }
-  :host([inline]) .panel {
-    position: static;
-    box-shadow: none;
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #d6dbd5);
-    border-radius: var(--hx-border-radius-lg, 0.5rem);
-  }
-  .gradient-grid {
-    position: relative;
-    width: 100%;
-    height: var(--hx-color-picker-grid-height, 160px);
-    border-radius: var(--hx-border-radius-sm, 0.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, #ffffff)),
-      0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 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, #ffffff)),
-      0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 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, 0.25rem);
-  }
-  .swatch-btn {
-    width: 20px;
-    height: 20px;
-    border-radius: var(--hx-border-radius-sm, 0.25rem);
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));
-    cursor: pointer;
-    padding: 0;
-    flex-shrink: 0;
-    transition: transform var(--hx-transition-fast, 150ms 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, 0.3))
-    );
-  }
-  .input-area {
-    display: flex;
-    align-items: center;
-    gap: var(--hx-space-2, 0.5rem);
-  }
-  .format-btn {
-    flex-shrink: 0;
-    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    background: var(--hx-color-neutral-100, #ebeee9);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
-    border-radius: var(--hx-border-radius-sm, 0.25rem);
-    cursor: pointer;
-    font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-600, #4a5362);
-    text-transform: uppercase;
-    font-weight: var(--hx-font-weight-semibold, 600);
-    letter-spacing: 0.05em;
-  }
-  .color-input {
-    flex: 1;
-    min-width: 0;
-    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
-    border-radius: var(--hx-border-radius-sm, 0.25rem);
-    font-family: var(--hx-font-family-mono, monospace);
-    font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-900, #0d1825);
-    background: var(--hx-color-neutral-0, #ffffff);
-    outline: none;
-  }
-  .color-input:focus-visible {
-    border-color: var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
-    box-shadow: 0 0 0 2px
-      color-mix(
-        in srgb,
-        var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078)) 20%,
-        transparent
-      );
-  }
-  .input-preview {
-    width: 24px;
-    height: 24px;
-    border-radius: var(--hx-border-radius-sm, 0.25rem);
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));
-    background: var(--_preview-color, #000);
-    flex-shrink: 0;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .trigger,
-    .swatch-btn {
-      transition: none;
-    }
-  }
-  @media (forced-colors: active) {
-    .trigger {
-      forced-color-adjust: none;
-      background-color: Field;
-      color: FieldText;
-      border: 2px solid ButtonText;
-    }
-    .trigger:hover:not([disabled]) {
-      border-color: Highlight;
-    }
-    :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {
-      outline-color: Highlight;
-    }
-    .panel {
-      forced-color-adjust: none;
-      background-color: Canvas;
-      border: 2px solid CanvasText;
-      box-shadow: none;
-    }
-    .gradient-thumb,
-    .slider-thumb {
-      box-shadow: 0 0 0 2px CanvasText;
-    }
-    .swatch-btn {
-      border: 2px solid ButtonText;
-    }
-    .swatch-btn:hover {
-      border-color: Highlight;
-    }
-    .color-input {
-      forced-color-adjust: none;
-      background-color: Field;
-      color: FieldText;
-      border: 2px solid ButtonText;
-    }
-    .color-input:focus-visible {
-      border-color: Highlight;
-      box-shadow: none;
-    }
-    .format-btn {
-      forced-color-adjust: none;
-      background-color: ButtonFace;
-      color: ButtonText;
-      border: 2px solid ButtonText;
-    }
-    .trigger-label {
-      color: FieldText;
-    }
-    :host([disabled]) {
-      opacity: 1;
-    }
-    :host([disabled]) .trigger {
-      border-color: GrayText;
-      color: GrayText;
-    }
-  }
-`;
-function v(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(v(t, 0, 255)).toString(16).padStart(2, "0");
-}
-function U(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, o = Math.max(e, r, i), h = Math.min(e, r, i), s = o - h, d = o === 0 ? 0 : s / o, u = o;
-  let l = 0;
-  return s !== 0 && (o === e ? l = ((r - i) / s + (r < i ? 6 : 0)) / 6 : o === 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 F(t) {
-  const e = t.h / 360, r = t.s / 100, i = t.v / 100, o = Math.floor(e * 6), h = e * 6 - o, s = i * (1 - r), d = i * (1 - h * r), u = i * (1 - (1 - h) * r);
-  let l = 0, p = 0, b = 0;
-  switch (o % 6) {
-    case 0:
-      l = i, p = u, b = s;
-      break;
-    case 1:
-      l = d, p = i, b = s;
-      break;
-    case 2:
-      l = s, p = i, b = u;
-      break;
-    case 3:
-      l = s, p = d, b = i;
-      break;
-    case 4:
-      l = u, p = s, b = i;
-      break;
-    case 5:
-      l = i, p = s, b = d;
-      break;
-  }
-  return { r: Math.round(l * 255), g: Math.round(p * 255), b: Math.round(b * 255), a: t.a };
-}
-function I(t) {
-  const e = t.r / 255, r = t.g / 255, i = t.b / 255, o = Math.max(e, r, i), h = Math.min(e, r, i), s = (o + h) / 2;
-  let d = 0, u = 0;
-  if (o !== h) {
-    const l = o - h;
-    u = s > 0.5 ? l / (2 - o - h) : l / (o + h), o === e ? d = ((r - i) / l + (r < i ? 6 : 0)) / 6 : o === 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 o = G(t);
-    return o ? S(o) : null;
-  }
-  const e = t.match(
-    /rgba?\(\s*(\d+)(?:\s*,\s*|\s+)(\d+)(?:\s*,\s*|\s+)(\d+)(?:\s*(?:\/|,)\s*([\d.]+))?\s*\)/
-  );
-  if (e) {
-    const [, o, h, s, d] = e;
-    return S({
-      r: parseInt(o ?? "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 [, o, h, s, d] = r, u = parseFloat(o ?? "0"), l = parseFloat(h ?? "0") / 100, p = parseFloat(s ?? "0") / 100, b = 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 x = 0, y = 0, w = 0;
-    return u < 60 ? (x = m, y = _) : u < 120 ? (x = _, y = m) : u < 180 ? (y = m, w = _) : u < 240 ? (y = _, w = m) : u < 300 ? (x = _, w = m) : (x = m, w = _), S({
-      r: Math.round((x + M) * 255),
-      g: Math.round((y + M) * 255),
-      b: Math.round((w + M) * 255),
-      a: b
-    });
-  }
-  const i = t.match(
-    /hsva?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)/
-  );
-  if (i) {
-    const [, o, h, s, d] = i;
-    return {
-      h: parseFloat(o ?? "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 = F(t);
-  switch (e) {
-    case "hex":
-      return U(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 o = I(i);
-      return r && t.a < 1 ? `hsl(${Math.round(o.h)} ${Math.round(o.s)}% ${Math.round(o.l)}% / ${Math.round(t.a * 100) / 100})` : `hsl(${Math.round(o.h)} ${Math.round(o.s)}% ${Math.round(o.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 L = Object.defineProperty, q = Object.getOwnPropertyDescriptor, n = (t, e, r, i) => {
-  for (var o = i > 1 ? void 0 : i ? q(e, r) : e, h = t.length - 1, s; h >= 0; h--)
-    (s = t[h]) && (o = (i ? s(e, r, o) : s(o)) || o);
-  return i && o && L(e, r, o), o;
-};
-let a = class extends O(V) {
-  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._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();
-  }
-  // ─── 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);
-  }
-  /** @internal */
-  _onFormDisabled(t) {
-    this.disabled = t;
-  }
-  /** @internal */
-  _onFormReset() {
-    this.value = "#000000", this._internals.setFormValue(null), this._resetInteractionState();
-  }
-  /** @internal */
-  _onFormStateRestore(t, e) {
-    typeof t == "string" && (this.value = t);
-  }
-  /** @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), this._handleInteractionInput();
-    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 o;
-    const e = this._dragRect ?? ((o = this._gridEl) == null ? void 0 : o.getBoundingClientRect());
-    if (!e) return;
-    const r = v((t.clientX - e.left) / e.width, 0, 1), i = v((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: v(this._hsv.s + e, 0, 100),
-      v: v(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 = v((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 = v((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: v(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: v(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 = F(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 = F(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}
-    `;
-  }
-};
-a.styles = [B, T];
-a.formAssociated = !0;
-n([
-  c({ type: String, reflect: !0 })
-], a.prototype, "value", 2);
-n([
-  c({ type: String, reflect: !0 })
-], a.prototype, "format", 2);
-n([
-  c({ type: Boolean, reflect: !0 })
-], a.prototype, "opacity", 2);
-n([
-  c({ attribute: !1 })
-], a.prototype, "swatches", 2);
-n([
-  c({ type: Boolean, reflect: !0, attribute: "swatches-only" })
-], a.prototype, "swatchesOnly", 2);
-n([
-  c({ type: Boolean, reflect: !0 })
-], a.prototype, "disabled", 2);
-n([
-  c({ type: String, reflect: !0 })
-], a.prototype, "name", 2);
-n([
-  c({ type: Boolean, reflect: !0 })
-], a.prototype, "inline", 2);
-n([
-  c({ type: Boolean, reflect: !0 })
-], a.prototype, "required", 2);
-n([
-  c({ type: String, attribute: "label-gradient" })
-], a.prototype, "labelGradient", 2);
-n([
-  c({ type: String, attribute: "label-hue" })
-], a.prototype, "labelHue", 2);
-n([
-  c({ type: String, attribute: "label-opacity" })
-], a.prototype, "labelOpacity", 2);
-n([
-  c({ type: String, attribute: "label-swatches" })
-], a.prototype, "labelSwatches", 2);
-n([
-  c({ type: String, attribute: "label-switch-format" })
-], a.prototype, "labelSwitchFormat", 2);
-n([
-  c({ type: String, attribute: "label-color-value" })
-], a.prototype, "labelColorValue", 2);
-n([
-  c({ type: String, attribute: "label-picker" })
-], a.prototype, "labelPicker", 2);
-n([
-  c({ attribute: !1 })
-], a.prototype, "labelTrigger", 2);
-n([
-  H()
-], a.prototype, "_hsv", 2);
-n([
-  H()
-], a.prototype, "_open", 2);
-n([
-  H()
-], a.prototype, "_inputValue", 2);
-n([
-  E('[part="grid"]')
-], a.prototype, "_gridEl", 2);
-n([
-  E('[part="hue-slider"]')
-], a.prototype, "_hueSliderEl", 2);
-n([
-  E('[part="opacity-slider"]')
-], a.prototype, "_opacitySliderEl", 2);
-a = n([
-  R("hx-color-picker")
-], a);
-export {
-  a as H
-};
-//# sourceMappingURL=hx-color-picker-uRc865FJ.js.map