@knime/kds-components 0.21.0 → 0.22.0

package/dist/index.css

@@ -474,7 +474,7 @@ html.kds-legacy {
 }
 
 .button {
-&[data-v-20cfd7e3] {
+&[data-v-a696a1ec] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -488,143 +488,143 @@ html.kds-legacy {
 
   /* for LinkButton */
 }
-&[data-v-20cfd7e3]:is(a) {
+&[data-v-a696a1ec]:is(a) {
     text-decoration: none;
 }
-&.disabled[data-v-20cfd7e3] {
+&.disabled[data-v-a696a1ec] {
     cursor: default;
 }
-&[data-v-20cfd7e3]:focus-visible {
+&[data-v-a696a1ec]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &.filled {
-&[data-v-20cfd7e3] {
+&[data-v-a696a1ec] {
     color: var(--kds-color-text-and-icon-primary-inverted);
     background-color: var(--kds-color-background-primary-bold-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-20cfd7e3] {
+&.disabled[data-v-a696a1ec] {
       color: var(--kds-color-text-and-icon-disabled-inverted);
       background-color: var(--kds-color-background-disabled-primary);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-20cfd7e3]:hover {
+&[data-v-a696a1ec]:hover {
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-20cfd7e3]:active {
+&[data-v-a696a1ec]:active {
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 &.destructive {
-&[data-v-20cfd7e3] {
+&[data-v-a696a1ec] {
       color: var(--kds-color-text-and-icon-danger-inverted);
       background-color: var(--kds-color-background-danger-bold-initial);
 }
-&.disabled[data-v-20cfd7e3] {
+&.disabled[data-v-a696a1ec] {
         color: var(--kds-color-text-and-icon-disabled-inverted);
         background-color: var(--kds-color-background-disabled-danger);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-20cfd7e3]:hover {
+&[data-v-a696a1ec]:hover {
           background-color: var(--kds-color-background-danger-bold-hover);
 }
-&[data-v-20cfd7e3]:active {
+&[data-v-a696a1ec]:active {
           background-color: var(--kds-color-background-danger-bold-active);
 }
 }
 }
 }
 &.outlined {
-&[data-v-20cfd7e3] {
+&[data-v-a696a1ec] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-default);
 }
-&.disabled[data-v-20cfd7e3] {
+&.disabled[data-v-a696a1ec] {
       color: var(--kds-color-text-and-icon-disabled);
       border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-20cfd7e3]:hover {
+&[data-v-a696a1ec]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-20cfd7e3]:active {
+&[data-v-a696a1ec]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-20cfd7e3] {
+&[data-v-a696a1ec] {
       color: var(--kds-color-text-and-icon-danger);
       border: var(--kds-border-action-error);
 }
-&.disabled[data-v-20cfd7e3] {
+&.disabled[data-v-a696a1ec] {
         color: var(--kds-color-text-and-icon-disabled);
         border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-20cfd7e3]:hover {
+&[data-v-a696a1ec]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-20cfd7e3]:active {
+&[data-v-a696a1ec]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.transparent {
-&[data-v-20cfd7e3] {
+&[data-v-a696a1ec] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-20cfd7e3] {
+&.disabled[data-v-a696a1ec] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-20cfd7e3]:hover {
+&[data-v-a696a1ec]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-20cfd7e3]:active {
+&[data-v-a696a1ec]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-20cfd7e3] {
+&[data-v-a696a1ec] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&.disabled[data-v-20cfd7e3] {
+&.disabled[data-v-a696a1ec] {
         color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-20cfd7e3]:hover {
+&[data-v-a696a1ec]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-20cfd7e3]:active {
+&[data-v-a696a1ec]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.toggled {
-&[data-v-20cfd7e3] {
+&[data-v-a696a1ec] {
     color: var(--kds-color-text-and-icon-selected);
     background-color: var(--kds-color-background-selected-initial);
     border: var(--kds-border-action-selected);
 }
-&.disabled[data-v-20cfd7e3] {
+&.disabled[data-v-a696a1ec] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-20cfd7e3]:hover {
+&[data-v-a696a1ec]:hover {
         background-color: var(--kds-color-background-selected-hover);
 }
-&[data-v-20cfd7e3]:active {
+&[data-v-a696a1ec]:active {
         background-color: var(--kds-color-background-selected-active);
 }
 }
 }
-& .label[data-v-20cfd7e3] {
+& .label[data-v-a696a1ec] {
     max-width: 200px;
     padding: 0 var(--kds-spacing-container-0-12x);
     overflow: hidden;
@@ -632,7 +632,7 @@ html.kds-legacy {
     white-space: nowrap;
     text-rendering: geometricprecision;
 }
-&.xsmall[data-v-20cfd7e3] {
+&.xsmall[data-v-a696a1ec] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-25x);
     padding: 0
@@ -644,7 +644,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-25x)
     );
 }
-&.small[data-v-20cfd7e3] {
+&.small[data-v-a696a1ec] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-5x);
     padding: 0
@@ -656,7 +656,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-37x)
     );
 }
-&.medium[data-v-20cfd7e3] {
+&.medium[data-v-a696a1ec] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0
@@ -669,7 +669,7 @@ html.kds-legacy {
     );
 }
 &.large {
-&[data-v-20cfd7e3] {
+&[data-v-a696a1ec] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0
@@ -681,11 +681,11 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-50x)
     );
 }
-& .label[data-v-20cfd7e3] {
+& .label[data-v-a696a1ec] {
       padding: 0 var(--kds-spacing-container-0-25x);
 }
 }
-&.success[data-v-20cfd7e3] {
+&.success[data-v-a696a1ec] {
     color: var(--kds-color-text-and-icon-success-inverted);
     background-color: var(--kds-color-background-success-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -694,7 +694,7 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.error[data-v-20cfd7e3] {
+&.error[data-v-a696a1ec] {
     color: var(--kds-color-text-and-icon-danger-inverted);
     background-color: var(--kds-color-background-danger-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -703,6 +703,14 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
+&.remove-border-radius-left[data-v-a696a1ec] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+&.remove-border-radius-right[data-v-a696a1ec] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
 }
 
 .kds-link {
@@ -838,13 +846,12 @@ html.kds-legacy {
 }
 
 .kds-list-item {
-&[data-v-3dac6df5] {
+&[data-v-0df9684f] {
   position: relative;
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
   width: 100%;
-  min-width: var(--kds-dimension-component-width-12x);
   padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
   color: var(--kds-color-text-and-icon-neutral);
   cursor: pointer;
@@ -854,36 +861,36 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-31x);
 }
 &.small {
-&[data-v-3dac6df5] {
+&[data-v-0df9684f] {
     gap: var(--kds-spacing-container-0-25x);
     align-items: flex-start;
     padding: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-5x);
     font: var(--kds-font-base-interactive-small);
 }
-.accessory[data-v-3dac6df5] {
+.accessory[data-v-0df9684f] {
       display: flex;
       padding: var(--kds-spacing-container-0-12x) 0;
 }
 }
 &.large {
-&[data-v-3dac6df5] {
+&[data-v-0df9684f] {
     font: var(--kds-font-base-interactive-small-strong);
 }
-.accessory[data-v-3dac6df5] {
+.accessory[data-v-0df9684f] {
       display: flex;
       align-items: center;
 }
 }
 .content {
-&[data-v-3dac6df5] {
+&[data-v-0df9684f] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     min-width: 0;
 }
-.large &[data-v-3dac6df5] {
+.large &[data-v-0df9684f] {
       justify-content: center;
       min-height: calc(
         var(--kds-dimension-component-height-2-5x) - 2 *
@@ -891,19 +898,19 @@ html.kds-legacy {
       );
 }
 .label {
-&[data-v-3dac6df5] {
+&[data-v-0df9684f] {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 }
-.prefix[data-v-3dac6df5] {
+.prefix[data-v-0df9684f] {
         flex-shrink: 0;
 }
-.special[data-v-3dac6df5] {
+.special[data-v-0df9684f] {
         font: var(--kds-font-base-interactive-small-italic);
 }
 }
-.subtext[data-v-3dac6df5] {
+.subtext[data-v-0df9684f] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -914,7 +921,7 @@ html.kds-legacy {
 }
 }
 .trailing-item {
-&[data-v-3dac6df5] {
+&[data-v-0df9684f] {
     display: flex;
     flex-shrink: 0;
     gap: var(--kds-spacing-container-0-12x);
@@ -922,69 +929,69 @@ html.kds-legacy {
     align-self: center;
     justify-content: flex-end;
 }
-.shortcut[data-v-3dac6df5] {
+.shortcut[data-v-0df9684f] {
       flex-shrink: 0;
       font: var(--kds-font-base-interactive-xsmall-strong);
       color: var(--kds-color-text-and-icon-muted);
       text-align: right;
       white-space: nowrap;
 }
-.trailing-item-reserve-space[data-v-3dac6df5] {
+.trailing-item-reserve-space[data-v-0df9684f] {
       width: var(--kds-dimension-icon-0-75x);
 }
 }
-&[data-v-3dac6df5]:hover:not(.disabled),
-  &.active[data-v-3dac6df5]:not(.disabled) {
+&[data-v-0df9684f]:hover:not(.disabled),
+  &.active[data-v-0df9684f]:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-3dac6df5]:active:not(.disabled) {
+&[data-v-0df9684f]:active:not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-3dac6df5] {
+&[data-v-0df9684f] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
 }
-.subtext[data-v-3dac6df5] {
+.subtext[data-v-0df9684f] {
       color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-3dac6df5]:hover,
-    &.active[data-v-3dac6df5] {
+&[data-v-0df9684f]:hover,
+    &.active[data-v-0df9684f] {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-3dac6df5]:active {
+&[data-v-0df9684f]:active {
       background: var(--kds-color-background-selected-active);
 }
-&.disabled[data-v-3dac6df5] {
+&.disabled[data-v-0df9684f] {
       background: var(--kds-color-background-selected-initial);
 }
 }
 &.missing {
-&[data-v-3dac6df5] {
+&[data-v-0df9684f] {
     color: var(--kds-color-text-and-icon-danger);
     background: var(--kds-color-background-danger-initial);
 }
-.subtext[data-v-3dac6df5] {
+.subtext[data-v-0df9684f] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&[data-v-3dac6df5]:hover,
-    &.active[data-v-3dac6df5] {
+&[data-v-0df9684f]:hover,
+    &.active[data-v-0df9684f] {
       background: var(--kds-color-background-danger-hover);
 }
-&[data-v-3dac6df5]:active {
+&[data-v-0df9684f]:active {
       background: var(--kds-color-background-danger-active);
 }
-&.disabled[data-v-3dac6df5] {
+&.disabled[data-v-0df9684f] {
       background: var(--kds-color-background-danger-initial);
 }
 }
 &.disabled {
-&[data-v-3dac6df5] {
+&[data-v-0df9684f] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.shortcut[data-v-3dac6df5],
-    .subtext[data-v-3dac6df5] {
+.shortcut[data-v-0df9684f],
+    .subtext[data-v-0df9684f] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
@@ -1024,7 +1031,7 @@ html.kds-legacy {
 }
 
 .kds-list-container {
-&[data-v-710126a1] {
+&[data-v-446a5ba1] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1033,25 +1040,36 @@ html.kds-legacy {
   padding: var(--kds-spacing-container-0-25x);
   overflow-y: auto;
 }
-&.standalone[data-v-710126a1] {
+&.standalone[data-v-446a5ba1] {
     border: var(--kds-border-base-subtle);
     border-radius: var(--kds-border-radius-container-0-31x);
 }
-&[data-v-710126a1]:focus-visible {
+&.menu[data-v-446a5ba1] {
+    border: none;
+}
+&[data-v-446a5ba1]: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-list-container-empty[data-v-710126a1] {
+.kds-list-container-empty[data-v-446a5ba1] {
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
 }
 
+.kds-menu-container[data-v-d87656d8] {
+  min-width: var(--kds-dimension-component-width-12x);
+  max-width: var(--kds-dimension-component-width-20x);
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+
 .kds-popover {
-&[data-v-914e6d2e] {
+&[data-v-83c11cee] {
   padding: 0;
   margin: 0;
   overflow: visible;
@@ -1072,10 +1090,10 @@ html.kds-legacy {
 
   /* noinspection CssInvalidFunction,CssInvalidAtRule */
 }
-&.full-width[data-v-914e6d2e] {
+&.full-width[data-v-83c11cee] {
     min-inline-size: anchor-size(width);
 }
-&.floating.top-right[data-v-914e6d2e] {
+&.floating.top-right[data-v-83c11cee] {
     inset: auto anchor(right) anchor(top) auto;
     margin: var(--kds-spacing-container-0-25x) 0
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
@@ -1083,7 +1101,7 @@ html.kds-legacy {
       --kds-popover-try-top-left, --kds-popover-try-bottom-right,
       --kds-popover-try-bottom-left, --kds-popover-try-top-right;
 }
-&.floating.top-left[data-v-914e6d2e] {
+&.floating.top-left[data-v-83c11cee] {
     inset: auto auto anchor(top) anchor(left);
     margin: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
@@ -1091,7 +1109,7 @@ html.kds-legacy {
       --kds-popover-try-top-right, --kds-popover-try-bottom-left,
       --kds-popover-try-bottom-right, --kds-popover-try-top-left;
 }
-&.floating.bottom-right[data-v-914e6d2e] {
+&.floating.bottom-right[data-v-83c11cee] {
     inset: anchor(bottom) anchor(right) auto auto;
     margin: var(--kds-spacing-container-0-25x) 0
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
@@ -1099,7 +1117,7 @@ html.kds-legacy {
       --kds-popover-try-bottom-left, --kds-popover-try-top-right,
       --kds-popover-try-top-left, --kds-popover-try-bottom-right;
 }
-&.floating.bottom-left[data-v-914e6d2e] {
+&.floating.bottom-left[data-v-83c11cee] {
     inset: anchor(bottom) auto auto anchor(left);
     margin: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
@@ -1136,7 +1154,7 @@ html.kds-legacy {
   margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
     var(--kds-spacing-container-0-25x) 0;
 }
-.kds-popover-default-content[data-v-914e6d2e] {
+.kds-popover-default-content[data-v-83c11cee] {
   padding: var(--kds-spacing-container-0-75x);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -1145,11 +1163,26 @@ html.kds-legacy {
   box-shadow: var(--kds-elevation-level-3);
 }
 
-.kds-menu-container[data-v-0257e1cd] {
-  max-width: var(--kds-dimension-component-width-20x);
-  background-color: var(--kds-color-surface-default);
-  border-radius: var(--kds-border-radius-container-0-50x);
-  box-shadow: var(--kds-elevation-level-3);
+.kds-split-button {
+&[data-v-f9ca012e] {
+  display: flex;
+}
+&.filled[data-v-f9ca012e] {
+    gap: var(--kds-spacing-container-0-10x);
+}
+&.outlined[data-v-f9ca012e] {
+    gap: var(--kds-spacing-container-none);
+}
+& .kds-split-button-primary.outlined[data-v-f9ca012e] {
+    border-right: none;
+}
+}
+.kds-split-button-primary[data-v-f9ca012e] {
+  flex-shrink: 1;
+  min-width: 0;
+}
+.kds-split-button-secondary[data-v-f9ca012e] {
+  flex-shrink: 0;
 }
 
 .kds-label-wrapper[data-v-13bea091] {
@@ -3209,7 +3242,7 @@ html.kds-legacy {
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-580aa83e] {
+.kds-search-results-container[data-v-b1809b6d] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
@@ -3476,7 +3509,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 
 .kds-multiselect-list-box {
-&[data-v-6266eeb5] {
+&[data-v-9fde3128] {
   position: relative;
   display: flex;
   flex: 1;
@@ -3487,52 +3520,52 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-31x);
 }
-&[data-v-6266eeb5]:has(:focus-visible) {
+&[data-v-9fde3128]:has(:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
 .kds-multiselect-list-box-list {
-&[data-v-6266eeb5] {
+&[data-v-9fde3128] {
   position: relative;
   flex-grow: 1;
-  min-width: var(--kds-dimension-component-width-12x);
   padding: calc(
     var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs)
   );
   margin: 0;
   overflow-y: auto;
 }
-&[data-v-6266eeb5]:focus {
+&[data-v-9fde3128]:focus {
     outline: none;
 }
 }
 .kds-multiselect-list-box-item {
-&[data-v-6266eeb5] {
+&[data-v-9fde3128] {
   height: var(--kds-dimension-component-height-1-5x);
   margin-top: var(--kds-spacing-container-0-10x);
 }
-&.kds-multiselect-list-box-item-first[data-v-6266eeb5] {
+&.kds-multiselect-list-box-item-first[data-v-9fde3128] {
     margin-top: 0;
 }
 }
-.kds-multiselect-list-box-content-grid[data-v-6266eeb5] {
+.kds-multiselect-list-box-content-grid[data-v-9fde3128] {
   display: grid;
   grid-template-rows: 1fr auto;
   min-height: calc(100% - 2 * var(--kds-core-border-width-xs));
 }
-.kds-multiselect-list-box-content[data-v-6266eeb5] {
+.kds-multiselect-list-box-content[data-v-9fde3128] {
   min-width: 0;
 }
-.kds-multiselect-sticky-bottom[data-v-6266eeb5] {
+.kds-multiselect-sticky-bottom[data-v-9fde3128] {
   position: sticky;
   bottom: calc(-1 * var(--kds-spacing-container-0-25x));
+  min-width: 0;
   padding: var(--kds-spacing-container-0-25x) 0;
   margin-bottom: calc(-1 * var(--kds-spacing-container-0-25x));
   background: var(--kds-color-surface-default);
   border-top: var(--kds-border-base-subtle);
 }
-.kds-multiselect-empty[data-v-6266eeb5] {
+.kds-multiselect-empty[data-v-9fde3128] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -3541,6 +3574,50 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   pointer-events: none;
 }
 
+.kds-twin-list-body[data-v-e05644d2] {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) var(--kds-dimension-component-width-1-5x)
+    minmax(0, 1fr);
+  gap: var(--kds-spacing-container-0-25x);
+}
+.kds-list-column {
+&[data-v-e05644d2] {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  }
+& .kds-list-box[data-v-e05644d2] {
+    flex: 1;
+    min-block-size: 0;
+}
+}
+.kds-list-header[data-v-e05644d2] {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: var(--kds-spacing-input-label-spacing-bottom);
+}
+.kds-list-label[data-v-e05644d2] {
+  font: var(--kds-font-base-title-small);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+.kds-list-count[data-v-e05644d2] {
+  font: var(--kds-font-base-title-xsmall);
+  color: var(--kds-color-text-and-icon-muted);
+}
+.kds-button-column[data-v-e05644d2] {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--kds-spacing-container-4x);
+}
+
+.kds-twin-list[data-v-c46b28b5] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-37x);
+}
+
 .kds-info-popover-content[data-v-951f2a2b] {
   max-width: var(--kds-dimension-component-width-25x);
   padding: var(--kds-spacing-container-0-75x);
@@ -3906,6 +3983,176 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 }
 
+@keyframes knight-rider-86829b28 {
+from {
+    background-position-x: 100%;
+}
+to {
+    background-position-x: -100%;
+}
+}
+.kds-loading-skeleton-item {
+&[data-v-86829b28] {
+  background-color: var(--kds-color-border-subtle);
+  background-image: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--kds-color-text-and-icon-neutral) 2%, transparent)
+      0%,
+    color-mix(in srgb, var(--kds-color-text-and-icon-neutral) 15%, transparent)
+      25%,
+    color-mix(in srgb, var(--kds-color-text-and-icon-neutral) 2%, transparent)
+      50%,
+    transparent 100%
+  );
+  background-repeat: no-repeat;
+  background-size: 200% 100%;
+  animation: knight-rider-86829b28 2s linear 200ms infinite;
+}
+&.text[data-v-86829b28] {
+    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] {
+    border-radius: var(--kds-border-radius-container-pill);
+}
+&.icon-large[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-1-25x);
+    height: var(--kds-dimension-component-height-1-25x);
+}
+&.icon-medium[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-1x);
+    height: var(--kds-dimension-component-height-1x);
+}
+&.icon-small[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-0-75x);
+    height: var(--kds-dimension-component-height-0-75x);
+}
+&.button-large[data-v-86829b28] {
+    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] {
+    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] {
+    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] {
+    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] {
+    height: var(--kds-dimension-component-height-1-75x);
+    border-radius: var(--kds-border-radius-container-0-37x);
+}
+&.label[data-v-86829b28] {
+    width: 35%;
+    height: var(--kds-dimension-component-height-0-75x);
+    border-radius: var(--kds-border-radius-container-0-50x);
+}
+&.card[data-v-86829b28] {
+    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] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--v59c08829);
+}
+.kds-loading-skeleton-headline-with-paragraph {
+&[data-v-e6597718] {
+  display: grid;
+  gap: var(--kds-spacing-container-1-25x);
+  }
+& .headline[data-v-e6597718] {
+    width: 50%;
+    height: var(--kds-dimension-component-height-1x);
+}
+& .kds-loading-skeleton-paragraph-lines {
+&[data-v-e6597718] {
+    display: grid;
+    gap: var(--kds-spacing-container-0-75x);
+    }
+&[data-v-e6597718] > *:nth-child(2) {
+      width: 75%;
+}
+&[data-v-e6597718] > *:nth-child(3) {
+      width: 50%;
+}
+}
+}
+.kds-loading-skeleton-input-with-label[data-v-e6597718] {
+  display: grid;
+  gap: var(--kds-spacing-container-0-75x);
+}
+.kds-loading-skeleton-list-item {
+&[data-v-e6597718] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  width: 100%;
+  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] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-25x);
+    min-width: 0;
+}
+&.kds-loading-skeleton-list-item-large {
+&[data-v-e6597718] {
+    padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
+    }
+& .kds-loading-skeleton-list-item-text {
+&[data-v-e6597718] {
+      justify-content: center;
+      }
+& .text[data-v-e6597718] {
+        height: var(--kds-dimension-component-height-0-88x);
+}
+}
+}
+&.kds-loading-skeleton-list-item-small {
+&[data-v-e6597718] {
+    gap: var(--kds-spacing-container-0-5x);
+    align-items: start;
+    padding: calc(
+        var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
+      )
+      var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-25x);
+    }
+& .kds-loading-skeleton-list-item-text[data-v-e6597718] {
+      justify-content: flex-start;
+}
+}
+&.kds-loading-skeleton-list-item-large-with-subtext {
+&[data-v-e6597718] {
+    align-items: center;
+    }
+& .kds-loading-skeleton-list-item-text {
+&[data-v-e6597718] {
+      justify-content: center;
+      }
+& .text[data-v-e6597718] {
+        height: var(--kds-dimension-component-height-0-75x);
+}
+}
+}
+}
+
 .modal-header {
 &[data-v-62740dc9] {
   display: flex;