@scania/tegel 0.0.10 → 0.0.11

package/dist/components/tds-card.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { h as hasSlot, g as generateUniqueId } from './utils.js';
 import { d as defineCustomElement$2 } from './divider.js';
 
-const cardCss = ".card{box-sizing:border-box;box-shadow:var(--tds-card-box);background-color:var(--tds-card-background);display:block;border-radius:4px;overflow:hidden}.card *{box-sizing:border-box}.card.clickable:hover{box-shadow:var(--tds-card-box-hover);cursor:pointer}.card .card-header{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-header slot[name=thumbnail]::slotted(*){width:36px;height:36px;border-radius:100%;margin-right:16px}.card .card-header .card-top-header{padding-left:16px;display:flex;flex-direction:column}.card .card-header .card-top-header.no-header-img{padding-left:0}.card .card-header.below{padding-top:16px}.card .header-subheader{display:flex;flex-direction:column;gap:4px}.card .header-subheader .header,.card .header-subheader slot[name=header]{color:var(--tds-card-headline)}.card .header-subheader .subheader,.card .header-subheader slot[name=subheader]{color:var(--tds-card-sub-headline)}.card .tds-divider{margin:16px 16px 0;background-color:var(--tds-card-divider);height:1px}.card .card-body{display:block;word-wrap:break-word}.card slot[name=body]::slotted(*){font:var(--tds-detail-03);letter-spacing:var(--tds-detail-03-ls);color:var(--tds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px;max-width:336px}.card slot[name=bottom]::slotted(*){display:flex;padding:16px;color:var(--tds-card-icon-color)}button{border:none;text-align:left;padding:0}button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--tds-card-box-pressed)}";
+const cardCss = ".card{box-sizing:border-box;box-shadow:var(--tds-card-box);background-color:var(--tds-card-background);display:block;border-radius:4px;overflow:hidden}.card *{box-sizing:border-box}.card.clickable:hover{box-shadow:var(--tds-card-box-hover);cursor:pointer}.card .card-header{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-header slot[name=thumbnail]::slotted(*){width:36px;height:36px;border-radius:100%;margin-right:16px}.card .card-header .card-top-header{padding-left:16px;display:flex;flex-direction:column}.card .card-header .card-top-header.no-header-img{padding-left:0}.card .card-header.below{padding-top:16px}.card .header-subheader{display:flex;flex-direction:column;gap:4px}.card .header-subheader .header,.card .header-subheader slot[name=header]{color:var(--tds-card-headline)}.card .header-subheader .subheader,.card .header-subheader slot[name=subheader]{color:var(--tds-card-sub-headline)}.card .card-body-img{width:100%}.card .tds-divider{margin:16px 16px 0;background-color:var(--tds-card-divider);height:1px}.card .card-body{display:block;word-wrap:break-word}.card slot[name=body]::slotted(*){font:var(--tds-detail-03);letter-spacing:var(--tds-detail-03-ls);color:var(--tds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px;max-width:336px}.card slot[name=bottom]::slotted(*){display:flex;padding:16px;color:var(--tds-card-icon-color)}button{border:none;text-align:left;padding:0}button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--tds-card-box-pressed)}";
 
 const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends HTMLElement {
   constructor() {
@@ -25,7 +25,7 @@ const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends HTMLEle
       const usesBodySlot = hasSlot('body', this.host);
       const usesBodyImageSlot = hasSlot('body-image', this.host);
       const usesBottomSlot = hasSlot('bottom', this.host);
-      return (h("div", null, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: `card-body-img`, src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesBottomSlot && h("slot", { name: `bottom` })));
+      return (h("div", null, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesBottomSlot && h("slot", { name: `bottom` })));
     };
     this.modeVariant = null;
     this.imagePlacement = 'below-header';

package/dist/components/tds-dropdown.js

@@ -28,18 +28,22 @@ const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends
                 ? [...this.selection, { value: element.value, label: element.textContent }]
                 : [{ value: element.value, label: element.textContent }];
             }
