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

package/dist/esm/b2b-multiselect-dropdown.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ab9eb36d.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 = class {
@@ -8,6 +8,9 @@ const B2bMultiSelectDropdown = class {
         registerInstance(this, hostRef);
         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);
@@ -50,6 +53,7 @@ const B2bMultiSelectDropdown = class {
         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) => {
@@ -65,17 +69,32 @@ const B2bMultiSelectDropdown = class {
                 .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();
             }
@@ -84,6 +103,8 @@ const B2bMultiSelectDropdown = class {
             }
         };
         this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
             if (event.key === 'Enter') {
                 event.preventDefault();
                 this.resetFocus();
@@ -122,55 +143,77 @@ const B2bMultiSelectDropdown = class {
         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 getElement(this); }
     static get watchers() { return {
         "optionsList": ["watchPropHandler"],
+        "selectedValues": ["handleSelectedValuesChangeFromOutside"],
         "currentSelectedValues": ["handleSelectedValuesChange"]
     }; }
 };

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

@@ -104,7 +104,7 @@ const PaginationComponent = class {
         };
     }
     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/esm/b2b-paragraph.entry.js

@@ -14,7 +14,7 @@ const ParagraphComponent = class {
         this.display = 'block';
     }
     render() {
-        return (h("p", { key: '410bec2bfaa21c973ecb2c8a40238ca8e858b95f', style: {
+        return (h("p", { key: 'c3781dc7215762d8dd038791943a541231731653', style: {
                 display: this.display,
             }, class: {
                 'b2b-paragraph': true,
@@ -23,7 +23,7 @@ const ParagraphComponent = class {
                 ['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' })));
     }
 };
 ParagraphComponent.style = B2bParagraphStyle0;

package/dist/esm/b2b-progress-bar.entry.js

@@ -22,11 +22,11 @@ const ProgressBarComponent = class {
     }
     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/esm/b2b-radio-button.entry.js

@@ -61,11 +61,11 @@ const B2bRadioButtonComponent = class {
         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 getElement(this); }

package/dist/esm/b2b-radio-group.entry.js

@@ -75,11 +75,11 @@ const RadioButtonGroupComponent = class {
         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 getElement(this); }

package/dist/esm/b2b-required-separator.entry.js

@@ -9,7 +9,7 @@ const B2BRequiredSeparator = class {
         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' })));
     }
 };
 B2BRequiredSeparator.style = B2bRequiredSeparatorStyle0;

package/dist/esm/b2b-rounded-icon.entry.js

@@ -11,16 +11,16 @@ const RoundedIconComponent = class {
         this.contentColor = 'var(--b2b-color-copy-default)';
     }
     render() {
-        return (h(Host, { key: 'aeaecbab894eae02bf8cc6c441175ec07b5540e2' }, h("div", { key: '1b25b7d2d917c742361c8126b11d5254a9fac9c1', style: {
+        return (h(Host, { key: 'cd603c194ebc3a9d6aad8e16b126ac40e47e4715' }, h("div", { key: '102c49254d5e135173553379ce5ced7022dddaa7', style: {
                 ['background-color']: this.color,
                 ['border']: `1px solid ${this.borderColor || this.color}`,
             }, class: {
                 'b2b-rounded-icon': true,
-            } }, h("div", { key: '0c5f34202db459eb45f37d1fb16bede9dd50a2e7', style: {
+            } }, h("div", { key: '447ece59e96780c6c6e0ddccc878354756e46ff7', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: 'f87224fdf932a13ed106c10a2ff9b173fc833bee', name: "icon" })), h("div", { key: 'a0cbad312cc610ee4f18a76b32c3d690dcd6a7b2', style: {
+            } }, h("slot", { key: 'a25891a5262400e671243fd8716f72d3b0035520', name: "icon" })), h("div", { key: 'b08770631a2ca349d90e0a9e7dd445aecf9135d9', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: '518902a11b10391fdb5d654baaf84ba6f7c0c65e', name: "text" })))));
+            } }, h("slot", { key: '64619abcebfc3d8e80e9edc26c9808876860de8d', name: "text" })))));
     }
 };
 RoundedIconComponent.style = B2bRoundedIconStyle0;

package/dist/esm/b2b-scrollable-container.entry.js

@@ -8,7 +8,7 @@ const ScrollableContainerComponent = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '2fd5cba6708e2ec70567ea9b582ad5c2cbc9531f' }, h("slot", { key: '9998b1dcb05a6396e288317365d56e983baeb002' })));
+        return (h(Host, { key: '234c8e341e9dc85b7c8d7fc742445f61045b9cf6' }, h("slot", { key: 'd67a95c9c3a1a9f7ac75924d639c095578fcb2f1' })));
     }
     get host() { return getElement(this); }
 };

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

