@kong/kongponents 9.48.10-pr.3042.e2c613f.0 → 9.49.0

package/dist/kongponents.es154.js

@@ -1,8 +1,8 @@
 import { defineComponent as l, watch as f, computed as m, createElementBlock as c, createCommentVNode as t, openBlock as o, renderSlot as d, createBlock as h, unref as n } from "vue";
-import s from "./kongponents.es230.js";
+import s from "./kongponents.es212.js";
 import { KUI_ICON_SIZE_30 as u } from "./kongponents.es173.js";
 import { isValidUrl as a } from "./kongponents.es167.js";
-import { warnInvalidProp as k } from "./kongponents.es220.js";
+import { warnInvalidProp as k } from "./kongponents.es210.js";
 const p = ["href"], y = /* @__PURE__ */ l({
   __name: "KExternalLink",
   props: {

package/dist/kongponents.es156.js

@@ -1,9 +1,9 @@
 import { defineComponent as V, useCssVars as A, unref as b, ref as l, watch as K, computed as W, onMounted as O, onBeforeUnmount as P, resolveComponent as U, createElementBlock as i, openBlock as s, normalizeStyle as q, normalizeClass as F, createCommentVNode as u, createElementVNode as k, renderSlot as g, withModifiers as h, toDisplayString as M, createVNode as y, withCtx as z, createTextVNode as $, nextTick as D } from "vue";
-import L from "./kongponents.es238.js";
+import L from "./kongponents.es209.js";
 import { KUI_SPACE_40 as R, KUI_ICON_SIZE_30 as Z } from "./kongponents.es173.js";
-import { ResizeObserverHelper as j } from "./kongponents.es180.js";
-import { normalizeSize as G } from "./kongponents.es171.js";
-import { warnInvalidProp as J } from "./kongponents.es220.js";
+import { ResizeObserverHelper as j } from "./kongponents.es207.js";
+import { normalizeSize as G } from "./kongponents.es186.js";
+import { warnInvalidProp as J } from "./kongponents.es210.js";
 const Q = {
   key: 0,
   class: "truncate-expand-controls"
@@ -26,9 +26,9 @@ const Q = {
   },
   setup(a) {
     A((e) => ({
-      c3a0fcd6: C.value,
-      v51e192de: b(H),
-      v0adcd17e: e.rows
+      v33a5f62a: C.value,
+      c9851d34: b(H),
+      v67141d6e: e.rows
     })), K(
       () => a.rows,
       (e) => {

package/dist/kongponents.es158.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, createElementBlock as g, openBlock as s, createCommentVNode as p, createElementVNode as m, toDisplayString as C, normalizeClass as f, createBlock as V, createVNode as b, withCtx as v, withModifiers as F, unref as y } from "vue";
-import { ResizeObserverHelper as K } from "./kongponents.es180.js";
-import M from "./kongponents.es181.js";
+import { ResizeObserverHelper as K } from "./kongponents.es207.js";
+import M from "./kongponents.es180.js";
 import U from "./kongponents.es19.js";
 import L from "./kongponents.es24.js";
 /* empty css                 */

package/dist/kongponents.es160.js

@@ -5,28 +5,28 @@ import Bt from "./kongponents.es21.js";
 /* empty css                 */
 import Fe from "./kongponents.es24.js";
 /* empty css                 */
-import xt from "./kongponents.es182.js";
-import It from "./kongponents.es183.js";
-import zt from "./kongponents.es184.js";
-import Kt from "./kongponents.es185.js";
-import Pt from "./kongponents.es186.js";
+import xt from "./kongponents.es177.js";
+import It from "./kongponents.es217.js";
+import zt from "./kongponents.es196.js";
+import Kt from "./kongponents.es218.js";
+import Pt from "./kongponents.es219.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 Ut, KUI_SPACE_60 as Dt } from "./kongponents.es173.js";
-import Wt from "./kongponents.es187.js";
+import Wt from "./kongponents.es220.js";
 import Xt from "./kongponents.es52.js";
 import qt from "./kongponents.es42.js";
 import Ue from "./kongponents.es37.js";
-import Vt from "./kongponents.es188.js";
+import Vt from "./kongponents.es221.js";
 import { getInitialPageSize as jt } from "./kongponents.es169.js";
 import { getUniqueStringId as Zt } from "./kongponents.es151.js";
-import { getScrollbarSize as Gt } from "./kongponents.es189.js";
-import { useResizeObserver as Jt } from "./kongponents.es190.js";
-import { normalizeSize as Yt } from "./kongponents.es171.js";
+import { getScrollbarSize as Gt } from "./kongponents.es185.js";
+import { useResizeObserver as Jt } from "./kongponents.es208.js";
+import { normalizeSize as Yt } from "./kongponents.es186.js";
 import Qt from "./kongponents.es29.js";
-import _t from "./kongponents.es191.js";
+import _t from "./kongponents.es222.js";
 const eo = {
   key: 0,
   class: "table-toolbar",
@@ -124,39 +124,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: De }) {
     St((e) => ({
-      v1d9185fc: u(tt).expandable,
-      v2e5a7fab: nt.value,
-      v3ffd4ac3: Ce.value,
-      v83fbd9d2: Qe.value
+      v6728cc3e: u(tt).expandable,
+      v0025a966: nt.value,
+      v5d9a0784: Ce.value,
+      v49a9ba12: Qe.value
     }));
     const ge = wt(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"]), p = De, z = Tt(), S = 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"), B = v(pe(a.headers)), k = v([]), X = v(""), K = v(""), Q = v(""), qe = y(() => B.value.some((e) => e.key === i.ACTIONS)), Ae = y(() => B.value.filter((e) => e.hidable).length > 0), P = y(() => a.nested || !Ae.value || a.error ? !1 : z.toolbar ? !0 : !a.loading && !!a.data && !!a.data.length), Ve = y(() => a.loading || !(a.data && a.data.length)), je = y(() => B.value.filter((e) => e.hidable && !te(e.key))), Ze = y(() => P.value ? a.tablePreferences.columnVisibility || {} : {}), H = v(P.value ? a.tablePreferences.columnVisibility || {} : {}), Ce = v("100%"), ue = v(!1), q = 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 || P.value || ve.value)), Je = ne("actionsDropdown"), ce = v(!1), Ye = y(() => ({
+    }, he = ne("table-wrapper"), We = ne("table"), Xe = ne("header-row"), B = v(pe(a.headers)), k = v([]), X = v(""), K = v(""), Q = v(""), qe = y(() => B.value.some((e) => e.key === i.ACTIONS)), Ae = y(() => B.value.filter((e) => e.hidable).length > 0), P = y(() => a.nested || !Ae.value || a.error ? !1 : z.toolbar ? !0 : !a.loading && !!a.data && !!a.data.length), Ve = y(() => a.loading || !(a.data && a.data.length)), je = y(() => B.value.filter((e) => e.hidable && !te(e.key))), Ze = y(() => P.value ? a.tablePreferences.columnVisibility || {} : {}), H = v(P.value ? a.tablePreferences.columnVisibility || {} : {}), Ce = v("100%"), ue = v(!1), q = 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 && (!!z.toolbar || P.value || ve.value)), Je = ne("actionsDropdown"), de = v(!1), Ye = y(() => ({
       maxHeight: Yt(a.maxHeight)
     })), Qe = y(() => `${Gt()}px`), F = v([]), V = y(() => !a.nested && !a.error && B.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 || !V.value || a.error ? !1 : z.toolbar ? !0 : !a.loading && !!a.data && !!a.data.length), Se = y(() => {
       const e = F.value.length;
       return e ? e > 100 ? "99+" : String(e) : "";
     }), _ = v(/* @__PURE__ */ new WeakMap()), _e = (e) => `column-${e}`, U = (e) => `tooltip-${e}`, we = (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 = we("onRow:", ge)(o, "row"), n = we("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 N = 0; N < l.length; N++)
             if (s.closest(l[N]) !== null) {
               m = !0;
@@ -165,12 +165,12 @@ const eo = {
           if ((!m || s.hasAttribute("disabled")) && !$ && (t.click || n.click))
             if (n.click) {
               p("cell-click", { data: e });
-              const N = n.click(d, e, "cell");
-              typeof N == "function" && N(d, e);
+              const N = n.click(c, e, "cell");
+              typeof N == "function" && N(c, e);
             } else {
               p("row-click", { data: o });
-              const N = t.click(d, o, "row");
-              typeof N == "function" && N(d, o);
+              const N = t.click(c, o, "row");
+              typeof N == "function" && N(c, o);
             }
         }
       };
@@ -240,24 +240,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="${S}"] [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 + $;
       }, s = () => {
-        X.value = "", document == null || document.removeEventListener("mousemove", d), document == null || document.removeEventListener("mouseup", s), le(), D.value && ye();
+        X.value = "", document == null || document.removeEventListener("mousemove", c), document == null || document.removeEventListener("mouseup", s), le(), D.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);
       }
     }, Ne = (e) => x.value ? e === i.BULK_ACTIONS || e === i.EXPANDABLE : !1, Be = (e) => e === i.BULK_ACTIONS && D.value, ee = (e) => x.value ? V.value ? e === i.BULK_ACTIONS : D.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)
@@ -280,13 +280,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, q.value = !0) : o.scrollTop === 0 && (q.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")
@@ -304,11 +304,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 }
         }
       };
