@knime/product-features 1.1.1 → 1.1.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- d9ec8c2: KDS-920: `KdsPromptInput`: reduced subtext font size and use small `KdsLink`
+- Updated dependencies [faeb10c]
+  - @knime/kds-components@1.1.3
+  - @knime/kds-styles@1.1.3
+
 ## 1.1.1
 
 ### Patch Changes

package/dist/ai.css

@@ -70,13 +70,13 @@
 }
 }
 
-.prompt-input[data-v-bd237a7d] {
+.prompt-input[data-v-e6b41a78] {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 .input-container {
-&[data-v-bd237a7d] {
+&[data-v-e6b41a78] {
   position: relative;
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
@@ -90,19 +90,19 @@
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
   }
-&[data-v-bd237a7d]:has(textarea:focus:not(:disabled)) {
+&[data-v-e6b41a78]:has(textarea:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-bd237a7d]:has(textarea:hover:not(:disabled, :focus)) {
+&[data-v-e6b41a78]:has(textarea:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.disabled[data-v-bd237a7d] {
+&.disabled[data-v-e6b41a78] {
     cursor: default;
     border: var(--kds-border-action-disabled);
 }
 }
-.text-input-wrapper[data-v-bd237a7d] {
+.text-input-wrapper[data-v-e6b41a78] {
   display: flex;
   flex: 1 0 0;
   align-items: center;
@@ -116,7 +116,7 @@
   padding-left: var(--kds-spacing-container-0-37x);
 }
 .text-input {
-&[data-v-bd237a7d] {
+&[data-v-e6b41a78] {
   width: 100%;
   min-width: 0;
 
@@ -132,42 +132,42 @@
   background: transparent;
   border: none;
   }
-&[data-v-bd237a7d]::placeholder {
+&[data-v-e6b41a78]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-bd237a7d] {
+&[data-v-e6b41a78] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
     }
-&[data-v-bd237a7d]::placeholder {
+&[data-v-e6b41a78]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
-&[data-v-bd237a7d]::-webkit-scrollbar {
+&[data-v-e6b41a78]::-webkit-scrollbar {
     display: none;
 }
 }
-.action[data-v-bd237a7d] {
+.action[data-v-e6b41a78] {
   display: flex;
   flex-shrink: 0;
   align-items: flex-end;
 }
-.progress-bar[data-v-bd237a7d] {
+.progress-bar[data-v-e6b41a78] {
   position: absolute;
   inset: -1px 0 auto;
 }
-.subtext[data-v-bd237a7d] {
+.subtext[data-v-e6b41a78] {
   display: flex;
   flex-wrap: wrap;
   gap: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
   align-items: center;
   padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
     0;
-  font: var(--kds-font-base-body-small);
+  font: var(--kds-font-base-subtext-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-.subtext-left[data-v-bd237a7d] {
+.subtext-left[data-v-e6b41a78] {
   /*
    * Take all remaining inline space so the right block is pushed to the
    * end. `min-width: 0` lets the ellipsis kick in when the right block
@@ -179,7 +179,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.subtext-right[data-v-bd237a7d] {
+.subtext-right[data-v-e6b41a78] {
   /*
    * On row 1 (alongside .subtext-left) the right block stays at its
    * intrinsic width — line-breaking in flex layout is decided from

package/dist/ai.js

@@ -173,7 +173,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             __props.link ? (openBlock(), createBlock(unref(KdsLink), {
               key: 1,
               label: __props.link.label,
-              to: __props.link.to
+              to: __props.link.to,
+              size: "small"
             }, null, 8, ["label", "to"])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
@@ -182,7 +183,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsPromptInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bd237a7d"]]);
+const KdsPromptInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e6b41a78"]]);
 
 const kdsPromptInputStatusType = {
   ERROR: "error",

package/dist/ai.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai.js","sources":["../src/ai/KdsPromptInput/InlineStatusBanner.vue","../src/ai/KdsPromptInput/KdsPromptInput.vue","../src/ai/KdsPromptInput/enums.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { KdsButton, KdsIcon } from \"@knime/kds-components\";\n\nimport type { KdsPromptInputStatus } from \"./types\";\n\nconst { status } = defineProps<{\n  status: KdsPromptInputStatus;\n}>();\n\nconst emit = defineEmits<{\n  buttonClick: [];\n}>();\n</script>\n\n<template>\n  <div\n    :class=\"['inline-status-banner', status.type]\"\n    :role=\"status.type === 'error' ? 'alert' : 'status'\"\n  >\n    <KdsIcon\n      :name=\"status.type === 'error' ? 'circle-error' : 'circle-info'\"\n      size=\"small\"\n      class=\"icon\"\n    />\n    <!--\n      tabindex=\"0\" so keyboard users can scroll the message when it\n      overflows the 2-line cap (axe rule: scrollable-region-focusable).\n    -->\n    <span class=\"text\" tabindex=\"0\">{{ status.message }}</span>\n    <KdsButton\n      v-if=\"status.buttonLabel\"\n      class=\"action\"\n      size=\"small\"\n      variant=\"filled\"\n      :label=\"status.buttonLabel\"\n      @click=\"emit('buttonClick')\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.inline-status-banner {\n  display: flex;\n  gap: var(--kds-spacing-container-0-37x);\n  align-items: center;\n\n  /*\n   * The banner extends 0.25x behind the input below so the input's\n   * rounded top corners carve out of the banner's bottom edge.\n   * The extra 0.25x of bottom padding keeps the\n   * content visually centered against the visible portion of the box.\n   * Top and horizontal padding subtract the border width so the box\n   * matches Figma (where the border is drawn outside the layout box).\n   * Bottom has no border, so no subtraction is needed there.\n   */\n  padding: calc(\n      var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)\n    )\n    calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs))\n    calc(var(--kds-spacing-container-0-5x) + var(--kds-spacing-container-0-25x));\n  margin-bottom: calc(-1 * var(--kds-spacing-container-0-25x));\n  font: var(--kds-font-base-body-small);\n  color: var(--kds-color-text-and-icon-neutral);\n  border-style: solid;\n  border-width: var(--kds-core-border-width-xs);\n  border-bottom: none;\n  border-top-left-radius: var(--kds-border-radius-container-0-50x);\n  border-top-right-radius: var(--kds-border-radius-container-0-50x);\n\n  .icon,\n  .action {\n    flex-shrink: 0;\n  }\n\n  &.error {\n    background-color: var(--kds-color-background-static-danger-muted);\n    border: var(--kds-border-base-danger);\n    border-bottom: none;\n\n    .icon {\n      color: var(--kds-color-text-and-icon-danger);\n    }\n  }\n\n  &.note {\n    background-color: var(--kds-color-background-static-info-muted);\n    border: var(--kds-border-base-info);\n    border-bottom: none;\n\n    .icon {\n      color: var(--kds-color-text-and-icon-info);\n    }\n  }\n}\n\n.text {\n  flex: 1 0 0;\n  min-width: 0;\n\n  /* Allow up to 2 lines, scroll beyond that. */\n  max-height: calc(2 * 1lh);\n  overflow-y: auto;\n  overflow-wrap: anywhere;\n  scrollbar-width: thin;\n\n  &:focus-visible {\n    outline: var(--kds-border-action-focused);\n    outline-offset: var(--kds-spacing-offset-focus);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useTemplateRef, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\n\nimport { KdsButton, KdsLink, KdsProgressBar } from \"@knime/kds-components\";\n\nimport InlineStatusBanner from \"./InlineStatusBanner.vue\";\nimport type { KdsPromptInputProps } from \"./types\";\n\nconst {\n  placeholder = \"\",\n  disabled = false,\n  loading = false,\n  status = undefined,\n  ariaLabel = \"Prompt\",\n  leftSubtext = undefined,\n  rightSubtext = undefined,\n  link = undefined,\n} = defineProps<KdsPromptInputProps>();\n\nconst emit = defineEmits<{\n  /** User submitted the prompt (Enter or send button). */\n  submit: [value: string];\n  /** User clicked the stop button while loading. */\n  stop: [];\n  /** User clicked the action button inside the inline status banner. */\n  statusButtonClick: [];\n}>();\n\nconst modelValue = defineModel<string>({ default: \"\" });\n\nconst textareaRef = useTemplateRef<HTMLTextAreaElement>(\"textareaRef\");\n\nconst canSubmit = computed(\n  () => !disabled && !loading && modelValue.value.trim().length > 0,\n);\n\nfunction resizeTextarea() {\n  const el = textareaRef.value;\n  if (!el) {\n    return;\n  }\n  // Defer style writes to the next animation frame so they don't run inside\n  // the ResizeObserver callback (which would otherwise trigger the\n  // \"ResizeObserver loop completed with undelivered notifications\" warning).\n  requestAnimationFrame(() => {\n    if (!textareaRef.value) {\n      return;\n    }\n    el.style.height = \"auto\";\n    const scrollHeight = el.scrollHeight;\n    if (scrollHeight <= el.offsetHeight) {\n      return;\n    }\n    el.style.height = `${scrollHeight}px`;\n  });\n}\n\nuseResizeObserver(textareaRef, resizeTextarea);\nwatch(modelValue, resizeTextarea, { immediate: true });\n\nfunction onSubmit() {\n  if (!canSubmit.value) {\n    return;\n  }\n  emit(\"submit\", modelValue.value.trim());\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  // Enter submits, Shift+Enter inserts a newline. Ignore Enter while an IME\n  // composition session is in progress.\n  if (event.key === \"Enter\" && !event.shiftKey && !event.isComposing) {\n    event.preventDefault();\n    onSubmit();\n  }\n}\n\ndefineExpose({\n  focus: () => textareaRef.value?.focus(),\n});\n</script>\n\n<template>\n  <div class=\"prompt-input\">\n    <InlineStatusBanner\n      v-if=\"status\"\n      :status=\"status\"\n      @button-click=\"emit('statusButtonClick')\"\n    />\n\n    <div\n      :class=\"['input-container', { disabled }]\"\n      @click=\"textareaRef?.focus()\"\n    >\n      <KdsProgressBar v-if=\"loading\" class=\"progress-bar\" indeterminate />\n\n      <div class=\"text-input-wrapper\">\n        <textarea\n          ref=\"textareaRef\"\n          v-model=\"modelValue\"\n          class=\"text-input\"\n          rows=\"1\"\n          :placeholder=\"placeholder\"\n          :disabled=\"disabled\"\n          :aria-label=\"ariaLabel\"\n          @keydown=\"onKeydown\"\n        />\n      </div>\n\n      <div class=\"action\">\n        <KdsButton\n          v-if=\"loading\"\n          variant=\"outlined\"\n          leading-icon=\"stop\"\n          size=\"medium\"\n          ariaLabel=\"Stop\"\n          @click.stop=\"emit('stop')\"\n        />\n        <KdsButton\n          v-else\n          variant=\"filled\"\n          leading-icon=\"send\"\n          size=\"medium\"\n          ariaLabel=\"Send\"\n          :disabled=\"!canSubmit\"\n          @click.stop=\"onSubmit\"\n        />\n      </div>\n    </div>\n\n    <div v-if=\"leftSubtext || rightSubtext || link\" class=\"subtext\">\n      <div v-if=\"leftSubtext\" class=\"subtext-left\">{{ leftSubtext }}</div>\n      <div v-if=\"rightSubtext || link\" class=\"subtext-right\">\n        <span v-if=\"rightSubtext\">{{ rightSubtext }}</span>\n        <KdsLink v-if=\"link\" :label=\"link.label\" :to=\"link.to\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.prompt-input {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  gap: var(--kds-spacing-container-0-5x);\n  align-items: flex-end;\n  padding: calc(\n    var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)\n  );\n  overflow: hidden;\n  cursor: text;\n  background: var(--kds-color-background-input-initial);\n  border: var(--kds-border-action-input);\n  border-radius: var(--kds-border-radius-container-0-37x);\n\n  &:has(textarea:focus:not(:disabled)) {\n    outline: var(--kds-border-action-focused);\n    outline-offset: var(--kds-spacing-offset-focus);\n  }\n\n  &:has(textarea:hover:not(:disabled, :focus)) {\n    background: var(--kds-color-background-input-hover);\n  }\n\n  &.disabled {\n    cursor: default;\n    border: var(--kds-border-action-disabled);\n  }\n}\n\n.text-input-wrapper {\n  display: flex;\n  flex: 1 0 0;\n  align-items: center;\n  min-width: 0;\n\n  /*\n   * Match the Send/Stop button height so a single-line textarea sits\n   * vertically centered against the button.\n   */\n  min-height: var(--kds-dimension-component-height-1-75x);\n  padding-left: var(--kds-spacing-container-0-37x);\n}\n\n.text-input {\n  width: 100%;\n  min-width: 0;\n\n  /* Cap textarea growth at 4 lines, scroll beyond that. */\n  max-height: calc(4 * 1lh);\n  padding: 0;\n  overflow-y: auto;\n  font: var(--kds-font-base-body-small);\n  color: var(--kds-color-text-and-icon-neutral);\n  resize: none;\n  outline: none;\n  scrollbar-width: none;\n  background: transparent;\n  border: none;\n\n  &::placeholder {\n    color: var(--kds-color-text-and-icon-subtle);\n  }\n\n  &:disabled {\n    color: var(--kds-color-text-and-icon-disabled);\n    cursor: default;\n\n    &::placeholder {\n      color: var(--kds-color-text-and-icon-disabled);\n    }\n  }\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n.action {\n  display: flex;\n  flex-shrink: 0;\n  align-items: flex-end;\n}\n\n.progress-bar {\n  position: absolute;\n  inset: -1px 0 auto;\n}\n\n.subtext {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);\n  align-items: center;\n  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)\n    0;\n  font: var(--kds-font-base-body-small);\n  color: var(--kds-color-text-and-icon-neutral);\n}\n\n.subtext-left {\n  /*\n   * Take all remaining inline space so the right block is pushed to the\n   * end. `min-width: 0` lets the ellipsis kick in when the right block\n   * grows past the container width.\n   */\n  flex: 1 1 0;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.subtext-right {\n  /*\n   * On row 1 (alongside .subtext-left) the right block stays at its\n   * intrinsic width — line-breaking in flex layout is decided from\n   * `flex-basis`, so it wraps onto its own row as soon as the container\n   * is narrower than that intrinsic width. On row 2 (its own row) the\n   * default `flex-shrink: 1` plus `min-width: 0` lets it shrink to the\n   * container width and wrap its own content (text + link).\n   */\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--kds-spacing-container-0-25x);\n  align-items: center;\n  min-width: 0;\n  margin-left: auto;\n}\n</style>\n","export const kdsPromptInputStatusType = {\n  ERROR: \"error\",\n  NOTE: \"note\",\n} as const;\n\nexport const kdsPromptInputStatusTypes = Object.values(\n  kdsPromptInputStatusType,\n);\n"],"names":["_createElementBlock","_normalizeClass","_createVNode","_unref","_createElementVNode","_hoisted_2","_toDisplayString","_createBlock","_useModel","_openBlock"],"mappings":"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"}
+{"version":3,"file":"ai.js","sources":["../src/ai/KdsPromptInput/InlineStatusBanner.vue","../src/ai/KdsPromptInput/KdsPromptInput.vue","../src/ai/KdsPromptInput/enums.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { KdsButton, KdsIcon } from \"@knime/kds-components\";\n\nimport type { KdsPromptInputStatus } from \"./types\";\n\nconst { status } = defineProps<{\n  status: KdsPromptInputStatus;\n}>();\n\nconst emit = defineEmits<{\n  buttonClick: [];\n}>();\n</script>\n\n<template>\n  <div\n    :class=\"['inline-status-banner', status.type]\"\n    :role=\"status.type === 'error' ? 'alert' : 'status'\"\n  >\n    <KdsIcon\n      :name=\"status.type === 'error' ? 'circle-error' : 'circle-info'\"\n      size=\"small\"\n      class=\"icon\"\n    />\n    <!--\n      tabindex=\"0\" so keyboard users can scroll the message when it\n      overflows the 2-line cap (axe rule: scrollable-region-focusable).\n    -->\n    <span class=\"text\" tabindex=\"0\">{{ status.message }}</span>\n    <KdsButton\n      v-if=\"status.buttonLabel\"\n      class=\"action\"\n      size=\"small\"\n      variant=\"filled\"\n      :label=\"status.buttonLabel\"\n      @click=\"emit('buttonClick')\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.inline-status-banner {\n  display: flex;\n  gap: var(--kds-spacing-container-0-37x);\n  align-items: center;\n\n  /*\n   * The banner extends 0.25x behind the input below so the input's\n   * rounded top corners carve out of the banner's bottom edge.\n   * The extra 0.25x of bottom padding keeps the\n   * content visually centered against the visible portion of the box.\n   * Top and horizontal padding subtract the border width so the box\n   * matches Figma (where the border is drawn outside the layout box).\n   * Bottom has no border, so no subtraction is needed there.\n   */\n  padding: calc(\n      var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)\n    )\n    calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs))\n    calc(var(--kds-spacing-container-0-5x) + var(--kds-spacing-container-0-25x));\n  margin-bottom: calc(-1 * var(--kds-spacing-container-0-25x));\n  font: var(--kds-font-base-body-small);\n  color: var(--kds-color-text-and-icon-neutral);\n  border-style: solid;\n  border-width: var(--kds-core-border-width-xs);\n  border-bottom: none;\n  border-top-left-radius: var(--kds-border-radius-container-0-50x);\n  border-top-right-radius: var(--kds-border-radius-container-0-50x);\n\n  .icon,\n  .action {\n    flex-shrink: 0;\n  }\n\n  &.error {\n    background-color: var(--kds-color-background-static-danger-muted);\n    border: var(--kds-border-base-danger);\n    border-bottom: none;\n\n    .icon {\n      color: var(--kds-color-text-and-icon-danger);\n    }\n  }\n\n  &.note {\n    background-color: var(--kds-color-background-static-info-muted);\n    border: var(--kds-border-base-info);\n    border-bottom: none;\n\n    .icon {\n      color: var(--kds-color-text-and-icon-info);\n    }\n  }\n}\n\n.text {\n  flex: 1 0 0;\n  min-width: 0;\n\n  /* Allow up to 2 lines, scroll beyond that. */\n  max-height: calc(2 * 1lh);\n  overflow-y: auto;\n  overflow-wrap: anywhere;\n  scrollbar-width: thin;\n\n  &:focus-visible {\n    outline: var(--kds-border-action-focused);\n    outline-offset: var(--kds-spacing-offset-focus);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useTemplateRef, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\n\nimport { KdsButton, KdsLink, KdsProgressBar } from \"@knime/kds-components\";\n\nimport InlineStatusBanner from \"./InlineStatusBanner.vue\";\nimport type { KdsPromptInputProps } from \"./types\";\n\nconst {\n  placeholder = \"\",\n  disabled = false,\n  loading = false,\n  status = undefined,\n  ariaLabel = \"Prompt\",\n  leftSubtext = undefined,\n  rightSubtext = undefined,\n  link = undefined,\n} = defineProps<KdsPromptInputProps>();\n\nconst emit = defineEmits<{\n  /** User submitted the prompt (Enter or send button). */\n  submit: [value: string];\n  /** User clicked the stop button while loading. */\n  stop: [];\n  /** User clicked the action button inside the inline status banner. */\n  statusButtonClick: [];\n}>();\n\nconst modelValue = defineModel<string>({ default: \"\" });\n\nconst textareaRef = useTemplateRef<HTMLTextAreaElement>(\"textareaRef\");\n\nconst canSubmit = computed(\n  () => !disabled && !loading && modelValue.value.trim().length > 0,\n);\n\nfunction resizeTextarea() {\n  const el = textareaRef.value;\n  if (!el) {\n    return;\n  }\n  // Defer style writes to the next animation frame so they don't run inside\n  // the ResizeObserver callback (which would otherwise trigger the\n  // \"ResizeObserver loop completed with undelivered notifications\" warning).\n  requestAnimationFrame(() => {\n    if (!textareaRef.value) {\n      return;\n    }\n    el.style.height = \"auto\";\n    const scrollHeight = el.scrollHeight;\n    if (scrollHeight <= el.offsetHeight) {\n      return;\n    }\n    el.style.height = `${scrollHeight}px`;\n  });\n}\n\nuseResizeObserver(textareaRef, resizeTextarea);\nwatch(modelValue, resizeTextarea, { immediate: true });\n\nfunction onSubmit() {\n  if (!canSubmit.value) {\n    return;\n  }\n  emit(\"submit\", modelValue.value.trim());\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  // Enter submits, Shift+Enter inserts a newline. Ignore Enter while an IME\n  // composition session is in progress.\n  if (event.key === \"Enter\" && !event.shiftKey && !event.isComposing) {\n    event.preventDefault();\n    onSubmit();\n  }\n}\n\ndefineExpose({\n  focus: () => textareaRef.value?.focus(),\n});\n</script>\n\n<template>\n  <div class=\"prompt-input\">\n    <InlineStatusBanner\n      v-if=\"status\"\n      :status=\"status\"\n      @button-click=\"emit('statusButtonClick')\"\n    />\n\n    <div\n      :class=\"['input-container', { disabled }]\"\n      @click=\"textareaRef?.focus()\"\n    >\n      <KdsProgressBar v-if=\"loading\" class=\"progress-bar\" indeterminate />\n\n      <div class=\"text-input-wrapper\">\n        <textarea\n          ref=\"textareaRef\"\n          v-model=\"modelValue\"\n          class=\"text-input\"\n          rows=\"1\"\n          :placeholder=\"placeholder\"\n          :disabled=\"disabled\"\n          :aria-label=\"ariaLabel\"\n          @keydown=\"onKeydown\"\n        />\n      </div>\n\n      <div class=\"action\">\n        <KdsButton\n          v-if=\"loading\"\n          variant=\"outlined\"\n          leading-icon=\"stop\"\n          size=\"medium\"\n          ariaLabel=\"Stop\"\n          @click.stop=\"emit('stop')\"\n        />\n        <KdsButton\n          v-else\n          variant=\"filled\"\n          leading-icon=\"send\"\n          size=\"medium\"\n          ariaLabel=\"Send\"\n          :disabled=\"!canSubmit\"\n          @click.stop=\"onSubmit\"\n        />\n      </div>\n    </div>\n\n    <div v-if=\"leftSubtext || rightSubtext || link\" class=\"subtext\">\n      <div v-if=\"leftSubtext\" class=\"subtext-left\">{{ leftSubtext }}</div>\n      <div v-if=\"rightSubtext || link\" class=\"subtext-right\">\n        <span v-if=\"rightSubtext\">{{ rightSubtext }}</span>\n        <KdsLink v-if=\"link\" :label=\"link.label\" :to=\"link.to\" size=\"small\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.prompt-input {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  gap: var(--kds-spacing-container-0-5x);\n  align-items: flex-end;\n  padding: calc(\n    var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)\n  );\n  overflow: hidden;\n  cursor: text;\n  background: var(--kds-color-background-input-initial);\n  border: var(--kds-border-action-input);\n  border-radius: var(--kds-border-radius-container-0-37x);\n\n  &:has(textarea:focus:not(:disabled)) {\n    outline: var(--kds-border-action-focused);\n    outline-offset: var(--kds-spacing-offset-focus);\n  }\n\n  &:has(textarea:hover:not(:disabled, :focus)) {\n    background: var(--kds-color-background-input-hover);\n  }\n\n  &.disabled {\n    cursor: default;\n    border: var(--kds-border-action-disabled);\n  }\n}\n\n.text-input-wrapper {\n  display: flex;\n  flex: 1 0 0;\n  align-items: center;\n  min-width: 0;\n\n  /*\n   * Match the Send/Stop button height so a single-line textarea sits\n   * vertically centered against the button.\n   */\n  min-height: var(--kds-dimension-component-height-1-75x);\n  padding-left: var(--kds-spacing-container-0-37x);\n}\n\n.text-input {\n  width: 100%;\n  min-width: 0;\n\n  /* Cap textarea growth at 4 lines, scroll beyond that. */\n  max-height: calc(4 * 1lh);\n  padding: 0;\n  overflow-y: auto;\n  font: var(--kds-font-base-body-small);\n  color: var(--kds-color-text-and-icon-neutral);\n  resize: none;\n  outline: none;\n  scrollbar-width: none;\n  background: transparent;\n  border: none;\n\n  &::placeholder {\n    color: var(--kds-color-text-and-icon-subtle);\n  }\n\n  &:disabled {\n    color: var(--kds-color-text-and-icon-disabled);\n    cursor: default;\n\n    &::placeholder {\n      color: var(--kds-color-text-and-icon-disabled);\n    }\n  }\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n.action {\n  display: flex;\n  flex-shrink: 0;\n  align-items: flex-end;\n}\n\n.progress-bar {\n  position: absolute;\n  inset: -1px 0 auto;\n}\n\n.subtext {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);\n  align-items: center;\n  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)\n    0;\n  font: var(--kds-font-base-subtext-small);\n  color: var(--kds-color-text-and-icon-neutral);\n}\n\n.subtext-left {\n  /*\n   * Take all remaining inline space so the right block is pushed to the\n   * end. `min-width: 0` lets the ellipsis kick in when the right block\n   * grows past the container width.\n   */\n  flex: 1 1 0;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.subtext-right {\n  /*\n   * On row 1 (alongside .subtext-left) the right block stays at its\n   * intrinsic width — line-breaking in flex layout is decided from\n   * `flex-basis`, so it wraps onto its own row as soon as the container\n   * is narrower than that intrinsic width. On row 2 (its own row) the\n   * default `flex-shrink: 1` plus `min-width: 0` lets it shrink to the\n   * container width and wrap its own content (text + link).\n   */\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--kds-spacing-container-0-25x);\n  align-items: center;\n  min-width: 0;\n  margin-left: auto;\n}\n</style>\n","export const kdsPromptInputStatusType = {\n  ERROR: \"error\",\n  NOTE: \"note\",\n} as const;\n\nexport const kdsPromptInputStatusTypes = Object.values(\n  kdsPromptInputStatusType,\n);\n"],"names":["_createElementBlock","_normalizeClass","_createVNode","_unref","_createElementVNode","_hoisted_2","_toDisplayString","_createBlock","_useModel","_openBlock"],"mappings":"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"}

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
 /**