@knime/kds-components 0.26.1 → 0.27.0

package/dist/index.js

@@ -10,8 +10,8 @@ import './index.css';const kdsAvatarSize = {
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
 const _hoisted_1$$ = ["role", "title", "aria-hidden", "aria-label", "data-color"];
-const _hoisted_2$A = ["src"];
-const _hoisted_3$r = {
+const _hoisted_2$C = ["src"];
+const _hoisted_3$t = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
@@ -40,6 +40,9 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
       "brown"
     ];
     const getAvatarColor = (initials) => {
+      if (initials === "") {
+        return "empty";
+      }
       const hash = initials.toUpperCase().split("").reduce((acc, char) => acc + (char.codePointAt(0) ?? 0), 0);
       return availableAvatarColors[hash % availableAvatarColors.length];
     };
@@ -58,7 +61,7 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
     const accessibleTitle = computed(() => props.title?.trim() ?? "");
     const hasTitle = computed(() => accessibleTitle.value.length > 0);
     const displayedInitials = computed(
-      () => props.initials.trim().slice(0, 2).toUpperCase()
+      () => (props.initials ?? "").trim().slice(0, 2).toUpperCase()
     );
     const avatarColor = computed(() => getAvatarColor(displayedInitials.value));
     return (_ctx, _cache) => {
@@ -77,7 +80,7 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$A)) : (openBlock(), createElementBlock("div", _hoisted_3$r, [
+        }, null, 40, _hoisted_2$C)) : (openBlock(), createElementBlock("div", _hoisted_3$t, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
       ], 10, _hoisted_1$$);
@@ -93,11 +96,11 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["__scopeId", "data-v-681eadc1"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["__scopeId", "data-v-9e1a5abe"]]);
 
 const _hoisted_1$_ = ["aria-label"];
-const _hoisted_2$z = { class: "avatars" };
-const _hoisted_3$q = {
+const _hoisted_2$B = { class: "avatars" };
+const _hoisted_3$s = {
   key: 0,
   class: "more-count",
   "aria-hidden": "true"
@@ -122,7 +125,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
         role: "group",
         "aria-label": ariaLabel.value
       }, [
-        createElementVNode("div", _hoisted_2$z, [
+        createElementVNode("div", _hoisted_2$B, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.avatars, (avatar, index) => {
             return openBlock(), createBlock(KdsAvatar, {
               key: index,
@@ -136,7 +139,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
             }, null, 8, ["style", "size", "initials", "title", "src"]);
           }), 128))
         ]),
-        __props.moreCount > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$q, " +" + toDisplayString(__props.moreCount), 1)) : createCommentVNode("", true)
+        __props.moreCount > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$s, " +" + toDisplayString(__props.moreCount), 1)) : createCommentVNode("", true)
       ], 8, _hoisted_1$_);
     };
   }
@@ -870,7 +873,7 @@ function useKdsIsTruncated(elementRef) {
 }
 
 const _hoisted_1$W = ["title", "aria-label"];
-const _hoisted_2$y = ["title"];
+const _hoisted_2$A = ["title"];
 const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
@@ -900,7 +903,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? __props.label : void 0
-        }, toDisplayString(__props.label), 9, _hoisted_2$y)) : createCommentVNode("", true)
+        }, toDisplayString(__props.label), 9, _hoisted_2$A)) : createCommentVNode("", true)
       ], 10, _hoisted_1$W);
     };
   }
@@ -964,9 +967,9 @@ const kdsLoadingSpinnerVariants = Object.values(
 );
 
 const _hoisted_1$U = ["role"];
-const _hoisted_2$x = { class: "header" };
-const _hoisted_3$p = { class: "headline" };
-const _hoisted_4$j = {
+const _hoisted_2$z = { class: "header" };
+const _hoisted_3$r = { class: "headline" };
+const _hoisted_4$l = {
   key: 0,
   class: "body"
 };
@@ -1001,15 +1004,15 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         role: role.value
       }, [
-        createElementVNode("div", _hoisted_2$x, [
+        createElementVNode("div", _hoisted_2$z, [
           createVNode(KdsIcon, {
             class: "icon",
             name: iconName.value,
             size: "small"
           }, null, 8, ["name"]),
-          createElementVNode("div", _hoisted_3$p, toDisplayString(props.headline), 1)
+          createElementVNode("div", _hoisted_3$r, toDisplayString(props.headline), 1)
         ]),
-        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$j, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$l, toDisplayString(props.description), 1)) : createCommentVNode("", true)
       ], 10, _hoisted_1$U);
     };
   }
@@ -1026,16 +1029,16 @@ const kdsInlineMessageVariant = {
 const kdsInlineMessageVariants = Object.values(kdsInlineMessageVariant);
 
 const _hoisted_1$T = { class: "donut-container" };
-const _hoisted_2$w = ["height", "width", "viewBox"];
-const _hoisted_3$o = ["r", "stroke-width"];
-const _hoisted_4$i = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
-const _hoisted_5$9 = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
-const _hoisted_6$8 = {
+const _hoisted_2$y = ["height", "width", "viewBox"];
+const _hoisted_3$q = ["r", "stroke-width"];
+const _hoisted_4$k = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
+const _hoisted_5$b = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
+const _hoisted_6$9 = {
   key: 0,
   class: "donut-text"
 };
-const _hoisted_7$3 = { class: "title" };
-const _hoisted_8$2 = {
+const _hoisted_7$4 = { class: "title" };
+const _hoisted_8$3 = {
   key: 0,
   class: "sub-text"
 };
@@ -1104,7 +1107,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
             r: r.value,
             "stroke-width": backgroundStrokeWidth.value,
             fill: "transparent"
-          }, null, 8, _hoisted_3$o),
+          }, null, 8, _hoisted_3$q),
           __props.secondaryValue && !disabled.value ? (openBlock(), createElementBlock("circle", {
             key: 0,
             class: normalizeClass(["value-wedge", "secondary-circle", { animate: __props.animate }]),
@@ -1116,7 +1119,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
             "stroke-dashoffset": secondaryStrokeDashOffset.value,
             fill: "transparent",
             transform: transformWedge.value
-          }, null, 10, _hoisted_4$i)) : createCommentVNode("", true),
+          }, null, 10, _hoisted_4$k)) : createCommentVNode("", true),
           !disabled.value ? (openBlock(), createElementBlock("circle", {
             key: 1,
             class: normalizeClass(["value-wedge", "primary-circle", { animate: __props.animate }]),
@@ -1128,11 +1131,11 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
             "stroke-dashoffset": strokeDashOffset.value,
             fill: "transparent",
             transform: transformWedge.value
-          }, null, 10, _hoisted_5$9)) : createCommentVNode("", true)
-        ], 8, _hoisted_2$w)),
-        __props.title ? (openBlock(), createElementBlock("div", _hoisted_6$8, [
-          createElementVNode("div", _hoisted_7$3, toDisplayString(__props.title), 1),
-          __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$2, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
+          }, null, 10, _hoisted_5$b)) : createCommentVNode("", true)
+        ], 8, _hoisted_2$y)),
+        __props.title ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
+          createElementVNode("div", _hoisted_7$4, toDisplayString(__props.title), 1),
+          __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$3, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -1526,7 +1529,7 @@ function prettyBytes(number, options) {
 }
 
 const _hoisted_1$Q = { class: "label" };
-const _hoisted_2$v = {
+const _hoisted_2$x = {
   key: 1,
   class: "file-size"
 };
@@ -1626,7 +1629,7 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
             name: "external-link",
             size: "xsmall"
           })) : createCommentVNode("", true),
-          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$v, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
+          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$x, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["class", "to", "download", "target", "rel", "title", "aria-disabled"]);
@@ -1673,7 +1676,7 @@ const kdsToggleButtonVariant = {
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
 const _hoisted_1$P = ["data-visible"];
-const _hoisted_2$u = ["data-visible"];
+const _hoisted_2$w = ["data-visible"];
 const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
@@ -1744,7 +1747,7 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
                 size: iconSize.value,
                 variant: __props.variant === "filled" ? "onPrimary" : "onSurface"
               }, null, 8, ["size", "variant"])
-            ], 8, _hoisted_2$u)
+            ], 8, _hoisted_2$w)
           ], 2)
         ]),
         _: 1
@@ -2024,23 +2027,23 @@ const kdsListItemAccessorySize = {
 };
 
 const _hoisted_1$O = ["id", "role", "aria-selected", "aria-disabled"];
