lyco 1.0.0 → 1.0.2

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=t?.fadeBg??`rgba(0,0,0,0.7)`,a=t?.zIndex??2e3;return e`
+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(e){let t=Math.random().toString(36).substring(2,15);return e?`lyco-${e}-${t}`:`lyco-${t}`}function a(t,r){let i=t?.fadeBg??`rgba(0,0,0,0.7)`,a=t?.zIndex??2e3;return e`
 		<div
 			style="
       position: fixed;
@@ -12,7 +12,7 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 		>
 			${n(r)}
 		</div>
-	`}function i(t,r){return e`
+	`}function o(t,n){return e`
 		<div
 			style="
       display: flex;
@@ -20,9 +20,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       ${t?.space?`gap: ${t.space};`:``}
     "
 		>
-			${n(r)}
+			${r(n)}
 		</div>
-	`}function a(t,r){let i=t?.direction??`row`;return e`
+	`}function s(t,r){let i=t?.direction??`row`;return e`
 		<div
 			style="
       display: flex;
@@ -34,11 +34,11 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 		>
 			${n(r)}
 		</div>
-	`}function o(t,r){return e`
+	`}function c(t,r){return e`
 		<div style="break-inside: avoid; margin-bottom: 16px;">
 			${n(r)}
 		</div>
-	`}function s(t,r){let i=t?.columns??1;return e`
+	`}function l(t,n){let i=t?.columns??1;return e`
 		<div
 			style="
       display: grid;
@@ -46,9 +46,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       ${t?.gap?`gap: ${t.gap};`:``}
     "
 		>
-			${n(r)}
+			${r(n)}
 		</div>
-	`}function c(t,r){return e`
+	`}function u(t,r){return e`
 		<div
 			style="
       display: grid;
@@ -58,11 +58,11 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 		>
 			${n(r)}
 		</div>
-	`}function l(t,r){return e`
+	`}function d(t,r){return e`
 		<div style="${t?.span?`grid-column: span ${t.span};`:``}">
 			${n(r)}
 		</div>
-	`}function u(t,r){return e`
+	`}function f(t,r){return e`
 		<div
 			style="
       display: grid;
@@ -72,7 +72,7 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 		>
 			${n(r)}
 		</div>
-	`}function d(t,r){return e`
+	`}function p(t,n){return e`
 		<div
 			style="
       display: flex;
@@ -80,9 +80,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       ${t?.space?`gap: ${t.space};`:``}
     "
 		>
-			${n(r)}
+			${r(n)}
 		</div>
-	`}function f(t,r){let i=t?.columnCount??3,a=t?.gap??`16px`;return e`
+	`}function m(t,r){let i=t?.columnCount??3,a=t?.gap??`16px`;return e`
 		<div
 			style="
       column-count: ${i};
@@ -91,7 +91,7 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 		>
 			${n(r)}
 		</div>
-	`}function p(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(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`
 		<div
 			style="
       display: flex;
