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

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: '1a8ca50730e9be35d4e02155a728bde7a950d521', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '2f532ff808f401dbf0e60de63b41b7bc75c786b1' }, this.label), h("div", { key: '9b7d708bd9cfa8365fac138a3a355bd436c62384', 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: '9fef7ebb99fccb302bb68e602ac3edb2cfd50e6f', icon: "b2b_icon-arrow-down" })), h("div", { key: '724e740fc4f0b7e16095b2fbb5c836aa10cd56f0', 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: '6e6fbff1c1009d9454c432ba12d0dc7ada0e335b', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'b9800273be5e1b2a7270e89d0421bac8619317f2', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: 'cc52025e06277156338a098e8e1939a45367f060', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '6f02ecc6c4787fcf400580d8dc6c2eab6ec5a3c9', 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/multiselect-dropdown/multiselect-option/multiselect-option.js

@@ -13,9 +13,9 @@ export class B2bMultiSelectOption {
         this.indeterminate = false;
     }
     render() {
-        return (h(Host, { key: '19d6b46ff519d49226ba1e113e206180520c5ae5', role: "option", class: {
+        return (h(Host, { key: 'b887ec12facd858bac321321f7cfff1d809bb89a', role: "option", class: {
                 'b2b-multiselect-dropdown__option': true,
-            } }, h("b2b-checkbox", { key: '2724bb0ccab25c9d28c2ae59d21c02165f97c446', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
+            } }, h("b2b-checkbox", { key: '768a43d067b9132f25e75d785463454a73e9565b', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
     }
     static get is() { return "b2b-multiselect-option"; }
     static get originalStyleUrls() {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 12:35:00 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 Thu, 24 Oct 2024 12:35:01 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/pagination/pagination.js

@@ -92,7 +92,7 @@ export class PaginationComponent {
         };
     }
     render() {
-        return (h("nav", { key: 'ef3a8d7c330c746ab003fea70100c0cb68b3f237' }, h("ol", { key: 'a327642f2638275ed7bdf4682b2999d6d014b7e4', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { class: "b2b-pagination--previous" }, h("b2b-button", { onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, PaginationConstants.BACK))), this.navItems.map((navItem, index) => {
+        return (h("nav", { key: '5b21b9fc90454d5733d5a95db08d57fbf7c7099d' }, h("ol", { key: '8322f26d437809e21912edb81a6da363bf36ff4c', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { class: "b2b-pagination--previous" }, h("b2b-button", { onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, PaginationConstants.BACK))), this.navItems.map((navItem, index) => {
             const isItemActive = this.activePage === navItem;
             return (h("li", { class: this.getItemClass(navItem) }, h("b2b-button", { onClick: () => this.setSelectedPage(navItem, index), active: isItemActive, disabled: isItemActive, size: "50", variant: "secondary" }, navItem)));
         }), this.activePage !== this.totalPages && (h("li", { class: "b2b-pagination--next" }, h("b2b-button", { onClick: this.selectNextPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelNextPage }, PaginationConstants.NEXT))))));

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 12:35:00 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 Thu, 24 Oct 2024 12:35:01 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;
 }

package/dist/collection/components/paragraph/paragraph.js

@@ -8,14 +8,21 @@ export class ParagraphComponent {
         this.weight = 'normal';
         this.size = '100';
         this.align = 'left';
+        this.margin = true;
+        this.variant = 'black-100';
+        this.display = 'block';
     }
     render() {
-        return (h("p", { key: '5613c3fb597816ee079655f6c665ece0ca122e45', class: {
+        return (h("p", { key: '38b1e631c19a20c18e88dc3024553151181b2b32', style: {
+                display: this.display,
+            }, class: {
                 'b2b-paragraph': true,
                 ['b2b-paragraph--size-' + this.size]: true,
                 ['b2b-paragraph--weight-' + this.weight]: true,
                 ['b2b-paragraph--align-' + this.align]: true,
-            } }, h("slot", { key: '8815d57f3260f8138815d51bcc80761516d68b27' })));
+                ['b2b-paragraph--no-margin']: !this.margin,
+                ['b2b-paragraph--variant-' + this.variant]: true,
+            } }, h("slot", { key: '04cb89ee733a6f45a674586311fcc8484aca4ac8' })));
     }
     static get is() { return "b2b-paragraph"; }
     static get encapsulation() { return "shadow"; }
@@ -84,6 +91,60 @@ export class ParagraphComponent {
                 "attribute": "align",
                 "reflect": false,
                 "defaultValue": "'left'"
+            },
+            "margin": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the paragraph has a bottom margin. Defaults to true."
+                },
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'black-100' | 'grey-400'",
+                    "resolved": "\"black-100\" | \"grey-400\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the paragraph. Defaults to black."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'black-100'"
+            },
+            "display": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'inline' | 'inline-block' | 'block'",
+                    "resolved": "\"block\" | \"inline\" | \"inline-block\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The positioning of the paragraph in the page flow. Defaults to native block behavior."
+                },
+                "attribute": "display",
+                "reflect": false,
+                "defaultValue": "'block'"
             }
         };
     }

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

@@ -1,7 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
-const template = ({ weight, size, align }) => {
-    return html `<b2b-paragraph weight="${weight}" size="${size}" align="${align}">
+const paragraphArgs = getArgTypes('b2b-paragraph');
+const meta = {
+    title: 'Components/Content/Paragraph',
+    component: 'b2b-paragraph',
+    args: {
+        weight: 'normal',
+        size: '100',
+        align: 'left',
+        margin: true,
+        variant: 'black',
+        display: 'block',
+    },
+    argTypes: Object.assign({}, paragraphArgs),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<b2b-paragraph
+    weight="${args.weight}"
+    size="${args.size}"
+    align="${args.align}"
+    margin="${args.margin}"
+    variant="${args.variant}"
+    display="${args.display}">
     Far far away, behind the word mountains, far from the countries Vokalia and
     Consonantia, there live the blind texts. Separated they live in
     Bookmarksgrove right at the coast of the Semantics, a large language ocean.
@@ -14,30 +46,101 @@ const template = ({ weight, size, align }) => {
     because there were thousands of bad Commas, wild Question Marks and devious
     Semikoli, but the Little Blind Text didn’t listen.
   </b2b-paragraph>`;
+    },
 };
-const defaultArgs = {
-    weight: 'normal',
-    size: '100',
-    align: 'left',
-};
-export const story010Default = template.bind({});
-story010Default.args = defaultArgs;
-story010Default.storyName = 'Default';
-export const story020Bold = template.bind({});
-story020Bold.args = Object.assign(Object.assign({}, defaultArgs), { weight: 'bold' });
-story020Bold.storyName = 'Bold text';
-export const story030Small = template.bind({});
-story030Small.args = Object.assign(Object.assign({}, defaultArgs), { size: '50' });
-story030Small.storyName = 'Small text';
-export const story040Center = template.bind({});
-story040Center.args = Object.assign(Object.assign({}, defaultArgs), { align: 'center' });
-story040Center.storyName = 'Center aligned text';
-export const story050Right = template.bind({});
-story050Right.args = Object.assign(Object.assign({}, defaultArgs), { align: 'right' });
-story050Right.storyName = 'Right aligned text';
-const argTypes = getArgTypes('b2b-paragraph');
-export default {
-    title: 'Components/Content/Paragraph',
-    argTypes: argTypes,
-    viewMode: 'docs',
+export default meta;
+export const Default = {
+    args: Object.assign({}, meta.args),
+};
+export const Bold = {
+    args: Object.assign(Object.assign({}, meta.args), { weight: 'bold' }),
+};
+export const Small = {
+    args: Object.assign(Object.assign({}, meta.args), { size: '50' }),
+};
+export const CenterAligned = {
+    args: Object.assign(Object.assign({}, meta.args), { align: 'center' }),
+};
+export const RightAligned = {
+    args: Object.assign(Object.assign({}, meta.args), { align: 'right' }),
+};
+export const NoBottomMargin = {
+    args: Object.assign(Object.assign({}, meta.args), { margin: false }),
+};
+export const GreyVariant = {
+    args: Object.assign(Object.assign({}, meta.args), { variant: 'grey' }),
+};
+export const DisplayInline = {
+    args: Object.assign(Object.assign({}, meta.args), { display: 'inline' }),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<b2b-paragraph
+      weight="${args.weight}"
+      size="${args.size}"
+      align="${args.align}"
+      margin="${args.margin}"
+      variant="${args.variant}"
+      display="${args.display}">
+      Far far away, behind the word mountains, far from the countries Vokalia
+      and Consonantia, there live the blind texts. Separated they live in
+      Bookmarksgrove right at the coast of the Semantics, a large language
+      ocean. A small river named Duden flows by their place and supplies it with
+      the necessary regelialia. It is a paradisematic country, in which roasted
+      parts of sentences fly into your mouth. Even the all-powerful Pointing has
+      no control about the blind texts it is an almost unorthographic life One
+      day however a small line of blind text by the name of Lorem Ipsum decided
+      to leave for the far World of Grammar. The Big Oxmox advised her not to do
+      so, because there were thousands of bad Commas, wild Question Marks and
+      devious Semikoli, but the Little Blind Text didn’t listen. </b2b-paragraph
+    ><b2b-paragraph
+      >Far far away, behind the word mountains, far from the countries Vokalia
+      and Consonantia, there live the blind texts. Separated they live in
+      Bookmarksgrove right at the coast of the Semantics, a large language
+      ocean. A small river named Duden flows by their place and supplies it with
+      the necessary regelialia. It is a paradisematic country, in which roasted
+      parts of sentences fly into your mouth. Even the all-powerful Pointing has
+      no control about the blind texts it is an almost unorthographic life One
+      day however a small line of blind text by the name of Lorem Ipsum decided
+      to leave for the far World of Grammar. The Big Oxmox advised her not to do
+      so, because there were thousands of bad Commas, wild Question Marks and
+      devious Semikoli, but the Little Blind Text didn’t listen.
+    </b2b-paragraph>`;
+    },
+};
+export const DisplayInlineBlock = {
+    args: Object.assign(Object.assign({}, meta.args), { display: 'inline-block' }),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<b2b-paragraph
+      weight="${args.weight}"
+      size="${args.size}"
+      align="${args.align}"
+      margin="${args.margin}"
+      variant="${args.variant}"
+      display="${args.display}">
+      Far far away, behind the word mountains, far from the countries Vokalia
+      and Consonantia, there live the blind texts. Separated they live in
+      Bookmarksgrove right at the coast of the Semantics, a large language
+      ocean. A small river named Duden flows by their place and supplies it with
+      the necessary regelialia. It is a paradisematic country, in which roasted
+      parts of sentences fly into your mouth. Even the all-powerful Pointing has
+      no control about the blind texts it is an almost unorthographic life One
+      day however a small line of blind text by the name of Lorem Ipsum decided
+      to leave for the far World of Grammar. The Big Oxmox advised her not to do
+      so, because there were thousands of bad Commas, wild Question Marks and
+      devious Semikoli, but the Little Blind Text didn’t listen. </b2b-paragraph
+    ><b2b-paragraph
+      >Far far away, behind the word mountains, far from the countries Vokalia
+      and Consonantia, there live the blind texts. Separated they live in
+      Bookmarksgrove right at the coast of the Semantics, a large language
+      ocean. A small river named Duden flows by their place and supplies it with
+      the necessary regelialia. It is a paradisematic country, in which roasted
+      parts of sentences fly into your mouth. Even the all-powerful Pointing has
+      no control about the blind texts it is an almost unorthographic life One
+      day however a small line of blind text by the name of Lorem Ipsum decided
+      to leave for the far World of Grammar. The Big Oxmox advised her not to do
+      so, because there were thousands of bad Commas, wild Question Marks and
+      devious Semikoli, but the Little Blind Text didn’t listen.
+    </b2b-paragraph>`;
+    },
 };

package/dist/collection/components/progress-bar/progress-bar.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 12:35:00 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 Thu, 24 Oct 2024 12:35:01 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/progress-bar/progress-bar.js

@@ -17,11 +17,11 @@ export class ProgressBarComponent {
     }
     render() {
         const labelExists = this.label !== undefined && this.label !== '';
-        return (h(Host, { key: '68e13839be23251999368f88bdf148bb34dc6098' }, h("div", { key: 'd256d3032c4b39741cc93beeefcef1d7d0fd6af2', class: {
+        return (h(Host, { key: '15d28a38e73694c291cc3f30a46c293340f783b5' }, h("div", { key: 'da403857480473acba95970d121f2d182298ad17', class: {
                 [`b2b-progress-bar__${this.labelPosition}-${this.labelType}`]: true,
-            } }, h("div", { key: 'b79fb8c2d199017a0ac7f4114c6f4d51fb1eaf96', class: "b2b-progress-bar__wrapper" }, h("div", { key: '6cf5c6e2200e31bd136c49a8da4be469d9730ff3', class: "b2b-progress-bar__progress", style: {
+            } }, h("div", { key: 'b9bc673095e7ccb81b16eb220c91e8cc5801ad90', class: "b2b-progress-bar__wrapper" }, h("div", { key: '851108cac7b1af71d8ca8176aa03c90281b7bf54', class: "b2b-progress-bar__progress", style: {
                 width: `${this.getProgress()}%`,
-            } })), h("div", { key: '49971a61427cba628616659c0ef6401229c7800e', class: {
+            } })), h("div", { key: '49f60349dde0c498fd30f77711168e6a8c2fab30', class: {
                 'b2b-progress-bar__label': labelExists,
                 'b2b-progress-bar__label-none': !labelExists,
                 [`b2b-progress-bar__label__${this.labelPosition}-${this.labelType}`]: labelExists,

package/dist/collection/components/radio/radio.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 12:35:00 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 Thu, 24 Oct 2024 12:35:01 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/radio/radio.js

@@ -53,11 +53,11 @@ export class B2bRadioButtonComponent {
         return Array.from(document.querySelectorAll(`b2b-radio-button[name="${this.name}"]`)).filter((radio) => radio.value !== this.value);
     }
     render() {
-        return (h(Host, { key: '1ee38049ef961f4ee1ca547eaa90ec01dd31988d', onClick: this.onClick }, h("div", { key: 'f8cede2b2b17a0f90e4fd74ee495c718bfec6a1b', class: {
+        return (h(Host, { key: 'e18102a2fb0a1386273ade95e4a7bffa17466755', onClick: this.onClick }, h("div", { key: '3ab98b94c94b3e027e673247245c7012d3f9bc86', class: {
                 'b2b-radio': true,
                 'b2b-radio--error': this.invalid && !this.disabled,
                 'b2b-radio--disabled': this.disabled,
-            } }, h("div", { key: '168ac105466917de0458f43a438b1abc6e5aa506', class: "b2b-radio-items" }, h("input", { key: '3cbc7d5b471ba85dc5b56345161255341888bc49', class: "b2b-radio-input", "aria-labelledby": this.name, type: "radio", checked: this.checked, disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, value: this.value }), h("b2b-input-label", { key: '098b73df22e9731668accbd8d33b3b187eacb5a5', id: this.name, required: this.required, disabled: this.disabled }, this.label)), (this.hint !== undefined && !this.invalid) ||
+            } }, h("div", { key: 'd81ed252709872fb297fba2a497fb045f35285ac', class: "b2b-radio-items" }, h("input", { key: '7a914994f7ac1ae1e61e1d7f22f950fb6b1aff8c', class: "b2b-radio-input", "aria-labelledby": this.name, type: "radio", checked: this.checked, disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, value: this.value }), h("b2b-input-label", { key: '9509f79a63adce1a01a549bd41656df1b81ead7a', id: this.name, required: this.required, disabled: this.disabled }, this.label)), (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)) : (''))));
     }
     static get is() { return "b2b-radio-button"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 12:35:00 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 Thu, 24 Oct 2024 12:35:01 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/radio-group/radio-group.js

@@ -66,11 +66,11 @@ export class RadioButtonGroupComponent {
         this.removeChildText();
     }
     render() {
-        return (h(Host, { key: '0cddf61a7073779da898be2f713fea5badb88df8' }, h("div", { key: 'de8b301447c6d28f60271c50be4423df22bab264', class: {
+        return (h(Host, { key: 'ce3087acd7805720be6f5b2524dad8c9b6757e92' }, h("div", { key: '262e2d35c6091a5bb12f9f339b5177393a07591f', class: {
                 'b2b-radio-group': true,
                 'b2b-radio-group--error': this.invalid && !this.disabled,
                 [`b2b-radio-group--${this.alignment}`]: true,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("fieldset", { key: '8afdebb0fad7721ae56ed49e1a849479d9cfcefe' }, h("div", { key: '1701e793e7eb05705eaba049600886fc3e7aaa9a', class: "b2b-radio-group-options" }, h("slot", { key: 'bffdecd4848e5ed933098e58e0d15015cb79abb5' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("fieldset", { key: '1e90558b69774874b0d19703f9002a8e0311bcf2' }, h("div", { key: '2b26f7b29e176c2831c7f5da22ed59b8352b5155', class: "b2b-radio-group-options" }, h("slot", { key: '9dc75a44a47e555e5de84001a29ee378b4521a60' }))), (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)) : (''))));
     }
     static get is() { return "b2b-radio-group"; }

package/dist/collection/components/required-separator/required-separator.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 12:35:00 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 Thu, 24 Oct 2024 12:35:01 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/required-separator/required-separator.js

@@ -4,7 +4,7 @@ export class B2BRequiredSeparator {
         this.label = 'Pflichtfeld';
     }
     render() {
-        return (h(Host, { key: 'e913290e42cc4b3e11546cf2738b7f6af5f21c15' }, h("div", { key: '65e69e98a94fbe4087b6a1a72be19de37ea35bec', class: "b2b-required-separator__label" }, h("span", { key: '987cf5c1bf0948133a0c1c675f29b906f28484ec', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: '01b9cc54d0bf6275694dabb76d8ab5cf860e962a' }, this.label)), h("b2b-separator", { key: 'b6e33d18b60ed0cd714d5ef9ac30fe66076d3ab1' })));
+        return (h(Host, { key: 'ed46c96fc3dbc1a22589a0991e498723941f75eb' }, h("div", { key: '41eeac6e3147768d2492b509fde113532e3811ea', class: "b2b-required-separator__label" }, h("span", { key: '6de6fa330bc47474e0b06a0665c8003a0f889c94', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: 'e88bd1742e3e9b134b0b9d3c4e6fce07b27167ff' }, this.label)), h("b2b-separator", { key: 'd5ecda6575a64bbbfc7529698966233883e7e232' })));
     }
     static get is() { return "b2b-required-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 12:35:00 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 Thu, 24 Oct 2024 12:35:01 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/rounded-icon/rounded-icon.js

@@ -6,16 +6,16 @@ export class RoundedIconComponent {
         this.contentColor = 'var(--b2b-color-copy-default)';
     }
     render() {
-        return (h(Host, { key: '96a45bb8e2c22577940cf127cb8cf5328067d74e' }, h("div", { key: '1cb0d8c9ef0e5329d5fc2a02ab9cfd26736ba4cb', style: {
+        return (h(Host, { key: '3f7d19c1639c9e124ff5343a17fdad7aa322953f' }, h("div", { key: '0f86ef2292c301dd63cc8b975ce7d80c305813ec', style: {
                 ['background-color']: this.color,
                 ['border']: `1px solid ${this.borderColor || this.color}`,
             }, class: {
                 'b2b-rounded-icon': true,
-            } }, h("div", { key: 'b7de24db464b5c9e923bd17c506452a25a92c969', style: {
+            } }, h("div", { key: 'fa9aad421fd737beb33c8338eb41f24f92972a58', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: '5f0def8a269d1135bd898dba67fc8f5883222588', name: "icon" })), h("div", { key: '7d4f6ef6537c345ef3d609fb6887355ea92f2031', style: {
+            } }, h("slot", { key: '9ebcf447273cf65e2cd4bdfb9b08b26b33de2bcc', name: "icon" })), h("div", { key: '3dedbe36dcb2534925f965581ca25ddb5c07ad4a', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: '1c358408c2f51f5f550dc4ec328e08ed91eb4173', name: "text" })))));
+            } }, h("slot", { key: 'b24493622004d54f5fe867239afc45b50126c365', name: "text" })))));
     }
     static get is() { return "b2b-rounded-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable-container/scrollable-container.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 12:35:00 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 Thu, 24 Oct 2024 12:35:01 GMT
+ * Generated on Wed, 04 Dec 2024 06:52:18 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/scrollable-container/scrollable-container.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ScrollableContainerComponent {
     render() {
-        return (h(Host, { key: '9614409160f279896ff11ab8611694800b65196f' }, h("slot", { key: '626b4d7a5679e114f613be623ceace5c60f00b60' })));
+        return (h(Host, { key: 'd1e1251eef88da3e47e83a0e323a919ad6d4be59' }, h("slot", { key: '3f027e979011a8084cfe7d5c5169b1266d3cbc6f' })));
     }
     static get is() { return "b2b-scrollable-container"; }
     static get encapsulation() { return "shadow"; }