@knime/kds-components 0.28.5 → 0.28.8

package/dist/auto-configure-BU7AIhL7.js

@@ -0,0 +1,23 @@
+import { openBlock, createElementBlock, createElementVNode } from 'vue';
+
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 12 12"
+};
+
+function render(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1, [...(_cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      d: "M6.833 9.567 6.7 10.5H5.3l-.1-.933L4.067 9.1l-.767.567-.967-.967.567-.767L2.433 6.8 1.5 6.7V5.3l.933-.133.467-1.134-.567-.733.967-.967.733.567 1.134-.467L5.3 1.5h1.4l.1.933 1.133.467.734-.567 1 .967-.567.733.467 1.134.933.133M7.633 6a1.633 1.633 0 1 1-3.266 0 1.633 1.633 0 0 1 3.266 0m3.129 2.11-1.2-.96a.5.5 0 0 0-.812.39v1.92a.5.5 0 0 0 .812.39l1.2-.96a.5.5 0 0 0 0-.78",
+      "vector-effect": "non-scaling-stroke"
+    }, null, -1)
+  ]))]))
+}
+const autoConfigure = { render: render };
+
+export { autoConfigure as default, render };
+//# sourceMappingURL=auto-configure-BU7AIhL7.js.map

package/dist/auto-configure-BU7AIhL7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-configure-BU7AIhL7.js","sources":["../../styles/dist/img/icons/auto-configure.svg"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  \"stroke-linecap\": \"round\",\n  \"stroke-linejoin\": \"round\",\n  viewBox: \"0 0 12 12\"\n}\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, [...(_cache[0] || (_cache[0] = [\n    _createElementVNode(\"path\", {\n      d: \"M6.833 9.567 6.7 10.5H5.3l-.1-.933L4.067 9.1l-.767.567-.967-.967.567-.767L2.433 6.8 1.5 6.7V5.3l.933-.133.467-1.134-.567-.733.967-.967.733.567 1.134-.467L5.3 1.5h1.4l.1.933 1.133.467.734-.567 1 .967-.567.733.467 1.134.933.133M7.633 6a1.633 1.633 0 1 1-3.266 0 1.633 1.633 0 0 1 3.266 0m3.129 2.11-1.2-.96a.5.5 0 0 0-.812.39v1.92a.5.5 0 0 0 .812.39l1.2-.96a.5.5 0 0 0 0-.78\",\n      \"vector-effect\": \"non-scaling-stroke\"\n    }, null, -1)\n  ]))]))\n}\nexport default { render: render }"],"names":["_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;AAEA,MAAM,UAAU,GAAG;AACnB,EAAE,KAAK,EAAE,4BAA4B;AACrC,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,MAAM,EAAE,cAAc;AACxB,EAAE,gBAAgB,EAAE,OAAO;AAC3B,EAAE,iBAAiB,EAAE,OAAO;AAC5B,EAAE,OAAO,EAAE;AACX;;AAEO,SAAS,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE;AACrC,EAAE,QAAQA,SAAU,EAAE,EAAEC,kBAAmB,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG;AAC9F,IAAIC,kBAAmB,CAAC,MAAM,EAAE;AAChC,MAAM,CAAC,EAAE,sXAAsX;AAC/X,MAAM,eAAe,EAAE;AACvB,KAAK,EAAE,IAAI,EAAE,EAAE;AACf,GAAG,CAAC,CAAC,CAAC,CAAC;AACP;AACA,sBAAe,EAAE,MAAM,EAAE,MAAM;;;;"}

package/dist/index.css

