@scania/tegel 1.40.0 → 1.41.0-beta.0

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

@@ -1,12 +1,22 @@
-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-BqRtRha-.js';
 
 const folderTabsCss = ":host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-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-within::before,:host .scroll-left-button:focus-within::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:\"\";position:absolute;top:3px;bottom:3px;left:3px;right:3px}: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 TdsFolderTabsStyle0 = folderTabsCss;
 
 const TdsFolderTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.tdsChange = createEvent(this, "tdsChange", 7);
+        /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+        this.modeVariant = null;
+        /** 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';
+        this.buttonWidth = 0;
+        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 +70,6 @@ const TdsFolderTabs = class {
                 }
             });
         };
-        this.modeVariant = null;
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.buttonWidth = 0;
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
     }
     /** Sets the passed tabindex as the selected Tab. */
     async selectTab(tabIndex) {
@@ -165,15 +167,15 @@ const TdsFolderTabs = class {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '8c8c4916fe50279d530f99d21fef8f4ceb89fe55', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '5850bbcf52dfadf7a08dbe420916d98ed6d14b41', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '654c328d868d1f8d4e835aa3e953813415d9162d', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '294e02bcd45d662f556498b8f79179c98d5a9899', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '9506486a1d6a2415bc8213cf1c0ab8c7789ad82c', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'e721ba34d2d703bd0ee2fe833e7859f282b6b332', name: "chevron_left", size: "20px" })), h("slot", { key: 'ee2558c4a7d35d8d6355df59b735344151742884', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6ac20fbd52634a08bd6ef369a45fe0ebb7de9d5d', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '20a1096cec8ef7e121200f469761fac9a2a5086d', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: 'e079f0d843342d1aac64cacfbacefed6151f9059', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '747aa96f5385c04699168bae31c3942044725a10', name: "chevron_left", size: "20px" })), h("slot", { key: '08d6bb2da6f3edf676b35f7e032d901acff9f10e', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '2a4b75885039d6410a69e34e4c56d46882461e43', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'a85ec055d4f485db7d64ce536438ade9d3988fab', name: "chevron_right", size: "20px" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
         "selectedIndex": ["handleSelectedIndexUpdate"]
     }; }
 };
-TdsFolderTabs.style = TdsFolderTabsStyle0;
+TdsFolderTabs.style = folderTabsCss;
 
 export { TdsFolderTabs as tds_folder_tabs };

package/dist/esm/tds-footer-group.entry.js

@@ -1,21 +1,18 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { h as hasSlot } from './hasSlot-d52114d0.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BqRtRha-.js';
+import { h as hasSlot } from './hasSlot-DDX6uFcm.js';
 
