@knime/kds-components 0.23.1 → 0.23.2

package/dist/index.css

@@ -478,6 +478,59 @@ to {
 }
 }
 
+.donut-container {
+&[data-v-66e88c70] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-75x);
+  align-items: center;
+}
+& .donut-chart {
+&[data-v-66e88c70] {
+    display: block;
+    flex-shrink: 0;
+}
+& .background-circle[data-v-66e88c70] {
+      stroke: var(--kds-color-background-static-chart-0);
+}
+& .primary-circle[data-v-66e88c70] {
+      stroke: var(--kds-color-background-static-chart-1);
+}
+& .secondary-circle[data-v-66e88c70] {
+      stroke: var(--kds-color-background-static-chart-2);
+}
+& .value-wedge {
+&.animate[data-v-66e88c70] {
+        transition:
+          stroke-dashoffset 0.5s,
+          stroke 0.5s;
+}
+}
+}
+& .donut-text {
+&[data-v-66e88c70] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-12x);
+    overflow: hidden;
+    color: var(--kds-color-text-and-icon-neutral);
+}
+& .title[data-v-66e88c70] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font: var(--kds-font-base-title-medium-strong);
+      white-space: nowrap;
+}
+& .sub-text[data-v-66e88c70] {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      font: var(--kds-font-base-subtext-medium);
+      -webkit-box-orient: vertical;
+}
+}
+}
+
 html.kds-legacy {
   --kds-legacy-button-border-radius: var(--kds-border-radius-container-pill);
 }
