@knime/kds-table 0.2.2 → 0.3.1

package/dist/index.css

@@ -290,7 +290,7 @@ tbody[data-v-70f2c330] {
 }
 
 .kds-progress-bar {
-&[data-v-5fdfbce2] {
+&[data-v-884d689a] {
   --progress-bar-background-color: var(--kds-color-surface-subtle);
   --progress-bar-foreground-color: var(
     --kds-color-background-primary-bold-initial
@@ -308,7 +308,7 @@ tbody[data-v-70f2c330] {
 
   /* the following two rules need to stay separate, as otherwise it causes it not to be applied in Chrome correctly */
 }
-& .progress[data-v-5fdfbce2] {
+& .progress[data-v-884d689a] {
     display: block;
     width: 100%;
     height: var(--progress-bar-height);
@@ -321,44 +321,44 @@ tbody[data-v-70f2c330] {
     border: none;
     border-radius: var(--progress-bar-radius);
 }
-& .progress[data-v-5fdfbce2]::-webkit-progress-bar {
+& .progress[data-v-884d689a]::-webkit-progress-bar {
     background-color: var(--progress-bar-background-color);
 }
-& .progress[data-v-5fdfbce2]::-webkit-progress-value {
+& .progress[data-v-884d689a]::-webkit-progress-value {
     background-color: var(--progress-bar-foreground-color);
     border-radius: var(--progress-bar-radius);
-    transition: width 0.5s;
+    transition: width var(--progress-bar-transition-duration, 0.5s);
 }
-& .progress[data-v-5fdfbce2]::-moz-progress-bar {
+& .progress[data-v-884d689a]::-moz-progress-bar {
     background-color: var(--progress-bar-foreground-color);
 }
-& .progress[data-v-5fdfbce2]:indeterminate {
+& .progress[data-v-884d689a]:indeterminate {
     background-color: var(--progress-bar-background-color);
     background-image: none;
 }
-& .progress[data-v-5fdfbce2]:indeterminate::-webkit-progress-bar {
+& .progress[data-v-884d689a]:indeterminate::-webkit-progress-bar {
     background-color: transparent;
 }
-& .progress[data-v-5fdfbce2]:indeterminate::-moz-progress-bar {
+& .progress[data-v-884d689a]:indeterminate::-moz-progress-bar {
     background-color: transparent;
 }
-& .indeterminate-bar[data-v-5fdfbce2] {
+& .indeterminate-bar[data-v-884d689a] {
     position: absolute;
     inset-block: 0;
     width: 35%;
     pointer-events: none;
     background-color: var(--progress-bar-foreground-color);
     border-radius: var(--kds-border-radius-container-pill);
-    animation: move-indeterminate-5fdfbce2 1.5s linear infinite;
+    animation: move-indeterminate-884d689a 1.5s linear infinite;
 }
 }
-.kds-progress-bar-medium[data-v-5fdfbce2] {
+.kds-progress-bar-medium[data-v-884d689a] {
   --progress-bar-height: var(--kds-dimension-component-height-0-25x);
 }
-.kds-progress-bar-large[data-v-5fdfbce2] {
+.kds-progress-bar-large[data-v-884d689a] {
   --progress-bar-height: var(--kds-dimension-component-height-0-75x);
 }
-@keyframes move-indeterminate-5fdfbce2 {
+@keyframes move-indeterminate-884d689a {
 0% {
     transform: translateX(-120%);
 }
@@ -400,7 +400,7 @@ tbody[data-v-70f2c330] {
 }
 
 .kds-live-status {
-&[data-v-01555495] {
+&[data-v-f20c5c00] {
   --dot-color: var(--kds-color-state-disabled);
   --dot-border-color: var(--kds-color-state-disabled-border);
 
@@ -411,20 +411,20 @@ tbody[data-v-70f2c330] {
   max-width: 100%;
   line-height: 0;
 }
-&.red[data-v-01555495] {
+&.red[data-v-f20c5c00] {
     --dot-color: var(--kds-color-state-error);
     --dot-border-color: var(--kds-color-state-error-border);
 }
-&.orange[data-v-01555495] {
+&.orange[data-v-f20c5c00] {
     --dot-color: var(--kds-color-state-warning);
     --dot-border-color: var(--kds-color-state-warning-border);
 }
-&.green[data-v-01555495] {
+&.green[data-v-f20c5c00] {
     --dot-color: var(--kds-color-state-success);
     --dot-border-color: var(--kds-color-state-success-border);
 }
 .dot {
-&[data-v-01555495] {
+&[data-v-f20c5c00] {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -432,7 +432,7 @@ tbody[data-v-70f2c330] {
     width: var(--kds-dimension-icon-1-25x);
     height: var(--kds-dimension-icon-1-25x);
 }
-&[data-v-01555495]::after {
+&[data-v-f20c5c00]::after {
       display: block;
       width: 50%;
       height: 50%;
@@ -444,7 +444,7 @@ tbody[data-v-70f2c330] {
       border-radius: var(--kds-border-radius-container-pill);
 }
 }
-.label[data-v-01555495] {
+.label[data-v-f20c5c00] {
     overflow: hidden;
     text-overflow: ellipsis;
     font: var(--kds-font-base-subtext-medium);
@@ -452,26 +452,26 @@ tbody[data-v-70f2c330] {
     white-space: nowrap;
 }
 &.size-medium {
-.dot[data-v-01555495] {
+.dot[data-v-f20c5c00] {
       width: var(--kds-dimension-icon-1x);
       height: var(--kds-dimension-icon-1x);
 }
-&[data-v-01555495]::after {
+&[data-v-f20c5c00]::after {
       border-width: var(--kds-border-width-icon-stroke-m);
 }
-.label[data-v-01555495] {
+.label[data-v-f20c5c00] {
       font: var(--kds-font-base-subtext-small);
 }
 }
 &.size-small {
-.dot[data-v-01555495] {
+.dot[data-v-f20c5c00] {
       width: var(--kds-dimension-icon-0-75x);
       height: var(--kds-dimension-icon-0-75x);
 }
-&[data-v-01555495]::after {
+&[data-v-f20c5c00]::after {
       border-width: var(--kds-border-width-icon-stroke-s);
 }
-.label[data-v-01555495] {
+.label[data-v-f20c5c00] {
       font: var(--kds-font-base-subtext-xsmall);
 }
 }
@@ -1202,7 +1202,7 @@ html.kds-legacy {
 }
 
 .kds-menu-container {
-&[data-v-9dc6d3f6] {
+&[data-v-ae4f1dab] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-10x);
@@ -1214,12 +1214,12 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-9dc6d3f6]:focus-visible {
+&[data-v-ae4f1dab]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
-.submenu-popover[data-v-9dc6d3f6] {
+.submenu-popover[data-v-ae4f1dab] {
   inset: anchor(top) auto auto anchor(right);
   padding: 0 var(--kds-spacing-container-0-25x);
   margin: 0;
@@ -1234,29 +1234,21 @@ html.kds-legacy {
   border-radius: 0;
   box-shadow: none;
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-right-dropdown {
   inset: anchor(top) auto auto anchor(right);
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-left-dropdown {
   inset: anchor(top) anchor(left) auto auto;
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-right-dropup {
   inset: auto auto anchor(bottom) anchor(right);
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-left-dropup {
   inset: auto anchor(left) anchor(bottom) auto;
 }
 
 .kds-popover {
-&[data-v-3354d162] {
+&[data-v-f41f0af7] {
   padding: 0;
   margin: 0;
   overflow: visible;
@@ -1267,16 +1259,6 @@ html.kds-legacy {
   border-radius: 0;
   box-shadow: none;
 
-  /* noinspection CssInvalidFunction */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
   /*
    * For custom placement the popover is positioned statically via inline
    * left/top styles. Explicitly clear the UA default `inset: 0` so the
@@ -1284,11 +1266,11 @@ html.kds-legacy {
    * light-dismiss / click-outside behavior).
    */
 }
-&.full-width[data-v-3354d162] {
+&.full-width[data-v-f41f0af7] {
     min-inline-size: anchor-size(width);
     max-inline-size: anchor-size(width);
 }
-&.floating.top-right[data-v-3354d162] {
+&.floating.top-right[data-v-f41f0af7] {
     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);
@@ -1296,7 +1278,14 @@ 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-3354d162] {
+&.floating.top-center[data-v-f41f0af7] {
+    inset: auto 0 anchor(top);
+    justify-self: anchor-center;
+    margin: var(--kds-spacing-container-0-25x);
+    position-try-fallbacks:
+      --kds-popover-try-bottom-center, --kds-popover-try-top-center;
+}
+&.floating.top-left[data-v-f41f0af7] {
     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;
@@ -1304,7 +1293,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-3354d162] {
+&.floating.bottom-right[data-v-f41f0af7] {
     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);
@@ -1312,7 +1301,14 @@ 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-3354d162] {
+&.floating.bottom-center[data-v-f41f0af7] {
+    inset: anchor(bottom) 0 auto;
+    justify-self: anchor-center;
+    margin: var(--kds-spacing-container-0-25x);
+    position-try-fallbacks:
+      --kds-popover-try-top-center, --kds-popover-try-bottom-center;
+}
+&.floating.bottom-left[data-v-f41f0af7] {
     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;
@@ -1320,41 +1316,43 @@ html.kds-legacy {
       --kds-popover-try-bottom-right, --kds-popover-try-top-left,
       --kds-popover-try-top-right, --kds-popover-try-bottom-left;
 }
-&.floating.custom[data-v-3354d162] {
+&.floating.custom[data-v-f41f0af7] {
     position: fixed;
     inset: auto;
     margin: 0;
 }
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-top-right {
   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);
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-top-center {
+  inset: auto auto anchor(top);
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) 0;
+}
 @position-try --kds-popover-try-top-left {
   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;
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-bottom-right {
   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);
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-bottom-center {
+  inset: anchor(bottom) auto auto;
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) 0;
+}
 @position-try --kds-popover-try-bottom-left {
   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;
 }
-.kds-popover-default-content[data-v-3354d162] {
+.kds-popover-default-content[data-v-f41f0af7] {
   padding: var(--kds-spacing-container-0-75x);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -1364,24 +1362,24 @@ html.kds-legacy {
 }
 
 .kds-split-button {
-&[data-v-8f48b87a] {
+&[data-v-ebc30e66] {
   display: flex;
 }
-&.filled[data-v-8f48b87a] {
+&.filled[data-v-ebc30e66] {
     gap: var(--kds-spacing-container-0-10x);
 }
-&.outlined[data-v-8f48b87a] {
+&.outlined[data-v-ebc30e66] {
     gap: var(--kds-spacing-container-none);
 }
-& .kds-split-button-primary.outlined[data-v-8f48b87a] {
+& .kds-split-button-primary.outlined[data-v-ebc30e66] {
     border-right: none;
 }
 }
-.kds-split-button-primary[data-v-8f48b87a] {
+.kds-split-button-primary[data-v-ebc30e66] {
   flex-shrink: 1;
   min-width: 0;
 }
-.kds-split-button-secondary[data-v-8f48b87a] {
+.kds-split-button-secondary[data-v-ebc30e66] {
   flex-shrink: 0;
 }
 
@@ -1635,7 +1633,7 @@ html.kds-legacy {
   margin-left: var(--kds-spacing-container-0-12x);
 }
 
-.kds-text-input-suggestions[data-v-83f45d15] {
+.kds-text-input-suggestions[data-v-dd35e2a4] {
   max-height: var(--kds-dimension-component-height-12x);
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
@@ -1792,7 +1790,7 @@ html.kds-legacy {
   cursor: pointer;
 }
 
-.file-explorer[data-v-921486c1] {
+.file-explorer[data-v-da0e6dab] {
   display: flex;
   flex: 1 0 0%;
   flex-direction: column;
@@ -1801,10 +1799,10 @@ html.kds-legacy {
   /* needed so that the virtualization container can size the wrapper properly */
   min-height: 0;
 }
-.file-explorer-item[data-v-921486c1] {
-  height: var(--v6215695b);
+.file-explorer-item[data-v-da0e6dab] {
+  height: var(--v44ee6cb4);
 }
-thead[data-v-921486c1] {
+thead[data-v-da0e6dab] {
   /* Hide table head for better readability but keeping it for a11y reasons */
   position: absolute;
 
@@ -1815,7 +1813,7 @@ thead[data-v-921486c1] {
   overflow: hidden;
   white-space: nowrap; /* added line */
 }
-table[data-v-921486c1] {
+table[data-v-da0e6dab] {
   height: 100%;
   overflow: hidden auto;
   scrollbar-gutter: stable;
@@ -1826,31 +1824,31 @@ table[data-v-921486c1] {
 }
 table,
 tbody {
-&[data-v-921486c1] {
+&[data-v-da0e6dab] {
   width: 100%;
   border-spacing: 0;
   }
-&[data-v-921486c1]:not(:has(.empty)) {
+&[data-v-da0e6dab]:not(:has(.empty)) {
     display: block;
 }
 }
 table:focus {
-&[data-v-921486c1] {
+&[data-v-da0e6dab] {
   outline: none;
   }
-&.keyboard-focus[data-v-921486c1] {
+&.keyboard-focus[data-v-da0e6dab] {
     outline: 2px solid var(--kds-color-focus-outline);
     border-radius: var(--kds-border-radius-container-0-25x);
 }
 }
-.empty[data-v-921486c1] {
+.empty[data-v-da0e6dab] {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--kds-spacing-container-0-37x);
   margin: var(--kds-spacing-container-4x) 0;
 }
-.custom-preview[data-v-921486c1] {
+.custom-preview[data-v-da0e6dab] {
   position: fixed;
   top: 0;
   left: 0;
@@ -2093,6 +2091,144 @@ table:focus {
   align-items: flex-start;
 }
 
+.toggle-switch {
+&[data-v-417fc16d] {
+  --bg-initial: var(--kds-color-background-neutral-bold-initial);
+  --bg-hover: var(--kds-color-background-neutral-bold-hover);
+  --bg-active: var(--kds-color-background-neutral-bold-active);
+  --border: var(--kds-border-action-input);
+  --knob-color: var(--kds-color-toggle-switch-knob-initial);
+  --icon-color: var(--kds-color-toggle-switch-icon-off);
+  --text-color: var(--kds-color-text-and-icon-neutral);
+
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  background: none;
+  border: none;
+}
+&.small[data-v-417fc16d] {
+    font: var(--kds-font-base-title-small);
+}
+&.medium[data-v-417fc16d] {
+    font: var(--kds-font-base-title-medium);
+}
+&.label-right[data-v-417fc16d] {
+    flex-direction: row;
+    gap: var(--kds-spacing-container-0-37x);
+}
+&.label-top[data-v-417fc16d] {
+    flex-direction: column-reverse;
+    gap: var(--kds-spacing-container-0-12x);
+    align-items: flex-start;
+}
+&.small.label-right[data-v-417fc16d] {
+    gap: var(--kds-spacing-container-0-37x);
+}
+&.medium.label-right[data-v-417fc16d] {
+    gap: var(--kds-spacing-container-0-5x);
+}
+&.small.label-top[data-v-417fc16d] {
+    gap: var(--kds-spacing-container-0-12x);
+}
+&.medium.label-top[data-v-417fc16d] {
+    gap: var(--kds-spacing-container-0-25x);
+}
+.control[data-v-417fc16d] {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    background: var(--bg-initial);
+    border: var(--border);
+    border-radius: var(--kds-border-radius-container-pill);
+    transition:
+      background 0.2s ease,
+      border 0.2s ease;
+}
+&.small .control[data-v-417fc16d] {
+    width: var(--kds-dimension-component-width-1-75x);
+    height: var(--kds-dimension-component-height-1x);
+    padding: var(--kds-spacing-container-0-10x);
+}
+&.medium .control[data-v-417fc16d] {
+    width: var(--kds-dimension-component-width-2-25x);
+    height: var(--kds-dimension-component-height-1-25x);
+    padding: var(--kds-spacing-container-0-10x);
+}
+&:focus-visible .control[data-v-417fc16d] {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&:hover:not(.disabled) .control[data-v-417fc16d] {
+    background: var(--bg-hover);
+}
+&:active:not(.disabled) .control[data-v-417fc16d] {
+    background: var(--bg-active);
+}
+&.checked[data-v-417fc16d] {
+    --bg-initial: var(--kds-color-background-primary-bold-initial);
+    --bg-hover: var(--kds-color-background-primary-bold-hover);
+    --bg-active: var(--kds-color-background-primary-bold-active);
+    --border: var(--kds-border-action-primary);
+    --icon-color: var(--kds-color-toggle-switch-icon-on);
+}
+.knob[data-v-417fc16d] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--icon-color);
+    background: var(--knob-color);
+    border-radius: var(--kds-border-radius-container-pill);
+    box-shadow: var(--kds-box-shadow-knob);
+    transition:
+      transform 0.2s ease,
+      background 0.2s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+.knob[data-v-417fc16d] {
+      transition: none;
+}
+}
+&.small .knob[data-v-417fc16d] {
+    width: var(--kds-dimension-component-width-0-75x);
+    height: var(--kds-dimension-component-height-0-75x);
+}
+&.medium .knob[data-v-417fc16d] {
+    width: var(--kds-dimension-component-width-1x);
+    height: var(--kds-dimension-component-height-1x);
+}
+&.checked .knob[data-v-417fc16d] {
+    transform: translateX(100%);
+}
+.content {
+&[data-v-417fc16d] {
+    display: flex;
+    flex-direction: column;
+}
+& .label[data-v-417fc16d] {
+      color: var(--text-color);
+}
+}
+&.disabled[data-v-417fc16d] {
+    --bg-initial: var(--kds-color-background-disabled-default);
+    --border: var(--kds-border-action-disabled);
+    --knob-color: var(--kds-color-toggle-switch-knob-disabled);
+    --icon-color: var(--kds-color-toggle-switch-icon-disabled);
+    --text-color: var(--kds-color-text-and-icon-disabled);
+
+    cursor: default;
+}
+&.disabled.checked[data-v-417fc16d] {
+    --bg-initial: var(--kds-color-background-disabled-primary);
+    --border: var(--kds-border-action-transparent);
+}
+}
+
 .radio {
 &[data-v-f4f6392a] {
   --bg-initial: var(--kds-color-background-input-initial);
@@ -2670,7 +2806,7 @@ table:focus {
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-aec3e3d0] {
+.kds-search-results-container[data-v-8930f00a] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
@@ -2802,6 +2938,12 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 
+.kds-date-time-input[data-v-f2ad3cef] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--kds-spacing-container-0-25x);
+}
+
 .kds-dropdown-trigger-button {
 &[data-v-1bb2d375] {
   display: flex;
@@ -2891,6 +3033,17 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 
+.kds-zoned-date-time-input[data-v-7dcebccd] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-75x);
+}
+.date-time-row[data-v-7dcebccd] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--kds-spacing-container-0-25x);
+}
+
 .kds-list-item-button {
 &[data-v-21fb5571] {
   position: relative;
@@ -3088,7 +3241,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   pointer-events: none;
 }
 
-.kds-twin-list-body[data-v-11062d8e] {
+.kds-twin-list-body[data-v-eb1bc043] {
   display: grid;
   grid-template-columns:
     minmax(0, 1fr) var(--kds-dimension-component-width-1-5x)
@@ -3096,31 +3249,31 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   gap: var(--kds-spacing-container-0-25x);
 }
 .kds-list-column {
-&[data-v-11062d8e] {
+&[data-v-eb1bc043] {
   display: flex;
   flex-direction: column;
   min-block-size: 0;
   }
-& .kds-list-box[data-v-11062d8e] {
+& .kds-list-box[data-v-eb1bc043] {
     flex: 1;
     min-block-size: 0;
 }
 }
-.kds-list-header[data-v-11062d8e] {
+.kds-list-header[data-v-eb1bc043] {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: var(--kds-spacing-input-label-spacing-bottom);
 }
-.kds-list-label[data-v-11062d8e] {
+.kds-list-label[data-v-eb1bc043] {
   font: var(--kds-font-base-title-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-.kds-list-count[data-v-11062d8e] {
+.kds-list-count[data-v-eb1bc043] {
   font: var(--kds-font-base-title-xsmall);
   color: var(--kds-color-text-and-icon-muted);
 }
-.kds-button-column[data-v-11062d8e] {
+.kds-button-column[data-v-eb1bc043] {
   display: flex;
   flex-direction: column;
   padding-top: var(--kds-spacing-container-4x);
@@ -3172,7 +3325,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .info-toggle-button {
-&[data-v-2e9ef96a] {
+&[data-v-67a8974e] {
   --bg-initial: transparent;
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -3193,20 +3346,20 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-2e9ef96a] {
+&.hidden[data-v-67a8974e] {
     opacity: 0;
 }
-&[data-v-2e9ef96a]:focus-visible {
+&[data-v-67a8974e]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-2e9ef96a]:hover {
+&[data-v-67a8974e]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-2e9ef96a]:active {
+&[data-v-67a8974e]:active {
     background-color: var(--bg-active);
 }
-&.selected[data-v-2e9ef96a] {
+&.selected[data-v-67a8974e] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
@@ -4251,7 +4404,7 @@ body:has(dialog.modal[open]) {
 }
 
 .kds-modal {
-&[data-v-f4a6776f] {
+&[data-v-5cf0b3d2] {
   /* rule is broken it complains about local variables for no reason */
   /* stylelint-disable csstools/value-no-unknown-custom-properties */
   --modal-full-size: 95%;
@@ -4263,7 +4416,7 @@ body:has(dialog.modal[open]) {
   height: var(--modal-height);
   max-height: var(--modal-full-size);
   padding: 0;
-  overflow: var(--v5b2d4b6a);
+  overflow: var(--v94ce1e22);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
   background-color: var(--kds-color-surface-default);
@@ -4280,55 +4433,55 @@ body:has(dialog.modal[open]) {
 
   /* hide if its not open */
 }
-&.width-small[data-v-f4a6776f] {
+&.width-small[data-v-5cf0b3d2] {
     --modal-width: var(--kds-dimension-component-width-25x);
     --modal-animation-time: 100ms;
     --modal-scale-base: 0.85;
 }
-&.width-medium[data-v-f4a6776f] {
+&.width-medium[data-v-5cf0b3d2] {
     --modal-width: var(--kds-dimension-component-width-32x);
     --modal-animation-time: 140ms;
     --modal-scale-base: 0.88;
 }
-&.width-large[data-v-f4a6776f] {
+&.width-large[data-v-5cf0b3d2] {
     --modal-width: var(--kds-dimension-component-width-45x);
     --modal-animation-time: 210ms;
     --modal-scale-base: 0.88;
 }
-&.width-xlarge[data-v-f4a6776f] {
+&.width-xlarge[data-v-5cf0b3d2] {
     --modal-width: var(--kds-dimension-component-width-61x);
     --modal-animation-time: 300ms;
     --modal-scale-base: 0.88;
 }
-&.width-full[data-v-f4a6776f] {
+&.width-full[data-v-5cf0b3d2] {
     --modal-width: var(--modal-full-size);
     --modal-animation-time: 350ms;
     --modal-scale-base: 0.92;
 }
-&.height-full[data-v-f4a6776f] {
+&.height-full[data-v-5cf0b3d2] {
     --modal-height: var(--modal-full-size);
 }
-&.height-auto[data-v-f4a6776f] {
+&.height-auto[data-v-5cf0b3d2] {
     --modal-height: fit-content;
 }
-&[data-v-f4a6776f]:not([open]) {
+&[data-v-5cf0b3d2]:not([open]) {
     display: none;
 }
-&[data-v-f4a6776f]:focus-visible,
-  &[data-v-f4a6776f]:focus {
+&[data-v-5cf0b3d2]:focus-visible,
+  &[data-v-5cf0b3d2]:focus {
     outline: none;
 }
-&[data-v-f4a6776f]::backdrop {
+&[data-v-5cf0b3d2]::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-f4a6776f]::backdrop {
+&[open][data-v-5cf0b3d2]::backdrop {
     opacity: 1;
 }
-&[open][data-v-f4a6776f] {
+&[open][data-v-5cf0b3d2] {
     opacity: 1;
     transform: scale(1);
 }
@@ -4337,18 +4490,18 @@ body:has(dialog.modal[open]) {
 /** Animation starting styles */
 @starting-style {
 .kds-modal {
-&[data-v-f4a6776f] {
+&[data-v-5cf0b3d2] {
     opacity: 1;
     transform: scale(1);
 }
-&[open][data-v-f4a6776f] {
+&[open][data-v-5cf0b3d2] {
       opacity: 0;
       transform: scale(var(--modal-scale-base));
 }
-&[data-v-f4a6776f]::backdrop {
+&[data-v-5cf0b3d2]::backdrop {
       opacity: 1;
 }
-&[open][data-v-f4a6776f]::backdrop {
+&[open][data-v-5cf0b3d2]::backdrop {
       opacity: 0;
 }
 }
@@ -4554,26 +4707,26 @@ td {
 }
 
 tr {
-&[data-v-b1ac99a6] {
+&[data-v-640baae1] {
   display: flex;
   border-bottom: var(--kds-border-base-subtle);
 }
 & td {
-&.deletion-cell-spacer[data-v-b1ac99a6] {
+&.deletion-cell-spacer[data-v-640baae1] {
       width: var(--kds-dimension-component-width-2x);
       min-width: var(--kds-dimension-component-width-2x);
 }
-& .skeleton[data-v-b1ac99a6] {
+& .skeleton[data-v-640baae1] {
       padding: var(--kds-spacing-container-0-12x) 0;
 }
 &.select-cell {
-&[data-v-b1ac99a6] {
+&[data-v-640baae1] {
       display: flex;
       justify-content: center;
       width: var(--kds-dimension-component-width-2x);
       min-width: var(--kds-dimension-component-width-2x);
 }
-& .select-checkbox[data-v-b1ac99a6] {
+& .select-checkbox[data-v-640baae1] {
         /* With this added padding the checkbox appears centered initially */
         padding: var(--kds-spacing-container-0-10x);
 }
@@ -4598,13 +4751,13 @@ tr {
 }
 
 .container {
-&[data-v-fb9f9377] {
+&[data-v-a66c9aef] {
   flex: 1 1 0;
 }
-&.fit-content[data-v-fb9f9377] {
+&.fit-content[data-v-a66c9aef] {
     flex: 0 0 auto;
 }
-& .header-container[data-v-fb9f9377] {
+& .header-container[data-v-a66c9aef] {
     position: sticky;
     top: 0;
     z-index: var(--z-index-sticky-header);
@@ -4612,7 +4765,7 @@ tr {
     flex: 1;
     flex-direction: column;
 }
-& tbody[data-v-fb9f9377] {
+& tbody[data-v-a66c9aef] {
     /**
       * Necessary for the absolutely placed elements inside of it (e.g. cell selection overlay)
       * to scroll with the body.
@@ -4631,11 +4784,11 @@ tr {
 }
 }
 .resize-scroll-spacer {
-&[data-v-fb9f9377] {
+&[data-v-a66c9aef] {
   /* Only animate when collapsing back after a resize ends; while resizing the width
      tracks the growing column and must update instantly. */
 }
-&.collapsing[data-v-fb9f9377] {
+&.collapsing[data-v-a66c9aef] {
     transition: width 0.2s ease;
 }
 }
@@ -4674,37 +4827,37 @@ tr {
 }
 
 .page-controls {
-&[data-v-df9e464a] {
+&[data-v-10c111ef] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-75x);
 }
-& .page-row-range[data-v-df9e464a],
-  & .page-size-menu[data-v-df9e464a] {
+& .page-row-range[data-v-10c111ef],
+  & .page-size-menu[data-v-10c111ef] {
     flex-grow: 1;
     flex-basis: 0;
 }
-.page-size-menu[data-v-df9e464a] {
+.page-size-menu[data-v-10c111ef] {
     display: flex;
     justify-content: flex-end;
 }
 }
 
-.rows[data-v-9653892f] {
+.rows[data-v-bd4cc5ec] {
   display: grid;
   grid-template-columns: auto auto auto auto;
   gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
 }
-.row[data-v-9653892f] {
+.row[data-v-bd4cc5ec] {
   display: contents;
 }
-.column[data-v-9653892f],
-.mode[data-v-9653892f],
-.value[data-v-9653892f] {
+.column[data-v-bd4cc5ec],
+.mode[data-v-bd4cc5ec],
+.value[data-v-bd4cc5ec] {
   min-width: 0;
 }
-.add[data-v-9653892f] {
+.add[data-v-bd4cc5ec] {
   margin-top: var(--kds-spacing-container-0-5x);
 }
 
@@ -4729,28 +4882,28 @@ tr {
 }
 }
 
-.filter-popover[data-v-178504c8] {
+.filter-popover[data-v-3cd94230] {
   position-try-order: most-inline-size;
 }
 
-.sort-popover[data-v-80bf221a] {
+.sort-popover[data-v-ad5ee20c] {
   position-try-order: most-inline-size;
 }
 .popover-container {
 .body {
-&[data-v-80bf221a] {
+&[data-v-ad5ee20c] {
     display: grid;
     grid-template-columns: auto auto;
     gap: var(--kds-spacing-container-0-5x);
     }
-&[data-v-80bf221a] > * {
+&[data-v-ad5ee20c] > * {
       min-width: 0;
 }
 }
 }
 
 .kds-table-action-bar {
-&[data-v-8cfb3c41] {
+&[data-v-4a59722f] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4759,28 +4912,28 @@ tr {
   padding-left: var(--kds-spacing-container-0-5x);
   border-top: var(--kds-border-base-subtle);
 }
-&.temporary-view[data-v-8cfb3c41] {
+&.temporary-view[data-v-4a59722f] {
     background-color: var(--kds-color-background-static-info-muted);
 }
 & .left {
-&[data-v-8cfb3c41] {
+&[data-v-4a59722f] {
     display: flex;
     flex: 1 0 0;
     gap: var(--kds-spacing-container-0-5x);
     align-items: center;
     padding: var(--kds-spacing-container-0-12x) 0;
 }
-& .title[data-v-8cfb3c41] {
+& .title[data-v-4a59722f] {
       font: var(--kds-font-base-title-medium-strong);
       color: var(--kds-color-text-and-icon-neutral);
 }
-& .dimension[data-v-8cfb3c41] {
+& .dimension[data-v-4a59722f] {
       font: var(--kds-font-base-title-small);
       color: var(--kds-color-text-and-icon-muted);
       white-space: pre;
 }
 }
-& .right[data-v-8cfb3c41] {
+& .right[data-v-4a59722f] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
@@ -4789,14 +4942,119 @@ tr {
 }
 }
 
+.column-header {
+&[data-v-b99ef494] {
+  /* Need to set position relative here to position the resize handle absolutely within the header cell */
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--kds-dimension-component-height-2-5x);
+  max-height: var(--kds-dimension-component-height-5x);
+  padding-right: var(--kds-spacing-container-0-37x);
+  padding-left: var(--kds-spacing-container-0-5x);
+  color: var(--kds-color-text-and-icon-neutral);
+  text-align: left;
+  white-space: nowrap;
+}
+&.header-focused[data-v-b99ef494] {
+    background-color: var(--kds-color-focus-background);
+}
+&.colored-header[data-v-b99ef494] {
+    /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
+    background-image: linear-gradient(
+      90deg,
+      var(--data-cell-color),
+      var(--data-cell-color)
+    );
+    background-repeat: no-repeat;
+    background-size: var(--kds-spacing-container-0-25x);
+}
+& .column-header-content {
+&[data-v-b99ef494] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+}
+&[data-v-b99ef494]:focus {
+      outline: none;
+}
+&.with-button-in-header[data-v-b99ef494] {
+      width: calc(
+        100% - var(--kds-dimension-component-width-1-5x)
+      ); /* due to .sub-menu-select-header / .delete-column-button: width */
+}
+& .main-header {
+&[data-v-b99ef494] {
+      display: flex;
+}
+& .header-text-container[data-v-b99ef494] {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font: var(--kds-font-base-title-medium-strong);
+}
+}
+& .sub-header-text-container[data-v-b99ef494] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font: var(--kds-font-base-subtext-small);
+}
+}
+& .delete-column-button[data-v-b99ef494] {
+    display: flex;
+    align-items: center;
+    width: var(--kds-dimension-component-width-2x);
+}
+& .resize-handle-area {
+&[data-v-b99ef494] {
+    position: absolute;
+
+    /* resize handle should range into top border */
+    top: calc(-1 * var(--kds-core-border-width-xs));
+
+    /* resize handle should be at the very right of the header cell, but not range into the next cell, which is
+      why we need to remove half of the .resize-handles' border */
+    right: calc(
+      -1 *
+        (
+          var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-l) /
+            2
+        )
+    );
+
+    /* otherwise the handle will be behind rows when virtual scrolling */
+    z-index: var(--z-index-column-resize-drag-handle);
+    display: flex;
+    justify-content: center;
+    width: 0;
+    height: 100%;
+    padding-inline: var(--kds-spacing-container-0-25x);
+    cursor: col-resize;
+    opacity: 0;
+}
+& .resize-handle[data-v-b99ef494] {
+      border-right: var(--kds-border-resize-handle-hover);
+      border-radius: var(--kds-border-radius-container-0-25x);
+}
+&.hover[data-v-b99ef494] {
+      opacity: 1;
+}
+&.drag[data-v-b99ef494] {
+      opacity: 1;
+}
+}
+}
+
 thead {
-&[data-v-3b63e327] {
+&[data-v-e7068bdf] {
   background-color: var(--kds-color-surface-default);
   border-top: var(--kds-border-base-subtle);
   border-bottom: var(--kds-border-base-subtle);
 }
 & tr {
-&[data-v-3b63e327] {
+&[data-v-e7068bdf] {
     display: flex;
     height: 100%;
     transition:
@@ -4804,151 +5062,51 @@ thead {
       box-shadow 0.15s;
 }
 & th {
-&[data-v-3b63e327] {
+&[data-v-e7068bdf] {
       min-height: var(--kds-dimension-component-height-2-5x);
       max-height: var(--kds-dimension-component-height-5x);
       text-align: left;
       white-space: nowrap;
 }
-&.deletion-cell-spacer[data-v-3b63e327] {
+&.deletion-cell-spacer[data-v-e7068bdf] {
         width: var(--kds-dimension-component-width-2x);
 }
-&.header-focused[data-v-3b63e327] {
-        background-color: var(--kds-color-focus-background);
-}
 &.select-cell {
-&[data-v-3b63e327] {
+&[data-v-e7068bdf] {
         display: flex;
         justify-content: center;
         width: var(--kds-dimension-component-width-2x);
         padding: var(--kds-spacing-container-0-75x);
 }
-& .select-checkbox[data-v-3b63e327] {
+& .select-checkbox[data-v-e7068bdf] {
           /* With this added padding the checkbox appears centered initially */
           padding: var(--kds-spacing-container-0-10x);
 }
 }
-&.colored-header[data-v-3b63e327] {
-        /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
-        background-image: linear-gradient(
-          90deg,
-          var(--data-cell-color),
-          var(--data-cell-color)
-        );
-        background-repeat: no-repeat;
-        background-size: var(--kds-spacing-container-0-25x);
-}
-&.column-header {
-&[data-v-3b63e327] {
-        /* Need to set position relative here to position the resize handle absolutely within the header cell */
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding-right: var(--kds-spacing-container-0-37x);
-        padding-left: var(--kds-spacing-container-0-5x);
-        color: var(--kds-color-text-and-icon-neutral);
-}
-& .column-header-content {
-&[data-v-3b63e327] {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          width: 100%;
-}
-&[data-v-3b63e327]:focus {
-            outline: none;
-}
-&.with-button-in-header[data-v-3b63e327] {
-            width: calc(
-              100% - var(--kds-dimension-component-width-1-5x)
-            ); /* due to .sub-menu-select-header / .delete-column-button: width */
-}
-& .main-header {
-&[data-v-3b63e327] {
-            display: flex;
-}
-& .header-text-container[data-v-3b63e327] {
-              max-width: 100%;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              font: var(--kds-font-base-title-medium-strong);
-}
-}
-& .sub-header-text-container[data-v-3b63e327] {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            font: var(--kds-font-base-subtext-small);
-}
-}
-& .delete-column-button[data-v-3b63e327] {
-          display: flex;
-          align-items: center;
-          width: var(--kds-dimension-component-width-2x);
-}
-& .resize-handle-area {
-&[data-v-3b63e327] {
-          position: absolute;
-
-          /* resize handle should range into top border */
-          top: calc(-1 * var(--kds-core-border-width-xs));
-
-          /* resize handle should be at the very right of the header cell, but not range into the next cell, which is 
-          why we need to remove half of the .resize-handles' border */
-          right: calc(
-            -1 *
-              (
-                var(--kds-spacing-container-0-25x) -
-                  var(--kds-core-border-width-l) / 2
-              )
-          );
-
-          /* otherwise the handle will be behind rows when virtual scrolling */
-          z-index: var(--z-index-column-resize-drag-handle);
-          display: flex;
-          justify-content: center;
-          width: 0;
-          height: 100%;
-          padding-inline: var(--kds-spacing-container-0-25x);
-          cursor: col-resize;
-          opacity: 0;
-}
-& .resize-handle[data-v-3b63e327] {
-            border-right: var(--kds-border-resize-handle-hover);
-            border-radius: var(--kds-border-radius-container-0-25x);
-}
-&.hover[data-v-3b63e327] {
-            opacity: 1;
-}
-&.drag[data-v-3b63e327] {
-            opacity: 1;
-}
-}
-}
-&.new-column-head[data-v-3b63e327] {
+&.new-column-head[data-v-e7068bdf] {
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: var(--kds-spacing-container-0-5x);
 }
 }
-&[data-v-3b63e327]:hover {
+&[data-v-e7068bdf]:hover {
       outline: none;
 }
 }
-&.sub-menu-active tr[data-v-3b63e327] {
+&.sub-menu-active tr[data-v-e7068bdf] {
     padding-right: var(--kds-dimension-component-width-2x);
 }
 }
 .header-selection-overlay {
-&[data-v-3b63e327] {
+&[data-v-e7068bdf] {
   position: absolute;
   top: 0;
   height: 100%;
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.header-focused[data-v-3b63e327] {
+&.header-focused[data-v-e7068bdf] {
     border: var(--kds-border-action-focused);
 }
 }
@@ -5001,7 +5159,7 @@ thead {
 }
 
 .data-cell {
-&[data-v-698a5d81] {
+&[data-v-84b77b2e] {
   display: flex;
   font: var(--kds-font-base-interactive-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -5009,10 +5167,10 @@ thead {
   user-select: none;
   background-clip: border-box;
 }
-&.in-cell-selection[data-v-698a5d81] {
+&.in-cell-selection[data-v-84b77b2e] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-cell[data-v-698a5d81] {
+&.colored-cell[data-v-84b77b2e] {
     /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
     background-image: linear-gradient(
       90deg,
@@ -5022,51 +5180,49 @@ thead {
     background-repeat: no-repeat;
     background-size: var(--kds-spacing-container-0-25x);
 }
-&.inline-block span[data-v-698a5d81] {
-    display: inline-block;
-}
-& .cell-content[data-v-698a5d81] {
+& .cell-content[data-v-84b77b2e] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-self: flex-start;
     justify-content: space-between;
     width: 100%;
 }
-& .cell-content .cell-text[data-v-698a5d81] {
+& .cell-content .cell-text[data-v-84b77b2e] {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: pre;
 }
 }
 
-tr[data-v-0ad921a2] {
+tr[data-v-24dd5f3c] {
   display: flex;
 }
 tr.row {
-&[data-v-0ad921a2] {
+&[data-v-24dd5f3c] {
   border-bottom: var(--kds-border-base-subtle);
   }
 & td {
-&[data-v-0ad921a2] {
+&[data-v-24dd5f3c] {
     padding: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     }
 &.select-cell {
-&[data-v-0ad921a2] {
+&[data-v-24dd5f3c] {
       display: flex;
       justify-content: center;
       width: var(--kds-dimension-component-width-2x);
       min-width: var(--kds-dimension-component-width-2x);
       }
-& .select-checkbox[data-v-0ad921a2] {
+& .select-checkbox[data-v-24dd5f3c] {
         /* With this added padding the checkbox appears centered initially */
         padding: var(--kds-spacing-container-0-10x);
 }
 }
 &.deletion-cell {
-&[data-v-0ad921a2] {
+&[data-v-24dd5f3c] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -5074,11 +5230,11 @@ tr.row {
       min-width: var(--kds-dimension-component-width-2x);
       opacity: 0;
       }
-&[data-v-0ad921a2]:focus-within {
+&[data-v-24dd5f3c]:focus-within {
         opacity: 1;
 }
 }
-&.action[data-v-0ad921a2] {
+&.action[data-v-24dd5f3c] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -5087,19 +5243,19 @@ tr.row {
 }
 }
 &:hover {
-&[data-v-0ad921a2] {
+&[data-v-24dd5f3c] {
     outline: none;
     background-color: var(--kds-color-background-neutral-hover);
     }
-& .deletion-cell[data-v-0ad921a2] {
+& .deletion-cell[data-v-24dd5f3c] {
       opacity: 1;
 }
 }
-& a[data-v-0ad921a2] {
+& a[data-v-24dd5f3c] {
     outline: none;
 }
 }
-.row-drag-handle[data-v-0ad921a2] {
+.row-drag-handle[data-v-24dd5f3c] {
   position: relative;
   bottom: var(--kds-spacing-container-0-37x);
   height: var(--kds-spacing-container-0-37x);
@@ -5109,18 +5265,18 @@ tr.row {
 }
 
 .overlay {
-&[data-v-f7862e17] {
+&[data-v-4eeb1626] {
   position: absolute;
   z-index: var(--z-index-cell-selection-overlay);
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.virtual-focus[data-v-f7862e17] {
+&.virtual-focus[data-v-4eeb1626] {
     border: var(--kds-border-action-focused);
 }
 }
 
-.wrapper[data-v-829ae68c] {
+.wrapper[data-v-fa3f06f3] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -5130,7 +5286,7 @@ tr.row {
 }
 }
 table {
-&[data-v-829ae68c] {
+&[data-v-fa3f06f3] {
   position: relative;
   display: flex;
   flex-grow: 1;
@@ -5138,15 +5294,15 @@ table {
   width: 100%;
   min-height: 0;
   }
-&[data-v-829ae68c]:focus {
+&[data-v-fa3f06f3]:focus {
     outline: none;
 }
-& .new-row-footer[data-v-829ae68c] {
+& .new-row-footer[data-v-fa3f06f3] {
     width: 100%;
 }
 }
 
-.table-column-size-calculation[data-v-ea7bec0f] {
+.table-column-size-calculation[data-v-72cc3068] {
   position: absolute;
   top: -9999px;
   left: -9999px;