@scania/tegel 0.0.10 → 0.0.12

package/dist/{cjs/popper-d7adcfc6.js → esm/tds-popover-core.entry.js}

@@ -1,4 +1,4 @@
-'use strict';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-23ee700b.js';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -1791,4 +1791,157 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-exports.createPopper = createPopper;
+const TdsPopoverCore = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tdsShow = createEvent(this, "internalTdsShow", 0);
+    this.tdsClose = createEvent(this, "internalTdsClose", 0);
+    this.setIsShown = function setIsShown(isShown) {
+      if (typeof isShown === 'function') {
+        this.isShown = isShown(this.isShown);
+      }
+      else {
+        this.isShown = isShown;
+      }
+      if (this.isShown) {
+        this.tdsShow.emit();
+      }
+      else {
+        this.tdsClose.emit();
+      }
+    }.bind(this);
+    this.onClickTarget = function onClickTarget(event) {
+      event.stopPropagation();
+      this.setIsShown((isShown) => !isShown);
+    }.bind(this);
+    this.handleShow = function handleShow(event) {
+      event.stopPropagation();
+      this.setIsShown(true);
+    }.bind(this);
+    this.handleHide = function handleShow(event) {
+      event.stopPropagation();
+      this.setIsShown(false);
+    }.bind(this);
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.show = null;
+    this.placement = 'auto';
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.modifiers = [];
+    this.trigger = 'click';
+    this.autoHide = true;
+    this.renderedShowValue = false;
+    this.popperInstance = undefined;
+    this.target = undefined;
+    this.isShown = false;
+  }
+  onAnyClick(event) {
+    if (this.trigger === 'click' && this.isShown && this.show === null) {
+      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
+      const isClickOutside = !event.composedPath().includes(this.host);
+      if (isClickOutside) {
+        this.setIsShown(false);
+      }
+    }
+  }
+  onShowChange(newValue) {
+    this.setIsShown(newValue);
+  }
+  onReferenceElChanged(newValue, oldValue) {
+    if (newValue !== oldValue)
+      this.initialize({ referenceEl: newValue, trigger: this.trigger });
+  }
+  onTriggerChanged(newValue) {
+    this.initialize({
+      referenceEl: this.referenceEl,
+      trigger: newValue,
+    });
+  }
+  initialize({ referenceEl, trigger, }) {
+    this.cleanUp();
+    if (typeof referenceEl !== 'undefined') {
+      this.target = referenceEl;
+    }
+    else {
+      this.target = this.selector ? document.querySelector(this.selector) : null;
+    }
+    this.popperInstance = this.target
+      ? createPopper(this.target, this.host, {
+        strategy: 'fixed',
+        placement: this.placement,
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [this.offsetSkidding, this.offsetDistance],
+            },
+          },
+          ...this.modifiers,
+        ],
+      })
+      : null;
+    if (!this.popperInstance) {
+      console.error(`Could not initialize: reference element not found.`);
+    }
+    if (trigger === 'click' && this.show === null) {
+      this.target.addEventListener('click', this.onClickTarget);
+    }
+    if (trigger === 'hover' || trigger === 'hover-popover') {
+      // For tabbing over element
+      this.target.addEventListener('focusin', this.handleShow);
+      this.target.addEventListener('focusout', this.handleHide);
+      // For hovering over element with selector
+      this.target.addEventListener('mouseenter', this.handleShow);
+      this.target.addEventListener('mouseleave', this.handleHide);
+      // For hovering over Popover itself
+      if (trigger === 'hover-popover') {
+        this.host.addEventListener('mouseenter', this.handleShow);
+        this.host.addEventListener('mouseleave', this.handleHide);
+      }
+    }
+  }
+  cleanUp() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    (_a = this.target) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.onClickTarget);
+    (_b = this.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('focusin', this.handleShow);
+    (_c = this.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusout', this.handleHide);
+    (_d = this.target) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseenter', this.handleShow);
+    (_e = this.target) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseleave', this.handleHide);
+    (_f = this.host) === null || _f === void 0 ? void 0 : _f.removeEventListener('mouseenter', this.handleShow);
+    (_g = this.host) === null || _g === void 0 ? void 0 : _g.removeEventListener('mouseleave', this.handleHide);
+    (_h = this.popperInstance) === null || _h === void 0 ? void 0 : _h.destroy();
+  }
+  componentDidLoad() {
+    this.initialize({
+      referenceEl: this.referenceEl,
+      trigger: this.trigger,
+    });
+  }
+  componentDidRender() {
+    if (this.isShown && !this.renderedShowValue) {
+      // Here we update the popper position since its position is wrong
+      // before it is rendered.
+      this.popperInstance.update();
+    }
+    this.renderedShowValue = this.isShown;
+  }
+  disconnectedCallback() {
+    this.cleanUp();
+  }
+  render() {
+    let hostStyle = {};
+    if (this.autoHide) {
+      hostStyle = { display: this.isShown ? 'block' : 'none' };
+    }
+    return (h(Host, { style: hostStyle }, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "show": ["onShowChange"],
+    "referenceEl": ["onReferenceElChanged"],
+    "trigger": ["onTriggerChanged"]
+  }; }
+};
+
+export { TdsPopoverCore as tds_popover_core };

package/dist/esm/tds-popover-menu.entry.js

@@ -1,80 +1,30 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { c as createPopper } from './popper-15e448b4.js';
+import { j as inheritAttributes } from './utils-8544b156.js';
 
-const popoverMenuCss = ":host{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--tds-popover-menu-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;display:none;z-index:800}:host *{box-sizing:border-box}:host(.tds-popover-menu-show){opacity:1;display:block}";
+const popoverMenuCss = ".tds-popover-menu.sc-tds-popover-menu{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--tds-popover-menu-background);padding:16px;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-menu.sc-tds-popover-menu *.sc-tds-popover-menu{box-sizing:border-box}";
 
 const TdsPopoverMenu = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    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))));
   }
