@phun-ky/speccer 5.0.0 → 6.0.2

package/README.md

@@ -1,8 +1,8 @@
 # speccer
 
-![npm version](https://img.shields.io/npm/v/@phun-ky/speccer) ![issues](https://img.shields.io/github/issues/phun-ky/speccer) ![license](https://img.shields.io/npm/l/@phun-ky/speccer) ![size](https://img.shields.io/bundlephobia/min/@phun-ky/speccer)
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](http://makeapullrequest.com) [![SemVer 2.0](https://img.shields.io/badge/SemVer-2.0-green.svg)](http://semver.org/spec/v2.0.0.html) ![npm version](https://img.shields.io/npm/v/@phun-ky/speccer) ![issues](https://img.shields.io/github/issues/phun-ky/speccer) ![license](https://img.shields.io/npm/l/@phun-ky/speccer) ![size](https://img.shields.io/bundlephobia/min/@phun-ky/speccer)
 
-> A script to show specifications on components in your design system documentation
+> A zero dependency package to show specifications on components in your design system documentation
 
 Speccer was created to make it easier to document components in a design system.
 
@@ -149,7 +149,7 @@ If you're importing speccer instead of with a script tag, you can use the follow
 import { dissect } from '@phun-ky/speccer';
 
 let dissectElementObserver = new IntersectionObserver((entries, observer) => {
-  entries.forEach(entry => {
+  entries.forEach((entry) => {
     const targets = entry.target.querySelectorAll('[data-anatomy]');
     if (entry.intersectionRatio > 0) {
       targets.forEach(dissect.element);
@@ -158,7 +158,7 @@ let dissectElementObserver = new IntersectionObserver((entries, observer) => {
   });
 });
 
-document.querySelectorAll('[data-anatomy-section]').forEach(el => {
+document.querySelectorAll('[data-anatomy-section]').forEach((el) => {
   dissectElementObserver.observe(el);
 });
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phun-ky/speccer",
-  "version": "5.0.0",
+  "version": "6.0.2",
   "description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
   "main": "speccer.js",
   "publishConfig": {
@@ -10,7 +10,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "rollup": "rollup -c",
     "rollup:dev": "npm run clean && rollup -c -w",
-    "clean": "rm -rf ./speccer.css ./speccer.min.css ./speccer.js",
+    "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",
@@ -19,6 +19,12 @@
     "commit": "npx git-cz",
     "release": "npx standard-version"
   },
+  "files": [
+    "/speccer.js",
+    "/speccer.js.map",
+    "/speccer.min.css",
+    "/speccer.css"
+  ],
   "standard-version": {
     "scripts": {
       "prerelease": "npm run build",
@@ -122,7 +128,14 @@
     "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",
-    "stylus": "^0.56.0"
+    "rollup-plugin-typescript2": "^0.31.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.4",
+    "network-information-types": "^0.1.0"
   }
 }

package/speccer.css

@@ -334,13 +334,6 @@
 .ph.speccer.spacing:hover {
   border: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
 }
-.is-specced:hover ~ .ph.speccer.spacing.margin {
-  background-color: var(--ph-speccer-color-margin-hover);
-}
-.is-specced:hover ~ .ph.speccer.spacing.padding {
-  background-color: var(--ph-speccer-color-padding-hover);
-  color: var(--ph-speccer-color-text-light);
-}
 .ph.speccer.spacing.margin {
   background-color: var(--ph-speccer-color-margin);
   color: var(--ph-speccer-color-text-dark);
@@ -440,15 +433,14 @@
 .ph.speccer.typography {
   background-color: var(--ph-speccer-typography-background-color);
   color: var(--ph-speccer-typography-color-text);
-  font-size: 12px;
-  padding: 8px 24px;
+  font-size: 10px;
+  padding: 8px;
   max-width: none;
   width: auto;
   display: block;
   text-align: left;
   line-height: 140%;
   border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
-  min-width: 320px;
 }
 .ph.speccer.typography:hover {
   border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
@@ -462,14 +454,14 @@
   top: 50%;
   transform: translateY(-50%);
   height: var(--ph-speccer-line-width);
-  width: 48px;
+  width: var(--ph-speccer-pin-space);
 }
 .ph.speccer.typography.left:after {
   left: 100%;
   top: 50%;
   transform: translateY(-50%);
   height: var(--ph-speccer-line-width);
-  width: 48px;
+  width: var(--ph-speccer-pin-space);
 }
 .ph.speccer.typography.right:after {
   left: auto;
@@ -477,14 +469,14 @@
   top: 50%;
   transform: translateY(-50%);
   height: var(--ph-speccer-line-width);
-  width: 48px;
+  width: var(--ph-speccer-pin-space);
 }
 .ph.speccer.typography.top:after {
   left: 50%;
   right: auto;
   top: 100%;
   transform: translateX(-50%);
-  height: 48px;
+  height: var(--ph-speccer-pin-space);
   width: var(--ph-speccer-line-width);
 }
 .ph.speccer.typography.bottom:after {
@@ -493,7 +485,7 @@
   top: auto;
   bottom: 100%;
   transform: translateX(-50%);
-  height: 48px;
+  height: var(--ph-speccer-pin-space);
   width: var(--ph-speccer-line-width);
 }
 .ph.speccer.typography .speccer-styles {
@@ -502,15 +494,15 @@
   padding: 0;
   margin: 0;
   line-height: 140%;
-  padding-left: 1rem;
-  font-size: 12px;
+  padding-left: 8px;
+  font-size: 10px;
 }
 .ph.speccer.typography .speccer-styles .property {
   font-weight: normal;
   color: var(--ph-speccer-typography-color-property);
   text-align: left;
   padding: 0;
-  font-size: 12px;
+  font-size: 10px;
   margin: 0;
 }
 .ph.speccer.typography .speccer-styles > li {
@@ -518,7 +510,7 @@
   color: var(--ph-speccer-typography-color-value);
   text-align: left;
   padding: 0;
-  font-size: 12px;
+  font-size: 10px;
   margin: 0;
   list-style: none;
   border: none;

package/speccer.js

@@ -1 +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)=>t.insertAdjacentElement("afterend",e),n=(t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))},i=(t,e,n="noop")=>{t&&(!e||e&&0===e.length||e.trim().split(" ").filter((t=>t!==n)).forEach((e=>t.classList.add(e))))},o=t=>parseInt(t,10),p=t=>{const e=parseFloat(t);return e>=0&&e<1||e<=0&&e>-1?0:e},s=()=>new Promise(requestAnimationFrame),a=async(t,e)=>{t&&(!e||e&&0===e.length&&e.constructor===String||e&&0===e.length&&e.constructor===Array||e&&0===Object.keys(e).length&&e.constructor===Object||(await s(),"string"==typeof e||Array.isArray(e)?e.forEach((e=>t.style[e.key]=e.value)):Object.keys(e).forEach((n=>t.style[n]=e[n]))))},l=async t=>(await s(),window.getComputedStyle?getComputedStyle(t,null):t.currentStyle),r=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],d=["TR","TH","TD","TBODY","THEAD","TFOOT"],c=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(t);return n.appendChild(o),n.setAttribute("title",t+"px"),i(n,"ph speccer spacing"),n},h=async t=>{const n={},s=await l(t);if("none"===s.display||"hidden"===s.visibility)return;t.classList.add("is-specced");if("static"===l(t.parentElement).position&&window.requestAnimationFrame((()=>{t.parentElement.style.position="relative"})),n.styles=(t=>{const{marginTop:e,marginBottom:n,marginLeft:i,marginRight:o,paddingTop:p,paddingBottom:s,paddingLeft:a,paddingRight:l}=t;return{marginTop:e,marginBottom:n,marginLeft:i,marginRight:o,paddingTop:p,paddingBottom:s,paddingLeft:a,paddingRight:l}})(s),n.rect=t.getBoundingClientRect(),"0px"!==n.styles.marginTop){const s=c(o(n.styles.marginTop));i(s,"margin top"),a(s,{height:n.styles.marginTop,width:n.rect.width+"px",left:p(n.rect.x-t.parentElement.getBoundingClientRect().x)+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y-parseInt(n.styles.marginTop,10))+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.marginRight){const s=c(o(n.styles.marginRight));i(s,"margin right"),a(s,{height:n.rect.height+"px",width:n.styles.marginRight,left:p(n.rect.x-t.parentElement.getBoundingClientRect().x+parseInt(n.rect.width,10))+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y)+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.marginBottom){const s=c(o(n.styles.marginBottom));i(s,"margin bottom"),a(s,{height:n.styles.marginBottom,width:n.rect.width+"px",left:p(n.rect.x-t.parentElement.getBoundingClientRect().x)+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y+parseInt(n.rect.height,10))+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.marginLeft){const s=c(o(n.styles.marginLeft));i(s,"margin left"),a(s,{height:n.rect.height+"px",width:n.styles.marginLeft,left:p(n.rect.x-t.parentElement.getBoundingClientRect().x-parseInt(n.styles.marginLeft,10))+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y)+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.paddingTop){const s=c(o(n.styles.paddingTop));i(s,"padding top"),a(s,{height:n.styles.paddingTop,width:n.rect.width+"px",left:p(n.rect.x-t.parentElement.getBoundingClientRect().x)+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y)+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.paddingBottom){const s=c(o(n.styles.paddingBottom));i(s,"padding bottom"),a(s,{height:n.styles.paddingBottom,width:n.rect.width+"px",left:p(n.rect.x-t.parentElement.getBoundingClientRect().x)+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y+(parseInt(n.rect.height,10)-parseInt(n.styles.paddingBottom,10)))+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.paddingRight){const s=c(o(n.styles.paddingRight));i(s,"padding right"),a(s,{height:n.rect.height+"px",width:n.styles.paddingRight,left:p(n.rect.x-t.parentElement.getBoundingClientRect().x+(parseInt(n.rect.width,10)-parseInt(n.styles.paddingRight,10)))+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y)+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.paddingLeft){const s=c(o(n.styles.paddingLeft));i(s,"padding left"),a(s,{height:n.rect.height+"px",width:n.styles.paddingLeft,left:p(n.rect.x-t.parentElement.getBoundingClientRect().x)+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y)+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}};const g=(t="",e,n="span")=>{const o=document.createElement(n),p=document.createTextNode(t);return-1===e.indexOf("full")&&-1===e.indexOf("enclose")?o.appendChild(p):-1===e.indexOf("full")&&-1===e.indexOf("enclose")||o.setAttribute("data-dissection-counter",t),i(o,`ph speccer dissection ${e}`),o},f=(t,n)=>{const i=t.getBoundingClientRect(),o=t.getAttribute("data-anatomy"),p=g(r[n],o),s=d.indexOf(t.nodeName)>=0;let c=0,h=0;if(s){const n=t.closest("table"),i=l(n.parentElement);e(n,p);const o=n.getBoundingClientRect();c=o.top-parseInt(i.getPropertyValue("padding-top"),10),h=o.left-parseInt(i.getPropertyValue("padding-left"),10)}else e(t,p);const f=t.offsetLeft,x=t.offsetTop,m=p.getBoundingClientRect(),u=(s?i.left-h:f)-m.width-48+"px",y=(s?i.top-c:x)+i.height/2-m.height/2+"px",w=(s?i.left-h:f)+i.width+48+"px",O=(s?i.top-c:x)+i.height/2-m.height/2+"px",b=(s?i.left-h:f)+i.width/2-m.width/2+"px",E=(s?i.top-c:x)-m.height-48+"px",R=(s?i.left-h:f)+i.width/2-m.width/2+"px",B=(s?i.top-c:x)+i.height+48+"px";let C={};C=-1!==o.indexOf("outline")?-1!==o.indexOf("left")?-1!==o.indexOf("full")?{left:f-8+"px",top:x+-1+"px",height:i.height+"px"}:-1!==o.indexOf("enclose")?{left:f-1+"px",top:x+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:u,top:y}:-1!==o.indexOf("right")?-1!==o.indexOf("full")?{left:f+i.width+"px",top:x+-1+"px",height:i.height+"px"}:-1!==o.indexOf("enclose")?{left:f+-1+"px",top:x+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:w,top:O}:-1!==o.indexOf("top")?-1!==o.indexOf("full")?{top:x+-8+"px",left:f+-1+"px",width:i.width+"px"}:-1!==o.indexOf("enclose")?{top:x+-1+"px",left:f+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:b,top:E}:-1!==o.indexOf("bottom")?-1!==o.indexOf("full")?{top:x+i.height+"px",left:f+-1+"px",width:i.width+"px"}:-1!==o.indexOf("enclose")?{top:x+-1+"px",left:f+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:R,top:B}:-1!==o.indexOf("full")?{left:f+i.width+"px",top:x+"px",height:i.height+"px"}:-1!==o.indexOf("enclose")?{left:f+i.width+"px",top:x+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:u,top:y}:-1!==o.indexOf("full")?{left:f-8+"px",top:x+-1+"px",height:i.height+"px"}:-1!==o.indexOf("enclose")?{left:f-1+"px",top:x+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:u,top:y},a(p,C)};const x=(t="",e="",n="span")=>{const o=document.createElement(n);return o.setAttribute("title",t+"px"),o.setAttribute("data-measure",parseInt(t,10)+"px"),i(o,`ph speccer measure ${e}`),o},m=t=>{if(!t)return;const n=t.getBoundingClientRect(),i=t.getAttribute("data-speccer-measure");if(""===i)return;const o=t.offsetTop,p=t.offsetLeft;if(-1!==i.indexOf("width"))if(-1!==i.indexOf("bottom")){const i=x(n.width,"width bottom");d.indexOf(t.nodeName)>=0?e(t.closest("table"),i):e(t,i),a(i,{left:p+"px",top:o+n.height+1+"px",width:n.width+"px"})}else{const i=x(n.width,"width top");d.indexOf(t.nodeName)>=0?e(t.closest("table"),i):e(t,i);const s=i.getBoundingClientRect();a(i,{left:p+"px",top:o-s.height+1+"px",width:n.width+"px"})}else if(-1!==i.indexOf("height"))if(-1!==i.indexOf("right")){const i=x(n.height,"height right");d.indexOf(t.nodeName)>=0?e(t.closest("table"),i):e(t,i),a(i,{left:p+n.width+"px",top:o+"px",height:n.height+"px"})}else{const i=x(n.height,"height left");d.indexOf(t.nodeName)>=0?e(t.closest("table"),i):e(t,i);const s=i.getBoundingClientRect();a(i,{left:p-s.width+"px",top:o+"px",height:n.height+"px"})}};const u=t=>parseFloat(t).toFixed(3),y=(t,e)=>{const n=document.createElement("div");return n.innerHTML=t,i(n,`ph speccer typography ${e}`),n},w=async t=>{const n=t.getAttribute("data-speccer-typography"),i=await l(t);if("none"===i.display||"hidden"===i.visibility)return;t.classList.add("is-specced");"static"===l(t.parentElement).position&&window.requestAnimationFrame((()=>{t.parentElement.style.position="relative"}));const o=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:i,fontSize:o,fontStyle:p,fontVariationSettings:s,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:i,fontSize:o,fontStyle:p,fontVariationSettings:s,fontWeight:a}})(i),p=t.getBoundingClientRect(),s=`\n    font-styles: {<ul class="speccer-styles">  <li><span class="property">font-family:</span> ${o.fontFamily};</li>  <li><span class="property">font-size:</span> ${o.fontSize} / ${parseInt(o.fontSize,10)/16}rem;</li>  <li><span class="property">font-weight:</span> ${o.fontWeight};</li>  <li><span class="property">font-variation-settings:</span> ${o.fontVariationSettings};</li>  <li><span class="property">line-height:</span> ${o.lineHeight} / ${parseInt(o.lineHeight,10)/16}rem;</li>  <li><span class="property">letter-spacing:</span> ${o.letterSpacing};</li>  <li><span class="property">font-style:</span> ${o.fontStyle};</li></ul>}`,r=y(s,n);let c=0,h=0;const g=d.indexOf(t.nodeName)>=0;if(g){const n=t.parentElement,i=window.getComputedStyle(n.parentElement);e(n,r),c=n.getBoundingClientRect().top-parseInt(i.getPropertyValue("padding-top"),10),h=n.getBoundingClientRect().left-parseInt(i.getPropertyValue("padding-left"),10)}else e(t,r);const f=r.getBoundingClientRect(),x=(g?f.left-h:t.offsetLeft)-f.width-48+"px",m=u((g?f.top-c:t.offsetTop)-f.height/2+p.height/2)+"px",w=(g?f.left-h:t.offsetLeft)+p.width+48+"px",O=u((g?f.top-c:t.offsetTop)-f.height/2+p.height/2)+"px",b=u((g?f.left-h:t.offsetLeft)-f.width/2+p.width/2)+"px",E=(g?f.top-c:t.offsetTop)-f.height-48+"px",R=u((g?f.left-h:t.offsetLeft)-f.width/2+p.width/2)+"px",B=(g?f.top-c:t.offsetTop)+p.height+48+"px";let C={left:x,top:m};-1!==n.indexOf("right")?C={left:w,top:O}:-1!==n.indexOf("top")?C={left:b,top:E}:-1!==n.indexOf("bottom")&&(C={left:R,top:B}),a(r,C)};const O=t=>{const e=(n=()=>{t()},i=300,function(){var t=this,e=arguments,s=function(){p=null,o||n.apply(t,e)},a=o&&!p;clearTimeout(p),p=setTimeout(s,i),a&&n.apply(t,e)});var n,i,o,p;window.removeEventListener("resize",e),window.addEventListener("resize",e)},b=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",t):t()},E=()=>{n(".speccer"),n(".dissection");const t=document.querySelectorAll("[data-speccer],[data-speccer] *:not(td)"),e=document.querySelectorAll("[data-speccer-measure]"),i=document.querySelectorAll("[data-speccer-typography]"),o=document.querySelectorAll("[data-anatomy-section] [data-anatomy]");t.forEach(h),e.forEach(m),i.forEach(w),o.forEach(f)},R=Object.freeze({__proto__:null,create:c,element:h}),B=Object.freeze({__proto__:null,create:g,element:f}),C=Object.freeze({__proto__:null,element:m}),A=Object.freeze({__proto__:null,create:y,element:w});(t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");-1===n.indexOf("speccer.js")&&-1===n.indexOf("JaXpOK.js")||(e.hasAttribute("data-manual")?(t=>{window.speccer=t})(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?b(t):e.hasAttribute("data-lazy")?(()=>{const t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(h(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer],[data-speccer] *:not(td)").forEach((e=>{t.observe(e)}));const e=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(m(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=>{const n=t.target.querySelectorAll("[data-anatomy]");t.intersectionRatio>0&&(n.forEach(f),e.unobserve(t.target))}))}));document.querySelectorAll("[data-anatomy-section]").forEach((t=>{n.observe(t)}))})():b(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||O(t))}})(E),t.default=E,t.dissect=B,t.measure=C,t.spacing=R,t.typography=A,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,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])))},s=async t=>(await a(),getComputedStyle(t,null)),d=(t,e,n)=>t-e.width/2+n.width/2,r=(t,e,n)=>t-e.height/2+n.height/2,c=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=>{const n={},i=await s(t);if("none"===i.display||"hidden"===i.visibility||!t.parentElement)return;t.classList.add("is-specced"),n.styles=(t=>{const{marginTop:e,marginBottom:n,marginLeft:i,marginRight:o,paddingTop:p,paddingBottom:a,paddingLeft:l,paddingRight:s}=t;return{marginTop:e,marginBottom:n,marginLeft:i,marginRight:o,paddingTop:p,paddingBottom:a,paddingLeft:l,paddingRight:s}})(i);const p=t.getBoundingClientRect(),a=await c(t);if("0px"!==n.styles.marginTop){const t=h(o(n.styles.marginTop));document.body.appendChild(t),e(t,"margin top"),l(t,{height:n.styles.marginTop,width:p.width+"px",left:a.left+"px",top:a.top-parseInt(n.styles.marginTop,10)+"px"})}if("0px"!==n.styles.marginRight){const t=h(o(n.styles.marginRight));e(t,"margin right"),l(t,{height:p.height+"px",width:n.styles.marginRight,left:a.left+parseInt(p.width+"",10)+"px",top:a.top+"px"}),document.body.appendChild(t)}if("0px"!==n.styles.marginBottom){const t=h(o(n.styles.marginBottom));e(t,"margin bottom"),l(t,{height:n.styles.marginBottom,width:p.width+"px",left:a.left+"px",top:a.top+parseInt(p.height+"",10)+"px"}),document.body.appendChild(t)}if("0px"!==n.styles.marginLeft){const t=h(o(n.styles.marginLeft));e(t,"margin left"),l(t,{height:p.height+"px",width:n.styles.marginLeft,left:a.left-parseInt(n.styles.marginLeft,10)+"px",top:a.top+"px"}),document.body.appendChild(t)}if("0px"!==n.styles.paddingTop){const t=h(o(n.styles.paddingTop));e(t,"padding top"),l(t,{height:n.styles.paddingTop,width:p.width+"px",left:a.left+"px",top:a.top+"px"}),document.body.appendChild(t)}if("0px"!==n.styles.paddingBottom){const t=h(o(n.styles.paddingBottom));e(t,"padding bottom"),l(t,{height:n.styles.paddingBottom,width:p.width+"px",left:a.left+"px",top:a.top+(parseInt(p.height+"",10)-parseInt(n.styles.paddingBottom,10))+"px"}),document.body.appendChild(t)}if("0px"!==n.styles.paddingRight){const t=h(o(n.styles.paddingRight));e(t,"padding right"),l(t,{height:p.height+"px",width:n.styles.paddingRight,left:a.left+(parseInt(p.width+"",10)-parseInt(n.styles.paddingRight,10))+"px",top:a.top+"px"}),document.body.appendChild(t)}if("0px"!==n.styles.paddingLeft){const t=h(o(n.styles.paddingLeft));e(t,"padding left"),l(t,{height:p.height+"px",width:n.styles.paddingLeft,left:a.left+"px",top:a.top+"px"}),document.body.appendChild(t)}};var g,u,x=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"}(u||(u={}));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(u.Full)&&-1===i.indexOf(u.Enclose)?p.appendChild(a):-1===i.indexOf(u.Full)&&-1===i.indexOf(u.Enclose)||p.setAttribute("data-dissection-counter",t);const s=n("ph speccer dissection",l);return e(p,s),p},w=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 c(e),s=l.left-o.width-a+"px",h=m(r(l.top,o,i))+"px",f=l.left+i.width+a+"px",g=m(r(l.top,o,i))+"px",x=m(d(l.left,o,i))+"px",y=l.top-o.height-a+"px",w=m(d(l.left,o,i))+"px",b=l.top+i.height+a+"px";let O={};return O=-1!==t.indexOf(u.Outline)?-1!==t.indexOf(u.Left)?-1!==t.indexOf(u.Full)?{left:l.left-8+"px",top:l.top+-1+"px",height:i.height+"px"}:-1!==t.indexOf(u.Enclose)?{left:l.left-1+"px",top:l.top+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:s,top:h}:-1!==t.indexOf(u.Right)?-1!==t.indexOf(u.Full)?{left:l.left+i.width+"px",top:l.top+-1+"px",height:i.height+"px"}:-1!==t.indexOf(u.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(u.Top)?-1!==t.indexOf(u.Full)?{top:l.top+-8+"px",left:l.left+-1+"px",width:i.width+"px"}:-1!==t.indexOf(u.Enclose)?{top:l.top+-1+"px",left:l.left+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:x,top:y}:-1!==t.indexOf(u.Bottom)?-1!==t.indexOf(u.Full)?{top:l.top+i.height+"px",left:l.left+-1+"px",width:i.width+"px"}:-1!==t.indexOf(u.Enclose)?{top:l.top+-1+"px",left:l.left+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:w,top:b}:-1!==t.indexOf(u.Full)?{left:l.left+i.width+"px",top:l.top+"px",height:i.height+"px"}:-1!==t.indexOf(u.Enclose)?{left:l.left+i.width+"px",top:l.top+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:s,top:h}:-1!==t.indexOf(u.Full)?{left:l.left-8+"px",top:l.top+-1+"px",height:i.height+"px"}:-1!==t.indexOf(u.Enclose)?{left:l.left-1+"px",top:l.top+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:s,top:h},O})(n,t,o);l(o,a)};const b=(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},O=t=>{if(!t)return;const e=t.getBoundingClientRect(),n=t.getAttribute("data-speccer-measure");if(""===n||!n)return;const i=t.getBoundingClientRect(),o=i.top+window.pageYOffset,p=i.left+window.pageXOffset;if(-1!==n.indexOf("width"))if(-1!==n.indexOf("bottom")){const t=b(e.width,"width bottom");document.body.appendChild(t),l(t,{left:p+"px",top:o+e.height+1+"px",width:e.width+"px"})}else{const t=b(e.width,"width top");document.body.appendChild(t);const n=t.getBoundingClientRect();l(t,{left:p+"px",top:o-n.height+1+"px",width:e.width+"px"})}else if(-1!==n.indexOf("height"))if(-1!==n.indexOf("right")){const t=b(e.height,"height right");document.body.appendChild(t),l(t,{left:p+e.width+"px",top:o+"px",height:e.height+"px"})}else{const t=b(e.height,"height left");document.body.appendChild(t);const n=t.getBoundingClientRect();l(t,{left:p-n.width+"px",top:o+"px",height:e.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 C=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)},A=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},R=x,S=Object.freeze({__proto__:null,create:y,element:w}),B=Object.freeze({__proto__:null,element:O}),L=Object.freeze({__proto__:null,create:E,element:async t=>{if(!t)return;const e=t.getAttribute("data-speccer-typography"),n=await s(t);if("none"===n.display||"hidden"===n.visibility||!t.parentElement)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 s(t));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} / ${parseInt(e.lineHeight,10)/16}rem;</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 c(e),s=l.left-a.width-o+"px",h=m(r(l.top,a,i))+"px",f=l.left+i.width+o+"px",u=m(r(l.top,a,i))+"px",x=m(d(l.left,a,i))+"px",y=l.top-a.height-o+"px",w=m(d(l.left,a,i))+"px",b=l.top+i.height+o+"px";let O={left:s,top:h};return t&&-1!==t.indexOf(g.Right)?O={left:f,top:u}:t&&-1!==t.indexOf(g.Top)?O={left:x,top:y}:t&&-1!==t.indexOf(g.Bottom)&&(O={left:w,top:b}),O})(e,t,o);l(o,a)}}),T=()=>{((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] [data-anatomy]");t.forEach(R.element),e.forEach(B.element),n.forEach(L.element),i.forEach(S.element)};(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")?(t=>{window.speccer=t})(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?A(t):e.hasAttribute("data-lazy")?(()=>{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)").forEach((e=>{t.observe(e)}));const e=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(O(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=>{const n=t.target.querySelectorAll("[data-anatomy]");t.intersectionRatio>0&&(n.forEach(w),e.unobserve(t.target))}))}));document.querySelectorAll("[data-anatomy-section]").forEach((t=>{n.observe(t)}))})():A(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||C(t))}})(T),t.default=T,t.dissect=S,t.measure=B,t.spacing=R,t.typography=L,Object.defineProperty(t,"__esModule",{value:!0})}));
+//# sourceMappingURL=speccer.js.map

package/speccer.js.map

@@ -0,0 +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/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 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 { offset } from '../lib/position';\nimport { SpeccerElType } from '../types/speccer';\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  const _speccer_el: SpeccerElType = {};\n  const _el_style = await styles.get(targetEl);\n\n  if (_el_style.display === 'none' || _el_style.visibility === 'hidden' || !targetEl.parentElement) {\n    return;\n  }\n\n  targetEl.classList.add('is-specced');\n\n  _speccer_el.styles = css.getSpacing(_el_style);\n\n  const _target_rect = targetEl.getBoundingClientRect();\n  const _el_offset = await offset(targetEl);\n\n  if (_speccer_el.styles['marginTop'] !== '0px') {\n    const _speccer_margin_top_el = create(css.getNumberValue(_speccer_el.styles.marginTop));\n\n    document.body.appendChild(_speccer_margin_top_el);\n\n    classnames.set(_speccer_margin_top_el, 'margin top');\n    styles.add(_speccer_margin_top_el, {\n      height: _speccer_el.styles.marginTop,\n      width: _target_rect.width + 'px',\n      left: _el_offset.left + 'px',\n      top: _el_offset.top - parseInt(_speccer_el.styles.marginTop, 10) + 'px'\n    });\n  }\n\n  if (_speccer_el.styles['marginRight'] !== '0px') {\n    const _speccer_margin_right_el = create(css.getNumberValue(_speccer_el.styles.marginRight));\n\n    classnames.set(_speccer_margin_right_el, 'margin right');\n\n    styles.add(_speccer_margin_right_el, {\n      height: _target_rect.height + 'px',\n      width: _speccer_el.styles.marginRight,\n      left: _el_offset.left + parseInt(_target_rect.width + '', 10) + 'px',\n      top: _el_offset.top + 'px'\n    });\n\n    document.body.appendChild(_speccer_margin_right_el);\n  }\n\n  if (_speccer_el.styles['marginBottom'] !== '0px') {\n    const _speccer_margin_bottom_el = create(css.getNumberValue(_speccer_el.styles.marginBottom));\n\n    classnames.set(_speccer_margin_bottom_el, 'margin bottom');\n\n    styles.add(_speccer_margin_bottom_el, {\n      height: _speccer_el.styles.marginBottom,\n      width: _target_rect.width + 'px',\n      left: _el_offset.left + 'px',\n      top: _el_offset.top + parseInt(_target_rect.height + '', 10) + 'px'\n    });\n\n    document.body.appendChild(_speccer_margin_bottom_el);\n  }\n\n  if (_speccer_el.styles['marginLeft'] !== '0px') {\n    const _speccer_margin_left_el = create(css.getNumberValue(_speccer_el.styles.marginLeft));\n\n    classnames.set(_speccer_margin_left_el, 'margin left');\n\n    styles.add(_speccer_margin_left_el, {\n      height: _target_rect.height + 'px',\n      width: _speccer_el.styles.marginLeft,\n      left: _el_offset.left - parseInt(_speccer_el.styles.marginLeft, 10) + 'px',\n      top: _el_offset.top + 'px'\n    });\n\n    document.body.appendChild(_speccer_margin_left_el);\n  }\n\n  if (_speccer_el.styles['paddingTop'] !== '0px') {\n    const _speccer_padding_top_el = create(css.getNumberValue(_speccer_el.styles.paddingTop));\n\n    classnames.set(_speccer_padding_top_el, 'padding top');\n\n    styles.add(_speccer_padding_top_el, {\n      height: _speccer_el.styles.paddingTop,\n      width: _target_rect.width + 'px',\n      left: _el_offset.left + 'px',\n      top: _el_offset.top + 'px'\n    });\n\n    document.body.appendChild(_speccer_padding_top_el);\n  }\n\n  if (_speccer_el.styles['paddingBottom'] !== '0px') {\n    const _speccer_padding_bottom_el = create(css.getNumberValue(_speccer_el.styles.paddingBottom));\n\n    classnames.set(_speccer_padding_bottom_el, 'padding bottom');\n\n    styles.add(_speccer_padding_bottom_el, {\n      height: _speccer_el.styles.paddingBottom,\n      width: _target_rect.width + 'px',\n      left: _el_offset.left + 'px',\n      top:\n        _el_offset.top +\n        (parseInt(_target_rect.height + '', 10) - parseInt(_speccer_el.styles.paddingBottom, 10)) +\n        'px'\n    });\n\n    document.body.appendChild(_speccer_padding_bottom_el);\n  }\n\n  if (_speccer_el.styles['paddingRight'] !== '0px') {\n    const _speccer_padding_right_el = create(css.getNumberValue(_speccer_el.styles.paddingRight));\n\n    classnames.set(_speccer_padding_right_el, 'padding right');\n\n    styles.add(_speccer_padding_right_el, {\n      height: _target_rect.height + 'px',\n      width: _speccer_el.styles.paddingRight,\n      left:\n        _el_offset.left +\n        (parseInt(_target_rect.width + '', 10) - parseInt(_speccer_el.styles.paddingRight, 10)) +\n        'px',\n      top: _el_offset.top + 'px'\n    });\n\n    document.body.appendChild(_speccer_padding_right_el);\n  }\n\n  if (_speccer_el.styles['paddingLeft'] !== '0px') {\n    const _speccer_padding_left_el = create(css.getNumberValue(_speccer_el.styles.paddingLeft));\n\n    classnames.set(_speccer_padding_left_el, 'padding left');\n\n    styles.add(_speccer_padding_left_el, {\n      height: _target_rect.height + 'px',\n      width: _speccer_el.styles.paddingLeft,\n      left: _el_offset.left + 'px',\n      top: _el_offset.top + 'px'\n    });\n\n    document.body.appendChild(_speccer_padding_left_el);\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 = async (el: HTMLElement, dissectIndex: number) => {\n  if (!el) return;\n\n  const _area: string | null = el.getAttribute('data-anatomy') || '';\n\n  if (!_area || _area === '') return;\n\n  const _dissection_el = create(SPECCER_LITERALS[dissectIndex], _area);\n\n  document.body.appendChild(_dissection_el);\n\n  const _dissection_styles = await helpers.styles(_area, el, _dissection_el);\n\n  styles.add(_dissection_el, _dissection_styles);\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';\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 = (el: HTMLElement) => {\n  if (!el) return;\n\n  const _el_rect = el.getBoundingClientRect();\n  const _area: string | null = el.getAttribute('data-speccer-measure');\n\n  if (_area === '' || !_area) {\n    return;\n  }\n\n  const _target_rect = el.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(_el_rect.width, 'width bottom');\n\n      document.body.appendChild(_measure_el);\n\n      styles.add(_measure_el, {\n        left: _el_offset_left + 'px',\n        top: _el_offset_top + _el_rect.height + 1 + 'px',\n        width: _el_rect.width + 'px'\n      });\n    } else {\n      const _measure_el = create(_el_rect.width, 'width top');\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: _el_rect.width + 'px'\n      });\n    }\n  } else if (_area.indexOf('height') !== -1) {\n    if (_area.indexOf('right') !== -1) {\n      const _measure_el = create(_el_rect.height, 'height right');\n\n      document.body.appendChild(_measure_el);\n\n      styles.add(_measure_el, {\n        left: _el_offset_left + _el_rect.width + 'px',\n        top: _el_offset_top + 'px',\n        height: _el_rect.height + 'px'\n      });\n    } else {\n      const _measure_el = create(_el_rect.height, 'height left');\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: _el_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 (el: HTMLElement) => {\n  if (!el) return;\n\n  const _area: string | null = el.getAttribute('data-speccer-typography');\n  const _el_style = await styles.get(el);\n\n  if (_el_style.display === 'none' || _el_style.visibility === 'hidden' || !el.parentElement) {\n    return;\n  }\n\n  el.classList.add('is-specced');\n\n  const _html = await helpers.template(el);\n  const _speccer_el = create(_html, _area);\n\n  document.body.appendChild(_speccer_el);\n\n  const _position = await helpers.position(_area, el, _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.querySelectorAll('[data-speccer],[data-speccer] *:not(td)').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      const targets = el.target.querySelectorAll('[data-anatomy]');\n\n      if (el.intersectionRatio > 0) {\n        targets.forEach(dissect.element);\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\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] [data-anatomy]');\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\n__browser.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\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']} / ${\n      parseInt(_styles['lineHeight'], 10) / 16\n    }rem;</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","_speccer_el","_el_style","styles.get","display","visibility","parentElement","marginTop","marginBottom","marginLeft","marginRight","paddingTop","paddingBottom","paddingLeft","paddingRight","css.getSpacing","_el_offset","_speccer_margin_top_el","css.getNumberValue","body","styles.add","_speccer_margin_right_el","_speccer_margin_bottom_el","_speccer_margin_left_el","_speccer_padding_top_el","_speccer_padding_bottom_el","_speccer_padding_right_el","_speccer_padding_left_el","SpeccerAreaEnum","DissectAreaEnum","decimal","number","decimals","parseFloat","toFixed","textContent","area","n","_text_node","_extra_class_names","indexOf","Full","Enclose","_class_names","classnames.cx","dissectIndex","_area","getAttribute","_dissection_el","_dissection_styles","dissectionEl","_dissection_el_rect","SPECCER_PIN_SPACE","css.pinSpace","_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_rect","_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","spacing","__spacing","dissect","measure","typography","_html","_styles","lineHeight","letterSpacing","fontFamily","fontSize","fontStyle","fontVariationSettings","fontWeight","css.getTypography","helpers.template","_position","speccerEl","_speccer_el_rect","helpers.position","selector","call","querySelectorAll","e","remove","__node.removeAll","_els_to_be_specced","_els_to_be_measured","_els_to_be_typography_specced","_els_to_be_dissected","_script","currentScript","_speccer_script_src","hasAttribute","manual","_spec_observer","IntersectionObserver","els","observer","intersectionRatio","spec.element","target","unobserve","observe","_measure_observer","measure.element","_dissect_observer","targets","dissect.element","lazy","resize.activate"],"mappings":"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"}

package/speccer.min.css

@@ -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.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)}.is-specced:hover~.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin-hover)}.is-specced:hover~.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding-hover);color:var(--ph-speccer-color-text-light)}.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:12px;line-height:140%;max-width:none;min-width:320px;padding:8px 24px;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{height:var(--ph-speccer-line-width);left:100%;top:50%;transform:translateY(-50%);width:48px}.ph.speccer.typography.right:after{height:var(--ph-speccer-line-width);left:auto;right:100%;top:50%;transform:translateY(-50%);width:48px}.ph.speccer.typography.top:after{top:100%}.ph.speccer.typography.bottom:after,.ph.speccer.typography.top:after{height:48px;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:12px;line-height:140%;list-style:none;margin:0;padding:0 0 0 1rem;width:100%}.ph.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:12px;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:12px;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{--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.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)}

package/CHANGELOG.md

@@ -1,59 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-
-## [5.0.0](https://github.com/phun-ky/speccer/compare/v4.3.2...v5.0.0) (2022-02-22)
-
-
-### ⚠ BREAKING CHANGES
-
-* 🧨 Speccer is not supporting older browsers any more, to cut down on
-maintenance. Babel is now removed, but you can still polyfill or use
-babel for your own needs if you import the source files instead of the
-build files.
-
-### Tasks
-
-* 🤖 Remove babel, do not support older browsers anymore ([9ed11c0](https://github.com/phun-ky/speccer/commit/9ed11c06da3d1ac1b80d4cbbc6859146c596cd6f))
-
-### [4.3.2](https://github.com/phun-ky/speccer/compare/v4.3.1...v4.3.2) (2022-02-22)
-
-
-### Bug
-
-* And supply the minified version.. ([8cfb69a](https://github.com/phun-ky/speccer/commit/8cfb69a5dc86f1e9c9ccea3f890781a3961a0a7f))
-
-### [4.3.1](https://github.com/phun-ky/speccer/compare/v4.3.0...v4.3.1) (2022-02-22)
-
-
-### Bug
-
-* Use named exports ([7a4535e](https://github.com/phun-ky/speccer/commit/7a4535e65c04b33365258323376d6710fcb813c3))
-
-## [4.3.0](https://github.com/phun-ky/speccer/compare/v4.2.1...v4.3.0) (2022-02-22)
-
-
-### Feature
-
-* 🎸 Expose API a bit more ([093b465](https://github.com/phun-ky/speccer/commit/093b465653c32ec77fec6bb1d9d9e3adfd59809f))
-
-
-### Documentation
-
-* ✏️ Move images into assets ([2291b31](https://github.com/phun-ky/speccer/commit/2291b31d768a16f202f2ffed453cfc22f3027e67))
-* ✏️ Update documentation ([ec0807e](https://github.com/phun-ky/speccer/commit/ec0807e8c5d9c7eeaa807b80d7c432bee24d59d4))
-
-### [4.2.1](https://github.com/phun-ky/speccer/compare/v4.2.0...v4.2.1) (2022-02-22)
-
-## [4.2.0](https://github.com/phun-ky/speccer/compare/v4.1.0...v4.2.0) (2022-02-22)
-
-
-### Features
-
-* Use CSS variables ([21c3eb3](https://github.com/phun-ky/speccer/commit/21c3eb3f173ee96b0bf452bae44f76155fcf3cdf))
-
-## [4.1.0](https://github.com/phun-ky/speccer/compare/v4.0.0...v4.1.0) (2022-02-22)
-
-### Features
-
-- Add release script ([4cb72cb](https://github.com/phun-ky/speccer/commit/4cb72cbea7dd1d6bcb8f1102384b14eecaa9eef0))

package/src/browser.js

@@ -1,93 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-import * as resize from './lib/resize';
-import * as spec from './spec';
-import * as measure from './measure';
-import * as dissect from './dissect';
-
-export const dom = (speccer) => {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', speccer);
-  } else {
-    // `DOMContentLoaded` already fired
-    speccer();
-  }
-};
-
-export const lazy = () => {
-  const _spec_observer = new IntersectionObserver((els, observer) => {
-    els.forEach((el) => {
-      if (el.intersectionRatio > 0) {
-        spec.element(el.target);
-        observer.unobserve(el.target);
-      }
-    });
-  });
-
-  document.querySelectorAll('[data-speccer],[data-speccer] *:not(td)').forEach((el) => {
-    _spec_observer.observe(el);
-  });
-
-  const _measure_observer = new IntersectionObserver((els, observer) => {
-    els.forEach((el) => {
-      if (el.intersectionRatio > 0) {
-        measure.element(el.target);
-        observer.unobserve(el.target);
-      }
-    });
-  });
-
-  document.querySelectorAll('[data-speccer-measure]').forEach((el) => {
-    _measure_observer.observe(el);
-  });
-
-  const _dissect_observer = new IntersectionObserver((els, observer) => {
-    els.forEach((el) => {
-      const targets = el.target.querySelectorAll('[data-anatomy]');
-
-      if (el.intersectionRatio > 0) {
-        targets.forEach(dissect.element);
-        observer.unobserve(el.target);
-      }
-    });
-  });
-
-  document.querySelectorAll('[data-anatomy-section]').forEach((el) => {
-    _dissect_observer.observe(el);
-  });
-};
-
-export const manual = (speccer) => {
-  window.speccer = speccer;
-};
-
-export const activate = (speccer) => {
-  const _script = document.currentScript;
-
-  if (_script) {
-    const _speccer_script_src = _script.getAttribute('src');
-
-    if (
-      _speccer_script_src.indexOf('speccer.js') !== -1 ||
-      // for codepen
-      _speccer_script_src.indexOf('JaXpOK.js') !== -1
-    ) {
-      if (_script.hasAttribute('data-manual')) {
-        manual(speccer);
-      } else if (_script.hasAttribute('data-instant')) {
-        speccer();
-      } else if (_script.hasAttribute('data-dom')) {
-        dom(speccer);
-      } else if (_script.hasAttribute('data-lazy')) {
-        lazy();
-      } else {
-        dom(speccer);
-      }
-
-      if (!_script.hasAttribute('data-manual') && !_script.hasAttribute('data-lazy')) {
-        resize.activate(speccer);
-      }
-    }
-  }
-};