lyco 1.2.4 → 1.2.5

package/dist/index.es.js

@@ -1,4 +1,7 @@
-import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`function`?e():e:t``}function r(e,r){let i=r??(e=>e);if(e===void 0)return t``;if(Array.isArray(e))return e.map((e,t)=>i(n(e),t,!0,!1));if(typeof e!=`function`)return i(n(e),void 0,!1,!1);let a=e();return Array.isArray(a)?a.map((e,t)=>i(n(e),t,!0,!1)):i(n(a),void 0,!1,!0)}function i(e){let t=Math.random().toString(36).substring(2,15);return e?`lyco-${e}-${t}`:`lyco-${t}`}function a(e,t){let r=t??(e=>e),i=e=>r(n(e));return e?i(e):i}function o(e,t,n){let i=t??(e=>e),a=e=>i(r(e,n));return e?a(e):a}const s=e=>({init:!1,prefix:e,className:`___LYCO_NULL___`}),c={"GridBreakpoint::grid-breakpoint":s(`grid-breakpoint`),"Hidden::hidden-container":s(`hidden-container`),"ListGroup::list-group":s(`list-group`),"ScrollBar::scrollbar-container":s(`scrollbar-container`),"SkeletonLoader::skeleton-shimmer":s(`skeleton-shimmer`),"Swiper::swiper":s(`swiper`),"Table::table":s(`table`),"WaterFlow::waterflow":s(`waterflow`),"AutoFitGrid::auto-fit-grid":s(`auto-fit-grid`),"GridCol::grid-col":s(`grid-col`),"GridRow::grid-row":s(`grid-row`)};function l(e){let t=c[e];return t.init||(c[e].init=!0,c[e].className=i(t.prefix)),c[e].className===`___LYCO_NULL___`?i(t.prefix):c[e].className}const u={value:0};var d=class extends e{constructor(){super(),this.shadowRoot=this.attachShadow({mode:`closed`}),u.value++}render(){return t` <slot></slot> `}};customElements.define(`lyco-component`,d);function f(e,r){if(r===void 0){let n=n=>f(e,n??t``);return n.html=(n,...r)=>f(e,t(n,...r)),n}let i=e?.fadeBg??`rgba(0,0,0,0.7)`,a=e?.zIndex??2e3;return t`
+import{html as e}from"lit";function t(t){return t?typeof t==`function`?t():t:e``}function n(n,r){let i=r??(e=>e);if(n===void 0)return e``;if(Array.isArray(n))return n.map((e,n)=>i(t(e),n,!0,!1));if(typeof n!=`function`)return i(t(n),void 0,!1,!1);let a=n();return Array.isArray(a)?a.map((e,n)=>i(t(e),n,!0,!1)):i(t(a),void 0,!1,!0)}function r(e){let t=Math.random().toString(36).substring(2,15);return e?`lyco-${e}-${t}`:`lyco-${t}`}function i(e,n){let r=n??(e=>e),i=e=>r(t(e));return e?i(e):i}function a(e,t,r){let i=t??(e=>e),a=e=>i(n(e,r));return e?a(e):a}const o=e=>({init:!1,prefix:e,className:`___LYCO_NULL___`}),s={"GridBreakpoint::grid-breakpoint":o(`grid-breakpoint`),"Hidden::hidden-container":o(`hidden-container`),"ListGroup::list-group":o(`list-group`),"ScrollBar::scrollbar-container":o(`scrollbar-container`),"SkeletonLoader::skeleton-shimmer":o(`skeleton-shimmer`),"Swiper::swiper":o(`swiper`),"Table::table":o(`table`),"WaterFlow::waterflow":o(`waterflow`),"AutoFitGrid::auto-fit-grid":o(`auto-fit-grid`),"GridCol::grid-col":o(`grid-col`),"GridRow::grid-row":o(`grid-row`)};function c(e){let t=s[e];return t.init||(s[e].init=!0,s[e].className=r(t.prefix)),s[e].className===`___LYCO_NULL___`?r(t.prefix):s[e].className}const l={all:{value:0}};function u(e){var t;return(t=l[e])?.value||(l[e]={value:0}),l[e].value}function d(t,n){return l.all={value:l.all.value+1},l[t]===void 0?l[t]={value:0}:l[t].value=l[t].value+1,console.debug(`LycoComponent: ${t} - ${l[t].value} - ${l.all.value}`),e`
+		<!-- ${t} - ${l[t].value} -->
+		${n}
+	`}function f(n,r){if(r===void 0){let t=t=>f(n,t??e``);return t.html=(t,...r)=>f(n,e(t,...r)),t}let i=n?.fadeBg??`rgba(0,0,0,0.7)`,a=n?.zIndex??2e3;return e`
 		<div
 			style="
       position: fixed;
@@ -10,102 +13,98 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
       align-items: center;
     "
 		>
-			${n(r)}
+			${t(r)}
 		</div>
-	`}function p(e,n){return n===void 0?n=>p(e,n??[t``]):t`
+	`}function p(t,r){return r===void 0?n=>p(t,n??[e``]):e`
 		<div
 			style="
       display: flex;
       flex-direction: column;
-      ${e?.space?`gap: ${e.space};`:``}
+      ${t?.space?`gap: ${t.space};`:``}
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}function m(e,r){if(r===void 0){let n=n=>m(e,n??t``);return n.html=(n,...r)=>m(e,t(n,...r)),n}let i=e?.direction??`row`;return t`
+	`}function m(n,r){if(r===void 0){let t=t=>m(n,t??e``);return t.html=(t,...r)=>m(n,e(t,...r)),t}let i=n?.direction??`row`;return e`
 		<div
 			style="
       display: flex;
       flex-direction: ${i};
-      ${e?.justify?`justify-content: ${e.justify};`:``}
-      ${e?.align?`align-items: ${e.align};`:``}
-      ${e?.gap?`gap: ${e.gap};`:``}
+      ${n?.justify?`justify-content: ${n.justify};`:``}
+      ${n?.align?`align-items: ${n.align};`:``}
+      ${n?.gap?`gap: ${n.gap};`:``}
     "
 		>
-			${n(r)}
+			${t(r)}
 		</div>
-	`}function h(e){return t`
+	`}function h(n){return e`
 		<div style="break-inside: avoid; margin-bottom: 16px;">
-			${n(e)}
+			${t(n)}
 		</div>
-	`}function g(e,n){if(n===void 0)return n=>g(e,n??[t``]);let i=e?.columns??1;return t`
+	`}function g(t,r){if(r===void 0)return n=>g(t,n??[e``]);let i=t?.columns??1;return e`
 		<div
 			style="
       display: grid;
       grid-template-columns: repeat(${i}, 1fr);
-      ${e?.gap?`gap: ${e.gap};`:``}
+      ${t?.gap?`gap: ${t.gap};`:``}
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}function _(e,r){if(r===void 0){let n=n=>_(e,n??t``);return n.html=(n,...r)=>_(e,t(n,...r)),n}let i=u.value,a=l(`GridCol::grid-col`)+ +`-lyco-now-${i}`,o=e?.gap?`column-gap: ${e.gap};`:``,s=`
+	`}function _(n,r){if(r===void 0){let t=t=>_(n,t??e``);return t.html=(t,...r)=>_(n,e(t,...r)),t}let i=u(`GridCol`),a=c(`GridCol::grid-col`)+`-lyco-now-`+i,o=n?.gap?`column-gap: ${n.gap};`:``,s=`
       .${a} {
         display: grid;
         grid-auto-flow: column;
         ${o}
       }
-    `;return t`
-		<lyco-component name="GridCol">
+    `;return d(`GridCol`,e`
 			<style>
 				${s}
 			</style>
-			<div class="${a}">${n(r)}</div>
-		</lyco-component>
-	`}function v(e,r){if(r===void 0){let n=n=>v(e,n??t``);return n.html=(n,...r)=>v(e,t(n,...r)),n}return t`
-		<div style="${e?.span?`grid-column: span ${e.span};`:``}">
-			${n(r)}
+			<div class="${a}">${t(r)}</div>
+		`)}function v(n,r){if(r===void 0){let t=t=>v(n,t??e``);return t.html=(t,...r)=>v(n,e(t,...r)),t}return e`
+		<div style="${n?.span?`grid-column: span ${n.span};`:``}">
+			${t(r)}
 		</div>
-	`}function y(e,r){if(r===void 0){let n=n=>y(e,n??t``);return n.html=(n,...r)=>y(e,t(n,...r)),n}let i=u.value,a=l(`GridRow::grid-row`)+`-lyco-now-${i}`,o=e?.gap?`row-gap: ${e.gap};`:``,s=`
+	`}function y(n,r){if(r===void 0){let t=t=>y(n,t??e``);return t.html=(t,...r)=>y(n,e(t,...r)),t}let i=u(`GridRow`),a=c(`GridRow::grid-row`)+`-lyco-now-`+i,o=n?.gap?`row-gap: ${n.gap};`:``,s=`
       .${a} {
         display: grid;
         grid-auto-flow: row;
         ${o}
       }
-    `;return t`
-		<lyco-component name="GridRow">
+    `;return d(`GridRow`,e`
 			<style>
 				${s}
 			</style>
-			<div class="${a}">${n(r)}</div>
-		</lyco-component>
-	`}function b(e,n){return n===void 0?n=>b(e,n??[t``]):t`
+			<div class="${a}">${t(r)}</div>
+		`)}function b(t,r){return r===void 0?n=>b(t,n??[e``]):e`
 		<div
 			style="
       display: flex;
       flex-direction: row;
-      ${e?.space?`gap: ${e.space};`:``}
+      ${t?.space?`gap: ${t.space};`:``}
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}function x(e,r){if(r===void 0){let n=n=>x(e,n??t``);return n.html=(n,...r)=>x(e,t(n,...r)),n}let i=e?.columnCount??3,a=e?.gap??`16px`,o=u.value,s=l(`WaterFlow::waterflow`)+`-lyco-now-${o}`;return t`
-		<lyco-component name="WaterFlow">
+	`}function x(n,r){if(r===void 0){let t=t=>x(n,t??e``);return t.html=(t,...r)=>x(n,e(t,...r)),t}let i=n?.columnCount??3,a=n?.gap??`16px`,o=u(`WaterFlow`),s=c(`WaterFlow::waterflow`)+`-lyco-now-${o}`,l=`
+	/* 使用 CSS 类来控制多列布局 */
+	.${s} {
+		column-count: ${i};
+		column-gap: ${typeof a==`number`?`${a}px`:a};
+	}
+	/* 子元素如果是块级元素，需要让它们适应多列流式布局 */
+	.${s} > * {
+		display: inline-block;
+		width: 100%;
+	}
+	`;return d(`WaterFlow`,e`
 			<style>
-				/* 使用 CSS 类来控制多列布局 */
-				.${s} {
-					column-count: ${i};
-					column-gap: ${typeof a==`number`?`${a}px`:a};
-				}
-				/* 子元素如果是块级元素，需要让它们适应多列流式布局 */
-				.${s} > * {
-					display: inline-block;
-					width: 100%;
-				}
+				${l}
 			</style>
 
-			<div class="${s}">${n(r)}</div>
-		</lyco-component>
-	`}function S(e,r){if(r===void 0){let n=n=>S(e,n??t``);return n.html=(n,...r)=>S(e,t(n,...r)),n}let i=e?.gap??`0px`,a=e?.firstHeight??`50%`,o=t``,s=t``;if(typeof r==`function`){var c;let e=(c=r.call)?.call(r,null)??[];o=e[0]??t``,s=e[1]??t``}else o=n(r);return t`
+			<div class="${s}">${t(r)}</div>
+		`)}function S(n,r){if(r===void 0){let t=t=>S(n,t??e``);return t.html=(t,...r)=>S(n,e(t,...r)),t}let i=n?.gap??`0px`,a=n?.firstHeight??`50%`,o=e``,s=e``;if(typeof r==`function`){var c;let t=(c=r.call)?.call(r,null)??[];o=t[0]??e``,s=t[1]??e``}else o=t(r);return e`
 		<div
 			style="
       display: flex;
@@ -118,7 +117,7 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
 			<div style="flex: 0 0 ${a}; overflow: auto;">${o}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${s}</div>
 		</div>
-	`}function C(e,r){if(r===void 0){let n=n=>C(e,n??t``);return n.html=(n,...r)=>C(e,t(n,...r)),n}let i=e?.gap??`0px`,a=e?.firstWidth??`50%`,o=t``,s=t``;if(typeof r==`function`){var c;let e=(c=r.call)?.call(r,null)??[];o=e[0]??t``,s=e[1]??t``}else o=n(r);return t`
+	`}function C(n,r){if(r===void 0){let t=t=>C(n,t??e``);return t.html=(t,...r)=>C(n,e(t,...r)),t}let i=n?.gap??`0px`,a=n?.firstWidth??`50%`,o=e``,s=e``;if(typeof r==`function`){var c;let t=(c=r.call)?.call(r,null)??[];o=t[0]??e``,s=t[1]??e``}else o=t(r);return e`
 		<div
 			style="
       display: flex;
@@ -131,30 +130,30 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
 			<div style="flex: 0 0 ${a}; overflow: auto;">${o}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${s}</div>
 		</div>
-	`}function w(e,r){if(r===void 0){let n=n=>w(e,n??t``);return n.html=(n,...r)=>w(e,t(n,...r)),n}let i=e?.direction??`vertical`,a=e?.height??`100%`,o=e?.width??`100%`,s=e?.customCss??``,c=u.value,d=e?.className??l(`ScrollBar::scrollbar-container`)+`-lyco-now-${c}`,f=i===`horizontal`?`overflow-x: auto; overflow-y: hidden`:`overflow-y: auto; overflow-x: hidden`;return t`
-		<lyco-component name="ScrollBar">
+	`}function w(n,r){if(r===void 0){let t=t=>w(n,t??e``);return t.html=(t,...r)=>w(n,e(t,...r)),t}let i=n?.direction??`vertical`,a=n?.height??`100%`,o=n?.width??`100%`,s=n?.customCss??``,l=u(`ScrollBar`),f=n?.className??c(`ScrollBar::scrollbar-container`)+`-lyco-now-`+l,p=i===`horizontal`?`overflow-x: auto; overflow-y: hidden`:`overflow-y: auto; overflow-x: hidden`,m=`
+	.${f} {
+	  ${p};
+	  width: ${o};
+	  height: ${a};
+	}
+	.${f}::-webkit-scrollbar {
+	  width: 8px;
+	  height: 8px;
+	}
+	.${f}::-webkit-scrollbar-thumb {
+	  background-color: rgba(0, 0, 0, 0.2);
+	  border-radius: 4px;
+	}
+	.${f}::-webkit-scrollbar-track {
+	  background: rgba(0, 0, 0, 0.05);
+	}
+	${s}
+	`;return d(`ScrollBar`,e`
 			<style>
-				.${d} {
-				  ${f};
-				  width: ${o};
-				  height: ${a};
-				}
-				.${d}::-webkit-scrollbar {
-				  width: 8px;
-				  height: 8px;
-				}
-				.${d}::-webkit-scrollbar-thumb {
-				  background-color: rgba(0, 0, 0, 0.2);
-				  border-radius: 4px;
-				}
-				.${d}::-webkit-scrollbar-track {
-				  background: rgba(0, 0, 0, 0.05);
-				}
-				${s}
+				${m}
 			</style>
-			<div class="${d}">${n(r)}</div>
-		</lyco-component>
-	`}function T(e,n){if(n===void 0)return n=>T(e,n??[t``]);let i=e?.sidebarWidth??`240px`,a=e?.sidebarPosition??`left`,o=e?.gap??`0px`,s=t``,c=t``;if(typeof n==`function`){var l;let e=(l=n.call)?.call(n,null)??[];s=e[0]??t``,c=e[1]??t``}else c=r(n);return t`
+			<div class="${f}">${t(r)}</div>
+		`)}function T(t,r){if(r===void 0)return n=>T(t,n??[e``]);let i=t?.sidebarWidth??`240px`,a=t?.sidebarPosition??`left`,o=t?.gap??`0px`,s=e``,c=e``;if(typeof r==`function`){var l;let t=(l=r.call)?.call(r,null)??[];s=t[0]??e``,c=t[1]??e``}else c=n(r);return e`
 		<div
 			style="
       display: flex;
@@ -167,175 +166,175 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
 			<div style="flex: 0 0 ${i}; overflow: auto;">${s}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${c}</div>
 		</div>
-	`}function E(e={},n){if(n===void 0)return n=>E(e,n??[t``]);let r=u.value,{gap:i=`8px`,snapType:a=`mandatory`,height:o=`auto`,width:s=`100%`,className:c=l(`Swiper::swiper`)+`-lyco-now-${r}`,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}=e,w=c,T=w+`-container`,D=w+`-slide`,O=w+`-navigation`,k=w+`-pagination`,A;A=n?typeof n==`function`?n():n:[];let j=A.length,[M,N]=(()=>{let e={value:0};return[()=>e.value,t=>{let n=Math.max(0,Math.min(t,j-1));e.value!==n&&(e.value=n,C?.(n))}]})(),P=e=>{let t=typeof document<`u`?document.querySelector(`.${T}`):null;if(!t)return;let n=t.querySelectorAll(`.${D}`);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})),N(e)},F=()=>{let e=M()+1>=j?b?0:M():M()+1;P(e)},I=()=>{let e=M()-1<0?b?j-1:M():M()-1;P(e)},L=()=>{let e=typeof document<`u`?document.querySelector(`.${T}`):null;if(!e)return;let t=e.querySelectorAll(`.${D}`),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)}),N(n)},R=e=>{if(!x)return;let t=e.touches[0],n=e.currentTarget;n.dataset.touchStartX=t.clientX.toString(),n.dataset.touchStartY=t.clientY.toString()},z=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()},B=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?I():F():o>0?I():F()),delete t.dataset.touchStartX,delete t.dataset.touchStartY},V=e=>{S&&(e.preventDefault(),e.deltaY>0?F():I())},H=e=>{if(!v||!e)return;let t,n=()=>{t=setInterval(F,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(`.${T}`):null;if(!e)return;let t=[];e.addEventListener(`scroll`,L),t.push(()=>e.removeEventListener(`scroll`,L)),x&&(e.addEventListener(`touchstart`,R),e.addEventListener(`touchmove`,z,{passive:!1}),e.addEventListener(`touchend`,B),t.push(()=>e.removeEventListener(`touchstart`,R)),t.push(()=>e.removeEventListener(`touchmove`,z)),t.push(()=>e.removeEventListener(`touchend`,B))),S&&(e.addEventListener(`wheel`,V,{passive:!1}),t.push(()=>e.removeEventListener(`wheel`,V)));let n=H(e);return n&&t.push(n),P(0),()=>t.forEach(e=>e())};typeof window<`u`&&typeof document<`u`&&setTimeout(U,0);let W=t`
-		<div class="${k}">
-			${Array.from({length:j},(e,n)=>t`
+	`}function E(t={},n){if(n===void 0)return n=>E(t,n??[e``]);let r=u(`Swiper`),{gap:i=`8px`,snapType:a=`mandatory`,height:o=`auto`,width:s=`100%`,className:l=c(`Swiper::swiper`)+`-lyco-now-${r}`,direction:f=`x`,scrollBehavior:p=`smooth`,align:m=`start`,showNavigation:h=!0,navigationPosition:g=`inside`,showPagination:_=!0,paginationType:v=`dots`,autoPlay:y=!1,interval:b=3e3,loop:x=!1,touchEnabled:S=!0,mouseWheel:C=!1,onSlideChange:w}=t,T=l,D=T+`-container`,O=T+`-slide`,k=T+`-navigation`,A=T+`-pagination`,j;j=n?typeof n==`function`?n():n:[];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,w?.(n))}]})(),F=e=>{let t=typeof document<`u`?document.querySelector(`.${D}`):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;f===`x`?(o=r.offsetLeft-t.offsetLeft,m===`center`?o-=(a.width-i.width)/2:m===`end`&&(o-=a.width-i.width),t.scrollTo({left:o,behavior:p})):(o=r.offsetTop-t.offsetTop,m===`center`?o-=(a.height-i.height)/2:m===`end`&&(o-=a.height-i.height),t.scrollTo({top:o,behavior:p})),P(e)},I=()=>{let e=N()+1>=M?x?0:N():N()+1;F(e)},L=()=>{let e=N()-1<0?x?M-1:N():N()-1;F(e)},R=()=>{let e=typeof document<`u`?document.querySelector(`.${D}`):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(f===`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(!S)return;let t=e.touches[0],n=e.currentTarget;n.dataset.touchStartX=t.clientX.toString(),n.dataset.touchStartY=t.clientY.toString()},B=e=>{if(!S)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)||f===`x`)&&e.preventDefault()},V=e=>{if(!S)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&&(f===`x`?a>0?L():I():o>0?L():I()),delete t.dataset.touchStartX,delete t.dataset.touchStartY},H=e=>{C&&(e.preventDefault(),e.deltaY>0?I():L())},U=e=>{if(!y||!e)return;let t,n=()=>{t=setInterval(I,b)},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(`.${D}`):null;if(!e)return;let t=[];e.addEventListener(`scroll`,R),t.push(()=>e.removeEventListener(`scroll`,R)),S&&(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))),C&&(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=e`
+		<div class="${A}">
+			${Array.from({length:M},(t,n)=>e`
 					<button
-						class="${n===M()?`active`:``}"
-						@click=${()=>P(n)}
+						class="${n===N()?`active`:``}"
+						@click=${()=>F(n)}
 					></button>
 				`)}
 		</div>
-	`,G=t`
-		<div class="${k} fraction">
-			<span class="current">${M()+1}</span>
+	`,K=e`
+		<div class="${A} fraction">
+			<span class="current">${N()+1}</span>
 			<span class="separator">/</span>
-			<span class="total">${j}</span>
+			<span class="total">${M}</span>
 		</div>
-	`,K=t`
-		<div class="${k} progressbar">
+	`,q=e`
+		<div class="${A} progressbar">
 			<div
 				class="progress"
-				style="width: ${j>1?M()/(j-1)*100:0}%"
+				style="width: ${M>1?N()/(M-1)*100:0}%"
 			></div>
 		</div>
-	`,q=t`
-		<div class="${O}">
-			<button class="prev" @click=${I}>◀</button>
-			<button class="next" @click=${F}>▶</button>
+	`,J=e`
+		<div class="${k}">
+			<button class="prev" @click=${L}>◀</button>
+			<button class="next" @click=${I}>▶</button>
 		</div>
-	`;return t`
-		<lyco-component name="Swiper">
-			<style>
-				.${w} {
-					position: relative;
-					overflow: hidden;
-					width: ${s};
-					height: ${o};
-				}
+	`,Y=`
+	.${T} {
+		position: relative;
+		overflow: hidden;
+		width: ${s};
+		height: ${o};
+	}
 
-				.${T} {
-					width: 100%;
-					height: 100%;
-					overflow: auto;
-					scroll-snap-type: ${d+` `+a};
-					-webkit-overflow-scrolling: touch;
-					scroll-behavior: ${f};
-					gap: ${i};
-					display: flex;
-					flex-direction: ${d===`x`?`row`:`column`};
-				}
+	.${D} {
+		width: 100%;
+		height: 100%;
+		overflow: auto;
+		scroll-snap-type: ${f+` `+a};
+		-webkit-overflow-scrolling: touch;
+		scroll-behavior: ${p};
+		gap: ${i};
+		display: flex;
+		flex-direction: ${f===`x`?`row`:`column`};
+	}
 
-				.${D} {
-					scroll-snap-align: ${p};
-					flex-shrink: 0;
-				}
+	.${O} {
+		scroll-snap-align: ${m};
+		flex-shrink: 0;
+	}
 
-				.${O} {
-					position: absolute;
-					top: 50%;
-					left: 0;
-					right: 0;
-					transform: translateY(-50%);
-					display: flex;
-					justify-content: space-between;
-					pointer-events: none;
-					padding: ${h===`outside`?`0 1rem`:`0 0.5rem`};
-				}
+	.${k} {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
+		transform: translateY(-50%);
+		display: flex;
+		justify-content: space-between;
+		pointer-events: none;
+		padding: ${g===`outside`?`0 1rem`:`0 0.5rem`};
+	}
 
-				.${O} button {
-					width: 2.5rem;
-					height: 2.5rem;
-					border-radius: 50%;
-					background-color: rgba(0, 0, 0, 0.5);
-					color: white;
-					border: none;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					cursor: pointer;
-					pointer-events: auto;
-					transition: background-color 0.3s;
-				}
+	.${k} button {
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 50%;
+		background-color: rgba(0, 0, 0, 0.5);
+		color: white;
+		border: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		pointer-events: auto;
+		transition: background-color 0.3s;
+	}
 
-				.${O} button:hover {
-					background-color: rgba(0, 0, 0, 0.8);
-				}
+	.${k} button:hover {
+		background-color: rgba(0, 0, 0, 0.8);
+	}
 
-				.${k} {
-					position: absolute;
-					bottom: 1rem;
-					left: 0;
-					right: 0;
-					display: flex;
-					justify-content: center;
-					gap: 0.5rem;
-					align-items: center;
-				}
-				.${k} button {
-					width: 0.75rem;
-					height: 0.75rem;
-					border-radius: 50%;
-					background-color: rgba(255, 255, 255, 0.5);
-					border: none;
-					cursor: pointer;
-					transition: background-color 0.3s, transform 0.3s;
-				}
-				.${k} button.active {
-					background-color: white;
-					transform: scale(1.2);
-				}
+	.${A} {
+		position: absolute;
+		bottom: 1rem;
+		left: 0;
+		right: 0;
+		display: flex;
+		justify-content: center;
+		gap: 0.5rem;
+		align-items: center;
+	}
+	.${A} button {
+		width: 0.75rem;
+		height: 0.75rem;
+		border-radius: 50%;
+		background-color: rgba(255, 255, 255, 0.5);
+		border: none;
+		cursor: pointer;
+		transition: background-color 0.3s, transform 0.3s;
+	}
+	.${A} button.active {
+		background-color: white;
+		transform: scale(1.2);
+	}
 
-				.${k}.fraction {
-					position: absolute;
-					bottom: 1rem;
-					left: 50%;
-					transform: translateX(-50%);
-					color: white;
-					font-size: 1rem;
-					display: flex;
-					align-items: center;
-					gap: 0.25rem;
-				}
+	.${A}.fraction {
+		position: absolute;
+		bottom: 1rem;
+		left: 50%;
+		transform: translateX(-50%);
+		color: white;
+		font-size: 1rem;
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
 
-				.${k}.progressbar {
-					position: absolute;
-					bottom: 0.5rem;
-					left: 0;
-					right: 0;
-					height: 0.25rem;
-					background-color: rgba(255, 255, 255, 0.2);
-				}
-				.${k}.progressbar .progress {
-					height: 100%;
-					background-color: white;
-					transition: width 0.3s;
-				}
+	.${A}.progressbar {
+		position: absolute;
+		bottom: 0.5rem;
+		left: 0;
+		right: 0;
+		height: 0.25rem;
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+	.${A}.progressbar .progress {
+		height: 100%;
+		background-color: white;
+		transition: width 0.3s;
+	}
+	`;return d(`Swiper`,e`
+			<style>
+				${Y}
 			</style>
 
-			<div class="${w}">
-				<div class="${T}">
-					${A.map((e,n)=>t`
-							<div class="${D} --slide-${n}" key=${n}>
-								${e}
+			<div class="${T}">
+				<div class="${D}">
+					${j.map((t,n)=>e`
+							<div class="${O} --slide-${n}" key=${n}>
+								${t}
 							</div>
 						`)}
 				</div>
 
-				${m?q:null}
-				${g&&_===`dots`?W:null}
-				${g&&_===`fraction`?G:null}
-				${g&&_===`progressbar`?K:null}
+				${h?J:null}
+				${_&&v===`dots`?G:null}
+				${_&&v===`fraction`?K:null}
+				${_&&v===`progressbar`?q:null}
 			</div>
-		</lyco-component>
-	`}function D(e,r){let i=e?.top?`top: ${e.top};`:``,o=e?.right?`right: ${e.right};`:``,s=e?.bottom?`bottom: ${e.bottom};`:``,c=e?.left?`left: ${e.left};`:``,l=e?.width?`width: ${e.width};`:``,u=e?.height?`height: ${e.height};`:``,d=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``,f=e?.style?e.style:``,p=e?.className?e.className:``,m=e=>t`
+		`)}function D(n,r){let a=n?.top?`top: ${n.top};`:``,o=n?.right?`right: ${n.right};`:``,s=n?.bottom?`bottom: ${n.bottom};`:``,c=n?.left?`left: ${n.left};`:``,l=n?.width?`width: ${n.width};`:``,u=n?.height?`height: ${n.height};`:``,d=typeof n?.zIndex==`number`?`z-index: ${n.zIndex};`:``,f=n?.style?n.style:``,p=n?.className?n.className:``,m=n=>e`
 			<div
 				class="${p}"
 				style="
       position: absolute;
-      ${i} ${o} ${s} ${c}
+      ${a} ${o} ${s} ${c}
       ${l} ${u}
       ${d}
 	  ${f}
     "
 			>
-				${n(e)}
+				${t(n)}
 			</div>
-		`;return a(r,m)}function O(e,n){let r=e?.width??`300px`,i=e?.height??`auto`,a=e?.top??`20%`,s=e?.bottom??`auto`,c=e?.left??`50%`,l=e?.right??`auto`,u=c===`auto`?``:`transform: translateX(-50%);`,d=e?.background??`rgba(255, 255, 255, 0.3)`,f=e?.blur??`10px`,p=e?.borderRadius??`12px`,m=e?.padding??`16px`,h=e?.zIndex??1e3,g=e=>t`
+		`;return i(r,m)}function O(t,n){let r=t?.width??`300px`,i=t?.height??`auto`,o=t?.top??`20%`,s=t?.bottom??`auto`,c=t?.left??`50%`,l=t?.right??`auto`,u=c===`auto`?``:`transform: translateX(-50%);`,d=t?.background??`rgba(255, 255, 255, 0.3)`,f=t?.blur??`10px`,p=t?.borderRadius??`12px`,m=t?.padding??`16px`,h=t?.zIndex??1e3,g=t=>e`
 			<div
 				style="
       position: fixed;
-      top: ${a};
+      top: ${o};
       bottom: ${s};
       left: ${c};
       right: ${l};
@@ -353,9 +352,9 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
       flex-direction: column;
     "
 			>
-				${e}
+				${t}
 			</div>
-		`;return o(n,void 0,g)}function k(e,n){if(n===void 0)return n=>k(e,n??[t``]);let i=`${100/e.ratio}%`,a=e.maxWidth?`max-width: ${e.maxWidth};`:``,o=e.background?`background: ${e.background};`:``,s=e.overflow??`hidden`;return t`
+		`;return a(n,void 0,g)}function k(t,r){if(r===void 0)return n=>k(t,n??[e``]);let i=`${100/t.ratio}%`,a=t.maxWidth?`max-width: ${t.maxWidth};`:``,o=t.background?`background: ${t.background};`:``,s=t.overflow??`hidden`;return e`
 		<div
 			style="
       position: relative;
@@ -375,23 +374,21 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
         height: 100%;
       "
 			>
-				${r(n)}
+				${n(r)}
 			</div>
 		</div>
-	`}function A(e,r){if(r===void 0){let n=t=>A(e,t);return n.html=(n,...r)=>A(e,t(n,...r)),n}let i=u.value,a=l(`AutoFitGrid::auto-fit-grid`)+`-lyco-now-${i}`,o=e?.gap??`16px`,s=`
+	`}function A(n,r){if(r===void 0){let t=e=>A(n,e);return t.html=(t,...r)=>A(n,e(t,...r)),t}let i=u(`AutoFitGrid`),a=c(`AutoFitGrid::auto-fit-grid`)+`-lyco-now-`+i,o=n?.gap??`16px`,s=`
       .${a} {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(${e.minItemWidth}, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(${n.minItemWidth}, 1fr));
         gap: ${o};
       }
-    `;return t`
-		<lyco-component name="AutoFitGrid">
+    `;return d(`AutoFitGrid`,e`
 			<style>
 				${s}
 			</style>
-			<div class="${a}">${n(r)}</div>
-		</lyco-component>
-	`}function j(e,n){if(n===void 0)return n=>j(e,n??[t``]);let i=e?.size??`32px`,a=e?.overlap??`-8px`,o=(e,n)=>t`
+			<div class="${a}">${t(r)}</div>
+		`)}function j(t,r){if(r===void 0)return n=>j(t,n??[e``]);let i=t?.size??`32px`,a=t?.overlap??`-8px`,o=(t,n)=>e`
 		<div
 			style="
               width: ${i};
@@ -403,15 +400,15 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
               box-sizing: content-box;
             "
 		>
-			${e}
+			${t}
 		</div>
-	`;return t`
+	`;return e`
 		<div style="display: flex; align-items: center;">
-			${r(n,o)}
+			${n(r,o)}
 		</div>
-	`}function M(e,r){if(r===void 0){let n=n=>M(e,n??t``);return n.html=(n,...r)=>M(e,t(n,...r)),n}let i=e?.position??`top-right`,a=e?.size??`16px`,o=e?.background??`red`,s=e?.color??`#fff`,[c,l,u,d]=[i.includes(`top`)?`0`:`auto`,i.includes(`right`)?`0`:`auto`,i.includes(`bottom`)?`0`:`auto`,i.includes(`left`)?`0`:`auto`];return t`
+	`}function M(n,r){if(r===void 0){let t=t=>M(n,t??e``);return t.html=(t,...r)=>M(n,e(t,...r)),t}let i=n?.position??`top-right`,a=n?.size??`16px`,o=n?.background??`red`,s=n?.color??`#fff`,[c,l,u,d]=[i.includes(`top`)?`0`:`auto`,i.includes(`right`)?`0`:`auto`,i.includes(`bottom`)?`0`:`auto`,i.includes(`left`)?`0`:`auto`];return e`
 		<div style="position: relative; display: inline-block;">
-			${n(r)}
+			${t(r)}
 			<div
 				style="
         position: absolute;
@@ -431,10 +428,10 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
         transform: translate(${d===`0`?`-50%`:`0`}, ${c===`0`?`-50%`:`0`});
       "
 			>
-				${e?.content??``}
+				${n?.content??``}
 			</div>
 		</div>
-	`}function N(e,n){if(n===void 0)return n=>N(e,n??[t``]);let i=e?.padding??`16px`,a=e?.borderRadius??`8px`,o=e?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,s=e?.background??`#fff`;return t`
+	`}function N(t,r){if(r===void 0)return n=>N(t,n??[e``]);let i=t?.padding??`16px`,a=t?.borderRadius??`8px`,o=t?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,s=t?.background??`#fff`;return e`
 		<div
 			style="
       background: ${s};
@@ -444,9 +441,9 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
       box-sizing: border-box;
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}function P(e,r){if(r===void 0){let n=n=>P(e,n??t``);return n.html=(n,...r)=>P(e,t(n,...r)),n}let i=e?.width?`width: ${e.width};`:``,a=e?.height?`height: ${e.height};`:``,o=e?.background?`background: ${e.background};`:``;return t`
+	`}function P(n,r){if(r===void 0){let t=t=>P(n,t??e``);return t.html=(t,...r)=>P(n,e(t,...r)),t}let i=n?.width?`width: ${n.width};`:``,a=n?.height?`height: ${n.height};`:``,o=n?.background?`background: ${n.background};`:``;return e`
 		<div
 			style="
       display: flex;
@@ -455,9 +452,9 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
       ${i} ${a} ${o}
     "
 		>
-			${n(r)}
+			${t(r)}
 		</div>
-	`}function F(e,n){if(n===void 0)return n=>F(e,n??[t``]);let i=e?.maxWidth??`1024px`,a=e?.padding??`0 16px`,o=e?.background?`background: ${e.background};`:``,s=e?.fullHeight?`height: 100%;`:``;return t`
+	`}function F(t,r){if(r===void 0)return n=>F(t,n??[e``]);let i=t?.maxWidth??`1024px`,a=t?.padding??`0 16px`,o=t?.background?`background: ${t.background};`:``,s=t?.fullHeight?`height: 100%;`:``;return e`
 		<div
 			style="
       width: 100%;
@@ -470,9 +467,9 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
       box-sizing: border-box;
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}function I(e){let n=e?.orientation??`horizontal`,r=e?.thickness??`1px`,i=e?.color??`#e0e0e0`,a=e?.margin??(n===`horizontal`?`8px 0`:`0 8px`),o=n===`horizontal`?`width: 100%; height: ${r}; background: ${i}; margin: ${a};`:`width: ${r}; height: 100%; background: ${i}; margin: ${a};`;return t`<div style="${o}"></div>`}function L(e,r){if(r===void 0){let n=n=>L(e,n??t``);return n.html=(n,...r)=>L(e,t(n,...r)),n}let i=e?.columns??4,a=e?.gap??`24px`,o=e?.background??`#f8f8f8`,s=e?.padding??`40px 16px`;return t`
+	`}function I(t){let n=t?.orientation??`horizontal`,r=t?.thickness??`1px`,i=t?.color??`#e0e0e0`,a=t?.margin??(n===`horizontal`?`8px 0`:`0 8px`),o=n===`horizontal`?`width: 100%; height: ${r}; background: ${i}; margin: ${a};`:`width: ${r}; height: 100%; background: ${i}; margin: ${a};`;return e`<div style="${o}"></div>`}function L(n,r){if(r===void 0){let t=t=>L(n,t??e``);return t.html=(t,...r)=>L(n,e(t,...r)),t}let i=n?.columns??4,a=n?.gap??`24px`,o=n?.background??`#f8f8f8`,s=n?.padding??`40px 16px`;return e`
 		<div
 			style="
       width: 100%;
@@ -488,30 +485,27 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
         gap: ${a};
       "
 			>
-				${n(r)}
+				${t(r)}
 			</div>
 			<div style="text-align: center; margin-top: 24px; color: #666;">
 				© ${new Date().getFullYear()} Your Company. All rights reserved.
 			</div>
 		</div>
-	`}function R(e,r){if(r===void 0){let n=n=>R(e,n??t``);return n.html=(n,...r)=>R(e,t(n,...r)),n}let i=e.defaultColumns??1,a=e.gap??`16px`,o=u.value,s=e.className??l(`GridBreakpoint::grid-breakpoint`)+`-lyco-now-${o}`,c=Object.entries(e.breakpoints).map(([e,t])=>`
-      @media ${e} {
-        .${s} { grid-template-columns: repeat(${t}, 1fr); }
-      }
-    `).join(`
-`);return t`
-		<lyco-component name="GridBreakpoint">
+	`}function R(n,r){if(r===void 0){let t=t=>R(n,t??e``);return t.html=(t,...r)=>R(n,e(t,...r)),t}let i=n.defaultColumns??1,a=n.gap??`16px`,o=u(`GridBreakpoint`),s=n.className??c(`GridBreakpoint::grid-breakpoint`)+`-lyco-now-`+o,l=Object.entries(n.breakpoints).map(([e,t])=>`@media`+e+`{
+`+s+`{ grid-template-columns: repeat(`+t+`, 1fr); }
+}`).join(`
+`),f=`
+	.${s} {
+	  display: grid;
+	  grid-template-columns: repeat(${i}, 1fr);
+	  gap: ${a};
+	}
+	${l}`;return d(`GridBreakpoint`,e`
 			<style>
-				.${s} {
-				  display: grid;
-				  grid-template-columns: repeat(${i}, 1fr);
-				  gap: ${a};
-				}
-				${c}
+				${f}
 			</style>
-			<div class="${s}">${n(r)}</div>
-		</lyco-component>
-	`}function z(e,n){if(n===void 0)return n=>z(e,n??[t``]);let i=e?.backgroundImage?`background-image: url('${e.backgroundImage}');`:``,a=e?.height??`400px`,o=e?.overlayColor??`rgba(0, 0, 0, 0.3)`;return t`
+			<div class="${s}">${t(r)}</div>
+		`)}function z(t,r){if(r===void 0)return n=>z(t,n??[e``]);let i=t?.backgroundImage?`background-image: url('${t.backgroundImage}');`:``,a=t?.height??`400px`,o=t?.overlayColor??`rgba(0, 0, 0, 0.3)`;return e`
 		<div
 			style="
       position: relative;
@@ -545,44 +539,43 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
         box-sizing: border-box;
       "
 			>
-				${r(n)}
+				${n(r)}
 			</div>
 		</div>
-	`}function B(e,r){if(r===void 0){let n=n=>B(e,n??t``);return n.html=(n,...r)=>B(e,t(n,...r)),n}let i=e?.breakpoint??`(max-width: 600px)`,a=e?.mode??`hide`,o=u.value,s=e?.className??l(`Hidden::hidden-container`)+`-lyco-now-${o}`,c=a===`hide`?`@media ${i} { .${s} { display: none !important; } }`:`@media ${i} { .${s} { display: block !important; } }
-       @media not ${i} { .${s} { display: none !important; } }`;return t`
-		<lyco-component name="Hidden">
+	`}function B(n,r){if(r===void 0){let t=t=>B(n,t??e``);return t.html=(t,...r)=>B(n,e(t,...r)),t}let i=n?.breakpoint??`(max-width: 600px)`,a=n?.mode??`hide`,o=u(`Hidden`),s=n?.className??c(`Hidden::hidden-container`)+`-lyco-now-`+o,l=a===`hide`?`@media ${i} { .${s} { display: none !important; } }`:`@media ${i} { .${s} { display: block !important; } }
+       @media not ${i} { .${s} { display: none !important; } }`,f=`
+	.${s} {
+	  display: block;
+	}
+	${l}`;return d(`Hidden`,e`
 			<style>
-				.${s} {
-				  display: block;
-				}
-				${c}
+				${f}
 			</style>
-			<div class="${s}">${n(r)}</div>
-		</lyco-component>
-	`}function V(e,n){let i=e?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,a=e?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,s=e?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,c=u.value,d=e?.className??l(`ListGroup::list-group`)+`-lyco-now-${c}`,f=(e,n,r,i)=>r?t` <li>${e}</li> `:e,p=n=>t`
-		<lyco-component name="ListGroup">
-			<style>
-				ul.${d} {
-				  list-style: none;
-				  margin: 0;
-				  padding: 0;
-				  ${i};
-				}
-				ul.${d} li {
-				  padding: 12px 16px;
-				  ${e?.bordered?`border-bottom: 1px solid #ddd`:``};
-				}
-				ul.${d} li:last-child {
-				  ${e?.bordered?`border-bottom: none`:``};
-				}
-				${a}
-				${s}
-			</style>
-			<ul class="${d}">
-				${r(n,f)}
-			</ul>
-		</lyco-component>
-	`;return o(n,p)}function H(e,n){if(n===void 0)return n=>H(e,n??[t``]);let i=e?.background??`rgba(0, 0, 0, 0.5)`,a=e?.zIndex??1e3,o=e?.fullScreen!==!1;return t`
+			<div class="${s}">${t(r)}</div>
+		`)}function V(t,r){let i=t?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,o=t?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,s=t?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,l=u(`ListGroup`),f=t?.className??c(`ListGroup::list-group`)+`-lyco-now-`+l,p=(t,n,r,i)=>r?e` <li>${t}</li> `:t,m=`
+	ul.${f} {
+	  list-style: none;
+	  margin: 0;
+	  padding: 0;
+	  ${i};
+	}
+	ul.${f} li {
+	  padding: 12px 16px;
+	  ${t?.bordered?`border-bottom: 1px solid #ddd`:``};
+	}
+	ul.${f} li:last-child {
+	  ${t?.bordered?`border-bottom: none`:``};
+	}
+	${o}
+	${s}
+	`,h=t=>d(`ListGroup`,e`
+				<style>
+					${m}
+				</style>
+				<ul class="${f}">
+					${n(t,p)}
+				</ul>
+			`);return a(r,h)}function H(t,r){if(r===void 0)return n=>H(t,n??[e``]);let i=t?.background??`rgba(0, 0, 0, 0.5)`,a=t?.zIndex??1e3,o=t?.fullScreen!==!1;return e`
 		<div
 			style="
       position: ${o?`fixed`:`absolute`};
@@ -594,9 +587,9 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
       align-items: center;
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}function U(e,r){if(r===void 0){let n=n=>U(e,n??t``);return n.html=(n,...r)=>U(e,t(n,...r)),n}let i=e?.width?`width: ${e.width};`:``,a=e?.height?`height: ${e.height};`:``,o=e?.background?`background: ${e.background};`:``;return t`
+	`}function U(n,r){if(r===void 0){let t=t=>U(n,t??e``);return t.html=(t,...r)=>U(n,e(t,...r)),t}let i=n?.width?`width: ${n.width};`:``,a=n?.height?`height: ${n.height};`:``,o=n?.background?`background: ${n.background};`:``;return e`
 		<div
 			style="
       position: relative;
@@ -604,27 +597,25 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
       overflow: hidden;
     "
 		>
-			${n(r)}
+			${t(r)}
 		</div>
-	`}function W(e){let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``;return t` <div style="${n} ${r}"></div> `}function G(e){let n=e?.type??`rect`,r=e?.width??`100%`,i=e?.height??`16px`,a=e?.borderRadius??`4px`,o=e?.animation!==!1,s=u.value,c=e?.className??l(`SkeletonLoader::skeleton-shimmer`)+`-lyco-now-${s}`,d=n===`circle`?`border-radius: 50%; width: ${r}; height: ${r}`:`border-radius: ${a}; width: ${r}; height: ${i}`;return t`
-		<lyco-component>
+	`}function W(t){let n=t?.width?`width: ${t.width};`:``,r=t?.height?`height: ${t.height};`:``;return e` <div style="${n} ${r}"></div> `}function G(t){let n=t?.type??`rect`,r=t?.width??`100%`,i=t?.height??`16px`,a=t?.borderRadius??`4px`,o=t?.animation!==!1,s=u(`SkeletonLoader`),l=t?.className??c(`SkeletonLoader::skeleton-shimmer`)+`-lyco-now-`+s,f=n===`circle`?`border-radius: 50%; width: ${r}; height: ${r}`:`border-radius: ${a}; width: ${r}; height: ${i}`;return d(`SkeletonLoader`,e`
 			<style>
 				${`
-            @keyframes ${c+`-shimmer`} {
-			  0% { background-color: #eee; }
-			  50% { background-color: #ddd; }
-			  100% { background-color: #eee; }
-			}    
-            `}
-				.${c} {
-				  ${d};
+	@keyframes ${l+`-shimmer`} {
+	  0% { background-color: #eee; }
+	  50% { background-color: #ddd; }
+	  100% { background-color: #eee; }
+	}    
+	`}
+				.${l} {
+				  ${f};
 				  background-color: #eee;
-				  ${o?`animation: ${c+`-shimmer`} 1.2s infinite ease-in-out`:``};
+				  ${o?`animation: ${l+`-shimmer`} 1.2s infinite ease-in-out`:``};
 				}
 			</style>
-			<div class="${c}"></div>
-		</lyco-component>
-	`}function K(){return t`<div style="flex: 1 1 auto;"></div>`}function q(e,r){if(r===void 0){let n=n=>q(e,n??t``);return n.html=(n,...r)=>q(e,t(n,...r)),n}let i=e?.top?`top: ${e.top};`:``,a=e?.bottom?`bottom: ${e.bottom};`:``,o=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``;return t`
+			<div class="${l}"></div>
+		`)}function K(){return e`<div style="flex: 1 1 auto;"></div>`}function q(n,r){if(r===void 0){let t=t=>q(n,t??e``);return t.html=(t,...r)=>q(n,e(t,...r)),t}let i=n?.top?`top: ${n.top};`:``,a=n?.bottom?`bottom: ${n.bottom};`:``,o=typeof n?.zIndex==`number`?`z-index: ${n.zIndex};`:``;return e`
 		<div
 			style="
       position: sticky;
@@ -632,52 +623,52 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
       ${o}
     "
 		>
-			${n(r)}
+			${t(r)}
 		</div>
-	`}function J(e,r){if(r===void 0){let n=n=>J(e,n??t``);return n.html=(n,...r)=>J(e,t(n,...r)),n}let i=u.value,a=e?.className??l(`Table::table`)+`-lyco-now-${i}`,o=e?.striped?`
+	`}function J(n,r){if(r===void 0){let t=t=>J(n,t??e``);return t.html=(t,...r)=>J(n,e(t,...r)),t}let i=u(`Table`),a=n?.className??c(`Table::table`)+`-lyco-now-${i}`,o=n?.striped?`
       .${a} tr:nth-child(even) { background: #f9f9f9; }
-    `:``,s=e?.hover?`
+    `:``,s=n?.hover?`
       .${a} tr:hover { background: #f1f1f1; }
-    `:``,c=e?.bordered?`
+    `:``,l=n?.bordered?`
       .${a}, .${a} th, .${a} td { border: 1px solid #ddd; }
-    `:``;return t`
-		<lyco-component name="Table">
+    `:``,f=`
+	/* 将表格包裹在带有 _className 的 div 里，使后续 CSS 作用于该 div 下的 table */
+	.${a} table {
+	  width: 100%;
+	  border-collapse: collapse;
+	}
+	.${a} th,
+	.${a} td {
+	  padding: 8px 12px;
+	  text-align: left;
+	}
+	${o}
+	${s}
+	${l}
+	`;return d(`Table`,e`
 			<style>
-				/* 将表格包裹在带有 _className 的 div 里，使后续 CSS 作用于该 div 下的 table */
-				.${a} table {
-				  width: 100%;
-				  border-collapse: collapse;
-				}
-				.${a} th,
-				.${a} td {
-				  padding: 8px 12px;
-				  text-align: left;
-				}
-				${o}
-				${s}
-				${c}
+				${f}
 			</style>
 
 			<div class="${a}">
 				<table>
-					${n(r)}
+					${t(r)}
 				</table>
 			</div>
-		</lyco-component>
-	`}function Y(e,n){let i=e?.direction??`row`;return n===void 0?n=>Y(e,n??t``):t`
+		`)}function Y(t,r){let i=t?.direction??`row`;return r===void 0?n=>Y(t,n??e``):e`
 		<div
 			style="
       display: flex;
       flex-direction: ${i};
       flex-wrap: wrap;
-      ${e?.gap?`gap: ${e.gap};`:``}
-      ${e?.align?`align-items: ${e.align};`:``}
-      ${e?.justify?`justify-content: ${e.justify};`:``}
+      ${t?.gap?`gap: ${t.gap};`:``}
+      ${t?.align?`align-items: ${t.align};`:``}
+      ${t?.justify?`justify-content: ${t.justify};`:``}
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}function X(e,n){let i=e?.width?`width: ${e.width};`:``,a=e?.height?`height: ${e.height};`:``,o=e?.background?`background: ${e.background};`:``;if(n===void 0)return n=>X(e,n??[t``]);let s=`flex-start`,c=`flex-start`;switch(e?.align){case`top-right`:s=`flex-end`,c=`flex-start`;break;case`center`:s=`center`,c=`center`;break;case`bottom-left`:s=`flex-start`,c=`flex-end`;break;case`bottom-right`:s=`flex-end`,c=`flex-end`;break;default:s=`flex-start`,c=`flex-start`}return t`
+	`}function X(t,r){let i=t?.width?`width: ${t.width};`:``,a=t?.height?`height: ${t.height};`:``,o=t?.background?`background: ${t.background};`:``;if(r===void 0)return n=>X(t,n??[e``]);let s=`flex-start`,c=`flex-start`;switch(t?.align){case`top-right`:s=`flex-end`,c=`flex-start`;break;case`center`:s=`center`,c=`center`;break;case`bottom-left`:s=`flex-start`,c=`flex-end`;break;case`bottom-right`:s=`flex-end`,c=`flex-end`;break;default:s=`flex-start`,c=`flex-start`}return e`
 		<div
 			style="
       position: relative;
@@ -687,7 +678,7 @@ import{LitElement as e,html as t}from"lit";function n(e){return e?typeof e==`fun
       ${i} ${a} ${o}
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
 	`}export{D as AbsoluteBox,O as AcrylicBar,k as AspectRatio,A as AutoFitGrid,j as AvatarStack,M as Badge,N as Card,P as Center,p as Column,S as ColumnSplit,F as Container,I as Divider,m as Flex,h as FlowItem,L as FooterLayout,g as Grid,R as GridBreakpoint,_ as GridCol,v as GridItem,y as GridRow,z as HeroSection,B as Hidden,f as LightboxContainer,V as ListGroup,H as Overlay,U as PositionContainer,b as Row,C as RowSplit,w as ScrollBar,T as SideBarContainer,W as SizedBox,G as SkeletonLoader,K as Spacer,q as Sticky,E as Swiper,J as Table,x as WaterFlow,Y as Wrap,X as ZStack};
 //# sourceMappingURL=index.es.js.map