@diniz/webcomponents 1.0.3 → 1.0.4

package/README.md

@@ -175,8 +175,35 @@ import '@diniz/webcomponents/dist/style.css';
   --radius-lg: 0.5rem;
 }
 ```
+**Update `src/main.ts`:**
+```typescript
+import '@diniz/webcomponents';
+import '@diniz/webcomponents/dist/style.css';
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+  <div>
+    <h1>My Web Components App</h1>
+    <ui-button variant="primary">Click Me</ui-button>
+    <ui-date-picker format="DD/MM/YYYY"></ui-date-picker>
+    <ui-table id="myTable"></ui-table>
+  </div>
+`;
+
+// Add some data to the table
+const table = document.getElementById('myTable') as any;
+table.data = {
+  columns: [
+    { key: 'name', label: 'Name' },
+    { key: 'role', label: 'Role' }
+  ],
+  rows: [
+    { name: 'Alice', role: 'Admin' },
+    { name: 'Bob', role: 'User' }
+  ]
+};
+```
 
-## Quick Start
+### Using via CDN or Direct Import
 
 ```html
 <script type="module">
@@ -779,215 +806,6 @@ src/
 └── styles/
     └── theme.css          # Global theme variables
 ```
-
----
-
-## Examples
-
-### Form with Validation
-
-```html
-<form id="myForm">
-  <ui-input 
-    type="email"
-    name="email"
-    label="Email"
-    required
-  ></ui-input>
-  
-  <ui-input 
-    type="password"
-    name="password"
-    label="Password"
-    minlength="8"
-    required
-  ></ui-input>
-  
-  <ui-button type="submit">Submit</ui-button>
-</form>
-```
-
-### Data Table with Pagination
-
-```html
-<ui-table id="dataTable"></ui-table>
-<ui-pagination id="pagination" page-size="10"></ui-pagination>
-
-<script type="module">
-  const table = document.getElementById('dataTable');
-  const pagination = document.getElementById('pagination');
-  
-  async function loadData(page = 1) {
-    const response = await fetch(`/api/data?page=${page}`);
-    const data = await response.json();
-    
-    table.data = {
-      columns: [
-        { key: 'name', label: 'Name' },
-        { key: 'email', label: 'Email' }
-      ],
-      rows: data.items
-    };
-    
-    pagination.total = data.total;
-    pagination.currentPage = page;
-  }
-  
-  pagination.addEventListener('page-change', (e) => {
-    loadData(e.detail.page);
-  });
-  
-  loadData(1);
-</script>
-```
-
-### Date Range Picker
-
-```html
-<ui-date-picker id="startDate" format="DD/MM/YYYY"></ui-date-picker>
-<ui-date-picker id="endDate" format="DD/MM/YYYY"></ui-date-picker>
-
-<script>
-  const start = document.getElementById('startDate');
-  const end = document.getElementById('endDate');
-  
-  start.addEventListener('date-change', (e) => {
-    end.setAttribute('min', e.detail.value);
-  });
-  
-  end.addEventListener('date-change', (e) => {
-    start.setAttribute('max', e.detail.value);
-  });
-</script>
-```
-
-### Confirmation Modal
-
-```html
-<ui-button id="deleteBtn" variant="primary" icon="trash-2">
-  Delete Item
-</ui-button>
-
-<ui-modal id="confirmModal" title="Confirm Delete" size="sm">
-  <p>Are you sure you want to delete this item?</p>
-  <p style="color: #ef4444;">This action cannot be undone.</p>
-  
-  <div slot="footer">
-    <ui-button id="cancelBtn" variant="ghost">Cancel</ui-button>
-    <ui-button id="confirmBtn" variant="primary">Delete</ui-button>
-  </div>
-</ui-modal>
-
-<script>
-  const deleteBtn = document.getElementById('deleteBtn');
-  const modal = document.getElementById('confirmModal');
-  const cancelBtn = document.getElementById('cancelBtn');
-  const confirmBtn = document.getElementById('confirmBtn');
-  
-  deleteBtn.addEventListener('click', () => modal.open());
-  cancelBtn.addEventListener('click', () => modal.close());
-  confirmBtn.addEventListener('click', () => {
-    // Perform delete action
-    console.log('Item deleted');
-    modal.close();
-  });
-</script>
-```
-
-### Dynamic Form with Select
-
-```html
-<form id="userForm">
-  <ui-select 
-    id="roleSelect"
-    label="User Role"
-    placeholder="Select role..."
-  ></ui-select>
-  
-  <ui-select 
-    id="countrySelect"
-    label="Country"
-    placeholder="Select country..."
-    searchable
-  ></ui-select>
-  
-  <ui-button type="submit" variant="primary" icon="check">
-    Create User
-  </ui-button>
-</form>
-
-<script>
-  const roleSelect = document.getElementById('roleSelect');
-  const countrySelect = document.getElementById('countrySelect');
-  
-  // Set options
-  roleSelect.setAttribute('options', JSON.stringify([
-    { value: 'admin', label: 'Administrator' },
-    { value: 'user', label: 'User' },
-    { value: 'guest', label: 'Guest' }
-  ]));
-  
-  countrySelect.setAttribute('options', JSON.stringify([
-    { value: 'us', label: 'United States' },
-    { value: 'uk', label: 'United Kingdom' },
-    { value: 'ca', label: 'Canada' }
-  ]));
-  
-  document.getElementById('userForm').addEventListener('submit', (e) => {
-    e.preventDefault();
-    const role = roleSelect.getAttribute('value');
-    const country = countrySelect.getAttribute('value');
-    console.log({ role, country });
-  });
-</script>
-```
-
-### Select All with Checkboxes
-
-```html
-<ui-checkbox id="selectAll" label="Select All"></ui-checkbox>
-
-<div style="margin-left: 2rem;">
-  <ui-checkbox class="item" label="Item 1" size="sm"></ui-checkbox>
-  <ui-checkbox class="item" label="Item 2" size="sm"></ui-checkbox>
-  <ui-checkbox class="item" label="Item 3" size="sm"></ui-checkbox>
-</div>
-
-<script>
-  const selectAll = document.getElementById('selectAll');
-  const items = document.querySelectorAll('.item');
-  
-  // Update select all based on items
-  function updateSelectAll() {
-    const checkedCount = Array.from(items).filter(
-      item => item.hasAttribute('checked')
-    ).length;
-    
-    if (checkedCount === 0) {
-      selectAll.setChecked(false);
-    } else if (checkedCount === items.length) {
-      selectAll.setChecked(true);
-    } else {
-      selectAll.setIndeterminate(true);
-    }
-  }
-  
-  // Handle select all click
-  selectAll.addEventListener('checkbox-change', (e) => {
-    items.forEach(item => item.setChecked(e.detail.checked));
-  });
-  
-  // Handle individual item clicks
-  items.forEach(item => {
-    item.addEventListener('checkbox-change', updateSelectAll);
-  });
-  
-  updateSelectAll();
-</script>
-```
-
----
-
 ## Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/404.html

