@scania/tegel 1.40.0 → 1.41.0-beta.0

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

@@ -1,26 +1,25 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
-import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
-import { d as defineCustomElement$7 } from './p-e1622f4a.js';
-import { d as defineCustomElement$6 } from './p-7c3348eb.js';
-import { d as defineCustomElement$5 } from './p-d10d21bd.js';
-import { d as defineCustomElement$4 } from './p-f7d94947.js';
-import { d as defineCustomElement$3 } from './p-63552d0e.js';
-import { d as defineCustomElement$2 } from './p-3308d5fa.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
+import { i as inheritAriaAttributes } from './p-Q3W78DlP.js';
+import { d as defineCustomElement$7 } from './p-BhLq7lgx.js';
+import { d as defineCustomElement$6 } from './p-BHBgkUfr.js';
+import { d as defineCustomElement$5 } from './p-D1ati-pM.js';
+import { d as defineCustomElement$4 } from './p-CPDv0bBc.js';
+import { d as defineCustomElement$3 } from './p-1YnjaUCy.js';
+import { d as defineCustomElement$2 } from './p-8koCGAVT.js';
 
 const headerLauncherCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}: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:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .wrapper .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .wrapper .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .wrapper .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}@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:901}";
-const TdsHeaderLauncherStyle0 = headerLauncherCss;
 
 const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncher extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
-        this.uuid = generateUniqueId();
         this.open = false;
-        this.buttonEl = undefined;
         this.hasListTypeMenu = false;
