@scania/tegel 0.0.9 → 0.0.11

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-title.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as generateUniqueId } from './utils.js';
 
 const headerLauncherListTitleCss = ".tds-header-launcher-list-title{all:unset;box-sizing:border-box;font:var(--tds-detail-06);letter-spacing:var(--tds-detail-06-ls);color:var(--tds-header-app-launcher-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color);margin:0}";
 
@@ -6,10 +7,10 @@ const TdsHeaderLauncherListTitle$1 = /*@__PURE__*/ proxyCustomElement(class TdsH
   constructor() {
     super();
     this.__registerHost();
-    this.uuid = crypto.randomUUID();
+    this.uuid = generateUniqueId();
   }
   render() {
-    return (h(Host, null, h("h3", { class: "tds-header-launcher-list-title", id: `tds-${this.uuid}` }, h("slot", null))));
+    return (h(Host, null, h("h3", { class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", null))));
   }
   get host() { return this; }
   static get style() { return headerLauncherListTitleCss; }

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

@@ -1,14 +1,15 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as generateUniqueId } from './utils.js';
 import { d as defineCustomElement$2 } from './header-dropdown-list.js';
 
 const TdsHeaderLauncherList$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncherList extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.uuid = crypto.randomUUID();
+    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 { 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 { g as generateUniqueId, i as inheritAriaAttributes } from './utils.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}";
 
@@ -13,7 +14,7 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.uuid = crypto.randomUUID();
+    this.uuid = generateUniqueId();
     this.open = false;
     this.buttonEl = undefined;
     this.hasListTypeMenu = false;
@@ -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-inline-tab.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const inlineTabCss = ":host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;margin:20px 4px}:host ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .inline-tab-item{position:relative;margin-right:32px}:host .inline-tab-item:hover{cursor:pointer}:host .inline-tab-item:hover::after{width:100%}:host .inline-tab-item::after{content:\" \";position:absolute;bottom:-20px;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-inline-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host .selected ::slotted(*){color:var(--tds-inline-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-inline-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-inline-tabs-tab-color-disabled);pointer-events:none}:host .disabled ::slotted(*){opacity:var(--tds-inline-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
+const inlineTabCss = ":host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;margin:20px 4px}:host ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .inline-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .inline-tab-item{position:relative;margin-right:32px}:host .inline-tab-item:hover{cursor:pointer}:host .inline-tab-item:hover::after{width:100%}:host .inline-tab-item::after{content:\" \";position:absolute;bottom:-20px;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-inline-tabs-tab-indicator-background-hover);z-index:1}:host .selected ::slotted(*){color:var(--tds-inline-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-inline-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-inline-tabs-tab-color-disabled)}:host .disabled ::slotted(*){opacity:var(--tds-inline-tabs-tab-color-opacity-disabled)}:host .disabled::after{content:none}:host .disabled ::slotted(*:hover){cursor:not-allowed}:host .disabled ::slotted(*:focus-visible){outline:none}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
 
 const TdsInlineTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTab extends HTMLElement {
   constructor() {

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

@@ -41,11 +41,11 @@ const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs ext
     this.addEventListenerToTabs = () => {
       this.children = this.children.map((item, index) => {
         item.addEventListener('click', () => {
-          const tdsChangeEvent = this.tdsChange.emit({
-            selectedTabIndex: this.children.indexOf(item),
-          });
-          if (!tdsChangeEvent.defaultPrevented) {
-            if (!item.disabled) {
+          if (!item.disabled) {
+            const tdsChangeEvent = this.tdsChange.emit({
+              selectedTabIndex: this.children.indexOf(item),
+            });
+            if (!tdsChangeEvent.defaultPrevented) {
               this.children.forEach((element) => element.setSelected(false));
               item.setSelected(true);
               this.selectedIndex = index;

package/dist/components/tds-link.js

@@ -1,11 +1,12 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const linkCss = ".tds-link-component{all:unset;cursor:pointer;outline:none;color:var(--tds-link);text-decoration:underline}.tds-link-component.active,.tds-link-component:active{color:var(--tds-link);text-decoration:underline;text-decoration-color:var(--tds-link)}.tds-link-component:hover{color:var(--tds-link-hover);text-decoration:underline;text-decoration-color:var(--tds-link-hover)}.tds-link-component:visited{color:var(--tds-link-visited);text-decoration-color:var(--tds-link-visited)}.tds-link-component:focus{color:var(--tds-link-focus);text-decoration:none;outline:2px solid var(--tds-link-focus);outline-offset:-2px}.disabled .tds-link-component{color:var(--tds-link-disabled);text-decoration-color:var(--tds-link-disabled);pointer-events:none}.no-underline .tds-link-component{text-decoration:none}.no-underline:hover .tds-link-component{text-decoration:none}";
+const linkCss = ":host{display:inline}:host ::slotted(*){all:unset;cursor:pointer;outline:none;color:var(--tds-link);text-decoration:underline}:host ::slotted(*:focus-visible){color:var(--tds-link-focus);text-decoration:none;outline:2px solid var(--tds-link-focus);outline-offset:-2px}:host ::slotted(*:active){color:var(--tds-link);text-decoration:underline;text-decoration-color:var(--tds-link)}:host ::slotted(*:hover){color:var(--tds-link-hover);text-decoration:underline;text-decoration-color:var(--tds-link-hover)}:host ::slotted(*:visited){color:var(--tds-link-visited);text-decoration-color:var(--tds-link-visited)}.disabled ::slotted(*){color:var(--tds-link-disabled);text-decoration-color:var(--tds-link-disabled);pointer-events:none}.no-underline ::slotted(*){text-decoration:none}.no-underline:hover ::slotted(*){text-decoration:none}";
 
 const TdsLink$1 = /*@__PURE__*/ proxyCustomElement(class TdsLink extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.disabled = false;
     this.underline = true;
   }
@@ -13,14 +14,14 @@ 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)));
   }
   get host() { return this; }
   static get style() { return linkCss; }
-}, [4, "tds-link", {
+}, [1, "tds-link", {
     "disabled": [4],
     "underline": [4]
   }]);

package/dist/components/tds-message.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const messageCss = ":host .message-wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .message-wrapper.information{border-left:4px solid var(--tds-information)}:host .message-wrapper.information tds-icon{color:var(--tds-information)}:host .message-wrapper.success{border-left:4px solid var(--tds-positive)}:host .message-wrapper.success tds-icon{color:var(--tds-positive)}:host .message-wrapper.error{background-color:var(--tds-message-type-error-background);border-left:4px solid var(--tds-negative)}:host .message-wrapper.error tds-icon{color:var(--tds-negative)}:host .message-wrapper.warning{border-left:4px solid var(--tds-warning)}:host .message-wrapper.warning tds-icon{color:var(--tds-warning)}:host .message-wrapper.message-minimal{border:none;display:flex;align-items:center;padding:0;background-color:transparent}:host .message-wrapper.message-minimal .message-header{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .message-wrapper.message-minimal tds-icon{padding-right:8px}:host tds-icon{padding-right:16px}:host .message-content{display:flex;flex-direction:column;gap:4px;color:var(--tds-message-color);padding:2px 0}:host .message-content .message-header{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host .message-content .message-extended-message{color:var(--tds-message-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .tds-mode-variant-primary{--tds-message-background:var(--tds-message-background-primary)}:host .tds-mode-variant-secondary{--tds-message-background:var(--tds-message-background-secondary)}";
+const messageCss = ":host .wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-information)}:host .wrapper.information tds-icon{color:var(--tds-information)}:host .wrapper.success{border-left:4px solid var(--tds-positive)}:host .wrapper.success tds-icon{color:var(--tds-positive)}:host .wrapper.error{background-color:var(--tds-message-type-error-background);border-left:4px solid var(--tds-negative)}:host .wrapper.error tds-icon{color:var(--tds-negative)}:host .wrapper.warning{border-left:4px solid var(--tds-warning)}:host .wrapper.warning tds-icon{color:var(--tds-warning)}:host .wrapper.minimal{border:none;display:flex;align-items:center;padding:0;background-color:transparent}:host .wrapper.minimal .header{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .wrapper.minimal.error .header{color:var(--tds-negative)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--tds-message-color);padding:2px 0}:host .content .header{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host .content .extended-message{color:var(--tds-message-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .tds-mode-variant-primary{--tds-message-background:var(--tds-message-background-primary)}:host .tds-mode-variant-secondary{--tds-message-background:var(--tds-message-background-secondary)}";
 
 const TdsMessage$1 = /*@__PURE__*/ proxyCustomElement(class TdsMessage extends HTMLElement {
   constructor() {
@@ -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,21 +24,21 @@ 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: `
-        message-wrapper ${this.type}
-        ${this.minimal ? 'message-minimal' : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `message-content` }, this.header && h("div", { class: "message-header" }, this.header), !this.minimal && (h("div", { class: "message-extended-message" }, h("slot", null)))))));
+        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)))))));
   }
   static get style() { return messageCss; }
 }, [1, "tds-message", {
     "header": [1],
     "modeVariant": [1, "mode-variant"],
-    "type": [1],
+    "variant": [1],
     "noIcon": [4, "no-icon"],
     "minimal": [4]
   }]);

package/dist/components/tds-modal.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { h as hasSlot } from './utils.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const modalCss = ":root,.tds-mode-light{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-white);--tds-modal-text:var(--tds-grey-958);--tds-modal-icon:var(--tds-black);--tds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-mode-dark{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-grey-900);--tds-modal-text:var(--tds-grey-50);--tds-modal-icon:var(--tds-white);--tds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-modal{box-sizing:border-box;background-color:var(--tds-modal-background);margin:auto;position:relative;border-radius:4px;padding:16px;max-height:85vh;overflow-y:auto;}.tds-modal *{box-sizing:border-box}.tds-modal::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-track{background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500);border-radius:0 1em 1em 0}.tds-modal__actions-sticky{overflow:hidden}.tds-modal__actions-sticky .tds-modal-body{font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);padding-bottom:96px;margin:0 -16px 0 0;max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky .tds-modal-actions{position:absolute;bottom:-1px;left:0;right:0;background-color:var(--tds-modal-background);padding:var(--tds-spacing-element-16);display:flex;gap:16px}.tds-modal__actions-static .tds-modal-actions{background-color:var(--tds-modal-background);display:flex;gap:16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:75%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=tds-modal-actions]::slotted(*),.tds-modal-lg slot[name=tds-modal-actions]::slotted(*),.tds-modal-sm slot[name=tds-modal-actions]::slotted(*){display:flex}}.tds-modal-header{display:flex;padding-bottom:var(--tds-spacing-element-8);position:sticky;top:0;background-color:var(--tds-modal-background);z-index:1}.tds-modal-header::before{content:\" \";position:absolute;height:16px;top:-16px;width:100%;background-color:var(--tds-modal-background)}.tds-modal-headline{color:var(--tds-modal-text);font:var(--tds-headline-05);letter-spacing:var(--tds-headline-05-ls);margin:0;flex:1;color:var(--tds-modal-text)}.tds-modal-body{color:var(--tds-modal-text);font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);padding-bottom:40px;overflow-y:visible;padding-right:16px;}.tds-modal-body::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300)}.tds-modal-body::-webkit-scrollbar-track{background-color:var(--tds-grey-300)}.tds-modal-body::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500)}@media (min-width: 1056px){.tds-modal-body{padding-right:64px}}.tds-modal-backdrop{box-sizing:border-box;left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--tds-modal-backdrop);padding:0 16px}.tds-modal-backdrop *{box-sizing:border-box}@media (max-width: 320px){.tds-modal-backdrop{padding:0}}.tds-modal-backdrop.show{display:flex}.tds-modal-backdrop.hide{display:none}button.tds-modal-close{background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--tds-modal-icon);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media (min-width: 320px){.tds-modal-close{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn svg{fill:var(--tds-modal-icon)}.tds-modal-overflow{overflow:hidden}:host{left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--tds-modal-backdrop);padding:0 16px}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}:host(.show){display:flex}:host(.hide){display:none}";
+const modalCss = ":root,.tds-mode-light{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-white);--tds-modal-text:var(--tds-grey-958);--tds-modal-icon:var(--tds-black);--tds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-mode-dark{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-grey-900);--tds-modal-text:var(--tds-grey-50);--tds-modal-icon:var(--tds-white);--tds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-modal{box-sizing:border-box;background-color:var(--tds-modal-background);margin:auto;position:relative;border-radius:4px;padding:16px;max-height:85vh;overflow-y:auto;}.tds-modal *{box-sizing:border-box}.tds-modal::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-track{background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500);border-radius:0 1em 1em 0}.tds-modal__actions-sticky{overflow:hidden}.tds-modal__actions-sticky .body{font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);padding-bottom:96px;margin:0 -16px 0 0;max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{position:absolute;bottom:-1px;left:0;right:0;background-color:var(--tds-modal-background);padding:var(--tds-spacing-element-16);display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--tds-modal-background);display:flex;gap:16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:75%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=actions]::slotted(*),.tds-modal-lg slot[name=actions]::slotted(*),.tds-modal-sm slot[name=actions]::slotted(*){display:flex}}.header{display:flex;padding-bottom:var(--tds-spacing-element-8);position:sticky;top:0;background-color:var(--tds-modal-background);z-index:1}.header::before{content:\" \";position:absolute;height:16px;top:-16px;width:100%;background-color:var(--tds-modal-background)}.header,slot[name=header]::slotted(*){color:var(--tds-modal-text);font:var(--tds-headline-05);letter-spacing:var(--tds-headline-05-ls);margin:0;flex:1}.body{color:var(--tds-modal-text);font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);padding-bottom:40px;overflow-y:visible;padding-right:16px;}.body::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-track{background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500)}@media (min-width: 1056px){.body{padding-right:64px}}.tds-modal-backdrop{box-sizing:border-box;left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--tds-modal-backdrop);padding:0 16px}.tds-modal-backdrop *{box-sizing:border-box}@media (max-width: 320px){.tds-modal-backdrop{padding:0}}.tds-modal-backdrop.show{display:flex}.tds-modal-backdrop.hide{display:none}button.tds-modal-close{margin:0 0 auto auto;background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--tds-modal-icon);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media (min-width: 320px){.tds-modal-close{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn svg{fill:var(--tds-modal-icon)}.tds-modal-overflow{overflow:hidden}:host{left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--tds-modal-backdrop);padding:0 16px}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}:host(.show){display:flex}:host(.hide){display:none}";
 
 const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends HTMLElement {
   constructor() {
@@ -9,7 +10,6 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends HTMLE
     this.__registerHost();
     this.__attachShadow();
     this.tdsClose = createEvent(this, "tdsClose", 7);
-    /** Emits a close event and then close the Modal if it is not prevented. */
     this.handleClose = (event) => {
       const closeEvent = this.tdsClose.emit(event);
       if (!closeEvent.defaultPrevented) {
@@ -42,6 +42,7 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends HTMLE
         }
       }
     };
+    this.header = undefined;
     this.prevent = false;
     this.size = 'md';
     this.actions = 'static';
@@ -52,11 +53,11 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends HTMLE
   }
   /** Shows the Modal.  */
   async showModal() {
-    this.handleShow();
+    this.isShown = true;
   }
   /** Closes the Modal. */
   async closeModal() {
-    this.handleClose();
+    this.isShown = false;
   }
   connectedCallback() {
     if (this.show !== null) {
@@ -64,6 +65,9 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends HTMLE
     }
     this.setDismissButtons();
     this.setShowButton();
+    if (this.header && hasSlot('header', this.host)) {
+      console.warn("Tegel Modal component: Using both header prop and header slot might break modal's design. Please use just one of them. ");
+    }
   }
   /** Checks if click on Modal is on overlay, if so it closes the Modal if prevent is not true. */
   handleOverlayClick(event) {
@@ -83,13 +87,18 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends HTMLE
     });
   }
   render() {
+    const usesHeaderSlot = hasSlot('header', this.host);
+    const usesActionsSlot = hasSlot('actions', this.host);
     return (h(Host, { onClick: (event) => {
         this.handleOverlayClick(event);
-      }, class: `tds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `tds-modal ${this.actions ? `tds-modal__actions-${this.actions}` : ''} ${this.size ? `tds-modal-${this.size}` : ''} ` }, h("div", { class: "tds-modal-header" }, h("slot", { name: "tds-modal-headline" }), h("button", { class: "tds-modal-close", "aria-label": "close", onClick: () => this.handleClose() }, h("tds-icon", { name: "cross", size: "20px" }))), h("div", { class: "tds-modal-body" }, h("slot", { name: "tds-modal-body" })), h("div", { class: "tds-modal-actions" }, h("slot", { name: "tds-modal-actions" })))));
+      }, class: `tds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `tds-modal ${this.actions ? `tds-modal__actions-${this.actions}` : ''} ${this.size ? `tds-modal-${this.size}` : ''} ` }, h("div", { class: "header" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), h("button", { class: "tds-modal-close", "aria-label": "close", onClick: (event) => {
+        this.handleClose(event);
+      } }, h("tds-icon", { name: "cross", size: "20px" }))), h("div", { class: "body" }, h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: "actions" }))));
   }
   get host() { return this; }
   static get style() { return modalCss; }
 }, [1, "tds-modal", {
+    "header": [1],
     "prevent": [4],
     "size": [1],
     "actions": [1],

package/dist/components/tds-navigation-tab.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const navigationTabCss = ":host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;margin:26px 4px}:host ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .navigation-tab-item{position:relative;margin-right:32px}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:-26px;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host .selected ::slotted(*){color:var(--tds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-navigation-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-navigation-tabs-tab-color-disabled);pointer-events:none}:host .disabled ::slotted(*){opacity:var(--tds-navigation-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
+const navigationTabCss = ":host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;margin:26px 4px}:host ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .navigation-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .navigation-tab-item{position:relative;margin-right:32px}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:-26px;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-navigation-tabs-tab-indicator-background-hover);z-index:1}:host .selected ::slotted(*){color:var(--tds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-navigation-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled ::slotted(*){opacity:var(--tds-navigation-tabs-tab-color-opacity-disabled)}:host .disabled::after{content:none}:host .disabled ::slotted(*:hover){cursor:not-allowed}:host .disabled ::slotted(*:focus-visible){outline:none}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
 
 const TdsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTab extends HTMLElement {
   constructor() {

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

@@ -43,11 +43,11 @@ const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigation
       this.children = Array.from(this.host.children);
       this.children = this.children.map((item, index) => {
         item.addEventListener('click', () => {
-          const tdsChangeEvent = this.tdsChange.emit({
-            selectedTabIndex: this.children.indexOf(item),
-          });
-          if (!tdsChangeEvent.defaultPrevented) {
-            if (!item.disabled) {
+          if (!item.disabled) {
+            const tdsChangeEvent = this.tdsChange.emit({
+              selectedTabIndex: this.children.indexOf(item),
+            });
+            if (!tdsChangeEvent.defaultPrevented) {
               this.children.forEach((element) => element.setSelected(false));
               item.setSelected(true);
               this.selectedIndex = index;

package/dist/components/{tds-dropdown-v2.d.ts → tds-popover-core.d.ts}

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

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-radio-button.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { g as generateUniqueId } from './utils.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-700);--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}}";
+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}}";
 
 const TdsRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsRadioButton extends HTMLElement {
   constructor() {
@@ -15,7 +16,7 @@ const TdsRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsRadioButton e
     };
     this.name = undefined;
     this.value = undefined;
-    this.radioId = crypto.randomUUID();
+    this.radioId = generateUniqueId();
     this.checked = false;
     this.required = false;
     this.disabled = false;

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/cor
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './side-menu-item.js';
 
-const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:68px;position:absolute;left:var(--side-menu-width);box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-grey-958)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
+const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:68px;position:absolute;left:var(--side-menu-width);box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-sidebar-side-menu-subnav-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
 
 const TdsSideMenuDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuDropdown extends HTMLElement {
   constructor() {

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { e as dfs, j as isFocusable } from './utils.js';
+import { d as dfs, l as isFocusable } from './utils.js';
 
-const sideMenuCss = ":host([open]){pointer-events:auto;z-index:301}: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 (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%}: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 GRID_LG_BREAKPOINT = '992px';
 const OPENING_ANIMATION_DURATION = 400;