@kong/kongponents 9.56.1 → 9.56.2

package/dist/kongponents.es133.js

@@ -1,19 +1,19 @@
 import { defineComponent as Re, useCssVars as Ve, useAttrs as We, useSlots as Me, useId as ie, computed as d, ref as b, useTemplateRef as O, watch as L, nextTick as Ue, onMounted as Ge, onBeforeUnmount as He, openBlock as m, createElementBlock as k, normalizeClass as R, createBlock as V, mergeProps as Y, createSlots as ne, withCtx as y, createTextVNode as j, toDisplayString as W, renderSlot as h, createCommentVNode as w, createVNode as I, unref as x, createElementVNode as ue, withKeys as de, withModifiers as ce, Transition as Je } from "vue";
-import Qe from "./kongponents.es182.js";
+import Qe from "./kongponents.es200.js";
 import Ye from "./kongponents.es51.js";
 import je from "./kongponents.es49.js";
 import Xe from "./kongponents.es56.js";
 import Ze from "./kongponents.es23.js";
-import _e from "./kongponents.es201.js";
-import et from "./kongponents.es202.js";
-import tt from "./kongponents.es185.js";
+import _e from "./kongponents.es210.js";
+import et from "./kongponents.es211.js";
+import tt from "./kongponents.es212.js";
 import lt from "./kongponents.es176.js";
-import ot from "./kongponents.es186.js";
-import { ResizeObserverHelper as at } from "./kongponents.es187.js";
+import ot from "./kongponents.es190.js";
+import { ResizeObserverHelper as at } from "./kongponents.es213.js";
 import { sanitizeInput as fe } from "./kongponents.es172.js";
-import { useEventListener as rt } from "./kongponents.es188.js";
+import { useEventListener as rt } from "./kongponents.es203.js";
 import { getUniqueStringId as st } from "./kongponents.es153.js";
