@scania/tegel 1.47.2 → 1.48.0-beta.0-tabbing-test

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

@@ -1,21 +1,29 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
 
-const index = require('./index-ca8040ad.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 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 TdsFolderTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tdsChange = index.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
-        this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-        this.children = [];
+        this.scrollableWidth = 0; // total amount that is possible to scroll in the nav wrapper
+        this.tabElements = [];
         this.clickHandlers = new WeakMap();
         this.addResizeObserver = () => {
             const resizeObserver = new ResizeObserver((entries) => {
@@ -30,7 +38,7 @@ const TdsFolderTabs = class {
                     });
                     this.componentWidth = componentWidth;
                     this.buttonsWidth = buttonsWidth;
-                    this.scrollWidth = buttonsWidth - componentWidth;
+                    this.scrollableWidth = buttonsWidth - componentWidth;
                     this.updateScrollButtons();
                 });
             });
@@ -38,15 +46,15 @@ const TdsFolderTabs = class {
                 resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
-            this.children = Array.from(this.host.children);
-            this.children.map((item, index) => {
+            this.tabElements = Array.from(this.host.children);
+            this.tabElements.map((item, index) => {
                 const clickHandler = () => {
                     if (!item.disabled) {
                         const tdsChangeEvent = this.tdsChange.emit({
-                            selectedTabIndex: this.children.indexOf(item),
+                            selectedTabIndex: this.tabElements.indexOf(item),
                         });
                         if (!tdsChangeEvent.defaultPrevented) {
-                            this.children.forEach((element) => element.setSelected(false));
+                            this.tabElements.forEach((element) => element.setSelected(false));
                             item.setSelected(true);
                             this.selectedIndex = index;
                         }
@@ -58,7 +66,7 @@ const TdsFolderTabs = class {
             });
         };
         this.removeEventListenerFromTabs = () => {
-            this.children.forEach((item) => {
+            this.tabElements.forEach((item) => {
                 const clickHandler = this.clickHandlers.get(item);
                 if (clickHandler) {
                     item.removeEventListener('click', clickHandler);
@@ -66,23 +74,15 @@ 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) {
-        if (tabIndex < 0 || tabIndex >= this.children.length) {
+        if (tabIndex < 0 || tabIndex >= this.tabElements.length) {
             throw new Error('Tab index out of bounds');
         }
-        if (!this.children[tabIndex].disabled) {
-            this.children.forEach((element) => element.setSelected(false));
-            this.children = this.children.map((element, index) => {
+        if (!this.tabElements[tabIndex].disabled) {
+            this.tabElements.forEach((element) => element.setSelected(false));
+            this.tabElements = this.tabElements.map((element, index) => {
                 if (index === tabIndex) {
                     element.setSelected(true);
                     this.selectedIndex = tabIndex;
@@ -98,12 +98,12 @@ const TdsFolderTabs = class {
     }
     handleSelectedIndexUpdate() {
         const tabs = Array.from(this.host.children);
-        this.children = tabs.map((tabElement) => {
+        this.tabElements = tabs.map((tabElement) => {
             tabElement.setSelected(false);
             return tabElement;
         });
         if (this.selectedIndex) {
-            this.children[this.selectedIndex].setSelected(true);
+            this.tabElements[this.selectedIndex].setSelected(true);
         }
     }
     scrollRight() {
@@ -124,27 +124,27 @@ const TdsFolderTabs = class {
         if (!this.navWrapperElement)
             return;
         const scroll = this.navWrapperElement.scrollLeft;
-        this.showRightScroll = scroll <= this.scrollWidth;
+        this.showRightScroll = scroll <= this.scrollableWidth;
         this.showLeftScroll = scroll > 0;
     }
     initializeTabs() {
-        this.children = Array.from(this.host.children);
+        this.tabElements = Array.from(this.host.children);
         // remove first and last class from other tabs in case of initialization
-        this.children.forEach((child) => {
+        this.tabElements.forEach((child) => {
             child.classList.remove('last');
             child.classList.remove('first');
         });
-        this.children[0].classList.add('first');
-        this.children[this.children.length - 1].classList.add('last');
+        this.tabElements[0].classList.add('first');
+        this.tabElements[this.tabElements.length - 1].classList.add('last');
     }
     initializeSelectedTab() {
         if (this.selectedIndex === undefined) {
             this.addEventListenerToTabs();
-            this.children[this.defaultSelectedIndex].setSelected(true);
+            this.tabElements[this.defaultSelectedIndex].setSelected(true);
             this.selectedIndex = this.defaultSelectedIndex;
         }
         else {
-            this.children[this.selectedIndex].setSelected(true);
+            this.tabElements[this.selectedIndex].setSelected(true);
         }
         this.tdsChange.emit({
             selectedTabIndex: this.selectedIndex,
@@ -180,15 +180,17 @@ const TdsFolderTabs = class {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (index.h(index.Host, { key: '093e2804b56cb6c336744551ad4d27d962a34d02', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, index.h("div", { key: 'eaaa9db902ead14bd581416c661b7c105263e335', class: "wrapper", ref: (el) => {
+        return (index.h(index.Host, { key: '41717283c59a48b103f09d57f98eeeb0e59b9b90', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, index.h("div", { key: '110565630876d0562c0da97c17fb3f0322aebdf3', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, index.h("button", { key: '50a7f0455048807c8642ecb66de0d01b7a27ce58', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, index.h("tds-icon", { key: '411a393ac446ae8224ec8c407b5e1b0adda87098', name: "chevron_left", size: "20px" })), index.h("slot", { key: 'a534cd27f044a0ac8a03ffb28e20f04cb8eba7a6', onSlotchange: () => this.handleSlotChange() }), index.h("button", { key: '6284e9746b9dfdc2010ff65b201e39db0e51feda', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, index.h("tds-icon", { key: '6a2e53089c50e1aa03a87af001a685ff9ba059dc', name: "chevron_right", size: "20px" })))));
+            } }, index.h("button", { key: '3dae6d2ec51d16943dde21c1177cd9e4258c6e7d', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, index.h("tds-icon", { key: '80f25b8b7b3b684e2ce99772864f5953e7984d41', name: "chevron_left", size: "20px" })), index.h("slot", { key: '2725126f14468a685eed1ad75401e5490312d696', onSlotchange: () => this.handleSlotChange() }), index.h("button", { key: 'bebfa92afee71e4403c11d4d82653b264c7c3506', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, index.h("tds-icon", { key: '81ac9deabdbe4ed4127c2504fb9cbe0ba3b114b9', name: "chevron_right", size: "20px" })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "selectedIndex": ["handleSelectedIndexUpdate"]
+        "selectedIndex": [{
+                "handleSelectedIndexUpdate": 0
+            }]
     }; }
 };
-TdsFolderTabs.style = TdsFolderTabsStyle0;
+TdsFolderTabs.style = folderTabsCss();
 
 exports.tds_folder_tabs = TdsFolderTabs;

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

@@ -1,25 +1,22 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
+var hasSlot = require('./hasSlot-D-DVNhGg.js');
 
-const index = require('./index-ca8040ad.js');
-const hasSlot = require('./hasSlot-1c90e9ba.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 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 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) {
         index.registerInstance(this, hostRef);
+        /** In mobile, this indicates when the group (if it's in the top part) is opened/closed. */
+        this.open = false;
+        /** Indicates if the component is in mobile view. */
+        this.isMobile = 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 = false;
     }
     updateIsMobile() {
         this.isMobile = window.innerWidth <= 992;
@@ -47,15 +44,15 @@ const TdsFooterGroup = class {
     }
     render() {
         const hasTitleSlot = hasSlot.hasSlot('title', this.host);
-        return (index.h(index.Host, { key: '96594800603cf0e9cebf94cb567da570df3dfa34', "aria-expanded": this.open ? 'true' : 'false' }, index.h("div", { key: 'f131ba95fba5cbd3113dfae4ab0c40bfe322f370', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
+        return (index.h(index.Host, { key: '67a8de92cb3f9e958f43818c87c5b6d51ba94f15', "aria-expanded": this.open ? 'true' : 'false' }, index.h("div", { key: '9373f8486cc78e684cc9d84b26d36a8a44f9f2bf', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
             (this.isMobile ? (index.h("button", { onClick: () => {
                     this.open = !this.open;
-                }, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? index.h("slot", { name: "title" }) : this.titleText, index.h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (index.h("div", { class: "footer-top-title" }, hasTitleSlot ? index.h("slot", { name: "title" }) : this.titleText))), index.h("nav", { key: 'a7ba1cb22025afa4f11680108e9382cf388d692e', "aria-label": this.tdsListAriaLabel }, index.h("div", { key: 'af304cf0fe2282b44b86cef3647177d9f89bd928', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+                }, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? index.h("slot", { name: "title" }) : this.titleText, index.h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (index.h("div", { class: "footer-top-title" }, hasTitleSlot ? index.h("slot", { name: "title" }) : this.titleText))), index.h("nav", { key: '397a8a2c393331de0816ebf73d21647666cad858', "aria-label": this.tdsListAriaLabel }, index.h("div", { key: '4bbe0af02551f494a8513dca354958ff3e796a08', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, index.h("slot", { key: '7117d7f69790dac3baab851edd7bb4420c2f7c3d' }))))));
+            ${this.open ? 'expanded' : 'closed'}` }, index.h("slot", { key: 'da11d1279d22a8093bb8367ae8056dbecf5ac0c0' }))))));
     }
     get host() { return index.getElement(this); }
 };
-TdsFooterGroup.style = TdsFooterGroupStyle0;
+TdsFooterGroup.style = footerGroupCss();
 
 exports.tds_footer_group = TdsFooterGroup;

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

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
 
-const index = require('./index-ca8040ad.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: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 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) {
@@ -20,10 +17,10 @@ const TdsFooterItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ed7e825469fcae5d17af59f0a5f845fcadf8bf89', role: "listitem" }, index.h("div", { key: '74b64120093b651b91eba2b2dd98c5300a590fae', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, index.h("slot", { key: '84a215c3bc66039e4973337bb2bc7de3dbe5ed77' }))));
+        return (index.h(index.Host, { key: '8ddec62c76a87e0ecd03e77ac8abeb924f1a0665', role: "listitem" }, index.h("div", { key: '07e7552a21644ccde5c34cb1943eb39fa7c947bb', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, index.h("slot", { key: '0a2986024eef08b2251851a320d35d72a665e952' }))));
     }
     get host() { return index.getElement(this); }
 };
-TdsFooterItem.style = TdsFooterItemStyle0;
+TdsFooterItem.style = footerItemCss();
 
 exports.tds_footer_item = TdsFooterItem;

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

@@ -1,30 +1,28 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
+var hasSlot = require('./hasSlot-D-DVNhGg.js');
 
-const index = require('./index-ca8040ad.js');
-const hasSlot = require('./hasSlot-1c90e9ba.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 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 TdsFooter = class {
     constructor(hostRef) {
         index.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.hasSlot('top', this.host);
         const usesStartSlot = hasSlot.hasSlot('start', this.host);
         const usesEndSlot = hasSlot.hasSlot('end', this.host);
         const usesCopyrightSlot = hasSlot.hasSlot('copyright', this.host);
-        return (index.h(index.Host, { key: 'cc332e8bb49a94ee80c1cbd73552abb0ce4681df', class: {
+        return (index.h(index.Host, { key: 'ce224ca7ee246c1d54435c27ef0c7d855f360725', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            } }, index.h("footer", { key: '3bd37308da24350daae97ecac9d5cade3d8b6e24' }, usesTopSlot && index.h("slot", { key: '17bb2a9db6b27aad3405102fa2a2c1c380a5043f', name: "top" }), index.h("div", { key: '78bd64db7bac22157a18ebb8792075e6e435d3ba', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (index.h("div", { key: '25112b84db722b6f4c1674957506f645f70f1fce', class: "footer-main-top" }, usesStartSlot && index.h("slot", { key: '4cd0f265f684cf7773e6d799f66e87930d223447', name: "start" }), usesEndSlot && index.h("slot", { key: '172f7326be9a216271e4815c121777c9d929b532', name: "end" }))), index.h("div", { key: '441c18a7502f94f8c804e0b9bd594f96c8a1b22a', class: "footer-main-bottom" }, index.h("small", { key: 'cb62fd7f2e38da47f0adb104d44ff6e83e03ce4b', class: "copyright" }, usesCopyrightSlot ? index.h("slot", { name: "copyright" }) : this.copyrightText), index.h("div", { key: 'ba85b724529e318a7120c15dfbb885831a41b4f8', class: "brand" }, index.h("p", { key: '5e4ee4c61f4fbdb8371b92e544c29e600b77ffe9' }, "Scania")))))));
+            } }, index.h("footer", { key: '666810f7bc99938b7b72dab2c00795126e88c445' }, usesTopSlot && index.h("slot", { key: '68d02b7441d8bfa17ec57c1ad313278cd0aa5718', name: "top" }), index.h("div", { key: '2f158dfd72b6890edc9e443c2bc6d6bb3b550065', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (index.h("div", { key: '9c4f84e651fda177edfcc7ba10d1607c4e1a7474', class: "footer-main-top" }, usesStartSlot && index.h("slot", { key: 'a4e8820b818092c511884ccf3f30113d1b48a01f', name: "start" }), usesEndSlot && index.h("slot", { key: 'dd3981c085fdca380ad0a047884bab93cda813a6', name: "end" }))), index.h("div", { key: '12d7eaac68e142c4e7a9ecb8badbbd058381f7f9', class: "footer-main-bottom" }, index.h("small", { key: 'e708f6d879dcda639e355a4dfe3eec04b86d5dd2', class: "copyright" }, usesCopyrightSlot ? index.h("slot", { name: "copyright" }) : this.copyrightText), index.h("div", { key: 'd368706b9a68ce2c19e1bc590c46cb800cabaaa9', class: "brand" }, index.h("p", { key: 'cfdae8ab29c950588dfd3cdb80e174793709e801' }, "Scania")))))));
     }
     get host() { return index.getElement(this); }
 };
-TdsFooter.style = TdsFooterStyle0;
+TdsFooter.style = footerCss();
 
 exports.tds_footer = TdsFooter;

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

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
 
-const index = require('./index-ca8040ad.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 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 TdsHeaderBrandSymbol = class {
     constructor(hostRef) {
@@ -16,10 +13,10 @@ const TdsHeaderBrandSymbol = class {
         if (!(aTag === null || aTag === void 0 ? void 0 : aTag.hasAttribute('aria-label'))) {
             console.warn('Tegel Header Brand Symbol component: missing aria-label attribute for <a> tag inside slot');
         }
-        return (index.h(index.Host, { key: '2692fca9f014e54adafca2cca8e089456d943240' }, index.h("tds-header-item", { key: '0e31d7f161e6fd60ce217aacc169040628b3748e' }, index.h("slot", { key: '7bcfa8a38d0725b5127dc6e13dee2d371749c49f' }))));
+        return (index.h(index.Host, { key: '259c57ce20798a4f75b4c9a2b8cc191140fdb5f7' }, index.h("tds-header-item", { key: '60478bb16304348e09ed6bc8364476ef320a1889' }, index.h("slot", { key: '46143b6985f2b5b4e4f3f1430c7025df22d852dd' }))));
     }
     get host() { return index.getElement(this); }
 };
-TdsHeaderBrandSymbol.style = TdsHeaderBrandSymbolStyle0;
+TdsHeaderBrandSymbol.style = headerBrandSymbolCss();
 
 exports.tds_header_brand_symbol = TdsHeaderBrandSymbol;

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

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
 
-const index = require('./index-ca8040ad.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 tableHeaderCellCss = () => `:host{display:contents}:host(.tds-table__header-cell) th{box-sizing:border-box;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);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) th *{box-sizing:border-box}:host(.tds-table__header-cell) th .tds-table__header-text{padding:8px 16px;margin:0}:host(.tds-table__header-cell) th .tds-table__header-text-no-padding{padding:0}:host(.tds-table__header-cell) th:hover{background-color:var(--tds-table-header-background-hover)}:host(.tds-table__header-cell--sortable) th .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) th .tds-table__header-button:focus{outline:2px solid var(--tds-table-header-btn-focus);outline-offset:-2px}:host(.tds-table__header-cell--sortable) th .tds-table__header-button:focus .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--sortable) th .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) th .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) th .tds-table__header-button:hover .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button{background-color:var(--tds-table-header-btn-background)}:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button:hover{background-color:var(--tds-table-header-btn-background-hover)}:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button .tds-table__header-button-icon--rotate{transform:rotate(180deg)}:host(.tds-table--compact) th{height:33px}:host(.tds-table--divider) th{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type) th{border-right:none}:host(.tds-table--no-min-width) th{min-width:unset}:host(.tds-table--no-padding) th{height:unset}:host(.tds-table__header-cell:first-of-type) th{border-top-left-radius:4px}:host(.tds-table__header-cell:last-of-type) th{border-top-right-radius:4px}:host(.tds-table--extra-column:first-of-type) th{border-top-left-radius:0}:host(.tds-table--toolbar-available) th{border-radius:0}:host(.tds-table--extra-column.tds-table--toolbar-available) th{border-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type) th{border-top-left-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type) th{border-top-right-radius:0}`;
 
 const relevantTableProps = [
     'multiselect',
@@ -21,6 +18,23 @@ const TdsTableHeaderCell = class {
         this.internalSortButtonClicked = index.createEvent(this, "internalSortButtonClicked", 6);
         this.internalTdsTextAlign = index.createEvent(this, "internalTdsTextAlign", 6);
         this.internalTdsHover = index.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.textAlignState = 'left';
+        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';
@@ -51,26 +65,9 @@ const TdsTableHeaderCell = class {
         this.onHeadCellHover = (key) => {
             this.internalTdsHover.emit({
                 tableId: this.tableId,
-                key,
+                key: key !== null && key !== void 0 ? key : '',
             });
         };
-        this.cellKey = undefined;
-        this.cellValue = undefined;
-        this.customWidth = undefined;
-        this.sortable = false;
-        this.textAlign = 'left';
-        this.disablePadding = false;
-        this.tdsAriaLabelSortButton = '';
-        this.textAlignState = 'left';
-        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) {
@@ -128,7 +125,7 @@ const TdsTableHeaderCell = class {
         return 'none';
     }
     render() {
-        return (index.h(index.Host, { key: '4df64a3d4a0ef86b377db355cfc149daf9b246b5', class: {
+        return (index.h(index.Host, { key: '5607f55acda25cb351a509f65f499fce013b1a97', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,
@@ -139,10 +136,10 @@ const TdsTableHeaderCell = class {
                 'tds-table--extra-column': this.multiselect || this.expandableRows,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
                 'tds-table--no-padding': this.disablePadding,
-            }, style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), role: "columnheader", "aria-sort": this.getAriaSort() }, this.headerCellContent()));
+            } }, index.h("th", { key: 'bd60c7fa0e964e949394954e92ca8619e51273af', style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onFocus: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), onBlur: () => this.onHeadCellHover(''), "aria-sort": this.getAriaSort(), colSpan: this.colSpan, rowSpan: this.rowSpan }, this.headerCellContent())));
     }
     get host() { return index.getElement(this); }
 };
-TdsTableHeaderCell.style = TdsHeaderCellStyle0;
+TdsTableHeaderCell.style = tableHeaderCellCss();
 
 exports.tds_header_cell = TdsTableHeaderCell;

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

@@ -1,26 +1,25 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
 
-const index = require('./index-ca8040ad.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 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 TdsHeaderDropdownListItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** If the link should appear selected. */
         this.selected = false;
+        /** The size of the component. */
         this.size = 'md';
     }
     render() {
-        return (index.h(index.Host, { key: 'f44417356b72d471bc6b9da6f05a92ee847492fd' }, index.h("div", { key: '4b3d24be55310e85146c89ac249bc6d100be4c6c', class: {
+        return (index.h(index.Host, { key: 'ad5209e62e16a30499c70bcb8969ee926652a65f' }, index.h("div", { key: 'a4460c58216595e6d9c3b02fb0bf87953f4734c5', class: {
                 'component': true,
                 'component-selected': this.selected,
-            } }, index.h("slot", { key: '2a37b399064d6f5ca3cc15417f48d60380d6b6dc' }))));
+            } }, index.h("slot", { key: 'b5619891a111e7a79ec334e6fe213f5dc13dc8c3' }))));
     }
     get host() { return index.getElement(this); }
 };
-TdsHeaderDropdownListItem.style = TdsHeaderDropdownListItemStyle0;
+TdsHeaderDropdownListItem.style = headerDropdownListItemCss();
 
 exports.tds_header_dropdown_list_item = TdsHeaderDropdownListItem;

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

@@ -1,25 +1,18 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
 
-const index = require('./index-ca8040ad.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 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 TdsHeaderDropdownListLgUser = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.imgUrl = undefined;
-        this.imgAlt = undefined;
-        this.header = undefined;
-        this.subheader = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'bdfa5d85ce7d9d75006496af94329a1721628b4f', role: "listitem" }, index.h("div", { key: '0f757d820aa3e96a1e98f7ae395660ba17e82576', class: "user-box" }, this.imgUrl && index.h("img", { key: 'c03f2089edefa01b766635e43d81f5b22a58f70d', src: this.imgUrl, alt: this.imgAlt }), index.h("slot", { key: 'c5eff329fa6100258a2c7d237ec076a139f2b00b', name: "thumbanil" }), index.h("div", { key: '0c097b9c1488f007ee8cd3e3490f9a3e85fac8f3', class: "user-content" }, index.h("div", { key: '3f1caac67dcd08d0bf5187ffe49c59ab3873822f', class: "header" }, this.header, index.h("slot", { key: '59fbd4a5b4d85e15de10b55376b6c54f4b3800c7', name: "header" })), index.h("div", { key: '82716ea4715e64e3c9d3ad3144b7af2821be5e8b', class: "subheader" }, this.subheader, index.h("slot", { key: '0574e77cf1d4a1651710811a0216bab7c24a11ed', name: "subheader" }))))));
+        return (index.h(index.Host, { key: '42d205c092f49240aa78c5004e72bd75a67b92fd', role: "listitem" }, index.h("div", { key: '42e263bc0ea144a99b8538539d9a205815dca701', class: "user-box" }, this.imgUrl && index.h("img", { key: 'f63bf88e6b25e9da9d85bdafe51c2587adc083ba', src: this.imgUrl, alt: this.imgAlt }), index.h("slot", { key: '5e6d8ecc4b0cf51bfa03496cfa585481285fa352', name: "thumbanil" }), index.h("div", { key: '19ea50db7c19d8720f3cc81672791ecae2cc2aee', class: "user-content" }, index.h("div", { key: 'df48cd3cd8bfeb5f5a93b0a5ddb6c0a68dee13b2', class: "header" }, this.header, index.h("slot", { key: '4b6e614f11e0ae204f6f9bbaa5299da4b2fb1230', name: "header" })), index.h("div", { key: 'eaaf9c29945f0f613776c41b1f0f8dc4fe24b00f', class: "subheader" }, this.subheader, index.h("slot", { key: 'c158d7a7523ee4b9027cdffbdb752a09d687bb98', name: "subheader" }))))));
     }
     get host() { return index.getElement(this); }
 };
-TdsHeaderDropdownListLgUser.style = TdsHeaderDropdownListUserStyle0;
+TdsHeaderDropdownListLgUser.style = headerDropdownListUserCss();
 
 exports.tds_header_dropdown_list_user = TdsHeaderDropdownListLgUser;

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

@@ -1,21 +1,18 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
+var isHeadingElement = require('./isHeadingElement-DihKNeqS.js');
+require('./dfs-Clg9RCmq.js');
 
-const index = require('./index-ca8040ad.js');
-const isHeadingElement = require('./isHeadingElement-4f06b688.js');
-require('./dfs-84f7f63e.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 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 TdsHeaderDropdownList = class {
     constructor(hostRef) {
         index.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() {
         var _a, _b;
@@ -80,10 +77,10 @@ const TdsHeaderDropdownList = class {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (index.h(index.Host, Object.assign({ key: '190c5b3ef5273bb4ddb4bfe7d41aa21051eced80' }, attributes), index.h("slot", { key: 'cb7346a42c64bfe414b1814acab5923583f543b4' })));
+        return (index.h(index.Host, Object.assign({ key: '53d5216a736e4c3d50d54f78c8b6532092c94dff' }, attributes), index.h("slot", { key: 'a3a4b97fe7bbe64a5afadd1cef78c9cc70ad0f55' })));
     }
     get host() { return index.getElement(this); }
 };
-TdsHeaderDropdownList.style = TdsHeaderDropdownListStyle0;
+TdsHeaderDropdownList.style = headerDropdownListCss();
 
 exports.tds_header_dropdown_list = TdsHeaderDropdownList;