@knime/kds-components 0.28.2 → 0.28.4

package/dist/index.css

@@ -116,7 +116,7 @@
 }
 }
 .kds-icon {
-&[data-v-fb124eb6] {
+&[data-v-bff4f419] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -131,7 +131,7 @@
   stroke-width: var(--icon-stroke-width);
   shape-rendering: geometricPrecision;
 }
-&.xsmall[data-v-fb124eb6] {
+&.xsmall[data-v-bff4f419] {
     --icon-width: var(--kds-dimension-icon-0-56x);
     --icon-height: var(--kds-dimension-icon-0-56x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
@@ -140,7 +140,7 @@
       rendering issues which manifests in misaligned or 'jumping' svg content.
       Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
       CSS transform. Thus the position of the SVG elements stays intact. */
-&[data-v-fb124eb6] {
+&[data-v-bff4f419] {
         --scaling-factor: 0.75;
         --icon-width: var(--kds-dimension-icon-0-75x);
         --icon-height: var(--kds-dimension-icon-0-75x);
@@ -151,22 +151,22 @@
 }
 }
 }
-&.small[data-v-fb124eb6] {
+&.small[data-v-bff4f419] {
     --icon-width: var(--kds-dimension-icon-0-75x);
     --icon-height: var(--kds-dimension-icon-0-75x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 }
-&.large[data-v-fb124eb6] {
+&.large[data-v-bff4f419] {
     --icon-width: var(--kds-dimension-icon-1-25x);
     --icon-height: var(--kds-dimension-icon-1-25x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
-.kds-icon.disabled[data-v-fb124eb6] {
+.kds-icon.disabled[data-v-bff4f419] {
   color: var(--kds-color-text-and-icon-disabled);
 }
 .kds-icon {
-&[data-v-3b8ebdbd] {
+&[data-v-38e9537f] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -181,7 +181,7 @@
   stroke-width: var(--icon-stroke-width);
   shape-rendering: geometricPrecision;
 }
-&.xsmall[data-v-3b8ebdbd] {
+&.xsmall[data-v-38e9537f] {
     --icon-width: var(--kds-dimension-icon-0-56x);
     --icon-height: var(--kds-dimension-icon-0-56x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
@@ -190,7 +190,7 @@
       rendering issues which manifests in misaligned or 'jumping' svg content.
       Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
       CSS transform. Thus the position of the SVG elements stays intact. */
-&[data-v-3b8ebdbd] {
+&[data-v-38e9537f] {
         --scaling-factor: 0.75;
         --icon-width: var(--kds-dimension-icon-0-75x);
         --icon-height: var(--kds-dimension-icon-0-75x);
@@ -201,19 +201,19 @@
 }
 }
 }
-&.small[data-v-3b8ebdbd] {
+&.small[data-v-38e9537f] {
     --icon-width: var(--kds-dimension-icon-0-75x);
     --icon-height: var(--kds-dimension-icon-0-75x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 }
-&.large[data-v-3b8ebdbd] {
+&.large[data-v-38e9537f] {
     --icon-width: var(--kds-dimension-icon-1-25x);
     --icon-height: var(--kds-dimension-icon-1-25x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
 .kds-data-type-icon-container {
-&[data-v-3b8ebdbd] {
+&[data-v-38e9537f] {
   --data-type-height: var(--kds-dimension-component-height-1x);
   --data-type-width: var(--kds-dimension-component-width-1x);
   --data-type-padding: var(--kds-spacing-container-0-12x);
@@ -231,23 +231,23 @@
 
   /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
 }
-&.disabled[data-v-3b8ebdbd] {
+&.disabled[data-v-38e9537f] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-&.small[data-v-3b8ebdbd] {
+&.small[data-v-38e9537f] {
     --data-type-height: var(--kds-dimension-icon-0-75x);
     --data-type-width: var(--kds-dimension-icon-0-75x);
     --data-type-padding: var(--kds-spacing-container-none);
 }
-&.large[data-v-3b8ebdbd] {
+&.large[data-v-38e9537f] {
     --data-type-height: var(--kds-dimension-component-height-1-25x);
     --data-type-width: var(--kds-dimension-component-width-1-25x);
 }
 & .kds-icon.kds-data-type-icon {
-&.small[data-v-3b8ebdbd] {
+&.small[data-v-38e9537f] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
 }
-&.medium[data-v-3b8ebdbd] {
+&.medium[data-v-38e9537f] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
@@ -537,27 +537,27 @@ to {
 }
 
 .donut-container {
-&[data-v-c5a5b387] {
+&[data-v-f5faf61c] {
   display: flex;
   gap: var(--kds-spacing-container-0-75x);
   align-items: center;
 }
 & .donut-chart {
-&[data-v-c5a5b387] {
+&[data-v-f5faf61c] {
     display: block;
     flex-shrink: 0;
 }
-& .background-circle[data-v-c5a5b387] {
+& .background-circle[data-v-f5faf61c] {
       stroke: var(--kds-color-background-static-chart-0);
 }
-& .primary-circle[data-v-c5a5b387] {
+& .primary-circle[data-v-f5faf61c] {
       stroke: var(--kds-color-background-static-chart-1);
 }
-& .secondary-circle[data-v-c5a5b387] {
+& .secondary-circle[data-v-f5faf61c] {
       stroke: var(--kds-color-background-static-chart-2);
 }
 & .value-wedge {
-&.animate[data-v-c5a5b387] {
+&.animate[data-v-f5faf61c] {
         transition:
           stroke-dashoffset 0.5s,
           stroke 0.5s;
@@ -565,20 +565,20 @@ to {
 }
 }
 & .donut-text {
-&[data-v-c5a5b387] {
+&[data-v-f5faf61c] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     overflow: hidden;
     color: var(--kds-color-text-and-icon-neutral);
 }
-& .title[data-v-c5a5b387] {
+& .title[data-v-f5faf61c] {
       overflow: hidden;
       text-overflow: ellipsis;
       font: var(--kds-font-base-title-medium-strong);
       white-space: nowrap;
 }
-& .sub-text[data-v-c5a5b387] {
+& .sub-text[data-v-f5faf61c] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -2958,21 +2958,19 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
 }
 }
 
-.kds-accordion[data-v-66485734] {
+.kds-accordion[data-v-0beea165] {
   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;
+.kds-accordion-item[data-v-0beea165] {
   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] {
+&[data-v-0beea165] {
   display: flex;
   gap: var(--kds-spacing-container-0-25x);
   align-items: center;
@@ -2984,27 +2982,33 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
   color: var(--kds-color-text-and-icon-neutral);
   text-align: left;
   cursor: pointer;
+  list-style: none;
   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-0beea165]::-webkit-details-marker {
+    display: none;
 }
-&[data-v-66485734]:active {
-    background: var(--kds-color-background-neutral-active);
+&[data-v-0beea165]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&:not([aria-disabled="true"]) {
+&[data-v-0beea165]:hover {
+      background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-0beea165]:active {
+      background: var(--kds-color-background-neutral-active);
 }
-&[data-v-66485734]:disabled {
+}
+&[aria-disabled="true"][data-v-0beea165] {
     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] {
+.kds-accordion-headline[data-v-0beea165] {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
@@ -3012,38 +3016,39 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
   font: var(--kds-font-base-title-small-strong);
   white-space: nowrap;
 }
-.kds-accordion-headline-container[data-v-66485734] {
+.kds-accordion-headline-container[data-v-0beea165] {
   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] {
+.kds-accordion-content[data-v-0beea165] {
   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] {
+&[data-v-09093cc0] {
   display: flex;
   gap: var(--kds-spacing-container-0-37x);
   align-items: center;
   justify-content: space-between;
+  min-height: var(--kds-dimension-component-height-2-75x);
   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] {
+.actions[data-v-09093cc0],
+  .accessory[data-v-09093cc0] {
     display: flex;
     gap: var(--kds-spacing-container-0-37x);
 }
-.actions[data-v-9be14436] {
+.actions[data-v-09093cc0] {
     margin-left: auto;
 }
-& h6[data-v-9be14436] {
+& h6[data-v-09093cc0] {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
@@ -3622,123 +3627,102 @@ to {
 }
 
 .kds-nav-item {
-&[data-v-d5db7ff7] {
+&[data-v-17711664] {
   position: relative;
-  display: flex;
-  flex: 1 1 auto;
-  gap: var(--kds-spacing-container-0-37x);
-  align-items: center;
   height: var(--kds-dimension-component-height-1-75x);
   min-height: var(--kds-dimension-component-height-1-5x);
-  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-75x);
   background: var(--kds-color-background-neutral-initial);
   border-radius: var(--kds-border-radius-container-0-31x);
 }
-&[data-v-d5db7ff7]:has(.kds-nav-button:focus-visible) {
+&[data-v-17711664]:has(.kds-nav-button:focus-visible) {
     outline: var(--kds-border-action-focused);
     outline-offset: calc(-1 * var(--kds-core-border-width-m));
 }
 & .kds-nav-button {
-&[data-v-d5db7ff7] {
+&[data-v-17711664] {
 
     display: flex;
-    flex: 1 1 auto;
     flex-direction: row;
     gap: var(--kds-spacing-container-0-37x);
-    min-width: 0;
-    padding: 0;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 var(--v29854424) 0 var(--kds-spacing-container-0-75x);
+    color: var(--kds-color-text-and-icon-neutral);
     text-decoration: none;
     cursor: pointer;
     user-select: none;
     background: transparent;
     border: none;
 }
-&[data-v-d5db7ff7]:focus-visible {
+&[data-v-17711664]:focus-visible {
       outline: none;
 }
-& .content {
-&[data-v-d5db7ff7] {
-      display: flex;
+& .label[data-v-17711664] {
       flex: 1 1 auto;
-      flex-direction: row;
-      gap: var(--kds-spacing-container-0-37x);
-      align-items: flex-start;
-      justify-content: center;
       min-width: 0;
-}
-& .label[data-v-d5db7ff7] {
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font: var(--kds-font-base-interactive-medium);
-        color: var(--kds-color-text-and-icon-neutral);
-        text-align: left;
-        white-space: nowrap;
-}
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font: var(--kds-font-base-interactive-medium);
+      text-align: left;
+      white-space: nowrap;
 }
 }
-& .trailing-items {
-&[data-v-d5db7ff7] {
+& .trailing-items[data-v-17711664] {
+    position: absolute;
+    top: 0;
+    right: var(--kds-spacing-container-0-75x);
     display: flex;
     flex-direction: row;
     gap: var(--kds-spacing-container-0-37x);
     align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--kds-color-text-and-icon-neutral);
 }
-& .trailing-icon[data-v-d5db7ff7] {
-      color: inherit;
-}
-}
-&[data-v-d5db7ff7]:hover:not(.disabled) {
+&[data-v-17711664]:hover:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-d5db7ff7]:has(.kds-nav-button:active):not(.disabled) {
+&[data-v-17711664]:has(.kds-nav-button:active):not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-d5db7ff7] {
+&[data-v-17711664] {
     background: var(--kds-color-background-selected-initial);
 }
-& .kds-nav-button .content {
-&[data-v-d5db7ff7] {
+& .kds-nav-button[data-v-17711664] {
       color: var(--kds-color-text-and-icon-selected);
 }
-& .label[data-v-d5db7ff7] {
-        color: var(--kds-color-text-and-icon-selected);
-}
-}
-& .trailing-items .trailing-icon[data-v-d5db7ff7] {
+& .trailing-items[data-v-17711664] {
       color: var(--kds-color-text-and-icon-selected);
 }
-& .indicator-selected[data-v-d5db7ff7] {
+&[data-v-17711664]::before {
       position: absolute;
       top: var(--kds-spacing-container-0-37x);
       left: 0;
       width: var(--kds-dimension-component-width-0-125x);
       height: var(--kds-dimension-component-height-1x);
+      content: "";
       background: var(--kds-color-background-selected-bold-initial);
       border-top-right-radius: var(--kds-border-radius-container-0-12x);
       border-bottom-right-radius: var(--kds-border-radius-container-0-12x);
 }
-&[data-v-d5db7ff7]:hover:not(.disabled) {
+&[data-v-17711664]:hover:not(.disabled) {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-d5db7ff7]:has(.kds-nav-button:active):not(.disabled) {
+&[data-v-17711664]:has(.kds-nav-button:active):not(.disabled) {
       background: var(--kds-color-background-selected-active);
 }
 }
 &.disabled {
-&[data-v-d5db7ff7] {
-    cursor: not-allowed;
-}
-& .kds-nav-button {
-&[data-v-d5db7ff7] {
-      cursor: not-allowed;
-}
-& .content .label[data-v-d5db7ff7] {
-        color: var(--kds-color-text-and-icon-disabled);
+&[data-v-17711664] {
+    cursor: default;
 }
+& .kds-nav-button[data-v-17711664] {
+      color: var(--kds-color-text-and-icon-disabled);
+      cursor: default;
 }
-& .trailing-items .trailing-icon[data-v-d5db7ff7] {
+& .trailing-items[data-v-17711664] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }