@kong/kongponents 9.56.1 → 9.56.2

package/dist/kongponents.es120.js

@@ -1,5 +1,5 @@
-import { defineComponent as dt, useCssVars as ct, useAttrs as vt, useSlots as ft, watch as B, useTemplateRef as ee, computed as f, ref as g, useId as Ne, nextTick as te, onMounted as mt, onBeforeUnmount as pt, openBlock as m, createElementBlock as w, normalizeStyle as de, normalizeClass as ce, createBlock as L, mergeProps as ve, createSlots as fe, withCtx as I, createTextVNode as le, toDisplayString as z, renderSlot as U, createCommentVNode as M, createElementVNode as T, createVNode as x, unref as S, withKeys as G, Fragment as Be, renderList as Ue, withModifiers as W } from "vue";
-import ht from "./kongponents.es182.js";
+import { defineComponent as dt, useCssVars as ct, useAttrs as vt, useSlots as ft, watch as B, useTemplateRef as ee, computed as f, ref as g, useId as Ne, nextTick as te, onMounted as mt, onBeforeUnmount as pt, openBlock as m, createElementBlock as w, normalizeStyle as de, normalizeClass as ce, createBlock as L, mergeProps as ve, createSlots as fe, withCtx as I, createTextVNode as le, toDisplayString as P, renderSlot as U, createCommentVNode as M, createElementVNode as T, createVNode as $, unref as S, withKeys as G, Fragment as Be, renderList as Ue, withModifiers as W } from "vue";
+import ht from "./kongponents.es200.js";
 import ae from "./kongponents.es30.js";
 import Re from "./kongponents.es49.js";
 import gt from "./kongponents.es51.js";
@@ -7,18 +7,18 @@ import bt from "./kongponents.es56.js";
 import yt from "./kongponents.es23.js";
 import kt from "./kongponents.es24.js";
 /* empty css                 */
-import wt from "./kongponents.es183.js";
-import It from "./kongponents.es184.js";
-import Ct from "./kongponents.es185.js";
+import wt from "./kongponents.es240.js";
+import It from "./kongponents.es241.js";
+import Ct from "./kongponents.es212.js";
 import me from "./kongponents.es176.js";
-import St from "./kongponents.es186.js";
+import St from "./kongponents.es190.js";
 import { KUI_SPACE_40 as At, KUI_ICON_SIZE_40 as pe } from "./kongponents.es181.js";
-import { ResizeObserverHelper as xt } from "./kongponents.es187.js";
-import { sanitizeInput as Et } from "./kongponents.es172.js";
-import { useEventListener as $t } from "./kongponents.es188.js";
+import { ResizeObserverHelper as $t } from "./kongponents.es213.js";
+import { sanitizeInput as xt } from "./kongponents.es172.js";
+import { useEventListener as Et } from "./kongponents.es203.js";
 import { getUniqueStringId as Ft } from "./kongponents.es153.js";