-const _hoisted_2$t = {
+const _hoisted_2$v = {
   key: 0,
   class: "accessory"
 };
-const _hoisted_3$n = { class: "content" };
-const _hoisted_4$h = ["title"];
-const _hoisted_5$8 = {
+const _hoisted_3$p = { class: "content" };
+const _hoisted_4$j = ["title"];
+const _hoisted_5$a = {
   key: 0,
   class: "prefix"
 };
-const _hoisted_6$7 = ["title"];
-const _hoisted_7$2 = { class: "trailing-item" };
-const _hoisted_8$1 = {
+const _hoisted_6$8 = ["title"];
+const _hoisted_7$3 = { class: "trailing-item" };
+const _hoisted_8$2 = {
   key: 0,
   class: "shortcut"
 };
-const _hoisted_9$1 = {
+const _hoisted_9$2 = {
   key: 3,
   class: "trailing-item-reserve-space"
 };
@@ -2102,35 +2105,35 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
         ]),
         onClick
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$t, [
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$v, [
           createVNode(_sfc_main$1g, {
             accessory: props.accessory,
             size: accessorySize.value,
             disabled: __props.disabled
           }, null, 8, ["accessory", "size", "disabled"])
         ])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_3$n, [
+        createElementVNode("span", _hoisted_3$p, [
           createElementVNode("span", {
             ref_key: "labelEl",
             ref: labelEl,
             class: "label",
             title: unref(isLabelTruncated) ? props.text : void 0
           }, [
-            __props.missing ? (openBlock(), createElementBlock("span", _hoisted_5$8, "(Missing) ")) : createCommentVNode("", true),
+            __props.missing ? (openBlock(), createElementBlock("span", _hoisted_5$a, "(Missing) ")) : createCommentVNode("", true),
             createElementVNode("span", {
               class: normalizeClass({ special: __props.special })
             }, toDisplayString(props.text), 3)
-          ], 8, _hoisted_4$h),
+          ], 8, _hoisted_4$j),
           props.subText ? (openBlock(), createElementBlock("span", {
             key: 0,
             ref_key: "subtextEl",
             ref: subtextEl,
             class: "subtext",
             title: unref(isSubtextTruncated) ? props.subText : void 0
-          }, toDisplayString(props.subText), 9, _hoisted_6$7)) : createCommentVNode("", true)
+          }, toDisplayString(props.subText), 9, _hoisted_6$8)) : createCommentVNode("", true)
         ]),
-        createElementVNode("span", _hoisted_7$2, [
-          props.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_8$1, toDisplayString(props.shortcut), 1)) : props.badge ? (openBlock(), createBlock(KdsBadge, {
+        createElementVNode("span", _hoisted_7$3, [
+          props.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_8$2, toDisplayString(props.shortcut), 1)) : props.badge ? (openBlock(), createBlock(KdsBadge, {
             key: 1,
             size: badgeSize.value,
             label: props.badge.label,
@@ -2141,7 +2144,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
             size: "small",
             name: props.trailingIcon
           }, null, 8, ["name"])) : createCommentVNode("", true),
-          !props.shortcut && !props.trailingIcon && !props.badge ? (openBlock(), createElementBlock("span", _hoisted_9$1)) : createCommentVNode("", true)
+          !props.shortcut && !props.trailingIcon && !props.badge ? (openBlock(), createElementBlock("span", _hoisted_9$2)) : createCommentVNode("", true)
         ])
       ], 10, _hoisted_1$O);
     };
@@ -2151,11 +2154,11 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
 const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["__scopeId", "data-v-9625480f"]]);
 
 const _hoisted_1$N = { class: "kds-list-item-section-title" };
-const _hoisted_2$s = {
+const _hoisted_2$u = {
   key: 0,
   class: "icon"
 };
-const _hoisted_3$m = ["title"];
+const _hoisted_3$o = ["title"];
 const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   __name: "ListItemSectionTitle",
   props: {
@@ -2168,7 +2171,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$N, [
-        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$s, [
+        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$u, [
           createVNode(KdsIcon, {
             name: props.leadingIcon,
             size: "small"
@@ -2179,7 +2182,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_3$m)
+        }, toDisplayString(props.label), 9, _hoisted_3$o)
       ]);
     };
   }
@@ -2325,7 +2328,7 @@ const kdsPopoverType = {
   AUTO: "auto"};
 
 const _hoisted_1$L = ["id", "popover", "role"];
-const _hoisted_2$r = {
+const _hoisted_2$t = {
   key: 0,
   class: "kds-popover-default-content"
 };
@@ -2387,7 +2390,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
         onToggle
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$r, toDisplayString(props.content), 1)) : createCommentVNode("", true)
+          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$t, toDisplayString(props.content), 1)) : createCommentVNode("", true)
         ], true)
       ], 46, _hoisted_1$L);
     };
@@ -2588,12 +2591,12 @@ const kdsButtonVariant = {
 const kdsButtonVariants = Object.values(kdsButtonVariant);
 
 const _hoisted_1$K = ["aria-disabled"];
-const _hoisted_2$q = { class: "kds-empty-state-headline" };
-const _hoisted_3$l = {
+const _hoisted_2$s = { class: "kds-empty-state-headline" };
+const _hoisted_3$n = {
   key: 1,
   class: "kds-empty-state-description"
 };
-const _hoisted_4$g = {
+const _hoisted_4$i = {
   key: 2,
   class: "kds-empty-state-action"
 };
@@ -2635,9 +2638,9 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("p", _hoisted_2$q, toDisplayString(props.headline), 1),
-        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$l, toDisplayString(props.description), 1)) : createCommentVNode("", true),
-        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$g, [
+        createElementVNode("p", _hoisted_2$s, toDisplayString(props.headline), 1),
+        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$n, toDisplayString(props.description), 1)) : createCommentVNode("", true),
+        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$i, [
           (openBlock(), createBlock(resolveDynamicComponent(buttonComponent.value), mergeProps(props.button, {
             disabled: props.button?.disabled || __props.disabled,
             onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && emit("buttonClick", $event))
@@ -2941,11 +2944,11 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$I = { class: "kds-preview-list" };
-const _hoisted_2$p = { class: "kds-preview-list-title-row" };
-const _hoisted_3$k = { class: "kds-preview-list-content" };
-const _hoisted_4$f = { class: "kds-preview-list-headline" };
-const _hoisted_5$7 = ["aria-label"];
-const _hoisted_6$6 = { class: "kds-preview-list-show-hide" };
+const _hoisted_2$r = { class: "kds-preview-list-title-row" };
+const _hoisted_3$m = { class: "kds-preview-list-content" };
+const _hoisted_4$h = { class: "kds-preview-list-headline" };
+const _hoisted_5$9 = ["aria-label"];
+const _hoisted_6$7 = { class: "kds-preview-list-show-hide" };
 const DEFAULT_MAX_VISIBLE_ITEMS = 6;
 const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   __name: "KdsPreviewList",
@@ -2982,7 +2985,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("section", _hoisted_1$I, [
-        createElementVNode("header", _hoisted_2$p, [
+        createElementVNode("header", _hoisted_2$r, [
           __props.loading && !expanded.value ? (openBlock(), createBlock(KdsLoadingSpinner, {
             key: 0,
             size: "small",
@@ -2992,8 +2995,8 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
             name: __props.leadingIcon,
             size: "small"
           }, null, 8, ["name"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_3$k, [
-            createElementVNode("span", _hoisted_4$f, toDisplayString(props.headline), 1)
+          createElementVNode("div", _hoisted_3$m, [
+            createElementVNode("span", _hoisted_4$h, toDisplayString(props.headline), 1)
           ]),
           __props.trailingButton ? (openBlock(), createBlock(_sfc_main$1l, normalizeProps(mergeProps({ key: 2 }, trailingButtonProps.value)), null, 16)) : createCommentVNode("", true)
         ]),
@@ -3028,11 +3031,11 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
                 }, ["stop"]))
               }, null, 8, ["id", "text", "accessory"]);
             }), 128))
-          ], 8, _hoisted_5$7)) : createCommentVNode("", true)
+          ], 8, _hoisted_5$9)) : createCommentVNode("", true)
         ], 512), [
           [vShow, expanded.value]
         ]),
