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.
- package/dist/cdn/components/analytics-panel.js +34 -0
- package/dist/cdn/components/author-index.js +3 -0
- package/dist/cdn/components/brand-mark.js +2 -0
- package/dist/cdn/components/carousel-wc.js +1 -1
- package/dist/cdn/components/color-palette.js +13 -7
- package/dist/cdn/components/comment-wc.js +2 -0
- package/dist/cdn/components/consent-banner.js +1 -1
- package/dist/cdn/components/content-lens.js +2 -0
- package/dist/cdn/components/font-pairer.js +108 -0
- package/dist/cdn/components/geo-map.js +7 -7
- package/dist/cdn/components/gradient-builder.js +52 -0
- package/dist/cdn/components/highlight-wc.js +3 -0
- package/dist/cdn/components/manifest.json +93 -21
- package/dist/cdn/components/markdown-viewer.js +3 -3
- package/dist/cdn/components/motion-specimen.js +21 -0
- package/dist/cdn/components/note-wc.js +3 -0
- package/dist/cdn/components/notification-wc.js +37 -0
- package/dist/cdn/components/page-info.js +55 -24
- package/dist/cdn/components/page-toc.js +1 -1
- package/dist/cdn/components/popularity-index.js +9 -0
- package/dist/cdn/components/print-page.js +1 -1
- package/dist/cdn/components/recently-visited.js +3 -0
- package/dist/cdn/components/review-surface.js +11 -11
- package/dist/cdn/components/selection-menu.js +2 -0
- package/dist/cdn/components/semantic-palette.js +30 -0
- package/dist/cdn/components/settings-panel.js +55 -51
- package/dist/cdn/components/share-wc.js +2 -2
- package/dist/cdn/components/spacing-specimen.js +5 -5
- package/dist/cdn/components/split-surface.js +1 -1
- package/dist/cdn/components/text-reader.js +2 -2
- package/dist/cdn/components/theme-export.js +18 -0
- package/dist/cdn/components/theme-picker.js +58 -58
- package/dist/cdn/components/token-specimen.js +25 -20
- package/dist/cdn/components/topic-map.js +3 -0
- package/dist/cdn/components/trust-filter.js +4 -0
- package/dist/cdn/components/type-specimen.js +16 -13
- package/dist/cdn/components/watch-wc.js +3 -0
- package/dist/cdn/packs/design-system.full.js +124 -47
- package/dist/cdn/packs/effects.full.js +1 -1
- package/dist/cdn/packs/kawaii.full.css +1 -1
- package/dist/cdn/packs/kawaii.full.js +1 -1
- package/dist/cdn/packs/kawaii.theme.css +1 -1
- package/dist/cdn/packs/manifest.json +8 -38
- package/dist/cdn/packs/ui.full.css +1 -1
- package/dist/cdn/packs/ui.full.js +50 -50
- package/dist/cdn/packs/ux-planning.full.js +36 -36
- package/dist/cdn/themes/alpha1999.css +1 -1
- package/dist/cdn/themes/brutalist.css +1 -1
- package/dist/cdn/themes/claymorphism.css +1 -1
- package/dist/cdn/themes/genai.css +1 -1
- package/dist/cdn/themes/kawaii.css +1 -1
- package/dist/cdn/themes/magna.css +1 -1
- package/dist/cdn/themes/manifest.json +12 -12
- package/dist/cdn/themes/nes.css +1 -1
- package/dist/cdn/themes/neumorphism.css +1 -1
- package/dist/cdn/themes/rough.css +1 -1
- package/dist/cdn/themes/startup.css +1 -1
- package/dist/cdn/themes/super2026.css +1 -1
- package/dist/cdn/themes/win9x.css +1 -1
- package/dist/cdn/vanilla-breeze-core.css +1 -1
- package/dist/cdn/vanilla-breeze-core.js +119 -47
- package/dist/cdn/vanilla-breeze-extras.js +154 -74
- package/dist/cdn/vanilla-breeze.css +1 -1
- package/dist/cdn/vanilla-breeze.js +605 -249
- package/package.json +8 -6
- package/dist/cdn/packs/retro.bundle.js +0 -2
- package/dist/cdn/packs/retro.components.js +0 -1
- package/dist/cdn/packs/retro.effects.css +0 -2
- package/dist/cdn/packs/retro.effects.js +0 -16
- package/dist/cdn/packs/retro.full.css +0 -5
- package/dist/cdn/packs/retro.full.js +0 -16
- 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=>({"&":"&","<":"<",">":">",'"':""","'":"'"})[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=>({"&":"&","<":"<",">":">"})[t])}function h(s){return String(s??"").replace(/[&<>"]/g,t=>({"&":"&","<":"<",">":">",'"':"""})[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
|
|
2
|
-
|
|
3
|
-
|
|
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 "+(
|
|
6
|
-
<span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${
|
|
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
|
-
${
|
|
9
|
-
</div>`}).join("");this.innerHTML=`<div class="palette ${e}" role="list" aria-label="Color palette" style="${
|
|
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
|
|
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
|
|
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
|
|
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"]}#
|
|
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="${
|
|
190
|
-
${
|
|
191
|
-
${
|
|
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">© 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
|
|
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
|