@scania/tegel 0.0.10 → 0.0.12

package/dist/collection/components/table/table-component-batch-actions.stories.js

@@ -130,10 +130,10 @@ export default {
 };
 const BatchActionTemplate = ({ modeVariant, compactDesign, responsiveDesign, batchArea, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
    <tds-table
-        enable-multiselect
+        multiselect
         vertical-dividers="${verticalDivider}"
         compact-design="${compactDesign}"
-        enable-responsive="${responsiveDesign}"
+        responsive="${responsiveDesign}"
         ${noMinWidth ? 'no-min-width' : ''}
         ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
       >

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

@@ -81,7 +81,7 @@ export default {
   },
 };
 const DataPropertyTemplate = ({ bodyData }) => formatHtmlPreview(`
-    <tds-table enable-expandable-rows="false">
+    <tds-table expandable-rows="false">
     <tds-table-toolbar table-title="'body-data' property example"></tds-table-toolbar>
       <tds-table-header>
           <tds-header-cell column-key='truck' column-title='Truck type'></tds-header-cell>

package/dist/collection/components/table/table-component-custom-width.stories.js

@@ -122,7 +122,7 @@ const BasicTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalD
   <tds-table
       vertical-dividers="${verticalDivider}"
       compact-design="${compactDesign}"
-      enable-responsive="${responsiveDesign}"
+      responsive="${responsiveDesign}"
       ${noMinWidth ? 'no-min-width' : ''}
       ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
   >

package/dist/collection/components/table/table-component-event-listeners.stories.js

@@ -140,7 +140,7 @@ const EventListenersTemplate = ({ modeVariant, compactDesign, responsiveDesign,
    <tds-table
       vertical-dividers="${verticalDivider}"
       compact-design="${compactDesign}"
-      enable-responsive="${responsiveDesign}"
+      responsive="${responsiveDesign}"
       ${noMinWidth ? 'no-min-width' : ''}
       ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
    >

package/dist/collection/components/table/table-component-expandable-rows.stories.js

@@ -120,10 +120,10 @@ export default {
 };
 const ExpandableRowTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
   <tds-table
-    enable-expandable-rows
+    expandable-rows
     vertical-dividers="${verticalDivider}"
     compact-design="${compactDesign}"
-    enable-responsive="${responsiveDesign}"
+    responsive="${responsiveDesign}"
     ${noMinWidth ? 'no-min-width' : ''}
     ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
     >

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

@@ -131,11 +131,11 @@ const FilteringTemplate = ({ modeVariant, compactDesign, responsiveDesign, useDa
    <tds-table
       vertical-dividers="${verticalDivider}"
       compact-design="${compactDesign}"
-      ${responsiveDesign ? 'enable-responsive' : ''}
+      ${responsiveDesign ? 'responsive' : ''}
       ${noMinWidth ? 'no-min-width' : ''}
       ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
   >
-          <tds-table-toolbar table-title="Filter" enable-filtering></tds-table-toolbar>
+          <tds-table-toolbar table-title="Filter" filter></tds-table-toolbar>
           <tds-table-header>
               <tds-header-cell column-key='truck' column-title='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
               <tds-header-cell column-key='driver' column-title='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
@@ -159,7 +159,8 @@ const FilteringTemplate = ({ modeVariant, compactDesign, responsiveDesign, useDa
     document.addEventListener('tdsFilterChange', (event) => {
       console.log(event)
     })
-    ${useDataProp ? `
+    ${useDataProp
+  ? `
     /* ONLY WORKS IN THE CANVAS TAB. */
     tableBody = document.querySelector('tds-table-body');
     tableBody.bodyData = [
@@ -205,6 +206,7 @@ const FilteringTemplate = ({ modeVariant, compactDesign, responsiveDesign, useDa
         "country": "France",
         "mileage": 80957
       }
-    ]` : ''}
+    ]`
+  : ''}
   </script>`);
 export const Filtering = FilteringTemplate.bind({});

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

