@cubit-ui/core 1.0.0 → 1.1.0

package/dist/index.js

@@ -1,56 +1,73 @@
-var k = Object.defineProperty;
-var w = (a, t, e) => t in a ? k(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
-var c = (a, t, e) => w(a, typeof t != "symbol" ? t + "" : t, e);
-class n extends HTMLElement {
+var S = Object.defineProperty;
+var L = (a, e, t) => e in a ? S(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var c = (a, e, t) => L(a, typeof e != "symbol" ? e + "" : e, t);
+class l extends HTMLElement {
   constructor() {
     super();
     c(this, "root");
+    c(this, "internals", null);
+    /** 상위 <fieldset disabled> 등 폼이 부여한 비활성 상태 (속성 disabled 와 별개) */
+    c(this, "formDisabled", !1);
     c(this, "lifecycleAbort", null);
-    this.root = this.attachShadow({ mode: "open" });
+    if (this.root = this.attachShadow({ mode: "open" }), this.constructor.formAssociated && typeof this.attachInternals == "function")
+      try {
+        this.internals = this.attachInternals();
+      } catch {
+        this.internals = null;
+      }
+  }
+  /** 폼 제출 값 설정. null 이면 제출에서 제외된다. */
+  setFormValue(t) {
+    var r;
+    (r = this.internals) == null || r.setFormValue(t);
+  }
+  /** <fieldset disabled> 등으로 폼이 비활성/활성 상태를 바꿀 때 브라우저가 호출한다. */
+  formDisabledCallback(t) {
+    this.formDisabled = t, this.render();
   }
   connectedCallback() {
-    var e;
-    (e = this.lifecycleAbort) == null || e.abort(), this.lifecycleAbort = new AbortController(), this.render();
+    var t;
+    (t = this.lifecycleAbort) == null || t.abort(), this.lifecycleAbort = new AbortController(), this.render();
   }
   disconnectedCallback() {
-    var e;
-    (e = this.lifecycleAbort) == null || e.abort(), this.lifecycleAbort = null;
+    var t;
+    (t = this.lifecycleAbort) == null || t.abort(), this.lifecycleAbort = null;
   }
-  listen(e, r) {
+  listen(t, r) {
     var i;
-    this.addEventListener(e, r, { signal: (i = this.lifecycleAbort) == null ? void 0 : i.signal });
+    this.addEventListener(t, r, { signal: (i = this.lifecycleAbort) == null ? void 0 : i.signal });
   }
   /**
    * HTML 템플릿에 삽입되는 속성/텍스트 값 이스케이프 (속성 주입·XSS 방지)
    */
-  escapeHtml(e) {
-    return String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  escapeHtml(t) {
+    return String(t ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
   }
   /**
    * href/src 용: javascript:, data:, vbscript: 스킴은 차단하고 이스케이프한다.
    */
-  safeUrl(e) {
-    const r = e.trim(), i = r.replace(/[\u0000-\u0020]/g, "").match(/^([a-z][a-z0-9+.-]*):/i);
+  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(e, r, i) {
+  attributeChangedCallback(t, r, i) {
     r !== i && this.render();
   }
   /**
    * shadow 경계를 넘어 bubbling된 클릭 등의 이벤트에서 실제 클릭 지점 원소를 얻는다.
    * (e.target은 shadow를 지나며 호스트로 retarget되므로 내부 클릭 판별에 쓸 수 없다)
    */
-  composedTarget(e) {
-    const r = e.composedPath();
+  composedTarget(t) {
+    const r = t.composedPath();
     for (const i of r)
       if (i instanceof HTMLElement) return i;
-    return e.target;
+    return t.target;
   }
   /**
    * 커스텀 이벤트 발화 (bubbles: true, composed: true)
    */
-  emit(e, r) {
-    const i = new CustomEvent(e, {
+  emit(t, r) {
+    const i = new CustomEvent(t, {
       bubbles: !0,
       cancelable: !0,
       composed: !0,
@@ -61,21 +78,23 @@ class n extends HTMLElement {
   /**
    * 불리언 속성 헬퍼
    */
-  getBooleanAttr(e) {
-    return this.hasAttribute(e);
+  getBooleanAttr(t) {
+    return this.hasAttribute(t);
   }
-  setBooleanAttr(e, r) {
-    r ? this.setAttribute(e, "") : this.removeAttribute(e);
+  setBooleanAttr(t, r) {
+    r ? this.setAttribute(t, "") : this.removeAttribute(t);
   }
 }
+/** 폼 참여(name/value 제출, reset, fieldset disabled)가 필요한 컴포넌트는 true 로 오버라이드 */
+c(l, "formAssociated", !1);
 const g = class g {
-  constructor(t) {
+  constructor(e) {
     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);
+    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;
@@ -84,18 +103,18 @@ const g = class g {
     this.active && (document.removeEventListener("keydown", this.handleKeyDownBound), this.active = !1);
   }
   updateFocusableElements() {
-    const t = Array.from(
+    const e = Array.from(
       this.element.querySelectorAll(g.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;
+    ).filter((t) => t.offsetParent !== null || t.offsetWidth > 0 || t.offsetHeight > 0);
+    this.firstFocusableEl = e[0] || null, this.lastFocusableEl = e[e.length - 1] || null;
   }
-  handleKeyDown(t) {
-    if (t.key === "Tab") {
+  handleKeyDown(e) {
+    if (e.key === "Tab") {
       if (this.updateFocusableElements(), !this.firstFocusableEl || !this.lastFocusableEl) {
-        t.preventDefault();
+        e.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());
+      e.shiftKey ? (document.activeElement === this.firstFocusableEl || this.element === document.activeElement) && (this.lastFocusableEl.focus(), e.preventDefault()) : document.activeElement === this.lastFocusableEl && (this.firstFocusableEl.focus(), e.preventDefault());
     }
   }
 };
@@ -109,8 +128,8 @@ c(g, "FOCUSABLE_SELECTORS", [
   "ui-button:not([disabled])",
   "ui-input:not([disabled])"
 ].join(","));
-let v = g;
-class A extends n {
+let y = g;
+class B extends l {
   static get observedAttributes() {
     return ["variant", "size", "disabled", "type", "aria-label"];
   }
@@ -123,14 +142,14 @@ class A extends n {
   get disabled() {
     return this.getBooleanAttr("disabled");
   }
-  set disabled(t) {
-    this.setBooleanAttr("disabled", t);
+  set disabled(e) {
+    this.setBooleanAttr("disabled", e);
   }
   get type() {
     return this.getAttribute("type") || "button";
   }
   render() {
-    const t = this.variant, e = this.size, r = this.disabled, i = this.getAttribute("aria-label") || "";
+    const e = this.variant, t = this.size, r = this.disabled, i = this.getAttribute("aria-label") || "";
     this.root.innerHTML = `
       <style>
         :host {
@@ -233,7 +252,7 @@ class A extends n {
         }
       </style>
       <button
-        class="${t} ${e}"
+        class="${e} ${t}"
         type="${this.type}"
         ${r ? "disabled" : ""}
         ${r ? 'aria-disabled="true"' : ""}
@@ -242,24 +261,28 @@ class A extends n {
         <slot></slot>
       </button>
     `;
-    const s = this.root.querySelector("button");
-    s && (s.onclick = (o) => {
+    const o = this.root.querySelector("button");
+    o && (o.onclick = (s) => {
       if (this.disabled) {
-        o.preventDefault(), o.stopImmediatePropagation();
+        s.preventDefault(), s.stopImmediatePropagation();
         return;
       }
       if (this.type === "submit") {
-        const l = this.closest("form");
-        l && l.requestSubmit();
+        const n = this.closest("form");
+        n && n.requestSubmit();
       } else if (this.type === "reset") {
-        const l = this.closest("form");
-        l && l.reset();
+        const n = this.closest("form");
+        n && n.reset();
       }
     });
   }
 }
-customElements.get("ui-button") || customElements.define("ui-button", A);
-class z extends n {
+customElements.get("ui-button") || customElements.define("ui-button", B);
+class A extends l {
+  constructor() {
+    super(...arguments);
+    c(this, "defaultValue", "");
+  }
   static get observedAttributes() {
     return ["value", "placeholder", "type", "disabled", "readonly", "size", "invalid", "aria-label"];
   }
@@ -269,11 +292,11 @@ class z extends n {
   }
   set value(t) {
     this.setAttribute("value", t);
-    const e = this.root.querySelector("input");
-    e && (e.value = t);
+    const r = this.root.querySelector("input");
+    r && (r.value = t);
   }
   get disabled() {
-    return this.getBooleanAttr("disabled");
+    return this.getBooleanAttr("disabled") || this.formDisabled;
   }
   set disabled(t) {
     this.setBooleanAttr("disabled", t);
@@ -288,26 +311,34 @@ class z extends n {
    * value 속성 변경은 내부 input 값을 제자리 갱신한다.
    * 전체 재렌더를 하면 input 요소가 교체되어 포커스·캐릿이 사라진다.
    */
-  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)
+  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 {
-              i.setSelectionRange(s, o);
+              o.setSelectionRange(s, n);
             } catch {
             }
         }
         return;
       }
     }
-    super.attributeChangedCallback(t, e, r);
+    super.attributeChangedCallback(t, r, i);
+  }
+  connectedCallback() {
+    this.defaultValue = this.getAttribute("value") || "", super.connectedCallback();
+  }
+  /** <form>.reset() 시 초기값으로 복원 */
+  formResetCallback() {
+    this.value = this.defaultValue;
   }
   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 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;
@@ -375,31 +406,36 @@ class z extends n {
           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 });
+    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 });
     });
   }
 }
-customElements.get("ui-input") || customElements.define("ui-input", z);
-class E extends n {
+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"];
   }
@@ -416,13 +452,13 @@ class E extends n {
     this.setBooleanAttr("indeterminate", t);
   }
   get disabled() {
-    return this.getBooleanAttr("disabled");
+    return this.getBooleanAttr("disabled") || this.formDisabled;
   }
   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));
+    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());
@@ -434,12 +470,16 @@ class E extends n {
     }
     this.toggle();
   }
+  /** <form>.reset() 시 초기 상태로 복원 */
+  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, 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 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;
@@ -492,7 +532,7 @@ class E extends n {
           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>
@@ -504,8 +544,13 @@ class E extends n {
     `;
   }
 }
-customElements.get("ui-checkbox") || customElements.define("ui-checkbox", E);
-class x extends n {
+c(z, "formAssociated", !0);
+customElements.get("ui-checkbox") || customElements.define("ui-checkbox", z);
+const m = class m extends l {
+  constructor() {
+    super(...arguments);
+    c(this, "defaultChecked", !1);
+  }
   static get observedAttributes() {
     return ["checked", "disabled", "name", "value"];
   }
@@ -516,7 +561,7 @@ class x extends n {
     this.setBooleanAttr("checked", t);
   }
   get disabled() {
-    return this.getBooleanAttr("disabled");
+    return this.getBooleanAttr("disabled") || this.formDisabled;
   }
   set disabled(t) {
     this.setBooleanAttr("disabled", t);
@@ -528,7 +573,7 @@ class x extends n {
     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));
+    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) {
@@ -540,16 +585,20 @@ class x extends n {
   handleKeyDown(t) {
     this.disabled || (t.key === " " || t.key === "Enter") && (t.preventDefault(), this.select());
   }
+  /** <form>.reset() 시 초기 상태로 복원 */
+  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((i) => {
-      i !== this && i instanceof x && (i.checked = !1, i.setAttribute("tabindex", "-1"));
+    t && this.getRootNode().querySelectorAll(`ui-radio[name="${CSS.escape(t)}"]`).forEach((o) => {
+      o !== this && o instanceof m && (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, e = this.disabled;
-    this.setAttribute("aria-checked", String(t)), this.setAttribute("aria-disabled", String(e)), this.root.innerHTML = `
+    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;
@@ -605,11 +654,17 @@ class x extends n {
       <span class="label"><slot></slot></span>
     `;
   }
-}
-customElements.get("ui-radio") || customElements.define("ui-radio", x);
-class C extends n {
+};
+c(m, "formAssociated", !0);
+let k = m;
+customElements.get("ui-radio") || customElements.define("ui-radio", k);
+class C extends l {
+  constructor() {
+    super(...arguments);
+    c(this, "defaultChecked", !1);
+  }
   static get observedAttributes() {
-    return ["checked", "disabled", "aria-label"];
+    return ["checked", "disabled", "aria-label", "value"];
   }
   get checked() {
     return this.getBooleanAttr("checked");
@@ -618,13 +673,13 @@ class C extends n {
     this.setBooleanAttr("checked", t);
   }
   get disabled() {
-    return this.getBooleanAttr("disabled");
+    return this.getBooleanAttr("disabled") || this.formDisabled;
   }
   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));
+    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) {
@@ -636,12 +691,16 @@ class C extends n {
   handleKeyDown(t) {
     this.disabled || (t.key === " " || t.key === "Enter") && (t.preventDefault(), this.toggle());
   }
+  /** <form>.reset() 시 초기 상태로 복원 */
+  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, e = this.disabled;
-    this.setAttribute("aria-checked", String(t)), this.setAttribute("aria-disabled", String(e)), this.setAttribute("tabindex", e ? "-1" : "0"), this.root.innerHTML = `
+    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;
@@ -702,8 +761,9 @@ class C extends n {
     `;
   }
 }
+c(C, "formAssociated", !0);
 customElements.get("ui-switch") || customElements.define("ui-switch", C);
-class $ extends n {
+class T extends l {
   constructor() {
     super();
     c(this, "_isOpen", !1);
@@ -718,14 +778,14 @@ class $ extends n {
   get value() {
     return this._selectedValue || this.getAttribute("value") || "";
   }
-  set value(e) {
-    this._selectedValue = e, this.setAttribute("value", e), this.updateSelectedLabel(), this.render();
+  set value(t) {
+    this._selectedValue = t, this.setAttribute("value", t), this.updateSelectedLabel(), this.render();
   }
   get disabled() {
     return this.getBooleanAttr("disabled");
   }
-  set disabled(e) {
-    this.setBooleanAttr("disabled", e);
+  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));
@@ -733,11 +793,11 @@ class $ extends n {
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClickBound);
   }
-  handleDocumentClick(e) {
-    !this.contains(e.target) && !this.root.contains(e.target) && this.close();
+  handleDocumentClick(t) {
+    !this.contains(t.target) && !this.root.contains(t.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()));
+  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());
@@ -753,7 +813,7 @@ class $ extends n {
     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";
+    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 {
@@ -812,7 +872,7 @@ class $ extends n {
           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;
         }
@@ -827,10 +887,10 @@ class $ extends n {
         }
       </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>
@@ -842,26 +902,26 @@ class $ extends n {
         <slot></slot>
       </div>
     `;
-    const l = this.root.querySelector(".trigger");
-    l && l.addEventListener("click", () => this.toggle());
+    const n = this.root.querySelector(".trigger");
+    n && n.addEventListener("click", () => this.toggle());
     const d = this.root.querySelector("slot");
-    d && d.addEventListener("click", (u) => {
-      const h = this.composedTarget(u).closest("ui-option");
+    d && d.addEventListener("click", (b) => {
+      const h = this.composedTarget(b).closest("ui-option");
       if (h) {
-        const b = h.getAttribute("value") || "";
-        this.value = b, this.close(), this.emit("change", { value: b });
+        const p = h.getAttribute("value") || "";
+        this.value = p, this.close(), this.emit("change", { value: p });
       }
     });
   }
 }
-class L extends HTMLElement {
+class H extends HTMLElement {
   connectedCallback() {
     this.setAttribute("role", "option");
   }
 }
-customElements.get("ui-select") || customElements.define("ui-select", $);
-customElements.get("ui-option") || customElements.define("ui-option", L);
-class S extends n {
+customElements.get("ui-select") || customElements.define("ui-select", T);
+customElements.get("ui-option") || customElements.define("ui-option", H);
+class D extends l {
   constructor() {
     super();
     c(this, "focusTrap", null);
@@ -874,14 +934,14 @@ class S extends n {
   get open() {
     return this.getBooleanAttr("open");
   }
-  set open(e) {
-    this.setBooleanAttr("open", e);
+  set open(t) {
+    this.setBooleanAttr("open", t);
   }
   get title() {
     return this.getAttribute("title") || "";
   }
-  set title(e) {
-    this.setAttribute("title", e);
+  set title(t) {
+    this.setAttribute("title", t);
   }
   connectedCallback() {
     super.connectedCallback(), document.addEventListener("keydown", this.handleKeyDownBound), this.open && this.setupFocusTrap();
@@ -889,26 +949,26 @@ class S extends n {
   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());
+  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 v(this.root)), this.focusTrap.activate();
+      this.focusTrap || (this.focusTrap = new y(this.root)), this.focusTrap.activate();
     }, 0);
   }
-  handleKeyDown(e) {
-    this.open && e.key === "Escape" && (e.preventDefault(), this.close());
+  handleKeyDown(t) {
+    this.open && t.key === "Escape" && (t.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";
+    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 {
@@ -1014,16 +1074,16 @@ class S extends n {
         </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", () => {
+    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", S);
-class T extends n {
+customElements.get("ui-modal") || customElements.define("ui-modal", D);
+class M extends l {
   constructor() {
     super(...arguments);
     c(this, "timer", null);
@@ -1037,8 +1097,8 @@ class T extends n {
   get open() {
     return this.getBooleanAttr("open");
   }
-  set open(e) {
-    this.setBooleanAttr("open", e);
+  set open(t) {
+    this.setBooleanAttr("open", t);
   }
   get duration() {
     return parseInt(this.getAttribute("duration") || "4000", 10);
@@ -1049,8 +1109,8 @@ class T extends n {
   disconnectedCallback() {
     super.disconnectedCallback(), this.clearTimer();
   }
-  attributeChangedCallback(e, r, i) {
-    super.attributeChangedCallback(e, r, i), e === "open" && (this.open ? this.startTimer() : 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(() => {
@@ -1064,7 +1124,7 @@ class T extends n {
     this.open = !1, this.clearTimer(), this.emit("close");
   }
   render() {
-    const e = this.variant, r = this.open;
+    const t = this.variant, r = this.open;
     this.root.innerHTML = `
       <style>
         :host {
@@ -1128,7 +1188,7 @@ class T extends n {
           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">
@@ -1141,38 +1201,38 @@ class T extends n {
     i && i.addEventListener("click", () => this.close());
   }
 }
-customElements.get("ui-toast") || customElements.define("ui-toast", T);
-class B extends n {
+customElements.get("ui-toast") || customElements.define("ui-toast", M);
+class q extends l {
   static get observedAttributes() {
     return ["content", "position"];
   }
   get content() {
     return this.getAttribute("content") || "";
   }
-  set content(t) {
-    this.setAttribute("content", t);
+  set content(e) {
+    this.setAttribute("content", e);
   }
   get position() {
     return this.getAttribute("position") || "top";
   }
-  set position(t) {
-    this.setAttribute("position", t);
+  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", (t) => {
-      t.key === "Escape" && this.hide();
+    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 t = this.root.querySelector(".tooltip");
-    t && t.classList.add("visible");
+    const e = this.root.querySelector(".tooltip");
+    e && e.classList.add("visible");
   }
   hide() {
-    const t = this.root.querySelector(".tooltip");
-    t && t.classList.remove("visible");
+    const e = this.root.querySelector(".tooltip");
+    e && e.classList.remove("visible");
   }
   render() {
-    const t = this.content, e = this.position;
+    const e = this.content, t = this.position;
     this.root.innerHTML = `
       <style>
         :host {
@@ -1223,50 +1283,50 @@ class B extends n {
         }
       </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", B);
-class D extends n {
+customElements.get("ui-tooltip") || customElements.define("ui-tooltip", q);
+class I extends l {
   static get observedAttributes() {
     return ["value"];
   }
   get value() {
     return this.getAttribute("value") || "";
   }
-  set value(t) {
-    this.setAttribute("value", t), this.syncTabsAndPanels();
+  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(t) {
-    const e = t.target.closest("ui-tab");
-    if (e && !e.hasAttribute("disabled")) {
-      const r = e.getAttribute("value") || "";
+  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(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);
+  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 (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 });
+    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 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");
+    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") === t ? (i.removeAttribute("hidden"), i.setAttribute("tabindex", "0")) : i.setAttribute("hidden", "");
+      i.getAttribute("value") === e ? (i.removeAttribute("hidden"), i.setAttribute("tabindex", "0")) : i.setAttribute("hidden", "");
     });
   }
   render() {
@@ -1294,7 +1354,7 @@ class D extends n {
     `;
   }
 }
-class H extends HTMLElement {
+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();
   }
@@ -1305,19 +1365,19 @@ class H extends HTMLElement {
     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";
+    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 I extends HTMLElement {
+class F extends HTMLElement {
   connectedCallback() {
     this.setAttribute("role", "tabpanel");
   }
 }
-customElements.get("ui-tabs") || customElements.define("ui-tabs", D);
-customElements.get("ui-tab") || customElements.define("ui-tab", H);
-customElements.get("ui-tab-panel") || customElements.define("ui-tab-panel", I);
-class M extends n {
+customElements.get("ui-tabs") || customElements.define("ui-tabs", I);
+customElements.get("ui-tab") || customElements.define("ui-tab", U);
+customElements.get("ui-tab-panel") || customElements.define("ui-tab-panel", F);
+class j extends l {
   static get observedAttributes() {
     return ["variant", "size"];
   }
@@ -1328,7 +1388,7 @@ class M extends n {
     return this.getAttribute("size") || "md";
   }
   render() {
-    const t = this.variant, e = this.size;
+    const e = this.variant, t = this.size;
     this.root.innerHTML = `
       <style>
         :host {
@@ -1393,14 +1453,14 @@ class M extends n {
           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", M);
-class q extends n {
+customElements.get("ui-badge") || customElements.define("ui-badge", j);
+class K extends l {
   static get observedAttributes() {
     return ["size", "aria-label"];
   }
@@ -1411,7 +1471,7 @@ class q extends n {
     super.connectedCallback(), this.setAttribute("role", "status"), this.hasAttribute("aria-label") || this.setAttribute("aria-label", "Loading");
   }
   render() {
-    const t = this.size;
+    const e = this.size;
     this.root.innerHTML = `
       <style>
         :host {
@@ -1447,12 +1507,12 @@ class q extends n {
           100% { transform: rotate(360deg); }
         }
       </style>
-      <div class="spinner ${t}"></div>
+      <div class="spinner ${e}"></div>
     `;
   }
 }
-customElements.get("ui-spinner") || customElements.define("ui-spinner", q);
-class U extends n {
+customElements.get("ui-spinner") || customElements.define("ui-spinner", K);
+class O extends l {
   static get observedAttributes() {
     return ["variant", "title", "closable", "aria-label"];
   }
@@ -1462,8 +1522,8 @@ class U extends n {
   get title() {
     return this.getAttribute("title") || "";
   }
-  set title(t) {
-    this.setAttribute("title", t);
+  set title(e) {
+    this.setAttribute("title", e);
   }
   get closable() {
     return this.getBooleanAttr("closable");
@@ -1475,7 +1535,7 @@ class U extends n {
     this.style.display = "none", this.emit("close");
   }
   render() {
-    const t = this.variant, e = this.title, r = this.closable;
+    const e = this.variant, t = this.title, r = this.closable;
     this.root.innerHTML = `
       <style>
         :host {
@@ -1546,9 +1606,9 @@ class U extends n {
           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 ? `
@@ -1564,8 +1624,8 @@ class U extends n {
     i && i.addEventListener("click", () => this.close());
   }
 }
-customElements.get("ui-alert") || customElements.define("ui-alert", U);
-class O extends n {
+customElements.get("ui-alert") || customElements.define("ui-alert", O);
+class P extends l {
   static get observedAttributes() {
     return ["variant", "bordered"];
   }
@@ -1576,7 +1636,7 @@ class O extends n {
     return this.hasAttribute("bordered") || this.variant === "bordered";
   }
   render() {
-    const t = this.variant, e = this.bordered;
+    const e = this.variant, t = this.bordered;
     this.root.innerHTML = `
       <style>
         :host {
@@ -1587,7 +1647,7 @@ class O extends n {
         .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;
@@ -1616,7 +1676,7 @@ class O extends n {
           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>
@@ -1626,8 +1686,8 @@ class O extends n {
     `;
   }
 }
-customElements.get("ui-card") || customElements.define("ui-card", O);
-class _ extends n {
+customElements.get("ui-card") || customElements.define("ui-card", P);
+class _ extends l {
   static get observedAttributes() {
     return ["multiple"];
   }
@@ -1637,9 +1697,9 @@ class _ extends n {
   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);
+  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() {
@@ -1657,21 +1717,21 @@ class _ extends n {
     `;
   }
 }
-class y extends n {
+class E extends l {
   static get observedAttributes() {
     return ["open", "title", "disabled"];
   }
   get open() {
     return this.getBooleanAttr("open");
   }
-  set open(t) {
-    this.setBooleanAttr("open", t);
+  set open(e) {
+    this.setBooleanAttr("open", e);
   }
   get title() {
     return this.getAttribute("title") || "";
   }
-  set title(t) {
-    this.setAttribute("title", t);
+  set title(e) {
+    this.setAttribute("title", e);
   }
   get disabled() {
     return this.getBooleanAttr("disabled");
@@ -1680,7 +1740,7 @@ class y extends n {
     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;
+    const e = this.open, t = this.disabled, r = this.title;
     this.root.innerHTML = `
       <style>
         :host {
@@ -1725,7 +1785,7 @@ class y extends n {
           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);
@@ -1734,10 +1794,10 @@ class y extends n {
         }
       </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">
@@ -1749,15 +1809,15 @@ class y extends n {
       </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());
+    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", _);
-customElements.get("ui-accordion-item") || customElements.define("ui-accordion-item", y);
-class j extends n {
+customElements.get("ui-accordion-item") || customElements.define("ui-accordion-item", E);
+class R extends l {
   constructor() {
     super();
     c(this, "_isOpen", !1);
@@ -1770,8 +1830,8 @@ class j extends n {
   get open() {
     return this._isOpen;
   }
-  set open(e) {
-    this._isOpen = e, this.setBooleanAttr("open", e), this.render();
+  set open(t) {
+    this._isOpen = t, this.setBooleanAttr("open", t), this.render();
   }
   get placement() {
     return this.getAttribute("placement") || "bottom-start";
@@ -1785,11 +1845,11 @@ class j extends n {
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("click", this.handleDocClickBound);
   }
-  handleDocClick(e) {
-    !this.contains(e.target) && !this.root.contains(e.target) && this._isOpen && this.close();
+  handleDocClick(t) {
+    !this.contains(t.target) && !this.root.contains(t.target) && this._isOpen && this.close();
   }
-  handleKeyDown(e) {
-    e.key === "Escape" && this._isOpen && (e.preventDefault(), this.close());
+  handleKeyDown(t) {
+    t.key === "Escape" && this._isOpen && (t.preventDefault(), this.close());
   }
   toggle() {
     this.disabled || (this._isOpen ? this.close() : this.openDropdown());
@@ -1801,7 +1861,7 @@ class j extends n {
     this._isOpen && (this.open = !1, this.emit("close"));
   }
   render() {
-    const e = this._isOpen, r = this.placement;
+    const t = this._isOpen, r = this.placement;
     this.root.innerHTML = `
       <style>
         :host {
@@ -1817,7 +1877,7 @@ class j extends n {
           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;
@@ -1845,38 +1905,38 @@ class j extends n {
       <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();
+    i && i.addEventListener("click", (s) => {
+      s.stopPropagation(), this.toggle();
     });
   }
 }
-class K extends HTMLElement {
+class V extends HTMLElement {
   connectedCallback() {
     this.setAttribute("role", "menuitem"), this.setAttribute("tabindex", "0");
   }
 }
-customElements.get("ui-dropdown") || customElements.define("ui-dropdown", j);
-customElements.get("ui-dropdown-item") || customElements.define("ui-dropdown-item", K);
-class F extends n {
+customElements.get("ui-dropdown") || customElements.define("ui-dropdown", R);
+customElements.get("ui-dropdown-item") || customElements.define("ui-dropdown-item", V);
+class N extends l {
   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));
+  set value(e) {
+    this.setAttribute("value", String(e));
   }
   get max() {
     return parseFloat(this.getAttribute("max") || "100");
   }
-  set max(t) {
-    this.setAttribute("max", String(t));
+  set max(e) {
+    this.setAttribute("max", String(e));
   }
   get size() {
     return this.getAttribute("size") || "md";
@@ -1888,8 +1948,8 @@ class F extends n {
     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 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;
@@ -1913,7 +1973,7 @@ class F extends n {
 
         .bar {
           height: 100%;
-          width: ${e}%;
+          width: ${t}%;
           transition: width var(--ui-transition-normal);
         }
 
@@ -1937,43 +1997,43 @@ class F extends n {
     `;
   }
 }
-customElements.get("ui-progress") || customElements.define("ui-progress", F);
-class P extends n {
+customElements.get("ui-progress") || customElements.define("ui-progress", N);
+class W extends l {
   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();
+  set current(e) {
+    this.setAttribute("current", String(e)), this.render();
   }
   get total() {
     return parseInt(this.getAttribute("total") || "1", 10);
   }
-  set total(t) {
-    this.setAttribute("total", String(t)), this.render();
+  set total(e) {
+    this.setAttribute("total", String(e)), this.render();
   }
   get totalPages() {
-    const t = parseInt(this.getAttribute("page-size") || "10", 10);
-    return Math.max(1, Math.ceil(this.total / t));
+    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(t) {
-    const e = this.composedTarget(t).closest("button");
-    if (!e || e.hasAttribute("disabled")) return;
-    const r = e.dataset.action, i = e.dataset.page;
+  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(t) {
-    t !== this.current && (this.current = t, this.emit("change", { page: t }));
+  goToPage(e) {
+    e !== this.current && (this.current = e, this.emit("change", { page: e }));
   }
   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);
+    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 {
@@ -2019,29 +2079,29 @@ class P extends n {
           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) => `
+      (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", P);
-const f = class f extends n {
+customElements.get("ui-pagination") || customElements.define("ui-pagination", W);
+const v = class v extends l {
   static get observedAttributes() {
     return ["striped", "bordered", "hoverable"];
   }
@@ -2051,10 +2111,10 @@ const f = class f extends n {
    * ui-table 태그로 스코프가 한정되므로 외부 영향은 없다.
    */
   ensureLightCss() {
-    if (f.lightCssInjected) return;
-    f.lightCssInjected = !0;
-    const t = document.createElement("style");
-    t.setAttribute("data-cubit-ui-table", ""), t.textContent = `
+    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);
@@ -2081,7 +2141,7 @@ const f = class f extends n {
       ui-table[hoverable] tbody tr:hover td {
         background-color: var(--ui-color-bg-secondary-subtle, #ffe4c9);
       }
-    `, document.head.appendChild(t);
+    `, document.head.appendChild(e);
   }
   get striped() {
     return this.hasAttribute("striped");
@@ -2093,7 +2153,7 @@ const f = class f extends n {
     return this.hasAttribute("hoverable");
   }
   render() {
-    const t = this.striped, e = this.bordered, r = this.hoverable;
+    const e = this.striped, t = this.bordered, r = this.hoverable;
     this.ensureLightCss(), this.root.innerHTML = `
       <style>
         :host {
@@ -2108,7 +2168,7 @@ const f = class f extends n {
           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);
@@ -2119,12 +2179,12 @@ const f = class f extends n {
           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);
           }
@@ -2141,18 +2201,18 @@ const f = class f extends n {
     `;
   }
 };
-c(f, "lightCssInjected", !1);
-let m = f;
-customElements.get("ui-table") || customElements.define("ui-table", m);
-class N extends n {
+c(v, "lightCssInjected", !1);
+let w = v;
+customElements.get("ui-table") || customElements.define("ui-table", w);
+class X extends l {
   static get observedAttributes() {
     return ["src", "alt", "name", "size", "shape"];
   }
   get src() {
     return this.getAttribute("src") || "";
   }
-  set src(t) {
-    this.setAttribute("src", t);
+  set src(e) {
+    this.setAttribute("src", e);
   }
   get alt() {
     return this.getAttribute("alt") || "";
@@ -2166,13 +2226,13 @@ class N extends n {
   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();
+  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 t = this.src, e = this.alt || this.name, r = this.size, i = this.shape !== "square", s = this.getInitials(this.name);
+    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 {
@@ -2216,14 +2276,14 @@ class N extends n {
           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", N);
-class R extends n {
+customElements.get("ui-avatar") || customElements.define("ui-avatar", X);
+class Y extends l {
   static get observedAttributes() {
     return ["separator", "aria-label"];
   }
@@ -2232,16 +2292,16 @@ class R extends n {
   }
   connectedCallback() {
     super.connectedCallback(), this.setAttribute("role", "navigation");
-    const t = this.getAttribute("aria-label") || "Breadcrumbs";
-    this.setAttribute("aria-label", t), this.syncSeparators();
+    const e = this.getAttribute("aria-label") || "Breadcrumbs";
+    this.setAttribute("aria-label", e), this.syncSeparators();
   }
-  attributeChangedCallback(t, e, r) {
-    super.attributeChangedCallback(t, e, r), t === "separator" && this.syncSeparators();
+  attributeChangedCallback(e, t, r) {
+    super.attributeChangedCallback(e, t, r), e === "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));
+    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() {
@@ -2265,11 +2325,11 @@ class R extends n {
         <slot></slot>
       </ol>
     `;
-    const t = this.root.querySelector("slot");
-    t && t.addEventListener("slotchange", () => this.syncSeparators());
+    const e = this.root.querySelector("slot");
+    e && e.addEventListener("slotchange", () => this.syncSeparators());
   }
 }
-class V extends n {
+class G extends l {
   static get observedAttributes() {
     return ["href", "separator", "current"];
   }
@@ -2283,7 +2343,7 @@ class V extends n {
     return this.hasAttribute("current") || this.getAttribute("current") === "true";
   }
   render() {
-    const t = this.href, e = this.current, r = this.separator;
+    const e = this.href, t = this.current, r = this.separator;
     this.root.innerHTML = `
       <style>
         :host {
@@ -2322,15 +2382,15 @@ class V extends n {
         }
       </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", R);
-customElements.get("ui-breadcrumb-item") || customElements.define("ui-breadcrumb-item", V);
-class X extends n {
+customElements.get("ui-breadcrumbs") || customElements.define("ui-breadcrumbs", Y);
+customElements.get("ui-breadcrumb-item") || customElements.define("ui-breadcrumb-item", G);
+class J extends l {
   static get observedAttributes() {
     return ["open", "side", "title"];
   }
@@ -2340,8 +2400,8 @@ class X extends n {
   get open() {
     return this.getBooleanAttr("open");
   }
-  set open(t) {
-    this.setBooleanAttr("open", t);
+  set open(e) {
+    this.setBooleanAttr("open", e);
   }
   get side() {
     return this.getAttribute("side") || "right";
@@ -2349,21 +2409,21 @@ class X extends n {
   get title() {
     return this.getAttribute("title") || "";
   }
-  set title(t) {
-    this.setAttribute("title", t);
+  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", (t) => {
-      t.key === "Escape" && this.open && this.close();
+    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 o;
-    const t = this.open, e = this.side === "left" ? "left" : "right", r = this.title;
-    if (!t) {
+    var s;
+    const e = this.open, t = this.side === "left" ? "left" : "right", r = this.title;
+    if (!e) {
       this.root.innerHTML = "";
       return;
     }
@@ -2406,7 +2466,7 @@ class X extends n {
           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 {
@@ -2454,7 +2514,7 @@ class X extends n {
         }
       </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>
@@ -2464,14 +2524,14 @@ class X extends n {
       </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();
+    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", X);
-class W extends n {
+customElements.get("ui-drawer") || customElements.define("ui-drawer", J);
+class Q extends l {
   static get observedAttributes() {
     return ["variant", "width", "height", "lines"];
   }
@@ -2485,11 +2545,11 @@ class W extends n {
     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;
+    const e = parseInt(this.getAttribute("lines") || "1", 10);
+    return Number.isFinite(e) && e > 0 ? Math.min(e, 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>`;
+    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 {
@@ -2526,12 +2586,12 @@ class W extends n {
       <div class="wrap" aria-hidden="true">${i}</div>
     `;
   }
-  escape(t) {
-    return t.replace(/["<>]/g, "");
+  escape(e) {
+    return e.replace(/["<>]/g, "");
   }
 }
-customElements.get("ui-skeleton") || customElements.define("ui-skeleton", W);
-class Y extends n {
+customElements.get("ui-skeleton") || customElements.define("ui-skeleton", Q);
+class Z extends l {
   static get observedAttributes() {
     return ["brand", "sticky"];
   }
@@ -2542,14 +2602,14 @@ class Y extends n {
     return this.getBooleanAttr("sticky");
   }
   render() {
-    const t = this.brand, e = this.sticky;
+    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;
@@ -2610,27 +2670,545 @@ class Y extends n {
         }
       </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", Y);
-class G extends n {
+customElements.get("ui-navbar") || customElements.define("ui-navbar", Z);
+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();
+  }
+  /** <form>.reset() 시 초기값으로 복원 */
+  formResetCallback() {
+    this.value = this.defaultValue;
+  }
+  /** value 속성 변경은 내부 textarea 를 제자리 갱신해 포커스·캐럿을 보존한다. */
+  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"), x = this.root.querySelector(".wrapper");
+    u && x && (u.onfocus = () => x.classList.add("focused"), u.onblur = () => x.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 tt 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", tt);
+class et 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());
+  }
+  /** aria-checked / tabindex(roving) 를 자식 ui-segment 에 반영 (자식이 속성 변경 시에도 호출) */
+  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 it 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", et);
+customElements.get("ui-segment") || customElements.define("ui-segment", it);
+class rt 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();
+  }
+  /** 자식 ui-step 의 상태·번호·마지막 여부를 갱신 (자식이 속성 변경 시에도 호출) */
+  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 ot 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", rt);
+customElements.get("ui-step") || customElements.define("ui-step", ot);
+class st 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", st);
+class at extends l {
   static get observedAttributes() {
     return ["level", "time"];
   }
   get level() {
-    const t = this.getAttribute("level") || "info";
-    return ["info", "success", "warning", "error", "debug"].includes(t) ? t : "info";
+    const e = this.getAttribute("level") || "info";
+    return ["info", "success", "warning", "error", "debug"].includes(e) ? e : "info";
   }
   get time() {
     return this.getAttribute("time") || "";
   }
   render() {
-    const t = this.time;
+    const e = this.time;
     this.root.innerHTML = `
       <style>
         :host {
@@ -2671,13 +3249,13 @@ class G extends n {
         :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", G);
-class J extends n {
+customElements.get("ui-log-item") || customElements.define("ui-log-item", at);
+class nt extends l {
   static get observedAttributes() {
     return ["label", "height", "wrap", "auto-scroll", "max", "empty"];
   }
@@ -2694,55 +3272,55 @@ class J extends n {
     return this.getAttribute("auto-scroll") !== "false";
   }
   get max() {
-    const t = parseInt(this.getAttribute("max") || "500", 10);
-    return Number.isFinite(t) && t > 0 ? t : 500;
+    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 t = this.root.querySelector("slot");
-    t == null || t.addEventListener("slotchange", () => this.handleSlotChange());
+    const e = this.root.querySelector("slot");
+    e == null || e.addEventListener("slotchange", () => this.handleSlotChange());
   }
   /**
    * item 수집 (ui-log-item만)
    */
   items() {
     return Array.from(this.children).filter(
-      (t) => t.tagName.toLowerCase() === "ui-log-item"
+      (e) => e.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();
+    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 t = this.root.querySelector(".empty");
-    t && t.setAttribute("aria-hidden", this.items().length > 0 ? "true" : "false");
+    const e = this.root.querySelector(".empty");
+    e && e.setAttribute("aria-hidden", this.items().length > 0 ? "true" : "false");
   }
   /** 맨 아래로 강제 스크롤 */
   scrollDown() {
-    const t = this.root.querySelector(".viewport");
-    t && (t.scrollTop = t.scrollHeight);
+    const e = this.root.querySelector(".viewport");
+    e && (e.scrollTop = e.scrollHeight);
   }
   /** 프로그래매틱 로그 추가 */
-  push(t, e, r) {
+  push(e, t, r) {
     const i = document.createElement("ui-log-item");
-    i.setAttribute("level", t), r && i.setAttribute("time", r), i.textContent = e, this.appendChild(i);
+    i.setAttribute("level", e), r && i.setAttribute("time", r), i.textContent = t, this.appendChild(i);
   }
   /** 전체 비우기 */
   clear() {
-    this.items().forEach((t) => t.remove()), this.updateEmpty();
+    this.items().forEach((e) => e.remove()), this.updateEmpty();
   }
   render() {
     var i;
-    const t = this.label, e = `height: ${this.height.replace(/["<>]/g, "")};`, r = this.escapeHtml(this.emptyText);
+    const e = this.label, t = `height: ${this.height.replace(/["<>]/g, "")};`, r = this.escapeHtml(this.emptyText);
     this.root.innerHTML = `
       <style>
         :host {
@@ -2792,7 +3370,7 @@ class J extends n {
         .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 {
@@ -2804,10 +3382,10 @@ class J extends n {
         }
         .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>
@@ -2818,56 +3396,63 @@ class J extends n {
         </div>
       </div>
     `, (i = this.root.querySelector(".copy-btn")) == null || i.addEventListener("click", () => {
-      var l;
-      const s = this.items().map((d) => d.textContent ?? "").join(`
+      var n;
+      const o = this.items().map((d) => d.textContent ?? "").join(`
 `);
-      (l = navigator.clipboard) != null && l.writeText && navigator.clipboard.writeText(s).catch(() => {
+      (n = navigator.clipboard) != null && n.writeText && navigator.clipboard.writeText(o).catch(() => {
       });
-      const o = this.root.querySelector(".copy-btn");
-      o && (o.textContent = "복사됨", window.setTimeout(() => {
-        o.textContent = "복사";
-      }, 1400)), this.emit("copy", { text: s });
+      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 t = this.root.querySelector(".count");
-    t && (t.textContent = this.items().length > 0 ? `${this.items().length}건` : "");
+    const e = this.root.querySelector(".count");
+    e && (e.textContent = this.items().length > 0 ? `${this.items().length}건` : "");
   }
 }
-customElements.get("ui-log") || customElements.define("ui-log", J);
+customElements.get("ui-log") || customElements.define("ui-log", nt);
 export {
-  v as FocusTrap,
+  y as FocusTrap,
   _ as UIAccordion,
-  y as UIAccordionItem,
-  U as UIAlert,
-  N as UIAvatar,
-  M as UIBadge,
-  V as UIBreadcrumbItem,
-  R as UIBreadcrumbs,
-  A as UIButton,
-  O as UICard,
-  E as UICheckbox,
-  X as UIDrawer,
-  j as UIDropdown,
-  K as UIDropdownItem,
-  n as UIElement,
-  z as UIInput,
-  J as UILog,
-  G as UILogItem,
-  S as UIModal,
-  Y as UINavbar,
-  L as UIOption,
-  P as UIPagination,
-  F as UIProgress,
-  x as UIRadio,
-  $ as UISelect,
-  W as UISkeleton,
-  q as UISpinner,
+  E as UIAccordionItem,
+  O as UIAlert,
+  X as UIAvatar,
+  j as UIBadge,
+  G as UIBreadcrumbItem,
+  Y as UIBreadcrumbs,
+  B as UIButton,
+  P as UICard,
+  z as UICheckbox,
+  st as UIChip,
+  J as UIDrawer,
+  R as UIDropdown,
+  V as UIDropdownItem,
+  l as UIElement,
+  tt as UIEmptyState,
+  A as UIInput,
+  nt as UILog,
+  at as UILogItem,
+  D as UIModal,
+  Z as UINavbar,
+  H as UIOption,
+  W as UIPagination,
+  N as UIProgress,
+  k as UIRadio,
+  it as UISegment,
+  et as UISegmented,
+  T as UISelect,
+  Q as UISkeleton,
+  K as UISpinner,
+  ot as UIStep,
+  rt as UIStepper,
   C as UISwitch,
-  H as UITab,
-  I as UITabPanel,
-  m as UITable,
-  D as UITabs,
-  T as UIToast,
-  B as UITooltip
+  U as UITab,
+  F as UITabPanel,
+  w as UITable,
+  I as UITabs,
+  $ as UITextarea,
+  M as UIToast,
+  q as UITooltip
 };