@cubit-ui/core 1.0.1 → 1.1.0

package/dist/index.cjs

@@ -1,4 +1,4 @@
-"use strict";var G=Object.defineProperty;var J=(a,t,e)=>t in a?G(a,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):a[t]=e;var c=(a,t,e)=>J(a,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class n extends HTMLElement{constructor(){super();c(this,"root");c(this,"lifecycleAbort",null);this.root=this.attachShadow({mode:"open"})}connectedCallback(){var e;(e=this.lifecycleAbort)==null||e.abort(),this.lifecycleAbort=new AbortController,this.render()}disconnectedCallback(){var e;(e=this.lifecycleAbort)==null||e.abort(),this.lifecycleAbort=null}listen(e,r){var i;this.addEventListener(e,r,{signal:(i=this.lifecycleAbort)==null?void 0:i.signal})}escapeHtml(e){return String(e??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}safeUrl(e){const r=e.trim(),i=r.replace(/[\u0000-\u0020]/g,"").match(/^([a-z][a-z0-9+.-]*):/i);return i&&!["http","https","mailto","tel"].includes((i[1]??"").toLowerCase())?"":this.escapeHtml(r)}attributeChangedCallback(e,r,i){r!==i&&this.render()}composedTarget(e){const r=e.composedPath();for(const i of r)if(i instanceof HTMLElement)return i;return e.target}emit(e,r){const i=new CustomEvent(e,{bubbles:!0,cancelable:!0,composed:!0,detail:r});return this.dispatchEvent(i)}getBooleanAttr(e){return this.hasAttribute(e)}setBooleanAttr(e,r){r?this.setAttribute(e,""):this.removeAttribute(e)}}const m=class m{constructor(t){c(this,"element");c(this,"firstFocusableEl",null);c(this,"lastFocusableEl",null);c(this,"handleKeyDownBound");c(this,"active",!1);this.element=t,this.handleKeyDownBound=this.handleKeyDown.bind(this)}activate(){this.updateFocusableElements(),this.firstFocusableEl&&this.firstFocusableEl.focus(),document.addEventListener("keydown",this.handleKeyDownBound),this.active=!0}deactivate(){this.active&&(document.removeEventListener("keydown",this.handleKeyDownBound),this.active=!1)}updateFocusableElements(){const t=Array.from(this.element.querySelectorAll(m.FOCUSABLE_SELECTORS)).filter(e=>e.offsetParent!==null||e.offsetWidth>0||e.offsetHeight>0);this.firstFocusableEl=t[0]||null,this.lastFocusableEl=t[t.length-1]||null}handleKeyDown(t){if(t.key==="Tab"){if(this.updateFocusableElements(),!this.firstFocusableEl||!this.lastFocusableEl){t.preventDefault();return}t.shiftKey?(document.activeElement===this.firstFocusableEl||this.element===document.activeElement)&&(this.lastFocusableEl.focus(),t.preventDefault()):document.activeElement===this.lastFocusableEl&&(this.firstFocusableEl.focus(),t.preventDefault())}}};c(m,"FOCUSABLE_SELECTORS",["a[href]","button:not([disabled])","textarea:not([disabled])","input:not([disabled])","select:not([disabled])",'[tabindex]:not([tabindex="-1"])',"ui-button:not([disabled])","ui-input:not([disabled])"].join(","));let g=m;class k extends n{static get observedAttributes(){return["variant","size","disabled","type","aria-label"]}get variant(){return this.getAttribute("variant")||"primary"}get size(){return this.getAttribute("size")||"md"}get disabled(){return this.getBooleanAttr("disabled")}set disabled(t){this.setBooleanAttr("disabled",t)}get type(){return this.getAttribute("type")||"button"}render(){const t=this.variant,e=this.size,r=this.disabled,i=this.getAttribute("aria-label")||"";this.root.innerHTML=`
+"use strict";var at=Object.defineProperty;var nt=(a,e,t)=>e in a?at(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var c=(a,e,t)=>nt(a,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class l extends HTMLElement{constructor(){super();c(this,"root");c(this,"internals",null);c(this,"formDisabled",!1);c(this,"lifecycleAbort",null);if(this.root=this.attachShadow({mode:"open"}),this.constructor.formAssociated&&typeof this.attachInternals=="function")try{this.internals=this.attachInternals()}catch{this.internals=null}}setFormValue(t){var r;(r=this.internals)==null||r.setFormValue(t)}formDisabledCallback(t){this.formDisabled=t,this.render()}connectedCallback(){var t;(t=this.lifecycleAbort)==null||t.abort(),this.lifecycleAbort=new AbortController,this.render()}disconnectedCallback(){var t;(t=this.lifecycleAbort)==null||t.abort(),this.lifecycleAbort=null}listen(t,r){var i;this.addEventListener(t,r,{signal:(i=this.lifecycleAbort)==null?void 0:i.signal})}escapeHtml(t){return String(t??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}safeUrl(t){const r=t.trim(),i=r.replace(/[\u0000-\u0020]/g,"").match(/^([a-z][a-z0-9+.-]*):/i);return i&&!["http","https","mailto","tel"].includes((i[1]??"").toLowerCase())?"":this.escapeHtml(r)}attributeChangedCallback(t,r,i){r!==i&&this.render()}composedTarget(t){const r=t.composedPath();for(const i of r)if(i instanceof HTMLElement)return i;return t.target}emit(t,r){const i=new CustomEvent(t,{bubbles:!0,cancelable:!0,composed:!0,detail:r});return this.dispatchEvent(i)}getBooleanAttr(t){return this.hasAttribute(t)}setBooleanAttr(t,r){r?this.setAttribute(t,""):this.removeAttribute(t)}}c(l,"formAssociated",!1);const y=class y{constructor(e){c(this,"element");c(this,"firstFocusableEl",null);c(this,"lastFocusableEl",null);c(this,"handleKeyDownBound");c(this,"active",!1);this.element=e,this.handleKeyDownBound=this.handleKeyDown.bind(this)}activate(){this.updateFocusableElements(),this.firstFocusableEl&&this.firstFocusableEl.focus(),document.addEventListener("keydown",this.handleKeyDownBound),this.active=!0}deactivate(){this.active&&(document.removeEventListener("keydown",this.handleKeyDownBound),this.active=!1)}updateFocusableElements(){const e=Array.from(this.element.querySelectorAll(y.FOCUSABLE_SELECTORS)).filter(t=>t.offsetParent!==null||t.offsetWidth>0||t.offsetHeight>0);this.firstFocusableEl=e[0]||null,this.lastFocusableEl=e[e.length-1]||null}handleKeyDown(e){if(e.key==="Tab"){if(this.updateFocusableElements(),!this.firstFocusableEl||!this.lastFocusableEl){e.preventDefault();return}e.shiftKey?(document.activeElement===this.firstFocusableEl||this.element===document.activeElement)&&(this.lastFocusableEl.focus(),e.preventDefault()):document.activeElement===this.lastFocusableEl&&(this.firstFocusableEl.focus(),e.preventDefault())}}};c(y,"FOCUSABLE_SELECTORS",["a[href]","button:not([disabled])","textarea:not([disabled])","input:not([disabled])","select:not([disabled])",'[tabindex]:not([tabindex="-1"])',"ui-button:not([disabled])","ui-input:not([disabled])"].join(","));let g=y;class S extends l{static get observedAttributes(){return["variant","size","disabled","type","aria-label"]}get variant(){return this.getAttribute("variant")||"primary"}get size(){return this.getAttribute("size")||"md"}get disabled(){return this.getBooleanAttr("disabled")}set disabled(e){this.setBooleanAttr("disabled",e)}get type(){return this.getAttribute("type")||"button"}render(){const e=this.variant,t=this.size,r=this.disabled,i=this.getAttribute("aria-label")||"";this.root.innerHTML=`
       <style>
         :host {
           display: inline-block;
@@ -100,7 +100,7 @@
         }
       </style>
       <button
-        class="${t} ${e}"
+        class="${e} ${t}"
         type="${this.type}"
         ${r?"disabled":""}
         ${r?'aria-disabled="true"':""}
@@ -108,7 +108,7 @@
       >
         <slot></slot>
       </button>
-    `;const s=this.root.querySelector("button");s&&(s.onclick=o=>{if(this.disabled){o.preventDefault(),o.stopImmediatePropagation();return}if(this.type==="submit"){const l=this.closest("form");l&&l.requestSubmit()}else if(this.type==="reset"){const l=this.closest("form");l&&l.reset()}})}}customElements.get("ui-button")||customElements.define("ui-button",k);class w extends n{static get observedAttributes(){return["value","placeholder","type","disabled","readonly","size","invalid","aria-label"]}get value(){const t=this.root.querySelector("input");return t?t.value:this.getAttribute("value")||""}set value(t){this.setAttribute("value",t);const e=this.root.querySelector("input");e&&(e.value=t)}get disabled(){return this.getBooleanAttr("disabled")}set disabled(t){this.setBooleanAttr("disabled",t)}get invalid(){return this.getBooleanAttr("invalid")}set invalid(t){this.setBooleanAttr("invalid",t)}attributeChangedCallback(t,e,r){if(t==="value"&&e!==r){const i=this.root.querySelector("input");if(i){if(i.value!==r){const s=i.selectionStart??null,o=i.selectionEnd??null;if(i.value=r??"",s!==null&&o!==null&&r!==null&&s<=r.length)try{i.setSelectionRange(s,o)}catch{}}return}}super.attributeChangedCallback(t,e,r)}render(){const t=this.getAttribute("type")||"text",e=this.getAttribute("placeholder")||"",r=this.getAttribute("size")||"md",i=this.disabled,s=this.hasAttribute("readonly"),o=this.invalid,l=this.getAttribute("aria-label")||"",d=this.getAttribute("value")||"";this.root.innerHTML=`
+    `;const o=this.root.querySelector("button");o&&(o.onclick=s=>{if(this.disabled){s.preventDefault(),s.stopImmediatePropagation();return}if(this.type==="submit"){const n=this.closest("form");n&&n.requestSubmit()}else if(this.type==="reset"){const n=this.closest("form");n&&n.reset()}})}}customElements.get("ui-button")||customElements.define("ui-button",S);class A extends l{constructor(){super(...arguments);c(this,"defaultValue","")}static get observedAttributes(){return["value","placeholder","type","disabled","readonly","size","invalid","aria-label"]}get value(){const t=this.root.querySelector("input");return t?t.value:this.getAttribute("value")||""}set value(t){this.setAttribute("value",t);const r=this.root.querySelector("input");r&&(r.value=t)}get disabled(){return this.getBooleanAttr("disabled")||this.formDisabled}set disabled(t){this.setBooleanAttr("disabled",t)}get invalid(){return this.getBooleanAttr("invalid")}set invalid(t){this.setBooleanAttr("invalid",t)}attributeChangedCallback(t,r,i){if(t==="value"&&r!==i){this.setFormValue(i??"");const o=this.root.querySelector("input");if(o){if(o.value!==i){const s=o.selectionStart??null,n=o.selectionEnd??null;if(o.value=i??"",s!==null&&n!==null&&i!==null&&s<=i.length)try{o.setSelectionRange(s,n)}catch{}}return}}super.attributeChangedCallback(t,r,i)}connectedCallback(){this.defaultValue=this.getAttribute("value")||"",super.connectedCallback()}formResetCallback(){this.value=this.defaultValue}render(){const t=this.getAttribute("type")||"text",r=this.getAttribute("placeholder")||"",i=this.getAttribute("size")||"md",o=this.disabled,s=this.hasAttribute("readonly"),n=this.invalid,d=this.getAttribute("aria-label")||"",b=this.getAttribute("value")||"";this.setFormValue(b),this.root.innerHTML=`
       <style>
         :host {
           display: block;
@@ -176,19 +176,19 @@
           cursor: not-allowed;
         }
       </style>
-      <div class="wrapper ${this.escapeHtml(r)} ${i?"disabled":""} ${o?"invalid":""}">
+      <div class="wrapper ${this.escapeHtml(i)} ${o?"disabled":""} ${n?"invalid":""}">
         <input
           type="${this.escapeHtml(t)}"
-          placeholder="${this.escapeHtml(e)}"
-          value="${this.escapeHtml(d)}"
-          ${i?"disabled":""}
+          placeholder="${this.escapeHtml(r)}"
+          value="${this.escapeHtml(b)}"
+          ${o?"disabled":""}
           ${s?"readonly":""}
-          ${i?'aria-disabled="true"':""}
-          ${o?'aria-invalid="true"':'aria-invalid="false"'}
-          ${l?`aria-label="${this.escapeHtml(l)}"`:""}
+          ${o?'aria-disabled="true"':""}
+          ${n?'aria-invalid="true"':'aria-invalid="false"'}
+          ${d?`aria-label="${this.escapeHtml(d)}"`:""}
         />
       </div>
-    `;const u=this.root.querySelector("input"),h=this.root.querySelector(".wrapper");u&&h&&(u.onfocus=()=>h.classList.add("focused"),u.onblur=()=>h.classList.remove("focused"),u.oninput=b=>{const p=b.target.value;this.setAttribute("value",p),this.emit("input",{value:p})},u.onchange=b=>{const p=b.target.value;this.setAttribute("value",p),this.emit("change",{value:p})})}}customElements.get("ui-input")||customElements.define("ui-input",w);class A extends n{static get observedAttributes(){return["checked","disabled","indeterminate","name","value","aria-label"]}get checked(){return this.getBooleanAttr("checked")}set checked(t){this.setBooleanAttr("checked",t)}get indeterminate(){return this.getBooleanAttr("indeterminate")}set indeterminate(t){this.setBooleanAttr("indeterminate",t)}get disabled(){return this.getBooleanAttr("disabled")}set disabled(t){this.setBooleanAttr("disabled",t)}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex",this.disabled?"-1":"0"),this.setAttribute("role","checkbox"),this.listen("keydown",this.handleKeyDown.bind(this)),this.listen("click",this.handleClick.bind(this))}handleKeyDown(t){this.disabled||(t.key===" "||t.key==="Enter")&&(t.preventDefault(),this.toggle())}handleClick(t){if(this.disabled){t.preventDefault();return}this.toggle()}toggle(){this.disabled||(this.checked=!this.checked,this.indeterminate&&(this.indeterminate=!1),this.setAttribute("aria-checked",String(this.checked)),this.emit("change",{checked:this.checked}))}render(){const t=this.checked,e=this.indeterminate,r=this.disabled;this.setAttribute("aria-checked",e?"mixed":String(t)),this.setAttribute("aria-disabled",String(r)),this.setAttribute("tabindex",r?"-1":"0"),this.root.innerHTML=`
+    `;const h=this.root.querySelector("input"),p=this.root.querySelector(".wrapper");h&&p&&(h.onfocus=()=>p.classList.add("focused"),h.onblur=()=>p.classList.remove("focused"),h.oninput=f=>{const u=f.target.value;this.setAttribute("value",u),this.emit("input",{value:u})},h.onchange=f=>{const u=f.target.value;this.setAttribute("value",u),this.emit("change",{value:u})})}}c(A,"formAssociated",!0);customElements.get("ui-input")||customElements.define("ui-input",A);class z extends l{constructor(){super(...arguments);c(this,"defaultChecked",!1)}static get observedAttributes(){return["checked","disabled","indeterminate","name","value","aria-label"]}get checked(){return this.getBooleanAttr("checked")}set checked(t){this.setBooleanAttr("checked",t)}get indeterminate(){return this.getBooleanAttr("indeterminate")}set indeterminate(t){this.setBooleanAttr("indeterminate",t)}get disabled(){return this.getBooleanAttr("disabled")||this.formDisabled}set disabled(t){this.setBooleanAttr("disabled",t)}connectedCallback(){this.defaultChecked=this.checked,super.connectedCallback(),this.setAttribute("tabindex",this.disabled?"-1":"0"),this.setAttribute("role","checkbox"),this.listen("keydown",this.handleKeyDown.bind(this)),this.listen("click",this.handleClick.bind(this))}handleKeyDown(t){this.disabled||(t.key===" "||t.key==="Enter")&&(t.preventDefault(),this.toggle())}handleClick(t){if(this.disabled){t.preventDefault();return}this.toggle()}formResetCallback(){this.checked=this.defaultChecked}toggle(){this.disabled||(this.checked=!this.checked,this.indeterminate&&(this.indeterminate=!1),this.setAttribute("aria-checked",String(this.checked)),this.emit("change",{checked:this.checked}))}render(){const t=this.checked,r=this.indeterminate,i=this.disabled;this.setFormValue(t?this.getAttribute("value")??"on":null),this.setAttribute("aria-checked",r?"mixed":String(t)),this.setAttribute("aria-disabled",String(i)),this.setAttribute("tabindex",i?"-1":"0"),this.root.innerHTML=`
       <style>
         :host {
           display: inline-flex;
@@ -241,7 +241,7 @@
           line-height: var(--ui-line-height-normal, 1.5);
         }
       </style>
-      <div class="box ${t?"checked":""} ${e?"indeterminate":""}">
+      <div class="box ${t?"checked":""} ${r?"indeterminate":""}">
         <svg class="icon icon-check" viewBox="0 0 16 16">
           <path d="M13.5 3.5L6.5 11.5L2.5 7.5" stroke="white" stroke-width="2" stroke-linecap="square" fill="none" />
         </svg>
@@ -250,7 +250,7 @@
         </svg>
       </div>
       <span class="label"><slot></slot></span>
-    `}}customElements.get("ui-checkbox")||customElements.define("ui-checkbox",A);class x extends n{static get observedAttributes(){return["checked","disabled","name","value"]}get checked(){return this.getBooleanAttr("checked")}set checked(t){this.setBooleanAttr("checked",t)}get disabled(){return this.getBooleanAttr("disabled")}set disabled(t){this.setBooleanAttr("disabled",t)}get name(){return this.getAttribute("name")||""}get value(){return this.getAttribute("value")||""}connectedCallback(){super.connectedCallback(),this.setAttribute("role","radio"),this.setAttribute("tabindex",this.checked?"0":"-1"),this.listen("click",this.handleClick.bind(this)),this.listen("keydown",this.handleKeyDown.bind(this))}handleClick(t){if(this.disabled){t.preventDefault();return}this.select()}handleKeyDown(t){this.disabled||(t.key===" "||t.key==="Enter")&&(t.preventDefault(),this.select())}select(){if(this.disabled||this.checked)return;const t=this.name;t&&this.getRootNode().querySelectorAll(`ui-radio[name="${CSS.escape(t)}"]`).forEach(i=>{i!==this&&i instanceof x&&(i.checked=!1,i.setAttribute("tabindex","-1"))}),this.checked=!0,this.setAttribute("tabindex","0"),this.setAttribute("aria-checked","true"),this.emit("change",{value:this.value,checked:!0})}render(){const t=this.checked,e=this.disabled;this.setAttribute("aria-checked",String(t)),this.setAttribute("aria-disabled",String(e)),this.root.innerHTML=`
+    `}}c(z,"formAssociated",!0);customElements.get("ui-checkbox")||customElements.define("ui-checkbox",z);const k=class k extends l{constructor(){super(...arguments);c(this,"defaultChecked",!1)}static get observedAttributes(){return["checked","disabled","name","value"]}get checked(){return this.getBooleanAttr("checked")}set checked(t){this.setBooleanAttr("checked",t)}get disabled(){return this.getBooleanAttr("disabled")||this.formDisabled}set disabled(t){this.setBooleanAttr("disabled",t)}get name(){return this.getAttribute("name")||""}get value(){return this.getAttribute("value")||""}connectedCallback(){this.defaultChecked=this.checked,super.connectedCallback(),this.setAttribute("role","radio"),this.setAttribute("tabindex",this.checked?"0":"-1"),this.listen("click",this.handleClick.bind(this)),this.listen("keydown",this.handleKeyDown.bind(this))}handleClick(t){if(this.disabled){t.preventDefault();return}this.select()}handleKeyDown(t){this.disabled||(t.key===" "||t.key==="Enter")&&(t.preventDefault(),this.select())}formResetCallback(){this.checked=this.defaultChecked}select(){if(this.disabled||this.checked)return;const t=this.name;t&&this.getRootNode().querySelectorAll(`ui-radio[name="${CSS.escape(t)}"]`).forEach(o=>{o!==this&&o instanceof k&&(o.checked=!1,o.setAttribute("tabindex","-1"))}),this.checked=!0,this.setAttribute("tabindex","0"),this.setAttribute("aria-checked","true"),this.emit("change",{value:this.value,checked:!0})}render(){const t=this.checked,r=this.disabled;this.setFormValue(t?this.getAttribute("value")??"on":null),this.setAttribute("aria-checked",String(t)),this.setAttribute("aria-disabled",String(r)),this.root.innerHTML=`
       <style>
         :host {
           display: inline-flex;
@@ -304,7 +304,7 @@
         <div class="inner"></div>
       </div>
       <span class="label"><slot></slot></span>
-    `}}customElements.get("ui-radio")||customElements.define("ui-radio",x);class z extends n{static get observedAttributes(){return["checked","disabled","aria-label"]}get checked(){return this.getBooleanAttr("checked")}set checked(t){this.setBooleanAttr("checked",t)}get disabled(){return this.getBooleanAttr("disabled")}set disabled(t){this.setBooleanAttr("disabled",t)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","switch"),this.setAttribute("tabindex",this.disabled?"-1":"0"),this.listen("click",this.handleClick.bind(this)),this.listen("keydown",this.handleKeyDown.bind(this))}handleClick(t){if(this.disabled){t.preventDefault();return}this.toggle()}handleKeyDown(t){this.disabled||(t.key===" "||t.key==="Enter")&&(t.preventDefault(),this.toggle())}toggle(){this.disabled||(this.checked=!this.checked,this.setAttribute("aria-checked",String(this.checked)),this.emit("change",{checked:this.checked}))}render(){const t=this.checked,e=this.disabled;this.setAttribute("aria-checked",String(t)),this.setAttribute("aria-disabled",String(e)),this.setAttribute("tabindex",e?"-1":"0"),this.root.innerHTML=`
+    `}};c(k,"formAssociated",!0);let m=k;customElements.get("ui-radio")||customElements.define("ui-radio",m);class C extends l{constructor(){super(...arguments);c(this,"defaultChecked",!1)}static get observedAttributes(){return["checked","disabled","aria-label","value"]}get checked(){return this.getBooleanAttr("checked")}set checked(t){this.setBooleanAttr("checked",t)}get disabled(){return this.getBooleanAttr("disabled")||this.formDisabled}set disabled(t){this.setBooleanAttr("disabled",t)}connectedCallback(){this.defaultChecked=this.checked,super.connectedCallback(),this.setAttribute("role","switch"),this.setAttribute("tabindex",this.disabled?"-1":"0"),this.listen("click",this.handleClick.bind(this)),this.listen("keydown",this.handleKeyDown.bind(this))}handleClick(t){if(this.disabled){t.preventDefault();return}this.toggle()}handleKeyDown(t){this.disabled||(t.key===" "||t.key==="Enter")&&(t.preventDefault(),this.toggle())}formResetCallback(){this.checked=this.defaultChecked}toggle(){this.disabled||(this.checked=!this.checked,this.setAttribute("aria-checked",String(this.checked)),this.emit("change",{checked:this.checked}))}render(){const t=this.checked,r=this.disabled;this.setFormValue(t?this.getAttribute("value")??"on":null),this.setAttribute("aria-checked",String(t)),this.setAttribute("aria-disabled",String(r)),this.setAttribute("tabindex",r?"-1":"0"),this.root.innerHTML=`
       <style>
         :host {
           display: inline-flex;
@@ -362,7 +362,7 @@
         <div class="thumb"></div>
       </div>
       <span class="label"><slot></slot></span>
-    `}}customElements.get("ui-switch")||customElements.define("ui-switch",z);class E extends n{constructor(){super();c(this,"_isOpen",!1);c(this,"_selectedValue","");c(this,"_selectedLabel","");c(this,"handleDocumentClickBound");this.handleDocumentClickBound=this.handleDocumentClick.bind(this)}static get observedAttributes(){return["value","placeholder","disabled","size","open","aria-label"]}get value(){return this._selectedValue||this.getAttribute("value")||""}set value(e){this._selectedValue=e,this.setAttribute("value",e),this.updateSelectedLabel(),this.render()}get disabled(){return this.getBooleanAttr("disabled")}set disabled(e){this.setBooleanAttr("disabled",e)}connectedCallback(){super.connectedCallback(),this._selectedValue=this.getAttribute("value")||"",this.updateSelectedLabel(),document.addEventListener("click",this.handleDocumentClickBound),this.listen("keydown",this.handleKeyDown.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClickBound)}handleDocumentClick(e){!this.contains(e.target)&&!this.root.contains(e.target)&&this.close()}handleKeyDown(e){this.disabled||(e.key===" "||e.key==="Enter"?(e.preventDefault(),this.toggle()):e.key==="Escape"&&this._isOpen&&(e.preventDefault(),this.close()))}toggle(){this.disabled||(this._isOpen?this.close():this.open())}open(){this.disabled||this._isOpen||(this._isOpen=!0,this.render(),this.emit("open"))}close(){this._isOpen&&(this._isOpen=!1,this.render(),this.emit("close"))}updateSelectedLabel(){const r=Array.from(this.querySelectorAll("ui-option")).find(i=>i.getAttribute("value")===this._selectedValue);r?this._selectedLabel=r.textContent||"":this._selectedLabel=""}render(){const e=this.disabled,r=this.getAttribute("placeholder")||"선택하세요",i=this._selectedLabel||r,s=this._isOpen,o=this.getAttribute("size")||"md";this.root.innerHTML=`
+    `}}c(C,"formAssociated",!0);customElements.get("ui-switch")||customElements.define("ui-switch",C);class L extends l{constructor(){super();c(this,"_isOpen",!1);c(this,"_selectedValue","");c(this,"_selectedLabel","");c(this,"handleDocumentClickBound");this.handleDocumentClickBound=this.handleDocumentClick.bind(this)}static get observedAttributes(){return["value","placeholder","disabled","size","open","aria-label"]}get value(){return this._selectedValue||this.getAttribute("value")||""}set value(t){this._selectedValue=t,this.setAttribute("value",t),this.updateSelectedLabel(),this.render()}get disabled(){return this.getBooleanAttr("disabled")}set disabled(t){this.setBooleanAttr("disabled",t)}connectedCallback(){super.connectedCallback(),this._selectedValue=this.getAttribute("value")||"",this.updateSelectedLabel(),document.addEventListener("click",this.handleDocumentClickBound),this.listen("keydown",this.handleKeyDown.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClickBound)}handleDocumentClick(t){!this.contains(t.target)&&!this.root.contains(t.target)&&this.close()}handleKeyDown(t){this.disabled||(t.key===" "||t.key==="Enter"?(t.preventDefault(),this.toggle()):t.key==="Escape"&&this._isOpen&&(t.preventDefault(),this.close()))}toggle(){this.disabled||(this._isOpen?this.close():this.open())}open(){this.disabled||this._isOpen||(this._isOpen=!0,this.render(),this.emit("open"))}close(){this._isOpen&&(this._isOpen=!1,this.render(),this.emit("close"))}updateSelectedLabel(){const r=Array.from(this.querySelectorAll("ui-option")).find(i=>i.getAttribute("value")===this._selectedValue);r?this._selectedLabel=r.textContent||"":this._selectedLabel=""}render(){const t=this.disabled,r=this.getAttribute("placeholder")||"선택하세요",i=this._selectedLabel||r,o=this._isOpen,s=this.getAttribute("size")||"md";this.root.innerHTML=`
       <style>
         :host {
           display: inline-block;
@@ -420,7 +420,7 @@
           border-radius: var(--ui-radius-sm, 1px);
           box-shadow: 0 4px 12px rgba(0,0,0,0.1);
           z-index: 1000;
-          display: ${s?"block":"none"};
+          display: ${o?"block":"none"};
           max-height: 200px;
           overflow-y: auto;
         }
@@ -435,10 +435,10 @@
         }
       </style>
       <div
-        class="trigger ${o} ${s?"open":""} ${e?"disabled":""}"
-        tabindex="${e?"-1":"0"}"
+        class="trigger ${s} ${o?"open":""} ${t?"disabled":""}"
+        tabindex="${t?"-1":"0"}"
         role="combobox"
-        aria-expanded="${s}"
+        aria-expanded="${o}"
         aria-haspopup="listbox"
       >
         <span>${this.escapeHtml(i)}</span>
@@ -449,10 +449,10 @@
       <div class="menu" role="listbox">
         <slot></slot>
       </div>
-    `;const l=this.root.querySelector(".trigger");l&&l.addEventListener("click",()=>this.toggle());const d=this.root.querySelector("slot");d&&d.addEventListener("click",u=>{const h=this.composedTarget(u).closest("ui-option");if(h){const b=h.getAttribute("value")||"";this.value=b,this.close(),this.emit("change",{value:b})}})}}class C extends HTMLElement{connectedCallback(){this.setAttribute("role","option")}}customElements.get("ui-select")||customElements.define("ui-select",E);customElements.get("ui-option")||customElements.define("ui-option",C);class $ extends n{constructor(){super();c(this,"focusTrap",null);c(this,"handleKeyDownBound");this.handleKeyDownBound=this.handleKeyDown.bind(this)}static get observedAttributes(){return["open","title","aria-label"]}get open(){return this.getBooleanAttr("open")}set open(e){this.setBooleanAttr("open",e)}get title(){return this.getAttribute("title")||""}set title(e){this.setAttribute("title",e)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDownBound),this.open&&this.setupFocusTrap()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDownBound),this.focusTrap&&this.focusTrap.deactivate()}attributeChangedCallback(e,r,i){super.attributeChangedCallback(e,r,i),e==="open"&&(this.open?this.setupFocusTrap():this.focusTrap&&this.focusTrap.deactivate())}setupFocusTrap(){setTimeout(()=>{this.focusTrap||(this.focusTrap=new g(this.root)),this.focusTrap.activate()},0)}handleKeyDown(e){this.open&&e.key==="Escape"&&(e.preventDefault(),this.close())}close(){this.open=!1,this.emit("close")}render(){const e=this.open,r=this.title,i=this.getAttribute("aria-label")||r||"Dialog";this.root.innerHTML=`
+    `;const n=this.root.querySelector(".trigger");n&&n.addEventListener("click",()=>this.toggle());const d=this.root.querySelector("slot");d&&d.addEventListener("click",b=>{const h=this.composedTarget(b).closest("ui-option");if(h){const p=h.getAttribute("value")||"";this.value=p,this.close(),this.emit("change",{value:p})}})}}class I extends HTMLElement{connectedCallback(){this.setAttribute("role","option")}}customElements.get("ui-select")||customElements.define("ui-select",L);customElements.get("ui-option")||customElements.define("ui-option",I);class T extends l{constructor(){super();c(this,"focusTrap",null);c(this,"handleKeyDownBound");this.handleKeyDownBound=this.handleKeyDown.bind(this)}static get observedAttributes(){return["open","title","aria-label"]}get open(){return this.getBooleanAttr("open")}set open(t){this.setBooleanAttr("open",t)}get title(){return this.getAttribute("title")||""}set title(t){this.setAttribute("title",t)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDownBound),this.open&&this.setupFocusTrap()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDownBound),this.focusTrap&&this.focusTrap.deactivate()}attributeChangedCallback(t,r,i){super.attributeChangedCallback(t,r,i),t==="open"&&(this.open?this.setupFocusTrap():this.focusTrap&&this.focusTrap.deactivate())}setupFocusTrap(){setTimeout(()=>{this.focusTrap||(this.focusTrap=new g(this.root)),this.focusTrap.activate()},0)}handleKeyDown(t){this.open&&t.key==="Escape"&&(t.preventDefault(),this.close())}close(){this.open=!1,this.emit("close")}render(){const t=this.open,r=this.title,i=this.getAttribute("aria-label")||r||"Dialog";this.root.innerHTML=`
       <style>
         :host {
-          display: ${e?"block":"none"};
+          display: ${t?"block":"none"};
           font-family: var(--ui-font-family-base, sans-serif);
         }
         .backdrop {
@@ -557,7 +557,7 @@
           </div>
         </div>
       </div>
-    `;const s=this.root.querySelector("#backdrop"),o=this.root.querySelector("#closeBtn");s&&s.addEventListener("click",l=>{l.target===s&&this.close()}),o&&o.addEventListener("click",()=>{this.close()})}}customElements.get("ui-modal")||customElements.define("ui-modal",$);class S extends n{constructor(){super(...arguments);c(this,"timer",null)}static get observedAttributes(){return["variant","duration","open"]}get variant(){return this.getAttribute("variant")||"info"}get open(){return this.getBooleanAttr("open")}set open(e){this.setBooleanAttr("open",e)}get duration(){return parseInt(this.getAttribute("duration")||"4000",10)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.open&&this.startTimer()}disconnectedCallback(){super.disconnectedCallback(),this.clearTimer()}attributeChangedCallback(e,r,i){super.attributeChangedCallback(e,r,i),e==="open"&&(this.open?this.startTimer():this.clearTimer())}startTimer(){this.clearTimer(),this.duration>0&&(this.timer=window.setTimeout(()=>{this.close()},this.duration))}clearTimer(){this.timer&&(clearTimeout(this.timer),this.timer=null)}close(){this.open=!1,this.clearTimer(),this.emit("close")}render(){const e=this.variant,r=this.open;this.root.innerHTML=`
+    `;const o=this.root.querySelector("#backdrop"),s=this.root.querySelector("#closeBtn");o&&o.addEventListener("click",n=>{n.target===o&&this.close()}),s&&s.addEventListener("click",()=>{this.close()})}}customElements.get("ui-modal")||customElements.define("ui-modal",T);class B extends l{constructor(){super(...arguments);c(this,"timer",null)}static get observedAttributes(){return["variant","duration","open"]}get variant(){return this.getAttribute("variant")||"info"}get open(){return this.getBooleanAttr("open")}set open(t){this.setBooleanAttr("open",t)}get duration(){return parseInt(this.getAttribute("duration")||"4000",10)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.open&&this.startTimer()}disconnectedCallback(){super.disconnectedCallback(),this.clearTimer()}attributeChangedCallback(t,r,i){super.attributeChangedCallback(t,r,i),t==="open"&&(this.open?this.startTimer():this.clearTimer())}startTimer(){this.clearTimer(),this.duration>0&&(this.timer=window.setTimeout(()=>{this.close()},this.duration))}clearTimer(){this.timer&&(clearTimeout(this.timer),this.timer=null)}close(){this.open=!1,this.clearTimer(),this.emit("close")}render(){const t=this.variant,r=this.open;this.root.innerHTML=`
       <style>
         :host {
           display: ${r?"block":"none"};
@@ -620,7 +620,7 @@
           stroke-width: 2;
         }
       </style>
-      <div class="toast ${e}">
+      <div class="toast ${t}">
         <div class="content"><slot></slot></div>
         <button class="close-btn" aria-label="Close toast" id="closeBtn">
           <svg class="close-icon" viewBox="0 0 16 16">
@@ -628,7 +628,7 @@
           </svg>
         </button>
       </div>
-    `;const i=this.root.querySelector("#closeBtn");i&&i.addEventListener("click",()=>this.close())}}customElements.get("ui-toast")||customElements.define("ui-toast",S);class L extends n{static get observedAttributes(){return["content","position"]}get content(){return this.getAttribute("content")||""}set content(t){this.setAttribute("content",t)}get position(){return this.getAttribute("position")||"top"}set position(t){this.setAttribute("position",t)}connectedCallback(){super.connectedCallback(),this.listen("mouseenter",this.show.bind(this)),this.listen("mouseleave",this.hide.bind(this)),this.listen("focusin",this.show.bind(this)),this.listen("focusout",this.hide.bind(this)),this.listen("keydown",t=>{t.key==="Escape"&&this.hide()})}show(){const t=this.root.querySelector(".tooltip");t&&t.classList.add("visible")}hide(){const t=this.root.querySelector(".tooltip");t&&t.classList.remove("visible")}render(){const t=this.content,e=this.position;this.root.innerHTML=`
+    `;const i=this.root.querySelector("#closeBtn");i&&i.addEventListener("click",()=>this.close())}}customElements.get("ui-toast")||customElements.define("ui-toast",B);class D extends l{static get observedAttributes(){return["content","position"]}get content(){return this.getAttribute("content")||""}set content(e){this.setAttribute("content",e)}get position(){return this.getAttribute("position")||"top"}set position(e){this.setAttribute("position",e)}connectedCallback(){super.connectedCallback(),this.listen("mouseenter",this.show.bind(this)),this.listen("mouseleave",this.hide.bind(this)),this.listen("focusin",this.show.bind(this)),this.listen("focusout",this.hide.bind(this)),this.listen("keydown",e=>{e.key==="Escape"&&this.hide()})}show(){const e=this.root.querySelector(".tooltip");e&&e.classList.add("visible")}hide(){const e=this.root.querySelector(".tooltip");e&&e.classList.remove("visible")}render(){const e=this.content,t=this.position;this.root.innerHTML=`
       <style>
         :host {
           display: inline-block;
@@ -678,10 +678,10 @@
         }
       </style>
       <slot></slot>
-      <div class="tooltip ${e}" role="tooltip" aria-hidden="true">
-        ${t}
+      <div class="tooltip ${t}" role="tooltip" aria-hidden="true">
+        ${e}
       </div>
-    `}}customElements.get("ui-tooltip")||customElements.define("ui-tooltip",L);class T extends n{static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t),this.syncTabsAndPanels()}connectedCallback(){super.connectedCallback(),this.listen("click",this.handleClick.bind(this)),this.listen("keydown",this.handleKeyDown.bind(this)),setTimeout(()=>this.syncTabsAndPanels(),0)}handleClick(t){const e=t.target.closest("ui-tab");if(e&&!e.hasAttribute("disabled")){const r=e.getAttribute("value")||"";this.value=r,this.emit("change",{value:r})}}handleKeyDown(t){const e=Array.from(this.querySelectorAll("ui-tab:not([disabled])"));if(!e.length)return;const r=e.findIndex(s=>s.getAttribute("value")===this.value);let i=r;if(t.key==="ArrowRight"||t.key==="ArrowDown"?(t.preventDefault(),i=(r+1)%e.length):t.key==="ArrowLeft"||t.key==="ArrowUp"?(t.preventDefault(),i=(r-1+e.length)%e.length):t.key==="Home"?(t.preventDefault(),i=0):t.key==="End"&&(t.preventDefault(),i=e.length-1),i!==r&&e[i]){const s=e[i],o=s.getAttribute("value")||"";this.value=o,s.focus(),this.emit("change",{value:o})}}syncTabsAndPanels(){const t=this.value,e=Array.from(this.querySelectorAll("ui-tab")),r=Array.from(this.querySelectorAll("ui-tab-panel"));e.forEach(i=>{const s=i.getAttribute("value")===t;i.setAttribute("aria-selected",String(s)),i.setAttribute("tabindex",s?"0":"-1")}),r.forEach(i=>{i.getAttribute("value")===t?(i.removeAttribute("hidden"),i.setAttribute("tabindex","0")):i.setAttribute("hidden","")})}render(){this.root.innerHTML=`
+    `}}customElements.get("ui-tooltip")||customElements.define("ui-tooltip",D);class H extends l{static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")||""}set value(e){this.setAttribute("value",e),this.syncTabsAndPanels()}connectedCallback(){super.connectedCallback(),this.listen("click",this.handleClick.bind(this)),this.listen("keydown",this.handleKeyDown.bind(this)),setTimeout(()=>this.syncTabsAndPanels(),0)}handleClick(e){const t=e.target.closest("ui-tab");if(t&&!t.hasAttribute("disabled")){const r=t.getAttribute("value")||"";this.value=r,this.emit("change",{value:r})}}handleKeyDown(e){const t=Array.from(this.querySelectorAll("ui-tab:not([disabled])"));if(!t.length)return;const r=t.findIndex(o=>o.getAttribute("value")===this.value);let i=r;if(e.key==="ArrowRight"||e.key==="ArrowDown"?(e.preventDefault(),i=(r+1)%t.length):e.key==="ArrowLeft"||e.key==="ArrowUp"?(e.preventDefault(),i=(r-1+t.length)%t.length):e.key==="Home"?(e.preventDefault(),i=0):e.key==="End"&&(e.preventDefault(),i=t.length-1),i!==r&&t[i]){const o=t[i],s=o.getAttribute("value")||"";this.value=s,o.focus(),this.emit("change",{value:s})}}syncTabsAndPanels(){const e=this.value,t=Array.from(this.querySelectorAll("ui-tab")),r=Array.from(this.querySelectorAll("ui-tab-panel"));t.forEach(i=>{const o=i.getAttribute("value")===e;i.setAttribute("aria-selected",String(o)),i.setAttribute("tabindex",o?"0":"-1")}),r.forEach(i=>{i.getAttribute("value")===e?(i.removeAttribute("hidden"),i.setAttribute("tabindex","0")):i.setAttribute("hidden","")})}render(){this.root.innerHTML=`
       <style>
         :host {
           display: block;
@@ -702,7 +702,7 @@
       <div class="panels-wrapper">
         <slot></slot>
       </div>
-    `}}class I extends HTMLElement{connectedCallback(){this.setAttribute("role","tab"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.style.all="unset",this.style.display="inline-flex",this.style.alignItems="center",this.style.padding="8px 16px",this.style.cursor="pointer",this.style.fontSize="var(--ui-font-size-sm, 14px)",this.style.fontWeight="var(--ui-font-weight-medium, 500)",this.style.borderBottom="2px solid transparent",this.style.marginBottom="-1px",this.style.userSelect="none",this.render()}static get observedAttributes(){return["aria-selected","disabled"]}attributeChangedCallback(){this.render()}render(){const t=this.getAttribute("aria-selected")==="true",e=this.hasAttribute("disabled");this.style.color=t?"var(--ui-color-primary, #ff5500)":"var(--ui-color-text-secondary, #616161)",this.style.borderBottomColor=t?"var(--ui-color-primary, #ff5500)":"transparent",this.style.opacity=e?"0.5":"1",this.style.pointerEvents=e?"none":"auto"}}class B extends HTMLElement{connectedCallback(){this.setAttribute("role","tabpanel")}}customElements.get("ui-tabs")||customElements.define("ui-tabs",T);customElements.get("ui-tab")||customElements.define("ui-tab",I);customElements.get("ui-tab-panel")||customElements.define("ui-tab-panel",B);class D extends n{static get observedAttributes(){return["variant","size"]}get variant(){return this.getAttribute("variant")||"primary"}get size(){return this.getAttribute("size")||"md"}render(){const t=this.variant,e=this.size;this.root.innerHTML=`
+    `}}class U extends HTMLElement{connectedCallback(){this.setAttribute("role","tab"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.style.all="unset",this.style.display="inline-flex",this.style.alignItems="center",this.style.padding="8px 16px",this.style.cursor="pointer",this.style.fontSize="var(--ui-font-size-sm, 14px)",this.style.fontWeight="var(--ui-font-weight-medium, 500)",this.style.borderBottom="2px solid transparent",this.style.marginBottom="-1px",this.style.userSelect="none",this.render()}static get observedAttributes(){return["aria-selected","disabled"]}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("aria-selected")==="true",t=this.hasAttribute("disabled");this.style.color=e?"var(--ui-color-primary, #ff5500)":"var(--ui-color-text-secondary, #616161)",this.style.borderBottomColor=e?"var(--ui-color-primary, #ff5500)":"transparent",this.style.opacity=t?"0.5":"1",this.style.pointerEvents=t?"none":"auto"}}class M extends HTMLElement{connectedCallback(){this.setAttribute("role","tabpanel")}}customElements.get("ui-tabs")||customElements.define("ui-tabs",H);customElements.get("ui-tab")||customElements.define("ui-tab",U);customElements.get("ui-tab-panel")||customElements.define("ui-tab-panel",M);class q extends l{static get observedAttributes(){return["variant","size"]}get variant(){return this.getAttribute("variant")||"primary"}get size(){return this.getAttribute("size")||"md"}render(){const e=this.variant,t=this.size;this.root.innerHTML=`
       <style>
         :host {
           display: inline-flex;
@@ -766,10 +766,10 @@
           border: var(--ui-border-width-thin, 1px) solid var(--ui-color-error, #d32f2f);
         }
       </style>
-      <span class="badge ${t} ${e}">
+      <span class="badge ${e} ${t}">
         <slot></slot>
       </span>
-    `}}customElements.get("ui-badge")||customElements.define("ui-badge",D);class U extends n{static get observedAttributes(){return["size","aria-label"]}get size(){return this.getAttribute("size")||"md"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","status"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Loading")}render(){const t=this.size;this.root.innerHTML=`
+    `}}customElements.get("ui-badge")||customElements.define("ui-badge",q);class F extends l{static get observedAttributes(){return["size","aria-label"]}get size(){return this.getAttribute("size")||"md"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","status"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Loading")}render(){const e=this.size;this.root.innerHTML=`
       <style>
         :host {
           display: inline-block;
@@ -804,8 +804,8 @@
           100% { transform: rotate(360deg); }
         }
       </style>
-      <div class="spinner ${t}"></div>
-    `}}customElements.get("ui-spinner")||customElements.define("ui-spinner",U);class H extends n{static get observedAttributes(){return["variant","title","closable","aria-label"]}get variant(){return this.getAttribute("variant")||"info"}get title(){return this.getAttribute("title")||""}set title(t){this.setAttribute("title",t)}get closable(){return this.getBooleanAttr("closable")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","alert")}close(){this.style.display="none",this.emit("close")}render(){const t=this.variant,e=this.title,r=this.closable;this.root.innerHTML=`
+      <div class="spinner ${e}"></div>
+    `}}customElements.get("ui-spinner")||customElements.define("ui-spinner",F);class j extends l{static get observedAttributes(){return["variant","title","closable","aria-label"]}get variant(){return this.getAttribute("variant")||"info"}get title(){return this.getAttribute("title")||""}set title(e){this.setAttribute("title",e)}get closable(){return this.getBooleanAttr("closable")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","alert")}close(){this.style.display="none",this.emit("close")}render(){const e=this.variant,t=this.title,r=this.closable;this.root.innerHTML=`
       <style>
         :host {
           display: block;
@@ -875,9 +875,9 @@
           stroke-width: 2;
         }
       </style>
-      <div class="alert ${t}">
+      <div class="alert ${e}">
         <div class="content">
-          ${e?`<div class="title">${this.escapeHtml(e)}</div>`:""}
+          ${t?`<div class="title">${this.escapeHtml(t)}</div>`:""}
           <slot></slot>
         </div>
         ${r?`
@@ -888,7 +888,7 @@
           </button>
         `:""}
       </div>
-    `;const i=this.root.querySelector("#closeBtn");i&&i.addEventListener("click",()=>this.close())}}customElements.get("ui-alert")||customElements.define("ui-alert",H);class M extends n{static get observedAttributes(){return["variant","bordered"]}get variant(){return this.getAttribute("variant")||"default"}get bordered(){return this.hasAttribute("bordered")||this.variant==="bordered"}render(){const t=this.variant,e=this.bordered;this.root.innerHTML=`
+    `;const i=this.root.querySelector("#closeBtn");i&&i.addEventListener("click",()=>this.close())}}customElements.get("ui-alert")||customElements.define("ui-alert",j);class O extends l{static get observedAttributes(){return["variant","bordered"]}get variant(){return this.getAttribute("variant")||"default"}get bordered(){return this.hasAttribute("bordered")||this.variant==="bordered"}render(){const e=this.variant,t=this.bordered;this.root.innerHTML=`
       <style>
         :host {
           display: block;
@@ -898,7 +898,7 @@
         .card {
           background-color: var(--ui-color-bg-surface, #ffffff);
           color: var(--ui-color-text-primary, #000000);
-          border: ${e?"var(--ui-border-width-thin, 1px) solid var(--ui-color-border-strong, #000000)":"var(--ui-border-width-thin, 1px) solid var(--ui-color-border, #e0e0e0)"};
+          border: ${t?"var(--ui-border-width-thin, 1px) solid var(--ui-color-border-strong, #000000)":"var(--ui-border-width-thin, 1px) solid var(--ui-color-border, #e0e0e0)"};
           border-radius: var(--ui-radius-sm, 1px);
           box-sizing: border-box;
           overflow: hidden;
@@ -927,14 +927,14 @@
           background-color: var(--ui-color-bg-subtle, #fafafa);
         }
       </style>
-      <div class="card ${t}">
+      <div class="card ${e}">
         <slot name="header"></slot>
         <div class="content">
           <slot></slot>
         </div>
         <slot name="footer"></slot>
       </div>
-    `}}customElements.get("ui-card")||customElements.define("ui-card",M);class q extends n{static get observedAttributes(){return["multiple"]}get multiple(){return this.hasAttribute("multiple")}connectedCallback(){super.connectedCallback(),this.listen("toggle-item",this.handleItemToggle.bind(this))}handleItemToggle(t){this.multiple||t.detail.open&&Array.from(this.querySelectorAll("ui-accordion-item")).forEach(r=>{r!==t.detail.item&&r instanceof y&&(r.open=!1)})}render(){this.root.innerHTML=`
+    `}}customElements.get("ui-card")||customElements.define("ui-card",O);class K extends l{static get observedAttributes(){return["multiple"]}get multiple(){return this.hasAttribute("multiple")}connectedCallback(){super.connectedCallback(),this.listen("toggle-item",this.handleItemToggle.bind(this))}handleItemToggle(e){this.multiple||e.detail.open&&Array.from(this.querySelectorAll("ui-accordion-item")).forEach(r=>{r!==e.detail.item&&r instanceof E&&(r.open=!1)})}render(){this.root.innerHTML=`
       <style>
         :host {
           display: block;
@@ -945,7 +945,7 @@
         }
       </style>
       <slot></slot>
-    `}}class y extends n{static get observedAttributes(){return["open","title","disabled"]}get open(){return this.getBooleanAttr("open")}set open(t){this.setBooleanAttr("open",t)}get title(){return this.getAttribute("title")||""}set title(t){this.setAttribute("title",t)}get disabled(){return this.getBooleanAttr("disabled")}toggle(){this.disabled||(this.open=!this.open,this.emit("toggle-item",{item:this,open:this.open}),this.emit("change",{open:this.open}))}render(){const t=this.open,e=this.disabled,r=this.title;this.root.innerHTML=`
+    `}}class E extends l{static get observedAttributes(){return["open","title","disabled"]}get open(){return this.getBooleanAttr("open")}set open(e){this.setBooleanAttr("open",e)}get title(){return this.getAttribute("title")||""}set title(e){this.setAttribute("title",e)}get disabled(){return this.getBooleanAttr("disabled")}toggle(){this.disabled||(this.open=!this.open,this.emit("toggle-item",{item:this,open:this.open}),this.emit("change",{open:this.open}))}render(){const e=this.open,t=this.disabled,r=this.title;this.root.innerHTML=`
       <style>
         :host {
           display: block;
@@ -989,7 +989,7 @@
           transform: rotate(180deg);
         }
         .content {
-          display: ${t?"block":"none"};
+          display: ${e?"block":"none"};
           padding: var(--ui-space-4, 16px);
           background-color: var(--ui-color-bg-subtle, #fafafa);
           font-size: var(--ui-font-size-sm, 14px);
@@ -998,10 +998,10 @@
         }
       </style>
       <div
-        class="header ${t?"open":""} ${e?"disabled":""}"
+        class="header ${e?"open":""} ${t?"disabled":""}"
         role="button"
-        tabindex="${e?"-1":"0"}"
-        aria-expanded="${t}"
+        tabindex="${t?"-1":"0"}"
+        aria-expanded="${e}"
       >
         <span>${this.escapeHtml(r)}</span>
         <svg class="icon" viewBox="0 0 16 16">
@@ -1011,7 +1011,7 @@
       <div class="content" role="region">
         <slot></slot>
       </div>
-    `;const i=this.root.querySelector(".header");i&&(i.addEventListener("click",()=>this.toggle()),i.addEventListener("keydown",s=>{const o=s;(o.key===" "||o.key==="Enter")&&(o.preventDefault(),this.toggle())}))}}customElements.get("ui-accordion")||customElements.define("ui-accordion",q);customElements.get("ui-accordion-item")||customElements.define("ui-accordion-item",y);class O extends n{constructor(){super();c(this,"_isOpen",!1);c(this,"handleDocClickBound");this.handleDocClickBound=this.handleDocClick.bind(this)}static get observedAttributes(){return["open","placement","disabled"]}get open(){return this._isOpen}set open(e){this._isOpen=e,this.setBooleanAttr("open",e),this.render()}get placement(){return this.getAttribute("placement")||"bottom-start"}get disabled(){return this.getBooleanAttr("disabled")}connectedCallback(){super.connectedCallback(),this._isOpen=this.hasAttribute("open"),document.addEventListener("click",this.handleDocClickBound),this.listen("keydown",this.handleKeyDown.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocClickBound)}handleDocClick(e){!this.contains(e.target)&&!this.root.contains(e.target)&&this._isOpen&&this.close()}handleKeyDown(e){e.key==="Escape"&&this._isOpen&&(e.preventDefault(),this.close())}toggle(){this.disabled||(this._isOpen?this.close():this.openDropdown())}openDropdown(){this.disabled||this._isOpen||(this.open=!0,this.emit("open"))}close(){this._isOpen&&(this.open=!1,this.emit("close"))}render(){const e=this._isOpen,r=this.placement;this.root.innerHTML=`
+    `;const i=this.root.querySelector(".header");i&&(i.addEventListener("click",()=>this.toggle()),i.addEventListener("keydown",o=>{const s=o;(s.key===" "||s.key==="Enter")&&(s.preventDefault(),this.toggle())}))}}customElements.get("ui-accordion")||customElements.define("ui-accordion",K);customElements.get("ui-accordion-item")||customElements.define("ui-accordion-item",E);class P extends l{constructor(){super();c(this,"_isOpen",!1);c(this,"handleDocClickBound");this.handleDocClickBound=this.handleDocClick.bind(this)}static get observedAttributes(){return["open","placement","disabled"]}get open(){return this._isOpen}set open(t){this._isOpen=t,this.setBooleanAttr("open",t),this.render()}get placement(){return this.getAttribute("placement")||"bottom-start"}get disabled(){return this.getBooleanAttr("disabled")}connectedCallback(){super.connectedCallback(),this._isOpen=this.hasAttribute("open"),document.addEventListener("click",this.handleDocClickBound),this.listen("keydown",this.handleKeyDown.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocClickBound)}handleDocClick(t){!this.contains(t.target)&&!this.root.contains(t.target)&&this._isOpen&&this.close()}handleKeyDown(t){t.key==="Escape"&&this._isOpen&&(t.preventDefault(),this.close())}toggle(){this.disabled||(this._isOpen?this.close():this.openDropdown())}openDropdown(){this.disabled||this._isOpen||(this.open=!0,this.emit("open"))}close(){this._isOpen&&(this.open=!1,this.emit("close"))}render(){const t=this._isOpen,r=this.placement;this.root.innerHTML=`
       <style>
         :host {
           display: inline-block;
@@ -1026,7 +1026,7 @@
           border: var(--ui-border-width-thin, 1px) solid var(--ui-color-border-strong, #000000);
           border-radius: var(--ui-radius-sm, 1px);
           box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-          display: ${e?"block":"none"};
+          display: ${t?"block":"none"};
           min-width: 160px;
           box-sizing: border-box;
           padding: var(--ui-space-1, 4px) 0;
@@ -1054,10 +1054,10 @@
       <div id="trigger-wrapper">
         <slot name="trigger"></slot>
       </div>
-      <div class="popover ${r}" role="menu" aria-hidden="${!e}">
+      <div class="popover ${r}" role="menu" aria-hidden="${!t}">
         <slot></slot>
       </div>
-    `;const i=this.root.querySelector("#trigger-wrapper");i&&i.addEventListener("click",o=>{o.stopPropagation(),this.toggle()})}}class P extends HTMLElement{connectedCallback(){this.setAttribute("role","menuitem"),this.setAttribute("tabindex","0")}}customElements.get("ui-dropdown")||customElements.define("ui-dropdown",O);customElements.get("ui-dropdown-item")||customElements.define("ui-dropdown-item",P);class j extends n{static get observedAttributes(){return["value","max","size","variant","aria-label"]}get value(){return parseFloat(this.getAttribute("value")||"0")}set value(t){this.setAttribute("value",String(t))}get max(){return parseFloat(this.getAttribute("max")||"100")}set max(t){this.setAttribute("max",String(t))}get size(){return this.getAttribute("size")||"md"}get variant(){return this.getAttribute("variant")||"primary"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","progressbar")}render(){const t=Math.min(Math.max(this.value,0),this.max),e=this.max>0?t/this.max*100:0,r=this.size,i=this.variant,s=this.getAttribute("aria-label")||"Progress";this.setAttribute("aria-valuenow",String(t)),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(this.max)),this.setAttribute("aria-label",s),this.root.innerHTML=`
+    `;const i=this.root.querySelector("#trigger-wrapper");i&&i.addEventListener("click",s=>{s.stopPropagation(),this.toggle()})}}class _ extends HTMLElement{connectedCallback(){this.setAttribute("role","menuitem"),this.setAttribute("tabindex","0")}}customElements.get("ui-dropdown")||customElements.define("ui-dropdown",P);customElements.get("ui-dropdown-item")||customElements.define("ui-dropdown-item",_);class R extends l{static get observedAttributes(){return["value","max","size","variant","aria-label"]}get value(){return parseFloat(this.getAttribute("value")||"0")}set value(e){this.setAttribute("value",String(e))}get max(){return parseFloat(this.getAttribute("max")||"100")}set max(e){this.setAttribute("max",String(e))}get size(){return this.getAttribute("size")||"md"}get variant(){return this.getAttribute("variant")||"primary"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","progressbar")}render(){const e=Math.min(Math.max(this.value,0),this.max),t=this.max>0?e/this.max*100:0,r=this.size,i=this.variant,o=this.getAttribute("aria-label")||"Progress";this.setAttribute("aria-valuenow",String(e)),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(this.max)),this.setAttribute("aria-label",o),this.root.innerHTML=`
       <style>
         :host {
           display: block;
@@ -1081,7 +1081,7 @@
 
         .bar {
           height: 100%;
-          width: ${e}%;
+          width: ${t}%;
           transition: width var(--ui-transition-normal);
         }
 
@@ -1102,7 +1102,7 @@
       <div class="track ${r}">
         <div class="bar ${i}"></div>
       </div>
-    `}}customElements.get("ui-progress")||customElements.define("ui-progress",j);class _ extends n{static get observedAttributes(){return["current","total","page-size"]}get current(){return parseInt(this.getAttribute("current")||"1",10)}set current(t){this.setAttribute("current",String(t)),this.render()}get total(){return parseInt(this.getAttribute("total")||"1",10)}set total(t){this.setAttribute("total",String(t)),this.render()}get totalPages(){const t=parseInt(this.getAttribute("page-size")||"10",10);return Math.max(1,Math.ceil(this.total/t))}connectedCallback(){super.connectedCallback(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","Pagination"),this.listen("click",this.handleClick.bind(this))}handleClick(t){const e=this.composedTarget(t).closest("button");if(!e||e.hasAttribute("disabled"))return;const r=e.dataset.action,i=e.dataset.page;r==="prev"?this.current>1&&this.goToPage(this.current-1):r==="next"?this.current<this.totalPages&&this.goToPage(this.current+1):i&&this.goToPage(parseInt(i,10))}goToPage(t){t!==this.current&&(this.current=t,this.emit("change",{page:t}))}render(){const t=this.current,e=this.totalPages,r=[],i=Math.max(1,t-2),s=Math.min(e,i+4);for(let o=i;o<=s;o++)r.push(o);this.root.innerHTML=`
+    `}}customElements.get("ui-progress")||customElements.define("ui-progress",R);class V extends l{static get observedAttributes(){return["current","total","page-size"]}get current(){return parseInt(this.getAttribute("current")||"1",10)}set current(e){this.setAttribute("current",String(e)),this.render()}get total(){return parseInt(this.getAttribute("total")||"1",10)}set total(e){this.setAttribute("total",String(e)),this.render()}get totalPages(){const e=parseInt(this.getAttribute("page-size")||"10",10);return Math.max(1,Math.ceil(this.total/e))}connectedCallback(){super.connectedCallback(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","Pagination"),this.listen("click",this.handleClick.bind(this))}handleClick(e){const t=this.composedTarget(e).closest("button");if(!t||t.hasAttribute("disabled"))return;const r=t.dataset.action,i=t.dataset.page;r==="prev"?this.current>1&&this.goToPage(this.current-1):r==="next"?this.current<this.totalPages&&this.goToPage(this.current+1):i&&this.goToPage(parseInt(i,10))}goToPage(e){e!==this.current&&(this.current=e,this.emit("change",{page:e}))}render(){const e=this.current,t=this.totalPages,r=[],i=Math.max(1,e-2),o=Math.min(t,i+4);for(let s=i;s<=o;s++)r.push(s);this.root.innerHTML=`
       <style>
         :host {
           display: inline-flex;
@@ -1147,23 +1147,23 @@
           cursor: not-allowed;
         }
       </style>
-      <button data-action="prev" ${t<=1?"disabled":""} aria-label="Previous page">
+      <button data-action="prev" ${e<=1?"disabled":""} aria-label="Previous page">
         &lsaquo;
       </button>
-      ${r.map(o=>`
+      ${r.map(s=>`
         <button
-          data-page="${o}"
-          class="${o===t?"active":""}"
-          aria-current="${o===t?"page":"false"}"
-          aria-label="Page ${o}"
+          data-page="${s}"
+          class="${s===e?"active":""}"
+          aria-current="${s===e?"page":"false"}"
+          aria-label="Page ${s}"
         >
-          ${o}
+          ${s}
         </button>
       `).join("")}
-      <button data-action="next" ${t>=e?"disabled":""} aria-label="Next page">
+      <button data-action="next" ${e>=t?"disabled":""} aria-label="Next page">
         &rsaquo;
       </button>
-    `}}customElements.get("ui-pagination")||customElements.define("ui-pagination",_);const f=class f extends n{static get observedAttributes(){return["striped","bordered","hoverable"]}ensureLightCss(){if(f.lightCssInjected)return;f.lightCssInjected=!0;const t=document.createElement("style");t.setAttribute("data-cubit-ui-table",""),t.textContent=`
+    `}}customElements.get("ui-pagination")||customElements.define("ui-pagination",V);const v=class v extends l{static get observedAttributes(){return["striped","bordered","hoverable"]}ensureLightCss(){if(v.lightCssInjected)return;v.lightCssInjected=!0;const e=document.createElement("style");e.setAttribute("data-cubit-ui-table",""),e.textContent=`
       ui-table thead th,
       ui-table tbody td {
         padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px);
@@ -1190,7 +1190,7 @@
       ui-table[hoverable] tbody tr:hover td {
         background-color: var(--ui-color-bg-secondary-subtle, #ffe4c9);
       }
-    `,document.head.appendChild(t)}get striped(){return this.hasAttribute("striped")}get bordered(){return this.hasAttribute("bordered")}get hoverable(){return this.hasAttribute("hoverable")}render(){const t=this.striped,e=this.bordered,r=this.hoverable;this.ensureLightCss(),this.root.innerHTML=`
+    `,document.head.appendChild(e)}get striped(){return this.hasAttribute("striped")}get bordered(){return this.hasAttribute("bordered")}get hoverable(){return this.hasAttribute("hoverable")}render(){const e=this.striped,t=this.bordered,r=this.hoverable;this.ensureLightCss(),this.root.innerHTML=`
       <style>
         :host {
           display: block;
@@ -1204,7 +1204,7 @@
           text-align: left;
           font-size: var(--ui-font-size-sm, 14px);
           color: var(--ui-color-text-primary, #000000);
-          border: ${e?"var(--ui-border-width-thin, 1px) solid var(--ui-color-border-strong, #000000)":"var(--ui-border-width-thin, 1px) solid var(--ui-color-border, #e0e0e0)"};
+          border: ${t?"var(--ui-border-width-thin, 1px) solid var(--ui-color-border-strong, #000000)":"var(--ui-border-width-thin, 1px) solid var(--ui-color-border, #e0e0e0)"};
         }
         ::slotted(thead) {
           background-color: var(--ui-color-bg-subtle, #fafafa);
@@ -1215,12 +1215,12 @@
           padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px);
           border-bottom: var(--ui-border-width-thin, 1px) solid var(--ui-color-border, #e0e0e0);
         }
-        ${e?`
+        ${t?`
           ::slotted(th), ::slotted(td) {
             border: var(--ui-border-width-thin, 1px) solid var(--ui-color-border, #e0e0e0);
           }
         `:""}
-        ${t?`
+        ${e?`
           ::slotted(tbody tr:nth-child(even)) {
             background-color: var(--ui-color-bg-subtle, #fafafa);
           }
@@ -1234,7 +1234,7 @@
       <table class="table-container" role="table">
         <slot></slot>
       </table>
-    `}};c(f,"lightCssInjected",!1);let v=f;customElements.get("ui-table")||customElements.define("ui-table",v);class F extends n{static get observedAttributes(){return["src","alt","name","size","shape"]}get src(){return this.getAttribute("src")||""}set src(t){this.setAttribute("src",t)}get alt(){return this.getAttribute("alt")||""}get name(){return this.getAttribute("name")||""}get size(){return this.getAttribute("size")||"md"}get shape(){return this.getAttribute("shape")||"circle"}getInitials(t){if(!t)return"";const e=t.trim().split(/\s+/);return e.length>=2?(e[0][0]||"")+(e[1][0]||""):t.slice(0,2).toUpperCase()}render(){const t=this.src,e=this.alt||this.name,r=this.size,i=this.shape!=="square",s=this.getInitials(this.name);this.root.innerHTML=`
+    `}};c(v,"lightCssInjected",!1);let x=v;customElements.get("ui-table")||customElements.define("ui-table",x);class N extends l{static get observedAttributes(){return["src","alt","name","size","shape"]}get src(){return this.getAttribute("src")||""}set src(e){this.setAttribute("src",e)}get alt(){return this.getAttribute("alt")||""}get name(){return this.getAttribute("name")||""}get size(){return this.getAttribute("size")||"md"}get shape(){return this.getAttribute("shape")||"circle"}getInitials(e){if(!e)return"";const t=e.trim().split(/\s+/);return t.length>=2?(t[0][0]||"")+(t[1][0]||""):e.slice(0,2).toUpperCase()}render(){const e=this.src,t=this.alt||this.name,r=this.size,i=this.shape!=="square",o=this.getInitials(this.name);this.root.innerHTML=`
       <style>
         :host {
           display: inline-block;
@@ -1277,10 +1277,10 @@
           object-fit: cover;
         }
       </style>
-      <div class="avatar ${this.escapeHtml(r)}" role="img" aria-label="${this.escapeHtml(e)}">
-        ${t?`<img src="${this.safeUrl(t)}" alt="${this.escapeHtml(e)}" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline-flex';" /><span style="display:none;">${this.escapeHtml(s)}</span>`:`<span>${this.escapeHtml(s)}</span>`}
+      <div class="avatar ${this.escapeHtml(r)}" role="img" aria-label="${this.escapeHtml(t)}">
+        ${e?`<img src="${this.safeUrl(e)}" alt="${this.escapeHtml(t)}" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline-flex';" /><span style="display:none;">${this.escapeHtml(o)}</span>`:`<span>${this.escapeHtml(o)}</span>`}
       </div>
-    `}}customElements.get("ui-avatar")||customElements.define("ui-avatar",F);class K extends n{static get observedAttributes(){return["separator","aria-label"]}get separator(){return this.getAttribute("separator")||"/"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","navigation");const t=this.getAttribute("aria-label")||"Breadcrumbs";this.setAttribute("aria-label",t),this.syncSeparators()}attributeChangedCallback(t,e,r){super.attributeChangedCallback(t,e,r),t==="separator"&&this.syncSeparators()}syncSeparators(){const t=Array.from(this.querySelectorAll("ui-breadcrumb-item"));t.forEach((e,r)=>{r===t.length-1?(e.setAttribute("current","true"),e.removeAttribute("separator")):(e.removeAttribute("current"),e.setAttribute("separator",this.separator))})}render(){this.root.innerHTML=`
+    `}}customElements.get("ui-avatar")||customElements.define("ui-avatar",N);class W extends l{static get observedAttributes(){return["separator","aria-label"]}get separator(){return this.getAttribute("separator")||"/"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","navigation");const e=this.getAttribute("aria-label")||"Breadcrumbs";this.setAttribute("aria-label",e),this.syncSeparators()}attributeChangedCallback(e,t,r){super.attributeChangedCallback(e,t,r),e==="separator"&&this.syncSeparators()}syncSeparators(){const e=Array.from(this.querySelectorAll("ui-breadcrumb-item"));e.forEach((t,r)=>{r===e.length-1?(t.setAttribute("current","true"),t.removeAttribute("separator")):(t.removeAttribute("current"),t.setAttribute("separator",this.separator))})}render(){this.root.innerHTML=`
       <style>
         :host {
           display: block;
@@ -1299,7 +1299,7 @@
       <ol>
         <slot></slot>
       </ol>
-    `;const t=this.root.querySelector("slot");t&&t.addEventListener("slotchange",()=>this.syncSeparators())}}class N extends n{static get observedAttributes(){return["href","separator","current"]}get href(){return this.getAttribute("href")||""}get separator(){return this.getAttribute("separator")||""}get current(){return this.hasAttribute("current")||this.getAttribute("current")==="true"}render(){const t=this.href,e=this.current,r=this.separator;this.root.innerHTML=`
+    `;const e=this.root.querySelector("slot");e&&e.addEventListener("slotchange",()=>this.syncSeparators())}}class X extends l{static get observedAttributes(){return["href","separator","current"]}get href(){return this.getAttribute("href")||""}get separator(){return this.getAttribute("separator")||""}get current(){return this.hasAttribute("current")||this.getAttribute("current")==="true"}render(){const e=this.href,t=this.current,r=this.separator;this.root.innerHTML=`
       <style>
         :host {
           display: inline-flex;
@@ -1337,10 +1337,10 @@
         }
       </style>
       <li role="listitem">
-        ${e?'<span class="current" aria-current="page"><slot></slot></span>':t?`<a href="${this.safeUrl(t)}"><slot></slot></a>`:"<span><slot></slot></span>"}
+        ${t?'<span class="current" aria-current="page"><slot></slot></span>':e?`<a href="${this.safeUrl(e)}"><slot></slot></a>`:"<span><slot></slot></span>"}
         ${r?`<span class="separator" aria-hidden="true">${this.escapeHtml(r)}</span>`:""}
       </li>
-    `}}customElements.get("ui-breadcrumbs")||customElements.define("ui-breadcrumbs",K);customElements.get("ui-breadcrumb-item")||customElements.define("ui-breadcrumb-item",N);class R extends n{static get observedAttributes(){return["open","side","title"]}constructor(){super(),this.removeAttribute("tabindex")}get open(){return this.getBooleanAttr("open")}set open(t){this.setBooleanAttr("open",t)}get side(){return this.getAttribute("side")||"right"}get title(){return this.getAttribute("title")||""}set title(t){this.setAttribute("title",t)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.listen("keydown",t=>{t.key==="Escape"&&this.open&&this.close()})}close(){this.open=!1,this.emit("close",{})}render(){var o;const t=this.open,e=this.side==="left"?"left":"right",r=this.title;if(!t){this.root.innerHTML="";return}this.root.innerHTML=`
+    `}}customElements.get("ui-breadcrumbs")||customElements.define("ui-breadcrumbs",W);customElements.get("ui-breadcrumb-item")||customElements.define("ui-breadcrumb-item",X);class Y extends l{static get observedAttributes(){return["open","side","title"]}constructor(){super(),this.removeAttribute("tabindex")}get open(){return this.getBooleanAttr("open")}set open(e){this.setBooleanAttr("open",e)}get side(){return this.getAttribute("side")||"right"}get title(){return this.getAttribute("title")||""}set title(e){this.setAttribute("title",e)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.listen("keydown",e=>{e.key==="Escape"&&this.open&&this.close()})}close(){this.open=!1,this.emit("close",{})}render(){var s;const e=this.open,t=this.side==="left"?"left":"right",r=this.title;if(!e){this.root.innerHTML="";return}this.root.innerHTML=`
       <style>
         :host {
           position: fixed;
@@ -1379,7 +1379,7 @@
           border-bottom-right-radius: var(--ui-radius-md, 12px);
         }
         @keyframes slide-in {
-          from { transform: translateX(${e==="left"?"-24px":"24px"}); opacity: 0.4; }
+          from { transform: translateX(${t==="left"?"-24px":"24px"}); opacity: 0.4; }
           to   { transform: translateX(0); opacity: 1; }
         }
         header.head {
@@ -1427,7 +1427,7 @@
         }
       </style>
       <div class="backdrop" data-backdrop></div>
-      <div class="panel ${e}" part="panel">
+      <div class="panel ${t}" part="panel">
         <header class="head">
           <h2>${this.escapeHtml(r)}</h2>
           <button class="close-btn" data-close aria-label="닫기">✕</button>
@@ -1435,7 +1435,7 @@
         <div class="body"><slot></slot></div>
         <footer class="foot" style="display:none;"><slot name="footer"></slot></footer>
       </div>
-    `;const i=this.root.querySelector("footer.foot");this.querySelector('[slot="footer"]')&&(i.style.display="block"),this.root.querySelector("[data-backdrop]").addEventListener("click",()=>this.close()),(o=this.root.querySelector("[data-close]"))==null||o.addEventListener("click",()=>this.close()),requestAnimationFrame(()=>{var l;(l=this.root.querySelector(".close-btn"))==null||l.focus()})}}customElements.get("ui-drawer")||customElements.define("ui-drawer",R);class V extends n{static get observedAttributes(){return["variant","width","height","lines"]}get variant(){return this.getAttribute("variant")||"text"}get width(){return this.getAttribute("width")||""}get height(){return this.getAttribute("height")||""}get lines(){const t=parseInt(this.getAttribute("lines")||"1",10);return Number.isFinite(t)&&t>0?Math.min(t,6):1}render(){const t=this.variant,e=this.width?`width: ${this.escape(this.width)};`:"",r=this.height?`height: ${this.escape(this.height)};`:"",i=t==="text"&&this.lines>1?Array.from({length:this.lines},(s,o)=>`<span class="shimmer bar" style="${o===this.lines-1?"width: 70%;":"width: 100%;"}"></span>`).join(""):`<span class="shimmer ${t==="circle"?"circle":t==="rect"?"rect":"bar"}" style="${e}${r}"></span>`;this.root.innerHTML=`
+    `;const i=this.root.querySelector("footer.foot");this.querySelector('[slot="footer"]')&&(i.style.display="block"),this.root.querySelector("[data-backdrop]").addEventListener("click",()=>this.close()),(s=this.root.querySelector("[data-close]"))==null||s.addEventListener("click",()=>this.close()),requestAnimationFrame(()=>{var n;(n=this.root.querySelector(".close-btn"))==null||n.focus()})}}customElements.get("ui-drawer")||customElements.define("ui-drawer",Y);class G extends l{static get observedAttributes(){return["variant","width","height","lines"]}get variant(){return this.getAttribute("variant")||"text"}get width(){return this.getAttribute("width")||""}get height(){return this.getAttribute("height")||""}get lines(){const e=parseInt(this.getAttribute("lines")||"1",10);return Number.isFinite(e)&&e>0?Math.min(e,6):1}render(){const e=this.variant,t=this.width?`width: ${this.escape(this.width)};`:"",r=this.height?`height: ${this.escape(this.height)};`:"",i=e==="text"&&this.lines>1?Array.from({length:this.lines},(o,s)=>`<span class="shimmer bar" style="${s===this.lines-1?"width: 70%;":"width: 100%;"}"></span>`).join(""):`<span class="shimmer ${e==="circle"?"circle":e==="rect"?"rect":"bar"}" style="${t}${r}"></span>`;this.root.innerHTML=`
       <style>
         :host {
           display: block;
@@ -1469,13 +1469,13 @@
         }
       </style>
       <div class="wrap" aria-hidden="true">${i}</div>
-    `}escape(t){return t.replace(/["<>]/g,"")}}customElements.get("ui-skeleton")||customElements.define("ui-skeleton",V);class X extends n{static get observedAttributes(){return["brand","sticky"]}get brand(){return this.getAttribute("brand")||""}get sticky(){return this.getBooleanAttr("sticky")}render(){const t=this.brand,e=this.sticky;this.root.innerHTML=`
+    `}escape(e){return e.replace(/["<>]/g,"")}}customElements.get("ui-skeleton")||customElements.define("ui-skeleton",G);class J extends l{static get observedAttributes(){return["brand","sticky"]}get brand(){return this.getAttribute("brand")||""}get sticky(){return this.getBooleanAttr("sticky")}render(){const e=this.brand,t=this.sticky;this.root.innerHTML=`
       <style>
         :host {
           display: block;
           font-family: var(--ui-font-family-base, sans-serif);
         }
-        ${e?":host { position: sticky; top: 0; z-index: 500; }":""}
+        ${t?":host { position: sticky; top: 0; z-index: 500; }":""}
         nav.bar {
           display: flex;
           align-items: center;
@@ -1536,11 +1536,254 @@
         }
       </style>
       <nav class="bar" aria-label="주요 탐색">
-        ${t?`<span class="brand">${this.escapeHtml(t)}</span>`:""}
+        ${e?`<span class="brand">${this.escapeHtml(e)}</span>`:""}
         <div class="links"><slot></slot></div>
         <div class="actions"><slot name="actions"></slot></div>
       </nav>
-    `}}customElements.get("ui-navbar")||customElements.define("ui-navbar",X);class W extends n{static get observedAttributes(){return["level","time"]}get level(){const t=this.getAttribute("level")||"info";return["info","success","warning","error","debug"].includes(t)?t:"info"}get time(){return this.getAttribute("time")||""}render(){const t=this.time;this.root.innerHTML=`
+    `}}customElements.get("ui-navbar")||customElements.define("ui-navbar",J);class $ extends l{constructor(){super(...arguments);c(this,"defaultValue","")}static get observedAttributes(){return["value","placeholder","rows","maxlength","resize","size","disabled","readonly","invalid","aria-label"]}get value(){const t=this.root.querySelector("textarea");return t?t.value:this.getAttribute("value")||""}set value(t){this.setAttribute("value",t);const r=this.root.querySelector("textarea");r&&(r.value=t)}get disabled(){return this.getBooleanAttr("disabled")||this.formDisabled}set disabled(t){this.setBooleanAttr("disabled",t)}get invalid(){return this.getBooleanAttr("invalid")}set invalid(t){this.setBooleanAttr("invalid",t)}connectedCallback(){this.defaultValue=this.getAttribute("value")||"",super.connectedCallback()}formResetCallback(){this.value=this.defaultValue}attributeChangedCallback(t,r,i){if(t==="value"&&r!==i){this.setFormValue(i??"");const o=this.root.querySelector("textarea");if(o){if(o.value!==i){const s=o.selectionStart,n=o.selectionEnd;if(o.value=i??"",i!==null&&s<=i.length)try{o.setSelectionRange(s,Math.min(n,i.length))}catch{}}this.updateCounter();return}}super.attributeChangedCallback(t,r,i)}updateCounter(){const t=this.root.querySelector(".counter"),r=this.root.querySelector("textarea"),i=this.getAttribute("maxlength");t&&r&&i&&(t.textContent=`${r.value.length} / ${i}`)}render(){const t=["sm","md","lg"].includes(this.getAttribute("size")||"")?this.getAttribute("size"):"md",r=["none","vertical","both"].includes(this.getAttribute("resize")||"")?this.getAttribute("resize"):"vertical",i=Math.max(1,parseInt(this.getAttribute("rows")||"3",10)||3),o=parseInt(this.getAttribute("maxlength")||"",10),s=Number.isFinite(o)&&o>0,n=this.disabled,d=this.hasAttribute("readonly"),b=this.invalid,h=this.getAttribute("aria-label")||"",p=this.getAttribute("placeholder")||"",f=this.getAttribute("value")||"";this.setFormValue(f),this.root.innerHTML=`
+      <style>
+        :host { display: block; font-family: var(--ui-font-family-base, sans-serif); }
+        .wrapper {
+          position: relative;
+          box-sizing: border-box;
+          background-color: var(--ui-color-bg-surface, #ffffff);
+          border: var(--ui-border-width-thin, 1px) solid var(--ui-color-border, #e0e0e0);
+          border-radius: var(--ui-radius-sm, 8px);
+          transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
+        }
+        .wrapper:hover:not(.disabled) { border-color: var(--ui-color-border-strong, #000000); }
+        .wrapper.focused {
+          border-color: var(--ui-color-primary, #ff5500);
+          box-shadow: 0 0 0 1px var(--ui-color-primary, #ff5500);
+        }
+        .wrapper.invalid { border-color: var(--ui-color-error, #d32f2f); }
+        .wrapper.invalid.focused { box-shadow: 0 0 0 1px var(--ui-color-error, #d32f2f); }
+        .wrapper.disabled {
+          background-color: var(--ui-color-bg-muted, #f5f5f5);
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+        textarea {
+          all: unset;
+          display: block;
+          width: 100%;
+          box-sizing: border-box;
+          white-space: pre-wrap;
+          overflow: auto;
+          color: var(--ui-color-text-primary, #000000);
+          font-family: inherit;
+          line-height: var(--ui-line-height-normal, 1.5);
+          resize: ${r};
+        }
+        textarea::placeholder { color: var(--ui-color-text-muted, #9e9e9e); }
+        textarea:disabled { cursor: not-allowed; }
+        .sm textarea { padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px); font-size: var(--ui-font-size-xs, 12px); }
+        .md textarea { padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px); font-size: var(--ui-font-size-sm, 14px); }
+        .lg textarea { padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px); font-size: var(--ui-font-size-md, 16px); }
+        .counter {
+          text-align: right;
+          padding: 0 var(--ui-space-3, 12px) var(--ui-space-1, 4px);
+          font-size: var(--ui-font-size-xs, 12px);
+          color: var(--ui-color-text-muted, #9e9e9e);
+        }
+      </style>
+      <div class="wrapper ${t} ${n?"disabled":""} ${b?"invalid":""}">
+        <textarea
+          rows="${i}"
+          placeholder="${this.escapeHtml(p)}"
+          ${s?`maxlength="${o}"`:""}
+          ${n?"disabled":""}
+          ${d?"readonly":""}
+          aria-invalid="${b?"true":"false"}"
+          ${h?`aria-label="${this.escapeHtml(h)}"`:""}
+        >
+${this.escapeHtml(f)}</textarea>
+        ${s?`<div class="counter" aria-hidden="true">${f.length} / ${o}</div>`:""}
+      </div>
+    `;const u=this.root.querySelector("textarea"),w=this.root.querySelector(".wrapper");u&&w&&(u.onfocus=()=>w.classList.add("focused"),u.onblur=()=>w.classList.remove("focused"),u.oninput=()=>{this.setAttribute("value",u.value),this.emit("input",{value:u.value})},u.onchange=()=>{this.setAttribute("value",u.value),this.emit("change",{value:u.value})})}}c($,"formAssociated",!0);customElements.get("ui-textarea")||customElements.define("ui-textarea",$);class Q extends l{static get observedAttributes(){return["heading","description","size","variant"]}render(){const e=this.getAttribute("heading")||"",t=this.getAttribute("description")||"",r=this.getAttribute("size")==="sm"?"sm":"md",i=["default","error"].includes(this.getAttribute("variant")||"")?this.getAttribute("variant"):"default";this.root.innerHTML=`
+      <style>
+        :host { display: block; font-family: var(--ui-font-family-base, sans-serif); }
+        .box {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+          gap: var(--ui-space-2, 8px);
+          box-sizing: border-box;
+          padding: var(--ui-space-8, 32px) var(--ui-space-4, 16px);
+          border: var(--ui-border-width-thin, 1px) dashed var(--ui-color-border, #e0e0e0);
+          border-radius: var(--ui-radius-md, 12px);
+          background-color: var(--ui-color-bg-subtle, #fafafa);
+          color: var(--ui-color-text-secondary, #616161);
+        }
+        .box.sm { padding: var(--ui-space-4, 16px); gap: var(--ui-space-1, 4px); }
+        .box.error { border-color: var(--ui-color-error, #d32f2f); background-color: var(--ui-color-error-bg, #fde8e8); }
+        .icon { display: none; color: var(--ui-color-text-muted, #9e9e9e); font-size: 32px; line-height: 1; }
+        .icon.has { display: block; }
+        .heading {
+          margin: 0;
+          font-size: var(--ui-font-size-md, 16px);
+          font-weight: var(--ui-font-weight-semibold, 600);
+          color: var(--ui-color-text-primary, #000000);
+        }
+        .sm .heading { font-size: var(--ui-font-size-sm, 14px); }
+        .desc { margin: 0; max-width: 42ch; font-size: var(--ui-font-size-sm, 14px); line-height: var(--ui-line-height-normal, 1.5); }
+        .sm .desc { font-size: var(--ui-font-size-xs, 12px); }
+        .actions { display: none; margin-top: var(--ui-space-2, 8px); gap: var(--ui-space-2, 8px); flex-wrap: wrap; justify-content: center; }
+        .actions.has { display: flex; }
+      </style>
+      <div class="box ${r} ${i}">
+        <div class="icon" aria-hidden="true"><slot name="icon"></slot></div>
+        ${e?`<h3 class="heading">${this.escapeHtml(e)}</h3>`:""}
+        ${t?`<p class="desc">${this.escapeHtml(t)}</p>`:""}
+        <div class="actions"><slot></slot></div>
+      </div>
+    `;const o=(s,n)=>{const d=this.root.querySelector(s?`slot[name="${s}"]`:"slot:not([name])");if(!d||!n)return;const b=()=>{n.classList.toggle("has",d.assignedNodes({flatten:!0}).some(h=>h.nodeType===1||(h.textContent||"").trim()!==""))};d.addEventListener("slotchange",b),b()};o("icon",this.root.querySelector(".icon")),o(null,this.root.querySelector(".actions"))}}customElements.get("ui-empty-state")||customElements.define("ui-empty-state",Q);class Z extends l{static get observedAttributes(){return["value","size","disabled","aria-label"]}get value(){return this.getAttribute("value")||""}set value(e){this.setAttribute("value",e)}get disabled(){return this.getBooleanAttr("disabled")}set disabled(e){this.setBooleanAttr("disabled",e)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","radiogroup"),this.listen("click",this.handleClick.bind(this)),this.listen("keydown",this.handleKeyDown.bind(this)),this.refresh()}attributeChangedCallback(e,t,r){super.attributeChangedCallback(e,t,r),this.refresh()}segments(){return Array.from(this.querySelectorAll("ui-segment"))}enabledSegments(){return this.segments().filter(e=>!e.hasAttribute("disabled")&&!this.disabled)}select(e){const t=e.getAttribute("value")||"";t!==this.value&&(this.value=t,this.emit("change",{value:t}))}handleClick(e){const t=e.target.closest("ui-segment");!t||t.hasAttribute("disabled")||this.disabled||this.select(t)}handleKeyDown(e){const t=this.enabledSegments();if(!t.length)return;const r=t.findIndex(s=>s.getAttribute("value")===this.value);let i=r;if(e.key==="ArrowRight"||e.key==="ArrowDown")i=r<0?0:(r+1)%t.length;else if(e.key==="ArrowLeft"||e.key==="ArrowUp")i=r<0?t.length-1:(r-1+t.length)%t.length;else if(e.key==="Home")i=0;else if(e.key==="End")i=t.length-1;else if((e.key===" "||e.key==="Enter")&&e.target.closest("ui-segment")){e.preventDefault(),this.select(e.target.closest("ui-segment"));return}else return;e.preventDefault();const o=t[i];o&&(this.select(o),o.focus())}refresh(){const e=this.segments(),t=e.some(i=>i.getAttribute("value")===this.value&&!i.hasAttribute("disabled"));let r=!1;e.forEach(i=>{const o=i.hasAttribute("disabled")||this.disabled,s=i.getAttribute("value")===this.value;i.setAttribute("aria-checked",String(s)),i.setAttribute("aria-disabled",String(o));let n=-1;!o&&(s&&t||!t&&!r)&&(n=0,r=!0),i.setAttribute("tabindex",String(n))})}render(){var t;const e=["sm","md","lg"].includes(this.getAttribute("size")||"")?this.getAttribute("size"):"md";this.root.innerHTML=`
+      <style>
+        :host {
+          display: inline-flex;
+          box-sizing: border-box;
+          padding: 2px;
+          gap: 2px;
+          background-color: var(--ui-color-bg-muted, #f5f5f5);
+          border: var(--ui-border-width-thin, 1px) solid var(--ui-color-border, #e0e0e0);
+          border-radius: var(--ui-radius-md, 12px);
+          font-family: var(--ui-font-family-base, sans-serif);
+        }
+        :host([disabled]) { opacity: 0.5; }
+        ::slotted(ui-segment) {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          cursor: pointer;
+          user-select: none;
+          white-space: nowrap;
+          font-weight: var(--ui-font-weight-medium, 500);
+          color: var(--ui-color-text-secondary, #616161);
+          border-radius: var(--ui-radius-sm, 8px);
+          outline: none;
+          transition: background-color var(--ui-transition-fast), color var(--ui-transition-fast);
+          ${e==="sm"?"padding: 2px 10px; font-size: var(--ui-font-size-xs, 12px);":e==="lg"?"padding: 8px 20px; font-size: var(--ui-font-size-md, 16px);":"padding: 5px 14px; font-size: var(--ui-font-size-sm, 14px);"}
+        }
+        ::slotted(ui-segment:hover:not([aria-disabled="true"])) { color: var(--ui-color-text-primary, #000000); }
+        ::slotted(ui-segment[aria-checked="true"]) {
+          background-color: var(--ui-color-bg-surface, #ffffff);
+          color: var(--ui-color-primary, #ff5500);
+          box-shadow: 0 0 0 var(--ui-border-width-thin, 1px) var(--ui-color-primary, #ff5500);
+        }
+        ::slotted(ui-segment[aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; }
+        ::slotted(ui-segment:focus-visible) {
+          box-shadow: 0 0 0 2px var(--ui-color-bg-canvas, #ffffff), 0 0 0 4px var(--ui-color-focus-ring, #ff5500);
+        }
+      </style>
+      <slot></slot>
+    `,(t=this.root.querySelector("slot"))==null||t.addEventListener("slotchange",()=>this.refresh())}}class tt extends HTMLElement{connectedCallback(){var e;this.setAttribute("role","radio"),this.hasAttribute("aria-checked")||this.setAttribute("aria-checked","false"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),(e=this.closest("ui-segmented"))==null||e.refresh()}static get observedAttributes(){return["value","disabled"]}attributeChangedCallback(){var e;(e=this.closest("ui-segmented"))==null||e.refresh()}}customElements.get("ui-segmented")||customElements.define("ui-segmented",Z);customElements.get("ui-segment")||customElements.define("ui-segment",tt);class et extends l{static get observedAttributes(){return["current","orientation","aria-label"]}get current(){const e=parseInt(this.getAttribute("current")||"0",10);return Number.isFinite(e)?e:0}set current(e){this.setAttribute("current",String(e))}connectedCallback(){super.connectedCallback(),this.setAttribute("role","list"),this.refresh()}attributeChangedCallback(e,t,r){super.attributeChangedCallback(e,t,r),this.refresh()}refresh(){const e=Array.from(this.querySelectorAll("ui-step")),t=this.current;e.forEach((r,i)=>{const s=r.getAttribute("status")==="error"?"error":i<t?"done":i===t?"active":"pending";r.setAttribute("data-state",s),r.setAttribute("data-index",String(i+1)),r.toggleAttribute("data-last",i===e.length-1),r.toggleAttribute("data-vertical",this.getAttribute("orientation")==="vertical"),s==="active"?r.setAttribute("aria-current","step"):r.removeAttribute("aria-current")})}render(){var t;const e=this.getAttribute("orientation")==="vertical";this.root.innerHTML=`
+      <style>
+        :host {
+          display: flex;
+          flex-direction: ${e?"column":"row"};
+          align-items: ${e?"stretch":"flex-start"};
+          gap: 0;
+          font-family: var(--ui-font-family-base, sans-serif);
+        }
+      </style>
+      <slot></slot>
+    `,(t=this.root.querySelector("slot"))==null||t.addEventListener("slotchange",()=>this.refresh())}}class it extends l{static get observedAttributes(){return["label","description","status","data-state","data-index","data-last","data-vertical"]}connectedCallback(){var e;super.connectedCallback(),this.setAttribute("role","listitem"),(e=this.closest("ui-stepper"))==null||e.refresh()}attributeChangedCallback(e,t,r){var i;super.attributeChangedCallback(e,t,r),e.startsWith("data-")||(i=this.closest("ui-stepper"))==null||i.refresh()}render(){const e=this.getAttribute("data-state")||"pending",t=this.getAttribute("data-index")||"",r=this.hasAttribute("data-last"),i=this.hasAttribute("data-vertical"),o=this.getAttribute("label")||"",s=this.getAttribute("description")||"",n=e==="done"?'<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>':e==="error"?"!":this.escapeHtml(t),d={done:"completed",active:"current step",pending:"upcoming",error:"error"}[e]||"";this.root.innerHTML=`
+      <style>
+        :host {
+          display: flex;
+          flex: ${r||i?"0 0 auto":"1 1 0"};
+          flex-direction: ${i?"row":"column"};
+          min-width: 0;
+          font-family: var(--ui-font-family-base, sans-serif);
+        }
+        .row { display: flex; align-items: center; gap: var(--ui-space-2, 8px); ${i?"flex-direction: column; align-items: center;":""} }
+        .marker {
+          flex: none;
+          width: 28px; height: 28px;
+          box-sizing: border-box;
+          display: inline-flex; align-items: center; justify-content: center;
+          border-radius: var(--ui-radius-full, 9999px);
+          border: var(--ui-border-width-thin, 1px) solid var(--ui-color-border-strong, #000000);
+          background-color: var(--ui-color-bg-surface, #ffffff);
+          color: var(--ui-color-text-secondary, #616161);
+          font-size: var(--ui-font-size-xs, 12px);
+          font-weight: var(--ui-font-weight-semibold, 600);
+        }
+        .done .marker { background-color: var(--ui-color-primary, #ff5500); border-color: var(--ui-color-primary, #ff5500); color: var(--ui-color-primary-contrast, #ffffff); }
+        .active .marker { border-color: var(--ui-color-primary, #ff5500); color: var(--ui-color-primary, #ff5500); box-shadow: 0 0 0 3px var(--ui-color-primary-subtle, #fff3e6); }
+        .error .marker { background-color: var(--ui-color-error, #d32f2f); border-color: var(--ui-color-error, #d32f2f); color: var(--ui-color-error-contrast, #ffffff); }
+        .line {
+          flex: 1 1 auto;
+          ${i?"width: 2px; min-height: 20px; margin: 0 auto;":"height: 2px; min-width: 16px;"}
+          background-color: var(--ui-color-border, #e0e0e0);
+          ${r?"display: none;":""}
+        }
+        .done .line { background-color: var(--ui-color-primary, #ff5500); }
+        .text { ${i?"margin-left: var(--ui-space-3, 12px); padding-bottom: var(--ui-space-4, 16px);":"margin-top: var(--ui-space-2, 8px); padding-right: var(--ui-space-2, 8px);"} min-width: 0; }
+        .label { font-size: var(--ui-font-size-sm, 14px); font-weight: var(--ui-font-weight-medium, 500); color: var(--ui-color-text-primary, #000000); }
+        .pending .label { color: var(--ui-color-text-secondary, #616161); }
+        .error .label { color: var(--ui-color-error, #d32f2f); }
+        .desc { font-size: var(--ui-font-size-xs, 12px); color: var(--ui-color-text-secondary, #616161); }
+        .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+        .wrap { display: flex; ${i?"flex-direction: row;":"flex-direction: column; flex: 1;"} }
+        .vrail { display: flex; flex-direction: column; align-items: center; }
+      </style>
+      ${i?`<div class="wrap ${e}">
+               <div class="vrail"><span class="marker" aria-hidden="true">${n}</span><span class="line"></span></div>
+               <div class="text"><div class="label">${this.escapeHtml(o)}<span class="vh"> (${d})</span></div>${s?`<div class="desc">${this.escapeHtml(s)}</div>`:""}<slot></slot></div>
+             </div>`:`<div class="wrap ${e}">
+               <div class="row"><span class="marker" aria-hidden="true">${n}</span><span class="line"></span></div>
+               <div class="text"><div class="label">${this.escapeHtml(o)}<span class="vh"> (${d})</span></div>${s?`<div class="desc">${this.escapeHtml(s)}</div>`:""}<slot></slot></div>
+             </div>`}
+    `}}customElements.get("ui-stepper")||customElements.define("ui-stepper",et);customElements.get("ui-step")||customElements.define("ui-step",it);class rt extends l{static get observedAttributes(){return["variant","size","removable","disabled","remove-label"]}get removable(){return this.getBooleanAttr("removable")}set removable(e){this.setBooleanAttr("removable",e)}get disabled(){return this.getBooleanAttr("disabled")}set disabled(e){this.setBooleanAttr("disabled",e)}connectedCallback(){super.connectedCallback(),this.listen("keydown",this.handleKeyDown.bind(this))}requestRemove(){this.disabled||!this.removable||this.emit("remove")}handleKeyDown(e){if(e.key==="Delete"||e.key==="Backspace"){if(this.disabled||!this.removable)return;e.preventDefault(),this.requestRemove()}}render(){var s;const e=["neutral","primary","success","warning","error"].includes(this.getAttribute("variant")||"")?this.getAttribute("variant"):"neutral",t=this.getAttribute("size")==="sm"?"sm":"md",r=this.removable,i=this.disabled,o=this.getAttribute("remove-label")||"Remove";r&&!i?this.setAttribute("tabindex","0"):this.removeAttribute("tabindex"),this.setAttribute("aria-disabled",String(i)),this.root.innerHTML=`
+      <style>
+        :host { display: inline-flex; font-family: var(--ui-font-family-base, sans-serif); outline: none; }
+        :host(:focus-visible) .chip { box-shadow: 0 0 0 2px var(--ui-color-bg-canvas, #ffffff), 0 0 0 4px var(--ui-color-focus-ring, #ff5500); }
+        .chip {
+          display: inline-flex;
+          align-items: center;
+          gap: var(--ui-space-1, 4px);
+          box-sizing: border-box;
+          max-width: 100%;
+          border-radius: var(--ui-radius-full, 9999px);
+          border: var(--ui-border-width-thin, 1px) solid var(--ui-color-border, #e0e0e0);
+          background-color: var(--ui-color-bg-muted, #f5f5f5);
+          color: var(--ui-color-text-primary, #000000);
+          font-weight: var(--ui-font-weight-medium, 500);
+          line-height: var(--ui-line-height-none, 1);
+          user-select: none;
+        }
+        .chip.md { padding: 5px 10px; font-size: var(--ui-font-size-sm, 14px); }
+        .chip.sm { padding: 3px 8px; font-size: var(--ui-font-size-xs, 12px); }
+        .chip.primary { background-color: var(--ui-color-primary-subtle, #fff3e6); border-color: var(--ui-color-primary, #ff5500); color: var(--ui-color-primary-active, #cc4400); }
+        .chip.success { background-color: var(--ui-color-success-bg, #e8f5e9); border-color: var(--ui-color-success, #1b873f); color: var(--ui-color-success, #1b873f); }
+        .chip.warning { background-color: var(--ui-color-warning-bg, #fffbeb); border-color: var(--ui-color-warning, #d97706); color: var(--ui-color-warning, #d97706); }
+        .chip.error { background-color: var(--ui-color-error-bg, #fde8e8); border-color: var(--ui-color-error, #d32f2f); color: var(--ui-color-error, #d32f2f); }
+        .chip.disabled { opacity: 0.5; cursor: not-allowed; }
+        .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        button {
+          all: unset;
+          display: inline-flex; align-items: center; justify-content: center;
+          width: 16px; height: 16px;
+          margin-right: -4px;
+          border-radius: var(--ui-radius-full, 9999px);
+          cursor: pointer;
+          color: inherit;
+        }
+        button:hover { background-color: rgba(0, 0, 0, 0.12); }
+        button:focus-visible { box-shadow: 0 0 0 2px var(--ui-color-focus-ring, #ff5500); }
+        button[disabled] { cursor: not-allowed; }
+        svg { width: 10px; height: 10px; pointer-events: none; }
+      </style>
+      <span class="chip ${e} ${t} ${i?"disabled":""}">
+        <span class="label"><slot></slot></span>
+        ${r?`<button type="button" tabindex="-1" aria-label="${this.escapeHtml(o)}" ${i?"disabled":""}>
+                 <svg viewBox="0 0 10 10" aria-hidden="true"><path d="M2 2l6 6M8 2L2 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" fill="none"/></svg>
+               </button>`:""}
+      </span>
+    `,(s=this.root.querySelector("button"))==null||s.addEventListener("click",n=>{n.stopPropagation(),this.requestRemove()})}}customElements.get("ui-chip")||customElements.define("ui-chip",rt);class ot extends l{static get observedAttributes(){return["level","time"]}get level(){const e=this.getAttribute("level")||"info";return["info","success","warning","error","debug"].includes(e)?e:"info"}get time(){return this.getAttribute("time")||""}render(){const e=this.time;this.root.innerHTML=`
       <style>
         :host {
           display: flex;
@@ -1580,9 +1823,9 @@
         :host([level="debug"])   .msg { color: var(--ui-color-text-muted, #9e9e9e); }
       </style>
       <span class="marker" aria-hidden="true"></span>
-      ${t?`<span class="time">${this.escapeHtml(t)}</span>`:""}
+      ${e?`<span class="time">${this.escapeHtml(e)}</span>`:""}
       <span class="msg"><slot></slot></span>
-    `}}customElements.get("ui-log-item")||customElements.define("ui-log-item",W);class Y extends n{static get observedAttributes(){return["label","height","wrap","auto-scroll","max","empty"]}get label(){return this.getAttribute("label")||""}get height(){return this.getAttribute("height")||"220px"}get wrap(){return this.getBooleanAttr("wrap")}get autoScroll(){return this.getAttribute("auto-scroll")!=="false"}get max(){const t=parseInt(this.getAttribute("max")||"500",10);return Number.isFinite(t)&&t>0?t:500}get emptyText(){return this.getAttribute("empty")||"표시할 항목이 없습니다."}connectedCallback(){super.connectedCallback();const t=this.root.querySelector("slot");t==null||t.addEventListener("slotchange",()=>this.handleSlotChange())}items(){return Array.from(this.children).filter(t=>t.tagName.toLowerCase()==="ui-log-item")}handleSlotChange(){var s;const t=this.root.querySelector(".viewport"),e=t?t.scrollHeight-t.scrollTop-t.clientHeight<40:!0,r=this.items(),i=r.length-this.max;for(let o=0;o<i;o++)(s=r[o])==null||s.remove();t&&(e||this.autoScroll)&&(t.scrollTop=t.scrollHeight),this.updateEmpty(),this.updateCount()}updateEmpty(){const t=this.root.querySelector(".empty");t&&t.setAttribute("aria-hidden",this.items().length>0?"true":"false")}scrollDown(){const t=this.root.querySelector(".viewport");t&&(t.scrollTop=t.scrollHeight)}push(t,e,r){const i=document.createElement("ui-log-item");i.setAttribute("level",t),r&&i.setAttribute("time",r),i.textContent=e,this.appendChild(i)}clear(){this.items().forEach(t=>t.remove()),this.updateEmpty()}render(){var i;const t=this.label,e=`height: ${this.height.replace(/["<>]/g,"")};`,r=this.escapeHtml(this.emptyText);this.root.innerHTML=`
+    `}}customElements.get("ui-log-item")||customElements.define("ui-log-item",ot);class st extends l{static get observedAttributes(){return["label","height","wrap","auto-scroll","max","empty"]}get label(){return this.getAttribute("label")||""}get height(){return this.getAttribute("height")||"220px"}get wrap(){return this.getBooleanAttr("wrap")}get autoScroll(){return this.getAttribute("auto-scroll")!=="false"}get max(){const e=parseInt(this.getAttribute("max")||"500",10);return Number.isFinite(e)&&e>0?e:500}get emptyText(){return this.getAttribute("empty")||"표시할 항목이 없습니다."}connectedCallback(){super.connectedCallback();const e=this.root.querySelector("slot");e==null||e.addEventListener("slotchange",()=>this.handleSlotChange())}items(){return Array.from(this.children).filter(e=>e.tagName.toLowerCase()==="ui-log-item")}handleSlotChange(){var o;const e=this.root.querySelector(".viewport"),t=e?e.scrollHeight-e.scrollTop-e.clientHeight<40:!0,r=this.items(),i=r.length-this.max;for(let s=0;s<i;s++)(o=r[s])==null||o.remove();e&&(t||this.autoScroll)&&(e.scrollTop=e.scrollHeight),this.updateEmpty(),this.updateCount()}updateEmpty(){const e=this.root.querySelector(".empty");e&&e.setAttribute("aria-hidden",this.items().length>0?"true":"false")}scrollDown(){const e=this.root.querySelector(".viewport");e&&(e.scrollTop=e.scrollHeight)}push(e,t,r){const i=document.createElement("ui-log-item");i.setAttribute("level",e),r&&i.setAttribute("time",r),i.textContent=t,this.appendChild(i)}clear(){this.items().forEach(e=>e.remove()),this.updateEmpty()}render(){var i;const e=this.label,t=`height: ${this.height.replace(/["<>]/g,"")};`,r=this.escapeHtml(this.emptyText);this.root.innerHTML=`
       <style>
         :host {
           display: block;
@@ -1631,7 +1874,7 @@
         .copy-btn:focus-visible { box-shadow: 0 0 0 2px var(--ui-color-focus-ring, #ff5500); }
         .viewport {
           overflow: auto;
-          ${e}
+          ${t}
           padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px);
         }
         .empty {
@@ -1643,10 +1886,10 @@
         }
         .empty[aria-hidden="true"] { display: none; }
       </style>
-      <div class="log" role="log" aria-label="${this.escapeHtml(t||"로그")}" aria-live="polite">
+      <div class="log" role="log" aria-label="${this.escapeHtml(e||"로그")}" aria-live="polite">
         <div class="head">
           <span class="bar" aria-hidden="true"></span>
-          <span class="label">${this.escapeHtml(t||"로그")}</span>
+          <span class="label">${this.escapeHtml(e||"로그")}</span>
           <span class="count"></span>
           <span class="spacer"></span>
           <button class="copy-btn" title="전체 복사">복사</button>
@@ -1656,5 +1899,5 @@
           <div class="empty">${r}</div>
         </div>
       </div>
-    `,(i=this.root.querySelector(".copy-btn"))==null||i.addEventListener("click",()=>{var l;const s=this.items().map(d=>d.textContent??"").join(`
-`);(l=navigator.clipboard)!=null&&l.writeText&&navigator.clipboard.writeText(s).catch(()=>{});const o=this.root.querySelector(".copy-btn");o&&(o.textContent="복사됨",window.setTimeout(()=>{o.textContent="복사"},1400)),this.emit("copy",{text:s})}),this.updateCount(),this.updateEmpty()}updateCount(){const t=this.root.querySelector(".count");t&&(t.textContent=this.items().length>0?`${this.items().length}건`:"")}}customElements.get("ui-log")||customElements.define("ui-log",Y);exports.FocusTrap=g;exports.UIAccordion=q;exports.UIAccordionItem=y;exports.UIAlert=H;exports.UIAvatar=F;exports.UIBadge=D;exports.UIBreadcrumbItem=N;exports.UIBreadcrumbs=K;exports.UIButton=k;exports.UICard=M;exports.UICheckbox=A;exports.UIDrawer=R;exports.UIDropdown=O;exports.UIDropdownItem=P;exports.UIElement=n;exports.UIInput=w;exports.UILog=Y;exports.UILogItem=W;exports.UIModal=$;exports.UINavbar=X;exports.UIOption=C;exports.UIPagination=_;exports.UIProgress=j;exports.UIRadio=x;exports.UISelect=E;exports.UISkeleton=V;exports.UISpinner=U;exports.UISwitch=z;exports.UITab=I;exports.UITabPanel=B;exports.UITable=v;exports.UITabs=T;exports.UIToast=S;exports.UITooltip=L;
+    `,(i=this.root.querySelector(".copy-btn"))==null||i.addEventListener("click",()=>{var n;const o=this.items().map(d=>d.textContent??"").join(`
+`);(n=navigator.clipboard)!=null&&n.writeText&&navigator.clipboard.writeText(o).catch(()=>{});const s=this.root.querySelector(".copy-btn");s&&(s.textContent="복사됨",window.setTimeout(()=>{s.textContent="복사"},1400)),this.emit("copy",{text:o})}),this.updateCount(),this.updateEmpty()}updateCount(){const e=this.root.querySelector(".count");e&&(e.textContent=this.items().length>0?`${this.items().length}건`:"")}}customElements.get("ui-log")||customElements.define("ui-log",st);exports.FocusTrap=g;exports.UIAccordion=K;exports.UIAccordionItem=E;exports.UIAlert=j;exports.UIAvatar=N;exports.UIBadge=q;exports.UIBreadcrumbItem=X;exports.UIBreadcrumbs=W;exports.UIButton=S;exports.UICard=O;exports.UICheckbox=z;exports.UIChip=rt;exports.UIDrawer=Y;exports.UIDropdown=P;exports.UIDropdownItem=_;exports.UIElement=l;exports.UIEmptyState=Q;exports.UIInput=A;exports.UILog=st;exports.UILogItem=ot;exports.UIModal=T;exports.UINavbar=J;exports.UIOption=I;exports.UIPagination=V;exports.UIProgress=R;exports.UIRadio=m;exports.UISegment=tt;exports.UISegmented=Z;exports.UISelect=L;exports.UISkeleton=G;exports.UISpinner=F;exports.UIStep=it;exports.UIStepper=et;exports.UISwitch=C;exports.UITab=U;exports.UITabPanel=M;exports.UITable=x;exports.UITabs=H;exports.UITextarea=$;exports.UIToast=B;exports.UITooltip=D;