@otto-de/b2b-core-components 1.31.2 → 1.31.3

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

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -311,7 +313,7 @@
   border-bottom: var(--b2b-size-1) solid var(--b2b-color-black-100);
   border-top: 2px none -webkit-focus-ring-color;
   box-sizing: border-box;
-  z-index: 10;
+  z-index: 1001;
 }
 :host .b2b-multiselect-dropdown__option__search {
   width: 100%;

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

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -83,4 +83,31 @@ describe('B2B-Radio-Group', () => {
         const element = await slotPage.find('span');
         expect(element).toEqualText('Custom label');
     });
+    it('should allow individual radio buttons to be disabled when group is enabled', async () => {
+        const individualDisabledPage = await newE2EPage();
+        await individualDisabledPage.setContent(`
+      <b2b-radio-group name="individual-test-group" label="Test Group">
+          <b2b-radio-button label="Option 1" value="one" name="individual-test-group" id="option1"></b2b-radio-button>
+          <b2b-radio-button label="Option 2" value="two" name="individual-test-group" id="option2" disabled="true"></b2b-radio-button>
+          <b2b-radio-button label="Option 3" value="three" name="individual-test-group" id="option3"></b2b-radio-button>
+      </b2b-radio-group>
+    `);
+        const radioGroup = await individualDisabledPage.find('b2b-radio-group');
+        expect(radioGroup).not.toHaveAttribute('disabled');
+        const firstRadio = await individualDisabledPage.find('b2b-radio-button[id="option1"] >>> .b2b-radio');
+        expect(firstRadio).not.toHaveClass('b2b-radio--disabled');
+        const secondRadio = await individualDisabledPage.find('b2b-radio-button[id="option2"] >>> .b2b-radio');
+        expect(secondRadio).toHaveClass('b2b-radio--disabled');
+        const thirdRadio = await individualDisabledPage.find('b2b-radio-button[id="option3"] >>> .b2b-radio');
+        expect(thirdRadio).not.toHaveClass('b2b-radio--disabled');
+        const b2bChange = await individualDisabledPage.spyOnEvent('b2b-change');
+        const disabledRadioInput = await individualDisabledPage.find('b2b-radio-button[id="option2"] >>> input');
+        await disabledRadioInput.click();
+        await individualDisabledPage.waitForChanges();
+        expect(b2bChange).not.toHaveReceivedEvent();
+        const enabledRadioInput = await individualDisabledPage.find('b2b-radio-button[id="option1"] >>> input');
+        await enabledRadioInput.click();
+        await individualDisabledPage.waitForChanges();
+        expect(b2bChange).toHaveReceivedEvent();
+    });
 });

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

