@kong/kongponents 9.56.1 → 9.56.2

package/dist/kongponents.es100.js

@@ -5,7 +5,7 @@ import j from "./kongponents.es24.js";
 import G from "./kongponents.es56.js";
 import H from "./kongponents.es23.js";
 import J from "./kongponents.es44.js";
-import Q from "./kongponents.es185.js";
+import Q from "./kongponents.es212.js";
 import { KUI_SPACE_20 as W } from "./kongponents.es181.js";
 const X = {
   class: "dropdown-list",
@@ -45,9 +45,9 @@ const X = {
     }, g = k(() => {
       var e;
       return ((e = a.value) == null ? void 0 : e.label) || o.triggerText || o.label || "";
-    }), a = E(), h = (e) => {
+    }), a = E(), v = (e) => {
       o.selectionMenu && (a.value = e);
-    }, v = () => {
+    }, h = () => {
       var e;
       (e = m.value) == null || e.hidePopover();
     }, u = (e, t, r) => {
@@ -65,7 +65,7 @@ const X = {
         var e;
         (e = m.value) == null || e.showPopover();
       },
-      closeDropdown: v
+      closeDropdown: h
     }), (e, t) => (n(), C("div", {
       class: O(["k-dropdown", { "selection-dropdown-menu": o.selectionMenu }])
     }, [
@@ -75,7 +75,7 @@ const X = {
             "close-on-popover-click": "",
             "data-testid": "dropdown-popover",
             "hide-close-icon": "",
-            offset: T(W),
+            offset: `var(--kui-space-20, ${T(W)})`,
             onClose: () => u(l, r, !1),
             onOpen: () => u(l, r, !0),
             onPopoverClick: () => u(l, r, !1)
@@ -83,8 +83,8 @@ const X = {
             content: i(() => [
               z("ul", X, [
                 x(e.$slots, "items", {
-                  closeDropdown: v,
-                  handleSelection: h,
+                  closeDropdown: h,
+                  handleSelection: v,
                   items: o.items
                 }, () => [
                   (n(!0), C(F, null, L(o.items, (d, M) => {
@@ -94,7 +94,7 @@ const X = {
                       item: d,
                       selected: o.selectionMenu && ((b = a.value) == null ? void 0 : b.value) === d.value,
                       "selection-menu-child": o.selectionMenu,
-                      onChange: h
+                      onChange: v
                     }), null, 16, ["item", "selected", "selection-menu-child"]);
                   }), 128))
                 ], !0)

package/dist/kongponents.es106.js

@@ -1,9 +1,9 @@
-import { defineComponent as T, useSlots as b, useId as K, computed as u, openBlock as o, createElementBlock as i, normalizeClass as f, createElementVNode as l, renderSlot as n, createBlock as y, resolveDynamicComponent as N, unref as k, createTextVNode as v, toDisplayString as c, createCommentVNode as s, createVNode as O, withCtx as d, Fragment as S, renderList as D } from "vue";
-import $ from "./kongponents.es232.js";
-import R from "./kongponents.es197.js";
-import U from "./kongponents.es233.js";
+import { defineComponent as T, useSlots as b, useId as K, computed as u, openBlock as o, createElementBlock as a, normalizeClass as f, createElementVNode as l, renderSlot as n, createBlock as y, resolveDynamicComponent as N, unref as k, createTextVNode as v, toDisplayString as c, createCommentVNode as s, createVNode as O, withCtx as d, Fragment as S, renderList as D } from "vue";
+import $ from "./kongponents.es222.js";
+import R from "./kongponents.es208.js";
+import U from "./kongponents.es192.js";
 import A from "./kongponents.es180.js";
-import { KUI_COLOR_TEXT_DECORATIVE_AQUA as L, KUI_COLOR_TEXT_NEUTRAL as w, KUI_COLOR_TEXT_WARNING as z, KUI_ICON_SIZE_60 as X } from "./kongponents.es181.js";
+import { KUI_COLOR_TEXT_DECORATIVE_AQUA as L, KUI_COLOR_TEXT_NEUTRAL as z, KUI_COLOR_TEXT_WARNING as w, KUI_ICON_SIZE_60 as X } from "./kongponents.es181.js";
 import q from "./kongponents.es32.js";
 import "./kongponents.es5.js";
 import "./kongponents.es10.js";
@@ -60,9 +60,9 @@ const G = { class: "empty-state-content" }, M = ["aria-hidden"], Q = {
         return L;
       switch (e.iconVariant) {
         case r.Error:
-          return z;
-        default:
           return w;
+        default:
+          return z;
       }
     }), p = u(() => {
       if (B.image)
@@ -70,7 +70,7 @@ const G = { class: "empty-state-content" }, M = ["aria-hidden"], Q = {
       const t = "empty-state-icon";
       return e.iconBackground ? `${t} has-background` : t;
     });
-    return (t, m) => (o(), i("div", {
+    return (t, m) => (o(), a("div", {
       class: f(["k-empty-state", [e.iconVariant]])
     }, [
       l("div", G, [
@@ -83,27 +83,27 @@ const G = { class: "empty-state-content" }, M = ["aria-hidden"], Q = {
               (o(), y(N(E.value), {
                 color: I.value,
                 decorative: "",
-                size: k(X)
+                size: `var(--kui-icon-size-60, ${k(X)})`
               }, null, 8, ["color", "size"]))
             ], !0)
           ], !0)
         ], 10, M),
-        e.title || t.$slots.title ? (o(), i("div", Q, [
+        e.title || t.$slots.title ? (o(), a("div", Q, [
           n(t.$slots, "title", {}, () => [
             v(c(e.title), 1)
           ], !0)
         ])) : s("", !0),
-        e.message || t.$slots.default ? (o(), i("div", W, [
+        e.message || t.$slots.default ? (o(), a("div", W, [
           n(t.$slots, "default", {}, () => [
             l("p", null, c(e.message), 1)
           ], !0)
         ])) : s("", !0),
-        e.actionButtonVisible && e.actionButtonText || t.$slots.action ? (o(), i("div", Z, [
+        e.actionButtonVisible && e.actionButtonText || t.$slots.action ? (o(), a("div", Z, [
           n(t.$slots, "action", {}, () => [
             O(q, {
               disabled: e.actionButtonDisabled,
               type: "button",
-              onClick: m[0] || (m[0] = (a) => g("click-action"))
+              onClick: m[0] || (m[0] = (i) => g("click-action"))
             }, {
               default: d(() => [
                 n(t.$slots, "action-button-icon", {}, void 0, !0),
@@ -114,26 +114,26 @@ const G = { class: "empty-state-content" }, M = ["aria-hidden"], Q = {
           ], !0)
         ])) : s("", !0)
       ]),
-      e.features.length ? (o(), i("div", j, [
-        (o(!0), i(S, null, D(e.features, (a, V) => (o(), y(F, {
-          key: `feature-${k(C)}-${a.key || V}`,
+      e.features.length ? (o(), a("div", j, [
+        (o(!0), a(S, null, D(e.features, (i, V) => (o(), y(F, {
+          key: `feature-${k(C)}-${i.key || V}`,
           class: "empty-state-feature-card"
         }, {
           title: d(() => [
-            a.key && t.$slots[`feature-icon-${a.key}`] ? (o(), i("div", H, [
-              n(t.$slots, `feature-icon-${a.key}`, {}, void 0, !0)
+            i.key && t.$slots[`feature-icon-${i.key}`] ? (o(), a("div", H, [
+              n(t.$slots, `feature-icon-${i.key}`, {}, void 0, !0)
             ])) : s("", !0),
-            l("div", J, c(a.title), 1)
+            l("div", J, c(i.title), 1)
           ]),
           default: d(() => [
             l("div", {
-              title: a.description
-            }, c(a.description), 9, P)
+              title: i.description
+            }, c(i.description), 9, P)
           ]),
           _: 2
         }, 1024))), 128))
       ])) : s("", !0),
-      t.$slots.footer ? (o(), i("div", Y, [
+      t.$slots.footer ? (o(), a("div", Y, [
         n(t.$slots, "footer", {}, void 0, !0)
       ])) : s("", !0)
     ], 2));

package/dist/kongponents.es108.js

@@ -2,9 +2,9 @@ import { defineComponent as ue, useSlots as ne, useAttrs as de, useId as se, com
 import me from "./kongponents.es51.js";
 import be from "./kongponents.es49.js";
 import J from "./kongponents.es32.js";
-import pe from "./kongponents.es182.js";
-import he from "./kongponents.es222.js";
-import ge from "./kongponents.es223.js";
+import pe from "./kongponents.es200.js";
+import he from "./kongponents.es242.js";
+import ge from "./kongponents.es243.js";
 const ye = ["role"], ze = { class: "file-upload-input-wrapper" }, ke = {
   key: 1,
   class: "file-upload-dropzone-wrapper"

package/dist/kongponents.es110.js

@@ -1,9 +1,9 @@
 import { defineComponent as te, useCssVars as ae, watch as m, useSlots as le, useTemplateRef as re, ref as n, useAttrs as oe, computed as l, useId as B, onMounted as ie, nextTick as ne, openBlock as o, createElementBlock as c, normalizeClass as K, unref as v, createBlock as V, mergeProps as W, createSlots as ue, withCtx as x, createTextVNode as L, toDisplayString as I, renderSlot as p, createCommentVNode as b, createElementVNode as R, withModifiers as M, createVNode as se, Transition as de, Fragment as ce } from "vue";
-import fe from "./kongponents.es182.js";
+import fe from "./kongponents.es200.js";
 import me from "./kongponents.es51.js";
 import { KUI_ICON_SIZE_40 as O } from "./kongponents.es181.js";
-import ve from "./kongponents.es244.js";
-import he from "./kongponents.es245.js";
+import ve from "./kongponents.es224.js";
+import he from "./kongponents.es225.js";
 const ge = ["id", "aria-describedby", "aria-invalid", "type", "value"], pe = ["aria-label"], be = ["id"], xe = /* @__PURE__ */ te({
   inheritAttrs: !1,
   __name: "KInput",

package/dist/kongponents.es116.js

@@ -1,10 +1,10 @@
 import { defineComponent as U, useCssVars as F, useSlots as R, useAttrs as q, useId as P, ref as k, computed as r, watch as L, nextTick as D, onMounted as j, onBeforeUnmount as X, onUnmounted as Y, openBlock as n, createElementBlock as f, mergeProps as G, unref as m, createElementVNode as i, normalizeClass as h, createVNode as p, withCtx as C, renderSlot as c, createTextVNode as E, toDisplayString as $, createCommentVNode as s, createBlock as J } from "vue";
-import { FocusTrap as Q } from "./kongponents.es212.js";
-import { useTextSelection as Z } from "./kongponents.es188.js";
+import { FocusTrap as Q } from "./kongponents.es226.js";
+import { useTextSelection as Z } from "./kongponents.es203.js";
 import I from "./kongponents.es32.js";
 import _ from "./kongponents.es176.js";
 import { KUI_COLOR_TEXT_NEUTRAL as ee } from "./kongponents.es181.js";
-import { normalizeSize as V } from "./kongponents.es189.js";
+import { normalizeSize as V } from "./kongponents.es182.js";
 const te = ["aria-label"], ae = {
   key: 0,
   class: "modal-header"

package/dist/kongponents.es118.js

@@ -1,21 +1,21 @@
-import { defineComponent as C, ref as w, computed as S, watch as $, nextTick as T, onMounted as V, onBeforeUnmount as K, onUnmounted as A, openBlock as d, createElementBlock as c, withKeys as k, createElementVNode as o, normalizeClass as E, renderSlot as n, createTextVNode as a, toDisplayString as s, createCommentVNode as i, createVNode as r, unref as v, withCtx as y } from "vue";
+import { defineComponent as C, ref as $, computed as w, watch as S, nextTick as T, onMounted as V, onBeforeUnmount as K, onUnmounted as A, openBlock as d, createElementBlock as c, withKeys as k, createElementVNode as o, normalizeClass as E, renderSlot as n, createTextVNode as a, toDisplayString as s, createCommentVNode as i, createVNode as r, unref as v, withCtx as y } from "vue";
 import p from "./kongponents.es32.js";
-import D from "./kongponents.es197.js";
+import D from "./kongponents.es208.js";
 import { KUI_COLOR_TEXT_DECORATIVE_AQUA as H } from "./kongponents.es181.js";
-const _ = ["aria-label"], O = { class: "k-modal-fullscreen-body-header" }, M = {
+const _ = ["aria-label"], O = { class: "k-modal-fullscreen-body-header" }, q = {
   key: 0,
   class: "body-header"
-}, N = {
+}, M = {
   key: 1,
   class: "body-header-description"
-}, U = { class: "k-modal-fullscreen-body" }, q = { class: "k-modal-fullscreen-header" }, L = {
+}, N = { class: "k-modal-fullscreen-body" }, U = { class: "k-modal-fullscreen-header" }, L = {
   "aria-level": "2",
   class: "k-modal-fullscreen-header-description",
   role: "heading"
-}, F = { class: "k-modal-fullscreen-title" }, I = { class: "header-icon" }, R = { class: "header-content" }, j = { class: "k-modal-fullscreen-action" }, z = { class: "k-modal-fullscreen-action-buttons" }, Q = {
+}, F = { class: "k-modal-fullscreen-title" }, I = { class: "header-icon" }, R = { class: "header-content" }, j = { class: "k-modal-fullscreen-action" }, x = { class: "k-modal-fullscreen-action-buttons" }, z = {
   key: 0,
   class: "k-modal-fullscreen-footer"
-}, W = { class: "k-modal-fullscreen-action" }, X = { class: "k-modal-fullscreen-action-buttons" }, Z = /* @__PURE__ */ C({
+}, Q = { class: "k-modal-fullscreen-action" }, W = { class: "k-modal-fullscreen-action-buttons" }, Z = /* @__PURE__ */ C({
   __name: "KModalFullscreen",
   props: {
     /**
@@ -85,8 +85,8 @@ const _ = ["aria-label"], O = { class: "k-modal-fullscreen-body-header" }, M = {
   },
   emits: ["canceled", "proceed"],
   setup(t, { emit: g }) {
-    const u = t, h = g, f = w(null), B = S(() => !!u.isVisible);
-    $(() => u.isVisible, async () => {
+    const u = t, h = g, f = $(null), B = w(() => !!u.isVisible);
+    S(() => u.isVisible, async () => {
       typeof document > "u" || (B.value ? (document.body.style.overflow = "hidden", await T(), f.value && f.value.focus()) : document.body.style.overflow = "");
     });
     const b = (e) => {
@@ -104,7 +104,7 @@ Docs: https://kongponents.konghq.com/components/modal.html#fullscreen`);
       document.removeEventListener("keydown", b);
     }), A(() => {
       document.body.style.overflow = "";
-    }), (e, x) => t.isVisible ? (d(), c("div", {
+    }), (e, X) => t.isVisible ? (d(), c("div", {
       key: 0,
       "aria-label": t.title,
       "aria-modal": "true",
@@ -122,26 +122,28 @@ Docs: https://kongponents.konghq.com/components/modal.html#fullscreen`);
         tabindex: "0"
       }, [
         o("div", O, [
-          e.$slots["body-header"] || t.bodyHeader ? (d(), c("div", M, [
+          e.$slots["body-header"] || t.bodyHeader ? (d(), c("div", q, [
             n(e.$slots, "body-header", {}, () => [
               a(s(t.bodyHeader), 1)
             ], !0)
           ])) : i("", !0),
-          e.$slots["body-header-description"] || t.bodyHeaderDescription ? (d(), c("div", N, [
+          e.$slots["body-header-description"] || t.bodyHeaderDescription ? (d(), c("div", M, [
             n(e.$slots, "body-header-description", {}, () => [
               a(s(t.bodyHeaderDescription), 1)
             ], !0)
           ])) : i("", !0)
         ]),
-        o("div", U, [
+        o("div", N, [
           n(e.$slots, "default", {}, void 0, !0)
         ]),
-        o("div", q, [
+        o("div", U, [
           o("div", L, [
             o("div", F, [
               o("span", I, [
                 n(e.$slots, "header-icon", {}, () => [
-                  r(v(D), { color: v(H) }, null, 8, ["color"])
+                  r(v(D), {
+                    color: `var(--kui-color-text-decorative-aqua, ${v(H)})`
+                  }, null, 8, ["color"])
                 ], !0)
               ]),
               o("span", R, [
@@ -151,7 +153,7 @@ Docs: https://kongponents.konghq.com/components/modal.html#fullscreen`);
               ])
             ]),
             o("div", j, [
-              o("div", z, [
+              o("div", x, [
                 n(e.$slots, "action-buttons", {}, () => [
                   r(p, {
                     appearance: t.cancelButtonAppearance,
@@ -178,10 +180,10 @@ Docs: https://kongponents.konghq.com/components/modal.html#fullscreen`);
             ])
           ])
         ]),
-        e.$slots["footer-content"] ? (d(), c("div", Q, [
+        e.$slots["footer-content"] ? (d(), c("div", z, [
           n(e.$slots, "footer-content", {}, void 0, !0),
-          o("div", W, [
-            o("div", X, [
+          o("div", Q, [
+            o("div", W, [
               n(e.$slots, "action-buttons", {}, () => [
                 r(p, {
                   appearance: t.actionButtonAppearance,