@diniz/webcomponents 1.0.3 → 1.0.4

package/dist/assets/{date-picker-demo-BjOsNBcV.js → date-picker-demo-AQIyV-D4.js}

@@ -1,125 +1,12 @@
-var m=Object.defineProperty;var v=(c,o,t)=>o in c?m(c,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[o]=t;var d=(c,o,t)=>v(c,typeof o!="symbol"?o+"":o,t);import{B as l,s as h}from"./app-layout-BWpUyzvG.js";import"./index-BZ8Wp8z7.js";import"./vendor-BvJLUv9i.js";class k extends l{constructor(){super(...arguments);d(this,"inputElement",null)}connectedCallback(){this.setAttribute("data-ui","date-picker"),super.connectedCallback(),this.attachEventListeners()}static get observedAttributes(){return["value","format","min","max","disabled","placeholder"]}attributeChangedCallback(){this.render(),this.attachEventListeners()}getFormat(){const t=this.getAttribute("format");return t==="DD/MM/YYYY"||t==="MM/DD/YYYY"||t==="DD-MM-YYYY"||t==="MM-DD-YYYY"?t:"YYYY-MM-DD"}getValue(){return this.getAttribute("value")||""}getMin(){return this.getAttribute("min")||""}getMax(){return this.getAttribute("max")||""}getPlaceholder(){return this.getAttribute("placeholder")||this.getFormat()}isDisabled(){return this.hasAttribute("disabled")}formatDate(t,a){if(!t)return"";const e=t.split("-");if(e.length!==3)return t;const[i,r,n]=e;switch(a){case"DD/MM/YYYY":return`${n}/${r}/${i}`;case"MM/DD/YYYY":return`${r}/${n}/${i}`;case"DD-MM-YYYY":return`${n}-${r}-${i}`;case"MM-DD-YYYY":return`${r}-${n}-${i}`;case"YYYY-MM-DD":default:return t}}parseDate(t,a){if(!t)return"";let e,i,r,n;switch(a){case"DD/MM/YYYY":if(e=t.split("/"),e.length!==3)return"";[n,r,i]=e;break;case"MM/DD/YYYY":if(e=t.split("/"),e.length!==3)return"";[r,n,i]=e;break;case"DD-MM-YYYY":if(e=t.split("-"),e.length!==3)return"";[n,r,i]=e;break;case"MM-DD-YYYY":if(e=t.split("-"),e.length!==3)return"";[r,n,i]=e;break;case"YYYY-MM-DD":default:return t}return r=r.padStart(2,"0"),n=n.padStart(2,"0"),`${i}-${r}-${n}`}attachEventListeners(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".formatted-input"),a=this.shadowRoot.querySelector('input[type="date"]'),e=this.shadowRoot.querySelector(".calendar-btn");if(!t||!a)return;const i=()=>{const r=t.value,n=this.getFormat(),s=this.parseDate(r,n);this.isValidDate(s)?(a.value=s,t.classList.remove("invalid"),this.dispatchDateChange(s)):r===""?(a.value="",t.classList.remove("invalid"),this.dispatchDateChange("")):t.classList.add("invalid")};t.addEventListener("blur",i),t.addEventListener("keydown",r=>{r.key==="Enter"&&(i(),t.blur())}),a.addEventListener("change",r=>{const s=r.target.value,u=this.getFormat(),p=this.formatDate(s,u);t.value=p,t.classList.remove("invalid"),this.dispatchDateChange(s)}),e&&e.addEventListener("click",()=>{var r;(r=a.showPicker)==null||r.call(a)})}isValidDate(t){if(!t)return!1;const a=new Date(t);return a instanceof Date&&!isNaN(a.getTime())}dispatchDateChange(t){const a=this.getFormat(),e=this.formatDate(t,a);this.dispatchEvent(new CustomEvent("date-change",{detail:{value:t,formattedValue:e,format:a},bubbles:!0,composed:!0})),this.setAttribute("value",t)}getISOValue(){return this.getValue()}getFormattedValue(){const t=this.getValue(),a=this.getFormat();return this.formatDate(t,a)}setValue(t){this.setAttribute("value",t)}clear(){this.setAttribute("value","")}render(){const t=this.getValue(),a=this.getFormat(),e=this.getMin(),i=this.getMax(),r=this.isDisabled(),n=this.getPlaceholder(),s=this.formatDate(t,a);this.shadowRoot.innerHTML=`
-			<style>
-				${h}
-
-				:host {
-					display: inline-block;
-					width: 100%;
-					max-width: 300px;
-				}
-
-				.date-picker-container {
-					position: relative;
-					display: flex;
-					flex-direction: column;
-					gap: 0.5rem;
-				}
-
-				.date-input-wrapper {
-					position: relative;
-					display: flex;
-					align-items: center;
-					border: 1px solid var(--color-border);
-					border-radius: var(--radius-md);
-					background: white;
-					transition: all 0.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 rgba(36, 236, 113, 0.1);
-					outline: none;
-				}
-
-				.date-input-wrapper.disabled {
-					background: var(--color-muted);
-					cursor: not-allowed;
-					opacity: 0.6;
-				}
-
-				.formatted-input {
-					flex: 1;
-					border: none;
-					padding: 0.75rem 1rem;
-					font-size: 0.95rem;
-					font-family: inherit;
-					background: transparent;
-					color: var(--color-ink);
-					outline: none;
-				}
-
-				.formatted-input:disabled {
-					cursor: not-allowed;
-					color: var(--color-ink);
-					opacity: 0.7;
-				}
-
-				.formatted-input::placeholder {
-					color: #94a3b8;
-					opacity: 0.7;
-				}
-
-				.formatted-input.invalid {
-					color: #dc2626;
-				}
-
-				.hidden-date-input {
-					position: absolute;
-					opacity: 0;
-					pointer-events: none;
-					width: 0;
-					height: 0;
-				}
-
-				.calendar-btn {
-					padding: 0.5rem;
-					margin-right: 0.5rem;
-					border: none;
-					background: transparent;
-					cursor: pointer;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					color: var(--color-ink);
-					opacity: 0.6;
-					transition: all 0.2s ease;
-					border-radius: 6px;
-				}
-
-				.calendar-btn:hover:not(:disabled) {
-					background: var(--color-muted);
-					opacity: 1;
-				}
-
-				.calendar-btn:disabled {
-					cursor: not-allowed;
-					opacity: 0.3;
-				}
-
-				.calendar-icon {
-					width: 20px;
-					height: 20px;
-				}
-
-				.format-label {
-					font-size: 0.75rem;
-					color: var(--color-ink);
-					opacity: 0.6;
-					padding: 0 0.25rem;
-					font-weight: 500;
-				}
-			</style>
+var v=Object.defineProperty;var m=(c,s,t)=>s in c?v(c,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[s]=t;var d=(c,s,t)=>m(c,typeof s!="symbol"?s+"":s,t);import{B as l,s as h}from"./app-layout-D81L3er1.js";import"./index-DJpTIOwN.js";import"./vendor-BvJLUv9i.js";class k extends l{constructor(){super(...arguments);d(this,"inputElement",null)}connectedCallback(){this.setAttribute("data-ui","date-picker"),super.connectedCallback(),this.attachEventListeners()}static get observedAttributes(){return["value","format","min","max","disabled","placeholder"]}attributeChangedCallback(){this.render(),this.attachEventListeners()}getFormat(){const t=this.getAttribute("format");return t==="DD/MM/YYYY"||t==="MM/DD/YYYY"||t==="DD-MM-YYYY"||t==="MM-DD-YYYY"?t:"YYYY-MM-DD"}getValue(){return this.getAttribute("value")||""}getMin(){return this.getAttribute("min")||""}getMax(){return this.getAttribute("max")||""}getPlaceholder(){return this.getAttribute("placeholder")||this.getFormat()}isDisabled(){return this.hasAttribute("disabled")}formatDate(t,a){if(!t)return"";const e=t.split("-");if(e.length!==3)return t;const[i,r,n]=e;switch(a){case"DD/MM/YYYY":return`${n}/${r}/${i}`;case"MM/DD/YYYY":return`${r}/${n}/${i}`;case"DD-MM-YYYY":return`${n}-${r}-${i}`;case"MM-DD-YYYY":return`${r}-${n}-${i}`;case"YYYY-MM-DD":default:return t}}parseDate(t,a){if(!t)return"";let e,i,r,n;switch(a){case"DD/MM/YYYY":if(e=t.split("/"),e.length!==3)return"";[n,r,i]=e;break;case"MM/DD/YYYY":if(e=t.split("/"),e.length!==3)return"";[r,n,i]=e;break;case"DD-MM-YYYY":if(e=t.split("-"),e.length!==3)return"";[n,r,i]=e;break;case"MM-DD-YYYY":if(e=t.split("-"),e.length!==3)return"";[r,n,i]=e;break;case"YYYY-MM-DD":default:return t}return r=r.padStart(2,"0"),n=n.padStart(2,"0"),`${i}-${r}-${n}`}attachEventListeners(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".formatted-input"),a=this.shadowRoot.querySelector('input[type="date"]'),e=this.shadowRoot.querySelector(".calendar-btn");if(!t||!a)return;const i=()=>{const r=t.value,n=this.getFormat(),o=this.parseDate(r,n);this.isValidDate(o)?(a.value=o,t.classList.remove("invalid"),this.dispatchDateChange(o)):r===""?(a.value="",t.classList.remove("invalid"),this.dispatchDateChange("")):t.classList.add("invalid")};t.addEventListener("blur",i),t.addEventListener("keydown",r=>{r.key==="Enter"&&(i(),t.blur())}),a.addEventListener("change",r=>{const o=r.target.value,u=this.getFormat(),p=this.formatDate(o,u);t.value=p,t.classList.remove("invalid"),this.dispatchDateChange(o)}),e&&e.addEventListener("click",()=>{var r;(r=a.showPicker)==null||r.call(a)})}isValidDate(t){if(!t)return!1;const a=new Date(t);return a instanceof Date&&!isNaN(a.getTime())}dispatchDateChange(t){const a=this.getFormat(),e=this.formatDate(t,a);this.dispatchEvent(new CustomEvent("date-change",{detail:{value:t,formattedValue:e,format:a},bubbles:!0,composed:!0})),this.setAttribute("value",t)}getISOValue(){return this.getValue()}getFormattedValue(){const t=this.getValue(),a=this.getFormat();return this.formatDate(t,a)}setValue(t){this.setAttribute("value",t)}clear(){this.setAttribute("value","")}render(){const t=this.getValue(),a=this.getFormat(),e=this.getMin(),i=this.getMax(),r=this.isDisabled(),n=this.getPlaceholder(),o=this.formatDate(t,a);this.shadowRoot.innerHTML=`
+			<style>${h}</style>
 			<div class="date-picker-container">
 				<div class="date-input-wrapper ${r?"disabled":""}">
 					<input
 						type="text"
 						class="formatted-input"
 						part="input"
-						value="${s}"
+						value="${o}"
 						placeholder="${n}"
 						${r?"disabled":""}
 					/>
@@ -144,7 +31,7 @@ var m=Object.defineProperty;var v=(c,o,t)=>o in c?m(c,o,{enumerable:!0,configura
 				</div>
 				<div class="format-label">Format: ${a}</div>
 			</div>
-		`}}customElements.define("ui-date-picker",k);const b=`<h1>📅 Date Picker Component Demo</h1>\r
+		`}}customElements.define("ui-date-picker",k);const Y=`<h1>📅 Date Picker Component Demo</h1>\r
 \r
 <div class="demo-section">\r
 	<h2>Different Date Formats</h2>\r
@@ -253,7 +140,7 @@ var m=Object.defineProperty;var v=(c,o,t)=>o in c?m(c,o,{enumerable:!0,configura
 &lt;/script&gt;</code>\r
 	</div>\r
 </div>\r
-`,Y=":host{display:block;padding:2rem;max-width:1200px;margin:0 auto}h1{font-size:2rem;margin-bottom:2rem;color:var(--color-ink, #0f172a)}h2{font-size:1.5rem;margin-top:2rem;margin-bottom:1rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:3rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.picker-row{margin-bottom:2rem}.picker-label{font-weight:600;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}.picker-controls{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}ui-date-picker{flex:1;min-width:250px}.output{margin-top:1rem;padding:1rem;background:#f8fafc;border-radius:8px;font-family:Courier New,monospace;font-size:.85rem;white-space:pre-wrap;color:#334155}.code-block{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto;margin:1rem 0}code{font-family:Courier New,monospace;font-size:.9rem;color:#334155}";class f extends l{connectedCallback(){super.connectedCallback(),this.attachEventListeners()}attachEventListeners(){if(!this.shadowRoot)return;this.shadowRoot.querySelectorAll("ui-date-picker").forEach(t=>{t.addEventListener("date-change",a=>{var i;const e=(i=this.shadowRoot)==null?void 0:i.querySelector(`#output-${t.id}`);e&&(e.textContent=JSON.stringify(a.detail,null,2))})}),this.shadowRoot.addEventListener("click",t=>{var e,i;const a=t.target;if(a.closest(".clear-btn")){const r=(e=a.closest(".clear-btn"))==null?void 0:e.getAttribute("data-picker"),n=(i=this.shadowRoot)==null?void 0:i.querySelector(`#${r}`);n&&n.clear&&n.clear()}})}render(){this.shadowRoot.innerHTML=`
-			<style>${Y}</style>
-			${b}
+`,b=":host{display:block;padding:2rem;max-width:1200px;margin:0 auto}h1{font-size:2rem;margin-bottom:2rem;color:var(--color-ink, #0f172a)}h2{font-size:1.5rem;margin-top:2rem;margin-bottom:1rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:3rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.picker-row{margin-bottom:2rem}.picker-label{font-weight:600;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}.picker-controls{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}ui-date-picker{flex:1;min-width:250px}.output{margin-top:1rem;padding:1rem;background:#f8fafc;border-radius:8px;font-family:Courier New,monospace;font-size:.85rem;white-space:pre-wrap;color:#334155}.code-block{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto;margin:1rem 0}code{font-family:Courier New,monospace;font-size:.9rem;color:#334155}";class f extends l{connectedCallback(){super.connectedCallback(),this.attachEventListeners()}attachEventListeners(){if(!this.shadowRoot)return;this.shadowRoot.querySelectorAll("ui-date-picker").forEach(t=>{t.addEventListener("date-change",a=>{var i;const e=(i=this.shadowRoot)==null?void 0:i.querySelector(`#output-${t.id}`);e&&(e.textContent=JSON.stringify(a.detail,null,2))})}),this.shadowRoot.addEventListener("click",t=>{var e,i;const a=t.target;if(a.closest(".clear-btn")){const r=(e=a.closest(".clear-btn"))==null?void 0:e.getAttribute("data-picker"),n=(i=this.shadowRoot)==null?void 0:i.querySelector(`#${r}`);n&&n.clear&&n.clear()}})}render(){this.shadowRoot.innerHTML=`
+			<style>${b}</style>
+			${Y}
 		`}}customElements.define("date-picker-demo",f);export{f as DatePickerDemo};

package/dist/assets/index-DJpTIOwN.js

@@ -0,0 +1,2 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/dashboard-page-D9gcDgAT.js","assets/app-layout-D81L3er1.js","assets/vendor-BvJLUv9i.js","assets/table-BoHSrBty.js","assets/date-picker-demo-AQIyV-D4.js","assets/table-demo-D0gN-zGB.js","assets/input-demo-DX3FkdO8.js","assets/modal-demo-page-A4aRApyB.js","assets/select-demo-page-Dg5ajGaj.js","assets/checkbox-demo-page-n4kXIN81.js"])))=>i.map(i=>d[i]);
+(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))s(t);new MutationObserver(t=>{for(const n of t)if(n.type==="childList")for(const o of n.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&s(o)}).observe(document,{childList:!0,subtree:!0});function a(t){const n={};return t.integrity&&(n.integrity=t.integrity),t.referrerPolicy&&(n.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?n.credentials="include":t.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function s(t){if(t.ep)return;t.ep=!0;const n=a(t);fetch(t.href,n)}})();const f=new Set,h={user:null,theme:"light"},_={getState:()=>h,setState(e){Object.assign(h,e),f.forEach(r=>r(h))},subscribe(e){return f.add(e),()=>f.delete(e)}},P="modulepreload",w=function(e){return"/webcomponents/"+e},y={},u=function(r,a,s){let t=Promise.resolve();if(a&&a.length>0){document.getElementsByTagName("link");const o=document.querySelector("meta[property=csp-nonce]"),i=(o==null?void 0:o.nonce)||(o==null?void 0:o.getAttribute("nonce"));t=Promise.allSettled(a.map(c=>{if(c=w(c),c in y)return;y[c]=!0;const p=c.endsWith(".css"),b=p?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${c}"]${b}`))return;const l=document.createElement("link");if(l.rel=p?"stylesheet":P,p||(l.as="script"),l.crossOrigin="",l.href=c,i&&l.setAttribute("nonce",i),document.head.appendChild(l),p)return new Promise((v,L)=>{l.addEventListener("load",v),l.addEventListener("error",()=>L(new Error(`Unable to preload CSS for ${c}`)))})}))}function n(o){const i=new Event("vite:preloadError",{cancelable:!0});if(i.payload=o,window.dispatchEvent(i),!i.defaultPrevented)throw o}return t.then(o=>{for(const i of o||[])i.status==="rejected"&&n(i.reason);return r().catch(n)})},O=[{path:"/",layout:"app-layout",load:()=>u(()=>import("./dashboard-page-D9gcDgAT.js"),__vite__mapDeps([0,1,2,3])),component:"dashboard-page"},{path:"/date-picker",layout:"app-layout",load:()=>u(()=>import("./date-picker-demo-AQIyV-D4.js"),__vite__mapDeps([4,1,2])),component:"date-picker-demo"},{path:"/table-demo",layout:"app-layout",load:()=>u(()=>import("./table-demo-D0gN-zGB.js"),__vite__mapDeps([5,1,2,3])),component:"table-demo"},{path:"/input-demo",layout:"app-layout",load:()=>u(()=>import("./input-demo-DX3FkdO8.js"),__vite__mapDeps([6,1,2])),component:"input-demo"},{path:"/modal",layout:"app-layout",load:()=>u(()=>import("./modal-demo-page-A4aRApyB.js"),__vite__mapDeps([7,1,2])),component:"modal-demo-page"},{path:"/select",layout:"app-layout",load:()=>u(()=>import("./select-demo-page-Dg5ajGaj.js"),__vite__mapDeps([8,1,2])),component:"select-demo-page"},{path:"/checkbox",layout:"app-layout",load:()=>u(()=>import("./checkbox-demo-page-n4kXIN81.js"),__vite__mapDeps([9,1,2])),component:"checkbox-demo-page"}],d="/webcomponents/";function S(e){const r=d.endsWith("/")?d.slice(0,-1):d;return e===r||e===r+"/"?"/":e.startsWith(r+"/")?e.slice(r.length):e}function E(e){return`${d.endsWith("/")?d.slice(0,-1):d}${e}`}async function m(){const e=location.pathname,r=S(e),a=O.find(o=>o.path===r);if(!a){if(r!=="/"){const o=E("/");history.replaceState(null,"",o),await m()}return}await a.load();const s=document.createElement(a.layout),t=document.createElement(a.component);s.appendChild(t);const n=document.querySelector("#app");n&&(n.innerHTML="",n.appendChild(s))}window.addEventListener("popstate",m);window.addEventListener("DOMContentLoaded",m);document.addEventListener("click",e=>{const a=e.composedPath().find(s=>s instanceof Element&&s.matches("[data-link]"));if(a){e.preventDefault();const s=a.getAttribute("href")??"/",t=E(s);history.pushState(null,"",t),m()}});const g=e=>{document.documentElement.dataset.theme=e};g(_.getState().theme);_.subscribe(e=>g(e.theme));export{_ as s};

