@otto-de/b2b-core-components 1.27.0 → 1.28.0

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

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './icon-100.js';
 import { d as defineCustomElement$3 } from './input-label.js';
 import { d as defineCustomElement$2 } from './multiselect-option.js';
 
-const multiselectDropdownCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-grey-10:#f0f0f0;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-grey-10:#f0f0f0;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host{width:100%}:host b2b-input-label{margin-bottom:var(--b2b-size-10);display:block}:host .b2b-multiselect-dropdown{position:relative;display:flex;justify-content:space-between;min-width:20rem;overflow:hidden;border:1px solid var(--b2b-color-grey-200);border-radius:var(--b2b-size-border-radius-100);padding:var(--b2b-size-15) var(--b2b-size-25);max-height:104px;background-color:var(--b2b-color-white-100)}:host .b2b-multiselect-dropdown--open{border-radius:var(--b2b-size-border-no-radius-bottom);border-bottom:0}:host .b2b-multiselect-dropdown__placeholder{color:var(--b2b-color-black-100);user-select:none;cursor:default;font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);font-family:var(--b2b-font-family-default)}:host .b2b-multiselect-dropdown__chip-container{display:flex;flex-flow:row wrap;gap:4px 0;width:calc(100% - 24px)}:host .b2b-multiselect-dropdown__options-container{position:relative;display:none}:host .b2b-multiselect-dropdown__options-container--visible{display:block}:host .b2b-multiselect-dropdown__options{position:absolute;width:100%;max-height:312px;overflow-y:auto;margin:0;background-color:var(--b2b-color-white-100);border:solid 1px var(--b2b-color-grey-200);box-sizing:border-box;z-index:10}:host .b2b-multiselect-dropdown__option__search{width:100%}:host .b2b-multiselect-dropdown__option__search__input{width:calc(100% - 16px);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);font-family:var(--b2b-font-family-default);outline:none;border-bottom:1px solid var(--b2b-color-grey-200);border-top:0;border-left:0;border-right:0;padding:8px 8px 10px}:host .b2b-multiselect-dropdown__option__select-all{border-bottom:1px solid var(--b2b-color-grey-200)}:host .b2b-multiselect-dropdown__option__show-more-button{cursor:pointer}";
+const multiselectDropdownCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-grey-10:#f0f0f0;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-grey-10:#f0f0f0;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host{width:100%}:host b2b-input-label{margin-bottom:var(--b2b-size-5);display:block}:host span{display:block;color:var(--b2b-color-grey-300);font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75);font-family:var(--b2b-font-family-default);white-space:normal;word-break:break-word;max-width:100%}:host .b2b-multiselect-dropdown{position:relative;display:flex;align-items:center;justify-content:space-between;min-width:20rem;overflow:hidden;border:1px solid var(--b2b-color-grey-200);border-radius:var(--b2b-size-border-radius-100);padding:5px var(--b2b-size-20);max-height:104px;background-color:var(--b2b-color-white-100)}:host .b2b-multiselect-dropdown--open{z-index:1001;outline:2px solid -webkit-focus-ring-color;outline-offset:-1px}:host .b2b-multiselect-dropdown--error{border:1px solid var(--b2b-color-error-100);background-color:var(--b2b-color-error-50)}:host .b2b-multiselect-dropdown--focused{z-index:1001;outline:2px solid var(--b2b-color-error-100);outline-offset:-1px}:host .b2b-multiselect-dropdown__chip-container{display:flex;flex-flow:row wrap;align-items:center;gap:4px 0;width:calc(100% - 24px);padding:var(--b2b-size-1) 0}:host .b2b-multiselect-dropdown__placeholder{display:inline-flex;align-items:center;height:auto;line-height:normal;font-size:var(--b2b-size-copy-100);font-family:var(--b2b-font-family-default);color:var(--b2b-color-black-100);user-select:none;cursor:default;padding:0;border-radius:var(--b2b-size-border-radius-100)}:host .b2b-multiselect-dropdown__options-container{position:relative;display:none}:host .b2b-multiselect-dropdown__options-container--visible{display:block}:host .b2b-multiselect-dropdown__options{position:absolute;width:100%;max-height:312px;overflow-y:auto;margin:0;background-color:var(--b2b-color-white-100);border-right:var(--b2b-size-1) solid var(--b2b-color-black-100);border-left:var(--b2b-size-1) solid var(--b2b-color-black-100);border-bottom:var(--b2b-size-1) solid var(--b2b-color-black-100);border-top:2px none -webkit-focus-ring-color;box-sizing:border-box;z-index:10}:host .b2b-multiselect-dropdown__option__search{width:100%}:host .b2b-multiselect-dropdown__option__search__input{width:calc(100% - 16px);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);font-family:var(--b2b-font-family-default);outline:none;border-bottom:1px solid var(--b2b-color-grey-200);border-top:0;border-left:0;border-right:0;padding:8px 8px 10px}:host .b2b-multiselect-dropdown__option__select-all{border-bottom:1px solid var(--b2b-color-grey-200)}:host .b2b-multiselect-dropdown__option__show-more-button{cursor:pointer}:host .b2b-multiselect-dropdown--disabled{color:var(--b2b-color-grey-250);background-color:var(--b2b-color-grey-25);border:1px solid var(--b2b-color-grey-200);cursor:not-allowed;pointer-events:none}:host .b2b-multiselect-dropdown--disabled .b2b-multiselect-dropdown__chip-container{opacity:0.5}:host .b2b-multiselect-dropdown--disabled .b2b-multiselect-dropdown__placeholder{color:var(--b2b-color-grey-300)}:host .b2b-multiselect-dropdown__error-message{margin-top:var(--b2b-size-7);color:var(--b2b-color-error-100);font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75);font-family:var(--b2b-font-family-default);display:block}:host .b2b-multiselect-dropdown__hint{margin-top:var(--b2b-size-7);font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75);font-family:var(--b2b-font-family-default);display:block}";
 const B2bMultiselectDropdownStyle0 = multiselectDropdownCss;
 
 const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSelectDropdown extends HTMLElement {
@@ -15,6 +15,9 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
         this.__attachShadow();
         this.b2bChange = createEvent(this, "b2b-selected", 7);
         this.handleInput = event => {
+            if (this.disabled) {
+                return;
+            }
             this.value = event.target.value.toLowerCase();
             if (this.value !== '') {
                 const filteredList = this.optionsList.filter(option => option.toLowerCase().indexOf(this.value) > -1);
@@ -57,6 +60,7 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
         this.handleChipClose = event => {
             this.currentSelectedValues = this.currentSelectedValues.filter(el => el !== event.detail.value);
             this.updateOption(event.detail.value);
+            this.isOpen = true;
             this.resetFocus();
         };
         this.updateOption = (option) => {
@@ -72,17 +76,32 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
                 .forEach(option => (option.selected = true));
         };
         this.setElementOnFocus = () => {
+            if (this.disabled)
+                return;
             this.isElementFocused = true;
         };
-        this.setElementOnBlur = () => {
+        this.setElementOnBlur = (event) => {
+            const nextFocusedElement = event === null || event === void 0 ? void 0 : event.relatedTarget;
+            if (!nextFocusedElement || !this.hostElement.contains(nextFocusedElement)) {
+                this.isOpen = false;
+            }
+            else {
+                this.isOpen = true;
+            }
             this.isElementFocused = false;
         };
         this.resetFocus = () => {
+            if (this.disabled)
+                return;
             const el = this.hostElement.shadowRoot.querySelector('.b2b-multiselect-dropdown');
             el.focus();
         };
         this.handleMouseDown = (event) => {
             /** Keep dropdown open if a tag is removed */
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
             if (this.isElementFocused) {
                 event.preventDefault();
             }
@@ -91,6 +110,8 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
             }
         };
         this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
             if (event.key === 'Enter') {
                 event.preventDefault();
                 this.resetFocus();
@@ -129,55 +150,77 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
         this.searchPlaceholder = undefined;
         this.selectAllLabel = undefined;
         this.maxOptionsVisible = 8;
+        this.required = false;
+        this.invalid = false;
+        this.errorMessage = undefined;
+        this.hint = undefined;
+        this.disabled = false;
         this.currentSelectedValues = [];
         this.currentList = this.optionsList;
         this.value = '';
         this.isElementFocused = false;
+        this.isOpen = false;
         this.hasOptionList = this.optionsList.length > 0;
     }
+    parsePropToArray(value) {
+        if (Array.isArray(value))
+            return value;
+        try {
+            return JSON.parse(value);
+        }
+        catch (_a) {
+            return value
+                .split(',')
+                .map(v => v.trim())
+                .filter(Boolean);
+        }
+    }
     componentWillLoad() {
-        this.parseSelectedValuesAndOptionsList();
+        this.selectedValues = this.parsePropToArray(this.selectedValues);
+        this.optionsList = this.parsePropToArray(this.optionsList);
+        this.currentList = this.optionsList;
         this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
     }
     /** Needed to trigger a re-render for async data */
     watchPropHandler(newList) {
-        this.hasOptionList = newList.length > 0;
+        this.optionsList = this.parsePropToArray(newList);
+        this.hasOptionList = this.optionsList.length > 0;
         if (this.hasOptionList) {
-            this.currentList = newList;
+            this.currentList = this.optionsList;
+            this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
         }
     }
+    /** Needed to trigger a re-render for async data */
+    handleSelectedValuesChangeFromOutside(newVal) {
+        this.selectedValues = this.parsePropToArray(newVal);
+        this.currentSelectedValues = this.selectedValues.filter(val => this.optionsList.includes(val));
+    }
     handleSelectedValuesChange(newValues) {
         this.b2bChange.emit(newValues);
     }
-    parseSelectedValuesAndOptionsList() {
-        if (typeof this.selectedValues === 'string') {
-            this.selectedValues = this.parseStringToArray(this.selectedValues);
-        }
-        if (typeof this.optionsList === 'string') {
-            this.optionsList = this.parseStringToArray(this.optionsList);
-        }
-    }
-    parseStringToArray(value) {
-        return JSON.parse(value);
-    }
     componentDidUpdate() {
         const options = this.getOptions();
         this.updateAllOptions(options);
         this.updateSelectAll(options);
     }
     render() {
-        return (h(Host, { key: '53aff695c900964cb3dc5bcb68c10b5285be16cd', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '983a3b773e397fe5e1512168acc12d07a41e57ff' }, this.label), h("div", { key: '577f648af5e7fda2e1a225a97faf05612c84e772', class: {
+        return (h(Host, { key: 'c105c46f7461d0a2692282ed15d07460e31273b9', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '93fc16c4f74cb669bc7d0d82a673b414224eb4b1', required: this.required }, this.label), h("div", { key: '397e2d0b2315f5fdce8c2cf041ac4a92f9effea5', class: {
                 'b2b-multiselect-dropdown': true,
-                'b2b-multiselect-dropdown--open': this.isElementFocused,
-            }, tabindex: 0, role: "combobox", "aria-expanded": this.isElementFocused }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (h("div", { class: "b2b-multiselect-dropdown__chip-container" }, this.renderChips())), h("b2b-icon-100", { key: '9bbe6f5442662cd102292846f5476b8ce899356a', icon: "b2b_icon-arrow-down" })), h("div", { key: '17593767cfeb17c341efd46dfc007197847c97bb', class: {
+                'b2b-multiselect-dropdown--open': this.isOpen,
+                'b2b-multiselect-dropdown--error': this.invalid && !this.disabled,
+                'b2b-multiselect-dropdown--disabled': this.disabled,
+                'b2b-multiselect-dropdown--focused': this.invalid && this.isElementFocused,
+            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen), "aria-expanded": this.isElementFocused }, h("div", { key: '2b3693ab1bd0fb6be6b13efa8eb8561b10480104', 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: 'ee601f312e28840cdc16501dc60b016a6106cc3e', icon: "b2b_icon-arrow-down" })), h("div", { key: '50b47c0f1f20afd3ec6ed093237a202ed1d9a59b', class: {
                 'b2b-multiselect-dropdown__options-container': true,
-                'b2b-multiselect-dropdown__options-container--visible': this.isElementFocused,
-            } }, h("div", { key: 'fe585cea40b0ef97d46cbd3a92f60c7382f75a97', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '863879f8b34e870bb2f82d62edf07aad8a475b6d', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '9866a72f2f7a4b19968ac5c03d6b07e60fcb6504', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '93c740c3ba53544c90d6c1130fee1e444b53965b', 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 })))))));
+                'b2b-multiselect-dropdown__options-container--visible': this.isOpen,
+            } }, h("div", { key: 'b8c651872eca608e3c02c42920cf0d8e6d117aa9', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '2a0d909d9994ac59a22e60c0ed729cf90d74cf92', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '66081cd675bb03da68a445c090c69632611e1a32', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: 'a1b146c742e206c05341aab80f49629a536b9c09', 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 }))))), (this.hint !== undefined && !this.invalid) ||
+            (this.hint !== undefined && this.disabled) ? (h("span", { class: "b2b-multiselect-dropdown__hint" }, this.hint)) : (''), this.errorMessage !== undefined && this.invalid && !this.disabled ? (h("span", { class: "b2b-multiselect-dropdown__error-message" }, this.errorMessage)) : ('')));
     }
     get hostElement() { return this; }
     static get watchers() { return {
         "optionsList": ["watchPropHandler"],
+        "selectedValues": ["handleSelectedValuesChangeFromOutside"],
         "currentSelectedValues": ["handleSelectedValuesChange"]
     }; }
     static get style() { return B2bMultiselectDropdownStyle0; }
