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

package/dist/collection/components/dropdown/dropdown.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;
@@ -221,12 +223,20 @@
   --b2b-border-radius: var(--b2b-size-border-radius-100);
   --b2b-border-right: 1px solid var(--b2b-color-grey-200);
   display: block;
+  position: relative;
   width: 100%;
   min-width: fit-content;
   font-family: var(--b2b-font-family-default);
   font-size: var(--b2b-size-copy-100);
   max-width: 600px;
 }
+:host(.b2b-dropdown) .b2b-dropdown__wrapper {
+  display: flex;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  flex: 1;
+}
 :host(.b2b-dropdown) .b2b-dropdown__select {
   font-family: var(--b2b-font-family-default);
   font-size: var(--b2b-size-copy-100);
@@ -246,15 +256,62 @@
   height: var(--b2b-size-90);
   line-height: var(--b2b-size-copy-line-height-100);
   box-sizing: border-box;
-  position: relative;
+  text-align: left;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
-:host(.b2b-dropdown) .b2b-dropdown__select:focus-visible {
+:host(.b2b-dropdown) .b2b-dropdown__select--focused {
   outline: 2px solid Highlight;
   outline: 2px solid -webkit-focus-ring-color;
   border-radius: var(--b2b-border-radius);
   outline-offset: -1px;
   z-index: 9999;
 }
+:host(.b2b-dropdown) .b2b-dropdown__select--open {
+  outline: 2px solid Highlight;
+  outline: 2px solid -webkit-focus-ring-color;
+  border-radius: var(--b2b-border-radius);
+  outline-offset: -1px;
+  z-index: 9999;
+}
+:host(.b2b-dropdown) .b2b-dropdown__options {
+  display: block;
+  background-color: var(--b2b-color-white-100);
+  max-height: 200px;
+  margin: 0;
+  border-right: var(--b2b-size-1) solid var(--b2b-color-black-100);
+  border-left: var(--b2b-size-1) solid var(--b2b-color-black-100);
+  border-bottom: var(--b2b-size-1) solid var(--b2b-color-black-100);
+  margin-top: 0;
+  border-top: none;
+  text-align: left;
+  top: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 10;
+  box-sizing: border-box;
+  white-space: pre-wrap;
+}
+:host(.b2b-dropdown) .b2b-dropdown__option {
+  padding: 10px;
+  cursor: pointer;
+  font-size: var(--b2b-size-copy-100);
+  margin-top: 0;
+  border-top: none;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+:host(.b2b-dropdown) .b2b-dropdown__option:hover {
+  background-color: var(--b2b-color-hover-default);
+}
+:host(.b2b-dropdown) .b2b-dropdown__option--disabled {
+  color: var(--b2b-color-grey-250);
+  background-color: var(--b2b-color-white-100);
+  pointer-events: none;
+}
 :host(.b2b-dropdown) b2b-input-label {
   display: block;
   margin-bottom: var(--b2b-size-5);

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

@@ -45,4 +45,12 @@ describe('B2B-Dropdown', () => {
         await page.waitForChanges();
         expect(element).toHaveClass('b2b-dropdown--error');
     });
+    it('should clear the selection and reset to placeholder', async () => {
+        const dropdown = await page.find('b2b-dropdown');
+        await dropdown.callMethod('clearSelection');
+        await page.waitForChanges();
+        const selectedTextElementAfter = await dropdown.shadowRoot.querySelector('.b2b-dropdown__select');
+        expect(selectedTextElementAfter).not.toBeNull();
+        expect(selectedTextElementAfter.textContent).toBe('Select an option...');
+    });
 });

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

@@ -1,26 +1,60 @@
 import { h, Host, } from "@stencil/core";
 export class DropdownComponent {
     constructor() {
-        this.onSelect = (ev) => {
-            const option = ev.target;
-            this.b2bChange.emit(option.value);
+        this.truncatedText = '';
+        this.onClickOutside = (ev) => {
+            if (!this.hostElement.contains(ev.target))
+                this.isOpen = false;
+        };
+        this.toggleDropdown = () => {
+            if (!this.disabled)
+                this.isOpen = !this.isOpen;
         };
         this.onFocus = (ev) => {
+            this.focused = true;
             this.b2bFocus.emit(ev);
         };
         this.onBlur = (ev) => {
+            this.focused = false;
             this.b2bBlur.emit(ev);
         };
-        this.getSelectElement = () => {
-            return this.hostElement.shadowRoot.querySelector('select');
+        this.onSelect = (event) => {
+            var _a;
+            const target = event.target;
+            const value = target.getAttribute('data-value');
+            const label = (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+            if (value) {
+                this.selectedValue = value;
+                this.selectedText = label || '';
+                this.b2bChange.emit(value);
+                this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: opt.value === value })));
+                this.isOpen = false;
+                this.updateTruncatedText();
+            }
         };
-        // TODO: find a way to test it maybe when migrating to new testing framework
-        this.handleFormData = (event) => {
-            if (this.name != undefined) {
-                const selectElement = this.getSelectElement();
-                const value = selectElement.value || '';
-                event.formData.append(this.name, value);
+        this.updateTruncatedText = () => {
+            if (!this.selectEl)
+                return;
+            const rawText = this.selectedText || this.placeholder;
+            const style = window.getComputedStyle(this.selectEl);
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+            const availableWidth = this.selectEl.clientWidth - parseFloat(style.paddingRight || '0') - 24;
+            if (ctx.measureText(rawText).width <= availableWidth) {
+                this.truncatedText = rawText;
+                return;
             }
+            let truncated = '';
+            for (let i = 0; i < rawText.length; i++) {
+                const test = rawText.slice(0, i + 1) + '…';
+                if (ctx.measureText(test).width > availableWidth)
+                    break;
+                truncated = rawText.slice(0, i + 1);
+            }
+            this.truncatedText = truncated + '…';
         };
         this.label = undefined;
         this.required = false;
@@ -31,33 +65,79 @@ export class DropdownComponent {
         this.invalid = false;
         this.hint = undefined;
         this.error = undefined;
+        this.isOpen = false;
+        this.focused = false;
+        this.selectedValue = '';
+        this.selectedText = '';
+        this.options = [];
+    }
+    /** Method to programmatically clear selection of the dropdown. */
+    async clearSelection() {
+        this.selectedValue = this.placeholderValue || '';
+        this.selectedText = this.placeholder || 'Select an option...';
+        this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: false })));
+        this.isOpen = false;
+        this.updateTruncatedText();
+    }
+    componentWillLoad() {
+        this.selectedValue = this.placeholderValue || '';
+        this.selectedText = '';
+    }
+    componentDidLoad() {
+        this.initializeOptions();
+        this.updateTruncatedText();
+        document.addEventListener('click', this.onClickOutside);
+        window.addEventListener('resize', this.updateTruncatedText);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.onClickOutside);
+        window.removeEventListener('resize', this.updateTruncatedText);
     }
