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

package/dist/esm/b2b-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 dropdownCss = ":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(.b2b-dropdown){--b2b-border-radius:var(--b2b-size-border-radius-100);--b2b-border-right:1px solid var(--b2b-color-grey-200);display:block;width:100%;min-width:fit-content;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);max-width:600px}:host(.b2b-dropdown) .b2b-dropdown__select{font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);appearance:none;background-color:var(--b2b-color-white-100);background-image:url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path d=\"M27.748 12.017l-11.333 9.01a.666.666 0 0 1-.829 0l-11.333-9a.665.665 0 1 1 .829-1.044l10.919 8.671 10.919-8.68a.663.663 0 0 1 .936.107.667.667 0 0 1-.107.937z\"/></svg>');background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5rem;width:100%;min-width:fit-content;border:1px solid var(--b2b-color-grey-200);border-right:var(--b2b-border-right);border-radius:var(--b2b-border-radius);padding:7px 10px 6px;padding-right:calc(1.75rem + 6px);height:var(--b2b-size-90);line-height:var(--b2b-size-copy-line-height-100);box-sizing:border-box;position:relative}:host(.b2b-dropdown) .b2b-dropdown__select:focus-visible{outline:2px solid Highlight;outline:2px solid -webkit-focus-ring-color;border-radius:var(--b2b-border-radius);outline-offset:-1px;z-index:9999}:host(.b2b-dropdown) b2b-input-label{display:block;margin-bottom:var(--b2b-size-5)}:host(.b2b-dropdown) span{display:block;color:var(--b2b-color-grey-300);margin-top:var(--b2b-size-10);font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75)}:host(.b2b-dropdown--error) .b2b-dropdown__select{background-color:var(--b2b-color-error-50);border:1px solid var(--b2b-color-error-100);border-right:var(--b2b-border-right);border-color:var(--b2b-color-error-100)}:host(.b2b-dropdown--error) .b2b-dropdown__select:focus{outline:2px solid var(--b2b-color-error-100);outline-offset:-1px}:host(.b2b-dropdown--error) span{color:var(--b2b-color-error-100)}:host(.b2b-dropdown--disabled) .b2b-dropdown__select{background-image:url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"grey\" viewBox=\"0 0 32 32\"><path d=\"M27.748 12.017l-11.333 9.01a.666.666 0 0 1-.829 0l-11.333-9a.665.665 0 1 1 .829-1.044l10.919 8.671 10.919-8.68a.663.663 0 0 1 .936.107.667.667 0 0 1-.107.937z\"/></svg>');background-color:var(--b2b-color-grey-25);color:var(--b2b-color-grey-250);border-color:var(--b2b-color-grey-200);opacity:1}";
+const dropdownCss = ":root,:host{--b2b-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(.b2b-dropdown){--b2b-border-radius:var(--b2b-size-border-radius-100);--b2b-border-right:1px solid var(--b2b-color-grey-200);display:block;position:relative;width:100%;min-width:fit-content;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);max-width:600px}:host(.b2b-dropdown) .b2b-dropdown__wrapper{display:flex;position:relative;width:100%;box-sizing:border-box;flex:1}:host(.b2b-dropdown) .b2b-dropdown__select{font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);appearance:none;background-color:var(--b2b-color-white-100);background-image:url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path d=\"M27.748 12.017l-11.333 9.01a.666.666 0 0 1-.829 0l-11.333-9a.665.665 0 1 1 .829-1.044l10.919 8.671 10.919-8.68a.663.663 0 0 1 .936.107.667.667 0 0 1-.107.937z\"/></svg>');background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5rem;width:100%;min-width:fit-content;border:1px solid var(--b2b-color-grey-200);border-right:var(--b2b-border-right);border-radius:var(--b2b-border-radius);padding:7px 10px 6px;padding-right:calc(1.75rem + 6px);height:var(--b2b-size-90);line-height:var(--b2b-size-copy-line-height-100);box-sizing:border-box;text-align:left;overflow-x:auto;overflow-y:hidden}:host(.b2b-dropdown) .b2b-dropdown__select--focused{outline:2px solid Highlight;outline:2px solid -webkit-focus-ring-color;border-radius:var(--b2b-border-radius);outline-offset:-1px;z-index:300}:host(.b2b-dropdown) .b2b-dropdown__select--open{outline:2px solid Highlight;outline:2px solid -webkit-focus-ring-color;border-radius:var(--b2b-border-radius);outline-offset:-1px;z-index:1001}:host(.b2b-dropdown) .b2b-dropdown__options{display:block;background-color:var(--b2b-color-white-100);max-height:288px;overflow-y:auto;margin:0;border-right:var(--b2b-size-1) solid var(--b2b-color-black-100);border-left:var(--b2b-size-1) solid var(--b2b-color-black-100);border-bottom:var(--b2b-size-1) solid var(--b2b-color-black-100);margin-top:0;border-top:none;text-align:left;top:100%;position:absolute;left:0;right:0;width:100%;z-index:1000;box-sizing:border-box;white-space:pre-wrap}:host(.b2b-dropdown) .b2b-dropdown__option{padding:10px;cursor:pointer;font-size:var(--b2b-size-copy-100);margin-top:0;border-top:none;display:block;width:100%;box-sizing:border-box}:host(.b2b-dropdown) .b2b-dropdown__option:hover{background-color:var(--b2b-color-hover-default)}:host(.b2b-dropdown) .b2b-dropdown__option--disabled{color:var(--b2b-color-grey-250);background-color:var(--b2b-color-white-100);pointer-events:none}:host(.b2b-dropdown) b2b-input-label{display:block;margin-bottom:var(--b2b-size-5)}:host(.b2b-dropdown) span{display:block;color:var(--b2b-color-grey-300);margin-top:var(--b2b-size-10);font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75)}:host(.b2b-dropdown--error) .b2b-dropdown__select{background-color:var(--b2b-color-error-50);border:1px solid var(--b2b-color-error-100);border-right:var(--b2b-border-right);border-color:var(--b2b-color-error-100)}:host(.b2b-dropdown--error) .b2b-dropdown__select:focus{outline:2px solid var(--b2b-color-error-100);outline-offset:-1px}:host(.b2b-dropdown--error) span{color:var(--b2b-color-error-100)}:host(.b2b-dropdown--disabled) .b2b-dropdown__select{background-image:url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"grey\" viewBox=\"0 0 32 32\"><path d=\"M27.748 12.017l-11.333 9.01a.666.666 0 0 1-.829 0l-11.333-9a.665.665 0 1 1 .829-1.044l10.919 8.671 10.919-8.68a.663.663 0 0 1 .936.107.667.667 0 0 1-.107.937z\"/></svg>');background-color:var(--b2b-color-grey-25);color:var(--b2b-color-grey-250);border-color:var(--b2b-color-grey-200);opacity:1}";
 const B2bDropdownStyle0 = dropdownCss;
 
 const DropdownComponent = class {
@@ -9,26 +9,60 @@ const DropdownComponent = class {
         this.b2bChange = createEvent(this, "b2b-change", 7);
         this.b2bFocus = createEvent(this, "b2b-focus", 7);
         this.b2bBlur = createEvent(this, "b2b-blur", 7);
-        this.onSelect = (ev) => {
-            const option = ev.target;
-            this.b2bChange.emit(option.value);
+        this.truncatedText = '';
+        this.onClickOutside = (ev) => {
+            if (!this.hostElement.contains(ev.target))
+                this.isOpen = false;
+        };
+        this.toggleDropdown = () => {
+            if (!this.disabled)
+                this.isOpen = !this.isOpen;
         };
         this.onFocus = (ev) => {
+            this.focused = true;
             this.b2bFocus.emit(ev);
         };
         this.onBlur = (ev) => {
+            this.focused = false;
             this.b2bBlur.emit(ev);
         };
-        this.getSelectElement = () => {
-            return this.hostElement.shadowRoot.querySelector('select');
+        this.onSelect = (event) => {
+            var _a;
+            const target = event.target;
+            const value = target.getAttribute('data-value');
+            const label = (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+            if (value) {
+                this.selectedValue = value;
+                this.selectedText = label || '';
+                this.b2bChange.emit(value);
+                this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: opt.value === value })));
+                this.isOpen = false;
+                this.updateTruncatedText();
+            }
         };
-        // TODO: find a way to test it maybe when migrating to new testing framework
-        this.handleFormData = (event) => {
-            if (this.name != undefined) {
-                const selectElement = this.getSelectElement();
-                const value = selectElement.value || '';
-                event.formData.append(this.name, value);
+        this.updateTruncatedText = () => {
+            if (!this.selectEl)
+                return;
+            const rawText = this.selectedText || this.placeholder;
+            const style = window.getComputedStyle(this.selectEl);
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+            const availableWidth = this.selectEl.clientWidth - parseFloat(style.paddingRight || '0') - 24;
+            if (ctx.measureText(rawText).width <= availableWidth) {
+                this.truncatedText = rawText;
+                return;
+            }
+            let truncated = '';
+            for (let i = 0; i < rawText.length; i++) {
+                const test = rawText.slice(0, i + 1) + '…';
+                if (ctx.measureText(test).width > availableWidth)
+                    break;
+                truncated = rawText.slice(0, i + 1);
             }
+            this.truncatedText = truncated + '…';
         };
         this.label = undefined;
         this.required = false;
@@ -39,35 +73,84 @@ const DropdownComponent = class {
         this.invalid = false;
         this.hint = undefined;
         this.error = undefined;
+        this.isOpen = false;
+        this.focused = false;
+        this.selectedValue = '';
+        this.selectedText = '';
+        this.options = [];
     }
-    connectedCallback() {
-        const form = this.hostElement.closest('form');
-        if (form != null) {
-            form.addEventListener('formdata', this.handleFormData);
-        }
+    /** Method to programmatically clear selection of the dropdown. */
+    async clearSelection() {
+        this.selectedValue = this.placeholderValue || '';
+        this.selectedText = this.placeholder || 'Select an option...';
+        this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: false })));
+        this.isOpen = false;
+        this.updateTruncatedText();
+    }
+    componentWillLoad() {
+        this.selectedValue = this.placeholderValue || '';
+        this.selectedText = '';
     }
