@knime/product-features 1.1.2 → 1.1.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @knime/product-features
 
+## 1.1.3
+
+### Patch Changes
+
+- bc85a76: Migrate native `title` attribute usages to the accessible `v-kds-tooltip` directive across product-feature components.
+- Updated dependencies [bc85a76]
+  - @knime/kds-components@1.2.0
+  - @knime/kds-styles@1.2.0
+
 ## 1.1.2
 
 ### Patch Changes

package/dist/dataTransfer.css

@@ -1,12 +1,12 @@
 
 .collapsible-panel {
-&[data-v-3fdfcc1c] {
+&[data-v-59d71b0b] {
   background: var(--kds-color-surface-default);
   border-radius: var(--kds-spacing-container-0-25x);
   box-shadow: var(--kds-elevation-level-3);
 }
 & .title-bar {
-&[data-v-3fdfcc1c] {
+&[data-v-59d71b0b] {
     display: flex;
     align-items: center;
     height: var(--kds-dimension-component-height-2-5x);
@@ -15,7 +15,7 @@
     font: var(--kds-font-base-title-small-strong);
     color: var(--kds-color-text-and-icon-neutral);
 }
-& .actions[data-v-3fdfcc1c] {
+& .actions[data-v-59d71b0b] {
       display: flex;
       gap: var(--kds-spacing-container-0-25x);
       align-items: center;
@@ -23,37 +23,37 @@
 }
 }
 &:not(.collapsed) {
-& .title-bar[data-v-3fdfcc1c] {
+& .title-bar[data-v-59d71b0b] {
       border-bottom: var(--kds-border-base-subtle);
 }
 }
 }
-.panel-content[data-v-3fdfcc1c] {
+.panel-content[data-v-59d71b0b] {
   overflow: hidden;
 }
-.expand-enter-active[data-v-3fdfcc1c],
-.expand-leave-active[data-v-3fdfcc1c] {
+.expand-enter-active[data-v-59d71b0b],
+.expand-leave-active[data-v-59d71b0b] {
   display: grid;
   overflow: hidden;
   transition:
     grid-template-rows 0.2s ease-in-out,
     opacity 0.2s ease-in-out;
 }
-.expand-enter-from[data-v-3fdfcc1c],
-.expand-leave-to[data-v-3fdfcc1c] {
+.expand-enter-from[data-v-59d71b0b],
+.expand-leave-to[data-v-59d71b0b] {
   grid-template-rows: 0fr;
   opacity: 0;
 }
-.expand-enter-to[data-v-3fdfcc1c],
-.expand-leave-from[data-v-3fdfcc1c] {
+.expand-enter-to[data-v-59d71b0b],
+.expand-leave-from[data-v-59d71b0b] {
   grid-template-rows: 1fr;
   opacity: 1;
 }
-.panel-content[data-v-3fdfcc1c] >  * {
+.panel-content[data-v-59d71b0b] >  * {
   min-height: 0;
 }
 
-.progress-wrapper[data-v-80e5d197] {
+.progress-wrapper[data-v-902ce8bb] {
   --base-padding: var(--kds-spacing-container-1x);
   --progress-bar-height: var(--kds-dimension-component-height-0-25x);
   --progress-bar-distance: var(--kds-spacing-container-0-25x);
@@ -65,7 +65,7 @@
   padding: var(--base-padding);
 }
 .progress-item {
-&[data-v-80e5d197] {
+&[data-v-902ce8bb] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -73,24 +73,24 @@
 
   /* add extra margin to prevent content jump when a progress bars appears/disappears */
   }
-&.padded[data-v-80e5d197] {
+&.padded[data-v-902ce8bb] {
     margin-bottom: calc(
       var(--progress-bar-height) + var(--progress-bar-distance)
     );
 }
 }
-.progress[data-v-80e5d197] {
+.progress[data-v-902ce8bb] {
   min-height: var(--progress-bar-height);
 }
 .item-info {
-&[data-v-80e5d197] {
+&[data-v-902ce8bb] {
   display: flex;
   flex-grow: 1;
   gap: var(--kds-spacing-container-0-25x);
   overflow: hidden;
   }
 & .item-name {
-&[data-v-80e5d197] {
+&[data-v-902ce8bb] {
     display: flex;
     flex-grow: 1;
     flex-direction: column;
@@ -99,19 +99,19 @@
     overflow: hidden;
     color: var(--kds-color-text-and-icon-neutral);
     }
-& .title[data-v-80e5d197] {
+& .title[data-v-902ce8bb] {
       max-width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       font: var(--kds-font-base-interactive-small);
       white-space: nowrap;
 }
-& .subtitle[data-v-80e5d197] {
+& .subtitle[data-v-902ce8bb] {
       font: var(--kds-font-base-subtext-small);
 }
 }
 }
-.item-action[data-v-80e5d197] {
+.item-action[data-v-902ce8bb] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-25x);
@@ -128,15 +128,15 @@
 }
 }
 
-.upload-panel[data-v-3c6568f7] {
+.upload-panel[data-v-15b3eb7d] {
   width: var(--kds-dimension-component-width-20x);
   max-width: var(--kds-dimension-component-width-20x);
 }
-.upload-panel-content[data-v-3c6568f7] {
+.upload-panel-content[data-v-15b3eb7d] {
   max-height: var(--kds-dimension-component-height-20x);
 }
 .skeleton-container {
-&[data-v-3c6568f7] {
+&[data-v-15b3eb7d] {
   display: grid;
   grid-template-columns: min-content 1fr;
   gap: var(--kds-spacing-container-0-25x);
@@ -145,17 +145,17 @@
   padding: 0 var(--kds-spacing-container-1x);
   border-top: var(--kds-border-base-subtle);
   }
-& .skeleton-text-content[data-v-3c6568f7] {
+& .skeleton-text-content[data-v-15b3eb7d] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-25x);
 }
 }
 
-.download-panel[data-v-cbf5d3c0] {
+.download-panel[data-v-53e10d80] {
   width: var(--kds-dimension-component-width-20x);
   max-width: var(--kds-dimension-component-width-20x);
 }
-.download-panel-content[data-v-cbf5d3c0] {
+.download-panel-content[data-v-53e10d80] {
   max-height: var(--kds-dimension-component-height-20x);
 }

package/dist/dataTransfer.js

@@ -1,5 +1,5 @@
 import { computed, defineComponent, useModel, useId, openBlock, createElementBlock, normalizeClass, createElementVNode, createTextVNode, toDisplayString, createVNode, unref, normalizeStyle, createBlock, createCommentVNode, Transition, withCtx, withDirectives, renderSlot, vShow, mergeModels, Fragment, renderList, watch, ref, reactive, readonly } from 'vue';
-import { KdsButton, KdsIcon, KdsBadge, KdsProgressBar, KdsLoadingSkeleton } from '@knime/kds-components';
+import { KdsButton, KdsIcon, vKdsTooltip, KdsBadge, KdsProgressBar, KdsLoadingSkeleton } from '@knime/kds-components';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-pcqpp-6-.js';
 import { f as formatFileSize } from './format-ra_vlnN7.js';
 import { rfcErrors } from './rfcErrors.js';
@@ -26,7 +26,7 @@ const _hoisted_3$1 = ["id"];
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "CollapsiblePanel",
   props: /* @__PURE__ */ mergeModels({
-    title: {},
+    headline: {},
     canBeDismissed: { type: Boolean, default: false }
   }, {
     "modelValue": { type: Boolean, ...{ default: true } },
@@ -46,7 +46,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["collapsible-panel", { collapsed: !modelValue.value }])
       }, [
         createElementVNode("div", _hoisted_1$4, [
-          createTextVNode(toDisplayString(__props.title) + " ", 1),
+          createTextVNode(toDisplayString(__props.headline) + " ", 1),
           createElementVNode("div", _hoisted_2$2, [
             createVNode(unref(KdsButton), {
               size: "small",
@@ -86,12 +86,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const CollapsiblePanel = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-3fdfcc1c"]]);
+const CollapsiblePanel = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-59d71b0b"]]);
 
 const _hoisted_1$3 = { class: "progress-wrapper" };
 const _hoisted_2$1 = { class: "item-info" };
 const _hoisted_3 = { class: "item-name" };
-const _hoisted_4 = ["title"];
+const _hoisted_4 = { class: "title" };
 const _hoisted_5 = {
   key: 0,
   class: "subtitle"
@@ -105,7 +105,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "ProgressItem",
   props: {
     id: {},
-    title: {},
+    headline: {},
     icon: {},
     actions: {},
     subtitle: {},
@@ -121,10 +121,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_2$1, [
             createVNode(unref(KdsIcon), { name: __props.icon }, null, 8, ["name"]),
             createElementVNode("div", _hoisted_3, [
-              createElementVNode("div", {
-                class: "title",
-                title: __props.title
-              }, toDisplayString(__props.title), 9, _hoisted_4),
+              withDirectives((openBlock(), createElementBlock("div", _hoisted_4, [
+                createTextVNode(toDisplayString(__props.headline), 1)
+              ])), [
+                [unref(vKdsTooltip), __props.headline, "truncated"]
+              ]),
               __props.subtitle ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)
             ])
           ]),
@@ -158,7 +159,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ProgressItem = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-80e5d197"]]);
+const ProgressItem = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-902ce8bb"]]);
 
 const _sfc_main$4 = {  };
 
@@ -342,13 +343,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ProgressItem), {
         id: __props.item.id,
-        title: __props.item.name,
+        headline: __props.item.name,
         subtitle: subtitle.value,
         icon: itemIcon.value,
         progress: hasProgress(__props.item) ? __props.item.progress : void 0,
         badge: badge.value,
         actions: actions.value
-      }, null, 8, ["id", "title", "subtitle", "icon", "progress", "badge", "actions"]);
+      }, null, 8, ["id", "headline", "subtitle", "icon", "progress", "badge", "actions"]);
     };
   }
 });
@@ -374,7 +375,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const uploadedItems = computed(
       () => __props.items.filter(({ status }) => status === "complete").length
     );
-    const title = computed(() => {
+    const headline = computed(() => {
       const suffix = `file${totalItems.value > 1 ? "s" : ""}`;
       return `Uploaded ${uploadedItems.value} of ${totalItems.value} ${suffix}`;
     });
@@ -387,7 +388,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(CollapsiblePanel), {
         modelValue: expanded.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => expanded.value = $event),
-        title: title.value,
+        headline: headline.value,
         class: "upload-panel",
         "can-be-dismissed": !hasSomeItemInProgress.value,
         onClose: _cache[1] || (_cache[1] = ($event) => emit("close"))
@@ -422,12 +423,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           ])
         ]),
         _: 1
-      }, 8, ["modelValue", "title", "can-be-dismissed"]);
+      }, 8, ["modelValue", "headline", "can-be-dismissed"]);
     };
   }
 });
 
-const UploadProgressPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-3c6568f7"]]);
+const UploadProgressPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-15b3eb7d"]]);
 
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "DownloadProgressPanelItem",
@@ -478,10 +479,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(ProgressItem), {
         id: __props.item.downloadId,
         icon: "file",
-        title: __props.item.name,
+        headline: __props.item.name,
         badge: badge.value,
         actions: actions.value
-      }, null, 8, ["id", "title", "badge", "actions"]);
+      }, null, 8, ["id", "headline", "badge", "actions"]);
     };
   }
 });
@@ -504,7 +505,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const totalDownloadedItems = computed(
       () => props.items.filter(({ status }) => status === "READY").length
     );
-    const title = computed(() => {
+    const headline = computed(() => {
       const suffix = `file${totalItems.value > 1 ? "s" : ""}`;
       return `Downloaded ${totalDownloadedItems.value} of ${totalItems.value} ${suffix}`;
     });
@@ -523,7 +524,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(CollapsiblePanel), {
         modelValue: expanded.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => expanded.value = $event),
-        title: title.value,
+        headline: headline.value,
         class: "download-panel",
         "can-be-dismissed": !hasItemsInProgress.value,
         onClose: _cache[1] || (_cache[1] = ($event) => emit("close"))
@@ -546,12 +547,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])
         ]),
         _: 1
-      }, 8, ["modelValue", "title", "can-be-dismissed"]);
+      }, 8, ["modelValue", "headline", "can-be-dismissed"]);
     };
   }
 });
 
-const DownloadProgressPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cbf5d3c0"]]);
+const DownloadProgressPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-53e10d80"]]);
 
 //#region src/predicate/isPlainObject.ts
 /**