@knime/kds-components 0.27.0 → 0.28.0

package/dist/index.js

@@ -969,7 +969,7 @@ const kdsLoadingSpinnerVariants = Object.values(
 const _hoisted_1$U = ["role"];
 const _hoisted_2$z = { class: "header" };
 const _hoisted_3$r = { class: "headline" };
-const _hoisted_4$l = {
+const _hoisted_4$m = {
   key: 0,
   class: "body"
 };
@@ -1012,7 +1012,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"]),
           createElementVNode("div", _hoisted_3$r, toDisplayString(props.headline), 1)
         ]),
-        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$l, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$m, toDisplayString(props.description), 1)) : createCommentVNode("", true)
       ], 10, _hoisted_1$U);
     };
   }
@@ -1031,13 +1031,13 @@ const kdsInlineMessageVariants = Object.values(kdsInlineMessageVariant);
 const _hoisted_1$T = { class: "donut-container" };
 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_4$l = ["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$4 = { class: "title" };
+const _hoisted_7$3 = { class: "title" };
 const _hoisted_8$3 = {
   key: 0,
   class: "sub-text"
@@ -1119,7 +1119,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
             "stroke-dashoffset": secondaryStrokeDashOffset.value,
             fill: "transparent",
             transform: transformWedge.value
-          }, null, 10, _hoisted_4$k)) : createCommentVNode("", true),
+          }, null, 10, _hoisted_4$l)) : createCommentVNode("", true),
           !disabled.value ? (openBlock(), createElementBlock("circle", {
             key: 1,
             class: normalizeClass(["value-wedge", "primary-circle", { animate: __props.animate }]),
@@ -1134,7 +1134,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
           }, 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),
+          createElementVNode("div", _hoisted_7$3, toDisplayString(__props.title), 1),
           __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$3, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ]);
@@ -2032,13 +2032,13 @@ const _hoisted_2$v = {
   class: "accessory"
 };
 const _hoisted_3$p = { class: "content" };
-const _hoisted_4$j = ["title"];
+const _hoisted_4$k = ["title"];
 const _hoisted_5$a = {
   key: 0,
   class: "prefix"
 };
 const _hoisted_6$8 = ["title"];
-const _hoisted_7$3 = { class: "trailing-item" };
+const _hoisted_7$2 = { class: "trailing-item" };
 const _hoisted_8$2 = {
   key: 0,
   class: "shortcut"
@@ -2123,7 +2123,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
             createElementVNode("span", {
               class: normalizeClass({ special: __props.special })
             }, toDisplayString(props.text), 3)
-          ], 8, _hoisted_4$j),
+          ], 8, _hoisted_4$k),
           props.subText ? (openBlock(), createElementBlock("span", {
             key: 0,
             ref_key: "subtextEl",
@@ -2132,7 +2132,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
             title: unref(isSubtextTruncated) ? props.subText : void 0
           }, toDisplayString(props.subText), 9, _hoisted_6$8)) : createCommentVNode("", true)
         ]),
-        createElementVNode("span", _hoisted_7$3, [
+        createElementVNode("span", _hoisted_7$2, [
           props.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_8$2, toDisplayString(props.shortcut), 1)) : props.badge ? (openBlock(), createBlock(KdsBadge, {
             key: 1,
             size: badgeSize.value,
@@ -2596,7 +2596,7 @@ const _hoisted_3$n = {
   key: 1,
   class: "kds-empty-state-description"
 };
-const _hoisted_4$i = {
+const _hoisted_4$j = {
   key: 2,
   class: "kds-empty-state-action"
 };
@@ -2640,7 +2640,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
         })) : createCommentVNode("", true),
         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, [
+        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$j, [
           (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))
@@ -2946,7 +2946,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
 const _hoisted_1$I = { class: "kds-preview-list" };
 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_4$i = { 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;
@@ -2996,7 +2996,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
             size: "small"
           }, null, 8, ["name"])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_3$m, [
-            createElementVNode("span", _hoisted_4$h, toDisplayString(props.headline), 1)
+            createElementVNode("span", _hoisted_4$i, toDisplayString(props.headline), 1)
           ]),
           __props.trailingButton ? (openBlock(), createBlock(_sfc_main$1l, normalizeProps(mergeProps({ key: 2 }, trailingButtonProps.value)), null, 16)) : createCommentVNode("", true)
         ]),
