@otto-de/b2b-core-components 1.35.0 → 1.37.0

package/dist/collection/components/textarea/textarea.js

@@ -45,10 +45,10 @@ export class B2BTextareaComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'b5ecf98b41d74602941e9b3a5a22962e7c6c94d9', class: {
+        return (h(Host, { key: 'ded78634398ff5e016645b0eceb54414a0fb1280', 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: '1cb84cd64595ee68ca04e62f5b587ef9eef3ff3e', 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.focusOnLoad, 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: '0a0f55fca870e52ea12d2f2ac23a4942752d26a8', 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.focusOnLoad, 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)) : ('')));
     }
     static get is() { return "b2b-textarea"; }

package/dist/collection/components/time-picker/time-picker.js

@@ -109,23 +109,23 @@ export class TimePickerComponent {
         return times;
     }
     render() {
-        return (h(Host, { key: '82d85e61e12453aa332eb1771c2ecacf84a93bce', class: {
+        return (h(Host, { key: '60186f73f9b29e97a12cae3d21677a93e9d2cc2e', class: {
                 'b2b-time-picker': true,
                 'b2b-time-picker--error': this.isInvalid,
-            } }, this.label && (h("b2b-input-label", { id: this.label, required: this.required }, this.label)), h("div", { key: 'e6e70210043bd5c220c03610ab4681378889b075', class: {
+            } }, this.label && (h("b2b-input-label", { id: this.label, required: this.required }, this.label)), h("div", { key: 'ba780bb83b8b29fbf954a3fcc9d3d24e1fb00d47', class: {
                 'b2b-time-picker__wrapper': true,
                 'b2b-time-picker__wrapper--focused': this.hasFocus,
                 'b2b-time-picker__wrapper--filled': !this.hasFocus && !this.invalid && this.value !== '',
                 'b2b-time-picker__wrapper--error': this.isInvalid,
-            } }, h("input", { key: '91994a1908b2c5dd5886c442fd5a3ca6415f3619', ref: el => (this.inputRef = el), class: {
+            } }, h("input", { key: 'b7c954dcc95b39ba1243c0594af865aeb8f5e556', ref: el => (this.inputRef = el), class: {
                 'b2b-time-picker__native-input': true,
-            }, type: "text", placeholder: this.placeholder, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput }), h("div", { key: '4052c5c017944c767ccbf286dd4de11e74509848', class: "b2b-icons" }, this.value && (h("div", { class: "b2b-close-icon", onClick: this.onClear }, h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: '92996f5e06fc7e325088d09185b4496a00df68f5', class: "b2b-duration-icon", onMouseDown: e => {
+            }, type: "text", placeholder: this.placeholder, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput }), h("div", { key: '2174ef2f4795544c109934bba08b5bf5589ad970', class: "b2b-icons" }, this.value && (h("div", { class: "b2b-close-icon", onClick: this.onClear }, h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: '6a0b79eeb95e89fd4e1ae7650fc6894fe9995716', class: "b2b-duration-icon", onMouseDown: e => {
                 e.preventDefault();
                 this.toggleDropdown();
-            } }, h("b2b-icon-100", { key: 'e24b25b79ef06002af8ce83ecf41e88b967ca4ed', icon: "b2b_icon-duration", clickable: true })))), h("div", { key: 'e3154f9b414215660041e6779668c0bb50f06284', class: {
+            } }, h("b2b-icon-100", { key: '4d2c4ac3c85e7186f02c1ace46e0f52b32b3867e', icon: "b2b_icon-duration", clickable: true })))), h("div", { key: '05643f9d3d325a0d145b5f75a5295e3772b317a2', class: {
                 'b2b-time-picker__options-container': true,
                 'b2b-time-picker__options-container--visible': this.isOpen && this.hasFocus,
-            }, onMouseDown: e => e.preventDefault() }, h("div", { key: '92e172240eaae8ddb7cef7dab5aaf02b55df44ea', class: "b2b-time-picker__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, this.availableTimes.map(time => (h("div", { key: time, class: {
+            }, onMouseDown: e => e.preventDefault() }, h("div", { key: '2f3d104f3c8b91f828195d17a493ae085098ffb2', class: "b2b-time-picker__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, this.availableTimes.map(time => (h("div", { key: time, class: {
                 'b2b-time-picker__option': true,
                 'b2b-time-picker__option--selected': time === this.value,
             }, "data-value": time, onClick: this.onSelect, role: "option", "aria-selected": time === this.value ? 'true' : 'false' }, time))))), h("span", { class: {

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

@@ -31,13 +31,13 @@ export class B2bToggleButtonComponent {
         return Array.from(document.querySelectorAll(`b2b-toggle-button[name="${this.name}"]`)).filter((toggle) => toggle.value !== this.value);
     }
     render() {
-        return (h(Host, { key: '087925aae07f41b1fe50efb4dceda7e3e48849bc', onClick: this.onClick }, h("span", { key: 'e85fea0b039ff481a18a8e194480e5432fcc6b80', class: {
+        return (h(Host, { key: '653a99cf2670e048d4486f4c58a6b362777f1542', onClick: this.onClick }, h("span", { key: 'bf6c3226b73ac9d033c6479e5ddf0a2366c51a65', class: {
                 'b2b-toggle-button': true,
                 'b2b-toggle-button--disabled': this.disabled,
-            } }, h("input", { key: 'd50119c68578e8db12e49a8a408c8b7b2611ea29', tabindex: 0, class: {
+            } }, h("input", { key: '74ac055cf0fc0cb192c38fa288d20892a77eb662', 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: 'bc66888b0740d13031c0467717af4e76c4d19a67', 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: '56246f69a36f044a58e735a3a2e3bbacc95d285c', 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/collection/components/toggle-chip/toggle-chip.js

@@ -32,11 +32,11 @@ export class B2BToggleChipComponent {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '9b02a8f340b5531879187d4ac97fccb6ae619a69' }, h("span", { key: '59994cb3e4c28bdf673d329d12d0e56e628c140b', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
+        return (h(Host, { key: '9ccaee0a0cef686481b529812736efebdda24ccf' }, h("span", { key: 'df149ca80ecabd2696d7f794577881128c85cb96', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
                 'b2b-toggle-chip': true,
-            } }, h("input", { key: '7492ffd930e3ebb62f3df0cece70b2cc232444df', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
+            } }, h("input", { key: 'b4402e6fce941fef4e60278df3e4997d33e15ac4', "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: 'c47d4a9483d9bccdd16722af2fd74e50f8a10257', 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: 'a178fcabcba44be3fff977fe9236d6e46783bcb1', id: this.name, tabIndex: -1, class: {
                 'b2b-toggle-chip__label': true,
                 'b2b-toggle-chip__label--active': this.active && !this.disabled,
                 'b2b-toggle-chip__label--disabled': this.disabled,

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

@@ -45,10 +45,10 @@ export class B2BToggleGroup {
         }
     }
     render() {
-        return (h(Host, { key: '99ff703edae5a8759af9e4b9093c2db32108d2cd' }, h("div", { key: 'f4b20d4fcf809ec622688866ae736233d16d90ee', class: {
+        return (h(Host, { key: 'b6ad87b079d1935b0b033398f89f0a9eeff68ede' }, h("div", { key: '600ccfd8b2b9db697b555f326a327b9827970e96', class: {
                 'b2b-toggle-group': true,
                 'b2b-toggle-group--disabled': this.disabled,
-            } }, h("fieldset", { key: '97ec3070e1935d8803c8e3b7bac17f3eb92864f1' }, h("slot", { key: '787e72239b2f2300a1150787044ad5fe38c6588e' })))));
+            } }, h("fieldset", { key: '214687f6e5655437a8dba0d6c29ce8c12b5c9c9f' }, h("slot", { key: 'e8076f9a98cef4463a51d9dd58222825a5d7bc47' })))));
     }
     static get is() { return "b2b-toggle-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,17 +38,17 @@ export class B2bToggleSwitchComponent {
     render() {
         // workaround for purgecss as safelist doesn't work
         const isLeft = this.labelPosition === 'left';
-        return (h(Host, { key: '5a9a846632b7b3cca02a79a9ed043f5ab9d1c6fa' }, h("div", { key: '115479ac6e5df73f04d6f73e01a541c805a31a63', class: {
+        return (h(Host, { key: '0fb3a7738b62a225aea9fea30df20fdcdf7c6119' }, h("div", { key: 'e60e0c5935631c0a15679aa852bf6942247e579a', class: {
                 'b2b-toggle': true,
                 'b2b-toggle--disabled': this.disabled,
                 'b2b-toggle--checked': this.state,
-            } }, h("div", { key: 'cf530d51f4fd327135935ea500193031dedefe4e', class: {
+            } }, h("div", { key: 'c73c7c7cb6adc85a9d8701bc6940b989bb82b69f', class: {
                 'b2b-toggle__label': true,
                 'b2b-toggle__label--left': isLeft,
-            } }, h("span", { key: 'f758117b3dbf6256bfc810dc818c63e7aa5f5597', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: '08626107d93016092543c78e25c82abd0fea42f3', class: {
+            } }, h("span", { key: 'e8b511f2df1a46c6a030dd3e40b7a48b5bf255f3', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: '0bdb4fb71ce5790c5c5200126ff82505d630daee', 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: 'a57ece77901fca3e09462f88cedd7d9407d7a91c', 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: 'd3e0752bd7352e84dfb29ac7ebab158db2143042', 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/collection/components/tooltip/tooltip.js

@@ -59,13 +59,13 @@ export class B2BTooltipComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'd433aa3cbd4216722933e50fd2613afb8be0a32a', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: '31a5bc21f1adc031dc0d92732659138bf4e27681', class: {
+        return (h(Host, { key: '5ad13130ded48a0b23ff30d04152857f55b7714f', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: '83290fe4eb64980eb748e08615e739a57ca46b73', class: {
                 [`b2b-tooltip--${this.position}`]: true,
                 'b2b-tooltip__trigger': true,
-            } }, h("slot", { key: 'bbec9da1933c391822594f5d555bcefe316c02f3' }), h("div", { key: '4697390b2e16363008a437b9b1af37ea82ee2660', class: {
+            } }, h("slot", { key: 'a1c8efba4056c1e78abdcacb3071bf699fab24a4' }), h("div", { key: '70c0d20ef0ad32c586e6b2f49118fb4744a9c82f', class: {
                 'b2b-tooltip__content': true,
                 'b2b-tooltip--visible': this.opened,
-            } }, h("slot", { key: '2e78f5e154563a7c0e9d2e1067e00aa56991ae0c', name: "content" }, this.content)))));
+            } }, h("slot", { key: '108e7b2e99209bb450da987149dbe835a6183629', name: "content" }, this.content)))));
     }
     static get is() { return "b2b-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,10 +7,10 @@ export class WizardStepComponent {
         this.checkIcon = true;
     }
     render() {
-        return (h(Host, { key: '6748e7f67b3cec569003e9b99c413dbdfb99f402' }, h("div", { key: '2ab2e6f5f76238bbe5e943551c7b0fb36df9d121', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: '13b0071f3d02918551d65e22fb1511f3ca666926', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: '416cef0fe8bee41e1ee1b566ed5b9b7bc6469fb4', class: {
+        return (h(Host, { key: '4ee464a50a56224fad021de974d85676f85cf67d' }, h("div", { key: '41289234f28e97f25408c7fd886bd8c197a17273', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: '5f0ff339a49b714145ac86fae4991dd3a408b872', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: '74467018cc4ae1ced3b0b64b14c2634d8ca1b73a', class: {
                 'b2b_wizard__step__label': true,
                 'b2b_wizard__step__label--default': this.state === WizardStatus.DEFAULT,
-            } }, h("slot", { key: 'f06b1de799fc54b8ece414795b7ab0750a382108' })))));
+            } }, h("slot", { key: 'c2df37960e8c4e8591f426d6809094a58cf93a25' })))));
     }
     static get is() { return "b2b-wizard-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wizard/wizard.js

@@ -44,7 +44,7 @@ export class WizardComponent {
             this.setStepsState();
     }
     render() {
-        return (h(Host, { key: '489668ca4d9f27816d504f8238131697c0fe3857' }, h("div", { key: '984c7faaaf101d267b9fb89e2dd60ef4046a6443', class: "b2b_wizard" }, h("slot", { key: '87ab15ff841b158a6874cec12c4ab8c19f78df01' }))));
+        return (h(Host, { key: 'dbfbc0987d3e4bd7b07b47451ea4096e53ea3d16' }, h("div", { key: '3481034aa0be88d4bec040dac7ccfbbfe7485264', class: "b2b_wizard" }, h("slot", { key: '6c8ebd923230dc7439191de20bd310486575725c' }))));
     }
     static get is() { return "b2b-wizard"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class WizardIconComponent {
         this.checkIcon = true;
     }
     render() {
-        return (h(Host, { key: '364653c4305a1b9a2fe5deb3ec866d98e281cee4' }, h("div", { key: '20adef4ae0389dfd7167df3876bcdeccda855073', class: {
+        return (h(Host, { key: '2b192e2eccfee0dd27006039ba0f8e3878e296db' }, h("div", { key: '79d0eb8d6713117b69643e745e07f2b2feb23b01', 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-100", { 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/components/b2b-dropdown.js

@@ -1,7 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './icon-100.js';
+import { d as defineCustomElement$3 } from './input.js';
 import { d as defineCustomElement$2 } from './input-label.js';
 
-const dropdownCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@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-dropdown){--b2b-border-radius:var(--b2b-size-border-radius-100);--b2b-border-right:1px solid var(--b2b-color-grey-200);display:block;position:relative;width:100%;min-width:fit-content;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);max-width:600px}:host(.b2b-dropdown) .b2b-dropdown__wrapper{display:flex;position:relative;width:100%;box-sizing:border-box;flex:1}:host(.b2b-dropdown) .b2b-dropdown__select{font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);appearance:none;background-color:var(--b2b-color-white-100);background-image:url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path d=\"M27.748 12.017l-11.333 9.01a.666.666 0 0 1-.829 0l-11.333-9a.665.665 0 1 1 .829-1.044l10.919 8.671 10.919-8.68a.663.663 0 0 1 .936.107.667.667 0 0 1-.107.937z\"/></svg>');background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5rem;width:100%;min-width:fit-content;border:1px solid var(--b2b-color-grey-200);border-right:var(--b2b-border-right);border-radius:var(--b2b-border-radius);padding:7px 11px 6px;padding-right:calc(1.75rem + 6px);height:var(--b2b-size-90);line-height:var(--b2b-size-copy-line-height-100);box-sizing:border-box;text-align:left;overflow-x:auto;overflow-y:hidden}:host(.b2b-dropdown) .b2b-dropdown__select--focused{outline:2px solid Highlight;outline:2px solid -webkit-focus-ring-color;border-radius:var(--b2b-border-radius);outline-offset:-1px;z-index:300}:host(.b2b-dropdown) .b2b-dropdown__select--open{outline:2px solid Highlight;outline:2px solid -webkit-focus-ring-color;border-radius:var(--b2b-border-radius);outline-offset:-1px;z-index:1001}:host(.b2b-dropdown) .b2b-dropdown__options{display:block;background-color:var(--b2b-color-white-100);max-height:288px;overflow-y:auto;margin:0;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);margin-top:0;border-top:none;text-align:left;top:100%;position:absolute;left:0;right:0;width:100%;z-index:1000;box-sizing:border-box;white-space:pre-wrap}:host(.b2b-dropdown) .b2b-dropdown__option{padding:10px;cursor:pointer;font-size:var(--b2b-size-copy-100);margin-top:0;border-top:none;display:block;width:100%;box-sizing:border-box}:host(.b2b-dropdown) .b2b-dropdown__option:hover{background-color:var(--b2b-color-hover-default)}:host(.b2b-dropdown) .b2b-dropdown__option--disabled{color:var(--b2b-color-grey-250);background-color:var(--b2b-color-white-100);pointer-events:none}:host(.b2b-dropdown) .b2b-dropdown__option--selected{background-color:var(--b2b-color-black-100);color:var(--b2b-color-white-100)}:host(.b2b-dropdown) b2b-input-label{display:block;margin-bottom:var(--b2b-size-5)}:host(.b2b-dropdown) span{display:block;color:var(--b2b-color-grey-300);margin-top:var(--b2b-size-10);font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75)}:host(.b2b-dropdown--error) .b2b-dropdown__select{background-color:var(--b2b-color-error-50);border:1px solid var(--b2b-color-error-100);border-right:var(--b2b-border-right);border-color:var(--b2b-color-error-100)}:host(.b2b-dropdown--error) .b2b-dropdown__select:focus{outline:2px solid var(--b2b-color-error-100);outline-offset:-1px}:host(.b2b-dropdown--error) span{color:var(--b2b-color-error-100)}:host(.b2b-dropdown--disabled) .b2b-dropdown__select{background-image:url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"grey\" viewBox=\"0 0 32 32\"><path d=\"M27.748 12.017l-11.333 9.01a.666.666 0 0 1-.829 0l-11.333-9a.665.665 0 1 1 .829-1.044l10.919 8.671 10.919-8.68a.663.663 0 0 1 .936.107.667.667 0 0 1-.107.937z\"/></svg>');background-color:var(--b2b-color-grey-25);color:var(--b2b-color-grey-250);border-color:var(--b2b-color-grey-200);opacity:1}";
+const dropdownCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@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-dropdown){--b2b-border-radius:var(--b2b-size-border-radius-100);--b2b-border-right:1px solid var(--b2b-color-grey-200);display:block;position:relative;width:100%;min-width:fit-content;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);max-width:600px}:host(.b2b-dropdown) .b2b-dropdown__wrapper{display:flex;position:relative;width:100%;box-sizing:border-box;flex:1}:host(.b2b-dropdown) .b2b-dropdown__clear-icon{position:absolute;right:3rem;top:40%;transform:translateY(-50%);width:1rem;height:1rem;cursor:pointer;z-index:2}:host(.b2b-dropdown) .b2b-dropdown__select{font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);appearance:none;background-color:var(--b2b-color-white-100);background-image:url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path d=\"M27.748 12.017l-11.333 9.01a.666.666 0 0 1-.829 0l-11.333-9a.665.665 0 1 1 .829-1.044l10.919 8.671 10.919-8.68a.663.663 0 0 1 .936.107.667.667 0 0 1-.107.937z\"/></svg>');background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5rem;width:100%;min-width:fit-content;border:1px solid var(--b2b-color-grey-200);border-right:var(--b2b-border-right);border-radius:var(--b2b-border-radius);padding:7px 11px 6px;padding-right:calc(1.75rem + 6px);height:var(--b2b-size-90);line-height:var(--b2b-size-copy-line-height-100);box-sizing:border-box;text-align:left;overflow-x:auto;overflow-y:hidden;align-items:center}:host(.b2b-dropdown) .b2b-dropdown__select--focused{outline:2px solid Highlight;outline:2px solid -webkit-focus-ring-color;border-radius:var(--b2b-border-radius);outline-offset:-1px;z-index:300}:host(.b2b-dropdown) .b2b-dropdown__select--open{outline:2px solid Highlight;outline:2px solid -webkit-focus-ring-color;border-radius:var(--b2b-border-radius);outline-offset:-1px;z-index:1001}:host(.b2b-dropdown) .b2b-dropdown__options{display:block;background-color:var(--b2b-color-white-100);max-height:288px;overflow-y:auto;margin:0;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);margin-top:0;border-top:none;text-align:left;top:100%;position:absolute;left:0;right:0;width:100%;z-index:1000;box-sizing:border-box;white-space:pre-wrap}:host(.b2b-dropdown) .b2b-dropdown__option{padding:10px;cursor:pointer;font-size:var(--b2b-size-copy-100);margin-top:0;border-top:none;display:block;width:100%;box-sizing:border-box}:host(.b2b-dropdown) .b2b-dropdown__option:hover{background-color:var(--b2b-color-hover-default)}:host(.b2b-dropdown) .b2b-dropdown__option--disabled{color:var(--b2b-color-grey-250);background-color:var(--b2b-color-white-100);pointer-events:none}:host(.b2b-dropdown) .b2b-dropdown__option--selected{background-color:var(--b2b-color-black-100);color:var(--b2b-color-white-100)}:host(.b2b-dropdown) b2b-input-label{display:block;margin-bottom:var(--b2b-size-5)}:host(.b2b-dropdown) span{display:block;color:var(--b2b-color-grey-300);margin-top:var(--b2b-size-10);font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75)}:host(.b2b-dropdown--error) .b2b-dropdown__select{background-color:var(--b2b-color-error-50);border:1px solid var(--b2b-color-error-100);border-right:var(--b2b-border-right);border-color:var(--b2b-color-error-100)}:host(.b2b-dropdown--error) .b2b-dropdown__select:focus{outline:2px solid var(--b2b-color-error-100);outline-offset:-1px}:host(.b2b-dropdown--error) span{color:var(--b2b-color-error-100)}:host(.b2b-dropdown--disabled) .b2b-dropdown__select{background-image:url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"grey\" viewBox=\"0 0 32 32\"><path d=\"M27.748 12.017l-11.333 9.01a.666.666 0 0 1-.829 0l-11.333-9a.665.665 0 1 1 .829-1.044l10.919 8.671 10.919-8.68a.663.663 0 0 1 .936.107.667.667 0 0 1-.107.937z\"/></svg>');background-color:var(--b2b-color-grey-25);color:var(--b2b-color-grey-250);border-color:var(--b2b-color-grey-200);opacity:1}";
 const B2bDropdownStyle0 = dropdownCss;
 
 const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownComponent extends HTMLElement {
@@ -29,6 +31,12 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
             this.focused = false;
             this.b2bBlur.emit(ev);
         };
+        this.clearSelectedValue = (event) => {
+            event.stopPropagation();
+            this.clearSelection();
+            this.searchValue = '';
+            this.b2bChange.emit(this.placeholderValue);
+        };
         this.onSelect = (event) => {
             var _a;
             const target = event.target;
@@ -57,7 +65,8 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
             }
         };
         this.updateTruncatedText = () => {
-            const rawText = this.selectedText || this.placeholder;
+            const inputValue = this.search ? '' : this.placeholder;
+            const rawText = this.selectedText || inputValue;
             if (this.selectEl == null) {
                 this.truncatedText = rawText;
                 return;
@@ -92,7 +101,36 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
             }
             this.truncatedText = truncated + '…';
         };
+        this.handleSearchInput = (event) => {
+            if (this.selectedText &&
+                event.target.value !== this.selectedText) {
+                this.selectedText = '';
+                this.selectedValue = this.placeholderValue;
+                this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: false })));
+            }
+            this.searchValue = event.target.value;
+            this.isOpen = true;
+        };
+        this.toggleDropdownWithSearch = (event) => {
+            event.stopPropagation();
+            this.toggleDropdown();
+            if (this.isOpen) {
+                this.focusSearchInput();
+            }
+        };
+        this.focusSearchInput = () => {
+            var _a, _b;
+            const inputComponent = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('b2b-input');
+            if (inputComponent != null) {
+                const inputElement = (_b = inputComponent.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+                if (inputElement != null) {
+                    inputElement.focus();
+                }
+            }
+        };
         this.label = undefined;
+        this.search = false;
+        this.clear = false;
         this.required = false;
         this.name = undefined;
         this.placeholder = 'Select an option...';
@@ -107,6 +145,7 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
         this.selectedValue = '';
         this.selectedText = '';
         this.options = [];
+        this.searchValue = '';
         this.truncatedText = '';
     }
     /** Method to programmatically clear selection of the dropdown. */
@@ -183,15 +222,25 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
         const hasError = this.invalid && !this.disabled && !this.groupDisabled;
         const showHint = this.hint && !hasError;
         const showError = this.error && hasError;
-        return (h(Host, { key: 'd8d3296f63b4cd704e43ae30e465589d14445ec2', class: {
+        const filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(this.searchValue.toLowerCase()));
+        return (h(Host, { key: '785fa8173bebeb605d409ea84ca3e334006336ab', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': hasError,
                 'b2b-dropdown--disabled': this.disabled || this.groupDisabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '642ed6f5d43c69b490aa1a22ec7679b571519c19', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '6e9b9bc869a7307f175dd524b749de54e87fd5ed', class: {
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: 'f1d77d99955532bf600ab91d36b716d1f02ede62', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, this.search ? (h("b2b-input", { placeholder: this.placeholder, invalid: hasError, value: this.truncatedText || this.searchValue, disabled: this.disabled || this.groupDisabled, "onB2b-focus": () => {
+                this.isOpen = true;
+                this.focused = true;
+            }, "onB2b-input": this.handleSearchInput }, h("div", { slot: "end" }, (this.selectedText || this.searchValue) &&
+            !this.disabled &&
+            !this.groupDisabled &&
+            this.clear && (h("b2b-icon-100", { class: "b2b-dropdown__clear-icon", icon: 'b2b_icon-close', clickable: true, onClick: this.clearSelectedValue })), h("b2b-icon-100", { class: "b2b-dropdown__arrow-icon", icon: 'b2b_icon-arrow-down', onClick: this.toggleDropdownWithSearch })))) : (h("div", { class: {
                 'b2b-dropdown__select': true,
                 'b2b-dropdown__select--open': this.isOpen,
                 'b2b-dropdown__select--focused': this.focused,
-            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.truncatedText), this.isOpen && (h("div", { class: "b2b-dropdown__options", role: "listbox" }, this.options.map(option => (h("div", { key: option.value, class: {
+            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.truncatedText, this.selectedText &&
+            !this.disabled &&
+            !this.groupDisabled &&
+            this.clear && (h("b2b-icon-100", { class: "b2b-dropdown__clear-icon", onClick: this.clearSelectedValue, clickable: true, icon: 'b2b_icon-close' })))), this.isOpen && (h("div", { class: "b2b-dropdown__options", role: "listbox" }, filteredOptions.map(option => (h("div", { key: option.value, class: {
                 'b2b-dropdown__option': true,
                 'b2b-dropdown__option--selected': option.selected,
                 'b2b-dropdown__option--disabled': option.disabled,
@@ -204,6 +253,8 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
     static get style() { return B2bDropdownStyle0; }
 }, [1, "b2b-dropdown", {
         "label": [1],
+        "search": [516],
+        "clear": [516],
         "required": [516],
         "name": [513],
         "placeholder": [1],
@@ -218,6 +269,7 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
         "selectedValue": [32],
         "selectedText": [32],
         "options": [32],
+        "searchValue": [32],
         "truncatedText": [32],
         "clearSelection": [64]
     }, undefined, {
@@ -227,13 +279,23 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["b2b-dropdown", "b2b-input-label"];
+    const components = ["b2b-dropdown", "b2b-icon-100", "b2b-input", "b2b-input-label"];
     components.forEach(tagName => { switch (tagName) {
         case "b2b-dropdown":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, DropdownComponent);
             }
             break;
+        case "b2b-icon-100":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "b2b-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "b2b-input-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

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

@@ -24,7 +24,7 @@ const FlyoutMenuOptionComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutM
         }
     }
     render() {
-        return (h(Host, { key: 'd9f5fada05c44e475d2e645d51c3ba268844a8e3', class: {
+        return (h(Host, { key: '4064c5827dffd55637271a59061a2c2abb54d3ca', 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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { i as isClickOutside } from './utils.js';
 
-const flyoutMenuCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@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\")}.b2b-flyout-menu{position:relative;display:inline !important;}.b2b-flyout-menu__trigger{cursor:pointer;display:inline}.b2b-flyout-menu__trigger:focus{outline:2px solid -webkit-focus-ring-color;outline-offset:-1px;z-index:9999}.b2b-flyout-menu .b2b-flyout-menu__options__container{background-color:var(--b2b-color-white-100);display:none;width:max-content;box-shadow:0 0 5px rgba(0, 0, 0, 0.2);font-size:var(--b2b-size-copy-100);font-family:var(--b2b-font-family-default);margin:0.75rem 0 0;position:absolute;right:-0.625rem;text-align:left;z-index:1100;line-height:var(--b2b-size-copy-line-height-100);padding:var(--b2b-size-10) 0}.b2b-flyout-menu .b2b-flyout-menu__options__container--on{display:block}.b2b-flyout-menu__arrow{bottom:100%;height:0.625rem;overflow:hidden;position:absolute;right:0;transform:translateX(-0.75rem);width:1.25rem;z-index:1001}.b2b-flyout-menu__arrow::after{background:var(--b2b-color-white-100);box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.2);content:\"\";height:0.875rem;position:absolute;transform:translateX(3px) translateY(3px) rotate(45deg);width:0.875rem}.b2b-flyout-menu .purge-css-include-variables{border-radius:var(--b2b-border-radius);border-right:var(--b2b-border-right);cursor:var(--b2b-icon-cursor)}.b2b-flyout-menu__option{display:block;padding:var(--b2b-size-15) var(--b2b-size-30) 5px var(--b2b-size-30);border-bottom:1px solid transparent;cursor:pointer}.b2b-flyout-menu__option--separator{border-bottom:1px solid var(--b2b-color-grey-200)}.b2b-flyout-menu__option:hover,.b2b-flyout-menu__option:focus{background-color:var(--b2b-color-hover-default);outline:none}.b2b-flyout-menu__option--disabled{pointer-events:none;color:var(--b2b-color-grey-200)}";
+const flyoutMenuCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@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\")}.b2b-flyout-menu{position:relative;display:inline !important}.b2b-flyout-menu__trigger{cursor:pointer;display:inline}.b2b-flyout-menu__trigger:focus{outline:2px solid -webkit-focus-ring-color;outline-offset:-1px;z-index:9999}.b2b-flyout-menu .b2b-flyout-menu__options__container{background-color:var(--b2b-color-white-100);display:none;width:max-content;box-shadow:0 0 5px rgba(0, 0, 0, 0.2);font-size:var(--b2b-size-copy-100);font-family:var(--b2b-font-family-default);margin:0.75rem 0 0;position:absolute;right:-0.625rem;text-align:left;z-index:1100;line-height:var(--b2b-size-copy-line-height-100);padding:var(--b2b-size-10) 0}.b2b-flyout-menu .b2b-flyout-menu__options__container--on{display:block}.b2b-flyout-menu__arrow{bottom:100%;height:0.625rem;overflow:hidden;position:absolute;right:0;transform:translateX(-0.75rem);width:1.25rem;z-index:1001}.b2b-flyout-menu__arrow::after{background:var(--b2b-color-white-100);box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.2);content:\"\";height:0.875rem;position:absolute;transform:translateX(3px) translateY(3px) rotate(45deg);width:0.875rem}.b2b-flyout-menu{}.b2b-flyout-menu .purge-css-include-variables{border-radius:var(--b2b-border-radius);border-right:var(--b2b-border-right);cursor:var(--b2b-icon-cursor)}.b2b-flyout-menu__option{display:block;padding:var(--b2b-size-15) var(--b2b-size-30) 5px var(--b2b-size-30);border-bottom:1px solid transparent;cursor:pointer}.b2b-flyout-menu__option--separator{border-bottom:1px solid var(--b2b-color-grey-200)}.b2b-flyout-menu__option:hover,.b2b-flyout-menu__option:focus{background-color:var(--b2b-color-hover-default);outline:none}.b2b-flyout-menu__option--disabled{pointer-events:none;color:var(--b2b-color-grey-200)}";
 const B2bFlyoutMenuStyle0 = flyoutMenuCss;
 
 const keys = {
@@ -151,12 +151,12 @@ const FlyoutMenuComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutMenuCom
         options[index].focus();
     }
     render() {
-        return (h(Host, { key: '5e1d292b710d19a4bf5ece7047d4c5288b24f9b5' }, h("div", { key: 'd7d781fa8dfdd9f4bdecad06209400610a7f37bf', class: {
+        return (h(Host, { key: '03efeb4e28ef04b0719b3ade8e52d20cf3046372' }, h("div", { key: 'e2508205d7402d2ed8ef031c8ab5483a6fbdedbd', class: {
                 'b2b-flyout-menu': true,
-            } }, h("div", { key: '124c0ee9f83a252aabac1f09a11932ffde4b6bf1', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '588027fd799f42d6b095ad82247cc6974424fc23', name: "trigger" })), h("div", { key: 'baa37193ac12427e868c6742a526516f91e37a02', onFocusout: this.blurMenu, class: {
+            } }, h("div", { key: 'c6283f5ebff4ec0962face0e0f440e2cf0ec9ceb', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '303181fa8dac70e463b0efa7fa18a339c84b7009', name: "trigger" })), h("div", { key: 'ff4058c24c1c84c967316569bee8d75d49497eba', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, h("div", { key: '043ff6439dca6d4fccaa29f4bda5c52645154196', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'e95bcf37c9d1fc77509fbdf2de47001d88d7630a', name: "option" })))));
+            } }, h("div", { key: '860224aa691a4c06814731aca94d85a762fc806b', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'be5a754361d59fdbdf5ac934b0d1f5b50de8e3a1', name: "option" })))));
     }
     get hostElement() { return this; }
     static get style() { return B2bFlyoutMenuStyle0; }

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

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

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

@@ -70,7 +70,7 @@ const B2bGridRowComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridRowCom
         });
     }
     render() {
-        return (h(Host, { key: '019e65e7db27c37305f49e396389c72fbcf82281', style: {
+        return (h(Host, { key: '60ea771fe5da5fc9aa305824f6718d5f1d687374', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -78,7 +78,7 @@ const B2bGridRowComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridRowCom
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: 'e203c9bde0b21f923b356b6e330ab6e4227fd1a5' })));
+            } }, h("slot", { key: 'f38f2b66439b0d8820aa2b25ab88f2c7e02d4ae5' })));
     }
     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: '01c61abbb9d20b4479031e0545967f08782650dc', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '64a173edfae1ff772091163fecc55bebdc2462b9' })));
+        return (h(Host, { key: '0a61abf781f924eb4b88ceb02bece63d2a39f76b', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '02903dbdba9c4973573bac7be02b0e6d3a9cd71a' })));
     }
     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: '8b3e3c895c71501e761b6a80843403df68190cca', class: {
+        return (h("span", { key: '86d64389cf254eb3fb56e58c9399087e4d053f5f', class: {
                 'b2b-label': true,
                 [`b2b-label--${this.type}`]: true,
-            } }, h("slot", { key: '737f1fff0fd98d426cc910a6af713786aa7bd1cc' })));
+            } }, h("slot", { key: 'd85ee68f76a02a02c4c10e2ef634fdc4c412229a' })));
     }
     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: '1ae4da3d85c98d784c5aa3254eec819791538b75' }, h("div", { key: 'a504235885dd6d98d6f909d9cf3d67adf0f1f6c0', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: 'fffccabe0df78b009dc23f7dac95f5bbf7ce07e4', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: 'd4c09be02aa93046ad8835da3affb70c0d7685dc', class: {
+        return (h(Host, { key: 'bea74834a3926bc7efd9100f065eb4a8603e8bd4' }, h("div", { key: '5d5cca368682bcd7de4f77fe05e702b87943f762', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: 'ba06899cee12d6ef3d3e71a96040daccfdf3b364', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: '0be5c5dcc62576e1662ed7f6185b0ff24afaadc4', class: {
                 'b2b-modal__dialog': true,
                 [`b2b-modal__dialog--${this.variant}`]: true,
-            } }, h("div", { key: '85add6446151ec3df71ba825bab64d100306bc10', class: "b2b-modal__dialog__header" }, h("div", { key: '3fc56d466fe2eb9e6ca594ff867c48fe05ffda09', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: 'cf348827107b36494427ddaac019a539c379364a', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: '8df87ec03dcdb11bbf96c1c49c9ea9d81a84a558', name: "header-icon" })), h("div", { key: '80f6e9e7d7ad6e71c15525a7a12eb885c48c6c2a', class: "b2b-modal__dialog__header-right" }, h("button", { key: '7e2373011323d5abc38803862f30aa0b3ae394e6', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon-100", { key: 'a4955d65f73cf81cd919e5dbcf63db3251cf7449', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: '3147b6a75f66f90d45f1a404f9dfb140634a6a35', class: "b2b-modal__dialog__body" }, h("slot", { key: '7ad81c8b9e610720c3ed918d255017a32d4128d4' })), h("div", { key: '7e7b6105f3bc4b1ad06eb7b7c7f43c91eb310c51', class: "b2b-modal__dialog__footer" }, h("div", { key: 'd3abac0aade1244074f2bb038e736e981d67f5ae', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '61599dfd481e53897522fabc44915546ac3d0f59', name: "footer-left" })), h("div", { key: '07c6cfca3f4e1545644292e4c04c9f02149d37b8', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '7b161e0e61c4e36c0ae1a2930b95e39991d72879', name: "footer-right" })))), h("div", { key: 'd5ac30a02abfd2b89dce1d913971a417198cd155', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: '570e98eefabd147193cb04d9d493e46a08411e3f', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
+            } }, h("div", { key: '11b056ce706f572663e3a64cd5115ccc45109190', class: "b2b-modal__dialog__header" }, h("div", { key: '073420de4937e8f18a2172a45eb7088caef4624e', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: '3fdaeaccfd4606560ae82c8cbc8ad8eb65a9dfa8', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: 'f280675fcff7e81d1dc6388820f04110de703f8f', name: "header-icon" })), h("div", { key: '6a821204fdce083dfa0267714e1bc438b3dfcd56', class: "b2b-modal__dialog__header-right" }, h("button", { key: 'aa97e6cf511417d3a283017419577e6da8f65fff', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon-100", { key: 'c4ff1783dc4d7c7d7b85bc739d0b5154fc60eacb', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: 'ebf5d6a280718bf7f4c98e41846dea91dbde6943', class: "b2b-modal__dialog__body" }, h("slot", { key: 'b9b1b56a4b45760e88f6cb7e54281cd468137ccc' })), h("div", { key: 'ff0f612d9581c5f5bd48bd99699b1fc1348a577a', class: "b2b-modal__dialog__footer" }, h("div", { key: 'bf034c403f883695a72bd5ee0ec7a6b5c40f6ef1', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '52a6a99d0a722bf37c8659290ceaec53d5acc546', name: "footer-left" })), h("div", { key: '5d5a6786dfe6708cb17ca37e92c0f5c4366b6e0c', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '37f62cb0bf38031673f53f7ef2578e2c5c5219f9', name: "footer-right" })))), h("div", { key: 'b0eb907e93024c42e2b3668316f51b1e6b7d5aa3', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: '6d6762fb11007e46c3d3872ab208e40aa0e28d4a', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -220,16 +220,16 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
         const hasError = this.invalid && !disabled;
         const showHint = this.hint && !hasError;
         const showError = this.errorMessage && hasError;
-        return (h(Host, { key: 'ce7c585a53dfb0dc39216bca8de421f5c6f6bb63', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '5f70368b3502a9e3f313f701e254d0efefae6fd8', required: this.required }, this.label), h("div", { key: '3bc73b137d9b53d54b8a692965b83c299a09faa1', class: {
+        return (h(Host, { key: '67df2c8968bd816fdd57b9e1c0b3dcd37f9bc401', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '32d25f1327ffab15969ca4dcb4faa953bf9923c3', required: this.required }, this.label), h("div", { key: 'b4d0182e211f6aab9c3061eeffccdd1ceddbf03a', class: {
                 'b2b-multiselect-dropdown': true,
                 'b2b-multiselect-dropdown--open': this.isOpen,
                 'b2b-multiselect-dropdown--error': hasError,
                 'b2b-multiselect-dropdown--disabled': disabled,
                 'b2b-multiselect-dropdown--focused': this.invalid && this.isElementFocused,
-            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen && !disabled), "aria-expanded": this.isElementFocused }, h("div", { key: 'b4e95e6072ebe7a49f1ff092521758bef17c9443', class: "b2b-multiselect-dropdown__chip-container" }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (this.renderChips())), h("b2b-icon-100", { key: 'a79e61c1e78be92e394772e4fe45ccaa840bb23c', icon: "b2b_icon-arrow-down" })), h("div", { key: 'f8b8c5d70b18c1ffc175b966e1568ec719fd5aa6', class: {
+            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen && !disabled), "aria-expanded": this.isElementFocused }, h("div", { key: 'b6a69e9160fa5869d06cc2fc1f6f2d56c8964114', class: "b2b-multiselect-dropdown__chip-container" }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (this.renderChips())), h("b2b-icon-100", { key: '99a6b2e5baba4598a46f328e808b06e6e4b9d725', icon: "b2b_icon-arrow-down" })), h("div", { key: '0de344aa373d4ca82bf716df966448e95b5717f8', class: {
                 'b2b-multiselect-dropdown__options-container': true,
                 'b2b-multiselect-dropdown__options-container--visible': this.isOpen,
-            } }, h("div", { key: '94b799c83a30906027023ee78c9202afc152cb98', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'c844dc9be611cf2533549cf03bdc1fb5cf7e5755', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: 'ec3380739b47ae8ee490ed4bf9369a81045f2d3b', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: 'bf17215713121f4f359872c8c1f6ed4f1ec32e45', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+            } }, h("div", { key: '53e6ef0829f30ab13e0441eb54118b19835ce353', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'eb30f1caec191fb6021c172fae01ccf30e7d4f68', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '7b29fd3710eb4fecc9dc8d3c29dfae60ec3ea375', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '9efd9cac0ef3c2c9d61d32292bbf5ade76991996', 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.value, label: option.label }))))), showHint && (h("span", { class: "b2b-multiselect-dropdown__hint" }, this.hint)), showError && (h("span", { class: "b2b-multiselect-dropdown__error-message" }, this.errorMessage))));
     }
     get hostElement() { return this; }