-        createElementVNode("footer", _hoisted_6$6, [
+        createElementVNode("footer", _hoisted_6$7, [
           createVNode(_sfc_main$1l, {
             class: "kds-preview-list-toggle",
             label: expanded.value ? "Hide all" : "Show all",
@@ -3052,7 +3055,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 const KdsPreviewList = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-a11103f6"]]);
 
 const _hoisted_1$H = { class: "kds-label-wrapper" };
-const _hoisted_2$o = ["id", "for", "title"];
+const _hoisted_2$q = ["id", "for", "title"];
 const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "KdsLabel",
   props: {
@@ -3078,7 +3081,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
           for: props.for,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$o),
+        }, toDisplayString(props.label), 9, _hoisted_2$q),
         props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
           key: 0,
           content: props.description,
@@ -3092,7 +3095,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
 const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-efe3313e"]]);
 
 const _hoisted_1$G = ["id"];
-const _hoisted_2$n = { class: "subtext-text" };
+const _hoisted_2$p = { class: "subtext-text" };
 const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
@@ -3124,7 +3127,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$n, toDisplayString(props.subText), 1)
+        createElementVNode("span", _hoisted_2$p, toDisplayString(props.subText), 1)
       ], 10, _hoisted_1$G)) : createCommentVNode("", true);
     };
   }
@@ -3133,14 +3136,14 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
 const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-2e6ba10c"]]);
 
 const _hoisted_1$F = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$m = { class: "control" };
-const _hoisted_3$j = {
+const _hoisted_2$o = { class: "control" };
+const _hoisted_3$l = {
   key: 0,
   class: "content"
 };
-const _hoisted_4$e = { class: "label" };
-const _hoisted_5$6 = ["id"];
-const _hoisted_6$5 = {
+const _hoisted_4$g = { class: "label" };
+const _hoisted_5$8 = ["id"];
+const _hoisted_6$6 = {
   key: 0,
   class: "subtext-wrapper"
 };
@@ -3217,7 +3220,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
           role: "checkbox",
           onClick: handleClick
         }, [
-          createElementVNode("div", _hoisted_2$m, [
+          createElementVNode("div", _hoisted_2$o, [
             icon.value ? (openBlock(), createBlock(KdsIcon, {
               key: 0,
               name: icon.value,
@@ -3225,16 +3228,16 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
               size: "xsmall"
             }, null, 8, ["name"])) : createCommentVNode("", true)
           ]),
-          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$j, [
-            createElementVNode("div", _hoisted_4$e, toDisplayString(props.label), 1),
+          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$l, [
+            createElementVNode("div", _hoisted_4$g, toDisplayString(props.label), 1),
             props.helperText ? (openBlock(), createElementBlock("div", {
               key: 0,
               id: unref(helperId),
               class: "helper-text"
-            }, toDisplayString(props.helperText), 9, _hoisted_5$6)) : createCommentVNode("", true)
+            }, toDisplayString(props.helperText), 9, _hoisted_5$8)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ], 10, _hoisted_1$F),
-        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$5, [
+        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
             "sub-text": props.subText,
@@ -3280,9 +3283,9 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$E = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby"];
-const _hoisted_2$l = ["id"];
-const _hoisted_3$i = ["title"];
-const _hoisted_4$d = { class: "kds-fieldset-content" };
+const _hoisted_2$n = ["id"];
+const _hoisted_3$k = ["title"];
+const _hoisted_4$f = { class: "kds-fieldset-content" };
 const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "BaseFieldsetWrapper",
   props: {
@@ -3329,14 +3332,14 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
             ref: legendTextEl,
             class: "legend-text",
             title: unref(isTruncated) ? props.label : void 0
-          }, toDisplayString(props.label), 9, _hoisted_3$i),
+          }, toDisplayString(props.label), 9, _hoisted_3$k),
           props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
             key: 0,
             content: props.description,
             hidden: !isHovered.value
           }, null, 8, ["content", "hidden"])) : createCommentVNode("", true)
-        ], 8, _hoisted_2$l)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_4$d, [
+        ], 8, _hoisted_2$n)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_4$f, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
         createVNode(KdsSubText, {
@@ -3449,17 +3452,17 @@ const kdsCheckboxValue = {
 const kdsCheckboxValues = Object.values(kdsCheckboxValue);
 
 const _hoisted_1$D = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
-const _hoisted_2$k = { class: "control" };
-const _hoisted_3$h = {
+const _hoisted_2$m = { class: "control" };
+const _hoisted_3$j = {
   key: 0,
   class: "dot",
   viewBox: "0 0 2 2",
   "aria-hidden": "true",
   focusable: "false"
 };
-const _hoisted_4$c = { class: "content" };
-const _hoisted_5$5 = { class: "label" };
-const _hoisted_6$4 = ["id"];
+const _hoisted_4$e = { class: "content" };
+const _hoisted_5$7 = { class: "label" };
+const _hoisted_6$5 = ["id"];
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButton",
   props: /* @__PURE__ */ mergeModels({
@@ -3500,8 +3503,8 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
         type: "button",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$k, [
-          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$h, [..._cache[0] || (_cache[0] = [
+        createElementVNode("div", _hoisted_2$m, [
+          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$j, [..._cache[0] || (_cache[0] = [
             createElementVNode("circle", {
               cx: "1",
               cy: "1",
@@ -3509,13 +3512,13 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
             }, null, -1)
           ])])) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_4$c, [
-          createElementVNode("div", _hoisted_5$5, toDisplayString(props.text), 1),
+        createElementVNode("div", _hoisted_4$e, [
+          createElementVNode("div", _hoisted_5$7, toDisplayString(props.text), 1),
           props.helperText ? (openBlock(), createElementBlock("div", {
             key: 0,
             id: `${unref(id)}-helper`,
             class: "helper-text"
-          }, toDisplayString(props.helperText), 9, _hoisted_6$4)) : createCommentVNode("", true)
+          }, toDisplayString(props.helperText), 9, _hoisted_6$5)) : createCommentVNode("", true)
         ])
       ], 10, _hoisted_1$D);
     };
@@ -3833,6 +3836,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   props: /* @__PURE__ */ mergeModels({
     id: {},
     label: {},
+    ariaLabel: {},
     possibleValues: {},
     size: { default: "medium" },
     variant: { default: "default" },
@@ -3875,6 +3879,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
         ref_key: "fieldsetWrapper",
         ref: fieldsetWrapper,
         label: props.label,
+        ariaLabel: props.ariaLabel,
         role: "radiogroup",
         class: normalizeClass({
           "value-switch": true,
@@ -3910,12 +3915,12 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
           ], 2)
         ]),
         _: 1
-      }, 8, ["id", "label", "class", "aria-invalid", "sub-text", "preserve-sub-text-space", "error"]);
+      }, 8, ["id", "label", "ariaLabel", "class", "aria-invalid", "sub-text", "preserve-sub-text-space", "error"]);
     };
   }
 });
 
-const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-640271e0"]]);
+const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-f6d51795"]]);
 
 const kdsRadioButtonGroupAlignment = {
   VERTICAL: "vertical",
@@ -4671,17 +4676,17 @@ const _hoisted_1$B = {
   key: 0,
   class: "icon-wrapper leading"
 };
-const _hoisted_2$j = {
+const _hoisted_2$l = {
   key: 1,
   class: "leading-slot"
 };
-const _hoisted_3$g = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "pattern", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded", "aria-autocomplete"];
-const _hoisted_4$b = ["aria-disabled"];
-const _hoisted_5$4 = {
+const _hoisted_3$i = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "pattern", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded", "aria-autocomplete"];
+const _hoisted_4$d = ["aria-disabled"];
+const _hoisted_5$6 = {
   key: 4,
   class: "trailing-slot"
 };
-const _hoisted_6$3 = {
+const _hoisted_6$4 = {
   key: 5,
   class: "icon-wrapper trailing"
 };
@@ -4842,7 +4847,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             name: props.leadingIcon
           }, null, 8, ["name"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$j, [
+        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$l, [
           renderSlot(_ctx.$slots, "leading", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -4887,7 +4892,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
           onCut: handleInputCut,
           onDrop: handleInputDrop,
           onDragend: handleInputDragEnd
-        }, null, 42, _hoisted_3$g),
+        }, null, 42, _hoisted_3$i),
         props.unit ? (openBlock(), createElementBlock("span", {
           key: 2,
           class: normalizeClass({
@@ -4896,7 +4901,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled
           }),
           "aria-disabled": __props.disabled || void 0
-        }, toDisplayString(props.unit), 11, _hoisted_4$b)) : createCommentVNode("", true),
+        }, toDisplayString(props.unit), 11, _hoisted_4$d)) : createCommentVNode("", true),
         __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$1l, {
           key: 3,
           class: "clear-button",
@@ -4907,10 +4912,10 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
           title: "Clear",
           onClick: withModifiers(clearAndFocusInput, ["stop"])
         })) : createCommentVNode("", true),
