@scania/tegel 1.3.1 → 1.3.3-event-types.0

package/dist/collection/components/stepper/stepper.js

@@ -175,7 +175,7 @@ export class TdsStepper {
           "references": {
             "InternalTdsStepperPropChange": {
               "location": "local",
-              "path": "/home/runner/work/tegel/tegel/packages/core/src/components/stepper/stepper.tsx",
+              "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/stepper/stepper.tsx",
               "id": "src/components/stepper/stepper.tsx::InternalTdsStepperPropChange"
             }
           }

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

@@ -255,7 +255,7 @@ export class TdsTable {
           "references": {
             "InternalTdsTablePropChange": {
               "location": "local",
-              "path": "/home/runner/work/tegel/tegel/packages/core/src/components/table/table/table.tsx",
+              "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/table/table/table.tsx",
               "id": "src/components/table/table/table.tsx::InternalTdsTablePropChange"
             }
           }

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

@@ -0,0 +1,24 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/table/table/test/batch/index.html';
+test.describe('tds-table-batch', () => {
+  test('renders batch table correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableComponent = page.getByRole('table');
+    await expect(tableComponent).toHaveCount(1);
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('table has a settings button', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tdsTableToolbarSettings = page.getByRole('img');
+    await expect(tdsTableToolbarSettings).toHaveCount(1);
+    await expect(tdsTableToolbarSettings).toBeVisible();
+  });
+  test('table has a [Download] button', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tdsTableToolbarDownloadButton = page.getByRole('button', { name: /Download/ });
+    await expect(tdsTableToolbarDownloadButton).toHaveCount(1);
+    await expect(tdsTableToolbarDownloadButton).toBeVisible();
+  });
+});

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

@@ -0,0 +1,46 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/table/table/test/default/index.html';
+test.describe('tds-table-default', () => {
+  test('renders default table correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableComponent = page.getByRole('table');
+    await expect(tableComponent).toHaveCount(1);
+    /** Check screenshot diff */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('table has four columns', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableHeaderCells = page.locator('tds-header-cell');
+    await expect(tableHeaderCells).toHaveCount(4);
+  });
+  test('columns are: Truck type, Driver name, Country, Mileage', async ({ page }) => {
+    await page.goto(componentTestPath);
+    /* Expect each header to be visible */
+    await expect(page.getByText('Truck type')).toBeVisible();
+    await expect(page.getByText('Driver name')).toBeVisible();
+    await expect(page.getByText('Country')).toBeVisible();
+    await expect(page.getByText('Mileage')).toBeVisible();
+  });
+  test('Row should contain the correct number of rows with', async ({ page }) => {
+    await page.goto(componentTestPath);
+    /* Expect the number of rows to be correct amount */
+    const tableBodyRows = page.locator('tds-table-body-row');
+    await expect(tableBodyRows).toHaveCount(6);
+  });
+  test('table has the correct text inside each cell', async ({ page }) => {
+    await page.goto(componentTestPath);
+    /* Checks all rows to see that they have the correct amount of tds-body-cells with values provided */
+    const promises = [];
+    for (let i = 1; i <= 8; i++) {
+      const tableBodyCellHasText = page
+        .locator('tds-body-cell')
+        .filter({ hasText: `Test value ${i}` });
+      promises.push(expect(tableBodyCellHasText).toHaveCount(3));
+      promises.push(expect(tableBodyCellHasText.first()).toBeVisible());
+      promises.push(expect(tableBodyCellHasText.nth(1)).toBeVisible());
+      promises.push(expect(tableBodyCellHasText.nth(2)).toBeVisible());
+    }
+    await Promise.all(promises);
+  });
+});

package/dist/collection/components/table/table/test/expandable-row/table.e2e.js

@@ -0,0 +1,64 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/table/table/test/expandable-row/index.html';
+test.describe('tds-table-expandable-row', () => {
+  test('render expandable-row table correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableComponent = page.getByRole('table');
+    await expect(tableComponent).toHaveCount(1);
+    /* check of diff in component screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('each row has expand checkbox', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableBodyRowsExpandInput = page.getByRole('cell').getByRole('checkbox');
+    await expect(tableBodyRowsExpandInput).toHaveCount(3);
+  });
+  test('under first row opened expanded row with text "Hello world 1"', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
+    const tableBodyExpandableRowSlot = page.getByText(/Hello world 1/);
+    await expect(tableBodyRowFirstInput).toHaveCount(1);
+    await expect(tableBodyExpandableRowSlot).toHaveCount(1);
+    await expect(tableBodyExpandableRowSlot).toBeHidden();
+    await tableBodyRowFirstInput.click();
+    await expect(tableBodyExpandableRowSlot).toBeVisible();
+    /* check input screenshot diff */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('under second row opened expanded row with text "Hello to you too"', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableBodyRowSecondInput = page.getByRole('cell').nth(2);
+    const tableBodyExpandableRowSlot = page.getByText(/Hello to you too/);
+    await expect(tableBodyRowSecondInput).toHaveCount(1);
+    await expect(tableBodyExpandableRowSlot).toHaveCount(1);
+    await expect(tableBodyExpandableRowSlot).toBeHidden();
+    await tableBodyRowSecondInput.click();
+    await expect(tableBodyExpandableRowSlot).toBeVisible();
+    /* check input screenshot diff */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('under third row opened expanded row with a button with text "Call to action"', async ({ page, }) => {
+    await page.goto(componentTestPath);
+    const tableBodyRowThirdInput = page.getByRole('cell').nth(3);
+    const tableBodyRowButton = page.getByText(/Call to action/);
+    await expect(tableBodyRowThirdInput).toHaveCount(1);
+    await expect(tableBodyRowButton).toHaveCount(1);
+    await expect(tableBodyRowButton).toBeHidden();
+    await tableBodyRowThirdInput.click();
+    await expect(tableBodyRowButton).toBeVisible();
+    /* check input screenshot diff */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('double click on expand button in first row -> expanded row should be closed', async ({ page, }) => {
+    await page.goto(componentTestPath);
+    const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
+    await tableBodyRowFirstInput.dblclick();
+    const tableBodyFirstExpandableRowSlot = page.getByText(/Hello world 1/);
+    const tableBodySecondExpandableRowSlot = page.getByText(/Hello to you too/);
+    const tableBodyThirdExpandableRowSlot = page.getByText(/Call to action/);
+    await expect(tableBodyFirstExpandableRowSlot).toBeHidden();
+    await expect(tableBodySecondExpandableRowSlot).toBeHidden();
+    await expect(tableBodyThirdExpandableRowSlot).toBeHidden();
+  });
+});

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

@@ -0,0 +1,41 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/table/table/test/filtering/index.html';
+test.describe('tds-table-filtering', () => {
+  test('renders filtering table correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableComponent = page.getByRole('table');
+    await expect(tableComponent).toHaveCount(1);
+    /* Check diff of screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('table has header "Filter"', async ({ page }) => {
+    await page.goto(componentTestPath);
+    /* Search for header by text and see if it exists */
+    const tdsTableToolbarCaption = page.getByText('Filter');
+    await expect(tdsTableToolbarCaption).toHaveCount(1);
+    await expect(tdsTableToolbarCaption).toBeVisible();
+  });
+  test('search button inside the header exists', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tdsTableToolbarSearchIcon = page.getByRole('img');
+    await expect(tdsTableToolbarSearchIcon).toHaveCount(1);
+    await expect(tdsTableToolbarSearchIcon).toBeVisible();
+  });
+  test('look for textbox and click it', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tdsTableToolbarSearchInput = page.getByRole('textbox');
+    await tdsTableToolbarSearchInput.click();
+    /* Check diff of screenshot after click */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('clicking on search button opens field for entering data', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tdsTableToolbarSearchInput = page.getByRole('textbox');
+    await expect(tdsTableToolbarSearchInput).toHaveCount(1);
+    await expect(tdsTableToolbarSearchInput).toBeVisible();
+    await tdsTableToolbarSearchInput.fill('Some test text');
+    /* Check diff of screenshot after filled */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

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

@@ -0,0 +1,47 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/table/table/test/multiselect/index.html';
+test.describe('tds-table-multiselect', () => {
+  test('renders multiselect table correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableComponent = page.getByRole('table');
+    await expect(tableComponent).toHaveCount(1);
+    /* Check diff on screenshot for component */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('table header contains checkbox', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableHeaderCheckbox = page.getByRole('checkbox').first();
+    await expect(tableHeaderCheckbox).toHaveCount(1);
+    await expect(tableHeaderCheckbox).toBeVisible();
+  });
+  test('row should contain the correct number of checkboxes in each row', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableBodyRowCheckboxes = page.getByRole('checkbox');
+    await expect(tableBodyRowCheckboxes).toHaveCount(5);
+    /* Check if each checkbox is visible */
+    const promises = [];
+    for (let i = 0; i < 5; i++) {
+      promises.push(expect(tableBodyRowCheckboxes.nth(i)).toBeVisible());
+    }
+    await Promise.all(promises);
+  });
+  test('can check every checkbox in the table', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableCheckboxes = page.getByRole('cell');
+    await expect(tableCheckboxes).toHaveCount(5);
+    const myEventSpyAll = await page.spyOnEvent('tdsSelectAll');
+    const myEventSpy = await page.spyOnEvent('tdsSelect');
+    /* Click each one */
+    await tableCheckboxes.first().click();
+    await tableCheckboxes.nth(1).click();
+    await tableCheckboxes.nth(2).click();
+    await tableCheckboxes.nth(3).click();
+    await tableCheckboxes.last().click();
+    /* check so correct events have been called */
+    expect(myEventSpyAll).toHaveReceivedEventTimes(1);
+    expect(myEventSpy).toHaveReceivedEventTimes(4);
+    /* Check diff on screenshot for component */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

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

@@ -0,0 +1,53 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/table/table/test/pagination/index.html';
+test.describe('tds-table-pagination', () => {
+  test('renders pagination table correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableComponent = page.getByRole('table');
+    await expect(tableComponent).toHaveCount(1);
+    /* Check screenshots for diffs */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('table has a footer', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableFooter = page.locator('tds-table-footer');
+    await expect(tableFooter).toHaveCount(1);
+  });
+  test('footer has field for number of page, value = 1', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableFooterPaginationSpinbutton = page.getByRole('spinbutton');
+    await expect(tableFooterPaginationSpinbutton).toHaveCount(1);
+    await expect(tableFooterPaginationSpinbutton).toBeVisible();
+    await expect(tableFooterPaginationSpinbutton).toHaveValue('1');
+  });
+  test('footer contains text "of 4 pages"', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableFooterOfPagesText = page.getByText(/of 4 pages/);
+    await expect(tableFooterOfPagesText).toHaveCount(1);
+    await expect(tableFooterOfPagesText).toBeVisible();
+  });
+  test('Footer contains left chevron button, it is disabled', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableFooterLeftChevronButton = page.getByRole('button').first();
+    await expect(tableFooterLeftChevronButton).toBeVisible();
+    await expect(tableFooterLeftChevronButton).toHaveAttribute('disabled');
+  });
+  test('Footer contains right chevron button, it is not disabled', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableFooterRightChevronButton = page.getByRole('button').last();
+    await expect(tableFooterRightChevronButton).toBeVisible();
+    await expect(tableFooterRightChevronButton).not.toHaveAttribute('disabled');
+  });
+  test('footer contains buttons that are clickable and change value in input', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableFooterPaginationSpinbutton = page.getByRole('spinbutton');
+    await expect(tableFooterPaginationSpinbutton).toHaveValue('1');
+    const tableFooterRightChevronButton = page.getByRole('button').last();
+    await tableFooterRightChevronButton.click();
+    await expect(tableFooterPaginationSpinbutton).toHaveValue('2');
+    const tableFooterLeftChevronButton = page.getByRole('button').first();
+    await tableFooterLeftChevronButton.click();
+    await expect(tableFooterPaginationSpinbutton).toHaveValue('1');
+  });
+});

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

@@ -0,0 +1,36 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/table/table/test/sorting/index.html';
+test.describe('tds-table-sorting', () => {
+  test('renders sorting table correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableComponent = page.getByRole('table');
+    await expect(tableComponent).toHaveCount(1);
+    /* Check for diffs in screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('table has header "Sorting"', async ({ page }) => {
+    await page.goto(componentTestPath);
+    /* Search for header by text and see if it exists */
+    const tdsTableToolbarCaption = page.getByText('Sorting');
+    await expect(tdsTableToolbarCaption).toHaveCount(1);
+    await expect(tdsTableToolbarCaption).toBeVisible();
+  });
+  test('column headers are clickable', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const myEventSpy = await page.spyOnEvent('tdsSort');
+    const truckTypeHeader = page.getByText('Truck type');
+    await truckTypeHeader.click();
+    expect(myEventSpy).toHaveReceivedEventTimes(1);
+    const driverNameHeader = page.getByText('Driver name');
+    await driverNameHeader.click();
+    expect(myEventSpy).toHaveReceivedEventTimes(2);
+    const countryHeader = page.getByText('Country');
+    await countryHeader.click();
+    expect(myEventSpy).toHaveReceivedEventTimes(3);
+    const mileageHeader = page.getByText('Mileage');
+    await mileageHeader.click();
+    expect(myEventSpy).toHaveReceivedEventTimes(4);
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

package/dist/collection/components/table/table-component-filtering.stories.js

@@ -133,6 +133,7 @@ const FilteringTemplate = ({ modeVariant, compactDesign, responsiveDesign, verti
               <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
               <tds-header-cell cell-key='mileage' cell-value='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
           </tds-table-header>
+          <tds-table-body>
             <tds-table-body-row>
               <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
               <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
@@ -169,6 +170,7 @@ const FilteringTemplate = ({ modeVariant, compactDesign, responsiveDesign, verti
                 <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
                 <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
             </tds-table-body-row>
+          </tds-table-body>
           <tds-table-footer>              
           </tds-table-footer>
   </tds-table>

package/dist/collection/components/table/table-component-pagination.stories.js

@@ -133,6 +133,7 @@ const PaginationTemplate = ({ modeVariant, compactDesign, responsiveDesign, vert
               <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
               <tds-header-cell cell-key='mileage' cell-value='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
           </tds-table-header>
+          <tds-table-body>
             <tds-table-body-row>
                 <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
                 <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
@@ -169,6 +170,7 @@ const PaginationTemplate = ({ modeVariant, compactDesign, responsiveDesign, vert
                 <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
                 <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
             </tds-table-body-row>
+          </tds-table-body>
           <tds-table-footer pages="4" pagination></tds-table-footer>
   </tds-table>
   <!-- Note: Code below is just for demo purposes -->

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

@@ -0,0 +1,26 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/textarea/test/basic/index.html';
+test.describe('tds-textarea', () => {
+  test('renders default textarea correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tdsTextarea = page.getByTestId('tds-textarea-testid');
+    await expect(tdsTextarea).toHaveCount(1);
+    /* Expect no difference in screenshot  */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('test if able to type in textarea', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const textarea = page.getByRole('textbox');
+    /* Expect to have received an event from clicking on the textarea */
+    const myEventSpy = await page.spyOnEvent('click');
+    await textarea.click();
+    expect(myEventSpy).toHaveReceivedEvent();
+    /* Expect the textbox to have the cursor text style */
+    const textareaCursorState = await textarea.evaluate((style) => getComputedStyle(style).cursor);
+    expect(textareaCursorState).toBe('text');
+    /* Expect the inputValue of textarea to have "Adding some text" after it has been typed */
+    await textarea.fill('Adding some text');
+    expect(await textarea.inputValue()).toBe('Adding some text');
+  });
+});

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

@@ -0,0 +1,34 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/textarea/test/default/index.html';
+test.describe('tds-textarea-default', () => {
+  test('renders default textarea correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tdsTextarea = page.getByTestId('tds-textarea-testid');
+    await expect(tdsTextarea).toHaveCount(1);
+    /* Expect no difference in screenshot  */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('test if able to type in textarea', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const textarea = page.getByRole('textbox');
+    /* Expect to have received an event from clicking on the textarea */
+    const myEventSpy = await page.spyOnEvent('click');
+    await textarea.click();
+    expect(myEventSpy).toHaveReceivedEvent();
+    /* Expect the textbox to have the cursor text style */
+    const textareaCursorState = await textarea.evaluate((style) => getComputedStyle(style).cursor);
+    expect(textareaCursorState).toBe('text');
+    /* Expect the inputValue of textarea to have "Adding some text" after it has been typed */
+    await textarea.fill('Adding some text');
+    expect(await textarea.inputValue()).toBe('Adding some text');
+    /* Expect no difference in screenshot  */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('not able to find label if "no-label" is set', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const textareaLabel = page.getByText('Label');
+    await expect(textareaLabel).toHaveCount(0);
+    await expect(textareaLabel).toBeHidden();
+  });
+});

package/dist/collection/components/textarea/test/read-only/textarea.e2e.js

@@ -0,0 +1,26 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/textarea/test/read-only/index.html';
+test.describe('tds-textarea-read-only', () => {
+  test('renders read-only textarea correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tdsTextarea = page.getByTestId('tds-textarea-testid');
+    await expect(tdsTextarea).toHaveCount(1);
+    /* Expect the tds-textarea to have the read-only attribute */
+    await expect(tdsTextarea).toHaveAttribute('read-only');
+    /* Expect no diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('read-only textarea - native textarea should have readonly attribute', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const textarea = page.getByRole('textbox');
+    /* Expect the textarea within tds-textarea to have the readonly attribute */
+    await expect(textarea).toHaveAttribute('readonly');
+  });
+  test('be able to find label if "outside" is set', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const textareaLabel = page.getByText('Label');
+    await expect(textareaLabel).toHaveCount(1);
+    await expect(textareaLabel).toBeVisible();
+  });
+});

package/dist/collection/index.js

@@ -1 +1,2 @@
 export * from './components';
+export * from './component-event-listeners-edited';

package/dist/components/popover-core.js

@@ -1846,6 +1846,11 @@ const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore ext
       }
     }
   }
+  /* To enable initial loading of a component if user controls show prop*/
+  componentWillLoad() {
+    this.setIsShown(this.show);
+  }
+  /* To observe any change of show prop after an initial load */
   onShowChange(newValue) {
     this.setIsShown(newValue);
   }

package/dist/components/tds-chip.js

@@ -11,7 +11,17 @@ const TdsChip$1 = /*@__PURE__*/ proxyCustomElement(class TdsChip extends HTMLEle
     this.tdsChange = createEvent(this, "tdsChange", 6);
     this.tdsClick = createEvent(this, "tdsClick", 6);
     this.handleChange = () => {
-      this.checked = !this.checked;
+      if (this.type === 'checkbox') {
+        // Toggle the prop on click
+        this.checked = !this.checked;
+      }
+      else if (this.type === 'radio') {
+        // Always set it to true to enforce visual update for selected state
+        this.checked = true;
+      }
+      else {
+        console.error('Unsupported type in Chip component!');
+      }
       this.tdsChange.emit({
         chipId: this.chipId,
         checked: this.checked,
@@ -62,7 +72,7 @@ const TdsChip$1 = /*@__PURE__*/ proxyCustomElement(class TdsChip extends HTMLEle
     "type": [1],
     "size": [1],
     "chipId": [1, "chip-id"],
-    "checked": [516],
+    "checked": [1540],
     "name": [1],
     "value": [1]
   }]);

package/dist/components/tds-dropdown.js

@@ -59,7 +59,7 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
   input.value = value || '';
 };
 
-const dropdownCss = ":host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:4px 4px 0 0}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom-color:var(--tds-dropdown-border-bottom-open)}:host button:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-border-bottom-open)}:host button.error{border-bottom:1px solid var(--tds-negative)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom-color:transparent}:host .filter.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host .filter.error{border-bottom:1px solid var(--tds-negative)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{margin-right:16px}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-negative)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;margin-top:1px;width:100%;transform-origin:top;transition:transform 0.2s ease-in-out;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;border-radius:0 0 4px 4px;overflow-y:auto}:host .dropdown-list::-webkit-scrollbar{width:4px;background-color:inherit}:host .dropdown-list::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .dropdown-list ::-webkit-scrollbar-button{height:0;width:0}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;border-radius:4px 4px 0 0}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);visibility:hidden}:host .dropdown-list.open{transform:scaleY(1)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host tds-icon{transition:transform 0.2s ease-in-out}:host tds-icon.open{transform:rotateZ(180deg)}";
+const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:4px 4px 0 0}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom-color:var(--tds-dropdown-border-bottom-open)}:host button:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-border-bottom-open)}:host button.error{border-bottom:1px solid var(--tds-negative)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom-color:transparent}:host .filter.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host .filter.error{border-bottom:1px solid var(--tds-negative)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{margin-right:16px}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-negative)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;margin-top:1px;width:100%;transform-origin:top;transition:transform 0.2s ease-in-out;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;border-radius:0 0 4px 4px;overflow-y:auto}:host .dropdown-list::-webkit-scrollbar{width:4px;background-color:inherit}:host .dropdown-list::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .dropdown-list ::-webkit-scrollbar-button{height:0;width:0}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;border-radius:4px 4px 0 0}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);visibility:hidden}:host .dropdown-list.open{transform:scaleY(1)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host tds-icon{transition:transform 0.2s ease-in-out}:host tds-icon.open{transform:rotateZ(180deg)}";
 
 const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends HTMLElement {
   constructor() {
@@ -149,7 +149,9 @@ const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends
       }
       else {
         this.filterResult = children.filter((element) => {
-          if (!element.textContent.toLowerCase().includes(query.toLowerCase())) {
+          if (!this.normalizeString(element.textContent)
+            .toLowerCase()
+            .includes(this.normalizeString(query).toLowerCase())) {
             element.setAttribute('hidden', '');
           }
           else {
@@ -184,6 +186,7 @@ const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends
     this.error = false;
     this.multiselect = false;
     this.filter = false;
+    this.normalizeText = true;
     this.noResultText = 'No result';
     this.defaultValue = undefined;
     this.open = false;
@@ -333,6 +336,10 @@ const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends
       this.setDefaultOption();
     }
   }
+  /** Method to check if we should normalize text */
+  normalizeString(text) {
+    return this.normalizeText ? text.normalize('NFD').replace(/\p{Diacritic}/gu, '') : text;
+  }
   /** Method that resets the dropdown without emitting an event. */
   internalReset() {
     this.getChildren().forEach((element) => {
@@ -426,6 +433,7 @@ const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends
     "error": [4],
     "multiselect": [4],
     "filter": [4],
+    "normalizeText": [4, "normalize-text"],
     "noResultText": [1, "no-result-text"],
     "defaultValue": [1, "default-value"],
     "open": [32],