@knime/kds-components 0.27.0 → 0.28.0

package/dist/index.css

@@ -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;