@otto-de/b2b-core-components 1.34.0 → 1.36.0

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

@@ -45,10 +45,10 @@ export class B2BToggleGroup {
         }
     }
     render() {
-        return (h(Host, { key: '7226291d34975d1f924ef09c9b8d4d74bef97733' }, h("div", { key: 'e483cc453088f46d77e49c02fcc7ec81947cfbf5', class: {
+        return (h(Host, { key: 'b6ad87b079d1935b0b033398f89f0a9eeff68ede' }, h("div", { key: '600ccfd8b2b9db697b555f326a327b9827970e96', class: {
                 'b2b-toggle-group': true,
                 'b2b-toggle-group--disabled': this.disabled,
-            } }, h("fieldset", { key: '3bf9e738d0629438870a7618087c82b0b4841f4d' }, h("slot", { key: '648b2303ec2207e3c1069b313194de5abdef0518' })))));
+            } }, 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: 'b391da32ba761f1901c77bd80d55685fdaf683f9' }, h("div", { key: '98eee1a17196010cbe0a430d963008e8ef2a2dc7', 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: '8846212651ba0626eb6bc00c8b855a51f2b37fcc', class: {
+            } }, h("div", { key: 'c73c7c7cb6adc85a9d8701bc6940b989bb82b69f', class: {
                 'b2b-toggle__label': true,
                 'b2b-toggle__label--left': isLeft,
-            } }, h("span", { key: '9c6e0953a0f809acb692bf21d7c326b18695d98c', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: '891608602164176e3d76301dbb519a127ed8d7c1', 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: '8e7c9be51b1bf4e9545d472aa4b3ebb35a84d5a7', 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: '28dc2c4c09c44990df7fb0be9808dc25cc54c768', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: '4e635a06e5edec983a458ed29d5c742434fc2b0e', 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: '4226bd0e1427bf1c2cb43ff766a2474e23860ba6' }), h("div", { key: 'f1b3f5f8d8e18da6026103246bcc2af6d3c9224d', class: {
+            } }, h("slot", { key: 'a1c8efba4056c1e78abdcacb3071bf699fab24a4' }), h("div", { key: '70c0d20ef0ad32c586e6b2f49118fb4744a9c82f', class: {
                 'b2b-tooltip__content': true,
                 'b2b-tooltip--visible': this.opened,
-            } }, h("slot", { key: 'f8506cfc288896cd691dde111c7b331ed00739a0', 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: '367c15511fb060caf9c100ef1cc3eb500104e19e' }, h("div", { key: 'a50230361f5d8a017c4573d25cc8b5cf5880c7c7', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: 'fe0620d30525c9219ba8e9a6e4d6fbee0327c44d', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: 'e721cb200a6e09039cfcf291529f0d36b47c10af', 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: '9947aa5306e78326ce754fc777616c3c90fd2d1c' })))));
+            } }, 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: 'dd8021387b9e3388daa3b59872855f2c10876443' }, h("div", { key: '9732f51d245e4459a47d9c1136d61e3a93e0913f', class: "b2b_wizard" }, h("slot", { key: 'bca40318290b823efdc47973f20d9e63d27dc701' }))));
+        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: '7525116ebb5564170b75a07d619777a3a8d5dbac' }, h("div", { key: 'af75be9343349999f705cc5d2990b14e90d42c65', 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-custom-dropdown.js

@@ -5,7 +5,7 @@ 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 customDropdownCss = ":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{display:inline-block;position:relative;width:auto}.b2b-custom-dropdown__trigger{position:relative;display:inline !important;cursor:pointer}.b2b-custom-dropdown{position:absolute;top:100%;left:0;z-index:1000;inline-size:var(--b2b-dropdown-width, 300px);display:none}.b2b-custom-dropdown--on{display:block}.b2b-custom-dropdown--drop-shadow{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.b2b-custom-dropdown--border{border:1px solid var(--b2b-color-grey-200)}.b2b-custom-dropdown-search{padding:var(--b2b-size-30);display:none}.b2b-custom-dropdown-search--enabled{display:block;border-bottom:var(--b2b-size-1) solid var(--b2b-color-border-100)}.b2b-custom-dropdown__options-scroll-container{position:relative;display:block;max-height:288px;overflow-y:auto;margin:0}.b2b-custom-dropdown__options-container{position:relative;display:block;margin:0}.b2b-custom-dropdown__options-container--disabled{display:none}.b2b-custom-dropdown__option--hidden{display:none}::slotted(b2b-custom-dropdown-option.b2b-custom-dropdown__option--hidden){display:none}.b2b-custom-dropdown__empty{padding:var(--b2b-size-30);color:var(--b2b-color-grey-400);font-size:var(--b2b-size-copy-100);background-color:var(--b2b-color-white-100)}";
+const customDropdownCss = ":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{display:inline-block;position:relative;width:auto}.b2b-custom-dropdown__trigger{position:relative;display:inline !important;cursor:pointer}.b2b-custom-dropdown{position:absolute;top:100%;z-index:1000;inline-size:var(--b2b-dropdown-width, 300px);display:none}.b2b-custom-dropdown--on{display:block}.b2b-custom-dropdown--drop-shadow{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.b2b-custom-dropdown--border{border:1px solid var(--b2b-color-grey-200)}.b2b-custom-dropdown--align-left{left:0;right:auto}.b2b-custom-dropdown--align-center{left:50%;right:auto;transform:translateX(-50%)}.b2b-custom-dropdown--align-right{left:auto;right:0}.b2b-custom-dropdown-search{padding:var(--b2b-size-30);display:none}.b2b-custom-dropdown-search--enabled{display:block;border-bottom:var(--b2b-size-1) solid var(--b2b-color-border-100)}.b2b-custom-dropdown__options-scroll-container{position:relative;display:block;max-height:288px;overflow-y:auto;margin:0}.b2b-custom-dropdown__options-container{position:relative;display:block;margin:0}.b2b-custom-dropdown__options-container--disabled{display:none}.b2b-custom-dropdown__option--hidden{display:none}::slotted(b2b-custom-dropdown-option.b2b-custom-dropdown__option--hidden){display:none}.b2b-custom-dropdown__empty{padding:var(--b2b-size-30);color:var(--b2b-color-grey-400);font-size:var(--b2b-size-copy-100);background-color:var(--b2b-color-white-100)}";
 const B2bCustomDropdownStyle0 = customDropdownCss;
 
 const B2bCustomDropdownComponent = /*@__PURE__*/ proxyCustomElement(class B2bCustomDropdownComponent extends HTMLElement {
@@ -40,6 +40,7 @@ const B2bCustomDropdownComponent = /*@__PURE__*/ proxyCustomElement(class B2bCus
         this.disabled = false;
         this.dropshadow = false;
         this.border = false;
+        this.alignment = 'left';
         this.autoDisableSearch = true;
         this.opened = false;
         this.noResultsText = 'Keine Ergebnisse gefunden, überprüfen Sie die Eingabe.';
@@ -79,17 +80,20 @@ const B2bCustomDropdownComponent = /*@__PURE__*/ proxyCustomElement(class B2bCus
         }
     }
     render() {
-        return (h(Host, { key: '54123c64de9c802cf4dc6c9b5d1a156ffcc3eb33' }, h("div", { key: 'ba04968830ab5302127373b99ea97face360a76c', class: "b2b-custom-dropdown__trigger" }, h("slot", { key: '0d36e4e9299a4b87c97a41db86693b25f720ccca', name: "trigger" })), h("div", { key: 'f4dd9227fc1fc768340531c01f4a93d9a355d978', class: {
+        return (h(Host, { key: 'be885facc6441549cd7bc28f689c2eebf07b6987' }, h("div", { key: '450a33089db12ce4730e1996d1efde9db81a71c5', class: "b2b-custom-dropdown__trigger" }, h("slot", { key: '54e75fd7e993fdfba28da2fbeb1822414bdc8457', name: "trigger" })), h("div", { key: '6b62f9590e78bf20aff37fe09e8acb78ef4b8b90', class: {
                 'b2b-custom-dropdown': true,
                 'b2b-custom-dropdown--on': this.opened && !this.disabled,
                 'b2b-custom-dropdown--drop-shadow': this.dropshadow,
                 'b2b-custom-dropdown--border': this.border,
-            } }, h("b2b-background-box", { key: '1a2aac422535bb6d99cd9378c742626f535242e7', noPadding: true, borderTop: "none", borderBottom: "none", borderRight: "none", borderLeft: "none" }, h("div", { key: '847f408ef98fff19e3b9c71aeab6fd61c3ed420c', class: {
+                'b2b-custom-dropdown--align-left': this.alignment === 'left',
+                'b2b-custom-dropdown--align-center': this.alignment === 'center',
+                'b2b-custom-dropdown--align-right': this.alignment === 'right',
+            } }, h("b2b-background-box", { key: '5690eb6da07a46248544fb5b1f742c21987cce7b', noPadding: true, borderTop: "none", borderBottom: "none", borderRight: "none", borderLeft: "none" }, h("div", { key: 'aab7a71ed660cce678c40bfcc36dfaf317e329a9', class: {
                 'b2b-custom-dropdown-search': true,
                 'b2b-custom-dropdown-search--enabled': this.allOptions.length > 6 && !this.disabled,
-            } }, h("b2b-input", { key: 'b7edd8aa7b161c1d2a168d3648a5833eb9156997', placeholder: this.placeholder, "onB2b-input": this.handleInput }, h("b2b-icon-100", { key: '5434c47b722df4705fcace1650bce3fe141ec08e', icon: "b2b_icon-search", slot: "end" })))), h("div", { key: '115c76ac508079454c1326c8e5e04d9851979239', class: this.allOptions.length > 6
+            } }, h("b2b-input", { key: '7fe33bb83de99b112ff6caa3a1a7c866c6160551', placeholder: this.placeholder, "onB2b-input": this.handleInput }, h("b2b-icon-100", { key: '330b9fa7a045588743ba8d4e4de6de4291091132', icon: "b2b_icon-search", slot: "start" })))), h("div", { key: '25d7f57b346bb8da229ba0c2c9994135bd8e7cfb', class: this.allOptions.length > 6
                 ? 'b2b-custom-dropdown__options-scroll-container'
-                : 'b2b-custom-dropdown__options-container' }, h("slot", { key: '3e222b38e248bd7bf8cab1c237a474176d43c3bb', name: "option" })), this.value && !this.hasVisibleOptions && (h("div", { class: "b2b-custom-dropdown__empty", role: "status" }, h("slot", { name: "empty" }, this.noResultsText))))));
+                : 'b2b-custom-dropdown__options-container' }, h("slot", { key: 'ed7646c026e8373cbf329fec8c0379f5bd3d47f0', name: "option" })), this.value && !this.hasVisibleOptions && (h("div", { class: "b2b-custom-dropdown__empty", role: "status" }, h("slot", { name: "empty" }, this.noResultsText))))));
     }
     get hostElement() { return this; }
     static get style() { return B2bCustomDropdownStyle0; }
@@ -98,6 +102,7 @@ const B2bCustomDropdownComponent = /*@__PURE__*/ proxyCustomElement(class B2bCus
         "disabled": [516],
         "dropshadow": [516],
         "border": [516],
+        "alignment": [513],
         "autoDisableSearch": [4, "auto-disable-search"],
         "opened": [1028],
         "noResultsText": [1, "no-results-text"],

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 {
@@ -12,6 +14,7 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
         this.b2bChange = createEvent(this, "b2b-change", 7);
         this.b2bFocus = createEvent(this, "b2b-focus", 7);
         this.b2bBlur = createEvent(this, "b2b-blur", 7);
+        this.ignoreNextMutation = false;
         this.onClickOutside = (ev) => {
             if (!this.hostElement.contains(ev.target))
                 this.isOpen = false;
@@ -28,22 +31,42 @@ 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;
             const value = target.getAttribute('data-value');
             const label = (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.trim();
             if (value != null) {
+                this.ignoreNextMutation = true;
                 this.selectedValue = value;
                 this.selectedText = label || '';
-                this.b2bChange.emit(value);
                 this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: opt.value === value })));
+                const nativeOptions = this.hostElement.querySelectorAll('option');
+                nativeOptions.forEach(opt => {
+                    if (opt.value === value) {
+                        opt.setAttribute('selected', '');
+                        opt.selected = true;
+                    }
+                    else {
+                        opt.removeAttribute('selected');
+                        opt.selected = false;
+                    }
+                });
                 this.isOpen = false;
+                this.b2bChange.emit(value);
                 this.updateTruncatedText();
+                this.ignoreNextMutation = false;
             }
         };
         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;
@@ -78,7 +101,35 @@ 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.required = false;
         this.name = undefined;
         this.placeholder = 'Select an option...';
@@ -93,21 +144,31 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
         this.selectedValue = '';
         this.selectedText = '';
         this.options = [];
+        this.searchValue = '';
         this.truncatedText = '';
     }
     /** Method to programmatically clear selection of the dropdown. */
     async clearSelection() {
+        this.ignoreNextMutation = true;
         this.selectedValue = this.placeholderValue;
         this.selectedText = '';
         this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: false })));
