@knime/kds-components 0.5.10 → 0.6.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { shallowRef, watch, defineComponent, toRef, createBlock, createElementBlock, unref, openBlock, resolveDynamicComponent, normalizeClass, computed, withCtx, createCommentVNode, toDisplayString, mergeProps, h, useSlots, getCurrentInstance, mergeModels, useModel, useId, createElementVNode, mergeDefaults, useCssVars, Fragment, createVNode, renderSlot, useTemplateRef, nextTick, ref, withModifiers, createSlots, renderList, normalizeProps, guardReactiveProps, onBeforeUpdate } from 'vue';
+import { shallowRef, watch, defineComponent, toRef, createBlock, createElementBlock, unref, openBlock, resolveDynamicComponent, normalizeClass, computed, withCtx, renderSlot, createCommentVNode, toDisplayString, mergeProps, mergeDefaults, useCssVars, Fragment, createElementVNode, createVNode, useTemplateRef, nextTick, ref, withModifiers, mergeModels, useModel, useId, createSlots, renderList, normalizeProps, guardReactiveProps, h, useSlots, getCurrentInstance, normalizeStyle, onBeforeUpdate } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useElementSize } from '@vueuse/core';
 
 import './index.css';const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
@@ -35,7 +35,7 @@ const useIcon = ({
   return iconComponent;
 };
 
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -68,285 +68,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-d965b88c"]]);
-
-const _hoisted_1$c = {
-  key: 1,
-  class: "label"
-};
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  __name: "BaseButton",
-  props: {
-    size: { default: "medium" },
-    disabled: { type: Boolean, default: false },
-    title: {},
-    variant: {},
-    label: {},
-    leadingIcon: {},
-    trailingIcon: {},
-    ariaLabel: {},
-    destructive: { type: Boolean, default: false },
-    toggled: { type: Boolean, default: false },
-    component: { default: "button" }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const classes = computed(() => [
-      "button",
-      props.size,
-      props.variant,
-      { destructive: props.destructive },
-      { disabled: props.disabled },
-      { toggled: props.toggled }
-    ]);
-    const iconSize = computed(() => {
-      if (props.size === "xsmall") {
-        return "small";
-      } else {
-        return props.size;
-      }
-    });
-    function onClick(e) {
-      if (!props.disabled) {
-        emit("click", e);
-      }
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.component), {
-        class: normalizeClass(classes.value),
-        disabled: props.disabled,
-        title: props.title,
-        "aria-label": props.ariaLabel,
-        onClick: _cache[0] || (_cache[0] = ($event) => onClick($event))
-      }, {
-        default: withCtx(() => [
-          props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
-            key: 0,
-            name: props.leadingIcon,
-            size: iconSize.value
-          }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$c, toDisplayString(props.label), 1)) : createCommentVNode("", true),
-          props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
-            key: 2,
-            name: props.trailingIcon,
-            size: iconSize.value
-          }, null, 8, ["name", "size"])) : createCommentVNode("", true)
-        ]),
-        _: 1
-      }, 8, ["class", "disabled", "title", "aria-label"]);
-    };
-  }
-});
-
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-dd209f83"]]);
-
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  __name: "KdsButton",
-  props: {
-    size: {},
-    disabled: { type: Boolean },
-    title: {},
-    variant: { default: "filled" },
-    label: {},
-    leadingIcon: {},
-    trailingIcon: {},
-    ariaLabel: {},
-    destructive: { type: Boolean }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseButton, mergeProps(props, {
-        onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
-      }), null, 16);
-    };
-  }
-});
-
-const getAppInstance = () => {
-  const currentInstance = getCurrentInstance();
-  return currentInstance?.appContext.app;
-};
-const resolveNuxtLinkComponent = () => {
-  const app = getAppInstance();
-  const nuxtLinkComponent = app?.component("NuxtLink");
-  if (nuxtLinkComponent) {
-    return nuxtLinkComponent;
-  }
-  const routerLinkComponent = app?.component("RouterLink");
-  if (routerLinkComponent) {
-    return routerLinkComponent;
-  }
-  const fallbackComponent = defineComponent({
-    props: {
-      to: {
-        type: String,
-        default: ""
-      }
-    },
-    render() {
-      return h("a", { href: this.to }, [useSlots().default?.()]);
-    }
-  });
-  return fallbackComponent;
-};
-
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  __name: "KdsLinkButton",
-  props: {
-    size: {},
-    disabled: { type: Boolean },
-    title: {},
-    variant: { default: "filled" },
-    label: {},
-    leadingIcon: {},
-    trailingIcon: {},
-    ariaLabel: {},
-    destructive: { type: Boolean },
-    to: {},
-    download: { type: Boolean, default: void 0 },
-    target: { default: null },
-    rel: { default: null }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const component = computed(() => {
-      if (props.disabled) {
-        return "button";
-      }
-      return resolveNuxtLinkComponent();
-    });
-    const emit = __emit;
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseButton, mergeProps(props, {
-        component: component.value,
-        onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
-      }), null, 16, ["component"]);
-    };
-  }
-});
-
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "KdsToggleButton",
-  props: /* @__PURE__ */ mergeModels({
-    size: {},
-    disabled: { type: Boolean },
-    title: {},
-    variant: { default: "outlined" },
-    label: {},
-    leadingIcon: {},
-    trailingIcon: {},
-    ariaLabel: {}
-  }, {
-    "modelValue": { type: Boolean, ...{ default: false } },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = __props;
-    const modelValue = useModel(__props, "modelValue");
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseButton, mergeProps(props, {
-        toggled: modelValue.value,
-        "aria-pressed": modelValue.value,
-        onClick: _cache[0] || (_cache[0] = ($event) => modelValue.value = !modelValue.value)
-      }), null, 16, ["toggled", "aria-pressed"]);
-    };
-  }
-});
-
-const _hoisted_1$b = ["disabled", "aria-checked", "aria-describedby", "aria-invalid", "title"];
-const _hoisted_2$4 = { class: "control" };
-const _hoisted_3$3 = {
-  key: 0,
-  class: "content"
-};
-const _hoisted_4$2 = { class: "label" };
-const _hoisted_5$1 = ["id"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  __name: "KdsCheckbox",
-  props: {
-    modelValue: { type: [Boolean, String], default: false },
-    disabled: { type: Boolean, default: false },
-    error: { type: Boolean, default: false },
-    title: {},
-    label: {},
-    helperText: {}
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const id = useId();
-    const isChecked = computed(() => props.modelValue === true);
-    const isIndeterminate = computed(() => props.modelValue === "indeterminate");
-    const icon = computed(() => {
-      if (isChecked.value) {
-        return "checkmark";
-      }
-      if (isIndeterminate.value) {
-        return "minus";
-      }
-      return null;
-    });
-    const ariaChecked = computed(() => {
-      if (isIndeterminate.value) {
-        return "mixed";
-      }
-      return isChecked.value;
-    });
-    const handleClick = () => {
-      if (props.disabled) {
-        return;
-      }
-      const newValue = isIndeterminate.value ? true : !isChecked.value;
-      emit("update:modelValue", newValue);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("button", {
-        class: normalizeClass({
-          checkbox: true,
-          checked: isChecked.value,
-          indeterminate: isIndeterminate.value,
-          disabled: props.disabled,
-          error: props.error
-        }),
-        disabled: props.disabled,
-        "aria-checked": ariaChecked.value,
-        "aria-describedby": props.helperText ? `${unref(id)}-helper` : void 0,
-        "aria-invalid": props.error,
-        title: props.title,
-        type: "button",
-        role: "checkbox",
-        onClick: handleClick
-      }, [
-        createElementVNode("div", _hoisted_2$4, [
-          icon.value ? (openBlock(), createBlock(KdsIcon, {
-            key: 0,
-            name: icon.value,
-            class: "icon",
-            size: "xsmall"
-          }, null, 8, ["name"])) : createCommentVNode("", true)
-        ]),
-        props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
-          createElementVNode("div", _hoisted_4$2, toDisplayString(props.label), 1),
-          props.helperText ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            id: `${unref(id)}-helper`,
-            class: "helper-text"
-          }, toDisplayString(props.helperText), 9, _hoisted_5$1)) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$b);
-    };
-  }
-});
-
-const KdsCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-a0ec0f68"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-d965b88c"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -492,8 +214,8 @@ const typeIconNames = [
   "xml-datatype"
 ];
 
