@otto-de/b2b-core-components 1.24.0 → 1.26.1

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

@@ -9,36 +9,102 @@ export class B2bGridRowComponent {
     componentDidLoad() {
         this.adjustColumnFlex();
     }
+    calculateRowsAndsSpaceForColumnsWithSpan(columns, currentRowTotal, rows, currentRow) {
+        columns.forEach(column => {
+            let span = parseInt(column.getAttribute('span'), 10);
+            if (currentRowTotal + span > 12) {
+                rows.push(currentRow);
+                currentRow = [];
+                currentRowTotal = 0;
+            }
+            currentRow.push(column);
+            currentRowTotal += span;
+        });
+        if (currentRow.length > 0) {
+            rows.push(currentRow);
+        }
+    }
     adjustColumnFlex() {
         const columns = this.hostElement.querySelectorAll(':scope > b2b-grid-col');
         let totalSpan = 0;
         let columnsWithoutSpan = [];
+        let columnsWithSpan = [];
         columns.forEach((column) => {
             const span = column.getAttribute('span');
             if (span) {
                 totalSpan += parseInt(span, 10);
+                columnsWithSpan.push(column);
             }
             else {
                 columnsWithoutSpan.push(column);
             }
         });
-        const remainingSpan = 12 - totalSpan;
-        if (remainingSpan == 0) {
-            columnsWithoutSpan.forEach(column => {
-                column.style.width = '100%';
-            });
+        if (totalSpan > 12 && columnsWithoutSpan.length === 0) {
+            this.handleOverflowingColumns(columnsWithSpan);
             return;
         }
         if (columnsWithoutSpan.length > 0) {
-            const spanPerColumn = Math.floor(remainingSpan / columnsWithoutSpan.length);
-            columnsWithoutSpan.forEach(column => {
-                column.setAttribute('span', spanPerColumn.toString());
-                column.style.width = `${(spanPerColumn / 12) * 100}%`;
+            this.handleRowsWithColumnsWithoutSpan(columnsWithoutSpan, columnsWithSpan, totalSpan);
+            return;
+        }
+        if (totalSpan < 12 && columnsWithoutSpan.length === 0) {
+            this.handleNonOverflowingColumnsWithSpan(columnsWithSpan);
+            return;
+        }
+    }
+    handleNonOverflowingColumnsWithSpan(columnsWithSpan) {
+        columnsWithSpan.forEach(column => {
+            let span = parseInt(column.getAttribute('span'), 10);
+            let widthPercentage = (span / 12) * 100;
+            column.style.flex = `0 0 calc(${widthPercentage}% - ${this.columnGap}px)`;
+            column.style.maxWidth = `calc(${widthPercentage}% - ${this.columnGap}px)`;
+        });
+    }
+    handleOverflowingColumns(columns) {
+        let rows = [];
+        let currentRow = [];
+        let currentRowTotal = 0;
+        this.calculateRowsAndsSpaceForColumnsWithSpan(columns, currentRowTotal, rows, currentRow);
+        rows.forEach(row => {
+            row.forEach(column => {
+                let span = parseInt(column.getAttribute('span'), 10);
+                let widthPercentage = (span / 12) * 100;
+                column.style.flex = `0 0 calc(${widthPercentage}% - ${this.columnGap}px)`;
+                column.style.maxWidth = `calc(${widthPercentage}% - ${this.columnGap}px)`;
             });
+        });
+    }
+    handleRowsWithColumnsWithoutSpan(columnsWithoutSpan, columnsWithSpan, totalSpan) {
+        let remainingSpan = 12 - totalSpan <= 0 ? 12 : 12 - totalSpan;
+        let rows = [];
+        let currentRow = [];
+        let currentRowTotal = 0;
+        this.calculateRowsAndsSpaceForColumnsWithSpan(columnsWithSpan, currentRowTotal, rows, currentRow);
+        columnsWithoutSpan.forEach(column => {
+            let spanPerColumn = Math.max(1, Math.floor(remainingSpan / columnsWithoutSpan.length));
+            if (currentRowTotal + spanPerColumn > 12) {
+                rows.push(currentRow);
+                currentRow = [];
+                currentRowTotal = 0;
+            }
+            column.setAttribute('span', spanPerColumn.toString());
+            currentRow.push(column);
+            currentRowTotal += spanPerColumn;
+        });
+        if (currentRow.length > 0) {
+            rows.push(currentRow);
         }
+        rows.forEach(row => {
+            row.forEach(column => {
+                let span = parseInt(column.getAttribute('span'), 10) || 1;
+                let widthPercentage = (span / 12) * 100;
+                column.style.flex = `0 0 calc(${widthPercentage}% - ${this.columnGap}px)`;
+                column.style.maxWidth = `calc(${widthPercentage}% - ${this.columnGap}px)`;
+            });
+        });
     }
     render() {
-        return (h(Host, { key: 'f77863071f40aef68345792802a1170b59d6bd30', style: {
+        return (h(Host, { key: 'da13d7265983cb9a8e70b43c0f7e152912b8e353', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -46,7 +112,7 @@ export class B2bGridRowComponent {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: '1cb248539477e9fc94a604e43200aa5e391b3ed7' })));
+            } }, h("slot", { key: 'b0be12c2eeda9cf109875a17e1509755960f1e65' })));
     }
     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 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 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, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 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, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/icon-100/icon-100.stories.js

@@ -33,11 +33,11 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-icon-100
-    icon="${args.icon}"
-    color="${args.color}"
-    size="${args.size}"
-    clickable="${args.clickable}"
-    focusable="${args.focusable}"></b2b-icon-100>`;
+      icon="${args.icon}"
+      color="${args.color}"
+      size="${args.size}"
+      clickable="${args.clickable}"
+      focusable="${args.focusable}"></b2b-icon-100>`;
     },
 };
 export default meta;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/icon-50/icon-50.stories.js

@@ -32,10 +32,10 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-icon-50
-    icon="${args.icon}"
-    color="${args.color}"
-    clickable="${args.clickable}"
-    focusable="${args.focusable}"></b2b-icon-50>`;
+      icon="${args.icon}"
+      color="${args.color}"
+      clickable="${args.clickable}"
+      focusable="${args.focusable}"></b2b-icon-50>`;
     },
 };
 export default meta;

