@otto-de/b2b-core-components 1.38.1 → 1.38.3

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

@@ -0,0 +1,255 @@
+/**
+ * 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-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
+  --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-35);
+  --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-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
+  --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 {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-bottom: 1px solid var(--b2b-color-grey-200);
+}
+.b2b-custom-dropdown__option-category-label {
+  display: block;
+  min-height: 22px;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 4px 16px;
+  box-sizing: border-box;
+  font-family: var(--b2b-font-family-default), sans-serif;
+  font-size: var(--b2b-size-copy-50);
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0;
+  color: var(--b2b-color-grey-400);
+  background-color: var(--b2b-color-white-100);
+}

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

@@ -0,0 +1,43 @@
+import { h, Host } from "@stencil/core";
+export class CustomDropdownWithOptionHeadingComponent {
+    constructor() {
+        this.label = '';
+    }
+    render() {
+        return (h(Host, { key: '111d82b1ea150f72a5f4c49783693a21714e37fb', class: "b2b-custom-dropdown__option-category" }, this.label && (h("div", { class: "b2b-custom-dropdown__option-category-label" }, this.label)), h("slot", { key: '0d08b0fabb98ac5e3c042125cf0e8888a5eb1c91' })));
+    }
+    static get is() { return "b2b-custom-dropdown-option-category"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["custom-dropdown-option-category.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["custom-dropdown-option-category.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label/heading text for the option category."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+}

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

@@ -29,13 +29,13 @@ export class CustomDropdownOptionComponent {
         return `var(--${color})`;
     }
     render() {
-        return (h(Host, { key: '3a2103f763b42234fdba4b0d86747061a9d38433', class: {
+        return (h(Host, { key: 'a359c42ad0ab610198027a1cba088c64f4e3e0c2', 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: {
+            }, onClick: this.handleClick, disabled: this.disabled, "aria-disabled": this.disabled, role: "option", "aria-selected": this.selected.toString() }, h("div", { key: '11b25a959672c9bad2c0b222f5c458e9fda2fb18', class: "b2b-option-container" }, h("div", { key: '1eee7a415084b4595ecc674785fbffdc341d81b2', class: "b2b-custom-dropdown__text-content" }, this.option), h("div", { key: 'ccc571d8dad1719aa3c33a8e5b8c6141fecac1ac', 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),

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

@@ -297,6 +297,9 @@
 ::slotted(b2b-custom-dropdown-option.b2b-custom-dropdown__option--hidden) {
   display: none;
 }
+::slotted(b2b-custom-dropdown-option-category.b2b-custom-dropdown__option-category--hidden) {
+  display: none;
+}
 .b2b-custom-dropdown__empty {
   padding: var(--b2b-size-30);
   color: var(--b2b-color-grey-400);

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

@@ -132,4 +132,93 @@ describe('b2b-custom-dropdown - Alignment Tests', () => {
         const dropdownContainer = await page.find('b2b-custom-dropdown >>> .b2b-custom-dropdown');
         expect(dropdownContainer).toHaveClass('b2b-custom-dropdown--align-right');
     });
+    describe('b2b-custom-dropdown-option-category', () => {
+        it('should render category label when provided', async () => {
+            const 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-category label="Category 1">
+          <b2b-custom-dropdown-option option='option1'>
+          </b2b-custom-dropdown-option>
+        </b2b-custom-dropdown-option-category>
+      </b2b-custom-dropdown>
+    `);
+            const trigger = await page.find('b2b-custom-dropdown [slot="trigger"]');
+            await trigger.click();
+            await page.waitForChanges();
+            const categoryLabel = await page.find('b2b-custom-dropdown-option-category >>> .b2b-custom-dropdown__option-category-label');
+            expect(categoryLabel).not.toBeNull();
+            expect(categoryLabel.textContent).toEqual('Category 1');
+        });
+        it('should render category without label', async () => {
+            const 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-category>
+          <b2b-custom-dropdown-option option='option1'>
+          </b2b-custom-dropdown-option>
+        </b2b-custom-dropdown-option-category>
+      </b2b-custom-dropdown>
+    `);
+            const trigger = await page.find('b2b-custom-dropdown [slot="trigger"]');
+            await trigger.click();
+            await page.waitForChanges();
+            const category = await page.find('b2b-custom-dropdown-option-category');
+            expect(category).not.toBeNull();
+            const categoryLabel = await page.find('b2b-custom-dropdown-option-category >>> .b2b-custom-dropdown__option-category-label');
+            expect(categoryLabel).toBeNull();
+        });
+        it('should contain multiple options within category', async () => {
+            const 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-category label="Category 1">
+          <b2b-custom-dropdown-option option='option1'>
+          </b2b-custom-dropdown-option>
+          <b2b-custom-dropdown-option option='option2'>
+          </b2b-custom-dropdown-option>
+          <b2b-custom-dropdown-option option='option3'>
+          </b2b-custom-dropdown-option>
+        </b2b-custom-dropdown-option-category>
+      </b2b-custom-dropdown>
+    `);
+            const trigger = await page.find('b2b-custom-dropdown [slot="trigger"]');
+            await trigger.click();
+            await page.waitForChanges();
+            const optionsInCategory = await page.findAll('b2b-custom-dropdown-option-category b2b-custom-dropdown-option');
+            expect(optionsInCategory.length).toEqual(3);
+        });
+        it('should support multiple categories', async () => {
+            const 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-category label="Category 1">
+          <b2b-custom-dropdown-option option='option1'>
+          </b2b-custom-dropdown-option>
+          <b2b-custom-dropdown-option option='option2'>
+          </b2b-custom-dropdown-option>
+        </b2b-custom-dropdown-option-category>
+        <b2b-custom-dropdown-option-category label="Category 2">
+          <b2b-custom-dropdown-option option='option3'>
+          </b2b-custom-dropdown-option>
+          <b2b-custom-dropdown-option option='option4'>
+          </b2b-custom-dropdown-option>
+        </b2b-custom-dropdown-option-category>
+      </b2b-custom-dropdown>
+    `);
+            const trigger = await page.find('b2b-custom-dropdown [slot="trigger"]');
+            await trigger.click();
+            await page.waitForChanges();
+            const categories = await page.findAll('b2b-custom-dropdown-option-category');
+            expect(categories.length).toEqual(2);
+            const categoryLabels = await page.findAll('b2b-custom-dropdown-option-category >>> .b2b-custom-dropdown__option-category-label');
+            expect(categoryLabels.length).toEqual(2);
+            expect(categoryLabels[0].textContent).toEqual('Category 1');
+            expect(categoryLabels[1].textContent).toEqual('Category 2');
+        });
+    });
 });

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

@@ -2,6 +2,7 @@ import { h, Host, } from "@stencil/core";
 import { isClickOutside } from "../../utils/utils";
 export class B2bCustomDropdownComponent {
     constructor() {
+        this.allOptionCategories = [];
         this.toggleMenu = () => {
             this.opened = !this.opened;
         };
@@ -23,6 +24,11 @@ export class B2bCustomDropdownComponent {
                 if (match)
                     visibleCount++;
             });
+            // Update option category visibility based on its visible options
+            this.allOptionCategories.forEach(optionCategory => {
+                const visibleOptionsInCategory = Array.from(optionCategory.querySelectorAll('b2b-custom-dropdown-option')).filter(opt => !opt.classList.contains('b2b-custom-dropdown__option--hidden')).length;
+                optionCategory.classList.toggle('b2b-custom-dropdown__option-category--hidden', visibleOptionsInCategory === 0);
+            });
             this.hasVisibleOptions = visibleCount > 0;
         };
         this.placeholder = undefined;
@@ -53,6 +59,12 @@ export class B2bCustomDropdownComponent {
     }
     connectedCallback() {
         this.initializeSlottedOptions();
+        const trigger = this.hostElement.querySelector('[slot="trigger"]');
+        if (trigger) {
+            this.triggerEl = trigger;
+            this.triggerEl.addEventListener('click', this.toggleMenu, true);
+            return;
+        }
         const children = Array.from(this.hostElement.children).filter(x => !x.hasAttribute('option'));
         if (children.length === 0) {
             return;
@@ -60,8 +72,15 @@ export class B2bCustomDropdownComponent {
         this.triggerEl = children[0];
         this.triggerEl.addEventListener('click', this.toggleMenu, true);
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.toggleMenu, true);
+    }
     initializeSlottedOptions() {
-        this.allOptions = Array.from(this.hostElement.querySelectorAll('[slot="option"]'));
+        // Find all option categories
+        this.allOptionCategories = Array.from(this.hostElement.querySelectorAll('b2b-custom-dropdown-option-category'));
+        // Find all options, including those inside option categories
+        this.allOptions = Array.from(this.hostElement.querySelectorAll('b2b-custom-dropdown-option'));
     }
     handleClickOutside(event) {
         if (isClickOutside(event, this.hostElement)) {
@@ -69,7 +88,7 @@ export class B2bCustomDropdownComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'be885facc6441549cd7bc28f689c2eebf07b6987' }, h("div", { key: '450a33089db12ce4730e1996d1efde9db81a71c5', class: "b2b-custom-dropdown__trigger" }, h("slot", { key: '54e75fd7e993fdfba28da2fbeb1822414bdc8457', name: "trigger" })), h("div", { key: '6b62f9590e78bf20aff37fe09e8acb78ef4b8b90', class: {
+        return (h(Host, { key: '3ebf0a1fd00e73bd92e9586ff826f2bd6411eb77' }, h("div", { key: 'bfa6d9fb45247bd080a750a16d208a471598106b', class: "b2b-custom-dropdown__trigger" }, h("slot", { key: '178e859cc10114b68740d189d5ad8407cad20bd4', name: "trigger" })), h("div", { key: 'f77c498d65b62b5710d4758f51c883231903c0b7', class: {
                 'b2b-custom-dropdown': true,
                 'b2b-custom-dropdown--on': this.opened && !this.disabled,
                 'b2b-custom-dropdown--drop-shadow': this.dropshadow,
@@ -77,12 +96,12 @@ export class B2bCustomDropdownComponent {
                 'b2b-custom-dropdown--align-left': this.alignment === 'left',
                 'b2b-custom-dropdown--align-center': this.alignment === 'center',
                 'b2b-custom-dropdown--align-right': this.alignment === 'right',
-            } }, h("b2b-background-box", { key: '5690eb6da07a46248544fb5b1f742c21987cce7b', noPadding: true, borderTop: "none", borderBottom: "none", borderRight: "none", borderLeft: "none" }, h("div", { key: 'aab7a71ed660cce678c40bfcc36dfaf317e329a9', class: {
+            } }, h("b2b-background-box", { key: 'e7d60dff330be21c9e7032e48ce6d50f75b9c81d', noPadding: true, borderTop: "none", borderBottom: "none", borderRight: "none", borderLeft: "none" }, h("div", { key: 'bbf4c8895c70b8dbcb8e226506b2c88b899e5389', class: {
                 'b2b-custom-dropdown-search': true,
                 'b2b-custom-dropdown-search--enabled': this.allOptions.length > 6 && !this.disabled,
-            } }, h("b2b-input", { key: '7fe33bb83de99b112ff6caa3a1a7c866c6160551', placeholder: this.placeholder, "onB2b-input": this.handleInput }, h("b2b-icon-100", { key: '330b9fa7a045588743ba8d4e4de6de4291091132', icon: "b2b_icon-search", slot: "start" })))), h("div", { key: '25d7f57b346bb8da229ba0c2c9994135bd8e7cfb', class: this.allOptions.length > 6
+            } }, h("b2b-input", { key: 'ec6a81db0a47d0d187f6c63700120c6360c7de6d', placeholder: this.placeholder, "onB2b-input": this.handleInput }, h("b2b-icon-100", { key: '93d95a333dd155fc054c1d71b7f8964ccb0051db', icon: "b2b_icon-search", slot: "start" })))), h("div", { key: 'da211321b0347074984ff31f2138270a7d2117b5', class: this.allOptions.length > 6
                 ? 'b2b-custom-dropdown__options-scroll-container'
-                : 'b2b-custom-dropdown__options-container' }, h("slot", { key: 'ed7646c026e8373cbf329fec8c0379f5bd3d47f0', name: "option" })), this.value && !this.hasVisibleOptions && (h("div", { class: "b2b-custom-dropdown__empty", role: "status" }, h("slot", { name: "empty" }, this.noResultsText))))));
+                : 'b2b-custom-dropdown__options-container' }, h("slot", { key: '512507ff8a3b2866d9b870bbd91f6ac5c764e397', name: "option" }), h("slot", { key: '1e5bff1d4559492f4ca082ad61af034f6476439c' })), this.value && !this.hasVisibleOptions && (h("div", { class: "b2b-custom-dropdown__empty", role: "status" }, h("slot", { name: "empty" }, this.noResultsText))))));
     }
     static get is() { return "b2b-custom-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -136,6 +136,73 @@ export const WithSeparator = {
 export const WithIcon = {
     args: Object.assign(Object.assign({}, meta.args), { opened: true, selected: true, hoverIcon: 'b2b_icon-arrow-long-right', hoverIconColor: 'b2b-color-grey-400', selectedIcon: 'b2b_icon-success', selectedIconColor: 'b2b-color-success-100' }),
 };
+export const WithOptionCategory = {
+    args: Object.assign(Object.assign({}, meta.args), { opened: true, selected: true, hoverIcon: 'b2b_icon-arrow-long-right', hoverIconColor: 'b2b-color-grey-400', selectedIcon: 'b2b_icon-success', selectedIconColor: 'b2b-color-success-100' }),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<div style="margin-left: 16px;width: 300px">
+      <b2b-custom-dropdown
+        placeholder=${args.placeholder}
+        dropshadow=${args.dropshadow}
+        border=${args.border}
+        alignment=${args.alignment}
+        opened=${args.opened}>
+        <b2b-paragraph slot="trigger">
+          This is a custom dropdown
+          <b2b-icon-100
+            icon="b2b_icon-arrow-down"
+            focusable
+            clickable></b2b-icon-100>
+        </b2b-paragraph>
+        <b2b-custom-dropdown-option-category label="Option Category 1">
+          <b2b-custom-dropdown-option
+            option="Option 1"
+            hover-icon=${args.hoverIcon}
+            selected-icon=${args.selectedIcon}
+            hover-icon-color=${args.hoverIconColor}
+            selected-icon-color=${args.selectedIconColor}
+            selected=${args.selected}
+            disabled=${args.disabled}>
+          </b2b-custom-dropdown-option>
+          <b2b-custom-dropdown-option
+            option="Option 2"
+            hover-icon=${args.hoverIcon}
+            selected-icon=${args.selectedIcon}
+            hover-icon-color=${args.hoverIconColor}
+            selected-icon-color=${args.selectedIconColor}
+            disabled=${args.disabled}>
+          </b2b-custom-dropdown-option>
+          <b2b-custom-dropdown-option
+            option="Option 3"
+            hover-icon=${args.hoverIcon}
+            selected-icon=${args.selectedIcon}
+            hover-icon-color=${args.hoverIconColor}
+            selected-icon-color=${args.selectedIconColor}
+            disabled=${args.disabled}>
+          </b2b-custom-dropdown-option>
+        </b2b-custom-dropdown-option-category>
+        <b2b-custom-dropdown-option-category label="Option Category 2">
+          <b2b-custom-dropdown-option
+            option="Option 4"
+            hover-icon=${args.hoverIcon}
+            selected-icon=${args.selectedIcon}
+            hover-icon-color=${args.hoverIconColor}
+            selected-icon-color=${args.selectedIconColor}
+            disabled=${args.disabled}>
+          </b2b-custom-dropdown-option>
+          <b2b-custom-dropdown-option
+            option="Option 5"
+            hover-icon=${args.hoverIcon}
+            selected-icon=${args.selectedIcon}
+            hover-icon-color=${args.hoverIconColor}
+            selected-icon-color=${args.selectedIconColor}
+            disabled=${args.disabled}>
+          </b2b-custom-dropdown-option>
+        </b2b-custom-dropdown-option-category>
+      </b2b-custom-dropdown>
+    </div>`;
+    },
+};
 export const CustomDropdownOptionsDisabled = {
     args: Object.assign(Object.assign({}, meta.args), { disabled: true, opened: true }),
 };

package/dist/collection/components/date-picker/date-picker-days-header.js

@@ -13,7 +13,7 @@ export class B2bDatePickerDaysHeader {
         this.language = 'de';
     }
     render() {
-        return (h(Host, { key: '6ca6b61422e9664b0468ccee19cd3cd208d0fb97' }, h("div", { key: '69fd18279a42ecfb0a2a07f99bb04565153c8df6', class: "b2b-date-picker-days-header" }, this.displayWeekDays())));
+        return (h(Host, { key: 'b263de3bc9e2189a320bd0f1a3c43b15e6a9e0b8' }, h("div", { key: 'ddf44663f7bbf839aa6a365590e9b641711547c8', class: "b2b-date-picker-days-header" }, this.displayWeekDays())));
     }
     static get is() { return "b2b-date-picker-days-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/date-picker-days.js

@@ -160,7 +160,7 @@ export class B2bDatePickerDays {
         });
     }
     render() {
-        return (h(Host, { key: '73d99c811d52c00ddec7c3f044b7d850861f7a48' }, h("div", { key: '146b6533fc0d040a896e32baf3068793a8cdfe81', class: "b2b-date-picker-days" }, this.renderDatePickerDays())));
+        return (h(Host, { key: 'e1b82227a7d6f35bd707296d356f91c0724d161c' }, h("div", { key: '6dc28f794b1f81fbce7363dd33b8fa54c0cbb9d0', class: "b2b-date-picker-days" }, this.renderDatePickerDays())));
     }
     static get is() { return "b2b-date-picker-days"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/date-picker-header.js

@@ -8,9 +8,9 @@ export class B2bDatePickerHeader {
     }
     render() {
         const Months = this.language === 'en' ? MonthsEnglish : MonthsGerman;
-        return (h(Host, { key: '149ffea5e265aa5988cbd5e9e49a6282a2c26620' }, h("div", { key: 'ff0afa53b9c874475bb1c7362d0b49e458d1cc57', class: "b2b-date-picker-header" }, h("button", { key: '785d10e6fa6339a2fe10b2a11ad9d02432792c16', class: "b2b-date-picker-nav--left", onClick: this.b2bDatePickerPreviousMonth.emit, onMouseOut: event => {
+        return (h(Host, { key: '7b757dbe383afbbde516f8aa8153b6192599ec66' }, h("div", { key: '93ba06b2e60a0dc8f688a7878abdb0c47898edb0', class: "b2b-date-picker-header" }, h("button", { key: '905bfce876914038ded90e28c051a87dae2e9577', class: "b2b-date-picker-nav--left", onClick: this.b2bDatePickerPreviousMonth.emit, onMouseOut: event => {
                 event.target.blur();
-            }, "aria-label": "previous month" }, h("b2b-icon-100", { key: '7e52cd1f6da18c5fdbeb82c1481794aa3f0a81a5', icon: "b2b_icon-arrow-left", clickable: true })), h("b2b-headline", { key: 'd73a470a1e573c843bd45d7276563291fbed287c', size: '100', align: 'center', class: "b2b-date-picker-month", "aria-label": "select month", tabindex: 0, onClick: () => {
+            }, "aria-label": "previous month" }, h("b2b-icon-100", { key: 'e001e6d00bcbb13b56c4dd5e34604d3099ffabef', icon: "b2b_icon-arrow-left", clickable: true })), h("b2b-headline", { key: 'fd2d92a0be0314b846e958edf9bccf3c398a247a', size: '100', align: 'center', class: "b2b-date-picker-month", "aria-label": "select month", tabindex: 0, onClick: () => {
                 this.b2bDatePickerViewChanged.emit({
                     value: "Months" /* DatePickerView.Months */,
                 });
