@diniz/webcomponents 1.1.2 → 1.1.3

package/dist/webcomponents.umd.js

@@ -0,0 +1,238 @@
+(function(h,b){typeof exports=="object"&&typeof module<"u"?b(exports,require("feather-icons")):typeof define=="function"&&define.amd?define(["exports","feather-icons"],b):(h=typeof globalThis<"u"?globalThis:h||self,b(h.WebComponents={},h.feather))})(this,function(h,b){"use strict";var P=Object.defineProperty;var q=(h,b,x)=>b in h?P(h,b,{enumerable:!0,configurable:!0,writable:!0,value:x}):h[b]=x;var c=(h,b,x)=>q(h,typeof b!="symbol"?b+"":b,x);function x(g){let r=g;const t=new Set;return{get:()=>r,set:e=>{Object.is(r,e)||(r=e,t.forEach(a=>a(r)))},subscribe:e=>(t.add(e),()=>t.delete(e))}}class m extends HTMLElement{constructor(){super();c(this,"state");c(this,"signalUnsubs");this.attachShadow({mode:"open"}),this.state={},this.signalUnsubs=new Set}useSignal(t){const e=x(t),a=e.subscribe(()=>this.render());return this.signalUnsubs.add(a),e}setState(t){this.state={...this.state,...t},this.render()}connectedCallback(){this.render()}disconnectedCallback(){this.signalUnsubs.forEach(t=>t()),this.signalUnsubs.clear()}render(){}}const f=':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}';class k extends m{connectedCallback(){this.setAttribute("data-ui","button"),super.connectedCallback()}static get observedAttributes(){return["variant","size","disabled","type","icon","icon-position"]}attributeChangedCallback(){this.render()}getVariant(){const r=this.getAttribute("variant");return r==="secondary"||r==="ghost"||r==="danger"?r:"primary"}getSize(){const r=this.getAttribute("size");return r==="sm"||r==="lg"?r:"md"}getType(){return this.getAttribute("type")??"button"}getIcon(){var a;const r=this.getAttribute("icon");if(!r)return null;const t=r.trim();return{html:`<span class="btn-icon">${((a=b.icons[t])==null?void 0:a.toSvg())||""}</span>`,name:t}}getIconPosition(){return this.getAttribute("icon-position")==="right"?"right":"left"}render(){const r=this.getVariant(),t=this.getSize(),e=this.hasAttribute("disabled"),a=this.getType(),i=this.getIcon(),s=this.getIconPosition(),o=i!==null,n=i?i.html:"",l=this.innerHTML.trim(),u=o&&!l;let p;o&&l?p=s==="left"?`${n}<span>${l}</span>`:`<span>${l}</span>${n}`:o?p=n:p=l,this.shadowRoot.innerHTML=`
+			<style>${f}</style>
+			<button
+				part="button"
+				class="btn ${r} ${t}${o?" has-icon":""}${u?" icon-only":""}"
+				type="${a}"
+				${e?"disabled":""}
+			>
+				${p}
+		</button>
+	`}}customElements.define("ui-button",k);class w extends m{constructor(){super();c(this,"inputEl",null);c(this,"customValidator",null);c(this,"validationRule",null);this.state={value:"",valid:!0,touched:!1,error:""}}static get observedAttributes(){return["type","label","placeholder","required","pattern","minlength","maxlength","min","max","error-message","custom-error","disabled","name","validate"]}connectedCallback(){this.setAttribute("data-ui","input"),super.connectedCallback()}attributeChangedCallback(t,e,a){e!==a&&t!=="value"&&this.render()}setCustomValidator(t){this.customValidator=t,this.validate()}get value(){return this.state.value}set value(t){this.state.value=t,this.inputEl&&this.inputEl.value!==t&&(this.inputEl.value=t),this.validate()}get isValid(){return this.state.valid}checkValidity(){return this.state.touched=!0,this.validate()}reportValidity(){this.state.touched=!0;const t=this.validate();return this.updateErrorDisplay(),!t&&this.inputEl&&this.inputEl.focus(),t}getType(){const t=this.getAttribute("type");return["text","email","password","number","tel","url"].includes(t||"")?t:"text"}getLabel(){return this.getAttribute("label")||""}getPlaceholder(){return this.getAttribute("placeholder")||""}getName(){return this.getAttribute("name")||""}getErrorMessage(){return this.state.error?this.state.error:this.getAttribute("error-message")||this.getAttribute("custom-error")||""}getCustomError(){return this.getAttribute("custom-error")||""}parseValidationRule(t){return t.startsWith("email:")?{type:"emailDomain",domain:t.slice(6)}:t.startsWith("match:")?{type:"match",selector:t.slice(6)}:t.startsWith("min:")?{type:"minLength",length:parseInt(t.slice(4),10)}:t.startsWith("max:")?{type:"maxLength",length:parseInt(t.slice(4),10)}:t.startsWith("regex:")?{type:"regex",pattern:t.slice(6)}:null}applyValidationRule(t){const e=this.state.value;switch(t.type){case"emailDomain":if(!e.endsWith(`@${t.domain}`))return{valid:!1,message:`Must end with @${t.domain}`};break;case"match":const a=document.querySelector(t.selector);if(a&&e!==a.value)return{valid:!1,message:"Values do not match"};break;case"minLength":if(e.length<t.length)return{valid:!1,message:`Must be at least ${t.length} characters`};break;case"maxLength":if(e.length>t.length)return{valid:!1,message:`Must be no more than ${t.length} characters`};break;case"regex":try{if(!new RegExp(t.pattern).test(e))return{valid:!1,message:"Invalid format"}}catch{return{valid:!1,message:"Invalid validation pattern"}}break}return{valid:!0}}validate(){if(!this.inputEl)return!0;const t=this.getAttribute("validate");if(t&&(this.validationRule||(this.validationRule=this.parseValidationRule(t)),this.validationRule)){const e=this.applyValidationRule(this.validationRule);return this.state.valid=e.valid,!e.valid&&e.message&&(this.state.error=e.message),this.state.valid}if(this.customValidator){const e=this.customValidator(this.state.value,this.inputEl);this.state.valid=e.valid,!e.valid&&e.message&&(this.state.error=e.message)}else{const e=this.inputEl.checkValidity();this.state.valid=e,!e&&this.state.touched&&(this.state.error=this.inputEl.validationMessage||this.getErrorMessage()),e&&(this.state.error="")}return this.state.valid}handleInput(t){const e=t.target;this.state.value=e.value,this.state.touched=!0,this.validate(),this.updateErrorDisplay()}handleBlur(){this.state.touched=!0,this.validate(),this.updateErrorDisplay()}updateErrorDisplay(){if(!this.inputEl)return;const t=this.shadowRoot.querySelector(".input-error"),e=this.shadowRoot.querySelector(".input-wrapper"),a=this.getName();e&&e.classList.toggle("invalid",!this.state.valid&&this.state.touched),t&&(!this.state.valid&&this.state.touched&&this.state.error?(t.textContent=this.state.error,t.classList.remove("hidden")):t.classList.add("hidden")),this.inputEl.setAttribute("aria-invalid",String(!this.state.valid&&this.state.touched)),a&&this.inputEl.setAttribute("aria-describedby",`${a}-error`)}needsRender(){return this.hasAttribute("type")||this.hasAttribute("label")||this.hasAttribute("placeholder")||this.hasAttribute("required")||this.hasAttribute("pattern")||this.hasAttribute("disabled")||this.hasAttribute("name")||this.hasAttribute("minlength")||this.hasAttribute("maxlength")||this.hasAttribute("min")||this.hasAttribute("max")||this.hasAttribute("error-message")||this.hasAttribute("custom-error")||this.hasAttribute("validate")}render(){const t=this.getType(),e=this.getLabel(),a=this.getPlaceholder(),i=this.getName(),s=this.getErrorMessage(),o=this.hasAttribute("required"),n=this.getAttribute("pattern"),l=this.getAttribute("minlength"),u=this.getAttribute("maxlength"),p=this.getAttribute("min"),d=this.getAttribute("max"),v=this.hasAttribute("disabled"),y=!this.state.valid&&this.state.touched,T=e!=="";this.shadowRoot.innerHTML=`
+			<style>${f}</style>
+			<div class="input-wrapper${y?" invalid":""}${v?" disabled":""}">
+				${T?`<label class="input-label">${e}${o?" *":""}</label>`:""}
+				<input
+					part="input"
+					class="input-field"
+					type="${t}"
+					placeholder="${a}"
+					name="${i}"
+					.value="${this.state.value}"
+					${o?"required":""}
+					${n?`pattern="${n}"`:""}
+					${l?`minlength="${l}"`:""}
+					${u?`maxlength="${u}"`:""}
+					${p?`min="${p}"`:""}
+					${d?`max="${d}"`:""}
+					${v?"disabled":""}
+					aria-invalid="${y}"
+					aria-describedby="${i}-error"
+				/>
+				<span class="input-error${y&&s?"":" hidden"}" id="${i}-error" role="alert">${s}</span>
+			</div>
+		`,this.inputEl=this.shadowRoot.querySelector(".input-field"),this.inputEl&&(this.inputEl.addEventListener("input",this.handleInput.bind(this)),this.inputEl.addEventListener("blur",this.handleBlur.bind(this)))}}customElements.define("ui-input",w);class $ extends m{constructor(){super(...arguments);c(this,"columns",[]);c(this,"rows",[])}connectedCallback(){this.setAttribute("data-ui","table"),super.connectedCallback()}set data(t){this.columns=t.columns,this.rows=t.rows,this.render()}get data(){return{columns:this.columns,rows:this.rows}}render(){const t=this.columns.filter(i=>i.visible!==!1),e=t.map(i=>`<th class="align-${i.align??"left"}">${i.label}</th>`).join(""),a=this.rows.map((i,s)=>`<tr data-row-index="${s}">${t.map(o=>o.actions?`<td class="align-center actions-cell">
+										${o.actions.edit?`<ui-button variant="primary" class='action-btn' icon='edit' size="sm" data-action="edit" data-row-index="${s}">Edit</ui-button>`:""}
+										${o.actions.delete?`<ui-button variant="danger" class='action-btn' icon='trash' size="sm" data-action="delete" data-row-index="${s}">Delete</ui-button>`:""}
+									</td>`:`<td class="align-${o.align??"left"}">${String(i[o.key]??"")}</td>`).join("")}</tr>`).join("");this.shadowRoot.innerHTML=`
+			<style>${f}</style>
+			<div class="table-wrap">
+				<table>
+					<thead><tr>${e}</tr></thead>
+					<tbody>${a}</tbody>
+				</table>
+			</div>
+		`,this.shadowRoot.querySelectorAll(".action-btn").forEach(i=>{i.addEventListener("click",s=>{const o=s.currentTarget,n=o.dataset.action,l=parseInt(o.dataset.rowIndex||"0",10),u=n==="edit"?"edit-action":"delete-action";this.dispatchEvent(new CustomEvent(u,{bubbles:!0,composed:!0,detail:{row:this.rows[l],rowIndex:l}}))})})}}customElements.define("ui-table",$);class A extends m{constructor(){super(...arguments);c(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,e){if(!t)return"";const a=t.split("-");if(a.length!==3)return t;const[i,s,o]=a;switch(e){case"DD/MM/YYYY":return`${o}/${s}/${i}`;case"MM/DD/YYYY":return`${s}/${o}/${i}`;case"DD-MM-YYYY":return`${o}-${s}-${i}`;case"MM-DD-YYYY":return`${s}-${o}-${i}`;case"YYYY-MM-DD":default:return t}}parseDate(t,e){if(!t)return"";let a,i,s,o;switch(e){case"DD/MM/YYYY":if(a=t.split("/"),a.length!==3)return"";[o,s,i]=a;break;case"MM/DD/YYYY":if(a=t.split("/"),a.length!==3)return"";[s,o,i]=a;break;case"DD-MM-YYYY":if(a=t.split("-"),a.length!==3)return"";[o,s,i]=a;break;case"MM-DD-YYYY":if(a=t.split("-"),a.length!==3)return"";[s,o,i]=a;break;case"YYYY-MM-DD":default:return t}return s=s.padStart(2,"0"),o=o.padStart(2,"0"),`${i}-${s}-${o}`}attachEventListeners(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".formatted-input"),e=this.shadowRoot.querySelector('input[type="date"]'),a=this.shadowRoot.querySelector(".calendar-btn");if(!t||!e)return;const i=()=>{const s=t.value,o=this.getFormat(),n=this.parseDate(s,o);this.isValidDate(n)?(e.value=n,t.classList.remove("invalid"),this.dispatchDateChange(n)):s===""?(e.value="",t.classList.remove("invalid"),this.dispatchDateChange("")):t.classList.add("invalid")};t.addEventListener("blur",i),t.addEventListener("keydown",s=>{s.key==="Enter"&&(i(),t.blur())}),e.addEventListener("change",s=>{const n=s.target.value,l=this.getFormat(),u=this.formatDate(n,l);t.value=u,t.classList.remove("invalid"),this.dispatchDateChange(n)}),a&&a.addEventListener("click",()=>{var s;(s=e.showPicker)==null||s.call(e)})}isValidDate(t){if(!t)return!1;const e=new Date(t);return e instanceof Date&&!isNaN(e.getTime())}dispatchDateChange(t){const e=this.getFormat(),a=this.formatDate(t,e);this.dispatchEvent(new CustomEvent("date-change",{detail:{value:t,formattedValue:a,format:e},bubbles:!0,composed:!0})),this.setAttribute("value",t)}getISOValue(){return this.getValue()}getFormattedValue(){const t=this.getValue(),e=this.getFormat();return this.formatDate(t,e)}setValue(t){this.setAttribute("value",t)}clear(){this.setAttribute("value","")}render(){const t=this.getValue(),e=this.getFormat(),a=this.getMin(),i=this.getMax(),s=this.isDisabled(),o=this.getPlaceholder(),n=this.formatDate(t,e);this.shadowRoot.innerHTML=`
+			<style>${f}</style>
+			<div class="date-picker-container">
+				<div class="date-input-wrapper ${s?"disabled":""}">
+					<input
+						type="text"
+						class="formatted-input"
+						part="input"
+						value="${n}"
+						placeholder="${o}"
+						${s?"disabled":""}
+					/>
+					<button 
+						class="calendar-btn" 
+						type="button"
+						${s?"disabled":""}
+						title="Open calendar"
+					>
+						<svg class="calendar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+						</svg>
+					</button>
+					<input
+						type="date"
+						class="hidden-date-input"
+						value="${t}"
+						${a?`min="${a}"`:""}
+						${i?`max="${i}"`:""}
+						${s?"disabled":""}
+					/>
+				</div>
+				<div class="format-label">Format: ${e}</div>
+			</div>
+		`}}customElements.define("ui-date-picker",A);class E extends m{constructor(){super(...arguments);c(this,"_total",0);c(this,"_currentPage",1);c(this,"_pageSize",10)}connectedCallback(){this.setAttribute("data-ui","pagination"),super.connectedCallback()}static get observedAttributes(){return["total","current-page","page-size"]}attributeChangedCallback(t,e,a){switch(t){case"total":this._total=parseInt(a,10)||0;break;case"current-page":this._currentPage=parseInt(a,10)||1;break;case"page-size":this._pageSize=parseInt(a,10)||10;break}this.render()}get total(){return this._total}set total(t){this._total=t,this.setAttribute("total",String(t))}get currentPage(){return this._currentPage}set currentPage(t){this._currentPage=t,this.setAttribute("current-page",String(t))}get pageSize(){return this._pageSize}set pageSize(t){this._pageSize=t,this.setAttribute("page-size",String(t))}get totalPages(){return Math.ceil(this._total/this._pageSize)}handlePageChange(t){t<1||t>this.totalPages||t===this._currentPage||(this.currentPage=t,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:t,pageSize:this._pageSize,total:this._total,totalPages:this.totalPages},bubbles:!0,composed:!0})))}getPageNumbers(){const t=this.totalPages,e=this._currentPage;if(t<=7)return Array.from({length:t},(i,s)=>s+1);const a=[];return e<=3?a.push(1,2,3,4,"...",t):e>=t-2?a.push(1,"...",t-3,t-2,t-1,t):a.push(1,"...",e-1,e,e+1,"...",t),a}render(){const t=this.totalPages,e=this._currentPage,a=this.getPageNumbers(),i=(e-1)*this._pageSize+1,s=Math.min(e*this._pageSize,this._total);this.shadowRoot.innerHTML=`
+			<style>${f}</style>
+			<div class="pagination-container">
+				<div class="pagination-info">
+					${this._total>0?`Showing ${i} to ${s} of ${this._total}`:"No results"}
+				</div>
+				${t>1?`
+				<nav class="pagination" role="navigation" aria-label="Pagination">
+					<button 
+						class="page-btn nav-btn" 
+						${e===1?"disabled":""}
+						data-page="prev"
+						aria-label="Previous page"
+					>
+						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+						</svg>
+					</button>
+					${a.map(o=>o==="..."?'<button class="page-btn ellipsis" disabled>...</button>':`
+							<button 
+								class="page-btn ${o===e?"active":""}"
+								data-page="${o}"
+								aria-label="Page ${o}"
+								${o===e?'aria-current="page"':""}
+							>
+								${o}
+							</button>
+						`).join("")}
+					<button 
+						class="page-btn nav-btn" 
+						${e===t?"disabled":""}
+						data-page="next"
+						aria-label="Next page"
+					>
+						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+						</svg>
+					</button>
+				</nav>
+				`:""}
+			</div>
+		`,this.attachEventListeners()}attachEventListeners(){this.shadowRoot&&this.shadowRoot.addEventListener("click",t=>{const a=t.target.closest(".page-btn");if(!a||a.disabled)return;const i=a.dataset.page;if(i==="prev")this.handlePageChange(this._currentPage-1);else if(i==="next")this.handlePageChange(this._currentPage+1);else if(i){const s=parseInt(i,10);isNaN(s)||this.handlePageChange(s)}})}}customElements.define("ui-pagination",E);class C extends m{constructor(){super(...arguments);c(this,"isOpen",this.useSignal(!1))}connectedCallback(){this.setAttribute("data-ui","modal"),super.connectedCallback(),this.setupEventListeners()}static get observedAttributes(){return["open"]}attributeChangedCallback(t,e,a){t==="open"&&e!==a&&this.isOpen.set(a!==null)}setupEventListeners(){document.addEventListener("keydown",t=>{t.key==="Escape"&&this.isOpen.get()&&!this.hasAttribute("no-close-on-escape")&&this.close()})}open(){this.isOpen.set(!0),this.setAttribute("open",""),this.dispatchEvent(new CustomEvent("modal-open",{bubbles:!0,composed:!0})),document.body.style.overflow="hidden"}close(){this.isOpen.set(!1),this.removeAttribute("open"),this.dispatchEvent(new CustomEvent("modal-close",{bubbles:!0,composed:!0})),document.body.style.overflow=""}handleBackdropClick(t){t.target.classList.contains("modal-backdrop")&&!this.hasAttribute("no-close-on-backdrop")&&this.close()}render(){const t=this.isOpen.get(),e=this.getAttribute("title")||"",a=this.getAttribute("size")||"md";this.shadowRoot.innerHTML=`
+			<style>
+				${f}
+				
+				::slotted([slot="footer"]) {
+					display: flex;
+					gap: 0.75rem;
+					width: 100%;
+					justify-content: flex-end;
+				}
+			</style>
+
+			<div class="modal-backdrop ${t?"open":""}" part="backdrop">
+				<div class="modal-content ${a}" part="content" @click="${o=>o.stopPropagation()}">
+					${e?`
+						<div class="modal-header" part="header">
+							<h2 class="modal-title">${e}</h2>
+							<button class="modal-close" part="close" aria-label="Close modal">
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<line x1="18" y1="6" x2="6" y2="18"></line>
+									<line x1="6" y1="6" x2="18" y2="18"></line>
+								</svg>
+							</button>
+						</div>
+					`:""}
+					
+					<div class="modal-body" part="body">
+						<slot></slot>
+					</div>
+
+					<div class="modal-footer" part="footer">
+						<slot name="footer"></slot>
+					</div>
+				</div>
+			</div>
+		`;const i=this.shadowRoot.querySelector(".modal-backdrop"),s=this.shadowRoot.querySelector(".modal-close");i==null||i.addEventListener("click",o=>this.handleBackdropClick(o)),s==null||s.addEventListener("click",()=>this.close())}}customElements.define("ui-modal",C);class S extends m{constructor(){super(...arguments);c(this,"isOpen",this.useSignal(!1));c(this,"selectedValue",this.useSignal(""));c(this,"searchTerm",this.useSignal(""));c(this,"options",[])}connectedCallback(){this.setAttribute("data-ui","select"),super.connectedCallback(),this.parseOptions(),this.setupClickOutside()}static get observedAttributes(){return["value","disabled","placeholder","options"]}attributeChangedCallback(t,e,a){t==="value"&&e!==a&&this.selectedValue.set(a||""),t==="options"&&e!==a&&this.parseOptions(),this.render()}parseOptions(){const t=this.getAttribute("options");if(t)try{this.options=JSON.parse(t)}catch(e){console.error("Invalid options JSON",e),this.options=[]}}setupClickOutside(){document.addEventListener("click",t=>{!t.composedPath().includes(this)&&this.isOpen.get()&&this.isOpen.set(!1)})}toggleDropdown(){this.hasAttribute("disabled")||(this.isOpen.set(!this.isOpen.get()),this.isOpen.get()||this.searchTerm.set(""))}selectOption(t){this.selectedValue.set(t),this.setAttribute("value",t),this.isOpen.set(!1),this.searchTerm.set(""),this.dispatchEvent(new CustomEvent("select-change",{bubbles:!0,composed:!0,detail:{value:t,option:this.options.find(e=>e.value===t)}}))}handleSearch(t){this.searchTerm.set(t.toLowerCase())}getFilteredOptions(){const t=this.searchTerm.get();return t?this.options.filter(e=>e.label.toLowerCase().includes(t)||e.value.toLowerCase().includes(t)):this.options}getSelectedLabel(){const t=this.selectedValue.get(),e=this.options.find(a=>a.value===t);return(e==null?void 0:e.label)||this.getAttribute("placeholder")||"Select an option"}render(){const t=this.isOpen.get(),e=this.hasAttribute("disabled"),a=this.hasAttribute("searchable"),i=this.getAttribute("label")||"",s=this.getSelectedLabel(),o=this.getFilteredOptions(),n=this.selectedValue.get()!=="";this.shadowRoot.innerHTML=`
+			<style>${f}</style>
+
+			<div class="select-container">
+				${i?`<label class="select-label">${i}</label>`:""}
+				
+				<div class="select-trigger ${t?"open":""}" part="trigger" tabindex="0" ${e?"disabled":""}>
+					<span class="select-placeholder ${n?"has-selection":""}">${s}</span>
+					<span class="select-arrow ${t?"open":""}">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<polyline points="6 9 12 15 18 9"></polyline>
+						</svg>
+					</span>
+				</div>
+
+				<div class="select-dropdown ${t?"open":""}" part="dropdown">
+					${a?`
+						<input 
+							type="text" 
+							class="select-search" 
+							placeholder="Search..."
+							part="search"
+						>
+					`:""}
+					
+					${o.length>0?o.map(d=>`
+						<div 
+							class="select-option ${d.value===this.selectedValue.get()?"selected":""} ${d.disabled?"disabled":""}"
+							data-value="${d.value}"
+							part="option"
+						>
+							${d.label}
+						</div>
+					`).join(""):`
+						<div class="select-empty">No options found</div>
+					`}
+				</div>
+			</div>
+		`;const l=this.shadowRoot.querySelector(".select-trigger"),u=this.shadowRoot.querySelector(".select-search"),p=this.shadowRoot.querySelectorAll(".select-option:not(.disabled)");l==null||l.addEventListener("click",()=>this.toggleDropdown()),l==null||l.addEventListener("keydown",d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),this.toggleDropdown())}),u==null||u.addEventListener("input",d=>{this.handleSearch(d.target.value)}),u==null||u.addEventListener("click",d=>d.stopPropagation()),p.forEach(d=>{d.addEventListener("click",()=>{const v=d.getAttribute("data-value");v&&this.selectOption(v)})})}}customElements.define("ui-select",S);class L extends m{constructor(){super(...arguments);c(this,"checked",this.useSignal(!1));c(this,"indeterminate",this.useSignal(!1))}connectedCallback(){this.setAttribute("data-ui","checkbox"),super.connectedCallback()}static get observedAttributes(){return["checked","disabled","indeterminate"]}attributeChangedCallback(t,e,a){t==="checked"&&e!==a&&this.checked.set(a!==null),t==="indeterminate"&&e!==a&&this.indeterminate.set(a!==null),this.render()}handleChange(){if(this.hasAttribute("disabled"))return;this.indeterminate.get()&&(this.indeterminate.set(!1),this.removeAttribute("indeterminate"));const t=!this.checked.get();this.checked.set(t),t?this.setAttribute("checked",""):this.removeAttribute("checked"),this.dispatchEvent(new CustomEvent("checkbox-change",{bubbles:!0,composed:!0,detail:{checked:t}}))}setChecked(t){this.checked.set(t),t?this.setAttribute("checked",""):this.removeAttribute("checked"),this.indeterminate.set(!1),this.removeAttribute("indeterminate")}setIndeterminate(t){this.indeterminate.set(t),t?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}render(){const t=this.checked.get(),e=this.indeterminate.get(),a=this.hasAttribute("disabled"),i=this.getAttribute("label")||"",s=this.getAttribute("size")||"md",o={sm:"size-sm",md:"size-md",lg:"size-lg"};this.shadowRoot.innerHTML=`
+			<style>${f}</style>
+
+			<label class="checkbox-container ${o[s]}">
+				<input 
+					type="checkbox" 
+					${t?"checked":""}
+					${a?"disabled":""}
+				>
+				<div class="checkbox-box ${o[s]} ${t?"checked":""} ${e?"indeterminate":""} ${a?"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>
+				${i?`<span class="checkbox-label">${i}</span>`:"<slot></slot>"}
+			</label>
+		`;const n=this.shadowRoot.querySelector(".checkbox-container");n==null||n.addEventListener("click",l=>{l.preventDefault(),this.handleChange()})}}customElements.define("ui-checkbox",L);const I=':host{display:block}.tabs{background:var(--color-page-bg);border-radius:16px;box-shadow:0 1px 3px #0000000a,0 4px 12px #00000008;overflow:hidden;position:relative}.tablist{display:flex;position:relative;padding:8px;gap:4px;background:linear-gradient(180deg,#fafafa,#f5f5f5);border-bottom:1px solid rgba(0,0,0,.04)}.tab-indicator{position:absolute;bottom:8px;height:calc(100% - 16px);background:var(--color-page-bg);border-radius:10px;box-shadow:0 2px 8px #0000000f,0 1px 2px #0000000a;transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}::slotted([slot="tab"]){-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:#64748b;cursor:pointer;font:600 13px/1 DM Sans,system-ui,-apple-system,sans-serif;letter-spacing:.02em;padding:10px 18px;position:relative;transition:color .2s ease;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}::slotted([slot="tab"]:hover){color:var(--color-ink)}::slotted([slot="tab"].is-active){color:var(--color-ink)}::slotted([slot="tab"]:focus-visible){outline:none}::slotted([slot="tab"]:focus-visible):after{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:2px solid var(--color-primary);border-radius:8px;pointer-events:none}.panels{padding:24px 28px;min-height:200px}::slotted([slot="panel"]){animation:fadeIn .3s ease}::slotted([slot="panel"]:not(.is-active)){display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.tab-indicator{transition:none}::slotted([slot="panel"]){animation:none}}';class Y extends m{constructor(){super(...arguments);c(this,"activeId",null);c(this,"indicator",null);c(this,"handleTabClick",t=>{const e=t.target;if(!e)return;const a=e.closest('[slot="tab"][data-tab]');if(!a)return;t.preventDefault();const i=a.getAttribute("data-tab");i&&this.setActive(i)})}static get observedAttributes(){return["active"]}connectedCallback(){this.setAttribute("data-ui","tabs"),super.connectedCallback(),this.addEventListener("click",this.handleTabClick)}disconnectedCallback(){this.removeEventListener("click",this.handleTabClick),super.disconnectedCallback()}attributeChangedCallback(t,e,a){t==="active"&&e!==a&&(this.activeId=a,this.syncTabs())}setActive(t){this.activeId!==t&&(this.activeId=t,this.setAttribute("active",t),this.syncTabs(),this.dispatchEvent(new CustomEvent("tab-change",{bubbles:!0,composed:!0,detail:{id:t}})))}getTabs(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector('slot[name="tab"]');return t?t.assignedElements({flatten:!0}):[]}getPanels(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector('slot[name="panel"]');return t?t.assignedElements({flatten:!0}):[]}getActiveId(t){const e=this.getAttribute("active");if(e&&t.some(i=>i.getAttribute("data-tab")===e))return e;if(this.activeId&&t.some(i=>i.getAttribute("data-tab")===this.activeId))return this.activeId;const a=t.find(i=>i.getAttribute("data-tab"));return(a==null?void 0:a.getAttribute("data-tab"))??null}syncTabs(){const t=this.getTabs(),e=this.getPanels();if(t.length===0)return;const a=this.getActiveId(t);a&&(this.activeId=a,this.getAttribute("active")!==a&&this.setAttribute("active",a),t.forEach(i=>{const s=i.getAttribute("data-tab");if(!s)return;const o=i.id||`tab-${s}`,n=s===a;i.id=o,i.setAttribute("role","tab"),i.setAttribute("aria-selected",String(n)),i.setAttribute("tabindex",n?"0":"-1"),i.classList.toggle("is-active",n)}),e.forEach(i=>{const s=i.getAttribute("data-tab");if(!s)return;const o=i.id||`panel-${s}`,n=s===a;i.id=o,i.setAttribute("role","tabpanel"),i.toggleAttribute("hidden",!n),i.classList.toggle("is-active",n);const l=t.find(u=>u.getAttribute("data-tab")===s);l&&(l.setAttribute("aria-controls",o),i.setAttribute("aria-labelledby",l.id))}),this.updateIndicator(t,a))}updateIndicator(t,e){if(!this.indicator)return;const a=t.find(n=>n.getAttribute("data-tab")===e);if(!a)return;const i=this.shadowRoot.querySelector(".tablist");if(!i)return;a.getBoundingClientRect(),i.getBoundingClientRect();const s=t.indexOf(a);let o=0;for(let n=0;n<s;n++)o+=t[n].offsetWidth;this.indicator.style.transform=`translateX(${o}px)`,this.indicator.style.width=`${a.offsetWidth}px`}render(){this.shadowRoot.innerHTML=`
+			<style>${f}${I}</style>
+			<div class="tabs">
+				<div class="tablist" role="tablist">
+					<div class="tab-indicator"></div>
+					<slot name="tab"></slot>
+				</div>
+				<div class="panels">
+					<slot name="panel"></slot>
+				</div>
+			</div>
+		`,this.indicator=this.shadowRoot.querySelector(".tab-indicator");const t=this.shadowRoot.querySelector('slot[name="tab"]'),e=this.shadowRoot.querySelector('slot[name="panel"]');t==null||t.addEventListener("slotchange",()=>this.syncTabs()),e==null||e.addEventListener("slotchange",()=>this.syncTabs()),requestAnimationFrame(()=>this.syncTabs())}}customElements.define("ui-tabs",Y);const R=':host{display:block;--card-transition: all .3s cubic-bezier(.4, 0, .2, 1)}:host([data-ui="card"]){display:block}.card{background:#fff;padding:24px;box-sizing:border-box;width:100%;position:relative;transition:var(--card-transition);overflow:hidden}.card.rounded{border-radius:16px}.card.square{border-radius:0}.card.default{border:1px solid #e5e7eb;background:#fff}.card.elevated{border:none;background:linear-gradient(to bottom,#fff,#fafbfc)}.card.bordered{border:2px solid #e5e7eb;background:#fff}.card.ghost{border:1px dashed #d1d5db;background:transparent}.card.default:hover{border-color:#d1d5db;transform:translateY(-2px)}.card.elevated:hover{transform:translateY(-4px)}.card.bordered:hover{border-color:#9ca3af;background:#fafbfc}.card.ghost:hover{border-color:#9ca3af;background:#f9fafb80}.card.elevated:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,#6366f11a,#ec48991a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none}.card.elevated:hover:before{opacity:1}.card ::slotted(*:first-child){margin-top:0}.card ::slotted(*:last-child){margin-bottom:0}.card:focus-within{outline:2px solid #9ec5ff;outline-offset:2px}@media (max-width: 768px){.card{padding:20px}.card.rounded{border-radius:12px}}@media (max-width: 480px){.card{padding:16px}.card.rounded{border-radius:10px}}@media print{.card{border:1px solid #e5e7eb;box-shadow:none!important;page-break-inside:avoid}}';class z extends m{connectedCallback(){this.setAttribute("data-ui","card"),super.connectedCallback()}static get observedAttributes(){return["shadow","shadow-color","rounded","variant","elevation"]}attributeChangedCallback(){this.render()}getShadow(){return this.hasAttribute("shadow")&&this.getAttribute("shadow")!=="false"}getShadowColor(){return this.getAttribute("shadow-color")??"0, 0, 0"}getRounded(){return this.getAttribute("rounded")!=="false"}getVariant(){const r=this.getAttribute("variant");return r==="elevated"||r==="bordered"||r==="ghost"?r:"default"}getElevation(){const r=this.getAttribute("elevation");return r==="none"||r==="sm"||r==="md"||r==="lg"||r==="xl"?r:"sm"}render(){const r=this.getShadow(),t=this.getShadowColor(),e=this.getRounded(),a=this.getVariant(),i=this.getElevation();let s="none";if(r)switch(i){case"sm":s=`0 1px 2px rgba(${t}, 0.05), 0 1px 3px rgba(${t}, 0.1)`;break;case"md":s=`0 4px 6px rgba(${t}, 0.07), 0 2px 4px rgba(${t}, 0.06)`;break;case"lg":s=`0 10px 15px rgba(${t}, 0.1), 0 4px 6px rgba(${t}, 0.05)`;break;case"xl":s=`0 20px 25px rgba(${t}, 0.15), 0 10px 10px rgba(${t}, 0.04)`;break;default:s="none"}this.shadowRoot.innerHTML=`
+      <style>
+        ${f}
+        ${R}
+        
+        .card.custom-shadow {
+          box-shadow: ${s};
+        }
+
+        .card.custom-shadow:hover {
+          box-shadow: ${r&&i!=="none"?s.replace(/rgba\(([^)]+), ([\d.]+)\)/g,(o,n,l)=>`rgba(${n}, ${Math.min(parseFloat(l)*1.3,.25)})`):"none"};
+        }
+      </style>
+      <div class="card ${a} ${e?"rounded":"square"} ${r?"custom-shadow":"no-shadow"}">
+        <slot></slot>
+      </div>
+    `}}customElements.define("ui-card",z);class D{constructor(){c(this,"baseURL","");c(this,"defaultHeaders",{"Content-Type":"application/json"});c(this,"defaultTimeout",3e4);c(this,"interceptors",{request:{handlers:[],use:(r,t)=>{this.interceptors.request.handlers.push({onFulfilled:r,onRejected:t})}},response:{handlers:[],use:(r,t)=>{this.interceptors.response.handlers.push({onFulfilled:r,onRejected:t})}}})}setBaseURL(r){this.baseURL=r}getBaseURL(){return this.baseURL}setDefaultHeaders(r){this.defaultHeaders={...this.defaultHeaders,...r}}setDefaultTimeout(r){this.defaultTimeout=r}async executeRequest(r,t){const e=r.startsWith("http")?r:this.baseURL+r;let a={method:"GET",headers:{...this.defaultHeaders},timeout:this.defaultTimeout,...t};for(const o of this.interceptors.request.handlers)try{a=await o.onFulfilled(a)}catch(n){if(o.onRejected)a=await o.onRejected(n);else throw n}const i=new AbortController,s=setTimeout(()=>i.abort(),a.timeout||this.defaultTimeout);try{const o={method:a.method,headers:a.headers,signal:i.signal};a.body&&a.method!=="GET"&&(o.body=(typeof a.body=="string",a.body));const n=await fetch(e,o);let l;const u=n.headers.get("content-type");u!=null&&u.includes("application/json")?l=n.ok?await n.json():null:u!=null&&u.includes("text")?l=await n.text():l=await n.blob();let p={status:n.status,statusText:n.statusText,headers:n.headers,data:l};if(!n.ok){const d=new Error(`HTTP ${n.status}: ${n.statusText}`);throw d.response=p,d.config=a,d}for(const d of this.interceptors.response.handlers)try{p=await d.onFulfilled(p)}catch(v){if(d.onRejected)p=await d.onRejected(v);else throw v}return p.data}catch(o){throw o instanceof Error&&o.name==="AbortError"?new Error(`Request timeout after ${a.timeout}ms`):o}finally{clearTimeout(s)}}async get(r,t){return this.executeRequest(r,{...t,method:"GET"})}async post(r,t,e){return this.executeRequest(r,{...e,method:"POST",body:typeof t=="string"||t instanceof FormData?t:JSON.stringify(t)})}async put(r,t,e){return this.executeRequest(r,{...e,method:"PUT",body:typeof t=="string"||t instanceof FormData?t:JSON.stringify(t)})}async patch(r,t,e){return this.executeRequest(r,{...e,method:"PATCH",body:typeof t=="string"||t instanceof FormData?t:JSON.stringify(t)})}async delete(r,t){return this.executeRequest(r,{...t,method:"DELETE"})}async head(r,t){return this.executeRequest(r,{...t,method:"HEAD"})}}const M=new D;h.HTTPClient=D,h.UIButton=k,h.UICard=z,h.UICheckbox=L,h.UIDatePicker=A,h.UIInput=w,h.UIModal=C,h.UIPagination=E,h.UISelect=S,h.UITable=$,h.UITabs=Y,h.http=M,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});

