@luzmo/lucero 0.0.39 → 1.0.1-alpha.0

package/components/color-controller-_ZwyhvaU.cjs

@@ -0,0 +1,18 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";var tr=Object.defineProperty;var rr=(t,e,r)=>e in t?tr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r;var Pe=(t,e,r)=>rr(t,typeof e!="symbol"?e+"":e,r);function x(t,e){let r=t.length;Array.isArray(t[0])||(t=[t]),Array.isArray(e[0])||(e=e.map(i=>[i]));let n=e[0].length,s=e[0].map((i,o)=>e.map(l=>l[o])),a=t.map(i=>s.map(o=>{let l=0;if(!Array.isArray(i)){for(let c of o)l+=i*c;return l}for(let c=0;c<i.length;c++)l+=i[c]*(o[c]||0);return l}));return r===1&&(a=a[0]),n===1?a.map(i=>i[0]):a}function de(t){return j(t)==="string"}function j(t){return(Object.prototype.toString.call(t).match(/^\[object\s+(.*?)\]$/)[1]||"").toLowerCase()}function ve(t,{precision:e,unit:r}){return q(t)?"none":f0(t,e)+(r??"")}function q(t){return Number.isNaN(t)||t instanceof Number&&(t==null?void 0:t.none)}function N(t){return q(t)?0:t}function f0(t,e){if(t===0)return 0;let r=~~t,n=0;r&&e&&(n=~~Math.log10(Math.abs(r))+1);const s=10**(e-n);return Math.floor(t*s+.5)/s}const nr={deg:1,grad:.9,rad:180/Math.PI,turn:360};function g0(t){if(!t)return;t=t.trim();const e=/^([a-z]+)\((.+?)\)$/i,r=/^-?[\d.]+$/,n=/%|deg|g?rad|turn$/,s=/\/?\s*(none|[-\w.]+(?:%|deg|g?rad|turn)?)/g;let a=t.match(e);if(a){let i=[];return a[2].replace(s,(o,l)=>{let c=l.match(n),u=l;if(c){let h=c[0],d=u.slice(0,-h.length);h==="%"?(u=new Number(d/100),u.type="<percentage>"):(u=new Number(d*nr[h]),u.type="<angle>",u.unit=h)}else r.test(u)?(u=new Number(u),u.type="<number>"):u==="none"&&(u=new Number(NaN),u.none=!0);o.startsWith("/")&&(u=u instanceof Number?u:new Number(u),u.alpha=!0),typeof u=="object"&&u instanceof Number&&(u.raw=l),i.push(u)}),{name:a[1].toLowerCase(),rawName:a[1],rawArgs:a[2],args:i}}}function m0(t){return t[t.length-1]}function ce(t,e,r){return isNaN(t)?e:isNaN(e)?t:t+(e-t)*r}function p0(t,e,r){return(r-t)/(e-t)}function Ke(t,e,r){return ce(e[0],e[1],p0(t[0],t[1],r))}function b0(t){return t.map(e=>e.split("|").map(r=>{r=r.trim();let n=r.match(/^(<[a-z]+>)\[(-?[.\d]+),\s*(-?[.\d]+)\]?$/);if(n){let s=new String(n[1]);return s.range=[+n[2],+n[3]],s}return r}))}function M0(t,e,r){return Math.max(Math.min(r,e),t)}function Ne(t,e){return Math.sign(t)===Math.sign(e)?t:-t}function T(t,e){return Ne(Math.abs(t)**e,t)}function et(t,e){return e===0?0:t/e}function w0(t,e,r=0,n=t.length){for(;r<n;){const s=r+n>>1;t[s]<e?r=s+1:n=s}return r}var sr=Object.freeze({__proto__:null,bisectLeft:w0,clamp:M0,copySign:Ne,interpolate:ce,interpolateInv:p0,isNone:q,isString:de,last:m0,mapRange:Ke,multiplyMatrices:x,parseCoordGrammar:b0,parseFunction:g0,serializeNumber:ve,skipNone:N,spow:T,toPrecision:f0,type:j,zdiv:et});class ar{add(e,r,n){if(typeof arguments[0]!="string"){for(var e in arguments[0])this.add(e,arguments[0][e],arguments[1]);return}(Array.isArray(e)?e:[e]).forEach(function(s){this[s]=this[s]||[],r&&this[s][n?"unshift":"push"](r)},this)}run(e,r){this[e]=this[e]||[],this[e].forEach(function(n){n.call(r&&r.context?r.context:r,r)})}}const F=new ar;var u0,h0,d0,k={gamut_mapping:"css",precision:5,deltaE:"76",verbose:((d0=(h0=(u0=globalThis==null?void 0:globalThis.process)==null?void 0:u0.env)==null?void 0:h0.NODE_ENV)==null?void 0:d0.toLowerCase())!=="test",warn:function(e){var r,n;this.verbose&&((n=(r=globalThis==null?void 0:globalThis.console)==null?void 0:r.warn)==null||n.call(r,e))}};const z={D50:[.3457/.3585,1,(1-.3457-.3585)/.3585],D65:[.3127/.329,1,(1-.3127-.329)/.329]};function Fe(t){return Array.isArray(t)?t:z[t]}function xe(t,e,r,n={}){if(t=Fe(t),e=Fe(e),!t||!e)throw new TypeError(`Missing white point to convert ${t?"":"from"}${!t&&!e?"/":""}${e?"":"to"}`);if(t===e)return r;let s={W1:t,W2:e,XYZ:r,options:n};if(F.run("chromatic-adaptation-start",s),s.M||(s.W1===z.D65&&s.W2===z.D50?s.M=[[1.0479297925449969,.022946870601609652,-.05019226628920524],[.02962780877005599,.9904344267538799,-.017073799063418826],[-.009243040646204504,.015055191490298152,.7518742814281371]]:s.W1===z.D50&&s.W2===z.D65&&(s.M=[[.955473421488075,-.02309845494876471,.06325924320057072],[-.0283697093338637,1.0099953980813041,.021041441191917323],[.012314014864481998,-.020507649298898964,1.330365926242124]])),F.run("chromatic-adaptation-end",s),s.M)return x(s.M,s.XYZ);throw new TypeError("Only Bradford CAT with white points D50 and D65 supported for now.")}const ir=new Set(["<number>","<percentage>","<angle>"]);function ft(t,e,r,n){return Object.entries(t.coords).map(([a,i],o)=>{let l=e.coordGrammar[o],c=n[o],u=c==null?void 0:c.type,h;if(c.none?h=l.find(g=>ir.has(g)):h=l.find(g=>g==u),!h){let g=i.name||a;throw new TypeError(`${u??c.raw} not allowed for ${g} in ${r}()`)}let d=h.range;u==="<percentage>"&&(d||(d=[0,1]));let p=i.range||i.refRange;return d&&p&&(n[o]=Ke(d,p,n[o])),h})}function y0(t,{meta:e}={}){var n,s,a,i;let r={str:(n=String(t))==null?void 0:n.trim()};if(F.run("parse-start",r),r.color)return r.color;if(r.parsed=g0(r.str),r.parsed){let o=r.parsed.name;if(o==="color"){let l=r.parsed.args.shift(),c=l.startsWith("--")?l.substring(2):`--${l}`,u=[l,c],h=r.parsed.rawArgs.indexOf("/")>0?r.parsed.args.pop():1;for(let g of m.all){let f=g.getFormat("color");if(f&&(u.includes(f.id)||(s=f.ids)!=null&&s.filter(b=>u.includes(b)).length)){const b=Object.keys(g.coords).map((w,y)=>r.parsed.args[y]||0);let C;return f.coordGrammar&&(C=ft(g,f,"color",b)),e&&Object.assign(e,{formatId:"color",types:C}),f.id.startsWith("--")&&!l.startsWith("--")&&k.warn(`${g.name} is a non-standard space and not currently supported in the CSS spec. Use prefixed color(${f.id}) instead of color(${l}).`),l.startsWith("--")&&!f.id.startsWith("--")&&k.warn(`${g.name} is a standard space and supported in the CSS spec. Use color(${f.id}) instead of prefixed color(${l}).`),{spaceId:g.id,coords:b,alpha:h}}}let d="",p=l in m.registry?l:c;if(p in m.registry){let g=(i=(a=m.registry[p].formats)==null?void 0:a.color)==null?void 0:i.id;g&&(d=`Did you mean color(${g})?`)}throw new TypeError(`Cannot parse color(${l}). `+(d||"Missing a plugin?"))}else for(let l of m.all){let c=l.getFormat(o);if(c&&c.type==="function"){let u=1;(c.lastAlpha||m0(r.parsed.args).alpha)&&(u=r.parsed.args.pop());let h=r.parsed.args,d;return c.coordGrammar&&(d=ft(l,c,o,h)),e&&Object.assign(e,{formatId:c.name,types:d}),{spaceId:l.id,coords:h,alpha:u}}}}else for(let o of m.all)for(let l in o.formats){let c=o.formats[l];if(c.type!=="custom"||c.test&&!c.test(r.str))continue;let u=c.parse(r.str);if(u)return u.alpha??(u.alpha=1),e&&(e.formatId=l),u}throw new TypeError(`Could not parse ${t} as a color. Missing a plugin?`)}function M(t){if(Array.isArray(t))return t.map(M);if(!t)throw new TypeError("Empty color reference");de(t)&&(t=y0(t));let e=t.space||t.spaceId;return e instanceof m||(t.space=m.get(e)),t.alpha===void 0&&(t.alpha=1),t}const or=75e-6,P=class P{constructor(e){var s;this.id=e.id,this.name=e.name,this.base=e.base?P.get(e.base):null,this.aliases=e.aliases,this.base&&(this.fromBase=e.fromBase,this.toBase=e.toBase);let r=e.coords??this.base.coords;for(let a in r)"name"in r[a]||(r[a].name=a);this.coords=r;let n=e.white??this.base.white??"D65";this.white=Fe(n),this.formats=e.formats??{};for(let a in this.formats){let i=this.formats[a];i.type||(i.type="function"),i.name||(i.name=a)}(s=this.formats.color)!=null&&s.id||(this.formats.color={...this.formats.color??{},id:e.cssId||this.id}),e.gamutSpace?this.gamutSpace=e.gamutSpace==="self"?this:P.get(e.gamutSpace):this.isPolar?this.gamutSpace=this.base:this.gamutSpace=this,this.gamutSpace.isUnbounded&&(this.inGamut=(a,i)=>!0),this.referred=e.referred,Object.defineProperty(this,"path",{value:lr(this).reverse(),writable:!1,enumerable:!0,configurable:!0}),F.run("colorspace-init-end",this)}inGamut(e,{epsilon:r=or}={}){if(!this.equals(this.gamutSpace))return e=this.to(this.gamutSpace,e),this.gamutSpace.inGamut(e,{epsilon:r});let n=Object.values(this.coords);return e.every((s,a)=>{let i=n[a];if(i.type!=="angle"&&i.range){if(Number.isNaN(s))return!0;let[o,l]=i.range;return(o===void 0||s>=o-r)&&(l===void 0||s<=l+r)}return!0})}get isUnbounded(){return Object.values(this.coords).every(e=>!("range"in e))}get cssId(){var e,r;return((r=(e=this.formats)==null?void 0:e.color)==null?void 0:r.id)||this.id}get isPolar(){for(let e in this.coords)if(this.coords[e].type==="angle")return!0;return!1}getFormat(e){if(typeof e=="object")return e=gt(e,this),e;let r;return e==="default"?r=Object.values(this.formats)[0]:r=this.formats[e],r?(r=gt(r,this),r):null}equals(e){return e?this===e||this.id===e||this.id===e.id:!1}to(e,r){if(arguments.length===1){const o=M(e);[e,r]=[o.space,o.coords]}if(e=P.get(e),this.equals(e))return r;r=r.map(o=>Number.isNaN(o)?0:o);let n=this.path,s=e.path,a,i;for(let o=0;o<n.length&&n[o].equals(s[o]);o++)a=n[o],i=o;if(!a)throw new Error(`Cannot convert between color spaces ${this} and ${e}: no connection space was found`);for(let o=n.length-1;o>i;o--)r=n[o].toBase(r);for(let o=i+1;o<s.length;o++)r=s[o].fromBase(r);return r}from(e,r){if(arguments.length===1){const n=M(e);[e,r]=[n.space,n.coords]}return e=P.get(e),e.to(this,r)}toString(){return`${this.name} (${this.id})`}getMinCoords(){let e=[];for(let r in this.coords){let n=this.coords[r],s=n.range||n.refRange;e.push((s==null?void 0:s.min)??0)}return e}static get all(){return[...new Set(Object.values(P.registry))]}static register(e,r){if(arguments.length===1&&(r=arguments[0],e=r.id),r=this.get(r),this.registry[e]&&this.registry[e]!==r)throw new Error(`Duplicate color space registration: '${e}'`);if(this.registry[e]=r,arguments.length===1&&r.aliases)for(let n of r.aliases)this.register(n,r);return r}static get(e,...r){if(!e||e instanceof P)return e;if(j(e)==="string"){let s=P.registry[e.toLowerCase()];if(!s)throw new TypeError(`No color space found with id = "${e}"`);return s}if(r.length)return P.get(...r);throw new TypeError(`${e} is not a valid color space`)}static resolveCoord(e,r){var l;let n=j(e),s,a;if(n==="string"?e.includes(".")?[s,a]=e.split("."):[s,a]=[,e]:Array.isArray(e)?[s,a]=e:(s=e.space,a=e.coordId),s=P.get(s),s||(s=r),!s)throw new TypeError(`Cannot resolve coordinate reference ${e}: No color space specified and relative references are not allowed here`);if(n=j(a),n==="number"||n==="string"&&a>=0){let c=Object.entries(s.coords)[a];if(c)return{space:s,id:c[0],index:a,...c[1]}}s=P.get(s);let i=a.toLowerCase(),o=0;for(let c in s.coords){let u=s.coords[c];if(c.toLowerCase()===i||((l=u.name)==null?void 0:l.toLowerCase())===i)return{space:s,id:c,index:o,...u};o++}throw new TypeError(`No "${a}" coordinate found in ${s.name}. Its coordinates are: ${Object.keys(s.coords).join(", ")}`)}};Pe(P,"registry",{}),Pe(P,"DEFAULT_FORMAT",{type:"functions",name:"color"});let m=P;function lr(t){let e=[t];for(let r=t;r=r.base;)e.push(r);return e}function gt(t,{coords:e}={}){if(t.coords&&!t.coordGrammar){t.type||(t.type="function"),t.name||(t.name="color"),t.coordGrammar=b0(t.coords);let r=Object.entries(e).map(([n,s],a)=>{let i=t.coordGrammar[a][0],o=s.range||s.refRange,l=i.range,c="";return i=="<percentage>"?(l=[0,100],c="%"):i=="<angle>"&&(c="deg"),{fromRange:o,toRange:l,suffix:c}});t.serializeCoords=(n,s)=>n.map((a,i)=>{let{fromRange:o,toRange:l,suffix:c}=r[i];return o&&l&&(a=Ke(o,l,a)),a=ve(a,{precision:s,unit:c}),a})}return t}var A=new m({id:"xyz-d65",name:"XYZ D65",coords:{x:{name:"X"},y:{name:"Y"},z:{name:"Z"}},white:"D65",formats:{color:{ids:["xyz-d65","xyz"]}},aliases:["xyz"]});class E extends m{constructor(e){e.coords||(e.coords={r:{range:[0,1],name:"Red"},g:{range:[0,1],name:"Green"},b:{range:[0,1],name:"Blue"}}),e.base||(e.base=A),e.toXYZ_M&&e.fromXYZ_M&&(e.toBase??(e.toBase=r=>{let n=x(e.toXYZ_M,r);return this.white!==this.base.white&&(n=xe(this.white,this.base.white,n)),n}),e.fromBase??(e.fromBase=r=>(r=xe(this.base.white,this.white,r),x(e.fromXYZ_M,r)))),e.referred??(e.referred="display"),super(e)}}function fe(t,e){return t=M(t),!e||t.space.equals(e)?t.coords.slice():(e=m.get(e),e.from(t))}function O(t,e){t=M(t);let{space:r,index:n}=m.resolveCoord(e,t.space);return fe(t,r)[n]}function tt(t,e,r){return t=M(t),e=m.get(e),t.coords=e.to(t.space,r),t}tt.returns="color";function X(t,e,r){if(t=M(t),arguments.length===2&&j(arguments[1])==="object"){let n=arguments[1];for(let s in n)X(t,s,n[s])}else{typeof r=="function"&&(r=r(O(t,e)));let{space:n,index:s}=m.resolveCoord(e,t.space),a=fe(t,n);a[s]=r,tt(t,n,a)}return t}X.returns="color";var rt=new m({id:"xyz-d50",name:"XYZ D50",white:"D50",base:A,fromBase:t=>xe(A.white,"D50",t),toBase:t=>xe("D50",A.white,t)});const cr=216/24389,mt=24/116,pe=24389/27;let Ee=z.D50;var H=new m({id:"lab",name:"Lab",coords:{l:{refRange:[0,100],name:"Lightness"},a:{refRange:[-125,125]},b:{refRange:[-125,125]}},white:Ee,base:rt,fromBase(t){let r=t.map((n,s)=>n/Ee[s]).map(n=>n>cr?Math.cbrt(n):(pe*n+16)/116);return[116*r[1]-16,500*(r[0]-r[1]),200*(r[1]-r[2])]},toBase(t){let e=[];return e[1]=(t[0]+16)/116,e[0]=t[1]/500+e[1],e[2]=e[1]-t[2]/200,[e[0]>mt?Math.pow(e[0],3):(116*e[0]-16)/pe,t[0]>8?Math.pow((t[0]+16)/116,3):t[0]/pe,e[2]>mt?Math.pow(e[2],3):(116*e[2]-16)/pe].map((n,s)=>n*Ee[s])},formats:{lab:{coords:["<number> | <percentage>","<number> | <percentage>[-1,1]","<number> | <percentage>[-1,1]"]}}});function Y(t){return(t%360+360)%360}function ur(t,e){if(t==="raw")return e;let[r,n]=e.map(Y),s=n-r;return t==="increasing"?s<0&&(n+=360):t==="decreasing"?s>0&&(r+=360):t==="longer"?-180<s&&s<180&&(s>0?r+=360:n+=360):t==="shorter"&&(s>180?r+=360:s<-180&&(n+=360)),[r,n]}var ue=new m({id:"lch",name:"LCH",coords:{l:{refRange:[0,100],name:"Lightness"},c:{refRange:[0,150],name:"Chroma"},h:{refRange:[0,360],type:"angle",name:"Hue"}},base:H,fromBase(t){let[e,r,n]=t,s;const a=.02;return Math.abs(r)<a&&Math.abs(n)<a?s=NaN:s=Math.atan2(n,r)*180/Math.PI,[e,Math.sqrt(r**2+n**2),Y(s)]},toBase(t){let[e,r,n]=t;return r<0&&(r=0),isNaN(n)&&(n=0),[e,r*Math.cos(n*Math.PI/180),r*Math.sin(n*Math.PI/180)]},formats:{lch:{coords:["<number> | <percentage>","<number> | <percentage>","<number> | <angle>"]}}});const pt=25**7,Le=Math.PI,bt=180/Le,Q=Le/180;function Mt(t){const e=t*t;return e*e*e*t}function C0(t,e,{kL:r=1,kC:n=1,kH:s=1}={}){[t,e]=M([t,e]);let[a,i,o]=H.from(t),l=ue.from(H,[a,i,o])[1],[c,u,h]=H.from(e),d=ue.from(H,[c,u,h])[1];l<0&&(l=0),d<0&&(d=0);let p=(l+d)/2,g=Mt(p),f=.5*(1-Math.sqrt(g/(g+pt))),b=(1+f)*i,C=(1+f)*u,w=Math.sqrt(b**2+o**2),y=Math.sqrt(C**2+h**2),S=b===0&&o===0?0:Math.atan2(o,b),$=C===0&&h===0?0:Math.atan2(h,C);S<0&&(S+=2*Le),$<0&&($+=2*Le),S*=bt,$*=bt;let L=c-a,B=y-w,R=$-S,se=S+$,ot=Math.abs(R),ae;w*y===0?ae=0:ot<=180?ae=R:R>180?ae=R-360:R<-180?ae=R+360:k.warn("the unthinkable has happened");let lt=2*Math.sqrt(y*w)*Math.sin(ae*Q/2),Q0=(a+c)/2,ze=(w+y)/2,ct=Mt(ze),D;w*y===0?D=se:ot<=180?D=se/2:se<360?D=(se+360)/2:D=(se-360)/2;let ut=(Q0-50)**2,V0=1+.015*ut/Math.sqrt(20+ut),ht=1+.045*ze,ie=1;ie-=.17*Math.cos((D-30)*Q),ie+=.24*Math.cos(2*D*Q),ie+=.32*Math.cos((3*D+6)*Q),ie-=.2*Math.cos((4*D-63)*Q);let dt=1+.015*ze*ie,U0=30*Math.exp(-1*((D-275)/25)**2),K0=2*Math.sqrt(ct/(ct+pt)),er=-1*Math.sin(2*U0*Q)*K0,me=(L/(r*V0))**2;return me+=(B/(n*ht))**2,me+=(lt/(s*dt))**2,me+=er*(B/(n*ht))*(lt/(s*dt)),Math.sqrt(me)}const hr=[[.819022437996703,.3619062600528904,-.1288737815209879],[.0329836539323885,.9292868615863434,.0361446663506424],[.0481771893596242,.2642395317527308,.6335478284694309]],dr=[[1.2268798758459243,-.5578149944602171,.2813910456659647],[-.0405757452148008,1.112286803280317,-.0717110580655164],[-.0763729366746601,-.4214933324022432,1.5869240198367816]],fr=[[.210454268309314,.7936177747023054,-.0040720430116193],[1.9779985324311684,-2.42859224204858,.450593709617411],[.0259040424655478,.7827717124575296,-.8086757549230774]],gr=[[1,.3963377773761749,.2158037573099136],[1,-.1055613458156586,-.0638541728258133],[1,-.0894841775298119,-1.2914855480194092]];var ee=new m({id:"oklab",name:"Oklab",coords:{l:{refRange:[0,1],name:"Lightness"},a:{refRange:[-.4,.4]},b:{refRange:[-.4,.4]}},white:"D65",base:A,fromBase(t){let r=x(hr,t).map(n=>Math.cbrt(n));return x(fr,r)},toBase(t){let r=x(gr,t).map(n=>n**3);return x(dr,r)},formats:{oklab:{coords:["<percentage> | <number>","<number> | <percentage>[-1,1]","<number> | <percentage>[-1,1]"]}}});function Ze(t,e){[t,e]=M([t,e]);let[r,n,s]=ee.from(t),[a,i,o]=ee.from(e),l=r-a,c=n-i,u=s-o;return Math.sqrt(l**2+c**2+u**2)}const mr=75e-6;function W(t,e,{epsilon:r=mr}={}){t=M(t),e||(e=t.space),e=m.get(e);let n=t.coords;return e!==t.space&&(n=e.from(t)),e.inGamut(n,{epsilon:r})}function te(t){return{space:t.space,coords:t.coords.slice(),alpha:t.alpha}}function _0(t,e,r="lab"){r=m.get(r);let n=r.from(t),s=r.from(e);return Math.sqrt(n.reduce((a,i,o)=>{let l=s[o];return isNaN(i)||isNaN(l)?a:a+(l-i)**2},0))}function pr(t,e){return _0(t,e,"lab")}const br=Math.PI,wt=br/180;function Mr(t,e,{l:r=2,c:n=1}={}){[t,e]=M([t,e]);let[s,a,i]=H.from(t),[,o,l]=ue.from(H,[s,a,i]),[c,u,h]=H.from(e),d=ue.from(H,[c,u,h])[1];o<0&&(o=0),d<0&&(d=0);let p=s-c,g=o-d,f=a-u,b=i-h,C=f**2+b**2-g**2,w=.511;s>=16&&(w=.040975*s/(1+.01765*s));let y=.0638*o/(1+.0131*o)+.638,S;Number.isNaN(l)&&(l=0),l>=164&&l<=345?S=.56+Math.abs(.2*Math.cos((l+168)*wt)):S=.36+Math.abs(.4*Math.cos((l+35)*wt));let $=Math.pow(o,4),L=Math.sqrt($/($+1900)),B=y*(L*S+1-L),R=(p/(r*w))**2;return R+=(g/(n*y))**2,R+=C/B**2,Math.sqrt(R)}const yt=203;var nt=new m({id:"xyz-abs-d65",cssId:"--xyz-abs-d65",name:"Absolute XYZ D65",coords:{x:{refRange:[0,9504.7],name:"Xa"},y:{refRange:[0,1e4],name:"Ya"},z:{refRange:[0,10888.3],name:"Za"}},base:A,fromBase(t){return t.map(e=>Math.max(e*yt,0))},toBase(t){return t.map(e=>Math.max(e/yt,0))}});const be=1.15,Me=.66,Ct=2610/2**14,wr=2**14/2610,_t=3424/2**12,St=2413/2**7,$t=2392/2**7,yr=1.7*2523/2**5,vt=2**5/(1.7*2523),we=-.56,Oe=16295499532821565e-27,Cr=[[.41478972,.579999,.014648],[-.20151,1.120649,.0531008],[-.0166008,.2648,.6684799]],_r=[[1.9242264357876067,-1.0047923125953657,.037651404030618],[.35031676209499907,.7264811939316552,-.06538442294808501],[-.09098281098284752,-.3127282905230739,1.5227665613052603]],Sr=[[.5,.5,0],[3.524,-4.066708,.542708],[.199076,1.096799,-1.295875]],$r=[[1,.1386050432715393,.05804731615611886],[.9999999999999999,-.1386050432715393,-.05804731615611886],[.9999999999999998,-.09601924202631895,-.8118918960560388]];var S0=new m({id:"jzazbz",name:"Jzazbz",coords:{jz:{refRange:[0,1],name:"Jz"},az:{refRange:[-.5,.5]},bz:{refRange:[-.5,.5]}},base:nt,fromBase(t){let[e,r,n]=t,s=be*e-(be-1)*n,a=Me*r-(Me-1)*e,o=x(Cr,[s,a,n]).map(function(d){let p=_t+St*(d/1e4)**Ct,g=1+$t*(d/1e4)**Ct;return(p/g)**yr}),[l,c,u]=x(Sr,o);return[(1+we)*l/(1+we*l)-Oe,c,u]},toBase(t){let[e,r,n]=t,s=(e+Oe)/(1+we-we*(e+Oe)),i=x($r,[s,r,n]).map(function(d){let p=_t-d**vt,g=$t*d**vt-St;return 1e4*(p/g)**wr}),[o,l,c]=x(_r,i),u=(o+(be-1)*c)/be,h=(l+(Me-1)*u)/Me;return[u,h,c]},formats:{color:{coords:["<number> | <percentage>","<number> | <percentage>[-1,1]","<number> | <percentage>[-1,1]"]}}}),Ge=new m({id:"jzczhz",name:"JzCzHz",coords:{jz:{refRange:[0,1],name:"Jz"},cz:{refRange:[0,1],name:"Chroma"},hz:{refRange:[0,360],type:"angle",name:"Hue"}},base:S0,fromBase(t){let[e,r,n]=t,s;const a=2e-4;return Math.abs(r)<a&&Math.abs(n)<a?s=NaN:s=Math.atan2(n,r)*180/Math.PI,[e,Math.sqrt(r**2+n**2),Y(s)]},toBase(t){return[t[0],t[1]*Math.cos(t[2]*Math.PI/180),t[1]*Math.sin(t[2]*Math.PI/180)]}});function vr(t,e){[t,e]=M([t,e]);let[r,n,s]=Ge.from(t),[a,i,o]=Ge.from(e),l=r-a,c=n-i;Number.isNaN(s)&&Number.isNaN(o)?(s=0,o=0):Number.isNaN(s)?s=o:Number.isNaN(o)&&(o=s);let u=s-o,h=2*Math.sqrt(n*i)*Math.sin(u/2*(Math.PI/180));return Math.sqrt(l**2+c**2+h**2)}const $0=3424/4096,v0=2413/128,x0=2392/128,xt=2610/16384,xr=2523/32,Lr=16384/2610,Lt=32/2523,Rr=[[.3592832590121217,.6976051147779502,-.035891593232029],[-.1920808463704993,1.100476797037432,.0753748658519118],[.0070797844607479,.0748396662186362,.8433265453898765]],Nr=[[2048/4096,2048/4096,0],[6610/4096,-13613/4096,7003/4096],[17933/4096,-17390/4096,-543/4096]],Ir=[[.9999999999999998,.0086090370379328,.111029625003026],[.9999999999999998,-.0086090370379328,-.1110296250030259],[.9999999999999998,.5600313357106791,-.3206271749873188]],Ar=[[2.0701522183894223,-1.3263473389671563,.2066510476294053],[.3647385209748072,.6805660249472273,-.0453045459220347],[-.0497472075358123,-.0492609666966131,1.1880659249923042]];var Je=new m({id:"ictcp",name:"ICTCP",coords:{i:{refRange:[0,1],name:"I"},ct:{refRange:[-.5,.5],name:"CT"},cp:{refRange:[-.5,.5],name:"CP"}},base:nt,fromBase(t){let e=x(Rr,t);return Br(e)},toBase(t){let e=zr(t);return x(Ar,e)}});function Br(t){let e=t.map(function(r){let n=$0+v0*(r/1e4)**xt,s=1+x0*(r/1e4)**xt;return(n/s)**xr});return x(Nr,e)}function zr(t){return x(Ir,t).map(function(n){let s=Math.max(n**Lt-$0,0),a=v0-x0*n**Lt;return 1e4*(s/a)**Lr})}function Pr(t,e){[t,e]=M([t,e]);let[r,n,s]=Je.from(t),[a,i,o]=Je.from(e);return 720*Math.sqrt((r-a)**2+.25*(n-i)**2+(s-o)**2)}const Er=z.D65,L0=.42,Rt=1/L0,He=2*Math.PI,R0=[[.401288,.650173,-.051461],[-.250268,1.204414,.045854],[-.002079,.048952,.953127]],Or=[[1.8620678550872327,-1.0112546305316843,.14918677544445175],[.38752654323613717,.6214474419314753,-.008973985167612518],[-.015841498849333856,-.03412293802851557,1.0499644368778496]],Hr=[[460,451,288],[460,-891,-261],[460,-220,-6300]],kr={dark:[.8,.525,.8],dim:[.9,.59,.9],average:[1,.69,1]},J={h:[20.14,90,164.25,237.53,380.14],e:[.8,.7,1,1.2,.8],H:[0,100,200,300,400]},Tr=180/Math.PI,Nt=Math.PI/180;function N0(t,e){return t.map(n=>{const s=T(e*Math.abs(n)*.01,L0);return 400*Ne(s,n)/(s+27.13)})}function Yr(t,e){const r=100/e*27.13**Rt;return t.map(n=>{const s=Math.abs(n);return Ne(r*T(s/(400-s),Rt),n)})}function Dr(t){let e=Y(t);e<=J.h[0]&&(e+=360);const r=w0(J.h,e)-1,[n,s]=J.h.slice(r,r+2),[a,i]=J.e.slice(r,r+2),o=J.H[r],l=(e-n)/a;return o+100*l/(l+(s-e)/i)}function Xr(t){let e=(t%400+400)%400;const r=Math.floor(.01*e);e=e%100;const[n,s]=J.h.slice(r,r+2),[a,i]=J.e.slice(r,r+2);return Y((e*(i*n-a*s)-100*n*i)/(e*(i-a)-100*i))}function I0(t,e,r,n,s){const a={};a.discounting=s,a.refWhite=t,a.surround=n;const i=t.map(f=>f*100);a.la=e,a.yb=r;const o=i[1],l=x(R0,i);n=kr[a.surround];const c=n[0];a.c=n[1],a.nc=n[2];const h=(1/(5*a.la+1))**4;a.fl=h*a.la+.1*(1-h)*(1-h)*Math.cbrt(5*a.la),a.flRoot=a.fl**.25,a.n=a.yb/o,a.z=1.48+Math.sqrt(a.n),a.nbb=.725*a.n**-.2,a.ncb=a.nbb;const d=Math.max(Math.min(c*(1-1/3.6*Math.exp((-a.la-42)/92)),1),0);a.dRgb=l.map(f=>ce(1,o/f,d)),a.dRgbInv=a.dRgb.map(f=>1/f);const p=l.map((f,b)=>f*a.dRgb[b]),g=N0(p,a.fl);return a.aW=a.nbb*(2*g[0]+g[1]+.05*g[2]),a}const It=I0(Er,64/Math.PI*.2,20,"average",!1);function We(t,e){if(!(t.J!==void 0^t.Q!==void 0))throw new Error("Conversion requires one and only one: 'J' or 'Q'");if(!(t.C!==void 0^t.M!==void 0^t.s!==void 0))throw new Error("Conversion requires one and only one: 'C', 'M' or 's'");if(!(t.h!==void 0^t.H!==void 0))throw new Error("Conversion requires one and only one: 'h' or 'H'");if(t.J===0||t.Q===0)return[0,0,0];let r=0;t.h!==void 0?r=Y(t.h)*Nt:r=Xr(t.H)*Nt;const n=Math.cos(r),s=Math.sin(r);let a=0;t.J!==void 0?a=T(t.J,1/2)*.1:t.Q!==void 0&&(a=.25*e.c*t.Q/((e.aW+4)*e.flRoot));let i=0;t.C!==void 0?i=t.C/a:t.M!==void 0?i=t.M/e.flRoot/a:t.s!==void 0&&(i=4e-4*t.s**2*(e.aW+4)/e.c);const o=T(i*Math.pow(1.64-Math.pow(.29,e.n),-.73),10/9),l=.25*(Math.cos(r+2)+3.8),c=e.aW*T(a,2/e.c/e.z),u=5e4/13*e.nc*e.ncb*l,h=c/e.nbb,d=23*(h+.305)*et(o,23*u+o*(11*n+108*s)),p=d*n,g=d*s,f=Yr(x(Hr,[h,p,g]).map(b=>b*1/1403),e.fl);return x(Or,f.map((b,C)=>b*e.dRgbInv[C])).map(b=>b/100)}function A0(t,e){const r=t.map(y=>y*100),n=N0(x(R0,r).map((y,S)=>y*e.dRgb[S]),e.fl),s=n[0]+(-12*n[1]+n[2])/11,a=(n[0]+n[1]-2*n[2])/9,i=(Math.atan2(a,s)%He+He)%He,o=.25*(Math.cos(i+2)+3.8),l=5e4/13*e.nc*e.ncb*et(o*Math.sqrt(s**2+a**2),n[0]+n[1]+1.05*n[2]+.305),c=T(l,.9)*Math.pow(1.64-Math.pow(.29,e.n),.73),u=e.nbb*(2*n[0]+n[1]+.05*n[2]),h=T(u/e.aW,.5*e.c*e.z),d=100*T(h,2),p=4/e.c*h*(e.aW+4)*e.flRoot,g=c*h,f=g*e.flRoot,b=Y(i*Tr),C=Dr(b),w=50*T(e.c*c/(e.aW+4),1/2);return{J:d,C:g,h:b,s:w,Q:p,M:f,H:C}}var jr=new m({id:"cam16-jmh",cssId:"--cam16-jmh",name:"CAM16-JMh",coords:{j:{refRange:[0,100],name:"J"},m:{refRange:[0,105],name:"Colorfulness"},h:{refRange:[0,360],type:"angle",name:"Hue"}},base:A,fromBase(t){const e=A0(t,It);return[e.J,e.M,e.h]},toBase(t){return We({J:t[0],M:t[1],h:t[2]},It)}});const qr=z.D65,Fr=216/24389,B0=24389/27;function Zr(t){return 116*(t>Fr?Math.cbrt(t):(B0*t+16)/116)-16}function Qe(t){return t>8?Math.pow((t+16)/116,3):t/B0}function Gr(t,e){let[r,n,s]=t,a=[],i=0;if(s===0)return[0,0,0];let o=Qe(s);s>0?i=.00379058511492914*s**2+.608983189401032*s+.9155088574762233:i=9514440756550361e-21*s**2+.08693057439788597*s-21.928975842194614;const l=2e-12,c=15;let u=0,h=1/0;for(;u<=c;){a=We({J:i,C:n,h:r},e);const d=Math.abs(a[1]-o);if(d<h){if(d<=l)return a;h=d}i=i-(a[1]-o)*i/(2*a[1]),u+=1}return We({J:i,C:n,h:r},e)}function Jr(t,e){const r=Zr(t[1]);if(r===0)return[0,0,0];const n=A0(t,st);return[Y(n.h),n.C,r]}const st=I0(qr,200/Math.PI*Qe(50),Qe(50)*100,"average",!1);var he=new m({id:"hct",name:"HCT",coords:{h:{refRange:[0,360],type:"angle",name:"Hue"},c:{refRange:[0,145],name:"Colorfulness"},t:{refRange:[0,100],name:"Tone"}},base:A,fromBase(t){return Jr(t)},toBase(t){return Gr(t,st)},formats:{color:{id:"--hct",coords:["<number> | <angle>","<percentage> | <number>","<percentage> | <number>"]}}});const Wr=Math.PI/180,At=[1,.007,.0228];function Bt(t){t[1]<0&&(t=he.fromBase(he.toBase(t)));const e=Math.log(Math.max(1+At[2]*t[1]*st.flRoot,1))/At[2],r=t[0]*Wr,n=e*Math.cos(r),s=e*Math.sin(r);return[t[2],n,s]}function Qr(t,e){[t,e]=M([t,e]);let[r,n,s]=Bt(he.from(t)),[a,i,o]=Bt(he.from(e));return Math.sqrt((r-a)**2+(n-i)**2+(s-o)**2)}var re={deltaE76:pr,deltaECMC:Mr,deltaE2000:C0,deltaEJz:vr,deltaEITP:Pr,deltaEOK:Ze,deltaEHCT:Qr};function Vr(t){const e=t?Math.floor(Math.log10(Math.abs(t))):0;return Math.max(parseFloat(`1e${e-2}`),1e-6)}const zt={hct:{method:"hct.c",jnd:2,deltaEMethod:"hct",blackWhiteClamp:{}},"hct-tonal":{method:"hct.c",jnd:0,deltaEMethod:"hct",blackWhiteClamp:{channel:"hct.t",min:0,max:100}}};function Z(t,{method:e=k.gamut_mapping,space:r=void 0,deltaEMethod:n="",jnd:s=2,blackWhiteClamp:a={}}={}){if(t=M(t),de(arguments[1])?r=arguments[1]:r||(r=t.space),r=m.get(r),W(t,r,{epsilon:0}))return t;let i;if(e==="css")i=Ur(t,{space:r});else{if(e!=="clip"&&!W(t,r)){Object.prototype.hasOwnProperty.call(zt,e)&&({method:e,jnd:s,deltaEMethod:n,blackWhiteClamp:a}=zt[e]);let o=C0;if(n!==""){for(let c in re)if("deltae"+n.toLowerCase()===c.toLowerCase()){o=re[c];break}}let l=Z(v(t,r),{method:"clip",space:r});if(o(t,l)>s){if(Object.keys(a).length===3){let w=m.resolveCoord(a.channel),y=O(v(t,w.space),w.id);if(q(y)&&(y=0),y>=a.max)return v({space:"xyz-d65",coords:z.D65},t.space);if(y<=a.min)return v({space:"xyz-d65",coords:[0,0,0]},t.space)}let c=m.resolveCoord(e),u=c.space,h=c.id,d=v(t,u);d.coords.forEach((w,y)=>{q(w)&&(d.coords[y]=0)});let g=(c.range||c.refRange)[0],f=Vr(s),b=g,C=O(d,h);for(;C-b>f;){let w=te(d);w=Z(w,{space:r,method:"clip"}),o(d,w)-s<f?b=O(d,h):C=O(d,h),X(d,h,(b+C)/2)}i=v(d,r)}else i=l}else i=v(t,r);if(e==="clip"||!W(i,r,{epsilon:0})){let o=Object.values(r.coords).map(l=>l.range||[]);i.coords=i.coords.map((l,c)=>{let[u,h]=o[c];return u!==void 0&&(l=Math.max(u,l)),h!==void 0&&(l=Math.min(l,h)),l})}}return r!==t.space&&(i=v(i,t.space)),t.coords=i.coords,t}Z.returns="color";const Pt={WHITE:{space:ee,coords:[1,0,0]},BLACK:{space:ee,coords:[0,0,0]}};function Ur(t,{space:e}={}){t=M(t),e||(e=t.space),e=m.get(e);const s=m.get("oklch");if(e.isUnbounded)return v(t,e);const a=v(t,s);let i=a.coords[0];if(i>=1){const g=v(Pt.WHITE,e);return g.alpha=t.alpha,v(g,e)}if(i<=0){const g=v(Pt.BLACK,e);return g.alpha=t.alpha,v(g,e)}if(W(a,e,{epsilon:0}))return v(a,e);function o(g){const f=v(g,e),b=Object.values(e.coords);return f.coords=f.coords.map((C,w)=>{if("range"in b[w]){const[y,S]=b[w].range;return M0(y,C,S)}return C}),f}let l=0,c=a.coords[1],u=!0,h=te(a),d=o(h),p=Ze(d,h);if(p<.02)return d;for(;c-l>1e-4;){const g=(l+c)/2;if(h.coords[1]=g,u&&W(h,e,{epsilon:0}))l=g;else if(d=o(h),p=Ze(d,h),p<.02){if(.02-p<1e-4)break;u=!1,l=g}else c=g}return d}function v(t,e,{inGamut:r}={}){t=M(t),e=m.get(e);let n=e.from(t),s={space:e,coords:n,alpha:t.alpha};return r&&(s=Z(s,r===!0?void 0:r)),s}v.returns="color";function le(t,{precision:e=k.precision,format:r="default",inGamut:n=!0,...s}={}){var l;let a;t=M(t);let i=r;r=t.space.getFormat(r)??t.space.getFormat("default")??m.DEFAULT_FORMAT;let o=t.coords.slice();if(n||(n=r.toGamut),n&&!W(t)&&(o=Z(te(t),n===!0?void 0:n).coords),r.type==="custom")if(s.precision=e,r.serialize)a=r.serialize(o,t.alpha,s);else throw new TypeError(`format ${i} can only be used to parse colors, not for serialization`);else{let c=r.name||"color";r.serializeCoords?o=r.serializeCoords(o,e):e!==null&&(o=o.map(p=>ve(p,{precision:e})));let u=[...o];if(c==="color"){let p=r.id||((l=r.ids)==null?void 0:l[0])||t.space.id;u.unshift(p)}let h=t.alpha;e!==null&&(h=ve(h,{precision:e}));let d=t.alpha>=1||r.noAlpha?"":`${r.commas?",":" /"} ${h}`;a=`${c}(${u.join(r.commas?", ":" ")}${d})`}return a}const Kr=[[.6369580483012914,.14461690358620832,.1688809751641721],[.2627002120112671,.6779980715188708,.05930171646986196],[0,.028072693049087428,1.060985057710791]],en=[[1.716651187971268,-.355670783776392,-.25336628137366],[-.666684351832489,1.616481236634939,.0157685458139111],[.017639857445311,-.042770613257809,.942103121235474]];var Ie=new E({id:"rec2020-linear",cssId:"--rec2020-linear",name:"Linear REC.2020",white:"D65",toXYZ_M:Kr,fromXYZ_M:en});const ye=1.09929682680944,Et=.018053968510807;var z0=new E({id:"rec2020",name:"REC.2020",base:Ie,toBase(t){return t.map(function(e){return e<Et*4.5?e/4.5:Math.pow((e+ye-1)/ye,1/.45)})},fromBase(t){return t.map(function(e){return e>=Et?ye*Math.pow(e,.45)-(ye-1):4.5*e})}});const tn=[[.4865709486482162,.26566769316909306,.1982172852343625],[.2289745640697488,.6917385218365064,.079286914093745],[0,.04511338185890264,1.043944368900976]],rn=[[2.493496911941425,-.9313836179191239,-.40271078445071684],[-.8294889695615747,1.7626640603183463,.023624685841943577],[.03584583024378447,-.07617238926804182,.9568845240076872]];var P0=new E({id:"p3-linear",cssId:"--display-p3-linear",name:"Linear P3",white:"D65",toXYZ_M:tn,fromXYZ_M:rn});const nn=[[.41239079926595934,.357584339383878,.1804807884018343],[.21263900587151027,.715168678767756,.07219231536073371],[.01933081871559182,.11919477979462598,.9505321522496607]],I=[[3.2409699419045226,-1.537383177570094,-.4986107602930034],[-.9692436362808796,1.8759675015077202,.04155505740717559],[.05563007969699366,-.20397695888897652,1.0569715142428786]];var E0=new E({id:"srgb-linear",name:"Linear sRGB",white:"D65",toXYZ_M:nn,fromXYZ_M:I}),Ot={aliceblue:[240/255,248/255,1],antiquewhite:[250/255,235/255,215/255],aqua:[0,1,1],aquamarine:[127/255,1,212/255],azure:[240/255,1,1],beige:[245/255,245/255,220/255],bisque:[1,228/255,196/255],black:[0,0,0],blanchedalmond:[1,235/255,205/255],blue:[0,0,1],blueviolet:[138/255,43/255,226/255],brown:[165/255,42/255,42/255],burlywood:[222/255,184/255,135/255],cadetblue:[95/255,158/255,160/255],chartreuse:[127/255,1,0],chocolate:[210/255,105/255,30/255],coral:[1,127/255,80/255],cornflowerblue:[100/255,149/255,237/255],cornsilk:[1,248/255,220/255],crimson:[220/255,20/255,60/255],cyan:[0,1,1],darkblue:[0,0,139/255],darkcyan:[0,139/255,139/255],darkgoldenrod:[184/255,134/255,11/255],darkgray:[169/255,169/255,169/255],darkgreen:[0,100/255,0],darkgrey:[169/255,169/255,169/255],darkkhaki:[189/255,183/255,107/255],darkmagenta:[139/255,0,139/255],darkolivegreen:[85/255,107/255,47/255],darkorange:[1,140/255,0],darkorchid:[153/255,50/255,204/255],darkred:[139/255,0,0],darksalmon:[233/255,150/255,122/255],darkseagreen:[143/255,188/255,143/255],darkslateblue:[72/255,61/255,139/255],darkslategray:[47/255,79/255,79/255],darkslategrey:[47/255,79/255,79/255],darkturquoise:[0,206/255,209/255],darkviolet:[148/255,0,211/255],deeppink:[1,20/255,147/255],deepskyblue:[0,191/255,1],dimgray:[105/255,105/255,105/255],dimgrey:[105/255,105/255,105/255],dodgerblue:[30/255,144/255,1],firebrick:[178/255,34/255,34/255],floralwhite:[1,250/255,240/255],forestgreen:[34/255,139/255,34/255],fuchsia:[1,0,1],gainsboro:[220/255,220/255,220/255],ghostwhite:[248/255,248/255,1],gold:[1,215/255,0],goldenrod:[218/255,165/255,32/255],gray:[128/255,128/255,128/255],green:[0,128/255,0],greenyellow:[173/255,1,47/255],grey:[128/255,128/255,128/255],honeydew:[240/255,1,240/255],hotpink:[1,105/255,180/255],indianred:[205/255,92/255,92/255],indigo:[75/255,0,130/255],ivory:[1,1,240/255],khaki:[240/255,230/255,140/255],lavender:[230/255,230/255,250/255],lavenderblush:[1,240/255,245/255],lawngreen:[124/255,252/255,0],lemonchiffon:[1,250/255,205/255],lightblue:[173/255,216/255,230/255],lightcoral:[240/255,128/255,128/255],lightcyan:[224/255,1,1],lightgoldenrodyellow:[250/255,250/255,210/255],lightgray:[211/255,211/255,211/255],lightgreen:[144/255,238/255,144/255],lightgrey:[211/255,211/255,211/255],lightpink:[1,182/255,193/255],lightsalmon:[1,160/255,122/255],lightseagreen:[32/255,178/255,170/255],lightskyblue:[135/255,206/255,250/255],lightslategray:[119/255,136/255,153/255],lightslategrey:[119/255,136/255,153/255],lightsteelblue:[176/255,196/255,222/255],lightyellow:[1,1,224/255],lime:[0,1,0],limegreen:[50/255,205/255,50/255],linen:[250/255,240/255,230/255],magenta:[1,0,1],maroon:[128/255,0,0],mediumaquamarine:[102/255,205/255,170/255],mediumblue:[0,0,205/255],mediumorchid:[186/255,85/255,211/255],mediumpurple:[147/255,112/255,219/255],mediumseagreen:[60/255,179/255,113/255],mediumslateblue:[123/255,104/255,238/255],mediumspringgreen:[0,250/255,154/255],mediumturquoise:[72/255,209/255,204/255],mediumvioletred:[199/255,21/255,133/255],midnightblue:[25/255,25/255,112/255],mintcream:[245/255,1,250/255],mistyrose:[1,228/255,225/255],moccasin:[1,228/255,181/255],navajowhite:[1,222/255,173/255],navy:[0,0,128/255],oldlace:[253/255,245/255,230/255],olive:[128/255,128/255,0],olivedrab:[107/255,142/255,35/255],orange:[1,165/255,0],orangered:[1,69/255,0],orchid:[218/255,112/255,214/255],palegoldenrod:[238/255,232/255,170/255],palegreen:[152/255,251/255,152/255],paleturquoise:[175/255,238/255,238/255],palevioletred:[219/255,112/255,147/255],papayawhip:[1,239/255,213/255],peachpuff:[1,218/255,185/255],peru:[205/255,133/255,63/255],pink:[1,192/255,203/255],plum:[221/255,160/255,221/255],powderblue:[176/255,224/255,230/255],purple:[128/255,0,128/255],rebeccapurple:[102/255,51/255,153/255],red:[1,0,0],rosybrown:[188/255,143/255,143/255],royalblue:[65/255,105/255,225/255],saddlebrown:[139/255,69/255,19/255],salmon:[250/255,128/255,114/255],sandybrown:[244/255,164/255,96/255],seagreen:[46/255,139/255,87/255],seashell:[1,245/255,238/255],sienna:[160/255,82/255,45/255],silver:[192/255,192/255,192/255],skyblue:[135/255,206/255,235/255],slateblue:[106/255,90/255,205/255],slategray:[112/255,128/255,144/255],slategrey:[112/255,128/255,144/255],snow:[1,250/255,250/255],springgreen:[0,1,127/255],steelblue:[70/255,130/255,180/255],tan:[210/255,180/255,140/255],teal:[0,128/255,128/255],thistle:[216/255,191/255,216/255],tomato:[1,99/255,71/255],turquoise:[64/255,224/255,208/255],violet:[238/255,130/255,238/255],wheat:[245/255,222/255,179/255],white:[1,1,1],whitesmoke:[245/255,245/255,245/255],yellow:[1,1,0],yellowgreen:[154/255,205/255,50/255]};let Ht=Array(3).fill("<percentage> | <number>[0, 255]"),kt=Array(3).fill("<number>[0, 255]");var ne=new E({id:"srgb",name:"sRGB",base:E0,fromBase:t=>t.map(e=>{let r=e<0?-1:1,n=e*r;return n>.0031308?r*(1.055*n**(1/2.4)-.055):12.92*e}),toBase:t=>t.map(e=>{let r=e<0?-1:1,n=e*r;return n<=.04045?e/12.92:r*((n+.055)/1.055)**2.4}),formats:{rgb:{coords:Ht},rgb_number:{name:"rgb",commas:!0,coords:kt,noAlpha:!0},color:{},rgba:{coords:Ht,commas:!0,lastAlpha:!0},rgba_number:{name:"rgba",commas:!0,coords:kt},hex:{type:"custom",toGamut:!0,test:t=>/^#([a-f0-9]{3,4}){1,2}$/i.test(t),parse(t){t.length<=5&&(t=t.replace(/[a-f0-9]/gi,"$&$&"));let e=[];return t.replace(/[a-f0-9]{2}/gi,r=>{e.push(parseInt(r,16)/255)}),{spaceId:"srgb",coords:e.slice(0,3),alpha:e.slice(3)[0]}},serialize:(t,e,{collapse:r=!0}={})=>{e<1&&t.push(e),t=t.map(a=>Math.round(a*255));let n=r&&t.every(a=>a%17===0);return"#"+t.map(a=>n?(a/17).toString(16):a.toString(16).padStart(2,"0")).join("")}},keyword:{type:"custom",test:t=>/^[a-z]+$/i.test(t),parse(t){t=t.toLowerCase();let e={spaceId:"srgb",coords:null,alpha:1};if(t==="transparent"?(e.coords=Ot.black,e.alpha=0):e.coords=Ot[t],e.coords)return e}}}}),O0=new E({id:"p3",cssId:"display-p3",name:"P3",base:P0,fromBase:ne.fromBase,toBase:ne.toBase});k.display_space=ne;let sn;if(typeof CSS<"u"&&CSS.supports)for(let t of[H,z0,O0]){let e=t.getMinCoords(),n=le({space:t,coords:e,alpha:1});if(CSS.supports("color",n)){k.display_space=t;break}}function an(t,{space:e=k.display_space,...r}={}){let n=le(t,r);if(typeof CSS>"u"||CSS.supports("color",n)||!k.display_space)n=new String(n),n.color=t;else{let s=t;if((t.coords.some(q)||q(t.alpha))&&!(sn??(sn=CSS.supports("color","hsl(none 50% 50%)")))&&(s=te(t),s.coords=s.coords.map(N),s.alpha=N(s.alpha),n=le(s,r),CSS.supports("color",n)))return n=new String(n),n.color=s,n;s=v(s,e),n=new String(le(s,r)),n.color=s}return n}function on(t,e){return t=M(t),e=M(e),t.space===e.space&&t.alpha===e.alpha&&t.coords.every((r,n)=>r===e.coords[n])}function G(t){return O(t,[A,"y"])}function H0(t,e){X(t,[A,"y"],e)}function ln(t){Object.defineProperty(t.prototype,"luminance",{get(){return G(this)},set(e){H0(this,e)}})}var cn=Object.freeze({__proto__:null,getLuminance:G,register:ln,setLuminance:H0});function un(t,e){t=M(t),e=M(e);let r=Math.max(G(t),0),n=Math.max(G(e),0);return n>r&&([r,n]=[n,r]),(r+.05)/(n+.05)}const hn=.56,dn=.57,fn=.62,gn=.65,Tt=.022,mn=1.414,pn=.1,bn=5e-4,Mn=1.14,Yt=.027,wn=1.14;function Dt(t){return t>=Tt?t:t+(Tt-t)**mn}function V(t){let e=t<0?-1:1,r=Math.abs(t);return e*Math.pow(r,2.4)}function yn(t,e){e=M(e),t=M(t);let r,n,s,a,i,o;e=v(e,"srgb"),[a,i,o]=e.coords;let l=V(a)*.2126729+V(i)*.7151522+V(o)*.072175;t=v(t,"srgb"),[a,i,o]=t.coords;let c=V(a)*.2126729+V(i)*.7151522+V(o)*.072175,u=Dt(l),h=Dt(c),d=h>u;return Math.abs(h-u)<bn?n=0:d?(r=h**hn-u**dn,n=r*Mn):(r=h**gn-u**fn,n=r*wn),Math.abs(n)<pn?s=0:n>0?s=n-Yt:s=n+Yt,s*100}function Cn(t,e){t=M(t),e=M(e);let r=Math.max(G(t),0),n=Math.max(G(e),0);n>r&&([r,n]=[n,r]);let s=r+n;return s===0?0:(r-n)/s}const _n=5e4;function Sn(t,e){t=M(t),e=M(e);let r=Math.max(G(t),0),n=Math.max(G(e),0);return n>r&&([r,n]=[n,r]),n===0?_n:(r-n)/n}function $n(t,e){t=M(t),e=M(e);let r=O(t,[H,"l"]),n=O(e,[H,"l"]);return Math.abs(r-n)}const vn=216/24389,Xt=24/116,Ce=24389/27;let ke=z.D65;var Ve=new m({id:"lab-d65",name:"Lab D65",coords:{l:{refRange:[0,100],name:"Lightness"},a:{refRange:[-125,125]},b:{refRange:[-125,125]}},white:ke,base:A,fromBase(t){let r=t.map((n,s)=>n/ke[s]).map(n=>n>vn?Math.cbrt(n):(Ce*n+16)/116);return[116*r[1]-16,500*(r[0]-r[1]),200*(r[1]-r[2])]},toBase(t){let e=[];return e[1]=(t[0]+16)/116,e[0]=t[1]/500+e[1],e[2]=e[1]-t[2]/200,[e[0]>Xt?Math.pow(e[0],3):(116*e[0]-16)/Ce,t[0]>8?Math.pow((t[0]+16)/116,3):t[0]/Ce,e[2]>Xt?Math.pow(e[2],3):(116*e[2]-16)/Ce].map((n,s)=>n*ke[s])},formats:{"lab-d65":{coords:["<number> | <percentage>","<number> | <percentage>[-1,1]","<number> | <percentage>[-1,1]"]}}});const Te=Math.pow(5,.5)*.5+.5;function xn(t,e){t=M(t),e=M(e);let r=O(t,[Ve,"l"]),n=O(e,[Ve,"l"]),s=Math.abs(Math.pow(r,Te)-Math.pow(n,Te)),a=Math.pow(s,1/Te)*Math.SQRT2-40;return a<7.5?0:a}var $e=Object.freeze({__proto__:null,contrastAPCA:yn,contrastDeltaPhi:xn,contrastLstar:$n,contrastMichelson:Cn,contrastWCAG21:un,contrastWeber:Sn});function Ln(t,e,r={}){de(r)&&(r={algorithm:r});let{algorithm:n,...s}=r;if(!n){let a=Object.keys($e).map(i=>i.replace(/^contrast/,"")).join(", ");throw new TypeError(`contrast() function needs a contrast algorithm. Please specify one of: ${a}`)}t=M(t),e=M(e);for(let a in $e)if("contrast"+n.toLowerCase()===a.toLowerCase())return $e[a](t,e,s);throw new TypeError(`Unknown contrast algorithm: ${n}`)}function Ae(t){let[e,r,n]=fe(t,A),s=e+15*r+3*n;return[4*e/s,9*r/s]}function k0(t){let[e,r,n]=fe(t,A),s=e+r+n;return[e/s,r/s]}function Rn(t){Object.defineProperty(t.prototype,"uv",{get(){return Ae(this)}}),Object.defineProperty(t.prototype,"xy",{get(){return k0(this)}})}var Nn=Object.freeze({__proto__:null,register:Rn,uv:Ae,xy:k0});function oe(t,e,r={}){de(r)&&(r={method:r});let{method:n=k.deltaE,...s}=r;for(let a in re)if("deltae"+n.toLowerCase()===a.toLowerCase())return re[a](t,e,s);throw new TypeError(`Unknown deltaE method: ${n}`)}function In(t,e=.25){let n=[m.get("oklch","lch"),"l"];return X(t,n,s=>s*(1+e))}function An(t,e=.25){let n=[m.get("oklch","lch"),"l"];return X(t,n,s=>s*(1-e))}var Bn=Object.freeze({__proto__:null,darken:An,lighten:In});function T0(t,e,r=.5,n={}){return[t,e]=[M(t),M(e)],j(r)==="object"&&([r,n]=[.5,r]),ge(t,e,n)(r)}function Y0(t,e,r={}){let n;at(t)&&([n,r]=[t,e],[t,e]=n.rangeArgs.colors);let{maxDeltaE:s,deltaEMethod:a,steps:i=2,maxSteps:o=1e3,...l}=r;n||([t,e]=[M(t),M(e)],n=ge(t,e,l));let c=oe(t,e),u=s>0?Math.max(i,Math.ceil(c/s)+1):i,h=[];if(o!==void 0&&(u=Math.min(u,o)),u===1)h=[{p:.5,color:n(.5)}];else{let d=1/(u-1);h=Array.from({length:u},(p,g)=>{let f=g*d;return{p:f,color:n(f)}})}if(s>0){let d=h.reduce((p,g,f)=>{if(f===0)return 0;let b=oe(g.color,h[f-1].color,a);return Math.max(p,b)},0);for(;d>s;){d=0;for(let p=1;p<h.length&&h.length<o;p++){let g=h[p-1],f=h[p],b=(f.p+g.p)/2,C=n(b);d=Math.max(d,oe(C,g.color),oe(C,f.color)),h.splice(p,0,{p:b,color:n(b)}),p++}}}return h=h.map(d=>d.color),h}function ge(t,e,r={}){if(at(t)){let[l,c]=[t,e];return ge(...l.rangeArgs.colors,{...l.rangeArgs.options,...c})}let{space:n,outputSpace:s,progression:a,premultiplied:i}=r;t=M(t),e=M(e),t=te(t),e=te(e);let o={colors:[t,e],options:r};if(n?n=m.get(n):n=m.registry[k.interpolationSpace]||t.space,s=s?m.get(s):n,t=v(t,n),e=v(e,n),t=Z(t),e=Z(e),n.coords.h&&n.coords.h.type==="angle"){let l=r.hue=r.hue||"shorter",c=[n,"h"],[u,h]=[O(t,c),O(e,c)];isNaN(u)&&!isNaN(h)?u=h:isNaN(h)&&!isNaN(u)&&(h=u),[u,h]=ur(l,[u,h]),X(t,c,u),X(e,c,h)}return i&&(t.coords=t.coords.map(l=>l*t.alpha),e.coords=e.coords.map(l=>l*e.alpha)),Object.assign(l=>{l=a?a(l):l;let c=t.coords.map((d,p)=>{let g=e.coords[p];return ce(d,g,l)}),u=ce(t.alpha,e.alpha,l),h={space:n,coords:c,alpha:u};return i&&(h.coords=h.coords.map(d=>d/u)),s!==n&&(h=v(h,s)),h},{rangeArgs:o})}function at(t){return j(t)==="function"&&!!t.rangeArgs}k.interpolationSpace="lab";function zn(t){t.defineFunction("mix",T0,{returns:"color"}),t.defineFunction("range",ge,{returns:"function<color>"}),t.defineFunction("steps",Y0,{returns:"array<color>"})}var Pn=Object.freeze({__proto__:null,isRange:at,mix:T0,range:ge,register:zn,steps:Y0}),D0=new m({id:"hsl",name:"HSL",coords:{h:{refRange:[0,360],type:"angle",name:"Hue"},s:{range:[0,100],name:"Saturation"},l:{range:[0,100],name:"Lightness"}},base:ne,fromBase:t=>{let e=Math.max(...t),r=Math.min(...t),[n,s,a]=t,[i,o,l]=[NaN,0,(r+e)/2],c=e-r;if(c!==0){switch(o=l===0||l===1?0:(e-l)/Math.min(l,1-l),e){case n:i=(s-a)/c+(s<a?6:0);break;case s:i=(a-n)/c+2;break;case a:i=(n-s)/c+4}i=i*60}return o<0&&(i+=180,o=Math.abs(o)),i>=360&&(i-=360),[i,o*100,l*100]},toBase:t=>{let[e,r,n]=t;e=e%360,e<0&&(e+=360),r/=100,n/=100;function s(a){let i=(a+e/30)%12,o=r*Math.min(n,1-n);return n-o*Math.max(-1,Math.min(i-3,9-i,1))}return[s(0),s(8),s(4)]},formats:{hsl:{coords:["<number> | <angle>","<percentage>","<percentage>"]},hsla:{coords:["<number> | <angle>","<percentage>","<percentage>"],commas:!0,lastAlpha:!0}}}),X0=new m({id:"hsv",name:"HSV",coords:{h:{refRange:[0,360],type:"angle",name:"Hue"},s:{range:[0,100],name:"Saturation"},v:{range:[0,100],name:"Value"}},base:D0,fromBase(t){let[e,r,n]=t;r/=100,n/=100;let s=n+r*Math.min(n,1-n);return[e,s===0?0:200*(1-n/s),100*s]},toBase(t){let[e,r,n]=t;r/=100,n/=100;let s=n*(1-r/2);return[e,s===0||s===1?0:(n-s)/Math.min(s,1-s)*100,s*100]},formats:{color:{id:"--hsv",coords:["<number> | <angle>","<percentage> | <number>","<percentage> | <number>"]}}}),En=new m({id:"hwb",name:"HWB",coords:{h:{refRange:[0,360],type:"angle",name:"Hue"},w:{range:[0,100],name:"Whiteness"},b:{range:[0,100],name:"Blackness"}},base:X0,fromBase(t){let[e,r,n]=t;return[e,n*(100-r)/100,100-n]},toBase(t){let[e,r,n]=t;r/=100,n/=100;let s=r+n;if(s>=1){let o=r/s;return[e,0,o*100]}let a=1-n,i=a===0?0:1-r/a;return[e,i*100,a*100]},formats:{hwb:{coords:["<number> | <angle>","<percentage> | <number>","<percentage> | <number>"]}}});const On=[[.5766690429101305,.1855582379065463,.1882286462349947],[.29734497525053605,.6273635662554661,.07529145849399788],[.02703136138641234,.07068885253582723,.9913375368376388]],Hn=[[2.0415879038107465,-.5650069742788596,-.34473135077832956],[-.9692436362808795,1.8759675015077202,.04155505740717557],[.013444280632031142,-.11836239223101838,1.0151749943912054]];var j0=new E({id:"a98rgb-linear",cssId:"--a98-rgb-linear",name:"Linear Adobe® 98 RGB compatible",white:"D65",toXYZ_M:On,fromXYZ_M:Hn}),kn=new E({id:"a98rgb",cssId:"a98-rgb",name:"Adobe® 98 RGB compatible",base:j0,toBase:t=>t.map(e=>Math.pow(Math.abs(e),563/256)*Math.sign(e)),fromBase:t=>t.map(e=>Math.pow(Math.abs(e),256/563)*Math.sign(e))});const Tn=[[.7977666449006423,.13518129740053308,.0313477341283922],[.2880748288194013,.711835234241873,8993693872564e-17],[0,0,.8251046025104602]],Yn=[[1.3457868816471583,-.25557208737979464,-.05110186497554526],[-.5446307051249019,1.5082477428451468,.02052744743642139],[0,0,1.2119675456389452]];var q0=new E({id:"prophoto-linear",cssId:"--prophoto-rgb-linear",name:"Linear ProPhoto",white:"D50",base:rt,toXYZ_M:Tn,fromXYZ_M:Yn});const Dn=1/512,Xn=16/512;var jn=new E({id:"prophoto",cssId:"prophoto-rgb",name:"ProPhoto",base:q0,toBase(t){return t.map(e=>e<Xn?e/16:e**1.8)},fromBase(t){return t.map(e=>e>=Dn?e**(1/1.8):16*e)}}),qn=new m({id:"oklch",name:"Oklch",coords:{l:{refRange:[0,1],name:"Lightness"},c:{refRange:[0,.4],name:"Chroma"},h:{refRange:[0,360],type:"angle",name:"Hue"}},white:"D65",base:ee,fromBase(t){let[e,r,n]=t,s;const a=2e-4;return Math.abs(r)<a&&Math.abs(n)<a?s=NaN:s=Math.atan2(n,r)*180/Math.PI,[e,Math.sqrt(r**2+n**2),Y(s)]},toBase(t){let[e,r,n]=t,s,a;return isNaN(n)?(s=0,a=0):(s=r*Math.cos(n*Math.PI/180),a=r*Math.sin(n*Math.PI/180)),[e,s,a]},formats:{oklch:{coords:["<percentage> | <number>","<number> | <percentage>[0,1]","<number> | <angle>"]}}});let F0=z.D65;const Fn=216/24389,jt=24389/27,[qt,Ft]=Ae({space:A,coords:F0});var Z0=new m({id:"luv",name:"Luv",coords:{l:{refRange:[0,100],name:"Lightness"},u:{refRange:[-215,215]},v:{refRange:[-215,215]}},white:F0,base:A,fromBase(t){let e=[N(t[0]),N(t[1]),N(t[2])],r=e[1],[n,s]=Ae({space:A,coords:e});if(!Number.isFinite(n)||!Number.isFinite(s))return[0,0,0];let a=r<=Fn?jt*r:116*Math.cbrt(r)-16;return[a,13*a*(n-qt),13*a*(s-Ft)]},toBase(t){let[e,r,n]=t;if(e===0||q(e))return[0,0,0];r=N(r),n=N(n);let s=r/(13*e)+qt,a=n/(13*e)+Ft,i=e<=8?e/jt:Math.pow((e+16)/116,3);return[i*(9*s/(4*a)),i,i*((12-3*s-20*a)/(4*a))]},formats:{color:{id:"--luv",coords:["<number> | <percentage>","<number> | <percentage>[-1,1]","<number> | <percentage>[-1,1]"]}}}),it=new m({id:"lchuv",name:"LChuv",coords:{l:{refRange:[0,100],name:"Lightness"},c:{refRange:[0,220],name:"Chroma"},h:{refRange:[0,360],type:"angle",name:"Hue"}},base:Z0,fromBase(t){let[e,r,n]=t,s;const a=.02;return Math.abs(r)<a&&Math.abs(n)<a?s=NaN:s=Math.atan2(n,r)*180/Math.PI,[e,Math.sqrt(r**2+n**2),Y(s)]},toBase(t){let[e,r,n]=t;return r<0&&(r=0),isNaN(n)&&(n=0),[e,r*Math.cos(n*Math.PI/180),r*Math.sin(n*Math.PI/180)]},formats:{color:{id:"--lchuv",coords:["<number> | <percentage>","<number> | <percentage>","<number> | <angle>"]}}});const Zn=216/24389,Gn=24389/27,Zt=I[0][0],Gt=I[0][1],Ye=I[0][2],Jt=I[1][0],Wt=I[1][1],De=I[1][2],Qt=I[2][0],Vt=I[2][1],Xe=I[2][2];function U(t,e,r){const n=e/(Math.sin(r)-t*Math.cos(r));return n<0?1/0:n}function Re(t){const e=Math.pow(t+16,3)/1560896,r=e>Zn?e:t/Gn,n=r*(284517*Zt-94839*Ye),s=r*(838422*Ye+769860*Gt+731718*Zt),a=r*(632260*Ye-126452*Gt),i=r*(284517*Jt-94839*De),o=r*(838422*De+769860*Wt+731718*Jt),l=r*(632260*De-126452*Wt),c=r*(284517*Qt-94839*Xe),u=r*(838422*Xe+769860*Vt+731718*Qt),h=r*(632260*Xe-126452*Vt);return{r0s:n/a,r0i:s*t/a,r1s:n/(a+126452),r1i:(s-769860)*t/(a+126452),g0s:i/l,g0i:o*t/l,g1s:i/(l+126452),g1i:(o-769860)*t/(l+126452),b0s:c/h,b0i:u*t/h,b1s:c/(h+126452),b1i:(u-769860)*t/(h+126452)}}function Ut(t,e){const r=e/360*Math.PI*2,n=U(t.r0s,t.r0i,r),s=U(t.r1s,t.r1i,r),a=U(t.g0s,t.g0i,r),i=U(t.g1s,t.g1i,r),o=U(t.b0s,t.b0i,r),l=U(t.b1s,t.b1i,r);return Math.min(n,s,a,i,o,l)}var Jn=new m({id:"hsluv",name:"HSLuv",coords:{h:{refRange:[0,360],type:"angle",name:"Hue"},s:{range:[0,100],name:"Saturation"},l:{range:[0,100],name:"Lightness"}},base:it,gamutSpace:ne,fromBase(t){let[e,r,n]=[N(t[0]),N(t[1]),N(t[2])],s;if(e>99.9999999)s=0,e=100;else if(e<1e-8)s=0,e=0;else{let a=Re(e),i=Ut(a,n);s=r/i*100}return[n,s,e]},toBase(t){let[e,r,n]=[N(t[0]),N(t[1]),N(t[2])],s;if(n>99.9999999)n=100,s=0;else if(n<1e-8)n=0,s=0;else{let a=Re(n);s=Ut(a,e)/100*r}return[n,s,e]},formats:{color:{id:"--hsluv",coords:["<number> | <angle>","<percentage> | <number>","<percentage> | <number>"]}}});I[0][0];I[0][1];I[0][2];I[1][0];I[1][1];I[1][2];I[2][0];I[2][1];I[2][2];function K(t,e){return Math.abs(e)/Math.sqrt(Math.pow(t,2)+1)}function Kt(t){let e=K(t.r0s,t.r0i),r=K(t.r1s,t.r1i),n=K(t.g0s,t.g0i),s=K(t.g1s,t.g1i),a=K(t.b0s,t.b0i),i=K(t.b1s,t.b1i);return Math.min(e,r,n,s,a,i)}var Wn=new m({id:"hpluv",name:"HPLuv",coords:{h:{refRange:[0,360],type:"angle",name:"Hue"},s:{range:[0,100],name:"Saturation"},l:{range:[0,100],name:"Lightness"}},base:it,gamutSpace:"self",fromBase(t){let[e,r,n]=[N(t[0]),N(t[1]),N(t[2])],s;if(e>99.9999999)s=0,e=100;else if(e<1e-8)s=0,e=0;else{let a=Re(e),i=Kt(a);s=r/i*100}return[n,s,e]},toBase(t){let[e,r,n]=[N(t[0]),N(t[1]),N(t[2])],s;if(n>99.9999999)n=100,s=0;else if(n<1e-8)n=0,s=0;else{let a=Re(n);s=Kt(a)/100*r}return[n,s,e]},formats:{color:{id:"--hpluv",coords:["<number> | <angle>","<percentage> | <number>","<percentage> | <number>"]}}});const e0=203,t0=2610/2**14,Qn=2**14/2610,Vn=2523/2**5,r0=2**5/2523,n0=3424/2**12,s0=2413/2**7,a0=2392/2**7;var Un=new E({id:"rec2100pq",cssId:"rec2100-pq",name:"REC.2100-PQ",base:Ie,toBase(t){return t.map(function(e){return(Math.max(e**r0-n0,0)/(s0-a0*e**r0))**Qn*1e4/e0})},fromBase(t){return t.map(function(e){let r=Math.max(e*e0/1e4,0),n=n0+s0*r**t0,s=1+a0*r**t0;return(n/s)**Vn})}});const i0=.17883277,o0=.28466892,l0=.55991073,je=3.7743;var Kn=new E({id:"rec2100hlg",cssId:"rec2100-hlg",name:"REC.2100-HLG",referred:"scene",base:Ie,toBase(t){return t.map(function(e){return e<=.5?e**2/3*je:(Math.exp((e-l0)/i0)+o0)/12*je})},fromBase(t){return t.map(function(e){return e/=je,e<=1/12?Math.sqrt(3*e):i0*Math.log(12*e-o0)+l0})}});const G0={};F.add("chromatic-adaptation-start",t=>{t.options.method&&(t.M=J0(t.W1,t.W2,t.options.method))});F.add("chromatic-adaptation-end",t=>{t.M||(t.M=J0(t.W1,t.W2,t.options.method))});function Be({id:t,toCone_M:e,fromCone_M:r}){G0[t]=arguments[0]}function J0(t,e,r="Bradford"){let n=G0[r],[s,a,i]=x(n.toCone_M,t),[o,l,c]=x(n.toCone_M,e),u=[[o/s,0,0],[0,l/a,0],[0,0,c/i]],h=x(u,n.toCone_M);return x(n.fromCone_M,h)}Be({id:"von Kries",toCone_M:[[.40024,.7076,-.08081],[-.2263,1.16532,.0457],[0,0,.91822]],fromCone_M:[[1.8599363874558397,-1.1293816185800916,.21989740959619328],[.3611914362417676,.6388124632850422,-6370596838649899e-21],[0,0,1.0890636230968613]]});Be({id:"Bradford",toCone_M:[[.8951,.2664,-.1614],[-.7502,1.7135,.0367],[.0389,-.0685,1.0296]],fromCone_M:[[.9869929054667121,-.14705425642099013,.15996265166373122],[.4323052697233945,.5183602715367774,.049291228212855594],[-.00852866457517732,.04004282165408486,.96848669578755]]});Be({id:"CAT02",toCone_M:[[.7328,.4296,-.1624],[-.7036,1.6975,.0061],[.003,.0136,.9834]],fromCone_M:[[1.0961238208355142,-.27886900021828726,.18274517938277307],[.4543690419753592,.4735331543074117,.07209780371722911],[-.009627608738429355,-.00569803121611342,1.0153256399545427]]});Be({id:"CAT16",toCone_M:[[.401288,.650173,-.051461],[-.250268,1.204414,.045854],[-.002079,.048952,.953127]],fromCone_M:[[1.862067855087233,-1.0112546305316845,.14918677544445172],[.3875265432361372,.6214474419314753,-.008973985167612521],[-.01584149884933386,-.03412293802851557,1.0499644368778496]]});Object.assign(z,{A:[1.0985,1,.35585],C:[.98074,1,1.18232],D55:[.95682,1,.92149],D75:[.94972,1,1.22638],E:[1,1,1],F2:[.99186,1,.67393],F7:[.95041,1,1.08747],F11:[1.00962,1,.6435]});z.ACES=[.32168/.33767,1,(1-.32168-.33767)/.33767];const es=[[.6624541811085053,.13400420645643313,.1561876870049078],[.27222871678091454,.6740817658111484,.05368951740793705],[-.005574649490394108,.004060733528982826,1.0103391003129971]],ts=[[1.6410233796943257,-.32480329418479,-.23642469523761225],[-.6636628587229829,1.6153315916573379,.016756347685530137],[.011721894328375376,-.008284441996237409,.9883948585390215]];var W0=new E({id:"acescg",cssId:"--acescg",name:"ACEScg",coords:{r:{range:[0,65504],name:"Red"},g:{range:[0,65504],name:"Green"},b:{range:[0,65504],name:"Blue"}},referred:"scene",white:z.ACES,toXYZ_M:es,fromXYZ_M:ts});const _e=2**-16,qe=-.35828683,Se=(Math.log2(65504)+9.72)/17.52;var rs=new E({id:"acescc",cssId:"--acescc",name:"ACEScc",coords:{r:{range:[qe,Se],name:"Red"},g:{range:[qe,Se],name:"Green"},b:{range:[qe,Se],name:"Blue"}},referred:"scene",base:W0,toBase(t){const e=-.3013698630136986;return t.map(function(r){return r<=e?(2**(r*17.52-9.72)-_e)*2:r<Se?2**(r*17.52-9.72):65504})},fromBase(t){return t.map(function(e){return e<=0?(Math.log2(_e)+9.72)/17.52:e<_e?(Math.log2(_e+e*.5)+9.72)/17.52:(Math.log2(e)+9.72)/17.52})}}),c0=Object.freeze({__proto__:null,A98RGB:kn,A98RGB_Linear:j0,ACEScc:rs,ACEScg:W0,CAM16_JMh:jr,HCT:he,HPLuv:Wn,HSL:D0,HSLuv:Jn,HSV:X0,HWB:En,ICTCP:Je,JzCzHz:Ge,Jzazbz:S0,LCH:ue,LCHuv:it,Lab:H,Lab_D65:Ve,Luv:Z0,OKLCH:qn,OKLab:ee,P3:O0,P3_Linear:P0,ProPhoto:jn,ProPhoto_Linear:q0,REC_2020:z0,REC_2020_Linear:Ie,REC_2100_HLG:Kn,REC_2100_PQ:Un,XYZ_ABS_D65:nt,XYZ_D50:rt,XYZ_D65:A,sRGB:ne,sRGB_Linear:E0});class _{constructor(...e){let r;e.length===1&&(r=M(e[0]));let n,s,a;r?(n=r.space||r.spaceId,s=r.coords,a=r.alpha):[n,s,a]=e,Object.defineProperty(this,"space",{value:m.get(n),writable:!1,enumerable:!0,configurable:!0}),this.coords=s?s.slice():[0,0,0],this.alpha=a>1||a===void 0?1:a<0?0:a;for(let i=0;i<this.coords.length;i++)this.coords[i]==="NaN"&&(this.coords[i]=NaN);for(let i in this.space.coords)Object.defineProperty(this,i,{get:()=>this.get(i),set:o=>this.set(i,o)})}get spaceId(){return this.space.id}clone(){return new _(this.space,this.coords,this.alpha)}toJSON(){return{spaceId:this.spaceId,coords:this.coords,alpha:this.alpha}}display(...e){let r=an(this,...e);return r.color=new _(r.color),r}static get(e,...r){return e instanceof _?e:new _(e,...r)}static defineFunction(e,r,n=r){let{instance:s=!0,returns:a}=n,i=function(...o){let l=r(...o);if(a==="color")l=_.get(l);else if(a==="function<color>"){let c=l;l=function(...u){let h=c(...u);return _.get(h)},Object.assign(l,c)}else a==="array<color>"&&(l=l.map(c=>_.get(c)));return l};e in _||(_[e]=i),s&&(_.prototype[e]=function(...o){return i(this,...o)})}static defineFunctions(e){for(let r in e)_.defineFunction(r,e[r],e[r])}static extend(e){if(e.register)e.register(_);else for(let r in e)_.defineFunction(r,e[r])}}_.defineFunctions({get:O,getAll:fe,set:X,setAll:tt,to:v,equals:on,inGamut:W,toGamut:Z,distance:_0,toString:le});Object.assign(_,{util:sr,hooks:F,WHITES:z,Space:m,spaces:m.registry,parse:y0,defaults:k});for(let t of Object.keys(c0))m.register(c0[t]);for(let t in m.registry)Ue(t,m.registry[t]);F.add("colorspace-init-end",t=>{var e;Ue(t.id,t),(e=t.aliases)==null||e.forEach(r=>{Ue(r,t)})});function Ue(t,e){let r=t.replace(/-/g,"_");Object.defineProperty(_.prototype,r,{get(){let n=this.getAll(t);return typeof Proxy>"u"?n:new Proxy(n,{has:(s,a)=>{try{return m.resolveCoord([e,a]),!0}catch{}return Reflect.has(s,a)},get:(s,a,i)=>{if(a&&typeof a!="symbol"&&!(a in s)){let{index:o}=m.resolveCoord([e,a]);if(o>=0)return s[o]}return Reflect.get(s,a,i)},set:(s,a,i,o)=>{if(a&&typeof a!="symbol"&&!(a in s)||a>=0){let{index:l}=m.resolveCoord([e,a]);if(l>=0)return s[l]=i,this.setAll(t,s),!0}return Reflect.set(s,a,i,o)}})},set(n){this.setAll(t,n)},configurable:!0,enumerable:!0})}_.extend(re);_.extend({deltaE:oe});Object.assign(_,{deltaEMethods:re});_.extend(Bn);_.extend({contrast:Ln});_.extend(Nn);_.extend(cn);_.extend(Pn);_.extend($e);class ns{constructor(e,{manageAs:r}={}){this._color=new _("hsv",[0,100,100],1),this.host=e,this.manageAs=r}get color(){return this._color}validateColorString(e){var h,d,p,g;const r={spaceId:null,coords:[0,0,0],isValid:!1,alpha:1},n=[/rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d*\.?\d+)\s*\)/i,/rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/i,/^rgba\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(0|0?\.\d+|1)\s*$/i,/^rgb\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*$/i,/^rgba\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(\d*\.?\d+)\s*\)$/i,/^rgb\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*\)$/i,/rgb\(\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*\)/i,/rgba\(\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(\d*\.?\d+)\s*\)/i],s=[/hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,/hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,/^hsla\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,/^hsl\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,/^hsla\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,/^hsl\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i],a=[/hsva\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,/hsv\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,/^hsva\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,/^hsv\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,/^hsva\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,/^hsv\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i],i=[/^#([A-Fa-f0-9]{6})(?:\s*([01](?:\.\d+)?))?$/,/^#([A-Fa-f0-9]{3})(?:\s*([01](?:\.\d+)?))?$/],o=(h=n.find(f=>f.test(e)))==null?void 0:h.exec(e),l=(d=s.find(f=>f.test(e)))==null?void 0:d.exec(e),c=(p=a.find(f=>f.test(e)))==null?void 0:p.exec(e),u=(g=i.find(f=>f.test(e)))==null?void 0:g.exec(e);if(o){const[,f,b,C,w]=o.filter(R=>typeof R=="string"),y=w===void 0?1:Number(w),S=R=>R.includes("%")?Number(R.replace("%",""))/100:Number(R)/255,$=S(f),L=S(b),B=S(C);r.spaceId="srgb",r.coords=[$,L,B],r.alpha=y,r.isValid=$>=0&&$<=1&&L>=0&&L<=1&&B>=0&&B<=1&&y>=0&&y<=1}else if(l){const[,f,b,C,w]=l,y=[f,b,C,w===void 0?"1":w].map(R=>Number(R.replaceAll(/[^\d.]/g,""))),[S,$,L,B]=y;r.spaceId="hsl",r.coords=[S,$,L],r.alpha=B,r.isValid=S>=0&&S<=360&&$>=0&&$<=100&&L>=0&&L<=100&&B>=0&&B<=1}else if(c){const[,f,b,C,w]=c,y=[f,b,C,w===void 0?"1":w].map(R=>Number(R.replaceAll(/[^\d.]/g,""))),[S,$,L,B]=y;r.spaceId="hsv",r.coords=[S,$,L],r.alpha=B,r.isValid=S>=0&&S<=360&&$>=0&&$<=100&&L>=0&&L<=100&&B>=0&&B<=1}else if(u){const[,f,b]=u,C=L=>(L.length===1&&(L=L+L),Number.parseInt(L,16)/255);let w,y,S;f.length===3?(w=C(f.slice(0,1)),y=C(f.slice(1,2)),S=C(f.slice(2,3))):(w=C(f.slice(0,2)),y=C(f.slice(2,4)),S=C(f.slice(4,6)));const $=b?Number(b):1;r.spaceId="srgb",r.coords=[w,y,S],r.alpha=$,r.isValid=w>=0&&w<=1&&y>=0&&y<=1&&S>=0&&S<=1&&$>=0&&$<=1}return r}get colorOrigin(){return this._colorOrigin}set colorOrigin(e){this._colorOrigin=e}set color(e){this._colorOrigin=e;let r;if(typeof e=="string"){const n=this.validateColorString(e);if(n.isValid){const[s,a,i]=n.coords;r=new _(`${n.spaceId}`,[s,a,i],n.alpha)}else try{_.parse(e)}catch{try{r=new _(`#${e}`)}catch{return}}}else if(e instanceof _)r=e;else if(!Array.isArray(e)){const{h:n,s,l:a,v:i,r:o,g:l,b:c,a:u}=e;if(n!==void 0&&s!==void 0){const h=a??i;r=new _(a===void 0?"hsv":"hsl",[Number.parseFloat(n),typeof s=="string"?Number.parseFloat(s):s*100,typeof h=="string"?Number.parseFloat(h):h*100],Number.parseFloat(u||"1"))}else o!==void 0&&l!==void 0&&c!==void 0&&(r=new _("srgb",[Number.parseFloat(o)/255,Number.parseFloat(l)/255,Number.parseFloat(c)/255],Number.parseFloat(u||"1")))}r||(r=new _(e)),this._color=this.manageAs?r.to(this.manageAs):r,this.host.requestUpdate()}get colorValue(){let e;if(typeof this._colorOrigin=="string")switch(this._colorOrigin.startsWith("#")?e="hex string":this._colorOrigin.startsWith("rgb")?e="rgb":this._colorOrigin.startsWith("hsl")?e="hsl":this._colorOrigin.startsWith("hsv")?e="hsv":e="hex",e){case"hsv":{const r=this._colorOrigin[3]==="a",{h:n,s,v:a}=this._color.to("hsv").hsv,i=this._color.alpha;return`hsv${r?"a":""}(${Math.round(n)}, ${Math.round(s)}%, ${Math.round(a)}%${r?`, ${i}`:""})`}case"hsl":{const r=this._colorOrigin[3]==="a",{h:n,s,l:a}=this._color.to("hsl").hsl,i=this._color.alpha;return`hsl${r?"a":""}(${Math.round(n)}, ${Math.round(s)}%, ${Math.round(a)}%${r?`, ${i}`:""})`}case"hex string":{const{r,g:n,b:s}=this._color.to("srgb").srgb,a=this._colorOrigin.length===5||this._colorOrigin.length===9,i=this._color.alpha,o=Math.round(r*255).toString(16),l=Math.round(n*255).toString(16),c=Math.round(s*255).toString(16),u=Math.round(i*255).toString(16);return`#${o.padStart(2,"0")}${l.padStart(2,"0")}${c.padStart(2,"0")}${a?u.padStart(2,"0"):""}`}case"hex":{const{r,g:n,b:s}=this._color.to("srgb").srgb,a=this._colorOrigin.length===4||this._colorOrigin.length===8,i=this._color.alpha,o=Math.round(r*255).toString(16),l=Math.round(n*255).toString(16),c=Math.round(s*255).toString(16),u=Math.round(i*255).toString(16);return`${o.padStart(2,"0")}${l.padStart(2,"0")}${c.padStart(2,"0")}${a?u.padStart(2,"0"):""}`}default:{const{r,g:n,b:s}=this._color.to("srgb").srgb,a=this._colorOrigin[3]==="a",i=this._color.alpha;return this._colorOrigin.search("%")>-1?`rgb${a?"a":""}(${Math.round(r*100)}%, ${Math.round(n*100)}%, ${Math.round(s*100)}%${a?`,${Math.round(i*100)}%`:""})`:`rgb${a?"a":""}(${Math.round(r*255)}, ${Math.round(n*255)}, ${Math.round(s*255)}${a?`, ${i}`:""})`}}if(this._colorOrigin)try{({spaceId:e}=new _(this._colorOrigin))}catch{const{h:r,s:n,l:s,v:a,r:i,g:o,b:l}=this._colorOrigin;r!==void 0&&n!==void 0&&s!==void 0?e="hsl":r!==void 0&&n!==void 0&&a!==void 0?e="hsv":i!==void 0&&o!==void 0&&l!==void 0&&(e="srgb")}else({spaceId:e}=this.color);switch(e){case"hsv":{const{h:r,s:n,v:s}=this._color.to("hsv").hsv;return{h:r,s:n/100,v:s/100,a:this._color.alpha}}case"hsl":{const{h:r,s:n,l:s}=this._color.to("hsl").hsl;return{h:r,s:n/100,l:s/100,a:this._color.alpha}}case"srgb":{const{r,g:n,b:s}=this._color.to("srgb").srgb;return this._colorOrigin&&typeof this._colorOrigin.r=="string"&&this._colorOrigin.r.search("%")?{r:`${Math.round(r*255)}%`,g:`${Math.round(n*255)}%`,b:`${Math.round(s*255)}%`,a:this._color.alpha}:{r:Math.round(r*255),g:Math.round(n*255),b:Math.round(s*255),a:this._color.alpha}}}return this._color}get hue(){return Number(this._color.to("hsl").hsl.h)}set hue(e){this._color.set("h",e),this.host.requestUpdate()}getColor(e){if(typeof e=="string"&&!["srgb","hsva","hsv","hsl","hsla"].includes(e))throw new Error("not a valid format");return this._color.to(e)}getHslString(){return this._color.to("hsl").toString()}savePreviousColor(){this._previousColor=this._color.clone()}restorePreviousColor(){this._color=this._previousColor}}exports.ColorController=ns;