@@ -20,7 +20,7 @@ export class B2bDatePickerHeader {
                         value: "Months" /* DatePickerView.Months */,
                     });
                 }
-            } }, Months[this.selectedMonth]), h("b2b-headline", { key: '9a443891ff3bc1d64f8bd0c94dee0e99c2c899ee', size: '100', align: 'center', class: "b2b-date-picker-year", "aria-label": "select year", tabindex: 0, onClick: () => {
+            } }, Months[this.selectedMonth]), h("b2b-headline", { key: '2911aaded910b96beead35c2829468a244c49832', size: '100', align: 'center', class: "b2b-date-picker-year", "aria-label": "select year", tabindex: 0, onClick: () => {
                 this.b2bDatePickerViewChanged.emit({
                     value: "Years" /* DatePickerView.Years */,
                 });
@@ -30,9 +30,9 @@ export class B2bDatePickerHeader {
                         value: "Years" /* DatePickerView.Years */,
                     });
                 }
-            } }, this.selectedYear), h("button", { key: '08ce033f80749a5d9b882fbf04939b9993289ead', class: "b2b-date-picker-nav--right", onClick: this.b2bDatePickerNextMonth.emit, onMouseOut: event => {
+            } }, this.selectedYear), h("button", { key: 'c36292f29993f17e1b3597086714e680d390f2b9', class: "b2b-date-picker-nav--right", onClick: this.b2bDatePickerNextMonth.emit, onMouseOut: event => {
                 event.target.blur();
-            }, "aria-label": "next month" }, h("b2b-icon-100", { key: '8ba392f6c91dfd7e9c1a262ddca2e3640e7c3840', icon: "b2b_icon-arrow-right", clickable: true })))));
+            }, "aria-label": "next month" }, h("b2b-icon-100", { key: '7b7391d2f476a1b4170368caf58e26a265f4af87', icon: "b2b_icon-arrow-right", clickable: true })))));
     }
     static get is() { return "b2b-date-picker-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/date-picker-months.js

@@ -80,7 +80,7 @@ export class B2bDatePickerMonths {
         (_a = this.getCurrentMonth()) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '92f546b998c48d274d76db47db997bcda3968033' }, h("div", { key: 'cfd9e12f5d1047d6acf2be7142d070dd64517049', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
+        return (h(Host, { key: '33365006ef661b018a70e1f0712e22e0dd9c5dec' }, h("div", { key: 'a06fa2fa936f5fcb51a3d90d6f9ef7463785997a', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
     }
     static get is() { return "b2b-date-picker-months"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/date-picker-years.js

@@ -97,7 +97,7 @@ export class B2bDatePickerYears {
         }
     }
     render() {
-        return (h(Host, { key: '2e9b64e857f36f8623cb13aa5ebd5346e21bdc6f' }, h("div", { key: 'b6a82d5fbfc2f18aab9c2c64efe3c8bbe63cfc19', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
+        return (h(Host, { key: '66a4e371ba765166025c8addfd5e8ca3ef6a1223' }, h("div", { key: '2ec5a10c6c605d91b3eb5b18a558ade240980154', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
     }
     static get is() { return "b2b-date-picker-years"; }
     static get encapsulation() { return "shadow"; }