@krds.ui/vue 0.0.3 → 0.0.5

package/dist/krds-vue.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as b, computed as v, h as d, ref as B, onMounted as fe, onBeforeUnmount as ve, createElementBlock as x, openBlock as D, createElementVNode as o, normalizeClass as $, withDirectives as q, unref as C, toDisplayString as F, Fragment as O, renderList as T, vShow as L, createBlock as he, withCtx as ye, createTextVNode as ge, watch as me } from "vue";
-const U = b({
+import { defineComponent as C, computed as g, h as r, ref as M, onMounted as re, onBeforeUnmount as _e, createElementBlock as D, openBlock as w, createElementVNode as h, normalizeClass as L, withDirectives as Y, unref as I, toDisplayString as N, Fragment as E, renderList as F, vShow as G, createBlock as W, withCtx as U, createTextVNode as R, watch as De, provide as Be, inject as Ke, createCommentVNode as J, onUnmounted as ae, resolveDirective as xe, resolveDynamicComponent as ne } from "vue";
+const oe = C({
   name: "KrdsButton",
   props: {
     type: {
@@ -36,37 +36,37 @@ const U = b({
     }
   },
   emits: ["click"],
-  setup(e, { emit: s, slots: a }) {
-    const l = v(() => {
+  setup(e, { emit: i, slots: s }) {
+    const l = g(() => {
       const t = ["krds-btn"];
       return e.icon && t.push("icon"), e.border && t.push("border"), e.pure && t.push("pure"), e.variant && !e.icon && t.push(e.variant), e.size && t.push(e.size), e.class && t.push(e.class), t;
-    }), i = (t) => {
-      e.disabled || s("click", t);
+    }), o = (t) => {
+      e.disabled || i("click", t);
     };
-    return () => d(
+    return () => r(
       "button",
       {
         type: e.type,
         class: l.value,
         disabled: e.disabled,
-        onClick: i
+        onClick: o
       },
-      a.default?.()
+      s.default?.()
     );
   }
-}), pe = b({
+}), Ie = C({
   name: "KrdsButtonGroup",
   props: {},
-  setup(e, { slots: s }) {
-    return () => d(
+  setup(e, { slots: i }) {
+    return () => r(
       "div",
       {
         class: "btn-group"
       },
-      s.default?.()
+      i.default?.()
     );
   }
-}), be = b({
+}), Ve = C({
   name: "KrdsIcon",
   props: {
     name: {
@@ -79,11 +79,11 @@ const U = b({
     }
   },
   setup(e) {
-    return () => d("i", {
+    return () => r("i", {
       class: ["svg-icon", e.name, e.class].filter(Boolean).join(" ")
     });
   }
-}), ke = b({
+}), ze = C({
   name: "KrdsLink",
   props: {
     href: {
@@ -120,29 +120,41 @@ const U = b({
     }
   },
   emits: ["click"],
-  setup(e, { emit: s, slots: a }) {
-    const l = v(() => {
-      const n = ["krds-btn"];
-      return e.size && n.push(e.size), e.link && n.push("link"), e.basic && n.push("basic"), e.pure && n.push("pure"), e.class && n.push(e.class), n;
-    }), i = v(() => {
-      const n = {
+  setup(e, { emit: i, slots: s }) {
+    const l = g(() => {
+      const a = ["krds-btn"];
+      return e.size && a.push(e.size), e.link && a.push("link"), e.basic && a.push("basic"), e.pure && a.push("pure"), e.class && a.push(e.class), a;
+    }), o = g(() => {
+      const a = {
         href: e.href,
         class: l.value
       };
-      return e.target && (n.target = e.target), e.title && (n.title = e.title), e.target === "_blank" && (n.rel = "noopener noreferrer"), n;
-    }), t = (n) => {
-      s("click", n);
+      return e.target && (a.target = e.target), e.title && (a.title = e.title), e.target === "_blank" && (a.rel = "noopener noreferrer"), a;
+    }), t = (a) => {
+      i("click", a);
     };
-    return () => d(
+    return () => r(
       "a",
       {
-        ...i.value,
+        ...o.value,
         onClick: t
       },
-      a.default?.()
+      s.default?.()
     );
   }
-}), Se = b({
+}), ue = C({
+  name: "KrdsSpinner",
+  props: {
+    label: {
+      type: String,
+      default: void 0
+    }
+  },
+  render() {
+    const e = [r("span", { class: "sr-only" }, "로딩 중")];
+    return this.label && e.push(r("span", this.label)), r("div", { class: "krds-spinner", role: "status" }, e);
+  }
+}), Me = C({
   name: "KrdsInput",
   props: {
     modelValue: {
@@ -217,6 +229,10 @@ const U = b({
       type: Boolean,
       default: !1
     },
+    loading: {
+      type: Boolean,
+      default: !1
+    },
     class: {
       type: String,
       default: void 0
@@ -227,25 +243,25 @@ const U = b({
     }
   },
   emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup"],
-  setup(e, { emit: s, slots: a }) {
-    const l = v(() => {
-      const r = ["krds-input"];
-      return e.size && r.push(e.size), e.class && r.push(e.class), r;
-    }), i = (r) => {
-      const V = r.target, _ = e.type === "number" ? Number(V.value) : V.value;
-      s("update:modelValue", _), s("input", r);
-    }, t = (r) => {
-      s("change", r);
-    }, n = (r) => {
-      s("focus", r);
-    }, y = (r) => {
-      s("blur", r);
-    }, g = (r) => {
-      s("keydown", r);
-    }, p = (r) => {
-      s("keyup", r);
-    }, k = v(() => {
-      const r = {
+  setup(e, { emit: i, slots: s }) {
+    const l = g(() => {
+      const y = ["krds-input"];
+      return e.size && y.push(e.size), e.class && y.push(e.class), y;
+    }), o = (y) => {
+      const $ = y.target, d = e.type === "number" ? Number($.value) : $.value;
+      i("update:modelValue", d), i("input", y);
+    }, t = (y) => {
+      i("change", y);
+    }, a = (y) => {
+      i("focus", y);
+    }, u = (y) => {
+      i("blur", y);
+    }, v = (y) => {
+      i("keydown", y);
+    }, S = (y) => {
+      i("keyup", y);
+    }, _ = g(() => {
+      const y = {
         type: e.type,
         class: l.value,
         value: e.modelValue,
@@ -257,24 +273,24 @@ const U = b({
         disabled: e.disabled,
         autocomplete: e.autocomplete,
         autofocus: e.autofocus,
-        onInput: i,
+        onInput: o,
         onChange: t,
-        onFocus: n,
-        onBlur: y,
-        onKeydown: g,
-        onKeyup: p
+        onFocus: a,
+        onBlur: u,
+        onKeydown: v,
+        onKeyup: S
       };
-      return e.maxlength !== void 0 && (r.maxlength = e.maxlength), e.minlength !== void 0 && (r.minlength = e.minlength), e.type === "number" && (e.max !== void 0 && (r.max = e.max), e.min !== void 0 && (r.min = e.min), e.step !== void 0 && (r.step = e.step)), r;
-    }), z = v(() => {
-      const r = ["form-conts"];
-      return e.state !== "default" && r.push(`is-${e.state}`), e.icon && r.push("btn-ico-wrap"), r;
+      return e.maxlength !== void 0 && (y.maxlength = e.maxlength), e.minlength !== void 0 && (y.minlength = e.minlength), e.type === "number" && (e.max !== void 0 && (y.max = e.max), e.min !== void 0 && (y.min = e.min), e.step !== void 0 && (y.step = e.step)), y;
+    }), V = g(() => {
+      const y = ["form-conts"];
+      return e.state !== "default" && y.push(`is-${e.state}`), e.icon && y.push("btn-ico-wrap"), y;
     });
     return () => {
-      const r = [d("input", k.value)];
-      return a.default && r.push(...a.default()), d("div", { class: z.value }, r);
+      const y = [r("input", _.value)];
+      return e.loading ? r("div", { class: V.value }, [r("div", { class: "form-spinner" }, [...y, r(ue)])]) : (s.default && y.push(...s.default()), r("div", { class: V.value }, y));
     };
   }
-}), Ce = b({
+}), $e = C({
   name: "KrdsFormLabel",
   props: {
     for: {
@@ -295,12 +311,12 @@ const U = b({
     }
   },
   emits: ["click"],
-  setup(e, { emit: s, slots: a }) {
-    const l = (i) => {
-      s("click", i);
+  setup(e, { emit: i, slots: s }) {
+    const l = (o) => {
+      i("click", o);
     };
-    return () => d("div", { class: "form-tit" }, [
-      d(
+    return () => r("div", { class: "form-tit" }, [
+      r(
         "label",
         {
           for: e.for,
@@ -309,11 +325,11 @@ const U = b({
           style: e.style,
           onClick: l
         },
-        a.default?.()
+        s.default?.()
       )
     ]);
   }
-}), we = b({
+}), Pe = C({
   name: "KrdsFormHint",
   props: {
     type: {
@@ -334,10 +350,10 @@ const U = b({
     }
   },
   emits: ["click"],
-  setup(e, { emit: s, slots: a }) {
+  setup(e, { emit: i, slots: s }) {
     const l = (t) => {
-      s("click", t);
-    }, i = () => {
+      i("click", t);
+    }, o = () => {
       let t;
       switch (e.type) {
         case "error":
@@ -355,18 +371,18 @@ const U = b({
       }
       return e.class ? `${t} ${e.class}` : t;
     };
-    return () => d(
+    return () => r(
       "p",
       {
         id: e.id,
-        class: i(),
+        class: o(),
         style: e.style,
         onClick: l
       },
-      a.default?.()
+      s.default?.()
     );
   }
-}), De = b({
+}), Le = C({
   name: "KrdsFormGroup",
   props: {
     class: {
@@ -382,94 +398,94 @@ const U = b({
       default: void 0
     }
   },
-  setup(e, { slots: s }) {
-    const a = v(() => {
+  setup(e, { slots: i }) {
+    const s = g(() => {
       const l = ["form-group"];
       return e.class && l.push(e.class), l;
     });
-    return () => d(
+    return () => r(
       "div",
       {
         id: e.id,
-        class: a.value,
+        class: s.value,
         style: e.style
       },
-      s.default?.()
+      i.default?.()
     );
   }
 });
-function Be(e, s) {
-  const a = /* @__PURE__ */ new Date(), l = B(e || a.getFullYear()), i = B(s || a.getMonth() + 1), t = B(null), n = B(null), y = B(null), g = v(() => {
-    const m = a.getFullYear(), w = [];
-    for (let K = m - 10; K <= m + 10; K++)
-      w.push(K);
-    return w;
-  }), p = v(() => Array.from({ length: 12 }, (m, w) => w + 1)), k = () => {
-    t.value = null, n.value = null;
-  }, z = () => {
-    i.value === 1 ? (i.value = 12, l.value -= 1) : i.value -= 1;
-  }, r = () => {
-    i.value === 12 ? (i.value = 1, l.value += 1) : i.value += 1;
-  }, V = (m, w = !1) => {
-    if (w)
-      t.value = m, n.value = m;
-    else if (!t.value || t.value && n.value)
-      t.value = m, n.value = null;
+function Ne(e, i) {
+  const s = /* @__PURE__ */ new Date(), l = M(e || s.getFullYear()), o = M(i || s.getMonth() + 1), t = M(null), a = M(null), u = M(null), v = g(() => {
+    const p = s.getFullYear(), f = [];
+    for (let b = p - 10; b <= p + 10; b++)
+      f.push(b);
+    return f;
+  }), S = g(() => Array.from({ length: 12 }, (p, f) => f + 1)), _ = () => {
+    t.value = null, a.value = null;
+  }, V = () => {
+    o.value === 1 ? (o.value = 12, l.value -= 1) : o.value -= 1;
+  }, y = () => {
+    o.value === 12 ? (o.value = 1, l.value += 1) : o.value += 1;
+  }, $ = (p, f = !1) => {
+    if (f)
+      t.value = p, a.value = p;
+    else if (!t.value || t.value && a.value)
+      t.value = p, a.value = null;
     else {
-      const K = new Date(t.value.replace(/\./g, "-"));
-      new Date(m.replace(/\./g, "-")) < K ? (t.value = m, n.value = null) : n.value = m;
+      const b = new Date(t.value.replace(/\./g, "-"));
+      new Date(p.replace(/\./g, "-")) < b ? (t.value = p, a.value = null) : a.value = p;
     }
   };
   return {
     // State
     currentYear: l,
-    currentMonth: i,
+    currentMonth: o,
     selectedStartDate: t,
-    selectedEndDate: n,
-    activeDateSelector: y,
+    selectedEndDate: a,
+    activeDateSelector: u,
     // Computed
-    yearOptions: g,
-    monthOptions: p,
+    yearOptions: v,
+    monthOptions: S,
     // Methods
-    clearDateSelection: k,
-    prevMonth: z,
-    nextMonth: r,
-    handleDateSelection: V,
+    clearDateSelection: _,
+    prevMonth: V,
+    nextMonth: y,
+    handleDateSelection: $,
     selectToday: () => {
-      const m = `${a.getFullYear()}.${String(a.getMonth() + 1).padStart(2, "0")}.${String(a.getDate()).padStart(2, "0")}`;
-      V(m, !0);
+      const p = `${s.getFullYear()}.${String(s.getMonth() + 1).padStart(2, "0")}.${String(s.getDate()).padStart(2, "0")}`;
+      $(p, !0);
     },
-    isDateInSelectedRange: (m) => {
-      if (!t.value || !n.value)
+    isDateInSelectedRange: (p) => {
+      if (!t.value || !a.value)
         return { isInRange: !1, isStart: !1, isEnd: !1 };
-      const w = new Date(m.replace(/\./g, "-")), K = new Date(t.value.replace(/\./g, "-")), I = new Date(n.value.replace(/\./g, "-")), E = m === t.value, P = m === n.value;
-      return { isInRange: w >= K && w <= I, isStart: E, isEnd: P };
+      const f = new Date(p.replace(/\./g, "-")), b = new Date(t.value.replace(/\./g, "-")), K = new Date(a.value.replace(/\./g, "-")), O = p === t.value, T = p === a.value;
+      return { isInRange: f >= b && f <= K, isStart: O, isEnd: T };
     }
   };
 }
-function _e(e, s, a = {}) {
+function Te(e, i, s = {}) {
   let l = null;
-  const i = typeof a == "string" ? { ignore: a } : a, { ignore: t, event: n = "click" } = i, y = () => {
-    l = (p) => {
-      const k = p.target;
-      e.value?.contains(k) || t && k.closest(t) || s();
-    }, document.addEventListener(n, l);
-  }, g = () => {
+  const o = typeof s == "string" ? { ignore: s } : s, { ignore: t, event: a = "click" } = o, u = () => {
+    l = (S) => {
+      const _ = S.target;
+      e.value?.contains(_) || t && _.closest(t) || i();
+    }, document.addEventListener(a, l);
+  }, v = () => {
     if (l) {
-      const p = typeof a == "string" ? "click" : a.event || "click";
-      document.removeEventListener(p, l), l = null;
+      const S = typeof s == "string" ? "click" : s.event || "click";
+      document.removeEventListener(S, l), l = null;
     }
   };
-  return fe(() => {
-    y();
-  }), ve(() => {
-    g();
+  return re(() => {
+    u();
+  }), _e(() => {
+    v();
   }), {
-    setupGlobalListeners: y,
-    removeGlobalListeners: g
+    setupGlobalListeners: u,
+    removeGlobalListeners: v
   };
 }
-const Ke = { class: "form-conts" }, xe = { class: "calendar-input" }, ze = ["id", "name", "placeholder", "value", "readonly", "disabled", "required", "autofocus"], Ve = ["disabled", "aria-expanded"], Ie = { class: "calendar-head" }, Me = { class: "calendar-switch-wrap" }, $e = { class: "calendar-drop-down" }, Fe = ["aria-expanded"], Ne = { class: "calendar-select calendar-year-wrap" }, Oe = { class: "sel year" }, Te = ["onClick"], Ee = { class: "calendar-drop-down" }, Pe = ["aria-expanded"], Re = { class: "calendar-select calendar-mon-wrap" }, qe = { class: "sel month" }, Le = ["onClick"], Ye = { class: "calendar-body" }, Ae = { class: "calendar-table-wrap" }, je = { class: "calendar-tbl" }, Ge = ["data-date"], We = ["aria-pressed", "onClick"], He = { class: "calendar-footer" }, Ue = { class: "calendar-btn-wrap" }, Je = /* @__PURE__ */ b({
+const Ae = { class: "form-conts" }, Ee = { class: "calendar-input" }, Oe = ["id", "name", "placeholder", "value", "readonly", "disabled", "required", "autofocus"], qe = ["disabled", "aria-expanded"], Fe = { class: "calendar-head" }, He = { class: "calendar-switch-wrap" }, Re = { class: "calendar-drop-down" }, Ye = ["aria-expanded"], je = { class: "calendar-select calendar-year-wrap" }, Ge = { class: "sel year" }, We = ["onClick"], Ue = { class: "calendar-drop-down" }, Je = ["aria-expanded"], Qe = { class: "calendar-select calendar-mon-wrap" }, Xe = { class: "sel month" }, Ze = ["onClick"], et = { class: "calendar-body" }, tt = { class: "calendar-table-wrap" }, at = { class: "calendar-tbl" }, nt = ["data-date"], lt = ["aria-pressed", "onClick"], st = { class: "calendar-footer" }, it = { class: "calendar-btn-wrap" }, rt = /* @__PURE__ */ C({
   __name: "KrdsDateInput",
   props: {
     modelValue: { default: void 0 },
@@ -489,66 +505,66 @@ const Ke = { class: "form-conts" }, xe = { class: "calendar-input" }, ze = ["id"
     id: { default: void 0 }
   },
   emits: ["update:modelValue", "input", "change", "focus", "blur"],
-  setup(e, { emit: s }) {
-    const a = e, l = s, i = B(), t = B(), n = B(!1), y = B(null), {
-      currentYear: g,
-      currentMonth: p,
-      selectedStartDate: k,
-      selectedEndDate: z,
-      yearOptions: r,
-      monthOptions: V,
-      prevMonth: _,
-      nextMonth: f,
-      handleDateSelection: m,
-      selectToday: w,
-      isDateInSelectedRange: K
-    } = Be(a.initialYear, a.initialMonth), I = () => {
-      n.value && t.value?.focus(), n.value = !1, y.value = null;
+  setup(e, { emit: i }) {
+    const s = e, l = i, o = M(), t = M(), a = M(!1), u = M(null), {
+      currentYear: v,
+      currentMonth: S,
+      selectedStartDate: _,
+      selectedEndDate: V,
+      yearOptions: y,
+      monthOptions: $,
+      prevMonth: d,
+      nextMonth: n,
+      handleDateSelection: p,
+      selectToday: f,
+      isDateInSelectedRange: b
+    } = Ne(s.initialYear, s.initialMonth), K = () => {
+      a.value && t.value?.focus(), a.value = !1, u.value = null;
     };
-    _e(i, I, ".calendar-conts");
-    const E = v(() => {
-      const u = ["krds-input", "datepicker", "cal"];
-      return a.size && u.push(a.size), a.class && u.push(a.class), u;
-    }), P = v(() => ["form-conts", "calendar-conts"]), Y = v(() => ({
+    Te(o, K, ".calendar-conts");
+    const O = g(() => {
+      const c = ["krds-input", "datepicker", "cal"];
+      return s.size && c.push(s.size), s.class && c.push(s.class), c;
+    }), T = g(() => ["form-conts", "calendar-conts"]), P = g(() => ({
       "krds-calendar-area": !0,
-      active: n.value
-    })), X = v(() => {
-      const u = g.value, c = p.value, h = new Date(u, c - 1, 1), N = new Date(h);
-      N.setDate(N.getDate() - h.getDay());
-      const M = [], S = new Date(N);
-      for (let R = 0; R < 6; R++) {
-        const j = [];
-        for (let G = 0; G < 7; G++) {
-          const ce = `${S.getFullYear()}.${String(S.getMonth() + 1).padStart(2, "0")}.${String(S.getDate()).padStart(2, "0")}`, W = S.getDay();
-          j.push({
-            day: S.getDate(),
-            dateString: ce,
-            isCurrentMonth: S.getMonth() === c - 1,
-            isToday: S.toDateString() === (/* @__PURE__ */ new Date()).toDateString(),
-            isPrevMonth: S.getMonth() < c - 1 || S.getMonth() === 11 && c === 1,
-            isNextMonth: S.getMonth() > c - 1 || S.getMonth() === 0 && c === 12,
-            isSunday: W === 0,
-            isSaturday: W === 6
-          }), S.setDate(S.getDate() + 1);
+      active: a.value
+    })), z = g(() => {
+      const c = v.value, m = S.value, k = new Date(c, m - 1, 1), q = new Date(k);
+      q.setDate(q.getDate() - k.getDay());
+      const A = [], x = new Date(q);
+      for (let j = 0; j < 6; j++) {
+        const Z = [];
+        for (let ee = 0; ee < 7; ee++) {
+          const we = `${x.getFullYear()}.${String(x.getMonth() + 1).padStart(2, "0")}.${String(x.getDate()).padStart(2, "0")}`, te = x.getDay();
+          Z.push({
+            day: x.getDate(),
+            dateString: we,
+            isCurrentMonth: x.getMonth() === m - 1,
+            isToday: x.toDateString() === (/* @__PURE__ */ new Date()).toDateString(),
+            isPrevMonth: x.getMonth() < m - 1 || x.getMonth() === 11 && m === 1,
+            isNextMonth: x.getMonth() > m - 1 || x.getMonth() === 0 && m === 12,
+            isSunday: te === 0,
+            isSaturday: te === 6
+          }), x.setDate(x.getDate() + 1);
         }
-        M.push(j);
+        A.push(Z);
       }
-      return M;
-    }), Z = (u) => {
-      const c = [];
-      if (u.isPrevMonth && c.push("old"), u.isNextMonth && c.push("new"), u.isToday && c.push("today"), u.isSunday && c.push("day-off"), a.holidays?.includes(u.dateString) && c.push("day-off"), a.eventDates?.includes(u.dateString) && c.push("day-event"), u.isCurrentMonth) {
-        const h = K(u.dateString);
-        h.isInRange && (c.push("period"), h.isStart && c.push("start"), h.isEnd && c.push("end"));
+      return A;
+    }), H = (c) => {
+      const m = [];
+      if (c.isPrevMonth && m.push("old"), c.isNextMonth && m.push("new"), c.isToday && m.push("today"), c.isSunday && m.push("day-off"), s.holidays?.includes(c.dateString) && m.push("day-off"), s.eventDates?.includes(c.dateString) && m.push("day-event"), c.isCurrentMonth) {
+        const k = b(c.dateString);
+        k.isInRange && (m.push("period"), k.isStart && m.push("start"), k.isEnd && m.push("end"));
       }
-      return c;
-    }, ee = v(() => [
+      return m;
+    }, B = g(() => [
       {
         id: "get-today",
         label: "오늘",
         class: "text",
         variant: void 0,
         size: "small",
-        handler: w
+        handler: f
       },
       {
         id: "cancel-btn",
@@ -556,7 +572,7 @@ const Ke = { class: "form-conts" }, xe = { class: "calendar-input" }, ze = ["id"
         class: void 0,
         variant: "tertiary",
         size: "small",
-        handler: I
+        handler: K
       },
       {
         id: "confirm-btn",
@@ -564,211 +580,211 @@ const Ke = { class: "form-conts" }, xe = { class: "calendar-input" }, ze = ["id"
         class: void 0,
         variant: "primary",
         size: "small",
-        handler: le
+        handler: ge
       }
-    ]), A = (u) => {
-      y.value === u ? y.value = null : y.value = u;
-    }, te = (u) => {
-      g.value = u, y.value = null;
-    }, ae = (u) => {
-      p.value = u, y.value = null;
-    }, le = () => {
-      if (k.value) {
-        if (z.value && k.value !== z.value) {
-          const u = `${k.value} ~ ${z.value}`;
-          l("update:modelValue", u);
+    ]), X = (c) => {
+      u.value === c ? u.value = null : u.value = c;
+    }, ve = (c) => {
+      v.value = c, u.value = null;
+    }, he = (c) => {
+      S.value = c, u.value = null;
+    }, ge = () => {
+      if (_.value) {
+        if (V.value && _.value !== V.value) {
+          const c = `${_.value} ~ ${V.value}`;
+          l("update:modelValue", c);
         } else
-          l("update:modelValue", k.value);
-        I();
+          l("update:modelValue", _.value);
+        K();
       }
-    }, ne = () => {
-      n.value = !0, y.value = null, setTimeout(() => {
-        i.value?.querySelector(".calendar-wrap")?.focus();
+    }, ye = () => {
+      a.value = !0, u.value = null, setTimeout(() => {
+        o.value?.querySelector(".calendar-wrap")?.focus();
       }, 50);
-    }, se = () => {
-      n.value ? I() : ne();
-    }, ue = (u) => {
-      u.code === "Escape" && (y.value ? y.value = null : n.value && I());
-    }, oe = (u) => {
-      const c = u.target;
-      l("update:modelValue", c.value), l("input", u);
-    }, ie = (u) => {
-      l("change", u);
-    }, de = (u) => {
-      l("focus", u);
-    }, re = (u) => {
-      l("blur", u);
+    }, pe = () => {
+      a.value ? K() : ye();
+    }, me = (c) => {
+      c.code === "Escape" && (u.value ? u.value = null : a.value && K());
+    }, be = (c) => {
+      const m = c.target;
+      l("update:modelValue", m.value), l("input", c);
+    }, ke = (c) => {
+      l("change", c);
+    }, Se = (c) => {
+      l("focus", c);
+    }, Ce = (c) => {
+      l("blur", c);
     };
-    return (u, c) => (D(), x("div", Ke, [
-      o("div", {
-        class: $(P.value)
+    return (c, m) => (w(), D("div", Ae, [
+      h("div", {
+        class: L(T.value)
       }, [
-        o("div", xe, [
-          o("input", {
-            id: u.id,
-            name: u.name,
-            class: $(E.value),
-            placeholder: u.placeholder,
-            value: u.modelValue,
-            readonly: u.readonly,
-            disabled: u.disabled,
-            required: u.required,
-            autofocus: u.autofocus,
+        h("div", Ee, [
+          h("input", {
+            id: c.id,
+            name: c.name,
+            class: L(O.value),
+            placeholder: c.placeholder,
+            value: c.modelValue,
+            readonly: c.readonly,
+            disabled: c.disabled,
+            required: c.required,
+            autofocus: c.autofocus,
             type: "text",
-            onInput: oe,
-            onChange: ie,
-            onFocus: de,
-            onBlur: re
-          }, null, 42, ze),
-          o("button", {
+            onInput: be,
+            onChange: ke,
+            onFocus: Se,
+            onBlur: Ce
+          }, null, 42, Oe),
+          h("button", {
             ref_key: "datePickerButtonRef",
             ref: t,
-            class: $(`krds-btn ${u.size || "medium"} icon form-btn-datepicker`),
-            disabled: u.disabled,
-            "aria-expanded": n.value,
+            class: L(`krds-btn ${c.size || "medium"} icon form-btn-datepicker`),
+            disabled: c.disabled,
+            "aria-expanded": a.value,
             type: "button",
-            onClick: se
-          }, [...c[4] || (c[4] = [
-            o("span", { class: "sr-only" }, "달력 열기", -1),
-            o("i", { class: "svg-icon ico-calendar" }, null, -1)
-          ])], 10, Ve)
+            onClick: pe
+          }, [...m[4] || (m[4] = [
+            h("span", { class: "sr-only" }, "달력 열기", -1),
+            h("i", { class: "svg-icon ico-calendar" }, null, -1)
+          ])], 10, qe)
         ]),
-        o("div", {
+        h("div", {
           ref_key: "datePickerAreaRef",
-          ref: i,
-          class: $(Y.value)
+          ref: o,
+          class: L(P.value)
         }, [
-          q(o("div", {
+          Y(h("div", {
             class: "calendar-wrap bottom",
             "aria-label": "달력",
             tabindex: "0",
-            onKeydown: ue
+            onKeydown: me
           }, [
-            o("div", Ie, [
-              o("button", {
+            h("div", Fe, [
+              h("button", {
                 type: "button",
                 class: "btn-cal-move prev",
-                onClick: c[0] || (c[0] = //@ts-ignore
-                (...h) => C(_) && C(_)(...h))
-              }, [...c[5] || (c[5] = [
-                o("span", { class: "sr-only" }, "이전 달", -1)
+                onClick: m[0] || (m[0] = //@ts-ignore
+                (...k) => I(d) && I(d)(...k))
+              }, [...m[5] || (m[5] = [
+                h("span", { class: "sr-only" }, "이전 달", -1)
               ])]),
-              o("div", Me, [
-                o("div", $e, [
-                  o("button", {
+              h("div", He, [
+                h("div", Re, [
+                  h("button", {
                     type: "button",
                     class: "btn-cal-switch year",
                     "aria-label": "연도 선택",
-                    "aria-expanded": y.value === "year",
-                    onClick: c[1] || (c[1] = (h) => A("year"))
-                  }, F(C(g)) + "년 ", 9, Fe),
-                  q(o("div", Ne, [
-                    o("ul", Oe, [
-                      (D(!0), x(O, null, T(C(r), (h) => (D(), x("li", { key: h }, [
-                        o("button", {
+                    "aria-expanded": u.value === "year",
+                    onClick: m[1] || (m[1] = (k) => X("year"))
+                  }, N(I(v)) + "년 ", 9, Ye),
+                  Y(h("div", je, [
+                    h("ul", Ge, [
+                      (w(!0), D(E, null, F(I(y), (k) => (w(), D("li", { key: k }, [
+                        h("button", {
                           type: "button",
-                          class: $({ active: h === C(g) }),
-                          onClick: (N) => te(h)
-                        }, F(h) + "년", 11, Te)
+                          class: L({ active: k === I(v) }),
+                          onClick: (q) => ve(k)
+                        }, N(k) + "년", 11, We)
                       ]))), 128))
                     ])
                   ], 512), [
-                    [L, y.value === "year"]
+                    [G, u.value === "year"]
                   ])
                 ]),
-                o("div", Ee, [
-                  o("button", {
+                h("div", Ue, [
+                  h("button", {
                     type: "button",
                     class: "btn-cal-switch month",
                     "aria-label": "월 선택",
-                    "aria-expanded": y.value === "month",
-                    onClick: c[2] || (c[2] = (h) => A("month"))
-                  }, F(C(p).toString().padStart(2, "0")) + "월 ", 9, Pe),
-                  q(o("div", Re, [
-                    o("ul", qe, [
-                      (D(!0), x(O, null, T(C(V), (h) => (D(), x("li", { key: h }, [
-                        o("button", {
+                    "aria-expanded": u.value === "month",
+                    onClick: m[2] || (m[2] = (k) => X("month"))
+                  }, N(I(S).toString().padStart(2, "0")) + "월 ", 9, Je),
+                  Y(h("div", Qe, [
+                    h("ul", Xe, [
+                      (w(!0), D(E, null, F(I($), (k) => (w(), D("li", { key: k }, [
+                        h("button", {
                           type: "button",
-                          class: $({ active: h === C(p) }),
-                          onClick: (N) => ae(h)
-                        }, F(h.toString().padStart(2, "0")) + "월 ", 11, Le)
+                          class: L({ active: k === I(S) }),
+                          onClick: (q) => he(k)
+                        }, N(k.toString().padStart(2, "0")) + "월 ", 11, Ze)
                       ]))), 128))
                     ])
                   ], 512), [
-                    [L, y.value === "month"]
+                    [G, u.value === "month"]
                   ])
                 ])
               ]),
-              o("button", {
+              h("button", {
                 type: "button",
                 class: "btn-cal-move next",
-                onClick: c[3] || (c[3] = //@ts-ignore
-                (...h) => C(f) && C(f)(...h))
-              }, [...c[6] || (c[6] = [
-                o("span", { class: "sr-only" }, "다음 달", -1)
+                onClick: m[3] || (m[3] = //@ts-ignore
+                (...k) => I(n) && I(n)(...k))
+              }, [...m[6] || (m[6] = [
+                h("span", { class: "sr-only" }, "다음 달", -1)
               ])])
             ]),
-            o("div", Ye, [
-              o("div", Ae, [
-                o("table", je, [
-                  o("caption", null, F(C(g)) + "년 " + F(C(p).toString().padStart(2, "0")) + "월", 1),
-                  c[7] || (c[7] = o("thead", null, [
-                    o("tr", null, [
-                      o("th", null, "일"),
-                      o("th", null, "월"),
-                      o("th", null, "화"),
-                      o("th", null, "수"),
-                      o("th", null, "목"),
-                      o("th", null, "금"),
-                      o("th", null, "토")
+            h("div", et, [
+              h("div", tt, [
+                h("table", at, [
+                  h("caption", null, N(I(v)) + "년 " + N(I(S).toString().padStart(2, "0")) + "월", 1),
+                  m[7] || (m[7] = h("thead", null, [
+                    h("tr", null, [
+                      h("th", null, "일"),
+                      h("th", null, "월"),
+                      h("th", null, "화"),
+                      h("th", null, "수"),
+                      h("th", null, "목"),
+                      h("th", null, "금"),
+                      h("th", null, "토")
                     ])
                   ], -1)),
-                  o("tbody", null, [
-                    (D(!0), x(O, null, T(X.value, (h, N) => (D(), x("tr", { key: N }, [
-                      (D(!0), x(O, null, T(h, (M, S) => (D(), x("td", {
-                        key: S,
-                        class: $(Z(M)),
-                        "data-date": M.dateString
+                  h("tbody", null, [
+                    (w(!0), D(E, null, F(z.value, (k, q) => (w(), D("tr", { key: q }, [
+                      (w(!0), D(E, null, F(k, (A, x) => (w(), D("td", {
+                        key: x,
+                        class: L(H(A)),
+                        "data-date": A.dateString
                       }, [
-                        o("button", {
+                        h("button", {
                           type: "button",
                           class: "btn-set-date",
-                          "aria-pressed": C(K)(M.dateString).isInRange ? "true" : "false",
-                          onClick: (R) => C(m)(M.dateString)
+                          "aria-pressed": I(b)(A.dateString).isInRange ? "true" : "false",
+                          onClick: (j) => I(p)(A.dateString)
                         }, [
-                          o("span", null, F(M.day), 1)
-                        ], 8, We)
-                      ], 10, Ge))), 128))
+                          h("span", null, N(A.day), 1)
+                        ], 8, lt)
+                      ], 10, nt))), 128))
                     ]))), 128))
                   ])
                 ])
               ])
             ]),
-            o("div", He, [
-              o("div", Ue, [
-                (D(!0), x(O, null, T(ee.value, (h) => (D(), he(C(U), {
-                  id: h.id,
-                  key: h.id,
-                  class: $(h.class),
-                  variant: h.variant,
-                  size: h.size,
-                  onClick: h.handler
+            h("div", st, [
+              h("div", it, [
+                (w(!0), D(E, null, F(B.value, (k) => (w(), W(I(oe), {
+                  id: k.id,
+                  key: k.id,
+                  class: L(k.class),
+                  variant: k.variant,
+                  size: k.size,
+                  onClick: k.handler
                 }, {
-                  default: ye(() => [
-                    ge(F(h.label), 1)
+                  default: U(() => [
+                    R(N(k.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["id", "class", "variant", "size", "onClick"]))), 128))
               ])
             ])
           ], 544), [
-            [L, n.value]
+            [G, a.value]
           ])
         ], 2)
       ], 2)
     ]));
   }
-}), Qe = b({
+}), ot = C({
   name: "KrdsTextarea",
   props: {
     modelValue: {
@@ -842,38 +858,38 @@ const Ke = { class: "form-conts" }, xe = { class: "calendar-input" }, ze = ["id"
     }
   },
   emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup"],
-  setup(e, { emit: s }) {
-    const a = B(0);
-    me(
+  setup(e, { emit: i }) {
+    const s = M(0);
+    De(
       () => e.modelValue,
-      (f) => {
-        a.value = (f || "").length;
+      (n) => {
+        s.value = (n || "").length;
       },
       { immediate: !0 }
     );
-    const l = v(() => {
-      const f = ["krds-input"];
-      return e.size && f.push(e.size), e.class && f.push(e.class), f;
-    }), i = v(() => {
-      const f = {};
-      return e.resize && (f.resize = e.resize), f;
-    }), t = (f) => {
-      const w = f.target.value;
-      a.value = w.length, s("update:modelValue", w), s("input", f);
-    }, n = (f) => {
-      s("change", f);
-    }, y = (f) => {
-      s("focus", f);
-    }, g = (f) => {
-      s("blur", f);
-    }, p = (f) => {
-      s("keydown", f);
-    }, k = (f) => {
-      s("keyup", f);
-    }, z = v(() => {
-      const f = {
+    const l = g(() => {
+      const n = ["krds-input"];
+      return e.size && n.push(e.size), e.class && n.push(e.class), n;
+    }), o = g(() => {
+      const n = {};
+      return e.resize && (n.resize = e.resize), n;
+    }), t = (n) => {
+      const f = n.target.value;
+      s.value = f.length, i("update:modelValue", f), i("input", n);
+    }, a = (n) => {
+      i("change", n);
+    }, u = (n) => {
+      i("focus", n);
+    }, v = (n) => {
+      i("blur", n);
+    }, S = (n) => {
+      i("keydown", n);
+    }, _ = (n) => {
+      i("keyup", n);
+    }, V = g(() => {
+      const n = {
         class: l.value,
-        style: i.value,
+        style: o.value,
         value: e.modelValue,
         placeholder: e.placeholder,
         name: e.name,
@@ -885,32 +901,32 @@ const Ke = { class: "form-conts" }, xe = { class: "calendar-input" }, ze = ["id"
         rows: e.rows,
         cols: e.cols,
         onInput: t,
-        onChange: n,
-        onFocus: y,
-        onBlur: g,
-        onKeydown: p,
-        onKeyup: k
+        onChange: a,
+        onFocus: u,
+        onBlur: v,
+        onKeydown: S,
+        onKeyup: _
       };
-      return e.maxlength !== void 0 && (f.maxlength = e.maxlength), e.minlength !== void 0 && (f.minlength = e.minlength), f;
-    }), r = v(() => ["form-conts"]), V = v(() => ["textarea-wrap"]), _ = v(() => {
+      return e.maxlength !== void 0 && (n.maxlength = e.maxlength), e.minlength !== void 0 && (n.minlength = e.minlength), n;
+    }), y = g(() => ["form-conts"]), $ = g(() => ["textarea-wrap"]), d = g(() => {
       if (!e.showCount) return null;
-      const f = a.value, m = e.maxlength;
+      const n = s.value, p = e.maxlength;
       return {
-        current: f,
-        max: m || ""
+        current: n,
+        max: p || ""
       };
     });
     return () => {
-      const f = [d("textarea", z.value)];
-      return _.value && f.push(
-        d("p", { class: "textarea-count" }, [
-          d("span", { class: "count-now" }, _.value.current),
-          d("span", { class: "count-total" }, _.value.max ? `/${_.value.max}` : "")
+      const n = [r("textarea", V.value)];
+      return d.value && n.push(
+        r("p", { class: "textarea-count" }, [
+          r("span", { class: "count-now" }, d.value.current),
+          r("span", { class: "count-total" }, d.value.max ? `/${d.value.max}` : "")
         ])
-      ), d("div", { class: r.value }, [d("div", { class: V.value }, f)]);
+      ), r("div", { class: y.value }, [r("div", { class: $.value }, n)]);
     };
   }
-}), Xe = b({
+}), ut = C({
   name: "KrdsFileUpload",
   props: {
     modelValue: {
@@ -1013,15 +1029,15 @@ const Ke = { class: "form-conts" }, xe = { class: "calendar-input" }, ze = ["id"
     "download",
     "preview"
   ],
-  setup(e, { emit: s }) {
-    B(!1), v(() => {
+  setup(e, { emit: i }) {
+    M(!1), g(() => {
       const l = ["krds-file-upload", "line"];
       return e.class && l.push(e.class), l;
     });
-    const a = v(() => e.modelValue?.length || 0);
-    return v(() => !e.disabled && a.value < e.maxFiles), () => null;
+    const s = g(() => e.modelValue?.length || 0);
+    return g(() => !e.disabled && s.value < e.maxFiles), () => null;
   }
-}), Ze = b({
+}), dt = C({
   name: "KrdsBadge",
   props: {
     type: {
@@ -1046,14 +1062,14 @@ const Ke = { class: "form-conts" }, xe = { class: "calendar-input" }, ze = ["id"
     }
   },
   emits: ["click"],
-  setup(e, { emit: s, slots: a }) {
-    const l = v(() => {
+  setup(e, { emit: i, slots: s }) {
+    const l = g(() => {
       const t = ["krds-badge"];
       return t.push(`${e.type}-${e.color}`), e.size && t.push(e.size), e.number && t.push("number"), e.class && t.push(e.class), t;
-    }), i = (t) => {
-      s("click", t);
+    }), o = (t) => {
+      i("click", t);
     };
-    return () => d(
+    return () => r(
       "span",
       {
         type: e.type,
@@ -1061,12 +1077,12 @@ const Ke = { class: "form-conts" }, xe = { class: "calendar-input" }, ze = ["id"
         size: e.size,
         number: e.number,
         class: l.value,
-        onClick: i
+        onClick: o
       },
-      a.default?.()
+      s.default?.()
     );
   }
-}), et = b({
+}), ct = C({
   name: "KrdsTag",
   props: {
     link: {
@@ -1091,40 +1107,40 @@ const Ke = { class: "form-conts" }, xe = { class: "calendar-input" }, ze = ["id"
     }
   },
   emits: ["remove"],
-  setup(e, { emit: s, slots: a }) {
-    const l = v(() => {
-      const n = ["krds-btn-tag"];
-      return e.link && n.push("link"), e.class && n.push(e.class), n;
-    }), i = (n) => {
-      s("remove", n);
-    }, t = () => d(
+  setup(e, { emit: i, slots: s }) {
+    const l = g(() => {
+      const a = ["krds-btn-tag"];
+      return e.link && a.push("link"), e.class && a.push(e.class), a;
+    }), o = (a) => {
+      i("remove", a);
+    }, t = () => r(
       "button",
       {
         type: "button",
         class: "btn-delete",
-        onClick: i
+        onClick: o
       },
-      [d("span", { class: "sr-only" }, "삭제")]
+      [r("span", { class: "sr-only" }, "삭제")]
     );
     return () => {
-      const n = [], y = a.default?.();
-      if (y && n.push(y), e.link || n.push(t()), e.link) {
-        const g = {
+      const a = [], u = s.default?.();
+      if (u && a.push(u), e.link || a.push(t()), e.link) {
+        const v = {
           href: e.href,
           class: l.value
         };
-        return e.target && (g.target = e.target), e.rel && (g.rel = e.rel), d("a", g, n);
+        return e.target && (v.target = e.target), e.rel && (v.rel = e.rel), r("a", v, a);
       }
-      return d(
+      return r(
         "span",
         {
           class: l.value
         },
-        n
+        a
       );
     };
   }
-}), tt = b({
+}), ft = C({
   name: "KrdsTagGroup",
   props: {
     size: {
@@ -1136,20 +1152,20 @@ const Ke = { class: "form-conts" }, xe = { class: "calendar-input" }, ze = ["id"
       default: void 0
     }
   },
-  setup(e, { slots: s }) {
-    const a = v(() => {
+  setup(e, { slots: i }) {
+    const s = g(() => {
       const l = ["krds-tag-wrap"];
       return e.size && l.push(e.size), e.class && l.push(e.class), l;
     });
-    return () => d(
+    return () => r(
       "div",
       {
-        class: a.value
+        class: s.value
       },
-      s.default?.()
+      i.default?.()
     );
   }
-}), at = b({
+}), vt = C({
   name: "KrdsMasthead",
   props: {
     class: {
@@ -1158,36 +1174,40 @@ const Ke = { class: "form-conts" }, xe = { class: "calendar-input" }, ze = ["id"
     }
   },
   emits: ["click"],
-  setup(e, { emit: s, slots: a }) {
-    const l = v(() => {
+  setup(e, { emit: i, slots: s }) {
+    const l = g(() => {
       const t = [""];
       return e.class && t.push(e.class), t;
-    }), i = (t) => {
-      s("click", t);
+    }), o = (t) => {
+      i("click", t);
     };
-    return () => d(
+    return () => r(
       "div",
       {
         id: "krds-masthead",
         class: l.value,
-        onClick: i
+        onClick: o
       },
       [
-        d("div", { class: "toggle-wrap" }, [
-          d("div", { class: "toggle-head" }, [d("div", { class: "inner" }, [d("span", { class: "nuri-txt" }, a.default?.())])])
+        r("div", { class: "toggle-wrap" }, [
+          r("div", { class: "toggle-head" }, [r("div", { class: "inner" }, [r("span", { class: "nuri-txt" }, s.default?.())])])
         ])
       ]
     );
   }
 });
-let lt = 0;
-function J(e = "krds") {
-  return `${e}-${++lt}`;
+let ht = 0;
+function de(e = "krds") {
+  return `${e}-${++ht}`;
+}
+function Pt() {
+  const e = Date.now().toString(36).slice(-4), i = Math.random().toString(36).substring(2, 5);
+  return `${e}${i}`;
 }
-function Q(...e) {
+function ce(...e) {
   return e.filter(Boolean).join(" ");
 }
-const nt = b({
+const gt = C({
   name: "KrdsToggleSwitch",
   props: {
     modelValue: {
@@ -1229,40 +1249,40 @@ const nt = b({
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: s, attrs: a }) {
-    const l = v(() => e.modelValue), i = v(() => Q("krds-form-toggle-switch", e.size, e.class)), t = (y) => {
+  setup(e, { emit: i, attrs: s }) {
+    const l = g(() => e.modelValue), o = g(() => ce("krds-form-toggle-switch", e.size, e.class)), t = (u) => {
       if (e.disabled)
         return;
-      const p = y.target.checked;
-      s("update:modelValue", p), s("change", p);
-    }, n = v(() => e.id || J("toggle-switch"));
-    return () => d(
+      const S = u.target.checked;
+      i("update:modelValue", S), i("change", S);
+    }, a = g(() => e.id || de("toggle-switch"));
+    return () => r(
       "div",
       {
-        class: i.value
+        class: o.value
       },
       [
-        d("input", {
+        r("input", {
           type: "checkbox",
-          id: n.value,
+          id: a.value,
           name: e.name,
           checked: l.value,
           disabled: e.disabled,
           onChange: t,
-          ...a
+          ...s
         }),
-        d(
+        r(
           "label",
           {
-            for: n.value
+            for: a.value
           },
           [
-            d(
+            r(
               "span",
               {
                 class: "switch-toggle"
               },
-              [d("i")]
+              [r("i")]
             ),
             e.label || ""
           ]
@@ -1270,7 +1290,7 @@ const nt = b({
       ]
     );
   }
-}), st = b({
+}), yt = C({
   name: "KrdsCheckArea",
   props: {
     class: {
@@ -1278,19 +1298,19 @@ const nt = b({
       default: void 0
     }
   },
-  setup(e, { slots: s }) {
+  setup(e, { slots: i }) {
     return () => {
-      const a = ["krds-check-area"];
-      return e.class && a.push(e.class), d(
+      const s = ["krds-check-area"];
+      return e.class && s.push(e.class), r(
         "div",
         {
-          class: a
+          class: s
         },
-        s.default?.()
+        i.default?.()
       );
     };
   }
-}), ut = b({
+}), pt = C({
   name: "KrdsCheckbox",
   props: {
     modelValue: {
@@ -1321,97 +1341,571 @@ const nt = b({
   },
   emits: ["update:modelValue", "change"],
   slots: Object,
-  setup(e, { emit: s, attrs: a, slots: l }) {
-    const i = v(() => e.modelValue), t = v(() => {
-      const g = e.chip ? "krds-form-chip" : "krds-form-check";
-      return Q(g, e.size, e.class);
-    }), n = (g) => {
+  setup(e, { emit: i, attrs: s, slots: l }) {
+    const o = g(() => e.modelValue), t = g(() => {
+      const v = e.chip ? "krds-form-chip" : "krds-form-check";
+      return ce(v, e.size, e.class);
+    }), a = (v) => {
       if (e.disabled)
         return;
-      const k = g.target.checked;
-      s("update:modelValue", k), s("change", k);
-    }, y = v(() => e.id || J("checkbox"));
+      const _ = v.target.checked;
+      i("update:modelValue", _), i("change", _);
+    }, u = g(() => e.id || de("checkbox"));
     return () => {
-      const g = [
-        d("input", {
+      const v = [
+        r("input", {
           type: "checkbox",
-          id: y.value,
-          checked: i.value,
+          id: u.value,
+          checked: o.value,
           disabled: e.disabled,
-          onChange: n,
-          ...a
+          onChange: a,
+          ...s
         }),
-        d(
+        r(
           "label",
           {
-            for: y.value
+            for: u.value
           },
           l.default?.()
         )
       ];
-      return l.description && !e.chip && g.push(d("div", { class: "krds-form-check-cnt" }, d("p", { class: "krds-form-check-p" }, l.description()))), d(
+      return l.description && !e.chip && v.push(r("div", { class: "krds-form-check-cnt" }, r("p", { class: "krds-form-check-p" }, l.description()))), r(
         "div",
         {
           class: t.value
         },
-        g
+        v
+      );
+    };
+  }
+}), mt = C({
+  name: "KrdsStepIndicator",
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { slots: i }) {
+    const s = g(() => {
+      const u = ["krds-step-wrap"];
+      return e.class && u.push(e.class), u;
+    }), l = (u) => {
+      const v = e.modelValue || 0;
+      return u < v ? "done" : u === v ? "active" : "pending";
+    }, o = M(0), t = () => {
+      o.value = 0;
+    }, a = () => o.value++;
+    return Be("stepIndicator", {
+      activeStep: g(() => e.modelValue || 0),
+      getStepStatus: l,
+      getNextStepIndex: a,
+      resetStepIndex: t
+    }), () => (t(), r(
+      "ol",
+      {
+        class: s.value
+      },
+      i.default?.()
+    ));
+  }
+}), bt = C({
+  name: "KrdsStep",
+  props: {
+    step: {
+      type: [String, Number],
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    },
+    status: {
+      type: String,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: i, slots: s }) {
+    const l = Ke("stepIndicator"), o = l ? l.getNextStepIndex() : -1, t = g(() => e.status ? e.status : l && o >= 0 ? l.getStepStatus(o) : "pending"), a = g(() => {
+      const v = [t.value];
+      return e.class && v.push(e.class), v;
+    }), u = (v) => {
+      i("click", v, e.step);
+    };
+    return () => {
+      const v = t.value === "active";
+      return r(
+        "li",
+        {
+          class: a.value,
+          onClick: u
+        },
+        [
+          r("span", [
+            // 현재 단계 표시 (활성 상태일 때만)
+            v && r("em", { class: "sr-only" }, "현재단계"),
+            // 단계 번호
+            r("i", { class: "step" }, e.step),
+            // 단계 제목
+            r("span", { class: "step-tit" }, e.title),
+            // 슬롯 내용 (추가 콘텐츠가 있는 경우)
+            s.default?.()
+          ])
+        ]
       );
     };
   }
-}), H = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), kt = C({
+  name: "KrdsSkipLink",
+  props: {
+    /**
+     * 건너뛸 대상 요소의 ID
+     * @example '#main-content', '#breadcrumb'
+     */
+    href: {
+      type: String,
+      required: !0,
+      validator: (e) => e.startsWith("#")
+    },
+    /**
+     * 추가 CSS 클래스
+     */
+    class: {
+      type: [String, Array, Object],
+      default: void 0
+    },
+    /**
+     * 요소 ID
+     */
+    id: {
+      type: String,
+      default: "krds-skip-link"
+    }
+  },
+  setup(e, { slots: i }) {
+    return () => r(
+      "div",
+      {
+        id: e.id,
+        class: e.class
+      },
+      [
+        r(
+          "a",
+          {
+            href: e.href
+          },
+          i.default?.()
+        )
+      ]
+    );
+  }
+}), St = ["id", "aria-label"], Ct = { class: "breadcrumb" }, wt = ["href", "aria-current", "onClick"], _t = { key: 0 }, Dt = /* @__PURE__ */ C({
+  __name: "KrdsBreadcrumb",
+  props: {
+    items: {},
+    id: { default: void 0 },
+    ariaLabel: { default: "현재 경로" },
+    showHomeIcon: { type: Boolean, default: !0 }
+  },
+  emits: ["item-click"],
+  setup(e, { emit: i }) {
+    const s = e, l = i, o = (a) => a === s.items.length - 1, t = (a, u) => {
+      a.onClick && a.onClick(u), l("item-click", a, u);
+    };
+    return (a, u) => (w(), D("nav", {
+      id: a.id,
+      class: "krds-breadcrumb-wrap",
+      "aria-label": a.ariaLabel
+    }, [
+      h("ol", Ct, [
+        (w(!0), D(E, null, F(a.items, (v, S) => (w(), D("li", {
+          key: `breadcrumb-${S}`,
+          class: L({ home: S === 0 && a.showHomeIcon })
+        }, [
+          h("a", {
+            href: v.href || "#",
+            class: "txt",
+            "aria-current": o(S) ? "page" : void 0,
+            onClick: (_) => t(v, _)
+          }, [
+            S === 0 && a.showHomeIcon ? J("", !0) : (w(), D("span", _t, N(v.text), 1))
+          ], 8, wt)
+        ], 2))), 128))
+      ])
+    ], 8, St));
+  }
+}), Bt = C({
+  name: "KrdsInPageNavigation",
+  props: {
+    title: {
+      type: String,
+      default: void 0
+    },
+    caption: {
+      type: String,
+      default: "이 페이지의 구성"
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    autoActive: {
+      type: Boolean,
+      default: !0
+    },
+    headerTopSelector: {
+      type: String,
+      default: "#krds-masthead"
+    },
+    headerInnerSelector: {
+      type: String,
+      default: "#krds-header .header-in"
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["itemClick"],
+  slots: Object,
+  setup(e, { emit: i, slots: s }) {
+    const l = M(""), o = M(/* @__PURE__ */ new Map()), t = g(() => {
+      const d = ["krds-in-page-navigation-type"];
+      return e.class && d.push(e.class), d;
+    }), a = () => {
+      const d = e.headerTopSelector, n = e.headerInnerSelector, p = document.querySelector(d)?.clientHeight || 0, f = document.querySelector(n)?.clientHeight || 0;
+      return p + f;
+    }, u = (d, n) => {
+      if (i("itemClick", d, n), d.href.startsWith("#")) {
+        n.preventDefault();
+        const p = document.querySelector(d.href);
+        if (p) {
+          const f = a();
+          if (window.scrollTo({
+            left: 0,
+            top: p.getBoundingClientRect().top + window.scrollY - f,
+            behavior: "smooth"
+          }), l.value = d.href, n instanceof KeyboardEvent) {
+            const b = p.querySelector(".sec-tit, h1, h2, h3, h4, h5, h6");
+            b && b instanceof HTMLElement && (b.setAttribute("tabindex", "-1"), b.focus({ preventScroll: !0 }));
+          }
+        }
+      }
+    }, v = () => {
+      o.value.clear(), e.items && e.items.filter((d) => d.href.startsWith("#")).forEach((d) => {
+        const n = document.querySelector(d.href);
+        n && o.value.set(d.href, n);
+      });
+    }, S = () => {
+      if (!e.autoActive || !e.items || o.value.size === 0) return;
+      const d = window.innerHeight, n = Math.ceil(d / 5), p = window.scrollY + d, f = document.body.scrollHeight, b = e.items.filter((z) => z.href.startsWith("#") && o.value.has(z.href)).map((z) => ({
+        href: z.href,
+        element: o.value.get(z.href),
+        item: z
+      }));
+      if (b.length === 0) return;
+      const K = b[0], O = b[b.length - 1], T = K.element.offsetTop;
+      let P = "";
+      if (p >= f)
+        P = O.href;
+      else if (window.scrollY <= T)
+        P = K.href;
+      else
+        for (const z of b) {
+          const H = z.element.offsetHeight, B = z.element.offsetTop - n;
+          if (window.scrollY > B && window.scrollY <= B + H) {
+            P = z.href;
+            break;
+          }
+        }
+      P && P !== l.value && (l.value = P);
+    }, _ = () => {
+      if (!e.items) return;
+      const d = e.items.find((n) => n.active);
+      d ? l.value = d.href : e.items.length > 0 && (l.value = e.items[0].href);
+    };
+    re(() => {
+      if (_(), e.autoActive) {
+        v(), S(), window.addEventListener("scroll", S, { passive: !0 });
+        const d = new MutationObserver(() => {
+          v();
+        });
+        d.observe(document.body, {
+          childList: !0,
+          subtree: !0
+        }), ae(() => {
+          d.disconnect();
+        });
+      }
+    }), ae(() => {
+      e.autoActive && (window.removeEventListener("scroll", S), o.value.clear());
+    });
+    const V = () => !e.caption && !e.title ? null : r("div", { class: "in-page-navigation-header" }, [
+      e.caption && r("p", { class: "quick-caption" }, e.caption),
+      e.title && r("p", { class: "quick-title" }, e.title)
+    ]), y = () => {
+      if (!e.items) return null;
+      const d = e.items.map((n) => {
+        const p = l.value === n.href || !e.autoActive && n.active;
+        return r("li", { key: n.href }, [
+          r(
+            "a",
+            {
+              href: n.href,
+              class: p ? "active" : "",
+              onClick: (f) => u(n, f),
+              onKeydown: (f) => {
+                (f.key === "Enter" || f.key === " ") && (f.preventDefault(), u(n, f));
+              }
+            },
+            n.text
+          )
+        ]);
+      });
+      return r("nav", { class: "in-page-navigation-list" }, [r("ul", {}, d)]);
+    }, $ = () => s.action ? r("div", { class: "in-page-navigation-action" }, [s.action()]) : null;
+    return () => r("div", { class: t.value }, [
+      r("div", { class: "krds-in-page-navigation-area" }, [V(), y(), $()].filter(Boolean))
+    ]);
+  }
+}), Kt = ["id"], xt = { class: "page-links" }, It = ["href", "aria-current", "onClick"], Vt = { key: 0 }, zt = ["aria-label"], Mt = /* @__PURE__ */ C({
+  __name: "KrdsPagination",
+  props: {
+    modelValue: { default: 1 },
+    min: { default: 1 },
+    max: {},
+    id: { default: void 0 },
+    ariaLabel: { default: "페이지 내비게이션" },
+    pageRange: { default: 8 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: i }) {
+    const s = e, l = i, o = g(() => Math.max(1, s.min)), t = g(() => s.modelValue ?? o.value), a = g(() => t.value <= o.value), u = g(() => t.value >= s.max), v = g(() => {
+      if (!a.value)
+        return "#";
+    }), S = g(() => {
+      if (!u.value)
+        return "#";
+    }), _ = g(() => {
+      const { pageRange: d, max: n } = s, p = 1, f = [];
+      if (n <= d + 2 * p)
+        for (let b = o.value; b <= n; b++)
+          f.push({
+            type: "page",
+            key: `page-${b}`,
+            page: b,
+            href: "#"
+          });
+      else {
+        const b = Math.min(p, n), K = Math.max(n - p + 1, 1), O = Math.max(o.value, t.value - Math.floor(d / 2)), T = Math.min(n, O + d - 1), P = Math.max(o.value, T - d + 1);
+        for (let B = o.value; B <= b; B++)
+          f.push({
+            type: "page",
+            key: `page-${B}`,
+            page: B,
+            href: "#"
+          });
+        P > b + 1 && f.push({
+          type: "ellipsis",
+          key: "ellipsis-left",
+          ariaLabel: "페이지 생략"
+        });
+        const z = Math.max(P, b + 1), H = Math.min(T, K - 1);
+        for (let B = z; B <= H; B++)
+          f.push({
+            type: "page",
+            key: `page-${B}`,
+            page: B,
+            href: "#"
+          });
+        T < K - 1 && f.push({
+          type: "ellipsis",
+          key: "ellipsis-right",
+          ariaLabel: "페이지 생략"
+        });
+        for (let B = K; B <= n; B++)
+          f.push({
+            type: "page",
+            key: `page-${B}`,
+            page: B,
+            href: "#"
+          });
+      }
+      return f;
+    }), V = (d, n) => {
+      if (d === t.value) {
+        n.preventDefault();
+        return;
+      }
+      l("update:modelValue", d);
+    }, y = (d) => {
+      if (a.value) {
+        d.preventDefault();
+        return;
+      }
+      const n = t.value - 1;
+      l("update:modelValue", n);
+    }, $ = (d) => {
+      if (u.value) {
+        d.preventDefault();
+        return;
+      }
+      const n = t.value + 1;
+      l("update:modelValue", n);
+    };
+    return (d, n) => {
+      const p = xe("sr-only");
+      return w(), D("div", {
+        id: d.id,
+        class: "krds-pagination"
+      }, [
+        (w(), W(ne(a.value ? "span" : "a"), {
+          href: a.value ? void 0 : v.value,
+          class: L(["page-navi", "prev", { disabled: a.value }]),
+          onClick: y
+        }, {
+          default: U(() => [...n[0] || (n[0] = [
+            R(" 이전 ", -1)
+          ])]),
+          _: 1
+        }, 8, ["href", "class"])),
+        h("div", xt, [
+          (w(!0), D(E, null, F(_.value, (f) => (w(), D(E, {
+            key: f.key
+          }, [
+            f.type === "page" ? (w(), D("a", {
+              key: 0,
+              href: f.href || "#",
+              class: L(["page-link", { active: f.page === t.value }]),
+              "aria-current": f.page === t.value ? "page" : void 0,
+              onClick: (b) => V(f.page, b)
+            }, [
+              f.page === t.value ? Y((w(), D("span", Vt, [...n[1] || (n[1] = [
+                R("현재페이지", -1)
+              ])])), [
+                [p]
+              ]) : J("", !0),
+              R(" " + N(f.page), 1)
+            ], 10, It)) : f.type === "ellipsis" ? (w(), D("span", {
+              key: 1,
+              class: "page-link link-dot",
+              "aria-label": f.ariaLabel
+            }, null, 8, zt)) : J("", !0)
+          ], 64))), 128))
+        ]),
+        (w(), W(ne(u.value ? "span" : "a"), {
+          href: u.value ? void 0 : S.value,
+          class: L(["page-navi", "next", { disabled: u.value }]),
+          onClick: $
+        }, {
+          default: U(() => [...n[2] || (n[2] = [
+            R(" 다음 ", -1)
+          ])]),
+          _: 1
+        }, 8, ["href", "class"]))
+      ], 8, Kt);
+    };
+  }
+}), le = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  KrdsBadge: dt,
+  KrdsBreadcrumb: Dt,
+  KrdsButton: oe,
+  KrdsButtonGroup: Ie,
+  KrdsCheckArea: yt,
+  KrdsCheckbox: pt,
+  KrdsDateInput: rt,
+  KrdsFileUpload: ut,
+  KrdsFormGroup: Le,
+  KrdsFormHint: Pe,
+  KrdsFormLabel: $e,
+  KrdsIcon: Ve,
+  KrdsInPageNavigation: Bt,
+  KrdsInput: Me,
+  KrdsLink: ze,
+  KrdsMasthead: vt,
+  KrdsPagination: Mt,
+  KrdsSkipLink: kt,
+  KrdsSpinner: ue,
+  KrdsStep: bt,
+  KrdsStepIndicator: mt,
+  KrdsTag: ct,
+  KrdsTagGroup: ft,
+  KrdsTextarea: ot,
+  KrdsToggleSwitch: gt
+}, Symbol.toStringTag, { value: "Module" })), Q = {
+  mounted(e, i) {
+    i.value !== !1 && e.classList.add("sr-only");
+  },
+  updated(e, i) {
+    i.value === !1 ? e.classList.remove("sr-only") : e.classList.add("sr-only");
+  },
+  unmounted(e) {
+    e.classList.remove("sr-only");
+  }
+}, se = {
+  "sr-only": Q
+}, fe = (e) => {
+  e.directive("sr-only", Q);
+}, ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  KrdsBadge: Ze,
-  KrdsButton: U,
-  KrdsButtonGroup: pe,
-  KrdsCheckArea: st,
-  KrdsCheckbox: ut,
-  KrdsDateInput: Je,
-  KrdsFileUpload: Xe,
-  KrdsFormGroup: De,
-  KrdsFormHint: we,
-  KrdsFormLabel: Ce,
-  KrdsIcon: be,
-  KrdsInput: Se,
-  KrdsLink: ke,
-  KrdsMasthead: at,
-  KrdsTag: et,
-  KrdsTagGroup: tt,
-  KrdsTextarea: Qe,
-  KrdsToggleSwitch: nt
-}, Symbol.toStringTag, { value: "Module" })), it = {
-  install(e, s = {}) {
-    e.provide("krds:config", s);
-    const a = s.components || Object.keys(H);
-    a.forEach((l) => {
-      const i = H[l];
-      i && e.component(l, i);
-    }), e.config.globalProperties.$krds = {
+  default: se,
+  directives: se,
+  installDirectives: fe,
+  vSrOnly: Q
+}, Symbol.toStringTag, { value: "Module" })), Lt = {
+  install(e, i = {}) {
+    e.provide("krds:config", i);
+    const s = i.components || Object.keys(le);
+    s.forEach((l) => {
+      const o = le[l];
+      o && e.component(l, o);
+    }), typeof ie == "object" && ie !== null && fe(e), e.config.globalProperties.$krds = {
       version: "__VERSION__"
-    }, process.env.NODE_ENV !== "production" && console.log(`[KRDS Vue] v__VERSION__ 설치 완료 - 컴포넌트: ${a.length}개`);
+    }, process.env.NODE_ENV !== "production" && console.log(`[KRDS Vue] v__VERSION__ 설치 완료 - 컴포넌트: ${s.length}개`);
   }
-}, dt = "__VERSION__";
+}, Nt = "__VERSION__";
 export {
-  Ze as KrdsBadge,
-  U as KrdsButton,
-  pe as KrdsButtonGroup,
-  st as KrdsCheckArea,
-  ut as KrdsCheckbox,
-  Je as KrdsDateInput,
-  Xe as KrdsFileUpload,
-  De as KrdsFormGroup,
-  we as KrdsFormHint,
-  Ce as KrdsFormLabel,
-  be as KrdsIcon,
-  Se as KrdsInput,
-  ke as KrdsLink,
-  at as KrdsMasthead,
-  et as KrdsTag,
-  tt as KrdsTagGroup,
-  Qe as KrdsTextarea,
-  nt as KrdsToggleSwitch,
-  Q as classNames,
-  it as default,
-  J as generateId,
-  dt as version
+  dt as KrdsBadge,
+  Dt as KrdsBreadcrumb,
+  oe as KrdsButton,
+  Ie as KrdsButtonGroup,
+  yt as KrdsCheckArea,
+  pt as KrdsCheckbox,
+  rt as KrdsDateInput,
+  ut as KrdsFileUpload,
+  Le as KrdsFormGroup,
+  Pe as KrdsFormHint,
+  $e as KrdsFormLabel,
+  Ve as KrdsIcon,
+  Bt as KrdsInPageNavigation,
+  Me as KrdsInput,
+  ze as KrdsLink,
+  vt as KrdsMasthead,
+  Mt as KrdsPagination,
+  kt as KrdsSkipLink,
+  ue as KrdsSpinner,
+  bt as KrdsStep,
+  mt as KrdsStepIndicator,
+  ct as KrdsTag,
+  ft as KrdsTagGroup,
+  ot as KrdsTextarea,
+  gt as KrdsToggleSwitch,
+  ce as classNames,
+  Lt as default,
+  de as generateId,
+  Pt as generateUid,
+  Nt as version
 };
 //# sourceMappingURL=krds-vue.es.js.map