-    connectedCallback() {
-        const form = this.hostElement.closest('form');
-        if (form != null) {
-            form.addEventListener('formdata', this.handleFormData);
+    watchDropdownState() {
+        if (this.isOpen)
+            this.closeOtherDropdowns();
+    }
+    initializeOptions() {
+        const nativeOptions = Array.from(this.hostElement.querySelectorAll('option'));
+        this.options = nativeOptions.map(opt => {
+            var _a;
+            return ({
+                value: opt.value,
+                label: ((_a = opt.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '',
+                selected: opt.hasAttribute('selected'),
+                disabled: opt.hasAttribute('disabled'),
+            });
+        });
+        const selected = this.options.find(o => o.selected);
+        if (selected) {
+            this.selectedValue = selected.value;
+            this.selectedText = selected.label;
         }
     }
-    // we need to attach the options to the correct element here
-    componentDidRender() {
-        let options = this.hostElement.querySelectorAll('option');
-        const selectElement = this.getSelectElement();
-        selectElement.innerHTML = '';
-        const placeholderOption = document.createElement('option');
-        placeholderOption.value = this.placeholderValue;
-        placeholderOption.textContent = this.placeholder;
-        placeholderOption.disabled = true;
-        placeholderOption.selected = true;
-        selectElement.append(placeholderOption);
-        selectElement.append(...options);
+    closeOtherDropdowns() {
+        const others = document.querySelectorAll('b2b-dropdown');
+        others.forEach(el => {
+            if (el !== this.hostElement)
+                el.isOpen = false;
+        });
     }
     render() {
-        return (h(Host, { key: '0bdbaf3576571cc9a44355e23db97e867a3bd19d', class: {
+        const hasError = this.invalid && !this.disabled;
+        const showHint = this.hint && (!this.invalid || this.disabled);
+        const showError = this.error && hasError;
+        return (h(Host, { key: '09be0fe07181c102f688599b581973d03c6347ae', class: {
                 'b2b-dropdown': true,
-                'b2b-dropdown--error': this.invalid && !this.disabled,
+                'b2b-dropdown--error': hasError,
                 'b2b-dropdown--disabled': this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { key: '7d53810ef3e04fcdd37d0383659057cfbdb0d72c', class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (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)) : ('')));
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: 'f4756d9f9550c1adc4aa618e9e7c673bfd89037a', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '5fed7fbb2599116576887c05d85b884367e2bf0e', class: {
+                'b2b-dropdown__select': true,
+                'b2b-dropdown__select--open': this.isOpen,
+                'b2b-dropdown__select--focused': this.focused,
+            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.selectedText ? this.truncatedText : this.placeholder), this.isOpen && (h("div", { class: "b2b-dropdown__options", role: "listbox" }, this.options.map(option => (h("div", { key: option.value, class: {
+                'b2b-dropdown__option': true,
+                'b2b-dropdown__option--selected': option.selected,
+                'b2b-dropdown__option--disabled': option.disabled,
+            }, "data-value": option.value, onClick: !option.disabled ? this.onSelect : undefined, role: "option", "aria-selected": option.selected ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : 'false' }, option.label)))))), showHint && h("span", null, this.hint), showError && h("span", null, this.error)));
     }
     static get is() { return "b2b-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -233,6 +313,15 @@ export class DropdownComponent {
             }
         };
     }
+    static get states() {
+        return {
+            "isOpen": {},
+            "focused": {},
+            "selectedValue": {},
+            "selectedText": {},
+            "options": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "b2bChange",
@@ -291,5 +380,32 @@ export class DropdownComponent {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to programmatically clear selection of the dropdown.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "watchDropdownState"
+            }];
+    }
 }

package/dist/collection/components/flyout-menu/flyout-menu-option.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/flyout-menu/flyout-menu-option.js

@@ -16,7 +16,7 @@ export class FlyoutMenuOptionComponent {
         }
     }
     render() {
-        return (h(Host, { key: '3dc359231f65e0d900c87a90fb16917dec1cef05', class: {
+        return (h(Host, { key: '091032b33e9695886e133e065d4b5c72480373e8', 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.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/flyout-menu/flyout-menu.js

@@ -144,12 +144,12 @@ export class FlyoutMenuComponent {
         options[index].focus();
     }
     render() {
-        return (h(Host, { key: '44ec3f9b4e574a3327717361bd6c09c5f1958d41' }, h("div", { key: '9ea8f1494bfede3a0853a0e74a5d5854e0bdf082', class: {
+        return (h(Host, { key: '2c09480c749bcee0f8fd7807deb41b4862c1221e' }, h("div", { key: 'a087ad4e5ff06f7fdc586b415f2cc1196daae515', class: {
                 'b2b-flyout-menu': true,
-            } }, h("div", { key: 'c48765324a3ca6ef0b885d23405269e9351c14c6', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '756bdb0f2adbf262397bc5207cb5e6add87e4ef2', name: "trigger" })), h("div", { key: 'ef57778748783ffb269f5023b67eabd681cfb37d', onFocusout: this.blurMenu, class: {
+            } }, h("div", { key: 'e36aff2c778c2277e5d5d90c13d7f7d92ef7e04c', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '1581b6010ef02e5745b726d0f73fd3cc8caf67fe', name: "trigger" })), h("div", { key: '3d2f97df8aad17d0963601f62c4c18b488393d6d', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, h("div", { key: '9ae1550fb14f6bbe584935169796375f58916891', class: "b2b-flyout-menu__arrow" }), h("slot", { key: '10ff787b762245d5457cdb4f70f8affa9f0375e8', name: "option" })))));
+            } }, h("div", { key: 'db72e397e2dde6129468e657aaf49fdf5a470426', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'ac802410833c596abdf5056f8a6e09bc12f885a6', 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: 'd0700384ac12f6b13705e2578ae72a4f8389a4cb', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}`, ['min-width']: '1px' }) }, h("slot", { key: '2e02491bdb05218d40a8f01af1c574c63f795298' })));
+        return (h(Host, { key: '935d5d42d247393cdcf7d247212182bb040998da', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'd3d0ce4a59f9d17b2b5dc9bdae249135c31b771c' })));
     }
     static get is() { return "b2b-grid-col"; }
     static get encapsulation() { return "shadow"; }
@@ -48,7 +48,7 @@ export class B2bGridColumnComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The alignment of text placed inside of a column. Note that this will apply to all children."
+                    "text": "The alignment of text placed inside a column. Note that this will apply to all children."
                 },
                 "attribute": "text-align",
                 "reflect": false,

package/dist/collection/components/grid/grid.css

@@ -2,10 +2,4 @@
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;
-}
-
-:host(.b2b-grid-col) {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
 }

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

@@ -4,7 +4,7 @@ export class B2bGridComponent {
         this.margin = 24;
     }
     render() {
-        return (h(Host, { key: 'd969835eaef0a092de761496f817e3aeb9fe9da3', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '457acba45d11bb8ed33008c1158f89d33f5222f6' })));
+        return (h(Host, { key: 'a07f27f3ed6961913c048630d3860ba7a9668cc8', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '6390574c52c986c73c84912586d073383ee035d8' })));
     }
     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: '3ae300a50257bbb2e482b5161b0b1b8d5f087d01', style: {
+        return (h(Host, { key: '9c863ba4e90c06366599c6244f2307c842448d6a', 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: '0828e8497a5e6f76ffeb272f51675b6f5013fdba' })));
+            } }, h("slot", { key: 'c71d99c0c3f9073620237493528a4216033ce02e' })));
     }
     static get is() { return "b2b-grid-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/headline/headline.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/icon/icon.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/icon-100/icon-100.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;