-        this.tdsAriaLabel = undefined;
+        this.uuid = generateUniqueId();
     }
     onAnyClick(event) {
         // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
@@ -58,11 +57,11 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: '214953326230ac1b5ab664b032783c20d9999531' }, h("div", { key: '0efccd70365257b6f682b777bb6a3d056996aa82', class: {
+        return (h(Host, { key: 'd6402957a4e8c7221a3cefae397117a952381d22' }, h("div", { key: '0d5e89739be69df6e111404ca64fa81dd35ffab9', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: '677518edd231dedb813d59220699bf3b1f1469a6' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: '7d9b39133b781601acb0d8f97237694209f8d355', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("tds-header-launcher-button", Object.assign({ key: '7c42d6bec11176653b8b00c458a5dd1a1e9ef168' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: 'a7eddf9c3df2f3e4229c1fade730a622767349ad', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
@@ -72,8 +71,8 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
             ] }, this.open ? h("slot", null) : null)))));
     }
     get host() { return this; }
-    static get style() { return TdsHeaderLauncherStyle0; }
-}, [1, "tds-header-launcher", {
+    static get style() { return headerLauncherCss; }
+}, [257, "tds-header-launcher", {
         "tdsAriaLabel": [1, "tds-aria-label"],
         "open": [32],
         "buttonEl": [32],

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

@@ -1,19 +1,20 @@
-import { p as proxyCustomElement, H, h } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h } from './index.js';
 
-const headerTitleCss = "h4{box-sizing:border-box;color:var(--tds-header-nav-item-color);font-weight:normal;font-family:var(--tds-font-family-headline);letter-spacing:normal;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}h4 slot{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 32px 0 16px}";
-const TdsHeaderTitleStyle0 = headerTitleCss;
+const headerTitleCss = "h4{box-sizing:border-box;color:var(--tds-header-nav-item-color);font-weight:normal;font-family:var(--tds-font-family-headline);letter-spacing:normal;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:14px;line-height:normal}h4 slot{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 32px 0 16px}";
 
 const TdsHeaderTitle$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderTitle extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     render() {
         return (h("h4", { key: '4af2f894bf508d0ea8f5c934f4b6e3be61f1ce1a' }, h("slot", { key: 'e5eaaf9c68f77041f6056af1bb7e1101b48c1ffc' })));
     }
-    static get style() { return TdsHeaderTitleStyle0; }
-}, [1, "tds-header-title"]);
+    static get style() { return headerTitleCss; }
+}, [257, "tds-header-title"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/tds-header.js

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { i as inheritAriaAttributes } from './p-Q3W78DlP.js';
 
 /**
  * Loop through the children and add the 'listitem' role if needed.
@@ -17,12 +17,13 @@ const updateListChildrenRoles = (targetNode) => {
 };
 
 const headerCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}html,:root{--tds-nav-dropdown-menu-box:0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);--tds-nav-dropdown-item-border-radius:0 0 4px 4px;--tds-font-family-headline:\"Scania Sans Headline\", arial, helvetica, sans-serif}tds-header{display:block;height:var(--tds-header-height);background-color:var(--tds-header-background);width:100%;z-index:300}tds-header tds-header-dropdown-list-item a *,tds-header tds-header-dropdown-list-item button *{pointer-events:none}nav{box-sizing:border-box;background-color:var(--tds-header-background);width:100%;display:block}nav *{box-sizing:border-box}nav .tds-header-component-list{height:var(--tds-header-height);all:unset;display:flex;justify-content:center;align-items:center}nav tds-header-dropdown,nav tds-header-item{display:none}nav .tds-header-middle-spacer{all:unset;display:block;flex-grow:1;height:var(--tds-header-height);border-right:1px solid var(--tds-header--basic-element-border)}@media screen and (min-width: 992px){nav tds-header-dropdown,nav tds-header-item{display:block}}nav tds-header-item:nth-child(3),nav tds-header-dropdown:nth-child(3){border-left:1px solid var(--tds-header--basic-element-border)}";
-const TdsHeaderStyle0 = headerCss;
 
 const TdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeader extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         const callback = (mutationsList) => {
             mutationsList.forEach((mutation) => {
                 if (mutation.type === 'childList') {
@@ -49,8 +50,8 @@ const TdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeader extends H {
         return (h(Host, { key: 'f5c7796ebe3f5d9bd6e555f0dd01f8ace54c1cd8' }, h("slot", { key: '77cba127f947cc8fefa875a6db0e68bf52c5a80e', name: "hamburger" }), h("slot", { key: 'daf9d8299734f72355eeaeb307dcc3e25520a7b8', name: "title" }), h("nav", Object.assign({ key: '904338fd0fb8ab3ce42b46ee482d021667fe49e8' }, navAttributes), h("ul", { key: '66994fd2de781178624f8d67c88e4d75e84d2844', class: "tds-header-component-list" }, h("slot", { key: '51ee40aa7b17fb2a36ca23c2cebfb74efb69ea24' }), h("li", { key: 'db64903ac70ee12d48cd5029997949875caa53e8', class: "tds-header-middle-spacer" }), h("slot", { key: '80a48331b218b734061a421c9e31f8fd1b98be1a', name: "end" })))));
     }
     get host() { return this; }
-    static get style() { return TdsHeaderStyle0; }
-}, [4, "tds-header"]);
+    static get style() { return headerCss; }
+}, [260, "tds-header"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/tds-icon.js

@@ -1,4 +1,4 @@
-import { I as Icon, d as defineCustomElement$1 } from './p-f7d94947.js';
+import { I as Icon, d as defineCustomElement$1 } from './p-CPDv0bBc.js';
 
 const TdsIcon = Icon;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,13 +1,15 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 
 const inlineTabCss = ":host{box-sizing:border-box;display:block;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-inline-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%;padding:20px 0}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:3px;bottom:3px;outline:2px solid var(--tds-blue-400);outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .inline-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .inline-tab-item{position:relative}:host .inline-tab-item:hover{cursor:pointer}:host .inline-tab-item:hover ::slotted(*){color:var(--tds-inline-tabs-tab-color-hover)}:host .inline-tab-item:hover::after{width:100%}:host .inline-tab-item::after{content:\" \";position:absolute;bottom:0;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 ::slotted(*){color:var(--tds-inline-tabs-tab-color-disabled)}:host .disabled::after{content:none}:host .disabled ::slotted(*:hover){cursor:not-allowed;color:var(--tds-inline-tabs-tab-color-disabled)}:host .disabled ::slotted(*:focus-visible){outline:none}:host(.last){margin-right:32px}";
-const TdsInlineTabStyle0 = inlineTabCss;
 
 const TdsInlineTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTab extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Disables the Tab. */
         this.disabled = false;
         this.selected = false;
     }
