@otto-de/b2b-core-components 1.31.3 → 1.32.0

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

@@ -0,0 +1,227 @@
+import { h, Host, } from "@stencil/core";
+import { isClickOutside } from "../../utils/utils";
+export class B2bCustomDropdownComponent {
+    constructor() {
+        this.toggleMenu = () => {
+            this.opened = !this.opened;
+        };
+        this.closeMenu = () => {
+            this.opened = false;
+        };
+        this.handleInput = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            this.value = event.target.value.toLowerCase();
+            this.allOptions.forEach(option => {
+                var _a;
+                const optionValue = ((_a = option.option) === null || _a === void 0 ? void 0 : _a.toLowerCase()) ||
+                    '';
+                if (optionValue.includes(this.value)) {
+                    option.classList.remove('b2b-custom-dropdown__option--hidden');
+                }
+                else {
+                    option.classList.add('b2b-custom-dropdown__option--hidden');
+                }
+            });
+        };
+        this.placeholder = undefined;
+        this.disabled = false;
+        this.dropshadow = false;
+        this.border = false;
+        this.autoDisableSearch = true;
+        this.opened = false;
+        this.selectedOption = null;
+        this.value = '';
+        this.allOptions = [];
+    }
+    handleOptionSelected(event) {
+        event.stopPropagation();
+        const selectedValue = event.detail.selectedOption;
+        this.selectedOption = selectedValue;
+        this.allOptions.forEach(option => {
+            if (option.option === selectedValue) {
+                option.selected = true;
+            }
+            else {
+                option.selected = false;
+            }
+        });
+    }
+    connectedCallback() {
+        this.initializeSlottedOptions();
+        const children = Array.from(this.hostElement.children).filter(x => !x.hasAttribute('option'));
+        if (children.length === 0) {
+            return;
+        }
+        this.triggerEl = children[0];
+        this.triggerEl.addEventListener('click', this.toggleMenu, true);
+    }
+    initializeSlottedOptions() {
+        this.allOptions = Array.from(this.hostElement.querySelectorAll('[slot="option"]'));
+    }
+    handleClickOutside(event) {
+        if (isClickOutside(event, this.hostElement)) {
+            this.closeMenu();
+        }
+    }
+    render() {
+        return (h(Host, { key: '4ab50ad17c43f38eae747029fa3d40a5c3248020' }, h("div", { key: '53cf5f6124a02eb89cb110d264529c938c300a38', class: "b2b-custom-dropdown__trigger" }, h("slot", { key: '52704de85cf40a3f281b2d286bf805063307803c', name: "trigger" })), h("div", { key: 'a740c4001a70a1d989ede124484ee01e0b5b7ba5', class: {
+                'b2b-custom-dropdown': true,
+                'b2b-custom-dropdown--on': this.opened && !this.disabled,
+                'b2b-custom-dropdown--drop-shadow': this.dropshadow,
+                'b2b-custom-dropdown--border': this.border,
+            } }, h("b2b-background-box", { key: 'f15f9489ddc9ffe94ee3b4b2a6236b97fdbe86ba', noPadding: true, borderTop: "none", borderBottom: "none", borderRight: "none", borderLeft: "none" }, h("div", { key: '7c578f211b4afeae771d9f09551fffc70c212315', class: {
+                'b2b-custom-dropdown-search': true,
+                'b2b-custom-dropdown-search--enabled': this.allOptions.length >= 6 && !this.disabled,
+            } }, h("b2b-input", { key: '6be5918919c8110a0020126f1b8f29794f3d9c1c', placeholder: this.placeholder, "onB2b-input": this.handleInput }, h("b2b-icon-100", { key: 'a1e3e511eaa8487dfb964ab24ee0f1e9bafbe10b', icon: "b2b_icon-search", slot: "end" })))), h("div", { key: '2daf4ce8c49192881fcfeb33ca35fd04835f3d60', class: this.allOptions.length >= 6
+                ? 'b2b-custom-dropdown__options-scroll-container'
+                : 'b2b-custom-dropdown__options-container' }, h("slot", { key: '328ae2c6ae90b0fc45ba1c1c4e88736d73f021cc', name: "option" })))));
+    }
+    static get is() { return "b2b-custom-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["custom-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["custom-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder shown in the input field."
+                },
+                "attribute": "placeholder",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dropdown is disabled. Default is false."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "dropshadow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dropdown should have a drop shadow. Default is false."
+                },
+                "attribute": "dropshadow",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "border": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dropdown should have a border. Default is false."
+                },
+                "attribute": "border",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "autoDisableSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search is automatically disabled for lists with fewer than six options."
+                },
+                "attribute": "auto-disable-search",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "opened": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: if the dropdown is opened"
+                },
+                "attribute": "opened",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedOption": {},
+            "value": {},
+            "allOptions": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
+        return [{
+                "name": "b2b-custom-dropdown-option-selected",
+                "method": "handleOptionSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClickOutside",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,197 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
+const meta = {
+    title: 'Components/Form/Custom Dropdown',
+    component: 'b2b-custom-dropdown',
+    argTypes: getArgTypes('b2b-custom-dropdown'),
+    args: {
+        placeholder: 'Test Placeholder',
+        separator: false,
+        disabled: false,
+        dropshadow: true,
+        border: false,
+        hoverIcon: null,
+        hoverIconColor: null,
+        selectedIcon: null,
+        selectedIconColor: null,
+        opened: false,
+        selected: false,
+    },
+    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}"
+        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
+          slot="option"
+          option="Option 1"
+          separator="${args.separator}"
+          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
+          slot="option"
+          option="Option 2"
+          separator="${args.separator}"
+          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
+          slot="option"
+          option="Option 3"
+          separator="${args.separator}"
+          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
+          slot="option"
+          option="Option 4"
+          separator="${args.separator}"
+          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
+          slot="option"
+          option="Option 5"
+          separator="${args.separator}"
+          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
+          slot="option"
+          option="Option 6"
+          separator="${args.separator}"
+          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
+          slot="option"
+          option="Option 7"
+          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>
+    </div>`;
+    },
+};
+export default meta;
+export const Default = {
+    args: Object.assign({}, meta.args),
+};
+export const WithDropShadow = {
+    args: Object.assign(Object.assign({}, meta.args), { opened: true }),
+};
+export const WithBorder = {
+    args: Object.assign(Object.assign({}, meta.args), { dropshadow: false, border: true, opened: true }),
+};
+export const WithSeparator = {
+    args: Object.assign(Object.assign({}, meta.args), { separator: true, opened: true }),
+};
+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 CustomDropdownOptionsDisabled = {
+    args: Object.assign(Object.assign({}, meta.args), { disabled: true, opened: true }),
+};
+export const SearchAndScrollDisabled = {
+    args: Object.assign(Object.assign({}, meta.args), { opened: true }),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<div style="margin-left: 16px;width: 300px">
+      <b2b-custom-dropdown
+        placeholder="${args.placeholder}"
+        dropshadow="${args.dropshadow}"
+        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>
+        <b2b-custom-dropdown-option slot="option" option="Option 1">
+        </b2b-custom-dropdown-option>
+        <b2b-custom-dropdown-option slot="option" option="Option 2">
+        </b2b-custom-dropdown-option>
+        <b2b-custom-dropdown-option slot="option" option="Option 3">
+        </b2b-custom-dropdown-option>
+        <b2b-custom-dropdown-option slot="option" option="Option 4">
+        </b2b-custom-dropdown-option>
+      </b2b-custom-dropdown>
+    </div>`;
+    },
+};
+export const CustomDropdownDisabled = {
+    args: Object.assign(Object.assign({}, meta.args), { disabled: true, opened: true }),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<div style="margin-left: 16px;width: 300px">
+      <b2b-custom-dropdown
+        placeholder="${args.placeholder}"
+        disabled="${args.disabled}"
+        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>
+        <b2b-custom-dropdown-option slot="option" option="Option 1" >
+        </b2b-custom-dropdown-option>
+        <b2b-custom-dropdown-option slot="option" option="Option 2">
+        </b2b-custom-dropdown-option>
+        <b2b-custom-dropdown-option slot="option" option="Option 3">
+        </b2b-custom-dropdown-option>
+        <b2b-custom-dropdown-option slot="option" option="Option 4">
+        </b2b-custom-dropdown-option>
+      </b2b-custom-dropdown>
+    </div>`;
+    },
+};

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: '8bd0553cd895ce7e94375947d7bed153d20bf55d' }, h("div", { key: '285b470407c87af25be5c9e34e35d38ba44e9b37', class: "b2b-date-picker-days-header" }, this.displayWeekDays())));
+        return (h(Host, { key: '6ca6b61422e9664b0468ccee19cd3cd208d0fb97' }, h("div", { key: '69fd18279a42ecfb0a2a07f99bb04565153c8df6', 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: 'c739f1a046740cc9141140354bd262916c04b42c' }, h("div", { key: 'd08a86f51331b971209f11d8b2c783a1d7d91b05', class: "b2b-date-picker-days" }, this.renderDatePickerDays())));
+        return (h(Host, { key: '73d99c811d52c00ddec7c3f044b7d850861f7a48' }, h("div", { key: '146b6533fc0d040a896e32baf3068793a8cdfe81', 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: '7cafcdef8033dbe03700fc48b523290ea8d1577a' }, h("div", { key: '2ea038c03c6a8d8295adf41477724334f07180bd', class: "b2b-date-picker-header" }, h("button", { key: 'b9b9365fd1f454f7e6176d7b4e8c77cecdefa9e8', class: "b2b-date-picker-nav--left", onClick: this.b2bDatePickerPreviousMonth.emit, onMouseOut: event => {
+        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 => {
                 event.target.blur();
-            }, "aria-label": "previous month" }, h("b2b-icon-100", { key: '622bbe2e4766ac3a750529245f4b46d59f0beb04', icon: "b2b_icon-arrow-left", clickable: true })), h("b2b-headline", { key: '673a6aab27766e8a3f6ce8b30c5c08cc6015f687', 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: '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: () => {
                 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: '3d95ab3d8aa2d76dd1b2d358d565bf273ba9264a', size: '100', align: 'center', class: "b2b-date-picker-year", "aria-label": "select year", tabindex: 0, onClick: () => {
+            } }, Months[this.selectedMonth]), h("b2b-headline", { key: '9a443891ff3bc1d64f8bd0c94dee0e99c2c899ee', 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: '987676e03e3b759ce0a42a5db9c4f0dad35aac3a', class: "b2b-date-picker-nav--right", onClick: this.b2bDatePickerNextMonth.emit, onMouseOut: event => {
+            } }, this.selectedYear), h("button", { key: '08ce033f80749a5d9b882fbf04939b9993289ead', class: "b2b-date-picker-nav--right", onClick: this.b2bDatePickerNextMonth.emit, onMouseOut: event => {
                 event.target.blur();
-            }, "aria-label": "next month" }, h("b2b-icon-100", { key: '843f3fccb5374ee43e7d0d4ce3aabe550b0a5f75', icon: "b2b_icon-arrow-right", clickable: true })))));
+            }, "aria-label": "next month" }, h("b2b-icon-100", { key: '8ba392f6c91dfd7e9c1a262ddca2e3640e7c3840', 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

@@ -73,7 +73,7 @@ export class B2bDatePickerMonths {
         this.focusCurrentMonth(months[index]);
     }
     render() {
-        return (h(Host, { key: 'a6b5d77d82b661f742e95eba15f60ff01ff6d080' }, h("div", { key: '29dce426b9f6d3401c04c07d5be997f4be09b9d6', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
+        return (h(Host, { key: '9ddb8ebbb24997435ceca09cc47ba7dc12b39ba7' }, h("div", { key: 'a650207f538786bb680698ffc293fd59a717ea3a', 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

@@ -98,7 +98,7 @@ export class B2bDatePickerYears {
         }
     }
     render() {
-        return (h(Host, { key: '04068ca8f7b6604a6f2861f0b8892f03a1e21df3' }, h("div", { key: '8fa5bd3484d9d5766ce12f8e3e354f8beab88c56', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
+        return (h(Host, { key: '22394d693b0a966c62b74de49c00d72b346a2e64' }, h("div", { key: 'a2c33dc133169c2cb558e9b92d78b56cf7fb108e', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
     }
     static get is() { return "b2b-date-picker-years"; }
     static get encapsulation() { return "shadow"; }

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

@@ -261,7 +261,7 @@
   border: 1px solid var(--b2b-color-grey-200);
   border-right: var(--b2b-border-right);
   border-radius: var(--b2b-border-radius);
-  padding: 7px 10px 6px;
+  padding: 7px 11px 6px;
   padding-right: calc(1.75rem + 6px);
   height: var(--b2b-size-90);
   line-height: var(--b2b-size-copy-line-height-100);

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

@@ -42,7 +42,13 @@ export class DropdownComponent {
             if (!ctx)
                 return;
             ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
-            const availableWidth = this.selectEl.clientWidth - parseFloat(style.paddingRight || '0') - 24;
+            let baseWidth = this.selectEl.clientWidth;
+            const parentContainer = this.selectEl.parentElement;
+            if (parentContainer && parentContainer.clientWidth > baseWidth) {
+                baseWidth = parentContainer.clientWidth;
+            }
+            baseWidth = Math.max(baseWidth, 200);
+            const availableWidth = baseWidth - parseFloat(style.paddingRight || '0') - 24;
             if (ctx.measureText(rawText).width <= availableWidth) {
                 this.truncatedText = rawText;
                 return;
@@ -138,11 +144,11 @@ export class DropdownComponent {
         const hasError = this.invalid && !this.disabled;
         const showHint = this.hint && (!this.invalid || this.disabled);
         const showError = this.error && hasError;
-        return (h(Host, { key: 'a2b06d84969c61375e9768f7f6c268e33f3d3d3b', class: {
+        return (h(Host, { key: '12c5872badf4168d07a0c3e0281c4014f50c05f6', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': hasError,
                 'b2b-dropdown--disabled': this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '22f461ff3cde097705ef0832fe24178678a5ac90', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '937e9b977f1259375cb86c8e7f96c62bad6dac2d', class: {
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '9c1f7ee41956ee0ea6d9913bc6f0831a3800b749', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '580dcbbcdbc6e8d7c60ff2fbfcd89e94e419862c', class: {
                 'b2b-dropdown__select': true,
                 'b2b-dropdown__select--open': this.isOpen,
                 'b2b-dropdown__select--focused': this.focused,

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

@@ -16,7 +16,7 @@ export class FlyoutMenuOptionComponent {
         }
     }
     render() {
-        return (h(Host, { key: '091032b33e9695886e133e065d4b5c72480373e8', class: {
+        return (h(Host, { key: '6203f835788db06223c00d348c659a905710af8f', class: {
                 'b2b-flyout-menu__option': true,
                 'b2b-flyout-menu__option--disabled': this.disabled,
                 'b2b-flyout-menu__option--separator': this.separator,

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

@@ -144,12 +144,12 @@ export class FlyoutMenuComponent {
         options[index].focus();
     }
     render() {
-        return (h(Host, { key: '2c09480c749bcee0f8fd7807deb41b4862c1221e' }, h("div", { key: 'a087ad4e5ff06f7fdc586b415f2cc1196daae515', class: {
+        return (h(Host, { key: '5d9a147f1998a47c761af924c90da4b1f8c6ded1' }, h("div", { key: '1ae6d3742d1614e8a259b0a53f7b944d19c441db', class: {
                 'b2b-flyout-menu': true,
-            } }, h("div", { key: 'e36aff2c778c2277e5d5d90c13d7f7d92ef7e04c', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '1581b6010ef02e5745b726d0f73fd3cc8caf67fe', name: "trigger" })), h("div", { key: '3d2f97df8aad17d0963601f62c4c18b488393d6d', onFocusout: this.blurMenu, class: {
+            } }, h("div", { key: '7cd8b06ad714085def1431404dea0aca959eb96d', class: "b2b-flyout-menu__trigger" }, h("slot", { key: 'c0295db03bf2d77ae8ecea387c41cc2fb69ea0e1', name: "trigger" })), h("div", { key: '8eabaac43b7e03e0116e4079f1c27cd7bde14929', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, h("div", { key: 'db72e397e2dde6129468e657aaf49fdf5a470426', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'ac802410833c596abdf5056f8a6e09bc12f885a6', name: "option" })))));
+            } }, h("div", { key: '1646d526780846355dfd56856aa95bc0c4b43460', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'bae26a650e0e506ddc5e9cd791db3767056af9f4', name: "option" })))));
     }
     static get is() { return "b2b-flyout-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/column.js

@@ -13,7 +13,7 @@ export class B2bGridColumnComponent {
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: '935d5d42d247393cdcf7d247212182bb040998da', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'd3d0ce4a59f9d17b2b5dc9bdae249135c31b771c' })));
+        return (h(Host, { key: 'c934cbf6e57af0dd3be40e2149f49adb2802c1f4', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'affb02d8aeefc039ce0a5d8fd2e290e376c8fc3d' })));
     }
     static get is() { return "b2b-grid-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/grid.js

@@ -4,7 +4,7 @@ export class B2bGridComponent {
         this.margin = 24;
     }
     render() {
-        return (h(Host, { key: 'a07f27f3ed6961913c048630d3860ba7a9668cc8', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '6390574c52c986c73c84912586d073383ee035d8' })));
+        return (h(Host, { key: '3f706955f934472664948d8653a86d3ac898e3d1', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: 'a0ac4c214a5bf2f169c2adee55131e785324a7ff' })));
     }
     static get is() { return "b2b-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/row.js

@@ -66,7 +66,7 @@ export class B2bGridRowComponent {
         });
     }
     render() {
-        return (h(Host, { key: '9c863ba4e90c06366599c6244f2307c842448d6a', style: {
+        return (h(Host, { key: '48eccc3f2f29de4a533859834065717ad6b58238', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -74,7 +74,7 @@ export class B2bGridRowComponent {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: 'c71d99c0c3f9073620237493528a4216033ce02e' })));
+            } }, h("slot", { key: 'b814a34254890bde8a7690c9fa58bc42b3f8d35d' })));
     }
     static get is() { return "b2b-grid-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -100,18 +100,18 @@ export class InputComponent {
         this.filterHintSlotContent();
     }
     render() {
-        return (h(Host, { key: 'd1aefdd1ee067638b48a8bb7469e4075843c5201', class: {
+        return (h(Host, { key: 'f24ddfd309213b97dde35beafeafe167164fab05', class: {
                 'b2b-input': true,
                 'b2b-input--error': this.invalid && !this.disabled,
-            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '03191ca189bf06ef720e3a3f6cd6ff1463f583eb', class: {
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '65948e5a8bf67ea0f2bf2e9a56af1e9211b854a7', class: {
                 'b2b-input__wrapper': true,
                 'b2b-input__wrapper--focused': this.hasFocus,
                 'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
-            } }, h("slot", { key: '35e271cc677187e48dc1deb6eecbe533350c938f', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: '30c671a92ceadb7d869f2349e03647d5faa69d20', class: {
+            } }, h("slot", { key: '2b8a7cc9ddd4457b9c833a04a5201912147958d8', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: 'fd07b1da34c8d628521ebc59a5d8e2d279a167ba', class: {
                 'b2b-input__native-input': true,
                 ['b2b-input__native-input--align-' + this.inputTextAlign]: true,
                 'b2b-input__native-input--disabled': this.disabled,
-            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: '0b0403289cbcbfaff7e2d37f1d5330bccd9d81e1', name: "end" })), (this.hint !== undefined || this.hintSlot) &&
+            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: '1147f2bdf14ade737b8e3e02d03dea9424aef1e9', name: "end" })), (this.hint !== undefined || this.hintSlot) &&
             (!this.invalid || this.disabled) ? (h("span", null, h("slot", { name: "hint" }, this.hint))) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     static get is() { return "b2b-input"; }

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

@@ -56,7 +56,7 @@ export class B2BInputGroup {
         }
     }
     render() {
-        return (h(Host, { key: '24026d76ddfed82c245b4d3642ecb01afb7f77a8' }, h("div", { key: '28919f9eaf9621f23f48dee02160d7096ca2d371', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '49b4c84997cfcfe6ac0866c01a06919b5e209a3f', name: "start" }), h("slot", { key: 'e20d5a7f1590833eed730eea609e439bc077ea98' }), h("slot", { key: '1991b8a7e3094d5f8531c227de435b36f32e9b33', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
+        return (h(Host, { key: '57a5aa8deaadb27c20de3771a232833ae95e82a4' }, h("div", { key: 'fd0c4bc60e08a60fe6b5abc93bdac9219c41b09c', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '36cd34bf6b4aa62c2f544d0329d9c95f3d70259d', name: "start" }), h("slot", { key: 'a32cec43572ec254a0eb91e09bc8136984f8143f' }), h("slot", { key: '7b99a7c32bc2c54e1400d90d947df0c63920b243', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
                 'b2b-input-wrapper__hint': true,
                 'b2b-input-wrapper__hint--error': this.invalid && !this.disabled,
             } }, this.invalid && !this.disabled ? this.error : this.hint))));