npm - @phun-ky/speccer - Versions diffs - 6.2.1 → 6.2.5 - Mend

@phun-ky/speccer 6.2.1 → 6.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -140,7 +140,7 @@ This will give a dashed border, and a more subtle pin style.
 ### Element typogpraphy
-![Image of speccer](./assets/typography.png)
+![Image of typography speccer](./assets/typography.png)
 In your component examples, use the following attribute.
@@ -191,7 +191,9 @@ document.querySelectorAll('[data-anatomy-section]').forEach((el) => {
 ## Customization
-You can use the provided CSS variables to customize the look and feel. If more control is needed, you can use CSS overrides :)
+![Image of speccer dark mode](./assets/darkmode.png)
+Allthough the styling works nicely with dark mode, you can use the provided CSS variables to customize the look and feel. If more control is needed, you can use CSS overrides :)
 ```css
 .ph.speccer {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@phun-ky/speccer",
-  "version": "6.2.1",
+  "version": "6.2.5",
   "description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
   "main": "speccer.js",
   "publishConfig": {
@@ -9,13 +9,14 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "rollup": "rollup -c",
-    "rollup:dev": "npm run clean && rollup -c -w",
+    "prerollup:dev": "npm run clean && npm run stylus && npm run postcss ",
+    "rollup:dev": "rollup -c -w",
     "clean": "rm -rf dist/ dts/ ./speccer.css ./speccer.min.css ./speccer.js",
     "build": "npm run clean && npm run rollup && npm run stylus && npm run postcss",
     "styles": "npm run stylus && npm run postcss",
     "stylus": "rm -rf ./speccer.css && stylus ./src/styles/index.styl -o ./speccer.css",
     "postcss": "rm -rf ./speccer.min.css && postcss ./speccer.css -o  speccer.min.css",
-    "dev": "node ./scripts/server.js",
+    "dev": "npx browser-sync start --server --files \"dev/*.html\" --index \"dev/index.html\" --serveStatic \"/dev/*.html\"",
     "commit": "npx git-cz",
     "release": "npx standard-version"
   },
@@ -27,8 +28,8 @@
   ],
   "standard-version": {
     "scripts": {
-      "prerelease": "npm run build",
-      "posttag": "git push --follow-tags origin master && npm publish"
+      "prerelease": "npm run build && git add .",
+      "posttag": "git push --follow-tags origin master"
     },
     "types": [
       {
@@ -111,7 +112,8 @@
     "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/user-event": "^12.7.1",
-    "browser-sync": "^2.27.7",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
     "cssnano": "^5.0.4",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -123,19 +125,17 @@
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^26.6.3",
+    "network-information-types": "^0.1.1",
     "postcss": "^8.3.0",
     "postcss-cli": "^8.3.1",
     "prettier": "^2.4.1",
     "prettier-eslint": "^13.0.0",
     "rollup": "^2.39.0",
-    "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "@typescript-eslint/parser": "^5.7.0",
-    "stylus": "^0.56.0",
     "rollup-plugin-dts": "^4.0.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.1",
+    "stylus": "^0.56.0",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.4",
-    "network-information-types": "^0.1.0"
+    "typescript": "^4.5.4"
   }
 }

package/speccer.css CHANGED Viewed

@@ -53,7 +53,6 @@
   line-height: 150%;
   font-size: 16px;
   z-index: 100000;
-  box-sizing: content-box;
 }
 .ph.speccer.dissection::after {
   content: "";

package/speccer.js CHANGED Viewed

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,(function(t){"use strict";const e=(t,e,n="noop")=>{t&&(!e||e&&0===e.length||e.trim().split(" ").filter((t=>t!==n)).forEach((e=>t.classList.add(e))))},n=(t,e)=>`${t} ${Object.keys(e).filter((t=>e[t])).join(" ")}`.trim(),i=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],o=t=>parseInt(t,10),p=t=>o(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,a=()=>new Promise(requestAnimationFrame),l=async(t,e)=>{!t||!e||"string"==typeof e||"number"==typeof e||"boolean"==typeof e||Array.isArray(e)&&0===e.length||0===Object.keys(e).length&&e.constructor===Object||(await a(),Array.isArray(e)?e.forEach((e=>t.style[e.key]=e.value)):Object.keys(e).forEach((n=>t.style[n]=e[n])))},r=async t=>(await a(),getComputedStyle(t,null)),d=(t,e,n)=>t-e.width/2+n.width/2,c=(t,e,n)=>t-e.height/2+n.height/2,s=async t=>{await a();const e=t.getBoundingClientRect();return{top:e.top+window.pageYOffset,left:e.left+window.pageXOffset}},h=(t="",n="span")=>{const i=document.createElement(n),o=document.createTextNode(t+"");return i.appendChild(o),i.setAttribute("title",t+"px"),e(i,"ph speccer spacing"),i},f=async t=>{if(!t)return;const n=await r(t);if("none"===n.display||"0"===n.opacity||"hidden"===n.visibility)return;const i=(t=>{const{marginTop:e,marginBottom:n,marginLeft:i,marginRight:o,paddingTop:p,paddingBottom:a,paddingLeft:l,paddingRight:r}=t;return{marginTop:e,marginBottom:n,marginLeft:i,marginRight:o,paddingTop:p,paddingBottom:a,paddingLeft:l,paddingRight:r}})(n),p=Object.keys(i).filter((t=>"0px"!==i[t]));0!==p.length&&p.forEach((async n=>{const p=o(i[n]),r=h(p),d=(t=>-1!==t.indexOf("Top")?t.replace("Top"," top"):-1!==t.indexOf("Right")?t.replace("Right"," right"):-1!==t.indexOf("Bottom")?t.replace("Bottom"," bottom"):-1!==t.indexOf("Left")?t.replace("Left"," left"):"")(n);e(r,d),document.body.appendChild(r),t.classList.add("is-specced"),await(async(t,e,n,i)=>{await a();const o=i.getBoundingClientRect(),p=await s(i);"marginTop"===t&&l(n,{height:`${e}px`,width:o.width+"px",left:p.left+"px",top:p.top-e+"px"}),"marginRight"===t&&l(n,{height:o.height+"px",width:`${e}px`,left:p.left+parseInt(o.width+"",10)+"px",top:p.top+"px"}),"marginBottom"===t&&l(n,{height:`${e}px`,width:o.width+"px",left:p.left+"px",top:p.top+parseInt(o.height+"",10)+"px"}),"marginLeft"===t&&l(n,{height:o.height+"px",width:`${e}px`,left:p.left-e+"px",top:p.top+"px"}),"paddingTop"===t&&l(n,{height:`${e}px`,width:o.width+"px",left:p.left+"px",top:p.top+"px"}),"paddingBottom"===t&&l(n,{height:`${e}px`,width:o.width+"px",left:p.left+"px",top:p.top+(parseInt(o.height+"",10)-e)+"px"}),"paddingRight"===t&&l(n,{height:o.height+"px",width:`${e}px`,left:p.left+(parseInt(o.width+"",10)-e)+"px",top:p.top+"px"}),"paddingLeft"===t&&l(n,{height:o.height+"px",width:`${e}px`,left:p.left+"px",top:p.top+"px"})})(n,p,r,t)}))};var g,x,u=Object.freeze({__proto__:null,create:h,element:f});!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(g||(g={})),function(t){t.Outline="outline",t.Enclose="enclose",t.Full="full",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(x||(x={}));const m=(t,e=3)=>parseFloat(t+"").toFixed(e),y=(t="",i,o="span")=>{const p=document.createElement(o),a=document.createTextNode(t),l={};null!==i&&""!==i&&(l[i]=!0),-1===i.indexOf(x.Full)&&-1===i.indexOf(x.Enclose)?p.appendChild(a):-1===i.indexOf(x.Full)&&-1===i.indexOf(x.Enclose)||p.setAttribute("data-dissection-counter",t);const r=n("ph speccer dissection",l);return e(p,r),p},w=t=>{if(!t)return;const e=t.querySelectorAll("[data-anatomy]");e&&e.forEach((async(t,e)=>{if(!t)return;const n=t.getAttribute("data-anatomy")||"";if(!n||""===n)return;const o=y(i[e],n);document.body.appendChild(o);const a=await(async(t,e,n)=>{const i=e.getBoundingClientRect(),o=n.getBoundingClientRect(),a=p(n),l=await s(e),r=l.left-o.width-a+"px",h=m(c(l.top,o,i))+"px",f=l.left+i.width+a+"px",g=m(c(l.top,o,i))+"px",u=m(d(l.left,o,i))+"px",y=l.top-o.height-a+"px",w=m(d(l.left,o,i))+"px",O=l.top+i.height+a+"px";let b={};return b=-1!==t.indexOf(x.Outline)?-1!==t.indexOf(x.Left)?-1!==t.indexOf(x.Full)?{left:l.left-8+"px",top:l.top+-1+"px",height:i.height+"px"}:-1!==t.indexOf(x.Enclose)?{left:l.left-1+"px",top:l.top+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:r,top:h}:-1!==t.indexOf(x.Right)?-1!==t.indexOf(x.Full)?{left:l.left+i.width+"px",top:l.top+-1+"px",height:i.height+"px"}:-1!==t.indexOf(x.Enclose)?{left:l.left+-1+"px",top:l.top+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:f,top:g}:-1!==t.indexOf(x.Top)?-1!==t.indexOf(x.Full)?{top:l.top+-8+"px",left:l.left+-1+"px",width:i.width+"px"}:-1!==t.indexOf(x.Enclose)?{top:l.top+-1+"px",left:l.left+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:u,top:y}:-1!==t.indexOf(x.Bottom)?-1!==t.indexOf(x.Full)?{top:l.top+i.height+"px",left:l.left+-1+"px",width:i.width+"px"}:-1!==t.indexOf(x.Enclose)?{top:l.top+-1+"px",left:l.left+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:w,top:O}:-1!==t.indexOf(x.Full)?{left:l.left+i.width+"px",top:l.top+"px",height:i.height+"px"}:-1!==t.indexOf(x.Enclose)?{left:l.left+i.width+"px",top:l.top+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:r,top:h}:-1!==t.indexOf(x.Full)?{left:l.left-8+"px",top:l.top+-1+"px",height:i.height+"px"}:-1!==t.indexOf(x.Enclose)?{left:l.left-1+"px",top:l.top+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:r,top:h},b})(n,t,o);l(o,a)}))};const O=(t="",n="",i="span")=>{const o=document.createElement(i);return o.setAttribute("title",t+"px"),o.setAttribute("data-measure",parseInt(t+"",10)+"px"),e(o,`ph speccer measure ${n}`),o},b=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const n=await r(t);if("none"===n.display||"0"===n.opacity||"hidden"===n.visibility)return;await a();const i=t.getBoundingClientRect(),o=i.top+window.pageYOffset,p=i.left+window.pageXOffset;if(-1!==e.indexOf("width"))if(-1!==e.indexOf("bottom")){const t=O(i.width,e);document.body.appendChild(t),l(t,{left:p+"px",top:o+i.height+1+"px",width:i.width+"px"})}else{const t=O(i.width,e);document.body.appendChild(t);const n=t.getBoundingClientRect();l(t,{left:p+"px",top:o-n.height+1+"px",width:i.width+"px"})}else if(-1!==e.indexOf("height"))if(-1!==e.indexOf("right")){const t=O(i.height,e);document.body.appendChild(t),l(t,{left:p+i.width+"px",top:o+"px",height:i.height+"px"})}else{const t=O(i.height,e);document.body.appendChild(t);const n=t.getBoundingClientRect();l(t,{left:p-n.width+"px",top:o+"px",height:i.height+"px"})}};const E=(t,i)=>{const o=document.createElement("div"),p={};null!==i&&""!==i&&(p[i]=!0);const a=n("ph speccer typography",p);return o.innerHTML=t,e(o,a),o};const A=t=>{const e=()=>function(t,e,n){let i;return function(){const o=this,p=arguments,a=function(){i=null,n||t.apply(o,p)},l=n&&!i;i&&clearTimeout(i),i=setTimeout(a,e),l&&t.apply(o,p)}}((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},S=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},R=()=>{const t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(f(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)").forEach((e=>{t.observe(e)}));const e=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(b(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer-measure]").forEach((t=>{e.observe(t)}));const n=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(w(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-anatomy-section]").forEach((t=>{n.observe(t)}))},v=t=>{window.speccer=t},B=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");!n||-1===n.indexOf("speccer.js")&&-1===n.indexOf("JaXpOK.js")||(e.hasAttribute("data-manual")?v(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?S(t):e.hasAttribute("data-lazy")?R():S(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||A(t))}};const C=u,_=Object.freeze({__proto__:null,create:y,element:w}),L=Object.freeze({__proto__:null,element:b}),T=Object.freeze({__proto__:null,create:E,element:async t=>{if(!t)return;const e=t.getAttribute("data-speccer-typography"),n=await r(t);if("none"===n.display||"0"===n.opacity||"hidden"===n.visibility)return;t.classList.add("is-specced");const i=await(async t=>{const e=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:i,fontSize:o,fontStyle:p,fontVariationSettings:a,fontWeight:l}=t;return{lineHeight:e,letterSpacing:n,fontFamily:i,fontSize:o,fontStyle:p,fontVariationSettings:a,fontWeight:l}})(await r(t)),n="normal"!==e.lineHeight?parseInt(e.lineHeight,10)/16+"rem":"normal";return`\nfont-styles: {<ul class="speccer-styles">  <li><span class="property">font-family:</span> ${e.fontFamily};</li>  <li><span class="property">font-size:</span> ${e.fontSize} / ${parseInt(e.fontSize,10)/16}rem;</li>  <li><span class="property">font-weight:</span> ${e.fontWeight};</li>  <li><span class="property">font-variation-settings:</span> ${e.fontVariationSettings};</li>  <li><span class="property">line-height:</span> ${e.lineHeight} / ${n};</li>  <li><span class="property">letter-spacing:</span> ${e.letterSpacing};</li>  <li><span class="property">font-style:</span> ${e.fontStyle};</li></ul>}`})(t),o=E(i,e);document.body.appendChild(o);const a=await(async(t,e,n)=>{const i=e.getBoundingClientRect(),o=p(n),a=n.getBoundingClientRect(),l=await s(e),r=l.left-a.width-o+"px",h=m(c(l.top,a,i))+"px",f=l.left+i.width+o+"px",x=m(c(l.top,a,i))+"px",u=m(d(l.left,a,i))+"px",y=l.top-a.height-o+"px",w=m(d(l.left,a,i))+"px",O=l.top+i.height+o+"px";let b={left:r,top:h};return t&&-1!==t.indexOf(g.Right)?b={left:f,top:x}:t&&-1!==t.indexOf(g.Top)?b={left:u,top:y}:t&&-1!==t.indexOf(g.Bottom)&&(b={left:w,top:O}),b})(e,t,o);l(o,a)}}),$=Object.freeze({__proto__:null,dom:S,lazy:R,manual:v,activate:B}),F=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".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]"),i=document.querySelectorAll("[data-anatomy-section]");t.forEach(C.element),e.forEach(L.element),n.forEach(T.element),i.forEach(_.element)};B(F),t.default=F,t.dissect=_,t.measure=L,t.modes=$,t.spacing=C,t.typography=T,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,(function(t){"use strict";const e=(t,e,i="noop")=>{t&&(!e||e&&0===e.length||e.trim().split(" ").filter((t=>t!==i)).forEach((e=>t.classList.add(e))))},i=(t,e)=>t?e||"string"==typeof t?`${t} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():`${Object.keys(t).filter((e=>t[e])).join(" ")}`.trim():"",o=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],n=t=>parseInt(t,10),p=t=>n(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,a=()=>new Promise(requestAnimationFrame),l=async(t,e)=>{!t||!e||"string"==typeof e||"number"==typeof e||"boolean"==typeof e||Array.isArray(e)&&0===e.length||0===Object.keys(e).length&&e.constructor===Object||(await a(),Array.isArray(e)?e.forEach((e=>t.style[e.key]=e.value)):Object.keys(e).forEach((i=>t.style[i]=e[i])))},r=async t=>(await a(),getComputedStyle(t,null)),c=(t,e,i)=>t-e.width/2+i.width/2,h=(t,e,i)=>t-e.height/2+i.height/2,d=async t=>{await a();const e=t.getBoundingClientRect(),i=e.top+window.pageYOffset,o=e.left+window.pageXOffset;return{height:e.height,width:e.width,top:i,left:o}},s=async(t,e)=>{await a();const i=t.getBoundingClientRect(),o=await d(e),n=await(async(t,e)=>{await a();const i=t.getBoundingClientRect(),o=e.getBoundingClientRect(),n=o.top+window.pageYOffset,p=o.left+window.pageXOffset;return{height:o.height,width:o.width,top:h(n,i,o),left:c(p,i,o)}})(t,e),p=o.height,l=o.width,r=i.height,s=i.width;return{toTop:({center:t=!1,sourceHeight:e=r}={})=>({top:o.top-e,left:t?n.left:o.left,height:p,width:l}),fromTop:({center:t=!1}={})=>({top:o.top,left:t?n.left:o.left,height:p,width:l}),toBottom:({center:t=!1,sourceHeight:e=r,targetHeight:i=p}={})=>({top:o.top+i-e,left:t?n.left:o.left,height:p,width:l}),fromBottom:({center:t=!1,targetHeight:e=p}={})=>({top:o.top+e,left:t?n.left:o.left,height:p,width:l}),toLeft:({center:t=!1,sourceWidth:e=s,modifier:i=0}={})=>({top:t?n.top:o.top,left:o.left-e-i,height:p,width:l}),fromLeft:({center:t=!1}={})=>({top:t?n.top:o.top,left:o.left,height:p,width:l}),toRight:({center:t=!1,sourceWidth:e=s,targetWidth:i=l,modifier:a=0}={})=>({top:t?n.top:o.top,left:o.left+i-e+a,height:p,width:l}),fromRight:({center:t=!1,targetWidth:e=l}={})=>({top:t?n.top:o.top,left:o.left+e,height:p,width:l})}},f=(t="",i="span")=>{const o=document.createElement(i),n=document.createTextNode(t+"");return o.appendChild(n),o.setAttribute("title",t+"px"),e(o,"ph speccer spacing"),o},g=async t=>{if(!t)return;const i=await r(t);if("none"===i.display||"0"===i.opacity||"hidden"===i.visibility)return;const o=(t=>{const{marginTop:e,marginBottom:i,marginLeft:o,marginRight:n,paddingTop:p,paddingBottom:a,paddingLeft:l,paddingRight:r}=t;return{marginTop:e,marginBottom:i,marginLeft:o,marginRight:n,paddingTop:p,paddingBottom:a,paddingLeft:l,paddingRight:r}})(i),p=Object.keys(o).filter((t=>"0px"!==o[t]));0!==p.length&&p.forEach((async i=>{const p=n(o[i]),r=f(p),c=(t=>-1!==t.indexOf("Top")?t.replace("Top"," top"):-1!==t.indexOf("Right")?t.replace("Right"," right"):-1!==t.indexOf("Bottom")?t.replace("Bottom"," bottom"):-1!==t.indexOf("Left")?t.replace("Left"," left"):"")(i);e(r,c),document.body.appendChild(r),t.classList.add("is-specced"),await(async(t,e,i,o)=>{await a();const n=o.getBoundingClientRect(),p=await d(o);"marginTop"===t&&l(i,{height:`${e}px`,width:n.width+"px",left:p.left+"px",top:p.top-e+"px"}),"marginRight"===t&&l(i,{height:n.height+"px",width:`${e}px`,left:p.left+parseInt(n.width+"",10)+"px",top:p.top+"px"}),"marginBottom"===t&&l(i,{height:`${e}px`,width:n.width+"px",left:p.left+"px",top:p.top+parseInt(n.height+"",10)+"px"}),"marginLeft"===t&&l(i,{height:n.height+"px",width:`${e}px`,left:p.left-e+"px",top:p.top+"px"}),"paddingTop"===t&&l(i,{height:`${e}px`,width:n.width+"px",left:p.left+"px",top:p.top+"px"}),"paddingBottom"===t&&l(i,{height:`${e}px`,width:n.width+"px",left:p.left+"px",top:p.top+(parseInt(n.height+"",10)-e)+"px"}),"paddingRight"===t&&l(i,{height:n.height+"px",width:`${e}px`,left:p.left+(parseInt(n.width+"",10)-e)+"px",top:p.top+"px"}),"paddingLeft"===t&&l(i,{height:n.height+"px",width:`${e}px`,left:p.left+"px",top:p.top+"px"})})(i,p,r,t)}))};var u,x,m=Object.freeze({__proto__:null,create:f,element:g});!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(u||(u={})),function(t){t.Outline="outline",t.Enclose="enclose",t.Full="full",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(x||(x={}));const w=(t,e=3)=>parseFloat(t+"").toFixed(e),y=async(t,e,i)=>{const o=p(i),a=n(getComputedStyle(i).getPropertyValue("--ph-speccer-measure-size"))||8;const l=-1*a,r=e.getBoundingClientRect(),f=i.getBoundingClientRect(),g=await d(e),u=g.left-f.width-o+"px",m=w(h(g.top,f,r))+"px";g.left,r.width,w(h(g.top,f,r));const y=w(c(g.left,f,r))+"px",O=g.top-f.height-o+"px",b=w(c(g.left,f,r))+"px",E=g.top+r.height+o+"px",$=await s(i,e);let R={};if(-1!==t.indexOf(x.Left))if(-1!==t.indexOf(x.Full)){const{left:t,top:e,height:i}=$.toLeft({sourceWidth:a});R={left:`${t}px`,top:`${e}px`,height:`${i}px`}}else if(-1!==t.indexOf(x.Enclose)){const{left:t,top:e,height:i,width:o}=$.fromTop();R={left:`${t}px`,top:`${e}px`,height:`${i}px`,width:`${o}px`}}else{const{left:t,top:e}=$.toLeft({center:!0,modifier:o});R={left:`${t}px`,top:`${e}px`}}else if(-1!==t.indexOf(x.Right))if(-1!==t.indexOf(x.Full))R={left:g.left+r.width+"px",top:g.top+"px",height:r.height+"px"};else if(-1!==t.indexOf(x.Enclose))R={left:g.left+"px",top:g.top+"px",height:r.height+"px",width:r.width+"px"};else{const{left:t,top:e}=$.fromRight({center:!0,modifier:o});R={left:`${t}px`,top:`${e}px`}}else R=-1!==t.indexOf(x.Top)?-1!==t.indexOf(x.Full)?{top:g.top+l+"px",left:g.left+"px",width:r.width+"px"}:-1!==t.indexOf(x.Enclose)?{top:g.top+"px",left:g.left+"px",height:r.height+"px",width:r.width+"px"}:{left:y,top:O}:-1!==t.indexOf(x.Bottom)?-1!==t.indexOf(x.Full)?{top:g.top+r.height+"px",left:g.left+"px",width:r.width+"px"}:-1!==t.indexOf(x.Enclose)?{top:g.top+"px",left:g.left+"px",height:r.height+"px",width:r.width+"px"}:{left:b,top:E}:-1!==t.indexOf(x.Full)?{left:g.left+r.width+"px",top:g.top+"px",height:r.height+"px"}:-1!==t.indexOf(x.Enclose)?{left:g.left+r.width+"px",top:g.top+"px",height:r.height+"px",width:r.width+"px"}:{left:u,top:m};return R},O=(t="",o,n="span")=>{const p=document.createElement(n),a=document.createTextNode(t),l={};null!==o&&""!==o&&(l[o]=!0),-1===o.indexOf(x.Full)&&-1===o.indexOf(x.Enclose)?p.appendChild(a):-1===o.indexOf(x.Full)&&-1===o.indexOf(x.Enclose)||p.setAttribute("data-dissection-counter",t);const r=i("ph speccer dissection",l);return e(p,r),p},b=t=>{if(!t)return;const e=t.querySelectorAll("[data-anatomy]");e&&e.forEach((async(t,e)=>{if(!t)return;const i=t.getAttribute("data-anatomy")||"";if(!i||""===i||-1===i.indexOf(x.Outline))return;const n=O(o[e],i);document.body.appendChild(n);const p=await y(i,t,n);l(n,p)}))};const E=(t="",i="",o="span")=>{const n=document.createElement(o);return n.setAttribute("title",t+"px"),n.setAttribute("data-measure",parseInt(t+"",10)+"px"),e(n,`ph speccer measure ${i}`),n},$=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const i=await r(t);if("none"===i.display||"0"===i.opacity||"hidden"===i.visibility)return;await a();const o=t.getBoundingClientRect(),n=o.top+window.pageYOffset,p=o.left+window.pageXOffset;if(-1!==e.indexOf("width"))if(-1!==e.indexOf("bottom")){const t=E(o.width,e);document.body.appendChild(t),l(t,{left:p+"px",top:n+o.height+1+"px",width:o.width+"px"})}else{const t=E(o.width,e);document.body.appendChild(t);const i=t.getBoundingClientRect();l(t,{left:p+"px",top:n-i.height+1+"px",width:o.width+"px"})}else if(-1!==e.indexOf("height"))if(-1!==e.indexOf("right")){const t=E(o.height,e);document.body.appendChild(t),l(t,{left:p+o.width+"px",top:n+"px",height:o.height+"px"})}else{const t=E(o.height,e);document.body.appendChild(t);const i=t.getBoundingClientRect();l(t,{left:p-i.width+"px",top:n+"px",height:o.height+"px"})}};const R=(t,o)=>{const n=document.createElement("div"),p={};null!==o&&""!==o&&(p[o]=!0);const a=i("ph speccer typography",p);return n.innerHTML=t,e(n,a),n};const A=t=>{const e=()=>function(t,e,i){let o;return function(n,...p){const a=i&&!o;o&&clearTimeout(o),o=setTimeout((function(){o=null,i||t.apply(n,p)}),e),a&&t.apply(n,p)}}((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},S=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},B=()=>{const t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(g(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)").forEach((e=>{t.observe(e)}));const e=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&($(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer-measure]").forEach((t=>{e.observe(t)}));const i=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(b(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-anatomy-section]").forEach((t=>{i.observe(t)}))},C=t=>{window.speccer=t},L=t=>{const e=document.currentScript;if(e){const i=e.getAttribute("src");!i||-1===i.indexOf("speccer.js")&&-1===i.indexOf("JaXpOK.js")||(e.hasAttribute("data-manual")?C(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?S(t):e.hasAttribute("data-lazy")?B():S(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||A(t))}};const v=m,T=Object.freeze({__proto__:null,create:O,element:b}),_=Object.freeze({__proto__:null,element:$}),j=Object.freeze({__proto__:null,create:R,element:async t=>{if(!t)return;const e=t.getAttribute("data-speccer-typography"),i=await r(t);if("none"===i.display||"0"===i.opacity||"hidden"===i.visibility)return;t.classList.add("is-specced");const o=await(async t=>{const e=(t=>{const{lineHeight:e,letterSpacing:i,fontFamily:o,fontSize:n,fontStyle:p,fontVariationSettings:a,fontWeight:l}=t;return{lineHeight:e,letterSpacing:i,fontFamily:o,fontSize:n,fontStyle:p,fontVariationSettings:a,fontWeight:l}})(await r(t)),i="normal"!==e.lineHeight?parseInt(e.lineHeight,10)/16+"rem":"normal";return`\nfont-styles: {<ul class="speccer-styles">  <li><span class="property">font-family:</span> ${e.fontFamily};</li>  <li><span class="property">font-size:</span> ${e.fontSize} / ${parseInt(e.fontSize,10)/16}rem;</li>  <li><span class="property">font-weight:</span> ${e.fontWeight};</li>  <li><span class="property">font-variation-settings:</span> ${e.fontVariationSettings};</li>  <li><span class="property">line-height:</span> ${e.lineHeight} / ${i};</li>  <li><span class="property">letter-spacing:</span> ${e.letterSpacing};</li>  <li><span class="property">font-style:</span> ${e.fontStyle};</li></ul>}`})(t),n=R(o,e);document.body.appendChild(n);const a=await(async(t,e,i)=>{const o=e.getBoundingClientRect(),n=p(i),a=i.getBoundingClientRect(),l=await d(e),r=l.left-a.width-n+"px",s=w(h(l.top,a,o))+"px",f=l.left+o.width+n+"px",g=w(h(l.top,a,o))+"px",x=w(c(l.left,a,o))+"px",m=l.top-a.height-n+"px",y=w(c(l.left,a,o))+"px",O=l.top+o.height+n+"px";let b={left:r,top:s};return t&&-1!==t.indexOf(u.Right)?b={left:f,top:g}:t&&-1!==t.indexOf(u.Top)?b={left:x,top:m}:t&&-1!==t.indexOf(u.Bottom)&&(b={left:y,top:O}),b})(e,t,n);l(n,a)}}),z=Object.freeze({__proto__:null,dom:S,lazy:B,manual:C,activate:L}),F=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".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]"),i=document.querySelectorAll("[data-speccer-typography]"),o=document.querySelectorAll("[data-anatomy-section]");t.forEach(v.element),e.forEach(_.element),i.forEach(j.element),o.forEach(T.element)};L(F),t.default=F,t.dissect=T,t.measure=_,t.modes=z,t.spacing=v,t.typography=j,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=speccer.js.map

package/speccer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"speccer.js","sources":["src/lib/node.ts","src/lib/classnames.ts","src/lib/constants.ts","src/lib/css.ts","src/lib/debounce.ts","src/lib/styles.ts","src/lib/position.ts","src/tasks/spec.ts","src/helpers/spacing/position.ts","src/enums/area.ts","src/lib/number.ts","src/tasks/dissect.ts","src/helpers/dissect/styles.ts","src/tasks/measure.ts","src/helpers/typography/position.ts","src/tasks/typography.ts","src/lib/resize.ts","src/browser.ts","src/index.ts","src/helpers/typography/template.ts"],"sourcesContent":["export const after = (el: HTMLElement \| null, newSibling: HTMLElement) =>\n el && el.insertAdjacentElement('afterend', newSibling);\n\nexport const removeAll = (selector: string, el: Document = document) => {\n [].forEach.call(el.querySelectorAll(selector), function (e: HTMLElement) {\n e.remove();\n });\n};\n","/* eslint no-console:0 /\n'use strict';\n\nexport const set = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls \|\| (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.add(cl));\n};\n\nexport const toggle = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls \|\| (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.toggle(cl));\n};\n\nexport const remove = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls \|\| (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.remove(cl));\n};\n\nexport const cx = (cls: string, cls_obj: {}): string =>\n `${cls} ${Object.keys(cls_obj)\n .filter((classname) => cls_obj[classname])\n .join(' ')}`.trim();\n","/ eslint no-console:0 /\n'use strict';\n\nexport const SPECCER_LITERALS = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];\n\nexport const SPECCER_TAGS_TO_AVOID = ['TR', 'TH', 'TD', 'TBODY', 'THEAD', 'TFOOT'];\n\nexport const SPECCER_DEFAULT_PIN_SPACE = 48;\n","/ eslint no-console:0 /\n'use strict';\nimport { SPECCER_DEFAULT_PIN_SPACE } from './constants';\nimport { SpacingCSSPropertiesType, TypographyCSSPropertiesType } from '../types/css';\n\nexport const getNumberValue = (value: string): number => parseInt(value, 10);\n\nexport const normalizeNumberValue = (value: string \| number): number => {\n const _value = parseFloat(value + '');\n\n return (_value >= 0 && _value < 1) \|\| (_value <= 0 && _value > -1) ? 0 : _value;\n};\n\nexport const getClassNameFromCSSProperty = (property: string) => {\n if (property.indexOf('Top') !== -1) {\n return property.replace('Top', ' top');\n } else if (property.indexOf('Right') !== -1) {\n return property.replace('Right', ' right');\n } else if (property.indexOf('Bottom') !== -1) {\n return property.replace('Bottom', ' bottom');\n } else if (property.indexOf('Left') !== -1) {\n return property.replace('Left', ' left');\n }\n\n return '';\n};\n\nexport const getSpacing = (style: SpacingCSSPropertiesType): SpacingCSSPropertiesType => {\n const { marginTop, marginBottom, marginLeft, marginRight, paddingTop, paddingBottom, paddingLeft, paddingRight } =\n style;\n\n return {\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight\n };\n};\n\nexport const getTypography = (style: TypographyCSSPropertiesType): TypographyCSSPropertiesType => {\n const { lineHeight, letterSpacing, fontFamily, fontSize, fontStyle, fontVariationSettings, fontWeight } = style;\n\n return {\n lineHeight,\n letterSpacing,\n fontFamily,\n fontSize,\n fontStyle,\n fontVariationSettings,\n fontWeight\n };\n};\n\nexport const pinSpace = (el: HTMLElement): number =>\n getNumberValue(getComputedStyle(el).getPropertyValue('--ph-speccer-pin-space')) \|\| SPECCER_DEFAULT_PIN_SPACE;\n","/ eslint no-console:0 /\n'use strict';\n\nexport const waitForFrame = () => new Promise(requestAnimationFrame);\n\nconst debounce = function (func: Function, wait: number, immediate?: boolean): Function {\n let timeout: null \| ReturnType<typeof setTimeout>;\n\n return function (this: any) {\n const context = this;\n const args = arguments;\n const later = function () {\n timeout = null;\n\n if (!immediate) func.apply(context, args);\n };\n const callNow = immediate && !timeout;\n\n if (timeout) {\n clearTimeout(timeout);\n }\n\n timeout = setTimeout(later, wait);\n\n if (callNow) func.apply(context, args);\n };\n};\n\nexport default debounce;\n","/ eslint no-console:0 /\n'use strict';\nimport { waitForFrame } from './debounce';\n\nexport const add = async (el: HTMLElement, styles: [] \| object) => {\n if (\n !el \|\|\n !styles \|\|\n typeof styles === 'string' \|\|\n typeof styles === 'number' \|\|\n typeof styles === 'boolean' \|\|\n (Array.isArray(styles) && styles.length === 0) \|\|\n (Object.keys(styles).length === 0 && styles.constructor === Object)\n ) {\n return;\n }\n\n await waitForFrame();\n\n if (Array.isArray(styles)) {\n styles.forEach((style: { key: string; value: string }) => (el.style[style.key] = style.value));\n } else {\n Object.keys(styles).forEach((key) => (el.style[key] = styles[key]));\n }\n};\n\nexport const get = async (el: HTMLElement): Promise<CSSStyleDeclaration> => {\n await waitForFrame();\n\n return getComputedStyle(el, null);\n};\n","import { waitForFrame } from './debounce';\n\nexport const get_horizontal_center_of_els = (modifier: number, startRect: DOMRect, targetRect: DOMRect): number =>\n modifier - startRect.width / 2 + targetRect.width / 2;\n\nexport const get_vertical_center_of_els = (modifier: number, startRect: DOMRect, targetRect: DOMRect): number =>\n modifier - startRect.height / 2 + targetRect.height / 2;\n\nexport const offset = async (targetEl: HTMLElement): Promise<{ left: number; top: number }> => {\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n return {\n top: _el_offset_top,\n left: _el_offset_left\n };\n};\n","/ eslint no-console:0 /\n'use strict';\n\nimport as classnames from '../lib/classnames';\nimport * as css from '../lib/css';\nimport * as styles from '../lib/styles';\nimport * as helpers from '../helpers/spacing';\n\nexport const create = (text: string \| number = '', tag = 'span') => {\n const _el = document.createElement(tag);\n const _text_content = document.createTextNode(text + '');\n\n _el.appendChild(_text_content);\n _el.setAttribute('title', text + 'px');\n classnames.set(_el, 'ph speccer spacing');\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _target_styles = await styles.get(targetEl);\n\n if (_target_styles.display === 'none' \|\| _target_styles.opacity === '0' \|\| _target_styles.visibility === 'hidden') {\n return;\n }\n\n const _target_spacing_styles = css.getSpacing(_target_styles);\n const _target_pruned_spacing_styles = Object.keys(_target_spacing_styles).filter((property) => {\n const _value = _target_spacing_styles[property];\n\n return _value !== '0px';\n });\n\n if (_target_pruned_spacing_styles.length === 0) return;\n\n _target_pruned_spacing_styles.forEach(async (property) => {\n const _value = css.getNumberValue(_target_spacing_styles[property]);\n const _speccer_el = create(_value);\n const _class_name = css.getClassNameFromCSSProperty(property);\n\n classnames.set(_speccer_el, _class_name);\n document.body.appendChild(_speccer_el);\n\n targetEl.classList.add('is-specced');\n await helpers.position(property, _value, _speccer_el, targetEl);\n });\n};\n","import * as styles from '../../lib/styles';\nimport { offset } from '../../lib/position';\nimport { waitForFrame } from '../../lib/debounce';\n\nexport const position = async (property: string, value: number, spacingEl: HTMLElement, targetEl: HTMLElement) => {\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _target_offset = await offset(targetEl);\n\n if (property === 'marginTop') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top - value + 'px'\n });\n }\n\n if (property === 'marginRight') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + parseInt(_target_rect.width + '', 10) + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'marginBottom') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + parseInt(_target_rect.height + '', 10) + 'px'\n });\n }\n\n if (property === 'marginLeft') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left - value + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingTop') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingBottom') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + (parseInt(_target_rect.height + '', 10) - value) + 'px'\n });\n }\n\n if (property === 'paddingRight') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + (parseInt(_target_rect.width + '', 10) - value) + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingLeft') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + 'px',\n top: _target_offset.top + 'px'\n });\n }\n};\n","export enum SpeccerAreaEnum {\n Empty = '',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n\nexport enum DissectAreaEnum {\n Outline = 'outline',\n Enclose = 'enclose',\n Full = 'full',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n","/* eslint no-console:0 /\n'use strict';\n\nexport const decimal = (number: string \| number, decimals = 3): string => parseFloat(number + '').toFixed(decimals);\n","/ eslint no-console:0 /\n'use strict';\n\nimport as styles from '../lib/styles';\nimport * as classnames from '../lib/classnames';\nimport { DissectAreaEnum } from '../enums/area';\nimport * as helpers from '../helpers/dissect';\nimport { SPECCER_LITERALS } from '../lib/constants';\n\nexport const create = (textContent = '', area: string, n = 'span') => {\n const _el = document.createElement(n);\n const _text_node = document.createTextNode(textContent);\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n if (area.indexOf(DissectAreaEnum.Full) === -1 && area.indexOf(DissectAreaEnum.Enclose) === -1) {\n _el.appendChild(_text_node);\n } else if (area.indexOf(DissectAreaEnum.Full) !== -1 \|\| area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _el.setAttribute('data-dissection-counter', textContent);\n }\n\n const _class_names = classnames.cx('ph speccer dissection', _extra_class_names);\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = (sectionEl: HTMLElement) => {\n if (!sectionEl) return;\n\n const _dissection_els = sectionEl.querySelectorAll('[data-anatomy]');\n\n if (_dissection_els) {\n _dissection_els.forEach(async (targetEl: HTMLElement, targetIndex) => {\n if (!targetEl) return;\n\n const _area: string \| null = targetEl.getAttribute('data-anatomy') \|\| '';\n\n if (!_area \|\| _area === '') return;\n\n const _dissection_el = create(SPECCER_LITERALS[targetIndex], _area);\n\n document.body.appendChild(_dissection_el);\n\n const _dissection_styles = await helpers.styles(_area, targetEl, _dissection_el);\n\n styles.add(_dissection_el, _dissection_styles);\n });\n }\n};\n","import * as css from '../../lib/css';\nimport * as number from '../../lib/number';\nimport { get_horizontal_center_of_els, get_vertical_center_of_els, offset } from '../../lib/position';\nimport { DissectAreaEnum } from '../../enums/area';\n\nexport const styles = async (area: string, targetEl: HTMLElement, dissectionEl: HTMLElement) => {\n const _target_rect = targetEl.getBoundingClientRect();\n const _dissection_el_rect = dissectionEl.getBoundingClientRect();\n const SPECCER_PIN_SPACE = css.pinSpace(dissectionEl);\n const _el_offset = await offset(targetEl);\n const _left_layout_position_left = _el_offset.left - _dissection_el_rect.width - SPECCER_PIN_SPACE + 'px';\n const _left_layout_position_top =\n number.decimal(get_vertical_center_of_els(_el_offset.top, _dissection_el_rect, _target_rect)) + 'px';\n const _right_layout_position_left = _el_offset.left + _target_rect.width + SPECCER_PIN_SPACE + 'px';\n const _right_layout_position_top =\n number.decimal(get_vertical_center_of_els(_el_offset.top, _dissection_el_rect, _target_rect)) + 'px';\n const _top_layout_position_left =\n number.decimal(get_horizontal_center_of_els(_el_offset.left, _dissection_el_rect, _target_rect)) + 'px';\n const _top_layout_position_top = _el_offset.top - _dissection_el_rect.height - SPECCER_PIN_SPACE + 'px';\n const _bottom_layout_position_left =\n number.decimal(get_horizontal_center_of_els(_el_offset.left, _dissection_el_rect, _target_rect)) + 'px';\n const _bottom_layout_position_top = _el_offset.top + _target_rect.height + SPECCER_PIN_SPACE + 'px';\n\n let _dissection_styles = {};\n\n if (area.indexOf(DissectAreaEnum.Outline) !== -1) {\n if (area.indexOf(DissectAreaEnum.Left) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset.left - 8 + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset.left - 1 + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Right) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + _target_rect.width + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + -1 + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _right_layout_position_left,\n top: _right_layout_position_top\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Top) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + -8 + 'px',\n left: _el_offset.left + -1 + 'px',\n width: _target_rect.width + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + -1 + 'px',\n left: _el_offset.left + -1 + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _top_layout_position_left,\n top: _top_layout_position_top\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Bottom) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + _target_rect.height + 'px',\n left: _el_offset.left + -1 + 'px',\n width: _target_rect.width + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + -1 + 'px',\n left: _el_offset.left + -1 + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _bottom_layout_position_left,\n top: _bottom_layout_position_top\n };\n }\n } else {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + _target_rect.width + 'px',\n top: _el_offset.top + 'px',\n height: _target_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + _target_rect.width + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n }\n }\n } else {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset.left - 8 + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset.left - 1 + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n }\n }\n\n return _dissection_styles;\n};\n","/* eslint no-console:0 /\n'use strict';\n\nimport as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport { waitForFrame } from '../lib/debounce';\n\nconst create = (text: string \| number = '', area: string \| null = '', tag = 'span') => {\n const _el = document.createElement(tag);\n\n _el.setAttribute('title', text + 'px');\n _el.setAttribute('data-measure', parseInt(text + '', 10) + 'px');\n\n classnames.set(_el, `ph speccer measure ${area}`);\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _area: string \| null = targetEl.getAttribute('data-speccer-measure');\n\n if (_area === '' \|\| !_area) {\n return;\n }\n\n const _target_styles = await styles.get(targetEl);\n\n if (_target_styles.display === 'none' \|\| _target_styles.opacity === '0' \|\| _target_styles.visibility === 'hidden') {\n return;\n }\n\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n if (_area.indexOf('width') !== -1) {\n if (_area.indexOf('bottom') !== -1) {\n const _measure_el = create(_target_rect.width, _area);\n\n document.body.appendChild(_measure_el);\n\n styles.add(_measure_el, {\n left: _el_offset_left + 'px',\n top: _el_offset_top + _target_rect.height + 1 + 'px',\n width: _target_rect.width + 'px'\n });\n } else {\n const _measure_el = create(_target_rect.width, _area);\n\n document.body.appendChild(_measure_el);\n\n const _measure_rect = _measure_el.getBoundingClientRect();\n\n styles.add(_measure_el, {\n left: _el_offset_left + 'px',\n top: _el_offset_top - _measure_rect.height + 1 + 'px',\n width: _target_rect.width + 'px'\n });\n }\n } else if (_area.indexOf('height') !== -1) {\n if (_area.indexOf('right') !== -1) {\n const _measure_el = create(_target_rect.height, _area);\n\n document.body.appendChild(_measure_el);\n\n styles.add(_measure_el, {\n left: _el_offset_left + _target_rect.width + 'px',\n top: _el_offset_top + 'px',\n height: _target_rect.height + 'px'\n });\n } else {\n const _measure_el = create(_target_rect.height, _area);\n\n document.body.appendChild(_measure_el);\n\n const _measure_rect = _measure_el.getBoundingClientRect();\n\n styles.add(_measure_el, {\n left: _el_offset_left - _measure_rect.width + 'px',\n top: _el_offset_top + 'px',\n height: _target_rect.height + 'px'\n });\n }\n }\n};\n","import * as css from '../../lib/css';\nimport * as number from '../../lib/number';\nimport { get_horizontal_center_of_els, get_vertical_center_of_els, offset } from '../../lib/position';\nimport { SpeccerAreaEnum } from '../../enums/area';\n\nexport const position = async (area: string \| null, targetEl: HTMLElement, speccerEl: HTMLElement) => {\n const _target_rect = targetEl.getBoundingClientRect();\n const SPECCER_PIN_SPACE = css.pinSpace(speccerEl);\n const _speccer_el_rect = speccerEl.getBoundingClientRect();\n const _el_offset = await offset(targetEl);\n const _left_layout_position_left = _el_offset.left - _speccer_el_rect.width - SPECCER_PIN_SPACE + 'px';\n const _left_layout_position_top =\n number.decimal(get_vertical_center_of_els(_el_offset.top, _speccer_el_rect, _target_rect)) + 'px';\n const _right_layout_position_left = _el_offset.left + _target_rect.width + SPECCER_PIN_SPACE + 'px';\n const _right_layout_position_top =\n number.decimal(get_vertical_center_of_els(_el_offset.top, _speccer_el_rect, _target_rect)) + 'px';\n const _top_layout_position_left =\n number.decimal(get_horizontal_center_of_els(_el_offset.left, _speccer_el_rect, _target_rect)) + 'px';\n const _top_layout_position_top = _el_offset.top - _speccer_el_rect.height - SPECCER_PIN_SPACE + 'px';\n const _bottom_layout_position_left =\n number.decimal(get_horizontal_center_of_els(_el_offset.left, _speccer_el_rect, _target_rect)) + 'px';\n const _bottom_layout_position_top = _el_offset.top + _target_rect.height + SPECCER_PIN_SPACE + 'px';\n\n let _position = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n\n if (area && area.indexOf(SpeccerAreaEnum.Right) !== -1) {\n _position = {\n left: _right_layout_position_left,\n top: _right_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Top) !== -1) {\n _position = {\n left: _top_layout_position_left,\n top: _top_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Bottom) !== -1) {\n _position = {\n left: _bottom_layout_position_left,\n top: _bottom_layout_position_top\n };\n }\n\n return _position;\n};\n","/* eslint no-console:0 /\n'use strict';\n\nimport as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport * as helpers from '../helpers/typography';\n\nexport const create = (html: string, area: string \| null) => {\n const _el = document.createElement('div');\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n const _class_names = classnames.cx('ph speccer typography', _extra_class_names);\n\n _el.innerHTML = html;\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _area: string \| null = targetEl.getAttribute('data-speccer-typography');\n const _target_styles = await styles.get(targetEl);\n\n if (_target_styles.display === 'none' \|\| _target_styles.opacity === '0' \|\| _target_styles.visibility === 'hidden') {\n return;\n }\n\n targetEl.classList.add('is-specced');\n\n const _html = await helpers.template(targetEl);\n const _speccer_el = create(_html, _area);\n\n document.body.appendChild(_speccer_el);\n\n const _position = await helpers.position(_area, targetEl, _speccer_el);\n\n styles.add(_speccer_el, _position);\n};\n","/* eslint no-console:0 /\n'use strict';\n\nimport debounce from './debounce';\n\nexport const activate = (speccer: Function) => {\n const speccerEventFunc = () =>\n debounce(() => {\n speccer();\n }, 300);\n\n window.removeEventListener('resize', speccerEventFunc);\n window.addEventListener('resize', speccerEventFunc);\n};\n","/ eslint no-console:0 /\n'use strict';\n\nimport as resize from './lib/resize';\nimport * as spec from './tasks/spec';\nimport * as measure from './tasks/measure';\nimport * as dissect from './tasks/dissect';\n\nexport const dom = (speccer: Function) => {\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n speccer();\n });\n } else {\n // `DOMContentLoaded` already fired\n speccer();\n }\n};\n\nexport const lazy = () => {\n const _spec_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el: IntersectionObserverEntry) => {\n if (el.intersectionRatio > 0) {\n spec.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document\n .querySelectorAll('[data-speccer],[data-speccer] :not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)')\n .forEach((el) => {\n _spec_observer.observe(el);\n });\n\n const _measure_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n if (el.intersectionRatio > 0) {\n measure.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-speccer-measure]').forEach((el) => {\n _measure_observer.observe(el);\n });\n\n const _dissect_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n if (el.intersectionRatio > 0) {\n dissect.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-anatomy-section]').forEach((el) => {\n _dissect_observer.observe(el);\n });\n};\n\nexport const manual = (speccer: Function) => {\n window.speccer = speccer;\n};\n\nexport const activate = (speccer: Function) => {\n const _script = document.currentScript;\n\n if (_script) {\n const _speccer_script_src = _script.getAttribute('src');\n\n if (\n _speccer_script_src &&\n (_speccer_script_src.indexOf('speccer.js') !== -1 \|\|\n // for codepen\n _speccer_script_src.indexOf('JaXpOK.js') !== -1)\n ) {\n if (_script.hasAttribute('data-manual')) {\n manual(speccer);\n } else if (_script.hasAttribute('data-instant')) {\n speccer();\n } else if (_script.hasAttribute('data-dom')) {\n dom(speccer);\n } else if (_script.hasAttribute('data-lazy')) {\n lazy();\n } else {\n dom(speccer);\n }\n\n if (!_script.hasAttribute('data-manual') && !_script.hasAttribute('data-lazy')) {\n resize.activate(speccer);\n }\n }\n }\n};\n","/ eslint no-console:0 /\n'use strict';\n\nimport './interfaces/global';\nimport as node from './lib/node';\nimport * as __spacing from './tasks/spec';\nimport * as __dissect from './tasks/dissect';\nimport * as __measure from './tasks/measure';\nimport * as __typography from './tasks/typography';\nimport * as browser from './browser';\n\nexport const spacing = __spacing;\n\nexport const dissect = __dissect;\n\nexport const measure = __measure;\n\nexport const typography = __typography;\n\nexport const modes = browser;\n\nconst speccer = () => {\n node.removeAll('.speccer');\n\n const _els_to_be_specced = document.querySelectorAll(\n '[data-speccer],[data-speccer] :not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)'\n );\n const _els_to_be_measured = document.querySelectorAll('[data-speccer-measure]');\n const _els_to_be_typography_specced = document.querySelectorAll('[data-speccer-typography]');\n const _els_to_be_dissected = document.querySelectorAll('[data-anatomy-section]');\n\n _els_to_be_specced.forEach(spacing.element);\n _els_to_be_measured.forEach(measure.element);\n _els_to_be_typography_specced.forEach(typography.element);\n _els_to_be_dissected.forEach(dissect.element);\n};\n\nexport default speccer;\n\nbrowser.activate(speccer);\n","import as css from '../../lib/css';\nimport * as styles from '../../lib/styles';\n\nexport const template = async (targetEl: HTMLElement): Promise<string> => {\n const _target_styles = await styles.get(targetEl);\n const _styles = css.getTypography(_target_styles);\n const _line_height = _styles['lineHeight'] !== 'normal' ? parseInt(_styles['lineHeight'], 10) / 16 + 'rem' : 'normal';\n\n return (\n `\n` +\n 'font-styles: {' +\n '<ul class=\"speccer-styles\">' +\n ` <li><span class=\"property\">font-family:</span> ${_styles['fontFamily']};</li>` +\n ` <li><span class=\"property\">font-size:</span> ${_styles['fontSize']} / ${\n parseInt(_styles['fontSize'], 10) / 16\n }rem;</li>` +\n ` <li><span class=\"property\">font-weight:</span> ${_styles['fontWeight']};</li>` +\n ` <li><span class=\"property\">font-variation-settings:</span> ${_styles['fontVariationSettings']};</li>` +\n ` <li><span class=\"property\">line-height:</span> ${_styles['lineHeight']} / ${_line_height};</li>` +\n ` <li><span class=\"property\">letter-spacing:</span> ${_styles['letterSpacing']};</li>` +\n ` <li><span class=\"property\">font-style:</span> ${_styles['fontStyle']};</li>` +\n '</ul>' +\n '}'\n );\n};\n"],"names":["set","el","cls","avoid","length","trim","split","filter","cl","forEach","classList","add","cx","cls_obj","Object","keys","classname","join","SPECCER_LITERALS","getNumberValue","value","parseInt","pinSpace","getComputedStyle","getPropertyValue","waitForFrame","Promise","requestAnimationFrame","async","styles","Array","isArray","constructor","style","key","get","get_horizontal_center_of_els","modifier","startRect","targetRect","width","get_vertical_center_of_els","height","offset","targetEl","_target_rect","getBoundingClientRect","top","window","pageYOffset","left","pageXOffset","create","text","tag","_el","document","createElement","_text_content","createTextNode","appendChild","setAttribute","classnames.set","element","_target_styles","styles.get","display","opacity","visibility","_target_spacing_styles","marginTop","marginBottom","marginLeft","marginRight","paddingTop","paddingBottom","paddingLeft","paddingRight","css.getSpacing","_target_pruned_spacing_styles","property","_value","css.getNumberValue","_speccer_el","_class_name","indexOf","replace","css.getClassNameFromCSSProperty","body","spacingEl","_target_offset","styles.add","helpers.position","SpeccerAreaEnum","DissectAreaEnum","decimal","number","decimals","parseFloat","toFixed","textContent","area","n","_text_node","_extra_class_names","Full","Enclose","_class_names","classnames.cx","sectionEl","_dissection_els","querySelectorAll","targetIndex","_area","getAttribute","_dissection_el","_dissection_styles","dissectionEl","_dissection_el_rect","SPECCER_PIN_SPACE","css.pinSpace","_el_offset","_left_layout_position_left","_left_layout_position_top","number.decimal","_right_layout_position_left","_right_layout_position_top","_top_layout_position_left","_top_layout_position_top","_bottom_layout_position_left","_bottom_layout_position_top","Outline","Left","Right","Top","Bottom","helpers.styles","_el_offset_top","_el_offset_left","_measure_el","_measure_rect","html","innerHTML","activate","speccer","speccerEventFunc","func","wait","immediate","timeout","context","this","args","arguments","later","apply","callNow","clearTimeout","setTimeout","debounce","removeEventListener","addEventListener","dom","readyState","lazy","_spec_observer","IntersectionObserver","els","observer","intersectionRatio","spec.element","target","unobserve","observe","_measure_observer","measure.element","_dissect_observer","dissect.element","manual","_script","currentScript","_speccer_script_src","hasAttribute","resize.activate","spacing","__spacing","dissect","measure","typography","_html","_styles","lineHeight","letterSpacing","fontFamily","fontSize","fontStyle","fontVariationSettings","fontWeight","css.getTypography","_line_height","helpers.template","_position","speccerEl","_speccer_el_rect","modes","selector","call","e","remove","node.removeAll","_els_to_be_specced","_els_to_be_measured","_els_to_be_typography_specced","_els_to_be_dissected"],"mappings":"+OAGO,MCAMA,EAAM,CAACC,EAAiBC,EAAaC,EAAQ,UACnDF,KAEAC,GAAQA,GAAsB,IAAfA,EAAIE,QAExBF,EACGG,OACAC,MAAM,KACNC,QAAQC,GAAOA,IAAOL,IACtBM,SAASD,GAAOP,EAAGS,UAAUC,IAAIH,OA2BzBI,EAAK,CAACV,EAAaW,IAC9B,GAAGX,KAAOY,OAAOC,KAAKF,GACnBN,QAAQS,GAAcH,EAAQG,KAC9BC,KAAK,OAAOZ,OCvCJa,EAAmB,IAAI,8BCEvBC,EAAkBC,GAA0BC,SAASD,EAAO,IAoD5DE,EAAYrB,GACvBkB,EAAeI,iBAAiBtB,GAAIuB,iBAAiB,4BDnDd,GEJ5BC,EAAe,IAAM,IAAIC,QAAQC,uBCCjChB,EAAMiB,MAAO3B,EAAiB4B,MAEtC5B,IACA4B,GACiB,iBAAXA,GACW,iBAAXA,GACW,kBAAXA,GACNC,MAAMC,QAAQF,IAA6B,IAAlBA,EAAOzB,QACD,IAA/BU,OAAOC,KAAKc,GAAQzB,QAAgByB,EAAOG,cAAgBlB,eAKxDW,IAEFK,MAAMC,QAAQF,GAChBA,EAAOpB,SAASwB,GAA2ChC,EAAGgC,MAAMA,EAAMC,KAAOD,EAAMb,QAEvFN,OAAOC,KAAKc,GAAQpB,SAASyB,GAASjC,EAAGgC,MAAMC,GAAOL,EAAOK,OAIpDC,EAAMP,MAAO3B,UAClBwB,IAECF,iBAAiBtB,EAAI,OC3BjBmC,EAA+B,CAACC,EAAkBC,EAAoBC,IACjFF,EAAWC,EAAUE,MAAQ,EAAID,EAAWC,MAAQ,EAEzCC,EAA6B,CAACJ,EAAkBC,EAAoBC,IAC/EF,EAAWC,EAAUI,OAAS,EAAIH,EAAWG,OAAS,EAE3CC,EAASf,MAAOgB,UACrBnB,IAEN,MAAMoB,EAAeD,EAASE,wBAI9B,MAAO,CACLC,IAJqBF,EAAaE,IAAMC,OAAOC,YAK/CC,KAJsBL,EAAaK,KAAOF,OAAOG,cCLxCC,EAAS,CAACC,EAAwB,GAAIC,EAAM,UACvD,MAAMC,EAAMC,SAASC,cAAcH,GAC7BI,EAAgBF,SAASG,eAAeN,EAAO,IAMrD,OAJAE,EAAIK,YAAYF,GAChBH,EAAIM,aAAa,QAASR,EAAO,MACjCS,EAAeP,EAAK,sBAEbA,GAGIQ,EAAUnC,MAAOgB,IAC5B,IAAKA,EAAU,OAEf,MAAMoB,QAAuBC,EAAWrB,GAExC,GAA+B,SAA3BoB,EAAeE,SAAiD,MAA3BF,EAAeG,SAAiD,WAA9BH,EAAeI,WACxF,OAGF,MAAMC,EJDkB,CAACpC,IACzB,MAAMqC,UAAEA,EAASC,aAAEA,EAAYC,WAAEA,EAAUC,YAAEA,EAAWC,WAAEA,EAAUC,cAAEA,EAAaC,YAAEA,EAAWC,aAAEA,GAChG5C,EAEF,MAAO,CACLqC,UAAAA,EACAC,aAAAA,EACAC,WAAAA,EACAC,YAAAA,EACAC,WAAAA,EACAC,cAAAA,EACAC,YAAAA,EACAC,aAAAA,IIX6BC,CAAed,GACxCe,EAAgCjE,OAAOC,KAAKsD,GAAwB9D,QAAQyE,GAG9D,QAFHX,EAAuBW,KAKK,IAAzCD,EAA8B3E,QAElC2E,EAA8BtE,SAAQmB,MAAOoD,IAC3C,MAAMC,EAASC,EAAmBb,EAAuBW,IACnDG,EAAc/B,EAAO6B,GACrBG,EJ3BiC,CAACJ,IACT,IAA7BA,EAASK,QAAQ,OACZL,EAASM,QAAQ,MAAO,SACS,IAA/BN,EAASK,QAAQ,SACnBL,EAASM,QAAQ,QAAS,WACQ,IAAhCN,EAASK,QAAQ,UACnBL,EAASM,QAAQ,SAAU,YACK,IAA9BN,EAASK,QAAQ,QACnBL,EAASM,QAAQ,OAAQ,SAG3B,GIgBeC,CAAgCP,GAEpDlB,EAAeqB,EAAaC,GAC5B5B,SAASgC,KAAK5B,YAAYuB,GAE1BvC,EAASlC,UAAUC,IAAI,mBCzCHiB,OAAOoD,EAAkB5D,EAAeqE,EAAwB7C,WAChFnB,IAEN,MAAMoB,EAAeD,EAASE,wBACxB4C,QAAuB/C,EAAOC,GAEnB,cAAboC,GACFW,EAAWF,EAAW,CACpB/C,OAAQ,GAAGtB,MACXoB,MAAOK,EAAaL,MAAQ,KAC5BU,KAAMwC,EAAexC,KAAO,KAC5BH,IAAK2C,EAAe3C,IAAM3B,EAAQ,OAIrB,gBAAb4D,GACFW,EAAWF,EAAW,CACpB/C,OAAQG,EAAaH,OAAS,KAC9BF,MAAO,GAAGpB,MACV8B,KAAMwC,EAAexC,KAAO7B,SAASwB,EAAaL,MAAQ,GAAI,IAAM,KACpEO,IAAK2C,EAAe3C,IAAM,OAIb,iBAAbiC,GACFW,EAAWF,EAAW,CACpB/C,OAAQ,GAAGtB,MACXoB,MAAOK,EAAaL,MAAQ,KAC5BU,KAAMwC,EAAexC,KAAO,KAC5BH,IAAK2C,EAAe3C,IAAM1B,SAASwB,EAAaH,OAAS,GAAI,IAAM,OAItD,eAAbsC,GACFW,EAAWF,EAAW,CACpB/C,OAAQG,EAAaH,OAAS,KAC9BF,MAAO,GAAGpB,MACV8B,KAAMwC,EAAexC,KAAO9B,EAAQ,KACpC2B,IAAK2C,EAAe3C,IAAM,OAIb,eAAbiC,GACFW,EAAWF,EAAW,CACpB/C,OAAQ,GAAGtB,MACXoB,MAAOK,EAAaL,MAAQ,KAC5BU,KAAMwC,EAAexC,KAAO,KAC5BH,IAAK2C,EAAe3C,IAAM,OAIb,kBAAbiC,GACFW,EAAWF,EAAW,CACpB/C,OAAQ,GAAGtB,MACXoB,MAAOK,EAAaL,MAAQ,KAC5BU,KAAMwC,EAAexC,KAAO,KAC5BH,IAAK2C,EAAe3C,KAAO1B,SAASwB,EAAaH,OAAS,GAAI,IAAMtB,GAAS,OAIhE,iBAAb4D,GACFW,EAAWF,EAAW,CACpB/C,OAAQG,EAAaH,OAAS,KAC9BF,MAAO,GAAGpB,MACV8B,KAAMwC,EAAexC,MAAQ7B,SAASwB,EAAaL,MAAQ,GAAI,IAAMpB,GAAS,KAC9E2B,IAAK2C,EAAe3C,IAAM,OAIb,gBAAbiC,GACFW,EAAWF,EAAW,CACpB/C,OAAQG,EAAaH,OAAS,KAC9BF,MAAO,GAAGpB,MACV8B,KAAMwC,EAAexC,KAAO,KAC5BH,IAAK2C,EAAe3C,IAAM,QDhCtB6C,CAAiBZ,EAAUC,EAAQE,EAAavC,WE9C9CiD,EAQAC,wDARZ,SAAYD,GACVA,WACAA,cACAA,gBACAA,kBACAA,YALF,CAAYA,IAAAA,OAQZ,SAAYC,GACVA,oBACAA,oBACAA,cACAA,cACAA,gBACAA,kBACAA,YAPF,CAAYA,IAAAA,OCLL,MAAMC,EAAU,CAACC,EAAyBC,EAAW,IAAcC,WAAWF,EAAS,IAAIG,QAAQF,GCM7F7C,EAAS,CAACgD,EAAc,GAAIC,EAAcC,EAAI,UACzD,MAAM/C,EAAMC,SAASC,cAAc6C,GAC7BC,EAAa/C,SAASG,eAAeyC,GACrCI,EAAqB,GAEd,OAATH,GAA0B,KAATA,IACnBG,EAAmBH,IAAQ,IAGe,IAAxCA,EAAKhB,QAAQS,EAAgBW,QAA2D,IAA3CJ,EAAKhB,QAAQS,EAAgBY,SAC5EnD,EAAIK,YAAY2C,IACiC,IAAxCF,EAAKhB,QAAQS,EAAgBW,QAA2D,IAA3CJ,EAAKhB,QAAQS,EAAgBY,UACnFnD,EAAIM,aAAa,0BAA2BuC,GAG9C,MAAMO,EAAeC,EAAc,wBAAyBJ,GAI5D,OAFA1C,EAAeP,EAAKoD,GAEbpD,GAGIQ,EAAW8C,IACtB,IAAKA,EAAW,OAEhB,MAAMC,EAAkBD,EAAUE,iBAAiB,kBAE/CD,GACFA,EAAgBrG,SAAQmB,MAAOgB,EAAuBoE,KACpD,IAAKpE,EAAU,OAEf,MAAMqE,EAAuBrE,EAASsE,aAAa,iBAAmB,GAEtE,IAAKD,GAAmB,KAAVA,EAAc,OAE5B,MAAME,EAAiB/D,EAAOlC,EAAiB8F,GAAcC,GAE7DzD,SAASgC,KAAK5B,YAAYuD,GAE1B,MAAMC,OC3CUxF,OAAOyE,EAAczD,EAAuByE,KAChE,MAAMxE,EAAeD,EAASE,wBACxBwE,EAAsBD,EAAavE,wBACnCyE,EAAoBC,EAAaH,GACjCI,QAAmB9E,EAAOC,GAC1B8E,EAA6BD,EAAWvE,KAAOoE,EAAoB9E,MAAQ+E,EAAoB,KAC/FI,EACJC,EAAenF,EAA2BgF,EAAW1E,IAAKuE,EAAqBzE,IAAiB,KAC5FgF,EAA8BJ,EAAWvE,KAAOL,EAAaL,MAAQ+E,EAAoB,KACzFO,EACJF,EAAenF,EAA2BgF,EAAW1E,IAAKuE,EAAqBzE,IAAiB,KAC5FkF,EACJH,EAAexF,EAA6BqF,EAAWvE,KAAMoE,EAAqBzE,IAAiB,KAC/FmF,EAA2BP,EAAW1E,IAAMuE,EAAoB5E,OAAS6E,EAAoB,KAC7FU,EACJL,EAAexF,EAA6BqF,EAAWvE,KAAMoE,EAAqBzE,IAAiB,KAC/FqF,EAA8BT,EAAW1E,IAAMF,EAAaH,OAAS6E,EAAoB,KAE/F,IAAIH,EAAqB,GA8HzB,OAzHMA,GAHyC,IAA3Cf,EAAKhB,QAAQS,EAAgBqC,UACa,IAAxC9B,EAAKhB,QAAQS,EAAgBsC,OACa,IAAxC/B,EAAKhB,QAAQS,EAAgBW,MACV,CACnBvD,KAAMuE,EAAWvE,KAAO,EAAI,KAC5BH,IAAK0E,EAAW1E,KAAO,EAAI,KAC3BL,OAAQG,EAAaH,OAAS,OAEoB,IAA3C2D,EAAKhB,QAAQS,EAAgBY,SACjB,CACnBxD,KAAMuE,EAAWvE,KAAO,EAAI,KAC5BH,IAAK0E,EAAW1E,KAAO,EAAI,KAC3BL,OAAQG,EAAaH,OAAS,KAC9BF,MAAOK,EAAaL,MAAQ,MAGT,CACnBU,KAAMwE,EACN3E,IAAK4E,IAGyC,IAAzCtB,EAAKhB,QAAQS,EAAgBuC,QACM,IAAxChC,EAAKhB,QAAQS,EAAgBW,MACV,CACnBvD,KAAMuE,EAAWvE,KAAOL,EAAaL,MAAQ,KAC7CO,IAAK0E,EAAW1E,KAAO,EAAI,KAC3BL,OAAQG,EAAaH,OAAS,OAEoB,IAA3C2D,EAAKhB,QAAQS,EAAgBY,SACjB,CACnBxD,KAAMuE,EAAWvE,MAAQ,EAAI,KAC7BH,IAAK0E,EAAW1E,KAAO,EAAI,KAC3BL,OAAQG,EAAaH,OAAS,KAC9BF,MAAOK,EAAaL,MAAQ,MAGT,CACnBU,KAAM2E,EACN9E,IAAK+E,IAGuC,IAAvCzB,EAAKhB,QAAQS,EAAgBwC,MACM,IAAxCjC,EAAKhB,QAAQS,EAAgBW,MACV,CACnB1D,IAAK0E,EAAW1E,KAAO,EAAI,KAC3BG,KAAMuE,EAAWvE,MAAQ,EAAI,KAC7BV,MAAOK,EAAaL,MAAQ,OAEsB,IAA3C6D,EAAKhB,QAAQS,EAAgBY,SACjB,CACnB3D,IAAK0E,EAAW1E,KAAO,EAAI,KAC3BG,KAAMuE,EAAWvE,MAAQ,EAAI,KAC7BR,OAAQG,EAAaH,OAAS,KAC9BF,MAAOK,EAAaL,MAAQ,MAGT,CACnBU,KAAM6E,EACNhF,IAAKiF,IAG0C,IAA1C3B,EAAKhB,QAAQS,EAAgByC,SACM,IAAxClC,EAAKhB,QAAQS,EAAgBW,MACV,CACnB1D,IAAK0E,EAAW1E,IAAMF,EAAaH,OAAS,KAC5CQ,KAAMuE,EAAWvE,MAAQ,EAAI,KAC7BV,MAAOK,EAAaL,MAAQ,OAEsB,IAA3C6D,EAAKhB,QAAQS,EAAgBY,SACjB,CACnB3D,IAAK0E,EAAW1E,KAAO,EAAI,KAC3BG,KAAMuE,EAAWvE,MAAQ,EAAI,KAC7BR,OAAQG,EAAaH,OAAS,KAC9BF,MAAOK,EAAaL,MAAQ,MAGT,CACnBU,KAAM+E,EACNlF,IAAKmF,IAImC,IAAxC7B,EAAKhB,QAAQS,EAAgBW,MACV,CACnBvD,KAAMuE,EAAWvE,KAAOL,EAAaL,MAAQ,KAC7CO,IAAK0E,EAAW1E,IAAM,KACtBL,OAAQG,EAAaH,OAAS,OAEoB,IAA3C2D,EAAKhB,QAAQS,EAAgBY,SACjB,CACnBxD,KAAMuE,EAAWvE,KAAOL,EAAaL,MAAQ,KAC7CO,IAAK0E,EAAW1E,KAAO,EAAI,KAC3BL,OAAQG,EAAaH,OAAS,KAC9BF,MAAOK,EAAaL,MAAQ,MAGT,CACnBU,KAAMwE,EACN3E,IAAK4E,IAKiC,IAAxCtB,EAAKhB,QAAQS,EAAgBW,MACV,CACnBvD,KAAMuE,EAAWvE,KAAO,EAAI,KAC5BH,IAAK0E,EAAW1E,KAAO,EAAI,KAC3BL,OAAQG,EAAaH,OAAS,OAEoB,IAA3C2D,EAAKhB,QAAQS,EAAgBY,SACjB,CACnBxD,KAAMuE,EAAWvE,KAAO,EAAI,KAC5BH,IAAK0E,EAAW1E,KAAO,EAAI,KAC3BL,OAAQG,EAAaH,OAAS,KAC9BF,MAAOK,EAAaL,MAAQ,MAGT,CACnBU,KAAMwE,EACN3E,IAAK4E,GAKJP,GDrG8BoB,CAAevB,EAAOrE,EAAUuE,GAEjExB,EAAWwB,EAAgBC,OE3CjC,MAAMhE,EAAS,CAACC,EAAwB,GAAIgD,EAAsB,GAAI/C,EAAM,UAC1E,MAAMC,EAAMC,SAASC,cAAcH,GAOnC,OALAC,EAAIM,aAAa,QAASR,EAAO,MACjCE,EAAIM,aAAa,eAAgBxC,SAASgC,EAAO,GAAI,IAAM,MAE3DS,EAAeP,EAAK,sBAAsB8C,KAEnC9C,GAGIQ,EAAUnC,MAAOgB,IAC5B,IAAKA,EAAU,OAEf,MAAMqE,EAAuBrE,EAASsE,aAAa,wBAEnD,GAAc,KAAVD,IAAiBA,EACnB,OAGF,MAAMjD,QAAuBC,EAAWrB,GAExC,GAA+B,SAA3BoB,EAAeE,SAAiD,MAA3BF,EAAeG,SAAiD,WAA9BH,EAAeI,WACxF,aAGI3C,IAEN,MAAMoB,EAAeD,EAASE,wBACxB2F,EAAiB5F,EAAaE,IAAMC,OAAOC,YAC3CyF,EAAkB7F,EAAaK,KAAOF,OAAOG,YAEnD,IAAgC,IAA5B8D,EAAM5B,QAAQ,SAChB,IAAiC,IAA7B4B,EAAM5B,QAAQ,UAAkB,CAClC,MAAMsD,EAAcvF,EAAOP,EAAaL,MAAOyE,GAE/CzD,SAASgC,KAAK5B,YAAY+E,GAE1BhD,EAAWgD,EAAa,CACtBzF,KAAMwF,EAAkB,KACxB3F,IAAK0F,EAAiB5F,EAAaH,OAAS,EAAI,KAChDF,MAAOK,EAAaL,MAAQ,WAEzB,CACL,MAAMmG,EAAcvF,EAAOP,EAAaL,MAAOyE,GAE/CzD,SAASgC,KAAK5B,YAAY+E,GAE1B,MAAMC,EAAgBD,EAAY7F,wBAElC6C,EAAWgD,EAAa,CACtBzF,KAAMwF,EAAkB,KACxB3F,IAAK0F,EAAiBG,EAAclG,OAAS,EAAI,KACjDF,MAAOK,EAAaL,MAAQ,YAG3B,IAAiC,IAA7ByE,EAAM5B,QAAQ,UACvB,IAAgC,IAA5B4B,EAAM5B,QAAQ,SAAiB,CACjC,MAAMsD,EAAcvF,EAAOP,EAAaH,OAAQuE,GAEhDzD,SAASgC,KAAK5B,YAAY+E,GAE1BhD,EAAWgD,EAAa,CACtBzF,KAAMwF,EAAkB7F,EAAaL,MAAQ,KAC7CO,IAAK0F,EAAiB,KACtB/F,OAAQG,EAAaH,OAAS,WAE3B,CACL,MAAMiG,EAAcvF,EAAOP,EAAaH,OAAQuE,GAEhDzD,SAASgC,KAAK5B,YAAY+E,GAE1B,MAAMC,EAAgBD,EAAY7F,wBAElC6C,EAAWgD,EAAa,CACtBzF,KAAMwF,EAAkBE,EAAcpG,MAAQ,KAC9CO,IAAK0F,EAAiB,KACtB/F,OAAQG,EAAaH,OAAS,SC/E/B,MCEMU,EAAS,CAACyF,EAAcxC,KACnC,MAAM9C,EAAMC,SAASC,cAAc,OAC7B+C,EAAqB,GAEd,OAATH,GAA0B,KAATA,IACnBG,EAAmBH,IAAQ,GAG7B,MAAMM,EAAeC,EAAc,wBAAyBJ,GAM5D,OAJAjD,EAAIuF,UAAYD,EAEhB/E,EAAeP,EAAKoD,GAEbpD,GChBF,MAAMwF,EAAYC,IACvB,MAAMC,EAAmB,IZDV,SAAUC,EAAgBC,EAAcC,GACvD,IAAIC,EAEJ,OAAO,WACL,MAAMC,EAAUC,KACVC,EAAOC,UACPC,EAAQ,WACZL,EAAU,KAELD,GAAWF,EAAKS,MAAML,EAASE,IAEhCI,EAAUR,IAAcC,EAE1BA,GACFQ,aAAaR,GAGfA,EAAUS,WAAWJ,EAAOP,GAExBS,GAASV,EAAKS,MAAML,EAASE,IYjBjCO,EAAS,KACPf,MACC,KAELhG,OAAOgH,oBAAoB,SAAUf,GACrCjG,OAAOiH,iBAAiB,SAAUhB,ICJvBiB,EAAOlB,IACU,YAAxBxF,SAAS2G,WACX3G,SAASyG,iBAAiB,oBAAoB,KAC5CjB,OAIFA,KAISoB,EAAO,KAClB,MAAMC,EAAiB,IAAIC,sBAAqB,CAACC,EAAKC,KACpDD,EAAI9J,SAASR,IACPA,EAAGwK,kBAAoB,IACzBC,EAAazK,EAAG0K,QAChBH,EAASI,UAAU3K,EAAG0K,eAK5BnH,SACGuD,iBAAiB,4FACjBtG,SAASR,IACRoK,EAAeQ,QAAQ5K,MAG3B,MAAM6K,EAAoB,IAAIR,sBAAqB,CAACC,EAAKC,KACvDD,EAAI9J,SAASR,IACPA,EAAGwK,kBAAoB,IACzBM,EAAgB9K,EAAG0K,QACnBH,EAASI,UAAU3K,EAAG0K,eAK5BnH,SAASuD,iBAAiB,0BAA0BtG,SAASR,IAC3D6K,EAAkBD,QAAQ5K,MAG5B,MAAM+K,EAAoB,IAAIV,sBAAqB,CAACC,EAAKC,KACvDD,EAAI9J,SAASR,IACPA,EAAGwK,kBAAoB,IACzBQ,EAAgBhL,EAAG0K,QACnBH,EAASI,UAAU3K,EAAG0K,eAK5BnH,SAASuD,iBAAiB,0BAA0BtG,SAASR,IAC3D+K,EAAkBH,QAAQ5K,OAIjBiL,EAAUlC,IACrBhG,OAAOgG,QAAUA,GAGND,EAAYC,IACvB,MAAMmC,EAAU3H,SAAS4H,cAEzB,GAAID,EAAS,CACX,MAAME,EAAsBF,EAAQjE,aAAa,QAG/CmE,IACgD,IAA/CA,EAAoBhG,QAAQ,gBAEmB,IAA9CgG,EAAoBhG,QAAQ,eAE1B8F,EAAQG,aAAa,eACvBJ,EAAOlC,GACEmC,EAAQG,aAAa,gBAC9BtC,IACSmC,EAAQG,aAAa,YAC9BpB,EAAIlB,GACKmC,EAAQG,aAAa,aAC9BlB,IAEAF,EAAIlB,GAGDmC,EAAQG,aAAa,gBAAmBH,EAAQG,aAAa,cAChEC,EAAgBvC,YChFXwC,EAAUC,EAEVC,qDAEAC,4CAEAC,iDHOUhK,MAAOgB,IAC5B,IAAKA,EAAU,OAEf,MAAMqE,EAAuBrE,EAASsE,aAAa,2BAC7ClD,QAAuBC,EAAWrB,GAExC,GAA+B,SAA3BoB,EAAeE,SAAiD,MAA3BF,EAAeG,SAAiD,WAA9BH,EAAeI,WACxF,OAGFxB,EAASlC,UAAUC,IAAI,cAEvB,MAAMkL,OIjCgBjK,OAAOgB,IAC7B,MACMkJ,EhBsCqB,CAAC7J,IAC5B,MAAM8J,WAAEA,EAAUC,cAAEA,EAAaC,WAAEA,EAAUC,SAAEA,EAAQC,UAAEA,EAASC,sBAAEA,EAAqBC,WAAEA,GAAepK,EAE1G,MAAO,CACL8J,WAAAA,EACAC,cAAAA,EACAC,WAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,sBAAAA,EACAC,WAAAA,IgBhDcC,OADarI,EAAWrB,IAElC2J,EAAyC,WAA1BT,EAAoB,WAAiBzK,SAASyK,EAAoB,WAAG,IAAM,GAAK,MAAQ,SAE7G,MAKE,+FAAoDA,EAAoB,kEACtBA,EAAkB,cAClEzK,SAASyK,EAAkB,SAAG,IAAM,+DAEcA,EAAoB,gFACRA,EAA+B,+EAC3CA,EAAoB,gBAAOS,8DACxBT,EAAuB,sEAC3BA,EAAmB,yBJepDU,CAAiB5J,GAC/BuC,EAAc/B,EAAOyI,EAAO5E,GAElCzD,SAASgC,KAAK5B,YAAYuB,GAE1B,MAAMsH,ODpCgB7K,OAAOyE,EAAqBzD,EAAuB8J,KACzE,MAAM7J,EAAeD,EAASE,wBACxByE,EAAoBC,EAAakF,GACjCC,EAAmBD,EAAU5J,wBAC7B2E,QAAmB9E,EAAOC,GAC1B8E,EAA6BD,EAAWvE,KAAOyJ,EAAiBnK,MAAQ+E,EAAoB,KAC5FI,EACJC,EAAenF,EAA2BgF,EAAW1E,IAAK4J,EAAkB9J,IAAiB,KACzFgF,EAA8BJ,EAAWvE,KAAOL,EAAaL,MAAQ+E,EAAoB,KACzFO,EACJF,EAAenF,EAA2BgF,EAAW1E,IAAK4J,EAAkB9J,IAAiB,KACzFkF,EACJH,EAAexF,EAA6BqF,EAAWvE,KAAMyJ,EAAkB9J,IAAiB,KAC5FmF,EAA2BP,EAAW1E,IAAM4J,EAAiBjK,OAAS6E,EAAoB,KAC1FU,EACJL,EAAexF,EAA6BqF,EAAWvE,KAAMyJ,EAAkB9J,IAAiB,KAC5FqF,EAA8BT,EAAW1E,IAAMF,EAAaH,OAAS6E,EAAoB,KAE/F,IAAIkF,EAAY,CACdvJ,KAAMwE,EACN3E,IAAK4E,GAoBP,OAjBItB,IAAiD,IAAzCA,EAAKhB,QAAQQ,EAAgBwC,OACvCoE,EAAY,CACVvJ,KAAM2E,EACN9E,IAAK+E,GAEEzB,IAA+C,IAAvCA,EAAKhB,QAAQQ,EAAgByC,KAC9CmE,EAAY,CACVvJ,KAAM6E,EACNhF,IAAKiF,GAEE3B,IAAkD,IAA1CA,EAAKhB,QAAQQ,EAAgB0C,UAC9CkE,EAAY,CACVvJ,KAAM+E,EACNlF,IAAKmF,IAIFuE,GCJiB7G,CAAiBqB,EAAOrE,EAAUuC,GAE1DQ,EAAWR,EAAasH,MGxBbG,mEAEP5D,EAAU,KlBlBS,EAAC6D,EAAkB5M,EAAeuD,YACzD,GAAG/C,QAAQqM,KAAK7M,EAAG8G,iBAAiB8F,IAAW,SAAUE,GACvDA,EAAEC,akBiBJC,CAAe,YAEf,MAAMC,EAAqB1J,SAASuD,iBAClC,4FAEIoG,EAAsB3J,SAASuD,iBAAiB,0BAChDqG,EAAgC5J,SAASuD,iBAAiB,6BAC1DsG,EAAuB7J,SAASuD,iBAAiB,0BAEvDmG,EAAmBzM,QAAQ+K,EAAQzH,SACnCoJ,EAAoB1M,QAAQkL,EAAQ5H,SACpCqJ,EAA8B3M,QAAQmL,EAAW7H,SACjDsJ,EAAqB5M,QAAQiL,EAAQ3H,YAKtBiF"}
1	+ {"version":3,"file":"speccer.js","sources":["src/lib/node.ts","src/lib/classnames.ts","src/lib/constants.ts","src/lib/css.ts","src/lib/debounce.ts","src/lib/styles.ts","src/lib/position.ts","src/tasks/spec.ts","src/helpers/spacing/position.ts","src/enums/area.ts","src/lib/number.ts","src/helpers/dissect/styles.ts","src/tasks/dissect.ts","src/tasks/measure.ts","src/helpers/typography/position.ts","src/tasks/typography.ts","src/lib/resize.ts","src/browser.ts","src/index.ts","src/helpers/typography/template.ts"],"sourcesContent":["export const after = (el: HTMLElement \| null, newSibling: HTMLElement) =>\n el && el.insertAdjacentElement('afterend', newSibling);\n\nexport const removeAll = (selector: string, el: Document = document) => {\n [].forEach.call(el.querySelectorAll(selector), function (e: HTMLElement) {\n e.remove();\n });\n};\n","/* eslint no-console:0 /\n'use strict';\n\nimport { ClassNamesObjectMapInterface } from 'interfaces/classnames';\n\nexport const set = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls \|\| (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.add(cl));\n};\n\nexport const toggle = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls \|\| (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.toggle(cl));\n};\n\nexport const remove = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls \|\| (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.remove(cl));\n};\n\nexport const cx = (\n cls: string,\n cls_obj?: ClassNamesObjectMapInterface\n): string => {\n if (!cls) return '';\n\n if (!cls_obj && typeof cls !== 'string') {\n return `${Object.keys(cls)\n .filter((classname) => cls[classname])\n .join(' ')}`.trim();\n }\n\n return `${cls} ${\n cls_obj\n ? Object.keys(cls_obj)\n .filter((classname) => cls_obj[classname])\n .join(' ')\n : ''\n }`.trim();\n};\n","/ eslint no-console:0 /\n'use strict';\n\nexport const SPECCER_LITERALS = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];\n\nexport const SPECCER_TAGS_TO_AVOID = [\n 'TR',\n 'TH',\n 'TD',\n 'TBODY',\n 'THEAD',\n 'TFOOT'\n];\n\nexport const SPECCER_DEFAULT_PIN_SPACE = 48;\n\nexport const SPECCER_DEFAULT_MEASURE_SIZE = 8;\n\nexport const SPECCER_DEFAULT_LINE_WIDTH = 1;\n","/ eslint no-console:0 /\n'use strict';\nimport {\n SPECCER_DEFAULT_PIN_SPACE,\n SPECCER_DEFAULT_MEASURE_SIZE,\n SPECCER_DEFAULT_LINE_WIDTH\n} from './constants';\nimport {\n SpacingCSSPropertiesType,\n TypographyCSSPropertiesType\n} from '../types/css';\n\nexport const getNumberValue = (value: string): number => parseInt(value, 10);\n\nexport const normalizeNumberValue = (value: string \| number): number => {\n const _value = parseFloat(value + '');\n\n return (_value >= 0 && _value < 1) \|\| (_value <= 0 && _value > -1)\n ? 0\n : _value;\n};\n\nexport const getClassNameFromCSSProperty = (property: string) => {\n if (property.indexOf('Top') !== -1) {\n return property.replace('Top', ' top');\n } else if (property.indexOf('Right') !== -1) {\n return property.replace('Right', ' right');\n } else if (property.indexOf('Bottom') !== -1) {\n return property.replace('Bottom', ' bottom');\n } else if (property.indexOf('Left') !== -1) {\n return property.replace('Left', ' left');\n }\n\n return '';\n};\n\nexport const getSpacing = (\n style: SpacingCSSPropertiesType\n): SpacingCSSPropertiesType => {\n const {\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight\n } = style;\n\n return {\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight\n };\n};\n\nexport const getTypography = (\n style: TypographyCSSPropertiesType\n): TypographyCSSPropertiesType => {\n const {\n lineHeight,\n letterSpacing,\n fontFamily,\n fontSize,\n fontStyle,\n fontVariationSettings,\n fontWeight\n } = style;\n\n return {\n lineHeight,\n letterSpacing,\n fontFamily,\n fontSize,\n fontStyle,\n fontVariationSettings,\n fontWeight\n };\n};\n\nexport const pinSpace = (el: HTMLElement): number =>\n getNumberValue(\n getComputedStyle(el).getPropertyValue('--ph-speccer-pin-space')\n ) \|\| SPECCER_DEFAULT_PIN_SPACE;\n\nexport const measureSize = (el: HTMLElement): number =>\n getNumberValue(\n getComputedStyle(el).getPropertyValue('--ph-speccer-measure-size')\n ) \|\| SPECCER_DEFAULT_MEASURE_SIZE;\n\nexport const lineWidth = (el: HTMLElement): number =>\n getNumberValue(\n getComputedStyle(el).getPropertyValue('--ph-speccer-line-width')\n ) \|\| SPECCER_DEFAULT_LINE_WIDTH;\n","/ eslint @typescript-eslint/no-explicit-any: [\"error\", { \"fixToUnknown\": true }] /\n'use strict';\n\nimport { DebounceAnyFunctionType } from 'types/debounce';\n\nexport const waitForFrame = () => new Promise(requestAnimationFrame);\n\nconst debounce = function (\n func: DebounceAnyFunctionType,\n wait: number,\n immediate?: boolean\n): DebounceAnyFunctionType {\n let timeout: null \| ReturnType<typeof setTimeout>;\n\n return function (context: unknown, ...args: unknown[]) {\n const later = function () {\n timeout = null;\n\n if (!immediate) func.apply(context, args);\n };\n const callNow = immediate && !timeout;\n\n if (timeout) {\n clearTimeout(timeout);\n }\n\n timeout = setTimeout(later, wait);\n\n if (callNow) func.apply(context, args);\n };\n};\n\nexport default debounce;\n","/ eslint no-console:0 /\n'use strict';\nimport { waitForFrame } from './debounce';\n\nexport const add = async (el: HTMLElement, styles: [] \| object) => {\n if (\n !el \|\|\n !styles \|\|\n typeof styles === 'string' \|\|\n typeof styles === 'number' \|\|\n typeof styles === 'boolean' \|\|\n (Array.isArray(styles) && styles.length === 0) \|\|\n (Object.keys(styles).length === 0 && styles.constructor === Object)\n ) {\n return;\n }\n\n await waitForFrame();\n\n if (Array.isArray(styles)) {\n styles.forEach(\n (style: { key: string; value: string }) =>\n (el.style[style.key] = style.value)\n );\n } else {\n Object.keys(styles).forEach((key) => (el.style[key] = styles[key]));\n }\n};\n\nexport const get = async (el: HTMLElement): Promise<CSSStyleDeclaration> => {\n await waitForFrame();\n\n return getComputedStyle(el, null);\n};\n","import { waitForFrame } from './debounce';\n\nimport { PositionPropertiesType, PositionInputType } from '../types/position';\nimport { GetRecPropertiesInterface } from 'interfaces/position';\n\nexport const get_horizontal_center_of_els = (\n modifier: number,\n startRect: DOMRect,\n targetRect: DOMRect\n): number => modifier - startRect.width / 2 + targetRect.width / 2;\n\nexport const get_vertical_center_of_els = (\n modifier: number,\n startRect: DOMRect,\n targetRect: DOMRect\n): number => modifier - startRect.height / 2 + targetRect.height / 2;\n\nexport const offset = async (\n targetEl: HTMLElement\n): Promise<PositionPropertiesType> => {\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n return {\n height: _target_rect.height,\n width: _target_rect.width,\n top: _el_offset_top,\n left: _el_offset_left\n };\n};\n\nexport const offsetWithCenter = async (\n sourceEl: HTMLElement,\n targetEl: HTMLElement\n): Promise<PositionPropertiesType> => {\n await waitForFrame();\n\n const _source_rect = sourceEl.getBoundingClientRect();\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n return {\n height: _target_rect.height,\n width: _target_rect.width,\n top: get_vertical_center_of_els(_el_offset_top, _source_rect, _target_rect),\n left: get_horizontal_center_of_els(\n _el_offset_left,\n _source_rect,\n _target_rect\n )\n };\n};\n\nexport const getRec = async (\n sourceEl: HTMLElement,\n targetEl: HTMLElement\n): Promise<GetRecPropertiesInterface> => {\n await waitForFrame();\n\n const _source_rect = sourceEl.getBoundingClientRect();\n const _target_offset = await offset(targetEl);\n const _target_offset_center = await offsetWithCenter(sourceEl, targetEl);\n const _target_height = _target_offset.height;\n const _target_width = _target_offset.width;\n const _source_height = _source_rect.height;\n const _source_width = _source_rect.width;\n\n return {\n toTop: ({\n center = false,\n sourceHeight = _source_height\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top - sourceHeight,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n fromTop: ({\n center = false\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n toBottom: ({\n center = false,\n sourceHeight = _source_height,\n targetHeight = _target_height\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top + targetHeight - sourceHeight,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n fromBottom: ({\n center = false,\n targetHeight = _target_height\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top + targetHeight,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n toLeft: ({\n center = false,\n sourceWidth = _source_width,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left - sourceWidth - modifier,\n height: _target_height,\n width: _target_width\n };\n },\n\n fromLeft: ({\n center = false\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n toRight: ({\n center = false,\n sourceWidth = _source_width,\n targetWidth = _target_width,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left + targetWidth - sourceWidth + modifier,\n height: _target_height,\n width: _target_width\n };\n },\n\n fromRight: ({\n center = false,\n targetWidth = _target_width\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left + targetWidth,\n height: _target_height,\n width: _target_width\n };\n }\n };\n};\n","/ eslint no-console:0 /\n'use strict';\n\nimport as classnames from '../lib/classnames';\nimport * as css from '../lib/css';\nimport * as styles from '../lib/styles';\nimport * as helpers from '../helpers/spacing';\n\nexport const create = (text: string \| number = '', tag = 'span') => {\n const _el = document.createElement(tag);\n const _text_content = document.createTextNode(text + '');\n\n _el.appendChild(_text_content);\n _el.setAttribute('title', text + 'px');\n classnames.set(_el, 'ph speccer spacing');\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _target_styles = await styles.get(targetEl);\n\n if (\n _target_styles.display === 'none' \|\|\n _target_styles.opacity === '0' \|\|\n _target_styles.visibility === 'hidden'\n ) {\n return;\n }\n\n const _target_spacing_styles = css.getSpacing(_target_styles);\n const _target_pruned_spacing_styles = Object.keys(\n _target_spacing_styles\n ).filter((property) => {\n const _value = _target_spacing_styles[property];\n\n return _value !== '0px';\n });\n\n if (_target_pruned_spacing_styles.length === 0) return;\n\n _target_pruned_spacing_styles.forEach(async (property) => {\n const _value = css.getNumberValue(_target_spacing_styles[property]);\n const _speccer_el = create(_value);\n const _class_name = css.getClassNameFromCSSProperty(property);\n\n classnames.set(_speccer_el, _class_name);\n document.body.appendChild(_speccer_el);\n\n targetEl.classList.add('is-specced');\n await helpers.position(property, _value, _speccer_el, targetEl);\n });\n};\n","import * as styles from '../../lib/styles';\nimport { offset } from '../../lib/position';\nimport { waitForFrame } from '../../lib/debounce';\n\nexport const position = async (\n property: string,\n value: number,\n spacingEl: HTMLElement,\n targetEl: HTMLElement\n) => {\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _target_offset = await offset(targetEl);\n\n if (property === 'marginTop') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top - value + 'px'\n });\n }\n\n if (property === 'marginRight') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + parseInt(_target_rect.width + '', 10) + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'marginBottom') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + parseInt(_target_rect.height + '', 10) + 'px'\n });\n }\n\n if (property === 'marginLeft') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left - value + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingTop') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingBottom') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top:\n _target_offset.top +\n (parseInt(_target_rect.height + '', 10) - value) +\n 'px'\n });\n }\n\n if (property === 'paddingRight') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left:\n _target_offset.left +\n (parseInt(_target_rect.width + '', 10) - value) +\n 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingLeft') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + 'px',\n top: _target_offset.top + 'px'\n });\n }\n};\n","/* eslint-disable no-unused-vars /\n\nexport enum SpeccerAreaEnum {\n Empty = '',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n\nexport enum DissectAreaEnum {\n Outline = 'outline',\n Enclose = 'enclose',\n Full = 'full',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n","/ eslint no-console:0 /\n'use strict';\n\nexport const decimal = (number: string \| number, decimals = 3): string =>\n parseFloat(number + '').toFixed(decimals);\n","import as css from '../../lib/css';\nimport * as number from '../../lib/number';\nimport * as position from '../../lib/position';\nimport {\n get_horizontal_center_of_els,\n get_vertical_center_of_els,\n offset\n} from '../../lib/position';\nimport { DissectAreaEnum } from '../../enums/area';\n\n/*\n @todo Finalize converstion to position.get()!\n/\nexport const styles = async (\n area: string,\n targetEl: HTMLElement,\n dissectionEl: HTMLElement\n) => {\n const SPECCER_PIN_SPACE = css.pinSpace(dissectionEl);\n const SPECCER_MEASURE_SIZE = css.measureSize(dissectionEl);\n const SPECCER_MEASURE_SIZE_NEG = SPECCER_MEASURE_SIZE * -1;\n const _target_rect = targetEl.getBoundingClientRect();\n const _dissection_el_rect = dissectionEl.getBoundingClientRect();\n const _el_offset = await offset(targetEl);\n const _left_layout_position_left =\n _el_offset.left - _dissection_el_rect.width - SPECCER_PIN_SPACE + 'px';\n const _left_layout_position_top =\n number.decimal(\n get_vertical_center_of_els(\n _el_offset.top,\n _dissection_el_rect,\n _target_rect\n )\n ) + 'px';\n const _right_layout_position_left =\n _el_offset.left + _target_rect.width + SPECCER_PIN_SPACE + 'px';\n const _right_layout_position_top =\n number.decimal(\n get_vertical_center_of_els(\n _el_offset.top,\n _dissection_el_rect,\n _target_rect\n )\n ) + 'px';\n const _top_layout_position_left =\n number.decimal(\n get_horizontal_center_of_els(\n _el_offset.left,\n _dissection_el_rect,\n _target_rect\n )\n ) + 'px';\n const _top_layout_position_top =\n _el_offset.top - _dissection_el_rect.height - SPECCER_PIN_SPACE + 'px';\n const _bottom_layout_position_left =\n number.decimal(\n get_horizontal_center_of_els(\n _el_offset.left,\n _dissection_el_rect,\n _target_rect\n )\n ) + 'px';\n const _bottom_layout_position_top =\n _el_offset.top + _target_rect.height + SPECCER_PIN_SPACE + 'px';\n const _positional_styles = await position.getRec(dissectionEl, targetEl);\n\n let _dissection_styles = {};\n\n if (area.indexOf(DissectAreaEnum.Left) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n const { left, top, height } = _positional_styles.toLeft({\n sourceWidth: SPECCER_MEASURE_SIZE\n });\n\n _dissection_styles = {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n const { left, top, height, width } = _positional_styles.fromTop();\n\n _dissection_styles = {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`,\n width: `${width}px`\n };\n } else {\n const { left, top } = _positional_styles.toLeft({\n center: true,\n modifier: SPECCER_PIN_SPACE\n });\n\n _dissection_styles = {\n left: `${left}px`,\n top: `${top}px`\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Right) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + _target_rect.width + 'px',\n top: _el_offset.top + 'px',\n height: _target_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + 'px',\n top: _el_offset.top + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n const { left, top } = _positional_styles.fromRight({\n center: true,\n modifier: SPECCER_PIN_SPACE\n });\n\n _dissection_styles = {\n left: `${left}px`,\n top: `${top}px`\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Top) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + SPECCER_MEASURE_SIZE_NEG + 'px',\n left: _el_offset.left + 'px',\n width: _target_rect.width + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + 'px',\n left: _el_offset.left + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _top_layout_position_left,\n top: _top_layout_position_top\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Bottom) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + _target_rect.height + 'px',\n left: _el_offset.left + 'px',\n width: _target_rect.width + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + 'px',\n left: _el_offset.left + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _bottom_layout_position_left,\n top: _bottom_layout_position_top\n };\n }\n } else {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + _target_rect.width + 'px',\n top: _el_offset.top + 'px',\n height: _target_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + _target_rect.width + 'px',\n top: _el_offset.top + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n }\n }\n\n return _dissection_styles;\n};\n","/* eslint no-console:0 /\n'use strict';\n\nimport as styles from '../lib/styles';\nimport * as classnames from '../lib/classnames';\nimport { DissectAreaEnum } from '../enums/area';\nimport * as helpers from '../helpers/dissect';\nimport { SPECCER_LITERALS } from '../lib/constants';\n\nexport const create = (textContent = '', area: string, n = 'span') => {\n const _el = document.createElement(n);\n const _text_node = document.createTextNode(textContent);\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n if (\n area.indexOf(DissectAreaEnum.Full) === -1 &&\n area.indexOf(DissectAreaEnum.Enclose) === -1\n ) {\n _el.appendChild(_text_node);\n } else if (\n area.indexOf(DissectAreaEnum.Full) !== -1 \|\|\n area.indexOf(DissectAreaEnum.Enclose) !== -1\n ) {\n _el.setAttribute('data-dissection-counter', textContent);\n }\n\n const _class_names = classnames.cx(\n 'ph speccer dissection',\n _extra_class_names\n );\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = (sectionEl: HTMLElement) => {\n if (!sectionEl) return;\n\n const _dissection_els = sectionEl.querySelectorAll('[data-anatomy]');\n\n if (_dissection_els) {\n _dissection_els.forEach(async (targetEl: HTMLElement, targetIndex) => {\n if (!targetEl) return;\n\n const _area: string \| null = targetEl.getAttribute('data-anatomy') \|\| '';\n\n if (\n !_area \|\|\n _area === '' \|\|\n _area.indexOf(DissectAreaEnum.Outline) === -1\n )\n return;\n\n const _dissection_el = create(SPECCER_LITERALS[targetIndex], _area);\n\n document.body.appendChild(_dissection_el);\n\n const _dissection_styles = await helpers.styles(\n _area,\n targetEl,\n _dissection_el\n );\n\n styles.add(_dissection_el, _dissection_styles);\n });\n }\n};\n","/* eslint no-console:0 /\n'use strict';\n\nimport as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport { waitForFrame } from '../lib/debounce';\n\nconst create = (\n text: string \| number = '',\n area: string \| null = '',\n tag = 'span'\n) => {\n const _el = document.createElement(tag);\n\n _el.setAttribute('title', text + 'px');\n _el.setAttribute('data-measure', parseInt(text + '', 10) + 'px');\n\n classnames.set(_el, `ph speccer measure ${area}`);\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _area: string \| null = targetEl.getAttribute('data-speccer-measure');\n\n if (_area === '' \|\| !_area) {\n return;\n }\n\n const _target_styles = await styles.get(targetEl);\n\n if (\n _target_styles.display === 'none' \|\|\n _target_styles.opacity === '0' \|\|\n _target_styles.visibility === 'hidden'\n ) {\n return;\n }\n\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n if (_area.indexOf('width') !== -1) {\n if (_area.indexOf('bottom') !== -1) {\n const _measure_el = create(_target_rect.width, _area);\n\n document.body.appendChild(_measure_el);\n\n styles.add(_measure_el, {\n left: _el_offset_left + 'px',\n top: _el_offset_top + _target_rect.height + 1 + 'px',\n width: _target_rect.width + 'px'\n });\n } else {\n const _measure_el = create(_target_rect.width, _area);\n\n document.body.appendChild(_measure_el);\n\n const _measure_rect = _measure_el.getBoundingClientRect();\n\n styles.add(_measure_el, {\n left: _el_offset_left + 'px',\n top: _el_offset_top - _measure_rect.height + 1 + 'px',\n width: _target_rect.width + 'px'\n });\n }\n } else if (_area.indexOf('height') !== -1) {\n if (_area.indexOf('right') !== -1) {\n const _measure_el = create(_target_rect.height, _area);\n\n document.body.appendChild(_measure_el);\n\n styles.add(_measure_el, {\n left: _el_offset_left + _target_rect.width + 'px',\n top: _el_offset_top + 'px',\n height: _target_rect.height + 'px'\n });\n } else {\n const _measure_el = create(_target_rect.height, _area);\n\n document.body.appendChild(_measure_el);\n\n const _measure_rect = _measure_el.getBoundingClientRect();\n\n styles.add(_measure_el, {\n left: _el_offset_left - _measure_rect.width + 'px',\n top: _el_offset_top + 'px',\n height: _target_rect.height + 'px'\n });\n }\n }\n};\n","import * as css from '../../lib/css';\nimport * as number from '../../lib/number';\nimport {\n get_horizontal_center_of_els,\n get_vertical_center_of_els,\n offset\n} from '../../lib/position';\nimport { SpeccerAreaEnum } from '../../enums/area';\n\nexport const position = async (\n area: string \| null,\n targetEl: HTMLElement,\n speccerEl: HTMLElement\n) => {\n const _target_rect = targetEl.getBoundingClientRect();\n const SPECCER_PIN_SPACE = css.pinSpace(speccerEl);\n const _speccer_el_rect = speccerEl.getBoundingClientRect();\n const _el_offset = await offset(targetEl);\n const _left_layout_position_left =\n _el_offset.left - _speccer_el_rect.width - SPECCER_PIN_SPACE + 'px';\n const _left_layout_position_top =\n number.decimal(\n get_vertical_center_of_els(_el_offset.top, _speccer_el_rect, _target_rect)\n ) + 'px';\n const _right_layout_position_left =\n _el_offset.left + _target_rect.width + SPECCER_PIN_SPACE + 'px';\n const _right_layout_position_top =\n number.decimal(\n get_vertical_center_of_els(_el_offset.top, _speccer_el_rect, _target_rect)\n ) + 'px';\n const _top_layout_position_left =\n number.decimal(\n get_horizontal_center_of_els(\n _el_offset.left,\n _speccer_el_rect,\n _target_rect\n )\n ) + 'px';\n const _top_layout_position_top =\n _el_offset.top - _speccer_el_rect.height - SPECCER_PIN_SPACE + 'px';\n const _bottom_layout_position_left =\n number.decimal(\n get_horizontal_center_of_els(\n _el_offset.left,\n _speccer_el_rect,\n _target_rect\n )\n ) + 'px';\n const _bottom_layout_position_top =\n _el_offset.top + _target_rect.height + SPECCER_PIN_SPACE + 'px';\n\n let _position = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n\n if (area && area.indexOf(SpeccerAreaEnum.Right) !== -1) {\n _position = {\n left: _right_layout_position_left,\n top: _right_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Top) !== -1) {\n _position = {\n left: _top_layout_position_left,\n top: _top_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Bottom) !== -1) {\n _position = {\n left: _bottom_layout_position_left,\n top: _bottom_layout_position_top\n };\n }\n\n return _position;\n};\n","/* eslint no-console:0 /\n'use strict';\n\nimport as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport * as helpers from '../helpers/typography';\n\nexport const create = (html: string, area: string \| null) => {\n const _el = document.createElement('div');\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n const _class_names = classnames.cx(\n 'ph speccer typography',\n _extra_class_names\n );\n\n _el.innerHTML = html;\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _area: string \| null = targetEl.getAttribute('data-speccer-typography');\n const _target_styles = await styles.get(targetEl);\n\n if (\n _target_styles.display === 'none' \|\|\n _target_styles.opacity === '0' \|\|\n _target_styles.visibility === 'hidden'\n ) {\n return;\n }\n\n targetEl.classList.add('is-specced');\n\n const _html = await helpers.template(targetEl);\n const _speccer_el = create(_html, _area);\n\n document.body.appendChild(_speccer_el);\n\n const _position = await helpers.position(_area, targetEl, _speccer_el);\n\n styles.add(_speccer_el, _position);\n};\n","'use strict';\n\nimport { SpeccerFunctionType } from 'types/speccer';\n\nimport debounce from './debounce';\n\nexport const activate = (speccer: SpeccerFunctionType) => {\n const speccerEventFunc = () =>\n debounce(() => {\n speccer();\n }, 300);\n\n window.removeEventListener('resize', speccerEventFunc);\n window.addEventListener('resize', speccerEventFunc);\n};\n","/* eslint no-console:0 /\n'use strict';\n\nimport { SpeccerFunctionType } from 'types/speccer';\n\nimport as resize from './lib/resize';\n\nimport * as spec from './tasks/spec';\nimport * as measure from './tasks/measure';\nimport * as dissect from './tasks/dissect';\n\nexport const dom = (speccer: SpeccerFunctionType) => {\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n speccer();\n });\n } else {\n // `DOMContentLoaded` already fired\n speccer();\n }\n};\n\nexport const lazy = () => {\n const _spec_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el: IntersectionObserverEntry) => {\n if (el.intersectionRatio > 0) {\n spec.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document\n .querySelectorAll(\n '[data-speccer],[data-speccer] :not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)'\n )\n .forEach((el) => {\n _spec_observer.observe(el);\n });\n\n const _measure_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n if (el.intersectionRatio > 0) {\n measure.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-speccer-measure]').forEach((el) => {\n _measure_observer.observe(el);\n });\n\n const _dissect_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n if (el.intersectionRatio > 0) {\n dissect.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-anatomy-section]').forEach((el) => {\n _dissect_observer.observe(el);\n });\n};\n\nexport const manual = (speccer: SpeccerFunctionType) => {\n window.speccer = speccer;\n};\n\nexport const activate = (speccer: SpeccerFunctionType) => {\n const _script = document.currentScript;\n\n if (_script) {\n const _speccer_script_src = _script.getAttribute('src');\n\n if (\n _speccer_script_src &&\n (_speccer_script_src.indexOf('speccer.js') !== -1 \|\|\n // for codepen\n _speccer_script_src.indexOf('JaXpOK.js') !== -1)\n ) {\n if (_script.hasAttribute('data-manual')) {\n manual(speccer);\n } else if (_script.hasAttribute('data-instant')) {\n speccer();\n } else if (_script.hasAttribute('data-dom')) {\n dom(speccer);\n } else if (_script.hasAttribute('data-lazy')) {\n lazy();\n } else {\n dom(speccer);\n }\n\n if (\n !_script.hasAttribute('data-manual') &&\n !_script.hasAttribute('data-lazy')\n ) {\n resize.activate(speccer);\n }\n }\n }\n};\n","/ eslint no-console:0 /\n'use strict';\n\nimport './interfaces/global';\nimport as node from './lib/node';\nimport * as __spacing from './tasks/spec';\nimport * as __dissect from './tasks/dissect';\nimport * as __measure from './tasks/measure';\nimport * as __typography from './tasks/typography';\nimport * as browser from './browser';\n\nexport const spacing = __spacing;\n\nexport const dissect = __dissect;\n\nexport const measure = __measure;\n\nexport const typography = __typography;\n\nexport const modes = browser;\n\nconst speccer = () => {\n node.removeAll('.speccer');\n\n const _els_to_be_specced = document.querySelectorAll(\n '[data-speccer],[data-speccer] :not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)'\n );\n const _els_to_be_measured = document.querySelectorAll(\n '[data-speccer-measure]'\n );\n const _els_to_be_typography_specced = document.querySelectorAll(\n '[data-speccer-typography]'\n );\n const _els_to_be_dissected = document.querySelectorAll(\n '[data-anatomy-section]'\n );\n\n _els_to_be_specced.forEach(spacing.element);\n _els_to_be_measured.forEach(measure.element);\n _els_to_be_typography_specced.forEach(typography.element);\n _els_to_be_dissected.forEach(dissect.element);\n};\n\nexport default speccer;\n\nbrowser.activate(speccer);\n","import as css from '../../lib/css';\nimport * as styles from '../../lib/styles';\n\nexport const template = async (targetEl: HTMLElement): Promise<string> => {\n const _target_styles = await styles.get(targetEl);\n const _styles = css.getTypography(_target_styles);\n const _line_height =\n _styles['lineHeight'] !== 'normal'\n ? parseInt(_styles['lineHeight'], 10) / 16 + 'rem'\n : 'normal';\n\n return (\n `\n` +\n 'font-styles: {' +\n '<ul class=\"speccer-styles\">' +\n ` <li><span class=\"property\">font-family:</span> ${_styles['fontFamily']};</li>` +\n ` <li><span class=\"property\">font-size:</span> ${_styles['fontSize']} / ${\n parseInt(_styles['fontSize'], 10) / 16\n }rem;</li>` +\n ` <li><span class=\"property\">font-weight:</span> ${_styles['fontWeight']};</li>` +\n ` <li><span class=\"property\">font-variation-settings:</span> ${_styles['fontVariationSettings']};</li>` +\n ` <li><span class=\"property\">line-height:</span> ${_styles['lineHeight']} / ${_line_height};</li>` +\n ` <li><span class=\"property\">letter-spacing:</span> ${_styles['letterSpacing']};</li>` +\n ` <li><span class=\"property\">font-style:</span> ${_styles['fontStyle']};</li>` +\n '</ul>' +\n '}'\n );\n};\n"],"names":["set","el","cls","avoid","length","trim","split","filter","cl","forEach","classList","add","cx","cls_obj","Object","keys","classname","join","SPECCER_LITERALS","getNumberValue","value","parseInt","pinSpace","getComputedStyle","getPropertyValue","waitForFrame","Promise","requestAnimationFrame","async","styles","Array","isArray","constructor","style","key","get","get_horizontal_center_of_els","modifier","startRect","targetRect","width","get_vertical_center_of_els","height","offset","targetEl","_target_rect","getBoundingClientRect","_el_offset_top","top","window","pageYOffset","_el_offset_left","left","pageXOffset","getRec","sourceEl","_source_rect","_target_offset","_target_offset_center","offsetWithCenter","_target_height","_target_width","_source_height","_source_width","toTop","center","sourceHeight","fromTop","toBottom","targetHeight","fromBottom","toLeft","sourceWidth","fromLeft","toRight","targetWidth","fromRight","create","text","tag","_el","document","createElement","_text_content","createTextNode","appendChild","setAttribute","classnames.set","element","_target_styles","styles.get","display","opacity","visibility","_target_spacing_styles","marginTop","marginBottom","marginLeft","marginRight","paddingTop","paddingBottom","paddingLeft","paddingRight","css.getSpacing","_target_pruned_spacing_styles","property","_value","css.getNumberValue","_speccer_el","_class_name","indexOf","replace","css.getClassNameFromCSSProperty","body","spacingEl","styles.add","helpers.position","SpeccerAreaEnum","DissectAreaEnum","decimal","number","decimals","parseFloat","toFixed","area","dissectionEl","SPECCER_PIN_SPACE","css.pinSpace","SPECCER_MEASURE_SIZE","SPECCER_MEASURE_SIZE_NEG","_dissection_el_rect","_el_offset","_left_layout_position_left","_left_layout_position_top","number.decimal","_top_layout_position_left","_top_layout_position_top","_bottom_layout_position_left","_bottom_layout_position_top","_positional_styles","position.getRec","_dissection_styles","Left","Full","Enclose","Right","Top","Bottom","textContent","n","_text_node","_extra_class_names","_class_names","classnames.cx","sectionEl","_dissection_els","querySelectorAll","targetIndex","_area","getAttribute","Outline","_dissection_el","helpers.styles","_measure_el","_measure_rect","html","innerHTML","activate","speccer","speccerEventFunc","func","wait","immediate","timeout","context","args","callNow","clearTimeout","setTimeout","apply","debounce","removeEventListener","addEventListener","dom","readyState","lazy","_spec_observer","IntersectionObserver","els","observer","intersectionRatio","spec.element","target","unobserve","observe","_measure_observer","measure.element","_dissect_observer","dissect.element","manual","_script","currentScript","_speccer_script_src","hasAttribute","resize.activate","spacing","__spacing","dissect","measure","typography","_html","_styles","lineHeight","letterSpacing","fontFamily","fontSize","fontStyle","fontVariationSettings","fontWeight","css.getTypography","_line_height","helpers.template","_position","speccerEl","_speccer_el_rect","_right_layout_position_left","_right_layout_position_top","modes","selector","call","e","remove","node.removeAll","_els_to_be_specced","_els_to_be_measured","_els_to_be_typography_specced","_els_to_be_dissected"],"mappings":"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"}

package/speccer.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .ph.speccer{--ph-speccer-color-padding:#db6fff66;--ph-speccer-color-padding-hover:#db6fff;--ph-speccer-color-margin:#fff76f66;--ph-speccer-color-margin-hover:#fff76f;--ph-speccer-color-text-light:#fff;--ph-speccer-color-text-dark:#333;--ph-speccer-color-contrast:#ff3aa8;--ph-speccer-spacing-color:var(--ph-speccer-color-contrast);--ph-speccer-measure-color:red;--ph-speccer-pin-color:var(--ph-speccer-color-contrast);--ph-speccer-typography-background-color:#fff;--ph-speccer-typography-color-property:#3f85f2;--ph-speccer-typography-color-text:#57575b;--ph-speccer-typography-color-value:var(--ph-speccer-color-contrast);--ph-speccer-depth-opacity-400:0.4;--ph-speccer-font-family:"Menlo for Powerline","Menlo Regular for Powerline","DejaVu Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--ph-speccer-font-size:12px;--ph-speccer-line-height:12px;--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-width:1px;--ph-speccer-line-width-negative:-1px;--ph-speccer-measure-size:8px}.ph.speccer,.ph.speccer:after,.ph.speccer:before{box-sizing:border-box;font-family:var(--ph-speccer-font-family)!important;font-size:12px;line-height:12px;pointer-events:none;user-select:none;z-index:99999}.ph.speccer,.ph.speccer.dissection,.ph.speccer:after,.ph.speccer:before{align-items:center;display:flex;justify-content:center;position:absolute}.ph.speccer.dissection{background-color:var(--ph-speccer-pin-color);border-radius:100%;box-sizing:initial;color:var(--ph-speccer-color-text-light);font-family:sans-serif;font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);line-height:150%;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection:after{background-color:var(--ph-speccer-pin-color);content:"";height:var(--ph-speccer-pin-space);position:absolute;top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph.speccer.dissection.outline.left:after{height:var(--ph-speccer-line-width);left:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.right:after{height:var(--ph-speccer-line-width);right:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.enclose{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph.speccer.dissection.outline.enclose.right:before{left:100%;right:auto}.ph.speccer.dissection.outline.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph.speccer.dissection.outline.enclose.left:before{left:auto;right:100%}.ph.speccer.dissection.outline.enclose.top:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.enclose.top:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before{bottom:auto;top:100%}.ph.speccer.dissection.outline.full{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.full.right{border-left:none}.ph.speccer.dissection.outline.full.right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.right:before{left:100%}.ph.speccer.dissection.outline.full.left{border-right:none}.ph.speccer.dissection.outline.full.left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.left:before{right:100%}.ph.speccer.dissection.outline.full.top{border-bottom:none}.ph.speccer.dissection.outline.full.top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.top:before{bottom:100%}.ph.speccer.dissection.outline.full.bottom{border-top:none}.ph.speccer.dissection.outline.full.bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.bottom:before{top:100%}.ph.speccer.dissection.outline.bottom:after{height:var(--ph-speccer-pin-space);right:50%;top:calc(-100% - var(--ph-speccer-pin-space)/2);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.top:after,.ph.speccer.dissection.outline:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}[data-anatomy-section]{counter-reset:type}.ph.speccer.dissection.outline.full.left,.ph.speccer.dissection.outline.full.right{width:8px}.ph.speccer.dissection.outline.full.bottom,.ph.speccer.dissection.outline.full.top{height:8px}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after,.ph.speccer.dissection.outline.full.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before,.ph.speccer.dissection.outline.full.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.enclose.left,.ph.speccer.dissection.outline.enclose.right{width:8px}.ph.speccer.dissection.outline.enclose.bottom,.ph.speccer.dissection.outline.enclose.top{height:8px}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after,.ph.speccer.dissection.outline.enclose.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before,.ph.speccer.dissection.outline.enclose.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.subtle{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color)}.ph.speccer.dissection.outline.subtle.bottom:after,.ph.speccer.dissection.outline.subtle.top:after{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.subtle.left:after,.ph.speccer.dissection.outline.subtle.right:after{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.dissection.outline.full.subtle{background-color:initial;border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph.speccer.dissection.outline.full.subtle.top{border-bottom:none}.ph.speccer.dissection.outline.full.subtle.bottom{border-top:none}.ph.speccer.dissection.outline.full.subtle.right{border-left:none}.ph.speccer.dissection.outline.full.subtle.left{border-right:none}.ph.speccer.dissection.outline.full.subtle:after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph.speccer.dissection.outline.full.subtle.bottom:before,.ph.speccer.dissection.outline.full.subtle.top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.full.subtle.left:before,.ph.speccer.dissection.outline.full.subtle.right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.dissection.outline.enclose.subtle{border-style:dashed}.ph.speccer.dissection.outline.enclose.subtle:after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph.speccer.dissection.outline.enclose.subtle.bottom:before,.ph.speccer.dissection.outline.enclose.subtle.top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.enclose.subtle.left:before,.ph.speccer.dissection.outline.enclose.subtle.right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.spacing{border:var(--ph-speccer-line-width) solid #0000;pointer-events:auto;transition:none}.ph.speccer.spacing:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin);color:var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding);color:var(--ph-speccer-spacing-color)}.ph.speccer.spacing.margin.bottom:after,.ph.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.margin.bottom:before,.ph.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.margin.left:after,.ph.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.margin.left:before,.ph.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.bottom:after,.ph.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.padding.bottom:before,.ph.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.padding.left:after,.ph.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.left:before,.ph.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);display:block;font-size:10px;line-height:140%;max-width:none;padding:8px;text-align:left;width:auto}.ph.speccer.typography,.ph.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph.speccer.typography.left:after,.ph.speccer.typography:after{left:100%}.ph.speccer.typography.left:after,.ph.speccer.typography.right:after,.ph.speccer.typography:after{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph.speccer.typography.right:after{left:auto;right:100%}.ph.speccer.typography.top:after{top:100%}.ph.speccer.typography.bottom:after,.ph.speccer.typography.top:after{height:var(--ph-speccer-pin-space);left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.typography.bottom:after{bottom:100%;top:auto}.ph.speccer.typography .speccer-styles{font-size:10px;line-height:140%;list-style:none;margin:0;padding:0 0 0 8px;width:100%}.ph.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:10px;font-weight:400;margin:0;padding:0;text-align:left}.ph.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:10px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph.speccer.measure.width{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color);height:var(--ph-speccer-measure-size)}.ph.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph.speccer.measure.width.bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph.speccer.measure.width.top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph.speccer.measure.height.left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.left:after{content:attr(data-measure);left:calc(-100% - 20px - var(--ph-speccer-line-width));position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph.speccer.measure.height.right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.right:after{content:attr(data-measure);left:calc(100% - var(--ph-speccer-measure-size));position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}.ph.speccer.measure.subtle.height.left,.ph.speccer.measure.subtle.height.right,.ph.speccer.measure.subtle.width.bottom,.ph.speccer.measure.subtle.width.top{border-style:dashed}.ph.speccer.measure.subtle.width.top{border-bottom:none}.ph.speccer.measure.subtle.width.bottom{border-top:none}.ph.speccer.measure.subtle.height.right{border-left:none}.ph.speccer.measure.subtle.height.left{border-right:none}
1	+ .ph.speccer{--ph-speccer-color-padding:#db6fff66;--ph-speccer-color-padding-hover:#db6fff;--ph-speccer-color-margin:#fff76f66;--ph-speccer-color-margin-hover:#fff76f;--ph-speccer-color-text-light:#fff;--ph-speccer-color-text-dark:#333;--ph-speccer-color-contrast:#ff3aa8;--ph-speccer-spacing-color:var(--ph-speccer-color-contrast);--ph-speccer-measure-color:red;--ph-speccer-pin-color:var(--ph-speccer-color-contrast);--ph-speccer-typography-background-color:#fff;--ph-speccer-typography-color-property:#3f85f2;--ph-speccer-typography-color-text:#57575b;--ph-speccer-typography-color-value:var(--ph-speccer-color-contrast);--ph-speccer-depth-opacity-400:0.4;--ph-speccer-font-family:"Menlo for Powerline","Menlo Regular for Powerline","DejaVu Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--ph-speccer-font-size:12px;--ph-speccer-line-height:12px;--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-width:1px;--ph-speccer-line-width-negative:-1px;--ph-speccer-measure-size:8px}.ph.speccer,.ph.speccer:after,.ph.speccer:before{box-sizing:border-box;font-family:var(--ph-speccer-font-family)!important;font-size:12px;line-height:12px;pointer-events:none;user-select:none;z-index:99999}.ph.speccer,.ph.speccer.dissection,.ph.speccer:after,.ph.speccer:before{align-items:center;display:flex;justify-content:center;position:absolute}.ph.speccer.dissection{background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);font-family:sans-serif;font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);line-height:150%;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection:after{background-color:var(--ph-speccer-pin-color);content:"";height:var(--ph-speccer-pin-space);position:absolute;top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph.speccer.dissection.outline.left:after{height:var(--ph-speccer-line-width);left:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.right:after{height:var(--ph-speccer-line-width);right:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.enclose{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph.speccer.dissection.outline.enclose.right:before{left:100%;right:auto}.ph.speccer.dissection.outline.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph.speccer.dissection.outline.enclose.left:before{left:auto;right:100%}.ph.speccer.dissection.outline.enclose.top:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.enclose.top:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before{bottom:auto;top:100%}.ph.speccer.dissection.outline.full{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.full.right{border-left:none}.ph.speccer.dissection.outline.full.right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.right:before{left:100%}.ph.speccer.dissection.outline.full.left{border-right:none}.ph.speccer.dissection.outline.full.left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.left:before{right:100%}.ph.speccer.dissection.outline.full.top{border-bottom:none}.ph.speccer.dissection.outline.full.top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.top:before{bottom:100%}.ph.speccer.dissection.outline.full.bottom{border-top:none}.ph.speccer.dissection.outline.full.bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.bottom:before{top:100%}.ph.speccer.dissection.outline.bottom:after{height:var(--ph-speccer-pin-space);right:50%;top:calc(-100% - var(--ph-speccer-pin-space)/2);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.top:after,.ph.speccer.dissection.outline:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}[data-anatomy-section]{counter-reset:type}.ph.speccer.dissection.outline.full.left,.ph.speccer.dissection.outline.full.right{width:8px}.ph.speccer.dissection.outline.full.bottom,.ph.speccer.dissection.outline.full.top{height:8px}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after,.ph.speccer.dissection.outline.full.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before,.ph.speccer.dissection.outline.full.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.enclose.left,.ph.speccer.dissection.outline.enclose.right{width:8px}.ph.speccer.dissection.outline.enclose.bottom,.ph.speccer.dissection.outline.enclose.top{height:8px}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after,.ph.speccer.dissection.outline.enclose.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before,.ph.speccer.dissection.outline.enclose.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.subtle{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color)}.ph.speccer.dissection.outline.subtle.bottom:after,.ph.speccer.dissection.outline.subtle.top:after{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.subtle.left:after,.ph.speccer.dissection.outline.subtle.right:after{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.dissection.outline.full.subtle{background-color:initial;border-color:var(--ph-speccer-pin-color);border-style:dashed;border-width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.full.subtle.top{border-bottom:none}.ph.speccer.dissection.outline.full.subtle.bottom{border-top:none}.ph.speccer.dissection.outline.full.subtle.right{border-left:none}.ph.speccer.dissection.outline.full.subtle.left{border-right:none}.ph.speccer.dissection.outline.full.subtle:after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph.speccer.dissection.outline.full.subtle.bottom:before,.ph.speccer.dissection.outline.full.subtle.top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.full.subtle.left:before,.ph.speccer.dissection.outline.full.subtle.right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.dissection.outline.enclose.subtle{border-style:dashed}.ph.speccer.dissection.outline.enclose.subtle:after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph.speccer.dissection.outline.enclose.subtle.bottom:before,.ph.speccer.dissection.outline.enclose.subtle.top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.enclose.subtle.left:before,.ph.speccer.dissection.outline.enclose.subtle.right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.spacing{border:var(--ph-speccer-line-width) solid #0000;pointer-events:auto;transition:none}.ph.speccer.spacing:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin);color:var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding);color:var(--ph-speccer-spacing-color)}.ph.speccer.spacing.margin.bottom:after,.ph.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.margin.bottom:before,.ph.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.margin.left:after,.ph.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.margin.left:before,.ph.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.bottom:after,.ph.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.padding.bottom:before,.ph.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.padding.left:after,.ph.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.left:before,.ph.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);display:block;font-size:10px;line-height:140%;max-width:none;padding:8px;text-align:left;width:auto}.ph.speccer.typography,.ph.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph.speccer.typography.left:after,.ph.speccer.typography:after{left:100%}.ph.speccer.typography.left:after,.ph.speccer.typography.right:after,.ph.speccer.typography:after{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph.speccer.typography.right:after{left:auto;right:100%}.ph.speccer.typography.top:after{top:100%}.ph.speccer.typography.bottom:after,.ph.speccer.typography.top:after{height:var(--ph-speccer-pin-space);left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.typography.bottom:after{bottom:100%;top:auto}.ph.speccer.typography .speccer-styles{font-size:10px;line-height:140%;list-style:none;margin:0;padding:0 0 0 8px;width:100%}.ph.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:10px;font-weight:400;margin:0;padding:0;text-align:left}.ph.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:10px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph.speccer.measure.width{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color);height:var(--ph-speccer-measure-size)}.ph.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph.speccer.measure.width.bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph.speccer.measure.width.top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph.speccer.measure.height.left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.left:after{content:attr(data-measure);left:calc(-100% - 20px - var(--ph-speccer-line-width));position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph.speccer.measure.height.right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.right:after{content:attr(data-measure);left:calc(100% - var(--ph-speccer-measure-size));position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}.ph.speccer.measure.subtle.height.left,.ph.speccer.measure.subtle.height.right,.ph.speccer.measure.subtle.width.bottom,.ph.speccer.measure.subtle.width.top{border-style:dashed}.ph.speccer.measure.subtle.width.top{border-bottom:none}.ph.speccer.measure.subtle.width.bottom{border-top:none}.ph.speccer.measure.subtle.height.right{border-left:none}.ph.speccer.measure.subtle.height.left{border-right:none}