@scania/tegel 1.38.0 → 1.40.0-stencil-core-4.38.1-beta.0

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

@@ -1,12 +1,21 @@
-import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { r as registerInstance, h, H as Host } from './index-Cl9XBhQW.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.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(--system-info-default)}:host .wrapper.information tds-icon{color:var(--system-info-default)}:host .wrapper.success{background-color:var(--tds-message-background-success);border-left:4px solid var(--system-success-default)}:host .wrapper.success tds-icon{color:var(--system-success-default)}:host .wrapper.error{background-color:var(--tds-message-background-error);border-left:4px solid var(--system-danger-default)}:host .wrapper.error tds-icon{color:var(--system-danger-default)}:host .wrapper.warning{background-color:var(--tds-message-background-warning);border-left:4px solid var(--system-warning-default)}:host .wrapper.warning tds-icon{color:var(--system-warning-default)}: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(--system-danger-default)}: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 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 TdsMessage = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** 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':
@@ -21,13 +30,6 @@ const TdsMessage = class {
                     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) {
@@ -39,13 +41,13 @@ const TdsMessage = class {
     render() {
         const headerId = this.header ? `tds-message-header-${generateUniqueId()}` : undefined;
         const contentId = !this.minimal ? `tds-message-content-${generateUniqueId()}` : undefined;
-        return (h(Host, { key: '752eb725898add9261df7460b3043642e7e6a7ef', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'd1346696f7f4d63d25cbacc0b3cbf60c39a54add', class: {
+        return (h(Host, { key: 'ac71829f0647270d499469049a833c282abca25d', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'ae95905137e70a95e6013e643e43baec0c10792b', class: {
                 wrapper: true,
                 [this.variant]: true,
                 minimal: this.minimal,
-            } }, !this.noIcon && (h("tds-icon", { key: '39d83a70a25d5ac07c3786f47989ce77b1a9b386', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'aeb139399975656ee15493dab9c2ac77e4f295a0', class: `content` }, this.header && (h("div", { key: 'd9a1e8b5d2513630ff9c0a4363d346dfe2ecfd09', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: 'dffbcdb31b11c4f6313609fac311991202b9f462', class: "extended-message", id: contentId }, h("slot", { key: '38578271864c5884c5a4a4c105ae44ef6d2caf07' })))))));
+            } }, !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' })))))));
     }
 };
-TdsMessage.style = TdsMessageStyle0;
+TdsMessage.style = messageCss;
 
 export { TdsMessage as tds_message };

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

@@ -1,15 +1,28 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { h as hasSlot } from './hasSlot-d52114d0.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cl9XBhQW.js';
+import { h as hasSlot } from './hasSlot-DDX6uFcm.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.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 TdsModal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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();
@@ -58,17 +71,6 @@ const TdsModal = class {
                 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() {
@@ -207,13 +209,13 @@ const TdsModal = class {
         const usesActionsSlot = hasSlot('actions', this.host);
         const headerId = this.header ? `tds-modal-header-${generateUniqueId()}` : undefined;
         const bodyId = `tds-modal-body-${generateUniqueId()}`;
-        return (h(Host, { key: '2d39760de58fd957585e4370aa88447d85249eca', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
+        return (h(Host, { key: '4a220f8d1156cd7ef30ba0f77e33f6b368a71c5d', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
                 show: this.isShown,
                 hide: !this.isShown,
-            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '5eeaf5c29529bf77ddde4892067f13d312d1bba7', class: "tds-modal-backdrop" }), h("div", { key: '8a6ccd911dfec947a809320a0631d5f9904ef78d', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: 'b7c760ebded4e98319cec75c161002a579316902', id: headerId, class: "header" }, this.header && h("div", { key: 'db14e71913052ba5367ab95a41a366c7f2dea4a3', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '62b394718c78e564fd50e7ff3328e637a63679e6', name: "header" }), this.closable && (h("button", { key: '9ff8ad81be4f72ee6a298a9ba39a1024269d3ec2', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: 'b34b8a55c7f5c65ce7a3fdee6114c66ee4ab82c3', name: "cross", size: "20px" })))), h("div", { key: 'ab04e506dd94c69d8f91fb774fa85f355f3629d4', id: bodyId, class: "body" }, h("slot", { key: 'f4a8e2377b4cae3a9c4fa1032e896b0b0c58a06a', name: "body" })), usesActionsSlot && h("slot", { key: '09137d7c8b81f91dbf419b10c8a085de25df1272', name: "actions" }))));
+            }, 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 getElement(this); }
 };
-TdsModal.style = TdsModalStyle0;
+TdsModal.style = modalCss;
 
 export { TdsModal as tds_modal };

package/dist/esm/tds-navigation-tab.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cl9XBhQW.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:focus-visible::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 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 TdsNavigationTab = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** Disables the Tab. */
         this.disabled = false;
         this.selected = false;
     }
@@ -32,11 +32,11 @@ const TdsNavigationTab = class {
         }
     }
     render() {
-        return (h(Host, { key: '28ba6f5bedc4f2a31e5011e37bf92d3b38fa8abe' }, h("div", { key: 'ac5aad203d8a13dc42a8f9e99b2ccdd7c784c9af', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'da6292612753748f6cac68e0b282ecde642cb5b5' }))));
+        return (h(Host, { key: 'fe07e37cb49b89fcd4f84e09f0d281c058e2ef0f' }, h("div", { key: '243d283d090cae8d00cfafa15a95f099d9c7d2e8', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '9824df7626af1bedbc17f98c0cfe305b9546f235' }))));
     }
     get host() { return getElement(this); }
 };
