@ax-design/reveal-highlight 0.3.0-alpha.6 → 0.4.0

package/build/main.js

@@ -1,28 +1,141 @@
-(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports):"function"==typeof define&&define.amd?define(["exports"],b):(a="undefined"==typeof globalThis?a||self:globalThis,b(a.AxRevealHighlight={}))})(this,function(a){'use strict';var d=Math.max;function e(a){return k.compat?new l(a):new m(a)}function f(){customElements.define(v.ElementName,v),customElements.define(w.ElementName,w),customElements.define(x.ElementName,x)}function g({compat:a=!1,borderDetectionMode:b="strictEdge"}){if(y)return void console.warn("You have already registered Ax RevealHighlight, please do not call this function repeatedly.");if(k.borderDetectionMode=b,k.compat=a,y=!0,window.CSS&&window.CSS.registerProperty)window.CSS.registerProperty({name:"--reveal-color",syntax:"<color>",initialValue:"rgb(0, 0, 0)",inherits:!0}),window.CSS.registerProperty({name:"--reveal-opacity",syntax:"<number>",initialValue:"0.26",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-style",syntax:"<custom-ident>",initialValue:"full",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-color",syntax:"<color>",initialValue:n,inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-width",syntax:"<length>",initialValue:"1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-fill-radius",syntax:"<number>",initialValue:"1.5",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-type",syntax:"<custom-ident>",initialValue:"miter",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-radius",syntax:"<length>",initialValue:"4px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-top-left-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-top-right-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-bottom-left-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-bottom-right-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-left",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-right",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-top",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-bottom",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-color",syntax:"<color>",initialValue:n,inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-fill-radius",syntax:"<number>",initialValue:"1.5",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-fill-radius-mode",syntax:"<custom-ident>",initialValue:"relative",inherits:!0}),window.CSS.registerProperty({name:"--reveal-diffuse",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-color",syntax:"<color>",initialValue:n,inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-radius-mode",syntax:"<custom-ident>",initialValue:"cover",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-speed",syntax:"<number>",initialValue:"2000",inherits:!0}),window.CSS.registerProperty({name:"--reveal-release-animation-accelerate-rate",syntax:"<number>",initialValue:"6",inherits:!0}),f();else if(a){const a=document.documentElement;a.style.setProperty("--reveal-color","rgb(0, 0, 0)"),a.style.setProperty("--reveal-opacity","0.26"),a.style.setProperty("--reveal-border-style","full"),a.style.setProperty("--reveal-border-color",n),a.style.setProperty("--reveal-border-width","1px"),a.style.setProperty("--reveal-border-fill-radius","1.5"),a.style.setProperty("--reveal-border-decoration-type","miter"),a.style.setProperty("--reveal-border-decoration-radius","4"),a.style.setProperty("--reveal-border-decoration-top-left-radius","-1"),a.style.setProperty("--reveal-border-decoration-top-right-radius","-1"),a.style.setProperty("--reveal-border-decoration-bottom-left-radius","-1"),a.style.setProperty("--reveal-border-decoration-bottom-right-radius","-1"),a.style.setProperty("--reveal-border-left","line"),a.style.setProperty("--reveal-border-right","line"),a.style.setProperty("--reveal-border-top","line"),a.style.setProperty("--reveal-border-bottom","line"),a.style.setProperty("--reveal-hover-light","true"),a.style.setProperty("--reveal-hover-light-color",n),a.style.setProperty("--reveal-hover-light-fill-radius","1.5"),a.style.setProperty("--reveal-hover-light-fill-radius-mode","relative"),a.style.setProperty("--reveal-diffuse","true"),a.style.setProperty("--reveal-press-animation","true"),a.style.setProperty("--reveal-press-animation-radius-mode","cover"),a.style.setProperty("--reveal-press-animation-color",n),a.style.setProperty("--reveal-press-animation-speed","2000"),a.style.setProperty("--reveal-release-animation-accelerate-rate","6"),f()}else console.warn("Your browser do NOT support `CSS.registerProperty` method, registration failed!"),console.warn("If you are the developer, try using `register(true)` to support old browsers.")}let h="strictEdge",i=!1;class j extends Error{constructor(){super("Border detection mode has already been initialized."),this.name="InitializedError"}}const k={compat:!1,get borderDetectionMode(){return h},set borderDetectionMode(a){if(i)throw new j;h=a,i=!0}};class l{constructor(a){if(!l.colorParser){const a=document.createElement("div");a.style.display="none !important",document.body.appendChild(a),l.colorParser=a,l.colorParserStyle=window.getComputedStyle(a)}this.el=a,this.style=window.getComputedStyle(a)}size(){return this.style.length}get(a){return this.style.getPropertyValue(a).trim()}getColor(a){return l.colorParser.style.color=this.get(a),l.colorParserStyle.color||"rgb(0, 0, 0)"}getNumber(a){// Length values in computed style will always in the unit of px
+(function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):(e="undefined"==typeof globalThis?e||self:globalThis,t(e.AxRevealHighlight={}))})(this,function(e){'use strict';var t=Number.isNaN,r=Math.max,a=Math.floor;function i(e){return c.compat?new u(e):new p(e)}function o(){customElements.define(x.ElementName,x),customElements.define(F.ElementName,F),customElements.define(P.ElementName,P),customElements.define(C.ElementName,C)}function n({compat:e=!1,borderDetectionMode:t="strictEdge"}){if(B)return void console.warn("You have already registered Ax RevealHighlight, please do not call this function repeatedly.");if(c.borderDetectionMode=t,c.compat=e,B=!0,window.CSS&&window.CSS.registerProperty)window.CSS.registerProperty({name:"--reveal-color",syntax:"<color>",initialValue:"rgb(0, 0, 0)",inherits:!0}),window.CSS.registerProperty({name:"--reveal-opacity",syntax:"<number>",initialValue:"0.26",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-color",syntax:`<color>|${w}`,initialValue:w,inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-width",syntax:"<length>",initialValue:"1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-fill-radius",syntax:"<number>",initialValue:"1.5",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-type",syntax:"<custom-ident>",initialValue:"miter",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-radius",syntax:"<length>",initialValue:"0",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-top-left-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-top-right-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-bottom-left-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-bottom-right-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-left-type",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-right-type",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-top-type",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-bottom-type",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-color",syntax:`<color>|${w}`,initialValue:w,inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-fill-radius",syntax:"<number>",initialValue:"1.5",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-fill-radius-mode",syntax:"<custom-ident>",initialValue:"relative",inherits:!0}),window.CSS.registerProperty({name:"--reveal-diffuse",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-color",syntax:`<color>|${w}`,initialValue:w,inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-radius-mode",syntax:"<custom-ident>",initialValue:"cover",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-speed",syntax:"<number>",initialValue:"2000",inherits:!0}),window.CSS.registerProperty({name:"--reveal-release-animation-accelerate-rate",syntax:"<number>",initialValue:"6",inherits:!0}),o();else if(e){const e=document.documentElement;e.style.setProperty("--reveal-color","rgb(0, 0, 0)"),e.style.setProperty("--reveal-opacity","0.26"),e.style.setProperty("--reveal-border-color",w),e.style.setProperty("--reveal-border-width","1px"),e.style.setProperty("--reveal-border-fill-radius","1.5"),e.style.setProperty("--reveal-border-decoration-type","miter"),e.style.setProperty("--reveal-border-decoration-radius","0"),e.style.setProperty("--reveal-border-decoration-top-left-radius","-1"),e.style.setProperty("--reveal-border-decoration-top-right-radius","-1"),e.style.setProperty("--reveal-border-decoration-bottom-left-radius","-1"),e.style.setProperty("--reveal-border-decoration-bottom-right-radius","-1"),e.style.setProperty("--reveal-border-left-type","line"),e.style.setProperty("--reveal-border-right-type","line"),e.style.setProperty("--reveal-border-top-type","line"),e.style.setProperty("--reveal-border-bottom-type","line"),e.style.setProperty("--reveal-hover-light","true"),e.style.setProperty("--reveal-hover-light-color",w),e.style.setProperty("--reveal-hover-light-fill-radius","1.5"),e.style.setProperty("--reveal-hover-light-fill-radius-mode","relative"),e.style.setProperty("--reveal-diffuse","true"),e.style.setProperty("--reveal-press-animation","true"),e.style.setProperty("--reveal-press-animation-radius-mode","cover"),e.style.setProperty("--reveal-press-animation-color",w),e.style.setProperty("--reveal-press-animation-speed","2000"),e.style.setProperty("--reveal-release-animation-accelerate-rate","6"),o()}else console.warn("Your browser do NOT support `CSS.registerProperty` method, registration failed!"),console.warn("If you are the developer, try using `register(true)` to support old browsers.")}let l="strictEdge",d=!1;class s extends Error{constructor(){super("Border detection mode has already been initialized."),this.name="InitializedError"}}const c={compat:!1,get borderDetectionMode(){return l},set borderDetectionMode(e){if(d)throw new s;l=e,d=!0}};class u{constructor(e){if(!u.colorParser){const e=document.createElement("div");e.style.display="none !important",document.body.appendChild(e),u.colorParser=e,u.colorParserStyle=window.getComputedStyle(e)}this.el=e,this.style=window.getComputedStyle(e)}size(){return this.style.length}get(e){return this.style.getPropertyValue(e).trim()}getColor(e){return u.colorParser.style.color=this.get(e),u.colorParserStyle.color||"rgb(0, 0, 0)"}getNumber(e){// Length values in computed style will always in the unit of px
 // Maybe NaN
-return parseFloat(this.get(a))}}class m{constructor(a){this.el=a,this.style=a.computedStyleMap()}size(){return this.style.size}get(a){return this.style.get(a).toString()}getColor(a){return this.get(a)}getNumber(a){const b=this.style.get(a).value;return"number"==typeof b?b:parseFloat(b);// Maybe NaN
-}}const n="rgba(-1, -1, -1)",o=a=>"round"===a||"bevel"===a||"miter"===a,p=a=>{if("#"===a[0]){// Thanks bro:
+return parseFloat(this.get(e))}}class p{constructor(e){this.el=e,this.style=e.computedStyleMap()}size(){return this.style.size}get(e){return this.style.get(e).toString()}getColor(e){return this.get(e)}getNumber(e){const t=this.style.get(e).value;return"number"==typeof t?t:parseFloat(t);// Maybe NaN
+}}const m=e=>{if(""===e)return"";if("#"===e[0]){// Thanks bro:
 // https://stackoverflow.com/a/11508164/3931936
-const b=parseInt(a.substring(1),16);var c=255&b>>16,d=255&b>>8,e=255&b;return c+","+d+","+e}else{let b="",c=!1,d=0;for(let e=0;e<a.length;e++){const f=a[e],g=f.charCodeAt(0)-48;if(" "!==f){if(c&&!(0<=g&&10>g)&&","!==f&&")"!==f)throw new SyntaxError(`${a} is not a validate color value!`);if(!c&&"("===f){c=!0;continue}if(2>d&&")"===f)throw new SyntaxError(`${a} should have at least three color channel`);if(","===f&&d++,")"===f)return b;c&&(b+=f)}}return b}},q=()=>document.createElement("canvas");class r{constructor(a,b,c){var f=Math.floor;this.pxRatio=window.devicePixelRatio||1,this.paintedWidth=0,this.paintedHeight=0,this.currentFrameId=-1,this.cachedBoundingRectFrameId=-2,this.cachedBoundingRect={top:-1,left:-1,width:-1,height:-1},this.cachedStyleFrameId=-2,this.cachedStyle={trueFillRadius:[0,0],color:"",opacity:1,borderStyle:"",borderColor:"",borderFillRadius:0,borderDecorationType:"miter",borderDecorationRadius:0,topLeftBorderDecorationRadius:0,topRightBorderDecorationRadius:0,bottomLeftBorderDecorationRadius:0,bottomRightBorderDecorationRadius:0,withLeftBorderFactor:1,withRightBorderFactor:1,withTopBorderFactor:1,withBottomBorderFactor:1,borderWidth:1,hoverLight:!0,hoverLightColor:"",hoverLightFillMode:"",hoverLightFillRadius:0,diffuse:!0,pressAnimation:!0,pressAnimationFillMode:"",pressAnimationColor:"",pressAnimationSpeed:0,releaseAnimationAccelerateRate:0},this.mouseUpClientX=null,this.mouseUpClientY=null,this.mouseDownAnimateStartFrame=null,this.mouseDownAnimateCurrentFrame=null,this.mouseDownAnimateReleasedFrame=null,this.mouseDownAnimateLogicFrame=null,this.mousePressed=!1,this.mouseReleased=!1,this.cacheBoundingRect=()=>{if(this.currentFrameId!==this.cachedBoundingRectFrameId){const a=this.canvas.getBoundingClientRect();this.cachedBoundingRect.top=f(a.top),this.cachedBoundingRect.left=f(a.left),this.cachedBoundingRect.width=f(a.width),this.cachedBoundingRect.height=f(a.height),this.cachedBoundingRectFrameId=this.currentFrameId}},this.getTrueFillRadius=(a=[0,0],c=this.computedStyle.get("--reveal-hover-light-fill-radius-mode"))=>{var e=Math.min;const f=this.cachedBoundingRect;switch(c){case"relative":a[0]=e(f.width,f.height),a[1]=d(f.width,f.height);break;case"absolute":a[0]=-1,a[1]=-1;break;default:throw new SyntaxError("The value of `--reveal-border-style` must be `relative`, `absolute`!");}return this._store.updateMaxRadius(d(a[0],a[1])),a},this.getPropFromMultipleSource=(a,b)=>{const c=this.container.dataset[a];return c?c:this.computedStyle.get(b)},this.cacheCanvasPaintingStyle=()=>{if(this.currentFrameId===this.cachedStyleFrameId)return;if(0===this.computedStyle.size())return;const a=p(this.computedStyle.getColor("--reveal-color"))||"0, 0, 0",b=p(this.computedStyle.getColor("--reveal-border-color")),d=p(this.computedStyle.getColor("--reveal-hover-light-color")),e=p(this.computedStyle.getColor("--reveal-press-animation-color")),f=this.cachedStyle;f.color=a,f.opacity=this.computedStyle.getNumber("--reveal-opacity"),f.borderStyle=this.computedStyle.get("--reveal-border-style"),f.borderColor=b===n?a:b,f.borderFillRadius=this.computedStyle.getNumber("--reveal-border-fill-radius"),f.borderDecorationType=this.computedStyle.get("--reveal-border-decoration-type")||"miter",f.borderWidth=this.computedStyle.getNumber("--reveal-border-width"),f.withLeftBorderFactor="line"===this.getPropFromMultipleSource("leftBorder","--reveal-border-left")?1:0,f.withRightBorderFactor="line"===this.getPropFromMultipleSource("rightBorder","--reveal-border-right")?1:0,f.withTopBorderFactor="line"===this.getPropFromMultipleSource("topBorder","--reveal-border-top")?1:0,f.withBottomBorderFactor="line"===this.getPropFromMultipleSource("bottomBorder","--reveal-border-bottom")?1:0,f.hoverLight="true"===this.computedStyle.get("--reveal-hover-light"),f.hoverLightColor=d===n?a:d,f.hoverLightFillRadius=this.computedStyle.getNumber("--reveal-hover-light-fill-radius"),f.hoverLightFillMode=this.computedStyle.get("--reveal-hover-light-fill-radius-mode"),f.diffuse="true"===this.computedStyle.get("--reveal-diffuse"),f.pressAnimation="true"===this.computedStyle.get("--reveal-press-animation"),f.pressAnimationFillMode=this.computedStyle.get("--reveal-press-animation-radius-mode"),f.pressAnimationColor=e===n?a:e,f.pressAnimationSpeed=this.computedStyle.getNumber("--reveal-press-animation-speed"),f.releaseAnimationAccelerateRate=this.computedStyle.getNumber("--reveal-release-animation-accelerate-rate");// Border decoration related configurations
-const c=this.computedStyle.getNumber("--reveal-border-decoration-radius"),g=this.computedStyle.getNumber("--reveal-border-decoration-top-left-radius"),h=this.computedStyle.getNumber("--reveal-border-decoration-top-right-radius"),i=this.computedStyle.getNumber("--reveal-border-decoration-bottom-left-radius"),j=this.computedStyle.getNumber("--reveal-border-decoration-bottom-right-radius");if(f.topLeftBorderDecorationRadius=0<=g?g:c,f.topRightBorderDecorationRadius=0<=h?h:c,f.bottomLeftBorderDecorationRadius=0<=i?i:c,f.bottomRightBorderDecorationRadius=0<=j?j:c,this.getTrueFillRadius(f.trueFillRadius,f.hoverLightFillMode),!o(f.borderDecorationType))throw new SyntaxError("The value of `--reveal-border-decoration-type` must be `round`, `bevel` or `miter`!");this.cachedStyleFrameId=this.currentFrameId},this.updateCachedReveal=()=>{const a=this.cachedStyle,b=a.trueFillRadius[1]*this.pxRatio,c=this.cachedImg.cachedReveal,{borderReveal:d,fillReveal:e}=this.cachedImg.cachedCanvas,{borderReveal:f,fillReveal:g}=this.cachedImg.cachedCtx;for(let h=0;2>h;h++){// 0 means border, 1 means hover light.
+const i=parseInt(e.substring(1),16);var t=255&i>>16,r=255&i>>8,a=255&i;return t+","+r+","+a}else{let t="",r=!1,a=0;for(let o=0;o<e.length;o++){const i=e[o],n=i.charCodeAt(0)-48;if(" "!==i){if(r&&!(0<=n&&10>n)&&","!==i&&")"!==i)throw new SyntaxError(`${e} is not a validate color value!`);if(!r&&"("===i){r=!0;continue}if(2>a&&")"===i)throw new SyntaxError(`${e} should have at least three color channel`);if(","===i&&a++,")"===i)return t;r&&(t+=i)}}return t}},h=e=>"round"===e||"bevel"===e||"miter"===e;class y{constructor(e,t,o){/**
+             * If is cleaned up by `RevealBoundaryStore` during animation
+             * duration checkup.
+             */this.pxRatio=window.devicePixelRatio||1,this.paintedWidth=0,this.paintedHeight=0,this.currentFrameId=-1,this.cachedBoundingRectFrameId=-2,this.cachedBoundingRect={top:-1,left:-1,width:-1,height:-1},this.cachedStyleFrameId=-2,this.cachedStyle={trueFillRadius:[0,0],color:"",opacity:1,borderColor:"",borderFillRadius:0,borderDecorationType:"miter",borderDecorationRadius:0,topLeftBorderDecorationRadius:0,topRightBorderDecorationRadius:0,bottomLeftBorderDecorationRadius:0,bottomRightBorderDecorationRadius:0,withLeftBorderFactor:1,withRightBorderFactor:1,withTopBorderFactor:1,withBottomBorderFactor:1,borderWidth:1,hoverLight:!0,hoverLightColor:"",hoverLightFillMode:"",hoverLightFillRadius:0,diffuse:!0,pressAnimation:!0,pressAnimationFillMode:"",pressAnimationColor:"",pressAnimationSpeed:0,releaseAnimationAccelerateRate:0},this.dirty=!1,this.shapeDirty=!0,this.fillDirty=!0,this.animationDirty=!0,this.cleanedUpForAnimation=!1,this.mouseUpClientX=null,this.mouseUpClientY=null,this.mouseDownAnimateStartFrame=null,this.mouseDownAnimateCurrentFrame=null,this.mouseDownAnimateReleasedFrame=null,this.mouseDownAnimateLogicFrame=null,this.mousePressed=!1,this.mouseReleased=!1,this.cacheBoundingRect=()=>{if(this.currentFrameId!==this.cachedBoundingRectFrameId){const e=this.container.getBoundingClientRect();this.cachedBoundingRect.top=a(e.top),this.cachedBoundingRect.left=a(e.left),this.cachedBoundingRect.width=a(e.width),this.cachedBoundingRect.height=a(e.height),this.cachedBoundingRectFrameId=this.currentFrameId}},this.getTrueFillRadius=(e=[0,0],t=this.computedStyle.get("--reveal-hover-light-fill-radius-mode")||"relative")=>{const a=this.cachedBoundingRect;switch(t){case"relative":e[0]=Math.min(a.width,a.height),e[1]=r(a.width,a.height);break;case"absolute":e[0]=-1,e[1]=-1;break;default:throw new SyntaxError("The value of `--reveal-hover-light-fill-radius-mode` must be `relative`, `absolute`, but got `"+t+"`!");}return e},this.getPropFromMultipleSource=(e,t)=>{const r=this.container.dataset[e];return r?r:this.computedStyle.get(t)},this.getNumberPropFromMultipleSource=(e,t)=>{var r=Number.parseFloat;const a=this.container.dataset[e];return a?r(a):this.computedStyle.getNumber(t)},this.cacheCanvasPaintingStyle=()=>{if(this.currentFrameId===this.cachedStyleFrameId)return;if(0===this.computedStyle.size())return;const e=m(this.computedStyle.getColor("--reveal-color"))||"0, 0, 0",t=m(this.computedStyle.getColor("--reveal-border-color"))||e,a=m(this.computedStyle.getColor("--reveal-hover-light-color"))||e,i=m(this.computedStyle.getColor("--reveal-press-animation-color"))||e,o=e,n=this.computedStyle.getNumber("--reveal-opacity"),l=t,d=this.computedStyle.getNumber("--reveal-border-fill-radius"),s=this.computedStyle.get("--reveal-border-decoration-type")||"miter",u=this.computedStyle.getNumber("--reveal-border-width"),p="line"===this.getPropFromMultipleSource("leftBorder","--reveal-border-left-type")?1:0,y="line"===this.getPropFromMultipleSource("rightBorder","--reveal-border-right-type")?1:0,v="line"===this.getPropFromMultipleSource("topBorder","--reveal-border-top-type")?1:0,g="line"===this.getPropFromMultipleSource("bottomBorder","--reveal-border-bottom-type")?1:0,R="true"===this.computedStyle.get("--reveal-hover-light"),f=a,S=this.computedStyle.getNumber("--reveal-hover-light-fill-radius"),b=this.computedStyle.get("--reveal-hover-light-fill-radius-mode")||"relative",x="true"===this.computedStyle.get("--reveal-diffuse"),F="true"===this.computedStyle.get("--reveal-press-animation"),P=this.computedStyle.get("--reveal-press-animation-radius-mode"),C=i,w=this.computedStyle.getNumber("--reveal-press-animation-speed"),B=this.computedStyle.getNumber("--reveal-release-animation-accelerate-rate"),D=this.computedStyle.getNumber("--reveal-border-decoration-radius"),r=this.getNumberPropFromMultipleSource("topLeftBorderRadius","--reveal-border-decoration-top-left-radius"),A=this.getNumberPropFromMultipleSource("topRightBorderRadius","--reveal-border-decoration-top-right-radius"),T=this.getNumberPropFromMultipleSource("bottomLeftBorderRadius","--reveal-border-decoration-bottom-left-radius"),L=this.getNumberPropFromMultipleSource("bottomRightBorderRadius","--reveal-border-decoration-bottom-right-radius"),I=0<=r?r:D,M=0<=A?A:D,E=0<=T?T:D,V=0<=L?L:D,N=this.cachedStyle;if(this.fillDirty=this.fillDirty||N.color!==o,this.fillDirty=this.fillDirty||N.opacity!==n,this.fillDirty=this.fillDirty||N.borderColor!==l,this.fillDirty=this.fillDirty||N.borderFillRadius!==d,this.fillDirty=this.fillDirty||N.hoverLightColor!==f,this.fillDirty=this.fillDirty||N.hoverLightFillRadius!==S,this.fillDirty=this.fillDirty||N.hoverLightFillMode!==b,this.shapeDirty=this.shapeDirty||N.borderDecorationType!==s,this.shapeDirty=this.shapeDirty||N.borderWidth!==u,this.shapeDirty=this.shapeDirty||N.withLeftBorderFactor!==p,this.shapeDirty=this.shapeDirty||N.withRightBorderFactor!==y,this.shapeDirty=this.shapeDirty||N.withTopBorderFactor!==v,this.shapeDirty=this.shapeDirty||N.withBottomBorderFactor!==g,this.shapeDirty=this.shapeDirty||N.topLeftBorderDecorationRadius!==I,this.shapeDirty=this.shapeDirty||N.topRightBorderDecorationRadius!==M,this.shapeDirty=this.shapeDirty||N.bottomLeftBorderDecorationRadius!==E,this.shapeDirty=this.shapeDirty||N.bottomRightBorderDecorationRadius!==V,this.animationDirty=this.animationDirty||N.pressAnimation!==F,this.animationDirty=this.animationDirty||N.pressAnimationFillMode!==P,this.animationDirty=this.animationDirty||N.pressAnimationColor!==C,this.animationDirty=this.animationDirty||N.pressAnimationSpeed!==w,this.animationDirty=this.animationDirty||N.releaseAnimationAccelerateRate!==B,N.color=o,N.opacity=n,N.borderColor=l,N.borderFillRadius=d,N.borderDecorationType=s,N.borderWidth=u,N.withLeftBorderFactor=p,N.withRightBorderFactor=y,N.withTopBorderFactor=v,N.withBottomBorderFactor=g,N.hoverLight=R,N.hoverLightColor=f,N.hoverLightFillRadius=S,N.hoverLightFillMode=b,N.diffuse=x,N.pressAnimation=F,N.pressAnimationFillMode=P,N.pressAnimationColor=C,N.pressAnimationSpeed=w,N.releaseAnimationAccelerateRate=B,N.topLeftBorderDecorationRadius=I,N.topRightBorderDecorationRadius=M,N.bottomLeftBorderDecorationRadius=E,N.bottomRightBorderDecorationRadius=V,this.getTrueFillRadius(N.trueFillRadius,N.hoverLightFillMode),!h(N.borderDecorationType))throw new SyntaxError("The value of `--reveal-border-decoration-type` must be `round`, `bevel` or `miter`!");this.cachedStyleFrameId=this.currentFrameId},this.mouseInCanvas=()=>{const e=this.cachedBoundingRect,t=this._store.clientX-e.left,r=this._store.clientY-e.top;return 0<t&&0<r&&t<e.width&&r<e.height},this.syncSizeToRevealRadius=(e,t)=>{const{trueFillRadius:r}=this.cachedStyle,a=r[1]||1,i=2*a*this.pxRatio*t;(e.width!==i||e.height!==i)&&(e.width=i,e.height=i)},this._store=e,this.container=o,this.element=t,this.computedStyle=i(o)}}const v=()=>document.createElement("canvas");class g extends y{constructor(e,i,o){super(e,i,o),this.updateCachedReveal=()=>{if(!this.fillDirty)return;const e=this.cachedStyle,t=e.trueFillRadius[1]*this.pxRatio,r=this.cachedImg.cachedReveal,{borderReveal:a,fillReveal:o}=this.cachedImg.cachedCanvas,{borderReveal:n,fillReveal:l}=this.cachedImg.cachedCtx;this._store.updateMaxRadius(e.trueFillRadius[1]*e.borderFillRadius);for(let d=0;2>d;d++){// 0 means border, 1 means hover light.
 //-----------------------------------------
 // Last rendered style.
-const i=0==h?c.borderReveal:c.fillReveal,j=0==h?a.borderColor:a.hoverLightColor,k=0==h?a.borderFillRadius:a.hoverLightFillRadius,l=j===i.color&&a.opacity===i.opacity&&k===i.radiusFactor;if(l)return;if(l)continue;const m=0==h?d:e,n=0==h?f:g;if(this.syncSizeToRevealRadius(m,k),!n)continue;n.clearRect(0,0,m.width,m.height);const o=0==h?a.opacity:.5*a.opacity,p=b*k,q=n.createRadialGradient(p,p,0,p,p,p);q.addColorStop(0,`rgba(${j}, ${o})`),q.addColorStop(1,`rgba(${j}, 0.0)`);const r=2*b*k;n.fillStyle=q,n.clearRect(0,0,r,r),n.fillRect(0,0,r,r),i.radius=p,i.radiusFactor=k,i.color=j,i.opacity=a.opacity,this.ctx&&(i.pattern=this.ctx.createPattern(m,"no-repeat"))}},this.updateCachedBitmap=()=>{this.ctx&&this.updateCachedReveal()},this.mouseInCanvas=()=>{const a=this.cachedBoundingRect,b=this._store.clientX-a.left,c=this._store.clientY-a.top;return 0<b&&0<c&&b<a.width&&c<a.height},this.syncSizeToElement=a=>{const c=this.cachedBoundingRect;(a.width!==c.width||a.height!==c.height)&&(a.width=c.width*this.pxRatio,a.height=c.height*this.pxRatio,a.style.width=`${c.width}px`,a.style.height=`${c.height}px`)},this.syncSizeToRevealRadius=(a,b)=>{const{trueFillRadius:c}=this.cachedStyle,d=c[1]||1,e=2*d*this.pxRatio*b;(a.width!==e||a.height!==e)&&(a.width=e,a.height=e)},this.updateAnimateGrd=(a,b)=>{const{pressAnimationColor:c,opacity:d}=this.cachedStyle,e=d*(.2-a),f=d*(.1-.07*a),g=.1+.8*a,h=0>e?0:e,i=0>f?0:f,j=1<g?1:g;b.addColorStop(0,`rgba(${c},${h})`),b.addColorStop(.55*j,`rgba(${c},${i})`),b.addColorStop(j,`rgba(${c}, 0)`)},this.drawShape=a=>{if(!this.ctx)return;const d=this.cachedBoundingRect,b=d.width*this.pxRatio,e=d.height*this.pxRatio,f=this.cachedStyle,c=f.borderWidth*this.pxRatio,g=f.topLeftBorderDecorationRadius*this.pxRatio,h=f.topRightBorderDecorationRadius*this.pxRatio,i=f.bottomLeftBorderDecorationRadius*this.pxRatio,j=f.bottomRightBorderDecorationRadius*this.pxRatio,k=f.withLeftBorderFactor,l=f.withRightBorderFactor,m=f.withTopBorderFactor,n=f.withBottomBorderFactor,o=c<g?g-c:0,p=c<h?h-c:0,q=c<i?i-c:0,r=c<j?j-c:0;switch(this.ctx.beginPath(),f.borderDecorationType){// Oh... Fuck... It's painful...
-case"round":this.ctx.moveTo(g,0),this.ctx.arcTo(b,0,b,e,h),this.ctx.lineTo(b,e-j),this.ctx.arcTo(b,e,j,e,j),this.ctx.lineTo(i,e),this.ctx.arcTo(0,e,0,j,i),this.ctx.lineTo(0,g),this.ctx.arcTo(0,0,g,0,g),a&&(this.ctx.moveTo(o,c*m),this.ctx.arcTo(c*k,c*m,c*k,o+c*m,o),this.ctx.lineTo(c*k,e-c*n-q),this.ctx.arcTo(c*k,e-c*n,c*k+q,e-c*n,q),this.ctx.lineTo(b-c*l-r,e-c*n),this.ctx.arcTo(b-c*l,e-c*n,b-c*l,e-c*n-r,r),this.ctx.lineTo(b-c*l,c*m+p),this.ctx.arcTo(b-c*l,c*m,b-c*l-p,c*m,p),this.ctx.lineTo(o,c*m));break;case"bevel":this.ctx.moveTo(g,0),this.ctx.lineTo(b-h,0),this.ctx.lineTo(b,h),this.ctx.lineTo(b,e-j),this.ctx.lineTo(b-j,e),this.ctx.lineTo(i,e),this.ctx.lineTo(0,e-i),this.ctx.lineTo(0,g),this.ctx.lineTo(g,0),this.ctx.lineTo(b-h,0),a&&(this.ctx.moveTo(o+c*k,c*m),this.ctx.lineTo(c*k,o+c*m),this.ctx.lineTo(c*k,e-q-c*n),this.ctx.lineTo(c*k+q,e-c*n),this.ctx.lineTo(b-r-c*l,e-c*n),this.ctx.lineTo(b-c*l,e-r-c*n),this.ctx.lineTo(b-c*l,p+c*m),this.ctx.lineTo(b-p-c*l,c*m),this.ctx.lineTo(o+c*l,c*m));break;case"miter":this.ctx.moveTo(0,0),this.ctx.lineTo(b,0),this.ctx.lineTo(b,e),this.ctx.lineTo(0,e),this.ctx.lineTo(0,0),a&&(this.ctx.moveTo(c*k,c*m),this.ctx.lineTo(c*k,e-c*n),this.ctx.lineTo(b-c*l,e-c*n),this.ctx.lineTo(b-c*l,c*m),this.ctx.lineTo(c*k,c*m));}this.ctx.closePath()},this.paint=a=>{var e=Number.isNaN;const g=this._store,h=g.animationQueue.includes(this),i=g.clientX===g.paintedClientX&&g.clientY===g.paintedClientY;if(i&&!h&&!a)return!1;if(!this.ctx)return!1;if(this.ctx.setTransform(1,0,0,1,0,0),this.ctx.clearRect(0,0,this.paintedWidth,this.paintedHeight),g.dirty=!1,!g.mouseInBoundary&&!h)return!1;if(!this.cachedImg.cachedReveal)return!1;this.syncSizeToElement(this.canvas),this.cacheBoundingRect();const j=this.cachedBoundingRect,b=g.clientX-j.left,k=g.clientY-j.top;if(e(b)||e(k))return!1;const l=this.cachedStyle;this.getTrueFillRadius(l.trueFillRadius),this.paintedWidth=j.width*this.pxRatio,this.paintedHeight=j.height*this.pxRatio;const c=l.trueFillRadius[1],m=b-c<j.width,n=k-c<j.height,o=0<b+c&&m&&0<k+c&&n;if(!o&&!h)return!1;if(this.cacheCanvasPaintingStyle(),this.updateCachedBitmap(),g.mouseInBoundary){const a=0<b&&0<k&&b<j.width&&k<j.height,c=this.cachedImg.cachedReveal.fillReveal.pattern;if(l.hoverLight&&a&&c){// draw fill.
-const a=this.cachedImg.cachedReveal.fillReveal.radius,d=f(b*this.pxRatio-a),e=f(k*this.pxRatio-a);this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!1),this.ctx.translate(d,e),this.ctx.fillStyle=c,this.ctx.fill()}const d=l.diffuse&&o||a,e=this.cachedImg.cachedReveal.borderReveal.pattern;if(0!==l.borderWidth&&e&&d){// Draw border.
-const a=this.cachedImg.cachedReveal.borderReveal.radius,c=f(b*this.pxRatio-a),d=f(k*this.pxRatio-a);this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!0),this.ctx.translate(c,d),this.ctx.fillStyle=e,this.ctx.fill()}}if(l.pressAnimation&&this.mousePressed&&this.mouseDownAnimateLogicFrame){this.ctx.setTransform(1,0,0,1,0,0);const a="constrained"===l.pressAnimationFillMode?l.trueFillRadius[1]:d(j.width,j.height),c=this.mouseReleased&&this.mouseUpClientX&&this.mouseUpClientY?this.ctx.createRadialGradient((this.mouseUpClientX-j.left)*this.pxRatio,(this.mouseUpClientY-j.top)*this.pxRatio,0,(this.mouseUpClientX-j.left)*this.pxRatio,(this.mouseUpClientY-j.top)*this.pxRatio,a*this.pxRatio):this.ctx.createRadialGradient(b*this.pxRatio,k*this.pxRatio,0,b*this.pxRatio,k*this.pxRatio,a*this.pxRatio);// prettier-ignore
-this.updateAnimateGrd(this.mouseDownAnimateLogicFrame,c),this.drawShape(!1),this.ctx.fillStyle=c,this.ctx.fill()}return!0},this._store=a,this.container=c,this.canvas=b,this.ctx=b.getContext("2d");const g={borderReveal:q(),fillReveal:q()};document.body.appendChild(g.borderReveal),document.body.appendChild(g.fillReveal);const h={borderReveal:g.borderReveal.getContext("2d"),fillReveal:g.fillReveal.getContext("2d")};this.cachedImg={cachedReveal:{borderReveal:{radiusFactor:-1,radius:-1,color:"INVALID",opacity:0,pattern:null},fillReveal:{radiusFactor:-1,radius:-1,color:"INVALID",opacity:0,pattern:null}},cachedCanvas:g,cachedCtx:h},this.computedStyle=e(c)}}class s{constructor(a,b){// The current cursor position relative to window.
+const i=0==d?r.borderReveal:r.fillReveal,s=0==d?e.borderColor:e.hoverLightColor,c=0==d?e.borderFillRadius:e.hoverLightFillRadius,u=s===i.color&&e.opacity===i.opacity&&c===i.radiusFactor;if(u)continue;const p=0==d?a:o,m=0==d?n:l;if(this.syncSizeToRevealRadius(p,c),!m)continue;m.clearRect(0,0,p.width,p.height);const h=0==d?e.opacity:.5*e.opacity,y=t*c,v=m.createRadialGradient(y,y,0,y,y,y);v.addColorStop(0,`rgba(${s}, ${h})`),v.addColorStop(1,`rgba(${s}, 0.0)`);const g=2*t*c;m.fillStyle=v,m.clearRect(0,0,g,g),m.fillRect(0,0,g,g),i.radius=y,i.radiusFactor=c,i.color=s,i.opacity=e.opacity,this.ctx&&(i.pattern=this.ctx.createPattern(p,"no-repeat"))}this.fillDirty=!1},this.updateCachedBitmap=()=>{this.ctx&&this.updateCachedReveal()},this.updateAnimateGrd=(e,t)=>{const{pressAnimationColor:r,opacity:a}=this.cachedStyle,i=a*(.2-e),o=a*(.1-.07*e),n=.1+.8*e,l=0>i?0:i,d=0>o?0:o;let s=0;s=1<n?1:n,s=0>n?0:n,t.addColorStop(0,`rgba(${r},${l})`),t.addColorStop(.55*s,`rgba(${r},${d})`),t.addColorStop(s,`rgba(${r}, 0)`)},this.drawShape=e=>{if(!this.ctx)return;const t=this.cachedBoundingRect,r=t.width*this.pxRatio,a=t.height*this.pxRatio,i=this.cachedStyle,o=i.borderWidth*this.pxRatio,n=i.topLeftBorderDecorationRadius*this.pxRatio,l=i.topRightBorderDecorationRadius*this.pxRatio,d=i.bottomLeftBorderDecorationRadius*this.pxRatio,s=i.bottomRightBorderDecorationRadius*this.pxRatio,c=i.withLeftBorderFactor,u=i.withRightBorderFactor,p=i.withTopBorderFactor,m=i.withBottomBorderFactor,h=o<n?n-o:0,y=o<l?l-o:0,v=o<d?d-o:0,g=o<s?s-o:0;switch(this.ctx.beginPath(),i.borderDecorationType){// Oh... Fuck... It's painful...
+case"round":this.ctx.moveTo(n,0),this.ctx.arcTo(r,0,r,a,l),this.ctx.lineTo(r,a-s),this.ctx.arcTo(r,a,s,a,s),this.ctx.lineTo(d,a),this.ctx.arcTo(0,a,0,s,d),this.ctx.lineTo(0,n),this.ctx.arcTo(0,0,n,0,n),e&&(this.ctx.moveTo(h,o*p),this.ctx.arcTo(o*c,o*p,o*c,h+o*p,h),this.ctx.lineTo(o*c,a-o*m-v),this.ctx.arcTo(o*c,a-o*m,o*c+v,a-o*m,v),this.ctx.lineTo(r-o*u-g,a-o*m),this.ctx.arcTo(r-o*u,a-o*m,r-o*u,a-o*m-g,g),this.ctx.lineTo(r-o*u,o*p+y),this.ctx.arcTo(r-o*u,o*p,r-o*u-y,o*p,y),this.ctx.lineTo(h,o*p));break;case"bevel":this.ctx.moveTo(n,0),this.ctx.lineTo(r-l,0),this.ctx.lineTo(r,l),this.ctx.lineTo(r,a-s),this.ctx.lineTo(r-s,a),this.ctx.lineTo(d,a),this.ctx.lineTo(0,a-d),this.ctx.lineTo(0,n),this.ctx.lineTo(n,0),this.ctx.lineTo(r-l,0),e&&(this.ctx.moveTo(h+o*c,o*p),this.ctx.lineTo(o*c,h+o*p),this.ctx.lineTo(o*c,a-v-o*m),this.ctx.lineTo(o*c+v,a-o*m),this.ctx.lineTo(r-g-o*u,a-o*m),this.ctx.lineTo(r-o*u,a-g-o*m),this.ctx.lineTo(r-o*u,y+o*p),this.ctx.lineTo(r-y-o*u,o*p),this.ctx.lineTo(h+o*u,o*p));break;case"miter":this.ctx.moveTo(0,0),this.ctx.lineTo(r,0),this.ctx.lineTo(r,a),this.ctx.lineTo(0,a),this.ctx.lineTo(0,0),e&&(this.ctx.moveTo(o*c,o*p),this.ctx.lineTo(o*c,a-o*m),this.ctx.lineTo(r-o*u,a-o*m),this.ctx.lineTo(r-o*u,o*p),this.ctx.lineTo(o*c,o*p));}this.ctx.closePath()},this.syncSizeToElement=e=>{const t=this.cachedBoundingRect;(e.width!==t.width||e.height!==t.height)&&(e.width=t.width*this.pxRatio,e.height=t.height*this.pxRatio,e.style.width=`${t.width}px`,e.style.height=`${t.height}px`)},this.clear=()=>{if(!this.ctx)return!1;if(!this.dirty)return!1;const{width:e,height:t}=this.cachedBoundingRect;return this.ctx.setTransform(1,0,0,1,0,0),this.ctx.clearRect(0,0,e*window.devicePixelRatio,t*window.devicePixelRatio),this.dirty=!1,!0},this.paint=e=>{const i=this._store,o=i.animationQueue.includes(this),n=i.clientX===i.paintedClientX&&i.clientY===i.paintedClientY;if(n&&!e&&!o)return!1;if(!this.ctx)return!1;if(this.dirty=!0,this.ctx.setTransform(1,0,0,1,0,0),this.ctx.clearRect(0,0,this.paintedWidth,this.paintedHeight),!i.mouseInBoundary&&!o)return!1;if(!this.cachedImg.cachedReveal)return!1;this.syncSizeToElement(this.element),this.cacheBoundingRect();const l=this.cachedBoundingRect,d=i.clientX-l.left,s=i.clientY-l.top;if(t(d)||t(s))return!1;const u=this.cachedStyle;this.getTrueFillRadius(u.trueFillRadius),this.paintedWidth=l.width*this.pxRatio,this.paintedHeight=l.height*this.pxRatio;const c=u.trueFillRadius[1],p=d-c<l.width,m=s-c<l.height,h=0<d+c&&p&&0<s+c&&m;if(!h&&!o)return!1;if(this.cacheCanvasPaintingStyle(),this.updateCachedBitmap(),i.mouseInBoundary){const e=0<d&&0<s&&d<l.width&&s<l.height,t=this.cachedImg.cachedReveal.fillReveal.pattern;if(u.hoverLight&&e&&t){// draw fill.
+const e=this.cachedImg.cachedReveal.fillReveal.radius,r=a(d*this.pxRatio-e),i=a(s*this.pxRatio-e);this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!1),this.ctx.translate(r,i),this.ctx.fillStyle=t,this.ctx.fill()}const r=u.diffuse&&h||e,i=this.cachedImg.cachedReveal.borderReveal.pattern;if(0!==u.borderWidth&&i&&r){// Draw border.
+const e=this.cachedImg.cachedReveal.borderReveal.radius,t=a(d*this.pxRatio-e),r=a(s*this.pxRatio-e);this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!0),this.ctx.translate(t,r),this.ctx.fillStyle=i,this.ctx.fill()}}if(u.pressAnimation&&this.mousePressed&&this.mouseDownAnimateLogicFrame){this.ctx.setTransform(1,0,0,1,0,0);const e="constrained"===u.pressAnimationFillMode?u.trueFillRadius[1]:r(l.width,l.height),t=this.mouseReleased&&this.mouseUpClientX&&this.mouseUpClientY?this.ctx.createRadialGradient((this.mouseUpClientX-l.left)*this.pxRatio,(this.mouseUpClientY-l.top)*this.pxRatio,0,(this.mouseUpClientX-l.left)*this.pxRatio,(this.mouseUpClientY-l.top)*this.pxRatio,e*this.pxRatio):this.ctx.createRadialGradient(d*this.pxRatio,s*this.pxRatio,0,d*this.pxRatio,s*this.pxRatio,e*this.pxRatio);// prettier-ignore
+this.updateAnimateGrd(this.mouseDownAnimateLogicFrame,t),this.drawShape(!1),this.ctx.fillStyle=t,this.ctx.fill()}return!0},this.ctx=i.getContext("2d");const n={borderReveal:v(),fillReveal:v()},l={borderReveal:n.borderReveal.getContext("2d"),fillReveal:n.fillReveal.getContext("2d")};this.cachedImg={cachedReveal:{borderReveal:{radiusFactor:-1,radius:-1,color:"INVALID",opacity:0,pattern:null},fillReveal:{radiusFactor:-1,radius:-1,color:"INVALID",opacity:0,pattern:null}},cachedCanvas:n,cachedCtx:l}}}class R extends y{constructor(e,a,i){super(e,a,i),this.updateCachedBitmap=()=>{},this.updateCachedReveal=()=>{const e=this.cachedStyle,t=this.cachedImg.cachedGradientStop;t.borderReveal[0].style.stopColor=e.borderColor,t.borderReveal[1].style.stopColor=e.borderColor,t.borderReveal[0].style.stopOpacity=e.opacity.toString(),t.borderReveal[1].style.stopOpacity="0",t.fillReveal[0].style.stopColor=e.hoverLightColor,t.fillReveal[1].style.stopColor=e.hoverLightColor,t.fillReveal[0].style.stopOpacity=(.5*e.opacity).toString(),t.fillReveal[1].style.stopOpacity="0",t.rippleReveal[0].style.stopColor=e.pressAnimationColor,t.rippleReveal[1].style.stopColor=e.pressAnimationColor,t.rippleReveal[2].style.stopColor=e.pressAnimationColor;const r=this.cachedImg.cachedGradient,a=-1===e.trueFillRadius[0];r.borderReveal.r.baseVal.value=a?e.borderFillRadius:e.borderFillRadius*e.trueFillRadius[1],r.fillReveal.r.baseVal.value=a?e.hoverLightFillRadius:e.hoverLightFillRadius*e.trueFillRadius[0],this.fillDirty=!1},this.updateAnimateGrd=(e,t,r,a)=>{const{opacity:i}=this.cachedStyle,o=i*(.2-e),n=i*(.1-.07*e),l=.1+.8*e,d=0>o?0:o,s=0>n?0:n;let c=0;c=1<l?1:l,c=0>l?0:l;const u=this.cachedImg.cachedGradientStop;u.rippleReveal[0].style.stopOpacity=d.toString(),u.rippleReveal[1].style.stopOpacity=s.toString(),u.rippleReveal[2].style.stopOpacity="0",u.rippleReveal[0].offset.baseVal=0,u.rippleReveal[1].offset.baseVal=.55*c,u.rippleReveal[2].offset.baseVal=c;const p=this.cachedImg.cachedGradient;p.rippleReveal.r.baseVal.value=a,p.rippleReveal.cx.baseVal.value=t,p.rippleReveal.cy.baseVal.value=r},this.updateGradientPosition=(e,t)=>{const r=this.cachedImg.cachedGradient;r.borderReveal.cx.baseVal.value=e,r.borderReveal.cy.baseVal.value=t,r.fillReveal.cx.baseVal.value=e,r.fillReveal.cy.baseVal.value=t},this.drawShape=(e,t)=>{const r=this.cachedBoundingRect,a=r.width,i=r.height,o=this.cachedStyle,n=o.borderWidth,l=o.topLeftBorderDecorationRadius,s=o.topRightBorderDecorationRadius,c=o.bottomLeftBorderDecorationRadius,u=o.bottomRightBorderDecorationRadius,p=o.withLeftBorderFactor,m=o.withRightBorderFactor,h=o.withTopBorderFactor,y=o.withBottomBorderFactor,v=o.withLeftBorderFactor?0:1,g=o.withRightBorderFactor?0:1,R=o.withTopBorderFactor?0:1,f=o.withBottomBorderFactor?0:1,S=!o.withTopBorderFactor&&!o.withLeftBorderFactor,b=!o.withTopBorderFactor&&!o.withRightBorderFactor,x=!o.withBottomBorderFactor&&!o.withLeftBorderFactor,F=!o.withBottomBorderFactor&&!o.withRightBorderFactor,P=n<l?l-n:0,C=n<s?s-n:0,w=n<c?c-n:0,B=n<u?u-n:0;let D="";// Step 1: Starting point
+switch(D+=e?`M ${l}, 0 `:`M ${n}, ${P+n} `,o.borderDecorationType){// Oh... Fuck again...
+case"round":e&&(D+=`
+                        h ${a-l-s} 
+                        a ${s}, ${s} 0 0 1 ${s}, ${s} 
+                        v ${i-s-u} 
+                        a ${u}, ${u} 0 0 1 ${-u}, ${u} 
+                        h ${-a+c+u} 
+                        a ${c}, ${c} 0 0 1 ${-c}, ${-c} 
+                        v ${-i+s+u} 
+                        a ${l}, ${l} 0 0 1 ${l}, ${-l} 
+                        Z 
+                    `),D+=`
+                    M ${n*p}, ${P+n} 
+                    v ${i-P-w-2*n+f*n} 
+                    a ${w}, ${w} 0 0 0 ${w}, ${w} 
+                    h ${a-w-B-2*n+v*n+g*n} 
+                    a ${B}, ${B} 0 0 0 ${B}, ${-B} 
+                    v ${-i+C+B+2*n-R*n-f*n} 
+                    a ${C}, ${C} 0 0 0 ${-C}, ${-C} 
+                    h ${-a+w+B+2*n-v*n-g*n} 
+                    a ${P}, ${P} 0 0 0 ${-P}, ${P} 
+                    L ${n*p}, ${P+n} 
+                `;break;case"bevel":e&&(D+=`
+                        h ${a-l-s}
+                        l ${s} ${s} 
+                        v ${i-s-u} 
+                        l ${-u} ${u} 
+                        h ${-a+s+u} 
+                        l ${-c} ${-c} 
+                        v ${-i+s+u} 
+                        l ${l} ${-l} 
+                        Z 
+                    `),D+=`
+                    M ${n}, ${P+n} 
+                    ${v?`h ${-n}`:""} 
+                    v ${i-P-w-2*n} 
+                    ${v?`h ${n}`:""} 
+                    ${x?`l ${-n} 0`:""} 
+                    l ${w} ${w} 
+                    ${x?`l ${n} 0`:""} 
+                    ${f?`v ${n}`:""} 
+                    h ${a-w-B-2*n} 
+                    ${f?`v ${-n}`:""} 
+                    ${F?`l ${n} 0`:""} 
+                    l ${B} ${-B} 
+                    ${F?`l ${-n} 0`:""} 
+                    ${g?`h ${n}`:""} 
+                    v ${-i+P+w+2*n} 
+                    ${g?`h ${-n}`:""} 
+                    ${b?`l 0 ${-n}`:""} 
+                    l ${-C} ${-C} 
+                    ${b?`l 0 ${n}`:""} 
+                    ${R?`v ${-n}`:""} 
+                    h ${-a+w+B+2*n}  
+                    ${R?`v ${n}`:""} 
+                    ${S?`l 0 ${-n}`:""} 
+                    l ${-P} ${P} 
+                    ${S?`l 0 ${n}`:""} 
+                `;break;case"miter":e&&(D+=`
+                        M 0, 0 
+                        h ${a} 
+                        v ${i} 
+                        h ${0-a} 
+                        v ${0-i}
+                        Z
+                    `),D+=`
+                    M ${n*p}, ${n*h}
+                    v ${i-h*n-y*n}
+                    h ${a-p*n-m*n}
+                    v ${-i+h*n+y*n}
+                    h ${-a+p*n+m*n}
+                `;}// Step 3: Close the path
+D+="miter"===o.borderDecorationType?e?`L ${n}, ${n}`:`z`:e?`L ${P+n}, ${P+n}`:`z`,t.setAttribute("d",D)},this.syncSizeToElement=e=>{const t=this.cachedBoundingRect,r=e.width.baseVal,a=e.height.baseVal;(r.value!==t.width||a.value!==t.height)&&(r.value=t.width,a.value=t.height)},this.clear=e=>{e||this.internalClear()},this.internalClear=()=>{if(!this.dirty)return!1;const e=this.cachedImg.cachedPath;return e.borderReveal.style.fill="transparent",e.fillReveal.style.fill="transparent",e.rippleReveal.style.fill="transparent",this.dirty=!1,!0},this.paint=e=>{const a=this._store,i=a.animationQueue.includes(this),o=a.clientX===a.paintedClientX&&a.clientY===a.paintedClientY;if(o&&!e&&!i)return!1;if(!a.mouseInBoundary&&!i)return this.internalClear(),!1;this.syncSizeToElement(this.element),this.cacheBoundingRect();const n=this.cachedBoundingRect,l=a.clientX-n.left,d=a.clientY-n.top;if(t(l)||t(d))return!1;const s=this.cachedStyle;this.getTrueFillRadius(s.trueFillRadius),this.paintedWidth=n.width,this.paintedHeight=n.height;const c=this.cachedImg.cachedGradient,u=r(c.borderReveal.r.baseVal.value,c.fillReveal.r.baseVal.value);this._store.updateMaxRadius(u),this.cacheCanvasPaintingStyle(),this.fillDirty&&this.updateCachedReveal();const p=l-u<n.width,m=d-u<n.height,h=0<l+u&&p&&0<d+u&&m;if(!h&&!i)return this.internalClear(),!1;if(this.dirty=!0,this.updateGradientPosition(l,d),this.shapeDirty&&(this.drawShape(!0,this.cachedImg.cachedPath.borderReveal),this.drawShape(!1,this.cachedImg.cachedPath.fillReveal),this.drawShape(!1,this.cachedImg.cachedPath.rippleReveal),this.shapeDirty=!1),a.mouseInBoundary){const e=0<l&&0<d&&l<n.width&&d<n.height;s.hoverLight&&e?this.cachedImg.cachedPath.fillReveal.style.fill="url(#fillGrad)":"transparent"!==this.cachedImg.cachedPath.fillReveal.style.fill&&(this.cachedImg.cachedPath.fillReveal.style.fill="transparent");const t=s.diffuse&&h||e;0!==s.borderWidth&&t?this.cachedImg.cachedPath.borderReveal.style.fill="url(#borderGrad)":"transparent"!==this.cachedImg.cachedPath.borderReveal.style.fill&&(this.cachedImg.cachedPath.borderReveal.style.fill="transparent")}if(s.pressAnimation&&this.mousePressed&&this.mouseDownAnimateLogicFrame){const e="constrained"===s.pressAnimationFillMode?s.trueFillRadius[1]:r(n.width,n.height);this.mouseReleased&&this.mouseUpClientX&&this.mouseUpClientY?this.updateAnimateGrd(this.mouseDownAnimateLogicFrame,this.mouseUpClientX-n.left,this.mouseUpClientY-n.top,e):this.updateAnimateGrd(this.mouseDownAnimateLogicFrame,l,d,e),this.cachedImg.cachedPath.rippleReveal.style.fill="url(#rippleGrad)"}else"transparent"!==this.cachedImg.cachedPath.rippleReveal.style.fill&&(this.cachedImg.cachedPath.rippleReveal.style.fill="transparent");return!0},this._store=e;const o={borderReveal:a.querySelector("#borderPath"),fillReveal:a.querySelector("#fillPath"),rippleReveal:a.querySelector("#ripplePath")},n={borderReveal:a.querySelector("#borderGrad"),fillReveal:a.querySelector("#fillGrad"),rippleReveal:a.querySelector("#rippleGrad")},l={borderReveal:[a.querySelector("#borderCenter"),a.querySelector("#borderOut")],fillReveal:[a.querySelector("#fillCenter"),a.querySelector("#fillOut")],rippleReveal:[a.querySelector("#rippleCenter"),a.querySelector("#rippleMiddle"),a.querySelector("#rippleOut")]};this.cachedImg={cachedReveal:{borderReveal:{radiusFactor:-1,radius:-1,color:"INVALID",opacity:0,pattern:null},fillReveal:{radiusFactor:-1,radius:-1,color:"INVALID",opacity:0,pattern:null}},cachedPath:o,cachedGradient:n,cachedGradientStop:l}}}class f{constructor(e,t){// The current cursor position relative to window.
 // The cursor position of painted reveal effect.
-this.clientX=-1e3,this.clientY=-1e3,this.paintedClientX=-1e3,this.paintedClientY=-1e3,this.mouseInBoundary=!1,this.canvasList=[],this.animationQueue=[],this.animationFrame=null,this.dirty=!1,this.mouseUpClientX=null,this.mouseUpClientY=null,this.mouseDownAnimateStartFrame=null,this.mouseDownAnimateCurrentFrame=null,this.mouseDownAnimateReleasedFrame=null,this.mouseDownAnimateLogicFrame=null,this.mousePressed=!1,this.mouseReleased=!1,this.maxRadius=-1,this.addReveal=(a,b)=>{const c=new r(this,a,b);c.cacheBoundingRect(),c.cacheCanvasPaintingStyle(),c.updateCachedBitmap(),this.canvasList.push(c)},this.removeReveal=a=>{this.canvasList=this.canvasList.filter(b=>b&&b.canvas===a)},this.updateMaxRadius=a=>{this.maxRadius=d(a,this.maxRadius)},this.onPointerMoveOnScreen=(a,b)=>{const c=this.container.getBoundingClientRect();return!(a<c.left-this.maxRadius)&&!(a>c.right+this.maxRadius)&&!(b<c.top-this.maxRadius)&&!(b>c.bottom+this.maxRadius)&&(this.mouseInBoundary=!0,this.clientX=a,this.clientY=b,this.animationFrame=window.requestAnimationFrame(this.paintAll),!0)},this.onPointerEnterBoundary=()=>{this.mouseInBoundary=!0,this.animationFrame||(this.animationFrame=window.requestAnimationFrame(this.paintAll))},this.onPointerLeaveBoundary=()=>{this.mouseInBoundary=!1,this.paintAll(0,!0)},this.paintAll=(a,b)=>{if(b||this.mouseInBoundary||0!==this.animationQueue.length){for(let b=0;b<this.animationQueue.length;b++){const c=this.animationQueue[b];if(!a||c.currentFrameId===a)return;c.currentFrameId=a,null===c.mouseDownAnimateStartFrame&&(c.mouseDownAnimateStartFrame=a);const d=a-c.mouseDownAnimateStartFrame;c.mouseDownAnimateCurrentFrame=d;const e=c.cachedStyle.pressAnimationSpeed,f=c.cachedStyle.releaseAnimationAccelerateRate;let g=d;c.mouseReleased&&c.mouseDownAnimateReleasedFrame&&(g+=(d-c.mouseDownAnimateReleasedFrame)*f),c.mouseDownAnimateLogicFrame=g/e,1<c.mouseDownAnimateLogicFrame&&this.cleanUpAnimation(c)}for(let c=0;c<this.canvasList.length;c++){const d=this.canvasList[c];d.currentFrameId=a,d.paint(b)}this.dirty=!0,this.paintedClientX=this.clientX,this.paintedClientY=this.clientY,this.animationFrame=this.mouseInBoundary||0!==this.animationQueue.length?window.requestAnimationFrame(this.paintAll):null}},this.resetAll=()=>{for(let a=0;a<this.canvasList.length;a++){const b=this.canvasList[a];b.paint()}},this.initializeAnimation=()=>{const a=this.canvasList.find(a=>a.mouseInCanvas());a&&(!this.animationQueue.includes(a)&&this.animationQueue.push(a),a.mouseDownAnimateStartFrame=null,a.mousePressed=!0,a.mouseReleased=!1)},this.switchAnimation=()=>{this.animationQueue.forEach(a=>{a.mouseReleased||(a.mouseReleased=!0,a.mouseDownAnimateReleasedFrame=a.mouseDownAnimateCurrentFrame,a.mouseUpClientX=this.clientX,a.mouseUpClientY=this.clientY)})},this.cleanUpAnimation=a=>{a.mouseUpClientX=null,a.mouseUpClientY=null,a.mouseDownAnimateStartFrame=null,a.mouseDownAnimateCurrentFrame=null,a.mouseDownAnimateReleasedFrame=null,a.mouseDownAnimateLogicFrame=null,a.mousePressed=!1,a.mouseReleased=!1;const b=this.animationQueue.indexOf(a);-1<b&&this.animationQueue.splice(b,1),a.paint(!0)},this.getRevealAnimationConfig=()=>this.canvasList.find(a=>a.mouseInCanvas())||null,this.id=a,this.container=b}}class t{constructor(){if(this._currentHashId=0,this._storage=[],this.requestedTraverseBoundaries=!1,this.cachedMouseX=-1,this.cachedMouseY=-1,this.traverseBoundaries=()=>{this.requestedTraverseBoundaries=!1;for(let a=0;a<this._storage.length;a++)this._storage[a].onPointerMoveOnScreen(this.cachedMouseX,this.cachedMouseY)},this.newBoundary=a=>{const b=this._currentHashId++,c=new s(b,a);return this._storage.push(c),c},this.removeBoundary=a=>{this._storage=this._storage.filter(b=>b!==a)},"experimentalAutoFit"===k.borderDetectionMode){if("undefined"==typeof Window)return;window.addEventListener("pointermove",a=>{this.cachedMouseX=a.clientX,this.cachedMouseY=a.clientY,this.requestedTraverseBoundaries||(window.requestAnimationFrame(this.traverseBoundaries),this.requestedTraverseBoundaries=!0)})}}}const u="undefined"==typeof globalThis.Window?class{constructor(){this.root={innerHTML:"",querySelector:()=>null},this.attachShadow=()=>null}}:HTMLElement;class v extends u{constructor(){super(...arguments),this.stateManager=new t}}v.ElementName="ax-reveal-provider";class w extends u{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.updatePointerPosition=a=>{this.waitForStorage(b=>{b.clientX=a.clientX,b.clientY=a.clientY})},this.handlePointerEnter=()=>this.waitForStorage(a=>a.onPointerEnterBoundary()),this.handlePointerLeave=()=>this.waitForStorage(a=>a.onPointerLeaveBoundary()),this.handlePointerMove=a=>this.updatePointerPosition(a),this.handlePointerUp=()=>this.waitForStorage(a=>a.switchAnimation()),this.handlePointerDown=a=>this.waitForStorage(b=>{this.updatePointerPosition(a),b.initializeAnimation()}),this.root.innerHTML=`
-<div>
-    <slot></slot>
-</div>`}get storage(){return this._storage}set storage(a){const b=this._storage;b&&(this.dispatchEvent(new CustomEvent(w.removeStorageEvent,{detail:b})),w.stateManager.removeBoundary(b)),a&&(this._storage=a,this.dispatchEvent(new CustomEvent(w.attachStorageEvent,{detail:a}))),b&&a&&this.dispatchEvent(new CustomEvent(w.replaceStorageEvent,{detail:{old:b,new:a}}))}waitForStorage(a){this.storage===void 0?this.addEventListener(w.attachStorageEvent,()=>a(this.storage),{once:!0}):a(this.storage)}appendStorage(a=!1){if(!a&&this.storage)return;const b=this.closest(v.ElementName),c=b?b.stateManager:w.stateManager;this.storage=c.newBoundary(this)}connectedCallback(){this.appendStorage(!0),"strictEdge"===k.borderDetectionMode&&(this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.addEventListener("pointermove",this.handlePointerMove)),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointerup",this.handlePointerUp)}disconnectedCallback(){this.storage=void 0}}w.ElementName="ax-reveal-bound",w.removeStorageEvent="removeStorage",w.attachStorageEvent="attachStorage",w.replaceStorageEvent="replaceStorage",w.stateManager=new t;class x extends u{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
+/**
+             * Repaint all canvas while user's pointer has entered the boundary.
+             */ /**
+             * Clear all canvas while user's pointer leave the bounary.
+             */ /**
+             * The painting method that draw everything on your screen.
+             * @param frame current frame index, if this value is 0, it means all canvas
+             *  should be cleaned.
+             * @param skipSamePointerPositionCheck Literally.
+             */ /**
+             * Clear all canvas.
+             */ /**
+             * This is the effect while user pressed on the reveal highlight,
+             * the ripple start to spread slowly.
+             */ /**
+             * This is the effect while user released it's pointer, the spreading
+             * ripple animation will start to accelerate.
+             */ /**
+             * Cleanup all animations.
+             * @param skipPaint Only cleanup data or also clean up the canvas
+             * @param forceClean Clean the canvas or not
+             */ /**
+             * Clean up the config of an animation, but the canvas won't cleaned up.
+             * @param config The config to be cleaned up.
+             * @param skipPaint Skip painting.
+             * @param forceClean Force clear the painting.
+             */this.clientX=-1e3,this.clientY=-1e3,this.paintedClientX=-1e3,this.paintedClientY=-1e3,this.mouseInBoundary=!1,this.canvasList=[],this.animationQueue=[],this.animationFrame=null,this.mouseUpClientX=null,this.mouseUpClientY=null,this.mouseDownAnimateStartFrame=null,this.mouseDownAnimateCurrentFrame=null,this.mouseDownAnimateReleasedFrame=null,this.mouseDownAnimateLogicFrame=null,this.mousePressed=!1,this.mouseReleased=!1,this.maxRadius=-1,this.requestedAnimationFrame=!1,this.addReveal=(e,t)=>{let r;const a=Object.prototype.toString.call(e);if("[object HTMLCanvasElement]"===a)r=new g(this,e,t);else if("[object SVGSVGElement]"===a)r=new R(this,e,t);else throw new TypeError(`Unknown element type, got: ${a}, Canvas or SVG element expected.`);r.cacheBoundingRect(),r.cacheCanvasPaintingStyle(),r.updateCachedBitmap(),this.canvasList.push(r)},this.removeReveal=e=>{this.canvasList=this.canvasList.filter(t=>t&&t.element!==e)},this.updateMaxRadius=e=>{this.maxRadius=r(e,this.maxRadius)},this.requestPaintAll=e=>{this.requestedAnimationFrame||(this.requestedAnimationFrame=!0,this.animationFrame=window.requestAnimationFrame(t=>{this.requestedAnimationFrame=!1,this.paintAll(e?-1:t,!0)}))},this.updatePointerPosition=(e,t)=>{this.clientX=e,this.clientY=t;const r=this.container.getBoundingClientRect();let a=!0;e<r.left-this.maxRadius&&(a=!1),e>r.right+this.maxRadius&&(a=!1),t<r.top-this.maxRadius&&(a=!1),t>r.bottom+this.maxRadius&&(a=!1),this.mouseInBoundary=a},this.onPointerMoveOnScreen=(e,t)=>{if(this.updatePointerPosition(e,t),!!this.mouseInBoundary)return this.requestPaintAll(),!0},this.onPointerEnterBoundary=()=>{this.mouseInBoundary=!0,this.animationFrame||this.requestPaintAll()},this.onPointerLeaveBoundary=()=>{this.mouseInBoundary=!1,this.requestPaintAll(!0)},this.paintAll=(e,t)=>{if(t||this.mouseInBoundary||0!==this.animationQueue.length){// Animation duration checkup
+for(let t=0;t<this.animationQueue.length;t++){const r=this.animationQueue[t];if(!e||r.currentFrameId===e)continue;r.currentFrameId=e,null===r.mouseDownAnimateStartFrame&&(r.mouseDownAnimateStartFrame=e);// Calculate how long the animation has been playing
+const a=e-r.mouseDownAnimateStartFrame;r.mouseDownAnimateCurrentFrame=a;const i=r.cachedStyle.pressAnimationSpeed,o=r.cachedStyle.releaseAnimationAccelerateRate;// We assume that Ripple is a one-way linear process from
+// no diffusion to fully diffused, 
+// and Logic Frame represents the progress of the animation
+// in this process.
+let n=a;r.mouseReleased&&r.mouseDownAnimateReleasedFrame&&(n+=(a-r.mouseDownAnimateReleasedFrame)*o),r.mouseDownAnimateLogicFrame=n/i,1<r.mouseDownAnimateLogicFrame&&(r.cleanedUpForAnimation=!0)}// Paint the canvas one by one
+for(let r=0;r<this.canvasList.length;r++){const a=this.canvasList[r];if(a.currentFrameId=e,a.cleanedUpForAnimation)this.cleanUpAnimationUnit(a,!1),a.cleanedUpForAnimation=!1;else{const e=-1===this.animationQueue.indexOf(a);this.mouseInBoundary||e?a.paint(t):a.clear(!1)}}this.paintedClientX=this.clientX,this.paintedClientY=this.clientY,this.mouseInBoundary||0!==this.animationQueue.length?this.requestPaintAll():this.animationFrame=null}},this.clearAll=e=>{this.cleanupAnimation(e,!0)},this.initializeAnimation=()=>{const e=this.canvasList.find(e=>e.mouseInCanvas());e&&(!this.animationQueue.includes(e)&&this.animationQueue.push(e),e.mouseDownAnimateStartFrame=null,e.mousePressed=!0,e.mouseReleased=!1)},this.switchAnimation=()=>{for(let e=0;e<this.animationQueue.length;e++){const t=this.animationQueue[e];t.mouseReleased||(t.mouseReleased=!0,t.mouseDownAnimateReleasedFrame=t.mouseDownAnimateCurrentFrame,t.mouseUpClientX=this.clientX,t.mouseUpClientY=this.clientY)}},this.cleanupAnimation=(e,t)=>{for(let r=0;r<this.animationQueue.length;r++){const a=this.animationQueue[r];this.cleanUpAnimationUnit(a,e,t)}},this.cleanUpAnimationUnit=(e,t,r)=>{e.mouseUpClientX=null,e.mouseUpClientY=null,e.mouseDownAnimateStartFrame=null,e.mouseDownAnimateCurrentFrame=null,e.mouseDownAnimateReleasedFrame=null,e.mouseDownAnimateLogicFrame=null,e.mousePressed=!1,e.mouseReleased=!1;const a=this.animationQueue.indexOf(e);-1<a&&this.animationQueue.splice(a,1),t||(r?e.clear(!1):this.mouseInBoundary?e.paint(!0):e.clear(!0))},this.getRevealAnimationConfig=()=>this.canvasList.find(e=>e.mouseInCanvas())||null,this.id=e,this.container=t}}class S{constructor(){if(this._currentHashId=0,this._storage=[],this.requestedTraverseBoundaries=!1,this.cachedMouseX=-1,this.cachedMouseY=-1,this.pointerLeaveScheduled=!1,this.handlePointerLeave=()=>{this.pointerLeaveScheduled||(this.pointerLeaveScheduled=!0,window.requestAnimationFrame(()=>{for(let e=0;e<this._storage.length;e++)this._storage[e].onPointerLeaveBoundary();this.pointerLeaveScheduled=!1}))},this.handlePointerMove=e=>{this.cachedMouseX=e.clientX,this.cachedMouseY=e.clientY,this.requestedTraverseBoundaries||(window.requestAnimationFrame(this.traverseBoundaries),this.requestedTraverseBoundaries=!0)},this.traverseBoundaries=()=>{this.requestedTraverseBoundaries=!1;for(let e=0;e<this._storage.length;e++)this._storage[e].onPointerMoveOnScreen(this.cachedMouseX,this.cachedMouseY)},this.newBoundary=e=>{const t=this._currentHashId++,r=new f(t,e);return this._storage.push(r),r},this.removeBoundary=e=>{this._storage=this._storage.filter(t=>t!==e)},"experimentalAutoFit"===c.borderDetectionMode){if("undefined"==typeof Window)return;window.addEventListener("pointermove",this.handlePointerMove),window.addEventListener("pointerup",e=>{"mouse"!==e.pointerType&&this.handlePointerLeave()}),window.addEventListener("pointerleave",e=>{"mouse"===e.pointerType&&this.handlePointerLeave()})}}}const b="undefined"==typeof globalThis.Window?class{constructor(){this.root={innerHTML:"",querySelector:()=>null},this.attachShadow=()=>null}}:HTMLElement;class x extends b{constructor(){super(...arguments),this.stateManager=new S}}x.ElementName="ax-reveal-provider";class F extends b{constructor(){/**
+             * Update the position of your pointer.
+             * @param ev Pointer event from the listener.
+             */super(),this.root=this.attachShadow({mode:"open"}),this.updatePointerPosition=e=>{this.waitForStorage(t=>{t.clientX=e.clientX,t.clientY=e.clientY})},this.handlePointerEnter=()=>this.waitForStorage(e=>e.onPointerEnterBoundary()),this.handlePointerLeave=()=>this.waitForStorage(e=>e.onPointerLeaveBoundary()),this.handlePointerMove=this.updatePointerPosition,this.handlePointerUp=e=>{"mouse"===e.pointerType?this.waitForStorage(e=>e.switchAnimation()):this.waitForStorage(e=>e.clearAll(!1))},this.handlePointerDown=e=>this.waitForStorage(t=>{this.setPointerCapture(e.pointerId),this.updatePointerPosition(e),t.initializeAnimation()}),this.root.innerHTML=`
 <div>
     <slot></slot>
+</div>`}get storage(){return this._storage}set storage(e){const t=this._storage;t&&(this.dispatchEvent(new CustomEvent(F.removeStorageEvent,{detail:t})),F.stateManager.removeBoundary(t)),e&&(this._storage=e,this.dispatchEvent(new CustomEvent(F.attachStorageEvent,{detail:e}))),t&&e&&this.dispatchEvent(new CustomEvent(F.replaceStorageEvent,{detail:{old:t,new:e}}))}waitForStorage(e){this.storage===void 0?this.addEventListener(F.attachStorageEvent,()=>e(this.storage),{once:!0}):e(this.storage)}appendStorage(e=!1){if(!e&&this.storage)return;const t=this.closest(x.ElementName),r=t?t.stateManager:F.stateManager;this.storage=r.newBoundary(this)}connectedCallback(){this.appendStorage(!0),"strictEdge"===c.borderDetectionMode&&(this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.addEventListener("pointermove",this.handlePointerMove)),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointerup",this.handlePointerUp)}disconnectedCallback(){this.storage=void 0}}F.ElementName="ax-reveal-bound",F.removeStorageEvent="removeStorage",F.attachStorageEvent="attachStorage",F.replaceStorageEvent="replaceStorage",F.stateManager=new S;class P extends b{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
+<div class="ax-reveal">
     <canvas></canvas>
-    </div>
+    <div class="content"><slot></slot></div>
+</div>
 <style>
-    div { display: content; }
+    .ax-reveal { display: content; }
+    .ax-reveal * { user-drag: none; touch-action: none; user-select: none; }
+    .content { position: relative; }
     canvas { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
     :host { display: inline-block; position: relative; }
     :host([block]) { display: block; }
@@ -31,5 +144,44 @@ this.clientX=-1e3,this.clientY=-1e3,this.paintedClientX=-1e3,this.paintedClientY
     :host([inline-flex]) { display: inline-flex; }
     :host([grid]) { display: grid; }
     :host([inline-grid]) { display: inline-grid; }
+    ::slotted(*) { user-drag: none; touch-action: none; }
+    ::slotted(button) { outline:none; }
+</style>`,this.canvas=this.root.querySelector("canvas")}adoptedCallback(){this.disconnectedCallback(),this.connectedCallback()}disconnectedCallback(){this.boundary&&this.boundary.waitForStorage(e=>e.removeReveal(this.canvas))}connectedCallback(){if(this.boundary=this.closest(F.ElementName),!this.boundary)throw new SyntaxError("You must use "+F.ElementName+" as the boundary of reveal highlight!");this.boundary.waitForStorage(e=>setTimeout(()=>e.addReveal(this.canvas,this),0))}}P.ElementName="ax-reveal";class C extends b{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
+<div class="ax-reveal">
+    <svg>
+        <defs>
+            <radialGradient id="borderGrad" gradientUnits="userSpaceOnUse" r="10">
+                <stop id="borderCenter" offset="0%" />
+                <stop id="borderOut" offset="100%" />
+            </radialGradient>
+            <radialGradient id="fillGrad" gradientUnits="userSpaceOnUse" r="10">
+                <stop id="fillCenter" offset="0%" />
+                <stop id="fillOut" offset="100%" />
+            </radialGradient>
+            <radialGradient id="rippleGrad" gradientUnits="userSpaceOnUse" r="10">
+                <stop id="rippleCenter" offset="0%" />
+                <stop id="rippleMiddle" offset="0%" />
+                <stop id="rippleOut" offset="0%" />
+            </radialGradient>
+        </defs>
+        <path id="borderPath" fill="url(#borderGrad)" />
+        <path id="fillPath" fill="url(#fillGrad)" />
+        <path id="ripplePath" fill="url(#rippleGrad)" />
+    </svg>
+    <div class="content"><slot></slot></div>
+</div>
+<style>
+    .ax-reveal { display: content; }
+    .ax-reveal * { user-drag: none; touch-action: none; user-select: none; }
+    .content { position: relative; }
+    svg { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
+    :host { display: inline-block; position: relative; }
+    :host([block]) { display: block; }
+    :host([inline-block]) { display: inline-block; }
+    :host([flex]) { display: flex; }
+    :host([inline-flex]) { display: inline-flex; }
+    :host([grid]) { display: grid; }
+    :host([inline-grid]) { display: inline-grid; }
+    ::slotted(*) { user-drag: none; touch-action: none; }
     ::slotted(button) { outline:none; }
-</style>`,this.canvas=this.root.querySelector("canvas")}adoptedCallback(){this.disconnectedCallback(),this.connectedCallback()}disconnectedCallback(){this.boundary&&this.boundary.waitForStorage(a=>a.removeReveal(this.canvas))}connectedCallback(){if(this.boundary=this.closest(w.ElementName),!this.boundary)throw new SyntaxError("You must use "+w.ElementName+" as the boundary of acrylic!");this.boundary.waitForStorage(a=>setTimeout(()=>a.addReveal(this.canvas,this),0))}}x.ElementName="ax-reveal";let y=!1;a.register=g,Object.defineProperty(a,"__esModule",{value:!0})});
+</style>`,this.svg=this.root.querySelector("svg")}adoptedCallback(){this.disconnectedCallback(),this.connectedCallback()}disconnectedCallback(){this.boundary&&this.boundary.waitForStorage(e=>e.removeReveal(this.svg))}connectedCallback(){if(this.boundary=this.closest(F.ElementName),!this.boundary)throw new SyntaxError("You must use "+F.ElementName+" as the boundary of reveal highlight!");this.boundary.waitForStorage(e=>setTimeout(()=>e.addReveal(this.svg,this),0))}}C.ElementName="ax-reveal-ng";const w="magic";let B=!1;e.register=n,Object.defineProperty(e,"__esModule",{value:!0})});

package/build/utils/extractRGBValue.d.ts

@@ -0,0 +1,2 @@
+export declare const extractRGBValue: (x: string) => string;
+//# sourceMappingURL=extractRGBValue.d.ts.map

package/build/utils/extractRGBValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractRGBValue.d.ts","sourceRoot":"","sources":["../../src/utils/extractRGBValue.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,MAAO,MAAM,WAyDxC,CAAC"}

package/build/utils/isValidateBorderDecorationType.d.ts

@@ -0,0 +1,3 @@
+import type { BorderDecoration } from './types.js';
+export declare const isValidateBorderDecorationType: (x: string) => x is BorderDecoration;
+//# sourceMappingURL=isValidateBorderDecorationType.d.ts.map

package/build/utils/isValidateBorderDecorationType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isValidateBorderDecorationType.d.ts","sourceRoot":"","sources":["../../src/utils/isValidateBorderDecorationType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,eAAO,MAAM,8BAA8B,MAAO,MAAM,0BAKvD,CAAC"}

package/build/utils/types.d.ts

@@ -0,0 +1,103 @@
+export declare type BorderDecoration = 'round' | 'bevel' | 'miter';
+export interface CachedBoundingRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface CachedStyle {
+    color: string;
+    opacity: number;
+    trueFillRadius: [number, number];
+    borderColor: string;
+    borderFillRadius: number;
+    borderDecorationType: BorderDecoration;
+    borderDecorationRadius: number;
+    topLeftBorderDecorationRadius: number;
+    topRightBorderDecorationRadius: number;
+    bottomLeftBorderDecorationRadius: number;
+    bottomRightBorderDecorationRadius: number;
+    /**
+     * @param withLeftBorderFactor
+     * If the left border is shown, this value is 1, or the value is 0.
+     */
+    withLeftBorderFactor: number;
+    /**
+     * @param withRightBorderFactor
+     * If the right border is shown, this value is 1, or the value is 0.
+     */
+    withRightBorderFactor: number;
+    /**
+     * @param withTopBorderFactor
+     * If the top border is shown, this value is 1, or the value is 0.
+     */
+    withTopBorderFactor: number;
+    /**
+     * @param withBottomBorderFactor
+     * If the bottom border is shown, this value is 1, or the value is 0.
+     */
+    withBottomBorderFactor: number;
+    borderWidth: number;
+    hoverLight: boolean;
+    hoverLightColor: string;
+    hoverLightFillMode: string;
+    hoverLightFillRadius: number;
+    diffuse: boolean;
+    pressAnimation: boolean;
+    pressAnimationFillMode: string;
+    pressAnimationColor: string;
+    pressAnimationSpeed: number;
+    releaseAnimationAccelerateRate: number;
+}
+interface CachedReveal {
+    radius: number;
+    radiusFactor: number;
+    color: string;
+    opacity: number;
+    pattern: CanvasPattern | null;
+}
+/**
+ * Cached border and body pattern, for faster painting on the canvas.
+ * @interface CachedRevealBitmap
+ */
+export interface CachedRevealBitmap {
+    cachedReveal: {
+        borderReveal: CachedReveal;
+        fillReveal: CachedReveal;
+    };
+    cachedCanvas: {
+        borderReveal: HTMLCanvasElement;
+        fillReveal: HTMLCanvasElement;
+    };
+    cachedCtx: {
+        borderReveal: CanvasRenderingContext2D | null;
+        fillReveal: CanvasRenderingContext2D | null;
+    };
+}
+/**
+ * Cached border and body pattern, just to store something in similar way.
+ * @interface CachedRevealPath
+ */
+export interface CachedRevealPath {
+    cachedReveal: {
+        readonly borderReveal: CachedReveal;
+        readonly fillReveal: CachedReveal;
+    };
+    cachedPath: {
+        readonly borderReveal: SVGPathElement;
+        readonly fillReveal: SVGPathElement;
+        readonly rippleReveal: SVGPathElement;
+    };
+    cachedGradient: {
+        readonly borderReveal: SVGRadialGradientElement;
+        readonly fillReveal: SVGRadialGradientElement;
+        readonly rippleReveal: SVGRadialGradientElement;
+    };
+    cachedGradientStop: {
+        readonly borderReveal: Readonly<[SVGStopElement, SVGStopElement]>;
+        readonly fillReveal: Readonly<[SVGStopElement, SVGStopElement]>;
+        readonly rippleReveal: Readonly<[SVGStopElement, SVGStopElement, SVGStopElement]>;
+    };
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/build/utils/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA,oBAAY,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,kBAAkB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,gBAAgB,CAAC;IACvC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,6BAA6B,EAAE,MAAM,CAAC;IACtC,8BAA8B,EAAE,MAAM,CAAC;IACvC,gCAAgC,EAAE,MAAM,CAAC;IACzC,iCAAiC,EAAE,MAAM,CAAC;IAC1C;;;OAGG;IACH,oBAAoB,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,qBAAqB,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,sBAAsB,EAAE,MAAM,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,8BAA8B,EAAE,MAAM,CAAC;CAC1C;AAED,UAAU,YAAY;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC;CACjC;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IAC/B,YAAY,EAAE;QACV,YAAY,EAAE,YAAY,CAAC;QAC3B,UAAU,EAAE,YAAY,CAAC;KAC5B,CAAC;IACF,YAAY,EAAE;QACV,YAAY,EAAE,iBAAiB,CAAC;QAChC,UAAU,EAAE,iBAAiB,CAAC;KACjC,CAAC;IACF,SAAS,EAAE;QACP,YAAY,EAAE,wBAAwB,GAAG,IAAI,CAAC;QAC9C,UAAU,EAAE,wBAAwB,GAAG,IAAI,CAAC;KAC/C,CAAC;CACL;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC7B,YAAY,EAAE;QACV,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;QACpC,QAAQ,CAAC,UAAU,EAAE,YAAY,CAAC;KACrC,CAAC;IACF,UAAU,EAAE;QACR,QAAQ,CAAC,YAAY,EAAE,cAAc,CAAC;QACtC,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAC;QACpC,QAAQ,CAAC,YAAY,EAAE,cAAc,CAAC;KACzC,CAAC;IACF,cAAc,EAAE;QACZ,QAAQ,CAAC,YAAY,EAAE,wBAAwB,CAAC;QAChD,QAAQ,CAAC,UAAU,EAAE,wBAAwB,CAAC;QAC9C,QAAQ,CAAC,YAAY,EAAE,wBAAwB,CAAC;KACnD,CAAC;IACF,kBAAkB,EAAE;QAChB,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC;QAClE,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC;QAChE,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,cAAc,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC;KACrF,CAAC;CACL"}

package/build/variables.d.ts

@@ -1,2 +1,2 @@
-export declare const MAGIC_DEFAULT_COLOR = "rgba(-1, -1, -1)";
+export declare const MAGIC_DEFAULT_COLOR = "magic";
 //# sourceMappingURL=variables.d.ts.map

package/build/variables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variables.d.ts","sourceRoot":"","sources":["../src/variables.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,qBAAqB,CAAC"}
+{"version":3,"file":"variables.d.ts","sourceRoot":"","sources":["../src/variables.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,UAAU,CAAC"}