@phun-ky/speccer 11.1.1 → 11.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +11 -6
  2. package/dist/speccer.esm.js +2 -2
  3. package/dist/speccer.esm.js.map +1 -1
  4. package/dist/speccer.js +2 -2
  5. package/dist/speccer.js.map +1 -1
  6. package/package.json +3 -3
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @phun-ky/speccer
2
2
 
3
- ![Speccer hero, with logo and slogan: A zero dependency package to highlight elements](./public/speccer-hero.png)
3
+ ![Speccer hero, with logo and slogan: A zero dependency package to annotate or highlight elements](./public/speccer-hero.png)
4
4
 
5
5
  [![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) ![npm](https://img.shields.io/npm/dm/%40phun-ky/speccer) ![GitHub Repo stars](https://img.shields.io/github/stars/phun-ky/speccer) [![codecov](https://codecov.io/gh/phun-ky/speccer/graph/badge.svg?token=VA91DL7ZLZ)](https://codecov.io/gh/phun-ky/speccer) [![build](https://github.com/phun-ky/speccer/actions/workflows/check.yml/badge.svg)](https://github.com/phun-ky/speccer/actions/workflows/check.yml)
6
6
 
@@ -8,7 +8,7 @@
8
8
 
9
9
  ![Image of speccer](./public/speccer-pin-parent-align-light.png)
10
10
 
11
- **SPECCER** was originally created to simplify documenting components in a design system, but it can be used to highlight any HTML element on a webpage. If you need to draw attention to elements, **SPECCER** is your tool!
11
+ **SPECCER** was originally created to simplify documenting components in a design system, but it can be used to annotate or highlight any HTML element on a webpage. If you need to draw attention to elements, **SPECCER** is your tool!
12
12
 
13
13
  ## Table of Contents<!-- omit from toc -->
14
14
 
@@ -27,7 +27,7 @@
27
27
  - [Bound spacing](#bound-spacing)
28
28
  - [Element dimensions](#element-dimensions)
29
29
  - [Slim measure](#slim-measure)
30
- - [Pin element to highlight the anatomy](#pin-element-to-highlight-the-anatomy)
30
+ - [Pin element to annotate or highlight the anatomy](#pin-element-to-annotate-or-highlight-the-anatomy)
31
31
  - [Default](#default)
32
32
  - [Enclose](#enclose)
33
33
  - [Align with parent container](#align-with-parent-container)
@@ -47,6 +47,7 @@
47
47
  - [Customization](#customization)
48
48
  - [API](#api)
49
49
  - [Development](#development)
50
+ - [Used by](#used-by)
50
51
  - [Contributing](#contributing)
51
52
  - [License](#license)
52
53
  - [Changelog](#changelog)
@@ -265,7 +266,7 @@ Use a subtle style for the slim option, uses a dashed line instead of a solid li
265
266
 
266
267
  This will give a dashed border.
267
268
 
268
- ### Pin element to highlight the anatomy
269
+ ### Pin element to annotate or highlight the anatomy
269
270
 
270
271
  ![Image of speccer](./public/anatomy.png)
271
272
 
@@ -447,7 +448,7 @@ The curly brackets are made with SVG paths, and it is required to have the follo
447
448
 
448
449
  #### Pin programatically
449
450
 
450
- from v9.5 you can utilize the `pin` feature to highlight the anatomy of an element programaticaly. [Here is an example with a click event](https://codepen.io/phun-ky/pen/LYKOWyP).
451
+ from v9.5 you can utilize the `pin` feature to annotate or highlight the anatomy of an element programaticaly. [Here is an example with a click event](https://codepen.io/phun-ky/pen/LYKOWyP).
451
452
 
452
453
  [Kazam_screencast_00002.webm](https://github.com/user-attachments/assets/5c78cece-de46-4876-81f2-98c9108a2103)
453
454
 
@@ -660,6 +661,10 @@ $ npm run dev
660
661
  $ npm test
661
662
  ```
662
663
 
664
+ ## Used by
665
+
666
+ <svg height="48" width="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.4 111.6"><path d="M113.4 55.8c0 30.8-25.4 55.8-56.7 55.8-31.3 0-56.7-25-56.7-55.8C0 25 25.4 0 56.7 0c31.3 0 56.7 25 56.7 55.8z" fill="#0054f0"/><g fill="#fff"><path d="M49.4 40.7c-.1.3.1.6.4.6l4.8-.1s-6.5 26-7.8 31.3c-1.6 6.6-4.3 13.3-6.2 15.7-1.7 2.1-2.8 2.8-4 2.8-1.6 0-2.4-1.2-2.9-3.1-.3-1.4-1.2-3.3-3.2-3.3-2.1 0-4.9 2.3-4.9 5.2 0 3.8 6.4 4.7 8.5 4.7 4.2 0 9.7-2.7 13.3-6.9 4.7-5.3 7.3-11.9 9.7-21.2L63 41.1l6.2.1c.5 0 .7-.4.8-.6l.8-2.3c.1-.3-.1-.6-.4-.6H64c1.5-5.4 3.8-13.3 8.2-17.6.4-.4 1.5-1.3 2.5-1.3 1.7 0 2.2 1 3 2.6.7 1.6.6 4.3 3 4.3 2.8 0 4.9-3.1 4.9-5.2 0-2.9-5-4.8-9.1-4.8-4.7 0-9.3 2-12.6 5.3-4.7 4.8-6.9 11.9-8.4 16.8l-4.8-.1c-.3 0-.6.3-.7.5zm24.9 26.4c-.1 1.3-.8 4.8-4.7 4.8-2.3 0-4-1.5-3.8-4.2.1-2.7 2-4.9 4.7-5 1.8.1 4 1.3 3.8 4.4zm13.9 0c-.1 1.3-.8 4.8-4.7 4.8-2.3 0-4-1.5-3.8-4.2.1-2.7 2-4.9 4.7-5 1.7.1 3.9 1.3 3.8 4.4zm13.8 0c-.1 1.3-.8 4.8-4.7 4.8-2.3 0-4-1.5-3.8-4.2.1-2.7 2-4.9 4.7-5 1.8.1 3.9 1.3 3.8 4.4zM42.5 20.3c-2.9.1-4.9 2.4-5.1 5.3-.2 2.8 1.5 4.4 4 4.4 4.2 0 5.1-3.8 5.1-5.2.2-3.2-2-4.5-4-4.5z"/><path d="M35.6 57.4L40 46.7c.9-2.1 2-4.9 2-6.8 0-2.4-1.8-3-3.1-3-6 0-12.4 7-14.8 9.8-.2.2-.3.6.1.9l1.1 1.1c.2.2.6.2.8-.1 0 0 2.9-3.2 4-4 .3-.2.7-.5 1-.5.4 0 .6.6.6.9 0 1-1 3.4-1.5 4.6l-4.6 11.7c-1.6 3.9-2.4 6-2.4 7.7 0 2 1.1 3.6 3.9 3.6 6.4 0 14.4-9.6 14.4-9.6.3-.4.2-.7 0-.9L40.3 61c-.2-.2-.6-.3-.9 0 0 0-4.3 4.8-5.8 4.8-.7 0-.6-.8-.6-.9 0-.7.4-2 .7-2.6z"/></g></svg>
667
+
663
668
  ## Contributing
664
669
 
665
670
  Want to contribute? Please read the [CONTRIBUTING.md](https://github.com/phun-ky/speccer/blob/main/CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](https://github.com/phun-ky/speccer/blob/main/CODE_OF_CONDUCT.md)
@@ -684,6 +689,6 @@ The sponsorship is an unique opportunity to alleviate more hours for me to maint
684
689
 
685
690
  [Support me on GitHub Sponsors](https://github.com/sponsors/phun-ky).
686
691
 
687
- ![Speccer banner, with logo and slogan: A zero dependency package to highlight elements](./public/speccer-banner.png)
692
+ ![Speccer banner, with logo and slogan: A zero dependency package to annotate or highlight elements](./public/speccer-banner.png)
688
693
 
689
694
  p.s. **Ukraine is still under brutal Russian invasion. A lot of Ukrainian people are hurt, without shelter and need help**. You can help in various ways, for instance, directly helping refugees, spreading awareness, putting pressure on your local government or companies. You can also support Ukraine by donating e.g. to [Red Cross](https://www.icrc.org/en/donate/ukraine), [Ukraine humanitarian organisation](https://savelife.in.ua/en/donate-en/#donate-army-card-weekly) or [donate Ambulances for Ukraine](https://www.gofundme.com/f/help-to-save-the-lives-of-civilians-in-a-war-zone).
package/dist/speccer.esm.js CHANGED
@@ -2,7 +2,7 @@
2
2
  * @phun-ky/speccer
3
3
  * A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements
4
4
  * @author Alexander Vassbotn Røyne-Helgesen <alexander@phun-ky.net>
5
- * @version 11.1.1
5
+ * @version 11.1.3
6
6
  * @license
7
7
  * Copyright (c) 2018 Alexander Vassbotn Røyne-Helgesen
8
8
  *
@@ -24,5 +24,5 @@
24
24
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25
25
  * SOFTWARE.
26
26
  */
27
- const t=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],e="data-speccer",n="spacing",o="measure",i="typography",s="mark",r="grid",a="pin-area";var c,l,p,d,h,u,f;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(c||(c={})),function(t){t.Pin="pin",t.Parent="parent",t.Text="text",t.Enclose="enclose",t.Subtle="subtle",t.Bracket="bracket",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top",t.SVG="svg",t.Curly="curly"}(l||(l={})),function(t){t.Measure="measure",t.Slim="slim",t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(p||(p={})),function(t){t.Typography="typography",t.Syntax="syntax",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(d||(d={})),function(t){t.Spacing="spacing"}(h||(h={})),function(t){t.Mark="mark"}(u||(u={})),function(t){t.Grid="grid"}(f||(f={}));const g=t=>t.split(" "),m=t=>{if(null===t)return!1;return g(t).includes(l.Bracket)},y=t=>{if(null===t)return!1;return g(t).includes(l.Enclose)},w=t=>{if(null===t)return!1;return g(t).includes(l.Subtle)},x=t=>{if(null===t)return!1;return g(t).includes(l.Parent)},b=t=>{if(null===t)return!1;return g(t).includes(l.Text)},$=t=>{if(null===t)return!1;return g(t).includes(p.Height)},E=t=>{if(null===t)return!1;return g(t).includes(p.Slim)},A=t=>{if(null===t)return!1;return g(t).includes(p.Width)},k=t=>{if(null===t)return!1;const e=g(t);return(x(t)&&!y(t)&&!m(t)||b(t)||e.includes(l.SVG))&&!C(t)},C=t=>{if(null===t)return!1;const e=g(t);return e.includes(l.Curly)&&e.includes(l.Bracket)},S=t=>!!t&&t.split(" ").includes(d.Syntax),L=(t,e)=>(t=>null!==t&&t.split(" ").includes(l.Pin))(t)?"pin":((t,e)=>null!==t&&t.split(" ").includes(f.Grid)&&("grid"===e.display||e.display.includes("grid")))(t,e)?"grid":(t=>null!==t&&t.split(" ").includes(u.Mark))(t)?"mark":(t=>null!==t&&t.split(" ").includes(p.Measure))(t)?"measure":(t=>null!==t&&t.split(" ").includes(h.Spacing))(t)?"spacing":(t=>null!==t&&t.split(" ").includes(d.Typography))(t)?"typography":"pin",v=t=>(t=>null!==t&&g(t).includes(l.Left))(t)?"left":(t=>null!==t&&g(t).includes(l.Right))(t)?"right":(t=>null!==t&&g(t).includes(l.Bottom))(t)?"bottom":"top",P=(t,e,n)=>{const o=L(t,e),i={slug:(s=t,s.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").trim().toLowerCase().replace(/[^a-z0-9 -]/g,"").replace(/\s+/g," ").replace(/(?:^\w|[A-Z]|\b\w)/g,((t,e)=>0===e?t.toLowerCase():t.toUpperCase())).replace(/\s+/g,"")),position:v(t),type:o};var s;if("pin"===o&&(i.pin={bracket:m(t),enclose:y(t),subtle:w(t),parent:x(t),text:b(t),useSVGLine:k(t),useCurlyBrackets:C(t)}),"measure"===o&&(i.measure={slim:E(t),height:$(t),width:A(t)}),"typography"===o&&(i.typography={useSyntaxHighlighting:S(t)}),"grid"===o){const e=(t=>t?.includes("columns")?"columns":t?.includes("rows")?"rows":"both")(t);i.grid={toggle:e,both:"both"===e,rows:"rows"===e,columns:"columns"===e}}if("spacing"===o){const e=(t=>t?.includes("margin")?"margin":t?.includes("padding")?"padding":"both")(t);i.spacing={both:"both"===e,margin:"margin"===e,padding:"padding"===e,bound:t.includes("bound")}}return{...i,...n}},B=()=>"_"+Math.random().toString(36).substring(2,11),R=t=>!t.checkVisibility({opacityProperty:!0,checkVisibilityCSS:!0}),T=()=>new Promise(requestAnimationFrame),H=async(t,e,n)=>{await T();return getComputedStyle(t)[e]===n},I=async(t,e,n)=>{if(!t.parentElement)return null;return await H(t.parentElement,e,n)?t.parentElement:await I(t.parentElement,e,n)},M=(t,e,n)=>t-e.width/2+n.width/2,N=(t,e,n)=>t-e.height/2+n.height/2,q=async t=>{await T();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,i=await(async t=>await I(t,"position","sticky"))(t),s=await(async t=>await H(t,"position","sticky"))(t);if(s){const o=t.style.position;await T(),t.style.position="relative",await T(),e=t.getBoundingClientRect(),n=e.top,await T(),t.style.position=o}else if(i){const o=i.style.position;await T(),i.style.position="relative",await T(),e=t.getBoundingClientRect(),n=e.top,await T(),i.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},O=async(t,e)=>{await T();const n=t.getBoundingClientRect(),o=await q(e),i=await(async(t,e)=>{await T();const n=t.getBoundingClientRect();await T();const o=e.getBoundingClientRect(),i=o.top+window.scrollY,s=o.left+window.scrollX;return{height:o.height,width:o.width,top:N(i,n,o),left:M(s,n,o)}})(t,e),s=o.height,r=o.width,a=n.height,c=n.width;return{absolute:()=>({top:o.top,left:o.left,height:s,width:r}),toTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top-e-n,left:t?i.left:o.left,height:s,width:r}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:n=s,modifier:c=0}={})=>({top:o.top+n-(e+c),left:t?i.left:o.left,height:s,width:r}),fromBottom:({center:t=!1,targetHeight:e=s,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left-e-n,height:s,width:r}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:n=r,modifier:a=0}={})=>({top:t?i.top:o.top,left:o.left+n-(e+a),height:s,width:r}),fromRight:({center:t=!1,targetWidth:e=r,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r})}},V=t=>"string"==typeof t,z=t=>!V(t),G=t=>"number"==typeof t,j=t=>!G(t),W=t=>void 0===t,D=async(t,e)=>{var n;if(!(!t||!e||V(e)||G(e)||(n=e,"boolean"==typeof n)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object))if(await T(),Array.isArray(e))for(const n of e)t.style[n.key]=n.value;else for(const n of Object.keys(e))t.style[n]=e[n]},F=async t=>(await T(),getComputedStyle(t,null)),_=async(t,e,n)=>{await T();const{grid:o}=n;if(!o)return;const{toggle:i}=o,{height:s,width:r}=t.getBoundingClientRect(),{top:a,left:c}=await q(t),{gridTemplateColumns:l,gridTemplateRows:p,padding:d}=e,h=`speccer-${n.slug}-${t.getAttribute("id")||B()}`;if(t.setAttribute("data-speccer-element-id",h),"columns"===i||"both"===i){const t=parseInt(e.columnGap),n=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-gap-original",`${t}px`),document.documentElement.style.setProperty("--ph-speccer-grid-gap",`${t<24?24:t}px`),t<24&&n.classList.add("speccer-small-grid"),n.setAttribute("data-speccer-id",h),n.classList.add("ph-speccer"),n.classList.add("speccer"),n.classList.add("speccer-grid-container"),n.style.height=`${s+64}px`,n.style.width=`${r}px`,n.style.left=`${c}px`,n.style.top=a-32+"px",n.style.padding=d,n.style.gridTemplateColumns=l;const o=l.split(" ").length;for(let t=0;t<o;t++){const t=document.createElement("div");t.classList.add("ph-speccer"),t.classList.add("speccer"),t.classList.add("speccer-grid-item"),n.appendChild(t)}document.body.appendChild(n)}if("rows"===i||"both"===i){const t=parseInt(e.rowGap),n=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-row-gap-original",`${t}px`),document.documentElement.style.setProperty("--ph-speccer-grid-row-gap",`${t<24?24:t}px`),t<24&&n.classList.add("speccer-small-grid"),n.setAttribute("data-speccer-id",h),n.classList.add("ph-speccer"),n.classList.add("speccer"),n.classList.add("speccer-grid-row-container"),n.style.width=`${r+64}px`,n.style.height=`${s}px`,n.style.top=`${a}px`,n.style.left=c-32+"px",n.style.padding=d,n.style.gridTemplateRows=p;const o=p.split(" ").length;for(let t=0;t<o;t++){const t=document.createElement("div");t.classList.add("ph-speccer"),t.classList.add("speccer"),t.classList.add("speccer-grid-row-item"),n.appendChild(t)}document.body.appendChild(n)}},X=async(t,n)=>{if(!t)return;if(R(t))return;const o=t.getAttribute(e)||"",i=await F(t),s=P(o,i,n);"grid"===s.type&&s.grid&&(await T(),await _(t,i,s))},Y=(t,e,n="noop")=>{t&&(!e||e&&!e.length||e.trim().split(" ").filter((t=>t!==n)).filter((t=>""!==t)).forEach((e=>t.classList.add(e.trim()))))},K=(t,e)=>t?!e&&z(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():"",U=(t,e="span")=>{const n=document.createElement(e);n.setAttribute("id",t);const o=K("ph-speccer speccer mark");return Y(n,o),n},Z=async t=>{if(!t)return;if(R(t))return;const n=t.getAttribute(e)||"";await T();const o=P(n,getComputedStyle(t));if("mark"!==o.type)return;const i=`speccer-${o.slug}-${t.getAttribute("id")||B()}`;t.setAttribute("data-speccer-element-id",i);const s=U(i);document.body.appendChild(s);const r=await O(s,t),{left:a,top:c,height:l,width:p}=r.absolute(),d={left:`${a}px`,top:`${c}px`,height:`${l}px`,width:`${p}px`};await D(s,d)},J=(t="",e,n,o="span")=>{const i=document.createElement(o);i.setAttribute("title",`${t}px`),i.setAttribute("id",n),i.setAttribute("data-measure",`${parseInt(String(t),10)}px`);const{measure:s,position:r}=e,a=K("ph-speccer speccer measure",{height:s?.height||!1,width:s?.width||!1,slim:s?.slim||!1,[r]:!0});return Y(i,a),i},Q=async(t,e)=>{if(!t)return;if(R(t))return;const n=t.getAttribute("data-speccer")||"";await T();const o=P(n,getComputedStyle(t),e);if("measure"!==o.type||!o.measure)return;const{measure:i,position:s}=o;await T();const r=t.getBoundingClientRect(),a=i.slim?0:48,c=i.slim?0:96,l=`speccer-${o.slug}-${t.getAttribute("id")||B()}`;if(t.setAttribute("data-speccer-element-id",l),i.width)if(s===p.Bottom){const e=J(r.width,o,l);document.body.appendChild(e);const n=await O(e,t);if(i.slim){const{left:t,top:o,width:i}=n.fromBottom({center:!1});await D(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`})}else{const{left:t,top:o,width:i,height:s}=n.absolute({center:!1});await D(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`,height:`${s+a}px`})}}else{const e=J(r.width,o,l);document.body.appendChild(e);const n=await O(e,t);if(i.slim){const{left:t,top:o,width:i}=n.fromTop({center:!1});await D(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`})}else{const{left:t,top:o,width:i,height:s}=n.absolute({center:!1});await D(e,{left:`${t}px`,top:o-a+"px",width:`${i}px`,height:`${s+a}px`})}}else if(i.height)if(s===p.Right){const e=J(r.height,o,l);document.body.appendChild(e);const n=await O(e,t);if(i.slim){const{left:t,top:o,height:i}=n.fromRight({center:!1});await D(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`})}else{const{left:t,top:o,height:i,width:s}=n.absolute({center:!1});await D(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`,width:`${s+c}px`})}}else{const e=J(r.height,o,l);document.body.appendChild(e);const n=await O(e,t);if(i.slim){const{left:t,top:o,height:i}=n.fromLeft({center:!1});await D(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`})}else{const{left:t,top:o,height:i,width:s}=n.absolute({center:!1});await D(e,{left:t-c+"px",top:`${o}px`,height:`${i}px`,width:`${s+c}px`})}}},tt=(t="",e,n="",o="span")=>{const i=document.createElement(o),s={},{position:r,pin:a={}}=e,{useSVGLine:c,useCurlyBrackets:l,text:p,parent:d,bracket:h,enclose:u,subtle:f}=a;s.text=p,s.parent=d,s.bracket=h,s.enclose=u,s.subtle=f,s.svg=c,s.curly=l,s[r]=!0,!d||h||l||f||(s.svg=!0),!h&&!u||h&&l?i.innerHTML=t:(h||u)&&i.setAttribute("data-pin-counter",t);const g=K("ph-speccer speccer pin",s);return Y(i,g),i.setAttribute("id",n),i},et=t=>t.top,nt=t=>t.left+t.width,ot=t=>t.top+t.height,it=t=>t.left,st=t=>t.left+t.width/2,rt=t=>t.top+t.height/2,at={center:t=>({x:st(t),y:rt(t)}),top:t=>({x:st(t),y:et(t)}),right:t=>({x:nt(t),y:rt(t)}),bottom:t=>({x:st(t),y:ot(t)}),left:t=>({x:it(t),y:rt(t)}),"right-top":t=>({x:nt(t),y:et(t)}),"right-bottom":t=>({x:nt(t),y:ot(t)}),"left-top":t=>({x:it(t),y:et(t)}),"left-bottom":t=>({x:it(t),y:ot(t)}),"top-left":t=>({x:it(t),y:et(t)}),"top-right":t=>({x:nt(t),y:et(t)}),"bottom-left":t=>({x:it(t),y:ot(t)}),"bottom-right":t=>({x:nt(t),y:ot(t)}),"top-center":t=>({x:st(t),y:et(t)}),"right-center":t=>({x:nt(t),y:rt(t)}),"bottom-center":t=>({x:st(t),y:ot(t)}),"left-center":t=>({x:it(t),y:rt(t)})},ct=async(t,e="center")=>{if(!e)throw Error("No position given");if(z(e))throw Error("The position given is not the required type: pos: "+typeof e);const n=["center","left","right","top","bottom","right-top","right-bottom","left-top","left-bottom","top-left","top-right","bottom-left","bottom-right","top-center","right-center","bottom-center","left-center"];if(!n.includes(e))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${n.join(", ")}`);await T();const o=t.getBoundingClientRect();return at[e](o)};class lt{#t;el;circle;radius;options;constructor(t,e,n){this.#e(t,e,n)}#e(t,e,n){if(!t||!e||!n)throw new Error("Missing inputs el or radius or options");if(!document.body.contains(t))throw new Error("el is not in the DOM");if(this.el=t,this.radius=e,this.options=n,this.#t=document.getElementById("ph-speccer-svg"),!this.#t)throw new Error("Missing required SVG element to draw circles. Please see the documentation");const o=document.body,i=document.documentElement,s=Math.max(o.scrollHeight,o.offsetHeight,i.clientHeight,i.scrollHeight,i.offsetHeight);D(this.#t,{height:`${s}px`}),this.draw()}async draw(){const t=`ph_draw-circle-${B()}`;this.circle=document.createElementNS("http://www.w3.org/2000/svg","circle");const e=this.el.getAttribute("id")||B();if(this.el.setAttribute("id",e),this.circle.setAttribute("id",t),this.circle.setAttribute("data-el",e),this.circle.classList.add("ph-speccer"),this.circle.classList.add("speccer"),this.circle.classList.add("circle"),!this.#t)throw new Error("No parentNode found for circle");this.#t.appendChild(this.circle);const{x:n,y:o}=await ct(this.el,this.options.position);this.circle.setAttribute("r",this.radius+""),this.circle.setAttribute("cx",Math.round(n)+""),this.circle.setAttribute("cy",Math.round(o+document.documentElement.scrollTop)+""),this.circle.setAttribute("fill","currentColor")}}window.DrawCircle=lt;const pt=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:s}=await ct(t,n),{x:r,y:a}=await ct(e,o);return{x1:i,y1:s,x2:r,y2:a}},dt=(t,e)=>{const{x1:n,x2:o,y1:i,y2:s}=t,{direct:r=!1,firstSet:a=!1,direction:c}=e,l={x:n,y:i},p={x:o,y:s};return r?a?"west"===c?{firstPoint:l,firstControl:{x:n-32,y:i-8},lastPoint:p,lastControl:{x:o+32,y:s}}:"south"===c?{firstPoint:l,firstControl:{x:n-8,y:i+32},lastPoint:p,lastControl:{x:o,y:s-32}}:"east"===c?{firstPoint:l,firstControl:{x:n+32,y:i-8},lastPoint:p,lastControl:{x:o-32,y:s}}:{firstPoint:l,firstControl:{x:n-8,y:i-32},lastPoint:p,lastControl:{x:o,y:s+32}}:"west"===c?{firstPoint:l,firstControl:{x:n-32,y:i+8},lastPoint:p,lastControl:{x:o+32,y:s}}:"south"===c?{firstPoint:l,firstControl:{x:n+8,y:i+32},lastPoint:p,lastControl:{x:o,y:s-32}}:"east"===c?{firstPoint:l,firstControl:{x:n+32,y:i+8},lastPoint:p,lastControl:{x:o-32,y:s}}:{firstPoint:l,firstControl:{x:n+8,y:i-32},lastPoint:p,lastControl:{x:o,y:s+32}}:{firstPoint:l,firstControl:{x:n+(o-n)/2,y:i},lastPoint:p,lastControl:{x:n+(o-n)/2,y:s}}},ht=async(t,e,n)=>{const{pos1:o,pos2:i,firstSet:s=!1,direction:r}=n,{x1:a,y1:c,x2:l,y2:p}=await pt(t,e,o,i);let d=0,h=0;"north"===r?h=8:"west"===r?d=8:"east"===r?d=-8:"south"===r&&(h=-8);const{firstPoint:u,firstControl:f,lastControl:g,lastPoint:m}=dt({x1:a+0,x2:l+d,y1:c+0+document.documentElement.scrollTop,y2:p+h+document.documentElement.scrollTop},{direct:!0,firstSet:s,direction:r});return`M ${u.x} ${u.y}C ${f.x} ${f.y}, ${g.x} ${g.y}, ${m.x} ${m.y}`},ut=async({start:t,stop:e,crude:n=!1})=>{const{x1:o,y1:i,x2:s,y2:r}=await pt(t,e),a=((t,e,n,o,i=!0)=>{if(W(t)||W(e)||W(n)||W(o))throw new SyntaxError("Missing input for `angle`");if(j(t)||j(e)||j(n)||j(o))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof n} ${typeof o}`);const s=o-e,r=n-t;let a=Math.atan2(s,r);return a*=180/Math.PI,i&&a<0&&(a+=360),a})(o,i,s,r);return n?(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=45&&t<=135?"south":t>135&&t<=225?"west":t>225&&t<=315?"north":"east"})(a):(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=0&&t<=22.5?"east":t>=22.5&&t<=67.5?"south-east":t>=67.5&&t<=112.5?"south":t>=112.5&&t<=157.5?"south-west":t>=157.5&&t<=202.5?"west":t>=202.5&&t<=247.5?"north-west":t>=247.5&&t<=292.5?"north":t>=292.5&&t<=337.5?"north-east":"east"})(a)};class ft{#t;#n;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#e(t,e)}#e(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const n=document.body,o=document.documentElement,i=Math.max(n.scrollHeight,n.offsetHeight,o.clientHeight,o.scrollHeight,o.offsetHeight);D(this.#t,{height:`${i}px`}),this.connect()}connect(){this.draw(this.#n)}#o(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${B()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||B();return this.startElement.setAttribute("id",o),n.setAttribute("data-start-el",o),n.setAttribute("id",e),n.classList.remove("original"),n.classList.add("speccer"),n}async draw(t){if(!t)throw new Error("No path given to draw!");const e=this.#o(t),n=this.#o(t);if(!t.parentNode)throw new Error("No parentNode found for path");this.firstPathElement=t.parentNode.insertBefore(e,t.nextSibling),this.secondPathElement=t.parentNode.insertBefore(n,t.nextSibling);const o=await ut({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:i,path1pos2:s,path2pos1:r,path2pos2:a}=(t=>{let e,n,o,i;switch(t){case"east":e="right-top",n="left-center",o="right-bottom",i="left-center";break;case"south":e="bottom-left",n="top-center",o="bottom-right",i="top-center";break;case"west":e="left-top",n="right-center",o="left-bottom",i="right-center";break;default:e="top-left",n="bottom-center",o="top-right",i="bottom-center"}return{path1pos1:e,path1pos2:n,path2pos1:o,path2pos2:i}})(o),c=await ht(this.startElement,this.stopElement,{pos1:i,pos2:s,firstSet:!0,direction:o}),l=await ht(this.startElement,this.stopElement,{pos1:r,pos2:a,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",i),this.firstPathElement.setAttribute("data-pos2",s),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",r),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",l)}}window.DrawSVGCurlyBracket=ft;class gt{#t;#n;startElement;stopElement;options;line;constructor(t,e,n={}){this.#e(t,e,n)}#e(t,e,n={}){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.options=n,this.#t=document.getElementById("ph-speccer-svg"),this.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const o=document.body,i=document.documentElement,s=Math.max(o.scrollHeight,o.offsetHeight,i.clientHeight,i.scrollHeight,i.offsetHeight);D(this.#t,{height:`${s}px`}),this.connect()}connect(){this.draw(this.#n)}async draw(t){if(!t)throw new Error("No path given to draw!");const e=`ph_draw_path-path-${B()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||B();this.startElement.setAttribute("id",o),n.setAttribute("id",e),n.setAttribute("data-start-el",o),n.classList.remove("original"),n.classList.add("speccer");const{pin:i}=this.options;if(i?.text&&n.classList.add("text"),!t.parentNode)throw new Error("No parentNode found for path");this.line=t.parentNode.insertBefore(n,t.nextSibling);const s=await ut({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:r,pos2:a}=(t=>{let e,n;switch(t){case"east":e="right",n="left";break;case"south":e="bottom",n="top";break;case"west":e="left",n="right";break;default:e="top",n="bottom"}return{pos1:e,pos2:n}})(s),c=await(async(t,e,n)=>{const{pos1:o,pos2:i}=n,{x1:s,y1:r,x2:a,y2:c}=await pt(t,e,o,i),{firstPoint:l,firstControl:p,lastControl:d,lastPoint:h}=dt({x1:s,x2:a,y1:r+document.documentElement.scrollTop,y2:c+document.documentElement.scrollTop},{direction:""});return`M ${l.x} ${l.y}C ${p.x} ${p.y}, ${d.x} ${d.y}, ${h.x} ${h.y}`})(this.startElement,this.stopElement,{pos1:r,pos2:a});this.line.setAttribute("data-direction",s),this.line.setAttribute("data-pos1",r),this.line.setAttribute("data-pos2",a),this.line.setAttribute("d",c)}}window.DrawSVGLine=gt;const mt=t=>parseInt(t,10),yt=t=>mt(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,wt=async(t,e,n,o)=>{await T();const{pin:i={},position:s}=o,{useCurlyBrackets:r,subtle:a,bracket:c,text:p,parent:d,enclose:h}=i,u=yt(e),f=mt(getComputedStyle(e).getPropertyValue("--ph-speccer-measure-size"))||8;const g=await O(e,t);if(h){const{left:t,top:e,height:n,width:o}=g.absolute();return{left:`${t}px`,top:`${e}px`,height:`${n}px`,width:`${o}px`}}if((d||p)&&!c&&!r&&!a){if(s===l.Right){const{top:t}=g.fromRight({center:!0});await T();const{left:e,width:o}=n.getBoundingClientRect();return{left:`${e+o+u}px`,top:`${t}px`}}if(s===l.Bottom){const{left:t}=g.toBottom({center:!0});await T();const{top:e,height:o}=n.getBoundingClientRect();return{left:`${t}px`,top:`${e+o+u}px`}}if(s===l.Left){const{top:t}=g.fromLeft({center:!0});await T();const{left:e}=n.getBoundingClientRect();return{left:e-1.5*u-(p?170:0)+"px",top:`${t}px`}}const{left:t}=g.fromTop({center:!0});await T();const{top:e}=n.getBoundingClientRect();return{left:`${t}px`,top:e-1.5*u+"px"}}if(s===l.Left){if(c&&!r){const{left:t,top:e,height:n}=g.fromLeft({sourceWidth:f});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:t,top:e}=g.fromLeft({center:!0,modifier:r?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(s===l.Right){if(c&&!r){const{left:t,top:e,height:n}=g.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:t,top:e}=g.fromRight({center:!0,modifier:r?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(s===l.Bottom){if(c&&!r){const{left:t,top:e,width:n}=g.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:t,top:e}=g.fromBottom({center:!0,modifier:r?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(c&&!r){const{left:t,top:e,width:n}=g.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:m,top:y}=g.fromTop({center:!0,modifier:r?u/1.5:u});return{left:`${m}px`,top:`${y}px`}},xt=async(t,e,n,o)=>{if(!t)return;if("pin"!==o.type||!o.pin)return;const i=`speccer-${o.slug}-${t.getAttribute("id")||B()}`,s=tt(n,o,i);t.setAttribute("data-speccer-element-id",i),document.body.appendChild(s);const r=await wt(t,s,e,o);await D(s,r);const a=o.pin.text&&null!==t.getAttribute("data-speccer-title"),c=o.pin.parent&&!o.pin.enclose&&!o.pin.bracket&&!a;return o.pin.useSVGLine?(new gt(t,s,o),c&&new lt(t,5,o)):o.pin.useCurlyBrackets&&new ft(t,s),i};let bt=0;const $t=async(e,n)=>{if(!e)return;const o=e.querySelectorAll('[data-speccer^="pin"]');if(!o||0===o.length)return;const i=e.getAttribute("data-speccer-literals")||window.SPECCER_LITERALS||t;[...o].filter((async t=>!R(t))).forEach((async(t,o)=>{const s=((t,e)=>{let n=e[t];return 0===t&&(bt=0),n||(n=`${e[bt]}${e[bt].toLowerCase()}`,bt++),n})(o,i),r=t.getAttribute("data-speccer")||"";await T();const a=getComputedStyle(t),c=P(r,a,n),l=((t,e,n)=>{const{pin:o}=n;if(!o)return t;const{text:i}=o;if(!i||null===e.getAttribute("data-speccer-title"))return t;const s=e.getAttribute("data-speccer-title"),r=e.getAttribute("data-speccer-description"),a=0===e.nodeName.indexOf("H")?`<span class="ph-speccer heading">${e.nodeName}</span>`:"";return!r&&s?`${a}<span class="ph-speccer title">${s}</span>`:r&&s?`${a}<span class="ph-speccer title">${s}</span><span class="ph-speccer description">${r.replaceAll("\\n","<br/>")}</span>`:t})(s,t,c);await xt(t,e,l,c)}))},Et=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(`${t}px`);return n.appendChild(o),n.setAttribute("title",`${t}px`),Y(n,"ph-speccer speccer spacing"),n},At=async(t,e)=>{if(!t)return;if(R(t))return;const n=t.getAttribute("data-speccer")||"",o=await F(t),i=P(n,o,e);if("spacing"!==i.type||!i.spacing)return;const s=((t,e)=>{const{marginTop:n,marginBottom:o,marginLeft:i,marginRight:s,paddingTop:r,paddingBottom:a,paddingLeft:c,paddingRight:l}=t;return e?.spacing?.padding?{paddingTop:r,paddingBottom:a,paddingLeft:c,paddingRight:l}:e?.spacing?.margin?{marginTop:n,marginBottom:o,marginLeft:i,marginRight:s}:{marginTop:n,marginBottom:o,marginLeft:i,marginRight:s,paddingTop:r,paddingBottom:a,paddingLeft:c,paddingRight:l}})(o,i),r=Object.keys(s).filter((t=>"0px"!==s[t]));if(!r.length)return;t.classList.add("is-specced");const a=`speccer-spacing-${t.getAttribute("id")||B()}`;t.setAttribute("data-speccer-element-id",a),r.forEach((async e=>{const n=mt(s[e]),o=Et(n);o.setAttribute("data-speccer-id",a);const r=(t=>t.includes("Top")?t.replace("Top"," top"):t.includes("Right")?t.replace("Right"," right"):t.includes("Bottom")?t.replace("Bottom"," bottom"):t.includes("Left")?t.replace("Left"," left"):"")(e);Y(o,K(r,{bound:!!i?.spacing?.bound})),document.body.appendChild(o);const c=await(async(t,e,n,o)=>{await T();const i=n.getBoundingClientRect(),s=await q(n),r=o?.spacing?.bound?0:96,a=o?.spacing?.bound?0:48;return"marginTop"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top-e+"px"}:"marginRight"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left+parseInt(i.width+"",10)+"px",top:s.top+"px"}:"marginBottom"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top+parseInt(i.height+"",10)+"px"}:"marginLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left-e+"px",top:s.top+"px"}:"paddingTop"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top+"px"}:"paddingBottom"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top+(parseInt(i.height+"",10)-e)+"px"}:"paddingRight"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left+(parseInt(i.width+"",10)-e)+"px",top:s.top+"px"}:"paddingLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left+"px",top:s.top+"px"}:void 0})(e,n,t,i);await D(o,c)}))},kt=(t,e=3)=>parseFloat(String(t)).toFixed(e),Ct=(t,e,n)=>{const o=document.createElement("div"),{typography:i,position:s}=e,r=K("ph-speccer speccer typography",{syntax:i?.useSyntaxHighlighting||!1,[s]:!0});return o.setAttribute("id",n),o.innerHTML=t,Y(o,r),o},St=async(t,e)=>{if(!t)return;if(R(t))return;const n=t.getAttribute("data-speccer")||"";await T();const o=P(n,getComputedStyle(t),e);if("typography"!==o.type||!o.typography)return;t.classList.add("is-specced");const i=await(async(t,e=!1)=>{const n=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}})(await F(t));if(e){const t=n.fontFamily.split(",").map((t=>t.includes("'")?`<span class="token string">${t}</span>`:t)).join('<span class="token punctuation">, </span>'),e=`<span class="token number">${parseInt(n.fontSize,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.fontSize,10)/16}</span><span class="token unit">rem</span>`,o=n.letterSpacing.includes("px")?`<span class="token number">${parseInt(n.letterSpacing,10)}</span><span class="token unit">px</span>`:n.letterSpacing,i="normal"!==n.lineHeight?`<span class="token number">${parseInt(n.lineHeight,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.lineHeight,10)/16}</span><span class="token unit">rem</span>`:"normal";return`\n<pre class="language-css" tabindex="-1"><code class="language-css"><span class="token selector"><span class="token class">.typography</span></span> <span class="token punctuation">{</span>\n <span class="token property">font-family</span><span class="token punctuation">:</span> ${t}<span class="token punctuation">;</span>\n <span class="token property">font-size</span><span class="token punctuation">:</span> ${e}<span class="token punctuation">;</span>\n <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">${n.fontWeight}</span><span class="token punctuation">;</span>\n <span class="token property">font-variation-settings</span><span class="token punctuation">:</span> ${n.fontVariationSettings}<span class="token punctuation">;</span>\n <span class="token property">line-height</span><span class="token punctuation">:</span> ${i}<span class="token punctuation">;</span>\n <span class="token property">letter-spacing</span><span class="token punctuation">:</span> ${o}<span class="token punctuation">;</span>\n <span class="token property">font-style</span><span class="token punctuation">:</span> ${n.fontStyle}<span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>`}return`\ntypography: {<ul class="speccer-styles"> <li><span class="property">font-family:</span> ${n.fontFamily};</li> <li><span class="property">font-size:</span> ${n.fontSize} / ${parseInt(n.fontSize,10)/16}rem;</li> <li><span class="property">font-weight:</span> ${n.fontWeight};</li> <li><span class="property">font-variation-settings:</span> ${n.fontVariationSettings};</li> <li><span class="property">line-height:</span> ${"normal"!==n.lineHeight?`${parseInt(n.lineHeight,10)}px / ${parseInt(n.lineHeight,10)/16}rem`:"normal"};</li> <li><span class="property">letter-spacing:</span> ${n.letterSpacing};</li> <li><span class="property">font-style:</span> ${n.fontStyle};</li></ul>}`})(t,o.typography.useSyntaxHighlighting),s=`speccer-${o.slug}-${t.getAttribute("id")||B()}`;t.setAttribute("data-speccer-element-id",s);const r=Ct(i,o,s);document.body.appendChild(r);const a=await(async(t,e,n)=>{const o=e.getBoundingClientRect(),i=yt(n),s=n.getBoundingClientRect(),r=await q(e),{typography:a,position:c}=t;if(a&&c===d.Right)return{left:r.left+o.width+i+"px",top:kt(N(r.top,s,o))+"px"};if(a&&c===d.Top)return{left:kt(M(r.left,s,o))+"px",top:r.top-s.height-i+"px"};if(a&&c===d.Bottom)return{left:kt(M(r.left,s,o))+"px",top:r.top+o.height+i+"px"};return{left:r.left-s.width-i+"px",top:kt(N(r.top,s,o))+"px"}})(o,t,r);D(r,a)},Lt=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(i,...s){const r=n&&!o;o&&clearTimeout(o),o=setTimeout((function(){o=null,n||t.apply(i,s)}),e),r&&t.apply(i,s)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},vt=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},Pt=()=>{const t=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(At(n.target),e.unobserve(n.target))}));for(const o of document.querySelectorAll(`[${e}^="${n}"],[${e}^="${n}"] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)`))t.observe(o);const c=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Q(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${e}^="${o}"]`))c.observe(t);const l=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Z(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${e}^="${s}"]`))l.observe(t);const p=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(St(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${e}^="${i}"]`))p.observe(t);const d=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(X(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${e}^="${r}"]`))d.observe(t);const h=new IntersectionObserver((async(t,e)=>{for(const n of t)n.intersectionRatio>0&&(await $t(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${e}="${a}"]`))h.observe(t)},Bt=t=>{window.speccer=t},Rt=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?Bt(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?vt(t):e.hasAttribute("data-lazy")?Pt():vt(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||Lt(t))}},Tt=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],Ht=["escape","esc","enter","return","⏎","␛"],It=async(t,e,n)=>{await T();const o=yt(n),i=await O(n,e);if("tabstops"===t){let{left:t,top:e}=i.fromTop();return t-=32,e+=32,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("landmark"===t){let{left:t,top:e}=i.fromTop();return t-=16,e-=16,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("region"===t){const{left:t,top:e,height:n,width:o}=i.fromTop();return{height:`${n}px`,width:`${o}px`,left:`${t}px`,top:`${e}px`}}if("shortcut"===t){const{left:t,top:e}=i.fromBottom();return{left:`${t}px`,top:`${e}px`}}const{left:s,top:r}=i.fromTop({center:!0,modifier:o});return{left:s-32+"px",top:r-32+"px"}},Mt=async(t,e,n)=>{if(!t||!t.checkVisibility())return;const o=((t="tabstops",e,n="span")=>{const o=document.createElement(n),i=K("ph-speccer speccer a11y",{tabstops:"tabstops"===t,landmark:"landmark"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(String(e));o.appendChild(t)}return Y(o,i),o})(n,e);if("landmark"===n){o.setAttribute("data-speccer-nodename",t.nodeName);const e=t.role||`semantic role: ${t.nodeName.toLowerCase()}`,n=t.getAttribute("aria-label")||"unnamed";o.setAttribute("title",`${n}: ${e}`)}document.body.appendChild(o);const i=await It(n,t,o);await D(o,i)},Nt=async(t,e)=>{const n=e.split(/\s\+\s/).map((t=>t.trim())),o=document.createElement("div");o.classList.add("ph-speccer"),o.classList.add("speccer"),o.classList.add("a11y"),o.classList.add("shortcut-holder");for(const t of n){const e=document.createElement("kbd"),n=document.createTextNode(t);e.classList.add("ph-speccer"),e.classList.add("speccer"),e.classList.add("a11y"),e.classList.add("shortcut"),Tt.includes(t.toLowerCase())&&e.classList.add("modifier"),Ht.includes(t.toLowerCase())&&e.classList.add("physical"),e.appendChild(n),o.appendChild(e)}document.body.appendChild(o);const i=await It("shortcut",t,o);await D(o,i)},qt=t=>{const e=t.getAttribute("data-speccer-element-id");if(!e)return;const n=document.getElementById(e)||document.querySelectorAll(`[data-speccer-id="${e}"]`);if(n)if(Object.prototype.isPrototypeOf.call(NodeList.prototype,n))[...n].forEach((t=>{t.remove(),t.classList.remove("is-specced")}));else if(n.classList.contains("curly")||n.classList.contains("svg")){const e=t.getAttribute("id");document.querySelectorAll(`#ph-speccer-svg path[data-start-el="${e}"]`).forEach((t=>t.remove()))}},Ot={create:_,element:X},Vt={create:Et,element:At},zt={createPinElement:tt,pinElement:xt,pinElements:$t},Gt={create:J,element:Q},jt={create:U,element:Z},Wt={create:Ct,element:St},Dt={dom:vt,lazy:Pt,manual:Bt,activate:Rt},Ft=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".ph-speccer.speccer");const t=document.querySelectorAll(`[${e}^="${n}"],[${e}^="${n}"] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)`),c=document.querySelectorAll(`[${e}^="${o}"]`),l=document.querySelectorAll(`[${e}^="${i}"]`),p=document.querySelectorAll(`[${e}="${a}"]`),d=document.querySelectorAll(`[${e}^="${s}"]`),h=document.querySelectorAll(`[${e}^="${r}"]`);for(const t of d)Z(t);for(const t of h)X(t);for(const e of t)At(e);for(const t of c)Q(t);for(const t of l)St(t);for(const t of p)$t(t);(()=>{const t=document.querySelectorAll('[data-speccer*="a11y tabstops"]'),e=document.querySelectorAll('[data-speccer*="a11y landmark"]'),n=document.querySelectorAll('[data-speccer*="a11y shortcut"]');if(n.length)for(const t of n){const e=t.getAttribute("data-speccer-a11y-shortcut");e&&""!==e&&!R(t)&&Nt(t,e)}if(t.length)for(const e of t){const t=e.querySelectorAll("\n a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n textarea:not([disabled]):not([tabindex='-1']),\n iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]\n");for(const e of t)R(e)||Mt(e,null,"tabstops")}if(e.length)for(const t of e){const e=t.querySelectorAll('\nheader, footer, section, form, main, nav, aside, [role="section"], [role="banner"],\n[role="complementary"], [role="contentinfo"], [role="form"], [role="main"],\n[role="navigation"], [role="region"], [role="search"]\n');for(const[t,n]of e.entries())R(n)||(Mt(n,t+1,"landmark"),Mt(n,null,"region"))}})()};Rt(Ft);export{Ft as default,Ot as grid,jt as mark,Gt as measure,Dt as modes,zt as pin,qt as removeSpeccerElement,Vt as spacing,Wt as typography};
27
+ const t=t=>"string"==typeof t,e=e=>!t(e),n=t=>"number"==typeof t,o=t=>!n(t),i=t=>void 0===t,s=(t,e,n="noop")=>{if(!t)return;if(!e||e&&!e.length)return;const o=e.trim().split(" ").filter((t=>t!==n)).filter((t=>""!==t)).map((t=>t.trim()));t.classList.add(...o)},r=(t,n)=>t?!n&&e(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${n?Object.keys(n).filter((t=>n[t])).join(" "):""}`.trim():"",a=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],c="data-speccer",p="spacing",l="measure",d="typography",h="mark",u="grid",f="pin-area";var g,m,y,w,x,b,$;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(g||(g={})),function(t){t.Pin="pin",t.Parent="parent",t.Text="text",t.Enclose="enclose",t.Subtle="subtle",t.Bracket="bracket",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top",t.SVG="svg",t.Curly="curly"}(m||(m={})),function(t){t.Measure="measure",t.Slim="slim",t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(y||(y={})),function(t){t.Typography="typography",t.Syntax="syntax",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(w||(w={})),function(t){t.Spacing="spacing"}(x||(x={})),function(t){t.Mark="mark"}(b||(b={})),function(t){t.Grid="grid"}($||($={}));const E=t=>t.split(" "),A=t=>{if(null===t)return!1;return E(t).includes(m.Bracket)},k=t=>{if(null===t)return!1;return E(t).includes(m.Enclose)},C=t=>{if(null===t)return!1;return E(t).includes(m.Subtle)},S=t=>{if(null===t)return!1;return E(t).includes(m.Parent)},v=t=>{if(null===t)return!1;return E(t).includes(m.Text)},P=t=>{if(null===t)return!1;return E(t).includes(y.Height)},L=t=>{if(null===t)return!1;return E(t).includes(y.Slim)},B=t=>{if(null===t)return!1;return E(t).includes(y.Width)},R=t=>{if(null===t)return!1;const e=E(t);return(S(t)&&!k(t)&&!A(t)||v(t)||e.includes(m.SVG))&&!T(t)},T=t=>{if(null===t)return!1;const e=E(t);return e.includes(m.Curly)&&e.includes(m.Bracket)},H=t=>!!t&&t.split(" ").includes(w.Syntax),I=(t,e)=>(t=>null!==t&&t.split(" ").includes(m.Pin))(t)?"pin":((t,e)=>null!==t&&t.split(" ").includes($.Grid)&&("grid"===e.display||e.display.includes("grid")))(t,e)?"grid":(t=>null!==t&&t.split(" ").includes(b.Mark))(t)?"mark":(t=>null!==t&&t.split(" ").includes(y.Measure))(t)?"measure":(t=>null!==t&&t.split(" ").includes(x.Spacing))(t)?"spacing":(t=>null!==t&&t.split(" ").includes(w.Typography))(t)?"typography":"pin",M=t=>(t=>null!==t&&E(t).includes(m.Left))(t)?"left":(t=>null!==t&&E(t).includes(m.Right))(t)?"right":(t=>null!==t&&E(t).includes(m.Bottom))(t)?"bottom":"top",N=(t,e,n)=>{const o=I(t,e),i={slug:(s=t,s.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").trim().toLowerCase().replace(/[^a-z0-9 -]/g,"").replace(/\s+/g," ").replace(/(?:^\w|[A-Z]|\b\w)/g,((t,e)=>0===e?t.toLowerCase():t.toUpperCase())).replace(/\s+/g,"")),position:M(t),type:o};var s;if("pin"===o&&(i.pin={bracket:A(t),enclose:k(t),subtle:C(t),parent:S(t),text:v(t),useSVGLine:R(t),useCurlyBrackets:T(t)}),"measure"===o&&(i.measure={slim:L(t),height:P(t),width:B(t)}),"typography"===o&&(i.typography={useSyntaxHighlighting:H(t)}),"grid"===o){const e=(t=>t?.includes("columns")?"columns":t?.includes("rows")?"rows":"both")(t);i.grid={toggle:e,both:"both"===e,rows:"rows"===e,columns:"columns"===e}}if("spacing"===o){const e=(t=>t?.includes("margin")?"margin":t?.includes("padding")?"padding":"both")(t);i.spacing={both:"both"===e,margin:"margin"===e,padding:"padding"===e,bound:t.includes("bound")}}return{...i,...n}},q=()=>"_"+Math.random().toString(36).substring(2,11),O=t=>!t.checkVisibility({opacityProperty:!0,checkVisibilityCSS:!0}),V=()=>new Promise(requestAnimationFrame),z=async(t,e,n)=>{await V();return getComputedStyle(t)[e]===n},G=async(t,e,n)=>{if(!t.parentElement)return null;return await z(t.parentElement,e,n)?t.parentElement:await G(t.parentElement,e,n)},j=(t,e,n)=>t-e.width/2+n.width/2,W=(t,e,n)=>t-e.height/2+n.height/2,D=async t=>{await V();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,i=await(async t=>await G(t,"position","sticky"))(t),s=await(async t=>await z(t,"position","sticky"))(t);if(s){const o=t.style.position;await V(),t.style.position="relative",await V(),e=t.getBoundingClientRect(),n=e.top,await V(),t.style.position=o}else if(i){const o=i.style.position;await V(),i.style.position="relative",await V(),e=t.getBoundingClientRect(),n=e.top,await V(),i.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},F=async(t,e)=>{await V();const n=t.getBoundingClientRect(),o=await D(e),i=await(async(t,e)=>{await V();const n=t.getBoundingClientRect();await V();const o=e.getBoundingClientRect(),i=o.top+window.scrollY,s=o.left+window.scrollX;return{height:o.height,width:o.width,top:W(i,n,o),left:j(s,n,o)}})(t,e),s=o.height,r=o.width,a=n.height,c=n.width;return{absolute:()=>({top:o.top,left:o.left,height:s,width:r}),toTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top-e-n,left:t?i.left:o.left,height:s,width:r}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:n=s,modifier:c=0}={})=>({top:o.top+n-(e+c),left:t?i.left:o.left,height:s,width:r}),fromBottom:({center:t=!1,targetHeight:e=s,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left-e-n,height:s,width:r}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:n=r,modifier:a=0}={})=>({top:t?i.top:o.top,left:o.left+n-(e+a),height:s,width:r}),fromRight:({center:t=!1,targetWidth:e=r,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r})}},_=async(e,o)=>{var i;!e||!o||t(o)||n(o)||(i=o,"boolean"==typeof i)||Array.isArray(o)&&!o.length||!Object.keys(o).length&&o.constructor===Object||(await V(),Array.isArray(o)&&(o=o.reduce(((t,e)=>(t[e.key]=e.value,t)),{})),Object.assign(e.style,o))},X=async t=>(await V(),getComputedStyle(t,null)),Y=async(t,e,n)=>{await V();const{grid:o}=n;if(!o)return;const{toggle:i}=o,{height:r,width:a}=t.getBoundingClientRect(),{top:c,left:p}=await D(t),{gridTemplateColumns:l,gridTemplateRows:d,padding:h}=e,u=`speccer-${n.slug}-${t.getAttribute("id")||q()}`;if(t.setAttribute("data-speccer-element-id",u),"columns"===i||"both"===i){const t=parseInt(e.columnGap),n=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-gap-original",`${t}px`),document.documentElement.style.setProperty("--ph-speccer-grid-gap",`${t<24?24:t}px`),t<24&&n.classList.add("speccer-small-grid"),n.setAttribute("data-speccer-id",u),s(n,"ph-speccer speccer speccer-grid-container"),_(n,{height:`${r+64}px`,width:`${a}px`,left:`${p}px`,top:c-32+"px",padding:h,gridTemplateColumns:l});const o=l.split(" ").length;for(let t=0;t<o;t++){const t=document.createElement("div");s(t,"ph-speccer speccer speccer-grid-item"),n.appendChild(t)}document.body.appendChild(n)}if("rows"===i||"both"===i){const t=parseInt(e.rowGap),n=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-row-gap-original",`${t}px`),document.documentElement.style.setProperty("--ph-speccer-grid-row-gap",`${t<24?24:t}px`),t<24&&n.classList.add("speccer-small-grid"),n.setAttribute("data-speccer-id",u),n.classList.add("ph-speccer"),n.classList.add("speccer"),n.classList.add("speccer-grid-row-container"),s(n,"ph-speccer speccer speccer-grid-row-container"),_(n,{width:`${a+64}px`,height:`${r}px`,top:`${c}px`,left:p-32+"px",padding:h,gridTemplateRows:d});const o=d.split(" ").length;for(let t=0;t<o;t++){const t=document.createElement("div");s(t,"ph-speccer speccer speccer-grid-row-item"),n.appendChild(t)}document.body.appendChild(n)}},K=async(t,e)=>{if(!t)return;if(O(t))return;const n=t.getAttribute(c)||"",o=await X(t),i=N(n,o,e);"grid"===i.type&&i.grid&&(await V(),await Y(t,o,i))},U=(t,e="span")=>{const n=document.createElement(e);return n.setAttribute("id",t),s(n,"ph-speccer speccer mark"),n},Z=async t=>{if(!t)return;if(O(t))return;const e=t.getAttribute(c)||"";await V();const n=N(e,getComputedStyle(t));if("mark"!==n.type)return;const o=`speccer-${n.slug}-${t.getAttribute("id")||q()}`;t.setAttribute("data-speccer-element-id",o);const i=U(o);document.body.appendChild(i);const s=await F(i,t),{left:r,top:a,height:p,width:l}=s.absolute(),d={left:`${r}px`,top:`${a}px`,height:`${p}px`,width:`${l}px`};await _(i,d)},J=(t="",e,n,o="span")=>{const i=document.createElement(o);i.setAttribute("title",`${t}px`),i.setAttribute("id",n),i.setAttribute("data-measure",`${parseInt(String(t),10)}px`);const{measure:a,position:c}=e,p=r("ph-speccer speccer measure",{height:a?.height||!1,width:a?.width||!1,slim:a?.slim||!1,[c]:!0});return s(i,p),i},Q=async(t,e)=>{if(!t)return;if(O(t))return;const n=t.getAttribute("data-speccer")||"";await V();const o=N(n,getComputedStyle(t),e);if("measure"!==o.type||!o.measure)return;const{measure:i,position:s}=o;await V();const r=t.getBoundingClientRect(),a=i.slim?0:48,c=i.slim?0:96,p=`speccer-${o.slug}-${t.getAttribute("id")||q()}`;if(t.setAttribute("data-speccer-element-id",p),i.width)if(s===y.Bottom){const e=J(r.width,o,p);document.body.appendChild(e);const n=await F(e,t);if(i.slim){const{left:t,top:o,width:i}=n.fromBottom({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`})}else{const{left:t,top:o,width:i,height:s}=n.absolute({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`,height:`${s+a}px`})}}else{const e=J(r.width,o,p);document.body.appendChild(e);const n=await F(e,t);if(i.slim){const{left:t,top:o,width:i}=n.fromTop({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`})}else{const{left:t,top:o,width:i,height:s}=n.absolute({center:!1});await _(e,{left:`${t}px`,top:o-a+"px",width:`${i}px`,height:`${s+a}px`})}}else if(i.height)if(s===y.Right){const e=J(r.height,o,p);document.body.appendChild(e);const n=await F(e,t);if(i.slim){const{left:t,top:o,height:i}=n.fromRight({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`})}else{const{left:t,top:o,height:i,width:s}=n.absolute({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`,width:`${s+c}px`})}}else{const e=J(r.height,o,p);document.body.appendChild(e);const n=await F(e,t);if(i.slim){const{left:t,top:o,height:i}=n.fromLeft({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`})}else{const{left:t,top:o,height:i,width:s}=n.absolute({center:!1});await _(e,{left:t-c+"px",top:`${o}px`,height:`${i}px`,width:`${s+c}px`})}}},tt=(t="",e,n="",o="span")=>{const i=document.createElement(o),a={},{position:c,pin:p={}}=e,{useSVGLine:l,useCurlyBrackets:d,text:h,parent:u,bracket:f,enclose:g,subtle:m}=p;a.text=h,a.parent=u,a.bracket=f,a.enclose=g,a.subtle=m,a.svg=l,a.curly=d,a[c]=!0,!u||f||d||m||(a.svg=!0),!f&&!g||f&&d?i.innerHTML=t:(f||g)&&i.setAttribute("data-pin-counter",t);const y=r("ph-speccer speccer pin",a);return s(i,y),i.setAttribute("id",n),i},et=t=>t.top,nt=t=>t.left+t.width,ot=t=>t.top+t.height,it=t=>t.left,st=t=>t.left+t.width/2,rt=t=>t.top+t.height/2,at={center:t=>({x:st(t),y:rt(t)}),top:t=>({x:st(t),y:et(t)}),right:t=>({x:nt(t),y:rt(t)}),bottom:t=>({x:st(t),y:ot(t)}),left:t=>({x:it(t),y:rt(t)}),"right-top":t=>({x:nt(t),y:et(t)}),"right-bottom":t=>({x:nt(t),y:ot(t)}),"left-top":t=>({x:it(t),y:et(t)}),"left-bottom":t=>({x:it(t),y:ot(t)}),"top-left":t=>({x:it(t),y:et(t)}),"top-right":t=>({x:nt(t),y:et(t)}),"bottom-left":t=>({x:it(t),y:ot(t)}),"bottom-right":t=>({x:nt(t),y:ot(t)}),"top-center":t=>({x:st(t),y:et(t)}),"right-center":t=>({x:nt(t),y:rt(t)}),"bottom-center":t=>({x:st(t),y:ot(t)}),"left-center":t=>({x:it(t),y:rt(t)})},ct=async(t,n="center")=>{if(!n)throw Error("No position given");if(e(n))throw Error("The position given is not the required type: pos: "+typeof n);const o=["center","left","right","top","bottom","right-top","right-bottom","left-top","left-bottom","top-left","top-right","bottom-left","bottom-right","top-center","right-center","bottom-center","left-center"];if(!o.includes(n))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${o.join(", ")}`);await V();const i=t.getBoundingClientRect();return at[n](i)};class pt{#t;el;circle;radius;options;constructor(t,e,n){this.#e(t,e,n)}#e(t,e,n){if(!t||!e||!n)throw new Error("Missing inputs el or radius or options");if(!document.body.contains(t))throw new Error("el is not in the DOM");if(this.el=t,this.radius=e,this.options=n,this.#t=document.getElementById("ph-speccer-svg"),!this.#t)throw new Error("Missing required SVG element to draw circles. Please see the documentation");const o=document.body,i=document.documentElement,s=Math.max(o.scrollHeight,o.offsetHeight,i.clientHeight,i.scrollHeight,i.offsetHeight);_(this.#t,{height:`${s}px`}),this.draw()}async draw(){const t=`ph_draw-circle-${q()}`;this.circle=document.createElementNS("http://www.w3.org/2000/svg","circle");const e=this.el.getAttribute("id")||q();if(this.el.setAttribute("id",e),this.circle.setAttribute("id",t),this.circle.setAttribute("data-el",e),this.circle.classList.add("ph-speccer"),this.circle.classList.add("speccer"),this.circle.classList.add("circle"),!this.#t)throw new Error("No parentNode found for circle");this.#t.appendChild(this.circle);const{x:n,y:o}=await ct(this.el,this.options.position);this.circle.setAttribute("r",this.radius+""),this.circle.setAttribute("cx",Math.round(n)+""),this.circle.setAttribute("cy",Math.round(o+document.documentElement.scrollTop)+""),this.circle.setAttribute("fill","currentColor")}}window.DrawCircle=pt;const lt=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:s}=await ct(t,n),{x:r,y:a}=await ct(e,o);return{x1:i,y1:s,x2:r,y2:a}},dt=(t,e)=>{const{x1:n,x2:o,y1:i,y2:s}=t,{direct:r=!1,firstSet:a=!1,direction:c}=e,p={x:n,y:i},l={x:o,y:s};return r?a?"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i-8},lastPoint:l,lastControl:{x:o+32,y:s}}:"south"===c?{firstPoint:p,firstControl:{x:n-8,y:i+32},lastPoint:l,lastControl:{x:o,y:s-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i-8},lastPoint:l,lastControl:{x:o-32,y:s}}:{firstPoint:p,firstControl:{x:n-8,y:i-32},lastPoint:l,lastControl:{x:o,y:s+32}}:"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i+8},lastPoint:l,lastControl:{x:o+32,y:s}}:"south"===c?{firstPoint:p,firstControl:{x:n+8,y:i+32},lastPoint:l,lastControl:{x:o,y:s-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i+8},lastPoint:l,lastControl:{x:o-32,y:s}}:{firstPoint:p,firstControl:{x:n+8,y:i-32},lastPoint:l,lastControl:{x:o,y:s+32}}:{firstPoint:p,firstControl:{x:n+(o-n)/2,y:i},lastPoint:l,lastControl:{x:n+(o-n)/2,y:s}}},ht=async(t,e,n)=>{const{pos1:o,pos2:i,firstSet:s=!1,direction:r}=n,{x1:a,y1:c,x2:p,y2:l}=await lt(t,e,o,i);let d=0,h=0;"north"===r?h=8:"west"===r?d=8:"east"===r?d=-8:"south"===r&&(h=-8);const{firstPoint:u,firstControl:f,lastControl:g,lastPoint:m}=dt({x1:a+0,x2:p+d,y1:c+0+document.documentElement.scrollTop,y2:l+h+document.documentElement.scrollTop},{direct:!0,firstSet:s,direction:r});return`M ${u.x} ${u.y}C ${f.x} ${f.y}, ${g.x} ${g.y}, ${m.x} ${m.y}`},ut=async({start:t,stop:e,crude:n=!1})=>{const{x1:s,y1:r,x2:a,y2:c}=await lt(t,e),p=((t,e,n,s,r=!0)=>{if(i(t)||i(e)||i(n)||i(s))throw new SyntaxError("Missing input for `angle`");if(o(t)||o(e)||o(n)||o(s))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof n} ${typeof s}`);const a=s-e,c=n-t;let p=Math.atan2(a,c);return p*=180/Math.PI,r&&p<0&&(p+=360),p})(s,r,a,c);return n?(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=45&&t<=135?"south":t>135&&t<=225?"west":t>225&&t<=315?"north":"east"})(p):(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=0&&t<=22.5?"east":t>=22.5&&t<=67.5?"south-east":t>=67.5&&t<=112.5?"south":t>=112.5&&t<=157.5?"south-west":t>=157.5&&t<=202.5?"west":t>=202.5&&t<=247.5?"north-west":t>=247.5&&t<=292.5?"north":t>=292.5&&t<=337.5?"north-east":"east"})(p)};class ft{#t;#n;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#e(t,e)}#e(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const n=document.body,o=document.documentElement,i=Math.max(n.scrollHeight,n.offsetHeight,o.clientHeight,o.scrollHeight,o.offsetHeight);_(this.#t,{height:`${i}px`}),this.connect()}connect(){this.draw(this.#n)}#o(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${q()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||q();return this.startElement.setAttribute("id",o),n.setAttribute("data-start-el",o),n.setAttribute("id",e),n.classList.remove("original"),n.classList.add("speccer"),n}async draw(t){if(!t)throw new Error("No path given to draw!");const e=this.#o(t),n=this.#o(t);if(!t.parentNode)throw new Error("No parentNode found for path");this.firstPathElement=t.parentNode.insertBefore(e,t.nextSibling),this.secondPathElement=t.parentNode.insertBefore(n,t.nextSibling);const o=await ut({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:i,path1pos2:s,path2pos1:r,path2pos2:a}=(t=>{let e,n,o,i;switch(t){case"east":e="right-top",n="left-center",o="right-bottom",i="left-center";break;case"south":e="bottom-left",n="top-center",o="bottom-right",i="top-center";break;case"west":e="left-top",n="right-center",o="left-bottom",i="right-center";break;default:e="top-left",n="bottom-center",o="top-right",i="bottom-center"}return{path1pos1:e,path1pos2:n,path2pos1:o,path2pos2:i}})(o),c=await ht(this.startElement,this.stopElement,{pos1:i,pos2:s,firstSet:!0,direction:o}),p=await ht(this.startElement,this.stopElement,{pos1:r,pos2:a,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",i),this.firstPathElement.setAttribute("data-pos2",s),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",r),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",p)}}window.DrawSVGCurlyBracket=ft;class gt{#t;#n;startElement;stopElement;options;line;constructor(t,e,n={}){this.#e(t,e,n)}#e(t,e,n={}){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.options=n,this.#t=document.getElementById("ph-speccer-svg"),this.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const o=document.body,i=document.documentElement,s=Math.max(o.scrollHeight,o.offsetHeight,i.clientHeight,i.scrollHeight,i.offsetHeight);_(this.#t,{height:`${s}px`}),this.connect()}connect(){this.draw(this.#n)}async draw(t){if(!t)throw new Error("No path given to draw!");const e=`ph_draw_path-path-${q()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||q();this.startElement.setAttribute("id",o),n.setAttribute("id",e),n.setAttribute("data-start-el",o),n.classList.remove("original"),n.classList.add("speccer");const{pin:i}=this.options;if(i?.text&&n.classList.add("text"),!t.parentNode)throw new Error("No parentNode found for path");this.line=t.parentNode.insertBefore(n,t.nextSibling);const s=await ut({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:r,pos2:a}=(t=>{let e,n;switch(t){case"east":e="right",n="left";break;case"south":e="bottom",n="top";break;case"west":e="left",n="right";break;default:e="top",n="bottom"}return{pos1:e,pos2:n}})(s),c=await(async(t,e,n)=>{const{pos1:o,pos2:i}=n,{x1:s,y1:r,x2:a,y2:c}=await lt(t,e,o,i),{firstPoint:p,firstControl:l,lastControl:d,lastPoint:h}=dt({x1:s,x2:a,y1:r+document.documentElement.scrollTop,y2:c+document.documentElement.scrollTop},{direction:""});return`M ${p.x} ${p.y}C ${l.x} ${l.y}, ${d.x} ${d.y}, ${h.x} ${h.y}`})(this.startElement,this.stopElement,{pos1:r,pos2:a});this.line.setAttribute("data-direction",s),this.line.setAttribute("data-pos1",r),this.line.setAttribute("data-pos2",a),this.line.setAttribute("d",c)}}window.DrawSVGLine=gt;const mt=t=>parseInt(t,10),yt=t=>mt(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,wt=async(t,e,n,o)=>{await V();const{pin:i={},position:s}=o,{useCurlyBrackets:r,subtle:a,bracket:c,text:p,parent:l,enclose:d}=i,h=yt(e),u=mt(getComputedStyle(e).getPropertyValue("--ph-speccer-measure-size"))||8;const f=await F(e,t);if(d){const{left:t,top:e,height:n,width:o}=f.absolute();return{left:`${t}px`,top:`${e}px`,height:`${n}px`,width:`${o}px`}}if((l||p)&&!c&&!r&&!a){if(s===m.Right){const{top:t}=f.fromRight({center:!0});await V();const{left:e,width:o}=n.getBoundingClientRect();return{left:`${e+o+h}px`,top:`${t}px`}}if(s===m.Bottom){const{left:t}=f.toBottom({center:!0});await V();const{top:e,height:o}=n.getBoundingClientRect();return{left:`${t}px`,top:`${e+o+h}px`}}if(s===m.Left){const{top:t}=f.fromLeft({center:!0});await V();const{left:e}=n.getBoundingClientRect();return{left:e-1.5*h-(p?170:0)+"px",top:`${t}px`}}const{left:t}=f.fromTop({center:!0});await V();const{top:e}=n.getBoundingClientRect();return{left:`${t}px`,top:e-1.5*h+"px"}}if(s===m.Left){if(c&&!r){const{left:t,top:e,height:n}=f.fromLeft({sourceWidth:u});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:t,top:e}=f.fromLeft({center:!0,modifier:r?h/1.5:h});return{left:`${t}px`,top:`${e}px`}}if(s===m.Right){if(c&&!r){const{left:t,top:e,height:n}=f.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:t,top:e}=f.fromRight({center:!0,modifier:r?h/1.5:h});return{left:`${t}px`,top:`${e}px`}}if(s===m.Bottom){if(c&&!r){const{left:t,top:e,width:n}=f.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:t,top:e}=f.fromBottom({center:!0,modifier:r?h/1.5:h});return{left:`${t}px`,top:`${e}px`}}if(c&&!r){const{left:t,top:e,width:n}=f.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:g,top:y}=f.fromTop({center:!0,modifier:r?h/1.5:h});return{left:`${g}px`,top:`${y}px`}},xt=async(t,e,n,o)=>{if(!t)return;if("pin"!==o.type||!o.pin)return;const i=`speccer-${o.slug}-${t.getAttribute("id")||q()}`,s=tt(n,o,i);t.setAttribute("data-speccer-element-id",i),document.body.appendChild(s);const r=await wt(t,s,e,o);await _(s,r);const a=o.pin.text&&null!==t.getAttribute("data-speccer-title"),c=o.pin.parent&&!o.pin.enclose&&!o.pin.bracket&&!a;return o.pin.useSVGLine?(new gt(t,s,o),c&&new pt(t,5,o)):o.pin.useCurlyBrackets&&new ft(t,s),i};let bt=0;const $t=async(t,e)=>{if(!t)return;const n=t.querySelectorAll('[data-speccer^="pin"]');if(!n||0===n.length)return;const o=t.getAttribute("data-speccer-literals")||window.SPECCER_LITERALS||a;[...n].filter((async t=>!O(t))).forEach((async(n,i)=>{const s=((t,e)=>{let n=e[t];return 0===t&&(bt=0),n||(n=`${e[bt]}${e[bt].toLowerCase()}`,bt++),n})(i,o),r=n.getAttribute("data-speccer")||"";await V();const a=getComputedStyle(n),c=N(r,a,e),p=((t,e,n)=>{const{pin:o}=n;if(!o)return t;const{text:i}=o;if(!i||null===e.getAttribute("data-speccer-title"))return t;const s=e.getAttribute("data-speccer-title"),r=e.getAttribute("data-speccer-description"),a=0===e.nodeName.indexOf("H")?`<span class="ph-speccer heading">${e.nodeName}</span>`:"";return!r&&s?`${a}<span class="ph-speccer title">${s}</span>`:r&&s?`${a}<span class="ph-speccer title">${s}</span><span class="ph-speccer description">${r.replaceAll("\\n","<br/>")}</span>`:t})(s,n,c);await xt(n,t,p,c)}))},Et=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(`${t}px`);return n.appendChild(o),n.setAttribute("title",`${t}px`),s(n,"ph-speccer speccer spacing"),n},At=async(t,e)=>{if(!t)return;if(O(t))return;const n=t.getAttribute("data-speccer")||"",o=await X(t),i=N(n,o,e);if("spacing"!==i.type||!i.spacing)return;const a=((t,e)=>{const{marginTop:n,marginBottom:o,marginLeft:i,marginRight:s,paddingTop:r,paddingBottom:a,paddingLeft:c,paddingRight:p}=t;return e?.spacing?.padding?{paddingTop:r,paddingBottom:a,paddingLeft:c,paddingRight:p}:e?.spacing?.margin?{marginTop:n,marginBottom:o,marginLeft:i,marginRight:s}:{marginTop:n,marginBottom:o,marginLeft:i,marginRight:s,paddingTop:r,paddingBottom:a,paddingLeft:c,paddingRight:p}})(o,i),c=Object.keys(a).filter((t=>"0px"!==a[t]));if(!c.length)return;t.classList.add("is-specced");const p=`speccer-spacing-${t.getAttribute("id")||q()}`;t.setAttribute("data-speccer-element-id",p),c.forEach((async e=>{const n=mt(a[e]),o=Et(n);o.setAttribute("data-speccer-id",p);const c=(t=>t.includes("Top")?t.replace("Top"," top"):t.includes("Right")?t.replace("Right"," right"):t.includes("Bottom")?t.replace("Bottom"," bottom"):t.includes("Left")?t.replace("Left"," left"):"")(e);s(o,r(c,{bound:!!i?.spacing?.bound})),document.body.appendChild(o);const l=await(async(t,e,n,o)=>{await V();const i=n.getBoundingClientRect(),s=await D(n),r=o?.spacing?.bound?0:96,a=o?.spacing?.bound?0:48;return"marginTop"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top-e+"px"}:"marginRight"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left+parseInt(i.width+"",10)+"px",top:s.top+"px"}:"marginBottom"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top+parseInt(i.height+"",10)+"px"}:"marginLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left-e+"px",top:s.top+"px"}:"paddingTop"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top+"px"}:"paddingBottom"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top+(parseInt(i.height+"",10)-e)+"px"}:"paddingRight"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left+(parseInt(i.width+"",10)-e)+"px",top:s.top+"px"}:"paddingLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left+"px",top:s.top+"px"}:void 0})(e,n,t,i);await _(o,l)}))},kt=(t,e=3)=>parseFloat(String(t)).toFixed(e),Ct=(t,e,n)=>{const o=document.createElement("div"),{typography:i,position:a}=e,c=r("ph-speccer speccer typography",{syntax:i?.useSyntaxHighlighting||!1,[a]:!0});return o.setAttribute("id",n),o.innerHTML=t,s(o,c),o},St=async(t,e)=>{if(!t)return;if(O(t))return;const n=t.getAttribute("data-speccer")||"";await V();const o=N(n,getComputedStyle(t),e);if("typography"!==o.type||!o.typography)return;t.classList.add("is-specced");const i=await(async(t,e=!1)=>{const n=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}})(await X(t));if(e){const t=n.fontFamily.split(",").map((t=>t.includes("'")?`<span class="token string">${t}</span>`:t)).join('<span class="token punctuation">, </span>'),e=`<span class="token number">${parseInt(n.fontSize,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.fontSize,10)/16}</span><span class="token unit">rem</span>`,o=n.letterSpacing.includes("px")?`<span class="token number">${parseInt(n.letterSpacing,10)}</span><span class="token unit">px</span>`:n.letterSpacing,i="normal"!==n.lineHeight?`<span class="token number">${parseInt(n.lineHeight,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.lineHeight,10)/16}</span><span class="token unit">rem</span>`:"normal";return`\n<pre class="language-css" tabindex="-1"><code class="language-css"><span class="token selector"><span class="token class">.typography</span></span> <span class="token punctuation">{</span>\n <span class="token property">font-family</span><span class="token punctuation">:</span> ${t}<span class="token punctuation">;</span>\n <span class="token property">font-size</span><span class="token punctuation">:</span> ${e}<span class="token punctuation">;</span>\n <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">${n.fontWeight}</span><span class="token punctuation">;</span>\n <span class="token property">font-variation-settings</span><span class="token punctuation">:</span> ${n.fontVariationSettings}<span class="token punctuation">;</span>\n <span class="token property">line-height</span><span class="token punctuation">:</span> ${i}<span class="token punctuation">;</span>\n <span class="token property">letter-spacing</span><span class="token punctuation">:</span> ${o}<span class="token punctuation">;</span>\n <span class="token property">font-style</span><span class="token punctuation">:</span> ${n.fontStyle}<span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>`}return`\ntypography: {<ul class="speccer-styles"> <li><span class="property">font-family:</span> ${n.fontFamily};</li> <li><span class="property">font-size:</span> ${n.fontSize} / ${parseInt(n.fontSize,10)/16}rem;</li> <li><span class="property">font-weight:</span> ${n.fontWeight};</li> <li><span class="property">font-variation-settings:</span> ${n.fontVariationSettings};</li> <li><span class="property">line-height:</span> ${"normal"!==n.lineHeight?`${parseInt(n.lineHeight,10)}px / ${parseInt(n.lineHeight,10)/16}rem`:"normal"};</li> <li><span class="property">letter-spacing:</span> ${n.letterSpacing};</li> <li><span class="property">font-style:</span> ${n.fontStyle};</li></ul>}`})(t,o.typography.useSyntaxHighlighting),s=`speccer-${o.slug}-${t.getAttribute("id")||q()}`;t.setAttribute("data-speccer-element-id",s);const r=Ct(i,o,s);document.body.appendChild(r);const a=await(async(t,e,n)=>{const o=e.getBoundingClientRect(),i=yt(n),s=n.getBoundingClientRect(),r=await D(e),{typography:a,position:c}=t;if(a&&c===w.Right)return{left:r.left+o.width+i+"px",top:kt(W(r.top,s,o))+"px"};if(a&&c===w.Top)return{left:kt(j(r.left,s,o))+"px",top:r.top-s.height-i+"px"};if(a&&c===w.Bottom)return{left:kt(j(r.left,s,o))+"px",top:r.top+o.height+i+"px"};return{left:r.left-s.width-i+"px",top:kt(W(r.top,s,o))+"px"}})(o,t,r);_(r,a)},vt=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(i,...s){const r=n&&!o;o&&clearTimeout(o),o=setTimeout((function(){o=null,n||t.apply(i,s)}),e),r&&t.apply(i,s)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},Pt=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},Lt=()=>{const t=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(At(n.target),e.unobserve(n.target))}));for(const e of document.querySelectorAll(`[${c}^="${p}"],[${c}^="${p}"] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)`))t.observe(e);const e=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Q(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}^="${l}"]`))e.observe(t);const n=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Z(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}^="${h}"]`))n.observe(t);const o=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(St(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}^="${d}"]`))o.observe(t);const i=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(K(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}^="${u}"]`))i.observe(t);const s=new IntersectionObserver((async(t,e)=>{for(const n of t)n.intersectionRatio>0&&(await $t(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}="${f}"]`))s.observe(t)},Bt=t=>{window.speccer=t},Rt=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?Bt(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?Pt(t):e.hasAttribute("data-lazy")?Lt():Pt(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||vt(t))}},Tt=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],Ht=["escape","esc","enter","return","⏎","␛"],It=async(t,e,n)=>{await V();const o=yt(n),i=await F(n,e);if("tabstops"===t){let{left:t,top:e}=i.fromTop();return t-=32,e+=32,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("landmark"===t){let{left:t,top:e}=i.fromTop();return t-=16,e-=16,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("region"===t){const{left:t,top:e,height:n,width:o}=i.fromTop();return{height:`${n}px`,width:`${o}px`,left:`${t}px`,top:`${e}px`}}if("shortcut"===t){const{left:t,top:e}=i.fromBottom();return{left:`${t}px`,top:`${e}px`}}const{left:s,top:r}=i.fromTop({center:!0,modifier:o});return{left:s-32+"px",top:r-32+"px"}},Mt=async(t,e,n)=>{if(!t||!t.checkVisibility())return;const o=((t="tabstops",e,n="span")=>{const o=document.createElement(n),i=r("ph-speccer speccer a11y",{tabstops:"tabstops"===t,landmark:"landmark"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(String(e));o.appendChild(t)}return s(o,i),o})(n,e);if("landmark"===n){o.setAttribute("data-speccer-nodename",t.nodeName);const e=t.role||`semantic role: ${t.nodeName.toLowerCase()}`,n=t.getAttribute("aria-label")||"unnamed";o.setAttribute("title",`${n}: ${e}`)}document.body.appendChild(o);const i=await It(n,t,o);await _(o,i)},Nt=async(t,e)=>{const n=e.split(/\s\+\s/).map((t=>t.trim())),o=document.createElement("div"),i=r("ph-speccer speccer a11y shortcut-holder");s(o,i);for(const t of n){const e=document.createElement("kbd"),n=document.createTextNode(t),i=r("ph-speccer speccer a11y shortcut",{modifier:Tt.includes(t.toLowerCase()),physical:Ht.includes(t.toLowerCase())});s(e,i),e.appendChild(n),o.appendChild(e)}document.body.appendChild(o);const a=await It("shortcut",t,o);await _(o,a)},qt=t=>{const e=t.getAttribute("data-speccer-element-id");if(!e)return;const n=document.getElementById(e)||document.querySelectorAll(`[data-speccer-id="${e}"]`);if(n)if(Object.prototype.isPrototypeOf.call(NodeList.prototype,n))[...n].forEach((t=>{t.remove(),t.classList.remove("is-specced")}));else if(n.classList.contains("curly")||n.classList.contains("svg")){const e=t.getAttribute("id");document.querySelectorAll(`#ph-speccer-svg path[data-start-el="${e}"]`).forEach((t=>t.remove()))}},Ot={create:Y,element:K},Vt={create:Et,element:At},zt={createPinElement:tt,pinElement:xt,pinElements:$t},Gt={create:J,element:Q},jt={create:U,element:Z},Wt={create:Ct,element:St},Dt={dom:Pt,lazy:Lt,manual:Bt,activate:Rt},Ft=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".ph-speccer.speccer");const t=document.querySelectorAll(`[${c}^="${p}"],[${c}^="${p}"] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)`),e=document.querySelectorAll(`[${c}^="${l}"]`),n=document.querySelectorAll(`[${c}^="${d}"]`),o=document.querySelectorAll(`[${c}="${f}"]`),i=document.querySelectorAll(`[${c}^="${h}"]`),s=document.querySelectorAll(`[${c}^="${u}"]`);for(const t of i)Z(t);for(const t of s)K(t);for(const e of t)At(e);for(const t of e)Q(t);for(const t of n)St(t);for(const t of o)$t(t);(()=>{const t=document.querySelectorAll('[data-speccer*="a11y tabstops"]'),e=document.querySelectorAll('[data-speccer*="a11y landmark"]'),n=document.querySelectorAll('[data-speccer*="a11y shortcut"]');if(n.length)for(const t of n){const e=t.getAttribute("data-speccer-a11y-shortcut");e&&""!==e&&!O(t)&&Nt(t,e)}if(t.length)for(const e of t){const t=e.querySelectorAll("\n a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n textarea:not([disabled]):not([tabindex='-1']),\n iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]\n");for(const e of t)O(e)||Mt(e,null,"tabstops")}if(e.length)for(const t of e){const e=t.querySelectorAll('\nheader, footer, section, form, main, nav, aside, [role="section"], [role="banner"],\n[role="complementary"], [role="contentinfo"], [role="form"], [role="main"],\n[role="navigation"], [role="region"], [role="search"]\n');for(const[t,n]of e.entries())O(n)||(Mt(n,t+1,"landmark"),Mt(n,null,"region"))}})()};Rt(Ft);export{Ft as default,Ot as grid,jt as mark,Gt as measure,Dt as modes,zt as pin,qt as removeSpeccerElement,Vt as spacing,Wt as typography};
28
28
  //# sourceMappingURL=speccer.esm.js.map