lyco 1.3.8 → 1.4.0

package/dist/index.cjs.js

@@ -228,7 +228,7 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 			<div style="flex: 0 0 ${a}; overflow: auto;">${c}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${l}</div>
 		</div>
-	`}function D(r={},i){if(i===void 0)return e=>D(r,e??[t.html``]);let a=e.getComponentCount(`Swiper`),{gap:o=`8px`,snapType:s=`mandatory`,height:c=`auto`,width:l=`100%`,className:u=e.getRandomClassName(`Swiper::swiper`)+`-lyco-now-${a}`,direction:d=`x`,scrollBehavior:f=`smooth`,align:p=`start`,showNavigation:m=!0,navigationPosition:h=`inside`,showPagination:g=!0,paginationType:_=`dots`,autoPlay:v=!1,interval:y=3e3,loop:b=!1,touchEnabled:x=!0,mouseWheel:S=!1,onSlideChange:C,on:w}=r,T=u,E=T+`-container`,O=T+`-slide`,k=T+`-navigation`,A=T+`-pagination`,j;j=i?typeof i==`function`?i():i:[];let M=j.length,[N,P]=(()=>{let e={value:0};return[()=>e.value,t=>{let n=Math.max(0,Math.min(t,M-1));e.value!==n&&(e.value=n,C?.(n))}]})(),F=e=>{let t=typeof document<`u`?document.querySelector(`.${E}`):null;if(!t)return;let n=t.querySelectorAll(`.${O}`);if(e<0||e>=n.length)return;let r=n[e],i=r.getBoundingClientRect(),a=t.getBoundingClientRect(),o;d===`x`?(o=r.offsetLeft-t.offsetLeft,p===`center`?o-=(a.width-i.width)/2:p===`end`&&(o-=a.width-i.width),t.scrollTo({left:o,behavior:f})):(o=r.offsetTop-t.offsetTop,p===`center`?o-=(a.height-i.height)/2:p===`end`&&(o-=a.height-i.height),t.scrollTo({top:o,behavior:f})),P(e)},I=()=>{let e=N()+1>=M?b?0:N():N()+1;F(e)},L=()=>{let e=N()-1<0?b?M-1:N():N()-1;F(e)},R=()=>{let e=typeof document<`u`?document.querySelector(`.${E}`):null;if(!e)return;let t=e.querySelectorAll(`.${O}`),n=0,r=1/0;t.forEach((t,i)=>{let a=t.getBoundingClientRect(),o=e.getBoundingClientRect(),s;if(d===`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)}),P(n)},z=e=>{if(!x)return;let t=e.touches[0],n=e.currentTarget;n.dataset.touchStartX=t.clientX.toString(),n.dataset.touchStartY=t.clientY.toString()},B=e=>{if(!x)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)||d===`x`)&&e.preventDefault()},V=e=>{if(!x)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&&(d===`x`?a>0?L():I():o>0?L():I()),delete t.dataset.touchStartX,delete t.dataset.touchStartY},H=e=>{S&&(e.preventDefault(),e.deltaY>0?I():L())},U=e=>{if(!v||!e)return;let t,n=()=>{t=setInterval(I,y)},r=()=>{clearInterval(t)};return e.addEventListener(`mouseenter`,r),e.addEventListener(`mouseleave`,n),n(),()=>{clearInterval(t),e.removeEventListener(`mouseenter`,r),e.removeEventListener(`mouseleave`,n)}},W=()=>{let e=typeof document<`u`?document.querySelector(`.${E}`):null;if(!e)return;let t=[];e.addEventListener(`scroll`,R),t.push(()=>e.removeEventListener(`scroll`,R)),x&&(e.addEventListener(`touchstart`,z),e.addEventListener(`touchmove`,B,{passive:!1}),e.addEventListener(`touchend`,V),t.push(()=>e.removeEventListener(`touchstart`,z)),t.push(()=>e.removeEventListener(`touchmove`,B)),t.push(()=>e.removeEventListener(`touchend`,V))),S&&(e.addEventListener(`wheel`,H,{passive:!1}),t.push(()=>e.removeEventListener(`wheel`,H)));let n=U(e);return n&&t.push(n),F(0),()=>t.forEach(e=>e())};typeof window<`u`&&typeof document<`u`&&setTimeout(W,0);let G=t.html`
+	`}function D(r={},i){if(i===void 0)return e=>D(r,e??[t.html``]);let a=e.getComponentCount(`Swiper`),{gap:o=`8px`,snapType:s=`mandatory`,height:c=`auto`,width:l=`100%`,className:u=e.getRandomClassName(`Swiper::swiper`)+`-lyco-now-${a}`,direction:d=`x`,scrollBehavior:f=`smooth`,align:p=`start`,showNavigation:m=!0,navigationPosition:h=`inside`,showPagination:g=!0,paginationType:_=`dots`,autoPlay:v=!1,interval:y=3e3,loop:b=!1,touchEnabled:x=!0,mouseWheel:S=!1,onSlideChange:C,on:w}=r,T=u,E=T+`-container`,O=T+`-slide`,k=T+`-navigation`,A=T+`-pagination`,j;j=i?typeof i==`function`?i():i:[];let M=j.length,[N,P]=(()=>{let e={value:0};return[()=>e.value,t=>{let n=Math.max(0,Math.min(t,M-1));e.value!==n&&(e.value=n,C?.(n))}]})(),F=e=>{let t=typeof document<`u`?document.querySelector(`.${E}`):null;if(!t)return;let n=t.querySelectorAll(`.${O}`);if(e<0||e>=n.length)return;let r=n[e],i=r.getBoundingClientRect(),a=t.getBoundingClientRect(),o;d===`x`?(o=r.offsetLeft-t.offsetLeft,p===`center`?o-=(a.width-i.width)/2:p===`end`&&(o-=a.width-i.width),t.scrollTo({left:o,behavior:f})):(o=r.offsetTop-t.offsetTop,p===`center`?o-=(a.height-i.height)/2:p===`end`&&(o-=a.height-i.height),t.scrollTo({top:o,behavior:f})),P(e)},I=()=>{let e=N()+1>=M?b?0:N():N()+1;F(e)},L=()=>{let e=N()-1<0?b?M-1:N():N()-1;F(e)},R=()=>{let e=typeof document<`u`?document.querySelector(`.${E}`):null;if(!e)return;let t=e.querySelectorAll(`.${O}`),n=0,r=1/0;t.forEach((t,i)=>{let a=t.getBoundingClientRect(),o=e.getBoundingClientRect(),s;if(d===`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)}),P(n)},z=e=>{if(!x)return;let t=e.touches[0],n=e.currentTarget;n.dataset.touchStartX=t.clientX.toString(),n.dataset.touchStartY=t.clientY.toString()},B=e=>{if(!x)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)||d===`x`)&&e.preventDefault()},V=e=>{if(!x)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&&(d===`x`?a>0?L():I():o>0?L():I()),delete t.dataset.touchStartX,delete t.dataset.touchStartY},H=e=>{S&&(e.preventDefault(),e.deltaY>0?I():L())},ee=e=>{if(!v||!e)return;let t,n=()=>{t=setInterval(I,y)},r=()=>{clearInterval(t)};return e.addEventListener(`mouseenter`,r),e.addEventListener(`mouseleave`,n),n(),()=>{clearInterval(t),e.removeEventListener(`mouseenter`,r),e.removeEventListener(`mouseleave`,n)}},U=()=>{let e=typeof document<`u`?document.querySelector(`.${E}`):null;if(!e)return;let t=[];e.addEventListener(`scroll`,R),t.push(()=>e.removeEventListener(`scroll`,R)),x&&(e.addEventListener(`touchstart`,z),e.addEventListener(`touchmove`,B,{passive:!1}),e.addEventListener(`touchend`,V),t.push(()=>e.removeEventListener(`touchstart`,z)),t.push(()=>e.removeEventListener(`touchmove`,B)),t.push(()=>e.removeEventListener(`touchend`,V))),S&&(e.addEventListener(`wheel`,H,{passive:!1}),t.push(()=>e.removeEventListener(`wheel`,H)));let n=ee(e);return n&&t.push(n),F(0),()=>t.forEach(e=>e())};typeof window<`u`&&typeof document<`u`&&setTimeout(U,0);let W=t.html`
 		<div class="${A}">
 			${Array.from({length:M},(e,n)=>t.html`
 					<button
@@ -237,13 +237,13 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 					></button>
 				`)}
 		</div>
-	`,K=t.html`
+	`,G=t.html`
 		<div class="${A} fraction">
 			<span class="current">${N()+1}</span>
 			<span class="separator">/</span>
 			<span class="total">${M}</span>
 		</div>
-	`,ee=t.html`
+	`,K=t.html`
 		<div class="${A} progressbar">
 			<div
 				class="progress"
@@ -255,7 +255,7 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 			<button class="prev" @click=${L}>◀</button>
 			<button class="next" @click=${I}>▶</button>
 		</div>
-	`,J=`
+	`,te=`
 	.${T} {
 		position: relative;
 		overflow: hidden;
@@ -360,13 +360,13 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 		background-color: white;
 		transition: width 0.3s;
 	}
-	`,Y=e.createEventBinder(w??{});return e.LycoComponent(`Swiper`,t.html`
+	`,J=e.createEventBinder(w??{});return e.LycoComponent(`Swiper`,t.html`
 			<style>
-				${J}
+				${te}
 			</style>
 
 			<div
-				${(0,n.ref)(e=>{e?Y.bind(e):Y.unbindAll()})}
+				${(0,n.ref)(e=>{e?J.bind(e):J.unbindAll()})}
 				class="${T}"
 			>
 				<div class="${E}">
@@ -378,9 +378,9 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 				</div>
 
 				${m?q:null}
-				${g&&_===`dots`?G:null}
-				${g&&_===`fraction`?K:null}
-				${g&&_===`progressbar`?ee:null}
+				${g&&_===`dots`?W:null}
+				${g&&_===`fraction`?G:null}
+				${g&&_===`progressbar`?K:null}
 			</div>
 		`)}const O={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 k(r){let{checked:i=!1,disabled:a=!1,size:o=`medium`,color:s=O.colors.primary,onChange:c,className:l=``,on:u={}}=r??{},d=e.getComponentCount(`SwitchInput`),f=e.getRandomClassName(`SwitchInput::switch`)+`-lyco-now-${d}`,p={small:{width:32,height:16,thumbSize:12},medium:{width:44,height:24,thumbSize:18},large:{width:56,height:32,thumbSize:24}},{width:m,height:h,thumbSize:g}=p[o],_=`
     .${f} {
@@ -613,7 +613,97 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 		>
 			${e.renderFn(i)}
 		</div>
-	`}function z(r,i){if(i===void 0)return e=>z(r,e??[t.html``]);let a=r?.maxWidth??`1024px`,o=r?.padding??`0 16px`,s=r?.background?`background: ${r.background};`:``,c=r?.fullHeight?`height: 100%;`:``,l=e.createEventBinder(r?.on??{});return t.html`
+	`}function z(r){let{value:i=``,options:a=[],placeholder:o=``,disabled:s=!1,error:c=!1,className:l=``,style:u=``,maxHeight:d=`300px`,onChange:f,onInput:p,onFocus:m,onBlur:h,on:g={},optionRender:_}=r??{},v=e.getComponentCount(`Combobox`),y=e.getRandomClassName(`Combobox::combobox`)+`-lyco-now-${v}`,b=!1,x=null,S=`
+    .${y} {
+      position: relative;
+      width: 100%;
+    }
+
+    .${y} input {
+      width: 100%;
+      padding: 12px 16px;
+      font-size: 16px;
+      border: 1px solid ${c?O.colors.error:O.colors.surfaceVariant};
+      border-radius: ${O.borderRadius.small};
+      color: ${O.colors.onSurface};
+      transition: all ${O.animation.standard};
+      outline: none;
+      box-sizing: border-box;
+    }
+
+    .${y} input:focus {
+      border-color: ${O.colors.primary};
+      box-shadow: 0 0 0 2px ${O.colors.primaryContainer};
+    }
+
+    .${y} input:disabled {
+      background: ${O.colors.surfaceVariant};
+      color: ${O.colors.onSurfaceVariant};
+      cursor: not-allowed;
+    }
+
+    .${y} .options {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      max-height: ${d};
+      overflow-y: auto;
+      border: 1px solid ${O.colors.surfaceVariant};
+      border-radius: ${O.borderRadius.small};
+      box-shadow: ${O.elevation.level2};
+      z-index: 1000;
+      display: none;
+    }
+
+    .${y} .options.open {
+      display: block;
+    }
+
+    .${y} .option {
+      padding: 12px 16px;
+      cursor: pointer;
+      transition: background ${O.animation.standard};
+    }
+
+    .${y} .option:hover {
+      background: ${O.colors.primaryContainer};
+    }
+
+    .${y} .option.selected {
+      background: ${O.colors.primaryContainer};
+      color: ${O.colors.onPrimaryContainer};
+    }
+  `,C=e.createEventBinder(g),w=null,T=()=>{b?w?.classList.remove(`open`):w?.classList.add(`open`),b=!b},E=(e,t)=>{if(x){x.value=e.value;let n=t.currentTarget;Array.from(w?.querySelectorAll(`.selected`)??[]).forEach(e=>e.classList.remove(`selected`)),!n.classList.contains(`selected`)&&n.classList.add(`selected`),f?.(e.value)}T()},D=e=>{let t=e.target;t.closest(`.${y}`)||(b=!1,w?.classList.remove(`open`))};return typeof window<`u`&&document.addEventListener(`click`,D),e.LycoComponent(`Combobox`,t.html`
+			<style>
+				${S}
+			</style>
+			<div class="${y} ${l}" style="${u}">
+				<input
+					${(0,n.ref)(e=>{e?(x=e,C.bind(e)):C.unbindAll()})}
+					type="text"
+					.value=${i}
+					placeholder=${o}
+					?disabled=${s}
+					@focus=${()=>{m?.(),T()}}
+					@input=${e=>{let t=e.target;p?.(t.value)}}
+					@change=${e=>{let t=e.target;f?.(t.value)}}
+				/>
+				<div
+					${(0,n.ref)(e=>{e&&(w=e)})}
+					class="options"
+				>
+					${a.map(e=>t.html`
+							<div
+								class="option ${e.value===(x?.value??i)?`selected`:``}"
+								@click=${t=>E(e,t)}
+							>
+								${_?_(e):e.label}
+							</div>
+						`)}
+				</div>
+			</div>
+		`)}function B(r,i){if(i===void 0)return e=>B(r,e??[t.html``]);let a=r?.maxWidth??`1024px`,o=r?.padding??`0 16px`,s=r?.background?`background: ${r.background};`:``,c=r?.fullHeight?`height: 100%;`:``,l=e.createEventBinder(r?.on??{});return t.html`
 		<div
 			${(0,n.ref)(e=>{e?l.bind(e):l.unbindAll()})}
 			style="
@@ -629,10 +719,10 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 		>
 			${e.renderFnOrArray(i)}
 		</div>
-	`}function B(r){let i=r?.orientation??`horizontal`,a=r?.thickness??`1px`,o=r?.color??`#e0e0e0`,s=r?.margin??(i===`horizontal`?`8px 0`:`0 8px`),c=e.createEventBinder(r?.on??{}),l=i===`horizontal`?`width: 100%; height: ${a}; background: ${o}; margin: ${s};`:`width: ${a}; height: 100%; background: ${o}; margin: ${s};`;return t.html`<div
+	`}function V(r){let i=r?.orientation??`horizontal`,a=r?.thickness??`1px`,o=r?.color??`#e0e0e0`,s=r?.margin??(i===`horizontal`?`8px 0`:`0 8px`),c=e.createEventBinder(r?.on??{}),l=i===`horizontal`?`width: 100%; height: ${a}; background: ${o}; margin: ${s};`:`width: ${a}; height: 100%; background: ${o}; margin: ${s};`;return t.html`<div
 		${(0,n.ref)(e=>{e?c.bind(e):c.unbindAll()})}
 		style="${l}"
-	></div>`}function V(r,i){if(i===void 0){let e=e=>V(r,e??t.html``);return e.html=(e,...n)=>V(r,(0,t.html)(e,...n)),e}let a=r?.columns??4,o=r?.gap??`24px`,s=r?.background??`#f8f8f8`,c=r?.padding??`40px 16px`,l=e.createEventBinder(r?.on??{});return t.html`
+	></div>`}function H(r,i){if(i===void 0){let e=e=>H(r,e??t.html``);return e.html=(e,...n)=>H(r,(0,t.html)(e,...n)),e}let a=r?.columns??4,o=r?.gap??`24px`,s=r?.background??`#f8f8f8`,c=r?.padding??`40px 16px`,l=e.createEventBinder(r?.on??{});return t.html`
 		<div
 			${(0,n.ref)(e=>{e?l.bind(e):l.unbindAll()})}
 			style="
@@ -655,7 +745,7 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 				© ${new Date().getFullYear()} Your Company. All rights reserved.
 			</div>
 		</div>
-	`}function H(e,t){return t?e.map((e,n)=>t(e,n)):t=>e.map((e,n)=>t(e,n))}function U(r,i){if(i===void 0){let e=e=>U(r,e??t.html``);return e.html=(e,...n)=>U(r,(0,t.html)(e,...n)),e}let a=r.defaultColumns??1,o=r.gap??`16px`,s=e.getComponentCount(`GridBreakpoint`),c=r.className??e.getRandomClassName(`GridBreakpoint::grid-breakpoint`)+`-lyco-now-`+s,l=Object.entries(r.breakpoints).map(([e,t])=>`@media`+e+`{
+	`}function ee(e,t){return t?e.map((e,n)=>t(e,n)):t=>e.map((e,n)=>t(e,n))}function U(r,i){if(i===void 0){let e=e=>U(r,e??t.html``);return e.html=(e,...n)=>U(r,(0,t.html)(e,...n)),e}let a=r.defaultColumns??1,o=r.gap??`16px`,s=e.getComponentCount(`GridBreakpoint`),c=r.className??e.getRandomClassName(`GridBreakpoint::grid-breakpoint`)+`-lyco-now-`+s,l=Object.entries(r.breakpoints).map(([e,t])=>`@media`+e+`{
 `+c+`{ grid-template-columns: repeat(`+t+`, 1fr); }
 }`).join(`
 `),u=`
@@ -727,7 +817,19 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 			>
 				${e.renderFn(i)}
 			</div>
-		`)}function K(n){return t.html` <li>${e.renderFnOrArray(n)}</li> `}function ee(n,r){let i=n?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,a=n?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,o=n?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,s=e.getComponentCount(`List`),c=n?.className??e.getRandomClassName(`List::list`)+`-lyco-now-${s}`,l=`
+		`)}function K(r,i,a=.1,o={}){let s=Array(r.length).fill(!1),c=`${a*100}vh`,l=`100vw`,u=r.map((r,a)=>t.html`
+			<div
+				${(0,n.ref)(n=>{if(n&&!s[a]){let c=new IntersectionObserver((n,c)=>{n.forEach(n=>{if(n.isIntersecting&&!s[a]){let l=n.target;s[a]=!0,(0,t.render)(i(r,a),l),e.AnimationAPI.applyAnimation(l,o);let u=l.querySelector(`[data-fallback]`);u&&u.remove(),c.unobserve(l)}})},{root:null,rootMargin:`0px`});c.observe(n)}})}
+				data-index="${a}"
+				style="transition: transform ${o.duration||`1s`} ease;"
+			>
+				<!-- 占位元素 -->
+				<div
+					data-fallback
+					style="height: ${c}; width: ${l};"
+				></div>
+			</div>
+		`);return u}function q(n){return t.html` <li>${e.renderFnOrArray(n)}</li> `}function te(n,r){let i=n?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,a=n?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,o=n?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,s=e.getComponentCount(`List`),c=n?.className??e.getRandomClassName(`List::list`)+`-lyco-now-${s}`,l=`
     ul.${c} {
 	    list-style: none;
 	    margin: 0;
@@ -750,7 +852,7 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 				<ul class="${c}">
 					${e.renderFnOrArray(n)}
 				</ul>
-			`);return r===void 0?u:u(r)}function q(r,i){let a=r?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,o=r?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,s=r?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,c=e.getComponentCount(`ListGroup`),l=r?.className??e.getRandomClassName(`ListGroup::list-group`)+`-lyco-now-`+c,u=(e,n,r,i)=>r?t.html` <li>${e}</li> `:e,d=`
+			`);return r===void 0?u:u(r)}function J(r,i){let a=r?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,o=r?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,s=r?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,c=e.getComponentCount(`ListGroup`),l=r?.className??e.getRandomClassName(`ListGroup::list-group`)+`-lyco-now-`+c,u=(e,n,r,i)=>r?t.html` <li>${e}</li> `:e,d=`
 	ul.${l} {
 	  list-style: none;
 	  margin: 0;
@@ -776,7 +878,7 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 				>
 					${e.renderFnOrArray(r,u)}
 				</ul>
-			`);return e.renderFnOrArrayOrCurry(i,p)}function J(r,i){if(i===void 0)return e=>J(r,e??[t.html``]);let a=r?.background??`rgba(0, 0, 0, 0.5)`,o=r?.zIndex??1e3,s=r?.fullScreen!==!1,c=e.createEventBinder(r?.on??{});return t.html`
+			`);return e.renderFnOrArrayOrCurry(i,p)}function ne(r,i){if(i===void 0)return e=>ne(r,e??[t.html``]);let a=r?.background??`rgba(0, 0, 0, 0.5)`,o=r?.zIndex??1e3,s=r?.fullScreen!==!1,c=e.createEventBinder(r?.on??{});return t.html`
 		<div
 			${(0,n.ref)(e=>{e?c.bind(e):c.unbindAll()})}
 			style="
@@ -802,221 +904,7 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 		>
 			${e.renderFn(i)}
 		</div>
-	`}function te(r){let i=r?.width?`width: ${r.width};`:``,a=r?.height?`height: ${r.height};`:``,o=e.createEventBinder(r?.on??{});return t.html`<div
-		${(0,n.ref)(e=>{e?o.bind(e):o.unbindAll()})}
-		style="${i} ${a}"
-	></div>`}function ne(r){let{type:i=`rect`,width:a=`100%`,height:o=`16px`,borderRadius:s=`4px`,animation:c=!0,animationType:l=`shimmer`,bgColor:u=`#eee`,highlightColor:d=`#ddd`,count:f=1,spacing:p=`8px`,direction:m=`vertical`,delay:h=0,autoHide:g=!1,duration:_=2e3,on:v={}}=r??{},y=e.getComponentCount(`SkeletonLoader`),b=e.getRandomClassName(`SkeletonLoader::skeleton`)+`-lyco-now-`+y,x=e.createEventBinder(v),S=i===`circle`?`border-radius:50%;width:${a};height:${a}`:`border-radius:${s};width:${a};height:${o}`,C=``,w=``;c&&(l===`shimmer`?(C=`@keyframes ${b}-shimmer { 0% { background-color: ${u}; } 50% { background-color: ${d}; } 100% { background-color: ${u}; } }`,w=`animation:${b}-shimmer 1.2s infinite ease-in-out;`):(C=`@keyframes ${b}-pulse { 0% { opacity:1; } 50% { opacity:0.4; } 100% { opacity:1; } }`,w=`animation:${b}-pulse 1.2s infinite ease-in-out;`));let T=m===`horizontal`?`display:flex;flex-direction:row;gap:${p}`:`display:flex;flex-direction:column;gap:${p}`,E=[];for(let e=0;e<f;e++)E.push(t.html`
-			<div
-				class="${b}"
-				style="${S};background-color:${u};${w};opacity:0;transition:opacity 0.3s"
-				${(0,n.ref)(e=>{e&&x.bind(e)})}
-			></div>
-		`);function D(e){let t=Array.from(e.querySelectorAll(`.${b}`));setTimeout(()=>{t.forEach(e=>e.style.opacity=`1`),g&&setTimeout(()=>{t.forEach(e=>e.style.opacity=`0`)},_)},h)}return e.LycoComponent(`SkeletonLoader`,t.html`
-			<style>
-				${C}
-			</style>
-			<div
-				style="${T}"
-				${(0,n.ref)(e=>e&&D(e))}
-			>
-				${E}
-			</div>
-		`)}function re(r){let i=e.createEventBinder(r?.on??{});return t.html`<div
-		${(0,n.ref)(e=>{e?i.bind(e):i.unbindAll()})}
-		style="flex: 1 1 auto;"
-	></div>`}function X(r,i){if(i===void 0){let e=e=>X(r,e??t.html``);return e.html=(e,...n)=>X(r,(0,t.html)(e,...n)),e}let a=r?.top?`top: ${r.top};`:``,o=r?.bottom?`bottom: ${r.bottom};`:``,s=typeof r?.zIndex==`number`?`z-index: ${r.zIndex};`:``,c=e.createEventBinder(r?.on??{});return t.html`
-		<div
-			${(0,n.ref)(e=>{e?c.bind(e):c.unbindAll()})}
-			style="
-      position: sticky;
-      ${a} ${o}
-      ${s}
-    "
-		>
-			${e.renderFn(i)}
-		</div>
-	`}function Z(r,i){if(i===void 0){let e=e=>Z(r,e??t.html``);return e.html=(e,...n)=>Z(r,(0,t.html)(e,...n)),e}let a=e.getComponentCount(`Table`),o=r?.className??e.getRandomClassName(`Table::table`)+`-lyco-now-${a}`,s=r?.striped?`
-      .${o} tr:nth-child(even) { 
-        background: ${O.colors.surface};
-      }
-    `:``,c=r?.hover?`
-      .${o} tr:hover { 
-        background: ${O.colors.primaryContainer};
-        cursor: pointer;
-      }
-    `:``,l=r?.bordered?`
-      .${o}, .${o} th, .${o} td { 
-        border: 1px solid ${O.colors.surfaceVariant}; 
-      }
-    `:``,u=`
-	.${o} table {
-	  width: 100%;
-	  border-collapse: separate;
-	  border-spacing: 0;
-	  border-radius: ${O.borderRadius.medium};
-	  overflow: hidden;
-	  box-shadow: ${O.elevation.level1};
-	}
-	.${o} th,
-	.${o} td {
-	  padding: 16px;
-	  text-align: left;
-	  transition: background ${O.animation.standard};
-	}
-	.${o} th {
-	  background: ${O.colors.surfaceVariant};
-	  color: ${O.colors.onSurfaceVariant};
-	  font-weight: 500;
-	}
-	.${o} td {
-	  border-bottom: 1px solid ${O.colors.surfaceVariant}; 
-	}
-	${s}
-	${c}
-	${l}
-	`,d=e.createEventBinder(r?.on??{});return e.LycoComponent(`Table`,t.html`
-			<style>
-				${u}
-			</style>
-
-			<div
-				${(0,n.ref)(e=>{e?d.bind(e):d.unbindAll()})}
-				class="${o}"
-			>
-				<table>
-					${e.renderFn(i)}
-				</table>
-			</div>
-		`)}function ie(r,i){let a=r?.direction??`row`,o=e.createEventBinder(r?.on??{});return i===void 0?e=>ie(r,e??t.html``):t.html`
-		<div
-			${(0,n.ref)(e=>{e?o.bind(e):o.unbindAll()})}
-			style="
-      display: flex;
-      flex-direction: ${a};
-      flex-wrap: wrap;
-      ${r?.gap?`gap: ${r.gap};`:``}
-      ${r?.align?`align-items: ${r.align};`:``}
-      ${r?.justify?`justify-content: ${r.justify};`:``}
-    "
-		>
-			${e.renderFnOrArray(i)}
-		</div>
-	`}function Q(r,i){let a=r?.width?`width: ${r.width};`:``,o=r?.height?`height: ${r.height};`:``,s=r?.background?`background: ${r.background};`:``,c=e.createEventBinder(r?.on??{});if(i===void 0)return e=>Q(r,e??[t.html``]);let l=`flex-start`,u=`flex-start`;switch(r?.align){case`top-right`:l=`flex-end`,u=`flex-start`;break;case`center`:l=`center`,u=`center`;break;case`bottom-left`:l=`flex-start`,u=`flex-end`;break;case`bottom-right`:l=`flex-end`,u=`flex-end`;break;default:l=`flex-start`,u=`flex-start`}return t.html`
-		<div
-			${(0,n.ref)(e=>{e?c.bind(e):c.unbindAll()})}
-			style="
-      position: relative;
-      display: flex;
-      justify-content: ${l};
-      align-items: ${u};
-      ${a} ${o} ${s}
-    "
-		>
-			${e.renderFnOrArray(i)}
-		</div>
-	`}function ae(r,i,a=.1,o={}){let s=Array(r.length).fill(!1),c=`${a*100}vh`,l=`100vw`,u=r.map((r,a)=>t.html`
-			<div
-				${(0,n.ref)(n=>{if(n&&!s[a]){let c=new IntersectionObserver((n,c)=>{n.forEach(n=>{if(n.isIntersecting&&!s[a]){let l=n.target;s[a]=!0,(0,t.render)(i(r,a),l),e.AnimationAPI.applyAnimation(l,o);let u=l.querySelector(`[data-fallback]`);u&&u.remove(),c.unobserve(l)}})},{root:null,rootMargin:`0px`});c.observe(n)}})}
-				data-index="${a}"
-				style="transition: transform ${o.duration||`1s`} ease;"
-			>
-				<!-- 占位元素 -->
-				<div
-					data-fallback
-					style="height: ${c}; width: ${l};"
-				></div>
-			</div>
-		`);return u}function oe(r){let{value:i=``,options:a=[],placeholder:o=``,disabled:s=!1,error:c=!1,className:l=``,style:u=``,maxHeight:d=`300px`,onChange:f,onInput:p,onFocus:m,onBlur:h,on:g={},optionRender:_}=r??{},v=e.getComponentCount(`Combobox`),y=e.getRandomClassName(`Combobox::combobox`)+`-lyco-now-${v}`,b=!1,x=null,S=`
-    .${y} {
-      position: relative;
-      width: 100%;
-    }
-
-    .${y} input {
-      width: 100%;
-      padding: 12px 16px;
-      font-size: 16px;
-      border: 1px solid ${c?O.colors.error:O.colors.surfaceVariant};
-      border-radius: ${O.borderRadius.small};
-      color: ${O.colors.onSurface};
-      transition: all ${O.animation.standard};
-      outline: none;
-      box-sizing: border-box;
-    }
-
-    .${y} input:focus {
-      border-color: ${O.colors.primary};
-      box-shadow: 0 0 0 2px ${O.colors.primaryContainer};
-    }
-
-    .${y} input:disabled {
-      background: ${O.colors.surfaceVariant};
-      color: ${O.colors.onSurfaceVariant};
-      cursor: not-allowed;
-    }
-
-    .${y} .options {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      right: 0;
-      max-height: ${d};
-      overflow-y: auto;
-      border: 1px solid ${O.colors.surfaceVariant};
-      border-radius: ${O.borderRadius.small};
-      box-shadow: ${O.elevation.level2};
-      z-index: 1000;
-      display: none;
-    }
-
-    .${y} .options.open {
-      display: block;
-    }
-
-    .${y} .option {
-      padding: 12px 16px;
-      cursor: pointer;
-      transition: background ${O.animation.standard};
-    }
-
-    .${y} .option:hover {
-      background: ${O.colors.primaryContainer};
-    }
-
-    .${y} .option.selected {
-      background: ${O.colors.primaryContainer};
-      color: ${O.colors.onPrimaryContainer};
-    }
-  `,C=e.createEventBinder(g),w=null,T=()=>{b?w?.classList.remove(`open`):w?.classList.add(`open`),b=!b},E=(e,t)=>{if(x){x.value=e.value;let n=t.currentTarget;Array.from(w?.querySelectorAll(`.selected`)??[]).forEach(e=>e.classList.remove(`selected`)),!n.classList.contains(`selected`)&&n.classList.add(`selected`),f?.(e.value)}T()},D=e=>{let t=e.target;t.closest(`.${y}`)||(b=!1,w?.classList.remove(`open`))};return typeof window<`u`&&document.addEventListener(`click`,D),e.LycoComponent(`Combobox`,t.html`
-			<style>
-				${S}
-			</style>
-			<div class="${y} ${l}" style="${u}">
-				<input
-					${(0,n.ref)(e=>{e?(x=e,C.bind(e)):C.unbindAll()})}
-					type="text"
-					.value=${i}
-					placeholder=${o}
-					?disabled=${s}
-					@focus=${()=>{m?.(),T()}}
-					@input=${e=>{let t=e.target;p?.(t.value)}}
-					@change=${e=>{let t=e.target;f?.(t.value)}}
-				/>
-				<div
-					${(0,n.ref)(e=>{e&&(w=e)})}
-					class="options"
-				>
-					${a.map(e=>t.html`
-							<div
-								class="option ${e.value===(x?.value??i)?`selected`:``}"
-								@click=${t=>E(e,t)}
-							>
-								${_?_(e):e.label}
-							</div>
-						`)}
-				</div>
-			</div>
-		`)}function se(r){let i=Math.min(100,Math.max(0,r?.value??0)),a=Math.min(100,Math.max(0,r?.bufferValue??0)),o=r?.color??`#1976d2`,s=r?.secondaryColor??`#90caf9`,c=r?.backgroundColor??`#e0e0e0`,l=r?.height??`4px`,u=r?.radius??`4px`,d=r?.showLabel??!1,f=r?.labelPosition??`inside`,p=r?.labelColor??(i>50?`white`:o),m=r?.labelFontSize??`12px`,h=r?.striped??!1,g=r?.animated??!1,_=r?.paused??!1,v=r?.transitionDuration??`0.3s`,y=r?.className??``,b=r?.style??``,x=e.createEventBinder(r?.on??{}),S=h?`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 re(r){let i=Math.min(100,Math.max(0,r?.value??0)),a=Math.min(100,Math.max(0,r?.bufferValue??0)),o=r?.color??`#1976d2`,s=r?.secondaryColor??`#90caf9`,c=r?.backgroundColor??`#e0e0e0`,l=r?.height??`4px`,u=r?.radius??`4px`,d=r?.showLabel??!1,f=r?.labelPosition??`inside`,p=r?.labelColor??(i>50?`white`:o),m=r?.labelFontSize??`12px`,h=r?.striped??!1,g=r?.animated??!1,_=r?.paused??!1,v=r?.transitionDuration??`0.3s`,y=r?.className??``,b=r?.style??``,x=e.createEventBinder(r?.on??{}),S=h?`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: ${_?`paused`:`running`};`:``;return t.html`
@@ -1092,7 +980,29 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 				  `:``}
 			${r?.suffixIcon}
 		</div>
-	`}function ce(r){let{size:i=`24px`,color:a=O.colors.primary,thickness:o=`2px`,speed:s=`1.2s`,className:c=``,opacity:l=1,startAngle:u=0,easing:d=`linear`,reverse:f=!1,style:p=``,on:m={},children:h,svgMode:g=!1,strokeLinecap:_=`butt`,strokeDasharray:v=``}=r??{},y=e.createEventBinder(m),b=e.getComponentCount(`Spinner`),x=t.html`
+	`}function ie(r){let i=r?.width?`width: ${r.width};`:``,a=r?.height?`height: ${r.height};`:``,o=e.createEventBinder(r?.on??{});return t.html`<div
+		${(0,n.ref)(e=>{e?o.bind(e):o.unbindAll()})}
+		style="${i} ${a}"
+	></div>`}function ae(r){let{type:i=`rect`,width:a=`100%`,height:o=`16px`,borderRadius:s=`4px`,animation:c=!0,animationType:l=`shimmer`,bgColor:u=`#eee`,highlightColor:d=`#ddd`,count:f=1,spacing:p=`8px`,direction:m=`vertical`,delay:h=0,autoHide:g=!1,duration:_=2e3,on:v={}}=r??{},y=e.getComponentCount(`SkeletonLoader`),b=e.getRandomClassName(`SkeletonLoader::skeleton`)+`-lyco-now-`+y,x=e.createEventBinder(v),S=i===`circle`?`border-radius:50%;width:${a};height:${a}`:`border-radius:${s};width:${a};height:${o}`,C=``,w=``;c&&(l===`shimmer`?(C=`@keyframes ${b}-shimmer { 0% { background-color: ${u}; } 50% { background-color: ${d}; } 100% { background-color: ${u}; } }`,w=`animation:${b}-shimmer 1.2s infinite ease-in-out;`):(C=`@keyframes ${b}-pulse { 0% { opacity:1; } 50% { opacity:0.4; } 100% { opacity:1; } }`,w=`animation:${b}-pulse 1.2s infinite ease-in-out;`));let T=m===`horizontal`?`display:flex;flex-direction:row;gap:${p}`:`display:flex;flex-direction:column;gap:${p}`,E=[];for(let e=0;e<f;e++)E.push(t.html`
+			<div
+				class="${b}"
+				style="${S};background-color:${u};${w};opacity:0;transition:opacity 0.3s"
+				${(0,n.ref)(e=>{e&&x.bind(e)})}
+			></div>
+		`);function D(e){let t=Array.from(e.querySelectorAll(`.${b}`));setTimeout(()=>{t.forEach(e=>e.style.opacity=`1`),g&&setTimeout(()=>{t.forEach(e=>e.style.opacity=`0`)},_)},h)}return e.LycoComponent(`SkeletonLoader`,t.html`
+			<style>
+				${C}
+			</style>
+			<div
+				style="${T}"
+				${(0,n.ref)(e=>e&&D(e))}
+			>
+				${E}
+			</div>
+		`)}function oe(r){let i=e.createEventBinder(r?.on??{});return t.html`<div
+		${(0,n.ref)(e=>{e?i.bind(e):i.unbindAll()})}
+		style="flex: 1 1 auto;"
+	></div>`}function se(r){let{size:i=`24px`,color:a=O.colors.primary,thickness:o=`2px`,speed:s=`1.2s`,className:c=``,opacity:l=1,startAngle:u=0,easing:d=`linear`,reverse:f=!1,style:p=``,on:m={},children:h,svgMode:g=!1,strokeLinecap:_=`butt`,strokeDasharray:v=``}=r??{},y=e.createEventBinder(m),b=e.getComponentCount(`Spinner`),x=t.html`
 		<div
 			class="${c}"
 			style="display: inline-flex; align-items: center; justify-content: center; width: ${i}; height: ${i}; ${p}"
@@ -1163,7 +1073,70 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 				}
 			`.cssText}
 		</style>
-	`;return e.LycoComponent(`Spinner`,g?S:x)}let $=function(e){return e.Top=`top`,e.Bottom=`bottom`,e.Left=`left`,e.Right=`right`,e}({});function le(r,i){let{content:a,placement:o=$.Top,delay:s={show:200,hide:100},offset:c=8,hideOnClick:l=!1,interactive:u=!1,maxWidth:d=`200px`,theme:f=`dark`,className:p=``,style:m=``,zIndex:h=1e3,on:g={},onShow:_,onHide:v}=r,y=e.createEventBinder(g),b,x;function S(e){clearTimeout(x),b=window.setTimeout(()=>{w.style.visibility=`visible`,w.style.opacity=`1`,_?.()},s.show)}function C(){clearTimeout(b),x=window.setTimeout(()=>{w.style.visibility=`hidden`,w.style.opacity=`0`,v?.()},s.hide)}let w,T=r=>t.html`
+	`;return e.LycoComponent(`Spinner`,g?S:x)}function X(r,i){if(i===void 0){let e=e=>X(r,e??t.html``);return e.html=(e,...n)=>X(r,(0,t.html)(e,...n)),e}let a=r?.top?`top: ${r.top};`:``,o=r?.bottom?`bottom: ${r.bottom};`:``,s=typeof r?.zIndex==`number`?`z-index: ${r.zIndex};`:``,c=e.createEventBinder(r?.on??{});return t.html`
+		<div
+			${(0,n.ref)(e=>{e?c.bind(e):c.unbindAll()})}
+			style="
+      position: sticky;
+      ${a} ${o}
+      ${s}
+    "
+		>
+			${e.renderFn(i)}
+		</div>
+	`}function Z(r,i){if(i===void 0){let e=e=>Z(r,e??t.html``);return e.html=(e,...n)=>Z(r,(0,t.html)(e,...n)),e}let a=e.getComponentCount(`Table`),o=r?.className??e.getRandomClassName(`Table::table`)+`-lyco-now-${a}`,s=r?.striped?`
+      .${o} tr:nth-child(even) { 
+        background: ${O.colors.surface};
+      }
+    `:``,c=r?.hover?`
+      .${o} tr:hover { 
+        background: ${O.colors.primaryContainer};
+        cursor: pointer;
+      }
+    `:``,l=r?.bordered?`
+      .${o}, .${o} th, .${o} td { 
+        border: 1px solid ${O.colors.surfaceVariant}; 
+      }
+    `:``,u=`
+	.${o} table {
+	  width: 100%;
+	  border-collapse: separate;
+	  border-spacing: 0;
+	  border-radius: ${O.borderRadius.medium};
+	  overflow: hidden;
+	  box-shadow: ${O.elevation.level1};
+	}
+	.${o} th,
+	.${o} td {
+	  padding: 16px;
+	  text-align: left;
+	  transition: background ${O.animation.standard};
+	}
+	.${o} th {
+	  background: ${O.colors.surfaceVariant};
+	  color: ${O.colors.onSurfaceVariant};
+	  font-weight: 500;
+	}
+	.${o} td {
+	  border-bottom: 1px solid ${O.colors.surfaceVariant}; 
+	}
+	${s}
+	${c}
+	${l}
+	`,d=e.createEventBinder(r?.on??{});return e.LycoComponent(`Table`,t.html`
+			<style>
+				${u}
+			</style>
+
+			<div
+				${(0,n.ref)(e=>{e?d.bind(e):d.unbindAll()})}
+				class="${o}"
+			>
+				<table>
+					${e.renderFn(i)}
+				</table>
+			</div>
+		`)}let Q=function(e){return e.Top=`top`,e.Bottom=`bottom`,e.Left=`left`,e.Right=`right`,e}({});function ce(r,i){let{content:a,placement:o=Q.Top,delay:s={show:200,hide:100},offset:c=8,hideOnClick:l=!1,interactive:u=!1,maxWidth:d=`200px`,theme:f=`dark`,className:p=``,style:m=``,zIndex:h=1e3,on:g={},onShow:_,onHide:v}=r,y=e.createEventBinder(g),b,x;function S(e){clearTimeout(x),b=window.setTimeout(()=>{w.style.visibility=`visible`,w.style.opacity=`1`,_?.()},s.show)}function C(){clearTimeout(b),x=window.setTimeout(()=>{w.style.visibility=`hidden`,w.style.opacity=`0`,v?.()},s.hide)}let w,T=r=>t.html`
 			<div
 				${(0,n.ref)(e=>{e?(y.bind(e),w=e.querySelector(`.lyco-tooltip-content`),e.addEventListener(`mouseenter`,()=>S(e)),e.addEventListener(`mouseleave`,()=>C()),l&&e.addEventListener(`click`,()=>C())):y.unbindAll()})}
 				class="lyco-tooltip lyco-tooltip--${f} ${p}"
@@ -1175,29 +1148,56 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 					style="
             position: absolute;
             max-width: ${d};
-            ${o===$.Top?`bottom: 100%; left: 50%; transform: translateX(-50%)`:``}
-            ${o===$.Bottom?`top: 100%; left: 50%; transform: translateX(-50%)`:``}
-            ${o===$.Left?`right: 100%; top: 50%; transform: translateY(-50%)`:``}
-            ${o===$.Right?`left: 100%; top: 50%; transform: translateY(-50%)`:``}
+            ${o===Q.Top?`bottom: 100%; left: 50%; transform: translateX(-50%)`:``}
+            ${o===Q.Bottom?`top: 100%; left: 50%; transform: translateX(-50%)`:``}
+            ${o===Q.Left?`right: 100%; top: 50%; transform: translateY(-50%)`:``}
+            ${o===Q.Right?`left: 100%; top: 50%; transform: translateY(-50%)`:``}
             padding: 4px 8px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
             background: ${f===`light`?`white; color: black`:`rgba(0,0,0,0.8); color: white`};
             border-radius: 4px;
             font-size: 12px;
             white-space: normal;
-            width: ${o===$.Left||o===$.Right?d:`auto`};
+            width: ${o===Q.Left||o===Q.Right?d:`auto`};
             visibility: hidden;
             opacity: 0;
             transition: opacity ${s.show}ms;
             z-index: ${h};
-            margin: ${typeof c==`number`?o===$.Top||o===$.Bottom?`${c}px 0`:`0 ${c}px`:`${c.y}px ${c.x}px`};
+            margin: ${typeof c==`number`?o===Q.Top||o===Q.Bottom?`${c}px 0`:`0 ${c}px`:`${c.y}px ${c.x}px`};
             ${u?`pointer-events: auto`:`pointer-events: none`};
           "
 				>
 					${a}
 				</div>
 			</div>
-		`;return e.renderFnOrCurry(i,T)}let ue=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 de=typeof window>`u`,fe=!de&&`HTMLDialogElement`in window,pe=e=>`
+		`;return e.renderFnOrCurry(i,T)}function le(r,i){let a=r?.direction??`row`,o=e.createEventBinder(r?.on??{});return i===void 0?e=>le(r,e??t.html``):t.html`
+		<div
+			${(0,n.ref)(e=>{e?o.bind(e):o.unbindAll()})}
+			style="
+      display: flex;
+      flex-direction: ${a};
+      flex-wrap: wrap;
+      ${r?.gap?`gap: ${r.gap};`:``}
+      ${r?.align?`align-items: ${r.align};`:``}
+      ${r?.justify?`justify-content: ${r.justify};`:``}
+    "
+		>
+			${e.renderFnOrArray(i)}
+		</div>
+	`}function ue(r,i){let a=r?.width?`width: ${r.width};`:``,o=r?.height?`height: ${r.height};`:``,s=r?.background?`background: ${r.background};`:``,c=e.createEventBinder(r?.on??{});if(i===void 0)return e=>ue(r,e??[t.html``]);let l=`flex-start`,u=`flex-start`;switch(r?.align){case`top-right`:l=`flex-end`,u=`flex-start`;break;case`center`:l=`center`,u=`center`;break;case`bottom-left`:l=`flex-start`,u=`flex-end`;break;case`bottom-right`:l=`flex-end`,u=`flex-end`;break;default:l=`flex-start`,u=`flex-start`}return t.html`
+		<div
+			${(0,n.ref)(e=>{e?c.bind(e):c.unbindAll()})}
+			style="
+      position: relative;
+      display: flex;
+      justify-content: ${l};
+      align-items: ${u};
+      ${a} ${o} ${s}
+    "
+		>
+			${e.renderFnOrArray(i)}
+		</div>
+	`}let de=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 fe=typeof window>`u`,pe=!fe&&`HTMLDialogElement`in window,me=e=>`
   position: fixed;
   top: 0;
   left: 0;
@@ -1208,7 +1208,7 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
   justify-content: center;
   z-index: 1000;
   background: rgba(0,0,0,0.3);
-`;var me=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 he(r,i){let a=r?.open??!1,o=r?.onClose,s=r?.className??``,c=r?.style??``,l=e.createEventBinder(r?.on?r?.on:{}),u=r?.movable??!1,d=r?.placement??ue.Center,f=r?.proxyRef??{value:null},p=null,m=!1,h={x:0,y:0},g=null,_=r?.mask??!0,v=e.getComponentCount(`Dialog`),y=e.getRandomClassName(`Dialog::dialog`)+`-lyco-now-`+v;function b(e){return u?u===`self`?e:u&&`value`in u?u.value:null:null}function x(){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 S(){switch(d){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 x()}}function C(){switch(d){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 w(e,t){if(e.button!==0||(g=b(t),!g||!g.contains(e.target)))return;p=t,p.style.transform=`none`,e.preventDefault(),g.style.cursor=`grabbing`;let n=t.getBoundingClientRect(),{txp:r,typ:i}=C();h={x:e.clientX-(n.left+r/100*n.width),y:e.clientY-(n.top+i/100*n.height)},m=!0,document.addEventListener(`mousemove`,T),document.addEventListener(`mouseup`,E)}function T(e){if(!m||!g||!p)return;let t=p.getBoundingClientRect(),{txp:n,typ:r}=C(),i=e.clientX-h.x-n/100*t.width,a=e.clientY-h.y-r/100*t.height;p.style.left=`${i}px`,p.style.top=`${a}px`}function E(){m=!1,g=null,p=null,document.removeEventListener(`mousemove`,T),document.removeEventListener(`mouseup`,E)}function D(){let e=_?`rgba(0,0,0,0.5)`:`transparent`;return`
+`;var $=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 he(r,i){let a=r?.open??!1,o=r?.onClose,s=r?.className??``,c=r?.style??``,l=e.createEventBinder(r?.on?r?.on:{}),u=r?.movable??!1,d=r?.placement??de.Center,f=r?.proxyRef??{value:null},p=null,m=!1,h={x:0,y:0},g=null,_=r?.mask??!0,v=e.getComponentCount(`Dialog`),y=e.getRandomClassName(`Dialog::dialog`)+`-lyco-now-`+v;function b(e){return u?u===`self`?e:u&&`value`in u?u.value:null:null}function x(){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 S(){switch(d){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 x()}}function C(){switch(d){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 w(e,t){if(e.button!==0||(g=b(t),!g||!g.contains(e.target)))return;p=t,p.style.transform=`none`,e.preventDefault(),g.style.cursor=`grabbing`;let n=t.getBoundingClientRect(),{txp:r,typ:i}=C();h={x:e.clientX-(n.left+r/100*n.width),y:e.clientY-(n.top+i/100*n.height)},m=!0,document.addEventListener(`mousemove`,T),document.addEventListener(`mouseup`,E)}function T(e){if(!m||!g||!p)return;let t=p.getBoundingClientRect(),{txp:n,typ:r}=C(),i=e.clientX-h.x-n/100*t.width,a=e.clientY-h.y-r/100*t.height;p.style.left=`${i}px`,p.style.top=`${a}px`}function E(){m=!1,g=null,p=null,document.removeEventListener(`mousemove`,T),document.removeEventListener(`mouseup`,E)}function D(){let e=_?`rgba(0,0,0,0.5)`:`transparent`;return`
       ${y}::-webkit-backdrop,
       ${y}::backdrop {
         background: ${e};
@@ -1216,12 +1216,12 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
       }
     `}function k(r){let i=null,d=null;return e.LycoComponent(`Dialog`,t.html`
 				<div
-					${(0,n.ref)(e=>{if(e){if(i=e,d){let e=new me(i,d);f.value=e,l.bind(i),a?e.showModal():e.close()}}else l.unbindAll()})}
+					${(0,n.ref)(e=>{if(e){if(i=e,d){let e=new $(i,d);f.value=e,l.bind(i),a?e.showModal():e.close()}}else l.unbindAll()})}
 					@click=${e=>{e.target===e.currentTarget&&o?.()}}
-					style=${pe(a)}
+					style=${me(a)}
 				>
 					<div
-						${(0,n.ref)(e=>{if(e&&(d=e,i)){let e=new me(i,d);f.value=e}})}
+						${(0,n.ref)(e=>{if(e&&(d=e,i)){let e=new $(i,d);f.value=e}})}
 						class="${y} ${s}"
 						style="
               padding: 0;
@@ -1237,7 +1237,7 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 						${e.renderFnOrArray(r)}
 					</div>
 				</div>
-			`)}function A(r){return de||!fe?k(r):e.LycoComponent(`Dialog`,t.html`
+			`)}function A(r){return fe||!pe?k(r):e.LycoComponent(`Dialog`,t.html`
 				<dialog
 					${(0,n.ref)(e=>{if(e){f.value=e;let t=e;l.bind(t),requestAnimationFrame(()=>{try{a?t.showModal():t.close()}catch(e){console.warn(`Dialog operation failed:`,e)}})}else l.unbindAll()})}
 					@close=${o}
@@ -1323,5 +1323,5 @@ const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(re
 			>
 				${e.renderFn(r)}
 			</div>
-		`;return e.renderFnOrCurry(i,l)}function be(t){return e.renderFnOrArray(t)}exports.$Html=be,exports.AbsoluteBox=A,exports.AcrylicBar=j,exports.AspectRatio=M,exports.AutoFitGrid=N,exports.AvatarStack=P,exports.Badge=F,exports.Canvas=I,exports.Card=L,exports.Center=R,exports.Column=m,exports.ColumnSplit=C,exports.Combobox=oe,exports.Container=z,exports.Dialog=he,exports.DialogActions=ge,exports.DialogButton=_e,exports.DialogContent=ve,exports.DialogPlacement=ue,exports.DialogTitle=ye,exports.Divider=B,exports.Flex=h,exports.FlowItem=g,exports.FooterLayout=V,exports.ForEach=H,exports.Grid=_,exports.GridBreakpoint=U,exports.GridCol=v,exports.GridItem=y,exports.GridRow=b,exports.HeroSection=W,exports.Hidden=G,exports.LazyForEach=ae,exports.LightboxContainer=p,exports.List=ee,exports.ListGroup=q,exports.ListItem=K,exports.Overlay=J,exports.PositionContainer=Y,exports.Progress=se,exports.Row=x,exports.RowSplit=w,exports.ScrollBar=T,exports.SideBarContainer=E,exports.SizedBox=te,exports.SkeletonLoader=ne,exports.Spacer=re,exports.Spinner=ce,exports.Sticky=X,exports.Swiper=D,exports.SwitchInput=k,exports.Table=Z,exports.Virtualizer=f,exports.VirtualizerController=c,exports.WaterFlow=S,exports.WithTooltip=le,exports.Wrap=ie,exports.ZStack=Q;
+		`;return e.renderFnOrCurry(i,l)}function be(t){return e.renderFnOrArray(t)}function xe(t,n){let r=`__LYCO_ONCE_`+e.getComponentCount(`$Once`);if(t[r])return t[r];{let i=e.LycoComponent(`$Once`,n());return t[r]=i,t[r]}}exports.$Html=be,exports.$Once=xe,exports.AbsoluteBox=A,exports.AcrylicBar=j,exports.AspectRatio=M,exports.AutoFitGrid=N,exports.AvatarStack=P,exports.Badge=F,exports.Canvas=I,exports.Card=L,exports.Center=R,exports.Column=m,exports.ColumnSplit=C,exports.Combobox=z,exports.Container=B,exports.Dialog=he,exports.DialogActions=ge,exports.DialogButton=_e,exports.DialogContent=ve,exports.DialogPlacement=de,exports.DialogTitle=ye,exports.Divider=V,exports.Flex=h,exports.FlowItem=g,exports.FooterLayout=H,exports.ForEach=ee,exports.Grid=_,exports.GridBreakpoint=U,exports.GridCol=v,exports.GridItem=y,exports.GridRow=b,exports.HeroSection=W,exports.Hidden=G,exports.LazyForEach=K,exports.LightboxContainer=p,exports.List=te,exports.ListGroup=J,exports.ListItem=q,exports.Overlay=ne,exports.PositionContainer=Y,exports.Progress=re,exports.Row=x,exports.RowSplit=w,exports.ScrollBar=T,exports.SideBarContainer=E,exports.SizedBox=ie,exports.SkeletonLoader=ae,exports.Spacer=oe,exports.Spinner=se,exports.Sticky=X,exports.Swiper=D,exports.SwitchInput=k,exports.Table=Z,exports.Virtualizer=f,exports.VirtualizerController=c,exports.WaterFlow=S,exports.WithTooltip=ce,exports.Wrap=le,exports.ZStack=ue;
 //# sourceMappingURL=index.cjs.js.map