@@ -0,0 +1,14 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <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="/webcomponents/assets/index-DJpTIOwN.js"></script>
+  <link rel="stylesheet" crossorigin href="/webcomponents/assets/index-uHZenGtA.css">
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

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

@@ -0,0 +1,37 @@
+var f=Object.defineProperty;var g=(r,e,o)=>e in r?f(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o;var c=(r,e,o)=>g(r,typeof e!="symbol"?e+"":e,o);import{s as m}from"./index-DJpTIOwN.js";import{f as x}from"./vendor-BvJLUv9i.js";function v(r){let e=r;const o=new Set;return{get:()=>e,set:t=>{Object.is(e,t)||(e=t,o.forEach(a=>a(e)))},subscribe:t=>(o.add(t),()=>o.delete(t))}}class p extends HTMLElement{constructor(){super();c(this,"state");c(this,"signalUnsubs");this.attachShadow({mode:"open"}),this.state={},this.signalUnsubs=new Set}useSignal(o){const t=v(o),a=t.subscribe(()=>this.render());return this.signalUnsubs.add(a),t}setState(o){this.state={...this.state,...o},this.render()}connectedCallback(){this.render()}disconnectedCallback(){this.signalUnsubs.forEach(o=>o()),this.signalUnsubs.clear()}render(){}}const b=':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}:host([data-ui="checkbox"]){display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}:host([data-ui="checkbox"][disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{display:inline-flex;align-items:center;gap:.75rem}.checkbox-box{position:relative;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--color-border, #cbd5e1);border-radius:var(--radius-sm, 4px);background:#fff;transition:all .2s;flex-shrink:0;box-sizing:border-box}.checkbox-box.size-sm{min-width:16px;max-width:16px;min-height:16px;max-height:16px}.checkbox-box.size-md{min-width:18px;max-width:18px;min-height:18px;max-height:18px}.checkbox-box.size-lg{min-width:20px;max-width:20px;min-height:20px;max-height:20px}.checkbox-box:hover:not(.disabled){border-color:var(--color-primary, #24ec71)}.checkbox-box.checked,.checkbox-box.indeterminate{background:var(--color-primary, #24ec71);border-color:var(--color-primary, #24ec71)}.checkbox-box.disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed}.checkbox-icon{display:none;color:#fff;position:absolute}.checkbox-box.checked .checkbox-icon.check,.checkbox-box.indeterminate .checkbox-icon.minus{display:block}.checkbox-icon.check{width:12px;height:12px}.checkbox-icon.minus{width:10px;height:10px}.checkbox-label{font-size:.95rem;color:var(--color-ink, #0f172a);line-height:1.5}.checkbox-container.size-sm .checkbox-label{font-size:.875rem}.checkbox-container.size-lg .checkbox-label{font-size:1rem}input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.modal-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;animation:fadeIn .2s ease-out}.modal-backdrop.open{display:flex;align-items:center;justify-content:center;padding:1rem}.modal-content{background:var(--color-surface, white);border-radius:var(--radius-lg, 16px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;display:flex;flex-direction:column;width:100%;animation:slideUp .2s ease-out}.modal-content.sm{max-width:400px}.modal-content.md{max-width:600px}.modal-content.lg{max-width:800px}.modal-content.xl{max-width:1200px}.modal-content.full{max-width:95vw}.modal-header{padding:1.5rem;border-bottom:1px solid var(--color-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:1.25rem;font-weight:600;color:var(--color-ink, #0f172a);margin:0}.modal-close{background:none;border:none;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md, 8px);color:var(--color-text-muted, #64748b);transition:all .2s}.modal-close:hover{background:var(--color-muted, #f1f5f9);color:var(--color-ink, #0f172a)}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-footer{padding:1.5rem;border-top:1px solid var(--color-border, #e2e8f0);display:flex;gap:.75rem;justify-content:flex-end}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="select"]){display:block;width:90%}.select-container{position:relative;width:100%}.select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--color-ink, #0f172a)}.select-trigger{width:100%;padding:.625rem 1rem;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s;font-size:.95rem;color:var(--color-ink, #0f172a)}.select-trigger:hover:not(:disabled){border-color:var(--color-primary, #24ec71)}.select-trigger:focus{outline:none;border-color:var(--color-primary, #24ec71);box-shadow:0 0 0 3px #24ec711a}.select-trigger:disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed;opacity:.6}.select-trigger.open{border-color:var(--color-primary, #24ec71)}.select-placeholder{color:var(--color-text-muted, #94a3b8);flex:1;text-align:left}.select-placeholder.has-selection{color:var(--color-ink, #0f172a)}.select-arrow{display:flex;transition:transform .2s;color:var(--color-text-muted, #64748b)}.select-arrow.open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:300px;overflow-y:auto;z-index:1000;display:none;animation:slideDown .15s ease-out}.select-dropdown.open{display:block}.select-search{width:100%;padding:.625rem 1rem;border:none;border-bottom:1px solid var(--color-border, #e2e8f0);font-size:.95rem;outline:none}.select-search:focus{background:var(--color-muted, #f1f5f9)}.select-option{padding:.625rem 1rem;cursor:pointer;transition:background .15s;color:var(--color-ink, #0f172a);font-size:.95rem}.select-option:hover:not(.disabled){background:var(--color-muted, #f1f5f9)}.select-option.selected{background:#24ec711a;color:var(--color-primary, #24ec71);font-weight:500}.select-option.disabled{opacity:.5;cursor:not-allowed}.select-empty{padding:1rem;text-align:center;color:var(--color-text-muted, #94a3b8);font-size:.875rem}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="pagination"]){display:block}.pagination-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.pagination-info{font-size:.9rem;color:var(--color-ink);opacity:.7}.pagination{display:flex;align-items:center;gap:.25rem}.page-btn{min-width:2.5rem;height:2.5rem;padding:.5rem;border:1px solid var(--color-border);background:#fff;color:var(--color-ink);font-size:.9rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .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:.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:.5rem .75rem}.nav-btn svg{width:16px;height:16px}:host([data-ui="date-picker"]){display:inline-block;width:100%;max-width:300px}.date-picker-container{position:relative;display:flex;flex-direction:column;gap:.5rem}.date-input-wrapper{position:relative;display:flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;transition:all .2s ease}.date-input-wrapper:hover:not(.disabled){border-color:var(--color-border-strong)}.date-input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec711a;outline:none}.date-input-wrapper.disabled{background:var(--color-muted);cursor:not-allowed;opacity:.6}.formatted-input{flex:1;border:none;padding:.75rem 1rem;font-size:.95rem;font-family:inherit;background:transparent;color:var(--color-ink);outline:none}.formatted-input:disabled{cursor:not-allowed;color:var(--color-ink);opacity:.7}.formatted-input::placeholder{color:#94a3b8;opacity:.7}.formatted-input.invalid{color:#dc2626}.hidden-date-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.calendar-btn{padding:.5rem;margin-right:.5rem;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-ink);opacity:.6;transition:all .2s ease;border-radius:6px}.calendar-btn:hover:not(:disabled){background:var(--color-muted);opacity:1}.calendar-btn:disabled{cursor:not-allowed;opacity:.3}.calendar-icon{width:20px;height:20px}.format-label{font-size:.75rem;color:var(--color-ink);opacity:.6;padding:0 .25rem;font-weight:500}';class y extends p{connectedCallback(){this.setAttribute("data-ui","sidebar"),super.connectedCallback()}render(){this.shadowRoot.innerHTML=`
+      <style>${b}</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>
+          <a class="sidebar-link" href="/modal" data-link>Modal Demo</a>
+          <a class="sidebar-link" href="/select" data-link>Select Demo</a>
+          <a class="sidebar-link" href="/checkbox" data-link>Checkbox Demo</a>
+        </nav>
+      </aside>
+    `}}customElements.define("app-sidebar",y);class k extends p{connectedCallback(){this.setAttribute("data-ui","button"),super.connectedCallback()}static get observedAttributes(){return["variant","size","disabled","type","icon","icon-position"]}attributeChangedCallback(){this.render()}getVariant(){const e=this.getAttribute("variant");return e==="secondary"||e==="ghost"?e:"primary"}getSize(){const e=this.getAttribute("size");return e==="sm"||e==="lg"?e:"md"}getType(){return this.getAttribute("type")??"button"}getIcon(){var a;const e=this.getAttribute("icon");if(!e)return null;const o=e.trim();return{html:`<span class="btn-icon">${((a=x.icons[o])==null?void 0:a.toSvg())||""}</span>`,name:o}}getIconPosition(){return this.getAttribute("icon-position")==="right"?"right":"left"}render(){const e=this.getVariant(),o=this.getSize(),t=this.hasAttribute("disabled"),a=this.getType(),s=this.getIcon(),u=this.getIconPosition(),n=s!==null,d=s?s.html:"",i=this.innerHTML.trim(),h=n&&!i;let l;n&&i?l=u==="left"?`${d}<span>${i}</span>`:`<span>${i}</span>${d}`:n?l=d:l=i,this.shadowRoot.innerHTML=`
+			<style>${b}</style>
+			<button
+				part="button"
+				class="btn ${e} ${o}${n?" has-icon":""}${h?" icon-only":""}"
+				type="${a}"
+				${t?"disabled":""}
+			>
+				${l}
+		</button>
+	`}}customElements.define("ui-button",k);class w extends p{connectedCallback(){this.setAttribute("data-ui","layout"),super.connectedCallback()}render(){this.shadowRoot.innerHTML=`
+      <style>${b}</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 e=this.shadowRoot.querySelector("#theme-toggle");e&&e.addEventListener("click",()=>{const o=m.getState().theme==="shadcn"?"light":"shadcn";m.setState({theme:o}),this.render()})}}customElements.define("app-layout",w);export{p as B,b as s};

package/dist/assets/checkbox-demo-page-n4kXIN81.js

@@ -0,0 +1,157 @@
+var E=Object.defineProperty;var C=(n,t,e)=>t in n?E(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var v=(n,t,e)=>C(n,typeof t!="symbol"?t+"":t,e);import{B as y,s as w}from"./app-layout-D81L3er1.js";import"./index-DJpTIOwN.js";import"./vendor-BvJLUv9i.js";const z=`
+	<div class="demo-container">
+		<h1>Checkbox Component Demo</h1>
+		<p>Flexible checkbox with sizes, states, and indeterminate support.</p>
+
+		<div class="demo-section">
+			<h2>Basic Checkboxes</h2>
+			<div class="checkbox-group">
+				<ui-checkbox id="basic1" label="Accept terms and conditions"></ui-checkbox>
+				<ui-checkbox id="basic2" label="Subscribe to newsletter" checked></ui-checkbox>
+				<ui-checkbox id="basic3" label="Disabled checkbox" disabled></ui-checkbox>
+				<ui-checkbox id="basic4" label="Disabled & checked" disabled checked></ui-checkbox>
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Checkbox Sizes</h2>
+			<div class="checkbox-group">
+				<ui-checkbox id="size1" label="Small checkbox" size="sm"></ui-checkbox>
+				<ui-checkbox id="size2" label="Medium checkbox (default)" size="md"></ui-checkbox>
+				<ui-checkbox id="size3" label="Large checkbox" size="lg"></ui-checkbox>
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Indeterminate State</h2>
+			<p style="color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: 1rem;">
+				Useful for "select all" scenarios where some items are selected.
+			</p>
+			<div style="background: white; padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border);">
+				<ui-checkbox id="selectAll" label="Select All" size="md"></ui-checkbox>
+				<div style="margin-left: 2rem; margin-top: 1rem;" class="checkbox-group">
+					<ui-checkbox class="item-checkbox" label="Item 1" size="sm"></ui-checkbox>
+					<ui-checkbox class="item-checkbox" label="Item 2" size="sm"></ui-checkbox>
+					<ui-checkbox class="item-checkbox" label="Item 3" size="sm"></ui-checkbox>
+					<ui-checkbox class="item-checkbox" label="Item 4" size="sm"></ui-checkbox>
+				</div>
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Checkbox Group (Form)</h2>
+			<form id="preferencesForm" style="max-width: 600px;">
+				<fieldset style="border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem;">
+					<legend style="font-weight: 600; padding: 0 0.5rem;">Notification Preferences</legend>
+					<div class="checkbox-group">
+						<ui-checkbox id="emailNotif" label="Email notifications" checked></ui-checkbox>
+						<ui-checkbox id="smsNotif" label="SMS notifications"></ui-checkbox>
+						<ui-checkbox id="pushNotif" label="Push notifications" checked></ui-checkbox>
+						<ui-checkbox id="weeklyDigest" label="Weekly digest"></ui-checkbox>
+					</div>
+				</fieldset>
+
+				<div style="margin-top: 1.5rem; display: flex; gap: 1rem;">
+					<ui-button type="submit" variant="primary" icon="save">Save Preferences</ui-button>
+					<ui-button type="button" id="resetPreferences" variant="ghost">Reset</ui-button>
+				</div>
+			</form>
+			<div id="formResult" class="result-display" style="display: none; margin-top: 1rem;">
+				<strong>Saved Preferences:</strong><br>
+				<span id="formValue"></span>
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Event Handling</h2>
+			<div style="background: white; padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border);">
+				<ui-checkbox id="eventCheckbox" label="Click me to trigger event"></ui-checkbox>
+			</div>
+			<div id="eventResult" class="result-display" style="display: none; margin-top: 1rem;">
+				<strong>Event Log:</strong><br>
+				<div id="eventLog" style="font-family: monospace; font-size: 0.875rem; margin-top: 0.5rem;"></div>
+			</div>
+		</div>
+	</div>
+`,R=`
+	.demo-container {
+		padding: 2rem;
+		max-width: 1200px;
+		margin: 0 auto;
+	}
+
+	.demo-container h1 {
+		font-size: 2rem;
+		margin-bottom: 0.5rem;
+		color: var(--color-ink);
+	}
+
+	.demo-container > p {
+		color: var(--color-text-muted);
+		margin-bottom: 2rem;
+	}
+
+	.demo-section {
+		margin-bottom: 3rem;
+		padding-bottom: 2rem;
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	.demo-section:last-child {
+		border-bottom: none;
+	}
+
+	.demo-section h2 {
+		font-size: 1.5rem;
+		margin-bottom: 1rem;
+		color: var(--color-ink);
+	}
+
+	.checkbox-group {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.result-display {
+		padding: 1rem;
+		background: var(--color-muted);
+		border-radius: var(--radius-md);
+		border-left: 4px solid var(--color-primary);
+	}
+
+	fieldset {
+		margin: 0;
+	}
+
+	legend {
+		color: var(--color-ink);
+	}
+`;class I extends y{constructor(){super(...arguments);v(this,"checked",this.useSignal(!1));v(this,"indeterminate",this.useSignal(!1))}connectedCallback(){this.setAttribute("data-ui","checkbox"),super.connectedCallback()}static get observedAttributes(){return["checked","disabled","indeterminate"]}attributeChangedCallback(e,r,i){e==="checked"&&r!==i&&this.checked.set(i!==null),e==="indeterminate"&&r!==i&&this.indeterminate.set(i!==null),this.render()}handleChange(){if(this.hasAttribute("disabled"))return;this.indeterminate.get()&&(this.indeterminate.set(!1),this.removeAttribute("indeterminate"));const e=!this.checked.get();this.checked.set(e),e?this.setAttribute("checked",""):this.removeAttribute("checked"),this.dispatchEvent(new CustomEvent("checkbox-change",{bubbles:!0,composed:!0,detail:{checked:e}}))}setChecked(e){this.checked.set(e),e?this.setAttribute("checked",""):this.removeAttribute("checked"),this.indeterminate.set(!1),this.removeAttribute("indeterminate")}setIndeterminate(e){this.indeterminate.set(e),e?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}render(){const e=this.checked.get(),r=this.indeterminate.get(),i=this.hasAttribute("disabled"),a=this.getAttribute("label")||"",m=this.getAttribute("size")||"md",l={sm:"size-sm",md:"size-md",lg:"size-lg"};this.shadowRoot.innerHTML=`
+			<style>${w}</style>
+
+			<label class="checkbox-container ${l[m]}">
+				<input 
+					type="checkbox" 
+					${e?"checked":""}
+					${i?"disabled":""}
+				>
+				<div class="checkbox-box ${l[m]} ${e?"checked":""} ${r?"indeterminate":""} ${i?"disabled":""}" part="checkbox">
+					<svg class="checkbox-icon check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+						<polyline points="20 6 9 17 4 12"></polyline>
+					</svg>
+					<svg class="checkbox-icon minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+						<line x1="5" y1="12" x2="19" y2="12"></line>
+					</svg>
+				</div>
+				${a?`<span class="checkbox-label">${a}</span>`:"<slot></slot>"}
+			</label>
+		`;const o=this.shadowRoot.querySelector(".checkbox-container");o==null||o.addEventListener("click",d=>{d.preventDefault(),this.handleChange()})}}customElements.define("ui-checkbox",I);class S extends y{async connectedCallback(){super.connectedCallback(),await Promise.all([customElements.whenDefined("ui-checkbox"),customElements.whenDefined("ui-button")]),await new Promise(t=>setTimeout(t,10)),this.setupEventListeners()}setupEventListeners(){const t=this.shadowRoot.getElementById("selectAll"),e=this.shadowRoot.querySelectorAll(".item-checkbox"),r=()=>{const s=Array.from(e).filter(c=>c.hasAttribute("checked")).length;s===0?t==null||t.setChecked(!1):s===e.length?t==null||t.setChecked(!0):t==null||t.setIndeterminate(!0)};t==null||t.addEventListener("checkbox-change",s=>{const c=s.detail.checked;e.forEach(g=>{g.setChecked(c)})}),e.forEach(s=>{s.addEventListener("checkbox-change",r)}),r();const i=this.shadowRoot.getElementById("preferencesForm"),a=this.shadowRoot.getElementById("formResult"),m=this.shadowRoot.getElementById("formValue"),l=this.shadowRoot.getElementById("resetPreferences"),o=this.shadowRoot.getElementById("emailNotif"),d=this.shadowRoot.getElementById("smsNotif"),h=this.shadowRoot.getElementById("pushNotif"),b=this.shadowRoot.getElementById("weeklyDigest");i==null||i.addEventListener("submit",s=>{s.preventDefault();const c={email:(o==null?void 0:o.hasAttribute("checked"))||!1,sms:(d==null?void 0:d.hasAttribute("checked"))||!1,push:(h==null?void 0:h.hasAttribute("checked"))||!1,weekly:(b==null?void 0:b.hasAttribute("checked"))||!1};a&&m&&(a.style.display="block",m.innerHTML=`
+					Email: <strong>${c.email?"✓ Enabled":"✗ Disabled"}</strong><br>
+					SMS: <strong>${c.sms?"✓ Enabled":"✗ Disabled"}</strong><br>
+					Push: <strong>${c.push?"✓ Enabled":"✗ Disabled"}</strong><br>
+					Weekly Digest: <strong>${c.weekly?"✓ Enabled":"✗ Disabled"}</strong>
+				`)}),l==null||l.addEventListener("click",()=>{o==null||o.setChecked(!0),d==null||d.setChecked(!1),h==null||h.setChecked(!0),b==null||b.setChecked(!1),a&&(a.style.display="none")});const k=this.shadowRoot.getElementById("eventCheckbox"),p=this.shadowRoot.getElementById("eventResult"),u=this.shadowRoot.getElementById("eventLog");let f=0;k==null||k.addEventListener("checkbox-change",s=>{f++;const c=new Date().toLocaleTimeString(),g=s.detail.checked?"checked":"unchecked";if(p&&u){p.style.display="block";const x=document.createElement("div");for(x.style.color=s.detail.checked?"var(--color-primary)":"var(--color-text-muted)",x.textContent=`[${c}] Event #${f}: ${g}`,u.prepend(x);u.children.length>5;)u.removeChild(u.lastChild)}})}render(){this.shadowRoot.innerHTML=`
+			<style>${R}</style>
+			${z}
+		`}}customElements.define("checkbox-demo-page",S);

package/dist/assets/{dashboard-page-DTpb-4y2.js → dashboard-page-D9gcDgAT.js}

@@ -1,4 +1,4 @@
-var m=Object.defineProperty;var b=(e,t,n)=>t in e?m(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var u=(e,t,n)=>b(e,typeof t!="symbol"?t+"":t,n);import{B as v,s as g}from"./app-layout-BWpUyzvG.js";import"./table-CB6WCNz5.js";import{s as i}from"./index-BZ8Wp8z7.js";import"./vendor-BvJLUv9i.js";const y=`<h1>Button</h1>
+var m=Object.defineProperty;var b=(e,t,n)=>t in e?m(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var u=(e,t,n)=>b(e,typeof t!="symbol"?t+"":t,n);import{B as v,s as g}from"./app-layout-D81L3er1.js";import"./table-BoHSrBty.js";import{s as i}from"./index-DJpTIOwN.js";import"./vendor-BvJLUv9i.js";const y=`<h1>Button</h1>
 <p>Your enterprise-ready Web Components SPA is running 🚀</p>
 <div class="dashboard-actions">
 	<ui-button variant="primary" size="md">Get Started</ui-button>