@kong/kongponents 9.56.1 → 9.56.2

package/dist/kongponents.es158.js

@@ -1,9 +1,9 @@
-import { defineComponent as A, useCssVars as K, unref as b, watch as W, ref as l, computed as O, onMounted as P, onBeforeUnmount as U, openBlock as i, createElementBlock as s, normalizeStyle as q, normalizeClass as F, renderSlot as g, createElementVNode as T, withModifiers as p, toDisplayString as M, createCommentVNode as u, createVNode as k, withCtx as S, createTextVNode as z, nextTick as D } from "vue";
-import R from "./kongponents.es226.js";
+import { defineComponent as A, useCssVars as K, unref as b, watch as W, ref as l, computed as O, onMounted as P, onBeforeUnmount as U, openBlock as i, createElementBlock as s, normalizeStyle as q, normalizeClass as F, renderSlot as g, createElementVNode as k, withModifiers as p, toDisplayString as M, createCommentVNode as u, createVNode as T, withCtx as z, createTextVNode as S, nextTick as D } from "vue";
+import R from "./kongponents.es235.js";
 import { KUI_SPACE_40 as Z, KUI_ICON_SIZE_30 as j } from "./kongponents.es181.js";
-import { ResizeObserverHelper as G } from "./kongponents.es187.js";
-import { normalizeSize as J } from "./kongponents.es189.js";
-import { warnInvalidProp as L } from "./kongponents.es200.js";
+import { ResizeObserverHelper as G } from "./kongponents.es213.js";
+import { normalizeSize as J } from "./kongponents.es182.js";
+import { warnInvalidProp as L } from "./kongponents.es223.js";
 import $ from "./kongponents.es32.js";
 const Q = {
   key: 0,
@@ -27,9 +27,9 @@ const Q = {
   },
   setup(a) {
     K((e) => ({
-      v47663137: y.value,
-      v5a8ca8b3: b(C),
-      v11e4b8c8: e.rows
+      v8887e96a: y.value,
+      v38176872: b(C),
+      cacb39f0: e.rows
     })), W(
       () => a.rows,
       (e) => {
@@ -82,7 +82,7 @@ const Q = {
             expand: n,
             truncatedCount: d.value
           }, () => [
-            T("button", {
+            k("button", {
               "aria-label": `Show ${d.value} more items`,
               class: "expand-trigger",
               type: "button",
@@ -91,7 +91,7 @@ const Q = {
           ], !0)
         ]))
       ])) : u("", !0),
-      T("div", {
+      k("div", {
         ref_key: "kTruncateContainer",
         ref: r,
         class: "truncate-container"
@@ -99,15 +99,15 @@ const Q = {
         g(e.$slots, "default", {}, void 0, !0),
         !a.truncateText && o.value ? (i(), s("div", _, [
           g(e.$slots, "collapse-trigger", { collapse: n }, () => [
-            T("button", {
+            k("button", {
               "aria-label": "Collapse content",
               class: "collapse-trigger",
               type: "button",
               onClick: p(n, ["stop"])
             }, [
-              k(b(R), {
+              T(b(R), {
                 decorative: "",
-                size: b(j)
+                size: `var(--kui-icon-size-30, ${b(j)})`
               }, null, 8, ["size"])
             ])
           ], !0)
@@ -121,13 +121,13 @@ const Q = {
       }, [
         o.value ? u("", !0) : (i(), s("div", ee, [
           g(e.$slots, "expand-trigger", { expand: n }, () => [
-            k($, {
+            T($, {
               appearance: "tertiary",
               size: "small",
               onClick: p(n, ["stop"])
             }, {
-              default: S(() => [...t[0] || (t[0] = [
-                z(" Show more ", -1)
+              default: z(() => [...t[0] || (t[0] = [
+                S(" Show more ", -1)
               ])]),
               _: 1
             })
@@ -135,13 +135,13 @@ const Q = {
         ])),
         o.value ? (i(), s("div", te, [
           g(e.$slots, "collapse-trigger", { collapse: n }, () => [
-            k($, {
+            T($, {
               appearance: "tertiary",
               size: "small",
               onClick: p(n, ["stop"])
             }, {
-              default: S(() => [...t[1] || (t[1] = [
-                z(" Show less ", -1)
+              default: z(() => [...t[1] || (t[1] = [
+                S(" Show less ", -1)
               ])]),
               _: 1
             })

package/dist/kongponents.es160.js

@@ -1,6 +1,6 @@
-import { defineComponent as z, useId as S, ref as i, computed as n, watch as N, onMounted as W, onBeforeUnmount as O, openBlock as s, createElementBlock as g, toDisplayString as p, createCommentVNode as C, createElementVNode as m, normalizeClass as f, createBlock as V, withCtx as b, createVNode as v, withModifiers as F, unref as y } from "vue";
-import { ResizeObserverHelper as K } from "./kongponents.es187.js";
-import M from "./kongponents.es213.js";
+import { defineComponent as z, useId as S, ref as c, computed as n, watch as N, onMounted as W, onBeforeUnmount as O, openBlock as s, createElementBlock as g, toDisplayString as p, createCommentVNode as C, createElementVNode as m, normalizeClass as f, createBlock as V, withCtx as b, createVNode as v, withModifiers as F, unref as y } from "vue";
+import { ResizeObserverHelper as K } from "./kongponents.es213.js";
+import M from "./kongponents.es188.js";
 import U from "./kongponents.es19.js";
 import L from "./kongponents.es24.js";
 /* empty css                 */
@@ -23,14 +23,14 @@ const H = { class: "k-copy" }, R = {
     truncationLimit: { default: 8 }
   },
   setup(t, { expose: h }) {
-    const u = S(), o = i(""), x = n(() => !t.badgeLabel || t.copyTooltip ? t.copyTooltip || "Copy" : `Copy ${t.badgeLabel.replace(/:$/, "")}`);
+    const u = S(), o = c(""), x = n(() => !t.badgeLabel || t.copyTooltip ? t.copyTooltip || "Copy" : `Copy ${t.badgeLabel.replace(/:$/, "")}`);
     N(x, (e) => {
       o.value = e;
     }, { immediate: !0 });
-    const B = n(() => `copy-tooltip-wrapper ${t.truncate && c.value || t.badge ? "truncate-content" : ""}`), $ = n(() => t.format === "redacted" ? "*****" : t.format === "deleted" ? `*${String(t.text || "").substring(0, 5)}` : t.truncate && t.truncationLimit && r.value ? r.value.replace(/^"(.*)"$/, "$1") : t.text), k = n(() => {
+    const $ = n(() => `copy-tooltip-wrapper ${t.truncate && i.value || t.badge ? "truncate-content" : ""}`), k = n(() => t.format === "redacted" ? "*****" : t.format === "deleted" ? `*${String(t.text || "").substring(0, 5)}` : t.truncate && t.truncationLimit && r.value ? r.value.replace(/^"(.*)"$/, "$1") : t.text), B = n(() => {
       if (t.textTooltip)
         return t.textTooltip;
-      if (!(t.format === "redacted" || !c.value))
+      if (!(t.format === "redacted" || !i.value))
         return t.text;
     }), T = (e) => {
       o.value = e || t.successTooltip, setTimeout(() => {
@@ -49,9 +49,9 @@ const H = { class: "k-copy" }, R = {
         document != null && document.getElementById(u) && ((e = document == null ? void 0 : document.getElementById(u)) == null || e.click());
       }
     });
-    const a = i(), l = i(), r = n(() => t.truncate && typeof t.truncationLimit == "number" ? `${String(t.text || "").substring(0, t.truncationLimit) + "..."}` : null), c = i(!1), E = () => {
+    const a = c(), l = c(), r = n(() => t.truncate && typeof t.truncationLimit == "number" ? `${String(t.text || "").substring(0, t.truncationLimit) + "..."}` : null), i = c(!1), E = () => {
       var e, d;
-      t.truncate && (t.truncationLimit !== "auto" && r.value ? c.value = !0 : t.truncationLimit === "auto" && a.value && (c.value = ((e = a.value) == null ? void 0 : e.offsetWidth) < ((d = a.value) == null ? void 0 : d.scrollWidth)));
+      t.truncate && (t.truncationLimit !== "auto" && r.value ? i.value = !0 : t.truncationLimit === "auto" && a.value && (i.value = ((e = a.value) == null ? void 0 : e.offsetWidth) < ((d = a.value) == null ? void 0 : d.scrollWidth)));
     };
     return W(() => {
       l.value = K.create(E), l.value.observe(a.value);
@@ -64,18 +64,18 @@ const H = { class: "k-copy" }, R = {
       }, [
         t.format !== "hidden" ? (s(), V(L, {
           key: 0,
-          class: f([B.value]),
+          class: f([$.value]),
           "data-testid": "copy-tooltip-wrapper",
           "max-width": "500px",
           placement: "bottom-start",
-          text: k.value
+          text: B.value
         }, {
           default: b(() => [
             m("div", {
               ref_key: "copyTextElement",
               ref: a,
               class: f(["copy-text", { monospace: t.monospace || !t.badge }])
-            }, p($.value), 3)
+            }, p(k.value), 3)
           ]),
           _: 1
         }, 8, ["class", "text"])) : C("", !0),
@@ -99,7 +99,7 @@ const H = { class: "k-copy" }, R = {
                   v(y(M), {
                     class: "text-icon",
                     decorative: "",
-                    size: y(D)
+                    size: `var(--kui-icon-size-30, ${y(D)})`
                   }, null, 8, ["size"])
                 ], 8, Z)
               ]),

package/dist/kongponents.es162.js

@@ -5,28 +5,28 @@ import Nt from "./kongponents.es20.js";
 /* empty css                 */
 import Fe from "./kongponents.es24.js";
 /* empty css                 */
-import xt from "./kongponents.es203.js";
-import It from "./kongponents.es204.js";
-import zt from "./kongponents.es178.js";
-import Pt from "./kongponents.es205.js";
-import Kt from "./kongponents.es206.js";
+import xt from "./kongponents.es186.js";
+import zt from "./kongponents.es209.js";
+import It from "./kongponents.es178.js";
+import Pt from "./kongponents.es230.js";
+import Kt from "./kongponents.es231.js";
 import "./kongponents.es5.js";
 import "./kongponents.es10.js";
 import { EmptyStateIconVariants as Ht } from "./kongponents.es11.js";
 import { TableViewHeaderKeys as i } from "./kongponents.es17.js";
 import { KUI_ICON_SIZE_30 as re, KUI_COLOR_TEXT_NEUTRAL as Mt, KUI_COLOR_TEXT_PRIMARY as Ft, KUI_COLOR_TEXT_NEUTRAL_WEAK as Dt, KUI_SPACE_60 as Ut } from "./kongponents.es181.js";
-import Wt from "./kongponents.es207.js";
+import Wt from "./kongponents.es232.js";
 import Xt from "./kongponents.es55.js";
 import Vt from "./kongponents.es43.js";
 import De from "./kongponents.es36.js";
-import qt from "./kongponents.es208.js";
+import qt from "./kongponents.es233.js";
 import { getInitialPageSize as jt } from "./kongponents.es173.js";
 import { getUniqueStringId as Zt } from "./kongponents.es153.js";
-import { getScrollbarSize as Gt } from "./kongponents.es198.js";
-import { useResizeObserver as Jt } from "./kongponents.es188.js";
-import { normalizeSize as Yt } from "./kongponents.es189.js";
+import { getScrollbarSize as Gt } from "./kongponents.es193.js";
+import { useResizeObserver as Jt } from "./kongponents.es203.js";
+import { normalizeSize as Yt } from "./kongponents.es182.js";
 import Qt from "./kongponents.es40.js";
-import _t from "./kongponents.es209.js";
+import _t from "./kongponents.es234.js";
 const eo = {
   key: 0,
   class: "table-toolbar",
@@ -125,39 +125,39 @@ const eo = {
   emits: ["page-change", "page-size-change", "get-next-offset", "get-previous-offset", "cell-click", "row-click", "error-action-click", "empty-state-action-click", "update:table-preferences", "sort", "row-select", "update:row-expanded", "row-actions-toggle"],
   setup(a, { emit: Ue }) {
     wt((e) => ({
-      v771df17d: u(tt).expandable,
-      v399eb14a: nt.value,
-      v96d0edbc: Ce.value,
-      v090058f6: Qe.value
+      v155bb9be: u(tt).expandable,
+      v986a43ae: nt.value,
+      f6ff5a7e: Ce.value,
+      ae566bd6: Qe.value
     }));
-    const ge = St(a, ["resizeColumns", "tablePreferences", "rowHover", "rowAttrs", "rowLink", "rowBulkActionEnabled", "rowKey", "cellAttrs", "loading", "emptyStateTitle", "emptyStateMessage", "emptyStateActionMessage", "emptyStateIconVariant", "emptyStateButtonAppearance", "emptyStateActionRoute", "error", "errorStateTitle", "errorStateMessage", "errorStateActionMessage", "errorStateActionRoute", "maxHeight", "hidePagination", "paginationAttributes", "rowExpandable", "rowExpanded", "hideHeaders", "nested", "hidePaginationWhenOptional", "hideToolbar", "tooltipTarget", "data", "headers", "actionsDropdownPopoverAttributes"]), p = Ue, z = Tt(), w = Rt(), E = (e) => typeof a.rowKey == "function" && typeof a.rowKey(e) == "string" ? a.rowKey(e) : typeof a.rowKey == "string" && a.rowKey in e && typeof e[a.rowKey] == "string" ? e[a.rowKey] : "", pe = (e) => {
+    const ge = St(a, ["resizeColumns", "tablePreferences", "rowHover", "rowAttrs", "rowLink", "rowBulkActionEnabled", "rowKey", "cellAttrs", "loading", "emptyStateTitle", "emptyStateMessage", "emptyStateActionMessage", "emptyStateIconVariant", "emptyStateButtonAppearance", "emptyStateActionRoute", "error", "errorStateTitle", "errorStateMessage", "errorStateActionMessage", "errorStateActionRoute", "maxHeight", "hidePagination", "paginationAttributes", "rowExpandable", "rowExpanded", "hideHeaders", "nested", "hidePaginationWhenOptional", "hideToolbar", "tooltipTarget", "data", "headers", "actionsDropdownPopoverAttributes"]), p = Ue, I = Tt(), w = Rt(), E = (e) => typeof a.rowKey == "function" && typeof a.rowKey(e) == "string" ? a.rowKey(e) : typeof a.rowKey == "string" && a.rowKey in e && typeof e[a.rowKey] == "string" ? e[a.rowKey] : "", pe = (e) => {
       const o = e.filter((l) => l.key !== i.BULK_ACTIONS && l.key !== i.ACTIONS), t = e.find((l) => l.key === i.BULK_ACTIONS), n = e.find((l) => l.key === i.ACTIONS);
       return t && o.unshift(t), n && o.push(n), o;
-    }, he = ne("table-wrapper"), We = ne("table"), Xe = ne("header-row"), N = v(pe(a.headers)), k = v([]), X = v(""), P = v(""), Q = v(""), Ve = y(() => N.value.some((e) => e.key === i.ACTIONS)), Ae = y(() => N.value.filter((e) => e.hidable).length > 0), K = y(() => a.nested || !Ae.value || a.error ? !1 : z.toolbar ? !0 : !a.loading && !!a.data && !!a.data.length), qe = y(() => a.loading || !(a.data && a.data.length)), je = y(() => N.value.filter((e) => e.hidable && !te(e.key))), Ze = y(() => K.value ? a.tablePreferences.columnVisibility || {} : {}), H = v(K.value ? a.tablePreferences.columnVisibility || {} : {}), Ce = v("100%"), ue = v(!1), V = v(!1), x = v(!1), M = v(!1), g = v(a.tablePreferences.sortColumnKey || ""), A = v(a.tablePreferences.sortColumnOrder || me), de = v(!1), Ge = y(() => !a.hideToolbar && !a.nested && (!!z.toolbar || K.value || ve.value)), Je = ne("actionsDropdown"), ce = v(!1), Ye = y(() => ({
+    }, he = ne("table-wrapper"), We = ne("table"), Xe = ne("header-row"), N = v(pe(a.headers)), k = v([]), X = v(""), P = v(""), Q = v(""), Ve = y(() => N.value.some((e) => e.key === i.ACTIONS)), Ae = y(() => N.value.filter((e) => e.hidable).length > 0), K = y(() => a.nested || !Ae.value || a.error ? !1 : I.toolbar ? !0 : !a.loading && !!a.data && !!a.data.length), qe = y(() => a.loading || !(a.data && a.data.length)), je = y(() => N.value.filter((e) => e.hidable && !te(e.key))), Ze = y(() => K.value ? a.tablePreferences.columnVisibility || {} : {}), H = v(K.value ? a.tablePreferences.columnVisibility || {} : {}), Ce = v("100%"), ue = v(!1), V = v(!1), x = v(!1), M = v(!1), g = v(a.tablePreferences.sortColumnKey || ""), A = v(a.tablePreferences.sortColumnOrder || me), ce = v(!1), Ge = y(() => !a.hideToolbar && !a.nested && (!!I.toolbar || K.value || ve.value)), Je = ne("actionsDropdown"), de = v(!1), Ye = y(() => ({
       maxHeight: Yt(a.maxHeight)
-    })), Qe = y(() => `${Gt()}px`), F = v([]), q = y(() => !a.nested && !a.error && N.value.some((e) => e.key === i.BULK_ACTIONS) && !!(z["bulk-action-items"] || z["bulk-actions"]) && !!a.data.every((e) => E(e))), j = v([]), ve = y(() => a.nested || !q.value || a.error ? !1 : z.toolbar ? !0 : !a.loading && !!a.data && !!a.data.length), we = y(() => {
+    })), Qe = y(() => `${Gt()}px`), F = v([]), q = y(() => !a.nested && !a.error && N.value.some((e) => e.key === i.BULK_ACTIONS) && !!(I["bulk-action-items"] || I["bulk-actions"]) && !!a.data.every((e) => E(e))), j = v([]), ve = y(() => a.nested || !q.value || a.error ? !1 : I.toolbar ? !0 : !a.loading && !!a.data && !!a.data.length), we = y(() => {
       const e = F.value.length;
       return e ? e > 100 ? "99+" : String(e) : "";
     }), _ = v(/* @__PURE__ */ new WeakMap()), _e = (e) => `column-${e}`, D = (e) => `tooltip-${e}`, Se = (e, o) => (t, n) => {
-      const l = /^on[^a-z]/, d = {};
+      const l = /^on[^a-z]/, c = {};
       for (const s in o)
-        l.test(s) && o[s] && (d[s] = o[s]);
-      return Object.keys(d).reduce((s, c) => {
-        if (c.indexOf(e) === 0) {
-          const m = c.split(e);
-          s[m[1]] = ($) => d[c]($, t, n);
+        l.test(s) && o[s] && (c[s] = o[s]);
+      return Object.keys(c).reduce((s, d) => {
+        if (d.indexOf(e) === 0) {
+          const m = d.split(e);
+          s[m[1]] = ($) => c[d]($, t, n);
         }
         return s;
       }, {});
     }, et = y(() => (e, o) => {
       const t = Se("onRow:", ge)(o, "row"), n = Se("onCell:", ge)(e, "cell"), l = ["a", "button", "label", "input", "select", 'span[role="checkbox"]'];
-      return (t.click || n.click) && (de.value = !0), {
+      return (t.click || n.click) && (ce.value = !0), {
         ...t,
         ...n,
-        click(d) {
-          const s = d.target, c = s.className;
+        click(c) {
+          const s = c.target, d = s.className;
           let m = l.includes(s.tagName.toLowerCase()), $ = !1;
-          typeof c == "string" || Array.isArray(c) ? $ = c.includes("k-popover") : typeof c == "object" && ($ = Object.keys(c).includes("k-popover")), s.closest(".popover-content") !== null && ($ = !0);
+          typeof d == "string" || Array.isArray(d) ? $ = d.includes("k-popover") : typeof d == "object" && ($ = Object.keys(d).includes("k-popover")), s.closest(".popover-content") !== null && ($ = !0);
           for (let B = 0; B < l.length; B++)
             if (s.closest(l[B]) !== null) {
               m = !0;
@@ -166,26 +166,26 @@ const eo = {
           if ((!m || s.hasAttribute("disabled")) && !$ && (t.click || n.click))
             if (n.click) {
               p("cell-click", { data: e });
-              const B = n.click(d, e, "cell");
-              typeof B == "function" && B(d, e);
+              const B = n.click(c, e, "cell");
+              typeof B == "function" && B(c, e);
             } else {
               p("row-click", { data: o });
-              const B = t.click(d, o, "row");
-              typeof B == "function" && B(d, o);
+              const B = t.click(c, o, "row");
+              typeof B == "function" && B(c, o);
             }
         }
       };
-    }), Te = parseInt(Ut) * 2 + parseInt(re), Re = { expandable: Te, bulkActions: 48, actions: 54 }, tt = _t(Re, (e) => `${e}px`), I = v({
+    }), Te = parseInt(Ut) * 2 + parseInt(re), Re = { expandable: Te, bulkActions: 48, actions: 54 }, tt = _t(Re, (e) => `${e}px`), z = v({
       ...a.tablePreferences.columnWidths || {},
       ...Re
       // override special columns with default widths
     }), Ee = y(() => {
       const e = {};
-      for (const o in I.value) {
+      for (const o in z.value) {
         const t = o;
-        if (!I.value[t])
+        if (!z.value[t])
           continue;
-        const n = I.value[t] + "px";
+        const n = z.value[t] + "px";
         e[t] = {
           width: n,
           maxWidth: n,
@@ -241,24 +241,24 @@ const eo = {
       }
       return "auto";
     }), $e = (e, o) => {
-      var c;
+      var d;
       if (e.button !== 0)
         return;
       let t = 0, n = 0;
       X.value = o;
       let l = null;
-      (c = Oe.value) == null || c.forEach((m) => {
+      (d = Oe.value) == null || d.forEach((m) => {
         m.getAttribute("data-testid") === `table-header-${o}` && (l = document == null ? void 0 : document.querySelector(`[data-tableid="${w}"] [data-testid="table-header-${o}"]`));
       });
-      const d = (m) => {
+      const c = (m) => {
         const $ = m.clientX - t;
-        l == null || l.setAttribute("style", `width: ${n + $}px`), I.value[o] = n + $;
+        l == null || l.setAttribute("style", `width: ${n + $}px`), z.value[o] = n + $;
       }, s = () => {
-        X.value = "", document == null || document.removeEventListener("mousemove", d), document == null || document.removeEventListener("mouseup", s), le(), U.value && ye();
+        X.value = "", document == null || document.removeEventListener("mousemove", c), document == null || document.removeEventListener("mouseup", s), le(), U.value && ye();
       };
       if (t = e.clientX, l) {
         const m = window == null ? void 0 : window.getComputedStyle(l);
-        m != null && m.width && (n = parseInt(m.width, 10)), document == null || document.addEventListener("mousemove", d), document == null || document.addEventListener("mouseup", s);
+        m != null && m.width && (n = parseInt(m.width, 10)), document == null || document.addEventListener("mousemove", c), document == null || document.addEventListener("mouseup", s);
       }
     }, Be = (e) => x.value ? e === i.BULK_ACTIONS || e === i.EXPANDABLE : !1, Ne = (e) => e === i.BULK_ACTIONS && U.value, ee = (e) => x.value ? q.value ? e === i.BULK_ACTIONS : U.value ? e === i.EXPANDABLE : !1 : !1, te = (e) => e === i.EXPANDABLE || e === i.BULK_ACTIONS || e === i.ACTIONS, oe = (e, o = !1) => {
       if (!a.resizeColumns || a.nested)
@@ -281,13 +281,13 @@ const eo = {
     }, { deep: !0, immediate: !0 });
     const rt = (e) => !e.hideLabel && !!e.sortable && e.key !== i.BULK_ACTIONS && e.key !== i.ACTIONS, ut = (e) => {
       g.value && e ? e === g.value ? A.value === "asc" ? A.value = "desc" : A.value = "asc" : (g.value = e, A.value = "asc") : e ? (g.value = e, A.value = "asc") : (g.value = "", A.value = me), le();
-    }, dt = (e) => {
+    }, ct = (e) => {
       var t;
       const o = e.target;
       o && (typeof o.scrollTop == "number" || typeof o.scrollLeft == "number") && (o.scrollTop > 1 ? (ue.value = !0, V.value = !0) : o.scrollTop === 0 && (V.value = !1), o.scrollLeft > 1 ? x.value = !0 : o.scrollLeft === 0 && (x.value = !1), o.scrollWidth <= o.scrollLeft + o.clientWidth ? M.value = !1 : M.value = !0), (t = Je.value) == null || t.forEach((n) => {
         n && n.closeDropdown && n.closeDropdown();
       });
-    }, ae = (e) => j.value.find((o) => o.rowKey === E(e)), ct = (e, o) => ({
+    }, ae = (e) => j.value.find((o) => o.rowKey === E(e)), dt = (e, o) => ({
       "data-testid": a.rowAttrs(e)["data-testid"] ? `${a.rowAttrs(e)["data-testid"]}-actions-dropdown-popover` : `row-${o}-actions-dropdown-popover`
     }), fe = (e) => {
       if (typeof a.rowBulkActionEnabled != "function")
@@ -305,11 +305,11 @@ const eo = {
     }, yt = (e, o) => {
       if (o === i.BULK_ACTIONS || o === i.ACTIONS)
         return {};
-      const { to: t, target: n } = a.rowLink(e), l = t && typeof t == "object", d = t && typeof t == "string";
+      const { to: t, target: n } = a.rowLink(e), l = t && typeof t == "object", c = t && typeof t == "string";
       return {
         ...l && { to: t },
-        ...d && { href: t },
-        ...(l || d) && {
+        ...c && { href: t },
+        ...(l || c) && {
           ...n && { target: n }
         }
       };
@@ -318,34 +318,34 @@ const eo = {
     }, kt = y(() => ({
       sortColumnKey: g.value,
       sortColumnOrder: A.value,
-      ...a.resizeColumns ? { columnWidths: I.value } : {},
+      ...a.resizeColumns ? { columnWidths: z.value } : {},
       ...Ae.value ? { columnVisibility: H.value } : {},
       ...Z.value && !a.hidePagination && { pageSize: Z.value }
     })), le = () => {
       p("update:table-preferences", kt.value);
-    }, U = y(() => !a.nested && a.data.some((e) => a.rowExpandable(e))), mt = { key: i.EXPANDABLE, label: "Expandable rows controls", hideLabel: !0 }, Ie = () => {
+    }, U = y(() => !a.nested && a.data.some((e) => a.rowExpandable(e))), mt = { key: i.EXPANDABLE, label: "Expandable rows controls", hideLabel: !0 }, ze = () => {
       const e = [];
       return a.data.forEach((o, t) => {
         a.rowExpanded(o) && e.push(t);
       }), e;
-    }, L = v(Ie()), gt = async (e, o) => {
+    }, L = v(ze()), gt = async (e, o) => {
       ye(), await Bt(), L.value.includes(e) ? (L.value = L.value.filter((t) => t !== e), p("update:row-expanded", { row: o, expanded: !1 })) : (L.value = [...L.value, e], p("update:row-expanded", { row: o, expanded: !0 }));
-    }, pt = y(() => k.value.filter((e) => e.key !== i.EXPANDABLE && e.key !== i.BULK_ACTIONS)), ze = v({}), ye = () => {
+    }, pt = y(() => k.value.filter((e) => e.key !== i.EXPANDABLE && e.key !== i.BULK_ACTIONS)), Ie = v({}), ye = () => {
       if (typeof document > "u")
         return;
       const e = document == null ? void 0 : document.querySelector(`[data-tableid="${w}"]`), o = e == null ? void 0 : e.querySelectorAll("th"), t = {};
       o == null || o.forEach((n, l) => {
-        const d = n.getAttribute("data-key");
-        if (d === i.EXPANDABLE)
+        const c = n.getAttribute("data-key");
+        if (c === i.EXPANDABLE)
           return;
         let s = n.getBoundingClientRect().width;
-        l === 1 && (s += Te), l === o.length - 1 && (s -= 15), t[d] = s;
-      }), ze.value = t;
+        l === 1 && (s += Te), l === o.length - 1 && (s -= 15), t[c] = s;
+      }), Ie.value = t;
     };
     W([H, N, U], (e) => {
       const [o, t, n] = e;
-      let l = t.filter((d) => d.key === i.BULK_ACTIONS ? q.value : o[d.key] !== !1);
-      l.find((d) => d.key === i.EXPANDABLE) && (l = l.filter((d) => d.key !== i.EXPANDABLE)), n && l.unshift(mt), JSON.stringify(l) !== JSON.stringify(k.value) && (k.value = l, le()), n && ye();
+      let l = t.filter((c) => c.key === i.BULK_ACTIONS ? q.value : o[c.key] !== !1);
+      l.find((c) => c.key === i.EXPANDABLE) && (l = l.filter((c) => c.key !== i.EXPANDABLE)), n && l.unshift(mt), JSON.stringify(l) !== JSON.stringify(k.value) && (k.value = l, le()), n && ye();
     }, { deep: !0, immediate: !0 }), W(K, (e) => {
       e && (H.value = a.tablePreferences.columnVisibility || {});
     }, { immediate: !0 });
@@ -372,21 +372,21 @@ const eo = {
             disabled: !fe(s)
           });
         });
-        const n = t.filter((s) => !s.disabled && o.find((c) => E(c) === s.rowKey));
+        const n = t.filter((s) => !s.disabled && o.find((d) => E(d) === s.rowKey));
         n.length && n.filter((s) => s.selected).length === n.length ? G.value = !0 : (n.filter((s) => !s.selected).length, n.length, G.value = !1);
         const l = o.filter((s) => {
-          const c = t.find((m) => m.rowKey === E(s));
-          return !!(c && c.selected);
-        }), d = [];
+          const d = t.find((m) => m.rowKey === E(s));
+          return !!(d && d.selected);
+        }), c = [];
         F.value.forEach((s) => {
-          o.find((m) => E(s) === E(m)) || d.push(s);
-        }), F.value = [...d, ...l];
+          o.find((m) => E(s) === E(m)) || c.push(s);
+        }), F.value = [...c, ...l];
       }
-      L.value = Ie();
+      L.value = ze();
     }, { deep: !0, immediate: !0 }), W(F, (e) => {
       p("row-select", e);
     }), W(() => a.tablePreferences, (e) => {
-      e != null && e.pageSize && (Z.value = e.pageSize, xe.value++), g.value = e != null && e.sortColumnKey ? e.sortColumnKey : g.value, A.value = e != null && e.sortColumnOrder ? e.sortColumnOrder : A.value, I.value = e != null && e.columnWidths ? e.columnWidths : I.value, H.value = e != null && e.columnVisibility ? e.columnVisibility : H.value;
+      e != null && e.pageSize && (Z.value = e.pageSize, xe.value++), g.value = e != null && e.sortColumnKey ? e.sortColumnKey : g.value, A.value = e != null && e.sortColumnOrder ? e.sortColumnOrder : A.value, z.value = e != null && e.columnWidths ? e.columnWidths : z.value, H.value = e != null && e.columnVisibility ? e.columnVisibility : H.value;
     }), Jt([he, We], () => {
       const e = he.value;
       e && (M.value = e.scrollWidth > e.clientWidth, Ce.value = e.clientHeight + "px", ue.value = e.scrollHeight > e.clientHeight);
@@ -483,13 +483,13 @@ const eo = {
           ref: "table-wrapper",
           class: "table-wrapper",
           style: Ke(Ye.value),
-          onScrollPassive: dt
+          onScrollPassive: ct
         }, [
           R("table", {
             ref: "table",
             class: h(["table", {
-              "has-hover": a.rowHover && !ce.value,
-              "is-clickable": de.value
+              "has-hover": a.rowHover && !de.value,
+              "is-clickable": ce.value
             }]),
             "data-tableid": u(w)
           }, [
@@ -522,7 +522,7 @@ const eo = {
                     onMouseover: (l) => P.value = k.value[n - 1].key
                   }, null, 40, so)) : b("", !0),
                   R("div", {
-                    "aria-describedby": t.tooltip || z[D(t.key)] ? `${D(t.key)}-${u(w)}` : void 0,
+                    "aria-describedby": t.tooltip || I[D(t.key)] ? `${D(t.key)}-${u(w)}` : void 0,
                     class: h(["table-headers-container", { resized: X.value === t.key }])
                   }, [
                     t.key !== u(i).BULK_ACTIONS ? S(e.$slots, _e(t.key), {
@@ -558,10 +558,10 @@ const eo = {
                         ], !0)
                       ]),
                       default: C(() => [
-                        O(u(zt), {
+                        O(u(It), {
                           class: "header-tooltip-trigger",
                           color: `var(--kui-color-text-neutral, ${u(Mt)})`,
-                          size: u(re),
+                          size: `var(--kui-icon-size-30, ${u(re)})`,
                           tabindex: "0"
                         }, null, 8, ["color", "size"])
                       ]),
@@ -573,12 +573,12 @@ const eo = {
                         class: "active-sort-icon",
                         color: `var(--kui-color-text-primary, ${u(Ft)})`,
                         decorative: "",
-                        size: u(re)
+                        size: `var(--kui-icon-size-30, ${u(re)})`
                       }, null, 8, ["color", "size"])) : (r(), T(u(Kt), {
                         key: 1,
                         class: "sort-icon",
                         color: `var(--kui-color-text-neutral-weak, ${u(Dt)})`,
-                        size: u(re),
+                        size: `var(--kui-icon-size-30, ${u(re)})`,
                         title: `Sort by ${t.label}`
                       }, null, 8, ["color", "size", "title"]))
                     ], 64)) : b("", !0)
@@ -618,16 +618,16 @@ const eo = {
                     "last-row": n === a.data.length - 1 && !L.value.includes(n)
                   },
                   role: a.rowLink(t).to ? "link" : void 0,
-                  tabindex: de.value && !a.rowLink(t).to ? 0 : void 0
+                  tabindex: ce.value && !a.rowLink(t).to ? 0 : void 0
                 }, { ref_for: !0 }, a.rowAttrs(t)), [
-                  (r(!0), f(Y, null, be(k.value, (l, d) => (r(), T(u(Qt), {
+                  (r(!0), f(Y, null, be(k.value, (l, c) => (r(), T(u(Qt), {
                     key: `${_.value.get(t)}-cell-${l.key}`,
                     data: { isRowActionsDropdownOpen: !1 }
                   }, {
                     default: C(({ data: s }) => [
                       R("td", se({
                         class: {
-                          "resize-hover": Le.value === l.key && d !== k.value.length - 1 && oe(l),
+                          "resize-hover": Le.value === l.key && c !== k.value.length - 1 && oe(l),
                           "row-link": !!a.rowLink(t).to,
                           "sticky-column": Be(l.key),
                           "second-sticky-column": Ne(l.key),
@@ -638,7 +638,7 @@ const eo = {
                           ...Ee.value[l.key],
                           ...s.isRowActionsDropdownOpen ? { zIndex: 2 } : {}
                         }
-                      }, { ref_for: !0 }, a.cellAttrs({ headerKey: l.key, row: t, rowIndex: n, colIndex: d }), Et(et.value(t[l.key], t), !0)), [
+                      }, { ref_for: !0 }, a.cellAttrs({ headerKey: l.key, row: t, rowIndex: n, colIndex: c }), Et(et.value(t[l.key], t), !0)), [
                         l.key !== u(i).EXPANDABLE ? (r(), T(Lt(ft(t, l.key)), se({
                           key: 0,
                           class: "cell-wrapper"
@@ -661,7 +661,7 @@ const eo = {
                               default: C(() => [
                                 O(De, {
                                   modelValue: ae(t).selected,
-                                  "onUpdate:modelValue": (c) => ae(t).selected = c,
+                                  "onUpdate:modelValue": (d) => ae(t).selected = d,
                                   "aria-label": "Toggle row selection",
                                   class: "bulk-actions-checkbox",
                                   "data-testid": "bulk-actions-checkbox",
@@ -675,8 +675,8 @@ const eo = {
                               ref: "actionsDropdown",
                               class: "actions-dropdown",
                               "data-testid": "actions-dropdown",
-                              "kpop-attributes": { ...a.actionsDropdownPopoverAttributes, placement: "bottom-end", target: "body", popoverElementAttributes: ct(t, n) },
-                              onToggleDropdown: (c) => it(t, c, s)
+                              "kpop-attributes": { ...a.actionsDropdownPopoverAttributes, placement: "bottom-end", target: "body", popoverElementAttributes: dt(t, n) },
+                              onToggleDropdown: (d) => it(t, d, s)
                             }, {
                               items: C(() => [
                                 S(e.$slots, "action-items", { row: t }, void 0, !0)
@@ -689,8 +689,8 @@ const eo = {
                                   "data-testid": "row-actions-dropdown-trigger",
                                   icon: "",
                                   size: "small",
-                                  onMouseleave: o[9] || (o[9] = (c) => ce.value = !1),
-                                  onMouseover: o[10] || (o[10] = (c) => ce.value = !0)
+                                  onMouseleave: o[9] || (o[9] = (d) => de.value = !1),
+                                  onMouseover: o[10] || (o[10] = (d) => de.value = !0)
                                 }, {
                                   default: C(() => [
                                     O(u(Pt), {
@@ -713,9 +713,9 @@ const eo = {
                             class: h(["expandable-row-control", { expanded: L.value.includes(n) }]),
                             "data-testid": "expandable-row-control",
                             type: "button",
-                            onClick: (c) => gt(n, t)
+                            onClick: (d) => gt(n, t)
                           }, [
-                            O(u(It), {
+                            O(u(zt), {
                               class: "expandable-row-control-icon",
                               decorative: ""
                             })
@@ -751,7 +751,7 @@ const eo = {
                   }, [
                     R("div", mo, [
                       S(e.$slots, "row-expanded", {
-                        columnWidths: ze.value,
+                        columnWidths: Ie.value,
                         nestedHeaders: pt.value,
                         row: t
                       }, void 0, !0)

package/dist/kongponents.es167.js

@@ -1,6 +1,6 @@
 import { defineComponent as D, useSlots as T, useModel as w, ref as g, computed as f, watch as E, openBlock as s, createElementBlock as c, toDisplayString as K, createCommentVNode as h, Fragment as U, renderList as $, createVNode as q, unref as G, withCtx as C, renderSlot as O, createBlock as P, createSlots as R, mergeModels as S } from "vue";
-import z from "./kongponents.es210.js";
-import H from "./kongponents.es211.js";
+import z from "./kongponents.es220.js";
+import H from "./kongponents.es221.js";
 import { KUI_ANIMATION_DURATION_20 as J } from "./kongponents.es181.js";
 const Q = { class: "k-filter-group" }, W = {
   key: 0,

package/dist/kongponents.es174.js

@@ -1,4 +1,4 @@
-import { urlAlphabet as l } from "./kongponents.es219.js";
+import { urlAlphabet as l } from "./kongponents.es245.js";
 let o = (t = 21) => {
   let e = "", r = crypto.getRandomValues(new Uint8Array(t |= 0));
   for (; t--; )

package/dist/kongponents.es175.js

@@ -1,5 +1,5 @@
 import { defineComponent as y, computed as c, openBlock as d, createBlock as b, resolveDynamicComponent as k, normalizeStyle as x, withCtx as S, createElementBlock as w } from "vue";
-import { KUI_ICON_SIZE_50 as u } from "./kongponents.es273.js";
+import { KUI_ICON_SIZE_50 as u } from "./kongponents.es275.js";
 const z = ["aria-hidden"], p = '<path d="M10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="currentColor"/>', I = /* @__PURE__ */ y({
   __name: "CheckCircleIcon",
   props: {

package/dist/kongponents.es176.js

@@ -1,5 +1,5 @@
 import { defineComponent as b, computed as d, openBlock as u, createBlock as x, resolveDynamicComponent as L, normalizeStyle as S, withCtx as w, createElementBlock as $ } from "vue";
-import { KUI_ICON_SIZE_50 as c } from "./kongponents.es273.js";
+import { KUI_ICON_SIZE_50 as c } from "./kongponents.es275.js";
 const z = ["aria-hidden"], p = '<path d="M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z" fill="currentColor"/>', I = /* @__PURE__ */ b({
   __name: "CloseIcon",
   props: {

package/dist/kongponents.es177.js

@@ -1,5 +1,5 @@
 import { defineComponent as h, computed as d, openBlock as u, createBlock as b, resolveDynamicComponent as x, normalizeStyle as L, withCtx as S, createElementBlock as w } from "vue";
-import { KUI_ICON_SIZE_50 as p } from "./kongponents.es273.js";
+import { KUI_ICON_SIZE_50 as p } from "./kongponents.es275.js";
 const z = ["aria-hidden"], c = '<path d="M8.575 21.25C8.30833 21.25 8.05417 21.2 7.8125 21.1C7.57083 21 7.35833 20.8583 7.175 20.675L3.075 16.575C2.89167 16.3917 2.75 16.1792 2.65 15.9375C2.55 15.6958 2.5 15.4417 2.5 15.175V9.325C2.5 9.05833 2.55 8.80417 2.65 8.5625C2.75 8.32083 2.89167 8.10833 3.075 7.925L7.175 3.825C7.35833 3.64167 7.57083 3.5 7.8125 3.4C8.05417 3.3 8.30833 3.25 8.575 3.25H14.425C14.6917 3.25 14.9458 3.3 15.1875 3.4C15.4292 3.5 15.6417 3.64167 15.825 3.825L19.925 7.925C20.1083 8.10833 20.25 8.32083 20.35 8.5625C20.45 8.80417 20.5 9.05833 20.5 9.325V15.175C20.5 15.4417 20.45 15.6958 20.35 15.9375C20.25 16.1792 20.1083 16.3917 19.925 16.575L15.825 20.675C15.6417 20.8583 15.4292 21 15.1875 21.1C14.9458 21.2 14.6917 21.25 14.425 21.25H8.575ZM11.5 13.65L13.65 15.8C13.8333 15.9833 14.0667 16.075 14.35 16.075C14.6333 16.075 14.8667 15.9833 15.05 15.8C15.2333 15.6167 15.325 15.3833 15.325 15.1C15.325 14.8167 15.2333 14.5833 15.05 14.4L12.9 12.25L15.05 10.1C15.2333 9.91667 15.325 9.68333 15.325 9.4C15.325 9.11667 15.2333 8.88333 15.05 8.7C14.8667 8.51667 14.6333 8.425 14.35 8.425C14.0667 8.425 13.8333 8.51667 13.65 8.7L11.5 10.85L9.35 8.7C9.16667 8.51667 8.93333 8.425 8.65 8.425C8.36667 8.425 8.13333 8.51667 7.95 8.7C7.76667 8.88333 7.675 9.11667 7.675 9.4C7.675 9.68333 7.76667 9.91667 7.95 10.1L10.1 12.25L7.95 14.4C7.76667 14.5833 7.675 14.8167 7.675 15.1C7.675 15.3833 7.76667 15.6167 7.95 15.8C8.13333 15.9833 8.36667 16.075 8.65 16.075C8.93333 16.075 9.16667 15.9833 9.35 15.8L11.5 13.65Z" fill="currentColor"/>', k = /* @__PURE__ */ h({
   __name: "DangerIcon",
   props: {