lyco 1.3.8 → 1.3.9

package/dist/index.es.js

@@ -228,7 +228,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 			<div style="flex: 0 0 ${r}; overflow: auto;">${s}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${c}</div>
 		</div>
-	`}function ee(e={},a){if(a===void 0)return t=>ee(e,t??[u``]);let o=r(`Swiper`),{gap:s=`8px`,snapType:c=`mandatory`,height:l=`auto`,width:d=`100%`,className:f=i(`Swiper::swiper`)+`-lyco-now-${o}`,direction:p=`x`,scrollBehavior:h=`smooth`,align:g=`start`,showNavigation:_=!0,navigationPosition:v=`inside`,showPagination:y=!0,paginationType:b=`dots`,autoPlay:x=!1,interval:S=3e3,loop:C=!1,touchEnabled:w=!0,mouseWheel:T=!1,onSlideChange:E,on:D}=e,O=f,k=O+`-container`,A=O+`-slide`,j=O+`-navigation`,M=O+`-pagination`,N;N=a?typeof a==`function`?a():a:[];let P=N.length,[F,I]=(()=>{let e={value:0};return[()=>e.value,t=>{let n=Math.max(0,Math.min(t,P-1));e.value!==n&&(e.value=n,E?.(n))}]})(),L=e=>{let t=typeof document<`u`?document.querySelector(`.${k}`):null;if(!t)return;let n=t.querySelectorAll(`.${A}`);if(e<0||e>=n.length)return;let r=n[e],i=r.getBoundingClientRect(),a=t.getBoundingClientRect(),o;p===`x`?(o=r.offsetLeft-t.offsetLeft,g===`center`?o-=(a.width-i.width)/2:g===`end`&&(o-=a.width-i.width),t.scrollTo({left:o,behavior:h})):(o=r.offsetTop-t.offsetTop,g===`center`?o-=(a.height-i.height)/2:g===`end`&&(o-=a.height-i.height),t.scrollTo({top:o,behavior:h})),I(e)},R=()=>{let e=F()+1>=P?C?0:F():F()+1;L(e)},z=()=>{let e=F()-1<0?C?P-1:F():F()-1;L(e)},B=()=>{let e=typeof document<`u`?document.querySelector(`.${k}`):null;if(!e)return;let t=e.querySelectorAll(`.${A}`),n=0,r=1/0;t.forEach((t,i)=>{let a=t.getBoundingClientRect(),o=e.getBoundingClientRect(),s;if(p===`x`){let e=a.left+a.width/2-(o.left+o.width/2);s=Math.abs(e)}else{let e=a.top+a.height/2-(o.top+o.height/2);s=Math.abs(e)}s<r&&(r=s,n=i)}),I(n)},V=e=>{if(!w)return;let t=e.touches[0],n=e.currentTarget;n.dataset.touchStartX=t.clientX.toString(),n.dataset.touchStartY=t.clientY.toString()},te=e=>{if(!w)return;let t=e.touches[0],n=e.currentTarget,r=parseFloat(n.dataset.touchStartX||`0`),i=parseFloat(n.dataset.touchStartY||`0`),a=t.clientX-r,o=t.clientY-i;(Math.abs(a)>Math.abs(o)||p===`x`)&&e.preventDefault()},H=e=>{if(!w)return;let t=e.currentTarget,n=parseFloat(t.dataset.touchStartX||`0`),r=parseFloat(t.dataset.touchStartY||`0`);if(!n&&!r)return;let i=e.changedTouches[0],a=i.clientX-n,o=i.clientY-r,s=Math.max(Math.abs(a),Math.abs(o))>30;s&&(p===`x`?a>0?z():R():o>0?z():R()),delete t.dataset.touchStartX,delete t.dataset.touchStartY},U=e=>{T&&(e.preventDefault(),e.deltaY>0?R():z())},W=e=>{if(!x||!e)return;let t,n=()=>{t=setInterval(R,S)},r=()=>{clearInterval(t)};return e.addEventListener(`mouseenter`,r),e.addEventListener(`mouseleave`,n),n(),()=>{clearInterval(t),e.removeEventListener(`mouseenter`,r),e.removeEventListener(`mouseleave`,n)}},G=()=>{let e=typeof document<`u`?document.querySelector(`.${k}`):null;if(!e)return;let t=[];e.addEventListener(`scroll`,B),t.push(()=>e.removeEventListener(`scroll`,B)),w&&(e.addEventListener(`touchstart`,V),e.addEventListener(`touchmove`,te,{passive:!1}),e.addEventListener(`touchend`,H),t.push(()=>e.removeEventListener(`touchstart`,V)),t.push(()=>e.removeEventListener(`touchmove`,te)),t.push(()=>e.removeEventListener(`touchend`,H))),T&&(e.addEventListener(`wheel`,U,{passive:!1}),t.push(()=>e.removeEventListener(`wheel`,U)));let n=W(e);return n&&t.push(n),L(0),()=>t.forEach(e=>e())};typeof window<`u`&&typeof document<`u`&&setTimeout(G,0);let K=u`
+	`}function ee(e={},a){if(a===void 0)return t=>ee(e,t??[u``]);let o=r(`Swiper`),{gap:s=`8px`,snapType:c=`mandatory`,height:l=`auto`,width:d=`100%`,className:f=i(`Swiper::swiper`)+`-lyco-now-${o}`,direction:p=`x`,scrollBehavior:h=`smooth`,align:g=`start`,showNavigation:_=!0,navigationPosition:v=`inside`,showPagination:y=!0,paginationType:b=`dots`,autoPlay:x=!1,interval:S=3e3,loop:C=!1,touchEnabled:w=!0,mouseWheel:T=!1,onSlideChange:E,on:D}=e,O=f,k=O+`-container`,A=O+`-slide`,j=O+`-navigation`,M=O+`-pagination`,N;N=a?typeof a==`function`?a():a:[];let P=N.length,[F,I]=(()=>{let e={value:0};return[()=>e.value,t=>{let n=Math.max(0,Math.min(t,P-1));e.value!==n&&(e.value=n,E?.(n))}]})(),L=e=>{let t=typeof document<`u`?document.querySelector(`.${k}`):null;if(!t)return;let n=t.querySelectorAll(`.${A}`);if(e<0||e>=n.length)return;let r=n[e],i=r.getBoundingClientRect(),a=t.getBoundingClientRect(),o;p===`x`?(o=r.offsetLeft-t.offsetLeft,g===`center`?o-=(a.width-i.width)/2:g===`end`&&(o-=a.width-i.width),t.scrollTo({left:o,behavior:h})):(o=r.offsetTop-t.offsetTop,g===`center`?o-=(a.height-i.height)/2:g===`end`&&(o-=a.height-i.height),t.scrollTo({top:o,behavior:h})),I(e)},R=()=>{let e=F()+1>=P?C?0:F():F()+1;L(e)},z=()=>{let e=F()-1<0?C?P-1:F():F()-1;L(e)},B=()=>{let e=typeof document<`u`?document.querySelector(`.${k}`):null;if(!e)return;let t=e.querySelectorAll(`.${A}`),n=0,r=1/0;t.forEach((t,i)=>{let a=t.getBoundingClientRect(),o=e.getBoundingClientRect(),s;if(p===`x`){let e=a.left+a.width/2-(o.left+o.width/2);s=Math.abs(e)}else{let e=a.top+a.height/2-(o.top+o.height/2);s=Math.abs(e)}s<r&&(r=s,n=i)}),I(n)},te=e=>{if(!w)return;let t=e.touches[0],n=e.currentTarget;n.dataset.touchStartX=t.clientX.toString(),n.dataset.touchStartY=t.clientY.toString()},V=e=>{if(!w)return;let t=e.touches[0],n=e.currentTarget,r=parseFloat(n.dataset.touchStartX||`0`),i=parseFloat(n.dataset.touchStartY||`0`),a=t.clientX-r,o=t.clientY-i;(Math.abs(a)>Math.abs(o)||p===`x`)&&e.preventDefault()},H=e=>{if(!w)return;let t=e.currentTarget,n=parseFloat(t.dataset.touchStartX||`0`),r=parseFloat(t.dataset.touchStartY||`0`);if(!n&&!r)return;let i=e.changedTouches[0],a=i.clientX-n,o=i.clientY-r,s=Math.max(Math.abs(a),Math.abs(o))>30;s&&(p===`x`?a>0?z():R():o>0?z():R()),delete t.dataset.touchStartX,delete t.dataset.touchStartY},U=e=>{T&&(e.preventDefault(),e.deltaY>0?R():z())},W=e=>{if(!x||!e)return;let t,n=()=>{t=setInterval(R,S)},r=()=>{clearInterval(t)};return e.addEventListener(`mouseenter`,r),e.addEventListener(`mouseleave`,n),n(),()=>{clearInterval(t),e.removeEventListener(`mouseenter`,r),e.removeEventListener(`mouseleave`,n)}},G=()=>{let e=typeof document<`u`?document.querySelector(`.${k}`):null;if(!e)return;let t=[];e.addEventListener(`scroll`,B),t.push(()=>e.removeEventListener(`scroll`,B)),w&&(e.addEventListener(`touchstart`,te),e.addEventListener(`touchmove`,V,{passive:!1}),e.addEventListener(`touchend`,H),t.push(()=>e.removeEventListener(`touchstart`,te)),t.push(()=>e.removeEventListener(`touchmove`,V)),t.push(()=>e.removeEventListener(`touchend`,H))),T&&(e.addEventListener(`wheel`,U,{passive:!1}),t.push(()=>e.removeEventListener(`wheel`,U)));let n=W(e);return n&&t.push(n),L(0),()=>t.forEach(e=>e())};typeof window<`u`&&typeof document<`u`&&setTimeout(G,0);let K=u`
 		<div class="${M}">
 			${Array.from({length:P},(e,t)=>u`
 					<button
@@ -237,25 +237,25 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 					></button>
 				`)}
 		</div>
