@knime/kds-components 0.10.0 → 0.12.0

package/dist/index.js

@@ -1,7 +1,15 @@
-import { defineComponent, ref, watch, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, normalizeStyle, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, normalizeClass, useTemplateRef, createCommentVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, createVNode, defineAsyncComponent, useId, Fragment, renderList, onBeforeUpdate, nextTick, withModifiers, normalizeProps, guardReactiveProps, withDirectives, vModelText, onBeforeUnmount, createTextVNode, useCssVars, mergeDefaults, createSlots, withKeys } from 'vue';
-import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useElementSize, isDefined } from '@vueuse/core';
+import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, normalizeStyle, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, useTemplateRef, createCommentVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, createVNode, defineAsyncComponent, useId, Fragment, renderList, onBeforeUpdate, nextTick, withModifiers, normalizeProps, guardReactiveProps, withDirectives, vModelText, watchEffect, createTextVNode, useCssVars, mergeDefaults, createSlots } from 'vue';
+import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, useElementSize } from '@vueuse/core';
 
-import './index.css';const _hoisted_1$q = ["role", "title", "aria-hidden", "aria-label"];
+import './index.css';const kdsAvatarSize = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large",
+  XLARGE: "xlarge"
+};
+const kdsAvatarSizes = Object.values(kdsAvatarSize);
+
+const _hoisted_1$q = ["role", "title", "aria-hidden", "aria-label"];
 const _hoisted_2$b = ["src"];
 const _hoisted_3$6 = {
   key: 1,
@@ -13,6 +21,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   props: {
     initials: {},
     src: { default: void 0 },
+    size: { default: kdsAvatarSize.XLARGE },
     title: { default: void 0 }
   },
   setup(__props) {
@@ -37,7 +46,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: "kds-avatar",
+        class: normalizeClass(["kds-avatar", props.size]),
         role: hasTitle.value ? "img" : "presentation",
         title: hasTitle.value ? accessibleTitle.value : void 0,
         "aria-hidden": !hasTitle.value ? "true" : void 0,
@@ -53,7 +62,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
         }, null, 40, _hoisted_2$b)) : (openBlock(), createElementBlock("div", _hoisted_3$6, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 8, _hoisted_1$q);
+      ], 10, _hoisted_1$q);
     };
   }
 });
@@ -66,13 +75,31 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-4a34a186"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-d6a313f1"]]);
+
+const kdsColorSwatchType = {
+  LEARNER: "learner",
+  MANIPULATOR: "manipulator",
+  PREDICTOR: "predictor",
+  SINK: "sink",
+  SOURCE: "source",
+  VISUALIZER: "visualizer",
+  OTHER: "other"
+};
+const kdsColorSwatchTypes = Object.values(kdsColorSwatchType);
+const kdsColorSwatchSize = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large"
+};
+const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
 
 const _hoisted_1$p = ["role", "title", "aria-hidden", "aria-label"];
 const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "KdsColorSwatch",
   props: {
     color: {},
+    size: { default: kdsColorSwatchSize.SMALL },
     title: { default: void 0 }
   },
   setup(__props) {
@@ -86,7 +113,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       visualizer: "var(--kds-color-nodes-and-variables-visualizer)",
       other: "var(--kds-color-nodes-and-variables-other)"
     };
