@editora/ui-core 0.1.8 → 0.1.10

package/dist/color-picker.cjs.js

@@ -0,0 +1,803 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const W=require("./ElementBase-1b301e7f.js"),x=require("./date-time-utils-5cf58cd0.js");require("./calendar-a8735e40.js");require("./scroll-lock-48793569.js");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 C(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)?C(g(r,0,100)/100*255):null}const e=Number(t);return Number.isFinite(e)?C(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 K(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)?k(r):null}if(t.endsWith("turn")){const r=Number(t.slice(0,-4));return Number.isFinite(r)?k(r*360):null}if(t.endsWith("rad")){const r=Number(t.slice(0,-3));return Number.isFinite(r)?k(r*180/Math.PI):null}const e=Number(t);return Number.isFinite(e)?k(e):null}function k(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 G(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),u=t.length===4?parseInt(t[3]+t[3],16)/255:1;return h({r:n,g:o,b:l,a:u})}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 X(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 Y(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=K(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:C(s.r),g:C(s.g),b:C(s.b),a:m(g(s.a,0,1),4)}}function f(s){const t=(s||"").trim();return t?t.startsWith("#")?G(t):/^rgba?\(/i.test(t)?X(t):/^hsla?\(/i.test(t)?Y(t):null:null}function j(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 J(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 Q(s,t=!0){const e=Math.round(k(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 u=a===0?0:o/a*100,b=a*100;return{h:m(l,3),s:m(u,3),v:m(b,3),a:t.a}}function Z(s){const t=k(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,u=0;return t<60?(o=i,l=a):t<120?(o=a,l=i):t<180?(l=i,u=a):t<240?(l=a,u=i):t<300?(o=a,u=i):(o=i,u=a),h({r:(o+n)*255,g:(l+n)*255,b:(u+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 u=0,b=0;return o!==0&&(b=o/(1-Math.abs(2*l-1)),a===e?u=(r-i)/o%6:a===r?u=(i-e)/o+2:u=(e-r)/o+4,u*=60,u<0&&(u+=360)),{h:m(u,3),s:m(b*100,3),l:m(l*100,3),a:t.a}}function U(s){const t=k(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,u=0;return t<60?(o=i,l=a):t<120?(o=a,l=i):t<180?(l=i,u=a):t<240?(l=a,u=i):t<300?(o=a,u=i):(o=i,u=a),h({r:(o+n)*255,g:(l+n)*255,b:(u+n)*255,a:s.a})}function w(s,t){return j(s,t).toUpperCase()}function A(s,t){return J(s,t)}function tt(s,t){return Q(L(s),t)}const z="#2563eb",q="editora:ui-color-picker:recent",et=`
+  <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>
+`,$=`
+  :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;
+    }
+  }
+`,rt=`
+  .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 c(s,t,e){return Math.max(t,Math.min(e,s))}function M(s,t){return Math.abs(s-t)<=5e-4}function E(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class N extends W.ElementBase{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=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=x.rafThrottle(()=>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:w(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>${$}</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">${et}</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>${$}${rt}</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=x.lockBodyScroll()),!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 x.isTruthyAttr(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 x.shouldUseMobileSheet(this.getAttribute("mode")||"inline")}_alphaEnabled(){return x.isTruthyAttr(this.getAttribute("alpha"),!1)}_recentEnabled(){return x.isTruthyAttr(this.getAttribute("recent"),!0)}_persistRecent(){return x.isTruthyAttr(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=w(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(q);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=>w(this._normalizeByAlpha(r),this._alphaEnabled())).slice(0,this._maxRecent())}catch{this._recentColors=[]}}_persistRecentColors(){if(!(!this._persistRecent()||typeof localStorage>"u"))try{localStorage.setItem(q,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:c(i.h,0,360),s:c(i.s,0,100),v:c(i.v,0,100),a:c(i.a,0,1)}}_serializeValue(t=this._format){return t==="rgb"?A(this._rgba,this._alphaEnabled()):t==="hsl"?tt(this._rgba,this._alphaEnabled()):w(this._rgba,this._alphaEnabled())}_currentHex(){return w(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=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.computePopoverPosition(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(),u=this._state(),b=this._tone(),v=u==="loading",d=this._isDisabled(),_=this._isReadonly(),R=this._serializeValue()||this._placeholder();r&&(r.hidden=!l),i&&(i.disabled=d||v,i.dataset.state=u,i.dataset.tone=b,i.setAttribute("aria-expanded",l&&this._open?"true":"false"),this._applyAria(i)),a&&(a.textContent=R),n&&(n.style.background=A(this._rgba,!0)),o&&(o.hidden=l),this._forEachPanel(p=>this._updatePanel(p,{skipSwatches:t,disabled:d,readonly:_,loading:v,state:u,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",u=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=A(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",u?"true":"false"),t.sv.tabIndex=u?-1:0),t.svThumb){const p=c(a.s,1,99),S=c(100-a.v,1,99);t.svThumb.style.left=`${p}%`,t.svThumb.style.top=`${S}%`}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",u?"true":"false"),t.hue.tabIndex=u?-1:0),t.hueThumb&&(t.hueThumb.style.left=`${c(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",u||!this._alphaEnabled()?"true":"false"),t.alpha.tabIndex=u?-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=`${c(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=w(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()||u),t.inputA2&&(t.inputA2.disabled=!this._alphaEnabled()||u),t.error){const p=this._error||(e.state==="error"?"Unable to validate current color value.":"");t.error.hidden=!p,t.error.textContent=p}const _=u;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 S=p;S.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=w(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="${E(a)}"${n} title="${E(a)}" style="background:${E(A(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=w(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="${E(a)}"${n} title="${E(a)}" style="background:${E(A(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(A(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=c(o.s-a,0,100),n=!0):t.key==="ArrowRight"?(o.s=c(o.s+a,0,100),n=!0):t.key==="ArrowUp"?(o.v=c(o.v+a,0,100),n=!0):t.key==="ArrowDown"?(o.v=c(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=c(o.h-a,0,360),n=!0):t.key==="ArrowRight"||t.key==="ArrowUp"?(o.h=c(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?.1:.01;t.key==="ArrowLeft"||t.key==="ArrowDown"?(o.a=c(o.a-l,0,1),n=!0):t.key==="ArrowRight"||t.key==="ArrowUp"?(o.a=c(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,u,b,v,d,_,R,p,S;if(!t)return null;const e=this._panelRefs(t);if(this._format==="hex"){const y=((l=e.inputHex)==null?void 0:l.value)||"",I=y.trim().startsWith("#")?y.trim():`#${y.trim()}`,P=f(I);return P?this._normalizeByAlpha(P):null}if(this._format==="rgb"){const y=Number(((u=e.inputR)==null?void 0:u.value)??""),I=Number(((b=e.inputG)==null?void 0:b.value)??""),P=Number(((v=e.inputB)==null?void 0:v.value)??""),D=this._alphaEnabled()?Number(((d=e.inputA1)==null?void 0:d.value)??""):1;return[y,I,P,D].every(V=>Number.isFinite(V))?this._normalizeByAlpha({r:y,g:I,b:P,a:D}):null}const r=Number(((_=e.inputH)==null?void 0:_.value)??""),i=Number(((R=e.inputS)==null?void 0:R.value)??""),a=Number(((p=e.inputL)==null?void 0:p.value)??""),n=this._alphaEnabled()?Number(((S=e.inputA2)==null?void 0:S.value)??""):1;if(![r,i,a,n].every(y=>Number.isFinite(y)))return null;const o={h:c(r,0,360),s:c(i,0,100),l:c(a,0,100),a:c(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=c(this._dragX-e.left,0,e.width||1),i=c(this._dragY-e.top,0,e.height||1),a={...this._hsva};this._dragTarget==="sv"?(a.s=c(r/Math.max(e.width,1)*100,0,100),a.v=c(100-i/Math.max(e.height,1)*100,0,100)):this._dragTarget==="hue"?a.h=c(r/Math.max(e.width,1)*360,0,360):this._dragTarget==="alpha"&&(a.a=c(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:c(t.h,0,360),s:c(t.s,0,100),v:c(t.v,0,100),a:this._alphaEnabled()?c(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(Z(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",N);exports.UIColorPicker=N;