@otto-de/b2b-core-components 1.26.3 → 1.28.0

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

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

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

@@ -2,6 +2,9 @@ import { h, Host, } from "@stencil/core";
 export class B2bMultiSelectDropdown {
     constructor() {
         this.handleInput = event => {
+            if (this.disabled) {
+                return;
+            }
             this.value = event.target.value.toLowerCase();
             if (this.value !== '') {
                 const filteredList = this.optionsList.filter(option => option.toLowerCase().indexOf(this.value) > -1);
@@ -44,6 +47,7 @@ export class B2bMultiSelectDropdown {
         this.handleChipClose = event => {
             this.currentSelectedValues = this.currentSelectedValues.filter(el => el !== event.detail.value);
             this.updateOption(event.detail.value);
+            this.isOpen = true;
             this.resetFocus();
         };
         this.updateOption = (option) => {
@@ -59,17 +63,32 @@ export class B2bMultiSelectDropdown {
                 .forEach(option => (option.selected = true));
         };
         this.setElementOnFocus = () => {
+            if (this.disabled)
+                return;
             this.isElementFocused = true;
         };
-        this.setElementOnBlur = () => {
+        this.setElementOnBlur = (event) => {
+            const nextFocusedElement = event === null || event === void 0 ? void 0 : event.relatedTarget;
+            if (!nextFocusedElement || !this.hostElement.contains(nextFocusedElement)) {
+                this.isOpen = false;
+            }
+            else {
+                this.isOpen = true;
+            }
             this.isElementFocused = false;
         };
         this.resetFocus = () => {
+            if (this.disabled)
+                return;
             const el = this.hostElement.shadowRoot.querySelector('.b2b-multiselect-dropdown');
             el.focus();
         };
         this.handleMouseDown = (event) => {
             /** Keep dropdown open if a tag is removed */
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
             if (this.isElementFocused) {
                 event.preventDefault();
             }
@@ -78,6 +97,8 @@ export class B2bMultiSelectDropdown {
             }
         };
         this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
             if (event.key === 'Enter') {
                 event.preventDefault();
                 this.resetFocus();
@@ -116,51 +137,72 @@ export class B2bMultiSelectDropdown {
         this.searchPlaceholder = undefined;
         this.selectAllLabel = undefined;
         this.maxOptionsVisible = 8;
+        this.required = false;
+        this.invalid = false;
+        this.errorMessage = undefined;
+        this.hint = undefined;
+        this.disabled = false;
         this.currentSelectedValues = [];
         this.currentList = this.optionsList;
         this.value = '';
         this.isElementFocused = false;
+        this.isOpen = false;
         this.hasOptionList = this.optionsList.length > 0;
     }
+    parsePropToArray(value) {
+        if (Array.isArray(value))
+            return value;
+        try {
+            return JSON.parse(value);
+        }
+        catch (_a) {
+            return value
+                .split(',')
+                .map(v => v.trim())
+                .filter(Boolean);
+        }
+    }
     componentWillLoad() {
-        this.parseSelectedValuesAndOptionsList();
+        this.selectedValues = this.parsePropToArray(this.selectedValues);
+        this.optionsList = this.parsePropToArray(this.optionsList);
+        this.currentList = this.optionsList;
         this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
     }
     /** Needed to trigger a re-render for async data */
     watchPropHandler(newList) {
-        this.hasOptionList = newList.length > 0;
+        this.optionsList = this.parsePropToArray(newList);
+        this.hasOptionList = this.optionsList.length > 0;
         if (this.hasOptionList) {
-            this.currentList = newList;
+            this.currentList = this.optionsList;
+            this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
         }
     }
+    /** Needed to trigger a re-render for async data */
+    handleSelectedValuesChangeFromOutside(newVal) {
+        this.selectedValues = this.parsePropToArray(newVal);
+        this.currentSelectedValues = this.selectedValues.filter(val => this.optionsList.includes(val));
+    }
     handleSelectedValuesChange(newValues) {
         this.b2bChange.emit(newValues);
     }
-    parseSelectedValuesAndOptionsList() {
-        if (typeof this.selectedValues === 'string') {
-            this.selectedValues = this.parseStringToArray(this.selectedValues);
-        }
-        if (typeof this.optionsList === 'string') {
-            this.optionsList = this.parseStringToArray(this.optionsList);
-        }
-    }
-    parseStringToArray(value) {
-        return JSON.parse(value);
-    }
     componentDidUpdate() {
         const options = this.getOptions();
         this.updateAllOptions(options);
         this.updateSelectAll(options);
     }
     render() {
-        return (h(Host, { key: '53aff695c900964cb3dc5bcb68c10b5285be16cd', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '983a3b773e397fe5e1512168acc12d07a41e57ff' }, this.label), h("div", { key: '577f648af5e7fda2e1a225a97faf05612c84e772', class: {
+        return (h(Host, { key: 'c105c46f7461d0a2692282ed15d07460e31273b9', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '93fc16c4f74cb669bc7d0d82a673b414224eb4b1', required: this.required }, this.label), h("div", { key: '397e2d0b2315f5fdce8c2cf041ac4a92f9effea5', class: {
                 'b2b-multiselect-dropdown': true,
-                'b2b-multiselect-dropdown--open': this.isElementFocused,
-            }, tabindex: 0, role: "combobox", "aria-expanded": this.isElementFocused }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (h("div", { class: "b2b-multiselect-dropdown__chip-container" }, this.renderChips())), h("b2b-icon-100", { key: '9bbe6f5442662cd102292846f5476b8ce899356a', icon: "b2b_icon-arrow-down" })), h("div", { key: '17593767cfeb17c341efd46dfc007197847c97bb', class: {
+                'b2b-multiselect-dropdown--open': this.isOpen,
+                'b2b-multiselect-dropdown--error': this.invalid && !this.disabled,
+                'b2b-multiselect-dropdown--disabled': this.disabled,
+                'b2b-multiselect-dropdown--focused': this.invalid && this.isElementFocused,
+            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen), "aria-expanded": this.isElementFocused }, h("div", { key: '2b3693ab1bd0fb6be6b13efa8eb8561b10480104', class: "b2b-multiselect-dropdown__chip-container" }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (this.renderChips())), h("b2b-icon-100", { key: 'ee601f312e28840cdc16501dc60b016a6106cc3e', icon: "b2b_icon-arrow-down" })), h("div", { key: '50b47c0f1f20afd3ec6ed093237a202ed1d9a59b', class: {
                 'b2b-multiselect-dropdown__options-container': true,
-                'b2b-multiselect-dropdown__options-container--visible': this.isElementFocused,
-            } }, h("div", { key: 'fe585cea40b0ef97d46cbd3a92f60c7382f75a97', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '863879f8b34e870bb2f82d62edf07aad8a475b6d', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '9866a72f2f7a4b19968ac5c03d6b07e60fcb6504', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '93c740c3ba53544c90d6c1130fee1e444b53965b', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
-            this.currentList.map(option => (h("b2b-multiselect-option", { "onB2b-option-selected": this.handleSelectedChange, option: option })))))));
+                'b2b-multiselect-dropdown__options-container--visible': this.isOpen,
+            } }, h("div", { key: 'b8c651872eca608e3c02c42920cf0d8e6d117aa9', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '2a0d909d9994ac59a22e60c0ed729cf90d74cf92', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '66081cd675bb03da68a445c090c69632611e1a32', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: 'a1b146c742e206c05341aab80f49629a536b9c09', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+            this.currentList.map(option => (h("b2b-multiselect-option", { "onB2b-option-selected": this.handleSelectedChange, option: option }))))), (this.hint !== undefined && !this.invalid) ||
+            (this.hint !== undefined && this.disabled) ? (h("span", { class: "b2b-multiselect-dropdown__hint" }, this.hint)) : (''), this.errorMessage !== undefined && this.invalid && !this.disabled ? (h("span", { class: "b2b-multiselect-dropdown__error-message" }, this.errorMessage)) : ('')));
     }
     static get is() { return "b2b-multiselect-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -297,6 +339,94 @@ export class B2bMultiSelectDropdown {
                 "attribute": "max-options-visible",
                 "reflect": false,
                 "defaultValue": "8"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds an asterisk at the end of the label to signify that the field is required."
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the multi select dropdown is currently invalid. Per default, it is false."
+                },
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message that is shown if the multi select dropdown is invalid."
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The hint text that appears underneath the multi select dropdown field."
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the field is disabled. Default is false."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
@@ -306,6 +436,7 @@ export class B2bMultiSelectDropdown {
             "currentList": {},
             "value": {},
             "isElementFocused": {},
+            "isOpen": {},
             "hasOptionList": {}
         };
     }
@@ -332,6 +463,9 @@ export class B2bMultiSelectDropdown {
         return [{
                 "propName": "optionsList",
                 "methodName": "watchPropHandler"
+            }, {
+                "propName": "selectedValues",
+                "methodName": "handleSelectedValuesChangeFromOutside"
             }, {
                 "propName": "currentSelectedValues",
                 "methodName": "handleSelectedValuesChange"

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

@@ -25,6 +25,11 @@ const meta = {
         selectAllLabel: 'Select All',
         maxOptionsVisible: 8,
         selectedValues: ['Watermelon', 'Banana'],
+        required: false,
+        hint: '',
+        disabled: false,
+        invalid: false,
+        errorMessage: '',
     },
     argTypes: Object.assign(Object.assign({}, multiselectArgs), { optionsList: { table: { disable: true } }, selectedValues: { table: { disable: true } } }),
     render: (_a) => {
@@ -36,7 +41,12 @@ const meta = {
         select-all-label=${args.selectAllLabel}
         placeholder=${args.placeholder}
         search-placeholder=${args.searchPlaceholder}
-        .optionsList=${args.optionsList}>
+        .optionsList=${args.optionsList}
+        required=${args.required}
+        hint=${args.hint}
+        disabled=${args.disabled}
+        invalid=${args.invalid}
+        error-message=${args.errorMessage}>
       </b2b-multiselect-dropdown>
     </div>`;
     },
@@ -57,8 +67,28 @@ export const InitialSelectedValues = {
         placeholder=${args.placeholder}
         search-placeholder=${args.searchPlaceholder}
         .optionsList=${args.optionsList}
-        .selectedValues=${args.selectedValues}>
+        .selectedValues=${args.selectedValues}
+        required=${args.required}
+        hint=${args.hint}
+        disabled=${args.disabled}
+        invalid=${args.invalid}
+        error-message=${args.errorMessage}>
       </b2b-multiselect-dropdown>
     </div>`;
     },
 };
+export const Required = {
+    args: Object.assign(Object.assign({}, meta.args), { required: true }),
+};
+export const Hint = {
+    args: Object.assign(Object.assign({}, meta.args), { hint: 'please select a value' }),
+};
+export const Disabled = {
+    args: Object.assign(Object.assign({}, meta.args), { disabled: true }),
+};
+export const Invalid = {
+    args: Object.assign(Object.assign({}, meta.args), { invalid: true }),
+};
+export const InvalidWithErrorMessage = {
+    args: Object.assign(Object.assign({}, meta.args), { invalid: true, errorMessage: 'error has occurred' }),
+};

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

@@ -13,9 +13,9 @@ export class B2bMultiSelectOption {
         this.indeterminate = false;
     }
     render() {
-        return (h(Host, { key: '3e19ddbb9623536a344b9d36529af3f7012a965d', role: "option", class: {
+        return (h(Host, { key: 'c3c1955fd6ff4019b2cbc860ded4a0d51dc7b4ee', role: "option", class: {
                 'b2b-multiselect-dropdown__option': true,
-            } }, h("b2b-checkbox", { key: 'ad7c4e1f2de4361af279ca6648c9a14048773a57', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
+            } }, h("b2b-checkbox", { key: '898231cd21f30da27314fa0b938a030c39fedbca', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
     }
     static get is() { return "b2b-multiselect-option"; }
     static get originalStyleUrls() {

package/dist/collection/components/pagination/pagination.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

package/dist/collection/components/pagination/pagination.js

@@ -92,7 +92,7 @@ export class PaginationComponent {
         };
     }
     render() {
-        return (h("nav", { key: '7a5f0a7ad756286b1fb9aa08af4b0818bff96717' }, h("ol", { key: 'e2c4e68f3581843f4f8445942eb590229fab1637', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { class: "b2b-pagination--previous" }, h("b2b-button", { onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, PaginationConstants.BACK))), this.navItems.map((navItem, index) => {
+        return (h("nav", { key: '24405723ea4d2d6427911f1546c4edfabbf98ca0' }, h("ol", { key: 'a1af6ca952107fde2f97c26d3d152ef191142bea', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { class: "b2b-pagination--previous" }, h("b2b-button", { onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, PaginationConstants.BACK))), this.navItems.map((navItem, index) => {
             const isItemActive = this.activePage === navItem;
             return (h("li", { class: this.getItemClass(navItem) }, h("b2b-button", { onClick: () => this.setSelectedPage(navItem, index), active: isItemActive, disabled: isItemActive, size: "50", variant: "secondary" }, navItem)));
         }), this.activePage !== this.totalPages && (h("li", { class: "b2b-pagination--next" }, h("b2b-button", { onClick: this.selectNextPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelNextPage }, PaginationConstants.NEXT))))));

package/dist/collection/components/paragraph/paragraph.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

package/dist/collection/components/paragraph/paragraph.js

@@ -13,7 +13,7 @@ export class ParagraphComponent {
         this.display = 'block';
     }
     render() {
-        return (h("p", { key: '410bec2bfaa21c973ecb2c8a40238ca8e858b95f', style: {
+        return (h("p", { key: 'c3781dc7215762d8dd038791943a541231731653', style: {
                 display: this.display,
             }, class: {
                 'b2b-paragraph': true,
@@ -22,7 +22,7 @@ export class ParagraphComponent {
                 ['b2b-paragraph--align-' + this.align]: true,
                 ['b2b-paragraph--no-margin']: !this.margin,
                 ['b2b-paragraph--variant-' + this.variant]: true,
-            } }, h("slot", { key: 'c2dae90e21ff14bdea080f007eb35d36ade59bad' })));
+            } }, h("slot", { key: '5afb431d2d782751f50741a6c10a210df7b1e3e4' })));
     }
     static get is() { return "b2b-paragraph"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;