@@ -3141,7 +3141,7 @@ const _hoisted_3$l = {
   key: 0,
   class: "content"
 };
-const _hoisted_4$g = { class: "label" };
+const _hoisted_4$h = { class: "label" };
 const _hoisted_5$8 = ["id"];
 const _hoisted_6$6 = {
   key: 0,
@@ -3229,7 +3229,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["name"])) : createCommentVNode("", true)
           ]),
           props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$l, [
-            createElementVNode("div", _hoisted_4$g, toDisplayString(props.label), 1),
+            createElementVNode("div", _hoisted_4$h, toDisplayString(props.label), 1),
             props.helperText ? (openBlock(), createElementBlock("div", {
               key: 0,
               id: unref(helperId),
@@ -3285,7 +3285,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
 const _hoisted_1$E = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby"];
 const _hoisted_2$n = ["id"];
 const _hoisted_3$k = ["title"];
-const _hoisted_4$f = { class: "kds-fieldset-content" };
+const _hoisted_4$g = { class: "kds-fieldset-content" };
 const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "BaseFieldsetWrapper",
   props: {
@@ -3339,7 +3339,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
             hidden: !isHovered.value
           }, null, 8, ["content", "hidden"])) : createCommentVNode("", true)
         ], 8, _hoisted_2$n)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_4$f, [
+        createElementVNode("div", _hoisted_4$g, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
         createVNode(KdsSubText, {
@@ -3460,7 +3460,7 @@ const _hoisted_3$j = {
   "aria-hidden": "true",
   focusable: "false"
 };
-const _hoisted_4$e = { class: "content" };
+const _hoisted_4$f = { class: "content" };
 const _hoisted_5$7 = { class: "label" };
 const _hoisted_6$5 = ["id"];
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
@@ -3512,7 +3512,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
             }, null, -1)
           ])])) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_4$e, [
+        createElementVNode("div", _hoisted_4$f, [
           createElementVNode("div", _hoisted_5$7, toDisplayString(props.text), 1),
           props.helperText ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -4681,7 +4681,7 @@ const _hoisted_2$l = {
   class: "leading-slot"
 };
 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_4$e = ["aria-disabled"];
 const _hoisted_5$6 = {
   key: 4,
   class: "trailing-slot"
@@ -4901,7 +4901,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled
           }),
           "aria-disabled": __props.disabled || void 0
-        }, toDisplayString(props.unit), 11, _hoisted_4$d)) : createCommentVNode("", true),
+        }, toDisplayString(props.unit), 11, _hoisted_4$e)) : createCommentVNode("", true),
         __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$1l, {
           key: 3,
           class: "clear-button",
@@ -10272,7 +10272,7 @@ const _hoisted_1$y = {
 };
 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 _hoisted_4$d = ["aria-selected", "aria-disabled", "aria-label", "disabled", "tabindex", "onClick", "onFocus"];
 const REFERENCE_YEAR$2 = 2024;
 const DAYS_PER_WEEK = 7;
 const TOTAL_CELLS = 42;
@@ -10610,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$c);
+                }, toDisplayString(day.day), 43, _hoisted_4$d);
               }), 128))
             ]);
           }), 128))
@@ -11002,7 +11002,7 @@ const DatePickerYearGrid = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId
 const _hoisted_1$v = { class: "kds-date-picker" };
 const _hoisted_2$i = { class: "kds-date-picker-header" };
 const _hoisted_3$f = { class: "kds-date-picker-nav-block" };
