@knime/kds-table 0.3.0 → 0.4.0

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;
 }
 }
@@ -4674,18 +4827,18 @@ tr {
 }
 
 .page-controls {
-&[data-v-10c111ef] {
+&[data-v-2b97e3c7] {
   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-10c111ef],
-  & .page-size-menu[data-v-10c111ef] {
+& .page-row-range[data-v-2b97e3c7],
+  & .page-size-menu[data-v-2b97e3c7] {
     flex-grow: 1;
     flex-basis: 0;
 }
-.page-size-menu[data-v-10c111ef] {
+.page-size-menu[data-v-2b97e3c7] {
     display: flex;
     justify-content: flex-end;
 }
@@ -4790,7 +4943,7 @@ tr {
 }
 
 .column-header {
-&[data-v-cc11c6b2] {
+&[data-v-b99ef494] {
   /* Need to set position relative here to position the resize handle absolutely within the header cell */
   position: relative;
   display: flex;
@@ -4804,10 +4957,10 @@ tr {
   text-align: left;
   white-space: nowrap;
 }
-&.header-focused[data-v-cc11c6b2] {
+&.header-focused[data-v-b99ef494] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-header[data-v-cc11c6b2] {
+&.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,
@@ -4818,44 +4971,44 @@ tr {
     background-size: var(--kds-spacing-container-0-25x);
 }
 & .column-header-content {
-&[data-v-cc11c6b2] {
+&[data-v-b99ef494] {
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 100%;
 }
-&[data-v-cc11c6b2]:focus {
+&[data-v-b99ef494]:focus {
       outline: none;
 }
-&.with-button-in-header[data-v-cc11c6b2] {
+&.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-cc11c6b2] {
+&[data-v-b99ef494] {
       display: flex;
 }
-& .header-text-container[data-v-cc11c6b2] {
+& .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-cc11c6b2] {
+& .sub-header-text-container[data-v-b99ef494] {
       overflow: hidden;
       text-overflow: ellipsis;
       font: var(--kds-font-base-subtext-small);
 }
 }
-& .delete-column-button[data-v-cc11c6b2] {
+& .delete-column-button[data-v-b99ef494] {
     display: flex;
     align-items: center;
     width: var(--kds-dimension-component-width-2x);
 }
 & .resize-handle-area {
-&[data-v-cc11c6b2] {
+&[data-v-b99ef494] {
     position: absolute;
 
     /* resize handle should range into top border */
@@ -4881,14 +5034,14 @@ tr {
     cursor: col-resize;
     opacity: 0;
 }
-& .resize-handle[data-v-cc11c6b2] {
+& .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-cc11c6b2] {
+&.hover[data-v-b99ef494] {
       opacity: 1;
 }
-&.drag[data-v-cc11c6b2] {
+&.drag[data-v-b99ef494] {
       opacity: 1;
 }
 }
@@ -5006,7 +5159,7 @@ thead {
 }
 
 .data-cell {
-&[data-v-2bf6d6ac] {
+&[data-v-84b77b2e] {
   display: flex;
   font: var(--kds-font-base-interactive-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -5014,10 +5167,10 @@ thead {
   user-select: none;
   background-clip: border-box;
 }
-&.in-cell-selection[data-v-2bf6d6ac] {
+&.in-cell-selection[data-v-84b77b2e] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-cell[data-v-2bf6d6ac] {
+&.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,
@@ -5027,17 +5180,14 @@ thead {
     background-repeat: no-repeat;
     background-size: var(--kds-spacing-container-0-25x);
 }
-&.inline-block span[data-v-2bf6d6ac] {
-    display: inline-block;
-}
-& .cell-content[data-v-2bf6d6ac] {
+& .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-2bf6d6ac] {
+& .cell-content .cell-text[data-v-84b77b2e] {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -5046,33 +5196,33 @@ thead {
 }
 }
 
-tr[data-v-5dbf98c3] {
+tr[data-v-24dd5f3c] {
   display: flex;
 }
 tr.row {
-&[data-v-5dbf98c3] {
+&[data-v-24dd5f3c] {
   border-bottom: var(--kds-border-base-subtle);
   }
 & td {
-&[data-v-5dbf98c3] {
+&[data-v-24dd5f3c] {
     padding: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     }
 &.select-cell {
-&[data-v-5dbf98c3] {
+&[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-5dbf98c3] {
+& .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-5dbf98c3] {
+&[data-v-24dd5f3c] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -5080,11 +5230,11 @@ tr.row {
       min-width: var(--kds-dimension-component-width-2x);
       opacity: 0;
       }
-&[data-v-5dbf98c3]:focus-within {
+&[data-v-24dd5f3c]:focus-within {
         opacity: 1;
 }
 }
-&.action[data-v-5dbf98c3] {
+&.action[data-v-24dd5f3c] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -5093,19 +5243,19 @@ tr.row {
 }
 }
 &:hover {
-&[data-v-5dbf98c3] {
+&[data-v-24dd5f3c] {
     outline: none;
     background-color: var(--kds-color-background-neutral-hover);
     }
-& .deletion-cell[data-v-5dbf98c3] {
+& .deletion-cell[data-v-24dd5f3c] {
       opacity: 1;
 }
 }
-& a[data-v-5dbf98c3] {
+& a[data-v-24dd5f3c] {
     outline: none;
 }
 }
-.row-drag-handle[data-v-5dbf98c3] {
+.row-drag-handle[data-v-24dd5f3c] {
   position: relative;
   bottom: var(--kds-spacing-container-0-37x);
   height: var(--kds-spacing-container-0-37x);
@@ -5126,7 +5276,7 @@ tr.row {
 }
 }
 
-.wrapper[data-v-bac906a7] {
+.wrapper[data-v-aed49fa2] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -5136,7 +5286,7 @@ tr.row {
 }
 }
 table {
-&[data-v-bac906a7] {
+&[data-v-aed49fa2] {
   position: relative;
   display: flex;
   flex-grow: 1;
@@ -5144,15 +5294,15 @@ table {
   width: 100%;
   min-height: 0;
   }
-&[data-v-bac906a7]:focus {
+&[data-v-aed49fa2]:focus {
     outline: none;
 }
-& .new-row-footer[data-v-bac906a7] {
+& .new-row-footer[data-v-aed49fa2] {
     width: 100%;
 }
 }
 
-.table-column-size-calculation[data-v-38696592] {
+.table-column-size-calculation[data-v-72cc3068] {
   position: absolute;
   top: -9999px;
   left: -9999px;