-        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
+        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$6, [
           renderSlot(_ctx.$slots, "trailing", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        props.trailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
+        props.trailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
           createVNode(KdsIcon, {
             name: props.trailingIcon
           }, null, 8, ["name"])
@@ -5723,8 +5728,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
 const ColorPickerSlider = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-f4be2bd4"]]);
 
 const _hoisted_1$z = { class: "kds-color-picker" };
-const _hoisted_2$i = ["aria-valuetext"];
-const _hoisted_3$f = { class: "value-inputs" };
+const _hoisted_2$k = ["aria-valuetext"];
+const _hoisted_3$h = { class: "value-inputs" };
 const DEFAULT_HUE_DEG = 270;
 const DEFAULT_SATURATION = 0.8;
 const DEFAULT_VALUE = 0.9;
@@ -5914,7 +5919,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             class: "handle",
             style: normalizeStyle(colorspaceHandleStyle.value)
           }, null, 4)
-        ], 44, _hoisted_2$i),
+        ], 44, _hoisted_2$k),
         createVNode(ColorPickerSlider, {
           modelValue: hue.value,
           "onUpdate:modelValue": [
@@ -5949,7 +5954,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           step: KEYBOARD_STEP,
           "large-step": KEYBOARD_LARGE_STEP
         }, null, 8, ["modelValue", "value-now", "value-text"]),
-        createElementVNode("div", _hoisted_3$f, [
+        createElementVNode("div", _hoisted_3$h, [
           createVNode(KdsTextInput, {
             "model-value": hexInputValue.value,
             ariaLabel: "Color hex value",
@@ -10265,9 +10270,9 @@ const _hoisted_1$y = {
   role: "row",
   class: "kds-date-picker-header-row"
 };
-const _hoisted_2$h = ["aria-label"];
-const _hoisted_3$e = { class: "kds-date-picker-day-grid" };
-const _hoisted_4$a = ["aria-selected", "aria-disabled", "aria-label", "disabled", "tabindex", "onClick", "onFocus"];
+const _hoisted_2$j = ["aria-label"];
+const _hoisted_3$g = { class: "kds-date-picker-day-grid" };
+const _hoisted_4$c = ["aria-selected", "aria-disabled", "aria-label", "disabled", "tabindex", "onClick", "onFocus"];
 const REFERENCE_YEAR$2 = 2024;
 const DAYS_PER_WEEK = 7;
 const TOTAL_CELLS = 42;
@@ -10573,10 +10578,10 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
               role: "columnheader",
               "aria-label": unref(DAY_FULL_LABELS)[i],
               class: "kds-date-picker-weekday"
-            }, toDisplayString(day), 9, _hoisted_2$h);
+            }, toDisplayString(day), 9, _hoisted_2$j);
           }), 128))
         ]),
-        createElementVNode("div", _hoisted_3$e, [
+        createElementVNode("div", _hoisted_3$g, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(weeks.value, (week, wi) => {
             return openBlock(), createElementBlock("div", {
               key: wi,
@@ -10605,7 +10610,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                   onClick: ($event) => selectDate(day),
                   onKeydown: onDayKeydown,
                   onFocus: ($event) => onDayFocus(day)
-                }, toDisplayString(day.day), 43, _hoisted_4$a);
+                }, toDisplayString(day.day), 43, _hoisted_4$c);
               }), 128))
             ]);
           }), 128))
@@ -10995,15 +11000,15 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
 const DatePickerYearGrid = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-270d55b9"]]);
 
 const _hoisted_1$v = { class: "kds-date-picker" };
