@scania/tegel 0.0.10 → 0.0.12

package/dist/collection/components/popover-menu/popover-menu.js

@@ -1,77 +1,30 @@
 import { Host, h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
+import { inheritAttributes } from '../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the list of menu items.
+ */
 export class TdsPopoverMenu {
   constructor() {
+    this.inheritedAttributes = [];
     this.selector = '';
     this.referenceEl = undefined;
-    this.show = false;
+    this.show = null;
     this.placement = 'auto';
     this.offsetSkidding = 0;
     this.offsetDistance = 8;
-    this.renderedShowValue = false;
-    this.popperInstance = undefined;
-    this.target = undefined;
   }
-  handleOutsideClick() {
-    if (this.show) {
-      this.show = false;
-    }
-  }
-  componentDidLoad() {
-    var _a;
-    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-    this.renderedShowValue = this.show;
-    this.popperInstance = createPopper(this.target, this.popoverMenuElement, {
-      strategy: 'fixed',
-      placement: this.placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showMenu = () => {
-      this.show = true;
-    };
-    const hideMenu = () => {
-      this.show = false;
-    };
-    this.target.addEventListener('mousedown', (event) => {
-      event.stopPropagation();
-      if (this.show) {
-        hideMenu();
-      }
-      else {
-        showMenu();
-      }
-    });
-    this.popoverMenuElement.addEventListener('mousemove', (event) => {
-      event.stopPropagation();
-    });
-    this.popoverMenuElement.addEventListener('mousedown', (event) => {
-      event.stopPropagation();
-    });
-  }
-  componentDidRender() {
-    if (this.show && !this.renderedShowValue) {
-      // Here we update the popper position since its position is wrong
-      // before it is rendered.
-      this.popperInstance.update();
-    }
-    this.renderedShowValue = this.show;
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
   }
   render() {
-    return (h(Host, { class: `tds-popover-menu ${this.show ? 'tds-popover-menu-show' : ''}` }, h("slot", null)));
+    var _a;
+    return (h(Host, null, h("tds-popover-core", { class: {
+        'tds-popover-menu': true,
+        [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
+      }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance }, h("slot", null))));
   }
   static get is() { return "tds-popover-menu"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["popover-menu.scss"]
@@ -133,11 +86,11 @@ export class TdsPopoverMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Decides if the Popover Menu should be visible from the start"
+          "text": "Controls whether the Popover is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside. This\nalso means that clicking outside of the popover won't close it."
         },
         "attribute": "show",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "null"
       },
       "placement": {
         "type": "string",
@@ -200,21 +153,5 @@ export class TdsPopoverMenu {
       }
     };
   }
-  static get states() {
-    return {
-      "renderedShowValue": {},
-      "popperInstance": {},
-      "target": {}
-    };
-  }
-  static get elementRef() { return "popoverMenuElement"; }
-  static get listeners() {
-    return [{
-        "name": "mousedown",
-        "method": "handleOutsideClick",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/components/popover-menu/popover-menu.stories.js

@@ -34,7 +34,7 @@ export default {
         'Top start',
         'Top end',
         'Left',
-        'Left-start',
+        'Left start',
         'Left end',
         'Right',
         'Right start',
@@ -67,7 +67,7 @@ const Template = ({ menuPosition, icons }) => {
     'Top start': 'top-start',
     'Top end': 'top-end',
     'Left': 'left',
-    'Left star': 'left-start',
+    'Left start': 'left-start',
     'Left end': 'left-end',
     'Right': 'right',
     'Right start': 'right-start',
@@ -130,7 +130,7 @@ const Template = ({ menuPosition, icons }) => {
         <tds-icon slot="icon" size="16px" name="kebab"></tds-icon>
       </tds-button>
     </div>
-
+    
     <script>
       // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React 
       document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');

package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.js

@@ -1,6 +1,6 @@
 import { h, Host } from '@stencil/core';
 /**
- * @slot <default>  - <b>Unnamed slot.</b> Used for injecting text presented in collapse button
+ * @slot <default>  - <b>Unnamed slot.</b> For the text label of the button.
  * */
 export class TdsSideMenuCollapseButton {
   constructor() {

package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.js

@@ -2,7 +2,7 @@ import { Fragment, h, Host } from '@stencil/core';
 /**
  * @slot button-icon - Used for injecting the icon that compliments the dropdown title
  * @slot button-label - Used for injecting the text, aka dropdown title
- * @slot <default>  - <b>Unnamed slot.</b> Used for injection of <code>tds-side-menu-dropdown-list</code> subcomponent
+ * @slot <default> - <b>Unnamed slot.</b> For injection of the <code>tds-side-menu-dropdown-list</code> subcomponent.
  * */
 export class TdsSideMenuDropdown {
   constructor() {

package/dist/collection/components/side-menu/side-menu-dropdown-list/side-menu-dropdown-list.js

@@ -1,6 +1,6 @@
 import { Host, h } from '@stencil/core';
 /**
- * @slot <default>  - <b>Unnamed slot.</b> Used for injection of <code>tds-side-menu-dropdown-list-item</code> subcomponent
+ * @slot <default>  - <b>Unnamed slot.</b> For injection of <code>tds-side-menu-dropdown-list-item</code> subcomponents.
  * */
 export class TdsSideMenuDropdownList {
   constructor() {

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.js

@@ -1,6 +1,6 @@
 import { h, Host } from '@stencil/core';
 /**
- * @slot <default>  - <b>Unnamed slot.</b> Used for injecting native <code>button</code> and <code>link</code> elements
+ * @slot <default> - <b>Unnamed slot.</b> For injecting a native <code>&lt;button></code> or <code>&lt;a></code> element.
  * */
 export class TdsSideMenuDropdownListItem {
   constructor() {

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.js

@@ -1,7 +1,7 @@
 import { h, Host } from '@stencil/core';
 import { dfs } from '../../../utils/utils';
 /**
- * @slot <default>  - <b>Unnamed slot.</b> Used for injecting native <code>button</code> and <code>link</code> elements
+ * @slot <default> - <b>Unnamed slot.</b> For injecting a native <code>&lt;button</code> and <code>&lt;a></code> element.
  * */
 export class TdsSideMenuItem {
   constructor() {

package/dist/collection/components/side-menu/side-menu-overlay/side-menu-overlay.css

@@ -1,8 +1,15 @@
 :host {
-  position: absolute;
+  position: fixed;
   width: 100%;
   height: 100%;
   background-color: black;
   transition: opacity 0.4s linear;
   opacity: 0;
+}
+
+div {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 }

package/dist/collection/components/side-menu/side-menu.css

@@ -9,6 +9,7 @@
   top: 0;
   width: 100%;
   height: 100%;
+  z-index: 400;
 }
 :host .wrapper {
   height: inherit;
@@ -48,41 +49,41 @@
 }
 
 @media (max-width: 992px) {
-  :host([open]) {
+  :host(.menu-opened) {
     pointer-events: auto;
-    z-index: 301;
+    z-index: 400;
   }
 }
 @media (min-width: 992px) {
-  :host([persistent]) {
+  :host(.menu-persistent) {
     pointer-events: auto;
     position: static;
     width: 272px;
     height: auto;
     border-right: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
   }
-  :host([persistent]) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay) {
+  :host(.menu-persistent) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay) {
     display: none;
   }
-  :host([persistent]) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button) {
+  :host(.menu-persistent) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button) {
     display: none;
   }
-  :host([persistent]) .wrapper .tds-side-menu-wrapper {
+  :host(.menu-persistent) .wrapper .tds-side-menu-wrapper {
     transform: none;
   }
-  :host([persistent]) .menu {
+  :host(.menu-persistent) .menu {
     width: 272px;
   }
-  :host([persistent]) .state-closed {
+  :host(.menu-persistent) .state-closed {
     display: block;
   }
-  :host([persistent]):host([collapsed]) {
+  :host(.menu-persistent):host(.menu-collapsed) {
     width: 69px;
   }
-  :host([persistent]):host([collapsed]) .menu {
+  :host(.menu-persistent):host(.menu-collapsed) .menu {
     width: 68px;
   }
-  :host([persistent]) slot[name=end]::slotted(*) {
+  :host(.menu-persistent) slot[name=end]::slotted(*) {
     display: none;
   }
 }

package/dist/collection/components/side-menu/side-menu.js

@@ -6,7 +6,7 @@ const INITIALIZE_ANIMATION_DELAY = 500;
 /**
  * @slot overlay - Used of injection of tds-side-menu-overlay
  * @slot close-button - Used for injection of tds-side-menu-close-button that is show when in mobile view
- * @slot <default> - <b>Unnamed slot.</b>
+ * @slot <default> - <b>Unnamed slot.</b> For primary content of the side menu - like buttons.
  * Used for nesting main content of Side Menu, e.g. <code><tds-side-menu-item></code> and <code><tds-side-menu-dropdown></code> components
  * @slot end - Used for items that are presented at the bottom of the Side Menu, e.g. profile settings
  * @slot sticky-end - Used for tds-side-menu-collapse-button component
@@ -93,7 +93,11 @@ export class TdsSideMenu {
     this.isClosed = true;
   }
   render() {
-    return (h(Host, { role: "navigation" }, h("div", { class: {
+    return (h(Host, { role: "navigation", class: {
+        'menu-opened': this.open,
+        'menu-persistent': this.persistent,
+        'menu-collapsed': this.collapsed,
+      } }, h("div", { class: {
         'wrapper': true,
         'state-upper-slot-empty': this.isUpperSlotEmpty,
         'state-open': this.isOpen || this.isOpening,
@@ -129,7 +133,7 @@ export class TdsSideMenu {
           "text": "Applicable only for mobile. If the Side Menu is open or not."
         },
         "attribute": "open",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       },
       "persistent": {
@@ -147,7 +151,7 @@ export class TdsSideMenu {
           "text": "Applicable only for desktop. If the Side Menu should always be shown."
         },
         "attribute": "persistent",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       },
       "collapsed": {
@@ -165,7 +169,7 @@ export class TdsSideMenu {
           "text": "If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.\nNOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tds-Collapse event."
         },
         "attribute": "collapsed",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       }
     };

package/dist/collection/components/slider/slider.js

@@ -316,7 +316,11 @@ export class TdsSlider {
     }
   }
   render() {
-    return (h("div", { class: `tds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "tds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: `tds-slider ${this.disabled ? 'disabled' : ''} ${this.useSmall ? 'tds-slider-small' : ''}`, ref: (el) => {
+    return (h("div", { class: `tds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "tds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: {
+        'tds-slider': true,
+        'disabled': this.disabled,
+        'tds-slider-small': this.useSmall,
+      }, ref: (el) => {
         this.wrapperElement = el;
       } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { ref: (el) => {
         this.minusElement = el;

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

@@ -1,5 +1,8 @@
 import { Host, h } from '@stencil/core';
 import { generateUniqueId } from '../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the step elements.
+ */
 export class TdsStepper {
   constructor() {
     this.orientation = 'horizontal';

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

@@ -2,14 +2,17 @@
 // https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641
 import { h, Host } from '@stencil/core';
 import { generateUniqueId } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the table contents.
+ */
 export class TdsTable {
   constructor() {
     this.verticalDividers = false;
     this.compactDesign = false;
     this.noMinWidth = undefined;
-    this.enableMultiselect = false;
-    this.enableExpandableRows = false;
-    this.enableResponsive = false;
+    this.multiselect = false;
+    this.expandableRows = false;
+    this.responsive = false;
     this.modeVariant = null;
     this.tableId = generateUniqueId();
   }
@@ -21,10 +24,10 @@ export class TdsTable {
     });
   }
   enableMultiselectChanged(newValue) {
-    this.emitInternalTdsPropChange('enableMultiselect', newValue);
+    this.emitInternalTdsPropChange('multiselect', newValue);
   }
   enableExpandableRowsChanged(newValue) {
-    this.emitInternalTdsPropChange('enableExpandableRows', newValue);
+    this.emitInternalTdsPropChange('expandableRows', newValue);
   }
   compactDesignChanged(newValue) {
     this.emitInternalTdsPropChange('compactDesign', newValue);
@@ -39,12 +42,16 @@ export class TdsTable {
     this.emitInternalTdsPropChange('modeVariant', newValue);
   }
   render() {
-    return (h(Host, { class: { 'tds-table--responsive': this.enableResponsive } }, h("table", { class: {
+    return (h(Host, { class: {
+        'tds-table--responsive': this.responsive,
+        'tds-mode-variant-primary': this.modeVariant === 'primary',
+        'tds-mode-variant-secondary': this.modeVariant === 'secondary',
+      } }, h("table", { class: {
         'tds-table': true,
         'tds-table--compact': this.compactDesign,
         'tds-table--divider': this.verticalDividers,
         'tds-table--no-min-width': this.noMinWidth,
-        'tds-table--responsive': this.enableResponsive,
+        'tds-table--responsive': this.responsive,
       } }, h("slot", null))));
   }
   static get is() { return "tds-table"; }
@@ -114,7 +121,7 @@ export class TdsTable {
         "attribute": "no-min-width",
         "reflect": true
       },
-      "enableMultiselect": {
+      "multiselect": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -128,11 +135,11 @@ export class TdsTable {
           "tags": [],
           "text": "Enables multiselect feature of Table"
         },
-        "attribute": "enable-multiselect",
+        "attribute": "multiselect",
         "reflect": true,
         "defaultValue": "false"
       },
-      "enableExpandableRows": {
+      "expandableRows": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -146,11 +153,11 @@ export class TdsTable {
           "tags": [],
           "text": "Enables extended row feature of Table"
         },
-        "attribute": "enable-expandable-rows",
+        "attribute": "expandable-rows",
         "reflect": true,
         "defaultValue": "false"
       },
-      "enableResponsive": {
+      "responsive": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -164,7 +171,7 @@ export class TdsTable {
           "tags": [],
           "text": "Enables Table to take 100% available width with equal spacing of columns"
         },
-        "attribute": "enable-responsive",
+        "attribute": "responsive",
         "reflect": true,
         "defaultValue": "false"
       },
@@ -235,10 +242,10 @@ export class TdsTable {
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{
-        "propName": "enableMultiselect",
+        "propName": "multiselect",
         "methodName": "enableMultiselectChanged"
       }, {
-        "propName": "enableExpandableRows",
+        "propName": "expandableRows",
         "methodName": "enableExpandableRowsChanged"
       }, {
         "propName": "compactDesign",

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

@@ -1,12 +1,9 @@
 import { h, Host, } from '@stencil/core';
-const relevantTableProps = [
-  'enableMultiselect',
-  'enableExpandableRows',
-];
+const relevantTableProps = ['multiselect', 'expandableRows'];
 /**
- * @slot <default> - Default slot for the Table Body, used by <tds-table-body-row>
+ * @slot <default> - <b>Unnamed slot.</b> For table rows.
  * @slot no-result - Slot for no result message when using filtering.
-*/
+ */
 export class TdsTableBody {
   constructor() {
     this.uncheckAll = () => {
@@ -39,9 +36,9 @@ export class TdsTableBody {
     this.bodyData = undefined;
     this.noResultMessage = undefined;
     this.rowsPerPage = 1;
-    this.enableMultiselect = false;
+    this.multiselect = false;
     this.enablePaginationTableBody = false;
-    this.enableExpandableRows = true;
+    this.expandableRows = false;
     this.innerBodyData = [];
     this.bodyDataManipulated = [];
     this.bodyDataOriginal = [];
@@ -98,7 +95,7 @@ export class TdsTableBody {
     };
   }
   sortData(keyValue, sortingDirection) {
-    if (this.enableMultiselect) {
+    if (this.multiselect) {
       // Uncheck all checkboxes as the state of checkbox is lost on sorting. Do it only in case multiSelect is True.
       this.uncheckAll();
     }
@@ -125,7 +122,7 @@ export class TdsTableBody {
   }
   searchFunction(searchTerm) {
     // grab all rows in body
-    const dataRowsFiltering = this.host.querySelectorAll('tds-table-body-row');
+    const dataRowsFiltering = this.host.querySelectorAll('tds-table-body-row, tds-table-body-row-expandable');
     if (searchTerm.length > 0) {
       if (this.enablePaginationTableBody) {
         this.tempPaginationDisable = true;
@@ -190,7 +187,7 @@ export class TdsTableBody {
   componentWillRender() {
     const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
     // multiselect and expended features requires one extra column for controls...
-    if (this.enableMultiselect || this.enableExpandableRows) {
+    if (this.multiselect || this.expandableRows) {
       this.columnsNumber = headerColumnsNo + 1;
     }
     else {
@@ -252,9 +249,9 @@ export class TdsTableBody {
   static get states() {
     return {
       "rowsPerPage": {},
-      "enableMultiselect": {},
+      "multiselect": {},
       "enablePaginationTableBody": {},
-      "enableExpandableRows": {},
+      "expandableRows": {},
       "innerBodyData": {},
       "bodyDataManipulated": {},
       "bodyDataOriginal": {},

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

@@ -4,6 +4,9 @@ const relevantTableProps = [
   'compactDesign',
   'noMinWidth',
 ];
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the cell contents.
+ */
 export class TdsTableBodyCell {
   constructor() {
     this.cellValue = undefined;

package/dist/collection/components/table/table-body-row/table-body-row.css

@@ -20,11 +20,11 @@
 }
 
 :host(.tds-table__row--selected) {
-  background-color: var(--tds-table-body-row-background-active);
+  background-color: var(--tds-table-body-row-background-selected);
 }
 
 :host(.tds-table__row--selected:hover) {
-  background-color: var(--tds-table-body-row-background-active-hover);
+  background-color: var(--tds-table-body-row-background-selected-hover);
 }
 
 :host(.tds-table__row--hidden) {

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

@@ -1,19 +1,20 @@
 import { h, Host } from '@stencil/core';
 const relevantTableProps = [
-  'enableMultiselect',
+  'multiselect',
   'verticalDividers',
   'compactDesign',
-  'modeVariant',
 ];
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the cells.
+ */
 export class TdsTableBodyRow {
   constructor() {
-    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) {
@@ -79,9 +80,7 @@ export class TdsTableBodyRow {
         '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)));
   }
   static get is() { return "tds-table-body-row"; }
   static get encapsulation() { return "shadow"; }
@@ -97,13 +96,12 @@ export class TdsTableBodyRow {
   }
   static get states() {
     return {
-      "enableMultiselect": {},
+      "multiselect": {},
       "bodyCheckBoxStatus": {},
       "mainCheckBoxStatus": {},
       "verticalDividers": {},
       "compactDesign": {},
       "noMinWidth": {},
-      "modeVariant": {},
       "tableId": {}
     };
   }

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

@@ -72,6 +72,10 @@
   padding: 8px 16px 8px 66px;
 }
 
+:host(.tds-table__row--hidden) {
+  display: none;
+}
+
 :host(.tds-table--divider) .tds-table__cell--expand {
   border-right: 1px solid var(--tds-table-divider);
 }

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

@@ -6,6 +6,7 @@ const relevantTableProps = [
   'modeVariant',
 ];
 /**
+ * @slot <default> - <b>Unnamed slot.</b> For the cells.
  * @slot expand-row - Slot for the expanded row.
  */
 export class TdsTableBodyRowExpandable {
@@ -64,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>