@knime/kds-components 0.31.3 → 1.0.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, unref, resolveDynamicComponent, mergeProps, useTemplateRef, createVNode, withCtx, renderSlot, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, nextTick, useId, withModifiers, inject, provide, resolveComponent, withKeys, watchEffect, useAttrs, defineAsyncComponent, toRefs, useCssVars, normalizeProps, guardReactiveProps, createSlots, withDirectives, vShow, onBeforeUpdate, onBeforeUnmount, isRef, vModelText, createTextVNode, effectScope } from 'vue';
+import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, unref, resolveDynamicComponent, mergeProps, useTemplateRef, createVNode, renderSlot, createTextVNode, withCtx, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, nextTick, useId, withModifiers, inject, provide, resolveComponent, withKeys, watchEffect, useAttrs, defineAsyncComponent, toRefs, useCssVars, normalizeProps, guardReactiveProps, createSlots, withDirectives, vShow, onBeforeUpdate, onBeforeUnmount, isRef, vModelText, effectScope } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, onClickOutside, useVirtualList, useElementSize, useMousePressed, useTemplateRefsList, useEventListener } from '@vueuse/core';
 
 import './index.css';const kdsAvatarSize = {
@@ -1101,13 +1101,17 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"]),
           createElementVNode("div", _hoisted_3$t, toDisplayString(props.headline), 1)
         ]),
-        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$p, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+        props.description || _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$p, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(props.description), 1)
+          ], true)
+        ])) : createCommentVNode("", true)
       ], 10, _hoisted_1$10);
     };
   }
 });
 
-const KdsInlineMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["__scopeId", "data-v-194a0dfd"]]);
+const KdsInlineMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["__scopeId", "data-v-c54ea4b4"]]);
 
 const kdsInlineMessageVariant = {
   ERROR: "error",
@@ -2271,7 +2275,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-a3d6c86f"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-a582a5cb"]]);
 
 const _hoisted_1$V = { class: "kds-list-item-section-title" };
 const _hoisted_2$A = {
@@ -20290,7 +20294,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean, default: false },
     autocomplete: {},
     results: {},
-    resultsMaxHeight: {}
+    resultsMaxHeight: {},
+    leadingIcon: { default: "search" }
   }, {
     "modelValue": { default: "" },
     "modelModifiers": {}
@@ -20303,7 +20308,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     const KdsListContainer = defineAsyncComponent(
       () => Promise.resolve().then(() => KdsListContainer$1)
     );
-    const props = createPropsRestProxy(__props, ["placeholder", "disabled", "error", "validating", "preserveSubTextSpace"]);
+    const props = createPropsRestProxy(__props, ["placeholder", "disabled", "leadingIcon", "error", "validating", "preserveSubTextSpace"]);
     const modelValue = useModel(__props, "modelValue");
     const emit = __emit;
     const baseInput = useTemplateRef("baseInput");
@@ -20375,7 +20380,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled,
             error: __props.error,
             autocomplete: __props.autocomplete,
-            "leading-icon": "search",
+            "leading-icon": __props.leadingIcon,
             clearable: true,
             style: popoverEl.value?.anchorStyle,
             role: __props.results ? "combobox" : void 0,
@@ -20387,7 +20392,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             onFocus,
             onBlur,
             onClick
-          }), null, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete", "style", "role", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded"]),
+          }), null, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete", "leading-icon", "style", "role", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded"]),
           __props.results ? (openBlock(), createBlock(unref(KdsPopover), {
             key: 0,
             ref: "popover",
@@ -20427,7 +20432,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-8930f00a"]]);
+const KdsSearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-f7236e9c"]]);
 
 const _hoisted_1$x = ["rows", "placeholder", "disabled", "autocomplete"];
 const DEFAULT_ROWS = 3;
@@ -24902,7 +24907,8 @@ const kdsCardVariants = Object.values(kdsCardVariant);
 const kdsPanelBodyOverflow = {
   AUTO: "auto",
   HIDDEN: "hidden",
-  VISIBLE: "visible"
+  VISIBLE: "visible",
+  CLIP: "clip"
 };
 const kdsPanelBodyOverflows = Object.values(kdsPanelBodyOverflow);
 const kdsPanelBodyVariant = {
@@ -24945,14 +24951,14 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v2ddcad1c": _ctx.bodyOverflow
+      "d76547d6": _ctx.bodyOverflow
     }));
     const headlineId = useId();
     const hasHeader = computed(
       () => Boolean(__props.headline) || Boolean(__props.headlineTrailingActions?.length)
     );
     const isBodyKeyboardFocusable = computed(
-      () => __props.bodyOverflow !== kdsPanelBodyOverflow.HIDDEN
+      () => __props.bodyOverflow !== kdsPanelBodyOverflow.HIDDEN && __props.bodyOverflow !== kdsPanelBodyOverflow.CLIP
     );
     const bodyAriaLabel = computed(
       () => isBodyKeyboardFocusable.value && __props.ariaLabel ? __props.ariaLabel : void 0
@@ -25045,7 +25051,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-d3124a50"]]);
+const KdsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-64966fb2"]]);
 
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "TabBarItemAccessory",
@@ -25378,7 +25384,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const LoadingSkeletonItem = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-86829b28"]]);
+const LoadingSkeletonItem = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-b7565402"]]);
 
 const _hoisted_1$8 = {
   key: 0,
@@ -25405,7 +25411,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v59c08829": _ctx.repeatGap
+      "v18b57ee8": _ctx.repeatGap
     }));
     return (_ctx, _cache) => {
       return __props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
@@ -25428,7 +25434,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 shape: "label",
                 class: "label"
               }),
