@otto-de/b2b-core-components 1.9.0-beta.2 → 1.9.0

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;

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

@@ -30,7 +30,6 @@ export const longSampleData = {
     'Column 4',
     'Column 5',
     'Column 6',
-    'Column 7',
   ],
   rows: [
     [

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -216,28 +218,33 @@
 :host {
   --b2b-table-cell-text-expand-bg: var(--b2b-color-white-100);
   display: table-cell;
-  padding: 12px;
   margin: 0;
+  padding: 12px;
   font-family: var(--b2b-font-family-default);
   font-size: var(--b2b-size-copy-100);
   line-height: var(--b2b-size-copy-line-height-100);
   border-bottom: 1px solid var(--b2b-color-grey-200);
   white-space: normal;
+  position: relative;
+}
+:host(.b2b-table-cell--colspan) {
+  flex: 1;
+  display: block;
 }
 :host(.b2b-table-cell--ellipsis) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  position: relative;
 }
 :host(.b2b-table-cell--expand-text) {
+  overflow-y: visible;
   position: absolute;
   white-space: normal;
   background-color: var(--b2b-table-cell-text-expand-bg);
   border: 1px solid var(--b2b-color-grey-200);
   border-top: none;
   z-index: 2000;
-  min-width: 100px;
+  width: 100%;
 }
 :host(.b2b-table-cell--left) {
   text-align: left;

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { ContentAlignment, TableSizes, } from "../../../utils/types/table.types";
+import { setFlexBase } from "../utils";
 export class TableCellComponent {
   constructor() {
     this.expandTextHoverWaitTime = 600;
@@ -23,14 +24,21 @@ export class TableCellComponent {
     this.align = ContentAlignment.LEFT;
     this.divider = false;
     this.color = 'default';
+    this.colspan = undefined;
+    this.totalCols = undefined;
     this.useTextEllipsis = false;
   }
-  componentWillRender() {
+  componentWillLoad() {
     this.useTextEllipsis = !this.textWrap && this.size === TableSizes.EQUAL;
+    if (this.size === TableSizes.COLSPAN) {
+      const rowGroup = this.host.closest('b2b-table-rowgroup');
+      setFlexBase(this.host, this.colspan, this.totalCols, rowGroup.selectable, rowGroup.accordion);
+    }
   }
   render() {
     return (h(Host, { onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
         'b2b-table-cell': true,
+        ['b2b-table-cell--colspan']: this.size === TableSizes.COLSPAN,
         ['b2b-table-cell--ellipsis']: this.useTextEllipsis,
         ['b2b-table-cell--' + this.align]: true,
         ['b2b-table-cell--divider']: this.divider,
@@ -74,7 +82,7 @@ export class TableCellComponent {
         "mutable": false,
         "complexType": {
           "original": "TableSizes",
-          "resolved": "\"equal\" | \"expand\"",
+          "resolved": "\"colspan\" | \"equal\" | \"expand\"",
           "references": {
             "TableSizes": {
               "location": "import",
@@ -86,8 +94,11 @@ export class TableCellComponent {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "The size of the cell. Follows table size.\nWhen size is equal and textWrap is false, the text will truncate with Ellipsis.\nOther sizes won't affect cell current implementation."
+          "tags": [{
+              "name": "internal",
+              "text": "The size of the cell. Follows table size.\nWhen size is equal and textWrap is false, the text will truncate with Ellipsis.\nOther sizes won't affect cell current implementation."
+            }],
+          "text": ""
         },
         "attribute": "size",
         "reflect": false,
@@ -158,6 +169,43 @@ export class TableCellComponent {
         "attribute": "color",
         "reflect": false,
         "defaultValue": "'default'"
+      },
+      "colspan": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "How many columns the cell should span. Accepts numbers greater than one."
+        },
+        "attribute": "colspan",
+        "reflect": false
+      },
+      "totalCols": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "number of total columns in a colspan table"
+            }],
+          "text": ""
+        },
+        "attribute": "total-cols",
+        "reflect": false
       }
     };
   }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -214,16 +216,16 @@
   src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
 }
 :host {
+  padding: var(--b2b-size-30);
   display: table-cell;
-  padding: 12px;
   margin: 0;
   white-space: nowrap;
   font-family: var(--b2b-font-family-default);
   font-size: var(--b2b-size-copy-100);
   line-height: var(--b2b-size-copy-line-height-100);
   font-weight: bold;
-  border-top: 1px solid var(--b2b-color-grey-200);
-  border-bottom: 2px solid var(--b2b-color-grey-300);
+  border-top: var(--b2b-size-1) solid var(--b2b-color-grey-200);
+  border-bottom: var(--b2b-size-5) solid var(--b2b-color-grey-300);
   vertical-align: middle;
 }
 :host .b2b-table-header__heading {
@@ -291,15 +293,7 @@
 :host(.b2b-table-header--divider) {
   border-right: 1px solid var(--b2b-color-grey-200);
 }
-:host(.b2b-table-header--left) {
-  padding-left: var(--b2b-size-15);
-}
-:host(.b2b-table-header--right) {
-  padding-right: var(--b2b-size-15);
-}
-:host(.b2b-table-header--fixed) {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  background-color: var(--b2b-color-white-100);
+:host(.b2b-table-header--colspan) {
+  flex: 1;
+  display: block;
 }

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

@@ -1,7 +1,21 @@
 import { h, Host, } from "@stencil/core";
-import { ContentAlignment, TableSortDirections, SortIconAlignment, } from "../../../utils/types/table.types";
+import { TableSizes, TableSortDirections, SortIconAlignment, ContentAlignment, } from "../../../utils/types/table.types";
+import { setFlexBase } from "../utils";
 export class TableHeaderComponent {
   constructor() {
+    this.setIconPlacement = () => {
+      switch (this.contentAlign) {
+        case ContentAlignment.LEFT:
+          this.iconAlign = SortIconAlignment.RIGHT;
+          break;
+        case ContentAlignment.RIGHT:
+          this.iconAlign = SortIconAlignment.LEFT;
+          break;
+        case ContentAlignment.CENTER:
+          this.iconAlign = SortIconAlignment.RIGHT;
+          break;
+      }
+    };
     this.changeSortDirection = (e) => {
       if ((e.type === 'keydown' && e.key === 'Enter') || e.type === 'click') {
         this.unSortSiblings();
@@ -38,31 +52,32 @@ export class TableHeaderComponent {
       this.active = false;
     };
     this.divider = false;
+    this.size = TableSizes.EXPAND;
     this.fixed = false;
     this.sortDirection = undefined;
     this.sortId = undefined;
+    this.colspan = undefined;
     this.contentAlign = ContentAlignment.LEFT;
+    this.totalCols = undefined;
     this.active = false;
     this.iconAlign = undefined;
   }
-  componentWillRender() {
-    switch (this.contentAlign) {
-      case ContentAlignment.LEFT:
-        this.iconAlign = SortIconAlignment.RIGHT;
-        break;
-      case ContentAlignment.RIGHT:
-        this.iconAlign = SortIconAlignment.LEFT;
-        break;
-      case ContentAlignment.CENTER:
-        this.iconAlign = SortIconAlignment.RIGHT;
-        break;
+  componentWillLoad() {
+    if (this.size === TableSizes.COLSPAN) {
+      const rowGroup = this.hostElement.closest('b2b-table-rowgroup');
+      setFlexBase(this.hostElement, this.colspan, this.totalCols, rowGroup.selectable, rowGroup.accordion);
     }
   }
+  componentWillRender() {
+    this.setIconPlacement();
+  }
   render() {
     return (h(Host, { class: {
         [`b2b-table-header--${this.sortDirection && this.iconAlign}`]: true,
         'b2b-table-header--divider': this.divider,
-        'b2b-table-header--fixed': this.fixed,
+        [`b2b-table-header--${this.size}`]: true,
+      }, style: {
+        'flex-grow': `${this.colspan}`,
       }, role: "columnheader", "aria-sort": this.sortDirection === 'not-sorted' ||
         this.sortDirection === undefined
         ? 'other'
@@ -108,6 +123,30 @@ export class TableHeaderComponent {
         "reflect": false,
         "defaultValue": "false"
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TableSizes",
+          "resolved": "\"colspan\" | \"equal\" | \"expand\"",
+          "references": {
+            "TableSizes": {
+              "location": "import",
+              "path": "../../../utils/types/table.types",
+              "id": "src/utils/types/table.types.ts::TableSizes"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the cell. Follows table size.\nWhen size is equal and textWrap is false, the text will truncate with Ellipsis.\nOther sizes won't affect cell current implementation."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "TableSizes.EXPAND"
+      },
       "fixed": {
         "type": "boolean",
         "mutable": false,
@@ -119,8 +158,11 @@ export class TableHeaderComponent {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "sets the header position to sticky. Use it when table is inside a scrollable container. *"
+          "tags": [{
+              "name": "deprecated",
+              "text": "Use fixed on the rowgroup instead. Sets the header position to sticky. Use it when table is inside a scrollable container. *"
+            }],
+          "text": ""
         },
         "attribute": "fixed",
         "reflect": false,
@@ -166,6 +208,23 @@ export class TableHeaderComponent {
         "attribute": "sort-id",
         "reflect": false
       },
+      "colspan": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The width of the column. Increase it to change the size of the column relative to other columns."
+        },
+        "attribute": "colspan",
+        "reflect": false
+      },
       "contentAlign": {
         "type": "string",
         "mutable": false,
@@ -189,6 +248,26 @@ export class TableHeaderComponent {
         "attribute": "content-align",
         "reflect": false,
         "defaultValue": "ContentAlignment.LEFT"
+      },
+      "totalCols": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "number of total columns per row"
+            }],
+          "text": ""
+        },
+        "attribute": "total-cols",
+        "reflect": false
       }
     };
   }