-    const isKdsColorSwatchType = (value) => Object.prototype.hasOwnProperty.call(typeToTokenColor, value);
+    const isKdsColorSwatchType = (value) => Object.hasOwn(typeToTokenColor, value);
     const backgroundColor = computed(() => {
       if (isKdsColorSwatchType(props.color)) {
         return typeToTokenColor[props.color];
@@ -98,28 +125,17 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("span", {
         role: hasTitle.value ? "img" : "presentation",
-        class: "kds-color-swatch",
+        class: normalizeClass(["kds-color-swatch", props.size]),
         title: hasTitle.value ? accessibleTitle.value : void 0,
         style: normalizeStyle({ backgroundColor: backgroundColor.value }),
         "aria-hidden": hasTitle.value ? void 0 : "true",
         "aria-label": hasTitle.value ? accessibleTitle.value : void 0
-      }, null, 12, _hoisted_1$p);
+      }, null, 14, _hoisted_1$p);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-c8fc7e8e"]]);
-
-const kdsColorSwatchType = {
-  LEARNER: "learner",
-  MANIPULATOR: "manipulator",
-  PREDICTOR: "predictor",
-  SINK: "sink",
-  SOURCE: "source",
-  VISUALIZER: "visualizer",
-  OTHER: "other"
-};
-const kdsColorSwatchTypes = Object.values(kdsColorSwatchType);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-bdb3dd24"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -484,7 +500,7 @@ const typeIconNames = [
   "xml-datatype"
 ];
 
-const toEnumKey = (name) => name.toUpperCase().replace(/-/g, "_");
+const toEnumKey = (name) => name.toUpperCase().replaceAll("-", "_");
 const kdsIconName = Object.fromEntries(
   iconNames.map((name) => [toEnumKey(name), name])
 );
@@ -647,10 +663,26 @@ function elementOverflowsHorizontally(element) {
   }
   return element.scrollWidth > element.clientWidth;
 }