-const footerGroupCss = ":host{display:block}:host .footer-top-title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links-header);padding-bottom:8px}:host .footer-top-title *,:host .footer-top-title ::slotted(*){margin:0}:host button.footer-top-title-button{border:none;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--tds-footer-top-divider)}:host button.footer-top-title-button *,:host button.footer-top-title-button ::slotted(*){margin:0}:host button.footer-top-title-button.expanded{border-bottom:none}:host button.footer-top-title-button.expanded tds-icon{transform:rotateZ(180deg)}:host button.footer-top-title-button:hover{cursor:pointer}:host button.footer-top-title-button:active{background-color:var(--tds-footer-top-button-active)}:host button.footer-top-title-button:focus-visible{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host button.footer-top-title-button tds-icon{transition:transform 0.2s ease-in-out}:host [role=list]{list-style:none;padding:0;margin:0;display:flex;gap:8px}:host [role=list].start,:host [role=list].end{gap:24px}:host [role=list].top-part-child{flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child){flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child).start,:host .mobile-view [role=list].start:not(.top-part-child).end{gap:8px}:host .mobile-view [role=list].top-part-child.closed{display:none}:host .mobile-view [role=list].top-part-child{gap:0}:host .mobile-view button.footer-top-title-button{display:flex;align-items:center}";
-const TdsFooterGroupStyle0 = footerGroupCss;
+const footerGroupCss = ":host{display:block}:host .footer-top-title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links-header);padding-bottom:8px}:host .footer-top-title *,:host .footer-top-title ::slotted(*){margin:0}:host button.footer-top-title-button{border:none;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--tds-footer-top-divider)}:host button.footer-top-title-button *,:host button.footer-top-title-button ::slotted(*){margin:0}:host button.footer-top-title-button.expanded tds-icon{transform:rotateZ(180deg)}:host button.footer-top-title-button:hover{cursor:pointer}:host button.footer-top-title-button:active{background-color:var(--tds-footer-top-button-active)}:host button.footer-top-title-button:focus-visible{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host button.footer-top-title-button tds-icon{transition:transform 0.2s ease-in-out}:host [role=list]{list-style:none;padding:0;margin:0;display:flex;gap:12px}:host [role=list].start,:host [role=list].end{gap:24px}:host [role=list].top-part-child{flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child){flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child).start,:host .mobile-view [role=list].start:not(.top-part-child).end{gap:8px}:host .mobile-view [role=list].top-part-child.closed{display:none}:host .mobile-view [role=list].top-part-child{gap:0}:host .mobile-view button.footer-top-title-button{display:flex;align-items:center}";
 
 const TdsFooterGroup = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** In mobile, this indicates when the group (if it's in the top part) is opened/closed. */
+        this.open = false;
         /** If the group is placed in the main part of the Footer,
          * it can have either start or end as a slot position otherwise undefined. */
         this.slotPosition = null;
         /** Indicates if a group is part of the top part of the Footer. */
         this.topPartGroup = false;
-        this.titleText = undefined;
-        this.tdsListAriaLabel = undefined;
-        this.open = false;
-        this.isMobile = undefined;
     }
     updateIsMobile() {
         this.isMobile = window.innerWidth <= 992;
@@ -51,6 +48,6 @@ const TdsFooterGroup = class {
     }
     get host() { return getElement(this); }
 };
-TdsFooterGroup.style = TdsFooterGroupStyle0;
+TdsFooterGroup.style = footerGroupCss;
 
 export { TdsFooterGroup as tds_footer_group };

package/dist/esm/tds-footer-item.entry.js

@@ -1,7 +1,6 @@
-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-BqRtRha-.js';
 
