@knime/kds-components 0.28.4 → 0.28.7

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/cell-renderer-DGnkQWTq.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: "M1 4.5V3.25A1.25 1.25 0 0 1 2.25 2H3.5M1 7.5v1.25A1.25 1.25 0 0 0 2.25 10H3.5m5-8h1.25A1.25 1.25 0 0 1 11 3.25V4.5M8.5 10h1.25A1.25 1.25 0 0 0 11 8.75V7.5",
+      "vector-effect": "non-scaling-stroke"
+    }, null, -1)
+  ]))]))
+}
+const cellRenderer = { render: render };
+
+export { cellRenderer as default, render };
+//# sourceMappingURL=cell-renderer-DGnkQWTq.js.map

package/dist/cell-renderer-DGnkQWTq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell-renderer-DGnkQWTq.js","sources":["../../styles/dist/img/icons/cell-renderer.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: \"M1 4.5V3.25A1.25 1.25 0 0 1 2.25 2H3.5M1 7.5v1.25A1.25 1.25 0 0 0 2.25 10H3.5m5-8h1.25A1.25 1.25 0 0 1 11 3.25V4.5M8.5 10h1.25A1.25 1.25 0 0 0 11 8.75V7.5\",\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,4JAA4J;AACrK,MAAM,eAAe,EAAE;AACvB,KAAK,EAAE,IAAI,EAAE,EAAE;AACf,GAAG,CAAC,CAAC,CAAC,CAAC;AACP;AACA,qBAAe,EAAE,MAAM,EAAE,MAAM;;;;"}

package/dist/column-width-Cjb-6nqI.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: "M3 6h4.026m-2.77 1.25L3 6l1.256-1.25M7.026 6H9M7.026 6H4.974m2.77-1.25L9 6 7.744 7.25M1 2v8m10-8v8",
+      "vector-effect": "non-scaling-stroke"
+    }, null, -1)
+  ]))]))
+}
+const columnWidth = { render: render };
+
+export { columnWidth as default, render };
+//# sourceMappingURL=column-width-Cjb-6nqI.js.map

package/dist/column-width-Cjb-6nqI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-width-Cjb-6nqI.js","sources":["../../styles/dist/img/icons/column-width.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: \"M3 6h4.026m-2.77 1.25L3 6l1.256-1.25M7.026 6H9M7.026 6H4.974m2.77-1.25L9 6 7.744 7.25M1 2v8m10-8v8\",\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,oGAAoG;AAC7G,MAAM,eAAe,EAAE;AACvB,KAAK,EAAE,IAAI,EAAE,EAAE;AACf,GAAG,CAAC,CAAC,CAAC,CAAC;AACP;AACA,oBAAe,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);
 }
@@ -3262,7 +3278,7 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
 }
 
 .kds-panel {
-&[data-v-b56ad38d] {
+&[data-v-d3124a50] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -3270,7 +3286,7 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
   min-height: 0;
   background-color: var(--kds-color-surface-default);
 }
-.kds-panel-header[data-v-b56ad38d] {
+.kds-panel-header[data-v-d3124a50] {
     display: flex;
     flex: 0 0 auto;
     gap: var(--kds-spacing-container-0-25x);
@@ -3280,13 +3296,13 @@ textarea[data-v-8e5a54cf]::-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-b56ad38d] {
+.kds-panel-headline[data-v-d3124a50] {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
     min-width: 0;
 }
-.kds-panel-headline-text[data-v-b56ad38d] {
+.kds-panel-headline-text[data-v-d3124a50] {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
@@ -3295,7 +3311,7 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
     font: var(--kds-font-base-title-medium-strong);
     white-space: nowrap;
 }
-.kds-panel-header-trailing[data-v-b56ad38d] {
+.kds-panel-header-trailing[data-v-d3124a50] {
     display: flex;
     flex: 0 0 auto;
     gap: var(--kds-spacing-container-0-25x);
@@ -3303,21 +3319,21 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
     margin-left: auto;
 }
 .kds-panel-body {
-&[data-v-b56ad38d] {
+&[data-v-d3124a50] {
     flex: 1 1 auto;
     min-height: 0;
-    overflow: var(--cd61c39a);
+    overflow: var(--v2ddcad1c);
 }
-&[data-variant="padded"][data-v-b56ad38d] {
+&[data-variant="padded"][data-v-d3124a50] {
       padding: var(--kds-spacing-container-0-75x);
 }
-&[tabindex="0"][data-v-b56ad38d]:focus-visible {
+&[tabindex="0"][data-v-d3124a50]: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-b56ad38d] {
+.kds-panel-footer[data-v-d3124a50] {
     display: flex;
     flex: 0 0 auto;
     gap: var(--kds-spacing-container-0-25x);
@@ -3328,8 +3344,8 @@ textarea[data-v-8e5a54cf]::-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-b56ad38d],
-  .kds-panel-footer-trailing[data-v-b56ad38d] {
+.kds-panel-footer-leading[data-v-d3124a50],
+  .kds-panel-footer-trailing[data-v-d3124a50] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
@@ -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;