@diniz/webcomponents 1.0.6 → 1.1.2

package/dist/assets/input-demo-C8SDvXHc.js

@@ -0,0 +1,113 @@
+var f=Object.defineProperty;var y=(s,a,t)=>a in s?f(s,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[a]=t;var n=(s,a,t)=>y(s,typeof a!="symbol"?a+"":a,t);import{B as v,t as E}from"./index-BiVNQ5Fp.js";import"./vendor-BvJLUv9i.js";class x extends v{constructor(){super();n(this,"inputEl",null);n(this,"customValidator",null);n(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,i){e!==i&&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 i=document.querySelector(t.selector);if(i&&e!==i.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"),i=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)),i&&this.inputEl.setAttribute("aria-describedby",`${i}-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(),i=this.getPlaceholder(),r=this.getName(),l=this.getErrorMessage(),u=this.hasAttribute("required"),d=this.getAttribute("pattern"),h=this.getAttribute("minlength"),m=this.getAttribute("maxlength"),c=this.getAttribute("min"),p=this.getAttribute("max"),g=this.hasAttribute("disabled"),o=!this.state.valid&&this.state.touched,b=e!=="";this.shadowRoot.innerHTML=`
+			<style>${E}</style>
+			<div class="input-wrapper${o?" invalid":""}${g?" disabled":""}">
+				${b?`<label class="input-label">${e}${u?" *":""}</label>`:""}
+				<input
+					part="input"
+					class="input-field"
+					type="${t}"
+					placeholder="${i}"
+					name="${r}"
+					.value="${this.state.value}"
+					${u?"required":""}
+					${d?`pattern="${d}"`:""}
+					${h?`minlength="${h}"`:""}
+					${m?`maxlength="${m}"`:""}
+					${c?`min="${c}"`:""}
+					${p?`max="${p}"`:""}
+					${g?"disabled":""}
+					aria-invalid="${o}"
+					aria-describedby="${r}-error"
+				/>
+				<span class="input-error${o&&l?"":" hidden"}" id="${r}-error" role="alert">${l}</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",x);const A=`<div class="demo-container">
+	<h1>Input Component Demo</h1>
+	<p class="demo-description">
+		Explore the <code>&lt;ui-input&gt;</code> component with various validation scenarios.
+	</p>
+
+	<section class="demo-section">
+		<h2>Basic Inputs</h2>
+		<div class="form-grid">
+			<ui-input
+				label="Username"
+				placeholder="Enter your username"
+				name="username"
+				required
+				minlength="3"
+				maxlength="20"
+			></ui-input>
+
+			<ui-input
+				label="Email"
+				type="email"
+				placeholder="you@example.com"
+				name="email"
+				required
+			></ui-input>
+
+			<ui-input
+				label="Password"
+				type="password"
+				placeholder="Enter password"
+				name="password"
+				required
+				minlength="8"
+			></ui-input>
+
+			<ui-input
+				label="Phone"
+				type="tel"
+				placeholder="(555) 123-4567"
+				name="phone"
+				pattern="[0-9\\-\\(\\)\\s]+"
+			></ui-input>
+		</div>
+	</section>
+
+	<section class="demo-section">
+		<h2>Custom Validation</h2>
+		<p>Email must end with <code>@company.com</code></p>
+		<div class="form-grid">
+			<ui-input
+				label="Corporate Email"
+				type="email"
+				placeholder="you@company.com"
+				name="corp-email"
+				required
+				validate="email:company.com"
+				custom-error="Must be a company.com email"
+				id="corp-email"
+			></ui-input>
+
+			<ui-input
+				label="Confirm Email"
+				type="email"
+				placeholder="Confirm your email"
+				name="confirm-email"
+				required
+				validate="match:#corp-email"
+				custom-error="Emails must match"
+				id="confirm-email"
+			></ui-input>
+		</div>
+	</section>
+	
+	<section class="demo-section">
+		<h2>Disabled State</h2>
+		<div class="form-grid">
+			<ui-input
+				label="Disabled Input"
+				placeholder="Cannot edit"
+				name="disabled"
+				value="This is disabled"
+				disabled
+			></ui-input>
+		</div>
+	</section>
+</div>
+`,$=".demo-container{padding:2rem;max-width:800px}.demo-container h1{margin:0 0 .5rem;color:var(--color-ink)}.demo-description{color:#64748b;margin-bottom:2rem}.demo-description code{background:var(--color-muted);padding:.15rem .4rem;border-radius:4px;font-size:.9em}.demo-section{margin-bottom:2.5rem;padding:1.5rem;background:var(--color-page-bg);border:1px solid var(--color-border);border-radius:var(--radius-md)}.demo-section h2{margin:0 0 1rem;font-size:1.25rem;color:var(--color-ink)}.demo-section>p{margin:0 0 1rem;color:#64748b}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}.form-actions{margin-top:1.5rem;display:flex;gap:.75rem}.demo-form{margin-bottom:1rem}.form-result{margin-top:1rem;padding:.75rem 1rem;background:var(--color-muted);border-radius:6px;display:flex;gap:.5rem}.result-label{font-weight:600;color:var(--color-ink)}.result-value{color:#64748b}.result-value.valid{color:#24ec71}.result-value.invalid{color:#ef4444}";class w extends v{constructor(){super(...arguments);n(this,"formResult",null);n(this,"statusSpan",null)}render(){this.shadowRoot.innerHTML=`
+			<style>${$}</style>
+			${A}
+		`,this.formResult=this.shadowRoot.querySelector("#form-result"),this.statusSpan=this.shadowRoot.querySelector("#result-status");const t=this.shadowRoot.querySelector("#demo-form"),e=this.shadowRoot.querySelector("#reset-btn");t&&t.addEventListener("submit",this.handleSubmit.bind(this)),e&&e.addEventListener("click",this.handleReset.bind(this))}async handleSubmit(t){t.preventDefault();const e=Array.from(this.shadowRoot.querySelectorAll("ui-input"));let i=!0;for(const r of e)r.reportValidity()||(i=!1);this.statusSpan&&(this.statusSpan.textContent=i?"Valid":"Invalid",this.statusSpan.className=`result-value ${i?"valid":"invalid"}`)}handleReset(){this.shadowRoot.querySelectorAll("ui-input").forEach(e=>{e.value=""}),this.statusSpan&&(this.statusSpan.textContent="Not validated",this.statusSpan.className="result-value")}}customElements.define("input-demo",w);export{w as InputDemo};

package/dist/assets/modal-demo-page-DdQtx_aK.js

@@ -0,0 +1,164 @@
+import{B as w}from"./index-BiVNQ5Fp.js";import"./modal-h8khzJNk.js";import"./vendor-BvJLUv9i.js";const B=`
+	<div class="demo-container">
+		<h1>Modal Component Demo</h1>
+		<p>Interactive modals with various sizes and configurations.</p>
+
+		<div class="demo-section">
+			<h2>Basic Modals</h2>
+			<div class="demo-controls">
+				<ui-button id="openBasicModal" variant="primary" icon="maximize-2">
+					Open Basic Modal
+				</ui-button>
+				<ui-button id="openSmallModal" variant="secondary">
+					Small Modal
+				</ui-button>
+				<ui-button id="openLargeModal" variant="secondary">
+					Large Modal
+				</ui-button>
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Modal Behaviors</h2>
+			<div class="demo-controls">
+				<ui-button id="openNoEscapeModal" variant="ghost">
+					No Close on Escape
+				</ui-button>
+				<ui-button id="openNoBackdropModal" variant="ghost">
+					No Close on Backdrop
+				</ui-button>
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Confirmation Modal</h2>
+			<div class="demo-controls">
+				<ui-button id="openConfirmModal" variant="primary" icon="alert-circle">
+					Delete Item
+				</ui-button>
+			</div>
+			<div id="confirmResult" class="result-display" style="display: none;">
+				<strong>Result:</strong> <span id="confirmText"></span>
+			</div>
+		</div>
+
+		<!-- Modals -->
+		<ui-modal id="basicModal" title="Welcome!" size="md">
+			<p>This is a basic modal with a title and content.</p>
+			<p>You can close it by:</p>
+			<ul>
+				<li>Clicking the X button</li>
+				<li>Pressing the Escape key</li>
+				<li>Clicking outside the modal</li>
+			</ul>
+			<div slot="footer">
+				<ui-button id="basicModalClose" variant="secondary">Close</ui-button>
+				<ui-button id="basicModalOk" variant="primary">Got it!</ui-button>
+			</div>
+		</ui-modal>
+
+		<ui-modal id="smallModal" title="Small Modal" size="sm">
+			<p>This is a small modal perfect for quick messages or confirmations.</p>
+			<div slot="footer">
+				<ui-button id="smallModalClose" variant="primary">Close</ui-button>
+			</div>
+		</ui-modal>
+
+		<ui-modal id="largeModal" title="Large Modal" size="lg">
+			<p>This is a large modal that can contain more content.</p>
+			<div style="height: 400px; background: #f1f5f9; border-radius: 8px; padding: 1rem; margin: 1rem 0;">
+				<p><strong>Scrollable Content Area</strong></p>
+				<p>When content exceeds the modal height, it automatically becomes scrollable.</p>
+				${Array(20).fill("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>").join("")}
+			</div>
+			<div slot="footer">
+				<ui-button id="largeModalClose" variant="primary">Close</ui-button>
+			</div>
+		</ui-modal>
+
+		<ui-modal id="noEscapeModal" title="No Escape Close" size="md" no-close-on-escape>
+			<p>This modal cannot be closed by pressing the Escape key.</p>
+			<p>You must click the close button or click outside.</p>
+			<div slot="footer">
+				<ui-button id="noEscapeClose" variant="primary">Close</ui-button>
+			</div>
+		</ui-modal>
+
+		<ui-modal id="noBackdropModal" title="No Backdrop Close" size="md" no-close-on-backdrop>
+			<p>This modal cannot be closed by clicking the backdrop.</p>
+			<p>You must use the close button or press Escape.</p>
+			<div slot="footer">
+				<ui-button id="noBackdropClose" variant="primary">Close</ui-button>
+			</div>
+		</ui-modal>
+
+		<ui-modal id="confirmModal" title="Confirm Delete" size="sm">
+			<p>Are you sure you want to delete this item?</p>
+			<p style="color: #ef4444; font-size: 0.875rem;">This action cannot be undone.</p>
+			<div slot="footer">
+				<ui-button id="confirmCancel" variant="ghost">Cancel</ui-button>
+				<ui-button id="confirmDelete" variant="primary" icon="trash-2">Delete</ui-button>
+			</div>
+		</ui-modal>
+	</div>
+`,C=`
+	.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);
+	}
+
+	.demo-controls {
+		display: flex;
+		gap: 1rem;
+		flex-wrap: wrap;
+		margin-top: 1rem;
+	}
+
+	.result-display {
+		margin-top: 1rem;
+		padding: 1rem;
+		background: var(--color-muted);
+		border-radius: var(--radius-md);
+		border-left: 4px solid var(--color-primary);
+	}
+
+	ul {
+		margin: 1rem 0;
+		padding-left: 1.5rem;
+	}
+
+	li {
+		margin: 0.5rem 0;
+	}
+`;class R extends w{async connectedCallback(){super.connectedCallback(),await Promise.all([customElements.whenDefined("ui-modal"),customElements.whenDefined("ui-button")]),await new Promise(a=>setTimeout(a,10)),this.setupEventListeners()}setupEventListeners(){const a=this.shadowRoot.getElementById("openBasicModal"),o=this.shadowRoot.getElementById("basicModal"),r=this.shadowRoot.getElementById("basicModalClose"),c=this.shadowRoot.getElementById("basicModalOk");a==null||a.addEventListener("click",()=>o==null?void 0:o.open()),r==null||r.addEventListener("click",()=>o==null?void 0:o.close()),c==null||c.addEventListener("click",()=>o==null?void 0:o.close());const m=this.shadowRoot.getElementById("openSmallModal"),e=this.shadowRoot.getElementById("smallModal"),u=this.shadowRoot.getElementById("smallModalClose");m==null||m.addEventListener("click",()=>e==null?void 0:e.open()),u==null||u.addEventListener("click",()=>e==null?void 0:e.close());const p=this.shadowRoot.getElementById("openLargeModal"),i=this.shadowRoot.getElementById("largeModal"),h=this.shadowRoot.getElementById("largeModalClose");p==null||p.addEventListener("click",()=>i==null?void 0:i.open()),h==null||h.addEventListener("click",()=>i==null?void 0:i.close());const v=this.shadowRoot.getElementById("openNoEscapeModal"),n=this.shadowRoot.getElementById("noEscapeModal"),g=this.shadowRoot.getElementById("noEscapeClose");v==null||v.addEventListener("click",()=>n==null?void 0:n.open()),g==null||g.addEventListener("click",()=>n==null?void 0:n.close());const b=this.shadowRoot.getElementById("openNoBackdropModal"),s=this.shadowRoot.getElementById("noBackdropModal"),y=this.shadowRoot.getElementById("noBackdropClose");b==null||b.addEventListener("click",()=>s==null?void 0:s.open()),y==null||y.addEventListener("click",()=>s==null?void 0:s.close());const E=this.shadowRoot.getElementById("openConfirmModal"),t=this.shadowRoot.getElementById("confirmModal"),f=this.shadowRoot.getElementById("confirmCancel"),k=this.shadowRoot.getElementById("confirmDelete"),l=this.shadowRoot.getElementById("confirmResult"),d=this.shadowRoot.getElementById("confirmText");E==null||E.addEventListener("click",()=>t==null?void 0:t.open()),f==null||f.addEventListener("click",()=>{t==null||t.close(),l&&d&&(l.style.display="block",d.textContent="Cancelled",d.style.color="#64748b")}),k==null||k.addEventListener("click",()=>{t==null||t.close(),l&&d&&(l.style.display="block",d.textContent="Item deleted!",d.style.color="#ef4444")})}render(){this.shadowRoot.innerHTML=`
+			<style>${C}</style>
+			${B}
+		`}}customElements.define("modal-demo-page",R);

package/dist/assets/modal-h8khzJNk.js

@@ -0,0 +1,36 @@
+var c=Object.defineProperty;var r=(s,e,t)=>e in s?c(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var d=(s,e,t)=>r(s,typeof e!="symbol"?e+"":e,t);import{B as h,t as p}from"./index-BiVNQ5Fp.js";class u extends h{constructor(){super(...arguments);d(this,"isOpen",this.useSignal(!1))}connectedCallback(){this.setAttribute("data-ui","modal"),super.connectedCallback(),this.setupEventListeners()}static get observedAttributes(){return["open"]}attributeChangedCallback(t,o,i){t==="open"&&o!==i&&this.isOpen.set(i!==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(),o=this.getAttribute("title")||"",i=this.getAttribute("size")||"md";this.shadowRoot.innerHTML=`
+			<style>
+				${p}
+				
+				::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 ${i}" part="content" @click="${a=>a.stopPropagation()}">
+					${o?`
+						<div class="modal-header" part="header">
+							<h2 class="modal-title">${o}</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 l=this.shadowRoot.querySelector(".modal-backdrop"),n=this.shadowRoot.querySelector(".modal-close");l==null||l.addEventListener("click",a=>this.handleBackdropClick(a)),n==null||n.addEventListener("click",()=>this.close())}}customElements.define("ui-modal",u);

package/dist/assets/{select-demo-page-BORrccnw.js → select-demo-page-yyBh86Yw.js}

@@ -1,4 +1,4 @@
-var w=Object.defineProperty;var E=(c,l,e)=>l in c?w(c,l,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[l]=e;var m=(c,l,e)=>E(c,typeof l!="symbol"?l+"":l,e);import{B as y,s as R}from"./app-layout-Dq81XbRZ.js";import"./index-CzQ41fnj.js";import"./vendor-BvJLUv9i.js";const k=`
+var w=Object.defineProperty;var E=(c,l,e)=>l in c?w(c,l,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[l]=e;var m=(c,l,e)=>E(c,typeof l!="symbol"?l+"":l,e);import{B as y,t as R}from"./index-BiVNQ5Fp.js";import"./vendor-BvJLUv9i.js";const k=`
 	<div class="demo-container">
 		<h1>Select Component Demo</h1>
 		<p>Customizable dropdown select with search and multi-configuration options.</p>

package/dist/assets/table-DAobVRE7.js

@@ -0,0 +1,12 @@
+var h=Object.defineProperty;var u=(i,e,t)=>e in i?h(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var o=(i,e,t)=>u(i,typeof e!="symbol"?e+"":e,t);import{B as m,t as w}from"./index-BiVNQ5Fp.js";class $ extends m{constructor(){super(...arguments);o(this,"columns",[]);o(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(a=>a.visible!==!1),d=t.map(a=>`<th class="align-${a.align??"left"}">${a.label}</th>`).join(""),l=this.rows.map((a,n)=>`<tr data-row-index="${n}">${t.map(s=>s.actions?`<td class="align-center actions-cell">
+										${s.actions.edit?`<ui-button variant="primary" class='action-btn' icon='edit' size="sm" data-action="edit" data-row-index="${n}">Edit</ui-button>`:""}
+										${s.actions.delete?`<ui-button variant="danger" class='action-btn' icon='trash' size="sm" data-action="delete" data-row-index="${n}">Delete</ui-button>`:""}
+									</td>`:`<td class="align-${s.align??"left"}">${String(a[s.key]??"")}</td>`).join("")}</tr>`).join("");this.shadowRoot.innerHTML=`
+			<style>${w}</style>
+			<div class="table-wrap">
+				<table>
+					<thead><tr>${d}</tr></thead>
+					<tbody>${l}</tbody>
+				</table>
+			</div>
+		`,this.shadowRoot.querySelectorAll(".action-btn").forEach(a=>{a.addEventListener("click",n=>{const s=n.currentTarget,c=s.dataset.action,r=parseInt(s.dataset.rowIndex||"0",10),b=c==="edit"?"edit-action":"delete-action";this.dispatchEvent(new CustomEvent(b,{bubbles:!0,composed:!0,detail:{row:this.rows[r],rowIndex:r}}))})})}}customElements.define("ui-table",$);

package/dist/assets/table-demo-Dv1cyM0s.js

@@ -0,0 +1,74 @@
+var m=Object.defineProperty;var b=(c,r,t)=>r in c?m(c,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[r]=t;var n=(c,r,t)=>b(c,typeof r!="symbol"?r+"":r,t);import{B as p,t as f}from"./index-BiVNQ5Fp.js";import"./table-DAobVRE7.js";import"./modal-h8khzJNk.js";import"./vendor-BvJLUv9i.js";class k extends p{constructor(){super(...arguments);n(this,"_total",0);n(this,"_currentPage",1);n(this,"_pageSize",10)}connectedCallback(){this.setAttribute("data-ui","pagination"),super.connectedCallback()}static get observedAttributes(){return["total","current-page","page-size"]}attributeChangedCallback(t,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},(s,o)=>o+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(),s=(e-1)*this._pageSize+1,o=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 ${s} to ${o} 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(i=>i==="..."?'<button class="page-btn ellipsis" disabled>...</button>':`
+							<button 
+								class="page-btn ${i===e?"active":""}"
+								data-page="${i}"
+								aria-label="Page ${i}"
+								${i===e?'aria-current="page"':""}
+							>
+								${i}
+							</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 s=a.dataset.page;if(s==="prev")this.handlePageChange(this._currentPage-1);else if(s==="next")this.handlePageChange(this._currentPage+1);else if(s){const o=parseInt(s,10);isNaN(o)||this.handlePageChange(o)}})}}customElements.define("ui-pagination",k);const v=`<h1>Table Demo</h1>\r
+<p class="intro">Example of loading JSON data and rendering a table.</p>\r
+\r
+<div class="demo-section">\r
+	<div class="section-header">\r
+		<h2>Data Source</h2>\r
+		<span class="status" id="data-status">Loading...</span>\r
+	</div>\r
+	<div class="code-block">\r
+		<code>fetch('https://dummyjson.com/products')</code>\r
+	</div>\r
+</div>\r
+\r
+<div class="demo-section">\r
+	<h2>Table</h2>\r
+	<div class="action-message" id="action-message" style="display: none;"></div>\r
+	<ui-table id="demo-table"></ui-table>\r
+	<div class="meta" id="data-meta"></div>\r
+	<ui-pagination></ui-pagination>\r
+</div>\r
+\r
+\r
+<ui-modal id="confirmModal" title="Confirm Delete" size="sm">\r
+	<p>Are you sure you want to delete this item?</p>\r
+	<p style="color: #ef4444; font-size: 0.875rem;">This action cannot be undone.</p>\r
+	<div slot="footer">\r
+		<ui-button id="confirmCancel" variant="ghost">Cancel</ui-button>\r
+		<ui-button id="confirmDelete" variant="primary" icon="trash-2">Delete</ui-button>\r
+	</div>\r
+</ui-modal>`,y=":host{display:block;padding:2rem;max-width:1200px;margin:0 auto}.intro{color:var(--color-ink, #0f172a);opacity:.8;margin-bottom:1.5rem}h1{font-size:2rem;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}h2{font-size:1.4rem;margin-top:0;margin-bottom:.75rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:2rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.section-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.status{font-size:.85rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;background:#e2e8f0;color:#334155}.status.loading{background:#fde68a;color:#92400e}.status.success{background:#bbf7d0;color:#166534}.status.error{background:#fecaca;color:#b91c1c}.code-block{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto}code{font-family:Courier New,monospace;font-size:.9rem;color:#334155}.meta{margin-top:.75rem;margin-bottom:.75rem;font-size:.85rem;color:#64748b}ui-pagination{margin-top:1rem}.json-output{margin:0;background:#0f172a;color:#e2e8f0;padding:1rem;border-radius:8px;overflow-x:auto;font-size:.85rem}";class w extends p{constructor(){super(...arguments);n(this,"hasLoaded",!1);n(this,"loading",!1);n(this,"error",null);n(this,"data",null);n(this,"currentPage",1);n(this,"pageSize",10)}connectedCallback(){super.connectedCallback(),this.hasLoaded||(this.hasLoaded=!0,this.loadData())}async loadData(){this.loading=!0,this.error=null,this.render();try{const t=(this.currentPage-1)*this.pageSize,e=await fetch(`https://dummyjson.com/products?limit=${this.pageSize}&skip=${t}`);if(!e.ok)throw new Error(`Request failed: ${e.status}`);const a=await e.json(),s=[{key:"id",label:"ID",align:"right",visible:!1},{key:"title",label:"Title"},{key:"brand",label:"Brand"},{key:"category",label:"Category"},{key:"price",label:"Price",align:"right"},{key:"rating",label:"Rating",align:"right"},{key:"stock",label:"Stock",align:"right"},{key:"actions",label:"Actions",align:"center",actions:{edit:!0,delete:!0}}],o=a.products.map(i=>({id:i.id,title:i.title,brand:i.brand,category:i.category,price:`$${i.price.toFixed(2)}`,rating:i.rating.toFixed(1),stock:i.stock}));this.data={columns:s,rows:o,meta:{total:a.total,limit:a.limit,skip:a.skip}},this.loading=!1,this.render()}catch(t){this.loading=!1,this.error=t instanceof Error?t.message:"Unknown error",this.render()}}showActionMessage(t){const e=this.shadowRoot.querySelector("#action-message");e&&(e.textContent=t,e.style.display="block",setTimeout(()=>{const a=this.shadowRoot.querySelector("#action-message");a&&(a.style.display="none")},5e3))}render(){var h,u;this.shadowRoot.innerHTML=`
+			<style>${y}</style>
+			${v}
+		`;const t=this.shadowRoot.querySelector("#data-status"),e=this.shadowRoot.getElementById("confirmModal"),a=this.shadowRoot.getElementById("confirmDelete"),s=this.shadowRoot.getElementById("confirmCancel");s==null||s.addEventListener("click",()=>{e==null||e.close()}),t&&(t.textContent=this.loading?"Loading...":this.error?"Error":"Loaded",t.className=`status ${this.loading?"loading":this.error?"error":"success"}`);const o=this.shadowRoot.querySelector("#demo-table");o&&this.data&&(o.data={columns:this.data.columns,rows:this.data.rows});const i=this.shadowRoot.querySelector("ui-pagination");if(i&&((h=this.data)!=null&&h.meta)){i.total=this.data.meta.total,i.currentPage=this.currentPage,i.pageSize=this.pageSize;const d=i.cloneNode(!0);(u=i.parentNode)==null||u.replaceChild(d,i),d.addEventListener("page-change",l=>{this.currentPage=l.detail.page,this.loadData()})}const g=this.shadowRoot.querySelector("#demo-table");g&&(g.addEventListener("edit-action",d=>{const{row:l}=d.detail;this.showActionMessage(`EDIT clicked for "${l.id}: ${l.title}"`)}),g.addEventListener("delete-action",d=>{const{row:l}=d.detail;console.log(`DELETE clicked for "${l.id}: ${l.title}"`),e==null||e.open(),a==null||a.addEventListener("click",()=>{e==null||e.close(),this.showActionMessage(`DELETE confirmed for "${l.id}: ${l.title}"`)})}))}}customElements.define("table-demo",w);export{w as TableDemo};

package/dist/assets/tabs-demo-BZZ6mTYB.js

@@ -0,0 +1,68 @@
+var u=Object.defineProperty;var h=(r,s,t)=>s in r?u(r,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[s]=t;var l=(r,s,t)=>h(r,typeof s!="symbol"?s+"":s,t);import{B as b,t as v}from"./index-BiVNQ5Fp.js";import"./vendor-BvJLUv9i.js";const g=':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 m extends b{constructor(){super(...arguments);l(this,"activeId",null);l(this,"indicator",null);l(this,"handleTabClick",t=>{const a=t.target;if(!a)return;const i=a.closest('[slot="tab"][data-tab]');if(!i)return;t.preventDefault();const e=i.getAttribute("data-tab");e&&this.setActive(e)})}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,a,i){t==="active"&&a!==i&&(this.activeId=i,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 a;const t=(a=this.shadowRoot)==null?void 0:a.querySelector('slot[name="tab"]');return t?t.assignedElements({flatten:!0}):[]}getPanels(){var a;const t=(a=this.shadowRoot)==null?void 0:a.querySelector('slot[name="panel"]');return t?t.assignedElements({flatten:!0}):[]}getActiveId(t){const a=this.getAttribute("active");if(a&&t.some(e=>e.getAttribute("data-tab")===a))return a;if(this.activeId&&t.some(e=>e.getAttribute("data-tab")===this.activeId))return this.activeId;const i=t.find(e=>e.getAttribute("data-tab"));return(i==null?void 0:i.getAttribute("data-tab"))??null}syncTabs(){const t=this.getTabs(),a=this.getPanels();if(t.length===0)return;const i=this.getActiveId(t);i&&(this.activeId=i,this.getAttribute("active")!==i&&this.setAttribute("active",i),t.forEach(e=>{const n=e.getAttribute("data-tab");if(!n)return;const d=e.id||`tab-${n}`,o=n===i;e.id=d,e.setAttribute("role","tab"),e.setAttribute("aria-selected",String(o)),e.setAttribute("tabindex",o?"0":"-1"),e.classList.toggle("is-active",o)}),a.forEach(e=>{const n=e.getAttribute("data-tab");if(!n)return;const d=e.id||`panel-${n}`,o=n===i;e.id=d,e.setAttribute("role","tabpanel"),e.toggleAttribute("hidden",!o),e.classList.toggle("is-active",o);const c=t.find(p=>p.getAttribute("data-tab")===n);c&&(c.setAttribute("aria-controls",d),e.setAttribute("aria-labelledby",c.id))}),this.updateIndicator(t,i))}updateIndicator(t,a){if(!this.indicator)return;const i=t.find(o=>o.getAttribute("data-tab")===a);if(!i)return;const e=this.shadowRoot.querySelector(".tablist");if(!e)return;i.getBoundingClientRect(),e.getBoundingClientRect();const n=t.indexOf(i);let d=0;for(let o=0;o<n;o++)d+=t[o].offsetWidth;this.indicator.style.transform=`translateX(${d}px)`,this.indicator.style.width=`${i.offsetWidth}px`}render(){this.shadowRoot.innerHTML=`
+			<style>${v}${g}</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"]'),a=this.shadowRoot.querySelector('slot[name="panel"]');t==null||t.addEventListener("slotchange",()=>this.syncTabs()),a==null||a.addEventListener("slotchange",()=>this.syncTabs()),requestAnimationFrame(()=>this.syncTabs())}}customElements.define("ui-tabs",m);const f=`<h1>Tabs Demo</h1>\r
+<p class="intro">A simple tabs component with slotted tabs and panels.</p>\r
+\r
+<div class="demo-section">\r
+	<h2>Basic Tabs</h2>\r
+	<ui-tabs id="basicTabs" active="overview">\r
+		<button slot="tab" data-tab="overview">Overview</button>\r
+		<button slot="tab" data-tab="usage">Usage</button>\r
+		<button slot="tab" data-tab="api">API</button>\r
+\r
+		<div slot="panel" data-tab="overview">\r
+			<p>Use tabs to group related content without navigating away.</p>\r
+			<ul>\r
+				<li>Accessible roles and ARIA labels</li>\r
+				<li>Slotted tabs and panels</li>\r
+				<li>Simple active state</li>\r
+			</ul>\r
+		</div>\r
+		<div slot="panel" data-tab="usage">\r
+			<p>Set the active tab by using the <code>active</code> attribute.</p>\r
+			<pre><code>&lt;ui-tabs active="overview"&gt;...&lt;/ui-tabs&gt;</code></pre>\r
+		</div>\r
+		<div slot="panel" data-tab="api">\r
+			<p>Listen for <code>tab-change</code> events to react to changes.</p>\r
+		</div>\r
+	</ui-tabs>\r
+</div>\r
+\r
+<div class="demo-section">\r
+	<h2>Product Tabs</h2>\r
+	<ui-tabs id="productTabs">\r
+		<button slot="tab" data-tab="details">Details</button>\r
+		<button slot="tab" data-tab="specs">Specs</button>\r
+		<button slot="tab" data-tab="shipping">Shipping</button>\r
+\r
+		<div slot="panel" data-tab="details">\r
+			<p><strong>Storm Speaker</strong> is built for portable, punchy sound.</p>\r
+		</div>\r
+		<div slot="panel" data-tab="specs">\r
+			<ul>\r
+				<li>Battery: 18 hours</li>\r
+				<li>Water resistance: IPX5</li>\r
+				<li>Bluetooth: 5.3</li>\r
+			</ul>\r
+		</div>\r
+		<div slot="panel" data-tab="shipping">\r
+			<p>Ships in 1-2 business days. Free returns within 30 days.</p>\r
+		</div>\r
+	</ui-tabs>\r
+	<div class="result" id="tab-result" style="display: none;">\r
+		Active tab: <span id="tab-value"></span>\r
+	</div>\r
+</div>\r
+`,x=":host{display:block;padding:2rem;max-width:1100px;margin:0 auto}.intro{color:var(--color-ink, #0f172a);opacity:.8;margin-bottom:1.5rem}h1{font-size:2rem;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}h2{font-size:1.4rem;margin-top:0;margin-bottom:.75rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:2rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.result{margin-top:1rem;padding:.75rem 1rem;border-radius:10px;background:#f1f5f9;color:#1e293b;font-weight:600}pre{background:#0f172a;color:#e2e8f0;padding:.75rem 1rem;border-radius:10px;overflow-x:auto}code{font-family:Courier New,monospace;font-size:.9rem}";class y extends b{render(){var t;this.shadowRoot.innerHTML=`
+			<style>${x}</style>
+			${f}
+		`;const s=this.shadowRoot.querySelector("#productTabs");if(s){const a=s.cloneNode(!0);(t=s.parentNode)==null||t.replaceChild(a,s),a.addEventListener("tab-change",i=>{const e=this.shadowRoot.getElementById("tab-result"),n=this.shadowRoot.getElementById("tab-value");e&&n&&(e.style.display="block",n.textContent=i.detail.id)})}}}customElements.define("tabs-demo",y);export{y as TabsDemo};

package/dist/index.html

@@ -1,12 +1,33 @@
-
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Web Components SPA Starter</title>
-  <script type="module" crossorigin src="/webcomponents/assets/index-CzQ41fnj.js"></script>
-  <link rel="stylesheet" crossorigin href="/webcomponents/assets/index-uHZenGtA.css">
+  <title>Web Components UI Kit</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Sora:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      height: 100%;
+    }
+    
+    body {
+      font-family: "DM Sans", system-ui, -apple-system, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      background: #f8f9fc;
+    }
+  </style>
+  <script type="module" crossorigin src="/webcomponents/assets/index-BiVNQ5Fp.js"></script>
+  <link rel="modulepreload" crossorigin href="/webcomponents/assets/vendor-BvJLUv9i.js">
+  <link rel="stylesheet" crossorigin href="/webcomponents/assets/index-DFxj0POj.css">
 </head>
 <body>
   <div id="app"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diniz/webcomponents",
-  "version": "1.0.6",
+  "version": "1.1.2",
   "description": "Lightweight web components library",
   "type": "module",
   "main": "./dist/webcomponents.umd.js",
@@ -26,9 +26,9 @@
   },
   "devDependencies": {
     "@types/feather-icons": "^4.29.4",
-    "@types/node": "^25.3.1",
-    "typescript": "^5.4.0",
-    "vite": "^5.2.0"
+    "@types/node": "^25.3.2",
+    "typescript": "^5.9.3",
+    "vite": "^5.4.21"
   },
   "dependencies": {
     "feather-icons": "^4.29.2"