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

package/dist/components/b2b-background-box.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const backgroundBoxCss = ":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-background-box){display:block;background:var(--b2b-color-background-box);border:var(--b2b-size-1) solid var(--b2b-color-border-100);padding:1.5rem}:host(.b2b-background-box--fixed-width.b2b-background-box--no-padding){width:75.75rem;padding:unset}:host(.b2b-background-box--fixed-width){width:72.75rem}:host(.b2b-background-box--no-padding){padding:unset}";
+const B2bBackgroundBoxStyle0 = backgroundBoxCss;
+
+const BackgroundBoxComponent = /*@__PURE__*/ proxyCustomElement(class BackgroundBoxComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.fixedWidth = false;
+        this.noPadding = false;
+    }
+    render() {
+        return (h(Host, { key: '1f8a3145f20472c4dff860e0f7d6c8da53c01b68', class: {
+                'b2b-background-box': true,
+                'b2b-background-box--fixed-width': this.fixedWidth,
+                'b2b-background-box--no-padding': this.noPadding,
+            } }, h("slot", { key: '102e4dcc6ebfc7da635876a17f8c26abfeff6bda' })));
+    }
+    get host() { return this; }
+    static get style() { return B2bBackgroundBoxStyle0; }
+}, [1, "b2b-background-box", {
+        "fixedWidth": [4, "fixed-width"],
+        "noPadding": [4, "no-padding"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["b2b-background-box"];
+    components.forEach(tagName => { switch (tagName) {
+        case "b2b-background-box":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BackgroundBoxComponent);
+            }
+            break;
+    } });
+}
+
+const B2bBackgroundBox = BackgroundBoxComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bBackgroundBox, defineCustomElement };

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