+        const nativeOptions = this.hostElement.querySelectorAll('option');
+        nativeOptions.forEach(opt => {
+            opt.removeAttribute('selected');
+            opt.selected = false;
+        });
         this.isOpen = false;
         this.updateTruncatedText();
+        this.ignoreNextMutation = false;
     }
     componentWillLoad() {
         this.initializeOptions();
         if (typeof MutationObserver !== 'undefined') {
             this.mutationObserver = new MutationObserver(() => {
-                this.initializeOptions();
+                if (!this.ignoreNextMutation) {
+                    this.initializeOptions();
+                }
             });
             this.mutationObserver.observe(this.hostElement, {
                 childList: true,
@@ -160,15 +221,21 @@ 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: 'e719de6e666225d6b807810570bd32d4906a2647', class: {
+        const filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(this.searchValue.toLowerCase()));
+        return (h(Host, { key: 'd9762514c854be8f40fd2baaa991b4ae1366cfa3', 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: '690c9a335c7171312fb9de9cf6894af979eaa471', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: 'fcbbc73636118d451f0ec5aa5ce1cd2baa0dec9b', class: {
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '2473ccb7d1d9949bbd500adbbad53b1c302593d3', 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 && (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 && (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,
@@ -181,6 +248,7 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
     static get style() { return B2bDropdownStyle0; }
 }, [1, "b2b-dropdown", {
         "label": [1],
+        "search": [516],
         "required": [516],
         "name": [513],
         "placeholder": [1],
@@ -195,6 +263,7 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
         "selectedValue": [32],
         "selectedText": [32],
         "options": [32],
+        "searchValue": [32],
         "truncatedText": [32],
         "clearSelection": [64]
     }, undefined, {
@@ -204,13 +273,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

@@ -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; }

package/dist/components/b2b-pagination.js

@@ -101,7 +101,7 @@ const PaginationComponent = /*@__PURE__*/ proxyCustomElement(class PaginationCom
         };
     }
     render() {
-        return (h("nav", { key: '6f43e77c9989aafe2f5ff9d7de619853f807ceb9' }, h("ol", { key: 'ebc029acf51035b9859ed5793a29fc689c536484', 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 }, "\u2039" /* PaginationConstants.BACK */))), this.navItems.map((navItem, index) => {
+        return (h("nav", { key: '88eb108790c1be9f974f7c88f602afa2ee35f1e9' }, h("ol", { key: '19a0fff8f2ac83913593530d921e8915e496400b', 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 }, "\u2039" /* 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 }, "\u203A" /* PaginationConstants.NEXT */))))));