+            else {
+              element.setSelected(false);
+            }
           });
         }
         else {
           if (this.defaultValue === element.value) {
-            this.reset();
             element.setSelected(true);
             this.selection = [{ value: element.value, label: element.textContent }];
           }
+          else {
+            element.setSelected(false);
+          }
         }
         return element;
       });
-      this.handleChange();
     };
     this.getOpenDirection = () => {
       var _a, _b, _c, _d, _e;
@@ -64,14 +68,14 @@ const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends
     this.handleFilter = (event) => {
       this.tdsInput.emit(event);
       const query = event.target.value.toLowerCase();
-      /* Check if the query is empty, and if so show all options */
+      /* Check if the query is empty, and if so, show all options */
       if (query === '') {
         this.children = this.children.map((element) => {
           element.removeAttribute('hidden');
           return element;
         });
         this.filterResult = null;
-        /* Hide the options that does not match the query */
+        /* Hide the options that do not match the query */
       }
       else {
         this.filterResult = this.children.filter((element) => {
@@ -179,7 +183,7 @@ const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends
       return;
     }
     if (event.key === 'ArrowDown') {
-      /* Get the index of the currently focus index, if there is no
+      /* Get the index of the current focus index, if there is no
       nextElementSibling return the index for the first child in our Dropdown.  */
       const startingIndex = activeElement.nextElementSibling
         ? this.children.findIndex((element) => element === activeElement.nextElementSibling)
@@ -188,7 +192,7 @@ const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends
       this.children[elementIndex].focus();
     }
     else if (event.key === 'ArrowUp') {
-      /* Get the index of the currently focus index, if there is no
+      /* Get the index of the current focus index, if there is no
       previousElementSibling return the index for the first last in our Dropdown.  */
       const startingIndex = activeElement.nextElementSibling
         ? this.children.findIndex((element) => element === activeElement.previousElementSibling)
@@ -200,7 +204,8 @@ const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends
       this.open = false;
     }
   }
-  // If the Dropdown gets closed this sets the value of the drodpown to the current selection labels or null if no selection is made.
+  // If the Dropdown gets closed,
+  // this sets the value of the dropdown to the current selection labels or null if no selection is made.
   handleOpenState() {
     var _a, _b;
     if (this.filter && this.multiselect) {

package/dist/components/tds-footer.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { h as hasSlot } from './utils.js';
 
-const footerCss = ":host{display:block}:host slot[name=top]::slotted(*){background-color:var(--tds-footer-top-background);padding:40px;display:grid;grid-template-columns:repeat(4, 1fr);row-gap:40px;width:100%}:host .footer-main{background-color:var(--tds-footer-main-background);padding:0 40px}:host .footer-main-top{padding:40px 0;display:flex;justify-content:space-between}:host slot[name=start]::slotted(*),:host slot[name=end]::slotted(*){display:flex;column-gap:24px}:host .footer-main-bottom{padding:40px 0;display:flex;justify-content:space-between;border-top:1px solid var(--tds-footer-main-divider)}:host .footer-main-bottom small.copyright{margin:0;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-footer-main-copyright)}:host .footer-main-bottom .brand{background-image:var(--tds-background-image-scania-wordmark-white-svg);background-repeat:no-repeat;background-size:117px;background-position:right;width:117px;height:20px}:host .footer-main-bottom .brand p{color:transparent;padding:0;margin:0;height:100%;visibility:hidden}@media all and (max-width: 992px){:host slot[name=top]::slotted(*){display:block;width:100%;padding:0}:host .footer-main{padding:0 24px}:host .footer-main-top{flex-direction:column;row-gap:48px;padding:24px 0}:host slot[name=end]::slotted(*){flex-direction:row;gap:8px}:host .footer-main-bottom{flex-direction:column;padding-bottom:32px}:host .footer-main-bottom p.copyright{padding-bottom:96px}:host .footer-main-bottom .brand{width:100%}}";
+const footerCss = ":host{display:block}:host slot[name=top]::slotted(*){box-sizing:border-box;background-color:var(--tds-footer-top-background);padding:40px;display:grid;grid-template-columns:repeat(4, 1fr);row-gap:40px;width:100%}:host .footer-main{background-color:var(--tds-footer-main-background);padding:0 40px}:host .footer-main-top{padding:40px 0;display:flex;justify-content:space-between}:host slot[name=start]::slotted(*),:host slot[name=end]::slotted(*){display:flex;column-gap:24px}:host .footer-main-bottom{padding:40px 0;display:flex;justify-content:space-between;border-top:1px solid var(--tds-footer-main-divider)}:host .footer-main-bottom small.copyright{margin:0;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-footer-main-copyright)}:host .footer-main-bottom .brand{background-image:var(--tds-background-image-scania-wordmark-white-svg);background-repeat:no-repeat;background-size:117px;background-position:right;width:117px;height:20px}:host .footer-main-bottom .brand p{color:transparent;padding:0;margin:0;height:100%;visibility:hidden}@media all and (max-width: 992px){:host slot[name=top]::slotted(*){display:block;width:100%;padding:0}:host .footer-main{padding:0 24px}:host .footer-main-top{flex-direction:column;row-gap:48px;padding:24px 0}:host slot[name=end]::slotted(*){flex-direction:row;gap:8px}:host .footer-main-bottom{flex-direction:column;padding-bottom:32px}:host .footer-main-bottom p.copyright{padding-bottom:96px}:host .footer-main-bottom .brand{width:100%}}";
 
 const TdsFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsFooter extends HTMLElement {
   constructor() {

package/dist/components/tds-header-dropdown.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as generateUniqueId } from './utils.js';
-import { d as defineCustomElement$5 } from './core-header-item.js';
-import { d as defineCustomElement$4 } from './header-item.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './popover-canvas.js';
+import { d as defineCustomElement$6 } from './core-header-item.js';
+import { d as defineCustomElement$5 } from './header-item.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './popover-canvas.js';
+import { d as defineCustomElement$2 } from './popover-core.js';
 
 const headerDropdownCss = ":host{height:var(--tds-header-height);position:relative}:host .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-top-right-radius:0;border-top-left-radius:0}:host .menu::-webkit-scrollbar{width:4px;background-color:inherit}:host .menu::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .menu ::-webkit-scrollbar-button{height:0;width:0}:host .state-open .dropdown-icon{transform:rotatetds-z-index(180deg)}:host .state-open .button{position:relative;z-index:801}";
 
@@ -58,7 +59,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tds-header-dropdown", "tds-core-header-item", "tds-header-item", "tds-icon", "tds-popover-canvas"];
+  const components = ["tds-header-dropdown", "tds-core-header-item", "tds-header-item", "tds-icon", "tds-popover-canvas", "tds-popover-core"];
   components.forEach(tagName => { switch (tagName) {
     case "tds-header-dropdown":
       if (!customElements.get(tagName)) {
@@ -67,20 +68,25 @@ function defineCustomElement$1() {
       break;
     case "tds-core-header-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "tds-header-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "tds-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "tds-popover-canvas":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "tds-popover-core":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/tds-header-launcher-grid.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { e as getPreviousNestedChildOfSiblingsMatching, j as isHeadingElement } from './utils.js';
+import { j as getPreviousNestedChildOfSiblingsMatching, k as isHeadingElement } from './utils.js';
 
 const headerLauncherGridCss = ".tds-header-launcher-grid{box-sizing:border-box;padding:12px;margin:0;list-style:none;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;border-radius:none}";
 

package/dist/components/tds-header-launcher-list-item.js

@@ -10,7 +10,7 @@ const TdsHeaderLauncherListItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsHe
     this.__attachShadow();
   }
   render() {
-    return (h(Host, null, h("tds-header-dropdown-list-item", { type: "lg" }, h("slot", null))));
+    return (h(Host, null, h("tds-header-dropdown-list-item", { size: "lg" }, h("slot", null))));
   }
   static get style() { return headerLauncherListItemCss; }
 }, [1, "tds-header-launcher-list-item"]);

package/dist/components/tds-header-launcher-list.js

@@ -9,7 +9,7 @@ const TdsHeaderLauncherList$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeader
     this.uuid = generateUniqueId();
   }
   render() {
-    return (h(Host, null, h("tds-header-dropdown-list", { type: "lg" }, h("slot", null))));
+    return (h(Host, null, h("tds-header-dropdown-list", { size: "lg" }, h("slot", null))));
   }
 }, [4, "tds-header-launcher-list"]);
 function defineCustomElement$1() {

package/dist/components/tds-header-launcher.js

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as generateUniqueId, i as inheritAriaAttributes } from './utils.js';
-import { d as defineCustomElement$6 } from './core-header-item.js';
-import { d as defineCustomElement$5 } from './header-item.js';
-import { d as defineCustomElement$4 } from './header-launcher-button.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './popover-canvas.js';
+import { d as defineCustomElement$7 } from './core-header-item.js';
+import { d as defineCustomElement$6 } from './header-item.js';
+import { d as defineCustomElement$5 } from './header-launcher-button.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './popover-canvas.js';
+import { d as defineCustomElement$2 } from './popover-core.js';
 
 const headerLauncherCss = ":host .wrapper{height:var(--tds-header-height);position:relative}:host .wrapper .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-radius:0}:host .wrapper .menu::-webkit-scrollbar{width:4px;background-color:inherit}:host .wrapper .menu::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .wrapper .menu ::-webkit-scrollbar-button{height:0;width:0}@media all and (max-width: 384px){:host .wrapper .menu{width:100vw}}:host .wrapper.state-list-type-menu .menu{height:calc(100vh - var(--tds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:801}";
 
@@ -67,7 +68,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tds-header-launcher", "tds-core-header-item", "tds-header-item", "tds-header-launcher-button", "tds-icon", "tds-popover-canvas"];
+  const components = ["tds-header-launcher", "tds-core-header-item", "tds-header-item", "tds-header-launcher-button", "tds-icon", "tds-popover-canvas", "tds-popover-core"];
   components.forEach(tagName => { switch (tagName) {
     case "tds-header-launcher":
       if (!customElements.get(tagName)) {
@@ -76,25 +77,30 @@ function defineCustomElement$1() {
       break;
     case "tds-core-header-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "tds-header-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "tds-header-launcher-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "tds-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "tds-popover-canvas":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "tds-popover-core":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/tds-link.js

@@ -14,7 +14,7 @@ const TdsLink$1 = /*@__PURE__*/ proxyCustomElement(class TdsLink extends HTMLEle
     this.host.children[0].classList.add('tds-link-component');
   }
   render() {
-    return (h("div", { class: `
+    return (h("span", { class: `        
           ${this.disabled ? 'disabled' : ''}
           ${!this.underline ? 'no-underline' : ''}
           ` }, h("slot", null)));

package/dist/components/tds-message.js

@@ -9,7 +9,7 @@ const TdsMessage$1 = /*@__PURE__*/ proxyCustomElement(class TdsMessage extends H
     this.__registerHost();
     this.__attachShadow();
     this.getIconName = () => {
-      switch (this.type) {
+      switch (this.variant) {
         case 'information':
           return 'info';
         case 'error':
@@ -24,13 +24,13 @@ const TdsMessage$1 = /*@__PURE__*/ proxyCustomElement(class TdsMessage extends H
     };
     this.header = undefined;
     this.modeVariant = null;
-    this.type = 'information';
+    this.variant = 'information';
     this.noIcon = false;
     this.minimal = false;
   }
   render() {
     return (h(Host, null, h("div", { class: `
-        wrapper ${this.type}
+        wrapper ${this.variant}
         ${this.minimal ? 'minimal' : ''}
         ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, this.header && h("div", { class: "header" }, this.header), !this.minimal && (h("div", { class: "extended-message" }, h("slot", null)))))));
   }
@@ -38,7 +38,7 @@ const TdsMessage$1 = /*@__PURE__*/ proxyCustomElement(class TdsMessage extends H
 }, [1, "tds-message", {
     "header": [1],
     "modeVariant": [1, "mode-variant"],
-    "type": [1],
+    "variant": [1],
     "noIcon": [4, "no-icon"],
     "minimal": [4]
   }]);

package/dist/components/tds-popover-core.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TdsPopoverCore extends Components.TdsPopoverCore, HTMLElement {}
+export const TdsPopoverCore: {
+  prototype: TdsPopoverCore;
+  new (): TdsPopoverCore;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/tds-popover-core.js

@@ -0,0 +1,6 @@
+import { T as TdsPopoverCore$1, d as defineCustomElement$1 } from './popover-core.js';
+
+const TdsPopoverCore = TdsPopoverCore$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsPopoverCore, defineCustomElement };

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

@@ -1,105 +1,57 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createPopper } from './popper.js';
+import { e as inheritAttributes } from './utils.js';
+import { d as defineCustomElement$2 } from './popover-core.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:800}.tds-popover-menu.sc-tds-popover-menu *.sc-tds-popover-menu{box-sizing:border-box}";
 
 const TdsPopoverMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenu extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
+    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 this; }
+  get host() { return this; }
   static get style() { return popoverMenuCss; }
-}, [1, "tds-popover-menu", {
+}, [6, "tds-popover-menu", {
     "selector": [1],
     "referenceEl": [16],
     "show": [4],
     "placement": [1],
     "offsetSkidding": [2, "offset-skidding"],
-    "offsetDistance": [2, "offset-distance"],
-    "renderedShowValue": [32],
-    "popperInstance": [32],
-    "target": [32]
-  }, [[9, "mousedown", "handleOutsideClick"]]]);
+    "offsetDistance": [2, "offset-distance"]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tds-popover-menu"];
+  const components = ["tds-popover-menu", "tds-popover-core"];
   components.forEach(tagName => { switch (tagName) {
     case "tds-popover-menu":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TdsPopoverMenu$1);
       }
       break;
+    case "tds-popover-core":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as dfs, k as isFocusable } from './utils.js';
+import { d as dfs, l as isFocusable } from './utils.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}";
 

package/dist/components/tds-slider.js

@@ -321,7 +321,11 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends HTM
     }
   }
   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/components/tds-toast.js

@@ -11,7 +11,7 @@ const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends HTMLE
     this.__attachShadow();
     this.tdsClose = createEvent(this, "tdsClose", 7);
     this.getIconName = () => {
-      switch (this.type) {
+      switch (this.variant) {
         case 'information':
           return 'info';
         case 'error':
@@ -43,7 +43,7 @@ const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends HTMLE
     this.toastId = generateUniqueId();
     this.header = undefined;
     this.subheader = undefined;
-    this.type = 'information';
+    this.variant = 'information';
     this.hidden = false;
     this.toastRole = 'alert';
   }
@@ -61,7 +61,7 @@ const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends HTMLE
     const usesBottomSlot = hasSlot('bottom', this.host);
     return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
             wrapper
-            ${this.type}` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesBottomSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "bottom" })))), h("button", { onClick: () => {
+            ${this.variant}` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesBottomSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "bottom" })))), h("button", { onClick: () => {
         this.handleClose();
       }, class: `close` }, h("tds-icon", { name: "cross", size: "20px" })))));
   }
@@ -71,7 +71,7 @@ const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends HTMLE
     "toastId": [1, "toast-id"],
     "header": [1],
     "subheader": [1],
-    "type": [1],
+    "variant": [1],
     "hidden": [516],
     "toastRole": [1, "toast-role"],
     "hideToast": [64],