@knime/kds-components 0.9.1 → 0.11.0

package/dist/index.css

@@ -1,15 +1,32 @@
 
-.kds-avatar[data-v-4a34a186] {
+.kds-avatar {
+&[data-v-d6a313f1] {
   position: relative;
   display: inline-block;
-  inline-size: var(--kds-dimension-component-width-1-5x);
-  block-size: var(--kds-dimension-component-width-1-5x);
+  flex-shrink: 0;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   vertical-align: middle;
   border-radius: var(--kds-border-radius-container-pill);
 }
-.kds-avatar[data-v-4a34a186]::after {
+&.small[data-v-d6a313f1] {
+    inline-size: var(--kds-dimension-icon-0-75x);
+    block-size: var(--kds-dimension-icon-0-75x);
+}
+&.medium[data-v-d6a313f1] {
+    inline-size: var(--kds-dimension-icon-1x);
+    block-size: var(--kds-dimension-icon-1x);
+}
+&.large[data-v-d6a313f1] {
+    inline-size: var(--kds-dimension-component-width-1-25x);
+    block-size: var(--kds-dimension-component-height-1-25x);
+}
+&.xlarge[data-v-d6a313f1] {
+    inline-size: var(--kds-dimension-component-width-1-5x);
+    block-size: var(--kds-dimension-component-height-1-5x);
+}
+}
+.kds-avatar[data-v-d6a313f1]::after {
   position: absolute;
   inset: 0;
   box-sizing: border-box;
@@ -18,14 +35,14 @@
   border: var(--kds-border-base-muted);
   border-radius: inherit;
 }
-.kds-avatar-image[data-v-4a34a186] {
+.kds-avatar-image[data-v-d6a313f1] {
   display: block;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.kds-avatar-initials[data-v-4a34a186] {
+.kds-avatar-initials[data-v-d6a313f1] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -37,19 +54,32 @@
   user-select: none;
   background: var(--kds-color-background-primary-bold-initial);
 }
-.kds-avatar-initials > span[data-v-4a34a186] {
+.kds-avatar-initials > span[data-v-d6a313f1] {
   font-size: calc(1em + calc(100cqi - 2em) / 2);
 }
 
-.kds-color-swatch[data-v-c8fc7e8e] {
+.kds-color-swatch {
+&[data-v-bdb3dd24] {
   display: inline-block;
-  width: var(--kds-dimension-icon-0-75x);
-  height: var(--kds-dimension-icon-0-75x);
+  flex-shrink: 0;
   overflow: hidden;
   line-height: 0;
   border: var(--kds-border-base-muted);
   border-radius: var(--kds-border-radius-container-0-25x);
 }
+&.small[data-v-bdb3dd24] {
+    width: var(--kds-dimension-icon-0-75x);
+    height: var(--kds-dimension-icon-0-75x);
+}
+&.medium[data-v-bdb3dd24] {
+    width: var(--kds-dimension-icon-1x);
+    height: var(--kds-dimension-icon-1x);
+}
+&.large[data-v-bdb3dd24] {
+    width: var(--kds-dimension-component-width-1-25x);
+    height: var(--kds-dimension-component-height-1-25x);
+}
+}
 .kds-icon {
 &[data-v-3a57d423] {
   --icon-width: var(--kds-dimension-icon-1x);
@@ -183,26 +213,27 @@
 }
 
 .kds-live-status {
-&[data-v-8bf6a94a] {
+&[data-v-4dec8e94] {
   --dot-color: var(--kds-color-text-and-icon-disabled);
 
   display: inline-flex;
   flex-shrink: 0;
   gap: 0; /* gap already included in dot */
   align-items: center;
+  max-width: 100%;
   line-height: 0;
 }
-&.red[data-v-8bf6a94a] {
+&.red[data-v-4dec8e94] {
     --dot-color: var(--kds-color-text-and-icon-danger);
 }
-&.orange[data-v-8bf6a94a] {
+&.orange[data-v-4dec8e94] {
     --dot-color: var(--kds-color-text-and-icon-warning);
 }
-&.green[data-v-8bf6a94a] {
+&.green[data-v-4dec8e94] {
     --dot-color: var(--kds-color-text-and-icon-success);
 }
 .dot {
-&[data-v-8bf6a94a] {
+&[data-v-4dec8e94] {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -210,7 +241,7 @@
     width: var(--kds-dimension-icon-1-25x);
     height: var(--kds-dimension-icon-1-25x);
 }
-&[data-v-8bf6a94a]::after {
+&[data-v-4dec8e94]::after {
       display: block;
       width: 50%;
       height: 50%;
@@ -219,26 +250,28 @@
       border-radius: var(--kds-border-radius-container-pill);
 }
 }
-.label[data-v-8bf6a94a] {
+.label[data-v-4dec8e94] {
+    overflow: hidden;
+    text-overflow: ellipsis;
     font: var(--kds-font-base-subtext-medium);
     color: var(--kds-color-text-and-icon-neutral);
     white-space: nowrap;
 }
 &.size-medium {
-.dot[data-v-8bf6a94a] {
+.dot[data-v-4dec8e94] {
       width: var(--kds-dimension-icon-1x);
       height: var(--kds-dimension-icon-1x);
 }
-.label[data-v-8bf6a94a] {
+.label[data-v-4dec8e94] {
       font: var(--kds-font-base-subtext-small);
 }
 }
 &.size-small {
-.dot[data-v-8bf6a94a] {
+.dot[data-v-4dec8e94] {
       width: var(--kds-dimension-icon-0-75x);
       height: var(--kds-dimension-icon-0-75x);
 }
-.label[data-v-8bf6a94a] {
+.label[data-v-4dec8e94] {
       font: var(--kds-font-base-subtext-xsmall);
 }
 }
@@ -610,7 +643,7 @@ html.kds-legacy {
 }
 
 .checkbox {
-&[data-v-428e95ca] {
+&[data-v-32f17780] {
   --bg-initial: var(--kds-color-background-input-initial);
   --bg-hover: var(--kds-color-background-input-hover);
   --bg-active: var(--kds-color-background-input-active);
@@ -630,7 +663,7 @@ html.kds-legacy {
   background: none;
   border: none;
 }
-.control[data-v-428e95ca] {
+.control[data-v-32f17780] {
     position: relative;
     display: flex;
     flex-shrink: 0;
@@ -643,41 +676,40 @@ html.kds-legacy {
     border: var(--border);
     border-radius: var(--kds-border-radius-container-0-25x);
 }
-&:focus-visible .control[data-v-428e95ca] {
+&:focus-visible .control[data-v-32f17780] {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&:hover:not(.disabled) .control[data-v-428e95ca] {
+&:hover:not(.disabled) .control[data-v-32f17780] {
     background: var(--bg-hover);
 }
-&:active:not(.disabled) .control[data-v-428e95ca] {
+&:active:not(.disabled) .control[data-v-32f17780] {
     background: var(--bg-active);
 }
-&.checked[data-v-428e95ca],
-  &.indeterminate[data-v-428e95ca] {
+&.checked[data-v-32f17780],
+  &.indeterminate[data-v-32f17780] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
     --border: var(--kds-border-action-selected);
 }
 .content {
-&[data-v-428e95ca] {
+&[data-v-32f17780] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     text-rendering: geometricprecision;
 }
-& .label[data-v-428e95ca] {
-      padding-top: var(--kds-spacing-container-0-10x);
+& .label[data-v-32f17780] {
       font: var(--kds-font-base-interactive-small);
       color: var(--text-color);
 }
-& .helper-text[data-v-428e95ca] {
+& .helper-text[data-v-32f17780] {
       font: var(--kds-font-base-subtext-small);
       color: var(--helper-text-color);
 }
 }
-&.disabled[data-v-428e95ca] {
+&.disabled[data-v-32f17780] {
     --border: var(--kds-border-action-disabled);
     --icon-color: var(--kds-color-text-and-icon-disabled);
     --text-color: var(--kds-color-text-and-icon-disabled);
@@ -686,20 +718,20 @@ html.kds-legacy {
     cursor: default;
 }
 &.error {
-&[data-v-428e95ca] {
+&[data-v-32f17780] {
     --border: var(--kds-border-action-error);
     --icon-color: var(--kds-color-text-and-icon-danger);
     --text-color: var(--kds-color-text-and-icon-danger);
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);
 }
-&.checked[data-v-428e95ca],
-    &.indeterminate[data-v-428e95ca] {
+&.checked[data-v-32f17780],
+    &.indeterminate[data-v-32f17780] {
       --bg-initial: var(--kds-color-background-danger-initial);
 }
 }
 }
-.subtext-wrapper[data-v-428e95ca] {
+.subtext-wrapper[data-v-32f17780] {
   padding-left: calc(
     var(--kds-dimension-component-height-0-88x) +
       var(--kds-spacing-container-0-37x)
@@ -722,7 +754,7 @@ html.kds-legacy {
 }
 
 .radio {
-&[data-v-a7490a52] {
+&[data-v-27c361e4] {
   --bg-initial: var(--kds-color-background-input-initial);
   --bg-hover: var(--kds-color-background-input-hover);
   --bg-active: var(--kds-color-background-input-active);
@@ -742,7 +774,7 @@ html.kds-legacy {
   background: none;
   border: none;
 }
-.control[data-v-a7490a52] {
+.control[data-v-27c361e4] {
     position: relative;
     display: flex;
     flex-shrink: 0;
@@ -754,51 +786,50 @@ html.kds-legacy {
     border: var(--border);
     border-radius: 50%;
 }
-.control .dot[data-v-a7490a52] {
+.control .dot[data-v-27c361e4] {
     display: block;
     flex-shrink: 0;
     width: 100%;
     height: 100%;
 }
-.control .dot circle[data-v-a7490a52] {
+.control .dot circle[data-v-27c361e4] {
     fill: var(--dot-color);
     transform: scale(0.5);
     transform-origin: center;
     transform-box: fill-box;
 }
-&:focus-visible .control[data-v-a7490a52] {
+&:focus-visible .control[data-v-27c361e4] {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&:hover:not(.disabled) .control[data-v-a7490a52] {
+&:hover:not(.disabled) .control[data-v-27c361e4] {
     background: var(--bg-hover);
 }
-&:active:not(.disabled) .control[data-v-a7490a52] {
+&:active:not(.disabled) .control[data-v-27c361e4] {
     background: var(--bg-active);
 }
-&.selected[data-v-a7490a52] {
+&.selected[data-v-27c361e4] {
     --border: var(--kds-border-action-selected);
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
 }
 .content {
-&[data-v-a7490a52] {
+&[data-v-27c361e4] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-25x);
 }
-& .label[data-v-a7490a52] {
-      padding-top: var(--kds-spacing-container-0-10x);
+& .label[data-v-27c361e4] {
       font: var(--kds-font-base-interactive-small);
       color: var(--text-color);
 }
-& .helper-text[data-v-a7490a52] {
+& .helper-text[data-v-27c361e4] {
       font: var(--kds-font-base-subtext-small);
       color: var(--helper-text-color);
 }
 }
-&.disabled[data-v-a7490a52] {
+&.disabled[data-v-27c361e4] {
     --bg-initial: var(--kds-color-background-input-initial);
     --border: var(--kds-border-action-disabled);
     --dot-color: var(--kds-color-text-and-icon-disabled);
@@ -808,14 +839,14 @@ html.kds-legacy {
     cursor: default;
 }
 &.error {
-&[data-v-a7490a52] {
+&[data-v-27c361e4] {
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);
     --border: var(--kds-border-action-error);
     --dot-color: var(--kds-color-text-and-icon-danger);
     --text-color: var(--kds-color-text-and-icon-danger);
 }
-&.selected[data-v-a7490a52] {
+&.selected[data-v-27c361e4] {
       --bg-initial: var(--kds-color-background-danger-initial);
       --border: var(--kds-border-action-error);
 }
@@ -959,7 +990,7 @@ html.kds-legacy {
 }
 
 .container {
-&[data-v-cf72eb5a] {
+&[data-v-375bc2d8] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -970,46 +1001,46 @@ html.kds-legacy {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-cf72eb5a]:has(input:focus:not(:disabled)) {
+&[data-v-375bc2d8]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-cf72eb5a]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-375bc2d8]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-cf72eb5a] {
+&.error[data-v-375bc2d8] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-cf72eb5a] {
+&.disabled[data-v-375bc2d8] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-cf72eb5a] {
+&[data-v-375bc2d8] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-cf72eb5a] {
+&.leading[data-v-375bc2d8] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-cf72eb5a] {
+&.trailing[data-v-375bc2d8] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-cf72eb5a] {
+.container.disabled &[data-v-375bc2d8] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-cf72eb5a],
-  .container:has(.input-field.has-value) &[data-v-cf72eb5a] {
+.container:focus-within &[data-v-375bc2d8],
+  .container:has(.input-field.has-value) &[data-v-375bc2d8] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-cf72eb5a] {
+&[data-v-375bc2d8] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1028,33 +1059,33 @@ html.kds-legacy {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-cf72eb5a] {
+&[data-v-375bc2d8] {
     appearance: textfield;
 }
-&[data-v-cf72eb5a]::-webkit-outer-spin-button,
-    &[data-v-cf72eb5a]::-webkit-inner-spin-button {
+&[data-v-375bc2d8]::-webkit-outer-spin-button,
+    &[data-v-375bc2d8]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-cf72eb5a]::-webkit-search-cancel-button {
+&[type="search"][data-v-375bc2d8]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-cf72eb5a]::placeholder {
+&[data-v-375bc2d8]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-cf72eb5a] {
+&[data-v-375bc2d8] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-cf72eb5a]::placeholder {
+&[data-v-375bc2d8]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-cf72eb5a] {
+&[data-v-375bc2d8] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1064,20 +1095,20 @@ html.kds-legacy {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-cf72eb5a] {
+&.placeholder[data-v-375bc2d8] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-cf72eb5a] {
+&.disabled[data-v-375bc2d8] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-cf72eb5a] {
+.container:focus-within &[data-v-375bc2d8] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-cf72eb5a] {
+.clear-button[data-v-375bc2d8] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.trailing-slot[data-v-cf72eb5a] {
+.trailing-slot[data-v-375bc2d8] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -1131,7 +1162,7 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
 }
 
 .kds-popover {
-&[data-v-1e24f98e] {
+&[data-v-22bbe124] {
   padding: 0;
   margin: 0;
   overflow: visible;
@@ -1152,10 +1183,10 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
 
   /* noinspection CssInvalidFunction,CssInvalidAtRule */
 }
-&.full-width[data-v-1e24f98e] {
+&.full-width[data-v-22bbe124] {
     min-inline-size: anchor-size(width);
 }
-&.floating.top-right[data-v-1e24f98e] {
+&.floating.top-right[data-v-22bbe124] {
     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);
@@ -1163,7 +1194,7 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
       --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-1e24f98e] {
+&.floating.top-left[data-v-22bbe124] {
     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;
@@ -1171,7 +1202,7 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
       --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-1e24f98e] {
+&.floating.bottom-right[data-v-22bbe124] {
     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);
@@ -1179,7 +1210,7 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
       --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-1e24f98e] {
+&.floating.bottom-left[data-v-22bbe124] {
     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;
@@ -1216,7 +1247,7 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
   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-1e24f98e] {
+.kds-popover-default-content[data-v-22bbe124] {
   padding: var(--kds-spacing-container-0-75x);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -1225,19 +1256,18 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
   box-shadow: var(--kds-elevation-level-3);
 }
 
-.kds-info-popover-content[data-v-64f7db25] {
+.kds-info-popover-content[data-v-951f2a2b] {
   max-width: var(--kds-dimension-component-width-25x);
   padding: var(--kds-spacing-container-0-75x);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
-  white-space: pre-wrap;
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-37x);
   box-shadow: var(--kds-elevation-level-3);
 }
 
 .info-toggle-button {
-&[data-v-5070a398] {
+&[data-v-9c9e8369] {
   --bg-initial: transparent;
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -1258,20 +1288,20 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-5070a398] {
+&.hidden[data-v-9c9e8369] {
     opacity: 0;
 }
-&[data-v-5070a398]:focus-visible {
+&[data-v-9c9e8369]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-5070a398]:hover {
+&[data-v-9c9e8369]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-5070a398]:active {
+&[data-v-9c9e8369]:active {
     background-color: var(--bg-active);
 }
-&.selected[data-v-5070a398] {
+&.selected[data-v-9c9e8369] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
@@ -1293,7 +1323,7 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
 }
 
 .variable-toggle-button {
-&[data-v-64296d74] {
+&[data-v-ece95962] {
   --bg-initial: var(--kds-color-background-neutral-initial);
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -1314,27 +1344,27 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-64296d74] {
+&.hidden[data-v-ece95962] {
     opacity: 0;
 }
-&[data-v-64296d74]:focus-visible {
+&[data-v-ece95962]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-64296d74]:hover {
+&[data-v-ece95962]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-64296d74]:active {
+&[data-v-ece95962]:active {
     background-color: var(--bg-active);
 }
-&.pressed-or-set[data-v-64296d74] {
+&.pressed-or-set[data-v-ece95962] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
     --border: var(--kds-border-action-selected);
     --icon-color: var(--kds-color-text-and-icon-success);
 }
-&.error[data-v-64296d74] {
+&.error[data-v-ece95962] {
     --bg-initial: var(--kds-color-background-danger-initial);
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);
@@ -1343,8 +1373,153 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
 }
 }
 
+.kds-empty-state[data-v-b4af30cf] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  max-width: 280px;
+  padding: var(--kds-spacing-container-0-5x);
+}
+.kds-empty-state-headline[data-v-b4af30cf] {
+  margin: 0;
+  font: var(--kds-font-base-title-small);
+  color: var(--kds-color-text-and-icon-muted);
+  text-align: center;
+}
+.kds-empty-state-description[data-v-b4af30cf] {
+  margin: 0;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-muted);
+  text-align: center;
+}
+.kds-empty-state-action[data-v-b4af30cf] {
+  margin-top: var(--kds-spacing-container-0-12x);
+}
+
+.kds-card {
+&[data-v-4607badd] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-align: start;
+  cursor: pointer;
+  outline: none;
+  border-style: solid;
+  border-radius: var(--kds-border-radius-container-0-50x);
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+&[data-v-4607badd]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+    border-radius: var(--kds-border-radius-container-0-56x);
+}
+&[data-v-4607badd]:disabled {
+    cursor: default;
+}
+}
+
+/* Variant: Filled, Value: False */
+.variant-filled {
+&[data-v-4607badd] {
+  background: var(--kds-color-surface-default);
+  border: var(--kds-border-base-subtle);
+}
+&[data-v-4607badd]:hover:not(:disabled) {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-4607badd]:active:not(:disabled) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Outlined, Value: False */
+.variant-outlined {
+&[data-v-4607badd] {
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-base-muted);
+}
+&[data-v-4607badd]:hover:not(:disabled) {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-4607badd]:active:not(:disabled) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Transparent, Value: False */
+.variant-transparent {
+&[data-v-4607badd] {
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-action-transparent);
+}
+&[data-v-4607badd]:hover:not(:disabled) {
+    background: var(--kds-color-background-neutral-hover);
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-4607badd]:active:not(:disabled) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Filled, Value: True */
+.variant-filled.selected {
+&[data-v-4607badd] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&[data-v-4607badd]:hover:not(:disabled) {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-4607badd]:active:not(:disabled) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Outlined, Value: True */
+.variant-outlined.selected {
+&[data-v-4607badd] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&[data-v-4607badd]:hover:not(:disabled) {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-4607badd]:active:not(:disabled) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Transparent, Value: True */
+.variant-transparent.selected {
+&[data-v-4607badd] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&[data-v-4607badd]:hover:not(:disabled) {
+    background: var(--kds-color-background-selected-initial);
+    box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-4607badd]:active:not(:disabled) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
 .modal-header {
-&[data-v-7dbd159b] {
+&[data-v-ff11e839] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -1353,12 +1528,12 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
   font: var(--kds-font-base-title-medium-strong);
   color: var(--kds-color-text-and-icon-neutral);
 }
-& .modal-header-title[data-v-7dbd159b] {
+& .modal-header-title[data-v-ff11e839] {
     flex: 1 1 auto;
 }
 }
 .modal-body {
-&[data-v-7dbd159b] {
+&[data-v-ff11e839] {
   --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);
@@ -1366,18 +1541,19 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
   --modal-gap: var(--kds-spacing-container-1x);
 
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
-  overflow: var(--v3305d0f4);
+  overflow: var(--v670bbff1);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-&[data-variant="padded"][data-v-7dbd159b] {
+&[data-variant="padded"][data-v-ff11e839] {
     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-7dbd159b] {
+.modal-footer[data-v-ff11e839] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   justify-content: right;
@@ -1390,7 +1566,7 @@ body:has(dialog.modal[open]) {
 }
 
 .kds-modal {
-&[data-v-d8ed98e7] {
+&[data-v-f7b58ae1] {
   /* rule is broken it complains about local variables for no reason */
   /* stylelint-disable csstools/value-no-unknown-custom-properties */
   --modal-full-size: 95%;
@@ -1402,7 +1578,7 @@ body:has(dialog.modal[open]) {
   height: var(--modal-height);
   max-height: var(--modal-full-size);
   padding: 0;
-  overflow: var(--v1ee8fa3c);
+  overflow: var(--v6fde1eb1);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
   background-color: var(--kds-color-surface-default);
@@ -1419,55 +1595,55 @@ body:has(dialog.modal[open]) {
 
   /* hide if its not open */
 }
-&.width-small[data-v-d8ed98e7] {
+&.width-small[data-v-f7b58ae1] {
     --modal-width: var(--kds-dimension-component-width-25x);
     --modal-animation-time: 100ms;
     --modal-scale-base: 0.85;
 }
-&.width-medium[data-v-d8ed98e7] {
+&.width-medium[data-v-f7b58ae1] {
     --modal-width: var(--kds-dimension-component-width-32x);
     --modal-animation-time: 140ms;
     --modal-scale-base: 0.88;
 }
-&.width-large[data-v-d8ed98e7] {
+&.width-large[data-v-f7b58ae1] {
     --modal-width: var(--kds-dimension-component-width-45x);
     --modal-animation-time: 210ms;
     --modal-scale-base: 0.88;
 }
-&.width-xlarge[data-v-d8ed98e7] {
+&.width-xlarge[data-v-f7b58ae1] {
     --modal-width: var(--kds-dimension-component-width-61x);
     --modal-animation-time: 300ms;
     --modal-scale-base: 0.88;
 }
-&.width-full[data-v-d8ed98e7] {
+&.width-full[data-v-f7b58ae1] {
     --modal-width: var(--modal-full-size);
     --modal-animation-time: 350ms;
     --modal-scale-base: 0.92;
 }
-&.height-full[data-v-d8ed98e7] {
+&.height-full[data-v-f7b58ae1] {
     --modal-height: var(--modal-full-size);
 }
-&.height-auto[data-v-d8ed98e7] {
+&.height-auto[data-v-f7b58ae1] {
     --modal-height: fit-content;
 }
-&[data-v-d8ed98e7]:not([open]) {
+&[data-v-f7b58ae1]:not([open]) {
     display: none;
 }
-&[data-v-d8ed98e7]:focus-visible,
-  &[data-v-d8ed98e7]:focus {
+&[data-v-f7b58ae1]:focus-visible,
+  &[data-v-f7b58ae1]:focus {
     outline: none;
 }
-&[data-v-d8ed98e7]::backdrop {
+&[data-v-f7b58ae1]::backdrop {
     background: var(--kds-color-blanket-default);
     opacity: 0;
     transition: var(--modal-animation-time) allow-discrete;
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transition-property: display, opacity, overlay;
 }
-&[open][data-v-d8ed98e7]::backdrop {
+&[open][data-v-f7b58ae1]::backdrop {
     opacity: 1;
 }
-&[open][data-v-d8ed98e7] {
+&[open][data-v-f7b58ae1] {
     opacity: 1;
     transform: scale(1);
 }
@@ -1476,18 +1652,18 @@ body:has(dialog.modal[open]) {
 /** Animation starting styles */
 @starting-style {
 .kds-modal {
-&[data-v-d8ed98e7] {
+&[data-v-f7b58ae1] {
     opacity: 1;
     transform: scale(1);
 }
-&[open][data-v-d8ed98e7] {
+&[open][data-v-f7b58ae1] {
       opacity: 0;
       transform: scale(var(--modal-scale-base));
 }
-&[data-v-d8ed98e7]::backdrop {
+&[data-v-f7b58ae1]::backdrop {
       opacity: 1;
 }
-&[open][data-v-d8ed98e7]::backdrop {
+&[open][data-v-f7b58ae1]::backdrop {
       opacity: 0;
 }
 }
@@ -1499,143 +1675,3 @@ body:has(dialog.modal[open]) {
 .flush-left[data-v-67e036b5] {
   margin-right: auto;
 }
-
-.kds-card {
-&[data-v-c64f0e2e] {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  outline: none;
-  border-style: solid;
-  border-radius: var(--kds-border-radius-container-0-50x);
-  transition:
-    background-color 0.2s,
-    border-color 0.2s,
-    box-shadow 0.2s;
-}
-&[data-v-c64f0e2e]:focus-visible {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
-    border-radius: var(--kds-border-radius-container-0-56x);
-}
-&.disabled[data-v-c64f0e2e] {
-    cursor: default;
-}
-}
-
-/* Variant: Filled, Value: False */
-.variant-filled {
-&[data-v-c64f0e2e] {
-  background: var(--kds-color-surface-default);
-  border: var(--kds-border-base-subtle);
-}
-&[data-v-c64f0e2e]:hover:not(.disabled) {
-    box-shadow: var(--kds-elevation-level-3);
-}
-&[data-v-c64f0e2e]:active:not(.disabled) {
-    background: var(--kds-color-background-neutral-active);
-    box-shadow: var(--kds-elevation-level-1);
-}
-}
-
-/* Variant: Outlined, Value: False */
-.variant-outlined {
-&[data-v-c64f0e2e] {
-  background: var(--kds-color-background-neutral-initial);
-  border: var(--kds-border-base-muted);
-}
-&[data-v-c64f0e2e]:hover:not(.disabled) {
-    box-shadow: var(--kds-elevation-level-3);
-}
-&[data-v-c64f0e2e]:active:not(.disabled) {
-    background: var(--kds-color-background-neutral-active);
-    box-shadow: var(--kds-elevation-level-1);
-}
-}
-
-/* Variant: Transparent, Value: False */
-.variant-transparent {
-&[data-v-c64f0e2e] {
-  background: var(--kds-color-background-neutral-initial);
-  border: var(--kds-border-action-transparent);
-}
-&[data-v-c64f0e2e]:hover:not(.disabled) {
-    background: var(--kds-color-background-neutral-hover);
-    box-shadow: var(--kds-elevation-level-3);
-}
-&[data-v-c64f0e2e]:active:not(.disabled) {
-    background: var(--kds-color-background-neutral-active);
-    box-shadow: var(--kds-elevation-level-1);
-}
-}
-
-/* Variant: Filled, Value: True */
-.variant-filled.selected {
-&[data-v-c64f0e2e] {
-  background: var(--kds-color-background-selected-initial);
-  border: var(--kds-border-action-selected);
-}
-&[data-v-c64f0e2e]:hover:not(.disabled) {
-    box-shadow: var(--kds-elevation-level-3);
-}
-&[data-v-c64f0e2e]:active:not(.disabled) {
-    background: var(--kds-color-background-selected-active);
-    box-shadow: var(--kds-elevation-level-1);
-}
-}
-
-/* Variant: Outlined, Value: True */
-.variant-outlined.selected {
-&[data-v-c64f0e2e] {
-  background: var(--kds-color-background-selected-initial);
-  border: var(--kds-border-action-selected);
-}
-&[data-v-c64f0e2e]:hover:not(.disabled) {
-    box-shadow: var(--kds-elevation-level-3);
-}
-&[data-v-c64f0e2e]:active:not(.disabled) {
-    background: var(--kds-color-background-selected-active);
-    box-shadow: var(--kds-elevation-level-1);
-}
-}
-
-/* Variant: Transparent, Value: True */
-.variant-transparent.selected {
-&[data-v-c64f0e2e] {
-  background: var(--kds-color-background-selected-initial);
-  border: var(--kds-border-action-selected);
-}
-&[data-v-c64f0e2e]:hover:not(.disabled) {
-    background: var(--kds-color-background-selected-initial);
-    box-shadow: var(--kds-elevation-level-3);
-}
-&[data-v-c64f0e2e]:active:not(.disabled) {
-    background: var(--kds-color-background-selected-active);
-    box-shadow: var(--kds-elevation-level-1);
-}
-}
-
-.kds-empty-state[data-v-059bb01e] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: center;
-  max-width: 280px;
-  padding: var(--kds-spacing-container-0-5x);
-}
-.kds-empty-state-headline[data-v-059bb01e] {
-  margin: 0;
-  font: var(--kds-font-base-title-small);
-  color: var(--kds-color-text-and-icon-muted);
-  text-align: center;
-}
-.kds-empty-state-description[data-v-059bb01e] {
-  margin: 0;
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-muted);
-  text-align: center;
-}
-.kds-empty-state-action[data-v-059bb01e] {
-  margin-top: var(--kds-spacing-container-0-12x);
-}