@@ -41,8 +43,8 @@ const TdsInlineTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTab exten
             } }, h("slot", { key: 'f2b45d7f0dd38cae953f61e933189eef8d7a9452' }))));
     }
     get host() { return this; }
-    static get style() { return TdsInlineTabStyle0; }
-}, [1, "tds-inline-tab", {
+    static get style() { return inlineTabCss; }
+}, [257, "tds-inline-tab", {
         "disabled": [4],
         "selected": [32],
         "setSelected": [64]

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

@@ -1,15 +1,28 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const inlineTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus-visible::before,:host .scroll-left-button:focus-visible::before{content:\"\";position:absolute;inset:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus-visible,:host .scroll-left-button:focus-visible{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
-const TdsInlineTabsStyle0 = inlineTabsCss;
 
 const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsChange = createEvent(this, "tdsChange", 7);
+        /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+        this.modeVariant = 'primary';
+        /** Sets the default selected Tab. */
+        this.defaultSelectedIndex = 0;
+        /** Defines aria-label on left scroll button */
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        /** Defines aria-label on right scroll button */
+        this.tdsScrollRightAriaLabel = 'Scroll right';
+        /** Custom left padding value for the wrapper element. */
+        this.leftPadding = 32;
+        this.showLeftScroll = false;
+        this.showRightScroll = false;
         this.navWrapperElement = null; // reference to container with nav buttons
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
@@ -63,14 +76,6 @@ const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs ext
                 }
             });
         };
-        this.modeVariant = 'primary';
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.leftPadding = 32;
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
     }
     /** Selects a Tab based on tabindex, will not select a disabled Tab. */
     async selectTab(tabIndex) {
@@ -175,16 +180,16 @@ const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs ext
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'f33abd9071c85c0651a3ab93e3996ec44717e325', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '8a5233b2a941a3a1e72dc45f93015b5e606663a8', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '305a1bd0998686df8e69d6f06e9d767c86ba20e0', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '8d59508b84bea296d97e27cf3da3817ed2014f49', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'f2a8051863cfa93f8b2a5c562fc5ebefcc36b195', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'a93d1cb8ddc5486bbb15449c328a25f6e8e2b4cd', name: "chevron_left", size: "20px" })), h("slot", { key: 'e5b096420d72d12c861730fd9829baeba7cce625', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'f154a7b6553fe77e3f09da314403db5326df8e21', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '6832c693ab8a446a629788894f792f571c09cbe3', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '7d302c8197a96537d25d2a881c5ecb2a3a28e849', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '8050bf7f62240241d415c909500b27c1ceb199ee', name: "chevron_left", size: "20px" })), h("slot", { key: '6818de93a8757534f6244e6208a7dbdb8a83c144', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'ebfa34fab49cd5931e355acb5adf154ac548a9c0', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '24183941036df17810a990c3972393efbf031e03', name: "chevron_right", size: "20px" })))));
     }
     get host() { return this; }
     static get watchers() { return {
         "selectedIndex": ["handleSelectedIndexUpdate"]
     }; }
