@editora/ui-core 0.1.20 → 0.1.22

package/dist/color-picker.cjs.js

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const O=require("./ElementBase-EV6mVBUV.js"),_=require("./date-time-utils-Dmost5Ee.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 A(s){return g(Math.round(s),0,255)}function H(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 P(s){const t=s.trim();if(!t)return null;if(t.endsWith("%")){const r=Number(t.slice(0,-1));return Number.isFinite(r)?A(g(r,0,100)/100*255):null}const e=Number(t);return Number.isFinite(e)?A(e):null}function B(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 F(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)?x(r):null}if(t.endsWith("turn")){const r=Number(t.slice(0,-4));return Number.isFinite(r)?x(r*360):null}if(t.endsWith("rad")){const r=Number(t.slice(0,-3));return Number.isFinite(r)?x(r*180/Math.PI):null}const e=Number(t);return Number.isFinite(e)?x(e):null}function x(s){const t=s%360;return t<0?t+360:t}function T(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 U(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 b({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 b({r:e,g:r,b:i,a})}function N(s){const t=/^rgba?\((.+)\)$/i.exec(s.trim());if(!t)return null;const e=T(t[1]);if(!e||e.channels.length<3)return null;const r=P(e.channels[0]),i=P(e.channels[1]),a=P(e.channels[2]);if(r==null||i==null||a==null)return null;const n=e.alpha!=null?H(e.alpha):1;return n==null?null:b({r,g:i,b:a,a:n})}function V(s){const t=/^hsla?\((.+)\)$/i.exec(s.trim());if(!t)return null;const e=T(t[1]);if(!e||e.channels.length<3)return null;const r=F(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?H(e.alpha):1;return n==null?null:q({h:r,s:i,l:a,a:n})}function b(s){return{r:A(s.r),g:A(s.g),b:A(s.b),a:m(g(s.a,0,1),4)}}function f(s){const t=(s||"").trim();return t?t.startsWith("#")?U(t):/^rgba?\(/i.test(t)?N(t):/^hsla?\(/i.test(t)?V(t):null:null}function W(s,t=!1){const e=b(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 K(s,t=!0){const e=b(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 G(s,t=!0){const e=Math.round(x(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 z(s){const t=b(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,d=a*100;return{h:m(l,3),s:m(u,3),v:m(d,3),a:t.a}}function X(s){const t=x(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),b({r:(o+n)*255,g:(l+n)*255,b:(u+n)*255,a:s.a})}function I(s){const t=b(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,d=0;return o!==0&&(d=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(d*100,3),l:m(l*100,3),a:t.a}}function q(s){const t=x(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),b({r:(o+n)*255,g:(l+n)*255,b:(u+n)*255,a:s.a})}function y(s,t){return W(s,t).toUpperCase()}function k(s,t){return K(s,t)}function Y(s,t){return G(I(s),t)}const C="#2563eb",L="editora:ui-color-picker:recent",j=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const O=require("./ElementBase-EV6mVBUV.js"),_=require("./date-time-utils-BzfTpeU-.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 A(s){return g(Math.round(s),0,255)}function D(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 C(s){const t=s.trim();if(!t)return null;if(t.endsWith("%")){const r=Number(t.slice(0,-1));return Number.isFinite(r)?A(g(r,0,100)/100*255):null}const e=Number(t);return Number.isFinite(e)?A(e):null}function B(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 F(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)?x(r):null}if(t.endsWith("turn")){const r=Number(t.slice(0,-4));return Number.isFinite(r)?x(r*360):null}if(t.endsWith("rad")){const r=Number(t.slice(0,-3));return Number.isFinite(r)?x(r*180/Math.PI):null}const e=Number(t);return Number.isFinite(e)?x(e):null}function x(s){const t=s%360;return t<0?t+360:t}function T(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 U(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 b({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 b({r:e,g:r,b:i,a})}function N(s){const t=/^rgba?\((.+)\)$/i.exec(s.trim());if(!t)return null;const e=T(t[1]);if(!e||e.channels.length<3)return null;const r=C(e.channels[0]),i=C(e.channels[1]),a=C(e.channels[2]);if(r==null||i==null||a==null)return null;const n=e.alpha!=null?D(e.alpha):1;return n==null?null:b({r,g:i,b:a,a:n})}function V(s){const t=/^hsla?\((.+)\)$/i.exec(s.trim());if(!t)return null;const e=T(t[1]);if(!e||e.channels.length<3)return null;const r=F(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?D(e.alpha):1;return n==null?null:$({h:r,s:i,l:a,a:n})}function b(s){return{r:A(s.r),g:A(s.g),b:A(s.b),a:m(g(s.a,0,1),4)}}function f(s){const t=(s||"").trim();return t?t.startsWith("#")?U(t):/^rgba?\(/i.test(t)?N(t):/^hsla?\(/i.test(t)?V(t):null:null}function W(s,t=!1){const e=b(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 K(s,t=!0){const e=b(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 G(s,t=!0){const e=Math.round(x(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 z(s){const t=b(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,p=a*100;return{h:m(l,3),s:m(c,3),v:m(p,3),a:t.a}}function X(s){const t=x(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),b({r:(o+n)*255,g:(l+n)*255,b:(c+n)*255,a:s.a})}function M(s){const t=b(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,p=0;return o!==0&&(p=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(p*100,3),l:m(l*100,3),a:t.a}}function $(s){const t=x(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),b({r:(o+n)*255,g:(l+n)*255,b:(c+n)*255,a:s.a})}function y(s,t){return W(s,t).toUpperCase()}function k(s,t){return K(s,t)}function Y(s,t){return G(M(s),t)}const I="#2563eb",L="editora:ui-color-picker:recent",j=`
   <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>
-`,D=`
+`,H=`
   :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-muted: var(--ui-color-muted, #526175);
     --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-success: var(--ui-color-success, #15803d);
+    --ui-cp-warning: var(--ui-color-warning, #b45309);
     --ui-cp-danger: var(--ui-color-danger, #dc2626);
     --ui-cp-radius: 14px;
     --ui-cp-shadow: none;
@@ -319,11 +319,15 @@
   }
 
   .sv:focus-visible,
-  .slider:focus-visible {
+  .slider:focus-visible::after {
     outline: 2px solid color-mix(in srgb, var(--ui-cp-accent) 64%, transparent);
     outline-offset: 1px;
   }
 
+  .slider:focus-visible {
+    outline: none;
+  }
+
   .thumb {
     position: absolute;
     inline-size: 12px;
@@ -338,19 +342,35 @@
     transform: translate3d(0, 0, 0);
   }
 
+  /* The track is 12px, but the element is 24px tall (WCAG 2.5.8): the padding is the extra hit area,
+     the track is painted in the content box and the ring is drawn by ::after over just the track. */
   .slider {
     position: relative;
+    box-sizing: content-box;
     block-size: 12px;
+    padding-block: 6px;
     border-radius: 999px;
-    border: 1px solid color-mix(in srgb, var(--ui-cp-border) 82%, transparent);
+    background-clip: content-box;
+    background-origin: content-box;
     cursor: pointer;
     touch-action: none;
     overflow: visible;
+  }
+
+  .slider::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    inset-block: 6px;
+    box-sizing: border-box;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--ui-cp-border) 82%, transparent);
     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-cp-border) 40%, transparent);
+    pointer-events: none;
   }
 
   .slider.hue {
-    background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
+    background-image: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
   }
 
   .slider.alpha {
@@ -686,8 +706,8 @@
     max-block-size: min(84vh, 680px);
     overflow: auto;
   }
