@knime/kds-components 0.30.1 → 0.30.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @knime/kds-components
 
+## 0.30.3
+
+### Patch Changes
+
+- c3d0507: KdsLiveStatus: Hide title when label is provided
+- d896ae8: KDS-889: Reduce default height of twinlist
+- dcd8cf9: KdsPopover: Add center alignments
+- c5776f1: KdsProgressBar - expose percentage CSS transition variable
+  - @knime/kds-styles@0.30.3
+
+## 0.30.2
+
+### Patch Changes
+
+- cfa40df: Kds 487 fix file explorer virtual scrolling
+  - @knime/kds-styles@0.30.2
+
 ## 0.30.1
 
 ### Patch Changes

package/dist/index.css

@@ -280,7 +280,7 @@
 }
 
 .kds-progress-bar {
-&[data-v-5fdfbce2] {
+&[data-v-884d689a] {
   --progress-bar-background-color: var(--kds-color-surface-subtle);
   --progress-bar-foreground-color: var(
     --kds-color-background-primary-bold-initial
@@ -298,7 +298,7 @@
 
   /* the following two rules need to stay separate, as otherwise it causes it not to be applied in Chrome correctly */
 }
-& .progress[data-v-5fdfbce2] {
+& .progress[data-v-884d689a] {
     display: block;
     width: 100%;
     height: var(--progress-bar-height);
@@ -311,44 +311,44 @@
     border: none;
     border-radius: var(--progress-bar-radius);
 }
-& .progress[data-v-5fdfbce2]::-webkit-progress-bar {
+& .progress[data-v-884d689a]::-webkit-progress-bar {
     background-color: var(--progress-bar-background-color);
 }
-& .progress[data-v-5fdfbce2]::-webkit-progress-value {
+& .progress[data-v-884d689a]::-webkit-progress-value {
     background-color: var(--progress-bar-foreground-color);
     border-radius: var(--progress-bar-radius);
-    transition: width 0.5s;
+    transition: width var(--progress-bar-transition-duration, 0.5s);
 }
-& .progress[data-v-5fdfbce2]::-moz-progress-bar {
+& .progress[data-v-884d689a]::-moz-progress-bar {
     background-color: var(--progress-bar-foreground-color);
 }
-& .progress[data-v-5fdfbce2]:indeterminate {
+& .progress[data-v-884d689a]:indeterminate {
     background-color: var(--progress-bar-background-color);
     background-image: none;
 }
-& .progress[data-v-5fdfbce2]:indeterminate::-webkit-progress-bar {
+& .progress[data-v-884d689a]:indeterminate::-webkit-progress-bar {
     background-color: transparent;
 }
-& .progress[data-v-5fdfbce2]:indeterminate::-moz-progress-bar {
+& .progress[data-v-884d689a]:indeterminate::-moz-progress-bar {
     background-color: transparent;
 }
-& .indeterminate-bar[data-v-5fdfbce2] {
+& .indeterminate-bar[data-v-884d689a] {
     position: absolute;
     inset-block: 0;
     width: 35%;
     pointer-events: none;
     background-color: var(--progress-bar-foreground-color);
     border-radius: var(--kds-border-radius-container-pill);
-    animation: move-indeterminate-5fdfbce2 1.5s linear infinite;
+    animation: move-indeterminate-884d689a 1.5s linear infinite;
 }
 }
-.kds-progress-bar-medium[data-v-5fdfbce2] {
+.kds-progress-bar-medium[data-v-884d689a] {
   --progress-bar-height: var(--kds-dimension-component-height-0-25x);
 }
-.kds-progress-bar-large[data-v-5fdfbce2] {
+.kds-progress-bar-large[data-v-884d689a] {
   --progress-bar-height: var(--kds-dimension-component-height-0-75x);
 }
-@keyframes move-indeterminate-5fdfbce2 {
+@keyframes move-indeterminate-884d689a {
 0% {
     transform: translateX(-120%);
 }
@@ -390,7 +390,7 @@
 }
 
 .kds-live-status {
-&[data-v-01555495] {
+&[data-v-f20c5c00] {
   --dot-color: var(--kds-color-state-disabled);
   --dot-border-color: var(--kds-color-state-disabled-border);
 
@@ -401,20 +401,20 @@
   max-width: 100%;
   line-height: 0;
 }
-&.red[data-v-01555495] {
+&.red[data-v-f20c5c00] {
     --dot-color: var(--kds-color-state-error);
     --dot-border-color: var(--kds-color-state-error-border);
 }
-&.orange[data-v-01555495] {
+&.orange[data-v-f20c5c00] {
     --dot-color: var(--kds-color-state-warning);
     --dot-border-color: var(--kds-color-state-warning-border);
 }
-&.green[data-v-01555495] {
+&.green[data-v-f20c5c00] {
     --dot-color: var(--kds-color-state-success);
     --dot-border-color: var(--kds-color-state-success-border);
 }
 .dot {
-&[data-v-01555495] {
+&[data-v-f20c5c00] {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -422,7 +422,7 @@
     width: var(--kds-dimension-icon-1-25x);
     height: var(--kds-dimension-icon-1-25x);
 }
-&[data-v-01555495]::after {
+&[data-v-f20c5c00]::after {
       display: block;
       width: 50%;
       height: 50%;
@@ -434,7 +434,7 @@
       border-radius: var(--kds-border-radius-container-pill);
 }
 }
-.label[data-v-01555495] {
+.label[data-v-f20c5c00] {
     overflow: hidden;
     text-overflow: ellipsis;
     font: var(--kds-font-base-subtext-medium);
@@ -442,26 +442,26 @@
     white-space: nowrap;
 }
 &.size-medium {
-.dot[data-v-01555495] {
+.dot[data-v-f20c5c00] {
       width: var(--kds-dimension-icon-1x);
       height: var(--kds-dimension-icon-1x);
 }
-&[data-v-01555495]::after {
+&[data-v-f20c5c00]::after {
       border-width: var(--kds-border-width-icon-stroke-m);
 }
-.label[data-v-01555495] {
+.label[data-v-f20c5c00] {
       font: var(--kds-font-base-subtext-small);
 }
 }
 &.size-small {
-.dot[data-v-01555495] {
+.dot[data-v-f20c5c00] {
       width: var(--kds-dimension-icon-0-75x);
       height: var(--kds-dimension-icon-0-75x);
 }
-&[data-v-01555495]::after {
+&[data-v-f20c5c00]::after {
       border-width: var(--kds-border-width-icon-stroke-s);
 }
-.label[data-v-01555495] {
+.label[data-v-f20c5c00] {
       font: var(--kds-font-base-subtext-xsmall);
 }
 }
@@ -1192,7 +1192,7 @@ html.kds-legacy {
 }
 
 .kds-menu-container {
-&[data-v-9dc6d3f6] {
+&[data-v-ae4f1dab] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-10x);
@@ -1204,12 +1204,12 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-9dc6d3f6]:focus-visible {
+&[data-v-ae4f1dab]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
-.submenu-popover[data-v-9dc6d3f6] {
+.submenu-popover[data-v-ae4f1dab] {
   inset: anchor(top) auto auto anchor(right);
   padding: 0 var(--kds-spacing-container-0-25x);
   margin: 0;
@@ -1224,29 +1224,21 @@ html.kds-legacy {
   border-radius: 0;
   box-shadow: none;
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-right-dropdown {
   inset: anchor(top) auto auto anchor(right);
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-left-dropdown {
   inset: anchor(top) anchor(left) auto auto;
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-right-dropup {
   inset: auto auto anchor(bottom) anchor(right);
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-left-dropup {
   inset: auto anchor(left) anchor(bottom) auto;
 }
 
 .kds-popover {
-&[data-v-3354d162] {
+&[data-v-f41f0af7] {
   padding: 0;
   margin: 0;
   overflow: visible;
@@ -1257,16 +1249,6 @@ html.kds-legacy {
   border-radius: 0;
   box-shadow: none;
 
-  /* noinspection CssInvalidFunction */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
-  /* noinspection CssInvalidFunction,CssInvalidAtRule */
-
   /*
    * For custom placement the popover is positioned statically via inline
    * left/top styles. Explicitly clear the UA default `inset: 0` so the
@@ -1274,11 +1256,11 @@ html.kds-legacy {
    * light-dismiss / click-outside behavior).
    */
 }
-&.full-width[data-v-3354d162] {
+&.full-width[data-v-f41f0af7] {
     min-inline-size: anchor-size(width);
     max-inline-size: anchor-size(width);
 }
-&.floating.top-right[data-v-3354d162] {
+&.floating.top-right[data-v-f41f0af7] {
     inset: auto anchor(right) anchor(top) auto;
     margin: var(--kds-spacing-container-0-25x) 0
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
@@ -1286,7 +1268,14 @@ html.kds-legacy {
       --kds-popover-try-top-left, --kds-popover-try-bottom-right,
       --kds-popover-try-bottom-left, --kds-popover-try-top-right;
 }
-&.floating.top-left[data-v-3354d162] {
+&.floating.top-center[data-v-f41f0af7] {
+    inset: auto 0 anchor(top);
+    justify-self: anchor-center;
+    margin: var(--kds-spacing-container-0-25x);
+    position-try-fallbacks:
+      --kds-popover-try-bottom-center, --kds-popover-try-top-center;
+}
+&.floating.top-left[data-v-f41f0af7] {
     inset: auto auto anchor(top) anchor(left);
     margin: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
@@ -1294,7 +1283,7 @@ html.kds-legacy {
       --kds-popover-try-top-right, --kds-popover-try-bottom-left,
       --kds-popover-try-bottom-right, --kds-popover-try-top-left;
 }
-&.floating.bottom-right[data-v-3354d162] {
+&.floating.bottom-right[data-v-f41f0af7] {
     inset: anchor(bottom) anchor(right) auto auto;
     margin: var(--kds-spacing-container-0-25x) 0
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
@@ -1302,7 +1291,14 @@ html.kds-legacy {
       --kds-popover-try-bottom-left, --kds-popover-try-top-right,
       --kds-popover-try-top-left, --kds-popover-try-bottom-right;
 }
-&.floating.bottom-left[data-v-3354d162] {
+&.floating.bottom-center[data-v-f41f0af7] {
+    inset: anchor(bottom) 0 auto;
+    justify-self: anchor-center;
+    margin: var(--kds-spacing-container-0-25x);
+    position-try-fallbacks:
+      --kds-popover-try-top-center, --kds-popover-try-bottom-center;
+}
+&.floating.bottom-left[data-v-f41f0af7] {
     inset: anchor(bottom) auto auto anchor(left);
     margin: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
@@ -1310,41 +1306,43 @@ html.kds-legacy {
       --kds-popover-try-bottom-right, --kds-popover-try-top-left,
       --kds-popover-try-top-right, --kds-popover-try-bottom-left;
 }
-&.floating.custom[data-v-3354d162] {
+&.floating.custom[data-v-f41f0af7] {
     position: fixed;
     inset: auto;
     margin: 0;
 }
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-top-right {
   inset: auto anchor(right) anchor(top) auto;
   margin: var(--kds-spacing-container-0-25x) 0
     var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-top-center {
+  inset: auto auto anchor(top);
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) 0;
+}
 @position-try --kds-popover-try-top-left {
   inset: auto auto anchor(top) anchor(left);
   margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
     var(--kds-spacing-container-0-25x) 0;
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
 @position-try --kds-popover-try-bottom-right {
   inset: anchor(bottom) anchor(right) auto auto;
   margin: var(--kds-spacing-container-0-25x) 0
     var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
 }
-
-/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-bottom-center {
+  inset: anchor(bottom) auto auto;
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) 0;
+}
 @position-try --kds-popover-try-bottom-left {
   inset: anchor(bottom) auto auto anchor(left);
   margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
     var(--kds-spacing-container-0-25x) 0;
 }
-.kds-popover-default-content[data-v-3354d162] {
+.kds-popover-default-content[data-v-f41f0af7] {
   padding: var(--kds-spacing-container-0-75x);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -1782,7 +1780,7 @@ html.kds-legacy {
   cursor: pointer;
 }
 
-.file-explorer[data-v-921486c1] {
+.file-explorer[data-v-da0e6dab] {
   display: flex;
   flex: 1 0 0%;
   flex-direction: column;
@@ -1791,10 +1789,10 @@ html.kds-legacy {
   /* needed so that the virtualization container can size the wrapper properly */
   min-height: 0;
 }
-.file-explorer-item[data-v-921486c1] {
-  height: var(--v6215695b);
+.file-explorer-item[data-v-da0e6dab] {
+  height: var(--v44ee6cb4);
 }
-thead[data-v-921486c1] {
+thead[data-v-da0e6dab] {
   /* Hide table head for better readability but keeping it for a11y reasons */
   position: absolute;
 
@@ -1805,7 +1803,7 @@ thead[data-v-921486c1] {
   overflow: hidden;
   white-space: nowrap; /* added line */
 }
-table[data-v-921486c1] {
+table[data-v-da0e6dab] {
   height: 100%;
   overflow: hidden auto;
   scrollbar-gutter: stable;
@@ -1816,31 +1814,31 @@ table[data-v-921486c1] {
 }
 table,
 tbody {
-&[data-v-921486c1] {
+&[data-v-da0e6dab] {
   width: 100%;
   border-spacing: 0;
   }
-&[data-v-921486c1]:not(:has(.empty)) {
+&[data-v-da0e6dab]:not(:has(.empty)) {
     display: block;
 }
 }
 table:focus {
-&[data-v-921486c1] {
+&[data-v-da0e6dab] {
   outline: none;
   }
-&.keyboard-focus[data-v-921486c1] {
+&.keyboard-focus[data-v-da0e6dab] {
     outline: 2px solid var(--kds-color-focus-outline);
     border-radius: var(--kds-border-radius-container-0-25x);
 }
 }
-.empty[data-v-921486c1] {
+.empty[data-v-da0e6dab] {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--kds-spacing-container-0-37x);
   margin: var(--kds-spacing-container-4x) 0;
 }
-.custom-preview[data-v-921486c1] {
+.custom-preview[data-v-da0e6dab] {
   position: fixed;
   top: 0;
   left: 0;
@@ -3078,7 +3076,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   pointer-events: none;
 }
 
-.kds-twin-list-body[data-v-11062d8e] {
+.kds-twin-list-body[data-v-eb1bc043] {
   display: grid;
   grid-template-columns:
     minmax(0, 1fr) var(--kds-dimension-component-width-1-5x)
@@ -3086,31 +3084,31 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   gap: var(--kds-spacing-container-0-25x);
 }
 .kds-list-column {
-&[data-v-11062d8e] {
+&[data-v-eb1bc043] {
   display: flex;
   flex-direction: column;
   min-block-size: 0;
   }
-& .kds-list-box[data-v-11062d8e] {
+& .kds-list-box[data-v-eb1bc043] {
     flex: 1;
     min-block-size: 0;
 }
 }
-.kds-list-header[data-v-11062d8e] {
+.kds-list-header[data-v-eb1bc043] {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: var(--kds-spacing-input-label-spacing-bottom);
 }
-.kds-list-label[data-v-11062d8e] {
+.kds-list-label[data-v-eb1bc043] {
   font: var(--kds-font-base-title-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-.kds-list-count[data-v-11062d8e] {
+.kds-list-count[data-v-eb1bc043] {
   font: var(--kds-font-base-title-xsmall);
   color: var(--kds-color-text-and-icon-muted);
 }
-.kds-button-column[data-v-11062d8e] {
+.kds-button-column[data-v-eb1bc043] {
   display: flex;
   flex-direction: column;
   padding-top: var(--kds-spacing-container-4x);