-import { normalizeSize as He } from "./kongponents.es189.js";
-const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"], zt = { key: 0 }, Mt = {
+import { normalizeSize as He } from "./kongponents.es182.js";
+const zt = { "data-testid": "multiselect-container" }, Kt = ["id", "tabindex"], Pt = { key: 0 }, Mt = {
   key: 1,
   class: "expanded-selection-empty"
 }, Vt = { class: "multiselect-selection-badge-label" }, qt = ["aria-label", "onClick"], Lt = { class: "multiselect-icons-container" }, Tt = {
@@ -66,7 +66,7 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
   emits: ["selected", "input", "change", "update:modelValue", "query-change", "item-added", "item-removed"],
   setup(s, { emit: se }) {
     ct((e) => ({
-      v9681db56: _e.value
+      v1718d198: _e.value
     }));
     const J = (e) => {
       const t = [], a = (l) => {
@@ -96,18 +96,18 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
     const C = se, ge = ee("kMultiselectItems"), be = f(() => v.required !== void 0 && String(v.required) !== "false"), Ge = f(() => Oe(s.label, be.value)), We = f(() => {
       var e, t;
       return !!((e = s.labelAttributes) != null && e.help || (t = s.labelAttributes) != null && t.info || he["label-tooltip"]);
-    }), ye = (e) => V.value || K.value || e != null && e.disabled ? "neutral" : s.error ? "danger" : "info", ke = {
+    }), ye = (e) => V.value || z.value || e != null && e.disabled ? "neutral" : s.error ? "danger" : "info", ke = {
       hideCaret: !0,
       placement: "bottom-start",
       popoverTimeout: 0,
       popoverClasses: "k-multiselect-popover multiselect-popover"
-    }, Z = g(0), R = g(0), Je = Ne(), we = f(() => v.id ? String(v.id) : Je), Ie = Ne(), X = ee("multiselectElement"), je = ee("multiselectDropdownInputElement"), Ce = ee("multiselectSelectionsStagingElement"), oe = f(() => s.selectedRowCount * Ht), h = g(""), Se = f(() => !(!h.value || n.value.filter((e) => e.label === h.value).length)), F = g(null), n = g([]), A = g([]), Y = g([]), d = g([]), p = g([]), b = g([]), E = /* @__PURE__ */ new Set(), ue = g([]), H = g([]), Qe = f(() => H.value.map((e) => e.label).join(", ")), Ae = g(!1), D = g(!1), ie = g(!1), V = f(() => (v == null ? void 0 : v.disabled) !== void 0 && String(v == null ? void 0 : v.disabled) !== "false"), K = f(() => (v == null ? void 0 : v.readonly) !== void 0 && String(v == null ? void 0 : v.readonly) !== "false"), Ze = f({
+    }, Z = g(0), R = g(0), Je = Ne(), we = f(() => v.id ? String(v.id) : Je), Ie = Ne(), X = ee("multiselectElement"), je = ee("multiselectDropdownInputElement"), Ce = ee("multiselectSelectionsStagingElement"), oe = f(() => s.selectedRowCount * Ht), h = g(""), Se = f(() => !(!h.value || n.value.filter((e) => e.label === h.value).length)), F = g(null), n = g([]), A = g([]), Y = g([]), d = g([]), p = g([]), b = g([]), x = /* @__PURE__ */ new Set(), ue = g([]), H = g([]), Qe = f(() => H.value.map((e) => e.label).join(", ")), Ae = g(!1), D = g(!1), ie = g(!1), V = f(() => (v == null ? void 0 : v.disabled) !== void 0 && String(v == null ? void 0 : v.disabled) !== "false"), z = f(() => (v == null ? void 0 : v.readonly) !== void 0 && String(v == null ? void 0 : v.readonly) !== "false"), Ze = f({
       get() {
         return s.modelValue;
       },
       set(e) {
         const t = n.value.filter((a) => e.includes(a.value));
-        t.length ? Ke(t) : e.length || re();
+        t.length ? ze(t) : e.length || re();
       }
     }), Xe = f(() => {
       const e = { ...v };
@@ -127,9 +127,9 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
       return He(e);
     }), lt = f(() => ({
       width: tt.value
-    })), xe = f(() => ({
+    })), $e = f(() => ({
       width: O.value + "px"
-    })), Ee = f(() => {
+    })), xe = f(() => {
       if (d.value.length === 0) {
         if (!s.collapsedContext && s.placeholder)
           return s.placeholder;
@@ -137,12 +137,12 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
           return s.searchPlaceholder;
       }
       return d.value.length === 1 ? `${d.value.length} item selected` : `${d.value.length} items selected`;
-    }), at = f(() => s.autosuggest ? n.value : s.filterFunction({ items: n.value, query: h.value })), $e = f(() => {
+    }), at = f(() => s.autosuggest ? n.value : s.filterFunction({ items: n.value, query: h.value })), Ee = f(() => {
       if (s.autosuggest || !h.value)
         return A.value;
       const e = at.value, t = new Set(e.map((l) => l.value)), a = [];
       for (const l of A.value)
-        if ($(l)) {
+        if (E(l)) {
           const o = l.items.filter((u) => t.has(u.value));
           o.length > 0 && a.push({
             label: l.label,
@@ -176,12 +176,12 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
           if (e.clientHeight > oe.value) {
             const a = Array.from(e.querySelectorAll(".multiselect-selection-badge")).filter((u) => u.offsetTop >= oe.value), l = p.value.length - a.length, o = p.value.splice(l, a.length);
             for (const u of o)
-              E.has(u.value) || (E.add(u.value), b.value.push(u));
+              x.has(u.value) || (x.add(u.value), b.value.push(u));
           }
           R.value++;
         }
       }, 0);
-    }, Ke = (e) => {
+    }, ze = (e) => {
       e.forEach((t) => {
         var l;
         const a = ((l = n.value.filter((o) => o.value === t.value)) == null ? void 0 : l[0]) || null;
@@ -190,11 +190,11 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
     }, ot = (e, t = !1) => {
       const a = new Set(e.map((l) => l.value));
       d.value = d.value.filter((l) => !a.has(l.value)), p.value = p.value.filter((l) => !a.has(l.value)), b.value = b.value.filter((l) => !a.has(l.value)), e.forEach((l) => {
-        if (E.delete(l.value), l.selected = !1, b.value.length) {
+        if (x.delete(l.value), l.selected = !1, b.value.length) {
           const o = b.value.pop();
-          o && (p.value.push(o), E.delete(o.value));
+          o && (p.value.push(o), x.delete(o.value));
         }
-        s.enableItemCreation && l.custom && (n.value = n.value.filter((o) => o.value !== l.value), A.value = A.value.filter((o) => $(o) ? !0 : o.value !== l.value), C("item-removed", l));
+        s.enableItemCreation && l.custom && (n.value = n.value.filter((o) => o.value !== l.value), A.value = A.value.filter((o) => E(o) ? !0 : o.value !== l.value), C("item-removed", l));
       }), t && N();
     }, ne = (e, t) => {
       var u, y;
@@ -202,32 +202,32 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
       if (s.enableItemCreation && (l != null && l.custom) && (a = !0), l === null && (l = ((y = d.value.filter((r) => r.value === e.value)) == null ? void 0 : y[0]) || null), l === null)
         return;
       if (l.selected) {
-        if (d.value = d.value.filter((r) => r.value !== e.value), p.value.filter((r) => r.value === e.value).length ? p.value = p.value.filter((r) => r.value !== e.value) : E.delete(e.value) && (b.value = b.value.filter((r) => r.value !== e.value)), l.selected = !1, b.value.length) {
+        if (d.value = d.value.filter((r) => r.value !== e.value), p.value.filter((r) => r.value === e.value).length ? p.value = p.value.filter((r) => r.value !== e.value) : x.delete(e.value) && (b.value = b.value.filter((r) => r.value !== e.value)), l.selected = !1, b.value.length) {
           const r = b.value.pop();
-          r && (p.value.push(r), E.delete(r.value));
+          r && (p.value.push(r), x.delete(r.value));
         }
-        a && (n.value = n.value.filter((r) => r.value !== e.value), A.value = A.value.filter((r) => $(r) ? !0 : r.value !== e.value), C("item-removed", e));
+        a && (n.value = n.value.filter((r) => r.value !== e.value), A.value = A.value.filter((r) => E(r) ? !0 : r.value !== e.value), C("item-removed", e));
       } else
         l.selected = !0, d.value.push(l), p.value.push(l), t && (l.custom = !0, n.value.push(l), A.value.unshift(l));
       N();
       const o = d.value.map((r) => r.value);
       C("selected", d.value), C("change", l), C("update:modelValue", o);
-    }, Pe = (e) => {
-      s.enableItemCreation && ze(), e.preventDefault();
-    }, ze = () => {
+    }, Ke = (e) => {
+      s.enableItemCreation && Pe(), e.preventDefault();
+    }, Pe = () => {
       var a;
       if (!s.enableItemCreation || !h.value || !Se.value || !s.itemCreationValidator(h.value))
         return;
       const e = n.value.length + 1, t = {
         label: h.value.trim(),
         value: Ft(),
-        key: `${(a = Et(h.value.trim()).replace(/ /gi, "-")) == null ? void 0 : a.replace(/[^a-z0-9-_]/gi, "")}-${e}`
+        key: `${(a = xt(h.value.trim()).replace(/ /gi, "-")) == null ? void 0 : a.replace(/[^a-z0-9-_]/gi, "")}-${e}`
       };
       C("item-added", t), ne(t, !0), h.value = "";
-    }, $ = (e) => "items" in e && Array.isArray(e.items), Me = () => {
+    }, E = (e) => "items" in e && Array.isArray(e.items), Me = () => {
       const e = [], t = [], a = [];
-      for (const u of $e.value)
-        $(u) ? a.push(u) : t.push(u);
+      for (const u of Ee.value)
+        E(u) ? a.push(u) : t.push(u);
       const l = t.filter((u) => u.selected), o = t.filter((u) => !u.selected);
       e.push(...l, ...o);
       for (const u of a) {
@@ -242,7 +242,7 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
     }, re = () => {
       n.value.forEach((t) => {
         t.disabled || (t.selected = !1, t.custom && C("item-removed", t));
-      }), n.value = n.value.filter((t) => !(t.custom && !t.disabled)), A.value = A.value.filter((t) => $(t) ? !0 : !(t.custom && !t.disabled)), d.value = d.value.filter((t) => t.disabled), p.value = p.value.filter((t) => t.disabled), b.value = b.value.filter((t) => (t.disabled || E.delete(t.value), t.disabled)), h.value = "", N();
+      }), n.value = n.value.filter((t) => !(t.custom && !t.disabled)), A.value = A.value.filter((t) => E(t) ? !0 : !(t.custom && !t.disabled)), d.value = d.value.filter((t) => t.disabled), p.value = p.value.filter((t) => t.disabled), b.value = b.value.filter((t) => (t.disabled || x.delete(t.value), t.disabled)), h.value = "", N();
       const e = d.value.map((t) => t.value);
       C("selected", d.value), C("update:modelValue", e), C("query-change", "");
     }, Ve = (e) => {
@@ -271,13 +271,13 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
         if (e)
           if (e.clientHeight > oe.value) {
             const a = p.value.pop();
-            a && !E.has(a.value) && (b.value.push(a), E.add(a.value)), R.value++;
+            a && !x.has(a.value) && (b.value.push(a), x.add(a.value)), R.value++;
           } else
             ue.value = Q(p.value), H.value = Q(b.value), Z.value++;
       }, 0);
     }), B(Z, async () => {
       F.value && typeof F.value.updatePopper == "function" && (await te(), F.value.updatePopper());
-    }), B($e, () => {
+    }), B(Ee, () => {
       Me();
     }), B(Ze, (e, t) => {
       if (JSON.stringify(e) !== JSON.stringify(t)) {
@@ -286,25 +286,25 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
           return;
         }
         const a = new Set(t), l = new Set(e), o = n.value.filter((y) => l.has(y.value)), u = d.value.filter((y) => !l.has(y.value) && a.has(y.value));
-        u.length && ot(u), o.length && Ke(o);
+        u.length && ot(u), o.length && ze(o);
       }
     }), B(() => s.items, (e, t) => {
       var y, r;
       if (JSON.stringify(e) === JSON.stringify(t))
         return;
-      const a = Q(s.items), l = a.some((i) => $(i)), o = [], u = [];
+      const a = Q(s.items), l = a.some((i) => E(i)), o = [], u = [];
       if (l)
         for (const i of a)
-          $(i) ? o.push(...i.items) : o.push(i);
+          E(i) ? o.push(...i.items) : o.push(i);
       else {
         const i = /* @__PURE__ */ new Map();
         for (const c of a)
-          $(c) || (c.group && (i.has(c.group) || i.set(c.group, []), i.get(c.group).push(c)), o.push(c));
-        const P = Array.from(i.keys()).sort(
+          E(c) || (c.group && (i.has(c.group) || i.set(c.group, []), i.get(c.group).push(c)), o.push(c));
+        const K = Array.from(i.keys()).sort(
           (c, q) => c.toLowerCase().localeCompare(q.toLowerCase())
         ), k = o.filter((c) => !c.group);
         u.push(...k);
-        for (const c of P)
+        for (const c of K)
           u.push({
             label: c,
             items: i.get(c)
@@ -313,18 +313,18 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
       n.value = o;
       for (let i = 0; i < n.value.length; i++) {
         n.value[i].selected === void 0 && (n.value[i].selected = !1);
-        let P = `${(r = (y = n.value[i].label) == null ? void 0 : y.replace(/ /gi, "-")) == null ? void 0 : r.replace(/[^a-z0-9-_]/gi, "")}-${i}`;
-        if (P.includes("undefined") && (P = `multiselect-item-label-${i}`), n.value[i].key = P, s.modelValue.includes(n.value[i].value) || n.value[i].selected) {
+        let K = `${(r = (y = n.value[i].label) == null ? void 0 : y.replace(/ /gi, "-")) == null ? void 0 : r.replace(/[^a-z0-9-_]/gi, "")}-${i}`;
+        if (K.includes("undefined") && (K = `multiselect-item-label-${i}`), n.value[i].key = K, s.modelValue.includes(n.value[i].value) || n.value[i].selected) {
           const k = n.value[i];
           k.selected = !0, d.value.filter((c) => c.value === k.value).length || d.value.push(k), p.value.filter((c) => c.value === k.value).length || p.value.push(k);
         }
       }
       if (l) {
-        const i = [], P = [];
+        const i = [], K = [];
         for (const k of a)
-          if ($(k)) {
+          if (E(k)) {
             const c = k.items.map((q) => n.value.find((rt) => rt.value === q.value)).filter((q) => q !== void 0);
-            P.push({
+            K.push({
               label: k.label,
               key: k.key,
               items: c
@@ -333,7 +333,7 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
             const c = n.value.find((q) => q.value === k.value);
             c && i.push(c);
           }
-        u.push(...i, ...P);
+        u.push(...i, ...K);
       }
       A.value = u, N(), F.value && typeof F.value.updatePopper == "function" && te(() => {
         F.value.updatePopper();
@@ -344,7 +344,7 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
       O.value = 300, await te(), O.value = ((e = X.value) == null ? void 0 : e.clientWidth) || 300, N();
     }, _ = g();
     return mt(() => {
-      $t("resize", Te), _.value = xt.create(Te), _.value.observe(X.value);
+      Et("resize", Te), _.value = $t.create(Te), _.value.observe(X.value);
     }), pt(() => {
       _.value && X.value && _.value.unobserve(X.value);
     }), (e, t) => (m(), w("div", {
@@ -357,7 +357,7 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
         required: be.value
       }), fe({
         default: I(() => [
-          le(z(Ge.value) + " ", 1)
+          le(P(Ge.value) + " ", 1)
         ]),
         _: 2
       }, [
@@ -369,14 +369,14 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
           key: "0"
         } : void 0
       ]), 1040, ["data-testid", "for", "required"])) : M("", !0),
-      T("div", Kt, [
-        x(yt, null, {
+      T("div", zt, [
+        $(yt, null, {
           default: I(({ isToggled: a, toggle: l }) => [
-            x(bt, ve({
+            $(bt, ve({
               ref_key: "popper",
               ref: F,
               "hide-close-icon": "",
-              offset: S(At)
+              offset: `var(--kui-space-40, ${S(At)})`
             }, et.value, {
               onClose: () => Fe(!1, a, l),
               onOpen: () => Fe(!0, a, l)
@@ -389,8 +389,8 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
                   onMouseenter: t[8] || (t[8] = () => D.value = !0),
                   onMouseleave: t[9] || (t[9] = () => D.value = !1)
                 }, [
-                  !s.collapsedContext && !K.value ? (m(), w("div", Tt, [
-                    x(Re, {
+                  !s.collapsedContext && !z.value ? (m(), w("div", Tt, [
+                    $(Re, {
                       ref: "multiselectDropdownInputElement",
                       autocapitalize: "off",
                       autocomplete: "off",
@@ -405,7 +405,7 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
                       onClick: t[5] || (t[5] = W(() => {
                       }, ["stop"])),
                       onFocus: Le,
-                      onKeydown: G(Pe, ["enter"]),
+                      onKeydown: G(Ke, ["enter"]),
                       onKeyup: [
                         it,
                         t[6] || (t[6] = G(W(() => {
@@ -414,13 +414,13 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
                       "onUpdate:modelValue": Ve
                     }, null, 8, ["model-value", "placeholder"])
                   ])) : M("", !0),
-                  x(wt, {
+                  $(wt, {
                     ref: "kMultiselectItems",
                     "filter-string": h.value,
                     "item-creation-enabled": s.enableItemCreation && Se.value,
                     "item-creation-valid": s.itemCreationValidator(h.value),
                     items: Y.value,
-                    onAddItem: ze,
+                    onAddItem: Pe,
                     onSelected: ne
                   }, {
                     content: I(({ item: o }) => [
@@ -447,7 +447,7 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
                   "data-testid": "dropdown-footer"
                 }, [
                   U(e.$slots, "dropdown-footer-text", {}, () => [
-                    le(z(s.dropdownFooterText), 1)
+                    le(P(s.dropdownFooterText), 1)
                   ], !0)
                 ], 2)) : M("", !0)
               ]),
@@ -455,10 +455,10 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
                 T("div", ve({
                   id: we.value,
                   ref: "multiselectElement",
-                  class: ["multiselect-trigger", { focused: ie.value, hovered: D.value, disabled: V.value, readonly: K.value }],
+                  class: ["multiselect-trigger", { focused: ie.value, hovered: D.value, disabled: V.value, readonly: z.value }],
                   "data-testid": "multiselect-trigger",
                   role: "listbox",
-                  tabindex: V.value || K.value || s.collapsedContext ? -1 : 0
+                  tabindex: V.value || z.value || s.collapsedContext ? -1 : 0
                 }, Xe.value, {
                   onClick: st,
                   onKeydown: [
@@ -466,18 +466,18 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
                     G(qe, ["space"])
                   ]
                 }), [
-                  s.collapsedContext ? (m(), w("div", zt, [
-                    x(Re, {
+                  s.collapsedContext ? (m(), w("div", Pt, [
+                    $(Re, {
                       autocapitalize: "off",
                       autocomplete: "off",
                       autocorrect: "off",
-                      class: ce(["multiselect-input", { "is-readonly": K.value }]),
+                      class: ce(["multiselect-input", { "is-readonly": z.value }]),
                       "data-testid": "multiselect-input",
                       disabled: V.value,
                       "model-value": h.value,
                       name: "multiselect-options-search",
-                      placeholder: Ee.value,
-                      readonly: K.value ? !0 : void 0,
+                      placeholder: xe.value,
+                      readonly: z.value ? !0 : void 0,
                       spellcheck: "false",
                       type: "text",
                       onBlur: t[0] || (t[0] = () => ie.value = !1),
@@ -485,7 +485,7 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
                         a.value && o.stopPropagation();
                       },
                       onFocus: nt,
-                      onKeydown: G(Pe, ["enter"]),
+                      onKeydown: G(Ke, ["enter"]),
                       onKeyup: (o) => ut(o, a),
                       onMouseenter: t[1] || (t[1] = () => D.value = !0),
                       onMouseleave: t[2] || (t[2] = () => D.value = !1),
@@ -495,7 +495,7 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
                     key: 2,
                     class: "selection-badges-container",
                     "data-testid": "selection-badges-container",
-                    style: de(xe.value)
+                    style: de($e.value)
                   }, [
                     (m(!0), w(Be, null, Ue(ue.value, (o, u) => (m(), L(ae, {
                       key: `${S(Ie)}-${o.key ? o.key : u}-badge-${Z.value}`,
@@ -509,11 +509,11 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
                     }, fe({
                       default: I(() => [
                         U(e.$slots, "item-badge-icon", { item: o }, void 0, !0),
-                        T("span", Vt, z(o.label), 1)
+                        T("span", Vt, P(o.label), 1)
                       ]),
                       _: 2
                     }, [
-                      o.selected && !o.disabled && !V.value && !K.value ? {
+                      o.selected && !o.disabled && !V.value && !z.value ? {
                         name: "icon",
                         fn: I(() => [
                           T("button", {
@@ -523,7 +523,7 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
                             type: "button",
                             onClick: (y) => ne(o)
                           }, [
-                            x(S(me), { decorative: "" })
+                            $(S(me), { decorative: "" })
                           ], 8, qt)
                         ]),
                         key: "0"
@@ -536,7 +536,7 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
                       text: Qe.value
                     }, {
                       default: I(() => [
-                        x(ae, {
+                        $(ae, {
                           appearance: ye(),
                           class: "hidden-selection-count",
                           "data-testid": "hidden-selection-count",
@@ -544,14 +544,14 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
                           }, ["stop"]))
                         }, {
                           default: I(() => [
-                            le(" +" + z(H.value.length), 1)
+                            le(" +" + P(H.value.length), 1)
                           ]),
                           _: 1
                         }, 8, ["appearance"])
                       ]),
                       _: 1
                     }, 8, ["text"])) : M("", !0)
-                  ], 4)) : (m(), w("div", Mt, z(Ee.value), 1)),
+                  ], 4)) : (m(), w("div", Mt, P(xe.value), 1)),
                   T("div", Lt, [
                     !s.loading && d.value.length && a.value ? (m(), w("button", {
                       key: 0,
@@ -561,20 +561,22 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
                       type: "button",
                       onClick: re
                     }, [
-                      x(S(me), { size: S(pe) }, null, 8, ["size"])
+                      $(S(me), {
+                        size: `var(--kui-icon-size-40, ${S(pe)})`
+                      }, null, 8, ["size"])
                     ])) : s.loading ? (m(), L(S(St), {
                       key: 1,
                       class: "multiselect-loading-icon",
-                      size: S(pe),
+                      size: `var(--kui-icon-size-40, ${S(pe)})`,
                       title: "Loading"
                     }, null, 8, ["size"])) : (m(), L(S(Ct), {
                       key: 2,
                       class: "multiselect-chevron-icon",
                       decorative: "",
-                      size: S(pe)
+                      size: `var(--kui-icon-size-40, ${S(pe)})`
                     }, null, 8, ["size"]))
                   ])
-                ], 16, Pt)
+                ], 16, Kt)
               ]),
               _: 2
             }, 1040, ["offset", "onClose", "onOpen"])
@@ -582,13 +584,13 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
           _: 3
         })
       ]),
-      s.help ? (m(), w("p", Bt, z(s.help), 1)) : M("", !0),
+      s.help ? (m(), w("p", Bt, P(s.help), 1)) : M("", !0),
       s.collapsedContext ? M("", !0) : (m(), w("div", Ut, [
         (m(), w("div", {
           key: R.value,
           ref: "multiselectSelectionsStagingElement",
           class: "selection-badges-container staging",
-          style: de(xe.value),
+          style: de($e.value),
           tabindex: "-1"
         }, [
           (m(!0), w(Be, null, Ue(p.value, (a, l) => (m(), L(ae, {
@@ -599,24 +601,24 @@ const Kt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
           }, fe({
             default: I(() => [
               U(e.$slots, "item-badge-icon", { item: a }, void 0, !0),
-              T("span", Rt, z(a.label), 1)
+              T("span", Rt, P(a.label), 1)
             ]),
             _: 2
           }, [
-            a.selected && !a.disabled && !V.value && !K.value ? {
+            a.selected && !a.disabled && !V.value && !z.value ? {
               name: "icon",
               fn: I(() => [
-                x(S(me), { "aria-hidden": "true" })
+                $(S(me), { "aria-hidden": "true" })
               ]),
               key: "0"
             } : void 0
           ]), 1024))), 128)),
-          x(ae, {
+          $(ae, {
             "aria-hidden": "true",
             class: "hidden-selection-count"
           }, {
             default: I(() => [
-              le(" +" + z(b.value.length), 1)
+              le(" +" + P(b.value.length), 1)
             ]),
             _: 1
           })

package/dist/kongponents.es123.js

@@ -3,9 +3,9 @@ import se from "./kongponents.es43.js";
 import F from "./kongponents.es32.js";
 import ve from "./kongponents.es227.js";
 import re from "./kongponents.es228.js";
-import ce from "./kongponents.es185.js";
+import ce from "./kongponents.es212.js";
 import de from "./kongponents.es229.js";
-import { ResizeObserverHelper as ge } from "./kongponents.es187.js";
+import { ResizeObserverHelper as ge } from "./kongponents.es213.js";
 import { DEFAULT_PAGE_SIZE as fe } from "./kongponents.es173.js";
 const be = {
   class: "pagination-text large-screen",

package/dist/kongponents.es125.js

@@ -1,12 +1,12 @@
-import { defineComponent as Y, useSlots as _, useId as U, ref as v, computed as r, onMounted as ee, onBeforeUnmount as te, watch as oe, openBlock as f, createBlock as le, resolveDynamicComponent as ae, withKeys as ie, withModifiers as re, withCtx as h, createElementVNode as C, renderSlot as y, createVNode as b, unref as n, createTextVNode as H, toDisplayString as $, Transition as ne, withDirectives as se, mergeProps as ue, normalizeStyle as ce, createElementBlock as k, createCommentVNode as w, normalizeClass as N, vShow as de } from "vue";
-import { useFloating as ve } from "./kongponents.es234.js";
+import { defineComponent as Y, useSlots as _, useId as U, ref as v, computed as r, onMounted as ee, onBeforeUnmount as te, watch as oe, openBlock as f, createBlock as le, resolveDynamicComponent as ae, withKeys as ie, withModifiers as re, withCtx as h, createElementVNode as C, renderSlot as y, createVNode as b, unref as n, createTextVNode as $, toDisplayString as H, Transition as ne, withDirectives as se, mergeProps as ue, normalizeStyle as ce, createElementBlock as k, createCommentVNode as w, normalizeClass as N, vShow as de } from "vue";
+import { useFloating as ve } from "./kongponents.es201.js";
 import fe from "./kongponents.es32.js";
 import pe from "./kongponents.es176.js";
 import { KUI_SPACE_60 as me, KUI_ICON_SIZE_30 as ge } from "./kongponents.es181.js";
-import he from "./kongponents.es235.js";
-import { useEventListener as p } from "./kongponents.es188.js";
-import { normalizeSize as x } from "./kongponents.es189.js";
-import { shift as Ce, flip as ye, autoPlacement as be, autoUpdate as ke } from "./kongponents.es236.js";
+import he from "./kongponents.es202.js";
+import { useEventListener as p } from "./kongponents.es203.js";
+import { normalizeSize as x } from "./kongponents.es182.js";
+import { shift as Ce, flip as ye, autoPlacement as be, autoUpdate as ke } from "./kongponents.es204.js";
 const we = ["id", "aria-labelledby", "x-placement"], xe = ["tabindex"], Ee = {
   key: 1,
   class: "popover-header"
@@ -37,7 +37,7 @@ const we = ["id", "aria-labelledby", "x-placement"], xe = ["tabindex"], Ee = {
   },
   emits: ["open", "close", "popover-click"],
   setup(e, { expose: O, emit: V }) {
-    const E = V, u = _(), I = U(), z = U(), c = v(null), s = v(null), a = v(!1), i = r(() => {
+    const E = V, u = _(), I = U(), T = U(), c = v(null), s = v(null), a = v(!1), i = r(() => {
       var t, l;
       return c.value && ((t = c.value) != null && t.children[0]) ? (l = c.value) == null ? void 0 : l.children[0] : null;
     }), P = v(null), W = () => {
@@ -62,11 +62,11 @@ const we = ["id", "aria-labelledby", "x-placement"], xe = ["tabindex"], Ee = {
         return;
       const l = t.target, Q = (A = c.value) == null ? void 0 : A.contains(l), X = (K = s.value) == null ? void 0 : K.contains(l);
       Q || X || o();
-    }, T = r(() => e.placement.trim().replace(/ /g, "-").replace(/[A-Z]+(?![a-z])|[A-Z]/g, (t, l) => (l ? "-" : "") + t.toLowerCase()).replace(/--+/g, "-").replace(/-+$/g, "")), { floatingStyles: M, placement: d, update: j } = ve(i, s, {
-      ...T.value === "auto" && { middleware: [be()] },
+    }, z = r(() => e.placement.trim().replace(/ /g, "-").replace(/[A-Z]+(?![a-z])|[A-Z]/g, (t, l) => (l ? "-" : "") + t.toLowerCase()).replace(/--+/g, "-").replace(/-+$/g, "")), { floatingStyles: M, placement: d, update: j } = ve(i, s, {
+      ...z.value === "auto" && { middleware: [be()] },
       // when placement is auto just use autoPlacement middleware
-      ...T.value !== "auto" && {
-        placement: T.value,
+      ...z.value !== "auto" && {
+        placement: z.value,
         middleware: [
           Ce(),
           // Shifts the floating element to keep it in view.
@@ -125,7 +125,7 @@ const we = ["id", "aria-labelledby", "x-placement"], xe = ["tabindex"], Ee = {
               "data-testid": "popover-button"
             }, {
               default: h(() => [
-                H($(e.buttonText), 1)
+                $(H(e.buttonText), 1)
               ]),
               _: 1
             }, 8, ["aria-controls"])
@@ -142,7 +142,7 @@ const we = ["id", "aria-labelledby", "x-placement"], xe = ["tabindex"], Ee = {
                   id: n(I),
                   ref_key: "popoverElement",
                   ref: s,
-                  "aria-labelledby": u.title || e.title ? n(z) : void 0,
+                  "aria-labelledby": u.title || e.title ? n(T) : void 0,
                   class: ["popover", J.value],
                   role: "dialog",
                   style: R.value,
@@ -165,17 +165,17 @@ const we = ["id", "aria-labelledby", "x-placement"], xe = ["tabindex"], Ee = {
                       b(n(pe), {
                         class: "popover-close-icon",
                         decorative: "",
-                        size: n(ge)
+                        size: `var(--kui-icon-size-30, ${n(ge)})`
                       }, null, 8, ["size"])
                     ], 8, xe)),
                     u.title || e.title ? (f(), k("div", Ee, [
                       u.title || e.title ? (f(), k("div", {
                         key: 0,
-                        id: n(z),
+                        id: n(T),
                         class: N(["popover-title", { "close-icon-spacing": !e.hideCloseIcon }])
                       }, [
                         y(t.$slots, "title", {}, () => [
-                          H($(e.title), 1)
+                          $(H(e.title), 1)
                         ], !0)
                       ], 10, Ie)) : w("", !0)
                     ])) : w("", !0),

package/dist/kongponents.es131.js

@@ -1,5 +1,5 @@
 import { defineComponent as g, watch as y, computed as h, openBlock as n, createElementBlock as o, Fragment as k, renderList as V, normalizeClass as C, renderSlot as z, createTextVNode as q, toDisplayString as w } from "vue";
-import { warnInvalidProp as S } from "./kongponents.es200.js";
+import { warnInvalidProp as S } from "./kongponents.es223.js";
 const I = { class: "k-segmented-control" }, $ = ["data-testid", "disabled", "onClick"], x = /* @__PURE__ */ g({
   __name: "KSegmentedControl",
   props: {