@phun-ky/speccer 11.0.0 → 11.1.0

package/README.md

@@ -24,6 +24,7 @@
     - [React](#react)
   - [Features](#features)
     - [Element spacing](#element-spacing)
+      - [Bound spacing](#bound-spacing)
     - [Element dimensions](#element-dimensions)
       - [Slim measure](#slim-measure)
     - [Pin element to highlight the anatomy](#pin-element-to-highlight-the-anatomy)
@@ -207,13 +208,23 @@ export default Component;
 Use the following attribute to display element padding and margin:
 
 ```html
-<div data-speccer="spacing" class="..."></div>
+<div data-speccer="spacing [padding|margin] [bound]" class="…"></div>
 ```
 
-This will display the element _and all of it's children_ padding and margin.
+This will display the element _and all of it's children_ padding and margin, unless you specify `padding` and `margin`
 
 ![Image of the spacing feature in dark mode](./public/speccer-spacing-dark.png)
 
+#### Bound spacing
+
+![spacing](./public/speccer-spacing-bound.png)
+
+This option binds the speccer elements to the bounds of the element container.
+
+```html
+<div data-speccer="spacing bound" class="…"></div>
+```
+
 ### Element dimensions
 
 ![Image of the measure feature](./public/speccer-measure-right-full-light.png)
@@ -224,7 +235,7 @@ Display dimensions with:
 ```html
 <div
   data-speccer="measure [height left|right] | [width top|bottom]"
-  class="..."
+  class="…"
 ></div>
 ```
 
@@ -239,7 +250,7 @@ Where `height` and `width` comes with placement flags. Default for `height` is `
 Use a slim style:
 
 ```html
-<div data-speccer="measure slim height left" class="..."></div>
+<div data-speccer="measure slim height left" class="…"></div>
 ```
 
 This will give a slimmer look and feel.
@@ -249,7 +260,7 @@ This will give a slimmer look and feel.
 Use a subtle style for the slim option, uses a dashed line instead of a solid line:
 
 ```html
-<div data-speccer="measure slim height left subtle" class="..."></div>
+<div data-speccer="measure slim height left subtle" class="…"></div>
 ```
 
 This will give a dashed border.
@@ -264,7 +275,7 @@ In your component examples, use the following attribute. Remember to use the `da
 <div data-speccer="pin-area">
   <div
     data-speccer="pin [bracket [curly] |enclose] [left|right|top|bottom]"
-    class="..."
+    class="…"
   ></div>
 </div>
 ```
@@ -277,7 +288,7 @@ This will place a pin to the outline of the element. Default is `top`.
 
 ```html
 <div data-speccer="pin-area">
-  <div data-speccer="pin" class="..."></div>
+  <div data-speccer="pin" class="…"></div>
 </div>
 ```
 
@@ -287,7 +298,7 @@ This will place a pin to the outline of the element. Default is `top`.
 
 ```html
 <div data-speccer="pin-area">
-  <div data-speccer="pin enclose" class="..."></div>
+  <div data-speccer="pin enclose" class="…"></div>
 </div>
 ```
 
@@ -297,7 +308,7 @@ This will place a pin to the outline of the element. Default is `top`.
 
 ```html
 <div data-speccer="pin-area">
-  <div data-speccer="pin enclose" class="..."></div>
+  <div data-speccer="pin enclose" class="…"></div>
 </div>
 ```
 
@@ -309,7 +320,7 @@ You can also align the pins to the parent container.
 
 ```html
 <div data-speccer="pin-area">
-  <div data-speccer="pin parent [left|right|top|bottom]" class="..."></div>
+  <div data-speccer="pin parent [left|right|top|bottom]" class="…"></div>
 </div>
 ```
 
@@ -400,7 +411,7 @@ You can also give a more subtle touch to the anatomy elements.
 
 ```html
 <div data-speccer="pin-area">
-  <div data-speccer="pin top subtle" class="..."></div>
+  <div data-speccer="pin top subtle" class="…"></div>
 </div>
 ```
 
@@ -447,7 +458,7 @@ from v9.5 you can utilize the `pin` feature to highlight the anatomy of an eleme
 Display typography details:
 
 ```html
-<p data-speccer="typography [left|right|top|bottom]" class="...">Some text</p>
+<p data-speccer="typography [left|right|top|bottom]" class="…">Some text</p>
 ```
 
 This will place a box to display typography information. Default is `left`.
@@ -460,7 +471,7 @@ This will place a box to display typography information. Default is `left`.
 If you want to produce a box that uses `pre` and `code` tags with support for syntax highlighting ([PrismJS](https://prismjs.com/) compatible), add `syntax` to the `data-speccer="typography"` attribute.
 
 ```html
-<p data-speccer="typography syntax right" class="...">Some text</p>
+<p data-speccer="typography syntax right" class="…">Some text</p>
 ```
 
 You can then override the colors, based on these variables:

package/dist/speccer.css

@@ -1057,6 +1057,18 @@ svg.ph-speccer .ph-speccer.circle {
   width: 100%;
   top: calc(100% - 24px - 5px);
 }
+.ph-speccer.speccer.spacing.bound.padding.bottom,
+.ph-speccer.speccer.spacing.bound.margin.bottom,
+.ph-speccer.speccer.spacing.bound.padding.top,
+.ph-speccer.speccer.spacing.bound.margin.top,
+.ph-speccer.speccer.spacing.bound.padding.right,
+.ph-speccer.speccer.spacing.bound.margin.right,
+.ph-speccer.speccer.spacing.bound.padding.left,
+.ph-speccer.speccer.spacing.bound.margin.left {
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
 .ph-speccer.speccer.measure {
   display: flex;
 }

package/dist/speccer.d.ts

@@ -22,8 +22,17 @@ interface SpeccerOptionsInterface {
     typography?: {
         useSyntaxHighlighting: boolean;
     };
+    spacing?: {
+        margin?: boolean;
+        padding?: boolean;
+        both?: boolean;
+        bound?: boolean;
+    };
     grid?: {
         toggle: string;
+        both?: boolean;
+        rows?: boolean;
+        columns?: boolean;
     };
 }
 
@@ -62,30 +71,49 @@ declare global {
 }
 //# sourceMappingURL=global.d.ts.map
 
+/**
+ * Remove a speccer element by removing associated elements and SVG paths.
+ *
+ * This function removes any speccer elements linked to the specified element and
+ * also removes any SVG paths that might be associated with it.
+ *
+ * @param {HTMLElement} el - The HTML element to unpin.
+ * @returns {void} This function does not return a value.
+ *
+ * @example
+ * ```ts
+ * const element = document.getElementById('my-element');
+ * if (element) {
+ *   removeSpeccerElement(element);
+ * }
+ * ```
+ */
+declare const removeSpeccerElement: (el: HTMLElement) => void;
+
 declare const grid: {
     create: (targetElement: HTMLElement, styles: CSSStyleDeclaration, options: SpeccerOptionsInterface) => Promise<void>;
-    element: (targetElement: HTMLElement) => Promise<void>;
+    element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
 };
 declare const spacing: {
     create: (text?: string | number, tag?: string) => HTMLElement;
-    element: (targetElement: HTMLElement) => Promise<void>;
+    element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
 };
 declare const pin: {
     createPinElement: (content: string | undefined, options: SpeccerOptionsInterface, id?: string, n?: string) => HTMLElement;
     pinElement: (targetElement: HTMLElement, parentElement: HTMLElement, content: string, options: SpeccerOptionsInterface) => Promise<string | void>;
-    pinElements: (sectionElement: HTMLElement) => Promise<void>;
+    pinElements: (sectionElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
 };
 declare const measure: {
-    create: (text: (string | number) | undefined, options: SpeccerOptionsInterface, tag?: string) => HTMLElement;
-    element: (targetElement: HTMLElement) => Promise<void>;
+    create: (text: (string | number) | undefined, options: SpeccerOptionsInterface, id: string, tag?: string) => HTMLElement;
+    element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
 };
 declare const mark: {
-    create: (n?: string) => HTMLElement;
+    create: (id: string, n?: string) => HTMLElement;
     element: (targetElement: HTMLElement) => Promise<void>;
 };
 declare const typography: {
-    create: (html: string, options: SpeccerOptionsInterface) => HTMLElement;
-    element: (targetElement: HTMLElement) => Promise<void>;
+    create: (html: string, options: SpeccerOptionsInterface, id: string) => HTMLElement;
+    element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
 };
 declare const modes: {
     dom: (speccer: SpeccerFunctionType) => void;
@@ -95,4 +123,4 @@ declare const modes: {
 };
 declare const speccer: () => void;
 
-export { speccer as default, grid, mark, measure, modes, pin, spacing, typography };
+export { speccer as default, grid, mark, measure, modes, pin, removeSpeccerElement, spacing, typography };

package/dist/speccer.esm.js

@@ -2,7 +2,7 @@
 * @phun-ky/speccer
 * A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements
 * @author Alexander Vassbotn Røyne-Helgesen <alexander@phun-ky.net>
-* @version 11.0.0
+* @version 11.1.0
 * @license
 * Copyright (c) 2018 Alexander Vassbotn Røyne-Helgesen
 *
@@ -24,5 +24,5 @@
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
-var t,e,n,o,i,s,r;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(t||(t={})),function(t){t.Pin="pin",t.Parent="parent",t.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"}(e||(e={})),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"}(n||(n={})),function(t){t.Typography="typography",t.Syntax="syntax",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(o||(o={})),function(t){t.Spacing="spacing"}(i||(i={})),function(t){t.Mark="mark"}(s||(s={})),function(t){t.Grid="grid"}(r||(r={}));const a=t=>"string"==typeof t,c=t=>!a(t),p=t=>"number"==typeof t,l=t=>!p(t),d=t=>void 0===t,h=(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()))))},u=(t,e)=>t?!e&&c(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():"",f=t=>t.split(" "),g=t=>{if(null===t)return!1;return f(t).includes(e.Bracket)},m=t=>{if(null===t)return!1;return f(t).includes(e.Enclose)},y=t=>{if(null===t)return!1;return f(t).includes(e.Subtle)},w=t=>{if(null===t)return!1;return f(t).includes(e.Parent)},x=t=>{if(null===t)return!1;return f(t).includes(e.Text)},b=t=>{if(null===t)return!1;return f(t).includes(n.Height)},$=t=>{if(null===t)return!1;return f(t).includes(n.Slim)},E=t=>{if(null===t)return!1;return f(t).includes(n.Width)},k=t=>{if(null===t)return!1;const n=f(t);return(w(t)&&!m(t)&&!g(t)||x(t)||n.includes(e.SVG))&&!S(t)},S=t=>{if(null===t)return!1;const n=f(t);return n.includes(e.Curly)&&n.includes(e.Bracket)},A=t=>!!t&&t.split(" ").includes(o.Syntax),L=(t,a)=>(t=>null!==t&&t.split(" ").includes(e.Pin))(t)?"pin":((t,e)=>null!==t&&t.split(" ").includes(r.Grid)&&("grid"===e.display||e.display.includes("grid")))(t,a)?"grid":(t=>null!==t&&t.split(" ").includes(s.Mark))(t)?"mark":(t=>null!==t&&t.split(" ").includes(n.Measure))(t)?"measure":(t=>null!==t&&t.split(" ").includes(i.Spacing))(t)?"spacing":(t=>null!==t&&t.split(" ").includes(o.Typography))(t)?"typography":"pin",C=t=>(t=>null!==t&&f(t).includes(e.Left))(t)?"left":(t=>null!==t&&f(t).includes(e.Right))(t)?"right":(t=>null!==t&&f(t).includes(e.Bottom))(t)?"bottom":"top",v=(t,e)=>{const n=L(t,e),o={slug:(i=t,i.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:C(t),type:n};var i;if("pin"===n&&(o.pin={bracket:g(t),enclose:m(t),subtle:y(t),parent:w(t),text:x(t),useSVGLine:k(t),useCurlyBrackets:S(t)}),"measure"===n&&(o.measure={slim:$(t),height:b(t),width:E(t)}),"typography"===n&&(o.typography={useSyntaxHighlighting:A(t)}),"grid"===n){let e="both";t?.includes("columns")&&(e="columns"),t?.includes("rows")&&(e="rows"),o.grid={toggle:e}}return o},B=t=>!t.checkVisibility({opacityProperty:!0,checkVisibilityCSS:!0}),P=()=>new Promise(requestAnimationFrame),R=async(t,e,n)=>{await P();return getComputedStyle(t)[e]===n},T=async(t,e,n)=>{if(!t.parentElement)return null;return await R(t.parentElement,e,n)?t.parentElement:await T(t.parentElement,e,n)},H=(t,e,n)=>t-e.width/2+n.width/2,M=(t,e,n)=>t-e.height/2+n.height/2,N=async t=>{await P();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,i=await(async t=>await T(t,"position","sticky"))(t),s=await(async t=>await R(t,"position","sticky"))(t);if(s){const o=t.style.position;await P(),t.style.position="relative",await P(),e=t.getBoundingClientRect(),n=e.top,t.style.position=o}else if(i){const o=i.style.position;await P(),i.style.position="relative",await P(),e=t.getBoundingClientRect(),n=e.top,i.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},I=async(t,e)=>{await P();const n=t.getBoundingClientRect(),o=await N(e),i=await(async(t,e)=>{await P();const n=t.getBoundingClientRect(),o=e.getBoundingClientRect(),i=o.top+window.scrollY,s=o.left+window.scrollX;return{height:o.height,width:o.width,top:M(i,n,o),left:H(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})}},q=async(t,e)=>{var n;if(!(!t||!e||a(e)||p(e)||(n=e,"boolean"==typeof n)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object))if(await P(),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]},V=async t=>(await P(),getComputedStyle(t,null)),O=(t="",e,n="span")=>{const o=document.createElement(n);o.setAttribute("title",`${t}px`),o.setAttribute("data-measure",`${parseInt(String(t),10)}px`);const{measure:i,position:s}=e,r=u("ph-speccer speccer measure",{height:i?.height||!1,width:i?.width||!1,slim:i?.slim||!1,[s]:!0});return h(o,r),o},z=async t=>{if(!t)return;const e=t.getAttribute("data-speccer")||"";await P();const o=v(e,getComputedStyle(t));if("measure"!==o.type||!o.measure)return;if(B(t))return;await P();const{measure:i,position:s}=o,r=t.getBoundingClientRect(),a=i.slim?0:48,c=i.slim?0:96;if(i.width)if(s===n.Bottom){const e=O(r.width,o);document.body.appendChild(e);const n=await I(e,t);if(i.slim){const{left:t,top:o,width:i}=n.fromBottom({center:!1});await q(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 q(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`,height:`${s+a}px`})}}else{const e=O(r.width,o);document.body.appendChild(e);const n=await I(e,t);if(i.slim){const{left:t,top:o,width:i}=n.fromTop({center:!1});await q(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 q(e,{left:`${t}px`,top:o-a+"px",width:`${i}px`,height:`${s+a}px`})}}else if(i.height)if(s===n.Right){const e=O(r.height,o);document.body.appendChild(e);const n=await I(e,t);if(i.slim){const{left:t,top:o,height:i}=n.fromRight({center:!1});await q(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 q(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`,width:`${s+c}px`})}}else{const e=O(r.height,o);document.body.appendChild(e);const n=await I(e,t);if(i.slim){const{left:t,top:o,height:i}=n.fromLeft({center:!1});await q(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 q(e,{left:t-c+"px",top:`${o}px`,height:`${i}px`,width:`${s+c}px`})}}},G=(t="",e,n="",o="span")=>{const i=document.createElement(o),s={},{position:r,pin:a={}}=e,{useSVGLine:c,useCurlyBrackets:p,text:l,parent:d,bracket:f,enclose:g,subtle:m}=a;s.text=l,s.parent=d,s.bracket=f,s.enclose=g,s.subtle=m,s.svg=c,s.curly=p,s[r]=!0,!d||f||p||m||(s.svg=!0),!f&&!g||f&&p?i.innerHTML=t:(f||g)&&i.setAttribute("data-pin-counter",t);const y=u("ph-speccer speccer pin",s);return h(i,y),i.setAttribute("id",n),i},W=()=>"_"+Math.random().toString(36).substring(2,11),j=t=>t.top,D=t=>t.left+t.width,F=t=>t.top+t.height,_=t=>t.left,X=t=>t.left+t.width/2,Y=t=>t.top+t.height/2,K={center:t=>({x:X(t),y:Y(t)}),top:t=>({x:X(t),y:j(t)}),right:t=>({x:D(t),y:Y(t)}),bottom:t=>({x:X(t),y:F(t)}),left:t=>({x:_(t),y:Y(t)}),"right-top":t=>({x:D(t),y:j(t)}),"right-bottom":t=>({x:D(t),y:F(t)}),"left-top":t=>({x:_(t),y:j(t)}),"left-bottom":t=>({x:_(t),y:F(t)}),"top-left":t=>({x:_(t),y:j(t)}),"top-right":t=>({x:D(t),y:j(t)}),"bottom-left":t=>({x:_(t),y:F(t)}),"bottom-right":t=>({x:D(t),y:F(t)}),"top-center":t=>({x:X(t),y:j(t)}),"right-center":t=>({x:D(t),y:Y(t)}),"bottom-center":t=>({x:X(t),y:F(t)}),"left-center":t=>({x:_(t),y:Y(t)})},U=async(t,e="center")=>{if(!e)throw Error("No position given");if(c(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 P();const o=t.getBoundingClientRect();return K[e](o)};class Z{#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);q(this.#t,{height:`${s}px`}),this.draw()}async draw(){const t=`ph_draw-circle-${W()}`;this.circle=document.createElementNS("http://www.w3.org/2000/svg","circle");const e=this.el.getAttribute("id")||W();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 U(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=Z;const J=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:s}=await U(t,n),{x:r,y:a}=await U(e,o);return{x1:i,y1:s,x2:r,y2:a}},Q=(t,e)=>{const{x1:n,x2:o,y1:i,y2:s}=t,{direct:r=!1,firstSet:a=!1,direction:c}=e;let p={x:n+(o-n)/2,y:i},l={x:n+(o-n)/2,y:s};return r&&(a?"west"===c?(p={x:n-32,y:i-8},l={x:o+32,y:s}):"south"===c?(p={x:n-8,y:i+32},l={x:o,y:s-32}):"east"===c?(p={x:n+32,y:i-8},l={x:o-32,y:s}):(p={x:n-8,y:i-32},l={x:o,y:s+32}):"west"===c?(p={x:n-32,y:i+8},l={x:o+32,y:s}):"south"===c?(p={x:n+8,y:i+32},l={x:o,y:s-32}):"east"===c?(p={x:n+32,y:i+8},l={x:o-32,y:s}):(p={x:n+8,y:i-32},l={x:o,y:s+32})),{firstPoint:{x:n,y:i},firstControl:p,lastPoint:{x:o,y:s},lastControl:l}},tt=async(t,e,n)=>{const{pos1:o,pos2:i,firstSet:s=!1,direction:r}=n,{x1:a,y1:c,x2:p,y2:l}=await J(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}=Q({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}`},et=async({start:t,stop:e,crude:n=!1})=>{const{x1:o,y1:i,x2:s,y2:r}=await J(t,e),a=((t,e,n,o,i=!0)=>{if(d(t)||d(e)||d(n)||d(o))throw new SyntaxError("Missing input for `angle`");if(l(t)||l(e)||l(n)||l(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 nt{#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);q(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-${W()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||W();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 et({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 tt(this.startElement,this.stopElement,{pos1:i,pos2:s,firstSet:!0,direction:o}),p=await tt(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=nt;class ot{#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);q(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-${W()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||W();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 et({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 J(t,e,o,i),{firstPoint:p,firstControl:l,lastControl:d,lastPoint:h}=Q({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=ot;const it=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],st="data-speccer",rt="spacing",at=t=>parseInt(t,10),ct=t=>at(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,pt=async(t,n,o,i)=>{await P();const{pin:s={},position:r}=i,{useCurlyBrackets:a,subtle:c,bracket:p,text:l,parent:d,enclose:h}=s,u=ct(n),f=at(getComputedStyle(n).getPropertyValue("--ph-speccer-measure-size"))||8;const g=await I(n,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||l)&&!p&&!a&&!c){if(r===e.Right){const{top:t}=g.fromRight({center:!0});await P();const{left:e,width:n}=o.getBoundingClientRect();return{left:`${e+n+u}px`,top:`${t}px`}}if(r===e.Bottom){const{left:t}=g.toBottom({center:!0});await P();const{top:e,height:n}=o.getBoundingClientRect();return{left:`${t}px`,top:`${e+n+u}px`}}if(r===e.Left){const{top:t}=g.fromLeft({center:!0});await P();const{left:e}=o.getBoundingClientRect();return{left:e-1.5*u-(l?170:0)+"px",top:`${t}px`}}const{left:t}=g.fromTop({center:!0});await P();const{top:n}=o.getBoundingClientRect();return{left:`${t}px`,top:n-1.5*u+"px"}}if(r===e.Left){if(p&&!a){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:a?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(r===e.Right){if(p&&!a){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:a?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(r===e.Bottom){if(p&&!a){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:a?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(p&&!a){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:a?u/1.5:u});return{left:`${m}px`,top:`${y}px`}},lt=async(t,e,n,o)=>{if(!t)return;if("pin"!==o.type||!o.pin)return;const i=`speccer-${o.slug}-${t.getAttribute("id")||W()}`,s=G(n,o,i);t.setAttribute("data-speccer-element-id",i),document.body.appendChild(s);const r=await pt(t,s,e,o);await q(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 ot(t,s,o),c&&new Z(t,5,o)):o.pin.useCurlyBrackets&&new nt(t,s),i};let dt=0;const ht=async t=>{if(!t)return;const e=t.querySelectorAll('[data-speccer^="pin"]');if(!e||0===e.length)return;const n=t.getAttribute("data-speccer-literals")||window.SPECCER_LITERALS||it;[...e].filter((async t=>!B(t))).forEach((async(e,o)=>{const i=((t,e)=>{let n=e[t];return 0===t&&(dt=0),n||(n=`${e[dt]}${e[dt].toLowerCase()}`,dt++),n})(o,n),s=e.getAttribute("data-speccer")||"";await P();const r=getComputedStyle(e),a=v(s,r),c=((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})(i,e,a);await lt(e,t,c,a)}))},ut=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(`${t}px`);return n.appendChild(o),n.setAttribute("title",`${t}px`),h(n,"ph-speccer speccer spacing"),n},ft=async t=>{if(!t)return;const e=await V(t);if(B(t))return;const n=(t=>{const{marginTop:e,marginBottom:n,marginLeft:o,marginRight:i,paddingTop:s,paddingBottom:r,paddingLeft:a,paddingRight:c}=t;return{marginTop:e,marginBottom:n,marginLeft:o,marginRight:i,paddingTop:s,paddingBottom:r,paddingLeft:a,paddingRight:c}})(e),o=Object.keys(n).filter((t=>"0px"!==n[t]));o.length&&o.forEach((async e=>{const o=at(n[e]),i=ut(o),s=(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);h(i,s),document.body.appendChild(i),t.classList.add("is-specced"),await(async(t,e,n,o)=>{await P();const i=o.getBoundingClientRect(),s=await N(o);"marginTop"===t&&q(n,{height:`${e}px`,width:i.width+96+"px",left:s.left-96+"px",top:s.top-e+"px"}),"marginRight"===t&&q(n,{height:i.height+48+"px",width:`${e}px`,left:s.left+parseInt(i.width+"",10)+"px",top:s.top+"px"}),"marginBottom"===t&&q(n,{height:`${e}px`,width:i.width+96+"px",left:s.left-96+"px",top:s.top+parseInt(i.height+"",10)+"px"}),"marginLeft"===t&&q(n,{height:i.height+48+"px",width:`${e}px`,left:s.left-e+"px",top:s.top+"px"}),"paddingTop"===t&&q(n,{height:`${e}px`,width:i.width+96+"px",left:s.left-96+"px",top:s.top+"px"}),"paddingBottom"===t&&q(n,{height:`${e}px`,width:i.width+96+"px",left:s.left-96+"px",top:s.top+(parseInt(i.height+"",10)-e)+"px"}),"paddingRight"===t&&q(n,{height:i.height+48+"px",width:`${e}px`,left:s.left+(parseInt(i.width+"",10)-e)+"px",top:s.top+"px"}),"paddingLeft"===t&&q(n,{height:i.height+48+"px",width:`${e}px`,left:s.left+"px",top:s.top+"px"})})(e,o,i,t)}))},gt=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)},mt=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},yt=()=>{const t=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(ft(n.target),e.unobserve(n.target))}));for(const e of document.querySelectorAll('[data-speccer^="spacing"],[data-speccer^="spacing"] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)'))t.observe(e);const e=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(z(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll('[data-speccer^="measure"]'))e.observe(t);const n=new IntersectionObserver((async(t,e)=>{for(const n of t)n.intersectionRatio>0&&(await ht(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll('[data-speccer="pin-area"]'))n.observe(t)},wt=t=>{window.speccer=t},xt=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?wt(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?mt(t):e.hasAttribute("data-lazy")?yt():mt(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||gt(t))}},bt=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],$t=["escape","esc","enter","return","⏎","␛"],Et=async(t,e,n)=>{await P();const o=ct(n),i=await I(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"}},kt=async(t,e,n)=>{if(!t||!t.checkVisibility())return;const o=((t="tabstops",e,n="span")=>{const o=document.createElement(n),i=u("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 h(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 Et(n,t,o);await q(o,i)},St=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"),bt.includes(t.toLowerCase())&&e.classList.add("modifier"),$t.includes(t.toLowerCase())&&e.classList.add("physical"),e.appendChild(n),o.appendChild(e)}document.body.appendChild(o);const i=await Et("shortcut",t,o);await q(o,i)},At=async(t,e,n)=>{await P();const{grid:o}=n;if(!o)return;const{toggle:i}=o,{height:s,width:r}=t.getBoundingClientRect(),{top:a,left:c}=await N(t),{gridTemplateColumns:p,gridTemplateRows:l,padding:d}=e;if("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.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=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-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.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=l;const o=l.split(" ").length;for(let t=0;t<o;t++){const t=document.createElement("div");t.classList.add("ph-speccer"),t.classList.add("speccer"),t.classList.add("speccer-grid-row-item"),n.appendChild(t)}document.body.appendChild(n)}},Lt=async t=>{if(!t)return;const e=t.getAttribute(st)||"",n=await V(t),o=v(e,n);"grid"===o.type&&o.grid&&(B(t)||(await P(),await At(t,n,o)))},Ct=(t="span")=>{const e=document.createElement(t),n=u("ph-speccer speccer mark");return h(e,n),e},vt=async t=>{if(!t)return;const e=t.getAttribute(st)||"";await P();if("mark"!==v(e,getComputedStyle(t)).type)return;if(B(t))return;const n=Ct();document.body.appendChild(n);const o=await I(n,t),{left:i,top:s,height:r,width:a}=o.absolute(),c={left:`${i}px`,top:`${s}px`,height:`${r}px`,width:`${a}px`};await q(n,c)},Bt=(t,e=3)=>parseFloat(String(t)).toFixed(e),Pt=(t,e)=>{const n=document.createElement("div"),{typography:o,position:i}=e,s=u("ph-speccer speccer typography",{syntax:o?.useSyntaxHighlighting||!1,[i]:!0});return n.innerHTML=t,h(n,s),n},Rt=async t=>{if(!t)return;const e=t.getAttribute("data-speccer")||"";await P();const n=v(e,getComputedStyle(t));if("typography"!==n.type||!n.typography)return;if(B(t))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 V(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,n.typography.useSyntaxHighlighting),s=Pt(i,n);document.body.appendChild(s);const r=await(async(t,e,n)=>{const i=e.getBoundingClientRect(),s=ct(n),r=n.getBoundingClientRect(),a=await N(e),{typography:c,position:p}=t;if(c&&p===o.Right)return{left:a.left+i.width+s+"px",top:Bt(M(a.top,r,i))+"px"};if(c&&p===o.Top)return{left:Bt(H(a.left,r,i))+"px",top:a.top-r.height-s+"px"};if(c&&p===o.Bottom)return{left:Bt(H(a.left,r,i))+"px",top:a.top+i.height+s+"px"};return{left:a.left-r.width-s+"px",top:Bt(M(a.top,r,i))+"px"}})(n,t,s);q(s,r)},Tt={create:At,element:Lt},Ht={create:ut,element:ft},Mt={createPinElement:G,pinElement:lt,pinElements:ht},Nt={create:O,element:z},It={create:Ct,element:vt},qt={create:Pt,element:Rt},Vt={dom:mt,lazy:yt,manual:wt,activate:xt},Ot=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".ph-speccer.speccer");const t=document.querySelectorAll(`[${st}^="${rt}"],[${st}^="${rt}"] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)`),e=document.querySelectorAll(`[${st}^="measure"]`),n=document.querySelectorAll(`[${st}^="typography"]`),o=document.querySelectorAll(`[${st}="pin-area"]`),i=document.querySelectorAll(`[${st}^="mark"]`),s=document.querySelectorAll(`[${st}^="grid"]`);for(const t of i)vt(t);for(const t of s)Lt(t);for(const e of t)ft(e);for(const t of e)z(t);for(const t of n)Rt(t);for(const t of o)ht(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&&!B(t)&&St(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)B(e)||kt(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())B(n)||(kt(n,t+1,"landmark"),kt(n,null,"region"))}})()};xt(Ot);export{Ot as default,Tt as grid,It as mark,Nt as measure,Vt as modes,Mt as pin,Ht as spacing,qt as typography};
+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};
 //# sourceMappingURL=speccer.esm.js.map