-const _hoisted_4$b = {
+const _hoisted_4$c = {
   key: 1,
   class: "kds-date-picker-header-static-label",
   "aria-live": "polite"
@@ -11236,7 +11236,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             size: "small",
             label: headerLabel.value,
             onClick: onHeaderLabelClick
-          }, null, 8, ["label"])) : (openBlock(), createElementBlock("div", _hoisted_4$b, toDisplayString(headerLabel.value), 1)),
+          }, null, 8, ["label"])) : (openBlock(), createElementBlock("div", _hoisted_4$c, toDisplayString(headerLabel.value), 1)),
           createElementVNode("div", _hoisted_5$5, [
             createVNode(_sfc_main$1l, {
               variant: "transparent",
@@ -12244,18 +12244,17 @@ 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$h = { class: "kds-time-picker-selected-time" };
+const _hoisted_2$h = { class: "kds-time-picker-fields" };
 const _hoisted_3$e = { class: "kds-time-picker-fields" };
-const _hoisted_4$a = { class: "kds-time-picker-fields" };
-const _hoisted_5$4 = {
+const _hoisted_4$b = {
   key: 0,
   class: "kds-time-picker-fields"
 };
-const _hoisted_6$2 = {
+const _hoisted_5$4 = {
   key: 1,
   class: "kds-time-picker-actions"
 };
-const _hoisted_7$2 = {
+const _hoisted_6$2 = {
   key: 2,
   class: "kds-time-picker-actions"
 };
@@ -12322,21 +12321,6 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       get: () => modelValue.value?.millisecond ?? 0,
       set: (value) => writeTime({ millisecond: value })
     });
-    const selectedTimeLabel = computed(() => {
-      const time = Un.PlainTime.from({
-        hour: clamp(modelValue.value?.hour ?? 0, 0, MAX_HOUR),
-        minute: clamp(modelValue.value?.minute ?? 0, 0, MAX_MINUTE),
-        second: showSecondInput.value ? clamp(modelValue.value?.second ?? 0, 0, MAX_SECOND) : 0,
-        millisecond: showMillisecondInput.value ? clamp(modelValue.value?.millisecond ?? 0, 0, MAX_MILLISECOND) : 0
-      });
-      if (showMillisecondInput.value) {
-        return time.toString({ smallestUnit: "millisecond" });
-      }
-      if (showSecondInput.value) {
-        return time.toString({ smallestUnit: "second" });
-      }
-      return time.toString({ smallestUnit: "minute" });
-    });
     const addSeconds = async () => {
       granularity.value = "second";
       await nextTick();
@@ -12365,8 +12349,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     __expose({ focus });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$s, [
-        createElementVNode("div", _hoisted_2$h, toDisplayString(selectedTimeLabel.value), 1),
-        createElementVNode("div", _hoisted_3$e, [
+        createElementVNode("div", _hoisted_2$h, [
           createVNode(_sfc_main$T, {
             ref: "hourInput",
             modelValue: hour.value,
@@ -12392,7 +12375,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$a, [
+          createElementVNode("div", _hoisted_3$e, [
             createVNode(_sfc_main$T, {
               ref: "secondInput",
               modelValue: second.value,
@@ -12412,7 +12395,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               onClick: removeSeconds
             })
           ]),
-          showMillisecondInput.value ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
+          showMillisecondInput.value ? (openBlock(), createElementBlock("div", _hoisted_4$b, [
             createVNode(_sfc_main$T, {
               ref: "millisecondInput",
               modelValue: millisecond.value,
@@ -12434,7 +12417,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               title: "Remove milliseconds",
               onClick: removeMilliseconds
             })
-          ])) : __props.maxGranularity === "millisecond" ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
+          ])) : __props.maxGranularity === "millisecond" ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
             createVNode(_sfc_main$1l, {
               variant: "outlined",
               size: "small",
@@ -12443,7 +12426,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               onClick: addMilliseconds
             })
           ])) : createCommentVNode("", true)
-        ], 64)) : __props.maxGranularity !== "minute" ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
+        ], 64)) : __props.maxGranularity !== "minute" ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
           createVNode(_sfc_main$1l, {
             variant: "outlined",
             size: "small",
@@ -12457,7 +12440,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const TimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-c2f06c87"]]);
+const TimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-c2bc1234"]]);
 
 const HOURS_END_INDEX = 2;
 const MINUTES_START_INDEX = 2;
@@ -13047,7 +13030,7 @@ const toTitleCase = (key) => key.charAt(0).toUpperCase() + key.slice(1).toLowerC
 const _hoisted_1$r = { class: "kds-interval-popover" };
 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 _hoisted_4$a = { class: "kds-interval-popover-grid" };
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "IntervalInputPopover",
   props: /* @__PURE__ */ mergeModels({
@@ -13165,7 +13148,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             variant: "muted",
             "possible-values": directionOptions
           }, null, 8, ["modelValue"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4$9, [
+          createElementVNode("div", _hoisted_4$a, [
             mode.value === unref(kdsIntervalInputFormat).DATE ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(periodNumericKeys), (key) => {
               return openBlock(), createBlock(unref(_sfc_main$T), {
                 key,
@@ -13413,7 +13396,7 @@ const _hoisted_2$f = {
   "aria-hidden": "true"
 };
 const _hoisted_3$c = ["id"];
-const _hoisted_4$8 = {
+const _hoisted_4$9 = {
   class: "trailing",
   "aria-hidden": "true"
 };
@@ -13502,7 +13485,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             missing: __props.missing
           }])
         }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$c),
-        createElementVNode("span", _hoisted_4$8, [
+        createElementVNode("span", _hoisted_4$9, [
           createVNode(KdsIcon, {
             name: open.value ? "chevron-up" : "chevron-down",
             size: "small"
@@ -14505,7 +14488,7 @@ const _hoisted_3$a = {
   key: 0,
   class: "kds-multiselect-sticky-bottom"
 };
-const _hoisted_4$7 = {
+const _hoisted_4$8 = {
   key: 0,
   class: "kds-multiselect-empty"
 };
@@ -14810,7 +14793,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                     ])) : createCommentVNode("", true)
                   ])
                 ], 16, _hoisted_1$k),
-                visiblePossibleValues.value.length === 0 && !visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$7, [
+                visiblePossibleValues.value.length === 0 && !visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$8, [
                   createVNode(KdsEmptyState, {
                     headline: __props.loading ? "Loading data…" : __props.emptyStateLabel,
                     "loading-spinner": __props.loading,
@@ -14833,7 +14816,7 @@ const KdsMultiSelectListBox = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scop
 const _hoisted_1$j = { class: "kds-list-column" };
 const _hoisted_2$9 = { class: "kds-list-header" };
 const _hoisted_3$9 = { class: "kds-list-label" };
-const _hoisted_4$6 = {
+const _hoisted_4$7 = {
   key: 0,
   class: "kds-list-count"
 };
@@ -15023,7 +15006,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             createElementVNode("div", _hoisted_1$j, [
               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)
+                !__props.loading && __props.searchTerm ? (openBlock(), createElementBlock("span", _hoisted_4$7, toDisplayString(leftOptions.value.length) + " of " + toDisplayString(excludedItems.value.length), 1)) : createCommentVNode("", true)
               ]),
               createVNode(unref(KdsMultiSelectListBox), {
                 modelValue: leftSelected.value,
@@ -15465,7 +15448,7 @@ const useSortableListBoxReorder = ({
 const _hoisted_1$h = { class: "kds-sortable-list-box-wrapper" };
 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 _hoisted_4$6 = { class: "kds-sortable-footer-buttons" };
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "KdsSortableListBox",
   props: /* @__PURE__ */ mergeModels({
@@ -15564,7 +15547,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$5, [
+            createElementVNode("div", _hoisted_4$6, [
               createVNode(_sfc_main$1l, {
                 size: "small",
                 variant: "transparent",
@@ -15856,7 +15839,7 @@ const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__sc
 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_4$5 = { class: "kds-accordion-headline" };
 const _hoisted_5$2 = ["id", "aria-labelledby", "hidden"];
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "KdsAccordion",
@@ -15991,7 +15974,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   size: "small",
                   disabled: item.disabled
                 }, null, 8, ["name", "disabled"])) : createCommentVNode("", true),
-                createElementVNode("span", _hoisted_4$4, toDisplayString(item.headline), 1)
+                createElementVNode("span", _hoisted_4$5, toDisplayString(item.headline), 1)
               ]),
               createVNode(KdsIcon, {
                 name: isItemExpanded(item.id) ? "chevron-up" : "chevron-down",
@@ -16016,10 +15999,44 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
 
 const KdsAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-66485734"]]);
 
+const _hoisted_1$b = { class: "kds-card-header" };
+const _hoisted_2$6 = {
+  key: 0,
+  class: "accessory"
+};
+const _hoisted_3$6 = { key: 1 };
+const _hoisted_4$4 = {
+  key: 2,
+  class: "actions",
+  "data-kds-card-secondary-action": ""
+};
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "CardHeader",
+  props: {
+    headline: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        _ctx.$slots.accessory ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
+          renderSlot(_ctx.$slots, "accessory", {}, void 0, true)
+        ])) : createCommentVNode("", true),
+        __props.headline ? (openBlock(), createElementBlock("h6", _hoisted_3$6, toDisplayString(__props.headline), 1)) : createCommentVNode("", true),
+        _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
+          renderSlot(_ctx.$slots, "actions", {}, void 0, true)
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+const CardHeader = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-9be14436"]]);
+
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "BaseCard",
   props: {
     variant: {},
+    headline: {},
     clickable: { type: Boolean, default: false },
     selected: { type: Boolean, default: false }
   },
@@ -16028,39 +16045,77 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["kds-base-card", [`variant-${__props.variant}`, { selected: __props.selected, clickable: __props.clickable }]])
       }, [
+        renderSlot(_ctx.$slots, "primary-action", {}, void 0, true),
+        _ctx.$slots["header-accessory"] || _ctx.$slots["header-actions"] || __props.headline ? (openBlock(), createBlock(CardHeader, {
+          key: 0,
+          headline: __props.headline
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots["header-accessory"] ? {
+            name: "accessory",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "header-accessory", {}, void 0, true)
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots["header-actions"] ? {
+            name: "actions",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "header-actions", {}, void 0, true)
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["headline"])) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ], 2);
     };
   }
 });
 
-const BaseCard = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-37984e9f"]]);
+const BaseCard = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-a1aff6d6"]]);
 
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "KdsCard",
   props: {
-    variant: { default: "outlined" }
+    variant: { default: "outlined" },
+    headline: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseCard, {
         variant: __props.variant,
-        class: "kds-card"
-      }, {
+        class: "kds-card",
+        headline: __props.headline
+      }, createSlots({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
-        _: 3
-      }, 8, ["variant"]);
+        _: 2
+      }, [
+        _ctx.$slots["header-actions"] ? {
+          name: "header-actions",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "header-actions")
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots["header-accessory"] ? {
+          name: "header-accessory",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "header-accessory")
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["variant", "headline"]);
     };
   }
 });
 
-const _hoisted_1$b = ["aria-label", "aria-labelledby", "disabled"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = ["aria-label", "aria-labelledby", "disabled"];
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "KdsClickableCard",
   props: {
     variant: { default: "filled" },
+    headline: {},
     disabled: { type: Boolean, default: false },
     ariaLabel: {},
     ariaLabelledby: {}
@@ -16078,35 +16133,54 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(BaseCard, {
         variant: __props.variant,
         clickable: !__props.disabled,
+        headline: __props.headline,
         class: "kds-clickable-card"
-      }, {
-        default: withCtx(() => [
+      }, createSlots({
+        "primary-action": withCtx(() => [
           createElementVNode("button", {
             type: "button",
-            "aria-label": __props.ariaLabel,
+            "aria-label": __props.ariaLabel ? __props.ariaLabel : __props.headline,
             "aria-labelledby": __props.ariaLabelledby,
             disabled: __props.disabled,
             "data-kds-card-primary-action": "",
             onClick
-          }, null, 8, _hoisted_1$b),
+          }, null, 8, _hoisted_1$a)
+        ]),
+        default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
-        _: 3
-      }, 8, ["variant", "clickable"]);
+        _: 2
+      }, [
+        _ctx.$slots["header-actions"] ? {
+          name: "header-actions",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "header-actions", {}, void 0, true)
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots["header-accessory"] ? {
+          name: "header-accessory",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "header-accessory", {}, void 0, true)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["variant", "clickable", "headline"]);
     };
   }
 });
 
-const KdsClickableCard = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-671dfb5a"]]);
+const KdsClickableCard = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-04004cbf"]]);
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkCard",
   props: {
+    variant: { default: "filled" },
+    headline: {},
     to: {},
     download: { type: Boolean },
     target: {},
     rel: {},
-    variant: { default: "filled" },
     disabled: { type: Boolean, default: false },
     ariaLabel: {},
     ariaLabelledby: {}
@@ -16115,41 +16189,61 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const linkComponent = computed(() => {
       return resolveNuxtLinkComponent();
     });
+    const ariaLabelWithFallback = computed(() => __props.ariaLabel || __props.headline);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseCard, {
         variant: __props.variant,
         clickable: !__props.disabled,
         class: "kds-link-card",
         "aria-disabled": __props.disabled ? true : void 0,
-        "aria-label": __props.disabled ? __props.ariaLabel : void 0,
-        "aria-labelledby": __props.disabled ? __props.ariaLabelledby : void 0
-      }, {
-        default: withCtx(() => [
+        "aria-label": __props.disabled ? ariaLabelWithFallback.value : void 0,
+        "aria-labelledby": __props.disabled ? __props.ariaLabelledby : void 0,
+        headline: __props.headline
+      }, createSlots({
+        "primary-action": withCtx(() => [
           !__props.disabled ? (openBlock(), createBlock(resolveDynamicComponent(linkComponent.value), {
             key: 0,
             to: __props.to,
             "data-kds-card-primary-action": "",
-            "aria-label": __props.ariaLabel,
+            "aria-label": ariaLabelWithFallback.value,
             "aria-labelledby": __props.ariaLabelledby,
             download: __props.download,
             rel: __props.rel,
             target: __props.target
-          }, null, 8, ["to", "aria-label", "aria-labelledby", "download", "rel", "target"])) : createCommentVNode("", true),
+          }, null, 8, ["to", "aria-label", "aria-labelledby", "download", "rel", "target"])) : createCommentVNode("", true)
+        ]),
+        default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
-        _: 3
-      }, 8, ["variant", "clickable", "aria-disabled", "aria-label", "aria-labelledby"]);
+        _: 2
+      }, [
+        _ctx.$slots["header-actions"] ? {
+          name: "header-actions",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "header-actions", {}, void 0, true)
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots["header-accessory"] ? {
+          name: "header-accessory",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "header-accessory", {}, void 0, true)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["variant", "clickable", "aria-disabled", "aria-label", "aria-labelledby", "headline"]);
     };
   }
 });
 
-const KdsLinkCard = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-a5b105b2"]]);
+const KdsLinkCard = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-1696fd9e"]]);
 
-const _hoisted_1$a = ["aria-label", "aria-labelledby", "disabled", "aria-pressed"];
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9 = ["aria-label", "aria-labelledby", "disabled", "aria-pressed"];
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "KdsSelectableCard",
   props: /* @__PURE__ */ mergeModels({
     variant: { default: "filled" },
+    headline: {},
     disabled: { type: Boolean, default: false },
     ariaLabel: {},
     ariaLabelledby: {}
@@ -16171,27 +16265,45 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         variant: __props.variant,
         selected: modelValue.value,
         clickable: !__props.disabled,
+        headline: __props.headline,
         class: "kds-selectable-card"
-      }, {
-        default: withCtx(() => [
+      }, createSlots({
+        "primary-action": withCtx(() => [
           createElementVNode("button", {
             type: "button",
-            "aria-label": __props.ariaLabel,
+            "aria-label": __props.ariaLabel ? __props.ariaLabel : __props.headline,
             "aria-labelledby": __props.ariaLabelledby,
             disabled: __props.disabled,
             "aria-pressed": modelValue.value,
             "data-kds-card-primary-action": "",
             onClick
-          }, null, 8, _hoisted_1$a),
+          }, null, 8, _hoisted_1$9)
+        ]),
+        default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
-        _: 3
-      }, 8, ["variant", "selected", "clickable"]);
+        _: 2
+      }, [
+        _ctx.$slots["header-actions"] ? {
+          name: "header-actions",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "header-actions", {}, void 0, true)
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots["header-accessory"] ? {
+          name: "header-accessory",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "header-accessory", {}, void 0, true)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["variant", "selected", "clickable", "headline"]);
     };
   }
 });
 