-const footerItemCss = ":host([role=listitem]) div ::slotted(a),:host([role=listitem]) div ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-main-links);text-decoration:none}:host([role=listitem]) div ::slotted(a:focus-visible),:host([role=listitem]) div ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host([role=listitem]) div ::slotted(a:hover),:host([role=listitem]) div ::slotted(button:hover){text-decoration:underline}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media all and (max-width: 992px){:host([role=listitem]) div.top-part-child{border-bottom:1px solid var(--tds-footer-top-divider)}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){display:block;height:100%;padding:19px 40px;font-weight:normal}:host([role=listitem]) div.top-part-child ::slotted(a:hover),:host([role=listitem]) div.top-part-child ::slotted(button:hover){text-decoration:underline;background-color:var(--tds-footer-top-links-background-hover)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}}";
-const TdsFooterItemStyle0 = footerItemCss;
+const footerItemCss = ":host([role=listitem]) div ::slotted(a),:host([role=listitem]) div ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-main-links);text-decoration:none}:host([role=listitem]) div ::slotted(a:focus-visible),:host([role=listitem]) div ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host([role=listitem]) div ::slotted(a:hover),:host([role=listitem]) div ::slotted(button:hover){text-decoration:underline}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media all and (max-width: 992px){:host([role=listitem]) div.top-part-child{border-bottom:1px solid var(--tds-footer-top-divider)}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){display:block;height:100%;padding:19px 40px;font-weight:normal}:host([role=listitem]) div.top-part-child ::slotted(a:active),:host([role=listitem]) div.top-part-child ::slotted(button:active){text-decoration:underline;background-color:var(--tds-footer-top-links-background-active)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}}";
 
 const TdsFooterItem = class {
     constructor(hostRef) {
@@ -16,6 +15,6 @@ const TdsFooterItem = class {
     }
     get host() { return getElement(this); }
 };
-TdsFooterItem.style = TdsFooterItemStyle0;
+TdsFooterItem.style = footerItemCss;
 
 export { TdsFooterItem as tds_footer_item };

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

@@ -1,14 +1,14 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { h as hasSlot } from './hasSlot-d52114d0.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BqRtRha-.js';
+import { h as hasSlot } from './hasSlot-DDX6uFcm.js';
 
 const footerCss = ":host{display:block}:host slot[name=top]::slotted(*){box-sizing:border-box;background-color:var(--tds-footer-top-background);padding:40px;display:grid;grid-template-columns:repeat(4, 1fr);row-gap:40px;width:100%}:host .footer-main{background-color:var(--tds-footer-main-background);padding:0 40px}:host .footer-main-top{padding:40px 0;display:flex;justify-content:space-between}:host slot[name=start],:host slot[name=end]{display:flex}:host slot[name=start]::slotted(*),:host slot[name=end]::slotted(*){display:flex;column-gap:24px}:host slot[name=end]{margin-left:auto}:host .footer-main-bottom{padding:40px 0;display:flex;justify-content:space-between;border-top:1px solid var(--tds-footer-main-divider)}:host .footer-main-bottom small.copyright{margin:0;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-footer-main-copyright)}:host .footer-main-bottom .brand{background-image:var(--tds-background-image-scania-wordmark-white-svg-local), var(--tds-background-image-scania-wordmark-white-svg);background-repeat:no-repeat;background-size:117px;background-position:right;width:117px;height:20px}:host .footer-main-bottom .brand p{color:transparent;padding:0;margin:0;height:100%;visibility:hidden}@media all and (max-width: 992px){:host slot[name=top]::slotted(*){display:block;width:100%;padding:0}:host .footer-main{padding:0 24px}:host .footer-main-top{flex-direction:column;row-gap:48px;padding:24px 0}:host slot[name=end]::slotted(*){flex-direction:row;gap:8px}:host slot[name=end]{margin-left:unset}:host .footer-main-bottom{flex-direction:column;padding-bottom:32px}:host .footer-main-bottom p.copyright{padding-bottom:96px}:host .footer-main-bottom .brand{width:100%}}";
-const TdsFooterStyle0 = footerCss;
 
 const TdsFooter = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.copyrightText = `Copyright © ${new Date().getFullYear()} Scania`;
+        /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
+        this.copyrightText = `Copyright © ${new Date().getFullYear()} Scania`;
     }
     render() {
         const usesTopSlot = hasSlot('top', this.host);
@@ -21,6 +21,6 @@ const TdsFooter = class {
     }
     get host() { return getElement(this); }
 };
-TdsFooter.style = TdsFooterStyle0;
+TdsFooter.style = footerCss;
 
 export { TdsFooter as tds_footer };

package/dist/esm/tds-header-brand-symbol.entry.js

@@ -1,7 +1,6 @@
-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-BqRtRha-.js';
 
 const headerBrandSymbolCss = ":host tds-header-item{display:none}:host tds-header-item ::slotted(*){background-image:var(--tds-background-image-scania-symbol-svg-local), var(--tds-background-image-scania-symbol-svg);background-size:30px auto;background-position:center;background-repeat:no-repeat}@media (min-width: 992px){:host tds-header-item{display:block}}";