-TdsNavigationTab.style = TdsNavigationTabStyle0;
+TdsNavigationTab.style = navigationTabCss;
 
 export { TdsNavigationTab as tds_navigation_tab };

package/dist/esm/tds-navigation-tabs.entry.js

@@ -1,12 +1,23 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cl9XBhQW.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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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
@@ -60,14 +71,6 @@ const TdsNavigationTabs = class {
                 }
             });
         };
-        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) {
@@ -172,21 +175,21 @@ const TdsNavigationTabs = class {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '2fc278cacc04614ca43b70f52b12f79b31227fbb', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '50357810903ea3bff83fde4478960de0866c7c15', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'cdf0eff9acca827e372a58f5721ff9279b0360f4', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'a8fafbc680fbdb0450db591e7f3ffda864946684', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'b5b05a2f9bce1618c71594cf388dc83efce98915', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '402e0ca33fa71dced98cf8d86e26e3dba312fa7d', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'aad19852d36ff8e1642ba464f9618a57ff37169c', name: "chevron_left", size: "20px" })), h("slot", { key: '3dcf0d7e6900df33a69863868a3a48dcb4aa8141', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '352539955226aecf92deb0c0db83c42a5b021e43', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, 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: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '0e3fe531374dd82b6ee5de1a5a1bea4a38e03500', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '26f84d67bc4b1eb04668464a74b655db1953d999', name: "chevron_right", size: "20px" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
         "selectedIndex": ["handleSelectedIndexUpdate"]
     }; }
 };
-TdsNavigationTabs.style = TdsNavigationTabsStyle0;
+TdsNavigationTabs.style = navigationTabsCss;
 
 export { TdsNavigationTabs as tds_navigation_tabs };

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

@@ -1,24 +1,33 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { i as inheritAttributes } from './inheritAttributes-d21e267b.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cl9XBhQW.js';
+import { i as inheritAttributes } from './inheritAttributes-CF8bH08v.js';
 
-const popoverCanvasCss = ".tds-popover-canvas.sc-tds-popover-canvas{box-sizing:border-box;display:inline-block;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:900}.tds-popover-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}";
-const TdsPopoverCanvasStyle0 = popoverCanvasCss;
+const popoverCanvasCss = ".tds-popover-canvas.sc-tds-popover-canvas{box-sizing:border-box;display:inline-block;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:var(--tds-popover-canvas-box-shadow);border-radius:4px;z-index:900}.tds-popover-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}";
 
 const TdsPopoverCanvas = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.inheritedAttributes = [];