package/dist/collection/components/input/input.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -315,7 +315,7 @@
 :host(.b2b-input--error) span {
   color: var(--b2b-color-error-100);
 }
-::slotted(span) {
+::slotted(span:not([slot=hint], [slot=label])) {
   font-size: var(--b2b-size-copy-100);
   cursor: default;
   user-select: none;

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

@@ -50,4 +50,32 @@ describe('B2B-Input', () => {
         const labelElement = await slotPage.find('span');
         expect(labelElement).toEqualText('Label Slot');
     });
+    it('should use hint slot when provided', async () => {
+        const slotPage = await newE2EPage();
+        await slotPage.setContent(`
+      <b2b-input>
+        <span slot="hint">Hint Slot<b2b-anchor href="https://example.com">Hello World!</b2b-anchor></span>
+      </b2b-input>
+    `);
+        await slotPage.waitForChanges();
+        const outerHTML = await slotPage.evaluate(() => {
+            const span = document.querySelector('span[slot="hint"]');
+            return span.outerHTML;
+        });
+        expect(outerHTML).toBe('<span slot="hint">Hint Slot<b2b-anchor href="https://example.com" class="hydrated">Hello World!</b2b-anchor></span>');
+    });
+    it('should not display unsupported elements in the hint slot', async () => {
+        const slotPage = await newE2EPage();
+        await slotPage.setContent(`
+      <b2b-input>
+        <span slot="hint">Hint Slot<div>This should be removed</div></span>
+      </b2b-input>
+    `);
+        await slotPage.waitForChanges();
+        const outerHTML = await slotPage.evaluate(() => {
+            const span = document.querySelector('span[slot="hint"]');
+            return span.outerHTML;
+        });
+        expect(outerHTML).toBe('<span slot="hint">Hint Slot</span>');
+    });
 });

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

@@ -75,23 +75,44 @@ export class InputComponent {
         }
         this.getSlottedText();
     }