-	`,q=u`
+	`,ne=u`
 		<div class="${M} fraction">
 			<span class="current">${F()+1}</span>
 			<span class="separator">/</span>
 			<span class="total">${P}</span>
 		</div>
-	`,J=u`
+	`,q=u`
 		<div class="${M} progressbar">
 			<div
 				class="progress"
 				style="width: ${P>1?F()/(P-1)*100:0}%"
 			></div>
 		</div>
-	`,Y=u`
+	`,J=u`
 		<div class="${j}">
 			<button class="prev" @click=${z}>◀</button>
 			<button class="next" @click=${R}>▶</button>
 		</div>
-	`,ne=`
+	`,re=`
 	.${O} {
 		position: relative;
 		overflow: hidden;
@@ -360,13 +360,13 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 		background-color: white;
 		transition: width 0.3s;
 	}
-	`,X=n(D??{});return t(`Swiper`,u`
+	`,Y=n(D??{});return t(`Swiper`,u`
 			<style>
-				${ne}
+				${re}
 			</style>
 
 			<div
-				${m(e=>{e?X.bind(e):X.unbindAll()})}
+				${m(e=>{e?Y.bind(e):Y.unbindAll()})}
 				class="${O}"
 			>
 				<div class="${k}">
@@ -377,10 +377,10 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 						`)}
 				</div>
 
-				${_?Y:null}
+				${_?J:null}
 				${y&&b===`dots`?K:null}
-				${y&&b===`fraction`?q:null}
-				${y&&b===`progressbar`?J:null}
+				${y&&b===`fraction`?ne:null}
+				${y&&b===`progressbar`?q:null}
 			</div>
 		`)}const z={borderRadius:{small:`4px`,medium:`8px`,large:`16px`,full:`9999px`},elevation:{level1:`0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14)`,level2:`0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12)`,level3:`0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10)`,level4:`0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05)`,level5:`0 20px 40px rgba(0,0,0,0.2)`},animation:{standard:`0.2s cubic-bezier(0.4, 0, 0.2, 1)`,emphasized:`0.3s cubic-bezier(0.4, 0, 0.2, 1)`,decelerated:`0.4s cubic-bezier(0, 0, 0.2, 1)`},colors:{primary:`#6750A4`,onPrimary:`#FFFFFF`,primaryContainer:`#EADDFF`,onPrimaryContainer:`#21005E`,secondary:`#625B71`,onSecondary:`#FFFFFF`,secondaryContainer:`#E8DEF8`,onSecondaryContainer:`#1E192B`,surface:`#FEF7FF`,onSurface:`#1C1B1F`,surfaceVariant:`#E7E0EB`,onSurfaceVariant:`#49454E`,error:`#B00020`}};function B(e){let{checked:a=!1,disabled:o=!1,size:s=`medium`,color:c=z.colors.primary,onChange:l,className:d=``,on:f={}}=e??{},p=r(`SwitchInput`),h=i(`SwitchInput::switch`)+`-lyco-now-${p}`,g={small:{width:32,height:16,thumbSize:12},medium:{width:44,height:24,thumbSize:18},large:{width:56,height:32,thumbSize:24}},{width:_,height:v,thumbSize:y}=g[s],b=`
     .${h} {
@@ -456,7 +456,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 				/>
 				<span class="slider"></span>
 			</label>
-		`)}function V(e,t){let r=e?.top?`top: ${e.top};`:``,i=e?.right?`right: ${e.right};`:``,o=e?.bottom?`bottom: ${e.bottom};`:``,s=e?.left?`left: ${e.left};`:``,l=e?.width?`width: ${e.width};`:``,d=e?.height?`height: ${e.height};`:``,f=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``,p=e?.style?e.style:``,h=e?.className?e.className:``,g=n(e?.on??{}),_=e=>u`
+		`)}function te(e,t){let r=e?.top?`top: ${e.top};`:``,i=e?.right?`right: ${e.right};`:``,o=e?.bottom?`bottom: ${e.bottom};`:``,s=e?.left?`left: ${e.left};`:``,l=e?.width?`width: ${e.width};`:``,d=e?.height?`height: ${e.height};`:``,f=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``,p=e?.style?e.style:``,h=e?.className?e.className:``,g=n(e?.on??{}),_=e=>u`
 			<div
 				${m(e=>{e?g.bind(e):g.unbindAll()})}
 				class="${h}"
@@ -470,7 +470,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 			>
 				${a(e)}
 			</div>
-		`;return c(t,_)}function te(e,t){let r=e?.width??`300px`,i=e?.height??`auto`,a=e?.top??`20%`,o=e?.bottom??`auto`,c=e?.left??`50%`,l=e?.right??`auto`,d=c===`auto`?``:`transform: translateX(-50%);`,f=e?.background??`rgba(255, 255, 255, 0.3)`,p=e?.blur??`10px`,h=e?.borderRadius??`12px`,g=e?.padding??`16px`,_=e?.zIndex??1e3,v=n(e?.on??{}),y=e=>u`
+		`;return c(t,_)}function V(e,t){let r=e?.width??`300px`,i=e?.height??`auto`,a=e?.top??`20%`,o=e?.bottom??`auto`,c=e?.left??`50%`,l=e?.right??`auto`,d=c===`auto`?``:`transform: translateX(-50%);`,f=e?.background??`rgba(255, 255, 255, 0.3)`,p=e?.blur??`10px`,h=e?.borderRadius??`12px`,g=e?.padding??`16px`,_=e?.zIndex??1e3,v=n(e?.on??{}),y=e=>u`
 			<div
 				${m(e=>{e?v.bind(e):v.unbindAll()})}
 				style="
@@ -588,7 +588,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 			.class=${e?.className}
 			style=${e?.style??``}
 		></canvas>
-	`}function q(e,t){if(t===void 0)return t=>q(e,t??[u``]);let r=e?.padding??`16px`,i=e?.borderRadius??`8px`,a=e?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,s=e?.background??`#fff`,c=n(e?.on??{});return u`
+	`}function ne(e,t){return e.$__LYCO_INIT_CANVAS__$||=t(),e.$__LYCO_INIT_CANVAS__$}function q(e,t){if(t===void 0)return t=>q(e,t??[u``]);let r=e?.padding??`16px`,i=e?.borderRadius??`8px`,a=e?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,s=e?.background??`#fff`,c=n(e?.on??{});return u`
 		<div
 			${m(e=>{e?c.bind(e):c.unbindAll()})}
 			style="
@@ -613,7 +613,97 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 		>
 			${a(t)}
 		</div>
-	`}function Y(e,t){if(t===void 0)return t=>Y(e,t??[u``]);let r=e?.maxWidth??`1024px`,i=e?.padding??`0 16px`,a=e?.background?`background: ${e.background};`:``,s=e?.fullHeight?`height: 100%;`:``,c=n(e?.on??{});return u`
+	`}function re(e){let{value:a=``,options:o=[],placeholder:s=``,disabled:c=!1,error:l=!1,className:d=``,style:f=``,maxHeight:p=`300px`,onChange:h,onInput:g,onFocus:_,onBlur:v,on:y={},optionRender:b}=e??{},x=r(`Combobox`),S=i(`Combobox::combobox`)+`-lyco-now-${x}`,C=!1,w=null,T=`
+    .${S} {
+      position: relative;
+      width: 100%;
+    }
+
+    .${S} input {
+      width: 100%;
+      padding: 12px 16px;
+      font-size: 16px;
+      border: 1px solid ${l?z.colors.error:z.colors.surfaceVariant};
+      border-radius: ${z.borderRadius.small};
+      color: ${z.colors.onSurface};
+      transition: all ${z.animation.standard};
+      outline: none;
+      box-sizing: border-box;
+    }
+
+    .${S} input:focus {
+      border-color: ${z.colors.primary};
+      box-shadow: 0 0 0 2px ${z.colors.primaryContainer};
+    }
+
+    .${S} input:disabled {
+      background: ${z.colors.surfaceVariant};
+      color: ${z.colors.onSurfaceVariant};
+      cursor: not-allowed;
+    }
+
+    .${S} .options {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      max-height: ${p};
+      overflow-y: auto;
+      border: 1px solid ${z.colors.surfaceVariant};
+      border-radius: ${z.borderRadius.small};
+      box-shadow: ${z.elevation.level2};
+      z-index: 1000;
+      display: none;
+    }
+
+    .${S} .options.open {
+      display: block;
+    }
+
+    .${S} .option {
+      padding: 12px 16px;
+      cursor: pointer;
+      transition: background ${z.animation.standard};
+    }
+
+    .${S} .option:hover {
+      background: ${z.colors.primaryContainer};
+    }
+
+    .${S} .option.selected {
+      background: ${z.colors.primaryContainer};
+      color: ${z.colors.onPrimaryContainer};
+    }
+  `,E=n(y),D=null,O=()=>{C?D?.classList.remove(`open`):D?.classList.add(`open`),C=!C},k=(e,t)=>{if(w){w.value=e.value;let n=t.currentTarget;Array.from(D?.querySelectorAll(`.selected`)??[]).forEach(e=>e.classList.remove(`selected`)),!n.classList.contains(`selected`)&&n.classList.add(`selected`),h?.(e.value)}O()},A=e=>{let t=e.target;t.closest(`.${S}`)||(C=!1,D?.classList.remove(`open`))};return typeof window<`u`&&document.addEventListener(`click`,A),t(`Combobox`,u`
+			<style>
+				${T}
+			</style>
+			<div class="${S} ${d}" style="${f}">
+				<input
+					${m(e=>{e?(w=e,E.bind(e)):E.unbindAll()})}
+					type="text"
+					.value=${a}
+					placeholder=${s}
+					?disabled=${c}
+					@focus=${()=>{_?.(),O()}}
+					@input=${e=>{let t=e.target;g?.(t.value)}}
+					@change=${e=>{let t=e.target;h?.(t.value)}}
+				/>
+				<div
+					${m(e=>{e&&(D=e)})}
+					class="options"
+				>
+					${o.map(e=>u`
+							<div
+								class="option ${e.value===(w?.value??a)?`selected`:``}"
+								@click=${t=>k(e,t)}
+							>
+								${b?b(e):e.label}
+							</div>
+						`)}
+				</div>
+			</div>
+		`)}function Y(e,t){if(t===void 0)return t=>Y(e,t??[u``]);let r=e?.maxWidth??`1024px`,i=e?.padding??`0 16px`,a=e?.background?`background: ${e.background};`:``,s=e?.fullHeight?`height: 100%;`:``,c=n(e?.on??{});return u`
 		<div
 			${m(e=>{e?c.bind(e):c.unbindAll()})}
 			style="
@@ -629,7 +719,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 		>
 			${o(t)}
 		</div>
-	`}function ne(e){let t=e?.orientation??`horizontal`,r=e?.thickness??`1px`,i=e?.color??`#e0e0e0`,a=e?.margin??(t===`horizontal`?`8px 0`:`0 8px`),o=n(e?.on??{}),s=t===`horizontal`?`width: 100%; height: ${r}; background: ${i}; margin: ${a};`:`width: ${r}; height: 100%; background: ${i}; margin: ${a};`;return u`<div
+	`}function ie(e){let t=e?.orientation??`horizontal`,r=e?.thickness??`1px`,i=e?.color??`#e0e0e0`,a=e?.margin??(t===`horizontal`?`8px 0`:`0 8px`),o=n(e?.on??{}),s=t===`horizontal`?`width: 100%; height: ${r}; background: ${i}; margin: ${a};`:`width: ${r}; height: 100%; background: ${i}; margin: ${a};`;return u`<div
 		${m(e=>{e?o.bind(e):o.unbindAll()})}
 		style="${s}"
 	></div>`}function X(e,t){if(t===void 0){let t=t=>X(e,t??u``);return t.html=(t,...n)=>X(e,u(t,...n)),t}let r=e?.columns??4,i=e?.gap??`24px`,o=e?.background??`#f8f8f8`,s=e?.padding??`40px 16px`,c=n(e?.on??{});return u`
@@ -655,7 +745,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 				© ${new Date().getFullYear()} Your Company. All rights reserved.
 			</div>
 		</div>
-	`}function re(e,t){return t?e.map((e,n)=>t(e,n)):t=>e.map((e,n)=>t(e,n))}function Z(e,o){if(o===void 0){let t=t=>Z(e,t??u``);return t.html=(t,...n)=>Z(e,u(t,...n)),t}let s=e.defaultColumns??1,c=e.gap??`16px`,l=r(`GridBreakpoint`),d=e.className??i(`GridBreakpoint::grid-breakpoint`)+`-lyco-now-`+l,f=Object.entries(e.breakpoints).map(([e,t])=>`@media`+e+`{
+	`}function ae(e,t){return t?e.map((e,n)=>t(e,n)):t=>e.map((e,n)=>t(e,n))}function Z(e,o){if(o===void 0){let t=t=>Z(e,t??u``);return t.html=(t,...n)=>Z(e,u(t,...n)),t}let s=e.defaultColumns??1,c=e.gap??`16px`,l=r(`GridBreakpoint`),d=e.className??i(`GridBreakpoint::grid-breakpoint`)+`-lyco-now-`+l,f=Object.entries(e.breakpoints).map(([e,t])=>`@media`+e+`{
 `+d+`{ grid-template-columns: repeat(`+t+`, 1fr); }
 }`).join(`
 `),p=`
@@ -674,7 +764,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 			>
 				${a(o)}
 			</div>
-		`)}function ie(e,t){if(t===void 0)return t=>ie(e,t??[u``]);let r=e?.backgroundImage?`background-image: url('${e.backgroundImage}');`:``,i=e?.height??`400px`,a=e?.overlayColor??`rgba(0, 0, 0, 0.3)`,s=n(e?.on??{});return u`
+		`)}function oe(e,t){if(t===void 0)return t=>oe(e,t??[u``]);let r=e?.backgroundImage?`background-image: url('${e.backgroundImage}');`:``,i=e?.height??`400px`,a=e?.overlayColor??`rgba(0, 0, 0, 0.3)`,s=n(e?.on??{});return u`
 		<div
 			${m(e=>{e?s.bind(e):s.unbindAll()})}
 			style="
@@ -727,7 +817,19 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 			>
 				${a(o)}
 			</div>
-		`)}function ae(e){return u` <li>${o(e)}</li> `}function oe(e,n){let a=e?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,s=e?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,c=e?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,l=r(`List`),d=e?.className??i(`List::list`)+`-lyco-now-${l}`,f=`
+		`)}function se(t,n,r=.1,i={}){let a=Array(t.length).fill(!1),o=`${r*100}vh`,s=`100vw`,c=t.map((t,r)=>u`
+			<div
+				${m(o=>{if(o&&!a[r]){let s=new IntersectionObserver((o,s)=>{o.forEach(o=>{if(o.isIntersecting&&!a[r]){let c=o.target;a[r]=!0,f(n(t,r),c),e.applyAnimation(c,i);let l=c.querySelector(`[data-fallback]`);l&&l.remove(),s.unobserve(c)}})},{root:null,rootMargin:`0px`});s.observe(o)}})}
+				data-index="${r}"
+				style="transition: transform ${i.duration||`1s`} ease;"
+			>
+				<!-- 占位元素 -->
+				<div
+					data-fallback
+					style="height: ${o}; width: ${s};"
+				></div>
+			</div>
+		`);return c}function ce(e){return u` <li>${o(e)}</li> `}function le(e,n){let a=e?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,s=e?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,c=e?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,l=r(`List`),d=e?.className??i(`List::list`)+`-lyco-now-${l}`,f=`
     ul.${d} {
 	    list-style: none;
 	    margin: 0;
@@ -750,7 +852,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 				<ul class="${d}">
 					${o(e)}
 				</ul>
-			`);return n===void 0?p:p(n)}function se(e,a){let c=e?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,l=e?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,d=e?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,f=r(`ListGroup`),p=e?.className??i(`ListGroup::list-group`)+`-lyco-now-`+f,h=(e,t,n,r)=>n?u` <li>${e}</li> `:e,g=`
+			`);return n===void 0?p:p(n)}function ue(e,a){let c=e?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,l=e?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,d=e?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,f=r(`ListGroup`),p=e?.className??i(`ListGroup::list-group`)+`-lyco-now-`+f,h=(e,t,n,r)=>n?u` <li>${e}</li> `:e,g=`
 	ul.${p} {
 	  list-style: none;
 	  margin: 0;
@@ -776,7 +878,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 				>
 					${o(e,h)}
 				</ul>
-			`);return s(a,v)}function ce(e,t){if(t===void 0)return t=>ce(e,t??[u``]);let r=e?.background??`rgba(0, 0, 0, 0.5)`,i=e?.zIndex??1e3,a=e?.fullScreen!==!1,s=n(e?.on??{});return u`
+			`);return s(a,v)}function de(e,t){if(t===void 0)return t=>de(e,t??[u``]);let r=e?.background??`rgba(0, 0, 0, 0.5)`,i=e?.zIndex??1e3,a=e?.fullScreen!==!1,s=n(e?.on??{});return u`
 		<div
 			${m(e=>{e?s.bind(e):s.unbindAll()})}
 			style="
@@ -791,7 +893,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 		>
 			${o(t)}
 		</div>
-	`}function le(e,t){if(t===void 0){let t=t=>le(e,t??u``);return t.html=(t,...n)=>le(e,u(t,...n)),t}let r=e?.width?`width: ${e.width};`:``,i=e?.height?`height: ${e.height};`:``,o=e?.background?`background: ${e.background};`:``,s=n(e?.on??{});return u`
+	`}function fe(e,t){if(t===void 0){let t=t=>fe(e,t??u``);return t.html=(t,...n)=>fe(e,u(t,...n)),t}let r=e?.width?`width: ${e.width};`:``,i=e?.height?`height: ${e.height};`:``,o=e?.background?`background: ${e.background};`:``,s=n(e?.on??{});return u`
 		<div
 			${m(e=>{e?s.bind(e):s.unbindAll()})}
 			style="
@@ -802,221 +904,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 		>
 			${a(t)}
 		</div>
-	`}function ue(e){let t=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=n(e?.on??{});return u`<div
-		${m(e=>{e?i.bind(e):i.unbindAll()})}
-		style="${t} ${r}"
-	></div>`}function de(e){let{type:a=`rect`,width:o=`100%`,height:s=`16px`,borderRadius:c=`4px`,animation:l=!0,animationType:d=`shimmer`,bgColor:f=`#eee`,highlightColor:p=`#ddd`,count:h=1,spacing:g=`8px`,direction:_=`vertical`,delay:v=0,autoHide:y=!1,duration:b=2e3,on:x={}}=e??{},S=r(`SkeletonLoader`),C=i(`SkeletonLoader::skeleton`)+`-lyco-now-`+S,w=n(x),T=a===`circle`?`border-radius:50%;width:${o};height:${o}`:`border-radius:${c};width:${o};height:${s}`,E=``,D=``;l&&(d===`shimmer`?(E=`@keyframes ${C}-shimmer { 0% { background-color: ${f}; } 50% { background-color: ${p}; } 100% { background-color: ${f}; } }`,D=`animation:${C}-shimmer 1.2s infinite ease-in-out;`):(E=`@keyframes ${C}-pulse { 0% { opacity:1; } 50% { opacity:0.4; } 100% { opacity:1; } }`,D=`animation:${C}-pulse 1.2s infinite ease-in-out;`));let O=_===`horizontal`?`display:flex;flex-direction:row;gap:${g}`:`display:flex;flex-direction:column;gap:${g}`,k=[];for(let e=0;e<h;e++)k.push(u`
-			<div
-				class="${C}"
-				style="${T};background-color:${f};${D};opacity:0;transition:opacity 0.3s"
-				${m(e=>{e&&w.bind(e)})}
-			></div>
-		`);function A(e){let t=Array.from(e.querySelectorAll(`.${C}`));setTimeout(()=>{t.forEach(e=>e.style.opacity=`1`),y&&setTimeout(()=>{t.forEach(e=>e.style.opacity=`0`)},b)},v)}return t(`SkeletonLoader`,u`
-			<style>
-				${E}
-			</style>
-			<div
-				style="${O}"
-				${m(e=>e&&A(e))}
-			>
-				${k}
-			</div>
-		`)}function fe(e){let t=n(e?.on??{});return u`<div
-		${m(e=>{e?t.bind(e):t.unbindAll()})}
-		style="flex: 1 1 auto;"
-	></div>`}function pe(e,t){if(t===void 0){let t=t=>pe(e,t??u``);return t.html=(t,...n)=>pe(e,u(t,...n)),t}let r=e?.top?`top: ${e.top};`:``,i=e?.bottom?`bottom: ${e.bottom};`:``,o=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``,s=n(e?.on??{});return u`
-		<div
-			${m(e=>{e?s.bind(e):s.unbindAll()})}
-			style="
-      position: sticky;
-      ${r} ${i}
-      ${o}
-    "
-		>
-			${a(t)}
-		</div>
-	`}function me(e,o){if(o===void 0){let t=t=>me(e,t??u``);return t.html=(t,...n)=>me(e,u(t,...n)),t}let s=r(`Table`),c=e?.className??i(`Table::table`)+`-lyco-now-${s}`,l=e?.striped?`
-      .${c} tr:nth-child(even) { 
-        background: ${z.colors.surface};
-      }
-    `:``,d=e?.hover?`
-      .${c} tr:hover { 
-        background: ${z.colors.primaryContainer};
-        cursor: pointer;
-      }
-    `:``,f=e?.bordered?`
-      .${c}, .${c} th, .${c} td { 
-        border: 1px solid ${z.colors.surfaceVariant}; 
-      }
-    `:``,p=`
-	.${c} table {
-	  width: 100%;
-	  border-collapse: separate;
-	  border-spacing: 0;
-	  border-radius: ${z.borderRadius.medium};
-	  overflow: hidden;
-	  box-shadow: ${z.elevation.level1};
-	}
-	.${c} th,
-	.${c} td {
-	  padding: 16px;
-	  text-align: left;
-	  transition: background ${z.animation.standard};
-	}
-	.${c} th {
-	  background: ${z.colors.surfaceVariant};
-	  color: ${z.colors.onSurfaceVariant};
-	  font-weight: 500;
-	}
-	.${c} td {
-	  border-bottom: 1px solid ${z.colors.surfaceVariant}; 
-	}
-	${l}
-	${d}
-	${f}
-	`,h=n(e?.on??{});return t(`Table`,u`
-			<style>
-				${p}
-			</style>
-
-			<div
-				${m(e=>{e?h.bind(e):h.unbindAll()})}
-				class="${c}"
-			>
-				<table>
-					${a(o)}
-				</table>
-			</div>
-		`)}function he(e,t){let r=e?.direction??`row`,i=n(e?.on??{});return t===void 0?t=>he(e,t??u``):u`
-		<div
-			${m(e=>{e?i.bind(e):i.unbindAll()})}
-			style="
-      display: flex;
-      flex-direction: ${r};
-      flex-wrap: wrap;
-      ${e?.gap?`gap: ${e.gap};`:``}
-      ${e?.align?`align-items: ${e.align};`:``}
-      ${e?.justify?`justify-content: ${e.justify};`:``}
-    "
-		>
-			${o(t)}
-		</div>
-	`}function ge(e,t){let r=e?.width?`width: ${e.width};`:``,i=e?.height?`height: ${e.height};`:``,a=e?.background?`background: ${e.background};`:``,s=n(e?.on??{});if(t===void 0)return t=>ge(e,t??[u``]);let c=`flex-start`,l=`flex-start`;switch(e?.align){case`top-right`:c=`flex-end`,l=`flex-start`;break;case`center`:c=`center`,l=`center`;break;case`bottom-left`:c=`flex-start`,l=`flex-end`;break;case`bottom-right`:c=`flex-end`,l=`flex-end`;break;default:c=`flex-start`,l=`flex-start`}return u`
-		<div
-			${m(e=>{e?s.bind(e):s.unbindAll()})}
-			style="
-      position: relative;
-      display: flex;
-      justify-content: ${c};
-      align-items: ${l};
-      ${r} ${i} ${a}
-    "
-		>
-			${o(t)}
-		</div>
-	`}function _e(t,n,r=.1,i={}){let a=Array(t.length).fill(!1),o=`${r*100}vh`,s=`100vw`,c=t.map((t,r)=>u`
-			<div
-				${m(o=>{if(o&&!a[r]){let s=new IntersectionObserver((o,s)=>{o.forEach(o=>{if(o.isIntersecting&&!a[r]){let c=o.target;a[r]=!0,f(n(t,r),c),e.applyAnimation(c,i);let l=c.querySelector(`[data-fallback]`);l&&l.remove(),s.unobserve(c)}})},{root:null,rootMargin:`0px`});s.observe(o)}})}
-				data-index="${r}"
-				style="transition: transform ${i.duration||`1s`} ease;"
-			>
-				<!-- 占位元素 -->
-				<div
-					data-fallback
-					style="height: ${o}; width: ${s};"
-				></div>
-			</div>
-		`);return c}function ve(e){let{value:a=``,options:o=[],placeholder:s=``,disabled:c=!1,error:l=!1,className:d=``,style:f=``,maxHeight:p=`300px`,onChange:h,onInput:g,onFocus:_,onBlur:v,on:y={},optionRender:b}=e??{},x=r(`Combobox`),S=i(`Combobox::combobox`)+`-lyco-now-${x}`,C=!1,w=null,T=`
-    .${S} {
-      position: relative;
-      width: 100%;
-    }
-
-    .${S} input {
-      width: 100%;
-      padding: 12px 16px;
-      font-size: 16px;
-      border: 1px solid ${l?z.colors.error:z.colors.surfaceVariant};
-      border-radius: ${z.borderRadius.small};
-      color: ${z.colors.onSurface};
-      transition: all ${z.animation.standard};
-      outline: none;
-      box-sizing: border-box;
-    }
-
-    .${S} input:focus {
-      border-color: ${z.colors.primary};
-      box-shadow: 0 0 0 2px ${z.colors.primaryContainer};
-    }
-
-    .${S} input:disabled {
-      background: ${z.colors.surfaceVariant};
-      color: ${z.colors.onSurfaceVariant};
-      cursor: not-allowed;
-    }
-
-    .${S} .options {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      right: 0;
-      max-height: ${p};
-      overflow-y: auto;
-      border: 1px solid ${z.colors.surfaceVariant};
-      border-radius: ${z.borderRadius.small};
-      box-shadow: ${z.elevation.level2};
-      z-index: 1000;
-      display: none;
-    }
-
-    .${S} .options.open {
-      display: block;
-    }
-
-    .${S} .option {
-      padding: 12px 16px;
-      cursor: pointer;
-      transition: background ${z.animation.standard};
-    }
-
-    .${S} .option:hover {
-      background: ${z.colors.primaryContainer};
-    }
-
-    .${S} .option.selected {
-      background: ${z.colors.primaryContainer};
-      color: ${z.colors.onPrimaryContainer};
-    }
-  `,E=n(y),D=null,O=()=>{C?D?.classList.remove(`open`):D?.classList.add(`open`),C=!C},k=(e,t)=>{if(w){w.value=e.value;let n=t.currentTarget;Array.from(D?.querySelectorAll(`.selected`)??[]).forEach(e=>e.classList.remove(`selected`)),!n.classList.contains(`selected`)&&n.classList.add(`selected`),h?.(e.value)}O()},A=e=>{let t=e.target;t.closest(`.${S}`)||(C=!1,D?.classList.remove(`open`))};return typeof window<`u`&&document.addEventListener(`click`,A),t(`Combobox`,u`
-			<style>
-				${T}
-			</style>
-			<div class="${S} ${d}" style="${f}">
-				<input
-					${m(e=>{e?(w=e,E.bind(e)):E.unbindAll()})}
-					type="text"
-					.value=${a}
-					placeholder=${s}
-					?disabled=${c}
-					@focus=${()=>{_?.(),O()}}
-					@input=${e=>{let t=e.target;g?.(t.value)}}
-					@change=${e=>{let t=e.target;h?.(t.value)}}
-				/>
-				<div
-					${m(e=>{e&&(D=e)})}
-					class="options"
-				>
-					${o.map(e=>u`
-							<div
-								class="option ${e.value===(w?.value??a)?`selected`:``}"
-								@click=${t=>k(e,t)}
-							>
-								${b?b(e):e.label}
-							</div>
-						`)}
-				</div>
-			</div>
-		`)}function ye(e){let t=Math.min(100,Math.max(0,e?.value??0)),r=Math.min(100,Math.max(0,e?.bufferValue??0)),i=e?.color??`#1976d2`,a=e?.secondaryColor??`#90caf9`,o=e?.backgroundColor??`#e0e0e0`,s=e?.height??`4px`,c=e?.radius??`4px`,d=e?.showLabel??!1,f=e?.labelPosition??`inside`,p=e?.labelColor??(t>50?`white`:i),h=e?.labelFontSize??`12px`,g=e?.striped??!1,_=e?.animated??!1,v=e?.paused??!1,y=e?.transitionDuration??`0.3s`,b=e?.className??``,x=e?.style??``,S=n(e?.on??{}),C=g?`background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
+	`}function pe(e){let t=Math.min(100,Math.max(0,e?.value??0)),r=Math.min(100,Math.max(0,e?.bufferValue??0)),i=e?.color??`#1976d2`,a=e?.secondaryColor??`#90caf9`,o=e?.backgroundColor??`#e0e0e0`,s=e?.height??`4px`,c=e?.radius??`4px`,d=e?.showLabel??!1,f=e?.labelPosition??`inside`,p=e?.labelColor??(t>50?`white`:i),h=e?.labelFontSize??`12px`,g=e?.striped??!1,_=e?.animated??!1,v=e?.paused??!1,y=e?.transitionDuration??`0.3s`,b=e?.className??``,x=e?.style??``,S=n(e?.on??{}),C=g?`background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
       background-size: 1rem 1rem;
       animation: progress-stripes 1s linear infinite;
       animation-play-state: ${v?`paused`:`running`};`:``;return u`
@@ -1092,7 +980,29 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 				  `:``}
 			${e?.suffixIcon}
 		</div>
