vanilla-breeze 0.1.1 → 0.1.2

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 (72) hide show
  1. package/dist/cdn/components/analytics-panel.js +34 -0
  2. package/dist/cdn/components/author-index.js +3 -0
  3. package/dist/cdn/components/brand-mark.js +2 -0
  4. package/dist/cdn/components/carousel-wc.js +1 -1
  5. package/dist/cdn/components/color-palette.js +13 -7
  6. package/dist/cdn/components/comment-wc.js +2 -0
  7. package/dist/cdn/components/consent-banner.js +1 -1
  8. package/dist/cdn/components/content-lens.js +2 -0
  9. package/dist/cdn/components/font-pairer.js +108 -0
  10. package/dist/cdn/components/geo-map.js +7 -7
  11. package/dist/cdn/components/gradient-builder.js +52 -0
  12. package/dist/cdn/components/highlight-wc.js +3 -0
  13. package/dist/cdn/components/manifest.json +93 -21
  14. package/dist/cdn/components/markdown-viewer.js +3 -3
  15. package/dist/cdn/components/motion-specimen.js +21 -0
  16. package/dist/cdn/components/note-wc.js +3 -0
  17. package/dist/cdn/components/notification-wc.js +37 -0
  18. package/dist/cdn/components/page-info.js +55 -24
  19. package/dist/cdn/components/page-toc.js +1 -1
  20. package/dist/cdn/components/popularity-index.js +9 -0
  21. package/dist/cdn/components/print-page.js +1 -1
  22. package/dist/cdn/components/recently-visited.js +3 -0
  23. package/dist/cdn/components/review-surface.js +11 -11
  24. package/dist/cdn/components/selection-menu.js +2 -0
  25. package/dist/cdn/components/semantic-palette.js +30 -0
  26. package/dist/cdn/components/settings-panel.js +55 -51
  27. package/dist/cdn/components/share-wc.js +2 -2
  28. package/dist/cdn/components/spacing-specimen.js +5 -5
  29. package/dist/cdn/components/split-surface.js +1 -1
  30. package/dist/cdn/components/text-reader.js +2 -2
  31. package/dist/cdn/components/theme-export.js +18 -0
  32. package/dist/cdn/components/theme-picker.js +58 -58
  33. package/dist/cdn/components/token-specimen.js +25 -20
  34. package/dist/cdn/components/topic-map.js +3 -0
  35. package/dist/cdn/components/trust-filter.js +4 -0
  36. package/dist/cdn/components/type-specimen.js +16 -13
  37. package/dist/cdn/components/watch-wc.js +3 -0
  38. package/dist/cdn/packs/design-system.full.js +124 -47
  39. package/dist/cdn/packs/effects.full.js +1 -1
  40. package/dist/cdn/packs/kawaii.full.css +1 -1
  41. package/dist/cdn/packs/kawaii.full.js +1 -1
  42. package/dist/cdn/packs/kawaii.theme.css +1 -1
  43. package/dist/cdn/packs/manifest.json +8 -38
  44. package/dist/cdn/packs/ui.full.css +1 -1
  45. package/dist/cdn/packs/ui.full.js +50 -50
  46. package/dist/cdn/packs/ux-planning.full.js +36 -36
  47. package/dist/cdn/themes/alpha1999.css +1 -1
  48. package/dist/cdn/themes/brutalist.css +1 -1
  49. package/dist/cdn/themes/claymorphism.css +1 -1
  50. package/dist/cdn/themes/genai.css +1 -1
  51. package/dist/cdn/themes/kawaii.css +1 -1
  52. package/dist/cdn/themes/magna.css +1 -1
  53. package/dist/cdn/themes/manifest.json +12 -12
  54. package/dist/cdn/themes/nes.css +1 -1
  55. package/dist/cdn/themes/neumorphism.css +1 -1
  56. package/dist/cdn/themes/rough.css +1 -1
  57. package/dist/cdn/themes/startup.css +1 -1
  58. package/dist/cdn/themes/super2026.css +1 -1
  59. package/dist/cdn/themes/win9x.css +1 -1
  60. package/dist/cdn/vanilla-breeze-core.css +1 -1
  61. package/dist/cdn/vanilla-breeze-core.js +119 -47
  62. package/dist/cdn/vanilla-breeze-extras.js +154 -74
  63. package/dist/cdn/vanilla-breeze.css +1 -1
  64. package/dist/cdn/vanilla-breeze.js +605 -249
  65. package/package.json +8 -6
  66. package/dist/cdn/packs/retro.bundle.js +0 -2
  67. package/dist/cdn/packs/retro.components.js +0 -1
  68. package/dist/cdn/packs/retro.effects.css +0 -2
  69. package/dist/cdn/packs/retro.effects.js +0 -16
  70. package/dist/cdn/packs/retro.full.css +0 -5
  71. package/dist/cdn/packs/retro.full.js +0 -16
  72. package/dist/cdn/packs/retro.theme.css +0 -2