@@ -189,13 +232,20 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
         "searchPlaceholder": [1, "search-placeholder"],
         "selectAllLabel": [1, "select-all-label"],
         "maxOptionsVisible": [2, "max-options-visible"],
+        "required": [516],
+        "invalid": [516],
+        "errorMessage": [1, "error-message"],
+        "hint": [1],
+        "disabled": [516],
         "currentSelectedValues": [32],
         "currentList": [32],
         "value": [32],
         "isElementFocused": [32],
+        "isOpen": [32],
         "hasOptionList": [32]
     }, undefined, {
         "optionsList": ["watchPropHandler"],
+        "selectedValues": ["handleSelectedValuesChangeFromOutside"],
         "currentSelectedValues": ["handleSelectedValuesChange"]
     }]);
 function defineCustomElement$1() {

package/dist/components/b2b-pagination.js

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

package/dist/components/b2b-paragraph.js

@@ -16,7 +16,7 @@ const ParagraphComponent = /*@__PURE__*/ proxyCustomElement(class ParagraphCompo
         this.display = 'block';
     }
     render() {
-        return (h("p", { key: '410bec2bfaa21c973ecb2c8a40238ca8e858b95f', style: {
+        return (h("p", { key: 'c3781dc7215762d8dd038791943a541231731653', style: {
                 display: this.display,
             }, class: {
                 'b2b-paragraph': true,
@@ -25,7 +25,7 @@ const ParagraphComponent = /*@__PURE__*/ proxyCustomElement(class ParagraphCompo
                 ['b2b-paragraph--align-' + this.align]: true,
                 ['b2b-paragraph--no-margin']: !this.margin,
                 ['b2b-paragraph--variant-' + this.variant]: true,
-            } }, h("slot", { key: 'c2dae90e21ff14bdea080f007eb35d36ade59bad' })));
+            } }, h("slot", { key: '5afb431d2d782751f50741a6c10a210df7b1e3e4' })));
     }
     static get style() { return B2bParagraphStyle0; }
 }, [1, "b2b-paragraph", {

package/dist/components/b2b-progress-bar.js

@@ -24,11 +24,11 @@ const ProgressBarComponent = /*@__PURE__*/ proxyCustomElement(class ProgressBarC
     }
     render() {
         const labelExists = this.label !== undefined && this.label !== '';
-        return (h(Host, { key: '2466d3c474ca6240247bb397426f060698d97186' }, h("div", { key: '6d0e5633c0f01952a52aba45c43b39654fc3b3ea', class: {
+        return (h(Host, { key: '2c21a98038eb5f9139de509825204d5536b28186' }, h("div", { key: '53b8271100890ccbf94e6452f6811f10edbbe268', class: {
                 [`b2b-progress-bar__${this.labelPosition}-${this.labelType}`]: true,
-            } }, h("div", { key: 'ee25b17b43f6204cb370c2046cdee20790193f89', class: "b2b-progress-bar__wrapper" }, h("div", { key: '78050a17a169f50a5a5784ac48a7a58152ea2e6b', class: "b2b-progress-bar__progress", style: {
+            } }, h("div", { key: '2925cf1b343596249f110944f946ecfc01258556', class: "b2b-progress-bar__wrapper" }, h("div", { key: '32a8f9c88a507c697c45513037a4473736585efa', class: "b2b-progress-bar__progress", style: {
                 width: `${this.getProgress()}%`,
-            } })), h("div", { key: '44c633adccf2736adf8d0cc462c269d83f0c31c5', class: {
+            } })), h("div", { key: 'e91835897125808aedeaed4cc4b7eda49eab2383', class: {
                 'b2b-progress-bar__label': labelExists,
                 'b2b-progress-bar__label-none': !labelExists,
                 [`b2b-progress-bar__label__${this.labelPosition}-${this.labelType}`]: labelExists,

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

@@ -64,11 +64,11 @@ const B2bRadioButtonComponent = /*@__PURE__*/ proxyCustomElement(class B2bRadioB
         return Array.from(document.querySelectorAll(`b2b-radio-button[name="${this.name}"]`)).filter((radio) => radio.value !== this.value);
     }
     render() {
-        return (h(Host, { key: 'c6a48de040535714aa894821869b17a09bd7c0bc', onClick: this.onClick }, h("div", { key: 'c7330bbaad0413b440b630607a7f036ae4ede8bd', class: {
+        return (h(Host, { key: '28bb8bc8c3741839657f687abed7314c8cdcf7bf', onClick: this.onClick }, h("div", { key: '6d865dff87760dcaef8be42268e73f6d90ddb1c6', class: {
                 'b2b-radio': true,
                 'b2b-radio--error': this.invalid && !this.disabled,
                 'b2b-radio--disabled': this.disabled,
-            } }, h("div", { key: 'fa4653ef9abfffb7bccc3450d5fd024a3167297c', class: "b2b-radio-items" }, h("input", { key: '0ada5794f7abd8f5a10078e06a6d0ad8a2d2053e', class: "b2b-radio-input", "aria-labelledby": this.name, type: "radio", checked: this.checked, disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, value: this.value }), h("b2b-input-label", { key: '1486659420211964f3a59c4465717170eaffb7ec', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: 'deac0ee6f41f57b312837c8e24534f0e9416144b', name: "label" }, this.label))), (this.hint !== undefined && !this.invalid) ||
+            } }, h("div", { key: '6c5ca53c8d308e381d26c8802cb8521d6e987256', class: "b2b-radio-items" }, h("input", { key: 'a3ed2ab8d4defc593bcc69b5058e9d6fb674a626', class: "b2b-radio-input", "aria-labelledby": this.name, type: "radio", checked: this.checked, disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, value: this.value }), h("b2b-input-label", { key: '69cb16d121d9283cc95ffbb0642a18d9744deece', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: 'db1e57a9e65a52df671fa3ff35f1a9f372eca47b', name: "label" }, this.label))), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
     }
     get host() { return this; }

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

@@ -78,11 +78,11 @@ const RadioButtonGroupComponent = /*@__PURE__*/ proxyCustomElement(class RadioBu
         this.removeChildText();
     }
     render() {
-        return (h(Host, { key: '7d9c1d82a8e36e51555112beb36140829d971c22' }, h("div", { key: 'c3a003fe8e873cdcf0f998087fb9ca88cd8cf829', class: {
+        return (h(Host, { key: '5b36240943436717e043f0c25483eef6f90229f0' }, h("div", { key: 'b9d174d04e5a280beed928e37f4355d8c1edf1aa', class: {
                 'b2b-radio-group': true,
                 'b2b-radio-group--error': this.invalid && !this.disabled,
                 [`b2b-radio-group--${this.alignment}`]: true,
-            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("fieldset", { key: '4d513eb53eb50d556d3e9b3635b0560dd337dd46' }, h("div", { key: '18268876504e9af54aa1815c76365ad41ff5b0ee', class: "b2b-radio-group-options" }, h("slot", { key: '78b7c3a6a05ace18d201b6fc600969df040ad531' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("fieldset", { key: 'd4e428dda283b88ed29f4259c3c7ad71d484648d' }, h("div", { key: '4ac819b081787a2dc468ebc3c0c84d8d182c7353', class: "b2b-radio-group-options" }, h("slot", { key: '4c8ee699036c8b3b672fbedbffc8efbbdaf86fa3' }))), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
     }
     get host() { return this; }

package/dist/components/b2b-required-separator.js

@@ -12,7 +12,7 @@ const B2BRequiredSeparator = /*@__PURE__*/ proxyCustomElement(class B2BRequiredS
         this.label = 'Pflichtfeld';
     }
     render() {
-        return (h(Host, { key: 'cab5659fd608d598bfdea6c24da780f5b1c8f0a4' }, h("div", { key: '107780204e6bc22b6d87014639307a1ddf0a3077', class: "b2b-required-separator__label" }, h("span", { key: '1997e65a06747f06779950ad793ddd221dcd9974', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: '44b6faacf88b76a13dcc2fcf2529354279103d83' }, this.label)), h("b2b-separator", { key: 'cf1747b9ec17ea9eb352f777f0ad25c8d6b2a927' })));
+        return (h(Host, { key: '989e81600d0748d74b57f59df342bdb8ea1646ef' }, h("div", { key: '558b14f88f32f0b21c423554290fbe72c4fa9696', class: "b2b-required-separator__label" }, h("span", { key: '65a8ed5c4af4d0e3aee00785727aad0a74eb0323', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: 'e170084c3b0d4447a9d151b17422479f78a3f6b7' }, this.label)), h("b2b-separator", { key: '42b320e566f4f7594d87f930438b3b0ba8662b7f' })));
     }
     static get style() { return B2bRequiredSeparatorStyle0; }
 }, [1, "b2b-required-separator", {

package/dist/components/b2b-scrollable-container.js

@@ -10,7 +10,7 @@ const ScrollableContainerComponent = /*@__PURE__*/ proxyCustomElement(class Scro
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '2fd5cba6708e2ec70567ea9b582ad5c2cbc9531f' }, h("slot", { key: '9998b1dcb05a6396e288317365d56e983baeb002' })));
+        return (h(Host, { key: '234c8e341e9dc85b7c8d7fc742445f61045b9cf6' }, h("slot", { key: 'd67a95c9c3a1a9f7ac75924d639c095578fcb2f1' })));
     }
     get host() { return this; }
     static get style() { return B2bScrollableContainerStyle0; }

package/dist/components/b2b-search.js

@@ -35,7 +35,7 @@ const SearchComponent = /*@__PURE__*/ proxyCustomElement(class SearchComponent e
         }
     }
     render() {
-        return (h(Host, { key: 'b24052966f06f771d924c1fc7a2257155aa1fafe' }, h("b2b-input-group", { key: '35c7d7926e6d014a87d39174ba83e3eb7a323e32', disabled: this.disabled }, h("b2b-input-list", { key: 'ccf3037cf0f7d64ae7e5f37c1789a082886db2f2', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '59a0f64d0f39498ddf04b3cdced2c8111de1ada9' })), h("b2b-button", { key: '7a09cbe052e0c17e9c76a53fc3c7e4694ff71461', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon-100", { key: 'c4f19e34ed7129a57b2d7b1439a376ce11464611', icon: "b2b_icon-search", clickable: true })))));
+        return (h(Host, { key: '08be0d3238571d8a4e268d7a54d382114cd05ab4' }, h("b2b-input-group", { key: 'dbba9867d3b05f80edbf79973ca51cd9d7c9ec73', disabled: this.disabled }, h("b2b-input-list", { key: 'fec8bfb0012836b4ff458569130a016d36bbef2b', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '04bdd57ddbbde6f5f41f4704a2bbfa048df32aed' })), h("b2b-button", { key: '7e4d662ed1fd9423e77ee8e89beda95367f0a4a2', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon-100", { key: '44d5ac8b006f1fabf6d81735d6d626e0dcbbc339', icon: "b2b_icon-search", clickable: true })))));
     }
     get hostElement() { return this; }
 }, [1, "b2b-search", {

package/dist/components/b2b-shimmer.js

@@ -17,7 +17,7 @@ const ShimmerComponent = /*@__PURE__*/ proxyCustomElement(class ShimmerComponent
             width: `${this.width}px`,
             height: `${this.height}px`,
         };
-        return (h(Host, { key: 'd49facd00500b965059c0322adfc56961bc69f8e' }, this.loading ? (h("div", { class: "b2b-shimmer", style: shimmerStyle })) : (h("slot", null))));
+        return (h(Host, { key: 'd56356a77a4cc11ceee13d7e579a4df5aa9826f1' }, this.loading ? (h("div", { class: "b2b-shimmer", style: shimmerStyle })) : (h("slot", null))));
     }
     static get style() { return B2bShimmerStyle0; }
 }, [1, "b2b-shimmer", {

package/dist/components/b2b-snackbar.js

@@ -24,6 +24,9 @@ const SnackbarComponent = /*@__PURE__*/ proxyCustomElement(class SnackbarCompone
         this.close = () => {
             this.opened = false;
             this.b2bClose.emit();
+            if (this.timed && this.type !== 'error') {
+                this.clearTimer();
+            }
         };
         this.isActionPresent = () => {
             return this.hasAction;
@@ -61,22 +64,25 @@ const SnackbarComponent = /*@__PURE__*/ proxyCustomElement(class SnackbarCompone
         this.width = undefined;
     }
     onVisibleChange(newValue) {
+        if (newValue) {
+            this.open();
+        }
+    }
+    componentWillLoad() {
+        this.onVisibleChange(this.opened);
+    }
+    open() {
         if (this.timed && this.type !== 'error') {
-            if (newValue) {
-                this.remainingTime = this.duration;
-                this.startTimer();
-            }
-            else {
-                this.clearTimer();
-            }
+            this.remainingTime = this.duration;
+            this.startTimer();
         }
     }
     startTimer() {
+        this.clearTimer();
         if (this.timed && this.type !== 'error') {
-            this.clearTimer();
             this.startTime = Date.now();
             this.timeoutId = window.setTimeout(() => {
-                this.opened = false;
+                this.close();
             }, this.remainingTime);
         }
     }
@@ -90,17 +96,17 @@ const SnackbarComponent = /*@__PURE__*/ proxyCustomElement(class SnackbarCompone
         clearTimeout(this.timeoutId);
     }
     render() {
-        return (h(Host, { key: '693f7639a65edfd76e101540ccd663cc3f533448', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'f522b01889ee90866e2fd01036805139aa0f39df', class: {
+        return (h(Host, { key: 'b22311754d7186da6012cec8f82d251f3cbafd83', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '810bcfee20a5b9a88586ad1cb98c685819381847', class: {
                 'b2b-snackbar': true,
                 [`b2b-snackbar--${this.type}`]: true,
                 'b2b-snackbar--opened': this.opened,
-            }, style: this.width ? { width: this.width } : { width: 'auto' } }, h("div", { key: '3cafcd2cbff1203950ad15b038f0346e12232131', class: "b2b-snackbar__content" }, h("span", { key: '5811cd72a94d7ba281f3733dd9ed0281cb47c37f', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '079f6ad5e83c365a224bc0c1f9862cd6409a7a6d', class: "b2b-snackbar__content__description" }, this.description)), this.isActionPresent() && (h("div", { class: {
+            }, style: this.width ? { width: this.width } : { width: 'auto' } }, h("div", { key: 'd8e5cb8e8cda32693ae68055cb06918f51f1688d', class: "b2b-snackbar__content" }, h("span", { key: '8e31a914129f255151569eaf0e806f337b085f6d', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '3a6faa0dd08da3ea8f830bc59116ab50b574d770', class: "b2b-snackbar__content__description" }, this.description)), this.isActionPresent() && (h("div", { class: {
                 'b2b-snackbar__action': true,
                 [`b2b-snackbar__action--${this.type}`]: true,
-            }, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: '901aa5ad65f440e7de8a87e5a1fd88643b9766b6', class: {
+            }, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: '362ad1e19f9ea031f1ef5991da654d47a0a1f701', class: {
                 'b2b-snackbar__close-icon': true,
                 [`b2b-snackbar__close-icon--${this.type}`]: true,
-            }, onClick: this.close }, h("b2b-icon-100", { key: 'efd48b87b50a36d790f59bccfc3553a9d105adfd', clickable: true, size: 24, icon: "b2b_icon-close" })))));
+            }, onClick: this.close }, h("b2b-icon-100", { key: '1913c3bfc643fb845568c4388cdd300f6c3df8a7', clickable: true, size: 24, icon: "b2b_icon-close" })))));
     }
     static get watchers() { return {
         "opened": ["onVisibleChange"]
@@ -109,7 +115,7 @@ const SnackbarComponent = /*@__PURE__*/ proxyCustomElement(class SnackbarCompone
 }, [1, "b2b-snackbar", {
         "description": [1],
         "type": [1],
-        "opened": [1028],
+        "opened": [1540],
         "timed": [4],
         "duration": [2],
         "hasAction": [4, "has-action"],

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

@@ -127,7 +127,7 @@ const B2bTabGroupComponent = /*@__PURE__*/ proxyCustomElement(class B2bTabGroupC
         });
     }
     render() {
-        return (h(Host, { key: '8324f8a2a6c8b77a048bab28d3a5382f27c07ce1' }, h("slot", { key: 'b97fc6fb827875d8f70bd0f6c8e4b01d9b57d098', name: "tab" }), h("b2b-separator", { key: 'b1b68f251b274afc40cdb9e2e79fe3410cd21063' }), h("slot", { key: '93587b074a6354d31b038a130ca35548f6803f43', name: "panel" })));
+        return (h(Host, { key: '82c0d22d7738ecbbe49dc358a81759da436389ea' }, h("slot", { key: '073c3086c66b28ee4d90e38dfc3920ca58deccfd', name: "tab" }), h("b2b-separator", { key: 'd9906b47b55895b61883767817cd761b10225dd0' }), h("slot", { key: 'f01db3ddcdcb289170dbb8865bf6873dd9442b60', name: "panel" })));
     }
     get hostElement() { return this; }
 }, [1, "b2b-tab-group", {

package/dist/components/b2b-tab-panel.js

@@ -12,7 +12,7 @@ const B2bTabPanelComponent = /*@__PURE__*/ proxyCustomElement(class B2bTabPanelC
         this.generatedId = i++;
     }
     render() {
-        return (h(Host, { key: 'e4d4215b6795a66b2a944ef5d535552ef5adbba2', id: `b2b-tab-panel-${this.generatedId}`, role: "tabpanel" }, h("div", { key: '90736ddfab88b436b1b63cad2a69d8bbfcf3485d', class: "b2b-tab-panel" }, h("slot", { key: '11793052ee41b883a968e0d667ff44c9c30b73aa' }))));
+        return (h(Host, { key: 'af2fa2c4c2a00694c838ad5efcf293fde97a3cd4', id: `b2b-tab-panel-${this.generatedId}`, role: "tabpanel" }, h("div", { key: '3d14cdc1c06a1986cb4e3b23fce7d23fd907e6a1', class: "b2b-tab-panel" }, h("slot", { key: '76b6383394425c71055d82569dab910066265643' }))));
     }
     static get style() { return B2bTabPanelStyle0; }
 }, [1, "b2b-tab-panel"]);

package/dist/components/b2b-tab.js

@@ -25,12 +25,12 @@ const B2bTabComponent = /*@__PURE__*/ proxyCustomElement(class B2bTabComponent e
         }
     }
     render() {
-        return (h(Host, { key: '12d81a324c80b9005c0ac9524fcfe5db9efb831d', id: `b2b-tab-${this.generatedId}`, "aria-role": "tab", "aria-selected": this.selected, role: this.disabled ? false : 'tab', disabled: this.disabled, tabindex: this.disabled ? false : this.selected ? '0' : '-1' }, h("span", { key: 'f7c39b2cd098336fa4808a0ab8830631dc3db7db', class: {
+        return (h(Host, { key: '8aa1b1ae2ad6d9b2f77cbd882602caade8cc8355', id: `b2b-tab-${this.generatedId}`, "aria-role": "tab", "aria-selected": this.selected, role: this.disabled ? false : 'tab', disabled: this.disabled, tabindex: this.disabled ? false : this.selected ? '0' : '-1' }, h("span", { key: '896a95b6fe0e389c380bed8d7755ef04467470c2', class: {
                 'b2b-tab': true,
                 'b2b-tab--selected': this.selected,
                 'b2b-tab--disabled': this.disabled,
                 'b2b-tab--error': this.invalid,
-            } }, h("slot", { key: 'd8066ec2d861a5d623e118a14a474af951d9ea70' }))));
+            } }, h("slot", { key: '87e0d4dc4f316d16efde95c2e9f4c9fa63db984d' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -123,12 +123,12 @@ const TableRowComponent = /*@__PURE__*/ proxyCustomElement(class TableRowCompone
         }
     }
     render() {
-        return (h(Host, { key: 'e2986d793ab548b9452aded06773b63c86db8375', class: {
+        return (h(Host, { key: '9a5b7dad23904822431e478a2cba8afd65d41d49', class: {
                 'b2b-table-row': true,
                 ['b2b-table-row--colspan']: this.size === TableSizes.COLSPAN,
                 ['b2b-table-row--highlight']: this.highlight,
                 [`b2b-table-row--color-${this.getRowColor()}`]: true,
-            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: '72962668970275a6e00cd99c98871241f6fd2956' })));
+            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: 'ce9384518ed7337c3e0bd6e22a8b206af8a7452e' })));
     }
     get hostElement() { return this; }
     static get style() { return B2bTableRowStyle0; }

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

@@ -120,11 +120,11 @@ const TableRowgroupComponent = /*@__PURE__*/ proxyCustomElement(class TableRowgr
         this.makeHeaderRowNotSelectable();
     }
     render() {
-        return (h(Host, { key: '5f69a02dde8828439de23f661b3237c8cd2061da', class: {
+        return (h(Host, { key: '13fd30394de031e092fba44f9321c87a3e8429ec', class: {
                 ['b2b-table-rowgroup__' + this.type]: true,
                 'b2b-table-rowgroup--fixed': this.fixed,
                 'b2b-table-rowgroup--colspan': this.size === TableSizes.COLSPAN,
-            }, role: "rowgroup" }, h("slot", { key: '4df0d32b50e5c4dccee61cfd39d44da34c37960a' })));
+            }, role: "rowgroup" }, h("slot", { key: '7858dfcb69a29d791bd419a30b9cc4f95e3b2280' })));
     }
     get host() { return this; }
     static get style() { return B2bTableRowgroupStyle0; }

package/dist/components/b2b-table.js

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

package/dist/components/b2b-textarea.js

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

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

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

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

@@ -40,11 +40,11 @@ const B2BToggleChipComponent = /*@__PURE__*/ proxyCustomElement(class B2BToggleC
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '3eed467bbc6068073c8bd601115fc54b3b6f3fe0' }, h("span", { key: '4a94f8cb72a4f129df07b39c0676b7a51b309d77', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
+        return (h(Host, { key: 'f1666274891d2a73ec37becece45d1b756bc7510' }, h("span", { key: '3ac8a839ad72f507a091863d06ee7620ea4795d1', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
                 'b2b-toggle-chip': true,
-            } }, h("input", { key: '38d66b138ffc4215fe22d430c3c396f09c763a86', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
+            } }, h("input", { key: '6233e0b013d8136768f46f771ecc76bbfd663794', "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: '3b29bd1cfb6d0387715d8d151f024dc369071a47', 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: 'b100606b6bba9648d00b2660de654d045dc8aa85', 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/components/b2b-toggle-group.js

@@ -53,10 +53,10 @@ const B2BToggleGroup = /*@__PURE__*/ proxyCustomElement(class B2BToggleGroup ext
         }
     }
     render() {
-        return (h(Host, { key: '2736df48eff433ad9040e2cad8668b1a08e97c25' }, h("div", { key: '32c10360a73e3c901d4b244ed9584290365b70b1', class: {
+        return (h(Host, { key: 'e81f98de29ab06594da8b9e19e68f4ec9f3c878f' }, h("div", { key: 'a590585c94ab40ea54abd08031ab9b1482bc4a78', class: {
                 'b2b-toggle-group': true,
                 'b2b-toggle-group--disabled': this.disabled,
-            } }, h("fieldset", { key: '053f62bdb8a5293b2c5e9f8e55686181726f6870' }, h("slot", { key: 'a25c46e0def62b2bf31228e350eaf2d78580b661' })))));
+            } }, h("fieldset", { key: 'f8a20fb30c7b5fd958171f91a2219a2efbd7a5ca' }, h("slot", { key: '3e0bc10d09053d008a9d771721c57463ce437e27' })))));
     }
     get host() { return this; }
     static get watchers() { return {