-const TdsHeaderBrandSymbolStyle0 = headerBrandSymbolCss;
 
 const TdsHeaderBrandSymbol = class {
     constructor(hostRef) {
@@ -16,6 +15,6 @@ const TdsHeaderBrandSymbol = class {
     }
     get host() { return getElement(this); }
 };
-TdsHeaderBrandSymbol.style = TdsHeaderBrandSymbolStyle0;
+TdsHeaderBrandSymbol.style = headerBrandSymbolCss;
 
 export { TdsHeaderBrandSymbol as tds_header_brand_symbol };

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

@@ -1,7 +1,6 @@
-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-BqRtRha-.js';
 
 const tableHeaderCellCss = ":host(.tds-table__header-cell){box-sizing:border-box;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-header-background-hover);padding:0;height:48px;min-width:192px;box-sizing:border-box;vertical-align:middle;overflow:hidden;transition:background-color 200ms ease}:host(.tds-table__header-cell) *{box-sizing:border-box}:host(.tds-table__header-cell) .tds-table__header-text{padding:8px 16px;margin:0}:host(.tds-table__header-cell) .tds-table__header-text-no-padding{padding:0}:host(.tds-table__header-cell--sortable) .tds-table__header-button{display:flex;align-items:center;gap:8px;justify-content:start;flex-direction:row;width:100%;height:100%;padding:0 16px;background-color:transparent;border:none;cursor:pointer;transition:background-color 200ms ease}:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus{outline:2px solid var(--tds-table-header-btn-focus);outline-offset:-2px}:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-text{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);text-align:left;color:var(--tds-table-header-btn-color)}:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-icon{flex:0 0 16px;height:16px;width:16px;opacity:0;transform-origin:center;transition:opacity 200ms ease-in, transform 200ms ease;color:var(--tds-table-color)}:host(.tds-table__header-cell--sortable) .tds-table__header-button:hover .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button{background-color:var(--tds-table-header-btn-background)}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button:hover{background-color:var(--tds-table-header-btn-background-hover)}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon--rotate{transform:rotate(180deg)}:host(.tds-table--compact){height:33px}:host(.tds-table--divider){border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type){border-right:none}:host(.tds-table--no-min-width){min-width:unset}:host(.tds-table--no-padding){height:unset}:host(.tds-table__header-cell:first-of-type){border-top-left-radius:4px}:host(.tds-table__header-cell:last-of-type){border-top-right-radius:4px}:host(.tds-table--extra-column:first-of-type){border-top-left-radius:0}:host(.tds-table--toolbar-available){border-radius:0}:host(.tds-table--extra-column.tds-table--toolbar-available){border-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type){border-top-left-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type){border-top-right-radius:0}";
-const TdsHeaderCellStyle0 = tableHeaderCellCss;
 
 const relevantTableProps = [
     'multiselect',
@@ -17,6 +16,22 @@ const TdsTableHeaderCell = class {
         this.internalSortButtonClicked = createEvent(this, "internalSortButtonClicked", 6);
         this.internalTdsTextAlign = createEvent(this, "internalTdsTextAlign", 6);
         this.internalTdsHover = createEvent(this, "internalTdsHover", 6);
+        /** Enables sorting on that column */
+        this.sortable = false;
+        /** Setting for text align, default is "left". Other accepted values are "left", "start", "right" or "end". */
+        this.textAlign = 'left';
+        /** Disables internal padding. Useful when passing other components to cell. */
+        this.disablePadding = false;
+        /** Aria label for the sort button, providing an accessible description */
+        this.tdsAriaLabelSortButton = '';
+        this.sortedByMyKey = false;
+        this.verticalDividers = false;
+        this.compactDesign = false;
+        this.noMinWidth = false;
+        this.multiselect = false;
+        this.enableToolbarDesign = false;
+        this.tableId = '';
+        this.expandableRows = false;
         this.sortButtonClick = () => {
             if (this.sortingDirection !== 'asc' && this.sortingDirection !== 'desc') {
                 this.sortingDirection = 'asc';
@@ -50,23 +65,6 @@ const TdsTableHeaderCell = class {
                 key,
             });
         };
-        this.cellKey = undefined;
-        this.cellValue = undefined;
-        this.customWidth = undefined;
-        this.sortable = false;
-        this.textAlign = 'left';
-        this.disablePadding = false;
-        this.tdsAriaLabelSortButton = '';
-        this.textAlignState = undefined;
-        this.sortingDirection = undefined;
-        this.sortedByMyKey = false;
-        this.verticalDividers = false;
-        this.compactDesign = false;
-        this.noMinWidth = false;
-        this.multiselect = false;
-        this.enableToolbarDesign = false;
-        this.tableId = '';
-        this.expandableRows = false;
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -134,6 +132,6 @@ const TdsTableHeaderCell = class {
     }
     get host() { return getElement(this); }
 };
-TdsTableHeaderCell.style = TdsHeaderCellStyle0;
+TdsTableHeaderCell.style = tableHeaderCellCss;
 
 export { TdsTableHeaderCell as tds_header_cell };

package/dist/esm/tds-header-dropdown-list-item.entry.js

@@ -1,12 +1,13 @@
-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-BqRtRha-.js';
 
 const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host .component-selected:focus-within{border-left:none}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([size=lg]){height:var(--tds-header-height)}:host([size=lg]) ::slotted(a),:host([size=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}";
-const TdsHeaderDropdownListItemStyle0 = headerDropdownListItemCss;
 
 const TdsHeaderDropdownListItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** If the link should appear selected. */
         this.selected = false;
+        /** The size of the component. */
         this.size = 'md';
     }
     render() {
@@ -17,6 +18,6 @@ const TdsHeaderDropdownListItem = class {
     }
     get host() { return getElement(this); }
 };
-TdsHeaderDropdownListItem.style = TdsHeaderDropdownListItemStyle0;
+TdsHeaderDropdownListItem.style = headerDropdownListItemCss;
 
 export { TdsHeaderDropdownListItem as tds_header_dropdown_list_item };

package/dist/esm/tds-header-dropdown-list-user.entry.js

@@ -1,21 +1,16 @@
-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-BqRtRha-.js';
 
 const headerDropdownListUserCss = ":host{background-color:var(--tds-header-avatar-item-background);display:flex;height:84px}:host .user-box{gap:16px;width:100%;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host img,:host slot[name=thumbnail]::slotted(*){width:34px;border-radius:100%}:host .user-content{display:flex;flex-direction:column;gap:4px}:host .user-content .header{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host .user-content .subheader{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-header-avatar-item-color)}";
-const TdsHeaderDropdownListUserStyle0 = headerDropdownListUserCss;
 
 const TdsHeaderDropdownListLgUser = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.imgUrl = undefined;
-        this.imgAlt = undefined;
-        this.header = undefined;
-        this.subheader = undefined;
     }
     render() {
         return (h(Host, { key: '88298dc621372f56b0336686d055f27ef7bfee8a', role: "listitem" }, h("div", { key: 'da8b981e30d4cca52b4dfc2813e2d706f7c18d30', class: "user-box" }, this.imgUrl && h("img", { key: 'f81a370f4499f5bec4eedef0ef2d1aaa5aeca4ca', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '33c9d2b8d0761d6915129cd03f4b596b5c05c1b4', name: "thumbanil" }), h("div", { key: '78a05fa64af6d694b4927fef55260e18c2d5711f', class: "user-content" }, h("div", { key: '15f6a48e0f10574ae14af2e2d92342ec77e85aa1', class: "header" }, this.header, h("slot", { key: '12ebbfbc257918f264c76e7d38a28827880cadec', name: "header" })), h("div", { key: 'bbd348e04b5ea5732bb4426547ef5ed9eddf55d0', class: "subheader" }, this.subheader, h("slot", { key: '403e7f20cb5b564928759ce0be1b058d12610290', name: "subheader" }))))));
     }
     get host() { return getElement(this); }
 };
