@otto-de/b2b-core-components 1.6.0 → 1.7.0

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/rounded-icon/rounded-icon.stories.js

@@ -1,6 +1,5 @@
 import { getArgTypes } from '../../docs/config/utils';
 import { html } from 'lit-html';
-import RoundedIconDocs from './rounded-icon.docs.mdx';
 const TemplateIcon = ({ color, contentColor, iconName }) => {
   return html `<div>
     <b2b-rounded-icon color="${color}" content-color="${contentColor}">
@@ -37,8 +36,5 @@ export default {
   viewmode: 'docs',
   parameters: {
     controls: { expanded: true },
-    docs: {
-      page: RoundedIconDocs,
-    },
   },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/scrollable-container/scrollable-container.stories.js

@@ -1,6 +1,5 @@
 import { getArgTypes } from '../../docs/config/utils';
 import { html } from 'lit-html';
-import componentDocs from './scrollable-container.docs.mdx';
 const Template = ({ testWidth, testHeight, testWhiteSpace }) => {
   return html `
     <b2b-scrollable-container
@@ -53,9 +52,6 @@ export default {
   viewmode: 'docs',
   parameters: {
     controls: { expanded: true },
-    docs: {
-      page: componentDocs,
-    },
     backgrounds: {
       default: 'docsBackground',
       values: [{ name: 'docsBackground', value: '#fff' }],

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

@@ -1,8 +1,7 @@
 import { getArgTypes } from '../../docs/config/utils';
 import { html } from 'lit-html';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import dedent from 'ts-dedent';
-import searchDocs from './search.docs.mdx';
 import fruits from './stories.data.json';
 const Template = ({ placeholder, optionsList, disabled }) => {
   const [_, updateArgs] = useArgs();
@@ -89,11 +88,6 @@ const searchArgs = getArgTypes('b2b-search', controls);
 searchArgs.optionsList = Object.assign(Object.assign({}, searchArgs.optionsList), { control: false });
 export default {
   title: 'Components/Form/Search',
-  argTypes: Object.assign({}, searchArgs),
+  argTypes: Object.assign(Object.assign({}, searchArgs), { optionsList: { table: { disable: true } }, value: { table: { disable: true } } }),
   viewmode: 'docs',
-  parameters: {
-    docs: {
-      page: searchDocs,
-    },
-  },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,5 +1,4 @@
 import { html } from 'lit-html';
-import docs from './separator.docs.mdx';
 import { getArgTypes } from '../../docs/config/utils';
 const Template = ({ alignment }) => {
   const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse massa urna, accumsan id viverra et, mollis sit amet sem.`;
@@ -34,9 +33,4 @@ export default {
   title: 'Components/Utilities/Separator',
   argTypes: argTypes,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: docs,
-    },
-  },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,5 +1,4 @@
 import { getArgTypes } from '../../docs/config/utils';
-import spinnerDocs from './spinner.docs.mdx';
 import { html } from 'lit-html';
 const Template = ({ size, color }) => {
   return html ` <b2b-spinner size="${size}" color="${color}"></b2b-spinner>`;
@@ -34,9 +33,4 @@ export default {
   title: 'Components/Status & Feedback/Spinner',
   argTypes: spinnerArgs,
   viewmode: 'docs',
-  parameters: {
-    docs: {
-      page: spinnerDocs,
-    },
-  },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -89,6 +89,7 @@ describe('B2B Tab Group', () => {
     await page.waitForChanges();
     const tabs = await page.findAll('b2b-tab');
     expect(await tabs[0].getProperty('selected')).toBe(true);
+    expect(await tabs[0].getAttribute('aria-controls')).not.toBeDefined;
     await page.keyboard.press('ArrowRight');
     await page.waitForChanges();
     await tabs[1].click();

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

@@ -115,7 +115,9 @@ export class B2bTabGroupComponent {
       customElements.whenDefined('b2b-tab'),
       customElements.whenDefined('b2b-tab-panel'),
     ]).then(() => {
-      this.linkPanels();
+      if (!this.useRouter) {
+        this.linkPanels();
+      }
     });
   }
   render() {

package/dist/collection/components/tab-group/tab-group.stories.js

@@ -1,6 +1,5 @@
 import { getArgTypes } from '../../docs/config/utils';
 import { html } from 'lit-html';
-import tabGroupDocs from './tab-group.docs.mdx';
 const Template = ({ useRouter }) => {
   return html ` <b2b-tab-group use-router="${useRouter}">
     <b2b-tab slot="tab">First Tab</b2b-tab>
@@ -50,9 +49,4 @@ export default {
   title: 'Components/Interaction/Tab Group',
   argTypes: tabGroupArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: tabGroupDocs,
-    },
-  },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,41 +1,23 @@
-import { html } from 'lit-html';
 export const sampleData = {
   columns: ['Name', 'Column 1', 'Column 2', 'Column 3'],
   rows: [
-    [
-      'Name A',
-      'Content 1',
-      'Content 1',
-      html ` <b2b-button size="50">Action</b2b-button>`,
-    ],
-    [
-      'Name B',
-      'Content 2',
-      'Content 2',
-      html ` <b2b-button size="50">Action</b2b-button>`,
-    ],
-    [
-      'Name C',
-      'Content 3',
-      'Content 3',
-      html ` <b2b-button size="50">Action</b2b-button>`,
-    ],
+    ['Name A', 'Content 1', 'Content 1'],
+    ['Name B', 'Content 2', 'Content 2'],
+    ['Name C', 'Content 3', 'Content 3'],
     [
       'Name D',
       'Content 4',
       'Very, very, long, long data text that wraps over to next line',
-      html ` <b2b-button size="50">Action</b2b-button>`,
     ],
   ],
 };
 export const smallSampleData = {
   columns: ['Column 1', 'Column 2', 'Column 3'],
   rows: [
-    ['Name A', 'Content 1', html ` <b2b-button size="50">Action</b2b-button>`],
+    ['Name A', 'Content 1'],
     [
       'Name D',
       'Very long data text that wraps over to next line, Very long data text that wraps over to next line',
-      html ` <b2b-button size="50">Action</b2b-button>`,
     ],
   ],
 };
@@ -55,7 +37,6 @@ export const longSampleData = {
       'Name A',
       'Content 1',
       'Content 1',
-      html ` <b2b-button>Action</b2b-button>`,
       'Content 1',
       'Content 1',
       'Content 1',
@@ -65,7 +46,6 @@ export const longSampleData = {
       'Name B',
       'Content 2',
       'Content 2',
-      html ` <b2b-button>Action</b2b-button>`,
       'Content 2',
       'Content 2',
       'Content 2',
@@ -75,7 +55,6 @@ export const longSampleData = {
       'Name C',
       'Content 3',
       'Content 3',
-      html ` <b2b-button>Action</b2b-button>`,
       'Content 3',
       'Content 3',
       'Content 3',
@@ -85,7 +64,6 @@ export const longSampleData = {
       'Name D',
       'Content 4',
       'Very, very, long, long data text that wraps over to next line',
-      html ` <b2b-button>Action</b2b-button>`,
       'Content 4',
       'Content 4',
       'Content 4',

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 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 Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -224,6 +224,7 @@
   font-weight: bold;
   border-top: 1px solid var(--b2b-color-grey-200);
   border-bottom: 2px solid var(--b2b-color-grey-300);
+  vertical-align: middle;
 }
 :host .b2b-table-header__heading {
   cursor: pointer;
@@ -232,6 +233,16 @@
   height: var(--b2b-size-icon-100);
   line-height: var(--b2b-size-icon-100);
 }
+:host .b2b-table-header__heading--left {
+  justify-content: start;
+}
+:host .b2b-table-header__heading--right {
+  justify-content: end;
+  flex-direction: row-reverse;
+}
+:host .b2b-table-header__heading--center {
+  justify-content: center;
+}
 :host .b2b-table-header__heading:hover, :host .b2b-table-header__heading:focus-visible {
   outline: none;
 }
@@ -249,6 +260,12 @@
   transform: rotate(180deg);
   transition: transform 0.4s ease;
 }
+:host .b2b-table-header__heading:hover .b2b-table-header__sort--left, :host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--left {
+  float: right;
+}
+:host .b2b-table-header__heading:hover .b2b-table-header__sort--right, :host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--right {
+  float: right;
+}
 :host .b2b-table-header__heading.b2b-table-header__sort--active .b2b-table-header__sort,
 :host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort {
   fill: var(--b2b-color-black-100);
@@ -257,8 +274,8 @@
 :host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort--descending {
   transform: rotate(180deg);
 }
-:host .b2b-table-header__heading.b2b-table-header__sort--active .b2b-table-header__sort-ascending,
-:host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort-ascending {
+:host .b2b-table-header__heading.b2b-table-header__sort--active .b2b-table-header__sort--ascending,
+:host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort--ascending {
   transform: initial;
 }
 :host .b2b-table-header__sort {
@@ -274,6 +291,12 @@
 :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;

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

@@ -1,8 +1,7 @@
 import { h, Host, } from '@stencil/core';
-import { TableSortDirections } from '../../../utils/types/table.types';
+import { ContentAlignment, TableSortDirections, SortIconAlignment, } from '../../../utils/types/table.types';
 export class TableHeaderComponent {
   constructor() {
-    this.sortIcon = (h("svg", { viewBox: "0 0 24 24", height: "24px", width: "24px", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M19.1831 8.47552L12.8541 2.14703C12.8079 2.10065 12.7524 2.06384 12.6909 2.03839C12.5687 1.98785 12.4313 1.98785 12.3091 2.03839C12.2476 2.06384 12.1921 2.10065 12.1459 2.14703L5.81689 8.47552C5.62158 8.67084 5.62158 8.98724 5.81689 9.18256C6.01221 9.37787 6.32861 9.37787 6.52393 9.18256L12 3.70691V21.4999C12 21.7763 12.2236 21.9999 12.5 21.9999C12.7764 21.9999 13 21.7763 13 21.4999V3.70691L18.4761 9.18256C18.5737 9.28021 18.7017 9.32904 18.8296 9.32904C18.9575 9.32904 19.0854 9.28021 19.1831 9.18256C19.3784 8.98724 19.3784 8.67084 19.1831 8.47552Z" })));
     this.changeSortDirection = (e) => {
       if ((e.type === 'keydown' && e.key === 'Enter') || e.type === 'click') {
         this.unSortSiblings();
@@ -42,11 +41,26 @@ export class TableHeaderComponent {
     this.fixed = false;
     this.sortDirection = undefined;
     this.sortId = undefined;
+    this.contentAlign = ContentAlignment.LEFT;
     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;
+    }
   }
   render() {
     return (h(Host, { class: {
-        'b2b-table-header': true,
+        [`b2b-table-header--${this.sortDirection && this.iconAlign}`]: true,
         'b2b-table-header--divider': this.divider,
         'b2b-table-header--fixed': this.fixed,
       }, role: "columnheader", "aria-sort": this.sortDirection === 'not-sorted' ||
@@ -54,11 +68,13 @@ export class TableHeaderComponent {
         ? 'other'
         : this.sortDirection }, this.sortDirection !== undefined ? (h("div", { tabIndex: 0, class: {
         'b2b-table-header__heading': true,
+        [`b2b-table-header__heading--${this.contentAlign}`]: true,
         'b2b-table-header__sort--active': this.active,
-      }, onClick: this.changeSortDirection, onKeyDown: this.changeSortDirection, onMouseLeave: this.setInactive, onBlur: this.setInactive }, h("slot", null), h("span", { class: {
+      }, onClick: this.changeSortDirection, onKeyDown: this.changeSortDirection, onMouseLeave: this.setInactive, onBlur: this.setInactive }, h("slot", null), h("svg", { class: {
         'b2b-table-header__sort': true,
         [`b2b-table-header__sort--${this.sortDirection}`]: true,
-      } }, this.sortIcon))) : (h("slot", null))));
+        [`b2b-table-header__sort--${this.iconAlign}`]: true,
+      }, viewBox: "0 0 24 24", height: "24px", width: "24px", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M19.1831 8.47552L12.8541 2.14703C12.8079 2.10065 12.7524 2.06384 12.6909 2.03839C12.5687 1.98785 12.4313 1.98785 12.3091 2.03839C12.2476 2.06384 12.1921 2.10065 12.1459 2.14703L5.81689 8.47552C5.62158 8.67084 5.62158 8.98724 5.81689 9.18256C6.01221 9.37787 6.32861 9.37787 6.52393 9.18256L12 3.70691V21.4999C12 21.7763 12.2236 21.9999 12.5 21.9999C12.7764 21.9999 13 21.7763 13 21.4999V3.70691L18.4761 9.18256C18.5737 9.28021 18.7017 9.32904 18.8296 9.32904C18.9575 9.32904 19.0854 9.28021 19.1831 9.18256C19.3784 8.98724 19.3784 8.67084 19.1831 8.47552Z" })))) : (h("slot", null))));
   }
   static get is() { return "b2b-table-header"; }
   static get encapsulation() { return "shadow"; }
@@ -148,12 +164,36 @@ export class TableHeaderComponent {
         },
         "attribute": "sort-id",
         "reflect": false
+      },
+      "contentAlign": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ContentAlignment",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {
+            "ContentAlignment": {
+              "location": "import",
+              "path": "../../../utils/types/table.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Alignment of the content of the cell, by default is to the left. *"
+        },
+        "attribute": "content-align",
+        "reflect": false,
+        "defaultValue": "ContentAlignment.LEFT"
       }
     };
   }
   static get states() {
     return {
-      "active": {}
+      "active": {},
+      "iconAlign": {}
     };
   }
   static get events() {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -12,16 +12,13 @@ export class TableRowComponent {
       return this.color;
     };
     this.getRowWidth = () => {
-      const accordionIconSize = '24px';
+      const accordionSize = '24px';
       const checkboxSize = '16px';
-      if (Boolean(this.accordionType)) {
-        return accordionIconSize;
-      }
-      else if (Boolean(this.selectable)) {
+      if (Boolean(this.selectable)) {
         return checkboxSize;
       }
-      else if (Boolean(this.accordionType && this.selectable)) {
-        return accordionIconSize + checkboxSize;
+      else if (Boolean(this.accordionType)) {
+        return accordionSize;
       }
       else {
         return;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 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 Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -7,9 +7,9 @@ describe('B2B-Table', () => {
       <b2b-table size='equal'>
         <b2b-table-rowgroup type='header'>
           <b2b-table-row>
-            <b2b-table-header sort-direction="not-sorted">Title 1</b2b-table-header>
+            <b2b-table-header sort-direction="not-sorted" sort-icon-align="left">Title 1</b2b-table-header>
             <b2b-table-header>Title 2</b2b-table-header>
-            <b2b-table-header sort-direction="descending" sort-id='title3'>Title 3</b2b-table-header>
+            <b2b-table-header sort-direction="descending" sort-id='title3' sort-icon-align="right">Title 3</b2b-table-header>
           </b2b-table-row>
         </b2b-table-rowgroup>
         <b2b-table-rowgroup type='body'>
@@ -119,8 +119,12 @@ describe('B2B-Table', () => {
   it('should emit the sort direction when a column header is clicked', async () => {
     const headerCol = await page.find({ text: 'Title 1' });
     const b2bChange = await page.spyOnEvent('b2b-change');
+    const sortArrow = await page.find('b2b-table-header >>> svg');
+    let ariaState = await headerCol.getAttribute('aria-sort');
+    expect(sortArrow).toHaveClass('b2b-table-header__sort--right');
+    expect(ariaState).toEqualText('other');
     await headerCol.click();
-    const ariaState = await headerCol.getAttribute('aria-sort');
+    ariaState = await headerCol.getAttribute('aria-sort');
     expect(ariaState).toEqualText('ascending');
     expect(b2bChange).toHaveReceivedEvent();
   });