lyco 1.0.0 → 1.0.2

package/README.md

@@ -1,9 +1,5 @@
 # Lyco
 
-<p align="center">
-    <a href="./README_EN.md"> English </a> | <span> 简体中文 </span>
-</p>
-
 ## 基于 Lit 的纯 CSS 布局渲染函数库
 
 `Lyco` 是一个基于 [Lit](https://lit.dev) 构建的轻量级 CSS 布局库，提供了多种常用的布局组件（如 Row, Column, Flex, Grid 等），帮助开发者更高效地构建响应式网页布局。

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=s(require(`lit`));function l(e){return e?typeof e==`function`?e():e:c.html``}function u(e,t){let n=e?.fadeBg??`rgba(0,0,0,0.7)`,r=e?.zIndex??2e3;return c.html`
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=s(require(`lit`));function l(e){return e?typeof e==`function`?e():e:c.html``}function u(e,t){let n=t??(e=>e);if(e===void 0)return c.html``;if(Array.isArray(e))return e.map((e,t)=>n(l(e),t));if(typeof e!=`function`)return n(e);let r=e();return Array.isArray(r)?r.map((e,t)=>n(l(e),t)):n(l(r))}function d(e){let t=Math.random().toString(36).substring(2,15);return e?`lyco-${e}-${t}`:`lyco-${t}`}function f(e,t){let n=e?.fadeBg??`rgba(0,0,0,0.7)`,r=e?.zIndex??2e3;return c.html`
 		<div
 			style="
       position: fixed;
@@ -12,7 +12,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function d(e,t){return c.html`
+	`}function p(e,t){return c.html`
 		<div
 			style="
       display: flex;
@@ -20,9 +20,9 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
       ${e?.space?`gap: ${e.space};`:``}
     "
 		>
-			${l(t)}
+			${u(t)}
 		</div>
-	`}function f(e,t){let n=e?.direction??`row`;return c.html`
+	`}function m(e,t){let n=e?.direction??`row`;return c.html`
 		<div
 			style="
       display: flex;
@@ -34,11 +34,11 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function p(e,t){return c.html`
+	`}function h(e,t){return c.html`
 		<div style="break-inside: avoid; margin-bottom: 16px;">
 			${l(t)}
 		</div>
-	`}function m(e,t){let n=e?.columns??1;return c.html`
+	`}function g(e,t){let n=e?.columns??1;return c.html`
 		<div
 			style="
       display: grid;
@@ -46,9 +46,9 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
       ${e?.gap?`gap: ${e.gap};`:``}
     "
 		>
-			${l(t)}
+			${u(t)}
 		</div>
-	`}function h(e,t){return c.html`
+	`}function _(e,t){return c.html`
 		<div
 			style="
       display: grid;
@@ -58,11 +58,11 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function g(e,t){return c.html`
+	`}function v(e,t){return c.html`
 		<div style="${e?.span?`grid-column: span ${e.span};`:``}">
 			${l(t)}
 		</div>
-	`}function _(e,t){return c.html`
+	`}function y(e,t){return c.html`
 		<div
 			style="
       display: grid;
@@ -72,7 +72,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function v(e,t){return c.html`
+	`}function b(e,t){return c.html`
 		<div
 			style="
       display: flex;
@@ -80,9 +80,9 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
       ${e?.space?`gap: ${e.space};`:``}
     "
 		>
-			${l(t)}
+			${u(t)}
 		</div>
-	`}function y(e,t){let n=e?.columnCount??3,r=e?.gap??`16px`;return c.html`
+	`}function x(e,t){let n=e?.columnCount??3,r=e?.gap??`16px`;return c.html`
 		<div
 			style="
       column-count: ${n};
@@ -91,7 +91,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function b(e,t){let n=e?.gap??`0px`,r=e?.firstHeight??`50%`,i=c.html``,a=c.html``;if(typeof t==`function`){var o;let e=(o=t.call)?.call(t,null)??[];i=e[0]??c.html``,a=e[1]??c.html``}else i=l(t);return c.html`
+	`}function S(e,t){let n=e?.gap??`0px`,r=e?.firstHeight??`50%`,i=c.html``,a=c.html``;if(typeof t==`function`){var o;let e=(o=t.call)?.call(t,null)??[];i=e[0]??c.html``,a=e[1]??c.html``}else i=l(t);return c.html`
 		<div
 			style="
       display: flex;
@@ -104,7 +104,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 			<div style="flex: 0 0 ${r}; overflow: auto;">${i}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${a}</div>
 		</div>
-	`}function x(e,t){let n=e?.gap??`0px`,r=e?.firstWidth??`50%`,i=c.html``,a=c.html``;if(typeof t==`function`){var o;let e=(o=t.call)?.call(t,null)??[];i=e[0]??c.html``,a=e[1]??c.html``}else i=l(t);return c.html`
+	`}function C(e,t){let n=e?.gap??`0px`,r=e?.firstWidth??`50%`,i=c.html``,a=c.html``;if(typeof t==`function`){var o;let e=(o=t.call)?.call(t,null)??[];i=e[0]??c.html``,a=e[1]??c.html``}else i=l(t);return c.html`
 		<div
 			style="
       display: flex;
@@ -117,28 +117,28 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 			<div style="flex: 0 0 ${r}; overflow: auto;">${i}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${a}</div>
 		</div>
-	`}function S(e,t){let n=e?.direction??`vertical`,r=e?.height??`100%`,i=e?.width??`100%`,a=e?.customCss??``,o=n===`horizontal`?`overflow-x: auto; overflow-y: hidden`:`overflow-y: auto; overflow-x: hidden`;return c.html`
+	`}function w(e,t){let n=e?.direction??`vertical`,r=e?.height??`100%`,i=e?.width??`100%`,a=e?.customCss??``,o=e?.className??d(`scrollbar-container`),s=n===`horizontal`?`overflow-x: auto; overflow-y: hidden`:`overflow-y: auto; overflow-x: hidden`;return c.html`
 		<style>
-			.scrollbar-container {
-			  ${o};
+			.${o} {
+			  ${s};
 			  width: ${i};
 			  height: ${r};
 			}
-			.scrollbar-container::-webkit-scrollbar {
+			.${o}::-webkit-scrollbar {
 			  width: 8px;
 			  height: 8px;
 			}
-			.scrollbar-container::-webkit-scrollbar-thumb {
+			.${o}::-webkit-scrollbar-thumb {
 			  background-color: rgba(0, 0, 0, 0.2);
 			  border-radius: 4px;
 			}
-			.scrollbar-container::-webkit-scrollbar-track {
+			.${o}::-webkit-scrollbar-track {
 			  background: rgba(0, 0, 0, 0.05);
 			}
 			${a}
 		</style>
-		<div class="scrollbar-container">${l(t)}</div>
-	`}function C(e,t){let n=e?.sidebarWidth??`240px`,r=e?.sidebarPosition??`left`,i=e?.gap??`0px`,a=c.html``,o=c.html``;if(typeof t==`function`){var s;let e=(s=t.call)?.call(t,null)??[];a=e[0]??c.html``,o=e[1]??c.html``}else o=l(t);return c.html`
+		<div class="${o}">${l(t)}</div>
+	`}function T(e,t){let n=e?.sidebarWidth??`240px`,r=e?.sidebarPosition??`left`,i=e?.gap??`0px`,a=c.html``,o=c.html``;if(typeof t==`function`){var s;let e=(s=t.call)?.call(t,null)??[];a=e[0]??c.html``,o=e[1]??c.html``}else o=u(t);return c.html`
 		<div
 			style="
       display: flex;
@@ -151,9 +151,9 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 			<div style="flex: 0 0 ${n}; overflow: auto;">${a}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${o}</div>
 		</div>
-	`}function w(e,t){var n;let r=e?.gap??`8px`,i=e?.snapType??`mandatory`,a=e?.height??`auto`,o=e?.width??`100%`,s=[];return typeof t==`function`?s=(n=t.call)?.call(t,null)??[]:t&&(s=[t]),c.html`
+	`}function E(e,t){var n;let r=e?.gap??`8px`,i=e?.snapType??`mandatory`,a=e?.height??`auto`,o=e?.width??`100%`,s=e?.className??d(`swiper`),l=s+`-container`,u=s+`-slide`,f=[];return typeof t==`function`?f=(n=t.call)?.call(t,null)??[]:t&&(f=[t]),c.html`
 		<style>
-			.swiper-container {
+			.${l} {
 				width: ${o};
 				height: ${a};
 				overflow-x: auto;
@@ -163,15 +163,15 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 				-webkit-overflow-scrolling: touch;
 				gap: ${(0,c.unsafeCSS)(r)};
 			}
-			.swiper-slide {
+			.${u} {
 				scroll-snap-align: start;
 				flex-shrink: 0;
 			}
 		</style>
-		<div class="swiper-container">
-			${s.map(e=>c.html` <div class="swiper-slide">${e}</div> `)}
+		<div class="${l}">
+			${f.map(e=>c.html` <div class="${u}">${e}</div> `)}
 		</div>
-	`}function T(e,t){let n=e?.top?`top: ${e.top};`:``,r=e?.right?`right: ${e.right};`:``,i=e?.bottom?`bottom: ${e.bottom};`:``,a=e?.left?`left: ${e.left};`:``,o=e?.width?`width: ${e.width};`:``,s=e?.height?`height: ${e.height};`:``,u=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``;return c.html`
+	`}function D(e,t){let n=e?.top?`top: ${e.top};`:``,r=e?.right?`right: ${e.right};`:``,i=e?.bottom?`bottom: ${e.bottom};`:``,a=e?.left?`left: ${e.left};`:``,o=e?.width?`width: ${e.width};`:``,s=e?.height?`height: ${e.height};`:``,u=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``;return c.html`
 		<div
 			style="
       position: absolute;
@@ -182,7 +182,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function E(e,t){let n=e?.width??`300px`,r=e?.height??`auto`,i=e?.top??`20%`,a=e?.bottom??`auto`,o=e?.left??`50%`,s=e?.right??`auto`,u=o===`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;return c.html`
+	`}function O(e,t){let n=e?.width??`300px`,r=e?.height??`auto`,i=e?.top??`20%`,a=e?.bottom??`auto`,o=e?.left??`50%`,s=e?.right??`auto`,l=o===`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;return c.html`
 		<div
 			style="
       position: fixed;
@@ -190,7 +190,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
       bottom: ${a};
       left: ${o};
       right: ${s};
-      ${u}
+      ${l}
       width: ${n};
       height: ${r};
       background: ${d};
@@ -204,9 +204,9 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
       flex-direction: column;
     "
 		>
-			${l(t)}
+			${u(t)}
 		</div>
-	`}function D(e,t){let n=`${100/e.ratio}%`,r=e.maxWidth?`max-width: ${e.maxWidth};`:``,i=e.background?`background: ${e.background};`:``,a=e.overflow??`hidden`;return c.html`
+	`}function k(e,t){let n=`${100/e.ratio}%`,r=e.maxWidth?`max-width: ${e.maxWidth};`:``,i=e.background?`background: ${e.background};`:``,a=e.overflow??`hidden`;return c.html`
 		<div
 			style="
       position: relative;
@@ -226,10 +226,10 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
         height: 100%;
       "
 			>
-				${l(t)}
+				${u(t)}
 			</div>
 		</div>
-	`}function O(e,t){let n=e?.gap??`16px`;return c.html`
+	`}function A(e,t){let n=e?.gap??`16px`;return c.html`
 		<div
 			style="
       display: grid;
@@ -239,11 +239,9 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function k(e,t){let n=e?.size??`32px`,r=e?.overlap??`-8px`;return c.html`
-		<div style="display: flex; align-items: center;">
-			${typeof t==`function`?t().map((e,t)=>c.html`
-							<div
-								style="
+	`}function j(e,t){let n=e?.size??`32px`,r=e?.overlap??`-8px`,i=(e,t)=>c.html`
+		<div
+			style="
               width: ${n};
               height: ${n};
               border-radius: 50%;
@@ -252,12 +250,14 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
               margin-left: ${t===0?`0`:r};
               box-sizing: content-box;
             "
-							>
-								${e}
-							</div>
-						`):c.html``}
+		>
+			${e}
+		</div>
+	`;return c.html`
+		<div style="display: flex; align-items: center;">
+			${u(t,i)}
 		</div>
-	`}function A(e,t){let n=e?.position??`top-right`,r=e?.size??`16px`,i=e?.background??`red`,a=e?.color??`#fff`,[o,s,u,d]=[n.includes(`top`)?`0`:`auto`,n.includes(`right`)?`0`:`auto`,n.includes(`bottom`)?`0`:`auto`,n.includes(`left`)?`0`:`auto`];return c.html`
+	`}function M(e,t){let n=e?.position??`top-right`,r=e?.size??`16px`,i=e?.background??`red`,a=e?.color??`#fff`,[o,s,u,d]=[n.includes(`top`)?`0`:`auto`,n.includes(`right`)?`0`:`auto`,n.includes(`bottom`)?`0`:`auto`,n.includes(`left`)?`0`:`auto`];return c.html`
 		<div style="position: relative; display: inline-block;">
 			${l(t)}
 			<div
@@ -282,7 +282,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 				${e?.content??``}
 			</div>
 		</div>
-	`}function j(e,t){let n=e?.padding??`16px`,r=e?.borderRadius??`8px`,i=e?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,a=e?.background??`#fff`;return c.html`
+	`}function N(e,t){let n=e?.padding??`16px`,r=e?.borderRadius??`8px`,i=e?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,a=e?.background??`#fff`;return c.html`
 		<div
 			style="
       background: ${a};
@@ -292,9 +292,9 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
       box-sizing: border-box;
     "
 		>
-			${l(t)}
+			${u(t)}
 		</div>
-	`}function M(e,t){let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``;return c.html`
+	`}function P(e,t){let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``;return c.html`
 		<div
 			style="
       display: flex;
@@ -305,7 +305,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function N(e,t){let n=e?.maxWidth??`1024px`,r=e?.padding??`0 16px`,i=e?.background?`background: ${e.background};`:``,a=e?.fullHeight?`height: 100%;`:``;return c.html`
+	`}function F(e,t){let n=e?.maxWidth??`1024px`,r=e?.padding??`0 16px`,i=e?.background?`background: ${e.background};`:``,a=e?.fullHeight?`height: 100%;`:``;return c.html`
 		<div
 			style="
       width: 100%;
@@ -318,9 +318,9 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
       box-sizing: border-box;
     "
 		>
-			${l(t)}
+			${u(t)}
 		</div>
-	`}function P(e){let t=e?.orientation??`horizontal`,n=e?.thickness??`1px`,r=e?.color??`#e0e0e0`,i=e?.margin??(t===`horizontal`?`8px 0`:`0 8px`),a=t===`horizontal`?`width: 100%; height: ${n}; background: ${r}; margin: ${i};`:`width: ${n}; height: 100%; background: ${r}; margin: ${i};`;return c.html`<div style="${a}"></div>`}function F(e,t){let n=e?.columns??4,r=e?.gap??`24px`,i=e?.background??`#f8f8f8`,a=e?.padding??`40px 16px`;return c.html`
+	`}function I(e){let t=e?.orientation??`horizontal`,n=e?.thickness??`1px`,r=e?.color??`#e0e0e0`,i=e?.margin??(t===`horizontal`?`8px 0`:`0 8px`),a=t===`horizontal`?`width: 100%; height: ${n}; background: ${r}; margin: ${i};`:`width: ${n}; height: 100%; background: ${r}; margin: ${i};`;return c.html`<div style="${a}"></div>`}function L(e,t){let n=e?.columns??4,r=e?.gap??`24px`,i=e?.background??`#f8f8f8`,a=e?.padding??`40px 16px`;return c.html`
 		<div
 			style="
       width: 100%;
@@ -342,22 +342,22 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 				© ${new Date().getFullYear()} Your Company. All rights reserved.
 			</div>
 		</div>
-	`}function I(e,t){let n=e.defaultColumns??1,r=e.gap??`16px`,i=Object.entries(e.breakpoints).map(([e,t])=>`
+	`}function R(e,t){let n=e.defaultColumns??1,r=e.gap??`16px`,i=e.className??d(`grid-breakpoint`),a=Object.entries(e.breakpoints).map(([e,t])=>`
       @media ${e} {
-        .grid-breakpoint { grid-template-columns: repeat(${t}, 1fr); }
+        .${i} { grid-template-columns: repeat(${t}, 1fr); }
       }
     `).join(`
 `);return c.html`
 		<style>
-			.grid-breakpoint {
+			.${i} {
 			  display: grid;
 			  grid-template-columns: repeat(${n}, 1fr);
 			  gap: ${r};
 			}
-			${i}
+			${a}
 		</style>
-		<div class="grid-breakpoint">${l(t)}</div>
-	`}function L(e,t){let n=e?.backgroundImage?`background-image: url('${e.backgroundImage}');`:``,r=e?.height??`400px`,i=e?.overlayColor??`rgba(0, 0, 0, 0.3)`;return c.html`
+		<div class="${i}">${l(t)}</div>
+	`}function z(e,t){let n=e?.backgroundImage?`background-image: url('${e.backgroundImage}');`:``,r=e?.height??`400px`,i=e?.overlayColor??`rgba(0, 0, 0, 0.3)`;return c.html`
 		<div
 			style="
       position: relative;
@@ -391,40 +391,40 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
         box-sizing: border-box;
       "
 			>
-				${l(t)}
+				${u(t)}
 			</div>
 		</div>
-	`}function R(e,t){let n=e?.breakpoint??`(max-width: 600px)`,r=e?.mode??`hide`,i=r===`hide`?`@media ${n} { .hidden-container { display: none !important; } }`:`@media ${n} { .hidden-container { display: block !important; } }
-       @media not ${n} { .hidden-container { display: none !important; } }`;return c.html`
+	`}function B(e,t){let n=e?.breakpoint??`(max-width: 600px)`,r=e?.mode??`hide`,i=e?.className??d(`hidden-container`),a=r===`hide`?`@media ${n} { .${i} { display: none !important; } }`:`@media ${n} { .${i} { display: block !important; } }
+       @media not ${n} { .${i} { display: none !important; } }`;return c.html`
 		<style>
-			.hidden-container {
+			.${i} {
 			  display: block;
 			}
-			${i}
+			${a}
 		</style>
-		<div class="hidden-container">${l(t)}</div>
-	`}function z(e,t){let n=e?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,r=e?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,i=e?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``;return c.html`
+		<div class="${i}">${l(t)}</div>
+	`}function V(e,t){let n=e?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,r=e?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,i=e?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,a=e?.className??d(`list-group`);return c.html`
 		<style>
-			ul.list-group {
+			ul.${a} {
 			  list-style: none;
 			  margin: 0;
 			  padding: 0;
 			  ${n};
 			}
-			ul.list-group li {
+			ul.${a} li {
 			  padding: 12px 16px;
 			  ${e?.bordered?`border-bottom: 1px solid #ddd`:``};
 			}
-			ul.list-group li:last-child {
+			ul.${a} li:last-child {
 			  ${e?.bordered?`border-bottom: none`:``};
 			}
 			${r}
 			${i}
 		</style>
-		<ul class="list-group">
+		<ul class="${a}">
 			${l(t)}
 		</ul>
-	`}function B(e,t){let n=e?.background??`rgba(0, 0, 0, 0.5)`,r=e?.zIndex??1e3,i=e?.fullScreen!==!1;return c.html`
+	`}function H(e,t){let n=e?.background??`rgba(0, 0, 0, 0.5)`,r=e?.zIndex??1e3,i=e?.fullScreen!==!1;return c.html`
 		<div
 			style="
       position: ${i?`fixed`:`absolute`};
@@ -436,9 +436,9 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
       align-items: center;
     "
 		>
-			${l(t)}
+			${u(t)}
 		</div>
-	`}function V(e,t){let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``;return c.html`
+	`}function U(e,t){let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``;return c.html`
 		<div
 			style="
       position: relative;
@@ -448,23 +448,23 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function H(e){let t=e?.width?`width: ${e.width};`:``,n=e?.height?`height: ${e.height};`:``;return c.html` <div style="${t} ${n}"></div> `}function U(e){let t=e?.type??`rect`,n=e?.width??`100%`,r=e?.height??`16px`,i=e?.borderRadius??`4px`,a=e?.animation!==!1,o=t===`circle`?`border-radius: 50%; width: ${n}; height: ${n}`:`border-radius: ${i}; width: ${n}; height: ${r}`;return c.html`
+	`}function W(e){let t=e?.width?`width: ${e.width};`:``,n=e?.height?`height: ${e.height};`:``;return c.html` <div style="${t} ${n}"></div> `}function G(e){let t=e?.type??`rect`,n=e?.width??`100%`,r=e?.height??`16px`,i=e?.borderRadius??`4px`,a=e?.animation!==!1,o=e?.className??d(`skeleton-shimmer`),s=t===`circle`?`border-radius: 50%; width: ${n}; height: ${n}`:`border-radius: ${i}; width: ${n}; height: ${r}`;return c.html`
 		<style>
 			${`
-            @keyframes skeleton-shimmer {
+            @keyframes ${o+`-shimmer`} {
 			  0% { background-color: #eee; }
 			  50% { background-color: #ddd; }
 			  100% { background-color: #eee; }
 			}    
             `}
-			.skeleton {
-			  ${o};
+			.${o} {
+			  ${s};
 			  background-color: #eee;
-			  ${a?`animation: skeleton-shimmer 1.2s infinite ease-in-out`:``};
+			  ${a?`animation: ${o+`-shimmer`} 1.2s infinite ease-in-out`:``};
 			}
 		</style>
-		<div class="skeleton"></div>
-	`}function W(){return c.html`<div style="flex: 1 1 auto;"></div>`}function G(e,t){let n=e?.top?`top: ${e.top};`:``,r=e?.bottom?`bottom: ${e.bottom};`:``,i=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``;return c.html`
+		<div class="${o}"></div>
+	`}function K(){return c.html`<div style="flex: 1 1 auto;"></div>`}function q(e,t){let n=e?.top?`top: ${e.top};`:``,r=e?.bottom?`bottom: ${e.bottom};`:``,i=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``;return c.html`
 		<div
 			style="
       position: sticky;
@@ -474,30 +474,30 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function K(e,t){let n=e?.striped?`
-    tr:nth-child(even) { background: #f9f9f9; }
-  `:``,r=e?.hover?`
-    tr:hover { background: #f1f1f1; }
-  `:``,i=e?.bordered?`
-      table, th, td { border: 1px solid #ddd; }
+	`}function J(e,t){let n=e?.className??d(`table`),r=e?.striped?`
+    .${n} tr:nth-child(even) { background: #f9f9f9; }
+  `:``,i=e?.hover?`
+    .${n} tr:hover { background: #f1f1f1; }
+  `:``,a=e?.bordered?`
+      .${n} table, .${n} th, .${n} td { border: 1px solid #ddd; }
     `:``;return c.html`
 		<style>
-			table {
+			.${n} table {
 			  width: 100%;
 			  border-collapse: collapse;
 			}
-			th, td {
+			.${n} th, .${n} td {
 			  padding: 8px 12px;
 			  text-align: left;
 			}
-			${n}
 			${r}
 			${i}
+			${a}
 		</style>
-		<table>
+		<table class="table">
 			${l(t)}
 		</table>
-	`}function q(e,t){let n=e?.direction??`row`;return c.html`
+	`}function Y(e,t){let n=e?.direction??`row`;return c.html`
 		<div
 			style="
       display: flex;
@@ -508,9 +508,9 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
       ${e?.justify?`justify-content: ${e.justify};`:``}
     "
 		>
-			${l(t)}
+			${u(t)}
 		</div>
-	`}function J(e,t){let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``,a=`flex-start`,o=`flex-start`;switch(e?.align){case`top-right`:a=`flex-end`,o=`flex-start`;break;case`center`:a=`center`,o=`center`;break;case`bottom-left`:a=`flex-start`,o=`flex-end`;break;case`bottom-right`:a=`flex-end`,o=`flex-end`;break;default:a=`flex-start`,o=`flex-start`}return c.html`
+	`}function X(e,t){let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``,a=`flex-start`,o=`flex-start`;switch(e?.align){case`top-right`:a=`flex-end`,o=`flex-start`;break;case`center`:a=`center`,o=`center`;break;case`bottom-left`:a=`flex-start`,o=`flex-end`;break;case`bottom-right`:a=`flex-end`,o=`flex-end`;break;default:a=`flex-start`,o=`flex-start`}return c.html`
 		<div
 			style="
       position: relative;
@@ -520,7 +520,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
       ${n} ${r} ${i}
     "
 		>
-			${l(t)}
+			${u(t)}
 		</div>
-	`}exports.AbsoluteBox=T,exports.AcrylicBar=E,exports.AspectRatio=D,exports.AutoFitGrid=O,exports.AvatarStack=k,exports.Badge=A,exports.Card=j,exports.Center=M,exports.Column=d,exports.ColumnSplit=b,exports.Container=N,exports.Divider=P,exports.Flex=f,exports.FlowItem=p,exports.FooterLayout=F,exports.Grid=m,exports.GridBreakpoint=I,exports.GridCol=h,exports.GridItem=g,exports.GridRow=_,exports.HeroSection=L,exports.Hidden=R,exports.LightboxContainer=u,exports.ListGroup=z,exports.Overlay=B,exports.PositionContainer=V,exports.Row=v,exports.RowSplit=x,exports.ScrollBar=S,exports.SideBarContainer=C,exports.SizedBox=H,exports.SkeletonLoader=U,exports.Spacer=W,exports.Sticky=G,exports.Swiper=w,exports.Table=K,exports.WaterFlow=y,exports.Wrap=q,exports.ZStack=J;
+	`}exports.AbsoluteBox=D,exports.AcrylicBar=O,exports.AspectRatio=k,exports.AutoFitGrid=A,exports.AvatarStack=j,exports.Badge=M,exports.Card=N,exports.Center=P,exports.Column=p,exports.ColumnSplit=S,exports.Container=F,exports.Divider=I,exports.Flex=m,exports.FlowItem=h,exports.FooterLayout=L,exports.Grid=g,exports.GridBreakpoint=R,exports.GridCol=_,exports.GridItem=v,exports.GridRow=y,exports.HeroSection=z,exports.Hidden=B,exports.LightboxContainer=f,exports.ListGroup=V,exports.Overlay=H,exports.PositionContainer=U,exports.Row=b,exports.RowSplit=C,exports.ScrollBar=w,exports.SideBarContainer=T,exports.SizedBox=W,exports.SkeletonLoader=G,exports.Spacer=K,exports.Sticky=q,exports.Swiper=E,exports.Table=J,exports.WaterFlow=x,exports.Wrap=Y,exports.ZStack=X;
 //# sourceMappingURL=index.cjs.js.map