@diniz/webcomponents 1.0.3 → 1.0.4

package/dist/assets/{table-CB6WCNz5.js → table-BoHSrBty.js}

@@ -1,4 +1,4 @@
-var c=Object.defineProperty;var b=(a,e,t)=>e in a?c(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var i=(a,e,t)=>b(a,typeof e!="symbol"?e+"":e,t);import{B as h,s as u}from"./app-layout-BWpUyzvG.js";class w extends h{constructor(){super(...arguments);i(this,"columns",[]);i(this,"rows",[])}connectedCallback(){this.setAttribute("data-ui","table"),super.connectedCallback()}set data(t){this.columns=t.columns,this.rows=t.rows,this.render()}get data(){return{columns:this.columns,rows:this.rows}}render(){const t=this.columns.map(n=>`<th class="align-${n.align??"left"}">${n.label}</th>`).join(""),d=this.rows.map((n,o)=>`<tr data-row-index="${o}">${this.columns.map(s=>s.actions?`<td class="align-center actions-cell">
+var c=Object.defineProperty;var b=(a,e,t)=>e in a?c(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var i=(a,e,t)=>b(a,typeof e!="symbol"?e+"":e,t);import{B as h,s as u}from"./app-layout-D81L3er1.js";class w extends h{constructor(){super(...arguments);i(this,"columns",[]);i(this,"rows",[])}connectedCallback(){this.setAttribute("data-ui","table"),super.connectedCallback()}set data(t){this.columns=t.columns,this.rows=t.rows,this.render()}get data(){return{columns:this.columns,rows:this.rows}}render(){const t=this.columns.map(n=>`<th class="align-${n.align??"left"}">${n.label}</th>`).join(""),d=this.rows.map((n,o)=>`<tr data-row-index="${o}">${this.columns.map(s=>s.actions?`<td class="align-center actions-cell">
 										${s.actions.edit?`<button class="action-btn edit-btn" data-action="edit" data-row-index="${o}">Edit</button>`:""}
 										${s.actions.delete?`<button class="action-btn delete-btn" data-action="delete" data-row-index="${o}">Delete</button>`:""}
 									</td>`:`<td class="align-${s.align??"left"}">${String(n[s.key]??"")}</td>`).join("")}</tr>`).join("");this.shadowRoot.innerHTML=`

package/dist/assets/{table-demo-BB9ggIfA.js → table-demo-D0gN-zGB.js}

@@ -1,81 +1,5 @@
-var h=Object.defineProperty;var p=(l,s,t)=>s in l?h(l,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[s]=t;var n=(l,s,t)=>p(l,typeof s!="symbol"?s+"":s,t);import{B as d,s as u}from"./app-layout-BWpUyzvG.js";import"./table-CB6WCNz5.js";import"./index-BZ8Wp8z7.js";import"./vendor-BvJLUv9i.js";class b extends d{constructor(){super(...arguments);n(this,"_total",0);n(this,"_currentPage",1);n(this,"_pageSize",10)}connectedCallback(){this.setAttribute("data-ui","pagination"),super.connectedCallback()}static get observedAttributes(){return["total","current-page","page-size"]}attributeChangedCallback(t,a,e){switch(t){case"total":this._total=parseInt(e,10)||0;break;case"current-page":this._currentPage=parseInt(e,10)||1;break;case"page-size":this._pageSize=parseInt(e,10)||10;break}this.render()}get total(){return this._total}set total(t){this._total=t,this.setAttribute("total",String(t))}get currentPage(){return this._currentPage}set currentPage(t){this._currentPage=t,this.setAttribute("current-page",String(t))}get pageSize(){return this._pageSize}set pageSize(t){this._pageSize=t,this.setAttribute("page-size",String(t))}get totalPages(){return Math.ceil(this._total/this._pageSize)}handlePageChange(t){t<1||t>this.totalPages||t===this._currentPage||(this.currentPage=t,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:t,pageSize:this._pageSize,total:this._total,totalPages:this.totalPages},bubbles:!0,composed:!0})))}getPageNumbers(){const t=this.totalPages,a=this._currentPage;if(t<=7)return Array.from({length:t},(r,i)=>i+1);const e=[];return a<=3?e.push(1,2,3,4,"...",t):a>=t-2?e.push(1,"...",t-3,t-2,t-1,t):e.push(1,"...",a-1,a,a+1,"...",t),e}render(){const t=this.totalPages,a=this._currentPage,e=this.getPageNumbers(),r=(a-1)*this._pageSize+1,i=Math.min(a*this._pageSize,this._total);this.shadowRoot.innerHTML=`
-			<style>
-				${u}
-
-				:host {
-					display: block;
-				}
-
-				.pagination-container {
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					gap: 1rem;
-					flex-wrap: wrap;
-				}
-
-				.pagination-info {
-					font-size: 0.9rem;
-					color: var(--color-ink);
-					opacity: 0.7;
-				}
-
-				.pagination {
-					display: flex;
-					align-items: center;
-					gap: 0.25rem;
-				}
-
-				.page-btn {
-					min-width: 2.5rem;
-					height: 2.5rem;
-					padding: 0.5rem;
-					border: 1px solid var(--color-border);
-					background: white;
-					color: var(--color-ink);
-					font-size: 0.9rem;
-					font-weight: 500;
-					border-radius: 6px;
-					cursor: pointer;
-					transition: all 0.2s ease;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-				}
-
-				.page-btn:hover:not(:disabled):not(.active) {
-					background: var(--color-muted);
-					border-color: var(--color-border-strong);
-				}
-
-				.page-btn:disabled {
-					opacity: 0.4;
-					cursor: not-allowed;
-				}
-
-				.page-btn.active {
-					background: var(--color-primary);
-					color: var(--color-primary-contrast);
-					border-color: var(--color-primary);
-					font-weight: 600;
-				}
-
-				.page-btn.ellipsis {
-					border: none;
-					background: transparent;
-					cursor: default;
-					pointer-events: none;
-				}
-
-				.nav-btn {
-					padding: 0.5rem 0.75rem;
-				}
-
-				.nav-btn svg {
-					width: 16px;
-					height: 16px;
-				}
-			</style>
+var h=Object.defineProperty;var u=(l,n,t)=>n in l?h(l,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[n]=t;var o=(l,n,t)=>u(l,typeof n!="symbol"?n+"":n,t);import{B as d,s as p}from"./app-layout-D81L3er1.js";import"./table-BoHSrBty.js";import"./index-DJpTIOwN.js";import"./vendor-BvJLUv9i.js";class m extends d{constructor(){super(...arguments);o(this,"_total",0);o(this,"_currentPage",1);o(this,"_pageSize",10)}connectedCallback(){this.setAttribute("data-ui","pagination"),super.connectedCallback()}static get observedAttributes(){return["total","current-page","page-size"]}attributeChangedCallback(t,a,e){switch(t){case"total":this._total=parseInt(e,10)||0;break;case"current-page":this._currentPage=parseInt(e,10)||1;break;case"page-size":this._pageSize=parseInt(e,10)||10;break}this.render()}get total(){return this._total}set total(t){this._total=t,this.setAttribute("total",String(t))}get currentPage(){return this._currentPage}set currentPage(t){this._currentPage=t,this.setAttribute("current-page",String(t))}get pageSize(){return this._pageSize}set pageSize(t){this._pageSize=t,this.setAttribute("page-size",String(t))}get totalPages(){return Math.ceil(this._total/this._pageSize)}handlePageChange(t){t<1||t>this.totalPages||t===this._currentPage||(this.currentPage=t,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:t,pageSize:this._pageSize,total:this._total,totalPages:this.totalPages},bubbles:!0,composed:!0})))}getPageNumbers(){const t=this.totalPages,a=this._currentPage;if(t<=7)return Array.from({length:t},(r,i)=>i+1);const e=[];return a<=3?e.push(1,2,3,4,"...",t):a>=t-2?e.push(1,"...",t-3,t-2,t-1,t):e.push(1,"...",a-1,a,a+1,"...",t),e}render(){const t=this.totalPages,a=this._currentPage,e=this.getPageNumbers(),r=(a-1)*this._pageSize+1,i=Math.min(a*this._pageSize,this._total);this.shadowRoot.innerHTML=`
+			<style>${p}</style>
 			<div class="pagination-container">
 				<div class="pagination-info">
 					${this._total>0?`Showing ${r} to ${i} of ${this._total}`:"No results"}
@@ -92,14 +16,14 @@ var h=Object.defineProperty;var p=(l,s,t)=>s in l?h(l,s,{enumerable:!0,configura
 							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
 						</svg>
 					</button>
-					${e.map(o=>o==="..."?'<button class="page-btn ellipsis" disabled>...</button>':`
+					${e.map(s=>s==="..."?'<button class="page-btn ellipsis" disabled>...</button>':`
 							<button 
-								class="page-btn ${o===a?"active":""}"
-								data-page="${o}"
-								aria-label="Page ${o}"
-								${o===a?'aria-current="page"':""}
+								class="page-btn ${s===a?"active":""}"
+								data-page="${s}"
+								aria-label="Page ${s}"
+								${s===a?'aria-current="page"':""}
 							>
-								${o}
+								${s}
 							</button>
 						`).join("")}
 					<button 
@@ -115,7 +39,7 @@ var h=Object.defineProperty;var p=(l,s,t)=>s in l?h(l,s,{enumerable:!0,configura
 				</nav>
 				`:""}
 			</div>
-		`,this.attachEventListeners()}attachEventListeners(){this.shadowRoot&&this.shadowRoot.addEventListener("click",t=>{const e=t.target.closest(".page-btn");if(!e||e.disabled)return;const r=e.dataset.page;if(r==="prev")this.handlePageChange(this._currentPage-1);else if(r==="next")this.handlePageChange(this._currentPage+1);else if(r){const i=parseInt(r,10);isNaN(i)||this.handlePageChange(i)}})}}customElements.define("ui-pagination",b);const m=`<h1>Table Demo</h1>\r
+		`,this.attachEventListeners()}attachEventListeners(){this.shadowRoot&&this.shadowRoot.addEventListener("click",t=>{const e=t.target.closest(".page-btn");if(!e||e.disabled)return;const r=e.dataset.page;if(r==="prev")this.handlePageChange(this._currentPage-1);else if(r==="next")this.handlePageChange(this._currentPage+1);else if(r){const i=parseInt(r,10);isNaN(i)||this.handlePageChange(i)}})}}customElements.define("ui-pagination",m);const b=`<h1>Table Demo</h1>\r
 <p class="intro">Example of loading JSON data and rendering a table.</p>\r
 \r
 <div class="demo-section">\r
@@ -139,7 +63,7 @@ var h=Object.defineProperty;var p=(l,s,t)=>s in l?h(l,s,{enumerable:!0,configura
 	<h2>Raw JSON</h2>\r
 	<pre class="json-output" id="json-output">Loading...</pre>\r
 </div>\r
-`,f=":host{display:block;padding:2rem;max-width:1200px;margin:0 auto}.intro{color:var(--color-ink, #0f172a);opacity:.8;margin-bottom:1.5rem}h1{font-size:2rem;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}h2{font-size:1.4rem;margin-top:0;margin-bottom:.75rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:2rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.section-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.status{font-size:.85rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;background:#e2e8f0;color:#334155}.status.loading{background:#fde68a;color:#92400e}.status.success{background:#bbf7d0;color:#166534}.status.error{background:#fecaca;color:#b91c1c}.code-block{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto}code{font-family:Courier New,monospace;font-size:.9rem;color:#334155}.meta{margin-top:.75rem;margin-bottom:.75rem;font-size:.85rem;color:#64748b}ui-pagination{margin-top:1rem}.json-output{margin:0;background:#0f172a;color:#e2e8f0;padding:1rem;border-radius:8px;overflow-x:auto;font-size:.85rem}";class v extends d{constructor(){super(...arguments);n(this,"hasLoaded",!1);n(this,"loading",!1);n(this,"error",null);n(this,"data",null);n(this,"currentPage",1);n(this,"pageSize",10)}connectedCallback(){super.connectedCallback(),this.hasLoaded||(this.hasLoaded=!0,this.loadData())}async loadData(){this.loading=!0,this.error=null,this.render();try{const t=(this.currentPage-1)*this.pageSize,a=await fetch(`https://dummyjson.com/products?limit=${this.pageSize}&skip=${t}`);if(!a.ok)throw new Error(`Request failed: ${a.status}`);const e=await a.json(),r=[{key:"title",label:"Title"},{key:"brand",label:"Brand"},{key:"category",label:"Category"},{key:"price",label:"Price",align:"right"},{key:"rating",label:"Rating",align:"right"},{key:"stock",label:"Stock",align:"right"},{key:"actions",label:"Actions",align:"center",actions:{edit:!0,delete:!0}}],i=e.products.map(o=>({title:o.title,brand:o.brand,category:o.category,price:`$${o.price.toFixed(2)}`,rating:o.rating.toFixed(1),stock:o.stock}));this.data={columns:r,rows:i,meta:{total:e.total,limit:e.limit,skip:e.skip}},this.loading=!1,this.render()}catch(t){this.loading=!1,this.error=t instanceof Error?t.message:"Unknown error",this.render()}}render(){var i,o;this.shadowRoot.innerHTML=`
+`,f=":host{display:block;padding:2rem;max-width:1200px;margin:0 auto}.intro{color:var(--color-ink, #0f172a);opacity:.8;margin-bottom:1.5rem}h1{font-size:2rem;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}h2{font-size:1.4rem;margin-top:0;margin-bottom:.75rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:2rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.section-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.status{font-size:.85rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;background:#e2e8f0;color:#334155}.status.loading{background:#fde68a;color:#92400e}.status.success{background:#bbf7d0;color:#166534}.status.error{background:#fecaca;color:#b91c1c}.code-block{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto}code{font-family:Courier New,monospace;font-size:.9rem;color:#334155}.meta{margin-top:.75rem;margin-bottom:.75rem;font-size:.85rem;color:#64748b}ui-pagination{margin-top:1rem}.json-output{margin:0;background:#0f172a;color:#e2e8f0;padding:1rem;border-radius:8px;overflow-x:auto;font-size:.85rem}";class k extends d{constructor(){super(...arguments);o(this,"hasLoaded",!1);o(this,"loading",!1);o(this,"error",null);o(this,"data",null);o(this,"currentPage",1);o(this,"pageSize",10)}connectedCallback(){super.connectedCallback(),this.hasLoaded||(this.hasLoaded=!0,this.loadData())}async loadData(){this.loading=!0,this.error=null,this.render();try{const t=(this.currentPage-1)*this.pageSize,a=await fetch(`https://dummyjson.com/products?limit=${this.pageSize}&skip=${t}`);if(!a.ok)throw new Error(`Request failed: ${a.status}`);const e=await a.json(),r=[{key:"title",label:"Title"},{key:"brand",label:"Brand"},{key:"category",label:"Category"},{key:"price",label:"Price",align:"right"},{key:"rating",label:"Rating",align:"right"},{key:"stock",label:"Stock",align:"right"},{key:"actions",label:"Actions",align:"center",actions:{edit:!0,delete:!0}}],i=e.products.map(s=>({title:s.title,brand:s.brand,category:s.category,price:`$${s.price.toFixed(2)}`,rating:s.rating.toFixed(1),stock:s.stock}));this.data={columns:r,rows:i,meta:{total:e.total,limit:e.limit,skip:e.skip}},this.loading=!1,this.render()}catch(t){this.loading=!1,this.error=t instanceof Error?t.message:"Unknown error",this.render()}}render(){var i,s;this.shadowRoot.innerHTML=`
 			<style>${f}</style>
-			${m}
-		`;const t=this.shadowRoot.querySelector("#data-status"),a=this.shadowRoot.querySelector("#json-output");t&&(t.textContent=this.loading?"Loading...":this.error?"Error":"Loaded",t.className=`status ${this.loading?"loading":this.error?"error":"success"}`),a&&(a.textContent=this.data?JSON.stringify(this.data,null,2):this.error?this.error:"Loading...");const e=this.shadowRoot.querySelector("#demo-table");e&&this.data&&(e.data={columns:this.data.columns,rows:this.data.rows});const r=this.shadowRoot.querySelector("ui-pagination");if(r&&((i=this.data)!=null&&i.meta)){r.total=this.data.meta.total,r.currentPage=this.currentPage,r.pageSize=this.pageSize;const c=r.cloneNode(!0);(o=r.parentNode)==null||o.replaceChild(c,r),c.addEventListener("page-change",g=>{this.currentPage=g.detail.page,this.loadData()})}}}customElements.define("table-demo",v);export{v as TableDemo};
+			${b}
+		`;const t=this.shadowRoot.querySelector("#data-status"),a=this.shadowRoot.querySelector("#json-output");t&&(t.textContent=this.loading?"Loading...":this.error?"Error":"Loaded",t.className=`status ${this.loading?"loading":this.error?"error":"success"}`),a&&(a.textContent=this.data?JSON.stringify(this.data,null,2):this.error?this.error:"Loading...");const e=this.shadowRoot.querySelector("#demo-table");e&&this.data&&(e.data={columns:this.data.columns,rows:this.data.rows});const r=this.shadowRoot.querySelector("ui-pagination");if(r&&((i=this.data)!=null&&i.meta)){r.total=this.data.meta.total,r.currentPage=this.currentPage,r.pageSize=this.pageSize;const c=r.cloneNode(!0);(s=r.parentNode)==null||s.replaceChild(c,r),c.addEventListener("page-change",g=>{this.currentPage=g.detail.page,this.loadData()})}}}customElements.define("table-demo",k);export{k as TableDemo};

package/dist/index.html

@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Web Components SPA Starter</title>
-  <script type="module" crossorigin src="/assets/index-BZ8Wp8z7.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-BSRW6NCx.css">
+  <script type="module" crossorigin src="/webcomponents/assets/index-DJpTIOwN.js"></script>
+  <link rel="stylesheet" crossorigin href="/webcomponents/assets/index-uHZenGtA.css">
 </head>
 <body>
   <div id="app"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diniz/webcomponents",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Lightweight web components library",
   "type": "module",
   "main": "./dist/webcomponents.umd.js",

package/dist/assets/app-layout-BWpUyzvG.js

@@ -1,34 +0,0 @@
-var m=Object.defineProperty;var f=(r,t,e)=>t in r?m(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e;var c=(r,t,e)=>f(r,typeof t!="symbol"?t+"":t,e);import{s as u}from"./index-BZ8Wp8z7.js";import{f as x}from"./vendor-BvJLUv9i.js";function v(r){let t=r;const e=new Set;return{get:()=>t,set:o=>{Object.is(t,o)||(t=o,e.forEach(a=>a(t)))},subscribe:o=>(e.add(o),()=>e.delete(o))}}class b extends HTMLElement{constructor(){super();c(this,"state");c(this,"signalUnsubs");this.attachShadow({mode:"open"}),this.state={},this.signalUnsubs=new Set}useSignal(e){const o=v(e),a=o.subscribe(()=>this.render());return this.signalUnsubs.add(a),o}setState(e){this.state={...this.state,...e},this.render()}connectedCallback(){this.render()}disconnectedCallback(){this.signalUnsubs.forEach(e=>e()),this.signalUnsubs.clear()}render(){}}const p=':root{--color-primary: #24ec71;--color-primary-contrast: #ffffff;--color-ink: #0f172a;--color-muted: #f1f5f9;--color-header: #f8fafc;--color-border: #e2e8f0;--color-border-strong: #cbd5f5;--color-nav-bg: #222222;--color-nav-text: #ffffff;--shadow-primary: 0 8px 18px rgba(31, 111, 235, .25);--focus-ring: #9ec5ff;--radius-pill: 999px;--radius-md: 12px;--color-page-bg: #ffffff;--color-page-text: #0f172a}body{background:var(--color-page-bg);color:var(--color-page-text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}:host([data-ui="button"]){display:inline-block}:host([data-ui="table"]){display:block}:host([data-ui="layout"]){display:block}:host([data-ui="sidebar"]){display:block}.btn{align-items:center;border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.95rem;font-weight:600;gap:.5rem;line-height:1;padding:.65rem 1.2rem;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn.primary{background:var(--color-primary);color:var(--color-primary-contrast);box-shadow:var(--shadow-primary)}.btn.secondary{background:var(--color-muted);color:var(--color-ink);border-color:var(--color-border-strong)}.btn.ghost{background:transparent;color:var(--color-primary);border-color:var(--color-border-strong)}.btn.has-icon{line-height:1.2}.btn .btn-icon{width:18px;height:18px;flex-shrink:0}.btn .btn-icon svg{width:100%;height:100%}.btn.icon-only{padding:.65rem;aspect-ratio:1}.btn.icon-only.sm{padding:.45rem}.btn.icon-only.lg{padding:.8rem}.btn.sm .btn-icon{width:14px;height:14px}.btn.lg .btn-icon{width:22px;height:22px}.btn.sm{font-size:.85rem;padding:.45rem .9rem;box-shadow:0 4px 12px #a7124426}.btn.md{font-size:.95rem;padding:.65rem 1.2rem}.btn.lg{font-size:1.05rem;padding:.8rem 1.5rem}.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}table{border-collapse:collapse;width:100%}thead{background:var(--color-header)}th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-border);font-size:.95rem;border-right:1px solid var(--color-border)}tr:last-child td{border-bottom:none}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.actions-cell{display:flex;gap:.5rem;justify-content:center}.action-btn{padding:.35rem .7rem;font-size:.8rem;border-radius:4px;cursor:pointer;border:1px solid var(--color-border-strong);background:var(--color-muted);color:var(--color-ink);transition:background-color .12s ease}.action-btn:hover{background:var(--color-border)}.action-btn.edit-btn{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}.action-btn.edit-btn:hover{opacity:.85}.action-btn.delete-btn{background:#ef4444;color:#fff;border-color:#ef4444}.action-btn.delete-btn:hover{opacity:.85}.app-nav{padding:1rem;background:var(--color-nav-bg);color:var(--color-nav-text)}.app-link{color:var(--color-nav-text);margin-right:1rem;text-decoration:none}.signal-demo,.theme-toggle{margin-top:16px;display:flex;align-items:center;gap:12px}.data-table{margin-top:15px}.dashboard-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:24px}.dashboard-sidebar{background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px}.sidebar-title{margin:0 0 12px;font-size:1rem}.sidebar-nav{display:flex;flex-direction:column;gap:10px}.sidebar-link{color:var(--color-ink);text-decoration:none;font-weight:600}.dashboard-main{display:flex;flex-direction:column;gap:12px}.dashboard-actions{display:flex;flex-wrap:wrap;gap:12px}@media (max-width: 900px){.dashboard-layout{grid-template-columns:1fr}}:host([data-ui="input"]){display:block}.input-wrapper{display:flex;flex-direction:column;gap:.35rem}.input-label{font-size:.9rem;font-weight:600;color:var(--color-ink)}.input-field{padding:.6rem .85rem;font-size:.95rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:6px;background:var(--color-page-bg);color:var(--color-page-text);transition:border-color .15s ease,box-shadow .15s ease;outline:none}.input-field::placeholder{color:#94a3b8}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec7126}.input-field:disabled{background:var(--color-muted);cursor:not-allowed;opacity:.7}.input-wrapper.invalid .input-field{border-color:#ef4444}.input-wrapper.invalid .input-field:focus{box-shadow:0 0 0 3px #ef444426}.input-error{font-size:.8rem;color:#ef4444;display:flex;align-items:center;gap:.25rem}.input-error.hidden{display:none}';class y extends b{connectedCallback(){this.setAttribute("data-ui","sidebar"),super.connectedCallback()}render(){this.shadowRoot.innerHTML=`
-      <style>${p}</style>
-      <aside class="dashboard-sidebar">
-        <h2 class="sidebar-title">Workspace</h2>
-        <nav class="sidebar-nav">
-          <a class="sidebar-link" href="/" data-link>Button Demo</a>
-          <a class="sidebar-link" href="/input-demo" data-link>Input Demo</a>
-          <a class="sidebar-link" href="/date-picker" data-link>Date Picker Demo</a>
-          <a class="sidebar-link" href="/table-demo" data-link>Table Demo</a>
-        </nav>
-      </aside>
-    `}}customElements.define("app-sidebar",y);class k extends b{connectedCallback(){this.setAttribute("data-ui","button"),super.connectedCallback()}static get observedAttributes(){return["variant","size","disabled","type","icon","icon-position"]}attributeChangedCallback(){this.render()}getVariant(){const t=this.getAttribute("variant");return t==="secondary"||t==="ghost"?t:"primary"}getSize(){const t=this.getAttribute("size");return t==="sm"||t==="lg"?t:"md"}getType(){return this.getAttribute("type")??"button"}getIcon(){var a;const t=this.getAttribute("icon");if(!t)return null;const e=t.trim();return{html:`<span class="btn-icon">${((a=x.icons[e])==null?void 0:a.toSvg())||""}</span>`,name:e}}getIconPosition(){return this.getAttribute("icon-position")==="right"?"right":"left"}render(){const t=this.getVariant(),e=this.getSize(),o=this.hasAttribute("disabled"),a=this.getType(),l=this.getIcon(),g=this.getIconPosition(),i=l!==null,d=l?l.html:"",n=this.innerHTML.trim(),h=i&&!n;let s;i&&n?s=g==="left"?`${d}<span>${n}</span>`:`<span>${n}</span>${d}`:i?s=d:s=n,this.shadowRoot.innerHTML=`
-			<style>${p}</style>
-			<button
-				part="button"
-				class="btn ${t} ${e}${i?" has-icon":""}${h?" icon-only":""}"
-				type="${a}"
-				${o?"disabled":""}
-			>
-				${s}
-		</button>
-	`}}customElements.define("ui-button",k);class w extends b{connectedCallback(){this.setAttribute("data-ui","layout"),super.connectedCallback()}render(){this.shadowRoot.innerHTML=`
-      <style>${p}</style>
-      <nav class="app-nav">
-        Dashboard
-        <ui-button id="theme-toggle" variant="ghost" size="sm">Toggle Theme</ui-button>
-      </nav>
-      <div class="dashboard-layout">
-        <app-sidebar></app-sidebar>
-        <main class="dashboard-main">
-          <slot></slot>
-        </main>
-      </div>
-    `;const t=this.shadowRoot.querySelector("#theme-toggle");t&&t.addEventListener("click",()=>{const e=u.getState().theme==="shadcn"?"light":"shadcn";u.setState({theme:e}),this.render()})}}customElements.define("app-layout",w);export{b as B,p as s};

package/dist/assets/index-BSRW6NCx.css

@@ -1 +0,0 @@
-:root{--color-primary: #24ec71;--color-primary-contrast: #ffffff;--color-ink: #0f172a;--color-muted: #f1f5f9;--color-header: #f8fafc;--color-border: #e2e8f0;--color-border-strong: #cbd5f5;--color-nav-bg: #222222;--color-nav-text: #ffffff;--shadow-primary: 0 8px 18px rgba(31, 111, 235, .25);--focus-ring: #9ec5ff;--radius-pill: 999px;--radius-md: 12px;--color-page-bg: #ffffff;--color-page-text: #0f172a}body{background:var(--color-page-bg);color:var(--color-page-text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}:host([data-ui="button"]){display:inline-block}:host([data-ui="table"]){display:block}:host([data-ui="layout"]){display:block}:host([data-ui="sidebar"]){display:block}.btn{align-items:center;border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.95rem;font-weight:600;gap:.5rem;line-height:1;padding:.65rem 1.2rem;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn.primary{background:var(--color-primary);color:var(--color-primary-contrast);box-shadow:var(--shadow-primary)}.btn.secondary{background:var(--color-muted);color:var(--color-ink);border-color:var(--color-border-strong)}.btn.ghost{background:transparent;color:var(--color-primary);border-color:var(--color-border-strong)}.btn.has-icon{line-height:1.2}.btn .btn-icon{width:18px;height:18px;flex-shrink:0}.btn .btn-icon svg{width:100%;height:100%}.btn.icon-only{padding:.65rem;aspect-ratio:1}.btn.icon-only.sm{padding:.45rem}.btn.icon-only.lg{padding:.8rem}.btn.sm .btn-icon{width:14px;height:14px}.btn.lg .btn-icon{width:22px;height:22px}.btn.sm{font-size:.85rem;padding:.45rem .9rem;box-shadow:0 4px 12px #a7124426}.btn.md{font-size:.95rem;padding:.65rem 1.2rem}.btn.lg{font-size:1.05rem;padding:.8rem 1.5rem}.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}table{border-collapse:collapse;width:100%}thead{background:var(--color-header)}th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-border);font-size:.95rem;border-right:1px solid var(--color-border)}tr:last-child td{border-bottom:none}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.actions-cell{display:flex;gap:.5rem;justify-content:center}.action-btn{padding:.35rem .7rem;font-size:.8rem;border-radius:4px;cursor:pointer;border:1px solid var(--color-border-strong);background:var(--color-muted);color:var(--color-ink);transition:background-color .12s ease}.action-btn:hover{background:var(--color-border)}.action-btn.edit-btn{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}.action-btn.edit-btn:hover{opacity:.85}.action-btn.delete-btn{background:#ef4444;color:#fff;border-color:#ef4444}.action-btn.delete-btn:hover{opacity:.85}.app-nav{padding:1rem;background:var(--color-nav-bg);color:var(--color-nav-text)}.app-link{color:var(--color-nav-text);margin-right:1rem;text-decoration:none}.signal-demo,.theme-toggle{margin-top:16px;display:flex;align-items:center;gap:12px}.data-table{margin-top:15px}.dashboard-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:24px}.dashboard-sidebar{background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px}.sidebar-title{margin:0 0 12px;font-size:1rem}.sidebar-nav{display:flex;flex-direction:column;gap:10px}.sidebar-link{color:var(--color-ink);text-decoration:none;font-weight:600}.dashboard-main{display:flex;flex-direction:column;gap:12px}.dashboard-actions{display:flex;flex-wrap:wrap;gap:12px}@media (max-width: 900px){.dashboard-layout{grid-template-columns:1fr}}:host([data-ui="input"]){display:block}.input-wrapper{display:flex;flex-direction:column;gap:.35rem}.input-label{font-size:.9rem;font-weight:600;color:var(--color-ink)}.input-field{padding:.6rem .85rem;font-size:.95rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:6px;background:var(--color-page-bg);color:var(--color-page-text);transition:border-color .15s ease,box-shadow .15s ease;outline:none}.input-field::placeholder{color:#94a3b8}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec7126}.input-field:disabled{background:var(--color-muted);cursor:not-allowed;opacity:.7}.input-wrapper.invalid .input-field{border-color:#ef4444}.input-wrapper.invalid .input-field:focus{box-shadow:0 0 0 3px #ef444426}.input-error{font-size:.8rem;color:#ef4444;display:flex;align-items:center;gap:.25rem}.input-error.hidden{display:none}:root[data-theme=shadcn]{--color-primary: #0f172a;--color-primary-contrast: #f8fafc;--color-ink: #0f172a;--color-muted: #f4f4f5;--color-header: #fafafa;--color-border: #e4e4e7;--color-border-strong: #d4d4d8;--color-nav-bg: #ffffff;--color-nav-text: #0f172a;--shadow-primary: 0 8px 18px rgba(15, 23, 42, .18);--focus-ring: #a1a1aa;--color-page-bg: #f8fafc;--color-page-text: #0f172a}

package/dist/assets/index-BZ8Wp8z7.js

@@ -1,2 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/dashboard-page-DTpb-4y2.js","assets/app-layout-BWpUyzvG.js","assets/vendor-BvJLUv9i.js","assets/table-CB6WCNz5.js","assets/date-picker-demo-BjOsNBcV.js","assets/table-demo-BB9ggIfA.js","assets/input-demo-lSk0zPP7.js"])))=>i.map(i=>d[i]);
-(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))l(e);new MutationObserver(e=>{for(const o of e)if(o.type==="childList")for(const r of o.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&l(r)}).observe(document,{childList:!0,subtree:!0});function s(e){const o={};return e.integrity&&(o.integrity=e.integrity),e.referrerPolicy&&(o.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?o.credentials="include":e.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function l(e){if(e.ep)return;e.ep=!0;const o=s(e);fetch(e.href,o)}})();const p=new Set,m={user:null,theme:"light"},y={getState:()=>m,setState(t){Object.assign(m,t),p.forEach(n=>n(m))},subscribe(t){return p.add(t),()=>p.delete(t)}},b="modulepreload",v=function(t){return"/"+t},h={},d=function(n,s,l){let e=Promise.resolve();if(s&&s.length>0){document.getElementsByTagName("link");const r=document.querySelector("meta[property=csp-nonce]"),a=(r==null?void 0:r.nonce)||(r==null?void 0:r.getAttribute("nonce"));e=Promise.allSettled(s.map(i=>{if(i=v(i),i in h)return;h[i]=!0;const u=i.endsWith(".css"),g=u?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${i}"]${g}`))return;const c=document.createElement("link");if(c.rel=u?"stylesheet":b,u||(c.as="script"),c.crossOrigin="",c.href=i,a&&c.setAttribute("nonce",a),document.head.appendChild(c),u)return new Promise((_,L)=>{c.addEventListener("load",_),c.addEventListener("error",()=>L(new Error(`Unable to preload CSS for ${i}`)))})}))}function o(r){const a=new Event("vite:preloadError",{cancelable:!0});if(a.payload=r,window.dispatchEvent(a),!a.defaultPrevented)throw r}return e.then(r=>{for(const a of r||[])a.status==="rejected"&&o(a.reason);return n().catch(o)})},P=[{path:"/",layout:"app-layout",load:()=>d(()=>import("./dashboard-page-DTpb-4y2.js"),__vite__mapDeps([0,1,2,3])),component:"dashboard-page"},{path:"/date-picker",layout:"app-layout",load:()=>d(()=>import("./date-picker-demo-BjOsNBcV.js"),__vite__mapDeps([4,1,2])),component:"date-picker-demo"},{path:"/table-demo",layout:"app-layout",load:()=>d(()=>import("./table-demo-BB9ggIfA.js"),__vite__mapDeps([5,1,2,3])),component:"table-demo"},{path:"/input-demo",layout:"app-layout",load:()=>d(()=>import("./input-demo-lSk0zPP7.js"),__vite__mapDeps([6,1,2])),component:"input-demo"}];async function f(){const t=location.pathname,n=P.find(o=>o.path===t);if(!n)return;await n.load();const s=document.createElement(n.layout),l=document.createElement(n.component);s.appendChild(l);const e=document.querySelector("#app");e&&(e.innerHTML="",e.appendChild(s))}window.addEventListener("popstate",f);window.addEventListener("DOMContentLoaded",f);document.addEventListener("click",t=>{t.target instanceof Element&&t.target.matches("[data-link]")&&(t.preventDefault(),history.pushState(null,"",t.target.getAttribute("href")??"/"),f())});const E=t=>{document.documentElement.dataset.theme=t};E(y.getState().theme);y.subscribe(t=>E(t.theme));export{y as s};