@knime/kds-components 0.24.0 → 0.25.0

package/dist/index.css

@@ -542,7 +542,7 @@ html.kds-legacy {
 }
 
 .button {
-&[data-v-a696a1ec] {
+&[data-v-80e22f2e] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -556,143 +556,143 @@ html.kds-legacy {
 
   /* for LinkButton */
 }
-&[data-v-a696a1ec]:is(a) {
+&[data-v-80e22f2e]:is(a) {
     text-decoration: none;
 }
-&.disabled[data-v-a696a1ec] {
+&.disabled[data-v-80e22f2e] {
     cursor: default;
 }
-&[data-v-a696a1ec]:focus-visible {
+&[data-v-80e22f2e]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &.filled {
-&[data-v-a696a1ec] {
+&[data-v-80e22f2e] {
     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-a696a1ec] {
+&.disabled[data-v-80e22f2e] {
       color: var(--kds-color-text-and-icon-disabled-inverted);
       background-color: var(--kds-color-background-disabled-primary);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-a696a1ec]:hover {
+&[data-v-80e22f2e]:hover {
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-a696a1ec]:active {
+&[data-v-80e22f2e]:active {
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 &.destructive {
-&[data-v-a696a1ec] {
+&[data-v-80e22f2e] {
       color: var(--kds-color-text-and-icon-danger-inverted);
       background-color: var(--kds-color-background-danger-bold-initial);
 }
-&.disabled[data-v-a696a1ec] {
+&.disabled[data-v-80e22f2e] {
         color: var(--kds-color-text-and-icon-disabled-inverted);
         background-color: var(--kds-color-background-disabled-danger);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-a696a1ec]:hover {
+&[data-v-80e22f2e]:hover {
           background-color: var(--kds-color-background-danger-bold-hover);
 }
-&[data-v-a696a1ec]:active {
+&[data-v-80e22f2e]:active {
           background-color: var(--kds-color-background-danger-bold-active);
 }
 }
 }
 }
 &.outlined {
-&[data-v-a696a1ec] {
+&[data-v-80e22f2e] {
     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-a696a1ec] {
+&.disabled[data-v-80e22f2e] {
       color: var(--kds-color-text-and-icon-disabled);
       border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-a696a1ec]:hover {
+&[data-v-80e22f2e]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-a696a1ec]:active {
+&[data-v-80e22f2e]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-a696a1ec] {
+&[data-v-80e22f2e] {
       color: var(--kds-color-text-and-icon-danger);
       border: var(--kds-border-action-error);
 }
-&.disabled[data-v-a696a1ec] {
+&.disabled[data-v-80e22f2e] {
         color: var(--kds-color-text-and-icon-disabled);
         border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-a696a1ec]:hover {
+&[data-v-80e22f2e]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-a696a1ec]:active {
+&[data-v-80e22f2e]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.transparent {
-&[data-v-a696a1ec] {
+&[data-v-80e22f2e] {
     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-a696a1ec] {
+&.disabled[data-v-80e22f2e] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-a696a1ec]:hover {
+&[data-v-80e22f2e]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-a696a1ec]:active {
+&[data-v-80e22f2e]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-a696a1ec] {
+&[data-v-80e22f2e] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&.disabled[data-v-a696a1ec] {
+&.disabled[data-v-80e22f2e] {
         color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-a696a1ec]:hover {
+&[data-v-80e22f2e]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-a696a1ec]:active {
+&[data-v-80e22f2e]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.toggled {
-&[data-v-a696a1ec] {
+&[data-v-80e22f2e] {
     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-a696a1ec] {
+&.disabled[data-v-80e22f2e] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-a696a1ec]:hover {
+&[data-v-80e22f2e]:hover {
         background-color: var(--kds-color-background-selected-hover);
 }
-&[data-v-a696a1ec]:active {
+&[data-v-80e22f2e]:active {
         background-color: var(--kds-color-background-selected-active);
 }
 }
 }
-& .label[data-v-a696a1ec] {
+& .label[data-v-80e22f2e] {
     max-width: 200px;
     padding: 0 var(--kds-spacing-container-0-12x);
     overflow: hidden;
@@ -700,7 +700,7 @@ html.kds-legacy {
     white-space: nowrap;
     text-rendering: geometricprecision;
 }
-&.xsmall[data-v-a696a1ec] {
+&.xsmall[data-v-80e22f2e] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-25x);
     padding: 0
@@ -712,7 +712,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-25x)
     );
 }
-&.small[data-v-a696a1ec] {
+&.small[data-v-80e22f2e] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-5x);
     padding: 0
@@ -724,7 +724,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-37x)
     );
 }
-&.medium[data-v-a696a1ec] {
+&.medium[data-v-80e22f2e] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0
@@ -737,7 +737,7 @@ html.kds-legacy {
     );
 }
 &.large {
-&[data-v-a696a1ec] {
+&[data-v-80e22f2e] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0
@@ -749,11 +749,11 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-50x)
     );
 }
-& .label[data-v-a696a1ec] {
+& .label[data-v-80e22f2e] {
       padding: 0 var(--kds-spacing-container-0-25x);
 }
 }
-&.success[data-v-a696a1ec] {
+&.success[data-v-80e22f2e] {
     color: var(--kds-color-text-and-icon-success-inverted);
     background-color: var(--kds-color-background-success-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -762,7 +762,7 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.error[data-v-a696a1ec] {
+&.error[data-v-80e22f2e] {
     color: var(--kds-color-text-and-icon-danger-inverted);
     background-color: var(--kds-color-background-danger-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -771,11 +771,11 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.remove-border-radius-left[data-v-a696a1ec] {
+&.remove-border-radius-left[data-v-80e22f2e] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-&.remove-border-radius-right[data-v-a696a1ec] {
+&.remove-border-radius-right[data-v-80e22f2e] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -1070,7 +1070,7 @@ html.kds-legacy {
 }
 
 .kds-menu-container {
-&[data-v-68200614] {
+&[data-v-69149ee8] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-10x);
@@ -1082,7 +1082,7 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-68200614]:focus-visible {
+&[data-v-69149ee8]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
@@ -1254,7 +1254,7 @@ html.kds-legacy {
 }
 
 .kds-list-container {
-&[data-v-5e1d539e] {
+&[data-v-570992f0] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1263,26 +1263,23 @@ html.kds-legacy {
   padding: var(--kds-spacing-container-0-25x);
   overflow-y: auto;
 }
-&.standalone[data-v-5e1d539e] {
+&.standalone[data-v-570992f0] {
     border: var(--kds-border-base-subtle);
     border-radius: var(--kds-border-radius-container-0-31x);
 }
-&.menu[data-v-5e1d539e] {
-    border: none;
-}
-&[data-v-5e1d539e]:focus-visible {
+&[data-v-570992f0]: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-5e1d539e] {
+.kds-list-container-empty[data-v-570992f0] {
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
 }
-.kds-list-item-divider[data-v-5e1d539e] {
+.kds-list-item-divider[data-v-570992f0] {
   flex-shrink: 0;
   width: 100%;
   padding: 0;
@@ -1696,7 +1693,7 @@ html.kds-legacy {
 }
 
 .container {
-&[data-v-69242818] {
+&[data-v-b8ccb955] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -1708,46 +1705,46 @@ html.kds-legacy {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-69242818]:has(input:focus:not(:disabled)) {
+&[data-v-b8ccb955]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-69242818]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-b8ccb955]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-69242818] {
+&.error[data-v-b8ccb955] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-69242818] {
+&.disabled[data-v-b8ccb955] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-69242818] {
+&[data-v-b8ccb955] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-69242818] {
+&.leading[data-v-b8ccb955] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-69242818] {
+&.trailing[data-v-b8ccb955] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-69242818] {
+.container.disabled &[data-v-b8ccb955] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-69242818],
-  .container:has(.input-field.has-value) &[data-v-69242818] {
+.container:focus-within &[data-v-b8ccb955],
+  .container:has(.input-field.has-value) &[data-v-b8ccb955] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-69242818] {
+&[data-v-b8ccb955] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1766,36 +1763,36 @@ html.kds-legacy {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-69242818] {
+&[data-v-b8ccb955] {
     appearance: textfield;
 }
-&[data-v-69242818]::-webkit-outer-spin-button,
-    &[data-v-69242818]::-webkit-inner-spin-button {
+&[data-v-b8ccb955]::-webkit-outer-spin-button,
+    &[data-v-b8ccb955]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-69242818]::-webkit-search-cancel-button {
+&[type="search"][data-v-b8ccb955]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-69242818]::placeholder {
+&[data-v-b8ccb955]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.empty-mask[data-v-69242818] {
+&.empty-mask[data-v-b8ccb955] {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-69242818] {
+&[data-v-b8ccb955] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-69242818]::placeholder {
+&[data-v-b8ccb955]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-69242818] {
+&[data-v-b8ccb955] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1805,26 +1802,26 @@ html.kds-legacy {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-69242818] {
+&.placeholder[data-v-b8ccb955] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-69242818] {
+&.disabled[data-v-b8ccb955] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-69242818] {
+.container:focus-within &[data-v-b8ccb955] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-69242818] {
+.clear-button[data-v-b8ccb955] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.leading-slot[data-v-69242818] {
+.leading-slot[data-v-b8ccb955] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
 }
-.trailing-slot[data-v-69242818] {
+.trailing-slot[data-v-b8ccb955] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -2192,7 +2189,7 @@ html.kds-legacy {
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-3094963a] {
+.kds-search-results-container[data-v-3e274ed2] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
@@ -2283,6 +2280,52 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   justify-content: center;
 }
 
+.kds-interval-popover[data-v-02541fd1] {
+  display: flex;
+  flex-direction: column;
+  width: var(--kds-dimension-component-width-17-5x);
+  max-width: 100%;
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.kds-interval-popover-header {
+&[data-v-02541fd1] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-37x)
+    var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-75x);
+  }
+.kds-interval-popover-title[data-v-02541fd1] {
+    font: var(--kds-font-base-title-medium);
+    color: var(--kds-color-text-and-icon-neutral);
+}
+}
+.kds-interval-popover-divider[data-v-02541fd1] {
+  padding-bottom: calc(
+    var(--kds-spacing-container-0-12x) - var(--kds-core-border-width-xs)
+  );
+  border-bottom: var(--kds-border-base-subtle);
+}
+.kds-interval-popover-content {
+&[data-v-02541fd1] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x);
+  padding: var(--kds-spacing-container-0-75x);
+  }
+.kds-interval-popover-direction-switch[data-v-02541fd1] {
+    align-self: center;
+}
+.kds-interval-popover-grid[data-v-02541fd1] {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
+}
+}
+
 .kds-dropdown-trigger-button {
 &[data-v-0f4de8fb] {
   display: flex;
@@ -2888,14 +2931,14 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 
 .kds-panel-header {
-&[data-v-be5bccc5] {
+&[data-v-dd28904c] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
   border-bottom: var(--kds-border-base-muted);
 }
-& h6[data-v-be5bccc5] {
+& h6[data-v-dd28904c] {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
@@ -2904,7 +2947,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
     font: var(--kds-font-base-title-medium-strong);
     white-space: nowrap;
 }
-& .kds-close-button[data-v-be5bccc5] {
+& .kds-close-button[data-v-dd28904c] {
     flex: 0 0 auto;
 }
 }