-const KdsSelectableCard = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-80c51086"]]);
+const KdsSelectableCard = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-af9b9bf6"]]);
 
 const kdsCardVariant = {
   FILLED: "filled",
@@ -16200,9 +16312,9 @@ const kdsCardVariant = {
 };
 const kdsCardVariants = Object.values(kdsCardVariant);
 
-const _hoisted_1$9 = { class: "kds-panel" };
-const _hoisted_2$6 = { class: "kds-panel-header" };
-const _hoisted_3$6 = ["id"];
+const _hoisted_1$8 = { class: "kds-panel" };
+const _hoisted_2$5 = { class: "kds-panel-header" };
+const _hoisted_3$5 = ["id"];
 const _hoisted_4$3 = {
   key: 0,
   class: "kds-panel-headline-text"
@@ -16218,7 +16330,7 @@ const _hoisted_7 = {
 };
 const _hoisted_8 = { class: "kds-panel-footer-leading" };
 const _hoisted_9 = { class: "kds-panel-footer-trailing" };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "KdsPanel",
   props: {
     headline: {},
@@ -16229,8 +16341,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const headlineId = useId();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
-        createElementVNode("div", _hoisted_2$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+        createElementVNode("div", _hoisted_2$5, [
           createElementVNode("div", {
             id: unref(headlineId),
             class: "kds-panel-headline"
@@ -16242,7 +16354,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               size: "small",
               onItemClick: __props.headline.onItemClick
             }), null, 16, ["onItemClick"])) : createCommentVNode("", true)
-          ], 8, _hoisted_3$6),
+          ], 8, _hoisted_3$5),
           __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 }, [
@@ -16309,9 +16421,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-c55a379c"]]);
+const KdsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-c55a379c"]]);
 
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "TabBarItemAccessory",
   props: {
     accessory: {},
@@ -16441,15 +16553,15 @@ const useTabBarAdaptiveLayout = ({
   };
 };
 
-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_1$7 = { class: "kds-tab-bar-wrapper" };
+const _hoisted_2$4 = ["id", "title", "aria-selected", "aria-controls", "tabindex", "disabled", "onClick", "onKeydown"];
+const _hoisted_3$4 = { class: "kds-tab-label" };
 const _hoisted_4$2 = {
   key: 1,
   class: "kds-tab-indicator"
 };
 const MIN_TAB_WIDTH_TOKEN = "--kds-dimension-component-width-4x";
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "KdsTabBar",
   props: /* @__PURE__ */ mergeModels({
     tabs: {},
@@ -16573,7 +16685,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       { immediate: true }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
         createElementVNode("div", {
           ref_key: "availableWidthContainer",
           ref: availableWidthContainer,
@@ -16603,15 +16715,15 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               onClick: ($event) => selectTab(tab),
               onKeydown: ($event) => handleKeydown($event, tab)
             }, [
-              tab.accessory && !(tab.accessory.type === "icon" && unref(shouldHideIcons)) ? (openBlock(), createBlock(_sfc_main$a, {
+              tab.accessory && !(tab.accessory.type === "icon" && unref(shouldHideIcons)) ? (openBlock(), createBlock(_sfc_main$9, {
                 key: 0,
                 accessory: tab.accessory,
                 "icon-size": __props.size === "large" ? "large" : "medium",
                 disabled: isTabDisabled(tab)
               }, null, 8, ["accessory", "icon-size", "disabled"])) : createCommentVNode("", true),
-              createElementVNode("span", _hoisted_3$5, toDisplayString(tab.label), 1),
+              createElementVNode("span", _hoisted_3$4, toDisplayString(tab.label), 1),
               modelValue.value === tab.value ? (openBlock(), createElementBlock("span", _hoisted_4$2)) : createCommentVNode("", true)
-            ], 42, _hoisted_2$5);
+            ], 42, _hoisted_2$4);
           }), 128))
         ], 2)
       ]);