-        this.selector = undefined;
-        this.referenceEl = undefined;
+        /** Decides if the component should be visible from the start. */
         this.defaultShow = false;
+        /** Controls whether the Popover is shown or not. If this is set hiding and showing
+         * will be decided by this prop and will need to be controlled from the outside. This
+         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
+         */
         this.show = null;
+        /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */
         this.placement = 'auto';
+        /** Sets the offset skidding */
         this.offsetSkidding = 0;
+        /** Whether the popover should animate when being opened/closed or not */
         this.animation = 'none';
+        /** Sets the offset distance */
         this.offsetDistance = 8;
+        /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */
         this.modifiers = [];
+        /** Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. */
         this.tdsAlertDialog = 'dialog';
-        this.childRef = undefined;
+        /** Mode variant of the component, based on current mode. */
+        this.modeVariant = null;
+        this.inheritedAttributes = [];
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -30,15 +39,17 @@ const TdsPopoverCanvas = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '58db11b606cb1211fc569e0868a602ed935b46fa' }, h("tds-popover-core", Object.assign({ key: 'be884f4ea53cbb76e2c07cd87fba10c66cb18618', role: this.tdsAlertDialog }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '8f22b74f8df985de4505b1472cf47b621d5c515e', class: {
+                [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
+            } }, h("tds-popover-core", Object.assign({ key: 'a7d3fed2b26cd2dc532e9e78413828d52b28b21e', role: this.tdsAlertDialog }, this.inheritedAttributes, { class: {
                 'tds-popover-canvas': 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, modifiers: this.modifiers, trigger: 'click', ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: 'b7436bdce7bb19745ac25dfc5a9db16f308db41c' }, h("slot", { key: '6436d57046cde0d03359899690be4af1b17fe506' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: '3c1fde8225ca64b259798f763b8d2264346c246e' }, h("slot", { key: 'e133b76f8088a4b572c8bb69792bc3fa6d652da9' })))));
     }
     get host() { return getElement(this); }
 };