-  get popoverMenuElement() { return getElement(this); }
+  get host() { return getElement(this); }
 };
 TdsPopoverMenu.style = popoverMenuCss;
 

package/dist/esm/tds-radio-button.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-23ee700b.js';
-import { g as generateUniqueId } from './utils-74fb1bed.js';
+import { g as generateUniqueId } from './utils-8544b156.js';
 
 const radioButtonCss = ".sc-tds-radio-button:root,.tds-mode-light.sc-tds-radio-button{--tds-radio-button-color:var(--tds-grey-958);--tds-radio-button-interaction-01:var(--tds-blue-800);--tds-radio-button-interaction-02:var(--tds-white);--tds-radio-button-background-hover:var(--tds-blue-800);--tds-radio-button-background-focus:var(--tds-blue-800);--tds-radio-button-disabled:var(--tds-grey-600);--tds-radio-button-border-color-disabled-after:var(--tds-grey-500);--tds-radio-button-color-disabled-after:var(--tds-grey-700);--tds-radio-button-color-disabled-before:var(--tds-grey-700)}.tds-mode-dark.sc-tds-radio-button{--tds-radio-button-color:var(--tds-white);--tds-radio-button-interaction-01:var(--tds-white);--tds-radio-button-interaction-02:var(--tds-grey-958);--tds-radio-button-background-hover:var(--tds-white);--tds-radio-button-background-focus:var(--tds-white);--tds-radio-button-disabled:var(--tds-grey-600);--tds-radio-button-border-color-disabled-after:var(--tds-grey-700);--tds-radio-button-color-disabled-after:var(--tds-grey-700)}.tds-radio-button.sc-tds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-radio-button-color)}.tds-radio-button.sc-tds-radio-button *.sc-tds-radio-button{box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button{appearance:none;outline:none;margin:0;border:0;width:24px;height:24px;border-radius:50%;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button+label.sc-tds-radio-button{padding:var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);cursor:pointer}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{content:\"\";position:absolute;border-radius:50%;box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before{width:24px;height:24px;left:0;top:0}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{border:1px solid var(--tds-radio-button-interaction-01);background-color:var(--tds-radio-button-interaction-02);width:16px;height:16px;left:4px;top:4px}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:hover::before{background-color:var(--tds-radio-button-background-hover);opacity:0.12}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:focus::before{background-color:var(--tds-radio-button-background-focus);opacity:0.24;animation:rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button{cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button::after{border-color:var(--tds-radio-button-border-color-disabled-after);background-color:var(--tds-radio-button-interaction-02)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled+label.sc-tds-radio-button,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button+label.sc-tds-radio-button{color:var(--tds-radio-button-disabled);cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button:hover::before{display:none;opacity:1}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked::after{border:4px solid var(--tds-radio-button-interaction-01)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid var(--tds-radio-button-color-disabled-before);box-sizing:content-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::after{border:4px solid var(--tds-radio-button-interaction-02);background-color:var(--tds-radio-button-color-disabled-after);left:5px;top:5px}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:0.24}}";
 

