@knime/kds-components 0.31.3 → 0.31.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @knime/kds-components
 
+## 0.31.4
+
+### Patch Changes
+
+- 53459fd: - Widen `KdsSearchResult` typings to match supported `KdsListContainer` options.
+  - Allow changing the leading icon of `KdsSearchInput`.
+  - Add an optional default slot for `KdsInlineMessage` body content.
+  - Add `clip` to `KdsPanel` body overflow options.
+  - Add `input` as a `KdsLoadingSkeleton` variant (in addition to `input-with-label`).
+  - Truncate headline of `KdsModal` to not break modals on very long headlines.
+  - @knime/kds-styles@0.31.4
+
 ## 0.31.3
 
 ### Patch Changes

package/dist/index.css

@@ -524,7 +524,7 @@ to {
 }
 
 .kds-inline-message {
-&[data-v-194a0dfd] {
+&[data-v-c54ea4b4] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-25x);
@@ -536,43 +536,43 @@ to {
   border-radius: var(--kds-border-radius-container-0-50x);
 }
 .header {
-&[data-v-194a0dfd] {
+&[data-v-c54ea4b4] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
 }
-.icon[data-v-194a0dfd] {
+.icon[data-v-c54ea4b4] {
       color: var(--icon-color);
 }
-.headline[data-v-194a0dfd] {
+.headline[data-v-c54ea4b4] {
       font: var(--kds-font-base-title-small-strong);
 }
 }
-.body[data-v-194a0dfd] {
+.body[data-v-c54ea4b4] {
     align-self: stretch;
     padding-left: var(--kds-spacing-container-1x);
     font: var(--kds-font-base-body-small);
     color: var(--kds-color-text-and-icon-muted);
 }
-&.info[data-v-194a0dfd] {
+&.info[data-v-c54ea4b4] {
     --icon-color: var(--kds-color-text-and-icon-info);
 
     background-color: var(--kds-color-background-static-info-muted);
     border: var(--kds-border-base-info);
 }
-&.success[data-v-194a0dfd] {
+&.success[data-v-c54ea4b4] {
     --icon-color: var(--kds-color-text-and-icon-success);
 
     background-color: var(--kds-color-background-static-success-muted);
     border: var(--kds-border-base-success);
 }
-&.error[data-v-194a0dfd] {
+&.error[data-v-c54ea4b4] {
     --icon-color: var(--kds-color-text-and-icon-danger);
 
     background-color: var(--kds-color-background-static-danger-muted);
     border: var(--kds-border-base-danger);
 }
-&.warning[data-v-194a0dfd] {
+&.warning[data-v-c54ea4b4] {
     --icon-color: var(--kds-color-text-and-icon-warning);
 
     background-color: var(--kds-color-background-static-warning-muted);
@@ -2796,7 +2796,7 @@ table:focus {
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-8930f00a] {
+.kds-search-results-container[data-v-f7236e9c] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
@@ -3733,7 +3733,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .kds-panel {
-&[data-v-d3124a50] {
+&[data-v-64966fb2] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -3741,7 +3741,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   min-height: 0;
   background-color: var(--kds-color-surface-default);
 }
-.kds-panel-header[data-v-d3124a50] {
+.kds-panel-header[data-v-64966fb2] {
     display: flex;
     flex: 0 0 auto;
     gap: var(--kds-spacing-container-0-25x);
@@ -3751,13 +3751,13 @@ textarea[data-v-36211819]::-webkit-scrollbar {
       calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs));
     border-bottom: var(--kds-border-base-subtle);
 }
-.kds-panel-headline[data-v-d3124a50] {
+.kds-panel-headline[data-v-64966fb2] {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
     min-width: 0;
 }
-.kds-panel-headline-text[data-v-d3124a50] {
+.kds-panel-headline-text[data-v-64966fb2] {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
@@ -3766,7 +3766,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
     font: var(--kds-font-base-title-medium-strong);
     white-space: nowrap;
 }
-.kds-panel-header-trailing[data-v-d3124a50] {
+.kds-panel-header-trailing[data-v-64966fb2] {
     display: flex;
     flex: 0 0 auto;
     gap: var(--kds-spacing-container-0-25x);
@@ -3774,21 +3774,21 @@ textarea[data-v-36211819]::-webkit-scrollbar {
     margin-left: auto;
 }
 .kds-panel-body {
-&[data-v-d3124a50] {
+&[data-v-64966fb2] {
     flex: 1 1 auto;
     min-height: 0;
-    overflow: var(--v2ddcad1c);
+    overflow: var(--d76547d6);
 }
-&[data-variant="padded"][data-v-d3124a50] {
+&[data-variant="padded"][data-v-64966fb2] {
       padding: var(--kds-spacing-container-0-75x);
 }
-&[tabindex="0"][data-v-d3124a50]:focus-visible {
+&[tabindex="0"][data-v-64966fb2]:focus-visible {
       outline: var(--kds-border-action-focused);
       outline-offset: var(--kds-spacing-offset-focus);
       border-radius: var(--kds-border-radius-container-0-31x);
 }
 }
-.kds-panel-footer[data-v-d3124a50] {
+.kds-panel-footer[data-v-64966fb2] {
     display: flex;
     flex: 0 0 auto;
     gap: var(--kds-spacing-container-0-25x);
@@ -3799,8 +3799,8 @@ textarea[data-v-36211819]::-webkit-scrollbar {
       var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
     border-top: var(--kds-border-base-subtle);
 }
-.kds-panel-footer-leading[data-v-d3124a50],
-  .kds-panel-footer-trailing[data-v-d3124a50] {
+.kds-panel-footer-leading[data-v-64966fb2],
+  .kds-panel-footer-trailing[data-v-64966fb2] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
@@ -3927,7 +3927,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 
-@keyframes knight-rider-86829b28 {
+@keyframes knight-rider-b7565402 {
 from {
     background-position-x: 100%;
 }
@@ -3936,7 +3936,7 @@ to {
 }
 }
 .kds-loading-skeleton-item {
-&[data-v-86829b28] {
+&[data-v-b7565402] {
   background-color: var(--kds-color-border-subtle);
   background-image: linear-gradient(
     90deg,
@@ -3950,98 +3950,98 @@ to {
   );
   background-repeat: no-repeat;
   background-size: 200% 100%;
-  animation: knight-rider-86829b28 2s linear 200ms infinite;
+  animation: knight-rider-b7565402 2s linear 200ms infinite;
 }
-&.text[data-v-86829b28] {
+&.text[data-v-b7565402] {
     height: var(--kds-dimension-component-height-0-75x);
     border-radius: var(--kds-border-radius-container-pill);
 }
-&.icon-large[data-v-86829b28],
-  &.icon-medium[data-v-86829b28],
-  &.icon-small[data-v-86829b28] {
+&.icon-large[data-v-b7565402],
+  &.icon-medium[data-v-b7565402],
+  &.icon-small[data-v-b7565402] {
     border-radius: var(--kds-border-radius-container-pill);
 }
-&.icon-large[data-v-86829b28] {
+&.icon-large[data-v-b7565402] {
     width: var(--kds-dimension-component-width-1-25x);
     height: var(--kds-dimension-component-height-1-25x);
 }
-&.icon-medium[data-v-86829b28] {
+&.icon-medium[data-v-b7565402] {
     width: var(--kds-dimension-component-width-1x);
     height: var(--kds-dimension-component-height-1x);
 }
-&.icon-small[data-v-86829b28] {
+&.icon-small[data-v-b7565402] {
     width: var(--kds-dimension-component-width-0-75x);
     height: var(--kds-dimension-component-height-0-75x);
 }
-&.button-large[data-v-86829b28] {
+&.button-large[data-v-b7565402] {
     width: var(--kds-dimension-component-width-4x);
     height: var(--kds-dimension-component-height-2-25x);
     border-radius: var(--kds-border-radius-container-0-50x);
 }
-&.button-medium[data-v-86829b28] {
+&.button-medium[data-v-b7565402] {
     width: var(--kds-dimension-component-width-4x);
     height: var(--kds-dimension-component-height-1-75x);
     border-radius: var(--kds-border-radius-container-0-37x);
 }
-&.button-small[data-v-86829b28] {
+&.button-small[data-v-b7565402] {
     width: var(--kds-dimension-component-width-4x);
     height: var(--kds-dimension-component-height-1-5x);
     border-radius: var(--kds-border-radius-container-0-37x);
 }
-&.button-xsmall[data-v-86829b28] {
+&.button-xsmall[data-v-b7565402] {
     width: var(--kds-dimension-component-width-4x);
     height: var(--kds-dimension-component-height-1-25x);
     border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.input-with-label[data-v-86829b28] {
+&.input[data-v-b7565402] {
     height: var(--kds-dimension-component-height-1-75x);
     border-radius: var(--kds-border-radius-container-0-37x);
 }
-&.label[data-v-86829b28] {
+&.label[data-v-b7565402] {
     width: 35%;
     height: var(--kds-dimension-component-height-0-75x);
     border-radius: var(--kds-border-radius-container-0-50x);
 }
-&.card[data-v-86829b28] {
+&.card[data-v-b7565402] {
     height: 100%;
     min-height: var(--kds-dimension-component-height-12x);
     border-radius: var(--kds-border-radius-container-0-37x);
 }
 }
 
-.kds-loading-skeleton[data-v-e6597718] {
+.kds-loading-skeleton[data-v-326c25f0] {
   display: flex;
   flex-direction: column;
-  gap: var(--v59c08829);
+  gap: var(--v18b57ee8);
 }
 .kds-loading-skeleton-headline-with-paragraph {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
   display: grid;
   gap: var(--kds-spacing-container-1-25x);
   }
-& .headline[data-v-e6597718] {
+& .headline[data-v-326c25f0] {
     width: 50%;
     height: var(--kds-dimension-component-height-1x);
 }
 & .kds-loading-skeleton-paragraph-lines {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
     display: grid;
     gap: var(--kds-spacing-container-0-75x);
     }
-&[data-v-e6597718] > *:nth-child(2) {
+&[data-v-326c25f0] > *:nth-child(2) {
       width: 75%;
 }
-&[data-v-e6597718] > *:nth-child(3) {
+&[data-v-326c25f0] > *:nth-child(3) {
       width: 50%;
 }
 }
 }
-.kds-loading-skeleton-input-with-label[data-v-e6597718] {
+.kds-loading-skeleton-input-with-label[data-v-326c25f0] {
   display: grid;
   gap: var(--kds-spacing-container-0-75x);
 }
 .kds-loading-skeleton-list-item {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -4049,7 +4049,7 @@ to {
   min-width: var(--kds-dimension-component-width-12x);
   padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
   }
-& .kds-loading-skeleton-list-item-text[data-v-e6597718] {
+& .kds-loading-skeleton-list-item-text[data-v-326c25f0] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
@@ -4057,20 +4057,20 @@ to {
     min-width: 0;
 }
 &.kds-loading-skeleton-list-item-large {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
     padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
     }
 & .kds-loading-skeleton-list-item-text {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
       justify-content: center;
       }
-& .text[data-v-e6597718] {
+& .text[data-v-326c25f0] {
         height: var(--kds-dimension-component-height-0-88x);
 }
 }
 }
 &.kds-loading-skeleton-list-item-small {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
     gap: var(--kds-spacing-container-0-5x);
     align-items: start;
     padding: calc(
@@ -4078,19 +4078,19 @@ to {
       )
       var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-25x);
     }
-& .kds-loading-skeleton-list-item-text[data-v-e6597718] {
+& .kds-loading-skeleton-list-item-text[data-v-326c25f0] {
       justify-content: flex-start;
 }
 }
 &.kds-loading-skeleton-list-item-large-with-subtext {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
     align-items: center;
     }
 & .kds-loading-skeleton-list-item-text {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
       justify-content: center;
       }
-& .text[data-v-e6597718] {
+& .text[data-v-326c25f0] {
         height: var(--kds-dimension-component-height-0-75x);
 }
 }
@@ -4347,7 +4347,7 @@ li {
 }
 
 .modal-header {
-&[data-v-62740dc9] {
+&[data-v-36cbff95] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -4356,12 +4356,16 @@ li {
   font: var(--kds-font-base-title-medium-strong);
   color: var(--kds-color-text-and-icon-neutral);
 }
-& .modal-header-headline[data-v-62740dc9] {
+& .modal-header-headline[data-v-36cbff95] {
     flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 }
 .modal-body {
-&[data-v-62740dc9] {
+&[data-v-36cbff95] {
   --modal-padding-left: var(--kds-spacing-container-1-5x);
   --modal-padding-right: var(--kds-spacing-container-1-5x);
   --modal-padding-top: var(--kds-spacing-container-0-5x);
@@ -4371,17 +4375,17 @@ li {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  overflow: var(--v81addf0a);
+  overflow: var(--d8a22254);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-&[data-variant="padded"][data-v-62740dc9] {
+&[data-variant="padded"][data-v-36cbff95] {
     gap: var(--modal-gap);
     padding: var(--modal-padding-top) var(--modal-padding-right)
       var(--modal-padding-bottom) var(--modal-padding-left);
 }
 }
-.modal-footer[data-v-62740dc9] {
+.modal-footer[data-v-36cbff95] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   justify-content: right;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, unref, resolveDynamicComponent, mergeProps, useTemplateRef, createVNode, withCtx, renderSlot, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, nextTick, useId, withModifiers, inject, provide, resolveComponent, withKeys, watchEffect, useAttrs, defineAsyncComponent, toRefs, useCssVars, normalizeProps, guardReactiveProps, createSlots, withDirectives, vShow, onBeforeUpdate, onBeforeUnmount, isRef, vModelText, createTextVNode, effectScope } from 'vue';
+import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, unref, resolveDynamicComponent, mergeProps, useTemplateRef, createVNode, renderSlot, createTextVNode, withCtx, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, nextTick, useId, withModifiers, inject, provide, resolveComponent, withKeys, watchEffect, useAttrs, defineAsyncComponent, toRefs, useCssVars, normalizeProps, guardReactiveProps, createSlots, withDirectives, vShow, onBeforeUpdate, onBeforeUnmount, isRef, vModelText, effectScope } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, onClickOutside, useVirtualList, useElementSize, useMousePressed, useTemplateRefsList, useEventListener } from '@vueuse/core';
 
 import './index.css';const kdsAvatarSize = {
@@ -1101,13 +1101,17 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"]),
           createElementVNode("div", _hoisted_3$t, toDisplayString(props.headline), 1)
         ]),
-        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$p, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+        props.description || _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$p, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(props.description), 1)
+          ], true)
+        ])) : createCommentVNode("", true)
       ], 10, _hoisted_1$10);
     };
   }
 });
 
-const KdsInlineMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["__scopeId", "data-v-194a0dfd"]]);
+const KdsInlineMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["__scopeId", "data-v-c54ea4b4"]]);
 
 const kdsInlineMessageVariant = {
   ERROR: "error",
@@ -20290,7 +20294,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean, default: false },
     autocomplete: {},
     results: {},
-    resultsMaxHeight: {}
+    resultsMaxHeight: {},
+    leadingIcon: { default: "search" }
   }, {
     "modelValue": { default: "" },
     "modelModifiers": {}
@@ -20303,7 +20308,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     const KdsListContainer = defineAsyncComponent(
       () => Promise.resolve().then(() => KdsListContainer$1)
     );
-    const props = createPropsRestProxy(__props, ["placeholder", "disabled", "error", "validating", "preserveSubTextSpace"]);
+    const props = createPropsRestProxy(__props, ["placeholder", "disabled", "leadingIcon", "error", "validating", "preserveSubTextSpace"]);
     const modelValue = useModel(__props, "modelValue");
     const emit = __emit;
     const baseInput = useTemplateRef("baseInput");
@@ -20375,7 +20380,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled,
             error: __props.error,
             autocomplete: __props.autocomplete,
-            "leading-icon": "search",
+            "leading-icon": __props.leadingIcon,
             clearable: true,
             style: popoverEl.value?.anchorStyle,
             role: __props.results ? "combobox" : void 0,
@@ -20387,7 +20392,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             onFocus,
             onBlur,
             onClick
-          }), null, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete", "style", "role", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded"]),
+          }), null, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete", "leading-icon", "style", "role", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded"]),
           __props.results ? (openBlock(), createBlock(unref(KdsPopover), {
             key: 0,
             ref: "popover",
@@ -20427,7 +20432,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-8930f00a"]]);
+const KdsSearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-f7236e9c"]]);
 
 const _hoisted_1$x = ["rows", "placeholder", "disabled", "autocomplete"];
 const DEFAULT_ROWS = 3;
@@ -24902,7 +24907,8 @@ const kdsCardVariants = Object.values(kdsCardVariant);
 const kdsPanelBodyOverflow = {
   AUTO: "auto",
   HIDDEN: "hidden",
-  VISIBLE: "visible"
+  VISIBLE: "visible",
+  CLIP: "clip"
 };
 const kdsPanelBodyOverflows = Object.values(kdsPanelBodyOverflow);
 const kdsPanelBodyVariant = {
@@ -24945,14 +24951,14 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v2ddcad1c": _ctx.bodyOverflow
+      "d76547d6": _ctx.bodyOverflow
     }));
     const headlineId = useId();
     const hasHeader = computed(
       () => Boolean(__props.headline) || Boolean(__props.headlineTrailingActions?.length)
     );
     const isBodyKeyboardFocusable = computed(
-      () => __props.bodyOverflow !== kdsPanelBodyOverflow.HIDDEN
+      () => __props.bodyOverflow !== kdsPanelBodyOverflow.HIDDEN && __props.bodyOverflow !== kdsPanelBodyOverflow.CLIP
     );
     const bodyAriaLabel = computed(
       () => isBodyKeyboardFocusable.value && __props.ariaLabel ? __props.ariaLabel : void 0
@@ -25045,7 +25051,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-d3124a50"]]);
+const KdsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-64966fb2"]]);
 
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "TabBarItemAccessory",
@@ -25378,7 +25384,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const LoadingSkeletonItem = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-86829b28"]]);
+const LoadingSkeletonItem = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-b7565402"]]);
 
 const _hoisted_1$8 = {
   key: 0,
@@ -25405,7 +25411,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v59c08829": _ctx.repeatGap
+      "v18b57ee8": _ctx.repeatGap
     }));
     return (_ctx, _cache) => {
       return __props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
@@ -25428,7 +25434,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 shape: "label",
                 class: "label"
               }),
-              createVNode(LoadingSkeletonItem, { shape: "input-with-label" })
+              createVNode(LoadingSkeletonItem, { shape: "input" })
             ])) : __props.variant?.startsWith("list-item-") ? (openBlock(), createElementBlock("div", {
               key: 2,
               class: normalizeClass([
@@ -25463,7 +25469,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLoadingSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-e6597718"]]);
+const KdsLoadingSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-326c25f0"]]);
 
 const loadingSkeletonItemShape = {
   TEXT: "text",
@@ -25476,10 +25482,11 @@ const loadingSkeletonItemShape = {
   BUTTON_SMALL: "button-small",
   BUTTON_XSMALL: "button-xsmall",
   CARD: "card",
-  INPUT_WITH_LABEL: "input-with-label"
+  INPUT: "input"
 };
 const kdsLoadingSkeletonVariant = {
   ...loadingSkeletonItemShape,
+  INPUT_WITH_LABEL: "input-with-label",
   HEADLINE_WITH_PARAGRAPH: "headline-with-paragraph",
   LIST_ITEM_LARGE: "list-item-large",
   LIST_ITEM_LARGE_WITH_SUBTEXT: "list-item-large-with-subtext",
@@ -25934,7 +25941,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v81addf0a": _ctx.overflow
+      "d8a22254": _ctx.overflow
     }));
     const props = createPropsRestProxy(__props, ["headline", "variant", "overflow"]);
     return (_ctx, _cache) => {
@@ -25969,7 +25976,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-62740dc9"]]);
+const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-36cbff95"]]);
 
 const _hoisted_1$3 = ["closedby"];
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({