@knime/kds-components 0.31.3 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @knime/kds-components
 
+## 1.0.0
+
+### Minor Changes
+
+- a05b472: `KdsResponsiveButtonGroup`: accept five new entry types in addition to `KdsButton` — `KdsLinkButton`, `KdsSplitButton`, `KdsMenuButton`, `KdsProgressButton`, `KdsToggleButton`. Split/menu buttons collapse into the overflow menu as submenus; toggle button's `modelValue` state maps to a checkmark trailing icon to represent toggled state.
+
+  **Breaking**: the group's `buttonClick(id)` event is removed. Each entry now carries a top-level `handler: (entry, event) => void` (required where the underlying button has a primary click affordance; forbidden on link and menu-button entries). Existing call sites should move their click handling from the group-level event listener into per-entry handlers.
+
+  Style: Improve responsive behavior;
+  - First collapse buttons to icon-only (only applies to buttons with icons)
+  - If there is still not enough space, hide buttons behind a menu
+  - Possible to configure certain buttons that don't collapse or hide
+
+### Patch Changes
+
+- 8f7a331: KdsListItem: Fix vertical text alignment
+  - @knime/kds-styles@1.0.0
+
+## 0.31.4
+
+### Patch Changes
+
+- 53459fd: - Widen `KdsSearchResult` typings to match supported `KdsListContainer` options.
+  - Allow changing the leading icon of `KdsSearchInput`.
+  - Add an optional default slot for `KdsInlineMessage` body content.
+  - Add `clip` to `KdsPanel` body overflow options.
+  - Add `input` as a `KdsLoadingSkeleton` variant (in addition to `input-with-label`).
+  - Truncate headline of `KdsModal` to not break modals on very long headlines.
+  - @knime/kds-styles@0.31.4
+
 ## 0.31.3
 
 ### Patch Changes

package/dist/index.css