-TdsHeaderDropdownListLgUser.style = TdsHeaderDropdownListUserStyle0;
+TdsHeaderDropdownListLgUser.style = headerDropdownListUserCss;
 
 export { TdsHeaderDropdownListLgUser as tds_header_dropdown_list_user };

package/dist/esm/tds-header-dropdown-list.entry.js

@@ -1,17 +1,16 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './isHeadingElement-8efea284.js';
-import './dfs-1e574d5f.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BqRtRha-.js';
+import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './isHeadingElement-BQco7VNg.js';
+import './dfs-CLF3diNe.js';
 
 const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:unset;background-color:var(--tds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([size=lg]){width:320px}";
-const TdsHeaderDropdownListStyle0 = headerDropdownListCss;
 
 const TdsHeaderDropdownList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         // A Map to store the slots and their associated slotchange listeners.
         this.slotListeners = new Map();
+        /** The size of the component. */
         this.size = 'md';
-        this.headingElement = undefined;
     }
     componentWillLoad() {
         const { children } = this.host;
@@ -78,6 +77,6 @@ const TdsHeaderDropdownList = class {
     }
     get host() { return getElement(this); }
 };
-TdsHeaderDropdownList.style = TdsHeaderDropdownListStyle0;
+TdsHeaderDropdownList.style = headerDropdownListCss;
 
 export { TdsHeaderDropdownList as tds_header_dropdown_list };

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

