@otto-de/b2b-core-components 1.31.4 → 1.32.1

package/dist/collection/components/custom-dropdown/custom-dropdown-option.js

@@ -0,0 +1,247 @@
+import { h, Host, } from "@stencil/core";
+export class CustomDropdownOptionComponent {
+    constructor() {
+        this.handleClick = () => {
+            if (!this.disabled) {
+                this.b2bOptionSelected.emit({ selectedOption: this.option });
+            }
+        };
+        this.option = undefined;
+        this.disabled = false;
+        this.separator = false;
+        this.selected = false;
+        this.hoverIcon = null;
+        this.hoverIconColor = 'b2b-color-black-100';
+        this.selectedIcon = null;
+        this.selectedIconColor = 'b2b-color-black-100';
+        this.isHovered = false;
+    }
+    handleMouseEnter() {
+        this.isHovered = true;
+    }
+    handleMouseLeave() {
+        this.isHovered = false;
+    }
+    formatColorVariable(color) {
+        if (color.startsWith('var(--b2b-color-') && color.endsWith(')')) {
+            return color;
+        }
+        return `var(--${color})`;
+    }
+    render() {
+        return (h(Host, { key: '3a2103f763b42234fdba4b0d86747061a9d38433', class: {
+                'b2b-custom-dropdown__option': true,
+                'b2b-custom-dropdown__option-hover': this.isHovered && !this.selected,
+                'b2b-custom-dropdown__option--disabled': this.disabled,
+                'b2b-custom-dropdown__option--separator': this.separator,
+                'b2b-custom-dropdown__option--selected': this.selected,
+            }, onClick: this.handleClick, disabled: this.disabled, "aria-disabled": this.disabled, role: "option", "aria-selected": this.selected.toString() }, h("div", { key: 'd9fd6073f7f6d402617aefd3f96f882250f4dff3', class: "b2b-option-container" }, h("div", { key: '8bf64fbbf02755bf0557016c22ac60874f4fa584', class: "b2b-custom-dropdown__text-content" }, this.option), h("div", { key: '1b27ba43dca79d5620620c5a2a61982f677a6c35', class: "b2b-custom-dropdown__icon-container" }, this.isHovered && !this.selected && this.hoverIcon ? (h("b2b-icon-100", { icon: this.hoverIcon, style: {
+                color: this.formatColorVariable(this.hoverIconColor),
+            } })) : this.selected && this.selectedIcon ? (h("b2b-icon-100", { icon: this.selectedIcon, style: {
+                color: this.formatColorVariable(this.selectedIconColor),
+            } })) : null))));
+    }
+    static get is() { return "b2b-custom-dropdown-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["custom-dropdown-option.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["custom-dropdown-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "option": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The option name."
+                },
+                "attribute": "option",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "separator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the option has a separator at the bottom. Per default it is false."
+                },
+                "attribute": "separator",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the option is currently selected."
+                },
+                "attribute": "selected",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hoverIcon": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any | null",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon to display when the option is hovered and not selected. Defaults to null (no icon)."
+                },
+                "attribute": "hover-icon",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "hoverIconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the icon when the option is hovered. Defaults to 'b2b-color-black-100'."
+                },
+                "attribute": "hover-icon-color",
+                "reflect": true,
+                "defaultValue": "'b2b-color-black-100'"
+            },
+            "selectedIcon": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any | null",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon to display when the option is selected. Defaults to null (no icon)."
+                },
+                "attribute": "selected-icon",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "selectedIconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the icon when the option is selected. Defaults to 'b2b-color-black-100'."
+                },
+                "attribute": "selected-icon-color",
+                "reflect": true,
+                "defaultValue": "'b2b-color-black-100'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovered": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bOptionSelected",
+                "name": "b2b-custom-dropdown-option-selected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the option as a string whenever an option is selected."
+                },
+                "complexType": {
+                    "original": "OptionSelectedEventDetail",
+                    "resolved": "OptionSelectedEventDetail<any>",
+                    "references": {
+                        "OptionSelectedEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::OptionSelectedEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mouseenter",
+                "method": "handleMouseEnter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseleave",
+                "method": "handleMouseLeave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

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

@@ -0,0 +1,280 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root, :host {
+  --b2b-color-black-50: #333333;
+  --b2b-color-black-100: #222222;
+  --b2b-color-white-100: #FFFFFF;
+  --b2b-color-grey-10: #F0F0F0;
+  --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-50: #EEEEEE;
+  --b2b-color-grey-100: #E6E6E6;
+  --b2b-color-grey-150: #D5D5D5;
+  --b2b-color-grey-200: #C4C4C4;
+  --b2b-color-grey-250: #B1B1B1;
+  --b2b-color-grey-300: #9E9E9E;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-red-50: #FFDDE3;
+  --b2b-color-red-100: #D4021D;
+  --b2b-color-red-150: #E6344B;
+  --b2b-color-red-200: #BB0004;
+  --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
+  --b2b-color-primary: #D4021D;
+  --b2b-color-error-100: #E6344B;
+  --b2b-color-warning-50: #FFD998;
+  --b2b-color-warning-100: #FFB432;
+  --b2b-color-success-50: #D6E0CC;
+  --b2b-color-success-100: #326400;
+  --b2b-color-info-50: #CCD6E0;
+  --b2b-color-info-100: #003264;
+  --b2b-color-hover-default: #DBE7FA;
+  --b2b-color-hover-black: #3B3B3B;
+  --b2b-color-background-overlay-transparent-80: #22222280;
+  --b2b-color-background-overlay-transparent-40: #22222240;
+  --b2b-color-table-selected-default: #CCE9FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-bold: 700;
+  --b2b-size-1: 0.0625rem; /** 1px */
+  --b2b-size-5: 0.125rem; /** 2px */
+  --b2b-size-7: 0.1875rem; /** 3px */
+  --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
+  --b2b-size-15: 0.375rem; /** 6px */
+  --b2b-size-20: 0.5rem; /** 8px */
+  --b2b-size-25: 0.625rem; /** 10px */
+  --b2b-size-30: 0.75rem; /** 12px */
+  --b2b-size-35: 0.875rem; /** 14px */
+  --b2b-size-40: 1rem; /** 16px */
+  --b2b-size-45: 1.125rem; /** 18px */
+  --b2b-size-50: 1.25rem; /** 20px */
+  --b2b-size-53: 1.3125rem; /** 21px */
+  --b2b-size-55: 1.375rem; /** 22px */
+  --b2b-size-60: 1.5rem; /** 24px */
+  --b2b-size-70: 1.75rem; /** 28px */
+  --b2b-size-80: 2rem; /** 32px */
+  --b2b-size-90: 2.25rem; /** 36px */
+  --b2b-size-100: 2.5rem; /** 40px */
+  --b2b-size-120: 3rem; /** 48px */
+  --b2b-size-140: 3.5rem; /** 56px */
+  --b2b-size-150: 3.75rem; /** 60px */
+  --b2b-size-160: 4rem; /** 64px */
+  --b2b-size-200: 5rem; /** 80px */
+  --b2b-color-error-50: var(--b2b-color-red-50);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-copy-50: var(--b2b-size-30);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /** Will use 18px until design facelift */
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /** Will use 21px until design facelift */
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root [data-theme="dark"] {
+  --b2b-color-black-50: #333333;
+  --b2b-color-black-100: #222222;
+  --b2b-color-white-100: #FFFFFF;
+  --b2b-color-grey-10: #F0F0F0;
+  --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-50: #EEEEEE;
+  --b2b-color-grey-100: #E6E6E6;
+  --b2b-color-grey-150: #D5D5D5;
+  --b2b-color-grey-200: #C4C4C4;
+  --b2b-color-grey-250: #B1B1B1;
+  --b2b-color-grey-300: #9E9E9E;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-red-50: #FFDDE3;
+  --b2b-color-red-100: #D4021D;
+  --b2b-color-red-150: #E6344B;
+  --b2b-color-red-200: #BB0004;
+  --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
+  --b2b-color-primary: #D4021D;
+  --b2b-color-error-100: #E6344B;
+  --b2b-color-warning-50: #FFD998;
+  --b2b-color-warning-100: #FFB432;
+  --b2b-color-success-50: #D6E0CC;
+  --b2b-color-success-100: #326400;
+  --b2b-color-info-50: #CCD6E0;
+  --b2b-color-info-100: #003264;
+  --b2b-color-hover-default: #DBE7FA;
+  --b2b-color-hover-black: #3B3B3B;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-bold: 700;
+  --b2b-size-1: 0.0625rem; /** 1px */
+  --b2b-size-5: 0.125rem; /** 2px */
+  --b2b-size-7: 0.1875rem; /** 3px */
+  --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
+  --b2b-size-15: 0.375rem; /** 6px */
+  --b2b-size-20: 0.5rem; /** 8px */
+  --b2b-size-25: 0.625rem; /** 10px */
+  --b2b-size-30: 0.75rem; /** 12px */
+  --b2b-size-35: 0.875rem; /** 14px */
+  --b2b-size-40: 1rem; /** 16px */
+  --b2b-size-45: 1.125rem; /** 18px */
+  --b2b-size-50: 1.25rem; /** 20px */
+  --b2b-size-53: 1.3125rem; /** 21px */
+  --b2b-size-55: 1.375rem; /** 22px */
+  --b2b-size-60: 1.5rem; /** 24px */
+  --b2b-size-70: 1.75rem; /** 28px */
+  --b2b-size-80: 2rem; /** 32px */
+  --b2b-size-90: 2.25rem; /** 36px */
+  --b2b-size-100: 2.5rem; /** 40px */
+  --b2b-size-120: 3rem; /** 48px */
+  --b2b-size-140: 3.5rem; /** 56px */
+  --b2b-size-150: 3.75rem; /** 60px */
+  --b2b-size-160: 4rem; /** 64px */
+  --b2b-size-200: 5rem; /** 80px */
+  --b2b-color-error-50: var(--b2b-color-red-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: ObcIcons;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
+}
+:host {
+  width: 100%;
+}
+.b2b-custom-dropdown__trigger {
+  position: relative;
+  display: inline !important;
+  cursor: pointer;
+}
+.b2b-custom-dropdown {
+  display: none;
+}
+.b2b-custom-dropdown--on {
+  display: block;
+}
+.b2b-custom-dropdown--drop-shadow {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
+.b2b-custom-dropdown--border {
+  border: 1px solid var(--b2b-color-grey-200);
+}
+.b2b-custom-dropdown-search {
+  padding: var(--b2b-size-30);
+  display: none;
+}
+.b2b-custom-dropdown-search--enabled {
+  display: block;
+  border-bottom: var(--b2b-size-1) solid var(--b2b-color-border-100);
+}
+.b2b-custom-dropdown__options-scroll-container {
+  position: relative;
+  display: block;
+  max-height: 288px;
+  overflow-y: auto;
+  margin: 0;
+}
+.b2b-custom-dropdown__options-container {
+  position: relative;
+  display: block;
+  margin: 0;
+}
+.b2b-custom-dropdown__options-container--disabled {
+  display: none;
+}
+.b2b-custom-dropdown__option--hidden {
+  display: none;
+}
+::slotted(b2b-custom-dropdown-option.b2b-custom-dropdown__option--hidden) {
+  display: none;
+}

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

@@ -0,0 +1,66 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('b2b-custom-dropdown', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
+      <b2b-custom-dropdown placeholder="Select an option">
+        <b2b-icon-100 icon="b2b_icon-ellipsis" slot='trigger' clickable focusable></b2b-icon-100>
+        <b2b-custom-dropdown-option slot='option' option='option1' separator="true">
+        </b2b-custom-dropdown-option>
+        <b2b-custom-dropdown-option slot='option' option='option2' separator="false">
+        </b2b-custom-dropdown-option>
+        <b2b-custom-dropdown-option slot='option' option='option3' separator="false">
+        </b2b-custom-dropdown-option>
+        <b2b-custom-dropdown-option slot='option' option='option4' separator="false">
+        </b2b-custom-dropdown-option>
+      </b2b-custom-dropdown>
+    `);
+    });
+    it('should render with placeholder', async () => {
+        const b2bInput = await page.find('b2b-custom-dropdown >>> b2b-input');
+        expect(b2bInput).not.toBeNull();
+        const placeholder = await b2bInput.getProperty('placeholder');
+        expect(placeholder).toEqual('Select an option');
+    });
+    it('should show the dropdown options when trigger is clicked', async () => {
+        const trigger = await page.find('b2b-custom-dropdown [slot="trigger"]');
+        await trigger.click();
+        await page.waitForChanges();
+        const customDropdownOption = await page.find('b2b-custom-dropdown-option');
+        expect(customDropdownOption).not.toBeNull();
+        expect(await customDropdownOption.isVisible()).toBe(true);
+    });
+    it('should hide the dropdown when it loses focus', async () => {
+        const trigger = await page.find('b2b-custom-dropdown [slot="trigger"]');
+        await trigger.click();
+        await page.waitForChanges();
+        const customDropdownOption = await page.find('b2b-custom-dropdown-option');
+        expect(await customDropdownOption.isVisible()).toBe(true);
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        const dropdown = await page.find('b2b-custom-dropdown');
+        expect(dropdown).not.toHaveClass('b2b-custom-dropdown--on');
+    });
+    it('should display separator after an option when separator is true', async () => {
+        const trigger = await page.find('b2b-custom-dropdown [slot="trigger"]');
+        await trigger.click();
+        await page.waitForChanges();
+        const dropdownOptions = await page.findAll('b2b-custom-dropdown-option');
+        const agencyOption = dropdownOptions[0];
+        const separatorAgencyOption = await agencyOption.getProperty('separator');
+        expect(separatorAgencyOption).toBe(true);
+        const option1 = dropdownOptions[1];
+        const separatorOption1 = await option1.getProperty('separator');
+        expect(separatorOption1).toBe(false);
+    });
+    it('should display the correct list of options', async () => {
+        const trigger = await page.find('b2b-custom-dropdown [slot="trigger"]');
+        await trigger.click();
+        await page.waitForChanges();
+        const dropdownOptions = await page.findAll('b2b-custom-dropdown-option');
+        expect(dropdownOptions.length).toEqual(4);
+        const optionTexts = await Promise.all(dropdownOptions.map(option => option.getProperty('option')));
+        expect(optionTexts).toEqual(['option1', 'option2', 'option3', 'option4']);
+    });
+});