@@ -56,7 +56,7 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    enableMultiselect: {
+    multiselect: {
       name: 'Enable multiselect',
       description: 'Enables row selection.',
       control: {
@@ -120,7 +120,7 @@ export default {
     modeVariant: 'Inherit from parent',
     compactDesign: false,
     responsiveDesign: false,
-    enableMultiselect: true,
+    multiselect: true,
     verticalDivider: false,
     noMinWidth: false,
     column1Width: '',
@@ -129,7 +129,7 @@ export default {
     column4Width: '',
   },
 };
-const MultiselectTemplate = ({ modeVariant, compactDesign, responsiveDesign, enableMultiselect, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+const MultiselectTemplate = ({ modeVariant, compactDesign, responsiveDesign, multiselect, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
 <script>
 // Note: Script here is only for demo purposes
   function getValue() {
@@ -154,10 +154,10 @@ const MultiselectTemplate = ({ modeVariant, compactDesign, responsiveDesign, ena
 
     <tds-table
         id="multiselect-table"
-        ${enableMultiselect ? 'enable-multiselect' : ''}
+        ${multiselect ? 'multiselect' : ''}
         vertical-dividers="${verticalDivider}"
         compact-design="${compactDesign}"
-        enable-responsive="${responsiveDesign}"
+        responsive="${responsiveDesign}"
         ${noMinWidth ? 'no-min-width' : ''}
         ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
     >

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

@@ -122,7 +122,7 @@ const PaginationTemplate = ({ modeVariant, compactDesign, responsiveDesign, vert
     <tds-table
       vertical-dividers="${verticalDivider}"
       compact-design="${compactDesign}"
-      enable-responsive="${responsiveDesign}"
+      responsive="${responsiveDesign}"
       ${noMinWidth ? 'no-min-width' : ''}
       ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
       >

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

@@ -166,7 +166,7 @@ const SortingTemplate = ({ modeVariant, compactDesign, responsiveDesign, column1
     <tds-table
       vertical-dividers="${verticalDivider}"
       compact-design="${compactDesign}"
-      enable-responsive="${responsiveDesign}"
+      responsive="${responsiveDesign}"
       ${noMinWidth ? 'no-min-width' : ''}
       ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
     >

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

@@ -1,15 +1,18 @@
 import { h, Host } from '@stencil/core';
 const relevantTableProps = [
-  'enableMultiselect',
-  'enableExpandableRows',
+  'multiselect',
+  'expandableRows',
   'verticalDividers',
   'compactDesign',
   'noMinWidth',
 ];
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the header cells.
+ */
 export class TdsTableHeaderRow {
   constructor() {
-    this.enableMultiselect = false;
-    this.enableExpandableRows = false;
+    this.multiselect = false;
+    this.expandableRows = false;
     this.mainCheckboxSelected = false;
     this.mainExpendSelected = false;
     this.verticalDividers = false;
@@ -81,7 +84,7 @@ export class TdsTableHeaderRow {
         'tds-table--compact': this.compactDesign,
         'tds-table--divider': this.verticalDividers,
         'tds-table--toolbar-available': this.enableToolbarDesign,
-      } }, h("tr", null, this.enableMultiselect && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { checked: this.mainCheckboxSelected, onTdsChange: (event) => this.headCheckBoxClicked(event) })))), this.enableExpandableRows && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", null))));
+      } }, h("tr", null, this.multiselect && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { checked: this.mainCheckboxSelected, onTdsChange: (event) => this.headCheckBoxClicked(event) })))), this.expandableRows && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", null))));
   }
   static get is() { return "tds-table-header"; }
   static get encapsulation() { return "shadow"; }
@@ -97,8 +100,8 @@ export class TdsTableHeaderRow {
   }
   static get states() {
     return {
-      "enableMultiselect": {},
-      "enableExpandableRows": {},
+      "multiselect": {},
+      "expandableRows": {},
       "mainCheckboxSelected": {},
       "mainExpendSelected": {},
       "verticalDividers": {},

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

@@ -1,7 +1,7 @@
 import { h, Host, } from '@stencil/core';
 const relevantTableProps = [
-  'enableMultiselect',
-  'enableExpandableRows',
+  'multiselect',
+  'expandableRows',
   'compactDesign',
   'noMinWidth',
   'verticalDividers',
@@ -66,10 +66,10 @@ export class TdsTableHeaderCell {
     this.verticalDividers = false;
     this.compactDesign = false;
     this.noMinWidth = false;
-    this.enableMultiselect = false;
+    this.multiselect = false;
     this.enableToolbarDesign = false;
     this.tableId = '';
-    this.enableExpandableRows = false;
+    this.expandableRows = false;
   }
   internalTdsPropChangeListener(event) {
     if (this.tableId === event.detail.tableId) {
@@ -134,7 +134,7 @@ export class TdsTableHeaderCell {
         'tds-table--compact': this.compactDesign,
         'tds-table--divider': this.verticalDividers,
         'tds-table--no-min-width': this.noMinWidth,
-        'tds-table--extra-column': this.enableMultiselect || this.enableExpandableRows,
+        'tds-table--extra-column': this.multiselect || this.expandableRows,
         'tds-table--toolbar-available': this.enableToolbarDesign,
       }, style: { width: this.customWidth },
       // Calling actions from here to enable hover functionality for both sortable and un-sortable Tables
@@ -251,10 +251,10 @@ export class TdsTableHeaderCell {
       "verticalDividers": {},
       "compactDesign": {},
       "noMinWidth": {},
-      "enableMultiselect": {},
+      "multiselect": {},
       "enableToolbarDesign": {},
       "tableId": {},
-      "enableExpandableRows": {}
+      "expandableRows": {}
     };
   }
   static get events() {

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

@@ -10,7 +10,7 @@ const relevantTableProps = [
 export class TdsTableToolbar {
   constructor() {
     this.tableTitle = '';
-    this.enableFiltering = false;
+    this.filter = false;
     this.verticalDividers = false;
     this.compactDesign = false;
     this.noMinWidth = false;
@@ -59,7 +59,7 @@ export class TdsTableToolbar {
     }
   }
   render() {
-    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("div", { class: "tds-table__upper-bar-flex" }, h("caption", { class: "tds-table__title" }, this.tableTitle), h("div", { class: "tds-table__actionbar" }, this.enableFiltering && (h("div", { class: "tds-table__searchbar" }, h("input", { class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.searchFunction(event) }), h("span", { class: "tds-table__searchbar-icon" }, h("tds-icon", { name: "search", size: "20px" })))), h("slot", { name: "end" })))));
+    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("div", { class: "tds-table__upper-bar-flex" }, h("caption", { class: "tds-table__title" }, this.tableTitle), h("div", { class: "tds-table__actionbar" }, this.filter && (h("div", { class: "tds-table__searchbar" }, h("input", { class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.searchFunction(event) }), h("span", { class: "tds-table__searchbar-icon" }, h("tds-icon", { name: "search", size: "20px" })))), h("slot", { name: "end" })))));
   }
   static get is() { return "tds-table-toolbar"; }
   static get encapsulation() { return "shadow"; }
@@ -93,7 +93,7 @@ export class TdsTableToolbar {
         "reflect": true,
         "defaultValue": "''"
       },
-      "enableFiltering": {
+      "filter": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -107,7 +107,7 @@ export class TdsTableToolbar {
           "tags": [],
           "text": "Enables preview of searchbar"
         },
-        "attribute": "enable-filtering",
+        "attribute": "filter",
         "reflect": true,
         "defaultValue": "false"
       }

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

@@ -13,7 +13,7 @@ describe('tds-table filtering', () => {
     const matchingCellSpy = jest.fn();
     const page = await newSpecPage({
       components: [TdsTable, TdsTableToolbar, TdsTableHeaderRow, TdsTableHeaderCell, TdsTableBody],
-      template: () => (h("tds-table", { "table-id": "unique-test-id" }, h("tds-table-toolbar", { "table-title": "Filter me", enableFiltering: true }), h("tds-table-header", null, h("tds-header-cell", { "column-key": columnKeys[0] }), h("tds-header-cell", { "column-key": columnKeys[1] }), h("tds-header-cell", { "column-key": columnKeys[2] }), h("tds-header-cell", { "column-key": columnKeys[3] })), h("tds-table-body", null, h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "L-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Sonya Bruce", onClick: (e) => matchingCellSpy(e) }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Brazil" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "123987" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "P-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Guerra Bowman" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Sweden" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "2000852" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "G-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Ferrell Wallace", onClick: (e) => mismatchingCellSpy(e) }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Germany" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "564" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "R-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Cox Burris" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Spain" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "1789357" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "S-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Montgomery Cervantes" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Croatia" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "65" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "L-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Sheryl Nielsen" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Greece" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "365784" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "G-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Benton Gomez" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "France" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "80957" }))))),
+      template: () => (h("tds-table", { "table-id": "unique-test-id" }, h("tds-table-toolbar", { "table-title": "Filter me", filter: true }), h("tds-table-header", null, h("tds-header-cell", { "column-key": columnKeys[0] }), h("tds-header-cell", { "column-key": columnKeys[1] }), h("tds-header-cell", { "column-key": columnKeys[2] }), h("tds-header-cell", { "column-key": columnKeys[3] })), h("tds-table-body", null, h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "L-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Sonya Bruce", onClick: (e) => matchingCellSpy(e) }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Brazil" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "123987" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "P-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Guerra Bowman" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Sweden" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "2000852" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "G-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Ferrell Wallace", onClick: (e) => mismatchingCellSpy(e) }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Germany" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "564" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "R-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Cox Burris" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Spain" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "1789357" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "S-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Montgomery Cervantes" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Croatia" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "65" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "L-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Sheryl Nielsen" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Greece" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "365784" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "G-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Benton Gomez" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "France" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "80957" }))))),
     });
     const toolbarEl = await page.doc.querySelector('tds-table-toolbar');
     const inputEl = toolbarEl.shadowRoot.querySelector('input');

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab link or button.
+ */
 export class TdsFolderTab {
   constructor() {
     this.disabled = false;

package/dist/collection/components/tabs/folder-tabs/folder-tabs.js

@@ -1,4 +1,7 @@
 import { Host, h, } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
+ */
 export class TdsFolderTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons

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

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab link or button.
+ */
 export class TdsInlineTab {
   constructor() {
     this.disabled = false;

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

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
+ */
 export class TdsInlineTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons

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

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab link or button.
+ */
 export class TdsNavigationTab {
   constructor() {
     this.disabled = false;

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

@@ -1,4 +1,7 @@
 import { Host, h, } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
+ */
 export class TdsNavigationTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons

package/dist/collection/components/text-field/text-field.css

@@ -14,8 +14,7 @@
   padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
 }
 .text-field-input-lg::placeholder {
-  opacity: 1;
-  color: var(--tds-text-field-placeholder);
+  color: var(--tds-text-field-color);
 }
 .text-field-input-lg:focus::placeholder {
   color: var(--tds-text-field-placeholder-focus-color);
@@ -48,8 +47,7 @@
   padding: var(--tds-spacing-element-16);
 }
 .text-field-input-md::placeholder {
-  opacity: 1;
-  color: var(--tds-text-field-placeholder);
+  color: var(--tds-text-field-color);
 }
 .text-field-input-md:focus::placeholder {
   color: var(--tds-text-field-placeholder-focus-color);
@@ -82,8 +80,7 @@
   padding: var(--tds-spacing-element-16);
 }
 .text-field-input-sm::placeholder {
-  opacity: 1;
-  color: var(--tds-text-field-placeholder);
+  color: var(--tds-text-field-color);
 }
 .text-field-input-sm:focus::placeholder {
   color: var(--tds-text-field-placeholder-focus-color);
@@ -125,6 +122,11 @@
   width: 100%;
 }
 
+.text-field-data,
+.text-field-input {
+  color: var(--tds-text-field-data-color);
+}
+
 .text-field-label-outside > * {
   font: var(--tds-detail-05);
   letter-spacing: var(--tds-detail-05-ls);

package/dist/collection/components/toast/toast.css

@@ -4,7 +4,7 @@
 }
 
 :host {
-  z-index: 700;
+  z-index: 800;
 }
 :host .wrapper {
   display: flex;

package/dist/collection/components/toast/toast.js

@@ -8,7 +8,7 @@ import { generateUniqueId, hasSlot } from '../../utils/utils';
 export class TdsToast {
   constructor() {
     this.getIconName = () => {
-      switch (this.type) {
+      switch (this.variant) {
         case 'information':
           return 'info';
         case 'error':
@@ -40,7 +40,7 @@ export class TdsToast {
     this.toastId = generateUniqueId();
     this.header = undefined;
     this.subheader = undefined;
-    this.type = 'information';
+    this.variant = 'information';
     this.hidden = false;
     this.toastRole = 'alert';
   }
@@ -58,7 +58,7 @@ export class TdsToast {
     const usesBottomSlot = hasSlot('bottom', this.host);
     return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
             wrapper
-            ${this.type}` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesBottomSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "bottom" })))), h("button", { onClick: () => {
+            ${this.variant}` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesBottomSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "bottom" })))), h("button", { onClick: () => {
         this.handleClose();
       }, class: `close` }, h("tds-icon", { name: "cross", size: "20px" })))));
   }
@@ -128,7 +128,7 @@ export class TdsToast {
         "attribute": "subheader",
         "reflect": false
       },
-      "type": {
+      "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -142,7 +142,7 @@ export class TdsToast {
           "tags": [],
           "text": "Type of Toast."
         },
-        "attribute": "type",
+        "attribute": "variant",
         "reflect": false,
         "defaultValue": "'information'"
       },

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

@@ -20,9 +20,9 @@ export default {
     ],
   },
   argTypes: {
-    type: {
-      name: 'Message type',
-      description: 'Changes the type of Toast.',
+    variant: {
+      name: 'Message variant',
+      description: 'Changes the variant of Toast.',
       control: {
         type: 'radio',
       },
@@ -56,14 +56,14 @@ export default {
     },
   },
   args: {
-    type: 'Information',
+    variant: 'Information',
     header: 'Header',
     subheader: 'Subheader',
     bottom: '<a slot="bottom" href="#">This is a link.</a>',
   },
 };
-const Template = ({ type, header, subheader, bottom }) => formatHtmlPreview(`<tds-toast
-        type="${type.toLowerCase()}"
+const Template = ({ variant, header, subheader, bottom }) => formatHtmlPreview(`<tds-toast
+        variant="${variant.toLowerCase()}"
         header="${header}"
         ${subheader ? `subheader="${subheader}"` : ''}
     >

package/dist/collection/components/tooltip/tooltip.css

@@ -19,7 +19,7 @@
   padding: 8px;
   word-wrap: break-word;
   max-width: 192px;
-  z-index: 800;
+  z-index: 900;
   opacity: 0;
   visibility: hidden;
   transition: opacity 200ms ease-in, visibility 200ms ease-in;