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

package/dist/collection/components/background-box/background-box.e2e.js

@@ -26,13 +26,13 @@ describe('B2B-Background-Box', () => {
         const style = await element.getComputedStyle();
         expect(style.padding).toBe('0px');
     });
-    it('should set fixed width', async () => {
+    it('should set max width', async () => {
         page = await newE2EPage();
-        await page.setContent(`<b2b-background-box fixed-width='true' no-padding='true'>Background box component</b2b-background-box>`);
+        await page.setContent(`<b2b-background-box max-width='true' no-padding='true'>Background box component</b2b-background-box>`);
         const element = await page.find('b2b-background-box');
         expect(element).toEqualText('Background box component');
         const style = await element.getComputedStyle();
-        expect(style.width).toBe('1212px');
+        expect(style.maxWidth).toBe('1212px');
     });
     it('should remove specific borders when set to none', async () => {
         page = await newE2EPage();

package/dist/collection/components/background-box/background-box.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class BackgroundBoxComponent {
     constructor() {
-        this.fixedWidth = false;
+        this.maxWidth = false;
         this.noPadding = false;
         this.borderTop = 'default';
         this.borderRight = 'default';
@@ -9,15 +9,15 @@ export class BackgroundBoxComponent {
         this.borderLeft = 'default';
     }
     render() {
-        return (h(Host, { key: '74f2133140f10daf4130d42400afe779b51328ba', class: {
+        return (h(Host, { key: '3f5519f808f26a88fde93a7f933b11c9b3f96992', class: {
                 'b2b-background-box': true,
-                'b2b-background-box--fixed-width': this.fixedWidth,
+                'b2b-background-box--max-width': this.maxWidth,
                 'b2b-background-box--no-padding': this.noPadding,
                 'b2b-background-box--hide-border-top': this.borderTop === 'none',
                 'b2b-background-box--hide-border-right': this.borderRight === 'none',
                 'b2b-background-box--hide-border-bottom': this.borderBottom === 'none',
                 'b2b-background-box--hide-border-left': this.borderLeft === 'none',
-            } }, h("slot", { key: '0762108f2b1305b4a158ea346ebb1f9ba17cb45b' })));
+            } }, h("slot", { key: '35bd80fb92b66ab216db1cf86ce7817a9087fe19' })));
     }
     static get is() { return "b2b-background-box"; }
     static get encapsulation() { return "shadow"; }
@@ -33,7 +33,7 @@ export class BackgroundBoxComponent {
     }
     static get properties() {
         return {
-            "fixedWidth": {
+            "maxWidth": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -45,9 +45,9 @@ export class BackgroundBoxComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Fixes width to 1212px. Per default, it is false"
+                    "text": "Sets max width to 1212px. Per default, it is false"
                 },
-                "attribute": "fixed-width",
+                "attribute": "max-width",
                 "reflect": false,
                 "defaultValue": "false"
             },

package/dist/collection/components/background-box/background-box.spec.js

@@ -15,13 +15,13 @@ it('should render the background box with default values', async () => {
     </b2b-background-box>
 		`);
 });
-it('should render the background box with fixed width', async () => {
+it('should render the background box with max width', async () => {
     const page = await newSpecPage({
         components: [BackgroundBoxComponent],
-        template: () => (h("b2b-background-box", { "fixed-width": true }, "B2B Background Box")),
+        template: () => (h("b2b-background-box", { "max-width": true }, "B2B Background Box")),
     });
     expect(page.root).toEqualHtml(`
-    <b2b-background-box class="b2b-background-box b2b-background-box--fixed-width" fixed-width="">
+    <b2b-background-box class="b2b-background-box b2b-background-box--max-width" max-width="">
       <mock:shadow-root>
         <slot></slot>
       </mock:shadow-root>

package/dist/collection/components/background-box/background-box.stories.js

@@ -16,7 +16,7 @@ const meta = {
     title: 'Components/Utilities/Background Box',
     component: 'b2b-background-box',
     args: {
-        fixedWidth: false,
+        maxWidth: false,
         noPadding: false,
         borderTop: 'default',
         borderRight: 'default',
@@ -27,21 +27,21 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html ` <b2b-background-box
-    fixed-width="${args.fixedWidth}"
-    no-padding="${args.noPadding}"
-    border-top="${args.borderTop}"
-    border-right="${args.borderRight}"
-    border-bottom="${args.borderBottom}"
-    border-left="${args.borderLeft}">
-    <b2b-paragraph>
-      The BackgroundBox component adjusts its width and padding based on two
-      properties: fixedWidth and noPadding. When fixedWidth is true, the box has
-      a fixed width of 1212px; otherwise, it fills the available width. The
-      noPadding property controls internal spacing—if true, no padding is
-      applied; if false, a default padding of 24px (1.5rem) is added. The height
-      of the box depends on its internal content.
-    </b2b-paragraph>
-  </b2b-background-box>`;
+      max-width="${args.maxWidth}"
+      no-padding="${args.noPadding}"
+      border-top="${args.borderTop}"
+      border-right="${args.borderRight}"
+      border-bottom="${args.borderBottom}"
+      border-left="${args.borderLeft}">
+      <b2b-paragraph>
+        The BackgroundBox component adjusts its width and padding based on two
+        properties: maxWidth and noPadding. When maxWidth is true, it fills the
+        available width until 1212px. The noPadding property controls internal
+        spacing—if true, no padding is applied; if false, a default padding of
+        24px (1.5rem) is added. The height of the box depends on its internal
+        content.
+      </b2b-paragraph>
+    </b2b-background-box>`;
     },
 };
 export default meta;
@@ -51,8 +51,8 @@ export const Default = {
 export const BorderControl = {
     args: Object.assign(Object.assign({}, meta.args), { borderTop: 'none' }),
 };
-export const FixedWidth = {
-    args: Object.assign(Object.assign({}, meta.args), { fixedWidth: true }),
+export const MaxWidth = {
+    args: Object.assign(Object.assign({}, meta.args), { maxWidth: true }),
 };
 export const NoPadding = {
     args: Object.assign(Object.assign({}, meta.args), { noPadding: true }),

package/dist/collection/components/breadcrumb/breadcrumb.css

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

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

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

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

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
-const meta = {
+const button = {
     title: 'Components/Interaction/Button',
     component: 'b2b-button',
     args: {
@@ -30,133 +30,133 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    ${args.label}
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}">
+      ${args.label}
+    </b2b-button>`;
     },
 };
-export default meta;
+export default button;
 export const Primary = {
-    args: Object.assign(Object.assign({}, meta.args), { variant: 'primary', label: 'Primary' }),
+    args: Object.assign(Object.assign({}, button.args), { variant: 'primary', label: 'Primary' }),
 };
 export const Secondary = {
-    args: Object.assign(Object.assign({}, meta.args), { label: 'Secondary' }),
+    args: Object.assign(Object.assign({}, button.args), { label: 'Secondary' }),
 };
 export const Loading = {
-    args: Object.assign(Object.assign({}, meta.args), { loading: true, label: 'Loading' }),
+    args: Object.assign(Object.assign({}, button.args), { loading: true, label: 'Loading' }),
 };
 export const IconStart = {
-    args: Object.assign(Object.assign({}, meta.args), { label: 'Icon Start' }),
+    args: Object.assign(Object.assign({}, button.args), { label: 'Icon Start' }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    <b2b-icon-100 slot="start" icon="b2b_icon-check"></b2b-icon-100>
-    ${args.label}
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}">
+      <b2b-icon-100 slot="start" icon="b2b_icon-check"></b2b-icon-100>
+      ${args.label}
+    </b2b-button>`;
     },
 };
 export const IconEnd = {
-    args: Object.assign(Object.assign({}, meta.args), { label: 'Icon End' }),
+    args: Object.assign(Object.assign({}, button.args), { label: 'Icon End' }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    ${args.label}
-    <b2b-icon-100 slot="end" icon="b2b_icon-check"></b2b-icon-100>
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}">
+      ${args.label}
+      <b2b-icon-100 slot="end" icon="b2b_icon-check"></b2b-icon-100>
+    </b2b-button>`;
     },
 };
 export const PaliIcon = {
-    args: Object.assign(Object.assign({}, meta.args), { label: 'Icon from PaLi' }),
+    args: Object.assign(Object.assign({}, button.args), { label: 'Icon from PaLi' }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    <i slot="start" class="obc_icon-info"></i>
-    ${args.label}
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}">
+      <i slot="start" class="obc_icon-info"></i>
+      ${args.label}
+    </b2b-button>`;
     },
 };
 export const IconOnly = {
-    args: Object.assign({}, meta.args),
+    args: Object.assign({}, button.args),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    <b2b-icon-100 slot="end" icon="b2b_icon-search"></b2b-icon-100>
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}">
+      <b2b-icon-100 slot="end" icon="b2b_icon-search"></b2b-icon-100>
+    </b2b-button>`;
     },
 };
 export const Disabled = {
-    args: Object.assign(Object.assign({}, meta.args), { disabled: true, label: 'Disabled' }),
+    args: Object.assign(Object.assign({}, button.args), { disabled: true, label: 'Disabled' }),
 };
 export const Anchor = {
-    args: Object.assign({}, meta.args),
+    args: Object.assign({}, button.args),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    href="www.otto.de"
-    target="blank"
-    type="${args.type}">
-    Go to otto.de
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      href="www.otto.de"
+      target="blank"
+      type="${args.type}">
+      Go to otto.de
+    </b2b-button>`;
     },
 };
 export const DisabledAnchor = {
-    args: Object.assign(Object.assign({}, meta.args), { disabled: true }),
+    args: Object.assign(Object.assign({}, button.args), { disabled: true }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    href="www.otto.de"
-    target="blank"
-    type="${args.type}">
-    Go to otto.de
-  </b2b-button>`;
+      variant="${args.variant}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      href="www.otto.de"
+      target="blank"
+      type="${args.type}">
+      Go to otto.de
+    </b2b-button>`;
     },
 };
 export const CustomWidth = {
-    args: Object.assign(Object.assign({}, meta.args), { width: 'custom' }),
+    args: Object.assign(Object.assign({}, button.args), { width: 'custom' }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html ` <b2b-button
-    class="docs-button-obc-overwrite"
-    style="width: 300px"
-    variant="${args.variant}"
-    size="${args.size}"
-    width="${args.width}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    300px custom width
-  </b2b-button>`;
+      class="docs-button-obc-overwrite"
+      style="width: 300px"
+      variant="${args.variant}"
+      size="${args.size}"
+      width="${args.width}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}">
+      300px custom width
+    </b2b-button>`;
     },
 };

package/dist/collection/components/card/card.css

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

package/dist/collection/components/checkbox/checkbox.css

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

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

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

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

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

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

@@ -27,12 +27,12 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-chip-component
-    label="${args.label}"
-    type="${args.type}"
-    label-style="${args.labelStyle}"
-    disabled="${args.disabled}"
-    value="${args.value}"
-    has-close-button="${args.hasCloseButton}" />`;
+      label="${args.label}"
+      type="${args.type}"
+      label-style="${args.labelStyle}"
+      disabled="${args.disabled}"
+      value="${args.value}"
+      has-close-button="${args.hasCloseButton}" />`;
     },
 };
 export default meta;
@@ -54,15 +54,15 @@ export const story040WithTruncatedText = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div
-    style="width: 170px; border: 1px solid grey; border-radius: 3px; padding: 6px;">
-    <b2b-chip-component
-      label="${args.label}"
-      type="${args.type}"
-      label-style="${args.labelStyle}"
-      disabled="${args.disabled}"
-      value="${args.value}"
-      has-close-button="${args.hasCloseButton}" />
-  </div>`;
+      style="width: 170px; border: 1px solid grey; border-radius: 3px; padding: 6px;">
+      <b2b-chip-component
+        label="${args.label}"
+        type="${args.type}"
+        label-style="${args.labelStyle}"
+        disabled="${args.disabled}"
+        value="${args.value}"
+        has-close-button="${args.hasCloseButton}" />
+    </div>`;
     },
 };
 export const story050SuccessChip = {

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

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

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

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

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

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