-              createVNode(LoadingSkeletonItem, { shape: "input-with-label" })
+              createVNode(LoadingSkeletonItem, { shape: "input" })
             ])) : __props.variant?.startsWith("list-item-") ? (openBlock(), createElementBlock("div", {
               key: 2,
               class: normalizeClass([
@@ -25463,7 +25469,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLoadingSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-e6597718"]]);
+const KdsLoadingSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-326c25f0"]]);
 
 const loadingSkeletonItemShape = {
   TEXT: "text",
@@ -25476,10 +25482,11 @@ const loadingSkeletonItemShape = {
   BUTTON_SMALL: "button-small",
   BUTTON_XSMALL: "button-xsmall",
   CARD: "card",
-  INPUT_WITH_LABEL: "input-with-label"
+  INPUT: "input"
 };
 const kdsLoadingSkeletonVariant = {
   ...loadingSkeletonItemShape,
+  INPUT_WITH_LABEL: "input-with-label",
   HEADLINE_WITH_PARAGRAPH: "headline-with-paragraph",
   LIST_ITEM_LARGE: "list-item-large",
   LIST_ITEM_LARGE_WITH_SUBTEXT: "list-item-large-with-subtext",
@@ -25934,7 +25941,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v81addf0a": _ctx.overflow
+      "d8a22254": _ctx.overflow
     }));
     const props = createPropsRestProxy(__props, ["headline", "variant", "overflow"]);
     return (_ctx, _cache) => {
@@ -25969,7 +25976,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-62740dc9"]]);
+const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-36cbff95"]]);
 
 const _hoisted_1$3 = ["closedby"];
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
@@ -26448,6 +26455,106 @@ const vKdsTooltip = {
   }
 };
 
+const typeToComponent = {
+  KdsButton: _sfc_main$1v,
+  KdsLinkButton: _sfc_main$1u,
+  KdsSplitButton,
+  KdsMenuButton: _sfc_main$1k,
+  KdsProgressButton,
+  KdsToggleButton: _sfc_main$1s
+};
+const fullBindings = (entry) => ({
+  ...entry.meta
+});
+const iconOnlyBindings = (entry, leadingIcon, ariaLabel) => {
+  const {
+    label: _label,
+    trailingIcon: _trailingIcon,
+    ariaLabel: _ariaLabel,
+    title,
+    leadingIcon: _leadingIcon,
+    ...rest
+  } = entry.meta;
+  return {
+    ...rest,
+    leadingIcon,
+    ariaLabel,
+    title: title ?? ariaLabel
+  };
+};
+const hasLeadingIcon = (entry) => "leadingIcon" in entry.meta && Boolean(entry.meta.leadingIcon);
+const isIconCapable = (entry) => entry.canBeIconOnly !== false && hasLeadingIcon(entry);
+const accessoryFor = (entry) => "leadingIcon" in entry.meta && entry.meta.leadingIcon ? { type: "icon", name: entry.meta.leadingIcon } : void 0;
+const toMenuItem = (entry) => {
+  switch (entry.type) {
+    case "KdsButton":
+      return {
+        id: entry.id,
+        text: entry.meta.label,
+        disabled: entry.meta.disabled,
+        accessory: accessoryFor(entry),
+        handler: (_item, ev) => entry.handler(entry, ev)
+      };
+    case "KdsProgressButton":
+      return {
+        id: entry.id,
+        text: entry.meta.label,
+        disabled: entry.meta.disabled,
+        accessory: accessoryFor(entry),
+        handler: (_item, ev) => entry.handler(entry, ev)
+      };
+    case "KdsToggleButton":
+      return {
+        id: entry.id,
+        text: entry.meta.label,
+        disabled: entry.meta.disabled,
+        accessory: accessoryFor(entry),
+        trailingIcon: entry.meta.modelValue ? "checkmark" : void 0,
+        handler: () => entry.handler(entry, !entry.meta.modelValue)
+      };
+    case "KdsLinkButton":
+      return {
+        id: entry.id,
+        text: entry.meta.label,
+        disabled: entry.meta.disabled,
+        accessory: accessoryFor(entry),
+        to: entry.meta.to,
+        target: entry.meta.target,
+        rel: entry.meta.rel,
+        download: entry.meta.download
+      };
+    case "KdsSplitButton":
+      return {
+        id: entry.id,
+        text: entry.meta.label,
+        disabled: entry.meta.disabled,
+        accessory: accessoryFor(entry),
+        children: [
+          {
+            id: `${entry.id}__primary`,
+            text: entry.meta.label,
+            accessory: accessoryFor(entry),
+            separator: true,
+            handler: (_item, ev) => entry.handler(entry, ev)
+          },
+          ...entry.meta.items
+        ]
+      };
+    case "KdsMenuButton":
+      return {
+        id: entry.id,
+        text: entry.meta.label,
+        disabled: entry.meta.disabled,
+        accessory: accessoryFor(entry),
+        children: entry.meta.items
+      };
+    default: {
+      const _exhaustive = entry;
+      return _exhaustive;
+    }
+  }
+};
+
 const _hoisted_1$1 = {
   ref: "measureContainer",
   class: "kds-button-group-measure",
@@ -26461,77 +26568,138 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     buttons: {},
     alignment: { default: "left" }
   },
-  emits: ["buttonClick"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
+  setup(__props) {
     const measureContainerEl = useTemplateRef("measureContainer");
-    const measureButtonEls = useTemplateRef("measureButton");
+    const measureFullEls = useTemplateRef("measureFullEntry");
+    const measureIconEls = useTemplateRef("measureIconEntry");
     const measureMenuButtonEl = useTemplateRef("measureMenuButton");
     const buttonsContainerEl = useTemplateRef("buttonsContainer");
     const { width: containerWidth } = useElementSize(buttonsContainerEl);
     const gap = ref(0);
-    const buttonWidths = ref([]);
+    const fullWidths = ref([]);
+    const iconOnlyWidths = ref([]);
     const menuButtonWidth = ref(0);
-    const splitIndex = computed(() => {
-      const availableSpace = containerWidth.value;
-      const widths = buttonWidths.value;
-      const buttonsCount = __props.buttons.length;
-      if (!availableSpace || buttonsCount === 0) {
-        return 0;
-      }
-      let buttonsWidth = 0;
-      for (let i = 0; i < buttonsCount; i++) {
-        if (i > 0) {
-          buttonsWidth += gap.value;
+    const iconOnlyEligibleEntries = computed(() => {
+      const result = [];
+      __props.buttons.forEach((entry, index) => {
+        if (!isIconCapable(entry)) {
+          return;
         }
-        buttonsWidth += widths[i] ?? 0;
-      }
-      if (buttonsWidth <= availableSpace) {
-        return buttonsCount;
-      }
-      let usedWidth = menuButtonWidth.value;
-      let count = 0;
-      for (let i = 0; i < buttonsCount; i++) {
-        const buttonWidth = widths[i] ?? 0;
-        const gapBefore = count > 0 ? gap.value : 0;
-        const gapAfterForMenu = gap.value;
-        const totalWidth = usedWidth + gapBefore + buttonWidth + gapAfterForMenu;
-        if (totalWidth > availableSpace) {
-          break;
+        const meta = entry.meta;
+        if (!meta.leadingIcon) {
+          return;
         }
-        usedWidth += gapBefore + buttonWidth;
-        count++;
-      }
-      return count;
+        result.push({
+          entry,
+          index,
+          leadingIcon: meta.leadingIcon,
+          label: meta.label
+        });
+      });
+      return result;
     });
-    const visibleButtons = computed(() => {
-      return __props.buttons.slice(0, splitIndex.value);
+    const layout = computed(() => {
+      const available = containerWidth.value;
+      const n = __props.buttons.length;
+      if (n === 0) {
+        return { mode: "full", inMenu: /* @__PURE__ */ new Set() };
+      }
+      const gapTotal = (count) => gap.value * Math.max(0, count - 1);
+      const sumFull = fullWidths.value.reduce((acc, w) => acc + (w ?? 0), 0) + gapTotal(n);
+      if (!available || sumFull <= available) {
+        return { mode: "full", inMenu: /* @__PURE__ */ new Set() };
+      }
+      const effectiveWidths = __props.buttons.map(
+        (entry, i) => isIconCapable(entry) ? iconOnlyWidths.value[i] ?? fullWidths.value[i] ?? 0 : fullWidths.value[i] ?? 0
+      );
+      const sumCollapsed = effectiveWidths.reduce((acc, w) => acc + w, 0) + gapTotal(n);
+      if (sumCollapsed <= available) {
+        return { mode: "icon-only", inMenu: /* @__PURE__ */ new Set() };
+      }
+      const inMenu = /* @__PURE__ */ new Set();
+      for (let i = n - 1; i >= 0; i--) {
+        if (__props.buttons[i].canMoveToMenu === false) {
+          continue;
+        }
+        inMenu.add(i);
+        let visibleSum = 0;
+        let visibleCount = 0;
+        for (let j = 0; j < n; j++) {
+          if (inMenu.has(j)) {
+            continue;
+          }
+          visibleSum += effectiveWidths[j];
+          visibleCount++;
+        }
+        const width = visibleSum + gapTotal(visibleCount) + menuButtonWidth.value + (visibleCount > 0 ? gap.value : 0);
+        if (width <= available) {
+          return { mode: "partial", inMenu };
+        }
+      }
+      return { mode: "overflow", inMenu };
     });
-    const overflowButtons = computed(() => {
-      return __props.buttons.slice(splitIndex.value);
+    const visibleEntries = computed(() => {
+      const collapseIcons = layout.value.mode !== "full";
+      const result = [];
+      __props.buttons.forEach((entry, index) => {
+        if (layout.value.inMenu.has(index)) {
+          return;
+        }
+        const meta = entry.meta;
+        const iconOnly = collapseIcons && isIconCapable(entry) && meta.leadingIcon ? { leadingIcon: meta.leadingIcon, ariaLabel: meta.label } : void 0;
+        result.push({ entry, iconOnly });
+      });
+      return result;
     });
     const overflowMenuItems = computed(() => {
-      return overflowButtons.value.map((a) => ({
-        id: a.id,
-        text: a.label,
-        disabled: a.disabled,
-        accessory: a.leadingIcon ? { type: "icon", name: a.leadingIcon } : void 0
-      }));
+      const indices = Array.from(layout.value.inMenu).sort((a, b) => a - b);
+      return indices.map((i) => toMenuItem(__props.buttons[i]));
     });
-    const onMenuItemClick = (id) => {
-      if (id) {
-        emit("buttonClick", id);
+    const refOffsetWidth = (instance) => {
+      if (!instance) {
+        return 0;
       }
+      if (instance.menuButtonEl?.$el) {
+        return instance.menuButtonEl.$el.offsetWidth ?? 0;
+      }
+      return instance.$el?.offsetWidth ?? 0;
     };
     const measureButtons = async () => {
       await nextTick();
       if (!measureContainerEl.value) {
         return;
       }
-      buttonWidths.value = Array.from(measureButtonEls.value ?? []).map(
-        (button) => button?.$el.offsetWidth
-      );
-      menuButtonWidth.value = measureMenuButtonEl.value?.menuButtonEl?.$el.offsetWidth ?? 0;
+      fullWidths.value = Array.from(measureFullEls.value ?? []).map(refOffsetWidth);
+      const iconWidthByIndex = new Array(__props.buttons.length);
+      const eligibleIndices = iconOnlyEligibleEntries.value.map((e) => e.index);
+      const iconRefs = Array.from(measureIconEls.value ?? []);
+      eligibleIndices.forEach((buttonIndex, measureIndex) => {
+        iconWidthByIndex[buttonIndex] = refOffsetWidth(iconRefs[measureIndex]);
+      });
+      iconOnlyWidths.value = iconWidthByIndex;
+      menuButtonWidth.value = refOffsetWidth(measureMenuButtonEl.value);
+    };
+    const visibleBindings = (visible) => {
+      const base = visible.iconOnly ? iconOnlyBindings(
+        visible.entry,
+        visible.iconOnly.leadingIcon,
+        visible.iconOnly.ariaLabel
+      ) : fullBindings(visible.entry);
+      const entry = visible.entry;
+      if (entry.type === "KdsToggleButton") {
+        return {
+          ...base,
+          "onUpdate:modelValue": (next) => entry.handler(entry, next)
+        };
+      }
+      if ("handler" in entry && typeof entry.handler === "function") {
+        const handler = entry.handler;
+        return {
+          ...base,
+          onClick: (ev) => handler(entry, ev)
+        };
+      }
+      return base;
     };
     watch(() => __props.buttons, measureButtons, { deep: true });
     onMounted(() => {
@@ -26544,14 +26712,22 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("div", _hoisted_1$1, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.buttons, (button) => {
-            return openBlock(), createBlock(_sfc_main$1v, {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(typeToComponent)[button.type]), mergeProps({
+              key: `full-${button.id}`,
               ref_for: true,
-              ref: "measureButton",
-              key: button.id,
-              label: button.label,
-              variant: button.variant ?? "outlined",
-              "leading-icon": button.leadingIcon
-            }, null, 8, ["label", "variant", "leading-icon"]);
+              ref: "measureFullEntry"
+            }, { ref_for: true }, unref(fullBindings)(button)), null, 16);
+          }), 128)),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(iconOnlyEligibleEntries.value, (iconItem) => {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(typeToComponent)[iconItem.entry.type]), mergeProps(
+              {
+                key: `icon-${iconItem.entry.id}`,
+                ref_for: true,
+                ref: "measureIconEntry"
+              },
+              { ref_for: true },
+              unref(iconOnlyBindings)(iconItem.entry, iconItem.leadingIcon, iconItem.label)
+            ), null, 16);
           }), 128)),
           createVNode(_sfc_main$1k, {
             ref: "measureMenuButton",
@@ -26563,24 +26739,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", mergeProps({ ref: "buttonsContainer" }, _ctx.$attrs, {
           class: ["kds-button-group", __props.alignment]
         }), [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleButtons.value, (button) => {
-            return openBlock(), createBlock(_sfc_main$1v, {
-              key: button.id,
-              label: button.label,
-              variant: button.variant ?? "outlined",
-              disabled: button.disabled,
-              "leading-icon": button.leadingIcon,
-              destructive: button.destructive,
-              title: button.title,
-              onClick: ($event) => emit("buttonClick", button.id)
-            }, null, 8, ["label", "variant", "disabled", "leading-icon", "destructive", "title", "onClick"]);
+          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleEntries.value, (visible) => {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(typeToComponent)[visible.entry.type]), mergeProps({
+              key: visible.entry.id
+            }, { ref_for: true }, visibleBindings(visible)), null, 16);
           }), 128)),
-          overflowButtons.value.length ? (openBlock(), createBlock(_sfc_main$1k, {
+          overflowMenuItems.value.length ? (openBlock(), createBlock(_sfc_main$1k, {
             key: 0,
             "leading-icon": "more-actions",
             ariaLabel: "More actions",
-            items: overflowMenuItems.value,
-            onItemClick: onMenuItemClick
+            items: overflowMenuItems.value
           }, null, 8, ["items"])) : createCommentVNode("", true)
         ], 16)
       ], 64);
@@ -26588,7 +26756,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsResponsiveButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-a945c295"]]);
+const KdsResponsiveButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-ccdbc564"]]);
 
 const kdsResponsiveButtonGroupAlignment = {
   LEFT: "left",