+function elementOverflowsVertically(element) {
+  if (!element) {
+    return false;
+  }
+  return element.scrollHeight > element.clientHeight;
+}
 function useKdsIsTruncated(elementRef) {
   const isTruncated = ref(false);
-  useResizeObserver(elementRef, () => {
-    isTruncated.value = elementOverflowsHorizontally(elementRef.value);
+  const checkTruncation = () => {
+    isTruncated.value = elementOverflowsHorizontally(elementRef.value) || elementOverflowsVertically(elementRef.value);
+  };
+  useResizeObserver(elementRef, checkTruncation);
+  useMutationObserver(elementRef, checkTruncation, {
+    childList: true,
+    characterData: true,
+    subtree: true,
+    // Also observe attribute changes (especially class/style) that can affect
+    // truncation without necessarily triggering a resize event.
+    attributes: true,
+    attributeFilter: ["class", "style"]
   });
   return { isTruncated };
 }
@@ -2834,7 +2866,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
 
 const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-2e4d2d42"]]);
 
-const _hoisted_1$9 = ["id", "popover", "role", "aria-label"];
+const _hoisted_1$9 = ["id", "role", "aria-label"];
 const _hoisted_2$3 = {
   key: 0,
   class: "kds-popover-default-content"
@@ -2842,8 +2874,6 @@ const _hoisted_2$3 = {
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "KdsPopover",
   props: /* @__PURE__ */ mergeModels({
-    activatorEl: {},
-    anchorEl: {},
     placement: { default: "bottom-left" },
     role: { default: "dialog" },
     fullWidth: { type: Boolean, default: false },
@@ -2854,71 +2884,28 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const open = useModel(__props, "modelValue");
     const popoverEl = useTemplateRef("popoverEl");
     const popoverId = useId();
     const anchorName = `--anchor-${popoverId}`;
-    const resolveElement = (el) => {
-      if (!el) {
-        return null;
-      }
-      const maybeInstance = el;
-      const candidate = maybeInstance.$el ?? el;
-      return candidate instanceof HTMLElement ? candidate : null;
-    };
-    const setA11yAttributes = (el, options) => {
-      if (!el) {
-        return;
-      }
-      if (options === null) {
-        el.removeAttribute("aria-expanded");
-        el.removeAttribute("aria-controls");
-        el.removeAttribute("aria-haspopup");
-        return;
-      }
-      el.setAttribute("aria-expanded", String(options.expanded));
-      el.setAttribute("aria-controls", options.popoverId);
-      el.setAttribute("aria-haspopup", props.role);
-    };
-    watch(open, (isOpen) => {
-      if (isOpen) {
+    watchEffect(() => {
+      if (open.value) {
         popoverEl.value?.showPopover?.();
       } else {
         popoverEl.value?.hidePopover?.();
       }
-      const activatorElement = resolveElement(unref(props.activatorEl));
-      activatorElement?.setAttribute("aria-expanded", String(isOpen));
-    });
-    watch(
-      () => [unref(props.anchorEl), unref(props.activatorEl)],
-      ([nextAnchorEl, nextActivatorEl], prev) => {
-        const [prevAnchorEl, prevActivatorEl] = prev ?? [null, null];
-        const prevAnchor = resolveElement(prevAnchorEl ?? null) ?? resolveElement(prevActivatorEl);
-        prevAnchor?.style.removeProperty("anchor-name");
-        const prevActivator = resolveElement(prevActivatorEl);
-        setA11yAttributes(prevActivator, null);
-        const nextAnchor = resolveElement(nextAnchorEl ?? null) ?? resolveElement(nextActivatorEl);
-        nextAnchor?.style.setProperty("anchor-name", anchorName);
-        const nextActivator = resolveElement(nextActivatorEl);
-        setA11yAttributes(nextActivator, { expanded: open.value, popoverId });
-      },
-      { immediate: true }
-    );
-    onBeforeUnmount(() => {
-      const anchor = resolveElement(unref(props.anchorEl) ?? null) ?? resolveElement(unref(props.activatorEl));
-      anchor?.style.removeProperty("anchor-name");
-      const activator = resolveElement(unref(props.activatorEl));
-      setA11yAttributes(activator, null);
     });
+    const anchorStyle = { "anchor-name": anchorName };
+    __expose({ anchorStyle, popoverId });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         id: unref(popoverId),
         ref_key: "popoverEl",
         ref: popoverEl,
         class: normalizeClass(["kds-popover", ["floating", props.placement, { "full-width": props.fullWidth }]]),
-        popover: unref(props.activatorEl) ? "auto" : void 0,
+        popover: "auto",
         style: normalizeStyle({ "position-anchor": anchorName }),
         role: props.role,
         "aria-label": props.popoverAriaLabel,
@@ -2932,7 +2919,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-22bbe124"]]);
+const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-9125d023"]]);
 
 const _hoisted_1$8 = { class: "kds-info-popover-content" };
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
@@ -2954,7 +2941,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
 
 const InfoPopover = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-951f2a2b"]]);
 
-const _hoisted_1$7 = ["aria-pressed"];
+const _hoisted_1$7 = ["aria-pressed", "aria-expanded", "aria-controls"];
 const TITLE = "Click for more information";
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "KdsInfoToggleButton",
@@ -2969,15 +2956,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const modelValue = useModel(__props, "modelValue");
-    const buttonEl = useTemplateRef("buttonEl");
+    const popoverEl = useTemplateRef("popoverEl");
     const isHovered = ref(false);
     const isFocused = ref(false);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("button", mergeProps({
-          ref_key: "buttonEl",
-          ref: buttonEl
-        }, _ctx.$attrs, {
+        createElementVNode("button", mergeProps(_ctx.$attrs, {
           class: {
             "info-toggle-button": true,
             selected: modelValue.value,
@@ -2986,6 +2970,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           title: TITLE,
           "aria-label": TITLE,
           "aria-pressed": modelValue.value,
+          "aria-expanded": modelValue.value,
+          "aria-controls": popoverEl.value?.popoverId,
+          "aria-haspopup": "dialog",
+          style: popoverEl.value?.anchorStyle,
           type: "button",
           onClick: _cache[0] || (_cache[0] = ($event) => modelValue.value = !modelValue.value),
           onMouseenter: _cache[1] || (_cache[1] = ($event) => isHovered.value = true),
@@ -2999,9 +2987,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           })
         ], 16, _hoisted_1$7),
         createVNode(KdsPopover, {
+          ref_key: "popoverEl",
+          ref: popoverEl,
           modelValue: modelValue.value,
           "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => modelValue.value = $event),
-          "activator-el": buttonEl.value,
           placement: "top-right",
           "popover-aria-label": "Description"
         }, {
@@ -3016,13 +3005,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             }, 8, ["content"])
           ]),
           _: 3
-        }, 8, ["modelValue", "activator-el"])
+        }, 8, ["modelValue"])
       ], 64);
     };
   }
 });
 
