@knime/kds-components 0.27.0 → 0.28.1

package/dist/index.css

@@ -600,7 +600,7 @@ html.kds-legacy {
 }
 
 .button {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -614,143 +614,143 @@ html.kds-legacy {
 
   /* for LinkButton */
 }
-&[data-v-80e22f2e]:is(a) {
+&[data-v-190ac311]:is(a) {
     text-decoration: none;
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
     cursor: default;
 }
-&[data-v-80e22f2e]:focus-visible {
+&[data-v-190ac311]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &.filled {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
     color: var(--kds-color-text-and-icon-primary-inverted);
     background-color: var(--kds-color-background-primary-bold-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-disabled-inverted);
       background-color: var(--kds-color-background-disabled-primary);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 &.destructive {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-danger-inverted);
       background-color: var(--kds-color-background-danger-bold-initial);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
         color: var(--kds-color-text-and-icon-disabled-inverted);
         background-color: var(--kds-color-background-disabled-danger);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
           background-color: var(--kds-color-background-danger-bold-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
           background-color: var(--kds-color-background-danger-bold-active);
 }
 }
 }
 }
 &.outlined {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-default);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-disabled);
       border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-danger);
       border: var(--kds-border-action-error);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
         color: var(--kds-color-text-and-icon-disabled);
         border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.transparent {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
         color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.toggled {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
     color: var(--kds-color-text-and-icon-selected);
     background-color: var(--kds-color-background-selected-initial);
     border: var(--kds-border-action-selected);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
         background-color: var(--kds-color-background-selected-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
         background-color: var(--kds-color-background-selected-active);
 }
 }
 }
-& .label[data-v-80e22f2e] {
+& .label[data-v-190ac311] {
     max-width: 200px;
     padding: 0 var(--kds-spacing-container-0-12x);
     overflow: hidden;
@@ -758,7 +758,7 @@ html.kds-legacy {
     white-space: nowrap;
     text-rendering: geometricprecision;
 }
-&.xsmall[data-v-80e22f2e] {
+&.xsmall[data-v-190ac311] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-25x);
     padding: 0
@@ -770,7 +770,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-25x)
     );
 }
-&.small[data-v-80e22f2e] {
+&.small[data-v-190ac311] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-5x);
     padding: 0
@@ -782,7 +782,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-37x)
     );
 }
-&.medium[data-v-80e22f2e] {
+&.medium[data-v-190ac311] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0
@@ -795,7 +795,7 @@ html.kds-legacy {
     );
 }
 &.large {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0
@@ -807,11 +807,11 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-50x)
     );
 }
-& .label[data-v-80e22f2e] {
+& .label[data-v-190ac311] {
       padding: 0 var(--kds-spacing-container-0-25x);
 }
 }
-&.success[data-v-80e22f2e] {
+&.success[data-v-190ac311] {
     color: var(--kds-color-text-and-icon-success-inverted);
     background-color: var(--kds-color-background-success-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -820,7 +820,7 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.error[data-v-80e22f2e] {
+&.error[data-v-190ac311] {
     color: var(--kds-color-text-and-icon-danger-inverted);
     background-color: var(--kds-color-background-danger-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -829,11 +829,11 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.remove-border-radius-left[data-v-80e22f2e] {
+&.remove-border-radius-left[data-v-190ac311] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-&.remove-border-radius-right[data-v-80e22f2e] {
+&.remove-border-radius-right[data-v-190ac311] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -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;
 }
@@ -3030,8 +3025,37 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
   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;
@@ -3048,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);
 }
@@ -3060,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);
 }
@@ -3075,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);
 }
@@ -3090,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);
 }
@@ -3106,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);
 }
@@ -3121,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);
 }
@@ -3136,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;
@@ -3168,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;
@@ -3219,14 +3243,14 @@ 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);
 }
@@ -3730,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;