vanilla-breeze 0.3.0 → 0.4.0

package/dist/cdn/components/image-gallery.js

@@ -1,2 +1,2 @@
-var I=Object.defineProperty;var B=(t,e)=>()=>(t&&(e=t(t=0)),e);var H=(t,e)=>{for(var i in e)I(t,i,{get:e[i],enumerable:!0})};var q={};H(q,{addDialogDismiss:()=>$,addFlickListener:()=>D,addLongPress:()=>P,addPullToRefresh:()=>X,addSwipeListener:()=>k,haptic:()=>x,initGestures:()=>C,makeSwipeable:()=>N});function k(t,e={}){let i=e.threshold??50,s=e.restraint??100,r=e.timeout??300,n=e.velocity??.5,l=e.minFlickDistance??10,a,c,f;function h(o){o.isPrimary&&(a=o.clientX,c=o.clientY,f=Date.now())}function d(o){if(!o.isPrimary)return;let m=o.clientX-a,v=o.clientY-c,u=Date.now()-f;if(u>r)return;let p=Math.abs(m),y=Math.abs(v),g=Math.max(p,y),b=u>0?g/u:0,w=b>=n&&g>=l,E;if((p>=i||w&&p>y)&&y<=s?E=m<0?"left":"right":(y>=i||w&&y>p)&&p<=s&&(E=v<0?"up":"down"),E){let F=E==="left"||E==="right"?p:y;t.dispatchEvent(new CustomEvent(`swipe-${E}`,{bubbles:!0,detail:{distance:F,duration:u,velocity:b,flick:w}}))}}return t.addEventListener("pointerdown",h,{passive:!0}),t.addEventListener("pointerup",d,{passive:!0}),()=>{t.removeEventListener("pointerdown",h),t.removeEventListener("pointerup",d)}}function D(t,e={}){let i=e.minDistance??10,s=e.velocity??.6,r=e.timeout??250,n=e.restraint??80,l,a,c;function f(d){d.isPrimary&&(l=d.clientX,a=d.clientY,c=Date.now())}function h(d){if(!d.isPrimary)return;let o=d.clientX-l,m=d.clientY-a,v=Date.now()-c;if(v===0||v>r)return;let u=Math.abs(o),p=Math.abs(m),y=Math.max(u,p);if(y<i)return;let g=y/v;if(g<s)return;let b;if(u>p&&p<=n?b=o<0?"left":"right":p>u&&u<=n&&(b=m<0?"up":"down"),b){let w=b==="left"||b==="right"?u:p;t.dispatchEvent(new CustomEvent(`swipe-${b}`,{bubbles:!0,detail:{distance:w,duration:v,velocity:g,flick:!0}}))}}return t.addEventListener("pointerdown",f,{passive:!0}),t.addEventListener("pointerup",h,{passive:!0}),()=>{t.removeEventListener("pointerdown",f),t.removeEventListener("pointerup",h)}}function N(t,e={}){let i=e.threshold??100,s=e.direction??"horizontal",r=e.removeOnDismiss??!0,n=s==="horizontal",l=0,a=0,c=!1;function f(u){!u.isPrimary||t.hasAttribute("data-dismissed")||(u.preventDefault(),c=!0,l=n?u.clientX:u.clientY,a=0,t.setPointerCapture(u.pointerId),t.setAttribute("data-swiping",""))}function h(u){if(!c||!u.isPrimary)return;a=(n?u.clientX:u.clientY)-l;let y=1-Math.min(Math.abs(a)/i,1)*.5;n?t.style.transform=`translateX(${a}px)`:t.style.transform=`translateY(${a}px)`,t.style.opacity=String(y)}function d(u){!c||!u.isPrimary||(c=!1,t.releasePointerCapture(u.pointerId),t.removeAttribute("data-swiping"),Math.abs(a)>=i?m(a>0?"right":"left"):v())}function o(u){!c||!u.isPrimary||(c=!1,t.releasePointerCapture(u.pointerId),t.removeAttribute("data-swiping"),v())}function m(u){let p=u==="right"?"100%":"-100%";t.style.transition="transform 0.2s ease-out, opacity 0.2s ease-out",t.style.transform=n?`translateX(${p})`:`translateY(${p})`,t.style.opacity="0",t.setAttribute("data-dismissed",""),x.dismiss(),t.dispatchEvent(new CustomEvent("swipe-dismiss",{bubbles:!0,detail:{direction:u,distance:Math.abs(a)}})),r&&t.addEventListener("transitionend",()=>t.remove(),{once:!0})}function v(){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",f),t.addEventListener("pointermove",h),t.addEventListener("pointerup",d),t.addEventListener("pointercancel",o),()=>{t.removeEventListener("pointerdown",f),t.removeEventListener("pointermove",h),t.removeEventListener("pointerup",d),t.removeEventListener("pointercancel",o)}}function X(t,e,i={}){let s=i.threshold??70,r=i.maxPull??120,n=document.createElement("div");n.setAttribute("data-pull-indicator",""),n.setAttribute("aria-hidden","true");let l=document.createElement("div");l.setAttribute("data-pull-spinner",""),n.appendChild(l),t.prepend(n);let a=0,c=!1,f=!1;function h(p){!p.isPrimary||f||t.scrollTop<=0&&(a=p.clientY,c=!0)}function d(p){if(!c||!p.isPrimary||f)return;let y=p.clientY-a;if(y<=0){n.style.transform="",n.style.opacity="";return}let g=Math.min(y,r),b=g/s;n.style.transform=`translateY(${g}px)`,n.style.opacity=String(Math.min(b,1)),b>=1?n.setAttribute("data-pull-ready",""):n.removeAttribute("data-pull-ready")}function o(p){!c||!p.isPrimary||(c=!1,n.hasAttribute("data-pull-ready")&&!f?v():u())}function m(p){!c||!p.isPrimary||(c=!1,u())}async function v(){f=!0,n.removeAttribute("data-pull-ready"),n.setAttribute("data-pull-loading",""),n.style.transform=`translateY(${s}px)`,n.style.opacity="1";try{await e()}finally{f=!1,n.removeAttribute("data-pull-loading"),u()}}function u(){n.style.transition="transform 0.3s ease, opacity 0.3s ease",n.style.transform="",n.style.opacity="",n.removeAttribute("data-pull-ready"),n.addEventListener("transitionend",()=>{n.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",h,{passive:!0}),t.addEventListener("pointermove",d,{passive:!0}),t.addEventListener("pointerup",o,{passive:!0}),t.addEventListener("pointercancel",m,{passive:!0}),()=>{t.removeEventListener("pointerdown",h),t.removeEventListener("pointermove",d),t.removeEventListener("pointerup",o),t.removeEventListener("pointercancel",m),n.remove()}}function P(t,e,i={}){let s=i.duration??500,r=i.hapticFeedback??!0,n=i.blockContextMenu??!0,l=null;function a(h){h.isPrimary&&(l=setTimeout(()=>{r&&x.tap(),e(h),l=null},s))}function c(){l&&(clearTimeout(l),l=null)}function f(h){n&&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",f),()=>{c(),t.removeEventListener("pointerdown",a),t.removeEventListener("pointermove",c),t.removeEventListener("pointerup",c),t.removeEventListener("pointercancel",c),t.removeEventListener("contextmenu",f)}}function $(t,e={}){let i=e.threshold??80,s=0,r=0,n=!1;function l(o){if(!o.isPrimary||!t.open)return;let m=o.target;m.closest("a, button, input, select, textarea, [contenteditable]")&&!m.closest("header")||(n=!0,s=o.clientY,r=0,t.setPointerCapture(o.pointerId),t.style.transition="none")}function a(o){if(!n||!o.isPrimary)return;if(r=o.clientY-s,r<=0){t.style.transform="",t.style.opacity="";return}let v=1-Math.min(r/i,1)*.4;t.style.transform=`translateY(${r}px)`,t.style.opacity=String(v)}function c(o){!n||!o.isPrimary||(n=!1,t.releasePointerCapture(o.pointerId),r>=i?h():d())}function f(o){!n||!o.isPrimary||(n=!1,t.releasePointerCapture(o.pointerId),d())}function h(){t.style.transition="transform 0.2s ease-out, opacity 0.2s ease-out",t.style.transform="translateY(100%)",t.style.opacity="0",x.dismiss(),t.addEventListener("transitionend",()=>{t.style.transition="",t.style.transform="",t.style.opacity="",t.close("dismiss")},{once:!0})}function d(){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",l),t.addEventListener("pointermove",a),t.addEventListener("pointerup",c),t.addEventListener("pointercancel",f),()=>{t.removeEventListener("pointerdown",l),t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",c),t.removeEventListener("pointercancel",f)}}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="flick"]'))e.push(D(i));for(let i of t.querySelectorAll('[data-gesture="dismiss"]'))e.push(N(i));for(let i of t.querySelectorAll('[data-gesture="long-press"]'))e.push(P(i,()=>{i.dispatchEvent(new CustomEvent("long-press",{bubbles:!0}))}));for(let i of t.querySelectorAll('dialog[data-gesture="dismiss-down"]'))e.push($(i));return()=>e.forEach(i=>i())}var x,Y=B(()=>{x={tap:()=>navigator.vibrate?.(8),confirm:()=>navigator.vibrate?.([8,40,8]),error:()=>navigator.vibrate?.([30,60,30]),dismiss:()=>navigator.vibrate?.(15)};C()});var O=window.matchMedia("(prefers-reduced-motion: reduce)");var S=new Map;function T(t,e,i={}){let s=i.priority??10,r={impl:e,bundle:i.bundle,contract:i.contract,priority:s},n=S.get(t);if(customElements.get(t)){if(!n||n.priority>=s){n&&n.priority===s&&n.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=s){n.priority===s&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${n.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}S.set(t,r),customElements.define(t,e)}var L=class extends HTMLElement{#t=[];#e;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let e of this.#t)e();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,i,s,r){e.addEventListener(i,s,r),this.#t.push(()=>e.removeEventListener(i,s,r))}setup(){}teardown(){}setState(e,i){this.#e||(this.#e=this.attachInternals());let s=this.#e.states;try{i?s.add(e):s.delete(e)}catch{let r=`--${e}`;i?s.add(r):s.delete(r)}}_adoptInternals(e){this.#e||(this.#e=e)}};function A(t){return document.startViewTransition?document.startViewTransition(t):t()}var z=0,M=class extends L{#t=[];#e=0;#n=null;#v=null;#i=null;#u=null;#d=null;#h=null;#a=null;#s=null;#c=null;#o="";#l=!1;setup(){return this.#o=`gallery-lb-${++z}`,this.#l=!!document.startViewTransition,this.#f(),this.#t.length===0?!1:(this.listen(this,"click",this.#y),!0)}teardown(){this.#c&&(this.#c(),this.#c=null),this.#n&&(this.#n.remove(),this.#n=null),this.#t=[]}get images(){return this.#t.map(e=>({href:e.href,thumbSrc:e.thumbSrc,alt:e.alt,caption:e.caption}))}set images(e){let i=Array.isArray(e)?e:[];for(let s of[...this.children])(s.tagName==="FIGURE"||s.tagName==="A")&&s.remove();for(let s of i){if(!s?.href||!s?.thumbSrc)continue;let r=s.caption?document.createElement("figure"):document.createElement("a"),n=r.tagName==="FIGURE"?document.createElement("a"):r;n.href=s.href;let l=document.createElement("img");if(l.src=s.thumbSrc,l.alt=s.alt||"",n.appendChild(l),r.tagName==="FIGURE"){r.appendChild(n);let a=document.createElement("figcaption");a.innerHTML=s.caption??"",r.appendChild(a)}this.appendChild(r)}this.#f(),this.dispatchEvent(new CustomEvent("image-gallery:images-changed",{detail:{images:this.images,source:"property"},bubbles:!0}))}open(e){if(e<0||e>=this.#t.length)return;this.#n||this.#b(),this.#p(e);let i=this.#t[e],s=this.getAttribute("transition")||"morph";if(this.#l&&s==="morph"&&this.#i&&this.#n){let r=`gallery-morph-${this.#o}`;i.thumbEl.style.viewTransitionName=r;let n=this.#i,l=this.#n;A(()=>{i.thumbEl.style.viewTransitionName="";let a=n.querySelector("img");a&&(a.style.viewTransitionName=r),l.showModal()}).finished?.then(()=>{let a=n.querySelector("img");a&&(a.style.viewTransitionName="")})}else this.#n?.showModal();this.#m(e)}close(){if(!this.#n?.open)return;let e=this.#t[this.#e],i=this.getAttribute("transition")||"morph";if(this.#l&&i==="morph"&&this.#i&&this.#n){let s=`gallery-morph-${this.#o}`,r=this.#i.querySelector("img");r&&(r.style.viewTransitionName=s);let n=this.#n;A(()=>{r&&(r.style.viewTransitionName=""),e.thumbEl.style.viewTransitionName=s,n.close()}).finished?.then(()=>{e.thumbEl.style.viewTransitionName=""})}else this.#n?.close()}next(){let e=this.hasAttribute("loop");this.#e<this.#t.length-1?this.#r(this.#e+1):e&&this.#r(0)}prev(){let e=this.hasAttribute("loop");this.#e>0?this.#r(this.#e-1):e&&this.#r(this.#t.length-1)}#f(){this.#t=[];for(let e of this.children){let i=e.tagName==="FIGURE",s=i?e.querySelector("a[href]"):e.matches("a[href]")?e:null;if(!s)continue;let r=s.querySelector("img");if(!r)continue;let n=i?e.querySelector("figcaption")?.innerHTML??null:null;this.#t.push({href:s.href,thumbSrc:r.src,alt:r.alt||"",caption:n,thumbEl:r})}}#y=e=>{let s=e.target?.closest("a[href]");if(!s||!this.contains(s))return;let r=s.querySelector("img"),n=this.#t.findIndex(l=>l.thumbEl===r);n!==-1&&(e.preventDefault(),this.open(n))};#b(){let e=document.createElement("dialog");e.id=this.#o,e.className="gallery-lightbox",e.dataset.size="full";let i=this.getAttribute("controls")||"edge";e.dataset.controls=i;let s=document.createElement("header"),r=document.createElement("span");r.className="gallery-counter",r.setAttribute("aria-live","polite"),r.setAttribute("aria-atomic","true"),this.#u=r;let n=document.createElement("button");n.type="button",n.className="gallery-close",n.setAttribute("commandfor",this.#o),n.setAttribute("command","close"),n.setAttribute("aria-label","Close gallery"),n.innerHTML='<icon-wc name="x" size="sm"></icon-wc>',this.listen(n,"click",()=>this.close()),s.append(r);let l=this.getAttribute("captions")||"auto";s.append(n);let a=document.createElement("section");a.className="gallery-stage",this.#v=a;let c=document.createElement("button");c.type="button",c.className="gallery-prev",c.setAttribute("aria-label","Previous image"),c.innerHTML='<icon-wc name="chevron-left" size="sm"></icon-wc>',this.#d=c;let f=document.createElement("figure");f.className="gallery-frame",this.#i=f;let h=document.createElement("button");if(h.type="button",h.className="gallery-next",h.setAttribute("aria-label","Next image"),h.innerHTML='<icon-wc name="chevron-right" size="sm"></icon-wc>',this.#h=h,a.append(c,f,h),l==="auto"){let d=document.createElement("footer");d.className="gallery-caption",d.hidden=!0;let o=document.createElement("button");o.type="button",o.className="gallery-info-btn",o.setAttribute("aria-label","Show image details"),o.setAttribute("aria-expanded","false"),o.innerHTML='<icon-wc name="info" size="sm"></icon-wc>',this.#a=o;let m=document.createElement("div");m.className="gallery-caption-text",m.hidden=!0,d.append(o,m),this.#s=m,e.append(s,a,d),this.listen(o,"click",()=>{let v=!m.hidden;m.hidden=v,o.setAttribute("aria-expanded",String(!v)),o.setAttribute("aria-label",v?"Show image details":"Hide image details")})}else e.append(s,a);this.append(e),this.#n=e,this.listen(c,"click",()=>this.prev()),this.listen(h,"click",()=>this.next()),this.listen(e,"keydown",this.#E),this.listen(e,"click",d=>{d.target===e&&this.close()}),this.listen(e,"close",()=>{let d=this.#t[this.#e];d&&(d.thumbEl.style.viewTransitionName="");let o=this.#i?.querySelector("img");o&&(o.style.viewTransitionName="")}),Promise.resolve().then(()=>(Y(),q)).then(({addSwipeListener:d})=>{this.#c=d(a,{threshold:40}),this.listen(a,"swipe-left",()=>this.next()),this.listen(a,"swipe-right",()=>this.prev())})}#p(e){let i=this.#t[e];this.#e=e;let s=document.createElement("img");if(s.src=i.href,s.alt=i.alt,!this.#i)return;let r=this.#i;r.innerHTML="",r.append(s);let n=this.getAttribute("captions")||"auto";if(n==="overlay"&&i.caption){let l=document.createElement("figcaption");l.innerHTML=i.caption,r.append(l)}else if(n==="auto"){let l=this.#s?.parentElement;this.#s&&this.#a&&l&&(i.caption?(this.#s.innerHTML=i.caption,l.hidden=!1,this.#s.hidden=!0,this.#a.setAttribute("aria-expanded","false"),this.#a.setAttribute("aria-label","Show image details")):(this.#s.innerHTML="",l.hidden=!0))}this.#g()}#r(e){let i=this.getAttribute("transition")||"morph";this.#l&&i!=="none"?A(()=>{this.#p(e)}):this.#p(e),this.#m(e)}#g(){let e=this.hasAttribute("loop"),i=this.#e===0,s=this.#e===this.#t.length-1;this.#d&&(this.#d.disabled=!e&&i),this.#h&&(this.#h.disabled=!e&&s),this.#u&&(this.#u.textContent=`${this.#e+1} of ${this.#t.length}`)}#E=e=>{switch(e.key){case"ArrowLeft":e.preventDefault(),this.prev();break;case"ArrowRight":e.preventDefault(),this.next();break;case"Home":e.preventDefault(),this.#r(0);break;case"End":e.preventDefault(),this.#r(this.#t.length-1);break}};#m(e){let i=s=>{if(s>=0&&s<this.#t.length){let r=new Image;r.src=this.#t[s].href}};i(e-1),i(e+1)}};T("image-gallery",M);export{M as ImageGallery};
+var B=Object.defineProperty;var H=(t,e)=>()=>(t&&(e=t(t=0)),e);var X=(t,e)=>{for(var i in e)B(t,i,{get:e[i],enumerable:!0})};var Y={};X(Y,{addDialogDismiss:()=>C,addFlickListener:()=>N,addLongPress:()=>$,addPullToRefresh:()=>z,addSwipeListener:()=>D,haptic:()=>x,initGestures:()=>q,makeSwipeable:()=>P});function D(t,e={}){let i=e.threshold??50,s=e.restraint??100,r=e.timeout??300,n=e.velocity??.5,l=e.minFlickDistance??10,a,c,f;function h(o){o.isPrimary&&(a=o.clientX,c=o.clientY,f=Date.now())}function d(o){if(!o.isPrimary)return;let m=o.clientX-a,v=o.clientY-c,u=Date.now()-f;if(u>r)return;let p=Math.abs(m),y=Math.abs(v),g=Math.max(p,y),b=u>0?g/u:0,w=b>=n&&g>=l,E;if((p>=i||w&&p>y)&&y<=s?E=m<0?"left":"right":(y>=i||w&&y>p)&&p<=s&&(E=v<0?"up":"down"),E){let I=E==="left"||E==="right"?p:y;t.dispatchEvent(new CustomEvent(`swipe-${E}`,{bubbles:!0,detail:{distance:I,duration:u,velocity:b,flick:w}}))}}return t.addEventListener("pointerdown",h,{passive:!0}),t.addEventListener("pointerup",d,{passive:!0}),()=>{t.removeEventListener("pointerdown",h),t.removeEventListener("pointerup",d)}}function N(t,e={}){let i=e.minDistance??10,s=e.velocity??.6,r=e.timeout??250,n=e.restraint??80,l,a,c;function f(d){d.isPrimary&&(l=d.clientX,a=d.clientY,c=Date.now())}function h(d){if(!d.isPrimary)return;let o=d.clientX-l,m=d.clientY-a,v=Date.now()-c;if(v===0||v>r)return;let u=Math.abs(o),p=Math.abs(m),y=Math.max(u,p);if(y<i)return;let g=y/v;if(g<s)return;let b;if(u>p&&p<=n?b=o<0?"left":"right":p>u&&u<=n&&(b=m<0?"up":"down"),b){let w=b==="left"||b==="right"?u:p;t.dispatchEvent(new CustomEvent(`swipe-${b}`,{bubbles:!0,detail:{distance:w,duration:v,velocity:g,flick:!0}}))}}return t.addEventListener("pointerdown",f,{passive:!0}),t.addEventListener("pointerup",h,{passive:!0}),()=>{t.removeEventListener("pointerdown",f),t.removeEventListener("pointerup",h)}}function P(t,e={}){let i=e.threshold??100,s=e.direction??"horizontal",r=e.removeOnDismiss??!0,n=s==="horizontal",l=0,a=0,c=!1;function f(u){!u.isPrimary||t.hasAttribute("data-dismissed")||(u.preventDefault(),c=!0,l=n?u.clientX:u.clientY,a=0,t.setPointerCapture(u.pointerId),t.setAttribute("data-swiping",""))}function h(u){if(!c||!u.isPrimary)return;a=(n?u.clientX:u.clientY)-l;let y=1-Math.min(Math.abs(a)/i,1)*.5;n?t.style.transform=`translateX(${a}px)`:t.style.transform=`translateY(${a}px)`,t.style.opacity=String(y)}function d(u){!c||!u.isPrimary||(c=!1,t.releasePointerCapture(u.pointerId),t.removeAttribute("data-swiping"),Math.abs(a)>=i?m(a>0?"right":"left"):v())}function o(u){!c||!u.isPrimary||(c=!1,t.releasePointerCapture(u.pointerId),t.removeAttribute("data-swiping"),v())}function m(u){let p=u==="right"?"100%":"-100%";t.style.transition="transform 0.2s ease-out, opacity 0.2s ease-out",t.style.transform=n?`translateX(${p})`:`translateY(${p})`,t.style.opacity="0",t.setAttribute("data-dismissed",""),x.dismiss(),t.dispatchEvent(new CustomEvent("swipe-dismiss",{bubbles:!0,detail:{direction:u,distance:Math.abs(a)}})),r&&t.addEventListener("transitionend",()=>t.remove(),{once:!0})}function v(){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",f),t.addEventListener("pointermove",h),t.addEventListener("pointerup",d),t.addEventListener("pointercancel",o),()=>{t.removeEventListener("pointerdown",f),t.removeEventListener("pointermove",h),t.removeEventListener("pointerup",d),t.removeEventListener("pointercancel",o)}}function z(t,e,i={}){let s=i.threshold??70,r=i.maxPull??120,n=document.createElement("div");n.setAttribute("data-pull-indicator",""),n.setAttribute("aria-hidden","true");let l=document.createElement("div");l.setAttribute("data-pull-spinner",""),n.appendChild(l),t.prepend(n);let a=0,c=!1,f=!1;function h(p){!p.isPrimary||f||t.scrollTop<=0&&(a=p.clientY,c=!0)}function d(p){if(!c||!p.isPrimary||f)return;let y=p.clientY-a;if(y<=0){n.style.transform="",n.style.opacity="";return}let g=Math.min(y,r),b=g/s;n.style.transform=`translateY(${g}px)`,n.style.opacity=String(Math.min(b,1)),b>=1?n.setAttribute("data-pull-ready",""):n.removeAttribute("data-pull-ready")}function o(p){!c||!p.isPrimary||(c=!1,n.hasAttribute("data-pull-ready")&&!f?v():u())}function m(p){!c||!p.isPrimary||(c=!1,u())}async function v(){f=!0,n.removeAttribute("data-pull-ready"),n.setAttribute("data-pull-loading",""),n.style.transform=`translateY(${s}px)`,n.style.opacity="1";try{await e()}finally{f=!1,n.removeAttribute("data-pull-loading"),u()}}function u(){n.style.transition="transform 0.3s ease, opacity 0.3s ease",n.style.transform="",n.style.opacity="",n.removeAttribute("data-pull-ready"),n.addEventListener("transitionend",()=>{n.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",h,{passive:!0}),t.addEventListener("pointermove",d,{passive:!0}),t.addEventListener("pointerup",o,{passive:!0}),t.addEventListener("pointercancel",m,{passive:!0}),()=>{t.removeEventListener("pointerdown",h),t.removeEventListener("pointermove",d),t.removeEventListener("pointerup",o),t.removeEventListener("pointercancel",m),n.remove()}}function $(t,e,i={}){let s=i.duration??500,r=i.hapticFeedback??!0,n=i.blockContextMenu??!0,l=null;function a(h){h.isPrimary&&(l=setTimeout(()=>{r&&x.tap(),e(h),l=null},s))}function c(){l&&(clearTimeout(l),l=null)}function f(h){n&&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",f),()=>{c(),t.removeEventListener("pointerdown",a),t.removeEventListener("pointermove",c),t.removeEventListener("pointerup",c),t.removeEventListener("pointercancel",c),t.removeEventListener("contextmenu",f)}}function C(t,e={}){let i=e.threshold??80,s=0,r=0,n=!1;function l(o){if(!o.isPrimary||!t.open)return;let m=o.target;m.closest("a, button, input, select, textarea, [contenteditable]")&&!m.closest("header")||(n=!0,s=o.clientY,r=0,t.setPointerCapture(o.pointerId),t.style.transition="none")}function a(o){if(!n||!o.isPrimary)return;if(r=o.clientY-s,r<=0){t.style.transform="",t.style.opacity="";return}let v=1-Math.min(r/i,1)*.4;t.style.transform=`translateY(${r}px)`,t.style.opacity=String(v)}function c(o){!n||!o.isPrimary||(n=!1,t.releasePointerCapture(o.pointerId),r>=i?h():d())}function f(o){!n||!o.isPrimary||(n=!1,t.releasePointerCapture(o.pointerId),d())}function h(){t.style.transition="transform 0.2s ease-out, opacity 0.2s ease-out",t.style.transform="translateY(100%)",t.style.opacity="0",x.dismiss(),t.addEventListener("transitionend",()=>{t.style.transition="",t.style.transform="",t.style.opacity="",t.close("dismiss")},{once:!0})}function d(){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",l),t.addEventListener("pointermove",a),t.addEventListener("pointerup",c),t.addEventListener("pointercancel",f),()=>{t.removeEventListener("pointerdown",l),t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",c),t.removeEventListener("pointercancel",f)}}function q(t=document){let e=[];for(let i of t.querySelectorAll('[data-gesture="swipe"]'))e.push(D(i));for(let i of t.querySelectorAll('[data-gesture="flick"]'))e.push(N(i));for(let i of t.querySelectorAll('[data-gesture="dismiss"]'))e.push(P(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(C(i));return()=>e.forEach(i=>i())}var x,M,F=H(()=>{x={tap:()=>navigator.vibrate?.(8),confirm:()=>navigator.vibrate?.([8,40,8]),error:()=>navigator.vibrate?.([30,60,30]),dismiss:()=>navigator.vibrate?.(15)};M=typeof document<"u"?document.documentElement:null;(!M||!M.hasAttribute("data-vb-gestures-init"))&&(M?.setAttribute("data-vb-gestures-init",""),q())});var R=window.matchMedia("(prefers-reduced-motion: reduce)");var T=new Map;function k(t,e,i={}){let s=i.priority??10,r={impl:e,bundle:i.bundle,contract:i.contract,priority:s},n=T.get(t);if(customElements.get(t)){if(!n||n.priority>=s){n&&n.priority===s&&n.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=s){n.priority===s&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${n.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}T.set(t,r),customElements.define(t,e)}var L=class extends HTMLElement{#t=[];#e;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let e of this.#t)e();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,i,s,r){e.addEventListener(i,s,r),this.#t.push(()=>e.removeEventListener(i,s,r))}setup(){}teardown(){}setState(e,i){this.#e||(this.#e=this.attachInternals());let s=this.#e.states;try{i?s.add(e):s.delete(e)}catch{let r=`--${e}`;i?s.add(r):s.delete(r)}}_adoptInternals(e){this.#e||(this.#e=e)}};function A(t){return document.startViewTransition?document.startViewTransition(t):t()}var U=0,S=class extends L{#t=[];#e=0;#n=null;#v=null;#i=null;#u=null;#d=null;#h=null;#a=null;#s=null;#c=null;#o="";#l=!1;setup(){return this.#o=`gallery-lb-${++U}`,this.#l=!!document.startViewTransition,this.#f(),this.#t.length===0?!1:(this.listen(this,"click",this.#y),!0)}teardown(){this.#c&&(this.#c(),this.#c=null),this.#n&&(this.#n.remove(),this.#n=null),this.#t=[]}get images(){return this.#t.map(e=>({href:e.href,thumbSrc:e.thumbSrc,alt:e.alt,caption:e.caption}))}set images(e){let i=Array.isArray(e)?e:[];for(let s of[...this.children])(s.tagName==="FIGURE"||s.tagName==="A")&&s.remove();for(let s of i){if(!s?.href||!s?.thumbSrc)continue;let r=s.caption?document.createElement("figure"):document.createElement("a"),n=r.tagName==="FIGURE"?document.createElement("a"):r;n.href=s.href;let l=document.createElement("img");if(l.src=s.thumbSrc,l.alt=s.alt||"",n.appendChild(l),r.tagName==="FIGURE"){r.appendChild(n);let a=document.createElement("figcaption");a.innerHTML=s.caption??"",r.appendChild(a)}this.appendChild(r)}this.#f(),this.dispatchEvent(new CustomEvent("image-gallery:images-changed",{detail:{images:this.images,source:"property"},bubbles:!0}))}open(e){if(e<0||e>=this.#t.length)return;this.#n||this.#b(),this.#p(e);let i=this.#t[e],s=this.getAttribute("transition")||"morph";if(this.#l&&s==="morph"&&this.#i&&this.#n){let r=`gallery-morph-${this.#o}`;i.thumbEl.style.viewTransitionName=r;let n=this.#i,l=this.#n;A(()=>{i.thumbEl.style.viewTransitionName="";let a=n.querySelector("img");a&&(a.style.viewTransitionName=r),l.showModal()}).finished?.then(()=>{let a=n.querySelector("img");a&&(a.style.viewTransitionName="")})}else this.#n?.showModal();this.#m(e)}close(){if(!this.#n?.open)return;let e=this.#t[this.#e],i=this.getAttribute("transition")||"morph";if(this.#l&&i==="morph"&&this.#i&&this.#n){let s=`gallery-morph-${this.#o}`,r=this.#i.querySelector("img");r&&(r.style.viewTransitionName=s);let n=this.#n;A(()=>{r&&(r.style.viewTransitionName=""),e.thumbEl.style.viewTransitionName=s,n.close()}).finished?.then(()=>{e.thumbEl.style.viewTransitionName=""})}else this.#n?.close()}next(){let e=this.hasAttribute("loop");this.#e<this.#t.length-1?this.#r(this.#e+1):e&&this.#r(0)}prev(){let e=this.hasAttribute("loop");this.#e>0?this.#r(this.#e-1):e&&this.#r(this.#t.length-1)}#f(){this.#t=[];for(let e of this.children){let i=e.tagName==="FIGURE",s=i?e.querySelector("a[href]"):e.matches("a[href]")?e:null;if(!s)continue;let r=s.querySelector("img");if(!r)continue;let n=i?e.querySelector("figcaption")?.innerHTML??null:null;this.#t.push({href:s.href,thumbSrc:r.src,alt:r.alt||"",caption:n,thumbEl:r})}}#y=e=>{let s=e.target?.closest("a[href]");if(!s||!this.contains(s))return;let r=s.querySelector("img"),n=this.#t.findIndex(l=>l.thumbEl===r);n!==-1&&(e.preventDefault(),this.open(n))};#b(){let e=document.createElement("dialog");e.id=this.#o,e.className="gallery-lightbox",e.dataset.size="full";let i=this.getAttribute("controls")||"edge";e.dataset.controls=i;let s=document.createElement("header"),r=document.createElement("span");r.className="gallery-counter",r.setAttribute("aria-live","polite"),r.setAttribute("aria-atomic","true"),this.#u=r;let n=document.createElement("button");n.type="button",n.className="gallery-close",n.setAttribute("commandfor",this.#o),n.setAttribute("command","close"),n.setAttribute("aria-label","Close gallery"),n.innerHTML='<icon-wc name="x" size="sm"></icon-wc>',this.listen(n,"click",()=>this.close()),s.append(r);let l=this.getAttribute("captions")||"auto";s.append(n);let a=document.createElement("section");a.className="gallery-stage",this.#v=a;let c=document.createElement("button");c.type="button",c.className="gallery-prev",c.setAttribute("aria-label","Previous image"),c.innerHTML='<icon-wc name="chevron-left" size="sm"></icon-wc>',this.#d=c;let f=document.createElement("figure");f.className="gallery-frame",this.#i=f;let h=document.createElement("button");if(h.type="button",h.className="gallery-next",h.setAttribute("aria-label","Next image"),h.innerHTML='<icon-wc name="chevron-right" size="sm"></icon-wc>',this.#h=h,a.append(c,f,h),l==="auto"){let d=document.createElement("footer");d.className="gallery-caption",d.hidden=!0;let o=document.createElement("button");o.type="button",o.className="gallery-info-btn",o.setAttribute("aria-label","Show image details"),o.setAttribute("aria-expanded","false"),o.innerHTML='<icon-wc name="info" size="sm"></icon-wc>',this.#a=o;let m=document.createElement("div");m.className="gallery-caption-text",m.hidden=!0,d.append(o,m),this.#s=m,e.append(s,a,d),this.listen(o,"click",()=>{let v=!m.hidden;m.hidden=v,o.setAttribute("aria-expanded",String(!v)),o.setAttribute("aria-label",v?"Show image details":"Hide image details")})}else e.append(s,a);this.append(e),this.#n=e,this.listen(c,"click",()=>this.prev()),this.listen(h,"click",()=>this.next()),this.listen(e,"keydown",this.#E),this.listen(e,"click",d=>{d.target===e&&this.close()}),this.listen(e,"close",()=>{let d=this.#t[this.#e];d&&(d.thumbEl.style.viewTransitionName="");let o=this.#i?.querySelector("img");o&&(o.style.viewTransitionName="")}),Promise.resolve().then(()=>(F(),Y)).then(({addSwipeListener:d})=>{this.#c=d(a,{threshold:40}),this.listen(a,"swipe-left",()=>this.next()),this.listen(a,"swipe-right",()=>this.prev())})}#p(e){let i=this.#t[e];this.#e=e;let s=document.createElement("img");if(s.src=i.href,s.alt=i.alt,!this.#i)return;let r=this.#i;r.innerHTML="",r.append(s);let n=this.getAttribute("captions")||"auto";if(n==="overlay"&&i.caption){let l=document.createElement("figcaption");l.innerHTML=i.caption,r.append(l)}else if(n==="auto"){let l=this.#s?.parentElement;this.#s&&this.#a&&l&&(i.caption?(this.#s.innerHTML=i.caption,l.hidden=!1,this.#s.hidden=!0,this.#a.setAttribute("aria-expanded","false"),this.#a.setAttribute("aria-label","Show image details")):(this.#s.innerHTML="",l.hidden=!0))}this.#g()}#r(e){let i=this.getAttribute("transition")||"morph";this.#l&&i!=="none"?A(()=>{this.#p(e)}):this.#p(e),this.#m(e)}#g(){let e=this.hasAttribute("loop"),i=this.#e===0,s=this.#e===this.#t.length-1;this.#d&&(this.#d.disabled=!e&&i),this.#h&&(this.#h.disabled=!e&&s),this.#u&&(this.#u.textContent=`${this.#e+1} of ${this.#t.length}`)}#E=e=>{switch(e.key){case"ArrowLeft":e.preventDefault(),this.prev();break;case"ArrowRight":e.preventDefault(),this.next();break;case"Home":e.preventDefault(),this.#r(0);break;case"End":e.preventDefault(),this.#r(this.#t.length-1);break}};#m(e){let i=s=>{if(s>=0&&s<this.#t.length){let r=new Image;r.src=this.#t[s].href}};i(e-1),i(e+1)}};k("image-gallery",S);export{S as ImageGallery};
 //# sourceMappingURL=image-gallery.js.map

package/dist/cdn/components/manifest.json

@@ -5,7 +5,7 @@
   },
   "activity-feed": {
     "file": "activity-feed.js",
-    "size": 7248
+    "size": 7400
   },
   "ai-chat": {
     "file": "ai-chat.js",
@@ -21,7 +21,7 @@
   },
   "audio-player": {
     "file": "audio-player.js",
-    "size": 18450
+    "size": 18448
   },
   "audio-visualizer": {
     "file": "audio-visualizer.js",
@@ -49,7 +49,7 @@
   },
   "carousel-wc": {
     "file": "carousel-wc.js",
-    "size": 16128
+    "size": 16745
   },
   "change-set": {
     "file": "change-set.js",
@@ -79,17 +79,25 @@
     "file": "command-palette.js",
     "size": 9664
   },
+  "command-group": {
+    "file": "command-palette.js",
+    "size": 9664
+  },
+  "command-item": {
+    "file": "command-palette.js",
+    "size": 9664
+  },
   "comment-box": {
     "file": "comment-box.js",
-    "size": 52980
+    "size": 53761
   },
   "comment-thread": {
     "file": "comment-thread.js",
-    "size": 58813
+    "size": 59762
   },
   "comment-wc": {
     "file": "comment-wc.js",
-    "size": 2587
+    "size": 2635
   },
   "compare-surface": {
     "file": "compare-surface.js",
@@ -101,7 +109,7 @@
   },
   "content-lens": {
     "file": "content-lens.js",
-    "size": 3583
+    "size": 3611
   },
   "content-swap": {
     "file": "content-swap.js",
@@ -109,7 +117,7 @@
   },
   "context-menu": {
     "file": "context-menu.js",
-    "size": 10091
+    "size": 10131
   },
   "data-table": {
     "file": "data-table.js",
@@ -125,7 +133,7 @@
   },
   "diagram-wc": {
     "file": "diagram-wc.js",
-    "size": 7952
+    "size": 7951
   },
   "drag-surface": {
     "file": "drag-surface.js",
@@ -133,7 +141,7 @@
   },
   "drop-down": {
     "file": "drop-down.js",
-    "size": 9254
+    "size": 9174
   },
   "emoji-picker": {
     "file": "emoji-picker.js",
@@ -147,6 +155,10 @@
     "file": "foot-notes.js",
     "size": 3643
   },
+  "foot-note": {
+    "file": "foot-notes.js",
+    "size": 3643
+  },
   "form-field": {
     "file": "form-field.js",
     "size": 3132
@@ -173,12 +185,16 @@
   },
   "image-gallery": {
     "file": "image-gallery.js",
-    "size": 16226
+    "size": 16374
   },
   "map-area": {
     "file": "image-map.js",
     "size": 8461
   },
+  "image-map": {
+    "file": "image-map.js",
+    "size": 8461
+  },
   "include-file": {
     "file": "include-file.js",
     "size": 3852
@@ -223,6 +239,10 @@
     "file": "page-tour.js",
     "size": 13101
   },
+  "tour-step": {
+    "file": "page-tour.js",
+    "size": 13101
+  },
   "pager-wc": {
     "file": "pager-wc.js",
     "size": 6202
@@ -253,7 +273,7 @@
   },
   "reaction-bar": {
     "file": "reaction-bar.js",
-    "size": 8923
+    "size": 8981
   },
   "reader-view": {
     "file": "reader-view.js",
@@ -269,7 +289,7 @@
   },
   "score-card": {
     "file": "score-card.js",
-    "size": 11160
+    "size": 11158
   },
   "selection-menu": {
     "file": "selection-menu.js",
@@ -277,7 +297,7 @@
   },
   "settings-panel": {
     "file": "settings-panel.js",
-    "size": 53022
+    "size": 53168
   },
   "share-wc": {
     "file": "share-wc.js",
@@ -297,7 +317,7 @@
   },
   "site-search": {
     "file": "site-search.js",
-    "size": 8552
+    "size": 8583
   },
   "slide-accept": {
     "file": "slide-accept.js",
@@ -305,7 +325,7 @@
   },
   "social-embed": {
     "file": "social-embed.js",
-    "size": 4850
+    "size": 6346
   },
   "split-surface": {
     "file": "split-surface.js",
@@ -333,15 +353,15 @@
   },
   "theme-picker": {
     "file": "theme-picker.js",
-    "size": 41693
+    "size": 42358
   },
   "time-index": {
     "file": "time-index.js",
-    "size": 4434
+    "size": 4652
   },
   "time-picker": {
     "file": "time-picker.js",
-    "size": 11449
+    "size": 11523
   },
   "toast-msg": {
     "file": "toast-msg.js",
@@ -361,7 +381,7 @@
   },
   "version-switcher": {
     "file": "version-switcher.js",
-    "size": 19088
+    "size": 19155
   },
   "video-player": {
     "file": "video-player.js",
@@ -378,5 +398,9 @@
   "youtube-player": {
     "file": "youtube-player.js",
     "size": 3763
+  },
+  "icon-wc": {
+    "file": "icon-wc.js",
+    "size": 5964
   }
 }

package/dist/cdn/components/reaction-bar.js

@@ -1,2 +1,2 @@
-var g=window.matchMedia("(prefers-reduced-motion: reduce)");var p=new Map;function c(r,t,s={}){let e=s.priority??10,o={impl:t,bundle:s.bundle,contract:s.contract,priority:e},i=p.get(r);if(customElements.get(r)){if(!i||i.priority>=e){i&&i.priority===e&&i.impl!==t&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${i.bundle}" (priority ${i.priority}). Skipping "${s.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${i.bundle}" cannot be replaced (customElements.define is permanent). "${s.bundle}" has higher priority but arrived late.`);return}if(i&&i.priority>=e){i.priority===e&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${i.bundle}". Skipping "${s.bundle}" (first wins at equal priority).`);return}p.set(r,o),customElements.define(r,t)}var a=class extends HTMLElement{#e=[];#t;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,s,e,o){t.addEventListener(s,e,o),this.#e.push(()=>t.removeEventListener(s,e,o))}setup(){}teardown(){}setState(t,s){this.#t||(this.#t=this.attachInternals());let e=this.#t.states;try{s?e.add(t):e.delete(t)}catch{let o=`--${t}`;s?e.add(o):e.delete(o)}}_adoptInternals(t){this.#t||(this.#t=t)}};var h=CSS.supports("anchor-name","--x"),f=CSS.supports("position-area","bottom"),b=0,d=class extends a{#e=null;#t=null;#s=null;#o=null;setup(){this.id||(this.id=`pop-over-${++b}`);let t=this.dataset.mode||"auto";this.hasAttribute("popover")||this.setAttribute("popover",t),this.#a(),this.#r(),this.#s=s=>{let e=s.newState==="open"?"show":"hide";this.dispatchEvent(new CustomEvent(`pop-over:${e}`,{detail:{state:s.newState},bubbles:!0,composed:!0})),!h&&s.newState==="open"&&this.#e&&this.#i()},this.listen(this,"beforetoggle",this.#s),h||(this.#o=()=>{this.matches(":popover-open")&&this.#e&&this.#i()},this.listen(window,"resize",this.#o),this.listen(window,"scroll",this.#o,{capture:!0,passive:!0}))}show(){this.matches(":popover-open")||this.showPopover()}hide(){this.matches(":popover-open")&&this.hidePopover()}toggle(){this.matches(":popover-open")?this.hide():this.show()}get open(){return this.matches(":popover-open")}#a(){let t=this.dataset.anchor;t?this.#e=document.getElementById(t)||document.querySelector(t):this.#e=document.querySelector(`[popovertarget="${CSS.escape(this.id)}"]`)}#r(){if(!(!this.#e||!h)&&(this.#t=`--pop-over-anchor-${this.id}`,this.#e.style.setProperty("anchor-name",this.#t),this.style.setProperty("position-anchor",this.#t),this.setAttribute("data-anchor-name",this.#t||""),!f)){let t=this.dataset.position||"bottom";this.#n(t)}}#n(t){let s="var(--_pop-over-offset, var(--size-xs))",e={top:{bottom:`calc(anchor(top) + ${s})`,left:"anchor(left)"},bottom:{top:`calc(anchor(bottom) + ${s})`,left:"anchor(left)"},left:{right:`calc(anchor(left) + ${s})`,top:"anchor(top)"},right:{left:`calc(anchor(right) + ${s})`,top:"anchor(top)"}},o=t.split("-")[0],i=e[o]||e.bottom;Object.entries(i).forEach(([n,l])=>this.style.setProperty(n,l))}#i(){if(!this.#e)return;let t=this.#e.getBoundingClientRect(),s=this.dataset.position||"bottom",e=this.#c(),o,i;switch(s.split("-")[0]){case"top":o=t.top-this.offsetHeight-e,i=t.left;break;case"left":o=t.top,i=t.left-this.offsetWidth-e;break;case"right":o=t.top,i=t.right+e;break;default:o=t.bottom+e,i=t.left;break}s.endsWith("-end")&&(s.startsWith("top")||s.startsWith("bottom")?i=t.right-this.offsetWidth:o=t.bottom-this.offsetHeight),this.style.position="fixed",this.style.top=`${Math.round(o)}px`,this.style.left=`${Math.round(i)}px`,this.style.margin="0"}#c(){let t={none:0,xs:4,s:8,m:16,l:24};return t[this.dataset.offset]??t.xs}};c("pop-over",d);var m=0,u=class extends a{#e;#t;#s;#o;setup(){this.setAttribute("role","toolbar"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Reactions"),this.#e=this.querySelector(":scope > template[data-palette]"),this.#a().forEach(t=>this.#r(t)),this.#c(),this.#d(),this.#l(),this.listen(this,"keydown",this.#f)}#a(){return[...this.querySelectorAll(":scope > button[data-reaction]")]}#r(t){if(t.dataset.decorated==="")return;t.dataset.decorated="",t.type="button",t.setAttribute("role","button");let s=t.textContent;t.replaceChildren();let e=document.createElement("span");e.className="reaction-emoji",e.setAttribute("aria-hidden","true"),e.textContent=s;let o=document.createElement("span");o.className="reaction-count",o.setAttribute("aria-hidden","true"),t.appendChild(e),t.appendChild(o),this.#n(t),this.listen(t,"click",()=>this.#i(t))}#n(t){let s=Number(t.dataset.count)||0,e=t.hasAttribute("data-mine"),o=t.querySelector(".reaction-emoji")?.textContent??"";t.querySelector(".reaction-count").textContent=s>0?String(s):"",t.setAttribute("aria-pressed",e?"true":"false");let i=s===1?"reaction":"reactions",n=e?", you reacted":"";t.setAttribute("aria-label",`${o}, ${s} ${i}${n}`)}#i(t){if(this.hasAttribute("data-disabled"))return;let s=t.dataset.reaction,e=Number(t.dataset.count)||0,o=t.hasAttribute("data-mine");this.dispatchEvent(new CustomEvent("reaction-bar:toggle",{bubbles:!0,detail:{reaction:s,action:o?"remove":"add",count:e,mine:o}}))}#c(){this.#t=document.createElement("button"),this.#t.type="button",this.#t.className="reaction-trigger",this.#t.textContent=this.getAttribute("data-trigger-icon")||"\u{1F600}",this.#t.setAttribute("aria-label",this.getAttribute("data-trigger-label")||"Add reaction"),this.#t.setAttribute("aria-haspopup","dialog"),this.#t.setAttribute("aria-expanded","false"),this.hasAttribute("data-disabled")&&(this.#t.disabled=!0),this.appendChild(this.#t)}#d(){if(!this.#e)return;let t=`reaction-bar-palette-${++m}`;this.#t.setAttribute("popovertarget",t),this.#s=document.createElement("pop-over"),this.#s.id=t,this.#s.className="reaction-palette",this.#s.dataset.position="top",this.#s.setAttribute("role","dialog"),this.#s.setAttribute("aria-label","Choose a reaction"),this.#o=document.createElement("div"),this.#o.className="reaction-palette-list",this.#o.setAttribute("role","group"),[...this.#e.content.cloneNode(!0).querySelectorAll("button[data-reaction]")].forEach(e=>{e.type="button",e.classList.add("reaction-palette-option");let o=e.textContent;e.setAttribute("aria-label",o),this.listen(e,"click",()=>this.#u(e)),this.#o.appendChild(e)}),this.#s.appendChild(this.#o),this.appendChild(this.#s),this.listen(this.#s,"pop-over:show",()=>{this.#t.setAttribute("aria-expanded","true"),this.dispatchEvent(new CustomEvent("reaction-bar:palette-open",{bubbles:!0})),this.#o.querySelector("button")?.focus()}),this.listen(this.#s,"pop-over:hide",()=>{this.#t.setAttribute("aria-expanded","false"),this.dispatchEvent(new CustomEvent("reaction-bar:palette-close",{bubbles:!0}))}),this.listen(this.#o,"keydown",this.#p)}#u(t){if(this.hasAttribute("data-disabled"))return;let s=t.dataset.reaction,e=this.querySelector(`:scope > button[data-reaction="${CSS.escape(s)}"]`);e?this.#i(e):this.dispatchEvent(new CustomEvent("reaction-bar:toggle",{bubbles:!0,detail:{reaction:s,action:"add",count:0,mine:!1}})),this.#s?.hide(),this.#t.focus()}#p=t=>{let s=[...this.#o.querySelectorAll("button")],e=s.indexOf(document.activeElement);if(e===-1)return;let o=e;switch(t.key){case"ArrowRight":case"ArrowDown":t.preventDefault(),o=(e+1)%s.length;break;case"ArrowLeft":case"ArrowUp":t.preventDefault(),o=(e-1+s.length)%s.length;break;case"Home":t.preventDefault(),o=0;break;case"End":t.preventDefault(),o=s.length-1;break;default:return}s[o].focus()};#h(){return[...this.querySelectorAll(":scope > button[data-reaction], :scope > .reaction-trigger")]}#l(){this.#h().forEach((s,e)=>s.setAttribute("tabindex",e===0?"0":"-1"))}#f=t=>{let s=this.#h(),e=document.activeElement?s.indexOf(document.activeElement):-1;if(e===-1)return;let o=e;switch(t.key){case"ArrowRight":t.preventDefault(),o=(e+1)%s.length;break;case"ArrowLeft":t.preventDefault(),o=(e-1+s.length)%s.length;break;case"Home":t.preventDefault(),o=0;break;case"End":t.preventDefault(),o=s.length-1;break;default:return}s.forEach((i,n)=>i.setAttribute("tabindex",n===o?"0":"-1")),s[o].focus()};setCount(t,s,e={}){let o=Number(s)||0,i=this.querySelector(`:scope > button[data-reaction="${CSS.escape(t)}"]`);if(o<=0){i&&(i.remove(),this.#l());return}if(!i){let n=this.#e?.content.querySelector(`button[data-reaction="${CSS.escape(t)}"]`),l=n?n.textContent:t;i=document.createElement("button"),i.dataset.reaction=t,i.textContent=l,this.insertBefore(i,this.#t),this.#r(i)}i.dataset.count=String(o),e.mine===!0?i.setAttribute("data-mine",""):e.mine===!1&&i.removeAttribute("data-mine"),this.#n(i),this.#l()}openPalette(){this.#s?.show()}closePalette(){this.#s?.hide()}};c("reaction-bar",u);export{u as ReactionBar};
+var g=window.matchMedia("(prefers-reduced-motion: reduce)");var p=new Map;function c(r,t,s={}){let e=s.priority??10,o={impl:t,bundle:s.bundle,contract:s.contract,priority:e},i=p.get(r);if(customElements.get(r)){if(!i||i.priority>=e){i&&i.priority===e&&i.impl!==t&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${i.bundle}" (priority ${i.priority}). Skipping "${s.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${i.bundle}" cannot be replaced (customElements.define is permanent). "${s.bundle}" has higher priority but arrived late.`);return}if(i&&i.priority>=e){i.priority===e&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${i.bundle}". Skipping "${s.bundle}" (first wins at equal priority).`);return}p.set(r,o),customElements.define(r,t)}var a=class extends HTMLElement{#e=[];#t;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,s,e,o){t.addEventListener(s,e,o),this.#e.push(()=>t.removeEventListener(s,e,o))}setup(){}teardown(){}setState(t,s){this.#t||(this.#t=this.attachInternals());let e=this.#t.states;try{s?e.add(t):e.delete(t)}catch{let o=`--${t}`;s?e.add(o):e.delete(o)}}_adoptInternals(t){this.#t||(this.#t=t)}};var h=CSS.supports("anchor-name","--x"),f=CSS.supports("position-area","bottom"),b=0,d=class extends a{#e=null;#t=null;#s=null;#o=null;setup(){this.id||(this.id=`pop-over-${++b}`);let t=this.dataset.mode||"auto";this.hasAttribute("popover")||this.setAttribute("popover",t),this.#a(),this.#r(),this.#s=s=>{let e=s.newState==="open"?"show":"hide";this.dispatchEvent(new CustomEvent(`pop-over:${e}`,{detail:{state:s.newState},bubbles:!0,composed:!0})),!h&&s.newState==="open"&&this.#e&&this.#i()},this.listen(this,"beforetoggle",this.#s),h||(this.#o=()=>{this.matches(":popover-open")&&this.#e&&this.#i()},this.listen(window,"resize",this.#o),this.listen(window,"scroll",this.#o,{capture:!0,passive:!0}))}show(){this.matches(":popover-open")||this.showPopover()}hide(){this.matches(":popover-open")&&this.hidePopover()}toggle(){this.matches(":popover-open")?this.hide():this.show()}get open(){return this.matches(":popover-open")}#a(){let t=this.dataset.anchor;t?this.#e=document.getElementById(t)||document.querySelector(t):this.#e=document.querySelector(`[popovertarget="${CSS.escape(this.id)}"]`)}#r(){if(!(!this.#e||!h)&&(this.#t=`--pop-over-anchor-${this.id}`,this.#e.style.setProperty("anchor-name",this.#t),this.style.setProperty("position-anchor",this.#t),this.setAttribute("data-anchor-name",this.#t||""),!f)){let t=this.dataset.position||"bottom";this.#n(t)}}#n(t){let s="var(--_pop-over-offset, var(--size-xs))",e={top:{bottom:`calc(anchor(top) + ${s})`,left:"anchor(left)"},bottom:{top:`calc(anchor(bottom) + ${s})`,left:"anchor(left)"},left:{right:`calc(anchor(left) + ${s})`,top:"anchor(top)"},right:{left:`calc(anchor(right) + ${s})`,top:"anchor(top)"}},o=t.split("-")[0],i=e[o]||e.bottom;Object.entries(i).forEach(([n,l])=>this.style.setProperty(n,l))}#i(){if(!this.#e)return;let t=this.#e.getBoundingClientRect(),s=this.dataset.position||"bottom",e=this.#c(),o,i;switch(s.split("-")[0]){case"top":o=t.top-this.offsetHeight-e,i=t.left;break;case"left":o=t.top,i=t.left-this.offsetWidth-e;break;case"right":o=t.top,i=t.right+e;break;default:o=t.bottom+e,i=t.left;break}s.endsWith("-end")&&(s.startsWith("top")||s.startsWith("bottom")?i=t.right-this.offsetWidth:o=t.bottom-this.offsetHeight),this.style.position="fixed",this.style.top=`${Math.round(o)}px`,this.style.left=`${Math.round(i)}px`,this.style.margin="0"}#c(){let t={none:0,xs:4,s:8,m:16,l:24};return t[this.dataset.offset]??t.xs}};c("pop-over",d);var m=0,u=class extends a{#e;#t;#s;#o;setup(){this.setAttribute("role","toolbar"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Reactions"),this.#e=this.querySelector(":scope > template[data-palette]"),this.#a().forEach(t=>this.#r(t)),this.#c(),this.#d(),this.#l(),this.listen(this,"keydown",this.#f)}#a(){return[...this.querySelectorAll(":scope > button[data-reaction]")]}#r(t){if(t.dataset.decorated==="")return;t.dataset.decorated="",t.type="button",t.setAttribute("role","button");let s=t.textContent;t.replaceChildren();let e=document.createElement("span");e.className="reaction-emoji",e.setAttribute("aria-hidden","true"),e.textContent=s;let o=document.createElement("span");o.className="reaction-count",o.setAttribute("aria-hidden","true"),t.appendChild(e),t.appendChild(o),this.#n(t),this.listen(t,"click",()=>this.#i(t))}#n(t){let s=Number(t.dataset.count)||0,e=t.hasAttribute("data-mine"),o=t.querySelector(".reaction-emoji")?.textContent??"";t.querySelector(".reaction-count").textContent=s>0?String(s):"",t.setAttribute("aria-pressed",e?"true":"false");let i=s===1?"reaction":"reactions",n=e?", you reacted":"";t.setAttribute("aria-label",`${o}, ${s} ${i}${n}`)}#i(t){if(this.hasAttribute("data-disabled"))return;let s=t.dataset.reaction,e=Number(t.dataset.count)||0,o=t.hasAttribute("data-mine");this.dispatchEvent(new CustomEvent("reaction-bar:toggle",{bubbles:!0,detail:{reaction:s,action:o?"remove":"add",count:e,mine:o}}))}#c(){this.#t?.parentNode!==this&&(this.#t=document.createElement("button"),this.#t.type="button",this.#t.className="reaction-trigger",this.#t.textContent=this.getAttribute("data-trigger-icon")||"\u{1F600}",this.#t.setAttribute("aria-label",this.getAttribute("data-trigger-label")||"Add reaction"),this.#t.setAttribute("aria-haspopup","dialog"),this.#t.setAttribute("aria-expanded","false"),this.hasAttribute("data-disabled")&&(this.#t.disabled=!0),this.appendChild(this.#t))}#d(){if(!this.#e||this.#s?.parentNode===this)return;let t=`reaction-bar-palette-${++m}`;this.#t.setAttribute("popovertarget",t),this.#s=document.createElement("pop-over"),this.#s.id=t,this.#s.className="reaction-palette",this.#s.dataset.position="top",this.#s.setAttribute("role","dialog"),this.#s.setAttribute("aria-label","Choose a reaction"),this.#o=document.createElement("div"),this.#o.className="reaction-palette-list",this.#o.setAttribute("role","group"),[...this.#e.content.cloneNode(!0).querySelectorAll("button[data-reaction]")].forEach(e=>{e.type="button",e.classList.add("reaction-palette-option");let o=e.textContent;e.setAttribute("aria-label",o),this.listen(e,"click",()=>this.#u(e)),this.#o.appendChild(e)}),this.#s.appendChild(this.#o),this.appendChild(this.#s),this.listen(this.#s,"pop-over:show",()=>{this.#t.setAttribute("aria-expanded","true"),this.dispatchEvent(new CustomEvent("reaction-bar:palette-open",{bubbles:!0})),this.#o.querySelector("button")?.focus()}),this.listen(this.#s,"pop-over:hide",()=>{this.#t.setAttribute("aria-expanded","false"),this.dispatchEvent(new CustomEvent("reaction-bar:palette-close",{bubbles:!0}))}),this.listen(this.#o,"keydown",this.#p)}#u(t){if(this.hasAttribute("data-disabled"))return;let s=t.dataset.reaction,e=this.querySelector(`:scope > button[data-reaction="${CSS.escape(s)}"]`);e?this.#i(e):this.dispatchEvent(new CustomEvent("reaction-bar:toggle",{bubbles:!0,detail:{reaction:s,action:"add",count:0,mine:!1}})),this.#s?.hide(),this.#t.focus()}#p=t=>{let s=[...this.#o.querySelectorAll("button")],e=s.indexOf(document.activeElement);if(e===-1)return;let o=e;switch(t.key){case"ArrowRight":case"ArrowDown":t.preventDefault(),o=(e+1)%s.length;break;case"ArrowLeft":case"ArrowUp":t.preventDefault(),o=(e-1+s.length)%s.length;break;case"Home":t.preventDefault(),o=0;break;case"End":t.preventDefault(),o=s.length-1;break;default:return}s[o].focus()};#h(){return[...this.querySelectorAll(":scope > button[data-reaction], :scope > .reaction-trigger")]}#l(){this.#h().forEach((s,e)=>s.setAttribute("tabindex",e===0?"0":"-1"))}#f=t=>{let s=this.#h(),e=document.activeElement?s.indexOf(document.activeElement):-1;if(e===-1)return;let o=e;switch(t.key){case"ArrowRight":t.preventDefault(),o=(e+1)%s.length;break;case"ArrowLeft":t.preventDefault(),o=(e-1+s.length)%s.length;break;case"Home":t.preventDefault(),o=0;break;case"End":t.preventDefault(),o=s.length-1;break;default:return}s.forEach((i,n)=>i.setAttribute("tabindex",n===o?"0":"-1")),s[o].focus()};setCount(t,s,e={}){let o=Number(s)||0,i=this.querySelector(`:scope > button[data-reaction="${CSS.escape(t)}"]`);if(o<=0){i&&(i.remove(),this.#l());return}if(!i){let n=this.#e?.content.querySelector(`button[data-reaction="${CSS.escape(t)}"]`),l=n?n.textContent:t;i=document.createElement("button"),i.dataset.reaction=t,i.textContent=l,this.insertBefore(i,this.#t),this.#r(i)}i.dataset.count=String(o),e.mine===!0?i.setAttribute("data-mine",""):e.mine===!1&&i.removeAttribute("data-mine"),this.#n(i),this.#l()}openPalette(){this.#s?.show()}closePalette(){this.#s?.hide()}};c("reaction-bar",u);export{u as ReactionBar};
 //# sourceMappingURL=reaction-bar.js.map

package/dist/cdn/components/score-card.js

@@ -5,8 +5,8 @@ var c=`
     --_gap:             var(--score-card-gap, var(--size-s, 0.75rem));
     --_value-size:      var(--score-card-value-size, var(--font-size-3xl, 2rem));
     --_value-weight:    var(--score-card-value-weight, var(--font-weight-bold, 700));
-    --_title-size:      var(--score-card-title-size, var(--font-size-sm, 0.875rem));
-    --_meta-size:       var(--score-card-meta-size, var(--font-size-sm, 0.875rem));
+    --_title-size:      var(--score-card-title-size, var(--font-size-s, 0.875rem));
+    --_meta-size:       var(--score-card-meta-size, var(--font-size-s, 0.875rem));
     --_sparkline-h:     var(--score-card-sparkline-height, 40px);
     --_surface:         var(--score-card-surface, var(--color-surface, #fff));
     --_border:          var(--score-card-border, 1px solid var(--color-border-subtle, var(--color-border, #e5e7eb)));