@@ -1,12 +1,16 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BqRtRha-.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
 
 const headerDropdownCss = ":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{height:var(--tds-header-height);position:relative}:host .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-top-right-radius:0;border-top-left-radius:0}:host .menu: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 .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .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 .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .state-open .dropdown-icon{transform:rotate(180deg)}:host .state-open .button{position:relative;z-index:901}:host .state-open tds-header-item button:hover,:host .state-open tds-header-item a:hover{background-color:var(--tds-nav-item-background-hover);box-shadow:none}";
-const TdsHeaderDropdownStyle0 = headerDropdownCss;
 
 const TdsHeaderDropdown = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** If the dropdown icon (downwards chevron) should be hidden. */
+        this.noDropdownIcon = false;
+        /** If the button that opens the dropdown should appear selected. */
+        this.selected = false;
+        this.open = false;
         this.uuid = generateUniqueId();
         this.handleSlottedItemClick = (event) => {
             const eventSource = event.target.tagName.toLowerCase();
@@ -14,12 +18,6 @@ const TdsHeaderDropdown = class {
                 this.open = false;
             }
         };
-        this.label = undefined;
-        this.noDropdownIcon = false;
-        this.selected = false;
-        this.tdsAriaLabel = undefined;
-        this.open = false;
-        this.buttonEl = undefined;
     }
     onAnyClick(event) {
         // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
@@ -64,6 +62,6 @@ const TdsHeaderDropdown = class {
     }
     get host() { return getElement(this); }
 };
-TdsHeaderDropdown.style = TdsHeaderDropdownStyle0;
+TdsHeaderDropdown.style = headerDropdownCss;
 
 export { TdsHeaderDropdown as tds_header_dropdown };

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

@@ -1,14 +1,12 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { i as inheritAriaAttributes } from './inheritAriaAttributes-04f2f252.js';
-import './inheritAttributes-d21e267b.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BqRtRha-.js';
+import { i as inheritAriaAttributes } from './inheritAriaAttributes-DyLhgCIg.js';
+import './inheritAttributes-CF8bH08v.js';
 
 const headerHamburgerCss = ":host{color:var(--tds-white)}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:background 0.2s ease-in-out, color 0.2s ease-in-out}@media screen and (min-width: 992px){:host tds-header-item{display:none}:host([persistent]) tds-header-item{display:block}}";
-const TdsHeaderHamburgerStyle0 = headerHamburgerCss;
 
 const TdsHeaderHamburger = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.tdsAriaLabel = undefined;
     }
     render() {
         const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
@@ -16,6 +14,6 @@ const TdsHeaderHamburger = class {
     }
     get host() { return getElement(this); }
 };
-TdsHeaderHamburger.style = TdsHeaderHamburgerStyle0;
+TdsHeaderHamburger.style = headerHamburgerCss;
 
 export { TdsHeaderHamburger as tds_header_hamburger };

package/dist/esm/tds-header-launcher-button.entry.js

@@ -1,15 +1,15 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { i as inheritAriaAttributes } from './inheritAriaAttributes-04f2f252.js';
-import './inheritAttributes-d21e267b.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BqRtRha-.js';
+import { i as inheritAriaAttributes } from './inheritAriaAttributes-DyLhgCIg.js';
+import './inheritAttributes-CF8bH08v.js';
 
 const headerLauncherButtonCss = ":host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";
-const TdsHeaderLauncherButtonStyle0 = headerLauncherButtonCss;
 
 const TdsHeaderLauncherButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** If the button should appear active. Can be used when the button is
+         * triggering a dropdown, and the dropdown is open, for example. */
         this.active = false;
