@editora/ui-core 0.1.9 → 0.1.10

package/dist/color-picker.esm.js

@@ -0,0 +1,1809 @@
+import { E as V } from "./ElementBase-909688f3.mjs";
+import { r as W, l as K, i as I, s as G, c as X } from "./date-time-utils-bdceb7af.mjs";
+import "./calendar-2c11b824.mjs";
+import "./scroll-lock-9de6d328.mjs";
+function g(s, t, e) {
+  return Math.max(t, Math.min(e, s));
+}
+function m(s, t = 3) {
+  const e = 10 ** t;
+  return Math.round(s * e) / e;
+}
+function P(s) {
+  return g(Math.round(s), 0, 255);
+}
+function O(s) {
+  const t = s.trim();
+  if (!t)
+    return null;
+  if (t.endsWith("%")) {
+    const r = Number(t.slice(0, -1));
+    return Number.isFinite(r) ? g(r / 100, 0, 1) : null;
+  }
+  const e = Number(t);
+  return Number.isFinite(e) ? g(e, 0, 1) : null;
+}
+function B(s) {
+  const t = s.trim();
+  if (!t)
+    return null;
+  if (t.endsWith("%")) {
+    const r = Number(t.slice(0, -1));
+    return Number.isFinite(r) ? P(g(r, 0, 100) / 100 * 255) : null;
+  }
+  const e = Number(t);
+  return Number.isFinite(e) ? P(e) : null;
+}
+function H(s) {
+  const t = s.trim();
+  if (!t.endsWith("%"))
+    return null;
+  const e = Number(t.slice(0, -1));
+  return Number.isFinite(e) ? g(e, 0, 100) : null;
+}
+function Y(s) {
+  const t = s.trim().toLowerCase();
+  if (!t)
+    return null;
+  if (t.endsWith("deg")) {
+    const r = Number(t.slice(0, -3));
+    return Number.isFinite(r) ? w(r) : null;
+  }
+  if (t.endsWith("turn")) {
+    const r = Number(t.slice(0, -4));
+    return Number.isFinite(r) ? w(r * 360) : null;
+  }
+  if (t.endsWith("rad")) {
+    const r = Number(t.slice(0, -3));
+    return Number.isFinite(r) ? w(r * 180 / Math.PI) : null;
+  }
+  const e = Number(t);
+  return Number.isFinite(e) ? w(e) : null;
+}
+function w(s) {
+  const t = s % 360;
+  return t < 0 ? t + 360 : t;
+}
+function F(s) {
+  const t = s.trim();
+  if (!t)
+    return null;
+  if (t.includes("/")) {
+    const [r, i] = t.split("/");
+    if (i == null)
+      return null;
+    const a = r.includes(",") ? r.split(",") : r.trim().split(/\s+/);
+    return a.length < 3 ? null : {
+      channels: a.map((n) => n.trim()).filter(Boolean),
+      alpha: i.trim()
+    };
+  }
+  if (t.includes(",")) {
+    const r = t.split(",").map((i) => i.trim()).filter(Boolean);
+    return r.length < 3 ? null : {
+      channels: r.slice(0, 3),
+      alpha: r[3] ?? null
+    };
+  }
+  const e = t.split(/\s+/).map((r) => r.trim()).filter(Boolean);
+  return e.length < 3 ? null : {
+    channels: e.slice(0, 3),
+    alpha: e[3] ?? null
+  };
+}
+function j(s) {
+  const t = s.trim().replace(/^#/, "");
+  if (![3, 4, 6, 8].includes(t.length) || !/^[0-9a-f]+$/i.test(t))
+    return null;
+  if (t.length === 3 || t.length === 4) {
+    const n = parseInt(t[0] + t[0], 16), o = parseInt(t[1] + t[1], 16), l = parseInt(t[2] + t[2], 16), c = t.length === 4 ? parseInt(t[3] + t[3], 16) / 255 : 1;
+    return h({ r: n, g: o, b: l, a: c });
+  }
+  const e = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16), a = t.length === 8 ? parseInt(t.slice(6, 8), 16) / 255 : 1;
+  return h({ r: e, g: r, b: i, a });
+}
+function J(s) {
+  const t = /^rgba?\((.+)\)$/i.exec(s.trim());
+  if (!t)
+    return null;
+  const e = F(t[1]);
+  if (!e || e.channels.length < 3)
+    return null;
+  const r = B(e.channels[0]), i = B(e.channels[1]), a = B(e.channels[2]);
+  if (r == null || i == null || a == null)
+    return null;
+  const n = e.alpha != null ? O(e.alpha) : 1;
+  return n == null ? null : h({ r, g: i, b: a, a: n });
+}
+function Q(s) {
+  const t = /^hsla?\((.+)\)$/i.exec(s.trim());
+  if (!t)
+    return null;
+  const e = F(t[1]);
+  if (!e || e.channels.length < 3)
+    return null;
+  const r = Y(e.channels[0]), i = H(e.channels[1]), a = H(e.channels[2]);
+  if (r == null || i == null || a == null)
+    return null;
+  const n = e.alpha != null ? O(e.alpha) : 1;
+  return n == null ? null : U({ h: r, s: i, l: a, a: n });
+}
+function h(s) {
+  return {
+    r: P(s.r),
+    g: P(s.g),
+    b: P(s.b),
+    a: m(g(s.a, 0, 1), 4)
+  };
+}
+function f(s) {
+  const t = (s || "").trim();
+  return t ? t.startsWith("#") ? j(t) : /^rgba?\(/i.test(t) ? J(t) : /^hsla?\(/i.test(t) ? Q(t) : null : null;
+}
+function Z(s, t = !1) {
+  const e = h(s), r = (a) => a.toString(16).padStart(2, "0"), i = `#${r(e.r)}${r(e.g)}${r(e.b)}`;
+  return t ? `${i}${r(Math.round(e.a * 255))}` : i;
+}
+function tt(s, t = !0) {
+  const e = h(s);
+  return !t || e.a >= 1 ? `rgb(${e.r} ${e.g} ${e.b})` : `rgb(${e.r} ${e.g} ${e.b} / ${m(e.a, 3)})`;
+}
+function et(s, t = !0) {
+  const e = Math.round(w(s.h)), r = Math.round(g(s.s, 0, 100)), i = Math.round(g(s.l, 0, 100)), a = m(g(s.a, 0, 1), 3);
+  return !t || a >= 1 ? `hsl(${e} ${r}% ${i}%)` : `hsl(${e} ${r}% ${i}% / ${a})`;
+}
+function T(s) {
+  const t = h(s), e = t.r / 255, r = t.g / 255, i = t.b / 255, a = Math.max(e, r, i), n = Math.min(e, r, i), o = a - n;
+  let l = 0;
+  o !== 0 && (a === e ? l = (r - i) / o % 6 : a === r ? l = (i - e) / o + 2 : l = (e - r) / o + 4, l *= 60, l < 0 && (l += 360));
+  const c = a === 0 ? 0 : o / a * 100, b = a * 100;
+  return {
+    h: m(l, 3),
+    s: m(c, 3),
+    v: m(b, 3),
+    a: t.a
+  };
+}
+function rt(s) {
+  const t = w(s.h), e = g(s.s, 0, 100) / 100, r = g(s.v, 0, 100) / 100, i = r * e, a = i * (1 - Math.abs(t / 60 % 2 - 1)), n = r - i;
+  let o = 0, l = 0, c = 0;
+  return t < 60 ? (o = i, l = a) : t < 120 ? (o = a, l = i) : t < 180 ? (l = i, c = a) : t < 240 ? (l = a, c = i) : t < 300 ? (o = a, c = i) : (o = i, c = a), h({
+    r: (o + n) * 255,
+    g: (l + n) * 255,
+    b: (c + n) * 255,
+    a: s.a
+  });
+}
+function L(s) {
+  const t = h(s), e = t.r / 255, r = t.g / 255, i = t.b / 255, a = Math.max(e, r, i), n = Math.min(e, r, i), o = a - n, l = (a + n) / 2;
+  let c = 0, b = 0;
+  return o !== 0 && (b = o / (1 - Math.abs(2 * l - 1)), a === e ? c = (r - i) / o % 6 : a === r ? c = (i - e) / o + 2 : c = (e - r) / o + 4, c *= 60, c < 0 && (c += 360)), {
+    h: m(c, 3),
+    s: m(b * 100, 3),
+    l: m(l * 100, 3),
+    a: t.a
+  };
+}
+function U(s) {
+  const t = w(s.h), e = g(s.s, 0, 100) / 100, r = g(s.l, 0, 100) / 100, i = (1 - Math.abs(2 * r - 1)) * e, a = i * (1 - Math.abs(t / 60 % 2 - 1)), n = r - i / 2;
+  let o = 0, l = 0, c = 0;
+  return t < 60 ? (o = i, l = a) : t < 120 ? (o = a, l = i) : t < 180 ? (l = i, c = a) : t < 240 ? (l = a, c = i) : t < 300 ? (o = a, c = i) : (o = i, c = a), h({
+    r: (o + n) * 255,
+    g: (l + n) * 255,
+    b: (c + n) * 255,
+    a: s.a
+  });
+}
+function x(s, t) {
+  return Z(s, t).toUpperCase();
+}
+function S(s, t) {
+  return tt(s, t);
+}
+function it(s, t) {
+  return et(L(s), t);
+}
+const z = "#2563eb", $ = "editora:ui-color-picker:recent", at = `
+  <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
+    <path d="m5.6 7.6 4.4 4.6 4.4-4.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`, q = `
+  :host {
+    --ui-cp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-cp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-cp-text: var(--ui-color-text, #0f172a);
+    --ui-cp-muted: var(--ui-color-muted, #64748b);
+    --ui-cp-accent: var(--ui-color-primary, #2563eb);
+    --ui-cp-success: var(--ui-color-success, #16a34a);
+    --ui-cp-warning: var(--ui-color-warning, #d97706);
+    --ui-cp-danger: var(--ui-color-danger, #dc2626);
+    --ui-cp-radius: 14px;
+    --ui-cp-shadow: none;
+    --ui-cp-padding: 10px;
+    --ui-cp-duration: 160ms;
+    --ui-cp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+    --ui-cp-z: 1600;
+    --ui-cp-thumb: #ffffff;
+    --ui-cp-thumb-ring: color-mix(in srgb, var(--ui-cp-accent) 44%, transparent);
+    --ui-cp-checker-a: #e2e8f0;
+    --ui-cp-checker-b: #f8fafc;
+    --ui-cp-swatch-size: 22px;
+    --ui-cp-gap: 8px;
+    color-scheme: light dark;
+    display: inline-block;
+    min-inline-size: min(260px, 100%);
+    inline-size: min(100%, var(--ui-width, 312px));
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color: var(--ui-cp-text);
+  }
+
+  :host([size="sm"]) {
+    --ui-cp-padding: 8px;
+    --ui-cp-gap: 7px;
+    --ui-cp-swatch-size: 20px;
+  }
+
+  :host([size="lg"]) {
+    --ui-cp-padding: 12px;
+    --ui-cp-gap: 10px;
+    --ui-cp-swatch-size: 24px;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-cp-bg: #0f172a;
+    --ui-cp-border: #334155;
+    --ui-cp-text: #e2e8f0;
+    --ui-cp-muted: #93a4bd;
+    --ui-cp-accent: #93c5fd;
+    --ui-cp-checker-a: #475569;
+    --ui-cp-checker-b: #334155;
+    --ui-cp-shadow: 0 18px 40px rgba(2, 6, 23, 0.55);
+  }
+
+  :host([tone="neutral"]) {
+    --ui-cp-accent: color-mix(in srgb, var(--ui-cp-text) 38%, var(--ui-cp-muted) 62%);
+  }
+
+  :host([tone="success"]) {
+    --ui-cp-accent: var(--ui-cp-success);
+  }
+
+  :host([tone="warning"]) {
+    --ui-cp-accent: var(--ui-cp-warning);
+  }
+
+  :host([tone="danger"]) {
+    --ui-cp-accent: var(--ui-cp-danger);
+  }
+
+  :host([state="error"]) {
+    --ui-cp-accent: var(--ui-cp-danger);
+  }
+
+  :host([state="success"]) {
+    --ui-cp-accent: var(--ui-cp-success);
+  }
+
+  .root {
+    display: grid;
+    gap: 8px;
+  }
+
+  .trigger-wrap[hidden] {
+    display: none;
+  }
+
+  .trigger {
+    inline-size: 100%;
+    min-block-size: 38px;
+    border-radius: calc(var(--ui-cp-radius) - 2px);
+    border: 1px solid var(--ui-cp-border);
+    background: var(--ui-cp-bg);
+    color: var(--ui-cp-text);
+    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.08);
+    padding: 0 10px;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 8px;
+    text-align: left;
+    cursor: pointer;
+    transition:
+      border-color var(--ui-cp-duration) var(--ui-cp-ease),
+      background-color var(--ui-cp-duration) var(--ui-cp-ease),
+      box-shadow var(--ui-cp-duration) var(--ui-cp-ease),
+      color var(--ui-cp-duration) var(--ui-cp-ease);
+  }
+
+  .trigger:hover {
+    border-color: color-mix(in srgb, var(--ui-cp-accent) 32%, var(--ui-cp-border));
+    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.12);
+  }
+
+  .trigger:active {
+    transform: translateY(1px);
+  }
+
+  .trigger:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-cp-accent) 64%, transparent);
+    outline-offset: 1px;
+  }
+
+  .trigger[disabled] {
+    cursor: not-allowed;
+    opacity: 0.62;
+  }
+
+  .trigger-preview {
+    inline-size: 16px;
+    block-size: 16px;
+    border-radius: 6px;
+    border: 1px solid color-mix(in srgb, var(--ui-cp-border) 88%, transparent);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
+    background: #2563eb;
+  }
+
+  .trigger-value {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font: 600 12px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .trigger-chevron {
+    inline-size: 14px;
+    block-size: 14px;
+    display: inline-grid;
+    place-items: center;
+    color: color-mix(in srgb, var(--ui-cp-text) 70%, transparent);
+  }
+
+  .trigger-chevron svg {
+    inline-size: 14px;
+    block-size: 14px;
+    pointer-events: none;
+  }
+
+  .panel-inline[hidden] {
+    display: none !important;
+  }
+
+  .panel {
+    border: 1px solid var(--ui-cp-border);
+    border-radius: var(--ui-cp-radius);
+    background: var(--ui-cp-bg);
+    box-shadow: var(--ui-cp-shadow);
+    padding: var(--ui-cp-padding);
+    display: grid;
+    gap: var(--ui-cp-gap);
+    min-inline-size: 0;
+    transition:
+      border-color var(--ui-cp-duration) var(--ui-cp-ease),
+      box-shadow var(--ui-cp-duration) var(--ui-cp-ease),
+      background-color var(--ui-cp-duration) var(--ui-cp-ease),
+      opacity var(--ui-cp-duration) var(--ui-cp-ease);
+  }
+
+  .panel[data-state="error"] {
+    border-color: color-mix(in srgb, var(--ui-cp-danger) 46%, var(--ui-cp-border));
+  }
+
+  .panel[data-state="success"] {
+    border-color: color-mix(in srgb, var(--ui-cp-success) 42%, var(--ui-cp-border));
+  }
+
+  .panel[data-state="loading"] {
+    opacity: 0.92;
+  }
+
+  .panel,
+  .panel * {
+    box-sizing: border-box;
+  }
+
+  .header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .heading {
+    min-inline-size: 0;
+    display: grid;
+    gap: 4px;
+  }
+
+  .label {
+    font: 700 13px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color: var(--ui-cp-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .value {
+    font: 500 11px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color: var(--ui-cp-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .header-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+
+  .preview {
+    inline-size: 20px;
+    block-size: 20px;
+    border-radius: 6px;
+    border: 1px solid color-mix(in srgb, var(--ui-cp-border) 86%, transparent);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
+    background: #2563eb;
+  }
+
+  .status-pill {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: 20px;
+    border-radius: 999px;
+    padding: 0 8px;
+    border: 1px solid color-mix(in srgb, var(--ui-cp-accent) 36%, var(--ui-cp-border));
+    background: color-mix(in srgb, var(--ui-cp-accent) 12%, transparent);
+    color: color-mix(in srgb, var(--ui-cp-accent) 82%, var(--ui-cp-text));
+    font: 650 10px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .status-pill[hidden] {
+    display: none !important;
+  }
+
+  .icon-btn {
+    border: 1px solid color-mix(in srgb, var(--ui-cp-border) 84%, transparent);
+    background: color-mix(in srgb, var(--ui-cp-bg) 94%, transparent);
+    color: var(--ui-cp-text);
+    min-inline-size: 32px;
+    block-size: 30px;
+    border-radius: 9px;
+    padding: 0 8px;
+    display: inline-grid;
+    place-items: center;
+    cursor: pointer;
+    font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    transition:
+      border-color var(--ui-cp-duration) var(--ui-cp-ease),
+      background-color var(--ui-cp-duration) var(--ui-cp-ease),
+      color var(--ui-cp-duration) var(--ui-cp-ease);
+  }
+
+  .icon-btn:hover {
+    background: color-mix(in srgb, var(--ui-cp-accent) 12%, transparent);
+    border-color: color-mix(in srgb, var(--ui-cp-accent) 34%, var(--ui-cp-border));
+  }
+
+  .icon-btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-cp-accent) 62%, transparent);
+    outline-offset: 1px;
+  }
+
+  .icon-btn[hidden] {
+    display: none !important;
+  }
+
+  .icon-btn[disabled] {
+    opacity: 0.52;
+    cursor: not-allowed;
+  }
+
+  .body {
+    display: grid;
+    gap: 8px;
+  }
+
+  .sv {
+    position: relative;
+    inline-size: 100%;
+    block-size: clamp(128px, 16vw, 156px);
+    border-radius: 10px;
+    border: 1px solid color-mix(in srgb, var(--ui-cp-border) 82%, transparent);
+    overflow: visible;
+    cursor: crosshair;
+    touch-action: none;
+    background:
+      linear-gradient(to top, #000, transparent),
+      linear-gradient(to right, #fff, #f00);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-cp-border) 42%, transparent);
+  }
+
+  .sv:focus-visible,
+  .slider:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-cp-accent) 64%, transparent);
+    outline-offset: 1px;
+  }
+
+  .thumb {
+    position: absolute;
+    inline-size: 12px;
+    block-size: 12px;
+    margin-inline-start: -6px;
+    margin-block-start: -6px;
+    border-radius: 999px;
+    background: var(--ui-cp-thumb);
+    border: 2px solid rgba(255, 255, 255, 0.95);
+    box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.35), 0 0 0 4px color-mix(in srgb, var(--ui-cp-thumb-ring) 28%, transparent);
+    pointer-events: none;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .slider {
+    position: relative;
+    block-size: 12px;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--ui-cp-border) 82%, transparent);
+    cursor: pointer;
+    touch-action: none;
+    overflow: visible;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-cp-border) 40%, transparent);
+  }
+
+  .slider.hue {
+    background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
+  }
+
+  .slider.alpha {
+    background-image:
+      linear-gradient(45deg, var(--ui-cp-checker-a) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--ui-cp-checker-a) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--ui-cp-checker-a) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--ui-cp-checker-a) 75%),
+      linear-gradient(to right, transparent, rgba(0, 0, 0, 1));
+    background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px, 100% 100%;
+    background-position: 0 0, 0 5px, 5px -5px, -5px 0, 0 0;
+    background-color: var(--ui-cp-checker-b);
+  }
+
+  .slider-thumb {
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: 12px;
+    block-size: 12px;
+    margin-inline-start: -6px;
+    margin-block-start: -6px;
+    border-radius: 999px;
+    background: var(--ui-cp-thumb);
+    border: 2px solid rgba(255, 255, 255, 0.95);
+    box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.3);
+    pointer-events: none;
+  }
+
+  .alpha-row[hidden] {
+    display: none !important;
+  }
+
+  .footer {
+    display: grid;
+    gap: 8px;
+  }
+
+  .tabs {
+    display: inline-grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    border: 1px solid color-mix(in srgb, var(--ui-cp-border) 84%, transparent);
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .tab {
+    border: 0;
+    background: transparent;
+    color: var(--ui-cp-muted);
+    min-block-size: 30px;
+    font: 650 11px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    cursor: pointer;
+    transition:
+      background-color var(--ui-cp-duration) var(--ui-cp-ease),
+      color var(--ui-cp-duration) var(--ui-cp-ease);
+  }
+
+  .tab[data-active="true"] {
+    background: color-mix(in srgb, var(--ui-cp-accent) 15%, transparent);
+    color: var(--ui-cp-text);
+  }
+
+  .tab:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-cp-accent) 64%, transparent);
+    outline-offset: -2px;
+  }
+
+  .group {
+    display: grid;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  .group[hidden] {
+    display: none !important;
+  }
+
+  .input-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
+    gap: 6px;
+  }
+
+  .input-row[data-fields="3"] {
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  }
+
+  .field {
+    display: grid;
+    gap: 4px;
+    min-inline-size: 0;
+  }
+
+  .field > span {
+    font: 600 10px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color: var(--ui-cp-muted);
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  .input {
+    min-inline-size: 0;
+    inline-size: 100%;
+    min-block-size: 28px;
+    border-radius: 8px;
+    border: 1px solid color-mix(in srgb, var(--ui-cp-border) 86%, transparent);
+    background: color-mix(in srgb, var(--ui-cp-bg) 95%, transparent);
+    color: var(--ui-cp-text);
+    font: 600 11px/1.1 "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
+    padding: 0 7px;
+    max-inline-size: 100%;
+    overflow: hidden;
+  }
+
+  .input:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-cp-accent) 64%, transparent);
+    outline-offset: 1px;
+  }
+
+  .swatches-wrap {
+    display: grid;
+    gap: 6px;
+  }
+
+  .swatches-title {
+    font: 600 10px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color: var(--ui-cp-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+  }
+
+  .swatch {
+    inline-size: var(--ui-cp-swatch-size);
+    block-size: var(--ui-cp-swatch-size);
+    border-radius: 8px;
+    border: 1px solid color-mix(in srgb, var(--ui-cp-border) 84%, transparent);
+    background: #2563eb;
+    cursor: pointer;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
+    padding: 0;
+    transition:
+      transform var(--ui-cp-duration) var(--ui-cp-ease),
+      box-shadow var(--ui-cp-duration) var(--ui-cp-ease),
+      border-color var(--ui-cp-duration) var(--ui-cp-ease);
+  }
+
+  .swatch:hover {
+    transform: translateY(-1px);
+    border-color: color-mix(in srgb, var(--ui-cp-accent) 40%, var(--ui-cp-border));
+    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.18);
+  }
+
+  .swatch[data-selected="true"] {
+    outline: 2px solid color-mix(in srgb, var(--ui-cp-accent) 72%, transparent);
+    outline-offset: 1px;
+  }
+
+  .swatch:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-cp-accent) 64%, transparent);
+    outline-offset: 1px;
+  }
+
+  .error {
+    min-block-size: 16px;
+    color: var(--ui-color-danger, #dc2626);
+    font: 500 11px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .error[hidden] {
+    display: none !important;
+  }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+  }
+
+  .actions .btn {
+    min-block-size: 28px;
+    border-radius: 9px;
+    border: 1px solid color-mix(in srgb, var(--ui-cp-border) 84%, transparent);
+    background: color-mix(in srgb, var(--ui-cp-bg) 95%, transparent);
+    color: var(--ui-cp-text);
+    font: 650 12px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: 0 10px;
+    cursor: pointer;
+    transition:
+      border-color var(--ui-cp-duration) var(--ui-cp-ease),
+      background-color var(--ui-cp-duration) var(--ui-cp-ease),
+      color var(--ui-cp-duration) var(--ui-cp-ease);
+  }
+
+  .actions .btn[data-tone="primary"] {
+    border-color: color-mix(in srgb, var(--ui-cp-accent) 62%, transparent);
+    background: color-mix(in srgb, var(--ui-cp-accent) 18%, transparent);
+  }
+
+  .actions .btn[hidden] {
+    display: none !important;
+  }
+
+  .live {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  :host([disabled]) .panel,
+  :host([disabled]) .trigger,
+  :host([state="loading"]) .panel,
+  :host([state="loading"]) .trigger {
+    opacity: 0.66;
+    pointer-events: none;
+  }
+
+  @media (max-width: 440px) {
+    .sv {
+      block-size: 132px;
+    }
+
+    .input-row,
+    .input-row[data-fields="3"] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .icon-btn,
+    .tab,
+    .panel,
+    .trigger {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .panel,
+    .trigger,
+    .icon-btn,
+    .tab,
+    .input,
+    .swatch,
+    .actions .btn {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-cp-bg: Canvas;
+      --ui-cp-border: CanvasText;
+      --ui-cp-text: CanvasText;
+      --ui-cp-muted: CanvasText;
+      --ui-cp-accent: Highlight;
+      --ui-cp-shadow: none;
+      --ui-cp-thumb: Canvas;
+    }
+
+    .panel,
+    .trigger,
+    .icon-btn,
+    .tab,
+    .input,
+    .swatch,
+    .actions .btn,
+    .preview,
+    .trigger-preview,
+    .sv,
+    .slider {
+      forced-color-adjust: none;
+      background: Canvas;
+      border-color: CanvasText;
+      color: CanvasText;
+      box-shadow: none;
+    }
+
+    .tab[data-active="true"],
+    .actions .btn[data-tone="primary"] {
+      background: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+  }
+`, nt = `
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--ui-cp-z, 1600);
+    pointer-events: none;
+  }
+
+  .popover-shell {
+    position: absolute;
+    pointer-events: auto;
+    inline-size: min(320px, calc(100vw - 16px));
+  }
+
+  .sheet-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.52);
+    pointer-events: auto;
+  }
+
+  .sheet-shell {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    pointer-events: auto;
+    padding: 8px;
+  }
+
+  .sheet-shell .panel {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    inline-size: min(100%, 520px);
+    margin: 0 auto;
+    max-block-size: min(84vh, 680px);
+    overflow: auto;
+  }
+`;
+function u(s, t, e) {
+  return Math.max(t, Math.min(e, s));
+}
+function M(s, t) {
+  return Math.abs(s - t) <= 5e-4;
+}
+function A(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+class st extends V {
+  constructor() {
+    super(), this._syncing = !1, this._initialized = !1, this._rgba = h(f(z) || { r: 37, g: 99, b: 235, a: 1 }), this._hsva = T(this._rgba), this._format = "hex", this._open = !1, this._error = "", this._presets = [], this._recentColors = [], this._panelCache = /* @__PURE__ */ new WeakMap(), this._overlay = null, this._overlayRoot = null, this._releaseScrollLock = null, this._restoreFocusEl = null, this._isSheetOpen = !1, this._dragTarget = null, this._dragPointerId = -1, this._dragRect = null, this._dragX = 0, this._dragY = 0, this._dragRaf = 0, this._dragChanged = !1, this._dragSource = "drag", this._renderingSwatches = !1, this._scheduleOverlayPosition = W(() => this._positionOverlay()), this._onRootClickBound = (t) => this._onPanelClick(t, "root"), this._onRootInputBound = (t) => this._onPanelInput(t, "root"), this._onRootChangeBound = (t) => this._onPanelChange(t, "root"), this._onRootKeyDownBound = (t) => this._onPanelKeyDown(t, "root"), this._onRootPointerDownBound = (t) => this._onPanelPointerDown(t, "root"), this._onRootPointerMoveBound = (t) => this._onPanelPointerMove(t), this._onRootPointerUpBound = (t) => this._onPanelPointerUp(t), this._onRootPointerCancelBound = (t) => this._onPanelPointerCancel(t), this._onDocumentPointerDownBound = (t) => this._onDocumentPointerDown(t), this._onDocumentKeyDownBound = (t) => this._onDocumentKeyDown(t), this._onWindowResizeBound = () => this._scheduleOverlayPosition.run(), this._onWindowScrollBound = () => this._scheduleOverlayPosition.run(), this._applyValueAttribute(!1), this._applyFormatAttribute(), this._open = this.hasAttribute("open"), this._parsePresetsAttribute();
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "format",
+      "alpha",
+      "disabled",
+      "readonly",
+      "size",
+      "variant",
+      "state",
+      "tone",
+      "mode",
+      "open",
+      "close-on-escape",
+      "placeholder",
+      "presets",
+      "recent",
+      "max-recent",
+      "persist",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._bindRootEvents(), this._loadRecent(), !this._isPopoverMode() && this._open && (this._open = !1, this._syncOpenAttribute(!1));
+  }
+  disconnectedCallback() {
+    this._cancelDragFrame(), this._stopDrag(!1), this._destroyOverlay(), this.root.removeEventListener("click", this._onRootClickBound), this.root.removeEventListener("input", this._onRootInputBound), this.root.removeEventListener("change", this._onRootChangeBound), this.root.removeEventListener("keydown", this._onRootKeyDownBound), this.root.removeEventListener("pointerdown", this._onRootPointerDownBound), this.root.removeEventListener("pointermove", this._onRootPointerMoveBound), this.root.removeEventListener("pointerup", this._onRootPointerUpBound), this.root.removeEventListener("pointercancel", this._onRootPointerCancelBound), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r) {
+      switch (t) {
+        case "value":
+          this._syncing || this._applyValueAttribute(!0);
+          break;
+        case "format":
+          this._applyFormatAttribute();
+          break;
+        case "presets":
+          this._parsePresetsAttribute();
+          break;
+        case "open":
+          this._syncing || (this._open = this.hasAttribute("open"));
+          break;
+        case "disabled":
+        case "state":
+          (this.hasAttribute("disabled") || this._isLoading()) && this._open && this._setOpen(!1, "attribute");
+          break;
+        case "alpha": {
+          this._alphaEnabled() || (this._rgba = h({ ...this._rgba, a: 1 }), this._hsva = { ...this._hsva, a: 1 }, this._syncValueAttribute());
+          break;
+        }
+      }
+      this.isConnected && this.requestRender();
+    }
+  }
+  get value() {
+    return this.getAttribute("value") || this._serializeValue();
+  }
+  set value(t) {
+    this.setColor(t);
+  }
+  get format() {
+    return this._format;
+  }
+  set format(t) {
+    this.setAttribute("format", t);
+  }
+  get alpha() {
+    return this._alphaEnabled();
+  }
+  set alpha(t) {
+    t ? this.setAttribute("alpha", "") : this.removeAttribute("alpha");
+  }
+  get open() {
+    return this._open;
+  }
+  set open(t) {
+    this._setOpen(t, "api");
+  }
+  setColor(t) {
+    const e = f(t || "");
+    if (!e) {
+      this._setInvalid(t, "Invalid color format");
+      return;
+    }
+    this._error = "", this._applyRgba(e, !1), this._syncValueAttribute(), this._updateUI(!1);
+  }
+  getColor() {
+    const t = h(this._rgba);
+    return {
+      hex: x(t, this._alphaEnabled()),
+      rgba: t,
+      hsva: { ...this._hsva }
+    };
+  }
+  openPopover() {
+    this._setOpen(!0, "api");
+  }
+  closePopover() {
+    this._setOpen(!1, "api");
+  }
+  focus() {
+    const t = this.root.querySelector(".trigger"), e = this.root.querySelector('[data-cp="sv"]');
+    (t || e || this).focus();
+  }
+  render() {
+    this._initialized || (this._initialized = !0, this.setContent(this._buildTemplate(), { force: !0 })), !this._isPopoverMode() && this._open && (this._open = !1, this._syncOpenAttribute(!1)), this._isPopoverMode() && this._open ? (this._ensureOverlay(), this._renderOverlayTemplate(), this._scheduleOverlayPosition.run()) : this._destroyOverlay(), this._updateUI(!1);
+  }
+  _bindRootEvents() {
+    this.root.removeEventListener("click", this._onRootClickBound), this.root.removeEventListener("input", this._onRootInputBound), this.root.removeEventListener("change", this._onRootChangeBound), this.root.removeEventListener("keydown", this._onRootKeyDownBound), this.root.removeEventListener("pointerdown", this._onRootPointerDownBound), this.root.removeEventListener("pointermove", this._onRootPointerMoveBound), this.root.removeEventListener("pointerup", this._onRootPointerUpBound), this.root.removeEventListener("pointercancel", this._onRootPointerCancelBound), this.root.addEventListener("click", this._onRootClickBound), this.root.addEventListener("input", this._onRootInputBound), this.root.addEventListener("change", this._onRootChangeBound), this.root.addEventListener("keydown", this._onRootKeyDownBound), this.root.addEventListener("pointerdown", this._onRootPointerDownBound), this.root.addEventListener("pointermove", this._onRootPointerMoveBound), this.root.addEventListener("pointerup", this._onRootPointerUpBound), this.root.addEventListener("pointercancel", this._onRootPointerCancelBound);
+  }
+  _eventHTMLElement(t) {
+    const e = typeof t.composedPath == "function" ? t.composedPath() : [];
+    for (const i of e)
+      if (i instanceof HTMLElement)
+        return i;
+    const r = t.target;
+    return r instanceof HTMLElement ? r : null;
+  }
+  _buildTemplate() {
+    return `
+      <style>${q}</style>
+      <section class="root">
+        <div class="trigger-wrap" data-role="trigger-wrap">
+          <button
+            type="button"
+            class="trigger"
+            data-action="toggle-popover"
+            part="frame preview"
+            aria-haspopup="dialog"
+            aria-expanded="false"
+          >
+            <span class="trigger-preview" data-role="trigger-preview"></span>
+            <span class="trigger-value" data-role="trigger-value"></span>
+            <span class="trigger-chevron" aria-hidden="true">${at}</span>
+          </button>
+        </div>
+        <div class="panel-inline" data-role="inline-panel" part="popover">
+          ${this._panelMarkup("inline")}
+        </div>
+      </section>
+    `;
+  }
+  _panelMarkup(t) {
+    return `
+      <section class="panel" data-cp-panel="${t}" part="frame popover">
+        <header class="header" part="header">
+          <div class="heading">
+            <span class="label" part="title" data-role="label">Color picker</span>
+            <span class="value" part="description" data-role="value"></span>
+          </div>
+          <div class="header-actions">
+            <span class="preview" data-role="preview" part="preview"></span>
+            <span class="status-pill" data-role="status" part="status" hidden></span>
+            <button type="button" class="icon-btn" data-action="copy-hex" part="copy" title="Copy HEX">HEX</button>
+            <button type="button" class="icon-btn" data-action="copy-rgb" part="copy" title="Copy RGB">RGB</button>
+            <button type="button" class="icon-btn" data-action="eyedropper" part="copy" title="Eyedropper">Pick</button>
+          </div>
+        </header>
+
+        <div class="body" part="body">
+          <div class="sv" part="sv" data-cp="sv" role="slider" tabindex="0" aria-label="Saturation and value">
+            <span class="thumb" data-role="sv-thumb"></span>
+          </div>
+          <div class="slider hue" part="hue" data-cp="hue" role="slider" tabindex="0" aria-label="Hue">
+            <span class="slider-thumb" data-role="hue-thumb"></span>
+          </div>
+          <div class="alpha-row" data-role="alpha-row">
+            <div class="slider alpha" part="alpha" data-cp="alpha" role="slider" tabindex="0" aria-label="Alpha">
+              <span class="slider-thumb" data-role="alpha-thumb"></span>
+            </div>
+          </div>
+        </div>
+
+        <footer class="footer" part="footer">
+          <div class="tabs" part="tabs">
+            <button type="button" class="tab" data-action="format" data-format="hex">HEX</button>
+            <button type="button" class="tab" data-action="format" data-format="rgb">RGB</button>
+            <button type="button" class="tab" data-action="format" data-format="hsl">HSL</button>
+          </div>
+
+          <div class="group" data-format-group="hex">
+            <div class="field">
+              <span>Value</span>
+              <input class="input" data-input="hex" part="input" spellcheck="false" autocomplete="off" />
+            </div>
+          </div>
+
+          <div class="group" data-format-group="rgb" hidden>
+            <div class="input-row" data-fields="4">
+              <label class="field"><span>R</span><input class="input" data-input="r" type="number" part="input" min="0" max="255" /></label>
+              <label class="field"><span>G</span><input class="input" data-input="g" type="number" part="input" min="0" max="255" /></label>
+              <label class="field"><span>B</span><input class="input" data-input="b" type="number" part="input" min="0" max="255" /></label>
+              <label class="field"><span>A</span><input class="input" data-input="a1" type="number" part="input" min="0" max="1" step="0.01" /></label>
+            </div>
+          </div>
+
+          <div class="group" data-format-group="hsl" hidden>
+            <div class="input-row" data-fields="4">
+              <label class="field"><span>H</span><input class="input" data-input="h" type="number" part="input" min="0" max="360" /></label>
+              <label class="field"><span>S</span><input class="input" data-input="s" type="number" part="input" min="0" max="100" /></label>
+              <label class="field"><span>L</span><input class="input" data-input="l" type="number" part="input" min="0" max="100" /></label>
+              <label class="field"><span>A</span><input class="input" data-input="a2" type="number" part="input" min="0" max="1" step="0.01" /></label>
+            </div>
+          </div>
+
+          <div class="swatches-wrap">
+            <div class="swatches-title">Presets</div>
+            <div class="swatches" data-role="presets" part="swatches"></div>
+            <div class="swatches-title" data-role="recent-title" part="recent">Recent</div>
+            <div class="swatches" data-role="recent" part="recent"></div>
+          </div>
+
+          <div class="error" data-role="error" part="error" hidden></div>
+
+          <div class="actions">
+            <button type="button" class="btn" data-action="clear" part="clear">Clear</button>
+            <button type="button" class="btn" data-tone="primary" data-action="apply" part="apply">Done</button>
+          </div>
+        </footer>
+
+        <div class="live" data-role="live" aria-live="polite"></div>
+      </section>
+    `;
+  }
+  _renderOverlayTemplate() {
+    if (!this._overlay || !this._overlayRoot)
+      return;
+    this._syncOverlayHostAttributes();
+    const t = this._isMobileSheet(), e = t ? "sheet" : "popover";
+    this._overlay.dataset.mode !== e && (this._overlay.dataset.mode = e, this._overlayRoot.innerHTML = `
+      <style>${q}${nt}</style>
+      <section class="overlay">
+        ${t ? '<div class="sheet-backdrop" data-action="close-popover"></div>' : ""}
+        <div class="${t ? "sheet-shell" : "popover-shell"}">
+          ${this._panelMarkup("overlay")}
+        </div>
+      </section>
+    `, t && !this._isSheetOpen && (this._isSheetOpen = !0, this._releaseScrollLock = K()), !t && this._isSheetOpen && (this._isSheetOpen = !1, this._releaseScrollLock && (this._releaseScrollLock(), this._releaseScrollLock = null)));
+  }
+  _isPopoverMode() {
+    return (this.getAttribute("mode") || "inline") === "popover";
+  }
+  _state() {
+    const t = (this.getAttribute("state") || "idle").trim().toLowerCase();
+    return t === "loading" || t === "error" || t === "success" ? t : "idle";
+  }
+  _tone() {
+    const t = (this.getAttribute("tone") || "brand").trim().toLowerCase();
+    return t === "neutral" || t === "success" || t === "warning" || t === "danger" ? t : "brand";
+  }
+  _closeOnEscape() {
+    return I(this.getAttribute("close-on-escape"), !0);
+  }
+  _syncOverlayHostAttributes() {
+    if (!this._overlay)
+      return;
+    const t = (r) => {
+      const i = this.getAttribute(r);
+      i == null ? this._overlay.removeAttribute(r) : this._overlay.setAttribute(r, i);
+    }, e = (r) => {
+      this.hasAttribute(r) ? this._overlay.setAttribute(r, "") : this._overlay.removeAttribute(r);
+    };
+    t("size"), t("variant"), t("state"), t("tone"), t("close-on-escape"), t("aria-label"), t("aria-labelledby"), t("aria-describedby"), e("disabled"), e("readonly");
+  }
+  _isMobileSheet() {
+    return G(this.getAttribute("mode") || "inline");
+  }
+  _alphaEnabled() {
+    return I(this.getAttribute("alpha"), !1);
+  }
+  _recentEnabled() {
+    return I(this.getAttribute("recent"), !0);
+  }
+  _persistRecent() {
+    return I(this.getAttribute("persist"), !1);
+  }
+  _isDisabled() {
+    return this.hasAttribute("disabled");
+  }
+  _isReadonly() {
+    return this.hasAttribute("readonly");
+  }
+  _isLoading() {
+    return this._state() === "loading";
+  }
+  _maxRecent() {
+    const t = Number(this.getAttribute("max-recent") || 8);
+    return !Number.isFinite(t) || t < 1 ? 8 : Math.max(1, Math.min(24, Math.trunc(t)));
+  }
+  _labelText() {
+    return this.getAttribute("aria-label") || "Color picker";
+  }
+  _placeholder() {
+    return this.getAttribute("placeholder") || "Select color";
+  }
+  _applyFormatAttribute() {
+    const t = (this.getAttribute("format") || "hex").trim().toLowerCase();
+    if (t === "rgb" || t === "hsl" || t === "hex") {
+      this._format = t;
+      return;
+    }
+    this._format = "hex";
+  }
+  _applyValueAttribute(t) {
+    const e = this.getAttribute("value");
+    if (!e) {
+      this._applyRgba(f(z) || this._rgba, !1);
+      return;
+    }
+    const r = f(e);
+    if (!r) {
+      t && this._setInvalid(e, "Unable to parse color value");
+      return;
+    }
+    this._error = "", this._applyRgba(r, !1);
+  }
+  _parsePresetsAttribute() {
+    const t = this.getAttribute("presets");
+    if (!t) {
+      this._presets = ["#2563eb", "#16a34a", "#f59e0b", "#dc2626", "#7c3aed", "#0ea5e9"];
+      return;
+    }
+    try {
+      const e = JSON.parse(t);
+      if (!Array.isArray(e)) {
+        this._presets = [];
+        return;
+      }
+      const r = [];
+      for (const i of e) {
+        if (typeof i != "string")
+          continue;
+        const a = f(i);
+        if (!a)
+          continue;
+        const n = x(this._normalizeByAlpha(a), this._alphaEnabled());
+        r.includes(n) || r.push(n);
+      }
+      this._presets = r;
+    } catch {
+      this._presets = [];
+    }
+  }
+  _loadRecent() {
+    if (!this._recentEnabled()) {
+      this._recentColors = [];
+      return;
+    }
+    if (!(!this._persistRecent() || typeof localStorage > "u"))
+      try {
+        const t = localStorage.getItem($);
+        if (!t)
+          return;
+        const e = JSON.parse(t);
+        if (!Array.isArray(e))
+          return;
+        this._recentColors = e.filter((r) => typeof r == "string").map((r) => f(r)).filter((r) => !!r).map((r) => x(this._normalizeByAlpha(r), this._alphaEnabled())).slice(0, this._maxRecent());
+      } catch {
+        this._recentColors = [];
+      }
+  }
+  _persistRecentColors() {
+    if (!(!this._persistRecent() || typeof localStorage > "u"))
+      try {
+        localStorage.setItem($, JSON.stringify(this._recentColors));
+      } catch {
+      }
+  }
+  _normalizeByAlpha(t) {
+    return this._alphaEnabled() ? h(t) : h({ ...t, a: 1 });
+  }
+  _applyRgba(t, e) {
+    const r = this._normalizeByAlpha(t), i = T(r);
+    e && i.s === 0 && (i.h = this._hsva.h), this._rgba = r, this._hsva = {
+      h: u(i.h, 0, 360),
+      s: u(i.s, 0, 100),
+      v: u(i.v, 0, 100),
+      a: u(i.a, 0, 1)
+    };
+  }
+  _serializeValue(t = this._format) {
+    return t === "rgb" ? S(this._rgba, this._alphaEnabled()) : t === "hsl" ? it(this._rgba, this._alphaEnabled()) : x(this._rgba, this._alphaEnabled());
+  }
+  _currentHex() {
+    return x(this._rgba, this._alphaEnabled());
+  }
+  _eventDetail(t) {
+    return {
+      value: this._serializeValue(),
+      hex: this._currentHex(),
+      rgba: { ...this._rgba },
+      hsla: L(this._rgba),
+      source: t
+    };
+  }
+  _emitInput(t) {
+    this.dispatchEvent(new CustomEvent("input", { detail: this._eventDetail(t), bubbles: !0, composed: !0 }));
+  }
+  _emitChange(t) {
+    this.dispatchEvent(new CustomEvent("change", { detail: this._eventDetail(t), bubbles: !0, composed: !0 })), this._announce(this._serializeValue());
+  }
+  _setInvalid(t, e) {
+    this._error = e, this.dispatchEvent(
+      new CustomEvent("invalid", {
+        detail: { raw: t, reason: e },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this._updateUI(!1);
+  }
+  _announce(t) {
+    this._forEachPanel((e) => {
+      e.live && (e.live.textContent = `Color changed to ${t}`);
+    });
+  }
+  _setOpen(t, e = "api") {
+    if (!this._isPopoverMode() || t && (this._isDisabled() || this._isLoading()) || this._open === t)
+      return;
+    const r = this._open;
+    this._open = t, this._syncOpenAttribute(t);
+    const i = { open: t, previousOpen: r, source: e };
+    if (t ? (this._restoreFocusEl = typeof document < "u" ? document.activeElement : null, this.dispatchEvent(new CustomEvent("open", { detail: i, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("ui-open", { detail: i, bubbles: !0, composed: !0 }))) : (this.dispatchEvent(new CustomEvent("close", { detail: i, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("ui-close", { detail: i, bubbles: !0, composed: !0 }))), this.requestRender(), !t && this._restoreFocusEl && this._restoreFocusEl.isConnected) {
+      try {
+        this._restoreFocusEl.focus();
+      } catch {
+      }
+      this._restoreFocusEl = null;
+    }
+    t && queueMicrotask(() => this._focusFirstOpenControl());
+  }
+  _focusFirstOpenControl() {
+    if (!this._open)
+      return;
+    const t = this._getCurrentPanel(), e = t == null ? void 0 : t.querySelector('[data-cp="sv"]');
+    if (e)
+      try {
+        e.focus();
+      } catch {
+      }
+  }
+  _syncValueAttribute() {
+    const t = this._serializeValue();
+    this._syncing = !0;
+    try {
+      this.getAttribute("value") !== t && this.setAttribute("value", t);
+    } finally {
+      this._syncing = !1;
+    }
+  }
+  _syncOpenAttribute(t) {
+    this._syncing = !0;
+    try {
+      t ? this.hasAttribute("open") || this.setAttribute("open", "") : this.hasAttribute("open") && this.removeAttribute("open");
+    } finally {
+      this._syncing = !1;
+    }
+  }
+  _ensureOverlay() {
+    if (this._overlay || typeof document > "u")
+      return;
+    const t = document.createElement("div");
+    t.style.position = "fixed", t.style.inset = "0", t.style.zIndex = "var(--ui-cp-z, 1600)", t.style.pointerEvents = "auto";
+    const e = t.attachShadow({ mode: "open" });
+    t.addEventListener("click", (r) => this._onPanelClick(r, "overlay")), t.addEventListener("input", (r) => this._onPanelInput(r, "overlay")), t.addEventListener("change", (r) => this._onPanelChange(r, "overlay")), t.addEventListener("keydown", (r) => this._onPanelKeyDown(r, "overlay")), t.addEventListener("pointerdown", (r) => this._onPanelPointerDown(r, "overlay")), t.addEventListener("pointermove", (r) => this._onPanelPointerMove(r)), t.addEventListener("pointerup", (r) => this._onPanelPointerUp(r)), t.addEventListener("pointercancel", (r) => this._onPanelPointerCancel(r)), document.body.appendChild(t), this._overlay = t, this._overlayRoot = e, this._syncOverlayHostAttributes(), document.addEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.addEventListener("keydown", this._onDocumentKeyDownBound), window.addEventListener("resize", this._onWindowResizeBound), window.addEventListener("scroll", this._onWindowScrollBound, !0);
+  }
+  _destroyOverlay() {
+    this._scheduleOverlayPosition.cancel(), typeof document < "u" && (document.removeEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.removeEventListener("keydown", this._onDocumentKeyDownBound)), typeof window < "u" && (window.removeEventListener("resize", this._onWindowResizeBound), window.removeEventListener("scroll", this._onWindowScrollBound, !0)), this._overlay && this._overlay.parentElement && this._overlay.parentElement.removeChild(this._overlay), this._overlay = null, this._overlayRoot = null, this._panelCache = /* @__PURE__ */ new WeakMap(), this._isSheetOpen && (this._isSheetOpen = !1, this._releaseScrollLock && (this._releaseScrollLock(), this._releaseScrollLock = null));
+  }
+  _positionOverlay() {
+    if (!this._overlayRoot || !this._open || this._isMobileSheet())
+      return;
+    const t = this.root.querySelector(".trigger"), e = this._overlayRoot.querySelector(".popover-shell");
+    if (!t || !e)
+      return;
+    const r = e.querySelector(".panel");
+    if (!r)
+      return;
+    const i = X(t.getBoundingClientRect(), r.getBoundingClientRect(), 8, 8);
+    e.style.top = `${Math.round(i.top)}px`, e.style.left = `${Math.round(i.left)}px`;
+  }
+  _onDocumentPointerDown(t) {
+    var i;
+    if (!this._overlay || !this._open)
+      return;
+    const e = typeof t.composedPath == "function" ? t.composedPath() : [];
+    if (e.includes(this))
+      return;
+    const r = (i = this._overlayRoot) == null ? void 0 : i.querySelector('[data-cp-panel="overlay"]');
+    r && e.includes(r) || this._setOpen(!1, "outside");
+  }
+  _onDocumentKeyDown(t) {
+    if (!(!this._open || !this._isPopoverMode())) {
+      if (t.key === "Tab") {
+        this._trapOverlayFocus(t);
+        return;
+      }
+      t.key !== "Escape" || !this._closeOnEscape() || (t.preventDefault(), this._setOpen(!1, "escape"));
+    }
+  }
+  _focusableInPanel(t) {
+    const e = t.querySelectorAll(
+      'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]'
+    );
+    return Array.from(e).filter((r) => r.hasAttribute("disabled") || r.getAttribute("aria-hidden") === "true" || r.tabIndex < 0 ? !1 : r.getClientRects().length > 0);
+  }
+  _trapOverlayFocus(t) {
+    var o;
+    const e = (o = this._overlayRoot) == null ? void 0 : o.querySelector('[data-cp-panel="overlay"]');
+    if (!e)
+      return;
+    const r = this._focusableInPanel(e);
+    if (!r.length) {
+      t.preventDefault(), e.focus();
+      return;
+    }
+    const i = e.getRootNode(), a = i instanceof ShadowRoot ? i.activeElement : e.ownerDocument.activeElement, n = a ? r.indexOf(a) : -1;
+    if (t.shiftKey) {
+      n <= 0 && (t.preventDefault(), r[r.length - 1].focus());
+      return;
+    }
+    (n === -1 || n === r.length - 1) && (t.preventDefault(), r[0].focus());
+  }
+  _forEachPanel(t) {
+    var i;
+    const e = this.root.querySelector('[data-cp-panel="inline"]');
+    e && t(this._panelRefs(e));
+    const r = (i = this._overlayRoot) == null ? void 0 : i.querySelector('[data-cp-panel="overlay"]');
+    r && t(this._panelRefs(r));
+  }
+  _panelRefs(t) {
+    const e = this._panelCache.get(t);
+    if (e)
+      return e;
+    const r = {
+      panel: t,
+      label: t.querySelector('[data-role="label"]'),
+      valueText: t.querySelector('[data-role="value"]'),
+      preview: t.querySelector('[data-role="preview"]'),
+      status: t.querySelector('[data-role="status"]'),
+      sv: t.querySelector('[data-cp="sv"]'),
+      svThumb: t.querySelector('[data-role="sv-thumb"]'),
+      hue: t.querySelector('[data-cp="hue"]'),
+      hueThumb: t.querySelector('[data-role="hue-thumb"]'),
+      alphaRow: t.querySelector('[data-role="alpha-row"]'),
+      alpha: t.querySelector('[data-cp="alpha"]'),
+      alphaThumb: t.querySelector('[data-role="alpha-thumb"]'),
+      tabHex: t.querySelector('[data-format="hex"]'),
+      tabRgb: t.querySelector('[data-format="rgb"]'),
+      tabHsl: t.querySelector('[data-format="hsl"]'),
+      groupHex: t.querySelector('[data-format-group="hex"]'),
+      groupRgb: t.querySelector('[data-format-group="rgb"]'),
+      groupHsl: t.querySelector('[data-format-group="hsl"]'),
+      inputHex: t.querySelector('[data-input="hex"]'),
+      inputR: t.querySelector('[data-input="r"]'),
+      inputG: t.querySelector('[data-input="g"]'),
+      inputB: t.querySelector('[data-input="b"]'),
+      inputA1: t.querySelector('[data-input="a1"]'),
+      inputH: t.querySelector('[data-input="h"]'),
+      inputS: t.querySelector('[data-input="s"]'),
+      inputL: t.querySelector('[data-input="l"]'),
+      inputA2: t.querySelector('[data-input="a2"]'),
+      copyHex: t.querySelector('[data-action="copy-hex"]'),
+      copyRgb: t.querySelector('[data-action="copy-rgb"]'),
+      eyedropper: t.querySelector('[data-action="eyedropper"]'),
+      clear: t.querySelector('[data-action="clear"]'),
+      apply: t.querySelector('[data-action="apply"]'),
+      presets: t.querySelector('[data-role="presets"]'),
+      recent: t.querySelector('[data-role="recent"]'),
+      recentTitle: t.querySelector('[data-role="recent-title"]'),
+      error: t.querySelector('[data-role="error"]'),
+      live: t.querySelector('[data-role="live"]')
+    };
+    return this._panelCache.set(t, r), r;
+  }
+  _getCurrentPanel() {
+    return this._isPopoverMode() && this._open && this._overlayRoot ? this._overlayRoot.querySelector('[data-cp-panel="overlay"]') : this.root.querySelector('[data-cp-panel="inline"]');
+  }
+  _updateUI(t, e = !1) {
+    const r = this.root.querySelector('[data-role="trigger-wrap"]'), i = this.root.querySelector(".trigger"), a = this.root.querySelector('[data-role="trigger-value"]'), n = this.root.querySelector('[data-role="trigger-preview"]'), o = this.root.querySelector('[data-role="inline-panel"]'), l = this._isPopoverMode(), c = this._state(), b = this._tone(), v = c === "loading", d = this._isDisabled(), _ = this._isReadonly(), E = this._serializeValue() || this._placeholder();
+    r && (r.hidden = !l), i && (i.disabled = d || v, i.dataset.state = c, i.dataset.tone = b, i.setAttribute("aria-expanded", l && this._open ? "true" : "false"), this._applyAria(i)), a && (a.textContent = E), n && (n.style.background = S(this._rgba, !0)), o && (o.hidden = l), this._forEachPanel((p) => this._updatePanel(p, { skipSwatches: t, disabled: d, readonly: _, loading: v, state: c, tone: b, modePopover: l, liveOnly: e }));
+  }
+  _updatePanel(t, e) {
+    const r = this._rgba, i = L(r), a = this._hsva, n = `hsl(${Math.round(a.h)} 100% 50%)`, o = t.panel.getAttribute("data-cp-panel") === "overlay", l = !!this._error || e.state === "error", c = e.disabled || e.readonly || e.loading;
+    if (this._applyAria(t.panel), t.panel.dataset.state = l ? "error" : e.state, t.panel.dataset.tone = e.tone, t.panel.setAttribute("aria-busy", e.loading ? "true" : "false"), o && e.modePopover ? (t.panel.setAttribute("role", "dialog"), t.panel.setAttribute("aria-modal", "true"), t.panel.tabIndex = -1) : (t.panel.removeAttribute("role"), t.panel.removeAttribute("aria-modal"), t.panel.removeAttribute("tabindex")), t.label && (t.label.textContent = this._labelText()), t.valueText && (t.valueText.textContent = this._serializeValue()), t.preview && (t.preview.style.background = S(r, !0)), t.status) {
+      let p = "";
+      l ? p = "Error" : e.state === "loading" ? p = "Syncing" : e.state === "success" && (p = "Saved"), t.status.hidden = !p, t.status.textContent = p, t.status.dataset.tone = e.tone;
+    }
+    if (t.sv && (t.sv.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${n})`, t.sv.setAttribute("aria-valuetext", `Saturation ${Math.round(a.s)}%, Value ${Math.round(a.v)}%`), t.sv.setAttribute("aria-disabled", c ? "true" : "false"), t.sv.tabIndex = c ? -1 : 0), t.svThumb) {
+      const p = u(a.s, 1, 99), k = u(100 - a.v, 1, 99);
+      t.svThumb.style.left = `${p}%`, t.svThumb.style.top = `${k}%`;
+    }
+    t.hue && (t.hue.setAttribute("aria-valuemin", "0"), t.hue.setAttribute("aria-valuemax", "360"), t.hue.setAttribute("aria-valuenow", String(Math.round(a.h))), t.hue.setAttribute("aria-disabled", c ? "true" : "false"), t.hue.tabIndex = c ? -1 : 0), t.hueThumb && (t.hueThumb.style.left = `${u(a.h / 360 * 100, 1, 99)}%`), t.alphaRow && (t.alphaRow.hidden = !this._alphaEnabled()), t.alpha && (t.alpha.setAttribute("aria-valuemin", "0"), t.alpha.setAttribute("aria-valuemax", "100"), t.alpha.setAttribute("aria-valuenow", String(Math.round(a.a * 100))), t.alpha.setAttribute("aria-disabled", c || !this._alphaEnabled() ? "true" : "false"), t.alpha.tabIndex = c ? -1 : 0, t.alpha.style.backgroundImage = `
+        linear-gradient(45deg, var(--ui-cp-checker-a) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--ui-cp-checker-a) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--ui-cp-checker-a) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--ui-cp-checker-a) 75%),
+        linear-gradient(to right, rgba(${r.r}, ${r.g}, ${r.b}, 0), rgba(${r.r}, ${r.g}, ${r.b}, 1))
+      `), t.alphaThumb && (t.alphaThumb.style.left = `${u(a.a * 100, 1, 99)}%`);
+    const b = t.panel.getRootNode(), v = b instanceof ShadowRoot ? b.activeElement : t.panel.ownerDocument.activeElement, d = v && t.panel.contains(v) ? v.getAttribute("data-input") : null;
+    if (t.inputHex && d !== "hex" && (t.inputHex.value = x(r, this._alphaEnabled())), t.inputR && d !== "r" && (t.inputR.value = String(r.r)), t.inputG && d !== "g" && (t.inputG.value = String(r.g)), t.inputB && d !== "b" && (t.inputB.value = String(r.b)), t.inputA1 && d !== "a1" && (t.inputA1.value = this._alphaEnabled() ? String(Number(r.a.toFixed(3))) : "1"), t.inputH && d !== "h" && (t.inputH.value = String(Math.round(i.h))), t.inputS && d !== "s" && (t.inputS.value = String(Math.round(i.s))), t.inputL && d !== "l" && (t.inputL.value = String(Math.round(i.l))), t.inputA2 && d !== "a2" && (t.inputA2.value = this._alphaEnabled() ? String(Number(r.a.toFixed(3))) : "1"), e.liveOnly)
+      return;
+    if (t.tabHex && (t.tabHex.dataset.active = String(this._format === "hex")), t.tabRgb && (t.tabRgb.dataset.active = String(this._format === "rgb")), t.tabHsl && (t.tabHsl.dataset.active = String(this._format === "hsl")), t.groupHex && (t.groupHex.hidden = this._format !== "hex"), t.groupRgb && (t.groupRgb.hidden = this._format !== "rgb"), t.groupHsl && (t.groupHsl.hidden = this._format !== "hsl"), t.inputA1 && (t.inputA1.disabled = !this._alphaEnabled() || c), t.inputA2 && (t.inputA2.disabled = !this._alphaEnabled() || c), t.error) {
+      const p = this._error || (e.state === "error" ? "Unable to validate current color value." : "");
+      t.error.hidden = !p, t.error.textContent = p;
+    }
+    const _ = c;
+    if (t.copyHex && (t.copyHex.disabled = e.disabled || e.loading), t.copyRgb && (t.copyRgb.disabled = e.disabled || e.loading), t.eyedropper) {
+      const p = typeof window < "u" && typeof window.EyeDropper == "function";
+      t.eyedropper.hidden = !p, t.eyedropper.disabled = _ || !p;
+    }
+    if (t.clear && (t.clear.disabled = _), t.apply && (t.apply.hidden = !e.modePopover, t.apply.disabled = _), t.panel.querySelectorAll(".input").forEach((p) => {
+      const k = p;
+      k.disabled = _;
+    }), !e.skipSwatches && !this._renderingSwatches) {
+      this._renderingSwatches = !0;
+      try {
+        this._renderSwatches(t);
+      } finally {
+        this._renderingSwatches = !1;
+      }
+    }
+  }
+  _renderSwatches(t) {
+    const e = this._currentHex().toLowerCase();
+    t.presets && (t.presets.innerHTML = this._presets.map((r) => {
+      const i = f(r);
+      if (!i)
+        return "";
+      const a = x(this._normalizeByAlpha(i), this._alphaEnabled()), n = a.toLowerCase() === e ? ' data-selected="true"' : "";
+      return `<button type="button" class="swatch" part="swatch" data-action="preset" data-color="${A(a)}"${n} title="${A(a)}" style="background:${A(S(i, !0))}"></button>`;
+    }).join("")), t.recentTitle && (t.recentTitle.hidden = !this._recentEnabled() || this._recentColors.length === 0), t.recent && (t.recent.hidden = !this._recentEnabled() || this._recentColors.length === 0, t.recent.innerHTML = this._recentColors.map((r) => {
+      const i = f(r);
+      if (!i)
+        return "";
+      const a = x(this._normalizeByAlpha(i), this._alphaEnabled()), n = a.toLowerCase() === e ? ' data-selected="true"' : "";
+      return `<button type="button" class="swatch" part="swatch recent" data-action="recent" data-color="${A(a)}"${n} title="${A(a)}" style="background:${A(S(i, !0))}"></button>`;
+    }).join(""));
+  }
+  _onPanelClick(t, e) {
+    const r = this._eventHTMLElement(t);
+    if (!r)
+      return;
+    const i = r.closest("[data-action]");
+    if (!i || this._isDisabled())
+      return;
+    const a = i.getAttribute("data-action");
+    if (a === "close-popover") {
+      this._setOpen(!1, "outside");
+      return;
+    }
+    if (a === "toggle-popover") {
+      if (!this._isPopoverMode())
+        return;
+      this._setOpen(!this._open, "toggle");
+      return;
+    }
+    if (!this._isLoading()) {
+      if (a === "format") {
+        const n = i.getAttribute("data-format");
+        if (!n)
+          return;
+        this.setAttribute("format", n), this._error = "", this._updateUI(!1);
+        return;
+      }
+      if (a === "copy-hex") {
+        this._copyToClipboard(this._currentHex());
+        return;
+      }
+      if (a === "copy-rgb") {
+        this._copyToClipboard(S(this._rgba, this._alphaEnabled()));
+        return;
+      }
+      if (a === "eyedropper") {
+        this._openEyeDropper();
+        return;
+      }
+      if (a === "clear") {
+        if (this._isReadonly())
+          return;
+        const n = f(z);
+        n && (this._applyRgba(n, !1), this._error = "", this._syncValueAttribute(), this._emitInput("text"), this._emitChange("text"), this._pushRecent(this._currentHex()), this._updateUI(!1));
+        return;
+      }
+      if (a === "apply") {
+        this._setOpen(!1, "apply");
+        return;
+      }
+      if (a === "preset" || a === "recent") {
+        if (this._isReadonly())
+          return;
+        const n = i.getAttribute("data-color") || "", o = f(n);
+        if (!o)
+          return;
+        const l = a === "preset" ? "preset" : "recent";
+        this._applyRgba(o, !0), this._error = "", this._syncValueAttribute(), this._emitInput(l), this._emitChange(l), this._pushRecent(this._currentHex()), this._updateUI(!1);
+        return;
+      }
+    }
+  }
+  _onPanelInput(t, e) {
+    const r = this._eventHTMLElement(t);
+    if (!(r instanceof HTMLInputElement) || !r.hasAttribute("data-input") || (t.stopPropagation(), this._isDisabled() || this._isReadonly() || this._isLoading()))
+      return;
+    const i = this._parseInputsFromPanel(r.closest("[data-cp-panel]"));
+    if (!i) {
+      this._error = "";
+      return;
+    }
+    this._error = "", this._applyRgba(i, !0), this._emitInput("text"), this._updateUI(!0, !0);
+  }
+  _onPanelChange(t, e) {
+    const r = this._eventHTMLElement(t);
+    if (!(r instanceof HTMLInputElement) || !r.hasAttribute("data-input") || (t.stopPropagation(), this._isDisabled() || this._isReadonly() || this._isLoading()))
+      return;
+    const i = r.closest("[data-cp-panel]"), a = this._parseInputsFromPanel(i);
+    if (!a) {
+      const n = r.value || "";
+      this._setInvalid(n, "Invalid input values");
+      return;
+    }
+    this._error = "", this._applyRgba(a, !0), this._syncValueAttribute(), this._emitInput("text"), this._emitChange("text"), this._pushRecent(this._currentHex()), this._updateUI(!1);
+  }
+  _onPanelKeyDown(t, e) {
+    const r = this._eventHTMLElement(t);
+    if (!r || this._isDisabled() || this._isLoading())
+      return;
+    if (r instanceof HTMLInputElement && r.hasAttribute("data-input") && t.key === "Enter") {
+      t.preventDefault();
+      const l = this._parseInputsFromPanel(r.closest("[data-cp-panel]"));
+      if (!l) {
+        this._setInvalid(r.value || "", "Invalid input values");
+        return;
+      }
+      this._error = "", this._applyRgba(l, !0), this._syncValueAttribute(), this._emitInput("text"), this._emitChange("text"), this._pushRecent(this._currentHex()), this._updateUI(!1);
+      return;
+    }
+    const i = r.getAttribute("data-cp");
+    if (!i || this._isReadonly() || this._isLoading())
+      return;
+    const a = t.shiftKey ? 5 : 1;
+    let n = !1;
+    const o = { ...this._hsva };
+    if (i === "sv") {
+      t.key === "ArrowLeft" ? (o.s = u(o.s - a, 0, 100), n = !0) : t.key === "ArrowRight" ? (o.s = u(o.s + a, 0, 100), n = !0) : t.key === "ArrowUp" ? (o.v = u(o.v + a, 0, 100), n = !0) : t.key === "ArrowDown" ? (o.v = u(o.v - a, 0, 100), n = !0) : t.key === "Home" ? (o.s = 0, o.v = 100, n = !0) : t.key === "End" && (o.s = 100, o.v = 0, n = !0), n && (t.preventDefault(), this._commitHsva(o, "drag"));
+      return;
+    }
+    if (i === "hue") {
+      t.key === "ArrowLeft" || t.key === "ArrowDown" ? (o.h = u(o.h - a, 0, 360), n = !0) : t.key === "ArrowRight" || t.key === "ArrowUp" ? (o.h = u(o.h + a, 0, 360), n = !0) : t.key === "Home" ? (o.h = 0, n = !0) : t.key === "End" && (o.h = 360, n = !0), n && (t.preventDefault(), this._commitHsva(o, "slider"));
+      return;
+    }
+    if (i === "alpha" && this._alphaEnabled()) {
+      const l = t.shiftKey ? 0.1 : 0.01;
+      t.key === "ArrowLeft" || t.key === "ArrowDown" ? (o.a = u(o.a - l, 0, 1), n = !0) : t.key === "ArrowRight" || t.key === "ArrowUp" ? (o.a = u(o.a + l, 0, 1), n = !0) : t.key === "Home" ? (o.a = 0, n = !0) : t.key === "End" && (o.a = 1, n = !0), n && (t.preventDefault(), this._commitHsva(o, "slider"));
+    }
+  }
+  _commitHsva(t, e) {
+    this._setHsva(t), this._syncValueAttribute(), this._emitInput(e), this._emitChange(e), this._pushRecent(this._currentHex()), this._updateUI(!1);
+  }
+  _parseInputsFromPanel(t) {
+    var l, c, b, v, d, _, E, p, k;
+    if (!t)
+      return null;
+    const e = this._panelRefs(t);
+    if (this._format === "hex") {
+      const y = ((l = e.inputHex) == null ? void 0 : l.value) || "", C = y.trim().startsWith("#") ? y.trim() : `#${y.trim()}`, R = f(C);
+      return R ? this._normalizeByAlpha(R) : null;
+    }
+    if (this._format === "rgb") {
+      const y = Number(((c = e.inputR) == null ? void 0 : c.value) ?? ""), C = Number(((b = e.inputG) == null ? void 0 : b.value) ?? ""), R = Number(((v = e.inputB) == null ? void 0 : v.value) ?? ""), D = this._alphaEnabled() ? Number(((d = e.inputA1) == null ? void 0 : d.value) ?? "") : 1;
+      return [y, C, R, D].every((N) => Number.isFinite(N)) ? this._normalizeByAlpha({ r: y, g: C, b: R, a: D }) : null;
+    }
+    const r = Number(((_ = e.inputH) == null ? void 0 : _.value) ?? ""), i = Number(((E = e.inputS) == null ? void 0 : E.value) ?? ""), a = Number(((p = e.inputL) == null ? void 0 : p.value) ?? ""), n = this._alphaEnabled() ? Number(((k = e.inputA2) == null ? void 0 : k.value) ?? "") : 1;
+    if (![r, i, a, n].every((y) => Number.isFinite(y)))
+      return null;
+    const o = {
+      h: u(r, 0, 360),
+      s: u(i, 0, 100),
+      l: u(a, 0, 100),
+      a: u(n, 0, 1)
+    };
+    return this._normalizeByAlpha(U(o));
+  }
+  _onPanelPointerDown(t, e) {
+    var n;
+    if (this._isDisabled() || this._isReadonly() || this._isLoading())
+      return;
+    const r = this._eventHTMLElement(t);
+    if (!r)
+      return;
+    const i = (n = r.closest("[data-cp]")) == null ? void 0 : n.getAttribute("data-cp");
+    if (!i || i === "alpha" && !this._alphaEnabled())
+      return;
+    const a = r.closest(`[data-cp="${i}"]`);
+    if (a) {
+      t.preventDefault(), this._dragTarget = i, this._dragPointerId = t.pointerId, this._dragRect = a.getBoundingClientRect(), this._dragX = t.clientX, this._dragY = t.clientY, this._dragChanged = !1, this._dragSource = i === "sv" ? "drag" : "slider";
+      try {
+        a.setPointerCapture(t.pointerId);
+      } catch {
+      }
+      this._applyDragPointer(!0);
+    }
+  }
+  _onPanelPointerMove(t) {
+    !this._dragTarget || t.pointerId !== this._dragPointerId || (this._dragX = t.clientX, this._dragY = t.clientY, !this._dragRaf && (this._dragRaf = requestAnimationFrame(() => {
+      this._dragRaf = 0, this._applyDragPointer(!0);
+    })));
+  }
+  _onPanelPointerUp(t) {
+    !this._dragTarget || t.pointerId !== this._dragPointerId || (this._dragX = t.clientX, this._dragY = t.clientY, this._applyDragPointer(!0), this._stopDrag(!0));
+  }
+  _onPanelPointerCancel(t) {
+    !this._dragTarget || t.pointerId !== this._dragPointerId || this._stopDrag(!1);
+  }
+  _cancelDragFrame() {
+    this._dragRaf && (cancelAnimationFrame(this._dragRaf), this._dragRaf = 0);
+  }
+  _applyDragPointer(t) {
+    if (!this._dragTarget || !this._dragRect)
+      return;
+    const e = this._dragRect, r = u(this._dragX - e.left, 0, e.width || 1), i = u(this._dragY - e.top, 0, e.height || 1), a = { ...this._hsva };
+    this._dragTarget === "sv" ? (a.s = u(r / Math.max(e.width, 1) * 100, 0, 100), a.v = u(100 - i / Math.max(e.height, 1) * 100, 0, 100)) : this._dragTarget === "hue" ? a.h = u(r / Math.max(e.width, 1) * 360, 0, 360) : this._dragTarget === "alpha" && (a.a = u(r / Math.max(e.width, 1), 0, 1)), this._setHsva(a) && (this._dragChanged = !0, t && this._emitInput(this._dragSource), this._updateUI(!0, !0));
+  }
+  _setHsva(t) {
+    const e = {
+      h: u(t.h, 0, 360),
+      s: u(t.s, 0, 100),
+      v: u(t.v, 0, 100),
+      a: this._alphaEnabled() ? u(t.a, 0, 1) : 1
+    }, r = this._hsva;
+    return M(r.h, e.h) && M(r.s, e.s) && M(r.v, e.v) && M(r.a, e.a) ? !1 : (this._hsva = e, this._rgba = this._normalizeByAlpha(rt(this._hsva)), this._error = "", !0);
+  }
+  _stopDrag(t) {
+    this._cancelDragFrame();
+    const e = t && this._dragChanged;
+    this._dragTarget = null, this._dragPointerId = -1, this._dragRect = null, this._dragChanged = !1, e && (this._syncValueAttribute(), this._emitChange(this._dragSource), this._pushRecent(this._currentHex()), this._updateUI(!1));
+  }
+  _pushRecent(t) {
+    if (!this._recentEnabled())
+      return;
+    const e = (t || "").trim().toUpperCase();
+    e && (this._recentColors = [e, ...this._recentColors.filter((r) => r.toUpperCase() !== e)].slice(
+      0,
+      this._maxRecent()
+    ), this._persistRecentColors());
+  }
+  async _openEyeDropper() {
+    if (this._isDisabled() || this._isReadonly() || this._isLoading() || typeof window > "u")
+      return;
+    const t = window.EyeDropper;
+    if (typeof t == "function")
+      try {
+        const r = await new t().open(), i = f((r == null ? void 0 : r.sRGBHex) || "");
+        if (!i)
+          return;
+        this._applyRgba(i, !0), this._error = "", this._syncValueAttribute(), this._emitInput("eyedropper"), this._emitChange("eyedropper"), this._pushRecent(this._currentHex()), this._updateUI(!1);
+      } catch {
+      }
+  }
+  async _copyToClipboard(t) {
+    var a;
+    if (!t || this._isDisabled())
+      return;
+    let e = !1;
+    if (typeof navigator < "u" && ((a = navigator.clipboard) != null && a.writeText))
+      try {
+        await navigator.clipboard.writeText(t), e = !0;
+      } catch {
+        e = !1;
+      }
+    if (!e && typeof document < "u") {
+      const n = document.createElement("textarea");
+      n.value = t, n.setAttribute("readonly", ""), n.style.position = "fixed", n.style.opacity = "0", document.body.appendChild(n), n.select();
+      try {
+        e = document.execCommand("copy");
+      } catch {
+        e = !1;
+      } finally {
+        n.parentElement && n.parentElement.removeChild(n);
+      }
+    }
+    const r = e ? `Copied ${t}` : `Unable to copy ${t}`, i = typeof window < "u" ? window.showToast : null;
+    if (typeof i == "function")
+      try {
+        i(r);
+      } catch {
+        this.dispatchEvent(new CustomEvent("toast", { detail: { message: r }, bubbles: !0, composed: !0 }));
+      }
+    else
+      this.dispatchEvent(new CustomEvent("toast", { detail: { message: r }, bubbles: !0, composed: !0 }));
+  }
+  _applyAria(t) {
+    const e = this.getAttribute("aria-labelledby"), r = this.getAttribute("aria-describedby"), i = this.getAttribute("aria-label");
+    e ? t.setAttribute("aria-labelledby", e) : t.removeAttribute("aria-labelledby"), r ? t.setAttribute("aria-describedby", r) : t.removeAttribute("aria-describedby"), i ? t.setAttribute("aria-label", i) : e || t.setAttribute("aria-label", "Color picker");
+  }
+}
+customElements.get("ui-color-picker") || customElements.define("ui-color-picker", st);
+export {
+  st as UIColorPicker
+};