-    static get style() { return TdsInlineTabsStyle0; }
-}, [1, "tds-inline-tabs", {
+    static get style() { return inlineTabsCss; }
+}, [257, "tds-inline-tabs", {
         "modeVariant": [1, "mode-variant"],
         "defaultSelectedIndex": [2, "default-selected-index"],
         "selectedIndex": [514, "selected-index"],

package/dist/components/tds-link.js

@@ -1,15 +1,19 @@
-import { p as proxyCustomElement, H, h } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h } from './index.js';
 
 const linkCss = ":host{display:inline}:host ::slotted(*){all:unset;cursor:pointer;outline:none;color:var(--tds-link);text-decoration:underline}:host ::slotted(*:hover){color:var(--tds-link-hover);text-decoration:none}:host .no-underline ::slotted(*){text-decoration:none}:host .no-underline ::slotted(*:hover){color:var(--tds-link-hover);text-decoration:underline;text-decoration-color:var(--tds-link-hover)}:host ::slotted(*:focus-visible){color:var(--tds-link-focus);text-decoration:none;box-shadow:0 0 0 1px var(--tds-white), 0 0 0 3px var(--tds-link-focus)}:host ::slotted(*:active){color:var(--tds-link);text-decoration:underline;text-decoration-color:var(--tds-link)}:host ::slotted(*:visited){color:var(--tds-link-visited);text-decoration-color:var(--tds-link-visited)}.disabled ::slotted(*),.disabled ::slotted(*:visited){color:var(--tds-link-disabled);text-decoration-color:var(--tds-link-disabled);pointer-events:none}.standalone ::slotted(*){font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}";
-const TdsLinkStyle0 = linkCss;
 
 const TdsLink$1 = /*@__PURE__*/ proxyCustomElement(class TdsLink extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Disables the Link */
         this.disabled = false;
+        /** Displays the Link with an underline. */
         this.underline = true;
+        /** Displays the Link as a standalone component. Not part of a paragraph. */
         this.standalone = false;
     }
     connectedCallback() {
@@ -37,8 +41,8 @@ const TdsLink$1 = /*@__PURE__*/ proxyCustomElement(class TdsLink extends H {
             } }, h("slot", { key: 'f574609666ae7484752ec8cfaf7f0bffa1645c83' })));
     }
     get host() { return this; }
-    static get style() { return TdsLinkStyle0; }
-}, [1, "tds-link", {
+    static get style() { return linkCss; }
+}, [257, "tds-link", {
         "disabled": [4],
         "underline": [4],
         "standalone": [4]

package/dist/components/tds-message.js

@@ -1,15 +1,26 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
-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-message-border-info)}:host .wrapper.information tds-icon{color:var(--tds-message-icon-info)}:host .wrapper.success{background-color:var(--tds-message-background-success);border-left:4px solid var(--tds-message-border-success)}:host .wrapper.success tds-icon{color:var(--tds-message-icon-success)}:host .wrapper.error{background-color:var(--tds-message-background-error);border-left:4px solid var(--tds-message-border-error)}:host .wrapper.error tds-icon{color:var(--tds-message-icon-error)}:host .wrapper.warning{background-color:var(--tds-message-background-warning);border-left:4px solid var(--tds-message-border-warning)}:host .wrapper.warning tds-icon{color:var(--tds-message-icon-warning)}:host .wrapper.minimal{border:none;padding:0;background-color:transparent}:host .wrapper.minimal .header{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}:host .wrapper.minimal.error .header{color:var(--tds-message-minimal-header-error)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--foreground-text-strong);padding:2px 0}:host .content .header{font-family:var(--headline-07-font-family);font-size:var(--headline-07-font-size);line-height:var(--headline-07-line-height);font-weight:var(--headline-07-font-weight);letter-spacing:var(--headline-07-letter-spacing);text-transform:var(--headline-07-text-transform)}:host .content .extended-message{color:var(--foreground-text-strong);font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}";
-const TdsMessageStyle0 = messageCss;
+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-message-border-info)}:host .wrapper.information tds-icon{color:var(--tds-message-icon-info)}:host .wrapper.success{background-color:var(--tds-message-background-success);border-left:4px solid var(--tds-message-border-success)}:host .wrapper.success tds-icon{color:var(--tds-message-icon-success)}:host .wrapper.error{background-color:var(--tds-message-background-error);border-left:4px solid var(--tds-message-border-error)}:host .wrapper.error tds-icon{color:var(--tds-message-icon-error)}:host .wrapper.warning{background-color:var(--tds-message-background-warning);border-left:4px solid var(--tds-message-border-warning)}:host .wrapper.warning tds-icon{color:var(--tds-message-icon-warning)}:host .wrapper.minimal{border:none;padding:0;background-color:transparent}:host .wrapper.minimal .header{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}:host .wrapper.minimal.error .header{color:var(--tds-message-minimal-header-error)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--foreground-text-strong);padding:2px 24px 2px 0;overflow-wrap:anywhere}:host .content .header{font-family:var(--headline-07-font-family);font-size:var(--headline-07-font-size);line-height:var(--headline-07-line-height);font-weight:var(--headline-07-font-weight);letter-spacing:var(--headline-07-letter-spacing);text-transform:var(--headline-07-text-transform)}:host .content .extended-message{color:var(--foreground-text-strong);font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}";
 
 const TdsMessage$1 = /*@__PURE__*/ proxyCustomElement(class TdsMessage extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Variant of the component, based on current mode. */
+        this.modeVariant = null;
+        /** Variant of Message. */
+        this.variant = 'information';
+        /** Removes the icon in the Message. */
+        this.noIcon = false;
+        /** Minimal Message styling. */
+        this.minimal = false;
+        /** Role of the message component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. */
+        this.tdsAlertDialog = 'dialog';
         this.getIconName = () => {
             switch (this.variant) {
                 case 'information':
@@ -24,13 +35,6 @@ const TdsMessage$1 = /*@__PURE__*/ proxyCustomElement(class TdsMessage extends H
                     return 'info';
             }
         };
-        this.header = undefined;
-        this.modeVariant = null;
-        this.variant = 'information';
-        this.noIcon = false;
-        this.minimal = false;
-        this.tdsAlertDialog = 'dialog';
-        this.tdsAriaLabel = undefined;
     }
     getAriaLabel() {
         if (this.header) {
@@ -48,8 +52,8 @@ const TdsMessage$1 = /*@__PURE__*/ proxyCustomElement(class TdsMessage extends H
                 minimal: this.minimal,
             } }, !this.noIcon && (h("tds-icon", { key: 'ea830e6051ef9e0f751a1e8d5e24fbd17ad6ec58', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'c71e70d57147d9ac050e7a223ed097e58cb6a49e', class: `content` }, this.header && (h("div", { key: '1acded0a8f8522792f41a4331a2009a42cbf4894', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: '0aed7c6daf7892e6ac1d5b3f8715e7c9032b11a3', class: "extended-message", id: contentId }, h("slot", { key: '75898f0a957581dc2720667c3eaae6e17201d81c' })))))));
     }
