@phun-ky/speccer 11.3.50 → 11.3.51

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 (4) hide show
  1. package/dist/speccer.esm.js +2 -2
  2. package/dist/speccer.js +2 -2
  3. package/dist/speccer.min.css +1 -1
  4. package/package.json +6 -6
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.3.50
5
+ * @version 11.3.51
6
6
  * @license
7
7
  * Copyright (c) 2018-2026 Alexander Vassbotn Røyne-Helgesen
8
8
  *
@@ -24,4 +24,4 @@
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",r="mark",s="grid",a="pin-area";var c,p,l,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"}(p||(p={})),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"}(l||(l={})),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=>"string"==typeof t,m=t=>!g(t),y=t=>"number"==typeof t,w=t=>!y(t),b=t=>void 0===t,x=t=>t.split(" "),$=t=>{if(null===t)return!1;return x(t).includes(p.Bracket)},E=t=>{if(null===t)return!1;return x(t).includes(p.Enclose)},A=t=>{if(null===t)return!1;return x(t).includes(p.Subtle)},S=t=>{if(null===t)return!1;return x(t).includes(p.Parent)},k=t=>{if(null===t)return!1;return x(t).includes(p.Text)},C=t=>{if(null===t)return!1;return x(t).includes(l.Height)},v=t=>{if(null===t)return!1;return x(t).includes(l.Slim)},P=t=>{if(null===t)return!1;return x(t).includes(l.Width)},L=t=>{if(null===t)return!1;const e=x(t);return(S(t)&&!E(t)&&!$(t)||k(t)||e.includes(p.SVG))&&!B(t)},B=t=>{if(null===t)return!1;const e=x(t);return e.includes(p.Curly)&&e.includes(p.Bracket)},R=t=>!!t&&t.split(" ").includes(d.Syntax),T=()=>new Promise(requestAnimationFrame),N=async(t,e)=>{await T();const n=getComputedStyle(e);return(t=>null!==t&&t.split(" ").includes(p.Pin))(t)?"pin":((t,e)=>null!==t&&t.split(" ").includes(f.Grid)&&g(e.display)&&("grid"===e.display||(e.display||"").includes("grid")))(t,n)?"grid":(t=>null!==t&&t.split(" ").includes(u.Mark))(t)?"mark":(t=>null!==t&&t.split(" ").includes(l.Measure))(t)?"measure":(t=>null!==t&&t.split(" ").includes(h.Spacing))(t)?"spacing":(t=>null!==t&&t.split(" ").includes(d.Typography))(t)?"typography":"pin"},q=t=>(t=>null!==t&&x(t).includes(p.Left))(t)?"left":(t=>null!==t&&x(t).includes(p.Right))(t)?"right":(t=>null!==t&&x(t).includes(p.Bottom))(t)?"bottom":"top",H=async(t,e,n)=>{const o=await N(t,e),i={slug:(r=t,r.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:q(t),type:o};var r;if("pin"===o&&(i.pin={bracket:$(t),enclose:E(t),subtle:A(t),parent:S(t),text:k(t),useSVGLine:L(t),useCurlyBrackets:B(t)}),"measure"===o&&(i.measure={slim:v(t),height:C(t),width:P(t)}),"typography"===o&&(i.typography={useSyntaxHighlighting:R(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}},I=()=>"_"+Math.random().toString(36).substring(2,11),M=t=>{const e=t;if("function"==typeof e.checkVisibility)return!e.checkVisibility({opacityProperty:!0,checkVisibilityCSS:!0});const n=t.ownerDocument?.defaultView,o=n?.getComputedStyle(t);return!!o&&("none"===o.display||("hidden"===o.visibility||"collapse"===o.visibility||"0"===o.opacity))},V=async(t,e,n)=>{await T();return getComputedStyle(t)[e]===n},O=async(t,e,n)=>{if(!t.parentElement)return null;return await V(t.parentElement,e,n)?t.parentElement:await O(t.parentElement,e,n)},z=(t,e,n)=>t-e.width/2+n.width/2,G=(t,e,n)=>t-e.height/2+n.height/2,j=async t=>{await T();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,i=await(async t=>await O(t,"position","sticky"))(t);if(await(async t=>await V(t,"position","sticky"))(t)){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}},W=async(t,e)=>{await T();const n=t.getBoundingClientRect(),o=await j(e),i=await(async(t,e)=>{await T();const n=t.getBoundingClientRect();await T();const o=e.getBoundingClientRect(),i=o.top+window.scrollY,r=o.left+window.scrollX;return{height:o.height,width:o.width,top:G(i,n,o),left:z(r,n,o)}})(t,e),r=o.height,s=o.width,a=n.height,c=n.width;return{absolute:()=>({top:o.top,left:o.left,height:r,width:s}),toTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:r,width:s}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top-e-n,left:t?i.left:o.left,height:r,width:s}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:n=r,modifier:c=0}={})=>({top:o.top+n-(e+c),left:t?i.left:o.left,height:r,width:s}),fromBottom:({center:t=!1,targetHeight:e=r,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:r,width:s}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:r,width:s}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left-e-n,height:r,width:s}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:n=s,modifier:a=0}={})=>({top:t?i.top:o.top,left:o.left+n-(e+a),height:r,width:s}),fromRight:({center:t=!1,targetWidth:e=s,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:r,width:s})}},D=async(t,e)=>{var n;!t||!e||g(e)||y(e)||(n=e,"boolean"==typeof n)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object||(await T(),Array.isArray(e)&&(e=e.reduce((t,e)=>(t[e.key]=e.value,t),{})),Object.assign(t.style,e))},F=async t=>(await T(),getComputedStyle(t,null)),_=async(t,n)=>{if(!t)return;if(M(t))return;const o=t.getAttribute(e)||"grid",i=await F(t),r=await H(o,t,n);if("grid"!==r.type||!r.grid)return;const{grid:s}=r,{toggle:a}=s,{top:c,left:p,height:l,width:d}=await j(t),{gridTemplateColumns:h,gridTemplateRows:u,padding:f}=i,g=`speccer-${r.slug}-${t.getAttribute("id")||I()}`;if(t.setAttribute("data-speccer-element-id",g),"columns"===a||"both"===a){const t=parseInt(i.columnGap||"0"),e=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&&e.classList.add("speccer-small-grid"),e.setAttribute("data-speccer-id",g),e.classList.add("ph-speccer","speccer","speccer-grid-container"),D(e,{height:`${l+64}px`,width:`${d}px`,left:`${p}px`,top:c-32+"px",padding:f,gridTemplateColumns:h});const n=h?.split(" ").length||0;for(let t=0;t<n;t++){const t=document.createElement("div");t.classList.add("ph-speccer","speccer","speccer-grid-item"),e.appendChild(t)}document.body.appendChild(e)}if("rows"===a||"both"===a){const t=parseInt(i.rowGap||"0"),e=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&&e.classList.add("speccer-small-grid"),e.setAttribute("data-speccer-id",g),e.classList.add("ph-speccer","speccer","speccer-grid-row-container"),D(e,{width:`${d+64}px`,height:`${l}px`,top:`${c}px`,left:p-32+"px",padding:f,gridTemplateRows:u});const n=u?.split(" ").length||0;for(let t=0;t<n;t++){const t=document.createElement("div");t.classList.add("ph-speccer","speccer","speccer-grid-row-item"),e.appendChild(t)}document.body.appendChild(e)}},X=async(t,e)=>{t&&(M(t)||await _(t,e))},Y=(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)},K=(t,e)=>t?!e&&m(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);return n.setAttribute("id",t),Y(n,"ph-speccer speccer mark"),n},Z=async t=>{if(!t)return;if(M(t))return;const n=t.getAttribute(e)||"";await T();const o=await H(n,t);if("mark"!==o.type)return;const i=`speccer-${o.slug}-${t.getAttribute("id")||I()}`;t.setAttribute("data-speccer-element-id",i);const r=U(i);r.setAttribute("data-speccer-id",i),document.body.appendChild(r);const s=await W(r,t),{left:a,top:c,height:p,width:l}=s.absolute(),d={left:`${a}px`,top:`${c}px`,height:`${p}px`,width:`${l}px`};await D(r,d)},J=(t="",e,n,o="span")=>{const i=document.createElement(o);i.setAttribute("title",`${t}px`),i.setAttribute("id",n),i.setAttribute("data-speccer-id",n),i.setAttribute("data-measure",`${parseInt(String(t),10)}px`);const{measure:r,position:s}=e,a=K("ph-speccer speccer measure",{height:r?.height||!1,width:r?.width||!1,slim:r?.slim||!1,[s]:!0});return Y(i,a),i},Q=async(t,n)=>{if(!t)return;if(M(t))return;const o=t.getAttribute(e)||"measure";await T();const i=await H(o,t,n);if("measure"!==i.type||!i.measure)return;const{measure:r,position:s}=i;await T();const a=t.getBoundingClientRect(),c=r.slim?0:48,p=r.slim?0:96,d=`speccer-${i.slug}-${t.getAttribute("id")||I()}`;if(t.setAttribute("data-speccer-element-id",d),r.width)if(s===l.Bottom){const e=J(a.width,i,d);document.body.appendChild(e);const n=await W(e,t);if(r.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:r}=n.absolute({center:!1});await D(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`,height:`${r+c}px`})}}else{const e=J(a.width,i,d);document.body.appendChild(e);const n=await W(e,t);if(r.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:r}=n.absolute({center:!1});await D(e,{left:`${t}px`,top:o-c+"px",width:`${i}px`,height:`${r+c}px`})}}else if(r.height)if(s===l.Right){const e=J(a.height,i,d);document.body.appendChild(e);const n=await W(e,t);if(r.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:r}=n.absolute({center:!1});await D(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`,width:`${r+p}px`})}}else{const e=J(a.height,i,d);document.body.appendChild(e);const n=await W(e,t);if(r.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:r}=n.absolute({center:!1});await D(e,{left:t-p+"px",top:`${o}px`,height:`${i}px`,width:`${r+p}px`})}}},tt=(t="",e,n="",o="span")=>{const i=document.createElement(o),r={},{position:s,pin:a={}}=e,{useSVGLine:c,useCurlyBrackets:p,text:l,parent:d,bracket:h,enclose:u,subtle:f}=a;r.text=l,r.parent=d,r.bracket=h,r.enclose=u,r.subtle=f,r.svg=c,r.curly=p,r[s]=!0,!d||h||p||f||(r.svg=!0),!h&&!u||h&&p?i.innerHTML=t:(h||u)&&i.setAttribute("data-pin-counter",t);const g=K("ph-speccer speccer pin",r);return Y(i,g),i.setAttribute("id",n),i.setAttribute("data-speccer-id",n),i},et=()=>{const{body:t,documentElement:e}=document;return Math.max(t.scrollHeight,t.offsetHeight,e.clientHeight,e.scrollHeight,e.offsetHeight)},nt=t=>t.top,ot=t=>t.left+t.width,it=t=>t.top+t.height,rt=t=>t.left,st=t=>t.left+t.width/2,at=t=>t.top+t.height/2,ct={center:t=>({x:st(t),y:at(t)}),top:t=>({x:st(t),y:nt(t)}),right:t=>({x:ot(t),y:at(t)}),bottom:t=>({x:st(t),y:it(t)}),left:t=>({x:rt(t),y:at(t)}),"right-top":t=>({x:ot(t),y:nt(t)}),"right-bottom":t=>({x:ot(t),y:it(t)}),"left-top":t=>({x:rt(t),y:nt(t)}),"left-bottom":t=>({x:rt(t),y:it(t)}),"top-left":t=>({x:rt(t),y:nt(t)}),"top-right":t=>({x:ot(t),y:nt(t)}),"bottom-left":t=>({x:rt(t),y:it(t)}),"bottom-right":t=>({x:ot(t),y:it(t)}),"top-center":t=>({x:st(t),y:nt(t)}),"right-center":t=>({x:ot(t),y:at(t)}),"bottom-center":t=>({x:st(t),y:it(t)}),"left-center":t=>({x:rt(t),y:at(t)})},pt=async(t,e="center")=>{if(!e)throw Error("No position given");if(m(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 ct[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 Error("Missing inputs el or radius or options");if(!document.body.contains(t))throw 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 Error("Missing required SVG element to draw circles. Please see the documentation");const o=et();D(this.#t,{height:`${o}px`}),this.draw()}async draw(){const t=`ph_draw-circle-${I()}`;this.circle=document.createElementNS("http://www.w3.org/2000/svg","circle");const e=this.el.getAttribute("id")||I();if(this.el.setAttribute("id",e),this.circle.setAttribute("id",t),this.circle.setAttribute("data-el",e),this.circle.classList.add("ph-speccer"),this.circle.classList.add("speccer"),this.circle.classList.add("circle"),!this.#t)throw Error("No parentNode found for circle");this.#t.appendChild(this.circle);const{x:n,y:o}=await pt(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 dt=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:r}=await pt(t,n),{x:s,y:a}=await pt(e,o);return{x1:i,y1:r,x2:s,y2:a}},ht=(t,e)=>{const{x1:n,x2:o,y1:i,y2:r}=t,{direct:s=!1,firstSet:a=!1,direction:c}=e,p={x:n,y:i},l={x:o,y:r};return s?a?"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i-8},lastPoint:l,lastControl:{x:o+32,y:r}}:"south"===c?{firstPoint:p,firstControl:{x:n-8,y:i+32},lastPoint:l,lastControl:{x:o,y:r-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i-8},lastPoint:l,lastControl:{x:o-32,y:r}}:{firstPoint:p,firstControl:{x:n-8,y:i-32},lastPoint:l,lastControl:{x:o,y:r+32}}:"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i+8},lastPoint:l,lastControl:{x:o+32,y:r}}:"south"===c?{firstPoint:p,firstControl:{x:n+8,y:i+32},lastPoint:l,lastControl:{x:o,y:r-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i+8},lastPoint:l,lastControl:{x:o-32,y:r}}:{firstPoint:p,firstControl:{x:n+8,y:i-32},lastPoint:l,lastControl:{x:o,y:r+32}}:{firstPoint:p,firstControl:{x:n+(o-n)/2,y:i},lastPoint:l,lastControl:{x:n+(o-n)/2,y:r}}},ut=async(t,e,n)=>{const{pos1:o,pos2:i,firstSet:r=!1,direction:s}=n,{x1:a,y1:c,x2:p,y2:l}=await dt(t,e,o,i);let d=0,h=0;"north"===s?h=8:"west"===s?d=8:"east"===s?d=-8:"south"===s&&(h=-8);const{firstPoint:u,firstControl:f,lastControl:g,lastPoint:m}=ht({x1:a+0,x2:p+d,y1:c+0+document.documentElement.scrollTop,y2:l+h+document.documentElement.scrollTop},{direct:!0,firstSet:r,direction:s});return`M ${u.x} ${u.y}C ${f.x} ${f.y}, ${g.x} ${g.y}, ${m.x} ${m.y}`},ft=async({start:t,stop:e,crude:n=!1})=>{const{x1:o,y1:i,x2:r,y2:s}=await dt(t,e),a=((t,e,n,o,i=!0)=>{if(b(t)||b(e)||b(n)||b(o))throw new SyntaxError("Missing input for `angle`");if(w(t)||w(e)||w(n)||w(o))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof n} ${typeof o}`);const r=o-e,s=n-t;let a=Math.atan2(r,s);return a*=180/Math.PI,i&&a<0&&(a+=360),a})(o,i,r,s);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 gt{#t;#n;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#e(t,e)}#e(t,e){if(!t||!e)throw Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw Error("stopElement is not in the DOM");if(!document.body.contains(t))throw 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 Error("Missing required SVG element to draw lines. Please see the documentation");const n=et();D(this.#t,{height:`${n}px`}),this.connect()}connect(){this.draw(this.#n)}#o(t){if(!t)throw Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${I()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||I();return this.startElement.setAttribute("id",o),n.setAttribute("data-start-el",o),n.setAttribute("id",e),n.classList.remove("original"),n.classList.add("speccer"),n}async draw(t){if(!t)throw Error("No path given to draw!");const e=this.#o(t),n=this.#o(t);if(!t.parentNode)throw 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 ft({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:i,path1pos2:r,path2pos1:s,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 ut(this.startElement,this.stopElement,{pos1:i,pos2:r,firstSet:!0,direction:o}),p=await ut(this.startElement,this.stopElement,{pos1:s,pos2:a,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",i),this.firstPathElement.setAttribute("data-pos2",r),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",s),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",p)}}window.DrawSVGCurlyBracket=gt;class mt{#t;#n;startElement;stopElement;options;line;constructor(t,e,n={}){this.#e(t,e,n)}#e(t,e,n={}){if(!t||!e)throw Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw Error("stopElement is not in the DOM");if(!document.body.contains(t))throw 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 Error("Missing required SVG element to draw lines. Please see the documentation");const o=et();D(this.#t,{height:`${o}px`}),this.connect()}connect(){this.draw(this.#n)}async draw(t){if(!t)throw Error("No path given to draw!");const e=`ph_draw_path-path-${I()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||I();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 Error("No parentNode found for path");this.line=t.parentNode.insertBefore(n,t.nextSibling);const r=await ft({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:s,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}})(r),c=await(async(t,e,n)=>{const{pos1:o,pos2:i}=n,{x1:r,y1:s,x2:a,y2:c}=await dt(t,e,o,i),{firstPoint:p,firstControl:l,lastControl:d,lastPoint:h}=ht({x1:r,x2:a,y1:s+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:s,pos2:a});this.line.setAttribute("data-direction",r),this.line.setAttribute("data-pos1",s),this.line.setAttribute("data-pos2",a),this.line.setAttribute("d",c)}}window.DrawSVGLine=mt;const yt=t=>parseInt(t,10),wt=t=>yt(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,bt=async(t,e,n,o)=>{await T();const{pin:i={},position:r}=o,{useCurlyBrackets:s,subtle:a,bracket:c,text:l,parent:d,enclose:h}=i,u=wt(e),f=yt(getComputedStyle(e).getPropertyValue("--ph-speccer-measure-size"))||8;const g=await W(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||l)&&!c&&!s&&!a){if(r===p.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(r===p.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(r===p.Left){const{top:t}=g.fromLeft({center:!0});await T();const{left:e}=n.getBoundingClientRect();return{left:e-1.5*u-(l?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(r===p.Left){if(c&&!s){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:s?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(r===p.Right){if(c&&!s){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:s?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(r===p.Bottom){if(c&&!s){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:s?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(c&&!s){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:s?u/1.5:u});return{left:`${m}px`,top:`${y}px`}},xt=async(t,n,o,i)=>{if(!t)return;if(M(t))return;const r=t.getAttribute(e)||"pin";await T();const s=await H(r,t,i);if("pin"!==s.type||!s.pin)return;const a=`speccer-${i.slug}-${t.getAttribute("id")||I()}`,c=tt(o,i,a);t.setAttribute("data-speccer-element-id",a),document.body.appendChild(c);const p=await bt(t,c,n,s);await D(c,p);const l=s.pin.text&&null!==t.getAttribute("data-speccer-title"),d=s.pin.parent&&!s.pin.enclose&&!s.pin.bracket&&!l;return s.pin.useSVGLine?(new mt(t,c,s),d&&new lt(t,5,s)):s.pin.useCurlyBrackets&&new gt(t,c),a};let $t=0;const Et=async(n,o)=>{if(!n)return;const i=n.querySelectorAll('[data-speccer^="pin"]');if(!i||0===i.length)return;const r=n.getAttribute("data-speccer-literals")||window.SPECCER_LITERALS||t;[...i].filter(async t=>!M(t)).forEach(async(t,i)=>{const s=((t,e)=>{let n=e[t];return 0===t&&($t=0),n||(n=`${e[$t]}${e[$t].toLowerCase()}`,$t++),n})(i,r),a=t.getAttribute(e)||"";await T();const c=await H(a,t,o),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 r=e.getAttribute("data-speccer-title"),s=e.getAttribute("data-speccer-description"),a=0===e.nodeName.indexOf("H")?`<span class="ph-speccer heading">${e.nodeName}</span>`:"";return!s&&r?`${a}<span class="ph-speccer title">${r}</span>`:s&&r?`${a}<span class="ph-speccer title">${r}</span><span class="ph-speccer description">${s.replaceAll("\\n","<br/>")}</span>`:t})(s,t,c);await xt(t,n,p,c)})},At=(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},St=async(t,n)=>{if(!t)return;if(M(t))return;const o=t.getAttribute(e)||"",i=await F(t),r=await H(o,t,n);if("spacing"!==r.type||!r.spacing)return;const s=((t,e)=>{const{marginTop:n,marginBottom:o,marginLeft:i,marginRight:r,paddingTop:s,paddingBottom:a,paddingLeft:c,paddingRight:p}=t;return e?.spacing?.padding?{paddingTop:s,paddingBottom:a,paddingLeft:c,paddingRight:p}:e?.spacing?.margin?{marginTop:n,marginBottom:o,marginLeft:i,marginRight:r}:{marginTop:n,marginBottom:o,marginLeft:i,marginRight:r,paddingTop:s,paddingBottom:a,paddingLeft:c,paddingRight:p}})(i,r),a=Object.keys(s).filter(t=>"0px"!==s[t]);if(!a.length)return;t.classList.add("is-specced");const c=`speccer-spacing-${t.getAttribute("id")||I()}`;t.setAttribute("data-speccer-element-id",c),a.forEach(async e=>{const n=yt(s[e]),o=At(n);o.setAttribute("data-speccer-id",c);const i=(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(i,{bound:!!r?.spacing?.bound})),document.body.appendChild(o);const a=await(async(t,e,n,o)=>{await T();const i=n.getBoundingClientRect(),r=await j(n),s=o?.spacing?.bound?0:96,a=o?.spacing?.bound?0:48;return"marginTop"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top-e+"px"}:"marginRight"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left+parseInt(i.width+"",10)+"px",top:r.top+"px"}:"marginBottom"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top+parseInt(i.height+"",10)+"px"}:"marginLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left-e+"px",top:r.top+"px"}:"paddingTop"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top+"px"}:"paddingBottom"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top+(parseInt(i.height+"",10)-e)+"px"}:"paddingRight"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left+(parseInt(i.width+"",10)-e)+"px",top:r.top+"px"}:"paddingLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left+"px",top:r.top+"px"}:void 0})(e,n,t,r);await D(o,a)})},kt=(t,e=3)=>parseFloat(String(t)).toFixed(e),Ct=(t,e,n)=>{const o=document.createElement("div"),{typography:i,position:r}=e,s=K("ph-speccer speccer typography",{syntax:i?.useSyntaxHighlighting||!1,[r]:!0});return o.setAttribute("id",n),o.setAttribute("data-speccer-id",n),o.innerHTML=t,Y(o,s),o},vt=async(t,n)=>{if(!t)return;if(M(t))return;const o=t.getAttribute(e)||"",i=await H(o,t,n);if("typography"!==i.type||!i.typography)return;t.classList.add("is-specced");const r=await(async(t,e=!1)=>{const n=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:r,fontVariationSettings:s,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:r,fontVariationSettings:s,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||"NaN",10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.fontSize||"NaN",10)/16}</span><span class="token unit">rem</span>`,o=n.letterSpacing?n.letterSpacing.includes("px")?`<span class="token number">${parseInt(n.letterSpacing,10)}</span><span class="token unit">px</span>`:n.letterSpacing:"",i=n.lineHeight?"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||"NaN",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||"NaN",10)}px / ${parseInt(n.lineHeight||"NaN",10)/16}rem`:"normal"};</li> <li><span class="property">letter-spacing:</span> ${n.letterSpacing};</li> <li><span class="property">font-style:</span> ${n.fontStyle};</li></ul>}`})(t,i.typography.useSyntaxHighlighting),s=`speccer-${i.slug}-${t.getAttribute("id")||I()}`;t.setAttribute("data-speccer-element-id",s);const a=Ct(r,i,s);document.body.appendChild(a);const c=await(async(t,e,n)=>{const o=e.getBoundingClientRect(),i=wt(n),r=n.getBoundingClientRect(),s=await j(e),{typography:a,position:c}=t;if(a&&c===d.Right)return{left:s.left+o.width+i+"px",top:kt(G(s.top,r,o))+"px"};if(a&&c===d.Top)return{left:kt(z(s.left,r,o))+"px",top:s.top-r.height-i+"px"};if(a&&c===d.Bottom)return{left:kt(z(s.left,r,o))+"px",top:s.top+o.height+i+"px"};return{left:s.left-r.width-i+"px",top:kt(G(s.top,r,o))+"px"}})(i,t,a);D(a,c)},Pt=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(i,...r){const s=n&&!o;o&&clearTimeout(o),o=setTimeout(function(){o=null,n||t.apply(i,r)},e),s&&t.apply(i,r)}})(()=>{t()},300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},Lt=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{t()}):t()},Bt=()=>{const t=new IntersectionObserver((t,e)=>{for(const n of t)n.intersectionRatio>0&&(St(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 p=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}^="${r}"]`))p.observe(t);const l=new IntersectionObserver((t,e)=>{for(const n of t)n.intersectionRatio>0&&(vt(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${e}^="${i}"]`))l.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}^="${s}"]`))d.observe(t);const h=new IntersectionObserver(async(t,e)=>{for(const n of t)n.intersectionRatio>0&&(await Et(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${e}="${a}"]`))h.observe(t)},Rt=t=>{window.speccer=t},Tt=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?Rt(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?Lt(t):e.hasAttribute("data-lazy")?Bt():Lt(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||Pt(t))}},Nt=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],qt=["escape","esc","enter","return","⏎","␛"],Ht=async(t,e,n)=>{await T();const o=wt(n),i=await W(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||"autocomplete"===t||"headings"===t){let{left:t,top:e}=i.fromLeft();return t-=o,t<=0&&(t=o),e<=0&&(e=o),{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:r,top:s}=i.fromTop({center:!0,modifier:o});return{left:r-32+"px",top:s-32+"px"}},It=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,autocomplete:"autocomplete"===t,headings:"headings"===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){const e=(t=>{if(!t)return"";if(t.role&&""!==t.role)return t.role;const e=t.nodeName.toLowerCase();return["header","footer","section","form","main","nav","aside"].includes(e)?e:"N/A"})(t),n=t.nodeName.toLowerCase();o.innerHTML=`&lt;${n} role="${e}"&gt;`}if("autocomplete"===n){const e=t.getAttribute("autocomplete")||"";o.innerHTML=`autocomplete="${e}"`}"headings"===n&&(o.innerHTML=t.nodeName,o.classList.add(t.nodeName.toLowerCase())),"tabstops"===n&&o.setAttribute("data-speccer-a11y-tabstops",e);const i=`speccer-a11y-${t.getAttribute("id")||I()}`;o.setAttribute("data-speccer-id",i),document.body.appendChild(o);const r=await Ht(n,t,o);await D(o,r)},Mt=async(t,e)=>{const n=e.split(/\s\+\s/).map(t=>t.trim()),o=document.createElement("div"),i=K("ph-speccer speccer a11y shortcut-holder");Y(o,i);for(const t of n){const e=document.createElement("kbd"),n=document.createTextNode(t),i=K("ph-speccer speccer a11y shortcut",{modifier:Nt.includes(t.toLowerCase()),physical:qt.includes(t.toLowerCase())});Y(e,i),e.appendChild(n);const r=`speccer-a11y-shortcut-${I()}`;o.setAttribute("data-speccer-id",r),o.appendChild(e)}document.body.appendChild(o);const r=await Ht("shortcut",t,o);await D(o,r)},Vt=()=>{const t=document.querySelectorAll('[data-speccer*="a11y tabstops"]'),e=document.querySelectorAll('[data-speccer*="a11y landmark"]'),n=document.querySelectorAll('[data-speccer*="a11y shortcut"]'),o=document.querySelectorAll('[data-speccer*="a11y autocomplete"]'),i=document.querySelectorAll('[data-speccer*="a11y headings"]');if(n.length)for(const t of n){const e=t.getAttribute("data-speccer-a11y-shortcut");e&&""!==e&&!M(t)&&Mt(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,n]of t.entries()){if(!M(n)){It(n,e+1,"tabstops");continue}const t=n.getAttribute("id");if(!t)continue;const o=document.querySelector(`[for="${t}"]`);o&&!M(o)&&It(o,e+1,"tabstops")}}if(o.length)for(const t of o){const e=t.querySelectorAll("[autocomplete]");for(const t of e)M(t)||It(t,null,"autocomplete")}if(i.length)for(const t of i){const e=t.querySelectorAll('h1,h2,h3,h4,h5,h6, [role="heading"]');for(const t of e)M(t)||It(t,null,"headings")}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())M(n)||(It(n,t+1,"landmark"),It(n,null,"region"))}},Ot=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());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())}},zt={create:_,element:X},Gt={create:At,element:St},jt={createPinElement:tt,pinElement:xt,pinElements:Et},Wt={create:J,element:Q},Dt={create:U,element:Z},Ft={create:Ct,element:vt},_t={dom:Lt,lazy:Bt,manual:Rt,activate:Tt},Xt=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),function(t){t.remove()})})(".ph-speccer.speccer");const t=document.querySelectorAll(`[${e}^="${n}"]`),c=document.querySelectorAll(`[${e}^="${o}"]`),p=document.querySelectorAll(`[${e}^="${i}"]`),l=document.querySelectorAll(`[${e}="${a}"]`),d=document.querySelectorAll(`[${e}^="${r}"]`),h=document.querySelectorAll(`[${e}^="${s}"]`);for(const t of d)Z(t);for(const t of h)X(t);for(const n of t)if(St(n),n.hasChildNodes()){const t=n.querySelectorAll("*:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody):not([data-speccer])"),o=n.getAttribute(e)||"";if(t?.length)for(const e of t)e.setAttribute("data-speccer",o),St(e)}for(const t of c)Q(t);for(const t of p)vt(t);for(const t of l)Et(t);Vt()};Tt(Xt);export{Vt as a11y,Xt as default,zt as grid,Dt as mark,Wt as measure,_t as modes,jt as pin,Ot as removeSpeccerElement,Gt as spacing,Ft as typography};
27
+ const t=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],e="data-speccer",n="spacing",o="measure",i="typography",r="mark",s="grid",a="pin-area";var c,p,l,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"}(p||(p={})),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"}(l||(l={})),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=>"string"==typeof t,m=t=>!g(t),y=t=>"number"==typeof t,w=t=>!y(t),b=t=>void 0===t,x=t=>t.split(" "),$=t=>{if(null===t)return!1;return x(t).includes(p.Bracket)},E=t=>{if(null===t)return!1;return x(t).includes(p.Enclose)},A=t=>{if(null===t)return!1;return x(t).includes(p.Subtle)},S=t=>{if(null===t)return!1;return x(t).includes(p.Parent)},k=t=>{if(null===t)return!1;return x(t).includes(p.Text)},C=t=>{if(null===t)return!1;return x(t).includes(l.Height)},v=t=>{if(null===t)return!1;return x(t).includes(l.Slim)},P=t=>{if(null===t)return!1;return x(t).includes(l.Width)},L=t=>{if(null===t)return!1;const e=x(t);return(S(t)&&!E(t)&&!$(t)||k(t)||e.includes(p.SVG))&&!B(t)},B=t=>{if(null===t)return!1;const e=x(t);return e.includes(p.Curly)&&e.includes(p.Bracket)},R=t=>!!t&&t.split(" ").includes(d.Syntax),T=()=>new Promise(requestAnimationFrame),N=async(t,e)=>{await T();const n=getComputedStyle(e);return(t=>null!==t&&t.split(" ").includes(p.Pin))(t)?"pin":((t,e)=>null!==t&&t.split(" ").includes(f.Grid)&&g(e.display)&&("grid"===e.display||(e.display||"").includes("grid")))(t,n)?"grid":(t=>null!==t&&t.split(" ").includes(u.Mark))(t)?"mark":(t=>null!==t&&t.split(" ").includes(l.Measure))(t)?"measure":(t=>null!==t&&t.split(" ").includes(h.Spacing))(t)?"spacing":(t=>null!==t&&t.split(" ").includes(d.Typography))(t)?"typography":"pin"},q=t=>(t=>null!==t&&x(t).includes(p.Left))(t)?"left":(t=>null!==t&&x(t).includes(p.Right))(t)?"right":(t=>null!==t&&x(t).includes(p.Bottom))(t)?"bottom":"top",H=async(t,e,n)=>{const o=await N(t,e),i={slug:(r=t,r.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:q(t),type:o};var r;if("pin"===o&&(i.pin={bracket:$(t),enclose:E(t),subtle:A(t),parent:S(t),text:k(t),useSVGLine:L(t),useCurlyBrackets:B(t)}),"measure"===o&&(i.measure={slim:v(t),height:C(t),width:P(t)}),"typography"===o&&(i.typography={useSyntaxHighlighting:R(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}},I=()=>"_"+Math.random().toString(36).substring(2,11),M=t=>{const e=t;if("function"==typeof e.checkVisibility)return!e.checkVisibility({opacityProperty:!0,checkVisibilityCSS:!0});const n=t.ownerDocument?.defaultView,o=n?.getComputedStyle(t);return!!o&&("none"===o.display||("hidden"===o.visibility||"collapse"===o.visibility||"0"===o.opacity))},V=async(t,e,n)=>{await T();return getComputedStyle(t)[e]===n},O=async(t,e,n)=>{if(!t.parentElement)return null;return await V(t.parentElement,e,n)?t.parentElement:await O(t.parentElement,e,n)},z=(t,e,n)=>t-e.width/2+n.width/2,G=(t,e,n)=>t-e.height/2+n.height/2,j=async t=>{await T();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,i=await(async t=>await O(t,"position","sticky"))(t);if(await(async t=>await V(t,"position","sticky"))(t)){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}},W=async(t,e)=>{await T();const n=t.getBoundingClientRect(),o=await j(e),i=await(async(t,e)=>{await T();const n=t.getBoundingClientRect();await T();const o=e.getBoundingClientRect(),i=o.top+window.scrollY,r=o.left+window.scrollX;return{height:o.height,width:o.width,top:G(i,n,o),left:z(r,n,o)}})(t,e),r=o.height,s=o.width,a=n.height,c=n.width;return{absolute:()=>({top:o.top,left:o.left,height:r,width:s}),toTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:r,width:s}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top-e-n,left:t?i.left:o.left,height:r,width:s}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:n=r,modifier:c=0}={})=>({top:o.top+n-(e+c),left:t?i.left:o.left,height:r,width:s}),fromBottom:({center:t=!1,targetHeight:e=r,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:r,width:s}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:r,width:s}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left-e-n,height:r,width:s}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:n=s,modifier:a=0}={})=>({top:t?i.top:o.top,left:o.left+n-(e+a),height:r,width:s}),fromRight:({center:t=!1,targetWidth:e=s,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:r,width:s})}},D=async(t,e)=>{var n;!t||!e||g(e)||y(e)||(n=e,"boolean"==typeof n)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object||(await T(),Array.isArray(e)&&(e=e.reduce((t,e)=>(t[e.key]=e.value,t),{})),Object.assign(t.style,e))},F=async t=>(await T(),getComputedStyle(t,null)),_=async(t,n)=>{if(!t)return;if(M(t))return;const o=t.getAttribute(e)||"grid",i=await F(t),r=await H(o,t,n);if("grid"!==r.type||!r.grid)return;const{grid:s}=r,{toggle:a}=s,{top:c,left:p,height:l,width:d}=await j(t),{gridTemplateColumns:h,gridTemplateRows:u,padding:f}=i,g=`speccer-${r.slug}-${t.getAttribute("id")||I()}`;if(t.setAttribute("data-speccer-element-id",g),"columns"===a||"both"===a){const t=parseInt(i.columnGap||"0"),e=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&&e.classList.add("speccer-small-grid"),e.setAttribute("data-speccer-id",g),e.classList.add("ph-speccer","speccer","speccer-grid-container"),D(e,{height:`${l+64}px`,width:`${d}px`,left:`${p}px`,top:c-32+"px",padding:f,gridTemplateColumns:h});const n=h?.split(" ").length||0;for(let t=0;t<n;t++){const t=document.createElement("div");t.classList.add("ph-speccer","speccer","speccer-grid-item"),e.appendChild(t)}document.body.appendChild(e)}if("rows"===a||"both"===a){const t=parseInt(i.rowGap||"0"),e=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&&e.classList.add("speccer-small-grid"),e.setAttribute("data-speccer-id",g),e.classList.add("ph-speccer","speccer","speccer-grid-row-container"),D(e,{width:`${d+64}px`,height:`${l}px`,top:`${c}px`,left:p-32+"px",padding:f,gridTemplateRows:u});const n=u?.split(" ").length||0;for(let t=0;t<n;t++){const t=document.createElement("div");t.classList.add("ph-speccer","speccer","speccer-grid-row-item"),e.appendChild(t)}document.body.appendChild(e)}},X=async(t,e)=>{t&&(M(t)||await _(t,e))},Y=(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)},K=(t,e)=>t?!e&&m(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);return n.setAttribute("id",t),Y(n,"ph-speccer speccer mark"),n},Z=async t=>{if(!t)return;if(M(t))return;const n=t.getAttribute(e)||"";await T();const o=await H(n,t);if("mark"!==o.type)return;const i=`speccer-${o.slug}-${t.getAttribute("id")||I()}`;t.setAttribute("data-speccer-element-id",i);const r=U(i);r.setAttribute("data-speccer-id",i),document.body.appendChild(r);const s=await W(r,t),{left:a,top:c,height:p,width:l}=s.absolute(),d={left:`${a}px`,top:`${c}px`,height:`${p}px`,width:`${l}px`};await D(r,d)},J=(t="",e,n,o="span")=>{const i=document.createElement(o);i.setAttribute("title",`${t}px`),i.setAttribute("id",n),i.setAttribute("data-speccer-id",n),i.setAttribute("data-measure",`${parseInt(String(t),10)}px`);const{measure:r,position:s}=e,a=K("ph-speccer speccer measure",{height:r?.height||!1,width:r?.width||!1,slim:r?.slim||!1,[s]:!0});return Y(i,a),i},Q=async(t,n)=>{if(!t)return;if(M(t))return;const o=t.getAttribute(e)||"measure";await T();const i=await H(o,t,n);if("measure"!==i.type||!i.measure)return;const{measure:r,position:s}=i;await T();const a=t.getBoundingClientRect(),c=r.slim?0:48,p=r.slim?0:96,d=`speccer-${i.slug}-${t.getAttribute("id")||I()}`;if(t.setAttribute("data-speccer-element-id",d),r.width)if(s===l.Bottom){const e=J(a.width,i,d);document.body.appendChild(e);const n=await W(e,t);if(r.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:r}=n.absolute({center:!1});await D(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`,height:`${r+c}px`})}}else{const e=J(a.width,i,d);document.body.appendChild(e);const n=await W(e,t);if(r.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:r}=n.absolute({center:!1});await D(e,{left:`${t}px`,top:o-c+"px",width:`${i}px`,height:`${r+c}px`})}}else if(r.height)if(s===l.Right){const e=J(a.height,i,d);document.body.appendChild(e);const n=await W(e,t);if(r.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:r}=n.absolute({center:!1});await D(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`,width:`${r+p}px`})}}else{const e=J(a.height,i,d);document.body.appendChild(e);const n=await W(e,t);if(r.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:r}=n.absolute({center:!1});await D(e,{left:t-p+"px",top:`${o}px`,height:`${i}px`,width:`${r+p}px`})}}},tt=(t="",e,n="",o="span")=>{const i=document.createElement(o),r={},{position:s,pin:a={}}=e,{useSVGLine:c,useCurlyBrackets:p,text:l,parent:d,bracket:h,enclose:u,subtle:f}=a;r.text=l,r.parent=d,r.bracket=h,r.enclose=u,r.subtle=f,r.svg=c,r.curly=p,r[s]=!0,!d||h||p||f||(r.svg=!0),!h&&!u||h&&p?i.innerHTML=t:(h||u)&&i.setAttribute("data-pin-counter",t);const g=K("ph-speccer speccer pin",r);return Y(i,g),i.setAttribute("id",n),i.setAttribute("data-speccer-id",n),i},et=()=>{const{body:t,documentElement:e}=document;return Math.max(t.scrollHeight,t.offsetHeight,e.clientHeight,e.scrollHeight,e.offsetHeight)},nt=t=>t.top,ot=t=>t.left+t.width,it=t=>t.top+t.height,rt=t=>t.left,st=t=>t.left+t.width/2,at=t=>t.top+t.height/2,ct={center:t=>({x:st(t),y:at(t)}),top:t=>({x:st(t),y:nt(t)}),right:t=>({x:ot(t),y:at(t)}),bottom:t=>({x:st(t),y:it(t)}),left:t=>({x:rt(t),y:at(t)}),"right-top":t=>({x:ot(t),y:nt(t)}),"right-bottom":t=>({x:ot(t),y:it(t)}),"left-top":t=>({x:rt(t),y:nt(t)}),"left-bottom":t=>({x:rt(t),y:it(t)}),"top-left":t=>({x:rt(t),y:nt(t)}),"top-right":t=>({x:ot(t),y:nt(t)}),"bottom-left":t=>({x:rt(t),y:it(t)}),"bottom-right":t=>({x:ot(t),y:it(t)}),"top-center":t=>({x:st(t),y:nt(t)}),"right-center":t=>({x:ot(t),y:at(t)}),"bottom-center":t=>({x:st(t),y:it(t)}),"left-center":t=>({x:rt(t),y:at(t)})},pt=async(t,e="center")=>{if(!e)throw Error("No position given");if(m(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 ct[e](o)};class lt{#t=null;el;circle;radius;options;constructor(t,e,n){this.#e(t,e,n)}#e(t,e,n){if(!t||!e||!n)throw Error("Missing inputs el or radius or options");if(!document.body.contains(t))throw 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 Error("Missing required SVG element to draw circles. Please see the documentation");const o=et();D(this.#t,{height:`${o}px`}),this.draw()}async draw(){const t=`ph_draw-circle-${I()}`;this.circle=document.createElementNS("http://www.w3.org/2000/svg","circle");const e=this.el.getAttribute("id")||I();if(this.el.setAttribute("id",e),this.circle.setAttribute("id",t),this.circle.setAttribute("data-el",e),this.circle.classList.add("ph-speccer"),this.circle.classList.add("speccer"),this.circle.classList.add("circle"),!this.#t)throw Error("No parentNode found for circle");this.#t.appendChild(this.circle);const{x:n,y:o}=await pt(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 dt=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:r}=await pt(t,n),{x:s,y:a}=await pt(e,o);return{x1:i,y1:r,x2:s,y2:a}},ht=(t,e)=>{const{x1:n,x2:o,y1:i,y2:r}=t,{direct:s=!1,firstSet:a=!1,direction:c}=e,p={x:n,y:i},l={x:o,y:r};return s?a?"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i-8},lastPoint:l,lastControl:{x:o+32,y:r}}:"south"===c?{firstPoint:p,firstControl:{x:n-8,y:i+32},lastPoint:l,lastControl:{x:o,y:r-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i-8},lastPoint:l,lastControl:{x:o-32,y:r}}:{firstPoint:p,firstControl:{x:n-8,y:i-32},lastPoint:l,lastControl:{x:o,y:r+32}}:"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i+8},lastPoint:l,lastControl:{x:o+32,y:r}}:"south"===c?{firstPoint:p,firstControl:{x:n+8,y:i+32},lastPoint:l,lastControl:{x:o,y:r-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i+8},lastPoint:l,lastControl:{x:o-32,y:r}}:{firstPoint:p,firstControl:{x:n+8,y:i-32},lastPoint:l,lastControl:{x:o,y:r+32}}:{firstPoint:p,firstControl:{x:n+(o-n)/2,y:i},lastPoint:l,lastControl:{x:n+(o-n)/2,y:r}}},ut=async(t,e,n)=>{const{pos1:o,pos2:i,firstSet:r=!1,direction:s}=n,{x1:a,y1:c,x2:p,y2:l}=await dt(t,e,o,i);let d=0,h=0;"north"===s?h=8:"west"===s?d=8:"east"===s?d=-8:"south"===s&&(h=-8);const{firstPoint:u,firstControl:f,lastControl:g,lastPoint:m}=ht({x1:a+0,x2:p+d,y1:c+0+document.documentElement.scrollTop,y2:l+h+document.documentElement.scrollTop},{direct:!0,firstSet:r,direction:s});return`M ${u.x} ${u.y}C ${f.x} ${f.y}, ${g.x} ${g.y}, ${m.x} ${m.y}`},ft=async({start:t,stop:e,crude:n=!1})=>{const{x1:o,y1:i,x2:r,y2:s}=await dt(t,e),a=((t,e,n,o,i=!0)=>{if(b(t)||b(e)||b(n)||b(o))throw new SyntaxError("Missing input for `angle`");if(w(t)||w(e)||w(n)||w(o))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof n} ${typeof o}`);const r=o-e,s=n-t;let a=Math.atan2(r,s);return a*=180/Math.PI,i&&a<0&&(a+=360),a})(o,i,r,s);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 gt{#t=null;#n=null;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#e(t,e)}#e(t,e){if(!t||!e)throw Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw Error("stopElement is not in the DOM");if(!document.body.contains(t))throw 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 Error("Missing required SVG element to draw lines. Please see the documentation");const n=et();D(this.#t,{height:`${n}px`}),this.connect()}connect(){this.draw(this.#n)}#o(t){if(!t)throw Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${I()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||I();return this.startElement.setAttribute("id",o),n.setAttribute("data-start-el",o),n.setAttribute("id",e),n.classList.remove("original"),n.classList.add("speccer"),n}async draw(t){if(!t)throw Error("No path given to draw!");const e=this.#o(t),n=this.#o(t);if(!t.parentNode)throw 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 ft({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:i,path1pos2:r,path2pos1:s,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 ut(this.startElement,this.stopElement,{pos1:i,pos2:r,firstSet:!0,direction:o}),p=await ut(this.startElement,this.stopElement,{pos1:s,pos2:a,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",i),this.firstPathElement.setAttribute("data-pos2",r),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",s),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",p)}}window.DrawSVGCurlyBracket=gt;class mt{#t=null;#n=null;startElement;stopElement;options;line;constructor(t,e,n={}){this.#e(t,e,n)}#e(t,e,n={}){if(!t||!e)throw Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw Error("stopElement is not in the DOM");if(!document.body.contains(t))throw 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 Error("Missing required SVG element to draw lines. Please see the documentation");const o=et();D(this.#t,{height:`${o}px`}),this.connect()}connect(){this.draw(this.#n)}async draw(t){if(!t)throw Error("No path given to draw!");const e=`ph_draw_path-path-${I()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||I();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 Error("No parentNode found for path");this.line=t.parentNode.insertBefore(n,t.nextSibling);const r=await ft({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:s,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}})(r),c=await(async(t,e,n)=>{const{pos1:o,pos2:i}=n,{x1:r,y1:s,x2:a,y2:c}=await dt(t,e,o,i),{firstPoint:p,firstControl:l,lastControl:d,lastPoint:h}=ht({x1:r,x2:a,y1:s+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:s,pos2:a});this.line.setAttribute("data-direction",r),this.line.setAttribute("data-pos1",s),this.line.setAttribute("data-pos2",a),this.line.setAttribute("d",c)}}window.DrawSVGLine=mt;const yt=t=>parseInt(t,10),wt=t=>yt(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,bt=async(t,e,n,o)=>{await T();const{pin:i={},position:r}=o,{useCurlyBrackets:s,subtle:a,bracket:c,text:l,parent:d,enclose:h}=i,u=wt(e),f=yt(getComputedStyle(e).getPropertyValue("--ph-speccer-measure-size"))||8;const g=await W(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||l)&&!c&&!s&&!a){if(r===p.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(r===p.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(r===p.Left){const{top:t}=g.fromLeft({center:!0});await T();const{left:e}=n.getBoundingClientRect();return{left:e-1.5*u-(l?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(r===p.Left){if(c&&!s){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:s?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(r===p.Right){if(c&&!s){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:s?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(r===p.Bottom){if(c&&!s){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:s?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(c&&!s){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:s?u/1.5:u});return{left:`${m}px`,top:`${y}px`}},xt=async(t,n,o,i)=>{if(!t)return;if(M(t))return;const r=t.getAttribute(e)||"pin";await T();const s=await H(r,t,i);if("pin"!==s.type||!s.pin)return;const a=`speccer-${i.slug}-${t.getAttribute("id")||I()}`,c=tt(o,i,a);t.setAttribute("data-speccer-element-id",a),document.body.appendChild(c);const p=await bt(t,c,n,s);await D(c,p);const l=s.pin.text&&null!==t.getAttribute("data-speccer-title"),d=s.pin.parent&&!s.pin.enclose&&!s.pin.bracket&&!l;return s.pin.useSVGLine?(new mt(t,c,s),d&&new lt(t,5,s)):s.pin.useCurlyBrackets&&new gt(t,c),a};let $t=0;const Et=async(n,o)=>{if(!n)return;const i=n.querySelectorAll('[data-speccer^="pin"]');if(!i||0===i.length)return;const r=n.getAttribute("data-speccer-literals")||window.SPECCER_LITERALS||t;[...i].filter(async t=>!M(t)).forEach(async(t,i)=>{const s=((t,e)=>{let n=e[t];return 0===t&&($t=0),n||(n=`${e[$t]}${e[$t].toLowerCase()}`,$t++),n})(i,r),a=t.getAttribute(e)||"";await T();const c=await H(a,t,o),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 r=e.getAttribute("data-speccer-title"),s=e.getAttribute("data-speccer-description"),a=0===e.nodeName.indexOf("H")?`<span class="ph-speccer heading">${e.nodeName}</span>`:"";return!s&&r?`${a}<span class="ph-speccer title">${r}</span>`:s&&r?`${a}<span class="ph-speccer title">${r}</span><span class="ph-speccer description">${s.replaceAll("\\n","<br/>")}</span>`:t})(s,t,c);await xt(t,n,p,c)})},At=(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},St=async(t,n)=>{if(!t)return;if(M(t))return;const o=t.getAttribute(e)||"",i=await F(t),r=await H(o,t,n);if("spacing"!==r.type||!r.spacing)return;const s=((t,e)=>{const{marginTop:n,marginBottom:o,marginLeft:i,marginRight:r,paddingTop:s,paddingBottom:a,paddingLeft:c,paddingRight:p}=t;return e?.spacing?.padding?{paddingTop:s,paddingBottom:a,paddingLeft:c,paddingRight:p}:e?.spacing?.margin?{marginTop:n,marginBottom:o,marginLeft:i,marginRight:r}:{marginTop:n,marginBottom:o,marginLeft:i,marginRight:r,paddingTop:s,paddingBottom:a,paddingLeft:c,paddingRight:p}})(i,r),a=Object.keys(s).filter(t=>"0px"!==s[t]);if(!a.length)return;t.classList.add("is-specced");const c=`speccer-spacing-${t.getAttribute("id")||I()}`;t.setAttribute("data-speccer-element-id",c),a.forEach(async e=>{const n=yt(s[e]),o=At(n);o.setAttribute("data-speccer-id",c);const i=(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(i,{bound:!!r?.spacing?.bound})),document.body.appendChild(o);const a=await(async(t,e,n,o)=>{await T();const i=n.getBoundingClientRect(),r=await j(n),s=o?.spacing?.bound?0:96,a=o?.spacing?.bound?0:48;return"marginTop"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top-e+"px"}:"marginRight"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left+parseInt(i.width+"",10)+"px",top:r.top+"px"}:"marginBottom"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top+parseInt(i.height+"",10)+"px"}:"marginLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left-e+"px",top:r.top+"px"}:"paddingTop"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top+"px"}:"paddingBottom"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top+(parseInt(i.height+"",10)-e)+"px"}:"paddingRight"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left+(parseInt(i.width+"",10)-e)+"px",top:r.top+"px"}:"paddingLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left+"px",top:r.top+"px"}:void 0})(e,n,t,r);await D(o,a)})},kt=(t,e=3)=>parseFloat(String(t)).toFixed(e),Ct=(t,e,n)=>{const o=document.createElement("div"),{typography:i,position:r}=e,s=K("ph-speccer speccer typography",{syntax:i?.useSyntaxHighlighting||!1,[r]:!0});return o.setAttribute("id",n),o.setAttribute("data-speccer-id",n),o.innerHTML=t,Y(o,s),o},vt=async(t,n)=>{if(!t)return;if(M(t))return;const o=t.getAttribute(e)||"",i=await H(o,t,n);if("typography"!==i.type||!i.typography)return;t.classList.add("is-specced");const r=await(async(t,e=!1)=>{const n=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:r,fontVariationSettings:s,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:r,fontVariationSettings:s,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||"NaN",10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.fontSize||"NaN",10)/16}</span><span class="token unit">rem</span>`,o=n.letterSpacing?n.letterSpacing.includes("px")?`<span class="token number">${parseInt(n.letterSpacing,10)}</span><span class="token unit">px</span>`:n.letterSpacing:"",i=n.lineHeight?"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||"NaN",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||"NaN",10)}px / ${parseInt(n.lineHeight||"NaN",10)/16}rem`:"normal"};</li> <li><span class="property">letter-spacing:</span> ${n.letterSpacing};</li> <li><span class="property">font-style:</span> ${n.fontStyle};</li></ul>}`})(t,i.typography.useSyntaxHighlighting),s=`speccer-${i.slug}-${t.getAttribute("id")||I()}`;t.setAttribute("data-speccer-element-id",s);const a=Ct(r,i,s);document.body.appendChild(a);const c=await(async(t,e,n)=>{const o=e.getBoundingClientRect(),i=wt(n),r=n.getBoundingClientRect(),s=await j(e),{typography:a,position:c}=t;if(a&&c===d.Right)return{left:s.left+o.width+i+"px",top:kt(G(s.top,r,o))+"px"};if(a&&c===d.Top)return{left:kt(z(s.left,r,o))+"px",top:s.top-r.height-i+"px"};if(a&&c===d.Bottom)return{left:kt(z(s.left,r,o))+"px",top:s.top+o.height+i+"px"};return{left:s.left-r.width-i+"px",top:kt(G(s.top,r,o))+"px"}})(i,t,a);D(a,c)},Pt=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(i,...r){const s=n&&!o;o&&clearTimeout(o),o=setTimeout(function(){o=null,n||t.apply(i,r)},e),s&&t.apply(i,r)}})(()=>{t()},300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},Lt=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{t()}):t()},Bt=()=>{const t=new IntersectionObserver((t,e)=>{for(const n of t)n.intersectionRatio>0&&(St(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 p=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}^="${r}"]`))p.observe(t);const l=new IntersectionObserver((t,e)=>{for(const n of t)n.intersectionRatio>0&&(vt(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${e}^="${i}"]`))l.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}^="${s}"]`))d.observe(t);const h=new IntersectionObserver(async(t,e)=>{for(const n of t)n.intersectionRatio>0&&(await Et(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${e}="${a}"]`))h.observe(t)},Rt=t=>{window.speccer=t},Tt=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?Rt(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?Lt(t):e.hasAttribute("data-lazy")?Bt():Lt(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||Pt(t))}},Nt=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],qt=["escape","esc","enter","return","⏎","␛"],Ht=async(t,e,n)=>{await T();const o=wt(n),i=await W(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||"autocomplete"===t||"headings"===t){let{left:t,top:e}=i.fromLeft();return t-=o,t<=0&&(t=o),e<=0&&(e=o),{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:r,top:s}=i.fromTop({center:!0,modifier:o});return{left:r-32+"px",top:s-32+"px"}},It=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,autocomplete:"autocomplete"===t,headings:"headings"===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){const e=(t=>{if(!t)return"";if(t.role&&""!==t.role)return t.role;const e=t.nodeName.toLowerCase();return["header","footer","section","form","main","nav","aside"].includes(e)?e:"N/A"})(t),n=t.nodeName.toLowerCase();o.innerHTML=`&lt;${n} role="${e}"&gt;`}if("autocomplete"===n){const e=t.getAttribute("autocomplete")||"";o.innerHTML=`autocomplete="${e}"`}"headings"===n&&(o.innerHTML=t.nodeName,o.classList.add(t.nodeName.toLowerCase())),"tabstops"===n&&o.setAttribute("data-speccer-a11y-tabstops",e);const i=`speccer-a11y-${t.getAttribute("id")||I()}`;o.setAttribute("data-speccer-id",i),document.body.appendChild(o);const r=await Ht(n,t,o);await D(o,r)},Mt=async(t,e)=>{const n=e.split(/\s\+\s/).map(t=>t.trim()),o=document.createElement("div"),i=K("ph-speccer speccer a11y shortcut-holder");Y(o,i);for(const t of n){const e=document.createElement("kbd"),n=document.createTextNode(t),i=K("ph-speccer speccer a11y shortcut",{modifier:Nt.includes(t.toLowerCase()),physical:qt.includes(t.toLowerCase())});Y(e,i),e.appendChild(n);const r=`speccer-a11y-shortcut-${I()}`;o.setAttribute("data-speccer-id",r),o.appendChild(e)}document.body.appendChild(o);const r=await Ht("shortcut",t,o);await D(o,r)},Vt=()=>{const t=document.querySelectorAll('[data-speccer*="a11y tabstops"]'),e=document.querySelectorAll('[data-speccer*="a11y landmark"]'),n=document.querySelectorAll('[data-speccer*="a11y shortcut"]'),o=document.querySelectorAll('[data-speccer*="a11y autocomplete"]'),i=document.querySelectorAll('[data-speccer*="a11y headings"]');if(n.length)for(const t of n){const e=t.getAttribute("data-speccer-a11y-shortcut");e&&""!==e&&!M(t)&&Mt(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,n]of t.entries()){if(!M(n)){It(n,e+1,"tabstops");continue}const t=n.getAttribute("id");if(!t)continue;const o=document.querySelector(`[for="${t}"]`);o&&!M(o)&&It(o,e+1,"tabstops")}}if(o.length)for(const t of o){const e=t.querySelectorAll("[autocomplete]");for(const t of e)M(t)||It(t,null,"autocomplete")}if(i.length)for(const t of i){const e=t.querySelectorAll('h1,h2,h3,h4,h5,h6, [role="heading"]');for(const t of e)M(t)||It(t,null,"headings")}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())M(n)||(It(n,t+1,"landmark"),It(n,null,"region"))}},Ot=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());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())}},zt={create:_,element:X},Gt={create:At,element:St},jt={createPinElement:tt,pinElement:xt,pinElements:Et},Wt={create:J,element:Q},Dt={create:U,element:Z},Ft={create:Ct,element:vt},_t={dom:Lt,lazy:Bt,manual:Rt,activate:Tt},Xt=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),function(t){t.remove()})})(".ph-speccer.speccer");const t=document.querySelectorAll(`[${e}^="${n}"]`),c=document.querySelectorAll(`[${e}^="${o}"]`),p=document.querySelectorAll(`[${e}^="${i}"]`),l=document.querySelectorAll(`[${e}="${a}"]`),d=document.querySelectorAll(`[${e}^="${r}"]`),h=document.querySelectorAll(`[${e}^="${s}"]`);for(const t of d)Z(t);for(const t of h)X(t);for(const n of t)if(St(n),n.hasChildNodes()){const t=n.querySelectorAll("*:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody):not([data-speccer])"),o=n.getAttribute(e)||"";if(t?.length)for(const e of t)e.setAttribute("data-speccer",o),St(e)}for(const t of c)Q(t);for(const t of p)vt(t);for(const t of l)Et(t);Vt()};Tt(Xt);export{Vt as a11y,Xt as default,zt as grid,Dt as mark,Wt as measure,_t as modes,jt as pin,Ot as removeSpeccerElement,Gt as spacing,Ft as typography};
package/dist/speccer.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.3.50
5
+ * @version 11.3.51
6
6
  * @license
7
7
  * Copyright (c) 2018-2026 Alexander Vassbotn Røyne-Helgesen
8
8
  *
@@ -24,4 +24,4 @@
24
24
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25
25
  * SOFTWARE.
26
26
  */
27
- !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,function(t){"use strict";const e=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],n="data-speccer",o="spacing",i="measure",r="typography",s="mark",a="grid",c="pin-area";var p,l,d,h,u,f,g;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(p||(p={})),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"}(d||(d={})),function(t){t.Typography="typography",t.Syntax="syntax",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(h||(h={})),function(t){t.Spacing="spacing"}(u||(u={})),function(t){t.Mark="mark"}(f||(f={})),function(t){t.Grid="grid"}(g||(g={}));const m=t=>"string"==typeof t,y=t=>!m(t),w=t=>"number"==typeof t,b=t=>!w(t),x=t=>void 0===t,$=t=>t.split(" "),E=t=>{if(null===t)return!1;return $(t).includes(l.Bracket)},A=t=>{if(null===t)return!1;return $(t).includes(l.Enclose)},S=t=>{if(null===t)return!1;return $(t).includes(l.Subtle)},k=t=>{if(null===t)return!1;return $(t).includes(l.Parent)},C=t=>{if(null===t)return!1;return $(t).includes(l.Text)},v=t=>{if(null===t)return!1;return $(t).includes(d.Height)},P=t=>{if(null===t)return!1;return $(t).includes(d.Slim)},L=t=>{if(null===t)return!1;return $(t).includes(d.Width)},B=t=>{if(null===t)return!1;const e=$(t);return(k(t)&&!A(t)&&!E(t)||C(t)||e.includes(l.SVG))&&!R(t)},R=t=>{if(null===t)return!1;const e=$(t);return e.includes(l.Curly)&&e.includes(l.Bracket)},T=t=>!!t&&t.split(" ").includes(h.Syntax),N=()=>new Promise(requestAnimationFrame),q=async(t,e)=>{await N();const n=getComputedStyle(e);return(t=>null!==t&&t.split(" ").includes(l.Pin))(t)?"pin":((t,e)=>null!==t&&t.split(" ").includes(g.Grid)&&m(e.display)&&("grid"===e.display||(e.display||"").includes("grid")))(t,n)?"grid":(t=>null!==t&&t.split(" ").includes(f.Mark))(t)?"mark":(t=>null!==t&&t.split(" ").includes(d.Measure))(t)?"measure":(t=>null!==t&&t.split(" ").includes(u.Spacing))(t)?"spacing":(t=>null!==t&&t.split(" ").includes(h.Typography))(t)?"typography":"pin"},M=t=>(t=>null!==t&&$(t).includes(l.Left))(t)?"left":(t=>null!==t&&$(t).includes(l.Right))(t)?"right":(t=>null!==t&&$(t).includes(l.Bottom))(t)?"bottom":"top",H=async(t,e,n)=>{const o=await q(t,e),i={slug:(r=t,r.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 r;if("pin"===o&&(i.pin={bracket:E(t),enclose:A(t),subtle:S(t),parent:k(t),text:C(t),useSVGLine:B(t),useCurlyBrackets:R(t)}),"measure"===o&&(i.measure={slim:P(t),height:v(t),width:L(t)}),"typography"===o&&(i.typography={useSyntaxHighlighting:T(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}},I=()=>"_"+Math.random().toString(36).substring(2,11),O=t=>{const e=t;if("function"==typeof e.checkVisibility)return!e.checkVisibility({opacityProperty:!0,checkVisibilityCSS:!0});const n=t.ownerDocument?.defaultView,o=n?.getComputedStyle(t);return!!o&&("none"===o.display||("hidden"===o.visibility||"collapse"===o.visibility||"0"===o.opacity))},V=async(t,e,n)=>{await N();return getComputedStyle(t)[e]===n},z=async(t,e,n)=>{if(!t.parentElement)return null;return await V(t.parentElement,e,n)?t.parentElement:await z(t.parentElement,e,n)},G=(t,e,n)=>t-e.width/2+n.width/2,j=(t,e,n)=>t-e.height/2+n.height/2,W=async t=>{await N();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,i=await(async t=>await z(t,"position","sticky"))(t);if(await(async t=>await V(t,"position","sticky"))(t)){const o=t.style.position;await N(),t.style.position="relative",await N(),e=t.getBoundingClientRect(),n=e.top,await N(),t.style.position=o}else if(i){const o=i.style.position;await N(),i.style.position="relative",await N(),e=t.getBoundingClientRect(),n=e.top,await N(),i.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},D=async(t,e)=>{await N();const n=t.getBoundingClientRect(),o=await W(e),i=await(async(t,e)=>{await N();const n=t.getBoundingClientRect();await N();const o=e.getBoundingClientRect(),i=o.top+window.scrollY,r=o.left+window.scrollX;return{height:o.height,width:o.width,top:j(i,n,o),left:G(r,n,o)}})(t,e),r=o.height,s=o.width,a=n.height,c=n.width;return{absolute:()=>({top:o.top,left:o.left,height:r,width:s}),toTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:r,width:s}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top-e-n,left:t?i.left:o.left,height:r,width:s}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:n=r,modifier:c=0}={})=>({top:o.top+n-(e+c),left:t?i.left:o.left,height:r,width:s}),fromBottom:({center:t=!1,targetHeight:e=r,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:r,width:s}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:r,width:s}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left-e-n,height:r,width:s}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:n=s,modifier:a=0}={})=>({top:t?i.top:o.top,left:o.left+n-(e+a),height:r,width:s}),fromRight:({center:t=!1,targetWidth:e=s,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:r,width:s})}},F=async(t,e)=>{var n;!t||!e||m(e)||w(e)||(n=e,"boolean"==typeof n)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object||(await N(),Array.isArray(e)&&(e=e.reduce((t,e)=>(t[e.key]=e.value,t),{})),Object.assign(t.style,e))},_=async t=>(await N(),getComputedStyle(t,null)),X=async(t,e)=>{if(!t)return;if(O(t))return;const o=t.getAttribute(n)||"grid",i=await _(t),r=await H(o,t,e);if("grid"!==r.type||!r.grid)return;const{grid:s}=r,{toggle:a}=s,{top:c,left:p,height:l,width:d}=await W(t),{gridTemplateColumns:h,gridTemplateRows:u,padding:f}=i,g=`speccer-${r.slug}-${t.getAttribute("id")||I()}`;if(t.setAttribute("data-speccer-element-id",g),"columns"===a||"both"===a){const t=parseInt(i.columnGap||"0"),e=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&&e.classList.add("speccer-small-grid"),e.setAttribute("data-speccer-id",g),e.classList.add("ph-speccer","speccer","speccer-grid-container"),F(e,{height:`${l+64}px`,width:`${d}px`,left:`${p}px`,top:c-32+"px",padding:f,gridTemplateColumns:h});const n=h?.split(" ").length||0;for(let t=0;t<n;t++){const t=document.createElement("div");t.classList.add("ph-speccer","speccer","speccer-grid-item"),e.appendChild(t)}document.body.appendChild(e)}if("rows"===a||"both"===a){const t=parseInt(i.rowGap||"0"),e=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&&e.classList.add("speccer-small-grid"),e.setAttribute("data-speccer-id",g),e.classList.add("ph-speccer","speccer","speccer-grid-row-container"),F(e,{width:`${d+64}px`,height:`${l}px`,top:`${c}px`,left:p-32+"px",padding:f,gridTemplateRows:u});const n=u?.split(" ").length||0;for(let t=0;t<n;t++){const t=document.createElement("div");t.classList.add("ph-speccer","speccer","speccer-grid-row-item"),e.appendChild(t)}document.body.appendChild(e)}},Y=async(t,e)=>{t&&(O(t)||await X(t,e))},K=(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)},U=(t,e)=>t?!e&&y(t)?Object.keys(t).filter(e=>t[e]).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter(t=>e[t]).join(" "):""}`.trim():"",Z=(t,e="span")=>{const n=document.createElement(e);return n.setAttribute("id",t),K(n,"ph-speccer speccer mark"),n},J=async t=>{if(!t)return;if(O(t))return;const e=t.getAttribute(n)||"";await N();const o=await H(e,t);if("mark"!==o.type)return;const i=`speccer-${o.slug}-${t.getAttribute("id")||I()}`;t.setAttribute("data-speccer-element-id",i);const r=Z(i);r.setAttribute("data-speccer-id",i),document.body.appendChild(r);const s=await D(r,t),{left:a,top:c,height:p,width:l}=s.absolute(),d={left:`${a}px`,top:`${c}px`,height:`${p}px`,width:`${l}px`};await F(r,d)},Q=(t="",e,n,o="span")=>{const i=document.createElement(o);i.setAttribute("title",`${t}px`),i.setAttribute("id",n),i.setAttribute("data-speccer-id",n),i.setAttribute("data-measure",`${parseInt(String(t),10)}px`);const{measure:r,position:s}=e,a=U("ph-speccer speccer measure",{height:r?.height||!1,width:r?.width||!1,slim:r?.slim||!1,[s]:!0});return K(i,a),i},tt=async(t,e)=>{if(!t)return;if(O(t))return;const o=t.getAttribute(n)||"measure";await N();const i=await H(o,t,e);if("measure"!==i.type||!i.measure)return;const{measure:r,position:s}=i;await N();const a=t.getBoundingClientRect(),c=r.slim?0:48,p=r.slim?0:96,l=`speccer-${i.slug}-${t.getAttribute("id")||I()}`;if(t.setAttribute("data-speccer-element-id",l),r.width)if(s===d.Bottom){const e=Q(a.width,i,l);document.body.appendChild(e);const n=await D(e,t);if(r.slim){const{left:t,top:o,width:i}=n.fromBottom({center:!1});await F(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`})}else{const{left:t,top:o,width:i,height:r}=n.absolute({center:!1});await F(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`,height:`${r+c}px`})}}else{const e=Q(a.width,i,l);document.body.appendChild(e);const n=await D(e,t);if(r.slim){const{left:t,top:o,width:i}=n.fromTop({center:!1});await F(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`})}else{const{left:t,top:o,width:i,height:r}=n.absolute({center:!1});await F(e,{left:`${t}px`,top:o-c+"px",width:`${i}px`,height:`${r+c}px`})}}else if(r.height)if(s===d.Right){const e=Q(a.height,i,l);document.body.appendChild(e);const n=await D(e,t);if(r.slim){const{left:t,top:o,height:i}=n.fromRight({center:!1});await F(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`})}else{const{left:t,top:o,height:i,width:r}=n.absolute({center:!1});await F(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`,width:`${r+p}px`})}}else{const e=Q(a.height,i,l);document.body.appendChild(e);const n=await D(e,t);if(r.slim){const{left:t,top:o,height:i}=n.fromLeft({center:!1});await F(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`})}else{const{left:t,top:o,height:i,width:r}=n.absolute({center:!1});await F(e,{left:t-p+"px",top:`${o}px`,height:`${i}px`,width:`${r+p}px`})}}},et=(t="",e,n="",o="span")=>{const i=document.createElement(o),r={},{position:s,pin:a={}}=e,{useSVGLine:c,useCurlyBrackets:p,text:l,parent:d,bracket:h,enclose:u,subtle:f}=a;r.text=l,r.parent=d,r.bracket=h,r.enclose=u,r.subtle=f,r.svg=c,r.curly=p,r[s]=!0,!d||h||p||f||(r.svg=!0),!h&&!u||h&&p?i.innerHTML=t:(h||u)&&i.setAttribute("data-pin-counter",t);const g=U("ph-speccer speccer pin",r);return K(i,g),i.setAttribute("id",n),i.setAttribute("data-speccer-id",n),i},nt=()=>{const{body:t,documentElement:e}=document;return Math.max(t.scrollHeight,t.offsetHeight,e.clientHeight,e.scrollHeight,e.offsetHeight)},ot=t=>t.top,it=t=>t.left+t.width,rt=t=>t.top+t.height,st=t=>t.left,at=t=>t.left+t.width/2,ct=t=>t.top+t.height/2,pt={center:t=>({x:at(t),y:ct(t)}),top:t=>({x:at(t),y:ot(t)}),right:t=>({x:it(t),y:ct(t)}),bottom:t=>({x:at(t),y:rt(t)}),left:t=>({x:st(t),y:ct(t)}),"right-top":t=>({x:it(t),y:ot(t)}),"right-bottom":t=>({x:it(t),y:rt(t)}),"left-top":t=>({x:st(t),y:ot(t)}),"left-bottom":t=>({x:st(t),y:rt(t)}),"top-left":t=>({x:st(t),y:ot(t)}),"top-right":t=>({x:it(t),y:ot(t)}),"bottom-left":t=>({x:st(t),y:rt(t)}),"bottom-right":t=>({x:it(t),y:rt(t)}),"top-center":t=>({x:at(t),y:ot(t)}),"right-center":t=>({x:it(t),y:ct(t)}),"bottom-center":t=>({x:at(t),y:rt(t)}),"left-center":t=>({x:st(t),y:ct(t)})},lt=async(t,e="center")=>{if(!e)throw Error("No position given");if(y(e))throw Error("The position given is not the required type: pos: "+typeof e);const n=["center","left","right","top","bottom","right-top","right-bottom","left-top","left-bottom","top-left","top-right","bottom-left","bottom-right","top-center","right-center","bottom-center","left-center"];if(!n.includes(e))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${n.join(", ")}`);await N();const o=t.getBoundingClientRect();return pt[e](o)};class dt{#t;el;circle;radius;options;constructor(t,e,n){this.#e(t,e,n)}#e(t,e,n){if(!t||!e||!n)throw Error("Missing inputs el or radius or options");if(!document.body.contains(t))throw 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 Error("Missing required SVG element to draw circles. Please see the documentation");const o=nt();F(this.#t,{height:`${o}px`}),this.draw()}async draw(){const t=`ph_draw-circle-${I()}`;this.circle=document.createElementNS("http://www.w3.org/2000/svg","circle");const e=this.el.getAttribute("id")||I();if(this.el.setAttribute("id",e),this.circle.setAttribute("id",t),this.circle.setAttribute("data-el",e),this.circle.classList.add("ph-speccer"),this.circle.classList.add("speccer"),this.circle.classList.add("circle"),!this.#t)throw Error("No parentNode found for circle");this.#t.appendChild(this.circle);const{x:n,y:o}=await lt(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=dt;const ht=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:r}=await lt(t,n),{x:s,y:a}=await lt(e,o);return{x1:i,y1:r,x2:s,y2:a}},ut=(t,e)=>{const{x1:n,x2:o,y1:i,y2:r}=t,{direct:s=!1,firstSet:a=!1,direction:c}=e,p={x:n,y:i},l={x:o,y:r};return s?a?"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i-8},lastPoint:l,lastControl:{x:o+32,y:r}}:"south"===c?{firstPoint:p,firstControl:{x:n-8,y:i+32},lastPoint:l,lastControl:{x:o,y:r-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i-8},lastPoint:l,lastControl:{x:o-32,y:r}}:{firstPoint:p,firstControl:{x:n-8,y:i-32},lastPoint:l,lastControl:{x:o,y:r+32}}:"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i+8},lastPoint:l,lastControl:{x:o+32,y:r}}:"south"===c?{firstPoint:p,firstControl:{x:n+8,y:i+32},lastPoint:l,lastControl:{x:o,y:r-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i+8},lastPoint:l,lastControl:{x:o-32,y:r}}:{firstPoint:p,firstControl:{x:n+8,y:i-32},lastPoint:l,lastControl:{x:o,y:r+32}}:{firstPoint:p,firstControl:{x:n+(o-n)/2,y:i},lastPoint:l,lastControl:{x:n+(o-n)/2,y:r}}},ft=async(t,e,n)=>{const{pos1:o,pos2:i,firstSet:r=!1,direction:s}=n,{x1:a,y1:c,x2:p,y2:l}=await ht(t,e,o,i);let d=0,h=0;"north"===s?h=8:"west"===s?d=8:"east"===s?d=-8:"south"===s&&(h=-8);const{firstPoint:u,firstControl:f,lastControl:g,lastPoint:m}=ut({x1:a+0,x2:p+d,y1:c+0+document.documentElement.scrollTop,y2:l+h+document.documentElement.scrollTop},{direct:!0,firstSet:r,direction:s});return`M ${u.x} ${u.y}C ${f.x} ${f.y}, ${g.x} ${g.y}, ${m.x} ${m.y}`},gt=async({start:t,stop:e,crude:n=!1})=>{const{x1:o,y1:i,x2:r,y2:s}=await ht(t,e),a=((t,e,n,o,i=!0)=>{if(x(t)||x(e)||x(n)||x(o))throw new SyntaxError("Missing input for `angle`");if(b(t)||b(e)||b(n)||b(o))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof n} ${typeof o}`);const r=o-e,s=n-t;let a=Math.atan2(r,s);return a*=180/Math.PI,i&&a<0&&(a+=360),a})(o,i,r,s);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 mt{#t;#n;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#e(t,e)}#e(t,e){if(!t||!e)throw Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw Error("stopElement is not in the DOM");if(!document.body.contains(t))throw 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 Error("Missing required SVG element to draw lines. Please see the documentation");const n=nt();F(this.#t,{height:`${n}px`}),this.connect()}connect(){this.draw(this.#n)}#o(t){if(!t)throw Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${I()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||I();return this.startElement.setAttribute("id",o),n.setAttribute("data-start-el",o),n.setAttribute("id",e),n.classList.remove("original"),n.classList.add("speccer"),n}async draw(t){if(!t)throw Error("No path given to draw!");const e=this.#o(t),n=this.#o(t);if(!t.parentNode)throw 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 gt({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:i,path1pos2:r,path2pos1:s,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 ft(this.startElement,this.stopElement,{pos1:i,pos2:r,firstSet:!0,direction:o}),p=await ft(this.startElement,this.stopElement,{pos1:s,pos2:a,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",i),this.firstPathElement.setAttribute("data-pos2",r),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",s),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",p)}}window.DrawSVGCurlyBracket=mt;class yt{#t;#n;startElement;stopElement;options;line;constructor(t,e,n={}){this.#e(t,e,n)}#e(t,e,n={}){if(!t||!e)throw Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw Error("stopElement is not in the DOM");if(!document.body.contains(t))throw 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 Error("Missing required SVG element to draw lines. Please see the documentation");const o=nt();F(this.#t,{height:`${o}px`}),this.connect()}connect(){this.draw(this.#n)}async draw(t){if(!t)throw Error("No path given to draw!");const e=`ph_draw_path-path-${I()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||I();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 Error("No parentNode found for path");this.line=t.parentNode.insertBefore(n,t.nextSibling);const r=await gt({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:s,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}})(r),c=await(async(t,e,n)=>{const{pos1:o,pos2:i}=n,{x1:r,y1:s,x2:a,y2:c}=await ht(t,e,o,i),{firstPoint:p,firstControl:l,lastControl:d,lastPoint:h}=ut({x1:r,x2:a,y1:s+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:s,pos2:a});this.line.setAttribute("data-direction",r),this.line.setAttribute("data-pos1",s),this.line.setAttribute("data-pos2",a),this.line.setAttribute("d",c)}}window.DrawSVGLine=yt;const wt=t=>parseInt(t,10),bt=t=>wt(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,xt=async(t,e,n,o)=>{await N();const{pin:i={},position:r}=o,{useCurlyBrackets:s,subtle:a,bracket:c,text:p,parent:d,enclose:h}=i,u=bt(e),f=wt(getComputedStyle(e).getPropertyValue("--ph-speccer-measure-size"))||8;const g=await D(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&&!s&&!a){if(r===l.Right){const{top:t}=g.fromRight({center:!0});await N();const{left:e,width:o}=n.getBoundingClientRect();return{left:`${e+o+u}px`,top:`${t}px`}}if(r===l.Bottom){const{left:t}=g.toBottom({center:!0});await N();const{top:e,height:o}=n.getBoundingClientRect();return{left:`${t}px`,top:`${e+o+u}px`}}if(r===l.Left){const{top:t}=g.fromLeft({center:!0});await N();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 N();const{top:e}=n.getBoundingClientRect();return{left:`${t}px`,top:e-1.5*u+"px"}}if(r===l.Left){if(c&&!s){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:s?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(r===l.Right){if(c&&!s){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:s?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(r===l.Bottom){if(c&&!s){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:s?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(c&&!s){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:s?u/1.5:u});return{left:`${m}px`,top:`${y}px`}},$t=async(t,e,o,i)=>{if(!t)return;if(O(t))return;const r=t.getAttribute(n)||"pin";await N();const s=await H(r,t,i);if("pin"!==s.type||!s.pin)return;const a=`speccer-${i.slug}-${t.getAttribute("id")||I()}`,c=et(o,i,a);t.setAttribute("data-speccer-element-id",a),document.body.appendChild(c);const p=await xt(t,c,e,s);await F(c,p);const l=s.pin.text&&null!==t.getAttribute("data-speccer-title"),d=s.pin.parent&&!s.pin.enclose&&!s.pin.bracket&&!l;return s.pin.useSVGLine?(new yt(t,c,s),d&&new dt(t,5,s)):s.pin.useCurlyBrackets&&new mt(t,c),a};let Et=0;const At=async(t,o)=>{if(!t)return;const i=t.querySelectorAll('[data-speccer^="pin"]');if(!i||0===i.length)return;const r=t.getAttribute("data-speccer-literals")||window.SPECCER_LITERALS||e;[...i].filter(async t=>!O(t)).forEach(async(e,i)=>{const s=((t,e)=>{let n=e[t];return 0===t&&(Et=0),n||(n=`${e[Et]}${e[Et].toLowerCase()}`,Et++),n})(i,r),a=e.getAttribute(n)||"";await N();const c=await H(a,e,o),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 r=e.getAttribute("data-speccer-title"),s=e.getAttribute("data-speccer-description"),a=0===e.nodeName.indexOf("H")?`<span class="ph-speccer heading">${e.nodeName}</span>`:"";return!s&&r?`${a}<span class="ph-speccer title">${r}</span>`:s&&r?`${a}<span class="ph-speccer title">${r}</span><span class="ph-speccer description">${s.replaceAll("\\n","<br/>")}</span>`:t})(s,e,c);await $t(e,t,p,c)})},St=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(`${t}px`);return n.appendChild(o),n.setAttribute("title",`${t}px`),K(n,"ph-speccer speccer spacing"),n},kt=async(t,e)=>{if(!t)return;if(O(t))return;const o=t.getAttribute(n)||"",i=await _(t),r=await H(o,t,e);if("spacing"!==r.type||!r.spacing)return;const s=((t,e)=>{const{marginTop:n,marginBottom:o,marginLeft:i,marginRight:r,paddingTop:s,paddingBottom:a,paddingLeft:c,paddingRight:p}=t;return e?.spacing?.padding?{paddingTop:s,paddingBottom:a,paddingLeft:c,paddingRight:p}:e?.spacing?.margin?{marginTop:n,marginBottom:o,marginLeft:i,marginRight:r}:{marginTop:n,marginBottom:o,marginLeft:i,marginRight:r,paddingTop:s,paddingBottom:a,paddingLeft:c,paddingRight:p}})(i,r),a=Object.keys(s).filter(t=>"0px"!==s[t]);if(!a.length)return;t.classList.add("is-specced");const c=`speccer-spacing-${t.getAttribute("id")||I()}`;t.setAttribute("data-speccer-element-id",c),a.forEach(async e=>{const n=wt(s[e]),o=St(n);o.setAttribute("data-speccer-id",c);const i=(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);K(o,U(i,{bound:!!r?.spacing?.bound})),document.body.appendChild(o);const a=await(async(t,e,n,o)=>{await N();const i=n.getBoundingClientRect(),r=await W(n),s=o?.spacing?.bound?0:96,a=o?.spacing?.bound?0:48;return"marginTop"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top-e+"px"}:"marginRight"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left+parseInt(i.width+"",10)+"px",top:r.top+"px"}:"marginBottom"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top+parseInt(i.height+"",10)+"px"}:"marginLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left-e+"px",top:r.top+"px"}:"paddingTop"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top+"px"}:"paddingBottom"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top+(parseInt(i.height+"",10)-e)+"px"}:"paddingRight"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left+(parseInt(i.width+"",10)-e)+"px",top:r.top+"px"}:"paddingLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left+"px",top:r.top+"px"}:void 0})(e,n,t,r);await F(o,a)})},Ct=(t,e=3)=>parseFloat(String(t)).toFixed(e),vt=(t,e,n)=>{const o=document.createElement("div"),{typography:i,position:r}=e,s=U("ph-speccer speccer typography",{syntax:i?.useSyntaxHighlighting||!1,[r]:!0});return o.setAttribute("id",n),o.setAttribute("data-speccer-id",n),o.innerHTML=t,K(o,s),o},Pt=async(t,e)=>{if(!t)return;if(O(t))return;const o=t.getAttribute(n)||"",i=await H(o,t,e);if("typography"!==i.type||!i.typography)return;t.classList.add("is-specced");const r=await(async(t,e=!1)=>{const n=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:r,fontVariationSettings:s,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:r,fontVariationSettings:s,fontWeight:a}})(await _(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||"NaN",10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.fontSize||"NaN",10)/16}</span><span class="token unit">rem</span>`,o=n.letterSpacing?n.letterSpacing.includes("px")?`<span class="token number">${parseInt(n.letterSpacing,10)}</span><span class="token unit">px</span>`:n.letterSpacing:"",i=n.lineHeight?"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||"NaN",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||"NaN",10)}px / ${parseInt(n.lineHeight||"NaN",10)/16}rem`:"normal"};</li> <li><span class="property">letter-spacing:</span> ${n.letterSpacing};</li> <li><span class="property">font-style:</span> ${n.fontStyle};</li></ul>}`})(t,i.typography.useSyntaxHighlighting),s=`speccer-${i.slug}-${t.getAttribute("id")||I()}`;t.setAttribute("data-speccer-element-id",s);const a=vt(r,i,s);document.body.appendChild(a);const c=await(async(t,e,n)=>{const o=e.getBoundingClientRect(),i=bt(n),r=n.getBoundingClientRect(),s=await W(e),{typography:a,position:c}=t;if(a&&c===h.Right)return{left:s.left+o.width+i+"px",top:Ct(j(s.top,r,o))+"px"};if(a&&c===h.Top)return{left:Ct(G(s.left,r,o))+"px",top:s.top-r.height-i+"px"};if(a&&c===h.Bottom)return{left:Ct(G(s.left,r,o))+"px",top:s.top+o.height+i+"px"};return{left:s.left-r.width-i+"px",top:Ct(j(s.top,r,o))+"px"}})(i,t,a);F(a,c)},Lt=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(i,...r){const s=n&&!o;o&&clearTimeout(o),o=setTimeout(function(){o=null,n||t.apply(i,r)},e),s&&t.apply(i,r)}})(()=>{t()},300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},Bt=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{t()}):t()},Rt=()=>{const t=new IntersectionObserver((t,e)=>{for(const n of t)n.intersectionRatio>0&&(kt(n.target),e.unobserve(n.target))});for(const e of document.querySelectorAll(`[${n}^="${o}"],[${n}^="${o}"] *: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&&(tt(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${n}^="${i}"]`))e.observe(t);const p=new IntersectionObserver((t,e)=>{for(const n of t)n.intersectionRatio>0&&(J(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${n}^="${s}"]`))p.observe(t);const l=new IntersectionObserver((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Pt(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${n}^="${r}"]`))l.observe(t);const d=new IntersectionObserver((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Y(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${n}^="${a}"]`))d.observe(t);const h=new IntersectionObserver(async(t,e)=>{for(const n of t)n.intersectionRatio>0&&(await At(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${n}="${c}"]`))h.observe(t)},Tt=t=>{window.speccer=t},Nt=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?Tt(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?Bt(t):e.hasAttribute("data-lazy")?Rt():Bt(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||Lt(t))}},qt=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],Mt=["escape","esc","enter","return","⏎","␛"],Ht=async(t,e,n)=>{await N();const o=bt(n),i=await D(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||"autocomplete"===t||"headings"===t){let{left:t,top:e}=i.fromLeft();return t-=o,t<=0&&(t=o),e<=0&&(e=o),{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:r,top:s}=i.fromTop({center:!0,modifier:o});return{left:r-32+"px",top:s-32+"px"}},It=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,autocomplete:"autocomplete"===t,headings:"headings"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(String(e));o.appendChild(t)}return K(o,i),o})(n,e);if("landmark"===n){const e=(t=>{if(!t)return"";if(t.role&&""!==t.role)return t.role;const e=t.nodeName.toLowerCase();return["header","footer","section","form","main","nav","aside"].includes(e)?e:"N/A"})(t),n=t.nodeName.toLowerCase();o.innerHTML=`&lt;${n} role="${e}"&gt;`}if("autocomplete"===n){const e=t.getAttribute("autocomplete")||"";o.innerHTML=`autocomplete="${e}"`}"headings"===n&&(o.innerHTML=t.nodeName,o.classList.add(t.nodeName.toLowerCase())),"tabstops"===n&&o.setAttribute("data-speccer-a11y-tabstops",e);const i=`speccer-a11y-${t.getAttribute("id")||I()}`;o.setAttribute("data-speccer-id",i),document.body.appendChild(o);const r=await Ht(n,t,o);await F(o,r)},Ot=async(t,e)=>{const n=e.split(/\s\+\s/).map(t=>t.trim()),o=document.createElement("div"),i=U("ph-speccer speccer a11y shortcut-holder");K(o,i);for(const t of n){const e=document.createElement("kbd"),n=document.createTextNode(t),i=U("ph-speccer speccer a11y shortcut",{modifier:qt.includes(t.toLowerCase()),physical:Mt.includes(t.toLowerCase())});K(e,i),e.appendChild(n);const r=`speccer-a11y-shortcut-${I()}`;o.setAttribute("data-speccer-id",r),o.appendChild(e)}document.body.appendChild(o);const r=await Ht("shortcut",t,o);await F(o,r)},Vt=()=>{const t=document.querySelectorAll('[data-speccer*="a11y tabstops"]'),e=document.querySelectorAll('[data-speccer*="a11y landmark"]'),n=document.querySelectorAll('[data-speccer*="a11y shortcut"]'),o=document.querySelectorAll('[data-speccer*="a11y autocomplete"]'),i=document.querySelectorAll('[data-speccer*="a11y headings"]');if(n.length)for(const t of n){const e=t.getAttribute("data-speccer-a11y-shortcut");e&&""!==e&&!O(t)&&Ot(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,n]of t.entries()){if(!O(n)){It(n,e+1,"tabstops");continue}const t=n.getAttribute("id");if(!t)continue;const o=document.querySelector(`[for="${t}"]`);o&&!O(o)&&It(o,e+1,"tabstops")}}if(o.length)for(const t of o){const e=t.querySelectorAll("[autocomplete]");for(const t of e)O(t)||It(t,null,"autocomplete")}if(i.length)for(const t of i){const e=t.querySelectorAll('h1,h2,h3,h4,h5,h6, [role="heading"]');for(const t of e)O(t)||It(t,null,"headings")}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)||(It(n,t+1,"landmark"),It(n,null,"region"))}},zt={create:X,element:Y},Gt={create:St,element:kt},jt={createPinElement:et,pinElement:$t,pinElements:At},Wt={create:Q,element:tt},Dt={create:Z,element:J},Ft={create:vt,element:Pt},_t={dom:Bt,lazy:Rt,manual:Tt,activate:Nt},Xt=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),function(t){t.remove()})})(".ph-speccer.speccer");const t=document.querySelectorAll(`[${n}^="${o}"]`),e=document.querySelectorAll(`[${n}^="${i}"]`),p=document.querySelectorAll(`[${n}^="${r}"]`),l=document.querySelectorAll(`[${n}="${c}"]`),d=document.querySelectorAll(`[${n}^="${s}"]`),h=document.querySelectorAll(`[${n}^="${a}"]`);for(const t of d)J(t);for(const t of h)Y(t);for(const e of t)if(kt(e),e.hasChildNodes()){const t=e.querySelectorAll("*:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody):not([data-speccer])"),o=e.getAttribute(n)||"";if(t?.length)for(const e of t)e.setAttribute("data-speccer",o),kt(e)}for(const t of e)tt(t);for(const t of p)Pt(t);for(const t of l)At(t);Vt()};Nt(Xt),t.a11y=Vt,t.default=Xt,t.grid=zt,t.mark=Dt,t.measure=Wt,t.modes=_t,t.pin=jt,t.removeSpeccerElement=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());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())}},t.spacing=Gt,t.typography=Ft,Object.defineProperty(t,"__esModule",{value:!0})});
27
+ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,function(t){"use strict";const e=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],n="data-speccer",o="spacing",i="measure",r="typography",s="mark",a="grid",c="pin-area";var p,l,d,h,u,f,g;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(p||(p={})),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"}(d||(d={})),function(t){t.Typography="typography",t.Syntax="syntax",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(h||(h={})),function(t){t.Spacing="spacing"}(u||(u={})),function(t){t.Mark="mark"}(f||(f={})),function(t){t.Grid="grid"}(g||(g={}));const m=t=>"string"==typeof t,y=t=>!m(t),w=t=>"number"==typeof t,b=t=>!w(t),x=t=>void 0===t,$=t=>t.split(" "),E=t=>{if(null===t)return!1;return $(t).includes(l.Bracket)},A=t=>{if(null===t)return!1;return $(t).includes(l.Enclose)},S=t=>{if(null===t)return!1;return $(t).includes(l.Subtle)},k=t=>{if(null===t)return!1;return $(t).includes(l.Parent)},C=t=>{if(null===t)return!1;return $(t).includes(l.Text)},v=t=>{if(null===t)return!1;return $(t).includes(d.Height)},P=t=>{if(null===t)return!1;return $(t).includes(d.Slim)},L=t=>{if(null===t)return!1;return $(t).includes(d.Width)},B=t=>{if(null===t)return!1;const e=$(t);return(k(t)&&!A(t)&&!E(t)||C(t)||e.includes(l.SVG))&&!R(t)},R=t=>{if(null===t)return!1;const e=$(t);return e.includes(l.Curly)&&e.includes(l.Bracket)},T=t=>!!t&&t.split(" ").includes(h.Syntax),N=()=>new Promise(requestAnimationFrame),q=async(t,e)=>{await N();const n=getComputedStyle(e);return(t=>null!==t&&t.split(" ").includes(l.Pin))(t)?"pin":((t,e)=>null!==t&&t.split(" ").includes(g.Grid)&&m(e.display)&&("grid"===e.display||(e.display||"").includes("grid")))(t,n)?"grid":(t=>null!==t&&t.split(" ").includes(f.Mark))(t)?"mark":(t=>null!==t&&t.split(" ").includes(d.Measure))(t)?"measure":(t=>null!==t&&t.split(" ").includes(u.Spacing))(t)?"spacing":(t=>null!==t&&t.split(" ").includes(h.Typography))(t)?"typography":"pin"},M=t=>(t=>null!==t&&$(t).includes(l.Left))(t)?"left":(t=>null!==t&&$(t).includes(l.Right))(t)?"right":(t=>null!==t&&$(t).includes(l.Bottom))(t)?"bottom":"top",H=async(t,e,n)=>{const o=await q(t,e),i={slug:(r=t,r.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 r;if("pin"===o&&(i.pin={bracket:E(t),enclose:A(t),subtle:S(t),parent:k(t),text:C(t),useSVGLine:B(t),useCurlyBrackets:R(t)}),"measure"===o&&(i.measure={slim:P(t),height:v(t),width:L(t)}),"typography"===o&&(i.typography={useSyntaxHighlighting:T(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}},I=()=>"_"+Math.random().toString(36).substring(2,11),O=t=>{const e=t;if("function"==typeof e.checkVisibility)return!e.checkVisibility({opacityProperty:!0,checkVisibilityCSS:!0});const n=t.ownerDocument?.defaultView,o=n?.getComputedStyle(t);return!!o&&("none"===o.display||("hidden"===o.visibility||"collapse"===o.visibility||"0"===o.opacity))},V=async(t,e,n)=>{await N();return getComputedStyle(t)[e]===n},z=async(t,e,n)=>{if(!t.parentElement)return null;return await V(t.parentElement,e,n)?t.parentElement:await z(t.parentElement,e,n)},G=(t,e,n)=>t-e.width/2+n.width/2,j=(t,e,n)=>t-e.height/2+n.height/2,W=async t=>{await N();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,i=await(async t=>await z(t,"position","sticky"))(t);if(await(async t=>await V(t,"position","sticky"))(t)){const o=t.style.position;await N(),t.style.position="relative",await N(),e=t.getBoundingClientRect(),n=e.top,await N(),t.style.position=o}else if(i){const o=i.style.position;await N(),i.style.position="relative",await N(),e=t.getBoundingClientRect(),n=e.top,await N(),i.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},D=async(t,e)=>{await N();const n=t.getBoundingClientRect(),o=await W(e),i=await(async(t,e)=>{await N();const n=t.getBoundingClientRect();await N();const o=e.getBoundingClientRect(),i=o.top+window.scrollY,r=o.left+window.scrollX;return{height:o.height,width:o.width,top:j(i,n,o),left:G(r,n,o)}})(t,e),r=o.height,s=o.width,a=n.height,c=n.width;return{absolute:()=>({top:o.top,left:o.left,height:r,width:s}),toTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:r,width:s}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top-e-n,left:t?i.left:o.left,height:r,width:s}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:n=r,modifier:c=0}={})=>({top:o.top+n-(e+c),left:t?i.left:o.left,height:r,width:s}),fromBottom:({center:t=!1,targetHeight:e=r,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:r,width:s}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:r,width:s}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left-e-n,height:r,width:s}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:n=s,modifier:a=0}={})=>({top:t?i.top:o.top,left:o.left+n-(e+a),height:r,width:s}),fromRight:({center:t=!1,targetWidth:e=s,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:r,width:s})}},F=async(t,e)=>{var n;!t||!e||m(e)||w(e)||(n=e,"boolean"==typeof n)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object||(await N(),Array.isArray(e)&&(e=e.reduce((t,e)=>(t[e.key]=e.value,t),{})),Object.assign(t.style,e))},_=async t=>(await N(),getComputedStyle(t,null)),X=async(t,e)=>{if(!t)return;if(O(t))return;const o=t.getAttribute(n)||"grid",i=await _(t),r=await H(o,t,e);if("grid"!==r.type||!r.grid)return;const{grid:s}=r,{toggle:a}=s,{top:c,left:p,height:l,width:d}=await W(t),{gridTemplateColumns:h,gridTemplateRows:u,padding:f}=i,g=`speccer-${r.slug}-${t.getAttribute("id")||I()}`;if(t.setAttribute("data-speccer-element-id",g),"columns"===a||"both"===a){const t=parseInt(i.columnGap||"0"),e=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&&e.classList.add("speccer-small-grid"),e.setAttribute("data-speccer-id",g),e.classList.add("ph-speccer","speccer","speccer-grid-container"),F(e,{height:`${l+64}px`,width:`${d}px`,left:`${p}px`,top:c-32+"px",padding:f,gridTemplateColumns:h});const n=h?.split(" ").length||0;for(let t=0;t<n;t++){const t=document.createElement("div");t.classList.add("ph-speccer","speccer","speccer-grid-item"),e.appendChild(t)}document.body.appendChild(e)}if("rows"===a||"both"===a){const t=parseInt(i.rowGap||"0"),e=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&&e.classList.add("speccer-small-grid"),e.setAttribute("data-speccer-id",g),e.classList.add("ph-speccer","speccer","speccer-grid-row-container"),F(e,{width:`${d+64}px`,height:`${l}px`,top:`${c}px`,left:p-32+"px",padding:f,gridTemplateRows:u});const n=u?.split(" ").length||0;for(let t=0;t<n;t++){const t=document.createElement("div");t.classList.add("ph-speccer","speccer","speccer-grid-row-item"),e.appendChild(t)}document.body.appendChild(e)}},Y=async(t,e)=>{t&&(O(t)||await X(t,e))},K=(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)},U=(t,e)=>t?!e&&y(t)?Object.keys(t).filter(e=>t[e]).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter(t=>e[t]).join(" "):""}`.trim():"",Z=(t,e="span")=>{const n=document.createElement(e);return n.setAttribute("id",t),K(n,"ph-speccer speccer mark"),n},J=async t=>{if(!t)return;if(O(t))return;const e=t.getAttribute(n)||"";await N();const o=await H(e,t);if("mark"!==o.type)return;const i=`speccer-${o.slug}-${t.getAttribute("id")||I()}`;t.setAttribute("data-speccer-element-id",i);const r=Z(i);r.setAttribute("data-speccer-id",i),document.body.appendChild(r);const s=await D(r,t),{left:a,top:c,height:p,width:l}=s.absolute(),d={left:`${a}px`,top:`${c}px`,height:`${p}px`,width:`${l}px`};await F(r,d)},Q=(t="",e,n,o="span")=>{const i=document.createElement(o);i.setAttribute("title",`${t}px`),i.setAttribute("id",n),i.setAttribute("data-speccer-id",n),i.setAttribute("data-measure",`${parseInt(String(t),10)}px`);const{measure:r,position:s}=e,a=U("ph-speccer speccer measure",{height:r?.height||!1,width:r?.width||!1,slim:r?.slim||!1,[s]:!0});return K(i,a),i},tt=async(t,e)=>{if(!t)return;if(O(t))return;const o=t.getAttribute(n)||"measure";await N();const i=await H(o,t,e);if("measure"!==i.type||!i.measure)return;const{measure:r,position:s}=i;await N();const a=t.getBoundingClientRect(),c=r.slim?0:48,p=r.slim?0:96,l=`speccer-${i.slug}-${t.getAttribute("id")||I()}`;if(t.setAttribute("data-speccer-element-id",l),r.width)if(s===d.Bottom){const e=Q(a.width,i,l);document.body.appendChild(e);const n=await D(e,t);if(r.slim){const{left:t,top:o,width:i}=n.fromBottom({center:!1});await F(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`})}else{const{left:t,top:o,width:i,height:r}=n.absolute({center:!1});await F(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`,height:`${r+c}px`})}}else{const e=Q(a.width,i,l);document.body.appendChild(e);const n=await D(e,t);if(r.slim){const{left:t,top:o,width:i}=n.fromTop({center:!1});await F(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`})}else{const{left:t,top:o,width:i,height:r}=n.absolute({center:!1});await F(e,{left:`${t}px`,top:o-c+"px",width:`${i}px`,height:`${r+c}px`})}}else if(r.height)if(s===d.Right){const e=Q(a.height,i,l);document.body.appendChild(e);const n=await D(e,t);if(r.slim){const{left:t,top:o,height:i}=n.fromRight({center:!1});await F(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`})}else{const{left:t,top:o,height:i,width:r}=n.absolute({center:!1});await F(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`,width:`${r+p}px`})}}else{const e=Q(a.height,i,l);document.body.appendChild(e);const n=await D(e,t);if(r.slim){const{left:t,top:o,height:i}=n.fromLeft({center:!1});await F(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`})}else{const{left:t,top:o,height:i,width:r}=n.absolute({center:!1});await F(e,{left:t-p+"px",top:`${o}px`,height:`${i}px`,width:`${r+p}px`})}}},et=(t="",e,n="",o="span")=>{const i=document.createElement(o),r={},{position:s,pin:a={}}=e,{useSVGLine:c,useCurlyBrackets:p,text:l,parent:d,bracket:h,enclose:u,subtle:f}=a;r.text=l,r.parent=d,r.bracket=h,r.enclose=u,r.subtle=f,r.svg=c,r.curly=p,r[s]=!0,!d||h||p||f||(r.svg=!0),!h&&!u||h&&p?i.innerHTML=t:(h||u)&&i.setAttribute("data-pin-counter",t);const g=U("ph-speccer speccer pin",r);return K(i,g),i.setAttribute("id",n),i.setAttribute("data-speccer-id",n),i},nt=()=>{const{body:t,documentElement:e}=document;return Math.max(t.scrollHeight,t.offsetHeight,e.clientHeight,e.scrollHeight,e.offsetHeight)},ot=t=>t.top,it=t=>t.left+t.width,rt=t=>t.top+t.height,st=t=>t.left,at=t=>t.left+t.width/2,ct=t=>t.top+t.height/2,pt={center:t=>({x:at(t),y:ct(t)}),top:t=>({x:at(t),y:ot(t)}),right:t=>({x:it(t),y:ct(t)}),bottom:t=>({x:at(t),y:rt(t)}),left:t=>({x:st(t),y:ct(t)}),"right-top":t=>({x:it(t),y:ot(t)}),"right-bottom":t=>({x:it(t),y:rt(t)}),"left-top":t=>({x:st(t),y:ot(t)}),"left-bottom":t=>({x:st(t),y:rt(t)}),"top-left":t=>({x:st(t),y:ot(t)}),"top-right":t=>({x:it(t),y:ot(t)}),"bottom-left":t=>({x:st(t),y:rt(t)}),"bottom-right":t=>({x:it(t),y:rt(t)}),"top-center":t=>({x:at(t),y:ot(t)}),"right-center":t=>({x:it(t),y:ct(t)}),"bottom-center":t=>({x:at(t),y:rt(t)}),"left-center":t=>({x:st(t),y:ct(t)})},lt=async(t,e="center")=>{if(!e)throw Error("No position given");if(y(e))throw Error("The position given is not the required type: pos: "+typeof e);const n=["center","left","right","top","bottom","right-top","right-bottom","left-top","left-bottom","top-left","top-right","bottom-left","bottom-right","top-center","right-center","bottom-center","left-center"];if(!n.includes(e))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${n.join(", ")}`);await N();const o=t.getBoundingClientRect();return pt[e](o)};class dt{#t=null;el;circle;radius;options;constructor(t,e,n){this.#e(t,e,n)}#e(t,e,n){if(!t||!e||!n)throw Error("Missing inputs el or radius or options");if(!document.body.contains(t))throw 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 Error("Missing required SVG element to draw circles. Please see the documentation");const o=nt();F(this.#t,{height:`${o}px`}),this.draw()}async draw(){const t=`ph_draw-circle-${I()}`;this.circle=document.createElementNS("http://www.w3.org/2000/svg","circle");const e=this.el.getAttribute("id")||I();if(this.el.setAttribute("id",e),this.circle.setAttribute("id",t),this.circle.setAttribute("data-el",e),this.circle.classList.add("ph-speccer"),this.circle.classList.add("speccer"),this.circle.classList.add("circle"),!this.#t)throw Error("No parentNode found for circle");this.#t.appendChild(this.circle);const{x:n,y:o}=await lt(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=dt;const ht=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:r}=await lt(t,n),{x:s,y:a}=await lt(e,o);return{x1:i,y1:r,x2:s,y2:a}},ut=(t,e)=>{const{x1:n,x2:o,y1:i,y2:r}=t,{direct:s=!1,firstSet:a=!1,direction:c}=e,p={x:n,y:i},l={x:o,y:r};return s?a?"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i-8},lastPoint:l,lastControl:{x:o+32,y:r}}:"south"===c?{firstPoint:p,firstControl:{x:n-8,y:i+32},lastPoint:l,lastControl:{x:o,y:r-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i-8},lastPoint:l,lastControl:{x:o-32,y:r}}:{firstPoint:p,firstControl:{x:n-8,y:i-32},lastPoint:l,lastControl:{x:o,y:r+32}}:"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i+8},lastPoint:l,lastControl:{x:o+32,y:r}}:"south"===c?{firstPoint:p,firstControl:{x:n+8,y:i+32},lastPoint:l,lastControl:{x:o,y:r-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i+8},lastPoint:l,lastControl:{x:o-32,y:r}}:{firstPoint:p,firstControl:{x:n+8,y:i-32},lastPoint:l,lastControl:{x:o,y:r+32}}:{firstPoint:p,firstControl:{x:n+(o-n)/2,y:i},lastPoint:l,lastControl:{x:n+(o-n)/2,y:r}}},ft=async(t,e,n)=>{const{pos1:o,pos2:i,firstSet:r=!1,direction:s}=n,{x1:a,y1:c,x2:p,y2:l}=await ht(t,e,o,i);let d=0,h=0;"north"===s?h=8:"west"===s?d=8:"east"===s?d=-8:"south"===s&&(h=-8);const{firstPoint:u,firstControl:f,lastControl:g,lastPoint:m}=ut({x1:a+0,x2:p+d,y1:c+0+document.documentElement.scrollTop,y2:l+h+document.documentElement.scrollTop},{direct:!0,firstSet:r,direction:s});return`M ${u.x} ${u.y}C ${f.x} ${f.y}, ${g.x} ${g.y}, ${m.x} ${m.y}`},gt=async({start:t,stop:e,crude:n=!1})=>{const{x1:o,y1:i,x2:r,y2:s}=await ht(t,e),a=((t,e,n,o,i=!0)=>{if(x(t)||x(e)||x(n)||x(o))throw new SyntaxError("Missing input for `angle`");if(b(t)||b(e)||b(n)||b(o))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof n} ${typeof o}`);const r=o-e,s=n-t;let a=Math.atan2(r,s);return a*=180/Math.PI,i&&a<0&&(a+=360),a})(o,i,r,s);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 mt{#t=null;#n=null;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#e(t,e)}#e(t,e){if(!t||!e)throw Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw Error("stopElement is not in the DOM");if(!document.body.contains(t))throw 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 Error("Missing required SVG element to draw lines. Please see the documentation");const n=nt();F(this.#t,{height:`${n}px`}),this.connect()}connect(){this.draw(this.#n)}#o(t){if(!t)throw Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${I()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||I();return this.startElement.setAttribute("id",o),n.setAttribute("data-start-el",o),n.setAttribute("id",e),n.classList.remove("original"),n.classList.add("speccer"),n}async draw(t){if(!t)throw Error("No path given to draw!");const e=this.#o(t),n=this.#o(t);if(!t.parentNode)throw 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 gt({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:i,path1pos2:r,path2pos1:s,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 ft(this.startElement,this.stopElement,{pos1:i,pos2:r,firstSet:!0,direction:o}),p=await ft(this.startElement,this.stopElement,{pos1:s,pos2:a,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",i),this.firstPathElement.setAttribute("data-pos2",r),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",s),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",p)}}window.DrawSVGCurlyBracket=mt;class yt{#t=null;#n=null;startElement;stopElement;options;line;constructor(t,e,n={}){this.#e(t,e,n)}#e(t,e,n={}){if(!t||!e)throw Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw Error("stopElement is not in the DOM");if(!document.body.contains(t))throw 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 Error("Missing required SVG element to draw lines. Please see the documentation");const o=nt();F(this.#t,{height:`${o}px`}),this.connect()}connect(){this.draw(this.#n)}async draw(t){if(!t)throw Error("No path given to draw!");const e=`ph_draw_path-path-${I()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||I();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 Error("No parentNode found for path");this.line=t.parentNode.insertBefore(n,t.nextSibling);const r=await gt({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:s,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}})(r),c=await(async(t,e,n)=>{const{pos1:o,pos2:i}=n,{x1:r,y1:s,x2:a,y2:c}=await ht(t,e,o,i),{firstPoint:p,firstControl:l,lastControl:d,lastPoint:h}=ut({x1:r,x2:a,y1:s+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:s,pos2:a});this.line.setAttribute("data-direction",r),this.line.setAttribute("data-pos1",s),this.line.setAttribute("data-pos2",a),this.line.setAttribute("d",c)}}window.DrawSVGLine=yt;const wt=t=>parseInt(t,10),bt=t=>wt(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,xt=async(t,e,n,o)=>{await N();const{pin:i={},position:r}=o,{useCurlyBrackets:s,subtle:a,bracket:c,text:p,parent:d,enclose:h}=i,u=bt(e),f=wt(getComputedStyle(e).getPropertyValue("--ph-speccer-measure-size"))||8;const g=await D(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&&!s&&!a){if(r===l.Right){const{top:t}=g.fromRight({center:!0});await N();const{left:e,width:o}=n.getBoundingClientRect();return{left:`${e+o+u}px`,top:`${t}px`}}if(r===l.Bottom){const{left:t}=g.toBottom({center:!0});await N();const{top:e,height:o}=n.getBoundingClientRect();return{left:`${t}px`,top:`${e+o+u}px`}}if(r===l.Left){const{top:t}=g.fromLeft({center:!0});await N();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 N();const{top:e}=n.getBoundingClientRect();return{left:`${t}px`,top:e-1.5*u+"px"}}if(r===l.Left){if(c&&!s){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:s?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(r===l.Right){if(c&&!s){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:s?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(r===l.Bottom){if(c&&!s){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:s?u/1.5:u});return{left:`${t}px`,top:`${e}px`}}if(c&&!s){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:s?u/1.5:u});return{left:`${m}px`,top:`${y}px`}},$t=async(t,e,o,i)=>{if(!t)return;if(O(t))return;const r=t.getAttribute(n)||"pin";await N();const s=await H(r,t,i);if("pin"!==s.type||!s.pin)return;const a=`speccer-${i.slug}-${t.getAttribute("id")||I()}`,c=et(o,i,a);t.setAttribute("data-speccer-element-id",a),document.body.appendChild(c);const p=await xt(t,c,e,s);await F(c,p);const l=s.pin.text&&null!==t.getAttribute("data-speccer-title"),d=s.pin.parent&&!s.pin.enclose&&!s.pin.bracket&&!l;return s.pin.useSVGLine?(new yt(t,c,s),d&&new dt(t,5,s)):s.pin.useCurlyBrackets&&new mt(t,c),a};let Et=0;const At=async(t,o)=>{if(!t)return;const i=t.querySelectorAll('[data-speccer^="pin"]');if(!i||0===i.length)return;const r=t.getAttribute("data-speccer-literals")||window.SPECCER_LITERALS||e;[...i].filter(async t=>!O(t)).forEach(async(e,i)=>{const s=((t,e)=>{let n=e[t];return 0===t&&(Et=0),n||(n=`${e[Et]}${e[Et].toLowerCase()}`,Et++),n})(i,r),a=e.getAttribute(n)||"";await N();const c=await H(a,e,o),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 r=e.getAttribute("data-speccer-title"),s=e.getAttribute("data-speccer-description"),a=0===e.nodeName.indexOf("H")?`<span class="ph-speccer heading">${e.nodeName}</span>`:"";return!s&&r?`${a}<span class="ph-speccer title">${r}</span>`:s&&r?`${a}<span class="ph-speccer title">${r}</span><span class="ph-speccer description">${s.replaceAll("\\n","<br/>")}</span>`:t})(s,e,c);await $t(e,t,p,c)})},St=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(`${t}px`);return n.appendChild(o),n.setAttribute("title",`${t}px`),K(n,"ph-speccer speccer spacing"),n},kt=async(t,e)=>{if(!t)return;if(O(t))return;const o=t.getAttribute(n)||"",i=await _(t),r=await H(o,t,e);if("spacing"!==r.type||!r.spacing)return;const s=((t,e)=>{const{marginTop:n,marginBottom:o,marginLeft:i,marginRight:r,paddingTop:s,paddingBottom:a,paddingLeft:c,paddingRight:p}=t;return e?.spacing?.padding?{paddingTop:s,paddingBottom:a,paddingLeft:c,paddingRight:p}:e?.spacing?.margin?{marginTop:n,marginBottom:o,marginLeft:i,marginRight:r}:{marginTop:n,marginBottom:o,marginLeft:i,marginRight:r,paddingTop:s,paddingBottom:a,paddingLeft:c,paddingRight:p}})(i,r),a=Object.keys(s).filter(t=>"0px"!==s[t]);if(!a.length)return;t.classList.add("is-specced");const c=`speccer-spacing-${t.getAttribute("id")||I()}`;t.setAttribute("data-speccer-element-id",c),a.forEach(async e=>{const n=wt(s[e]),o=St(n);o.setAttribute("data-speccer-id",c);const i=(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);K(o,U(i,{bound:!!r?.spacing?.bound})),document.body.appendChild(o);const a=await(async(t,e,n,o)=>{await N();const i=n.getBoundingClientRect(),r=await W(n),s=o?.spacing?.bound?0:96,a=o?.spacing?.bound?0:48;return"marginTop"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top-e+"px"}:"marginRight"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left+parseInt(i.width+"",10)+"px",top:r.top+"px"}:"marginBottom"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top+parseInt(i.height+"",10)+"px"}:"marginLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left-e+"px",top:r.top+"px"}:"paddingTop"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top+"px"}:"paddingBottom"===t?{height:`${e}px`,width:i.width+s+"px",left:r.left-s+"px",top:r.top+(parseInt(i.height+"",10)-e)+"px"}:"paddingRight"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left+(parseInt(i.width+"",10)-e)+"px",top:r.top+"px"}:"paddingLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:r.left+"px",top:r.top+"px"}:void 0})(e,n,t,r);await F(o,a)})},Ct=(t,e=3)=>parseFloat(String(t)).toFixed(e),vt=(t,e,n)=>{const o=document.createElement("div"),{typography:i,position:r}=e,s=U("ph-speccer speccer typography",{syntax:i?.useSyntaxHighlighting||!1,[r]:!0});return o.setAttribute("id",n),o.setAttribute("data-speccer-id",n),o.innerHTML=t,K(o,s),o},Pt=async(t,e)=>{if(!t)return;if(O(t))return;const o=t.getAttribute(n)||"",i=await H(o,t,e);if("typography"!==i.type||!i.typography)return;t.classList.add("is-specced");const r=await(async(t,e=!1)=>{const n=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:r,fontVariationSettings:s,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:r,fontVariationSettings:s,fontWeight:a}})(await _(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||"NaN",10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.fontSize||"NaN",10)/16}</span><span class="token unit">rem</span>`,o=n.letterSpacing?n.letterSpacing.includes("px")?`<span class="token number">${parseInt(n.letterSpacing,10)}</span><span class="token unit">px</span>`:n.letterSpacing:"",i=n.lineHeight?"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||"NaN",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||"NaN",10)}px / ${parseInt(n.lineHeight||"NaN",10)/16}rem`:"normal"};</li> <li><span class="property">letter-spacing:</span> ${n.letterSpacing};</li> <li><span class="property">font-style:</span> ${n.fontStyle};</li></ul>}`})(t,i.typography.useSyntaxHighlighting),s=`speccer-${i.slug}-${t.getAttribute("id")||I()}`;t.setAttribute("data-speccer-element-id",s);const a=vt(r,i,s);document.body.appendChild(a);const c=await(async(t,e,n)=>{const o=e.getBoundingClientRect(),i=bt(n),r=n.getBoundingClientRect(),s=await W(e),{typography:a,position:c}=t;if(a&&c===h.Right)return{left:s.left+o.width+i+"px",top:Ct(j(s.top,r,o))+"px"};if(a&&c===h.Top)return{left:Ct(G(s.left,r,o))+"px",top:s.top-r.height-i+"px"};if(a&&c===h.Bottom)return{left:Ct(G(s.left,r,o))+"px",top:s.top+o.height+i+"px"};return{left:s.left-r.width-i+"px",top:Ct(j(s.top,r,o))+"px"}})(i,t,a);F(a,c)},Lt=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(i,...r){const s=n&&!o;o&&clearTimeout(o),o=setTimeout(function(){o=null,n||t.apply(i,r)},e),s&&t.apply(i,r)}})(()=>{t()},300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},Bt=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{t()}):t()},Rt=()=>{const t=new IntersectionObserver((t,e)=>{for(const n of t)n.intersectionRatio>0&&(kt(n.target),e.unobserve(n.target))});for(const e of document.querySelectorAll(`[${n}^="${o}"],[${n}^="${o}"] *: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&&(tt(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${n}^="${i}"]`))e.observe(t);const p=new IntersectionObserver((t,e)=>{for(const n of t)n.intersectionRatio>0&&(J(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${n}^="${s}"]`))p.observe(t);const l=new IntersectionObserver((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Pt(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${n}^="${r}"]`))l.observe(t);const d=new IntersectionObserver((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Y(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${n}^="${a}"]`))d.observe(t);const h=new IntersectionObserver(async(t,e)=>{for(const n of t)n.intersectionRatio>0&&(await At(n.target),e.unobserve(n.target))});for(const t of document.querySelectorAll(`[${n}="${c}"]`))h.observe(t)},Tt=t=>{window.speccer=t},Nt=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?Tt(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?Bt(t):e.hasAttribute("data-lazy")?Rt():Bt(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||Lt(t))}},qt=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],Mt=["escape","esc","enter","return","⏎","␛"],Ht=async(t,e,n)=>{await N();const o=bt(n),i=await D(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||"autocomplete"===t||"headings"===t){let{left:t,top:e}=i.fromLeft();return t-=o,t<=0&&(t=o),e<=0&&(e=o),{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:r,top:s}=i.fromTop({center:!0,modifier:o});return{left:r-32+"px",top:s-32+"px"}},It=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,autocomplete:"autocomplete"===t,headings:"headings"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(String(e));o.appendChild(t)}return K(o,i),o})(n,e);if("landmark"===n){const e=(t=>{if(!t)return"";if(t.role&&""!==t.role)return t.role;const e=t.nodeName.toLowerCase();return["header","footer","section","form","main","nav","aside"].includes(e)?e:"N/A"})(t),n=t.nodeName.toLowerCase();o.innerHTML=`&lt;${n} role="${e}"&gt;`}if("autocomplete"===n){const e=t.getAttribute("autocomplete")||"";o.innerHTML=`autocomplete="${e}"`}"headings"===n&&(o.innerHTML=t.nodeName,o.classList.add(t.nodeName.toLowerCase())),"tabstops"===n&&o.setAttribute("data-speccer-a11y-tabstops",e);const i=`speccer-a11y-${t.getAttribute("id")||I()}`;o.setAttribute("data-speccer-id",i),document.body.appendChild(o);const r=await Ht(n,t,o);await F(o,r)},Ot=async(t,e)=>{const n=e.split(/\s\+\s/).map(t=>t.trim()),o=document.createElement("div"),i=U("ph-speccer speccer a11y shortcut-holder");K(o,i);for(const t of n){const e=document.createElement("kbd"),n=document.createTextNode(t),i=U("ph-speccer speccer a11y shortcut",{modifier:qt.includes(t.toLowerCase()),physical:Mt.includes(t.toLowerCase())});K(e,i),e.appendChild(n);const r=`speccer-a11y-shortcut-${I()}`;o.setAttribute("data-speccer-id",r),o.appendChild(e)}document.body.appendChild(o);const r=await Ht("shortcut",t,o);await F(o,r)},Vt=()=>{const t=document.querySelectorAll('[data-speccer*="a11y tabstops"]'),e=document.querySelectorAll('[data-speccer*="a11y landmark"]'),n=document.querySelectorAll('[data-speccer*="a11y shortcut"]'),o=document.querySelectorAll('[data-speccer*="a11y autocomplete"]'),i=document.querySelectorAll('[data-speccer*="a11y headings"]');if(n.length)for(const t of n){const e=t.getAttribute("data-speccer-a11y-shortcut");e&&""!==e&&!O(t)&&Ot(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,n]of t.entries()){if(!O(n)){It(n,e+1,"tabstops");continue}const t=n.getAttribute("id");if(!t)continue;const o=document.querySelector(`[for="${t}"]`);o&&!O(o)&&It(o,e+1,"tabstops")}}if(o.length)for(const t of o){const e=t.querySelectorAll("[autocomplete]");for(const t of e)O(t)||It(t,null,"autocomplete")}if(i.length)for(const t of i){const e=t.querySelectorAll('h1,h2,h3,h4,h5,h6, [role="heading"]');for(const t of e)O(t)||It(t,null,"headings")}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)||(It(n,t+1,"landmark"),It(n,null,"region"))}},zt={create:X,element:Y},Gt={create:St,element:kt},jt={createPinElement:et,pinElement:$t,pinElements:At},Wt={create:Q,element:tt},Dt={create:Z,element:J},Ft={create:vt,element:Pt},_t={dom:Bt,lazy:Rt,manual:Tt,activate:Nt},Xt=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),function(t){t.remove()})})(".ph-speccer.speccer");const t=document.querySelectorAll(`[${n}^="${o}"]`),e=document.querySelectorAll(`[${n}^="${i}"]`),p=document.querySelectorAll(`[${n}^="${r}"]`),l=document.querySelectorAll(`[${n}="${c}"]`),d=document.querySelectorAll(`[${n}^="${s}"]`),h=document.querySelectorAll(`[${n}^="${a}"]`);for(const t of d)J(t);for(const t of h)Y(t);for(const e of t)if(kt(e),e.hasChildNodes()){const t=e.querySelectorAll("*:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody):not([data-speccer])"),o=e.getAttribute(n)||"";if(t?.length)for(const e of t)e.setAttribute("data-speccer",o),kt(e)}for(const t of e)tt(t);for(const t of p)Pt(t);for(const t of l)At(t);Vt()};Nt(Xt),t.a11y=Vt,t.default=Xt,t.grid=zt,t.mark=Dt,t.measure=Wt,t.modes=_t,t.pin=jt,t.removeSpeccerElement=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());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())}},t.spacing=Gt,t.typography=Ft,Object.defineProperty(t,"__esModule",{value:!0})});
package/dist/speccer.min.css CHANGED
@@ -1 +1 @@
1
- .ph-speccer.speccer{--ph-speccer-color-artificialStrawberry:#ff3aa8;--ph-speccer-color-venusSlipperOrchid:#db6fff;--ph-speccer-color-superBanana:#fff76f;--ph-speccer-color-white:#fff;--ph-speccer-color-carbon:#333;--ph-speccer-color-red:red;--ph-speccer-color-niuZaiSeDenim:#0074e8;--ph-speccer-color-beautifulBlue:#1868b2;--ph-speccer-color-fuchsiaBlue:#7e60c5;--ph-speccer-color-sangDeBoeuf:#7a1000;--ph-speccer-color-galacticPurple:#3f2f9b;--ph-speccer-base-color:var(--ph-speccer-color-artificialStrawberry);--ph-speccer-spacing-color:var(--ph-speccer-base-color);--ph-speccer-spacing-padding-color:var(--ph-speccer-color-carbon);--ph-speccer-spacing-padding-color-background:rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-margin-color:var(--ph-speccer-color-red);--ph-speccer-spacing-margin-color-background:rgb(from var(--ph-speccer-color-superBanana) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-line-width:var(--ph-speccer-line-width);--ph-speccer-typography-background-color:var(--ph-speccer-color-white);--ph-speccer-typography-color-property:var(--ph-speccer-color-niuZaiSeDenim);--ph-speccer-typography-color-text:var(--ph-speccer-base-color);--ph-speccer-typography-color-value:var(--ph-speccer-base-color);--ph-speccer-mark-background-color:rgb(from var(--ph-speccer-base-color) r g b/var(--ph-speccer-opacity-20));--ph-speccer-mark-border-color:var(--ph-speccer-base-color);--ph-speccer-mark-border-width:1.5px;--ph-speccer-mark-border-style:solid;--ph-speccer-measure-color:var(--ph-speccer-color-red);--ph-speccer-measure-line-width:1.5px;--ph-speccer-measure-border-style:dotted;--ph-speccer-measure-size:8px;--ph-speccer-a11y-color-background:var(--ph-speccer-color-beautifulBlue);--ph-speccer-a11y-landmark-color-background:var(--ph-speccer-color-fuchsiaBlue);--ph-speccer-a11y-autocomplete-color-background:var(--ph-speccer-color-sangDeBoeuf);--ph-speccer-a11y-headings-color-background:var(--ph-speccer-color-galacticPurple);--ph-speccer-color-text-light:var(--ph-speccer-color-white);--ph-speccer-color-text-dark:var(--ph-speccer-color-carbon);--ph-speccer-pin-color:var(--ph-speccer-base-color);--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-height:12px;--ph-speccer-line-width:1.5px;--ph-speccer-line-width-negative:-1.5px;--ph-speccer-opacity-20:0.2;--ph-speccer-opacity-40:0.4;--ph-speccer-font-family:"Menlo for Powerline","Menlo Regular for Powerline","DejaVu Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--ph-speccer-font-size:12px;--ph-speccer-transition-default:all 2s cubic-bezier(0.4,0,0.2,1)}.ph-speccer.speccer,.ph-speccer.speccer:after,.ph-speccer.speccer:before{align-items:center;display:flex;font-family:var(--ph-speccer-font-family)!important;font-size:12px;justify-content:center;line-height:12px;position:absolute;z-index:99999}.ph-speccer.speccer,.ph-speccer.speccer:after,.ph-speccer.speccer:before,svg.ph-speccer{box-sizing:border-box;margin:0;padding:0;pointer-events:none;user-select:none}#ph-speccer-svg{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:3}svg.ph-speccer .ph-speccer.circle,svg.ph-speccer .ph-speccer.path{color:var(--ph-speccer-base-color,#ff3aa8)}[data-speccer=pin-area]{counter-reset:type}.ph-speccer.speccer.pin{align-items:center;border-radius:100%;color:var(--ph-speccer-color-text-light);display:flex;font-family:var(--ph-speccer-font-family);font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;width:var(--ph-speccer-pin-size);z-index:100000}.ph-speccer.speccer.pin,.ph-speccer.speccer.pin:after{background-color:var(--ph-speccer-pin-color);position:absolute}.ph-speccer.speccer.pin:after{content:"";height:var(--ph-speccer-pin-space);top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph-speccer.speccer.pin.curly:after,.ph-speccer.speccer.pin.svg:after,.ph-speccer.speccer.pin.text:after{content:none!important}.ph-speccer.speccer.pin.top:after,.ph-speccer.speccer.pin:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}.ph-speccer.speccer.pin.left:after{right:auto}.ph-speccer.speccer.pin.right:after{left:auto}.ph-speccer.speccer.pin.bottom:after{height:var(--ph-speccer-pin-space);right:50%;top:calc(-100% - var(--ph-speccer-pin-space)/2);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.pin.left:after{left:100%}.ph-speccer.speccer.pin.left:after,.ph-speccer.speccer.pin.right:after{height:var(--ph-speccer-line-width);top:50%;width:var(--ph-speccer-pin-space)}.ph-speccer.speccer.pin.right:after{right:100%}.ph-speccer.path.speccer.text,.ph-speccer.speccer.pin.text{color:var(--ph-speccer-color-text-dark)}.ph-speccer.speccer.pin.text{align-items:flex-start;background-color:initial;border-radius:0;display:flex;flex-direction:column;font-family:var(--ph-speccer-font-family);font-weight:400;height:auto;justify-content:center;line-height:130%;min-height:var(--ph-speccer-pin-size);position:absolute;width:250px;z-index:100000;grid-gap:2px}.ph-speccer.speccer.pin.text.right{padding-left:1rem}.ph-speccer.speccer.pin.text.left{padding-right:1rem;width:170px}.ph-speccer.speccer.pin.text.top{padding-bottom:1rem}.ph-speccer.speccer.pin.text.bottom{padding-top:1rem}.ph-speccer.speccer.pin.text .ph-speccer.title{font-size:11px;font-weight:500;text-transform:uppercase}.ph-speccer.speccer.pin.text .ph-speccer.description,.ph-speccer.speccer.pin.text .ph-speccer.heading{font-size:.875rem;font-weight:600;line-height:130%;position:relative}.ph-speccer.speccer.pin.text .ph-speccer.heading{color:var(--ph-speccer-base-color);text-transform:uppercase}.ph-speccer.speccer.pin.enclose{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.pin.enclose:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.enclose:before{bottom:100%;top:auto}.ph-speccer.speccer.pin.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph-speccer.speccer.pin.enclose.right:before{left:100%;right:auto}.ph-speccer.speccer.pin.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph-speccer.speccer.pin.enclose.left:before{left:auto;right:100%}.ph-speccer.speccer.pin.enclose.top:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.enclose.top:before{bottom:100%;top:auto}.ph-speccer.speccer.pin.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.enclose.bottom:before{bottom:auto;top:100%}.ph-speccer.speccer.pin.enclose.left,.ph-speccer.speccer.pin.enclose.right{width:8px}.ph-speccer.speccer.pin.enclose,.ph-speccer.speccer.pin.enclose.bottom,.ph-speccer.speccer.pin.enclose.top{height:8px}.ph-speccer.speccer.pin.enclose.bottom:after,.ph-speccer.speccer.pin.enclose.left:after,.ph-speccer.speccer.pin.enclose.right:after,.ph-speccer.speccer.pin.enclose.top:after,.ph-speccer.speccer.pin.enclose:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-pin-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph-speccer.speccer.pin.enclose.left:after,.ph-speccer.speccer.pin.enclose.right:after{top:50%;transform:translateY(-50%)}.ph-speccer.speccer.pin.enclose.bottom:after,.ph-speccer.speccer.pin.enclose.top:after,.ph-speccer.speccer.pin.enclose:after{left:50%;transform:translateX(-50%)}.ph-speccer.speccer.pin.enclose.bottom:before,.ph-speccer.speccer.pin.enclose.left:before,.ph-speccer.speccer.pin.enclose.right:before,.ph-speccer.speccer.pin.enclose.top:before,.ph-speccer.speccer.pin.enclose:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph-speccer.speccer.pin.enclose.left:before,.ph-speccer.speccer.pin.enclose.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.enclose.bottom:before,.ph-speccer.speccer.pin.enclose.top:before,.ph-speccer.speccer.pin.enclose:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.pin.bracket:not(.curly){background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none;border-radius:0;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.pin.bracket:not(.curly):after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly):before{bottom:100%}.ph-speccer.speccer.pin.bracket:not(.curly).right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-left:none}.ph-speccer.speccer.pin.bracket:not(.curly).right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).right:before{left:100%;right:auto}.ph-speccer.speccer.pin.bracket:not(.curly).left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-right:none}.ph-speccer.speccer.pin.bracket:not(.curly).left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).left:before{left:auto;right:100%}.ph-speccer.speccer.pin.bracket:not(.curly).top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none}.ph-speccer.speccer.pin.bracket:not(.curly).top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).top:before{bottom:100%}.ph-speccer.speccer.pin.bracket:not(.curly).bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-top:none}.ph-speccer.speccer.pin.bracket:not(.curly).bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).bottom:before{top:100%}.ph-speccer.speccer.pin.bracket.left:not(.curly),.ph-speccer.speccer.pin.bracket.right:not(.curly){width:8px}.ph-speccer.speccer.pin.bracket.bottom:not(.curly),.ph-speccer.speccer.pin.bracket.top:not(.curly),.ph-speccer.speccer.pin.bracket:not(.curly){height:8px}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):after,.ph-speccer.speccer.pin.bracket.left:not(.curly):after,.ph-speccer.speccer.pin.bracket.right:not(.curly):after,.ph-speccer.speccer.pin.bracket.top:not(.curly):after,.ph-speccer.speccer.pin.bracket:not(.curly):after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-pin-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph-speccer.speccer.pin.bracket.left:not(.curly):after,.ph-speccer.speccer.pin.bracket.right:not(.curly):after{top:50%;transform:translateY(-50%)}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):after,.ph-speccer.speccer.pin.bracket.top:not(.curly):after,.ph-speccer.speccer.pin.bracket:not(.curly):after{left:50%;transform:translateX(-50%)}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):before,.ph-speccer.speccer.pin.bracket.left:not(.curly):before,.ph-speccer.speccer.pin.bracket.right:not(.curly):before,.ph-speccer.speccer.pin.bracket.top:not(.curly):before,.ph-speccer.speccer.pin.bracket:not(.curly):before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph-speccer.speccer.pin.bracket.left:not(.curly):before,.ph-speccer.speccer.pin.bracket.right:not(.curly):before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):before,.ph-speccer.speccer.pin.bracket.top:not(.curly):before,.ph-speccer.speccer.pin.bracket:not(.curly):before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.pin.subtle{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.subtle.bottom:after,.ph-speccer.speccer.pin.subtle.top:after{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph-speccer.speccer.pin.subtle.left:after,.ph-speccer.speccer.pin.subtle.right:after{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph-speccer.speccer.pin.enclose.subtle{background-color:initial}.ph-speccer.speccer.pin.bracket.subtle:not(.curly){background-color:initial}.ph-speccer.speccer.pin.bracket.subtle:not(.curly),.ph-speccer.speccer.pin.bracket.subtle:not(.curly).top{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-bottom:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-top:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).right{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-left:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).left{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-right:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly):after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom:before,.ph-speccer.speccer.pin.bracket.subtle:not(.curly).top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).left:before,.ph-speccer.speccer.pin.bracket.subtle:not(.curly).right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph-speccer.speccer.pin.enclose.subtle{border-style:dashed}.ph-speccer.speccer.pin.enclose.subtle:after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph-speccer.speccer.pin.enclose.subtle.bottom:before,.ph-speccer.speccer.pin.enclose.subtle.top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph-speccer.speccer.pin.enclose.subtle.left:before,.ph-speccer.speccer.pin.enclose.subtle.right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph-speccer.speccer.a11y.landmark{align-items:center;background-color:var(--ph-speccer-a11y-landmark-color-background);color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);font-size:12px;height:28px;justify-content:center;line-height:28px;padding:0 .5rem;pointer-events:auto;position:absolute}.ph-speccer.speccer.a11y.landmark:after{border:14.2px solid #7e60c500;content:"";height:0;pointer-events:none;position:absolute;width:0}.ph-speccer.speccer.a11y.landmark.left:after,.ph-speccer.speccer.a11y.landmark:after{border-left-color:var(--ph-speccer-a11y-landmark-color-background);left:100%;top:50%;transform:translateY(-50%)}.ph-speccer.speccer.a11y.landmark.top:after{border-bottom-color:var(--ph-speccer-a11y-landmark-color-background);left:50%;top:0;transform:translateX(-50%)}.ph-speccer.speccer.a11y.landmark.right:after{border-right-color:var(--ph-speccer-a11y-landmark-color-background);left:0;top:50%;transform:translateY(-50%)}.ph-speccer.speccer.a11y.landmark.bottom:after{border-top-color:var(--ph-speccer-a11y-landmark-color-background);left:50%;top:0;transform:translateX(-50%)}.ph-speccer.speccer.a11y.region{outline:2px solid var(--ph-speccer-a11y-landmark-color-background);outline-offset:2px;position:absolute}.ph-speccer.speccer.a11y.tabstops{align-items:center;background-color:var(--ph-speccer-a11y-color-background);border-radius:50%;color:var(--ph-speccer-color-text-light);display:flex;font-family:var(--ph-speccer-font-family);font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size)}.ph-speccer.speccer.a11y.tabstops:before{content:attr(data-speccer-a11y-tabstops);position:static;text-align:center}.ph-speccer.speccer.a11y.shortcut-holder{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;min-width:120px;position:absolute;grid-gap:.5rem}.ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut{background-color:var(--ph-speccer-a11y-color-background);border:1pt solid var(--ph-speccer-a11y-color-background);border-radius:.5rem;display:inline-flex;flex-shrink:0;font-size:.875rem;font-weight:500;line-height:1.25rem;padding:.5rem .75rem;position:relative;text-transform:uppercase;text-transform:lowercase}.ph-speccer.speccer.a11y.autocomplete,.ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut{align-items:center;color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);justify-content:center}.ph-speccer.speccer.a11y.autocomplete{background-color:var(--ph-speccer-a11y-autocomplete-color-background);font-size:12px;height:28px;line-height:28px;padding:0 .5rem;pointer-events:auto;position:absolute}.ph-speccer.speccer.a11y.autocomplete:after{border:14.2px solid #7e60c500;content:"";height:0;pointer-events:none;position:absolute;width:0}.ph-speccer.speccer.a11y.autocomplete.left:after,.ph-speccer.speccer.a11y.autocomplete:after{border-left-color:var(--ph-speccer-a11y-autocomplete-color-background);left:100%;top:50%;transform:translateY(-50%)}.ph-speccer.speccer.a11y.autocomplete.top:after{border-bottom-color:var(--ph-speccer-a11y-autocomplete-color-background);left:50%;top:0;transform:translateX(-50%)}.ph-speccer.speccer.a11y.autocomplete.right:after{border-right-color:var(--ph-speccer-a11y-autocomplete-color-background);left:0;top:50%;transform:translateY(-50%)}.ph-speccer.speccer.a11y.autocomplete.bottom:after{border-top-color:var(--ph-speccer-a11y-autocomplete-color-background);left:50%;top:0;transform:translateX(-50%)}.ph-speccer.speccer.a11y.headings{align-items:center;background-color:var(--ph-speccer-a11y-headings-color-background);color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);font-size:12px;height:28px;justify-content:center;line-height:28px;padding:0 .5rem;pointer-events:auto;position:absolute}.ph-speccer.speccer.a11y.headings:after{border:14.2px solid #7e60c500;content:"";height:0;pointer-events:none;position:absolute;width:0}.ph-speccer.speccer.a11y.headings.left:after,.ph-speccer.speccer.a11y.headings:after{border-left-color:var(--ph-speccer-a11y-headings-color-background);left:100%;top:50%;transform:translateY(-50%)}.ph-speccer.speccer.a11y.headings.top:after{border-bottom-color:var(--ph-speccer-a11y-headings-color-background);left:50%;top:0;transform:translateX(-50%)}.ph-speccer.speccer.a11y.headings.right:after{border-right-color:var(--ph-speccer-a11y-headings-color-background);left:0;top:50%;transform:translateY(-50%)}.ph-speccer.speccer.a11y.headings.bottom:after{border-top-color:var(--ph-speccer-a11y-headings-color-background);left:50%;top:0;transform:translateX(-50%)}.ph-speccer.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);display:block;font-size:10px;line-height:140%;max-width:320px;padding:8px;text-align:left;width:auto}.ph-speccer.speccer.typography,.ph-speccer.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph-speccer.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph-speccer.speccer.typography.left:after,.ph-speccer.speccer.typography:after{height:var(--ph-speccer-line-width);left:100%;top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph-speccer.speccer.typography.right:after{height:var(--ph-speccer-line-width);left:auto;right:100%;top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph-speccer.speccer.typography.top:after{top:100%}.ph-speccer.speccer.typography.bottom:after,.ph-speccer.speccer.typography.top:after{height:var(--ph-speccer-pin-space);left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.typography.bottom:after{bottom:100%;top:auto}.ph-speccer.speccer.typography .speccer-styles{font-size:10px;line-height:140%;list-style:none;margin:0;padding:0 0 0 8px;width:100%}.ph-speccer.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:10px;font-weight:400;margin:0;padding:0;text-align:left}.ph-speccer.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:10px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph-speccer.speccer.typography.syntax>pre{background:#0000;border-radius:0;color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);font-size:12px;line-height:1.5;margin:0;padding:0}.ph-speccer.speccer.typography.syntax{--ph-speccer-color-code-color-1:#737373;--ph-speccer-color-code-color-2:#ff3aa8;--ph-speccer-color-code-color-3:#38383d;--ph-speccer-color-code-color-4:#ff3aa8;--ph-speccer-color-code-color-5:#ff3aa8;--ph-speccer-color-code-color-6:#0074e8;--ph-speccer-color-code-color-7:#000;--ph-speccer-color-code-color-8:#cd0404}.ph-speccer.speccer.typography.syntax .namespace{opacity:.7}.ph-speccer.speccer.typography.syntax .token.cdata,.ph-speccer.speccer.typography.syntax .token.comment,.ph-speccer.speccer.typography.syntax .token.doctype,.ph-speccer.speccer.typography.syntax .token.prolog{color:var(--ph-speccer-color-code-color-1)}.ph-speccer.speccer.typography.syntax .token.boolean,.ph-speccer.speccer.typography.syntax .token.null,.ph-speccer.speccer.typography.syntax .token.number,.ph-speccer.speccer.typography.syntax .token.operator{color:var(--ph-speccer-color-code-color-5)}.ph-speccer.speccer.typography.syntax .token.attr-name{color:var(--ph-speccer-color-code-color-2)}.ph-speccer.speccer.typography.syntax .token.entity,.ph-speccer.speccer.typography.syntax .token.selector,.ph-speccer.speccer.typography.syntax .token.string,.ph-speccer.speccer.typography.syntax .token.url{color:var(--ph-speccer-color-code-color-3)}.ph-speccer.speccer.typography.syntax .token.atrule,.ph-speccer.speccer.typography.syntax .token.attr-value,.ph-speccer.speccer.typography.syntax .token.control,.ph-speccer.speccer.typography.syntax .token.directive,.ph-speccer.speccer.typography.syntax .token.important,.ph-speccer.speccer.typography.syntax .token.keyword,.ph-speccer.speccer.typography.syntax .token.unit{color:var(--ph-speccer-color-code-color-4)}.ph-speccer.speccer.typography.syntax .token.regex,.ph-speccer.speccer.typography.syntax .token.statement{color:var(--ph-speccer-color-code-color-3)}.ph-speccer.speccer.typography.syntax .token.placeholder,.ph-speccer.speccer.typography.syntax .token.property,.ph-speccer.speccer.typography.syntax .token.tag,.ph-speccer.speccer.typography.syntax .token.variable{color:var(--ph-speccer-color-code-color-6)}.ph-speccer.speccer.typography.syntax .token.important,.ph-speccer.speccer.typography.syntax .token.statement{font-weight:700}.ph-speccer.speccer.typography.syntax .token.punctuation{color:var(--ph-speccer-color-code-color-7)}.ph-speccer.speccer.typography.syntax .token.entity{cursor:help}.ph-speccer.speccer.typography.syntax .token.debug{color:var(--ph-speccer-color-code-color-8)}.ph-speccer.speccer.speccer-grid-container{column-gap:var(--ph-speccer-grid-gap-original);counter-reset:column-gap}.ph-speccer.speccer.speccer-grid-container,.ph-speccer.speccer.speccer-grid-row-container{display:grid;justify-content:normal;position:absolute;transition:var(--ph-speccer-transition-default)}.ph-speccer.speccer.speccer-grid-row-container{counter-reset:row-gap;row-gap:var(--ph-speccer-grid-row-gap-original)}.ph-speccer.speccer.speccer-grid-item{border-left:1px solid var(--ph-speccer-base-color);border-right:1px solid var(--ph-speccer-base-color);height:100%;position:relative;transition:var(--ph-speccer-transition-default)}.ph-speccer.speccer.speccer-grid-row-item{border-bottom:1px solid var(--ph-speccer-base-color);border-top:1px solid var(--ph-speccer-base-color);height:100%;position:relative;transition:var(--ph-speccer-transition-default);width:100%}.ph-speccer.speccer.speccer-grid-item:before{border-top-right-radius:50%;content:counter(column-gap);counter-increment:column-gap;height:32px;left:100%;top:-32px;width:calc(var(--ph-speccer-grid-gap) + 2px)}.ph-speccer.speccer.speccer-grid-item:before,.ph-speccer.speccer.speccer-grid-row-item:before{align-items:center;background-color:var(--ph-speccer-base-color);border-top-left-radius:50%;color:var(--ph-speccer-color-text-light);display:flex;font-family:var(--ph-speccer-font-family)!important;font-size:16px;justify-content:center;position:absolute;transition:var(--ph-speccer-transition-default)}.ph-speccer.speccer.speccer-grid-row-item:before{border-bottom-left-radius:50%;content:counter(row-gap);counter-increment:row-gap;height:calc(var(--ph-speccer-grid-row-gap) + 2px);left:-32px;top:100%;width:32px}.ph-speccer.speccer.speccer-grid-item:first-child:after{border-top-right-radius:50%;content:counter(column-gap);counter-increment:column-gap;height:32px;left:100%;top:-32px;width:calc(var(--ph-speccer-grid-gap) + 2px)}.ph-speccer.speccer.speccer-grid-item:first-child:after,.ph-speccer.speccer.speccer-grid-row-item:first-child:after{align-items:center;background-color:var(--ph-speccer-base-color);border-top-left-radius:50%;color:var(--ph-speccer-color-text-light);display:flex;font-family:var(--ph-speccer-font-family)!important;font-size:16px;justify-content:center;position:absolute;transition:var(--ph-speccer-transition-default)}.ph-speccer.speccer.speccer-grid-row-item:first-child:after{border-bottom-left-radius:50%;content:counter(row-gap);counter-increment:row-gap;height:calc(var(--ph-speccer-grid-row-gap) + 2px);left:-32px;top:100%;width:32px}.ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item:before,.ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item:first-child:after{left:calc(100% - (var(--ph-speccer-grid-gap) - var(--ph-speccer-grid-gap-original))/2)}.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item:before,.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item:first-child:after{top:calc(100% - (var(--ph-speccer-grid-row-gap) - var(--ph-speccer-grid-row-gap-original))/2)}.ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:first-child:before{left:calc((var(--ph-speccer-grid-gap) + 2px)/2*-1);position:absolute;right:auto;top:-32px}.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:first-child:before{bottom:auto;left:-32px;position:absolute;top:calc((var(--ph-speccer-grid-row-gap) + 2px)/2*-1)}.ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:last-child:before{left:auto;position:absolute;right:calc((var(--ph-speccer-grid-gap) + 2px)/2*-1);top:-32px}.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:last-child:before{bottom:calc((var(--ph-speccer-grid-row-gap) + 2px)/2*-1);left:-32px;position:absolute;top:auto}.ph-speccer.speccer.spacing{pointer-events:none;transition:none;white-space:nowrap}.ph-speccer.speccer.spacing.padding{background-color:var(--ph-speccer-spacing-padding-color-background);color:var(--ph-speccer-spacing-padding-color)}.ph-speccer.speccer.spacing.padding:after,.ph-speccer.speccer.spacing.padding:before{content:"";position:absolute;transition:none}.ph-speccer.speccer.spacing.padding.bottom,.ph-speccer.speccer.spacing.padding.top{display:flex;justify-content:flex-start;padding-left:4px}.ph-speccer.speccer.spacing.padding.bottom:after,.ph-speccer.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);height:100%;left:calc(6ch - 5px);width:10px}.ph-speccer.speccer.spacing.padding.bottom:before,.ph-speccer.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);height:100%;left:6ch;width:0}.ph-speccer.speccer.spacing.padding.left,.ph-speccer.speccer.spacing.padding.right{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:4px}.ph-speccer.speccer.spacing.padding.left:after,.ph-speccer.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);border-right:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);height:10px;top:calc(100% - 34px);width:100%}.ph-speccer.speccer.spacing.padding.left:before,.ph-speccer.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);height:0;top:calc(100% - 29px);width:100%}.ph-speccer.speccer.spacing.margin{background-color:var(--ph-speccer-spacing-margin-color-background);color:var(--ph-speccer-spacing-margin-color)}.ph-speccer.speccer.spacing.margin.bottom,.ph-speccer.speccer.spacing.margin.top{display:flex;justify-content:flex-start;padding-left:4px}.ph-speccer.speccer.spacing.margin.left,.ph-speccer.speccer.spacing.margin.right{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:4px}.ph-speccer.speccer.spacing.margin:after,.ph-speccer.speccer.spacing.margin:before{content:"";position:absolute;transition:none}.ph-speccer.speccer.spacing.margin.bottom:after,.ph-speccer.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);height:100%;left:calc(6ch - 5px);width:10px}.ph-speccer.speccer.spacing.margin.bottom:before,.ph-speccer.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);height:100%;left:6ch;width:0}.ph-speccer.speccer.spacing.margin.left:after,.ph-speccer.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);border-right:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);height:10px;top:calc(100% - 34px);width:100%}.ph-speccer.speccer.spacing.margin.left:before,.ph-speccer.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);height:0;top:calc(100% - 29px);width:100%}.ph-speccer.speccer.spacing.bound.margin.bottom,.ph-speccer.speccer.spacing.bound.margin.left,.ph-speccer.speccer.spacing.bound.margin.right,.ph-speccer.speccer.spacing.bound.margin.top,.ph-speccer.speccer.spacing.bound.padding.bottom,.ph-speccer.speccer.spacing.bound.padding.left,.ph-speccer.speccer.spacing.bound.padding.right,.ph-speccer.speccer.spacing.bound.padding.top{align-items:center;justify-content:center;padding:0}.ph-speccer.speccer.measure{display:flex}.ph-speccer.speccer.measure.height{border-bottom:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);border-top:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.height.left:before{background:#0000;border-bottom:var(--ph-speccer-measure-line-width) solid;border-top:var(--ph-speccer-measure-line-width) solid;content:"";display:block;height:calc(100% + var(--ph-speccer-measure-line-width));left:59px;position:absolute;width:10px}.ph-speccer.speccer.measure.height.left:after{border-right:var(--ph-speccer-measure-line-width) solid;content:attr(data-measure);display:flex;height:100%;justify-content:flex-end;line-height:100%;margin-right:auto;padding-right:8px;position:static;width:64px}.ph-speccer.speccer.measure.height.right:before{background:#0000;border-bottom:var(--ph-speccer-measure-line-width) solid;border-top:var(--ph-speccer-measure-line-width) solid;content:"";display:block;height:calc(100% + var(--ph-speccer-measure-line-width));left:calc(100% - 69px);position:absolute;width:10px}.ph-speccer.speccer.measure.height.right:after{border-left:var(--ph-speccer-measure-line-width) solid;content:attr(data-measure);display:flex;height:100%;justify-content:flex-start;line-height:100%;margin-left:auto;padding-left:8px;position:static;width:64px}.ph-speccer.speccer.measure.width{align-items:center;border-left:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);border-right:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);color:var(--ph-speccer-measure-color);flex-direction:column;justify-content:flex-start}.ph-speccer.speccer.measure.width.top:before{background:#0000;border-left:var(--ph-speccer-measure-line-width) solid;border-right:var(--ph-speccer-measure-line-width) solid;content:"";display:block;height:10px;position:absolute;top:31px;width:calc(100% + var(--ph-speccer-measure-line-width))}.ph-speccer.speccer.measure.width.top:after{border-bottom:var(--ph-speccer-measure-line-width) solid;content:attr(data-measure);display:flex;flex-direction:column;height:36px;justify-content:flex-end;line-height:18px;margin-bottom:auto;padding-bottom:4px;position:static;width:100%}.ph-speccer.speccer.measure.width.bottom:before{background:#0000;border-left:var(--ph-speccer-measure-line-width) solid;border-right:var(--ph-speccer-measure-line-width) solid;content:"";display:block;height:10px;position:absolute;top:calc(100% - 41px);width:calc(100% + var(--ph-speccer-measure-line-width))}.ph-speccer.speccer.measure.width.bottom:after{border-top:var(--ph-speccer-measure-line-width) solid;content:attr(data-measure);display:flex;flex-direction:column;height:36px;justify-content:flex-start;line-height:18px;margin-top:auto;padding-top:4px;position:static;width:100%}.ph-speccer.speccer.measure.slim.height{width:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.slim.height:before{content:none!important}.ph-speccer.speccer.measure.slim.height.left{border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.slim.height.right{border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.slim.height.left:after{border:none;height:auto;left:calc(-100% - 20px - var(--ph-speccer-line-width));margin:0;padding:0;position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg);white-space:nowrap;width:auto}.ph-speccer.speccer.measure.slim.height.right:after{border:none;height:auto;left:calc(100% - var(--ph-speccer-measure-size));margin:0;padding:0;position:absolute;top:50%;transform:translateY(-50%) rotate(90deg);white-space:nowrap;width:auto}.ph-speccer.speccer.measure.slim.width{height:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.slim.width:before{content:none!important}.ph-speccer.speccer.measure.slim.width.bottom{border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.slim.width.top{border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.slim.width.top:after{border:none;bottom:calc(100% + 5px);height:auto;padding:0;position:absolute}.ph-speccer.speccer.measure.slim.width.bottom:after{border:none;height:auto;padding:0;position:absolute;top:calc(100% + 5px)}.ph-speccer.speccer.measure.slim.subtle.height.left,.ph-speccer.speccer.measure.slim.subtle.height.right,.ph-speccer.speccer.measure.slim.subtle.width.bottom,.ph-speccer.speccer.measure.slim.subtle.width.top{border-style:dashed}.ph-speccer.speccer.measure.slim.subtle.width.top{border-bottom:none}.ph-speccer.speccer.measure.slim.subtle.width.bottom{border-top:none}.ph-speccer.speccer.measure.slim.subtle.height.right{border-left:none}.ph-speccer.speccer.measure.slim.subtle.height.left{border-right:none}.ph-speccer.speccer.mark{background-color:var(--ph-speccer-mark-background-color);border-color:var(--ph-speccer-mark-border-color);border-style:var(--ph-speccer-mark-border-style);border-width:var(--ph-speccer-mark-border-width);position:absolute}
1
+ .ph-speccer.speccer{--ph-speccer-color-artificialStrawberry:#ff3aa8;--ph-speccer-color-venusSlipperOrchid:#db6fff;--ph-speccer-color-superBanana:#fff76f;--ph-speccer-color-white:#fff;--ph-speccer-color-carbon:#333;--ph-speccer-color-red:red;--ph-speccer-color-niuZaiSeDenim:#0074e8;--ph-speccer-color-beautifulBlue:#1868b2;--ph-speccer-color-fuchsiaBlue:#7e60c5;--ph-speccer-color-sangDeBoeuf:#7a1000;--ph-speccer-color-galacticPurple:#3f2f9b;--ph-speccer-base-color:var(--ph-speccer-color-artificialStrawberry);--ph-speccer-spacing-color:var(--ph-speccer-base-color);--ph-speccer-spacing-padding-color:var(--ph-speccer-color-carbon);--ph-speccer-spacing-padding-color-background:rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-margin-color:var(--ph-speccer-color-red);--ph-speccer-spacing-margin-color-background:rgb(from var(--ph-speccer-color-superBanana) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-line-width:var(--ph-speccer-line-width);--ph-speccer-typography-background-color:var(--ph-speccer-color-white);--ph-speccer-typography-color-property:var(--ph-speccer-color-niuZaiSeDenim);--ph-speccer-typography-color-text:var(--ph-speccer-base-color);--ph-speccer-typography-color-value:var(--ph-speccer-base-color);--ph-speccer-mark-background-color:rgb(from var(--ph-speccer-base-color) r g b/var(--ph-speccer-opacity-20));--ph-speccer-mark-border-color:var(--ph-speccer-base-color);--ph-speccer-mark-border-width:1.5px;--ph-speccer-mark-border-style:solid;--ph-speccer-measure-color:var(--ph-speccer-color-red);--ph-speccer-measure-line-width:1.5px;--ph-speccer-measure-border-style:dotted;--ph-speccer-measure-size:8px;--ph-speccer-a11y-color-background:var(--ph-speccer-color-beautifulBlue);--ph-speccer-a11y-landmark-color-background:var(--ph-speccer-color-fuchsiaBlue);--ph-speccer-a11y-autocomplete-color-background:var(--ph-speccer-color-sangDeBoeuf);--ph-speccer-a11y-headings-color-background:var(--ph-speccer-color-galacticPurple);--ph-speccer-color-text-light:var(--ph-speccer-color-white);--ph-speccer-color-text-dark:var(--ph-speccer-color-carbon);--ph-speccer-pin-color:var(--ph-speccer-base-color);--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-height:12px;--ph-speccer-line-width:1.5px;--ph-speccer-line-width-negative:-1.5px;--ph-speccer-opacity-20:0.2;--ph-speccer-opacity-40:0.4;--ph-speccer-font-family:"Menlo for Powerline","Menlo Regular for Powerline","DejaVu Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--ph-speccer-font-size:12px;--ph-speccer-transition-default:all 2s cubic-bezier(0.4,0,0.2,1)}.ph-speccer.speccer,.ph-speccer.speccer:after,.ph-speccer.speccer:before{font-family:var(--ph-speccer-font-family)!important;justify-content:center;align-items:center;z-index:99999;position:absolute;display:flex;font-size:12px;line-height:12px}.ph-speccer.speccer,.ph-speccer.speccer:after,.ph-speccer.speccer:before,svg.ph-speccer{pointer-events:none;user-select:none;box-sizing:border-box;margin:0;padding:0}#ph-speccer-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}svg.ph-speccer :is(.ph-speccer.circle,.ph-speccer.path){color:var(--ph-speccer-base-color,#ff3aa8)}[data-speccer=pin-area]{counter-reset:type}.ph-speccer.speccer.pin{font-family:var(--ph-speccer-font-family);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size);display:flex;border-radius:100%;color:var(--ph-speccer-color-text-light);font-weight:400;align-items:center;justify-content:center;line-height:150%;font-size:16px;z-index:100000}.ph-speccer.speccer.pin,.ph-speccer.speccer.pin:after{position:absolute;background-color:var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin:after{content:"";height:var(--ph-speccer-pin-space);top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph-speccer.speccer.pin.curly:after,.ph-speccer.speccer.pin.svg:after,.ph-speccer.speccer.pin.text:after{content:none!important}.ph-speccer.speccer.pin.top:after,.ph-speccer.speccer.pin:after{height:var(--ph-speccer-pin-space);width:var(--ph-speccer-line-width);top:100%;right:50%}.ph-speccer.speccer.pin.left:after{right:auto}.ph-speccer.speccer.pin.right:after{left:auto}.ph-speccer.speccer.pin.bottom:after{height:var(--ph-speccer-pin-space);width:var(--ph-speccer-line-width);top:calc(-100% - var(--ph-speccer-pin-space)/2);right:50%}.ph-speccer.speccer.pin.left:after{left:100%}.ph-speccer.speccer.pin.left:after,.ph-speccer.speccer.pin.right:after{height:var(--ph-speccer-line-width);width:var(--ph-speccer-pin-space);top:50%}.ph-speccer.speccer.pin.right:after{right:100%}.ph-speccer.path.speccer.text,.ph-speccer.speccer.pin.text{color:var(--ph-speccer-color-text-dark)}.ph-speccer.speccer.pin.text{font-family:var(--ph-speccer-font-family);height:auto;min-height:var(--ph-speccer-pin-size);display:flex;position:absolute;border-radius:0;background-color:initial;font-weight:400;align-items:flex-start;justify-content:center;line-height:130%;z-index:100000;flex-direction:column;width:250px;grid-gap:2px}.ph-speccer.speccer.pin.text.right{padding-left:1rem}.ph-speccer.speccer.pin.text.left{padding-right:1rem;width:170px}.ph-speccer.speccer.pin.text.top{padding-bottom:1rem}.ph-speccer.speccer.pin.text.bottom{padding-top:1rem}.ph-speccer.speccer.pin.text .ph-speccer.title{text-transform:uppercase;font-weight:500;font-size:11px}.ph-speccer.speccer.pin.text .ph-speccer.description,.ph-speccer.speccer.pin.text .ph-speccer.heading{line-height:130%;position:relative;font-weight:600;font-size:.875rem}.ph-speccer.speccer.pin.text .ph-speccer.heading{text-transform:uppercase;color:var(--ph-speccer-base-color)}.ph-speccer.speccer.pin.enclose{border-radius:0;background-color:initial;color:var(--ph-speccer-measure-color);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.enclose:after{top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));bottom:auto}.ph-speccer.speccer.pin.enclose:before{bottom:100%;top:auto}.ph-speccer.speccer.pin.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph-speccer.speccer.pin.enclose.right:before{left:100%;right:auto}.ph-speccer.speccer.pin.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph-speccer.speccer.pin.enclose.left:before{right:100%;left:auto}.ph-speccer.speccer.pin.enclose.top:after{top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));bottom:auto}.ph-speccer.speccer.pin.enclose.top:before{bottom:100%;top:auto}.ph-speccer.speccer.pin.enclose.bottom:after{top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));bottom:auto}.ph-speccer.speccer.pin.enclose.bottom:before{top:100%;bottom:auto}.ph-speccer.speccer.pin.enclose.left,.ph-speccer.speccer.pin.enclose.right{width:8px}.ph-speccer.speccer.pin.enclose,.ph-speccer.speccer.pin.enclose.bottom,.ph-speccer.speccer.pin.enclose.top{height:8px}.ph-speccer.speccer.pin.enclose.bottom:after,.ph-speccer.speccer.pin.enclose.left:after,.ph-speccer.speccer.pin.enclose.right:after,.ph-speccer.speccer.pin.enclose.top:after,.ph-speccer.speccer.pin.enclose:after{content:attr(data-pin-counter);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size);display:flex;position:absolute;border-radius:100%;background-color:var(--ph-speccer-pin-color);color:var(--ph-speccer-color-text-light);align-items:center;justify-content:center;line-height:150%;font-size:16px;z-index:100000}.ph-speccer.speccer.pin.enclose.left:after,.ph-speccer.speccer.pin.enclose.right:after{top:50%;transform:translateY(-50%)}.ph-speccer.speccer.pin.enclose.bottom:after,.ph-speccer.speccer.pin.enclose.top:after,.ph-speccer.speccer.pin.enclose:after{left:50%;transform:translateX(-50%)}.ph-speccer.speccer.pin.enclose.bottom:before,.ph-speccer.speccer.pin.enclose.left:before,.ph-speccer.speccer.pin.enclose.right:before,.ph-speccer.speccer.pin.enclose.top:before,.ph-speccer.speccer.pin.enclose:before{content:"";position:absolute;background-color:var(--ph-speccer-pin-color);z-index:100000;display:block}.ph-speccer.speccer.pin.enclose.left:before,.ph-speccer.speccer.pin.enclose.right:before{top:50%;transform:translateY(-50%);height:var(--ph-speccer-line-width);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.enclose.bottom:before,.ph-speccer.speccer.pin.enclose.top:before,.ph-speccer.speccer.pin.enclose:before{left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width);height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.bracket:not(.curly){border-radius:0;background-color:initial;color:var(--ph-speccer-measure-color);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none}.ph-speccer.speccer.pin.bracket:not(.curly):after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly):before{bottom:100%}.ph-speccer.speccer.pin.bracket:not(.curly).right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-left:none}.ph-speccer.speccer.pin.bracket:not(.curly).right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).right:before{left:100%;right:auto}.ph-speccer.speccer.pin.bracket:not(.curly).left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-right:none}.ph-speccer.speccer.pin.bracket:not(.curly).left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).left:before{right:100%;left:auto}.ph-speccer.speccer.pin.bracket:not(.curly).top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none}.ph-speccer.speccer.pin.bracket:not(.curly).top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).top:before{bottom:100%}.ph-speccer.speccer.pin.bracket:not(.curly).bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-top:none}.ph-speccer.speccer.pin.bracket:not(.curly).bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).bottom:before{top:100%}.ph-speccer.speccer.pin.bracket.left:not(.curly),.ph-speccer.speccer.pin.bracket.right:not(.curly){width:8px}.ph-speccer.speccer.pin.bracket.bottom:not(.curly),.ph-speccer.speccer.pin.bracket.top:not(.curly),.ph-speccer.speccer.pin.bracket:not(.curly){height:8px}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):after,.ph-speccer.speccer.pin.bracket.left:not(.curly):after,.ph-speccer.speccer.pin.bracket.right:not(.curly):after,.ph-speccer.speccer.pin.bracket.top:not(.curly):after,.ph-speccer.speccer.pin.bracket:not(.curly):after{content:attr(data-pin-counter);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size);display:flex;position:absolute;border-radius:100%;background-color:var(--ph-speccer-pin-color);color:var(--ph-speccer-color-text-light);align-items:center;justify-content:center;line-height:150%;font-size:16px;z-index:100000}.ph-speccer.speccer.pin.bracket.left:not(.curly):after,.ph-speccer.speccer.pin.bracket.right:not(.curly):after{top:50%;transform:translateY(-50%)}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):after,.ph-speccer.speccer.pin.bracket.top:not(.curly):after,.ph-speccer.speccer.pin.bracket:not(.curly):after{left:50%;transform:translateX(-50%)}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):before,.ph-speccer.speccer.pin.bracket.left:not(.curly):before,.ph-speccer.speccer.pin.bracket.right:not(.curly):before,.ph-speccer.speccer.pin.bracket.top:not(.curly):before,.ph-speccer.speccer.pin.bracket:not(.curly):before{content:"";position:absolute;background-color:var(--ph-speccer-pin-color);z-index:100000;display:block}.ph-speccer.speccer.pin.bracket.left:not(.curly):before,.ph-speccer.speccer.pin.bracket.right:not(.curly):before{top:50%;transform:translateY(-50%);height:var(--ph-speccer-line-width);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):before,.ph-speccer.speccer.pin.bracket.top:not(.curly):before,.ph-speccer.speccer.pin.bracket:not(.curly):before{left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width);height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.subtle{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);background-color:var(--ph-speccer-color-text-light);color:var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.subtle.bottom:after,.ph-speccer.speccer.pin.subtle.top:after{width:0;background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.subtle.left:after,.ph-speccer.speccer.pin.subtle.right:after{height:0;background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.enclose.subtle{background-color:initial}.ph-speccer.speccer.pin.bracket.subtle:not(.curly){background-color:initial}.ph-speccer.speccer.pin.bracket.subtle:not(.curly),.ph-speccer.speccer.pin.bracket.subtle:not(.curly).top{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-bottom:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-top:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).right{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-left:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).left{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-right:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly):after{height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);background-color:var(--ph-speccer-color-text-light);color:var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom:before,.ph-speccer.speccer.pin.bracket.subtle:not(.curly).top:before{width:0;background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).left:before,.ph-speccer.speccer.pin.bracket.subtle:not(.curly).right:before{height:0;background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.enclose.subtle{border-style:dashed}.ph-speccer.speccer.pin.enclose.subtle:after{height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);background-color:var(--ph-speccer-color-text-light);color:var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.enclose.subtle.bottom:before,.ph-speccer.speccer.pin.enclose.subtle.top:before{width:0;background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.enclose.subtle.left:before,.ph-speccer.speccer.pin.enclose.subtle.right:before{height:0;background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph-speccer.speccer.a11y.landmark{position:absolute;background-color:var(--ph-speccer-a11y-landmark-color-background);color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);justify-content:center;font-size:12px;height:28px;line-height:28px;align-items:center;padding:0 .5rem;pointer-events:auto}.ph-speccer.speccer.a11y.landmark:after{content:"";height:0;width:0;position:absolute;pointer-events:none;border:14.2px solid #7e60c500}.ph-speccer.speccer.a11y.landmark.left:after,.ph-speccer.speccer.a11y.landmark:after{top:50%;left:100%;border-left-color:var(--ph-speccer-a11y-landmark-color-background);transform:translateY(-50%)}.ph-speccer.speccer.a11y.landmark.top:after{top:0;left:50%;border-bottom-color:var(--ph-speccer-a11y-landmark-color-background);transform:translateX(-50%)}.ph-speccer.speccer.a11y.landmark.right:after{top:50%;left:0;border-right-color:var(--ph-speccer-a11y-landmark-color-background);transform:translateY(-50%)}.ph-speccer.speccer.a11y.landmark.bottom:after{top:0;left:50%;border-top-color:var(--ph-speccer-a11y-landmark-color-background);transform:translateX(-50%)}.ph-speccer.speccer.a11y.region{position:absolute;outline:2px solid var(--ph-speccer-a11y-landmark-color-background);outline-offset:2px}.ph-speccer.speccer.a11y.tabstops{position:absolute;font-family:var(--ph-speccer-font-family);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size);background-color:var(--ph-speccer-a11y-color-background);border-radius:50%;color:var(--ph-speccer-color-text-light);font-weight:400;align-items:center;justify-content:center;line-height:150%;font-size:16px;display:flex}.ph-speccer.speccer.a11y.tabstops:before{position:static;content:attr(data-speccer-a11y-tabstops);text-align:center}.ph-speccer.speccer.a11y.shortcut-holder{position:absolute;min-width:120px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;grid-gap:.5rem}.ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut{flex-shrink:0;position:relative;background-color:var(--ph-speccer-a11y-color-background);border-radius:.5rem;display:inline-flex;text-transform:uppercase;border:1pt solid var(--ph-speccer-a11y-color-background);font-size:.875rem;font-weight:500;line-height:1.25rem;padding:.5rem .75rem;text-transform:lowercase}.ph-speccer.speccer.a11y.autocomplete,.ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut{color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);justify-content:center;align-items:center}.ph-speccer.speccer.a11y.autocomplete{position:absolute;background-color:var(--ph-speccer-a11y-autocomplete-color-background);font-size:12px;height:28px;line-height:28px;padding:0 .5rem;pointer-events:auto}.ph-speccer.speccer.a11y.autocomplete:after{content:"";height:0;width:0;position:absolute;pointer-events:none;border:14.2px solid #7e60c500}.ph-speccer.speccer.a11y.autocomplete.left:after,.ph-speccer.speccer.a11y.autocomplete:after{top:50%;left:100%;border-left-color:var(--ph-speccer-a11y-autocomplete-color-background);transform:translateY(-50%)}.ph-speccer.speccer.a11y.autocomplete.top:after{top:0;left:50%;border-bottom-color:var(--ph-speccer-a11y-autocomplete-color-background);transform:translateX(-50%)}.ph-speccer.speccer.a11y.autocomplete.right:after{top:50%;left:0;border-right-color:var(--ph-speccer-a11y-autocomplete-color-background);transform:translateY(-50%)}.ph-speccer.speccer.a11y.autocomplete.bottom:after{top:0;left:50%;border-top-color:var(--ph-speccer-a11y-autocomplete-color-background);transform:translateX(-50%)}.ph-speccer.speccer.a11y.headings{position:absolute;background-color:var(--ph-speccer-a11y-headings-color-background);color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);justify-content:center;font-size:12px;height:28px;line-height:28px;align-items:center;padding:0 .5rem;pointer-events:auto}.ph-speccer.speccer.a11y.headings:after{content:"";height:0;width:0;position:absolute;pointer-events:none;border:14.2px solid #7e60c500}.ph-speccer.speccer.a11y.headings.left:after,.ph-speccer.speccer.a11y.headings:after{top:50%;left:100%;border-left-color:var(--ph-speccer-a11y-headings-color-background);transform:translateY(-50%)}.ph-speccer.speccer.a11y.headings.top:after{top:0;left:50%;border-bottom-color:var(--ph-speccer-a11y-headings-color-background);transform:translateX(-50%)}.ph-speccer.speccer.a11y.headings.right:after{top:50%;left:0;border-right-color:var(--ph-speccer-a11y-headings-color-background);transform:translateY(-50%)}.ph-speccer.speccer.a11y.headings.bottom:after{top:0;left:50%;border-top-color:var(--ph-speccer-a11y-headings-color-background);transform:translateX(-50%)}.ph-speccer.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);font-size:10px;padding:8px;max-width:320px;width:auto;display:block;text-align:left;line-height:140%}.ph-speccer.speccer.typography,.ph-speccer.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph-speccer.speccer.typography:after{content:"";position:absolute;display:block;background-color:var(--ph-speccer-pin-color)}.ph-speccer.speccer.typography.left:after,.ph-speccer.speccer.typography:after{left:100%;top:50%;transform:translateY(-50%);height:var(--ph-speccer-line-width);width:var(--ph-speccer-pin-space)}.ph-speccer.speccer.typography.right:after{left:auto;right:100%;top:50%;transform:translateY(-50%);height:var(--ph-speccer-line-width);width:var(--ph-speccer-pin-space)}.ph-speccer.speccer.typography.top:after{top:100%}.ph-speccer.speccer.typography.bottom:after,.ph-speccer.speccer.typography.top:after{left:50%;right:auto;transform:translateX(-50%);height:var(--ph-speccer-pin-space);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.typography.bottom:after{top:auto;bottom:100%}.ph-speccer.speccer.typography .speccer-styles{list-style:none;width:100%;margin:0;line-height:140%;padding:0 0 0 8px;font-size:10px}.ph-speccer.speccer.typography .speccer-styles .property{font-weight:400;color:var(--ph-speccer-typography-color-property);text-align:left;padding:0;font-size:10px;margin:0}.ph-speccer.speccer.typography .speccer-styles>li{font-weight:400;color:var(--ph-speccer-typography-color-value);text-align:left;padding:0;font-size:10px;margin:0;list-style:none;border:none}.ph-speccer.speccer.typography.syntax>pre{margin:0;padding:0;font-size:12px;line-height:1.5;font-family:var(--ph-speccer-font-family);color:var(--ph-speccer-color-text-light);background:#0000;border-radius:0}.ph-speccer.speccer.typography.syntax{--ph-speccer-color-code-color-1:#737373;--ph-speccer-color-code-color-2:#ff3aa8;--ph-speccer-color-code-color-3:#38383d;--ph-speccer-color-code-color-4:#ff3aa8;--ph-speccer-color-code-color-5:#ff3aa8;--ph-speccer-color-code-color-6:#0074e8;--ph-speccer-color-code-color-7:#000;--ph-speccer-color-code-color-8:#cd0404}.ph-speccer.speccer.typography.syntax .namespace{opacity:.7}.ph-speccer.speccer.typography.syntax :is(.token.cdata,.token.comment,.token.doctype,.token.prolog){color:var(--ph-speccer-color-code-color-1)}.ph-speccer.speccer.typography.syntax :is(.token.boolean,.token.null,.token.number,.token.operator){color:var(--ph-speccer-color-code-color-5)}.ph-speccer.speccer.typography.syntax .token.attr-name{color:var(--ph-speccer-color-code-color-2)}.ph-speccer.speccer.typography.syntax .token.selector,.ph-speccer.speccer.typography.syntax :is(.token.entity,.token.string,.token.url){color:var(--ph-speccer-color-code-color-3)}.ph-speccer.speccer.typography.syntax :is(.token.atrule,.token.attr-value,.token.control,.token.directive,.token.important,.token.keyword,.token.unit){color:var(--ph-speccer-color-code-color-4)}.ph-speccer.speccer.typography.syntax :is(.token.regex,.token.statement){color:var(--ph-speccer-color-code-color-3)}.ph-speccer.speccer.typography.syntax :is(.token.placeholder,.token.variable),.ph-speccer.speccer.typography.syntax :is(.token.property,.token.tag){color:var(--ph-speccer-color-code-color-6)}.ph-speccer.speccer.typography.syntax :is(.token.important,.token.statement){font-weight:700}.ph-speccer.speccer.typography.syntax .token.punctuation{color:var(--ph-speccer-color-code-color-7)}.ph-speccer.speccer.typography.syntax .token.entity{cursor:help}.ph-speccer.speccer.typography.syntax .token.debug{color:var(--ph-speccer-color-code-color-8)}.ph-speccer.speccer.speccer-grid-container{counter-reset:column-gap;column-gap:var(--ph-speccer-grid-gap-original)}.ph-speccer.speccer.speccer-grid-container,.ph-speccer.speccer.speccer-grid-row-container{justify-content:normal;transition:var(--ph-speccer-transition-default);display:grid;position:absolute}.ph-speccer.speccer.speccer-grid-row-container{counter-reset:row-gap;row-gap:var(--ph-speccer-grid-row-gap-original)}.ph-speccer.speccer.speccer-grid-item{transition:var(--ph-speccer-transition-default);position:relative;height:100%;border-left:1px solid var(--ph-speccer-base-color);border-right:1px solid var(--ph-speccer-base-color)}.ph-speccer.speccer.speccer-grid-row-item{transition:var(--ph-speccer-transition-default);position:relative;height:100%;border-top:1px solid var(--ph-speccer-base-color);border-bottom:1px solid var(--ph-speccer-base-color);width:100%}.ph-speccer.speccer.speccer-grid-item:before{counter-increment:column-gap;content:counter(column-gap);top:-32px;left:100%;height:32px;width:calc(var(--ph-speccer-grid-gap) + 2px);border-top-right-radius:50%}.ph-speccer.speccer.speccer-grid-item:before,.ph-speccer.speccer.speccer-grid-row-item:before{transition:var(--ph-speccer-transition-default);font-family:var(--ph-speccer-font-family)!important;font-size:16px;position:absolute;background-color:var(--ph-speccer-base-color);display:flex;justify-content:center;align-items:center;color:var(--ph-speccer-color-text-light);border-top-left-radius:50%}.ph-speccer.speccer.speccer-grid-row-item:before{counter-increment:row-gap;content:counter(row-gap);left:-32px;top:100%;width:32px;height:calc(var(--ph-speccer-grid-row-gap) + 2px);border-bottom-left-radius:50%}.ph-speccer.speccer.speccer-grid-item:first-child:after{counter-increment:column-gap;content:counter(column-gap);top:-32px;left:100%;height:32px;width:calc(var(--ph-speccer-grid-gap) + 2px);border-top-right-radius:50%}.ph-speccer.speccer.speccer-grid-item:first-child:after,.ph-speccer.speccer.speccer-grid-row-item:first-child:after{transition:var(--ph-speccer-transition-default);font-family:var(--ph-speccer-font-family)!important;font-size:16px;position:absolute;background-color:var(--ph-speccer-base-color);display:flex;justify-content:center;align-items:center;color:var(--ph-speccer-color-text-light);border-top-left-radius:50%}.ph-speccer.speccer.speccer-grid-row-item:first-child:after{counter-increment:row-gap;content:counter(row-gap);left:-32px;top:100%;width:32px;height:calc(var(--ph-speccer-grid-row-gap) + 2px);border-bottom-left-radius:50%}.ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item:before,.ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item:first-child:after{left:calc(100% - (var(--ph-speccer-grid-gap) - var(--ph-speccer-grid-gap-original))/2)}.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item:before,.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item:first-child:after{top:calc(100% - (var(--ph-speccer-grid-row-gap) - var(--ph-speccer-grid-row-gap-original))/2)}.ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:first-child:before{position:absolute;top:-32px;right:auto;left:calc((var(--ph-speccer-grid-gap) + 2px)/2*-1)}.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:first-child:before{position:absolute;left:-32px;bottom:auto;top:calc((var(--ph-speccer-grid-row-gap) + 2px)/2*-1)}.ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:last-child:before{position:absolute;top:-32px;left:auto;right:calc((var(--ph-speccer-grid-gap) + 2px)/2*-1)}.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:last-child:before{position:absolute;left:-32px;top:auto;bottom:calc((var(--ph-speccer-grid-row-gap) + 2px)/2*-1)}.ph-speccer.speccer.spacing{pointer-events:none;transition:none;white-space:nowrap}.ph-speccer.speccer.spacing.padding{background-color:var(--ph-speccer-spacing-padding-color-background);color:var(--ph-speccer-spacing-padding-color)}.ph-speccer.speccer.spacing.padding:after,.ph-speccer.speccer.spacing.padding:before{transition:none;content:"";position:absolute}.ph-speccer.speccer.spacing.padding.bottom,.ph-speccer.speccer.spacing.padding.top{display:flex;justify-content:flex-start;padding-left:4px}.ph-speccer.speccer.spacing.padding.bottom:after,.ph-speccer.speccer.spacing.padding.top:after{left:calc(6ch - 5px);height:100%;width:10px;border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);border-bottom:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color)}.ph-speccer.speccer.spacing.padding.bottom:before,.ph-speccer.speccer.spacing.padding.top:before{left:6ch;height:100%;border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);width:0}.ph-speccer.speccer.spacing.padding.left,.ph-speccer.speccer.spacing.padding.right{display:flex;justify-content:flex-end;flex-direction:column;padding-bottom:4px}.ph-speccer.speccer.spacing.padding.left:after,.ph-speccer.speccer.spacing.padding.right:after{top:calc(100% - 34px);height:10px;width:100%;border-right:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color)}.ph-speccer.speccer.spacing.padding.left:before,.ph-speccer.speccer.spacing.padding.right:before{top:calc(100% - 29px);height:0;border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);width:100%}.ph-speccer.speccer.spacing.margin{background-color:var(--ph-speccer-spacing-margin-color-background);color:var(--ph-speccer-spacing-margin-color)}.ph-speccer.speccer.spacing.margin.bottom,.ph-speccer.speccer.spacing.margin.top{display:flex;justify-content:flex-start;padding-left:4px}.ph-speccer.speccer.spacing.margin.left,.ph-speccer.speccer.spacing.margin.right{display:flex;justify-content:flex-end;flex-direction:column;padding-bottom:4px}.ph-speccer.speccer.spacing.margin:after,.ph-speccer.speccer.spacing.margin:before{transition:none;content:"";position:absolute}.ph-speccer.speccer.spacing.margin.bottom:after,.ph-speccer.speccer.spacing.margin.top:after{left:calc(6ch - 5px);height:100%;width:10px;border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);border-bottom:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color)}.ph-speccer.speccer.spacing.margin.bottom:before,.ph-speccer.speccer.spacing.margin.top:before{left:6ch;height:100%;border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);width:0}.ph-speccer.speccer.spacing.margin.left:after,.ph-speccer.speccer.spacing.margin.right:after{height:10px;border-right:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);width:100%;top:calc(100% - 34px)}.ph-speccer.speccer.spacing.margin.left:before,.ph-speccer.speccer.spacing.margin.right:before{height:0;border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);width:100%;top:calc(100% - 29px)}.ph-speccer.speccer.spacing.bound.margin.bottom,.ph-speccer.speccer.spacing.bound.margin.left,.ph-speccer.speccer.spacing.bound.margin.right,.ph-speccer.speccer.spacing.bound.margin.top,.ph-speccer.speccer.spacing.bound.padding.bottom,.ph-speccer.speccer.spacing.bound.padding.left,.ph-speccer.speccer.spacing.bound.padding.right,.ph-speccer.speccer.spacing.bound.padding.top{justify-content:center;align-items:center;padding:0}.ph-speccer.speccer.measure{display:flex}.ph-speccer.speccer.measure.height{color:var(--ph-speccer-measure-color);border-top:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);border-bottom:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style)}.ph-speccer.speccer.measure.height.left:before{content:"";display:block;height:calc(100% + var(--ph-speccer-measure-line-width));background:#0000;position:absolute;left:59px;width:10px;border-top:var(--ph-speccer-measure-line-width) solid;border-bottom:var(--ph-speccer-measure-line-width) solid}.ph-speccer.speccer.measure.height.left:after{position:static;content:attr(data-measure);display:flex;width:64px;height:100%;line-height:100%;margin-right:auto;border-right:var(--ph-speccer-measure-line-width) solid;justify-content:flex-end;padding-right:8px}.ph-speccer.speccer.measure.height.right:before{content:"";display:block;height:calc(100% + var(--ph-speccer-measure-line-width));background:#0000;position:absolute;left:calc(100% - 69px);width:10px;border-top:var(--ph-speccer-measure-line-width) solid;border-bottom:var(--ph-speccer-measure-line-width) solid}.ph-speccer.speccer.measure.height.right:after{position:static;content:attr(data-measure);display:flex;width:64px;height:100%;line-height:100%;margin-left:auto;border-left:var(--ph-speccer-measure-line-width) solid;justify-content:flex-start;padding-left:8px}.ph-speccer.speccer.measure.width{flex-direction:column;align-items:center;justify-content:flex-start;color:var(--ph-speccer-measure-color);border-left:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);border-right:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style)}.ph-speccer.speccer.measure.width.top:before{content:"";display:block;width:calc(100% + var(--ph-speccer-measure-line-width));background:#0000;position:absolute;top:31px;height:10px;border-left:var(--ph-speccer-measure-line-width) solid;border-right:var(--ph-speccer-measure-line-width) solid}.ph-speccer.speccer.measure.width.top:after{position:static;content:attr(data-measure);display:flex;flex-direction:column;height:36px;width:100%;line-height:18px;margin-bottom:auto;border-bottom:var(--ph-speccer-measure-line-width) solid;justify-content:flex-end;padding-bottom:4px}.ph-speccer.speccer.measure.width.bottom:before{content:"";display:block;width:calc(100% + var(--ph-speccer-measure-line-width));background:#0000;position:absolute;top:calc(100% - 41px);height:10px;border-left:var(--ph-speccer-measure-line-width) solid;border-right:var(--ph-speccer-measure-line-width) solid}.ph-speccer.speccer.measure.width.bottom:after{position:static;content:attr(data-measure);display:flex;height:36px;width:100%;line-height:18px;margin-top:auto;flex-direction:column;border-top:var(--ph-speccer-measure-line-width) solid;justify-content:flex-start;padding-top:4px}.ph-speccer.speccer.measure.slim.height{width:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.slim.height:before{content:none!important}.ph-speccer.speccer.measure.slim.height.left{color:var(--ph-speccer-measure-color);border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-right:none}.ph-speccer.speccer.measure.slim.height.right{color:var(--ph-speccer-measure-color);border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-left:none}.ph-speccer.speccer.measure.slim.height.left:after{position:absolute;top:50%;width:auto;height:auto;margin:0;white-space:nowrap;padding:0;border:none;left:calc(-100% - 20px - var(--ph-speccer-line-width));transform:translateY(-50%) rotate(-90deg)}.ph-speccer.speccer.measure.slim.height.right:after{position:absolute;width:auto;height:auto;border:none;padding:0;margin:0;top:50%;white-space:nowrap;left:calc(100% - var(--ph-speccer-measure-size));transform:translateY(-50%) rotate(90deg)}.ph-speccer.speccer.measure.slim.width{height:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.slim.width:before{content:none!important}.ph-speccer.speccer.measure.slim.width.bottom{color:var(--ph-speccer-measure-color);border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-top:none}.ph-speccer.speccer.measure.slim.width.top{color:var(--ph-speccer-measure-color);border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-bottom:none}.ph-speccer.speccer.measure.slim.width.top:after{position:absolute;bottom:calc(100% + 5px);padding:0;border:none;height:auto}.ph-speccer.speccer.measure.slim.width.bottom:after{position:absolute;top:calc(100% + 5px);padding:0;border:none;height:auto}.ph-speccer.speccer.measure.slim.subtle.height.left,.ph-speccer.speccer.measure.slim.subtle.height.right,.ph-speccer.speccer.measure.slim.subtle.width.bottom,.ph-speccer.speccer.measure.slim.subtle.width.top{border-style:dashed}.ph-speccer.speccer.measure.slim.subtle.width.top{border-bottom:none}.ph-speccer.speccer.measure.slim.subtle.width.bottom{border-top:none}.ph-speccer.speccer.measure.slim.subtle.height.right{border-left:none}.ph-speccer.speccer.measure.slim.subtle.height.left{border-right:none}.ph-speccer.speccer.mark{background-color:var(--ph-speccer-mark-background-color);border-color:var(--ph-speccer-mark-border-color);border-width:var(--ph-speccer-mark-border-width);border-style:var(--ph-speccer-mark-border-style);position:absolute}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phun-ky/speccer",
3
- "version": "11.3.50",
3
+ "version": "11.3.51",
4
4
  "description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
5
5
  "keywords": [
6
6
  "a11y",
@@ -91,15 +91,15 @@
91
91
  },
92
92
  "devDependencies": {
93
93
  "@playwright/test": "^1.50.1",
94
- "@release-it/conventional-changelog": "^10.0.0",
94
+ "@release-it/conventional-changelog": "^11.0.0",
95
95
  "@rollup/plugin-node-resolve": "^16.0.0",
96
- "@rollup/plugin-terser": "^0.4.4",
96
+ "@rollup/plugin-terser": "^1.0.0",
97
97
  "@testing-library/dom": "^10.4.0",
98
98
  "@testing-library/jest-dom": "^6.4.2",
99
99
  "@types/jsdom": "^28.0.0",
100
100
  "@types/node": "^25.0.3",
101
101
  "cobertura": "^1.0.1",
102
- "cssnano": "^7.0.6",
102
+ "cssnano": "^8.0.1",
103
103
  "eslint": "^10.0.0",
104
104
  "eslint-config-phun-ky": "^2.0.0",
105
105
  "git-cz": "^4.9.0",
@@ -112,7 +112,7 @@
112
112
  "prettier": "^3.8.0",
113
113
  "putout": "^42.0.3",
114
114
  "quibble": "^0.9.1",
115
- "release-it": "^19.0.1",
115
+ "release-it": "^20.0.1",
116
116
  "remark-github": "^12.0.0",
117
117
  "remark-toc": "^9.0.0",
118
118
  "rollup": "^4.12.0",
@@ -130,7 +130,7 @@
130
130
  "typedoc-plugin-remark": "^2.0.0",
131
131
  "typedoc-plugin-rename-defaults": "^0.7.1",
132
132
  "typedoc-vitepress-theme": "^1.1.2",
133
- "typescript": "^5.7.3",
133
+ "typescript": "^6.0.3",
134
134
  "unified-prettier": "^2.0.1",
135
135
  "vitepress": "^1.6.4",
136
136
  "vitepress-plugin-group-icons": "^1.6.3"