@otto-de/b2b-core-components 1.18.0 → 1.20.0

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

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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 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 Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 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 Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 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 Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 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 Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 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 Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,5 +1,6 @@
 import { h, Host, } from "@stencil/core";
-import { TableAccordionRowTypes, TableColourOptions, TableSizes, } from "../../../utils/types/table.types";
+import { TableColourOptions, TableSizes, } from "../../../utils/types/table.types";
+import { isFirstRow } from "../utils";
 export class TableRowComponent {
     constructor() {
         this.toggleOpen = () => {
@@ -17,8 +18,11 @@ export class TableRowComponent {
             });
         };
         this.getRowColor = () => {
-            if (this.accordionType === TableAccordionRowTypes.PARENT)
+            if (this.isAccordion() &&
+                isFirstRow(this.hostElement) &&
+                !this.isHeader()) {
                 return TableColourOptions.GROUP;
+            }
             return this.color;
         };
         /** Only needs to be added if we control the state of the selection. */
@@ -29,8 +33,14 @@ export class TableRowComponent {
         this.getParentRowGroup = () => {
             return this.hostElement.closest('b2b-table-rowgroup');
         };
+        this.isAccordion = () => {
+            return this.getParentRowGroup().hasAttribute('accordion');
+        };
+        this.isHeader = () => {
+            return this.getParentRowGroup().type === 'header';
+        };
         this.getCheckbox = () => {
-            let parent = this.getParentRowGroup();
+            const parent = this.getParentRowGroup();
             if (this.shouldAddCheckbox()) {
                 if (parent.type === 'header') {
                     return (h("b2b-table-header", { class: "b2b-table-row__control-cell--checkbox" }, h("b2b-checkbox", { standalone: true, checked: this.checked, indeterminate: this.indeterminate })));
@@ -41,23 +51,21 @@ export class TableRowComponent {
             }
         };
         this.getAccordionColumns = () => {
-            if (this.accordionType != undefined) {
-                switch (this.accordionType) {
-                    case TableAccordionRowTypes.HEADER:
-                        return (h("b2b-table-header", { class: "b2b-table-row__control-cell--accordion" }));
-                    case TableAccordionRowTypes.PARENT:
-                        return (h("b2b-table-cell", null, h("button", { onClick: this.toggleOpen, class: {
-                                'b2b-table-row__accordion-icon': true,
-                                'b2b-table-row__accordion-icon--open': this.isOpen,
-                            } }, h("b2b-icon", { icon: "b2b_icon-arrow-right", clickable: true }))));
-                    case TableAccordionRowTypes.CHILD:
-                        return (h("b2b-table-cell", { class: "b2b-table-row__control-cell--accordion" }));
+            if (this.isAccordion() && !this.isHeader()) {
+                if (isFirstRow(this.hostElement)) {
+                    return (h("b2b-table-cell", null, h("button", { onClick: this.toggleOpen, class: {
+                            'b2b-table-row__accordion-icon': true,
+                            'b2b-table-row__accordion-icon--open': this.isOpen,
+                        } }, h("b2b-icon", { icon: "b2b_icon-arrow-right", clickable: true }))));
                 }
+                return (h("b2b-table-cell", { class: "b2b-table-row__control-cell--accordion" }));
+            }
+            else if (this.isAccordion() && this.isHeader()) {
+                return (h("b2b-table-header", { class: "b2b-table-row__control-cell--accordion" }));
             }
         };
         this.highlight = true;
         this.color = 'default';
-        this.accordionType = undefined;
         this.selectable = undefined;
         this.size = undefined;
         this.value = undefined;
@@ -91,12 +99,12 @@ export class TableRowComponent {
         }
     }
     render() {
-        return (h(Host, { key: '5c12f0e1d67ff6dac1223d8973e376c2773b3735', class: {
+        return (h(Host, { key: '158ea38cbc14a9fd14a87beaa20cc6610d348eef', class: {
                 'b2b-table-row': true,
                 ['b2b-table-row--colspan']: this.size === TableSizes.COLSPAN,
                 ['b2b-table-row--highlight']: this.highlight,
                 [`b2b-table-row--color-${this.getRowColor()}`]: true,
-            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: '2aaf7ec2f09c1c9a5a37dded002408bff7c1754a' })));
+            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: '0f4afc0529929c2d308f76ce91a0353af7532607' })));
     }
     static get is() { return "b2b-table-row"; }
     static get encapsulation() { return "shadow"; }
@@ -154,32 +162,6 @@ export class TableRowComponent {
                 "reflect": false,
                 "defaultValue": "'default'"
             },
-            "accordionType": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "TableAccordionRowTypes",
-                    "resolved": "\"child\" | \"header\" | \"parent\"",
-                    "references": {
-                        "TableAccordionRowTypes": {
-                            "location": "import",
-                            "path": "../../../utils/types/table.types",
-                            "id": "src/utils/types/table.types.ts::TableAccordionRowTypes"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Determined by the parent rowgroup for accordion rowgroups."
-                        }],
-                    "text": ""
-                },
-                "attribute": "accordion-type",
-                "reflect": false
-            },
             "selectable": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,11 +1,11 @@
 import { h, Host, } from "@stencil/core";
-import { TableAccordionRowTypes, TableRowgroupTypes, TableSizes, } from "../../../utils/types/table.types";
-import { updateCheckboxState, getFirstRow, getAllRows, getRemainingRows, } from "../utils";
+import { TableRowgroupTypes, TableSizes, } from "../../../utils/types/table.types";
+import { updateCheckboxState, getFirstRow, getAllRows, getRemainingRows, isFirstRow, } from "../utils";
 export class TableRowgroupComponent {
     constructor() {
         this.toggleSelectAll = (event, children) => {
             this.toggleList(children, event);
-            const rows = children.filter(child => child.accordionType !== TableAccordionRowTypes.PARENT);
+            const rows = children.filter(child => !isFirstRow(child));
             this.selectedValues = [...rows]
                 .filter(child => child.checked)
                 .map(child => child.value);
@@ -13,20 +13,6 @@ export class TableRowgroupComponent {
         this.toggleList = (list, event) => {
             list.forEach(child => ((child.checked = event.detail.checked), (child.indeterminate = false)));
         };
-        this.addAccordionControlColumn = () => {
-            const firstRow = getFirstRow(this.host);
-            if (this.type === TableRowgroupTypes.HEADER) {
-                firstRow && (firstRow.accordionType = TableAccordionRowTypes.HEADER);
-            }
-            else {
-                firstRow && (firstRow.accordionType = TableAccordionRowTypes.PARENT);
-            }
-            const children = getRemainingRows(this.host);
-            children &&
-                children.forEach(child => {
-                    child.accordionType = TableAccordionRowTypes.CHILD;
-                });
-        };
         this.addCheckboxColumn = () => {
             const children = getAllRows(this.host);
             children.forEach(child => (child.selectable = true));
@@ -84,8 +70,7 @@ export class TableRowgroupComponent {
         const target = event.target;
         const table = this.host.closest('b2b-table');
         const parentValue = (_a = getFirstRow(this.host).value) !== null && _a !== void 0 ? _a : 'header';
-        if (this.accordion &&
-            target.accordionType === TableAccordionRowTypes.PARENT) {
+        if (this.accordion && isFirstRow(target) && parentValue != 'header') {
             const children = getRemainingRows(this.host);
             this.toggleSelectAll(event, children);
         }
@@ -118,7 +103,6 @@ export class TableRowgroupComponent {
     }
     componentWillLoad() {
         if (this.accordion) {
-            this.addAccordionControlColumn();
             this.toggleInitialVisibility();
         }
         if (this.selectable) {
@@ -129,11 +113,11 @@ export class TableRowgroupComponent {
         this.makeHeaderRowNotSelectable();
     }
     render() {
-        return (h(Host, { key: '79e8f3929f142b1d0f063e38c1b3a0295fe5c9d2', class: {
+        return (h(Host, { key: 'b32971c633a27af352651656743e5788f08dbc70', class: {
                 ['b2b-table-rowgroup__' + this.type]: true,
                 'b2b-table-rowgroup--fixed': this.fixed,
                 'b2b-table-rowgroup--colspan': this.size === TableSizes.COLSPAN,
-            }, role: "rowgroup" }, h("slot", { key: 'cbd36b06a0911c2e0309e65aaaa31c83396dd6b4' })));
+            }, role: "rowgroup" }, h("slot", { key: '53e1830d7834f3330a2a74f94d0ebea102fc5d5d' })));
     }
     static get is() { return "b2b-table-rowgroup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 12:23:19 GMT
+ * Generated on Thu, 12 Dec 2024 07:14:23 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -200,15 +200,15 @@ describe('B2B-Table', () => {
         page = await newE2EPage();
         await page.setContent(tableWithAccordion);
         const firstRow = await page.find('#test-parent');
-        const type = await firstRow.getProperty('accordionType');
-        expect(type).toEqualText('parent');
+        const arrowCell = await firstRow.find('b2b-table-row__accordion-icon');
+        expect(arrowCell).toBeDefined();
     });
     it('should render all rows as accordion children when they are in the same rowgroup of type body in which accordion is true', async () => {
         page = await newE2EPage();
         await page.setContent(tableWithAccordion);
-        const firstRow = await page.find('#test-child');
-        const type = await firstRow.getProperty('accordionType');
-        expect(type).toEqualText('child');
+        const childRow = await page.find('#test-child');
+        const controlCell = await childRow.find('.b2b-table-row__control-cell--accordion');
+        expect(controlCell).toBeDefined();
     });
     it('should add an extra column for controls if accordion is true on a rowgroup', async () => {
         page = await newE2EPage();

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

@@ -30,3 +30,8 @@ export function getFirstRow(hostEl) {
         return firstRow;
     }
 }
+export function isFirstRow(el) {
+    // attr is nullable so
+    // eslint-disable-next-line @stencil-community/strict-boolean-conditions
+    return el.previousElementSibling ? false : true;
+}