-    static get style() { return TdsMessageStyle0; }
-}, [1, "tds-message", {
+    static get style() { return messageCss; }
+}, [257, "tds-message", {
         "header": [1],
         "modeVariant": [1, "mode-variant"],
         "variant": [1],

package/dist/components/tds-modal.js

@@ -1,18 +1,33 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { h as hasSlot } from './p-ae110fc2.js';
-import { g as generateUniqueId } from './p-11648030.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { h as hasSlot } from './p-DDX6uFcm.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
-const modalCss = ".tds-modal{box-sizing:border-box;box-shadow:var(--tds-modal-box-shadow);background-color:var(--background-elevation-layer-02);margin:auto;position:relative;border-radius:var(--radius-narrow);max-height:85vh;overflow-y:auto;pointer-events:auto}.tds-modal *{box-sizing:border-box}.tds-modal::-webkit-scrollbar{width:6px;background-color:transparent}.tds-modal::-webkit-scrollbar-track{background-color:transparent}.tds-modal::-webkit-scrollbar-thumb{background-color:var(--foreground-elements-transparparent-discrete);border-radius:3px}.tds-modal__actions-sticky{overflow:hidden;display:flex;flex-direction:column}.tds-modal__actions-sticky .body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{bottom:-1px;left:0;right:0;background-color:var(--background-elevation-layer-02);padding:24px 16px 16px;display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--background-elevation-layer-02);display:flex;gap:16px;padding:24px 16px 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:50%}.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:16px;position:sticky;top:0;background-color:var(--background-elevation-layer-02);z-index:1}.header,slot[name=header]::slotted(*){font-family:var(--headline-05-font-family);font-size:var(--headline-05-font-size);line-height:var(--headline-05-line-height);font-weight:var(--headline-05-font-weight);letter-spacing:var(--headline-05-letter-spacing);text-transform:var(--headline-05-text-transform);color:var(--foreground-text-strong);margin:0;flex:1}.body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);color:var(--foreground-text-strong);overflow-y:visible;padding:0 16px 16px}.body::-webkit-scrollbar{width:6px;background-color:transparent}.body::-webkit-scrollbar-track{background-color:transparent}.body::-webkit-scrollbar-thumb{background-color:var(--foreground-elements-transparparent-discrete);border-radius:3px}.tds-modal-backdrop{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--tds-modal-backdrop-background);pointer-events:auto}.tds-modal-backdrop *{box-sizing:border-box}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(--foreground-text-strong);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media (min-width: 320px){.tds-modal-close{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close{margin-left:48px}}.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:16px}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:48px}}.tds-modal-close-btn svg{fill:var(--foreground-text-strong)}.tds-modal-overflow{overflow:hidden}:host{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;padding:0 16px;z-index:700;pointer-events:none}:host *{box-sizing:border-box}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host(.show){display:flex}:host(.hide){display:none}";
-const TdsModalStyle0 = modalCss;
+const modalCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}.tds-modal{box-sizing:border-box;box-shadow:var(--tds-modal-box-shadow);background-color:var(--background-elevation-layer-02);margin:auto;position:relative;border-radius:var(--radius-narrow);max-height:85vh;overflow-y:auto;pointer-events:auto}.tds-modal *{box-sizing:border-box}.tds-modal:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}.tds-modal::-webkit-scrollbar{width:var(--tds-scrollbar-width)}.tds-modal::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}.tds-modal::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}.tds-modal::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.tds-modal{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-modal__actions-sticky{overflow:hidden;display:flex;flex-direction:column}.tds-modal__actions-sticky .body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{bottom:-1px;left:0;right:0;background-color:var(--background-elevation-layer-02);padding:24px 16px 16px;display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--background-elevation-layer-02);display:flex;gap:16px;padding:24px 16px 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:50%}.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:16px;position:sticky;top:0;background-color:var(--background-elevation-layer-02);z-index:1}.header,slot[name=header]::slotted(*){font-family:var(--headline-05-font-family);font-size:var(--headline-05-font-size);line-height:var(--headline-05-line-height);font-weight:var(--headline-05-font-weight);letter-spacing:var(--headline-05-letter-spacing);text-transform:var(--headline-05-text-transform);color:var(--foreground-text-strong);margin:0;flex:1}.body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);color:var(--foreground-text-strong);overflow-y:visible;padding:0 16px 16px}.body:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}.body::-webkit-scrollbar{width:var(--tds-scrollbar-width)}.body::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}.body::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}.body::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.body{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-modal-backdrop{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--tds-modal-backdrop-background);pointer-events:auto}.tds-modal-backdrop *{box-sizing:border-box}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(--foreground-text-strong);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media (min-width: 320px){.tds-modal-close{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close{margin-left:48px}}.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:16px}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:48px}}.tds-modal-close-btn svg{fill:var(--foreground-text-strong)}.tds-modal-overflow{overflow:hidden}:host{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;padding:0 16px;z-index:700;pointer-events:none}:host *{box-sizing:border-box}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host(.show){display:flex}:host(.hide){display:none}";
 
 const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsClose = createEvent(this, "tdsClose", 7);
         this.tdsOpen = createEvent(this, "tdsOpen", 7);
