@diniz/webcomponents 1.1.2 → 1.1.4

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

@@ -1,113 +0,0 @@
-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

@@ -1,164 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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-yyBh86Yw.js

@@ -1,186 +0,0 @@
-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>
-
-		<div class="demo-section">
-			<h2>Basic Select</h2>
-			<div class="demo-grid">
-				<ui-select 
-					id="basicSelect"
-					label="Choose a Fruit"
-					placeholder="Select a fruit..."
-				></ui-select>
-				
-				<ui-select 
-					id="disabledSelect"
-					label="Disabled Select"
-					placeholder="Not available"
-					disabled
-				></ui-select>
-			</div>
-			<div id="basicResult" class="result-display" style="display: none;">
-				<strong>Selected:</strong> <span id="basicValue"></span>
-			</div>
-		</div>
-
-		<div class="demo-section">
-			<h2>Searchable Select</h2>
-			<div class="demo-grid">
-				<ui-select 
-					id="searchableSelect"
-					label="Choose a Country"
-					placeholder="Search countries..."
-					searchable
-				></ui-select>
-			</div>
-			<div id="searchResult" class="result-display" style="display: none;">
-				<strong>Selected Country:</strong> <span id="searchValue"></span>
-			</div>
-		</div>
-
-		<div class="demo-section">
-			<h2>Select Sizes & Preselected</h2>
-			<div class="demo-grid">
-				<ui-select 
-					id="preselectedSelect"
-					label="Choose a Programming Language"
-					placeholder="Select language..."
-					value="javascript"
-				></ui-select>
-			</div>
-			<div id="preselectedResult" class="result-display" style="display: none;">
-				<strong>Selected:</strong> <span id="preselectedValue"></span>
-			</div>
-		</div>
-
-		<div class="demo-section">
-			<h2>Form Example</h2>
-			<form id="userForm" style="max-width: 600px;">
-				<ui-select 
-					id="roleSelect"
-					label="User Role"
-					placeholder="Select role..."
-				></ui-select>
-
-				<ui-select 
-					id="departmentSelect"
-					label="Department"
-					placeholder="Select department..."
-				></ui-select>
-
-				<div style="margin-top: 0.5rem; display: flex; gap: 1rem;">
-					<ui-button type="submit" variant="primary" icon="check">Submit</ui-button>
-					<ui-button type="button" id="resetForm" variant="ghost">Reset</ui-button>
-				</div>
-			</form>
-			<div id="formResult" class="result-display" style="display: none; margin-top: 1rem;">
-				<strong>Form Data:</strong><br>
-				<span id="formValue"></span>
-			</div>
-		</div>
-	</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-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-		gap: 1.5rem;
-		margin-top: 1rem;
-	}
-
-	.demo-grid > * {
-		min-width: 0;
-	}
-
-	.result-display {
-		margin-top: 1rem;
-		padding: 1rem;
-		background: var(--color-muted);
-		border-radius: var(--radius-md);
-		border-left: 4px solid var(--color-primary);
-	}
-
-	form {
-		background: white;
-		padding: 1.5rem;
-		border-radius: var(--radius-lg);
-		border: 1px solid var(--color-border);
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
-`;class O extends y{constructor(){super(...arguments);m(this,"isOpen",this.useSignal(!1));m(this,"selectedValue",this.useSignal(""));m(this,"searchTerm",this.useSignal(""));m(this,"options",[])}connectedCallback(){this.setAttribute("data-ui","select"),super.connectedCallback(),this.parseOptions(),this.setupClickOutside()}static get observedAttributes(){return["value","disabled","placeholder","options"]}attributeChangedCallback(e,t,a){e==="value"&&t!==a&&this.selectedValue.set(a||""),e==="options"&&t!==a&&this.parseOptions(),this.render()}parseOptions(){const e=this.getAttribute("options");if(e)try{this.options=JSON.parse(e)}catch(t){console.error("Invalid options JSON",t),this.options=[]}}setupClickOutside(){document.addEventListener("click",e=>{!e.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(e){this.selectedValue.set(e),this.setAttribute("value",e),this.isOpen.set(!1),this.searchTerm.set(""),this.dispatchEvent(new CustomEvent("select-change",{bubbles:!0,composed:!0,detail:{value:e,option:this.options.find(t=>t.value===e)}}))}handleSearch(e){this.searchTerm.set(e.toLowerCase())}getFilteredOptions(){const e=this.searchTerm.get();return e?this.options.filter(t=>t.label.toLowerCase().includes(e)||t.value.toLowerCase().includes(e)):this.options}getSelectedLabel(){const e=this.selectedValue.get(),t=this.options.find(a=>a.value===e);return(t==null?void 0:t.label)||this.getAttribute("placeholder")||"Select an option"}render(){const e=this.isOpen.get(),t=this.hasAttribute("disabled"),a=this.hasAttribute("searchable"),u=this.getAttribute("label")||"",h=this.getSelectedLabel(),d=this.getFilteredOptions(),p=this.selectedValue.get()!=="";this.shadowRoot.innerHTML=`
-			<style>${R}</style>
-
-			<div class="select-container">
-				${u?`<label class="select-label">${u}</label>`:""}
-				
-				<div class="select-trigger ${e?"open":""}" part="trigger" tabindex="0" ${t?"disabled":""}>
-					<span class="select-placeholder ${p?"has-selection":""}">${h}</span>
-					<span class="select-arrow ${e?"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 ${e?"open":""}" part="dropdown">
-					${a?`
-						<input 
-							type="text" 
-							class="select-search" 
-							placeholder="Search..."
-							part="search"
-						>
-					`:""}
-					
-					${d.length>0?d.map(s=>`
-						<div 
-							class="select-option ${s.value===this.selectedValue.get()?"selected":""} ${s.disabled?"disabled":""}"
-							data-value="${s.value}"
-							part="option"
-						>
-							${s.label}
-						</div>
-					`).join(""):`
-						<div class="select-empty">No options found</div>
-					`}
-				</div>
-			</div>
-		`;const o=this.shadowRoot.querySelector(".select-trigger"),i=this.shadowRoot.querySelector(".select-search"),n=this.shadowRoot.querySelectorAll(".select-option:not(.disabled)");o==null||o.addEventListener("click",()=>this.toggleDropdown()),o==null||o.addEventListener("keydown",s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this.toggleDropdown())}),i==null||i.addEventListener("input",s=>{this.handleSearch(s.target.value)}),i==null||i.addEventListener("click",s=>s.stopPropagation()),n.forEach(s=>{s.addEventListener("click",()=>{const b=s.getAttribute("data-value");b&&this.selectOption(b)})})}}customElements.define("ui-select",O);class B extends y{async connectedCallback(){super.connectedCallback(),await customElements.whenDefined("ui-select"),await new Promise(l=>setTimeout(l,10)),this.setupSelects(),this.setupEventListeners()}setupSelects(){const l=this.shadowRoot.getElementById("basicSelect"),e=this.shadowRoot.getElementById("disabledSelect"),t=[{value:"apple",label:"🍎 Apple"},{value:"banana",label:"🍌 Banana"},{value:"orange",label:"🍊 Orange"},{value:"grape",label:"🍇 Grape"},{value:"strawberry",label:"🍓 Strawberry"},{value:"watermelon",label:"🍉 Watermelon"}];l&&l.setAttribute("options",JSON.stringify(t)),e&&e.setAttribute("options",JSON.stringify(t));const a=this.shadowRoot.getElementById("searchableSelect"),u=[{value:"us",label:"United States"},{value:"uk",label:"United Kingdom"},{value:"ca",label:"Canada"},{value:"au",label:"Australia"},{value:"de",label:"Germany"},{value:"fr",label:"France"},{value:"jp",label:"Japan"},{value:"br",label:"Brazil"},{value:"in",label:"India"},{value:"cn",label:"China"}];a&&a.setAttribute("options",JSON.stringify(u));const h=this.shadowRoot.getElementById("preselectedSelect"),d=[{value:"javascript",label:"JavaScript"},{value:"typescript",label:"TypeScript"},{value:"python",label:"Python"},{value:"java",label:"Java"},{value:"csharp",label:"C#"},{value:"go",label:"Go"},{value:"rust",label:"Rust"}];h&&h.setAttribute("options",JSON.stringify(d));const p=this.shadowRoot.getElementById("roleSelect"),o=[{value:"admin",label:"Administrator"},{value:"manager",label:"Manager"},{value:"developer",label:"Developer"},{value:"designer",label:"Designer"},{value:"user",label:"User"}];p&&p.setAttribute("options",JSON.stringify(o));const i=this.shadowRoot.getElementById("departmentSelect"),n=[{value:"engineering",label:"Engineering"},{value:"design",label:"Design"},{value:"marketing",label:"Marketing"},{value:"sales",label:"Sales"},{value:"hr",label:"Human Resources"}];i&&i.setAttribute("options",JSON.stringify(n))}setupEventListeners(){const l=this.shadowRoot.getElementById("basicSelect"),e=this.shadowRoot.getElementById("basicResult"),t=this.shadowRoot.getElementById("basicValue");l==null||l.addEventListener("select-change",r=>{e&&t&&(e.style.display="block",t.textContent=`${r.detail.option.label} (${r.detail.value})`)});const a=this.shadowRoot.getElementById("searchableSelect"),u=this.shadowRoot.getElementById("searchResult"),h=this.shadowRoot.getElementById("searchValue");a==null||a.addEventListener("select-change",r=>{u&&h&&(u.style.display="block",h.textContent=`${r.detail.option.label} (${r.detail.value})`)});const d=this.shadowRoot.getElementById("preselectedSelect"),p=this.shadowRoot.getElementById("preselectedResult"),o=this.shadowRoot.getElementById("preselectedValue");d==null||d.addEventListener("select-change",r=>{p&&o&&(p.style.display="block",o.textContent=`${r.detail.option.label} (${r.detail.value})`)});const i=this.shadowRoot.getElementById("userForm"),n=this.shadowRoot.getElementById("roleSelect"),s=this.shadowRoot.getElementById("departmentSelect"),b=this.shadowRoot.getElementById("formResult"),v=this.shadowRoot.getElementById("formValue"),g=this.shadowRoot.getElementById("resetForm");i==null||i.addEventListener("submit",r=>{r.preventDefault();const f=(n==null?void 0:n.getAttribute("value"))||"Not selected",S=(s==null?void 0:s.getAttribute("value"))||"Not selected";b&&v&&(b.style.display="block",v.innerHTML=`Role: <strong>${f}</strong><br>Department: <strong>${S}</strong>`)}),g==null||g.addEventListener("click",()=>{n==null||n.removeAttribute("value"),s==null||s.removeAttribute("value"),b&&(b.style.display="none")})}render(){this.shadowRoot.innerHTML=`
-			<style>${C}</style>
-			${k}
-		`}}customElements.define("select-demo-page",B);

package/dist/assets/table-DAobVRE7.js

@@ -1,12 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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};