@@ -0,0 +1,34 @@
1
+ var y=window.matchMedia("(prefers-reduced-motion: reduce)");var u=new Map;function p(s,t,e={}){let n=e.priority??10,a={impl:t,bundle:e.bundle,contract:e.contract,priority:n},o=u.get(s);if(customElements.get(s)){if(!o||o.priority>=n){o&&o.priority===n&&o.impl!==t&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${o.bundle}" (priority ${o.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${s}> defined by "${o.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(o&&o.priority>=n){o.priority===n&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${o.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}u.set(s,a),customElements.define(s,t)}var l=class extends HTMLElement{#t=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#t)t();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,n,a){t.addEventListener(e,n,a),this.#t.push(()=>t.removeEventListener(e,n,a))}setup(){}teardown(){}};var i={optout:"vb_optout",sessionCount:"vb_sc",eventQueue:"vb_q"};function h(s){return String(s).replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[t])}function f(s){return typeof s!="number"||s<=0?"\u2014":s<6e4?`${Math.round(s/1e3)}s`:`${Math.floor(s/6e4)}m ${Math.round(s%6e4/1e3)}s`}var d=class extends l{setup(){this.#e(),this.listen(this,"click",this.#t)}get isOptedOut(){try{return sessionStorage.getItem(i.optout)==="1"}catch{return!1}}get sessionCounter(){try{let t=sessionStorage.getItem(i.sessionCount);return t?JSON.parse(t):null}catch{return null}}get queuedEvents(){try{let t=sessionStorage.getItem(i.eventQueue);return t?JSON.parse(t):[]}catch{return[]}}get hasSessionData(){return this.sessionCounter!=null||this.queuedEvents.length>0}#t=t=>{let e=t.target?.closest?.("[data-analytics-action]");if(!e||!this.contains(e))return;let n=e.dataset.analyticsAction;n==="clear"&&this.#s(),n==="optout"&&this.#n(),n==="refresh"&&this.#e()};#s(){try{sessionStorage.removeItem(i.sessionCount),sessionStorage.removeItem(i.eventQueue)}catch{}this.dispatchEvent(new CustomEvent("analytics-panel:cleared",{bubbles:!0,composed:!0})),this.#e()}#n(){let t=!this.isOptedOut;try{t?sessionStorage.setItem(i.optout,"1"):sessionStorage.removeItem(i.optout)}catch{}this.dispatchEvent(new CustomEvent(t?"analytics-panel:optout":"analytics-panel:optin",{bubbles:!0,composed:!0})),t?this.#s():this.#e()}#e(){let t=this.getAttribute("title")||"Analytics data",e=this.isOptedOut,n=this.hasSessionData;this.innerHTML=`
2
+ <header class="analytics-panel__header">
3
+ <h3>${h(t)}</h3>
4
+ <p class="analytics-panel__status" role="status">
5
+ <span class="analytics-panel__dot analytics-panel__dot--${e?"paused":"active"}" aria-hidden="true"></span>
6
+ ${e?"Analytics paused for this tab. No data is being collected.":"Analytics active. Only aggregate, device-scoped data is collected."}
7
+ </p>
8
+ </header>
9
+
10
+ <section class="analytics-panel__body">
11
+ <h4>Stored on this device (this session only)</h4>
12
+ ${this.#o()}
13
+ </section>
14
+
15
+ <footer class="analytics-panel__actions">
16
+ ${n?`
17
+ <button type="button" data-analytics-action="clear" class="analytics-panel__action analytics-panel__action--danger">
18
+ Clear my data
19
+ </button>
20
+ `:""}
21
+ <button type="button" data-analytics-action="optout" class="analytics-panel__action analytics-panel__action--toggle">
22
+ ${e?"Resume analytics":"Pause analytics"}
23
+ </button>
24
+ <button type="button" data-analytics-action="refresh" class="analytics-panel__action">
25
+ Refresh
26
+ </button>
27
+ </footer>
28
+
29
+ <p class="analytics-panel__note">
30
+ No cookies, no cross-site identifiers, no IP address stored.
31
+ Data is cleared automatically when you close this tab.
32
+ </p>
33
+ `}#o(){if(!this.hasSessionData)return'<p class="analytics-panel__empty">No data stored on this device in this session.</p>';let t=this.sessionCounter,e=this.queuedEvents,n=e.find(c=>c?.id==="__scroll"),a=e.find(c=>c?.id==="__attention"),o=e.filter(c=>!c?.id?.startsWith?.("__")).length,r=[];return t?.v!=null&&r.push(`<dt>Pages this session</dt><dd>${t.v}</dd>`),n&&r.push(`<dt>Max scroll depth</dt><dd>${n.params?.depth??"?"}%</dd>`),a&&r.push(`<dt>Active reading time</dt><dd>${f(a.params?.ms)}</dd>`),o>0&&r.push(`<dt>Queued events</dt><dd>${o}</dd>`),`<dl class="analytics-panel__data">${r.join("")}</dl>`}};p("analytics-panel",d);
34
+ //# sourceMappingURL=analytics-panel.js.map
@@ -0,0 +1,3 @@
1
+ var y=window.matchMedia("(prefers-reduced-motion: reduce)");var g=new Map;function b(s,t,e={}){let n=e.priority??10,o={impl:t,bundle:e.bundle,contract:e.contract,priority:n},r=g.get(s);if(customElements.get(s)){if(!r||r.priority>=n){r&&r.priority===n&&r.impl!==t&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${s}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=n){r.priority===n&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${r.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}g.set(s,o),customElements.define(s,t)}var d=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,n,o){t.addEventListener(e,n,o),this.#e.push(()=>t.removeEventListener(e,n,o))}setup(){}teardown(){}};var f=class extends d{setup(){let t=this.getAttribute("data-lens-src")||this.getAttribute("src");t?this.#e(t).catch(()=>{}):this.#t()}async#e(t){let e;try{let o=await fetch(t);if(!o.ok)throw new Error(`status ${o.status}`);e=await o.json()}catch(o){this.#n(`Could not load ${t}: ${o.message}`);return}let n=Array.isArray(e)?e:e.pages||[];this.#r(n),this.#t()}#r(t){let e=new Map;for(let c of t){let i=c.author?.trim()||"Unknown";e.has(i)||e.set(i,[]),e.get(i).push(c)}let n=this.getAttribute("sort")||"alpha",o=[...e.entries()].sort(([c,i],[u,p])=>n==="count"?p.length-i.length:c.localeCompare(u)),r=[`<h2 class="author-index-heading">Authors <small>(${o.length})</small></h2>`];for(let[c,i]of o){let u=i[0],p=c.toLowerCase().replace(/[^a-z0-9]+/g,"-");r.push(`<details data-author-group id="author-${p}">`),r.push(`<summary><span class="author-name">${l(c)}</span> <span class="author-count">${i.length}</span></summary>`),u.authorUrl&&r.push(`<p class="author-link"><a href="${h(u.authorUrl)}" rel="author">View ${l(c)}'s profile</a></p>`),r.push('<ul class="author-pages">');for(let a of i){let m=[a.modified?`<time datetime="${h(a.modified)}">${l(a.modified)}</time>`:"",a.provenance?`<span class="author-prov" data-provenance="${h(a.provenance)}">${l(a.provenance)}</span>`:"",a.signed?'<span class="author-signed" title="Cryptographically signed">signed</span>':""].filter(Boolean).join(" \xB7 ");r.push(`<li><a href="${h(a.url)}">${l(a.title||a.url)}</a>${m?`<small>${m}</small>`:""}</li>`)}r.push("</ul></details>")}this.innerHTML=r.join(`
2
+ `)}#n(t){if(this.children.length>0)return;let e=document.createElement("p");e.setAttribute("data-author-index-error",""),e.textContent=t,this.append(e)}#t(){if(!this.querySelector("[data-author-index-search]")){let t=this.getAttribute("placeholder")||"Filter authors\u2026",e=document.createElement("input");e.type="search",e.placeholder=t,e.setAttribute("data-author-index-search",""),e.setAttribute("aria-label",t),e.addEventListener("input",()=>this.#o(e.value)),this.prepend(e)}}#o(t){let e=t.trim().toLowerCase();for(let n of this.querySelectorAll("[data-author-group]")){let o=n.textContent.toLowerCase();n.hidden=e&&!o.includes(e)}}};function l(s){return String(s??"").replace(/[&<>]/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;"})[t])}function h(s){return String(s??"").replace(/[&<>"]/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[t])}b("author-index",f);export{f as AuthorIndex};
3
+ //# sourceMappingURL=author-index.js.map
@@ -0,0 +1,2 @@
1
+ var a=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,n,s){t.addEventListener(e,n,s),this.#e.push(()=>t.removeEventListener(e,n,s))}setup(){}teardown(){}};var p=window.matchMedia("(prefers-reduced-motion: reduce)");var h=new Map;function f(i,t,e={}){let n=e.priority??10,s={impl:t,bundle:e.bundle,contract:e.contract,priority:n},r=h.get(i);if(customElements.get(i)){if(!r||r.priority>=n){r&&r.priority===n&&r.impl!==t&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=n){r.priority===n&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${r.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}h.set(i,s),customElements.define(i,t)}var l=class extends a{static observedAttributes=["src","src-dark","src-compact","alt","wordmark","height"];#e="";#t=null;#r=null;setup(){this.#e=this.#c(),this.hasAttribute("src-dark")&&this.#s(),this.#i()}teardown(){this.#t?.removeEventListener("change",this.#n),this.#t=null,this.#r?.disconnect(),this.#r=null}attributeChangedCallback(t,e,n){e!==n&&(!this.isConnected||!this.hasAttribute("data-upgraded")||(t==="src-dark"&&(n?this.#s():(this.#t?.removeEventListener("change",this.#n),this.#r?.disconnect())),this.#i()))}#o(){let t=document.documentElement.getAttribute("data-mode");return t==="dark"?!0:t==="light"?!1:this.#t?.matches??!1}#s(){this.#t||(this.#t=matchMedia("(prefers-color-scheme: dark)"),this.#t.addEventListener("change",this.#n)),this.#r||(this.#r=new MutationObserver(this.#n),this.#r.observe(document.documentElement,{attributes:!0,attributeFilter:["data-mode"]}))}#n=()=>{this.isConnected&&this.#i()};#i(){let t=this.getAttribute("src"),e=this.getAttribute("src-dark"),n=e&&this.#o()?e:t;if(!n){this.#e&&this.querySelector("img")&&(this.replaceChildren(document.createTextNode(this.#e)),this.removeAttribute("aria-label"));return}let s=this.#e||this.getAttribute("alt")||"",r=this.hasAttribute("wordmark"),u=this.getAttribute("height");if(this.querySelector("img")?.getAttribute("src")===n){let o=this.querySelector(".brand-mark-wordmark");if(r&&!o){let d=document.createElement("span");d.className="brand-mark-wordmark",d.textContent=s,this.appendChild(d)}else!r&&o&&o.remove();return}let c=document.createElement("img");if(c.src=n,c.alt=r?"":s,c.decoding="async",u&&(c.height=parseInt(u,10)),r){let o=document.createElement("span");o.className="brand-mark-wordmark",o.textContent=s,this.replaceChildren(c,o)}else this.replaceChildren(c),this.getAttribute("alt")||this.setAttribute("aria-label",s)}#c(){let t="";for(let e of this.childNodes)(e.nodeType===Node.TEXT_NODE||e.nodeType===Node.ELEMENT_NODE&&e.tagName!=="IMG")&&(t+=e.textContent);return t.trim()}};f("brand-mark",l);
2
+ //# sourceMappingURL=brand-mark.js.map
@@ -1,2 +1,2 @@
1
- var I=Object.defineProperty;var N=(t,e)=>()=>(t&&(e=t(t=0)),e);var Y=(t,e)=>{for(var i in e)I(t,i,{get:e[i],enumerable:!0})};var S={};Y(S,{addDialogDismiss:()=>P,addLongPress:()=>$,addPullToRefresh:()=>B,addSwipeListener:()=>k,haptic:()=>E,initGestures:()=>C,makeSwipeable:()=>M});function k(t,e={}){let i=e.threshold??50,r=e.restraint??100,n=e.timeout??300,s,o,a;function c(h){h.isPrimary&&(s=h.clientX,o=h.clientY,a=Date.now())}function p(h){if(!h.isPrimary)return;let f=h.clientX-s,l=h.clientY-o,v=Date.now()-a;if(v>n)return;let m=Math.abs(f),u=Math.abs(l),d;if(m>=i&&u<=r?d=f<0?"left":"right":u>=i&&m<=r&&(d=l<0?"up":"down"),d){let b=d==="left"||d==="right"?m:u;t.dispatchEvent(new CustomEvent(`swipe-${d}`,{bubbles:!0,detail:{distance:b,duration:v}}))}}return t.addEventListener("pointerdown",c,{passive:!0}),t.addEventListener("pointerup",p,{passive:!0}),()=>{t.removeEventListener("pointerdown",c),t.removeEventListener("pointerup",p)}}function M(t,e={}){let i=e.threshold??100,r=e.direction??"horizontal",n=e.removeOnDismiss??!0,s=r==="horizontal",o=0,a=0,c=!1;function p(u){!u.isPrimary||t.hasAttribute("data-dismissed")||(u.preventDefault(),c=!0,o=s?u.clientX:u.clientY,a=0,t.setPointerCapture(u.pointerId),t.setAttribute("data-swiping",""))}function h(u){if(!c||!u.isPrimary)return;a=(s?u.clientX:u.clientY)-o;let b=1-Math.min(Math.abs(a)/i,1)*.5;s?t.style.transform=`translateX(${a}px)`:t.style.transform=`translateY(${a}px)`,t.style.opacity=String(b)}function f(u){!c||!u.isPrimary||(c=!1,t.releasePointerCapture(u.pointerId),t.removeAttribute("data-swiping"),Math.abs(a)>=i?v(a>0?"right":"left"):m())}function l(u){!c||!u.isPrimary||(c=!1,t.releasePointerCapture(u.pointerId),t.removeAttribute("data-swiping"),m())}function v(u){let d=u==="right"?"100%":"-100%";t.style.transition="transform 0.2s ease-out, opacity 0.2s ease-out",t.style.transform=s?`translateX(${d})`:`translateY(${d})`,t.style.opacity="0",t.setAttribute("data-dismissed",""),E.dismiss(),t.dispatchEvent(new CustomEvent("swipe-dismiss",{bubbles:!0,detail:{direction:u,distance:Math.abs(a)}})),n&&t.addEventListener("transitionend",()=>t.remove(),{once:!0})}function m(){t.style.transition="transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease",t.style.transform="",t.style.opacity="",t.addEventListener("transitionend",()=>{t.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",p),t.addEventListener("pointermove",h),t.addEventListener("pointerup",f),t.addEventListener("pointercancel",l),()=>{t.removeEventListener("pointerdown",p),t.removeEventListener("pointermove",h),t.removeEventListener("pointerup",f),t.removeEventListener("pointercancel",l)}}function B(t,e,i={}){let r=i.threshold??70,n=i.maxPull??120,s=document.createElement("div");s.setAttribute("data-pull-indicator",""),s.setAttribute("aria-hidden","true");let o=document.createElement("div");o.setAttribute("data-pull-spinner",""),s.appendChild(o),t.prepend(s);let a=0,c=!1,p=!1;function h(d){!d.isPrimary||p||t.scrollTop<=0&&(a=d.clientY,c=!0)}function f(d){if(!c||!d.isPrimary||p)return;let b=d.clientY-a;if(b<=0){s.style.transform="",s.style.opacity="";return}let g=Math.min(b,n),A=g/r;s.style.transform=`translateY(${g}px)`,s.style.opacity=String(Math.min(A,1)),A>=1?s.setAttribute("data-pull-ready",""):s.removeAttribute("data-pull-ready")}function l(d){!c||!d.isPrimary||(c=!1,s.hasAttribute("data-pull-ready")&&!p?m():u())}function v(d){!c||!d.isPrimary||(c=!1,u())}async function m(){p=!0,s.removeAttribute("data-pull-ready"),s.setAttribute("data-pull-loading",""),s.style.transform=`translateY(${r}px)`,s.style.opacity="1";try{await e()}finally{p=!1,s.removeAttribute("data-pull-loading"),u()}}function u(){s.style.transition="transform 0.3s ease, opacity 0.3s ease",s.style.transform="",s.style.opacity="",s.removeAttribute("data-pull-ready"),s.addEventListener("transitionend",()=>{s.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",h,{passive:!0}),t.addEventListener("pointermove",f,{passive:!0}),t.addEventListener("pointerup",l,{passive:!0}),t.addEventListener("pointercancel",v,{passive:!0}),()=>{t.removeEventListener("pointerdown",h),t.removeEventListener("pointermove",f),t.removeEventListener("pointerup",l),t.removeEventListener("pointercancel",v),s.remove()}}function $(t,e,i={}){let r=i.duration??500,n=i.hapticFeedback??!0,s=i.blockContextMenu??!0,o=null;function a(h){h.isPrimary&&(o=setTimeout(()=>{n&&E.tap(),e(h),o=null},r))}function c(){o&&(clearTimeout(o),o=null)}function p(h){s&&h.preventDefault()}return t.addEventListener("pointerdown",a,{passive:!0}),t.addEventListener("pointermove",c,{passive:!0}),t.addEventListener("pointerup",c,{passive:!0}),t.addEventListener("pointercancel",c,{passive:!0}),t.addEventListener("contextmenu",p),()=>{c(),t.removeEventListener("pointerdown",a),t.removeEventListener("pointermove",c),t.removeEventListener("pointerup",c),t.removeEventListener("pointercancel",c),t.removeEventListener("contextmenu",p)}}function P(t,e={}){let i=e.threshold??80,r=0,n=0,s=!1;function o(l){if(!l.isPrimary||!t.open)return;let v=l.target;v.closest("a, button, input, select, textarea, [contenteditable]")&&!v.closest("header")||(s=!0,r=l.clientY,n=0,t.setPointerCapture(l.pointerId),t.style.transition="none")}function a(l){if(!s||!l.isPrimary)return;if(n=l.clientY-r,n<=0){t.style.transform="",t.style.opacity="";return}let m=1-Math.min(n/i,1)*.4;t.style.transform=`translateY(${n}px)`,t.style.opacity=String(m)}function c(l){!s||!l.isPrimary||(s=!1,t.releasePointerCapture(l.pointerId),n>=i?h():f())}function p(l){!s||!l.isPrimary||(s=!1,t.releasePointerCapture(l.pointerId),f())}function h(){t.style.transition="transform 0.2s ease-out, opacity 0.2s ease-out",t.style.transform="translateY(100%)",t.style.opacity="0",E.dismiss(),t.addEventListener("transitionend",()=>{t.style.transition="",t.style.transform="",t.style.opacity="",t.close("dismiss")},{once:!0})}function f(){t.style.transition="transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease",t.style.transform="",t.style.opacity="",t.addEventListener("transitionend",()=>{t.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",o),t.addEventListener("pointermove",a),t.addEventListener("pointerup",c),t.addEventListener("pointercancel",p),()=>{t.removeEventListener("pointerdown",o),t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",c),t.removeEventListener("pointercancel",p)}}function C(t=document){let e=[];for(let i of t.querySelectorAll('[data-gesture="swipe"]'))e.push(k(i));for(let i of t.querySelectorAll('[data-gesture="dismiss"]'))e.push(M(i));for(let i of t.querySelectorAll('[data-gesture="long-press"]'))e.push($(i,()=>{i.dispatchEvent(new CustomEvent("long-press",{bubbles:!0}))}));for(let i of t.querySelectorAll('dialog[data-gesture="dismiss-down"]'))e.push(P(i));return()=>e.forEach(i=>i())}var E,D=N(()=>{E={tap:()=>navigator.vibrate?.(8),confirm:()=>navigator.vibrate?.([8,40,8]),error:()=>navigator.vibrate?.([30,60,30]),dismiss:()=>navigator.vibrate?.(15)};C()});var X=window.matchMedia("(prefers-reduced-motion: reduce)");var L=new Map;function x(t,e,i={}){let r=i.priority??10,n={impl:e,bundle:i.bundle,contract:i.contract,priority:r},s=L.get(t);if(customElements.get(t)){if(!s||s.priority>=r){s&&s.priority===r&&s.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=r){s.priority===r&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}L.set(t,n),customElements.define(t,e)}var y=class extends HTMLElement{#t=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#t)e();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,i,r,n){e.addEventListener(i,r,n),this.#t.push(()=>e.removeEventListener(i,r,n))}setup(){}teardown(){}};function T(t){return document.startViewTransition?document.startViewTransition(t):t()}var q=0,w=class extends y{#t;#e=[];#i;#r;#n;#o;#u;#c=null;#s=0;#l=!1;#a=!1;#h=null;get currentIndex(){return this.#s}get slideCount(){return this.#e.length}get playing(){return this.#c!==null}setup(){let e=[...this.children];if(e.length===0)return!1;if(this.#l=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.#a=this.hasAttribute("transition")&&!!document.startViewTransition,this.setAttribute("role","region"),this.setAttribute("aria-roledescription","carousel"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Carousel"),this.#t=document.createElement("div"),this.#t.className="carousel-track",this.#t.setAttribute("tabindex","0"),this.#t.setAttribute("aria-label","Slides"),e.forEach((s,o)=>{s.setAttribute("role","group"),s.setAttribute("aria-roledescription","slide"),s.setAttribute("aria-label",`${o+1} of ${e.length}`),this.#t.appendChild(s)}),this.#e=[...this.#t.children],this.#i=document.createElement("button"),this.#i.className="carousel-prev",this.#i.setAttribute("aria-label","Previous slide"),this.#i.innerHTML='<icon-wc name="chevron-left" size="sm"></icon-wc>',this.#r=document.createElement("button"),this.#r.className="carousel-next",this.#r.setAttribute("aria-label","Next slide"),this.#r.innerHTML='<icon-wc name="chevron-right" size="sm"></icon-wc>',this.getAttribute("indicators")!=="false"&&(this.#n=document.createElement("div"),this.#n.className="carousel-indicators",this.#n.setAttribute("aria-label","Slide indicators"),this.#e.forEach((s,o)=>{let a=document.createElement("button");a.className="carousel-dot",a.setAttribute("aria-label",`Go to slide ${o+1}`),a.setAttribute("aria-current",o===0?"true":"false"),this.listen(a,"click",()=>this.goTo(o)),this.#n.appendChild(a)})),this.#o=document.createElement("div"),this.#o.className="carousel-live",this.#o.setAttribute("aria-live","polite"),this.#o.setAttribute("aria-atomic","true"),this.appendChild(this.#i),this.appendChild(this.#t),this.appendChild(this.#r),this.#n&&this.appendChild(this.#n),this.appendChild(this.#o),this.listen(this.#i,"click",()=>this.prev()),this.listen(this.#r,"click",()=>this.next()),this.listen(this.#t,"keydown",this.#m),this.#a){let s=++q,o=this.getAttribute("transition")||"fade",a=o==="slide"?"vt-carousel-slide":o==="scale"?"vt-carousel-scale":"vt-carousel";this.#t.style.viewTransitionName=`carousel-${s}`,this.#t.style.viewTransitionClass=a}this.#a&&Promise.resolve().then(()=>(D(),S)).then(({addSwipeListener:s})=>{this.#h=s(this.#t,{threshold:40}),this.listen(this.#t,"swipe-left",()=>this.next()),this.listen(this.#t,"swipe-right",()=>this.prev())}),this.#a||(this.#u=new IntersectionObserver(this.#v,{root:this.#t,threshold:.5}),this.#e.forEach(s=>this.#u.observe(s)));let n=this.#y()??(Number(this.getAttribute("start"))||0);if(this.#a){let s=n>0&&n<this.#e.length?n:0;this.#e.forEach((o,a)=>{o.hidden=a!==s}),this.#d(s)}else n>0&&n<this.#e.length&&this.goTo(n,!1);this.#f(),this.hasAttribute("autoplay")&&!this.#l&&this.#b()}teardown(){this.pause(),this.#u&&(this.#u.disconnect(),this.#u=null),this.#h&&(this.#h(),this.#h=null),this.#e=[],this.#a=!1}next(){let e=this.hasAttribute("loop");this.#s<this.#e.length-1?this.goTo(this.#s+1):e&&this.goTo(0)}prev(){let e=this.hasAttribute("loop");this.#s>0?this.goTo(this.#s-1):e&&this.goTo(this.#e.length-1)}goTo(e,i=!0){if(!(e<0||e>=this.#e.length)){if(this.#a)if(i&&e!==this.#s){let r=e>this.#s?"forward":"backward";document.documentElement.dataset.vtDirection=r,T(()=>{this.#p(e)}).finished?.then(()=>{delete document.documentElement.dataset.vtDirection})}else this.#p(e);else{let r=this.#e[e].offsetLeft-this.#t.offsetLeft,n=i&&!this.#l?"smooth":"instant";this.#t.scrollTo({left:r,behavior:n})}this.#d(e)}}#p(e){this.#e.forEach((i,r)=>{i.hidden=r!==e})}play(){if(this.#c||this.#l)return;let e=Number(this.getAttribute("autoplay-delay"))||5e3;this.#c=setInterval(()=>this.next(),e),this.dispatchEvent(new CustomEvent("carousel-wc:play",{bubbles:!0}))}pause(){this.#c&&(clearInterval(this.#c),this.#c=null,this.dispatchEvent(new CustomEvent("carousel-wc:pause",{bubbles:!0})))}reset(){let e=Number(this.getAttribute("start"))||0;this.goTo(e,!1),this.#w()}#d(e){this.#s=e,this.#f(),this.#E(),this.#o&&(this.#o.textContent=`Slide ${e+1} of ${this.#e.length}`),this.dispatchEvent(new CustomEvent("carousel-wc:change",{detail:{index:e,slide:this.#e[e]},bubbles:!0}))}#f(){let e=this.hasAttribute("loop"),i=this.#s===0,r=this.#s===this.#e.length-1;if(this.#i&&(this.#i.disabled=!e&&i),this.#r&&(this.#r.disabled=!e&&r),this.#n){let n=this.#n.children;for(let s=0;s<n.length;s++){let o=s===this.#s;n[s].setAttribute("aria-current",o?"true":"false"),o?n[s].setAttribute("data-active",""):n[s].removeAttribute("data-active")}}}#v=e=>{for(let i of e)if(i.isIntersecting){let r=this.#e.indexOf(i.target);r!==-1&&r!==this.#s&&this.#d(r)}};#m=e=>{switch(e.key){case"ArrowLeft":e.preventDefault(),this.prev();break;case"ArrowRight":e.preventDefault(),this.next();break;case"Home":e.preventDefault(),this.goTo(0);break;case"End":e.preventDefault(),this.goTo(this.#e.length-1);break}};#b(){this.play(),this.listen(this,"mouseenter",()=>this.pause()),this.listen(this,"mouseleave",()=>{this.hasAttribute("autoplay")&&this.play()}),this.listen(this,"focusin",()=>this.pause()),this.listen(this,"focusout",e=>{!this.contains(e.relatedTarget)&&this.hasAttribute("autoplay")&&this.play()}),this.listen(this,"touchstart",()=>this.pause(),{passive:!0})}#y(){let e=this.getAttribute("persist");if(!e)return null;try{let i=localStorage.getItem(`carousel:${e}`);return i!==null?Number(i):null}catch{return null}}#E(){let e=this.getAttribute("persist");if(e)try{localStorage.setItem(`carousel:${e}`,String(this.#s))}catch{}}#w(){let e=this.getAttribute("persist");if(e)try{localStorage.removeItem(`carousel:${e}`)}catch{}}};x("carousel-wc",w);export{w as CarouselWc};
1
+ var I=Object.defineProperty;var N=(t,e)=>()=>(t&&(e=t(t=0)),e);var Y=(t,e)=>{for(var i in e)I(t,i,{get:e[i],enumerable:!0})};var S={};Y(S,{addDialogDismiss:()=>P,addLongPress:()=>$,addPullToRefresh:()=>B,addSwipeListener:()=>k,haptic:()=>E,initGestures:()=>C,makeSwipeable:()=>M});function k(t,e={}){let i=e.threshold??50,r=e.restraint??100,n=e.timeout??300,s,o,a;function c(h){h.isPrimary&&(s=h.clientX,o=h.clientY,a=Date.now())}function p(h){if(!h.isPrimary)return;let f=h.clientX-s,l=h.clientY-o,v=Date.now()-a;if(v>n)return;let m=Math.abs(f),u=Math.abs(l),d;if(m>=i&&u<=r?d=f<0?"left":"right":u>=i&&m<=r&&(d=l<0?"up":"down"),d){let b=d==="left"||d==="right"?m:u;t.dispatchEvent(new CustomEvent(`swipe-${d}`,{bubbles:!0,detail:{distance:b,duration:v}}))}}return t.addEventListener("pointerdown",c,{passive:!0}),t.addEventListener("pointerup",p,{passive:!0}),()=>{t.removeEventListener("pointerdown",c),t.removeEventListener("pointerup",p)}}function M(t,e={}){let i=e.threshold??100,r=e.direction??"horizontal",n=e.removeOnDismiss??!0,s=r==="horizontal",o=0,a=0,c=!1;function p(u){!u.isPrimary||t.hasAttribute("data-dismissed")||(u.preventDefault(),c=!0,o=s?u.clientX:u.clientY,a=0,t.setPointerCapture(u.pointerId),t.setAttribute("data-swiping",""))}function h(u){if(!c||!u.isPrimary)return;a=(s?u.clientX:u.clientY)-o;let b=1-Math.min(Math.abs(a)/i,1)*.5;s?t.style.transform=`translateX(${a}px)`:t.style.transform=`translateY(${a}px)`,t.style.opacity=String(b)}function f(u){!c||!u.isPrimary||(c=!1,t.releasePointerCapture(u.pointerId),t.removeAttribute("data-swiping"),Math.abs(a)>=i?v(a>0?"right":"left"):m())}function l(u){!c||!u.isPrimary||(c=!1,t.releasePointerCapture(u.pointerId),t.removeAttribute("data-swiping"),m())}function v(u){let d=u==="right"?"100%":"-100%";t.style.transition="transform 0.2s ease-out, opacity 0.2s ease-out",t.style.transform=s?`translateX(${d})`:`translateY(${d})`,t.style.opacity="0",t.setAttribute("data-dismissed",""),E.dismiss(),t.dispatchEvent(new CustomEvent("swipe-dismiss",{bubbles:!0,detail:{direction:u,distance:Math.abs(a)}})),n&&t.addEventListener("transitionend",()=>t.remove(),{once:!0})}function m(){t.style.transition="transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease",t.style.transform="",t.style.opacity="",t.addEventListener("transitionend",()=>{t.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",p),t.addEventListener("pointermove",h),t.addEventListener("pointerup",f),t.addEventListener("pointercancel",l),()=>{t.removeEventListener("pointerdown",p),t.removeEventListener("pointermove",h),t.removeEventListener("pointerup",f),t.removeEventListener("pointercancel",l)}}function B(t,e,i={}){let r=i.threshold??70,n=i.maxPull??120,s=document.createElement("div");s.setAttribute("data-pull-indicator",""),s.setAttribute("aria-hidden","true");let o=document.createElement("div");o.setAttribute("data-pull-spinner",""),s.appendChild(o),t.prepend(s);let a=0,c=!1,p=!1;function h(d){!d.isPrimary||p||t.scrollTop<=0&&(a=d.clientY,c=!0)}function f(d){if(!c||!d.isPrimary||p)return;let b=d.clientY-a;if(b<=0){s.style.transform="",s.style.opacity="";return}let g=Math.min(b,n),A=g/r;s.style.transform=`translateY(${g}px)`,s.style.opacity=String(Math.min(A,1)),A>=1?s.setAttribute("data-pull-ready",""):s.removeAttribute("data-pull-ready")}function l(d){!c||!d.isPrimary||(c=!1,s.hasAttribute("data-pull-ready")&&!p?m():u())}function v(d){!c||!d.isPrimary||(c=!1,u())}async function m(){p=!0,s.removeAttribute("data-pull-ready"),s.setAttribute("data-pull-loading",""),s.style.transform=`translateY(${r}px)`,s.style.opacity="1";try{await e()}finally{p=!1,s.removeAttribute("data-pull-loading"),u()}}function u(){s.style.transition="transform 0.3s ease, opacity 0.3s ease",s.style.transform="",s.style.opacity="",s.removeAttribute("data-pull-ready"),s.addEventListener("transitionend",()=>{s.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",h,{passive:!0}),t.addEventListener("pointermove",f,{passive:!0}),t.addEventListener("pointerup",l,{passive:!0}),t.addEventListener("pointercancel",v,{passive:!0}),()=>{t.removeEventListener("pointerdown",h),t.removeEventListener("pointermove",f),t.removeEventListener("pointerup",l),t.removeEventListener("pointercancel",v),s.remove()}}function $(t,e,i={}){let r=i.duration??500,n=i.hapticFeedback??!0,s=i.blockContextMenu??!0,o=null;function a(h){h.isPrimary&&(o=setTimeout(()=>{n&&E.tap(),e(h),o=null},r))}function c(){o&&(clearTimeout(o),o=null)}function p(h){s&&h.preventDefault()}return t.addEventListener("pointerdown",a,{passive:!0}),t.addEventListener("pointermove",c,{passive:!0}),t.addEventListener("pointerup",c,{passive:!0}),t.addEventListener("pointercancel",c,{passive:!0}),t.addEventListener("contextmenu",p),()=>{c(),t.removeEventListener("pointerdown",a),t.removeEventListener("pointermove",c),t.removeEventListener("pointerup",c),t.removeEventListener("pointercancel",c),t.removeEventListener("contextmenu",p)}}function P(t,e={}){let i=e.threshold??80,r=0,n=0,s=!1;function o(l){if(!l.isPrimary||!t.open)return;let v=l.target;v.closest("a, button, input, select, textarea, [contenteditable]")&&!v.closest("header")||(s=!0,r=l.clientY,n=0,t.setPointerCapture(l.pointerId),t.style.transition="none")}function a(l){if(!s||!l.isPrimary)return;if(n=l.clientY-r,n<=0){t.style.transform="",t.style.opacity="";return}let m=1-Math.min(n/i,1)*.4;t.style.transform=`translateY(${n}px)`,t.style.opacity=String(m)}function c(l){!s||!l.isPrimary||(s=!1,t.releasePointerCapture(l.pointerId),n>=i?h():f())}function p(l){!s||!l.isPrimary||(s=!1,t.releasePointerCapture(l.pointerId),f())}function h(){t.style.transition="transform 0.2s ease-out, opacity 0.2s ease-out",t.style.transform="translateY(100%)",t.style.opacity="0",E.dismiss(),t.addEventListener("transitionend",()=>{t.style.transition="",t.style.transform="",t.style.opacity="",t.close("dismiss")},{once:!0})}function f(){t.style.transition="transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease",t.style.transform="",t.style.opacity="",t.addEventListener("transitionend",()=>{t.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",o),t.addEventListener("pointermove",a),t.addEventListener("pointerup",c),t.addEventListener("pointercancel",p),()=>{t.removeEventListener("pointerdown",o),t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",c),t.removeEventListener("pointercancel",p)}}function C(t=document){let e=[];for(let i of t.querySelectorAll('[data-gesture="swipe"]'))e.push(k(i));for(let i of t.querySelectorAll('[data-gesture="dismiss"]'))e.push(M(i));for(let i of t.querySelectorAll('[data-gesture="long-press"]'))e.push($(i,()=>{i.dispatchEvent(new CustomEvent("long-press",{bubbles:!0}))}));for(let i of t.querySelectorAll('dialog[data-gesture="dismiss-down"]'))e.push(P(i));return()=>e.forEach(i=>i())}var E,D=N(()=>{E={tap:()=>navigator.vibrate?.(8),confirm:()=>navigator.vibrate?.([8,40,8]),error:()=>navigator.vibrate?.([30,60,30]),dismiss:()=>navigator.vibrate?.(15)};C()});var X=window.matchMedia("(prefers-reduced-motion: reduce)");var L=new Map;function x(t,e,i={}){let r=i.priority??10,n={impl:e,bundle:i.bundle,contract:i.contract,priority:r},s=L.get(t);if(customElements.get(t)){if(!s||s.priority>=r){s&&s.priority===r&&s.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=r){s.priority===r&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}L.set(t,n),customElements.define(t,e)}var y=class extends HTMLElement{#t=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#t)e();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,i,r,n){e.addEventListener(i,r,n),this.#t.push(()=>e.removeEventListener(i,r,n))}setup(){}teardown(){}};function T(t){return document.startViewTransition?document.startViewTransition(t):t()}var q=0,w=class extends y{#t;#e=[];#i;#r;#n;#a;#u;#c=null;#s=0;#l=!1;#o=!1;#h=null;get currentIndex(){return this.#s}get slideCount(){return this.#e.length}get playing(){return this.#c!==null}setup(){let e=[...this.children];if(e.length===0)return!1;if(this.#l=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.#o=this.hasAttribute("transition")&&!!document.startViewTransition,this.hasAttribute("transition")&&!this.#o&&this.removeAttribute("transition"),this.setAttribute("role","region"),this.setAttribute("aria-roledescription","carousel"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Carousel"),this.#t=document.createElement("div"),this.#t.className="carousel-track",this.#t.setAttribute("tabindex","0"),this.#t.setAttribute("aria-label","Slides"),e.forEach((s,o)=>{s.setAttribute("role","group"),s.setAttribute("aria-roledescription","slide"),s.setAttribute("aria-label",`${o+1} of ${e.length}`),this.#t.appendChild(s)}),this.#e=[...this.#t.children],this.#i=document.createElement("button"),this.#i.className="carousel-prev",this.#i.setAttribute("aria-label","Previous slide"),this.#i.innerHTML='<icon-wc name="chevron-left" size="sm"></icon-wc>',this.#r=document.createElement("button"),this.#r.className="carousel-next",this.#r.setAttribute("aria-label","Next slide"),this.#r.innerHTML='<icon-wc name="chevron-right" size="sm"></icon-wc>',this.getAttribute("indicators")!=="false"&&(this.#n=document.createElement("div"),this.#n.className="carousel-indicators",this.#n.setAttribute("aria-label","Slide indicators"),this.#e.forEach((s,o)=>{let a=document.createElement("button");a.className="carousel-dot",a.setAttribute("aria-label",`Go to slide ${o+1}`),a.setAttribute("aria-current",o===0?"true":"false"),this.listen(a,"click",()=>this.goTo(o)),this.#n.appendChild(a)})),this.#a=document.createElement("div"),this.#a.className="carousel-live",this.#a.setAttribute("aria-live","polite"),this.#a.setAttribute("aria-atomic","true"),this.appendChild(this.#i),this.appendChild(this.#t),this.appendChild(this.#r),this.#n&&this.appendChild(this.#n),this.appendChild(this.#a),this.listen(this.#i,"click",()=>this.prev()),this.listen(this.#r,"click",()=>this.next()),this.listen(this.#t,"keydown",this.#m),this.#o){let s=++q,o=this.getAttribute("transition")||"fade",a=o==="slide"?"vt-carousel-slide":o==="scale"?"vt-carousel-scale":"vt-carousel";this.#t.style.viewTransitionName=`carousel-${s}`,this.#t.style.viewTransitionClass=a}this.#o&&Promise.resolve().then(()=>(D(),S)).then(({addSwipeListener:s})=>{this.#h=s(this.#t,{threshold:40}),this.listen(this.#t,"swipe-left",()=>this.next()),this.listen(this.#t,"swipe-right",()=>this.prev())}),this.#o||(this.#u=new IntersectionObserver(this.#v,{root:this.#t,threshold:.5}),this.#e.forEach(s=>this.#u.observe(s)));let n=this.#y()??(Number(this.getAttribute("start"))||0);if(this.#o){let s=n>0&&n<this.#e.length?n:0;this.#e.forEach((o,a)=>{o.hidden=a!==s}),this.#d(s)}else n>0&&n<this.#e.length&&this.goTo(n,!1);this.#f(),this.hasAttribute("autoplay")&&!this.#l&&this.#b()}teardown(){this.pause(),this.#u&&(this.#u.disconnect(),this.#u=null),this.#h&&(this.#h(),this.#h=null),this.#e=[],this.#o=!1}next(){let e=this.hasAttribute("loop");this.#s<this.#e.length-1?this.goTo(this.#s+1):e&&this.goTo(0)}prev(){let e=this.hasAttribute("loop");this.#s>0?this.goTo(this.#s-1):e&&this.goTo(this.#e.length-1)}goTo(e,i=!0){if(!(e<0||e>=this.#e.length)){if(this.#o)if(i&&e!==this.#s){let r=e>this.#s?"forward":"backward";document.documentElement.dataset.vtDirection=r,T(()=>{this.#p(e)}).finished?.then(()=>{delete document.documentElement.dataset.vtDirection})}else this.#p(e);else{let r=this.#e[e].offsetLeft-this.#t.offsetLeft,n=i&&!this.#l?"smooth":"instant";this.#t.scrollTo({left:r,behavior:n})}this.#d(e)}}#p(e){this.#e.forEach((i,r)=>{i.hidden=r!==e})}play(){if(this.#c||this.#l)return;let e=Number(this.getAttribute("autoplay-delay"))||5e3;this.#c=setInterval(()=>this.next(),e),this.dispatchEvent(new CustomEvent("carousel-wc:play",{bubbles:!0}))}pause(){this.#c&&(clearInterval(this.#c),this.#c=null,this.dispatchEvent(new CustomEvent("carousel-wc:pause",{bubbles:!0})))}reset(){let e=Number(this.getAttribute("start"))||0;this.goTo(e,!1),this.#w()}#d(e){this.#s=e,this.#f(),this.#E(),this.#a&&(this.#a.textContent=`Slide ${e+1} of ${this.#e.length}`),this.dispatchEvent(new CustomEvent("carousel-wc:change",{detail:{index:e,slide:this.#e[e]},bubbles:!0}))}#f(){let e=this.hasAttribute("loop"),i=this.#s===0,r=this.#s===this.#e.length-1;if(this.#i&&(this.#i.disabled=!e&&i),this.#r&&(this.#r.disabled=!e&&r),this.#n){let n=this.#n.children;for(let s=0;s<n.length;s++){let o=s===this.#s;n[s].setAttribute("aria-current",o?"true":"false"),o?n[s].setAttribute("data-active",""):n[s].removeAttribute("data-active")}}}#v=e=>{for(let i of e)if(i.isIntersecting){let r=this.#e.indexOf(i.target);r!==-1&&r!==this.#s&&this.#d(r)}};#m=e=>{switch(e.key){case"ArrowLeft":e.preventDefault(),this.prev();break;case"ArrowRight":e.preventDefault(),this.next();break;case"Home":e.preventDefault(),this.goTo(0);break;case"End":e.preventDefault(),this.goTo(this.#e.length-1);break}};#b(){this.play(),this.listen(this,"mouseenter",()=>this.pause()),this.listen(this,"mouseleave",()=>{this.hasAttribute("autoplay")&&this.play()}),this.listen(this,"focusin",()=>this.pause()),this.listen(this,"focusout",e=>{!this.contains(e.relatedTarget)&&this.hasAttribute("autoplay")&&this.play()}),this.listen(this,"touchstart",()=>this.pause(),{passive:!0})}#y(){let e=this.getAttribute("persist");if(!e)return null;try{let i=localStorage.getItem(`carousel:${e}`);return i!==null?Number(i):null}catch{return null}}#E(){let e=this.getAttribute("persist");if(e)try{localStorage.setItem(`carousel:${e}`,String(this.#s))}catch{}}#w(){let e=this.getAttribute("persist");if(e)try{localStorage.removeItem(`carousel:${e}`)}catch{}}};x("carousel-wc",w);export{w as CarouselWc};
2
2
  //# sourceMappingURL=carousel-wc.js.map
@@ -1,10 +1,16 @@
1
- var E=window.matchMedia("(prefers-reduced-motion: reduce)");var x=new Map;function g(a,t,s={}){let e=s.priority??10,n={impl:t,bundle:s.bundle,contract:s.contract,priority:e},r=x.get(a);if(customElements.get(a)){if(!r||r.priority>=e){r&&r.priority===e&&r.impl!==t&&console.warn(`[VB Bundle] Tag <${a}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${s.bundle}".`);return}console.warn(`[VB Bundle] Tag <${a}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${s.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=e){r.priority===e&&console.warn(`[VB Bundle] Tag <${a}> already registered by "${r.bundle}". Skipping "${s.bundle}" (first wins at equal priority).`);return}x.set(a,n),customElements.define(a,t)}var c=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,s,e,n){t.addEventListener(s,e,n),this.#e.push(()=>t.removeEventListener(s,e,n))}setup(){}teardown(){}};var h=class extends c{static observedAttributes=["colors","names","layout","show-values","show-names","size"];setup(){this.#e()}attributeChangedCallback(){this.isConnected&&this.#e()}#e(){let t=this.getAttribute("colors")||"",s=this.getAttribute("names")||"",e=this.getAttribute("layout")||"inline",n=this.getAttribute("size")||"md",r=this.hasAttribute("show-values"),d=this.hasAttribute("show-names")||s.length>0,u=this.#s(t),y=s?s.split(",").map(o=>o.trim()):[],f={sm:48,md:80,lg:120}[n]||80,p="display:flex;flex-wrap:wrap;gap:var(--size-xs,0.5rem)";e==="grid"?p=`display:grid;grid-template-columns:repeat(auto-fill,minmax(${f}px,1fr));gap:var(--size-xs,0.5rem)`:e==="list"&&(p="display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)");let v=u.map((o,i)=>{let l=y[i]||"",m=this.#r(o),w=e==="list"?"display:flex;flex-direction:row;align-items:center;gap:0.75rem":`display:flex;flex-direction:column;align-items:center;gap:0.25rem;max-inline-size:${f}px`,b=e==="list"?36:f;return`<div class="swatch-wrap" role="listitem" style="${w}">
2
- <button type="button" class="color-box" data-index="${i}"
3
- style="background:${o};color:${m};width:${b}px;height:${b}px;border:1px solid oklch(0% 0 0/0.15);border-radius:var(--radius-s,0.25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--font-mono,monospace);position:relative;overflow:hidden;flex-shrink:0"
1
+ var S=window.matchMedia("(prefers-reduced-motion: reduce)");var v=new Map;function g(a,o,i={}){let e=i.priority??10,t={impl:o,bundle:i.bundle,contract:i.contract,priority:e},s=v.get(a);if(customElements.get(a)){if(!s||s.priority>=e){s&&s.priority===e&&s.impl!==o&&console.warn(`[VB Bundle] Tag <${a}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${a}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=e){s.priority===e&&console.warn(`[VB Bundle] Tag <${a}> already registered by "${s.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}v.set(a,t),customElements.define(a,o)}var f=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let o of this.#e)o();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(o,i,e,t){o.addEventListener(i,e,t),this.#e.push(()=>o.removeEventListener(i,e,t))}setup(){}teardown(){}};var y=class extends f{static observedAttributes=["colors","names","layout","show-values","show-names","size","editable"];#e=[];setup(){this.#o()}attributeChangedCallback(){this.isConnected&&this.#o()}#o(){let o=this.getAttribute("colors")||"",i=this.getAttribute("names")||"",e=this.getAttribute("layout")||"inline",t=this.getAttribute("size")||"md",s=this.hasAttribute("show-values"),r=this.hasAttribute("show-names")||i.length>0,n=this.hasAttribute("editable"),u=this.#c(o);this.#e=u.slice();let d=i?i.split(",").map(c=>c.trim()):[],h={sm:48,md:80,lg:120}[t]||80,m="display:flex;flex-wrap:wrap;gap:var(--size-xs,0.5rem)";e==="grid"?m=`display:grid;grid-template-columns:repeat(auto-fill,minmax(${h}px,1fr));gap:var(--size-xs,0.5rem)`:e==="list"&&(m="display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)");let w=u.map((c,p)=>{let l=d[p]||"",E=this.#s(c),b=e==="list"?"display:flex;flex-direction:row;align-items:center;gap:0.75rem":`display:flex;flex-direction:column;align-items:center;gap:0.25rem;max-inline-size:${h}px`,x=e==="list"?36:h,$=`background:${c};color:${E};width:${x}px;height:${x}px;border:1px solid oklch(0% 0 0/0.15);border-radius:var(--radius-s,0.25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--font-mono,monospace);position:relative;overflow:hidden;flex-shrink:0`;if(n){let k=this.#a(c);return`<div class="swatch-wrap" role="listitem" style="${b}">
2
+ <label class="color-box color-box-edit" style="${$};cursor:pointer" data-index="${p}" title="Click to edit${l?": "+l:""}" aria-label="${l||"Color "+(p+1)}: ${c}. Click to edit.">
3
+ <input type="color" class="color-input" value="${k}" data-index="${p}" style="position:absolute;inset:0;opacity:0;cursor:pointer;inline-size:100%;block-size:100%" aria-label="${l||"Color "+(p+1)} picker">
4
+ <span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${s?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease;pointer-events:none">${this.#t(c)}</span>
5
+ </label>
6
+ ${r&&l?`<span style="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${l}</span>`:""}
7
+ </div>`}return`<div class="swatch-wrap" role="listitem" style="${b}">
8
+ <button type="button" class="color-box" data-index="${p}"
9
+ style="${$}"
4
10
  title="Click to copy${l?": "+l:""}"
5
- aria-label="${l||"Color "+(i+1)}: ${o}">
6
- <span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${r?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease">${this.#t(o)}</span>
11
+ aria-label="${l||"Color "+(p+1)}: ${c}">
12
+ <span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${s?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease">${this.#t(c)}</span>
7
13
  </button>
8
- ${d&&l?`<span style="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${l}</span>`:""}
9
- </div>`}).join("");this.innerHTML=`<div class="palette ${e}" role="list" aria-label="Color palette" style="${p}">${v}</div>`,this.querySelectorAll(".color-box").forEach(o=>{r||(o.addEventListener("pointerenter",()=>{let i=o.querySelector(".color-value");i&&(i.style.opacity="1")}),o.addEventListener("pointerleave",()=>{let i=o.querySelector(".color-value");i&&(i.style.opacity="0")})),o.addEventListener("click",()=>{let i=Number(o.dataset.index),l=u[i],m=y[i]||"";navigator.clipboard?.writeText(l),this.dispatchEvent(new CustomEvent("color-palette:select",{bubbles:!0,detail:{color:l,name:m,index:i}})),o.style.outline="3px solid currentColor",o.style.outlineOffset="2px",setTimeout(()=>{o.style.outline="",o.style.outlineOffset=""},600)})})}#t(t){if(t.startsWith("#"))return t;let s=t.match(/oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)/);return s?`${s[1]}% .${s[2].replace("0.","")}`:t.length>12?t.slice(0,12)+"\u2026":t}#s(t){if(!t)return[];let s=[],e=0,n="";for(let r of t)r==="("?e++:r===")"&&e--,r===","&&e===0?(s.push(n.trim()),n=""):n+=r;return n.trim()&&s.push(n.trim()),s}#r(t){let s=t.match(/oklch\(\s*([\d.]+)%?\s/);if(s){let e=parseFloat(s[1]);return(e>1?e/100:e)>.6?"#000":"#fff"}if(t.startsWith("#")){let e=t.replace("#",""),n=parseInt(e.substring(0,2),16)/255,r=parseInt(e.substring(2,4),16)/255,d=parseInt(e.substring(4,6),16)/255;return .2126*n+.7152*r+.0722*d>.4?"#000":"#fff"}return"#000"}};g("color-palette",h);export{h as ColorPalette};
14
+ ${r&&l?`<span style="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${l}</span>`:""}
15
+ </div>`}).join("");this.innerHTML=`<div class="palette ${e}" role="list" aria-label="Color palette" style="${m}">${w}</div>`,n?this.#n(d):(this.#l(u,d),this.#r(u,d,s))}#r(o,i,e){this.querySelectorAll(".color-box").forEach(t=>{e||(t.addEventListener("pointerenter",()=>{let s=t.querySelector(".color-value");s&&(s.style.opacity="1")}),t.addEventListener("pointerleave",()=>{let s=t.querySelector(".color-value");s&&(s.style.opacity="0")})),t.addEventListener("click",()=>{let s=Number(t.dataset.index),r=o[s],n=i[s]||"";navigator.clipboard?.writeText(r),this.dispatchEvent(new CustomEvent("color-palette:select",{bubbles:!0,detail:{color:r,name:n,index:s}})),t.style.outline="3px solid currentColor",t.style.outlineOffset="2px",setTimeout(()=>{t.style.outline="",t.style.outlineOffset=""},600)})})}#n(o){this.querySelectorAll(".color-input").forEach(i=>{i.addEventListener("input",()=>{let e=Number(i.dataset.index),t=i.value;this.#e[e]=t;let s=i.parentElement;if(s){s.style.background=t,s.style.color=this.#s(t);let r=s.querySelector(".color-value");r&&(r.textContent=this.#t(t)),s.title=`Click to edit${o[e]?": "+o[e]:""} (${t})`,s.setAttribute("aria-label",`${o[e]||"Color "+(e+1)}: ${t}. Click to edit.`)}this.setAttribute("colors",this.#e.join(",")),this.dispatchEvent(new CustomEvent("color-palette:change",{bubbles:!0,detail:{color:t,name:o[e]||"",index:e,colors:this.#e.slice()}}))})})}get colors(){return this.#e.slice()}#l(o,i){this.querySelectorAll(".color-box").forEach(e=>{let t=Number(e.dataset.index),s=o[t];if(!s||!s.includes("var("))return;let r=getComputedStyle(e).backgroundColor,n=this.#i(r)||r;o[t]=n,this.#e[t]=n;let u=e.querySelector(".color-value");u&&(u.textContent=n),e.style.color=this.#s(n);let d=i[t]||"";e.title=`Click to copy${d?": "+d:""} (${n})`,e.setAttribute("aria-label",`${d||"Color "+(t+1)}: ${n}`)})}#i(o){let i=o.match(/rgba?\(\s*([\d.]+),?\s*([\d.]+),?\s*([\d.]+)/);if(!i)return null;let[,e,t,s]=i,r=n=>Math.round(Number(n)).toString(16).padStart(2,"0");return`#${r(e)}${r(t)}${r(s)}`}#a(o){if(/^#[0-9a-f]{6}$/i.test(o))return o.toLowerCase();if(/^#[0-9a-f]{3}$/i.test(o))return("#"+o.slice(1).split("").map(t=>t+t).join("")).toLowerCase();if(typeof document>"u")return"#000000";let i=document.createElement("span");i.style.color=o,i.style.display="none",document.body.appendChild(i);let e=getComputedStyle(i).color;return i.remove(),this.#i(e)||"#000000"}#t(o){if(o.startsWith("#"))return o;let i=o.match(/oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)/);return i?`${i[1]}% .${i[2].replace("0.","")}`:o.length>12?o.slice(0,12)+"\u2026":o}#c(o){if(!o)return[];let i=[],e=0,t="";for(let s of o)s==="("?e++:s===")"&&e--,s===","&&e===0?(i.push(t.trim()),t=""):t+=s;return t.trim()&&i.push(t.trim()),i}#s(o){let i=o.match(/oklch\(\s*([\d.]+)%?\s/);if(i){let e=parseFloat(i[1]);return(e>1?e/100:e)>.6?"#000":"#fff"}if(o.startsWith("#")){let e=o.replace("#",""),t=parseInt(e.substring(0,2),16)/255,s=parseInt(e.substring(2,4),16)/255,r=parseInt(e.substring(4,6),16)/255;return .2126*t+.7152*s+.0722*r>.4?"#000":"#fff"}return"#000"}};g("color-palette",y);export{y as ColorPalette};
10
16
  //# sourceMappingURL=color-palette.js.map
@@ -0,0 +1,2 @@
1
+ var s=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,t,o,r){e.addEventListener(t,o,r),this.#e.push(()=>e.removeEventListener(t,o,r))}setup(){}teardown(){}};var m=window.matchMedia("(prefers-reduced-motion: reduce)");var l=new Map;function u(i,e,t={}){let o=t.priority??10,r={impl:e,bundle:t.bundle,contract:t.contract,priority:o},n=l.get(i);if(customElements.get(i)){if(!n||n.priority>=o){n&&n.priority===o&&n.impl!==e&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${t.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${t.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=o){n.priority===o&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${n.bundle}". Skipping "${t.bundle}" (first wins at equal priority).`);return}l.set(i,r),customElements.define(i,e)}var c=class extends s{setup(){let e=document.createElement("button");e.type="button";let t=document.createElement("icon-wc");t.setAttribute("name","message-circle"),t.setAttribute("size","sm"),t.setAttribute("aria-hidden","true"),e.appendChild(t);let o=this.closest("selection-menu")?.getAttribute("for"),r=this.closest("review-surface")||(o?document.querySelector(`review-surface[for="${o}"]`):null);r?(e.setAttribute("aria-label","Add comment"),e.addEventListener("click",()=>this.#e(r))):(e.setAttribute("aria-label","Comments not available"),e.style.opacity="0.4",e.setAttribute("title","Wrap content in <review-surface> to enable comments")),this.appendChild(e)}#e(e){let t=this.closest("selection-menu");if(!t)return;let o=t.getSelection();if(!o)return;let r=o.range.getBoundingClientRect(),n=e.getBoundingClientRect(),d=(r.left+r.width/2-n.left)/n.width*100,a=(r.top-n.top)/n.height*100;typeof e.addPin=="function"&&e.addPin({x:d,y:a,text:o.text}),this.dispatchEvent(new CustomEvent("comment-wc:created",{detail:{text:o.text,x:d,y:a},bubbles:!0})),t.dismiss()}};u("comment-wc",c);
2
+ //# sourceMappingURL=comment-wc.js.map
@@ -1,2 +1,2 @@
1
- var h=window.matchMedia("(prefers-reduced-motion: reduce)");var d=new Map;function u(i,e,t={}){let n=t.priority??10,s={impl:e,bundle:t.bundle,contract:t.contract,priority:n},r=d.get(i);if(customElements.get(i)){if(!r||r.priority>=n){r&&r.priority===n&&r.impl!==e&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${t.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${t.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=n){r.priority===n&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${r.bundle}". Skipping "${t.bundle}" (first wins at equal priority).`);return}d.set(i,s),customElements.define(i,e)}var c=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,t,n,s){e.addEventListener(t,n,s),this.#e.push(()=>e.removeEventListener(t,n,s))}setup(){}teardown(){}};var l=class extends c{#e=null;static get observedAttributes(){return["position"]}get#t(){return this.getAttribute("persist")||"consent-banner"}get#o(){let e=this.getAttribute("expires");return e==="0"||e==="never"?0:e?parseInt(e,10):365}setup(){if(this.#e=this.querySelector("dialog"),!this.#e)return!1;this.getAttribute("trigger")&&this.listen(document,"click",this.#a);let e=this.#i();if(e&&!this.#d(e))return this.getAttribute("trigger")?this.hidden=!0:this.remove(),!1;this.#r()}#r(){(this.getAttribute("position")||"bottom")==="center"?(this.#e.showModal(),this.#e.addEventListener("cancel",this.#n)):this.#e.show(),this.addEventListener("click",this.#s)}#c(){this.#e.removeEventListener("cancel",this.#n),this.removeEventListener("click",this.#s),this.#e.close(),this.getAttribute("trigger")?this.hidden=!0:this.remove()}#n=e=>{e.preventDefault()};#s=e=>{let t=e.target.closest("button[value]");if(!t)return;let n=t.value;if(!["accept","reject","save"].includes(n))return;let s=[...this.querySelectorAll('input[type="checkbox"]')],r={};n==="accept"?s.forEach(o=>{r[o.name]=!0}):n==="reject"?s.forEach(o=>{r[o.name]=!!o.disabled}):s.forEach(o=>{r[o.name]=o.checked}),this.#l({preferences:r,action:n,timestamp:Date.now()}),this.dispatchEvent(new CustomEvent("consent-banner:change",{bubbles:!0,detail:{preferences:r,action:n}})),this.#c()};#a=e=>{let t=this.getAttribute("trigger");if(!t||!e.target.closest(t))return;e.preventDefault();let s=this.#i();if(s?.preferences)for(let[r,o]of Object.entries(s.preferences)){let a=this.querySelector(`input[type="checkbox"][name="${CSS.escape(r)}"]`);a&&!a.disabled&&(a.checked=o)}this.hidden=!1,this.#r()};#i(){try{let e=localStorage.getItem(this.#t);return e?JSON.parse(e):null}catch{return null}}#l(e){try{localStorage.setItem(this.#t,JSON.stringify(e))}catch{}}#d(e){let t=this.#o;return t===0?!1:Date.now()-(e.timestamp||0)>t*864e5}static reset(e="consent-banner"){try{localStorage.removeItem(e)}catch{}}static getConsent(e="consent-banner"){try{let t=localStorage.getItem(e);return t?JSON.parse(t):null}catch{return null}}};u("consent-banner",l);export{l as ConsentBanner};
1
+ var w=window.matchMedia("(prefers-reduced-motion: reduce)");var p=new Map;function m(t,e,n={}){let r=n.priority??10,o={impl:e,bundle:n.bundle,contract:n.contract,priority:r},s=p.get(t);if(customElements.get(t)){if(!s||s.priority>=r){s&&s.priority===r&&s.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${n.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=r){s.priority===r&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}". Skipping "${n.bundle}" (first wins at equal priority).`);return}p.set(t,o),customElements.define(t,e)}var l=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,n,r,o){e.addEventListener(n,r,o),this.#e.push(()=>e.removeEventListener(n,r,o))}setup(){}teardown(){}};function b(){let t=globalThis.localStorage;if(!t)throw new Error("VBStore: localStorage is not available in this environment");return{async getRaw(e){return t.getItem(e)},async setRaw(e,n){t.setItem(e,n)},async removeRaw(e){t.removeItem(e)},async keys(e){let n=[];for(let r=0;r<t.length;r++){let o=t.key(r);o&&o.startsWith(e)&&n.push(o)}return n}}}var u=null;function a(){return u||(u=b()),u}function f(t,e){if(typeof t!="string"||!t)throw new TypeError("VBStore: namespace must be a non-empty string");if(typeof e!="string"||!e)throw new TypeError("VBStore: key must be a non-empty string");return`vb:${t}:${e}`}function y(t){if(typeof t!="string"||!t)throw new TypeError("VBStore: namespace must be a non-empty string");return`vb:${t}:`}function g(t){try{let e=JSON.parse(t);if(e&&typeof e=="object"&&typeof e.timestamp=="number")return e}catch{}return null}var c={configure(t={}){u=t.backend??null},async set(t,e,n){let r={data:n,timestamp:Date.now()};await a().setRaw(f(t,e),JSON.stringify(r))},async get(t,e,n){let r=await a().getRaw(f(t,e));if(r==null)return null;let o=g(r);return!o||n?.maxAge!=null&&Date.now()-o.timestamp>n.maxAge?null:o.data},async remove(t,e){await a().removeRaw(f(t,e))},async list(t){let e=y(t),n=await a().keys(e),r=[];for(let o of n){let s=await a().getRaw(o);if(s==null)continue;let i=g(s);i&&r.push({key:o.slice(e.length),data:i.data,timestamp:i.timestamp})}return r},async clear(t){let e=y(t),n=await a().keys(e);for(let r of n)await a().removeRaw(r)},async clearAll(){let t=await a().keys("vb:");for(let e of t)await a().removeRaw(e)},async setMany(t,e){for(let[n,r]of e)await c.set(t,n,r)}};var h=class extends l{#e=null;static get observedAttributes(){return["position"]}get#t(){return this.getAttribute("persist")||"banner"}get#i(){let e=this.getAttribute("expires");return e==="0"||e==="never"?0:e?parseInt(e,10):365}get#a(){let e=this.#i;return e>0?e*864e5:void 0}async setup(){if(this.#e=this.querySelector("dialog"),!this.#e)return!1;if(this.getAttribute("trigger")&&this.listen(document,"click",this.#l),await this.#o())return this.getAttribute("trigger")?this.hidden=!0:this.remove(),!1;this.#n()}#n(){(this.getAttribute("position")||"bottom")==="center"?(this.#e.showModal(),this.#e.addEventListener("cancel",this.#r)):this.#e.show(),this.addEventListener("click",this.#s)}#c(){this.#e.removeEventListener("cancel",this.#r),this.removeEventListener("click",this.#s),this.#e.close(),this.getAttribute("trigger")?this.hidden=!0:this.remove()}#r=e=>{e.preventDefault()};#s=async e=>{let n=e.target.closest("button[value]");if(!n)return;let r=n.value;if(!["accept","reject","save"].includes(r))return;let o=[...this.querySelectorAll('input[type="checkbox"]')],s={};r==="accept"?o.forEach(i=>{s[i.name]=!0}):r==="reject"?o.forEach(i=>{s[i.name]=!!i.disabled}):o.forEach(i=>{s[i.name]=i.checked}),await this.#u({preferences:s,action:r}),this.dispatchEvent(new CustomEvent("consent-banner:change",{bubbles:!0,detail:{preferences:s,action:r}})),this.#c()};#l=async e=>{let n=this.getAttribute("trigger");if(!n||!e.target.closest(n))return;e.preventDefault();let o=await this.#o();if(o?.preferences)for(let[s,i]of Object.entries(o.preferences)){let d=this.querySelector(`input[type="checkbox"][name="${CSS.escape(s)}"]`);d&&!d.disabled&&(d.checked=i)}this.hidden=!1,this.#n()};async#o(){let e=this.#a;return await c.get("consent",this.#t,e?{maxAge:e}:void 0)}async#u(e){await c.set("consent",this.#t,e)}static async reset(e="banner"){await c.remove("consent",e)}static async getConsent(e="banner"){return await c.get("consent",e)}};m("consent-banner",h);export{h as ConsentBanner};
2
2
  //# sourceMappingURL=consent-banner.js.map
@@ -0,0 +1,2 @@
1
+ var p=window.matchMedia("(prefers-reduced-motion: reduce)");var u=new Map;function f(s,e,t={}){let r=t.priority??10,i={impl:e,bundle:t.bundle,contract:t.contract,priority:r},n=u.get(s);if(customElements.get(s)){if(!n||n.priority>=r){n&&n.priority===r&&n.impl!==e&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${t.bundle}".`);return}console.warn(`[VB Bundle] Tag <${s}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${t.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=r){n.priority===r&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${n.bundle}". Skipping "${t.bundle}" (first wins at equal priority).`);return}u.set(s,i),customElements.define(s,e)}var c=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,t,r,i){e.addEventListener(t,r,i),this.#e.push(()=>e.removeEventListener(t,r,i))}setup(){}teardown(){}};var a=class extends c{#e=new Map;#r="";#t=null;setup(){if(this.#i(),this.#e.size===0)return!1;this.#o(),this.#c();let e=this.#l();this.#n(e,!1)}#i(){for(let e of this.children){let t=e.getAttribute("data-lens-name");t&&this.#e.set(t,e)}}#o(){let e=this.getAttribute("data-lens-src");if(e)for(let t of this.#e.values())!t.hasAttribute("data-lens-src")&&!t.hasAttribute("src")&&t.setAttribute("data-lens-src",e)}#c(){if(this.getAttribute("data-lens-controls")==="off")return;let e=document.createElement("nav");e.setAttribute("data-content-lens-controls",""),e.setAttribute("aria-label","Switch lens");let t=document.createElement("fieldset"),r=document.createElement("legend");r.textContent="View",t.append(r);let i=`content-lens-${Math.random().toString(36).slice(2,8)}`;for(let[n,h]of this.#e){let l=document.createElement("label"),o=document.createElement("input");o.type="radio",o.name=i,o.value=n,o.addEventListener("change",()=>{o.checked&&this.#n(n,!0)});let d=document.createElement("span");d.textContent=h.getAttribute("data-lens-label")||this.#a(n),l.append(o,d),t.append(l)}e.append(t),this.prepend(e),this.#t=e}#a(e){return e.replace(/-/g," ").replace(/\b\w/g,t=>t.toUpperCase())}#s(){return`vb:content-lens:${this.getAttribute("data-lens-storage")||(typeof location<"u"?location.pathname:"default")}`}#l(){let e=(()=>{try{return typeof sessionStorage<"u"?sessionStorage.getItem(this.#s()):null}catch{return null}})();if(e&&this.#e.has(e))return e;let t=this.getAttribute("data-lens-default");return t&&this.#e.has(t)?t:[...this.#e.keys()][0]}#n(e,t){if(this.#e.has(e)){for(let[r,i]of this.#e){let n=r===e;i.toggleAttribute("hidden",!n),i.setAttribute("aria-hidden",n?"false":"true")}if(this.#t){let r=this.#t.querySelector(`input[value="${e}"]`);r&&(r.checked=!0)}if(this.#r=e,this.setAttribute("data-active-lens",e),t)try{sessionStorage.setItem(this.#s(),e)}catch{}this.dispatchEvent(new CustomEvent("content-lens:change",{detail:{lens:e},bubbles:!0}))}}get activeLens(){return this.#r}setLens(e){this.#n(e,!0)}};f("content-lens",a);export{a as ContentLens};
2
+ //# sourceMappingURL=content-lens.js.map
@@ -0,0 +1,108 @@
1
+ var D=window.matchMedia("(prefers-reduced-motion: reduce)");var w=new Map;function x(t,e,i={}){let o=i.priority??10,r={impl:e,bundle:i.bundle,contract:i.contract,priority:o},s=w.get(t);if(customElements.get(t)){if(!s||s.priority>=o){s&&s.priority===o&&s.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=o){s.priority===o&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}w.set(t,r),customElements.define(t,e)}var p=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,i,o,r){e.addEventListener(i,o,r),this.#e.push(()=>e.removeEventListener(i,o,r))}setup(){}teardown(){}};var f=[{name:"Playfair Display",category:"serif",weights:"400;600;700;900",style:"elegant"},{name:"Merriweather",category:"serif",weights:"300;400;700;900",style:"readable"},{name:"Lora",category:"serif",weights:"400;500;600;700",style:"elegant"},{name:"Source Serif 4",category:"serif",weights:"300;400;600;700",style:"neutral"},{name:"Libre Baskerville",category:"serif",weights:"400;700",style:"classic"},{name:"Crimson Text",category:"serif",weights:"400;600;700",style:"classic"},{name:"DM Serif Display",category:"serif",weights:"400",style:"bold"},{name:"Cormorant Garamond",category:"serif",weights:"300;400;500;600;700",style:"elegant"},{name:"Inter",category:"sans-serif",weights:"300;400;500;600;700",style:"neutral"},{name:"Open Sans",category:"sans-serif",weights:"300;400;600;700",style:"friendly"},{name:"Roboto",category:"sans-serif",weights:"300;400;500;700",style:"neutral"},{name:"Lato",category:"sans-serif",weights:"300;400;700;900",style:"warm"},{name:"Nunito",category:"sans-serif",weights:"300;400;600;700",style:"friendly"},{name:"Work Sans",category:"sans-serif",weights:"300;400;500;600;700",style:"geometric"},{name:"DM Sans",category:"sans-serif",weights:"400;500;700",style:"geometric"},{name:"Plus Jakarta Sans",category:"sans-serif",weights:"300;400;500;600;700",style:"modern"},{name:"Space Grotesk",category:"sans-serif",weights:"300;400;500;600;700",style:"technical"},{name:"Manrope",category:"sans-serif",weights:"300;400;500;600;700",style:"geometric"},{name:"IBM Plex Sans",category:"sans-serif",weights:"300;400;500;600",style:"technical"},{name:"Outfit",category:"sans-serif",weights:"300;400;500;600;700",style:"modern"},{name:"Bebas Neue",category:"display",weights:"400",style:"bold"},{name:"Abril Fatface",category:"display",weights:"400",style:"elegant"},{name:"Oswald",category:"display",weights:"300;400;500;600;700",style:"condensed"},{name:"Sora",category:"display",weights:"300;400;500;600;700",style:"modern"},{name:"Fraunces",category:"display",weights:"300;400;500;600;700;900",style:"elegant"},{name:"JetBrains Mono",category:"monospace",weights:"400;500;600;700",style:"technical"},{name:"Fira Code",category:"monospace",weights:"300;400;500;600;700",style:"technical"},{name:"IBM Plex Mono",category:"monospace",weights:"400;500;600",style:"technical"},{name:"Source Code Pro",category:"monospace",weights:"300;400;500;600;700",style:"neutral"}],z=[["Playfair Display","Inter"],["DM Serif Display","DM Sans"],["Fraunces","Plus Jakarta Sans"],["Lora","Open Sans"],["Merriweather","Roboto"],["Oswald","Lato"],["Cormorant Garamond","Work Sans"],["Sora","Inter"],["Abril Fatface","Nunito"],["Source Serif 4","Source Code Pro"],["Space Grotesk","IBM Plex Sans"],["Outfit","Manrope"]];function g(t,e="400;700"){return`https://fonts.googleapis.com/css2?family=${t.replace(/\s+/g,"+")}:wght@${e}&display=swap`}async function k(t,e="400;700"){let i=`gf-${t.replace(/\s+/g,"-").toLowerCase()}`;if(document.getElementById(i)){await document.fonts.ready;return}let o=document.createElement("link");o.id=i,o.rel="stylesheet",o.href=g(t,e),document.head.appendChild(o),await document.fonts.ready}var n=(t,e,i,o="")=>`${o} contenteditable="plaintext-only" spellcheck="false" class="fp-editable" data-role="${i}"`,u={combined:{label:"Combined",render:(t,e)=>`
2
+ <p style="font-family:${t.display};font-size:var(--font-size-3xl,2rem);font-weight:800;margin:0;line-height:1.15"
3
+ ${n(t.display,"p","heading")}>${e.heading}</p>
4
+ <h3 style="font-family:${t.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0"
5
+ ${n(t.heading,"h3","subheading")}>${e.subheading}</h3>
6
+ <p style="font-family:${t.body};font-size:var(--font-size-md,1rem);line-height:1.65;margin:0;color:var(--color-text-muted,#666)"
7
+ ${n(t.body,"p","body")}>${e.body}</p>
8
+ <pre style="font-family:${t.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${n(t.code,"code","code")}>${e.code}</code></pre>`},article:{label:"Article",render:(t,e)=>`
9
+ <small style="font-family:${t.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600"
10
+ ${n(t.body,"small","eyebrow")}>${e.eyebrow}</small>
11
+ <h2 style="font-family:${t.heading};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0;line-height:1.2"
12
+ ${n(t.heading,"h2","heading")}>${e.heading}</h2>
13
+ <p style="font-family:${t.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0"
14
+ ${n(t.body,"p","byline")}>${e.byline}</p>
15
+ <p style="font-family:${t.body};line-height:1.7;margin:0" ${n(t.body,"p","body")}>${e.body}</p>
16
+ <h3 style="font-family:${t.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0"
17
+ ${n(t.heading,"h3","subheading")}>${e.subheading}</h3>
18
+ <p style="font-family:${t.body};line-height:1.7;margin:0" ${n(t.body,"p","body2")}>${e.body2}</p>
19
+ <blockquote style="font-family:${t.display};font-style:italic;font-size:var(--font-size-lg,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)"
20
+ ${n(t.display,"blockquote","quote")}>${e.quote}</blockquote>
21
+ <pre style="font-family:${t.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${n(t.code,"code","code")}>${e.code}</code></pre>`},"long-article":{label:"Long Article",render:(t,e)=>`
22
+ <small style="font-family:${t.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600">${e.eyebrow}</small>
23
+ <h1 style="font-family:${t.display};font-size:var(--font-size-3xl,2rem);font-weight:800;margin:0;line-height:1.15">${e.heading}</h1>
24
+ <p style="font-family:${t.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0">${e.byline}</p>
25
+ <p style="font-family:${t.body};font-size:var(--font-size-lg,1.125rem);line-height:1.6;margin:0;color:var(--color-text-muted,#666)">${e.lead}</p>
26
+ <h2 style="font-family:${t.heading};font-size:var(--font-size-xl,1.375rem);font-weight:700;margin:0">${e.subheading}</h2>
27
+ <p style="font-family:${t.body};line-height:1.7;margin:0">${e.body}</p>
28
+ <p style="font-family:${t.body};line-height:1.7;margin:0">${e.body2}</p>
29
+ <blockquote style="font-family:${t.display};font-style:italic;font-size:var(--font-size-lg,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)">${e.quote}</blockquote>
30
+ <h2 style="font-family:${t.heading};font-size:var(--font-size-xl,1.375rem);font-weight:700;margin:0">Implementation Details</h2>
31
+ <p style="font-family:${t.body};line-height:1.7;margin:0">Design tokens form the atomic layer of any visual system. Colors, spacing, typography, and motion are expressed as named variables that cascade through every component. When a token changes, every surface that references it updates automatically \u2014 no find-and-replace, no missed instances.</p>
32
+ <pre style="font-family:${t.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code>${e.code}</code></pre>
33
+ <h3 style="font-family:${t.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0">Key Takeaways</h3>
34
+ <ul style="font-family:${t.body};line-height:1.7;margin:0;padding-inline-start:1.5rem">
35
+ <li>Typography sets the emotional tone before a single word is read</li>
36
+ <li>Pair contrast with harmony \u2014 serif headings with sans-serif body</li>
37
+ <li>Test at real content lengths, not just sample sentences</li>
38
+ <li>Code fonts need clear distinction between similar glyphs</li>
39
+ </ul>`},card:{label:"Card UI",render:(t,e)=>`
40
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--size-m,1rem)">
41
+ <div style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)">
42
+ <h4 style="font-family:${t.heading};font-weight:600;margin:0" ${n(t.heading,"h4","cardTitle")}>Premium Plan</h4>
43
+ <p style="font-family:${t.display};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0">$49<small style="font-size:0.5em;font-weight:400">/mo</small></p>
44
+ <p style="font-family:${t.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0" ${n(t.body,"p","cardBody")}>Everything you need to build faster.</p>
45
+ <code style="font-family:${t.code};font-size:var(--font-size-xs,0.75rem);background:var(--color-surface-sunken,#eee);padding:0.2rem 0.4rem;border-radius:0.25rem" ${n(t.code,"code","cardCode")}>npm install acme</code>
46
+ </div>
47
+ <div style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)">
48
+ <h4 style="font-family:${t.heading};font-weight:600;margin:0">Enterprise</h4>
49
+ <p style="font-family:${t.display};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0">Custom</p>
50
+ <p style="font-family:${t.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0">Dedicated support and SLA guarantees.</p>
51
+ <code style="font-family:${t.code};font-size:var(--font-size-xs,0.75rem);background:var(--color-surface-sunken,#eee);padding:0.2rem 0.4rem;border-radius:0.25rem">contact@acme.dev</code>
52
+ </div>
53
+ </div>`},hero:{label:"Hero",render:(t,e)=>`
54
+ <div style="text-align:center;padding:var(--size-xl,2rem) 0">
55
+ <p style="font-family:${t.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.1em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600;margin:0 0 var(--size-xs,0.5rem)"
56
+ ${n(t.body,"p","eyebrow")}>${e.eyebrow}</p>
57
+ <h1 style="font-family:${t.display};font-size:clamp(2rem,5vw,3rem);font-weight:800;margin:0;line-height:1.1"
58
+ ${n(t.display,"h1","heading")}>${e.heading}</h1>
59
+ <p style="font-family:${t.body};font-size:var(--font-size-lg,1.125rem);color:var(--color-text-muted,#666);margin:var(--size-s,0.75rem) auto 0;max-width:40ch"
60
+ ${n(t.body,"p","body")}>${e.body}</p>
61
+ </div>`}},b=class extends p{static observedAttributes=["heading-font","body-font","code-font","display-font","sample","show-export","show-suggestions","preview"];#e={heading:"",body:"",code:"",display:""};#t="combined";#i={heading:"The Art of Typography",subheading:"Building visual harmony through font pairing",body:"Good typography is invisible \u2014 it lets the content speak without distraction. The best font pairings create harmony between heading impact and body readability. Every typeface carries personality: serif fonts convey trust and tradition, while sans-serif fonts feel modern and clean.",body2:"Choosing the right pairing is about contrast and complement. A bold display font for headlines needs a quiet, readable body font to balance it. Monospace fonts ground technical content in precision. The interplay between these roles defines your brand voice.",code:`const theme = {
62
+ heading: "Playfair Display",
63
+ body: "Inter",
64
+ tokens: { size: 16, scale: 1.25 }
65
+ };`,eyebrow:"Design Systems",byline:"By Jamie Chen \xB7 April 14, 2026 \xB7 8 min read",lead:"How native CSS features and design tokens are replacing the complex tooling we thought we needed.",quote:'"Good typography is invisible \u2014 it lets the content breathe."'};setup(){this.#e.heading=this.getAttribute("heading-font")||"Playfair Display",this.#e.body=this.getAttribute("body-font")||"Inter",this.#e.code=this.getAttribute("code-font")||"JetBrains Mono",this.#e.display=this.getAttribute("display-font")||this.#e.heading,this.#t=this.getAttribute("preview")||"combined",this.#s(),this.#o()}attributeChangedCallback(e,i,o){i===o||!this.isConnected||(e==="heading-font"&&(this.#e.heading=o||"Playfair Display"),e==="body-font"&&(this.#e.body=o||"Inter"),e==="code-font"&&(this.#e.code=o||"JetBrains Mono"),e==="display-font"&&(this.#e.display=o||this.#e.heading),e==="preview"&&(this.#t=o||"combined"),this.#s(),this.#o())}async#o(){let e=Object.values(this.#e).filter(Boolean).map(i=>{let o=f.find(r=>r.name===i);return k(i,o?.weights||"400;700")});await Promise.all(e),this.#f()}#s(){let e=this.hasAttribute("show-export"),i=this.hasAttribute("show-suggestions"),o="var(--size-m, 1rem)",r="var(--size-s, 0.75rem)",s="var(--size-xs, 0.5rem)",a="var(--radius-m, 0.5rem)",c="var(--color-border, #ddd)",h="var(--color-surface, #fff)",$="var(--color-surface-raised, #f5f5f5)",m="var(--color-text-muted, #666)",S="var(--font-size-sm, 0.875rem)",l="var(--font-size-xs, 0.75rem)",E=`font:inherit;font-size:${S};padding:0.35rem 0.5rem;border:1px solid ${c};border-radius:4px;background:${h}`,C=[{key:"heading",label:"Heading"},{key:"body",label:"Body"},{key:"code",label:"Code"},{key:"display",label:"Display"}].map(d=>`
66
+ <label style="display:flex;flex-direction:column;gap:3px;flex:1;min-width:9rem;font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em">
67
+ ${d.label}
68
+ <select class="fp-select" data-role="${d.key}" style="${E}">
69
+ ${this.#c(this.#e[d.key])}
70
+ </select>
71
+ </label>
72
+ `).join(""),M=Object.entries(u).map(([d,{label:y}])=>`<button type="button" class="fp-tab" data-mode="${d}"
73
+ style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.75rem;border-radius:999px;${d===this.#t?"background:var(--color-interactive,oklch(55% .2 260));color:white":`border:1px solid ${c}`}">${y}</button>`).join(""),A={heading:`'${this.#e.heading}', serif`,body:`'${this.#e.body}', sans-serif`,code:`'${this.#e.code}', monospace`,display:`'${this.#e.display}', serif`},T=u[this.#t]?.render(A,this.#i)||"",L=z.map(([d,y])=>`<button type="button" class="fp-suggestion" data-h="${d}" data-b="${y}"
74
+ style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.5rem;border:1px solid ${c};border-radius:4px;white-space:nowrap;text-align:left;line-height:1.3"
75
+ title="${d} + ${y}"><strong>${d}</strong><br><span style="color:${m}">${y}</span></button>`).join(""),q=this.#r(),P=`<details class="fp-code-details" style="border:1px solid ${c};border-radius:${a};overflow:hidden"${e?" open":""}>
76
+ <summary style="padding:${s} ${r};cursor:pointer;font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em;background:${$}">Code</summary>
77
+ <div style="padding:${r}">
78
+ <pre style="font-family:var(--font-mono,monospace);font-size:${l};margin:0;white-space:pre-wrap;word-break:break-all" class="fp-css-output">${q}</pre>
79
+ <div style="display:flex;gap:${s};margin-block-start:${r}">
80
+ <button type="button" class="fp-copy-css"
81
+ style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.65rem;border:1px solid ${c};border-radius:4px;background:${h}">Copy CSS</button>
82
+ <button type="button" class="fp-copy-import"
83
+ style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.65rem;border:1px solid ${c};border-radius:4px;background:${h}">Copy @import</button>
84
+ </div>
85
+ </div>
86
+ </details>`,v=`<div style="display:flex;flex-direction:column;gap:${o};flex:1;min-width:0">
87
+ <div style="display:flex;flex-wrap:wrap;gap:${s}">${C}</div>
88
+ <div style="display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center">
89
+ <span style="font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em;margin-inline-end:${s}">Examples</span>
90
+ ${M}
91
+ </div>
92
+ <div style="display:flex;flex-direction:column;gap:${s}">
93
+ <span style="font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em">Preview</span>
94
+ <div class="fp-preview" style="padding:var(--size-l,1.5rem);background:${$};border-radius:${a};border:1px solid ${c};display:flex;flex-direction:column;gap:${r};max-height:24rem;overflow-y:auto">
95
+ ${T}
96
+ </div>
97
+ </div>
98
+ ${P}
99
+ </div>`;i?this.innerHTML=`<div style="display:flex;gap:${o};flex-wrap:wrap">
100
+ ${v}
101
+ <aside style="flex:0 0 11rem;display:flex;flex-direction:column;gap:${s}">
102
+ <span style="font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em">Pairings</span>
103
+ <div style="display:flex;flex-direction:column;gap:0.25rem">${L}</div>
104
+ </aside>
105
+ </div>`:this.innerHTML=v,this.#y()}#c(e){return["serif","sans-serif","display","monospace"].map(o=>{let s=f.filter(a=>a.category===o).map(a=>`<option value="${a.name}"${a.name===e?" selected":""}>${a.name}</option>`).join("");return`<optgroup label="${o}">${s}</optgroup>`}).join("")}#r(){let e=[],i={heading:"serif",body:"sans-serif",code:"monospace",display:"serif"};for(let[o,r]of Object.entries(i)){let s=this.#e[o];if(!s)continue;let a=f.find(c=>c.name===s);e.push(`--font-${o}: "${s}", ${a?.category||r};`)}return e.join(`
106
+ `)}#m(){let e=new Set,i=[];for(let o of Object.values(this.#e)){if(!o||e.has(o))continue;e.add(o);let r=f.find(s=>s.name===o);i.push(`@import url('${g(o,r?.weights||"400;700")}');`)}return i.join(`
107
+ `)}#y(){this.querySelectorAll(".fp-select").forEach(e=>{e.addEventListener("change",i=>{this.#e[i.target.dataset.role]=i.target.value,this.#o(),this.#n(),this.#a(),this.#d()})}),this.querySelectorAll(".fp-tab").forEach(e=>{e.addEventListener("click",()=>{this.#t=e.dataset.mode,this.#s(),this.#o()})}),this.querySelectorAll(".fp-suggestion").forEach(e=>{e.addEventListener("click",()=>{this.#e.heading=e.dataset.h,this.#e.body=e.dataset.b,this.#e.display=e.dataset.h,this.#s(),this.#o(),this.#d()})}),this.querySelectorAll(".fp-editable").forEach(e=>{e.addEventListener("blur",()=>{let i=e.dataset.role;i&&e.textContent.trim()&&(this.#i[i]=e.textContent.trim())})}),this.querySelector(".fp-copy-css")?.addEventListener("click",e=>{navigator.clipboard?.writeText(this.#r()),this.#l(e.target)}),this.querySelector(".fp-copy-import")?.addEventListener("click",e=>{navigator.clipboard?.writeText(this.#m()),this.#l(e.target)})}#n(){let e=this.querySelector(".fp-preview");if(!e)return;let i={heading:`'${this.#e.heading}', serif`,body:`'${this.#e.body}', sans-serif`,code:`'${this.#e.code}', monospace`,display:`'${this.#e.display}', serif`};e.innerHTML=u[this.#t]?.render(i,this.#i)||"",e.querySelectorAll(".fp-editable").forEach(o=>{o.addEventListener("blur",()=>{let r=o.dataset.role;r&&o.textContent.trim()&&(this.#i[r]=o.textContent.trim())})})}#f(){this.#n(),this.#a()}#a(){let e=this.querySelector(".fp-css-output");e&&(e.textContent=this.#r())}#l(e){let i=e.textContent;e.textContent="Copied!",setTimeout(()=>{e.textContent=i},1500)}#d(){this.dispatchEvent(new CustomEvent("font-pairer:change",{bubbles:!0,detail:{...this.#e}}))}};x("font-pairer",b);export{b as FontPairer};
108
+ //# sourceMappingURL=font-pairer.js.map
@@ -1,4 +1,4 @@
1
- var X=Object.defineProperty;var A=(l,t)=>()=>(l&&(t=l(l=0)),t);var Y=(l,t)=>{for(var e in t)X(l,e,{get:t[e],enumerable:!0})};function $(l,t,e){let i=Math.pow(2,e),o=l*Math.PI/180,s=(t+180)/360*i,a=(1-Math.log(Math.tan(o)+1/Math.cos(o))/Math.PI)/2*i,n=Math.floor(s),r=Math.floor(a),c=Math.round((s-n)*256),h=Math.round((a-r)*256);return{tileX:n,tileY:r,pixelX:c,pixelY:h}}function S(l,t,e){let i=256*Math.pow(2,e),o=l/i*360-180;return{lat:Math.atan(Math.sinh(Math.PI*(1-2*t/i)))*180/Math.PI,lng:o}}function v(l,t,e,i){switch(l){case"carto-light":return`https://basemaps.cartocdn.com/light_all/${t}/${e}/${i}.png`;case"carto-dark":return`https://basemaps.cartocdn.com/dark_all/${t}/${e}/${i}.png`;default:return`https://tile.openstreetmap.org/${t}/${e}/${i}.png`}}var k=A(()=>{});var P={};Y(P,{MapInteraction:()=>E});var E,F=A(()=>{k();E=class{#o;#a;#t;#m;#g;#s=0;#i=0;#r=15;#u=1;#f=19;#l=0;#n=0;#c=new Map;#e=null;#v=0;#b=0;#y=!1;#w=0;#x=0;constructor({shadow:t,host:e,lat:i,lng:o,zoom:s,provider:a,onDeactivate:n}){this.#o=t,this.#a=e,this.#m=a,this.#g=n,this.#r=s,this.#t=t.querySelector('[part="tiles"]'),this.#e=t.querySelector('[part="marker"]');let r=256*Math.pow(2,s),c=i*Math.PI/180;this.#s=(o+180)/360*r,this.#i=(1-Math.log(Math.tan(c)+1/Math.cos(c))/Math.PI)/2*r,this.#v=this.#s,this.#b=this.#i,this.#l=this.#a.offsetWidth||400,this.#n=this.#a.offsetHeight||300,this.#t.innerHTML="",this.#t.style.transform="",this.#e&&(this.#e.style.position="absolute",this.#e.style.top="",this.#e.style.left="",this.#t.appendChild(this.#e)),this.#S(),this.#h()}#S(){this.#t.addEventListener("pointerdown",this.#N),this.#t.addEventListener("wheel",this.#A,{passive:!1}),this.#a.addEventListener("keydown",this.#L)}#N=t=>{t.button===0&&(t.preventDefault(),this.#y=!0,this.#w=t.clientX,this.#x=t.clientY,this.#t.setPointerCapture(t.pointerId),this.#t.setAttribute("data-dragging",""),this.#t.addEventListener("pointermove",this.#M),this.#t.addEventListener("pointerup",this.#k))};#M=t=>{if(!this.#y)return;let e=t.clientX-this.#w,i=t.clientY-this.#x;this.#w=t.clientX,this.#x=t.clientY,this.#s-=e,this.#i-=i,this.#d(),this.#h()};#k=t=>{this.#y=!1,this.#t.releasePointerCapture(t.pointerId),this.#t.removeAttribute("data-dragging"),this.#t.removeEventListener("pointermove",this.#M),this.#t.removeEventListener("pointerup",this.#k),this.#p()};#A=t=>{t.preventDefault();let e=t.ctrlKey?-t.deltaY*.01:-Math.sign(t.deltaY),i=Math.round(Math.max(this.#u,Math.min(this.#f,this.#r+e)));if(i===this.#r)return;let o=this.#a.getBoundingClientRect(),s=t.clientX-o.left,a=t.clientY-o.top;this.#E(i,s,a)};#L=t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.#s-=80,this.#d(),this.#h(),this.#p();break;case"ArrowRight":t.preventDefault(),this.#s+=80,this.#d(),this.#h(),this.#p();break;case"ArrowUp":t.preventDefault(),this.#i-=80,this.#d(),this.#h(),this.#p();break;case"ArrowDown":t.preventDefault(),this.#i+=80,this.#d(),this.#h(),this.#p();break;case"+":case"=":t.preventDefault(),this.#E(this.#r+1,this.#l/2,this.#n/2);break;case"-":t.preventDefault(),this.#E(this.#r-1,this.#l/2,this.#n/2);break;case"Escape":t.preventDefault(),this.#g();break}};#E(t,e,i){if(t=Math.max(this.#u,Math.min(this.#f,t)),t===this.#r)return;let o=this.#s-this.#l/2,s=this.#i-this.#n/2,a=o+e,n=s+i,r=Math.pow(2,t-this.#r);this.#s=a*r-e+this.#l/2,this.#i=n*r-i+this.#n/2,this.#v*=r,this.#b*=r,this.#r=t,this.#$(),this.#d(),this.#h(),this.#p()}#d(){let t=256*Math.pow(2,this.#r);this.#s=(this.#s%t+t)%t,this.#i=Math.max(this.#n/2,Math.min(t-this.#n/2,this.#i))}#h(){let t=-(this.#s-this.#l/2),e=-(this.#i-this.#n/2);this.#t.style.transform=`translate(${Math.round(t)}px, ${Math.round(e)}px)`,this.#T(),this.#P(),this.#F()}#T(){let t=this.#r,e=Math.pow(2,t),i=this.#s-this.#l/2,o=this.#i-this.#n/2,s=i+this.#l,a=o+this.#n,n=Math.floor(i/256)-1,r=Math.max(0,Math.floor(o/256)-1),c=Math.ceil(s/256)+1,h=Math.min(e,Math.ceil(a/256)+1);for(let d=r;d<h;d++)for(let u=n;u<c;u++){let f=(u%e+e)%e,b=`${t}/${f}/${d}`;this.#c.has(b)||this.#C(t,u,d,f)}}#C(t,e,i,o){let s=`${t}/${o}/${i}`;if(this.#c.has(s))return;let a=e*256,n=i*256,r=document.createElement("img");r.src=v(this.#m,t,o,i),r.alt="",r.draggable=!1,r.style.left=a+"px",r.style.top=n+"px",r.style.width="256px",r.style.height="256px",r._wx=a,r._wy=n,this.#c.set(s,r),this.#t.appendChild(r)}#P(){let t=this.#s-this.#l/2,e=this.#i-this.#n/2,i=512;for(let[o,s]of this.#c){let a=s._wx,n=s._wy;(a+256<t-i||a>t+this.#l+i||n+256<e-i||n>e+this.#n+i)&&(s.remove(),this.#c.delete(o))}}#F(){if(!this.#e)return;let t=this.#e.offsetWidth||32;this.#e.style.left=`${Math.round(this.#v-t/2)}px`,this.#e.style.top=`${Math.round(this.#b-t)}px`,this.#e.style.transform=""}#p(){let{lat:t,lng:e}=S(this.#s,this.#i,this.#r);this.#a.dispatchEvent(new CustomEvent("geo-map:move",{bubbles:!0,detail:{lat:+t.toFixed(6),lng:+e.toFixed(6),zoom:this.#r}}))}#$(){for(let t of this.#c.values())t.remove();this.#c.clear()}destroy(){if(this.#t.removeEventListener("pointerdown",this.#N),this.#t.removeEventListener("wheel",this.#A),this.#a.removeEventListener("keydown",this.#L),this.#t.removeEventListener("pointermove",this.#M),this.#t.removeEventListener("pointerup",this.#k),this.#e&&this.#e.parentNode===this.#t){let t=this.#o.querySelector('[part="container"]');t&&(t.insertBefore(this.#e,this.#t.nextSibling),this.#e.style.position="",this.#e.style.left="",this.#e.style.top="",this.#e.style.transform="")}this.#$(),this.#a.removeAttribute("data-interactive-active")}}});var g=class extends HTMLElement{#o=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#o)t();this.#o=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,i,o){t.addEventListener(e,i,o),this.#o.push(()=>t.removeEventListener(e,i,o))}setup(){}teardown(){}};var L=`
1
+ var X=Object.defineProperty;var A=(l,t)=>()=>(l&&(t=l(l=0)),t);var Y=(l,t)=>{for(var e in t)X(l,e,{get:t[e],enumerable:!0})};function S(l,t,e){let i=Math.pow(2,e),r=l*Math.PI/180,o=(t+180)/360*i,n=(1-Math.log(Math.tan(r)+1/Math.cos(r))/Math.PI)/2*i,a=Math.floor(o),s=Math.floor(n),h=Math.round((o-a)*256),c=Math.round((n-s)*256);return{tileX:a,tileY:s,pixelX:h,pixelY:c}}function $(l,t,e){let i=256*Math.pow(2,e),r=l/i*360-180;return{lat:Math.atan(Math.sinh(Math.PI*(1-2*t/i)))*180/Math.PI,lng:r}}function v(l,t,e,i,r){if(r)return r.replace("{z}",String(t)).replace("{x}",String(e)).replace("{y}",String(i));switch(l){case"carto-light":return`https://basemaps.cartocdn.com/light_all/${t}/${e}/${i}.png`;case"carto-dark":return`https://basemaps.cartocdn.com/dark_all/${t}/${e}/${i}.png`;default:return`https://tile.openstreetmap.org/${t}/${e}/${i}.png`}}var k=A(()=>{});var P={};Y(P,{MapInteraction:()=>E});var E,F=A(()=>{k();E=class{#r;#n;#t;#f;#m;#g;#i=0;#o=0;#s=15;#u=1;#N=19;#l=0;#a=0;#c=new Map;#e=null;#v=0;#b=0;#y=!1;#w=0;#x=0;constructor({shadow:t,host:e,lat:i,lng:r,zoom:o,provider:n,tileUrl:a,onDeactivate:s}){this.#r=t,this.#n=e,this.#f=n,this.#m=a||"",this.#g=s,this.#s=o,this.#t=t.querySelector('[part="tiles"]'),this.#e=t.querySelector('[part="marker"]');let h=256*Math.pow(2,o),c=i*Math.PI/180;this.#i=(r+180)/360*h,this.#o=(1-Math.log(Math.tan(c)+1/Math.cos(c))/Math.PI)/2*h,this.#v=this.#i,this.#b=this.#o,this.#l=this.#n.offsetWidth||400,this.#a=this.#n.offsetHeight||300,this.#t.innerHTML="",this.#t.style.transform="",this.#e&&(this.#e.style.position="absolute",this.#e.style.top="",this.#e.style.left="",this.#t.appendChild(this.#e)),this.#T(),this.#h()}#T(){this.#t.addEventListener("pointerdown",this.#A),this.#t.addEventListener("wheel",this.#L,{passive:!1}),this.#n.addEventListener("keydown",this.#S)}#A=t=>{t.button===0&&(t.preventDefault(),this.#y=!0,this.#w=t.clientX,this.#x=t.clientY,this.#t.setPointerCapture(t.pointerId),this.#t.setAttribute("data-dragging",""),this.#t.addEventListener("pointermove",this.#M),this.#t.addEventListener("pointerup",this.#k))};#M=t=>{if(!this.#y)return;let e=t.clientX-this.#w,i=t.clientY-this.#x;this.#w=t.clientX,this.#x=t.clientY,this.#i-=e,this.#o-=i,this.#d(),this.#h()};#k=t=>{this.#y=!1,this.#t.releasePointerCapture(t.pointerId),this.#t.removeAttribute("data-dragging"),this.#t.removeEventListener("pointermove",this.#M),this.#t.removeEventListener("pointerup",this.#k),this.#p()};#L=t=>{t.preventDefault();let e=t.ctrlKey?-t.deltaY*.01:-Math.sign(t.deltaY),i=Math.round(Math.max(this.#u,Math.min(this.#N,this.#s+e)));if(i===this.#s)return;let r=this.#n.getBoundingClientRect(),o=t.clientX-r.left,n=t.clientY-r.top;this.#E(i,o,n)};#S=t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.#i-=80,this.#d(),this.#h(),this.#p();break;case"ArrowRight":t.preventDefault(),this.#i+=80,this.#d(),this.#h(),this.#p();break;case"ArrowUp":t.preventDefault(),this.#o-=80,this.#d(),this.#h(),this.#p();break;case"ArrowDown":t.preventDefault(),this.#o+=80,this.#d(),this.#h(),this.#p();break;case"+":case"=":t.preventDefault(),this.#E(this.#s+1,this.#l/2,this.#a/2);break;case"-":t.preventDefault(),this.#E(this.#s-1,this.#l/2,this.#a/2);break;case"Escape":t.preventDefault(),this.#g();break}};#E(t,e,i){if(t=Math.max(this.#u,Math.min(this.#N,t)),t===this.#s)return;let r=this.#i-this.#l/2,o=this.#o-this.#a/2,n=r+e,a=o+i,s=Math.pow(2,t-this.#s);this.#i=n*s-e+this.#l/2,this.#o=a*s-i+this.#a/2,this.#v*=s,this.#b*=s,this.#s=t,this.#$(),this.#d(),this.#h(),this.#p()}#d(){let t=256*Math.pow(2,this.#s);this.#i=(this.#i%t+t)%t,this.#o=Math.max(this.#a/2,Math.min(t-this.#a/2,this.#o))}#h(){let t=-(this.#i-this.#l/2),e=-(this.#o-this.#a/2);this.#t.style.transform=`translate(${Math.round(t)}px, ${Math.round(e)}px)`,this.#C(),this.#F(),this.#z()}#C(){let t=this.#s,e=Math.pow(2,t),i=this.#i-this.#l/2,r=this.#o-this.#a/2,o=i+this.#l,n=r+this.#a,a=Math.floor(i/256)-1,s=Math.max(0,Math.floor(r/256)-1),h=Math.ceil(o/256)+1,c=Math.min(e,Math.ceil(n/256)+1);for(let d=s;d<c;d++)for(let u=a;u<h;u++){let f=(u%e+e)%e,b=`${t}/${f}/${d}`;this.#c.has(b)||this.#P(t,u,d,f)}}#P(t,e,i,r){let o=`${t}/${r}/${i}`;if(this.#c.has(o))return;let n=e*256,a=i*256,s=document.createElement("img");s.src=v(this.#f,t,r,i,this.#m),s.alt="",s.draggable=!1,s.style.left=n+"px",s.style.top=a+"px",s.style.width="256px",s.style.height="256px",s._wx=n,s._wy=a,this.#c.set(o,s),this.#t.appendChild(s)}#F(){let t=this.#i-this.#l/2,e=this.#o-this.#a/2,i=512;for(let[r,o]of this.#c){let n=o._wx,a=o._wy;(n+256<t-i||n>t+this.#l+i||a+256<e-i||a>e+this.#a+i)&&(o.remove(),this.#c.delete(r))}}#z(){if(!this.#e)return;let t=this.#e.offsetWidth||32;this.#e.style.left=`${Math.round(this.#v-t/2)}px`,this.#e.style.top=`${Math.round(this.#b-t)}px`,this.#e.style.transform=""}#p(){let{lat:t,lng:e}=$(this.#i,this.#o,this.#s);this.#n.dispatchEvent(new CustomEvent("geo-map:move",{bubbles:!0,detail:{lat:+t.toFixed(6),lng:+e.toFixed(6),zoom:this.#s}}))}#$(){for(let t of this.#c.values())t.remove();this.#c.clear()}destroy(){if(this.#t.removeEventListener("pointerdown",this.#A),this.#t.removeEventListener("wheel",this.#L),this.#n.removeEventListener("keydown",this.#S),this.#t.removeEventListener("pointermove",this.#M),this.#t.removeEventListener("pointerup",this.#k),this.#e&&this.#e.parentNode===this.#t){let t=this.#r.querySelector('[part="container"]');t&&(t.insertBefore(this.#e,this.#t.nextSibling),this.#e.style.position="",this.#e.style.left="",this.#e.style.top="",this.#e.style.transform="")}this.#$(),this.#n.removeAttribute("data-interactive-active")}}});var g=class extends HTMLElement{#r=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#r)t();this.#r=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,i,r){t.addEventListener(e,i,r),this.#r.push(()=>t.removeEventListener(e,i,r))}setup(){}teardown(){}};var L=`
2
2
  :host {
3
3
  display: block;
4
4
  position: relative;
@@ -180,19 +180,19 @@ var X=Object.defineProperty;var A=(l,t)=>()=>(l&&(t=l(l=0)),t);var Y=(l,t)=>{for
180
180
  text-align: center;
181
181
  padding: 1rem;
182
182
  }
183
- `;k();var j=window.matchMedia("(prefers-reduced-motion: reduce)");var T=new Map;function C(l,t,e={}){let i=e.priority??10,o={impl:t,bundle:e.bundle,contract:e.contract,priority:i},s=T.get(l);if(customElements.get(l)){if(!s||s.priority>=i){s&&s.priority===i&&s.impl!==t&&console.warn(`[VB Bundle] Tag <${l}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${l}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=i){s.priority===i&&console.warn(`[VB Bundle] Tag <${l}> already registered by "${s.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}T.set(l,o),customElements.define(l,t)}function _(l){return`<svg viewBox="0 0 24 36" fill="none" xmlns="http://www.w3.org/2000/svg">
183
+ `;k();var H=window.matchMedia("(prefers-reduced-motion: reduce)");var T=new Map;function C(l,t,e={}){let i=e.priority??10,r={impl:t,bundle:e.bundle,contract:e.contract,priority:i},o=T.get(l);if(customElements.get(l)){if(!o||o.priority>=i){o&&o.priority===i&&o.impl!==t&&console.warn(`[VB Bundle] Tag <${l}> already registered by "${o.bundle}" (priority ${o.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${l}> defined by "${o.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(o&&o.priority>=i){o.priority===i&&console.warn(`[VB Bundle] Tag <${l}> already registered by "${o.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}T.set(l,r),customElements.define(l,t)}function _(l){return`<svg viewBox="0 0 24 36" fill="none" xmlns="http://www.w3.org/2000/svg">
184
184
  <path d="M12 0C5.373 0 0 5.373 0 12c0 9 12 24 12 24s12-15 12-24C24 5.373 18.627 0 12 0z" fill="${l}"/>
185
185
  <circle cx="12" cy="12" r="5" fill="white" opacity="0.9"/>
186
- </svg>`}var N=class extends g{static get observedAttributes(){return["lat","lng","zoom","marker","marker-color","provider","interactive","static-only","src","place"]}#o=null;#a=!1;constructor(){super(),this.attachShadow({mode:"open"})}get lat(){return parseFloat(this.getAttribute("lat")??"")}get lng(){return parseFloat(this.getAttribute("lng")??"")}get zoom(){let t=parseInt(this.getAttribute("zoom")??"",10);return t>=1&&t<=19?t:15}get showMarker(){return this.getAttribute("marker")!=="false"}get markerColor(){return this.getAttribute("marker-color")||"#e74c3c"}get provider(){return this.getAttribute("provider")||"osm"}get interactive(){let t=this.getAttribute("interactive");return t==="eager"||t==="none"?t:"click"}get staticOnly(){return this.hasAttribute("static-only")}#t(){let t=parseFloat(this.getAttribute("lat")??""),e=parseFloat(this.getAttribute("lng")??"");if(!isNaN(t)&&!isNaN(e))return{lat:t,lng:e};let i=this.getAttribute("src");if(i){let n=this.#m(i);if(n)return n}let o=this.querySelector("address[data-lat][data-lng]");if(o){let n=parseFloat(o.dataset.lat??""),r=parseFloat(o.dataset.lng??"");if(!isNaN(n)&&!isNaN(r))return{lat:n,lng:r}}let s=this.getAttribute("place");if(s){let n=this.#g(s);if(n)return n}let a=document.querySelector('meta[name="geo.position"]');if(a){let r=(a.getAttribute("content")||"").split(";");if(r.length===2){let c=parseFloat(r[0]),h=parseFloat(r[1]);if(!isNaN(c)&&!isNaN(h))return{lat:c,lng:h}}}return null}#m(t){let e=document.getElementById(t);if(!e)return null;if(e.tagName==="ADDRESS"&&e.dataset.lat&&e.dataset.lng){let i=parseFloat(e.dataset.lat),o=parseFloat(e.dataset.lng);if(!isNaN(i)&&!isNaN(o))return{lat:i,lng:o}}return e.tagName==="SCRIPT"&&e.type==="application/ld+json"?this.#s(e):null}#g(t){let e=document.querySelectorAll('script[type="application/ld+json"]');for(let i of e)try{let o=JSON.parse(i.textContent);if(o.name===t){let s=o.geo;if(s){let a=parseFloat(s.latitude),n=parseFloat(s.longitude);if(!isNaN(a)&&!isNaN(n))return{lat:a,lng:n}}}}catch{}return null}#s(t){try{let i=JSON.parse(t.textContent).geo;if(i){let o=parseFloat(i.latitude),s=parseFloat(i.longitude);if(!isNaN(o)&&!isNaN(s))return{lat:o,lng:s}}}catch{}return null}setup(){this.render(),this.loadTiles(),this.#i()}attributeChangedCallback(t,e,i){e!==i&&this.isConnected&&(this.#o&&this.#f(),this.render(),this.loadTiles(),this.#i())}teardown(){this.#o&&(this.#o.destroy(),this.#o=null)}render(){let t=this.#t(),e=t?.lat??NaN,i=t?.lng??NaN,o=!isNaN(e)&&!isNaN(i);this.children.length>0?this.setAttribute("data-has-caption",""):this.removeAttribute("data-has-caption");let a=o?`Map of ${e.toFixed(4)}, ${i.toFixed(4)}`:"Map",n=this.showMarker&&o?`<div part="marker" aria-hidden="true">${_(this.markerColor)}</div>`:"",c=o&&this.interactive!=="none"&&!this.staticOnly?'<div part="overlay"><button part="activate" aria-label="Activate interactive map" tabindex="0">Click to interact</button></div>':"";this.shadowRoot.innerHTML=`
186
+ </svg>`}var N=class extends g{static get observedAttributes(){return["lat","lng","zoom","marker","marker-color","provider","tile-url","interactive","static-only","src","place"]}#r=null;#n=!1;constructor(){super(),this.attachShadow({mode:"open"})}get lat(){return parseFloat(this.getAttribute("lat")??"")}get lng(){return parseFloat(this.getAttribute("lng")??"")}get zoom(){let t=parseInt(this.getAttribute("zoom")??"",10);return t>=1&&t<=19?t:15}get showMarker(){return this.getAttribute("marker")!=="false"}get markerColor(){return this.getAttribute("marker-color")||"#e74c3c"}get provider(){return this.getAttribute("provider")||"osm"}get tileUrl(){return this.getAttribute("tile-url")||""}get interactive(){let t=this.getAttribute("interactive");return t==="eager"||t==="none"?t:"click"}get staticOnly(){return this.hasAttribute("static-only")}#t(){let t=parseFloat(this.getAttribute("lat")??""),e=parseFloat(this.getAttribute("lng")??"");if(!isNaN(t)&&!isNaN(e))return{lat:t,lng:e};let i=this.getAttribute("src");if(i){let a=this.#f(i);if(a)return a}let r=this.querySelector("address[data-lat][data-lng]");if(r){let a=parseFloat(r.dataset.lat??""),s=parseFloat(r.dataset.lng??"");if(!isNaN(a)&&!isNaN(s))return{lat:a,lng:s}}let o=this.getAttribute("place");if(o){let a=this.#m(o);if(a)return a}let n=document.querySelector('meta[name="geo.position"]');if(n){let s=(n.getAttribute("content")||"").split(";");if(s.length===2){let h=parseFloat(s[0]),c=parseFloat(s[1]);if(!isNaN(h)&&!isNaN(c))return{lat:h,lng:c}}}return null}#f(t){let e=document.getElementById(t);if(!e)return null;if(e.tagName==="ADDRESS"&&e.dataset.lat&&e.dataset.lng){let i=parseFloat(e.dataset.lat),r=parseFloat(e.dataset.lng);if(!isNaN(i)&&!isNaN(r))return{lat:i,lng:r}}return e.tagName==="SCRIPT"&&e.type==="application/ld+json"?this.#g(e):null}#m(t){let e=document.querySelectorAll('script[type="application/ld+json"]');for(let i of e)try{let r=JSON.parse(i.textContent);if(r.name===t){let o=r.geo;if(o){let n=parseFloat(o.latitude),a=parseFloat(o.longitude);if(!isNaN(n)&&!isNaN(a))return{lat:n,lng:a}}}}catch{}return null}#g(t){try{let i=JSON.parse(t.textContent).geo;if(i){let r=parseFloat(i.latitude),o=parseFloat(i.longitude);if(!isNaN(r)&&!isNaN(o))return{lat:r,lng:o}}}catch{}return null}setup(){this.render(),this.loadTiles(),this.#i()}attributeChangedCallback(t,e,i){e!==i&&this.isConnected&&(this.#r&&this.#u(),this.render(),this.loadTiles(),this.#i())}teardown(){this.#r&&(this.#r.destroy(),this.#r=null)}render(){let t=this.#t(),e=t?.lat??NaN,i=t?.lng??NaN,r=!isNaN(e)&&!isNaN(i);this.children.length>0?this.setAttribute("data-has-caption",""):this.removeAttribute("data-has-caption");let n=r?`Map of ${e.toFixed(4)}, ${i.toFixed(4)}`:"Map",a=this.showMarker&&r?`<div part="marker" aria-hidden="true">${_(this.markerColor)}</div>`:"",h=r&&this.interactive!=="none"&&!this.staticOnly?'<div part="overlay"><button part="activate" aria-label="Activate interactive map" tabindex="0">Click to interact</button></div>':"";this.shadowRoot.innerHTML=`
187
187
  <style>${L}</style>
188
188
  <div part="container">
189
- <div part="tiles" role="img" aria-label="${a}"></div>
190
- ${n}
191
- ${c}
189
+ <div part="tiles" role="img" aria-label="${n}"></div>
190
+ ${a}
191
+ ${h}
192
192
  <div part="caption"><slot></slot></div>
193
193
  <div part="attribution">
194
194
  <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">&copy; OpenStreetMap</a>
195
195
  </div>
196
196
  </div>
197
- `}loadTiles(){let t=this.#t(),e=t?.lat??NaN,i=t?.lng??NaN;if(isNaN(e)||isNaN(i)){this.handleError("Missing or invalid lat/lng coordinates");return}let o=this.zoom,s=this.provider,{tileX:a,tileY:n,pixelX:r,pixelY:c}=$(e,i,o),h=this.shadowRoot.querySelector('[part="tiles"]');if(!h)return;h.innerHTML="";let d=this,u=d.offsetWidth||400,f=d.offsetHeight||300,b=Math.round(u/2-256-r),z=Math.round(f/2-256-c);h.style.transform=`translate(${b}px, ${z}px)`;let y=0,m=0,w=9;for(let x=-1;x<=1;x++)for(let M=-1;M<=1;M++){let D=a+M,q=n+x,R=v(s,o,D,q),p=document.createElement("img");p.src=R,p.alt="",p.loading="lazy",p.draggable=!1,p.addEventListener("load",()=>{y++,y+m===w&&this.dispatchEvent(new CustomEvent("geo-map:ready",{bubbles:!0,detail:{lat:e,lng:i,zoom:o}}))}),p.addEventListener("error",()=>{m++,m===w?this.handleError("Failed to load map tiles"):y+m===w&&this.dispatchEvent(new CustomEvent("geo-map:ready",{bubbles:!0,detail:{lat:e,lng:i,zoom:o}}))}),h.appendChild(p)}}#i(){let t=this.shadowRoot.querySelector('[part="overlay"]');if(!t)return;let e=t.querySelector('[part="activate"]');t.addEventListener("mouseenter",()=>this.#r(),{once:!0}),e&&e.addEventListener("focus",()=>this.#r(),{once:!0}),e&&e.addEventListener("click",()=>this.#u()),this.interactive==="eager"&&requestAnimationFrame(()=>this.#u())}#r(){if(this.#a)return;this.#a=!0;let t=this.provider,e;t==="carto-light"||t==="carto-dark"?e="https://basemaps.cartocdn.com":e="https://tile.openstreetmap.org";let i=document.createElement("link");i.rel="preconnect",i.href=e,i.crossOrigin="",document.head.appendChild(i)}async#u(){if(this.#o)return;let t=this.#t(),e=t?.lat??NaN,i=t?.lng??NaN;if(isNaN(e)||isNaN(i))return;let{MapInteraction:o}=await Promise.resolve().then(()=>(F(),P));this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.focus(),this.setAttribute("data-interactive-active",""),this.#o=new o({shadow:this.shadowRoot,host:this,lat:e,lng:i,zoom:this.zoom,provider:this.provider,onDeactivate:()=>this.#f()}),this.dispatchEvent(new CustomEvent("geo-map:activate",{bubbles:!0,detail:{lat:e,lng:i,zoom:this.zoom}}))}#f(){this.#o&&(this.#o.destroy(),this.#o=null,this.removeAttribute("data-interactive-active"),this.render(),this.loadTiles(),this.#i())}handleError(t){let e=this.shadowRoot.querySelector('[part="container"]');e&&(e.setAttribute("data-state","error"),e.setAttribute("data-error",t)),this.dispatchEvent(new CustomEvent("geo-map:error",{bubbles:!0,detail:{message:t}}))}};C("geo-map",N);export{N as GeoMap};
197
+ `}loadTiles(){let t=this.#t(),e=t?.lat??NaN,i=t?.lng??NaN;if(isNaN(e)||isNaN(i)){this.handleError("Missing or invalid lat/lng coordinates");return}let r=this.zoom,o=this.provider,{tileX:n,tileY:a,pixelX:s,pixelY:h}=S(e,i,r),c=this.shadowRoot.querySelector('[part="tiles"]');if(!c)return;c.innerHTML="";let d=this,u=d.offsetWidth||400,f=d.offsetHeight||300,b=Math.round(u/2-256-s),z=Math.round(f/2-256-h);c.style.transform=`translate(${b}px, ${z}px)`;let y=0,m=0,w=9;for(let x=-1;x<=1;x++)for(let M=-1;M<=1;M++){let D=n+M,q=a+x,R=v(o,r,D,q,this.tileUrl),p=document.createElement("img");p.src=R,p.alt="",p.loading="lazy",p.draggable=!1,p.addEventListener("load",()=>{y++,y+m===w&&this.dispatchEvent(new CustomEvent("geo-map:ready",{bubbles:!0,detail:{lat:e,lng:i,zoom:r}}))}),p.addEventListener("error",()=>{m++,m===w?this.handleError("Failed to load map tiles"):y+m===w&&this.dispatchEvent(new CustomEvent("geo-map:ready",{bubbles:!0,detail:{lat:e,lng:i,zoom:r}}))}),c.appendChild(p)}}#i(){let t=this.shadowRoot.querySelector('[part="overlay"]');if(!t)return;let e=t.querySelector('[part="activate"]');t.addEventListener("mouseenter",()=>this.#o(),{once:!0}),e&&e.addEventListener("focus",()=>this.#o(),{once:!0}),e&&e.addEventListener("click",()=>this.#s()),this.interactive==="eager"&&requestAnimationFrame(()=>this.#s())}#o(){if(this.#n)return;let t=this.tileUrl;if(t)try{let o=new URL(t,location.origin);if(o.origin===location.origin){this.#n=!0;return}this.#n=!0;let n=document.createElement("link");n.rel="preconnect",n.href=o.origin,n.crossOrigin="",document.head.appendChild(n);return}catch{}this.#n=!0;let e=this.provider,i;e==="carto-light"||e==="carto-dark"?i="https://basemaps.cartocdn.com":i="https://tile.openstreetmap.org";let r=document.createElement("link");r.rel="preconnect",r.href=i,r.crossOrigin="",document.head.appendChild(r)}async#s(){if(this.#r)return;let t=this.#t(),e=t?.lat??NaN,i=t?.lng??NaN;if(isNaN(e)||isNaN(i))return;let{MapInteraction:r}=await Promise.resolve().then(()=>(F(),P));this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.focus(),this.setAttribute("data-interactive-active",""),this.#r=new r({shadow:this.shadowRoot,host:this,lat:e,lng:i,zoom:this.zoom,provider:this.provider,tileUrl:this.tileUrl,onDeactivate:()=>this.#u()}),this.dispatchEvent(new CustomEvent("geo-map:activate",{bubbles:!0,detail:{lat:e,lng:i,zoom:this.zoom}}))}#u(){this.#r&&(this.#r.destroy(),this.#r=null,this.removeAttribute("data-interactive-active"),this.render(),this.loadTiles(),this.#i())}handleError(t){let e=this.shadowRoot.querySelector('[part="container"]');e&&(e.setAttribute("data-state","error"),e.setAttribute("data-error",t)),this.dispatchEvent(new CustomEvent("geo-map:error",{bubbles:!0,detail:{message:t}}))}};C("geo-map",N);export{N as GeoMap};
198
198
  //# sourceMappingURL=geo-map.js.map