@helixui/library 1.0.1 → 1.1.2

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

@@ -1,803 +0,0 @@
-import { css as H, LitElement as O, html as p, nothing as k } from "lit";
-import { property as m, state as F, customElement as G } from "lit/decorators.js";
-import { styleMap as f } from "lit/directives/style-map.js";
-import { tokenStyles as I } from "@helixui/tokens/lit";
-const E = H`
-  :host {
-    display: inline-block;
-    position: relative;
-    font-family: var(--hx-font-family-base, sans-serif);
-    font-size: var(--hx-font-size-sm, 0.875rem);
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-    opacity: var(--hx-opacity-disabled, 0.4);
-  }
-
-  /* ─── Trigger ─── */
-
-  .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, #d1d5db);
-    border-radius: var(--hx-border-radius-md, 0.375rem);
-    background: var(--hx-color-neutral-0, #fff);
-    cursor: pointer;
-    transition: border-color var(--hx-transition-fast, 0.15s ease);
-  }
-
-  .trigger:hover:not([disabled]) {
-    border-color: var(--hx-color-primary-500, #3b82f6);
-  }
-
-  .trigger:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
-    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);
-    /* P1-6: was hardcoded rgba(0,0,0,0.1) */
-    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, #374151);
-    font-family: var(--hx-font-family-mono, monospace);
-    white-space: nowrap;
-  }
-
-  /* ─── Panel ─── */
-
-  .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);
-    /* P1-6: border width now uses token */
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);
-    border-radius: var(--hx-border-radius-lg, 0.5rem);
-    /* P1-6: panel shadow uses component token */
-    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);
-    /* P2-8: panel width is now a CSS custom property */
-    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, #e5e7eb);
-    border-radius: var(--hx-border-radius-lg, 0.5rem);
-  }
-
-  /* ─── Gradient Grid ─── */
-
-  .gradient-grid {
-    position: relative;
-    width: 100%;
-    /* P2-8: grid height is now a CSS custom property */
-    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;
-  }
-
-  /* P0-1: focus ring for keyboard-operable gradient grid */
-  .gradient-grid:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
-    outline-offset: var(--hx-focus-ring-offset, 2px);
-  }
-
-  .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%;
-    /* A11y fix (WCAG 1.4.11): double-ring ensures thumb visibility on light hue backgrounds
-       (yellow, cyan) where a white-only border falls below 3:1 non-text contrast.
-       Inner dark ring at 1px provides contrast against light backgrounds;
-       outer white ring at 2px provides contrast against dark backgrounds. */
-    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, 0.3)));
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-    top: var(--_thumb-y, 0%);
-    left: var(--_thumb-x, 100%);
-  }
-
-  /* ─── Sliders ─── */
-
-  .slider-track {
-    position: relative;
-    width: 100%;
-    height: 12px;
-    border-radius: 6px;
-    cursor: pointer;
-    touch-action: none;
-    flex-shrink: 0;
-  }
-
-  .slider-track:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
-    outline-offset: var(--hx-focus-ring-offset, 2px);
-  }
-
-  .hue-track {
-    background: linear-gradient(
-      to right,
-      hsl(0, 100%, 50%),
-      hsl(30, 100%, 50%),
-      hsl(60, 100%, 50%),
-      hsl(90, 100%, 50%),
-      hsl(120, 100%, 50%),
-      hsl(150, 100%, 50%),
-      hsl(180, 100%, 50%),
-      hsl(210, 100%, 50%),
-      hsl(240, 100%, 50%),
-      hsl(270, 100%, 50%),
-      hsl(300, 100%, 50%),
-      hsl(330, 100%, 50%),
-      hsl(360, 100%, 50%)
-    );
-  }
-
-  .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%;
-    /* A11y fix (WCAG 1.4.11): double-ring ensures thumb visibility on light hue backgrounds
-       (yellow, cyan) where a white-only border falls below 3:1 non-text contrast.
-       Inner dark ring at 1px provides contrast against light backgrounds;
-       outer white ring at 2px provides contrast against dark backgrounds. */
-    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, 0.3)));
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-    left: var(--_slider-pct, 0%);
-    background: var(--_thumb-color, hsl(0, 100%, 50%));
-  }
-
-  /* ─── Swatches ─── */
-
-  .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);
-    /* P1-6: was hardcoded rgba(0,0,0,0.1) */
-    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, 0.15s ease);
-  }
-
-  .swatch-btn:hover {
-    transform: scale(1.15);
-    /* P1-6: was hardcoded rgba(0,0,0,0.3) */
-    border-color: var(
-      --hx-color-picker-swatch-border-hover,
-      var(--hx-overlay-black-30, rgba(0, 0, 0, 0.3))
-    );
-  }
-
-  .swatch-btn:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
-    outline-offset: var(--hx-focus-ring-offset, 2px);
-  }
-
-  /* ─── Input ─── */
-
-  .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, #f3f4f6);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);
-    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, #4b5563);
-    text-transform: uppercase;
-    font-weight: var(--hx-font-weight-semibold, 600);
-    letter-spacing: 0.05em;
-  }
-
-  .format-btn:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
-    outline-offset: var(--hx-focus-ring-offset, 2px);
-  }
-
-  .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, #d1d5db);
-    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, #111827);
-    background: var(--hx-color-neutral-0, #fff);
-    outline: none;
-  }
-
-  .color-input:focus {
-    border-color: var(--hx-focus-ring-color, #2563eb);
-    /* P1-5: was invalid "box-shadow: ... / 0.2" syntax; replaced with valid box-shadow */
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--hx-focus-ring-color, #2563eb) 20%, transparent);
-  }
-
-  /* ─── Color preview strip in input area ─── */
-
-  .input-preview {
-    width: 24px;
-    height: 24px;
-    border-radius: var(--hx-border-radius-sm, 0.25rem);
-    /* P1-6: was hardcoded rgba(0,0,0,0.1) */
-    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;
-  }
-
-  /* ─── Reduced Motion ─── */
-
-  @media (prefers-reduced-motion: reduce) {
-    .trigger,
-    .swatch-btn {
-      transition: none;
-    }
-  }
-`;
-var V = Object.defineProperty, U = Object.getOwnPropertyDescriptor, c = (t, e, r, i) => {
-  for (var o = i > 1 ? void 0 : i ? U(e, r) : e, a = t.length - 1, s; a >= 0; a--)
-    (s = t[a]) && (o = (i ? s(e, r, o) : s(o)) || o);
-  return i && o && V(e, r, o), o;
-};
-function g(t, e, r) {
-  return Math.max(e, Math.min(r, t));
-}
-function A(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(g(t, 0, 255)).toString(16).padStart(2, "0");
-}
-function R(t, e) {
-  const r = `#${$(t.r)}${$(t.g)}${$(t.b)}`;
-  return e && t.a < 1 ? r + $(t.a * 255) : r;
-}
-function D(t) {
-  const e = t.r / 255, r = t.g / 255, i = t.b / 255, o = Math.max(e, r, i), a = Math.min(e, r, i), s = o - a, h = o === 0 ? 0 : s / o, l = o;
-  let n = 0;
-  return s !== 0 && (o === e ? n = ((r - i) / s + (r < i ? 6 : 0)) / 6 : o === r ? n = ((i - e) / s + 2) / 6 : n = ((e - r) / s + 4) / 6), { h: n * 360, s: h * 100, v: l * 100, a: t.a };
-}
-function S(t) {
-  const e = t.h / 360, r = t.s / 100, i = t.v / 100, o = Math.floor(e * 6), a = e * 6 - o, s = i * (1 - r), h = i * (1 - a * r), l = i * (1 - (1 - a) * r);
-  let n = 0, u = 0, v = 0;
-  switch (o % 6) {
-    case 0:
-      n = i, u = l, v = s;
-      break;
-    case 1:
-      n = h, u = i, v = s;
-      break;
-    case 2:
-      n = s, u = i, v = l;
-      break;
-    case 3:
-      n = s, u = h, v = i;
-      break;
-    case 4:
-      n = l, u = s, v = i;
-      break;
-    case 5:
-      n = i, u = s, v = h;
-      break;
-  }
-  return { r: Math.round(n * 255), g: Math.round(u * 255), b: Math.round(v * 255), a: t.a };
-}
-function T(t) {
-  const e = t.r / 255, r = t.g / 255, i = t.b / 255, o = Math.max(e, r, i), a = Math.min(e, r, i), s = (o + a) / 2;
-  let h = 0, l = 0;
-  if (o !== a) {
-    const n = o - a;
-    l = s > 0.5 ? n / (2 - o - a) : n / (o + a), o === e ? h = ((r - i) / n + (r < i ? 6 : 0)) / 6 : o === r ? h = ((i - e) / n + 2) / 6 : h = ((e - r) / n + 4) / 6;
-  }
-  return { h: h * 360, s: l * 100, l: s * 100, a: t.a };
-}
-function P(t) {
-  if (!t) return null;
-  if (t.startsWith("#")) {
-    const o = A(t);
-    return o ? D(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, a, s, h] = e;
-    return D({
-      r: parseInt(o ?? "0", 10),
-      g: parseInt(a ?? "0", 10),
-      b: parseInt(s ?? "0", 10),
-      a: h !== void 0 ? parseFloat(h) : 1
-    });
-  }
-  const r = t.match(
-    /hsla?\(\s*([\d.]+)(?:\s*,\s*|\s+)([\d.]+)%(?:\s*,\s*|\s+)([\d.]+)%(?:\s*(?:\/|,)\s*([\d.]+))?\s*\)/
-  );
-  if (r) {
-    const [, o, a, s, h] = r, l = parseFloat(o ?? "0"), n = parseFloat(a ?? "0") / 100, u = parseFloat(s ?? "0") / 100, v = h !== void 0 ? parseFloat(h) : 1, b = (1 - Math.abs(2 * u - 1)) * n, _ = b * (1 - Math.abs(l / 60 % 2 - 1)), M = u - b / 2;
-    let x = 0, w = 0, y = 0;
-    return l < 60 ? (x = b, w = _) : l < 120 ? (x = _, w = b) : l < 180 ? (w = b, y = _) : l < 240 ? (w = _, y = b) : l < 300 ? (x = _, y = b) : (x = b, y = _), D({
-      r: Math.round((x + M) * 255),
-      g: Math.round((w + M) * 255),
-      b: Math.round((y + M) * 255),
-      a: v
-    });
-  }
-  const i = t.match(
-    /hsva?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)/
-  );
-  if (i) {
-    const [, o, a, s, h] = i;
-    return {
-      h: parseFloat(o ?? "0"),
-      s: parseFloat(a ?? "0"),
-      v: parseFloat(s ?? "0"),
-      a: h !== void 0 ? parseFloat(h) : 1
-    };
-  }
-  return null;
-}
-function C(t, e, r) {
-  const i = S(t);
-  switch (e) {
-    case "hex":
-      return R(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 = T(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)}%)`;
-  }
-}
-let d = 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._hsv = { h: 0, s: 0, v: 0, a: 1 }, this._open = !1, this._inputValue = "#000000", this._draggingGrid = !1, this._draggingHue = !1, this._draggingOpacity = !1, this._internals = this.attachInternals(), this._boundPointerMove = this._handlePointerMove.bind(this), this._boundPointerUp = this._handlePointerUp.bind(this), this._boundDocumentClick = this._handleDocumentClick.bind(this);
-  }
-  // ─── Lifecycle ───────────────────────────────────────────────────────────
-  connectedCallback() {
-    super.connectedCallback(), this._syncFromValue(), document.addEventListener("click", this._boundDocumentClick, !0), document.addEventListener("pointermove", this._boundPointerMove), document.addEventListener("pointerup", this._boundPointerUp);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this._boundDocumentClick, !0), document.removeEventListener("pointermove", this._boundPointerMove), document.removeEventListener("pointerup", this._boundPointerUp);
-  }
-  willUpdate(t) {
-    t.has("value") && this._syncFromValue();
-  }
-  // ─── Sync ────────────────────────────────────────────────────────────────
-  _syncFromValue() {
-    const t = P(this.value);
-    t && (this._hsv = t), this._inputValue = C(this._hsv, this.format, this.opacity), this._internals.setFormValue(this.value);
-  }
-  /** Called when a parent fieldset is disabled/enabled. */
-  formDisabledCallback(t) {
-    this.disabled = t;
-  }
-  _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 ────────────────────────────────────────────────────
-  _show() {
-    this._open || this.inline || (this._open = !0);
-  }
-  _hide() {
-    this._open && (this._open = !1);
-  }
-  _handleDocumentClick(t) {
-    this._open && (t.composedPath().includes(this) || this._hide());
-  }
-  _handleTriggerClick(t) {
-    t.stopPropagation(), this._open ? this._hide() : this._show();
-  }
-  _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 ───────────────────────────────────────────────
-  _handleGridPointerDown(t) {
-    this.disabled || (t.preventDefault(), this._draggingGrid = !0, t.currentTarget.setPointerCapture(t.pointerId), this._updateGridFromPointer(t));
-  }
-  _updateGridFromPointer(t) {
-    var a;
-    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector('[part="grid"]');
-    if (!e) return;
-    const r = e.getBoundingClientRect(), i = g((t.clientX - r.left) / r.width, 0, 1), o = g((t.clientY - r.top) / r.height, 0, 1);
-    this._hsv = { ...this._hsv, s: i * 100, v: (1 - o) * 100 }, this._commit("drag"), this.requestUpdate();
-  }
-  // P0-1: Keyboard support for gradient grid — fixes WCAG 2.1 SC 2.1.1 failure
-  _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: g(this._hsv.s + e, 0, 100),
-      v: g(this._hsv.v + r, 0, 100)
-    }, this._commit("change"));
-  }
-  // ─── Hue slider dragging ─────────────────────────────────────────────────
-  _handleHuePointerDown(t) {
-    this.disabled || (t.preventDefault(), this._draggingHue = !0, t.currentTarget.setPointerCapture(t.pointerId), this._updateHueFromPointer(t));
-  }
-  _updateHueFromPointer(t) {
-    var o;
-    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector('[part="hue-slider"]');
-    if (!e) return;
-    const r = e.getBoundingClientRect(), i = g((t.clientX - r.left) / r.width, 0, 1);
-    this._hsv = { ...this._hsv, h: i * 360 }, this._commit("drag"), this.requestUpdate();
-  }
-  // ─── Opacity slider dragging ──────────────────────────────────────────────
-  _handleOpacityPointerDown(t) {
-    this.disabled || (t.preventDefault(), this._draggingOpacity = !0, t.currentTarget.setPointerCapture(t.pointerId), this._updateOpacityFromPointer(t));
-  }
-  _updateOpacityFromPointer(t) {
-    var o;
-    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector('[part="opacity-slider"]');
-    if (!e) return;
-    const r = e.getBoundingClientRect(), i = g((t.clientX - r.left) / r.width, 0, 1);
-    this._hsv = { ...this._hsv, a: i }, this._commit("drag"), this.requestUpdate();
-  }
-  // ─── Document-level pointer handlers ─────────────────────────────────────
-  _handlePointerMove(t) {
-    this._draggingGrid ? this._updateGridFromPointer(t) : this._draggingHue ? this._updateHueFromPointer(t) : this._draggingOpacity && this._updateOpacityFromPointer(t);
-  }
-  _handlePointerUp() {
-    (this._draggingGrid || this._draggingHue || this._draggingOpacity) && (this._draggingGrid = !1, this._draggingHue = !1, this._draggingOpacity = !1, this._commit("change"));
-  }
-  // ─── Keyboard handling for sliders ───────────────────────────────────────
-  _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: g(this._hsv.h + e, 0, 360) }, this._commit("change"));
-  }
-  _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: g(this._hsv.a + e, 0, 1) }, this._commit("change"));
-  }
-  // ─── Input ───────────────────────────────────────────────────────────────
-  // P1-7: Bound to @input (was @change) for real-time color preview while typing
-  _handleInputChange(t) {
-    const e = t.target, r = P(e.value.trim());
-    r && (this._hsv = r, this._commit("change")), this._inputValue = e.value;
-  }
-  _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);
-  }
-  _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 ────────────────────────────────────────────────────────────
-  _handleSwatchClick(t) {
-    const e = P(t);
-    e && (this._hsv = e, this._commit("change"));
-  }
-  // ─── Computed values ──────────────────────────────────────────────────────
-  _hueColor() {
-    return `hsl(${Math.round(this._hsv.h)}, 100%, 50%)`;
-  }
-  _previewColor() {
-    const t = S(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 ───────────────────────────────────────────────────────
-  _renderGrid() {
-    const t = `${this._hsv.s}%`, e = `${100 - this._hsv.v}%`, r = this._hueColor();
-    return p`
-      <div
-        part="grid"
-        class="gradient-grid"
-        role="slider"
-        tabindex="0"
-        aria-label="Color gradient"
-        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=${f({ "--_hue-color": r })}></div>
-        <div
-          class="gradient-thumb"
-          style=${f({ "--_thumb-x": t, "--_thumb-y": e })}
-          aria-hidden="true"
-        ></div>
-      </div>
-    `;
-  }
-  _renderHueSlider() {
-    const t = `${this._hsv.h / 360 * 100}%`, e = this._hueColor();
-    return p`
-      <div
-        part="slider hue-slider"
-        class="slider-track hue-track"
-        role="slider"
-        tabindex="0"
-        aria-label="Hue"
-        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=${f({ "--_slider-pct": t, "--_thumb-color": e })}
-          aria-hidden="true"
-        ></div>
-      </div>
-    `;
-  }
-  _renderOpacitySlider() {
-    if (!this.opacity) return k;
-    const t = `${this._hsv.a * 100}%`, e = S(this._hsv), r = `rgb(${e.r} ${e.g} ${e.b} / ${Math.round(this._hsv.a * 100) / 100})`, i = this._hueColor();
-    return p`
-      <div
-        part="slider opacity-slider"
-        class="slider-track opacity-track"
-        role="slider"
-        tabindex="0"
-        aria-label="Opacity"
-        aria-valuemin="0"
-        aria-valuemax="100"
-        aria-valuenow=${Math.round(this._hsv.a * 100)}
-        aria-valuetext="${Math.round(this._hsv.a * 100)}%"
-        style=${f({ "--_hue-color": i })}
-        @pointerdown=${this._handleOpacityPointerDown}
-        @keydown=${this._handleOpacityKeydown}
-      >
-        <div
-          class="slider-thumb"
-          style=${f({ "--_slider-pct": t, "--_thumb-color": r })}
-          aria-hidden="true"
-        ></div>
-      </div>
-    `;
-  }
-  _renderSwatches() {
-    var t;
-    return (t = this.swatches) != null && t.length ? p`
-      <div part="swatches" class="swatches" role="group" aria-label="Preset colors">
-        ${this.swatches.map(
-      (e) => p`
-            <button
-              type="button"
-              class="swatch-btn"
-              style=${f({ background: e })}
-              aria-label=${e}
-              title=${e}
-              @click=${() => this._handleSwatchClick(e)}
-            ></button>
-          `
-    )}
-      </div>
-    ` : k;
-  }
-  _renderInput() {
-    return p`
-      <div part="input" class="input-area">
-        <div
-          class="input-preview"
-          style=${f({ "--_preview-color": this._previewColor() })}
-          aria-hidden="true"
-        ></div>
-        <button
-          type="button"
-          class="format-btn"
-          aria-label="Switch color format"
-          title="Switch format"
-          @click=${this._handleFormatCycle}
-        >
-          ${this.format}
-        </button>
-        <input
-          type="text"
-          class="color-input"
-          .value=${this._inputValue}
-          aria-label="Color value"
-          autocomplete="off"
-          spellcheck="false"
-          @input=${this._handleInputChange}
-          @blur=${this._handleInputBlur}
-        />
-      </div>
-    `;
-  }
-  _renderPanel() {
-    return p`
-      <div
-        class="panel"
-        role="group"
-        aria-label="Color picker"
-        tabindex="-1"
-        @keydown=${this._handlePanelKeydown}
-      >
-        ${this.swatchesOnly ? k : p`${this._renderGrid()} ${this._renderHueSlider()} ${this._renderOpacitySlider()}`}
-        ${this._renderSwatches()} ${this._renderInput()}
-      </div>
-    `;
-  }
-  // ─── Main render ─────────────────────────────────────────────────────────
-  render() {
-    const t = this._previewColor();
-    return this.inline ? p`
-        <div style=${f({ "--_preview-color": t })}>${this._renderPanel()}</div>
-      ` : p`
-      <button
-        part="trigger"
-        type="button"
-        class="trigger"
-        aria-label="Choose color: ${this._inputValue}"
-        aria-expanded=${this._open ? "true" : k}
-        ?disabled=${this.disabled}
-        style=${f({ "--_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}
-    `;
-  }
-};
-d.styles = [I, E];
-d.formAssociated = !0;
-c([
-  m({ type: String, reflect: !0 })
-], d.prototype, "value", 2);
-c([
-  m({ type: String, reflect: !0 })
-], d.prototype, "format", 2);
-c([
-  m({ type: Boolean, reflect: !0 })
-], d.prototype, "opacity", 2);
-c([
-  m({ attribute: !1 })
-], d.prototype, "swatches", 2);
-c([
-  m({ type: Boolean, reflect: !0, attribute: "swatches-only" })
-], d.prototype, "swatchesOnly", 2);
-c([
-  m({ type: Boolean, reflect: !0 })
-], d.prototype, "disabled", 2);
-c([
-  m({ type: String, reflect: !0 })
-], d.prototype, "name", 2);
-c([
-  m({ type: Boolean, reflect: !0 })
-], d.prototype, "inline", 2);
-c([
-  F()
-], d.prototype, "_hsv", 2);
-c([
-  F()
-], d.prototype, "_open", 2);
-c([
-  F()
-], d.prototype, "_inputValue", 2);
-d = c([
-  G("hx-color-picker")
-], d);
-export {
-  d as H
-};
-//# sourceMappingURL=hx-color-picker-Bb2UPVc3.js.map