-const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-9c9e8369"]]);
+const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-f98c9924"]]);
 
 const KdsInfoToggleButton$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
@@ -3049,7 +3038,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 
 const VariablePopover = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-54c206b9"]]);
 
-const _hoisted_1$5 = ["title", "aria-label", "aria-pressed"];
+const _hoisted_1$5 = ["title", "aria-label", "aria-pressed", "aria-expanded", "aria-controls"];
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "KdsVariableToggleButton",
   props: /* @__PURE__ */ mergeModels({
@@ -3066,7 +3055,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const modelValue = useModel(__props, "modelValue");
-    const buttonEl = useTemplateRef("buttonEl");
+    const popoverEl = useTemplateRef("popoverEl");
     const isHovered = ref(false);
     const isFocused = ref(false);
     const iconState = computed(() => {
@@ -3114,10 +3103,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("button", mergeProps({
-          ref_key: "buttonEl",
-          ref: buttonEl
-        }, _ctx.$attrs, {
+        createElementVNode("button", mergeProps(_ctx.$attrs, {
           class: {
             "variable-toggle-button": true,
             error: props.error,
@@ -3127,6 +3113,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           title: title.value,
           "aria-label": title.value,
           "aria-pressed": modelValue.value,
+          "aria-expanded": modelValue.value,
+          "aria-controls": popoverEl.value?.popoverId,
+          "aria-haspopup": "dialog",
+          style: popoverEl.value?.anchorStyle,
           type: "button",
           onClick: _cache[0] || (_cache[0] = ($event) => modelValue.value = !modelValue.value),
           onMouseenter: _cache[1] || (_cache[1] = ($event) => isHovered.value = true),
@@ -3140,9 +3130,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"])
         ], 16, _hoisted_1$5),
         createVNode(KdsPopover, {
+          ref_key: "popoverEl",
+          ref: popoverEl,
           modelValue: modelValue.value,
           "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => modelValue.value = $event),
-          "activator-el": buttonEl.value,
           placement: "bottom-right",
           "popover-aria-label": "Flow Variable settings"
         }, {
@@ -3157,13 +3148,106 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             }, 8, ["content"])
           ]),
           _: 3
-        }, 8, ["modelValue", "activator-el"])
+        }, 8, ["modelValue"])
       ], 64);
     };
   }
 });
 
