@knime/kds-components 0.26.1 → 0.27.0

package/dist/index.css

@@ -1,6 +1,6 @@
 
 .kds-avatar {
-&[data-v-681eadc1] {
+&[data-v-9e1a5abe] {
   display: inline-block;
   flex-shrink: 0;
   aspect-ratio: 1 / 1;
@@ -10,71 +10,75 @@
   outline-offset: -1px;
   border-radius: var(--kds-border-radius-container-pill);
 }
-&.small[data-v-681eadc1] {
+&.small[data-v-9e1a5abe] {
     inline-size: var(--kds-dimension-icon-0-75x);
     block-size: var(--kds-dimension-icon-0-75x);
 }
-&.medium[data-v-681eadc1] {
+&.medium[data-v-9e1a5abe] {
     inline-size: var(--kds-dimension-icon-1x);
     block-size: var(--kds-dimension-icon-1x);
 }
-&.large[data-v-681eadc1] {
+&.large[data-v-9e1a5abe] {
     inline-size: var(--kds-dimension-component-width-1-25x);
     block-size: var(--kds-dimension-component-height-1-25x);
 }
-&.xlarge[data-v-681eadc1] {
+&.xlarge[data-v-9e1a5abe] {
     inline-size: var(--kds-dimension-component-width-1-5x);
     block-size: var(--kds-dimension-component-height-1-5x);
 }
-&[data-color="red"][data-v-681eadc1] {
+&[data-color="red"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-red);
     background: var(--kds-color-avatar-background-red);
 }
-&[data-color="orange"][data-v-681eadc1] {
+&[data-color="orange"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-orange);
     background: var(--kds-color-avatar-background-orange);
 }
-&[data-color="yellow"][data-v-681eadc1] {
+&[data-color="yellow"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-yellow);
     background: var(--kds-color-avatar-background-yellow);
 }
-&[data-color="green"][data-v-681eadc1] {
+&[data-color="green"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-green);
     background: var(--kds-color-avatar-background-green);
 }
-&[data-color="teal"][data-v-681eadc1] {
+&[data-color="teal"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-teal);
     background: var(--kds-color-avatar-background-teal);
 }
-&[data-color="blue"][data-v-681eadc1] {
+&[data-color="blue"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-blue);
     background: var(--kds-color-avatar-background-blue);
 }
-&[data-color="purple"][data-v-681eadc1] {
+&[data-color="purple"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-purple);
     background: var(--kds-color-avatar-background-purple);
 }
-&[data-color="aquamarine"][data-v-681eadc1] {
+&[data-color="aquamarine"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-aquamarine);
     background: var(--kds-color-avatar-background-aquamarine);
 }
-&[data-color="grassgreen"][data-v-681eadc1] {
+&[data-color="grassgreen"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-grassgreen);
     background: var(--kds-color-avatar-background-grassgreen);
 }
-&[data-color="brown"][data-v-681eadc1] {
+&[data-color="brown"][data-v-9e1a5abe] {
     color: var(--kds-color-avatar-text-and-icon-brown);
     background: var(--kds-color-avatar-background-brown);
 }
+&[data-color="empty"][data-v-9e1a5abe] {
+    color: transparent;
+    background-color: var(--kds-color-avatar-background-empty);
 }
-.kds-avatar-image[data-v-681eadc1] {
+}
+.kds-avatar-image[data-v-9e1a5abe] {
   display: block;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.kds-avatar-initials[data-v-681eadc1] {
+.kds-avatar-initials[data-v-9e1a5abe] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -85,7 +89,7 @@
   color: inherit;
   user-select: none;
 }
-.kds-avatar-initials > span[data-v-681eadc1] {
+.kds-avatar-initials > span[data-v-9e1a5abe] {
   font-size: calc(1em + calc(100cqi - 2em) / 2);
 }
 
@@ -1805,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);
@@ -1826,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;
 }
@@ -2959,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);
@@ -3161,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;
@@ -3178,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;
 }
 }
 
@@ -3473,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;