+        /** Disables closing Modal on clicking on overlay area. */
+        this.prevent = false;
+        /** Size of Modal  */
+        this.size = 'md';
+        /** Changes the position behaviour of the actions slot.  */
+        this.actionsPosition = 'static';
+        /** Shows or hides the close [X] button. */
+        this.closable = true;
+        /** Role of the modal component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. */
+        this.tdsAlertDialog = 'dialog';
+        // State that keeps track of show/closed state for the Modal.
+        this.isShown = false;
+        // Focus state index in focusable Elements
+        this.activeElementIndex = 0;
         this.handleClose = (event) => {
             const closeEvent = this.tdsClose.emit(event);
             this.returnFocusOnClose();
@@ -61,17 +76,6 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
                 referenceEl.addEventListener('click', this.handleReferenceElementClick);
             }
         };
-        this.header = undefined;
-        this.prevent = false;
-        this.size = 'md';
-        this.actionsPosition = 'static';
-        this.selector = undefined;
-        this.referenceEl = undefined;
-        this.show = undefined;
-        this.closable = true;
-        this.tdsAlertDialog = 'dialog';
-        this.isShown = false;
-        this.activeElementIndex = 0;
     }
     /** Shows the Modal.  */
     async showModal() {
@@ -216,8 +220,8 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
             }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '2129611789e7d9c1e32731f59100f75ff4e58800', class: "tds-modal-backdrop" }), h("div", { key: 'cce280887ce68ab5471cd939847c8f23703e6a11', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '2629204523dff0d2afefab238514db74b9d1a93b', id: headerId, class: "header" }, this.header && h("div", { key: '040ddd22c7b782d77e07cc1ff4cd1fdf0d508cbe', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '7b15247fea7c3ab2986e453b98e7a7f9ccff943f', name: "header" }), this.closable && (h("button", { key: '67e09f9f95ad58e02c1f9adb9883af4a1c16f837', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '52694db7eb7dc40ca2ea8aeb3e13611f899177a8', name: "cross", size: "20px" })))), h("div", { key: 'b7fedc44fae5a964399f6b63fad96acaba9263a1', id: bodyId, class: "body" }, h("slot", { key: 'd60cbee2a55a487f738aa9a741d8b1e0cb74484e', name: "body" })), usesActionsSlot && h("slot", { key: 'c969e1f820a4f4ecfab84fe3349eee0233710f05', name: "actions" }))));
     }
     get host() { return this; }