-const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-ece95962"]]);
+const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-1541cbb3"]]);
+
+const _hoisted_1$4 = { class: "kds-empty-state" };
+const _hoisted_2$2 = { class: "kds-empty-state-headline" };
+const _hoisted_3$2 = {
+  key: 0,
+  class: "kds-empty-state-description"
+};
+const _hoisted_4$1 = {
+  key: 1,
+  class: "kds-empty-state-action"
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "KdsEmptyState",
+  props: {
+    headline: {},
+    description: {},
+    button: {}
+  },
+  emits: ["buttonClick"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isLinkButton = computed(
+      () => props.button && "to" in props.button && props.button.to !== void 0
+    );
+    const buttonComponent = computed(
+      () => isLinkButton.value ? _sfc_main$s : _sfc_main$t
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        createElementVNode("p", _hoisted_2$2, toDisplayString(props.headline), 1),
+        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$2, toDisplayString(props.description), 1)) : createCommentVNode("", true),
+        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+          (openBlock(), createBlock(resolveDynamicComponent(buttonComponent.value), mergeProps(props.button, {
+            onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick", $event))
+          }), null, 16))
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-b4af30cf"]]);
+
+const _hoisted_1$3 = ["aria-label", "aria-labelledby", "aria-pressed", "disabled"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "KdsCardClickable",
+  props: /* @__PURE__ */ mergeModels({
+    variant: { default: "filled" },
+    selectable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    ariaLabel: {},
+    ariaLabelledby: {}
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["click"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const modelValue = useModel(__props, "modelValue");
+    const emit = __emit;
+    const selected = computed(() => modelValue.value && __props.selectable);
+    const handleClick = (event) => {
+      if (__props.selectable) {
+        modelValue.value = !modelValue.value;
+      } else {
+        emit("click", event);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        type: "button",
+        class: normalizeClass(["kds-card", [`variant-${__props.variant}`, { selected: selected.value }]]),
+        "aria-label": __props.ariaLabel,
+        "aria-labelledby": __props.ariaLabelledby,
+        "aria-pressed": __props.selectable ? modelValue.value : void 0,
+        disabled: __props.disabled,
+        onClick: handleClick
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 10, _hoisted_1$3);
+    };
+  }
+});
+
+const KdsCardClickable = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-4607badd"]]);
+
+const kdsCardVariant = {
+  FILLED: "filled",
+  OUTLINED: "outlined",
+  TRANSPARENT: "transparent"
+};
+const kdsCardVariants = Object.values(kdsCardVariant);
 
 const createUnwrappedPromise = () => {
   let resolve = () => {
@@ -3219,14 +3303,14 @@ const kdsModalPropsDefault = {
   ...kdsModalLayoutPropsDefault
 };
 
-const _hoisted_1$4 = { class: "modal-header" };
-const _hoisted_2$2 = { class: "modal-header-title" };
-const _hoisted_3$2 = ["data-variant"];
-const _hoisted_4$1 = {
+const _hoisted_1$2 = { class: "modal-header" };
+const _hoisted_2$1 = { class: "modal-header-title" };
+const _hoisted_3$1 = ["data-variant"];
+const _hoisted_4 = {
   key: 0,
   class: "modal-footer"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "KdsModalLayout",
   props: /* @__PURE__ */ mergeDefaults({
@@ -3238,18 +3322,18 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }, kdsModalLayoutPropsDefault),
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v3305d0f4": _ctx.overflow
+      "v670bbff1": _ctx.overflow
     }));
     const props = __props;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("header", _hoisted_1$4, [
+        createElementVNode("header", _hoisted_1$2, [
           props.icon ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: props.icon,
             size: "medium"
           }, null, 8, ["name"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_2$2, toDisplayString(props.title), 1),
+          createElementVNode("div", _hoisted_2$1, toDisplayString(props.title), 1),
           createVNode(_sfc_main$t, {
             "leading-icon": "x-close",
             variant: "transparent",
@@ -3263,8 +3347,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           "data-variant": __props.variant
         }, [
           renderSlot(_ctx.$slots, "body", {}, void 0, true)
-        ], 8, _hoisted_3$2),
-        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4$1, [
+        ], 8, _hoisted_3$1),
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 64);
@@ -3272,10 +3356,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-7dbd159b"]]);
+const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-ff11e839"]]);
 
-const _hoisted_1$3 = ["closedby"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1 = ["closedby"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "KdsModal",
   props: /* @__PURE__ */ mergeDefaults({
     icon: {},
@@ -3372,12 +3456,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             _: 3
           }, 8, ["title", "icon", "variant", "overflow"])
         ], true)
-      ], 42, _hoisted_1$3)) : createCommentVNode("", true);
+      ], 42, _hoisted_1$1)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-f7b58ae1"]]);
+const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-f7b58ae1"]]);
 
 const defaultCancelButton = {
   type: "cancel",
@@ -3458,16 +3542,16 @@ const useKdsDynamicModal = () => {
   };
 };
 
