vanilla-breeze 0.4.0 → 0.4.1

package/dist/cdn/vanilla-breeze.js

@@ -801,7 +801,7 @@ svg {
                     <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">&copy; OpenStreetMap</a>
                 </div>
             </div>
-        `}loadTiles(){let t=this.#i(),e=t?.lat??NaN,i=t?.lng??NaN;if(isNaN(e)||isNaN(i)){this.handleError("Missing or invalid lat/lng coordinates");return}let n=this.zoom,r=this.provider,{tileX:a,tileY:o,pixelX:l,pixelY:h}=Nu(e,i,n),c=this.shadowRoot.querySelector('[part="tiles"]');if(!c)return;c.innerHTML="";let u=this,d=u.offsetWidth||400,p=u.offsetHeight||300,f=Math.round(d/2-256-l),m=Math.round(p/2-256-h);c.style.transform=`translate(${f}px, ${m}px)`;let v=0,y=0,w=9;for(let x=-1;x<=1;x++)for(let T=-1;T<=1;T++){let C=a+T,N=o+x,q=Hi(r,n,C,N,this.tileUrl),L=document.createElement("img");L.src=q,L.alt="",L.loading="lazy",L.draggable=!1,L.addEventListener("load",()=>{v++,v+y===w&&this.dispatchEvent(new CustomEvent("geo-map:ready",{bubbles:!0,detail:{lat:e,lng:i,zoom:n}}))}),L.addEventListener("error",()=>{y++,y===w?this.handleError("Failed to load map tiles"):v+y===w&&this.dispatchEvent(new CustomEvent("geo-map:ready",{bubbles:!0,detail:{lat:e,lng:i,zoom:n}}))}),c.appendChild(L)}}#a(){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.#l()),this.interactive==="eager"&&requestAnimationFrame(()=>this.#l())}#o(){if(this.#e)return;let t=this.tileUrl;if(t)try{let r=new URL(t,location.origin);if(r.origin===location.origin){this.#e=!0;return}this.#e=!0;let a=document.createElement("link");a.rel="preconnect",a.href=r.origin,a.crossOrigin="",document.head.appendChild(a);return}catch{}this.#e=!0;let e=this.provider,i;e==="carto-light"||e==="carto-dark"?i="https://basemaps.cartocdn.com":i="https://tile.openstreetmap.org";let n=document.createElement("link");n.rel="preconnect",n.href=i,n.crossOrigin="",document.head.appendChild(n)}async#l(){if(this.#t)return;let t=this.#i(),e=t?.lat??NaN,i=t?.lng??NaN;if(isNaN(e)||isNaN(i))return;let{MapInteraction:n}=await Promise.resolve().then(()=>(Du(),$u));this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.focus(),this.setAttribute("data-interactive-active",""),this.#t=new n({shadow:this.shadowRoot,host:this,lat:e,lng:i,zoom:this.zoom,provider:this.provider,tileUrl:this.tileUrl,onDeactivate:()=>this.#c()}),this.dispatchEvent(new CustomEvent("geo-map:activate",{bubbles:!0,detail:{lat:e,lng:i,zoom:this.zoom}}))}#c(){this.#t&&(this.#t.destroy(),this.#t=null,this.removeAttribute("data-interactive-active"),this.render(),this.loadTiles(),this.#a())}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}}))}};g("geo-map",Sa);A();E();var Vi=null;async function ov(){return Vi||(Vi=await Promise.resolve().then(()=>(Ta(),Ca)),Vi)}var La=8,lv=150,Iu="vb-emoji-recent",Na=class extends b{#t;#e;#i;#s;#r;#n=!1;#a=[];#o=-1;#l=null;#c="";#h=null;#m=!1;#d=null;#u=null;setup(){return this.#f(),!0}async#f(){this.#h=await ov(),this.#m||(this.#p(),this.#m=!0),this.#t&&this.listen(this.#t,"click",this.#y),this.listen(document,"click",this.#A),this.listen(document,"keydown",this.#$)}teardown(){this.#l&&(clearTimeout(this.#l),this.setState("search-pending",!1))}#p(){this.#t=this.querySelector(":scope > [data-trigger]")||this.querySelector(":scope > button"),this.#t||(this.#t=document.createElement("button"),this.#t.type="button",this.#t.textContent="\u{1F600}",this.#t.setAttribute("data-trigger",""),this.prepend(this.#t)),this.#t.setAttribute("aria-haspopup","dialog"),this.#t.setAttribute("aria-expanded","false"),this.#t.setAttribute("aria-label",this.#t.getAttribute("aria-label")||"Open emoji picker"),this.#w()}#w(){this.#e=document.createElement("div"),this.#e.classList.add("picker"),this.#e.setAttribute("role","dialog"),this.#e.setAttribute("aria-label","Emoji picker"),this.#e.hidden=!0,this.#i=document.createElement("input"),this.#i.type="search",this.#i.placeholder="Search emoji\u2026",this.#i.setAttribute("aria-label","Search emoji"),this.#i.addEventListener("input",this.#x),this.#i.addEventListener("keydown",this.#E),this.#e.appendChild(this.#i),this.#r=document.createElement("nav"),this.#r.classList.add("categories"),this.#r.setAttribute("role","tablist"),this.#r.setAttribute("aria-label","Emoji categories");for(let t of this.#h.EMOJI_GROUPS){let e=document.createElement("button");e.type="button",e.setAttribute("role","tab"),e.setAttribute("aria-selected",t===this.#h.EMOJI_GROUPS[0]?"true":"false"),e.setAttribute("data-group",t),e.setAttribute("aria-label",this.#h.EMOJI_GROUP_LABELS[t]),e.title=this.#h.EMOJI_GROUP_LABELS[t],e.textContent=this.#h.EMOJI_GROUP_ICONS[t],e.addEventListener("click",this.#L),this.#r.appendChild(e)}this.#e.appendChild(this.#r),this.#s=document.createElement("div"),this.#s.classList.add("grid"),this.#s.setAttribute("role","grid"),this.#s.setAttribute("aria-label","Emoji"),this.#s.addEventListener("keydown",this.#C),this.#e.appendChild(this.#s),this.appendChild(this.#e),this.#v()}#v(t=null){this.#s.innerHTML="",this.#a=[],this.#o=-1;let e=this.#q();if(!this.#c&&e.length>0){let n=document.createElement("div");n.classList.add("group-label"),n.textContent="Recently Used",n.setAttribute("data-group-heading","recent"),this.#s.appendChild(n);for(let r of e){let a=this.#h.EMOJI_MAP.get(r);a&&this.#g(a)}}let i=t||null;if(i)if(i.length===0){let n=document.createElement("div");n.classList.add("no-results"),n.textContent="No emoji found",this.#s.appendChild(n)}else for(let n of i)this.#g(n);else for(let n of this.#h.EMOJI_GROUPS){let r=document.createElement("div");r.classList.add("group-label"),r.textContent=this.#h.EMOJI_GROUP_LABELS[n],r.setAttribute("data-group-heading",n),this.#s.appendChild(r);let a=this.#h.getByGroup(n);for(let o of a)this.#g(o)}}#g(t){let e=document.createElement("button");e.type="button",e.setAttribute("role","gridcell"),e.setAttribute("tabindex","-1"),e.setAttribute("data-shortcode",t.shortcode),e.title=`${t.name} :${t.shortcode}:`,e.textContent=t.emoji,e.addEventListener("click",this.#k),this.#s.appendChild(e),this.#a.push(e)}#b(){let t=this.getAttribute("for");if(!t)return;let e=document.getElementById(t);if(e){if(e.tagName==="INPUT"||e.tagName==="TEXTAREA"){let i=e;this.#d={start:i.selectionStart??i.value.length,end:i.selectionEnd??i.value.length},this.#u=null}else if(e.isContentEditable){let i=window.getSelection();i&&i.rangeCount>0&&(this.#u=i.getRangeAt(0).cloneRange()),this.#d=null}}}#y=t=>{t.stopPropagation(),this.toggle()};#A=t=>{this.#n&&!this.contains(t.target)&&this.close()};#$=t=>{t.key==="Escape"&&this.#n&&(t.preventDefault(),this.close(),this.#t?.focus())};#x=()=>{this.#l&&clearTimeout(this.#l),this.setState("search-pending",!0),this.#l=setTimeout(()=>{if(this.setState("search-pending",!1),this.#c=this.#i.value.trim(),this.#c){let t=this.#h.searchEmoji(this.#c);this.#v(t)}else this.#v()},lv)};#E=t=>{t.key==="ArrowDown"&&(t.preventDefault(),this.#a.length>0&&this.#T(0))};#L=t=>{let e=t.currentTarget.getAttribute("data-group");for(let n of this.#r.querySelectorAll('[role="tab"]'))n.setAttribute("aria-selected",n===t.currentTarget?"true":"false");this.#c&&(this.#i.value="",this.#c="",this.#v());let i=this.#s.querySelector(`[data-group-heading="${e}"]`);i&&i.scrollIntoView({block:"start",behavior:"smooth"})};#C=t=>{let e=this.#a.length;if(e!==0)switch(t.key){case"ArrowRight":t.preventDefault(),this.#T(this.#o+1);break;case"ArrowLeft":t.preventDefault(),this.#T(this.#o-1);break;case"ArrowDown":t.preventDefault(),this.#T(this.#o+La);break;case"ArrowUp":t.preventDefault(),this.#o<La?(this.#i.focus(),this.#o=-1):this.#T(this.#o-La);break;case"Home":t.preventDefault(),this.#T(0);break;case"End":t.preventDefault(),this.#T(e-1);break;case"Enter":case" ":t.preventDefault(),this.#o>=0&&this.#a[this.#o].click();break;case"Tab":this.close();break}};#k=t=>{let e=t.currentTarget.getAttribute("data-shortcode"),i=this.#h.EMOJI_MAP.get(e);i&&(this.#N(e),this.#D(i),this.dispatchEvent(new CustomEvent("emoji-picker:select",{bubbles:!0,detail:{shortcode:i.shortcode,emoji:i.emoji,name:i.name,keywords:i.keywords}})),this.close(),this.#M())};#T(t){let e=this.#a.length;e!==0&&(t<0&&(t=0),t>=e&&(t=e-1),this.#o=t,this.#a[t].focus())}#D(t){let e=this.getAttribute("for");if(!e)return;let i=document.getElementById(e);if(i){if(i.tagName==="INPUT"||i.tagName==="TEXTAREA"){let n=i,r=this.#d?.start??n.value.length,a=this.#d?.end??r,o=n.value.slice(0,r),l=n.value.slice(a);n.value=o+t.emoji+l;let h=r+t.emoji.length;n.setSelectionRange(h,h),this.#d={start:h,end:h},i.dispatchEvent(new Event("input",{bubbles:!0}))}else if(i.isContentEditable){i.focus();let n=window.getSelection();if(n&&this.#u){n.removeAllRanges(),n.addRange(this.#u);let r=n.getRangeAt(0);r.deleteContents();let a=document.createTextNode(t.emoji);r.insertNode(a),r.setStartAfter(a),r.collapse(!0),n.removeAllRanges(),n.addRange(r),this.#u=r.cloneRange()}else if(n){let r=document.createRange();r.selectNodeContents(i),r.collapse(!1);let a=document.createTextNode(t.emoji);r.insertNode(a),r.setStartAfter(a),r.collapse(!0),n.removeAllRanges(),n.addRange(r)}}}}#M(){let t=this.getAttribute("for");if(!t)return;let e=document.getElementById(t);e&&e.focus()}#q(){try{return JSON.parse(localStorage.getItem(Iu)||"[]")}catch{return[]}}#N(t){let e=parseInt(this.getAttribute("recent-limit")??"24",10)||24,i=this.#q();i=i.filter(n=>n!==t),i.unshift(t),i.length>e&&(i.length=e);try{localStorage.setItem(Iu,JSON.stringify(i))}catch{}}open(){this.#n||(this.#b(),this.#n=!0,this.setAttribute("open",""),this.#t?.setAttribute("aria-expanded","true"),this.#e.hidden=!1,this.#i.value="",this.#c="",this.#v(),requestAnimationFrame(()=>{this.#i.focus()}),this.dispatchEvent(new CustomEvent("emoji-picker:open",{bubbles:!0})))}close(){this.#n&&(this.#n=!1,this.removeAttribute("open"),this.#t?.setAttribute("aria-expanded","false"),this.#e.hidden=!0,this.dispatchEvent(new CustomEvent("emoji-picker:close",{bubbles:!0})))}toggle(){this.#n?this.close():this.open()}get isOpen(){return this.#n}};g("emoji-picker",Na);A();E();ht();var Bu="environment",Ru="preferences",Ma={timeOfDay:!1,seasonal:!1},cv=900*1e3,Bt={...Ma};function Wt(s,t,e){return s+(t-s)*Math.min(1,Math.max(0,e))}var Gt={_timer:null,_baseHues:null,_timeOverride:null,_monthOverride:null,async init(){let s=await M.get(Bu,Ru);Bt=s?{...Ma,...s}:{...Ma},(Bt.timeOfDay||Bt.seasonal)&&(this._captureBaseHues(),this._update(),this._startLoop()),window.addEventListener("vb:theme-change",()=>{this._hasActiveSource()&&requestAnimationFrame(()=>{this._captureBaseHues(),this._update()})})},load(){return{...Bt}},save(s){return Bt={...Bt,...s},M.set(Bu,Ru,Bt).catch(()=>{}),{...Bt}},setTimeOverride(s){this._timeOverride=s,this._hasActiveSource()&&this._update()},setMonthOverride(s){this._monthOverride=s,this._hasActiveSource()&&this._update()},setSource(s,t){let e=this.save({[s]:t});t?(this._captureBaseHues(),this._update(),this._startLoop()):this._hasActiveSource(e)?this._update():(this._clearModifiers(),this._stopLoop())},_hasActiveSource(s){let t=s||this.load();return t.timeOfDay||t.seasonal},_captureBaseHues(){let s=document.documentElement;s.style.removeProperty("--hue-primary"),s.style.removeProperty("--hue-secondary"),s.style.removeProperty("--hue-accent");let t=s.getAttribute("data-theme");if(t){let e=`[data-theme~="${t}"]`;for(let i of document.styleSheets)try{for(let n=0;n<i.cssRules.length;n++){let r=i.cssRules[n];if(r.selectorText?.includes(e)&&!r.selectorText.includes("dark")){let a=r.style?.getPropertyValue("--hue-primary");if(a){this._baseHues={primary:parseFloat(a)||260,secondary:parseFloat(r.style.getPropertyValue("--hue-secondary"))||200,accent:parseFloat(r.style.getPropertyValue("--hue-accent"))||30};return}}}}catch{}}this._baseHues={primary:260,secondary:200,accent:30}},_update(){let s=this.load(),t=0;s.timeOfDay&&(t+=this._getTimeOfDayOffset()),s.seasonal&&(t+=this._getSeasonalOffset());let e=document.documentElement;t!==0&&this._baseHues?(e.style.setProperty("--hue-primary",String(this._baseHues.primary+t)),e.style.setProperty("--hue-secondary",String(this._baseHues.secondary+t)),e.style.setProperty("--hue-accent",String(this._baseHues.accent+t*.5))):t===0&&this._clearModifiers()},_clearModifiers(){let s=document.documentElement;s.style.removeProperty("--hue-primary"),s.style.removeProperty("--hue-secondary"),s.style.removeProperty("--hue-accent")},_getTimeOfDayOffset(){let s=this._timeOverride??new Date().getHours()+new Date().getMinutes()/60;return s<5?-20:s<7?Wt(-20,20,(s-5)/2):s<10?Wt(20,5,(s-7)/3):s<14?Wt(5,0,(s-10)/4):s<17?Wt(0,-5,(s-14)/3):s<19?Wt(-5,15,(s-17)/2):s<21?Wt(15,-10,(s-19)/2):Wt(-10,-20,(s-21)/8)},_getHemisphere(){return window.__VB_ENV_LOCATION?.hemisphere||"north"},_getSeasonalOffset(){let s=this._monthOverride??new Date().getMonth(),e=this._getHemisphere()==="south"?(s+6)%12:s;return e>=2&&e<=4?5:e>=5&&e<=7?10:e>=8&&e<=10?-5:-10},_startLoop(){this._timer||(this._timer=setInterval(()=>this._update(),cv))},_stopLoop(){this._timer&&clearInterval(this._timer),this._timer=null}};var Ui=null;function Ou(){return"0.4.0-513cbce1"}function hv(){let s=document.querySelectorAll('script[src*="vanilla-breeze"]'),t="/cdn/sw.js";for(let e of s){let i=e.getAttribute("src");if(i){let n=i.lastIndexOf("/");if(n!==-1){t=i.slice(0,n)+"/sw.js";break}}}return t}function Fu(){return Ui||(Ui=navigator.serviceWorker?.ready??Promise.reject(new Error("SW not supported"))),Ui}function Hu(s){return new Promise((t,e)=>{navigator.serviceWorker?.controller?Pu(navigator.serviceWorker.controller,s,t,e):Fu().then(i=>{let n=i.active||i.waiting||i.installing;n?Pu(n,s,t,e):e(new Error("No active service worker"))}).catch(e)})}function Pu(s,t,e,i){let n=new MessageChannel;n.port1.onmessage=r=>e(r.data),n.port1.onmessageerror=()=>i(new Error("Message error")),s.postMessage({type:t},[n.port2]),setTimeout(()=>i(new Error("SW message timeout")),5e3)}async function zu(){return Hu("GET_STATUS")}async function ju(){return Hu("CLEAR_CACHE")}async function Vu(){let s=await Fu();return await s.update(),{updated:!!s.waiting}}function uv(){return typeof window>"u"||!("serviceWorker"in navigator)?!1:window.__VB_SERVICE_WORKER?!0:document.querySelector('meta[name="vb-service-worker"]')?.content==="true"}if(uv()){let s=hv();window.addEventListener("load",()=>{Ui=navigator.serviceWorker.register(s).catch(t=>{console.warn("[VB] Service worker registration failed:",t)})})}ht();var ge=null,ft="settings",He={motionFx:!0,sounds:!1},_a=class extends b{#t=null;#e=null;#i=!1;#s=[];#r={...He};#n=!1;setup(){return this.#a(),!0}async#a(){await this.#o(),this.#g(),this.#y(),this.#P(),this.listen(window,"vb:theme-change",this.#F),this.listen(window,"vb:extensions-change",this.#F),this.listen(window,"vb:a11y-themes-change",this.#F)}teardown(){this.#e?.remove(),this.#e=null}get data(){return{a11yThemes:[...this.#s],extensions:{...this.#r},sticky:this.#n}}set data(t){if(!t||typeof t!="object")return;let e=[];Array.isArray(t.a11yThemes)&&(this.#s=[...t.a11yThemes],e.push(M.set(ft,"a11y",this.#s))),t.extensions&&typeof t.extensions=="object"&&(this.#r={...He,...t.extensions},e.push(M.set(ft,"extensions",this.#r))),t.sticky!=null&&(this.#n=!!t.sticky,e.push(M.set(ft,"sticky",this.#n?"on":"off"))),Promise.all(e).then(()=>{this.#P?.(),this.dispatchEvent(new CustomEvent("settings-panel:data-changed",{detail:{data:this.data,source:"property"},bubbles:!0}))})}async#o(){let[t,e,i]=await Promise.all([M.get(ft,"a11y"),M.get(ft,"extensions"),M.get(ft,"sticky")]);this.#s=Array.isArray(t)?t:[],this.#r={...He,...e??{}},this.#n=i==="on"}#l(t){return t!==""&&t!==void 0}#c(t){return t==="compact"?"compact":t==="spacious"?"spacious":"default"}#h(t,e){return t?e==="compact"?"compact":e==="spacious"?"spacious":"default":""}#m(){return this.#n}#d(t){return t!==""&&t!==void 0}#u(t){return t==="flush"?"flush":t==="elevated"?"elevated":"default"}#f(t,e){return t?e==="flush"?"flush":e==="elevated"?"elevated":"default":""}#p(t){if(!t)return"card";let e=t.split(/\s+/);for(let i of e)if(i==="stretch"||i==="integrated")return i;return"card"}#w(t){return t?t.split(/\s+/).includes("fixed"):!1}#v(t,e){let i=[];return t&&t!=="card"&&i.push(t),e&&i.push("fixed"),i.join(" ")||"card"}#g(){this.#t=this.querySelector(":scope > [data-trigger]")||this.querySelector(":scope > button"),this.#t||(this.#t=document.createElement("button"),this.#t.setAttribute("data-trigger",""),this.#t.setAttribute("aria-label","Site settings"),this.#t.className="settings-trigger",this.#t.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>',this.prepend(this.#t)),this.#t.setAttribute("aria-haspopup","dialog"),this.#t.setAttribute("aria-expanded","false"),this.#e=document.createElement("div"),this.#e.className="settings-panel",this.#e.setAttribute("role","dialog"),this.#e.setAttribute("aria-label","Site settings");let t=`settings-panel-${crypto.randomUUID().slice(0,8)}`;this.#e.id=t,this.#t.setAttribute("aria-controls",t),this.#e.innerHTML=this.#b(),this.appendChild(this.#e)}#b(){let{mode:t,brand:e,fluid:i,backdrop:n,backdropChrome:r,pageBgType:a,pageBgColor:o,pageBgGradStart:l,pageBgGradEnd:h,pageBgGradDir:c}=_.getState(),u=this.#V(),d=this.#X(),p=this.#l(i),f=this.#c(i),m=this.#d(n),v=this.#u(n);return`
+        `}loadTiles(){let t=this.#i(),e=t?.lat??NaN,i=t?.lng??NaN;if(isNaN(e)||isNaN(i)){this.handleError("Missing or invalid lat/lng coordinates");return}let n=this.zoom,r=this.provider,{tileX:a,tileY:o,pixelX:l,pixelY:h}=Nu(e,i,n),c=this.shadowRoot.querySelector('[part="tiles"]');if(!c)return;c.innerHTML="";let u=this,d=u.offsetWidth||400,p=u.offsetHeight||300,f=Math.round(d/2-256-l),m=Math.round(p/2-256-h);c.style.transform=`translate(${f}px, ${m}px)`;let v=0,y=0,w=9;for(let x=-1;x<=1;x++)for(let T=-1;T<=1;T++){let C=a+T,N=o+x,q=Hi(r,n,C,N,this.tileUrl),L=document.createElement("img");L.src=q,L.alt="",L.loading="lazy",L.draggable=!1,L.addEventListener("load",()=>{v++,v+y===w&&this.dispatchEvent(new CustomEvent("geo-map:ready",{bubbles:!0,detail:{lat:e,lng:i,zoom:n}}))}),L.addEventListener("error",()=>{y++,y===w?this.handleError("Failed to load map tiles"):v+y===w&&this.dispatchEvent(new CustomEvent("geo-map:ready",{bubbles:!0,detail:{lat:e,lng:i,zoom:n}}))}),c.appendChild(L)}}#a(){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.#l()),this.interactive==="eager"&&requestAnimationFrame(()=>this.#l())}#o(){if(this.#e)return;let t=this.tileUrl;if(t)try{let r=new URL(t,location.origin);if(r.origin===location.origin){this.#e=!0;return}this.#e=!0;let a=document.createElement("link");a.rel="preconnect",a.href=r.origin,a.crossOrigin="",document.head.appendChild(a);return}catch{}this.#e=!0;let e=this.provider,i;e==="carto-light"||e==="carto-dark"?i="https://basemaps.cartocdn.com":i="https://tile.openstreetmap.org";let n=document.createElement("link");n.rel="preconnect",n.href=i,n.crossOrigin="",document.head.appendChild(n)}async#l(){if(this.#t)return;let t=this.#i(),e=t?.lat??NaN,i=t?.lng??NaN;if(isNaN(e)||isNaN(i))return;let{MapInteraction:n}=await Promise.resolve().then(()=>(Du(),$u));this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.focus(),this.setAttribute("data-interactive-active",""),this.#t=new n({shadow:this.shadowRoot,host:this,lat:e,lng:i,zoom:this.zoom,provider:this.provider,tileUrl:this.tileUrl,onDeactivate:()=>this.#c()}),this.dispatchEvent(new CustomEvent("geo-map:activate",{bubbles:!0,detail:{lat:e,lng:i,zoom:this.zoom}}))}#c(){this.#t&&(this.#t.destroy(),this.#t=null,this.removeAttribute("data-interactive-active"),this.render(),this.loadTiles(),this.#a())}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}}))}};g("geo-map",Sa);A();E();var Vi=null;async function ov(){return Vi||(Vi=await Promise.resolve().then(()=>(Ta(),Ca)),Vi)}var La=8,lv=150,Iu="vb-emoji-recent",Na=class extends b{#t;#e;#i;#s;#r;#n=!1;#a=[];#o=-1;#l=null;#c="";#h=null;#m=!1;#d=null;#u=null;setup(){return this.#f(),!0}async#f(){this.#h=await ov(),this.#m||(this.#p(),this.#m=!0),this.#t&&this.listen(this.#t,"click",this.#y),this.listen(document,"click",this.#A),this.listen(document,"keydown",this.#$)}teardown(){this.#l&&(clearTimeout(this.#l),this.setState("search-pending",!1))}#p(){this.#t=this.querySelector(":scope > [data-trigger]")||this.querySelector(":scope > button"),this.#t||(this.#t=document.createElement("button"),this.#t.type="button",this.#t.textContent="\u{1F600}",this.#t.setAttribute("data-trigger",""),this.prepend(this.#t)),this.#t.setAttribute("aria-haspopup","dialog"),this.#t.setAttribute("aria-expanded","false"),this.#t.setAttribute("aria-label",this.#t.getAttribute("aria-label")||"Open emoji picker"),this.#w()}#w(){this.#e=document.createElement("div"),this.#e.classList.add("picker"),this.#e.setAttribute("role","dialog"),this.#e.setAttribute("aria-label","Emoji picker"),this.#e.hidden=!0,this.#i=document.createElement("input"),this.#i.type="search",this.#i.placeholder="Search emoji\u2026",this.#i.setAttribute("aria-label","Search emoji"),this.#i.addEventListener("input",this.#x),this.#i.addEventListener("keydown",this.#E),this.#e.appendChild(this.#i),this.#r=document.createElement("nav"),this.#r.classList.add("categories"),this.#r.setAttribute("role","tablist"),this.#r.setAttribute("aria-label","Emoji categories");for(let t of this.#h.EMOJI_GROUPS){let e=document.createElement("button");e.type="button",e.setAttribute("role","tab"),e.setAttribute("aria-selected",t===this.#h.EMOJI_GROUPS[0]?"true":"false"),e.setAttribute("data-group",t),e.setAttribute("aria-label",this.#h.EMOJI_GROUP_LABELS[t]),e.title=this.#h.EMOJI_GROUP_LABELS[t],e.textContent=this.#h.EMOJI_GROUP_ICONS[t],e.addEventListener("click",this.#L),this.#r.appendChild(e)}this.#e.appendChild(this.#r),this.#s=document.createElement("div"),this.#s.classList.add("grid"),this.#s.setAttribute("role","grid"),this.#s.setAttribute("aria-label","Emoji"),this.#s.addEventListener("keydown",this.#C),this.#e.appendChild(this.#s),this.appendChild(this.#e),this.#v()}#v(t=null){this.#s.innerHTML="",this.#a=[],this.#o=-1;let e=this.#q();if(!this.#c&&e.length>0){let n=document.createElement("div");n.classList.add("group-label"),n.textContent="Recently Used",n.setAttribute("data-group-heading","recent"),this.#s.appendChild(n);for(let r of e){let a=this.#h.EMOJI_MAP.get(r);a&&this.#g(a)}}let i=t||null;if(i)if(i.length===0){let n=document.createElement("div");n.classList.add("no-results"),n.textContent="No emoji found",this.#s.appendChild(n)}else for(let n of i)this.#g(n);else for(let n of this.#h.EMOJI_GROUPS){let r=document.createElement("div");r.classList.add("group-label"),r.textContent=this.#h.EMOJI_GROUP_LABELS[n],r.setAttribute("data-group-heading",n),this.#s.appendChild(r);let a=this.#h.getByGroup(n);for(let o of a)this.#g(o)}}#g(t){let e=document.createElement("button");e.type="button",e.setAttribute("role","gridcell"),e.setAttribute("tabindex","-1"),e.setAttribute("data-shortcode",t.shortcode),e.title=`${t.name} :${t.shortcode}:`,e.textContent=t.emoji,e.addEventListener("click",this.#k),this.#s.appendChild(e),this.#a.push(e)}#b(){let t=this.getAttribute("for");if(!t)return;let e=document.getElementById(t);if(e){if(e.tagName==="INPUT"||e.tagName==="TEXTAREA"){let i=e;this.#d={start:i.selectionStart??i.value.length,end:i.selectionEnd??i.value.length},this.#u=null}else if(e.isContentEditable){let i=window.getSelection();i&&i.rangeCount>0&&(this.#u=i.getRangeAt(0).cloneRange()),this.#d=null}}}#y=t=>{t.stopPropagation(),this.toggle()};#A=t=>{this.#n&&!this.contains(t.target)&&this.close()};#$=t=>{t.key==="Escape"&&this.#n&&(t.preventDefault(),this.close(),this.#t?.focus())};#x=()=>{this.#l&&clearTimeout(this.#l),this.setState("search-pending",!0),this.#l=setTimeout(()=>{if(this.setState("search-pending",!1),this.#c=this.#i.value.trim(),this.#c){let t=this.#h.searchEmoji(this.#c);this.#v(t)}else this.#v()},lv)};#E=t=>{t.key==="ArrowDown"&&(t.preventDefault(),this.#a.length>0&&this.#T(0))};#L=t=>{let e=t.currentTarget.getAttribute("data-group");for(let n of this.#r.querySelectorAll('[role="tab"]'))n.setAttribute("aria-selected",n===t.currentTarget?"true":"false");this.#c&&(this.#i.value="",this.#c="",this.#v());let i=this.#s.querySelector(`[data-group-heading="${e}"]`);i&&i.scrollIntoView({block:"start",behavior:"smooth"})};#C=t=>{let e=this.#a.length;if(e!==0)switch(t.key){case"ArrowRight":t.preventDefault(),this.#T(this.#o+1);break;case"ArrowLeft":t.preventDefault(),this.#T(this.#o-1);break;case"ArrowDown":t.preventDefault(),this.#T(this.#o+La);break;case"ArrowUp":t.preventDefault(),this.#o<La?(this.#i.focus(),this.#o=-1):this.#T(this.#o-La);break;case"Home":t.preventDefault(),this.#T(0);break;case"End":t.preventDefault(),this.#T(e-1);break;case"Enter":case" ":t.preventDefault(),this.#o>=0&&this.#a[this.#o].click();break;case"Tab":this.close();break}};#k=t=>{let e=t.currentTarget.getAttribute("data-shortcode"),i=this.#h.EMOJI_MAP.get(e);i&&(this.#N(e),this.#D(i),this.dispatchEvent(new CustomEvent("emoji-picker:select",{bubbles:!0,detail:{shortcode:i.shortcode,emoji:i.emoji,name:i.name,keywords:i.keywords}})),this.close(),this.#M())};#T(t){let e=this.#a.length;e!==0&&(t<0&&(t=0),t>=e&&(t=e-1),this.#o=t,this.#a[t].focus())}#D(t){let e=this.getAttribute("for");if(!e)return;let i=document.getElementById(e);if(i){if(i.tagName==="INPUT"||i.tagName==="TEXTAREA"){let n=i,r=this.#d?.start??n.value.length,a=this.#d?.end??r,o=n.value.slice(0,r),l=n.value.slice(a);n.value=o+t.emoji+l;let h=r+t.emoji.length;n.setSelectionRange(h,h),this.#d={start:h,end:h},i.dispatchEvent(new Event("input",{bubbles:!0}))}else if(i.isContentEditable){i.focus();let n=window.getSelection();if(n&&this.#u){n.removeAllRanges(),n.addRange(this.#u);let r=n.getRangeAt(0);r.deleteContents();let a=document.createTextNode(t.emoji);r.insertNode(a),r.setStartAfter(a),r.collapse(!0),n.removeAllRanges(),n.addRange(r),this.#u=r.cloneRange()}else if(n){let r=document.createRange();r.selectNodeContents(i),r.collapse(!1);let a=document.createTextNode(t.emoji);r.insertNode(a),r.setStartAfter(a),r.collapse(!0),n.removeAllRanges(),n.addRange(r)}}}}#M(){let t=this.getAttribute("for");if(!t)return;let e=document.getElementById(t);e&&e.focus()}#q(){try{return JSON.parse(localStorage.getItem(Iu)||"[]")}catch{return[]}}#N(t){let e=parseInt(this.getAttribute("recent-limit")??"24",10)||24,i=this.#q();i=i.filter(n=>n!==t),i.unshift(t),i.length>e&&(i.length=e);try{localStorage.setItem(Iu,JSON.stringify(i))}catch{}}open(){this.#n||(this.#b(),this.#n=!0,this.setAttribute("open",""),this.#t?.setAttribute("aria-expanded","true"),this.#e.hidden=!1,this.#i.value="",this.#c="",this.#v(),requestAnimationFrame(()=>{this.#i.focus()}),this.dispatchEvent(new CustomEvent("emoji-picker:open",{bubbles:!0})))}close(){this.#n&&(this.#n=!1,this.removeAttribute("open"),this.#t?.setAttribute("aria-expanded","false"),this.#e.hidden=!0,this.dispatchEvent(new CustomEvent("emoji-picker:close",{bubbles:!0})))}toggle(){this.#n?this.close():this.open()}get isOpen(){return this.#n}};g("emoji-picker",Na);A();E();ht();var Bu="environment",Ru="preferences",Ma={timeOfDay:!1,seasonal:!1},cv=900*1e3,Bt={...Ma};function Wt(s,t,e){return s+(t-s)*Math.min(1,Math.max(0,e))}var Gt={_timer:null,_baseHues:null,_timeOverride:null,_monthOverride:null,async init(){let s=await M.get(Bu,Ru);Bt=s?{...Ma,...s}:{...Ma},(Bt.timeOfDay||Bt.seasonal)&&(this._captureBaseHues(),this._update(),this._startLoop()),window.addEventListener("vb:theme-change",()=>{this._hasActiveSource()&&requestAnimationFrame(()=>{this._captureBaseHues(),this._update()})})},load(){return{...Bt}},save(s){return Bt={...Bt,...s},M.set(Bu,Ru,Bt).catch(()=>{}),{...Bt}},setTimeOverride(s){this._timeOverride=s,this._hasActiveSource()&&this._update()},setMonthOverride(s){this._monthOverride=s,this._hasActiveSource()&&this._update()},setSource(s,t){let e=this.save({[s]:t});t?(this._captureBaseHues(),this._update(),this._startLoop()):this._hasActiveSource(e)?this._update():(this._clearModifiers(),this._stopLoop())},_hasActiveSource(s){let t=s||this.load();return t.timeOfDay||t.seasonal},_captureBaseHues(){let s=document.documentElement;s.style.removeProperty("--hue-primary"),s.style.removeProperty("--hue-secondary"),s.style.removeProperty("--hue-accent");let t=s.getAttribute("data-theme");if(t){let e=`[data-theme~="${t}"]`;for(let i of document.styleSheets)try{for(let n=0;n<i.cssRules.length;n++){let r=i.cssRules[n];if(r.selectorText?.includes(e)&&!r.selectorText.includes("dark")){let a=r.style?.getPropertyValue("--hue-primary");if(a){this._baseHues={primary:parseFloat(a)||260,secondary:parseFloat(r.style.getPropertyValue("--hue-secondary"))||200,accent:parseFloat(r.style.getPropertyValue("--hue-accent"))||30};return}}}}catch{}}this._baseHues={primary:260,secondary:200,accent:30}},_update(){let s=this.load(),t=0;s.timeOfDay&&(t+=this._getTimeOfDayOffset()),s.seasonal&&(t+=this._getSeasonalOffset());let e=document.documentElement;t!==0&&this._baseHues?(e.style.setProperty("--hue-primary",String(this._baseHues.primary+t)),e.style.setProperty("--hue-secondary",String(this._baseHues.secondary+t)),e.style.setProperty("--hue-accent",String(this._baseHues.accent+t*.5))):t===0&&this._clearModifiers()},_clearModifiers(){let s=document.documentElement;s.style.removeProperty("--hue-primary"),s.style.removeProperty("--hue-secondary"),s.style.removeProperty("--hue-accent")},_getTimeOfDayOffset(){let s=this._timeOverride??new Date().getHours()+new Date().getMinutes()/60;return s<5?-20:s<7?Wt(-20,20,(s-5)/2):s<10?Wt(20,5,(s-7)/3):s<14?Wt(5,0,(s-10)/4):s<17?Wt(0,-5,(s-14)/3):s<19?Wt(-5,15,(s-17)/2):s<21?Wt(15,-10,(s-19)/2):Wt(-10,-20,(s-21)/8)},_getHemisphere(){return window.__VB_ENV_LOCATION?.hemisphere||"north"},_getSeasonalOffset(){let s=this._monthOverride??new Date().getMonth(),e=this._getHemisphere()==="south"?(s+6)%12:s;return e>=2&&e<=4?5:e>=5&&e<=7?10:e>=8&&e<=10?-5:-10},_startLoop(){this._timer||(this._timer=setInterval(()=>this._update(),cv))},_stopLoop(){this._timer&&clearInterval(this._timer),this._timer=null}};var Ui=null;function Ou(){return"0.4.1-7f95ee90"}function hv(){let s=document.querySelectorAll('script[src*="vanilla-breeze"]'),t="/cdn/sw.js";for(let e of s){let i=e.getAttribute("src");if(i){let n=i.lastIndexOf("/");if(n!==-1){t=i.slice(0,n)+"/sw.js";break}}}return t}function Fu(){return Ui||(Ui=navigator.serviceWorker?.ready??Promise.reject(new Error("SW not supported"))),Ui}function Hu(s){return new Promise((t,e)=>{navigator.serviceWorker?.controller?Pu(navigator.serviceWorker.controller,s,t,e):Fu().then(i=>{let n=i.active||i.waiting||i.installing;n?Pu(n,s,t,e):e(new Error("No active service worker"))}).catch(e)})}function Pu(s,t,e,i){let n=new MessageChannel;n.port1.onmessage=r=>e(r.data),n.port1.onmessageerror=()=>i(new Error("Message error")),s.postMessage({type:t},[n.port2]),setTimeout(()=>i(new Error("SW message timeout")),5e3)}async function zu(){return Hu("GET_STATUS")}async function ju(){return Hu("CLEAR_CACHE")}async function Vu(){let s=await Fu();return await s.update(),{updated:!!s.waiting}}function uv(){return typeof window>"u"||!("serviceWorker"in navigator)?!1:window.__VB_SERVICE_WORKER?!0:document.querySelector('meta[name="vb-service-worker"]')?.content==="true"}if(uv()){let s=hv();window.addEventListener("load",()=>{Ui=navigator.serviceWorker.register(s).catch(t=>{console.warn("[VB] Service worker registration failed:",t)})})}ht();var ge=null,ft="settings",He={motionFx:!0,sounds:!1},_a=class extends b{#t=null;#e=null;#i=!1;#s=[];#r={...He};#n=!1;setup(){return this.#a(),!0}async#a(){await this.#o(),this.#g(),this.#y(),this.#P(),this.listen(window,"vb:theme-change",this.#F),this.listen(window,"vb:extensions-change",this.#F),this.listen(window,"vb:a11y-themes-change",this.#F)}teardown(){this.#e?.remove(),this.#e=null}get data(){return{a11yThemes:[...this.#s],extensions:{...this.#r},sticky:this.#n}}set data(t){if(!t||typeof t!="object")return;let e=[];Array.isArray(t.a11yThemes)&&(this.#s=[...t.a11yThemes],e.push(M.set(ft,"a11y",this.#s))),t.extensions&&typeof t.extensions=="object"&&(this.#r={...He,...t.extensions},e.push(M.set(ft,"extensions",this.#r))),t.sticky!=null&&(this.#n=!!t.sticky,e.push(M.set(ft,"sticky",this.#n?"on":"off"))),Promise.all(e).then(()=>{this.#P?.(),this.dispatchEvent(new CustomEvent("settings-panel:data-changed",{detail:{data:this.data,source:"property"},bubbles:!0}))})}async#o(){let[t,e,i]=await Promise.all([M.get(ft,"a11y"),M.get(ft,"extensions"),M.get(ft,"sticky")]);this.#s=Array.isArray(t)?t:[],this.#r={...He,...e??{}},this.#n=i==="on"}#l(t){return t!==""&&t!==void 0}#c(t){return t==="compact"?"compact":t==="spacious"?"spacious":"default"}#h(t,e){return t?e==="compact"?"compact":e==="spacious"?"spacious":"default":""}#m(){return this.#n}#d(t){return t!==""&&t!==void 0}#u(t){return t==="flush"?"flush":t==="elevated"?"elevated":"default"}#f(t,e){return t?e==="flush"?"flush":e==="elevated"?"elevated":"default":""}#p(t){if(!t)return"card";let e=t.split(/\s+/);for(let i of e)if(i==="stretch"||i==="integrated")return i;return"card"}#w(t){return t?t.split(/\s+/).includes("fixed"):!1}#v(t,e){let i=[];return t&&t!=="card"&&i.push(t),e&&i.push("fixed"),i.join(" ")||"card"}#g(){this.#t=this.querySelector(":scope > [data-trigger]")||this.querySelector(":scope > button"),this.#t||(this.#t=document.createElement("button"),this.#t.setAttribute("data-trigger",""),this.#t.setAttribute("aria-label","Site settings"),this.#t.className="settings-trigger",this.#t.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>',this.prepend(this.#t)),this.#t.setAttribute("aria-haspopup","dialog"),this.#t.setAttribute("aria-expanded","false"),this.#e=document.createElement("div"),this.#e.className="settings-panel",this.#e.setAttribute("role","dialog"),this.#e.setAttribute("aria-label","Site settings");let t=`settings-panel-${crypto.randomUUID().slice(0,8)}`;this.#e.id=t,this.#t.setAttribute("aria-controls",t),this.#e.innerHTML=this.#b(),this.appendChild(this.#e)}#b(){let{mode:t,brand:e,fluid:i,backdrop:n,backdropChrome:r,pageBgType:a,pageBgColor:o,pageBgGradStart:l,pageBgGradEnd:h,pageBgGradDir:c}=_.getState(),u=this.#V(),d=this.#X(),p=this.#l(i),f=this.#c(i),m=this.#d(n),v=this.#u(n);return`
       <header class="settings-header">
         <strong>Settings</strong>
         <button type="button" class="settings-close" aria-label="Close settings">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-breeze",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A layered HTML component system extending HTML's native model",
   "type": "module",
   "main": "./dist/cdn/vanilla-breeze.js",
@@ -117,6 +117,7 @@
     "@lhci/cli": "^0.15.1",
     "@profpowell/browser-window": "^1.4.6",
     "@profpowell/code-block": "^2.9.0",
+    "codex-claude-bridge": "^0.3.6",
     "cspell": "^10.0.0",
     "eslint": "^10.2.1",
     "eslint-plugin-jsdoc": "^62.7.1",
@@ -144,11 +145,15 @@
     "css",
     "custom-elements",
     "web-components",
-    "a11y"
+    "a11y",
+    "html-first",
+    "cascade-layers",
+    "design-tokens",
+    "themes",
+    "progressive-enhancement",
+    "layout"
   ],
   "license": "MIT",
   "customElements": "custom-elements.json",
-  "dependencies": {
-    "codex-claude-bridge": "^0.3.6"
-  }
+  "author": "Prof Powell (https://vanilla-breeze.com/)"
 }