@knime/kds-components 0.26.2 → 0.27.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;
 }
@@ -2963,6 +2963,73 @@ 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-base-card {
 &[data-v-37984e9f] {
   --kds-base-card-border-radius: var(--kds-border-radius-container-0-50x);
@@ -3165,15 +3232,32 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
 }
 }
 
-.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 +3266,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 +3594,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;