package/components/color-field/color-field.d.ts

@@ -8,13 +8,13 @@ import { LuzmoTextFieldBase } from './../text-field/text-field';
 export declare class LuzmoColorField extends LuzmoTextFieldBase {
     static get styles(): CSSResultArray;
     viewColor: boolean;
+    private colorController;
+    constructor();
     set value(value: string);
     get value(): string;
     protected _value: string;
-    private cachedColor;
-    getColorValue(): string;
     private renderColorHandle;
+    getColorValue(): string;
     protected render(): TemplateResult;
-    private cachedTinyColor;
     checkValidity(): boolean;
 }

package/components/color-field/index.cjs

@@ -15,9 +15,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../base-CBCg3yyw.cjs"),a=require("../text-field-D5d_Gt0t.cjs"),u=require("../index-DCKCHDTt.cjs");var h=Object.defineProperty,c=(l,e,t,d)=>{for(var o=void 0,r=l.length-1,n;r>=0;r--)(n=l[r])&&(o=n(e,t,o)||o);return o&&h(e,t,o),o};class s extends a.LuzmoTextFieldBase{constructor(){super(...arguments),this.viewColor=!1,this._value="",this.cachedColor=null,this.cachedTinyColor=null}static get styles(){return[...super.styles]}set value(e){if(e===this.value)return;const t=this._value;this._value=e,this.requestUpdate("value",t)}get value(){return this._value}getColorValue(){if(!this.value)return"";if(!this.cachedColor||this.cachedColor!==this.value){const e=new u.TinyColor(this.value);this.cachedColor=e.isValid?e.toRgbString():""}return this.cachedColor}renderColorHandle(){return this.viewColor?i.x`
-          <luzmo-color-handle
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../base-CBCg3yyw.cjs"),a=require("../color-controller-_ZwyhvaU.cjs"),u=require("../text-field-BSIXGkFs.cjs"),d=":host{position:relative}";var h=Object.defineProperty,v=(t,e,l,c)=>{for(var r=void 0,i=t.length-1,n;i>=0;i--)(n=t[i])&&(r=n(e,l,r)||r);return r&&h(e,l,r),r};class s extends u.LuzmoTextFieldBase{constructor(){super(),this.viewColor=!1,this._value="",this.colorController=new a.ColorController(this)}static get styles(){return[...super.styles,o.r(d)]}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}renderColorHandle(){return this.viewColor&&this.valid?o.x`
+          <sp-color-handle
             size="m"