-        this.tdsAriaLabel = undefined;
     }
     render() {
         this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
@@ -18,6 +18,6 @@ const TdsHeaderLauncherButton = class {
     }
     get host() { return getElement(this); }
 };
-TdsHeaderLauncherButton.style = TdsHeaderLauncherButtonStyle0;
+TdsHeaderLauncherButton.style = headerLauncherButtonCss;
 
 export { TdsHeaderLauncherButton as tds_header_launcher_button };

package/dist/esm/tds-header-launcher-grid-item.entry.js

@@ -1,7 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host } from './index-BqRtRha-.js';
 
 const headerLauncherGridItemCss = ":host{display:block;width:96px;height:96px}:host ::slotted(a),:host ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--tds-nav-item-border-color);width:100%;height:100%;border:none;padding:0 12px;display:flex;text-align:center;justify-content:center;align-items:center;flex-direction:column;gap:8px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);background-color:var(--tds-header-app-launcher-menu-bg);color:var(--tds-header-app-launcher-grid-color);border-radius:4px;transition:background-color 150ms ease}:host ::slotted(a:hover),:host ::slotted(button:hover){background-color:var(--tds-header-app-launcher-grid-hover-background);cursor:pointer}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}";
-const TdsHeaderLauncherGridItemStyle0 = headerLauncherGridItemCss;
 
 const TdsHeaderLauncherGridItem = class {
     constructor(hostRef) {
@@ -11,6 +10,6 @@ const TdsHeaderLauncherGridItem = class {
         return (h(Host, { key: '1506d0cda6ddcdd025ea7febf24e34c8e0d5b479', role: "listitem" }, h("slot", { key: 'f6ae96ad0c953297fddf43cfcee6d688a93846f5' })));
     }
 };
-TdsHeaderLauncherGridItem.style = TdsHeaderLauncherGridItemStyle0;
+TdsHeaderLauncherGridItem.style = headerLauncherGridItemCss;
 
 export { TdsHeaderLauncherGridItem as tds_header_launcher_grid_item };

package/dist/esm/tds-header-launcher-grid-title.entry.js

@@ -1,8 +1,7 @@
-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-BqRtRha-.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
 
 const headerLauncherGridTitleCss = ".tds-header-launcher-grid-title{all:unset;box-sizing:border-box;font:var(--tds-detail-04);letter-spacing:var(--tds-detail-04-ls);color:var(--tds-header-app-launcher-grid-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color);margin:0}";
-const TdsHeaderLauncherGridTitleStyle0 = headerLauncherGridTitleCss;
 
 const TdsHeaderLauncherGridTitle = class {
     constructor(hostRef) {
@@ -13,6 +12,6 @@ const TdsHeaderLauncherGridTitle = class {
         return (h(Host, { key: '25db2b1431472f1883bce6605c060e48129dacc5' }, h("h3", { key: '0caaece113240546638d8d0366bcecba6f945986', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '16962f436f38d529357dbaade615badd87862323' }))));
     }
 };
-TdsHeaderLauncherGridTitle.style = TdsHeaderLauncherGridTitleStyle0;
+TdsHeaderLauncherGridTitle.style = headerLauncherGridTitleCss;
 
 export { TdsHeaderLauncherGridTitle as tds_header_launcher_grid_title };

package/dist/esm/tds-header-launcher-grid.entry.js

@@ -1,14 +1,12 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './isHeadingElement-8efea284.js';
-import './dfs-1e574d5f.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BqRtRha-.js';
+import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './isHeadingElement-BQco7VNg.js';
+import './dfs-CLF3diNe.js';
 
 const headerLauncherGridCss = ".tds-header-launcher-grid{box-sizing:border-box;padding:12px;margin:0;list-style:none;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;border-radius:none}";
-const TdsHeaderLauncherGridStyle0 = headerLauncherGridCss;
 
 const TdsHeaderLauncherGrid = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.headingElement = undefined;
     }
     componentWillLoad() {
         const listRoot = this.host;
@@ -34,6 +32,6 @@ const TdsHeaderLauncherGrid = class {
     }
     get host() { return getElement(this); }
 };