-`;function c(s,t,e){return Math.max(t,Math.min(e,s))}function E(s,t){return Math.abs(s-t)<=5e-4}function S(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class $ extends O.ElementBase{constructor(){super(),this._syncing=!1,this._initialized=!1,this._rgba=b(f(C)||{r:37,g:99,b:235,a:1}),this._hsva=z(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=_.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=t=>{_.eventOriginatesWithin(t,[this._overlay])||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=b({...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=b(this._rgba);return{hex:y(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>${D}</style>
+`;function u(s,t,e){return Math.max(t,Math.min(e,s))}function E(s,t){return Math.abs(s-t)<=5e-4}function S(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class q extends O.ElementBase{constructor(){super(),this._syncing=!1,this._initialized=!1,this._rgba=b(f(I)||{r:37,g:99,b:235,a:1}),this._hsva=z(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=_.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=t=>{_.eventOriginatesWithin(t,[this._overlay])||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=b({...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=b(this._rgba);return{hex:y(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>${H}</style>
       <section class="root">
         <div class="trigger-wrap" data-role="trigger-wrap">
           <button
@@ -747,7 +767,7 @@
           <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" />
+              <input class="input" data-input="hex" part="input" spellcheck="false" autocomplete="off" aria-label="Hex color value" />
             </div>
           </div>
 
@@ -787,17 +807,17 @@
         <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>${D}${J}</style>
+      <style>${H}${J}</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=_.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 _.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 _.shouldUseMobileSheet(this.getAttribute("mode")||"inline")}_alphaEnabled(){return _.isTruthyAttr(this.getAttribute("alpha"),!1)}_recentEnabled(){return _.isTruthyAttr(this.getAttribute("recent"),!0)}_persistRecent(){return _.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(C)||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=y(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(L);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=>y(this._normalizeByAlpha(r),this._alphaEnabled())).slice(0,this._maxRecent())}catch{this._recentColors=[]}}_persistRecentColors(){if(!(!this._persistRecent()||typeof localStorage>"u"))try{localStorage.setItem(L,JSON.stringify(this._recentColors))}catch{}}_normalizeByAlpha(t){return this._alphaEnabled()?b(t):b({...t,a:1})}_applyRgba(t,e){const r=this._normalizeByAlpha(t),i=z(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"?k(this._rgba,this._alphaEnabled()):t==="hsl"?Y(this._rgba,this._alphaEnabled()):y(this._rgba,this._alphaEnabled())}_currentHex(){return y(this._rgba,this._alphaEnabled())}_eventDetail(t){return{value:this._serializeValue(),hex:this._currentHex(),rgba:{...this._rgba},hsla:I(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 e=this._getCurrentPanel()?.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,{passive:!0,capture:!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=e.getAttribute("data-placement"),a=_.computePopoverPosition(t.getBoundingClientRect(),r.getBoundingClientRect(),8,8,i==="top"?"top":i==="bottom"?"bottom":null);e.style.top=`${Math.round(a.top)}px`,e.style.left=`${Math.round(a.left)}px`,e.setAttribute("data-placement",a.placement)}_onDocumentPointerDown(t){if(!this._overlay||!this._open)return;const e=typeof t.composedPath=="function"?t.composedPath():[];if(e.includes(this))return;const r=this._overlayRoot?.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){const e=this._overlayRoot?.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){const e=this.root.querySelector('[data-cp-panel="inline"]');e&&t(this._panelRefs(e));const r=this._overlayRoot?.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(),d=this._tone(),v=u==="loading",h=this._isDisabled(),w=this._isReadonly(),M=this._serializeValue()||this._placeholder();r&&(r.hidden=!l),i&&(i.disabled=h||v,i.dataset.state=u,i.dataset.tone=d,i.setAttribute("aria-expanded",l&&this._open?"true":"false"),this._applyAria(i)),a&&(a.textContent=M),n&&(n.style.background=k(this._rgba,!0)),o&&(o.hidden=l),this._forEachPanel(p=>this._updatePanel(p,{skipSwatches:t,disabled:h,readonly:w,loading:v,state:u,tone:d,modePopover:l,liveOnly:e}))}_updatePanel(t,e){const r=this._rgba,i=I(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=k(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),R=c(100-a.v,1,99);t.svThumb.style.left=`${p}%`,t.svThumb.style.top=`${R}%`}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=`
+    `,t&&!this._isSheetOpen&&(this._isSheetOpen=!0,this._releaseScrollLock=_.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 _.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 _.shouldUseMobileSheet(this.getAttribute("mode")||"inline")}_alphaEnabled(){return _.isTruthyAttr(this.getAttribute("alpha"),!1)}_recentEnabled(){return _.isTruthyAttr(this.getAttribute("recent"),!0)}_persistRecent(){return _.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(I)||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=y(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(L);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=>y(this._normalizeByAlpha(r),this._alphaEnabled())).slice(0,this._maxRecent())}catch{this._recentColors=[]}}_persistRecentColors(){if(!(!this._persistRecent()||typeof localStorage>"u"))try{localStorage.setItem(L,JSON.stringify(this._recentColors))}catch{}}_normalizeByAlpha(t){return this._alphaEnabled()?b(t):b({...t,a:1})}_applyRgba(t,e){const r=this._normalizeByAlpha(t),i=z(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"?k(this._rgba,this._alphaEnabled()):t==="hsl"?Y(this._rgba,this._alphaEnabled()):y(this._rgba,this._alphaEnabled())}_currentHex(){return y(this._rgba,this._alphaEnabled())}_eventDetail(t){return{value:this._serializeValue(),hex:this._currentHex(),rgba:{...this._rgba},hsla:M(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 e=this._getCurrentPanel()?.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,{passive:!0,capture:!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=e.getAttribute("data-placement"),a=_.computePopoverPosition(t.getBoundingClientRect(),r.getBoundingClientRect(),8,8,i==="top"?"top":i==="bottom"?"bottom":null);e.style.top=`${Math.round(a.top)}px`,e.style.left=`${Math.round(a.left)}px`,e.setAttribute("data-placement",a.placement)}_onDocumentPointerDown(t){if(!this._overlay||!this._open)return;const e=typeof t.composedPath=="function"?t.composedPath():[];if(e.includes(this))return;const r=this._overlayRoot?.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){const e=this._overlayRoot?.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){const e=this.root.querySelector('[data-cp-panel="inline"]');e&&t(this._panelRefs(e));const r=this._overlayRoot?.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(),p=this._tone(),v=c==="loading",h=this._isDisabled(),w=this._isReadonly(),R=this._serializeValue()||this._placeholder();r&&(r.hidden=!l),i&&(i.disabled=h||v,i.dataset.state=c,i.dataset.tone=p,i.setAttribute("aria-expanded",l&&this._open?"true":"false"),this._applyAria(i,R)),a&&(a.textContent=R),n&&(n.style.background=k(this._rgba,!0)),o&&(o.hidden=l),this._forEachPanel(d=>this._updatePanel(d,{skipSwatches:t,disabled:h,readonly:w,loading:v,state:c,tone:p,modePopover:l,liveOnly:e}))}_updatePanel(t,e){const r=this._rgba,i=M(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=k(r,!0)),t.status){let d="";l?d="Error":e.state==="loading"?d="Syncing":e.state==="success"&&(d="Saved"),t.status.hidden=!d,t.status.textContent=d,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 d=u(a.s,1,99),P=u(100-a.v,1,99);t.svThumb.style.left=`${d}%`,t.svThumb.style.top=`${P}%`}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=`${c(a.a*100,1,99)}%`);const d=t.panel.getRootNode(),v=d instanceof ShadowRoot?d.activeElement:t.panel.ownerDocument.activeElement,h=v&&t.panel.contains(v)?v.getAttribute("data-input"):null;if(t.inputHex&&h!=="hex"&&(t.inputHex.value=y(r,this._alphaEnabled())),t.inputR&&h!=="r"&&(t.inputR.value=String(r.r)),t.inputG&&h!=="g"&&(t.inputG.value=String(r.g)),t.inputB&&h!=="b"&&(t.inputB.value=String(r.b)),t.inputA1&&h!=="a1"&&(t.inputA1.value=this._alphaEnabled()?String(Number(r.a.toFixed(3))):"1"),t.inputH&&h!=="h"&&(t.inputH.value=String(Math.round(i.h))),t.inputS&&h!=="s"&&(t.inputS.value=String(Math.round(i.s))),t.inputL&&h!=="l"&&(t.inputL.value=String(Math.round(i.l))),t.inputA2&&h!=="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 w=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=w||!p}if(t.clear&&(t.clear.disabled=w),t.apply&&(t.apply.hidden=!e.modePopover,t.apply.disabled=w),t.panel.querySelectorAll(".input").forEach(p=>{const R=p;R.disabled=w}),!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=y(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="${S(a)}"${n} title="${S(a)}" style="background:${S(k(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=y(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="${S(a)}"${n} title="${S(a)}" style="background:${S(k(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(k(this._rgba,this._alphaEnabled()));return}if(a==="eyedropper"){this._openEyeDropper();return}if(a==="clear"){if(this._isReadonly())return;const n=f(C);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){if(!t)return null;const e=this._panelRefs(t);if(this._format==="hex"){const l=e.inputHex?.value||"",u=l.trim().startsWith("#")?l.trim():`#${l.trim()}`,d=f(u);return d?this._normalizeByAlpha(d):null}if(this._format==="rgb"){const l=Number(e.inputR?.value??""),u=Number(e.inputG?.value??""),d=Number(e.inputB?.value??""),v=this._alphaEnabled()?Number(e.inputA1?.value??""):1;return[l,u,d,v].every(h=>Number.isFinite(h))?this._normalizeByAlpha({r:l,g:u,b:d,a:v}):null}const r=Number(e.inputH?.value??""),i=Number(e.inputS?.value??""),a=Number(e.inputL?.value??""),n=this._alphaEnabled()?Number(e.inputA2?.value??""):1;if(![r,i,a,n].every(l=>Number.isFinite(l)))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(q(o))}_onPanelPointerDown(t,e){if(this._isDisabled()||this._isReadonly()||this._isLoading())return;const r=this._eventHTMLElement(t);if(!r)return;const i=r.closest("[data-cp]")?.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 E(r.h,e.h)&&E(r.s,e.s)&&E(r.v,e.v)&&E(r.a,e.a)?!1:(this._hsva=e,this._rgba=this._normalizeByAlpha(X(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?.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){if(!t||this._isDisabled())return;let e=!1;if(typeof navigator<"u"&&navigator.clipboard?.writeText)try{await navigator.clipboard.writeText(t),e=!0}catch{e=!1}if(!e&&typeof document<"u"){const a=document.createElement("textarea");a.value=t,a.setAttribute("readonly",""),a.style.position="fixed",a.style.opacity="0",document.body.appendChild(a),a.select();try{e=document.execCommand("copy")}catch{e=!1}finally{a.parentElement&&a.parentElement.removeChild(a)}}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",$);exports.UIColorPicker=$;
+      `),t.alphaThumb&&(t.alphaThumb.style.left=`${u(a.a*100,1,99)}%`);const p=t.panel.getRootNode(),v=p instanceof ShadowRoot?p.activeElement:t.panel.ownerDocument.activeElement,h=v&&t.panel.contains(v)?v.getAttribute("data-input"):null;if(t.inputHex&&h!=="hex"&&(t.inputHex.value=y(r,this._alphaEnabled())),t.inputR&&h!=="r"&&(t.inputR.value=String(r.r)),t.inputG&&h!=="g"&&(t.inputG.value=String(r.g)),t.inputB&&h!=="b"&&(t.inputB.value=String(r.b)),t.inputA1&&h!=="a1"&&(t.inputA1.value=this._alphaEnabled()?String(Number(r.a.toFixed(3))):"1"),t.inputH&&h!=="h"&&(t.inputH.value=String(Math.round(i.h))),t.inputS&&h!=="s"&&(t.inputS.value=String(Math.round(i.s))),t.inputL&&h!=="l"&&(t.inputL.value=String(Math.round(i.l))),t.inputA2&&h!=="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 d=this._error||(e.state==="error"?"Unable to validate current color value.":"");t.error.hidden=!d,t.error.textContent=d}const w=c;if(t.copyHex&&(t.copyHex.disabled=e.disabled||e.loading),t.copyRgb&&(t.copyRgb.disabled=e.disabled||e.loading),t.eyedropper){const d=typeof window<"u"&&typeof window.EyeDropper=="function";t.eyedropper.hidden=!d,t.eyedropper.disabled=w||!d}if(t.clear&&(t.clear.disabled=w),t.apply&&(t.apply.hidden=!e.modePopover,t.apply.disabled=w),t.panel.querySelectorAll(".input").forEach(d=>{const P=d;P.disabled=w}),!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=y(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="${S(a)}"${n} title="${S(a)}" style="background:${S(k(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=y(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="${S(a)}"${n} title="${S(a)}" style="background:${S(k(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(k(this._rgba,this._alphaEnabled()));return}if(a==="eyedropper"){this._openEyeDropper();return}if(a==="clear"){if(this._isReadonly())return;const n=f(I);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?.1:.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){if(!t)return null;const e=this._panelRefs(t);if(this._format==="hex"){const l=e.inputHex?.value||"",c=l.trim().startsWith("#")?l.trim():`#${l.trim()}`,p=f(c);return p?this._normalizeByAlpha(p):null}if(this._format==="rgb"){const l=Number(e.inputR?.value??""),c=Number(e.inputG?.value??""),p=Number(e.inputB?.value??""),v=this._alphaEnabled()?Number(e.inputA1?.value??""):1;return[l,c,p,v].every(h=>Number.isFinite(h))?this._normalizeByAlpha({r:l,g:c,b:p,a:v}):null}const r=Number(e.inputH?.value??""),i=Number(e.inputS?.value??""),a=Number(e.inputL?.value??""),n=this._alphaEnabled()?Number(e.inputA2?.value??""):1;if(![r,i,a,n].every(l=>Number.isFinite(l)))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($(o))}_onPanelPointerDown(t,e){if(this._isDisabled()||this._isReadonly()||this._isLoading())return;const r=this._eventHTMLElement(t);if(!r)return;const i=r.closest("[data-cp]")?.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 E(r.h,e.h)&&E(r.s,e.s)&&E(r.v,e.v)&&E(r.a,e.a)?!1:(this._hsva=e,this._rgba=this._normalizeByAlpha(X(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?.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){if(!t||this._isDisabled())return;let e=!1;if(typeof navigator<"u"&&navigator.clipboard?.writeText)try{await navigator.clipboard.writeText(t),e=!0}catch{e=!1}if(!e&&typeof document<"u"){const a=document.createElement("textarea");a.value=t,a.setAttribute("readonly",""),a.style.position="fixed",a.style.opacity="0",document.body.appendChild(a),a.select();try{e=document.execCommand("copy")}catch{e=!1}finally{a.parentElement&&a.parentElement.removeChild(a)}}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,e=""){const r=this.getAttribute("aria-labelledby"),i=this.getAttribute("aria-describedby"),a=this.getAttribute("aria-label"),n=this.getRootNode(),o=r?r.split(/\s+/).map(p=>n.getElementById?.(p)?.textContent?.trim()||"").filter(Boolean).join(" "):"";t.removeAttribute("aria-labelledby"),i?t.setAttribute("aria-describedby",i):t.removeAttribute("aria-describedby");const l=o||a||"Color picker",c=e&&!l.includes(e)?`${l}, ${e}`:l;t.setAttribute("aria-label",c)}}customElements.get("ui-color-picker")||customElements.define("ui-color-picker",q);exports.UIColorPicker=q;