@@ -334,17 +334,17 @@ const eo = {
         return;
       const e = document == null ? void 0 : document.querySelector(`[data-tableid="${S}"]`), 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;
+        l === 1 && (s += Te), l === o.length - 1 && (s -= 15), t[c] = s;
       }), ze.value = t;
     };
     W([H, B, D], (e) => {
       const [o, t, n] = e;
-      let l = t.filter((d) => d.key === i.BULK_ACTIONS ? V.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 ? V.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(P, (e) => {
       e && (H.value = a.tablePreferences.columnVisibility || {});
     }, { immediate: !0 });
@@ -371,15 +371,15 @@ 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();
     }, { deep: !0, immediate: !0 }), W(F, (e) => {
@@ -482,13 +482,13 @@ const eo = {
           ref: "table-wrapper",
           class: "table-wrapper",
           style: Pe(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(S)
           }, [
@@ -617,16 +617,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(), w(u(Qt), {
+                  (r(!0), f(Y, null, be(k.value, (l, c) => (r(), w(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": Ne(l.key),
                           "second-sticky-column": Be(l.key),
@@ -637,7 +637,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 }), Lt(et.value(t[l.key], t), !0)), [
+                      }, { ref_for: !0 }, a.cellAttrs({ headerKey: l.key, row: t, rowIndex: n, colIndex: c }), Lt(et.value(t[l.key], t), !0)), [
                         l.key !== u(i).EXPANDABLE ? (r(), w(Ot(ft(t, l.key)), se({
                           key: 0,
                           class: "cell-wrapper"
@@ -660,7 +660,7 @@ const eo = {
                               default: C(() => [
                                 O(Ue, {
                                   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",
@@ -674,8 +674,8 @@ const eo = {
                               ref: "actionsDropdown",
                               class: "actions-dropdown",
                               "data-testid": "actions-dropdown",
-                              "kpop-attributes": { placement: "bottom-end", target: "body", popoverElementAttributes: ct(t, n) },
-                              onToggleDropdown: (c) => it(t, c, s)
+                              "kpop-attributes": { placement: "bottom-end", target: "body", popoverElementAttributes: dt(t, n) },
+                              onToggleDropdown: (d) => it(t, d, s)
                             }, {
                               items: C(() => [
                                 T(e.$slots, "action-items", { row: t }, void 0, !0)
@@ -688,8 +688,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(Kt), {
@@ -712,7 +712,7 @@ 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), {
                               class: "expandable-row-control-icon",

package/dist/kongponents.es163.js

@@ -1,16 +1,16 @@
-import { defineComponent as z, mergeModels as M, useId as I, computed as o, useModel as A, useTemplateRef as D, watch as h, createElementBlock as r, openBlock as s, createBlock as E, createCommentVNode as F, createElementVNode as u, mergeProps as L, unref as b, withCtx as y, createTextVNode as q, toDisplayString as S, createVNode as U, withDirectives as W, normalizeStyle as g, normalizeClass as P, vModelText as X, Fragment as B, renderList as K } from "vue";
-import G from "./kongponents.es48.js";
-import H from "./kongponents.es53.js";
-const J = {
+import { defineComponent as I, mergeModels as P, useId as A, computed as o, useModel as D, useTemplateRef as E, watch as h, createElementBlock as r, openBlock as s, createBlock as F, createCommentVNode as L, createElementVNode as d, mergeProps as q, unref as b, withCtx as $, createTextVNode as U, toDisplayString as S, createVNode as W, withDirectives as X, normalizeStyle as g, normalizeClass as B, vModelText as G, Fragment as C, renderList as K } from "vue";
+import H from "./kongponents.es48.js";
+import J from "./kongponents.es53.js";
+const O = {
   class: "k-slider",
   "data-testid": "k-slider"
-}, O = { class: "slider-container" }, Q = { class: "input-value" }, Y = ["id", "disabled", "list", "max", "min", "step"], Z = ["id"], p = ["data-testid", "label", "value"], _ = {
+}, Q = { class: "slider-container" }, Y = { class: "input-value" }, Z = ["id", "disabled", "list", "max", "min", "step"], p = ["id"], _ = ["data-testid", "label", "value"], ee = {
   "aria-hidden": "true",
   class: "slider-marks",
   "data-testid": "slider-marks"
-}, ee = ["data-testid"], ie = /* @__PURE__ */ z({
+}, te = ["data-testid", "onClick"], ne = /* @__PURE__ */ I({
   __name: "KSlider",
-  props: /* @__PURE__ */ M({
+  props: /* @__PURE__ */ P({
     label: { default: "" },
     min: { default: 0 },
     max: { default: 10 },
@@ -27,20 +27,22 @@ const J = {
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ M(["change", "update:modelValue"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ P(["change", "update:modelValue"], ["update:modelValue"]),
   setup(e, { emit: j }) {
-    const N = j, c = I(), T = o(() => ({ width: m(i.value) })), C = o(() => ({
+    const V = j, c = A(), N = o(() => ({ width: m(i.value) })), T = o(() => ({
       left: m(i.value),
       transform: `translateX(-${m(i.value)})`
     })), R = () => {
-      N("change", i.value), V();
-    }, $ = D("thumbPopover"), V = () => {
+      V("change", i.value), x();
+    }, z = (t) => {
+      i.value = t, V("change", i.value), x();
+    }, M = E("thumbPopover"), x = () => {
       var t;
-      (t = $.value) == null || t.showPopover();
-    }, x = () => {
+      (t = M.value) == null || t.showPopover();
+    }, k = () => {
       var t;
-      (t = $.value) == null || t.hidePopover();
-    }, i = A(e, "modelValue"), n = o(() => {
+      (t = M.value) == null || t.hidePopover();
+    }, i = D(e, "modelValue"), n = o(() => {
       const t = Math.max(
         (String(e.step).split(".")[1] || "").length,
         (String(e.min).split(".")[1] || "").length,
@@ -50,9 +52,9 @@ const J = {
     }), v = o(() => {
       if (e.max <= e.min || e.step <= 0)
         return [];
-      const t = [], l = e.min * n.value, a = e.max * n.value, d = e.step * n.value;
-      for (let k = l; k <= a; k += d)
-        t.push(k / n.value);
+      const t = [], l = e.min * n.value, a = e.max * n.value, u = e.step * n.value;
+      for (let y = l; y <= a; y += u)
+        t.push(y / n.value);
       return t;
     }), f = (t) => t >= e.min && t <= e.max && v.value.includes(t), w = o(() => {
       var t, l;
@@ -60,9 +62,9 @@ const J = {
         if (typeof e.marks[0] == "object")
           return e.marks.filter((a) => f(a.value));
         {
-          const a = e.marks.filter((d) => f(d)).map((d) => ({
-            label: String(d),
-            value: d
+          const a = e.marks.filter((u) => f(u)).map((u) => ({
+            label: String(u),
+            value: u
           }));
           return ((t = a[0]) == null ? void 0 : t.value) !== e.min && a.unshift({ label: String(e.min), value: e.min }), ((l = a.at(-1)) == null ? void 0 : l.value) !== e.max && a.push({ label: String(e.max), value: e.max }), a;
         }
@@ -92,22 +94,22 @@ const J = {
         let l = [];
         l = t.filter((a) => !f(typeof e.marks[0] == "object" ? a.value : a)), l.length && console.warn(`KSlider: marks [${l.map((a) => typeof l[0] == "object" ? a.value : a).join(", ")}] are out of range [${v.value.join(", ")}].`);
       }
-    }, { immediate: !0 }), (t, l) => (s(), r("div", J, [
-      e.label ? (s(), E(G, L({ key: 0 }, e.labelAttributes, {
+    }, { immediate: !0 }), (t, l) => (s(), r("div", O, [
+      e.label ? (s(), F(H, q({ key: 0 }, e.labelAttributes, {
         for: `${b(c)}-input`
       }), {
-        default: y(() => [
-          q(S(e.label), 1)
+        default: $(() => [
+          U(S(e.label), 1)
         ]),
         _: 1
-      }, 16, ["for"])) : F("", !0),
-      u("div", O, [
-        u("span", {
+      }, 16, ["for"])) : L("", !0),
+      d("div", Q, [
+        d("span", {
           "aria-hidden": "true",
-          class: P(["lower-range-track", { "is-disabled": e.disabled }]),
-          style: g(T.value)
+          class: B(["lower-range-track", { "is-disabled": e.disabled }]),
+          style: g(N.value)
         }, null, 6),
-        U(H, {
+        W(J, {
           ref: "thumbPopover",
           "aria-hidden": "true",
           disabled: e.disabled || !e.showValue,
@@ -117,18 +119,18 @@ const J = {
           trigger: "hover",
           width: "auto"
         }, {
-          content: y(() => [
-            u("span", Q, S(i.value), 1)
+          content: $(() => [
+            d("span", Y, S(i.value), 1)
           ]),
-          default: y(() => [
-            u("span", {
-              class: P(["thumb", { "is-disabled": e.disabled }]),
-              style: g(C.value)
+          default: $(() => [
+            d("span", {
+              class: B(["thumb", { "is-disabled": e.disabled }]),
+              style: g(T.value)
             }, null, 6)
           ]),
           _: 1
         }, 8, ["disabled"]),
-        W(u("input", {
+        X(d("input", {
           id: `${b(c)}-input`,
           "onUpdate:modelValue": l[0] || (l[0] = (a) => i.value = a),
           "data-testid": "slider-input",
@@ -138,42 +140,44 @@ const J = {
           min: e.min,
           step: e.step,
           type: "range",
-          onBlur: x,
-          onFocus: V,
+          onBlur: k,
+          onFocus: x,
           onInput: R,
-          onMouseup: x,
-          onTouchend: x
-        }, null, 40, Y), [
+          onMouseup: k,
+          onTouchend: k
+        }, null, 40, Z), [
           [
-            X,
+            G,
             i.value,
             void 0,
             { number: !0 }
           ]
         ]),
-        u("datalist", {
+        d("datalist", {
           id: `${b(c)}-markers`,
           "data-testid": "slider-datalist-marks"
         }, [
-          (s(!0), r(B, null, K(w.value, (a) => (s(), r("option", {
+          (s(!0), r(C, null, K(w.value, (a) => (s(), r("option", {
             key: `datalist-mark-${a.value}`,
             "data-testid": `datalist-mark-${a.value}`,
             label: a.label,
             style: g({ left: m(a.value) }),
             value: a.value
-          }, null, 12, p))), 128))
-        ], 8, Z),
-        u("div", _, [
-          (s(!0), r(B, null, K(w.value, (a) => (s(), r("span", {
+          }, null, 12, _))), 128))
+        ], 8, p),
+        d("div", ee, [
+          (s(!0), r(C, null, K(w.value, (a) => (s(), r("span", {
             key: `mark-${a.value}`,
             "data-testid": `mark-${a.value}`,
-            style: g({ left: m(a.value) })
-          }, S(a.label || a.value), 13, ee))), 128))
+            role: "button",
+            style: g({ left: m(a.value) }),
+            onClick: (u) => z(a.value)
+          }, S(a.label || a.value), 13, te))), 128))
         ])
       ])
     ]));
   }
 });
 export {
-  ie as default
+  ne as default
 };