placer-toolkit 0.5.1 → 1.0.0-alpha.2

package/cdn/chunks/chunk.UDGTTCHU.js

@@ -0,0 +1,660 @@
+import{a as it}from"./chunk.7UYSBZLK.js";import{a as nt}from"./chunk.RYPVSVQS.js";import{a as Q}from"./chunk.63PFEC3G.js";import{a as k}from"./chunk.KWVZRE3E.js";import{f as ot}from"./chunk.5YXXLUP2.js";import{a as et}from"./chunk.RWQ2HCYN.js";import{a as st}from"./chunk.W5PM7F34.js";import{a as D}from"./chunk.XESREUP5.js";import{a as tt}from"./chunk.BSQP4EKW.js";import{a as S}from"./chunk.KKVT4LHX.js";import{a as rt}from"./chunk.7YEJIK24.js";import{a as B}from"./chunk.RZZMGXAZ.js";import{a as W,b as f,c as x,d as Z,e as E,g as J}from"./chunk.NYYTSWQF.js";import{a as m}from"./chunk.ZS4GILCB.js";import{a as z}from"./chunk.OOQOIJSK.js";import{a as c}from"./chunk.U2DNK7H4.js";import{a as F}from"./chunk.PSDD6Q4W.js";import{a as T}from"./chunk.H2EOXVSZ.js";import{a as P}from"./chunk.D5CFOPIE.js";import{a as K,c as N}from"./chunk.N5AZOOIZ.js";import{a as at}from"./chunk.E4QLFQIH.js";import{d as w}from"./chunk.2N5ZK4F4.js";import{b as _}from"./chunk.IIHX5LOR.js";import{b as h}from"./chunk.E6MOE4FE.js";function d(i,e){vt(i)&&(i="100%");let t=yt(i);return i=e===360?i:Math.min(e,Math.max(0,parseFloat(i))),t&&(i=parseInt(String(i*e),10)/100),Math.abs(i-e)<1e-6?1:(e===360?i=(i<0?i%e+e:i%e)/parseFloat(String(e)):i=i%e/parseFloat(String(e)),i)}function C(i){return Math.min(1,Math.max(0,i))}function vt(i){return typeof i=="string"&&i.indexOf(".")!==-1&&parseFloat(i)===1}function yt(i){return typeof i=="string"&&i.indexOf("%")!==-1}function L(i){return i=parseFloat(i),(isNaN(i)||i<0||i>1)&&(i=1),i}function A(i){return Number(i)<=1?`${Number(i)*100}%`:i}function $(i){return i.length===1?"0"+i:String(i)}function lt(i,e,t){return{r:d(i,255)*255,g:d(e,255)*255,b:d(t,255)*255}}function Y(i,e,t){i=d(i,255),e=d(e,255),t=d(t,255);let r=Math.max(i,e,t),s=Math.min(i,e,t),a=0,n=0,o=(r+s)/2;if(r===s)n=0,a=0;else{let p=r-s;switch(n=o>.5?p/(2-r-s):p/(r+s),r){case i:a=(e-t)/p+(e<t?6:0);break;case e:a=(t-i)/p+2;break;case t:a=(i-e)/p+4;break;default:break}a/=6}return{h:a,s:n,l:o}}function q(i,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?i+(e-i)*(6*t):t<1/2?e:t<2/3?i+(e-i)*(2/3-t)*6:i}function ht(i,e,t){let r,s,a;if(i=d(i,360),e=d(e,100),t=d(t,100),e===0)s=t,a=t,r=t;else{let n=t<.5?t*(1+e):t+e-t*e,o=2*t-n;r=q(o,n,i+1/3),s=q(o,n,i),a=q(o,n,i-1/3)}return{r:r*255,g:s*255,b:a*255}}function j(i,e,t){i=d(i,255),e=d(e,255),t=d(t,255);let r=Math.max(i,e,t),s=Math.min(i,e,t),a=0,n=r,o=r-s,p=r===0?0:o/r;if(r===s)a=0;else{switch(r){case i:a=(e-t)/o+(e<t?6:0);break;case e:a=(t-i)/o+2;break;case t:a=(i-e)/o+4;break;default:break}a/=6}return{h:a,s:p,v:n}}function ut(i,e,t){i=d(i,360)*6,e=d(e,100),t=d(t,100);let r=Math.floor(i),s=i-r,a=t*(1-e),n=t*(1-s*e),o=t*(1-(1-s)*e),p=r%6,b=[t,n,a,a,o,t][p],u=[o,t,t,n,a,a][p],H=[a,a,o,t,t,n][p];return{r:b*255,g:u*255,b:H*255}}function O(i,e,t,r){let s=[$(Math.round(i).toString(16)),$(Math.round(e).toString(16)),$(Math.round(t).toString(16))];return r&&s[0].startsWith(s[0].charAt(1))&&s[1].startsWith(s[1].charAt(1))&&s[2].startsWith(s[2].charAt(1))?s[0].charAt(0)+s[1].charAt(0)+s[2].charAt(0):s.join("")}function ct(i,e,t,r,s){let a=[$(Math.round(i).toString(16)),$(Math.round(e).toString(16)),$(Math.round(t).toString(16)),$(wt(r))];return s&&a[0].startsWith(a[0].charAt(1))&&a[1].startsWith(a[1].charAt(1))&&a[2].startsWith(a[2].charAt(1))&&a[3].startsWith(a[3].charAt(1))?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0):a.join("")}function pt(i,e,t,r){let s=i/100,a=e/100,n=t/100,o=r/100,p=255*(1-s)*(1-o),b=255*(1-a)*(1-o),u=255*(1-n)*(1-o);return{r:p,g:b,b:u}}function G(i,e,t){let r=1-i/255,s=1-e/255,a=1-t/255,n=Math.min(r,s,a);return n===1?(r=0,s=0,a=0):(r=(r-n)/(1-n)*100,s=(s-n)/(1-n)*100,a=(a-n)/(1-n)*100),n*=100,{c:Math.round(r),m:Math.round(s),y:Math.round(a),k:Math.round(n)}}function wt(i){return Math.round(parseFloat(i)*255).toString(16)}function U(i){return g(i)/255}function g(i){return parseInt(i,16)}function dt(i){return{r:i>>16,g:(i&65280)>>8,b:i&255}}var V={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function ft(i){let e={r:0,g:0,b:0},t=1,r=null,s=null,a=null,n=!1,o=!1;return typeof i=="string"&&(i=$t(i)),typeof i=="object"&&(v(i.r)&&v(i.g)&&v(i.b)?(e=lt(i.r,i.g,i.b),n=!0,o=String(i.r).substr(-1)==="%"?"prgb":"rgb"):v(i.h)&&v(i.s)&&v(i.v)?(r=A(i.s),s=A(i.v),e=ut(i.h,r,s),n=!0,o="hsv"):v(i.h)&&v(i.s)&&v(i.l)?(r=A(i.s),a=A(i.l),e=ht(i.h,r,a),n=!0,o="hsl"):v(i.c)&&v(i.m)&&v(i.y)&&v(i.k)&&(e=pt(i.c,i.m,i.y,i.k),n=!0,o="cmyk"),Object.prototype.hasOwnProperty.call(i,"a")&&(t=i.a)),t=L(t),{ok:n,format:i.format||o,r:Math.min(255,Math.max(e.r,0)),g:Math.min(255,Math.max(e.g,0)),b:Math.min(255,Math.max(e.b,0)),a:t}}var xt="[-\\+]?\\d+%?",kt="[-\\+]?\\d*\\.\\d+%?",M="(?:"+kt+")|(?:"+xt+")",X="[\\s|\\(]+("+M+")[,|\\s]+("+M+")[,|\\s]+("+M+")\\s*\\)?",I="[\\s|\\(]+("+M+")[,|\\s]+("+M+")[,|\\s]+("+M+")[,|\\s]+("+M+")\\s*\\)?",y={CSS_UNIT:new RegExp(M),rgb:new RegExp("rgb"+X),rgba:new RegExp("rgba"+I),hsl:new RegExp("hsl"+X),hsla:new RegExp("hsla"+I),hsv:new RegExp("hsv"+X),hsva:new RegExp("hsva"+I),cmyk:new RegExp("cmyk"+I),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function $t(i){if(i=i.trim().toLowerCase(),i.length===0)return!1;let e=!1;if(V[i])i=V[i],e=!0;else if(i==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};let t=y.rgb.exec(i);return t?{r:t[1],g:t[2],b:t[3]}:(t=y.rgba.exec(i),t?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=y.hsl.exec(i),t?{h:t[1],s:t[2],l:t[3]}:(t=y.hsla.exec(i),t?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=y.hsv.exec(i),t?{h:t[1],s:t[2],v:t[3]}:(t=y.hsva.exec(i),t?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=y.cmyk.exec(i),t?{c:t[1],m:t[2],y:t[3],k:t[4]}:(t=y.hex8.exec(i),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),a:U(t[4]),format:e?"name":"hex8"}:(t=y.hex6.exec(i),t?{r:g(t[1]),g:g(t[2]),b:g(t[3]),format:e?"name":"hex"}:(t=y.hex4.exec(i),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),a:U(t[4]+t[4]),format:e?"name":"hex8"}:(t=y.hex3.exec(i),t?{r:g(t[1]+t[1]),g:g(t[2]+t[2]),b:g(t[3]+t[3]),format:e?"name":"hex"}:!1))))))))))}function v(i){return typeof i=="number"?!Number.isNaN(i):y.CSS_UNIT.test(i)}var R=class i{constructor(e="",t={}){if(e instanceof i)return e;typeof e=="number"&&(e=dt(e)),this.originalInput=e;let r=ft(e);this.originalInput=e,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=t.format??r.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}isDark(){return this.getBrightness()<128}isLight(){return!this.isDark()}getBrightness(){let e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3}getLuminance(){let e=this.toRgb(),t,r,s,a=e.r/255,n=e.g/255,o=e.b/255;return a<=.03928?t=a/12.92:t=Math.pow((a+.055)/1.055,2.4),n<=.03928?r=n/12.92:r=Math.pow((n+.055)/1.055,2.4),o<=.03928?s=o/12.92:s=Math.pow((o+.055)/1.055,2.4),.2126*t+.7152*r+.0722*s}getAlpha(){return this.a}setAlpha(e){return this.a=L(e),this.roundA=Math.round(100*this.a)/100,this}isMonochrome(){let{s:e}=this.toHsl();return e===0}toHsv(){let e=j(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}}toHsvString(){let e=j(this.r,this.g,this.b),t=Math.round(e.h*360),r=Math.round(e.s*100),s=Math.round(e.v*100);return this.a===1?`hsv(${t}, ${r}%, ${s}%)`:`hsva(${t}, ${r}%, ${s}%, ${this.roundA})`}toHsl(){let e=Y(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}}toHslString(){let e=Y(this.r,this.g,this.b),t=Math.round(e.h*360),r=Math.round(e.s*100),s=Math.round(e.l*100);return this.a===1?`hsl(${t}, ${r}%, ${s}%)`:`hsla(${t}, ${r}%, ${s}%, ${this.roundA})`}toHex(e=!1){return O(this.r,this.g,this.b,e)}toHexString(e=!1){return"#"+this.toHex(e)}toHex8(e=!1){return ct(this.r,this.g,this.b,this.a,e)}toHex8String(e=!1){return"#"+this.toHex8(e)}toHexShortString(e=!1){return this.a===1?this.toHexString(e):this.toHex8String(e)}toRgb(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}}toRgbString(){let e=Math.round(this.r),t=Math.round(this.g),r=Math.round(this.b);return this.a===1?`rgb(${e}, ${t}, ${r})`:`rgba(${e}, ${t}, ${r}, ${this.roundA})`}toPercentageRgb(){let e=t=>`${Math.round(d(t,255)*100)}%`;return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}}toPercentageRgbString(){let e=t=>Math.round(d(t,255)*100);return this.a===1?`rgb(${e(this.r)}%, ${e(this.g)}%, ${e(this.b)}%)`:`rgba(${e(this.r)}%, ${e(this.g)}%, ${e(this.b)}%, ${this.roundA})`}toCmyk(){return{...G(this.r,this.g,this.b)}}toCmykString(){let{c:e,m:t,y:r,k:s}=G(this.r,this.g,this.b);return`cmyk(${e}, ${t}, ${r}, ${s})`}toName(){if(this.a===0)return"transparent";if(this.a<1)return!1;let e="#"+O(this.r,this.g,this.b,!1);for(let[t,r]of Object.entries(V))if(e===r)return t;return!1}toString(e){let t=!!e;e=e??this.format;let r=!1,s=this.a<1&&this.a>=0;return!t&&s&&(e.startsWith("hex")||e==="name")?e==="name"&&this.a===0?this.toName():this.toRgbString():(e==="rgb"&&(r=this.toRgbString()),e==="prgb"&&(r=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(r=this.toHexString()),e==="hex3"&&(r=this.toHexString(!0)),e==="hex4"&&(r=this.toHex8String(!0)),e==="hex8"&&(r=this.toHex8String()),e==="name"&&(r=this.toName()),e==="hsl"&&(r=this.toHslString()),e==="hsv"&&(r=this.toHsvString()),e==="cmyk"&&(r=this.toCmykString()),r||this.toHexString())}toNumber(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)}clone(){return new i(this.toString())}lighten(e=10){let t=this.toHsl();return t.l+=e/100,t.l=C(t.l),new i(t)}brighten(e=10){let t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(255*-(e/100)))),t.g=Math.max(0,Math.min(255,t.g-Math.round(255*-(e/100)))),t.b=Math.max(0,Math.min(255,t.b-Math.round(255*-(e/100)))),new i(t)}darken(e=10){let t=this.toHsl();return t.l-=e/100,t.l=C(t.l),new i(t)}tint(e=10){return this.mix("white",e)}shade(e=10){return this.mix("black",e)}desaturate(e=10){let t=this.toHsl();return t.s-=e/100,t.s=C(t.s),new i(t)}saturate(e=10){let t=this.toHsl();return t.s+=e/100,t.s=C(t.s),new i(t)}greyscale(){return this.desaturate(100)}spin(e){let t=this.toHsl(),r=(t.h+e)%360;return t.h=r<0?360+r:r,new i(t)}mix(e,t=50){let r=this.toRgb(),s=new i(e).toRgb(),a=t/100,n={r:(s.r-r.r)*a+r.r,g:(s.g-r.g)*a+r.g,b:(s.b-r.b)*a+r.b,a:(s.a-r.a)*a+r.a};return new i(n)}analogous(e=6,t=30){let r=this.toHsl(),s=360/t,a=[this];for(r.h=(r.h-(s*e>>1)+720)%360;--e;)r.h=(r.h+s)%360,a.push(new i(r));return a}complement(){let e=this.toHsl();return e.h=(e.h+180)%360,new i(e)}monochromatic(e=6){let t=this.toHsv(),{h:r}=t,{s}=t,{v:a}=t,n=[],o=1/e;for(;e--;)n.push(new i({h:r,s,v:a})),a=(a+o)%1;return n}splitcomplement(){let e=this.toHsl(),{h:t}=e;return[this,new i({h:(t+72)%360,s:e.s,l:e.l}),new i({h:(t+216)%360,s:e.s,l:e.l})]}onBackground(e){let t=this.toRgb(),r=new i(e).toRgb(),s=t.a+r.a*(1-t.a);return new i({r:(t.r*t.a+r.r*r.a*(1-t.a))/s,g:(t.g*t.a+r.g*r.a*(1-t.a))/s,b:(t.b*t.a+r.b*r.a*(1-t.a))/s,a:s})}triad(){return this.polyad(3)}tetrad(){return this.polyad(4)}polyad(e){let t=this.toHsl(),{h:r}=t,s=[this],a=360/e;for(let n=1;n<e;n++)s.push(new i({h:(r+n*a)%360,s:t.s,l:t.l}));return s}equals(e){let t=new i(e);return this.format==="cmyk"||t.format==="cmyk"?this.toCmykString()===t.toCmykString():this.toRgbString()===t.toRgbString()}};var gt=`:host {
+    --grid-width: 17em;
+    --grid-height: 12em;
+    --grid-handle-size: 1.25em;
+    --slider-height: 1em;
+    --slider-thumb-size: calc(var(--slider-height) + 0.25em);
+    --swatch-size: 1.5em;
+}
+
+.color-picker {
+    inline-size: var(--grid-width);
+    background-color: var(--pc-color-surface-raised);
+    color: var(--pc-color-text-normal);
+    border: var(--pc-border-width-s) var(--pc-border-style)
+        var(--pc-color-surface-border);
+    border-radius: var(--pc-border-radius-l);
+    font-family: var(--pc-font-sans);
+    font-size: inherit;
+    font-weight: var(--pc-font-weight-normal);
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.color-picker.inline {
+    border: var(--pc-border-width-s) var(--pc-border-style)
+        var(--pc-color-surface-border);
+}
+
+.color-picker.inline:focus-visible {
+    outline: var(--pc-focus-ring);
+    outline-offset: var(--pc-focus-ring-offset);
+    animation: focus-ring-animation var(--pc-transition-medium)
+        cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+.color-picker.inline .label,
+.color-picker.inline .label * {
+    position: absolute !important;
+    margin: -1px !important;
+    padding: 0 !important;
+    inline-size: 1px !important;
+    block-size: 1px !important;
+    width: 1px !important;
+    height: 1px !important;
+    clip-path: inset(50%) !important;
+    border: none !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+}
+
+.grid {
+    position: relative;
+    block-size: var(--grid-height);
+    background-image:
+        linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 100%) 100%),
+        linear-gradient(
+            to right,
+            rgb(255 255 255 / 100%) 0%,
+            rgb(255 255 255 / 0%) 100%
+        );
+    border-start-start-radius: var(--pc-border-radius-l);
+    border-start-end-radius: var(--pc-border-radius-l);
+    cursor: crosshair;
+    forced-color-adjust: none;
+}
+
+.grid-handle {
+    position: absolute;
+    margin-top: calc(var(--grid-handle-size) / -2);
+    margin-left: calc(var(--grid-handle-size) / -2);
+    inline-size: var(--grid-handle-size);
+    block-size: var(--grid-handle-size);
+    border: var(--pc-border-width-m) var(--pc-border-style)
+        var(--pc-color-neutral-95);
+    border-radius: var(--pc-border-radius-circle);
+    box-shadow: 0 0 0 var(--pc-border-width-s)
+        color-mix(in oklab, var(--pc-color-neutral-05) 25%, transparent);
+    z-index: 1;
+    transition: scale var(--pc-transition-fast) ease-in-out;
+}
+
+.grid-handle.dragging {
+    scale: 1.5;
+    cursor: none;
+}
+
+.grid-handle:focus-visible {
+    outline: var(--pc-focus-ring);
+    animation: focus-ring-animation var(--pc-transition-medium)
+        cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+.controls {
+    display: flex;
+    align-items: center;
+    padding: var(--pc-spacing-m);
+}
+
+.sliders {
+    flex: 1 1 auto;
+}
+
+.slider {
+    position: relative;
+    block-size: var(--slider-height);
+    border-radius: var(--pc-border-radius-pill);
+    box-shadow: inset 0 0 0 var(--pc-border-style)
+        color-mix(in oklab, var(--pc-color-neutral-05) 20%, transparent);
+    forced-color-adjust: none;
+}
+
+.slider:not(:last-of-type) {
+    margin-block-end: var(--pc-spacing-s);
+}
+
+.slider .slider-thumb {
+    position: absolute;
+    top: calc(50% - var(--slider-thumb-size) / 2);
+    margin-left: calc(var(--slider-thumb-size) / -2);
+    inline-size: var(--slider-thumb-size);
+    block-size: var(--slider-thumb-size);
+    background-color: var(--pc-color-neutral-95);
+    border-radius: var(--pc-border-radius-circle);
+    box-shadow: color-mix(
+        in oklab,
+        var(--pc-color-neutral-05) 25%,
+        transparent
+    );
+}
+
+.slider .slider-thumb:focus-visible {
+    outline: var(--pc-focus-ring);
+    outline-offset: var(--pc-focus-ring-offset);
+    animation: focus-ring-animation var(--pc-transition-medium)
+        cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+.hue-slider {
+    background-image: linear-gradient(
+        to right,
+        hsl(0 100% 50%) 0%,
+        hsl(60 100% 50%) 16.7%,
+        hsl(120 100% 50%) 33.3%,
+        hsl(180 100% 50%) 50%,
+        hsl(240 100% 50%) 66.7%,
+        hsl(300 100% 50%) 83.3%,
+        hsl(360 100% 50%) 100%
+    );
+}
+
+.alpha-slider .alpha-gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: inherit;
+}
+
+.preview {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    margin-inline-start: var(--pc-spacing-m);
+    inline-size: 2.25rem;
+    block-size: 2.25rem;
+    background-color: transparent;
+    border: none;
+    border-radius: var(--pc-border-radius-circle);
+    forced-color-adjust: none;
+}
+
+.preview::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    background-color: var(--preview-color);
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--pc-border-width-s)
+        color-mix(in oklab, var(--pc-color-neutral-05) 20%, transparent);
+}
+
+.user-input {
+    display: flex;
+    padding-inline: var(--pc-spacing-m);
+    padding-block-start: 0;
+    padding-block-end: var(--pc-spacing-m);
+}
+
+.user-input pc-input {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+}
+
+.user-input pc-input::part(input) {
+    padding-inline-end: var(--pc-spacing-xxs);
+    background-color: var(--pc-color-surface-raised);
+    overflow: visible;
+}
+
+/* Bug: This does not remove the focus ring for some reason. */
+.user-input pc-input:has(> pc-copy-button:focus-visible) {
+    --pc-focus-ring: none;
+}
+
+.user-input pc-input pc-copy-button {
+    margin-inline-start: var(--pc-spacing-xs);
+}
+
+.user-input pc-input.empty::part(input) {
+    padding-inline-end: var(--pc-form-control-padding-inline);
+}
+
+.user-input pc-input.empty pc-copy-button {
+    display: none;
+}
+
+.user-input pc-copy-button::part(button) {
+    aspect-ratio: 1 / 1;
+    background-color: transparent;
+    color: var(--pc-color-text-normal);
+}
+
+.user-input pc-copy-button::part(success-icon) {
+    color: var(--pc-color-success-on-quiet);
+}
+
+.user-input pc-copy-button::part(error-icon) {
+    color: var(--pc-color-danger-on-quiet);
+}
+
+@media (hover: hover) {
+    .user-input pc-copy-button::part(button):hover {
+        color: color-mix(
+            in oklab,
+            var(--pc-color-text-normal),
+            var(--pc-color-mix-hover)
+        );
+    }
+}
+
+.user-input pc-copy-button::part(button):active {
+    color: color-mix(
+        in oklab,
+        var(--pc-color-text-normal),
+        var(--pc-color-mix-active)
+    );
+}
+
+.user-input pc-button-group {
+    margin-inline-start: var(--pc-spacing-s);
+}
+
+.user-input pc-button:first-of-type {
+    min-inline-size: 3.25em;
+    max-inline-size: 3.25em;
+}
+
+.swatches {
+    display: grid;
+    justify-items: center;
+    grid-template-columns: repeat(8, 1fr);
+    gap: var(--pc-spacing-s);
+    padding: var(--pc-spacing-m);
+    border-block-start: var(--pc-border-width-s) var(--pc-border-style)
+        var(--pc-color-surface-border);
+}
+
+.swatches .swatch {
+    position: relative;
+    inline-size: var(--swatch-size);
+    block-size: var(--swatch-size);
+    border-radius: var(--pc-border-radius-circle);
+    forced-color-adjust: none;
+}
+
+.swatches .swatch:focus-visible {
+    outline: var(--pc-focus-ring);
+    outline-offset: var(--pc-focus-ring-offset);
+    animation: focus-ring-animation var(--pc-transition-medium)
+        cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+.swatches .swatch .swatch-color {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    border: solid 1px rgba(0, 0, 0, 0.125);
+    box-shadow: inset 0 0 0 var(--pc-border-width-s)
+        color-mix(in oklab, var(--pc-color-neutral-05) 20%, transparent);
+    border-radius: inherit;
+    cursor: pointer;
+}
+
+.pixel-background {
+    background-image:
+        linear-gradient(
+            45deg,
+            var(--pc-color-neutral-fill-normal) 25%,
+            transparent 25%
+        ),
+        linear-gradient(
+            45deg,
+            transparent 75%,
+            var(--pc-color-neutral-fill-normal) 75%
+        ),
+        linear-gradient(
+            45deg,
+            transparent 75%,
+            var(--pc-color-neutral-fill-normal) 75%
+        ),
+        linear-gradient(
+            45deg,
+            var(--pc-color-neutral-fill-normal) 25%,
+            transparent 25%
+        );
+    background-size: 0.5rem 0.5rem;
+    background-position:
+        0 0,
+        0 0,
+        -0.25rem -0.25rem,
+        0.25rem 0.25rem;
+}
+
+.color-picker.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.color-picker.disabled .grid,
+.color-picker.disabled .grid-handle,
+.color-picker.disabled .sliders .slider,
+.color-picker.disabled .sliders .slider .slider-thumb,
+.color-picker.disabled .preview,
+.color-picker.disabled .swatches .swatch,
+.color-picker.disabled .swatches .swatch .swatch-color {
+    pointer-events: none;
+}
+
+.color-popup::part(popup) {
+    max-block-size: none;
+    overflow: visible;
+}
+
+.popup-trigger {
+    display: inline-block;
+    position: relative;
+    inline-size: var(--pc-form-control-height);
+    block-size: var(--pc-form-control-height);
+    background-color: transparent;
+    border: none;
+    border-radius: var(--pc-border-radius-m);
+    font-size: inherit;
+    cursor: pointer;
+    forced-color-adjust: none;
+}
+
+.popup-trigger::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: inherit;
+    background-color: currentColor;
+    box-shadow:
+        inset 0 0 0 var(--pc-border-width-m) var(--pc-color-surface-border),
+        inset 0 0 0 var(--pc-border-width-xl) var(--pc-color-surface-default);
+}
+
+.popup-trigger.empty::before {
+    background-color: transparent;
+}
+
+.popup-trigger:focus-visible {
+    outline: none;
+}
+
+.popup-trigger:focus-visible:not([disabled]) {
+    outline: var(--pc-focus-ring);
+    outline-offset: var(--pc-focus-ring-offset);
+    animation: focus-ring-animation var(--pc-transition-medium)
+        cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+.popup-trigger[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+@keyframes focus-ring-animation {
+    0% {
+        outline-width: 0;
+    }
+
+    50% {
+        outline-width: calc(var(--pc-focus-ring-width) * 2);
+    }
+
+    100% {
+        outline-width: var(--pc-focus-ring-width);
+    }
+}
+`;var bt="EyeDropper"in window;K("colorPicker.show",{keyframes:[{offset:0,opacity:0,transform:"scaleY(0.35) scaleX(0.95) translateY(-10px) rotate(1deg)"},{offset:.25,opacity:1,transform:"scaleY(1.03) scaleX(1.005) translateY(2px) rotate(-0.5deg)"},{offset:.5,transform:"scaleY(0.995) scaleX(0.999) translateY(-0.5px) rotate(0.1deg)"},{offset:.75,transform:"scaleY(1.002) scaleX(1.0005) translateY(0.2px) rotate(-0.05deg)"},{offset:1,opacity:1,transform:"scaleY(1) scaleX(1) translateY(0) rotate(0deg)"}],options:{duration:1e3,easing:"cubic-bezier(0.2, 0.8, 0.2, 1)",fill:"forwards"}});K("colorPicker.hide",{keyframes:[{offset:0,opacity:1,transform:"scaleY(1) scaleX(1) translateY(0) rotate(0deg)"},{offset:.15,transform:"scaleY(1.005) scaleX(1.001) translateY(0.5px) rotate(-0.002deg)"},{offset:.4,transform:"scaleY(0.99) scaleX(0.998) translateY(-1px) rotate(0.008deg)"},{offset:.75,transform:"scaleY(0.6) scaleX(0.9) translateY(10px) rotate(0.007deg)"},{offset:1,opacity:0,transform:"scaleY(0.3) scaleX(0.8) translateY(25px) rotate(0.01deg)"}],options:{duration:400,easing:"cubic-bezier(0.6, 0.05, 0.8, 0.2)",fill:"forwards"}});var l=class extends J{constructor(){super();this.formControlController=new _(this);this.hasSlotController=new P(this,"label","hint");this.localize=new at(this);this.isSafeValue=!1;this.hasFocus=!1;this.isDraggingGridHandle=!1;this.isEmpty=!1;this.inputValue="";this.hue=0;this.saturation=100;this.brightness=100;this.alpha=100;this.value="";this.defaultValue="";this.label="";this.hint="";this.format="hex";this.inline=!1;this.size="medium";this.noFormatToggle=!1;this.name="";this.disabled=!1;this.open=!1;this.opacity=!1;this.uppercase=!1;this.swatches="";this.form="";this.required=!1;this.handleFocusIn=()=>{this.hasFocus=!0,c(this,"pc-focus")};this.handleFocusOut=()=>{this.hasFocus=!1,c(this,"pc-blur")};this.handleKeyDown=t=>{this.open&&t.key==="Escape"&&(t.stopPropagation(),this.hide(),this.focus())};this.handleDocumentKeyDown=t=>{if(t.key==="Escape"&&this.open){t.stopPropagation(),this.focus(),this.hide();return}t.key==="Tab"&&setTimeout(()=>{let r=this.getRootNode()instanceof ShadowRoot?document.activeElement?.shadowRoot?.activeElement:document.activeElement;(!this||r?.closest(this.tagName.toLowerCase())!==this)&&this.hide()})};this.handleDocumentMouseDown=t=>{let s=t.composedPath().some(a=>a instanceof Element&&(a.closest(".color-picker")||a===this.trigger));this&&!s&&this.hide()};this.addEventListener("focusin",this.handleFocusIn),this.addEventListener("focusout",this.handleFocusOut)}firstUpdated(){this.input.updateComplete.then(()=>{this.formControlController.updateValidity()})}handleFormatToggle(){let t=["hex","rgb","hsl","hsv"],r=(t.indexOf(this.format)+1)%t.length;this.format=t[r],this.setColor(this.value),c(this,"pc-change"),c(this,"pc-input")}handleAlphaDrag(t){let r=this.shadowRoot.querySelector(".alpha-slider"),s=r.querySelector(".slider-thumb"),{width:a}=r.getBoundingClientRect(),n=this.value,o=this.value;s.focus(),t.preventDefault(),F(r,{onMove:p=>{this.alpha=m(p/a*100,0,100),this.syncValues(),this.value!==o&&(o=this.value,c(this,"pc-input"))},onStop:()=>{this.value!==n&&(n=this.value,c(this,"pc-change"))},initialEvent:t})}handleHueDrag(t){let r=this.shadowRoot.querySelector(".hue-slider"),s=r.querySelector(".slider-thumb"),{width:a}=r.getBoundingClientRect(),n=this.value,o=this.value;s.focus(),t.preventDefault(),F(r,{onMove:p=>{this.hue=m(p/a*360,0,360),this.syncValues(),this.value!==o&&(o=this.value,c(this,"pc-input"))},onStop:()=>{this.value!==n&&(n=this.value,c(this,"pc-change"))},initialEvent:t})}handleGridDrag(t){let r=this.shadowRoot.querySelector(".grid"),s=r.querySelector(".grid-handle"),{width:a,height:n}=r.getBoundingClientRect(),o=this.value,p=this.value;s.focus(),t.preventDefault(),this.isDraggingGridHandle=!0,F(r,{onMove:(b,u)=>{this.saturation=m(b/a*100,0,100),this.brightness=m(100-u/n*100,0,100),this.syncValues(),this.value!==p&&(p=this.value,c(this,"pc-input"))},onStop:()=>{this.isDraggingGridHandle=!1,this.value!==o&&(o=this.value,c(this,"pc-change"))},initialEvent:t})}handleAlphaKeyDown(t){let r=t.shiftKey?10:1,s=this.value;t.key==="ArrowLeft"&&(t.preventDefault(),this.alpha=m(this.alpha-r,0,100),this.syncValues()),t.key==="ArrowRight"&&(t.preventDefault(),this.alpha=m(this.alpha+r,0,100),this.syncValues()),t.key==="Home"&&(t.preventDefault(),this.alpha=0,this.syncValues()),t.key==="End"&&(t.preventDefault(),this.alpha=100,this.syncValues()),this.value!==s&&(c(this,"pc-change"),c(this,"pc-input"))}handleHueKeyDown(t){let r=t.shiftKey?10:1,s=this.value;t.key==="ArrowLeft"&&(t.preventDefault(),this.hue=m(this.hue-r,0,360),this.syncValues()),t.key==="ArrowRight"&&(t.preventDefault(),this.hue=m(this.hue+r,0,360),this.syncValues()),t.key==="Home"&&(t.preventDefault(),this.hue=0,this.syncValues()),t.key==="End"&&(t.preventDefault(),this.hue=360,this.syncValues()),this.value!==s&&(c(this,"pc-change"),c(this,"pc-input"))}handleGridKeyDown(t){let r=t.shiftKey?10:1,s=this.value;t.key==="ArrowLeft"&&(t.preventDefault(),this.saturation=m(this.saturation-r,0,100),this.syncValues()),t.key==="ArrowRight"&&(t.preventDefault(),this.saturation=m(this.saturation+r,0,100),this.syncValues()),t.key==="ArrowUp"&&(t.preventDefault(),this.brightness=m(this.brightness+r,0,100),this.syncValues()),t.key==="ArrowDown"&&(t.preventDefault(),this.brightness=m(this.brightness-r,0,100),this.syncValues()),this.value!==s&&(c(this,"pc-change"),c(this,"pc-input"))}handleInputChange(t){let r=t.target,s=this.value;t.stopPropagation(),this.input.value?(this.setColor(r.value),r.value=this.value):this.value="",this.value!==s&&(c(this,"pc-change"),c(this,"pc-input"))}handleInputInput(t){this.formControlController.updateValidity(),t.stopPropagation()}handleInputKeyDown(t){if(t.key==="Enter"){let r=this.value;this.input.value?(this.setColor(this.input.value),this.input.value=this.value,this.value!==r&&(c(this,"pc-change"),c(this,"pc-input")),setTimeout(()=>this.input.select())):this.hue=0}}handleInputInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}handleTouchMove(t){t.preventDefault()}parseColor(t){let r=new R(t);if(!r.isValid)return null;let s=r.toHsl(),a={h:s.h,s:s.s*100,l:s.l*100,a:s.a},n=r.toRgb(),o=r.toHexString(),p=r.toHex8String(),b=r.toHsv(),u={h:b.h,s:b.s*100,v:b.v*100,a:b.a};return{hsl:{h:a.h,s:a.s,l:a.l,string:this.setLetterCase(`hsl(${Math.round(a.h)} ${Math.round(a.s)}% ${Math.round(a.l)}%)`)},hsla:{h:a.h,s:a.s,l:a.l,a:a.a,string:this.setLetterCase(`hsl(${Math.round(a.h)} ${Math.round(a.s)}% ${Math.round(a.l)}% / ${a.a*100}%)`)},hsv:{h:u.h,s:u.s,v:u.v,string:this.setLetterCase(`hsv(${Math.round(u.h)} ${Math.round(u.s)}% ${Math.round(u.v)}%)`)},hsva:{h:u.h,s:u.s,v:u.v,a:u.a,string:this.setLetterCase(`hsv(${Math.round(u.h)} ${Math.round(u.s)}% ${Math.round(u.v)}% / ${u.a*100}%)`)},rgb:{r:n.r,g:n.g,b:n.b,string:this.setLetterCase(`rgb(${Math.round(n.r)} ${Math.round(n.g)} ${Math.round(n.b)})`)},rgba:{r:n.r,g:n.g,b:n.b,a:n.a,string:this.setLetterCase(`rgb(${Math.round(n.r)} ${Math.round(n.g)} ${Math.round(n.b)} / ${n.a*100}%)`)},hex:this.setLetterCase(o),hexa:this.setLetterCase(p)}}setColor(t){let r=this.parseColor(t);return r===null?!1:(this.hue=r.hsva.h,this.saturation=r.hsva.s,this.brightness=r.hsva.v,this.alpha=this.opacity?r.hsva.a*100:100,this.syncValues(),!0)}setLetterCase(t){return typeof t!="string"?"":this.uppercase?t.toUpperCase():t.toLowerCase()}async syncValues(){let t=this.parseColor(`hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${Math.round(this.alpha/100)})`);t!==null&&(this.format==="hsl"?this.inputValue=t.hsva.a<1?t.hsla.string:t.hsl.string:this.format==="rgb"?this.inputValue=t.hsva.a<1?t.rgba.string:t.rgb.string:this.format==="hsv"?this.inputValue=t.hsva.a<1?t.hsva.string:t.hsv.string:this.inputValue=t.hsva.a<1?t.hexa:t.hex,this.isSafeValue=!0,this.value=this.inputValue,await this.updateComplete,this.isSafeValue=!1)}handleEyeDropper(){if(!bt)return;new EyeDropper().open().then(r=>{let s=this.value;this.setColor(r.sRGBHex),this.value!==s&&(c(this,"pc-change"),c(this,"pc-input"))}).catch()}selectSwatch(t){let r=this.value;this.disabled||(this.setColor(t),this.value!==r&&(c(this,"pc-change"),c(this,"pc-input")))}getHexString(t,r,s,a=100){let n=new R(`hsva(${t}, ${r}%, ${s}%, ${a/100})`);return n.isValid?n.toHex8String():""}stopNestedEventPropagation(t){t.stopImmediatePropagation()}handleFormatChange(){this.syncValues()}handleOpacityChange(){this.alpha=100}handleValueChange(t,r){if(this.isEmpty=!r,r||(this.hue=0,this.saturation=0,this.brightness=100,this.alpha=100),!this.isSafeValue){let s=this.parseColor(r);s!==null?(this.inputValue=this.value,this.hue=s.hsva.h,this.saturation=s.hsva.s,this.brightness=s.hsva.v,this.alpha=s.hsva.a*100,this.syncValues()):this.inputValue=t??""}}focus(t){this.inline?this.base.focus(t):this.trigger.focus(t)}blur(){let t=this.inline?this.base:this.trigger;this.hasFocus&&(t.focus({preventScroll:!0}),t.blur()),this.popup?.active&&this.hide()}getFormattedValue(t="hex"){let r=this.parseColor(`hsv(${this.hue} ${this.saturation}% ${this.brightness}% / ${this.alpha}%)`);if(r===null)return"";switch(t){case"hex":return r.hex;case"hexa":return r.hexa;case"rgb":return r.rgb.string;case"rgba":return r.rgba.string;case"hsl":return r.hsl.string;case"hsla":return r.hsla.string;case"hsv":return r.hsv.string;case"hsva":return r.hsva.string;default:return""}}handleTriggerClick(){this.open?this.hide():(this.show(),this.focus())}async handleTriggerKeyDown(t){if([" ","Enter"].includes(t.key)){t.preventDefault(),this.handleTriggerClick();return}}handleTriggerKeyUp(t){t.key===" "&&t.preventDefault()}updateAccessibleTrigger(){let t=this.trigger;t&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded",this.open?"true":"false"))}async show(){if(!this.open)return this.open=!0,z(this,"pc-after-show")}async hide(){if(this.open)return this.open=!1,z(this,"pc-after-hide")}addOpenListeners(){this.base.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown)}removeOpenListeners(){this.base&&this.base.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown)}async handleOpenChange(){if(this.disabled){this.open=!1;return}if(this.updateAccessibleTrigger(),this.open){c(this,"pc-show"),this.addOpenListeners(),await this.updateComplete,this.base.hidden=!1,this.popup.active=!0;let t=N(this,"colorPicker.show",{dir:this.localize.dir()});B(this.popup.popup,t.keyframes,t.options),z(this,"pc-after-show")}else{c(this,"pc-hide"),this.removeOpenListeners();let t=N(this,"colorPicker.hide",{dir:this.localize.dir()});await B(this.popup.popup,t.keyframes,t.options),this.base.hidden=!0,this.popup.active=!1,z(this,"pc-after-hide")}}get validity(){return this.input.validity}get validationMessage(){return this.input.validationMessage}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return!this.inline&&!this.validity.valid&&!this.open?(this.show(),this.addEventListener("pc-after-show",()=>this.input.reportValidity(),{once:!0}),this.disabled||this.formControlController.emitInvalidEvent(),!1):this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}render(){let t=this.hasSlotController.test("label"),r=this.hasSlotController.test("hint"),s=this.label?!0:!!t,a=this.hint?!0:!!r,n=this.saturation,o=100-this.brightness,p=Array.isArray(this.swatches)?this.swatches:this.swatches.split(";").filter(u=>u.trim()!==""),b=w`
+            <div
+                part="base"
+                class=${S({"color-picker":!0,inline:this.inline,disabled:this.disabled,focused:this.hasFocus})}
+                aria-disabled=${this.disabled?"true":"false"}
+                aria-labelledby="label"
+                tabindex=${this.inline?"0":"-1"}
+            >
+                ${this.inline?w`
+                          <slot class="label" name="label">
+                              ${this.label}
+                          </slot>
+                      `:null}
+
+                <div
+                    part="grid"
+                    class="grid"
+                    style=${k({backgroundColor:this.getHexString(this.hue,100,100)})}
+                    @pointerdown=${this.handleGridDrag}
+                    @touchmove=${this.handleTouchMove}
+                >
+                    <span
+                        part="grid-handle"
+                        class=${S({"grid-handle":!0,dragging:this.isDraggingGridHandle})}
+                        style=${k({top:`${o}%`,left:`${n}%`,backgroundColor:this.getHexString(this.hue,this.saturation,this.brightness,this.alpha)})}
+                        role="application"
+                        aria-label="HSV"
+                        tabindex=${D(this.disabled?void 0:"0")}
+                        @keydown=${this.handleGridKeyDown}
+                    ></span>
+                </div>
+
+                <div class="controls">
+                    <div class="sliders">
+                        <div
+                            part="slider hue-slider"
+                            class="slider hue-slider"
+                            @pointerdown=${this.handleHueDrag}
+                            @touchmove=${this.handleTouchMove}
+                        >
+                            <span
+                                part="slider-thumb hue-slider-thumb"
+                                class="slider-thumb"
+                                style=${k({left:`${this.hue===0?0:100/(360/this.hue)}%`})}
+                                role="slider"
+                                aria-label=${this.localize.term("hue")}
+                                aria-orientation="horizontal"
+                                aria-valuemin="0"
+                                aria-valuemax="360"
+                                aria-valuenow=${`${Math.round(this.hue)}`}
+                                tabindex=${D(this.disabled?void 0:"0")}
+                                @keydown=${this.handleHueKeyDown}
+                            ></span>
+                        </div>
+
+                        ${this.opacity?w`
+                                  <div
+                                      part="slider opacity-slider"
+                                      class="slider alpha-slider pixel-background"
+                                      @pointerdown=${this.handleAlphaDrag}
+                                      @touchmove=${this.handleTouchMove}
+                                  >
+                                      <div
+                                          class="alpha-gradient"
+                                          style=${k({backgroundImage:`
+                                                  linear-gradient(
+                                                      to right,
+                                                      ${this.getHexString(this.hue,this.saturation,this.brightness,0)} 0%,
+                                                      ${this.getHexString(this.hue,this.saturation,this.brightness,100)} 100%
+                                                  )
+                                              `})}
+                                      ></div>
+                                      <span
+                                          part="slider-thumb opacity-slider-thumb"
+                                          class="slider-thumb"
+                                          style=${k({left:`${this.alpha}%`})}
+                                          role="slider"
+                                          aria-label=${this.localize.term("opacity")}
+                                          aria-orientation="horizontal"
+                                          aria-valuemin="0"
+                                          aria-valuemax="100"
+                                          aria-valuenow=${Math.round(this.alpha)}
+                                          tabindex=${D(this.disabled?void 0:"0")}
+                                          @keydown=${this.handleAlphaKeyDown}
+                                      ></span>
+                                  </div>
+                              `:""}
+                    </div>
+                    <div
+                        part="preview"
+                        class="preview pixel-background"
+                        style=${k({"--preview-color":this.getHexString(this.hue,this.saturation,this.brightness,this.alpha)})}
+                    ></div>
+                </div>
+
+                <div class="user-input" aria-live="polite">
+                    <pc-input
+                        part="input"
+                        class=${S({empty:this.isEmpty})}
+                        type="text"
+                        id="color-input"
+                        name=${this.name}
+                        size="small"
+                        autocomplete="off"
+                        autocorrect="off"
+                        autocapitalize="off"
+                        spellcheck="false"
+                        value=${this.isEmpty?"":this.inputValue}
+                        ?required=${this.required}
+                        ?disabled=${this.disabled}
+                        aria-label=${this.localize.term("currentValue")}
+                        @keydown=${this.handleInputKeyDown}
+                        @pc-change=${this.handleInputChange}
+                        @pc-input=${this.handleInputInput}
+                        @pc-focus=${this.stopNestedEventPropagation}
+                        @pc-blur=${this.stopNestedEventPropagation}
+                        @pc-invalid=${this.handleInputInvalid}
+                    >
+                        ${this.isEmpty?null:w`
+                                  <pc-copy-button
+                                      part="copy-button"
+                                      class="copy-button"
+                                      from="color-input.value"
+                                      slot="suffix"
+                                      exportparts="button:copy-button-button"
+                                  ></pc-copy-button>
+                              `}
+                    </pc-input>
+
+                    <pc-button-group>
+                        ${this.noFormatToggle?"":w`
+                                  <pc-button
+                                      part="format-button"
+                                      size="small"
+                                      variant="outlined"
+                                      aria-label=${this.localize.term("toggleColorFormat")}
+                                      exportparts="
+                                          base:format-button-base,
+                                          prefix:format-button-prefix,
+                                          label:format-button-label,
+                                          suffix:format-button-suffix
+                                      "
+                                      @click=${this.handleFormatToggle}
+                                      @pc-focus=${this.stopNestedEventPropagation}
+                                      @pc-blur=${this.stopNestedEventPropagation}
+                                  >
+                                      ${this.setLetterCase(this.format)}
+                                  </pc-button>
+                              `}
+                        ${bt?w`
+                                  <pc-button
+                                      part="eyedropper-button"
+                                      size="small"
+                                      variant="outlined"
+                                      exportparts="
+                                          base:eyedropper-button-base,
+                                          prefix:eyedropper-button-prefix,
+                                          label:eyedropper-button-label,
+                                          suffix:eyedropper-button-suffix,
+                                      "
+                                      @click=${this.handleEyeDropper}
+                                      @pc-focus=${this.stopNestedEventPropagation}
+                                      @pc-blur=${this.stopNestedEventPropagation}
+                                  >
+                                      <pc-icon
+                                          library="system"
+                                          icon-style="solid"
+                                          name="eye-dropper"
+                                          label=${this.localize.term("pickAColorFromTheScreen")}
+                                      ></pc-icon>
+                                  </pc-button>
+                              `:""}
+                    </pc-button-group>
+                </div>
+
+                ${p.length>0?w`
+                          <div part="swatches" class="swatches">
+                              ${p.map(u=>{let H=this.parseColor(u);return H?w`
+                                      <div
+                                          part="swatch"
+                                          class="swatch pixel-background"
+                                          tabindex=${D(this.disabled?void 0:"0")}
+                                          role="button"
+                                          aria-label=${u}
+                                          @click=${()=>this.selectSwatch(u)}
+                                          @keydown=${mt=>!this.disabled&&mt.key==="Enter"&&this.setColor(H.hexa)}
+                                      >
+                                          <div
+                                              class="swatch-color"
+                                              style=${k({backgroundColor:H.hexa})}
+                                          ></div>
+                                      </div>
+                                  `:(console.error(`Unable to parse this swatch colour: ${u}`,this),"")})}
+                          </div>
+                      `:""}
+                ${this.inline?w`
+                          <slot class="pc-visually-hidden" name="hint">
+                              ${this.hint}
+                          </slot>
+                      `:""}
+            </div>
+        `;return this.inline?b:w`
+            <label
+                part="label"
+                class="label"
+                id="label"
+                aria-hidden=${s?"false":"true"}
+            >
+                <slot name="label">${this.label}</slot>
+            </label>
+            <pc-popup
+                class="color-popup"
+                part="popup"
+                placement="bottom-start"
+                distance="0"
+                skidding="0"
+                sync="width"
+                flip
+                flip-fallback-strategy="best-fit"
+                shift
+                shift-padding="10"
+                aria-disabled=${this.disabled?"true":"false"}
+            >
+                <button
+                    type="button"
+                    part="trigger"
+                    slot="anchor"
+                    class=${S({"popup-trigger":!0,empty:this.isEmpty,focused:this.hasFocus,"pixel-background":!0})}
+                    style=${k({color:this.getHexString(this.hue,this.saturation,this.brightness,this.alpha)})}
+                    .disabled=${this.disabled}
+                    aria-labelledby="label"
+                    @click=${this.handleTriggerClick}
+                    @keydown=${this.handleTriggerKeyDown}
+                    @keyup=${this.handleTriggerKeyUp}
+                ></button>
+
+                ${b}
+            </pc-popup>
+
+            <slot
+                class=${S({"has-hint":a})}
+                part="hint"
+                id="hint"
+                name="hint"
+                aria-hidden=${a?"false":"true"}
+            >
+                ${this.hint}
+            </slot>
+        `}};l.css=[st,tt,gt],l.dependencies={"pc-button":et,"pc-button-group":it,"pc-icon":Q,"pc-input":nt,"pc-popup":ot},h([E('[part~="base"]')],l.prototype,"base",2),h([E('[part~="input"]')],l.prototype,"input",2),h([E('[part~="popup"]')],l.prototype,"popup",2),h([E('[part~="preview"]')],l.prototype,"previewButton",2),h([E('[part~="trigger"]')],l.prototype,"trigger",2),h([x()],l.prototype,"hasFocus",2),h([x()],l.prototype,"isDraggingGridHandle",2),h([x()],l.prototype,"isEmpty",2),h([x()],l.prototype,"inputValue",2),h([x()],l.prototype,"hue",2),h([x()],l.prototype,"saturation",2),h([x()],l.prototype,"brightness",2),h([x()],l.prototype,"alpha",2),h([f()],l.prototype,"value",2),h([rt()],l.prototype,"defaultValue",2),h([f()],l.prototype,"label",2),h([f()],l.prototype,"hint",2),h([f()],l.prototype,"format",2),h([f({type:Boolean,reflect:!0})],l.prototype,"inline",2),h([f({reflect:!0})],l.prototype,"size",2),h([f({attribute:"no-format-toggle",type:Boolean})],l.prototype,"noFormatToggle",2),h([f()],l.prototype,"name",2),h([f({type:Boolean,reflect:!0})],l.prototype,"disabled",2),h([f({type:Boolean,reflect:!0})],l.prototype,"open",2),h([f({type:Boolean})],l.prototype,"opacity",2),h([f({type:Boolean})],l.prototype,"uppercase",2),h([f()],l.prototype,"swatches",2),h([f({reflect:!0})],l.prototype,"form",2),h([f({type:Boolean,reflect:!0})],l.prototype,"required",2),h([Z({passive:!1})],l.prototype,"handleTouchMove",1),h([T("format",{waitUntilFirstUpdate:!0})],l.prototype,"handleFormatChange",1),h([T("opacity",{waitUntilFirstUpdate:!0})],l.prototype,"handleOpacityChange",1),h([T("value")],l.prototype,"handleValueChange",1),h([T("open",{waitUntilFirstUpdate:!0})],l.prototype,"handleOpenChange",1),l=h([W("pc-color-picker")],l);export{l as a};