@diniz/webcomponents 1.0.6 → 1.1.2

package/README.md

@@ -854,6 +854,47 @@ All components use CSS custom properties for easy theming:
 
 ---
 
+## Dependencies
+
+### Icons
+
+This library uses **[Feather Icons](https://feathericons.com/)** for beautiful, minimal SVG icons. Feather provides a consistent set of 286 icons perfect for UI components.
+
+```typescript
+import feather from 'feather-icons';
+
+// Use icons in components
+<ui-button icon="plus">Add Item</ui-button>
+<ui-button icon="trash-2" variant="danger">Delete</ui-button>
+```
+
+[Browse all available Feather icons →](https://feathericons.com/)
+
+---
+
+## Bundle Size
+
+@diniz/webcomponents is extremely lightweight with zero runtime dependencies:
+
+| Package | Size (minified) | Size (gzipped) |
+|---------|-----------------|----------------|
+| **@diniz/webcomponents** | ~45KB | ~12KB |
+| Vue 3 + Router | ~185KB | ~65KB |
+| React 18 + Router | ~245KB | ~85KB |
+| Angular 15 | ~500KB+ | ~150KB+ |
+| Svelte | ~60KB | ~15KB |
+
+*Sizes are approximate and vary based on included components and tree-shaking effectiveness*
+
+**Why Web Components?**
+- ✅ No framework overhead - use with any framework or vanilla JS
+- ✅ Smaller initial bundle size than traditional frameworks
+- ✅ Progressive enhancement - works without JavaScript
+- ✅ Share components across different projects/frameworks
+- ✅ Built-in browser APIs - no external polyfills needed for modern browsers
+
+---
+
 ## Browser Support
 
 - ✅ Chrome/Edge (latest)

package/dist/assets/{checkbox-demo-page-j3Ylexv2.js → checkbox-demo-page-C-tPBGML.js}

@@ -1,4 +1,4 @@
-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-Dq81XbRZ.js";import"./index-CzQ41fnj.js";import"./vendor-BvJLUv9i.js";const z=`
+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,t as w}from"./index-BiVNQ5Fp.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>
@@ -127,7 +127,7 @@ var E=Object.defineProperty;var C=(n,t,e)=>t in n?E(n,t,{enumerable:!0,configura
 	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=`
+`;class S 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]}">
@@ -137,16 +137,11 @@ var E=Object.defineProperty;var C=(n,t,e)=>t in n?E(n,t,{enumerable:!0,configura
 					${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=`
+		`;const o=this.shadowRoot.querySelector(".checkbox-container");o==null||o.addEventListener("click",d=>{d.preventDefault(),this.handleChange()})}}customElements.define("ui-checkbox",S);class I 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>
@@ -154,4 +149,4 @@ var E=Object.defineProperty;var C=(n,t,e)=>t in n?E(n,t,{enumerable:!0,configura
 				`)}),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);
+		`}}customElements.define("checkbox-demo-page",I);

package/dist/assets/{dashboard-page-DAzkVezy.js → dashboard-page-DG9XqSlN.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-Dq81XbRZ.js";import"./table-CSpGgpLR.js";import{s as i}from"./index-CzQ41fnj.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,t as g,s as i}from"./index-BiVNQ5Fp.js";import"./table-DAobVRE7.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>
@@ -31,4 +31,4 @@ var m=Object.defineProperty;var b=(e,t,n)=>t in e?m(e,t,{enumerable:!0,configura
 </div>
 \r
 \r
-`;class p extends v{constructor(){super(...arguments);u(this,"count",this.useSignal(0))}render(){this.shadowRoot.innerHTML=`<style>${g}</style>${y}`;const n=this.shadowRoot.querySelector("#signal-count");n&&(n.textContent=String(this.count.get()));const o=this.shadowRoot.querySelector("#theme-label"),d=i.getState().theme;o&&(o.textContent=d==="shadcn"?"Shadcn":"Default");const a=this.shadowRoot.querySelector("#theme-toggle");a&&a.addEventListener("click",()=>{const h=i.getState().theme==="shadcn"?"light":"shadcn";i.setState({theme:h}),this.render()});const s=this.shadowRoot.querySelector("#signal-inc");s&&s.addEventListener("click",()=>{this.count.set(this.count.get()+1)});const c=[{key:"name",label:"Name"},{key:"role",label:"Role"},{key:"status",label:"Status"},{key:"score",label:"Score",align:"right"}],l=[{name:"Ava Martins",role:"Admin",status:"Active",score:298},{name:"Diego Silva",role:"Editor",status:"Active",score:87},{name:"Lia Costa",role:"Viewer",status:"Inactive",score:72}],r=this.shadowRoot.querySelector("ui-table");r&&(r.data={columns:c,rows:l})}}customElements.define("dashboard-page",p);
+`;class p extends v{constructor(){super(...arguments);u(this,"count",this.useSignal(0))}render(){this.shadowRoot.innerHTML=`<style>${g}</style>${y}`;const n=this.shadowRoot.querySelector("#signal-count");n&&(n.textContent=String(this.count.get()));const o=this.shadowRoot.querySelector("#theme-label"),d=i.getState().theme;o&&(o.textContent=d==="shadcn"?"Shadcn":"Default");const a=this.shadowRoot.querySelector("#theme-toggle");a&&a.addEventListener("click",()=>{const l=i.getState().theme==="shadcn"?"light":"shadcn";i.setState({theme:l}),this.render()});const s=this.shadowRoot.querySelector("#signal-inc");s&&s.addEventListener("click",()=>{this.count.set(this.count.get()+1)});const c=[{key:"name",label:"Name"},{key:"role",label:"Role"},{key:"status",label:"Status"},{key:"score",label:"Score",align:"right"}],h=[{name:"Ava Martins",role:"Admin",status:"Active",score:298},{name:"Diego Silva",role:"Editor",status:"Active",score:87},{name:"Lia Costa",role:"Viewer",status:"Inactive",score:72}],r=this.shadowRoot.querySelector("ui-table");r&&(r.data={columns:c,rows:h})}}customElements.define("dashboard-page",p);

package/dist/assets/{date-picker-demo-DH82BhNJ.js → date-picker-demo-BFqT8vXb.js}

@@ -1,5 +1,5 @@
-var v=Object.defineProperty;var m=(c,s,t)=>s in c?v(c,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[s]=t;var d=(c,s,t)=>m(c,typeof s!="symbol"?s+"":s,t);import{B as l,s as h}from"./app-layout-Dq81XbRZ.js";import"./index-CzQ41fnj.js";import"./vendor-BvJLUv9i.js";class k extends l{constructor(){super(...arguments);d(this,"inputElement",null)}connectedCallback(){this.setAttribute("data-ui","date-picker"),super.connectedCallback(),this.attachEventListeners()}static get observedAttributes(){return["value","format","min","max","disabled","placeholder"]}attributeChangedCallback(){this.render(),this.attachEventListeners()}getFormat(){const t=this.getAttribute("format");return t==="DD/MM/YYYY"||t==="MM/DD/YYYY"||t==="DD-MM-YYYY"||t==="MM-DD-YYYY"?t:"YYYY-MM-DD"}getValue(){return this.getAttribute("value")||""}getMin(){return this.getAttribute("min")||""}getMax(){return this.getAttribute("max")||""}getPlaceholder(){return this.getAttribute("placeholder")||this.getFormat()}isDisabled(){return this.hasAttribute("disabled")}formatDate(t,a){if(!t)return"";const e=t.split("-");if(e.length!==3)return t;const[i,r,n]=e;switch(a){case"DD/MM/YYYY":return`${n}/${r}/${i}`;case"MM/DD/YYYY":return`${r}/${n}/${i}`;case"DD-MM-YYYY":return`${n}-${r}-${i}`;case"MM-DD-YYYY":return`${r}-${n}-${i}`;case"YYYY-MM-DD":default:return t}}parseDate(t,a){if(!t)return"";let e,i,r,n;switch(a){case"DD/MM/YYYY":if(e=t.split("/"),e.length!==3)return"";[n,r,i]=e;break;case"MM/DD/YYYY":if(e=t.split("/"),e.length!==3)return"";[r,n,i]=e;break;case"DD-MM-YYYY":if(e=t.split("-"),e.length!==3)return"";[n,r,i]=e;break;case"MM-DD-YYYY":if(e=t.split("-"),e.length!==3)return"";[r,n,i]=e;break;case"YYYY-MM-DD":default:return t}return r=r.padStart(2,"0"),n=n.padStart(2,"0"),`${i}-${r}-${n}`}attachEventListeners(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".formatted-input"),a=this.shadowRoot.querySelector('input[type="date"]'),e=this.shadowRoot.querySelector(".calendar-btn");if(!t||!a)return;const i=()=>{const r=t.value,n=this.getFormat(),o=this.parseDate(r,n);this.isValidDate(o)?(a.value=o,t.classList.remove("invalid"),this.dispatchDateChange(o)):r===""?(a.value="",t.classList.remove("invalid"),this.dispatchDateChange("")):t.classList.add("invalid")};t.addEventListener("blur",i),t.addEventListener("keydown",r=>{r.key==="Enter"&&(i(),t.blur())}),a.addEventListener("change",r=>{const o=r.target.value,u=this.getFormat(),p=this.formatDate(o,u);t.value=p,t.classList.remove("invalid"),this.dispatchDateChange(o)}),e&&e.addEventListener("click",()=>{var r;(r=a.showPicker)==null||r.call(a)})}isValidDate(t){if(!t)return!1;const a=new Date(t);return a instanceof Date&&!isNaN(a.getTime())}dispatchDateChange(t){const a=this.getFormat(),e=this.formatDate(t,a);this.dispatchEvent(new CustomEvent("date-change",{detail:{value:t,formattedValue:e,format:a},bubbles:!0,composed:!0})),this.setAttribute("value",t)}getISOValue(){return this.getValue()}getFormattedValue(){const t=this.getValue(),a=this.getFormat();return this.formatDate(t,a)}setValue(t){this.setAttribute("value",t)}clear(){this.setAttribute("value","")}render(){const t=this.getValue(),a=this.getFormat(),e=this.getMin(),i=this.getMax(),r=this.isDisabled(),n=this.getPlaceholder(),o=this.formatDate(t,a);this.shadowRoot.innerHTML=`
-			<style>${h}</style>
+var v=Object.defineProperty;var h=(c,s,t)=>s in c?v(c,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[s]=t;var d=(c,s,t)=>h(c,typeof s!="symbol"?s+"":s,t);import{B as l,t as m}from"./index-BiVNQ5Fp.js";import"./vendor-BvJLUv9i.js";class k extends l{constructor(){super(...arguments);d(this,"inputElement",null)}connectedCallback(){this.setAttribute("data-ui","date-picker"),super.connectedCallback(),this.attachEventListeners()}static get observedAttributes(){return["value","format","min","max","disabled","placeholder"]}attributeChangedCallback(){this.render(),this.attachEventListeners()}getFormat(){const t=this.getAttribute("format");return t==="DD/MM/YYYY"||t==="MM/DD/YYYY"||t==="DD-MM-YYYY"||t==="MM-DD-YYYY"?t:"YYYY-MM-DD"}getValue(){return this.getAttribute("value")||""}getMin(){return this.getAttribute("min")||""}getMax(){return this.getAttribute("max")||""}getPlaceholder(){return this.getAttribute("placeholder")||this.getFormat()}isDisabled(){return this.hasAttribute("disabled")}formatDate(t,a){if(!t)return"";const e=t.split("-");if(e.length!==3)return t;const[i,r,n]=e;switch(a){case"DD/MM/YYYY":return`${n}/${r}/${i}`;case"MM/DD/YYYY":return`${r}/${n}/${i}`;case"DD-MM-YYYY":return`${n}-${r}-${i}`;case"MM-DD-YYYY":return`${r}-${n}-${i}`;case"YYYY-MM-DD":default:return t}}parseDate(t,a){if(!t)return"";let e,i,r,n;switch(a){case"DD/MM/YYYY":if(e=t.split("/"),e.length!==3)return"";[n,r,i]=e;break;case"MM/DD/YYYY":if(e=t.split("/"),e.length!==3)return"";[r,n,i]=e;break;case"DD-MM-YYYY":if(e=t.split("-"),e.length!==3)return"";[n,r,i]=e;break;case"MM-DD-YYYY":if(e=t.split("-"),e.length!==3)return"";[r,n,i]=e;break;case"YYYY-MM-DD":default:return t}return r=r.padStart(2,"0"),n=n.padStart(2,"0"),`${i}-${r}-${n}`}attachEventListeners(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".formatted-input"),a=this.shadowRoot.querySelector('input[type="date"]'),e=this.shadowRoot.querySelector(".calendar-btn");if(!t||!a)return;const i=()=>{const r=t.value,n=this.getFormat(),o=this.parseDate(r,n);this.isValidDate(o)?(a.value=o,t.classList.remove("invalid"),this.dispatchDateChange(o)):r===""?(a.value="",t.classList.remove("invalid"),this.dispatchDateChange("")):t.classList.add("invalid")};t.addEventListener("blur",i),t.addEventListener("keydown",r=>{r.key==="Enter"&&(i(),t.blur())}),a.addEventListener("change",r=>{const o=r.target.value,u=this.getFormat(),p=this.formatDate(o,u);t.value=p,t.classList.remove("invalid"),this.dispatchDateChange(o)}),e&&e.addEventListener("click",()=>{var r;(r=a.showPicker)==null||r.call(a)})}isValidDate(t){if(!t)return!1;const a=new Date(t);return a instanceof Date&&!isNaN(a.getTime())}dispatchDateChange(t){const a=this.getFormat(),e=this.formatDate(t,a);this.dispatchEvent(new CustomEvent("date-change",{detail:{value:t,formattedValue:e,format:a},bubbles:!0,composed:!0})),this.setAttribute("value",t)}getISOValue(){return this.getValue()}getFormattedValue(){const t=this.getValue(),a=this.getFormat();return this.formatDate(t,a)}setValue(t){this.setAttribute("value",t)}clear(){this.setAttribute("value","")}render(){const t=this.getValue(),a=this.getFormat(),e=this.getMin(),i=this.getMax(),r=this.isDisabled(),n=this.getPlaceholder(),o=this.formatDate(t,a);this.shadowRoot.innerHTML=`
+			<style>${m}</style>
 			<div class="date-picker-container">
 				<div class="date-input-wrapper ${r?"disabled":""}">
 					<input

package/dist/assets/index-BiVNQ5Fp.js

@@ -0,0 +1,343 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/dashboard-page-DG9XqSlN.js","assets/table-DAobVRE7.js","assets/vendor-BvJLUv9i.js","assets/date-picker-demo-BFqT8vXb.js","assets/table-demo-Dv1cyM0s.js","assets/modal-h8khzJNk.js","assets/input-demo-C8SDvXHc.js","assets/modal-demo-page-DdQtx_aK.js","assets/select-demo-page-yyBh86Yw.js","assets/checkbox-demo-page-C-tPBGML.js","assets/tabs-demo-BZZ6mTYB.js"])))=>i.map(i=>d[i]);
+var I=Object.defineProperty;var $=(o,e,t)=>e in o?I(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var b=(o,e,t)=>$(o,typeof e!="symbol"?e+"":e,t);import{f as v}from"./vendor-BvJLUv9i.js";(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))a(r);new MutationObserver(r=>{for(const i of r)if(i.type==="childList")for(const n of i.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&a(n)}).observe(document,{childList:!0,subtree:!0});function t(r){const i={};return r.integrity&&(i.integrity=r.integrity),r.referrerPolicy&&(i.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?i.credentials="include":r.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function a(r){if(r.ep)return;r.ep=!0;const i=t(r);fetch(r.href,i)}})();const h=new Set,g={user:null,theme:"light"},E={getState:()=>g,setState(o){Object.assign(g,o),h.forEach(e=>e(g))},subscribe(o){return h.add(o),()=>h.delete(o)}},L="modulepreload",T=function(o){return"/webcomponents/"+o},w={},p=function(e,t,a){let r=Promise.resolve();if(t&&t.length>0){document.getElementsByTagName("link");const n=document.querySelector("meta[property=csp-nonce]"),s=(n==null?void 0:n.nonce)||(n==null?void 0:n.getAttribute("nonce"));r=Promise.allSettled(t.map(c=>{if(c=T(c),c in w)return;w[c]=!0;const d=c.endsWith(".css"),f=d?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${c}"]${f}`))return;const l=document.createElement("link");if(l.rel=d?"stylesheet":L,d||(l.as="script"),l.crossOrigin="",l.href=c,s&&l.setAttribute("nonce",s),document.head.appendChild(l),d)return new Promise((_,z)=>{l.addEventListener("load",_),l.addEventListener("error",()=>z(new Error(`Unable to preload CSS for ${c}`)))})}))}function i(n){const s=new Event("vite:preloadError",{cancelable:!0});if(s.payload=n,window.dispatchEvent(s),!s.defaultPrevented)throw n}return r.then(n=>{for(const s of n||[])s.status==="rejected"&&i(s.reason);return e().catch(i)})};function A(o){let e=o;const t=new Set;return{get:()=>e,set:a=>{Object.is(e,a)||(e=a,t.forEach(r=>r(e)))},subscribe:a=>(t.add(a),()=>t.delete(a))}}class y extends HTMLElement{constructor(){super();b(this,"state");b(this,"signalUnsubs");this.attachShadow({mode:"open"}),this.state={},this.signalUnsubs=new Set}useSignal(t){const a=A(t),r=a.subscribe(()=>this.render());return this.signalUnsubs.add(r),a}setState(t){this.state={...this.state,...t},this.render()}connectedCallback(){this.render()}disconnectedCallback(){this.signalUnsubs.forEach(t=>t()),this.signalUnsubs.clear()}render(){}}const k=':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.danger{background:#ef4444;color:#fff;border-color:#ef4444}.btn-danger:hover{background:#6626dc;border-color:#dc2626}.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}.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}',P=`
+:host {
+  display: block;
+}
+
+.sidebar {
+  background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%);
+  border-radius: 20px;
+  padding: 28px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+  overflow: hidden;
+  min-height: 520px;
+}
+
+.sidebar::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%);
+  pointer-events: none;
+}
+
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 8px 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  margin-bottom: 12px;
+}
+
+.brand-icon {
+  width: 42px;
+  height: 42px;
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+.brand-icon svg {
+  width: 22px;
+  height: 22px;
+  stroke: white;
+}
+
+.brand-text {
+  font: 700 18px/1.2 "Sora", system-ui, sans-serif;
+  color: #fff;
+  letter-spacing: -0.02em;
+}
+
+.brand-sub {
+  font: 500 11px/1 "Sora", system-ui, sans-serif;
+  color: rgba(255, 255, 255, 0.4);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.nav-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nav-label {
+  font: 600 10px/1 "Sora", system-ui, sans-serif;
+  color: rgba(255, 255, 255, 0.3);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  padding: 16px 12px 8px;
+}
+
+.sidebar-link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  color: rgba(255, 255, 255, 0.6);
+  text-decoration: none;
+  font: 500 14px/1.3 "DM Sans", system-ui, sans-serif;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.sidebar-link::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
+  border-radius: 12px;
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+
+.sidebar-link:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.sidebar-link:hover::before {
+  opacity: 1;
+}
+
+.sidebar-link.active {
+  color: #fff;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%);
+}
+
+.sidebar-link.active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 24px;
+  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
+  border-radius: 0 3px 3px 0;
+}
+
+.link-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  opacity: 0.7;
+  transition: opacity 200ms ease;
+}
+
+.sidebar-link:hover .link-icon,
+.sidebar-link.active .link-icon {
+  opacity: 1;
+}
+
+.link-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  padding-top: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.sidebar-link[data-link] {
+  cursor: pointer;
+}
+`;class C extends y{constructor(){super(...arguments);b(this,"navItems",[{icon:"box",label:"Components",href:"/",active:!1},{icon:"edit-3",label:"Input",href:"/input-demo",active:!1},{icon:"calendar",label:"Date Picker",href:"/date-picker",active:!1},{icon:"table",label:"Table",href:"/table-demo",active:!1},{icon:"square",label:"Modal",href:"/modal",active:!1},{icon:"list",label:"Select",href:"/select",active:!1},{icon:"check-square",label:"Checkbox",href:"/checkbox",active:!1},{icon:"folder",label:"Tabs",href:"/tabs",active:!1}])}connectedCallback(){this.setAttribute("data-ui","sidebar"),super.connectedCallback(),this.updateActiveState(),window.addEventListener("popstate",()=>this.updateActiveState()),document.addEventListener("click",()=>this.updateActiveState())}updateActiveState(){const t=window.location.pathname;this.navItems=this.navItems.map(a=>({...a,active:a.href===t})),this.render()}renderIcon(t){var r;return((r=v.icons[t])==null?void 0:r.toSvg({class:""}))||""}render(){const t=this.navItems.map(a=>`
+      <a 
+        class="sidebar-link ${a.active?"active":""}" 
+        href="${a.href}" 
+        data-link
+      >
+        <span class="link-icon">${this.renderIcon(a.icon)}</span>
+        ${a.label}
+      </a>
+    `).join("");this.shadowRoot.innerHTML=`
+      <style>${k}${P}</style>
+      <aside class="sidebar">
+        <div class="sidebar-brand">
+          <div class="brand-icon">
+            ${this.renderIcon("hexagon")}
+          </div>
+          <div>
+            <div class="brand-text">UI Kit</div>
+            <div class="brand-sub">Components</div>
+          </div>
+        </div>
+        
+        <nav class="nav-section">
+          <div class="nav-label">Components</div>
+          ${t}
+        </nav>
+        
+        <div class="sidebar-footer">
+          <a class="sidebar-link" href="https://github.com" target="_blank" rel="noopener">
+            <span class="link-icon">${this.renderIcon("github")}</span>
+            GitHub
+          </a>
+        </div>
+      </aside>
+    `}}customElements.define("app-sidebar",C);class D extends y{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==="danger"?e:"primary"}getSize(){const e=this.getAttribute("size");return e==="sm"||e==="lg"?e:"md"}getType(){return this.getAttribute("type")??"button"}getIcon(){var r;const e=this.getAttribute("icon");if(!e)return null;const t=e.trim();return{html:`<span class="btn-icon">${((r=v.icons[t])==null?void 0:r.toSvg())||""}</span>`,name:t}}getIconPosition(){return this.getAttribute("icon-position")==="right"?"right":"left"}render(){const e=this.getVariant(),t=this.getSize(),a=this.hasAttribute("disabled"),r=this.getType(),i=this.getIcon(),n=this.getIconPosition(),s=i!==null,c=i?i.html:"",d=this.innerHTML.trim(),f=s&&!d;let l;s&&d?l=n==="left"?`${c}<span>${d}</span>`:`<span>${d}</span>${c}`:s?l=c:l=d,this.shadowRoot.innerHTML=`
+			<style>${k}</style>
+			<button
+				part="button"
+				class="btn ${e} ${t}${s?" has-icon":""}${f?" icon-only":""}"
+				type="${r}"
+				${a?"disabled":""}
+			>
+				${l}
+		</button>
+	`}}customElements.define("ui-button",D);const O=[{path:"/",layout:"app-layout",load:()=>p(()=>import("./dashboard-page-DG9XqSlN.js"),__vite__mapDeps([0,1,2])),component:"dashboard-page"},{path:"/date-picker",layout:"app-layout",load:()=>p(()=>import("./date-picker-demo-BFqT8vXb.js"),__vite__mapDeps([3,2])),component:"date-picker-demo"},{path:"/table-demo",layout:"app-layout",load:()=>p(()=>import("./table-demo-Dv1cyM0s.js"),__vite__mapDeps([4,1,5,2])),component:"table-demo"},{path:"/input-demo",layout:"app-layout",load:()=>p(()=>import("./input-demo-C8SDvXHc.js"),__vite__mapDeps([6,2])),component:"input-demo"},{path:"/modal",layout:"app-layout",load:()=>p(()=>import("./modal-demo-page-DdQtx_aK.js"),__vite__mapDeps([7,5,2])),component:"modal-demo-page"},{path:"/select",layout:"app-layout",load:()=>p(()=>import("./select-demo-page-yyBh86Yw.js"),__vite__mapDeps([8,2])),component:"select-demo-page"},{path:"/checkbox",layout:"app-layout",load:()=>p(()=>import("./checkbox-demo-page-C-tPBGML.js"),__vite__mapDeps([9,2])),component:"checkbox-demo-page"},{path:"/tabs",layout:"app-layout",load:()=>p(()=>import("./tabs-demo-BZZ6mTYB.js"),__vite__mapDeps([10,2])),component:"tabs-demo"}],j=`
+:host {
+  display: block;
+  min-height: 100vh;
+  background: #f8f9fc;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 28px;
+  padding: 28px;
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+.main-area {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 28px;
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 
+    0 1px 3px rgba(0, 0, 0, 0.02),
+    0 4px 12px rgba(0, 0, 0, 0.02);
+}
+
+.page-title {
+  font: 700 26px/1.2 "Sora", system-ui, sans-serif;
+  color: #1e1e2d;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+.page-subtitle {
+  font: 400 14px/1.5 "DM Sans", system-ui, sans-serif;
+  color: #6b7280;
+  margin: 4px 0 0;
+}
+
+.top-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.icon-btn {
+  width: 42px;
+  height: 42px;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 180ms ease;
+  color: #4b5563;
+}
+
+.icon-btn:hover {
+  background: #e5e7eb;
+  color: #1f2937;
+  transform: translateY(-1px);
+}
+
+.icon-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.content-area {
+  background: #fff;
+  border-radius: 20px;
+  padding: 28px;
+  box-shadow: 
+    0 1px 3px rgba(0, 0, 0, 0.02),
+    0 4px 16px rgba(0, 0, 0, 0.02);
+  min-height: 400px;
+}
+
+@media (max-width: 1024px) {
+  .layout {
+    grid-template-columns: 1fr;
+    padding: 20px;
+    gap: 20px;
+  }
+  
+  :host([data-ui="layout"]) {
+    display: block;
+  }
+  
+  .top-bar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 16px 20px;
+  }
+  
+  .content-area {
+    padding: 20px;
+  }
+}
+`;class R extends y{constructor(){super(...arguments);b(this,"pageTitle","Dashboard");b(this,"pageSubtitle","Explore our component library")}connectedCallback(){this.setAttribute("data-ui","layout"),super.connectedCallback(),this.updateTitle(),window.addEventListener("popstate",()=>this.updateTitle()),document.addEventListener("click",()=>this.updateTitle())}updateTitle(){const t=window.location.pathname,r={"/":{title:"Components",subtitle:"Explore our web components library"},"/input-demo":{title:"Input",subtitle:"Form inputs with validation"},"/date-picker":{title:"Date Picker",subtitle:"Date selection component"},"/table-demo":{title:"Table",subtitle:"Data table with actions"},"/modal":{title:"Modal",subtitle:"Dialog and overlay components"},"/select":{title:"Select",subtitle:"Dropdown selection component"},"/checkbox":{title:"Checkbox",subtitle:"Checkbox input component"},"/tabs":{title:"Tabs",subtitle:"Tabbed navigation component"}}[t]||{title:"Dashboard",subtitle:"Explore our component library"};this.pageTitle=r.title,this.pageSubtitle=r.subtitle,this.render()}renderIcon(t){var a;return((a=v.icons[t])==null?void 0:a.toSvg({class:""}))||""}render(){this.shadowRoot.innerHTML=`
+      <style>${k}${j}</style>
+      <div class="layout">
+        <app-sidebar></app-sidebar>
+        
+        <div class="main-area">
+          <header class="top-bar">
+            <div>
+              <h1 class="page-title">${this.pageTitle}</h1>
+              <p class="page-subtitle">${this.pageSubtitle}</p>
+            </div>
+            <div class="top-actions">
+              <button class="icon-btn" title="Search">
+                ${this.renderIcon("search")}
+              </button>
+              <button class="icon-btn" title="Notifications">
+                ${this.renderIcon("bell")}
+              </button>
+              <ui-button variant="primary" size="sm">
+                ${this.renderIcon("plus")} New
+              </ui-button>
+            </div>
+          </header>
+          
+          <main class="content-area">
+            <slot></slot>
+          </main>
+        </div>
+      </div>
+    `}}customElements.define("app-layout",R);const u="/webcomponents/";function U(o){const e=u.endsWith("/")?u.slice(0,-1):u;return o===e||o===e+"/"?"/":o.startsWith(e+"/")?o.slice(e.length):o}function x(o){return`${u.endsWith("/")?u.slice(0,-1):u}${o}`}async function m(){const o=location.pathname,e=U(o),t=O.find(n=>n.path===e);if(!t){if(e!=="/"){const n=x("/");history.replaceState(null,"",n),await m()}return}if(await t.load(),t.guard&&!await t.guard()){const s=x("/");history.replaceState(null,"",s),await m();return}const a=document.createElement(t.layout),r=document.createElement(t.component);a.appendChild(r);const i=document.querySelector("#app");i&&(i.innerHTML="",i.appendChild(a))}window.addEventListener("popstate",m);window.addEventListener("DOMContentLoaded",m);document.addEventListener("click",o=>{const t=o.composedPath().find(a=>a instanceof Element&&a.matches("[data-link]"));if(t){o.preventDefault();const a=t.getAttribute("href")??"/",r=x(a);history.pushState(null,"",r),m()}});const S=o=>{document.documentElement.dataset.theme=o};S(E.getState().theme);E.subscribe(o=>S(o.theme));export{y as B,E as s,k as t};

package/dist/assets/index-DFxj0POj.css

@@ -0,0 +1 @@
+: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.danger{background:#ef4444;color:#fff;border-color:#ef4444}.btn-danger:hover{background:#6626dc;border-color:#dc2626}.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}.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}: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}