-TdsHeaderLauncherGrid.style = TdsHeaderLauncherGridStyle0;
+TdsHeaderLauncherGrid.style = headerLauncherGridCss;
 
 export { TdsHeaderLauncherGrid as tds_header_launcher_grid };

package/dist/esm/tds-header-launcher-list-item.entry.js

@@ -1,7 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host } from './index-BqRtRha-.js';
 
 const headerLauncherListItemCss = ":host{display:block;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}";
-const TdsHeaderLauncherListItemStyle0 = headerLauncherListItemCss;
 
 const TdsHeaderLauncherListItem = class {
     constructor(hostRef) {
@@ -11,6 +10,6 @@ const TdsHeaderLauncherListItem = class {
         return (h(Host, { key: 'bcc63c58186216485acf6e6e0f896158e92cd29e' }, h("tds-header-dropdown-list-item", { key: 'e4b963bf20b97aa19f8f6dbd4d4a6face04220db', size: "lg" }, h("slot", { key: '03445a4fe12c6f5a283b6d2635d657bbfd103263' }))));
     }
 };
-TdsHeaderLauncherListItem.style = TdsHeaderLauncherListItemStyle0;
+TdsHeaderLauncherListItem.style = headerLauncherListItemCss;
 
 export { TdsHeaderLauncherListItem as tds_header_launcher_list_item };

package/dist/esm/tds-header-launcher-list-title.entry.js

@@ -1,8 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BqRtRha-.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
 
 const headerLauncherListTitleCss = ".tds-header-launcher-list-title{all:unset;box-sizing:border-box;font:var(--tds-detail-06);letter-spacing:var(--tds-detail-06-ls);color:var(--tds-header-app-launcher-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color);margin:0}";
-const TdsHeaderLauncherListTitleStyle0 = headerLauncherListTitleCss;
 
 const TdsHeaderLauncherListTitle = class {
     constructor(hostRef) {
@@ -14,6 +13,6 @@ const TdsHeaderLauncherListTitle = class {
     }
     get host() { return getElement(this); }
 };
-TdsHeaderLauncherListTitle.style = TdsHeaderLauncherListTitleStyle0;
+TdsHeaderLauncherListTitle.style = headerLauncherListTitleCss;
 
 export { TdsHeaderLauncherListTitle as tds_header_launcher_list_title };

package/dist/esm/tds-header-launcher-list.entry.js

@@ -1,5 +1,5 @@
-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-BqRtRha-.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
 
 const TdsHeaderLauncherList = class {
     constructor(hostRef) {

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

@@ -1,19 +1,16 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
-import { i as inheritAriaAttributes } from './inheritAriaAttributes-04f2f252.js';
-import './inheritAttributes-d21e267b.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BqRtRha-.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
+import { i as inheritAriaAttributes } from './inheritAriaAttributes-DyLhgCIg.js';
+import './inheritAttributes-CF8bH08v.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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        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/
@@ -51,11 +48,11 @@ const TdsHeaderLauncher = class {
             }, '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: {
@@ -66,6 +63,6 @@ const TdsHeaderLauncher = class {
     }
     get host() { return getElement(this); }
 };
-TdsHeaderLauncher.style = TdsHeaderLauncherStyle0;
+TdsHeaderLauncher.style = headerLauncherCss;
 
 export { TdsHeaderLauncher as tds_header_launcher };

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

@@ -1,7 +1,6 @@
-import { r as registerInstance, h } from './index-51d04e39.js';
+import { r as registerInstance, h } from './index-BqRtRha-.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 = class {
     constructor(hostRef) {
@@ -11,6 +10,6 @@ const TdsHeaderTitle = class {
         return (h("h4", { key: '4af2f894bf508d0ea8f5c934f4b6e3be61f1ce1a' }, h("slot", { key: 'e5eaaf9c68f77041f6056af1bb7e1101b48c1ffc' })));
     }
 };
-TdsHeaderTitle.style = TdsHeaderTitleStyle0;
+TdsHeaderTitle.style = headerTitleCss;
 
 export { TdsHeaderTitle as tds_header_title };