@@ -3,16 +3,14 @@ export class RadioButtonGroupComponent {
     constructor() {
         this.toggleAllDisabled = () => {
             let nodes = this.getChildNodes();
-            if (this.disabled) {
-                nodes.forEach(node => {
+            nodes.forEach(node => {
+                if (this.disabled) {
                     node.disabled = true;
-                });
-            }
-            else {
-                nodes.forEach(node => {
-                    node.disabled = false;
-                });
-            }
+                }
+                else {
+                    node.disabled = node.disabled || false;
+                }
+            });
         };
         this.toggleAllError = () => {
             let nodes = this.getChildNodes();
@@ -69,11 +67,11 @@ export class RadioButtonGroupComponent {
         this.removeChildText();
     }
     render() {
-        return (h(Host, { key: '5b36240943436717e043f0c25483eef6f90229f0' }, h("div", { key: 'b9d174d04e5a280beed928e37f4355d8c1edf1aa', class: {
+        return (h(Host, { key: '06cf12d285ccd4df336172830e5012c1c1e570da' }, h("div", { key: '2222697e7cd3861809bf061e3aa79c549b8ec6a0', class: {
                 'b2b-radio-group': true,
                 'b2b-radio-group--error': this.invalid && !this.disabled,
                 [`b2b-radio-group--${this.alignment}`]: true,
-            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("fieldset", { key: 'd4e428dda283b88ed29f4259c3c7ad71d484648d' }, h("div", { key: '4ac819b081787a2dc468ebc3c0c84d8d182c7353', class: "b2b-radio-group-options" }, h("slot", { key: '4c8ee699036c8b3b672fbedbffc8efbbdaf86fa3' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("fieldset", { key: '2a4d8d3502948b916c425e2c7c7ea7370e42bb0d' }, h("div", { key: 'b61c94d7b2afe84bea009d526341bf826aeacf79', class: "b2b-radio-group-options" }, h("slot", { key: 'b298168cbf5fdb0d11798933afcc1811c9b09db8' }))), (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/radio-group/radio-group.stories.js

@@ -63,6 +63,27 @@ export const story070LabelSlot = {
     </b2b-radio-group>`,
 };
 story070LabelSlot.storyName = 'Label slot';
+export const story080IndividualDisabled = {
+    args: Object.assign({}, defaultArgs),
+    render: ({}) => html `<b2b-radio-group
+      name="individual-disabled-group"
+      label="Group Enabled with Individual Disabled Radio">
+      <b2b-radio-button
+        label="Option 1 (Enabled)"
+        name="individual-disabled-group"
+        value="one"></b2b-radio-button>
+      <b2b-radio-button
+        label="Option 2 (Disabled)"
+        name="individual-disabled-group"
+        value="two"
+        disabled="true"></b2b-radio-button>
+      <b2b-radio-button
+        label="Option 3 (Enabled)"
+        name="individual-disabled-group"
+        value="three"></b2b-radio-button>
+    </b2b-radio-group>`,
+};
+story080IndividualDisabled.storyName = 'Individual Radio Disabled';
 const controls = {};
 const radioGroupArgs = getArgTypes('b2b-radio-group', controls);
 export default {

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

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/shimmer/shimmer.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/snackbar/snackbar.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/spinner/spinner.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/tab/tab.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/tab-panel/tab-panel.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/table/table-cell/table-cell.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/table/table-header/table-header.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/table/table-row/table-row.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/table/table-rowgroup/table-rowgroup.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/table/table.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/textarea/textarea.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/toggle-button/toggle-button.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/toggle-chip/toggle-chip.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/toggle-switch/toggle-switch.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/tooltip/tooltip.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/wizard/wizard.css

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

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

@@ -46,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -170,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/docs/tokens/color.stories.js

@@ -45,7 +45,7 @@ const semanticBottomTokensList = [
     'info',
     'hover',
 ];
-const basicTokensList = ['black', 'white', 'grey', 'red'];
+const basicTokensList = ['black', 'white', 'grey', 'red', 'blue'];
 const ColorTokens = ({}) => {
     return html `
     <b2b-headline>Color</b2b-headline>

package/dist/components/b2b-alert.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon-100.js';
 
-const alertCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}.b2b-alert{display:none;padding:var(--b2b-size-30);gap:var(--b2b-size-30);font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);flex-shrink:0;border-radius:var(--b2b-size-7)}.b2b-alert--info{background-color:var(--b2b-color-info-50)}.b2b-alert--info__icon{color:var(--b2b-color-info-100)}.b2b-alert--warning{background-color:var(--b2b-color-warning-50)}.b2b-alert--error{color:var(--b2b-color-error-100);background-color:var(--b2b-color-error-50)}.b2b-alert--success{background-color:var(--b2b-color-success-50)}.b2b-alert--success__icon{color:var(--b2b-color-success-100)}.b2b-alert__close-icon{padding-top:var(--b2b-size-7);width:var(--b2b-size-30);height:var(--b2b-size-35);cursor:pointer;fill:var(--b2b-color-grey-400);flex-shrink:0}.b2b-alert__content{display:flex;align-items:baseline;flex:2;gap:var(--b2b-size-30)}.b2b-alert__content p{width:100%;margin:0;padding:var(--b2b-size-5) 0 var(--b2b-size-1) 0}.b2b-alert--open{display:flex}.b2b-alert--small{width:fit-content;justify-content:center;padding:var(--b2b-size-7);display:inline-flex}.b2b-alert--large{width:inherit;justify-content:space-between}";
+const alertCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}.b2b-alert{display:none;padding:var(--b2b-size-30);gap:var(--b2b-size-30);font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);flex-shrink:0;border-radius:var(--b2b-size-7)}.b2b-alert--info{background-color:var(--b2b-color-info-50)}.b2b-alert--info__icon{color:var(--b2b-color-info-100)}.b2b-alert--warning{background-color:var(--b2b-color-warning-50)}.b2b-alert--error{color:var(--b2b-color-error-100);background-color:var(--b2b-color-error-50)}.b2b-alert--success{background-color:var(--b2b-color-success-50)}.b2b-alert--success__icon{color:var(--b2b-color-success-100)}.b2b-alert__close-icon{padding-top:var(--b2b-size-7);width:var(--b2b-size-30);height:var(--b2b-size-35);cursor:pointer;fill:var(--b2b-color-grey-400);flex-shrink:0}.b2b-alert__content{display:flex;align-items:baseline;flex:2;gap:var(--b2b-size-30)}.b2b-alert__content p{width:100%;margin:0;padding:var(--b2b-size-5) 0 var(--b2b-size-1) 0}.b2b-alert--open{display:flex}.b2b-alert--small{width:fit-content;justify-content:center;padding:var(--b2b-size-7);display:inline-flex}.b2b-alert--large{width:inherit;justify-content:space-between}";
 const B2bAlertStyle0 = alertCss;
 
 const AlertComponent = /*@__PURE__*/ proxyCustomElement(class AlertComponent extends HTMLElement {