@knime/kds-components 0.14.0 → 0.15.0

package/dist/index.css

@@ -58,7 +58,7 @@
   font-size: calc(1em + calc(100cqi - 2em) / 2);
 }
 .kds-icon {
-&[data-v-3a57d423] {
+&[data-v-4da5bf3e] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -73,7 +73,7 @@
   stroke-width: var(--icon-stroke-width);
   shape-rendering: geometricPrecision;
 }
-&.xsmall[data-v-3a57d423] {
+&.xsmall[data-v-4da5bf3e] {
     --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);
@@ -82,7 +82,7 @@
       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-3a57d423] {
+&[data-v-4da5bf3e] {
         --scaling-factor: 0.75;
         --icon-width: var(--kds-dimension-icon-0-75x);
         --icon-height: var(--kds-dimension-icon-0-75x);
@@ -93,19 +93,22 @@
 }
 }
 }
-&.small[data-v-3a57d423] {
+&.small[data-v-4da5bf3e] {
     --icon-width: var(--kds-dimension-icon-0-75x);
     --icon-height: var(--kds-dimension-icon-0-75x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 }
-&.large[data-v-3a57d423] {
+&.large[data-v-4da5bf3e] {
     --icon-width: var(--kds-dimension-icon-1-25x);
     --icon-height: var(--kds-dimension-icon-1-25x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
+.kds-icon.disabled[data-v-4da5bf3e] {
+  color: var(--kds-color-text-and-icon-disabled);
+}
 .kds-icon {
-&[data-v-d7166d18] {
+&[data-v-806087da] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -120,7 +123,7 @@
   stroke-width: var(--icon-stroke-width);
   shape-rendering: geometricPrecision;
 }
-&.xsmall[data-v-d7166d18] {
+&.xsmall[data-v-806087da] {
     --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);
@@ -129,7 +132,7 @@
       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-d7166d18] {
+&[data-v-806087da] {
         --scaling-factor: 0.75;
         --icon-width: var(--kds-dimension-icon-0-75x);
         --icon-height: var(--kds-dimension-icon-0-75x);
@@ -140,19 +143,19 @@
 }
 }
 }
-&.small[data-v-d7166d18] {
+&.small[data-v-806087da] {
     --icon-width: var(--kds-dimension-icon-0-75x);
     --icon-height: var(--kds-dimension-icon-0-75x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 }
-&.large[data-v-d7166d18] {
+&.large[data-v-806087da] {
     --icon-width: var(--kds-dimension-icon-1-25x);
     --icon-height: var(--kds-dimension-icon-1-25x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
 .kds-data-type-icon-container {
-&[data-v-d7166d18] {
+&[data-v-806087da] {
   --data-type-height: var(--kds-dimension-component-height-1x);
   --data-type-width: var(--kds-dimension-component-width-1x);
   --data-type-padding: var(--kds-spacing-container-0-12x);
@@ -170,20 +173,23 @@
 
   /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
 }
-&.small[data-v-d7166d18] {
+&.disabled[data-v-806087da] {
+    color: var(--kds-color-text-and-icon-disabled);
+}
+&.small[data-v-806087da] {
     --data-type-height: var(--kds-dimension-icon-0-75x);
     --data-type-width: var(--kds-dimension-icon-0-75x);
     --data-type-padding: var(--kds-spacing-container-none);
 }
-&.large[data-v-d7166d18] {
+&.large[data-v-806087da] {
     --data-type-height: var(--kds-dimension-component-height-1-25x);
     --data-type-width: var(--kds-dimension-component-width-1-25x);
 }
 & .kds-icon.kds-data-type-icon {
-&.small[data-v-d7166d18] {
+&.small[data-v-806087da] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
 }
-&.medium[data-v-d7166d18] {
+&.medium[data-v-806087da] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
@@ -1143,7 +1149,7 @@ html.kds-legacy {
 }
 
 .container {
-&[data-v-44072f2e] {
+&[data-v-fad4fd1f] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -1154,46 +1160,46 @@ html.kds-legacy {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-44072f2e]:has(input:focus:not(:disabled)) {
+&[data-v-fad4fd1f]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-44072f2e]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-fad4fd1f]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-44072f2e] {
+&.error[data-v-fad4fd1f] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-44072f2e] {
+&.disabled[data-v-fad4fd1f] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-44072f2e] {
+&[data-v-fad4fd1f] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-44072f2e] {
+&.leading[data-v-fad4fd1f] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-44072f2e] {
+&.trailing[data-v-fad4fd1f] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-44072f2e] {
+.container.disabled &[data-v-fad4fd1f] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-44072f2e],
-  .container:has(.input-field.has-value) &[data-v-44072f2e] {
+.container:focus-within &[data-v-fad4fd1f],
+  .container:has(.input-field.has-value) &[data-v-fad4fd1f] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-44072f2e] {
+&[data-v-fad4fd1f] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1212,33 +1218,33 @@ html.kds-legacy {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-44072f2e] {
+&[data-v-fad4fd1f] {
     appearance: textfield;
 }
-&[data-v-44072f2e]::-webkit-outer-spin-button,
-    &[data-v-44072f2e]::-webkit-inner-spin-button {
+&[data-v-fad4fd1f]::-webkit-outer-spin-button,
+    &[data-v-fad4fd1f]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-44072f2e]::-webkit-search-cancel-button {
+&[type="search"][data-v-fad4fd1f]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-44072f2e]::placeholder {
+&[data-v-fad4fd1f]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-44072f2e] {
+&[data-v-fad4fd1f] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-44072f2e]::placeholder {
+&[data-v-fad4fd1f]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-44072f2e] {
+&[data-v-fad4fd1f] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1248,27 +1254,26 @@ html.kds-legacy {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-44072f2e] {
+&.placeholder[data-v-fad4fd1f] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-44072f2e] {
+&.disabled[data-v-fad4fd1f] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-44072f2e] {
+.container:focus-within &[data-v-fad4fd1f] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-44072f2e] {
+.clear-button[data-v-fad4fd1f] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.leading-slot[data-v-44072f2e] {
+.leading-slot[data-v-fad4fd1f] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
-  margin-left: var(--kds-spacing-container-0-12x);
 }
-.trailing-slot[data-v-44072f2e] {
+.trailing-slot[data-v-fad4fd1f] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -1341,7 +1346,7 @@ html.kds-legacy {
 }
 
 textarea {
-&[data-v-2e4d2d42] {
+&[data-v-a2df5fed] {
   box-sizing: border-box;
   width: 100%;
   padding: var(--kds-spacing-container-0-5x);
@@ -1356,35 +1361,305 @@ textarea {
   border-radius: var(--kds-border-radius-container-0-37x);
   -ms-overflow-style: none;
 }
-&.invalid[data-v-2e4d2d42] {
+&.invalid[data-v-a2df5fed] {
     border: var(--kds-border-action-error);
 }
-&[data-v-2e4d2d42]::placeholder {
+&[data-v-a2df5fed]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-2e4d2d42] {
+&[data-v-a2df5fed] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
-&[data-v-2e4d2d42]::placeholder {
+&[data-v-a2df5fed]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
-&[data-v-2e4d2d42]:hover:not(:disabled, :focus) {
+&[data-v-a2df5fed]:hover:not(:disabled, :focus) {
     background: var(--kds-color-background-input-hover);
 }
-&[data-v-2e4d2d42]:focus:not(:disabled) {
+&[data-v-a2df5fed]:focus:not(:disabled) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
-textarea[data-v-2e4d2d42]::-webkit-scrollbar {
+textarea[data-v-a2df5fed]::-webkit-scrollbar {
   display: none;
 }
 
+.kds-dropdown-trigger-button {
+&[data-v-f1917c48] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--kds-dimension-component-height-1-75x);
+  padding: 0 var(--kds-spacing-container-0-25x);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  cursor: pointer;
+  background: var(--kds-color-background-input-initial);
+  border: var(--kds-border-action-input);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+&[data-v-f1917c48]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&.error[data-v-f1917c48] {
+    border: var(--kds-border-action-error);
+}
+&[data-v-f1917c48]:disabled {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+    border: var(--kds-border-action-disabled);
+    border-color: var(--kds-color-border-disabled);
+}
+&[data-v-f1917c48]:not(:disabled, :focus):hover {
+    background: var(--kds-color-background-input-hover);
+}
+}
+.leading[data-v-f1917c48] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  width: var(--kds-dimension-component-width-1x);
+  height: var(--kds-dimension-component-width-1x);
+  margin-left: var(--kds-spacing-container-0-12x);
+}
+.text {
+&[data-v-f1917c48] {
+  flex: 1 0 0;
+  min-width: 0;
+  padding: var(--kds-spacing-container-0-25x);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  white-space: nowrap;
+}
+&.placeholder[data-v-f1917c48] {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&.missing[data-v-f1917c48] {
+    color: var(--kds-color-text-and-icon-danger);
+}
+}
+.trailing[data-v-f1917c48] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding-right: var(--kds-spacing-container-0-12x);
+}
+
+.kds-empty-state[data-v-b4af30cf] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  max-width: 280px;
+  padding: var(--kds-spacing-container-0-5x);
+}
+.kds-empty-state-headline[data-v-b4af30cf] {
+  margin: 0;
+  font: var(--kds-font-base-title-small);
+  color: var(--kds-color-text-and-icon-muted);
+  text-align: center;
+}
+.kds-empty-state-description[data-v-b4af30cf] {
+  margin: 0;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-muted);
+  text-align: center;
+}
+.kds-empty-state-action[data-v-b4af30cf] {
+  margin-top: var(--kds-spacing-container-0-12x);
+}
+
+.kds-list-item {
+&[data-v-fca25fc2] {
+  position: relative;
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  width: 100%;
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  color: var(--kds-color-text-and-icon-neutral);
+  cursor: pointer;
+  user-select: none;
+  background: var(--kds-color-background-neutral-initial);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-31x);
+}
+&.small {
+&[data-v-fca25fc2] {
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: flex-start;
+    padding: var(--kds-spacing-container-0-25x)
+      var(--kds-spacing-container-0-5x);
+    font: var(--kds-font-base-interactive-small);
+}
+.accessory[data-v-fca25fc2] {
+      display: flex;
+      padding: var(--kds-spacing-container-0-12x) 0;
+}
+}
+&.large {
+&[data-v-fca25fc2] {
+    min-height: var(--kds-dimension-component-height-2-5x);
+    font: var(--kds-font-base-interactive-small-strong);
+}
+.accessory[data-v-fca25fc2] {
+      display: flex;
+      align-items: center;
+}
+}
+.content {
+&[data-v-fca25fc2] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+}
+.label {
+&[data-v-fca25fc2] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font: inherit;
+      white-space: nowrap;
+}
+.prefix[data-v-fca25fc2] {
+        flex-shrink: 0;
+}
+.special[data-v-fca25fc2] {
+        font: var(--kds-font-base-interactive-small-italic);
+}
+}
+.subtext[data-v-fca25fc2] {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      font: var(--kds-font-base-subtext-small);
+      color: var(--kds-color-text-and-icon-muted);
+      -webkit-box-orient: vertical;
+}
+}
+.trailing-item {
+&[data-v-fca25fc2] {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--kds-spacing-container-0-12x);
+    align-items: center;
+    align-self: center;
+    justify-content: flex-end;
+}
+.shortcut[data-v-fca25fc2] {
+      flex-shrink: 0;
+      font: var(--kds-font-base-interactive-xsmall-strong);
+      color: var(--kds-color-text-and-icon-muted);
+      text-align: right;
+      white-space: nowrap;
+}
+}
+&[data-v-fca25fc2]:hover:not(.disabled),
+  &.active[data-v-fca25fc2]:not(.disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-fca25fc2]:active:not(.disabled) {
+    background: var(--kds-color-background-neutral-active);
+}
+&.selected {
+&[data-v-fca25fc2] {
+    color: var(--kds-color-text-and-icon-selected);
+    background: var(--kds-color-background-selected-initial);
+}
+.subtext[data-v-fca25fc2] {
+      color: var(--kds-color-text-and-icon-selected);
+}
+&[data-v-fca25fc2]:hover,
+    &.active[data-v-fca25fc2] {
+      background: var(--kds-color-background-selected-hover);
+}
+&[data-v-fca25fc2]:active {
+      background: var(--kds-color-background-selected-active);
+}
+&.disabled[data-v-fca25fc2] {
+      background: var(--kds-color-background-selected-initial);
+}
+}
+&.missing {
+&[data-v-fca25fc2] {
+    color: var(--kds-color-text-and-icon-danger);
+    background: var(--kds-color-background-danger-initial);
+}
+.subtext[data-v-fca25fc2] {
+      color: var(--kds-color-text-and-icon-danger);
+}
+&[data-v-fca25fc2]:hover,
+    &.active[data-v-fca25fc2] {
+      background: var(--kds-color-background-danger-hover);
+}
+&[data-v-fca25fc2]:active {
+      background: var(--kds-color-background-danger-active);
+}
+&.disabled[data-v-fca25fc2] {
+      background: var(--kds-color-background-danger-initial);
+}
+}
+&.disabled {
+&[data-v-fca25fc2] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+.shortcut[data-v-fca25fc2],
+    .subtext[data-v-fca25fc2] {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+}
+}
+
+.kds-list-container {
+&[data-v-bfdaa003] {
+  display: flex;
+  flex-direction: column;
+  padding: var(--kds-spacing-container-0-25x);
+  overflow-y: auto;
+}
+&[data-v-bfdaa003]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+    border-radius: var(--kds-border-radius-container-0-31x);
+}
+}
+.kds-list-container-empty[data-v-bfdaa003] {
+  display: flex;
+  justify-content: center;
+}
+
+.kds-dropdown-container[data-v-dd55ee4d] {
+  display: flex;
+  flex-direction: column;
+  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-dd55ee4d] {
+  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-dd55ee4d] {
+  max-height: var(--kds-dimension-component-height-12x);
+  }
+&.multiline[data-v-dd55ee4d] {
+    max-height: var(--kds-dimension-component-height-20x);
+}
+}
+
 .kds-info-popover-content[data-v-951f2a2b] {
   max-width: var(--kds-dimension-component-width-25x);
   padding: var(--kds-spacing-container-0-75x);
@@ -1502,30 +1777,6 @@ textarea[data-v-2e4d2d42]::-webkit-scrollbar {
 }
 }
 
-.kds-empty-state[data-v-b4af30cf] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: center;
-  max-width: 280px;
-  padding: var(--kds-spacing-container-0-5x);
-}
-.kds-empty-state-headline[data-v-b4af30cf] {
-  margin: 0;
-  font: var(--kds-font-base-title-small);
-  color: var(--kds-color-text-and-icon-muted);
-  text-align: center;
-}
-.kds-empty-state-description[data-v-b4af30cf] {
-  margin: 0;
-  font: var(--kds-font-base-body-small);
-  color: var(--kds-color-text-and-icon-muted);
-  text-align: center;
-}
-.kds-empty-state-action[data-v-b4af30cf] {
-  margin-top: var(--kds-spacing-container-0-12x);
-}
-
 .kds-card {
 &[data-v-4607badd] {
   position: relative;