@@ -524,7 +524,7 @@ to {
 }
 
 .kds-inline-message {
-&[data-v-194a0dfd] {
+&[data-v-c54ea4b4] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-25x);
@@ -536,43 +536,43 @@ to {
   border-radius: var(--kds-border-radius-container-0-50x);
 }
 .header {
-&[data-v-194a0dfd] {
+&[data-v-c54ea4b4] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
 }
-.icon[data-v-194a0dfd] {
+.icon[data-v-c54ea4b4] {
       color: var(--icon-color);
 }
-.headline[data-v-194a0dfd] {
+.headline[data-v-c54ea4b4] {
       font: var(--kds-font-base-title-small-strong);
 }
 }
-.body[data-v-194a0dfd] {
+.body[data-v-c54ea4b4] {
     align-self: stretch;
     padding-left: var(--kds-spacing-container-1x);
     font: var(--kds-font-base-body-small);
     color: var(--kds-color-text-and-icon-muted);
 }
-&.info[data-v-194a0dfd] {
+&.info[data-v-c54ea4b4] {
     --icon-color: var(--kds-color-text-and-icon-info);
 
     background-color: var(--kds-color-background-static-info-muted);
     border: var(--kds-border-base-info);
 }
-&.success[data-v-194a0dfd] {
+&.success[data-v-c54ea4b4] {
     --icon-color: var(--kds-color-text-and-icon-success);
 
     background-color: var(--kds-color-background-static-success-muted);
     border: var(--kds-border-base-success);
 }
-&.error[data-v-194a0dfd] {
+&.error[data-v-c54ea4b4] {
     --icon-color: var(--kds-color-text-and-icon-danger);
 
     background-color: var(--kds-color-background-static-danger-muted);
     border: var(--kds-border-base-danger);
 }
-&.warning[data-v-194a0dfd] {
+&.warning[data-v-c54ea4b4] {
     --icon-color: var(--kds-color-text-and-icon-warning);
 
     background-color: var(--kds-color-background-static-warning-muted);
@@ -996,7 +996,7 @@ html.kds-legacy {
 }
 
 .kds-list-item {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -1013,36 +1013,36 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-31x);
 }
 &.small {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     gap: var(--kds-spacing-container-0-25x);
-    align-items: flex-start;
     padding: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-5x);
     font: var(--kds-font-base-interactive-small);
 }
-.accessory[data-v-a3d6c86f] {
+.accessory[data-v-a582a5cb] {
       display: flex;
       padding: var(--kds-spacing-container-0-12x) 0;
+      margin-bottom: auto;
 }
 }
 &.large {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     font: var(--kds-font-base-interactive-small-strong);
 }
-.accessory[data-v-a3d6c86f] {
+.accessory[data-v-a582a5cb] {
       display: flex;
       align-items: center;
 }
 }
 .content {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     min-width: 0;
 }
-.large &[data-v-a3d6c86f] {
+.large &[data-v-a582a5cb] {
       justify-content: center;
       min-height: calc(
         var(--kds-dimension-component-height-2-5x) - 2 *
@@ -1050,19 +1050,19 @@ html.kds-legacy {
       );
 }
 .label {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 }
-.prefix[data-v-a3d6c86f] {
+.prefix[data-v-a582a5cb] {
         flex-shrink: 0;
 }
-.special[data-v-a3d6c86f] {
+.special[data-v-a582a5cb] {
         font: var(--kds-font-base-interactive-small-italic);
 }
 }
-.subtext[data-v-a3d6c86f] {
+.subtext[data-v-a582a5cb] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -1073,7 +1073,7 @@ html.kds-legacy {
 }
 }
 .trailing-item {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     display: flex;
     flex-shrink: 0;
     gap: var(--kds-spacing-container-0-12x);
@@ -1081,69 +1081,69 @@ html.kds-legacy {
     align-self: center;
     justify-content: flex-end;
 }
-.shortcut[data-v-a3d6c86f] {
+.shortcut[data-v-a582a5cb] {
       flex-shrink: 0;
       font: var(--kds-font-base-interactive-xsmall-strong);
       color: var(--kds-color-text-and-icon-muted);
       text-align: right;
       white-space: nowrap;
 }
-.trailing-item-reserve-space[data-v-a3d6c86f] {
+.trailing-item-reserve-space[data-v-a582a5cb] {
       width: var(--kds-dimension-icon-0-75x);
 }
 }
-&[data-v-a3d6c86f]:hover:not(.disabled),
-  &.active[data-v-a3d6c86f]:not(.disabled) {
+&[data-v-a582a5cb]:hover:not(.disabled),
+  &.active[data-v-a582a5cb]:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-a3d6c86f]:active:not(.disabled) {
+&[data-v-a582a5cb]:active:not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
 }
-.subtext[data-v-a3d6c86f] {
+.subtext[data-v-a582a5cb] {
       color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-a3d6c86f]:hover,
-    &.active[data-v-a3d6c86f] {
+&[data-v-a582a5cb]:hover,
+    &.active[data-v-a582a5cb] {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-a3d6c86f]:active {
+&[data-v-a582a5cb]:active {
       background: var(--kds-color-background-selected-active);
 }
-&.disabled[data-v-a3d6c86f] {
+&.disabled[data-v-a582a5cb] {
       background: var(--kds-color-background-selected-initial);
 }
 }
 &.missing {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     color: var(--kds-color-text-and-icon-danger);
     background: var(--kds-color-background-danger-initial);
 }
-.subtext[data-v-a3d6c86f] {
+.subtext[data-v-a582a5cb] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&[data-v-a3d6c86f]:hover,
-    &.active[data-v-a3d6c86f] {
+&[data-v-a582a5cb]:hover,
+    &.active[data-v-a582a5cb] {
       background: var(--kds-color-background-danger-hover);
 }
-&[data-v-a3d6c86f]:active {
+&[data-v-a582a5cb]:active {
       background: var(--kds-color-background-danger-active);
 }
-&.disabled[data-v-a3d6c86f] {
+&.disabled[data-v-a582a5cb] {
       background: var(--kds-color-background-danger-initial);
 }
 }
 &.disabled {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.shortcut[data-v-a3d6c86f],
-    .subtext[data-v-a3d6c86f] {
+.shortcut[data-v-a582a5cb],
+    .subtext[data-v-a582a5cb] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
@@ -2796,7 +2796,7 @@ table:focus {
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-8930f00a] {
+.kds-search-results-container[data-v-f7236e9c] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
@@ -3733,7 +3733,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .kds-panel {
-&[data-v-d3124a50] {
+&[data-v-64966fb2] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -3741,7 +3741,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
   min-height: 0;
   background-color: var(--kds-color-surface-default);
 }
-.kds-panel-header[data-v-d3124a50] {
+.kds-panel-header[data-v-64966fb2] {
     display: flex;
     flex: 0 0 auto;
     gap: var(--kds-spacing-container-0-25x);
@@ -3751,13 +3751,13 @@ textarea[data-v-36211819]::-webkit-scrollbar {
       calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs));
     border-bottom: var(--kds-border-base-subtle);
 }
-.kds-panel-headline[data-v-d3124a50] {
+.kds-panel-headline[data-v-64966fb2] {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
     min-width: 0;
 }
-.kds-panel-headline-text[data-v-d3124a50] {
+.kds-panel-headline-text[data-v-64966fb2] {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
@@ -3766,7 +3766,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
     font: var(--kds-font-base-title-medium-strong);
     white-space: nowrap;
 }
-.kds-panel-header-trailing[data-v-d3124a50] {
+.kds-panel-header-trailing[data-v-64966fb2] {
     display: flex;
     flex: 0 0 auto;
     gap: var(--kds-spacing-container-0-25x);
@@ -3774,21 +3774,21 @@ textarea[data-v-36211819]::-webkit-scrollbar {
     margin-left: auto;
 }
 .kds-panel-body {
-&[data-v-d3124a50] {
+&[data-v-64966fb2] {
     flex: 1 1 auto;
     min-height: 0;
-    overflow: var(--v2ddcad1c);
+    overflow: var(--d76547d6);
 }
-&[data-variant="padded"][data-v-d3124a50] {
+&[data-variant="padded"][data-v-64966fb2] {
       padding: var(--kds-spacing-container-0-75x);
 }
-&[tabindex="0"][data-v-d3124a50]:focus-visible {
+&[tabindex="0"][data-v-64966fb2]:focus-visible {
       outline: var(--kds-border-action-focused);
       outline-offset: var(--kds-spacing-offset-focus);
       border-radius: var(--kds-border-radius-container-0-31x);
 }
 }
-.kds-panel-footer[data-v-d3124a50] {
+.kds-panel-footer[data-v-64966fb2] {
     display: flex;
     flex: 0 0 auto;
     gap: var(--kds-spacing-container-0-25x);
@@ -3799,8 +3799,8 @@ textarea[data-v-36211819]::-webkit-scrollbar {
       var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
     border-top: var(--kds-border-base-subtle);
 }
-.kds-panel-footer-leading[data-v-d3124a50],
-  .kds-panel-footer-trailing[data-v-d3124a50] {
+.kds-panel-footer-leading[data-v-64966fb2],
+  .kds-panel-footer-trailing[data-v-64966fb2] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
@@ -3927,7 +3927,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 
-@keyframes knight-rider-86829b28 {
+@keyframes knight-rider-b7565402 {
 from {
     background-position-x: 100%;
 }
@@ -3936,7 +3936,7 @@ to {
 }
 }
 .kds-loading-skeleton-item {
-&[data-v-86829b28] {
+&[data-v-b7565402] {
   background-color: var(--kds-color-border-subtle);
   background-image: linear-gradient(
     90deg,
@@ -3950,98 +3950,98 @@ to {
   );
   background-repeat: no-repeat;
   background-size: 200% 100%;
-  animation: knight-rider-86829b28 2s linear 200ms infinite;
+  animation: knight-rider-b7565402 2s linear 200ms infinite;
 }
-&.text[data-v-86829b28] {
+&.text[data-v-b7565402] {
     height: var(--kds-dimension-component-height-0-75x);
     border-radius: var(--kds-border-radius-container-pill);
 }
-&.icon-large[data-v-86829b28],
-  &.icon-medium[data-v-86829b28],
-  &.icon-small[data-v-86829b28] {
+&.icon-large[data-v-b7565402],
+  &.icon-medium[data-v-b7565402],
+  &.icon-small[data-v-b7565402] {
     border-radius: var(--kds-border-radius-container-pill);
 }
-&.icon-large[data-v-86829b28] {
+&.icon-large[data-v-b7565402] {
     width: var(--kds-dimension-component-width-1-25x);
     height: var(--kds-dimension-component-height-1-25x);
 }
-&.icon-medium[data-v-86829b28] {
+&.icon-medium[data-v-b7565402] {
     width: var(--kds-dimension-component-width-1x);
     height: var(--kds-dimension-component-height-1x);
 }
-&.icon-small[data-v-86829b28] {
+&.icon-small[data-v-b7565402] {
     width: var(--kds-dimension-component-width-0-75x);
     height: var(--kds-dimension-component-height-0-75x);
 }
-&.button-large[data-v-86829b28] {
+&.button-large[data-v-b7565402] {
     width: var(--kds-dimension-component-width-4x);
     height: var(--kds-dimension-component-height-2-25x);
     border-radius: var(--kds-border-radius-container-0-50x);
 }
-&.button-medium[data-v-86829b28] {
+&.button-medium[data-v-b7565402] {
     width: var(--kds-dimension-component-width-4x);
     height: var(--kds-dimension-component-height-1-75x);
     border-radius: var(--kds-border-radius-container-0-37x);
 }
-&.button-small[data-v-86829b28] {
+&.button-small[data-v-b7565402] {
     width: var(--kds-dimension-component-width-4x);
     height: var(--kds-dimension-component-height-1-5x);
     border-radius: var(--kds-border-radius-container-0-37x);
 }
-&.button-xsmall[data-v-86829b28] {
+&.button-xsmall[data-v-b7565402] {
     width: var(--kds-dimension-component-width-4x);
     height: var(--kds-dimension-component-height-1-25x);
     border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.input-with-label[data-v-86829b28] {
+&.input[data-v-b7565402] {
     height: var(--kds-dimension-component-height-1-75x);
     border-radius: var(--kds-border-radius-container-0-37x);
 }
-&.label[data-v-86829b28] {
+&.label[data-v-b7565402] {
     width: 35%;
     height: var(--kds-dimension-component-height-0-75x);
     border-radius: var(--kds-border-radius-container-0-50x);
 }
-&.card[data-v-86829b28] {
+&.card[data-v-b7565402] {
     height: 100%;
     min-height: var(--kds-dimension-component-height-12x);
     border-radius: var(--kds-border-radius-container-0-37x);
 }
 }
 
-.kds-loading-skeleton[data-v-e6597718] {
+.kds-loading-skeleton[data-v-326c25f0] {
   display: flex;
   flex-direction: column;
-  gap: var(--v59c08829);
+  gap: var(--v18b57ee8);
 }
 .kds-loading-skeleton-headline-with-paragraph {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
   display: grid;
   gap: var(--kds-spacing-container-1-25x);
   }
-& .headline[data-v-e6597718] {
+& .headline[data-v-326c25f0] {
     width: 50%;
     height: var(--kds-dimension-component-height-1x);
 }
 & .kds-loading-skeleton-paragraph-lines {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
     display: grid;
     gap: var(--kds-spacing-container-0-75x);
     }
-&[data-v-e6597718] > *:nth-child(2) {
+&[data-v-326c25f0] > *:nth-child(2) {
       width: 75%;
 }
-&[data-v-e6597718] > *:nth-child(3) {
+&[data-v-326c25f0] > *:nth-child(3) {
       width: 50%;
 }
 }
 }
-.kds-loading-skeleton-input-with-label[data-v-e6597718] {
+.kds-loading-skeleton-input-with-label[data-v-326c25f0] {
   display: grid;
   gap: var(--kds-spacing-container-0-75x);
 }
 .kds-loading-skeleton-list-item {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -4049,7 +4049,7 @@ to {
   min-width: var(--kds-dimension-component-width-12x);
   padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
   }
-& .kds-loading-skeleton-list-item-text[data-v-e6597718] {
+& .kds-loading-skeleton-list-item-text[data-v-326c25f0] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
@@ -4057,20 +4057,20 @@ to {
     min-width: 0;
 }
 &.kds-loading-skeleton-list-item-large {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
     padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
     }
 & .kds-loading-skeleton-list-item-text {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
       justify-content: center;
       }
-& .text[data-v-e6597718] {
+& .text[data-v-326c25f0] {
         height: var(--kds-dimension-component-height-0-88x);
 }
 }
 }
 &.kds-loading-skeleton-list-item-small {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
     gap: var(--kds-spacing-container-0-5x);
     align-items: start;
     padding: calc(
@@ -4078,19 +4078,19 @@ to {
       )
       var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-25x);
     }
-& .kds-loading-skeleton-list-item-text[data-v-e6597718] {
+& .kds-loading-skeleton-list-item-text[data-v-326c25f0] {
       justify-content: flex-start;
 }
 }
 &.kds-loading-skeleton-list-item-large-with-subtext {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
     align-items: center;
     }
 & .kds-loading-skeleton-list-item-text {
-&[data-v-e6597718] {
+&[data-v-326c25f0] {
       justify-content: center;
       }
-& .text[data-v-e6597718] {
+& .text[data-v-326c25f0] {
         height: var(--kds-dimension-component-height-0-75x);
 }
 }
@@ -4347,7 +4347,7 @@ li {
 }
 
 .modal-header {
-&[data-v-62740dc9] {
+&[data-v-36cbff95] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -4356,12 +4356,16 @@ li {
   font: var(--kds-font-base-title-medium-strong);
   color: var(--kds-color-text-and-icon-neutral);
 }
-& .modal-header-headline[data-v-62740dc9] {
+& .modal-header-headline[data-v-36cbff95] {
     flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 }
 .modal-body {
-&[data-v-62740dc9] {
+&[data-v-36cbff95] {
   --modal-padding-left: var(--kds-spacing-container-1-5x);
   --modal-padding-right: var(--kds-spacing-container-1-5x);
   --modal-padding-top: var(--kds-spacing-container-0-5x);
@@ -4371,17 +4375,17 @@ li {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  overflow: var(--v81addf0a);
+  overflow: var(--d8a22254);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-&[data-variant="padded"][data-v-62740dc9] {
+&[data-variant="padded"][data-v-36cbff95] {
     gap: var(--modal-gap);
     padding: var(--modal-padding-top) var(--modal-padding-right)
       var(--modal-padding-bottom) var(--modal-padding-left);
 }
 }
-.modal-footer[data-v-62740dc9] {
+.modal-footer[data-v-36cbff95] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   justify-content: right;
@@ -4534,7 +4538,7 @@ body:has(dialog.modal[open]) {
     var(--kds-spacing-container-0-25x) 0;
 }
 
-.kds-button-group-measure[data-v-a945c295] {
+.kds-button-group-measure[data-v-ccdbc564] {
   position: absolute;
   display: flex;
   visibility: hidden;
@@ -4542,20 +4546,20 @@ body:has(dialog.modal[open]) {
   white-space: nowrap;
 }
 .kds-button-group {
-&[data-v-a945c295] {
+&[data-v-ccdbc564] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
   justify-content: flex-end;
   width: 100%;
   }
-&.left[data-v-a945c295] {
+&.left[data-v-ccdbc564] {
     justify-content: flex-start;
 }
-&.right[data-v-a945c295] {
+&.right[data-v-ccdbc564] {
     justify-content: flex-end;
 }
-&.middle[data-v-a945c295] {
+&.middle[data-v-ccdbc564] {
     justify-content: center;
 }
 }