-    static get style() { return TdsModalStyle0; }
-}, [1, "tds-modal", {
+    static get style() { return modalCss; }
+}, [257, "tds-modal", {
         "header": [1],
         "prevent": [4],
         "size": [1],

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

@@ -1,13 +1,15 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 
 const navigationTabCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;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%;padding:26px 0}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .navigation-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .navigation-tab-item{position:relative}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover ::slotted(*){color:var(--tds-navigation-tabs-tab-color-hover)}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:0;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 .navigation-tab-item:hover:focus-within::after{bottom:3px}: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 ::slotted(*){color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled::after{content:none}:host .disabled ::slotted(*:hover){cursor:not-allowed;color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled ::slotted(*:focus-visible){outline:none}:host(.last){margin-right:32px}";
-const TdsNavigationTabStyle0 = navigationTabCss;
 
 const TdsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTab extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Disables the Tab. */
         this.disabled = false;
         this.selected = false;
     }
@@ -38,8 +40,8 @@ const TdsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationT
            ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '9824df7626af1bedbc17f98c0cfe305b9546f235' }))));
     }
     get host() { return this; }
-    static get style() { return TdsNavigationTabStyle0; }
-}, [1, "tds-navigation-tab", {
+    static get style() { return navigationTabCss; }
+}, [257, "tds-navigation-tab", {
         "disabled": [4],
         "selected": [32],
         "setSelected": [64]

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

@@ -1,15 +1,28 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus::before,:host .scroll-left-button:focus::before{content:\"\";position:absolute;left:3px;right:3px;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
-const TdsNavigationTabsStyle0 = navigationTabsCss;
 
 const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTabs extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsChange = createEvent(this, "tdsChange", 7);
+        /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+        this.modeVariant = 'primary';
+        /** Sets the default selected Tab. */
+        this.defaultSelectedIndex = 0;
+        /** Custom left padding value for the wrapper element. */
+        this.leftPadding = 32;
+        /** Defines aria-label on left scroll button */
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        /** Defines aria-label on right scroll button */
+        this.tdsScrollRightAriaLabel = 'Scroll right';
+        this.showLeftScroll = false;
+        this.showRightScroll = false;
         this.navWrapperElement = null; // reference to container with nav buttons
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
@@ -63,14 +76,6 @@ const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigation
                 }
             });
         };
