@phun-ky/speccer 10.0.7 → 10.1.0

package/README.md

@@ -426,6 +426,12 @@ In your component examples, use the following attribute on your grid container.
 <div data-speccer="grid" …>…</div>
 ```
 
+If you only want to display `rows` or `columns`, use this syntax (default is both with `grid` only):
+
+```html
+<div data-speccer="grid [rows|columns]" …>…</div>
+```
+
 ### Mark elements
 
 ![Screenshot of marked elements](./public/mark.png)

package/dist/speccer.css

@@ -740,74 +740,148 @@ svg.ph-speccer .ph-speccer.circle {
   color: var(--ph-speccer-color-code-color-8);
 }
 .ph-speccer.speccer.speccer-grid-container {
-  counter-reset: column-gap;
   justify-content: initial;
   transition: var(--ph-speccer-transition-default);
+  display: grid;
+  position: absolute;
+  counter-reset: column-gap;
   column-gap: var(--ph-speccer-grid-gap-original);
+  justify-content: initial;
+  transition: var(--ph-speccer-transition-default);
+  display: grid;
+  position: absolute;
+}
+.ph-speccer.speccer.speccer-grid-row-container {
+  justify-content: initial;
+  transition: var(--ph-speccer-transition-default);
   display: grid;
   position: absolute;
+  counter-reset: row-gap;
+  row-gap: var(--ph-speccer-grid-row-gap-original);
 }
 .ph-speccer.speccer.speccer-grid-item {
   transition: var(--ph-speccer-transition-default);
+  position: relative;
+  height: 100%;
   border-left: 1px solid var(--ph-speccer-base-color);
   border-right: 1px solid var(--ph-speccer-base-color);
+}
+.ph-speccer.speccer.speccer-grid-row-item {
+  transition: var(--ph-speccer-transition-default);
   position: relative;
   height: 100%;
+  border-top: 1px solid var(--ph-speccer-base-color);
+  border-bottom: 1px solid var(--ph-speccer-base-color);
+  width: 100%;
 }
 .ph-speccer.speccer.speccer-grid-item::before {
   transition: var(--ph-speccer-transition-default);
   font-family: var(--ph-speccer-font-family) !important;
-  counter-increment: column-gap;
   font-size: 16px;
-  content: counter(column-gap);
   position: absolute;
+  background-color: var(--ph-speccer-base-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--ph-speccer-color-text-light);
+  counter-increment: column-gap;
+  content: counter(column-gap);
   top: -32px;
   left: 100%;
-  background-color: var(--ph-speccer-base-color);
   height: 32px;
   width: calc(var(--ph-speccer-grid-gap) + 2px);
+  border-top-left-radius: 50%;
+  border-top-right-radius: 50%;
+}
+.ph-speccer.speccer.speccer-grid-row-item::before {
+  transition: var(--ph-speccer-transition-default);
+  font-family: var(--ph-speccer-font-family) !important;
+  font-size: 16px;
+  position: absolute;
+  background-color: var(--ph-speccer-base-color);
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--ph-speccer-color-text-light);
+  counter-increment: row-gap;
+  content: counter(row-gap);
+  left: -32px;
+  top: 100%;
+  width: 32px;
+  height: calc(var(--ph-speccer-grid-gap) + 2px);
   border-top-left-radius: 50%;
-  border-top-right-radius: 50%;
+  border-bottom-left-radius: 50%;
 }
 .ph-speccer.speccer.speccer-grid-item:first-child::after {
   transition: var(--ph-speccer-transition-default);
   font-family: var(--ph-speccer-font-family) !important;
-  counter-increment: column-gap;
   font-size: 16px;
-  content: counter(column-gap);
   position: absolute;
+  background-color: var(--ph-speccer-base-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--ph-speccer-color-text-light);
+  counter-increment: column-gap;
+  content: counter(column-gap);
   top: -32px;
   left: 100%;
-  background-color: var(--ph-speccer-base-color);
   height: 32px;
   width: calc(var(--ph-speccer-grid-gap) + 2px);
+  border-top-left-radius: 50%;
+  border-top-right-radius: 50%;
+}
+.ph-speccer.speccer.speccer-grid-row-item:first-child::after {
+  transition: var(--ph-speccer-transition-default);
+  font-family: var(--ph-speccer-font-family) !important;
+  font-size: 16px;
+  position: absolute;
+  background-color: var(--ph-speccer-base-color);
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--ph-speccer-color-text-light);
+  counter-increment: row-gap;
+  content: counter(row-gap);
+  left: -32px;
+  top: 100%;
+  width: 32px;
+  height: calc(var(--ph-speccer-grid-gap) + 2px);
   border-top-left-radius: 50%;
-  border-top-right-radius: 50%;
+  border-bottom-left-radius: 50%;
 }
 .ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item::before,
 .ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item:first-child::after {
   left: calc(100% - ((var(--ph-speccer-grid-gap) - var(--ph-speccer-grid-gap-original)) / 2));
 }
+.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item::before,
+.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item:first-child::after {
+  top: calc(100% - ((var(--ph-speccer-grid-row-gap) - var(--ph-speccer-grid-row-gap-original)) / 2));
+}
 .ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:first-child::before {
   position: absolute;
   top: -32px;
   right: auto;
   left: calc((var(--ph-speccer-grid-gap) + 2px) / 2 * -1);
 }
+.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:first-child::before {
+  position: absolute;
+  left: -32px;
+  bottom: auto;
+  top: calc((var(--ph-speccer-grid-row-gap) + 2px) / 2 * -1);
+}
 .ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:last-child::before {
   position: absolute;
   top: -32px;
   left: auto;
   right: calc((var(--ph-speccer-grid-gap) + 2px) / 2 * -1);
 }
+.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:last-child::before {
+  position: absolute;
+  left: -32px;
+  top: auto;
+  bottom: calc((var(--ph-speccer-grid-row-gap) + 2px) / 2 * -1);
+}
 .ph-speccer.speccer.spacing {
   pointer-events: auto;
   transition: none;

package/dist/speccer.d.ts

@@ -36,7 +36,7 @@ declare global {
 //# sourceMappingURL=global.d.ts.map
 
 declare const grid: {
-    create: (targetElement: HTMLElement, styles: CSSStyleDeclaration) => Promise<HTMLDivElement>;
+    create: (targetElement: HTMLElement, styles: CSSStyleDeclaration, options: Record<string, string>) => Promise<void>;
     element: (targetElement: HTMLElement) => Promise<void>;
 };
 declare const spacing: {

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 10.0.7
+* @version 10.1.0
 * @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,o,i,s,r;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(t||(t={})),function(t){t.Pin="pin",t.Parent="parent",t.Enclose="enclose",t.Subtle="subtle",t.Bracket="bracket",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top",t.SVG="svg",t.Curly="curly"}(e||(e={})),function(t){t.Measure="measure",t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(n||(n={})),function(t){t.Typography="typography",t.Syntax="syntax",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(o||(o={})),function(t){t.Spacing="spacing"}(i||(i={})),function(t){t.Mark="mark"}(s||(s={})),function(t){t.Grid="grid"}(r||(r={}));const a=t=>t.split(" "),c=t=>{if(null===t)return!1;return a(t).includes(e.Left)},l=t=>{if(null===t)return!1;return a(t).includes(e.Right)},p=t=>{if(null===t)return!1;return a(t).includes(e.Bottom)},d=t=>{if(null===t)return!1;return a(t).includes(e.Bracket)},h=t=>{if(null===t)return!1;return a(t).includes(e.Enclose)},u=t=>{if(null===t)return!1;return a(t).includes(e.Subtle)},f=t=>{if(null===t)return!1;return a(t).includes(e.Parent)},m=t=>{if(null===t)return!1;const n=a(t);return n.includes(e.Curly)&&n.includes(e.Bracket)},g=t=>"string"==typeof t,y=t=>!g(t),w=t=>"number"==typeof t,x=t=>!w(t),b=t=>void 0===t,$=(t,e,n="noop")=>{t&&(!e||e&&!e.length||e.trim().split(" ").filter((t=>t!==n)).filter((t=>""!==t)).forEach((e=>t.classList.add(e.trim()))))},E=(t,e)=>t?!e&&y(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():"",k=t=>!t.checkVisibility({checkVisibilityCSS:!0}),A=()=>new Promise(requestAnimationFrame),S=async(t,e,n)=>{await A();return getComputedStyle(t)[e]===n},C=async(t,e,n)=>{if(!t.parentElement)return null;return await S(t.parentElement,e,n)?t.parentElement:await C(t.parentElement,e,n)},v=(t,e,n)=>t-e.width/2+n.width/2,L=(t,e,n)=>t-e.height/2+n.height/2,P=async t=>{await A();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,i=await(async t=>await C(t,"position","sticky"))(t),s=await(async t=>await S(t,"position","sticky"))(t);if(s){const o=t.style.position;await A(),t.style.position="relative",await A(),e=t.getBoundingClientRect(),n=e.top,t.style.position=o}else if(i){const o=i.style.position;await A(),i.style.position="relative",await A(),e=t.getBoundingClientRect(),n=e.top,i.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},B=async(t,e)=>{await A();const n=t.getBoundingClientRect(),o=await P(e),i=await(async(t,e)=>{await A();const n=t.getBoundingClientRect(),o=e.getBoundingClientRect(),i=o.top+window.scrollY,s=o.left+window.scrollX;return{height:o.height,width:o.width,top:L(i,n,o),left:v(s,n,o)}})(t,e),s=o.height,r=o.width,a=n.height,c=n.width;return{absolute:()=>({top:o.top,left:o.left,height:s,width:r}),toTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top-e-n,left:t?i.left:o.left,height:s,width:r}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:n=s,modifier:c=0}={})=>({top:o.top+n-(e+c),left:t?i.left:o.left,height:s,width:r}),fromBottom:({center:t=!1,targetHeight:e=s,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left-e-n,height:s,width:r}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:n=r,modifier:a=0}={})=>({top:t?i.top:o.top,left:o.left+n-(e+a),height:s,width:r}),fromRight:({center:t=!1,targetWidth:e=r,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r})}},R=async(t,e)=>{var n;if(!(!t||!e||g(e)||w(e)||(n=e,"boolean"==typeof n)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object))if(await A(),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 A(),getComputedStyle(t,null)),H=(t="",e="",n="span")=>{const o=document.createElement(n);return o.setAttribute("title",`${t}px`),o.setAttribute("data-measure",`${parseInt(String(t),10)}px`),$(o,`ph-speccer speccer measure ${e}`),o},M=async t=>{if(!t)return;const e=t.getAttribute("data-speccer");if(null===(o=e)||!o.split(" ").includes(n.Measure))return;var o;if(k(t))return;await A();const i=t.getBoundingClientRect();if((t=>null!==t&&a(t).includes(n.Width))(e))if(p(e)){const n=H(i.width,e);document.body.appendChild(n);const o=await B(n,t),{left:s,top:r,width:a}=o.fromBottom({center:!1});await R(n,{left:`${s}px`,top:`${r}px`,width:`${a}px`})}else{const n=H(i.width,e);document.body.appendChild(n);const o=await B(n,t),{left:s,top:r,width:a}=o.fromTop({center:!1});await R(n,{left:`${s}px`,top:`${r}px`,width:`${a}px`})}else if((t=>null!==t&&a(t).includes(n.Height))(e))if(l(e)){const n=H(i.height,e);document.body.appendChild(n);const o=await B(n,t),{left:s,top:r,height:a}=o.fromRight({center:!1});await R(n,{left:`${s}px`,top:`${r}px`,height:`${a}px`})}else{const n=H(i.height,e);document.body.appendChild(n);const o=await B(n,t),{left:s,top:r,height:a}=o.fromLeft({center:!1});await R(n,{left:`${s}px`,top:`${r}px`,height:`${a}px`})}},N=(t="",e,n="",o="span")=>{const i=document.createElement(o),s=document.createTextNode(t),r={};null!==e&&""!==e&&(r[e]=!0),!f(e)||d(e)||m(e)||u(e)||(r.svg=!0),!d(e)&&!h(e)||d(e)&&m(e)?i.appendChild(s):(d(e)||h(e))&&i.setAttribute("data-pin-counter",t);const a=E("ph-speccer speccer pin",r);return $(i,a),i.setAttribute("id",n),i},I=()=>"_"+Math.random().toString(36).substring(2,11),q=t=>t.top,V=t=>t.left+t.width,z=t=>t.top+t.height,O=t=>t.left,W=t=>t.left+t.width/2,j=t=>t.top+t.height/2,G={center:t=>({x:W(t),y:j(t)}),top:t=>({x:W(t),y:q(t)}),right:t=>({x:V(t),y:j(t)}),bottom:t=>({x:W(t),y:z(t)}),left:t=>({x:O(t),y:j(t)}),"right-top":t=>({x:V(t),y:q(t)}),"right-bottom":t=>({x:V(t),y:z(t)}),"left-top":t=>({x:O(t),y:q(t)}),"left-bottom":t=>({x:O(t),y:z(t)}),"top-left":t=>({x:O(t),y:q(t)}),"top-right":t=>({x:V(t),y:q(t)}),"bottom-left":t=>({x:O(t),y:z(t)}),"bottom-right":t=>({x:V(t),y:z(t)}),"top-center":t=>({x:W(t),y:q(t)}),"right-center":t=>({x:V(t),y:j(t)}),"bottom-center":t=>({x:W(t),y:z(t)}),"left-center":t=>({x:O(t),y:j(t)})},D=async(t,e="center")=>{if(!e)throw Error("No position given");if(y(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 A();const o=t.getBoundingClientRect();return G[e](o)};class F{#t;el;circle;radius;areas;constructor(t,e,n){this.#e(t,e,n)}#e(t,e,n){if(!t||!e||!n)throw new Error("Missing inputs el or radius or areas");if(!document.body.contains(t))throw new Error("el is not in the DOM");if(this.el=t,this.radius=e,this.areas=n,this.#t=document.getElementById("ph-speccer-svg"),!this.#t)throw new Error("Missing required SVG element to draw circles. Please see the documentation");const o=document.body,i=document.documentElement,s=Math.max(o.scrollHeight,o.offsetHeight,i.clientHeight,i.scrollHeight,i.offsetHeight);R(this.#t,{height:`${s}px`}),this.draw()}async draw(){const t=`ph_draw-circle-${I()}`;this.circle=document.createElementNS("http://www.w3.org/2000/svg","circle");const e=this.el.getAttribute("id")||I();if(this.el.setAttribute("id",e),this.circle.setAttribute("id",t),this.circle.setAttribute("data-el",e),this.circle.classList.add("ph-speccer"),this.circle.classList.add("speccer"),this.circle.classList.add("circle"),!this.#t)throw new Error("No parentNode found for circle");this.#t.appendChild(this.circle);let n="top";c(this.areas)&&(n="left"),l(this.areas)&&(n="right"),p(this.areas)&&(n="bottom");const{x:o,y:i}=await D(this.el,n);this.circle.setAttribute("r",this.radius+""),this.circle.setAttribute("cx",Math.round(o)+""),this.circle.setAttribute("cy",Math.round(i)+""),this.circle.setAttribute("fill","currentColor")}}window.DrawCircle=F;const _=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:s}=await D(t,n),{x:r,y:a}=await D(e,o);return{x1:i,y1:s,x2:r,y2:a}},X=(t,e)=>{const{x1:n,x2:o,y1:i,y2:s}=t,{direct:r=!1,firstSet:a=!1,direction:c}=e;let l={x:n+(o-n)/2,y:i},p={x:n+(o-n)/2,y:s};return r&&(a?"west"===c?(l={x:n-32,y:i-8},p={x:o+32,y:s}):"south"===c?(l={x:n-8,y:i+32},p={x:o,y:s-32}):"east"===c?(l={x:n+32,y:i-8},p={x:o-32,y:s}):(l={x:n-8,y:i-32},p={x:o,y:s+32}):"west"===c?(l={x:n-32,y:i+8},p={x:o+32,y:s}):"south"===c?(l={x:n+8,y:i+32},p={x:o,y:s-32}):"east"===c?(l={x:n+32,y:i+8},p={x:o-32,y:s}):(l={x:n+8,y:i-32},p={x:o,y:s+32})),{firstPoint:{x:n,y:i},firstControl:l,lastPoint:{x:o,y:s},lastControl:p}},Y=async(t,e,n)=>{const{pos1:o,pos2:i,firstSet:s=!1,direction:r}=n,{x1:a,y1:c,x2:l,y2:p}=await _(t,e,o,i);let d=0,h=0;"north"===r?h=8:"west"===r?d=8:"east"===r?d=-8:"south"===r&&(h=-8);const{firstPoint:u,firstControl:f,lastControl:m,lastPoint:g}=X({x1:a+0,x2:l+d,y1:c+0+document.documentElement.scrollTop,y2:p+h+document.documentElement.scrollTop},{direct:!0,firstSet:s,direction:r});return`M ${u.x} ${u.y}C ${f.x} ${f.y}, ${m.x} ${m.y}, ${g.x} ${g.y}`},K=async({start:t,stop:e,crude:n=!1})=>{const{x1:o,y1:i,x2:s,y2:r}=await _(t,e),a=((t,e,n,o,i=!0)=>{if(b(t)||b(e)||b(n)||b(o))throw new SyntaxError("Missing input for `angle`");if(x(t)||x(e)||x(n)||x(o))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof n} ${typeof o}`);const s=o-e,r=n-t;let a=Math.atan2(s,r);return a*=180/Math.PI,i&&a<0&&(a+=360),a})(o,i,s,r);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"})(a):(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=0&&t<=22.5?"east":t>=22.5&&t<=67.5?"south-east":t>=67.5&&t<=112.5?"south":t>=112.5&&t<=157.5?"south-west":t>=157.5&&t<=202.5?"west":t>=202.5&&t<=247.5?"north-west":t>=247.5&&t<=292.5?"north":t>=292.5&&t<=337.5?"north-east":"east"})(a)};class U{#t;#n;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#e(t,e)}#e(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.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const n=document.body,o=document.documentElement,i=Math.max(n.scrollHeight,n.offsetHeight,o.clientHeight,o.scrollHeight,o.offsetHeight);R(this.#t,{height:`${i}px`}),this.connect()}connect(){this.draw(this.#n)}#o(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${I()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||I();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 K({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:i,path1pos2:s,path2pos1:r,path2pos2:a}=(t=>{let e,n,o,i;switch(t){case"east":e="right-top",n="left-center",o="right-bottom",i="left-center";break;case"south":e="bottom-left",n="top-center",o="bottom-right",i="top-center";break;case"west":e="left-top",n="right-center",o="left-bottom",i="right-center";break;default:e="top-left",n="bottom-center",o="top-right",i="bottom-center"}return{path1pos1:e,path1pos2:n,path2pos1:o,path2pos2:i}})(o),c=await Y(this.startElement,this.stopElement,{pos1:i,pos2:s,firstSet:!0,direction:o}),l=await Y(this.startElement,this.stopElement,{pos1:r,pos2:a,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",i),this.firstPathElement.setAttribute("data-pos2",s),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",r),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",l)}}window.DrawSVGCurlyBracket=U;class Z{#t;#n;startElement;stopElement;line;constructor(t,e){this.#e(t,e)}#e(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.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const n=document.body,o=document.documentElement,i=Math.max(n.scrollHeight,n.offsetHeight,o.clientHeight,o.scrollHeight,o.offsetHeight);R(this.#t,{height:`${i}px`}),this.connect()}connect(){this.draw(this.#n)}async draw(t){if(!t)throw new Error("No path given to draw!");const e=`ph_draw_path-path-${I()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||I();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 i=await K({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:s,pos2:r}=(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}})(i),a=await(async(t,e,n)=>{const{pos1:o,pos2:i}=n,{x1:s,y1:r,x2:a,y2:c}=await _(t,e,o,i),{firstPoint:l,firstControl:p,lastControl:d,lastPoint:h}=X({x1:s,x2:a,y1:r,y2:c},{direction:""});return`M ${l.x} ${l.y}C ${p.x} ${p.y}, ${d.x} ${d.y}, ${h.x} ${h.y}`})(this.startElement,this.stopElement,{pos1:s,pos2:r});this.line.setAttribute("data-direction",i),this.line.setAttribute("data-pos1",s),this.line.setAttribute("data-pos2",r),this.line.setAttribute("d",a)}}window.DrawSVGLine=Z;const J=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],Q="data-speccer",tt="spacing",et=t=>parseInt(t,10),nt=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"):"",ot=t=>et(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,it=async(t,e,n,o,i)=>{await A();const{isCurly:s=!1}=i||{},r=ot(n),a=et(getComputedStyle(n).getPropertyValue("--ph-speccer-measure-size"))||8;const m=await B(n,e);if(h(t)){const{left:t,top:e,height:n,width:o}=m.absolute();return{left:`${t}px`,top:`${e}px`,height:`${n}px`,width:`${o}px`}}if(f(t)&&!d(t)&&!s&&!u(t)){if(l(t)){const{top:t}=m.fromRight({center:!0});await A();const{left:e,width:n}=o.getBoundingClientRect();return{left:`${e+n+r}px`,top:`${t}px`}}if(p(t)){const{left:t}=m.toBottom({center:!0});await A();const{top:e,height:n}=o.getBoundingClientRect();return{left:`${t}px`,top:`${e+n+r}px`}}if(c(t)){const{top:t}=m.fromLeft({center:!0});await A();const{left:e}=o.getBoundingClientRect();return{left:e-1.5*r+"px",top:`${t}px`}}const{left:e}=m.fromTop({center:!0});await A();const{top:n}=o.getBoundingClientRect();return{left:`${e}px`,top:n-1.5*r+"px"}}if(c(t)){if(d(t)&&!s){const{left:t,top:e,height:n}=m.fromLeft({sourceWidth:a});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:e,top:n}=m.fromLeft({center:!0,modifier:s?r/1.5:r});return{left:`${e}px`,top:`${n}px`}}if(l(t)){if(d(t)&&!s){const{left:t,top:e,height:n}=m.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:e,top:n}=m.fromRight({center:!0,modifier:s?r/1.5:r});return{left:`${e}px`,top:`${n}px`}}if(p(t)){if(d(t)&&!s){const{left:t,top:e,width:n}=m.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:e,top:n}=m.fromBottom({center:!0,modifier:s?r/1.5:r});return{left:`${e}px`,top:`${n}px`}}if(d(t)&&!s){const{left:t,top:e,width:n}=m.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:g,top:y}=m.fromTop({center:!0,modifier:s?r/1.5:r});return{left:`${g}px`,top:`${y}px`}},st=async(t,n,o,i="")=>{if(!t)return;const s=t.getAttribute("data-speccer")||i;if(null===(r=s)||!r.split(" ").includes(e.Pin))return;var r;const c=`speccer-${l=s,l.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")||I()}`;var l;const p=N(n,s,c);t.setAttribute("data-speccer-element-id",c),document.body.appendChild(p);const g=await it(s,t,p,o,{isCurly:m(s)});await R(p,g);const y=f(s)&&!h(s)&&!d(s)&&!u(s),w=y||(t=>null!==t&&a(t).includes(e.SVG))(s)&&!m(s);return w?(new Z(t,p),y&&new F(t,5,s)):m(s)&&new U(t,p),c};let rt=0;const at=async t=>{if(!t)return;const e=t.querySelectorAll('[data-speccer^="pin"]');e&&0!==e.length&&[...e].filter((async t=>!k(t))).forEach((async(e,n)=>{const o=(t=>{const e=window.SPECCER_LITERALS||J;let n=e[t];return 0===t&&(rt=0),n||(n=`${e[rt]}${e[rt].toLowerCase()}`,rt++),n})(n);await st(e,o,t)}))},ct=async(t,e,n,o)=>{await A();const i=o.getBoundingClientRect(),s=await P(o);"marginTop"===t&&R(n,{height:`${e}px`,width:i.width+"px",left:s.left+"px",top:s.top-e+"px"}),"marginRight"===t&&R(n,{height:i.height+"px",width:`${e}px`,left:s.left+parseInt(i.width+"",10)+"px",top:s.top+"px"}),"marginBottom"===t&&R(n,{height:`${e}px`,width:i.width+"px",left:s.left+"px",top:s.top+parseInt(i.height+"",10)+"px"}),"marginLeft"===t&&R(n,{height:i.height+"px",width:`${e}px`,left:s.left-e+"px",top:s.top+"px"}),"paddingTop"===t&&R(n,{height:`${e}px`,width:i.width+"px",left:s.left+"px",top:s.top+"px"}),"paddingBottom"===t&&R(n,{height:`${e}px`,width:i.width+"px",left:s.left+"px",top:s.top+(parseInt(i.height+"",10)-e)+"px"}),"paddingRight"===t&&R(n,{height:i.height+"px",width:`${e}px`,left:s.left+(parseInt(i.width+"",10)-e)+"px",top:s.top+"px"}),"paddingLeft"===t&&R(n,{height:i.height+"px",width:`${e}px`,left:s.left+"px",top:s.top+"px"})},lt=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(String(t));return n.appendChild(o),n.setAttribute("title",`${t}px`),$(n,"ph-speccer speccer spacing"),n},pt=async t=>{if(!t)return;const e=await T(t);if(k(t))return;const n=(t=>{const{marginTop:e,marginBottom:n,marginLeft:o,marginRight:i,paddingTop:s,paddingBottom:r,paddingLeft:a,paddingRight:c}=t;return{marginTop:e,marginBottom:n,marginLeft:o,marginRight:i,paddingTop:s,paddingBottom:r,paddingLeft:a,paddingRight:c}})(e),o=Object.keys(n).filter((t=>"0px"!==n[t]));if(o.length)for(const e of o){const o=et(n[e]),i=lt(o),s=nt(e);$(i,s),document.body.appendChild(i),t.classList.add("is-specced"),await ct(e,o,i,t)}},dt=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(i,...s){const r=n&&!o;o&&clearTimeout(o),o=setTimeout((function(){o=null,n||t.apply(i,s)}),e),r&&t.apply(i,s)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},ht=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},ut=()=>{const t=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(pt(n.target),e.unobserve(n.target))}));for(const e of document.querySelectorAll('[data-speccer^="spacing"],[data-speccer^="spacing"] *: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&&(M(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 at(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll('[data-speccer="pin-area"]'))n.observe(t)},ft=t=>{window.speccer=t},mt=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?ft(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?ht(t):e.hasAttribute("data-lazy")?ut():ht(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||dt(t))}},gt=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],yt=["escape","esc","enter","return","⏎","␛"],wt=async(t,e,n)=>{await A();const o=ot(n),i=await B(n,e);if("tabstops"===t){let{left:t,top:e}=i.fromTop();return t-=32,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("landmark"===t){let{left:t,top:e}=i.fromTop();return t-=16,e-=16,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("region"===t){const{left:t,top:e,height:n,width:o}=i.fromTop();return{height:`${n}px`,width:`${o}px`,left:`${t}px`,top:`${e}px`}}if("shortcut"===t){const{left:t,top:e}=i.fromBottom();return{left:`${t}px`,top:`${e}px`}}const{left:s,top:r}=i.fromTop({center:!0,modifier:o});return{left:s-32+"px",top:r-32+"px"}},xt=async(t,e,n)=>{if(!t||!t.checkVisibility())return;const o=((t="tabstops",e,n="span")=>{const o=document.createElement(n),i=E("ph-speccer speccer a11y",{tabstops:"tabstops"===t,landmark:"landmark"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(String(e));o.appendChild(t)}return $(o,i),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 i=await wt(n,t,o);await R(o,i)},bt=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"),gt.includes(t.toLowerCase())&&e.classList.add("modifier"),yt.includes(t.toLowerCase())&&e.classList.add("physical"),e.appendChild(n),o.appendChild(e)}document.body.appendChild(o);const i=await wt("shortcut",t,o);await R(o,i)},$t=async(t,e)=>{await A();const{height:n,width:o}=t.getBoundingClientRect(),{top:i,left:s}=await P(t),{gridTemplateColumns:r,gridTemplate:a,padding:c}=e,l=parseInt(e.columnGap),p=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-gap-original",`${l}px`),document.documentElement.style.setProperty("--ph-speccer-grid-gap",`${l<24?24:l}px`),l<24&&p.classList.add("speccer-small-grid"),p.classList.add("ph-speccer"),p.classList.add("speccer"),p.classList.add("speccer-grid-container"),p.style.height=`${n+64}px`,p.style.width=`${o}px`,p.style.left=`${s}px`,p.style.top=i-32+"px",p.style.padding=c,p.style.gridTemplate=a,p.style.gridTemplateRows="repeat(1, 100%)";const d=r.split(" ").length;for(let t=0;t<d;t++){const t=document.createElement("div");t.classList.add("ph-speccer"),t.classList.add("speccer"),t.classList.add("speccer-grid-item"),p.appendChild(t)}return p},Et=async t=>{if(!t)return;const e=t.getAttribute(Q),n=await T(t);if(!((t,e)=>null!==t&&t.split(" ").includes(r.Grid)&&("grid"===e.display||e.display.includes("grid")))(e,n))return;if(k(t))return;await A();const o=await $t(t,n);document.body.appendChild(o)},kt=(t="span")=>{const e=document.createElement(t),n=E("ph-speccer speccer mark");return $(e,n),e},At=async t=>{if(!t)return;const e=t.getAttribute(Q);if(null===(n=e)||!n.split(" ").includes(s.Mark))return;var n;if(k(t))return;const o=kt();document.body.appendChild(o);const i=await B(o,t),{left:r,top:a,height:c,width:l}=i.absolute(),p={left:`${r}px`,top:`${a}px`,height:`${c}px`,width:`${l}px`};await R(o,p)},St=(t,e=3)=>parseFloat(String(t)).toFixed(e),Ct=(t,e)=>{const n=document.createElement("div"),o={};if(null!==e&&""!==e)for(const t of e.split(" "))o[t]=!0;const i=E("ph-speccer speccer typography",o);return n.innerHTML=t,$(n,i),n},vt=async t=>{if(!t)return;const e=t.getAttribute("data-speccer");if(null===(n=e)||!n.split(" ").includes(o.Typography))return;var n;if(k(t))return;const i=(t=>!!t&&t.split(" ").includes(o.Syntax))(e);t.classList.add("is-specced");const s=await(async(t,e=!1)=>{const n=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}})(await T(t));if(e){const t=n.fontFamily.split(",").map((t=>t.includes("'")?`<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=n.letterSpacing.includes("px")?`<span class="token number">${parseInt(n.letterSpacing,10)}</span><span class="token unit">px</span>`:n.letterSpacing,i="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> ${i}<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>}`})(t,i),r=Ct(s,e);document.body.appendChild(r);const a=await(async(t,e,n)=>{const i=e.getBoundingClientRect(),s=ot(n),r=n.getBoundingClientRect(),a=await P(e);if(t&&t.includes(o.Right))return{left:a.left+i.width+s+"px",top:St(L(a.top,r,i))+"px"};if(t&&t.includes(o.Top))return{left:St(v(a.left,r,i))+"px",top:a.top-r.height-s+"px"};if(t&&t.includes(o.Bottom))return{left:St(v(a.left,r,i))+"px",top:a.top+i.height+s+"px"};return{left:a.left-r.width-s+"px",top:St(L(a.top,r,i))+"px"}})(e,t,r);R(r,a)},Lt={create:$t,element:Et},Pt={create:lt,element:pt},Bt={createPinElement:N,pinElement:st,pinElements:at},Rt={create:H,element:M},Tt={create:kt,element:At},Ht={create:Ct,element:vt},Mt={dom:ht,lazy:ut,manual:ft,activate:mt},Nt=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".ph-speccer.speccer");const t=document.querySelectorAll(`[${Q}^="${tt}"],[${Q}^="${tt}"] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)`),e=document.querySelectorAll(`[${Q}^="measure"]`),n=document.querySelectorAll(`[${Q}^="typography"]`),o=document.querySelectorAll(`[${Q}="pin-area"]`),i=document.querySelectorAll(`[${Q}^="mark"]`),s=document.querySelectorAll(`[${Q}^="grid"]`);for(const t of i)At(t);for(const t of s)Et(t);for(const e of t)pt(e);for(const t of e)M(t);for(const t of n)vt(t);for(const t of o)at(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&&!k(t)&&bt(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)k(e)||xt(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())k(n)||(xt(n,t+1,"landmark"),xt(n,null,"region"))}})()};mt(Nt);export{Nt as default,Lt as grid,Tt as mark,Rt as measure,Mt as modes,Bt as pin,Pt as spacing,Ht as typography};
+var t,e,n,o,s,i,r;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(t||(t={})),function(t){t.Pin="pin",t.Parent="parent",t.Enclose="enclose",t.Subtle="subtle",t.Bracket="bracket",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top",t.SVG="svg",t.Curly="curly"}(e||(e={})),function(t){t.Measure="measure",t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(n||(n={})),function(t){t.Typography="typography",t.Syntax="syntax",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(o||(o={})),function(t){t.Spacing="spacing"}(s||(s={})),function(t){t.Mark="mark"}(i||(i={})),function(t){t.Grid="grid"}(r||(r={}));const a=t=>t.split(" "),c=t=>{if(null===t)return!1;return a(t).includes(e.Left)},l=t=>{if(null===t)return!1;return a(t).includes(e.Right)},p=t=>{if(null===t)return!1;return a(t).includes(e.Bottom)},d=t=>{if(null===t)return!1;return a(t).includes(e.Bracket)},h=t=>{if(null===t)return!1;return a(t).includes(e.Enclose)},u=t=>{if(null===t)return!1;return a(t).includes(e.Subtle)},f=t=>{if(null===t)return!1;return a(t).includes(e.Parent)},m=t=>{if(null===t)return!1;const n=a(t);return n.includes(e.Curly)&&n.includes(e.Bracket)},g=t=>"string"==typeof t,y=t=>!g(t),w=t=>"number"==typeof t,x=t=>!w(t),b=t=>void 0===t,$=(t,e,n="noop")=>{t&&(!e||e&&!e.length||e.trim().split(" ").filter((t=>t!==n)).filter((t=>""!==t)).forEach((e=>t.classList.add(e.trim()))))},E=(t,e)=>t?!e&&y(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():"",k=t=>!t.checkVisibility({checkVisibilityCSS:!0}),A=()=>new Promise(requestAnimationFrame),S=async(t,e,n)=>{await A();return getComputedStyle(t)[e]===n},C=async(t,e,n)=>{if(!t.parentElement)return null;return await S(t.parentElement,e,n)?t.parentElement:await C(t.parentElement,e,n)},L=(t,e,n)=>t-e.width/2+n.width/2,v=(t,e,n)=>t-e.height/2+n.height/2,P=async t=>{await A();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,s=await(async t=>await C(t,"position","sticky"))(t),i=await(async t=>await S(t,"position","sticky"))(t);if(i){const o=t.style.position;await A(),t.style.position="relative",await A(),e=t.getBoundingClientRect(),n=e.top,t.style.position=o}else if(s){const o=s.style.position;await A(),s.style.position="relative",await A(),e=t.getBoundingClientRect(),n=e.top,s.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},B=async(t,e)=>{await A();const n=t.getBoundingClientRect(),o=await P(e),s=await(async(t,e)=>{await A();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:v(s,n,o),left:L(i,n,o)}})(t,e),i=o.height,r=o.width,a=n.height,c=n.width;return{absolute:()=>({top:o.top,left:o.left,height:i,width:r}),toTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top+e+n,left:t?s.left:o.left,height:i,width:r}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top-e-n,left:t?s.left:o.left,height:i,width:r}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:n=i,modifier:c=0}={})=>({top:o.top+n-(e+c),left:t?s.left:o.left,height:i,width:r}),fromBottom:({center:t=!1,targetHeight:e=i,modifier:n=0}={})=>({top:o.top+e+n,left:t?s.left:o.left,height:i,width:r}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?s.top:o.top,left:o.left+e+n,height:i,width:r}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?s.top:o.top,left:o.left-e-n,height:i,width:r}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:n=r,modifier:a=0}={})=>({top:t?s.top:o.top,left:o.left+n-(e+a),height:i,width:r}),fromRight:({center:t=!1,targetWidth:e=r,modifier:n=0}={})=>({top:t?s.top:o.top,left:o.left+e+n,height:i,width:r})}},R=async(t,e)=>{var n;if(!(!t||!e||g(e)||w(e)||(n=e,"boolean"==typeof n)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object))if(await A(),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 A(),getComputedStyle(t,null)),H=(t="",e="",n="span")=>{const o=document.createElement(n);return o.setAttribute("title",`${t}px`),o.setAttribute("data-measure",`${parseInt(String(t),10)}px`),$(o,`ph-speccer speccer measure ${e}`),o},M=async t=>{if(!t)return;const e=t.getAttribute("data-speccer");if(null===(o=e)||!o.split(" ").includes(n.Measure))return;var o;if(k(t))return;await A();const s=t.getBoundingClientRect();if((t=>null!==t&&a(t).includes(n.Width))(e))if(p(e)){const n=H(s.width,e);document.body.appendChild(n);const o=await B(n,t),{left:i,top:r,width:a}=o.fromBottom({center:!1});await R(n,{left:`${i}px`,top:`${r}px`,width:`${a}px`})}else{const n=H(s.width,e);document.body.appendChild(n);const o=await B(n,t),{left:i,top:r,width:a}=o.fromTop({center:!1});await R(n,{left:`${i}px`,top:`${r}px`,width:`${a}px`})}else if((t=>null!==t&&a(t).includes(n.Height))(e))if(l(e)){const n=H(s.height,e);document.body.appendChild(n);const o=await B(n,t),{left:i,top:r,height:a}=o.fromRight({center:!1});await R(n,{left:`${i}px`,top:`${r}px`,height:`${a}px`})}else{const n=H(s.height,e);document.body.appendChild(n);const o=await B(n,t),{left:i,top:r,height:a}=o.fromLeft({center:!1});await R(n,{left:`${i}px`,top:`${r}px`,height:`${a}px`})}},I=(t="",e,n="",o="span")=>{const s=document.createElement(o),i=document.createTextNode(t),r={};null!==e&&""!==e&&(r[e]=!0),!f(e)||d(e)||m(e)||u(e)||(r.svg=!0),!d(e)&&!h(e)||d(e)&&m(e)?s.appendChild(i):(d(e)||h(e))&&s.setAttribute("data-pin-counter",t);const a=E("ph-speccer speccer pin",r);return $(s,a),s.setAttribute("id",n),s},N=()=>"_"+Math.random().toString(36).substring(2,11),q=t=>t.top,V=t=>t.left+t.width,z=t=>t.top+t.height,O=t=>t.left,G=t=>t.left+t.width/2,W=t=>t.top+t.height/2,j={center:t=>({x:G(t),y:W(t)}),top:t=>({x:G(t),y:q(t)}),right:t=>({x:V(t),y:W(t)}),bottom:t=>({x:G(t),y:z(t)}),left:t=>({x:O(t),y:W(t)}),"right-top":t=>({x:V(t),y:q(t)}),"right-bottom":t=>({x:V(t),y:z(t)}),"left-top":t=>({x:O(t),y:q(t)}),"left-bottom":t=>({x:O(t),y:z(t)}),"top-left":t=>({x:O(t),y:q(t)}),"top-right":t=>({x:V(t),y:q(t)}),"bottom-left":t=>({x:O(t),y:z(t)}),"bottom-right":t=>({x:V(t),y:z(t)}),"top-center":t=>({x:G(t),y:q(t)}),"right-center":t=>({x:V(t),y:W(t)}),"bottom-center":t=>({x:G(t),y:z(t)}),"left-center":t=>({x:O(t),y:W(t)})},D=async(t,e="center")=>{if(!e)throw Error("No position given");if(y(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 A();const o=t.getBoundingClientRect();return j[e](o)};class F{#t;el;circle;radius;areas;constructor(t,e,n){this.#e(t,e,n)}#e(t,e,n){if(!t||!e||!n)throw new Error("Missing inputs el or radius or areas");if(!document.body.contains(t))throw new Error("el is not in the DOM");if(this.el=t,this.radius=e,this.areas=n,this.#t=document.getElementById("ph-speccer-svg"),!this.#t)throw new Error("Missing required SVG element to draw circles. Please see the documentation");const o=document.body,s=document.documentElement,i=Math.max(o.scrollHeight,o.offsetHeight,s.clientHeight,s.scrollHeight,s.offsetHeight);R(this.#t,{height:`${i}px`}),this.draw()}async draw(){const t=`ph_draw-circle-${N()}`;this.circle=document.createElementNS("http://www.w3.org/2000/svg","circle");const e=this.el.getAttribute("id")||N();if(this.el.setAttribute("id",e),this.circle.setAttribute("id",t),this.circle.setAttribute("data-el",e),this.circle.classList.add("ph-speccer"),this.circle.classList.add("speccer"),this.circle.classList.add("circle"),!this.#t)throw new Error("No parentNode found for circle");this.#t.appendChild(this.circle);let n="top";c(this.areas)&&(n="left"),l(this.areas)&&(n="right"),p(this.areas)&&(n="bottom");const{x:o,y:s}=await D(this.el,n);this.circle.setAttribute("r",this.radius+""),this.circle.setAttribute("cx",Math.round(o)+""),this.circle.setAttribute("cy",Math.round(s)+""),this.circle.setAttribute("fill","currentColor")}}window.DrawCircle=F;const _=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:s,y:i}=await D(t,n),{x:r,y:a}=await D(e,o);return{x1:s,y1:i,x2:r,y2:a}},X=(t,e)=>{const{x1:n,x2:o,y1:s,y2:i}=t,{direct:r=!1,firstSet:a=!1,direction:c}=e;let l={x:n+(o-n)/2,y:s},p={x:n+(o-n)/2,y:i};return r&&(a?"west"===c?(l={x:n-32,y:s-8},p={x:o+32,y:i}):"south"===c?(l={x:n-8,y:s+32},p={x:o,y:i-32}):"east"===c?(l={x:n+32,y:s-8},p={x:o-32,y:i}):(l={x:n-8,y:s-32},p={x:o,y:i+32}):"west"===c?(l={x:n-32,y:s+8},p={x:o+32,y:i}):"south"===c?(l={x:n+8,y:s+32},p={x:o,y:i-32}):"east"===c?(l={x:n+32,y:s+8},p={x:o-32,y:i}):(l={x:n+8,y:s-32},p={x:o,y:i+32})),{firstPoint:{x:n,y:s},firstControl:l,lastPoint:{x:o,y:i},lastControl:p}},Y=async(t,e,n)=>{const{pos1:o,pos2:s,firstSet:i=!1,direction:r}=n,{x1:a,y1:c,x2:l,y2:p}=await _(t,e,o,s);let d=0,h=0;"north"===r?h=8:"west"===r?d=8:"east"===r?d=-8:"south"===r&&(h=-8);const{firstPoint:u,firstControl:f,lastControl:m,lastPoint:g}=X({x1:a+0,x2:l+d,y1:c+0+document.documentElement.scrollTop,y2:p+h+document.documentElement.scrollTop},{direct:!0,firstSet:i,direction:r});return`M ${u.x} ${u.y}C ${f.x} ${f.y}, ${m.x} ${m.y}, ${g.x} ${g.y}`},K=async({start:t,stop:e,crude:n=!1})=>{const{x1:o,y1:s,x2:i,y2:r}=await _(t,e),a=((t,e,n,o,s=!0)=>{if(b(t)||b(e)||b(n)||b(o))throw new SyntaxError("Missing input for `angle`");if(x(t)||x(e)||x(n)||x(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,r=n-t;let a=Math.atan2(i,r);return a*=180/Math.PI,s&&a<0&&(a+=360),a})(o,s,i,r);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"})(a):(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=0&&t<=22.5?"east":t>=22.5&&t<=67.5?"south-east":t>=67.5&&t<=112.5?"south":t>=112.5&&t<=157.5?"south-west":t>=157.5&&t<=202.5?"west":t>=202.5&&t<=247.5?"north-west":t>=247.5&&t<=292.5?"north":t>=292.5&&t<=337.5?"north-east":"east"})(a)};class U{#t;#n;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#e(t,e)}#e(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.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const n=document.body,o=document.documentElement,s=Math.max(n.scrollHeight,n.offsetHeight,o.clientHeight,o.scrollHeight,o.offsetHeight);R(this.#t,{height:`${s}px`}),this.connect()}connect(){this.draw(this.#n)}#o(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${N()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||N();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 K({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:s,path1pos2:i,path2pos1:r,path2pos2:a}=(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),c=await Y(this.startElement,this.stopElement,{pos1:s,pos2:i,firstSet:!0,direction:o}),l=await Y(this.startElement,this.stopElement,{pos1:r,pos2:a,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",s),this.firstPathElement.setAttribute("data-pos2",i),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",r),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",l)}}window.DrawSVGCurlyBracket=U;class Z{#t;#n;startElement;stopElement;line;constructor(t,e){this.#e(t,e)}#e(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.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const n=document.body,o=document.documentElement,s=Math.max(n.scrollHeight,n.offsetHeight,o.clientHeight,o.scrollHeight,o.offsetHeight);R(this.#t,{height:`${s}px`}),this.connect()}connect(){this.draw(this.#n)}async draw(t){if(!t)throw new Error("No path given to draw!");const e=`ph_draw_path-path-${N()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||N();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 K({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:i,pos2:r}=(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),a=await(async(t,e,n)=>{const{pos1:o,pos2:s}=n,{x1:i,y1:r,x2:a,y2:c}=await _(t,e,o,s),{firstPoint:l,firstControl:p,lastControl:d,lastPoint:h}=X({x1:i,x2:a,y1:r,y2:c},{direction:""});return`M ${l.x} ${l.y}C ${p.x} ${p.y}, ${d.x} ${d.y}, ${h.x} ${h.y}`})(this.startElement,this.stopElement,{pos1:i,pos2:r});this.line.setAttribute("data-direction",s),this.line.setAttribute("data-pos1",i),this.line.setAttribute("data-pos2",r),this.line.setAttribute("d",a)}}window.DrawSVGLine=Z;const J=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],Q="data-speccer",tt="spacing",et=t=>parseInt(t,10),nt=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"):"",ot=t=>et(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,st=async(t,e,n,o,s)=>{await A();const{isCurly:i=!1}=s||{},r=ot(n),a=et(getComputedStyle(n).getPropertyValue("--ph-speccer-measure-size"))||8;const m=await B(n,e);if(h(t)){const{left:t,top:e,height:n,width:o}=m.absolute();return{left:`${t}px`,top:`${e}px`,height:`${n}px`,width:`${o}px`}}if(f(t)&&!d(t)&&!i&&!u(t)){if(l(t)){const{top:t}=m.fromRight({center:!0});await A();const{left:e,width:n}=o.getBoundingClientRect();return{left:`${e+n+r}px`,top:`${t}px`}}if(p(t)){const{left:t}=m.toBottom({center:!0});await A();const{top:e,height:n}=o.getBoundingClientRect();return{left:`${t}px`,top:`${e+n+r}px`}}if(c(t)){const{top:t}=m.fromLeft({center:!0});await A();const{left:e}=o.getBoundingClientRect();return{left:e-1.5*r+"px",top:`${t}px`}}const{left:e}=m.fromTop({center:!0});await A();const{top:n}=o.getBoundingClientRect();return{left:`${e}px`,top:n-1.5*r+"px"}}if(c(t)){if(d(t)&&!i){const{left:t,top:e,height:n}=m.fromLeft({sourceWidth:a});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:e,top:n}=m.fromLeft({center:!0,modifier:i?r/1.5:r});return{left:`${e}px`,top:`${n}px`}}if(l(t)){if(d(t)&&!i){const{left:t,top:e,height:n}=m.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:e,top:n}=m.fromRight({center:!0,modifier:i?r/1.5:r});return{left:`${e}px`,top:`${n}px`}}if(p(t)){if(d(t)&&!i){const{left:t,top:e,width:n}=m.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:e,top:n}=m.fromBottom({center:!0,modifier:i?r/1.5:r});return{left:`${e}px`,top:`${n}px`}}if(d(t)&&!i){const{left:t,top:e,width:n}=m.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:g,top:y}=m.fromTop({center:!0,modifier:i?r/1.5:r});return{left:`${g}px`,top:`${y}px`}},it=async(t,n,o,s="")=>{if(!t)return;const i=t.getAttribute("data-speccer")||s;if(null===(r=i)||!r.split(" ").includes(e.Pin))return;var r;const c=`speccer-${l=i,l.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")||N()}`;var l;const p=I(n,i,c);t.setAttribute("data-speccer-element-id",c),document.body.appendChild(p);const g=await st(i,t,p,o,{isCurly:m(i)});await R(p,g);const y=f(i)&&!h(i)&&!d(i)&&!u(i),w=y||(t=>null!==t&&a(t).includes(e.SVG))(i)&&!m(i);return w?(new Z(t,p),y&&new F(t,5,i)):m(i)&&new U(t,p),c};let rt=0;const at=async t=>{if(!t)return;const e=t.querySelectorAll('[data-speccer^="pin"]');e&&0!==e.length&&[...e].filter((async t=>!k(t))).forEach((async(e,n)=>{const o=(t=>{const e=window.SPECCER_LITERALS||J;let n=e[t];return 0===t&&(rt=0),n||(n=`${e[rt]}${e[rt].toLowerCase()}`,rt++),n})(n);await it(e,o,t)}))},ct=async(t,e,n,o)=>{await A();const s=o.getBoundingClientRect(),i=await P(o);"marginTop"===t&&R(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top-e+"px"}),"marginRight"===t&&R(n,{height:s.height+"px",width:`${e}px`,left:i.left+parseInt(s.width+"",10)+"px",top:i.top+"px"}),"marginBottom"===t&&R(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top+parseInt(s.height+"",10)+"px"}),"marginLeft"===t&&R(n,{height:s.height+"px",width:`${e}px`,left:i.left-e+"px",top:i.top+"px"}),"paddingTop"===t&&R(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top+"px"}),"paddingBottom"===t&&R(n,{height:`${e}px`,width:s.width+"px",left:i.left+"px",top:i.top+(parseInt(s.height+"",10)-e)+"px"}),"paddingRight"===t&&R(n,{height:s.height+"px",width:`${e}px`,left:i.left+(parseInt(s.width+"",10)-e)+"px",top:i.top+"px"}),"paddingLeft"===t&&R(n,{height:s.height+"px",width:`${e}px`,left:i.left+"px",top:i.top+"px"})},lt=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(String(t));return n.appendChild(o),n.setAttribute("title",`${t}px`),$(n,"ph-speccer speccer spacing"),n},pt=async t=>{if(!t)return;const e=await T(t);if(k(t))return;const n=(t=>{const{marginTop:e,marginBottom:n,marginLeft:o,marginRight:s,paddingTop:i,paddingBottom:r,paddingLeft:a,paddingRight:c}=t;return{marginTop:e,marginBottom:n,marginLeft:o,marginRight:s,paddingTop:i,paddingBottom:r,paddingLeft:a,paddingRight:c}})(e),o=Object.keys(n).filter((t=>"0px"!==n[t]));if(o.length)for(const e of o){const o=et(n[e]),s=lt(o),i=nt(e);$(s,i),document.body.appendChild(s),t.classList.add("is-specced"),await ct(e,o,s,t)}},dt=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(s,...i){const r=n&&!o;o&&clearTimeout(o),o=setTimeout((function(){o=null,n||t.apply(s,i)}),e),r&&t.apply(s,i)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},ht=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},ut=()=>{const t=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(pt(n.target),e.unobserve(n.target))}));for(const e of document.querySelectorAll('[data-speccer^="spacing"],[data-speccer^="spacing"] *: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&&(M(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 at(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll('[data-speccer="pin-area"]'))n.observe(t)},ft=t=>{window.speccer=t},mt=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?ft(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?ht(t):e.hasAttribute("data-lazy")?ut():ht(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||dt(t))}},gt=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],yt=["escape","esc","enter","return","⏎","␛"],wt=async(t,e,n)=>{await A();const o=ot(n),s=await B(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:r}=s.fromTop({center:!0,modifier:o});return{left:i-32+"px",top:r-32+"px"}},xt=async(t,e,n)=>{if(!t||!t.checkVisibility())return;const o=((t="tabstops",e,n="span")=>{const o=document.createElement(n),s=E("ph-speccer speccer a11y",{tabstops:"tabstops"===t,landmark:"landmark"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(String(e));o.appendChild(t)}return $(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 wt(n,t,o);await R(o,s)},bt=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"),gt.includes(t.toLowerCase())&&e.classList.add("modifier"),yt.includes(t.toLowerCase())&&e.classList.add("physical"),e.appendChild(n),o.appendChild(e)}document.body.appendChild(o);const s=await wt("shortcut",t,o);await R(o,s)},$t=async(t,e,n)=>{await A();const{toggle:o}=n,{height:s,width:i}=t.getBoundingClientRect(),{top:r,left:a}=await P(t),{gridTemplateColumns:c,gridTemplateRows:l,padding:p}=e;if("columns"===o||"both"===o){const t=parseInt(e.columnGap),n=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-gap-original",`${t}px`),document.documentElement.style.setProperty("--ph-speccer-grid-gap",`${t<24?24:t}px`),t<24&&n.classList.add("speccer-small-grid"),n.classList.add("ph-speccer"),n.classList.add("speccer"),n.classList.add("speccer-grid-container"),n.style.height=`${s+64}px`,n.style.width=`${i}px`,n.style.left=`${a}px`,n.style.top=r-32+"px",n.style.padding=p,n.style.gridTemplateColumns=c;const o=c.split(" ").length;for(let t=0;t<o;t++){const t=document.createElement("div");t.classList.add("ph-speccer"),t.classList.add("speccer"),t.classList.add("speccer-grid-item"),n.appendChild(t)}document.body.appendChild(n)}if("rows"===o||"both"===o){const t=parseInt(e.rowGap),n=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-row-gap-original",`${t}px`),document.documentElement.style.setProperty("--ph-speccer-grid-row-gap",`${t<24?24:t}px`),t<24&&n.classList.add("speccer-small-grid"),n.classList.add("ph-speccer"),n.classList.add("speccer"),n.classList.add("speccer-grid-row-container"),n.style.width=`${i+64}px`,n.style.height=`${s}px`,n.style.top=`${r}px`,n.style.left=a-32+"px",n.style.padding=p,n.style.gridTemplateRows=l;const o=l.split(" ").length;for(let t=0;t<o;t++){const t=document.createElement("div");t.classList.add("ph-speccer"),t.classList.add("speccer"),t.classList.add("speccer-grid-row-item"),n.appendChild(t)}document.body.appendChild(n)}},Et=async t=>{if(!t)return;const e=t.getAttribute(Q),n=await T(t);if(!((t,e)=>null!==t&&t.split(" ").includes(r.Grid)&&("grid"===e.display||e.display.includes("grid")))(e,n))return;if(k(t))return;await A();const o={toggle:"both"};e?.includes("columns")&&(o.toggle="columns"),e?.includes("rows")&&(o.toggle="rows"),await $t(t,n,o)},kt=(t="span")=>{const e=document.createElement(t),n=E("ph-speccer speccer mark");return $(e,n),e},At=async t=>{if(!t)return;const e=t.getAttribute(Q);if(null===(n=e)||!n.split(" ").includes(i.Mark))return;var n;if(k(t))return;const o=kt();document.body.appendChild(o);const s=await B(o,t),{left:r,top:a,height:c,width:l}=s.absolute(),p={left:`${r}px`,top:`${a}px`,height:`${c}px`,width:`${l}px`};await R(o,p)},St=(t,e=3)=>parseFloat(String(t)).toFixed(e),Ct=(t,e)=>{const n=document.createElement("div"),o={};if(null!==e&&""!==e)for(const t of e.split(" "))o[t]=!0;const s=E("ph-speccer speccer typography",o);return n.innerHTML=t,$(n,s),n},Lt=async t=>{if(!t)return;const e=t.getAttribute("data-speccer");if(null===(n=e)||!n.split(" ").includes(o.Typography))return;var n;if(k(t))return;const s=(t=>!!t&&t.split(" ").includes(o.Syntax))(e);t.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:r,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:s,fontStyle:i,fontVariationSettings:r,fontWeight:a}})(await T(t));if(e){const t=n.fontFamily.split(",").map((t=>t.includes("'")?`<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=n.letterSpacing.includes("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>}`})(t,s),r=Ct(i,e);document.body.appendChild(r);const a=await(async(t,e,n)=>{const s=e.getBoundingClientRect(),i=ot(n),r=n.getBoundingClientRect(),a=await P(e);if(t&&t.includes(o.Right))return{left:a.left+s.width+i+"px",top:St(v(a.top,r,s))+"px"};if(t&&t.includes(o.Top))return{left:St(L(a.left,r,s))+"px",top:a.top-r.height-i+"px"};if(t&&t.includes(o.Bottom))return{left:St(L(a.left,r,s))+"px",top:a.top+s.height+i+"px"};return{left:a.left-r.width-i+"px",top:St(v(a.top,r,s))+"px"}})(e,t,r);R(r,a)},vt={create:$t,element:Et},Pt={create:lt,element:pt},Bt={createPinElement:I,pinElement:it,pinElements:at},Rt={create:H,element:M},Tt={create:kt,element:At},Ht={create:Ct,element:Lt},Mt={dom:ht,lazy:ut,manual:ft,activate:mt},It=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".ph-speccer.speccer");const t=document.querySelectorAll(`[${Q}^="${tt}"],[${Q}^="${tt}"] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)`),e=document.querySelectorAll(`[${Q}^="measure"]`),n=document.querySelectorAll(`[${Q}^="typography"]`),o=document.querySelectorAll(`[${Q}="pin-area"]`),s=document.querySelectorAll(`[${Q}^="mark"]`),i=document.querySelectorAll(`[${Q}^="grid"]`);for(const t of s)At(t);for(const t of i)Et(t);for(const e of t)pt(e);for(const t of e)M(t);for(const t of n)Lt(t);for(const t of o)at(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&&!k(t)&&bt(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)k(e)||xt(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())k(n)||(xt(n,t+1,"landmark"),xt(n,null,"region"))}})()};mt(It);export{It as default,vt as grid,Tt as mark,Rt as measure,Mt as modes,Bt as pin,Pt as spacing,Ht as typography};
 //# sourceMappingURL=speccer.esm.js.map