-            color=${this.getColorValue()}
-          ></luzmo-color-handle>
-        `:i.x``}render(){return this.viewColor&&Promise.resolve().then(()=>require("../color-handle/index.cjs")),i.x` ${super.render()} ${this.renderColorHandle()} `}checkValidity(){let e=super.checkValidity();return this.value&&((!this.cachedTinyColor||this.cachedTinyColor.originalInput!==this.value)&&(this.cachedTinyColor=new u.TinyColor(this.value)),this.valid=e=this.cachedTinyColor.isValid,this.invalid=!e),e}}c([i.n({type:Boolean,attribute:"view-color"})],s.prototype,"viewColor");customElements.get("luzmo-color-field")||customElements.define("luzmo-color-field",s);exports.LuzmoColorField=s;
+            color=${this.colorController.getColor("srgb").toString()}
+          ></sp-color-handle>
+        `:o.x``}getColorValue(){return this.valid?this.colorController.getColor("srgb").toString():""}render(){return this.viewColor&&Promise.resolve().then(()=>require("../color-handle/index.cjs")),o.x` ${super.render()} ${this.renderColorHandle()} `}checkValidity(){let e=super.checkValidity();return this.value?(this.valid=e=this.colorController.validateColorString(this.value).isValid,this.invalid=!e,this.valid&&(this.colorController.color=this.value)):this.valid=this.invalid=!1,e}}v([o.n({type:Boolean,attribute:"view-color"})],s.prototype,"viewColor");customElements.get("luzmo-color-field")||customElements.define("luzmo-color-field",s);exports.LuzmoColorField=s;

