@knime/kds-components 0.18.0 → 0.18.2

package/dist/index.css

@@ -980,7 +980,7 @@ html.kds-legacy {
 }
 
 .kds-popover {
-&[data-v-786e523e] {
+&[data-v-6e5d3976] {
   padding: 0;
   margin: 0;
   overflow: visible;
@@ -1001,10 +1001,10 @@ html.kds-legacy {
 
   /* noinspection CssInvalidFunction,CssInvalidAtRule */
 }
-&.full-width[data-v-786e523e] {
+&.full-width[data-v-6e5d3976] {
     min-inline-size: anchor-size(width);
 }
-&.floating.top-right[data-v-786e523e] {
+&.floating.top-right[data-v-6e5d3976] {
     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);
@@ -1012,7 +1012,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-786e523e] {
+&.floating.top-left[data-v-6e5d3976] {
     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;
@@ -1020,7 +1020,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-786e523e] {
+&.floating.bottom-right[data-v-6e5d3976] {
     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);
@@ -1028,7 +1028,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-786e523e] {
+&.floating.bottom-left[data-v-6e5d3976] {
     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;
@@ -1065,7 +1065,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-786e523e] {
+.kds-popover-default-content[data-v-6e5d3976] {
   padding: var(--kds-spacing-container-0-75x);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -1074,25 +1074,25 @@ html.kds-legacy {
   box-shadow: var(--kds-elevation-level-3);
 }
 
-.kds-menu-container[data-v-be36bcd4] {
+.kds-menu-container[data-v-b9edc498] {
   max-width: var(--kds-dimension-component-width-20x);
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
 
-.kds-label-wrapper[data-v-1a5dc1ba] {
+.kds-label-wrapper[data-v-11fbd55f] {
   display: flex;
   gap: var(--kds-spacing-container-0-12x);
-  align-items: center;
+  align-items: flex-start;
   max-width: 100%;
   min-height: var(--kds-dimension-component-height-0-75x);
-  padding-bottom: var(--kds-spacing-input-label-spacing-bottom);
 }
-.label[data-v-1a5dc1ba] {
+.label[data-v-11fbd55f] {
   display: block;
   flex-grow: 1;
   max-width: 100%;
+  padding-bottom: var(--kds-spacing-input-label-spacing-bottom);
   overflow: hidden;
   text-overflow: ellipsis;
   font: var(--kds-font-base-title-small-strong);
@@ -1465,7 +1465,7 @@ html.kds-legacy {
 }
 
 .container {
-&[data-v-d8e771c0] {
+&[data-v-380127b2] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -1477,46 +1477,46 @@ html.kds-legacy {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-d8e771c0]:has(input:focus:not(:disabled)) {
+&[data-v-380127b2]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-d8e771c0]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-380127b2]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-d8e771c0] {
+&.error[data-v-380127b2] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-d8e771c0] {
+&.disabled[data-v-380127b2] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-d8e771c0] {
+&[data-v-380127b2] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-d8e771c0] {
+&.leading[data-v-380127b2] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-d8e771c0] {
+&.trailing[data-v-380127b2] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-d8e771c0] {
+.container.disabled &[data-v-380127b2] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-d8e771c0],
-  .container:has(.input-field.has-value) &[data-v-d8e771c0] {
+.container:focus-within &[data-v-380127b2],
+  .container:has(.input-field.has-value) &[data-v-380127b2] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-d8e771c0] {
+&[data-v-380127b2] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1535,33 +1535,33 @@ html.kds-legacy {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-d8e771c0] {
+&[data-v-380127b2] {
     appearance: textfield;
 }
-&[data-v-d8e771c0]::-webkit-outer-spin-button,
-    &[data-v-d8e771c0]::-webkit-inner-spin-button {
+&[data-v-380127b2]::-webkit-outer-spin-button,
+    &[data-v-380127b2]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-d8e771c0]::-webkit-search-cancel-button {
+&[type="search"][data-v-380127b2]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-d8e771c0]::placeholder {
+&[data-v-380127b2]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-d8e771c0] {
+&[data-v-380127b2] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-d8e771c0]::placeholder {
+&[data-v-380127b2]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-d8e771c0] {
+&[data-v-380127b2] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1571,26 +1571,26 @@ html.kds-legacy {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-d8e771c0] {
+&.placeholder[data-v-380127b2] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-d8e771c0] {
+&.disabled[data-v-380127b2] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-d8e771c0] {
+.container:focus-within &[data-v-380127b2] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-d8e771c0] {
+.clear-button[data-v-380127b2] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.leading-slot[data-v-d8e771c0] {
+.leading-slot[data-v-380127b2] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
 }
-.trailing-slot[data-v-d8e771c0] {
+.trailing-slot[data-v-380127b2] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -1598,7 +1598,14 @@ html.kds-legacy {
   margin-left: var(--kds-spacing-container-0-12x);
 }
 
-.kds-color-picker[data-v-180fafdd] {
+.kds-text-input-suggestions[data-v-e06ba773] {
+  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[data-v-2a488ace] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-1x);
@@ -1609,7 +1616,7 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.colorspace[data-v-180fafdd] {
+.colorspace[data-v-2a488ace] {
   position: relative;
   width: 100%;
   height: 200px;
@@ -1617,7 +1624,7 @@ html.kds-legacy {
   outline: none;
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-.handle[data-v-180fafdd] {
+.handle[data-v-2a488ace] {
   position: absolute;
   width: var(--kds-dimension-icon-0-75x);
   height: var(--kds-dimension-icon-0-75x);
@@ -1628,7 +1635,7 @@ html.kds-legacy {
   transform: translate(-50%, -50%);
 }
 .hue {
-&[data-v-180fafdd] {
+&[data-v-2a488ace] {
   position: relative;
   width: 100%;
   height: var(--kds-dimension-component-height-0-75x);
@@ -1646,18 +1653,18 @@ html.kds-legacy {
   );
   border-radius: var(--kds-border-radius-container-pill);
   }
-& .handle[data-v-180fafdd] {
+& .handle[data-v-2a488ace] {
     top: 50%;
 }
 }
-.colorspace[data-v-180fafdd]:focus,
-.hue[data-v-180fafdd]:focus {
+.colorspace[data-v-2a488ace]:focus,
+.hue[data-v-2a488ace]:focus {
   outline: none;
 }
-.colorspace:focus .handle[data-v-180fafdd],
-.colorspace:focus-visible .handle[data-v-180fafdd],
-.hue:focus .handle[data-v-180fafdd],
-.hue:focus-visible .handle[data-v-180fafdd] {
+.colorspace:focus .handle[data-v-2a488ace],
+.colorspace:focus-visible .handle[data-v-2a488ace],
+.hue:focus .handle[data-v-2a488ace],
+.hue:focus-visible .handle[data-v-2a488ace] {
   outline: var(--kds-border-action-focused);
   outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
 }
@@ -3111,7 +3118,7 @@ html.kds-legacy {
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-df327342] {
+.kds-search-results-container[data-v-622ba27e] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
@@ -3231,23 +3238,23 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   );
 }
 
-.kds-dropdown-container[data-v-ceeaf8b9] {
+.kds-dropdown-container[data-v-9f49ff8b] {
   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-ceeaf8b9] {
+.kds-dropdown-container-sticky-top[data-v-9f49ff8b] {
   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-ceeaf8b9] {
+&[data-v-9f49ff8b] {
   max-height: var(--kds-dimension-component-height-12x);
   }
-&.multiline[data-v-ceeaf8b9] {
+&.multiline[data-v-9f49ff8b] {
     max-height: var(--kds-dimension-component-height-20x);
 }
 }
@@ -3294,7 +3301,7 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
 }
 }
 
-.kds-multi-select-dropdown-options[data-v-bb63f252] {
+.kds-multi-select-dropdown-options[data-v-be1b84c3] {
   display: flex;
   flex-direction: column;
   min-width: var(--kds-dimension-component-width-12x);
@@ -3302,19 +3309,19 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.kds-multi-select-dropdown-search[data-v-bb63f252] {
+.kds-multi-select-dropdown-search[data-v-be1b84c3] {
   padding: var(--kds-spacing-container-0-25x);
   border-bottom: var(--kds-border-base-subtle);
 }
 .kds-multi-select-dropdown-list {
-&[data-v-bb63f252] {
+&[data-v-be1b84c3] {
   max-height: var(--kds-dimension-component-height-12x);
   }
-&.multiline[data-v-bb63f252] {
+&.multiline[data-v-be1b84c3] {
     max-height: var(--kds-dimension-component-height-20x);
 }
 }
-.kds-multi-select-dropdown-footer[data-v-bb63f252] {
+.kds-multi-select-dropdown-footer[data-v-be1b84c3] {
   padding: var(--kds-spacing-container-0-25x);
   border-top: var(--kds-border-base-subtle);
 }
@@ -3330,7 +3337,7 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
 }
 
 .info-toggle-button {
-&[data-v-d865cc89] {
+&[data-v-b1e3f011] {
   --bg-initial: transparent;
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -3351,20 +3358,20 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-d865cc89] {
+&.hidden[data-v-b1e3f011] {
     opacity: 0;
 }
-&[data-v-d865cc89]:focus-visible {
+&[data-v-b1e3f011]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-d865cc89]:hover {
+&[data-v-b1e3f011]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-d865cc89]:active {
+&[data-v-b1e3f011]:active {
     background-color: var(--bg-active);
 }
-&.selected[data-v-d865cc89] {
+&.selected[data-v-b1e3f011] {
     --bg-initial: var(--kds-color-background-selected-initial);
     --bg-hover: var(--kds-color-background-selected-hover);
     --bg-active: var(--kds-color-background-selected-active);
@@ -3386,7 +3393,7 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
 }
 
 .variable-toggle-button {
-&[data-v-f362911c] {
+&[data-v-f4f626d4] {
   --bg-initial: var(--kds-color-background-neutral-initial);
   --bg-hover: var(--kds-color-background-neutral-hover);
   --bg-active: var(--kds-color-background-neutral-active);
@@ -3407,27 +3414,27 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-12x);
   opacity: 1;
 }
-&.hidden[data-v-f362911c] {
+&.hidden[data-v-f4f626d4] {
     opacity: 0;
 }
-&[data-v-f362911c]:focus-visible {
+&[data-v-f4f626d4]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-f362911c]:hover {
+&[data-v-f4f626d4]:hover {
     background-color: var(--bg-hover);
 }
-&[data-v-f362911c]:active {
+&[data-v-f4f626d4]:active {
     background-color: var(--bg-active);
 }
-&.pressed-or-set[data-v-f362911c] {
+&.pressed-or-set[data-v-f4f626d4] {
     --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);
     --icon-color: var(--kds-color-text-and-icon-success);
 }
-&.error[data-v-f362911c] {
+&.error[data-v-f4f626d4] {
     --bg-initial: var(--kds-color-background-danger-initial);
     --bg-hover: var(--kds-color-background-danger-hover);
     --bg-active: var(--kds-color-background-danger-active);