@knime/kds-components 0.26.2 → 0.28.0

package/dist/index.css

@@ -1809,11 +1809,11 @@ html.kds-legacy {
   white-space: nowrap;
 }
 
-.value-switch[data-v-640271e0] {
+.value-switch[data-v-f6d51795] {
   align-items: flex-start;
 }
 .options {
-&[data-v-640271e0] {
+&[data-v-f6d51795] {
   display: flex;
   flex-flow: row nowrap;
   gap: var(--kds-spacing-container-none);
@@ -1830,12 +1830,12 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-37x);
   box-shadow: var(--kds-fake-border-xs-muted);
   }
-&[data-v-640271e0]:has(:focus-visible) {
+&[data-v-f6d51795]:has(:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
     border-radius: var(--kds-border-radius-container-0-44x);
 }
-&.error[data-v-640271e0] {
+&.error[data-v-f6d51795] {
     border: var(--kds-border-action-error);
     box-shadow: none;
 }
@@ -2396,7 +2396,7 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
   display: none;
 }
 
-.kds-time-picker[data-v-c2f06c87] {
+.kds-time-picker[data-v-c2bc1234] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-75x);
@@ -2406,30 +2406,25 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.kds-time-picker-selected-time[data-v-c2f06c87] {
-  font: var(--kds-font-base-title-large-strong);
-  color: var(--kds-color-text-and-icon-neutral);
-  text-align: center;
-}
-.kds-time-picker-fields[data-v-c2f06c87] {
+.kds-time-picker-fields[data-v-c2bc1234] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: flex-start;
 }
-.kds-time-picker-field[data-v-c2f06c87] {
+.kds-time-picker-field[data-v-c2bc1234] {
   flex: 1;
   min-width: var(--kds-dimension-component-width-4x);
 }
-.kds-time-picker-field-trash[data-v-c2f06c87] {
+.kds-time-picker-field-trash[data-v-c2bc1234] {
   margin-top: calc(
     var(--kds-dimension-component-height-1x) +
       var(--kds-spacing-input-label-spacing-bottom)
   );
 }
-.kds-time-picker-divider[data-v-c2f06c87] {
+.kds-time-picker-divider[data-v-c2bc1234] {
   width: 100%;
 }
-.kds-time-picker-actions[data-v-c2f06c87] {
+.kds-time-picker-actions[data-v-c2bc1234] {
   display: flex;
   justify-content: center;
 }
@@ -2963,8 +2958,104 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
 }
 }
 
+.kds-accordion[data-v-66485734] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-1-25x);
+  width: 100%;
+}
+.kds-accordion-item[data-v-66485734] {
+  display: flex;
+  flex-direction: column;
+  padding: var(--kds-spacing-container-0-25x);
+  background: var(--kds-color-surface-muted);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+.kds-accordion-header {
+&[data-v-66485734] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  width: 100%;
+  min-height: var(--kds-dimension-component-height-2-25x);
+  padding: 0 var(--kds-spacing-container-0-75x) 0
+    var(--kds-spacing-container-1x);
+  font: inherit;
+  color: var(--kds-color-text-and-icon-neutral);
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-25x);
+  }
+&[data-v-66485734]:hover {
+    background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-66485734]:active {
+    background: var(--kds-color-background-neutral-active);
+}
+&[data-v-66485734]:disabled {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: not-allowed;
+    background: var(--kds-color-background-neutral-initial);
+}
+&[data-v-66485734]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+.kds-accordion-headline[data-v-66485734] {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-title-small-strong);
+  white-space: nowrap;
+}
+.kds-accordion-headline-container[data-v-66485734] {
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  min-width: 0;
+}
+.kds-accordion-content[data-v-66485734] {
+  padding: var(--kds-spacing-container-1x);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+
+.kds-card-header {
+&[data-v-9be14436] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1x);
+
+  /* push actions to the right if its the only element */
+}
+.actions[data-v-9be14436],
+  .accessory[data-v-9be14436] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-37x);
+}
+.actions[data-v-9be14436] {
+    margin-left: auto;
+}
+& h6[data-v-9be14436] {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-title-large-strong);
+    white-space: nowrap;
+}
+}
+
 .kds-base-card {
-&[data-v-37984e9f] {
+&[data-v-a1aff6d6] {
   --kds-base-card-border-radius: var(--kds-border-radius-container-0-50x);
   --kds-base-card-primary-action-z-index: 1;
   --kds-base-card-secondary-action-z-index: 2;
@@ -2981,11 +3072,11 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
     border-color 0.2s,
     box-shadow 0.2s;
 }
-&[data-v-37984e9f] [data-kds-card-primary-action] {
+&[data-v-a1aff6d6] [data-kds-card-primary-action] {
     z-index: var(--kds-base-card-primary-action-z-index);
     border-radius: var(--kds-base-card-border-radius);
 }
-&[data-v-37984e9f] [data-kds-card-secondary-action] {
+&[data-v-a1aff6d6] [data-kds-card-secondary-action] {
     position: relative;
     z-index: var(--kds-base-card-secondary-action-z-index);
 }
@@ -2993,14 +3084,14 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
 
 /* Variant: Filled, Value: False */
 .variant-filled {
-&[data-v-37984e9f] {
+&[data-v-a1aff6d6] {
   background: var(--kds-color-surface-default);
   border: var(--kds-border-base-subtle);
 }
-&:hover.clickable[data-v-37984e9f] {
+&:hover.clickable[data-v-a1aff6d6] {
     box-shadow: var(--kds-elevation-level-3);
 }
-&.clickable[data-v-37984e9f]:has([data-kds-card-primary-action]:active) {
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-neutral-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -3008,14 +3099,14 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
 
 /* Variant: Outlined, Value: False */
 .variant-outlined {
-&[data-v-37984e9f] {
+&[data-v-a1aff6d6] {
   background: var(--kds-color-background-neutral-initial);
   border: var(--kds-border-base-muted);
 }
-&:hover.clickable[data-v-37984e9f] {
+&:hover.clickable[data-v-a1aff6d6] {
     box-shadow: var(--kds-elevation-level-3);
 }
-&.clickable[data-v-37984e9f]:has([data-kds-card-primary-action]:active) {
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-neutral-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -3023,15 +3114,15 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
 
 /* Variant: Transparent, Value: False */
 .variant-transparent {
-&[data-v-37984e9f] {
+&[data-v-a1aff6d6] {
   background: var(--kds-color-background-neutral-initial);
   border: var(--kds-border-action-transparent);
 }
-&:hover.clickable[data-v-37984e9f] {
+&:hover.clickable[data-v-a1aff6d6] {
     background: var(--kds-color-background-neutral-hover);
     box-shadow: var(--kds-elevation-level-3);
 }
-&.clickable[data-v-37984e9f]:has([data-kds-card-primary-action]:active) {
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-neutral-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -3039,14 +3130,14 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
 
 /* Variant: Filled, Value: True */
 .variant-filled.selected {
-&[data-v-37984e9f] {
+&[data-v-a1aff6d6] {
   background: var(--kds-color-background-selected-initial);
   border: var(--kds-border-action-selected);
 }
-&:hover.clickable[data-v-37984e9f] {
+&:hover.clickable[data-v-a1aff6d6] {
     box-shadow: var(--kds-elevation-level-3);
 }
-&.clickable[data-v-37984e9f]:has([data-kds-card-primary-action]:active) {
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-selected-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -3054,14 +3145,14 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
 
 /* Variant: Outlined, Value: True */
 .variant-outlined.selected {
-&[data-v-37984e9f] {
+&[data-v-a1aff6d6] {
   background: var(--kds-color-background-selected-initial);
   border: var(--kds-border-action-selected);
 }
-&:hover.clickable[data-v-37984e9f] {
+&:hover.clickable[data-v-a1aff6d6] {
     box-shadow: var(--kds-elevation-level-3);
 }
-&.clickable[data-v-37984e9f]:has([data-kds-card-primary-action]:active) {
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-selected-active);
     box-shadow: var(--kds-elevation-level-1);
 }
@@ -3069,26 +3160,26 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
 
 /* Variant: Transparent, Value: True */
 .variant-transparent.selected {
-&[data-v-37984e9f] {
+&[data-v-a1aff6d6] {
   background: var(--kds-color-background-selected-initial);
   border: var(--kds-border-action-selected);
 }
-&:hover.clickable[data-v-37984e9f] {
+&:hover.clickable[data-v-a1aff6d6] {
     background: var(--kds-color-background-selected-initial);
     box-shadow: var(--kds-elevation-level-3);
 }
-&.clickable[data-v-37984e9f]:has([data-kds-card-primary-action]:active) {
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
     background: var(--kds-color-background-selected-active);
     box-shadow: var(--kds-elevation-level-1);
 }
 }
 
 .kds-clickable-card {
-&[data-v-671dfb5a] {
+&[data-v-04004cbf] {
   position: relative;
 }
 & [data-kds-card-primary-action] {
-&[data-v-671dfb5a] {
+&[data-v-04004cbf] {
     position: absolute;
     inset: 0;
     padding: 0;
@@ -3101,45 +3192,45 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
     background: none;
     border: none;
 }
-&[data-v-671dfb5a]:disabled {
+&[data-v-04004cbf]:disabled {
       cursor: default;
 }
-&[data-v-671dfb5a]:focus {
+&[data-v-04004cbf]:focus {
       outline: none;
 }
 }
-&[data-v-671dfb5a]:has([data-kds-card-primary-action]:focus-visible) {
+&[data-v-04004cbf]:has([data-kds-card-primary-action]:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
 
 .kds-link-card {
-&[data-v-a5b105b2] {
+&[data-v-1696fd9e] {
   position: relative;
 }
 & [data-kds-card-primary-action] {
-&[data-v-a5b105b2] {
+&[data-v-1696fd9e] {
     position: absolute;
     inset: 0;
     text-decoration: none;
 }
-&[data-v-a5b105b2]:focus {
+&[data-v-1696fd9e]:focus {
       outline: none;
 }
 }
-&[data-v-a5b105b2]:has([data-kds-card-primary-action]:focus-visible) {
+&[data-v-1696fd9e]:has([data-kds-card-primary-action]:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
 
 .kds-selectable-card {
-&[data-v-80c51086] {
+&[data-v-af9b9bf6] {
   position: relative;
 }
 & [data-kds-card-primary-action] {
-&[data-v-80c51086] {
+&[data-v-af9b9bf6] {
     position: absolute;
     inset: 0;
     padding: 0;
@@ -3152,28 +3243,45 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
     background: none;
     border: none;
 }
-&[data-v-80c51086]:disabled {
+&[data-v-af9b9bf6]:disabled {
       cursor: default;
 }
-&[data-v-80c51086]:focus {
+&[data-v-af9b9bf6]:focus {
       outline: none;
 }
 }
-&[data-v-80c51086]:has([data-kds-card-primary-action]:focus-visible) {
+&[data-v-af9b9bf6]:has([data-kds-card-primary-action]:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
 
-.kds-panel-header {
-&[data-v-dd28904c] {
+.kds-panel {
+&[data-v-c55a379c] {
   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);
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background-color: var(--kds-color-surface-default);
+}
+.kds-panel-header[data-v-c55a379c] {
+    display: flex;
+    flex: 0 0 auto;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+    padding: var(--kds-spacing-container-0-5x)
+      var(--kds-spacing-container-0-75x)
+      calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs));
+    border-bottom: var(--kds-border-base-subtle);
+}
+.kds-panel-headline[data-v-c55a379c] {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    min-width: 0;
 }
-& h6[data-v-dd28904c] {
+.kds-panel-headline-text[data-v-c55a379c] {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
@@ -3182,8 +3290,41 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
     font: var(--kds-font-base-title-medium-strong);
     white-space: nowrap;
 }
-& .kds-close-button[data-v-dd28904c] {
+.kds-panel-header-trailing[data-v-c55a379c] {
+    display: flex;
+    flex: 0 0 auto;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+}
+.kds-panel-body {
+&[data-v-c55a379c] {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: var(--kds-spacing-container-0-75x);
+    overflow: auto;
+}
+&[data-v-c55a379c]: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-panel-footer[data-v-c55a379c] {
+    display: flex;
     flex: 0 0 auto;
+    gap: var(--kds-spacing-container-0-25x);
+    justify-content: space-between;
+    padding: calc(
+        var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
+      )
+      var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
+    border-top: var(--kds-border-base-subtle);
+}
+.kds-panel-footer-leading[data-v-c55a379c],
+  .kds-panel-footer-trailing[data-v-c55a379c] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
 }
 }
 
@@ -3477,15 +3618,6 @@ 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);
-}
-
 .kds-nav-item {
 &[data-v-d5db7ff7] {
   position: relative;
@@ -3622,30 +3754,6 @@ to {
 }
 }
 
-.kds-container-header {
-&[data-v-bbaa1f3b] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-37x);
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1x);
-}
-.actions[data-v-bbaa1f3b],
-  .accessory[data-v-bbaa1f3b] {
-    display: flex;
-    gap: var(--kds-spacing-container-0-37x);
-}
-& h6[data-v-bbaa1f3b] {
-    flex: 1 1 auto;
-    min-width: 0;
-    margin: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font: var(--kds-font-base-title-large);
-    white-space: nowrap;
-}
-}
-
 .modal-header {
 &[data-v-62740dc9] {
   display: flex;