lyco 1.2.6 → 1.2.7

package/dist/index.es.js

@@ -26,7 +26,7 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 		${n}
 	`}function Ne(e,t,n){t.forEach(([t,r])=>{n.has(t)&&e.removeEventListener(t,n.get(t));let i,a;typeof r==`function`?(i=r,a=void 0):(i=r.handler,a=r.options);let o=e=>i(e);e.addEventListener(t,o,a),n.set(t,o)})}function Z(e){let t=new Map,n=Object.entries(e);return{bind(e){Ne(e,n,t)},unbindAll(){t.clear()},auto(e){e?this.bind(e):this.unbindAll()}}}function Q(t,n){if(n===void 0){let n=n=>Q(t,n??e``);return n.html=(n,...r)=>Q(t,e(n,...r)),n}let r=t?.fadeBg??`rgba(0,0,0,0.7)`,i=t?.zIndex??2e3,a=Z(t?.on??{});return e`
 		<div
-			${H(a.auto)}
+			${H(e=>{e?a.bind(e):a.unbindAll()})}
 			style="
         position: fixed;
         top: 0; left: 0; right: 0; bottom: 0;
@@ -41,7 +41,7 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 		</div>
 	`}function Pe(t,n){let r=Z(t?.on??{});return n===void 0?n=>Pe(t,n??[e``]):e`
 		<div
-			${H(r.auto)}
+			${H(e=>{e?r.bind(e):r.unbindAll()})}
 			.class="${t?.className}"
 			style="
       display: flex;
@@ -54,7 +54,7 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 		</div>
 	`}function $(t,n){if(n===void 0){let n=n=>$(t,n??e``);return n.html=(n,...r)=>$(t,e(n,...r)),n}let r=t?.direction??`row`,i=Z(t?.on??{});return e`
 		<div
-			${H(i.auto)}
+			${H(e=>{e?i.bind(e):i.unbindAll()})}
 			style="
         display: flex;
         flex-direction: ${r};
@@ -66,12 +66,15 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 			${U(n)}
 		</div>
 	`}function Fe(t,n){if(n===void 0){let n=n=>Fe(t,n??e``);return n.html=(n,...r)=>Fe(t,e(n,...r)),n}let r=Z(t?.on??{});return e`
-		<div ${H(r.auto)} style="break-inside: avoid; margin-bottom: 16px;">
+		<div
+			${H(e=>{e?r.bind(e):r.unbindAll()})}
+			style="break-inside: avoid; margin-bottom: 16px;"
+		>
 			${U(n)}
 		</div>
 	`}function Ie(t,n){if(n===void 0)return n=>Ie(t,n??[e``]);let r=t?.columns??1,i=Z(t?.on??{});return e`
 		<div
-			${H(i.auto)}
+			${H(e=>{e?i.bind(e):i.unbindAll()})}
 			style="
         display: grid;
         grid-template-columns: repeat(${r}, 1fr);
@@ -90,10 +93,15 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 			<style>
 				${o}
 			</style>
-			<div ${H(s.auto)} class="${i}">${U(n)}</div>
+			<div
+				${H(e=>{e?s.bind(e):s.unbindAll()})}
+				class="${i}"
+			>
+				${U(n)}
+			</div>
 		`)}function Re(t,n){if(n===void 0){let n=n=>Re(t,n??e``);return n.html=(n,...r)=>Re(t,e(n,...r)),n}let r=Z(t?.on??{});return e`
 		<div
-			${H(r.auto)}
+			${H(e=>{e?r.bind(e):r.unbindAll()})}
 			style="${t?.span?`grid-column: span ${t.span};`:``}"
 		>
 			${U(n)}
@@ -108,10 +116,15 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 			<style>
 				${o}
 			</style>