@@ -16619,7 +16731,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTabBar = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-91f95f5f"]]);
+const KdsTabBar = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-91f95f5f"]]);
 
 const kdsTabBarSize = {
   SMALL: "small",
@@ -16627,7 +16739,7 @@ const kdsTabBarSize = {
 };
 const kdsTabBarSizes = Object.values(kdsTabBarSize);
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "LoadingSkeletonItem",
   props: {
     shape: { default: "text" }
@@ -16642,24 +16754,24 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const LoadingSkeletonItem = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-86829b28"]]);
+const LoadingSkeletonItem = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-86829b28"]]);
 
-const _hoisted_1$7 = {
+const _hoisted_1$6 = {
   key: 0,
   class: "kds-loading-skeleton",
   "aria-busy": "true"
 };
-const _hoisted_2$4 = {
+const _hoisted_2$3 = {
   key: 0,
   class: "kds-loading-skeleton-headline-with-paragraph"
 };
-const _hoisted_3$4 = { class: "kds-loading-skeleton-paragraph-lines" };
+const _hoisted_3$3 = { class: "kds-loading-skeleton-paragraph-lines" };
 const _hoisted_4$1 = {
   key: 1,
   class: "kds-loading-skeleton-input-with-label"
 };
 const _hoisted_5 = { class: "kds-loading-skeleton-list-item-text" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSkeleton",
   props: {
     variant: { default: "text" },
@@ -16672,17 +16784,17 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       "v59c08829": _ctx.repeatGap
     }));
     return (_ctx, _cache) => {
-      return __props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
+      return __props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.repeat, (index) => {
           return openBlock(), createElementBlock(Fragment, {
             key: `skeleton-${index}`
           }, [
-            __props.variant === "headline-with-paragraph" ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
+            __props.variant === "headline-with-paragraph" ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
               createVNode(LoadingSkeletonItem, {
                 shape: "text",
                 class: "headline"
               }),
-              createElementVNode("div", _hoisted_3$4, [
+              createElementVNode("div", _hoisted_3$3, [
                 createVNode(LoadingSkeletonItem, { shape: "text" }),
                 createVNode(LoadingSkeletonItem, { shape: "text" }),
                 createVNode(LoadingSkeletonItem, { shape: "text" })
@@ -16727,7 +16839,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLoadingSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-e6597718"]]);
+const KdsLoadingSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-e6597718"]]);
 
 const loadingSkeletonItemShape = {
   TEXT: "text",
@@ -16754,13 +16866,13 @@ const kdsLoadingSkeletonVariants = Object.values(
   kdsLoadingSkeletonVariant
 );
 
-const _hoisted_1$6 = {
+const _hoisted_1$5 = {
   key: 0,
   class: "indicator-selected"
 };
-const _hoisted_2$3 = { class: "content" };
-const _hoisted_3$3 = { class: "trailing-items" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_2$2 = { class: "content" };
+const _hoisted_3$2 = { class: "trailing-items" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "KdsNavItem",
   props: {
     label: {},
@@ -16831,8 +16943,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           onClick
         }), {
           default: withCtx(() => [
-            __props.selected ? (openBlock(), createElementBlock("div", _hoisted_1$6)) : createCommentVNode("", true),
-            createElementVNode("span", _hoisted_2$3, [
+            __props.selected ? (openBlock(), createElementBlock("div", _hoisted_1$5)) : createCommentVNode("", true),
+            createElementVNode("span", _hoisted_2$2, [
               __props.leadingIcon ? (openBlock(), createBlock(unref(KdsIcon), {
                 key: 0,
                 name: __props.leadingIcon,
@@ -16848,7 +16960,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 16, ["disabled", "aria-current", "title"])),
-        createElementVNode("div", _hoisted_3$3, [
+        createElementVNode("div", _hoisted_3$2, [
           __props.trailingIcon ? (openBlock(), createBlock(unref(KdsIcon), {
             key: 0,
             class: "trailing-icon",
@@ -16864,10 +16976,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsNavItem = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-d5db7ff7"]]);
+const KdsNavItem = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-d5db7ff7"]]);
 
-const _hoisted_1$5 = ["aria-label"];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = ["aria-label"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "KdsNavigation",
   props: /* @__PURE__ */ mergeModels({
     ariaLabel: {},
@@ -16908,44 +17020,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]);
         }), 128))
-      ], 8, _hoisted_1$5);
-    };
-  }
-});
-
-const KdsNavigation = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-6cc9519f"]]);
-
-const _hoisted_1$4 = { class: "kds-container-header" };
-const _hoisted_2$2 = {
-  key: 0,
-  class: "accessory"
-};
-const _hoisted_3$2 = {
-  key: 1,
-  class: "actions",
-  "data-kds-card-secondary-action": ""
-};
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "KdsContainerHeader",
-  props: {
-    title: {}
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        _ctx.$slots.accessory ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
-          renderSlot(_ctx.$slots, "accessory", {}, void 0, true)
-        ])) : createCommentVNode("", true),
-        createElementVNode("h6", null, toDisplayString(__props.title), 1),
-        _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
-          renderSlot(_ctx.$slots, "actions", {}, void 0, true)
-        ])) : createCommentVNode("", true)
-      ]);
+      ], 8, _hoisted_1$4);
     };
   }
 });
 
-const KdsContainerHeader = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-bbaa1f3b"]]);
+const KdsNavigation = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-6cc9519f"]]);
 
 const createUnwrappedPromise = () => {
   let resolve = () => {
@@ -17496,5 +17576,5 @@ const kdsResponsiveButtonGroupAlignments = Object.values(
   kdsResponsiveButtonGroupAlignment
 );
 
-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 };
+export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, _sfc_main$1l as KdsButton, _sfc_main$e as KdsCard, _sfc_main$10 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$P as KdsColorInput, KdsColorSwatch, _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