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

package/dist/collection/components/table/table-row/table-row.js

@@ -110,12 +110,12 @@ export class TableRowComponent {
         }
     }
     render() {
-        return (h(Host, { key: '8464ef3dedf1ef893088ccae661282c3552b52e7', class: {
+        return (h(Host, { key: '17e8eeab5e415f40f20b2b7fbf8fe335aa200e22', class: {
                 'b2b-table-row': true,
                 ['b2b-table-row--colspan']: this.size === TableSizes.COLSPAN,
                 ['b2b-table-row--highlight']: this.highlight,
                 [`b2b-table-row--color-${this.getRowColor()}`]: true,
-            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: 'f25f2457e0ff940f31b0a03cf528336448f5af5b' })));
+            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: 'e7678fb2361589fee9a4abc5ab21e0b3af9b9468' })));
     }
     static get is() { return "b2b-table-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-rowgroup/table-rowgroup.js

@@ -116,11 +116,11 @@ export class TableRowgroupComponent {
         this.makeHeaderRowNotSelectable();
     }
     render() {
-        return (h(Host, { key: 'a2ca6843066eb150ac7bc7cec2685343f1a544f7', class: {
+        return (h(Host, { key: 'dffc8119e0342c6df2c5df726cc3a3086180b515', class: {
                 ['b2b-table-rowgroup__' + this.type]: true,
                 'b2b-table-rowgroup--fixed': this.fixed,
                 'b2b-table-rowgroup--colspan': this.size === TableSizes.COLSPAN,
-            }, role: "rowgroup" }, h("slot", { key: 'ff13924259c51569679fcf24d3af7b57470f608d' })));
+            }, role: "rowgroup" }, h("slot", { key: '1bbdcff54f039fc378d75edd051e00fbc646ac21' })));
     }
     static get is() { return "b2b-table-rowgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.js

@@ -60,9 +60,9 @@ export class TableComponent {
         }
     }
     render() {
-        return (h(Host, { key: '4e54f9b98d02bed540e4748bbcf20837647ce796', class: {
+        return (h(Host, { key: 'b55b76e268c2d29966fb7f8fc3773b5106d9db9c', class: {
                 ['b2b-table--' + this.size]: true,
-            }, role: "table" }, h("slot", { key: '7e70f4f9b9ff302e7f3e283753591c5f4dd79312' })));
+            }, role: "table" }, h("slot", { key: 'cb7843109bd84a6b156c38a9c822851c16550906' })));
     }
     static get is() { return "b2b-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/utils.js

@@ -31,7 +31,6 @@ export function getFirstRow(hostEl) {
     }
 }
 export function isFirstRow(el) {
-    // attr is nullable so
-    // eslint-disable-next-line @stencil-community/strict-boolean-conditions
+    // attr is nullable so we need to check with ternary
     return el.previousElementSibling ? false : true;
 }

package/dist/collection/components/textarea/textarea.js

@@ -45,10 +45,10 @@ export class B2BTextareaComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'ded78634398ff5e016645b0eceb54414a0fb1280', class: {
+        return (h(Host, { key: '32b6dfb73db9e2820cc14b5710f8028b2eac5c13', class: {
                 'b2b-textarea': true,
                 'b2b-textarea--error': this.invalid && !this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { key: '0a0f55fca870e52ea12d2f2ac23a4942752d26a8', class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { key: '6d899daa1eefc303207174a6d51a09baccec5bc7', class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     static get is() { return "b2b-textarea"; }

package/dist/collection/components/time-picker/time-picker.js

@@ -109,23 +109,23 @@ export class TimePickerComponent {
         return times;
     }
     render() {
-        return (h(Host, { key: '60186f73f9b29e97a12cae3d21677a93e9d2cc2e', class: {
+        return (h(Host, { key: '777bcb8f12e5d1727188137ac40cf8435cf7e70c', class: {
                 'b2b-time-picker': true,
                 'b2b-time-picker--error': this.isInvalid,
-            } }, this.label && (h("b2b-input-label", { id: this.label, required: this.required }, this.label)), h("div", { key: 'ba780bb83b8b29fbf954a3fcc9d3d24e1fb00d47', class: {
+            } }, this.label && (h("b2b-input-label", { id: this.label, required: this.required }, this.label)), h("div", { key: '23a073017874d7ac6b93b4091ce1ec3c6bab67d8', class: {
                 'b2b-time-picker__wrapper': true,
                 'b2b-time-picker__wrapper--focused': this.hasFocus,
                 'b2b-time-picker__wrapper--filled': !this.hasFocus && !this.invalid && this.value !== '',
                 'b2b-time-picker__wrapper--error': this.isInvalid,
-            } }, h("input", { key: 'b7c954dcc95b39ba1243c0594af865aeb8f5e556', ref: el => (this.inputRef = el), class: {
+            } }, h("input", { key: 'b2e3a715b06e10f5a0d84e55e7ee9b1646e76237', ref: el => (this.inputRef = el), class: {
                 'b2b-time-picker__native-input': true,
-            }, type: "text", placeholder: this.placeholder, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput }), h("div", { key: '2174ef2f4795544c109934bba08b5bf5589ad970', class: "b2b-icons" }, this.value && (h("div", { class: "b2b-close-icon", onClick: this.onClear }, h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: '6a0b79eeb95e89fd4e1ae7650fc6894fe9995716', class: "b2b-duration-icon", onMouseDown: e => {
+            }, type: "text", placeholder: this.placeholder, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput }), h("div", { key: '0e7f85e51cfd259dd665f7be9380f92ce92d113c', class: "b2b-icons" }, this.value && (h("div", { class: "b2b-close-icon", onClick: this.onClear }, h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: '260525bb4b7af258fed31fbe6e2c52e601a69887', class: "b2b-duration-icon", onMouseDown: e => {
                 e.preventDefault();
                 this.toggleDropdown();
-            } }, h("b2b-icon-100", { key: '4d2c4ac3c85e7186f02c1ace46e0f52b32b3867e', icon: "b2b_icon-duration", clickable: true })))), h("div", { key: '05643f9d3d325a0d145b5f75a5295e3772b317a2', class: {
+            } }, h("b2b-icon-100", { key: 'c00253db429984698fef2fdd7be08e2f06f2bdfe', icon: "b2b_icon-duration", clickable: true })))), h("div", { key: '03e775dde5fb3f04d0fae9ff2f9e8b21dec235a7', class: {
                 'b2b-time-picker__options-container': true,
                 'b2b-time-picker__options-container--visible': this.isOpen && this.hasFocus,
-            }, onMouseDown: e => e.preventDefault() }, h("div", { key: '2f3d104f3c8b91f828195d17a493ae085098ffb2', class: "b2b-time-picker__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, this.availableTimes.map(time => (h("div", { key: time, class: {
+            }, onMouseDown: e => e.preventDefault() }, h("div", { key: 'da0bea3b84e2de0b9990b0c8bc0ad724fef98cd2', class: "b2b-time-picker__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, this.availableTimes.map(time => (h("div", { key: time, class: {
                 'b2b-time-picker__option': true,
                 'b2b-time-picker__option--selected': time === this.value,
             }, "data-value": time, onClick: this.onSelect, role: "option", "aria-selected": time === this.value ? 'true' : 'false' }, time))))), (this.hint || this.currentErrorMessage) && (h("span", { class: {

package/dist/collection/components/toggle-button/toggle-button.js

@@ -31,13 +31,13 @@ export class B2bToggleButtonComponent {
         return Array.from(document.querySelectorAll(`b2b-toggle-button[name="${this.name}"]`)).filter((toggle) => toggle.value !== this.value);
     }
     render() {
-        return (h(Host, { key: '653a99cf2670e048d4486f4c58a6b362777f1542', onClick: this.onClick }, h("span", { key: 'bf6c3226b73ac9d033c6479e5ddf0a2366c51a65', class: {
+        return (h(Host, { key: '8e5d62083d9f1ca982302ff1ead4b4eafcf13bbf', onClick: this.onClick }, h("span", { key: '85f8bf7914a3185645b20c4359b989861d66ae11', class: {
                 'b2b-toggle-button': true,
                 'b2b-toggle-button--disabled': this.disabled,
-            } }, h("input", { key: '74ac055cf0fc0cb192c38fa288d20892a77eb662', tabindex: 0, class: {
+            } }, h("input", { key: '0cdf383fa7893cadad73c39ed1beed05cb1cd236', tabindex: 0, class: {
                 'b2b-toggle-button__input': true,
                 'b2b-toggle-button__input--disabled': this.disabled,
-            }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '56246f69a36f044a58e735a3a2e3bbacc95d285c', id: this.name, tabindex: -1, class: {
+            }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: 'e22cd5d0b2170f6490448a5511649874f735247a', id: this.name, tabindex: -1, class: {
                 'b2b-toggle-button__label': true,
                 'b2b-toggle-button__label--disabled': this.disabled,
                 'b2b-toggle-button__label--checked': this.checked && !this.disabled,

package/dist/collection/components/toggle-chip/toggle-chip.js

@@ -30,11 +30,11 @@ export class B2BToggleChipComponent {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '837b37a053f8383bb9adb7a2f0e4f7dc62313a8d' }, h("span", { key: 'c8b014ce785d0f81ac50393f09eae6bf3c2e4c97', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
+        return (h(Host, { key: '6c016c4b7c5f9d1ccad32fe56b5eb95312a74a15' }, h("span", { key: '736a4d5f2b5c441683e16d99918207887bbc6b7d', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
                 'b2b-toggle-chip': true,
-            } }, h("input", { key: '1c6e261e46e953ec7a12f19e8f0c777277a2a153', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
+            } }, h("input", { key: '29641ec808f7912d2a95cbeb8146b0fe4277960c', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
                 'b2b-toggle-chip__input': true,
-            }, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: 'a07b6b77a6660e1b167c8b83125464e431a2dd7a', id: this.name, tabIndex: -1, class: {
+            }, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '14038f9888d068ad3e2e6796acb009885c3b58e3', id: this.name, tabIndex: -1, class: {
                 'b2b-toggle-chip__label': true,
                 'b2b-toggle-chip__label--active': this.active && !this.disabled,
                 'b2b-toggle-chip__label--disabled': this.disabled,

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

@@ -45,10 +45,10 @@ export class B2BToggleGroup {
         }
     }
     render() {
-        return (h(Host, { key: 'b6ad87b079d1935b0b033398f89f0a9eeff68ede' }, h("div", { key: '600ccfd8b2b9db697b555f326a327b9827970e96', class: {
+        return (h(Host, { key: '24e5a006eaf51221268e04def1d28fac49caa528' }, h("div", { key: '2b7bea2caa4e3de22c5a072b04e28f007a4d80b0', class: {
                 'b2b-toggle-group': true,
                 'b2b-toggle-group--disabled': this.disabled,
-            } }, h("fieldset", { key: '214687f6e5655437a8dba0d6c29ce8c12b5c9c9f' }, h("slot", { key: 'e8076f9a98cef4463a51d9dd58222825a5d7bc47' })))));
+            } }, h("fieldset", { key: 'e79f68a2616739891b02f0e309e1bde962385129' }, h("slot", { key: 'ba14d0552d1277646f59712dd9330be76fc1a2f0' })))));
     }
     static get is() { return "b2b-toggle-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle-switch/toggle-switch.js

@@ -38,17 +38,17 @@ export class B2bToggleSwitchComponent {
     render() {
         // workaround for purgecss as safelist doesn't work
         const isLeft = this.labelPosition === 'left';
-        return (h(Host, { key: '0fb3a7738b62a225aea9fea30df20fdcdf7c6119' }, h("div", { key: 'e60e0c5935631c0a15679aa852bf6942247e579a', class: {
+        return (h(Host, { key: 'acbbb94678ccc4b6faa3c299790a5bf92da7cb8c' }, h("div", { key: 'a5e2f8a9d5ca21aac51288958a2bbefc642ad424', class: {
                 'b2b-toggle': true,
                 'b2b-toggle--disabled': this.disabled,
                 'b2b-toggle--checked': this.state,
-            } }, h("div", { key: 'c73c7c7cb6adc85a9d8701bc6940b989bb82b69f', class: {
+            } }, h("div", { key: '948337e5d0af2cdaff737e9c0079d47897596a9d', class: {
                 'b2b-toggle__label': true,
                 'b2b-toggle__label--left': isLeft,
-            } }, h("span", { key: 'e8b511f2df1a46c6a030dd3e40b7a48b5bf255f3', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: '0bdb4fb71ce5790c5c5200126ff82505d630daee', class: {
+            } }, h("span", { key: '46fe0fbe5186c6a8153dd5d1f806ce8746c09369', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: '06113ebfba02103eae3f7d1dd2f392320960a9b0', class: {
                 'b2b-toggle__icon': true,
                 'b2b-toggle__icon--show': this.state,
-            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: 'd3e0752bd7352e84dfb29ac7ebab158db2143042', d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" }))), this.label && (h("span", { class: {
+            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '688f71c4be24c92016185f8bb1807b23948bc975', d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" }))), this.label && (h("span", { class: {
                 'b2b-toggle__text': true,
                 'b2b-toggle__text--left': isLeft,
             } }, this.label))))));

package/dist/collection/components/tooltip/tooltip.js

@@ -59,13 +59,13 @@ export class B2BTooltipComponent {
         }
     }
     render() {
-        return (h(Host, { key: '5ad13130ded48a0b23ff30d04152857f55b7714f', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: '83290fe4eb64980eb748e08615e739a57ca46b73', class: {
+        return (h(Host, { key: '2d8ab66d405b80e57f96bead659a8022e6911a0e', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: '796d63af72e8fcce306414fe0f88006b524d0901', class: {
                 [`b2b-tooltip--${this.position}`]: true,
                 'b2b-tooltip__trigger': true,
-            } }, h("slot", { key: 'a1c8efba4056c1e78abdcacb3071bf699fab24a4' }), h("div", { key: '70c0d20ef0ad32c586e6b2f49118fb4744a9c82f', class: {
+            } }, h("slot", { key: '041362ddaac37d851b9c10c9f755afb11d0d4063' }), h("div", { key: '933e01ae5dc8791634c04d9756418453b36d5983', class: {
                 'b2b-tooltip__content': true,
                 'b2b-tooltip--visible': this.opened,
-            } }, h("slot", { key: '108e7b2e99209bb450da987149dbe835a6183629', name: "content" }, this.content)))));
+            } }, h("slot", { key: '611d4d898a46bfb6fbdb8c96e8314636c0af129b', name: "content" }, this.content)))));
     }
     static get is() { return "b2b-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wizard/wizard-step.js

@@ -7,10 +7,10 @@ export class WizardStepComponent {
         this.checkIcon = true;
     }
     render() {
-        return (h(Host, { key: '4ee464a50a56224fad021de974d85676f85cf67d' }, h("div", { key: '41289234f28e97f25408c7fd886bd8c197a17273', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: '5f0ff339a49b714145ac86fae4991dd3a408b872', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: '74467018cc4ae1ced3b0b64b14c2634d8ca1b73a', class: {
+        return (h(Host, { key: '2d1d6a5be8aae8d8e9ec3d0c9df1242e43502c83' }, h("div", { key: '92eb217ace3a043f5a33a17337e45abe5675b8d8', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: 'c7d2e09fafa64f03acb01271b061afac88c72165', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: '39c1b85dbea062c5b7016d720f965d1587813c99', class: {
                 'b2b_wizard__step__label': true,
                 'b2b_wizard__step__label--default': this.state === WizardStatus.DEFAULT,
-            } }, h("slot", { key: 'c2df37960e8c4e8591f426d6809094a58cf93a25' })))));
+            } }, h("slot", { key: '35c517a307bd5cb8890c5cb325ce69c716ceb2ed' })))));
     }
     static get is() { return "b2b-wizard-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wizard/wizard.js

@@ -44,7 +44,7 @@ export class WizardComponent {
             this.setStepsState();
     }
     render() {
-        return (h(Host, { key: 'dbfbc0987d3e4bd7b07b47451ea4096e53ea3d16' }, h("div", { key: '3481034aa0be88d4bec040dac7ccfbbfe7485264', class: "b2b_wizard" }, h("slot", { key: '6c8ebd923230dc7439191de20bd310486575725c' }))));
+        return (h(Host, { key: 'c83e101dda0d1ad6f03cf9fd922fceaff64ca5bf' }, h("div", { key: 'ff512302694317123e658daf21325db106e9ec4c', class: "b2b_wizard" }, h("slot", { key: 'ed6ef6450eff8c407be2b73315c9cc4de50d7fc3' }))));
     }
     static get is() { return "b2b-wizard"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wizard-icon/wizard-icon.js

@@ -7,7 +7,7 @@ export class WizardIconComponent {
         this.checkIcon = true;
     }
     render() {
-        return (h(Host, { key: '2b192e2eccfee0dd27006039ba0f8e3878e296db' }, h("div", { key: '79d0eb8d6713117b69643e745e07f2b2feb23b01', class: {
+        return (h(Host, { key: '41fdb06c856e633ad4ea6782b3e5c575a5a12e11' }, h("div", { key: 'e6bb7c6bde91b6ff3d82e45c82b0312f790c46be', class: {
                 'b2b-wizard-icon': true,
             } }, this.state === WizardStatus.COMPLETED && (h("b2b-rounded-icon", { color: "var(--b2b-color-success-50)", "content-color": "var(--b2b-color-success-100)" }, this.checkIcon ? (h("b2b-icon-100", { slot: "icon", icon: "b2b_icon-check" })) : (h("span", { slot: "text" }, this.step)))), this.state === WizardStatus.PENDING && (h("b2b-rounded-icon", { color: "var(--b2b-color-icon-default)", "content-color": "var(--b2b-color-icon-inverted)" }, h("span", { slot: "text" }, this.step))), this.state === WizardStatus.DISABLED && (h("b2b-rounded-icon", { color: "var(--b2b-color-grey-100)", "content-color": "var(--b2b-color-grey-400)" }, h("span", { slot: "text" }, this.step))), this.state === WizardStatus.DEFAULT && (h("b2b-rounded-icon", { color: "transparent", "border-color": "var(--b2b-color-icon-secondary)", "content-color": "var(--b2b-color-icon-secondary)" }, h("span", { slot: "text" }, this.step))))));
     }

package/dist/components/b2b-custom-dropdown-option-category.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface B2bCustomDropdownOptionCategory extends Components.B2bCustomDropdownOptionCategory, HTMLElement {}
+export const B2bCustomDropdownOptionCategory: {
+    prototype: B2bCustomDropdownOptionCategory;
+    new (): B2bCustomDropdownOptionCategory;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const customDropdownOptionCategoryCss = ":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;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--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);--b2b-size-copy-line-height-100:var(--b2b-size-53);--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)}: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;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--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)}";
+const B2bCustomDropdownOptionCategoryStyle0 = customDropdownOptionCategoryCss;
+
+const CustomDropdownWithOptionHeadingComponent = /*@__PURE__*/ proxyCustomElement(class CustomDropdownWithOptionHeadingComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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 style() { return B2bCustomDropdownOptionCategoryStyle0; }
+}, [1, "b2b-custom-dropdown-option-category", {
+        "label": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["b2b-custom-dropdown-option-category"];
+    components.forEach(tagName => { switch (tagName) {
+        case "b2b-custom-dropdown-option-category":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CustomDropdownWithOptionHeadingComponent);
+            }
+            break;
+    } });
+}
+
+const B2bCustomDropdownOptionCategory = CustomDropdownWithOptionHeadingComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bCustomDropdownOptionCategory, defineCustomElement };

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

@@ -38,13 +38,13 @@ const CustomDropdownOptionComponent = /*@__PURE__*/ proxyCustomElement(class Cus
         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/components/b2b-custom-dropdown.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './icon-100.js';
 import { d as defineCustomElement$3 } from './input.js';
 import { d as defineCustomElement$2 } from './input-label.js';
 
-const customDropdownCss = ":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;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--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);--b2b-size-copy-line-height-100:var(--b2b-size-53);--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)}: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;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--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:inline-block;position:relative;width:auto}.b2b-custom-dropdown__trigger{position:relative;display:inline !important;cursor:pointer}.b2b-custom-dropdown{position:absolute;top:100%;z-index:1000;inline-size:var(--b2b-dropdown-width, 300px);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--align-left{left:0;right:auto}.b2b-custom-dropdown--align-center{left:50%;right:auto;transform:translateX(-50%)}.b2b-custom-dropdown--align-right{left:auto;right:0}.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}.b2b-custom-dropdown__empty{padding:var(--b2b-size-30);color:var(--b2b-color-grey-400);font-size:var(--b2b-size-copy-100);background-color:var(--b2b-color-white-100)}";
+const customDropdownCss = ":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;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--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);--b2b-size-copy-line-height-100:var(--b2b-size-53);--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)}: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;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--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:inline-block;position:relative;width:auto}.b2b-custom-dropdown__trigger{position:relative;display:inline !important;cursor:pointer}.b2b-custom-dropdown{position:absolute;top:100%;z-index:1000;inline-size:var(--b2b-dropdown-width, 300px);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--align-left{left:0;right:auto}.b2b-custom-dropdown--align-center{left:50%;right:auto;transform:translateX(-50%)}.b2b-custom-dropdown--align-right{left:auto;right:0}.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}::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);font-size:var(--b2b-size-copy-100);background-color:var(--b2b-color-white-100)}";
 const B2bCustomDropdownStyle0 = customDropdownCss;
 
 const B2bCustomDropdownComponent = /*@__PURE__*/ proxyCustomElement(class B2bCustomDropdownComponent extends HTMLElement {
@@ -13,6 +13,7 @@ const B2bCustomDropdownComponent = /*@__PURE__*/ proxyCustomElement(class B2bCus
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.allOptionCategories = [];
         this.toggleMenu = () => {
             this.opened = !this.opened;
         };
@@ -34,6 +35,11 @@ const B2bCustomDropdownComponent = /*@__PURE__*/ proxyCustomElement(class B2bCus
                 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;
@@ -64,6 +70,12 @@ const B2bCustomDropdownComponent = /*@__PURE__*/ proxyCustomElement(class B2bCus
     }
     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;
@@ -71,8 +83,15 @@ const B2bCustomDropdownComponent = /*@__PURE__*/ proxyCustomElement(class B2bCus
         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)) {
@@ -80,7 +99,7 @@ const B2bCustomDropdownComponent = /*@__PURE__*/ proxyCustomElement(class B2bCus
         }
     }
     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,
@@ -88,12 +107,12 @@ const B2bCustomDropdownComponent = /*@__PURE__*/ proxyCustomElement(class B2bCus
                 '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))))));
     }
     get hostElement() { return this; }
     static get style() { return B2bCustomDropdownStyle0; }

package/dist/components/b2b-date-range-picker.js

@@ -132,22 +132,22 @@ const B2bDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class B2bDateRange
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h(Host, { key: '36a6fd2d45a9019e57dda728f47961cf54bf2535' }, h("div", { key: '26c3eca4579e092b68ddb76fdb72de3fb3e1d1a0', class: "b2b-date-range-picker" }, h("b2b-input-label", { key: 'c6324a8b0ec07dc719e44ae35ce6987a46e012e3', required: this.required }, this.label), h("div", { key: '3f27ec4c6054966866d1184e80c0b1a9b5c50178', class: {
+        return (h(Host, { key: '688c43b7089d547442f76ab36b340b9d24854680' }, h("div", { key: '3596291274bf87f97e6556a8ed6ffac33d3cbb4b', class: "b2b-date-range-picker" }, h("b2b-input-label", { key: '25648fb46b9bc7d517c47853315e224529b8c278', required: this.required }, this.label), h("div", { key: '5650c0411167fae2ff20f88bd76a5269b3ef7b68', class: {
                 'b2b-date-range-picker-input-wrapper': true,
                 'b2b-date-range-picker-input-wrapper--error': this.invalid,
                 'b2b-date-range-picker-input-wrapper--open': this.open,
-            }, onClick: () => this.toggleOpen() }, h("b2b-paragraph", { key: '23690e8fc98fd82699dbc1319fa26308af7ce23f', margin: false }, toDateRangeString(this.internalDateRange, '')), h("div", { key: '6665672a212e59d228aaf56f53ab03b27df857ea', class: "b2b-icons" }, this.internalDateRange && (h("div", { tabIndex: 0, onClick: () => this.setDate(undefined), onKeyDown: (event) => {
+            }, onClick: () => this.toggleOpen() }, h("b2b-paragraph", { key: '357cb96dc8595ecd54db33378eaca1471ffc0b4e', margin: false }, toDateRangeString(this.internalDateRange, '')), h("div", { key: '16f9ec5df189eb00bc6871cb2d8a601efb1f0e7a', class: "b2b-icons" }, this.internalDateRange && (h("div", { tabIndex: 0, onClick: () => this.setDate(undefined), onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                     this.setDate(undefined);
                 }
-            } }, h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: 'c87f07fb2e73d9c250c26a92b77d4802f4f0a72f', tabindex: 0, onClick: () => this.toggleOpen(), onKeyDown: event => {
+            } }, h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: '78db0e048cdc3c40f0cb1d782a612ab0d0ec84f8', tabindex: 0, onClick: () => this.toggleOpen(), onKeyDown: event => {
                 if (event.key === 'Enter') {
                     this.toggleOpen();
                 }
-            }, class: "b2b-event-icon" }, h("b2b-icon-100", { key: 'cb2bdceb7a80747fd3e8efcf294189a7e7f0b6fb', "aria-label": this.open ? 'close date picker' : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), h("div", { key: '84ba8c35eccb089f50a24134bcb5b9e447bdaa95', class: {
+            }, class: "b2b-event-icon" }, h("b2b-icon-100", { key: '8d8a6e5df4e883d60e0c587070a03c35beba26ad', "aria-label": this.open ? 'close date picker' : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), h("div", { key: 'b88eae0ed368aa96f41a891a49ac8d8a7cddda9e', class: {
                 'b2b-date-range-picker-body': true,
                 'b2b-date-range-picker-body--hidden': !this.open,
-            } }, h("div", { key: '154bc92126a558f33be046de4a1e9cd0a2b3bfdb', class: "b2b-date-range-picker-body--calendar" }, this.viewMode === "Days" /* DatePickerView.Days */ && (h("div", null, h("b2b-date-picker-header", { language: this.language, selectedMonth: this.viewedMonth - 1, selectedYear: this.viewedYear }), h("b2b-date-picker-days-header", { language: this.language }), h("b2b-date-range-picker-days", { viewedDate: [this.viewedYear, this.viewedMonth, this.viewedDay], firstDate: (_c = (_b = (_a = this.highlightDateRange) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : this.tempDate) !== null && _c !== void 0 ? _c : (_d = this.internalDateRange) === null || _d === void 0 ? void 0 : _d[0], secondDate: (_f = (_e = this.highlightDateRange) === null || _e === void 0 ? void 0 : _e[1]) !== null && _f !== void 0 ? _f : (this.tempDate == null
+            } }, h("div", { key: 'b8a02532185305cc634078c380e0fc90d3cd2288', class: "b2b-date-range-picker-body--calendar" }, this.viewMode === "Days" /* DatePickerView.Days */ && (h("div", null, h("b2b-date-picker-header", { language: this.language, selectedMonth: this.viewedMonth - 1, selectedYear: this.viewedYear }), h("b2b-date-picker-days-header", { language: this.language }), h("b2b-date-range-picker-days", { viewedDate: [this.viewedYear, this.viewedMonth, this.viewedDay], firstDate: (_c = (_b = (_a = this.highlightDateRange) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : this.tempDate) !== null && _c !== void 0 ? _c : (_d = this.internalDateRange) === null || _d === void 0 ? void 0 : _d[0], secondDate: (_f = (_e = this.highlightDateRange) === null || _e === void 0 ? void 0 : _e[1]) !== null && _f !== void 0 ? _f : (this.tempDate == null
                 ? (_g = this.internalDateRange) === null || _g === void 0 ? void 0 : _g[1]
                 : undefined), disableDates: day => this.disableDates(toDate([this.viewedYear, this.viewedMonth, day])), preview: this.highlightDateRange != null }))), this.viewMode === "Months" /* DatePickerView.Months */ && (h("b2b-date-picker-months", { language: this.language, selectedMonth: this.viewedMonth - 1 })), this.viewMode === "Years" /* DatePickerView.Years */ && (h("b2b-date-picker-years", { selectedYear: this.viewedYear }))), Object.keys(this.presets).length > 0 && (h("div", { class: "b2b-date-range-picker-body--presets" }, Object.entries(this.presets).map(([text, value]) => (h("b2b-paragraph", { class: {
                 'b2b-date-range-picker-body--presets--selected': isDateRangeEqual(this.internalDateRange, value),

package/dist/components/b2b-dropdown.js

@@ -231,11 +231,11 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
         const showHint = this.hint && !hasError;
         const showError = this.error && hasError;
         const filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(this.searchValue.toLowerCase()));
-        return (h(Host, { key: '62bf76334a93430161d322c8af97f5978b61d772', class: {
+        return (h(Host, { key: '333607f298f0693f137f787a3a906a8b2d813ebb', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': hasError,
                 'b2b-dropdown--disabled': this.disabled || this.groupDisabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '82c61a949c0cb65a6dfa877709b3233e95235f8f', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, this.search ? (h("b2b-input", { placeholder: this.placeholder, invalid: hasError, value: this.truncatedText || this.searchValue, disabled: this.disabled || this.groupDisabled, "onB2b-focus": () => {
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '32482a4ccd93ff2d33f3fe4936c88ce3a753144f', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, this.search ? (h("b2b-input", { placeholder: this.placeholder, invalid: hasError, value: this.truncatedText || this.searchValue, disabled: this.disabled || this.groupDisabled, "onB2b-focus": () => {
                 this.isOpen = true;
                 this.focused = true;
             }, "onB2b-input": this.handleSearchInput }, h("div", { slot: "end" }, (this.selectedText || this.searchValue) &&

package/dist/components/b2b-flyout-menu-option.js

@@ -24,7 +24,7 @@ const FlyoutMenuOptionComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutM
         }
     }
     render() {
-        return (h(Host, { key: '4064c5827dffd55637271a59061a2c2abb54d3ca', class: {
+        return (h(Host, { key: '68e7f996150c9c41f5b181de3a80192334d621bd', class: {
                 'b2b-flyout-menu__option': true,
                 'b2b-flyout-menu__option--disabled': this.disabled,
                 'b2b-flyout-menu__option--separator': this.separator,

package/dist/components/b2b-flyout-menu.js

@@ -151,12 +151,12 @@ const FlyoutMenuComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutMenuCom
         options[index].focus();
     }
     render() {
-        return (h(Host, { key: '03efeb4e28ef04b0719b3ade8e52d20cf3046372' }, h("div", { key: 'e2508205d7402d2ed8ef031c8ab5483a6fbdedbd', class: {
+        return (h(Host, { key: 'a50311153d075c53f2c889b7a528e80270aeaee7' }, h("div", { key: '7440d05ac09c1528b0b5141bbce9b4414740709a', class: {
                 'b2b-flyout-menu': true,
-            } }, h("div", { key: 'c6283f5ebff4ec0962face0e0f440e2cf0ec9ceb', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '303181fa8dac70e463b0efa7fa18a339c84b7009', name: "trigger" })), h("div", { key: 'ff4058c24c1c84c967316569bee8d75d49497eba', onFocusout: this.blurMenu, class: {
+            } }, h("div", { key: '259280b1b789067683e15899d2150c5d4143f7df', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '7b7e276c0b9247a4c27e94ceec2151a40546d932', name: "trigger" })), h("div", { key: '8bb7b739e6037419e6aa22d7d26eced0ecc5142b', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, h("div", { key: '860224aa691a4c06814731aca94d85a762fc806b', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'be5a754361d59fdbdf5ac934b0d1f5b50de8e3a1', name: "option" })))));
+            } }, h("div", { key: '224a2ecd334beb90046337bc04ff3ac7767924e5', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'be1d8a717b2b128a6acc6fc2129f239c774f0be7', name: "option" })))));
     }
     get hostElement() { return this; }
     static get style() { return B2bFlyoutMenuStyle0; }

package/dist/components/b2b-grid-col.js

@@ -17,7 +17,7 @@ const B2bGridColumnComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridCol
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: 'e6a06fd72fd364f57b423bdc69cd9c2d4a87d0ca', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'd5785321b8ae17e90fd3aa9e69cc8911430d3e8c' })));
+        return (h(Host, { key: '482a27d9f5e851e1e61f0cb3e3670021171aa98c', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: '6c6a852adcb9737360ff5d49a082e7a94a996d8f' })));
     }
     get hostElement() { return this; }
 }, [1, "b2b-grid-col", {

package/dist/components/b2b-grid-row.js

@@ -70,7 +70,7 @@ const B2bGridRowComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridRowCom
         });
     }
     render() {
-        return (h(Host, { key: '60ea771fe5da5fc9aa305824f6718d5f1d687374', style: {
+        return (h(Host, { key: '213d6b6b26fbcf13619c2487d6758e2bc1f6bef6', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -78,7 +78,7 @@ const B2bGridRowComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridRowCom
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: 'f38f2b66439b0d8820aa2b25ab88f2c7e02d4ae5' })));
+            } }, h("slot", { key: '6463ebdf6824801d36716b19cdb60805a6ebda3c' })));
     }
     get hostElement() { return this; }
 }, [1, "b2b-grid-row", {

package/dist/components/b2b-grid.js

@@ -11,7 +11,7 @@ const B2bGridComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridComponent
         this.margin = 24;
     }
     render() {
-        return (h(Host, { key: '0a61abf781f924eb4b88ceb02bece63d2a39f76b', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '02903dbdba9c4973573bac7be02b0e6d3a9cd71a' })));
+        return (h(Host, { key: 'efe0ae16841284174a40a492369562d18be1b04f', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: 'aeb9d3558506a0f52333887f52db68f503d08dd7' })));
     }
     get hostElement() { return this; }
     static get style() { return B2bGridStyle0; }

package/dist/components/b2b-label.js

@@ -11,10 +11,10 @@ const LabelComponent = /*@__PURE__*/ proxyCustomElement(class LabelComponent ext
         this.type = 'neutral';
     }
     render() {
-        return (h("span", { key: '86d64389cf254eb3fb56e58c9399087e4d053f5f', class: {
+        return (h("span", { key: '7b14413a166685eaeae8ca521884b3a45d01e607', class: {
                 'b2b-label': true,
                 [`b2b-label--${this.type}`]: true,
-            } }, h("slot", { key: 'd85ee68f76a02a02c4c10e2ef634fdc4c412229a' })));
+            } }, h("slot", { key: '4447f5e688a02b03638a83d0ebe4307f1033c16d' })));
     }
     static get style() { return B2bLabelStyle0; }
 }, [1, "b2b-label", {