@zeix/ui-element/docs/assets/main.js

UIElement - minimal reactive framework based on Web Components

var E=(t)=>typeof t==="function",kt=(t)=>E(t)&&t.constructor.name==="AsyncFunction",ft=(t,e)=>Object.prototype.toString.call(t)===`[object ${e}]`,Gt=(t)=>t instanceof Error,it=(t)=>t instanceof DOMException&&t.name==="AbortError",jt=(t)=>t instanceof Promise,V=(t)=>Gt(t)?t:Error(String(t));class ct extends Error{constructor(t){super(`Circular dependency in ${t} detected`);return this}}var k,X=new Set,Rt=0,st=new Map,B,gt=()=>{B=void 0;let t=Array.from(st.values());st.clear();for(let e of t)e()},It=()=>{if(B)cancelAnimationFrame(B);B=requestAnimationFrame(gt)};queueMicrotask(gt);var lt=(t)=>{if(k&&!t.has(k)){let e=k;t.add(e),k.cleanups.add(()=>{t.delete(e)})}},_=(t)=>{for(let e of t)if(Rt)X.add(e);else e()},Ot=()=>{while(X.size){let t=Array.from(X);X.clear();for(let e of t)e()}};var bt=(t,e)=>{let r=k;k=e;try{t()}finally{k=r}},W=(t,e)=>new Promise((r,o)=>{st.set(e,()=>{try{r(t())}catch(n){o(n)}}),It()});function z(t){let{signals:e,ok:r,err:o=console.error,nil:n=()=>{}}=E(t)?{signals:[],ok:t}:t,a=!1,i=()=>bt(()=>{if(a)throw new ct("effect");a=!0;let s=void 0;try{s=St({signals:e,ok:r,err:o,nil:n})}catch(l){o(V(l))}if(E(s))i.cleanups.add(s);a=!1},i);return i.cleanups=new Set,i(),()=>{i.cleanups.forEach((s)=>s()),i.cleanups.clear()}}var ht="Computed",Nt=(t,e)=>{if(!e)return!1;return t.name===e.name&&t.message===e.message},O=(t)=>{let e=new Set,r=E(t)?void 0:{nil:()=>L,err:(...b)=>{if(b.length>1)throw new AggregateError(b);else throw b[0]},...t},o=r?r.ok:t,n=L,a,i=!0,s=!1,l=!1,c,u=(b)=>{if(!Object.is(b,n))n=b,i=!1,a=void 0,s=!0},y=()=>{s=L!==n,n=L,a=void 0},h=(b)=>{let U=V(b);s=!Nt(U,a),n=L,a=U},T=(b)=>{if(l=!1,c=void 0,u(b),s)_(e)},A=(b)=>{if(l=!1,c=void 0,h(b),s)_(e)},M=()=>{l=!1,c=void 0,J()},H=()=>{if(i=!0,c?.abort("Aborted because source signal changed"),e.size)_(e);else H.cleanups.forEach((b)=>b()),H.cleanups.clear()};H.cleanups=new Set;let J=()=>bt(()=>{if(l)throw new ct("computed");if(s=!1,kt(o)){if(c)return n;if(c=new AbortController,r)r.abort=r.abort instanceof AbortSignal?AbortSignal.any([r.abort,c.signal]):c.signal;c.signal.addEventListener("abort",M,{once:!0})}let b;l=!0;try{b=r&&r.signals.length?St(r):o(c?.signal)}catch(U){if(it(U))y();else h(U);l=!1;return}if(jt(b))b.then(T,A);else if(b==null||L===b)y();else u(b);l=!1},H),R={[Symbol.toStringTag]:ht,get:()=>{if(lt(e),Ot(),i)J();if(a)throw a;return n},map:(b)=>O({signals:[R],ok:b}),tap:(b)=>z({signals:[R],...E(b)?{ok:b}:b})};return R},mt=(t)=>ft(t,ht),yt="State",v=(t)=>{let e=new Set,r=t,o={[Symbol.toStringTag]:yt,get:()=>{return lt(e),r},set:(n)=>{if(Object.is(r,n))return;if(r=n,_(e),L===r)e.clear()},update:(n)=>{o.set(n(r))},map:(n)=>O({signals:[o],ok:n}),tap:(n)=>z({signals:[o],...E(n)?{ok:n}:n})};return o},K=(t)=>ft(t,yt),L=Symbol(),et=(t)=>K(t)||mt(t),Ft=(t)=>E(t)&&t.length<2,Et=(t)=>et(t)?t:Ft(t)?O(t):v(t),St=(t)=>{let{signals:e,abort:r,ok:o,err:n,nil:a}=t,i=[],s=!1,l=e.map((c)=>{try{let u=c.get();if(u===L)s=!0;return u}catch(u){if(it(u))throw u;i.push(V(u))}});try{return s?a(r):i.length?n(...i):o(...l)}catch(c){if(it(c))throw c;let u=V(c);return n(u)}},P=!1;var tt="error",Jt=(t)=>t?`#${t}`:"",Ut=(t)=>t.length?`.${Array.from(t).join(".")}`:"",wt=(t)=>!!t&&typeof t==="object",I=(t)=>typeof t==="string",w=(t)=>`<${t.localName}${Jt(t.id)}${Ut(t.classList)}>`,Z=(t)=>I(t)?`"${t}"`:wt(t)?JSON.stringify(t):String(t),nt=(t)=>{if(t===null)return"null";if(typeof t!=="object")return typeof t;if(Array.isArray(t))return"Array";if(Symbol.toStringTag in Object(t))return t[Symbol.toStringTag];return t.constructor?.name||"Object"},$=(t,e,r="debug")=>{if(["error","warn"].includes(r))console[r](e,t);return t};class Tt extends Error{constructor(t){super(t);this.name="CircularMutationError"}}var _t=(t)=>t.nodeType===Node.ELEMENT_NODE,Zt=(t)=>t instanceof HTMLElement&&t.localName.includes("-"),zt=(t)=>{let e=new Set;if(t.includes("."))e.add("class");if(t.includes("#"))e.add("id");if(t.includes("[")){let r=t.split("[");for(let o=1;o<r.length;o++){let n=r[o];if(!n.includes("]"))continue;let a=n.split("=")[0].trim().replace(/[^a-zA-Z0-9_-]/g,"");if(a)e.add(a)}}return[...e]},Yt=(t,e)=>{if(t.length!==e.length)return!1;let r=new Set(t);for(let o of e)if(!r.has(o))return!1;return!0},Lt=(t,e,r)=>{let o=new MutationObserver(r),n=zt(e),a={childList:!0,subtree:!0};if(n.length)a.attributes=!0,a.attributeFilter=n;return o.observe(t,a),o},dt=(t,e,r)=>{let o=t.filter(E).map((n)=>n(e,r));return()=>{o.filter(E).forEach((n)=>n()),o.length=0}},d=(t,...e)=>(r)=>{let o=(r.shadowRoot||r).querySelector(t);if(o)dt(e,r,o)},S=(t,...e)=>(r)=>{let o=new Map,n=r.shadowRoot||r,a=(c)=>{if(!o.has(c))o.set(c,dt(e,r,c))},i=(c)=>{let u=o.get(c);if(E(u))u();o.delete(c)},s=(c)=>(u)=>{if(_t(u)){if(u.matches(t))c(u);u.querySelectorAll(t).forEach(c)}},l=Lt(n,t,(c)=>{for(let u of c)u.addedNodes.forEach(s(a)),u.removedNodes.forEach(s(i))});return n.querySelectorAll(t).forEach(a),()=>{l.disconnect(),o.forEach((c)=>c()),o.clear()}},Y=(t,e)=>{let r=new Set,o=()=>Array.from(t.querySelectorAll(e)),n=L,a,i=0,s=2,l=()=>{n=o(),a=Lt(t,e,()=>{if(!r.size){a?.disconnect(),a=void 0;return}if(i++,i>s)throw a?.disconnect(),a=void 0,i=0,new Tt("Circular mutation in element selection detected");try{let u=o();if(!Yt(n,u))n=u,_(r)}finally{i--}})},c={[Symbol.toStringTag]:"Computed",get:()=>{if(lt(r),!r.size)n=o();else if(!a)l();return n},map:(u)=>O(()=>u(c.get())),tap:(u)=>z({signals:[c],...E(u)?{ok:u}:u})};return c},p=(t,e)=>(r,o=r)=>{if(!E(e))throw new TypeError(`Invalid event listener provided for "${t} event on element ${w(o)}`);return o.addEventListener(t,e),()=>o.removeEventListener(t,e)},rt=(t,e)=>(r,o=r)=>{o.dispatchEvent(new CustomEvent(t,{detail:E(e)?e(o):e,bubbles:!0}))},vt=(t)=>(e,r)=>{let o=r.localName;if(!Zt(r))throw new TypeError("Target element must be a custom element");let n=E(t)?t(r):t;if(!wt(n))throw new TypeError("Passed signals must be an object or a provider function");customElements.whenDefined(o).then(()=>{for(let[a,i]of Object.entries(n)){let s=I(i)?e.getSignal(a):Et(i);r.setSignal(a,s)}}).catch((a)=>{throw new Error(`Failed to pass signals to ${w(r)}}`,{cause:a})})},C=Symbol(),qt=new Set(Object.getOwnPropertyNames(HTMLElement.prototype)),Dt=new Set(["constructor","prototype","__proto__","toString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString"]),at=(t)=>E(t)&&t.length>=2,Qt=(t)=>!(qt.has(t)||Dt.has(t)),g=(t,e={},r)=>{class o extends HTMLElement{debug;#t={};#e;static observedAttributes=Object.entries(e)?.filter(([,n])=>at(n)).map(([n])=>n)??[];constructor(){super();for(let[n,a]of Object.entries(e)){if(a==null)continue;let i=at(a)?a(this,null):E(a)?a(this):a;if(i!=null)this.setSignal(n,Et(i))}}connectedCallback(){if(P){if(this.debug=this.hasAttribute("debug"),this.debug)$(this,"Connected")}let n=r(this);if(!Array.isArray(n))throw new TypeError(`Expected array of functions as return value of setup function in ${w(this)}`);this.#e=dt(n,this,this)}disconnectedCallback(){if(E(this.#e))this.#e();if(P&&this.debug)$(this,"Disconnected")}attributeChangedCallback(n,a,i){if(i===a||mt(this.#t[n]))return;let s=e[n];if(!at(s))return;let l=s(this,i,a);if(P&&this.debug)$(i,`Attribute "${n}" of ${w(this)} changed from ${Z(a)} to ${Z(i)}, parsed as <${nt(l)}> ${Z(l)}`);this[n]=l}getSignal(n){let a=this.#t[n];if(P&&this.debug)$(a,`Get ${nt(a)} "${String(n)}" in ${w(this)}`);return a}setSignal(n,a){if(!Qt(String(n)))throw new TypeError(`Invalid property name "${String(n)}". Property names must be valid JavaScript identifiers and not conflict with inherited HTMLElement properties.`);if(!et(a))throw new TypeError(`Expected signal as value for property "${String(n)}" on ${w(this)}.`);let i=this.#t[n],s=K(a);if(this.#t[n]=a,Object.defineProperty(this,n,{get:a.get,set:s?a.set:void 0,enumerable:!0,configurable:s}),i&&K(i))i.set(L);if(P&&this.debug)$(a,`Set ${nt(a)} "${String(n)} in ${w(this)}`)}}return customElements.define(t,o),o},pt="context-request";var At=(t)=>(e)=>{let r=(o)=>{let{context:n,callback:a}=o;if(t.includes(n)&&E(a))o.stopPropagation(),a(e.getSignal(String(n)))};return e.addEventListener(pt,r),()=>e.removeEventListener(pt,r)};var Xt=(t,e)=>{if(e==null)return;let r=t(e);return Number.isFinite(r)?r:void 0},N=(t,e)=>e!=="false"&&e!=null,x=(t=0)=>(e,r)=>Xt(parseInt,r)??t;var G=(t="")=>(e,r)=>r??t;var Ct=(t,e,r)=>I(t)?e.getSignal(t).get():et(t)?t.get():E(t)?t(r):C,Bt=(t)=>{if(/^(mailto|tel):/i.test(t))return!0;if(t.includes("://"))try{let e=new URL(t,window.location.origin);return["http:","https:","ftp:"].includes(e.protocol)}catch(e){return!1}return!0},Vt=(t,e,r)=>{if(/^on/i.test(e))throw new Error(`Unsafe attribute: ${e}`);if(r=String(r).trim(),!Bt(r))throw new Error(`Unsafe URL for ${e}: ${r}`);t.setAttribute(e,r)},F=(t,e)=>(r,o)=>{let{op:n,read:a,update:i}=e,s=a(o),l={a:"attribute ",c:"class ",h:"inner HTML",p:"property ",s:"style property ",t:"text content"},c="";if(I(t)&&I(s)&&r[t]===C)r.attributeChangedCallback(t,null,s);let u=(h)=>()=>{if(P&&r.debug)$(o,`${h} ${l[n]+c} of ${w(o)} in ${w(r)}`);e.resolve?.(o)},y=(h)=>(T)=>{$(T,`Failed to ${h} ${l[n]+c} of ${w(o)} in ${w(r)}`,tt),e.reject?.(T)};return z(()=>{let h=C;try{h=Ct(t,r,o)}catch(T){$(T,`Failed to resolve value of ${Z(t)} for ${l[n]+c} of ${w(o)} in ${w(r)}`,tt);return}if(h===C)h=s;else if(h===L)h=e.delete?null:s;if(e.delete&&h===null)W(()=>{return c=e.delete(o),!0},[o,n]).then(u("Deleted")).catch(y("delete"));else if(h!=null){let T=a(o);if(Object.is(h,T))return;W(()=>{return c=i(o,h),!0},[o,n]).then(u("Updated")).catch(y("update"))}})},q=(t,e)=>(r,o)=>{let n=(i)=>()=>{if(P&&r.debug)$(o,`${i} element in ${w(o)} in ${w(r)}`);if(E(e?.resolve))e.resolve(o);else{let s=et(t)?t:I(t)?r.getSignal(t):void 0;if(K(s))s.set(0)}},a=(i)=>(s)=>{$(s,`Failed to ${i} element in ${w(o)} in ${w(r)}`,tt),e?.reject?.(s)};return z(()=>{let i=0;try{i=Ct(t,r,o)}catch(s){$(s,`Failed to resolve value of ${Z(t)} for insertion or deletion in ${w(o)} in ${w(r)}`,tt);return}if(i===C)i=0;if(i>0){if(!e)throw new TypeError("No inserter provided");W(()=>{for(let s=0;s<i;s++){let l=e.create(o);if(!l)continue;o.insertAdjacentElement(e.position??"beforeend",l)}return!0},[o,"i"]).then(n("Inserted")).catch(a("insert"))}else if(i<0)W(()=>{if(e&&(e.position==="afterbegin"||e.position==="beforeend"))for(let s=0;s>i;s--)if(e.position==="afterbegin")o.firstElementChild?.remove();else o.lastElementChild?.remove();else o.remove();return!0},[o,"r"]).then(n("Removed")).catch(a("remove"))})},m=(t)=>F(t,{op:"t",read:(e)=>e.textContent,update:(e,r)=>{return Array.from(e.childNodes).filter((o)=>o.nodeType!==Node.COMMENT_NODE).forEach((o)=>o.remove()),e.append(document.createTextNode(r)),""}}),f=(t,e=t)=>F(e,{op:"p",read:(r)=>(t in r)?r[t]:L,update:(r,o)=>{return r[t]=o,String(t)}}),j=(t,e=t)=>F(e,{op:"a",read:(r)=>r.getAttribute(t),update:(r,o)=>{return Vt(r,t,o),t},delete:(r)=>{return r.removeAttribute(t),t}}),ot=(t,e=t)=>F(e,{op:"a",read:(r)=>r.hasAttribute(t),update:(r,o)=>{return r.toggleAttribute(t,o),t}}),D=(t,e=t)=>F(e,{op:"c",read:(r)=>r.classList.contains(t),update:(r,o)=>{return r.classList.toggle(t,o),t}});var Ht=(t,e,r)=>F(t,{op:"h",read:(o)=>(o.shadowRoot||!e?o:null)?.innerHTML??"",update:(o,n)=>{if(!n){if(o.shadowRoot)o.shadowRoot.innerHTML="<slot></slot>";return""}if(e&&!o.shadowRoot)o.attachShadow({mode:e});let a=o.shadowRoot||o;if(a.innerHTML=n,!r)return"";return a.querySelectorAll("script").forEach((i)=>{let s=document.createElement("script");s.appendChild(document.createTextNode(i.textContent??"")),a.appendChild(s),i.remove()})," with scripts"}});var ae=g("hello-world",{name:C},(t)=>[d("span",m("name")),d("input",p("input",(e)=>{t.name=e.target?.value||C}))]);var ce=g("my-counter",{count:x()},(t)=>[d(".count",m("count")),d(".parity",m(()=>t.count%2?"odd":"even")),d(".increment",p("click",()=>{t.count++})),d(".decrement",p("click",()=>{t.count--}))]);var ue=g("my-slider",{},(t)=>{let e=v(0),r=t.querySelectorAll(".slide").length,o=(n)=>String(e.get())===n.dataset.index;return[d(".prev",p("click",()=>{e.update((n)=>(n-1+r)%r)})),d(".next",p("click",()=>{e.update((n)=>(n+1+r)%r)})),S(".slide",D("active",o)),S(".dots span",D("active",o))]});var ge=g("input-button",{disabled:N,label:G(C),badge:G(C)},()=>[d("button",f("disabled")),d(".label",m("label")),d(".badge",m("badge"))]);var me=g("input-checkbox",{checked:N,label:G(C)},(t)=>[ot("checked"),d("input",f("checked"),p("change",(e)=>{t.checked=e.target?.checked})),d(".label",m("label"))]);var Se=g("input-radiogroup",{value:G()},(t)=>[j("value"),S("input",p("change",(e)=>{t.value=e.target?.value})),S("label",D("selected",(e)=>t.value===e.querySelector("input")?.value))]);var ut=(t)=>typeof t==="number",Q=(t,e=!1,r=0)=>{if(!t)return r;let o=e?parseInt(t,10):parseFloat(t);return Number.isFinite(o)?o:r},Wt=(t)=>{if(Math.floor(t)===t||String(t).indexOf(".")===-1)return 0;return String(t).split(".")[1].length||0},Kt=(t,e)=>{let r=t.querySelector("input");return r&&r.type==="number"?Q(e,t.hasAttribute("integer"),0):e??""},Le=g("input-field",{value:Kt,length:0,error:"",description:"",clear:(t)=>{t.clear=()=>{t.value="",t.length=0;let e=t.querySelector("input");if(e)e.value="",e.checkValidity(),e.focus()}}},(t)=>{let e=[],r=t.querySelector("input");if(!r)throw new Error("No input element found");let o=r.type==="number",n=t.hasAttribute("integer"),a=t.getAttribute("validate"),i=(c)=>{let u=typeof c==="function"?c(t.value):o&&!ut(c)?Q(c,n,0):c;if(Object.is(t.value,u))return;if(u!==null&&a)fetch(`${a}?name=${r.name}value=${u}`).then(async(y)=>{let h=await y.text();r.setCustomValidity(h),t.error=h}).catch((y)=>{t.error=y.message});if(r.checkValidity(),t.value=u,t.error=r.validationMessage??"",r?.value!==String(c))rt("value-change",c)(t)};if(e.push(d("input",f("value",()=>String(t.value)),p("change",()=>{i(o?r.valueAsNumber??0:r.value??"")}),p("input",()=>{t.length=r.value.length??0}))),o){let c=t.querySelector(".spinbutton"),u=Q(c?.dataset.step||r.step,n,1),y=Q(r.min,n,0),h=Q(r.max,n,100),T=(A)=>{if(!Number.isFinite(A)||A<y)return y;if(A>h)return h;let M=y+Math.round((A-y)/u)*u;return n?Math.round(M):parseFloat(M.toFixed(Wt(u)))};if(e.push(d("input",p("keydown",(A)=>{let{key:M,shiftKey:H}=A;if(["ArrowUp","ArrowDown"].includes(M)){A.stopPropagation(),A.preventDefault();let J=H?u*10:u,R=T(r.valueAsNumber+(M==="ArrowUp"?J:-J));r.value=String(R),i(R)}}))),c)e.push(d(".decrement",p("click",(A)=>{let M=A.shiftKey?u*10:u,H=T(r.valueAsNumber-M);r.value=String(H),i(H)}),f("disabled",()=>(ut(y)?t.value:0)-u<y)),d(".increment",p("click",(A)=>{let M=A.shiftKey?u*10:u,H=T(r.valueAsNumber+M);r.value=String(H),i(H)}),f("disabled",()=>(ut(h)?t.value:0)+u>h)))}else e.push(d(".clear",p("click",()=>{t.clear(),i("")}),f("hidden",()=>!t.length)));let s=t.querySelector(".error")?.id;e.push(d(".error",m("error")),d("input",f("ariaInvalid",()=>t.error?"true":"false"),j("aria-errormessage",()=>t.error&&s?s:L)));let l=t.querySelector(".description");if(l){let c=r.maxLength,u=c&&l.dataset.remaining;if(u)t.setSignal("description",O(()=>u.replace("${x}",String(c-t.length))));e.push(d(".description",m("description")),d("input",j("aria-describedby",()=>t.description&&l.id?l.id:L)))}return e});var Ce=g("code-block",{collapsed:N},(t)=>{let e=t.querySelector("code");return[ot("collapsed"),d(".overlay",p("click",()=>{t.collapsed=!1})),d(".copy",p("click",async(r)=>{let o=r.currentTarget,n=o.textContent?.trim()??"",a="success";try{await navigator.clipboard.writeText(e?.textContent?.trim()??"")}catch(i){console.error("Error while trying to use navigator.clipboard.writeText()",i),a="error"}o.disabled=!0,o.label=t.getAttribute(`copy-${a}`)??n,setTimeout(()=>{o.disabled=!1,o.label=n},a==="success"?1000:3000)}))]});var te=(t,e)=>(r)=>{if(!(r instanceof KeyboardEvent))throw new TypeError("Event is not a KeyboardEvent");if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(r.key)){switch(r.preventDefault(),r.key){case"ArrowLeft":case"ArrowUp":e=e<1?t.length-1:e-1;break;case"ArrowRight":case"ArrowDown":e=e>=t.length-1?0:e+1;break;case"Home":e=0;break;case"End":e=t.length-1;break}if(t[e])t[e].focus()}},$e=g("tab-group",{selected:""},(t)=>{t.selected=t.querySelector('[role="tab"][aria-selected="true"]')?.getAttribute("aria-controls")??"";let e=(n)=>t.selected===n.getAttribute("aria-controls"),r=Array.from(t.querySelectorAll('[role="tab"]')),o=0;return[d('[role="tablist"]',p("keydown",te(r,o))),S('[role="tab"]',p("click",(n)=>{t.selected=n.currentTarget.getAttribute("aria-controls")??"",o=r.findIndex((a)=>e(a))}),f("ariaSelected",(n)=>String(e(n))),f("tabIndex",(n)=>e(n)?0:-1)),S('[role="tabpanel"]',f("hidden",(n)=>t.selected!==n.id))]});var ee=(t,e)=>{let r="",o="";if(!e)o="No URL provided in src attribute";else if((t.parentElement||t.getRootNode().host)?.closest(`${t.localName}[src="${e}"]`))o="Recursive loading detected";else{let n=new URL(e,location.href);if(n.origin===location.origin)r=String(n);else o="Invalid URL origin"}return t.error=o,r},re=(t)=>async(e)=>{let r=t.src;if(!r)return"";try{let o=await fetch(r,{signal:e});if(t.querySelector(".loading")?.remove(),o.ok)return o.text();else t.error=o.statusText}catch(o){t.error=o.message}return""},ke=g("lazy-load",{error:"",src:ee,content:re},(t)=>[Ht("content"),d(".error",m("error"),f("hidden",()=>!t.error))]);var Mt="media-motion",$t="media-theme",xt="media-viewport",Pt="media-orientation",Re=g("media-context",{[Mt]:()=>{let t=matchMedia("(prefers-reduced-motion: reduce)"),e=v(t.matches);return t.addEventListener("change",(r)=>{e.set(r.matches)}),e},[$t]:()=>{let t=matchMedia("(prefers-color-scheme: dark)"),e=v(t.matches?"dark":"light");return t.addEventListener("change",(r)=>{e.set(r.matches?"dark":"light")}),e},[xt]:(t)=>{let e=(l,c)=>{let y=t.getAttribute(l)?.trim();if(!y)return c;let h=y.match(/em$/)?"em":"px",T=parseFloat(y);return Number.isFinite(T)?T+h:c},r=matchMedia(`(min-width: ${e("sm","32em")})`),o=matchMedia(`(min-width: ${e("md","48em")})`),n=matchMedia(`(min-width: ${e("lg","72em")})`),a=matchMedia(`(min-width: ${e("xl","104em")})`),i=()=>{if(a.matches)return"xl";if(n.matches)return"lg";if(o.matches)return"md";if(r.matches)return"sm";return"xs"},s=v(i());return r.addEventListener("change",()=>{s.set(i())}),o.addEventListener("change",()=>{s.set(i())}),n.addEventListener("change",()=>{s.set(i())}),a.addEventListener("change",()=>{s.set(i())}),s},[Pt]:()=>{let t=matchMedia("(orientation: landscape)"),e=v(t.matches?"landscape":"portrait");return t.addEventListener("change",(r)=>{e.set(r.matches?"landscape":"portrait")}),e}},()=>[At([Mt,$t,xt,Pt])]);var Ne=g("todo-app",{active:(t)=>Y(t,"input-checkbox:not([checked])"),completed:(t)=>Y(t,"input-checkbox[checked]")},(t)=>{let e=t.querySelector("input-field");if(!e)throw new Error("No input field found");let r=t.querySelector("template");if(!r)throw new Error("No template found");let o=t.querySelector("ol");if(!o)throw new Error("No list found");return[d(".submit",f("disabled",()=>!e.length)),d("form",p("submit",(n)=>{n.preventDefault(),queueMicrotask(()=>{if(!e.value.toString().trim())return;let i=document.importNode(r.content,!0).firstElementChild;if(!(i instanceof HTMLLIElement))throw new Error("Invalid template for list item; expected <li>");i.querySelector("slot")?.replaceWith(String(e.value)),o.append(i),e.clear()})})),d("ol",j("filter",()=>t.querySelector("input-radiogroup")?.value??"all"),p("click",(n)=>{let a=n.target;if(a.localName==="button")a.closest("li").remove()})),d(".count",m(()=>String(t.active.length))),d(".singular",f("hidden",()=>t.active.length>1)),d(".plural",f("hidden",()=>t.active.length===1)),d(".remaining",f("hidden",()=>!t.active.length)),d(".all-done",f("hidden",()=>!!t.active.length)),d(".clear-completed",f("disabled",()=>!t.completed.length),f("badge",()=>t.completed.length>0?String(t.completed.length):""),p("click",()=>{let n=Array.from(t.querySelectorAll("ol li"));for(let a=n.length-1;a>=0;a--)if(n[a].querySelector("input-checkbox")?.checked)n[a].remove()}))]});var Ue=g("product-catalog",{total:(t)=>()=>Y(t,"spin-button").get().reduce((e,r)=>e+r.value,0)},(t)=>[d("input-button",vt({badge:()=>t.total>0?String(t.total):"",disabled:()=>!t.total}))]);var ze=g("spin-button",{value:x()},(t)=>{let e=t.getAttribute("zero-label")||"Add to Cart",r=t.getAttribute("increment-label")||"Increment",o=x(9)(t,t.getAttribute("max")),n=()=>t.value===0;return[d(".value",m("value"),f("hidden",n)),d(".decrement",f("hidden",n),p("click",()=>{t.value--})),d(".increment",m(()=>n()?e:"+"),f("ariaLabel",()=>n()?e:r),f("disabled",()=>t.value>=o),p("click",()=>{t.value++})),S("button",p("keydown",(a)=>{let{key:i}=a;if(["ArrowUp","ArrowDown","-","+"].includes(i)){if(a.stopPropagation(),a.preventDefault(),i==="ArrowDown"||i==="-")t.value--;if(i==="ArrowUp"||i==="+")t.value++}}))]});var De=g("rating-stars",{value:x()},(t)=>{let e=(r)=>parseInt(r.dataset.key||"0");return[S("input",f("checked",(r)=>t.value===e(r)),p("change",(r)=>{r.stopPropagation();let o=parseInt(r.currentTarget?.value)+1;t.value=o,rt("change-rating",o)(t)})),S(".label",m((r)=>e(r)<=t.value?"\u2605":"\u2606"))]});var Be=g("rating-feedback",{},(t)=>{let e=v(0),r=v(!0),o=v(!1);if(!t.querySelector("rating-stars"))throw new Error("No rating-stars component found");let a=(i)=>e.get()!==parseInt(i.dataset.key||"0");return[p("change-rating",(i)=>{e.set(i.detail)}),p("submit",(i)=>{i.preventDefault(),o.set(!0),console.log("Feedback submitted")}),d(".hide",p("click",()=>{let i=t.querySelector(".feedback");if(i)i.hidden=!0})),d("textarea",p("input",(i)=>{r.set(i.target?.value.trim()==="")})),d(".feedback",f("hidden",()=>o.get()||!e.get())),S(".feedback p",f("hidden",a)),d("input-button",f("disabled",r))]});var Ke=g("calc-table",{columns:x(),rows:x()},(t)=>{let r=t.querySelector(".calc-table-row"),o=t.querySelector(".calc-table-colhead"),n=t.querySelector(".calc-table-cell");if(!r||!o||!n)throw new Error("Missing template elements");let a=new Map;for(let s=0;s<t.columns;s++)a.set("ABCDEFGHIJKLMNOPQRSTUVWXYZ"[s],v(0));let i=(s)=>{return Array.from(t.querySelectorAll(`tbody input[data-key="${s}"]`)).map((l)=>Number.isFinite(l.valueAsNumber)?l.valueAsNumber:0).reduce((l,c)=>l+c,0)};return[f("rows",()=>t.querySelector(".rows spin-button")?.value),f("columns",()=>t.querySelector(".columns spin-button")?.value),d("tbody",q((s)=>t.rows-s.querySelectorAll("tr").length,{position:"beforeend",create:(s)=>{let l=document.importNode(r.content,!0).firstElementChild;if(!(l instanceof HTMLTableRowElement))throw new Error(`Expected <tr> as root in table row template, got ${l}`);let c=String(s.querySelectorAll("tr").length+1);return l.dataset.key=c,l.querySelector("slot")?.replaceWith(document.createTextNode(c)),l},resolve:()=>{for(let[s,l]of a)l.set(i(s))}})),d("thead tr",q((s)=>t.columns-(s.querySelectorAll("th").length-1),{position:"beforeend",create:(s)=>{let l=document.importNode(o.content,!0).firstElementChild;if(!(l instanceof HTMLTableCellElement))throw new Error(`Expected <th> as root in column header template, got ${l}`);let c="ABCDEFGHIJKLMNOPQRSTUVWXYZ"[s.querySelectorAll("th").length-1];return a.set(c,v(0)),l.querySelector("slot")?.replaceWith(document.createTextNode(c)),l}})),S("tbody tr",q((s)=>t.columns-s.querySelectorAll("td").length,{position:"beforeend",create:(s)=>{let l=document.importNode(n.content,!0).firstElementChild;if(!(l instanceof HTMLTableCellElement))throw new Error(`Expected <td> as root in cell template, got ${l}`);let c=s.dataset.key,u="ABCDEFGHIJKLMNOPQRSTUVWXYZ"[s.querySelectorAll("td").length],y=l.querySelector("input");if(!y)throw new Error("No input found in cell template");return y.dataset.key=u,l.querySelector("slot")?.replaceWith(document.createTextNode(`${u}${c}`)),l}})),d("tfoot tr",q((s)=>t.columns-s.querySelectorAll("td").length,{position:"beforeend",create:(s)=>{let l=document.createElement("td"),c="ABCDEFGHIJKLMNOPQRSTUVWXYZ"[s.querySelectorAll("td").length];return l.dataset.key=c,l}})),S("tbody input",p("change",(s)=>{let l=s.target?.dataset.key;a.get(l)?.set(i(l))})),S("tfoot td",m((s)=>String(a.get(s.dataset.key).get())))]});