@knime/kds-table 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @knime/kds-table
 
+## 0.4.1
+
+### Patch Changes
+
+- cc075dd: SLEEK-297: Remove surface background from table header; add surface background to pagination footer
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/index.css

@@ -534,7 +534,7 @@ to {
 }
 
 .kds-inline-message {
-&[data-v-194a0dfd] {
+&[data-v-c54ea4b4] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-25x);
@@ -546,43 +546,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);
@@ -2806,7 +2806,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);
@@ -3743,7 +3743,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 
 .kds-panel {
-&[data-v-d3124a50] {
+&[data-v-64966fb2] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -3751,7 +3751,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);
@@ -3761,13 +3761,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;
@@ -3776,7 +3776,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);
@@ -3784,21 +3784,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);
@@ -3809,8 +3809,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;
@@ -3937,7 +3937,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
 }
 }
 
-@keyframes knight-rider-86829b28 {
+@keyframes knight-rider-b7565402 {
 from {
     background-position-x: 100%;
 }
@@ -3946,7 +3946,7 @@ to {
 }
 }
 .kds-loading-skeleton-item {
-&[data-v-86829b28] {
+&[data-v-b7565402] {
   background-color: var(--kds-color-border-subtle);
   background-image: linear-gradient(
     90deg,
@@ -3960,98 +3960,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;
@@ -4059,7 +4059,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;
@@ -4067,20 +4067,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(
@@ -4088,19 +4088,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);
 }
 }
@@ -4357,7 +4357,7 @@ li {
 }
 
 .modal-header {
-&[data-v-62740dc9] {
+&[data-v-36cbff95] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
@@ -4366,12 +4366,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);
@@ -4381,17 +4385,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;
@@ -4513,6 +4517,36 @@ body:has(dialog.modal[open]) {
 .flush-left[data-v-41fc8d84] {
   margin-right: auto;
 }
+.kds-tooltip {
+  inset: auto auto anchor(top);
+  justify-self: anchor-center;
+  max-width: var(--kds-dimension-component-width-16x);
+  padding: var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-5x);
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) 0;
+  position-try-fallbacks:
+    --kds-tooltip-try-bottom-center, --kds-tooltip-try-top-center;
+  font: var(--kds-font-base-subtext-small);
+  color: var(--kds-color-tooltip-text-and-icon-neutral);
+  overflow-wrap: anywhere;
+  white-space: pre-line;
+  background-color: var(--kds-color-tooltip-background-default);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+
+@position-try --kds-tooltip-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-tooltip-try-bottom-center {
+  inset: anchor(bottom) auto auto;
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) 0;
+}
 
 .kds-button-group-measure[data-v-a945c295] {
   position: absolute;
@@ -4827,18 +4861,19 @@ tr {
 }
 
 .page-controls {
-&[data-v-2b97e3c7] {
+&[data-v-d15a282a] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-75x);
+  background: var(--kds-color-surface-default);
 }
-& .page-row-range[data-v-2b97e3c7],
-  & .page-size-menu[data-v-2b97e3c7] {
+& .page-row-range[data-v-d15a282a],
+  & .page-size-menu[data-v-d15a282a] {
     flex-grow: 1;
     flex-basis: 0;
 }
-.page-size-menu[data-v-2b97e3c7] {
+.page-size-menu[data-v-d15a282a] {
     display: flex;
     justify-content: flex-end;
 }
@@ -5048,13 +5083,12 @@ tr {
 }
 
 thead {
-&[data-v-e7068bdf] {
-  background-color: var(--kds-color-surface-default);
+&[data-v-8ffda8bd] {
   border-top: var(--kds-border-base-subtle);
   border-bottom: var(--kds-border-base-subtle);
 }
 & tr {
-&[data-v-e7068bdf] {
+&[data-v-8ffda8bd] {
     display: flex;
     height: 100%;
     transition:
@@ -5062,51 +5096,51 @@ thead {
       box-shadow 0.15s;
 }
 & th {
-&[data-v-e7068bdf] {
+&[data-v-8ffda8bd] {
       min-height: var(--kds-dimension-component-height-2-5x);
       max-height: var(--kds-dimension-component-height-5x);
       text-align: left;
       white-space: nowrap;
 }
-&.deletion-cell-spacer[data-v-e7068bdf] {
+&.deletion-cell-spacer[data-v-8ffda8bd] {
         width: var(--kds-dimension-component-width-2x);
 }
 &.select-cell {
-&[data-v-e7068bdf] {
+&[data-v-8ffda8bd] {
         display: flex;
         justify-content: center;
         width: var(--kds-dimension-component-width-2x);
         padding: var(--kds-spacing-container-0-75x);
 }
-& .select-checkbox[data-v-e7068bdf] {
+& .select-checkbox[data-v-8ffda8bd] {
           /* With this added padding the checkbox appears centered initially */
           padding: var(--kds-spacing-container-0-10x);
 }
 }
-&.new-column-head[data-v-e7068bdf] {
+&.new-column-head[data-v-8ffda8bd] {
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: var(--kds-spacing-container-0-5x);
 }
 }
-&[data-v-e7068bdf]:hover {
+&[data-v-8ffda8bd]:hover {
       outline: none;
 }
 }
-&.sub-menu-active tr[data-v-e7068bdf] {
+&.sub-menu-active tr[data-v-8ffda8bd] {
     padding-right: var(--kds-dimension-component-width-2x);
 }
 }
 .header-selection-overlay {
-&[data-v-e7068bdf] {
+&[data-v-8ffda8bd] {
   position: absolute;
   top: 0;
   height: 100%;
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.header-focused[data-v-e7068bdf] {
+&.header-focused[data-v-8ffda8bd] {
     border: var(--kds-border-action-focused);
 }
 }

package/dist/index.js

@@ -15245,7 +15245,7 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const LoadingSkeletonItem = /* @__PURE__ */ _export_sfc(_sfc_main$a$1, [["__scopeId", "data-v-86829b28"]]);
+const LoadingSkeletonItem = /* @__PURE__ */ _export_sfc(_sfc_main$a$1, [["__scopeId", "data-v-b7565402"]]);
 
 const _hoisted_1$8$1 = {
   key: 0,
@@ -15272,7 +15272,7 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v59c08829": _ctx.repeatGap
+      "v18b57ee8": _ctx.repeatGap
     }));
     return (_ctx, _cache) => {
       return __props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$8$1, [
@@ -15295,7 +15295,7 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
                 shape: "label",
                 class: "label"
               }),
-              createVNode(LoadingSkeletonItem, { shape: "input-with-label" })
+              createVNode(LoadingSkeletonItem, { shape: "input" })
             ])) : __props.variant?.startsWith("list-item-") ? (openBlock(), createElementBlock("div", {
               key: 2,
               class: normalizeClass([
@@ -15330,7 +15330,7 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLoadingSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$9$1, [["__scopeId", "data-v-e6597718"]]);
+const KdsLoadingSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$9$1, [["__scopeId", "data-v-326c25f0"]]);
 ref(false);
 ref(null);
 ref(createUnwrappedPromise());
@@ -16495,7 +16495,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const PageControls = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["render", _sfc_render$4], ["__scopeId", "data-v-2b97e3c7"]]);
+const PageControls = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["render", _sfc_render$4], ["__scopeId", "data-v-d15a282a"]]);
 
 const defaultValueFor = (is) => {
   if (is === "ControlMultiselect") {
@@ -17857,7 +17857,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 6)) : createCommentVNode("", true)
   ]);
 }
-const Header = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["render", _sfc_render$2], ["__scopeId", "data-v-e7068bdf"]]);
+const Header = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["render", _sfc_render$2], ["__scopeId", "data-v-8ffda8bd"]]);
 
 const _hoisted_1$3 = { class: "sticky-container" };
 const buttonRef = "button";