+    processHintSlotContent() {
+        if (this.hintSlot === null || this.hintSlot === undefined)
+            return;
+        const disallowedElements = this.hintSlot.querySelectorAll(':not(b2b-anchor, b, strong, i, em, span)');
+        disallowedElements.forEach(element => {
+            if (element.nodeType === Node.ELEMENT_NODE) {
+                element.remove();
+            }
+        });
+    }
+    filterHintSlotContent() {
+        this.processHintSlotContent();
+        if (this.hintSlot !== null && this.hintSlot !== undefined) {
+            const observer = new MutationObserver(() => this.processHintSlotContent());
+            observer.observe(this.hintSlot, { childList: true, subtree: true });
+        }
+    }
     componentWillLoad() {
         this.labelSlot = this.hostElement.querySelector('[slot="label"]');
+        this.hintSlot = this.hostElement.querySelector('[slot="hint"]');
+    }
+    componentDidLoad() {
+        this.filterHintSlotContent();
     }
     render() {
-        return (h(Host, { key: '48398c9027d0dbe9a62bbc806357842fcf12fab6', class: {
+        return (h(Host, { key: '8d1ca422e0a614f9fdd808c5be225c1e5f20393d', 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: 'd6a7e8ab3e20a1ea02252c4968d0043afb91518d', class: {
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '9a0881a2659bd4cd165be43b62e082c6e54d78d4', class: {
                 'b2b-input__wrapper': true,
                 'b2b-input__wrapper--focused': this.hasFocus,
                 'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
-            } }, h("slot", { key: 'fb82b2d7c98250248c2991840896251a28368a31', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: '4b3e7be8d07c0abf3ed11f3ce13c9f9f43672927', class: {
+            } }, h("slot", { key: '5e64fdbdf8c4f2c206f2796510b4a91af4cc0b4d', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: 'a661e9b0e1553aa28bb0151f917041b57b42f07a', 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.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: '96d37a29b8b01c63d1cd4b913a83a1240f6efcbf', name: "end" })), (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)) : ('')));
+            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: 'cb32fe135408274018be0b800d0b2321756c0c9c', 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"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,19 +32,19 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
-    <b2b-input
-      label="${args.label}"
-      required="${args.required}"
-      type="${args.defaultType}"
-      disabled="${args.disabled}"
-      placeholder="${args.placeholder}"
-      value="${args.value}"
-      hint="${args.hint}"
-      error="${args.error}"
-      autofocus="${args.autofocus}"
-      invalid=${args.invalid}
-      input-text-align="${args.inputTextAlign}"></b2b-input>
-  </div>`;
+      <b2b-input
+        label="${args.label}"
+        required="${args.required}"
+        type="${args.defaultType}"
+        disabled="${args.disabled}"
+        placeholder="${args.placeholder}"
+        value="${args.value}"
+        hint="${args.hint}"
+        error="${args.error}"
+        autofocus="${args.autofocus}"
+        invalid=${args.invalid}
+        input-text-align="${args.inputTextAlign}"></b2b-input>
+    </div>`;
     },
 };
 export default meta;
@@ -71,20 +71,20 @@ export const Prefix = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
-    <b2b-input
-      label="${args.label}"
-      required="${args.required}"
-      type="${args.type}"
-      disabled="${args.disabled}"
-      placeholder="${args.placeholder}"
-      value="${args.value}"
-      hint="${args.hint}"
-      error="${args.error}"
-      autofocus="${args.autofocus}"
-      invalid=${args.invalid}
-      ><span slot="start">Registration Number</span></b2b-input
-    >
-  </div>`;
+      <b2b-input
+        label="${args.label}"
+        required="${args.required}"
+        type="${args.type}"
+        disabled="${args.disabled}"
+        placeholder="${args.placeholder}"
+        value="${args.value}"
+        hint="${args.hint}"
+        error="${args.error}"
+        autofocus="${args.autofocus}"
+        invalid=${args.invalid}
+        ><span slot="start">Registration Number</span></b2b-input
+      >
+    </div>`;
     },
 };
 export const Suffix = {
@@ -113,21 +113,21 @@ export const PrefixAndSuffix = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
-    <b2b-input
-      label="${args.label}"
-      required="${args.required}"
-      type="${args.type}"
-      disabled="${args.disabled}"
-      placeholder="${args.placeholder}"
-      value="${args.value}"
-      hint="${args.hint}"
-      error="${args.error}"
-      autofocus="${args.autofocus}"
-      invalid=${args.invalid}>
-      <b2b-icon-100 icon="b2b_icon-search" slot="start"></b2b-icon-100
-      ><span slot="end">Registration Number</span></b2b-input
-    >
-  </div>`;
+      <b2b-input
+        label="${args.label}"
+        required="${args.required}"
+        type="${args.type}"
+        disabled="${args.disabled}"
+        placeholder="${args.placeholder}"
+        value="${args.value}"
+        hint="${args.hint}"
+        error="${args.error}"
+        autofocus="${args.autofocus}"
+        invalid=${args.invalid}>
+        <b2b-icon-100 icon="b2b_icon-search" slot="start"></b2b-icon-100
+        ><span slot="end">Registration Number</span></b2b-input
+      >
+    </div>`;
     },
 };
 export const Label = {
@@ -135,19 +135,39 @@ export const Label = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
-    <b2b-input
-      required="${args.required}"
-      type="${args.type}"
-      disabled="${args.disabled}"
-      placeholder="${args.placeholder}"
-      value="${args.value}"
-      hint="${args.hint}"
-      error="${args.error}"
-      autofocus="${args.autofocus}"
-      invalid=${args.invalid}
-      ><span slot="label">Custom label</span></b2b-input
-    >
-  </div>`;
+      <b2b-input
+        required="${args.required}"
+        type="${args.type}"
+        disabled="${args.disabled}"
+        placeholder="${args.placeholder}"
+        value="${args.value}"
+        hint="${args.hint}"
+        error="${args.error}"
+        autofocus="${args.autofocus}"
+        invalid=${args.invalid}
+        ><span slot="label">Custom label</span></b2b-input
+      >
+    </div>`;
+    },
+};
+export const HintSlot = {
+    args: Object.assign({}, meta.args),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<div style="width: 400px;">
+      <b2b-input
+        label="${args.label}"
+        required="${args.required}"
+        type="${args.type}"
+        disabled="${args.disabled}"
+        placeholder="${args.placeholder}"
+        value="${args.value}"
+        error="${args.error}"
+        autofocus="${args.autofocus}"
+        invalid=${args.invalid}
+        ><span slot="hint">Custom hint</span></b2b-input
+      >
+    </div>`;
     },
 };
 export const AllPropertiesSpecified = {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -227,7 +227,7 @@
   font-size: var(--b2b-size-copy-50);
   line-height: var(--b2b-size-copy-line-height-75);
   display: block;
-  margin-top: var(--b2b-size-10);
+  margin-top: var(--b2b-size-7);
   color: var(--b2b-color-grey-300);
 }
 :host .b2b-input-wrapper__hint--error {

package/dist/collection/components/input-list/input-list.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */