@knime/kds-components 0.30.2 → 0.30.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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

package/dist/index.js

@@ -734,7 +734,7 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["__scopeId", "data-v-5fdfbce2"]]);
+const KdsProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["__scopeId", "data-v-884d689a"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -981,7 +981,7 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("span", {
         class: normalizeClass(["kds-live-status", __props.status, `size-${__props.size}`]),
         role: "img",
-        title: accessibleTitle.value,
+        title: !__props.label ? accessibleTitle.value : void 0,
         "aria-label": accessibleTitle.value
       }, [
         _cache[0] || (_cache[0] = createElementVNode("span", { class: "dot" }, null, -1)),
@@ -997,7 +997,7 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__scopeId", "data-v-01555495"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__scopeId", "data-v-f20c5c00"]]);
 
 const kdsLiveStatusStatus = {
   RED: "red",
@@ -2722,12 +2722,14 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v-9dc6d3f6"]]);
+const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v-ae4f1dab"]]);
 
 const kdsPopoverPlacement = {
   TOP_LEFT: "top-left",
+  TOP_CENTER: "top-center",
   TOP_RIGHT: "top-right",
   BOTTOM_LEFT: "bottom-left",
+  BOTTOM_CENTER: "bottom-center",
   BOTTOM_RIGHT: "bottom-right",
   CUSTOM: "custom"
 };
@@ -2814,7 +2816,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-3354d162"]]);
+const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-f41f0af7"]]);
 
 const KdsPopover$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
@@ -23154,8 +23156,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(KdsResizeContainer), {
         "number-of-handles": 2,
-        height: 320,
-        "min-height": 200,
+        height: unref(kdsDimensionComponentHeight12p5x),
+        "min-height": unref(kdsDimensionComponentHeight12p5x),
         "handle-gap": `${unref(kdsSpacingContainer0p25x) * 2 + unref(kdsDimensionComponentHeight1p5x)}px`
       }, {
         default: withCtx(({ contentStyle }) => [
@@ -23254,12 +23256,12 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           ], 4)
         ]),
         _: 1
-      }, 8, ["handle-gap"]);
+      }, 8, ["height", "min-height", "handle-gap"]);
     };
   }
 });
 
-const TwinListBody = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-11062d8e"]]);
+const TwinListBody = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-eb1bc043"]]);
 
 const kdsTwinListSearchMode = {
   MANUAL: "manual",