@@ -25,7 +25,7 @@ const SearchComponent = class {
         }
     }
     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 getElement(this); }
 };

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

@@ -9,7 +9,7 @@ const B2bSeparatorComponent = class {
         this.alignment = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '2a85d5e6381c1c666d57d9439ee6df185b7e41d3' }, h("div", { key: '6939b9e06e5c27d2ea0299a1165accaeeb33bc3e', class: {
+        return (h(Host, { key: '06f767c6c587079b6ed216081a4df3c9e599d28f' }, h("div", { key: 'c4439cc5b13f6b2932e982c03a3c2518341ef8f2', class: {
                 [`b2b-separator--${this.alignment}`]: true,
             } })));
     }

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

@@ -15,7 +15,7 @@ const ShimmerComponent = class {
             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))));
     }
 };
 ShimmerComponent.style = B2bShimmerStyle0;

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

@@ -21,6 +21,9 @@ const SnackbarComponent = class {
         this.close = () => {
             this.opened = false;
             this.b2bClose.emit();
+            if (this.timed && this.type !== 'error') {
+                this.clearTimer();
+            }
         };
         this.isActionPresent = () => {
             return this.hasAction;
@@ -58,22 +61,25 @@ const SnackbarComponent = class {
         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);
         }
     }
@@ -87,17 +93,17 @@ const SnackbarComponent = class {
         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"]

package/dist/esm/b2b-tab-group.entry.js

@@ -124,7 +124,7 @@ const B2bTabGroupComponent = class {
         });
     }
     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 getElement(this); }
 };

package/dist/esm/b2b-tab-panel.entry.js

@@ -10,7 +10,7 @@ const B2bTabPanelComponent = class {
         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' }))));
     }
 };
 B2bTabPanelComponent.style = B2bTabPanelStyle0;

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

@@ -23,12 +23,12 @@ const B2bTabComponent = class {
         }
     }
     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 getElement(this); }
     static get watchers() { return {

package/dist/esm/b2b-table-cell_2.entry.js

@@ -40,14 +40,14 @@ const TableCellComponent = class {
         }
     }
     render() {
-        return (h(Host, { key: 'c9054312fdf96b346c6ed6633845b676471ee1e6', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
+        return (h(Host, { key: '571ec5bc494057bfbe9c9146da086bb6a192f298', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
                 'b2b-table-cell': true,
                 ['b2b-table-cell--colspan']: this.size === TableSizes.COLSPAN,
                 ['b2b-table-cell--ellipsis']: this.useTextEllipsis,
                 ['b2b-table-cell--' + this.align]: true,
                 ['b2b-table-cell--divider']: this.divider,
                 [`b2b-table-cell-color-${this.color}`]: true,
-            }, role: "cell" }, h("slot", { key: 'f05c8ea4484ce55c6f08a85034883fe74051638f' })));
+            }, role: "cell" }, h("slot", { key: '10385f497f0061d09b227b88456205bac24f272f' })));
     }
     get host() { return getElement(this); }
 };
@@ -127,7 +127,7 @@ const TableHeaderComponent = class {
         this.setIconPlacement();
     }
     render() {
-        return (h(Host, { key: 'e6604084cded7295c561d2ddcb443fa4ac890a96', class: {
+        return (h(Host, { key: '34f96e3a7c5c36cafadb463a72f1acec6550d367', class: {
                 [`b2b-table-header--${this.sortDirection && this.iconAlign}`]: true,
                 'b2b-table-header--divider': this.divider,
                 [`b2b-table-header--${this.size}`]: true,

package/dist/esm/b2b-table-row.entry.js

@@ -116,12 +116,12 @@ const TableRowComponent = class {
         }
     }
     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 getElement(this); }
 };

package/dist/esm/b2b-table-rowgroup.entry.js

@@ -118,11 +118,11 @@ const TableRowgroupComponent = class {
         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 getElement(this); }
 };

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

@@ -65,9 +65,9 @@ const TableComponent = class {
         }
     }
     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 getElement(this); }
 };

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

@@ -50,10 +50,10 @@ const B2BTextareaComponent = class {
         }
     }
     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 getElement(this); }

package/dist/esm/b2b-toggle-button.entry.js

@@ -37,13 +37,13 @@ const B2bToggleButtonComponent = class {
         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/esm/b2b-toggle-chip.entry.js

@@ -38,11 +38,11 @@ const B2BToggleChipComponent = class {
         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,