-TdsPopoverCanvas.style = TdsPopoverCanvasStyle0;
+TdsPopoverCanvas.style = popoverCanvasCss;
 
 export { TdsPopoverCanvas as tds_popover_canvas };

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cl9XBhQW.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -144,7 +144,7 @@ function effect$2(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const applyStyles$1 = {
+var applyStyles$1 = {
   name: 'applyStyles',
   enabled: true,
   phase: 'write',
@@ -459,7 +459,7 @@ function effect$1(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const arrow$1 = {
+var arrow$1 = {
   name: 'arrow',
   enabled: true,
   phase: 'main',
@@ -626,7 +626,7 @@ function computeStyles(_ref5) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const computeStyles$1 = {
+var computeStyles$1 = {
   name: 'computeStyles',
   enabled: true,
   phase: 'beforeWrite',
@@ -673,7 +673,7 @@ function effect(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const eventListeners = {
+var eventListeners = {
   name: 'eventListeners',
   enabled: true,
   phase: 'write',
@@ -983,7 +983,6 @@ function detectOverflow(state, options) {
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
     element: popperRect,
-    strategy: 'absolute',
     placement: placement
   });
   var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
@@ -1179,7 +1178,7 @@ function flip(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const flip$1 = {
+var flip$1 = {
   name: 'flip',
   enabled: true,
   phase: 'main',
@@ -1241,7 +1240,7 @@ function hide(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const hide$1 = {
+var hide$1 = {
   name: 'hide',
   enabled: true,
   phase: 'main',
@@ -1293,7 +1292,7 @@ function offset(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const offset$1 = {
+var offset$1 = {
   name: 'offset',
   enabled: true,
   phase: 'main',
@@ -1311,13 +1310,12 @@ function popperOffsets(_ref) {
   state.modifiersData[name] = computeOffsets({
     reference: state.rects.reference,
     element: state.rects.popper,
-    strategy: 'absolute',
     placement: state.placement
   });
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const popperOffsets$1 = {
+var popperOffsets$1 = {
   name: 'popperOffsets',
   enabled: true,
   phase: 'read',
@@ -1452,7 +1450,7 @@ function preventOverflow(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const preventOverflow$1 = {
+var preventOverflow$1 = {
   name: 'preventOverflow',
   enabled: true,
   phase: 'main',
@@ -1816,13 +1814,39 @@ const generateClassList = (classes) => {
 };
 
 const tdsPopoverCoreCss = ".sc-tds-popover-core-h{pointer-events:none;display:block}.tds-animation-enter-fade.sc-tds-popover-core-h{animation:tds-fade-in var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter) forwards}.tds-animation-exit-fade.sc-tds-popover-core-h{animation:tds-fade-out var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit) forwards}.is-shown.sc-tds-popover-core-h{opacity:1;pointer-events:auto;visibility:visible}.is-hidden.sc-tds-popover-core-h{opacity:0;pointer-events:none;visibility:hidden}.initially-hidden.sc-tds-popover-core-h{opacity:0;pointer-events:none;visibility:hidden}";
-const TdsPopoverCoreStyle0 = tdsPopoverCoreCss;
 
 const TdsPopoverCore = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.internalTdsShow = createEvent(this, "internalTdsShow", 4);
         this.internalTdsClose = createEvent(this, "internalTdsClose", 0);
+        /** Decides if the component should be visible from the start. */
+        this.defaultShow = false;
+        /** Whether the popover should animate when being opened/closed or not */
+        this.animation = 'none';
+        /** Controls whether the Popover is shown or not. If this is set hiding and showing
+         * will be decided by this prop and will need to be controlled from the outside. This
+         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
+         */
+        this.show = null;
+        /** Decides the placement of the Popover Menu */
+        this.placement = 'auto';
+        /** Sets the offset skidding */
+        this.offsetSkidding = 0;
+        /** Sets the offset distance */
+        this.offsetDistance = 8;
+        /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */
+        this.modifiers = [];
+        /** What triggers the popover to show */
+        this.trigger = 'click';
+        /** Decides if the popover should hide automatically.
+         * Alternatevly it can be hidden externally based on emitted events. */
+        this.autoHide = true;
+        this.renderedShowValue = false;
+        this.isShown = false;
+        this.disableLogic = false;
+        this.hasShownAtLeastOnce = false;
+        this.openedByKeyboard = false;
         this.uuid = generateUniqueId();
         this.setIsShown = function setIsShown(isShown) {
             if (typeof isShown === 'function') {
@@ -1859,24 +1883,6 @@ const TdsPopoverCore = class {
             event.stopPropagation();
             this.setIsShown(false);
         }.bind(this);
-        this.selector = undefined;
-        this.referenceEl = undefined;
-        this.defaultShow = false;
-        this.animation = 'none';
-        this.show = null;
-        this.placement = 'auto';
-        this.offsetSkidding = 0;
-        this.offsetDistance = 8;
-        this.modifiers = [];
-        this.trigger = 'click';
-        this.autoHide = true;
-        this.renderedShowValue = false;
-        this.popperInstance = undefined;
-        this.target = undefined;
-        this.isShown = false;
-        this.disableLogic = false;
-        this.hasShownAtLeastOnce = false;
-        this.openedByKeyboard = false;
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -2043,7 +2049,7 @@ const TdsPopoverCore = class {
             'tds-animation-exit-fade': !this.isShown && this.animation === 'fade',
         };
         const classList = generateClassList(classes);
-        return (h(Host, { key: 'e00527f6f668e309529ff607c744eb64bba30c6a', role: this.host.getAttribute('role'), class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: 'e562ffae5ecbca928a541de6b50f88efa1eded8c' })));
+        return (h(Host, { key: '5c557610103827aedbabbd37a79730580d15ca2d', role: this.host.getAttribute('role'), class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '487a937b3c9d87b91425f6bd9eb88bc3fa85d7df' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -2053,6 +2059,6 @@ const TdsPopoverCore = class {
         "isShown": ["onIsShownChange"]
     }; }
 };
-TdsPopoverCore.style = TdsPopoverCoreStyle0;
+TdsPopoverCore.style = tdsPopoverCoreCss;
 
 export { TdsPopoverCore as tds_popover_core };

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

@@ -1,20 +1,20 @@
-import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host } from './index-Cl9XBhQW.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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** Disables the Popover Menu Item */
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '64faf6cb0d6b7cf61baa086984db76a18c786920', role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'af8cf012fd1f2e02862b5830608aadf6bc183c4b', class: {
+        return (h(Host, { key: '189497fe898065e585b2bf342611716b7b44778b', role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '5904e5da7c9f4cfe1a35df1b5b1549a8a4c501a9', class: {
                 wrapper: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: 'e1057d681689dc614415e980894b85a6b6289a88' }))));
+            } }, h("slot", { key: 'ddacc7938ca455a8151b2e46449414146073b045' }))));
     }
 };
-TdsPopoverMenuItem.style = TdsPopoverMenuItemStyle0;
+TdsPopoverMenuItem.style = popoverMenuItemCss;
 
 export { TdsPopoverMenuItem as tds_popover_menu_item };

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

@@ -1,24 +1,31 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { i as inheritAttributes } from './inheritAttributes-d21e267b.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cl9XBhQW.js';
+import { i as inheritAttributes } from './inheritAttributes-CF8bH08v.js';
 
 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 6px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:900}.tds-popover-menu.sc-tds-popover-menu *.sc-tds-popover-menu{box-sizing:border-box}.tds-popover-menu.fluid-width.sc-tds-popover-menu{width:unset}tds-popover-core.sc-tds-popover-menu{padding:6px 0 !important}.sc-tds-popover-menu-s>tds-divider{display:block;padding:6px !important}";
-const TdsPopoverMenuStyle0 = popoverMenuCss;
 
 const TdsPopoverMenu = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.inheritedAttributes = [];
-        this.selector = undefined;
-        this.referenceEl = undefined;
+        /** Controls whether the Popover is shown or not. If this is set hiding and showing
+         * will be decided by this prop and will need to be controlled from the outside. This
+         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
+         */
         this.show = null;
+        /** Decides if the component should be visible from the start. */
         this.defaultShow = false;
+        /** Decides the placement of the Popover Menu */
         this.placement = 'auto';
+        /** Whether the popover should animate when being opened/closed or not */
         this.animation = 'none';
+        /** Sets the offset skidding */
         this.offsetSkidding = 0;
+        /** Sets the offset distance */
         this.offsetDistance = 8;
+        /** If true this unsets the width (160px) of the Popover Menu */
         this.fluidWidth = false;
+        /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
-        this.childRef = undefined;
+        this.inheritedAttributes = [];
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -30,18 +37,18 @@ const TdsPopoverMenu = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '78e4ee3b0d6eb7c41f724582278b3de4b2227502', class: {
+        return (h(Host, { key: 'ad39066c2a2f7d4e4696143095fa8a0032d7c148', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, h("tds-popover-core", { key: 'f16d1d2d97dfa081fbbc13f1da6eb01f15d3e1e8', class: {
+            } }, h("tds-popover-core", { key: 'f261b18f6e1e26df1baf39628911cb885277b431', class: {
                 'tds-popover-menu': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'fluid-width': this.fluidWidth,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: '2c413ca26bb977c971e3206ce7ac79da5107d35e', role: "menu" }, h("slot", { key: 'f9a0da937b2c038ec83e3a8e803fb858a42ab94b' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: 'f1549f6d338ed8e9a511577a85735b834a89df27', role: "menu" }, h("slot", { key: 'def698636f21c11133ad0289b21b76db0f208116' })))));
     }
     get host() { return getElement(this); }
 };
-TdsPopoverMenu.style = TdsPopoverMenuStyle0;
+TdsPopoverMenu.style = popoverMenuCss;
 
 export { TdsPopoverMenu as tds_popover_menu };