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

package/dist/collection/components/spinner/spinner.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/tab/tab.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/tab-panel/tab-panel.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/table/table-cell/table-cell.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/table/table-header/table-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/table/table-row/table-row.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/table/table-rowgroup/table-rowgroup.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/table/table.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/table/table.e2e.js

@@ -2,7 +2,8 @@ import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Table', () => {
     let page;
     beforeEach(async () => {
-        page = await newE2EPage({ timeout: 10000 });
+        page = await newE2EPage();
+        page.setDefaultTimeout(10000);
         await page.setContent(`
       <b2b-table size='equal'>
         <b2b-table-rowgroup type='header'>

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

@@ -64,11 +64,11 @@ const meta = {
             ${repeat(
         // @ts-ignore
         row, (cell, index) => html `<b2b-table-cell
-                ?divider=${args.withDividers && index === 0}
-                align="${args.align}"
-                text-wrap="${args.textWrap}"
-                >${cell}</b2b-table-cell
-              >`)}<b2b-table-cell
+                  ?divider=${args.withDividers && index === 0}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${cell}</b2b-table-cell
+                >`)}<b2b-table-cell
               ><b2b-button size="50">Action</b2b-button></b2b-table-cell
             >
           </b2b-table-row>
@@ -110,36 +110,36 @@ export const ScrollableTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-scrollable-container
-    style="width: ${args.parentWidth}; height: ${args.parentHeight};">
-    <b2b-table size="${args.size}">
-      <b2b-table-rowgroup type="header">
-        <b2b-table-row>
-          ${args.data.columns.map((columnName, index) => {
+      style="width: ${args.parentWidth}; height: ${args.parentHeight};">
+      <b2b-table size="${args.size}">
+        <b2b-table-rowgroup type="header">
+          <b2b-table-row>
+            ${args.data.columns.map((columnName, index) => {
             return html ` <b2b-table-header
-              ?divider=${args.withDividers &&
+                ?divider=${args.withDividers &&
                 index !== args.data.columns.length - 1}
-              style=${`min-width: ${args.columnsWidth}`}
-              >${columnName}</b2b-table-header
-            >`;
+                style=${`min-width: ${args.columnsWidth}`}
+                >${columnName}</b2b-table-header
+              >`;
         })}
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body">
-        ${args.data.rows.map((row, index) => {
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type="body">
+          ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map((data, index) => html `<b2b-table-cell
-                  ?divider=${args.withDividers && index === 0}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-          </b2b-table-row>`;
+              highlight="${args.highlight}"
+              color=${index === 0 ? args.color : 'default'}>
+              ${row.map((data, index) => html `<b2b-table-cell
+                    ?divider=${args.withDividers && index === 0}
+                    align="${args.align}"
+                    text-wrap="${args.textWrap}"
+                    >${data}</b2b-table-cell
+                  >`)}
+            </b2b-table-row>`;
         })}
-      </b2b-table-rowgroup>
-    </b2b-table>
-  </b2b-scrollable-container>`;
+        </b2b-table-rowgroup>
+      </b2b-table>
+    </b2b-scrollable-container>`;
     },
 };
 const RenderSortableTable = (_a) => {
@@ -233,55 +233,55 @@ export const AccordionTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div>
-    <b2b-table size="${args.size}">
-      <b2b-table-rowgroup type="header" accordion>
-        <b2b-table-row>
-          ${args.data.columns.map((columnName, index) => {
+      <b2b-table size="${args.size}">
+        <b2b-table-rowgroup type="header" accordion>
+          <b2b-table-row>
+            ${args.data.columns.map((columnName, index) => {
             return html ` <b2b-table-header
-              ?divider=${args.withDividers &&
+                ?divider=${args.withDividers &&
                 index !== args.data.columns.length - 1}
-              style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
-              >${columnName}</b2b-table-header
-            >`;
+                style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
+                >${columnName}</b2b-table-header
+              >`;
         })}
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion>
-        ${args.data.rows.map((row, index) => {
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type="body" accordion>
+          ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map(data => html `<b2b-table-cell
-                  ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-            <b2b-table-cell
-              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
-            >
-          </b2b-table-row>`;
+              highlight="${args.highlight}"
+              color=${index === 0 ? args.color : 'default'}>
+              ${row.map(data => html `<b2b-table-cell
+                    ?divider=${args.withDividers}
+                    align="${args.align}"
+                    text-wrap="${args.textWrap}"
+                    >${data}</b2b-table-cell
+                  >`)}
+              <b2b-table-cell
+                ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+              >
+            </b2b-table-row>`;
         })}
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion opened>
-        ${args.data.rows.map((row, index) => {
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type="body" accordion opened>
+          ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map(data => html `<b2b-table-cell
-                  ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-            <b2b-table-cell
-              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
-            >
-          </b2b-table-row>`;
+              highlight="${args.highlight}"
+              color=${index === 0 ? args.color : 'default'}>
+              ${row.map(data => html `<b2b-table-cell
+                    ?divider=${args.withDividers}
+                    align="${args.align}"
+                    text-wrap="${args.textWrap}"
+                    >${data}</b2b-table-cell
+                  >`)}
+              <b2b-table-cell
+                ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+              >
+            </b2b-table-row>`;
         })}
-      </b2b-table-rowgroup>
-    </b2b-table>
-  </div>`;
+        </b2b-table-rowgroup>
+      </b2b-table>
+    </div>`;
     },
 };
 export const SelectableTable = {
@@ -289,55 +289,55 @@ export const SelectableTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div>
-    <b2b-table size="${args.size}">
-      <b2b-table-rowgroup type="header" accordion selectable>
-        <b2b-table-row>
-          ${args.data.columns.map((columnName, index) => {
+      <b2b-table size="${args.size}">
+        <b2b-table-rowgroup type="header" accordion selectable>
+          <b2b-table-row>
+            ${args.data.columns.map((columnName, index) => {
             return html ` <b2b-table-header
-              ?divider=${args.withDividers &&
+                ?divider=${args.withDividers &&
                 index !== args.data.columns.length - 1}
-              style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
-              >${columnName}</b2b-table-header
-            >`;
+                style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
+                >${columnName}</b2b-table-header
+              >`;
         })}
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion selectable>
-        ${args.data.rows.map((row, index) => {
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type="body" accordion selectable>
+          ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map(data => html `<b2b-table-cell
-                  ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-            <b2b-table-cell
-              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
-            >
-          </b2b-table-row>`;
+              highlight="${args.highlight}"
+              color=${index === 0 ? args.color : 'default'}>
+              ${row.map(data => html `<b2b-table-cell
+                    ?divider=${args.withDividers}
+                    align="${args.align}"
+                    text-wrap="${args.textWrap}"
+                    >${data}</b2b-table-cell
+                  >`)}
+              <b2b-table-cell
+                ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+              >
+            </b2b-table-row>`;
         })}
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion opened selectable>
-        ${args.data.rows.map((row, index) => {
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type="body" accordion opened selectable>
+          ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map(data => html `<b2b-table-cell
-                  ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-            <b2b-table-cell
-              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
-            >
-          </b2b-table-row>`;
+              highlight="${args.highlight}"
+              color=${index === 0 ? args.color : 'default'}>
+              ${row.map(data => html `<b2b-table-cell
+                    ?divider=${args.withDividers}
+                    align="${args.align}"
+                    text-wrap="${args.textWrap}"
+                    >${data}</b2b-table-cell
+                  >`)}
+              <b2b-table-cell
+                ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+              >
+            </b2b-table-row>`;
         })}
-      </b2b-table-rowgroup>
-    </b2b-table>
-  </div>`;
+        </b2b-table-rowgroup>
+      </b2b-table>
+    </div>`;
     },
 };
 export const ColspanTable = {
@@ -345,48 +345,48 @@ export const ColspanTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 500px">
-    <b2b-table size="${args.size}">
-      <b2b-table-rowgroup type="header" selectable="${args.selectable}">
-        <b2b-table-row>
-          <b2b-table-header divider="${args.withDividers}" colspan="2"
-            >2 Columns</b2b-table-header
-          >
-          <b2b-table-header divider="${args.withDividers}"
-            >1 Column</b2b-table-header
-          >
-          <b2b-table-header>1 Column</b2b-table-header>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" selectable="${args.selectable}">
-        <b2b-table-row>
-          <b2b-table-cell divider="${args.withDividers}"
-            >1 Column</b2b-table-cell
-          >
-          <b2b-table-cell colspan="3">3 Columns</b2b-table-cell>
-        </b2b-table-row>
-        <b2b-table-row>
-          <b2b-table-cell divider="${args.withDividers}"
-            >1 Column</b2b-table-cell
-          >
-          <b2b-table-cell divider="${args.withDividers}"
-            >1 Column</b2b-table-cell
-          >
-          <b2b-table-cell divider="${args.withDividers}"
-            >1 Column</b2b-table-cell
-          >
-          <b2b-table-cell>1 Column</b2b-table-cell>
-        </b2b-table-row>
-        <b2b-table-row>
-          <b2b-table-cell divider="${args.withDividers}" colspan="2"
-            >2 Columns</b2b-table-cell
-          >
-          <b2b-table-cell divider="${args.withDividers}"
-            >1 Column</b2b-table-cell
-          >
-          <b2b-table-cell>1 Column</b2b-table-cell>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-    </b2b-table>
-  </div>`;
+      <b2b-table size="${args.size}">
+        <b2b-table-rowgroup type="header" selectable="${args.selectable}">
+          <b2b-table-row>
+            <b2b-table-header divider="${args.withDividers}" colspan="2"
+              >2 Columns</b2b-table-header
+            >
+            <b2b-table-header divider="${args.withDividers}"
+              >1 Column</b2b-table-header
+            >
+            <b2b-table-header>1 Column</b2b-table-header>
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type="body" selectable="${args.selectable}">
+          <b2b-table-row>
+            <b2b-table-cell divider="${args.withDividers}"
+              >1 Column</b2b-table-cell
+            >
+            <b2b-table-cell colspan="3">3 Columns</b2b-table-cell>
+          </b2b-table-row>
+          <b2b-table-row>
+            <b2b-table-cell divider="${args.withDividers}"
+              >1 Column</b2b-table-cell
+            >
+            <b2b-table-cell divider="${args.withDividers}"
+              >1 Column</b2b-table-cell
+            >
+            <b2b-table-cell divider="${args.withDividers}"
+              >1 Column</b2b-table-cell
+            >
+            <b2b-table-cell>1 Column</b2b-table-cell>
+          </b2b-table-row>
+          <b2b-table-row>
+            <b2b-table-cell divider="${args.withDividers}" colspan="2"
+              >2 Columns</b2b-table-cell
+            >
+            <b2b-table-cell divider="${args.withDividers}"
+              >1 Column</b2b-table-cell
+            >
+            <b2b-table-cell>1 Column</b2b-table-cell>
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+      </b2b-table>
+    </div>`;
     },
 };

package/dist/collection/components/textarea/textarea.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/toggle-button/toggle-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/toggle-chip/toggle-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/toggle-chip/toggle-chip.stories.js

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { html } from "lit-html";
-import { getArgTypes } from "../../docs/config/utils";
 const meta = {
     title: 'Components/Interaction/Toggle Chip',
     component: 'b2b-toggle-chip',
@@ -21,7 +20,20 @@ const meta = {
         active: false,
         disabled: false,
     },
-    argTypes: getArgTypes('b2b-toggle-chip'),
+    argTypes: {
+        label: {
+            control: 'text',
+        },
+        name: {
+            control: 'text',
+        },
+        active: {
+            control: 'boolean',
+        },
+        disabled: {
+            control: 'boolean',
+        },
+    },
     render: (_a) => {
         var args = __rest(_a, []);
         return html ` <b2b-toggle-chip

package/dist/collection/components/toggle-group/toggle-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/toggle-switch/toggle-switch.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 */