@otto-de/b2b-core-components 1.18.0 → 1.19.0

package/dist/collection/components/date-picker/date-picker-header.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/date-picker/date-picker-months.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/date-picker/date-picker-years.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -263,7 +263,7 @@
   margin-left: 0;
   padding-left: 0;
   height: 100%;
-  width: 15%;
+  width: 100%;
   color: var(--b2b-color-black-100);
   font-size: var(--b2b-size-35);
   line-height: var(--b2b-size-copy-line-height-100);

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

@@ -18,6 +18,9 @@ export class B2bDatePicker {
             event.target.value = value;
             if (value.length === 10) {
                 this.parseDateInput(value);
+                if (this.invalid) {
+                    this.showDatePicker = false;
+                }
             }
         };
         this.handleKeyDown = (event) => {
@@ -120,6 +123,7 @@ export class B2bDatePicker {
         this.focused = false;
     }
     getPreviousMonth() {
+        this.invalid = false;
         if (this.selectedMonth === 0) {
             this.setCurrentMonth(11);
             this.setCurrentYear(this.selectedYear - 1);
@@ -136,7 +140,6 @@ export class B2bDatePicker {
         }
         if (!regex.test(dateString)) {
             this.invalid = true;
-            this.showDatePicker = false;
             this.errorMessage = this.FORMATTING_ERROR_MESSAGE;
             return;
         }
@@ -161,9 +164,13 @@ export class B2bDatePicker {
     }
     isValidDate(day, month, year) {
         const date = new Date(year, month - 1, day);
-        const isValidDay = day > 0 && day <= 31;
-        const isValidMonth = month > 0 && month <= 12;
-        const isValidYear = year > 0;
+        const isValidDay = date.getDate() === day;
+        const isValidMonth = date.getMonth() + 1 === month;
+        const isValidYear = date.getFullYear() === year && year >= 1900 && year <= 2100;
+        if (!isValidDay || !isValidMonth || !isValidYear) {
+            this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
+            return false;
+        }
         let isValidRange = true;
         if (this.disablePastDates && date < this.todayWithoutTime) {
             this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
@@ -177,7 +184,7 @@ export class B2bDatePicker {
             this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
             isValidRange = false;
         }
-        return isValidDay && isValidMonth && isValidYear && isValidRange;
+        return isValidRange;
     }
     emitSelectedDate() {
         this.b2bSelected.emit({
@@ -197,6 +204,7 @@ export class B2bDatePicker {
         this.invalid = false;
     }
     getNextMonth() {
+        this.invalid = false;
         if (this.selectedMonth === 11) {
             this.setCurrentMonth(0);
             this.setCurrentYear(this.selectedYear + 1);
@@ -246,6 +254,12 @@ export class B2bDatePicker {
             closeIcon.focus();
         }
     }
+    handleFocusOut() {
+        if (this.userInputDate === '' || this.invalid) {
+            return;
+        }
+        this.parseDateInput(this.userInputDate);
+    }
     moveFocusToInputComponent() {
         const inputElement = this.host.shadowRoot.querySelector('input.b2b-date-picker-input');
         if (inputElement !== undefined && !this.invalid) {
@@ -263,18 +277,19 @@ export class B2bDatePicker {
         }
     }
     render() {
-        return (h(Host, { key: 'd15a38cafce3ebd3ff46af901b2500f6aabb0d18' }, h("div", { key: 'c9f85e00fb6cc3a8faa2805db6748be2e482270e', class: "b2b-date-picker" }, h("div", { key: '3f5e66b7e99b46c8d94ac75361929ed92e49bb00', class: "b2b-date-picker-label" }, this.label), h("div", { key: '73b43cb76b8b64c5398e0a0ca644c2545b6a83bd', class: {
+        return (h(Host, { key: 'f55c64c00d67512d0e6c6f0e749fdc9868e44e41' }, h("div", { key: '31854fcd8b10c4349d7e8c3389be733368ca5f1a', class: "b2b-date-picker" }, h("div", { key: '2acd007a232a207870bec6e8ba944381dcdd28eb', class: "b2b-date-picker-label" }, this.label), h("div", { key: '2ae740717e19a9f1fe5a9946dbb6e891ef3103cd', class: {
                 'b2b-date-picker-input-wrapper': true,
                 'b2b-date-picker-input-wrapper--focused': this.focused || this.showDatePicker,
                 'b2b-date-picker-input-wrapper--error': this.invalid,
-            } }, h("div", { key: '67840404495817b9b506dd2cb72ecad8103e694c', class: "b2b-date-picker-input-focus-wrapper", onClick: () => {
+            } }, h("div", { key: '81d58e40fc617d949442bf482bf1141c9968ed83', class: "b2b-date-picker-input-focus-wrapper", onClick: () => {
                 this.moveFocusToInputComponent();
-            } }, h("input", { key: 'b00fc707d2aafcf328c7207625303723463d5b98', type: "text", tabindex: 0, class: {
+            } }, h("input", { key: '079990f5336387d1fdc473968f9ac0bd791bfdb0', type: "text", tabindex: 0, class: {
                 'b2b-date-picker-input': true,
                 'b2b-date-picker-input--error': this.invalid,
             }, value: this.userInputDate, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus, onBlur: () => {
                 this.focused = false;
-            } })), h("div", { key: 'a68a1143b3caf59acea3ebc60ac79032078c8151', class: "b2b-icons" }, this.userInputDate && (h("div", { tabIndex: 0, onClick: () => {
+                this.handleFocusOut();
+            } })), h("div", { key: '99cf6352447665b711284afb1f27e4d8dfc33b71', class: "b2b-icons" }, this.userInputDate && (h("div", { tabIndex: 0, onClick: () => {
                 this.invalid = false;
                 this.clearDateInput();
             }, class: "b2b-close-icon", onKeyDown: event => {
@@ -282,7 +297,7 @@ export class B2bDatePicker {
                     this.invalid = false;
                     this.clearDateInput();
                 }
-            } }, h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: '3b8281645b3ddebeeb317a85b0e46ed3929604bb', tabindex: 0, onClick: () => {
+            } }, h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: '1c4ca8455db22ea02c4d5000c625ac6da44194c4', tabindex: 0, onClick: () => {
                 if (this.invalid) {
                     this.invalid = false;
                 }
@@ -294,9 +309,9 @@ export class B2bDatePicker {
                     }
                     this.showHideDatePicker();
                 }
-            }, class: "b2b-event-icon" }, h("b2b-icon", { key: 'be4431c9059fafd5dcf5aedb0140944e822ccccc', "aria-label": this.showDatePicker
+            }, class: "b2b-event-icon" }, h("b2b-icon", { key: 'a0332088a5d68cd8e77f07d6ea2b079f34881e2f', "aria-label": this.showDatePicker
                 ? 'close date picker'
-                : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), h("div", { key: 'e3c641e8f775a5626cdf14acaa7149af127aa46f', class: {
+                : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), h("div", { key: '0b1d0a315fe80940f98a0d75df38b03a90175aaa', class: {
                 'b2b-date-picker-body': true,
                 'b2b-date-picker-body--hidden': !this.showDatePicker,
             } }, this.datePickerView === DatePickerView.Days && (h("div", null, h("b2b-date-picker-header", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear }), h("b2b-date-picker-days-header", null), h("b2b-date-picker-days", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear, selectedDay: this.selectedDay, disableWeekends: this.disableWeekends, disableFutureDates: this.disableFutureDates, disablePastDates: this.disablePastDates }))), this.datePickerView === DatePickerView.Months && (h("b2b-date-picker-months", { selectedMonth: this.selectedMonth })), this.datePickerView === DatePickerView.Years && (h("b2b-date-picker-years", { selectedYear: this.selectedYear }))), this.showDatePicker && (h("div", { class: "b2b-date-picker__backdrop", onClick: this.handleBackdropDismiss })), !this.showDatePicker && (h("span", { class: {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/headline/headline.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 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 Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 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 Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 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 Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 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 Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -123,6 +123,7 @@ export class B2bMultiSelectDropdown {
         this.hasOptionList = this.optionsList.length > 0;
     }
     componentWillLoad() {
+        this.parseSelectedValuesAndOptionsList();
         this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
     }
     /** Needed to trigger a re-render for async data */
@@ -135,19 +136,30 @@ export class B2bMultiSelectDropdown {
     handleSelectedValuesChange(newValues) {
         this.b2bChange.emit(newValues);
     }
+    parseSelectedValuesAndOptionsList() {
+        if (typeof this.selectedValues === 'string') {
+            this.selectedValues = this.parseStringToArray(this.selectedValues);
+        }
+        if (typeof this.optionsList === 'string') {
+            this.optionsList = this.parseStringToArray(this.optionsList);
+        }
+    }
+    parseStringToArray(value) {
+        return JSON.parse(value.replace(/'/g, '"'));
+    }
     componentDidUpdate() {
         const options = this.getOptions();
         this.updateAllOptions(options);
         this.updateSelectAll(options);
     }
     render() {
-        return (h(Host, { key: '0ac598afeeb43b6b9c7886de674b39ef89674171', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '4c9d34386c039f2c1c0713dece6853c37a97824a' }, this.label), h("div", { key: 'c62821c2ee20412098f852744bca85c0124a48c9', class: {
+        return (h(Host, { key: '78a4b5a6c75288e7d009e040e9885da2cf6f4f02', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: 'ff95015ecdd660bdfac396c2669e50d41e85ff82' }, this.label), h("div", { key: '479cf3758d82775832ef1c530762f89a486cc028', 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", { key: '6f74ba3c79a08f8f7807e012b60ff6be1c23eb2d', icon: "b2b_icon-arrow-down" })), h("div", { key: 'bbb4e7d4bc4a9847cad814e97a0f8846d0cb6469', 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", { key: '2bdceaeed0f5107d6c26cbdb4fc2718e4b32a77a', icon: "b2b_icon-arrow-down" })), h("div", { key: 'b5ed97c14ea1138cf5be5c28f7531f45dcdb0e28', class: {
                 'b2b-multiselect-dropdown__options-container': true,
                 'b2b-multiselect-dropdown__options-container--visible': this.isElementFocused,
-            } }, h("div", { key: '797e55fd95082c5d39368e4bb65691e2724a7a00', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'a3025a63bc4f07e77920738ffbe591859648caff', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '85dbe8ac72440e358c4986d56b7d347ea44ca2d4', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: 'ca4ca6092988144ca5484896bcf7ab6264ecb1bb', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+            } }, h("div", { key: 'c5637e174624e04ab0bd346e648559b6a1b1301d', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'db310f71fe7b9e8e51ff975b135a2c90c6cd2d87', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '5a0042c6dc0d01fa38ea0ac9ce3005fb91704df0', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '98bc2d69cdac70fb726b64945344baf4af44121b', 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"; }
@@ -199,11 +211,11 @@ export class B2bMultiSelectDropdown {
                 "reflect": true
             },
             "selectedValues": {
-                "type": "unknown",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
                     "references": {}
                 },
                 "required": false,
@@ -212,14 +224,16 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "The initial values to be selected in the dropdown."
                 },
+                "attribute": "selected-values",
+                "reflect": false,
                 "defaultValue": "[]"
             },
             "optionsList": {
-                "type": "unknown",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
                     "references": {}
                 },
                 "required": false,
@@ -228,6 +242,8 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire."
                 },
+                "attribute": "options-list",
+                "reflect": false,
                 "defaultValue": "[]"
             },
             "searchPlaceholder": {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 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 Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -217,7 +217,6 @@
 }
 .b2b-paragraph {
   font-family: var(--b2b-font-family-default);
-  color: var(--b2b-color-copy-default);
   margin: 0 0 var(--b2b-size-30);
 }
 .b2b-paragraph--size-50 {
@@ -242,4 +241,13 @@
 }
 .b2b-paragraph--align-center {
   text-align: center;
+}
+.b2b-paragraph--variant-black-100 {
+  color: var(--b2b-color-copy-default);
+}
+.b2b-paragraph--variant-grey-400 {
+  color: var(--b2b-color-grey-400);
+}
+.b2b-paragraph--no-margin {
+  margin: 0;
 }