lyco 1.0.1 → 1.2.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`function`?t():t:e``}function r(t,r){let i=r??(e=>e);if(t===void 0)return e``;if(Array.isArray(t))return t.map((e,t)=>i(n(e),t));if(typeof t!=`function`)return i(t);let a=t();return Array.isArray(a)?a.map((e,t)=>i(n(e),t)):i(n(a))}function i(t,r){let i=t?.fadeBg??`rgba(0,0,0,0.7)`,a=t?.zIndex??2e3;return e`
+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}function o(n,r){if(r===void 0){let t=t=>o(n,t??e``);return t.html=(t,...r)=>o(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,9 +10,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       align-items: center;
     "
 		>
-			${n(r)}
+			${t(r)}
 		</div>
-	`}function a(t,n){return e`
+	`}function s(t,r){return r===void 0?n=>s(t,n??[e``]):e`
 		<div
 			style="
       display: flex;
@@ -20,25 +20,25 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       ${t?.space?`gap: ${t.space};`:``}
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}function o(t,r){let i=t?.direction??`row`;return e`
+	`}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?.direction??`row`;return e`
 		<div
 			style="
       display: flex;
       flex-direction: ${i};
-      ${t?.justify?`justify-content: ${t.justify};`:``}
-      ${t?.align?`align-items: ${t.align};`:``}
-      ${t?.gap?`gap: ${t.gap};`:``}
+      ${n?.justify?`justify-content: ${n.justify};`:``}
+      ${n?.align?`align-items: ${n.align};`:``}
+      ${n?.gap?`gap: ${n.gap};`:``}
     "
 		>
-			${n(r)}
+			${t(r)}
 		</div>
-	`}function s(t,r){return e`
+	`}function l(n){return e`
 		<div style="break-inside: avoid; margin-bottom: 16px;">
-			${n(r)}
+			${t(n)}
 		</div>
-	`}function c(t,n){let i=t?.columns??1;return e`
+	`}function u(t,r){if(r===void 0)return n=>u(t,n??[e``]);let i=t?.columns??1;return e`
 		<div
 			style="
       display: grid;
@@ -46,52 +46,71 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       ${t?.gap?`gap: ${t.gap};`:``}
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}function l(t,r){return e`
+	`}function d(n,r){if(r===void 0){let t=t=>d(n,t??e``);return t.html=(t,...r)=>d(n,e(t,...r)),t}return e`
 		<div
 			style="
       display: grid;
       grid-auto-flow: column;
-      ${t?.gap?`column-gap: ${t.gap};`:``}
+      ${n?.gap?`column-gap: ${n.gap};`:``}
     "
 		>
-			${n(r)}
+			${t(r)}
 		</div>
-	`}function u(t,r){return e`
-		<div style="${t?.span?`grid-column: span ${t.span};`:``}">
-			${n(r)}
+	`}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}return e`
+		<div style="${n?.span?`grid-column: span ${n.span};`:``}">
+			${t(r)}
 		</div>
-	`}function d(t,r){return e`
+	`}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}return e`
 		<div
 			style="
       display: grid;
       grid-auto-flow: row;
-      ${t?.gap?`row-gap: ${t.gap};`:``}
+      ${n?.gap?`row-gap: ${n.gap};`:``}
     "
 		>
-			${n(r)}
+			${t(r)}
 		</div>
-	`}function f(t,n){return e`
+	`}function m(t,r){return e`
 		<div
 			style="
       display: flex;
       flex-direction: row;
       ${t?.space?`gap: ${t.space};`:``}
-    "
-		>
-			${r(n)}
-		</div>
-	`}function p(t,r){let i=t?.columnCount??3,a=t?.gap??`16px`;return e`
-		<div
-			style="
-      column-count: ${i};
-      column-gap: ${a};
     "
 		>
 			${n(r)}
 		</div>
-	`}function m(t,r){let i=t?.gap??`0px`,a=t?.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=n(r);return e`
+	`}function h(n,i){if(i===void 0){let t=t=>h(n,t??e``);return t.html=(t,...r)=>h(n,e(t,...r)),t}let a=n?.columnCount??3,o=n?.gap??`16px`,s=r(`waterflow`);return e`
+		<style>
+			/* 使用 CSS 类来控制多列布局 */
+			.${s} {
+				column-count: ${a};
+				column-gap: ${typeof o==`number`?`${o}px`:o};
+			}
+			/* 子元素如果是块级元素，需要让它们适应多列流式布局 */
+			.${s} > * {
+				display: inline-block;
+				width: 100%;
+			}
+		</style>
+
+		<div class="${s}">${t(i)}</div>
+	`}h().html`
+<div>
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
+  <div>7</div>
+  <div>8</div>
+  <div>9</div>
+  <div>10</div>
+</div>
+`;function g(n,r){if(r===void 0){let t=t=>g(n,t??e``);return t.html=(t,...r)=>g(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;
@@ -104,7 +123,7 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 			<div style="flex: 0 0 ${a}; overflow: auto;">${o}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${s}</div>
 		</div>
-	`}function h(t,r){let i=t?.gap??`0px`,a=t?.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=n(r);return e`
+	`}function _(n,r){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;
@@ -117,28 +136,28 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 			<div style="flex: 0 0 ${a}; overflow: auto;">${o}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${s}</div>
 		</div>
-	`}function g(t,r){let i=t?.direction??`vertical`,a=t?.height??`100%`,o=t?.width??`100%`,s=t?.customCss??``,c=i===`horizontal`?`overflow-x: auto; overflow-y: hidden`:`overflow-y: auto; overflow-x: hidden`;return e`
+	`}function v(n,i){if(i===void 0){let t=t=>v(n,t??e``);return t.html=(t,...r)=>v(n,e(t,...r)),t}let a=n?.direction??`vertical`,o=n?.height??`100%`,s=n?.width??`100%`,c=n?.customCss??``,l=n?.className??r(`scrollbar-container`),u=a===`horizontal`?`overflow-x: auto; overflow-y: hidden`:`overflow-y: auto; overflow-x: hidden`;return e`
 		<style>
-			.scrollbar-container {
-			  ${c};
-			  width: ${o};
-			  height: ${a};
+			.${l} {
+			  ${u};
+			  width: ${s};
+			  height: ${o};
 			}
-			.scrollbar-container::-webkit-scrollbar {
+			.${l}::-webkit-scrollbar {
 			  width: 8px;
 			  height: 8px;
 			}
-			.scrollbar-container::-webkit-scrollbar-thumb {
+			.${l}::-webkit-scrollbar-thumb {
 			  background-color: rgba(0, 0, 0, 0.2);
 			  border-radius: 4px;
 			}
-			.scrollbar-container::-webkit-scrollbar-track {
+			.${l}::-webkit-scrollbar-track {
 			  background: rgba(0, 0, 0, 0.05);
 			}
-			${s}
+			${c}
 		</style>
-		<div class="scrollbar-container">${n(r)}</div>
-	`}function _(t,n){let i=t?.sidebarWidth??`240px`,a=t?.sidebarPosition??`left`,o=t?.gap??`0px`,s=e``,c=e``;if(typeof n==`function`){var l;let t=(l=n.call)?.call(n,null)??[];s=t[0]??e``,c=t[1]??e``}else c=r(n);return e`
+		<div class="${l}">${t(i)}</div>
+	`}function y(t,r){if(r===void 0)return n=>y(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;
@@ -151,48 +170,177 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 			<div style="flex: 0 0 ${i}; overflow: auto;">${s}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${c}</div>
 		</div>
-	`}function v(n,r){var i;let a=n?.gap??`8px`,o=n?.snapType??`mandatory`,s=n?.height??`auto`,c=n?.width??`100%`,l=[];return typeof r==`function`?l=(i=r.call)?.call(r,null)??[]:r&&(l=[r]),e`
+	`}function b(t={},n){if(n===void 0)return n=>b(t,n??[e``]);let{gap:i=`8px`,snapType:a=`mandatory`,height:o=`auto`,width:s=`100%`,className:c=r(`swiper`),direction:l=`x`,scrollBehavior:u=`smooth`,align:d=`start`,showNavigation:f=!0,navigationPosition:p=`inside`,showPagination:m=!0,paginationType:h=`dots`,autoPlay:g=!1,interval:_=3e3,loop:v=!1,touchEnabled:y=!0,mouseWheel:x=!1,onSlideChange:S}=t,C=c,w=C+`-container`,T=C+`-slide`,E=C+`-navigation`,D=C+`-pagination`,O;O=n?typeof n==`function`?n():n:[];let k=O.length,[A,j]=(()=>{let e={value:0};return[()=>e.value,t=>{let n=Math.max(0,Math.min(t,k-1));e.value!==n&&(e.value=n,S?.(n))}]})(),M=e=>{let t=typeof document<`u`?document.querySelector(`.${w}`):null;if(!t)return;let n=t.querySelectorAll(`.${T}`);if(e<0||e>=n.length)return;let r=n[e],i=r.getBoundingClientRect(),a=t.getBoundingClientRect(),o;l===`x`?(o=r.offsetLeft-t.offsetLeft,d===`center`?o-=(a.width-i.width)/2:d===`end`&&(o-=a.width-i.width),t.scrollTo({left:o,behavior:u})):(o=r.offsetTop-t.offsetTop,d===`center`?o-=(a.height-i.height)/2:d===`end`&&(o-=a.height-i.height),t.scrollTo({top:o,behavior:u})),j(e)},N=()=>{let e=A()+1>=k?v?0:A():A()+1;M(e)},P=()=>{let e=A()-1<0?v?k-1:A():A()-1;M(e)},F=()=>{let e=typeof document<`u`?document.querySelector(`.${w}`):null;if(!e)return;let t=e.querySelectorAll(`.${T}`),n=0,r=1/0;t.forEach((t,i)=>{let a=t.getBoundingClientRect(),o=e.getBoundingClientRect(),s;if(l===`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)}),j(n)},I=e=>{if(!y)return;let t=e.touches[0],n=e.currentTarget;n.dataset.touchStartX=t.clientX.toString(),n.dataset.touchStartY=t.clientY.toString()},L=e=>{if(!y)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)||l===`x`)&&e.preventDefault()},R=e=>{if(!y)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&&(l===`x`?a>0?P():N():o>0?P():N()),delete t.dataset.touchStartX,delete t.dataset.touchStartY},z=e=>{x&&(e.preventDefault(),e.deltaY>0?N():P())},B=e=>{if(!g||!e)return;let t,n=()=>{t=setInterval(N,_)},r=()=>{clearInterval(t)};return e.addEventListener(`mouseenter`,r),e.addEventListener(`mouseleave`,n),n(),()=>{clearInterval(t),e.removeEventListener(`mouseenter`,r),e.removeEventListener(`mouseleave`,n)}},V=()=>{let e=typeof document<`u`?document.querySelector(`.${w}`):null;if(!e)return;let t=[];e.addEventListener(`scroll`,F),t.push(()=>e.removeEventListener(`scroll`,F)),y&&(e.addEventListener(`touchstart`,I),e.addEventListener(`touchmove`,L,{passive:!1}),e.addEventListener(`touchend`,R),t.push(()=>e.removeEventListener(`touchstart`,I)),t.push(()=>e.removeEventListener(`touchmove`,L)),t.push(()=>e.removeEventListener(`touchend`,R))),x&&(e.addEventListener(`wheel`,z,{passive:!1}),t.push(()=>e.removeEventListener(`wheel`,z)));let n=B(e);return n&&t.push(n),M(0),()=>t.forEach(e=>e())};typeof window<`u`&&typeof document<`u`&&setTimeout(V,0);let H=e`
+		<div class="${D}">
+			${Array.from({length:k},(t,n)=>e`
+					<button
+						class="${n===A()?`active`:``}"
+						@click=${()=>M(n)}
+					></button>
+				`)}
+		</div>
+	`,U=e`
+		<div class="${D} fraction">
+			<span class="current">${A()+1}</span>
+			<span class="separator">/</span>
+			<span class="total">${k}</span>
+		</div>
+	`,W=e`
+		<div class="${D} progressbar">
+			<div
+				class="progress"
+				style="width: ${k>1?A()/(k-1)*100:0}%"
+			></div>
+		</div>
+	`,G=e`
+		<div class="${E}">
+			<button class="prev" @click=${P}>◀</button>
+			<button class="next" @click=${N}>▶</button>
+		</div>
+	`;return e`
 		<style>
-			.swiper-container {
-				width: ${c};
-				height: ${s};
-				overflow-x: auto;
-				overflow-y: hidden;
-				display: flex;
-				scroll-snap-type: x ${o};
+			.${C} {
+				position: relative;
+				overflow: hidden;
+				width: ${s};
+				height: ${o};
+			}
+
+			.${w} {
+				width: 100%;
+				height: 100%;
+				overflow: auto;
+				scroll-snap-type: ${l+` `+a};
 				-webkit-overflow-scrolling: touch;
-				gap: ${t(a)};
+				scroll-behavior: ${u};
+				gap: ${i};
+				display: flex;
+				flex-direction: ${l===`x`?`row`:`column`};
 			}
-			.swiper-slide {
-				scroll-snap-align: start;
+
+			.${T} {
+				scroll-snap-align: ${d};
 				flex-shrink: 0;
 			}
+
+			.${E} {
+				position: absolute;
+				top: 50%;
+				left: 0;
+				right: 0;
+				transform: translateY(-50%);
+				display: flex;
+				justify-content: space-between;
+				pointer-events: none;
+				padding: ${p===`outside`?`0 1rem`:`0 0.5rem`};
+			}
+
+			.${E} 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;
+			}
+
+			.${E} button:hover {
+				background-color: rgba(0, 0, 0, 0.8);
+			}
+
+			.${D} {
+				position: absolute;
+				bottom: 1rem;
+				left: 0;
+				right: 0;
+				display: flex;
+				justify-content: center;
+				gap: 0.5rem;
+				align-items: center;
+			}
+			.${D} 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;
+			}
+			.${D} button.active {
+				background-color: white;
+				transform: scale(1.2);
+			}
+
+			.${D}.fraction {
+				position: absolute;
+				bottom: 1rem;
+				left: 50%;
+				transform: translateX(-50%);
+				color: white;
+				font-size: 1rem;
+				display: flex;
+				align-items: center;
+				gap: 0.25rem;
+			}
+
+			.${D}.progressbar {
+				position: absolute;
+				bottom: 0.5rem;
+				left: 0;
+				right: 0;
+				height: 0.25rem;
+				background-color: rgba(255, 255, 255, 0.2);
+			}
+			.${D}.progressbar .progress {
+				height: 100%;
+				background-color: white;
+				transition: width 0.3s;
+			}
 		</style>
-		<div class="swiper-container">
-			${l.map(t=>e` <div class="swiper-slide">${t}</div> `)}
+
+		<div class="${C}">
+			<div class="${w}">
+				${O.map((t,n)=>e`
+						<div class="${T} --slide-${n}" key=${n}>
+							${t}
+						</div>
+					`)}
+			</div>
+
+			${f?G:null}
+			${m&&h===`dots`?H:null}
+			${m&&h===`fraction`?U:null}
+			${m&&h===`progressbar`?W:null}
 		</div>
-	`}function y(t,r){let i=t?.top?`top: ${t.top};`:``,a=t?.right?`right: ${t.right};`:``,o=t?.bottom?`bottom: ${t.bottom};`:``,s=t?.left?`left: ${t.left};`:``,c=t?.width?`width: ${t.width};`:``,l=t?.height?`height: ${t.height};`:``,u=typeof t?.zIndex==`number`?`z-index: ${t.zIndex};`:``;return e`
-		<div
-			style="
+	`}function x(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=>e`
+			<div
+				style="
       position: absolute;
-      ${i} ${a} ${o} ${s}
-      ${c} ${l}
-      ${u}
+      ${a} ${o} ${s} ${c}
+      ${l} ${u}
+      ${d}
     "
-		>
-			${n(r)}
-		</div>
-	`}function b(t,n){let i=t?.width??`300px`,a=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;return e`
-		<div
-			style="
+			>
+				${t(n)}
+			</div>
+		`;return i(r,f)}function S(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: ${o};
       bottom: ${s};
       left: ${c};
       right: ${l};
       ${u}
-      width: ${i};
-      height: ${a};
+      width: ${r};
+      height: ${i};
       background: ${d};
       backdrop-filter: blur(${f});
       -webkit-backdrop-filter: blur(${f});
@@ -203,10 +351,10 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       display: flex;
       flex-direction: column;
     "
-		>
-			${r(n)}
-		</div>
-	`}function x(t,n){let i=`${100/t.ratio}%`,a=t.maxWidth?`max-width: ${t.maxWidth};`:``,o=t.background?`background: ${t.background};`:``,s=t.overflow??`hidden`;return e`
+			>
+				${t}
+			</div>
+		`;return a(n,void 0,g)}function C(t,r){if(r===void 0)return n=>C(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;
@@ -226,20 +374,20 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
         height: 100%;
       "
 			>
-				${r(n)}
+				${n(r)}
 			</div>
 		</div>
-	`}function S(t,r){let i=t?.gap??`16px`;return e`
+	`}function w(n,r){if(r===void 0){let t=e=>w(n,e);return t.html=(t,...r)=>w(n,e(t,...r)),t}let i=n?.gap??`16px`;return e`
 		<div
 			style="
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(${t.minItemWidth}, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(${n.minItemWidth}, 1fr));
       gap: ${i};
     "
 		>
-			${n(r)}
+			${t(r)}
 		</div>
-	`}function C(t,n){let i=t?.size??`32px`,a=t?.overlap??`-8px`,o=(t,n)=>e`
+	`}function T(t,r){if(r===void 0)return n=>T(t,n??[e``]);let i=t?.size??`32px`,a=t?.overlap??`-8px`,o=(t,n)=>e`
 		<div
 			style="
               width: ${i};
@@ -255,11 +403,11 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 		</div>
 	`;return e`
 		<div style="display: flex; align-items: center;">
-			${r(n,o)}
+			${n(r,o)}
 		</div>
-	`}function w(t,r){let i=t?.position??`top-right`,a=t?.size??`16px`,o=t?.background??`red`,s=t?.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`
+	`}function E(n,r){if(r===void 0){let t=t=>E(n,t??e``);return t.html=(t,...r)=>E(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;
@@ -279,10 +427,10 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
         transform: translate(${d===`0`?`-50%`:`0`}, ${c===`0`?`-50%`:`0`});
       "
 			>
-				${t?.content??``}
+				${n?.content??``}
 			</div>
 		</div>
-	`}function T(t,n){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`
+	`}function D(t,r){if(r===void 0)return n=>D(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};
@@ -292,9 +440,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       box-sizing: border-box;
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}function E(t,r){let i=t?.width?`width: ${t.width};`:``,a=t?.height?`height: ${t.height};`:``,o=t?.background?`background: ${t.background};`:``;return e`
+	`}function O(n,r){if(r===void 0){let t=t=>O(n,t??e``);return t.html=(t,...r)=>O(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;
@@ -303,9 +451,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       ${i} ${a} ${o}
     "
 		>
-			${n(r)}
+			${t(r)}
 		</div>
-	`}function D(t,n){let i=t?.maxWidth??`1024px`,a=t?.padding??`0 16px`,o=t?.background?`background: ${t.background};`:``,s=t?.fullHeight?`height: 100%;`:``;return e`
+	`}function k(t,r){if(r===void 0)return n=>k(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%;
@@ -318,9 +466,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       box-sizing: border-box;
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}function O(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 k(t,r){let i=t?.columns??4,a=t?.gap??`24px`,o=t?.background??`#f8f8f8`,s=t?.padding??`40px 16px`;return e`
+	`}function A(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 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=n?.columns??4,a=n?.gap??`24px`,o=n?.background??`#f8f8f8`,s=n?.padding??`40px 16px`;return e`
 		<div
 			style="
       width: 100%;
@@ -336,28 +484,28 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
         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 A(t,r){let i=t.defaultColumns??1,a=t.gap??`16px`,o=Object.entries(t.breakpoints).map(([e,t])=>`
+	`}function M(n,i){if(i===void 0){let t=t=>M(n,t??e``);return t.html=(t,...r)=>M(n,e(t,...r)),t}let a=n.defaultColumns??1,o=n.gap??`16px`,s=n.className??r(`grid-breakpoint`),c=Object.entries(n.breakpoints).map(([e,t])=>`
       @media ${e} {
-        .grid-breakpoint { grid-template-columns: repeat(${t}, 1fr); }
+        .${s} { grid-template-columns: repeat(${t}, 1fr); }
       }
     `).join(`
 `);return e`
 		<style>
-			.grid-breakpoint {
+			.${s} {
 			  display: grid;
-			  grid-template-columns: repeat(${i}, 1fr);
-			  gap: ${a};
+			  grid-template-columns: repeat(${a}, 1fr);
+			  gap: ${o};
 			}
-			${o}
+			${c}
 		</style>
-		<div class="grid-breakpoint">${n(r)}</div>
-	`}function j(t,n){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 class="${s}">${t(i)}</div>
+	`}function N(t,r){if(r===void 0)return n=>N(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;
@@ -391,40 +539,40 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
         box-sizing: border-box;
       "
 			>
-				${r(n)}
+				${n(r)}
 			</div>
 		</div>
-	`}function M(t,r){let i=t?.breakpoint??`(max-width: 600px)`,a=t?.mode??`hide`,o=a===`hide`?`@media ${i} { .hidden-container { display: none !important; } }`:`@media ${i} { .hidden-container { display: block !important; } }
-       @media not ${i} { .hidden-container { display: none !important; } }`;return e`
+	`}function P(n,i){if(i===void 0){let t=t=>P(n,t??e``);return t.html=(t,...r)=>P(n,e(t,...r)),t}let a=n?.breakpoint??`(max-width: 600px)`,o=n?.mode??`hide`,s=n?.className??r(`hidden-container`),c=o===`hide`?`@media ${a} { .${s} { display: none !important; } }`:`@media ${a} { .${s} { display: block !important; } }
+       @media not ${a} { .${s} { display: none !important; } }`;return e`
 		<style>
-			.hidden-container {
+			.${s} {
 			  display: block;
 			}
-			${o}
+			${c}
 		</style>
-		<div class="hidden-container">${n(r)}</div>
-	`}function N(t,r){let i=t?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,a=t?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,o=t?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``;return e`
+		<div class="${s}">${t(i)}</div>
+	`}function F(t,i){let o=t?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,s=t?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,c=t?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,l=t?.className??r(`list-group`),u=(t,n,r,i)=>r?e` <li>${t}</li> `:t,d=r=>e`
 		<style>
-			ul.list-group {
+			ul.${l} {
 			  list-style: none;
 			  margin: 0;
 			  padding: 0;
-			  ${i};
+			  ${o};
 			}
-			ul.list-group li {
+			ul.${l} li {
 			  padding: 12px 16px;
 			  ${t?.bordered?`border-bottom: 1px solid #ddd`:``};
 			}
-			ul.list-group li:last-child {
+			ul.${l} li:last-child {
 			  ${t?.bordered?`border-bottom: none`:``};
 			}
-			${a}
-			${o}
+			${s}
+			${c}
 		</style>
-		<ul class="list-group">
-			${n(r)}
+		<ul class="${l}">
+			${n(r,u)}
 		</ul>
-	`}function P(t,n){let i=t?.background??`rgba(0, 0, 0, 0.5)`,a=t?.zIndex??1e3,o=t?.fullScreen!==!1;return e`
+	`;return a(i,d)}function I(t,r){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`};
@@ -436,9 +584,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       align-items: center;
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}function F(t,r){let i=t?.width?`width: ${t.width};`:``,a=t?.height?`height: ${t.height};`:``,o=t?.background?`background: ${t.background};`:``;return e`
+	`}function L(n,r){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;
@@ -446,25 +594,25 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       overflow: hidden;
     "
 		>
-			${n(r)}
+			${t(r)}
 		</div>
-	`}function I(t){let n=t?.width?`width: ${t.width};`:``,r=t?.height?`height: ${t.height};`:``;return e` <div style="${n} ${r}"></div> `}function L(t){let n=t?.type??`rect`,r=t?.width??`100%`,i=t?.height??`16px`,a=t?.borderRadius??`4px`,o=t?.animation!==!1,s=n===`circle`?`border-radius: 50%; width: ${r}; height: ${r}`:`border-radius: ${a}; width: ${r}; height: ${i}`;return e`
+	`}function R(t){let n=t?.width?`width: ${t.width};`:``,r=t?.height?`height: ${t.height};`:``;return e` <div style="${n} ${r}"></div> `}function z(t){let n=t?.type??`rect`,i=t?.width??`100%`,a=t?.height??`16px`,o=t?.borderRadius??`4px`,s=t?.animation!==!1,c=t?.className??r(`skeleton-shimmer`),l=n===`circle`?`border-radius: 50%; width: ${i}; height: ${i}`:`border-radius: ${o}; width: ${i}; height: ${a}`;return e`
 		<style>
 			${`
-            @keyframes skeleton-shimmer {
+            @keyframes ${c+`-shimmer`} {
 			  0% { background-color: #eee; }
 			  50% { background-color: #ddd; }
 			  100% { background-color: #eee; }
 			}    
             `}
-			.skeleton {
-			  ${s};
+			.${c} {
+			  ${l};
 			  background-color: #eee;
-			  ${o?`animation: skeleton-shimmer 1.2s infinite ease-in-out`:``};
+			  ${s?`animation: ${c+`-shimmer`} 1.2s infinite ease-in-out`:``};
 			}
 		</style>
-		<div class="skeleton"></div>
-	`}function R(){return e`<div style="flex: 1 1 auto;"></div>`}function z(t,r){let i=t?.top?`top: ${t.top};`:``,a=t?.bottom?`bottom: ${t.bottom};`:``,o=typeof t?.zIndex==`number`?`z-index: ${t.zIndex};`:``;return e`
+		<div class="${c}"></div>
+	`}function B(){return e`<div style="flex: 1 1 auto;"></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}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;
@@ -472,32 +620,37 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       ${o}
     "
 		>
-			${n(r)}
+			${t(r)}
 		</div>
-	`}function B(t,r){let i=t?.striped?`
-    tr:nth-child(even) { background: #f9f9f9; }
-  `:``,a=t?.hover?`
-    tr:hover { background: #f1f1f1; }
-  `:``,o=t?.bordered?`
-      table, th, td { border: 1px solid #ddd; }
+	`}function H(n,i){if(i===void 0){let t=t=>H(n,t??e``);return t.html=(t,...r)=>H(n,e(t,...r)),t}let a=n?.className??r(`table`),o=n?.striped?`
+      .${a} tr:nth-child(even) { background: #f9f9f9; }
+    `:``,s=n?.hover?`
+      .${a} tr:hover { background: #f1f1f1; }
+    `:``,c=n?.bordered?`
+      .${a}, .${a} th, .${a} td { border: 1px solid #ddd; }
     `:``;return e`
 		<style>
-			table {
+			/* 将表格包裹在带有 _className 的 div 里，使后续 CSS 作用于该 div 下的 table */
+			.${a} table {
 			  width: 100%;
 			  border-collapse: collapse;
 			}
-			th, td {
+			.${a} th,
+			.${a} td {
 			  padding: 8px 12px;
 			  text-align: left;
 			}
-			${i}
-			${a}
 			${o}
+			${s}
+			${c}
 		</style>
-		<table>
-			${n(r)}
-		</table>
-	`}function V(t,n){let i=t?.direction??`row`;return e`
+
+		<div class="${a}">
+			<table>
+				${t(i)}
+			</table>
+		</div>
+	`}function U(t,r){let i=t?.direction??`row`;return r===void 0?n=>U(t,n??e``):e`
 		<div
 			style="
       display: flex;
@@ -508,9 +661,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       ${t?.justify?`justify-content: ${t.justify};`:``}
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}function H(t,n){let i=t?.width?`width: ${t.width};`:``,a=t?.height?`height: ${t.height};`:``,o=t?.background?`background: ${t.background};`:``,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`
+	`}function W(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=>W(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;
@@ -520,7 +673,7 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       ${i} ${a} ${o}
     "
 		>
-			${r(n)}
+			${n(r)}
 		</div>
-	`}export{y as AbsoluteBox,b as AcrylicBar,x as AspectRatio,S as AutoFitGrid,C as AvatarStack,w as Badge,T as Card,E as Center,a as Column,m as ColumnSplit,D as Container,O as Divider,o as Flex,s as FlowItem,k as FooterLayout,c as Grid,A as GridBreakpoint,l as GridCol,u as GridItem,d as GridRow,j as HeroSection,M as Hidden,i as LightboxContainer,N as ListGroup,P as Overlay,F as PositionContainer,f as Row,h as RowSplit,g as ScrollBar,_ as SideBarContainer,I as SizedBox,L as SkeletonLoader,R as Spacer,z as Sticky,v as Swiper,B as Table,p as WaterFlow,V as Wrap,H as ZStack};
+	`}export{x as AbsoluteBox,S as AcrylicBar,C as AspectRatio,w as AutoFitGrid,T as AvatarStack,E as Badge,D as Card,O as Center,s as Column,g as ColumnSplit,k as Container,A as Divider,c as Flex,l as FlowItem,j as FooterLayout,u as Grid,M as GridBreakpoint,d as GridCol,f as GridItem,p as GridRow,N as HeroSection,P as Hidden,o as LightboxContainer,F as ListGroup,I as Overlay,L as PositionContainer,m as Row,_ as RowSplit,v as ScrollBar,y as SideBarContainer,R as SizedBox,z as SkeletonLoader,B as Spacer,V as Sticky,b as Swiper,H as Table,h as WaterFlow,U as Wrap,W as ZStack};
 //# sourceMappingURL=index.es.js.map