package/dist/assets/index-uHZenGtA.css

@@ -0,0 +1 @@
+:root{--color-primary: #24ec71;--color-primary-contrast: #ffffff;--color-ink: #0f172a;--color-muted: #f1f5f9;--color-header: #f8fafc;--color-border: #e2e8f0;--color-border-strong: #cbd5f5;--color-nav-bg: #222222;--color-nav-text: #ffffff;--shadow-primary: 0 8px 18px rgba(31, 111, 235, .25);--focus-ring: #9ec5ff;--radius-pill: 999px;--radius-md: 12px;--color-page-bg: #ffffff;--color-page-text: #0f172a}body{background:var(--color-page-bg);color:var(--color-page-text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}:host([data-ui="button"]){display:inline-block}:host([data-ui="table"]){display:block}:host([data-ui="layout"]){display:block}:host([data-ui="sidebar"]){display:block}.btn{align-items:center;border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.95rem;font-weight:600;gap:.5rem;line-height:1;padding:.65rem 1.2rem;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn.primary{background:var(--color-primary);color:var(--color-primary-contrast);box-shadow:var(--shadow-primary)}.btn.secondary{background:var(--color-muted);color:var(--color-ink);border-color:var(--color-border-strong)}.btn.ghost{background:transparent;color:var(--color-primary);border-color:var(--color-border-strong)}.btn.has-icon{line-height:1.2}.btn .btn-icon{width:18px;height:18px;flex-shrink:0}.btn .btn-icon svg{width:100%;height:100%}.btn.icon-only{padding:.65rem;aspect-ratio:1}.btn.icon-only.sm{padding:.45rem}.btn.icon-only.lg{padding:.8rem}.btn.sm .btn-icon{width:14px;height:14px}.btn.lg .btn-icon{width:22px;height:22px}.btn.sm{font-size:.85rem;padding:.45rem .9rem;box-shadow:0 4px 12px #a7124426}.btn.md{font-size:.95rem;padding:.65rem 1.2rem}.btn.lg{font-size:1.05rem;padding:.8rem 1.5rem}.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}table{border-collapse:collapse;width:100%}thead{background:var(--color-header)}th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-border);font-size:.95rem;border-right:1px solid var(--color-border)}tr:last-child td{border-bottom:none}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.actions-cell{display:flex;gap:.5rem;justify-content:center}.action-btn{padding:.35rem .7rem;font-size:.8rem;border-radius:4px;cursor:pointer;border:1px solid var(--color-border-strong);background:var(--color-muted);color:var(--color-ink);transition:background-color .12s ease}.action-btn:hover{background:var(--color-border)}.action-btn.edit-btn{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}.action-btn.edit-btn:hover{opacity:.85}.action-btn.delete-btn{background:#ef4444;color:#fff;border-color:#ef4444}.action-btn.delete-btn:hover{opacity:.85}.app-nav{padding:1rem;background:var(--color-nav-bg);color:var(--color-nav-text)}.app-link{color:var(--color-nav-text);margin-right:1rem;text-decoration:none}.signal-demo,.theme-toggle{margin-top:16px;display:flex;align-items:center;gap:12px}.data-table{margin-top:15px}.dashboard-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:24px}.dashboard-sidebar{background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px}.sidebar-title{margin:0 0 12px;font-size:1rem}.sidebar-nav{display:flex;flex-direction:column;gap:10px}.sidebar-link{color:var(--color-ink);text-decoration:none;font-weight:600}.dashboard-main{display:flex;flex-direction:column;gap:12px}.dashboard-actions{display:flex;flex-wrap:wrap;gap:12px}@media (max-width: 900px){.dashboard-layout{grid-template-columns:1fr}}:host([data-ui="input"]){display:block}.input-wrapper{display:flex;flex-direction:column;gap:.35rem}.input-label{font-size:.9rem;font-weight:600;color:var(--color-ink)}.input-field{padding:.6rem .85rem;font-size:.95rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:6px;background:var(--color-page-bg);color:var(--color-page-text);transition:border-color .15s ease,box-shadow .15s ease;outline:none}.input-field::placeholder{color:#94a3b8}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec7126}.input-field:disabled{background:var(--color-muted);cursor:not-allowed;opacity:.7}.input-wrapper.invalid .input-field{border-color:#ef4444}.input-wrapper.invalid .input-field:focus{box-shadow:0 0 0 3px #ef444426}.input-error{font-size:.8rem;color:#ef4444;display:flex;align-items:center;gap:.25rem}.input-error.hidden{display:none}:host([data-ui="checkbox"]){display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}:host([data-ui="checkbox"][disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{display:inline-flex;align-items:center;gap:.75rem}.checkbox-box{position:relative;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--color-border, #cbd5e1);border-radius:var(--radius-sm, 4px);background:#fff;transition:all .2s;flex-shrink:0;box-sizing:border-box}.checkbox-box.size-sm{min-width:16px;max-width:16px;min-height:16px;max-height:16px}.checkbox-box.size-md{min-width:18px;max-width:18px;min-height:18px;max-height:18px}.checkbox-box.size-lg{min-width:20px;max-width:20px;min-height:20px;max-height:20px}.checkbox-box:hover:not(.disabled){border-color:var(--color-primary, #24ec71)}.checkbox-box.checked,.checkbox-box.indeterminate{background:var(--color-primary, #24ec71);border-color:var(--color-primary, #24ec71)}.checkbox-box.disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed}.checkbox-icon{display:none;color:#fff;position:absolute}.checkbox-box.checked .checkbox-icon.check,.checkbox-box.indeterminate .checkbox-icon.minus{display:block}.checkbox-icon.check{width:12px;height:12px}.checkbox-icon.minus{width:10px;height:10px}.checkbox-label{font-size:.95rem;color:var(--color-ink, #0f172a);line-height:1.5}.checkbox-container.size-sm .checkbox-label{font-size:.875rem}.checkbox-container.size-lg .checkbox-label{font-size:1rem}input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.modal-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;animation:fadeIn .2s ease-out}.modal-backdrop.open{display:flex;align-items:center;justify-content:center;padding:1rem}.modal-content{background:var(--color-surface, white);border-radius:var(--radius-lg, 16px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;display:flex;flex-direction:column;width:100%;animation:slideUp .2s ease-out}.modal-content.sm{max-width:400px}.modal-content.md{max-width:600px}.modal-content.lg{max-width:800px}.modal-content.xl{max-width:1200px}.modal-content.full{max-width:95vw}.modal-header{padding:1.5rem;border-bottom:1px solid var(--color-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:1.25rem;font-weight:600;color:var(--color-ink, #0f172a);margin:0}.modal-close{background:none;border:none;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md, 8px);color:var(--color-text-muted, #64748b);transition:all .2s}.modal-close:hover{background:var(--color-muted, #f1f5f9);color:var(--color-ink, #0f172a)}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-footer{padding:1.5rem;border-top:1px solid var(--color-border, #e2e8f0);display:flex;gap:.75rem;justify-content:flex-end}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="select"]){display:block;width:90%}.select-container{position:relative;width:100%}.select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--color-ink, #0f172a)}.select-trigger{width:100%;padding:.625rem 1rem;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s;font-size:.95rem;color:var(--color-ink, #0f172a)}.select-trigger:hover:not(:disabled){border-color:var(--color-primary, #24ec71)}.select-trigger:focus{outline:none;border-color:var(--color-primary, #24ec71);box-shadow:0 0 0 3px #24ec711a}.select-trigger:disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed;opacity:.6}.select-trigger.open{border-color:var(--color-primary, #24ec71)}.select-placeholder{color:var(--color-text-muted, #94a3b8);flex:1;text-align:left}.select-placeholder.has-selection{color:var(--color-ink, #0f172a)}.select-arrow{display:flex;transition:transform .2s;color:var(--color-text-muted, #64748b)}.select-arrow.open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:300px;overflow-y:auto;z-index:1000;display:none;animation:slideDown .15s ease-out}.select-dropdown.open{display:block}.select-search{width:100%;padding:.625rem 1rem;border:none;border-bottom:1px solid var(--color-border, #e2e8f0);font-size:.95rem;outline:none}.select-search:focus{background:var(--color-muted, #f1f5f9)}.select-option{padding:.625rem 1rem;cursor:pointer;transition:background .15s;color:var(--color-ink, #0f172a);font-size:.95rem}.select-option:hover:not(.disabled){background:var(--color-muted, #f1f5f9)}.select-option.selected{background:#24ec711a;color:var(--color-primary, #24ec71);font-weight:500}.select-option.disabled{opacity:.5;cursor:not-allowed}.select-empty{padding:1rem;text-align:center;color:var(--color-text-muted, #94a3b8);font-size:.875rem}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="pagination"]){display:block}.pagination-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.pagination-info{font-size:.9rem;color:var(--color-ink);opacity:.7}.pagination{display:flex;align-items:center;gap:.25rem}.page-btn{min-width:2.5rem;height:2.5rem;padding:.5rem;border:1px solid var(--color-border);background:#fff;color:var(--color-ink);font-size:.9rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.page-btn:hover:not(:disabled):not(.active){background:var(--color-muted);border-color:var(--color-border-strong)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-btn.active{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary);font-weight:600}.page-btn.ellipsis{border:none;background:transparent;cursor:default;pointer-events:none}.nav-btn{padding:.5rem .75rem}.nav-btn svg{width:16px;height:16px}:host([data-ui="date-picker"]){display:inline-block;width:100%;max-width:300px}.date-picker-container{position:relative;display:flex;flex-direction:column;gap:.5rem}.date-input-wrapper{position:relative;display:flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;transition:all .2s ease}.date-input-wrapper:hover:not(.disabled){border-color:var(--color-border-strong)}.date-input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec711a;outline:none}.date-input-wrapper.disabled{background:var(--color-muted);cursor:not-allowed;opacity:.6}.formatted-input{flex:1;border:none;padding:.75rem 1rem;font-size:.95rem;font-family:inherit;background:transparent;color:var(--color-ink);outline:none}.formatted-input:disabled{cursor:not-allowed;color:var(--color-ink);opacity:.7}.formatted-input::placeholder{color:#94a3b8;opacity:.7}.formatted-input.invalid{color:#dc2626}.hidden-date-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.calendar-btn{padding:.5rem;margin-right:.5rem;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-ink);opacity:.6;transition:all .2s ease;border-radius:6px}.calendar-btn:hover:not(:disabled){background:var(--color-muted);opacity:1}.calendar-btn:disabled{cursor:not-allowed;opacity:.3}.calendar-icon{width:20px;height:20px}.format-label{font-size:.75rem;color:var(--color-ink);opacity:.6;padding:0 .25rem;font-weight:500}:root[data-theme=shadcn]{--color-primary: #0f172a;--color-primary-contrast: #f8fafc;--color-ink: #0f172a;--color-muted: #f4f4f5;--color-header: #fafafa;--color-border: #e4e4e7;--color-border-strong: #d4d4d8;--color-nav-bg: #ffffff;--color-nav-text: #0f172a;--shadow-primary: 0 8px 18px rgba(15, 23, 42, .18);--focus-ring: #a1a1aa;--color-page-bg: #f8fafc;--color-page-text: #0f172a}

package/dist/assets/{input-demo-lSk0zPP7.js → input-demo-DX3FkdO8.js}

@@ -1,4 +1,4 @@
-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 r=(s,a,t)=>y(s,typeof a!="symbol"?a+"":a,t);import{B as v,s as E}from"./app-layout-BWpUyzvG.js";import"./index-BZ8Wp8z7.js";import"./vendor-BvJLUv9i.js";class x extends v{constructor(){super();r(this,"inputEl",null);r(this,"customValidator",null);r(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(),n=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"),b=this.hasAttribute("disabled"),o=!this.state.valid&&this.state.touched,g=e!=="";this.shadowRoot.innerHTML=`
+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 r=(s,a,t)=>y(s,typeof a!="symbol"?a+"":a,t);import{B as v,s as E}from"./app-layout-D81L3er1.js";import"./index-DJpTIOwN.js";import"./vendor-BvJLUv9i.js";class x extends v{constructor(){super();r(this,"inputEl",null);r(this,"customValidator",null);r(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(),n=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"),b=this.hasAttribute("disabled"),o=!this.state.valid&&this.state.touched,g=e!=="";this.shadowRoot.innerHTML=`
 			<style>${E}</style>
 			<div class="input-wrapper${o?" invalid":""}${b?" disabled":""}">
 				${g?`<label class="input-label">${e}${u?" *":""}</label>`:""}

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

@@ -0,0 +1,199 @@
+var R=Object.defineProperty;var L=(a,e,t)=>e in a?R(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var C=(a,e,t)=>L(a,typeof e!="symbol"?e+"":e,t);import{B,s as I}from"./app-layout-D81L3er1.js";import"./index-DJpTIOwN.js";import"./vendor-BvJLUv9i.js";const x=`
+	<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>
+`,M=`
+	.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 z extends B{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,s,n){t==="open"&&s!==n&&this.isOpen.set(n!==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(),s=this.getAttribute("title")||"",n=this.getAttribute("size")||"md";this.shadowRoot.innerHTML=`
+			<style>
+				${I}
+				
+				::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 ${n}" part="content" @click="${l=>l.stopPropagation()}">
+					${s?`
+						<div class="modal-header" part="header">
+							<h2 class="modal-title">${s}</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 d=this.shadowRoot.querySelector(".modal-backdrop"),o=this.shadowRoot.querySelector(".modal-close");d==null||d.addEventListener("click",l=>this.handleBackdropClick(l)),o==null||o.addEventListener("click",()=>this.close())}}customElements.define("ui-modal",z);class T extends B{async connectedCallback(){super.connectedCallback(),await Promise.all([customElements.whenDefined("ui-modal"),customElements.whenDefined("ui-button")]),await new Promise(e=>setTimeout(e,10)),this.setupEventListeners()}setupEventListeners(){const e=this.shadowRoot.getElementById("openBasicModal"),t=this.shadowRoot.getElementById("basicModal"),s=this.shadowRoot.getElementById("basicModalClose"),n=this.shadowRoot.getElementById("basicModalOk");e==null||e.addEventListener("click",()=>t==null?void 0:t.open()),s==null||s.addEventListener("click",()=>t==null?void 0:t.close()),n==null||n.addEventListener("click",()=>t==null?void 0:t.close());const d=this.shadowRoot.getElementById("openSmallModal"),o=this.shadowRoot.getElementById("smallModal"),l=this.shadowRoot.getElementById("smallModalClose");d==null||d.addEventListener("click",()=>o==null?void 0:o.open()),l==null||l.addEventListener("click",()=>o==null?void 0:o.close());const h=this.shadowRoot.getElementById("openLargeModal"),r=this.shadowRoot.getElementById("largeModal"),v=this.shadowRoot.getElementById("largeModalClose");h==null||h.addEventListener("click",()=>r==null?void 0:r.open()),v==null||v.addEventListener("click",()=>r==null?void 0:r.close());const b=this.shadowRoot.getElementById("openNoEscapeModal"),c=this.shadowRoot.getElementById("noEscapeModal"),y=this.shadowRoot.getElementById("noEscapeClose");b==null||b.addEventListener("click",()=>c==null?void 0:c.open()),y==null||y.addEventListener("click",()=>c==null?void 0:c.close());const g=this.shadowRoot.getElementById("openNoBackdropModal"),m=this.shadowRoot.getElementById("noBackdropModal"),E=this.shadowRoot.getElementById("noBackdropClose");g==null||g.addEventListener("click",()=>m==null?void 0:m.open()),E==null||E.addEventListener("click",()=>m==null?void 0:m.close());const k=this.shadowRoot.getElementById("openConfirmModal"),i=this.shadowRoot.getElementById("confirmModal"),f=this.shadowRoot.getElementById("confirmCancel"),w=this.shadowRoot.getElementById("confirmDelete"),p=this.shadowRoot.getElementById("confirmResult"),u=this.shadowRoot.getElementById("confirmText");k==null||k.addEventListener("click",()=>i==null?void 0:i.open()),f==null||f.addEventListener("click",()=>{i==null||i.close(),p&&u&&(p.style.display="block",u.textContent="Cancelled",u.style.color="#64748b")}),w==null||w.addEventListener("click",()=>{i==null||i.close(),p&&u&&(p.style.display="block",u.textContent="Item deleted!",u.style.color="#ef4444")})}render(){this.shadowRoot.innerHTML=`
+			<style>${M}</style>
+			${x}
+		`}}customElements.define("modal-demo-page",T);

package/dist/assets/select-demo-page-Dg5ajGaj.js

@@ -0,0 +1,186 @@
+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-D81L3er1.js";import"./index-DJpTIOwN.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);