-			<div ${H(s.auto)} class="${i}">${U(n)}</div>
+			<div
+				${H(e=>{e?s.bind(e):s.unbindAll()})}
+				class="${i}"
+			>
+				${U(n)}
+			</div>
 		`)}function Be(t,n){if(n===void 0)return n=>Be(t,n??[e``]);let r=Z(t?.on??{});return e`
 		<div
-			${H(r.auto)}
+			${H(e=>{e?r.bind(e):r.unbindAll()})}
 			style="
         display: flex;
         flex-direction: row;
@@ -136,10 +149,15 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 				${s}
 			</style>
 
-			<div ${H(c.auto)} class="${o}">${U(n)}</div>
+			<div
+				${H(e=>{e?c.bind(e):c.unbindAll()})}
+				class="${o}"
+			>
+				${U(n)}
+			</div>
 		`)}function He(t,n){if(n===void 0){let n=n=>He(t,n??e``);return n.html=(n,...r)=>He(t,e(n,...r)),n}let r=t?.gap??`0px`,i=t?.firstHeight??`50%`,a=e``,o=e``;if(typeof n==`function`){var s;let t=(s=n.call)?.call(n,null)??[];a=t[0]??e``,o=t[1]??e``}else a=U(n);let c=Z(t?.on??{});return e`
 		<div
-			${H(c.auto)}
+			${H(e=>{e?c.bind(e):c.unbindAll()})}
 			style="
         display: flex;
         flex-direction: column;
@@ -153,7 +171,7 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 		</div>
 	`}function Ue(t,n){if(n===void 0){let n=n=>Ue(t,n??e``);return n.html=(n,...r)=>Ue(t,e(n,...r)),n}let r=t?.gap??`0px`,i=t?.firstWidth??`50%`,a=e``,o=e``;if(typeof n==`function`){var s;let t=(s=n.call)?.call(n,null)??[];a=t[0]??e``,o=t[1]??e``}else a=U(n);let c=Z(t?.on??{});return e`
 		<div
-			${H(c.auto)}
+			${H(e=>{e?c.bind(e):c.unbindAll()})}
 			style="
       display: flex;
       flex-direction: row;
@@ -187,10 +205,15 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 			<style>
 				${u}
 			</style>
-			<div ${H(d.auto)} class="${c}">${U(n)}</div>
+			<div
+				${H(e=>{e?d.bind(e):d.unbindAll()})}
+				class="${c}"
+			>
+				${U(n)}
+			</div>
 		`)}function Ge(t,n){if(n===void 0)return n=>Ge(t,n??[e``]);let r=t?.sidebarWidth??`240px`,i=t?.sidebarPosition??`left`,a=t?.gap??`0px`,o=e``,s=e``;if(typeof n==`function`){var c;let t=(c=n.call)?.call(n,null)??[];o=t[0]??e``,s=t[1]??e``}else s=W(n);let l=Z(t?.on??{});return e`
 		<div
-			${H(l.auto)}
+			${H(e=>{e?l.bind(e):l.unbindAll()})}
 			style="
       display: flex;
       flex-direction: ${i===`left`?`row`:`row-reverse`};
@@ -339,7 +362,10 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 				${se}
 			</style>
 
