@otto-de/b2b-core-components 1.19.0 → 1.20.0

package/dist/collection/components/separator/separator.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/spinner/spinner.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/tab/tab.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/tab-panel/tab-panel.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/table/table-cell/table-cell.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/table/table-header/table-header.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/table/table-row/table-row.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/table/table-row/table-row.js

@@ -1,5 +1,6 @@
 import { h, Host, } from "@stencil/core";
-import { TableAccordionRowTypes, TableColourOptions, TableSizes, } from "../../../utils/types/table.types";
+import { TableColourOptions, TableSizes, } from "../../../utils/types/table.types";
+import { isFirstRow } from "../utils";
 export class TableRowComponent {
     constructor() {
         this.toggleOpen = () => {
@@ -17,8 +18,11 @@ export class TableRowComponent {
             });
         };
         this.getRowColor = () => {
-            if (this.accordionType === TableAccordionRowTypes.PARENT)
+            if (this.isAccordion() &&
+                isFirstRow(this.hostElement) &&
+                !this.isHeader()) {
                 return TableColourOptions.GROUP;
+            }
             return this.color;
         };
         /** Only needs to be added if we control the state of the selection. */
@@ -29,8 +33,14 @@ export class TableRowComponent {
         this.getParentRowGroup = () => {
             return this.hostElement.closest('b2b-table-rowgroup');
         };
+        this.isAccordion = () => {
+            return this.getParentRowGroup().hasAttribute('accordion');
+        };
+        this.isHeader = () => {
+            return this.getParentRowGroup().type === 'header';
+        };
         this.getCheckbox = () => {
-            let parent = this.getParentRowGroup();
+            const parent = this.getParentRowGroup();
             if (this.shouldAddCheckbox()) {
                 if (parent.type === 'header') {
                     return (h("b2b-table-header", { class: "b2b-table-row__control-cell--checkbox" }, h("b2b-checkbox", { standalone: true, checked: this.checked, indeterminate: this.indeterminate })));
@@ -41,23 +51,21 @@ export class TableRowComponent {
             }
         };
         this.getAccordionColumns = () => {
-            if (this.accordionType != undefined) {
-                switch (this.accordionType) {
-                    case TableAccordionRowTypes.HEADER:
-                        return (h("b2b-table-header", { class: "b2b-table-row__control-cell--accordion" }));
-                    case TableAccordionRowTypes.PARENT:
-                        return (h("b2b-table-cell", null, h("button", { onClick: this.toggleOpen, class: {
-                                'b2b-table-row__accordion-icon': true,
-                                'b2b-table-row__accordion-icon--open': this.isOpen,
-                            } }, h("b2b-icon", { icon: "b2b_icon-arrow-right", clickable: true }))));
-                    case TableAccordionRowTypes.CHILD:
-                        return (h("b2b-table-cell", { class: "b2b-table-row__control-cell--accordion" }));
+            if (this.isAccordion() && !this.isHeader()) {
+                if (isFirstRow(this.hostElement)) {
+                    return (h("b2b-table-cell", null, h("button", { onClick: this.toggleOpen, class: {
+                            'b2b-table-row__accordion-icon': true,
+                            'b2b-table-row__accordion-icon--open': this.isOpen,
+                        } }, h("b2b-icon", { icon: "b2b_icon-arrow-right", clickable: true }))));
                 }
+                return (h("b2b-table-cell", { class: "b2b-table-row__control-cell--accordion" }));
+            }
+            else if (this.isAccordion() && this.isHeader()) {
+                return (h("b2b-table-header", { class: "b2b-table-row__control-cell--accordion" }));
             }
         };
         this.highlight = true;
         this.color = 'default';
-        this.accordionType = undefined;
         this.selectable = undefined;
         this.size = undefined;
         this.value = undefined;
@@ -91,12 +99,12 @@ export class TableRowComponent {
         }
     }
     render() {
-        return (h(Host, { key: '5c12f0e1d67ff6dac1223d8973e376c2773b3735', class: {
+        return (h(Host, { key: '158ea38cbc14a9fd14a87beaa20cc6610d348eef', class: {
                 'b2b-table-row': true,
                 ['b2b-table-row--colspan']: this.size === TableSizes.COLSPAN,
                 ['b2b-table-row--highlight']: this.highlight,
                 [`b2b-table-row--color-${this.getRowColor()}`]: true,
-            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: '2aaf7ec2f09c1c9a5a37dded002408bff7c1754a' })));
+            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: '0f4afc0529929c2d308f76ce91a0353af7532607' })));
     }
     static get is() { return "b2b-table-row"; }
     static get encapsulation() { return "shadow"; }
@@ -154,32 +162,6 @@ export class TableRowComponent {
                 "reflect": false,
                 "defaultValue": "'default'"
             },
-            "accordionType": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "TableAccordionRowTypes",
-                    "resolved": "\"child\" | \"header\" | \"parent\"",
-                    "references": {
-                        "TableAccordionRowTypes": {
-                            "location": "import",
-                            "path": "../../../utils/types/table.types",
-                            "id": "src/utils/types/table.types.ts::TableAccordionRowTypes"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Determined by the parent rowgroup for accordion rowgroups."
-                        }],
-                    "text": ""
-                },
-                "attribute": "accordion-type",
-                "reflect": false
-            },
             "selectable": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/table/table-rowgroup/table-rowgroup.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/table/table-rowgroup/table-rowgroup.js

@@ -1,11 +1,11 @@
 import { h, Host, } from "@stencil/core";
-import { TableAccordionRowTypes, TableRowgroupTypes, TableSizes, } from "../../../utils/types/table.types";
-import { updateCheckboxState, getFirstRow, getAllRows, getRemainingRows, } from "../utils";
+import { TableRowgroupTypes, TableSizes, } from "../../../utils/types/table.types";
+import { updateCheckboxState, getFirstRow, getAllRows, getRemainingRows, isFirstRow, } from "../utils";
 export class TableRowgroupComponent {
     constructor() {
         this.toggleSelectAll = (event, children) => {
             this.toggleList(children, event);
-            const rows = children.filter(child => child.accordionType !== TableAccordionRowTypes.PARENT);
+            const rows = children.filter(child => !isFirstRow(child));
             this.selectedValues = [...rows]
                 .filter(child => child.checked)
                 .map(child => child.value);
@@ -13,20 +13,6 @@ export class TableRowgroupComponent {
         this.toggleList = (list, event) => {
             list.forEach(child => ((child.checked = event.detail.checked), (child.indeterminate = false)));
         };
-        this.addAccordionControlColumn = () => {
-            const firstRow = getFirstRow(this.host);
-            if (this.type === TableRowgroupTypes.HEADER) {
-                firstRow && (firstRow.accordionType = TableAccordionRowTypes.HEADER);
-            }
-            else {
-                firstRow && (firstRow.accordionType = TableAccordionRowTypes.PARENT);
-            }
-            const children = getRemainingRows(this.host);
-            children &&
-                children.forEach(child => {
-                    child.accordionType = TableAccordionRowTypes.CHILD;
-                });
-        };
         this.addCheckboxColumn = () => {
             const children = getAllRows(this.host);
             children.forEach(child => (child.selectable = true));
@@ -84,8 +70,7 @@ export class TableRowgroupComponent {
         const target = event.target;
         const table = this.host.closest('b2b-table');
         const parentValue = (_a = getFirstRow(this.host).value) !== null && _a !== void 0 ? _a : 'header';
-        if (this.accordion &&
-            target.accordionType === TableAccordionRowTypes.PARENT) {
+        if (this.accordion && isFirstRow(target) && parentValue != 'header') {
             const children = getRemainingRows(this.host);
             this.toggleSelectAll(event, children);
         }
@@ -118,7 +103,6 @@ export class TableRowgroupComponent {
     }
     componentWillLoad() {
         if (this.accordion) {
-            this.addAccordionControlColumn();
             this.toggleInitialVisibility();
         }
         if (this.selectable) {
@@ -129,11 +113,11 @@ export class TableRowgroupComponent {
         this.makeHeaderRowNotSelectable();
     }
     render() {
-        return (h(Host, { key: '79e8f3929f142b1d0f063e38c1b3a0295fe5c9d2', class: {
+        return (h(Host, { key: 'b32971c633a27af352651656743e5788f08dbc70', class: {
                 ['b2b-table-rowgroup__' + this.type]: true,
                 'b2b-table-rowgroup--fixed': this.fixed,
                 'b2b-table-rowgroup--colspan': this.size === TableSizes.COLSPAN,
-            }, role: "rowgroup" }, h("slot", { key: 'cbd36b06a0911c2e0309e65aaaa31c83396dd6b4' })));
+            }, role: "rowgroup" }, h("slot", { key: '53e1830d7834f3330a2a74f94d0ebea102fc5d5d' })));
     }
     static get is() { return "b2b-table-rowgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/table/table.e2e.js

@@ -200,15 +200,15 @@ describe('B2B-Table', () => {
         page = await newE2EPage();
         await page.setContent(tableWithAccordion);
         const firstRow = await page.find('#test-parent');
-        const type = await firstRow.getProperty('accordionType');
-        expect(type).toEqualText('parent');
+        const arrowCell = await firstRow.find('b2b-table-row__accordion-icon');
+        expect(arrowCell).toBeDefined();
     });
     it('should render all rows as accordion children when they are in the same rowgroup of type body in which accordion is true', async () => {
         page = await newE2EPage();
         await page.setContent(tableWithAccordion);
-        const firstRow = await page.find('#test-child');
-        const type = await firstRow.getProperty('accordionType');
-        expect(type).toEqualText('child');
+        const childRow = await page.find('#test-child');
+        const controlCell = await childRow.find('.b2b-table-row__control-cell--accordion');
+        expect(controlCell).toBeDefined();
     });
     it('should add an extra column for controls if accordion is true on a rowgroup', async () => {
         page = await newE2EPage();

package/dist/collection/components/table/utils.js

@@ -30,3 +30,8 @@ export function getFirstRow(hostEl) {
         return firstRow;
     }
 }
+export function isFirstRow(el) {
+    // attr is nullable so
+    // eslint-disable-next-line @stencil-community/strict-boolean-conditions
+    return el.previousElementSibling ? false : true;
+}

package/dist/collection/components/textarea/textarea.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/toggle-button/toggle-button.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/toggle-chip/toggle-chip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/toggle-group/toggle-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/toggle-switch/toggle-switch.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/tooltip/tooltip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/wizard/wizard.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/wizard-icon/wizard-icon.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Dec 2024 06:52:18 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/utils/types/table.types.js

@@ -23,11 +23,6 @@ export const TableSortDirections = {
     ASC: 'ascending',
     DESC: 'descending',
 };
-export const TableAccordionRowTypes = {
-    PARENT: 'parent',
-    CHILD: 'child',
-    HEADER: 'header',
-};
 export const TableCheckboxTypes = {
     HEADER: 'header',
     ROW: 'row',

package/dist/components/b2b-breadcrumb-item.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const breadcrumbCss = "@charset \"UTF-8\";:root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host .b2b-breadcrumb-nav{z-index:99;display:flex;flex-flow:row nowrap;padding:0.75rem 0;height:var(--b2b-size-90);margin-bottom:1.125rem;border-bottom:var(--b2b-size-border-width-50) solid var(--b2b-color-grey-200)}:host .b2b-breadcrumb-nav__item{font-size:var(--b2b-size-copy-125);line-height:var(--b2b-size-copy-line-height-125);display:inline-flex;color:var(--b2b-color-grey-400);cursor:pointer}:host .b2b-breadcrumb-nav__item a{color:var(--b2b-color-grey-400);text-decoration:none}:host .b2b-breadcrumb-nav__item:hover,:host .b2b-breadcrumb-nav__item a:hover{color:var(--b2b-color-red-100)}:host .b2b-breadcrumb-nav__item--active:hover,:host .b2b-breadcrumb-nav__item--active a:hover{cursor:default;color:var(--b2b-color-grey-400)}::slotted(*:not(:last-child))::after{content:\"»\";color:var(--b2b-color-grey-400);margin:0 0.375rem}";
+const breadcrumbCss = "@charset \"UTF-8\";:root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host{display:block}.b2b-breadcrumb-nav{z-index:99;display:flex;flex-flow:row nowrap;height:var(--b2b-size-90);margin-bottom:1.125rem;border-bottom:var(--b2b-size-border-width-50) solid var(--b2b-color-grey-200)}.b2b-breadcrumb-nav__item{font-size:var(--b2b-size-copy-125);line-height:var(--b2b-size-copy-line-height-125);display:inline-flex;color:var(--b2b-color-copy-secondary);cursor:pointer}.b2b-breadcrumb-nav__item a{color:var(--b2b-color-grey-400);text-decoration:none}.b2b-breadcrumb-nav__item:hover,.b2b-breadcrumb-nav__item a:hover{color:var(--b2b-color-red-100)}.b2b-breadcrumb-nav__item--active:hover,.b2b-breadcrumb-nav__item--active a:hover{cursor:default;color:var(--b2b-color-grey-400)}::slotted(*:not(:last-child))::after{content:\"»\";color:var(--b2b-color-grey-400);margin:0 0.375rem}";
 const B2bBreadcrumbItemStyle0 = breadcrumbCss;
 
 const BreadCrumbItemComponent = /*@__PURE__*/ proxyCustomElement(class BreadCrumbItemComponent extends HTMLElement {