@kong/kongponents 9.46.1 → 9.46.2-pr.2974.def93bd.0

package/dist/kongponents.es257.js

@@ -1,54 +1,161 @@
-import { defineComponent as c, computed as n, createElementBlock as m, openBlock as l, createElementVNode as a, normalizeClass as d, createBlock as r, createCommentVNode as u, unref as e, normalizeStyle as f, toDisplayString as p } from "vue";
-import z from "./kongponents.es269.js";
-import k from "./kongponents.es177.js";
-import v from "./kongponents.es202.js";
-import { KUI_ICON_SIZE_40 as o, KUI_COLOR_TEXT_INVERSE as i, KUI_COLOR_TEXT_PRIMARY as x } from "./kongponents.es174.js";
-import { normalizeSize as y } from "./kongponents.es171.js";
-const E = ["aria-current", "data-testid"], C = { class: "step-circle" }, $ = /* @__PURE__ */ c({
-  __name: "KStep",
-  props: {
-    label: {},
-    state: { default: "default" },
-    maxLabelWidth: {}
-  },
-  setup(t) {
-    const s = n(() => ({
-      maxWidth: y(t.maxLabelWidth)
-    }));
-    return (I, S) => (l(), m("li", {
-      "aria-current": t.state === "active" ? "step" : "false",
-      class: "step",
-      "data-testid": `step-${t.state}`
-    }, [
-      a("div", {
-        class: d(["step-container", `${t.state}`])
-      }, [
-        a("div", C, [
-          t.state === "completed" ? (l(), r(e(z), {
+import { defineComponent as N, mergeModels as S, useModel as C, ref as H, useId as q, computed as h, onMounted as z, watch as M, createElementBlock as d, openBlock as o, createBlock as R, createCommentVNode as c, unref as m, mergeProps as E, createElementVNode as g, createVNode as O, withDirectives as I, toDisplayString as D, normalizeClass as P, vModelText as T, Transition as W, withCtx as j } from "vue";
+import { DatePicker as _ } from "./kongponents.es363.js";
+import l from "./kongponents.es217.js";
+import G from "./kongponents.es348.js";
+import J from "./kongponents.es352.js";
+const K = { class: "calendar-wrapper" }, L = {
+  key: 2,
+  class: "time-wrapper"
+}, Q = { class: "time-input" }, X = ["for"], Z = { key: 0 }, ee = { key: 1 }, te = ["id"], ae = ["for"], ne = { key: 0 }, se = ["id"], le = {
+  key: 0,
+  class: "help-text"
+}, me = /* @__PURE__ */ N({
+  __name: "CalendarWrapper",
+  props: /* @__PURE__ */ S({
+    isRange: { type: Boolean },
+    kDatePickerMode: {},
+    maxDate: { default: void 0 },
+    minDate: { default: void 0 },
+    errorMessage: { default: void 0 }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {},
+    error: { type: Boolean, default: !1 },
+    errorModifiers: {}
+  }),
+  emits: ["update:modelValue", "update:error"],
+  setup(u, { expose: B }) {
+    const s = u, e = C(u, "modelValue"), v = C(u, "error"), r = H(l(/* @__PURE__ */ new Date(), "HH:mm:ss")), i = H(l(/* @__PURE__ */ new Date(), "HH:mm:ss")), p = H({
+      start: l(/* @__PURE__ */ new Date(), "HH:mm:ss"),
+      end: l(/* @__PURE__ */ new Date(), "HH:mm:ss")
+    }), f = q(), A = h(() => s.isRange && e.value && "start" in e.value && e.value.start instanceof Date ? { year: e.value.start.getFullYear(), month: e.value.start.getMonth() + 1 } : e.value instanceof Date ? { year: e.value.getFullYear(), month: e.value.getMonth() + 1 } : s.maxDate && G(s.maxDate, J()) ? { year: s.maxDate.getFullYear(), month: s.maxDate.getMonth() + 1 } : { year: (/* @__PURE__ */ new Date()).getFullYear(), month: (/* @__PURE__ */ new Date()).getMonth() + 1 }), k = h(() => ({
+      borderless: !0,
+      color: "blue",
+      dragAttribute: U,
+      expanded: !0,
+      initialPage: A.value,
+      maxDate: s.maxDate,
+      minDate: s.minDate,
+      mode: "date",
+      modelConfig: F,
+      selectAttribute: Y,
+      transparent: !0
+    })), V = h(() => ["time", "dateTime", "relativeDateTime"].includes(s.kDatePickerMode)), y = (a, t) => a > t, b = () => {
+      if (e.value && V.value)
+        if (s.isRange && e.value.start && e.value.end) {
+          const a = e.value;
+          r.value = l(a.start, "HH:mm"), i.value = l(a.end, "HH:mm");
+        } else e.value instanceof Date ? r.value = l(e.value, "HH:mm") : r.value = l(/* @__PURE__ */ new Date(), "HH:mm");
+    };
+    z(() => {
+      b(), p.value.start = r.value, p.value.end = i.value;
+    });
+    const F = { type: "number" }, U = {
+      key: "select-drag",
+      highlight: {
+        start: { contentClass: "vcal-day-drag-start" },
+        base: { contentClass: "vcal-day-drag-base" },
+        end: { contentClass: "vcal-day-drag-end" }
+      }
+    }, Y = {
+      key: "select-calendar",
+      highlight: {
+        start: { contentClass: "vcal-day-start" },
+        base: { contentClass: "vcal-day-base" },
+        end: { contentClass: "vcal-day-end" }
+      }
+    };
+    M(() => r.value, (a) => {
+      if (a) {
+        if (e.value && s.isRange && "start" in e.value && e.value.start instanceof Date && "end" in e.value && e.value.end instanceof Date) {
+          const t = /* @__PURE__ */ new Date(), n = a.split(":");
+          t.setHours(parseInt(n[0], 10), parseInt(n[1], 10), 0, 0), e.value.start.setHours(t.getHours(), t.getMinutes(), 0, 0), v.value = y(e.value.start, e.value.end);
+        } else if (e.value instanceof Date) {
+          const t = /* @__PURE__ */ new Date(), n = a.split(":");
+          t.setHours(parseInt(n[0], 10), parseInt(n[1], 10), 0, 0), e.value.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0);
+        }
+      }
+    }), M(() => i.value, (a) => {
+      if (a && e.value && s.isRange && "end" in e.value && e.value.end instanceof Date && "start" in e.value && e.value.start instanceof Date) {
+        const t = /* @__PURE__ */ new Date(), n = a.split(":");
+        t.setHours(parseInt(n[0], 10), parseInt(n[1], 10), 0, 0), e.value.end.setHours(t.getHours(), t.getMinutes(), 0, 0), v.value = y(e.value.start, e.value.end);
+      }
+    }), M(() => e.value, () => {
+      e.value && s.isRange && "start" in e.value && e.value.start instanceof Date && "end" in e.value && e.value.end instanceof Date ? (r.value = l(e.value.start, "HH:mm"), i.value = l(e.value.end, "HH:mm"), v.value = y(e.value.start, e.value.end)) : e.value instanceof Date && (r.value = l(e.value, "HH:mm"));
+    }, { immediate: !0, deep: !0 });
+    const w = (a) => {
+      const t = e.value;
+      return s.isRange && t && a in t && t[a] instanceof Date;
+    }, $ = () => {
+      r.value = p.value.start, i.value = p.value.end;
+    }, x = (a) => {
+      try {
+        return l(a, "EEE MMM d yyyy");
+      } catch (t) {
+        console.warn("Error formatting date:", t);
+      }
+    };
+    return B({
+      resetTime: $,
+      initTimeInputs: b
+    }), (a, t) => (o(), d("div", K, [
+      u.isRange ? (o(), R(m(_), E({ key: 0 }, k.value, {
+        modelValue: e.value,
+        "onUpdate:modelValue": t[0] || (t[0] = (n) => e.value = n),
+        modelModifiers: { range: !0 }
+      }), null, 16, ["modelValue"])) : (o(), R(m(_), E({ key: 1 }, k.value, {
+        modelValue: e.value,
+        "onUpdate:modelValue": t[1] || (t[1] = (n) => e.value = n)
+      }), null, 16, ["modelValue"])),
+      V.value ? (o(), d("div", L, [
+        g("div", Q, [
+          g("label", {
+            class: "time-input-label",
+            for: `time-input-start-${m(f)}`
+          }, [
+            w("start") ? (o(), d("span", Z, D(x(e.value.start)), 1)) : e.value && e.value instanceof Date ? (o(), d("span", ee, D(x(e.value)), 1)) : c("", !0)
+          ], 8, X),
+          I(g("input", {
+            id: `time-input-start-${m(f)}`,
+            "onUpdate:modelValue": t[2] || (t[2] = (n) => r.value = n),
+            class: P(["time-input-start", { "input-error": v.value }]),
+            "data-testid": "time-input-start",
+            step: 60,
+            type: "time"
+          }, null, 10, te), [
+            [T, r.value]
+          ]),
+          g("label", {
+            class: "time-input-label",
+            for: `time-input-end-${m(f)}`
+          }, [
+            w("end") ? (o(), d("span", ne, D(m(l)(e.value.end, "EEE MMM d yyyy")), 1)) : c("", !0)
+          ], 8, ae),
+          u.isRange ? I((o(), d("input", {
             key: 0,
-            color: `var(--kui-color-text-inverse, ${e(i)})`,
-            size: e(o),
-            title: "Completed"
-          }, null, 8, ["color", "size"])) : t.state === "pending" ? (l(), r(e(v), {
-            key: 1,
-            color: `var(--kui-color-text-primary, ${e(x)})`,
-            size: e(o),
-            title: "Pending"
-          }, null, 8, ["color", "size"])) : t.state === "error" ? (l(), r(e(k), {
-            key: 2,
-            color: `var(--kui-color-text-inverse, ${e(i)})`,
-            size: e(o),
-            title: "Error"
-          }, null, 8, ["color", "size"])) : u("", !0)
+            id: `time-input-end-${m(f)}`,
+            "onUpdate:modelValue": t[3] || (t[3] = (n) => i.value = n),
+            class: P(["time-input-end", { "input-error": v.value }]),
+            "data-testid": "time-input-end",
+            step: 60,
+            type: "time"
+          }, null, 10, se)), [
+            [T, i.value]
+          ]) : c("", !0)
         ]),
-        a("span", {
-          class: "step-label",
-          style: f(s.value)
-        }, p(t.label), 5)
-      ], 2)
-    ], 8, E));
+        O(W, {
+          mode: "out-in",
+          name: "kongponents-fade-transition"
+        }, {
+          default: j(() => [
+            v.value && u.errorMessage ? (o(), d("div", le, D(u.errorMessage), 1)) : c("", !0)
+          ]),
+          _: 1
+        })
+      ])) : c("", !0)
+    ]));
   }
 });
 export {
-  $ as default
+  me as default
 };

package/dist/kongponents.es259.js

@@ -1,58 +1,93 @@
-import { defineComponent as f, createElementBlock as p, openBlock as u, createVNode as e, withModifiers as i, withCtx as n, unref as s } from "vue";
-import b from "./kongponents.es183.js";
-import m from "./kongponents.es185.js";
-import r from "./kongponents.es33.js";
-const c = { class: "pagination-offset-button-container" }, O = /* @__PURE__ */ f({
-  __name: "PaginationOffset",
+import { defineComponent as x, computed as v, useTemplateRef as T, createElementBlock as s, openBlock as l, createBlock as d, createCommentVNode as V, Fragment as m, renderList as u, withCtx as f, renderSlot as S, createElementVNode as p, toDisplayString as g, createTextVNode as h } from "vue";
+import w from "./kongponents.es212.js";
+const D = {
+  ref: "itemsContainer",
+  "aria-live": "polite",
+  class: "multiselect-items-container"
+}, F = { class: "multiselect-group-title" }, M = { class: "select-item-description" }, E = ".multiselect-item button:not(:disabled)", q = /* @__PURE__ */ x({
+  __name: "KMultiselectItems",
   props: {
-    previousButtonDisabled: {
-      type: Boolean,
-      default: !1
-    },
-    nextButtonDisabled: {
-      type: Boolean,
-      default: !1
-    }
+    items: { default: () => [] },
+    itemCreationEnabled: { type: Boolean },
+    filterString: { default: "" },
+    itemCreationValid: { type: Boolean, default: !0 }
   },
-  emits: ["getPreviousOffset", "getNextOffset"],
-  setup(o, { emit: l }) {
-    const a = l;
-    return (v, t) => (u(), p("div", c, [
-      e(r, {
-        appearance: "tertiary",
-        "aria-label": "Go to the previous page",
-        class: "pagination-button",
-        "data-testid": "previous-button",
-        disabled: o.previousButtonDisabled,
-        icon: "",
-        size: "small",
-        type: "button",
-        onClick: t[0] || (t[0] = i((d) => a("getPreviousOffset"), ["prevent"]))
+  emits: ["selected", "add-item"],
+  setup(i, { expose: k, emit: I }) {
+    const A = I, y = (n) => A("selected", n), $ = v(() => {
+      var n;
+      return (n = i.items) == null ? void 0 : n.filter((t) => !t.group);
+    }), b = v(() => {
+      var n, t;
+      return [...new Set((t = (n = i.items) == null ? void 0 : n.filter((e) => e.group)) == null ? void 0 : t.map((e) => e.group))].sort((e, o) => e.toLowerCase().localeCompare(o.toLowerCase()));
+    }), B = (n) => {
+      var t;
+      return (t = i.items) == null ? void 0 : t.filter((e) => e.group === n);
+    }, C = T("itemsContainer"), K = (n) => {
+      var o;
+      const t = C.value;
+      if (!t)
+        return;
+      const e = t.querySelectorAll(E);
+      (o = e[n === "down" ? 0 : e.length - 1]) == null || o.focus();
+    }, a = ({ target: n, key: t }) => {
+      var e;
+      if (t === "ArrowDown" || t === "ArrowUp") {
+        const o = (e = C.value) == null ? void 0 : e.querySelectorAll(E);
+        if (o != null && o.length) {
+          const r = [...o].indexOf(n), L = t === "ArrowDown" ? r + 1 : r - 1, c = o[L];
+          c == null || c.focus();
+        }
+      }
+    };
+    return k({ setFocus: K }), (n, t) => (l(), s("div", D, [
+      (l(!0), s(m, null, u($.value, (e, o) => (l(), d(w, {
+        key: `${e.key ? e.key : o}-item`,
+        item: e,
+        onKeydown: a,
+        onSelected: y
       }, {
-        default: n(() => [
-          e(s(b), { decorative: "" })
+        content: f(() => [
+          S(n.$slots, "content", { item: e }, void 0, !0)
         ]),
-        _: 1
-      }, 8, ["disabled"]),
-      e(r, {
-        appearance: "tertiary",
-        "aria-label": "Go to the next page",
-        class: "pagination-button",
-        "data-testid": "next-button",
-        disabled: o.nextButtonDisabled,
-        icon: "",
-        size: "small",
-        type: "button",
-        onClick: t[1] || (t[1] = i((d) => a("getNextOffset"), ["prevent"]))
+        _: 2
+      }, 1032, ["item"]))), 128)),
+      (l(!0), s(m, null, u(b.value, (e) => (l(), s("div", {
+        key: `${e}-group`,
+        class: "multiselect-group"
+      }, [
+        p("span", F, g(e), 1),
+        (l(!0), s(m, null, u(B(e), (o, r) => (l(), d(w, {
+          key: `${o.key ? o.key : e + "-" + r + "-item"}`,
+          item: o,
+          onKeydown: a,
+          onSelected: y
+        }, {
+          content: f(() => [
+            S(n.$slots, "content", { item: o }, void 0, !0)
+          ]),
+          _: 2
+        }, 1032, ["item"]))), 128))
+      ]))), 128)),
+      i.itemCreationEnabled ? (l(), d(w, {
+        key: "multiselect-add-item",
+        class: "multiselect-add-item",
+        "data-testid": "multiselect-add-item",
+        item: { label: `${i.filterString} (Add new value)`, value: "add_item", disabled: !i.itemCreationValid },
+        onKeydown: a,
+        onSelected: t[0] || (t[0] = (e) => n.$emit("add-item"))
       }, {
-        default: n(() => [
-          e(s(m), { decorative: "" })
+        content: f(() => [
+          p("div", M, [
+            h(g(i.filterString) + " ", 1),
+            t[1] || (t[1] = p("span", { class: "select-item-new-indicator" }, "(Add new value)", -1))
+          ])
         ]),
         _: 1
-      }, 8, ["disabled"])
-    ]));
+      }, 8, ["item"])) : V("", !0)
+    ], 512));
   }
 });
 export {
-  O as default
+  q as default
 };

package/dist/kongponents.es26.js

@@ -1,8 +1,8 @@
 import { defineComponent as A, watch as d, ref as E, computed as f, useTemplateRef as V, onMounted as I, createElementBlock as k, openBlock as B, normalizeStyle as q, createVNode as N, createSlots as w, withCtx as g, renderSlot as v } from "vue";
-import z from "./kongponents.es214.js";
-import { normalizeSize as J } from "./kongponents.es171.js";
-import { warnInvalidProp as o } from "./kongponents.es215.js";
-import { getMaximumDepth as L } from "./kongponents.es216.js";
+import z from "./kongponents.es190.js";
+import { normalizeSize as J } from "./kongponents.es181.js";
+import { warnInvalidProp as o } from "./kongponents.es191.js";
+import { getMaximumDepth as L } from "./kongponents.es192.js";
 const R = /* @__PURE__ */ A({
   __name: "KTreeList",
   props: {

package/dist/kongponents.es261.js

@@ -1,178 +1,43 @@
-import { defineComponent as $, ref as u, computed as D, watch as L, onMounted as T, onBeforeMount as H, createElementBlock as h, openBlock as c, createVNode as o, withCtx as r, unref as b, createBlock as g, createCommentVNode as K, createElementVNode as w, withModifiers as f, createSlots as N, Fragment as P, renderList as E, createTextVNode as C, toDisplayString as U, nextTick as q } from "vue";
-import { debounce as z } from "./kongponents.es166.js";
-import A from "./kongponents.es177.js";
-import J from "./kongponents.es204.js";
-import R from "./kongponents.es271.js";
-import p from "./kongponents.es33.js";
-import F from "./kongponents.es37.js";
-import O from "./kongponents.es42.js";
-import j from "./kongponents.es43.js";
-import G from "./kongponents.es46.js";
-import Q from "./kongponents.es24.js";
-/* empty css                 */
-import W from "./kongponents.es48.js";
-const X = { class: "table-column-visibility-menu" }, Y = { class: "apply-button-wrapper" }, me = /* @__PURE__ */ $({
-  __name: "ColumnVisibilityMenu",
+import { defineComponent as r, createElementBlock as c, openBlock as u, createElementVNode as l, withKeys as s, normalizeClass as v, withModifiers as n, renderSlot as w, createTextVNode as b, toDisplayString as f } from "vue";
+const k = ["aria-selected", "data-testid"], y = { class: "multiselect-item-container" }, $ = ["disabled", "value"], h = { class: "multiselect-item-label" }, K = /* @__PURE__ */ r({
+  __name: "KMultiselectItem",
   props: {
-    columns: {},
-    tableId: {},
-    visibilityPreferences: {},
-    disabled: { type: Boolean }
+    item: {}
   },
-  emits: ["update"],
-  setup(i, { emit: V }) {
-    const x = V, y = u(!1), s = u({}), d = u(!1), n = u(), a = u(""), v = () => {
-      s.value = i.columns.reduce((e, t) => (e[t.key] = i.visibilityPreferences[t.key] === void 0 ? !0 : i.visibilityPreferences[t.key], e), {}), d.value = !1;
-    }, I = z((e) => {
-      a.value = e, n.value && m(n.value);
-    }, 500), k = D(() => a.value ? i.columns.filter((e) => (e.label ? e.label : e.key).toLowerCase().includes(a.value.toLowerCase())) : i.columns), S = () => {
-      x("update", JSON.parse(JSON.stringify(s.value))), d.value = !1, a.value = "";
-    }, B = (e) => {
-      y.value = e, e && n.value && q(() => {
-        n.value && m(n.value);
-      }), !e && d.value && v(), e || (a.value = "");
-    }, m = (e) => {
-      if (!(e.scrollHeight > e.clientHeight)) {
-        e.classList.remove("is-bottom-overflowing");
-        return;
-      }
-      const l = e.scrollHeight < e.clientHeight + e.scrollTop + 1;
-      e.classList.toggle("is-bottom-overflowing", !l);
+  emits: ["selected", "arrow-down", "arrow-up"],
+  setup(e, { emit: d }) {
+    const o = d, a = () => {
+      e.item.disabled || o("selected", e.item);
     };
-    return L(() => i.visibilityPreferences, () => {
-      v();
-    }, { immediate: !0 }), T(() => {
-      n.value && (n.value.addEventListener("scroll", (e) => {
-        const t = e.currentTarget;
-        m(t);
-      }), m(n.value));
-    }), H(() => {
-      v();
-    }), (e, t) => (c(), h("div", X, [
-      o(O, {
-        "data-testid": "table-column-visibility-menu",
-        disabled: i.disabled,
-        "kpop-attributes": { placement: "bottom-end" },
-        onToggleDropdown: B
-      }, {
-        items: r(() => [
-          a.value || k.value.length > 5 ? (c(), g(G, {
-            key: 0,
-            modelValue: a.value,
-            "onUpdate:modelValue": t[1] || (t[1] = (l) => a.value = l),
-            modelModifiers: { trim: !0 },
-            autocomplete: "off",
-            class: "search-input",
-            "data-testid": "search-input",
-            placeholder: "Search columns",
-            type: "search",
-            onClick: t[2] || (t[2] = f(() => {
-            }, ["stop"])),
-            onInput: b(I)
-          }, N({
-            before: r(() => [
-              o(b(J), { decorative: "" })
-            ]),
-            _: 2
-          }, [
-            a.value ? {
-              name: "after",
-              fn: r(() => [
-                o(p, {
-                  appearance: "tertiary",
-                  "aria-label": "Clear search",
-                  class: "clear-search",
-                  "data-testid": "clear-search-button",
-                  icon: "",
-                  size: "small",
-                  onClick: t[0] || (t[0] = f(() => a.value = "", ["stop"]))
-                }, {
-                  default: r(() => [
-                    o(b(A), { decorative: "" })
-                  ]),
-                  _: 1
-                })
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["modelValue", "onInput"])) : K("", !0),
-          w("div", {
-            ref_key: "menuItemsRef",
-            ref: n,
-            class: "menu-items-wrapper"
-          }, [
-            (c(!0), h(P, null, E(k.value, (l) => (c(), g(j, {
-              key: l.key,
-              class: "column-visibility-menu-item",
-              "data-testid": `column-visibility-menu-item-${l.key}`,
-              onClick: f(() => {
-                s.value[l.key] = !s.value[l.key], d.value = !0;
-              }, ["stop"])
-            }, {
-              default: r(() => [
-                o(F, {
-                  modelValue: s.value[l.key],
-                  "onUpdate:modelValue": (M) => s.value[l.key] = M,
-                  "aria-labelledby": `${i.tableId}-${l.key}-visibility-checkbox-label`,
-                  "data-testid": `column-visibility-checkbox-${l.key}`
-                }, null, 8, ["modelValue", "onUpdate:modelValue", "aria-labelledby", "data-testid"]),
-                o(W, {
-                  id: `${i.tableId}-${l.key}-visibility-checkbox-label`,
-                  class: "visibility-checkbox-label",
-                  title: l.label
-                }, {
-                  default: r(() => [
-                    C(U(l.label), 1)
-                  ]),
-                  _: 2
-                }, 1032, ["id", "title"])
-              ]),
-              _: 2
-            }, 1032, ["data-testid", "onClick"]))), 128))
-          ], 512),
-          w("div", Y, [
-            o(p, {
-              appearance: "tertiary",
-              class: "apply-button",
-              "data-testid": "apply-button",
-              onClick: S
-            }, {
-              default: r(() => [...t[3] || (t[3] = [
-                C(" Apply ", -1)
-              ])]),
-              _: 1
-            })
+    return (i, t) => (u(), c("div", {
+      key: e.item.key,
+      "aria-selected": e.item.selected,
+      class: "multiselect-item",
+      "data-testid": `multiselect-item-${e.item.value}`,
+      role: "option"
+    }, [
+      l("div", y, [
+        l("button", {
+          class: v({ selected: e.item.selected }),
+          disabled: e.item.disabled === !0 ? !0 : void 0,
+          type: "button",
+          value: e.item.value,
+          onClick: a,
+          onKeydown: [
+            t[0] || (t[0] = s(n((m) => i.$emit("arrow-down"), ["prevent"]), ["down"])),
+            t[1] || (t[1] = s(n((m) => i.$emit("arrow-up"), ["prevent"]), ["up"]))
+          ]
+        }, [
+          l("span", h, [
+            w(i.$slots, "content", {}, () => [
+              b(f(e.item.label), 1)
+            ], !0)
           ])
-        ]),
-        default: r(() => [
-          o(Q, {
-            placement: "bottom-end",
-            text: y.value ? void 0 : "Show/Hide Columns"
-          }, {
-            default: r(() => [
-              o(p, {
-                appearance: "tertiary",
-                "aria-label": "Show/Hide Columns",
-                class: "menu-button",
-                "data-testid": "column-visibility-menu-button",
-                disabled: i.disabled,
-                icon: "",
-                size: "large"
-              }, {
-                default: r(() => [
-                  o(b(R), { decorative: "" })
-                ]),
-                _: 1
-              }, 8, ["disabled"])
-            ]),
-            _: 1
-          }, 8, ["text"])
-        ]),
-        _: 1
-      }, 8, ["disabled"])
-    ]));
+        ], 42, $)
+      ])
+    ], 8, k));
   }
 });
 export {
-  me as default
+  K as default
 };

package/dist/kongponents.es263.js

@@ -0,0 +1,26 @@
+import { defineComponent as r, createElementBlock as n, openBlock as s, renderSlot as i, createVNode as e } from "vue";
+import t from "./kongponents.es58.js";
+const l = { class: "skeleton-loader" }, _ = /* @__PURE__ */ r({
+  __name: "SkeletonBase",
+  setup(a) {
+    return (o, d) => (s(), n("div", l, [
+      i(o.$slots, "default", {}, () => [
+        e(t, {
+          height: "1",
+          width: "100"
+        }),
+        e(t, {
+          height: "1",
+          width: "100"
+        }),
+        e(t, {
+          height: "1",
+          width: "100"
+        })
+      ], !0)
+    ]));
+  }
+});
+export {
+  _ as default
+};

package/dist/{kongponents.es242.js → kongponents.es265.js}

@@ -1,7 +1,7 @@
 import { defineComponent as h, useCssVars as k, computed as f, createElementBlock as t, openBlock as r, Fragment as s, renderList as c, createElementVNode as l, renderSlot as i, createVNode as n } from "vue";
 import d from "./kongponents.es58.js";
-import { KUI_SPACE_50 as C } from "./kongponents.es174.js";
-import { normalizeSize as p } from "./kongponents.es171.js";
+import { KUI_SPACE_50 as C } from "./kongponents.es177.js";
+import { normalizeSize as p } from "./kongponents.es181.js";
 const _ = { class: "skeleton-card-wrapper" }, v = { class: "skeleton-card-header" }, w = { class: "skeleton-card-content" }, x = { class: "skeleton-card-footer" }, E = /* @__PURE__ */ h({
   __name: "CardSkeleton",
   props: {