@knime/product-features 2.0.2 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @knime/product-features
 
+## 2.1.1
+
+### Patch Changes
+
+- Updated dependencies [e2b5bfe]
+- Updated dependencies [bd4a10e]
+  - @knime/kds-components@4.0.0
+  - @knime/kds-styles@4.0.0
+
+## 2.1.0
+
+### Minor Changes
+
+- b027fcc: `KdsPromptInput`: added permission and question inquiries. New optional `permissions` and `questions` props render pending inquiries as cards attached above the input (permissions first, resolved as a stack; questions paginated with "Back" / "Skip" / "Next") while the input is disabled, and a new `respond` event emits every decision (`KdsPromptInputInquiryResponse`) once all inquiries are resolved. Permission cards show a `title` and optional `description` with an optional "remember choice" checkbox; permissions sharing a `remember.group` are auto-decided together when remembered. Question cards offer single- or multi-choice options plus a trailing "Type your own answer" option that reveals a freeform input.
+
+### Patch Changes
+
+- Updated dependencies [13cbb42]
+- Updated dependencies [356af93]
+- Updated dependencies [356af93]
+- Updated dependencies [e366f77]
+- Updated dependencies [e26e15d]
+  - @knime/kds-styles@3.0.0
+  - @knime/kds-components@3.0.0
+
 ## 2.0.2
 
 ### Patch Changes

package/dist/ai.css

@@ -1,60 +1,61 @@
 
+.attachable-surface {
+&[data-v-4cf4affc] {
+  margin-bottom: calc(-1 * var(--kds-spacing-container-0-25x));
+  background-color: var(--surface-background);
+  border: var(--surface-border);
+  border-bottom: none;
+  border-top-left-radius: var(--kds-border-radius-container-0-50x);
+  border-top-right-radius: var(--kds-border-radius-container-0-50x);
+}
+&.neutral[data-v-4cf4affc] {
+    --surface-background: var(--kds-color-background-input-initial);
+    --surface-border: var(--kds-border-action-default);
+}
+&.danger[data-v-4cf4affc] {
+    --surface-background: var(--kds-color-background-static-danger-muted);
+    --surface-border: var(--kds-border-base-danger);
+}
+&.info[data-v-4cf4affc] {
+    --surface-background: var(--kds-color-background-static-info-muted);
+    --surface-border: var(--kds-border-base-info);
+}
+}
+
 .inline-status-banner {
-&[data-v-506380c6] {
+&[data-v-df3926bc] {
   display: flex;
   gap: var(--kds-spacing-container-0-37x);
   align-items: center;
 
   /*
-   * The banner extends 0.25x behind the input below so the input's
-   * rounded top corners carve out of the banner's bottom edge.
-   * The extra 0.25x of bottom padding keeps the
-   * content visually centered against the visible portion of the box.
-   * Top and horizontal padding subtract the border width so the box
-   * matches Figma (where the border is drawn outside the layout box).
-   * Bottom has no border, so no subtraction is needed there.
+   * Horizontal / top padding subtract the surface's border width so the
+   * content box matches the design (where the border is drawn outside the
+   * layout box). The bottom adds an extra 0.25x to compensate for the 0.25x
+   * the surface tucks behind whatever sits below it, keeping the content
+   * vertically centered against the visible portion of the banner.
    */
   padding: calc(
       var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
     )
     calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs))
     calc(var(--kds-spacing-container-0-5x) + var(--kds-spacing-container-0-25x));
-  margin-bottom: calc(-1 * var(--kds-spacing-container-0-25x));
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
-  border-style: solid;
-  border-width: var(--kds-core-border-width-xs);
-  border-bottom: none;
-  border-top-left-radius: var(--kds-border-radius-container-0-50x);
-  border-top-right-radius: var(--kds-border-radius-container-0-50x);
 }