package/package.json

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

package/dist/assets/checkbox-demo-page-C-tPBGML.js

@@ -1,152 +0,0 @@
-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>
-
-		<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 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]}">
-				<input 
-					type="checkbox" 
-					${e?"checked":""}
-					${i?"disabled":""}
-				>
-				<div class="checkbox-box ${l[m]} ${e?"checked":""} ${r?"indeterminate":""} ${i?"disabled":""}" part="checkbox">
-					
-				</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",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>
-					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",I);

package/dist/assets/dashboard-page-DG9XqSlN.js

@@ -1,34 +0,0 @@
-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>
-	<ui-button variant="secondary" size="md">Get Started</ui-button>
-	<ui-button variant="ghost" size="md">Ghost</ui-button>
-	<ui-button variant="primary" disabled size="md">Disabled</ui-button>
-</div>
-
-<h2>With Icons</h2>
-<div class="dashboard-actions">
-	<ui-button variant="primary" size="md" icon="plus">Add Item</ui-button>
-	<ui-button variant="secondary" size="md" icon="edit">Edit</ui-button>
-	<ui-button variant="ghost" size="md" icon="trash-2">Delete</ui-button>
-	<ui-button variant="primary" size="md" icon="search">Search</ui-button>
-	<ui-button variant="secondary" size="md" icon="download">Download</ui-button>
-</div>
-
-<h2>Icon Right</h2>
-<div class="dashboard-actions">
-	<ui-button variant="primary" size="md" icon="arrow-right" icon-position="right">Next</ui-button>
-	<ui-button variant="secondary" size="md" icon="arrow-left" icon-position="right">Back</ui-button>
-</div>
-
-<h2>Icon Only</h2>
-<div class="dashboard-actions">
-	<ui-button variant="primary" size="md" icon="plus" title="Add"></ui-button>
-	<ui-button variant="secondary" size="md" icon="edit" title="Edit"></ui-button>
-	<ui-button variant="ghost" size="md" icon="trash-2" title="Delete"></ui-button>
-	<ui-button variant="primary" size="sm" icon="settings" title="Settings"></ui-button>
-</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 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);