@@ -28,7 +28,7 @@ const BreadCrumbItemComponent = /*@__PURE__*/ proxyCustomElement(class BreadCrum
         this.active = false;
     }
     render() {
-        return (h(Host, { key: '14cf113de1f545c3a7a50c17213575da72fb33b6', onClick: this.onClick, onKeyDown: this.onKeyDown, tabindex: Boolean(this.href) ? null : 0 }, h("span", { key: '45b0c5e15365bd59f67b8a268d89d2efbcd17fb7', class: {
+        return (h(Host, { key: 'a0e98de57d8664a9a360fba87f0bd54ceaa26f45', onClick: this.onClick, onKeyDown: this.onKeyDown, tabindex: Boolean(this.href) ? null : 0 }, h("span", { key: '18df4ab47446ea909c073956309c7892907f4bb6', class: {
                 'b2b-breadcrumb-nav__item': true,
                 'b2b-breadcrumb-nav__item--active': this.active,
             } }, this.href != null ? (h("a", { href: this.href }, h("slot", null))) : (h("slot", null)))));

package/dist/components/b2b-breadcrumb.js

@@ -24,7 +24,7 @@ const B2bBreadCrumbComponent = /*@__PURE__*/ proxyCustomElement(class B2bBreadCr
         this.b2bSelected.emit({ value: item.value });
     }
     render() {
-        return (h(Host, { key: '495deff042575a6bb99f467ba2507b05a6d79580' }, h("div", { key: '029aa9765e80589749554fde2910a492a322276c', class: "b2b-breadcrumb-nav" }, h("slot", { key: '72366fb19f127110554b666ac7c39631facda614' }))));
+        return (h(Host, { key: '85cfe1a842969f685907a5ba9d89bf32b657db0a' }, h("div", { key: 'd950765604d9d70f621c4f55679eb3ae1181b7bc', class: "b2b-breadcrumb-nav" }, h("slot", { key: '5152ff6e88663e4b893f7cd0a640dbd9683aa722' }))));
     }
     get host() { return this; }
     static get style() { return B2bBreadcrumbStyle0; }

package/dist/components/b2b-card.js

@@ -34,10 +34,10 @@ const CardComponent = /*@__PURE__*/ proxyCustomElement(class CardComponent exten
             return 0;
     }
     render() {
-        return (h(Host, { key: '6a3323a5f58c054a69080f6bec53bf8a29288a83', tabIndex: this.getTabIndex(), "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: 'f9fd7890d85a2c69fb416cacd1038a3e50ba8ce2', tabIndex: this.getTabIndex(), "aria-disabled": this.disabled ? 'true' : null, class: {
                 'b2b-card': true,
                 'b2b-card--disabled': this.disabled,
-            } }, this.href != '' && h("a", { href: this.href, target: `_${this.target}` }), this.disabled && h("div", { class: "b2b-card--disabled-overlay" }), h("slot", { key: '72a803fa506ce9f3a2a79e9fe677d4f8facb1d36' })));
+            } }, this.href != '' && h("a", { href: this.href, target: `_${this.target}` }), this.disabled && h("div", { class: "b2b-card--disabled-overlay" }), h("slot", { key: '1258394d2cf138a0625c70af043d4590a45262db' })));
     }
     get host() { return this; }
     static get style() { return B2bCardStyle0; }

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

@@ -74,11 +74,11 @@ const CheckboxGroupComponent = /*@__PURE__*/ proxyCustomElement(class CheckboxGr
         }
     }
     render() {
-        return (h(Host, { key: '17f56d642b6ef6a4157a51178c4e1d604755f698' }, h("div", { key: 'caf98c3c46fb753dad491e2b1e98ff212e7c6a93', class: {
+        return (h(Host, { key: 'a13345395b22ac918fcb5b4186f5bb3057af8ea4' }, h("div", { key: 'b388a4b209535c47c07b2720392abeb7191b0809', class: {
                 'b2b-checkbox-group': true,
                 'b2b-checkbox-group--error': this.invalid && !this.disabled,
                 [`b2b-checkbox-group--${this.alignment}`]: true,
-            } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", { key: '0b9b7dd931a8059a6ed0e53a49e799076e1d33ea' }, h("div", { key: '4385c56f2f7d570abfa58877b623b82f1006cafa', class: "b2b-checkbox-group__options" }, h("slot", { key: 'a15f2bd94e9167701a85cbf2981a268325bc4c85' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", { key: '33ed6a29fc0742e786d7f82c93dea89fdf0127b8' }, h("div", { key: 'da3884cbef485588a36ea6dd6c92f0dc0bdff138', class: "b2b-checkbox-group__options" }, h("slot", { key: 'c4f2ef006d5c8f04e45315526d076ca69a49026e' }))), (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 host() { return this; }

package/dist/components/b2b-date-picker.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './date-picker-years.js';
 import { d as defineCustomElement$3 } from './headline.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const datePickerCss = ":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-date-picker{position:relative;z-index:1000}:host .b2b-date-picker__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}:host .b2b-date-picker-input-focus-wrapper{width:100%;height:100%}:host .b2b-date-picker-input-focus-wrapper:hover{cursor:text}:host .b2b-date-picker-input-wrapper{display:flex;box-sizing:border-box;height:var(--b2b-size-90);border:var(--b2b-size-1) solid var(--b2b-color-grey-200);justify-content:flex-start;border-radius:var(--b2b-size-7);padding:var(--b2b-size-15) var(--b2b-size-20);max-width:600px;background-color:var(--b2b-color-white-100);transition:outline 0.2s ease-in-out, border-color 0.2s ease-in-out}:host .b2b-date-picker-input-wrapper--focused{outline:2px solid -webkit-focus-ring-color;outline-offset:-1px}:host .b2b-date-picker-input-wrapper--error{background-color:var(--b2b-color-error-50);border:1px solid var(--b2b-color-error-100);border-color:var(--b2b-color-error-100)}:host .b2b-date-picker-input-wrapper .b2b-date-picker-input{border:none;outline:none;box-shadow:none;box-sizing:border-box;margin-left:0;padding-left:0;height:100%;width:15%;color:var(--b2b-color-black-100);font-size:var(--b2b-size-35);line-height:var(--b2b-size-copy-line-height-100);font-weight:var(--b2b-font-weight-normal);font-family:var(--b2b-font-family-default)}:host .b2b-date-picker-input-wrapper .b2b-date-picker-input--error{background-color:var(--b2b-color-error-50)}:host .b2b-date-picker-selected-date{flex:1;align-self:center;font-size:var(--b2b-size-35)}:host .b2b-date-picker-label{font-size:var(--b2b-size-35);color:var(--b2b-color-black-100);line-height:var(--b2b-size-copy-line-height-100);margin-bottom:var(--b2b-size-5)}:host .b2b-date-picker-hint{font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75);display:block;margin-top:var(--b2b-size-7);color:var(--b2b-color-grey-300)}:host .b2b-date-picker-hint--error{color:var(--b2b-color-error-100)}:host .b2b-date-picker-body{position:relative;border-right:var(--b2b-size-1) solid var(--b2b-color-black-100);border-left:var(--b2b-size-1) solid var(--b2b-color-black-100);border-bottom:var(--b2b-size-1) solid var(--b2b-color-black-100);border-top:2px none -webkit-focus-ring-color;outline-offset:-1px;width:300px;box-sizing:border-box;padding-bottom:var(--b2b-size-40);outline:none;background-color:var(--b2b-color-white-100);z-index:900}:host .b2b-date-picker-body--hidden{display:none}:host .b2b-icons{display:flex;margin-top:var(--b2b-size-5);align-items:center}:host .b2b-close-icon{display:block}:host .b2b-event-icon{display:block}";
+const datePickerCss = ":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-date-picker{position:relative;z-index:1000}:host .b2b-date-picker__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}:host .b2b-date-picker-input-focus-wrapper{width:100%;height:100%}:host .b2b-date-picker-input-focus-wrapper:hover{cursor:text}:host .b2b-date-picker-input-wrapper{display:flex;box-sizing:border-box;height:var(--b2b-size-90);border:var(--b2b-size-1) solid var(--b2b-color-grey-200);justify-content:flex-start;border-radius:var(--b2b-size-7);padding:var(--b2b-size-15) var(--b2b-size-20);max-width:600px;background-color:var(--b2b-color-white-100);transition:outline 0.2s ease-in-out, border-color 0.2s ease-in-out}:host .b2b-date-picker-input-wrapper--focused{outline:2px solid -webkit-focus-ring-color;outline-offset:-1px}:host .b2b-date-picker-input-wrapper--error{background-color:var(--b2b-color-error-50);border:1px solid var(--b2b-color-error-100);border-color:var(--b2b-color-error-100)}:host .b2b-date-picker-input-wrapper .b2b-date-picker-input{border:none;outline:none;box-shadow:none;box-sizing:border-box;margin-left:0;padding-left:0;height:100%;width:100%;color:var(--b2b-color-black-100);font-size:var(--b2b-size-35);line-height:var(--b2b-size-copy-line-height-100);font-weight:var(--b2b-font-weight-normal);font-family:var(--b2b-font-family-default)}:host .b2b-date-picker-input-wrapper .b2b-date-picker-input--error{background-color:var(--b2b-color-error-50)}:host .b2b-date-picker-selected-date{flex:1;align-self:center;font-size:var(--b2b-size-35)}:host .b2b-date-picker-label{font-size:var(--b2b-size-35);color:var(--b2b-color-black-100);line-height:var(--b2b-size-copy-line-height-100);margin-bottom:var(--b2b-size-5)}:host .b2b-date-picker-hint{font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75);display:block;margin-top:var(--b2b-size-7);color:var(--b2b-color-grey-300)}:host .b2b-date-picker-hint--error{color:var(--b2b-color-error-100)}:host .b2b-date-picker-body{position:relative;border-right:var(--b2b-size-1) solid var(--b2b-color-black-100);border-left:var(--b2b-size-1) solid var(--b2b-color-black-100);border-bottom:var(--b2b-size-1) solid var(--b2b-color-black-100);border-top:2px none -webkit-focus-ring-color;outline-offset:-1px;width:300px;box-sizing:border-box;padding-bottom:var(--b2b-size-40);outline:none;background-color:var(--b2b-color-white-100);z-index:900}:host .b2b-date-picker-body--hidden{display:none}:host .b2b-icons{display:flex;margin-top:var(--b2b-size-5);align-items:center}:host .b2b-close-icon{display:block}:host .b2b-event-icon{display:block}";
 const B2bDatePickerStyle0 = datePickerCss;
 
 const B2bDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker extends HTMLElement {
@@ -33,6 +33,9 @@ const B2bDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker ext
             event.target.value = value;
             if (value.length === 10) {
                 this.parseDateInput(value);
+                if (this.invalid) {
+                    this.showDatePicker = false;
+                }
             }
         };
         this.handleKeyDown = (event) => {
@@ -135,6 +138,7 @@ const B2bDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker ext
         this.focused = false;
     }
     getPreviousMonth() {
+        this.invalid = false;
         if (this.selectedMonth === 0) {
             this.setCurrentMonth(11);
             this.setCurrentYear(this.selectedYear - 1);
@@ -151,7 +155,6 @@ const B2bDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker ext
         }
         if (!regex.test(dateString)) {
             this.invalid = true;
-            this.showDatePicker = false;
             this.errorMessage = this.FORMATTING_ERROR_MESSAGE;
             return;
         }
@@ -176,9 +179,13 @@ const B2bDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker ext
     }
     isValidDate(day, month, year) {
         const date = new Date(year, month - 1, day);
-        const isValidDay = day > 0 && day <= 31;
-        const isValidMonth = month > 0 && month <= 12;
-        const isValidYear = year > 0;
+        const isValidDay = date.getDate() === day;
+        const isValidMonth = date.getMonth() + 1 === month;
+        const isValidYear = date.getFullYear() === year && year >= 1900 && year <= 2100;
+        if (!isValidDay || !isValidMonth || !isValidYear) {
+            this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
+            return false;
+        }
         let isValidRange = true;
         if (this.disablePastDates && date < this.todayWithoutTime) {
             this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
@@ -192,7 +199,7 @@ const B2bDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker ext
             this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
             isValidRange = false;
         }
-        return isValidDay && isValidMonth && isValidYear && isValidRange;
+        return isValidRange;
     }
     emitSelectedDate() {
         this.b2bSelected.emit({
@@ -212,6 +219,7 @@ const B2bDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker ext
         this.invalid = false;
     }
     getNextMonth() {
+        this.invalid = false;
         if (this.selectedMonth === 11) {
             this.setCurrentMonth(0);
             this.setCurrentYear(this.selectedYear + 1);
@@ -261,6 +269,12 @@ const B2bDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker ext
             closeIcon.focus();
         }
     }
+    handleFocusOut() {
+        if (this.userInputDate === '' || this.invalid) {
+            return;
+        }
+        this.parseDateInput(this.userInputDate);
+    }
     moveFocusToInputComponent() {
         const inputElement = this.host.shadowRoot.querySelector('input.b2b-date-picker-input');
         if (inputElement !== undefined && !this.invalid) {
@@ -278,18 +292,19 @@ const B2bDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker ext
         }
     }
     render() {
-        return (h(Host, { key: '7ea0bab1a5248a56baed3368a265de5a23b355c3' }, h("div", { key: 'a8f65ab12856aedc945ab3c319975ac1f75f25a7', class: "b2b-date-picker" }, h("div", { key: '3af0484bf8c3e565efbce1de8426ac414042dc09', class: "b2b-date-picker-label" }, this.label), h("div", { key: '7056fceb98d55563a72ebb8795aecf335a44a4de', class: {
+        return (h(Host, { key: 'f55c64c00d67512d0e6c6f0e749fdc9868e44e41' }, h("div", { key: '31854fcd8b10c4349d7e8c3389be733368ca5f1a', class: "b2b-date-picker" }, h("div", { key: '2acd007a232a207870bec6e8ba944381dcdd28eb', class: "b2b-date-picker-label" }, this.label), h("div", { key: '2ae740717e19a9f1fe5a9946dbb6e891ef3103cd', class: {
                 'b2b-date-picker-input-wrapper': true,
                 'b2b-date-picker-input-wrapper--focused': this.focused || this.showDatePicker,
                 'b2b-date-picker-input-wrapper--error': this.invalid,
-            } }, h("div", { key: '73a4ac3ed6e8a288ac9d6efdb71fc199c2a1ac94', class: "b2b-date-picker-input-focus-wrapper", onClick: () => {
+            } }, h("div", { key: '81d58e40fc617d949442bf482bf1141c9968ed83', class: "b2b-date-picker-input-focus-wrapper", onClick: () => {
                 this.moveFocusToInputComponent();
-            } }, h("input", { key: 'a8f3612481383cdd641dab6643fd9faf38e11130', type: "text", tabindex: 0, class: {
+            } }, h("input", { key: '079990f5336387d1fdc473968f9ac0bd791bfdb0', type: "text", tabindex: 0, class: {
                 'b2b-date-picker-input': true,
                 'b2b-date-picker-input--error': this.invalid,
             }, value: this.userInputDate, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus, onBlur: () => {
                 this.focused = false;
-            } })), h("div", { key: '733646dc186b67c5095dd2a8e6bfde26b97550f9', class: "b2b-icons" }, this.userInputDate && (h("div", { tabIndex: 0, onClick: () => {
+                this.handleFocusOut();
+            } })), h("div", { key: '99cf6352447665b711284afb1f27e4d8dfc33b71', class: "b2b-icons" }, this.userInputDate && (h("div", { tabIndex: 0, onClick: () => {
                 this.invalid = false;
                 this.clearDateInput();
             }, class: "b2b-close-icon", onKeyDown: event => {
@@ -297,7 +312,7 @@ const B2bDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker ext
                     this.invalid = false;
                     this.clearDateInput();
                 }
-            } }, h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: 'bded26934ac03205ad84b2754480a17d36109ca1', tabindex: 0, onClick: () => {
+            } }, h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: '1c4ca8455db22ea02c4d5000c625ac6da44194c4', tabindex: 0, onClick: () => {
                 if (this.invalid) {
                     this.invalid = false;
                 }
@@ -309,9 +324,9 @@ const B2bDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker ext
                     }
                     this.showHideDatePicker();
                 }
-            }, class: "b2b-event-icon" }, h("b2b-icon", { key: 'aa66b59496916ca647894eed843a11898af331e0', "aria-label": this.showDatePicker
+            }, class: "b2b-event-icon" }, h("b2b-icon", { key: 'a0332088a5d68cd8e77f07d6ea2b079f34881e2f', "aria-label": this.showDatePicker
                 ? 'close date picker'
-                : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), h("div", { key: '07240a12f44e04a0c21301e90055463fd5438e77', class: {
+                : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), h("div", { key: '0b1d0a315fe80940f98a0d75df38b03a90175aaa', class: {
                 'b2b-date-picker-body': true,
                 'b2b-date-picker-body--hidden': !this.showDatePicker,
             } }, this.datePickerView === DatePickerView.Days && (h("div", null, h("b2b-date-picker-header", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear }), h("b2b-date-picker-days-header", null), h("b2b-date-picker-days", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear, selectedDay: this.selectedDay, disableWeekends: this.disableWeekends, disableFutureDates: this.disableFutureDates, disablePastDates: this.disablePastDates }))), this.datePickerView === DatePickerView.Months && (h("b2b-date-picker-months", { selectedMonth: this.selectedMonth })), this.datePickerView === DatePickerView.Years && (h("b2b-date-picker-years", { selectedYear: this.selectedYear }))), this.showDatePicker && (h("div", { class: "b2b-date-picker__backdrop", onClick: this.handleBackdropDismiss })), !this.showDatePicker && (h("span", { class: {

package/dist/components/b2b-dropdown.js

@@ -54,11 +54,11 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
         selectElement.append(...options);
     }
     render() {
-        return (h(Host, { key: '1a95b7db34185e8a97f17789555263e16c10236d', class: {
+        return (h(Host, { key: '5ab2b6da866b7dfa16a70986b930c4ab6c498820', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': this.invalid && !this.disabled,
                 'b2b-dropdown--disabled': this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { key: '06bc6f12dc93b0a39f1c086deba8eb10236888cf', class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { key: 'e086977e610c986f0d6f3539ed31fdee0d7229e7', class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (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-flyout-menu-option.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const flyoutMenuOptionCss = ":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;padding:var(--b2b-size-15) var(--b2b-size-30) 5px var(--b2b-size-30);border-bottom:1px solid transparent;cursor:pointer}:host(.b2b-flyout-menu__option:hover),:host(.b2b-flyout-menu__option:focus){background-color:var(--b2b-color-table-selected-hover);outline:none}:host(.b2b-flyout-menu__option--disabled){pointer-events:none;color:var(--b2b-color-grey-200)}:host(.b2b-flyout-menu__option--separator){border-bottom:1px solid var(--b2b-color-grey-200)}";
+const flyoutMenuOptionCss = ":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;padding:var(--b2b-size-15) var(--b2b-size-30) 5px var(--b2b-size-30);border-bottom:1px solid transparent;cursor:pointer}:host(.b2b-flyout-menu__option:hover),:host(.b2b-flyout-menu__option:focus){background-color:var(--b2b-color-hover);outline:none}:host(.b2b-flyout-menu__option--disabled):hover,:host(.b2b-flyout-menu__option--disabled:focus){background-color:transparent;color:var(--b2b-color-grey-200)}:host(.b2b-flyout-menu__option--disabled){pointer-events:none;color:var(--b2b-color-grey-200)}:host(.b2b-flyout-menu__option--separator){border-bottom:1px solid var(--b2b-color-grey-200)}";
 const B2bFlyoutMenuOptionStyle0 = flyoutMenuOptionCss;
 
 const FlyoutMenuOptionComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutMenuOptionComponent extends HTMLElement {
@@ -24,7 +24,7 @@ const FlyoutMenuOptionComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutM
         }
     }
     render() {
-        return (h(Host, { key: '28f1e7f603120f7e2c5d9e15685505796d249d84', class: {
+        return (h(Host, { key: '549433cce616c4ecaaa63f78a9d28f5c1d90a0d1', class: {
                 'b2b-flyout-menu__option': true,
                 'b2b-flyout-menu__option--disabled': this.disabled,
                 'b2b-flyout-menu__option--separator': this.separator,

package/dist/components/b2b-flyout-menu.js

@@ -56,8 +56,8 @@ const FlyoutMenuComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutMenuCom
         this.onEscapePress = () => {
             this.closeMenu();
         };
-        this.openMenu = () => {
-            this.opened = true;
+        this.toggleMenu = () => {
+            this.opened = !this.opened;
         };
         this.closeMenu = () => {
             this.opened = false;
@@ -88,12 +88,12 @@ const FlyoutMenuComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutMenuCom
         }
         // Manual event handler registration for focus events
         this.triggerEl = children[0];
-        this.triggerEl.addEventListener('click', this.openMenu, true);
+        this.triggerEl.addEventListener('click', this.toggleMenu, true);
         this.triggerEl.addEventListener('blur', this.blurMenu, true);
     }
     disconnectedCallback() {
         if (Boolean(this.triggerEl)) {
-            this.triggerEl.removeEventListener('click', this.openMenu, true);
+            this.triggerEl.removeEventListener('click', this.toggleMenu, true);
             this.triggerEl.removeEventListener('blur', this.blurMenu, true);
         }
     }
@@ -107,9 +107,9 @@ const FlyoutMenuComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutMenuCom
         event.target.tagName.toLowerCase() ===
             this.triggerEl.tagName.toLowerCase() &&
             event.key === 'Enter') {
-            this.openMenu();
+            this.toggleMenu();
         }
-        else if (Object.values(keys).includes(event.key)) {
+        else if (Object.values(keys).includes(event.key) && this.opened) {
             this.navigateMenu(event);
         }
     }
@@ -145,6 +145,20 @@ const FlyoutMenuComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutMenuCom
             default:
                 return;
         }
+        while (index >= 0 && index < options.length) {
+            const option = options[index];
+            if (!option.classList.contains('b2b-flyout-menu__option--disabled')) {
+                this.setCurrentOption(option);
+                option.focus();
+                return;
+            }
+            if (event.key === keys.ARROW_UP) {
+                index--;
+            }
+            else {
+                index++;
+            }
+        }
         if (index < 0) {
             index = options.length - 1;
         }
@@ -155,12 +169,12 @@ const FlyoutMenuComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutMenuCom
         options[index].focus();
     }
     render() {
-        return (h(Host, { key: '476aab5302f63eb5b0b53ae8430570c2c3d0d579' }, h("div", { key: '731fa9d43ab22557855da4ff971db304ccdf85dc', class: {
+        return (h(Host, { key: '0221c24624055988ea4d3e7e711279fd934f9167' }, h("div", { key: '78215ad3f534393a7a705164f0c3c3cc199a9ce7', class: {
                 'b2b-flyout-menu': true,
-            } }, h("div", { key: 'fc04fda1292925883ad13635ef30a3419bb25e4d', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '47d5e464c38b7313fdf25682408ea50c5ad71ab4', name: "trigger" })), h("div", { key: 'bf6c7c0c005ba3b0b584d51c0033c7afda09b2fe', onFocusout: this.blurMenu, class: {
+            } }, h("div", { key: '2b262f0fe4a9290bcf4e6bff5a7e35cb00a52612', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '27c068e13c042e0535742f2320f751d4935807f1', name: "trigger" })), h("div", { key: '38bb17d6acaa9c4abde9c7ca26d5746fa8a84269', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, h("div", { key: '7fd4e04f573aa7aeea7e5638e2f2ae664e44e947', class: "b2b-flyout-menu__arrow" }), h("slot", { key: '4e80b6752f017385a92f0a5a2fa7beae314c3833', name: "option" })))));
+            } }, h("div", { key: 'bbbac10e84d9274ba9084608d8912f8460063a3d', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'e9050bf99684d849acde201ab4b63f84b5a196db', name: "option" })))));
     }
     get hostElement() { return this; }
     static get style() { return B2bFlyoutMenuStyle0; }

package/dist/components/b2b-grid-col.js

@@ -28,7 +28,7 @@ const B2bGridColumnComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridCol
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: 'adc6b55dcffee8137649797d90001305e0c09118', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'cf855df802ea23e5dc748831706a2ba90d6fd3dc' })));
+        return (h(Host, { key: '923650dc316312d49a010748a44b65a59c62f545', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: '8dedf08da9c3953b285856309e36e27086598757' })));
     }
     get hostElement() { return this; }
 }, [1, "b2b-grid-col", {

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

@@ -11,7 +11,7 @@ const B2bGridRowComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridRowCom
         this.justify = 'start';
     }
     render() {
-        return (h(Host, { key: 'a44034babe40107c9f5f83d19c70736be7c13f4e', style: {
+        return (h(Host, { key: '891dbdd92aef674a5d1e1a7ce42abf4da97c9895', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -19,7 +19,7 @@ const B2bGridRowComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridRowCom
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: 'a28703ad381919403ebd72ee0a3be5635bd1068b' })));
+            } }, h("slot", { key: '4f50c8feefcae58bdbfb8c28836a3f8345c74b86' })));
     }
     get hostElement() { return this; }
 }, [1, "b2b-grid-row", {

package/dist/components/b2b-grid.js

@@ -11,7 +11,7 @@ const B2bGridComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridComponent
         this.margin = 24;
     }
     render() {
-        return (h(Host, { key: 'fbfee6601a0768961204e9bcc9d720c902641f55', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: 'ee658a5643b1d5d9a09afefbd110ee8f0bfdc18e' })));
+        return (h(Host, { key: '2f681d61d4000a20f28d8a6949190228413503e3', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: 'c72d3a5881a65e0c57a34572e5380550db57931c' })));
     }
     get hostElement() { return this; }
     static get style() { return B2bGridStyle0; }

package/dist/components/b2b-label.js

@@ -11,10 +11,10 @@ const LabelComponent = /*@__PURE__*/ proxyCustomElement(class LabelComponent ext
         this.type = 'neutral';
     }
     render() {
-        return (h("span", { key: '016a37426c256881557a80013caf2b131e45805c', class: {
+        return (h("span", { key: '00cdae31f74e594dc4d13a122d7b55bcd45284c8', class: {
                 'b2b-label': true,
                 [`b2b-label--${this.type}`]: true,
-            } }, h("slot", { key: '9b0c99450388a0f44e1682e1c959776131bdecfd' })));
+            } }, h("slot", { key: 'cd1c95c44ceef43337fb5142c2004c8136131755' })));
     }
     static get style() { return B2bLabelStyle0; }
 }, [1, "b2b-label", {

package/dist/components/b2b-modal.js

@@ -210,10 +210,10 @@ const ModalComponent = /*@__PURE__*/ proxyCustomElement(class ModalComponent ext
         this.attemptFocus(this.getFirstFocusableElement());
     }
     render() {
-        return (h(Host, { key: '5bd9bfb06f284ff43ed00f4b8312533d4557034b' }, h("div", { key: 'bd1e213955e5129db787ac5deb798e2520bb2a38', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: '38460346e59ae1679af9d745eb55e45a2f580bf7', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: '09ecdbdaed4b6a135810469b55b6a554250492fd', class: {
+        return (h(Host, { key: '26c534a73dc45383ee8420de1fc45644fae221c4' }, h("div", { key: 'a82dff4a2193cab229f6a9a20ad95cc46b371bc3', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: '9116aac091d277ec31a08834dcd3c745bc77ef73', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: '6e3f2284408e2e5a7c90b4e64cbc6e9db1c7df83', class: {
                 'b2b-modal__dialog': true,
                 [`b2b-modal__dialog--${this.variant}`]: true,
-            } }, h("div", { key: '07f02da5e3d9a692ac13591ef0bd151611658dac', class: "b2b-modal__dialog__header" }, h("div", { key: 'bb416331a33d2fb8bd2699da1ae60f337802ac03', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: '7b6ca2718fee5a5f0e9c68bc4c7d7369aa076798', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: 'f49eba5a02901b361a93ba1bf0b86d7fa85cc271', name: "header-icon" })), h("div", { key: 'd188df3c47771ea22f4d86a262c1655617eeef86', class: "b2b-modal__dialog__header-right" }, h("button", { key: '5d3779fc527982e7bd1b72b0aa3591e802483f52', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon", { key: '5b1874355079c976b60e170da079adba5d242092', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: 'de2c3c1bd2db5a9e6e7c05f412f2e52b01e6da87', class: "b2b-modal__dialog__body" }, h("slot", { key: '2133df17353f1ae1791b875fa1b616c8c2a8be53' })), h("div", { key: 'fc940582a01b28a86b6abdc1554dbfaef056e5ee', class: "b2b-modal__dialog__footer" }, h("div", { key: '842bd4abc05a189348b13d5cad6652dd3eaac048', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '089aea2e787f66fe5efccad23eb2c63e0ac5d9c8', name: "footer-left" })), h("div", { key: '59a97116777b4d7d1517220c1bd37f9bba7653b4', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '639ce0efe103ea0c2f7e5d930ab335884e8c7947', name: "footer-right" })))), h("div", { key: 'eb42810a65b73211f2437af9f7137de0bf4a5a0c', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: '9e289cffd2529a53ee390ad815e118b35a32c1e6', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
+            } }, h("div", { key: '2dc54886555233e1368122c95c7244b4aa47fb49', class: "b2b-modal__dialog__header" }, h("div", { key: 'b75c1300025054c455170eb5e69c7c38fc9eb9b0', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: 'e5cc2a12f707c9faa4c6f97bf36e4dc622fa0f10', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: '2e9b562c52ab1ac32795fce91d21687adc3d49a9', name: "header-icon" })), h("div", { key: '1d57c1d299494bd348617156017ab1f5c58b8d88', class: "b2b-modal__dialog__header-right" }, h("button", { key: 'b3808844a2c13c9624f86597d69e97c2924eba8a', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon", { key: '300c1aad8a590e0943e006e88d221fbf6ac5c254', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: 'e109dbbecc3679e5ce3848eea26a678fcb45b823', class: "b2b-modal__dialog__body" }, h("slot", { key: 'feb7c4672ec60eb7f8adb43b26730f3a5660d331' })), h("div", { key: 'c9cce54143969b42749fb5d4959e87dc01c7dedf', class: "b2b-modal__dialog__footer" }, h("div", { key: '63777edafa1f9c9889e62374becaded55bdd9e1b', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: 'c4dd516a2239c339798bc9400f62fb49f6ff44b3', name: "footer-left" })), h("div", { key: 'efc3456a4ecdad6d6d1ad459f8fa08b9e1fb3332', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: 'c9fd956127b120c272a67a1adc63ae2b62825f14', name: "footer-right" })))), h("div", { key: 'e51102b7631759a33663a22c79a499aff7c8709c', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: '820955f1df4115e803e2ad4222925e36cd5fd526', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/b2b-multiselect-dropdown.js

@@ -136,6 +136,7 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
         this.hasOptionList = this.optionsList.length > 0;
     }
     componentWillLoad() {
+        this.parseSelectedValuesAndOptionsList();
         this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
     }
     /** Needed to trigger a re-render for async data */
@@ -148,19 +149,30 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
     handleSelectedValuesChange(newValues) {
         this.b2bChange.emit(newValues);
     }
+    parseSelectedValuesAndOptionsList() {
+        if (typeof this.selectedValues === 'string') {
+            this.selectedValues = this.parseStringToArray(this.selectedValues);
+        }
+        if (typeof this.optionsList === 'string') {
+            this.optionsList = this.parseStringToArray(this.optionsList);
+        }
+    }
+    parseStringToArray(value) {
+        return JSON.parse(value.replace(/'/g, '"'));
+    }
     componentDidUpdate() {
         const options = this.getOptions();
         this.updateAllOptions(options);
         this.updateSelectAll(options);
     }
     render() {
-        return (h(Host, { key: '1a8ca50730e9be35d4e02155a728bde7a950d521', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '2f532ff808f401dbf0e60de63b41b7bc75c786b1' }, this.label), h("div", { key: '9b7d708bd9cfa8365fac138a3a355bd436c62384', class: {
+        return (h(Host, { key: '78a4b5a6c75288e7d009e040e9885da2cf6f4f02', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: 'ff95015ecdd660bdfac396c2669e50d41e85ff82' }, this.label), h("div", { key: '479cf3758d82775832ef1c530762f89a486cc028', class: {
                 'b2b-multiselect-dropdown': true,
                 'b2b-multiselect-dropdown--open': this.isElementFocused,
-            }, tabindex: 0, role: "combobox", "aria-expanded": this.isElementFocused }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (h("div", { class: "b2b-multiselect-dropdown__chip-container" }, this.renderChips())), h("b2b-icon", { key: '9fef7ebb99fccb302bb68e602ac3edb2cfd50e6f', icon: "b2b_icon-arrow-down" })), h("div", { key: '724e740fc4f0b7e16095b2fbb5c836aa10cd56f0', class: {
+            }, tabindex: 0, role: "combobox", "aria-expanded": this.isElementFocused }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (h("div", { class: "b2b-multiselect-dropdown__chip-container" }, this.renderChips())), h("b2b-icon", { key: '2bdceaeed0f5107d6c26cbdb4fc2718e4b32a77a', icon: "b2b_icon-arrow-down" })), h("div", { key: 'b5ed97c14ea1138cf5be5c28f7531f45dcdb0e28', class: {
                 'b2b-multiselect-dropdown__options-container': true,
                 'b2b-multiselect-dropdown__options-container--visible': this.isElementFocused,
-            } }, h("div", { key: '6e6fbff1c1009d9454c432ba12d0dc7ada0e335b', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'b9800273be5e1b2a7270e89d0421bac8619317f2', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: 'cc52025e06277156338a098e8e1939a45367f060', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '6f02ecc6c4787fcf400580d8dc6c2eab6ec5a3c9', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+            } }, h("div", { key: 'c5637e174624e04ab0bd346e648559b6a1b1301d', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'db310f71fe7b9e8e51ff975b135a2c90c6cd2d87', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '5a0042c6dc0d01fa38ea0ac9ce3005fb91704df0', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '98bc2d69cdac70fb726b64945344baf4af44121b', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
             this.currentList.map(option => (h("b2b-multiselect-option", { "onB2b-option-selected": this.handleSelectedChange, option: option })))))));
     }
     get hostElement() { return this; }
@@ -172,8 +184,8 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
 }, [1, "b2b-multiselect-dropdown", {
         "label": [1],
         "placeholder": [513],
-        "selectedValues": [16],
-        "optionsList": [16],
+        "selectedValues": [1, "selected-values"],
+        "optionsList": [1, "options-list"],
         "searchPlaceholder": [1, "search-placeholder"],
         "selectAllLabel": [1, "select-all-label"],
         "maxOptionsVisible": [2, "max-options-visible"],

package/dist/components/b2b-pagination.js

@@ -108,7 +108,7 @@ const PaginationComponent = /*@__PURE__*/ proxyCustomElement(class PaginationCom
         };
     }
     render() {
-        return (h("nav", { key: 'ef3a8d7c330c746ab003fea70100c0cb68b3f237' }, h("ol", { key: 'a327642f2638275ed7bdf4682b2999d6d014b7e4', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { class: "b2b-pagination--previous" }, h("b2b-button", { onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, PaginationConstants.BACK))), this.navItems.map((navItem, index) => {
+        return (h("nav", { key: '5b21b9fc90454d5733d5a95db08d57fbf7c7099d' }, h("ol", { key: '8322f26d437809e21912edb81a6da363bf36ff4c', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { class: "b2b-pagination--previous" }, h("b2b-button", { onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, PaginationConstants.BACK))), this.navItems.map((navItem, index) => {
             const isItemActive = this.activePage === navItem;
             return (h("li", { class: this.getItemClass(navItem) }, h("b2b-button", { onClick: () => this.setSelectedPage(navItem, index), active: isItemActive, disabled: isItemActive, size: "50", variant: "secondary" }, navItem)));
         }), this.activePage !== this.totalPages && (h("li", { class: "b2b-pagination--next" }, h("b2b-button", { onClick: this.selectNextPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelNextPage }, PaginationConstants.NEXT))))));