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

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { b as TableAccordionRowTypes, c as TableColourOptions, T as TableSizes } from './utils.js';
+import { i as isFirstRow, b as TableColourOptions, T as TableSizes } from './utils.js';
 import { d as defineCustomElement$6 } from './checkbox.js';
 import { d as defineCustomElement$5 } from './icon.js';
 import { d as defineCustomElement$4 } from './input-label.js';
@@ -31,8 +31,11 @@ const TableRowComponent = /*@__PURE__*/ proxyCustomElement(class TableRowCompone
             });
         };
         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. */
@@ -43,8 +46,14 @@ const TableRowComponent = /*@__PURE__*/ proxyCustomElement(class TableRowCompone
         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 })));
@@ -55,23 +64,21 @@ const TableRowComponent = /*@__PURE__*/ proxyCustomElement(class TableRowCompone
             }
         };
         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;
@@ -105,19 +112,18 @@ const TableRowComponent = /*@__PURE__*/ proxyCustomElement(class TableRowCompone
         }
     }
     render() {
-        return (h(Host, { key: '5c12f0e1d67ff6dac1223d8973e376c2773b3735', class: {
+        return (h(Host, { key: 'f92b4349e74b6f9f4ff5da3661a268c0554cacf1', 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: '08f7b690c3b0a7ae8e8083254b9a975989306e57' })));
     }
     get hostElement() { return this; }
     static get style() { return B2bTableRowStyle0; }
 }, [1, "b2b-table-row", {
         "highlight": [4],
         "color": [1],
-        "accordionType": [1, "accordion-type"],
         "selectable": [4],
         "size": [1],
         "value": [1],

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { b as TableAccordionRowTypes, d as getFirstRow, e as TableRowgroupTypes, f as getRemainingRows, g as getAllRows, T as TableSizes, u as updateCheckboxState } from './utils.js';
+import { i as isFirstRow, g as getAllRows, c as getFirstRow, d as getRemainingRows, T as TableSizes, e as TableRowgroupTypes, u as updateCheckboxState } from './utils.js';
 
 const tableRowgroupCss = ":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:table-row-group}:host(.b2b-table-rowgroup__header){display:table-header-group}:host(.b2b-table-rowgroup--fixed){position:sticky;top:0;z-index:2;background-color:var(--b2b-color-white-100)}:host(.b2b-table-rowgroup--colspan){display:block}";
 const B2bTableRowgroupStyle0 = tableRowgroupCss;
@@ -12,7 +12,7 @@ const TableRowgroupComponent = /*@__PURE__*/ proxyCustomElement(class TableRowgr
         this.b2bSelect = createEvent(this, "b2b-group-selected", 7);
         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);
@@ -20,20 +20,6 @@ const TableRowgroupComponent = /*@__PURE__*/ proxyCustomElement(class TableRowgr
         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));
@@ -91,8 +77,7 @@ const TableRowgroupComponent = /*@__PURE__*/ proxyCustomElement(class TableRowgr
         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);
         }
@@ -125,7 +110,6 @@ const TableRowgroupComponent = /*@__PURE__*/ proxyCustomElement(class TableRowgr
     }
     componentWillLoad() {
         if (this.accordion) {
-            this.addAccordionControlColumn();
             this.toggleInitialVisibility();
         }
         if (this.selectable) {
@@ -136,11 +120,11 @@ const TableRowgroupComponent = /*@__PURE__*/ proxyCustomElement(class TableRowgr
         this.makeHeaderRowNotSelectable();
     }
     render() {
-        return (h(Host, { key: '79e8f3929f142b1d0f063e38c1b3a0295fe5c9d2', class: {
+        return (h(Host, { key: '4dd4d9fe40cbb15bbbdd8aeff90d31372da60cdd', 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: 'd4492ca4f42bde66052ed61c9d3bfebc74e790e7' })));
     }
     get host() { return this; }
     static get style() { return B2bTableRowgroupStyle0; }

package/dist/components/b2b-table.js

@@ -67,9 +67,9 @@ const TableComponent = /*@__PURE__*/ proxyCustomElement(class TableComponent ext
         }
     }
     render() {
-        return (h(Host, { key: 'f059683c7d7248d2a71f6b87d2a2c824bb4cedd9', class: {
+        return (h(Host, { key: '70f900f2160167e3f808c9c432cfa3bb134624c0', class: {
                 ['b2b-table--' + this.size]: true,
-            }, role: "table" }, h("slot", { key: 'ac05cc8efb3b4aaef44c2f9e05721363b630cd5e' })));
+            }, role: "table" }, h("slot", { key: 'c0b35190bb004dd3332e3b2bb856e30a1adee829' })));
     }
     get host() { return this; }
     static get style() { return B2bTableStyle0; }

package/dist/components/b2b-textarea.js

@@ -53,10 +53,10 @@ const B2BTextareaComponent = /*@__PURE__*/ proxyCustomElement(class B2BTextareaC
         }
     }
     render() {
-        return (h(Host, { key: 'fa67a181d11d401b8619990c40cd56f788365a05', class: {
+        return (h(Host, { key: 'adf829a538a8234008981a3f1a56d5f370b859ec', class: {
                 'b2b-textarea': true,
                 'b2b-textarea--error': this.invalid && !this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { key: '87fe71ca84f053e80625942b7fe3afcfd4cfa44a', class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { key: 'c64d67fb1eb2a7552643815f10b139d34a7a46bd', class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     get hostElement() { return this; }

package/dist/components/b2b-toggle-button.js

@@ -39,13 +39,13 @@ const B2bToggleButtonComponent = /*@__PURE__*/ proxyCustomElement(class B2bToggl
         return Array.from(document.querySelectorAll(`b2b-toggle-button[name="${this.name}"]`)).filter((toggle) => toggle.value !== this.value);
     }
     render() {
-        return (h(Host, { key: '1b4455bc08da5cd59668542b9448991950082a5d', onClick: this.onClick }, h("span", { key: '3dfc32795f51493f156715c762eb07911cd8cefa', class: {
+        return (h(Host, { key: '72a27c904d091619da19fb5dab2da588326688df', onClick: this.onClick }, h("span", { key: '165c0254153fa4a3bff6d76f58f844830344f8c2', class: {
                 'b2b-toggle-button': true,
                 'b2b-toggle-button--disabled': this.disabled,
-            } }, h("input", { key: '5909a9f50d6a5bd7debb6d94e42c32eb34494d7d', tabindex: 0, class: {
+            } }, h("input", { key: '0d6ee278d5db9f360e7ab466daeaebced17063e6', tabindex: 0, class: {
                 'b2b-toggle-button__input': true,
                 'b2b-toggle-button__input--disabled': this.disabled,
-            }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: 'a3ba75134e2b082fb6daf4a4305e909abd3ce2d3', id: this.name, tabindex: -1, class: {
+            }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: 'f073f01258465886c9fe70e99692ffee84db38bc', id: this.name, tabindex: -1, class: {
                 'b2b-toggle-button__label': true,
                 'b2b-toggle-button__label--disabled': this.disabled,
                 'b2b-toggle-button__label--checked': this.checked && !this.disabled,

package/dist/components/b2b-toggle-chip.js

@@ -41,11 +41,11 @@ const B2BToggleChipComponent = /*@__PURE__*/ proxyCustomElement(class B2BToggleC
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '0edab0e264bffc60e1e9b0479a8923fe046cb655' }, h("span", { key: 'cba90b7b8adb0e6d183b10800da01fd0cee84ddc', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
+        return (h(Host, { key: '521c77d6f300a1e0a3f978a6645c37f7ca3a7aeb' }, h("span", { key: '73ee23bfcf46564a32afac2892479830c25b81b8', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
                 'b2b-toggle-chip': true,
-            } }, h("input", { key: 'a83be039e526e5c81d9c9a06d78ffbe084003656', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
+            } }, h("input", { key: '1b0fa2b361fc41d011e7d71d56dc48c614cc478a', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
                 'b2b-toggle-chip__input': true,
-            }, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '239667dab17575f444304d1a6ed080969263a529', id: this.name, tabIndex: -1, class: {
+            }, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '6de8f234f543595ab2995854c1f995ce1c724f8b', id: this.name, tabIndex: -1, class: {
                 'b2b-toggle-chip__label': true,
                 [`b2b-toggle-chip__label--${this.variant}`]: true,
                 'b2b-toggle-chip__label--active': this.active,

package/dist/components/b2b-toggle-group.js

@@ -53,10 +53,10 @@ const B2BToggleGroup = /*@__PURE__*/ proxyCustomElement(class B2BToggleGroup ext
         }
     }
     render() {
-        return (h(Host, { key: '61ccd7ac4efe264edc353ee2c77085b928dca8f0' }, h("div", { key: 'ca4d71b1c622d8ae3220bd3a5d871454e8614d96', class: {
+        return (h(Host, { key: 'e81f98de29ab06594da8b9e19e68f4ec9f3c878f' }, h("div", { key: 'a590585c94ab40ea54abd08031ab9b1482bc4a78', class: {
                 'b2b-toggle-group': true,
                 'b2b-toggle-group--disabled': this.disabled,
-            } }, h("fieldset", { key: '05e1fd468b4cd2ecff5e813db6389f43d065176f' }, h("slot", { key: '14e60ca50e82c8e4ae7147ac7e585a13b6c50358' })))));
+            } }, h("fieldset", { key: 'f8a20fb30c7b5fd958171f91a2219a2efbd7a5ca' }, h("slot", { key: '3e0bc10d09053d008a9d771721c57463ce437e27' })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/b2b-toggle-switch.js

@@ -46,17 +46,17 @@ const B2bToggleSwitchComponent = /*@__PURE__*/ proxyCustomElement(class B2bToggl
     render() {
         // workaround for purgecss as safelist doesn't work
         const isLeft = this.labelPosition === 'left';
-        return (h(Host, { key: 'f40fa08edbf399fa627a81140477f2512a5884b3' }, h("div", { key: 'f806f79cf76f965383d8538a7c393b4e562fdb32', class: {
+        return (h(Host, { key: 'ead51ac66423aad33f3714724dd943f76c9a5a2d' }, h("div", { key: 'bd253f3dac1128d188d1fcee84fd35c1dcb07a2d', class: {
                 'b2b-toggle': true,
                 'b2b-toggle--disabled': this.disabled,
                 'b2b-toggle--checked': this.state,
-            } }, h("div", { key: '0664c184383f64864b25978d9d980266cf72668d', class: {
+            } }, h("div", { key: '69f605ce7363e4aa7aa89b0783721ae30c8897ca', class: {
                 'b2b-toggle__label': true,
                 'b2b-toggle__label--left': isLeft,
-            } }, h("span", { key: '98b08ab1b541fed7ee54730380c331aa55206868', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: 'e84003457f75842186d30b582ab3896aea5257b6', class: {
+            } }, h("span", { key: 'b52b3852d95df99a32aa095532d7fe6897e7b638', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: 'c8752f6668e05da681f6682e604441fdac6b1365', class: {
                 'b2b-toggle__icon': true,
                 'b2b-toggle__icon--show': this.state,
-            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '087e56df9cd4e1712024944dd470baf445338077', d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" }))), this.label && (h("span", { class: {
+            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '09d63539b5f10f54089658ea44fa081bbd3fceb7', d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" }))), this.label && (h("span", { class: {
                 'b2b-toggle__text': true,
                 'b2b-toggle__text--left': isLeft,
             } }, this.label))))));

package/dist/components/b2b-tooltip.js

@@ -60,13 +60,13 @@ const B2BTooltipComponent = /*@__PURE__*/ proxyCustomElement(class B2BTooltipCom
         }
     }
     render() {
-        return (h(Host, { key: '206be7996ce610ef649791c8fbdb33cb43c0c4e3', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: '2db6908f7af38c30676f4ee4e2ec0fb395b496d3', class: {
+        return (h(Host, { key: '85d4ea6d00cc0a1cb3f411e2ea2d57f064ba114d', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: '8503ac0f0638dd3501a62741a9cb668bd08a4c55', class: {
                 [`b2b-tooltip--${this.position}`]: true,
                 'b2b-tooltip__trigger': true,
-            } }, h("slot", { key: '701b2c95321148dc456698c6354e57f57c2aa705' }), h("div", { key: '9a73bbaffe6aeb94df712dcfb07607038827b329', class: {
+            } }, h("slot", { key: '009c743af15c9ebc54bdf6dee620f15e43e306ee' }), h("div", { key: '7b655965e432651456d26f147fef251bdd505cce', class: {
                 'b2b-tooltip__content': true,
                 'b2b-tooltip--visible': this.opened,
-            } }, h("slot", { key: 'a2a30959e9f5757b5bd1df92f19f97a5a87b1960', name: "content" }, this.content)))));
+            } }, h("slot", { key: 'f653061d233472af5731448814e16872c189c4c9', name: "content" }, this.content)))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/b2b-wizard-step.js

@@ -17,10 +17,10 @@ const WizardStepComponent = /*@__PURE__*/ proxyCustomElement(class WizardStepCom
         this.checkIcon = true;
     }
     render() {
-        return (h(Host, { key: '11892ec96d8a26f9a1665908c4f247a9944ecd27' }, h("div", { key: '1d5e0fadf98c8d54ffb21638df91a4c56bcb33a3', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: '02674a17c0ee84de5c14b6422afb25df7dbca947', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: 'a059e53252f36ce98fb15298b575689c18004182', class: {
+        return (h(Host, { key: '549e0e7ff5030f4a5fc472e046f65fbe964f89cf' }, h("div", { key: 'a2f9dd5665eb063c5c51df700765509dca2c1616', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: 'cdd5ed4aa979be3b2f878c7f735afc11fa2936bd', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: '84c4d7608daf542354ca707881730de8a3c65783', class: {
                 'b2b_wizard__step__label': true,
                 'b2b_wizard__step__label--default': this.state === WizardStatus.DEFAULT,
-            } }, h("slot", { key: '68154418c6b0e5029e4b0aea64ef03f1923b1c74' })))));
+            } }, h("slot", { key: '00837facfab31ae121002e62277c0bc907161bf6' })))));
     }
     static get style() { return B2bWizardStepStyle0; }
 }, [1, "b2b-wizard-step", {

package/dist/components/b2b-wizard.js

@@ -51,7 +51,7 @@ const WizardComponent = /*@__PURE__*/ proxyCustomElement(class WizardComponent e
             this.setStepsState();
     }
     render() {
-        return (h(Host, { key: '4395808877c2f78bb53e4ced7cc4c89d875a0b5c' }, h("div", { key: '8fe7bc19cf6e356aaafad10f0461db6d29781fcf', class: "b2b_wizard" }, h("slot", { key: '30e3bd793259494df8355d2417067861d49a70e8' }))));
+        return (h(Host, { key: '82f36879396d38b9423200ba7a73601b327335b8' }, h("div", { key: '83b2827e4c284420456b76c4b39c683851992731', class: "b2b_wizard" }, h("slot", { key: 'b88f8ab6a5831168bd5ab9b6f0e2c4cc9cabccec' }))));
     }
     get host() { return this; }
     static get style() { return B2bWizardStyle0; }

package/dist/components/checkbox.js

@@ -83,7 +83,7 @@ const CheckboxComponent = /*@__PURE__*/ proxyCustomElement(class CheckboxCompone
                 'b2b-checkbox--checked': this.checked,
                 'b2b-checkbox--standalone': this.standalone,
                 'b2b-checkbox--indeterminate': this.indeterminate,
-            } }, h("div", { key: '29a99d41fca9d51aea5ac58feb92910f10d58e46', class: "b2b-checkbox-items" }, this.renderIcon(), h("input", { key: 'a05a1ba84a49d775a887e393ade4a5c2ce993273', class: "b2b-checkbox__input", "aria-labelledby": this.name, type: "checkbox", name: this.name, id: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.groupDisabled, onFocus: this.onFocus, onBlur: this.onBlur }), !this.standalone && (h("b2b-input-label", { id: this.name, required: this.required, disabled: this.disabled }, h("slot", { name: "label" }, this.label)))), (this.hint !== undefined && !this.invalid) ||
+            } }, h("div", { key: 'dab97157c87fbc3a9599355113b930039afeb1d0', class: "b2b-checkbox__items" }, this.renderIcon(), h("input", { key: '253f9206dc69ce6c404c7e4b3c260da6772d2786', class: "b2b-checkbox__input", "aria-labelledby": this.name, type: "checkbox", name: this.name, id: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.groupDisabled, onFocus: this.onFocus, onBlur: this.onBlur }), !this.standalone && (h("b2b-input-label", { id: this.name, required: this.required, disabled: this.disabled }, h("slot", { name: "label" }, this.label)))), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
     }
     get hostElement() { return this; }

package/dist/components/rounded-icon.js

@@ -13,16 +13,16 @@ const RoundedIconComponent = /*@__PURE__*/ proxyCustomElement(class RoundedIconC
         this.contentColor = 'var(--b2b-color-copy-default)';
     }
     render() {
-        return (h(Host, { key: '3f7d19c1639c9e124ff5343a17fdad7aa322953f' }, h("div", { key: '0f86ef2292c301dd63cc8b975ce7d80c305813ec', style: {
+        return (h(Host, { key: 'b2542f30738b99706e264260504902e148af170f' }, h("div", { key: '01d1b4b8118a1754fe85354eb47dfb78a778b1f6', style: {
                 ['background-color']: this.color,
                 ['border']: `1px solid ${this.borderColor || this.color}`,
             }, class: {
                 'b2b-rounded-icon': true,
-            } }, h("div", { key: 'fa9aad421fd737beb33c8338eb41f24f92972a58', style: {
+            } }, h("div", { key: '3e319fcf7d1acc4c3a534c26f6106717a8d57fdf', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: '9ebcf447273cf65e2cd4bdfb9b08b26b33de2bcc', name: "icon" })), h("div", { key: '3dedbe36dcb2534925f965581ca25ddb5c07ad4a', style: {
+            } }, h("slot", { key: '1f14bca3fb6fe8dc92d6cadc173f5b470a425db6', name: "icon" })), h("div", { key: '2e07fb2694f642788c09361a9aaa7c6f768107cc', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: 'b24493622004d54f5fe867239afc45b50126c365', name: "text" })))));
+            } }, h("slot", { key: 'c84e59d64323d19ff2a2a3245d6db424f8135bc6', name: "text" })))));
     }
     static get style() { return B2bRoundedIconStyle0; }
 }, [1, "b2b-rounded-icon", {

package/dist/components/separator.js

@@ -11,7 +11,7 @@ const B2bSeparatorComponent = /*@__PURE__*/ proxyCustomElement(class B2bSeparato
         this.alignment = 'horizontal';
     }
     render() {
-        return (h(Host, { key: 'a3db3037faa86621b40d27f9d98916af1c4e49d0' }, h("div", { key: '4ed637bd7e4667f7e723ea2454a2515d8f2eae27', class: {
+        return (h(Host, { key: '5d26a4636a4e167729ce76edfd20d64ae6f49c07' }, h("div", { key: 'e3f04f51c3a3a32fee947b109095aa682b64df49', class: {
                 [`b2b-separator--${this.alignment}`]: true,
             } })));
     }

package/dist/components/spinner.js

@@ -12,7 +12,7 @@ const SpinnerComponent = /*@__PURE__*/ proxyCustomElement(class SpinnerComponent
         this.color = 'primary';
     }
     render() {
-        return (h("div", { key: '47f0e4f22e7309ad3b2800fb01289cef76eedd3e', class: {
+        return (h("div", { key: '4260cc2e742b9d3a77fc1739f7de248ee70ffd69', class: {
                 'b2b-spinner': true,
                 ['b2b-spinner--size-' + this.size]: true,
                 ['b2b-spinner--color-' + this.color]: true,

package/dist/components/table-cell.js

@@ -42,14 +42,14 @@ const TableCellComponent = /*@__PURE__*/ proxyCustomElement(class TableCellCompo
         }
     }
     render() {
-        return (h(Host, { key: 'd706833182b183034b19d1be797aaccba82fe3de', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
+        return (h(Host, { key: '571ec5bc494057bfbe9c9146da086bb6a192f298', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
                 'b2b-table-cell': true,
                 ['b2b-table-cell--colspan']: this.size === TableSizes.COLSPAN,
                 ['b2b-table-cell--ellipsis']: this.useTextEllipsis,
                 ['b2b-table-cell--' + this.align]: true,
                 ['b2b-table-cell--divider']: this.divider,
                 [`b2b-table-cell-color-${this.color}`]: true,
-            }, role: "cell" }, h("slot", { key: '7bb8d232cc4416c78a197f4a76e2e8efd0f83f65' })));
+            }, role: "cell" }, h("slot", { key: '10385f497f0061d09b227b88456205bac24f272f' })));
     }
     get host() { return this; }
     static get style() { return B2bTableCellStyle0; }

package/dist/components/table-header.js

@@ -77,7 +77,7 @@ const TableHeaderComponent = /*@__PURE__*/ proxyCustomElement(class TableHeaderC
         this.setIconPlacement();
     }
     render() {
-        return (h(Host, { key: 'f8076f812d54e86da50f61c844c5af41e9321dd9', class: {
+        return (h(Host, { key: '34f96e3a7c5c36cafadb463a72f1acec6550d367', class: {
                 [`b2b-table-header--${this.sortDirection && this.iconAlign}`]: true,
                 'b2b-table-header--divider': this.divider,
                 [`b2b-table-header--${this.size}`]: true,

package/dist/components/utils.js

@@ -23,11 +23,6 @@ const TableSortDirections = {
     ASC: 'ascending',
     DESC: 'descending',
 };
-const TableAccordionRowTypes = {
-    PARENT: 'parent',
-    CHILD: 'child',
-    HEADER: 'header',
-};
 const TableColourOptions = {
     DEFAULT: 'default',
     SELECTED: 'selected',
@@ -66,5 +61,10 @@ function getFirstRow(hostEl) {
         return firstRow;
     }
 }
+function isFirstRow(el) {
+    // attr is nullable so
+    // eslint-disable-next-line @stencil-community/strict-boolean-conditions
+    return el.previousElementSibling ? false : true;
+}
 
-export { ContentAlignment as C, SortIconAlignment as S, TableSizes as T, TableSortDirections as a, TableAccordionRowTypes as b, TableColourOptions as c, getFirstRow as d, TableRowgroupTypes as e, getRemainingRows as f, getAllRows as g, setFlexBase as s, updateCheckboxState as u };
+export { ContentAlignment as C, SortIconAlignment as S, TableSizes as T, TableSortDirections as a, TableColourOptions as b, getFirstRow as c, getRemainingRows as d, TableRowgroupTypes as e, getAllRows as g, isFirstRow as i, setFlexBase as s, updateCheckboxState as u };

package/dist/components/wizard-icon.js

@@ -16,7 +16,7 @@ const WizardIconComponent = /*@__PURE__*/ proxyCustomElement(class WizardIconCom
         this.checkIcon = true;
     }
     render() {
-        return (h(Host, { key: 'f90113ae53a154cabd6c03ba7ca5ec799fd2a924' }, h("div", { key: 'b53d693ec4588902dfd92210723fba697fc96ca8', class: {
+        return (h(Host, { key: '5c3ab4531997f298489cef25f5b4cee243588e74' }, h("div", { key: '9b212fbab1c0dcb54787c39da4081f1f911b7d85', class: {
                 'b2b-wizard-icon': true,
             } }, this.state === WizardStatus.COMPLETED && (h("b2b-rounded-icon", { color: "var(--b2b-color-success-50)", "content-color": "var(--b2b-color-success-100)" }, this.checkIcon ? (h("b2b-icon", { slot: "icon", icon: "b2b_icon-check" })) : (h("span", { slot: "text" }, this.step)))), this.state === WizardStatus.PENDING && (h("b2b-rounded-icon", { color: "var(--b2b-color-icon-default)", "content-color": "var(--b2b-color-icon-inverted)" }, h("span", { slot: "text" }, this.step))), this.state === WizardStatus.DISABLED && (h("b2b-rounded-icon", { color: "var(--b2b-color-grey-100)", "content-color": "var(--b2b-color-grey-400)" }, h("span", { slot: "text" }, this.step))), this.state === WizardStatus.DEFAULT && (h("b2b-rounded-icon", { color: "transparent", "border-color": "var(--b2b-color-icon-secondary)", "content-color": "var(--b2b-color-icon-secondary)" }, h("span", { slot: "text" }, this.step))))));
     }

package/dist/custom-elements.json

@@ -63,6 +63,18 @@
           "name": "download",
           "description": "If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file\ndefaults to the URL string, but can be changed by the user."
         },
+        {
+          "name": "hover-color",
+          "description": "The hoverColor of the link. Per default, it is set to b2b-color-red-100. If specified as inherit, it is inherited from the parent element.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "inherit"
+            }
+          ]
+        },
         {
           "name": "href",
           "description": "The URL or URL fragment the anchor points to. This is required."
@@ -96,6 +108,10 @@
               "name": "top"
             }
           ]
+        },
+        {
+          "name": "underline-text",
+          "description": "The underlineText of the link. If set to false, the link text will not be underlined."
         }
       ]
     },
@@ -122,7 +138,16 @@
         "kind": "markdown",
         "value": ""
       },
-      "attributes": []
+      "attributes": [
+        {
+          "name": "padding-bottom",
+          "description": "Padding for the bottom of the breadcrumb component"
+        },
+        {
+          "name": "padding-top",
+          "description": "Padding for the top of the breadcrumb component"
+        }
+      ]
     },
     {
       "name": "b2b-breadcrumb-item",

package/dist/esm/b2b-alert.entry.js

@@ -22,7 +22,7 @@ const AlertComponent = class {
             return this.size === 'small' && this.customIcon;
         };
         this.type = 'info';
-        this.size = 'small';
+        this.size = 'large';
         this.opened = false;
         this.hasCloseButton = true;
         this.customIcon = false;

package/dist/esm/b2b-anchor.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-ab9eb36d.js';
 
-const anchorCss = ":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{z-index:0;width:fit-content;height:fit-content;position:relative}:host .b2b-anchor{font-family:var(--b2b-font-family-default);color:var(--b2b-color-copy-default);text-decoration:underline;transition:all 0.3s ease;z-index:1001;position:relative}:host .b2b-anchor:hover{color:var(--b2b-color-red-100);cursor:pointer}:host .b2b-anchor--100{font-size:var(--b2b-size-copy-100)}:host .b2b-anchor--inherit{font-size:inherit}";
+const anchorCss = ":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{z-index:0;width:fit-content;height:fit-content;position:relative}:host .b2b-anchor{font-family:var(--b2b-font-family-default);color:var(--b2b-color-copy-default);transition:all 0.3s ease;z-index:1001;position:relative}:host .b2b-anchor--100{font-size:var(--b2b-size-copy-100)}:host .b2b-anchor--inherit{font-size:inherit}:host .b2b-anchor-hover--default:hover{color:var(--b2b-color-red-100);cursor:pointer}:host .b2b-anchor-hover--inherit:hover{color:inherit;cursor:pointer}:host .b2b-anchor--underline-text{text-decoration:underline}:host .b2b-anchor:not(.b2b-anchor--underline-text){text-decoration:none}";
 const B2bAnchorStyle0 = anchorCss;
 
 const AnchorComponent = class {
@@ -10,12 +10,16 @@ const AnchorComponent = class {
         this.download = null;
         this.target = 'self';
         this.size = 'inherit';
+        this.hoverColor = 'default';
+        this.underlineText = true;
     }
     render() {
-        return (h(Host, { key: '8957a16aaa8ac0157e279eba36ce4467462bc700' }, h("a", { key: '462c69b00d9c1c1d49f3e7db364080ae313a7da4', href: this.href, download: this.download, target: `_${this.target}`, class: {
+        return (h(Host, { key: '60d94771fa6bf9cf9d8e688ecd7eba179a8e28a3' }, h("a", { key: 'f18239735b64a33cf80167e98a8cec01c0b42fb3', href: this.href, download: this.download, target: `_${this.target}`, class: {
                 'b2b-anchor': true,
                 [`b2b-anchor--${this.size}`]: true,
-            } }, h("slot", { key: '3f17a63ebba35fc753b019a78f48c69040eed88e' }))));
+                [`b2b-anchor-hover--${this.hoverColor}`]: true,
+                'b2b-anchor--underline-text': this.underlineText,
+            } }, h("slot", { key: '9bc35228a2265b620e8e32adf9ea8040cf259192' }))));
     }
 };
 AnchorComponent.style = B2bAnchorStyle0;