@knime/kds-table 0.1.0 → 0.2.0

package/dist/index.css

@@ -1374,6 +1374,413 @@ html.kds-legacy {
   padding: 0;
 }
 
+.kds-label-wrapper[data-v-efe3313e] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: flex-start;
+  max-width: 100%;
+  min-height: var(--kds-dimension-component-height-0-75x);
+}
+.label[data-v-efe3313e] {
+  display: block;
+  flex-grow: 1;
+  max-width: 100%;
+  height: calc(
+    var(--kds-dimension-component-height-1x) +
+      var(--kds-spacing-input-label-spacing-bottom)
+  );
+  padding-bottom: var(--kds-spacing-input-label-spacing-bottom);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-title-small-strong);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
+}
+
+.subtext {
+&[data-v-2e6ba10c] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  min-height: 1lh;
+  margin-top: var(--kds-spacing-container-0-25x);
+  font: var(--kds-font-base-subtext-small);
+  color: var(--kds-color-text-and-icon-muted);
+}
+&.error[data-v-2e6ba10c] {
+    color: var(--kds-color-text-and-icon-danger);
+}
+& .subtext-text[data-v-2e6ba10c] {
+    min-width: 0;
+}
+}
+
+.kds-form-field[data-v-5d99c134] {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+&[data-v-93daa14e] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--kds-dimension-component-height-1-75x);
+  padding: 0
+    calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs));
+  cursor: text;
+  background: var(--kds-color-background-input-initial);
+  border: var(--kds-border-action-input);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+&[data-v-93daa14e]:has(input:focus:not(:disabled)) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-93daa14e]:has(.input-field:hover:not(:disabled, :focus)) {
+    background: var(--kds-color-background-input-hover);
+}
+&.error[data-v-93daa14e] {
+    border: var(--kds-border-action-error);
+}
+&.disabled[data-v-93daa14e] {
+    cursor: default;
+    border: var(--kds-border-action-disabled);
+    border-color: var(--kds-color-border-disabled);
+}
+}
+.icon-wrapper {
+&[data-v-93daa14e] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--kds-color-text-and-icon-subtle);
+}
+&.leading[data-v-93daa14e] {
+    padding-left: var(--kds-spacing-container-0-12x);
+}
+&.trailing[data-v-93daa14e] {
+    padding-right: var(--kds-spacing-container-0-12x);
+}
+.container.disabled &[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+.container:focus-within &[data-v-93daa14e],
+  .container:has(.input-field.has-value) &[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-neutral);
+}
+}
+.input-field {
+&[data-v-93daa14e] {
+  flex: 1 0 0;
+  min-width: 0;
+  height: var(--kds-dimension-component-height-1-75x);
+  padding: var(--kds-spacing-container-0-25x);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
+  outline: none;
+  background: transparent;
+  border: none;
+
+  /* hide native steppers, we provide our own in NumberInput */
+
+  /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
+}
+&[type="number"] {
+&[data-v-93daa14e] {
+    appearance: textfield;
+}
+&[data-v-93daa14e]::-webkit-outer-spin-button,
+    &[data-v-93daa14e]::-webkit-inner-spin-button {
+      margin: 0;
+      appearance: none;
+}
+}
+&[type="search"][data-v-93daa14e]::-webkit-search-cancel-button {
+    appearance: none;
+}
+&[data-v-93daa14e]::placeholder {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&.empty-mask[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&:disabled {
+&[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+&[data-v-93daa14e]::placeholder {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+}
+}
+.unit {
+&[data-v-93daa14e] {
+  flex-shrink: 0;
+  min-width: 0;
+  margin: 0 var(--kds-spacing-container-0-12x);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
+}
+&.placeholder[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&.disabled[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-disabled);
+}
+.container:focus-within &[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-neutral);
+}
+}
+.clear-button[data-v-93daa14e] {
+  margin-left: var(--kds-spacing-container-0-12x);
+}
+.leading-slot[data-v-93daa14e] {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: center;
+}
+.trailing-slot[data-v-93daa14e] {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: center;
+  margin-left: var(--kds-spacing-container-0-12x);
+}
+
+.kds-text-input-suggestions[data-v-83f45d15] {
+  max-height: var(--kds-dimension-component-height-12x);
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+
+.file-explorer-item-base {
+&[data-v-aad38d13] {
+  /* required for positioning of renaming (.item-error) */
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  width: 100%;
+  padding: var(--kds-spacing-container-0-12x) var(--kds-spacing-container-0-5x)
+    var(--kds-spacing-container-0-10x);
+  font: var(--kds-font-base-interactive-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  user-select: none;
+  background: var(--kds-color-background-neutral-initial);
+  border-bottom: var(--kds-border-base-subtle);
+}
+&:focus {
+&[data-v-aad38d13] {
+    outline: none;
+}
+&.keyboard-focus[data-v-aad38d13] {
+      padding: 0 var(--kds-spacing-container-0-37x);
+      border: var(--kds-border-action-focused);
+      border-radius: var(--kds-border-radius-container-0-25x);
+}
+}
+&[data-v-aad38d13]:hover:not(.disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&.selected,
+  &.dragging {
+&[data-v-aad38d13] {
+    color: var(--kds-color-text-and-icon-selected);
+    background: var(--kds-color-background-selected-initial);
+}
+&[data-v-aad38d13]::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: var(--kds-dimension-component-width-0-125x);
+      height: calc(2 / 3 * 100%);
+      pointer-events: none;
+      content: "";
+      background: var(--kds-color-background-selected-bold-initial);
+      border-radius: 0 var(--kds-border-radius-container-0-12x)
+        var(--kds-border-radius-container-0-12x) 0;
+      transform: translateY(-50%);
+}
+}
+&.selected[data-v-aad38d13]:hover {
+    background: var(--kds-color-background-selected-hover);
+}
+&.dragging-over[data-v-aad38d13] {
+    padding: var(--kds-spacing-container-0-10x)
+      calc(
+        var(--kds-spacing-container-0-37x) + var(--kds-spacing-container-0-10x)
+      );
+    background: var(--kds-color-focus-background);
+    border: var(--kds-border-action-selected-accent);
+    border-radius: var(--kds-border-radius-container-0-25x);
+}
+&.anything-is-dragged {
+& td[data-v-aad38d13],
+    & td[data-v-aad38d13-s] {
+      /* Prevent children from interfering with drag events */
+      pointer-events: none;
+}
+}
+&.disabled[data-v-aad38d13] {
+    color: var(--kds-color-text-and-icon-disabled);
+    pointer-events: none;
+}
+}
+
+.file-explorer-item {
+&[data-v-91cbcaae] {
+  display: grid;
+
+  /* first two cols - icon + name */
+  grid-template-columns: min-content var(--file-explorer-item-grid, 1fr);
+  grid-auto-columns: auto; /* middle ones are auto */
+  grid-auto-flow: column;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+
+  /* style the last column if the options menu is visible */
+}
+&.has-options-menu > td[data-v-91cbcaae]:last-child {
+    width: min-content;
+}
+& .column {
+&[data-v-91cbcaae] {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+}
+& .inner[data-v-91cbcaae] {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+}
+&.dynamic-column[data-v-91cbcaae]:empty {
+      display: none;
+}
+}
+& .item-error[data-v-91cbcaae] {
+    position: absolute;
+    bottom: 0;
+    z-index: 10;
+    padding: var(--kds-spacing-container-0-5x)
+      var(--kds-spacing-container-0-25x);
+    margin-top: var(--kds-spacing-container-0-25x);
+    font: var(--kds-font-base-subtext-small);
+    white-space: normal;
+    backdrop-filter: blur(10px);
+    transform: translateY(100%);
+}
+& td.rename-active {
+&[data-v-91cbcaae] {
+    padding: 0 var(--kds-spacing-container-0-25x);
+}
+& .rename-input-container[data-v-91cbcaae] {
+      flex: 1;
+}
+}
+& .item-icon {
+&[data-v-91cbcaae] {
+    position: relative;
+}
+& .open-indicator[data-v-91cbcaae] {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: var(--kds-spacing-container-0-37x);
+      height: var(--kds-spacing-container-0-37x);
+      background: var(--kds-color-text-and-icon-selected);
+      border-radius: 50%;
+}
+}
+}
+
+.hidden[data-v-a5de970a] {
+  display: none;
+}
+.file-explorer-item-back[data-v-a5de970a] {
+  cursor: pointer;
+}
+
+.file-explorer[data-v-921486c1] {
+  display: flex;
+  flex: 1 0 0%;
+  flex-direction: column;
+  height: 100%;
+
+  /* needed so that the virtualization container can size the wrapper properly */
+  min-height: 0;
+}
+.file-explorer-item[data-v-921486c1] {
+  height: var(--v6215695b);
+}
+thead[data-v-921486c1] {
+  /* Hide table head for better readability but keeping it for a11y reasons */
+  position: absolute;
+
+  /* move far far enough outside view, just in case */
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap; /* added line */
+}
+table[data-v-921486c1] {
+  height: 100%;
+  overflow: hidden auto;
+  scrollbar-gutter: stable;
+  table-layout: fixed;
+  border: var(--kds-border-base-subtle);
+  border-radius: var(--kds-border-radius-container-0-31x);
+  isolation: isolate;
+}
+table,
+tbody {
+&[data-v-921486c1] {
+  width: 100%;
+  border-spacing: 0;
+  }
+&[data-v-921486c1]:not(:has(.empty)) {
+    display: block;
+}
+}
+table:focus {
+&[data-v-921486c1] {
+  outline: none;
+  }
+&.keyboard-focus[data-v-921486c1] {
+    outline: 2px solid var(--kds-color-focus-outline);
+    border-radius: var(--kds-border-radius-container-0-25x);
+}
+}
+.empty[data-v-921486c1] {
+  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] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  width: 70px;
+  height: 70px;
+  pointer-events: none;
+}
+
 .kds-preview-list {
 &[data-v-a11103f6] {
   display: flex;
@@ -1439,74 +1846,34 @@ html.kds-legacy {
 }
 .kds-preview-list-item {
 &[data-v-a11103f6] {
-    /* Items are non-interactive (preview only): no pointer cursor, no hover
-       highlight, but text remains selectable. */
-    cursor: text;
-    user-select: text;
-}
-&[data-v-a11103f6]:hover:not(.disabled),
-    &[data-v-a11103f6]:active:not(.disabled) {
-      background: transparent;
-}
-}
-.kds-preview-list-empty[data-v-a11103f6],
-  .kds-preview-list-loading[data-v-a11103f6] {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto;
-}
-.kds-preview-list-show-hide {
-&[data-v-a11103f6] {
-    padding: var(--kds-spacing-container-0-25x);
-    border-top: var(--kds-border-base-subtle);
-    border-bottom-right-radius: var(--kds-border-radius-container-0-37x);
-    border-bottom-left-radius: var(--kds-border-radius-container-0-37x);
-}
-.kds-preview-list-toggle[data-v-a11103f6] {
-      width: 100%;
-}
-}
-}
-
-.kds-label-wrapper[data-v-efe3313e] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-12x);
-  align-items: flex-start;
-  max-width: 100%;
-  min-height: var(--kds-dimension-component-height-0-75x);
-}
-.label[data-v-efe3313e] {
-  display: block;
-  flex-grow: 1;
-  max-width: 100%;
-  height: calc(
-    var(--kds-dimension-component-height-1x) +
-      var(--kds-spacing-input-label-spacing-bottom)
-  );
-  padding-bottom: var(--kds-spacing-input-label-spacing-bottom);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font: var(--kds-font-base-title-small-strong);
-  color: var(--kds-color-text-and-icon-neutral);
-  white-space: nowrap;
+    /* Items are non-interactive (preview only): no pointer cursor, no hover
+       highlight, but text remains selectable. */
+    cursor: text;
+    user-select: text;
 }
-
-.subtext {
-&[data-v-2e6ba10c] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-25x);
-  min-height: 1lh;
-  margin-top: var(--kds-spacing-container-0-25x);
-  font: var(--kds-font-base-subtext-small);
-  color: var(--kds-color-text-and-icon-muted);
+&[data-v-a11103f6]:hover:not(.disabled),
+    &[data-v-a11103f6]:active:not(.disabled) {
+      background: transparent;
 }
-&.error[data-v-2e6ba10c] {
-    color: var(--kds-color-text-and-icon-danger);
 }
-& .subtext-text[data-v-2e6ba10c] {
-    min-width: 0;
+.kds-preview-list-empty[data-v-a11103f6],
+  .kds-preview-list-loading[data-v-a11103f6] {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+}
+.kds-preview-list-show-hide {
+&[data-v-a11103f6] {
+    padding: var(--kds-spacing-container-0-25x);
+    border-top: var(--kds-border-base-subtle);
+    border-bottom-right-radius: var(--kds-border-radius-container-0-37x);
+    border-bottom-left-radius: var(--kds-border-radius-container-0-37x);
+}
+.kds-preview-list-toggle[data-v-a11103f6] {
+      width: 100%;
+}
 }
 }
 
@@ -1872,155 +2239,6 @@ html.kds-legacy {
 }
 }
 
-.kds-form-field[data-v-5d99c134] {
-  display: flex;
-  flex-direction: column;
-}
-
-.container {
-&[data-v-93daa14e] {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: var(--kds-dimension-component-height-1-75x);
-  padding: 0
-    calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs));
-  cursor: text;
-  background: var(--kds-color-background-input-initial);
-  border: var(--kds-border-action-input);
-  border-radius: var(--kds-border-radius-container-0-37x);
-}
-&[data-v-93daa14e]:has(input:focus:not(:disabled)) {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
-}
-&[data-v-93daa14e]:has(.input-field:hover:not(:disabled, :focus)) {
-    background: var(--kds-color-background-input-hover);
-}
-&.error[data-v-93daa14e] {
-    border: var(--kds-border-action-error);
-}
-&.disabled[data-v-93daa14e] {
-    cursor: default;
-    border: var(--kds-border-action-disabled);
-    border-color: var(--kds-color-border-disabled);
-}
-}
-.icon-wrapper {
-&[data-v-93daa14e] {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  color: var(--kds-color-text-and-icon-subtle);
-}
-&.leading[data-v-93daa14e] {
-    padding-left: var(--kds-spacing-container-0-12x);
-}
-&.trailing[data-v-93daa14e] {
-    padding-right: var(--kds-spacing-container-0-12x);
-}
-.container.disabled &[data-v-93daa14e] {
-    color: var(--kds-color-text-and-icon-disabled);
-    cursor: default;
-}
-.container:focus-within &[data-v-93daa14e],
-  .container:has(.input-field.has-value) &[data-v-93daa14e] {
-    color: var(--kds-color-text-and-icon-neutral);
-}
-}
-.input-field {
-&[data-v-93daa14e] {
-  flex: 1 0 0;
-  min-width: 0;
-  height: var(--kds-dimension-component-height-1-75x);
-  padding: var(--kds-spacing-container-0-25x);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-neutral);
-  white-space: nowrap;
-  outline: none;
-  background: transparent;
-  border: none;
-
-  /* hide native steppers, we provide our own in NumberInput */
-
-  /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
-}
-&[type="number"] {
-&[data-v-93daa14e] {
-    appearance: textfield;
-}
-&[data-v-93daa14e]::-webkit-outer-spin-button,
-    &[data-v-93daa14e]::-webkit-inner-spin-button {
-      margin: 0;
-      appearance: none;
-}
-}
-&[type="search"][data-v-93daa14e]::-webkit-search-cancel-button {
-    appearance: none;
-}
-&[data-v-93daa14e]::placeholder {
-    color: var(--kds-color-text-and-icon-subtle);
-}
-&.empty-mask[data-v-93daa14e] {
-    color: var(--kds-color-text-and-icon-subtle);
-}
-&:disabled {
-&[data-v-93daa14e] {
-    color: var(--kds-color-text-and-icon-disabled);
-    cursor: default;
-}
-&[data-v-93daa14e]::placeholder {
-      color: var(--kds-color-text-and-icon-disabled);
-}
-}
-}
-.unit {
-&[data-v-93daa14e] {
-  flex-shrink: 0;
-  min-width: 0;
-  margin: 0 var(--kds-spacing-container-0-12x);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-neutral);
-  white-space: nowrap;
-}
-&.placeholder[data-v-93daa14e] {
-    color: var(--kds-color-text-and-icon-subtle);
-}
-&.disabled[data-v-93daa14e] {
-    color: var(--kds-color-text-and-icon-disabled);
-}
-.container:focus-within &[data-v-93daa14e] {
-    color: var(--kds-color-text-and-icon-neutral);
-}
-}
-.clear-button[data-v-93daa14e] {
-  margin-left: var(--kds-spacing-container-0-12x);
-}
-.leading-slot[data-v-93daa14e] {
-  display: flex;
-  flex-shrink: 0;
-  gap: var(--kds-spacing-container-0-12x);
-  align-items: center;
-}
-.trailing-slot[data-v-93daa14e] {
-  display: flex;
-  flex-shrink: 0;
-  gap: var(--kds-spacing-container-0-12x);
-  align-items: center;
-  margin-left: var(--kds-spacing-container-0-12x);
-}
-
-.kds-text-input-suggestions[data-v-83f45d15] {
-  max-height: var(--kds-dimension-component-height-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-color-picker-slider {
 &[data-v-f4be2bd4] {
   position: relative;
@@ -2989,19 +3207,19 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 
-.kds-accordion[data-v-0beea165] {
+.kds-accordion[data-v-96dcd299] {
   display: flex;
   flex-direction: column;
-  gap: var(--kds-spacing-container-1-25x);
+  gap: var(--kds-spacing-container-0-25x);
   width: 100%;
 }
-.kds-accordion-item[data-v-0beea165] {
+.kds-accordion-item[data-v-96dcd299] {
   padding: var(--kds-spacing-container-0-25x);
   background: var(--kds-color-surface-muted);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
 .kds-accordion-header {
-&[data-v-0beea165] {
+&[data-v-96dcd299] {
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
   align-items: center;
@@ -3018,28 +3236,28 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   border: none;
   border-radius: var(--kds-border-radius-container-0-25x);
   }
-&[data-v-0beea165]::-webkit-details-marker {
+&[data-v-96dcd299]::-webkit-details-marker {
     display: none;
 }
-&[data-v-0beea165]:focus-visible {
+&[data-v-96dcd299]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &:not([aria-disabled="true"]) {
-&[data-v-0beea165]:hover {
+&[data-v-96dcd299]:hover {
       background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-0beea165]:active {
+&[data-v-96dcd299]:active {
       background: var(--kds-color-background-neutral-active);
 }
 }
-&[aria-disabled="true"][data-v-0beea165] {
+&[aria-disabled="true"][data-v-96dcd299] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: not-allowed;
     background: var(--kds-color-background-neutral-initial);
 }
 }
-.kds-accordion-headline[data-v-0beea165] {
+.kds-accordion-headline[data-v-96dcd299] {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
@@ -3047,14 +3265,14 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   font: var(--kds-font-base-title-small-strong);
   white-space: nowrap;
 }
-.kds-accordion-headline-container[data-v-0beea165] {
+.kds-accordion-headline-container[data-v-96dcd299] {
   display: flex;
   flex: 1 1 auto;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
   min-width: 0;
 }
-.kds-accordion-content[data-v-0beea165] {
+.kds-accordion-content[data-v-96dcd299] {
   padding: var(--kds-spacing-container-1x);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -4076,6 +4294,172 @@ body:has(dialog.modal[open]) {
 }
 }
 
+.description {
+&[data-v-43067f23] {
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  overflow-wrap: anywhere;
+
+  /* stylelint-disable knime/no-deep-nesting */
+}
+&.plain[data-v-43067f23] {
+    white-space: pre-line;
+}
+&[data-v-43067f23]  {
+p {
+& {
+      padding: 0;
+      margin: 0 0 var(--kds-spacing-container-0-37x);
+      font: var(--kds-font-base-body-small);
+}
+&:last-child {
+        margin-bottom: 0;
+}
+}
+strong,
+    b {
+      font-weight: var(--kds-core-font-weight-strong);
+}
+i,
+    em {
+      font-style: italic;
+}
+h3 {
+      margin: 0;
+      font: var(--kds-font-base-body-large-strong);
+}
+h4 {
+      margin: 0;
+      font: var(--kds-font-base-body-medium-strong);
+}
+pre {
+& {
+      width: fit-content;
+      padding: var(--kds-spacing-container-0-75x);
+      font: var(--kds-font-base-code-xsmall);
+      background: var(--kds-color-surface-subtle);
+      border-radius: var(--kds-border-radius-container-0-25x);
+}
+& > code {
+        padding: 0;
+        background: none;
+}
+}
+& :not(pre) > code {
+      padding: var(--kds-spacing-container-0-12x)
+        var(--kds-spacing-container-0-25x);
+      font: var(--kds-font-base-code-xsmall);
+      background: var(--kds-color-surface-subtle);
+      box-decoration-break: clone;
+      border-radius: var(--kds-border-radius-container-0-12x);
+}
+
+    /** keep in sync with KdsLink */
+a {
+& {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: fit-content;
+      max-width: 100%;
+      padding: var(--kds-spacing-container-none)
+        var(--kds-spacing-container-0-10x);
+      font: var(--kds-font-base-body-small);
+      color: var(--kds-color-text-and-icon-neutral);
+      white-space: nowrap;
+      text-decoration-line: underline;
+      cursor: pointer;
+      border-radius: var(--kds-border-radius-container-0-12x);
+
+      /** internal links */
+
+      /** external links */
+}
+&:focus-visible {
+        outline: var(--kds-border-action-focused);
+        outline-offset: var(--kds-spacing-container-none);
+}
+&[href^="http"] {
+& {
+        --link-color: var(--kds-color-text-and-icon-selected);
+
+        color: var(--link-color);
+}
+&:visited {
+          --link-color: var(--kds-color-text-and-icon-info);
+
+          color: var(--link-color);
+}
+&:hover {
+          --link-color: var(--kds-color-text-and-icon-primary-inverted);
+
+          color: var(--link-color);
+          background-color: var(--kds-color-background-primary-bold-hover);
+}
+&:active {
+          --link-color: var(--kds-color-text-and-icon-selected-inverted);
+
+          color: var(--link-color);
+          background-color: var(--kds-color-background-primary-bold-active);
+}
+&::after {
+          display: block;
+          width: var(--kds-dimension-icon-0-56x);
+          height: var(--kds-dimension-icon-0-56x);
+          margin-left: var(--kds-spacing-container-0-12x);
+          content: "";
+          background-color: var(--link-color);
+          mask-image: var(--v0c7d182f);
+          mask-repeat: no-repeat;
+          mask-size: contain;
+}
+}
+&:not([href^="http"]) {
+& {
+        color: var(--kds-color-text-and-icon-neutral);
+}
+&:visited {
+          color: var(--kds-color-text-and-icon-info);
+}
+&:hover {
+          background-color: var(--kds-color-background-neutral-hover);
+}
+&:active {
+          background-color: var(--kds-color-background-neutral-active);
+}
+}
+}
+ol,
+    ul {
+      padding-left: var(--kds-spacing-container-2x);
+}
+dd {
+      margin-left: var(--kds-spacing-container-1x);
+}
+table {
+& {
+      border-spacing: var(--kds-spacing-container-0-25x) 0;
+      border-collapse: separate;
+}
+td,
+      th {
+        padding: var(--kds-spacing-container-0-25x);
+}
+th {
+        font: var(--kds-font-base-body-small-strong);
+        text-align: left;
+        border-bottom: var(--kds-border-width-icon-stroke-l) solid
+          var(--kds-color-border-neutral);
+}
+td {
+        font: var(--kds-font-base-body-small);
+        border-bottom: var(--kds-border-width-icon-stroke-s) solid
+          var(--kds-color-border-neutral);
+}
+}
+}
+}
+
 tr {
 &[data-v-b1ac99a6] {
   display: flex;
@@ -4188,18 +4572,18 @@ tr {
 }
 
 .page-controls {
-&[data-v-0c85eb71] {
+&[data-v-df9e464a] {
   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-0c85eb71],
-  & .page-size-menu[data-v-0c85eb71] {
+& .page-row-range[data-v-df9e464a],
+  & .page-size-menu[data-v-df9e464a] {
     flex-grow: 1;
     flex-basis: 0;
 }
-.page-size-menu[data-v-0c85eb71] {
+.page-size-menu[data-v-df9e464a] {
     display: flex;
     justify-content: flex-end;
 }
@@ -4247,24 +4631,24 @@ tr {
   position-try-order: most-inline-size;
 }
 
-.sort-popover[data-v-e540d3eb] {
+.sort-popover[data-v-80bf221a] {
   position-try-order: most-inline-size;
 }
 .popover-container {
 .body {
-&[data-v-e540d3eb] {
+&[data-v-80bf221a] {
     display: grid;
     grid-template-columns: auto auto;
     gap: var(--kds-spacing-container-0-5x);
     }
-&[data-v-e540d3eb] > * {
+&[data-v-80bf221a] > * {
       min-width: 0;
 }
 }
 }
 
 .kds-table-action-bar {
-&[data-v-4a75b4b1] {
+&[data-v-8cfb3c41] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4273,28 +4657,28 @@ tr {
   padding-left: var(--kds-spacing-container-0-5x);
   border-top: var(--kds-border-base-subtle);
 }
-&.temporary-view[data-v-4a75b4b1] {
+&.temporary-view[data-v-8cfb3c41] {
     background-color: var(--kds-color-background-static-info-muted);
 }
 & .left {
-&[data-v-4a75b4b1] {
+&[data-v-8cfb3c41] {
     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-4a75b4b1] {
+& .title[data-v-8cfb3c41] {
       font: var(--kds-font-base-title-medium-strong);
       color: var(--kds-color-text-and-icon-neutral);
 }
-& .dimension[data-v-4a75b4b1] {
+& .dimension[data-v-8cfb3c41] {
       font: var(--kds-font-base-title-small);
       color: var(--kds-color-text-and-icon-muted);
       white-space: pre;
 }
 }
-& .right[data-v-4a75b4b1] {
+& .right[data-v-8cfb3c41] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
@@ -4304,13 +4688,13 @@ tr {
 }
 
 thead {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
   background-color: var(--kds-color-surface-default);
   border-top: var(--kds-border-base-subtle);
   border-bottom: var(--kds-border-base-subtle);
 }
 & tr {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
     display: flex;
     height: 100%;
     transition:
@@ -4318,31 +4702,31 @@ thead {
       box-shadow 0.15s;
 }
 & th {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
       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-3fabfb11] {
+&.deletion-cell-spacer[data-v-08a86b18] {
         width: var(--kds-dimension-component-width-2x);
 }
-&.header-focused[data-v-3fabfb11] {
+&.header-focused[data-v-08a86b18] {
         background-color: var(--kds-color-focus-background);
 }
 &.select-cell {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
         display: flex;
         justify-content: center;
         width: var(--kds-dimension-component-width-2x);
         padding: var(--kds-spacing-container-0-75x);
 }
-& .select-checkbox[data-v-3fabfb11] {
+& .select-checkbox[data-v-08a86b18] {
           /* With this added padding the checkbox appears centered initially */
           padding: var(--kds-spacing-container-0-10x);
 }
 }
-&.colored-header[data-v-3fabfb11] {
+&.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,
@@ -4353,7 +4737,7 @@ thead {
         background-size: var(--kds-spacing-container-0-25x);
 }
 &.column-header {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
         /* Need to set position relative here to position the resize handle absolutely within the header cell */
         position: relative;
         display: flex;
@@ -4364,44 +4748,44 @@ thead {
         color: var(--kds-color-text-and-icon-neutral);
 }
 & .column-header-content {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
           display: flex;
           flex-direction: column;
           justify-content: center;
           width: 100%;
 }
-&[data-v-3fabfb11]:focus {
+&[data-v-08a86b18]:focus {
             outline: none;
 }
-&.with-button-in-header[data-v-3fabfb11] {
+&.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-3fabfb11] {
+&[data-v-08a86b18] {
             display: flex;
 }
-& .header-text-container[data-v-3fabfb11] {
+& .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-3fabfb11] {
+& .sub-header-text-container[data-v-08a86b18] {
             overflow: hidden;
             text-overflow: ellipsis;
             font: var(--kds-font-base-subtext-small);
 }
 }
-& .delete-column-button[data-v-3fabfb11] {
+& .delete-column-button[data-v-08a86b18] {
           display: flex;
           align-items: center;
           width: var(--kds-dimension-component-width-2x);
 }
 & .resize-handle-area {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
           position: absolute;
 
           /* resize handle should range into top border */
@@ -4427,42 +4811,42 @@ thead {
           cursor: col-resize;
           opacity: 0;
 }
-& .resize-handle[data-v-3fabfb11] {
+& .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-3fabfb11] {
+&.hover[data-v-08a86b18] {
             opacity: 1;
 }
-&.drag[data-v-3fabfb11] {
+&.drag[data-v-08a86b18] {
             opacity: 1;
 }
 }
 }
-&.new-column-head[data-v-3fabfb11] {
+&.new-column-head[data-v-08a86b18] {
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: var(--kds-spacing-container-0-5x);
 }
 }
-&[data-v-3fabfb11]:hover {
+&[data-v-08a86b18]:hover {
       outline: none;
 }
 }
-&.sub-menu-active tr[data-v-3fabfb11] {
+&.sub-menu-active tr[data-v-08a86b18] {
     padding-right: var(--kds-dimension-component-width-2x);
 }
 }
 .header-selection-overlay {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
   position: absolute;
   top: 0;
   height: 100%;
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.header-focused[data-v-3fabfb11] {
+&.header-focused[data-v-08a86b18] {
     border: var(--kds-border-action-focused);
 }
 }
@@ -4479,7 +4863,7 @@ thead {
 }
 
 .expand-button {
-&[data-v-5cde8e39] {
+&[data-v-f204ddf3] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -4493,42 +4877,40 @@ thead {
   border: none;
   border-radius: var(--kds-border-radius-container-0-12x);
 }
-&[data-v-5cde8e39]:hover {
+&[data-v-f204ddf3]:hover {
     background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-5cde8e39]:active {
+&[data-v-f204ddf3]:active {
     background-color: var(--kds-color-background-neutral-active);
 }
 &.toggled {
-&[data-v-5cde8e39] {
+&[data-v-f204ddf3] {
     color: var(--kds-color-text-and-icon-neutral-inverted);
     background-color: var(--kds-color-background-info-bold-initial);
     border: var(--kds-border-action-transparent);
 }
-&[data-v-5cde8e39]:hover {
+&[data-v-f204ddf3]:hover {
       background-color: var(--kds-color-background-info-bold-hover);
 }
-&[data-v-5cde8e39]:active {
+&[data-v-f204ddf3]:active {
       background-color: var(--kds-color-background-info-bold-active);
 }
 }
 }
 
 .data-cell {
-&[data-v-cf791d20] {
+&[data-v-698a5d81] {
   display: flex;
-  gap: var(--kds-spacing-container-0-25x);
-  align-items: center;
   font: var(--kds-font-base-interactive-small);
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
   user-select: none;
   background-clip: border-box;
 }
-&.in-cell-selection[data-v-cf791d20] {
+&.in-cell-selection[data-v-698a5d81] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-cell[data-v-cf791d20] {
+&.colored-cell[data-v-698a5d81] {
     /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
     background-image: linear-gradient(
       90deg,
@@ -4538,44 +4920,51 @@ thead {
     background-repeat: no-repeat;
     background-size: var(--kds-spacing-container-0-25x);
 }
-&.inline-block span[data-v-cf791d20] {
+&.inline-block span[data-v-698a5d81] {
     display: inline-block;
 }
-& .cell-text[data-v-cf791d20] {
-    flex: 1;
+& .cell-content[data-v-698a5d81] {
+    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] {
+    flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 }
 
-tr[data-v-981795db] {
+tr[data-v-0ad921a2] {
   display: flex;
 }
 tr.row {
-&[data-v-981795db] {
+&[data-v-0ad921a2] {
   border-bottom: var(--kds-border-base-subtle);
   }
 & td {
-&[data-v-981795db] {
+&[data-v-0ad921a2] {
     padding: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     }
 &.select-cell {
-&[data-v-981795db] {
+&[data-v-0ad921a2] {
       display: flex;
       justify-content: center;
       width: var(--kds-dimension-component-width-2x);
       min-width: var(--kds-dimension-component-width-2x);
       }
-& .select-checkbox[data-v-981795db] {
+& .select-checkbox[data-v-0ad921a2] {
         /* With this added padding the checkbox appears centered initially */
         padding: var(--kds-spacing-container-0-10x);
 }
 }
 &.deletion-cell {
-&[data-v-981795db] {
+&[data-v-0ad921a2] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -4583,11 +4972,11 @@ tr.row {
       min-width: var(--kds-dimension-component-width-2x);
       opacity: 0;
       }
-&[data-v-981795db]:focus-within {
+&[data-v-0ad921a2]:focus-within {
         opacity: 1;
 }
 }
-&.action[data-v-981795db] {
+&.action[data-v-0ad921a2] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -4596,19 +4985,19 @@ tr.row {
 }
 }
 &:hover {
-&[data-v-981795db] {
+&[data-v-0ad921a2] {
     outline: none;
     background-color: var(--kds-color-background-neutral-hover);
     }
-& .deletion-cell[data-v-981795db] {
+& .deletion-cell[data-v-0ad921a2] {
       opacity: 1;
 }
 }
-& a[data-v-981795db] {
+& a[data-v-0ad921a2] {
     outline: none;
 }
 }
-.row-drag-handle[data-v-981795db] {
+.row-drag-handle[data-v-0ad921a2] {
   position: relative;
   bottom: var(--kds-spacing-container-0-37x);
   height: var(--kds-spacing-container-0-37x);
@@ -4655,7 +5044,7 @@ table {
 }
 }
 
-.table-column-size-calculation[data-v-b93f03c7] {
+.table-column-size-calculation[data-v-ea7bec0f] {
   position: absolute;
   top: -9999px;
   left: -9999px;