-    // we need to attach the options to the correct element here
     componentDidLoad() {
-        let options = this.hostElement.querySelectorAll('option');
-        const selectElement = this.getSelectElement();
-        selectElement.innerHTML = '';
-        const placeholderOption = document.createElement('option');
-        placeholderOption.value = this.placeholderValue;
-        placeholderOption.textContent = this.placeholder;
-        placeholderOption.disabled = true;
-        placeholderOption.selected = true;
-        selectElement.append(placeholderOption);
-        selectElement.append(...options);
+        this.initializeOptions();
+        this.updateTruncatedText();
+        document.addEventListener('click', this.onClickOutside);
+        window.addEventListener('resize', this.updateTruncatedText);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.onClickOutside);
+        window.removeEventListener('resize', this.updateTruncatedText);
+    }
+    watchDropdownState() {
+        if (this.isOpen)
+            this.closeOtherDropdowns();
+    }
+    initializeOptions() {
+        const nativeOptions = Array.from(this.hostElement.querySelectorAll('option'));
+        this.options = nativeOptions.map(opt => {
+            var _a;
+            return ({
+                value: opt.value,
+                label: ((_a = opt.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '',
+                selected: opt.hasAttribute('selected'),
+                disabled: opt.hasAttribute('disabled'),
+            });
+        });
+        const selected = this.options.find(o => o.selected);
+        if (selected) {
+            this.selectedValue = selected.value;
+            this.selectedText = selected.label;
+        }
+    }
+    closeOtherDropdowns() {
+        const others = document.querySelectorAll('b2b-dropdown');
+        others.forEach(el => {
+            if (el !== this.hostElement)
+                el.isOpen = false;
+        });
     }
     render() {
-        return (h(Host, { key: '30f4c1df7c95889b14aaa246d89842314cca4c88', class: {
+        const hasError = this.invalid && !this.disabled;
+        const showHint = this.hint && (!this.invalid || this.disabled);
+        const showError = this.error && hasError;
+        return (h(Host, { key: '09be0fe07181c102f688599b581973d03c6347ae', class: {
                 'b2b-dropdown': true,
-                'b2b-dropdown--error': this.invalid && !this.disabled,
+                'b2b-dropdown--error': hasError,
                 'b2b-dropdown--disabled': this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { key: '03465e345631d5cfe44a2edb0e3c29b9b1adb4e7', class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (this.hint !== undefined && !this.invalid) ||
-            (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: 'f4756d9f9550c1adc4aa618e9e7c673bfd89037a', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '5fed7fbb2599116576887c05d85b884367e2bf0e', class: {
+                'b2b-dropdown__select': true,
+                'b2b-dropdown__select--open': this.isOpen,
+                'b2b-dropdown__select--focused': this.focused,
+            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.selectedText ? this.truncatedText : this.placeholder), this.isOpen && (h("div", { class: "b2b-dropdown__options", role: "listbox" }, this.options.map(option => (h("div", { key: option.value, class: {
+                'b2b-dropdown__option': true,
+                'b2b-dropdown__option--selected': option.selected,
+                'b2b-dropdown__option--disabled': option.disabled,
+            }, "data-value": option.value, onClick: !option.disabled ? this.onSelect : undefined, role: "option", "aria-selected": option.selected ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : 'false' }, option.label)))))), showHint && h("span", null, this.hint), showError && h("span", null, this.error)));
     }
     get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "isOpen": ["watchDropdownState"]
+    }; }
 };
 DropdownComponent.style = B2bDropdownStyle0;
 

package/dist/esm/b2b-flyout-menu-option.entry.js

@@ -22,7 +22,7 @@ const FlyoutMenuOptionComponent = class {
         }
     }
     render() {
-        return (h(Host, { key: '3dc359231f65e0d900c87a90fb16917dec1cef05', class: {
+        return (h(Host, { key: '091032b33e9695886e133e065d4b5c72480373e8', class: {
                 'b2b-flyout-menu__option': true,
                 'b2b-flyout-menu__option--disabled': this.disabled,
                 'b2b-flyout-menu__option--separator': this.separator,

package/dist/esm/b2b-flyout-menu.entry.js

@@ -167,12 +167,12 @@ const FlyoutMenuComponent = class {
         options[index].focus();
     }
     render() {
-        return (h(Host, { key: '44ec3f9b4e574a3327717361bd6c09c5f1958d41' }, h("div", { key: '9ea8f1494bfede3a0853a0e74a5d5854e0bdf082', class: {
+        return (h(Host, { key: '2c09480c749bcee0f8fd7807deb41b4862c1221e' }, h("div", { key: 'a087ad4e5ff06f7fdc586b415f2cc1196daae515', class: {
                 'b2b-flyout-menu': true,
-            } }, h("div", { key: 'c48765324a3ca6ef0b885d23405269e9351c14c6', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '756bdb0f2adbf262397bc5207cb5e6add87e4ef2', name: "trigger" })), h("div", { key: 'ef57778748783ffb269f5023b67eabd681cfb37d', onFocusout: this.blurMenu, class: {
+            } }, h("div", { key: 'e36aff2c778c2277e5d5d90c13d7f7d92ef7e04c', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '1581b6010ef02e5745b726d0f73fd3cc8caf67fe', name: "trigger" })), h("div", { key: '3d2f97df8aad17d0963601f62c4c18b488393d6d', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, h("div", { key: '9ae1550fb14f6bbe584935169796375f58916891', class: "b2b-flyout-menu__arrow" }), h("slot", { key: '10ff787b762245d5457cdb4f70f8affa9f0375e8', name: "option" })))));
+            } }, h("div", { key: 'db72e397e2dde6129468e657aaf49fdf5a470426', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'ac802410833c596abdf5056f8a6e09bc12f885a6', name: "option" })))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/b2b-grid-col.entry.js

@@ -15,7 +15,7 @@ const B2bGridColumnComponent = class {
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: 'd0700384ac12f6b13705e2578ae72a4f8389a4cb', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}`, ['min-width']: '1px' }) }, h("slot", { key: '2e02491bdb05218d40a8f01af1c574c63f795298' })));
+        return (h(Host, { key: '935d5d42d247393cdcf7d247212182bb040998da', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'd3d0ce4a59f9d17b2b5dc9bdae249135c31b771c' })));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -68,7 +68,7 @@ const B2bGridRowComponent = class {
         });
     }
     render() {
-        return (h(Host, { key: '3ae300a50257bbb2e482b5161b0b1b8d5f087d01', style: {
+        return (h(Host, { key: '9c863ba4e90c06366599c6244f2307c842448d6a', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -76,7 +76,7 @@ const B2bGridRowComponent = class {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: '0828e8497a5e6f76ffeb272f51675b6f5013fdba' })));
+            } }, h("slot", { key: 'c71d99c0c3f9073620237493528a4216033ce02e' })));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-ab9eb36d.js';
 
-const gridCss = ":host(.b2b-grid){width:100%;margin:0 auto;box-sizing:border-box}:host(.b2b-grid-col){display:flex;flex-direction:column;min-width:0}";
+const gridCss = ":host(.b2b-grid){width:100%;margin:0 auto;box-sizing:border-box}";
 const B2bGridStyle0 = gridCss;
 
 const B2bGridComponent = class {
@@ -9,7 +9,7 @@ const B2bGridComponent = class {
         this.margin = 24;
     }
     render() {
-        return (h(Host, { key: 'd969835eaef0a092de761496f817e3aeb9fe9da3', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '457acba45d11bb8ed33008c1158f89d33f5222f6' })));
+        return (h(Host, { key: 'a07f27f3ed6961913c048630d3860ba7a9668cc8', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '6390574c52c986c73c84912586d073383ee035d8' })));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/b2b-input-group_2.entry.js

@@ -61,7 +61,7 @@ const B2BInputGroup = class {
         }
     }
     render() {
-        return (h(Host, { key: '43603b7006f229a5ee288cc9c86c5509dc3d074f' }, h("div", { key: '268bd1737a9390c53f1294eb0a45ad3b041ad5bb', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '9c3c5fc67ce75fba846aacf456660760c00a4aa9', name: "start" }), h("slot", { key: 'd8db016be6494540aa73fca778b77a49dc1211e8' }), h("slot", { key: 'be32b1d7e14e8beaa2149c1ccc6cc8cf92e735d9', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
+        return (h(Host, { key: '24026d76ddfed82c245b4d3642ecb01afb7f77a8' }, h("div", { key: '28919f9eaf9621f23f48dee02160d7096ca2d371', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '49b4c84997cfcfe6ac0866c01a06919b5e209a3f', name: "start" }), h("slot", { key: 'e20d5a7f1590833eed730eea609e439bc077ea98' }), h("slot", { key: '1991b8a7e3094d5f8531c227de435b36f32e9b33', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
                 'b2b-input-wrapper__hint': true,
                 'b2b-input-wrapper__hint--error': this.invalid && !this.disabled,
             } }, this.invalid && !this.disabled ? this.error : this.hint))));
@@ -217,13 +217,13 @@ const InputListComponent = class {
     */
     render() {
         const groupOrderClass = this.getGroupOrderClassName() || '';
-        return (h(Host, { key: 'cee8194b1c04e5d7c125d6fbef762a6256b522a6', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '075f5137c650bec5608b07bc834c36bd0be8dd83', class: {
+        return (h(Host, { key: '1c98a26046f943cbc2a8cfc75e518117d9b6d88c', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '12546194e29a272ad58f8ba911621414f67fdbdd', class: {
                 'b2b-input-list': true,
                 'b2b-input-list__options-on': this.hasOptionList &&
                     this.isElementFocused &&
                     Boolean(this.value),
                 [groupOrderClass]: true,
-            } }, h("b2b-input", { key: 'd2d23370cc4e430e68a4e75014ea31d19802557f', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
+            } }, h("b2b-input", { key: '2670186f46694d0647b313c0533a569398494aaf', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/b2b-input-label.entry.js

@@ -10,11 +10,11 @@ const InputLabelComponent = class {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '126328bc7fd56d56e2a57559707cbba2a482dbd7' }, h("label", { key: 'c8b6cedbd7f453c6ef5c42c7e9d373b5c8bcd648', class: {
+        return (h(Host, { key: 'd65e36229d0da25028f11d3a09882824d34ef5ad' }, h("label", { key: 'd41e79b91dc83d081948c37a1f9a362e5eafd2ff', class: {
                 'b2b-input-label': true,
                 'b2b-input-label--required': this.required,
                 'b2b-input-label--disabled': this.disabled,
-            } }, h("slot", { key: '3ae21cf9871d0033febc12445c525f21a343f4e5' }))));
+            } }, h("slot", { key: '5615f825313d29875390bcc1feadac5cb642bc8a' }))));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -105,18 +105,18 @@ const InputComponent = class {
         this.filterHintSlotContent();
     }
     render() {
-        return (h(Host, { key: '8d1ca422e0a614f9fdd808c5be225c1e5f20393d', class: {
+        return (h(Host, { key: 'a978500a9c7df89afc59777cc9f3b6b7c927bce6', class: {
                 'b2b-input': true,
                 'b2b-input--error': this.invalid && !this.disabled,
-            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '9a0881a2659bd4cd165be43b62e082c6e54d78d4', class: {
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '62f81b08c3b93a4fbe932dc4ff93c2de1b0c768c', class: {
                 'b2b-input__wrapper': true,
                 'b2b-input__wrapper--focused': this.hasFocus,
                 'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
-            } }, h("slot", { key: '5e64fdbdf8c4f2c206f2796510b4a91af4cc0b4d', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: 'a661e9b0e1553aa28bb0151f917041b57b42f07a', class: {
+            } }, h("slot", { key: 'cfe4238dbd60927cda52c858ac692318c0d4956e', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: 'e9956a409517f93fae827a8d43665b101d0df69a', class: {
                 'b2b-input__native-input': true,
                 ['b2b-input__native-input--align-' + this.inputTextAlign]: true,
                 'b2b-input__native-input--disabled': this.disabled,
-            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: 'cb32fe135408274018be0b800d0b2321756c0c9c', name: "end" })), (this.hint !== undefined || this.hintSlot) &&
+            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: '30ce6e78661453a77611a19aa7fbd98925fd76a6', name: "end" })), (this.hint !== undefined || this.hintSlot) &&
             (!this.invalid || this.disabled) ? (h("span", null, h("slot", { name: "hint" }, this.hint))) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     get hostElement() { return getElement(this); }
@@ -141,7 +141,7 @@ const InputListOptionComponent = class {
         }
     }
     render() {
-        return (h(Host, { key: '2bd67457a721cf4a0c05335a70897c1377e02a14', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
+        return (h(Host, { key: 'a08b2363f67ea513b438d8a0c7b3addb7af5155a', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
     }
 };
 InputListOptionComponent.style = B2bInputListOptionStyle0;

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

@@ -9,10 +9,10 @@ const LabelComponent = class {
         this.type = 'neutral';
     }
     render() {
-        return (h("span", { key: '18b846e1287dcc46de3b719285f548dc2dda3591', class: {
+        return (h("span", { key: '36fd4a402ca1ac859e61f65a03e387d700d7133c', class: {
                 'b2b-label': true,
                 [`b2b-label--${this.type}`]: true,
-            } }, h("slot", { key: '3b2ec04870ce83e0bfe8910cf2224ce44df31706' })));
+            } }, h("slot", { key: 'f6baa21d06fa1ac1e7192f639bea7d070a4881d8' })));
     }
 };
 LabelComponent.style = B2bLabelStyle0;

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

@@ -206,10 +206,10 @@ const ModalComponent = class {
         this.attemptFocus(this.getFirstFocusableElement());
     }
     render() {
-        return (h(Host, { key: '05b9d293228c39dd82ad3b27c2dbba6432f63686' }, h("div", { key: 'efff47d3cdcf4e692687f326238b7e05f4262dc9', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: 'bb2bd023ecfdf7a25975d04630f6b8d91c4c4238', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: 'ea87924e8112672d9d76173509107ef820e1eaba', class: {
+        return (h(Host, { key: 'b4b05e83f2b046b95c1a6b99497d1773c2a9b47a' }, h("div", { key: '53f334ae7646d4f76356bfbab36f2fa15a5b573e', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: '9956a9df55629700f513900645edf57069040607', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: '42ec92fe4ea857844ead5918d7feeeb300af11d7', class: {
                 'b2b-modal__dialog': true,
                 [`b2b-modal__dialog--${this.variant}`]: true,
-            } }, h("div", { key: '367bfc5a0dde6ec1f91a9461bec1af6833446c26', class: "b2b-modal__dialog__header" }, h("div", { key: '22bfcbcc0bd2056a60e4b9fe8ee76263a5aaf60b', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: 'f1ecab2113e756f8a37e9e136608bf44e74491ca', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: '42d151db80bdfe6ce662a878fb100d943e461cc4', name: "header-icon" })), h("div", { key: '765aef597c08d2ae6133fb7e00f37f7882808ec1', class: "b2b-modal__dialog__header-right" }, h("button", { key: '6c27b0802cbc80519ce47e63af63b235f9b15170', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon-100", { key: 'cf8d241585af11d01bc4bf04537245521bda1ac7', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: '1e3c5c2c8d791e6b157bfea8532e9d6568c8ecde', class: "b2b-modal__dialog__body" }, h("slot", { key: 'cf11d00c750a942f30bd5ded7265ea41bfd1d421' })), h("div", { key: 'e391360e7c8ecfe577d13d51b643e6c9877930e6', class: "b2b-modal__dialog__footer" }, h("div", { key: 'bcb391f21045834d5f58a3b26b3ae45127f13f0b', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: 'effb6238d7bc7401c76b7d32795aec4eb1d62990', name: "footer-left" })), h("div", { key: 'f2a236d5b30d58bb71abac03d4ef57c6a09e70c6', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: 'ee8d0c54670a8b03dfd945cb8846c9dd2e523aac', name: "footer-right" })))), h("div", { key: '8384201d6c0a29e08061f36c1822114e5589f564', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: 'f52bd98fc038877132a949cc66bbfdb190f2dfb4', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
+            } }, h("div", { key: 'dbf97f26ae5ed4389ab13b90acdbcff506ba97a9', class: "b2b-modal__dialog__header" }, h("div", { key: '2d690ee0a36fca230335db2512e9e62067dd660e', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: 'd1e0a7f337bdca5aace7ca7bc401be91a3841e52', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: '1353d71a10811f8d59f8234f7061085256690f35', name: "header-icon" })), h("div", { key: 'a7d169dc476c7026999251f31c90ba856f93a875', class: "b2b-modal__dialog__header-right" }, h("button", { key: '173acf84e14e203f2a69398e89736a90f9db05d4', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon-100", { key: '20e5481f4b9210323e280dc9f8c372ac852a36c5', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: 'abc50a9191e9bd392bea9541f5e6a9502de6ac0c', class: "b2b-modal__dialog__body" }, h("slot", { key: '9e985a993cfe662e1cb3e6a75bcdb12f7b521e29' })), h("div", { key: '62245e1b1d7706f711536df32bed44c341995a43', class: "b2b-modal__dialog__footer" }, h("div", { key: '0f1312eb1fcd6baf7693db1ac699d4a58e229f9c', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '8db890620ed795d59eecb1b880b3404978808981', name: "footer-left" })), h("div", { key: '508d4f186971487006cd44a5df7f5e1c52cb3029', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '19d4db8090b390e6104105dff3e82715d1de9a6a', name: "footer-right" })))), h("div", { key: '7de78642381949b8a07724df7c7df090793f9925', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: 'e8b96691c75061fb0525219c7227ac4f1f54e7ee', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {