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

package/dist/collection/components/input/input.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/input/input.js

@@ -100,18 +100,18 @@ export class InputComponent {
         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)) : ('')));
     }
     static get is() { return "b2b-input"; }

package/dist/collection/components/input-group/input-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -56,7 +56,7 @@ export class B2BInputGroup {
         }
     }
     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))));

package/dist/collection/components/input-label/input-label.js

@@ -5,11 +5,11 @@ export class InputLabelComponent {
         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' }))));
     }
     static get is() { return "b2b-input-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-list/input-list-option.js

@@ -12,7 +12,7 @@ export class InputListOptionComponent {
         }
     }
     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));
     }
     static get is() { return "b2b-input-list-option"; }
     static get originalStyleUrls() {

package/dist/collection/components/input-list/input-list.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/input-list/input-list.js

@@ -137,13 +137,13 @@ export class InputListComponent {
     */
     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)));
     }
     static get is() { return "b2b-input-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/label.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/label/label.js

@@ -4,10 +4,10 @@ export class LabelComponent {
         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' })));
     }
     static get is() { return "b2b-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/modal/modal.js

@@ -82,10 +82,10 @@ export class ModalComponent {
         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 }))));
     }
     static get is() { return "b2b-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -223,38 +223,66 @@
   width: 100%;
 }
 :host b2b-input-label {
-  margin-bottom: var(--b2b-size-10);
+  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: var(--b2b-size-15) var(--b2b-size-25);
+  padding: 5px var(--b2b-size-20);
   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;
+  z-index: 1001;
+  outline: 2px solid -webkit-focus-ring-color;
+  outline-offset: -1px;
 }
-: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--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;
@@ -270,7 +298,10 @@
   overflow-y: auto;
   margin: 0;
   background-color: var(--b2b-color-white-100);
-  border: solid 1px var(--b2b-color-grey-200);
+  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;
 }
@@ -294,4 +325,32 @@
 }
 :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;
 }

package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.e2e.js

@@ -1,101 +1,74 @@
 import { newE2EPage } from "@stencil/core/testing";