@@ -867,7 +920,7 @@ html.kds-legacy {
 }
 
 .kds-list-item {
-&[data-v-e3517d34] {
+&[data-v-3bdbc9c1] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -884,36 +937,36 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-31x);
 }
 &.small {
-&[data-v-e3517d34] {
+&[data-v-3bdbc9c1] {
     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-e3517d34] {
+.accessory[data-v-3bdbc9c1] {
       display: flex;
       padding: var(--kds-spacing-container-0-12x) 0;
 }
 }
 &.large {
-&[data-v-e3517d34] {
+&[data-v-3bdbc9c1] {
     font: var(--kds-font-base-interactive-small-strong);
 }
-.accessory[data-v-e3517d34] {
+.accessory[data-v-3bdbc9c1] {
       display: flex;
       align-items: center;
 }
 }
 .content {
-&[data-v-e3517d34] {
+&[data-v-3bdbc9c1] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     min-width: 0;
 }
-.large &[data-v-e3517d34] {
+.large &[data-v-3bdbc9c1] {
       justify-content: center;
       min-height: calc(
         var(--kds-dimension-component-height-2-5x) - 2 *
@@ -921,19 +974,19 @@ html.kds-legacy {
       );
 }
 .label {
-&[data-v-e3517d34] {
+&[data-v-3bdbc9c1] {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 }
-.prefix[data-v-e3517d34] {
+.prefix[data-v-3bdbc9c1] {
         flex-shrink: 0;
 }
-.special[data-v-e3517d34] {
+.special[data-v-3bdbc9c1] {
         font: var(--kds-font-base-interactive-small-italic);
 }
 }
-.subtext[data-v-e3517d34] {
+.subtext[data-v-3bdbc9c1] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -944,7 +997,7 @@ html.kds-legacy {
 }
 }
 .trailing-item {
-&[data-v-e3517d34] {
+&[data-v-3bdbc9c1] {
     display: flex;
     flex-shrink: 0;
     gap: var(--kds-spacing-container-0-12x);
@@ -952,75 +1005,75 @@ html.kds-legacy {
     align-self: center;
     justify-content: flex-end;
 }
-.shortcut[data-v-e3517d34] {
+.shortcut[data-v-3bdbc9c1] {
       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;
 }
-.trailing-item-reserve-space[data-v-e3517d34] {
+.trailing-item-reserve-space[data-v-3bdbc9c1] {
       width: var(--kds-dimension-icon-0-75x);
 }
 }
-&[data-v-e3517d34]:hover:not(.disabled),
-  &.active[data-v-e3517d34]:not(.disabled) {
+&[data-v-3bdbc9c1]:hover:not(.disabled),
+  &.active[data-v-3bdbc9c1]:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-e3517d34]:active:not(.disabled) {
+&[data-v-3bdbc9c1]:active:not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-e3517d34] {
+&[data-v-3bdbc9c1] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
 }
-.subtext[data-v-e3517d34] {
+.subtext[data-v-3bdbc9c1] {
       color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-e3517d34]:hover,
-    &.active[data-v-e3517d34] {
+&[data-v-3bdbc9c1]:hover,
+    &.active[data-v-3bdbc9c1] {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-e3517d34]:active {
+&[data-v-3bdbc9c1]:active {
       background: var(--kds-color-background-selected-active);
 }
-&.disabled[data-v-e3517d34] {
+&.disabled[data-v-3bdbc9c1] {
       background: var(--kds-color-background-selected-initial);
 }
 }
 &.missing {
-&[data-v-e3517d34] {
+&[data-v-3bdbc9c1] {
     color: var(--kds-color-text-and-icon-danger);
     background: var(--kds-color-background-danger-initial);
 }
-.subtext[data-v-e3517d34] {
+.subtext[data-v-3bdbc9c1] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&[data-v-e3517d34]:hover,
-    &.active[data-v-e3517d34] {
+&[data-v-3bdbc9c1]:hover,
+    &.active[data-v-3bdbc9c1] {
       background: var(--kds-color-background-danger-hover);
 }
-&[data-v-e3517d34]:active {
+&[data-v-3bdbc9c1]:active {
       background: var(--kds-color-background-danger-active);
 }
-&.disabled[data-v-e3517d34] {
+&.disabled[data-v-3bdbc9c1] {
       background: var(--kds-color-background-danger-initial);
 }
 }
 &.disabled {
-&[data-v-e3517d34] {
+&[data-v-3bdbc9c1] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.shortcut[data-v-e3517d34],
-    .subtext[data-v-e3517d34] {
+.shortcut[data-v-3bdbc9c1],
+    .subtext[data-v-3bdbc9c1] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 
-.kds-list-item-divider[data-v-48d01ed1] {
+.kds-list-item-divider[data-v-7f982d9e] {
   flex-shrink: 0;
   width: 100%;
   padding: 0;
@@ -1030,7 +1083,7 @@ html.kds-legacy {
 }
 
 .kds-list-item-section-title {
-&[data-v-14b9ee99] {
+&[data-v-5eeb1226] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-25x);
@@ -1040,12 +1093,12 @@ html.kds-legacy {
   padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
   color: var(--kds-color-text-and-icon-muted);
 }
-.icon[data-v-14b9ee99] {
+.icon[data-v-5eeb1226] {
     display: flex;
     flex-shrink: 0;
     align-items: center;
 }
-.label[data-v-14b9ee99] {
+.label[data-v-5eeb1226] {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -1056,7 +1109,7 @@ html.kds-legacy {
 }
 
 .kds-list-container {
-&[data-v-d8750fc1] {
+&[data-v-9359aaf4] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1065,27 +1118,27 @@ html.kds-legacy {
   padding: var(--kds-spacing-container-0-25x);
   overflow-y: auto;
 }
-&.standalone[data-v-d8750fc1] {
+&.standalone[data-v-9359aaf4] {
     border: var(--kds-border-base-subtle);
     border-radius: var(--kds-border-radius-container-0-31x);
 }
-&.menu[data-v-d8750fc1] {
+&.menu[data-v-9359aaf4] {
     border: none;
 }
-&[data-v-d8750fc1]:focus-visible {
+&[data-v-9359aaf4]: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-d8750fc1] {
+.kds-list-container-empty[data-v-9359aaf4] {
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
 }
 
-.kds-menu-container[data-v-d87656d8] {
+.kds-menu-container[data-v-7a0323dd] {
   min-width: var(--kds-dimension-component-width-12x);
   max-width: var(--kds-dimension-component-width-20x);
   background-color: var(--kds-color-surface-default);
@@ -1189,24 +1242,24 @@ html.kds-legacy {
 }
 
 .kds-split-button {
-&[data-v-f72917bd] {
+&[data-v-8f48b87a] {
   display: flex;
 }
-&.filled[data-v-f72917bd] {
+&.filled[data-v-8f48b87a] {
     gap: var(--kds-spacing-container-0-10x);
 }
-&.outlined[data-v-f72917bd] {
+&.outlined[data-v-8f48b87a] {
     gap: var(--kds-spacing-container-none);
 }
-& .kds-split-button-primary.outlined[data-v-f72917bd] {
+& .kds-split-button-primary.outlined[data-v-8f48b87a] {
     border-right: none;
 }
 }
-.kds-split-button-primary[data-v-f72917bd] {
+.kds-split-button-primary[data-v-8f48b87a] {
   flex-shrink: 1;
   min-width: 0;
 }
-.kds-split-button-secondary[data-v-f72917bd] {
+.kds-split-button-secondary[data-v-8f48b87a] {
   flex-shrink: 0;
 }
 
@@ -1747,7 +1800,7 @@ html.kds-legacy {
   margin-left: var(--kds-spacing-container-0-12x);
 }
 
-.kds-text-input-suggestions[data-v-1740ce83] {
+.kds-text-input-suggestions[data-v-c9f1be40] {
   max-height: var(--kds-dimension-component-height-12x);
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
@@ -3287,7 +3340,7 @@ html.kds-legacy {
 }
 }
 
-.kds-date-time-format-popover[data-v-f75ebe1b] {
+.kds-date-time-format-popover[data-v-8c697d02] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-5x);
@@ -3298,14 +3351,14 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.kds-date-time-format-popover-list[data-v-f75ebe1b] {
+.kds-date-time-format-popover-list[data-v-8c697d02] {
   width: var(--kds-dimension-component-width-16x);
   min-width: 100%;
   max-width: 100%;
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-b1809b6d] {
+.kds-search-results-container[data-v-3094963a] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
@@ -3359,7 +3412,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 
 .kds-dropdown-trigger-button {
-&[data-v-cf3becf9] {
+&[data-v-0f4de8fb] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -3373,24 +3426,24 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-cf3becf9]:focus-visible {
+&[data-v-0f4de8fb]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&.error[data-v-cf3becf9] {
+&.error[data-v-0f4de8fb] {
     border: var(--kds-border-action-error);
 }
-&[data-v-cf3becf9]:disabled {
+&[data-v-0f4de8fb]: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-cf3becf9]:not(:disabled, :focus):hover {
+&[data-v-0f4de8fb]:not(:disabled, :focus):hover {
     background: var(--kds-color-background-input-hover);
 }
 }
-.leading[data-v-cf3becf9] {
+.leading[data-v-0f4de8fb] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -3399,7 +3452,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   margin-left: var(--kds-spacing-container-0-12x);
 }
 .text {
-&[data-v-cf3becf9] {
+&[data-v-0f4de8fb] {
   flex: 1 0 0;
   min-width: 0;
   padding: var(--kds-spacing-container-0-25x);
@@ -3408,14 +3461,14 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   text-align: left;
   white-space: nowrap;
 }
-&.placeholder[data-v-cf3becf9] {
+&.placeholder[data-v-0f4de8fb] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.missing[data-v-cf3becf9] {
+&.missing[data-v-0f4de8fb] {
     color: var(--kds-color-text-and-icon-danger);
 }
 }
-.trailing[data-v-cf3becf9] {
+.trailing[data-v-0f4de8fb] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -3425,29 +3478,29 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   );
 }
 
-.kds-dropdown-container[data-v-db105594] {
+.kds-dropdown-container[data-v-e61a9cf9] {
   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-db105594] {
+.kds-dropdown-container-sticky-top[data-v-e61a9cf9] {
   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-db105594] {
+&[data-v-e61a9cf9] {
   max-height: var(--kds-dimension-component-height-12x);
   }
-&.multiline[data-v-db105594] {
+&.multiline[data-v-e61a9cf9] {
     max-height: var(--kds-dimension-component-height-20x);
 }
 }
 
 .kds-list-item-button {
-&[data-v-13945d12] {
+&[data-v-21fb5571] {
   position: relative;
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
@@ -3464,31 +3517,31 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   border: none;
   border-radius: var(--kds-border-radius-container-0-31x);
 }
-.label[data-v-13945d12] {
+.label[data-v-21fb5571] {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-&[data-v-13945d12]:disabled {
+&[data-v-21fb5571]:disabled {
     color: var(--kds-color-text-and-icon-disabled);
     pointer-events: none;
     cursor: default;
 }
-&[data-v-13945d12]:focus-visible:not(:disabled) {
+&[data-v-21fb5571]:focus-visible:not(:disabled) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-13945d12]:hover:not(:disabled) {
+&[data-v-21fb5571]:hover:not(:disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-13945d12]:active:not(:disabled) {
+&[data-v-21fb5571]:active:not(:disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 }
 
-.kds-multi-select-dropdown-options[data-v-3cac8f74] {
+.kds-multi-select-dropdown-options[data-v-68fe366f] {
   display: flex;
   flex-direction: column;
   min-width: var(--kds-dimension-component-width-12x);
@@ -3496,19 +3549,19 @@ textarea[data-v-bdf12ef9]::-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-3cac8f74] {
+.kds-multi-select-dropdown-search[data-v-68fe366f] {
   padding: var(--kds-spacing-container-0-25x);
   border-bottom: var(--kds-border-base-subtle);
 }
 .kds-multi-select-dropdown-list {
-&[data-v-3cac8f74] {
+&[data-v-68fe366f] {
   max-height: var(--kds-dimension-component-height-12x);
   }
-&.multiline[data-v-3cac8f74] {
+&.multiline[data-v-68fe366f] {
     max-height: var(--kds-dimension-component-height-20x);
 }
 }
-.kds-multi-select-dropdown-footer[data-v-3cac8f74] {
+.kds-multi-select-dropdown-footer[data-v-68fe366f] {
   padding: var(--kds-spacing-container-0-25x);
   border-top: var(--kds-border-base-subtle);
 }
@@ -3572,7 +3625,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 
 .kds-multiselect-list-box {
-&[data-v-a95bec6e] {
+&[data-v-ee1c7bd0] {
   position: relative;
   display: flex;
   flex: 1;
@@ -3583,19 +3636,19 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-31x);
 }
-&.disabled[data-v-a95bec6e] {
+&.disabled[data-v-ee1c7bd0] {
     border: var(--kds-border-action-disabled);
 }
-&.error[data-v-a95bec6e] {
+&.error[data-v-ee1c7bd0] {
     border: var(--kds-border-action-error);
 }
-&[data-v-a95bec6e]:has(:focus-visible) {
+&[data-v-ee1c7bd0]:has(:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
 .kds-multiselect-list-box-list {
-&[data-v-a95bec6e] {
+&[data-v-ee1c7bd0] {
   position: relative;
   flex-grow: 1;
   padding: calc(
@@ -3604,28 +3657,28 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   margin: 0;
   overflow-y: auto;
 }
-&[data-v-a95bec6e]:focus {
+&[data-v-ee1c7bd0]:focus {
     outline: none;
 }
 }
 .kds-multiselect-list-box-item {
-&[data-v-a95bec6e] {
+&[data-v-ee1c7bd0] {
   height: var(--kds-dimension-component-height-1-5x);
   margin-top: var(--kds-spacing-container-0-10x);
 }
-&.kds-multiselect-list-box-item-first[data-v-a95bec6e] {
+&.kds-multiselect-list-box-item-first[data-v-ee1c7bd0] {
     margin-top: 0;
 }
 }
-.kds-multiselect-list-box-content-grid[data-v-a95bec6e] {
+.kds-multiselect-list-box-content-grid[data-v-ee1c7bd0] {
   display: grid;
   grid-template-rows: 1fr auto;
   min-height: calc(100% - 2 * var(--kds-core-border-width-xs));
 }
-.kds-multiselect-list-box-content[data-v-a95bec6e] {
+.kds-multiselect-list-box-content[data-v-ee1c7bd0] {
   min-width: 0;
 }
-.kds-multiselect-sticky-bottom[data-v-a95bec6e] {
+.kds-multiselect-sticky-bottom[data-v-ee1c7bd0] {
   position: sticky;
   bottom: calc(-1 * var(--kds-spacing-container-0-25x));
   min-width: 0;
@@ -3634,7 +3687,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   background: var(--kds-color-surface-default);
   border-top: var(--kds-border-base-subtle);
 }
-.kds-multiselect-empty[data-v-a95bec6e] {
+.kds-multiselect-empty[data-v-ee1c7bd0] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -3643,7 +3696,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   pointer-events: none;
 }
 
-.kds-twin-list-body[data-v-8a9e1b15] {
+.kds-twin-list-body[data-v-11062d8e] {
   display: grid;
   grid-template-columns:
     minmax(0, 1fr) var(--kds-dimension-component-width-1-5x)
@@ -3651,31 +3704,31 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   gap: var(--kds-spacing-container-0-25x);
 }
 .kds-list-column {
-&[data-v-8a9e1b15] {
+&[data-v-11062d8e] {
   display: flex;
   flex-direction: column;
   min-block-size: 0;
   }
-& .kds-list-box[data-v-8a9e1b15] {
+& .kds-list-box[data-v-11062d8e] {
     flex: 1;
     min-block-size: 0;
 }
 }
-.kds-list-header[data-v-8a9e1b15] {
+.kds-list-header[data-v-11062d8e] {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: var(--kds-spacing-input-label-spacing-bottom);
 }
-.kds-list-label[data-v-8a9e1b15] {
+.kds-list-label[data-v-11062d8e] {
   font: var(--kds-font-base-title-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-.kds-list-count[data-v-8a9e1b15] {
+.kds-list-count[data-v-11062d8e] {
   font: var(--kds-font-base-title-xsmall);
   color: var(--kds-color-text-and-icon-muted);
 }
-.kds-button-column[data-v-8a9e1b15] {
+.kds-button-column[data-v-11062d8e] {
   display: flex;
   flex-direction: column;
   padding-top: var(--kds-spacing-container-4x);