@knime/kds-table 0.2.1 → 0.3.0

package/dist/index.css

@@ -139,27 +139,11 @@ tbody[data-v-70f2c330] {
   min-height: var(--icon-height);
   vertical-align: middle;
   stroke-width: var(--icon-stroke-width);
-  shape-rendering: geometricPrecision;
 }
 &.xsmall[data-v-bff4f419] {
     --icon-width: var(--kds-dimension-icon-0-56x);
     --icon-height: var(--kds-dimension-icon-0-56x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
-@media (max-resolution: 1.5dppx) {
-      /* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
-      rendering issues which manifests in misaligned or 'jumping' svg content.
-      Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
-      CSS transform. Thus the position of the SVG elements stays intact. */
-&[data-v-bff4f419] {
-        --scaling-factor: 0.75;
-        --icon-width: var(--kds-dimension-icon-0-75x);
-        --icon-height: var(--kds-dimension-icon-0-75x);
-        --icon-stroke-width: calc(
-          var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
-        );
-        transform: scale(var(--scaling-factor));
-}
-}
 }
 &.small[data-v-bff4f419] {
     --icon-width: var(--kds-dimension-icon-0-75x);
@@ -189,27 +173,11 @@ tbody[data-v-70f2c330] {
   min-height: var(--icon-height);
   vertical-align: middle;
   stroke-width: var(--icon-stroke-width);
-  shape-rendering: geometricPrecision;
 }
 &.xsmall[data-v-38e9537f] {
     --icon-width: var(--kds-dimension-icon-0-56x);
     --icon-height: var(--kds-dimension-icon-0-56x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
-@media (max-resolution: 1.5dppx) {
-      /* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
-      rendering issues which manifests in misaligned or 'jumping' svg content.
-      Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
-      CSS transform. Thus the position of the SVG elements stays intact. */
-&[data-v-38e9537f] {
-        --scaling-factor: 0.75;
-        --icon-width: var(--kds-dimension-icon-0-75x);
-        --icon-height: var(--kds-dimension-icon-0-75x);
-        --icon-stroke-width: calc(
-          var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
-        );
-        transform: scale(var(--scaling-factor));
-}
-}
 }
 &.small[data-v-38e9537f] {
     --icon-width: var(--kds-dimension-icon-0-75x);
@@ -566,7 +534,7 @@ to {
 }
 
 .kds-inline-message {
-&[data-v-af14056f] {
+&[data-v-194a0dfd] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-25x);
@@ -578,45 +546,43 @@ to {
   border-radius: var(--kds-border-radius-container-0-50x);
 }
 .header {
-&[data-v-af14056f] {
+&[data-v-194a0dfd] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
-    align-items: flex-start;
+    align-items: center;
 }
-.icon[data-v-af14056f] {
-      align-self: flex-start;
-      margin-top: var(--kds-spacing-container-0-12x);
+.icon[data-v-194a0dfd] {
       color: var(--icon-color);
 }
-.headline[data-v-af14056f] {
+.headline[data-v-194a0dfd] {
       font: var(--kds-font-base-title-small-strong);
 }
 }
-.body[data-v-af14056f] {
+.body[data-v-194a0dfd] {
     align-self: stretch;
     padding-left: var(--kds-spacing-container-1x);
     font: var(--kds-font-base-body-small);
     color: var(--kds-color-text-and-icon-muted);
 }
-&.info[data-v-af14056f] {
+&.info[data-v-194a0dfd] {
     --icon-color: var(--kds-color-text-and-icon-info);
 
     background-color: var(--kds-color-background-static-info-muted);
     border: var(--kds-border-base-info);
 }
-&.success[data-v-af14056f] {
+&.success[data-v-194a0dfd] {
     --icon-color: var(--kds-color-text-and-icon-success);
 
     background-color: var(--kds-color-background-static-success-muted);
     border: var(--kds-border-base-success);
 }
-&.error[data-v-af14056f] {
+&.error[data-v-194a0dfd] {
     --icon-color: var(--kds-color-text-and-icon-danger);
 
     background-color: var(--kds-color-background-static-danger-muted);
     border: var(--kds-border-base-danger);
 }
-&.warning[data-v-af14056f] {
+&.warning[data-v-194a0dfd] {
     --icon-color: var(--kds-color-text-and-icon-warning);
 
     background-color: var(--kds-color-background-static-warning-muted);
@@ -693,7 +659,7 @@ html.kds-legacy {
 }
 
 .button {
-&[data-v-190ac311] {
+&[data-v-24ade73a] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -707,151 +673,150 @@ html.kds-legacy {
 
   /* for LinkButton */
 }
-&[data-v-190ac311]:is(a) {
+&[data-v-24ade73a]:is(a) {
     text-decoration: none;
 }
-&.disabled[data-v-190ac311] {
+&.disabled[data-v-24ade73a] {
     cursor: default;
 }
-&[data-v-190ac311]:focus-visible {
+&[data-v-24ade73a]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &.filled {
-&[data-v-190ac311] {
+&[data-v-24ade73a] {
     color: var(--kds-color-text-and-icon-primary-inverted);
     background-color: var(--kds-color-background-primary-bold-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-190ac311] {
+&.disabled[data-v-24ade73a] {
       color: var(--kds-color-text-and-icon-disabled-inverted);
       background-color: var(--kds-color-background-disabled-primary);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-190ac311]:hover {
+&[data-v-24ade73a]:hover {
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-190ac311]:active {
+&[data-v-24ade73a]:active {
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 &.destructive {
-&[data-v-190ac311] {
+&[data-v-24ade73a] {
       color: var(--kds-color-text-and-icon-danger-inverted);
       background-color: var(--kds-color-background-danger-bold-initial);
 }
-&.disabled[data-v-190ac311] {
+&.disabled[data-v-24ade73a] {
         color: var(--kds-color-text-and-icon-disabled-inverted);
         background-color: var(--kds-color-background-disabled-danger);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-190ac311]:hover {
+&[data-v-24ade73a]:hover {
           background-color: var(--kds-color-background-danger-bold-hover);
 }
-&[data-v-190ac311]:active {
+&[data-v-24ade73a]:active {
           background-color: var(--kds-color-background-danger-bold-active);
 }
 }
 }
 }
 &.outlined {
-&[data-v-190ac311] {
+&[data-v-24ade73a] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-default);
 }
-&.disabled[data-v-190ac311] {
+&.disabled[data-v-24ade73a] {
       color: var(--kds-color-text-and-icon-disabled);
       border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-190ac311]:hover {
+&[data-v-24ade73a]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-190ac311]:active {
+&[data-v-24ade73a]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-190ac311] {
+&[data-v-24ade73a] {
       color: var(--kds-color-text-and-icon-danger);
       border: var(--kds-border-action-error);
 }
-&.disabled[data-v-190ac311] {
+&.disabled[data-v-24ade73a] {
         color: var(--kds-color-text-and-icon-disabled);
         border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-190ac311]:hover {
+&[data-v-24ade73a]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-190ac311]:active {
+&[data-v-24ade73a]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.transparent {
-&[data-v-190ac311] {
+&[data-v-24ade73a] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-190ac311] {
+&.disabled[data-v-24ade73a] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-190ac311]:hover {
+&[data-v-24ade73a]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-190ac311]:active {
+&[data-v-24ade73a]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-190ac311] {
+&[data-v-24ade73a] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&.disabled[data-v-190ac311] {
+&.disabled[data-v-24ade73a] {
         color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-190ac311]:hover {
+&[data-v-24ade73a]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-190ac311]:active {
+&[data-v-24ade73a]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.toggled {
-&[data-v-190ac311] {
+&[data-v-24ade73a] {
     color: var(--kds-color-text-and-icon-selected);
     background-color: var(--kds-color-background-selected-initial);
     border: var(--kds-border-action-selected);
 }
-&.disabled[data-v-190ac311] {
+&.disabled[data-v-24ade73a] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-190ac311]:hover {
+&[data-v-24ade73a]:hover {
         background-color: var(--kds-color-background-selected-hover);
 }
-&[data-v-190ac311]:active {
+&[data-v-24ade73a]:active {
         background-color: var(--kds-color-background-selected-active);
 }
 }
 }
-& .label[data-v-190ac311] {
+& .label[data-v-24ade73a] {
     max-width: 200px;
     padding: 0 var(--kds-spacing-container-0-12x);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    text-rendering: geometricprecision;
 }
-&.xsmall[data-v-190ac311] {
+&.xsmall[data-v-24ade73a] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-25x);
     padding: 0
@@ -863,7 +828,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-25x)
     );
 }
-&.small[data-v-190ac311] {
+&.small[data-v-24ade73a] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-5x);
     padding: 0
@@ -875,7 +840,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-37x)
     );
 }
-&.medium[data-v-190ac311] {
+&.medium[data-v-24ade73a] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0
@@ -888,7 +853,7 @@ html.kds-legacy {
     );
 }
 &.large {
-&[data-v-190ac311] {
+&[data-v-24ade73a] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0
@@ -900,11 +865,11 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-50x)
     );
 }
-& .label[data-v-190ac311] {
+& .label[data-v-24ade73a] {
       padding: 0 var(--kds-spacing-container-0-25x);
 }
 }
-&.success[data-v-190ac311] {
+&.success[data-v-24ade73a] {
     color: var(--kds-color-text-and-icon-success-inverted);
     background-color: var(--kds-color-background-success-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -913,7 +878,7 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.error[data-v-190ac311] {
+&.error[data-v-24ade73a] {
     color: var(--kds-color-text-and-icon-danger-inverted);
     background-color: var(--kds-color-background-danger-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -922,11 +887,11 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.remove-border-radius-left[data-v-190ac311] {
+&.remove-border-radius-left[data-v-24ade73a] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-&.remove-border-radius-right[data-v-190ac311] {
+&.remove-border-radius-right[data-v-24ade73a] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -1291,7 +1256,7 @@ html.kds-legacy {
 }
 
 .kds-popover {
-&[data-v-1e5f9d24] {
+&[data-v-3354d162] {
   padding: 0;
   margin: 0;
   overflow: visible;
@@ -1319,10 +1284,11 @@ html.kds-legacy {
    * light-dismiss / click-outside behavior).
    */
 }
-&.full-width[data-v-1e5f9d24] {
+&.full-width[data-v-3354d162] {
     min-inline-size: anchor-size(width);
+    max-inline-size: anchor-size(width);
 }
-&.floating.top-right[data-v-1e5f9d24] {
+&.floating.top-right[data-v-3354d162] {
     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);
@@ -1330,7 +1296,7 @@ html.kds-legacy {
       --kds-popover-try-top-left, --kds-popover-try-bottom-right,
       --kds-popover-try-bottom-left, --kds-popover-try-top-right;
 }
-&.floating.top-left[data-v-1e5f9d24] {
+&.floating.top-left[data-v-3354d162] {
     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;
@@ -1338,7 +1304,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-1e5f9d24] {
+&.floating.bottom-right[data-v-3354d162] {
     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);
@@ -1346,7 +1312,7 @@ html.kds-legacy {
       --kds-popover-try-bottom-left, --kds-popover-try-top-right,
       --kds-popover-try-top-left, --kds-popover-try-bottom-right;
 }
-&.floating.bottom-left[data-v-1e5f9d24] {
+&.floating.bottom-left[data-v-3354d162] {
     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;
@@ -1354,7 +1320,7 @@ 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-1e5f9d24] {
+&.floating.custom[data-v-3354d162] {
     position: fixed;
     inset: auto;
     margin: 0;
@@ -1388,7 +1354,7 @@ html.kds-legacy {
   margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
     var(--kds-spacing-container-0-25x) 0;
 }
-.kds-popover-default-content[data-v-1e5f9d24] {
+.kds-popover-default-content[data-v-3354d162] {
   padding: var(--kds-spacing-container-0-75x);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -1991,7 +1957,7 @@ table:focus {
 }
 
 .checkbox {
-&[data-v-7bfc5667] {
+&[data-v-0bec87ad] {
   --bg-initial: var(--kds-color-background-input-initial);
   --bg-hover: var(--kds-color-background-input-hover);
   --bg-active: var(--kds-color-background-input-active);
@@ -2011,7 +1977,7 @@ table:focus {
   background: none;
   border: none;
 }
-.control[data-v-7bfc5667] {
+.control[data-v-0bec87ad] {
     position: relative;
     display: flex;
     flex-shrink: 0;
@@ -2024,40 +1990,39 @@ table:focus {
     border: var(--border);
     border-radius: var(--kds-border-radius-container-0-25x);
 }
-&:focus-visible .control[data-v-7bfc5667] {
+&:focus-visible .control[data-v-0bec87ad] {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&:hover:not(.disabled) .control[data-v-7bfc5667] {
+&:hover:not(.disabled) .control[data-v-0bec87ad] {
     background: var(--bg-hover);
 }
-&:active:not(.disabled) .control[data-v-7bfc5667] {
+&:active:not(.disabled) .control[data-v-0bec87ad] {
     background: var(--bg-active);
 }
-&.checked[data-v-7bfc5667],
-  &.indeterminate[data-v-7bfc5667] {
+&.checked[data-v-0bec87ad],
+  &.indeterminate[data-v-0bec87ad] {
     --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-7bfc5667] {
+&[data-v-0bec87ad] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
-    text-rendering: geometricprecision;
 }
-& .label[data-v-7bfc5667] {
+& .label[data-v-0bec87ad] {
       font: var(--kds-font-base-interactive-small);
       color: var(--text-color);
 }
-& .helper-text[data-v-7bfc5667] {
+& .helper-text[data-v-0bec87ad] {
       font: var(--kds-font-base-subtext-small);
       color: var(--helper-text-color);
 }
 }
-&.disabled[data-v-7bfc5667] {
+&.disabled[data-v-0bec87ad] {
     --border: var(--kds-border-action-disabled);
     --icon-color: var(--kds-color-text-and-icon-disabled);
     --text-color: var(--kds-color-text-and-icon-disabled);
@@ -2066,20 +2031,20 @@ table:focus {
     cursor: default;
 }
 &.error {
-&[data-v-7bfc5667] {
+&[data-v-0bec87ad] {
     --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-7bfc5667],
-    &.indeterminate[data-v-7bfc5667] {
+&.checked[data-v-0bec87ad],
+    &.indeterminate[data-v-0bec87ad] {
       --bg-initial: var(--kds-color-background-danger-initial);
 }
 }
 }
-.subtext-wrapper[data-v-7bfc5667] {
+.subtext-wrapper[data-v-0bec87ad] {
   padding-left: calc(
     var(--kds-dimension-component-height-0-88x) +
       var(--kds-spacing-container-0-37x)
@@ -2904,23 +2869,24 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   );
 }
 
-.kds-dropdown-container[data-v-cdb20fd2] {
+.kds-dropdown-container[data-v-0a6ce241] {
   display: flex;
   flex-direction: column;
+  min-width: var(--kds-dimension-component-width-12x);
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.kds-dropdown-container-sticky-top[data-v-cdb20fd2] {
+.kds-dropdown-container-sticky-top[data-v-0a6ce241] {
   padding: var(--kds-spacing-container-0-25x);
   background-color: var(--kds-color-surface-default);
   border-bottom: var(--kds-border-base-subtle);
 }
 .kds-dropdown-container-list {
-&[data-v-cdb20fd2] {
+&[data-v-0a6ce241] {
   max-height: var(--kds-dimension-component-height-12x);
   }
-&.multiline[data-v-cdb20fd2] {
+&.multiline[data-v-0a6ce241] {
     max-height: var(--kds-dimension-component-height-20x);
 }
 }
@@ -4155,7 +4121,7 @@ button.kds-breadcrumb-item {
   text-overflow: clip;
 }
 
-ol[data-v-e93667af] {
+ol[data-v-8661f06f] {
   display: flex;
   flex-flow: row nowrap;
   padding: var(--kds-spacing-container-none);
@@ -4168,7 +4134,7 @@ ol[data-v-e93667af] {
   list-style: none;
 }
 li {
-&[data-v-e93667af] {
+&[data-v-8661f06f] {
   /*
      * Width is controlled by `useBreadcrumbAdaptiveLayout()` via the CSS
      * custom properties `--kds-bc-max-width` (resting cap) and
@@ -4178,7 +4144,7 @@ li {
   --kds-bc-floor: calc(
     var(--kds-dimension-icon-1x) /* leading icon */ +
       var(--kds-spacing-container-0-25x) /* item gap */ +
-      var(--kds-dimension-icon-0-75x) /* chevron */ + 2 *
+      var(--kds-dimension-icon-0-75x) /* path separator */ + 2 *
       var(--kds-spacing-container-0-12x) /* chevron margin */
   );
 
@@ -4202,20 +4168,34 @@ li {
 
   /* Current item: override the item color token so a/button inherit it. */
   }
-&[data-v-e93667af]:last-child {
+&.no-icon[data-v-8661f06f] {
+    --kds-bc-floor: calc(
+      var(--kds-spacing-container-0-37x) /* min text width dummy value */ +
+        var(--kds-dimension-icon-0-75x) /* path separator */ + 2 *
+        var(--kds-spacing-container-0-12x) /* chevron margin */
+    );
+}
+&.no-text[data-v-8661f06f] {
+    --kds-bc-floor: calc(
+      var(--kds-dimension-icon-1x) /* leading icon */ +
+        var(--kds-dimension-icon-0-75x) /* path separator */ + 2 *
+        var(--kds-spacing-container-0-12x) /* chevron margin */
+    );
+}
+&[data-v-8661f06f]:last-child {
     --kds-bc-floor: calc(
       var(--kds-dimension-icon-1x) /* leading icon */ +
         var(--kds-spacing-container-0-25x) /* item gap */
     );
 }
-&[data-v-e93667af]:hover,
-  &[data-v-e93667af]:focus-within {
+&[data-v-8661f06f]:hover,
+  &[data-v-8661f06f]:focus-within {
     max-width: var(--kds-bc-natural-width, fit-content);
 }
-&.current[data-v-e93667af] {
+&.current[data-v-8661f06f] {
     --kds-breadcrumb-item-color: var(--kds-color-text-and-icon-neutral);
 }
-.path-separator[data-v-e93667af] {
+.path-separator[data-v-8661f06f] {
     flex-shrink: 0;
     align-self: center;
     margin-inline: var(--kds-spacing-container-0-12x);
@@ -4574,26 +4554,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);
 }
@@ -4618,13 +4598,13 @@ tr {
 }
 
 .container {
-&[data-v-4c5d7018] {
+&[data-v-a66c9aef] {
   flex: 1 1 0;
 }
-&.fit-content[data-v-4c5d7018] {
+&.fit-content[data-v-a66c9aef] {
     flex: 0 0 auto;
 }
-& .header-container[data-v-4c5d7018] {
+& .header-container[data-v-a66c9aef] {
     position: sticky;
     top: 0;
     z-index: var(--z-index-sticky-header);
@@ -4632,7 +4612,7 @@ tr {
     flex: 1;
     flex-direction: column;
 }
-& tbody[data-v-4c5d7018] {
+& tbody[data-v-a66c9aef] {
     /**
       * Necessary for the absolutely placed elements inside of it (e.g. cell selection overlay)
       * to scroll with the body.
@@ -4650,6 +4630,15 @@ tr {
     width: fit-content;
 }
 }
+.resize-scroll-spacer {
+&[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-a66c9aef] {
+    transition: width 0.2s ease;
+}
+}
 
 .page-navigation {
 &[data-v-f8714af0] {
@@ -4685,37 +4674,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);
 }
 
@@ -4740,28 +4729,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;
@@ -4770,28 +4759,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;
@@ -4800,14 +4789,119 @@ tr {
 }
 }
 
+.column-header {
+&[data-v-cc11c6b2] {
+  /* 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-cc11c6b2] {
+    background-color: var(--kds-color-focus-background);
+}
+&.colored-header[data-v-cc11c6b2] {
+    /* 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-cc11c6b2] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+}
+&[data-v-cc11c6b2]:focus {
+      outline: none;
+}
+&.with-button-in-header[data-v-cc11c6b2] {
+      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] {
+      display: flex;
+}
+& .header-text-container[data-v-cc11c6b2] {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font: var(--kds-font-base-title-medium-strong);
+}
+}
+& .sub-header-text-container[data-v-cc11c6b2] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font: var(--kds-font-base-subtext-small);
+}
+}
+& .delete-column-button[data-v-cc11c6b2] {
+    display: flex;
+    align-items: center;
+    width: var(--kds-dimension-component-width-2x);
+}
+& .resize-handle-area {
+&[data-v-cc11c6b2] {
+    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-cc11c6b2] {
+      border-right: var(--kds-border-resize-handle-hover);
+      border-radius: var(--kds-border-radius-container-0-25x);
+}
+&.hover[data-v-cc11c6b2] {
+      opacity: 1;
+}
+&.drag[data-v-cc11c6b2] {
+      opacity: 1;
+}
+}
+}
+
 thead {
-&[data-v-08a86b18] {
+&[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-08a86b18] {
+&[data-v-e7068bdf] {
     display: flex;
     height: 100%;
     transition:
@@ -4815,151 +4909,51 @@ thead {
       box-shadow 0.15s;
 }
 & th {
-&[data-v-08a86b18] {
+&[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-08a86b18] {
+&.deletion-cell-spacer[data-v-e7068bdf] {
         width: var(--kds-dimension-component-width-2x);
 }
-&.header-focused[data-v-08a86b18] {
-        background-color: var(--kds-color-focus-background);
-}
 &.select-cell {
-&[data-v-08a86b18] {
+&[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-08a86b18] {
+& .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-08a86b18] {
-        /* 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-08a86b18] {
-        /* 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-08a86b18] {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          width: 100%;
-}
-&[data-v-08a86b18]:focus {
-            outline: none;
-}
-&.with-button-in-header[data-v-08a86b18] {
-            width: calc(
-              100% - var(--kds-dimension-component-width-1-5x)
-            ); /* due to .sub-menu-select-header / .delete-column-button: width */
-}
-& .main-header {
-&[data-v-08a86b18] {
-            display: flex;
-}
-& .header-text-container[data-v-08a86b18] {
-              max-width: 100%;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              font: var(--kds-font-base-title-medium-strong);
-}
-}
-& .sub-header-text-container[data-v-08a86b18] {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            font: var(--kds-font-base-subtext-small);
-}
-}
-& .delete-column-button[data-v-08a86b18] {
-          display: flex;
-          align-items: center;
-          width: var(--kds-dimension-component-width-2x);
-}
-& .resize-handle-area {
-&[data-v-08a86b18] {
-          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-08a86b18] {
-            border-right: var(--kds-border-resize-handle-hover);
-            border-radius: var(--kds-border-radius-container-0-25x);
-}
-&.hover[data-v-08a86b18] {
-            opacity: 1;
-}
-&.drag[data-v-08a86b18] {
-            opacity: 1;
-}
-}
-}
-&.new-column-head[data-v-08a86b18] {
+&.new-column-head[data-v-e7068bdf] {
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: var(--kds-spacing-container-0-5x);
 }
 }
-&[data-v-08a86b18]:hover {
+&[data-v-e7068bdf]:hover {
       outline: none;
 }
 }
-&.sub-menu-active tr[data-v-08a86b18] {
+&.sub-menu-active tr[data-v-e7068bdf] {
     padding-right: var(--kds-dimension-component-width-2x);
 }
 }
 .header-selection-overlay {
-&[data-v-08a86b18] {
+&[data-v-e7068bdf] {
   position: absolute;
   top: 0;
   height: 100%;
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.header-focused[data-v-08a86b18] {
+&.header-focused[data-v-e7068bdf] {
     border: var(--kds-border-action-focused);
 }
 }
@@ -5012,7 +5006,7 @@ thead {
 }
 
 .data-cell {
-&[data-v-698a5d81] {
+&[data-v-2bf6d6ac] {
   display: flex;
   font: var(--kds-font-base-interactive-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -5020,10 +5014,10 @@ thead {
   user-select: none;
   background-clip: border-box;
 }
-&.in-cell-selection[data-v-698a5d81] {
+&.in-cell-selection[data-v-2bf6d6ac] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-cell[data-v-698a5d81] {
+&.colored-cell[data-v-2bf6d6ac] {
     /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
     background-image: linear-gradient(
       90deg,
@@ -5033,51 +5027,52 @@ thead {
     background-repeat: no-repeat;
     background-size: var(--kds-spacing-container-0-25x);
 }
-&.inline-block span[data-v-698a5d81] {
+&.inline-block span[data-v-2bf6d6ac] {
     display: inline-block;
 }
-& .cell-content[data-v-698a5d81] {
+& .cell-content[data-v-2bf6d6ac] {
     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-2bf6d6ac] {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: pre;
 }
 }
 
-tr[data-v-0ad921a2] {
+tr[data-v-5dbf98c3] {
   display: flex;
 }
 tr.row {
-&[data-v-0ad921a2] {
+&[data-v-5dbf98c3] {
   border-bottom: var(--kds-border-base-subtle);
   }
 & td {
-&[data-v-0ad921a2] {
+&[data-v-5dbf98c3] {
     padding: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     }
 &.select-cell {
-&[data-v-0ad921a2] {
+&[data-v-5dbf98c3] {
       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-5dbf98c3] {
         /* With this added padding the checkbox appears centered initially */
         padding: var(--kds-spacing-container-0-10x);
 }
 }
 &.deletion-cell {
-&[data-v-0ad921a2] {
+&[data-v-5dbf98c3] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -5085,11 +5080,11 @@ tr.row {
       min-width: var(--kds-dimension-component-width-2x);
       opacity: 0;
       }
-&[data-v-0ad921a2]:focus-within {
+&[data-v-5dbf98c3]:focus-within {
         opacity: 1;
 }
 }
-&.action[data-v-0ad921a2] {
+&.action[data-v-5dbf98c3] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -5098,19 +5093,19 @@ tr.row {
 }
 }
 &:hover {
-&[data-v-0ad921a2] {
+&[data-v-5dbf98c3] {
     outline: none;
     background-color: var(--kds-color-background-neutral-hover);
     }
-& .deletion-cell[data-v-0ad921a2] {
+& .deletion-cell[data-v-5dbf98c3] {
       opacity: 1;
 }
 }
-& a[data-v-0ad921a2] {
+& a[data-v-5dbf98c3] {
     outline: none;
 }
 }
-.row-drag-handle[data-v-0ad921a2] {
+.row-drag-handle[data-v-5dbf98c3] {
   position: relative;
   bottom: var(--kds-spacing-container-0-37x);
   height: var(--kds-spacing-container-0-37x);
@@ -5120,18 +5115,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-bac906a7] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -5141,7 +5136,7 @@ tr.row {
 }
 }
 table {
-&[data-v-829ae68c] {
+&[data-v-bac906a7] {
   position: relative;
   display: flex;
   flex-grow: 1;
@@ -5149,15 +5144,15 @@ table {
   width: 100%;
   min-height: 0;
   }
-&[data-v-829ae68c]:focus {
+&[data-v-bac906a7]:focus {
     outline: none;
 }
-& .new-row-footer[data-v-829ae68c] {
+& .new-row-footer[data-v-bac906a7] {
     width: 100%;
 }
 }
 
-.table-column-size-calculation[data-v-ea7bec0f] {
+.table-column-size-calculation[data-v-38696592] {
   position: absolute;
   top: -9999px;
   left: -9999px;