-const _hoisted_2$g = { class: "kds-date-picker-header" };
-const _hoisted_3$d = { class: "kds-date-picker-nav-block" };
-const _hoisted_4$9 = {
+const _hoisted_2$i = { class: "kds-date-picker-header" };
+const _hoisted_3$f = { class: "kds-date-picker-nav-block" };
+const _hoisted_4$b = {
   key: 1,
   class: "kds-date-picker-header-static-label",
   "aria-live": "polite"
 };
-const _hoisted_5$3 = { class: "kds-date-picker-nav-block" };
-const _hoisted_6$2 = { class: "kds-date-picker-body" };
+const _hoisted_5$5 = { class: "kds-date-picker-nav-block" };
+const _hoisted_6$3 = { class: "kds-date-picker-body" };
 const MONTHS_PER_YEAR = 12;
 const YEAR_PAGE_SIZE = 15;
 const REFERENCE_YEAR = 2024;
@@ -11204,8 +11209,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     __expose({ focus });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$v, [
-        createElementVNode("div", _hoisted_2$g, [
-          createElementVNode("div", _hoisted_3$d, [
+        createElementVNode("div", _hoisted_2$i, [
+          createElementVNode("div", _hoisted_3$f, [
             view.value === "day" ? (openBlock(), createBlock(_sfc_main$1l, {
               key: 0,
               variant: "transparent",
@@ -11231,8 +11236,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             size: "small",
             label: headerLabel.value,
             onClick: onHeaderLabelClick
-          }, null, 8, ["label"])) : (openBlock(), createElementBlock("div", _hoisted_4$9, toDisplayString(headerLabel.value), 1)),
-          createElementVNode("div", _hoisted_5$3, [
+          }, null, 8, ["label"])) : (openBlock(), createElementBlock("div", _hoisted_4$b, toDisplayString(headerLabel.value), 1)),
+          createElementVNode("div", _hoisted_5$5, [
             createVNode(_sfc_main$1l, {
               variant: "transparent",
               size: "small",
@@ -11252,7 +11257,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             }, null, 8, ["disabled"])) : createCommentVNode("", true)
           ])
         ]),
-        createElementVNode("div", _hoisted_6$2, [
+        createElementVNode("div", _hoisted_6$3, [
           view.value === "day" ? (openBlock(), createBlock(DatePickerDayGrid, {
             key: 0,
             ref_key: "dayGridRef",
@@ -12239,18 +12244,18 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
 const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-8e5a54cf"]]);
 
 const _hoisted_1$s = { class: "kds-time-picker" };
-const _hoisted_2$f = { class: "kds-time-picker-selected-time" };
-const _hoisted_3$c = { class: "kds-time-picker-fields" };
-const _hoisted_4$8 = { class: "kds-time-picker-fields" };
-const _hoisted_5$2 = {
+const _hoisted_2$h = { class: "kds-time-picker-selected-time" };
+const _hoisted_3$e = { class: "kds-time-picker-fields" };
+const _hoisted_4$a = { class: "kds-time-picker-fields" };
+const _hoisted_5$4 = {
   key: 0,
   class: "kds-time-picker-fields"
 };
-const _hoisted_6$1 = {
+const _hoisted_6$2 = {
   key: 1,
   class: "kds-time-picker-actions"
 };
-const _hoisted_7$1 = {
+const _hoisted_7$2 = {
   key: 2,
   class: "kds-time-picker-actions"
 };
@@ -12360,8 +12365,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     __expose({ focus });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$s, [
-        createElementVNode("div", _hoisted_2$f, toDisplayString(selectedTimeLabel.value), 1),
-        createElementVNode("div", _hoisted_3$c, [
+        createElementVNode("div", _hoisted_2$h, toDisplayString(selectedTimeLabel.value), 1),
+        createElementVNode("div", _hoisted_3$e, [
           createVNode(_sfc_main$T, {
             ref: "hourInput",
             modelValue: hour.value,
@@ -12387,7 +12392,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           class: "kds-time-picker-divider"
         })) : createCommentVNode("", true),
         showSecondInput.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createElementVNode("div", _hoisted_4$8, [
+          createElementVNode("div", _hoisted_4$a, [
             createVNode(_sfc_main$T, {
               ref: "secondInput",
               modelValue: second.value,
@@ -12407,7 +12412,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               onClick: removeSeconds
             })
           ]),
-          showMillisecondInput.value ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
+          showMillisecondInput.value ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
             createVNode(_sfc_main$T, {
               ref: "millisecondInput",
               modelValue: millisecond.value,
@@ -12429,7 +12434,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               title: "Remove milliseconds",
               onClick: removeMilliseconds
             })
-          ])) : __props.maxGranularity === "millisecond" ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
+          ])) : __props.maxGranularity === "millisecond" ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
             createVNode(_sfc_main$1l, {
               variant: "outlined",
               size: "small",
@@ -12438,7 +12443,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               onClick: addMilliseconds
             })
           ])) : createCommentVNode("", true)
-        ], 64)) : __props.maxGranularity !== "minute" ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
+        ], 64)) : __props.maxGranularity !== "minute" ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
           createVNode(_sfc_main$1l, {
             variant: "outlined",
             size: "small",
@@ -13040,9 +13045,9 @@ const stripInactiveFields = (duration, usedFormat) => {
 const toTitleCase = (key) => key.charAt(0).toUpperCase() + key.slice(1).toLowerCase();
 
 const _hoisted_1$r = { class: "kds-interval-popover" };
-const _hoisted_2$e = { class: "kds-interval-popover-header" };
-const _hoisted_3$b = { class: "kds-interval-popover-content" };
-const _hoisted_4$7 = { class: "kds-interval-popover-grid" };
+const _hoisted_2$g = { class: "kds-interval-popover-header" };
+const _hoisted_3$d = { class: "kds-interval-popover-content" };
+const _hoisted_4$9 = { class: "kds-interval-popover-grid" };
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "IntervalInputPopover",
   props: /* @__PURE__ */ mergeModels({
@@ -13138,7 +13143,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$r, [
-        createElementVNode("div", _hoisted_2$e, [
+        createElementVNode("div", _hoisted_2$g, [
           _cache[2] || (_cache[2] = createElementVNode("span", { class: "kds-interval-popover-title" }, "Interval value", -1)),
           props.format === unref(kdsIntervalInputFormat).DATE_OR_TIME ? (openBlock(), createBlock(unref(KdsValueSwitch), {
             key: 0,
@@ -13150,7 +13155,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           }, null, 8, ["modelValue"])) : createCommentVNode("", true)
         ]),
         _cache[3] || (_cache[3] = createElementVNode("div", { class: "kds-interval-popover-divider" }, null, -1)),
-        createElementVNode("div", _hoisted_3$b, [
+        createElementVNode("div", _hoisted_3$d, [
           props.allowDescending ? (openBlock(), createBlock(unref(KdsValueSwitch), {
             key: 0,
             modelValue: direction.value,
@@ -13160,7 +13165,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             variant: "muted",
             "possible-values": directionOptions
           }, null, 8, ["modelValue"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4$7, [
+          createElementVNode("div", _hoisted_4$9, [
             mode.value === unref(kdsIntervalInputFormat).DATE ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(periodNumericKeys), (key) => {
               return openBlock(), createBlock(unref(_sfc_main$T), {
                 key,
@@ -13402,13 +13407,13 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$q = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
-const _hoisted_2$d = {
+const _hoisted_2$f = {
   key: 0,
   class: "leading",
   "aria-hidden": "true"
 };
-const _hoisted_3$a = ["id"];
-const _hoisted_4$6 = {
+const _hoisted_3$c = ["id"];
+const _hoisted_4$8 = {
   class: "trailing",
   "aria-hidden": "true"
 };
@@ -13484,7 +13489,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && emit("click")),
         onKeydown
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$d, [
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$f, [
           createVNode(_sfc_main$1g, {
             accessory: props.accessory,
             size: "medium"
@@ -13496,8 +13501,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             placeholder: !props.text && !__props.disabled,
             missing: __props.missing
           }])
-        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$a),
-        createElementVNode("span", _hoisted_4$6, [
+        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$c),
+        createElementVNode("span", _hoisted_4$8, [
           createVNode(KdsIcon, {
             name: open.value ? "chevron-up" : "chevron-down",
             size: "small"
@@ -13513,7 +13518,7 @@ const BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "da
 const DROPDOWN_SEARCH_THRESHOLD = 12;
 
 const _hoisted_1$p = { class: "kds-dropdown-container" };
-const _hoisted_2$c = {
+const _hoisted_2$e = {
   key: 0,
   class: "kds-dropdown-container-sticky-top"
 };
@@ -13602,7 +13607,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$p, [
-        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$c, [
+        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$e, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -13730,7 +13735,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$o = ["disabled"];
-const _hoisted_2$b = ["title"];
+const _hoisted_2$d = ["title"];
 const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "KdsListItemButton",
   props: {
@@ -13761,7 +13766,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isLabelTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$b)
+        }, toDisplayString(props.label), 9, _hoisted_2$d)
       ], 8, _hoisted_1$o);
     };
   }
@@ -13770,11 +13775,11 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
 const KdsListItemButton = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-21fb5571"]]);
 
 const _hoisted_1$n = { class: "kds-multi-select-dropdown-options" };
-const _hoisted_2$a = {
+const _hoisted_2$c = {
   key: 0,
   class: "kds-multi-select-dropdown-search"
 };
-const _hoisted_3$9 = {
+const _hoisted_3$b = {
   key: 1,
   class: "kds-multi-select-dropdown-footer"
 };
@@ -13902,7 +13907,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$n, [
-        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
+        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$c, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -13931,7 +13936,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           "aria-label": "Dropdown options",
           onItemClick: _cache[4] || (_cache[4] = ($event) => $event !== void 0 && onItemClick($event))
         }, null, 8, ["class", "possible-values", "loading", "empty-text", "controlled-externally"]),
-        !__props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$9, [
+        !__props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$b, [
           createVNode(unref(KdsListItemButton), {
             label: anyVisibleSelected.value ? "Clear all" : "Select all",
             "leading-icon": anyVisibleSelected.value ? "trash" : "checkmark",
@@ -14074,7 +14079,7 @@ const kdsSpacingContainer0p10x = 1;
 const kdsSpacingContainer0p25x = 4;
 
 const _hoisted_1$m = { class: "kds-resize-handle-area" };
-const _hoisted_2$9 = ["aria-label"];
+const _hoisted_2$b = ["aria-label"];
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "ResizeHandle",
   props: {
@@ -14106,7 +14111,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             type: "button"
           }, [..._cache[0] || (_cache[0] = [
             createElementVNode("span", { class: "kds-resize-handle-line" }, null, -1)
-          ])], 8, _hoisted_2$9);
+          ])], 8, _hoisted_2$b);
         }), 128))
       ]);
     };
@@ -14495,12 +14500,12 @@ const useMultiSelectListBoxSelection = ({
 };
 
 const _hoisted_1$k = ["id", "tabindex", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-activedescendant", "aria-disabled", "onKeydown"];
-const _hoisted_2$8 = { class: "kds-multiselect-list-box-content-grid" };
-const _hoisted_3$8 = {
+const _hoisted_2$a = { class: "kds-multiselect-list-box-content-grid" };
+const _hoisted_3$a = {
   key: 0,
   class: "kds-multiselect-sticky-bottom"
 };
-const _hoisted_4$5 = {
+const _hoisted_4$7 = {
   key: 0,
   class: "kds-multiselect-empty"
 };
@@ -14757,7 +14762,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                   onBlur: _cache[17] || (_cache[17] = //@ts-ignore
                   (...args) => unref(onBlur) && unref(onBlur)(...args))
                 }), [
-                  createElementVNode("div", _hoisted_2$8, [
+                  createElementVNode("div", _hoisted_2$a, [
                     createElementVNode("div", mergeProps({ class: "kds-multiselect-list-box-content" }, unref(wrapperProps)), [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualList), ({ data: item, index }) => {
                         return openBlock(), createBlock(unref(KdsListItem), {
@@ -14784,7 +14789,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                         }, null, 8, ["id", "class", "text", "accessory", "missing", "special", "data-option-index", "selected", "disabled", "active", "trailing-icon", "onDblclick", "onClick"]);
                       }), 128))
                     ], 16),
-                    visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_3$8, [
+                    visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
                       createVNode(unref(KdsListItem), {
                         id: generateOptionId(visibleBottomValue.value.id),
                         text: visibleBottomValue.value.text,
@@ -14805,7 +14810,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                     ])) : createCommentVNode("", true)
                   ])
                 ], 16, _hoisted_1$k),
-                visiblePossibleValues.value.length === 0 && !visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
+                visiblePossibleValues.value.length === 0 && !visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$7, [
                   createVNode(KdsEmptyState, {
                     headline: __props.loading ? "Loading data…" : __props.emptyStateLabel,
                     "loading-spinner": __props.loading,
@@ -14826,17 +14831,17 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
 const KdsMultiSelectListBox = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-2c5e2dda"]]);
 
 const _hoisted_1$j = { class: "kds-list-column" };
-const _hoisted_2$7 = { class: "kds-list-header" };
-const _hoisted_3$7 = { class: "kds-list-label" };
-const _hoisted_4$4 = {
+const _hoisted_2$9 = { class: "kds-list-header" };
+const _hoisted_3$9 = { class: "kds-list-label" };
+const _hoisted_4$6 = {
   key: 0,
   class: "kds-list-count"
 };
-const _hoisted_5$1 = { class: "kds-button-column" };
-const _hoisted_6 = { class: "kds-list-column" };
-const _hoisted_7 = { class: "kds-list-header" };
-const _hoisted_8 = { class: "kds-list-label" };
-const _hoisted_9 = {
+const _hoisted_5$3 = { class: "kds-button-column" };
+const _hoisted_6$1 = { class: "kds-list-column" };
+const _hoisted_7$1 = { class: "kds-list-header" };
+const _hoisted_8$1 = { class: "kds-list-label" };
+const _hoisted_9$1 = {
   key: 0,
   class: "kds-list-count"
 };
@@ -15016,9 +15021,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(contentStyle)
           }, [
             createElementVNode("div", _hoisted_1$j, [
-              createElementVNode("div", _hoisted_2$7, [
-                createElementVNode("span", _hoisted_3$7, toDisplayString(__props.excludeLabel), 1),
-                !__props.loading && __props.searchTerm ? (openBlock(), createElementBlock("span", _hoisted_4$4, toDisplayString(leftOptions.value.length) + " of " + toDisplayString(excludedItems.value.length), 1)) : createCommentVNode("", true)
+              createElementVNode("div", _hoisted_2$9, [
+                createElementVNode("span", _hoisted_3$9, toDisplayString(__props.excludeLabel), 1),
+                !__props.loading && __props.searchTerm ? (openBlock(), createElementBlock("span", _hoisted_4$6, toDisplayString(leftOptions.value.length) + " of " + toDisplayString(excludedItems.value.length), 1)) : createCommentVNode("", true)
               ]),
               createVNode(unref(KdsMultiSelectListBox), {
                 modelValue: leftSelected.value,
@@ -15037,7 +15042,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 onKeyEnter: moveRight
               }, null, 8, ["modelValue", "possible-values", "ariaLabel", "disabled", "error", "loading", "empty-state-label", "bottom-value"])
             ]),
-            createElementVNode("div", _hoisted_5$1, [
+            createElementVNode("div", _hoisted_5$3, [
               createVNode(unref(_sfc_main$1l), {
                 "leading-icon": "chevron-right",
                 ariaLabel: "Move selected values right",
@@ -15081,10 +15086,10 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 ]))
               }, null, 8, ["disabled"])
             ]),
-            createElementVNode("div", _hoisted_6, [
-              createElementVNode("div", _hoisted_7, [
-                createElementVNode("span", _hoisted_8, toDisplayString(__props.includeLabel), 1),
-                !__props.loading && __props.searchTerm ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(rightOptions.value.length) + " of " + toDisplayString(includedItems.value.length), 1)) : createCommentVNode("", true)
+            createElementVNode("div", _hoisted_6$1, [
+              createElementVNode("div", _hoisted_7$1, [
+                createElementVNode("span", _hoisted_8$1, toDisplayString(__props.includeLabel), 1),
+                !__props.loading && __props.searchTerm ? (openBlock(), createElementBlock("span", _hoisted_9$1, toDisplayString(rightOptions.value.length) + " of " + toDisplayString(includedItems.value.length), 1)) : createCommentVNode("", true)
               ]),
               createVNode(unref(KdsMultiSelectListBox), {
                 modelValue: rightSelected.value,
@@ -15458,9 +15463,9 @@ const useSortableListBoxReorder = ({
 };
 
 const _hoisted_1$h = { class: "kds-sortable-list-box-wrapper" };
-const _hoisted_2$6 = { class: "kds-sortable-top-buttons" };
-const _hoisted_3$6 = { class: "kds-sortable-top-buttons-left" };
-const _hoisted_4$3 = { class: "kds-sortable-footer-buttons" };
+const _hoisted_2$8 = { class: "kds-sortable-top-buttons" };
+const _hoisted_3$8 = { class: "kds-sortable-top-buttons-left" };
+const _hoisted_4$5 = { class: "kds-sortable-footer-buttons" };
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "KdsSortableListBox",
   props: /* @__PURE__ */ mergeModels({
@@ -15519,8 +15524,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       }), {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$h, [
-            createElementVNode("div", _hoisted_2$6, [
-              createElementVNode("div", _hoisted_3$6, [
+            createElementVNode("div", _hoisted_2$8, [
+              createElementVNode("div", _hoisted_3$8, [
                 createVNode(_sfc_main$1l, {
                   size: "small",
                   variant: "transparent",
@@ -15559,7 +15564,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
               ariaLabel: formFieldProps.label ?? formFieldProps.ariaLabel ?? ""
               /* fallback only for TS */
             }, null, 8, ["modelValue", "possible-values", "disabled", "error", "ariaLabel"]),
-            createElementVNode("div", _hoisted_4$3, [
+            createElementVNode("div", _hoisted_4$5, [
               createVNode(_sfc_main$1l, {
                 size: "small",
                 variant: "transparent",
@@ -15848,7 +15853,170 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
 
 const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-b6d29842"]]);
 
+const _hoisted_1$c = { class: "kds-accordion" };
+const _hoisted_2$7 = ["id", "aria-expanded", "aria-controls", "disabled", "onClick", "onKeydown"];
+const _hoisted_3$7 = { class: "kds-accordion-headline-container" };
+const _hoisted_4$4 = { class: "kds-accordion-headline" };
+const _hoisted_5$2 = ["id", "aria-labelledby", "hidden"];
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "KdsAccordion",
+  props: /* @__PURE__ */ mergeModels({
+    items: {},
+    singleExpand: { type: Boolean, default: false }
+  }, {
+    "modelValue": { required: false },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const itemIdsSet = computed(() => new Set(__props.items.map((item) => item.id)));
+    const modelValue = useModel(__props, "modelValue");
+    const getNormalizedExpandedItems = (expandedItemIds) => {
+      const sanitizedExpandedItems = Array.from(new Set(expandedItemIds)).filter(
+        (expandedItemId) => itemIdsSet.value.has(expandedItemId)
+      );
+      if (__props.singleExpand) {
+        return sanitizedExpandedItems.slice(0, 1);
+      }
+      return sanitizedExpandedItems;
+    };
+    const normalizedModelExpandedItems = computed(
+      () => getNormalizedExpandedItems(modelValue.value ?? [])
+    );
+    const setExpandedItems = (nextExpandedItems) => {
+      modelValue.value = nextExpandedItems;
+    };
+    const areExpandedItemsEqual = (leftExpandedItems, rightExpandedItems) => leftExpandedItems.length === rightExpandedItems.length && leftExpandedItems.every(
+      (value, index) => value === rightExpandedItems[index]
+    );
+    watch(
+      () => [__props.items, __props.singleExpand, modelValue.value],
+      () => {
+        const currentModelExpandedItems = modelValue.value ?? [];
+        const normalizedExpandedItems = normalizedModelExpandedItems.value;
+        if (!areExpandedItemsEqual(currentModelExpandedItems, normalizedExpandedItems)) {
+          setExpandedItems(normalizedExpandedItems);
+        }
+      },
+      { immediate: true }
+    );
+    const expandedItems = computed(() => normalizedModelExpandedItems.value);
+    const isItemExpanded = (itemId) => expandedItems.value.includes(itemId);
+    const toggleItem = (item) => {
+      if (item.disabled) {
+        return;
+      }
+      if (isItemExpanded(item.id)) {
+        setExpandedItems(expandedItems.value.filter((id) => id !== item.id));
+        return;
+      }
+      if (__props.singleExpand) {
+        setExpandedItems([item.id]);
+        return;
+      }
+      setExpandedItems([...expandedItems.value, item.id]);
+    };
+    const triggerRefs = ref({});
+    const setTriggerRef = (itemId, triggerEl) => {
+      let element = null;
+      if (triggerEl instanceof Element) {
+        element = triggerEl;
+      } else if (triggerEl) {
+        element = triggerEl.$el;
+      }
+      if (element instanceof HTMLButtonElement) {
+        triggerRefs.value[itemId] = element;
+        return;
+      }
+      delete triggerRefs.value[itemId];
+    };
+    const focusTrigger = (itemId) => {
+      triggerRefs.value[itemId]?.focus();
+    };
+    const handleTriggerKeydown = (event, currentItem) => {
+      const enabledItemIds = __props.items.filter((item) => !item.disabled).map((item) => item.id);
+      const currentItemIndex = enabledItemIds.indexOf(currentItem.id);
+      if (currentItemIndex === -1 || enabledItemIds.length < 2) {
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown": {
+          event.preventDefault();
+          const nextItemIndex = (currentItemIndex + 1) % enabledItemIds.length;
+          focusTrigger(enabledItemIds[nextItemIndex]);
+          break;
+        }
+        case "ArrowUp": {
+          event.preventDefault();
+          const nextItemIndex = (currentItemIndex - 1 + enabledItemIds.length) % enabledItemIds.length;
+          focusTrigger(enabledItemIds[nextItemIndex]);
+          break;
+        }
+        case "Home":
+          event.preventDefault();
+          focusTrigger(enabledItemIds[0]);
+          break;
+        case "End":
+          event.preventDefault();
+          focusTrigger(enabledItemIds[enabledItemIds.length - 1]);
+          break;
+      }
+    };
+    const accordionId = useId();
+    const getItemTriggerId = (itemId) => `${accordionId}-trigger-${itemId}`;
+    const getItemContentId = (itemId) => `${accordionId}-content-${itemId}`;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+          return openBlock(), createElementBlock("div", {
+            key: item.id,
+            class: "kds-accordion-item"
+          }, [
+            createElementVNode("button", {
+              id: getItemTriggerId(item.id),
+              ref_for: true,
+              ref: (triggerEl) => setTriggerRef(item.id, triggerEl),
+              class: "kds-accordion-header",
+              type: "button",
+              "aria-expanded": isItemExpanded(item.id),
+              "aria-controls": getItemContentId(item.id),
+              disabled: item.disabled,
+              onClick: ($event) => toggleItem(item),
+              onKeydown: ($event) => handleTriggerKeydown($event, item)
+            }, [
+              createElementVNode("span", _hoisted_3$7, [
+                item.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
+                  key: 0,
+                  name: item.leadingIcon,
+                  size: "small",
+                  disabled: item.disabled
+                }, null, 8, ["name", "disabled"])) : createCommentVNode("", true),
+                createElementVNode("span", _hoisted_4$4, toDisplayString(item.headline), 1)
+              ]),
+              createVNode(KdsIcon, {
+                name: isItemExpanded(item.id) ? "chevron-up" : "chevron-down",
+                size: "small"
+              }, null, 8, ["name"])
+            ], 40, _hoisted_2$7),
+            createElementVNode("div", {
+              id: getItemContentId(item.id),
+              class: "kds-accordion-content",
+              role: "group",
+              "aria-labelledby": getItemTriggerId(item.id),
+              hidden: !isItemExpanded(item.id)
+            }, [
+              renderSlot(_ctx.$slots, item.id, { item }, void 0, true)
+            ], 8, _hoisted_5$2)
+          ]);
+        }), 128))
+      ]);
+    };
+  }
+});
+
+const KdsAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-66485734"]]);
+
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "BaseCard",
   props: {
     variant: {},
@@ -15866,9 +16034,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseCard = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-37984e9f"]]);
+const BaseCard = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-37984e9f"]]);
 
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "KdsCard",
   props: {
     variant: { default: "outlined" }
@@ -15888,8 +16056,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$c = ["aria-label", "aria-labelledby", "disabled"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_1$b = ["aria-label", "aria-labelledby", "disabled"];
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "KdsClickableCard",
   props: {
     variant: { default: "filled" },
@@ -15920,7 +16088,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled,
             "data-kds-card-primary-action": "",
             onClick
-          }, null, 8, _hoisted_1$c),
+          }, null, 8, _hoisted_1$b),
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
         _: 3
@@ -15929,9 +16097,9 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsClickableCard = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-671dfb5a"]]);
+const KdsClickableCard = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-671dfb5a"]]);
 
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkCard",
   props: {
     to: {},
@@ -15975,10 +16143,10 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLinkCard = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-a5b105b2"]]);
+const KdsLinkCard = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-a5b105b2"]]);
 
-const _hoisted_1$b = ["aria-label", "aria-labelledby", "disabled", "aria-pressed"];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = ["aria-label", "aria-labelledby", "disabled", "aria-pressed"];
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "KdsSelectableCard",
   props: /* @__PURE__ */ mergeModels({
     variant: { default: "filled" },
@@ -16014,7 +16182,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             "aria-pressed": modelValue.value,
             "data-kds-card-primary-action": "",
             onClick
-          }, null, 8, _hoisted_1$b),
+          }, null, 8, _hoisted_1$a),
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
         _: 3
@@ -16023,7 +16191,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSelectableCard = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-80c51086"]]);
+const KdsSelectableCard = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-80c51086"]]);
 
 const kdsCardVariant = {
   FILLED: "filled",
@@ -16032,35 +16200,118 @@ const kdsCardVariant = {
 };
 const kdsCardVariants = Object.values(kdsCardVariant);
 
-const _hoisted_1$a = { class: "kds-panel-header" };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "KdsPanelHeader",
+const _hoisted_1$9 = { class: "kds-panel" };
+const _hoisted_2$6 = { class: "kds-panel-header" };
+const _hoisted_3$6 = ["id"];
+const _hoisted_4$3 = {
+  key: 0,
+  class: "kds-panel-headline-text"
+};
+const _hoisted_5$1 = {
+  key: 0,
+  class: "kds-panel-header-trailing"
+};
+const _hoisted_6 = ["aria-labelledby"];
+const _hoisted_7 = {
+  key: 0,
+  class: "kds-panel-footer"
+};
+const _hoisted_8 = { class: "kds-panel-footer-leading" };
+const _hoisted_9 = { class: "kds-panel-footer-trailing" };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "KdsPanel",
   props: {
-    headline: {}
+    headline: {},
+    headlineTrailingActions: {},
+    footerLeadingActions: {},
+    footerTrailingActions: {}
   },
-  emits: ["close"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const handleClick = (event) => emit("close", event);
+  setup(__props) {
+    const headlineId = useId();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
-        createElementVNode("h6", null, toDisplayString(__props.headline), 1),
-        createVNode(_sfc_main$1l, {
-          class: "kds-close-button",
-          "leading-icon": "x-close",
-          size: "small",
-          ariaLabel: "Close panel",
-          variant: "transparent",
-          onClick: handleClick
-        })
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+        createElementVNode("div", _hoisted_2$6, [
+          createElementVNode("div", {
+            id: unref(headlineId),
+            class: "kds-panel-headline"
+          }, [
+            typeof __props.headline === "string" ? (openBlock(), createElementBlock("h6", _hoisted_4$3, toDisplayString(__props.headline), 1)) : __props.headline.type === "button" ? (openBlock(), createBlock(_sfc_main$1l, mergeProps({ key: 1 }, __props.headline.props, {
+              size: "small",
+              onClick: __props.headline.onClick
+            }), null, 16, ["onClick"])) : __props.headline.type === "menuButton" ? (openBlock(), createBlock(_sfc_main$1a, mergeProps({ key: 2 }, __props.headline.props, {
+              size: "small",
+              onItemClick: __props.headline.onItemClick
+            }), null, 16, ["onItemClick"])) : createCommentVNode("", true)
+          ], 8, _hoisted_3$6),
+          __props.headlineTrailingActions?.length ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.headlineTrailingActions, (action, index) => {
+              return openBlock(), createElementBlock(Fragment, { key: index }, [
+                action.type === "button" ? (openBlock(), createBlock(_sfc_main$1l, mergeProps({
+                  key: 0,
+                  ref_for: true
+                }, action.props, {
+                  size: "small",
+                  onClick: action.onClick
+                }), null, 16, ["onClick"])) : action.type === "toggleButton" ? (openBlock(), createBlock(_sfc_main$1i, mergeProps({
+                  key: 1,
+                  ref_for: true
+                }, action.props, {
+                  size: "small",
+                  "onUpdate:modelValue": action.onUpdateModelValue
+                }), null, 16, ["onUpdate:modelValue"])) : action.type === "menuButton" ? (openBlock(), createBlock(_sfc_main$1a, mergeProps({
+                  key: 2,
+                  ref_for: true
+                }, action.props, {
+                  size: "small",
+                  onItemClick: action.onItemClick
+                }), null, 16, ["onItemClick"])) : action.type === "valueSwitch" ? (openBlock(), createBlock(KdsValueSwitch, mergeProps({
+                  key: 3,
+                  ref_for: true
+                }, action.props, {
+                  size: "small",
+                  "onUpdate:modelValue": action.onUpdateModelValue
+                }), null, 16, ["onUpdate:modelValue"])) : createCommentVNode("", true)
+              ], 64);
+            }), 128))
+          ])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", {
+          class: "kds-panel-body",
+          tabindex: "0",
+          "aria-labelledby": unref(headlineId)
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 8, _hoisted_6),
+        __props.footerLeadingActions?.length || __props.footerTrailingActions?.length ? (openBlock(), createElementBlock("div", _hoisted_7, [
+          createElementVNode("div", _hoisted_8, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.footerLeadingActions, (action, index) => {
+              return openBlock(), createBlock(_sfc_main$1l, mergeProps({
+                key: `leading-${index}`
+              }, { ref_for: true }, action.props, {
+                size: "small",
+                onClick: action.onClick
+              }), null, 16, ["onClick"]);
+            }), 128))
+          ]),
+          createElementVNode("div", _hoisted_9, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.footerTrailingActions, (action, index) => {
+              return openBlock(), createBlock(_sfc_main$1l, mergeProps({
+                key: `trailing-${index}`
+              }, { ref_for: true }, action.props, {
+                size: "small",
+                onClick: action.onClick
+              }), null, 16, ["onClick"]);
+            }), 128))
+          ])
+        ])) : createCommentVNode("", true)
       ]);
     };
   }
 });
 
-const KdsPanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-dd28904c"]]);
+const KdsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-c55a379c"]]);
 
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "TabBarItemAccessory",
   props: {
     accessory: {},
@@ -16190,7 +16441,7 @@ const useTabBarAdaptiveLayout = ({
   };
 };
 
-const _hoisted_1$9 = { class: "kds-tab-bar-wrapper" };
+const _hoisted_1$8 = { class: "kds-tab-bar-wrapper" };
 const _hoisted_2$5 = ["id", "title", "aria-selected", "aria-controls", "tabindex", "disabled", "onClick", "onKeydown"];
 const _hoisted_3$5 = { class: "kds-tab-label" };
 const _hoisted_4$2 = {
@@ -16198,7 +16449,7 @@ const _hoisted_4$2 = {
   class: "kds-tab-indicator"
 };
 const MIN_TAB_WIDTH_TOKEN = "--kds-dimension-component-width-4x";
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "KdsTabBar",
   props: /* @__PURE__ */ mergeModels({
     tabs: {},
@@ -16322,7 +16573,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       { immediate: true }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
         createElementVNode("div", {
           ref_key: "availableWidthContainer",
           ref: availableWidthContainer,
@@ -16352,7 +16603,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               onClick: ($event) => selectTab(tab),
               onKeydown: ($event) => handleKeydown($event, tab)
             }, [
-              tab.accessory && !(tab.accessory.type === "icon" && unref(shouldHideIcons)) ? (openBlock(), createBlock(_sfc_main$b, {
+              tab.accessory && !(tab.accessory.type === "icon" && unref(shouldHideIcons)) ? (openBlock(), createBlock(_sfc_main$a, {
                 key: 0,
                 accessory: tab.accessory,
                 "icon-size": __props.size === "large" ? "large" : "medium",
@@ -16368,7 +16619,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTabBar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-91f95f5f"]]);
+const KdsTabBar = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-91f95f5f"]]);
 
 const kdsTabBarSize = {
   SMALL: "small",
@@ -16376,7 +16627,7 @@ const kdsTabBarSize = {
 };
 const kdsTabBarSizes = Object.values(kdsTabBarSize);
 
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "LoadingSkeletonItem",
   props: {
     shape: { default: "text" }
@@ -16391,9 +16642,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const LoadingSkeletonItem = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-86829b28"]]);
+const LoadingSkeletonItem = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-86829b28"]]);
 
-const _hoisted_1$8 = {
+const _hoisted_1$7 = {
   key: 0,
   class: "kds-loading-skeleton",
   "aria-busy": "true"
@@ -16408,7 +16659,7 @@ const _hoisted_4$1 = {
   class: "kds-loading-skeleton-input-with-label"
 };
 const _hoisted_5 = { class: "kds-loading-skeleton-list-item-text" };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSkeleton",
   props: {
     variant: { default: "text" },
@@ -16421,7 +16672,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       "v59c08829": _ctx.repeatGap
     }));
     return (_ctx, _cache) => {
-      return __props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return __props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.repeat, (index) => {
           return openBlock(), createElementBlock(Fragment, {
             key: `skeleton-${index}`
@@ -16476,7 +16727,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLoadingSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-e6597718"]]);
+const KdsLoadingSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-e6597718"]]);
 
 const loadingSkeletonItemShape = {
   TEXT: "text",
@@ -16503,42 +16754,6 @@ const kdsLoadingSkeletonVariants = Object.values(
   kdsLoadingSkeletonVariant
 );
 
-const _hoisted_1$7 = { class: "kds-panel-button-bar" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "KdsPanelButtonBar",
-  props: {
-    applyLabel: { default: "Apply" },
-    cancelLabel: { default: "Cancel" },
-    disabled: { type: Boolean, default: false }
-  },
-  emits: ["cancel", "apply"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const handleCancel = (event) => emit("cancel", event);
-    const handleApply = (event) => emit("apply", event);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
-        createVNode(_sfc_main$1l, {
-          disabled: __props.disabled,
-          label: __props.cancelLabel,
-          size: "small",
-          variant: "transparent",
-          onClick: handleCancel
-        }, null, 8, ["disabled", "label"]),
-        createVNode(_sfc_main$1l, {
-          disabled: __props.disabled,
-          label: __props.applyLabel,
-          size: "small",
-          variant: "filled",
-          onClick: handleApply
-        }, null, 8, ["disabled", "label"])
-      ]);
-    };
-  }
-});
-
-const KdsPanelButtonBar = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-aeb00620"]]);
-
 const _hoisted_1$6 = {
   key: 0,
   class: "indicator-selected"
@@ -17281,5 +17496,5 @@ const kdsResponsiveButtonGroupAlignments = Object.values(
   kdsResponsiveButtonGroupAlignment
 );
 
-export { KdsAvatar, KdsAvatarCounter, KdsBadge, _sfc_main$1l as KdsButton, _sfc_main$g as KdsCard, _sfc_main$10 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$P as KdsColorInput, KdsColorSwatch, KdsContainerHeader, _sfc_main$15 as KdsContextMenu, KdsDataType, _sfc_main$I as KdsDateInput, _sfc_main$G as KdsDateTimeFormatInput, KdsDivider, KdsDonutChart, _sfc_main$w as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$z as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1k as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$16 as KdsMenu, _sfc_main$1a as KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$t as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$T as KdsNumberInput, KdsPanelButtonBar, KdsPanelHeader, _sfc_main$O as KdsPasswordInput, _sfc_main$F as KdsPatternInput, KdsPreviewList, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$B as KdsTimeInput, _sfc_main$1i as KdsToggleButton, KdsTwinList, _sfc_main$N as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, _sfc_main$1l as KdsButton, _sfc_main$f as KdsCard, _sfc_main$10 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$P as KdsColorInput, KdsColorSwatch, KdsContainerHeader, _sfc_main$15 as KdsContextMenu, KdsDataType, _sfc_main$I as KdsDateInput, _sfc_main$G as KdsDateTimeFormatInput, KdsDivider, KdsDonutChart, _sfc_main$w as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$z as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1k as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$16 as KdsMenu, _sfc_main$1a as KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$t as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$T as KdsNumberInput, KdsPanel, _sfc_main$O as KdsPasswordInput, _sfc_main$F as KdsPatternInput, KdsPreviewList, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$B as KdsTimeInput, _sfc_main$1i as KdsToggleButton, KdsTwinList, _sfc_main$N as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map