@@ -104,7 +104,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 m(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 g(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`
 		<div
 			style="
       display: flex;
@@ -117,28 +117,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 h(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 _(t,r){let a=t?.direction??`vertical`,o=t?.height??`100%`,s=t?.width??`100%`,c=t?.customCss??``,l=t?.className??i(`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 g(t,r){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 class="${l}">${n(r)}</div>
+	`}function v(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
 			style="
       display: flex;
@@ -151,27 +151,27 @@ 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 _(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 y(n,r){var a;let o=n?.gap??`8px`,s=n?.snapType??`mandatory`,c=n?.height??`auto`,l=n?.width??`100%`,u=n?.className??i(`swiper`),d=u+`-container`,f=u+`-slide`,p=[];return typeof r==`function`?p=(a=r.call)?.call(r,null)??[]:r&&(p=[r]),e`
 		<style>
-			.swiper-container {
-				width: ${c};
-				height: ${s};
+			.${d} {
+				width: ${l};
+				height: ${c};
 				overflow-x: auto;
 				overflow-y: hidden;
 				display: flex;
-				scroll-snap-type: x ${o};
+				scroll-snap-type: x ${s};
 				-webkit-overflow-scrolling: touch;
-				gap: ${t(a)};
+				gap: ${t(o)};
 			}
-			.swiper-slide {
+			.${f} {
 				scroll-snap-align: start;
 				flex-shrink: 0;
 			}
 		</style>
-		<div class="swiper-container">
-			${l.map(t=>e` <div class="swiper-slide">${t}</div> `)}
+		<div class="${d}">
+			${p.map(t=>e` <div class="${f}">${t}</div> `)}
 		</div>
-	`}function v(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`
+	`}function b(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="
       position: absolute;
@@ -182,7 +182,7 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 		>
 			${n(r)}
 		</div>
-	`}function y(t,r){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`
+	`}function x(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="
       position: fixed;
@@ -204,9 +204,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       flex-direction: column;
     "
 		>
-			${n(r)}
+			${r(n)}
 		</div>
-	`}function b(t,r){let i=`${100/t.ratio}%`,a=t.maxWidth?`max-width: ${t.maxWidth};`:``,o=t.background?`background: ${t.background};`:``,s=t.overflow??`hidden`;return e`
+	`}function S(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`
 		<div
 			style="
       position: relative;
@@ -226,10 +226,10 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
         height: 100%;
       "
 			>
-				${n(r)}
+				${r(n)}
 			</div>
 		</div>
-	`}function x(t,r){let i=t?.gap??`16px`;return e`
+	`}function C(t,r){let i=t?.gap??`16px`;return e`
 		<div
 			style="
       display: grid;
@@ -239,25 +239,25 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 		>
 			${n(r)}
 		</div>
-	`}function S(t,n){let r=t?.size??`32px`,i=t?.overlap??`-8px`;return e`
-		<div style="display: flex; align-items: center;">
-			${typeof n==`function`?n().map((t,n)=>e`
-							<div
-								style="
-              width: ${r};
-              height: ${r};
+	`}function w(t,n){let i=t?.size??`32px`,a=t?.overlap??`-8px`,o=(t,n)=>e`
+		<div
+			style="
+              width: ${i};
+              height: ${i};
               border-radius: 50%;
               overflow: hidden;
               border: 2px solid #fff;
-              margin-left: ${n===0?`0`:i};
+              margin-left: ${n===0?`0`:a};
               box-sizing: content-box;
             "
-							>
-								${t}
-							</div>
-						`):e``}
+		>
+			${t}
+		</div>
+	`;return e`
+		<div style="display: flex; align-items: center;">
+			${r(n,o)}
 		</div>
-	`}function C(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 T(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`
 		<div style="position: relative; display: inline-block;">
 			${n(r)}
 			<div
@@ -282,7 +282,7 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 				${t?.content??``}
 			</div>
 		</div>
-	`}function w(t,r){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 E(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`
 		<div
 			style="
       background: ${s};
@@ -292,9 +292,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       box-sizing: border-box;
     "
 		>
-			${n(r)}
+			${r(n)}
 		</div>
-	`}function T(t,r){let i=t?.width?`width: ${t.width};`:``,a=t?.height?`height: ${t.height};`:``,o=t?.background?`background: ${t.background};`:``;return e`
+	`}function D(t,r){let i=t?.width?`width: ${t.width};`:``,a=t?.height?`height: ${t.height};`:``,o=t?.background?`background: ${t.background};`:``;return e`
 		<div
 			style="
       display: flex;
@@ -305,7 +305,7 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 		>
 			${n(r)}
 		</div>
-	`}function E(t,r){let i=t?.maxWidth??`1024px`,a=t?.padding??`0 16px`,o=t?.background?`background: ${t.background};`:``,s=t?.fullHeight?`height: 100%;`:``;return e`
+	`}function O(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`
 		<div
 			style="
       width: 100%;
@@ -318,9 +318,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       box-sizing: border-box;
     "
 		>
-			${n(r)}
+			${r(n)}
 		</div>
-	`}function D(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 O(t,r){let i=t?.columns??4,a=t?.gap??`24px`,o=t?.background??`#f8f8f8`,s=t?.padding??`40px 16px`;return e`
+	`}function k(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 A(t,r){let i=t?.columns??4,a=t?.gap??`24px`,o=t?.background??`#f8f8f8`,s=t?.padding??`40px 16px`;return e`
 		<div
 			style="
       width: 100%;
@@ -342,22 +342,22 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 				© ${new Date().getFullYear()} Your Company. All rights reserved.
 			</div>
 		</div>
-	`}function k(t,r){let i=t.defaultColumns??1,a=t.gap??`16px`,o=Object.entries(t.breakpoints).map(([e,t])=>`
+	`}function j(t,r){let a=t.defaultColumns??1,o=t.gap??`16px`,s=t.className??i(`grid-breakpoint`),c=Object.entries(t.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 A(t,r){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}">${n(r)}</div>
+	`}function M(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
 			style="
       position: relative;
@@ -391,40 +391,40 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
         box-sizing: border-box;
       "
 			>
-				${n(r)}
+				${r(n)}
 			</div>
 		</div>
-	`}function j(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 N(t,r){let a=t?.breakpoint??`(max-width: 600px)`,o=t?.mode??`hide`,s=t?.className??i(`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 M(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}">${n(r)}</div>
+	`}function P(t,r){let a=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; }`:``,c=t?.className??i(`list-group`);return e`
 		<style>
-			ul.list-group {
+			ul.${c} {
 			  list-style: none;
 			  margin: 0;
 			  padding: 0;
-			  ${i};
+			  ${a};
 			}
-			ul.list-group li {
+			ul.${c} li {
 			  padding: 12px 16px;
 			  ${t?.bordered?`border-bottom: 1px solid #ddd`:``};
 			}
-			ul.list-group li:last-child {
+			ul.${c} li:last-child {
 			  ${t?.bordered?`border-bottom: none`:``};
 			}
-			${a}
 			${o}
+			${s}
 		</style>
-		<ul class="list-group">
+		<ul class="${c}">
 			${n(r)}
 		</ul>
-	`}function N(t,r){let i=t?.background??`rgba(0, 0, 0, 0.5)`,a=t?.zIndex??1e3,o=t?.fullScreen!==!1;return e`
+	`}function F(t,n){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 +436,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       align-items: center;
     "
 		>
-			${n(r)}
+			${r(n)}
 		</div>
-	`}function P(t,r){let i=t?.width?`width: ${t.width};`:``,a=t?.height?`height: ${t.height};`:``,o=t?.background?`background: ${t.background};`:``;return e`
+	`}function I(t,r){let i=t?.width?`width: ${t.width};`:``,a=t?.height?`height: ${t.height};`:``,o=t?.background?`background: ${t.background};`:``;return e`
 		<div
 			style="
       position: relative;
@@ -448,23 +448,23 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 		>
 			${n(r)}
 		</div>
-	`}function F(t){let n=t?.width?`width: ${t.width};`:``,r=t?.height?`height: ${t.height};`:``;return e` <div style="${n} ${r}"></div> `}function I(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 L(t){let n=t?.width?`width: ${t.width};`:``,r=t?.height?`height: ${t.height};`:``;return e` <div style="${n} ${r}"></div> `}function R(t){let n=t?.type??`rect`,r=t?.width??`100%`,a=t?.height??`16px`,o=t?.borderRadius??`4px`,s=t?.animation!==!1,c=t?.className??i(`skeleton-shimmer`),l=n===`circle`?`border-radius: 50%; width: ${r}; height: ${r}`:`border-radius: ${o}; width: ${r}; 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 L(){return e`<div style="flex: 1 1 auto;"></div>`}function R(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 z(){return e`<div style="flex: 1 1 auto;"></div>`}function B(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
 			style="
       position: sticky;
@@ -474,30 +474,30 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
 		>
 			${n(r)}
 		</div>
-	`}function z(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 V(t,r){let a=t?.className??i(`table`),o=t?.striped?`
+    .${a} tr:nth-child(even) { background: #f9f9f9; }
+  `:``,s=t?.hover?`
+    .${a} tr:hover { background: #f1f1f1; }
+  `:``,c=t?.bordered?`
+      .${a} table, .${a} th, .${a} td { border: 1px solid #ddd; }
     `:``;return e`
 		<style>
-			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>
+		<table class="table">
 			${n(r)}
 		</table>
-	`}function B(t,r){let i=t?.direction??`row`;return e`
+	`}function H(t,n){let i=t?.direction??`row`;return e`
 		<div
 			style="
       display: flex;
@@ -508,9 +508,9 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       ${t?.justify?`justify-content: ${t.justify};`:``}
     "
 		>
-			${n(r)}
+			${r(n)}
 		</div>
-	`}function V(t,r){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 U(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`
 		<div
 			style="
       position: relative;
@@ -520,7 +520,7 @@ import{html as e,unsafeCSS as t}from"lit";function n(t){return t?typeof t==`func
       ${i} ${a} ${o}
     "
 		>
-			${n(r)}
+			${r(n)}
 		</div>
-	`}export{v as AbsoluteBox,y as AcrylicBar,b as AspectRatio,x as AutoFitGrid,S as AvatarStack,C as Badge,w as Card,T as Center,i as Column,p as ColumnSplit,E as Container,D as Divider,a as Flex,o as FlowItem,O as FooterLayout,s as Grid,k as GridBreakpoint,c as GridCol,l as GridItem,u as GridRow,A as HeroSection,j as Hidden,r as LightboxContainer,M as ListGroup,N as Overlay,P as PositionContainer,d as Row,m as RowSplit,h as ScrollBar,g as SideBarContainer,F as SizedBox,I as SkeletonLoader,L as Spacer,R as Sticky,_ as Swiper,z as Table,f as WaterFlow,B as Wrap,V as ZStack};
+	`}export{b as AbsoluteBox,x as AcrylicBar,S as AspectRatio,C as AutoFitGrid,w as AvatarStack,T as Badge,E as Card,D as Center,o as Column,h as ColumnSplit,O as Container,k as Divider,s as Flex,c as FlowItem,A as FooterLayout,l as Grid,j as GridBreakpoint,u as GridCol,d as GridItem,f as GridRow,M as HeroSection,N as Hidden,a as LightboxContainer,P as ListGroup,F as Overlay,I as PositionContainer,p as Row,g as RowSplit,_ as ScrollBar,v as SideBarContainer,L as SizedBox,R as SkeletonLoader,z as Spacer,B as Sticky,y as Swiper,V as Table,m as WaterFlow,H as Wrap,U as ZStack};
 //# sourceMappingURL=index.es.js.map