@scania/tegel 0.0.11 → 0.0.12

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

@@ -65,8 +65,6 @@ export class TdsTableBodyRowExpandable {
         'tds-table__row-expand--active': this.isExpanded,
         'tds-table__compact': this.compactDesign,
         'tds-table--divider': this.verticalDividers,
-        'tds-mode-variant-primary': this.modeVariant === 'primary',
-        'tds-mode-variant-secondary': this.modeVariant === 'secondary',
       } }, h("tr", { class: "tds-table__row" }, h("td", { class: "tds-table__cell tds-table__cell--expand" }, h("label", { class: "tds-table__expand-control-container" }, h("input", { class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { class: "tds-expendable-row-icon" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", null)), h("tr", { class: "tds-table__row-expand" }, h("td", { class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { name: "expand-row" })))));
   }
   static get is() { return "tds-table-body-row-expandable"; }

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

@@ -133,7 +133,7 @@ const BasicTemplate = ({ modeVariant, compactDesign, responsiveDesign, disablePa
   <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()}"` : ''}>
       <tds-table-header>

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,7 +1,7 @@
 import { h, Host } from '@stencil/core';
 const relevantTableProps = [
-  'enableMultiselect',
-  'enableExpandableRows',
+  'multiselect',
+  'expandableRows',
   'verticalDividers',
   'compactDesign',
   'noMinWidth',
@@ -11,8 +11,8 @@ const relevantTableProps = [
  */
 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;
@@ -84,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"; }
@@ -100,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/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/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;

package/dist/collection/stories/patterns/navigation/navigation-manyitems.stories.js

@@ -159,7 +159,7 @@ const Template = ({ dummyHtml }) => formatHtmlPreview(`
     <div class="demo-wrap-side-menu-and-main">
       <!-- Note: the "persistent" property keeps the menu open on desktop -->
       <tds-side-menu id="demo-side-menu" aria-label="Side menu" persistent>
-        <tds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></tds-side-menu-overlay>
+        <tds-side-menu-overlay slot="overlay"></tds-side-menu-overlay>
 
         <tds-side-menu-close-button slot="close-button" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></tds-side-menu-close-button>
 
@@ -231,6 +231,7 @@ const Template = ({ dummyHtml }) => formatHtmlPreview(`
       </tds-side-menu>
 
       <main class="tds-u-h-100 tds-u-p3" style="box-sizing: border-box;">
+      <button class='tds-u-absolute tds-u-right0' onclick='console.log("Button clicked")'>Test button</button>
         <p>If there are more than a few buttons and/or links in the Header, they might not fit on medium size screens. 
         <br/>In that case they should be placed in a persistent side menu — which is always visible on large screens.</p>
 

package/dist/components/popover-canvas.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { e as inheritAttributes } from './utils.js';
 import { d as defineCustomElement$1 } from './popover-core.js';
 
-const popoverCanvasCss = ".tds-popover-canvas.sc-tds-popover-canvas{box-sizing:border-box;display:inline-block;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800}.tds-popover-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}";
+const popoverCanvasCss = ".tds-popover-canvas.sc-tds-popover-canvas{box-sizing:border-box;display:inline-block;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:900}.tds-popover-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}";
 
 const TdsPopoverCanvas = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCanvas extends HTMLElement {
   constructor() {

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

@@ -1,13 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './checkbox.js';
 
-const tableBodyRowCss = ":host(.tds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host(.tds-table__row) *{box-sizing:border-box}:host(.tds-table__row) .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.tds-table__row:hover){background-color:var(--tds-table-body-row-background-hover)}:host(.tds-table__row--selected){background-color:var(--tds-table-body-row-background-active)}:host(.tds-table__row--selected:hover){background-color:var(--tds-table-body-row-background-active-hover)}:host(.tds-table__row--hidden){display:none}:host(.tds-table__row--expended){width:100%;background-color:pink}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.tds-table__compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__body-cell--checkbox{border-right:1px solid var(--tds-table-divider)}";
+const tableBodyRowCss = ":host(.tds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host(.tds-table__row) *{box-sizing:border-box}:host(.tds-table__row) .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.tds-table__row:hover){background-color:var(--tds-table-body-row-background-hover)}:host(.tds-table__row--selected){background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row--selected:hover){background-color:var(--tds-table-body-row-background-selected-hover)}:host(.tds-table__row--hidden){display:none}:host(.tds-table__row--expended){width:100%;background-color:pink}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.tds-table__compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__body-cell--checkbox{border-right:1px solid var(--tds-table-divider)}";
 
 const relevantTableProps = [
-  'enableMultiselect',
+  'multiselect',
   'verticalDividers',
   'compactDesign',
-  'modeVariant',
 ];
 const TdsTableBodyRow = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow extends HTMLElement {
   constructor() {
@@ -16,13 +15,12 @@ const TdsTableBodyRow = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow e
     this.__attachShadow();
     this.internalTdsRowChange = createEvent(this, "internalTdsRowChange", 6);
     this.internalTdsPagination = createEvent(this, "internalTdsPagination", 6);
-    this.enableMultiselect = false;
+    this.multiselect = false;
     this.bodyCheckBoxStatus = false;
     this.mainCheckBoxStatus = false;
     this.verticalDividers = false;
     this.compactDesign = false;
     this.noMinWidth = false;
-    this.modeVariant = null;
     this.tableId = '';
   }
   bodyCheckBoxClicked(event) {
@@ -88,20 +86,17 @@ const TdsTableBodyRow = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow e
         'tds-table__row': true,
         'tds-table__compact': this.compactDesign,
         'tds-table--divider': this.verticalDividers,
-        'tds-mode-variant-primary': this.modeVariant === 'primary',
-        'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-      } }, this.enableMultiselect && (h("td", { class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { onTdsChange: (event) => this.bodyCheckBoxClicked(event), checked: this.bodyCheckBoxStatus }))), h("slot", null)));
+      } }, this.multiselect && (h("td", { class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { onTdsChange: (event) => this.bodyCheckBoxClicked(event), checked: this.bodyCheckBoxStatus }))), h("slot", null)));
   }
   get host() { return this; }
   static get style() { return tableBodyRowCss; }
 }, [1, "tds-table-body-row", {
-    "enableMultiselect": [32],
+    "multiselect": [32],
     "bodyCheckBoxStatus": [32],
     "mainCheckBoxStatus": [32],
     "verticalDividers": [32],
     "compactDesign": [32],
     "noMinWidth": [32],
-    "modeVariant": [32],
     "tableId": [32]
   }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"], [16, "internalTdsMainCheckboxSelect", "headCheckboxListener"], [16, "internalTdsCheckboxChange", "internalTdsCheckboxChangeListener"]]]);
 function defineCustomElement() {

package/dist/components/tds-banner.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { g as generateUniqueId, h as hasSlot } from './utils.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const bannerCss = ":root,.tds-mode-light{--tds-link:var(--tds-blue-500);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-grey-900);--tds-link-disabled:var(--tds-grey-400)}.tds-mode-dark{--tds-link:var(--tds-blue-300);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-blue-100);--tds-link-disabled:var(--tds-grey-800)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .content{color:var(--tds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .content.no-icon{padding-left:16px}:host .header-subheader{display:flex;flex-direction:column;gap:4px}:host .header,:host slot[name=header]{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .subheader,:host slot[name=subheader]{display:block;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host slot[name=bottom]::slotted(*){display:block;width:fit-content;margin-top:16px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
+const bannerCss = ":root,.tds-mode-light{--tds-link:var(--tds-blue-500);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-grey-900);--tds-link-disabled:var(--tds-grey-400)}.tds-mode-dark{--tds-link:var(--tds-blue-300);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-blue-100);--tds-link-disabled:var(--tds-grey-800)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:500}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .content{color:var(--tds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .content.no-icon{padding-left:16px}:host .header-subheader{display:flex;flex-direction:column;gap:4px}:host .header,:host slot[name=header]{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .subheader,:host slot[name=subheader]{display:block;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host slot[name=bottom]::slotted(*){display:block;width:fit-content;margin-top:16px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
 
 const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends HTMLElement {
   constructor() {
@@ -30,7 +30,7 @@ const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends HTM
     this.icon = undefined;
     this.header = undefined;
     this.subheader = undefined;
-    this.variant = 'none';
+    this.variant = 'default';
     this.bannerId = generateUniqueId();
     this.persistent = false;
     this.hidden = false;