-.icon[data-v-506380c6],
-  .action[data-v-506380c6] {
+.icon[data-v-df3926bc],
+  .action[data-v-df3926bc] {
     flex-shrink: 0;
 }
-&.error {
-&[data-v-506380c6] {
-    background-color: var(--kds-color-background-static-danger-muted);
-    border: var(--kds-border-base-danger);
-    border-bottom: none;
-}
-.icon[data-v-506380c6] {
-      color: var(--kds-color-text-and-icon-danger);
-}
-}
-&.note {
-&[data-v-506380c6] {
-    background-color: var(--kds-color-background-static-info-muted);
-    border: var(--kds-border-base-info);
-    border-bottom: none;
-}
-.icon[data-v-506380c6] {
-      color: var(--kds-color-text-and-icon-info);
+&.error .icon[data-v-df3926bc] {
+    color: var(--kds-color-text-and-icon-danger);
 }
+&.note .icon[data-v-df3926bc] {
+    color: var(--kds-color-text-and-icon-info);
 }
 }
 .text {
-&[data-v-506380c6] {
+&[data-v-df3926bc] {
   flex: 1 0 0;
   min-width: 0;
 
@@ -64,19 +65,117 @@
   overflow-wrap: anywhere;
   scrollbar-width: thin;
 }
-&[data-v-506380c6]:focus-visible {
+&[data-v-df3926bc]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
 
-.prompt-input[data-v-e6b41a78] {
+.inquiry-card {
+&[data-v-495449c9] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-25x);
+}
+& .title[data-v-495449c9] {
+    font: var(--kds-font-base-title-medium-strong);
+    color: var(--kds-color-text-and-icon-neutral);
+    overflow-wrap: anywhere;
+}
+& .content {
+&[data-v-495449c9] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-5x);
+}
+& .description[data-v-495449c9] {
+      margin: 0;
+      font: var(--kds-font-base-body-small);
+      color: var(--kds-color-text-and-icon-subtle);
+      overflow-wrap: anywhere;
+}
+& .action-buttons[data-v-495449c9] {
+      display: flex;
+      gap: var(--kds-spacing-container-0-5x);
+      justify-content: end;
+}
+}
+}
+
+.inquiry-card {
+&[data-v-3293effe] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-25x);
+}
+& .title-row {
+&[data-v-3293effe] {
+    display: flex;
+    gap: var(--kds-spacing-container-1x);
+    align-items: center;
+}
+& .title {
+&[data-v-3293effe] {
+      flex: 1 1 0;
+      min-width: 0;
+      font: var(--kds-font-base-title-medium-strong);
+      color: var(--kds-color-text-and-icon-neutral);
+      overflow-wrap: anywhere;
+}
+& .skipped-tag[data-v-3293effe] {
+        margin-left: var(--kds-spacing-container-0-25x);
+        font: var(--kds-font-base-title-medium);
+        color: var(--kds-color-text-and-icon-subtle);
+}
+}
+& .pagination[data-v-3293effe] {
+      flex-shrink: 0;
+      font: var(--kds-font-base-title-medium);
+      color: var(--kds-color-text-and-icon-neutral);
+      white-space: nowrap;
+}
+}
+& .content {
+&[data-v-3293effe] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-5x);
+}
+& .description[data-v-3293effe] {
+      margin: 0;
+      font: var(--kds-font-base-body-small);
+      color: var(--kds-color-text-and-icon-subtle);
+      overflow-wrap: anywhere;
+}
+& .action-buttons {
+&[data-v-3293effe] {
+      display: flex;
+      gap: var(--kds-spacing-container-0-5x);
+      justify-content: space-between;
+}
+& .nav-primary[data-v-3293effe] {
+        display: flex;
+        gap: var(--kds-spacing-container-0-5x);
+}
+}
+}
+}
+
+.inquiry-stack[data-v-fa0d07a4] {
+  padding: calc(
+      var(--kds-spacing-container-1x) - var(--kds-core-border-width-xs)
+    )
+    calc(var(--kds-spacing-container-1x) - var(--kds-core-border-width-xs))
+    var(--kds-spacing-container-1x);
+}
+
+.prompt-input[data-v-92a6ac4b] {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 .input-container {
-&[data-v-e6b41a78] {
+&[data-v-92a6ac4b] {
   position: relative;
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
@@ -90,19 +189,19 @@
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
   }
-&[data-v-e6b41a78]:has(textarea:focus:not(:disabled)) {
+&[data-v-92a6ac4b]:has(textarea:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-e6b41a78]:has(textarea:hover:not(:disabled, :focus)) {
+&[data-v-92a6ac4b]:has(textarea:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.disabled[data-v-e6b41a78] {
+&.disabled[data-v-92a6ac4b] {
     cursor: default;
     border: var(--kds-border-action-disabled);
 }
 }
-.text-input-wrapper[data-v-e6b41a78] {
+.text-input-wrapper[data-v-92a6ac4b] {
   display: flex;
   flex: 1 0 0;
   align-items: center;
@@ -116,7 +215,7 @@
   padding-left: var(--kds-spacing-container-0-37x);
 }
 .text-input {
-&[data-v-e6b41a78] {
+&[data-v-92a6ac4b] {
   width: 100%;
   min-width: 0;
 
@@ -132,32 +231,32 @@
   background: transparent;
   border: none;
   }
-&[data-v-e6b41a78]::placeholder {
+&[data-v-92a6ac4b]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-e6b41a78] {
+&[data-v-92a6ac4b] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
     }
-&[data-v-e6b41a78]::placeholder {
+&[data-v-92a6ac4b]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
-&[data-v-e6b41a78]::-webkit-scrollbar {
+&[data-v-92a6ac4b]::-webkit-scrollbar {
     display: none;
 }
 }
-.action[data-v-e6b41a78] {
+.action[data-v-92a6ac4b] {
   display: flex;
   flex-shrink: 0;
   align-items: flex-end;
 }
-.progress-bar[data-v-e6b41a78] {
+.progress-bar[data-v-92a6ac4b] {
   position: absolute;
   inset: -1px 0 auto;
 }
-.subtext[data-v-e6b41a78] {
+.subtext[data-v-92a6ac4b] {
   display: flex;
   flex-wrap: wrap;
   gap: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
@@ -167,7 +266,7 @@
   font: var(--kds-font-base-subtext-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-.subtext-left[data-v-e6b41a78] {
+.subtext-left[data-v-92a6ac4b] {
   /*
    * 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 +278,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.subtext-right[data-v-e6b41a78] {
+.subtext-right[data-v-92a6ac4b] {
   /*
    * On row 1 (alongside .subtext-left) the right block stays at its
    * intrinsic width — line-breaking in flex layout is decided from