-const _hoisted_1$2 = {
+const _hoisted_1 = {
   key: 1,
   class: "confirmation"
 };
-const _hoisted_2$1 = { class: "message" };
-const _hoisted_3$1 = {
+const _hoisted_2 = { class: "message" };
+const _hoisted_3 = {
   key: 0,
   class: "ask-again"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "KdsDynamicModalProvider",
   setup(__props) {
     const askAgain = ref(false);
@@ -3520,9 +3604,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         unref(config)?.type === "confirm" ? {
           name: "body",
           fn: withCtx(() => [
-            unref(internal).isTemplateBasedConfirm(unref(config).value) ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_1$2, [
-              createElementVNode("div", _hoisted_2$1, toDisplayString(unref(config).value.message), 1),
-              unref(config).value.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+            unref(internal).isTemplateBasedConfirm(unref(config).value) ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_1, [
+              createElementVNode("div", _hoisted_2, toDisplayString(unref(config).value.message), 1),
+              unref(config).value.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3, [
                 createVNode(_sfc_main$m, {
                   modelValue: askAgain.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
@@ -3568,171 +3652,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-67e036b5"]]);
-
-const kdsPopoverPlacement = {
-  TOP_LEFT: "top-left",
-  TOP_RIGHT: "top-right",
-  BOTTOM_LEFT: "bottom-left",
-  BOTTOM_RIGHT: "bottom-right"
-};
-const kdsPopoverPlacements = Object.values(kdsPopoverPlacement);
-const kdsPopoverRole = {
-  DIALOG: "dialog",
-  MENU: "menu",
-  LISTBOX: "listbox"
-};
-const kdsPopoverRoles = Object.values(kdsPopoverRole);
-
-const _hoisted_1$1 = ["aria-label", "aria-labelledby", "aria-disabled", "aria-pressed", "tabindex", "onKeydown"];
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "KdsCard",
-  props: /* @__PURE__ */ mergeModels({
-    variant: { default: "filled" },
-    selectable: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    ariaLabel: {},
-    ariaLabelledby: {}
-  }, {
-    "modelValue": { type: Boolean, ...{ default: false } },
-    "modelModifiers": {}
-  }),
-  emits: /* @__PURE__ */ mergeModels(["click"], ["update:modelValue"]),
-  setup(__props, { emit: __emit }) {
-    const modelValue = useModel(__props, "modelValue");
-    const emit = __emit;
-    const selected = computed(() => modelValue.value && __props.selectable);
-    const handleClick = (event) => {
-      if (__props.disabled) {
-        return;
-      }
-      if (__props.selectable) {
-        modelValue.value = !modelValue.value;
-      } else {
-        emit("click", event);
-      }
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["kds-card", [
-          `variant-${__props.variant}`,
-          { selected: selected.value },
-          { disabled: __props.disabled }
-        ]]),
-        role: "button",
-        "aria-label": __props.ariaLabel,
-        "aria-labelledby": __props.ariaLabelledby,
-        "aria-disabled": __props.disabled,
-        "aria-pressed": __props.selectable ? modelValue.value : void 0,
-        tabindex: __props.disabled ? -1 : 0,
-        onClick: handleClick,
-        onKeydown: [
-          withKeys(withModifiers(handleClick, ["prevent"]), ["enter"]),
-          withKeys(withModifiers(handleClick, ["prevent"]), ["space"])
-        ]
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 42, _hoisted_1$1);
-    };
-  }
-});
-
-const KdsCard = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-c64f0e2e"]]);
-
-function isDefinedAndNotEmpty(obj, field) {
-  return isDefined(obj[field]) && obj[field] !== "";
-}
-
-const _hoisted_1 = { class: "kds-empty-state" };
-const _hoisted_2 = { class: "kds-empty-state-headline" };
-const _hoisted_3 = {
-  key: 0,
-  class: "kds-empty-state-description"
-};
-const _hoisted_4 = {
-  key: 1,
-  class: "kds-empty-state-action"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "KdsEmptyState",
-  props: {
-    headline: {},
-    description: {},
-    buttonSize: {},
-    buttonDisabled: { type: Boolean },
-    buttonTitle: {},
-    buttonVariant: {},
-    buttonDestructive: { type: Boolean },
-    buttonLabel: {},
-    buttonLeadingIcon: {},
-    buttonTrailingIcon: {},
-    buttonAriaLabel: {},
-    buttonTo: {},
-    buttonDownload: { type: Boolean },
-    buttonTarget: {},
-    buttonRel: {}
-  },
-  emits: ["buttonClick"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const hasButton = computed(() => {
-      return isDefinedAndNotEmpty(props, "buttonLabel") || isDefinedAndNotEmpty(props, "buttonLeadingIcon");
-    });
-    const buttonType = computed(() => {
-      if (isDefinedAndNotEmpty(props, "buttonTo")) {
-        return _sfc_main$s;
-      }
-      return _sfc_main$t;
-    });
-    const mapProps = (mappings) => {
-      return Object.fromEntries(
-        mappings.map(([targetKey, sourceKey]) => [targetKey, props[sourceKey]]).filter(([, value]) => value !== void 0)
-      );
-    };
-    const buttonProps = computed(() => {
-      if (!hasButton.value) {
-        return {};
-      }
-      const baseProps = mapProps([
-        ["label", "buttonLabel"],
-        ["leadingIcon", "buttonLeadingIcon"],
-        ["trailingIcon", "buttonTrailingIcon"],
-        ["ariaLabel", "buttonAriaLabel"],
-        ["disabled", "buttonDisabled"],
-        ["variant", "buttonVariant"],
-        ["size", "buttonSize"],
-        ["destructive", "buttonDestructive"],
-        ["title", "buttonTitle"]
-      ]);
-      if (buttonType.value !== _sfc_main$s) {
-        return baseProps;
-      }
-      return {
-        ...baseProps,
-        ...mapProps([
-          ["to", "buttonTo"],
-          ["target", "buttonTarget"],
-          ["rel", "buttonRel"],
-          ["download", "buttonDownload"]
-        ])
-      };
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("p", _hoisted_2, toDisplayString(props.headline), 1),
-        props.description ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(props.description), 1)) : createCommentVNode("", true),
-        hasButton.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          (openBlock(), createBlock(resolveDynamicComponent(buttonType.value), mergeProps(buttonProps.value, {
-            onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick", $event))
-          }), null, 16))
-        ])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-
-const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-059bb01e"]]);
+const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-67e036b5"]]);
 
-export { KdsAvatar, _sfc_main$t as KdsButton, KdsCard, _sfc_main$m as KdsCheckbox, KdsCheckboxGroup, KdsColorSwatch, KdsDataType, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLabel, _sfc_main$s as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsModal, KdsModalLayout, _sfc_main$e as KdsNumberInput, _sfc_main$d as KdsPatternInput, KdsPopover, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$c as KdsSearchInput, KdsSubText, _sfc_main$b as KdsTextInput, KdsTextarea, _sfc_main$r as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPopoverPlacement, kdsPopoverPlacements, kdsPopoverRole, kdsPopoverRoles, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAvatar, _sfc_main$t as KdsButton, KdsCardClickable, _sfc_main$m as KdsCheckbox, KdsCheckboxGroup, KdsColorSwatch, KdsDataType, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLabel, _sfc_main$s as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsModal, KdsModalLayout, _sfc_main$e as KdsNumberInput, _sfc_main$d as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$c as KdsSearchInput, KdsSubText, _sfc_main$b as KdsTextInput, KdsTextarea, _sfc_main$r as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map