-			<div ${H(ce.auto)} class="${S}">
+			<div
+				${H(e=>{e?ce.bind(e):ce.unbindAll()})}
+				class="${S}"
+			>
 				<div class="${C}">
 					${D.map((t,n)=>e`
 							<div class="${w} --slide-${n}" key=${n}>
@@ -355,7 +381,7 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 			</div>
 		`)}function qe(t,n){let r=t?.top?`top: ${t.top};`:``,i=t?.right?`right: ${t.right};`:``,a=t?.bottom?`bottom: ${t.bottom};`:``,o=t?.left?`left: ${t.left};`:``,s=t?.width?`width: ${t.width};`:``,c=t?.height?`height: ${t.height};`:``,l=typeof t?.zIndex==`number`?`z-index: ${t.zIndex};`:``,u=t?.style?t.style:``,d=t?.className?t.className:``,f=Z(t?.on??{}),p=t=>e`
 			<div
-				${H(f.auto)}
+				${H(e=>{e?f.bind(e):f.unbindAll()})}
 				class="${d}"
 				style="
       position: absolute;
@@ -369,7 +395,7 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 			</div>
 		`;return je(n,p)}function Je(t,n){let r=t?.width??`300px`,i=t?.height??`auto`,a=t?.top??`20%`,o=t?.bottom??`auto`,s=t?.left??`50%`,c=t?.right??`auto`,l=s===`auto`?``:`transform: translateX(-50%);`,u=t?.background??`rgba(255, 255, 255, 0.3)`,d=t?.blur??`10px`,f=t?.borderRadius??`12px`,p=t?.padding??`16px`,m=t?.zIndex??1e3,h=Z(t?.on??{}),g=t=>e`
 			<div
-				${H(h.auto)}
+				${H(e=>{e?h.bind(e):h.unbindAll()})}
 				style="
       position: fixed;
       top: ${a};
@@ -394,7 +420,7 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 			</div>
 		`;return Me(n,void 0,g)}function Ye(t,n){if(n===void 0)return n=>Ye(t,n??[e``]);let r=`${100/t.ratio}%`,i=t.maxWidth?`max-width: ${t.maxWidth};`:``,a=t.background?`background: ${t.background};`:``,o=t.overflow??`hidden`,s=Z(t.on??{});return e`
 		<div
-			${H(s.auto)}
+			${H(e=>{e?s.bind(e):s.unbindAll()})}
 			style="
       position: relative;
       width: 100%;
@@ -426,7 +452,12 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 			<style>
 				${o}
 			</style>
-			<div class="${i}" ${H(s.auto)}>${U(n)}</div>
+			<div
+				class="${i}"
+				${H(e=>{e?s.bind(e):s.unbindAll()})}
+			>
+				${U(n)}
+			</div>
 		`)}function Ze(t,n){if(n===void 0)return n=>Ze(t,n??[e``]);let r=t?.size??`32px`,i=t?.overlap??`-8px`,a=Z(t?.on??{}),o=(t,n)=>e`
 		<div
 			style="
@@ -442,14 +473,17 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 			${t}
 		</div>
 	`;return e`
-		<div ${H(a.auto)} style="display: flex; align-items: center;">
+		<div
+			${H(e=>{e?a.bind(e):a.unbindAll()})}
+			style="display: flex; align-items: center;"
+		>
 			${W(n,o)}
 		</div>
 	`}function Qe(t,n){if(n===void 0){let n=n=>Qe(t,n??e``);return n.html=(n,...r)=>Qe(t,e(n,...r)),n}let r=t?.position??`top-right`,i=t?.size??`16px`,a=t?.background??`red`,o=t?.color??`#fff`,[s,c,l,u]=[r.includes(`top`)?`0`:`auto`,r.includes(`right`)?`0`:`auto`,r.includes(`bottom`)?`0`:`auto`,r.includes(`left`)?`0`:`auto`],d=Z(t?.on??{});return e`
 		<div style="position: relative; display: inline-block;">
 			${U(n)}
 			<div
-				${H(d.auto)}
+				${H(e=>{e?d.bind(e):d.unbindAll()})}
 				style="
         position: absolute;
         top: ${s};
@@ -471,7 +505,7 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 				${t?.content??``}
 			</div>
 		</div>
-	`}function $e(e,t){return e?n=>{typeof e==`function`?e(n):e.current=n,typeof t==`function`?t(n):t.current=n}:t}function et(t,n){if(!n)return e=>et(t,e??De());let r=Z(t?.on??{}),i=$e(n,r.auto);return e`
+	`}function $e(e,t){return e?n=>{typeof e==`function`?e(n):e.current=n,typeof t==`function`?t(n):t.current=n}:t}function et(t,n){if(!n)return e=>et(t,e??De());let r=Z(t?.on??{}),i=$e(n,e=>{e?r.bind(e):r.unbindAll()});return e`
 		<canvas
 			${H(i)}
 			.class=${t?.className}
@@ -479,7 +513,7 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 		></canvas>
 	`}function tt(t,n){if(n===void 0)return n=>tt(t,n??[e``]);let r=t?.padding??`16px`,i=t?.borderRadius??`8px`,a=t?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,o=t?.background??`#fff`,s=Z(t?.on??{});return e`
 		<div
-			${H(s.auto)}
+			${H(e=>{e?s.bind(e):s.unbindAll()})}
 			style="
       background: ${o};
       border-radius: ${i};
@@ -492,7 +526,7 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 		</div>
 	`}function nt(t,n){if(n===void 0){let n=n=>nt(t,n??e``);return n.html=(n,...r)=>nt(t,e(n,...r)),n}let r=t?.width?`width: ${t.width};`:``,i=t?.height?`height: ${t.height};`:``,a=t?.background?`background: ${t.background};`:``,o=Z(t?.on??{});return e`
 		<div
-			${H(o.auto)}
+			${H(e=>{e?o.bind(e):o.unbindAll()})}
 			style="
       display: flex;
       justify-content: center;
@@ -504,7 +538,7 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 		</div>
 	`}function rt(t,n){if(n===void 0)return n=>rt(t,n??[e``]);let r=t?.maxWidth??`1024px`,i=t?.padding??`0 16px`,a=t?.background?`background: ${t.background};`:``,o=t?.fullHeight?`height: 100%;`:``,s=Z(t?.on??{});return e`
 		<div
-			${H(s.auto)}
+			${H(e=>{e?s.bind(e):s.unbindAll()})}
 			style="
       width: 100%;
       max-width: ${r};
@@ -518,9 +552,12 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 		>
 			${W(n)}
 		</div>
-	`}function it(t){let n=t?.orientation??`horizontal`,r=t?.thickness??`1px`,i=t?.color??`#e0e0e0`,a=t?.margin??(n===`horizontal`?`8px 0`:`0 8px`),o=Z(t?.on??{}),s=n===`horizontal`?`width: 100%; height: ${r}; background: ${i}; margin: ${a};`:`width: ${r}; height: 100%; background: ${i}; margin: ${a};`;return e`<div ${H(o.auto)} style="${s}"></div>`}function at(t,n){if(n===void 0){let n=n=>at(t,n??e``);return n.html=(n,...r)=>at(t,e(n,...r)),n}let r=t?.columns??4,i=t?.gap??`24px`,a=t?.background??`#f8f8f8`,o=t?.padding??`40px 16px`,s=Z(t?.on??{});return e`
+	`}function it(t){let n=t?.orientation??`horizontal`,r=t?.thickness??`1px`,i=t?.color??`#e0e0e0`,a=t?.margin??(n===`horizontal`?`8px 0`:`0 8px`),o=Z(t?.on??{}),s=n===`horizontal`?`width: 100%; height: ${r}; background: ${i}; margin: ${a};`:`width: ${r}; height: 100%; background: ${i}; margin: ${a};`;return e`<div
+		${H(e=>{e?o.bind(e):o.unbindAll()})}
+		style="${s}"
+	></div>`}function at(t,n){if(n===void 0){let n=n=>at(t,n??e``);return n.html=(n,...r)=>at(t,e(n,...r)),n}let r=t?.columns??4,i=t?.gap??`24px`,a=t?.background??`#f8f8f8`,o=t?.padding??`40px 16px`,s=Z(t?.on??{});return e`
 		<div
-			${H(s.auto)}
+			${H(e=>{e?s.bind(e):s.unbindAll()})}
 			style="
       width: 100%;
       background: ${a};
@@ -554,10 +591,15 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 			<style>
 				${c}
 			</style>
-			<div ${H(l.auto)} class="${o}">${U(n)}</div>
+			<div
+				${H(e=>{e?l.bind(e):l.unbindAll()})}
+				class="${o}"
+			>
+				${U(n)}
+			</div>
 		`)}function ct(t,n){if(n===void 0)return n=>ct(t,n??[e``]);let r=t?.backgroundImage?`background-image: url('${t.backgroundImage}');`:``,i=t?.height??`400px`,a=t?.overlayColor??`rgba(0, 0, 0, 0.3)`,o=Z(t?.on??{});return e`
 		<div
-			${H(o.auto)}
+			${H(e=>{e?o.bind(e):o.unbindAll()})}
 			style="
       position: relative;
       width: 100%;
@@ -602,7 +644,12 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 			<style>
 				${c}
 			</style>
-			<div ${H(l.auto)} class="${o}">${U(n)}</div>
+			<div
+				${H(e=>{e?l.bind(e):l.unbindAll()})}
+				class="${o}"
+			>
+				${U(n)}
+			</div>
 		`)}function ut(t){return e` <li>${W(t)}</li> `}function dt(t,n){let r=t?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,i=t?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,a=t?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,o=Y(`List`),s=t?.className??q(`List::list`)+`-lyco-now-${o}`,c=`
     ul.${s} {
 	    list-style: none;
@@ -646,12 +693,15 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 				<style>
 					${l}
 				</style>
-				<ul ${H(u.auto)} class="${s}">
+				<ul
+					${H(e=>{e?u.bind(e):u.unbindAll()})}
+					class="${s}"
+				>
 					${W(t,c)}
 				</ul>
 			`);return Me(n,d)}function pt(t,n){if(n===void 0)return n=>pt(t,n??[e``]);let r=t?.background??`rgba(0, 0, 0, 0.5)`,i=t?.zIndex??1e3,a=t?.fullScreen!==!1,o=Z(t?.on??{});return e`
 		<div
-			${H(o.auto)}
+			${H(e=>{e?o.bind(e):o.unbindAll()})}
 			style="
         position: ${a?`fixed`:`absolute`};
         top: 0; left: 0; right: 0; bottom: 0;
@@ -666,7 +716,7 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 		</div>
 	`}function mt(t,n){if(n===void 0){let n=n=>mt(t,n??e``);return n.html=(n,...r)=>mt(t,e(n,...r)),n}let r=t?.width?`width: ${t.width};`:``,i=t?.height?`height: ${t.height};`:``,a=t?.background?`background: ${t.background};`:``,o=Z(t?.on??{});return e`
 		<div
-			${H(o.auto)}
+			${H(e=>{e?o.bind(e):o.unbindAll()})}
 			style="
       position: relative;
       ${r} ${i} ${a}
@@ -675,7 +725,10 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 		>
 			${U(n)}
 		</div>
-	`}function ht(t){let n=t?.width?`width: ${t.width};`:``,r=t?.height?`height: ${t.height};`:``,i=Z(t?.on??{});return e`<div ${H(i.auto)} style="${n} ${r}"></div>`}function gt(t){let n=t?.type??`rect`,r=t?.width??`100%`,i=t?.height??`16px`,a=t?.borderRadius??`4px`,o=t?.animation!==!1,s=Y(`SkeletonLoader`),c=t?.className??q(`SkeletonLoader::skeleton-shimmer`)+`-lyco-now-`+s,l=n===`circle`?`border-radius: 50%; width: ${r}; height: ${r}`:`border-radius: ${a}; width: ${r}; height: ${i}`,u=Z(t?.on??{});return X(`SkeletonLoader`,e`
+	`}function ht(t){let n=t?.width?`width: ${t.width};`:``,r=t?.height?`height: ${t.height};`:``,i=Z(t?.on??{});return e`<div
+		${H(e=>{e?i.bind(e):i.unbindAll()})}
+		style="${n} ${r}"
+	></div>`}function gt(t){let n=t?.type??`rect`,r=t?.width??`100%`,i=t?.height??`16px`,a=t?.borderRadius??`4px`,o=t?.animation!==!1,s=Y(`SkeletonLoader`),c=t?.className??q(`SkeletonLoader::skeleton-shimmer`)+`-lyco-now-`+s,l=n===`circle`?`border-radius: 50%; width: ${r}; height: ${r}`:`border-radius: ${a}; width: ${r}; height: ${i}`,u=Z(t?.on??{});return X(`SkeletonLoader`,e`
 			<style>
 				${`
 	@keyframes ${c+`-shimmer`} {
@@ -690,10 +743,16 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 				  ${o?`animation: ${c+`-shimmer`} 1.2s infinite ease-in-out`:``};
 				}
 			</style>
-			<div ${H(u.auto)} class="${c}"></div>
-		`)}function _t(t){let n=Z(t?.on??{});return e`<div ${H(n.auto)} style="flex: 1 1 auto;"></div>`}function vt(t,n){if(n===void 0){let n=n=>vt(t,n??e``);return n.html=(n,...r)=>vt(t,e(n,...r)),n}let r=t?.top?`top: ${t.top};`:``,i=t?.bottom?`bottom: ${t.bottom};`:``,a=typeof t?.zIndex==`number`?`z-index: ${t.zIndex};`:``,o=Z(t?.on??{});return e`
+			<div
+				${H(e=>{e?u.bind(e):u.unbindAll()})}
+				class="${c}"
+			></div>
+		`)}function _t(t){let n=Z(t?.on??{});return e`<div
+		${H(e=>{e?n.bind(e):n.unbindAll()})}
+		style="flex: 1 1 auto;"
+	></div>`}function vt(t,n){if(n===void 0){let n=n=>vt(t,n??e``);return n.html=(n,...r)=>vt(t,e(n,...r)),n}let r=t?.top?`top: ${t.top};`:``,i=t?.bottom?`bottom: ${t.bottom};`:``,a=typeof t?.zIndex==`number`?`z-index: ${t.zIndex};`:``,o=Z(t?.on??{});return e`
 		<div
-			${H(o.auto)}
+			${H(e=>{e?o.bind(e):o.unbindAll()})}
 			style="
       position: sticky;
       ${r} ${i}
@@ -727,14 +786,17 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 				${c}
 			</style>
 
-			<div ${H(l.auto)} class="${i}">
+			<div
+				${H(e=>{e?l.bind(e):l.unbindAll()})}
+				class="${i}"
+			>
 				<table>
 					${U(n)}
 				</table>
 			</div>
 		`)}function bt(t,n){let r=t?.direction??`row`,i=Z(t?.on??{});return n===void 0?n=>bt(t,n??e``):e`
 		<div
-			${H(i.auto)}
+			${H(e=>{e?i.bind(e):i.unbindAll()})}
 			style="
       display: flex;
       flex-direction: ${r};
@@ -748,7 +810,7 @@ const{I:re}=te,ie=e=>e===null||typeof e!=`object`&&typeof e!=`function`,ae={HTML
 		</div>
 	`}function xt(t,n){let r=t?.width?`width: ${t.width};`:``,i=t?.height?`height: ${t.height};`:``,a=t?.background?`background: ${t.background};`:``,o=Z(t?.on??{});if(n===void 0)return n=>xt(t,n??[e``]);let s=`flex-start`,c=`flex-start`;switch(t?.align){case`top-right`:s=`flex-end`,c=`flex-start`;break;case`center`:s=`center`,c=`center`;break;case`bottom-left`:s=`flex-start`,c=`flex-end`;break;case`bottom-right`:s=`flex-end`,c=`flex-end`;break;default:s=`flex-start`,c=`flex-start`}return e`
 		<div
-			${H(o.auto)}
+			${H(e=>{e?o.bind(e):o.unbindAll()})}
 			style="
       position: relative;
       display: flex;