@helixui/library 3.6.0 → 3.8.0

package/dist/shared/{hx-color-picker-DBwJzT5f.js → hx-color-picker-CYjx8i8R.js}

@@ -1,13 +1,13 @@
-import { css as A, html as b, nothing as $ } from "lit";
+import { css as P, html as b, nothing as T } 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 { property as d, state as f, query as C, customElement as R } from "lit/decorators.js";
+import { ifDefined as D } 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-DCuEaknC.js";
+import { s as B, i as N, r as H } from "./aria-idref-DCuEaknC.js";
 import { f as y } from "./aria-flatten-DY6v2vah.js";
 import { H as V } from "./helix-element-BNEYeiys.js";
-const U = A`
+const G = P`
   :host {
     display: inline-block;
     position: relative;
@@ -53,6 +53,10 @@ const U = A`
     background: var(--hx-color-neutral-0, #ffffff);
     cursor: pointer;
     transition: border-color var(--hx-transition-fast, 150ms ease);
+    /* WCAG 2.5.5 AAA Target Size (Enhanced): 44×44 minimum.
+       Bound to --hx-touch-target-min so the trigger clears the AAA-strict
+       floor at default sizing. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
   .trigger:hover:not([disabled]) {
     border-color: var(
@@ -213,13 +217,20 @@ const U = A`
   }
   .format-btn {
     flex-shrink: 0;
+    /* WCAG 2.5.5 (Enhanced) AAA — interactive panel controls must clear
+       44×44. Without min-width/min-height the format toggle collapses to
+       its label box (~44×24 in default rendering, sub-44 on the y-axis). */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     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);
+    /* AAA 1.4.6: 12px label vs neutral-100 must be ≥7:1; neutral-700 = 9.34:1
+       (neutral-600 was 6.63:1, a tight AAA miss). */
+    color: var(--hx-color-neutral-700, #313e4b);
     text-transform: uppercase;
     font-weight: var(--hx-font-weight-semibold, 600);
     letter-spacing: 0.05em;
@@ -227,6 +238,8 @@ const U = A`
   .color-input {
     flex: 1;
     min-width: 0;
+    /* WCAG 2.5.5 (Enhanced) AAA — text input must clear 44×44. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
     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);
@@ -320,7 +333,7 @@ const U = A`
 function x(e, t, r) {
   return Math.max(t, Math.min(r, e));
 }
-function q(e) {
+function U(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);
@@ -331,75 +344,75 @@ function q(e) {
     a: (r & 255) / 255
   };
 }
-function T(e) {
+function $(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 q(e, t) {
+  const r = `#${$(e.r)}${$(e.g)}${$(e.b)}`;
+  return t && e.a < 1 ? r + $(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 };
+  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), n = s - h, l = s === 0 ? 0 : n / s, p = s;
+  let c = 0;
+  return n !== 0 && (s === t ? c = ((r - i) / n + (r < i ? 6 : 0)) / 6 : s === r ? c = ((i - t) / n + 2) / 6 : c = ((t - r) / n + 4) / 6), { h: c * 360, s: l * 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;
+function A(e) {
+  const t = e.h / 360, r = e.s / 100, i = e.v / 100, s = Math.floor(t * 6), h = t * 6 - s, n = i * (1 - r), l = i * (1 - h * r), p = i * (1 - (1 - h) * r);
+  let c = 0, _ = 0, g = 0;
   switch (s % 6) {
     case 0:
-      d = i, _ = p, g = l;
+      c = i, _ = p, g = n;
       break;
     case 1:
-      d = n, _ = i, g = l;
+      c = l, _ = i, g = n;
       break;
     case 2:
-      d = l, _ = i, g = p;
+      c = n, _ = i, g = p;
       break;
     case 3:
-      d = l, _ = n, g = i;
+      c = n, _ = l, g = i;
       break;
     case 4:
-      d = p, _ = l, g = i;
+      c = p, _ = n, g = i;
       break;
     case 5:
-      d = i, _ = l, g = n;
+      c = i, _ = n, g = l;
       break;
   }
-  return { r: Math.round(d * 255), g: Math.round(_ * 255), b: Math.round(g * 255), a: e.a };
+  return { r: Math.round(c * 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;
+  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), n = (s + h) / 2;
+  let l = 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;
+    const c = s - h;
+    p = n > 0.5 ? c / (2 - s - h) : c / (s + h), s === t ? l = ((r - i) / c + (r < i ? 6 : 0)) / 6 : s === r ? l = ((i - t) / c + 2) / 6 : l = ((t - r) / c + 4) / 6;
   }
-  return { h: n * 360, s: p * 100, l: l * 100, a: e.a };
+  return { h: l * 360, s: p * 100, l: n * 100, a: e.a };
 }
 function E(e) {
   if (!e) return null;
   if (e.startsWith("#")) {
-    const s = q(e);
+    const s = U(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;
+    const [, s, h, n, l] = 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
+      b: parseInt(n ?? "0", 10),
+      a: l !== void 0 ? parseFloat(l) : 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;
+    const [, s, h, n, l] = r, p = parseFloat(s ?? "0"), c = parseFloat(h ?? "0") / 100, _ = parseFloat(n ?? "0") / 100, g = l !== void 0 ? parseFloat(l) : 1, v = (1 - Math.abs(2 * _ - 1)) * c, 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),
@@ -412,21 +425,21 @@ function E(e) {
     /hsva?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)/
   );
   if (i) {
-    const [, s, h, l, n] = i;
+    const [, s, h, n, l] = i;
     return {
       h: parseFloat(s ?? "0"),
       s: parseFloat(h ?? "0"),
-      v: parseFloat(l ?? "0"),
-      a: n !== void 0 ? parseFloat(n) : 1
+      v: parseFloat(n ?? "0"),
+      a: l !== void 0 ? parseFloat(l) : 1
     };
   }
   return null;
 }
 function M(e, t, r) {
-  const i = D(e);
+  const i = A(e);
   switch (t) {
     case "hex":
-      return G(i, r);
+      return q(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": {
@@ -438,13 +451,13 @@ function M(e, t, r) {
   }
 }
 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);
+  for (var s = i > 1 ? void 0 : i ? K(t, r) : t, h = e.length - 1, n; h >= 0; h--)
+    (n = e[h]) && (s = (i ? n(t, r, s) : n(s)) || s);
   return i && s && z(t, r, s), s;
 };
-let X = 0, o = class extends I(V) {
+let W = 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);
+    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 = ++W, 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() {
@@ -629,20 +642,20 @@ let X = 0, o = class extends I(V) {
    */
   _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 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 = H(this, r), h = H(this, i), n = s.length > 0;
+    let l;
+    n ? l = s.map((u) => y(u)).filter((u) => u.length > 0).join(" ").replace(/\s+/g, " ").trim() || null : t ? l = t : this.accessibleLabel ? l = this.accessibleLabel : this.label ? l = this.label : this._hasLabelSlot && this._labelSlotText ? l = this._labelSlotText : l = 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;
+    const c = !!(this.error || this._errorSlotText), g = !e.validity.valid || c;
     if (this._supportsIdrefRefs) {
-      e.ariaLabel = n ?? null, e.ariaInvalid = g ? "true" : "false", e.ariaDisabled = this.disabled ? "true" : "false", e.ariaRequired = this.required ? "true" : "false";
+      e.ariaLabel = l ?? 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;
+      u.ariaLabelledByElements = n ? 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;
+      u.ariaLabelledByElements = null, u.ariaDescribedByElements = null, this._fallbackTriggerAriaLabelledBy = n ? r : null, this._fallbackTriggerAriaDescribedBy = i || null, this._fallbackTriggerAriaLabel = l;
     }
   }
   // ─── Effective text helpers (rendered into hidden host-desc span) ────────
@@ -852,7 +865,7 @@ let X = 0, o = class extends I(V) {
   }
   /** @internal */
   _previewColor() {
-    const e = D(this._hsv);
+    const e = A(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 ───────────────────────────────────────────────────────
@@ -909,8 +922,8 @@ let X = 0, o = class extends I(V) {
   }
   /** @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();
+    if (!this.opacity) return T;
+    const e = `${this._hsv.a * 100}%`, t = A(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"
@@ -952,7 +965,7 @@ let X = 0, o = class extends I(V) {
           `
     )}
       </div>
-    ` : $;
+    ` : T;
   }
   /** @internal */
   _renderInput() {
@@ -995,7 +1008,7 @@ let X = 0, o = class extends I(V) {
         tabindex="-1"
         @keydown=${this._handlePanelKeydown}
       >
-        ${this.swatchesOnly ? $ : b`${this._renderGrid()} ${this._renderHueSlider()} ${this._renderOpacitySlider()}`}
+        ${this.swatchesOnly ? T : b`${this._renderGrid()} ${this._renderHueSlider()} ${this._renderOpacitySlider()}`}
         ${this._renderSwatches()} ${this._renderInput()}
       </div>
     `;
@@ -1025,7 +1038,7 @@ let X = 0, o = class extends I(V) {
       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
-    >` : $;
+    >` : T;
   }
   /** @internal */
   _renderLabelSlot() {
@@ -1064,7 +1077,7 @@ let X = 0, o = class extends I(V) {
   }
   // ─── 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();
+    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((l) => !!l && l.length > 0).join(" ") || void 0, n = !this._internals.validity.valid || !!this._effectiveErrorText();
     return this.inline ? b`
         <div style=${m({ "--_preview-color": e })}>
           ${this._renderLabelSlot()} ${this._renderHostDescriptionSpan()} ${this._renderPanel()}
@@ -1077,10 +1090,10 @@ let X = 0, o = class extends I(V) {
         type="button"
         class="trigger"
         aria-label=${i}
-        aria-labelledby=${H(s)}
-        aria-describedby=${H(h)}
+        aria-labelledby=${D(s)}
+        aria-describedby=${D(h)}
         aria-expanded=${this._open ? "true" : "false"}
-        aria-invalid=${l ? "true" : "false"}
+        aria-invalid=${n ? "true" : "false"}
         ?disabled=${this.disabled}
         style=${m({ "--_preview-color": e })}
         @click=${this._handleTriggerClick}
@@ -1091,75 +1104,75 @@ let X = 0, o = class extends I(V) {
         </slot>
       </button>
       ${this._renderHelpSlot()} ${this._renderErrorSlot()}
-      ${this._open ? this._renderPanel() : $}
+      ${this._open ? this._renderPanel() : T}
     `;
   }
 };
-o.styles = [U, F];
+o.styles = [G, F];
 o.formAssociated = !0;
 o.__testSupportsIdrefRefsOverride = null;
 a([
-  c({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], o.prototype, "value", 2);
 a([
-  c({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], o.prototype, "format", 2);
 a([
-  c({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "opacity", 2);
 a([
-  c({ attribute: !1 })
+  d({ attribute: !1 })
 ], o.prototype, "swatches", 2);
 a([
-  c({ type: Boolean, reflect: !0, attribute: "swatches-only" })
+  d({ type: Boolean, reflect: !0, attribute: "swatches-only" })
 ], o.prototype, "swatchesOnly", 2);
 a([
-  c({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
 a([
-  c({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], o.prototype, "name", 2);
 a([
-  c({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "inline", 2);
 a([
-  c({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "required", 2);
 a([
-  c({ type: String, attribute: "label-gradient" })
+  d({ type: String, attribute: "label-gradient" })
 ], o.prototype, "labelGradient", 2);
 a([
-  c({ type: String, attribute: "label-hue" })
+  d({ type: String, attribute: "label-hue" })
 ], o.prototype, "labelHue", 2);
 a([
-  c({ type: String, attribute: "label-opacity" })
+  d({ type: String, attribute: "label-opacity" })
 ], o.prototype, "labelOpacity", 2);
 a([
-  c({ type: String, attribute: "label-swatches" })
+  d({ type: String, attribute: "label-swatches" })
 ], o.prototype, "labelSwatches", 2);
 a([
-  c({ type: String, attribute: "label-switch-format" })
+  d({ type: String, attribute: "label-switch-format" })
 ], o.prototype, "labelSwitchFormat", 2);
 a([
-  c({ type: String, attribute: "label-color-value" })
+  d({ type: String, attribute: "label-color-value" })
 ], o.prototype, "labelColorValue", 2);
 a([
-  c({ type: String, attribute: "label-picker" })
+  d({ type: String, attribute: "label-picker" })
 ], o.prototype, "labelPicker", 2);
 a([
-  c({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], o.prototype, "label", 2);
 a([
-  c({ type: String, attribute: "accessible-label" })
+  d({ type: String, attribute: "accessible-label" })
 ], o.prototype, "accessibleLabel", 2);
 a([
-  c({ type: String, attribute: "help-text" })
+  d({ type: String, attribute: "help-text" })
 ], o.prototype, "helpText", 2);
 a([
-  c({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], o.prototype, "error", 2);
 a([
-  c({ attribute: !1 })
+  d({ attribute: !1 })
 ], o.prototype, "labelTrigger", 2);
 a([
   f()
@@ -1218,4 +1231,4 @@ o = a([
 export {
   o as H
 };
-//# sourceMappingURL=hx-color-picker-DBwJzT5f.js.map
+//# sourceMappingURL=hx-color-picker-CYjx8i8R.js.map