@phun-ky/speccer 9.4.1 → 9.5.1

package/README.md

@@ -26,7 +26,8 @@
     - [Highlight the anatomy of an element](#highlight-the-anatomy-of-an-element)
       - [Custom literals](#custom-literals)
       - [Subtle anatomy](#subtle-anatomy)
-    - [Curly brackets](#curly-brackets)
+      - [Curly brackets](#curly-brackets)
+      - [Highlight anatomy programatically](#highlight-anatomy-programatically)
     - [Element typography](#element-typography)
       - [Syntax highlighting for typography](#syntax-highlighting-for-typography)
     - [Grid spacing](#grid-spacing)
@@ -292,7 +293,7 @@ You can also give a more subtle touch to the anatomy elements.
 
 This will give a dashed border, and a more subtle pin style.
 
-### Curly brackets
+#### Curly brackets
 
 You can use curly brackets with the `curly` tag in `data-anatomy` along side `outline full` to provide a more sleek style.
 
@@ -318,6 +319,12 @@ The curly brackets are made with SVG paths, and it is required to have the follo
 </svg>
 ```
 
+#### Highlight anatomy programatically
+
+from v9.5 you can utilize the `dissect` feature to highlight the anatomy of an element programaticaly. [Here is an example with a click event](https://codepen.io/phun-ky/full/LYKOWyP).
+
+[Kazam_screencast_00002.webm](https://github.com/user-attachments/assets/5c78cece-de46-4876-81f2-98c9108a2103)
+
 ### Element typography
 
 ![Image of typography speccer](./public/typography.png)

package/dist/speccer.d.ts

@@ -40,8 +40,9 @@ declare const spacing: {
     element: (targetEl: HTMLElement) => Promise<void>;
 };
 declare const dissect: {
-    create: (textContent: string | undefined, area: string, n?: string) => HTMLElement;
+    create: (textContent: string | undefined, area: string, id?: string, n?: string) => HTMLElement;
     element: (sectionEl: HTMLElement) => Promise<void>;
+    dissect: (el: HTMLElement, symbol: string, areas?: string) => Promise<string | void>;
 };
 declare const measure: {
     create: (text?: string | number, area?: string | null, tag?: string) => HTMLElement;

package/dist/speccer.esm.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.4.1
+* @version 9.5.1
 * @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.
 */
-var t,e,n;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(t||(t={})),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"}(e||(e={})),function(t){t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(n||(n={}));const o=t=>t.split(" "),s=t=>o(t).includes(e.Right),i=t=>o(t).includes(e.Bottom),a=t=>o(t).includes(e.Full),r=t=>o(t).includes(e.Enclose),p=t=>t.includes(e.Curly)&&t.includes(e.Full),c=t=>"string"==typeof t,l=t=>!c(t),d=t=>"number"==typeof t,h=t=>!d(t),f=t=>void 0===t,u=(t,e,n="noop")=>{t&&(!e||e&&!e.length||e.trim().split(" ").filter((t=>t!==n)).forEach((e=>t.classList.add(e))))},m=(t,e)=>t?!e&&l(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():"",g=(t="",e,n="span")=>{const o=document.createElement(n),s=document.createTextNode(t),i={};null!==e&&""!==e&&(i[e]=!0),!a(e)&&!r(e)||a(e)&&p(e)?o.appendChild(s):(a(e)||r(e))&&o.setAttribute("data-dissection-counter",t);const c=m("ph-speccer speccer dissection",i);return u(o,c),o},y=()=>new Promise(requestAnimationFrame),w=t=>t.top,x=t=>t.left+t.width,b=t=>t.top+t.height,$=t=>t.left,E=t=>t.left+t.width/2,k=t=>t.top+t.height/2,A={center:t=>({x:E(t),y:k(t)}),top:t=>({x:E(t),y:w(t)}),right:t=>({x:x(t),y:k(t)}),bottom:t=>({x:E(t),y:b(t)}),left:t=>({x:$(t),y:k(t)}),"right-top":t=>({x:x(t),y:w(t)}),"right-bottom":t=>({x:x(t),y:b(t)}),"left-top":t=>({x:$(t),y:w(t)}),"left-bottom":t=>({x:$(t),y:b(t)}),"top-left":t=>({x:$(t),y:w(t)}),"top-right":t=>({x:x(t),y:w(t)}),"bottom-left":t=>({x:$(t),y:b(t)}),"bottom-right":t=>({x:x(t),y:b(t)}),"top-center":t=>({x:E(t),y:w(t)}),"right-center":t=>({x:x(t),y:k(t)}),"bottom-center":t=>({x:E(t),y:b(t)}),"left-center":t=>({x:$(t),y:k(t)})},S=async(t,e="center")=>{if(!e)throw Error("No position given");if(l(e))throw Error("The position given is not the required type: pos: "+typeof e);const n=["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(!n.includes(e))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${n.join(", ")}`);await y();const o=t.getBoundingClientRect();return A[e](o)},C=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:s,y:i}=await S(t,n),{x:a,y:r}=await S(e,o);return{x1:s,y1:i,x2:a,y2:r}},L=(t,e)=>{const{x1:n,x2:o,y1:s,y2:i}=t,{direct:a=!1,firstSet:r=!1,direction:p}=e;let c={x:n+(o-n)/2,y:s},l={x:n+(o-n)/2,y:i};return a&&(r?"west"===p?(c={x:n-32,y:s-8},l={x:o+32,y:i}):"south"===p?(c={x:n-8,y:s+32},l={x:o,y:i-32}):"east"===p?(c={x:n+32,y:s-8},l={x:o-32,y:i}):(c={x:n-8,y:s-32},l={x:o,y:i+32}):"west"===p?(c={x:n-32,y:s+8},l={x:o+32,y:i}):"south"===p?(c={x:n+8,y:s+32},l={x:o,y:i-32}):"east"===p?(c={x:n+32,y:s+8},l={x:o-32,y:i}):(c={x:n+8,y:s-32},l={x:o,y:i+32})),{firstPoint:{x:n,y:s},firstControl:c,lastPoint:{x:o,y:i},lastControl:l}},v=async(t,e,n)=>{const{pos1:o,pos2:s,firstSet:i=!1,direction:a}=n,{x1:r,y1:p,x2:c,y2:l}=await C(t,e,o,s);let d=0,h=0;"north"===a?h=8:"west"===a?d=8:"east"===a?d=-8:"south"===a&&(h=-8);const{firstPoint:f,firstControl:u,lastControl:m,lastPoint:g}=L({x1:r+0,x2:c+d,y1:p+0+document.documentElement.scrollTop,y2:l+h+document.documentElement.scrollTop},{direct:!0,firstSet:i,direction:a});return`M ${f.x} ${f.y}C ${u.x} ${u.y}, ${m.x} ${m.y}, ${g.x} ${g.y}`},P=async({start:t,stop:e,crude:n=!1})=>{const{x1:o,y1:s,x2:i,y2:a}=await C(t,e),r=((t,e,n,o,s=!0)=>{if(f(t)||f(e)||f(n)||f(o))throw new SyntaxError("Missing input for `angle`");if(h(t)||h(e)||h(n)||h(o))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof n} ${typeof o}`);const i=o-e,a=n-t;let r=Math.atan2(i,a);return r*=180/Math.PI,s&&r<0&&(r+=360),r})(o,s,i,a);return n?(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"})(r):(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"})(r)},R=()=>"_"+Math.random().toString(36).substring(2,11),B=async(t,e)=>{var n;if(!(!t||!e||c(e)||d(e)||(n=e,"boolean"==typeof n)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object))if(await y(),Array.isArray(e))for(const n of e)t.style[n.key]=n.value;else for(const n of Object.keys(e))t.style[n]=e[n]},T=async t=>(await y(),getComputedStyle(t,null));class I{#t;#e;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#n(t,e)}#n(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)}#o(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${R()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||R();return this.startElement.setAttribute("id",o),n.setAttribute("data-start-el",o),n.setAttribute("id",e),n.classList.remove("original"),n.classList.add("speccer"),n}async draw(t){if(!t)throw new Error("No path given to draw!");const e=this.#o(t),n=this.#o(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(n,t.nextSibling);const o=await P({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:s,path1pos2:i,path2pos1:a,path2pos2:r}=(t=>{let e,n,o,s;switch(t){case"east":e="right-top",n="left-center",o="right-bottom",s="left-center";break;case"south":e="bottom-left",n="top-center",o="bottom-right",s="top-center";break;case"west":e="left-top",n="right-center",o="left-bottom",s="right-center";break;default:e="top-left",n="bottom-center",o="top-right",s="bottom-center"}return{path1pos1:e,path1pos2:n,path2pos1:o,path2pos2:s}})(o),p=await v(this.startElement,this.stopElement,{pos1:s,pos2:i,firstSet:!0,direction:o}),c=await v(this.startElement,this.stopElement,{pos1:a,pos2:r,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",s),this.firstPathElement.setAttribute("data-pos2",i),this.firstPathElement.setAttribute("d",p),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",a),this.secondPathElement.setAttribute("data-pos2",r),this.secondPathElement.setAttribute("d",c)}}window.DrawSVGCurlyBracket=I;class N{#t;#e;startElement;stopElement;line;constructor(t,e){this.#n(t,e)}#n(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-${R()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||R();if(this.startElement.setAttribute("id",o),n.setAttribute("id",e),n.setAttribute("data-start-el",o),n.classList.remove("original"),n.classList.add("speccer"),!t.parentNode)throw new Error("No parentNode found for path");this.line=t.parentNode.insertBefore(n,t.nextSibling);const s=await P({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:i,pos2:a}=(t=>{let e,n;switch(t){case"east":e="right",n="left";break;case"south":e="bottom",n="top";break;case"west":e="left",n="right";break;default:e="top",n="bottom"}return{pos1:e,pos2:n}})(s),r=await(async(t,e,n)=>{const{pos1:o,pos2:s}=n,{x1:i,y1:a,x2:r,y2:p}=await C(t,e,o,s),{firstPoint:c,firstControl:l,lastControl:d,lastPoint:h}=L({x1:i,x2:r,y1:a,y2:p},{direction:""});return`M ${c.x} ${c.y}C ${l.x} ${l.y}, ${d.x} ${d.y}, ${h.x} ${h.y}`})(this.startElement,this.stopElement,{pos1:i,pos2:a});this.line.setAttribute("data-direction",s),this.line.setAttribute("data-pos1",i),this.line.setAttribute("data-pos2",a),this.line.setAttribute("d",r)}}window.DrawSVGLine=N;const q=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"];let O=0;const H=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"):"",V=t=>H(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,z=async(t,e,n)=>{await y();return getComputedStyle(t)[e]===n},W=async(t,e,n)=>{if(!t.parentElement)return null;return await z(t.parentElement,e,n)?t.parentElement:await W(t.parentElement,e,n)},j=(t,e,n)=>t-e.width/2+n.width/2,F=(t,e,n)=>t-e.height/2+n.height/2,G=async t=>{await y();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,s=await(async t=>await W(t,"position","sticky"))(t),i=await(async t=>await z(t,"position","sticky"))(t);if(i){const o=t.style.position;await y(),t.style.position="relative",await y(),e=t.getBoundingClientRect(),n=e.top,t.style.position=o}else if(s){const o=s.style.position;await y(),s.style.position="relative",await y(),e=t.getBoundingClientRect(),n=e.top,s.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},D=async(t,e)=>{await y();const n=t.getBoundingClientRect(),o=await G(e),s=await(async(t,e)=>{await y();const n=t.getBoundingClientRect(),o=e.getBoundingClientRect(),s=o.top+window.scrollY,i=o.left+window.scrollX;return{height:o.height,width:o.width,top:F(s,n,o),left:j(i,n,o)}})(t,e),i=o.height,a=o.width,r=n.height,p=n.width;return{absolute:()=>({top:o.top,left:o.left,height:i,width:a}),toTop:({center:t=!1,sourceHeight:e=r,modifier:n=0}={})=>({top:o.top+e+n,left:t?s.left:o.left,height:i,width:a}),fromTop:({center:t=!1,sourceHeight:e=r,modifier:n=0}={})=>({top:o.top-e-n,left:t?s.left:o.left,height:i,width:a}),toBottom:({center:t=!1,sourceHeight:e=r,targetHeight:n=i,modifier:p=0}={})=>({top:o.top+n-(e+p),left:t?s.left:o.left,height:i,width:a}),fromBottom:({center:t=!1,targetHeight:e=i,modifier:n=0}={})=>({top:o.top+e+n,left:t?s.left:o.left,height:i,width:a}),toLeft:({center:t=!1,sourceWidth:e=p,modifier:n=0}={})=>({top:t?s.top:o.top,left:o.left+e+n,height:i,width:a}),fromLeft:({center:t=!1,sourceWidth:e=p,modifier:n=0}={})=>({top:t?s.top:o.top,left:o.left-e-n,height:i,width:a}),toRight:({center:t=!1,sourceWidth:e=p,targetWidth:n=a,modifier:r=0}={})=>({top:t?s.top:o.top,left:o.left+n-(e+r),height:i,width:a}),fromRight:({center:t=!1,targetWidth:e=a,modifier:n=0}={})=>({top:t?s.top:o.top,left:o.left+e+n,height:i,width:a})}},_=async(t,n,p,c)=>{await y();const{isCurly:l=!1}=c||{},d=V(p),h=H(getComputedStyle(p).getPropertyValue("--ph-speccer-measure-size"))||8;const f=await D(p,n);if(r(t)){const{left:t,top:e,height:n,width:o}=f.absolute();return{left:`${t}px`,top:`${e}px`,height:`${n}px`,width:`${o}px`}}if(o(t).includes(e.Left)){if(a(t)&&!l){const{left:t,top:e,height:n}=f.fromLeft({sourceWidth:h});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:e,top:n}=f.fromLeft({center:!0,modifier:l?d/1.5:d});return{left:`${e}px`,top:`${n}px`}}if(s(t)){if(a(t)&&!l){const{left:t,top:e,height:n}=f.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:e,top:n}=f.fromRight({center:!0,modifier:l?d/1.5:d});return{left:`${e}px`,top:`${n}px`}}if(i(t)){if(a(t)&&!l){const{left:t,top:e,width:n}=f.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:e,top:n}=f.fromBottom({center:!0,modifier:l?d/1.5:d});return{left:`${e}px`,top:`${n}px`}}if(a(t)&&!l){const{left:t,top:e,width:n}=f.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:u,top:m}=f.fromTop({center:!0,modifier:l?d/1.5:d});return{left:`${u}px`,top:`${m}px`}},X=async(t,n)=>{if(!t)return;const o=t.getAttribute("data-anatomy")||"";if(!o||""===o||!o.includes(e.Outline))return;const s=(t=>{const e=window.SPECCER_LITERALS||q;let n=e[t];return 0===t&&(O=0),n||(n=`${e[O]}${e[O].toLowerCase()}`,O++),n})(n),i=g(s,o);document.body.appendChild(i);const a=await _(o,t,i,{isCurly:p(o)});await B(i,a),o.includes(e.SVG)&&!p(o)?new N(t,i):p(o)&&new I(t,i)},Y=async t=>{if(!t)return;const e=t.querySelectorAll("[data-anatomy]");e&&0!==e.length&&e.forEach(X)},J=(t="",e="",n="span")=>{const o=document.createElement(n);return o.setAttribute("title",`${t}px`),o.setAttribute("data-measure",`${parseInt(`${t}`,10)}px`),u(o,`ph-speccer speccer measure ${e}`),o},K=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const a=await T(t);if("none"===a.display||"0"===a.opacity||"hidden"===a.visibility)return;await y();const r=t.getBoundingClientRect();if(o(e).includes(n.Width))if(i(e)){const n=J(r.width,e);document.body.appendChild(n);const o=await D(n,t),{left:s,top:i,width:a}=o.fromBottom({center:!1});await B(n,{left:`${s}px`,top:`${i}px`,width:`${a}px`})}else{const n=J(r.width,e);document.body.appendChild(n);const o=await D(n,t),{left:s,top:i,width:a}=o.fromTop({center:!1,modifier:-8});await B(n,{left:`${s}px`,top:`${i}px`,width:`${a}px`})}else if((t=>o(t).includes(n.Height))(e))if(s(e)){const n=J(r.height,e);document.body.appendChild(n);const o=await D(n,t),{left:s,top:i,height:a}=o.fromRight({center:!1});await B(n,{left:`${s}px`,top:`${i}px`,height:`${a}px`})}else{const n=J(r.height,e);document.body.appendChild(n);const o=await D(n,t),{left:s,top:i,height:a}=o.fromLeft({center:!1,modifier:-8});await B(n,{left:`${s}px`,top:`${i}px`,height:`${a}px`})}},Q=async(t,e,n,o)=>{await y();const s=o.getBoundingClientRect(),i=await G(o);"marginTop"===t&&B(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top-e+"px"}),"marginRight"===t&&B(n,{height:s.height+"px",width:`${e}px`,left:i.left+parseInt(s.width+"",10)+"px",top:i.top+"px"}),"marginBottom"===t&&B(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top+parseInt(s.height+"",10)+"px"}),"marginLeft"===t&&B(n,{height:s.height+"px",width:`${e}px`,left:i.left-e+"px",top:i.top+"px"}),"paddingTop"===t&&B(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top+"px"}),"paddingBottom"===t&&B(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top+(parseInt(s.height+"",10)-e)+"px"}),"paddingRight"===t&&B(n,{height:s.height+"px",width:`${e}px`,left:i.left+(parseInt(s.width+"",10)-e)+"px",top:i.top+"px"}),"paddingLeft"===t&&B(n,{height:s.height+"px",width:`${e}px`,left:i.left+"px",top:i.top+"px"})},U=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(t+"");return n.appendChild(o),n.setAttribute("title",`${t}px`),u(n,"ph-speccer speccer spacing"),n},Z=async t=>{if(!t)return;const e=await T(t);if("none"===e.display||"0"===e.opacity||"hidden"===e.visibility)return;const n=(t=>{const{marginTop:e,marginBottom:n,marginLeft:o,marginRight:s,paddingTop:i,paddingBottom:a,paddingLeft:r,paddingRight:p}=t;return{marginTop:e,marginBottom:n,marginLeft:o,marginRight:s,paddingTop:i,paddingBottom:a,paddingLeft:r,paddingRight:p}})(e),o=Object.keys(n).filter((t=>"0px"!==n[t]));if(o.length)for(const e of o){const o=H(n[e]),s=U(o),i=M(e);u(s,i),document.body.appendChild(s),t.classList.add("is-specced"),await Q(e,o,s,t)}},tt=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(s,...i){const a=n&&!o;o&&clearTimeout(o),o=setTimeout((function(){o=null,n||t.apply(s,i)}),e),a&&t.apply(s,i)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},et=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},nt=()=>{const t=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Z(n.target),e.unobserve(n.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 n of t)n.intersectionRatio>0&&(K(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll("[data-speccer-measure]"))e.observe(t);const n=new IntersectionObserver((async(t,e)=>{for(const n of t)n.intersectionRatio>0&&(await Y(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll("[data-anatomy-section]"))n.observe(t)},ot=t=>{window.speccer=t},st=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?ot(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?et(t):e.hasAttribute("data-lazy")?nt():et(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||tt(t))}},it=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],at=["escape","esc","enter","return","⏎","␛"],rt=async(t,e,n)=>{await y();const o=V(n),s=await D(n,e);if("tabstops"===t){let{left:t,top:e}=s.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}=s.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:n,width:o}=s.fromTop();return{height:`${n}px`,width:`${o}px`,left:`${t}px`,top:`${e}px`}}if("shortcut"===t){const{left:t,top:e}=s.fromBottom();return{left:`${t}px`,top:`${e}px`}}const{left:i,top:a}=s.fromTop({center:!0,modifier:o});return{left:i-32+"px",top:a-32+"px"}},pt=async(t,e,n)=>{if(!t||!t.checkVisibility())return;const o=((t="tabstops",e,n="span")=>{const o=document.createElement(n),s=m("ph-speccer speccer a11y",{tabstops:"tabstops"===t,landmark:"landmark"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(e+"");o.appendChild(t)}return u(o,s),o})(n,e);if("landmark"===n){o.setAttribute("data-speccer-nodename",t.nodeName);const e=t.role||`semantic role: ${t.nodeName.toLowerCase()}`,n=t.getAttribute("aria-label")||"unnamed";o.setAttribute("title",`${n}: ${e}`)}document.body.appendChild(o);const s=await rt(n,t,o);await B(o,s)},ct=async(t,e)=>{const n=e.split(/\s\+\s/).map((t=>t.trim())),o=document.createElement("div");o.classList.add("ph-speccer"),o.classList.add("speccer"),o.classList.add("a11y"),o.classList.add("shortcut-holder");for(const t of n){const e=document.createElement("kbd"),n=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"),at.includes(t.toLowerCase())&&e.classList.add("physical"),e.appendChild(n),o.appendChild(e)}document.body.appendChild(o);const s=await rt("shortcut",t,o);await B(o,s)},lt=(t,e)=>{const n=t.getBoundingClientRect(),o=e.gridTemplateColumns,s=e.gridTemplate,i=parseInt(e.columnGap),a=e.padding,r=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&&r.classList.add("speccer-small-grid"),r.classList.add("ph-speccer"),r.classList.add("speccer"),r.classList.add("speccer-grid-container"),r.style.height=n.height+64+"px",r.style.width=n.width+"px",r.style.left=n.left+"px",r.style.top=n.top-32+"px",r.style.padding=a,r.style.gridTemplate=s,r.style.gridTemplateRows="repeat(1, 100%)";const p=o.split(" ").length;for(let t=0;t<p;t++){const t=document.createElement("div");t.classList.add("ph-speccer"),t.classList.add("speccer"),t.classList.add("speccer-grid-item"),r.appendChild(t)}return r},dt=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-grid");await y();const n=window.getComputedStyle(t);if("grid"===e&&("grid"===n.display||-1!==n.display.indexOf("grid"))){const e=lt(t,n);document.body.appendChild(e)}},ht=(t="span")=>{const e=document.createElement(t),n=m("ph-speccer speccer mark");return u(e,n),e},ft=async t=>{if(!t)return;const e=ht();document.body.appendChild(e);const n=await D(e,t),{left:o,top:s,height:i,width:a}=n.absolute(),r={left:`${o}px`,top:`${s}px`,height:`${i}px`,width:`${a}px`};await B(e,r)},ut=(t,e=3)=>parseFloat(t+"").toFixed(e),mt=(t,e)=>{const n=document.createElement("div"),o={};null!==e&&""!==e&&e.split(" ").forEach((t=>{o[t]=!0}));const s=m("ph-speccer speccer typography",o);return n.innerHTML=t,u(n,s),n},gt=async e=>{if(!e)return;const n=e.getAttribute("data-speccer-typography"),o=await T(e);if("none"===o.display||"0"===o.opacity||"hidden"===o.visibility)return;const s=n?.includes("syntax");e.classList.add("is-specced");const i=await(async(t,e=!1)=>{const n=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:s,fontStyle:i,fontVariationSettings:a,fontWeight:r}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:s,fontStyle:i,fontVariationSettings:a,fontWeight:r}})(await T(t));if(e){const t=n.fontFamily.split(",").map((t=>-1!==t.indexOf("'")?`<span class="token string">${t}</span>`:t)).join('<span class="token punctuation">, </span>'),e=`<span class="token number">${parseInt(n.fontSize,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.fontSize,10)/16}</span><span class="token unit">rem</span>`,o=-1!==n.letterSpacing.indexOf("px")?`<span class="token number">${parseInt(n.letterSpacing,10)}</span><span class="token unit">px</span>`:n.letterSpacing,s="normal"!==n.lineHeight?`<span class="token number">${parseInt(n.lineHeight,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.lineHeight,10)/16}</span><span class="token unit">rem</span>`:"normal";return`\n<pre class="language-css" tabindex="-1"><code class="language-css"><span class="token selector"><span class="token class">.typography</span></span> <span class="token punctuation">{</span>\n  <span class="token property">font-family</span><span class="token punctuation">:</span> ${t}<span class="token punctuation">;</span>\n  <span class="token property">font-size</span><span class="token punctuation">:</span> ${e}<span class="token punctuation">;</span>\n  <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">${n.fontWeight}</span><span class="token punctuation">;</span>\n  <span class="token property">font-variation-settings</span><span class="token punctuation">:</span> ${n.fontVariationSettings}<span class="token punctuation">;</span>\n  <span class="token property">line-height</span><span class="token punctuation">:</span> ${s}<span class="token punctuation">;</span>\n  <span class="token property">letter-spacing</span><span class="token punctuation">:</span> ${o}<span class="token punctuation">;</span>\n  <span class="token property">font-style</span><span class="token punctuation">:</span> ${n.fontStyle}<span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>`}return`\ntypography: {<ul class="speccer-styles">  <li><span class="property">font-family:</span> ${n.fontFamily};</li>  <li><span class="property">font-size:</span> ${n.fontSize} / ${parseInt(n.fontSize,10)/16}rem;</li>  <li><span class="property">font-weight:</span> ${n.fontWeight};</li>  <li><span class="property">font-variation-settings:</span> ${n.fontVariationSettings};</li>  <li><span class="property">line-height:</span> ${"normal"!==n.lineHeight?`${parseInt(n.lineHeight,10)}px / ${parseInt(n.lineHeight,10)/16}rem`:"normal"};</li>  <li><span class="property">letter-spacing:</span> ${n.letterSpacing};</li>  <li><span class="property">font-style:</span> ${n.fontStyle};</li></ul>}`})(e,s),a=mt(i,n);document.body.appendChild(a);const r=await(async(e,n,o)=>{const s=n.getBoundingClientRect(),i=V(o),a=o.getBoundingClientRect(),r=await G(n),p=r.left-a.width-i+"px",c=ut(F(r.top,a,s))+"px",l=r.left+s.width+i+"px",d=ut(F(r.top,a,s))+"px",h=ut(j(r.left,a,s))+"px",f=r.top-a.height-i+"px",u=ut(j(r.left,a,s))+"px",m=r.top+s.height+i+"px";let g={left:p,top:c};return e?.includes(t.Right)?g={left:l,top:d}:e?.includes(t.Top)?g={left:h,top:f}:e?.includes(t.Bottom)&&(g={left:u,top:m}),g})(n,e,a);B(a,r)},yt={create:lt,element:dt},wt={create:U,element:Z},xt={create:g,element:Y},bt={create:J,element:K},$t={create:ht,element:ft},Et={create:mt,element:gt},kt={dom:et,lazy:nt,manual:ot,activate:st},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]"),n=document.querySelectorAll("[data-speccer-typography]"),o=document.querySelectorAll("[data-anatomy-section]"),s=document.querySelectorAll("[data-speccer-mark]"),i=document.querySelectorAll('[data-speccer-grid="grid"]');for(const t of s)ft(t);for(const t of i)dt(t);for(const e of t)Z(e);for(const t of e)K(t);for(const t of n)gt(t);for(const t of o)Y(t);(()=>{const t=document.querySelectorAll("[data-speccer-a11y-tabstops]"),e=document.querySelectorAll("[data-speccer-a11y-landmark]"),n=document.querySelectorAll("[data-speccer-a11y-shortcut]");if(n.length)for(const t of n){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)pt(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,n]of e.entries())pt(n,t+1,"landmark"),pt(n,null,"region")}})()};st(At);export{At as default,xt as dissect,yt as grid,$t as mark,bt as measure,kt as modes,wt as spacing,Et as typography};
+var t,e,n;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(t||(t={})),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"}(e||(e={})),function(t){t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(n||(n={}));const o=t=>t.split(" "),s=t=>o(t).includes(e.Right),i=t=>o(t).includes(e.Bottom),a=t=>o(t).includes(e.Full),r=t=>o(t).includes(e.Enclose),p=t=>t.includes(e.Curly)&&t.includes(e.Full),c=t=>"string"==typeof t,l=t=>!c(t),d=t=>"number"==typeof t,h=t=>!d(t),f=t=>void 0===t,u=(t,e,n="noop")=>{t&&(!e||e&&!e.length||e.trim().split(" ").filter((t=>t!==n)).forEach((e=>t.classList.add(e))))},m=(t,e)=>t?!e&&l(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():"",g=(t="",e,n="",o="span")=>{const s=document.createElement(o),i=document.createTextNode(t),c={};null!==e&&""!==e&&(c[e]=!0),!a(e)&&!r(e)||a(e)&&p(e)?s.appendChild(i):(a(e)||r(e))&&s.setAttribute("data-dissection-counter",t);const l=m("ph-speccer speccer dissection",c);return u(s,l),s.setAttribute("id",n),s},y=()=>new Promise(requestAnimationFrame),w=t=>t.top,x=t=>t.left+t.width,b=t=>t.top+t.height,$=t=>t.left,E=t=>t.left+t.width/2,k=t=>t.top+t.height/2,A={center:t=>({x:E(t),y:k(t)}),top:t=>({x:E(t),y:w(t)}),right:t=>({x:x(t),y:k(t)}),bottom:t=>({x:E(t),y:b(t)}),left:t=>({x:$(t),y:k(t)}),"right-top":t=>({x:x(t),y:w(t)}),"right-bottom":t=>({x:x(t),y:b(t)}),"left-top":t=>({x:$(t),y:w(t)}),"left-bottom":t=>({x:$(t),y:b(t)}),"top-left":t=>({x:$(t),y:w(t)}),"top-right":t=>({x:x(t),y:w(t)}),"bottom-left":t=>({x:$(t),y:b(t)}),"bottom-right":t=>({x:x(t),y:b(t)}),"top-center":t=>({x:E(t),y:w(t)}),"right-center":t=>({x:x(t),y:k(t)}),"bottom-center":t=>({x:E(t),y:b(t)}),"left-center":t=>({x:$(t),y:k(t)})},S=async(t,e="center")=>{if(!e)throw Error("No position given");if(l(e))throw Error("The position given is not the required type: pos: "+typeof e);const n=["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(!n.includes(e))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${n.join(", ")}`);await y();const o=t.getBoundingClientRect();return A[e](o)},C=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:s,y:i}=await S(t,n),{x:a,y:r}=await S(e,o);return{x1:s,y1:i,x2:a,y2:r}},L=(t,e)=>{const{x1:n,x2:o,y1:s,y2:i}=t,{direct:a=!1,firstSet:r=!1,direction:p}=e;let c={x:n+(o-n)/2,y:s},l={x:n+(o-n)/2,y:i};return a&&(r?"west"===p?(c={x:n-32,y:s-8},l={x:o+32,y:i}):"south"===p?(c={x:n-8,y:s+32},l={x:o,y:i-32}):"east"===p?(c={x:n+32,y:s-8},l={x:o-32,y:i}):(c={x:n-8,y:s-32},l={x:o,y:i+32}):"west"===p?(c={x:n-32,y:s+8},l={x:o+32,y:i}):"south"===p?(c={x:n+8,y:s+32},l={x:o,y:i-32}):"east"===p?(c={x:n+32,y:s+8},l={x:o-32,y:i}):(c={x:n+8,y:s-32},l={x:o,y:i+32})),{firstPoint:{x:n,y:s},firstControl:c,lastPoint:{x:o,y:i},lastControl:l}},v=async(t,e,n)=>{const{pos1:o,pos2:s,firstSet:i=!1,direction:a}=n,{x1:r,y1:p,x2:c,y2:l}=await C(t,e,o,s);let d=0,h=0;"north"===a?h=8:"west"===a?d=8:"east"===a?d=-8:"south"===a&&(h=-8);const{firstPoint:f,firstControl:u,lastControl:m,lastPoint:g}=L({x1:r+0,x2:c+d,y1:p+0+document.documentElement.scrollTop,y2:l+h+document.documentElement.scrollTop},{direct:!0,firstSet:i,direction:a});return`M ${f.x} ${f.y}C ${u.x} ${u.y}, ${m.x} ${m.y}, ${g.x} ${g.y}`},P=async({start:t,stop:e,crude:n=!1})=>{const{x1:o,y1:s,x2:i,y2:a}=await C(t,e),r=((t,e,n,o,s=!0)=>{if(f(t)||f(e)||f(n)||f(o))throw new SyntaxError("Missing input for `angle`");if(h(t)||h(e)||h(n)||h(o))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof n} ${typeof o}`);const i=o-e,a=n-t;let r=Math.atan2(i,a);return r*=180/Math.PI,s&&r<0&&(r+=360),r})(o,s,i,a);return n?(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"})(r):(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"})(r)},R=()=>"_"+Math.random().toString(36).substring(2,11),B=async(t,e)=>{var n;if(!(!t||!e||c(e)||d(e)||(n=e,"boolean"==typeof n)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object))if(await y(),Array.isArray(e))for(const n of e)t.style[n.key]=n.value;else for(const n of Object.keys(e))t.style[n]=e[n]},T=async t=>(await y(),getComputedStyle(t,null));class I{#t;#e;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#n(t,e)}#n(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)}#o(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${R()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||R();return this.startElement.setAttribute("id",o),n.setAttribute("data-start-el",o),n.setAttribute("id",e),n.classList.remove("original"),n.classList.add("speccer"),n}async draw(t){if(!t)throw new Error("No path given to draw!");const e=this.#o(t),n=this.#o(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(n,t.nextSibling);const o=await P({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:s,path1pos2:i,path2pos1:a,path2pos2:r}=(t=>{let e,n,o,s;switch(t){case"east":e="right-top",n="left-center",o="right-bottom",s="left-center";break;case"south":e="bottom-left",n="top-center",o="bottom-right",s="top-center";break;case"west":e="left-top",n="right-center",o="left-bottom",s="right-center";break;default:e="top-left",n="bottom-center",o="top-right",s="bottom-center"}return{path1pos1:e,path1pos2:n,path2pos1:o,path2pos2:s}})(o),p=await v(this.startElement,this.stopElement,{pos1:s,pos2:i,firstSet:!0,direction:o}),c=await v(this.startElement,this.stopElement,{pos1:a,pos2:r,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",s),this.firstPathElement.setAttribute("data-pos2",i),this.firstPathElement.setAttribute("d",p),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",a),this.secondPathElement.setAttribute("data-pos2",r),this.secondPathElement.setAttribute("d",c)}}window.DrawSVGCurlyBracket=I;class N{#t;#e;startElement;stopElement;line;constructor(t,e){this.#n(t,e)}#n(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-${R()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||R();if(this.startElement.setAttribute("id",o),n.setAttribute("id",e),n.setAttribute("data-start-el",o),n.classList.remove("original"),n.classList.add("speccer"),!t.parentNode)throw new Error("No parentNode found for path");this.line=t.parentNode.insertBefore(n,t.nextSibling);const s=await P({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:i,pos2:a}=(t=>{let e,n;switch(t){case"east":e="right",n="left";break;case"south":e="bottom",n="top";break;case"west":e="left",n="right";break;default:e="top",n="bottom"}return{pos1:e,pos2:n}})(s),r=await(async(t,e,n)=>{const{pos1:o,pos2:s}=n,{x1:i,y1:a,x2:r,y2:p}=await C(t,e,o,s),{firstPoint:c,firstControl:l,lastControl:d,lastPoint:h}=L({x1:i,x2:r,y1:a,y2:p},{direction:""});return`M ${c.x} ${c.y}C ${l.x} ${l.y}, ${d.x} ${d.y}, ${h.x} ${h.y}`})(this.startElement,this.stopElement,{pos1:i,pos2:a});this.line.setAttribute("data-direction",s),this.line.setAttribute("data-pos1",i),this.line.setAttribute("data-pos2",a),this.line.setAttribute("d",r)}}window.DrawSVGLine=N;const q=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],O=t=>parseInt(t,10),H=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"):"",M=t=>O(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,z=async(t,e,n)=>{await y();return getComputedStyle(t)[e]===n},V=async(t,e,n)=>{if(!t.parentElement)return null;return await z(t.parentElement,e,n)?t.parentElement:await V(t.parentElement,e,n)},W=(t,e,n)=>t-e.width/2+n.width/2,j=(t,e,n)=>t-e.height/2+n.height/2,F=async t=>{await y();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,s=await(async t=>await V(t,"position","sticky"))(t),i=await(async t=>await z(t,"position","sticky"))(t);if(i){const o=t.style.position;await y(),t.style.position="relative",await y(),e=t.getBoundingClientRect(),n=e.top,t.style.position=o}else if(s){const o=s.style.position;await y(),s.style.position="relative",await y(),e=t.getBoundingClientRect(),n=e.top,s.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},D=async(t,e)=>{await y();const n=t.getBoundingClientRect(),o=await F(e),s=await(async(t,e)=>{await y();const n=t.getBoundingClientRect(),o=e.getBoundingClientRect(),s=o.top+window.scrollY,i=o.left+window.scrollX;return{height:o.height,width:o.width,top:j(s,n,o),left:W(i,n,o)}})(t,e),i=o.height,a=o.width,r=n.height,p=n.width;return{absolute:()=>({top:o.top,left:o.left,height:i,width:a}),toTop:({center:t=!1,sourceHeight:e=r,modifier:n=0}={})=>({top:o.top+e+n,left:t?s.left:o.left,height:i,width:a}),fromTop:({center:t=!1,sourceHeight:e=r,modifier:n=0}={})=>({top:o.top-e-n,left:t?s.left:o.left,height:i,width:a}),toBottom:({center:t=!1,sourceHeight:e=r,targetHeight:n=i,modifier:p=0}={})=>({top:o.top+n-(e+p),left:t?s.left:o.left,height:i,width:a}),fromBottom:({center:t=!1,targetHeight:e=i,modifier:n=0}={})=>({top:o.top+e+n,left:t?s.left:o.left,height:i,width:a}),toLeft:({center:t=!1,sourceWidth:e=p,modifier:n=0}={})=>({top:t?s.top:o.top,left:o.left+e+n,height:i,width:a}),fromLeft:({center:t=!1,sourceWidth:e=p,modifier:n=0}={})=>({top:t?s.top:o.top,left:o.left-e-n,height:i,width:a}),toRight:({center:t=!1,sourceWidth:e=p,targetWidth:n=a,modifier:r=0}={})=>({top:t?s.top:o.top,left:o.left+n-(e+r),height:i,width:a}),fromRight:({center:t=!1,targetWidth:e=a,modifier:n=0}={})=>({top:t?s.top:o.top,left:o.left+e+n,height:i,width:a})}},G=async(t,n,p,c)=>{await y();const{isCurly:l=!1}=c||{},d=M(p),h=O(getComputedStyle(p).getPropertyValue("--ph-speccer-measure-size"))||8;const f=await D(p,n);if(r(t)){const{left:t,top:e,height:n,width:o}=f.absolute();return{left:`${t}px`,top:`${e}px`,height:`${n}px`,width:`${o}px`}}if(o(t).includes(e.Left)){if(a(t)&&!l){const{left:t,top:e,height:n}=f.fromLeft({sourceWidth:h});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:e,top:n}=f.fromLeft({center:!0,modifier:l?d/1.5:d});return{left:`${e}px`,top:`${n}px`}}if(s(t)){if(a(t)&&!l){const{left:t,top:e,height:n}=f.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:e,top:n}=f.fromRight({center:!0,modifier:l?d/1.5:d});return{left:`${e}px`,top:`${n}px`}}if(i(t)){if(a(t)&&!l){const{left:t,top:e,width:n}=f.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:e,top:n}=f.fromBottom({center:!0,modifier:l?d/1.5:d});return{left:`${e}px`,top:`${n}px`}}if(a(t)&&!l){const{left:t,top:e,width:n}=f.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:u,top:m}=f.fromTop({center:!0,modifier:l?d/1.5:d});return{left:`${u}px`,top:`${m}px`}},_=async(t,n,o="")=>{if(!t)return;const s=t.getAttribute("data-anatomy")||o;if(!s||""===s||!s.includes(e.Outline))return;const i=`speccer-${a=o,a.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").trim().toLowerCase().replace(/[^a-z0-9 -]/g,"").replace(/\s+/g," ").replace(/(?:^\w|[A-Z]|\b\w)/g,((t,e)=>0===e?t.toLowerCase():t.toUpperCase())).replace(/\s+/g,"")}-${t.getAttribute("id")||R()}`;var a;const r=g(n,s,i);t.setAttribute("data-speccer-element-id",i),document.body.appendChild(r);const c=await G(s,t,r,{isCurly:p(s)});return await B(r,c),s.includes(e.SVG)&&!p(s)?new N(t,r):p(s)&&new I(t,r),i};let X=0;const Y=async t=>{if(!t)return;const e=t.querySelectorAll("[data-anatomy]");e&&0!==e.length&&e.forEach((async(t,e)=>{const n=(t=>{const e=window.SPECCER_LITERALS||q;let n=e[t];return 0===t&&(X=0),n||(n=`${e[X]}${e[X].toLowerCase()}`,X++),n})(e);await _(t,n)}))},K=(t="",e="",n="span")=>{const o=document.createElement(n);return o.setAttribute("title",`${t}px`),o.setAttribute("data-measure",`${parseInt(`${t}`,10)}px`),u(o,`ph-speccer speccer measure ${e}`),o},U=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const a=await T(t);if("none"===a.display||"0"===a.opacity||"hidden"===a.visibility)return;await y();const r=t.getBoundingClientRect();if(o(e).includes(n.Width))if(i(e)){const n=K(r.width,e);document.body.appendChild(n);const o=await D(n,t),{left:s,top:i,width:a}=o.fromBottom({center:!1});await B(n,{left:`${s}px`,top:`${i}px`,width:`${a}px`})}else{const n=K(r.width,e);document.body.appendChild(n);const o=await D(n,t),{left:s,top:i,width:a}=o.fromTop({center:!1,modifier:-8});await B(n,{left:`${s}px`,top:`${i}px`,width:`${a}px`})}else if((t=>o(t).includes(n.Height))(e))if(s(e)){const n=K(r.height,e);document.body.appendChild(n);const o=await D(n,t),{left:s,top:i,height:a}=o.fromRight({center:!1});await B(n,{left:`${s}px`,top:`${i}px`,height:`${a}px`})}else{const n=K(r.height,e);document.body.appendChild(n);const o=await D(n,t),{left:s,top:i,height:a}=o.fromLeft({center:!1,modifier:-8});await B(n,{left:`${s}px`,top:`${i}px`,height:`${a}px`})}},Z=async(t,e,n,o)=>{await y();const s=o.getBoundingClientRect(),i=await F(o);"marginTop"===t&&B(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top-e+"px"}),"marginRight"===t&&B(n,{height:s.height+"px",width:`${e}px`,left:i.left+parseInt(s.width+"",10)+"px",top:i.top+"px"}),"marginBottom"===t&&B(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top+parseInt(s.height+"",10)+"px"}),"marginLeft"===t&&B(n,{height:s.height+"px",width:`${e}px`,left:i.left-e+"px",top:i.top+"px"}),"paddingTop"===t&&B(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top+"px"}),"paddingBottom"===t&&B(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top+(parseInt(s.height+"",10)-e)+"px"}),"paddingRight"===t&&B(n,{height:s.height+"px",width:`${e}px`,left:i.left+(parseInt(s.width+"",10)-e)+"px",top:i.top+"px"}),"paddingLeft"===t&&B(n,{height:s.height+"px",width:`${e}px`,left:i.left+"px",top:i.top+"px"})},J=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(t+"");return n.appendChild(o),n.setAttribute("title",`${t}px`),u(n,"ph-speccer speccer spacing"),n},Q=async t=>{if(!t)return;const e=await T(t);if("none"===e.display||"0"===e.opacity||"hidden"===e.visibility)return;const n=(t=>{const{marginTop:e,marginBottom:n,marginLeft:o,marginRight:s,paddingTop:i,paddingBottom:a,paddingLeft:r,paddingRight:p}=t;return{marginTop:e,marginBottom:n,marginLeft:o,marginRight:s,paddingTop:i,paddingBottom:a,paddingLeft:r,paddingRight:p}})(e),o=Object.keys(n).filter((t=>"0px"!==n[t]));if(o.length)for(const e of o){const o=O(n[e]),s=J(o),i=H(e);u(s,i),document.body.appendChild(s),t.classList.add("is-specced"),await Z(e,o,s,t)}},tt=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(s,...i){const a=n&&!o;o&&clearTimeout(o),o=setTimeout((function(){o=null,n||t.apply(s,i)}),e),a&&t.apply(s,i)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},et=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},nt=()=>{const t=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Q(n.target),e.unobserve(n.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 n of t)n.intersectionRatio>0&&(U(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll("[data-speccer-measure]"))e.observe(t);const n=new IntersectionObserver((async(t,e)=>{for(const n of t)n.intersectionRatio>0&&(await Y(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll("[data-anatomy-section]"))n.observe(t)},ot=t=>{window.speccer=t},st=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?ot(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?et(t):e.hasAttribute("data-lazy")?nt():et(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||tt(t))}},it=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],at=["escape","esc","enter","return","⏎","␛"],rt=async(t,e,n)=>{await y();const o=M(n),s=await D(n,e);if("tabstops"===t){let{left:t,top:e}=s.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}=s.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:n,width:o}=s.fromTop();return{height:`${n}px`,width:`${o}px`,left:`${t}px`,top:`${e}px`}}if("shortcut"===t){const{left:t,top:e}=s.fromBottom();return{left:`${t}px`,top:`${e}px`}}const{left:i,top:a}=s.fromTop({center:!0,modifier:o});return{left:i-32+"px",top:a-32+"px"}},pt=async(t,e,n)=>{if(!t||!t.checkVisibility())return;const o=((t="tabstops",e,n="span")=>{const o=document.createElement(n),s=m("ph-speccer speccer a11y",{tabstops:"tabstops"===t,landmark:"landmark"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(e+"");o.appendChild(t)}return u(o,s),o})(n,e);if("landmark"===n){o.setAttribute("data-speccer-nodename",t.nodeName);const e=t.role||`semantic role: ${t.nodeName.toLowerCase()}`,n=t.getAttribute("aria-label")||"unnamed";o.setAttribute("title",`${n}: ${e}`)}document.body.appendChild(o);const s=await rt(n,t,o);await B(o,s)},ct=async(t,e)=>{const n=e.split(/\s\+\s/).map((t=>t.trim())),o=document.createElement("div");o.classList.add("ph-speccer"),o.classList.add("speccer"),o.classList.add("a11y"),o.classList.add("shortcut-holder");for(const t of n){const e=document.createElement("kbd"),n=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"),at.includes(t.toLowerCase())&&e.classList.add("physical"),e.appendChild(n),o.appendChild(e)}document.body.appendChild(o);const s=await rt("shortcut",t,o);await B(o,s)},lt=(t,e)=>{const n=t.getBoundingClientRect(),o=e.gridTemplateColumns,s=e.gridTemplate,i=parseInt(e.columnGap),a=e.padding,r=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&&r.classList.add("speccer-small-grid"),r.classList.add("ph-speccer"),r.classList.add("speccer"),r.classList.add("speccer-grid-container"),r.style.height=n.height+64+"px",r.style.width=n.width+"px",r.style.left=n.left+"px",r.style.top=n.top-32+"px",r.style.padding=a,r.style.gridTemplate=s,r.style.gridTemplateRows="repeat(1, 100%)";const p=o.split(" ").length;for(let t=0;t<p;t++){const t=document.createElement("div");t.classList.add("ph-speccer"),t.classList.add("speccer"),t.classList.add("speccer-grid-item"),r.appendChild(t)}return r},dt=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-grid");await y();const n=window.getComputedStyle(t);if("grid"===e&&("grid"===n.display||-1!==n.display.indexOf("grid"))){const e=lt(t,n);document.body.appendChild(e)}},ht=(t="span")=>{const e=document.createElement(t),n=m("ph-speccer speccer mark");return u(e,n),e},ft=async t=>{if(!t)return;const e=ht();document.body.appendChild(e);const n=await D(e,t),{left:o,top:s,height:i,width:a}=n.absolute(),r={left:`${o}px`,top:`${s}px`,height:`${i}px`,width:`${a}px`};await B(e,r)},ut=(t,e=3)=>parseFloat(t+"").toFixed(e),mt=(t,e)=>{const n=document.createElement("div"),o={};null!==e&&""!==e&&e.split(" ").forEach((t=>{o[t]=!0}));const s=m("ph-speccer speccer typography",o);return n.innerHTML=t,u(n,s),n},gt=async e=>{if(!e)return;const n=e.getAttribute("data-speccer-typography"),o=await T(e);if("none"===o.display||"0"===o.opacity||"hidden"===o.visibility)return;const s=n?.includes("syntax");e.classList.add("is-specced");const i=await(async(t,e=!1)=>{const n=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:s,fontStyle:i,fontVariationSettings:a,fontWeight:r}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:s,fontStyle:i,fontVariationSettings:a,fontWeight:r}})(await T(t));if(e){const t=n.fontFamily.split(",").map((t=>-1!==t.indexOf("'")?`<span class="token string">${t}</span>`:t)).join('<span class="token punctuation">, </span>'),e=`<span class="token number">${parseInt(n.fontSize,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.fontSize,10)/16}</span><span class="token unit">rem</span>`,o=-1!==n.letterSpacing.indexOf("px")?`<span class="token number">${parseInt(n.letterSpacing,10)}</span><span class="token unit">px</span>`:n.letterSpacing,s="normal"!==n.lineHeight?`<span class="token number">${parseInt(n.lineHeight,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.lineHeight,10)/16}</span><span class="token unit">rem</span>`:"normal";return`\n<pre class="language-css" tabindex="-1"><code class="language-css"><span class="token selector"><span class="token class">.typography</span></span> <span class="token punctuation">{</span>\n  <span class="token property">font-family</span><span class="token punctuation">:</span> ${t}<span class="token punctuation">;</span>\n  <span class="token property">font-size</span><span class="token punctuation">:</span> ${e}<span class="token punctuation">;</span>\n  <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">${n.fontWeight}</span><span class="token punctuation">;</span>\n  <span class="token property">font-variation-settings</span><span class="token punctuation">:</span> ${n.fontVariationSettings}<span class="token punctuation">;</span>\n  <span class="token property">line-height</span><span class="token punctuation">:</span> ${s}<span class="token punctuation">;</span>\n  <span class="token property">letter-spacing</span><span class="token punctuation">:</span> ${o}<span class="token punctuation">;</span>\n  <span class="token property">font-style</span><span class="token punctuation">:</span> ${n.fontStyle}<span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>`}return`\ntypography: {<ul class="speccer-styles">  <li><span class="property">font-family:</span> ${n.fontFamily};</li>  <li><span class="property">font-size:</span> ${n.fontSize} / ${parseInt(n.fontSize,10)/16}rem;</li>  <li><span class="property">font-weight:</span> ${n.fontWeight};</li>  <li><span class="property">font-variation-settings:</span> ${n.fontVariationSettings};</li>  <li><span class="property">line-height:</span> ${"normal"!==n.lineHeight?`${parseInt(n.lineHeight,10)}px / ${parseInt(n.lineHeight,10)/16}rem`:"normal"};</li>  <li><span class="property">letter-spacing:</span> ${n.letterSpacing};</li>  <li><span class="property">font-style:</span> ${n.fontStyle};</li></ul>}`})(e,s),a=mt(i,n);document.body.appendChild(a);const r=await(async(e,n,o)=>{const s=n.getBoundingClientRect(),i=M(o),a=o.getBoundingClientRect(),r=await F(n),p=r.left-a.width-i+"px",c=ut(j(r.top,a,s))+"px",l=r.left+s.width+i+"px",d=ut(j(r.top,a,s))+"px",h=ut(W(r.left,a,s))+"px",f=r.top-a.height-i+"px",u=ut(W(r.left,a,s))+"px",m=r.top+s.height+i+"px";let g={left:p,top:c};return e?.includes(t.Right)?g={left:l,top:d}:e?.includes(t.Top)?g={left:h,top:f}:e?.includes(t.Bottom)&&(g={left:u,top:m}),g})(n,e,a);B(a,r)},yt={create:lt,element:dt},wt={create:J,element:Q},xt={create:g,element:Y,dissect:_},bt={create:K,element:U},$t={create:ht,element:ft},Et={create:mt,element:gt},kt={dom:et,lazy:nt,manual:ot,activate:st},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]"),n=document.querySelectorAll("[data-speccer-typography]"),o=document.querySelectorAll("[data-anatomy-section]"),s=document.querySelectorAll("[data-speccer-mark]"),i=document.querySelectorAll('[data-speccer-grid="grid"]');for(const t of s)ft(t);for(const t of i)dt(t);for(const e of t)Q(e);for(const t of e)U(t);for(const t of n)gt(t);for(const t of o)Y(t);(()=>{const t=document.querySelectorAll("[data-speccer-a11y-tabstops]"),e=document.querySelectorAll("[data-speccer-a11y-landmark]"),n=document.querySelectorAll("[data-speccer-a11y-shortcut]");if(n.length)for(const t of n){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)pt(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,n]of e.entries())pt(n,t+1,"landmark"),pt(n,null,"region")}})()};st(At);export{At as default,xt as dissect,yt as grid,$t as mark,bt as measure,kt as modes,wt as spacing,Et as typography};
 //# sourceMappingURL=speccer.esm.js.map