@phun-ky/speccer 9.2.6 → 9.2.7

package/dist/speccer.js

@@ -2,7 +2,7 @@
 * @phun-ky/speccer
 * A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements
 * @author Alexander Vassbotn Røyne-Helgesen <alexander@phun-ky.net>
-* @version 9.2.6
+* @version 9.2.7
 * @license
 * Copyright (c) 2018 Alexander Vassbotn Røyne-Helgesen
 *
@@ -24,5 +24,5 @@
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,(function(t){"use strict";var e,o,n;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(e||(e={})),function(t){t.Outline="outline",t.Enclose="enclose",t.Full="full",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top",t.SVG="svg",t.Curly="curly"}(o||(o={})),function(t){t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(n||(n={}));const i=t=>t.split(" "),r=t=>i(t).includes(o.Right),s=t=>i(t).includes(o.Bottom),a=t=>i(t).includes(o.Full),c=t=>i(t).includes(o.Enclose),l=t=>t.includes(o.Curly)&&t.includes(o.Full),p=t=>"string"==typeof t,d=t=>!p(t),h=t=>"number"==typeof t,f=t=>!h(t),m=t=>void 0===t,u=()=>new Promise(requestAnimationFrame),g=t=>t.top,y=t=>t.left+t.width,w=t=>t.top+t.height,x=t=>t.left,b=t=>t.left+t.width/2,E=t=>t.top+t.height/2,$={center:t=>({x:b(t),y:E(t)}),top:t=>({x:b(t),y:g(t)}),right:t=>({x:y(t),y:E(t)}),bottom:t=>({x:b(t),y:w(t)}),left:t=>({x:x(t),y:E(t)}),"right-top":t=>({x:y(t),y:g(t)}),"right-bottom":t=>({x:y(t),y:w(t)}),"left-top":t=>({x:x(t),y:g(t)}),"left-bottom":t=>({x:x(t),y:w(t)}),"top-left":t=>({x:x(t),y:g(t)}),"top-right":t=>({x:y(t),y:g(t)}),"bottom-left":t=>({x:x(t),y:w(t)}),"bottom-right":t=>({x:y(t),y:w(t)}),"top-center":t=>({x:b(t),y:g(t)}),"right-center":t=>({x:y(t),y:E(t)}),"bottom-center":t=>({x:b(t),y:w(t)}),"left-center":t=>({x:x(t),y:E(t)})},A=async(t,e="center")=>{if(!e)throw Error("No position given");if(d(e))throw Error("The position given is not the required type: pos: "+typeof e);const o=["center","left","right","top","bottom","right-top","right-bottom","left-top","left-bottom","top-left","top-right","bottom-left","bottom-right","top-center","right-center","bottom-center","left-center"];if(!o.includes(e))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${o.join(", ")}`);await u();const n=t.getBoundingClientRect();return $[e](n)},C=async(t,e,o="center",n="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:r}=await A(t,o),{x:s,y:a}=await A(e,n);return{x1:i,y1:r,x2:s,y2:a}},v=(t,e)=>{const{x1:o,x2:n,y1:i,y2:r}=t,{direct:s=!1,firstSet:a=!1,direction:c}=e;let l={x:o+(n-o)/2,y:i},p={x:o+(n-o)/2,y:r};return s&&(a?"west"===c?(l={x:o-32,y:i-8},p={x:n+32,y:r}):"south"===c?(l={x:o-8,y:i+32},p={x:n,y:r-32}):"east"===c?(l={x:o+32,y:i-8},p={x:n-32,y:r}):(l={x:o-8,y:i-32},p={x:n,y:r+32}):"west"===c?(l={x:o-32,y:i+8},p={x:n+32,y:r}):"south"===c?(l={x:o+8,y:i+32},p={x:n,y:r-32}):"east"===c?(l={x:o+32,y:i+8},p={x:n-32,y:r}):(l={x:o+8,y:i-32},p={x:n,y:r+32})),{firstPoint:{x:o,y:i},firstControl:l,lastPoint:{x:n,y:r},lastControl:p}},L=async(t,e,o)=>{const{pos1:n,pos2:i,firstSet:r=!1,direction:s}=o,{x1:a,y1:c,x2:l,y2:p}=await C(t,e,n,i);let d=0,h=0;"north"===s?h=8:"west"===s?d=8:"east"===s?d=-8:"south"===s&&(h=-8);const{firstPoint:f,firstControl:m,lastControl:u,lastPoint:g}=v({x1:a+0,x2:l+d,y1:c+0+document.documentElement.scrollTop,y2:p+h+document.documentElement.scrollTop},{direct:!0,firstSet:r,direction:s});return`M ${f.x} ${f.y}C ${m.x} ${m.y}, ${u.x} ${u.y}, ${g.x} ${g.y}`},S=async({start:t,stop:e,crude:o=!1})=>{const{x1:n,y1:i,x2:r,y2:s}=await C(t,e),a=((t,e,o,n,i=!0)=>{if(m(t)||m(e)||m(o)||m(n))throw new SyntaxError("Missing input for `angle`");if(f(t)||f(e)||f(o)||f(n))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof o} ${typeof n}`);const r=n-e,s=o-t;let a=Math.atan2(r,s);return a*=180/Math.PI,i&&a<0&&(a+=360),a})(n,i,r,s);return o?(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=45&&t<=135?"south":t>135&&t<=225?"west":t>225&&t<=315?"north":"east"})(a):(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=0&&t<=22.5?"east":t>=22.5&&t<=67.5?"south-east":t>=67.5&&t<=112.5?"south":t>=112.5&&t<=157.5?"south-west":t>=157.5&&t<=202.5?"west":t>=202.5&&t<=247.5?"north-west":t>=247.5&&t<=292.5?"north":t>=292.5&&t<=337.5?"north-east":"east"})(a)},P=()=>"_"+Math.random().toString(36).substring(2,11),B=async(t,e)=>{var o;if(!(!t||!e||p(e)||h(e)||(o=e,"boolean"==typeof o)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object))if(await u(),Array.isArray(e))for(const o of e)t.style[o.key]=o.value;else for(const o of Object.keys(e))t.style[o]=e[o]},R=async t=>(await u(),getComputedStyle(t,null));class T{#t;#e;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#o(t,e)}#o(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#e=document.getElementById("ph-speccer-path"),!this.#e||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");B(this.#t,{height:`${document.body.scrollHeight}px`}),this.connect()}connect(){this.draw(this.#e)}#n(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${P()}`,o=t.cloneNode(!1),n=this.startElement.getAttribute("id")||P();return this.startElement.setAttribute("id",n),o.setAttribute("data-start-el",n),o.setAttribute("id",e),o.classList.remove("original"),o.classList.add("speccer"),o}async draw(t){if(!t)throw new Error("No path given to draw!");const e=this.#n(t),o=this.#n(t);if(!t.parentNode)throw new Error("No parentNode found for path");this.firstPathElement=t.parentNode.insertBefore(e,t.nextSibling),this.secondPathElement=t.parentNode.insertBefore(o,t.nextSibling);const n=await S({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:i,path1pos2:r,path2pos1:s,path2pos2:a}=(t=>{let e,o,n,i;switch(t){case"east":e="right-top",o="left-center",n="right-bottom",i="left-center";break;case"south":e="bottom-left",o="top-center",n="bottom-right",i="top-center";break;case"west":e="left-top",o="right-center",n="left-bottom",i="right-center";break;default:e="top-left",o="bottom-center",n="top-right",i="bottom-center"}return{path1pos1:e,path1pos2:o,path2pos1:n,path2pos2:i}})(n),c=await L(this.startElement,this.stopElement,{pos1:i,pos2:r,firstSet:!0,direction:n}),l=await L(this.startElement,this.stopElement,{pos1:s,pos2:a,direction:n});this.firstPathElement.setAttribute("data-direction",n),this.firstPathElement.setAttribute("data-pos1",i),this.firstPathElement.setAttribute("data-pos2",r),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",n),this.secondPathElement.setAttribute("data-pos1",s),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",l)}}window.DrawSVGCurlyBracket=T;class k{#t;#e;startElement;stopElement;line;constructor(t,e){this.#o(t,e)}#o(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#e=document.getElementById("ph-speccer-path"),!this.#e||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");B(this.#t,{height:`${document.body.scrollHeight}px`}),this.connect()}connect(){this.draw(this.#e)}async draw(t){if(!t)throw new Error("No path given to draw!");const e=`ph_draw_path-path-${P()}`,o=t.cloneNode(!1),n=this.startElement.getAttribute("id")||P();if(this.startElement.setAttribute("id",n),o.setAttribute("id",e),o.setAttribute("data-start-el",n),o.classList.remove("original"),o.classList.add("speccer"),!t.parentNode)throw new Error("No parentNode found for path");this.line=t.parentNode.insertBefore(o,t.nextSibling);const i=await S({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:r,pos2:s}=(t=>{let e,o;switch(t){case"east":e="right",o="left";break;case"south":e="bottom",o="top";break;case"west":e="left",o="right";break;default:e="top",o="bottom"}return{pos1:e,pos2:o}})(i),a=await(async(t,e,o)=>{const{pos1:n,pos2:i}=o,{x1:r,y1:s,x2:a,y2:c}=await C(t,e,n,i),{firstPoint:l,firstControl:p,lastControl:d,lastPoint:h}=v({x1:r,x2:a,y1:s,y2:c},{direction:""});return`M ${l.x} ${l.y}C ${p.x} ${p.y}, ${d.x} ${d.y}, ${h.x} ${h.y}`})(this.startElement,this.stopElement,{pos1:r,pos2:s});this.line.setAttribute("data-direction",i),this.line.setAttribute("data-pos1",r),this.line.setAttribute("data-pos2",s),this.line.setAttribute("d",a)}}window.DrawSVGLine=k;const N=(t,e,o="noop")=>{t&&(!e||e&&!e.length||e.trim().split(" ").filter((t=>t!==o)).forEach((e=>t.classList.add(e))))},q=(t,e)=>t?!e&&d(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():"",O=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],I=t=>parseInt(t,10),M=t=>t.includes("Top")?t.replace("Top"," top"):t.includes("Right")?t.replace("Right"," right"):t.includes("Bottom")?t.replace("Bottom"," bottom"):t.includes("Left")?t.replace("Left"," left"):"",H=t=>I(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,V=async(t,e,o)=>{await u();return getComputedStyle(t)[e]===o},j=async(t,e,o)=>{if(!t.parentElement)return null;return await V(t.parentElement,e,o)?t.parentElement:await j(t.parentElement,e,o)},W=(t,e,o)=>t-e.width/2+o.width/2,z=(t,e,o)=>t-e.height/2+o.height/2,F=async t=>{await u();let e=t.getBoundingClientRect(),o=e.top+window.scrollY;const n=e.left+window.scrollX,i=await(async t=>await j(t,"position","sticky"))(t),r=await(async t=>await V(t,"position","sticky"))(t);if(r){const n=t.style.position;await u(),t.style.position="relative",await u(),e=t.getBoundingClientRect(),o=e.top,t.style.position=n}else if(i){const n=i.style.position;await u(),i.style.position="relative",await u(),e=t.getBoundingClientRect(),o=e.top,i.style.position=n}return{height:e.height,width:e.width,top:o,left:n}},G=async(t,e)=>{await u();const o=t.getBoundingClientRect(),n=await F(e),i=await(async(t,e)=>{await u();const o=t.getBoundingClientRect(),n=e.getBoundingClientRect(),i=n.top+window.scrollY,r=n.left+window.scrollX;return{height:n.height,width:n.width,top:z(i,o,n),left:W(r,o,n)}})(t,e),r=n.height,s=n.width,a=o.height,c=o.width;return{absolute:()=>({top:n.top,left:n.left,height:r,width:s}),toTop:({center:t=!1,sourceHeight:e=a,modifier:o=0}={})=>({top:n.top+e+o,left:t?i.left:n.left,height:r,width:s}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:o=0}={})=>({top:n.top-e-o,left:t?i.left:n.left,height:r,width:s}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:o=r,modifier:c=0}={})=>({top:n.top+o-(e+c),left:t?i.left:n.left,height:r,width:s}),fromBottom:({center:t=!1,targetHeight:e=r,modifier:o=0}={})=>({top:n.top+e+o,left:t?i.left:n.left,height:r,width:s}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:o=0}={})=>({top:t?i.top:n.top,left:n.left+e+o,height:r,width:s}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:o=0}={})=>({top:t?i.top:n.top,left:n.left-e-o,height:r,width:s}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:o=s,modifier:a=0}={})=>({top:t?i.top:n.top,left:n.left+o-(e+a),height:r,width:s}),fromRight:({center:t=!1,targetWidth:e=s,modifier:o=0}={})=>({top:t?i.top:n.top,left:n.left+e+o,height:r,width:s})}},D=async(t,e,n,l)=>{await u();const{isCurly:p=!1}=l||{},d=H(n),h=I(getComputedStyle(n).getPropertyValue("--ph-speccer-measure-size"))||8;const f=await G(n,e);if(c(t)){const{left:t,top:e,height:o,width:n}=f.absolute();return{left:`${t}px`,top:`${e}px`,height:`${o}px`,width:`${n}px`}}if(i(t).includes(o.Left)){if(a(t)&&!p){const{left:t,top:e,height:o}=f.fromLeft({sourceWidth:h});return{left:`${t}px`,top:`${e}px`,height:`${o}px`}}const{left:e,top:o}=f.fromLeft({center:!0,modifier:p?d/1.5:d});return{left:`${e}px`,top:`${o}px`}}if(r(t)){if(a(t)&&!p){const{left:t,top:e,height:o}=f.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${o}px`}}const{left:e,top:o}=f.fromRight({center:!0,modifier:p?d/1.5:d});return{left:`${e}px`,top:`${o}px`}}if(s(t)){if(a(t)&&!p){const{left:t,top:e,width:o}=f.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${o}px`}}const{left:e,top:o}=f.fromBottom({center:!0,modifier:p?d/1.5:d});return{left:`${e}px`,top:`${o}px`}}if(a(t)&&!p){const{left:t,top:e,width:o}=f.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${o}px`}}const{left:m,top:g}=f.fromTop({center:!0,modifier:p?d/1.5:d});return{left:`${m}px`,top:`${g}px`}},_=(t="",e,o="span")=>{const n=document.createElement(o),i=document.createTextNode(t),r={};null!==e&&""!==e&&(r[e]=!0),!a(e)&&!c(e)||a(e)&&l(e)?n.appendChild(i):(a(e)||c(e))&&n.setAttribute("data-dissection-counter",t);const s=q("ph-speccer speccer dissection",r);return N(n,s),n},X=async t=>{if(!t)return;const e=t.querySelectorAll("[data-anatomy]");if(e){let t=0;e.forEach((async(e,n)=>{if(!e)return;const i=e.getAttribute("data-anatomy")||"";if(!i||""===i||!i.includes(o.Outline))return;let r=O[n];r||(r=`${O[t]}${O[t].toLowerCase()}`,t++);const s=_(r,i);document.body.appendChild(s);const a=await D(i,e,s,{isCurly:l(i)});await B(s,a),i.includes(o.SVG)&&!l(i)?new k(e,s):l(i)&&new T(e,s)}))}},Y=(t="",e="",o="span")=>{const n=document.createElement(o);return n.setAttribute("title",`${t}px`),n.setAttribute("data-measure",`${parseInt(`${t}`,10)}px`),N(n,`ph-speccer speccer measure ${e}`),n},J=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const o=await R(t);if("none"===o.display||"0"===o.opacity||"hidden"===o.visibility)return;await u();const a=t.getBoundingClientRect();if(i(e).includes(n.Width))if(s(e)){const o=Y(a.width,e);document.body.appendChild(o);const n=await G(o,t),{left:i,top:r,width:s}=n.fromBottom({center:!1});await B(o,{left:`${i}px`,top:`${r}px`,width:`${s}px`})}else{const o=Y(a.width,e);document.body.appendChild(o);const n=await G(o,t),{left:i,top:r,width:s}=n.fromTop({center:!1,modifier:-8});await B(o,{left:`${i}px`,top:`${r}px`,width:`${s}px`})}else if((t=>i(t).includes(n.Height))(e))if(r(e)){const o=Y(a.height,e);document.body.appendChild(o);const n=await G(o,t),{left:i,top:r,height:s}=n.fromRight({center:!1});await B(o,{left:`${i}px`,top:`${r}px`,height:`${s}px`})}else{const o=Y(a.height,e);document.body.appendChild(o);const n=await G(o,t),{left:i,top:r,height:s}=n.fromLeft({center:!1,modifier:-8});await B(o,{left:`${i}px`,top:`${r}px`,height:`${s}px`})}},K=async(t,e,o,n)=>{await u();const i=n.getBoundingClientRect(),r=await F(n);"marginTop"===t&&B(o,{height:`${e}px`,width:i.width+"px",left:r.left+"px",top:r.top-e+"px"}),"marginRight"===t&&B(o,{height:i.height+"px",width:`${e}px`,left:r.left+parseInt(i.width+"",10)+"px",top:r.top+"px"}),"marginBottom"===t&&B(o,{height:`${e}px`,width:i.width+"px",left:r.left+"px",top:r.top+parseInt(i.height+"",10)+"px"}),"marginLeft"===t&&B(o,{height:i.height+"px",width:`${e}px`,left:r.left-e+"px",top:r.top+"px"}),"paddingTop"===t&&B(o,{height:`${e}px`,width:i.width+"px",left:r.left+"px",top:r.top+"px"}),"paddingBottom"===t&&B(o,{height:`${e}px`,width:i.width+"px",left:r.left+"px",top:r.top+(parseInt(i.height+"",10)-e)+"px"}),"paddingRight"===t&&B(o,{height:i.height+"px",width:`${e}px`,left:r.left+(parseInt(i.width+"",10)-e)+"px",top:r.top+"px"}),"paddingLeft"===t&&B(o,{height:i.height+"px",width:`${e}px`,left:r.left+"px",top:r.top+"px"})},Q=(t="",e="span")=>{const o=document.createElement(e),n=document.createTextNode(t+"");return o.appendChild(n),o.setAttribute("title",`${t}px`),N(o,"ph-speccer speccer spacing"),o},U=async t=>{if(!t)return;const e=await R(t);if("none"===e.display||"0"===e.opacity||"hidden"===e.visibility)return;const o=(t=>{const{marginTop:e,marginBottom:o,marginLeft:n,marginRight:i,paddingTop:r,paddingBottom:s,paddingLeft:a,paddingRight:c}=t;return{marginTop:e,marginBottom:o,marginLeft:n,marginRight:i,paddingTop:r,paddingBottom:s,paddingLeft:a,paddingRight:c}})(e),n=Object.keys(o).filter((t=>"0px"!==o[t]));if(n.length)for(const e of n){const n=I(o[e]),i=Q(n),r=M(e);N(i,r),document.body.appendChild(i),t.classList.add("is-specced"),await K(e,n,i,t)}},Z=t=>{const e=()=>((t,e,o=!1)=>{let n;return function(i,...r){const s=o&&!n;n&&clearTimeout(n),n=setTimeout((function(){n=null,o||t.apply(i,r)}),e),s&&t.apply(i,r)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},tt=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},et=()=>{const t=new IntersectionObserver(((t,e)=>{for(const o of t)o.intersectionRatio>0&&(U(o.target),e.unobserve(o.target))}));for(const e of document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"))t.observe(e);const e=new IntersectionObserver(((t,e)=>{for(const o of t)o.intersectionRatio>0&&(J(o.target),e.unobserve(o.target))}));for(const t of document.querySelectorAll("[data-speccer-measure]"))e.observe(t);const o=new IntersectionObserver((async(t,e)=>{for(const o of t)o.intersectionRatio>0&&(await X(o.target),e.unobserve(o.target))}));for(const t of document.querySelectorAll("[data-anatomy-section]"))o.observe(t)},ot=t=>{window.speccer=t},nt=t=>{const e=document.currentScript;if(e){const o=e.getAttribute("src");o?.includes("speccer.js")&&(e.hasAttribute("data-manual")?ot(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?tt(t):e.hasAttribute("data-lazy")?et():tt(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||Z(t))}},it=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],rt=["escape","esc","enter","return","⏎","␛"],st=async(t,e,o)=>{await u();const n=H(o),i=await G(o,e);if("tabstops"===t){let{left:t,top:e}=i.fromTop();return t-=32,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("landmark"===t){let{left:t,top:e}=i.fromTop();return t-=16,e-=16,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("region"===t){const{left:t,top:e,height:o,width:n}=i.fromTop();return{height:`${o}px`,width:`${n}px`,left:`${t}px`,top:`${e}px`}}if("shortcut"===t){const{left:t,top:e}=i.fromBottom();return{left:`${t}px`,top:`${e}px`}}const{left:r,top:s}=i.fromTop({center:!0,modifier:n});return{left:r-32+"px",top:s-32+"px"}},at=async(t,e,o)=>{if(!t||!t.checkVisibility())return;const n=((t="tabstops",e,o="span")=>{const n=document.createElement(o),i=q("ph-speccer speccer a11y",{tabstops:"tabstops"===t,landmark:"landmark"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(e+"");n.appendChild(t)}return N(n,i),n})(o,e);if("landmark"===o){n.setAttribute("data-speccer-nodename",t.nodeName);const e=t.role||`semantic role: ${t.nodeName.toLowerCase()}`,o=t.getAttribute("aria-label")||"unnamed";n.setAttribute("title",`${o}: ${e}`)}document.body.appendChild(n);const i=await st(o,t,n);await B(n,i)},ct=async(t,e)=>{const o=e.split(/\s\+\s/).map((t=>t.trim())),n=document.createElement("div");n.classList.add("ph-speccer"),n.classList.add("speccer"),n.classList.add("a11y"),n.classList.add("shortcut-holder");for(const t of o){const e=document.createElement("kbd"),o=document.createTextNode(t);e.classList.add("ph-speccer"),e.classList.add("speccer"),e.classList.add("a11y"),e.classList.add("shortcut"),it.includes(t.toLowerCase())&&e.classList.add("modifier"),rt.includes(t.toLowerCase())&&e.classList.add("physical"),e.appendChild(o),n.appendChild(e)}document.body.appendChild(n);const i=await st("shortcut",t,n);await B(n,i)},lt=(t,e)=>{const o=t.getBoundingClientRect(),n=e.gridTemplateColumns,i=parseInt(e.columnGap),r=e.padding,s=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-gap-original",`${i}px`),document.documentElement.style.setProperty("--ph-speccer-grid-gap",`${i<24?24:i}px`),i<24&&s.classList.add("speccer-small-grid"),s.classList.add("ph-speccer"),s.classList.add("speccer"),s.classList.add("speccer-grid-container"),s.style.height=o.height+64+"px",s.style.width=o.width+"px",s.style.left=o.left+"px",s.style.top=o.top-32+"px",s.style.padding=r,s.style.gridTemplateColumns=n;const a=n.split(" ").length;for(let t=0;t<a;t++){const t=document.createElement("div");t.classList.add("ph-speccer"),t.classList.add("speccer"),t.classList.add("speccer-grid-item"),s.appendChild(t)}return s},pt=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-grid");await u();const o=window.getComputedStyle(t);if("grid"===e&&("grid"===o.display||-1!==o.display.indexOf("grid"))){const e=lt(t,o);document.body.appendChild(e)}},dt=(t="span")=>{const e=document.createElement(t),o=q("ph-speccer speccer mark");return N(e,o),e},ht=async t=>{if(!t)return;const e=dt();document.body.appendChild(e);const o=await G(e,t),{left:n,top:i,height:r,width:s}=o.absolute(),a={left:`${n}px`,top:`${i}px`,height:`${r}px`,width:`${s}px`};await B(e,a)},ft=(t,e=3)=>parseFloat(t+"").toFixed(e),mt=(t,e)=>{const o=document.createElement("div"),n={};null!==e&&""!==e&&(n[e]=!0);const i=q("ph-speccer speccer typography",n);return o.innerHTML=t,N(o,i),o},ut=async t=>{if(!t)return;const o=t.getAttribute("data-speccer-typography"),n=await R(t);if("none"===n.display||"0"===n.opacity||"hidden"===n.visibility)return;t.classList.add("is-specced");const i=await(async t=>{const e=(t=>{const{lineHeight:e,letterSpacing:o,fontFamily:n,fontSize:i,fontStyle:r,fontVariationSettings:s,fontWeight:a}=t;return{lineHeight:e,letterSpacing:o,fontFamily:n,fontSize:i,fontStyle:r,fontVariationSettings:s,fontWeight:a}})(await R(t)),o="normal"!==e.lineHeight?parseInt(e.lineHeight,10)/16+"rem":"normal";return`\nfont-styles: {<ul class="speccer-styles">  <li><span class="property">font-family:</span> ${e.fontFamily};</li>  <li><span class="property">font-size:</span> ${e.fontSize} / ${parseInt(e.fontSize,10)/16}rem;</li>  <li><span class="property">font-weight:</span> ${e.fontWeight};</li>  <li><span class="property">font-variation-settings:</span> ${e.fontVariationSettings};</li>  <li><span class="property">line-height:</span> ${e.lineHeight} / ${o};</li>  <li><span class="property">letter-spacing:</span> ${e.letterSpacing};</li>  <li><span class="property">font-style:</span> ${e.fontStyle};</li></ul>}`})(t),r=mt(i,o);document.body.appendChild(r);const s=await(async(t,o,n)=>{const i=o.getBoundingClientRect(),r=H(n),s=n.getBoundingClientRect(),a=await F(o),c=a.left-s.width-r+"px",l=ft(z(a.top,s,i))+"px",p=a.left+i.width+r+"px",d=ft(z(a.top,s,i))+"px",h=ft(W(a.left,s,i))+"px",f=a.top-s.height-r+"px",m=ft(W(a.left,s,i))+"px",u=a.top+i.height+r+"px";let g={left:c,top:l};return t?.includes(e.Right)?g={left:p,top:d}:t?.includes(e.Top)?g={left:h,top:f}:t?.includes(e.Bottom)&&(g={left:m,top:u}),g})(o,t,r);B(r,s)},gt={create:lt,element:pt},yt={create:Q,element:U},wt={create:_,element:X},xt={create:Y,element:J},bt={create:dt,element:ht},Et={create:mt,element:ut},$t={dom:tt,lazy:et,manual:ot,activate:nt},At=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".ph-speccer.speccer");const t=document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"),e=document.querySelectorAll("[data-speccer-measure]"),o=document.querySelectorAll("[data-speccer-typography]"),n=document.querySelectorAll("[data-anatomy-section]"),i=document.querySelectorAll("[data-speccer-mark]"),r=document.querySelectorAll('[data-speccer-grid="grid"]');for(const t of i)ht(t);for(const t of r)pt(t);for(const e of t)U(e);for(const t of e)J(t);for(const t of o)ut(t);for(const t of n)X(t);(()=>{const t=document.querySelectorAll("[data-speccer-a11y-tabstops]"),e=document.querySelectorAll("[data-speccer-a11y-landmark]"),o=document.querySelectorAll("[data-speccer-a11y-shortcut]");if(o.length)for(const t of o){const e=t.getAttribute("data-speccer-a11y-shortcut");e&&""!==e&&ct(t,e)}if(t.length)for(const e of t){const t=e.querySelectorAll("\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]\n");for(const e of t)at(e,null,"tabstops")}if(e.length)for(const t of e){const e=t.querySelectorAll('\nheader, footer, section, main, nav, aside, [role="section"], [role="banner"],\n[role="complementary"], [role="contentinfo"], [role="form"], [role="main"],\n[role="navigation"], [role="region"], [role="search"]\n');for(const[t,o]of e.entries())at(o,t+1,"landmark"),at(o,null,"region")}})()};nt(At),t.default=At,t.dissect=wt,t.grid=gt,t.mark=bt,t.measure=xt,t.modes=$t,t.spacing=yt,t.typography=Et,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,(function(t){"use strict";var e,o,n;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(e||(e={})),function(t){t.Outline="outline",t.Enclose="enclose",t.Full="full",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top",t.SVG="svg",t.Curly="curly"}(o||(o={})),function(t){t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(n||(n={}));const i=t=>t.split(" "),r=t=>i(t).includes(o.Right),s=t=>i(t).includes(o.Bottom),a=t=>i(t).includes(o.Full),c=t=>i(t).includes(o.Enclose),l=t=>t.includes(o.Curly)&&t.includes(o.Full),p=t=>"string"==typeof t,d=t=>!p(t),h=t=>"number"==typeof t,f=t=>!h(t),m=t=>void 0===t,u=()=>new Promise(requestAnimationFrame),g=t=>t.top,y=t=>t.left+t.width,w=t=>t.top+t.height,x=t=>t.left,b=t=>t.left+t.width/2,E=t=>t.top+t.height/2,$={center:t=>({x:b(t),y:E(t)}),top:t=>({x:b(t),y:g(t)}),right:t=>({x:y(t),y:E(t)}),bottom:t=>({x:b(t),y:w(t)}),left:t=>({x:x(t),y:E(t)}),"right-top":t=>({x:y(t),y:g(t)}),"right-bottom":t=>({x:y(t),y:w(t)}),"left-top":t=>({x:x(t),y:g(t)}),"left-bottom":t=>({x:x(t),y:w(t)}),"top-left":t=>({x:x(t),y:g(t)}),"top-right":t=>({x:y(t),y:g(t)}),"bottom-left":t=>({x:x(t),y:w(t)}),"bottom-right":t=>({x:y(t),y:w(t)}),"top-center":t=>({x:b(t),y:g(t)}),"right-center":t=>({x:y(t),y:E(t)}),"bottom-center":t=>({x:b(t),y:w(t)}),"left-center":t=>({x:x(t),y:E(t)})},A=async(t,e="center")=>{if(!e)throw Error("No position given");if(d(e))throw Error("The position given is not the required type: pos: "+typeof e);const o=["center","left","right","top","bottom","right-top","right-bottom","left-top","left-bottom","top-left","top-right","bottom-left","bottom-right","top-center","right-center","bottom-center","left-center"];if(!o.includes(e))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${o.join(", ")}`);await u();const n=t.getBoundingClientRect();return $[e](n)},C=async(t,e,o="center",n="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:r}=await A(t,o),{x:s,y:a}=await A(e,n);return{x1:i,y1:r,x2:s,y2:a}},v=(t,e)=>{const{x1:o,x2:n,y1:i,y2:r}=t,{direct:s=!1,firstSet:a=!1,direction:c}=e;let l={x:o+(n-o)/2,y:i},p={x:o+(n-o)/2,y:r};return s&&(a?"west"===c?(l={x:o-32,y:i-8},p={x:n+32,y:r}):"south"===c?(l={x:o-8,y:i+32},p={x:n,y:r-32}):"east"===c?(l={x:o+32,y:i-8},p={x:n-32,y:r}):(l={x:o-8,y:i-32},p={x:n,y:r+32}):"west"===c?(l={x:o-32,y:i+8},p={x:n+32,y:r}):"south"===c?(l={x:o+8,y:i+32},p={x:n,y:r-32}):"east"===c?(l={x:o+32,y:i+8},p={x:n-32,y:r}):(l={x:o+8,y:i-32},p={x:n,y:r+32})),{firstPoint:{x:o,y:i},firstControl:l,lastPoint:{x:n,y:r},lastControl:p}},L=async(t,e,o)=>{const{pos1:n,pos2:i,firstSet:r=!1,direction:s}=o,{x1:a,y1:c,x2:l,y2:p}=await C(t,e,n,i);let d=0,h=0;"north"===s?h=8:"west"===s?d=8:"east"===s?d=-8:"south"===s&&(h=-8);const{firstPoint:f,firstControl:m,lastControl:u,lastPoint:g}=v({x1:a+0,x2:l+d,y1:c+0+document.documentElement.scrollTop,y2:p+h+document.documentElement.scrollTop},{direct:!0,firstSet:r,direction:s});return`M ${f.x} ${f.y}C ${m.x} ${m.y}, ${u.x} ${u.y}, ${g.x} ${g.y}`},S=async({start:t,stop:e,crude:o=!1})=>{const{x1:n,y1:i,x2:r,y2:s}=await C(t,e),a=((t,e,o,n,i=!0)=>{if(m(t)||m(e)||m(o)||m(n))throw new SyntaxError("Missing input for `angle`");if(f(t)||f(e)||f(o)||f(n))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof o} ${typeof n}`);const r=n-e,s=o-t;let a=Math.atan2(r,s);return a*=180/Math.PI,i&&a<0&&(a+=360),a})(n,i,r,s);return o?(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=45&&t<=135?"south":t>135&&t<=225?"west":t>225&&t<=315?"north":"east"})(a):(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=0&&t<=22.5?"east":t>=22.5&&t<=67.5?"south-east":t>=67.5&&t<=112.5?"south":t>=112.5&&t<=157.5?"south-west":t>=157.5&&t<=202.5?"west":t>=202.5&&t<=247.5?"north-west":t>=247.5&&t<=292.5?"north":t>=292.5&&t<=337.5?"north-east":"east"})(a)},P=()=>"_"+Math.random().toString(36).substring(2,11),B=async(t,e)=>{var o;if(!(!t||!e||p(e)||h(e)||(o=e,"boolean"==typeof o)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object))if(await u(),Array.isArray(e))for(const o of e)t.style[o.key]=o.value;else for(const o of Object.keys(e))t.style[o]=e[o]},R=async t=>(await u(),getComputedStyle(t,null));class T{#t;#e;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#o(t,e)}#o(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#e=document.getElementById("ph-speccer-path"),!this.#e||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");B(this.#t,{height:`${document.body.scrollHeight}px`}),this.connect()}connect(){this.draw(this.#e)}#n(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${P()}`,o=t.cloneNode(!1),n=this.startElement.getAttribute("id")||P();return this.startElement.setAttribute("id",n),o.setAttribute("data-start-el",n),o.setAttribute("id",e),o.classList.remove("original"),o.classList.add("speccer"),o}async draw(t){if(!t)throw new Error("No path given to draw!");const e=this.#n(t),o=this.#n(t);if(!t.parentNode)throw new Error("No parentNode found for path");this.firstPathElement=t.parentNode.insertBefore(e,t.nextSibling),this.secondPathElement=t.parentNode.insertBefore(o,t.nextSibling);const n=await S({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:i,path1pos2:r,path2pos1:s,path2pos2:a}=(t=>{let e,o,n,i;switch(t){case"east":e="right-top",o="left-center",n="right-bottom",i="left-center";break;case"south":e="bottom-left",o="top-center",n="bottom-right",i="top-center";break;case"west":e="left-top",o="right-center",n="left-bottom",i="right-center";break;default:e="top-left",o="bottom-center",n="top-right",i="bottom-center"}return{path1pos1:e,path1pos2:o,path2pos1:n,path2pos2:i}})(n),c=await L(this.startElement,this.stopElement,{pos1:i,pos2:r,firstSet:!0,direction:n}),l=await L(this.startElement,this.stopElement,{pos1:s,pos2:a,direction:n});this.firstPathElement.setAttribute("data-direction",n),this.firstPathElement.setAttribute("data-pos1",i),this.firstPathElement.setAttribute("data-pos2",r),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",n),this.secondPathElement.setAttribute("data-pos1",s),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",l)}}window.DrawSVGCurlyBracket=T;class k{#t;#e;startElement;stopElement;line;constructor(t,e){this.#o(t,e)}#o(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#e=document.getElementById("ph-speccer-path"),!this.#e||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");B(this.#t,{height:`${document.body.scrollHeight}px`}),this.connect()}connect(){this.draw(this.#e)}async draw(t){if(!t)throw new Error("No path given to draw!");const e=`ph_draw_path-path-${P()}`,o=t.cloneNode(!1),n=this.startElement.getAttribute("id")||P();if(this.startElement.setAttribute("id",n),o.setAttribute("id",e),o.setAttribute("data-start-el",n),o.classList.remove("original"),o.classList.add("speccer"),!t.parentNode)throw new Error("No parentNode found for path");this.line=t.parentNode.insertBefore(o,t.nextSibling);const i=await S({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:r,pos2:s}=(t=>{let e,o;switch(t){case"east":e="right",o="left";break;case"south":e="bottom",o="top";break;case"west":e="left",o="right";break;default:e="top",o="bottom"}return{pos1:e,pos2:o}})(i),a=await(async(t,e,o)=>{const{pos1:n,pos2:i}=o,{x1:r,y1:s,x2:a,y2:c}=await C(t,e,n,i),{firstPoint:l,firstControl:p,lastControl:d,lastPoint:h}=v({x1:r,x2:a,y1:s,y2:c},{direction:""});return`M ${l.x} ${l.y}C ${p.x} ${p.y}, ${d.x} ${d.y}, ${h.x} ${h.y}`})(this.startElement,this.stopElement,{pos1:r,pos2:s});this.line.setAttribute("data-direction",i),this.line.setAttribute("data-pos1",r),this.line.setAttribute("data-pos2",s),this.line.setAttribute("d",a)}}window.DrawSVGLine=k;const N=(t,e,o="noop")=>{t&&(!e||e&&!e.length||e.trim().split(" ").filter((t=>t!==o)).forEach((e=>t.classList.add(e))))},q=(t,e)=>t?!e&&d(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():"",O=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],I=t=>parseInt(t,10),M=t=>t.includes("Top")?t.replace("Top"," top"):t.includes("Right")?t.replace("Right"," right"):t.includes("Bottom")?t.replace("Bottom"," bottom"):t.includes("Left")?t.replace("Left"," left"):"",H=t=>I(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,V=async(t,e,o)=>{await u();return getComputedStyle(t)[e]===o},j=async(t,e,o)=>{if(!t.parentElement)return null;return await V(t.parentElement,e,o)?t.parentElement:await j(t.parentElement,e,o)},W=(t,e,o)=>t-e.width/2+o.width/2,z=(t,e,o)=>t-e.height/2+o.height/2,F=async t=>{await u();let e=t.getBoundingClientRect(),o=e.top+window.scrollY;const n=e.left+window.scrollX,i=await(async t=>await j(t,"position","sticky"))(t),r=await(async t=>await V(t,"position","sticky"))(t);if(r){const n=t.style.position;await u(),t.style.position="relative",await u(),e=t.getBoundingClientRect(),o=e.top,t.style.position=n}else if(i){const n=i.style.position;await u(),i.style.position="relative",await u(),e=t.getBoundingClientRect(),o=e.top,i.style.position=n}return{height:e.height,width:e.width,top:o,left:n}},G=async(t,e)=>{await u();const o=t.getBoundingClientRect(),n=await F(e),i=await(async(t,e)=>{await u();const o=t.getBoundingClientRect(),n=e.getBoundingClientRect(),i=n.top+window.scrollY,r=n.left+window.scrollX;return{height:n.height,width:n.width,top:z(i,o,n),left:W(r,o,n)}})(t,e),r=n.height,s=n.width,a=o.height,c=o.width;return{absolute:()=>({top:n.top,left:n.left,height:r,width:s}),toTop:({center:t=!1,sourceHeight:e=a,modifier:o=0}={})=>({top:n.top+e+o,left:t?i.left:n.left,height:r,width:s}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:o=0}={})=>({top:n.top-e-o,left:t?i.left:n.left,height:r,width:s}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:o=r,modifier:c=0}={})=>({top:n.top+o-(e+c),left:t?i.left:n.left,height:r,width:s}),fromBottom:({center:t=!1,targetHeight:e=r,modifier:o=0}={})=>({top:n.top+e+o,left:t?i.left:n.left,height:r,width:s}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:o=0}={})=>({top:t?i.top:n.top,left:n.left+e+o,height:r,width:s}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:o=0}={})=>({top:t?i.top:n.top,left:n.left-e-o,height:r,width:s}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:o=s,modifier:a=0}={})=>({top:t?i.top:n.top,left:n.left+o-(e+a),height:r,width:s}),fromRight:({center:t=!1,targetWidth:e=s,modifier:o=0}={})=>({top:t?i.top:n.top,left:n.left+e+o,height:r,width:s})}},D=async(t,e,n,l)=>{await u();const{isCurly:p=!1}=l||{},d=H(n),h=I(getComputedStyle(n).getPropertyValue("--ph-speccer-measure-size"))||8;const f=await G(n,e);if(c(t)){const{left:t,top:e,height:o,width:n}=f.absolute();return{left:`${t}px`,top:`${e}px`,height:`${o}px`,width:`${n}px`}}if(i(t).includes(o.Left)){if(a(t)&&!p){const{left:t,top:e,height:o}=f.fromLeft({sourceWidth:h});return{left:`${t}px`,top:`${e}px`,height:`${o}px`}}const{left:e,top:o}=f.fromLeft({center:!0,modifier:p?d/1.5:d});return{left:`${e}px`,top:`${o}px`}}if(r(t)){if(a(t)&&!p){const{left:t,top:e,height:o}=f.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${o}px`}}const{left:e,top:o}=f.fromRight({center:!0,modifier:p?d/1.5:d});return{left:`${e}px`,top:`${o}px`}}if(s(t)){if(a(t)&&!p){const{left:t,top:e,width:o}=f.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${o}px`}}const{left:e,top:o}=f.fromBottom({center:!0,modifier:p?d/1.5:d});return{left:`${e}px`,top:`${o}px`}}if(a(t)&&!p){const{left:t,top:e,width:o}=f.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${o}px`}}const{left:m,top:g}=f.fromTop({center:!0,modifier:p?d/1.5:d});return{left:`${m}px`,top:`${g}px`}},_=(t="",e,o="span")=>{const n=document.createElement(o),i=document.createTextNode(t),r={};null!==e&&""!==e&&(r[e]=!0),!a(e)&&!c(e)||a(e)&&l(e)?n.appendChild(i):(a(e)||c(e))&&n.setAttribute("data-dissection-counter",t);const s=q("ph-speccer speccer dissection",r);return N(n,s),n},X=async t=>{if(!t)return;const e=t.querySelectorAll("[data-anatomy]");if(e){let t=0;e.forEach((async(e,n)=>{if(!e)return;const i=e.getAttribute("data-anatomy")||"";if(!i||""===i||!i.includes(o.Outline))return;let r=O[n];r||(r=`${O[t]}${O[t].toLowerCase()}`,t++);const s=_(r,i);document.body.appendChild(s);const a=await D(i,e,s,{isCurly:l(i)});await B(s,a),i.includes(o.SVG)&&!l(i)?new k(e,s):l(i)&&new T(e,s)}))}},Y=(t="",e="",o="span")=>{const n=document.createElement(o);return n.setAttribute("title",`${t}px`),n.setAttribute("data-measure",`${parseInt(`${t}`,10)}px`),N(n,`ph-speccer speccer measure ${e}`),n},J=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const o=await R(t);if("none"===o.display||"0"===o.opacity||"hidden"===o.visibility)return;await u();const a=t.getBoundingClientRect();if(i(e).includes(n.Width))if(s(e)){const o=Y(a.width,e);document.body.appendChild(o);const n=await G(o,t),{left:i,top:r,width:s}=n.fromBottom({center:!1});await B(o,{left:`${i}px`,top:`${r}px`,width:`${s}px`})}else{const o=Y(a.width,e);document.body.appendChild(o);const n=await G(o,t),{left:i,top:r,width:s}=n.fromTop({center:!1,modifier:-8});await B(o,{left:`${i}px`,top:`${r}px`,width:`${s}px`})}else if((t=>i(t).includes(n.Height))(e))if(r(e)){const o=Y(a.height,e);document.body.appendChild(o);const n=await G(o,t),{left:i,top:r,height:s}=n.fromRight({center:!1});await B(o,{left:`${i}px`,top:`${r}px`,height:`${s}px`})}else{const o=Y(a.height,e);document.body.appendChild(o);const n=await G(o,t),{left:i,top:r,height:s}=n.fromLeft({center:!1,modifier:-8});await B(o,{left:`${i}px`,top:`${r}px`,height:`${s}px`})}},K=async(t,e,o,n)=>{await u();const i=n.getBoundingClientRect(),r=await F(n);"marginTop"===t&&B(o,{height:`${e}px`,width:i.width+"px",left:r.left+"px",top:r.top-e+"px"}),"marginRight"===t&&B(o,{height:i.height+"px",width:`${e}px`,left:r.left+parseInt(i.width+"",10)+"px",top:r.top+"px"}),"marginBottom"===t&&B(o,{height:`${e}px`,width:i.width+"px",left:r.left+"px",top:r.top+parseInt(i.height+"",10)+"px"}),"marginLeft"===t&&B(o,{height:i.height+"px",width:`${e}px`,left:r.left-e+"px",top:r.top+"px"}),"paddingTop"===t&&B(o,{height:`${e}px`,width:i.width+"px",left:r.left+"px",top:r.top+"px"}),"paddingBottom"===t&&B(o,{height:`${e}px`,width:i.width+"px",left:r.left+"px",top:r.top+(parseInt(i.height+"",10)-e)+"px"}),"paddingRight"===t&&B(o,{height:i.height+"px",width:`${e}px`,left:r.left+(parseInt(i.width+"",10)-e)+"px",top:r.top+"px"}),"paddingLeft"===t&&B(o,{height:i.height+"px",width:`${e}px`,left:r.left+"px",top:r.top+"px"})},Q=(t="",e="span")=>{const o=document.createElement(e),n=document.createTextNode(t+"");return o.appendChild(n),o.setAttribute("title",`${t}px`),N(o,"ph-speccer speccer spacing"),o},U=async t=>{if(!t)return;const e=await R(t);if("none"===e.display||"0"===e.opacity||"hidden"===e.visibility)return;const o=(t=>{const{marginTop:e,marginBottom:o,marginLeft:n,marginRight:i,paddingTop:r,paddingBottom:s,paddingLeft:a,paddingRight:c}=t;return{marginTop:e,marginBottom:o,marginLeft:n,marginRight:i,paddingTop:r,paddingBottom:s,paddingLeft:a,paddingRight:c}})(e),n=Object.keys(o).filter((t=>"0px"!==o[t]));if(n.length)for(const e of n){const n=I(o[e]),i=Q(n),r=M(e);N(i,r),document.body.appendChild(i),t.classList.add("is-specced"),await K(e,n,i,t)}},Z=t=>{const e=()=>((t,e,o=!1)=>{let n;return function(i,...r){const s=o&&!n;n&&clearTimeout(n),n=setTimeout((function(){n=null,o||t.apply(i,r)}),e),s&&t.apply(i,r)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},tt=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},et=()=>{const t=new IntersectionObserver(((t,e)=>{for(const o of t)o.intersectionRatio>0&&(U(o.target),e.unobserve(o.target))}));for(const e of document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"))t.observe(e);const e=new IntersectionObserver(((t,e)=>{for(const o of t)o.intersectionRatio>0&&(J(o.target),e.unobserve(o.target))}));for(const t of document.querySelectorAll("[data-speccer-measure]"))e.observe(t);const o=new IntersectionObserver((async(t,e)=>{for(const o of t)o.intersectionRatio>0&&(await X(o.target),e.unobserve(o.target))}));for(const t of document.querySelectorAll("[data-anatomy-section]"))o.observe(t)},ot=t=>{window.speccer=t},nt=t=>{const e=document.currentScript;if(e){const o=e.getAttribute("src");o?.includes("speccer.js")&&(e.hasAttribute("data-manual")?ot(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?tt(t):e.hasAttribute("data-lazy")?et():tt(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||Z(t))}},it=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],rt=["escape","esc","enter","return","⏎","␛"],st=async(t,e,o)=>{await u();const n=H(o),i=await G(o,e);if("tabstops"===t){let{left:t,top:e}=i.fromTop();return t-=32,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("landmark"===t){let{left:t,top:e}=i.fromTop();return t-=16,e-=16,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("region"===t){const{left:t,top:e,height:o,width:n}=i.fromTop();return{height:`${o}px`,width:`${n}px`,left:`${t}px`,top:`${e}px`}}if("shortcut"===t){const{left:t,top:e}=i.fromBottom();return{left:`${t}px`,top:`${e}px`}}const{left:r,top:s}=i.fromTop({center:!0,modifier:n});return{left:r-32+"px",top:s-32+"px"}},at=async(t,e,o)=>{if(!t||!t.checkVisibility())return;const n=((t="tabstops",e,o="span")=>{const n=document.createElement(o),i=q("ph-speccer speccer a11y",{tabstops:"tabstops"===t,landmark:"landmark"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(e+"");n.appendChild(t)}return N(n,i),n})(o,e);if("landmark"===o){n.setAttribute("data-speccer-nodename",t.nodeName);const e=t.role||`semantic role: ${t.nodeName.toLowerCase()}`,o=t.getAttribute("aria-label")||"unnamed";n.setAttribute("title",`${o}: ${e}`)}document.body.appendChild(n);const i=await st(o,t,n);await B(n,i)},ct=async(t,e)=>{const o=e.split(/\s\+\s/).map((t=>t.trim())),n=document.createElement("div");n.classList.add("ph-speccer"),n.classList.add("speccer"),n.classList.add("a11y"),n.classList.add("shortcut-holder");for(const t of o){const e=document.createElement("kbd"),o=document.createTextNode(t);e.classList.add("ph-speccer"),e.classList.add("speccer"),e.classList.add("a11y"),e.classList.add("shortcut"),it.includes(t.toLowerCase())&&e.classList.add("modifier"),rt.includes(t.toLowerCase())&&e.classList.add("physical"),e.appendChild(o),n.appendChild(e)}document.body.appendChild(n);const i=await st("shortcut",t,n);await B(n,i)},lt=(t,e)=>{const o=t.getBoundingClientRect(),n=e.gridTemplateColumns,i=e.gridTemplate,r=parseInt(e.columnGap),s=e.padding,a=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-gap-original",`${r}px`),document.documentElement.style.setProperty("--ph-speccer-grid-gap",`${r<24?24:r}px`),r<24&&a.classList.add("speccer-small-grid"),a.classList.add("ph-speccer"),a.classList.add("speccer"),a.classList.add("speccer-grid-container"),a.style.height=o.height+64+"px",a.style.width=o.width+"px",a.style.left=o.left+"px",a.style.top=o.top-32+"px",a.style.padding=s,a.style.gridTemplate=i;const c=n.split(" ").length;for(let t=0;t<c;t++){const t=document.createElement("div");t.classList.add("ph-speccer"),t.classList.add("speccer"),t.classList.add("speccer-grid-item"),a.appendChild(t)}return a},pt=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-grid");await u();const o=window.getComputedStyle(t);if("grid"===e&&("grid"===o.display||-1!==o.display.indexOf("grid"))){const e=lt(t,o);document.body.appendChild(e)}},dt=(t="span")=>{const e=document.createElement(t),o=q("ph-speccer speccer mark");return N(e,o),e},ht=async t=>{if(!t)return;const e=dt();document.body.appendChild(e);const o=await G(e,t),{left:n,top:i,height:r,width:s}=o.absolute(),a={left:`${n}px`,top:`${i}px`,height:`${r}px`,width:`${s}px`};await B(e,a)},ft=(t,e=3)=>parseFloat(t+"").toFixed(e),mt=(t,e)=>{const o=document.createElement("div"),n={};null!==e&&""!==e&&(n[e]=!0);const i=q("ph-speccer speccer typography",n);return o.innerHTML=t,N(o,i),o},ut=async t=>{if(!t)return;const o=t.getAttribute("data-speccer-typography"),n=await R(t);if("none"===n.display||"0"===n.opacity||"hidden"===n.visibility)return;t.classList.add("is-specced");const i=await(async t=>{const e=(t=>{const{lineHeight:e,letterSpacing:o,fontFamily:n,fontSize:i,fontStyle:r,fontVariationSettings:s,fontWeight:a}=t;return{lineHeight:e,letterSpacing:o,fontFamily:n,fontSize:i,fontStyle:r,fontVariationSettings:s,fontWeight:a}})(await R(t)),o="normal"!==e.lineHeight?parseInt(e.lineHeight,10)/16+"rem":"normal";return`\nfont-styles: {<ul class="speccer-styles">  <li><span class="property">font-family:</span> ${e.fontFamily};</li>  <li><span class="property">font-size:</span> ${e.fontSize} / ${parseInt(e.fontSize,10)/16}rem;</li>  <li><span class="property">font-weight:</span> ${e.fontWeight};</li>  <li><span class="property">font-variation-settings:</span> ${e.fontVariationSettings};</li>  <li><span class="property">line-height:</span> ${e.lineHeight} / ${o};</li>  <li><span class="property">letter-spacing:</span> ${e.letterSpacing};</li>  <li><span class="property">font-style:</span> ${e.fontStyle};</li></ul>}`})(t),r=mt(i,o);document.body.appendChild(r);const s=await(async(t,o,n)=>{const i=o.getBoundingClientRect(),r=H(n),s=n.getBoundingClientRect(),a=await F(o),c=a.left-s.width-r+"px",l=ft(z(a.top,s,i))+"px",p=a.left+i.width+r+"px",d=ft(z(a.top,s,i))+"px",h=ft(W(a.left,s,i))+"px",f=a.top-s.height-r+"px",m=ft(W(a.left,s,i))+"px",u=a.top+i.height+r+"px";let g={left:c,top:l};return t?.includes(e.Right)?g={left:p,top:d}:t?.includes(e.Top)?g={left:h,top:f}:t?.includes(e.Bottom)&&(g={left:m,top:u}),g})(o,t,r);B(r,s)},gt={create:lt,element:pt},yt={create:Q,element:U},wt={create:_,element:X},xt={create:Y,element:J},bt={create:dt,element:ht},Et={create:mt,element:ut},$t={dom:tt,lazy:et,manual:ot,activate:nt},At=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".ph-speccer.speccer");const t=document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"),e=document.querySelectorAll("[data-speccer-measure]"),o=document.querySelectorAll("[data-speccer-typography]"),n=document.querySelectorAll("[data-anatomy-section]"),i=document.querySelectorAll("[data-speccer-mark]"),r=document.querySelectorAll('[data-speccer-grid="grid"]');for(const t of i)ht(t);for(const t of r)pt(t);for(const e of t)U(e);for(const t of e)J(t);for(const t of o)ut(t);for(const t of n)X(t);(()=>{const t=document.querySelectorAll("[data-speccer-a11y-tabstops]"),e=document.querySelectorAll("[data-speccer-a11y-landmark]"),o=document.querySelectorAll("[data-speccer-a11y-shortcut]");if(o.length)for(const t of o){const e=t.getAttribute("data-speccer-a11y-shortcut");e&&""!==e&&ct(t,e)}if(t.length)for(const e of t){const t=e.querySelectorAll("\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]\n");for(const e of t)at(e,null,"tabstops")}if(e.length)for(const t of e){const e=t.querySelectorAll('\nheader, footer, section, main, nav, aside, [role="section"], [role="banner"],\n[role="complementary"], [role="contentinfo"], [role="form"], [role="main"],\n[role="navigation"], [role="region"], [role="search"]\n');for(const[t,o]of e.entries())at(o,t+1,"landmark"),at(o,null,"region")}})()};nt(At),t.default=At,t.dissect=wt,t.grid=gt,t.mark=bt,t.measure=xt,t.modes=$t,t.spacing=yt,t.typography=Et,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=speccer.js.map