@otto-de/b2b-core-components 1.27.0 → 1.28.1

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

@@ -119,7 +119,15 @@ export class B2bDatePicker {
             return value;
         }
         if (typeof value === 'string') {
-            return JSON.parse(value);
+            try {
+                return JSON.parse(value);
+            }
+            catch (_a) {
+                return value
+                    .split(',')
+                    .map(v => v.trim())
+                    .filter(Boolean);
+            }
         }
         return [];
     }
@@ -128,23 +136,24 @@ export class B2bDatePicker {
         return new Date(year, month - 1, day);
     }
     componentWillLoad() {
-        if (this.disableDates !== '' || this.disableDates.length > 0) {
-            const dateString = this.normalizeArrayInput(this.disableDates);
-            this.datesToBeDisabled = dateString.map(date => {
+        const disableDatesArray = this.normalizeArrayInput(this.disableDates);
+        if (disableDatesArray.length > 0) {
+            this.datesToBeDisabled = disableDatesArray.map(date => {
                 const [day, month, year] = date.split('.').map(Number);
                 return new Date(year, month - 1, day);
             });
         }
-        if (this.disableDays !== '' || this.disableDays.length > 0) {
-            this.normalizedDisableEvery = this.normalizeArrayInput(this.disableDays);
+        const disableDaysArray = this.normalizeArrayInput(this.disableDays);
+        if (disableDaysArray.length > 0) {
+            this.normalizedDisableEvery = disableDaysArray;
         }
-        if (this.disableDatesUntil !== '' && this.disableDatesUntil !== undefined) {
+        if (this.disableDatesUntil && this.disableDatesUntil !== '') {
             this.normalizedDisableDatesUntil = this.normalizeDisableDatesUntilAndFrom(this.disableDatesUntil);
         }
-        if (this.disableDatesFrom !== '' && this.disableDatesFrom !== undefined) {
+        if (this.disableDatesFrom && this.disableDatesFrom !== '') {
             this.normalizedDisableDatesFrom = this.normalizeDisableDatesUntilAndFrom(this.disableDatesFrom);
         }
-        if (this.preSelectedDate !== undefined) {
+        if (this.preSelectedDate) {
             const [day, month, year] = this.preSelectedDate.split('.').map(Number);
             this.selectedDay = day;
             this.selectedMonth = month - 1;
@@ -153,9 +162,10 @@ export class B2bDatePicker {
             this.showDatePicker = false;
         }
         else {
+            const today = new Date();
             this.selectedDay = undefined;
-            this.selectedMonth = new Date().getMonth();
-            this.selectedYear = new Date().getFullYear();
+            this.selectedMonth = today.getMonth();
+            this.selectedYear = today.getFullYear();
             this.userInputDate = '';
         }
     }
@@ -178,6 +188,16 @@ export class B2bDatePicker {
             this.setCurrentMonth(this.selectedMonth - 1);
         }
     }
+    handleDisableDatesChanged(newVal) {
+        const parsed = this.normalizeArrayInput(newVal);
+        this.datesToBeDisabled = parsed.map(date => {
+            const [day, month, year] = date.split('.').map(Number);
+            return new Date(year, month - 1, day);
+        });
+    }
+    handleDisableDaysChanged(newVal) {
+        this.normalizedDisableEvery = this.normalizeArrayInput(newVal);
+    }
     parseDateInput(dateString) {
         const regex = /^(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[0-2])\.\d{4}$/;
         if (dateString == '' || dateString === undefined) {
@@ -692,6 +712,15 @@ export class B2bDatePicker {
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "disableDates",
+                "methodName": "handleDisableDatesChanged"
+            }, {
+                "propName": "disableDays",
+                "methodName": "handleDisableDaysChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "b2b-date-picker-escape",

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -223,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);
@@ -248,14 +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;
+  z-index: 300;
+}
+: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: 1001;
+}
+:host(.b2b-dropdown) .b2b-dropdown__options {
+  display: block;
+  background-color: var(--b2b-color-white-100);
+  max-height: 288px;
+  overflow-y: auto;
+  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: 1000;
+  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;

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 = [];
     }
-    connectedCallback() {
-        const form = this.hostElement.closest('form');
-        if (form != null) {
-            form.addEventListener('formdata', this.handleFormData);
-        }
+    /** 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 = '';
     }
-    // we need to attach the options to the correct element here
     componentDidLoad() {
-        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);
+        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);
+    }
+    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;
+        }
+    }
+    closeOtherDropdowns() {
+        const others = document.querySelectorAll('b2b-dropdown');
+        others.forEach(el => {
+            if (el !== this.hostElement)
+                el.isOpen = false;
+        });
     }
     render() {
-        return (h(Host, { key: '30f4c1df7c95889b14aaa246d89842314cca4c88', 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: '03465e345631d5cfe44a2edb0e3c29b9b1adb4e7', 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/dropdown/dropdown.stories.js

@@ -14,6 +14,12 @@ const Template = ({ label, required, name, disabled, invalid, hint, error, }) =>
     <option value="orange">Orange</option>
     <option value="banana">Banana</option>
     <option value="pineapple">Pineapple</option>
+    <option value="grapes">Grapes</option>
+    <option value="watermelon">Watermelon</option>
+    <option value="papaya">Papaya</option>
+    <option value="blueberry">Blueberry</option>
+    <option value="kiwi">Kiwi</option>
+    <option value="pomegranate">Pomegranate</option>
     <option value="apple" disabled>Apple</option>
   </b2b-dropdown>`;
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/icon/icon.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/icon-100/icon-100.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/icon-50/icon-50.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Wed, 14 May 2025 12:50:46 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */