@otto-de/b2b-core-components 1.23.4 → 1.26.0

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 Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 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 Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 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 Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
-import { userEvent } from "@storybook/testing-library";
+import { userEvent } from "@storybook/test";
 const meta = {
     title: 'Components/Form/Input List',
     component: 'b2b-input-list',
@@ -27,14 +27,14 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="height: 130px; width: 300px">
-    <b2b-input-list
-      data-testid="element"
-      label="${args.label}"
-      required="${args.required}"
-      placeholder="${args.placeholder}"
-      disabled="${args.disabled}"
-      .optionsList=${args.optionsList}></b2b-input-list>
-  </div>`;
+      <b2b-input-list
+        data-testid="element"
+        label="${args.label}"
+        required="${args.required}"
+        placeholder="${args.placeholder}"
+        disabled="${args.disabled}"
+        .optionsList=${args.optionsList}></b2b-input-list>
+    </div>`;
     },
 };
 export default meta;
@@ -58,26 +58,26 @@ export const CustomList = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="height: 130px; width: 300px">
-    <b2b-input-list
-      data-testid="element"
-      label="${args.label}"
-      required="${args.required}"
-      placeholder="${args.placeholder}"
-      disabled="${args.disabled}"
-      .optionsList=${args.optionsList}
-      ><ul>
-        <li>Option 1</li>
-        <li>
-          Option 2
-          <ul>
-            <li>Option 2.1</li>
-            <li>Option 2.2</li>
-          </ul>
-        </li>
-        <li>Option 3</li>
-      </ul></b2b-input-list
-    >
-  </div>`;
+      <b2b-input-list
+        data-testid="element"
+        label="${args.label}"
+        required="${args.required}"
+        placeholder="${args.placeholder}"
+        disabled="${args.disabled}"
+        .optionsList=${args.optionsList}
+        ><ul>
+          <li>Option 1</li>
+          <li>
+            Option 2
+            <ul>
+              <li>Option 2.1</li>
+              <li>Option 2.2</li>
+            </ul>
+          </li>
+          <li>Option 3</li>
+        </ul></b2b-input-list
+      >
+    </div>`;
     },
 };
 export const DisabledWithoutSelectedOption = {
@@ -88,26 +88,26 @@ export const disabledWithSelectedOption = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="height: 130px; width: 300px">
-    <b2b-input-list
-      data-testid="element"
-      label="${args.label}"
-      value="${args.optionsList[0]}"
-      required="${args.required}"
-      placeholder="${args.placeholder}"
-      disabled="${args.disabled}"
-      .optionsList=${args.optionsList}
-      ><ul>
-        <li>Option 1</li>
-        <li>
-          Option 2
-          <ul>
-            <li>Option 2.1</li>
-            <li>Option 2.2</li>
-          </ul>
-        </li>
-        <li>Option 3</li>
-      </ul></b2b-input-list
-    >
-  </div>`;
+      <b2b-input-list
+        data-testid="element"
+        label="${args.label}"
+        value="${args.optionsList[0]}"
+        required="${args.required}"
+        placeholder="${args.placeholder}"
+        disabled="${args.disabled}"
+        .optionsList=${args.optionsList}
+        ><ul>
+          <li>Option 1</li>
+          <li>
+            Option 2
+            <ul>
+              <li>Option 2.1</li>
+              <li>Option 2.2</li>
+            </ul>
+          </li>
+          <li>Option 3</li>
+        </ul></b2b-input-list
+      >
+    </div>`;
     },
 };

package/dist/collection/components/label/label.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/modal/modal.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,4 +1,4 @@
-import { screen } from "@storybook/testing-library";
+import { screen } from "@storybook/test";
 import { getArgTypes } from "../../docs/config/utils";
 import { useArgs } from "@storybook/preview-api";
 import { html } from "lit-html";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -20,7 +20,7 @@ export class B2bMultiSelectDropdown {
                     return (h("b2b-chip-component", { label: option, value: option, "onB2b-close": this.handleChipClose }));
                 }
                 else if (index === this.maxOptionsVisible) {
-                    return (h("b2b-chip-component", { label: "...", class: "b2b-multiselect-dropdown__option--show-more-button", "has-close-button": "false", onClick: this.handleOverflowOptionsClick }));
+                    return (h("b2b-chip-component", { label: "...", class: "b2b-multiselect-dropdown__option--show-more-button", hasCloseButton: true, onClick: this.handleOverflowOptionsClick }));
                 }
                 else {
                     return;
@@ -153,13 +153,13 @@ export class B2bMultiSelectDropdown {
         this.updateSelectAll(options);
     }
     render() {
-        return (h(Host, { key: 'ae0810d77f48d5aed5fb7d97e1b3a800a4a057b0', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: 'e9e67e9c02c8885919740f97c3c52f12991cff66' }, this.label), h("div", { key: '43e41efade0b8d761f1d8edf11415a43c461e804', class: {
+        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: {
                 '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: '3631f88b18b5a2088f666727fac8f08ba0260f48', icon: "b2b_icon-arrow-down" })), h("div", { key: 'f022633b89930b1904788affa426ba36a451c631', class: {
+            }, 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__options-container': true,
                 'b2b-multiselect-dropdown__options-container--visible': this.isElementFocused,
-            } }, h("div", { key: '1b1b314b3f31e8eb22e627f533d9662fc89c095b', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'c041573e27abd76a3574cb3bd75cc34a3add6862', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: 'f4e01c003daf791325a5f7bd2e935497204749b0', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '6540d5bd19352eebbeb4328065a1f810d7817d63', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+            } }, 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 })))))));
     }
     static get is() { return "b2b-multiselect-dropdown"; }

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

@@ -30,15 +30,15 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 400px">
-    <b2b-multiselect-dropdown
-      label=${args.label}
-      max-options-visible=${args.maxOptionsVisible}
-      select-all-label=${args.selectAllLabel}
-      placeholder=${args.placeholder}
-      search-placeholder=${args.searchPlaceholder}
-      .optionsList=${args.optionsList}>
-    </b2b-multiselect-dropdown>
-  </div>`;
+      <b2b-multiselect-dropdown
+        label=${args.label}
+        max-options-visible=${args.maxOptionsVisible}
+        select-all-label=${args.selectAllLabel}
+        placeholder=${args.placeholder}
+        search-placeholder=${args.searchPlaceholder}
+        .optionsList=${args.optionsList}>
+      </b2b-multiselect-dropdown>
+    </div>`;
     },
 };
 export default meta;
@@ -50,15 +50,15 @@ export const InitialSelectedValues = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 400px">
-    <b2b-multiselect-dropdown
-      label=${args.label}
-      max-options-visible=${args.maxOptionsVisible}
-      select-all-label=${args.selectAllLabel}
-      placeholder=${args.placeholder}
-      search-placeholder=${args.searchPlaceholder}
-      .optionsList=${args.optionsList}
-      .selectedValues=${args.selectedValues}>
-    </b2b-multiselect-dropdown>
-  </div>`;
+      <b2b-multiselect-dropdown
+        label=${args.label}
+        max-options-visible=${args.maxOptionsVisible}
+        select-all-label=${args.selectAllLabel}
+        placeholder=${args.placeholder}
+        search-placeholder=${args.searchPlaceholder}
+        .optionsList=${args.optionsList}
+        .selectedValues=${args.selectedValues}>
+      </b2b-multiselect-dropdown>
+    </div>`;
     },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */