@knime/kds-components 0.28.3 → 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);
 }
 }
@@ -3627,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);
 }
 }