-	`}function be(e){let{size:i=`24px`,color:a=z.colors.primary,thickness:o=`2px`,speed:s=`1.2s`,className:c=``,opacity:d=1,startAngle:f=0,easing:p=`linear`,reverse:h=!1,style:g=``,on:_={},children:v,svgMode:y=!1,strokeLinecap:b=`butt`,strokeDasharray:x=``}=e??{},S=n(_),C=r(`Spinner`),w=u`
+	`}function me(e){let t=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=n(e?.on??{});return u`<div
+		${m(e=>{e?i.bind(e):i.unbindAll()})}
+		style="${t} ${r}"
+	></div>`}function he(e){let{type:a=`rect`,width:o=`100%`,height:s=`16px`,borderRadius:c=`4px`,animation:l=!0,animationType:d=`shimmer`,bgColor:f=`#eee`,highlightColor:p=`#ddd`,count:h=1,spacing:g=`8px`,direction:_=`vertical`,delay:v=0,autoHide:y=!1,duration:b=2e3,on:x={}}=e??{},S=r(`SkeletonLoader`),C=i(`SkeletonLoader::skeleton`)+`-lyco-now-`+S,w=n(x),T=a===`circle`?`border-radius:50%;width:${o};height:${o}`:`border-radius:${c};width:${o};height:${s}`,E=``,D=``;l&&(d===`shimmer`?(E=`@keyframes ${C}-shimmer { 0% { background-color: ${f}; } 50% { background-color: ${p}; } 100% { background-color: ${f}; } }`,D=`animation:${C}-shimmer 1.2s infinite ease-in-out;`):(E=`@keyframes ${C}-pulse { 0% { opacity:1; } 50% { opacity:0.4; } 100% { opacity:1; } }`,D=`animation:${C}-pulse 1.2s infinite ease-in-out;`));let O=_===`horizontal`?`display:flex;flex-direction:row;gap:${g}`:`display:flex;flex-direction:column;gap:${g}`,k=[];for(let e=0;e<h;e++)k.push(u`
+			<div
+				class="${C}"
+				style="${T};background-color:${f};${D};opacity:0;transition:opacity 0.3s"
+				${m(e=>{e&&w.bind(e)})}
+			></div>
+		`);function A(e){let t=Array.from(e.querySelectorAll(`.${C}`));setTimeout(()=>{t.forEach(e=>e.style.opacity=`1`),y&&setTimeout(()=>{t.forEach(e=>e.style.opacity=`0`)},b)},v)}return t(`SkeletonLoader`,u`
+			<style>
+				${E}
+			</style>
+			<div
+				style="${O}"
+				${m(e=>e&&A(e))}
+			>
+				${k}
+			</div>
+		`)}function ge(e){let t=n(e?.on??{});return u`<div
+		${m(e=>{e?t.bind(e):t.unbindAll()})}
+		style="flex: 1 1 auto;"
+	></div>`}function _e(e){let{size:i=`24px`,color:a=z.colors.primary,thickness:o=`2px`,speed:s=`1.2s`,className:c=``,opacity:d=1,startAngle:f=0,easing:p=`linear`,reverse:h=!1,style:g=``,on:_={},children:v,svgMode:y=!1,strokeLinecap:b=`butt`,strokeDasharray:x=``}=e??{},S=n(_),C=r(`Spinner`),w=u`
 		<div
 			class="${c}"
 			style="display: inline-flex; align-items: center; justify-content: center; width: ${i}; height: ${i}; ${g}"
