@helixui/library 3.3.1 → 3.4.0-next.121

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

@@ -0,0 +1,1221 @@
+import { css as A, html as b, nothing as $ } from "lit";
+import { F as I } from "./FormMixin-B8PXk5RQ.js";
+import { property as c, state as f, query as C, customElement as R } from "lit/decorators.js";
+import { ifDefined as H } from "lit/directives/if-defined.js";
+import { styleMap as m } from "lit/directives/style-map.js";
+import { b as F } from "./forced-colors-CTEDFRGa.js";
+import { s as B, i as N, r as P } from "./aria-idref-CxvyzfQS.js";
+import { f as y } from "./aria-flatten-DY6v2vah.js";
+import { H as V } from "./helix-element-BNEYeiys.js";
+const U = A`
+  :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);
+  }
+  /* Slotted label / help / error blocks for cross-shadow naming. */
+  .hx-color-picker__label {
+    display: block;
+    margin-bottom: var(--hx-space-1, 0.25rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-color-neutral-900, #1a1a1a);
+  }
+  .hx-color-picker__label:empty {
+    display: none;
+  }
+  .hx-color-picker__help {
+    display: block;
+    margin-top: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-600, #525252);
+  }
+  .hx-color-picker__error {
+    display: block;
+    margin-top: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-danger-700, #c43e3e);
+  }
+  [hidden] {
+    display: none !important;
+  }
+  .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 x(e, t, r) {
+  return Math.max(t, Math.min(r, e));
+}
+function q(e) {
+  let t = e.trim().replace(/^#/, "");
+  if (t.length === 3 && (t = t.replace(/(.)/g, "$1$1")), t.length === 4 && (t = t.replace(/(.)/g, "$1$1")), t.length === 6 && (t += "ff"), t.length !== 8) return null;
+  const r = parseInt(t, 16);
+  return isNaN(r) ? null : {
+    r: r >>> 24 & 255,
+    g: r >>> 16 & 255,
+    b: r >>> 8 & 255,
+    a: (r & 255) / 255
+  };
+}
+function T(e) {
+  return Math.round(x(e, 0, 255)).toString(16).padStart(2, "0");
+}
+function G(e, t) {
+  const r = `#${T(e.r)}${T(e.g)}${T(e.b)}`;
+  return t && e.a < 1 ? r + T(e.a * 255) : r;
+}
+function O(e) {
+  const t = e.r / 255, r = e.g / 255, i = e.b / 255, s = Math.max(t, r, i), h = Math.min(t, r, i), l = s - h, n = s === 0 ? 0 : l / s, p = s;
+  let d = 0;
+  return l !== 0 && (s === t ? d = ((r - i) / l + (r < i ? 6 : 0)) / 6 : s === r ? d = ((i - t) / l + 2) / 6 : d = ((t - r) / l + 4) / 6), { h: d * 360, s: n * 100, v: p * 100, a: e.a };
+}
+function D(e) {
+  const t = e.h / 360, r = e.s / 100, i = e.v / 100, s = Math.floor(t * 6), h = t * 6 - s, l = i * (1 - r), n = i * (1 - h * r), p = i * (1 - (1 - h) * r);
+  let d = 0, _ = 0, g = 0;
+  switch (s % 6) {
+    case 0:
+      d = i, _ = p, g = l;
+      break;
+    case 1:
+      d = n, _ = i, g = l;
+      break;
+    case 2:
+      d = l, _ = i, g = p;
+      break;
+    case 3:
+      d = l, _ = n, g = i;
+      break;
+    case 4:
+      d = p, _ = l, g = i;
+      break;
+    case 5:
+      d = i, _ = l, g = n;
+      break;
+  }
+  return { r: Math.round(d * 255), g: Math.round(_ * 255), b: Math.round(g * 255), a: e.a };
+}
+function j(e) {
+  const t = e.r / 255, r = e.g / 255, i = e.b / 255, s = Math.max(t, r, i), h = Math.min(t, r, i), l = (s + h) / 2;
+  let n = 0, p = 0;
+  if (s !== h) {
+    const d = s - h;
+    p = l > 0.5 ? d / (2 - s - h) : d / (s + h), s === t ? n = ((r - i) / d + (r < i ? 6 : 0)) / 6 : s === r ? n = ((i - t) / d + 2) / 6 : n = ((t - r) / d + 4) / 6;
+  }
+  return { h: n * 360, s: p * 100, l: l * 100, a: e.a };
+}
+function E(e) {
+  if (!e) return null;
+  if (e.startsWith("#")) {
+    const s = q(e);
+    return s ? O(s) : null;
+  }
+  const t = e.match(
+    /rgba?\(\s*(\d+)(?:\s*,\s*|\s+)(\d+)(?:\s*,\s*|\s+)(\d+)(?:\s*(?:\/|,)\s*([\d.]+))?\s*\)/
+  );
+  if (t) {
+    const [, s, h, l, n] = t;
+    return O({
+      r: parseInt(s ?? "0", 10),
+      g: parseInt(h ?? "0", 10),
+      b: parseInt(l ?? "0", 10),
+      a: n !== void 0 ? parseFloat(n) : 1
+    });
+  }
+  const r = e.match(
+    /hsla?\(\s*([\d.]+)(?:\s*,\s*|\s+)([\d.]+)%(?:\s*,\s*|\s+)([\d.]+)%(?:\s*(?:\/|,)\s*([\d.]+))?\s*\)/
+  );
+  if (r) {
+    const [, s, h, l, n] = r, p = parseFloat(s ?? "0"), d = parseFloat(h ?? "0") / 100, _ = parseFloat(l ?? "0") / 100, g = n !== void 0 ? parseFloat(n) : 1, v = (1 - Math.abs(2 * _ - 1)) * d, u = v * (1 - Math.abs(p / 60 % 2 - 1)), L = _ - v / 2;
+    let w = 0, S = 0, k = 0;
+    return p < 60 ? (w = v, S = u) : p < 120 ? (w = u, S = v) : p < 180 ? (S = v, k = u) : p < 240 ? (S = u, k = v) : p < 300 ? (w = u, k = v) : (w = v, k = u), O({
+      r: Math.round((w + L) * 255),
+      g: Math.round((S + L) * 255),
+      b: Math.round((k + L) * 255),
+      a: g
+    });
+  }
+  const i = e.match(
+    /hsva?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)/
+  );
+  if (i) {
+    const [, s, h, l, n] = i;
+    return {
+      h: parseFloat(s ?? "0"),
+      s: parseFloat(h ?? "0"),
+      v: parseFloat(l ?? "0"),
+      a: n !== void 0 ? parseFloat(n) : 1
+    };
+  }
+  return null;
+}
+function M(e, t, r) {
+  const i = D(e);
+  switch (t) {
+    case "hex":
+      return G(i, r);
+    case "rgb":
+      return r && e.a < 1 ? `rgb(${i.r} ${i.g} ${i.b} / ${Math.round(e.a * 100) / 100})` : `rgb(${i.r} ${i.g} ${i.b})`;
+    case "hsl": {
+      const s = j(i);
+      return r && e.a < 1 ? `hsl(${Math.round(s.h)} ${Math.round(s.s)}% ${Math.round(s.l)}% / ${Math.round(e.a * 100) / 100})` : `hsl(${Math.round(s.h)} ${Math.round(s.s)}% ${Math.round(s.l)}%)`;
+    }
+    case "hsv":
+      return r && e.a < 1 ? `hsva(${Math.round(e.h)}, ${Math.round(e.s)}%, ${Math.round(e.v)}%, ${Math.round(e.a * 100) / 100})` : `hsv(${Math.round(e.h)}, ${Math.round(e.s)}%, ${Math.round(e.v)}%)`;
+  }
+}
+var z = Object.defineProperty, K = Object.getOwnPropertyDescriptor, a = (e, t, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? K(t, r) : t, h = e.length - 1, l; h >= 0; h--)
+    (l = e[h]) && (s = (i ? l(t, r, s) : l(s)) || s);
+  return i && s && z(t, r, s), s;
+};
+let X = 0, o = class extends I(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.label = void 0, this.accessibleLabel = void 0, this.helpText = void 0, this.error = void 0, this.labelTrigger = (e) => `Choose color: ${e}`, this._hsv = { h: 0, s: 0, v: 0, a: 1 }, this._open = !1, this._inputValue = "#000000", this._supportsIdrefRefs = !0, this._slottedLabelEls = [], this._labelSlotText = "", this._hasLabelSlot = !1, this._helpSlotText = "", this._errorSlotText = "", this._announcedError = "", this._instanceId = ++X, this._helpId = `hx-color-picker-help-${this._instanceId}`, this._errorId = `hx-color-picker-error-${this._instanceId}`, this._hostDescId = `hx-color-picker-host-desc-${this._instanceId}`, this._fallbackTriggerAriaLabelledBy = null, this._fallbackTriggerAriaDescribedBy = null, this._fallbackTriggerAriaLabel = null, this._externalDescText = "", this._ariaMirror = null, this._labelSlotTextObserver = null, this._helpSlotTextObserver = null, this._errorSlotTextObserver = null, this._externalRefsObserver = null, 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();
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : B(this._internals), this._syncHostAriaSemantics(), this._ariaMirror = N(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var e, t, r, i, s;
+    super.disconnectedCallback(), typeof document < "u" && (document.removeEventListener("click", this._boundDocumentClick, !0), document.removeEventListener("pointermove", this._boundPointerMove), document.removeEventListener("pointerup", this._boundPointerUp)), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null, (t = this._labelSlotTextObserver) == null || t.disconnect(), this._labelSlotTextObserver = null, (r = this._helpSlotTextObserver) == null || r.disconnect(), this._helpSlotTextObserver = null, (i = this._errorSlotTextObserver) == null || i.disconnect(), this._errorSlotTextObserver = null, (s = this._externalRefsObserver) == null || s.disconnect(), this._externalRefsObserver = null;
+  }
+  willUpdate(e) {
+    e.has("value") && this._syncFromValue(), (e.has("error") || !this.hasUpdated) && (this._announcedError = this.error ?? "");
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this._seedSlotStateSync(), this._syncHostAriaSemantics();
+  }
+  updated(e) {
+    super.updated(e), e.has("error") && (e.get("error") && this.error ? (this._announcedError = "", requestAnimationFrame(() => {
+      this._announcedError = this.error ?? "";
+    })) : this._announcedError = this.error ?? ""), this._syncHostAriaSemantics();
+  }
+  // ─── Sync ────────────────────────────────────────────────────────────────
+  /** @internal */
+  _syncFromValue() {
+    const e = E(this.value);
+    e && (this._hsv = e), this._inputValue = M(this._hsv, this.format, this.opacity), this._internals.setFormValue(this.value);
+  }
+  // ─── Slot state seeding ──────────────────────────────────────────────────
+  /**
+   * Synchronous slot-state seed. Mirrors the side effects of the slotchange
+   * handlers but is driven by direct `slot.assignedNodes()` reads so we can
+   * populate state BEFORE the microtask `slotchange` events fire after the
+   * first render.
+   * @internal
+   */
+  _seedSlotStateSync() {
+    const e = this.shadowRoot;
+    if (!e) return;
+    const t = e.querySelector('slot[name="label"]');
+    t && this._captureLabelSlot(t);
+    const r = e.querySelector('slot[name="help-text"]');
+    r && this._captureHelpSlot(r);
+    const i = e.querySelector('slot[name="error"]');
+    i && this._captureErrorSlot(i);
+  }
+  /** @internal */
+  _captureLabelSlot(e) {
+    const t = e.assignedNodes({ flatten: !0 }).filter((s) => s.nodeType === Node.ELEMENT_NODE), r = t.length > 0 ? t : [], i = r.map((s) => y(s)).filter((s) => s.length > 0).join(" ").replace(/\s+/g, " ").trim();
+    this._slottedLabelEls = r, this._labelSlotText = i, this._hasLabelSlot = i.length > 0, this._installLabelSlotTextObserver(r);
+  }
+  /** @internal */
+  _captureHelpSlot(e) {
+    const t = e.assignedNodes({ flatten: !0 }).filter((r) => r.nodeType === Node.ELEMENT_NODE).map((r) => y(r)).filter((r) => r.length > 0).join(" ").replace(/\s+/g, " ").trim();
+    this._helpSlotText = t, this._installHelpSlotTextObserver(e);
+  }
+  /** @internal */
+  _captureErrorSlot(e) {
+    const t = e.assignedNodes({ flatten: !0 }).filter((r) => r.nodeType === Node.ELEMENT_NODE).map((r) => y(r)).filter((r) => r.length > 0).join(" ").replace(/\s+/g, " ").trim();
+    this._errorSlotText = t, this._installErrorSlotTextObserver(e);
+  }
+  /** @internal */
+  _handleLabelSlotChange(e) {
+    this._captureLabelSlot(e.target), this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _handleHelpSlotChange(e) {
+    this._captureHelpSlot(e.target), this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _handleErrorSlotChange(e) {
+    this._captureErrorSlot(e.target), this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _installLabelSlotTextObserver(e) {
+    var r;
+    if ((r = this._labelSlotTextObserver) == null || r.disconnect(), e.length === 0) {
+      this._labelSlotTextObserver = null;
+      return;
+    }
+    const t = new MutationObserver(() => {
+      const i = this._slottedLabelEls.map((s) => y(s)).filter((s) => s.length > 0).join(" ").replace(/\s+/g, " ").trim();
+      this._labelSlotText = i, this._hasLabelSlot = i.length > 0, this._syncHostAriaSemantics();
+    });
+    e.forEach((i) => {
+      t.observe(i, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    }), this._labelSlotTextObserver = t;
+  }
+  /** @internal */
+  _installHelpSlotTextObserver(e) {
+    var r;
+    (r = this._helpSlotTextObserver) == null || r.disconnect();
+    const t = new MutationObserver(() => {
+      const i = e.assignedNodes({ flatten: !0 }).filter((s) => s.nodeType === Node.ELEMENT_NODE).map((s) => y(s)).filter((s) => s.length > 0).join(" ").replace(/\s+/g, " ").trim();
+      this._helpSlotText = i, this._syncHostAriaSemantics();
+    });
+    e.assignedNodes({ flatten: !0 }).forEach((i) => {
+      i.nodeType === Node.ELEMENT_NODE && t.observe(i, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    }), this._helpSlotTextObserver = t;
+  }
+  /** @internal */
+  _installErrorSlotTextObserver(e) {
+    var r;
+    (r = this._errorSlotTextObserver) == null || r.disconnect();
+    const t = new MutationObserver(() => {
+      const i = e.assignedNodes({ flatten: !0 }).filter((s) => s.nodeType === Node.ELEMENT_NODE).map((s) => y(s)).filter((s) => s.length > 0).join(" ").replace(/\s+/g, " ").trim();
+      this._errorSlotText = i, this._syncHostAriaSemantics();
+    });
+    e.assignedNodes({ flatten: !0 }).forEach((i) => {
+      i.nodeType === Node.ELEMENT_NODE && t.observe(i, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    }), this._errorSlotTextObserver = t;
+  }
+  /**
+   * Watches the elements referenced by `aria-labelledby` / `aria-describedby`
+   * for in-place text mutations so the announced name/description stays
+   * accurate when consumers rewrite external label text without swapping the
+   * referenced node.
+   * @internal
+   */
+  _installExternalRefsObserver(e) {
+    var r;
+    if ((r = this._externalRefsObserver) == null || r.disconnect(), e.length === 0) {
+      this._externalRefsObserver = null;
+      return;
+    }
+    const t = new MutationObserver(() => {
+      this._syncHostAriaSemantics();
+    });
+    e.forEach((i) => {
+      t.observe(i, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    }), this._externalRefsObserver = t;
+  }
+  // ─── Host-canonical ARIA-delegation sync ─────────────────────────────────
+  /**
+   * Compute and apply the cross-shadow ARIA contract for the trigger surface.
+   *
+   * Naming precedence (highest first):
+   *   1. consumer `aria-labelledby` (when at least one IDREF resolves)
+   *   2. consumer `aria-label`
+   *   3. `accessible-label` property
+   *   4. `label` property
+   *   5. slotted `<slot name="label">` text
+   *   6. `labelTrigger(value)` (default)
+   *
+   * Description channel (joined, deduped):
+   *   - consumer `aria-describedby` resolved text
+   *   - `help-text` property + slotted help-text
+   *   - `error` property + slotted error (when present)
+   *
+   * Modern path (`_supportsIdrefRefs === true`): host owns the announced
+   * surface via `internals.aria*` + IDL refs. Trigger button mirrors only.
+   *
+   * Fallback path (`_supportsIdrefRefs === false`): trigger button carries
+   * the full aria contract via attribute mirrors.
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    var v;
+    const e = this._internals, t = ((v = this.getAttribute("aria-label")) == null ? void 0 : v.trim()) || "", r = this.getAttribute("aria-labelledby"), i = this.getAttribute("aria-describedby"), s = P(this, r), h = P(this, i), l = s.length > 0;
+    let n;
+    l ? n = s.map((u) => y(u)).filter((u) => u.length > 0).join(" ").replace(/\s+/g, " ").trim() || null : t ? n = t : this.accessibleLabel ? n = this.accessibleLabel : this.label ? n = this.label : this._hasLabelSlot && this._labelSlotText ? n = this._labelSlotText : n = this.labelTrigger(this._inputValue);
+    const p = h.length > 0 ? h.map((u) => y(u)).filter((u) => u.length > 0).join(" ").replace(/\s+/g, " ").trim() : "";
+    this._externalDescText = p, this._installExternalRefsObserver([...s, ...h]);
+    const d = !!(this.error || this._errorSlotText), g = !e.validity.valid || d;
+    if (this._supportsIdrefRefs) {
+      e.ariaLabel = n ?? null, e.ariaInvalid = g ? "true" : "false", e.ariaDisabled = this.disabled ? "true" : "false", e.ariaRequired = this.required ? "true" : "false";
+      const u = e;
+      u.ariaLabelledByElements = l ? s : null, u.ariaDescribedByElements = h.length > 0 ? h : null, this._fallbackTriggerAriaLabelledBy = null, this._fallbackTriggerAriaDescribedBy = null, this._fallbackTriggerAriaLabel = null;
+    } else {
+      e.ariaLabel = null, e.ariaInvalid = null, e.ariaDisabled = null, e.ariaRequired = null;
+      const u = e;
+      u.ariaLabelledByElements = null, u.ariaDescribedByElements = null, this._fallbackTriggerAriaLabelledBy = l ? r : null, this._fallbackTriggerAriaDescribedBy = i || null, this._fallbackTriggerAriaLabel = n;
+    }
+  }
+  // ─── Effective text helpers (rendered into hidden host-desc span) ────────
+  /** @internal */
+  _effectiveHelpText() {
+    var e;
+    return (((e = this.helpText) == null ? void 0 : e.trim()) || this._helpSlotText || "").trim();
+  }
+  /** @internal */
+  _effectiveErrorText() {
+    var e;
+    return (((e = this._announcedError) == null ? void 0 : e.trim()) || this._errorSlotText || "").trim();
+  }
+  /** @internal */
+  _onFormDisabled(e) {
+    this.disabled = e;
+  }
+  /** @internal */
+  _onFormReset() {
+    this.value = "#000000", this._internals.setFormValue(null), this._resetInteractionState();
+  }
+  /** @internal */
+  _onFormStateRestore(e, t) {
+    typeof e == "string" && (this.value = e);
+  }
+  /** @internal */
+  _updateValidity() {
+    var r, i;
+    const e = ((r = this.shadowRoot) == null ? void 0 : r.querySelector('[part="trigger"]')) ?? ((i = this.shadowRoot) == null ? void 0 : i.querySelector('[part="grid"]')) ?? void 0, t = (this.error || this._errorSlotText || "").trim();
+    this.required && !this.value ? this._internals.setValidity(
+      { valueMissing: !0, customError: !!t },
+      t || "Please select a color.",
+      e
+    ) : t ? this._internals.setValidity({ customError: !0 }, t, e) : this._internals.setValidity({}), this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _commit(e) {
+    const t = M(this._hsv, this.format, this.opacity);
+    this.value = t, this._inputValue = t, this._internals.setFormValue(t), this._handleInteractionInput();
+    const i = {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: t }
+    };
+    e === "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 e = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".panel"), t = (e == null ? void 0 : e.querySelector("input, button")) ?? e;
+      t == null || t.focus();
+    }));
+  }
+  /** @internal */
+  _hide() {
+    this._open && (this._open = !1, typeof document < "u" && document.removeEventListener("click", this._boundDocumentClick, !0));
+  }
+  /** @internal */
+  _handleDocumentClick(e) {
+    this._open && (e.composedPath().includes(this) || this._hide());
+  }
+  /** @internal */
+  _handleTriggerClick(e) {
+    e.stopPropagation(), this._open ? this._hide() : this._show();
+  }
+  /** @internal */
+  _handlePanelKeydown(e) {
+    var t, r;
+    e.key === "Escape" && (e.stopPropagation(), this._hide(), (r = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[part="trigger"]')) == null || r.focus());
+  }
+  // ─── Gradient grid dragging ───────────────────────────────────────────────
+  /** @internal */
+  _handleGridPointerDown(e) {
+    var t;
+    this.disabled || (e.preventDefault(), this._draggingGrid = !0, this._dragRect = ((t = this._gridEl) == null ? void 0 : t.getBoundingClientRect()) ?? null, e.currentTarget.setPointerCapture(e.pointerId), typeof document < "u" && (document.addEventListener("pointermove", this._boundPointerMove), document.addEventListener("pointerup", this._boundPointerUp)), this._updateGridFromPointer(e));
+  }
+  /** @internal */
+  _updateGridFromPointer(e) {
+    var s;
+    const t = this._dragRect ?? ((s = this._gridEl) == null ? void 0 : s.getBoundingClientRect());
+    if (!t) return;
+    const r = x((e.clientX - t.left) / t.width, 0, 1), i = x((e.clientY - t.top) / t.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(e) {
+    let t = 0, r = 0;
+    if (e.key === "ArrowLeft") t = -1;
+    else if (e.key === "ArrowRight") t = 1;
+    else if (e.key === "ArrowUp") r = 1;
+    else if (e.key === "ArrowDown") r = -1;
+    else if (e.key === "PageUp") r = 10;
+    else if (e.key === "PageDown") r = -10;
+    else if (e.key === "Home") {
+      this._hsv = { ...this._hsv, s: 0, v: 100 }, this._commit("change");
+      return;
+    } else if (e.key === "End") {
+      this._hsv = { ...this._hsv, s: 100, v: 0 }, this._commit("change");
+      return;
+    }
+    (t !== 0 || r !== 0) && (e.preventDefault(), this._hsv = {
+      ...this._hsv,
+      s: x(this._hsv.s + t, 0, 100),
+      v: x(this._hsv.v + r, 0, 100)
+    }, this._commit("change"));
+  }
+  // ─── Hue slider dragging ─────────────────────────────────────────────────
+  /** @internal */
+  _handleHuePointerDown(e) {
+    var t;
+    this.disabled || (e.preventDefault(), this._draggingHue = !0, this._dragRect = ((t = this._hueSliderEl) == null ? void 0 : t.getBoundingClientRect()) ?? null, e.currentTarget.setPointerCapture(e.pointerId), typeof document < "u" && (document.addEventListener("pointermove", this._boundPointerMove), document.addEventListener("pointerup", this._boundPointerUp)), this._updateHueFromPointer(e));
+  }
+  /** @internal */
+  _updateHueFromPointer(e) {
+    var i;
+    const t = this._dragRect ?? ((i = this._hueSliderEl) == null ? void 0 : i.getBoundingClientRect());
+    if (!t) return;
+    const r = x((e.clientX - t.left) / t.width, 0, 1);
+    this._hsv = { ...this._hsv, h: r * 360 }, this._commit("drag"), this.requestUpdate();
+  }
+  // ─── Opacity slider dragging ──────────────────────────────────────────────
+  /** @internal */
+  _handleOpacityPointerDown(e) {
+    var t;
+    this.disabled || (e.preventDefault(), this._draggingOpacity = !0, this._dragRect = ((t = this._opacitySliderEl) == null ? void 0 : t.getBoundingClientRect()) ?? null, e.currentTarget.setPointerCapture(e.pointerId), typeof document < "u" && (document.addEventListener("pointermove", this._boundPointerMove), document.addEventListener("pointerup", this._boundPointerUp)), this._updateOpacityFromPointer(e));
+  }
+  /** @internal */
+  _updateOpacityFromPointer(e) {
+    var i;
+    const t = this._dragRect ?? ((i = this._opacitySliderEl) == null ? void 0 : i.getBoundingClientRect());
+    if (!t) return;
+    const r = x((e.clientX - t.left) / t.width, 0, 1);
+    this._hsv = { ...this._hsv, a: r }, this._commit("drag"), this.requestUpdate();
+  }
+  // ─── Document-level pointer handlers ─────────────────────────────────────
+  /** @internal */
+  _handlePointerMove(e) {
+    this._draggingGrid ? this._updateGridFromPointer(e) : this._draggingHue ? this._updateHueFromPointer(e) : this._draggingOpacity && this._updateOpacityFromPointer(e);
+  }
+  /** @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(e) {
+    let t = 0;
+    if (e.key === "ArrowLeft" || e.key === "ArrowDown") t = -1;
+    else if (e.key === "ArrowRight" || e.key === "ArrowUp") t = 1;
+    else if (e.key === "PageDown") t = -10;
+    else if (e.key === "PageUp") t = 10;
+    else if (e.key === "Home") {
+      this._hsv = { ...this._hsv, h: 0 }, this._commit("change");
+      return;
+    } else if (e.key === "End") {
+      this._hsv = { ...this._hsv, h: 360 }, this._commit("change");
+      return;
+    }
+    t !== 0 && (e.preventDefault(), this._hsv = { ...this._hsv, h: x(this._hsv.h + t, 0, 360) }, this._commit("change"));
+  }
+  /** @internal */
+  _handleOpacityKeydown(e) {
+    let t = 0;
+    if (e.key === "ArrowLeft" || e.key === "ArrowDown") t = -0.01;
+    else if (e.key === "ArrowRight" || e.key === "ArrowUp") t = 0.01;
+    else if (e.key === "PageDown") t = -0.1;
+    else if (e.key === "PageUp") t = 0.1;
+    else if (e.key === "Home") {
+      this._hsv = { ...this._hsv, a: 0 }, this._commit("change");
+      return;
+    } else if (e.key === "End") {
+      this._hsv = { ...this._hsv, a: 1 }, this._commit("change");
+      return;
+    }
+    t !== 0 && (e.preventDefault(), this._hsv = { ...this._hsv, a: x(this._hsv.a + t, 0, 1) }, this._commit("change"));
+  }
+  // ─── Input ───────────────────────────────────────────────────────────────
+  // P1-7: Bound to @input (was @change) for real-time color preview while typing
+  /** @internal */
+  _handleInputChange(e) {
+    const t = e.target, r = E(t.value.trim());
+    r && (this._hsv = r, this._commit("change")), this._inputValue = t.value;
+  }
+  /** @internal */
+  _handleInputBlur(e) {
+    const t = e.target, r = E(t.value.trim());
+    r ? (this._hsv = r, this._commit("change")) : this._inputValue = M(this._hsv, this.format, this.opacity);
+  }
+  /** @internal */
+  _handleFormatCycle() {
+    const e = ["hex", "rgb", "hsl", "hsv"], t = e.indexOf(this.format), r = e[(t + 1) % e.length];
+    r !== void 0 && (this.format = r), this._inputValue = M(this._hsv, this.format, this.opacity);
+  }
+  // ─── Swatches ────────────────────────────────────────────────────────────
+  /** @internal */
+  _handleSwatchClick(e) {
+    const t = E(e);
+    t && (this._hsv = t, this._commit("change"));
+  }
+  // ─── Computed values ──────────────────────────────────────────────────────
+  /** @internal */
+  _hueColor() {
+    return `hsl(${Math.round(this._hsv.h)}, 100%, 50%)`;
+  }
+  /** @internal */
+  _previewColor() {
+    const e = D(this._hsv);
+    return this.opacity && this._hsv.a < 1 ? `rgb(${e.r} ${e.g} ${e.b} / ${Math.round(this._hsv.a * 100) / 100})` : `rgb(${e.r} ${e.g} ${e.b})`;
+  }
+  // ─── Render helpers ───────────────────────────────────────────────────────
+  /** @internal */
+  _renderGrid() {
+    const e = `${this._hsv.s}%`, t = `${100 - this._hsv.v}%`, r = this._hueColor();
+    return b`
+      <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=${m({ "--_hue-color": r })}></div>
+        <div
+          class="gradient-thumb"
+          style=${m({ "--_thumb-x": e, "--_thumb-y": t })}
+          aria-hidden="true"
+        ></div>
+      </div>
+    `;
+  }
+  /** @internal */
+  _renderHueSlider() {
+    const e = `${this._hsv.h / 360 * 100}%`, t = this._hueColor();
+    return b`
+      <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=${m({ "--_slider-pct": e, "--_thumb-color": t })}
+          aria-hidden="true"
+        ></div>
+      </div>
+    `;
+  }
+  /** @internal */
+  _renderOpacitySlider() {
+    if (!this.opacity) return $;
+    const e = `${this._hsv.a * 100}%`, t = D(this._hsv), r = `rgb(${t.r} ${t.g} ${t.b} / ${Math.round(this._hsv.a * 100) / 100})`, i = this._hueColor();
+    return b`
+      <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=${m({ "--_hue-color": i })}
+        @pointerdown=${this._handleOpacityPointerDown}
+        @keydown=${this._handleOpacityKeydown}
+      >
+        <div
+          class="slider-thumb"
+          style=${m({ "--_slider-pct": e, "--_thumb-color": r })}
+          aria-hidden="true"
+        ></div>
+      </div>
+    `;
+  }
+  /** @internal */
+  _renderSwatches() {
+    var e;
+    return (e = this.swatches) != null && e.length ? b`
+      <div part="swatches" class="swatches" role="group" aria-label=${this.labelSwatches}>
+        ${this.swatches.map(
+      (t) => b`
+            <button
+              type="button"
+              class="swatch-btn"
+              style=${m({ background: t })}
+              aria-label=${t}
+              title=${t}
+              @click=${() => this._handleSwatchClick(t)}
+            ></button>
+          `
+    )}
+      </div>
+    ` : $;
+  }
+  /** @internal */
+  _renderInput() {
+    return b`
+      <div part="input" class="input-area">
+        <div
+          class="input-preview"
+          style=${m({ "--_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 b`
+      <div
+        class="panel"
+        role="group"
+        aria-label=${this.labelPicker}
+        tabindex="-1"
+        @keydown=${this._handlePanelKeydown}
+      >
+        ${this.swatchesOnly ? $ : b`${this._renderGrid()} ${this._renderHueSlider()} ${this._renderOpacitySlider()}`}
+        ${this._renderSwatches()} ${this._renderInput()}
+      </div>
+    `;
+  }
+  // ─── Description-channel helpers ─────────────────────────────────────────
+  /**
+   * Builds the synthesized host-level description span text by joining the
+   * external (consumer-resolved) description text with help and error text.
+   * The hidden span lives in the shadow root so AT can resolve a single
+   * `aria-describedby` token to it without leaving the host's name surface.
+   * @internal
+   */
+  _hostDescriptionText() {
+    return [
+      this._externalDescText,
+      this._effectiveHelpText(),
+      this._effectiveErrorText()
+    ].filter((t) => t.length > 0).join(" ").replace(/\s+/g, " ").trim();
+  }
+  /** @internal */
+  _renderHostDescriptionSpan() {
+    const e = this._hostDescriptionText();
+    return e ? b`<span
+      id=${this._hostDescId}
+      class="hx-visually-hidden"
+      aria-hidden="true"
+      data-hx-host-desc
+      style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
+      >${e}</span
+    >` : $;
+  }
+  /** @internal */
+  _renderLabelSlot() {
+    return b`<span class="hx-color-picker__label" part="label">
+      <slot name="label" @slotchange=${this._handleLabelSlotChange}>${this.label ?? ""}</slot>
+    </span>`;
+  }
+  /** @internal */
+  _renderHelpSlot() {
+    const e = this._effectiveHelpText();
+    return b`<span
+      id=${this._helpId}
+      class="hx-color-picker__help"
+      part="help-text"
+      ?hidden=${!e}
+    >
+      <slot name="help-text" @slotchange=${this._handleHelpSlotChange}>${this.helpText ?? ""}</slot>
+    </span>`;
+  }
+  /** @internal */
+  _renderErrorSlot() {
+    const e = this._effectiveErrorText();
+    return b`<span
+      id=${this._errorId}
+      class="hx-color-picker__error"
+      part="error"
+      role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+      ?hidden=${!e}
+    >
+      <slot name="error" @slotchange=${this._handleErrorSlotChange}
+        >${this._announcedError ?? ""}</slot
+      >
+    </span>`;
+  }
+  // ─── Main render ─────────────────────────────────────────────────────────
+  render() {
+    const e = this._previewColor(), r = this._hostDescriptionText() ? this._hostDescId : void 0, i = this._supportsIdrefRefs ? this.labelTrigger(this._inputValue) : this._fallbackTriggerAriaLabel ?? this.labelTrigger(this._inputValue), s = this._supportsIdrefRefs ? void 0 : this._fallbackTriggerAriaLabelledBy ?? void 0, h = this._supportsIdrefRefs ? r : [this._fallbackTriggerAriaDescribedBy, r].filter((n) => !!n && n.length > 0).join(" ") || void 0, l = !this._internals.validity.valid || !!this._effectiveErrorText();
+    return this.inline ? b`
+        <div style=${m({ "--_preview-color": e })}>
+          ${this._renderLabelSlot()} ${this._renderHostDescriptionSpan()} ${this._renderPanel()}
+          ${this._renderHelpSlot()} ${this._renderErrorSlot()}
+        </div>
+      ` : b`
+      ${this._renderLabelSlot()} ${this._renderHostDescriptionSpan()}
+      <button
+        part="trigger"
+        type="button"
+        class="trigger"
+        aria-label=${i}
+        aria-labelledby=${H(s)}
+        aria-describedby=${H(h)}
+        aria-expanded=${this._open ? "true" : "false"}
+        aria-invalid=${l ? "true" : "false"}
+        ?disabled=${this.disabled}
+        style=${m({ "--_preview-color": e })}
+        @click=${this._handleTriggerClick}
+      >
+        <slot name="trigger">
+          <span class="trigger-swatch" aria-hidden="true"></span>
+          <span class="trigger-label">${this._inputValue}</span>
+        </slot>
+      </button>
+      ${this._renderHelpSlot()} ${this._renderErrorSlot()}
+      ${this._open ? this._renderPanel() : $}
+    `;
+  }
+};
+o.styles = [U, F];
+o.formAssociated = !0;
+o.__testSupportsIdrefRefsOverride = null;
+a([
+  c({ type: String, reflect: !0 })
+], o.prototype, "value", 2);
+a([
+  c({ type: String, reflect: !0 })
+], o.prototype, "format", 2);
+a([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "opacity", 2);
+a([
+  c({ attribute: !1 })
+], o.prototype, "swatches", 2);
+a([
+  c({ type: Boolean, reflect: !0, attribute: "swatches-only" })
+], o.prototype, "swatchesOnly", 2);
+a([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+a([
+  c({ type: String, reflect: !0 })
+], o.prototype, "name", 2);
+a([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "inline", 2);
+a([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "required", 2);
+a([
+  c({ type: String, attribute: "label-gradient" })
+], o.prototype, "labelGradient", 2);
+a([
+  c({ type: String, attribute: "label-hue" })
+], o.prototype, "labelHue", 2);
+a([
+  c({ type: String, attribute: "label-opacity" })
+], o.prototype, "labelOpacity", 2);
+a([
+  c({ type: String, attribute: "label-swatches" })
+], o.prototype, "labelSwatches", 2);
+a([
+  c({ type: String, attribute: "label-switch-format" })
+], o.prototype, "labelSwitchFormat", 2);
+a([
+  c({ type: String, attribute: "label-color-value" })
+], o.prototype, "labelColorValue", 2);
+a([
+  c({ type: String, attribute: "label-picker" })
+], o.prototype, "labelPicker", 2);
+a([
+  c({ type: String, reflect: !0 })
+], o.prototype, "label", 2);
+a([
+  c({ type: String, attribute: "accessible-label" })
+], o.prototype, "accessibleLabel", 2);
+a([
+  c({ type: String, attribute: "help-text" })
+], o.prototype, "helpText", 2);
+a([
+  c({ type: String, reflect: !0 })
+], o.prototype, "error", 2);
+a([
+  c({ attribute: !1 })
+], o.prototype, "labelTrigger", 2);
+a([
+  f()
+], o.prototype, "_hsv", 2);
+a([
+  f()
+], o.prototype, "_open", 2);
+a([
+  f()
+], o.prototype, "_inputValue", 2);
+a([
+  f()
+], o.prototype, "_supportsIdrefRefs", 2);
+a([
+  f()
+], o.prototype, "_slottedLabelEls", 2);
+a([
+  f()
+], o.prototype, "_labelSlotText", 2);
+a([
+  f()
+], o.prototype, "_hasLabelSlot", 2);
+a([
+  f()
+], o.prototype, "_helpSlotText", 2);
+a([
+  f()
+], o.prototype, "_errorSlotText", 2);
+a([
+  f()
+], o.prototype, "_announcedError", 2);
+a([
+  f()
+], o.prototype, "_fallbackTriggerAriaLabelledBy", 2);
+a([
+  f()
+], o.prototype, "_fallbackTriggerAriaDescribedBy", 2);
+a([
+  f()
+], o.prototype, "_fallbackTriggerAriaLabel", 2);
+a([
+  f()
+], o.prototype, "_externalDescText", 2);
+a([
+  C('[part="grid"]')
+], o.prototype, "_gridEl", 2);
+a([
+  C('[part="hue-slider"]')
+], o.prototype, "_hueSliderEl", 2);
+a([
+  C('[part="opacity-slider"]')
+], o.prototype, "_opacitySliderEl", 2);
+o = a([
+  R("hx-color-picker")
+], o);
+export {
+  o as H
+};
+//# sourceMappingURL=hx-color-picker-Dk4cBwYQ.js.map