@knime/kds-components 0.28.10 → 0.29.1

package/dist/index.css

@@ -1364,6 +1364,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;
@@ -1460,46 +1867,6 @@ html.kds-legacy {
 }
 }
 
-.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;
-}
-}
-
 .checkbox {
 &[data-v-7bfc5667] {
   --bg-initial: var(--kds-color-background-input-initial);
@@ -1862,155 +2229,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;
@@ -2979,19 +3197,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;
@@ -3008,28 +3226,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;
@@ -3037,14 +3255,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);