-import { normalizeSize as ve } from "./kongponents.es189.js";
+import { normalizeSize as ve } from "./kongponents.es182.js";
 import { KUI_SPACE_40 as it } from "./kongponents.es181.js";
 const nt = ["id"], ut = ["aria-live"], dt = {
   key: 0,
@@ -67,9 +67,9 @@ const nt = ["id"], ut = ["aria-live"], dt = {
   emits: ["selected", "input", "change", "update:modelValue", "query-change", "item-added", "item-removed"],
   setup(t, { emit: T }) {
     Ve((e) => ({
-      v6d83f125: we.value,
-      v40842193: z.value,
-      v68a417c8: Se.value
+      v354bd763: we.value,
+      ffec3d5e: z.value,
+      adbf49c4: Se.value
     }));
     const { stripRequiredLabel: M } = Qe(), f = T, v = We(), $ = Me(), me = ie(), X = d(() => v.id ? String(v.id) : me), U = b(!1), G = b(), pe = d(() => {
       var e;
@@ -270,7 +270,7 @@ const nt = ["id"], ut = ["aria-live"], dt = {
           I(Xe, Y({ ref: "popperElement" }, Ie.value, {
             "close-on-popover-click": "",
             "hide-close-icon": "",
-            offset: x(it),
+            offset: `var(--kui-space-40, ${x(it)})`,
             onClose: () => De(o, r.value),
             onOpen: () => Oe(o),
             onPopoverClick: () => ze(o)

package/dist/kongponents.es140.js

@@ -1,8 +1,8 @@
 import { defineComponent as C, useCssVars as h, useTemplateRef as E, computed as b, watch as T, onUnmounted as B, openBlock as l, createElementBlock as s, createVNode as n, Transition as c, withCtx as f, normalizeClass as O, createCommentVNode as a, createElementVNode as d, renderSlot as m, createTextVNode as V, toDisplayString as $, withModifiers as g, unref as v } from "vue";
-import { onClickOutside as w } from "./kongponents.es188.js";
+import { onClickOutside as w } from "./kongponents.es203.js";
 import x from "./kongponents.es176.js";
 import { KUI_COLOR_TEXT_NEUTRAL as z } from "./kongponents.es181.js";
-import { normalizeSize as L } from "./kongponents.es189.js";
+import { normalizeSize as L } from "./kongponents.es182.js";
 const N = { class: "k-slideout" }, R = {
   key: 0,
   ref: "slideoutContainerElement",

package/dist/kongponents.es142.js

@@ -1,5 +1,5 @@
 import { defineComponent as s, openBlock as l, createElementBlock as a, Fragment as n, renderList as m, createBlock as o, createCommentVNode as p } from "vue";
-import u from "./kongponents.es230.js";
+import u from "./kongponents.es237.js";
 const c = {
   key: 0,
   class: "k-stepper"

package/dist/kongponents.es144.js

@@ -1,4 +1,4 @@
-import { defineComponent as ft, useCssVars as gt, useAttrs as yt, useSlots as mt, useId as pt, ref as i, computed as u, watch as $, onMounted as bt, openBlock as c, createElementBlock as p, renderSlot as A, createVNode as E, unref as h, createCommentVNode as H, createBlock as D, createSlots as Ae, withCtx as F, createTextVNode as Z, toDisplayString as x, createElementVNode as M, normalizeStyle as He, normalizeClass as L, Fragment as se, renderList as oe, withModifiers as Me, mergeProps as Ie, toHandlers as ht } from "vue";
+import { defineComponent as ft, useCssVars as gt, useAttrs as yt, useSlots as mt, useId as bt, ref as r, computed as u, watch as $, onMounted as pt, openBlock as c, createElementBlock as b, renderSlot as A, createVNode as E, unref as h, createCommentVNode as H, createBlock as D, createSlots as Ae, withCtx as F, createTextVNode as Z, toDisplayString as x, createElementVNode as M, normalizeStyle as He, normalizeClass as L, Fragment as se, renderList as oe, withModifiers as Me, mergeProps as Ie, toHandlers as ht } from "vue";
 import Te from "./kongponents.es32.js";
 import we from "./kongponents.es45.js";
 import kt from "./kongponents.es20.js";
@@ -6,15 +6,15 @@ import kt from "./kongponents.es20.js";
 import St from "./kongponents.es55.js";
 import Ct from "./kongponents.es24.js";
 /* empty css                 */
-import zt from "./kongponents.es203.js";
+import zt from "./kongponents.es186.js";
 import $t from "./kongponents.es178.js";
-import Pt from "./kongponents.es182.js";
+import Pt from "./kongponents.es200.js";
 import "./kongponents.es5.js";
 import "./kongponents.es10.js";
 import { EmptyStateIconVariants as Ot } from "./kongponents.es11.js";
 import { KUI_ICON_SIZE_30 as Ne, KUI_COLOR_TEXT_NEUTRAL as Ke } from "./kongponents.es181.js";
-import At from "./kongponents.es207.js";
-import { normalizeSize as Ht } from "./kongponents.es189.js";
+import At from "./kongponents.es232.js";
+import { normalizeSize as Ht } from "./kongponents.es182.js";
 import { DEFAULT_PAGE_SIZE as Ee } from "./kongponents.es173.js";
 const Mt = { class: "k-table" }, It = {
   key: 0,
@@ -257,21 +257,21 @@ const Mt = { class: "k-table" }, It = {
   emits: ["cell-click", "row-click", "error-action-click", "empty-state-action-click", "update:table-preferences", "sort", "state"],
   setup(s, { emit: Y }) {
     gt((e) => ({
-      ae6ef3f8: Je.value
+      v60cb3642: Je.value
     }));
-    const { useDebounce: re, useRequest: Fe, useSwrvState: Le, clientSideSorter: ie } = Pt(), l = s, U = Y, ne = yt(), Re = mt(), k = pt(), I = {
+    const { useDebounce: ie, useRequest: Fe, useSwrvState: Le, clientSideSorter: re } = Pt(), l = s, U = Y, ne = yt(), Re = mt(), k = bt(), I = {
       pageSize: 15,
       page: 1,
       query: "",
       sortColumnKey: "",
       sortColumnOrder: "desc",
       offset: null
-    }, b = i([]), ue = i(), R = i([]), S = i([]), V = i(""), T = i(""), G = i(""), ce = u(() => R.value.filter((e) => e.hidable).length > 0), B = u(() => !!(ce.value && !l.error && !O.value && !l.loading && b.value && b.value.length)), Ve = u(() => R.value.filter((e) => e.hidable)), Be = u(() => B.value ? l.tablePreferences.columnVisibility || {} : {}), J = i(B.value ? l.tablePreferences.columnVisibility || {} : {}), _ = i(0), w = i(!1), d = i(1), N = i(15), de = i(""), y = i(""), f = i("desc"), P = i(null), C = i([]), ve = i(!0), Q = i(!1), ee = i(!1), je = u(() => !!Re.toolbar || B.value), qe = u(() => ({
+    }, p = r([]), ue = r(), R = r([]), S = r([]), V = r(""), T = r(""), G = r(""), ce = u(() => R.value.filter((e) => e.hidable).length > 0), B = u(() => !!(ce.value && !l.error && !O.value && !l.loading && p.value && p.value.length)), Ve = u(() => R.value.filter((e) => e.hidable)), Be = u(() => B.value ? l.tablePreferences.columnVisibility || {} : {}), J = r(B.value ? l.tablePreferences.columnVisibility || {} : {}), _ = r(0), w = r(!1), d = r(1), N = r(15), de = r(""), y = r(""), f = r("desc"), P = r(null), C = r([]), ve = r(!0), Q = r(!1), ee = r(!1), je = u(() => !!Re.toolbar || B.value), qe = u(() => ({
       maxHeight: Ht(l.maxHeight)
     })), We = (e) => `column-${e}`, K = (e) => `tooltip-${e}`, te = (e) => e, fe = (e, a) => (t, o) => {
-      const r = /^on[^a-z]/, n = {};
+      const i = /^on[^a-z]/, n = {};
       for (const v in a)
-        r.test(v) && a[v] && (n[v] = a[v]);
+        i.test(v) && a[v] && (n[v] = a[v]);
       return Object.keys(n).reduce((v, z) => {
         if (z.indexOf(e) === 0) {
           const g = z.split(e);
@@ -280,16 +280,16 @@ const Mt = { class: "k-table" }, It = {
         return v;
       }, {});
     }, xe = u(() => (e, a) => {
-      const t = fe("onRow:", ne)(a, "row"), o = fe("onCell:", ne)(e, "cell"), r = ["a", "button", "label", "input", "select"];
+      const t = fe("onRow:", ne)(a, "row"), o = fe("onCell:", ne)(e, "cell"), i = ["a", "button", "label", "input", "select"];
       return t.click && (Q.value = !0), {
         ...t,
         ...o,
         click(n) {
           const v = n.target.className;
-          let z = r.includes(n.target.tagName.toLowerCase()), g = !1;
+          let z = i.includes(n.target.tagName.toLowerCase()), g = !1;
           typeof v == "string" || Array.isArray(v) ? g = v.includes("k-popover") : typeof v == "object" && (g = Object.keys(v).includes("k-popover")), n.target.closest(".popover-content") !== null && (g = !0);
-          for (let m = 0; m < r.length; m++)
-            if (n.target.closest(r[m]) !== null) {
+          for (let m = 0; m < i.length; m++)
+            if (n.target.closest(i[m]) !== null) {
               z = !0;
               break;
             }
@@ -305,7 +305,7 @@ const Mt = { class: "k-table" }, It = {
             }
         }
       };
-    }), j = i(l.resizeColumns ? l.tablePreferences.columnWidths || {} : {}), ge = u(() => {
+    }), j = r(l.resizeColumns ? l.tablePreferences.columnWidths || {} : {}), ge = u(() => {
       const e = {};
       for (const a in j.value) {
         if (!j.value[a])
@@ -352,27 +352,27 @@ const Mt = { class: "k-table" }, It = {
           return `${parseInt(t.height, 10)}px`;
       }
       return "auto";
-    }), pe = (e, a) => {
+    }), be = (e, a) => {
       var z;
       if (e.button !== 0)
         return;
       let t = 0, o = 0;
       V.value = a;
-      let r = null;
+      let i = null;
       (z = me.value) == null || z.forEach((g) => {
-        g.getAttribute("data-testid") === `table-header-${a}` && (r = document == null ? void 0 : document.querySelector(`[data-tableid="${k}"] [data-testid="table-header-${a}"]`));
+        g.getAttribute("data-testid") === `table-header-${a}` && (i = document == null ? void 0 : document.querySelector(`[data-tableid="${k}"] [data-testid="table-header-${a}"]`));
       });
       const n = (g) => {
         const m = g.clientX - t;
-        r == null || r.setAttribute("style", `width: ${o + m}px`), j.value[a] = o + m;
+        i == null || i.setAttribute("style", `width: ${o + m}px`), j.value[a] = o + m;
       }, v = () => {
         V.value = "", document == null || document.removeEventListener("mousemove", n), document == null || document.removeEventListener("mouseup", v), X();
       };
-      if (t = e.clientX, r) {
-        const g = window == null ? void 0 : window.getComputedStyle(r);
+      if (t = e.clientX, i) {
+        const g = window == null ? void 0 : window.getComputedStyle(i);
         g != null && g.width && (o = parseInt(g.width, 10)), document == null || document.addEventListener("mousemove", n), document == null || document.addEventListener("mouseup", v);
       }
-    }, be = i(!0), Qe = async () => {
+    }, pe = r(!0), Qe = async () => {
       var t, o;
       const e = l.searchInput, a = await l.fetcher({
         pageSize: N.value,
@@ -382,42 +382,42 @@ const Mt = { class: "k-table" }, It = {
         sortColumnOrder: f.value,
         offset: P.value
       });
-      return b.value = a.data, _.value = l.paginationTotalItems || a.total || ((t = a.data) == null ? void 0 : t.length), l.paginationOffset && ((o = a.pagination) != null && o.offset ? (q.value = a.pagination.offset, C.value[d.value] || C.value.push(a.pagination.offset)) : q.value = null, ve.value = a.pagination && "hasNextPage" in a.pagination ? a.pagination.hasNextPage : !0), b.value.length === 0 && d.value > 1 && (d.value = 1, C.value = [null], P.value = null), be.value = !1, a;
+      return p.value = a.data, _.value = l.paginationTotalItems || a.total || ((t = a.data) == null ? void 0 : t.length), l.paginationOffset && ((o = a.pagination) != null && o.offset ? (q.value = a.pagination.offset, C.value[d.value] || C.value.push(a.pagination.offset)) : q.value = null, ve.value = a.pagination && "hasNextPage" in a.pagination ? a.pagination.hasNextPage : !0), p.value.length === 0 && d.value > 1 && (d.value = 1, C.value = [null], P.value = null), pe.value = !1, a;
     }, Xe = () => {
       const e = {
         ...I,
         ...l.initialFetcherParams
       };
-      d.value = e.page ?? I.page, N.value = e.pageSize ?? I.pageSize, de.value = e.query ?? I.query, y.value = e.sortColumnKey ?? I.sortColumnKey, f.value = e.sortColumnOrder ?? I.sortColumnOrder, l.clientSort && y.value && f.value && ie(y.value, "", f.value, b.value), l.paginationOffset && (P.value = e.offset, C.value.push(e.offset)), l.headers && l.headers.length && (R.value = l.headers), ee.value = !0;
+      d.value = e.page ?? I.page, N.value = e.pageSize ?? I.pageSize, de.value = e.query ?? I.query, y.value = e.sortColumnKey ?? I.sortColumnKey, f.value = e.sortColumnOrder ?? I.sortColumnOrder, l.clientSort && y.value && f.value && re(y.value, "", f.value, p.value), l.paginationOffset && (P.value = e.offset, C.value.push(e.offset)), l.headers && l.headers.length && (R.value = l.headers), ee.value = !0;
     };
     $(() => l.headers, (e) => {
       e && e.length && (R.value = e);
     }, { deep: !0 });
-    const ae = u(() => C.value[d.value - 1]), q = i(null), De = u(() => {
+    const ae = u(() => C.value[d.value - 1]), q = r(null), De = u(() => {
       if (!l.fetcher || !ee.value)
         return "";
       let e = k;
       return l.cacheIdentifier && (e = l.cacheIdentifier), l.fetcherCacheKey && (e += `-${l.fetcherCacheKey}`), `k-table_${e}`;
-    }), he = i(""), { debouncedFn: Ze, generateDebouncedFn: Ye } = re((e) => {
+    }), he = r(""), { debouncedFn: Ze, generateDebouncedFn: Ye } = ie((e) => {
       he.value = e;
     }, 350), _e = Ye(0), { data: ke, error: Se, revalidate: et, isValidating: tt } = Fe(
       () => De.value,
       () => Qe(),
       { revalidateOnFocus: !1, revalidateDebounce: 0 }
-    ), { state: le, hasData: at, swrvState: Ce } = Le(ke, Se, tt), O = i(!0), ze = u(() => ({
+    ), { state: le, hasData: at, swrvState: Ce } = Le(ke, Se, tt), O = r(!0), ze = u(() => ({
       hasData: at.value,
       state: le.value
-    })), $e = u(() => O.value ? "loading" : Se.value ? "error" : "success"), { debouncedFn: Pe, generateDebouncedFn: lt } = re(et, 500), st = lt(0), ot = (e) => {
+    })), $e = u(() => O.value ? "loading" : Se.value ? "error" : "success"), { debouncedFn: Pe, generateDebouncedFn: lt } = ie(et, 500), st = lt(0), ot = (e) => {
       const { key: a, useSortHandlerFunction: t } = e, o = y.value + "";
       d.value = 1, y.value ? a === y.value ? f.value === "asc" ? f.value = "desc" : f.value = "asc" : (y.value = a, f.value = "asc", C.value = [null]) : (y.value = a, f.value = "asc", C.value = [null]), l.clientSort ? t && l.sortHandlerFunction ? l.sortHandlerFunction({
         key: a,
         prevKey: o,
         sortColumnOrder: f.value,
-        data: b.value
-      }) : ie(a, o, f.value, b.value) : l.paginationOffset || Pe(), X();
-    }, rt = ({ page: e }) => {
+        data: p.value
+      }) : re(a, o, f.value, p.value) : l.paginationOffset || Pe(), X();
+    }, it = ({ page: e }) => {
       d.value = e;
-    }, it = ({ pageSize: e }) => {
+    }, rt = ({ pageSize: e }) => {
       C.value = [null], P.value = null, N.value = e, d.value = 1, X();
     }, nt = (e) => {
       e && e.target && typeof e.target.scrollTop == "number" && (e.target.scrollTop > 1 ? w.value = !0 : e.target.scrollTop === 0 && (w.value = !w.value));
@@ -433,12 +433,12 @@ const Mt = { class: "k-table" }, It = {
       d.value++, P.value = q.value;
     }, dt = () => {
       d.value--, P.value = ae.value;
-    }, vt = u(() => !!(l.fetcher && !l.disablePagination && !(!l.paginationOffset && l.hidePaginationWhenOptional && _.value <= (l.paginationPageSizes[0] ?? Ee)) && !(l.paginationOffset && l.hidePaginationWhenOptional && !ae.value && !q.value && b.value.length < (l.paginationPageSizes[0] ?? Ee)))), Oe = (e) => e.toLowerCase().replace(/[^[a-z0-9]/gi, "-");
+    }, vt = u(() => !!(l.fetcher && !l.disablePagination && !(!l.paginationOffset && l.hidePaginationWhenOptional && _.value <= (l.paginationPageSizes[0] ?? Ee)) && !(l.paginationOffset && l.hidePaginationWhenOptional && !ae.value && !q.value && p.value.length < (l.paginationPageSizes[0] ?? Ee)))), Oe = (e) => e.toLowerCase().replace(/[^[a-z0-9]/gi, "-");
     $([J, R], (e) => {
-      const a = e[0], o = e[1].filter((r) => a[r.key] !== !1);
+      const a = e[0], o = e[1].filter((i) => a[i.key] !== !1);
       JSON.stringify(o) !== JSON.stringify(S.value) && (S.value = o, X());
     }, { deep: !0, immediate: !0 }), $(ke, (e) => {
-      e != null && e.length && !b.value.length && (b.value = e);
+      e != null && e.length && !p.value.length && (p.value = e);
     }, { deep: !0, immediate: !0 }), $(le, () => {
       switch (le.value) {
         case Ce.PENDING:
@@ -462,20 +462,20 @@ const Mt = { class: "k-table" }, It = {
     }), $(() => l.searchInput, (e) => {
       d.value !== 1 && (d.value = 1), e === "" ? _e(e) : Ze(e);
     }, { immediate: !0 });
-    const W = i(!1);
+    const W = r(!1);
     return $([he, d, N], async (e, a) => {
-      const t = a == null ? void 0 : a[0], o = e[0], r = e[1];
-      o !== t && r !== 1 && (d.value = 1, C.value = [null], P.value = null), ee.value && !be.value && (W.value = !0, o !== "" && o !== t ? await Pe() : await st(), W.value = !1);
+      const t = a == null ? void 0 : a[0], o = e[0], i = e[1];
+      o !== t && i !== 1 && (d.value = 1, C.value = [null], P.value = null), ee.value && !pe.value && (W.value = !0, o !== "" && o !== t ? await Pe() : await st(), W.value = !1);
     }, { deep: !0, immediate: !0 }), $(B, (e) => {
       e && (J.value = l.tablePreferences.columnVisibility || {});
-    }, { immediate: !0 }), bt(() => {
+    }, { immediate: !0 }), pt(() => {
       console.warn(`The Kongponents 'KTable' component is deprecated and will be removed in the next major release.
 We suggest using 'KTableData' component instead.
 Docs: https://kongponents.konghq.com/components/table-data.html`), Xe();
-    }), (e, a) => (c(), p("div", Mt, [
-      je.value ? (c(), p("div", It, [
+    }), (e, a) => (c(), b("div", Mt, [
+      je.value ? (c(), b("div", It, [
         A(e.$slots, "toolbar", { state: ze.value }, void 0, !0),
-        B.value ? (c(), p("div", Tt, [
+        B.value ? (c(), b("div", Tt, [
           E(At, {
             columns: Ve.value,
             "table-id": h(k),
@@ -488,7 +488,7 @@ Docs: https://kongponents.konghq.com/components/table-data.html`), Xe();
         key: 1,
         "data-testid": "table-skeleton",
         type: "table"
-      })) : s.error ? (c(), p("div", wt, [
+      })) : s.error ? (c(), b("div", wt, [
         A(e.$slots, "error-state", {}, () => [
           E(we, {
             "icon-variant": "error",
@@ -513,7 +513,7 @@ Docs: https://kongponents.konghq.com/components/table-data.html`), Xe();
             } : void 0
           ]), 1032, ["message", "title"])
         ], !0)
-      ])) : !s.error && !O.value && !s.loading && !W.value && b.value && !b.value.length ? (c(), p("div", Nt, [
+      ])) : !s.error && !O.value && !s.loading && !W.value && p.value && !p.value.length ? (c(), b("div", Nt, [
         A(e.$slots, "empty-state", {}, () => [
           E(we, {
             "icon-variant": s.emptyStateIconVariant,
@@ -540,7 +540,7 @@ Docs: https://kongponents.konghq.com/components/table-data.html`), Xe();
             } : void 0
           ]), 1032, ["icon-variant", "message", "title"])
         ], !0)
-      ])) : (c(), p("div", Kt, [
+      ])) : (c(), b("div", Kt, [
         M("div", {
           class: "table-wrapper",
           style: He(qe.value),
@@ -561,7 +561,7 @@ Docs: https://kongponents.konghq.com/components/table-data.html`), Xe();
                 ref: ue,
                 class: L({ "is-scrolled": w.value })
               }, [
-                (c(!0), p(se, null, oe(S.value, (t, o) => (c(), p("th", {
+                (c(!0), b(se, null, oe(S.value, (t, o) => (c(), b("th", {
                   key: `table-${h(k)}-headers-${o}`,
                   "aria-sort": s.sortable && t.key === y.value ? f.value === "asc" ? "ascending" : "descending" : void 0,
                   class: L(["table-headers", Ue(t, o)]),
@@ -575,17 +575,17 @@ Docs: https://kongponents.konghq.com/components/table-data.html`), Xe();
                       // display opposite because sortColumnOrder outdated
                     }), ot(t));
                   },
-                  onMouseleave: a[7] || (a[7] = (r) => G.value = ""),
-                  onMouseover: (r) => G.value = t.key
+                  onMouseleave: a[7] || (a[7] = (i) => G.value = ""),
+                  onMouseover: (i) => G.value = t.key
                 }, [
-                  s.resizeColumns && o !== 0 ? (c(), p("div", {
+                  s.resizeColumns && o !== 0 ? (c(), b("div", {
                     key: 0,
                     class: "resize-handle previous",
                     onClick: a[3] || (a[3] = Me(() => {
                     }, ["stop"])),
-                    onMousedown: (r) => pe(r, S.value[o - 1].key),
-                    onMouseleave: a[4] || (a[4] = (r) => T.value = ""),
-                    onMouseover: (r) => T.value = S.value[o - 1].key
+                    onMousedown: (i) => be(i, S.value[o - 1].key),
+                    onMouseleave: a[4] || (a[4] = (i) => T.value = ""),
+                    onMouseover: (i) => T.value = S.value[o - 1].key
                   }, null, 40, Lt)) : H("", !0),
                   M("div", {
                     "aria-describedby": t.tooltip || e.$slots[K(t.key)] ? `${K(t.key)}-${h(k)}` : void 0,
@@ -616,7 +616,7 @@ Docs: https://kongponents.konghq.com/components/table-data.html`), Xe();
                         E(h($t), {
                           class: "header-tooltip-trigger",
                           color: `var(--kui-color-text-neutral, ${h(Ke)})`,
-                          size: h(Ne)
+                          size: `var(--kui-icon-size-30, ${h(Ne)})`
                         }, null, 8, ["color", "size"])
                       ]),
                       _: 2
@@ -625,40 +625,40 @@ Docs: https://kongponents.konghq.com/components/table-data.html`), Xe();
                       key: 1,
                       class: "sort-icon",
                       color: `var(--kui-color-text-neutral, ${h(Ke)})`,
-                      size: h(Ne)
+                      size: `var(--kui-icon-size-30, ${h(Ne)})`
                     }, null, 8, ["color", "size"])) : H("", !0)
                   ], 10, Rt),
-                  s.resizeColumns && o !== S.value.length - 1 ? (c(), p("div", {
+                  s.resizeColumns && o !== S.value.length - 1 ? (c(), b("div", {
                     key: 1,
                     class: "resize-handle",
                     onClick: a[5] || (a[5] = Me(() => {
                     }, ["stop"])),
-                    onMousedown: (r) => pe(r, t.key),
-                    onMouseleave: a[6] || (a[6] = (r) => T.value = ""),
-                    onMouseover: (r) => T.value = t.key
+                    onMousedown: (i) => be(i, t.key),
+                    onMouseleave: a[6] || (a[6] = (i) => T.value = ""),
+                    onMouseover: (i) => T.value = t.key
                   }, null, 40, Vt)) : H("", !0)
                 ], 46, Ft))), 128))
               ], 2)
             ], 2),
             M("tbody", null, [
-              (c(!0), p(se, null, oe(b.value, (t, o) => (c(), p("tr", Ie({ ref_for: !0 }, s.rowAttrs(t), {
+              (c(!0), b(se, null, oe(p.value, (t, o) => (c(), b("tr", Ie({ ref_for: !0 }, s.rowAttrs(t), {
                 key: `table-${h(k)}-row-${o}`,
                 role: Q.value ? "link" : null,
                 tabindex: Q.value ? 0 : null
               }), [
-                (c(!0), p(se, null, oe(S.value, (r, n) => (c(), p("td", Ie({ ref_for: !0 }, s.cellAttrs({ headerKey: r.key, row: t, rowIndex: o, colIndex: n }), {
+                (c(!0), b(se, null, oe(S.value, (i, n) => (c(), b("td", Ie({ ref_for: !0 }, s.cellAttrs({ headerKey: i.key, row: t, rowIndex: o, colIndex: n }), {
                   key: `table-${h(k)}-cell-${n}`,
                   class: {
-                    "resize-hover": s.resizeColumns && ye.value === r.key && n !== S.value.length - 1
+                    "resize-hover": s.resizeColumns && ye.value === i.key && n !== S.value.length - 1
                   },
-                  style: ge.value[r.key]
-                }, ht(xe.value(t[r.key], t), !0)), [
-                  A(e.$slots, r.key, {
+                  style: ge.value[i.key]
+                }, ht(xe.value(t[i.key], t), !0)), [
+                  A(e.$slots, i.key, {
                     row: te(t),
                     rowKey: o,
-                    rowValue: t[r.key]
+                    rowValue: t[i.key]
                   }, () => [
-                    Z(x(t[r.key]), 1)
+                    Z(x(t[i.key]), 1)
                   ], !0)
                 ], 16))), 128))
               ], 16, Bt))), 128))
@@ -680,8 +680,8 @@ Docs: https://kongponents.konghq.com/components/table-data.html`), Xe();
           "total-count": _.value,
           onGetNextOffset: ct,
           onGetPreviousOffset: dt,
-          onPageChange: rt,
-          onPageSizeChange: it
+          onPageChange: it,
+          onPageSizeChange: rt
         }, null, 8, ["current-page", "disable-page-jump", "initial-page-size", "neighbors", "offset", "offset-next-button-disabled", "offset-previous-button-disabled", "page-sizes", "total-count"])) : H("", !0)
       ]))
     ]));

package/dist/kongponents.es148.js

@@ -1,7 +1,7 @@
 import { defineComponent as J, useCssVars as X, watch as s, useAttrs as Y, useSlots as G, computed as l, ref as k, useId as j, openBlock as u, createElementBlock as f, normalizeClass as A, createBlock as Q, mergeProps as z, createSlots as W, withCtx as g, createTextVNode as b, toDisplayString as S, renderSlot as T, createCommentVNode as I, createElementVNode as N, unref as c, createVNode as _, Transition as ee, Fragment as te } from "vue";
-import ae from "./kongponents.es182.js";
+import ae from "./kongponents.es200.js";
 import le from "./kongponents.es51.js";
-import { IS_MAYBE_FIREFOX as w, getScrollbarSize as re, cssSupports as ie } from "./kongponents.es198.js";
+import { IS_MAYBE_FIREFOX as w, getScrollbarSize as re, cssSupports as ie } from "./kongponents.es193.js";
 const oe = ["data-value"], ne = ["id", "aria-invalid", "rows", "value"], E = 2048, R = w ? 0 : re(), B = ie("field-sizing", "content"), me = /* @__PURE__ */ J({
   inheritAttrs: !1,
   __name: "KTextArea",

package/dist/kongponents.es150.js

@@ -1,12 +1,12 @@
-import { defineComponent as d, openBlock as t, createBlock as a, TransitionGroup as f, withCtx as k, createElementBlock as o, Fragment as C, renderList as g, normalizeClass as h, createElementVNode as s, resolveDynamicComponent as v, unref as r, toDisplayString as c, createCommentVNode as i, withModifiers as y, createVNode as T } from "vue";
-import E from "./kongponents.es175.js";
-import I from "./kongponents.es196.js";
-import $ from "./kongponents.es176.js";
+import { defineComponent as d, openBlock as t, createBlock as a, TransitionGroup as f, withCtx as k, createElementBlock as o, Fragment as C, renderList as g, normalizeClass as v, createElementVNode as s, resolveDynamicComponent as h, unref as r, toDisplayString as c, createCommentVNode as i, withModifiers as y, createVNode as T } from "vue";
+import $ from "./kongponents.es175.js";
+import E from "./kongponents.es207.js";
+import I from "./kongponents.es176.js";
 import l from "./kongponents.es178.js";
-import x from "./kongponents.es197.js";
+import x from "./kongponents.es208.js";
 import B from "./kongponents.es180.js";
-import { KUI_COLOR_TEXT as w, KUI_ICON_SIZE_50 as K, KUI_COLOR_TEXT_NEUTRAL_WEAK as N } from "./kongponents.es181.js";
-const O = { class: "toaster-icon-container" }, z = { class: "toaster-content" }, L = {
+import { KUI_COLOR_TEXT as w, KUI_ICON_SIZE_50 as z, KUI_COLOR_TEXT_NEUTRAL_WEAK as K } from "./kongponents.es181.js";
+const N = { class: "toaster-icon-container" }, O = { class: "toaster-content" }, L = {
   key: 0,
   class: "toaster-title"
 }, S = {
@@ -25,11 +25,11 @@ const O = { class: "toaster-icon-container" }, z = { class: "toaster-content" },
         case "info":
           return l;
         case "success":
-          return E;
+          return $;
         case "warning":
           return B;
         case "danger":
-          return I;
+          return E;
         case "system":
           return x;
         default:
@@ -44,17 +44,17 @@ const O = { class: "toaster-icon-container" }, z = { class: "toaster-content" },
       default: k(() => [
         (t(!0), o(C, null, g(m.toasterState, (e) => (t(), o("div", {
           key: e.key,
-          class: h(["toaster", `${e.appearance}`]),
+          class: v(["toaster", `${e.appearance}`]),
           role: "alert"
         }, [
-          s("div", O, [
-            (t(), a(v(_(e.appearance)), {
+          s("div", N, [
+            (t(), a(h(_(e.appearance)), {
               class: "toaster-icon",
               color: `var(--kui-color-text, ${r(w)})`,
               decorative: ""
             }, null, 8, ["color"]))
           ]),
-          s("div", z, [
+          s("div", O, [
             e.title ? (t(), o("span", L, c(e.title), 1)) : i("", !0),
             e.message ? (t(), o("p", S, c(e.message), 1)) : i("", !0)
           ]),
@@ -65,9 +65,9 @@ const O = { class: "toaster-icon-container" }, z = { class: "toaster-content" },
             type: "button",
             onClick: y((M) => p("close", e.key), ["stop"])
           }, [
-            T(r($), {
-              color: `var(--kui-color-text-neutral-weak, ${r(N)})`,
-              size: r(K)
+            T(r(I), {
+              color: `var(--kui-color-text-neutral-weak, ${r(K)})`,
+              size: `var(--kui-icon-size-50, ${r(z)})`
             }, null, 8, ["color", "size"])
           ], 8, U)
         ], 2))), 128))

package/dist/kongponents.es156.js

@@ -1,8 +1,8 @@
-import { defineComponent as l, watch as f, computed as m, openBlock as t, createElementBlock as c, renderSlot as d, createBlock as h, unref as o, createCommentVNode as n } from "vue";
-import s from "./kongponents.es199.js";
-import { KUI_ICON_SIZE_30 as u } from "./kongponents.es181.js";
-import { isValidUrl as a } from "./kongponents.es171.js";
-import { warnInvalidProp as k } from "./kongponents.es200.js";
+import { defineComponent as l, watch as f, computed as c, openBlock as t, createElementBlock as m, renderSlot as d, createBlock as s, unref as o, createCommentVNode as n } from "vue";
+import u from "./kongponents.es236.js";
+import { KUI_ICON_SIZE_30 as h } from "./kongponents.es181.js";
+import { isValidUrl as i } from "./kongponents.es171.js";
+import { warnInvalidProp as k } from "./kongponents.es223.js";
 const p = ["href"], y = /* @__PURE__ */ l({
   __name: "KExternalLink",
   props: {
@@ -11,10 +11,10 @@ const p = ["href"], y = /* @__PURE__ */ l({
   },
   setup(e) {
     f(() => e.href, (r) => {
-      a(r) || k("href", `\`href\` should be a valid URL, but got "${r}".`);
+      i(r) || k("href", `\`href\` should be a valid URL, but got "${r}".`);
     }, { immediate: !0 });
-    const i = m(() => !!a(e.href));
-    return (r, I) => i.value ? (t(), c("a", {
+    const a = c(() => !!i(e.href));
+    return (r, I) => a.value ? (t(), m("a", {
       key: 0,
       class: "k-external-link",
       href: e.href,
@@ -22,10 +22,10 @@ const p = ["href"], y = /* @__PURE__ */ l({
       target: "_blank"
     }, [
       d(r.$slots, "default", {}, void 0, !0),
-      e.hideIcon ? n("", !0) : (t(), h(o(s), {
+      e.hideIcon ? n("", !0) : (t(), s(o(u), {
         key: 0,
         decorative: "",
-        size: o(u)
+        size: `var(--kui-icon-size-30, ${o(h)})`
       }, null, 8, ["size"]))
     ], 8, p)) : n("", !0);
   }