-        this.modeVariant = 'primary';
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.leftPadding = 32;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
     }
     /** Sets the passed tabindex as the selected Tab. */
     async selectTab(tabIndex) {
@@ -175,22 +180,22 @@ const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigation
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'cdf0eff9acca827e372a58f5721ff9279b0360f4', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'a8fafbc680fbdb0450db591e7f3ffda864946684', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '6e532a0645718391624017452e1d8bd253868af3', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'a1a7d5dcf07187d85bed5c193422328202331125', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '402e0ca33fa71dced98cf8d86e26e3dba312fa7d', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'a9bd22bc8abec2e7b1237884402349d63a930043', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '2849a2da7c6ef133d173756778400baa2a51d58d', name: "chevron_left", size: "20px" })), h("slot", { key: '64081b7518abde00c8f1d80ff414849bccd1cb0b', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '916ba6b9107982f8b8763920bdf4e2bd99127943', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '222fc93851ab026162c9ed02a64c02247582e886', name: "chevron_left", size: "20px" })), h("slot", { key: '7dfff9f0ec4453e5499e83b0806563769364bbeb', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'bc75394c414ea6d8f276db8f119545ac4f91cf1f', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '26f84d67bc4b1eb04668464a74b655db1953d999', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '42abd91c08e7fb44b3432bfa71b09ba2b0f1c40d', name: "chevron_right", size: "20px" })))));
     }
     get host() { return this; }
     static get watchers() { return {
         "selectedIndex": ["handleSelectedIndexUpdate"]
     }; }
-    static get style() { return TdsNavigationTabsStyle0; }
-}, [1, "tds-navigation-tabs", {
+    static get style() { return navigationTabsCss; }
+}, [257, "tds-navigation-tabs", {
         "modeVariant": [1, "mode-variant"],
         "defaultSelectedIndex": [2, "default-selected-index"],
         "selectedIndex": [514, "selected-index"],

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

@@ -1,4 +1,4 @@
-import { T as TdsPopoverCanvas$1, d as defineCustomElement$1 } from './p-63552d0e.js';
+import { T as TdsPopoverCanvas$1, d as defineCustomElement$1 } from './p-1YnjaUCy.js';
 
 const TdsPopoverCanvas = TdsPopoverCanvas$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { T as TdsPopoverCore$1, d as defineCustomElement$1 } from './p-3308d5fa.js';
+import { T as TdsPopoverCore$1, d as defineCustomElement$1 } from './p-8koCGAVT.js';
 
 const TdsPopoverCore = TdsPopoverCore$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,13 +1,15 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 
 const popoverMenuItemCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host .wrapper{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-popover-menu-color);position:relative;width:100%;display:flex;align-items:center;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-easy)}:host .wrapper:hover{cursor:pointer;background-color:var(--tds-popover-menu-background-hover)}:host .wrapper.disabled{cursor:not-allowed;color:var(--tds-popover-menu-divider-disabled-color)}:host .wrapper.disabled:hover{background-color:inherit}:host .wrapper.disabled ::slotted(tds-icon){color:var(--tds-popover-menu-divider-disabled-icon-color)}:host .wrapper.disabled ::slotted(*){pointer-events:none}:host ::slotted(*:not(tds-icon)){all:unset;width:100%;display:inline-flex;display:flex;align-items:center;gap:10px;padding:10px 16px}:host ::slotted(*:focus-visible)::before{z-index:-1;content:\"\";display:block;position:absolute;width:calc(100% - 4px);height:100%;top:0;left:2px;outline:1px solid var(--tds-blue-400);outline-offset:1px}";
-const TdsPopoverMenuItemStyle0 = popoverMenuItemCss;
 
 const TdsPopoverMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenuItem extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Disables the Popover Menu Item */
         this.disabled = false;
     }
     render() {
@@ -16,8 +18,8 @@ const TdsPopoverMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMe
                 disabled: this.disabled,
             } }, h("slot", { key: 'ddacc7938ca455a8151b2e46449414146073b045' }))));
     }
-    static get style() { return TdsPopoverMenuItemStyle0; }
-}, [1, "tds-popover-menu-item", {
+    static get style() { return popoverMenuItemCss; }
+}, [257, "tds-popover-menu-item", {
         "disabled": [4]
     }]);
 function defineCustomElement$1() {