@knime/kds-components 0.22.3 → 0.23.1

package/dist/index.css

@@ -723,7 +723,7 @@ html.kds-legacy {
 }
 
 .kds-link {
-&[data-v-65e776f1] {
+&[data-v-56e748a8] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -736,57 +736,57 @@ html.kds-legacy {
   text-decoration-line: underline;
   border-radius: var(--kds-border-radius-container-0-12x);
 }
-&[data-v-65e776f1]:is(a) {
+&[data-v-56e748a8]:is(a) {
     cursor: pointer;
 }
-&[data-v-65e776f1]:focus-visible {
+&[data-v-56e748a8]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-container-none);
 }
-& .label[data-v-65e776f1],
-  & .file-size[data-v-65e776f1] {
+& .label[data-v-56e748a8],
+  & .file-size[data-v-56e748a8] {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 &.variant-internal {
-&[data-v-65e776f1] {
+&[data-v-56e748a8] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 &:not(.disabled) {
-&[data-v-65e776f1]:visited {
+&[data-v-56e748a8]:visited {
         color: var(--kds-color-text-and-icon-info);
 }
-&[data-v-65e776f1]:hover {
+&[data-v-56e748a8]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-65e776f1]:active {
+&[data-v-56e748a8]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 }
-&.variant-external[data-v-65e776f1] {
+&.variant-external[data-v-56e748a8] {
     gap: var(--kds-spacing-container-0-12x);
 }
 &:is(.variant-external, .variant-document) {
-&[data-v-65e776f1] {
+&[data-v-56e748a8] {
     color: var(--kds-color-text-and-icon-selected);
 }
 &:not(.disabled) {
-&[data-v-65e776f1]:visited {
+&[data-v-56e748a8]:visited {
         color: var(--kds-color-text-and-icon-info);
 }
-&[data-v-65e776f1]:hover {
+&[data-v-56e748a8]:hover {
         color: var(--kds-color-text-and-icon-primary-inverted);
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-65e776f1]:active {
+&[data-v-56e748a8]:active {
         color: var(--kds-color-text-and-icon-selected-inverted);
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 }
-&.disabled[data-v-65e776f1] {
+&.disabled[data-v-56e748a8] {
     color: var(--kds-color-text-and-icon-disabled);
     pointer-events: none;
     cursor: default;
@@ -830,7 +830,7 @@ html.kds-legacy {
   opacity: 1;
 }
 
-.kds-empty-state[data-v-5da4d570] {
+.kds-empty-state[data-v-e913660a] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-5x);
@@ -838,26 +838,39 @@ html.kds-legacy {
   max-width: 280px;
   padding: var(--kds-spacing-container-0-5x);
 }
-.kds-empty-state-headline[data-v-5da4d570] {
+.kds-empty-state-headline[data-v-e913660a] {
   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-5da4d570] {
+.kds-empty-state-description[data-v-e913660a] {
   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-5da4d570] {
+.kds-empty-state-action[data-v-e913660a] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
   margin-top: var(--kds-spacing-container-0-12x);
 }
+.kds-empty-state.disabled {
+& .kds-empty-state-headline[data-v-e913660a],
+  & .kds-empty-state-description[data-v-e913660a] {
+    color: var(--kds-color-text-and-icon-disabled);
+}
+}
 
 .kds-list-item {
-&[data-v-822789ec] {
+&[data-v-e3517d34] {
   position: relative;
   display: flex;
+  flex-shrink: 0;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
   width: 100%;
@@ -871,36 +884,36 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-31x);
 }
 &.small {
-&[data-v-822789ec] {
+&[data-v-e3517d34] {
     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-822789ec] {
+.accessory[data-v-e3517d34] {
       display: flex;
       padding: var(--kds-spacing-container-0-12x) 0;
 }
 }
 &.large {
-&[data-v-822789ec] {
+&[data-v-e3517d34] {
     font: var(--kds-font-base-interactive-small-strong);
 }
-.accessory[data-v-822789ec] {
+.accessory[data-v-e3517d34] {
       display: flex;
       align-items: center;
 }
 }
 .content {
-&[data-v-822789ec] {
+&[data-v-e3517d34] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     min-width: 0;
 }
-.large &[data-v-822789ec] {
+.large &[data-v-e3517d34] {
       justify-content: center;
       min-height: calc(
         var(--kds-dimension-component-height-2-5x) - 2 *
@@ -908,19 +921,19 @@ html.kds-legacy {
       );
 }
 .label {
-&[data-v-822789ec] {
+&[data-v-e3517d34] {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 }
-.prefix[data-v-822789ec] {
+.prefix[data-v-e3517d34] {
         flex-shrink: 0;
 }
-.special[data-v-822789ec] {
+.special[data-v-e3517d34] {
         font: var(--kds-font-base-interactive-small-italic);
 }
 }
-.subtext[data-v-822789ec] {
+.subtext[data-v-e3517d34] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -931,7 +944,7 @@ html.kds-legacy {
 }
 }
 .trailing-item {
-&[data-v-822789ec] {
+&[data-v-e3517d34] {
     display: flex;
     flex-shrink: 0;
     gap: var(--kds-spacing-container-0-12x);
@@ -939,75 +952,76 @@ html.kds-legacy {
     align-self: center;
     justify-content: flex-end;
 }
-.shortcut[data-v-822789ec] {
+.shortcut[data-v-e3517d34] {
       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-822789ec] {
+.trailing-item-reserve-space[data-v-e3517d34] {
       width: var(--kds-dimension-icon-0-75x);
 }
 }
-&[data-v-822789ec]:hover:not(.disabled),
-  &.active[data-v-822789ec]:not(.disabled) {
+&[data-v-e3517d34]:hover:not(.disabled),
+  &.active[data-v-e3517d34]:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-822789ec]:active:not(.disabled) {
+&[data-v-e3517d34]:active:not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-822789ec] {
+&[data-v-e3517d34] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
 }
-.subtext[data-v-822789ec] {
+.subtext[data-v-e3517d34] {
       color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-822789ec]:hover,
-    &.active[data-v-822789ec] {
+&[data-v-e3517d34]:hover,
+    &.active[data-v-e3517d34] {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-822789ec]:active {
+&[data-v-e3517d34]:active {
       background: var(--kds-color-background-selected-active);
 }
-&.disabled[data-v-822789ec] {
+&.disabled[data-v-e3517d34] {
       background: var(--kds-color-background-selected-initial);
 }
 }
 &.missing {
-&[data-v-822789ec] {
+&[data-v-e3517d34] {
     color: var(--kds-color-text-and-icon-danger);
     background: var(--kds-color-background-danger-initial);
 }
-.subtext[data-v-822789ec] {
+.subtext[data-v-e3517d34] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&[data-v-822789ec]:hover,
-    &.active[data-v-822789ec] {
+&[data-v-e3517d34]:hover,
+    &.active[data-v-e3517d34] {
       background: var(--kds-color-background-danger-hover);
 }
-&[data-v-822789ec]:active {
+&[data-v-e3517d34]:active {
       background: var(--kds-color-background-danger-active);
 }
-&.disabled[data-v-822789ec] {
+&.disabled[data-v-e3517d34] {
       background: var(--kds-color-background-danger-initial);
 }
 }
 &.disabled {
-&[data-v-822789ec] {
+&[data-v-e3517d34] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.shortcut[data-v-822789ec],
-    .subtext[data-v-822789ec] {
+.shortcut[data-v-e3517d34],
+    .subtext[data-v-e3517d34] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 
-.kds-list-item-divider[data-v-3ee92695] {
+.kds-list-item-divider[data-v-48d01ed1] {
+  flex-shrink: 0;
   width: 100%;
   padding: 0;
   margin: 0 0 var(--kds-spacing-container-0-12x);
@@ -1016,8 +1030,9 @@ html.kds-legacy {
 }
 
 .kds-list-item-section-title {
-&[data-v-53382531] {
+&[data-v-14b9ee99] {
   display: flex;
+  flex-shrink: 0;
   gap: var(--kds-spacing-container-0-25x);
   align-items: center;
   width: 100%;
@@ -1025,12 +1040,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-53382531] {
+.icon[data-v-14b9ee99] {
     display: flex;
     flex-shrink: 0;
     align-items: center;
 }
-.label[data-v-53382531] {
+.label[data-v-14b9ee99] {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -1174,24 +1189,24 @@ html.kds-legacy {
 }
 
 .kds-split-button {
-&[data-v-f9ca012e] {
+&[data-v-f72917bd] {
   display: flex;
 }
-&.filled[data-v-f9ca012e] {
+&.filled[data-v-f72917bd] {
     gap: var(--kds-spacing-container-0-10x);
 }
-&.outlined[data-v-f9ca012e] {
+&.outlined[data-v-f72917bd] {
     gap: var(--kds-spacing-container-none);
 }
-& .kds-split-button-primary.outlined[data-v-f9ca012e] {
+& .kds-split-button-primary.outlined[data-v-f72917bd] {
     border-right: none;
 }
 }
-.kds-split-button-primary[data-v-f9ca012e] {
+.kds-split-button-primary[data-v-f72917bd] {
   flex-shrink: 1;
   min-width: 0;
 }
-.kds-split-button-secondary[data-v-f9ca012e] {
+.kds-split-button-secondary[data-v-f72917bd] {
   flex-shrink: 0;
 }
 
@@ -3473,7 +3488,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 }
 
-.kds-multi-select-dropdown-options[data-v-9b631765] {
+.kds-multi-select-dropdown-options[data-v-3cac8f74] {
   display: flex;
   flex-direction: column;
   min-width: var(--kds-dimension-component-width-12x);
@@ -3481,19 +3496,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-9b631765] {
+.kds-multi-select-dropdown-search[data-v-3cac8f74] {
   padding: var(--kds-spacing-container-0-25x);
   border-bottom: var(--kds-border-base-subtle);
 }
 .kds-multi-select-dropdown-list {
-&[data-v-9b631765] {
+&[data-v-3cac8f74] {
   max-height: var(--kds-dimension-component-height-12x);
   }
-&.multiline[data-v-9b631765] {
+&.multiline[data-v-3cac8f74] {
     max-height: var(--kds-dimension-component-height-20x);
 }
 }
-.kds-multi-select-dropdown-footer[data-v-9b631765] {
+.kds-multi-select-dropdown-footer[data-v-3cac8f74] {
   padding: var(--kds-spacing-container-0-25x);
   border-top: var(--kds-border-base-subtle);
 }
@@ -3557,7 +3572,7 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 
 .kds-multiselect-list-box {
-&[data-v-24af1af0] {
+&[data-v-a95bec6e] {
   position: relative;
   display: flex;
   flex: 1;
@@ -3568,19 +3583,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-24af1af0] {
+&.disabled[data-v-a95bec6e] {
     border: var(--kds-border-action-disabled);
 }
-&.error[data-v-24af1af0] {
+&.error[data-v-a95bec6e] {
     border: var(--kds-border-action-error);
 }
-&[data-v-24af1af0]:has(:focus-visible) {
+&[data-v-a95bec6e]:has(:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
 .kds-multiselect-list-box-list {
-&[data-v-24af1af0] {
+&[data-v-a95bec6e] {
   position: relative;
   flex-grow: 1;
   padding: calc(
@@ -3589,28 +3604,28 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   margin: 0;
   overflow-y: auto;
 }
-&[data-v-24af1af0]:focus {
+&[data-v-a95bec6e]:focus {
     outline: none;
 }
 }
 .kds-multiselect-list-box-item {
-&[data-v-24af1af0] {
+&[data-v-a95bec6e] {
   height: var(--kds-dimension-component-height-1-5x);
   margin-top: var(--kds-spacing-container-0-10x);
 }
-&.kds-multiselect-list-box-item-first[data-v-24af1af0] {
+&.kds-multiselect-list-box-item-first[data-v-a95bec6e] {
     margin-top: 0;
 }
 }
-.kds-multiselect-list-box-content-grid[data-v-24af1af0] {
+.kds-multiselect-list-box-content-grid[data-v-a95bec6e] {
   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-24af1af0] {
+.kds-multiselect-list-box-content[data-v-a95bec6e] {
   min-width: 0;
 }
-.kds-multiselect-sticky-bottom[data-v-24af1af0] {
+.kds-multiselect-sticky-bottom[data-v-a95bec6e] {
   position: sticky;
   bottom: calc(-1 * var(--kds-spacing-container-0-25x));
   min-width: 0;
@@ -3619,7 +3634,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-24af1af0] {
+.kds-multiselect-empty[data-v-a95bec6e] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -3947,6 +3962,28 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 }
 
+.kds-panel-header {
+&[data-v-be5bccc5] {
+  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] {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-title-medium-strong);
+    white-space: nowrap;
+}
+& .kds-close-button[data-v-be5bccc5] {
+    flex: 0 0 auto;
+}
+}
+
 .kds-tab-icon[data-v-d5737ccf] {
   flex-shrink: 0;
 }
@@ -4236,6 +4273,15 @@ to {
 }
 }
 
+.kds-panel-button-bar[data-v-aeb00620] {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: space-between;
+  padding: var(--kds-spacing-container-0-5x);
+  background-color: var(--kds-color-surface-default);
+  border-top: var(--kds-border-base-muted);
+}
+
 .modal-header {
 &[data-v-62740dc9] {
   display: flex;
@@ -4393,3 +4439,29 @@ body:has(dialog.modal[open]) {
 .flush-left[data-v-41fc8d84] {
   margin-right: auto;
 }
+
+.kds-button-group-measure[data-v-a945c295] {
+  position: absolute;
+  display: flex;
+  visibility: hidden;
+  gap: var(--kds-spacing-container-0-5x);
+  white-space: nowrap;
+}
+.kds-button-group {
+&[data-v-a945c295] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  }
+&.left[data-v-a945c295] {
+    justify-content: flex-start;
+}
+&.right[data-v-a945c295] {
+    justify-content: flex-end;
+}
+&.middle[data-v-a945c295] {
+    justify-content: center;
+}
+}