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

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

@@ -0,0 +1,370 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Table', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+      <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>Title 2</b2b-table-header>
+            <b2b-table-header sort-direction="descending" sort-id='title3'>Title 3</b2b-table-header>
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type='body'>
+          <b2b-table-row>
+            <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+            <b2b-table-cell>data 2a</b2b-table-cell>
+            <b2b-table-cell>data 3a</b2b-table-cell>
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+      </b2b-table>
+    `);
+  });
+  const tableWithAccordion = `
+    <b2b-table size="expand">
+      <b2b-table-rowgroup type="header" accordion>
+        <b2b-table-row id="test-header">
+          <b2b-table-header>Title 1</b2b-table-header>
+          <b2b-table-header>Title 2</b2b-table-header>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion>
+        <b2b-table-row id="test-parent">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row id="test-child">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+    </b2b-table>`;
+  const tableWithSelection = `
+    <b2b-table size="expand">
+      <b2b-table-rowgroup type="header" accordion selectable>
+        <b2b-table-row id="test-header">
+          <b2b-table-header>Title 1</b2b-table-header>
+          <b2b-table-header>Title 2</b2b-table-header>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion selectable opened>
+        <b2b-table-row id="test-parent" value="peaches">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row id="test-child" value="cherries">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row id="second-child" value="plums">
+        <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+        <b2b-table-cell>data 2a</b2b-table-cell>
+      </b2b-table-row>
+      </b2b-table-rowgroup>
+    </b2b-table>`;
+  it('should render the table component', async () => {
+    const element = await page.find('b2b-table');
+    expect(element).not.toBeNull();
+  });
+  it('should set cell sizes according to table size', async () => {
+    const cells = await page.findAll('b2b-table-cell');
+    cells.map(cell => {
+      expect(cell.getAttribute('size')).toBe('equal');
+    });
+  });
+  it('should set headers to fixed only if table is scrollable', async () => {
+    const cells = await page.findAll('b2b-table-header');
+    cells.map(cell => {
+      expect(cell.getAttribute('fixed')).not.toBe('true');
+    });
+  });
+  it('should set headers to fixed if table is scrollable', async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+      <b2b-scrollable-container>
+        <b2b-table size='equal'>
+          <b2b-table-rowgroup type='header'>
+            <b2b-table-row>
+              <b2b-table-header>Title 1</b2b-table-header>
+              <b2b-table-header>Title 2</b2b-table-header>
+            </b2b-table-row>
+        </b2b-table>
+      </b2b-scrollable-container>
+    `);
+    const cells = await page.findAll('b2b-table-header');
+    cells.map(cell => {
+      expect(cell.getAttribute('fixed')).toBe('true');
+    });
+  });
+  it('should set header rows not highlightable', async () => {
+    const headerRow = await page.find('b2b-table-rowgroup[type=header] b2b-table-row');
+    const isHeaderRowSelectable = await headerRow.getProperty('highlight');
+    expect(isHeaderRowSelectable).toBe(false);
+    const dataRow = await page.find('b2b-table-rowgroup[type=body] b2b-table-row');
+    const isDataRowSelectable = await dataRow.getProperty('highlight');
+    expect(isDataRowSelectable).toBe(true);
+  });
+  it('should show a descending sorting button when a column header is hovered or focused', async () => {
+    const headerCol = await page.find({ text: 'Title 1' });
+    const sortArrow = await page.find('b2b-table-header >>> svg');
+    const ariaState = await headerCol.getAttribute('aria-sort');
+    expect(await sortArrow.isVisible()).toBe(false);
+    expect(ariaState).toEqualText('other');
+    await headerCol.hover();
+    await page.waitForChanges();
+    expect(await sortArrow.isVisible()).toBe(true);
+  });
+  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');
+    await headerCol.click();
+    const ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('ascending');
+    expect(b2bChange).toHaveReceivedEvent();
+  });
+  it('should emit the sort direction when a column header is focused and enter is pressed', async () => {
+    const headerCol = await page.find({ text: 'Title 1' });
+    const b2bChange = await page.spyOnEvent('b2b-change');
+    let ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('other');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('ascending');
+    expect(b2bChange).toHaveReceivedEvent();
+  });
+  it('should un-sort siblings when sorting any column', async () => {
+    const headerCol = await page.find({ text: 'Title 3' });
+    let ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('descending');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('other');
+  });
+  it('should not change sorting of siblings if they do not implement sorting', async () => {
+    const headerCol = await page.find({ text: 'Title 2' });
+    let ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('other');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('other');
+    const sortDirection = await headerCol.getAttribute('sort-direction');
+    expect(sortDirection).toBeNull();
+  });
+  it('Table should emit an event with the sorting column and direction', async () => {
+    const headerCol = await page.find({ text: 'Title 1' });
+    const b2bChange = await page.spyOnEvent('b2b-sort-change');
+    await headerCol.click();
+    expect(b2bChange).toHaveReceivedEvent();
+    expect(b2bChange).toHaveReceivedEventDetail({
+      sortedColumn: 'Title 1',
+      sortDirection: 'ascending',
+    });
+  });
+  it('Table sort-change event should emit header sort-id if provided', async () => {
+    const headerCol = await page.find({ text: 'Title 3' });
+    const b2bChange = await page.spyOnEvent('b2b-sort-change');
+    await headerCol.click();
+    expect(b2bChange).toHaveReceivedEvent();
+    expect(b2bChange).toHaveReceivedEventDetail({
+      sortedColumn: 'title3',
+      sortDirection: 'ascending',
+    });
+  });
+  it('should render the first row of a rowgroup as an accordion parent if accordion is true on a rowgroup and the rowgroup type is body', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithAccordion);
+    const firstRow = await page.find('#test-parent');
+    const type = await firstRow.getProperty('accordionType');
+    expect(type).toEqualText('parent');
+  });
+  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');
+  });
+  it('should add an extra column for controls if accordion is true on a rowgroup', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithAccordion);
+    const header = await page.find('#test-header >>> b2b-table-header');
+    expect(header).toEqualText('');
+    const parent = await page.find('#test-parent >>> b2b-table-cell');
+    const parentControl = await parent.find('button');
+    expect(parentControl).toBeDefined;
+  });
+  it('should show children accordion rows if the arrow is clicked in a parent accordion row', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithAccordion);
+    const parent = await page.find('#test-parent >>> b2b-table-cell');
+    const parentControl = await parent.find('button');
+    const child = await page.find('#test-child');
+    const styleBefore = await child.getComputedStyle();
+    expect(styleBefore['visibility']).toEqual('collapse');
+    await parentControl.click();
+    await page.waitForChanges();
+    const styleAfter = await child.getComputedStyle();
+    expect(styleAfter['visibility']).toEqual('visible');
+  });
+  it('should show children accordion rows if the arrow is focused and enter is pressed in a parent accordion row', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithAccordion);
+    const child = await page.find('#test-child');
+    const styleBefore = await child.getComputedStyle();
+    expect(styleBefore['visibility']).toEqual('collapse');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    const styleAfter = await child.getComputedStyle();
+    expect(styleAfter['visibility']).toEqual('visible');
+  });
+  it('should hide children accordion rows if the arrow is pressed again', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithAccordion);
+    const parent = await page.find('#test-parent >>> b2b-table-cell');
+    const parentControl = await parent.find('button');
+    const child = await page.find('#test-child');
+    const styleBefore = await child.getComputedStyle();
+    expect(styleBefore['visibility']).toEqual('collapse');
+    await parentControl.click();
+    await page.waitForChanges();
+    await parentControl.click();
+    await page.waitForChanges();
+    const styleAfter = await child.getComputedStyle();
+    expect(styleAfter['visibility']).toEqual('collapse');
+  });
+  it('should render accordion opened if prop set to true', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-table size="expand">
+      <b2b-table-rowgroup type="header" accordion>
+        <b2b-table-row id="test-header">
+          <b2b-table-header>Title 1</b2b-table-header>
+          <b2b-table-header>Title 2</b2b-table-header>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion opened>
+        <b2b-table-row id="test-parent">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row id="test-child">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+    </b2b-table>`);
+    const child = await page.find('#test-child');
+    const toggleIconClass = await page.evaluate(() => {
+      const parentRow = document.querySelector('#test-parent');
+      const toggleIcon = parentRow.shadowRoot.querySelector('b2b-table-cell button');
+      return toggleIcon.className;
+    });
+    expect(toggleIconClass).toContain('b2b-table-row__accordion-icon--open');
+    const childInitialStyle = await child.getComputedStyle();
+    expect(childInitialStyle['visibility']).toEqual('visible');
+  });
+  it('should render a checkbox column when selectable is set to true on a rowgroup', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const headerCheckbox = await page.find('#test-header >>> b2b-checkbox');
+    expect(headerCheckbox).not.toBeNull();
+    const rowCheckbox = await page.find('#test-parent >>> b2b-checkbox');
+    expect(rowCheckbox).not.toBeNull();
+  });
+  it('should toggle all rows when the header row is clicked', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const headerCheckbox = await page.find('#test-header >>> b2b-checkbox');
+    await headerCheckbox.click();
+    const firstRow = await page.find('#test-parent');
+    const secondRow = await page.find('#test-child');
+    const thirdRow = await page.find('#second-child');
+    expect(await firstRow.getProperty('checked')).toBe(true);
+    expect(await secondRow.getProperty('checked')).toBe(true);
+    expect(await thirdRow.getProperty('checked')).toBe(true);
+    await headerCheckbox.click();
+    expect(await firstRow.getProperty('checked')).toBe(false);
+    expect(await secondRow.getProperty('checked')).toBe(false);
+    expect(await thirdRow.getProperty('checked')).toBe(false);
+  });
+  it('should toggle all children rows of a parent accordion row if the parent is selected', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const firstRow = await page.find('#test-parent >>> b2b-checkbox');
+    expect(firstRow).not.toBeNull();
+    await firstRow.click();
+    const secondRow = await page.find('#test-child');
+    expect(await secondRow.getProperty('checked')).toBe(true);
+    await firstRow.click();
+    expect(await secondRow.getProperty('checked')).toBe(false);
+  });
+  it('should display an indeterminate checkbox if some rows are checked', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const checkbox = await page.find('#test-child >>> b2b-checkbox');
+    expect(checkbox).not.toBeNull();
+    await checkbox.click();
+    const secondRow = await page.find('#test-child');
+    expect(await secondRow.getProperty('checked')).toBe(true);
+    const header = await page.find('#test-header');
+    expect(await header.getProperty('indeterminate')).toBe(true);
+  });
+  it('should display an indeterminate checkbox in the parent row of an accordion if not all children are checked', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const secondRow = await page.find('#test-child >>> b2b-checkbox');
+    await secondRow.click();
+    expect(await secondRow.getProperty('checked')).toBe(true);
+    const firstRow = await page.find('#test-parent >>> b2b-checkbox');
+    expect(await firstRow.getProperty('indeterminate')).toBe(true);
+  });
+  it('should emit the currently selected values when a row is selected or unselected', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const selectSpy = await page.spyOnEvent('b2b-row-selected');
+    const secondRow = await page.find('#test-child >>> b2b-checkbox');
+    await secondRow.click();
+    await page.waitForChanges();
+    expect(selectSpy).toHaveReceivedEvent();
+    expect(selectSpy).toHaveReceivedEventDetail({
+      checked: true,
+      value: 'cherries',
+    });
+    await secondRow.click();
+    await page.waitForChanges();
+    expect(selectSpy).toHaveReceivedEvent();
+    expect(selectSpy).toHaveReceivedEventDetail({
+      checked: false,
+      value: 'cherries',
+    });
+  });
+  it('should emit the currently selected values in an accordion when a row of that accordion is selected or unselected', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const selectSpy = await page.spyOnEvent('b2b-group-selected');
+    const secondRow = await page.find('#test-parent >>> b2b-checkbox');
+    await secondRow.click();
+    await page.waitForChanges();
+    expect(selectSpy).toHaveReceivedEvent();
+    expect(selectSpy).toHaveReceivedEventDetail({
+      group: 'peaches',
+      values: ['cherries', 'plums'],
+    });
+    const thirdRow = await page.find('#second-child >>> b2b-checkbox');
+    await thirdRow.click();
+    await page.waitForChanges();
+    expect(selectSpy).toHaveReceivedEvent();
+    expect(selectSpy).toHaveReceivedEventDetail({
+      group: 'peaches',
+      values: ['cherries'],
+    });
+  });
+});

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

@@ -4,6 +4,14 @@ export class TableComponent {
   constructor() {
     this.size = TableSizes.EXPAND;
   }
+  onColumnSelected(event) {
+    if (event.target.nodeName === 'B2B-TABLE-HEADER') {
+      this.b2bSortChange.emit({
+        sortedColumn: event.target.sortId || event.target.textContent.trim(),
+        sortDirection: event.detail,
+      });
+    }
+  }
   setCellSize() {
     const allCells = this.host.querySelectorAll('b2b-table-cell');
     [...allCells].map(cell => cell.setAttribute('size', this.size));
@@ -30,14 +38,6 @@ export class TableComponent {
       console.log(this.host);
     }
   }
-  onColumnSelected(event) {
-    if (event.target.nodeName === 'B2B-TABLE-HEADER') {
-      this.b2bSortChange.emit({
-        sortedColumn: event.target.sortId || event.target.textContent.trim(),
-        sortDirection: event.detail,
-      });
-    }
-  }
   render() {
     return (h(Host, { class: {
         ['b2b-table--' + this.size]: true,

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

@@ -191,11 +191,11 @@ const TemplateSorting = ({ data, firstColumnWidth, size, textWrap, align, highli
 export const story110Sorting = TemplateSorting.bind({});
 story110Sorting.args = Object.assign(Object.assign({}, defaultArgs), { withDividers: true, size: 'expand', data: userSampleData });
 story110Sorting.storyName = 'Table with Sorting';
-const TemplateAccordion = ({ data, firstColumnWidth, size, textWrap, align, highlight, withDividers, color, }) => {
+const TemplateAccordion = ({ data, firstColumnWidth, size, textWrap, align, highlight, withDividers, color, selectable, }) => {
   return html `
     <div>
       <b2b-table size="${size}">
-        <b2b-table-rowgroup type="header" accordion>
+        <b2b-table-rowgroup type="header" accordion selectable="${selectable}">
           <b2b-table-row>
             ${data.columns.map((columnName, index) => {
     return html ` <b2b-table-header
@@ -206,11 +206,12 @@ const TemplateAccordion = ({ data, firstColumnWidth, size, textWrap, align, high
   })}
           </b2b-table-row>
         </b2b-table-rowgroup>
-        <b2b-table-rowgroup type="body" accordion>
+        <b2b-table-rowgroup type="body" accordion selectable="${selectable}">
           ${data.rows.map((row, index) => {
     return html `<b2b-table-row
               highlight="${highlight}"
-              color=${index === 0 ? color : 'default'}>
+              color=${index === 0 ? color : 'default'}
+              value="${row[0]}">
               ${row.map(data => html `<b2b-table-cell
                     ?divider=${withDividers}
                     align="${align}"
@@ -220,11 +221,16 @@ const TemplateAccordion = ({ data, firstColumnWidth, size, textWrap, align, high
             </b2b-table-row>`;
   })}
         </b2b-table-rowgroup>
-        <b2b-table-rowgroup type="body" accordion opened>
+        <b2b-table-rowgroup
+          type="body"
+          accordion
+          opened
+          selectable="${selectable}">
           ${data.rows.map((row, index) => {
     return html `<b2b-table-row
               highlight="${highlight}"
-              color=${index === 0 ? color : 'default'}>
+              color=${index === 0 ? color : 'default'}
+              value="${row[0]}">
               ${row.map(data => html `<b2b-table-cell
                     ?divider=${withDividers}
                     align="${align}"
@@ -239,8 +245,11 @@ const TemplateAccordion = ({ data, firstColumnWidth, size, textWrap, align, high
   `;
 };
 export const story120Accordion = TemplateAccordion.bind({});
-story120Accordion.args = Object.assign(Object.assign({}, defaultArgs), { data: sampleData });
+story120Accordion.args = Object.assign(Object.assign({}, defaultArgs), { data: sampleData, selectable: false });
 story120Accordion.storyName = 'Accordion Table';
+export const story130Selectable = TemplateAccordion.bind({});
+story130Selectable.args = Object.assign(Object.assign({}, defaultArgs), { data: sampleData, selectable: true });
+story130Selectable.storyName = 'Selectable Table';
 const tableArgs = getArgTypes('b2b-table');
 const rowGroupArgs = getArgTypes('b2b-table-rowgroup');
 const rowArgs = getArgTypes('b2b-table-row');

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

@@ -0,0 +1,18 @@
+export function updateCheckboxState(rows, header) {
+  let someSelected = rows.some(item => item.checked === true);
+  let everySelected = rows.every(item => item.checked === true);
+  header.checked = everySelected;
+  header.indeterminate = someSelected && !everySelected;
+}
+export function getAllRows(hostEl) {
+  return Array.from(hostEl.querySelectorAll('b2b-table-row'));
+}
+export function getRemainingRows(hostEl) {
+  return Array.from(hostEl.querySelectorAll('b2b-table-row')).slice(1);
+}
+export function getFirstRow(hostEl) {
+  const firstRow = hostEl.querySelector('b2b-table-row');
+  if (firstRow != null) {
+    return firstRow;
+  }
+}

package/dist/collection/components/textarea/textarea.css

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

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

@@ -0,0 +1,91 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Textarea', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-textarea label="Test"></b2b-textarea>`);
+  });
+  it('should render the textarea component', async () => {
+    const element = await page.find('b2b-textarea');
+    expect(element).not.toBeNull();
+  });
+  it('should render the label', async () => {
+    const label = await page.find({ text: 'Test' });
+    expect(label).not.toBeNull();
+  });
+  it('should emit when the user types', async () => {
+    const element = await page.find('b2b-textarea >>> textarea');
+    const inputSpy = await page.spyOnEvent('b2b-input');
+    await element.type('ABC');
+    page.waitForChanges();
+    expect(inputSpy).toHaveReceivedEvent();
+  });
+  it('should not allow typing when disabled', async () => {
+    const textarea = `<b2b-textarea label="Test" disabled></b2b-textarea>`;
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const element = await page.find('b2b-textarea >>> textarea');
+    const inputSpy = await page.spyOnEvent('b2b-input');
+    await element.type('ABC');
+    expect(inputSpy).not.toHaveReceivedEvent();
+  });
+  it('should autofocus', async () => {
+    const textarea = `<b2b-textarea label="Test" autofocus></b2b-textarea>`;
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const element = await page.find('b2b-textarea');
+    expect(element).toHaveAttribute('autofocus');
+  });
+  it('should display a hint text', async () => {
+    const textarea = `<b2b-textarea label="Test" hint="A test hint"></b2b-textarea>`;
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const hint = await page.find('b2b-textarea >>> span');
+    expect(hint).toEqualText('A test hint');
+  });
+  it('should display an error text when the textarea is invalid', async () => {
+    const textarea = `<b2b-textarea label="Test" error="A test error" invalid></b2b-textarea>`;
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const error = await page.find('b2b-textarea >>> span');
+    expect(error).toEqualText('A test error');
+  });
+  it('should not display a hint when an error message is present and the textarea is invalid', async () => {
+    const textarea = `<b2b-textarea label="Test" error="A test error" hint="A test hint" invalid></b2b-textarea>`;
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const error = await page.find('b2b-textarea >>> span');
+    expect(error).toEqualText('A test error');
+  });
+  it('should not display an error if the textarea is invalid and disabled', async () => {
+    const textarea = `<b2b-textarea label="Test" error="A test error" hint="A test hint" invalid disabled></b2b-textarea>`;
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const hint = await page.find('b2b-textarea >>> span');
+    expect(hint).toEqualText('A test hint');
+  });
+  it('should accept a maximum length', async () => {
+    const textarea = `<b2b-textarea label="Test" max-length="10"></b2b-textarea>`;
+    const input = 'An input with 27 characters';
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const element = await page.find('b2b-textarea >>> textarea');
+    await element.type(input);
+    const value = await element.getProperty('value');
+    expect(value).toEqual('An input w');
+  });
+  it('should support form building from the shadow DOM', async () => {
+    const form = `<form>
+        <b2b-textarea label="Test"></textarea>
+        <button type="submit">Submit</button>
+    </form>`;
+    page = await newE2EPage();
+    await page.setContent(form);
+    const handleFormData = jest.fn();
+    const formdataEventSpy = await page.spyOnEvent('formdata', handleFormData);
+    await page.evaluate(() => {
+      document.querySelector('button').click();
+    });
+    expect(formdataEventSpy).toHaveReceivedEvent();
+  });
+});

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -222,7 +222,7 @@
   position: relative;
   margin: 0;
 }
-:host .b2b-toggle-button-input {
+:host .b2b-toggle-button__input {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -230,7 +230,7 @@
   position: absolute !important;
   width: 1px;
 }
-:host .b2b-toggle-button-label {
+:host .b2b-toggle-button__label {
   display: inline-block;
   position: relative;
   box-sizing: border-box;
@@ -246,23 +246,23 @@
   text-decoration: none;
   padding: 0 var(--b2b-size-20);
 }
-:host .b2b-toggle-button-label:hover {
+:host .b2b-toggle-button__label:hover {
   background-color: var(--b2b-color-grey-200);
 }
-:host .b2b-toggle-button-input:focus + label {
+:host .b2b-toggle-button__input:focus + label {
   outline: 2px solid -webkit-focus-ring-color;
   z-index: 1;
   transition: none;
 }
-:host .b2b-toggle-button-input--disabled:focus + label {
+:host .b2b-toggle-button__input--disabled:focus + label {
   outline: none;
 }
-:host .b2b-toggle-button-label--checked, :host .b2b-toggle-button-label--checked:hover {
+:host .b2b-toggle-button__label--checked, :host .b2b-toggle-button__label--checked:hover {
   color: var(--b2b-color-white-100);
   background-color: var(--b2b-color-black-50);
   border-color: var(--b2b-color-black-50);
 }
-:host .b2b-toggle-button-label--disabled, :host .b2b-toggle-button-label--disabled:hover {
+:host .b2b-toggle-button__label--disabled, :host .b2b-toggle-button__label--disabled:hover {
   pointer-events: none;
   color: var(--b2b-color-grey-250);
   border-color: var(--b2b-color-grey-100);