@phun-ky/speccer 9.4.0 → 9.4.1

package/README.md

@@ -10,6 +10,7 @@
 
 - [@phun-ky/speccer](#phun-kyspeccer)
   - [About](#about)
+  - [Installation](#installation)
   - [API](#api)
   - [Usage](#usage)
     - [Typescript](#typescript)
@@ -40,17 +41,19 @@
 
 ## About
 
-Speccer was originally created to make it easier to document components in a design system, but you can use it to whatever you like, if you are in the need to highlight any element!
+**SPECCER** was originally created to simplify documenting components in a design system, but it can be used to highlight any HTML element on a webpage. If you need to draw attention to elements, **SPECCER** is your tool!
+
+## Installation
 
 ```shell-session
-npm i @phun-ky/speccer
+npm i --save @phun-ky/speccer
 ```
 
-See demo here: <https://codepen.io/phun-ky/pen/OJejexN>
+[See a live demo](https://codepen.io/phun-ky/pen/OJejexN).
 
 ## API
 
-Go [here](https://github.com/phun-ky/speccer/blob/main/api/README.md) to read the full API documentation.
+Full API documentation is available [here](https://github.com/phun-ky/speccer/blob/main/api/README.md).
 
 ## Usage
 
@@ -203,7 +206,7 @@ document.querySelectorAll('[data-anatomy-section]').forEach((el) => {
 
 ![Image of speccer](./public/spacing.png)
 
-In your component examples, use the following attribute:
+Use the following attribute to display element padding and margin:
 
 ```html
 <div data-speccer class="..."></div>
@@ -215,7 +218,7 @@ This will display the element _and all of it's children_ padding and margin.
 
 ![Image of speccer](./public/measure.png)
 
-In your component examples, use the following attribute:
+Display dimensions with:
 
 ```html
 <div
@@ -230,7 +233,7 @@ Where `height` and `width` comes with placement flags. Default for `height` is `
 
 ![Image of subtle option for measure](./public/subtle-measure.png)
 
-You can also give a more subtle touch to the measure elements.
+Use a subtle style:
 
 ```html
 <div data-speccer-measure="height left subtle" class="..."></div>
@@ -291,7 +294,7 @@ This will give a dashed border, and a more subtle pin style.
 
 ### Curly brackets
 
-You can use curly brackets with the `curly` tag in `data-anatomy` along side `outline full` to provide a more sleek look to the style.
+You can use curly brackets with the `curly` tag in `data-anatomy` along side `outline full` to provide a more sleek style.
 
 > [!NOTE]  
 > Only works with `outline full`
@@ -319,7 +322,7 @@ The curly brackets are made with SVG paths, and it is required to have the follo
 
 ![Image of typography speccer](./public/typography.png)
 
-In your component examples, use the following attribute.
+Display typography details:
 
 ```html
 <p data-speccer-typography="[left|right|top|bottom]" class="...">Some text</p>
@@ -468,7 +471,7 @@ Allthough the styling works nicely with dark mode, you can use the provided CSS
 
 ## Contributing
 
-If you want to contribute, please read the [CONTRIBUTING.md](https://github.com/phun-ky/speccer/blob/main/CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](https://github.com/phun-ky/speccer/blob/main/CODE_OF_CONDUCT.md)
+Want to contribute? Please read the [CONTRIBUTING.md](https://github.com/phun-ky/speccer/blob/main/CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](https://github.com/phun-ky/speccer/blob/main/CODE_OF_CONDUCT.md)
 
 ## Sponsor me
 
@@ -476,4 +479,4 @@ I'm an Open Source evangelist, creating stuff that does not exist yet to help ge
 
 The sponsorship is an unique opportunity to alleviate more hours for me to maintain my projects, create new ones and contribute to the large community we're all part of :)
 
-[Support me with GitHub Sponsors](https://github.com/sponsors/phun-ky).
+[Support me on GitHub Sponsors](https://github.com/sponsors/phun-ky).

package/dist/speccer.css

@@ -403,6 +403,9 @@ svg.ph-speccer .ph-speccer.path {
   background-color: transparent;
   border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
 }
+.ph-speccer.speccer.dissection.outline.enclose.subtle {
+  background-color: transparent;
+}
 .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly) {
   border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
   background-color: transparent;

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.0
+* @version 9.4.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=()=>new Promise(requestAnimationFrame),m=t=>t.top,g=t=>t.left+t.width,y=t=>t.top+t.height,w=t=>t.left,x=t=>t.left+t.width/2,b=t=>t.top+t.height/2,$={center:t=>({x:x(t),y:b(t)}),top:t=>({x:x(t),y:m(t)}),right:t=>({x:g(t),y:b(t)}),bottom:t=>({x:x(t),y:y(t)}),left:t=>({x:w(t),y:b(t)}),"right-top":t=>({x:g(t),y:m(t)}),"right-bottom":t=>({x:g(t),y:y(t)}),"left-top":t=>({x:w(t),y:m(t)}),"left-bottom":t=>({x:w(t),y:y(t)}),"top-left":t=>({x:w(t),y:m(t)}),"top-right":t=>({x:g(t),y:m(t)}),"bottom-left":t=>({x:w(t),y:y(t)}),"bottom-right":t=>({x:g(t),y:y(t)}),"top-center":t=>({x:x(t),y:m(t)}),"right-center":t=>({x:g(t),y:b(t)}),"bottom-center":t=>({x:x(t),y:y(t)}),"left-center":t=>({x:w(t),y:b(t)})},E=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 u();const o=t.getBoundingClientRect();return $[e](o)},k=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:s,y:i}=await E(t,n),{x:a,y:r}=await E(e,o);return{x1:s,y1:i,x2:a,y2:r}},A=(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}},S=async(t,e,n)=>{const{pos1:o,pos2:s,firstSet:i=!1,direction:a}=n,{x1:r,y1:p,x2:c,y2:l}=await k(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}=A({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}`},C=async({start:t,stop:e,crude:n=!1})=>{const{x1:o,y1:s,x2:i,y2:a}=await k(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)},L=()=>"_"+Math.random().toString(36).substring(2,11),v=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 u(),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]},P=async t=>(await u(),getComputedStyle(t,null));class R{#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");v(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-${L()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||L();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 C({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 S(this.startElement,this.stopElement,{pos1:s,pos2:i,firstSet:!0,direction:o}),c=await S(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=R;class B{#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");v(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-${L()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||L();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 C({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 k(t,e,o,s),{firstPoint:c,firstControl:l,lastControl:d,lastPoint:h}=A({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=B;const T=(t,e,n="noop")=>{t&&(!e||e&&!e.length||e.trim().split(" ").filter((t=>t!==n)).forEach((e=>t.classList.add(e))))},I=(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():"",N=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],q=t=>parseInt(t,10),O=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=>q(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,M=async(t,e,n)=>{await u();return getComputedStyle(t)[e]===n},V=async(t,e,n)=>{if(!t.parentElement)return null;return await M(t.parentElement,e,n)?t.parentElement:await V(t.parentElement,e,n)},z=(t,e,n)=>t-e.width/2+n.width/2,W=(t,e,n)=>t-e.height/2+n.height/2,j=async t=>{await u();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 M(t,"position","sticky"))(t);if(i){const o=t.style.position;await u(),t.style.position="relative",await u(),e=t.getBoundingClientRect(),n=e.top,t.style.position=o}else if(s){const o=s.style.position;await u(),s.style.position="relative",await u(),e=t.getBoundingClientRect(),n=e.top,s.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},F=async(t,e)=>{await u();const n=t.getBoundingClientRect(),o=await j(e),s=await(async(t,e)=>{await u();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:W(s,n,o),left:z(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 u();const{isCurly:l=!1}=c||{},d=H(p),h=q(getComputedStyle(p).getPropertyValue("--ph-speccer-measure-size"))||8;const f=await F(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:m,top:g}=f.fromTop({center:!0,modifier:l?d/1.5:d});return{left:`${m}px`,top:`${g}px`}},D=(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=I("ph-speccer speccer dissection",i);return T(o,c),o},_=async t=>{if(!t)return;const n=t.querySelectorAll("[data-anatomy]");if(n){let t=0;n.forEach((async(n,o)=>{if(!n)return;const s=n.getAttribute("data-anatomy")||"";if(!s||""===s||!s.includes(e.Outline))return;const i=window.SPECCER_LITERALS||N;let a=i[o];a||(a=`${i[t]}${i[t].toLowerCase()}`,t++);const r=D(a,s);document.body.appendChild(r);const c=await G(s,n,r,{isCurly:p(s)});await v(r,c),s.includes(e.SVG)&&!p(s)?new B(n,r):p(s)&&new R(n,r)}))}},X=(t="",e="",n="span")=>{const o=document.createElement(n);return o.setAttribute("title",`${t}px`),o.setAttribute("data-measure",`${parseInt(`${t}`,10)}px`),T(o,`ph-speccer speccer measure ${e}`),o},Y=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const a=await P(t);if("none"===a.display||"0"===a.opacity||"hidden"===a.visibility)return;await u();const r=t.getBoundingClientRect();if(o(e).includes(n.Width))if(i(e)){const n=X(r.width,e);document.body.appendChild(n);const o=await F(n,t),{left:s,top:i,width:a}=o.fromBottom({center:!1});await v(n,{left:`${s}px`,top:`${i}px`,width:`${a}px`})}else{const n=X(r.width,e);document.body.appendChild(n);const o=await F(n,t),{left:s,top:i,width:a}=o.fromTop({center:!1,modifier:-8});await v(n,{left:`${s}px`,top:`${i}px`,width:`${a}px`})}else if((t=>o(t).includes(n.Height))(e))if(s(e)){const n=X(r.height,e);document.body.appendChild(n);const o=await F(n,t),{left:s,top:i,height:a}=o.fromRight({center:!1});await v(n,{left:`${s}px`,top:`${i}px`,height:`${a}px`})}else{const n=X(r.height,e);document.body.appendChild(n);const o=await F(n,t),{left:s,top:i,height:a}=o.fromLeft({center:!1,modifier:-8});await v(n,{left:`${s}px`,top:`${i}px`,height:`${a}px`})}},J=async(t,e,n,o)=>{await u();const s=o.getBoundingClientRect(),i=await j(o);"marginTop"===t&&v(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top-e+"px"}),"marginRight"===t&&v(n,{height:s.height+"px",width:`${e}px`,left:i.left+parseInt(s.width+"",10)+"px",top:i.top+"px"}),"marginBottom"===t&&v(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top+parseInt(s.height+"",10)+"px"}),"marginLeft"===t&&v(n,{height:s.height+"px",width:`${e}px`,left:i.left-e+"px",top:i.top+"px"}),"paddingTop"===t&&v(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top+"px"}),"paddingBottom"===t&&v(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top+(parseInt(s.height+"",10)-e)+"px"}),"paddingRight"===t&&v(n,{height:s.height+"px",width:`${e}px`,left:i.left+(parseInt(s.width+"",10)-e)+"px",top:i.top+"px"}),"paddingLeft"===t&&v(n,{height:s.height+"px",width:`${e}px`,left:i.left+"px",top:i.top+"px"})},K=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(t+"");return n.appendChild(o),n.setAttribute("title",`${t}px`),T(n,"ph-speccer speccer spacing"),n},Q=async t=>{if(!t)return;const e=await P(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=q(n[e]),s=K(o),i=O(e);T(s,i),document.body.appendChild(s),t.classList.add("is-specced"),await J(e,o,s,t)}},U=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)},Z=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},tt=()=>{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&&(Y(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 _(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll("[data-anatomy-section]"))n.observe(t)},et=t=>{window.speccer=t},nt=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?et(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?Z(t):e.hasAttribute("data-lazy")?tt():Z(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||U(t))}},ot=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],st=["escape","esc","enter","return","⏎","␛"],it=async(t,e,n)=>{await u();const o=H(n),s=await F(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"}},at=async(t,e,n)=>{if(!t||!t.checkVisibility())return;const o=((t="tabstops",e,n="span")=>{const o=document.createElement(n),s=I("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 T(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 it(n,t,o);await v(o,s)},rt=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"),ot.includes(t.toLowerCase())&&e.classList.add("modifier"),st.includes(t.toLowerCase())&&e.classList.add("physical"),e.appendChild(n),o.appendChild(e)}document.body.appendChild(o);const s=await it("shortcut",t,o);await v(o,s)},pt=(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},ct=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-grid");await u();const n=window.getComputedStyle(t);if("grid"===e&&("grid"===n.display||-1!==n.display.indexOf("grid"))){const e=pt(t,n);document.body.appendChild(e)}},lt=(t="span")=>{const e=document.createElement(t),n=I("ph-speccer speccer mark");return T(e,n),e},dt=async t=>{if(!t)return;const e=lt();document.body.appendChild(e);const n=await F(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 v(e,r)},ht=(t,e=3)=>parseFloat(t+"").toFixed(e),ft=(t,e)=>{const n=document.createElement("div"),o={};null!==e&&""!==e&&e.split(" ").forEach((t=>{o[t]=!0}));const s=I("ph-speccer speccer typography",o);return n.innerHTML=t,T(n,s),n},ut=async e=>{if(!e)return;const n=e.getAttribute("data-speccer-typography"),o=await P(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 P(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=ft(i,n);document.body.appendChild(a);const r=await(async(e,n,o)=>{const s=n.getBoundingClientRect(),i=H(o),a=o.getBoundingClientRect(),r=await j(n),p=r.left-a.width-i+"px",c=ht(W(r.top,a,s))+"px",l=r.left+s.width+i+"px",d=ht(W(r.top,a,s))+"px",h=ht(z(r.left,a,s))+"px",f=r.top-a.height-i+"px",u=ht(z(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);v(a,r)},mt={create:pt,element:ct},gt={create:K,element:Q},yt={create:D,element:_},wt={create:X,element:Y},xt={create:lt,element:dt},bt={create:ft,element:ut},$t={dom:Z,lazy:tt,manual:et,activate:nt},Et=()=>{((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)dt(t);for(const t of i)ct(t);for(const e of t)Q(e);for(const t of e)Y(t);for(const t of n)ut(t);for(const t of o)_(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&&rt(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,n]of e.entries())at(n,t+1,"landmark"),at(n,null,"region")}})()};nt(Et);export{Et as default,yt as dissect,mt as grid,xt as mark,wt as measure,$t as modes,gt as spacing,bt 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="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};
 //# sourceMappingURL=speccer.esm.js.map