@@ -948,7 +948,7 @@ html.kds-legacy {
 }
 
 .kds-list-item {
-&[data-v-9625480f] {
+&[data-v-a3d6c86f] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -965,36 +965,36 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-31x);
 }
 &.small {
-&[data-v-9625480f] {
+&[data-v-a3d6c86f] {
     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-9625480f] {
+.accessory[data-v-a3d6c86f] {
       display: flex;
       padding: var(--kds-spacing-container-0-12x) 0;
 }
 }
 &.large {
-&[data-v-9625480f] {
+&[data-v-a3d6c86f] {
     font: var(--kds-font-base-interactive-small-strong);
 }
-.accessory[data-v-9625480f] {
+.accessory[data-v-a3d6c86f] {
       display: flex;
       align-items: center;
 }
 }
 .content {
-&[data-v-9625480f] {
+&[data-v-a3d6c86f] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     min-width: 0;
 }
-.large &[data-v-9625480f] {
+.large &[data-v-a3d6c86f] {
       justify-content: center;
       min-height: calc(
         var(--kds-dimension-component-height-2-5x) - 2 *
@@ -1002,19 +1002,19 @@ html.kds-legacy {
       );
 }
 .label {
-&[data-v-9625480f] {
+&[data-v-a3d6c86f] {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 }
-.prefix[data-v-9625480f] {
+.prefix[data-v-a3d6c86f] {
         flex-shrink: 0;
 }
-.special[data-v-9625480f] {
+.special[data-v-a3d6c86f] {
         font: var(--kds-font-base-interactive-small-italic);
 }
 }
-.subtext[data-v-9625480f] {
+.subtext[data-v-a3d6c86f] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -1025,7 +1025,7 @@ html.kds-legacy {
 }
 }
 .trailing-item {
-&[data-v-9625480f] {
+&[data-v-a3d6c86f] {
     display: flex;
     flex-shrink: 0;
     gap: var(--kds-spacing-container-0-12x);
@@ -1033,69 +1033,69 @@ html.kds-legacy {
     align-self: center;
     justify-content: flex-end;
 }
-.shortcut[data-v-9625480f] {
+.shortcut[data-v-a3d6c86f] {
       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-9625480f] {
+.trailing-item-reserve-space[data-v-a3d6c86f] {
       width: var(--kds-dimension-icon-0-75x);
 }
 }
-&[data-v-9625480f]:hover:not(.disabled),
-  &.active[data-v-9625480f]:not(.disabled) {
+&[data-v-a3d6c86f]:hover:not(.disabled),
+  &.active[data-v-a3d6c86f]:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-9625480f]:active:not(.disabled) {
+&[data-v-a3d6c86f]:active:not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-9625480f] {
+&[data-v-a3d6c86f] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
 }
-.subtext[data-v-9625480f] {
+.subtext[data-v-a3d6c86f] {
       color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-9625480f]:hover,
-    &.active[data-v-9625480f] {
+&[data-v-a3d6c86f]:hover,
+    &.active[data-v-a3d6c86f] {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-9625480f]:active {
+&[data-v-a3d6c86f]:active {
       background: var(--kds-color-background-selected-active);
 }
-&.disabled[data-v-9625480f] {
+&.disabled[data-v-a3d6c86f] {
       background: var(--kds-color-background-selected-initial);
 }
 }
 &.missing {
-&[data-v-9625480f] {
+&[data-v-a3d6c86f] {
     color: var(--kds-color-text-and-icon-danger);
     background: var(--kds-color-background-danger-initial);
 }
-.subtext[data-v-9625480f] {
+.subtext[data-v-a3d6c86f] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&[data-v-9625480f]:hover,
-    &.active[data-v-9625480f] {
+&[data-v-a3d6c86f]:hover,
+    &.active[data-v-a3d6c86f] {
       background: var(--kds-color-background-danger-hover);
 }
-&[data-v-9625480f]:active {
+&[data-v-a3d6c86f]:active {
       background: var(--kds-color-background-danger-active);
 }
-&.disabled[data-v-9625480f] {
+&.disabled[data-v-a3d6c86f] {
       background: var(--kds-color-background-danger-initial);
 }
 }
 &.disabled {
-&[data-v-9625480f] {
+&[data-v-a3d6c86f] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.shortcut[data-v-9625480f],
-    .subtext[data-v-9625480f] {
+.shortcut[data-v-a3d6c86f],
+    .subtext[data-v-a3d6c86f] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
@@ -1127,8 +1127,24 @@ html.kds-legacy {
 }
 }
 
+.kds-menu-item-link[data-v-00c46d78] {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+
+  /*
+   * Keyboard navigation never focuses the anchor itself: the `KdsMenuContainer`
+   * keeps focus on the wrapping `[role="menu"]` and signals the active item via
+   * `aria-activedescendant`. The visual highlight is then rendered by the inner
+   * `KdsListItem`'s `active` prop. Because of that, suppressing the native
+   * `:focus` ring on mouse interaction is intentional — there is no companion
+   * indicator we'd be hiding.
+   */
+  outline: none;
+}
+
 .kds-menu-container {
-&[data-v-76ab9f2c] {
+&[data-v-cce3fc40] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-10x);
@@ -1140,7 +1156,7 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-76ab9f2c]:focus-visible {
+&[data-v-cce3fc40]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
@@ -1847,7 +1863,7 @@ html.kds-legacy {
 }
 
 .container {
-&[data-v-b8ccb955] {
+&[data-v-93daa14e] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -1859,46 +1875,46 @@ html.kds-legacy {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-b8ccb955]:has(input:focus:not(:disabled)) {
+&[data-v-93daa14e]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-b8ccb955]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-93daa14e]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-b8ccb955] {
+&.error[data-v-93daa14e] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-b8ccb955] {
+&.disabled[data-v-93daa14e] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-b8ccb955] {
+&[data-v-93daa14e] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-b8ccb955] {
+&.leading[data-v-93daa14e] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-b8ccb955] {
+&.trailing[data-v-93daa14e] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-b8ccb955] {
+.container.disabled &[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-b8ccb955],
-  .container:has(.input-field.has-value) &[data-v-b8ccb955] {
+.container:focus-within &[data-v-93daa14e],
+  .container:has(.input-field.has-value) &[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-b8ccb955] {
+&[data-v-93daa14e] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1917,36 +1933,36 @@ html.kds-legacy {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-b8ccb955] {
+&[data-v-93daa14e] {
     appearance: textfield;
 }
-&[data-v-b8ccb955]::-webkit-outer-spin-button,
-    &[data-v-b8ccb955]::-webkit-inner-spin-button {
+&[data-v-93daa14e]::-webkit-outer-spin-button,
+    &[data-v-93daa14e]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-b8ccb955]::-webkit-search-cancel-button {
+&[type="search"][data-v-93daa14e]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-b8ccb955]::placeholder {
+&[data-v-93daa14e]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.empty-mask[data-v-b8ccb955] {
+&.empty-mask[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-b8ccb955] {
+&[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-b8ccb955]::placeholder {
+&[data-v-93daa14e]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-b8ccb955] {
+&[data-v-93daa14e] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1956,26 +1972,26 @@ html.kds-legacy {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-b8ccb955] {
+&.placeholder[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-b8ccb955] {
+&.disabled[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-b8ccb955] {
+.container:focus-within &[data-v-93daa14e] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-b8ccb955] {
+.clear-button[data-v-93daa14e] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.leading-slot[data-v-b8ccb955] {
+.leading-slot[data-v-93daa14e] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
 }
-.trailing-slot[data-v-b8ccb955] {
+.trailing-slot[data-v-93daa14e] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -1983,7 +1999,7 @@ html.kds-legacy {
   margin-left: var(--kds-spacing-container-0-12x);
 }
 
-.kds-text-input-suggestions[data-v-c9f1be40] {
+.kds-text-input-suggestions[data-v-83f45d15] {
   max-height: var(--kds-dimension-component-height-12x);
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
@@ -2343,14 +2359,14 @@ html.kds-legacy {
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-3e274ed2] {
+.kds-search-results-container[data-v-aec3e3d0] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
 
 textarea {
-&[data-v-8e5a54cf] {
+&[data-v-36211819] {
   box-sizing: border-box;
   width: 100%;
   padding: calc(
@@ -2367,32 +2383,32 @@ textarea {
   border-radius: var(--kds-border-radius-container-0-37x);
   -ms-overflow-style: none;
 }
-&.invalid[data-v-8e5a54cf] {
+&.invalid[data-v-36211819] {
     border: var(--kds-border-action-error);
 }
-&[data-v-8e5a54cf]::placeholder {
+&[data-v-36211819]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-8e5a54cf] {
+&[data-v-36211819] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
-&[data-v-8e5a54cf]::placeholder {
+&[data-v-36211819]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
-&[data-v-8e5a54cf]:hover:not(:disabled, :focus) {
+&[data-v-36211819]:hover:not(:disabled, :focus) {
     background: var(--kds-color-background-input-hover);
 }
-&[data-v-8e5a54cf]:focus:not(:disabled) {
+&[data-v-36211819]:focus:not(:disabled) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
-textarea[data-v-8e5a54cf]::-webkit-scrollbar {
+textarea[data-v-36211819]::-webkit-scrollbar {
   display: none;
 }
 
@@ -3741,6 +3757,126 @@ to {
 }
 }
 
+.kds-breadcrumb-item[data-v-fd7537fc] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0;
+  margin: 0;
+  font: var(--kds-font-base-interactive-small);
+  color: var(
+    --kds-breadcrumb-item-color,
+    var(--kds-color-text-and-icon-subtle)
+  );
+  text-decoration: none;
+  background: none;
+  border: none;
+}
+.breadcrumb-label[data-v-fd7537fc] {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: inherit;
+  white-space: nowrap;
+}
+.breadcrumb-icon[data-v-fd7537fc] {
+  flex-shrink: 0;
+}
+span.kds-breadcrumb-item[data-v-fd7537fc] {
+  cursor: default;
+}
+a.kds-breadcrumb-item,
+button.kds-breadcrumb-item {
+&[data-v-fd7537fc] {
+  cursor: pointer;
+  border-radius: var(--kds-border-radius-container-0-12x);
+  }
+&[data-v-fd7537fc]:hover {
+    color: var(--kds-color-text-and-icon-neutral);
+}
+&[data-v-fd7537fc]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+.kds-breadcrumb-item:hover .breadcrumb-label[data-v-fd7537fc],
+.kds-breadcrumb-item:focus-visible .breadcrumb-label[data-v-fd7537fc] {
+  text-overflow: clip;
+}
+
+ol[data-v-e93667af] {
+  display: flex;
+  flex-flow: row nowrap;
+  padding: var(--kds-spacing-container-none);
+  padding-top: var(--kds-spacing-container-0-12x);
+  padding-bottom: var(--kds-spacing-container-0-12x);
+  padding-left: var(--kds-spacing-container-0-25x);
+  margin: var(--kds-spacing-container-none);
+  overflow-x: hidden;
+  white-space: nowrap;
+  list-style: none;
+}
+li {
+&[data-v-e93667af] {
+  /*
+     * Width is controlled by `useBreadcrumbAdaptiveLayout()` via the CSS
+     * custom properties `--kds-bc-max-width` (resting cap) and
+     * `--kds-bc-natural-width` (full width used while hovered/focused). Flex
+     * shrink/grow is disabled so the script is the single source of truth.
+     */
+  --kds-bc-floor: calc(
+    var(--kds-dimension-icon-1x) /* leading icon */ +
+      var(--kds-spacing-container-0-25x) /* item gap */ +
+      var(--kds-dimension-icon-0-75x) /* chevron */ + 2 *
+      var(--kds-spacing-container-0-12x) /* chevron margin */
+  );
+
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  min-width: var(--kds-bc-floor);
+  max-width: var(--kds-bc-max-width, fit-content);
+  min-height: var(--kds-dimension-component-height-1-25x);
+  font: var(--kds-font-base-subtext-medium);
+  color: var(--kds-color-text-and-icon-neutral);
+  transition: max-width 0.1s;
+
+  /*
+     * Hover/focus expands an ellipsed item back to its natural width. The
+     * surrounding items keep their resting widths and are simply pushed out to
+     * the right; `ol { overflow: hidden }` clips the overflow so the
+     * breadcrumb never grows beyond its container. Releasing the hover/focus
+     * snaps everything back into place via the `max-width` transition.
+     */
+
+  /* Current item: override the item color token so a/button inherit it. */
+  }
+&[data-v-e93667af]:last-child {
+    --kds-bc-floor: calc(
+      var(--kds-dimension-icon-1x) /* leading icon */ +
+        var(--kds-spacing-container-0-25x) /* item gap */
+    );
+}
+&[data-v-e93667af]:hover,
+  &[data-v-e93667af]:focus-within {
+    max-width: var(--kds-bc-natural-width, fit-content);
+}
+&.current[data-v-e93667af] {
+    --kds-breadcrumb-item-color: var(--kds-color-text-and-icon-neutral);
+}
+.path-separator[data-v-e93667af] {
+    flex-shrink: 0;
+    align-self: center;
+    margin-inline: var(--kds-spacing-container-0-12x);
+    color: var(--kds-color-text-and-icon-muted);
+}
+}
+
 .modal-header {
 &[data-v-62740dc9] {
   display: flex;