@helixui/library 0.1.0

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

@@ -0,0 +1,795 @@
+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 v } from "lit/directives/style-map.js";
+import { t as V } from "./lit-Dpo7RLp4.js";
+const I = 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%;
+    /* P1-6: was hardcoded #fff */
+    border: 2px solid var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff));
+    /* P1-6: was hardcoded rgba(0,0,0,0.3) */
+    box-shadow: 0 0 0 1px
+      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%;
+    /* P1-6: was hardcoded #fff */
+    border: 2px solid var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff));
+    /* P1-6: was hardcoded rgba(0,0,0,0.3) */
+    box-shadow: 0 0 0 1px
+      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 U = Object.defineProperty, E = Object.getOwnPropertyDescriptor, c = (t, e, r, a) => {
+  for (var i = a > 1 ? void 0 : a ? E(e, r) : e, s = t.length - 1, o; s >= 0; s--)
+    (o = t[s]) && (i = (a ? o(e, r, i) : o(i)) || i);
+  return a && i && U(e, r, i), i;
+};
+function g(t, e, r) {
+  return Math.max(e, Math.min(r, t));
+}
+function R(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 T(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, a = t.b / 255, i = Math.max(e, r, a), s = Math.min(e, r, a), o = i - s, h = i === 0 ? 0 : o / i, l = i;
+  let n = 0;
+  return o !== 0 && (i === e ? n = ((r - a) / o + (r < a ? 6 : 0)) / 6 : i === r ? n = ((a - e) / o + 2) / 6 : n = ((e - r) / o + 4) / 6), { h: n * 360, s: h * 100, v: l * 100, a: t.a };
+}
+function D(t) {
+  const e = t.h / 360, r = t.s / 100, a = t.v / 100, i = Math.floor(e * 6), s = e * 6 - i, o = a * (1 - r), h = a * (1 - s * r), l = a * (1 - (1 - s) * r);
+  let n = 0, u = 0, f = 0;
+  switch (i % 6) {
+    case 0:
+      n = a, u = l, f = o;
+      break;
+    case 1:
+      n = h, u = a, f = o;
+      break;
+    case 2:
+      n = o, u = a, f = l;
+      break;
+    case 3:
+      n = o, u = h, f = a;
+      break;
+    case 4:
+      n = l, u = o, f = a;
+      break;
+    case 5:
+      n = a, u = o, f = h;
+      break;
+  }
+  return { r: Math.round(n * 255), g: Math.round(u * 255), b: Math.round(f * 255), a: t.a };
+}
+function z(t) {
+  const e = t.r / 255, r = t.g / 255, a = t.b / 255, i = Math.max(e, r, a), s = Math.min(e, r, a), o = (i + s) / 2;
+  let h = 0, l = 0;
+  if (i !== s) {
+    const n = i - s;
+    l = o > 0.5 ? n / (2 - i - s) : n / (i + s), i === e ? h = ((r - a) / n + (r < a ? 6 : 0)) / 6 : i === r ? h = ((a - e) / n + 2) / 6 : h = ((e - r) / n + 4) / 6;
+  }
+  return { h: h * 360, s: l * 100, l: o * 100, a: t.a };
+}
+function P(t) {
+  if (!t) return null;
+  if (t.startsWith("#")) {
+    const i = R(t);
+    return i ? S(i) : null;
+  }
+  const e = t.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/);
+  if (e) {
+    const [, i, s, o, h] = e;
+    return S({
+      r: parseInt(i ?? "0", 10),
+      g: parseInt(s ?? "0", 10),
+      b: parseInt(o ?? "0", 10),
+      a: h !== void 0 ? parseFloat(h) : 1
+    });
+  }
+  const r = t.match(
+    /hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)/
+  );
+  if (r) {
+    const [, i, s, o, h] = r, l = parseFloat(i ?? "0"), n = parseFloat(s ?? "0") / 100, u = parseFloat(o ?? "0") / 100, f = h !== void 0 ? parseFloat(h) : 1, b = (1 - Math.abs(2 * u - 1)) * n, _ = b * (1 - Math.abs(l / 60 % 2 - 1)), C = 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 = _), S({
+      r: Math.round((x + C) * 255),
+      g: Math.round((w + C) * 255),
+      b: Math.round((y + C) * 255),
+      a: f
+    });
+  }
+  const a = t.match(
+    /hsva?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)/
+  );
+  if (a) {
+    const [, i, s, o, h] = a;
+    return {
+      h: parseFloat(i ?? "0"),
+      s: parseFloat(s ?? "0"),
+      v: parseFloat(o ?? "0"),
+      a: h !== void 0 ? parseFloat(h) : 1
+    };
+  }
+  return null;
+}
+function M(t, e, r) {
+  const a = D(t);
+  switch (e) {
+    case "hex":
+      return T(a, r);
+    case "rgb":
+      return r && t.a < 1 ? `rgba(${a.r}, ${a.g}, ${a.b}, ${Math.round(t.a * 100) / 100})` : `rgb(${a.r}, ${a.g}, ${a.b})`;
+    case "hsl": {
+      const i = z(a);
+      return r && t.a < 1 ? `hsla(${Math.round(i.h)}, ${Math.round(i.s)}%, ${Math.round(i.l)}%, ${Math.round(t.a * 100) / 100})` : `hsl(${Math.round(i.h)}, ${Math.round(i.s)}%, ${Math.round(i.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);
+  }
+  // ─── Lifecycle ───────────────────────────────────────────────────────────
+  connectedCallback() {
+    super.connectedCallback(), this._syncFromValue(), this._handleDocumentClick = this._handleDocumentClick.bind(this), document.addEventListener("click", this._handleDocumentClick, !0), document.addEventListener("pointermove", this._boundPointerMove), document.addEventListener("pointerup", this._boundPointerUp);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleDocumentClick, !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 = M(this._hsv, this.format, this.opacity), this._internals.setFormValue(this.value);
+  }
+  _commit(t) {
+    const e = M(this._hsv, this.format, this.opacity);
+    this.value = e, this._inputValue = e, this._internals.setFormValue(e);
+    const r = t === "drag" ? "hx-input" : "hx-change";
+    this.dispatchEvent(
+      new CustomEvent(r, {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: e }
+      })
+    );
+  }
+  // ─── 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 s;
+    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector('[part="grid"]');
+    if (!e) return;
+    const r = e.getBoundingClientRect(), a = g((t.clientX - r.left) / r.width, 0, 1), i = g((t.clientY - r.top) / r.height, 0, 1);
+    this._hsv = { ...this._hsv, s: a * 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
+  _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 i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector('[part="hue-slider"]');
+    if (!e) return;
+    const r = e.getBoundingClientRect(), a = g((t.clientX - r.left) / r.width, 0, 1);
+    this._hsv = { ...this._hsv, h: a * 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 i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector('[part="opacity-slider"]');
+    if (!e) return;
+    const r = e.getBoundingClientRect(), a = g((t.clientX - r.left) / r.width, 0, 1);
+    this._hsv = { ...this._hsv, a }, 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 = M(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 = M(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 = D(this._hsv);
+    return this.opacity && this._hsv.a < 1 ? `rgba(${t.r}, ${t.g}, ${t.b}, ${this._hsv.a})` : `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=${v({ "--_hue-color": r })}></div>
+        <div
+          class="gradient-thumb"
+          style=${v({ "--_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=${v({ "--_slider-pct": t, "--_thumb-color": e })}
+          aria-hidden="true"
+        ></div>
+      </div>
+    `;
+  }
+  _renderOpacitySlider() {
+    if (!this.opacity) return k;
+    const t = `${this._hsv.a * 100}%`, e = D(this._hsv), r = `rgba(${e.r}, ${e.g}, ${e.b}, ${this._hsv.a})`, a = 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=${v({ "--_hue-color": a })}
+        @pointerdown=${this._handleOpacityPointerDown}
+        @keydown=${this._handleOpacityKeydown}
+      >
+        <div
+          class="slider-thumb"
+          style=${v({ "--_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=${v({ 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=${v({ "--_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="dialog"
+        aria-label="Color picker"
+        aria-modal="true"
+        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=${v({ "--_preview-color": t })}>${this._renderPanel()}</div>
+      ` : p`
+      <button
+        part="trigger"
+        type="button"
+        class="trigger"
+        aria-label="Choose color: ${this._inputValue}"
+        aria-haspopup="dialog"
+        aria-expanded=${this._open ? "true" : "false"}
+        ?disabled=${this.disabled}
+        style=${v({ "--_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 = [V, I];
+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-BF7PA7zf.js.map