-describe('B2B-Multiselect-Dropdown', () => {
-    let page;
-    const optionsList = [
-        'Swift Carrot',
-        'Hydromelon',
-        'Skyshroom',
-        'Fortified Pumpkin',
-        'Hyrule Herb',
-        'Hylian Shroom',
-        'Mighty Banana',
-        'Endura Carrot',
-        'Golden Apple',
-    ];
-    const setOptionsList = async () => {
-        const multiselect = await page.find('b2b-multiselect-dropdown');
-        multiselect.setProperty('optionsList', optionsList);
-        await page.waitForChanges();
-    };
-    const setMaxChipAmount = async (chips) => {
-        const multiselect = await page.find('b2b-multiselect-dropdown');
-        multiselect.setProperty('maxOptionsVisible', chips);
-        await page.waitForChanges();
-    };
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`<b2b-multiselect-dropdown
-    placeholder="Please select..."
-    search-placeholder="Search"
-    select-all-label="Select All"
-    label="Hylian fruits and vegetables"></b2b-multiselect-dropdown>`);
+describe('b2b-multiselect-dropdown', () => {
+    it('should render with placeholder', async () => {
+        const page = await newE2EPage({
+            html: `<b2b-multiselect-dropdown placeholder="Select an option"></b2b-multiselect-dropdown>`,
+        });
+        const placeholder = await page.find('b2b-multiselect-dropdown >>> .b2b-multiselect-dropdown__placeholder');
+        expect(placeholder).not.toBeNull();
+        expect(placeholder).toEqualText('Select an option');
     });
-    it('should render the multiselect dropdown', async () => {
-        const multiselect = await page.find('b2b-multiselect-dropdown');
-        await setOptionsList();
-        const options = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
-        expect(options.length).toBe(10);
-        expect(multiselect).not.toBeNull();
+    it('should render with hint message', async () => {
+        const page = await newE2EPage({
+            html: `<b2b-multiselect-dropdown hint="Choose wisely!"></b2b-multiselect-dropdown>`,
+        });
+        const hint = await page.find('b2b-multiselect-dropdown >>> .b2b-multiselect-dropdown__hint');
+        const text = hint.textContent;
+        expect(text).toBe('Choose wisely!');
     });
-    it('should select an option and display it as a chip', async () => {
-        const multiselect = await page.find('b2b-multiselect-dropdown');
-        const selectedSpy = await page.spyOnEvent('b2b-selected');
-        await setOptionsList();
-        await multiselect.click();
-        await page.waitForChanges();
-        const opt = await page.find({ text: optionsList[0] });
-        await opt.click();
+    it('should open dropdown on click and displays options', async () => {
+        const page = await newE2EPage({
+            html: `<b2b-multiselect-dropdown placeholder="Choose" options-list="Swift Carrot, Happy Onion, Cool Tomato"></b2b-multiselect-dropdown>`,
+        });
+        const trigger = await page.find('b2b-multiselect-dropdown >>> .b2b-multiselect-dropdown');
+        await trigger.click();
         await page.waitForChanges();
-        const chip = await page.find('b2b-multiselect-dropdown >>> b2b-chip-component');
-        const val = await chip.getProperty('value');
-        expect(val).toEqualText(optionsList[0]);
-        expect(selectedSpy).toHaveReceivedEvent();
-        expect(selectedSpy).toHaveReceivedEventDetail(['Swift Carrot']);
+        const allOptions = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
+        expect(allOptions.length).toBeGreaterThan(1);
+        const checkbox = await allOptions[1].find('b2b-checkbox');
+        await checkbox.click();
+        const values = await Promise.all(allOptions.slice(1).map(async (opt) => {
+            const cb = await opt.find('b2b-checkbox');
+            return cb.getAttribute('value');
+        }));
+        expect(values).toContain('Swift Carrot');
+        expect(values).toContain('Happy Onion');
+        expect(values).toContain('Cool Tomato');
     });
-    it('should select all options and display them as chips', async () => {
-        const multiselect = await page.find('b2b-multiselect-dropdown');
-        const selectedSpy = await page.spyOnEvent('b2b-selected');
-        await setOptionsList();
-        await setMaxChipAmount(optionsList.length);
-        await multiselect.click();
-        await page.waitForChanges();
-        const opt = await page.find({ text: 'Select All' });
-        await opt.click();
+    it('should emits b2b-selected event on option select and render the chips', async () => {
+        const page = await newE2EPage({
+            html: `<b2b-multiselect-dropdown options-list="Alpha, Beta"></b2b-multiselect-dropdown>`,
+        });
+        const trigger = await page.find('b2b-multiselect-dropdown >>> .b2b-multiselect-dropdown');
         await page.waitForChanges();
-        const chips = await page.findAll('b2b-multiselect-dropdown >>> b2b-chip-component');
-        expect(chips.length).toEqual(optionsList.length);
-        expect(selectedSpy).toHaveReceivedEvent();
-        expect(selectedSpy).toHaveReceivedEventDetail(optionsList);
-    });
-    it('should not display more chips than the maximum amount prop defines', async () => {
-        const multiselect = await page.find('b2b-multiselect-dropdown');
-        await setOptionsList();
-        await setMaxChipAmount(4);
-        await multiselect.click();
+        await trigger.click();
         await page.waitForChanges();
-        const opt = await page.find({ text: 'Select All' });
-        await opt.click();
+        const spy = await page.spyOnEvent('b2b-selected');
+        const allOptions = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
+        const checkbox = await allOptions[1].find('b2b-checkbox');
+        await checkbox.click();
         await page.waitForChanges();
-        const chips = await page.findAll('b2b-multiselect-dropdown >>> b2b-chip-component');
-        // account for overflow chip
-        expect(chips.length).toEqual(5);
+        expect(spy).toHaveReceivedEvent();
+        const chip = await page.find('b2b-multiselect-dropdown >>> b2b-chip-component');
+        expect(chip).not.toBeNull();
+        const valueHandle = await chip.getProperty('value');
+        expect(valueHandle).toBe('Alpha');
     });
-    /** TO DO: test chip closing
-     * Puppeteer has issues, but manual testing in vanilla, Vue and React confirmed logic works */
-    it('should filter options using the search', async () => {
-        const multiselect = await page.find('b2b-multiselect-dropdown');
-        await setOptionsList();
-        await multiselect.click();
+    it('should render two chips when select all is clicked', async () => {
+        const page = await newE2EPage({
+            html: `<b2b-multiselect-dropdown options-list="Alpha, Beta"></b2b-multiselect-dropdown>`,
+        });
+        const trigger = await page.find('b2b-multiselect-dropdown >>> .b2b-multiselect-dropdown');
         await page.waitForChanges();
-        const input = await page.find('b2b-multiselect-dropdown >>> input');
-        await input.click();
-        await input.press('b');
+        await trigger.click();
         await page.waitForChanges();
-        const options = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
-        expect(options.length).toEqual(3);
-        await input.press('Backspace');
+        const spy = await page.spyOnEvent('b2b-selected');
+        const allOptions = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
+        const checkbox = await allOptions[0].find('b2b-checkbox');
+        await checkbox.click();
         await page.waitForChanges();
-        const optionsAfter = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
-        expect(optionsAfter.length).toEqual(10);
+        expect(spy).toHaveReceivedEvent();
+        const chips = await page.findAll('b2b-multiselect-dropdown >>> b2b-chip-component');
+        expect(chips.length).toBe(2);
     });
 });