package/components/color-field/index.js

@@ -15,27 +15,28 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { x as i, n as a } from "../base-WsynuqaS.js";
-import { a as s } from "../text-field-BIADXoLC.js";
-import { T as c } from "../index-C1chwzNp.js";
-const n = () => {
+import { r as n, x as i, n as s } from "../base-WsynuqaS.js";
+import { C as a } from "../color-controller-DTp1juRz.js";
+import { a as d } from "../text-field-B9IkRRxO.js";
+const c = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const l = document.createElement("style");
     l.setAttribute("data-luzmo-vars", ""), l.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(l);
   }
 };
-n();
-var d = Object.defineProperty, z = (l, o, e, f) => {
-  for (var r = void 0, u = l.length - 1, t; u >= 0; u--)
-    (t = l[u]) && (r = t(o, e, r) || r);
-  return r && d(o, e, r), r;
+c();
+const z = ":host{position:relative}";
+var f = Object.defineProperty, g = (l, o, e, h) => {
+  for (var r = void 0, t = l.length - 1, u; t >= 0; t--)
+    (u = l[t]) && (r = u(o, e, r) || r);
+  return r && f(o, e, r), r;
 };
-class m extends s {
+class m extends d {
   constructor() {
-    super(...arguments), this.viewColor = !1, this._value = "", this.cachedColor = null, this.cachedTinyColor = null;
+    super(), this.viewColor = !1, this._value = "", this.colorController = new a(this);
   }
   static get styles() {
-    return [...super.styles];
+    return [...super.styles, n(z)];
   }
   set value(o) {
     if (o === this.value)
@@ -46,33 +47,29 @@ class m extends s {
   get value() {
     return this._value;
   }
-  getColorValue() {
-    if (!this.value)
-      return "";
-    if (!this.cachedColor || this.cachedColor !== this.value) {
-      const o = new c(this.value);
-      this.cachedColor = o.isValid ? o.toRgbString() : "";
-    }
-    return this.cachedColor;
-  }
   renderColorHandle() {
-    return this.viewColor ? i`
-          <luzmo-color-handle
+    return this.viewColor && this.valid ? i`
+          <sp-color-handle
             size="m"
-            color=${this.getColorValue()}
-          ></luzmo-color-handle>
+            color=${this.colorController.getColor("srgb").toString()}
+          ></sp-color-handle>
         ` : i``;
   }
+  getColorValue() {
+    return this.valid ? this.colorController.getColor("srgb").toString() : "";
+  }
   render() {
     return this.viewColor && import("../color-handle/index.js"), i` ${super.render()} ${this.renderColorHandle()} `;
   }
   checkValidity() {
     let o = super.checkValidity();
-    return this.value && ((!this.cachedTinyColor || this.cachedTinyColor.originalInput !== this.value) && (this.cachedTinyColor = new c(this.value)), this.valid = o = this.cachedTinyColor.isValid, this.invalid = !o), o;
+    return this.value ? (this.valid = o = this.colorController.validateColorString(
+      this.value
+    ).isValid, this.invalid = !o, this.valid && (this.colorController.color = this.value)) : this.valid = this.invalid = !1, o;
   }
 }
-z([
-  a({ type: Boolean, attribute: "view-color" })
+g([
+  s({ type: Boolean, attribute: "view-color" })
 ], m.prototype, "viewColor");
 customElements.get("luzmo-color-field") || customElements.define("luzmo-color-field", m);
 export {

package/components/color-menu/index.cjs

@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../luzmo-icons-DletXGWU.cjs"),i=require("../base-CBCg3yyw.cjs"),d=require("../state-D8JEtYqe.cjs"),n=require("../query-BL-TJj7K.cjs"),g=require("../focusable-EbipgXRh.cjs"),f=require("../sized-mixin-CPxE5C96.cjs");require("../color-area/index.cjs");require("../color-field/index.cjs");require("../color-handle/index.cjs");require("../color-slider/index.cjs");require("../divider/index.cjs");require("../popover/index.cjs");require("../swatch/index.cjs");const a=require("../index-DCKCHDTt.cjs"),v='@charset "UTF-8";:host{width:var(--luzmo-color-menu-width, var(--color-menu-width))}.hue-opacity-text-swatches-container{display:flex;gap:var(--luzmo-color-menu-color-controls-vertical-gap, var(--color-menu-color-controls-vertical-gap));flex-direction:column;padding:var(--luzmo-color-menu-hue-opacity-text-swatches-vertical-padding, var(--color-menu-hue-opacity-text-swatches-vertical-padding)) var(--luzmo-color-menu-hue-opacity-text-swatches-horizontal-padding, var(--color-menu-hue-opacity-text-swatches-horizontal-padding))}.swatch-sliders-container{display:flex;gap:var(--luzmo-color-menu-swatch-to-sliders-space, var(--color-menu-swatch-to-sliders-space))}.swatch-example-container{display:flex;align-items:center}.field-container{display:flex;align-items:center;gap:var(--luzmo-color-menu-format-field-to-format-space, var(--color-menu-format-field-to-format-space))}.format-container{text-transform:uppercase;position:relative;background:none;border:none;outline:none;height:var(--luzmo-color-menu-format-height, var(--color-menu-format-height));cursor:pointer;font-size:var(--luzmo-color-menu-format-font-size, var(--color-menu-format-font-size));display:flex;align-items:center;color:var(--luzmo-color-menu-format-font-color, var(--color-menu-format-font-color));gap:var(--luzmo-color-menu-format-name-to-icon, var(--color-menu-format-name-to-icon-space));padding:0 var(--luzmo-color-menu-format-horizontal-padding, var(--color-menu-format-horizontal-padding))}.format-container:hover{color:var(--luzmo-color-menu-format-font-color-hover, var(--color-menu-format-font-color-hover))}.format-container:focus-visible{outline:none}.format-container:focus-visible:after{content:"";width:100%;height:100%;position:absolute;box-sizing:border-box;left:0;top:0;border:var(--luzmo-color-menu-format-indicator-width, var(--luzmo-indicator-width)) solid var(--luzmo-color-menu-format-indicator-color, var(--luzmo-indicator-color));border-radius:var(--luzmo-color-menu-format-label-indicator-border-radius, var(--luzmo-border-radius-s))}.format-container:focus-visible,.format-container:active{color:var(--luzmo-color-menu-format-font-color-down, var(--color-menu-format-font-color-down))}.format-container .format-label{-webkit-user-select:none;user-select:none}.format-container .angle-icon{display:flex;align-items:center;height:calc(var(--color-menu-format-font-size) / 1.5)}.slider-container{display:flex;flex-direction:column;justify-content:center;gap:var(--luzmo-color-menu-slider-gap, var(--color-menu-slider-gap))}luzmo-color-area{width:100%;height:var(--luzmo-color-menu-height, var(--color-menu-height))}luzmo-color-slider{width:100%}luzmo-divider{margin:var(--luzmo-spacing-5) à}.swatches-container{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--luzmo-color-menu-swatches-gap, var(--color-menu-swatches-gap))}.swatches-container luzmo-swatch{cursor:pointer}.swatches-container .swatch-choice{display:flex;align-items:center;justify-content:center}:host{--luzmo-text-field-icon-size-valid: 0px;--luzmo-text-field-icon-spacing-inline-end-valid: 1px;--luzmo-text-field-text-align: center}:host{--color-menu-width: 290px;--luzmo-text-field-width: 220px;--luzmo-color-slider-control-track-width: 8px;--color-menu-height: 140px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height);--color-menu-format-font-size: var(--luzmo-font-size-s);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-3);--color-menu-format-font-color: var(--luzmo-font-color);--color-menu-format-font-color-hover: var(--luzmo-font-color-hover);--color-menu-format-font-color-down: var(--luzmo-font-color-down);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host .swatches-container{--luzmo-swatch-size: 22px}:host([size=s]){--color-menu-width: 260px;--luzmo-text-field-width: 200px;--luzmo-color-slider-control-track-width: 8px;--color-menu-hue-opacity-text-swatches-horizontal-padding: var( --luzmo-spacing-5 );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-4 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-4);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-4);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-s);--color-menu-format-font-size: var(--luzmo-font-size-xs);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-2);--color-menu-swatches-gap: var(--luzmo-spacing-3)}:host([size=s]) .swatches-container{--luzmo-swatch-size: 20px}:host([size=l]){--color-menu-width: 350px;--luzmo-text-field-width: 240px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-format-height: var(--luzmo-component-height-l);--color-menu-format-font-size: var(--luzmo-font-size);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=l]) .swatches-container{--luzmo-swatch-size: 24px}:host([size=l]) .swatch-example-container{--luzmo-swatch-size: 56px}:host([size=xl]){--color-menu-width: 380px;--luzmo-text-field-width: 280px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-color-controls-vertical-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-swatch-to-sliders-space: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-xl);--color-menu-format-font-size: var(--luzmo-font-size-l);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-3);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=xl]) .swatches-container{--luzmo-swatch-size: 26px}:host([size=xl]) .swatch-example-container{--luzmo-swatch-size: 64px}';var z=Object.defineProperty,l=(u,o,t,e)=>{for(var s=void 0,h=u.length-1,p;h>=0;h--)(p=u[h])&&(s=p(o,t,s)||s);return s&&z(o,t,s),s};const m=class m extends f.SizedMixin(g.Focusable){constructor(){super(...arguments),this.color="rgb(255, 0, 0)",this.noAlphaChannel=!1,this._alpha=1,this._rgbColor="rgb(255, 0, 0)",this._rgbaColor="rgb(255, 0, 0, 1)",this._previousColor="rgb(255, 0, 0)"}setColor(o){var e;const t=new a.TinyColor((e=o==null?void 0:o.target)==null?void 0:e.color);this._format=t.format==="name"?"rgb":t.format,this._rgbaColor=t.toRgbString(),this._alpha=this.noAlphaChannel?1:t.getAlpha(),this._rgbColor=t.setAlpha(1).toRgbString(),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this.colorFieldElement.value=this.formatTextField(t),this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}handleAreaChange(o){o.stopPropagation(),o.preventDefault(),this._rgbColor=this.areaElement.color;const t=new a.TinyColor(this._rgbColor);this._rgbaColor=t.setAlpha(this._alpha).toRgbString(),this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}get focusElement(){return this.areaElement||this.colorFieldElement||this}handleHueSliderChange(o){o.stopPropagation(),o.preventDefault();const t=new a.TinyColor(this._rgbColor).toHsl();t.h=this.hueSliderElement.value;const e=new a.TinyColor(t);this._rgbColor=e.toRgbString(),this._rgbaColor=e.setAlpha(this._alpha).toRgbString(),this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(e),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}handleOpacitySliderChange(o){o.stopPropagation(),o.preventDefault(),this._alpha=this.opacitySliderElement.sliderHandlePosition/100;const t=new a.TinyColor(this._rgbColor).setAlpha(this._alpha);this._rgbaColor=t.toRgbString(),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}handleFieldChange(o){if(o.stopPropagation(),o.preventDefault(),this.colorFieldElement.checkValidity()){const t=new a.TinyColor(this.colorFieldElement.value);this._format=t.format,this._rgbaColor=t.toRgbString(),this._alpha=t.getAlpha(),this._rgbColor=t.setAlpha(1).toRgbString(),this.noAlphaChannel&&(this._rgbaColor=this._rgbColor,this._alpha=1),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}}formatTextField(o){return this._format==="hsl"?o.toHslString():this._format==="hex"?this.noAlphaChannel?o.toHexString():o.toHex8String():(this._format==="name"&&(this._format="rgb"),o.toRgbString())}cycleFormat(){const o=["rgb","hsl","hex"];this._format=o[(o.indexOf(this._format)+1)%o.length];const t=new a.TinyColor(this.color),e=this.formatTextField(t);this.colorFieldElement.value=e}updated(o){if(o.has("color")&&this.color!==this._previousColor){this._previousColor=this.color;const t=new a.TinyColor(this.color);this._alpha=t.getAlpha(),this._rgbColor=t.setAlpha(1).toRgbString(),this._rgbaColor=t.setAlpha(this._alpha).toRgbString(),this.areaElement.color=this._rgbColor,this.hueSliderElement.color=this._rgbColor,this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._format="rgb"}o.has("noAlphaChannel")&&!this.noAlphaChannel&&(this.opacitySliderElement.color=this._rgbaColor)}renderOpacitySlider(){return i.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../luzmo-icons-D47EGj-3.cjs"),i=require("../base-CBCg3yyw.cjs"),d=require("../state-D8JEtYqe.cjs"),n=require("../query-BL-TJj7K.cjs"),g=require("../focusable-EbipgXRh.cjs"),f=require("../sized-mixin-CPxE5C96.cjs");require("../color-area/index.cjs");require("../color-field/index.cjs");require("../color-handle/index.cjs");const a=require("../index-BwxgAdzi.cjs");require("../divider/index.cjs");require("../popover/index.cjs");require("../swatch/index.cjs");const v='@charset "UTF-8";:host{width:var(--luzmo-color-menu-width, var(--color-menu-width))}.hue-opacity-text-swatches-container{display:flex;gap:var(--luzmo-color-menu-color-controls-vertical-gap, var(--color-menu-color-controls-vertical-gap));flex-direction:column;padding:var(--luzmo-color-menu-hue-opacity-text-swatches-vertical-padding, var(--color-menu-hue-opacity-text-swatches-vertical-padding)) var(--luzmo-color-menu-hue-opacity-text-swatches-horizontal-padding, var(--color-menu-hue-opacity-text-swatches-horizontal-padding))}.swatch-sliders-container{display:flex;gap:var(--luzmo-color-menu-swatch-to-sliders-space, var(--color-menu-swatch-to-sliders-space))}.swatch-example-container{display:flex;align-items:center}.field-container{display:flex;align-items:center;gap:var(--luzmo-color-menu-format-field-to-format-space, var(--color-menu-format-field-to-format-space))}.format-container{text-transform:uppercase;position:relative;background:none;border:none;outline:none;height:var(--luzmo-color-menu-format-height, var(--color-menu-format-height));cursor:pointer;font-size:var(--luzmo-color-menu-format-font-size, var(--color-menu-format-font-size));display:flex;align-items:center;color:var(--luzmo-color-menu-format-font-color, var(--color-menu-format-font-color));gap:var(--luzmo-color-menu-format-name-to-icon, var(--color-menu-format-name-to-icon-space));padding:0 var(--luzmo-color-menu-format-horizontal-padding, var(--color-menu-format-horizontal-padding))}.format-container:hover{color:var(--luzmo-color-menu-format-font-color-hover, var(--color-menu-format-font-color-hover))}.format-container:focus-visible{outline:none}.format-container:focus-visible:after{content:"";width:100%;height:100%;position:absolute;box-sizing:border-box;left:0;top:0;border:var(--luzmo-color-menu-format-indicator-width, var(--luzmo-indicator-width)) solid var(--luzmo-color-menu-format-indicator-color, var(--luzmo-indicator-color));border-radius:var(--luzmo-color-menu-format-label-indicator-border-radius, var(--luzmo-border-radius-s))}.format-container:focus-visible,.format-container:active{color:var(--luzmo-color-menu-format-font-color-down, var(--color-menu-format-font-color-down))}.format-container .format-label{-webkit-user-select:none;user-select:none}.format-container .angle-icon{display:flex;align-items:center;height:calc(var(--color-menu-format-font-size) / 1.5)}.slider-container{display:flex;flex-direction:column;justify-content:center;gap:var(--luzmo-color-menu-slider-gap, var(--color-menu-slider-gap))}luzmo-color-area{width:100%;height:var(--luzmo-color-menu-height, var(--color-menu-height))}luzmo-color-slider{width:100%}luzmo-divider{margin:var(--luzmo-spacing-5) à}.swatches-container{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--luzmo-color-menu-swatches-gap, var(--color-menu-swatches-gap))}.swatches-container luzmo-swatch{cursor:pointer}.swatches-container .swatch-choice{display:flex;align-items:center;justify-content:center}:host{--luzmo-text-field-icon-size-valid: 0px;--luzmo-text-field-icon-spacing-inline-end-valid: 1px;--luzmo-text-field-text-align: center}:host{--color-menu-width: 290px;--luzmo-text-field-width: 220px;--luzmo-color-slider-control-track-width: 8px;--color-menu-height: 140px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height);--color-menu-format-font-size: var(--luzmo-font-size-s);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-3);--color-menu-format-font-color: var(--luzmo-font-color);--color-menu-format-font-color-hover: var(--luzmo-font-color-hover);--color-menu-format-font-color-down: var(--luzmo-font-color-down);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host .swatches-container{--luzmo-swatch-size: 22px}:host([size=s]){--color-menu-width: 260px;--luzmo-text-field-width: 200px;--luzmo-color-slider-control-track-width: 8px;--color-menu-hue-opacity-text-swatches-horizontal-padding: var( --luzmo-spacing-5 );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-4 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-4);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-4);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-s);--color-menu-format-font-size: var(--luzmo-font-size-xs);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-2);--color-menu-swatches-gap: var(--luzmo-spacing-3)}:host([size=s]) .swatches-container{--luzmo-swatch-size: 20px}:host([size=l]){--color-menu-width: 350px;--luzmo-text-field-width: 240px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-format-height: var(--luzmo-component-height-l);--color-menu-format-font-size: var(--luzmo-font-size);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=l]) .swatches-container{--luzmo-swatch-size: 24px}:host([size=l]) .swatch-example-container{--luzmo-swatch-size: 56px}:host([size=xl]){--color-menu-width: 380px;--luzmo-text-field-width: 280px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-color-controls-vertical-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-swatch-to-sliders-space: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-xl);--color-menu-format-font-size: var(--luzmo-font-size-l);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-3);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=xl]) .swatches-container{--luzmo-swatch-size: 26px}:host([size=xl]) .swatch-example-container{--luzmo-swatch-size: 64px}';var z=Object.defineProperty,l=(u,o,t,e)=>{for(var s=void 0,h=u.length-1,p;h>=0;h--)(p=u[h])&&(s=p(o,t,s)||s);return s&&z(o,t,s),s};const m=class m extends f.SizedMixin(g.Focusable){constructor(){super(...arguments),this.color="rgb(255, 0, 0)",this.noAlphaChannel=!1,this._alpha=1,this._rgbColor="rgb(255, 0, 0)",this._rgbaColor="rgb(255, 0, 0, 1)",this._previousColor="rgb(255, 0, 0)"}setColor(o){var e;const t=new a.TinyColor((e=o==null?void 0:o.target)==null?void 0:e.color);this._format=t.format==="name"?"rgb":t.format,this._rgbaColor=t.toRgbString(),this._alpha=this.noAlphaChannel?1:t.getAlpha(),this._rgbColor=t.setAlpha(1).toRgbString(),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this.colorFieldElement.value=this.formatTextField(t),this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}handleAreaChange(o){o.stopPropagation(),o.preventDefault(),this._rgbColor=this.areaElement.color;const t=new a.TinyColor(this._rgbColor);this._rgbaColor=t.setAlpha(this._alpha).toRgbString(),this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}get focusElement(){return this.areaElement||this.colorFieldElement||this}handleHueSliderChange(o){o.stopPropagation(),o.preventDefault();const t=new a.TinyColor(this._rgbColor).toHsl();t.h=this.hueSliderElement.value;const e=new a.TinyColor(t);this._rgbColor=e.toRgbString(),this._rgbaColor=e.setAlpha(this._alpha).toRgbString(),this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(e),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}handleOpacitySliderChange(o){o.stopPropagation(),o.preventDefault(),this._alpha=this.opacitySliderElement.sliderHandlePosition/100;const t=new a.TinyColor(this._rgbColor).setAlpha(this._alpha);this._rgbaColor=t.toRgbString(),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}handleFieldChange(o){if(o.stopPropagation(),o.preventDefault(),this.colorFieldElement.checkValidity()){const t=new a.TinyColor(this.colorFieldElement.value);this._format=t.format,this._rgbaColor=t.toRgbString(),this._alpha=t.getAlpha(),this._rgbColor=t.setAlpha(1).toRgbString(),this.noAlphaChannel&&(this._rgbaColor=this._rgbColor,this._alpha=1),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}}formatTextField(o){return this._format==="hsl"?o.toHslString():this._format==="hex"?this.noAlphaChannel?o.toHexString():o.toHex8String():(this._format==="name"&&(this._format="rgb"),o.toRgbString())}cycleFormat(){const o=["rgb","hsl","hex"];this._format=o[(o.indexOf(this._format)+1)%o.length];const t=new a.TinyColor(this.color),e=this.formatTextField(t);this.colorFieldElement.value=e}updated(o){if(o.has("color")&&this.color!==this._previousColor){this._previousColor=this.color;const t=new a.TinyColor(this.color);this._alpha=t.getAlpha(),this._rgbColor=t.setAlpha(1).toRgbString(),this._rgbaColor=t.setAlpha(this._alpha).toRgbString(),this.areaElement.color=this._rgbColor,this.hueSliderElement.color=this._rgbColor,this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._format="rgb"}o.has("noAlphaChannel")&&!this.noAlphaChannel&&(this.opacitySliderElement.color=this._rgbaColor)}renderOpacitySlider(){return i.x`
       <luzmo-color-slider
         id="luzmo-opacity-slider"
         mode="opacity"
@@ -60,8 +60,8 @@
             >
               <div class="format-label">${this._format}</div>
               <div class="change-format-icon">
-                <div class="angle-icon">${c.O2(c.b)}</div>
-                <div class="angle-icon">${c.O2(c.T)}</div>
+                <div class="angle-icon">${c.p3(c.b)}</div>
+                <div class="angle-icon">${c.p3(c.T)}</div>
               </div>
             </button>
           </div>

package/components/color-menu/index.js

@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { O as p, b as z, T as f } from "../luzmo-icons-DbwDQtuO.js";
+import { p, b as z, T as f } from "../luzmo-icons-NEyaMpEM.js";
 import { r as v, x as s, n as h } from "../base-WsynuqaS.js";
 import { r as b } from "../state-Deh-vKYE.js";
 import { e as n } from "../query-D_KR_GUc.js";
@@ -24,11 +24,10 @@ import { S as w } from "../sized-mixin-D4ACoVUr.js";
 import "../color-area/index.js";
 import "../color-field/index.js";
 import "../color-handle/index.js";
-import "../color-slider/index.js";
+import { T as a } from "../index-HjQa8tew.js";
 import "../divider/index.js";
 import "../popover/index.js";
 import "../swatch/index.js";
-import { T as a } from "../index-C1chwzNp.js";
 const g = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const i = document.createElement("style");

package/components/color-slider/index.cjs

@@ -15,43 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../base-CBCg3yyw.cjs"),u=require("../query-BL-TJj7K.cjs"),d=require("../if-defined-C9YGdo33.cjs"),p=require("../style-map-CeilmSgs.cjs");require("../color-handle/index.cjs");const b=require("../focusable-EbipgXRh.cjs"),m=require("../color-DphK4hwx.cjs"),g=require("../language-resolution-DJzmyzZq.cjs"),v=require("../streaming-listener-B00MvALi.cjs"),h=require("../index-DCKCHDTt.cjs"),f='.opacity-checkerboard{position:absolute;block-size:100%;inline-size:100%;background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-color-loupe-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-color-loupe-checkerboard-position, left top)/calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2) calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2)}:host{--luzmo-color-slider-gradient-fallback: rgb(255 0 0) 0%, rgb(255 255 0) 17%, rgb(0 255 0) 33%, rgb(0 255 255) 50%, rgb(0 0 255) 67%, rgb(255 0 255) 83%, rgb(255 0 0) 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){width:100%;height:100%}@media (forced-colors: active){:host{--highcontrast-color-slider-border-color: CanvasText;--highcontrast-color-slider-border-color-disabled: GrayText;--highcontrast-color-slider-background-color-disabled: Canvas;forced-color-adjust:none}}:host{--luzmo-color-handle-hitarea-border-radius: var( --luzmo-color-slider-handle-hitarea-border-radius, 0px );min-inline-size:var(--luzmo-color-slider-minimum-length, 80px);inline-size:var(--luzmo-color-slider-length, 192px);block-size:var(--luzmo-color-slider-control-track-width, 24px);-webkit-user-select:none;user-select:none;cursor:default;display:block;position:relative}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([disabled]) .gradient{display:none}:host([vertical]){min-block-size:var(--luzmo-color-slider-vertical-minimum-height, var(--luzmo-color-slider-minimum-length, 80px));block-size:var(--luzmo-color-slider-vertical-height, var(--luzmo-color-slider-length, 192px));min-inline-size:0;inline-size:var(--luzmo-color-slider-vertical-control-track-width, var(--luzmo-color-slider-control-track-height, 24px));display:inline-block}:host([vertical]) .handle{inset-inline-start:50%}.handle{inset-block-start:50%;inset-inline-start:0}.checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color, var(--luzmo-color-slider-border-color, var(--luzmo-border-color)) )}.checkerboard:before{content:"";z-index:1;box-shadow:inset 0 0 0 var(--luzmo-color-slider-border-width, var(--luzmo-border-width)) var(--luzmo-color-slider-border-color-local);border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s));position:absolute;top:0;right:0;bottom:0;left:0}:host([disabled]) .checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color-disabled, var(--luzmo-color-slider-border-color-disabled, var(--luzmo-dimmed-color)) );background:var(--highcontrast-color-slider-background-color-disabled, var(--luzmo-color-slider-background-color-disabled, var(--luzmo-dimmed-color)))}.checkerboard,.gradient{inline-size:100%;block-size:100%;border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s))}.gradient:dir(rtl),:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider{opacity:0;inline-size:100%;block-size:100%;z-index:0;pointer-events:none;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}';var y=Object.defineProperty,z=Object.getOwnPropertyDescriptor,l=(c,e,t,o)=>{for(var s=o>1?void 0:o?z(e,t):e,a=c.length-1,n;a>=0;a--)(n=c[a])&&(s=(o?n(e,t,s):n(s))||s);return o&&s&&y(e,t,s),s};class r extends b.Focusable{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.label="hue",this.vertical=!1,this.languageResolver=new g.LanguageResolutionController(this),this.colorController=new m.ColorController(this,{applyColorToState:()=>{if(this.mode==="opacity"){const e=new h.TinyColor(this.colorController.color);this.sliderHandlePosition=100*e.getAlpha()}else this.sliderHandlePosition=100*(this.colorController.hue/360)},extractColorFromState:e=>this.mode==="opacity"?{...e.getColor("hsl"),a:this.value}:{...e.getColor("hsl"),h:this.value},maintains:"saturation"}),this.sliderHandlePosition=0,this.step=1,this.isLTR=!0,this._altered=0,this._pointerDown=!1}static get styles(){return[i.r(f)]}get value(){return this.mode==="opacity"?this.colorController.opacity:this.colorController.hue}set value(e){this.mode==="opacity"?this.colorController.opacity=e:this.colorController.hue=e}get color(){return this.colorController.color}set color(e){this.colorController.color=e}get altered(){return this._altered}set altered(e){this._altered=e,this.step=Math.max(1,this.altered*10)}get focusElement(){return this.input}handleKeydown(e){const{key:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(n=>!!n).length;let o=0;switch(t){case"ArrowUp":{o=this.step;break}case"ArrowDown":{o=-this.step;break}case"ArrowLeft":{o=this.step*(this.isLTR?-1:1);break}case"ArrowRight":{o=this.step*(this.isLTR?1:-1);break}default:return}e.preventDefault();const a=100/(this.mode==="opacity"?100:360);this.sliderHandlePosition=Math.min(100,Math.max(0,this.sliderHandlePosition+o*a)),this.value=this.mode==="opacity"?Math.min(1,Math.max(0,this.value+o/100)):Math.min(360,Math.max(0,this.value+o)),this.colorController.applyColorFromState(),o!==0&&(this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}handleInput(e){const{valueAsNumber:t}=e.target;this.value=t,this.sliderHandlePosition=100*(this.mode==="opacity"?this.value:this.value/360),this.colorController.applyColorFromState()}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.input.focus()}handleFocus(){this.focused=!0}handleBlur(){this._pointerDown||(this.altered=0,this.focused=!1)}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect(),e.target.setPointerCapture(e.pointerId),e.pointerType==="mouse"&&(this.focused=!0)}handlePointermove(e){this.sliderHandlePosition=this.calculateHandlePosition(e),this.value=(this.mode==="opacity"?1:360)*(this.sliderHandlePosition/100),this.colorController.applyColorFromState(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){this._pointerDown=!1,e.target.releasePointerCapture(e.pointerId),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor(),this.focus(),e.pointerType==="mouse"&&(this.focused=!1)}calculateHandlePosition(e){if(!this.boundingClientRect)return this.sliderHandlePosition;const t=this.boundingClientRect,o=this.vertical?t.top:t.left,s=this.vertical?e.clientY:e.clientX,a=this.vertical?t.height:t.width,n=Math.max(0,Math.min(1,(s-o)/a));return this.vertical||!this.isLTR?100-100*n:100*n}handleGradientPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",e)),this.handlePointermove(e))}get handlePositionStyles(){return`${this.vertical?"inset-block-end":"inset-inline-start"}: ${this.sliderHandlePosition}%`}get getColorSliderStyle(){const e=this.vertical?"top":"right";if(this.mode==="opacity"){const t=new h.TinyColor(this.colorController.color).setAlpha(1).toRgbString();return{background:`linear-gradient(to ${e}, transparent, ${t})`}}return{background:`linear-gradient(to ${e}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))`}}render(){return i.x`
-      <div
-        class="opacity-checkerboard checkerboard"
-        role="presentation"
-        @pointerdown=${this.handleGradientPointerdown}
-      >
-        <div
-          class="gradient"
-          role="presentation"
-          style=${p.o(this.getColorSliderStyle)}
-        >
-          <slot name="gradient"></slot>
-        </div>
-      </div>
-      <luzmo-color-handle
-        tabindex=${d.o(this.focused?void 0:"0")}
-        @focus=${this.forwardFocus}
-        ?focused=${this.focused}
-        class="handle"
-        color=${this.mode==="opacity"?this.color:"hsl("+this.value+", 100%, 50%)"}
-        ?disabled=${this.disabled}
-        style=${this.handlePositionStyles}
-        ${v.streamingListener({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
-      ></luzmo-color-handle>
-      <input
-        type="range"
-        class="slider"
-        min="0"
-        max=${this.mode==="opacity"?"100":"360"}
-        aria-orientation=${d.o(this.vertical?"vertical":void 0)}
-        orient=${d.o(this.vertical?"vertical":void 0)}
-        step=${this.step}
-        aria-label=${this.label}
-        .value=${String(this.mode==="opacity"?this.value*100:this.value)}
-        aria-valuetext=${`${new Intl.NumberFormat(this.languageResolver.language,{maximumFractionDigits:0,minimumIntegerDigits:1,style:"unit",unit:this.mode==="opacity"?"percent":"degree",unitDisplay:"narrow"}).format(this.mode==="opacity"?this.value*100:this.value)}`}
-        @input=${this.handleInput}
-        @change=${this.handleChange}
-        @keydown=${this.handleKeydown}
-      />
-    `}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur)}updated(e){e.has("mode")&&(this.handle.style.insetInlineStart="",this.handle.style.insetBlockEnd="",this.mode==="opacity"&&(this.colorController.color=new h.TinyColor(this.colorController.color).toRgbString(),this.handle.style.insetInlineStart=100*this.colorController.opacity+"%"))}}l([i.n({type:String,reflect:!0})],r.prototype,"dir",2);l([i.n({type:String,reflect:!0})],r.prototype,"mode",2);l([i.n({type:Boolean,reflect:!0})],r.prototype,"disabled",2);l([i.n({type:Boolean,reflect:!0})],r.prototype,"focused",2);l([u.e(".handle")],r.prototype,"handle",2);l([i.n({type:String})],r.prototype,"label",2);l([i.n({type:Boolean,reflect:!0})],r.prototype,"vertical",2);l([i.n({type:Number})],r.prototype,"value",1);l([i.n({type:Number,reflect:!0})],r.prototype,"sliderHandlePosition",2);l([i.n({type:String})],r.prototype,"color",1);l([i.n({type:Number})],r.prototype,"step",2);l([i.n({type:Boolean,attribute:"is-ltr"})],r.prototype,"isLTR",2);l([u.e("input")],r.prototype,"input",2);customElements.get("luzmo-color-slider")||customElements.define("luzmo-color-slider",r);exports.LuzmoColorSlider=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../index-BwxgAdzi.cjs");exports.LuzmoColorSlider=e.LuzmoColorSlider;