package/dist/esm/tds-side-menu-close-button.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { i as inheritAriaAttributes } from './utils-74fb1bed.js';
+import { i as inheritAriaAttributes } from './utils-8544b156.js';
 
 const sideMenuCloseButtonCss = ":host{opacity:0;transition:opacity 0.15s ease}:host button{height:64px;width:100%;text-align:left;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host button:hover{cursor:pointer;background-color:var(--tds-sidebar-item-state-hover)}:host button:focus-visible{cursor:pointer;border:1px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}";
 

package/dist/esm/tds-side-menu-item.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { j as dfs } from './utils-74fb1bed.js';
+import { k as dfs } from './utils-8544b156.js';
 
 const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component tds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--tds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
 

package/dist/esm/tds-side-menu-overlay.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-23ee700b.js';
 
-const sideMenuOverlayCss = ":host{position:absolute;width:100%;height:100%;background-color:black;transition:opacity 0.4s linear;opacity:0}";
+const sideMenuOverlayCss = ":host{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}";
 
 const TdsSideMenuOverlay = class {
   constructor(hostRef) {

package/dist/esm/tds-side-menu.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { j as dfs, k as isFocusable } from './utils-74fb1bed.js';
+import { k as dfs, l as isFocusable } from './utils-8544b156.js';
 
-const sideMenuCss = ":host{pointer-events:none;display:block;position:fixed;top:0;width:100%;height:100%}:host .wrapper{height:inherit;}:host .wrapper slot:not([name])::slotted(*){border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper ::slotted([slot=end]){border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper .tds-side-menu-list-end{margin-top:68px}:host .state-closed{display:none}:host .state-open slot[name=overlay]::slotted(tds-side-menu-overlay){opacity:0.4}:host .state-open slot[name=close-button]::slotted(tds-side-menu-close-button){opacity:1}:host .state-open .tds-side-menu-wrapper{transform:scaleY(1)}:host .state-upper-slot-empty .tds-side-menu-list-upper{display:none}:host .state-upper-slot-empty .tds-side-menu-list-end{margin-top:0}:host .state-upper-slot-empty ::slotted([slot=end]){border-top:none;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}@media (max-width: 992px){:host([open]){pointer-events:auto;z-index:301}}@media (min-width: 992px){:host([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){display:none}:host([persistent]) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button){display:none}:host([persistent]) .wrapper .tds-side-menu-wrapper{transform:none}:host([persistent]) .menu{width:272px}:host([persistent]) .state-closed{display:block}:host([persistent]):host([collapsed]){width:69px}:host([persistent]):host([collapsed]) .menu{width:68px}:host([persistent]) slot[name=end]::slotted(*){display:none}}.menu{width:80%;height:inherit;position:relative;left:0;display:flex;flex-direction:column;justify-content:space-between}.menu *{padding:0;margin:0;box-sizing:border-box}@media (max-width: 384px){.menu{width:100%}}aside .tds-side-menu-wrapper{display:flex;justify-content:space-between;flex-direction:column;flex-grow:1;background-color:var(--tds-sidebar-side-menu-background-cover);transition:transform 250ms ease;transform-origin:top;transform:scaleY(0);overflow-y:auto}aside .tds-side-menu-wrapper::-webkit-scrollbar{width:4px;background-color:inherit}aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}aside .tds-side-menu-wrapper ::-webkit-scrollbar-button{height:0;width:0}";
+const sideMenuCss = ":host{pointer-events:none;display:block;position:fixed;top:0;width:100%;height:100%;z-index:400}:host .wrapper{height:inherit;}:host .wrapper slot:not([name])::slotted(*){border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper ::slotted([slot=end]){border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper .tds-side-menu-list-end{margin-top:68px}:host .state-closed{display:none}:host .state-open slot[name=overlay]::slotted(tds-side-menu-overlay){opacity:0.4}:host .state-open slot[name=close-button]::slotted(tds-side-menu-close-button){opacity:1}:host .state-open .tds-side-menu-wrapper{transform:scaleY(1)}:host .state-upper-slot-empty .tds-side-menu-list-upper{display:none}:host .state-upper-slot-empty .tds-side-menu-list-end{margin-top:0}:host .state-upper-slot-empty ::slotted([slot=end]){border-top:none;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}@media (max-width: 992px){:host(.menu-opened){pointer-events:auto;z-index:400}}@media (min-width: 992px){: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(.menu-persistent) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay){display:none}:host(.menu-persistent) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button){display:none}:host(.menu-persistent) .wrapper .tds-side-menu-wrapper{transform:none}:host(.menu-persistent) .menu{width:272px}:host(.menu-persistent) .state-closed{display:block}:host(.menu-persistent):host(.menu-collapsed){width:69px}:host(.menu-persistent):host(.menu-collapsed) .menu{width:68px}:host(.menu-persistent) slot[name=end]::slotted(*){display:none}}.menu{width:80%;height:inherit;position:relative;left:0;display:flex;flex-direction:column;justify-content:space-between}.menu *{padding:0;margin:0;box-sizing:border-box}@media (max-width: 384px){.menu{width:100%}}aside .tds-side-menu-wrapper{display:flex;justify-content:space-between;flex-direction:column;flex-grow:1;background-color:var(--tds-sidebar-side-menu-background-cover);transition:transform 250ms ease;transform-origin:top;transform:scaleY(0);overflow-y:auto}aside .tds-side-menu-wrapper::-webkit-scrollbar{width:4px;background-color:inherit}aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}aside .tds-side-menu-wrapper ::-webkit-scrollbar-button{height:0;width:0}";
 
 const GRID_LG_BREAKPOINT = '992px';
 const OPENING_ANIMATION_DURATION = 400;
@@ -92,7 +92,11 @@ const TdsSideMenu = class {
     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,

package/dist/esm/tds-slider.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-23ee700b.js';
-import { g as generateUniqueId } from './utils-74fb1bed.js';
+import { g as generateUniqueId } from './utils-8544b156.js';
 
 const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-grey-700);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__scrubber{position:absolute}.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner:hover::before{display:block;opacity:0.08}.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner.pressed::before{display:block;opacity:0.16 !important}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__scrubber .tds-slider__scrubber-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__scrubber .tds-slider__scrubber-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg{fill:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-disabled);pointer-events:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__scrubber{pointer-events:none}.tds-slider.disabled .tds-slider__scrubber .tds-slider__scrubber-inner{background-color:var(--tds-slider-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__scrubber .tds-slider__scrubber-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__scrubber .tds-slider__scrubber-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__scrubber .tds-slider__scrubber-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-disabled)}";
 
@@ -319,7 +319,11 @@ const TdsSlider = class {
     }
   }
   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/esm/tds-stepper.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { g as generateUniqueId } from './utils-74fb1bed.js';
+import { g as generateUniqueId } from './utils-8544b156.js';
 
 const stepperCss = ":host [role=list]{display:flex;justify-content:space-evenly;min-width:100%}:host [role=list]:not(.text-position-aside){display:table;table-layout:fixed;width:100%;list-style:none}:host [role=list].vertical{height:100%;display:flex;flex-direction:column;justify-content:unset;gap:52px}:host [role=list].vertical.sm{gap:36px}:host [role=list].horizontal.text-position-aside{justify-content:unset}";
 

package/dist/esm/tds-table-body-row-expandable.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-23ee700b.js';
 
-const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{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:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand .tds-table__cell-expand{padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}";
+const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{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:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand .tds-table__cell-expand{padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{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)}";
 
 const relevantTableProps = [
   'verticalDividers',
@@ -67,8 +67,6 @@ const TdsTableBodyRowExpandable = class {
         '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" })))));
   }
   get host() { return getElement(this); }

package/dist/esm/tds-table-body.entry.js

@@ -2,10 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 
 const tableBodyCss = ":host,tds-table-body{box-sizing:border-box;display:table-row-group}:host *,tds-table-body *{box-sizing:border-box}:host .tds-table__info-message,tds-table-body .tds-table__info-message{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}";
 
-const relevantTableProps = [
-  'enableMultiselect',
-  'enableExpandableRows',
-];
+const relevantTableProps = ['multiselect', 'expandableRows'];
 const TdsTableBody = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -42,9 +39,9 @@ const TdsTableBody = class {
     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 = [];
@@ -101,7 +98,7 @@ const TdsTableBody = class {
     };
   }
   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();
     }
@@ -128,7 +125,7 @@ const TdsTableBody = class {
   }
   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;
@@ -193,7 +190,7 @@ const TdsTableBody = class {
   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 {

package/dist/esm/tds-table-header.entry.js

@@ -3,8 +3,8 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 const tableHeaderCss = ":host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .tds-table__header-cell--checkbox{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input{display:none}:host .tds-table__expand-control-container .tds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__expand-control-container .tds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(tds-header-cell:hover){background-color:var(--tds-table-header-background-hover)}:host(.tds-table--compact) .tds-table__header-cell--checkbox{height:32px}:host(.tds-table--compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__header-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox{border-top-left-radius:0}";
 
 const relevantTableProps = [
-  'enableMultiselect',
-  'enableExpandableRows',
+  'multiselect',
+  'expandableRows',
   'verticalDividers',
   'compactDesign',
   'noMinWidth',
@@ -13,8 +13,8 @@ const TdsTableHeaderRow = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.internalTdsMainCheckboxSelect = createEvent(this, "internalTdsMainCheckboxSelect", 6);
-    this.enableMultiselect = false;
-    this.enableExpandableRows = false;
+    this.multiselect = false;
+    this.expandableRows = false;
     this.mainCheckboxSelected = false;
     this.mainExpendSelected = false;
     this.verticalDividers = false;
@@ -86,7 +86,7 @@ const TdsTableHeaderRow = class {
         '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))));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/tds-table-toolbar.entry.js

@@ -13,7 +13,7 @@ const TdsTableToolbar = class {
     this.tdsFilterChange = createEvent(this, "tdsFilterChange", 7);
     this.internalTdsFilter = createEvent(this, "internalTdsFilter", 7);
     this.tableTitle = '';
-    this.enableFiltering = false;
+    this.filter = false;
     this.verticalDividers = false;
     this.compactDesign = false;
     this.noMinWidth = false;
@@ -62,7 +62,7 @@ const TdsTableToolbar = class {
     }
   }
   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" })))));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/tds-table.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { g as generateUniqueId } from './utils-74fb1bed.js';
+import { g as generateUniqueId } from './utils-8544b156.js';
 
 const tableCss = ":host,.tds-table{border-collapse:collapse;display:table;box-sizing:border-box}:host *,.tds-table *{box-sizing:border-box}:host(.tds-table--responsive),.tds-table--responsive{width:100%}";
 
@@ -10,9 +10,9 @@ const TdsTable = class {
     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();
   }
@@ -24,10 +24,10 @@ const TdsTable = class {
     });
   }
   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);
@@ -42,18 +42,22 @@ const TdsTable = class {
     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))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {
-    "enableMultiselect": ["enableMultiselectChanged"],
-    "enableExpandableRows": ["enableExpandableRowsChanged"],
+    "multiselect": ["enableMultiselectChanged"],
+    "expandableRows": ["enableExpandableRowsChanged"],
     "compactDesign": ["compactDesignChanged"],
     "verticalDividers": ["verticalDividersChanged"],
     "noMinWidth": ["noMinWidthChanged"],