@scania/tegel 1.3.0 → 1.3.2

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/tabs/folder-tabs/folder-tabs.css

@@ -16,11 +16,11 @@
   display: none;
 }
 :host .scroll-right-button {
-  z-index: 201;
+  z-index: 1;
   right: 0;
 }
 :host .scroll-left-button {
-  z-index: 201;
+  z-index: 1;
   left: 0;
 }
 :host .scroll-right-button,

package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.css

@@ -1,6 +1,5 @@
 :host {
   box-sizing: border-box;
-  z-index: 200;
   display: block;
   position: relative;
 }

package/dist/collection/components/tabs/inline-tabs/inline-tabs.css

@@ -30,11 +30,11 @@
 }
 :host .scroll-right-button {
   right: 0;
-  z-index: 201;
+  z-index: 1;
 }
 :host .scroll-left-button {
   left: 0;
-  z-index: 201;
+  z-index: 1;
 }
 :host .scroll-right-button,
 :host .scroll-left-button {

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.css

@@ -1,6 +1,5 @@
 :host {
   box-sizing: border-box;
-  z-index: 200;
   display: block;
 }
 :host * {

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css

@@ -30,11 +30,11 @@
 }
 :host .scroll-right-button {
   right: 0;
-  z-index: 201;
+  z-index: 1;
 }
 :host .scroll-left-button {
   left: 0;
-  z-index: 201;
+  z-index: 1;
 }
 :host .scroll-right-button,
 :host .scroll-left-button {

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/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-button.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { h as hasSlot } from './hasSlot.js';
 
-const buttonCss = ".sc-tds-button:root,.tds-mode-light.sc-tds-button{--tds-btn-primary-background:var(--tds-blue-600);--tds-btn-primary-color:var(--tds-white);--tds-btn-primary-border-color:transparent;--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-color-hover:var(--tds-white);--tds-btn-primary-border-color-hover:transparent;--tds-btn-primary-background-active:var(--tds-blue-700);--tds-btn-primary-color-active:var(--tds-white);--tds-btn-primary-border-color-active:var(--tds-blue-700);--tds-btn-primary-background-focus:var(--tds-blue-400);--tds-btn-primary-color-focus:var(--tds-white);--tds-btn-primary-border-color-focus:var(--tds-blue-600);--tds-btn-primary-outline-color-focus:var(--tds-blue-600);--tds-btn-primary-background-disabled-primary:var(--tds-grey-50);--tds-btn-primary-background-disabled-secondary:var(--tds-white);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-grey-400);--tds-btn-primary-border-color-disabled:transparent;--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-black);--tds-btn-secondary-border-color:rgb(0 0 0 / 48%);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-black);--tds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-black);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--tds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--tds-btn-icon-secondary-color-focus:var(--tds-black);--tds-btn-icon-secondary-fill-focus:var(--tds-black);--tds-btn-icon-secondary-fill-active:var(--tds-black);--tds-btn-icon-secondary-fill-active:var(--tds-black);--tds-btn-icon-secondary-fill:var(--tds-grey-958);--tds-btn-icon-secondary-color:var(--tds-grey-958);--tds-btn-icon-secondary-fill-hover:var(--tds-grey-50);--tds-btn-icon-secondary-color-hover:var(--tds-grey-50);--tds-btn-icon-secondary-fill-active:var(--tds-grey-958);--tds-btn-icon-secondary-color-active:var(--tds-grey-958);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-black);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-black);--tds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--tds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-black);--tds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-black);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-958);--tds-btn-icon-ghost-color:var(--tds-grey-958);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:var(--tds-red-700);--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-50);--tds-btn-danger-background-disabled-secondary:var(--tds-white);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-grey-50);--tds-btn-icon-danger-color:var(--tds-grey-50)}.sc-tds-button:root .tds-mode-variant-primary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.sc-tds-button:root .tds-mode-variant-secondary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}.tds-mode-dark.sc-tds-button{--tds-btn-primary-background:var(--tds-blue-400);--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-background-active:var(--tds-blue-300);--tds-btn-primary-background-focus:var(--tds-blue-600);--tds-btn-primary-border-color-focus:var(--tds-blue-400);--tds-btn-primary-outline-color-focus:var(--tds-blue-400);--tds-btn-primary-background-disabled-primary:var(--tds-grey-900);--tds-btn-primary-background-disabled-secondary:var(--tds-grey-868);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-grey-600);--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-white);--tds-btn-secondary-border-color:var(--tds-white);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-white);--tds-btn-secondary-border-color-active:var(--tds-white);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-white);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:var(--tds-white);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--tds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--tds-btn-icon-secondary-color-focus:var(--tds-white);--tds-btn-icon-secondary-fill-focus:var(--tds-white);--tds-btn-icon-secondary-fill:var(--tds-grey-50);--tds-btn-icon-secondary-color:var(--tds-grey-50);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-white);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-white);--tds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--tds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-white);--tds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-white);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-50);--tds-btn-icon-ghost-color:var(--tds-grey-50);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:transparent;--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-900);--tds-btn-danger-background-disabled-secondary:var(--tds-grey-868);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-white);--tds-btn-icon-danger-color:var(--tds-white)}.tds-mode-dark.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.tds-mode-dark.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}button.sc-tds-button{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--tds-spacing-element-20);border:1px solid}button.sc-tds-button *.sc-tds-button{box-sizing:border-box}button.sc-tds-button:disabled,button.disabled.sc-tds-button{cursor:unset}button.sc-tds-button:focus{outline:none}button.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.xs.sc-tds-button{padding:var(--tds-spacing-element-4) var(--tds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}button.xs.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.sm.sc-tds-button{padding:var(--tds-spacing-element-12);height:40px}button.sm.icon.sc-tds-button{padding:10px var(--tds-spacing-element-12)}button.sm.only-icon.sc-tds-button{padding:11px}button.sm.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.md.sc-tds-button{padding:var(--tds-spacing-element-16);height:48px}button.md.icon.sc-tds-button{padding:14px var(--tds-spacing-element-16)}button.md.only-icon.sc-tds-button{padding:13px}button.md.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.lg.sc-tds-button{padding:var(--tds-spacing-element-20);height:56px}button.lg.icon.sc-tds-button{padding:18px var(--tds-spacing-element-20)}button.lg.only-icon.sc-tds-button{padding:17px}button.lg.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.fullbleed.sc-tds-button{width:inherit;display:flex;justify-content:center}button.primary.sc-tds-button{background:var(--tds-btn-primary-background);border-color:var(--tds-btn-primary-border-color);color:var(--tds-btn-primary-color);outline-color:var(--tds-btn-primary-outline-color)}button.primary.icon.sc-tds-button{fill:var(--tds-btn-icon-primary-fill);color:var(--tds-btn-icon-primary-fill);fill:var(--tds-btn-icon-primary-color);color:var(--tds-btn-icon-primary-color)}button.primary.sc-tds-button:hover{background:var(--tds-btn-primary-background-hover);border-color:var(--tds-btn-primary-border-color-hover);color:var(--tds-btn-primary-color-hover);outline-color:var(--tds-btn-primary-outline-color-hover)}button.primary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-hover);color:var(--tds-btn-icon-primary-fill-hover);fill:var(--tds-btn-icon-primary-color-hover);color:var(--tds-btn-icon-primary-color-hover)}button.primary.sc-tds-button:focus-visible{background:var(--tds-btn-primary-background-focus);border-color:var(--tds-btn-primary-border-color-focus);color:var(--tds-btn-primary-color-focus);outline-color:var(--tds-btn-primary-outline-color-focus)}button.primary:focus-visible.sc-tds-button-s>[slot=icon],button.primary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-focus);color:var(--tds-btn-icon-primary-fill-focus);fill:var(--tds-btn-icon-primary-color-focus);color:var(--tds-btn-icon-primary-color-focus)}button.primary.sc-tds-button:active,button.primary.active.sc-tds-button{background:var(--tds-btn-primary-background-active);border-color:var(--tds-btn-primary-border-color-active);color:var(--tds-btn-primary-color-active);outline-color:var(--tds-btn-primary-outline-color-active)}button.primary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-active);color:var(--tds-btn-icon-primary-fill-active);fill:var(--tds-btn-icon-primary-color-active);color:var(--tds-btn-icon-primary-color-active)}button.primary.disabled.sc-tds-button,button.primary.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-primary-outline-color-disabled)}button.secondary.sc-tds-button{background:var(--tds-btn-secondary-background);border-color:var(--tds-btn-secondary-border-color);color:var(--tds-btn-secondary-color);outline-color:var(--tds-btn-secondary-outline-color)}button.secondary.icon.sc-tds-button{fill:var(--tds-btn-icon-secondary-fill);color:var(--tds-btn-icon-secondary-fill);fill:var(--tds-btn-icon-secondary-color);color:var(--tds-btn-icon-secondary-color)}button.secondary.sc-tds-button:hover{background:var(--tds-btn-secondary-background-hover);border-color:var(--tds-btn-secondary-border-color-hover);color:var(--tds-btn-secondary-color-hover);outline-color:var(--tds-btn-secondary-outline-color-hover)}button.secondary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-hover);color:var(--tds-btn-icon-secondary-fill-hover);fill:var(--tds-btn-icon-secondary-color-hover);color:var(--tds-btn-icon-secondary-color-hover)}button.secondary.sc-tds-button:focus-visible{background:var(--tds-btn-secondary-background-focus);border-color:var(--tds-btn-secondary-border-color-focus);color:var(--tds-btn-secondary-color-focus);outline-color:var(--tds-btn-secondary-outline-color-focus)}button.secondary:focus-visible.sc-tds-button-s>[slot=icon],button.secondary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-focus);color:var(--tds-btn-icon-secondary-fill-focus);fill:var(--tds-btn-icon-secondary-color-focus);color:var(--tds-btn-icon-secondary-color-focus)}button.secondary.sc-tds-button:active,button.secondary.active.sc-tds-button{background:var(--tds-btn-secondary-background-active);border-color:var(--tds-btn-secondary-border-color-active);color:var(--tds-btn-secondary-color-active);outline-color:var(--tds-btn-secondary-outline-color-active)}button.secondary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-active);color:var(--tds-btn-icon-secondary-fill-active);fill:var(--tds-btn-icon-secondary-color-active);color:var(--tds-btn-icon-secondary-color-active)}button.secondary.disabled.sc-tds-button,button.secondary.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-secondary-outline-color-disabled)}button.ghost.sc-tds-button{background:var(--tds-btn-ghost-background);border-color:var(--tds-btn-ghost-border-color);color:var(--tds-btn-ghost-color);outline-color:var(--tds-btn-ghost-outline-color)}button.ghost.icon.sc-tds-button{fill:var(--tds-btn-icon-ghost-fill);color:var(--tds-btn-icon-ghost-fill);fill:var(--tds-btn-icon-ghost-color);color:var(--tds-btn-icon-ghost-color)}button.ghost.sc-tds-button:hover{background:var(--tds-btn-ghost-background-hover);border-color:var(--tds-btn-ghost-border-color-hover);color:var(--tds-btn-ghost-color-hover);outline-color:var(--tds-btn-ghost-outline-color-hover)}button.ghost:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-hover);color:var(--tds-btn-icon-ghost-fill-hover);fill:var(--tds-btn-icon-ghost-color-hover);color:var(--tds-btn-icon-ghost-color-hover)}button.ghost.sc-tds-button:focus-visible{background:var(--tds-btn-ghost-background-focus);border-color:var(--tds-btn-ghost-border-color-focus);color:var(--tds-btn-ghost-color-focus);outline-color:var(--tds-btn-ghost-outline-color-focus)}button.ghost:focus-visible.sc-tds-button-s>[slot=icon],button.ghost:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-focus);color:var(--tds-btn-icon-ghost-fill-focus);fill:var(--tds-btn-icon-ghost-color-focus);color:var(--tds-btn-icon-ghost-color-focus)}button.ghost.sc-tds-button:active,button.ghost.active.sc-tds-button{background:var(--tds-btn-ghost-background-active);border-color:var(--tds-btn-ghost-border-color-active);color:var(--tds-btn-ghost-color-active);outline-color:var(--tds-btn-ghost-outline-color-active)}button.ghost:active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-active);color:var(--tds-btn-icon-ghost-fill-active);fill:var(--tds-btn-icon-ghost-color-active);color:var(--tds-btn-icon-ghost-color-active)}button.ghost.disabled.sc-tds-button,button.ghost.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-ghost-outline-color-disabled)}button.danger.sc-tds-button{background:var(--tds-btn-danger-background);border-color:var(--tds-btn-danger-border-color);color:var(--tds-btn-danger-color);outline-color:var(--tds-btn-danger-outline-color)}button.danger.icon.sc-tds-button{fill:var(--tds-btn-icon-danger-fill);color:var(--tds-btn-icon-danger-fill);fill:var(--tds-btn-icon-danger-color);color:var(--tds-btn-icon-danger-color)}button.danger.sc-tds-button:hover{background:var(--tds-btn-danger-background-hover);border-color:var(--tds-btn-danger-border-color-hover);color:var(--tds-btn-danger-color-hover);outline-color:var(--tds-btn-danger-outline-color-hover)}button.danger:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-hover);color:var(--tds-btn-icon-danger-fill-hover);fill:var(--tds-btn-icon-danger-color-hover);color:var(--tds-btn-icon-danger-color-hover)}button.danger.sc-tds-button:focus-visible{background:var(--tds-btn-danger-background-focus);border-color:var(--tds-btn-danger-border-color-focus);color:var(--tds-btn-danger-color-focus);outline-color:var(--tds-btn-danger-outline-color-focus)}button.danger:focus-visible.sc-tds-button-s>[slot=icon],button.danger:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-focus);color:var(--tds-btn-icon-danger-fill-focus);fill:var(--tds-btn-icon-danger-color-focus);color:var(--tds-btn-icon-danger-color-focus)}button.danger.sc-tds-button:active,button.danger.active.sc-tds-button{background:var(--tds-btn-danger-background-active);border-color:var(--tds-btn-danger-border-color-active);color:var(--tds-btn-danger-color-active);outline-color:var(--tds-btn-danger-outline-color-active)}button.danger:active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-active);color:var(--tds-btn-icon-danger-fill-active);fill:var(--tds-btn-icon-danger-color-active);color:var(--tds-btn-icon-danger-color-active)}button.danger.disabled.sc-tds-button,button.danger.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-danger-outline-color-disabled)}tds-button.sc-tds-button-h{display:inline-flex;align-items:center}.sc-tds-button-htds-button .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}.sc-tds-button-htds-button .sm .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button[disabled=true].sc-tds-button-h{pointer-events:none}.sc-tds-button-htds-button[disabled=true] .sc-tds-button-s>[slot=icon]{pointer-events:none}tds-button[fullbleed].sc-tds-button-h{width:100%;justify-content:center}tds-button.sc-tds-button .sc-tds-button:not(.only-icon){display:inline-flex;align-items:center}tds-button :not(.only-icon).sm.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).sm .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-12);width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button :not(.only-icon).md.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).md .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-16);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}tds-button :not(.only-icon).lg.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).lg .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}";
+const buttonCss = ".sc-tds-button:root,.tds-mode-light.sc-tds-button{--tds-btn-primary-background:var(--tds-blue-600);--tds-btn-primary-color:var(--tds-white);--tds-btn-primary-border-color:transparent;--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-color-hover:var(--tds-white);--tds-btn-primary-border-color-hover:transparent;--tds-btn-primary-background-active:var(--tds-blue-700);--tds-btn-primary-color-active:var(--tds-white);--tds-btn-primary-border-color-active:var(--tds-blue-700);--tds-btn-primary-background-focus:var(--tds-blue-400);--tds-btn-primary-color-focus:var(--tds-white);--tds-btn-primary-border-color-focus:var(--tds-blue-600);--tds-btn-primary-outline-color-focus:var(--tds-blue-600);--tds-btn-primary-background-disabled-primary:var(--tds-grey-50);--tds-btn-primary-background-disabled-secondary:var(--tds-white);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-grey-400);--tds-btn-primary-border-color-disabled:transparent;--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-black);--tds-btn-secondary-border-color:rgb(0 0 0 / 48%);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-black);--tds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-black);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--tds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--tds-btn-icon-secondary-color-focus:var(--tds-black);--tds-btn-icon-secondary-fill-focus:var(--tds-black);--tds-btn-icon-secondary-fill-active:var(--tds-black);--tds-btn-icon-secondary-fill-active:var(--tds-black);--tds-btn-icon-secondary-fill:var(--tds-grey-958);--tds-btn-icon-secondary-color:var(--tds-grey-958);--tds-btn-icon-secondary-fill-hover:var(--tds-grey-50);--tds-btn-icon-secondary-color-hover:var(--tds-grey-50);--tds-btn-icon-secondary-fill-active:var(--tds-grey-958);--tds-btn-icon-secondary-color-active:var(--tds-grey-958);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-black);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-black);--tds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--tds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-black);--tds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-black);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-958);--tds-btn-icon-ghost-color:var(--tds-grey-958);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:var(--tds-red-700);--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-50);--tds-btn-danger-background-disabled-secondary:var(--tds-white);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-grey-50);--tds-btn-icon-danger-color:var(--tds-grey-50)}.sc-tds-button:root .tds-mode-variant-primary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.sc-tds-button:root .tds-mode-variant-secondary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}.tds-mode-dark.sc-tds-button{--tds-btn-primary-background:var(--tds-blue-400);--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-background-active:var(--tds-blue-300);--tds-btn-primary-background-focus:var(--tds-blue-600);--tds-btn-primary-border-color-focus:var(--tds-blue-400);--tds-btn-primary-outline-color-focus:var(--tds-blue-400);--tds-btn-primary-background-disabled-primary:var(--tds-grey-900);--tds-btn-primary-background-disabled-secondary:var(--tds-grey-868);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-grey-600);--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-white);--tds-btn-secondary-border-color:var(--tds-white);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-white);--tds-btn-secondary-border-color-active:var(--tds-white);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-white);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:var(--tds-white);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--tds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--tds-btn-icon-secondary-color-focus:var(--tds-white);--tds-btn-icon-secondary-fill-focus:var(--tds-white);--tds-btn-icon-secondary-fill:var(--tds-grey-50);--tds-btn-icon-secondary-color:var(--tds-grey-50);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-white);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-white);--tds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--tds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-white);--tds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-white);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-50);--tds-btn-icon-ghost-color:var(--tds-grey-50);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:transparent;--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-900);--tds-btn-danger-background-disabled-secondary:var(--tds-grey-868);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-white);--tds-btn-icon-danger-color:var(--tds-white)}.tds-mode-dark.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.tds-mode-dark.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}button.sc-tds-button{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--tds-spacing-element-20);border:1px solid}button.sc-tds-button *.sc-tds-button{box-sizing:border-box}button.sc-tds-button:disabled,button.disabled.sc-tds-button{cursor:unset}button.sc-tds-button:focus{outline:none}button.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.xs.sc-tds-button{padding:var(--tds-spacing-element-4) var(--tds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}button.xs.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.sm.sc-tds-button{padding:var(--tds-spacing-element-12);height:40px}button.sm.icon.sc-tds-button{padding:10px var(--tds-spacing-element-12)}button.sm.only-icon.sc-tds-button{padding:11px}button.sm.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.md.sc-tds-button{padding:var(--tds-spacing-element-16);height:48px}button.md.icon.sc-tds-button{padding:14px var(--tds-spacing-element-16)}button.md.only-icon.sc-tds-button{padding:13px}button.md.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.lg.sc-tds-button{padding:var(--tds-spacing-element-20);height:56px}button.lg.icon.sc-tds-button{padding:18px var(--tds-spacing-element-20)}button.lg.only-icon.sc-tds-button{padding:17px}button.lg.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.fullbleed.sc-tds-button{width:inherit;display:flex;justify-content:center}button.primary.sc-tds-button{background:var(--tds-btn-primary-background);border-color:var(--tds-btn-primary-border-color);color:var(--tds-btn-primary-color);outline-color:var(--tds-btn-primary-outline-color)}button.primary.icon.sc-tds-button{fill:var(--tds-btn-icon-primary-fill);color:var(--tds-btn-icon-primary-fill);fill:var(--tds-btn-icon-primary-color);color:var(--tds-btn-icon-primary-color)}button.primary.sc-tds-button:hover{background:var(--tds-btn-primary-background-hover);border-color:var(--tds-btn-primary-border-color-hover);color:var(--tds-btn-primary-color-hover);outline-color:var(--tds-btn-primary-outline-color-hover)}button.primary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-hover);color:var(--tds-btn-icon-primary-fill-hover);fill:var(--tds-btn-icon-primary-color-hover);color:var(--tds-btn-icon-primary-color-hover)}button.primary.sc-tds-button:focus-visible{background:var(--tds-btn-primary-background-focus);border-color:var(--tds-btn-primary-border-color-focus);color:var(--tds-btn-primary-color-focus);outline-color:var(--tds-btn-primary-outline-color-focus)}button.primary:focus-visible.sc-tds-button-s>[slot=icon],button.primary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-focus);color:var(--tds-btn-icon-primary-fill-focus);fill:var(--tds-btn-icon-primary-color-focus);color:var(--tds-btn-icon-primary-color-focus)}button.primary.sc-tds-button:active,button.primary.active.sc-tds-button{background:var(--tds-btn-primary-background-active);border-color:var(--tds-btn-primary-border-color-active);color:var(--tds-btn-primary-color-active);outline-color:var(--tds-btn-primary-outline-color-active)}button.primary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-active);color:var(--tds-btn-icon-primary-fill-active);fill:var(--tds-btn-icon-primary-color-active);color:var(--tds-btn-icon-primary-color-active)}button.primary.disabled.sc-tds-button,button.primary.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-primary-outline-color-disabled)}button.secondary.sc-tds-button{background:var(--tds-btn-secondary-background);border-color:var(--tds-btn-secondary-border-color);color:var(--tds-btn-secondary-color);outline-color:var(--tds-btn-secondary-outline-color)}button.secondary.icon.sc-tds-button{fill:var(--tds-btn-icon-secondary-fill);color:var(--tds-btn-icon-secondary-fill);fill:var(--tds-btn-icon-secondary-color);color:var(--tds-btn-icon-secondary-color)}button.secondary.sc-tds-button:hover{background:var(--tds-btn-secondary-background-hover);border-color:var(--tds-btn-secondary-border-color-hover);color:var(--tds-btn-secondary-color-hover);outline-color:var(--tds-btn-secondary-outline-color-hover)}button.secondary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-hover);color:var(--tds-btn-icon-secondary-fill-hover);fill:var(--tds-btn-icon-secondary-color-hover);color:var(--tds-btn-icon-secondary-color-hover)}button.secondary.sc-tds-button:focus-visible{background:var(--tds-btn-secondary-background-focus);border-color:var(--tds-btn-secondary-border-color-focus);color:var(--tds-btn-secondary-color-focus);outline-color:var(--tds-btn-secondary-outline-color-focus)}button.secondary:focus-visible.sc-tds-button-s>[slot=icon],button.secondary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-focus);color:var(--tds-btn-icon-secondary-fill-focus);fill:var(--tds-btn-icon-secondary-color-focus);color:var(--tds-btn-icon-secondary-color-focus)}button.secondary.sc-tds-button:active,button.secondary.active.sc-tds-button{background:var(--tds-btn-secondary-background-active);border-color:var(--tds-btn-secondary-border-color-active);color:var(--tds-btn-secondary-color-active);outline-color:var(--tds-btn-secondary-outline-color-active)}button.secondary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-active);color:var(--tds-btn-icon-secondary-fill-active);fill:var(--tds-btn-icon-secondary-color-active);color:var(--tds-btn-icon-secondary-color-active)}button.secondary.disabled.sc-tds-button,button.secondary.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-secondary-outline-color-disabled)}button.ghost.sc-tds-button{background:var(--tds-btn-ghost-background);border-color:var(--tds-btn-ghost-border-color);color:var(--tds-btn-ghost-color);outline-color:var(--tds-btn-ghost-outline-color)}button.ghost.icon.sc-tds-button{fill:var(--tds-btn-icon-ghost-fill);color:var(--tds-btn-icon-ghost-fill);fill:var(--tds-btn-icon-ghost-color);color:var(--tds-btn-icon-ghost-color)}button.ghost.sc-tds-button:hover{background:var(--tds-btn-ghost-background-hover);border-color:var(--tds-btn-ghost-border-color-hover);color:var(--tds-btn-ghost-color-hover);outline-color:var(--tds-btn-ghost-outline-color-hover)}button.ghost:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-hover);color:var(--tds-btn-icon-ghost-fill-hover);fill:var(--tds-btn-icon-ghost-color-hover);color:var(--tds-btn-icon-ghost-color-hover)}button.ghost.sc-tds-button:focus-visible{background:var(--tds-btn-ghost-background-focus);border-color:var(--tds-btn-ghost-border-color-focus);color:var(--tds-btn-ghost-color-focus);outline-color:var(--tds-btn-ghost-outline-color-focus)}button.ghost:focus-visible.sc-tds-button-s>[slot=icon],button.ghost:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-focus);color:var(--tds-btn-icon-ghost-fill-focus);fill:var(--tds-btn-icon-ghost-color-focus);color:var(--tds-btn-icon-ghost-color-focus)}button.ghost.sc-tds-button:active,button.ghost.active.sc-tds-button{background:var(--tds-btn-ghost-background-active);border-color:var(--tds-btn-ghost-border-color-active);color:var(--tds-btn-ghost-color-active);outline-color:var(--tds-btn-ghost-outline-color-active)}button.ghost:active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-active);color:var(--tds-btn-icon-ghost-fill-active);fill:var(--tds-btn-icon-ghost-color-active);color:var(--tds-btn-icon-ghost-color-active)}button.ghost.disabled.sc-tds-button,button.ghost.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-ghost-outline-color-disabled)}button.danger.sc-tds-button{background:var(--tds-btn-danger-background);border-color:var(--tds-btn-danger-border-color);color:var(--tds-btn-danger-color);outline-color:var(--tds-btn-danger-outline-color)}button.danger.icon.sc-tds-button{fill:var(--tds-btn-icon-danger-fill);color:var(--tds-btn-icon-danger-fill);fill:var(--tds-btn-icon-danger-color);color:var(--tds-btn-icon-danger-color)}button.danger.sc-tds-button:hover{background:var(--tds-btn-danger-background-hover);border-color:var(--tds-btn-danger-border-color-hover);color:var(--tds-btn-danger-color-hover);outline-color:var(--tds-btn-danger-outline-color-hover)}button.danger:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-hover);color:var(--tds-btn-icon-danger-fill-hover);fill:var(--tds-btn-icon-danger-color-hover);color:var(--tds-btn-icon-danger-color-hover)}button.danger.sc-tds-button:focus-visible{background:var(--tds-btn-danger-background-focus);border-color:var(--tds-btn-danger-border-color-focus);color:var(--tds-btn-danger-color-focus);outline-color:var(--tds-btn-danger-outline-color-focus)}button.danger:focus-visible.sc-tds-button-s>[slot=icon],button.danger:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-focus);color:var(--tds-btn-icon-danger-fill-focus);fill:var(--tds-btn-icon-danger-color-focus);color:var(--tds-btn-icon-danger-color-focus)}button.danger.sc-tds-button:active,button.danger.active.sc-tds-button{background:var(--tds-btn-danger-background-active);border-color:var(--tds-btn-danger-border-color-active);color:var(--tds-btn-danger-color-active);outline-color:var(--tds-btn-danger-outline-color-active)}button.danger:active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-active);color:var(--tds-btn-icon-danger-fill-active);fill:var(--tds-btn-icon-danger-color-active);color:var(--tds-btn-icon-danger-color-active)}button.danger.disabled.sc-tds-button,button.danger.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-danger-outline-color-disabled)}tds-button.sc-tds-button-h{display:inline-flex;align-items:center}.sc-tds-button-htds-button.sc-tds-button-s>[slot=icon],.sc-tds-button-htds-button .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}.sc-tds-button-htds-button .sm.sc-tds-button-s>[slot=icon],.sc-tds-button-htds-button .sm .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button[disabled=true].sc-tds-button-h{pointer-events:none}.sc-tds-button-htds-button[disabled=true].sc-tds-button-s>[slot=icon],.sc-tds-button-htds-button[disabled=true] .sc-tds-button-s>[slot=icon]{pointer-events:none}tds-button[fullbleed].sc-tds-button-h{width:100%;justify-content:center}tds-button.sc-tds-button .sc-tds-button:not(.only-icon){display:inline-flex;align-items:center}tds-button :not(.only-icon).sm.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).sm .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-12);width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button :not(.only-icon).md.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).md .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-16);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}tds-button :not(.only-icon).lg.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).lg .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}";
 
 const TdsButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsButton extends HTMLElement {
   constructor() {