@@ -1163,7 +1073,70 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 				}
 			`.cssText}
 		</style>
-	`;return t(`Spinner`,y?T:w)}let $=function(e){return e.Top=`top`,e.Bottom=`bottom`,e.Left=`left`,e.Right=`right`,e}({});function xe(e,t){let{content:r,placement:i=$.Top,delay:o={show:200,hide:100},offset:s=8,hideOnClick:l=!1,interactive:d=!1,maxWidth:f=`200px`,theme:p=`dark`,className:h=``,style:g=``,zIndex:_=1e3,on:v={},onShow:y,onHide:b}=e,x=n(v),S,C;function w(e){clearTimeout(C),S=window.setTimeout(()=>{E.style.visibility=`visible`,E.style.opacity=`1`,y?.()},o.show)}function T(){clearTimeout(S),C=window.setTimeout(()=>{E.style.visibility=`hidden`,E.style.opacity=`0`,b?.()},o.hide)}let E,D=e=>u`
+	`;return t(`Spinner`,y?T:w)}function ve(e,t){if(t===void 0){let t=t=>ve(e,t??u``);return t.html=(t,...n)=>ve(e,u(t,...n)),t}let r=e?.top?`top: ${e.top};`:``,i=e?.bottom?`bottom: ${e.bottom};`:``,o=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``,s=n(e?.on??{});return u`
+		<div
+			${m(e=>{e?s.bind(e):s.unbindAll()})}
+			style="
+      position: sticky;
+      ${r} ${i}
+      ${o}
+    "
+		>
+			${a(t)}
+		</div>
+	`}function ye(e,o){if(o===void 0){let t=t=>ye(e,t??u``);return t.html=(t,...n)=>ye(e,u(t,...n)),t}let s=r(`Table`),c=e?.className??i(`Table::table`)+`-lyco-now-${s}`,l=e?.striped?`
+      .${c} tr:nth-child(even) { 
+        background: ${z.colors.surface};
+      }
+    `:``,d=e?.hover?`
+      .${c} tr:hover { 
+        background: ${z.colors.primaryContainer};
+        cursor: pointer;
+      }
+    `:``,f=e?.bordered?`
+      .${c}, .${c} th, .${c} td { 
+        border: 1px solid ${z.colors.surfaceVariant}; 
+      }
+    `:``,p=`
+	.${c} table {
+	  width: 100%;
+	  border-collapse: separate;
+	  border-spacing: 0;
+	  border-radius: ${z.borderRadius.medium};
+	  overflow: hidden;
+	  box-shadow: ${z.elevation.level1};
+	}
+	.${c} th,
+	.${c} td {
+	  padding: 16px;
+	  text-align: left;
+	  transition: background ${z.animation.standard};
+	}
+	.${c} th {
+	  background: ${z.colors.surfaceVariant};
+	  color: ${z.colors.onSurfaceVariant};
+	  font-weight: 500;
+	}
+	.${c} td {
+	  border-bottom: 1px solid ${z.colors.surfaceVariant}; 
+	}
+	${l}
+	${d}
+	${f}
+	`,h=n(e?.on??{});return t(`Table`,u`
+			<style>
+				${p}
+			</style>
+
+			<div
+				${m(e=>{e?h.bind(e):h.unbindAll()})}
+				class="${c}"
+			>
+				<table>
+					${a(o)}
+				</table>
+			</div>
+		`)}let $=function(e){return e.Top=`top`,e.Bottom=`bottom`,e.Left=`left`,e.Right=`right`,e}({});function be(e,t){let{content:r,placement:i=$.Top,delay:o={show:200,hide:100},offset:s=8,hideOnClick:l=!1,interactive:d=!1,maxWidth:f=`200px`,theme:p=`dark`,className:h=``,style:g=``,zIndex:_=1e3,on:v={},onShow:y,onHide:b}=e,x=n(v),S,C;function w(e){clearTimeout(C),S=window.setTimeout(()=>{E.style.visibility=`visible`,E.style.opacity=`1`,y?.()},o.show)}function T(){clearTimeout(S),C=window.setTimeout(()=>{E.style.visibility=`hidden`,E.style.opacity=`0`,b?.()},o.hide)}let E,D=e=>u`
 			<div
 				${m(e=>{e?(x.bind(e),E=e.querySelector(`.lyco-tooltip-content`),e.addEventListener(`mouseenter`,()=>w(e)),e.addEventListener(`mouseleave`,()=>T()),l&&e.addEventListener(`click`,()=>T())):x.unbindAll()})}
 				class="lyco-tooltip lyco-tooltip--${p} ${h}"
@@ -1197,7 +1170,34 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 					${r}
 				</div>
 			</div>
-		`;return c(t,D)}let Se=function(e){return e.Center=`center`,e.Left=`left`,e.Right=`right`,e.Top=`top`,e.Bottom=`bottom`,e.TopStart=`top-start`,e.TopEnd=`top-end`,e.BottomStart=`bottom-start`,e.BottomEnd=`bottom-end`,e.LeftStart=`left-start`,e.LeftEnd=`left-end`,e.RightStart=`right-start`,e.RightEnd=`right-end`,e}({});const Ce=typeof window>`u`,we=!Ce&&`HTMLDialogElement`in window,Te=e=>`
+		`;return c(t,D)}function xe(e,t){let r=e?.direction??`row`,i=n(e?.on??{});return t===void 0?t=>xe(e,t??u``):u`
+		<div
+			${m(e=>{e?i.bind(e):i.unbindAll()})}
+			style="
+      display: flex;
+      flex-direction: ${r};
+      flex-wrap: wrap;
+      ${e?.gap?`gap: ${e.gap};`:``}
+      ${e?.align?`align-items: ${e.align};`:``}
+      ${e?.justify?`justify-content: ${e.justify};`:``}
+    "
+		>
+			${o(t)}
+		</div>
+	`}function Se(e,t){let r=e?.width?`width: ${e.width};`:``,i=e?.height?`height: ${e.height};`:``,a=e?.background?`background: ${e.background};`:``,s=n(e?.on??{});if(t===void 0)return t=>Se(e,t??[u``]);let c=`flex-start`,l=`flex-start`;switch(e?.align){case`top-right`:c=`flex-end`,l=`flex-start`;break;case`center`:c=`center`,l=`center`;break;case`bottom-left`:c=`flex-start`,l=`flex-end`;break;case`bottom-right`:c=`flex-end`,l=`flex-end`;break;default:c=`flex-start`,l=`flex-start`}return u`
+		<div
+			${m(e=>{e?s.bind(e):s.unbindAll()})}
+			style="
+      position: relative;
+      display: flex;
+      justify-content: ${c};
+      align-items: ${l};
+      ${r} ${i} ${a}
+    "
+		>
+			${o(t)}
+		</div>
+	`}let Ce=function(e){return e.Center=`center`,e.Left=`left`,e.Right=`right`,e.Top=`top`,e.Bottom=`bottom`,e.TopStart=`top-start`,e.TopEnd=`top-end`,e.BottomStart=`bottom-start`,e.BottomEnd=`bottom-end`,e.LeftStart=`left-start`,e.LeftEnd=`left-end`,e.RightStart=`right-start`,e.RightEnd=`right-end`,e}({});const we=typeof window>`u`,Te=!we&&`HTMLDialogElement`in window,Ee=e=>`
   position: fixed;
   top: 0;
   left: 0;
@@ -1208,7 +1208,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
   justify-content: center;
   z-index: 1000;
   background: rgba(0,0,0,0.3);
-`;var Ee=class{constructor(e,t){this.isOpen=!1,this.returnValue=``,this.element=e,this.contentElement=t}show(){this.element.style.display=`flex`,this.isOpen=!0}showModal(){this.show()}close(){this.element.style.display=`none`,this.isOpen=!1,this.element.dispatchEvent(new Event(`close`))}get open(){return this.isOpen}getBoundingClientRect(){return this.contentElement.getBoundingClientRect()}get style(){return this.contentElement.style}};function De(e,a){let c=e?.open??!1,l=e?.onClose,d=e?.className??``,f=e?.style??``,p=n(e?.on?e?.on:{}),h=e?.movable??!1,g=e?.placement??Se.Center,_=e?.proxyRef??{value:null},v=null,y=!1,b={x:0,y:0},x=null,S=e?.mask??!0,C=r(`Dialog`),w=i(`Dialog::dialog`)+`-lyco-now-`+C;function T(e){return h?h===`self`?e:h&&`value`in h?h.value:null:null}function E(){if(typeof window>`u`)return``;let e=300,t=150,n=(window.innerWidth-e)/2,r=(window.innerHeight-t)/2;return`left: ${n}px; top: ${r}px;`}function D(){switch(g){case`left`:return`left: 32px; top: 50%;`;case`right`:return`right: 32px; top: 50%;`;case`top`:return`top: 32px; left: 50%;`;case`bottom`:return`bottom: 32px; left: 50%;`;case`top-start`:return`top: 32px; left: 32px;`;case`top-end`:return`top: 32px; right: 32px;`;case`bottom-start`:return`bottom: 32px; left: 32px;`;case`bottom-end`:return`bottom: 32px; right: 32px;`;case`left-start`:return`left: 32px; top: 32px;`;case`left-end`:return`left: 32px; bottom: 32px;`;case`right-start`:return`right: 32px; top: 32px;`;case`right-end`:return`right: 32px; bottom: 32px;`;default:return E()}}function O(){switch(g){case`top-start`:case`top-end`:case`bottom-start`:case`bottom-end`:case`left-start`:case`left-end`:case`right-start`:case`right-end`:return{txp:0,typ:0};case`left`:return{txp:0,typ:-50};case`right`:return{txp:0,typ:-50};case`top`:return{txp:-50,typ:0};case`bottom`:return{txp:-50,typ:0};default:return{txp:-50,typ:-50}}}function k(e,t){if(e.button!==0||(x=T(t),!x||!x.contains(e.target)))return;v=t,v.style.transform=`none`,e.preventDefault(),x.style.cursor=`grabbing`;let n=t.getBoundingClientRect(),{txp:r,typ:i}=O();b={x:e.clientX-(n.left+r/100*n.width),y:e.clientY-(n.top+i/100*n.height)},y=!0,document.addEventListener(`mousemove`,A),document.addEventListener(`mouseup`,j)}function A(e){if(!y||!x||!v)return;let t=v.getBoundingClientRect(),{txp:n,typ:r}=O(),i=e.clientX-b.x-n/100*t.width,a=e.clientY-b.y-r/100*t.height;v.style.left=`${i}px`,v.style.top=`${a}px`}function j(){y=!1,x=null,v=null,document.removeEventListener(`mousemove`,A),document.removeEventListener(`mouseup`,j)}function M(){let e=S?`rgba(0,0,0,0.5)`:`transparent`;return`
+`;var De=class{constructor(e,t){this.isOpen=!1,this.returnValue=``,this.element=e,this.contentElement=t}show(){this.element.style.display=`flex`,this.isOpen=!0}showModal(){this.show()}close(){this.element.style.display=`none`,this.isOpen=!1,this.element.dispatchEvent(new Event(`close`))}get open(){return this.isOpen}getBoundingClientRect(){return this.contentElement.getBoundingClientRect()}get style(){return this.contentElement.style}};function Oe(e,a){let c=e?.open??!1,l=e?.onClose,d=e?.className??``,f=e?.style??``,p=n(e?.on?e?.on:{}),h=e?.movable??!1,g=e?.placement??Ce.Center,_=e?.proxyRef??{value:null},v=null,y=!1,b={x:0,y:0},x=null,S=e?.mask??!0,C=r(`Dialog`),w=i(`Dialog::dialog`)+`-lyco-now-`+C;function T(e){return h?h===`self`?e:h&&`value`in h?h.value:null:null}function E(){if(typeof window>`u`)return``;let e=300,t=150,n=(window.innerWidth-e)/2,r=(window.innerHeight-t)/2;return`left: ${n}px; top: ${r}px;`}function D(){switch(g){case`left`:return`left: 32px; top: 50%;`;case`right`:return`right: 32px; top: 50%;`;case`top`:return`top: 32px; left: 50%;`;case`bottom`:return`bottom: 32px; left: 50%;`;case`top-start`:return`top: 32px; left: 32px;`;case`top-end`:return`top: 32px; right: 32px;`;case`bottom-start`:return`bottom: 32px; left: 32px;`;case`bottom-end`:return`bottom: 32px; right: 32px;`;case`left-start`:return`left: 32px; top: 32px;`;case`left-end`:return`left: 32px; bottom: 32px;`;case`right-start`:return`right: 32px; top: 32px;`;case`right-end`:return`right: 32px; bottom: 32px;`;default:return E()}}function O(){switch(g){case`top-start`:case`top-end`:case`bottom-start`:case`bottom-end`:case`left-start`:case`left-end`:case`right-start`:case`right-end`:return{txp:0,typ:0};case`left`:return{txp:0,typ:-50};case`right`:return{txp:0,typ:-50};case`top`:return{txp:-50,typ:0};case`bottom`:return{txp:-50,typ:0};default:return{txp:-50,typ:-50}}}function k(e,t){if(e.button!==0||(x=T(t),!x||!x.contains(e.target)))return;v=t,v.style.transform=`none`,e.preventDefault(),x.style.cursor=`grabbing`;let n=t.getBoundingClientRect(),{txp:r,typ:i}=O();b={x:e.clientX-(n.left+r/100*n.width),y:e.clientY-(n.top+i/100*n.height)},y=!0,document.addEventListener(`mousemove`,A),document.addEventListener(`mouseup`,j)}function A(e){if(!y||!x||!v)return;let t=v.getBoundingClientRect(),{txp:n,typ:r}=O(),i=e.clientX-b.x-n/100*t.width,a=e.clientY-b.y-r/100*t.height;v.style.left=`${i}px`,v.style.top=`${a}px`}function j(){y=!1,x=null,v=null,document.removeEventListener(`mousemove`,A),document.removeEventListener(`mouseup`,j)}function M(){let e=S?`rgba(0,0,0,0.5)`:`transparent`;return`
       ${w}::-webkit-backdrop,
       ${w}::backdrop {
         background: ${e};
@@ -1216,12 +1216,12 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
       }
     `}function N(e){let n=null,r=null;return t(`Dialog`,u`
 				<div
-					${m(e=>{if(e){if(n=e,r){let e=new Ee(n,r);_.value=e,p.bind(n),c?e.showModal():e.close()}}else p.unbindAll()})}
+					${m(e=>{if(e){if(n=e,r){let e=new De(n,r);_.value=e,p.bind(n),c?e.showModal():e.close()}}else p.unbindAll()})}
 					@click=${e=>{e.target===e.currentTarget&&l?.()}}
-					style=${Te(c)}
+					style=${Ee(c)}
 				>
 					<div
-						${m(e=>{if(e&&(r=e,n)){let e=new Ee(n,r);_.value=e}})}
+						${m(e=>{if(e&&(r=e,n)){let e=new De(n,r);_.value=e}})}
 						class="${w} ${d}"
 						style="
               padding: 0;
@@ -1237,7 +1237,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 						${o(e)}
 					</div>
 				</div>
-			`)}function P(e){return Ce||!we?N(e):t(`Dialog`,u`
+			`)}function P(e){return we||!Te?N(e):t(`Dialog`,u`
 				<dialog
 					${m(e=>{if(e){_.value=e;let t=e;p.bind(t),requestAnimationFrame(()=>{try{c?t.showModal():t.close()}catch(e){console.warn(`Dialog operation failed:`,e)}})}else p.unbindAll()})}
 					@close=${l}
@@ -1262,7 +1262,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 				<style>
 					${M()}
 				</style>
-			`)}return s(a,P)}function Oe(e,t){let r=e?.className??``,i=e?.style??``,a=n(e?.on??{}),c=e=>u`
+			`)}return s(a,P)}function ke(e,t){let r=e?.className??``,i=e?.style??``,a=n(e?.on??{}),c=e=>u`
 			<div
 				${m(e=>{e?a.bind(e):a.unbindAll()})}
 				class="lyco-dialog-actions ${r}"
@@ -1276,7 +1276,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 			>
 				${o(e)}
 			</div>
-		`;return s(t,c)}function ke(e,t){let r=e?.variant??`text`,i=e?.color??`default`,o=e?.className??``,s=e?.style??``,l=n({click:e?.onClick?t=>{var n;t.preventDefault(),(n=e.onClick)?.call(e,t)}:void 0,...e?.on}),d=e=>u`
+		`;return s(t,c)}function Ae(e,t){let r=e?.variant??`text`,i=e?.color??`default`,o=e?.className??``,s=e?.style??``,l=n({click:e?.onClick?t=>{var n;t.preventDefault(),(n=e.onClick)?.call(e,t)}:void 0,...e?.on}),d=e=>u`
 			<button
 				${m(e=>{e?l.bind(e):l.unbindAll()})}
 				class="lyco-dialog-button ${r} ${i} ${o}"
@@ -1294,7 +1294,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 			>
 				${a(e)}
 			</button>
-		`;return c(t,d)}function Ae(e,t){let r=e?.className??``,i=e?.style??``,a=n(e?.on??{}),c=e=>u`
+		`;return c(t,d)}function je(e,t){let r=e?.className??``,i=e?.style??``,a=n(e?.on??{}),c=e=>u`
 			<div
 				class="lyco-dialog-content ${r}"
 				style="
@@ -1308,7 +1308,7 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 			>
 				${o(e)}
 			</div>
-		`;return s(t,c)}function je(e,t){let r=e?.className??``,i=e?.style??``,o=n(e?.on??{}),s=e?.proxyRef??{value:null},l=e=>u`
+		`;return s(t,c)}function Me(e,t){let r=e?.className??``,i=e?.style??``,o=n(e?.on??{}),s=e?.proxyRef??{value:null},l=e=>u`
 			<div
 				${m(e=>{e?(s.value=e,o.bind(e)):o.unbindAll()})}
 				class="lyco-dialog-title ${r}"
@@ -1323,5 +1323,5 @@ import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentC
 			>
 				${a(e)}
 			</div>
-		`;return c(t,l)}function Me(e){return o(e)}export{Me as $Html,V as AbsoluteBox,te as AcrylicBar,H as AspectRatio,U as AutoFitGrid,W as AvatarStack,G as Badge,K as Canvas,q as Card,J as Center,E as Column,F as ColumnSplit,ve as Combobox,Y as Container,De as Dialog,Oe as DialogActions,ke as DialogButton,Ae as DialogContent,Se as DialogPlacement,je as DialogTitle,ne as Divider,D as Flex,O as FlowItem,X as FooterLayout,re as ForEach,k as Grid,Z as GridBreakpoint,A as GridCol,j as GridItem,M as GridRow,ie as HeroSection,Q as Hidden,_e as LazyForEach,T as LightboxContainer,oe as List,se as ListGroup,ae as ListItem,ce as Overlay,le as PositionContainer,ye as Progress,N as Row,I as RowSplit,L as ScrollBar,R as SideBarContainer,ue as SizedBox,de as SkeletonLoader,fe as Spacer,be as Spinner,pe as Sticky,ee as Swiper,B as SwitchInput,me as Table,w as Virtualizer,b as VirtualizerController,P as WaterFlow,xe as WithTooltip,he as Wrap,ge as ZStack};
+		`;return c(t,l)}function Ne(e){return o(e)}export{Ne as $Html,te as AbsoluteBox,V as AcrylicBar,H as AspectRatio,U as AutoFitGrid,W as AvatarStack,G as Badge,K as Canvas,ne as CanvasOnce,q as Card,J as Center,E as Column,F as ColumnSplit,re as Combobox,Y as Container,Oe as Dialog,ke as DialogActions,Ae as DialogButton,je as DialogContent,Ce as DialogPlacement,Me as DialogTitle,ie as Divider,D as Flex,O as FlowItem,X as FooterLayout,ae as ForEach,k as Grid,Z as GridBreakpoint,A as GridCol,j as GridItem,M as GridRow,oe as HeroSection,Q as Hidden,se as LazyForEach,T as LightboxContainer,le as List,ue as ListGroup,ce as ListItem,de as Overlay,fe as PositionContainer,pe as Progress,N as Row,I as RowSplit,L as ScrollBar,R as SideBarContainer,me as SizedBox,he as SkeletonLoader,ge as Spacer,_e as Spinner,ve as Sticky,ee as Swiper,B as SwitchInput,ye as Table,w as Virtualizer,b as VirtualizerController,P as WaterFlow,be as WithTooltip,xe as Wrap,Se as ZStack};
 //# sourceMappingURL=index.es.js.map