-const _hoisted_1$a = ["title"];
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _hoisted_1$g = ["title"];
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -533,12 +255,115 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$a);
+      ], 10, _hoisted_1$g);
+    };
+  }
+});
+
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-f7d93fdf"]]);
+
+const _hoisted_1$f = {
+  key: 0,
+  class: "label"
+};
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  __name: "BaseButton",
+  props: {
+    size: { default: "medium" },
+    disabled: { type: Boolean, default: false },
+    title: {},
+    variant: {},
+    label: {},
+    leadingIcon: {},
+    trailingIcon: {},
+    ariaLabel: {},
+    destructive: { type: Boolean, default: false },
+    success: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
+    toggled: { type: Boolean, default: false },
+    component: { default: "button" }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const classes = computed(() => [
+      "button",
+      props.size,
+      props.variant,
+      { destructive: props.destructive },
+      { disabled: props.disabled },
+      { toggled: props.toggled },
+      { success: props.success },
+      { error: props.error }
+    ]);
+    const iconSize = computed(() => {
+      if (props.size === "xsmall") {
+        return "small";
+      } else {
+        return props.size;
+      }
+    });
+    function onClick(e) {
+      if (!props.disabled) {
+        emit("click", e);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.component), {
+        class: normalizeClass(classes.value),
+        disabled: props.disabled,
+        title: props.title,
+        "aria-label": props.ariaLabel,
+        onClick: _cache[0] || (_cache[0] = ($event) => onClick($event))
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "leading", {}, () => [
+            props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
+              key: 0,
+              name: props.leadingIcon,
+              size: iconSize.value
+            }, null, 8, ["name", "size"])) : createCommentVNode("", true)
+          ], true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$f, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
+            key: 1,
+            name: props.trailingIcon,
+            size: iconSize.value
+          }, null, 8, ["name", "size"])) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["class", "disabled", "title", "aria-label"]);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-f7d93fdf"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-ab4824cd"]]);
+
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "KdsButton",
+  props: {
+    size: {},
+    disabled: { type: Boolean },
+    title: {},
+    variant: { default: "filled" },
+    label: {},
+    leadingIcon: {},
+    trailingIcon: {},
+    ariaLabel: {},
+    destructive: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseButton, mergeProps(props, {
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
+      }), null, 16);
+    };
+  }
+});
 
 const modalLayoutPropsDefault = {
   title: "",
@@ -554,14 +379,14 @@ const modalPropsDefault = {
   ...modalLayoutPropsDefault
 };
 
-const _hoisted_1$9 = { class: "modal-header" };
-const _hoisted_2$3 = { class: "modal-header-title" };
-const _hoisted_3$2 = ["data-variant"];
-const _hoisted_4$1 = {
+const _hoisted_1$e = { class: "modal-header" };
+const _hoisted_2$5 = { class: "modal-header-title" };
+const _hoisted_3$3 = ["data-variant"];
+const _hoisted_4$2 = {
   key: 0,
   class: "modal-footer"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "KdsModalLayout",
   props: /* @__PURE__ */ mergeDefaults({
@@ -573,19 +398,19 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }, modalLayoutPropsDefault),
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v7613d0dd": _ctx.overflow
+      "c5a8c866": _ctx.overflow
     }));
     const props = __props;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("header", _hoisted_1$9, [
+        createElementVNode("header", _hoisted_1$e, [
           props.icon ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: props.icon,
             size: "medium"
           }, null, 8, ["name"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_2$3, toDisplayString(props.title), 1),
-          createVNode(_sfc_main$e, {
+          createElementVNode("div", _hoisted_2$5, toDisplayString(props.title), 1),
+          createVNode(_sfc_main$i, {
             "leading-icon": "x-close",
             variant: "transparent",
             size: "medium",
@@ -598,8 +423,8 @@ const _sfc_main$9 = /* @__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$3),
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4$2, [
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 64);
@@ -607,10 +432,10 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-c600bf4b"]]);
+const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-583e34fe"]]);
 
-const _hoisted_1$8 = ["closedby"];
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = ["closedby"];
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "KdsModal",
   props: /* @__PURE__ */ mergeDefaults({
     icon: {},
@@ -702,12 +527,193 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             _: 3
           }, 8, ["title", "icon", "variant", "overflow"])
         ], true)
-      ], 42, _hoisted_1$8)) : createCommentVNode("", true);
+      ], 42, _hoisted_1$d)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-6fc6d7dd"]]);
+const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-6fc6d7dd"]]);
+
+const _hoisted_1$c = ["id"];
+const _hoisted_2$4 = { class: "subtext-text" };
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "KdsSubText",
+  props: {
+    id: {},
+    subText: {},
+    error: { type: Boolean, default: false },
+    preserveSubTextSpace: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        id: props.id,
+        class: normalizeClass({
+          subtext: true,
+          error: props.error
+        })
+      }, [
+        props.error && props.subText ? (openBlock(), createBlock(KdsIcon, {
+          key: 0,
+          name: "circle-error",
+          size: "small",
+          "aria-label": "Error"
+        })) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_2$4, toDisplayString(props.subText), 1)
+      ], 10, _hoisted_1$c)) : createCommentVNode("", true);
+    };
+  }
+});
+
+const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-78af6eac"]]);
+
+const _hoisted_1$b = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
+const _hoisted_2$3 = { class: "control" };
+const _hoisted_3$2 = {
+  key: 0,
+  class: "content"
+};
+const _hoisted_4$1 = { class: "label" };
+const _hoisted_5$1 = ["id"];
+const _hoisted_6$1 = { class: "subtext-wrapper" };
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "BaseCheckbox",
+  props: /* @__PURE__ */ mergeModels({
+    disabled: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
+    subText: {},
+    preserveSubTextSpace: { type: Boolean },
+    label: {},
+    title: {},
+    helperText: {}
+  }, {
+    "modelValue": { type: [Boolean, String], ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const helperId = useId();
+    const descriptionId = useId();
+    const isChecked = computed(() => modelValue.value === true);
+    const isIndeterminate = computed(() => modelValue.value === "indeterminate");
+    const icon = computed(() => {
+      if (isChecked.value) {
+        return "checkmark";
+      }
+      if (isIndeterminate.value) {
+        return "minus";
+      }
+      return null;
+    });
+    const ariaChecked = computed(() => {
+      if (isIndeterminate.value) {
+        return "mixed";
+      }
+      return isChecked.value;
+    });
+    const ariaDescribedBy = computed(() => {
+      const ids = [];
+      if (props.helperText) {
+        ids.push(helperId);
+      }
+      if (props.subText) {
+        ids.push(descriptionId);
+      }
+      return ids.length > 0 ? ids.join(" ") : void 0;
+    });
+    const handleClick = () => {
+      if (props.disabled) {
+        return;
+      }
+      modelValue.value = isIndeterminate.value ? true : !isChecked.value;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("button", {
+          class: normalizeClass({
+            checkbox: true,
+            checked: isChecked.value,
+            indeterminate: isIndeterminate.value,
+            disabled: props.disabled,
+            error: props.error
+          }),
+          disabled: props.disabled,
+          title: props.title,
+          "aria-label": props.title,
+          "aria-checked": ariaChecked.value,
+          "aria-describedby": ariaDescribedBy.value,
+          "aria-invalid": props.error,
+          type: "button",
+          role: "checkbox",
+          onClick: handleClick
+        }, [
+          createElementVNode("div", _hoisted_2$3, [
+            icon.value ? (openBlock(), createBlock(KdsIcon, {
+              key: 0,
+              name: icon.value,
+              class: "icon",
+              size: "xsmall"
+            }, null, 8, ["name"])) : createCommentVNode("", true)
+          ]),
+          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
+            createElementVNode("div", _hoisted_4$1, toDisplayString(props.label), 1),
+            props.helperText ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              id: unref(helperId),
+              class: "helper-text"
+            }, toDisplayString(props.helperText), 9, _hoisted_5$1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ], 10, _hoisted_1$b),
+        createElementVNode("div", _hoisted_6$1, [
+          createVNode(KdsSubText, {
+            id: unref(descriptionId),
+            "sub-text": props.subText,
+            "preserve-sub-text-space": props.preserveSubTextSpace,
+            error: props.error
+          }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
+        ])
+      ]);
+    };
+  }
+});
+
+const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-593a7b0c"]]);
+
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "KdsCheckbox",
+  props: /* @__PURE__ */ mergeModels({
+    disabled: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
+    subText: {},
+    preserveSubTextSpace: { type: Boolean, default: false },
+    label: {},
+    title: {}
+  }, {
+    "modelValue": { type: [Boolean, String], ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseCheckbox, {
+        modelValue: modelValue.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+        disabled: props.disabled,
+        error: props.error,
+        label: props.label,
+        title: props.title,
+        "sub-text": props.subText,
+        "preserve-sub-text-space": props.preserveSubTextSpace
+      }, null, 8, ["modelValue", "disabled", "error", "label", "title", "sub-text", "preserve-sub-text-space"]);
+    };
+  }
+});
 
 const createUnwrappedPromise = () => {
   let resolve = () => {
@@ -800,7 +806,7 @@ const useKdsDynamicModal = () => {
   };
 };
 
-const _hoisted_1$7 = {
+const _hoisted_1$a = {
   key: 1,
   class: "confirmation"
 };
@@ -809,7 +815,7 @@ const _hoisted_3$1 = {
   key: 0,
   class: "ask-again"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "KdsDynamicModalProvider",
   setup(__props) {
     const askAgain = ref(false);
@@ -862,16 +868,15 @@ const _sfc_main$7 = /* @__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$7, [
+            unref(internal).isTemplateBasedConfirm(unref(config).value) ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_1$a, [
               createElementVNode("div", _hoisted_2$2, toDisplayString(unref(config).value.message), 1),
               unref(config).value.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-                createVNode(KdsCheckbox, {
+                createVNode(_sfc_main$d, {
                   modelValue: askAgain.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
                   label: unref(config).value.doNotAskAgain.label,
-                  title: unref(config).value.doNotAskAgain.title,
-                  "helper-text": unref(config).value.doNotAskAgain.helperText
-                }, null, 8, ["modelValue", "label", "title", "helper-text"])
+                  "sub-text": unref(config).value.doNotAskAgain.subText
+                }, null, 8, ["modelValue", "label", "sub-text"])
               ])) : createCommentVNode("", true)
             ]))
           ]),
@@ -881,7 +886,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           name: "footer",
           fn: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(config).value.buttons, (button, index) => {
-              return openBlock(), createBlock(_sfc_main$e, {
+              return openBlock(), createBlock(_sfc_main$i, {
                 key: index,
                 destructive: button.destructive,
                 autofocus: button.autofocus,
@@ -911,10 +916,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-bd3a851b"]]);
+const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-c0769cfd"]]);
 
-const _hoisted_1$6 = ["data-style"];
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9 = ["data-style"];
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -939,12 +944,317 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           cy: "60",
           r: "50"
         }, null, -1)
-      ])], 10, _hoisted_1$6);
+      ])], 10, _hoisted_1$9);
+    };
+  }
+});
+
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-13c830ad"]]);
+
+const _hoisted_1$8 = ["disabled", "title", "aria-label", "aria-pressed"];
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "KdsVariableToggleButton",
+  props: /* @__PURE__ */ mergeModels({
+    disabled: { type: Boolean, default: false },
+    hidden: { type: Boolean, default: false },
+    inSet: { type: Boolean, default: false },
+    outSet: { type: Boolean, default: false },
+    error: { type: Boolean, default: false }
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const iconState = computed(() => {
+      if (props.inSet && props.outSet) {
+        return "in-out";
+      }
+      if (props.inSet) {
+        return "in";
+      }
+      if (props.outSet) {
+        return "out";
+      }
+      return "none";
+    });
+    const iconName = computed(() => {
+      switch (iconState.value) {
+        case "in":
+          return "flow-variable-in";
+        case "out":
+          return "flow-variable-out";
+        case "in-out":
+          return "flow-variable-in-out";
+        case "none":
+        default:
+          return "flow-variable-default";
+      }
+    });
+    const baseTitleByState = {
+      in: "Input Flow Variable",
+      out: "Output Flow Variable",
+      "in-out": "Input and Output Flow Variable",
+      none: "No Flow Variable set"
+    };
+    const errorTitleByState = {
+      in: "Error in input Flow Variable",
+      out: "Error in output Flow Variable",
+      "in-out": "Error in Flow Variables"
+    };
+    const title = computed(() => {
+      const baseTitle = baseTitleByState[iconState.value];
+      if (!props.error) {
+        return baseTitle;
+      }
+      return errorTitleByState[iconState.value] ?? baseTitle;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        class: normalizeClass({
+          "variable-toggle-button": true,
+          disabled: props.disabled,
+          error: props.error,
+          "pressed-or-set": modelValue.value || props.inSet || props.outSet,
+          hidden: props.hidden && !modelValue.value
+        }),
+        disabled: props.disabled,
+        title: title.value,
+        "aria-label": title.value,
+        "aria-pressed": modelValue.value,
+        type: "button",
+        onClick: _cache[0] || (_cache[0] = ($event) => modelValue.value = !modelValue.value)
+      }, [
+        createVNode(KdsIcon, {
+          name: iconName.value,
+          size: "xsmall"
+        }, null, 8, ["name"])
+      ], 10, _hoisted_1$8);
+    };
+  }
+});
+
+const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-8b6f8b81"]]);
+
+const _hoisted_1$7 = ["disabled", "aria-pressed"];
+const TITLE = "Click for more information";
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "KdsInfoToggleButton",
+  props: /* @__PURE__ */ mergeModels({
+    disabled: { type: Boolean, default: false },
+    hidden: { type: Boolean, default: false }
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        class: normalizeClass({
+          "info-toggle-button": true,
+          selected: modelValue.value,
+          disabled: props.disabled,
+          hidden: props.hidden && !modelValue.value
+        }),
+        disabled: props.disabled,
+        title: TITLE,
+        "aria-label": TITLE,
+        "aria-pressed": modelValue.value,
+        type: "button",
+        onClick: _cache[0] || (_cache[0] = ($event) => modelValue.value = !modelValue.value)
+      }, [
+        createVNode(KdsIcon, {
+          name: "circle-question",
+          size: "xsmall"
+        })
+      ], 10, _hoisted_1$7);
+    };
+  }
+});
+
+const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-24b40e36"]]);
+
+const getAppInstance = () => {
+  const currentInstance = getCurrentInstance();
+  return currentInstance?.appContext.app;
+};
+const resolveNuxtLinkComponent = () => {
+  const app = getAppInstance();
+  const nuxtLinkComponent = app?.component("NuxtLink");
+  if (nuxtLinkComponent) {
+    return nuxtLinkComponent;
+  }
+  const routerLinkComponent = app?.component("RouterLink");
+  if (routerLinkComponent) {
+    return routerLinkComponent;
+  }
+  const fallbackComponent = defineComponent({
+    props: {
+      to: {
+        type: String,
+        default: ""
+      }
+    },
+    render() {
+      return h("a", { href: this.to }, [useSlots().default?.()]);
+    }
+  });
+  return fallbackComponent;
+};
+
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "KdsLinkButton",
+  props: {
+    size: {},
+    disabled: { type: Boolean },
+    title: {},
+    variant: { default: "filled" },
+    label: {},
+    leadingIcon: {},
+    trailingIcon: {},
+    ariaLabel: {},
+    destructive: { type: Boolean },
+    to: {},
+    download: { type: Boolean, default: void 0 },
+    target: { default: null },
+    rel: { default: null }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const component = computed(() => {
+      if (props.disabled) {
+        return "button";
+      }
+      return resolveNuxtLinkComponent();
+    });
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseButton, mergeProps(props, {
+        component: component.value,
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
+      }), null, 16, ["component"]);
+    };
+  }
+});
+
+const _hoisted_1$6 = ["data-visible"];
+const _hoisted_2$1 = ["data-visible"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "KdsProgressButton",
+  props: /* @__PURE__ */ mergeModels({
+    size: { default: "medium" },
+    variant: { default: "filled" },
+    disabled: { type: Boolean, default: false },
+    label: {},
+    leadingIcon: {},
+    ariaLabel: {}
+  }, {
+    "state": {
+      default: "default"
+    },
+    "stateModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["click"], ["update:state"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const state = useModel(__props, "state");
+    const iconSize = computed(() => {
+      if (props.size === "xsmall") {
+        return "small";
+      }
+      return props.size;
+    });
+    function onClick(event) {
+      event.preventDefault();
+      if (state.value !== "default") {
+        return;
+      }
+      emit("click", event);
+    }
+    const baseButtonProps = computed(() => ({
+      variant: props.variant,
+      size: props.size,
+      disabled: props.disabled,
+      success: state.value === "success",
+      error: state.value === "error",
+      title: props.ariaLabel,
+      label: props.label,
+      leadingIcon: props.leadingIcon,
+      ariaLabel: props.ariaLabel
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseButton, mergeProps(baseButtonProps.value, {
+        class: "kds-progress-button",
+        "data-kds-progress-state": state.value,
+        onClick
+      }), {
+        leading: withCtx(() => [
+          createElementVNode("span", {
+            class: normalizeClass(["leading", iconSize.value])
+          }, [
+            createElementVNode("span", {
+              class: "leading-icon",
+              "data-visible": state.value !== "progress"
+            }, [
+              createVNode(KdsIcon, {
+                name: props.leadingIcon,
+                size: iconSize.value
+              }, null, 8, ["name", "size"])
+            ], 8, _hoisted_1$6),
+            createElementVNode("span", {
+              class: "spinner",
+              "data-visible": state.value === "progress"
+            }, [
+              createVNode(KdsLoadingSpinner, {
+                size: iconSize.value,
+                style: normalizeStyle(props.variant === "filled" ? "onPrimary" : "onSurface")
+              }, null, 8, ["size", "style"])
+            ], 8, _hoisted_2$1)
+          ], 2)
+        ]),
+        _: 1
+      }, 16, ["data-kds-progress-state"]);
     };
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-13c830ad"]]);
+const KdsProgressButton = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-6648b2f8"]]);
+
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "KdsToggleButton",
+  props: /* @__PURE__ */ mergeModels({
+    size: {},
+    disabled: { type: Boolean },
+    title: {},
+    variant: { default: "outlined" },
+    label: {},
+    leadingIcon: {},
+    trailingIcon: {},
+    ariaLabel: {}
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseButton, mergeProps(props, {
+        toggled: modelValue.value,
+        "aria-pressed": modelValue.value,
+        onClick: _cache[0] || (_cache[0] = ($event) => modelValue.value = !modelValue.value)
+      }), null, 16, ["toggled", "aria-pressed"]);
+    };
+  }
+});
 
 const KDS_DARK_MODE_STORAGE_KEY = "KNIME_DARK_MODE";
 const defaultMode = "light";
@@ -1066,37 +1376,96 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 
 const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-174d476a"]]);
 
-const _hoisted_1$4 = ["id"];
-const _hoisted_2$1 = { class: "subtext-text" };
+const _hoisted_1$4 = ["id", "aria-labelledby", "aria-describedby"];
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "KdsSubText",
-  props: {
+  __name: "KdsCheckboxGroup",
+  props: /* @__PURE__ */ mergeModels({
     id: {},
+    label: {},
+    possibleValues: {},
+    alignment: { default: "vertical" },
+    disabled: { type: Boolean, default: false },
     subText: {},
-    error: { type: Boolean, default: false },
-    preserveSubTextSpace: { type: Boolean, default: false }
-  },
+    preserveSubTextSpace: { type: Boolean }
+  }, {
+    "modelValue": { default: [] },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
   setup(__props) {
     const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const possibleValues = computed(
+      () => props.possibleValues.map((o) => {
+        if (typeof o === "string") {
+          return { text: o, id: o };
+        }
+        return o;
+      })
+    );
+    const labelId = useId();
+    const descriptionId = useId();
+    const isOptionDisabled = (index) => props.disabled || possibleValues.value[index]?.disabled === true;
+    const isHorizontal = computed(() => props.alignment === "horizontal");
+    const anyOptionHasError = computed(
+      () => possibleValues.value.some((o) => o.error)
+    );
+    const isChecked = (id) => modelValue.value.includes(id);
+    const handleCheckboxChange = (index, checked) => {
+      if (isOptionDisabled(index)) {
+        return;
+      }
+      const option = possibleValues.value[index];
+      if (checked === true) {
+        modelValue.value = [...modelValue.value, option.id];
+        return;
+      }
+      modelValue.value = modelValue.value.filter((v) => v !== option.id);
+    };
     return (_ctx, _cache) => {
-      return props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", {
-        key: 0,
+      return openBlock(), createElementBlock("div", {
         id: props.id,
-        class: normalizeClass({ subtext: true, error: props.error })
+        class: "checkbox-group",
+        role: "group",
+        "aria-labelledby": props.label ? unref(labelId) : void 0,
+        "aria-describedby": props.subText ? unref(descriptionId) : void 0
       }, [
-        props.error && props.subText ? (openBlock(), createBlock(KdsIcon, {
+        props.label ? (openBlock(), createBlock(KdsLabel, {
           key: 0,
-          name: "circle-error",
-          size: "small",
-          "aria-label": "Error"
-        })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$1, toDisplayString(props.subText), 1)
-      ], 10, _hoisted_1$4)) : createCommentVNode("", true);
+          id: unref(labelId),
+          label: props.label
+        }, null, 8, ["id", "label"])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass({ options: true, horizontal: isHorizontal.value })
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(possibleValues.value, (option, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: option.id,
+              class: "option"
+            }, [
+              createVNode(BaseCheckbox, {
+                disabled: props.disabled || option.disabled,
+                error: option.error,
+                "helper-text": option.helperText,
+                label: option.text,
+                "model-value": isChecked(option.id),
+                "onUpdate:modelValue": (checked) => handleCheckboxChange(index, checked)
+              }, null, 8, ["disabled", "error", "helper-text", "label", "model-value", "onUpdate:modelValue"])
+            ]);
+          }), 128))
+        ], 2),
+        createVNode(KdsSubText, {
+          id: unref(descriptionId),
+          "sub-text": props.subText,
+          "preserve-sub-text-space": props.preserveSubTextSpace,
+          error: anyOptionHasError.value
+        }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
+      ], 8, _hoisted_1$4);
     };
   }
 });
 
-const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-8fccdd6d"]]);
+const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-4363a8f9"]]);
 
 const _hoisted_1$3 = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
 const _hoisted_2 = { class: "control" };
@@ -1172,7 +1541,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-f6d4be71"]]);
+const KdsRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-a7490a52"]]);
 
 const useRadioSelection = ({
   selectedId,
@@ -1379,7 +1748,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-8c13f6fe"]]);
+const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-b0e27ba1"]]);
 
 const _hoisted_1$1 = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -1585,7 +1954,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f62881a3"]]);
+const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e5da4485"]]);
 
-export { _sfc_main$e as KdsButton, KdsCheckbox, KdsDataType, KdsDynamicModalProvider, KdsIcon, KdsLabel, _sfc_main$d as KdsLinkButton, KdsLoadingSpinner, KdsModal, KdsModalLayout, KdsRadioButtonGroup, KdsSubText, _sfc_main$c as KdsToggleButton, KdsValueSwitch, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { _sfc_main$i as KdsButton, _sfc_main$d as KdsCheckbox, KdsCheckboxGroup, KdsDataType, KdsDynamicModalProvider, KdsIcon, KdsInfoToggleButton, KdsLabel, _sfc_main$8 as KdsLinkButton, KdsLoadingSpinner, KdsModal, KdsModalLayout, KdsProgressButton, KdsRadioButtonGroup, KdsSubText, _sfc_main$6 as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map