@scania/tegel 1.8.1 → 1.9.0

package/dist/collection/components/dropdown/dropdown.js

@@ -349,7 +349,7 @@ export class TdsDropdown {
     render() {
         var _a, _b, _c, _d;
         appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
-        return (h(Host, { key: '451edf7c5eaa096500d8d989bd9cddc60a5fd5d8', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'c7e3d77ba79b6e135aa960bc8e56c2d41ae3ec2e', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        return (h(Host, { key: '9fee6da0243cf7b74abce8387454b32caacba96e', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'd338fdc28fdf1a6b24f7254e52f0d8581cc46293', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'a6852251cdf06567f2cb2a7516adb71d9ae3295d', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -392,11 +392,11 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'cd63a354addfbcbfb2bb355b1e053b93dd9d3864', ref: (element) => (this.dropdownList = element), class: `dropdown-list
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '4db23bfa5b43445f3f995e6624eb4cc41e3dbca1', ref: (element) => (this.dropdownList = element), class: `dropdown-list
             ${this.size}
             ${this.open ? 'open' : 'closed'}
             ${this.getOpenDirection()}
-            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: '9a4feeed475bde225d19e01f17e4eadc292c6f41', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { name: "error", size: "16px" }), this.helper))));
+            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: '23a98af0ba0ec7457dd83f0542fad645ae63765a', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '43425685729146305b871cabef0f769748865d9a', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'a1988ef07e8bf4be2f15ed274e3a9e431127e0ce', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '2d2ccb11a76efbc7d67f663ca7a92a4f62563bf5', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer-group/footer-group.js

@@ -19,11 +19,11 @@ export class TdsFooterGroup {
         }
     }
     render() {
-        return (h(Host, { key: 'a59951e61ce6b70ee19a5f807eb54482c0a43245' }, this.titleText && this.topPartGroup && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { onClick: () => {
+        return (h(Host, { key: 'b704a9cdc581f94a4680793bccc4da44496fe328' }, this.titleText && this.topPartGroup && (h("div", { key: '630d91ff93d0eeb6c0bc603d9255059bad3b8d33', class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { key: '2a424b0f61fb06b14ae9bb9a611b5264e0854111', onClick: () => {
                 this.open = !this.open;
-            }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("tds-icon", { name: "chevron_down", size: "20px" }))), h("div", { key: 'd9d098c9ec27205e58d16a871e17c9647d92dd4c', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+            }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("tds-icon", { key: 'ea2d3d26b0c70d6346b71d98753a6e13bf074351', name: "chevron_down", size: "20px" }))), h("div", { key: '400c3cf5f39e59fa60f26cba45df02ad8b5da063', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: 'dc4f4984872471034c397bd13c535fbc423fdf6d' }))));
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '38241a0f3b5a343f5074b113168ba97465f7c209' }))));
     }
     static get is() { return "tds-footer-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer-item/footer-item.js

@@ -10,7 +10,7 @@ export class TdsFooterItem {
         this.parentIsTopPart = this.host.closest('tds-footer-group').parentElement.slot === 'top';
     }
     render() {
-        return (h("div", { key: '5e5e0fab636900a4a5abc91fef8d9423d7995b37', role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '435a9db05aee42f8e92879b5bdca2a615e683d1b' })));
+        return (h("div", { key: '3ec8ab3daa658a8b54735c0b58b6a704da0206b3', role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '990ef329bcac600c632e0b7e8eda843e0284c62e' })));
     }
     static get is() { return "tds-footer-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer.js

@@ -16,7 +16,7 @@ export class TdsFooter {
         const usesStartSlot = hasSlot('start', this.host);
         const usesEndSlot = hasSlot('end', this.host);
         const usesCopyrightSlot = hasSlot('copyright', this.host);
-        return (h(Host, { key: '0f916c49a2a4c3904ebcf5bad2593c5a4928880a', class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", { key: '44e23c34001ff656ea572ca69a536adfc1b620f7' }, usesTopSlot && h("slot", { name: "top" }), h("div", { key: 'f20390b2f8dae54532e29e39c58b27ef6fe5cb6a', class: "footer-main" }, h("div", { key: '5fbbaabdc8e023447ba8eb35e7cfadf2c959e5b0', class: "footer-main-top" }, usesStartSlot && h("slot", { name: "start" }), usesEndSlot && h("slot", { name: "end" })), h("div", { key: '6276e651cc7cdc3fd9cb48b4c868b89c67c1ad4e', class: "footer-main-bottom" }, h("small", { key: '0bcac7160e866a43faca21ee3389e07042231d0b', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: 'bff874e1ff2898071a5ff31b1ca861848836ddfd', class: "brand" }, h("p", { key: '0dcec703e1207bef407fe909db64d6f1df7d5dd2' }, "Scania")))))));
+        return (h(Host, { key: '454d913eea834fa60400c9714370d14425bc24b6', class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", { key: '77ee89f78b3df1658a6c9e1f5b73273b447aca6d' }, usesTopSlot && h("slot", { key: '6a3c601f7fcd034d659848c3a568460489f874ca', name: "top" }), h("div", { key: '245560e49f1aa3ac1c0d9234f2b53c6c8be12a32', class: "footer-main" }, h("div", { key: '80e149cb97f9801bd46a3e8919ba0406cf0ee1aa', class: "footer-main-top" }, usesStartSlot && h("slot", { key: 'ee7202062d538c6259f272d48117fd61f4f043b6', name: "start" }), usesEndSlot && h("slot", { key: 'aea8a5c322a07f6fa77f0efb838d6487a658a446', name: "end" })), h("div", { key: '7a79c3a164d89ead9ece98d8e475aeb1eecd42af', class: "footer-main-bottom" }, h("small", { key: '13cd36f5dfda31addcf55e271dd398e2eb9083c6', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: 'd3b8bfd960a36bcc7a56fa972332e421e15a43c2', class: "brand" }, h("p", { key: 'c330b4649358ac3362118f64493dd68b9028e6ca' }, "Scania")))))));
     }
     static get is() { return "tds-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/core-header-item/core-header-item.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsCoreHeaderItem {
     render() {
-        return (h(Host, { key: '5518d7a3359d48ac323fa1a87e9c014911deb806' }, h("div", { key: '9d6ae88a87fdfecf92df14095b8bd5b844a1ff41', class: "item" }, h("slot", { key: 'cd3045dc6b892cb19c8d489e341897ff298be743' }))));
+        return (h(Host, { key: 'ef3825bce10e5d23e01b4be557014a5c90b8e7de' }, h("div", { key: '134696c5345b16dc15dc1940d7d42066597b3a4e', class: "item" }, h("slot", { key: '9e8fbe10a25cb6005d2ff03ce00adc5c6cdad495' }))));
     }
     static get is() { return "tds-core-header-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsHeaderBrandSymbol {
     render() {
-        return (h(Host, { key: '327b11c15448a5092c4dd698b53cdfca2063097b' }, h("tds-header-item", { key: 'c3709372cb856c73209cc87d1cb552fa87c17fc0' }, h("slot", { key: '25571704bd91411b649eceb5716fe22278193fc0' }))));
+        return (h(Host, { key: '9b3b472651a6d410b143316851ca701eab5a82c3' }, h("tds-header-item", { key: '843bc3ce81ae39261a7eb4429ed4d9d76f051cfb' }, h("slot", { key: 'd3a939ac410d229c78532c133e54b868507f7aff' }))));
     }
     static get is() { return "tds-header-brand-symbol"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-dropdown/header-dropdown.css

@@ -1,3 +1,14 @@
+:host {
+  --tds-scrollbar-width-standard: thin;
+  --tds-scrollbar-width: 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;
@@ -11,17 +22,33 @@
   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: 4px;
-  background-color: inherit;
+  width: var(--tds-scrollbar-width);
+}
+:host .menu::-webkit-scrollbar-track {
+  background: transparent;
 }
 :host .menu::-webkit-scrollbar-thumb {
-  background-color: var(--tds-grey-300);
+  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 {
+: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: rotatetds-z-index(180deg);
 }

package/dist/collection/components/header/header-dropdown/header-dropdown.js

@@ -31,13 +31,13 @@ export class TdsHeaderDropdown {
         this.open = !this.open;
     }
     render() {
-        return (h(Host, { key: 'd72add7a12c105e83c0300dc4c6727775dfe10e5' }, h("div", { key: 'b323560bd8b13b6643eafca2ad9deb9bea53689e', class: {
+        return (h(Host, { key: '73a8e824b891f66806fad583470460a30af641de' }, h("div", { key: '81e78a9f21b152ae4698ec6f693ead79eb40f936', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { key: '48af537f7b05f31fcbcb0c0aae311d2ccd69819d', class: "button", active: this.open, selected: this.selected }, h("button", { key: '324b1965706b0a3413c9e8ddcc37345c387519cc', ref: (el) => {
+            } }, h("tds-header-item", { key: 'aab78709417d1fd623c9a9969246434d78bcc055', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'dff4234a39520177ba3cc058511144431facb944', ref: (el) => {
                 this.buttonEl = el;
             }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
                 this.toggleDropdown();
-            } }, h("slot", { key: '56a3064075c135677f59e58c4be831c66230a7c2', name: "icon" }), this.label, h("slot", { key: '729e1901342405daf3655dac940310e64e6683f0', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("slot", { key: 'ec32e95833f0bc4a93a18c0058c7bea979cde638', name: "icon" }), this.label, h("slot", { key: 'ab077d925ecbc941446bb9f1f6755dccae26e0ae', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: 'eb45d913a11433c12e5add804c88fd7c33e343ea', class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { key: 'bc15799eeb488984d58abe21cfc27ba695a395a0', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {

package/dist/collection/components/header/header-dropdown-list/header-dropdown-list.js

@@ -72,7 +72,7 @@ export class TdsHeaderDropdownList {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, Object.assign({ key: '1811afd66a144c882c0d2d29d3bb01df601911cb' }, attributes), h("slot", { key: '4b1cee3cd03339a3371f87785b87eae665d76a47' })));
+        return (h(Host, Object.assign({ key: '2ebed45f0b4d3b872378a1246180fc34f8ea46de' }, attributes), h("slot", { key: '5b72e5cab5c21fdaa55ca8641c729393ade09f75' })));
     }
     static get is() { return "tds-header-dropdown-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-dropdown-list-item/header-dropdown-list-item.js

@@ -8,10 +8,10 @@ export class TdsHeaderDropdownListItem {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: '774697d96ed26eea5c5416c748812850482bbe08' }, h("div", { key: 'b3e69475f88fcdfbea2cd685f9804a0412938594', class: {
+        return (h(Host, { key: 'e884013f09151c5ba323ac69c34c88e8aba9d132' }, h("div", { key: 'e4babaebaac5f661b2ef365a120e9953d6535c73', class: {
                 'component': true,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '53edf8eee9b251320f0764e351ab233d90dd9ea1' }))));
+            } }, h("slot", { key: 'b58b6c84093c4edd303ee3ed202703f316cfcaa2' }))));
     }
     static get is() { return "tds-header-dropdown-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-dropdown-list-user/header-dropdown-list-user.js

@@ -11,7 +11,7 @@ export class TdsHeaderDropdownListLgUser {
         this.subheader = undefined;
     }
     render() {
-        return (h(Host, { key: '68abd3a9a18eb07df40f2f6b2b36059ab20a4108', role: "listitem" }, h("div", { key: '4c0547202b1bd79abf176b23367b09d25d88d575', class: "user-box" }, this.imgUrl && h("img", { src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '37c0fd2aeaf2249a4209c96ca84dd2e5a78dfc5e', name: "thumbanil" }), h("div", { key: 'feb5534d000c66c69d6a589428c7ea875932c974', class: "user-content" }, h("div", { key: 'fe6c84e6b39f3b5da49700dca2a84190e2edfcff', class: "header" }, this.header, h("slot", { key: 'cbab5a0251b8181b0ad9012d5d310da2d730a37f', name: "header" })), h("div", { key: '0992f9330ec9000a04033fba561b04fb7d4f01db', class: "subheader" }, this.subheader, h("slot", { key: 'f884e86e6e77ee67430b3c6e7696ba48a0b0fa13', name: "subheader" }))))));
+        return (h(Host, { key: '120d76ed5000698ced662db148b40a5d888a8d2a', role: "listitem" }, h("div", { key: '3ab963ed3d6dedcd2fab62ddc187f7f2da81221d', class: "user-box" }, this.imgUrl && h("img", { key: 'f542a2fbd18541ff12c05be84299193ce4d7459a', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '9aa0949e9f73ba26013aaff907d52ced275f20ce', name: "thumbanil" }), h("div", { key: '4e95bb13416d0a677c8423e67fd30acec004639c', class: "user-content" }, h("div", { key: '6164f3b2be4844cb0f754d265ec99b225a61bce3', class: "header" }, this.header, h("slot", { key: '15842a87e2a0d3d8fb52fa96f11a93f74e3fd263', name: "header" })), h("div", { key: '9b236eaf9ccc12b808dfca4a929b1cfc8d7d2490', class: "subheader" }, this.subheader, h("slot", { key: '8fcb8f4117901a6a5ee53fbe22c307039c598787', name: "subheader" }))))));
     }
     static get is() { return "tds-header-dropdown-list-user"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-hamburger/header-hamburger.js

@@ -3,7 +3,7 @@ import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsHeaderHamburger {
     render() {
         const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: '6a4450ddfc7c76a76440a4416ee3b33615ded3a4' }, h("tds-header-item", { key: '3d24dbfb10bd9fae5ed81e9d47ce21234e15dee9' }, h("button", Object.assign({ key: '3187d9baa8f21e35221b3f26f802cd5e20f7f898' }, inheritedButtonProps), h("tds-icon", { key: '6cdd0ccb1c0142500709e81ef3474109c38a6ca4', class: "icon", name: "burger", size: "20px" })))));
+        return (h(Host, { key: 'fa81c06234538414f64c983239c34b7a32184d35' }, h("tds-header-item", { key: '5c1168413c62c9f51df5d15bc4b1c12f971cf2f8' }, h("button", Object.assign({ key: 'e2225a6e50590b6b25d282737e2198cbd6bf1458' }, inheritedButtonProps), h("tds-icon", { key: '5659662f934a61c57b981a24e27cc4e25247cbf7', class: "icon", name: "burger", size: "20px" })))));
     }
     static get is() { return "tds-header-hamburger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-item/header-item.js

@@ -37,10 +37,10 @@ export class TdsHeaderItem {
         this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
     }
     render() {
-        return (h(Host, { key: 'e9db124a8c8140b9d0e0f948f46f7ad3629a7b65' }, h("tds-core-header-item", { key: '84fd45fb90adb59ca67aee61970f74f756e359c5', class: {
+        return (h(Host, { key: 'd5f256a30d131817e23f428b87a3604e2a299ad6' }, h("tds-core-header-item", { key: 'd2dc6486839af96bbd10938bf9e03ff50123da4f', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '3ae05ca1b481bc0805ad348c461cfd4fcb99ba72' }))));
+            } }, h("slot", { key: 'a89a44221fe947e4075e6889ed3e3cf8478f6e96' }))));
     }
     static get is() { return "tds-header-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-launcher/header-launcher.css

@@ -1,3 +1,14 @@
+:host {
+  --tds-scrollbar-width-standard: thin;
+  --tds-scrollbar-width: 10px;
+  --tds-scrollbar-thumb-border-width: 3px;
+  --tds-scrollbar-thumb-border-hover-width: 2px;
+}
+
+body {
+  scrollbar-width: thin;
+}
+
 /** The breakpoint at which the layout changes from fixed size to full-width. */
 :host .wrapper {
   height: var(--tds-header-height);
@@ -13,17 +24,33 @@
   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: 4px;
-  background-color: inherit;
+  width: var(--tds-scrollbar-width);
+}
+:host .wrapper .menu::-webkit-scrollbar-track {
+  background: transparent;
 }
 :host .wrapper .menu::-webkit-scrollbar-thumb {
-  background-color: var(--tds-grey-300);
+  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 {
+: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;

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

@@ -32,11 +32,11 @@ export class TdsHeaderLauncher {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: '337abddb77f5d7b2ce7c1a8bcfe2dd5e60cc934c' }, h("div", { key: '3652f71bd52be2fcbae7bfde3dab0b0c1c0c5d56', class: {
+        return (h(Host, { key: '28c3cec9d319219a00783f0743fc7e035b9b63f5' }, h("div", { key: 'a4372783a69578e1965bb14b2b3ad12e2752c472', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: 'ffae6f54b57dcc0c44fae751f9da1025512b8f4b' }, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { 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: 'cad014a13dcd193c0b829033d600c07a342a78cc' }, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { key: '64c9c7e77f6e6825bd0ace40543e10c1444cb290', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {

package/dist/collection/components/header/header-launcher-button/header-launcher-button.js

@@ -7,7 +7,7 @@ export class TdsHeaderLauncherButton {
     render() {
         this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
         const buttonProps = Object.assign({}, this.ariaAttributes);
-        return (h(Host, { key: '49a11965353d51e7bf1daa8c6618a41a84deb31e' }, h("tds-header-item", { key: '7fd710a85a1a84fba6025313d738f222d0f3696c', active: this.active }, h("button", Object.assign({ key: '0928b54dd658accc6d4154b40bbfff263f2f8b36' }, buttonProps), h("tds-icon", { key: '1dd825b98ea44b33ec6a555088911f801f45031e', class: "icon", name: "bento", size: "20px" })))));
+        return (h(Host, { key: 'ee714e05a3585542850f433cd81ed25d95a14070' }, h("tds-header-item", { key: '0a7c7b20fa872c1ccd4e0760b9f68743ec6c761f', active: this.active }, h("button", Object.assign({ key: '1b0c93c04e5206dc47fe3df3a158e16ed624f8e1' }, buttonProps), h("tds-icon", { key: '11a961f7e11d741108a450ef1a2fa1b22f5520a8', class: "icon", name: "bento", size: "20px" })))));
     }
     static get is() { return "tds-header-launcher-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-launcher-grid/header-launcher-grid.js

@@ -28,7 +28,7 @@ export class TdsHeaderLauncherGrid {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, { key: 'f61e4a271a143bcdbfe0c56ae8d687c00e7e23dc' }, h("div", Object.assign({ key: '4403ceb73e4410ed6d5f33cfd91bcdbe6cace263' }, listAttributes), h("slot", { key: 'f43fea428cadb07fbdcc5247cdcc4bf2f3b0652c' }))));
+        return (h(Host, { key: '8a88bd51ef2e16f9c1ce67bbd7d178692a223c22' }, h("div", Object.assign({ key: '8e5025c3d1563d5765a3cfce1e3d4f50bdf5caf4' }, listAttributes), h("slot", { key: '0b4bc10cd7aa8fa1d6c0a15ea9a9997f74ad32c3' }))));
     }
     static get is() { return "tds-header-launcher-grid"; }
     static get originalStyleUrls() {

package/dist/collection/components/header/header-launcher-grid-item/header-launcher-grid-item.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsHeaderLauncherGridItem {
     render() {
-        return (h(Host, { key: 'b94d764c336075984849b35aa22cd8a270c61e77', role: "listitem" }, h("slot", { key: '14bbf3162f5fc95b4bd78281aca311a1ec05c99e' })));
+        return (h(Host, { key: 'd5c9c41d3438735fd770c227e2d426e149ac5bcf', role: "listitem" }, h("slot", { key: 'eff84122e0c7f46b53982fdc53852938f73387bd' })));
     }
     static get is() { return "tds-header-launcher-grid-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-launcher-grid-title/header-launcher-grid-title.js

@@ -8,7 +8,7 @@ export class TdsHeaderLauncherGridTitle {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: 'dd82b8c7e9e9f512f8d6bb4ae457b2090881a8cd' }, h("h3", { key: 'e5e91128de40042c6815bf660ed585084080e162', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '1b33d0e496bd9128eb15dc3807432284f768c52c' }))));
+        return (h(Host, { key: '7c58a138aeb6e49fa3de68cf39de273eb37db6b5' }, h("h3", { key: '1d775b23a798f3433f985357932c114e943bd698', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: 'e9599ac31c5e637b578c406ee1f4299f40878009' }))));
     }
     static get is() { return "tds-header-launcher-grid-title"; }
     static get originalStyleUrls() {

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

@@ -8,7 +8,7 @@ export class TdsHeaderLauncherList {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: 'b1ad90db7f35af9825ef618c2c0d4af25df7cc2f' }, h("tds-header-dropdown-list", { key: '2f806e88239f3c48ba85e29296b1ae9a53ce8ad3', size: "lg" }, h("slot", { key: 'd354701c662c7b4b275080ebcca60c98d896f9e3' }))));
+        return (h(Host, { key: '3e4fe30a4ec6234898314d838831ffccdaf37ccf' }, h("tds-header-dropdown-list", { key: '0a3926403b5800b45433edd035f700a6778bbc2b', size: "lg" }, h("slot", { key: 'bcbe4495b9f136b07a5c3c1e7062ec116707a5e4' }))));
     }
     static get is() { return "tds-header-launcher-list"; }
 }

package/dist/collection/components/header/header-launcher-list-item/header-launcher-list-item.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsHeaderLauncherListItem {
     render() {
-        return (h(Host, { key: 'c1e87c33679155835692bd68076c761af07378a1' }, h("tds-header-dropdown-list-item", { key: '9ec4c6296501d090f2f4e9c53620f3b9251e67cf', size: "lg" }, h("slot", { key: '4d70e13bc28548be60791d813dcb6aae2f17aec4' }))));
+        return (h(Host, { key: '1b2afd6810710416ac4362d00af34f2ec889ea1f' }, h("tds-header-dropdown-list-item", { key: '860b07b16c713c8a74e7443c452263e054c6aebd', size: "lg" }, h("slot", { key: '521f412cd86ae413537bca6821f9c95bce075f63' }))));
     }
     static get is() { return "tds-header-launcher-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-launcher-list-title/header-launcher-list-title.js

@@ -8,7 +8,7 @@ export class TdsHeaderLauncherListTitle {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: 'ab394e57d5459b16a53d79d05cb95d47dbc8d8f5' }, h("h3", { key: '61cb8ec5ea1de7f79a1ad29ba69b52668f89a91d', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: 'cdeab2d430e98b1e9314b06ff78478b43d6ed47b' }))));
+        return (h(Host, { key: '84abee543dcf0f2f6db9e66b32cd89ddb3fb756a' }, h("h3", { key: 'd2eb2ab7b39ac0a0d250ebf63ef22b309c10c9a6', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: 'edb11a0e6742372432b8f02763d6cf233bdca0cd' }))));
     }
     static get is() { return "tds-header-launcher-list-title"; }
     static get originalStyleUrls() {

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsHeaderTitle {
     render() {
-        return (h(Host, { key: '1e80d3121b01c500dfe3c80e42cec5081be68f2f' }, h("div", { key: '8031d8502c74ab524390966ede2ccb329e69cff1', class: "component" }, h("slot", { key: 'cf385f204cb34f11b6f21adc1e9c721d4d61cb44' }))));
+        return (h(Host, { key: 'c1204516bba6b80a1c1da9bf4636c51a7e4abbed' }, h("div", { key: '7f82c8ae96ff0ab0feff641f4d21953d9d69b683', class: "component" }, h("slot", { key: '6b38d0888979c8dd6487dcb211a5f4ab34ee5756' }))));
     }
     static get is() { return "tds-header-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.css

@@ -1,6 +1,17 @@
 /*
   Contains spacing variables for the layout
 */
+:host {
+  --tds-scrollbar-width-standard: thin;
+  --tds-scrollbar-width: 10px;
+  --tds-scrollbar-thumb-border-width: 3px;
+  --tds-scrollbar-thumb-border-hover-width: 2px;
+}
+
+body {
+  scrollbar-width: thin;
+}
+
 html,
 :root {
   --tds-nav-dropdown-menu-box: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);

package/dist/collection/components/header/header.js

@@ -32,7 +32,7 @@ export class TdsHeader {
     }
     render() {
         const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: '8b4ced851110fc80769c0f37a98ee535f0bd31aa' }, h("slot", { key: '0fe95789efe24c95ff6a6b19924a33f8e280592b', name: "hamburger" }), h("slot", { key: 'c1cf6ddd168f52d19e11042fd43de832866826da', name: "title" }), h("nav", Object.assign({ key: 'fbb164db5b72ed35ca0c4a15646a3d37d6d5d54a' }, navAttributes), h("ul", { key: 'bb4d59b4754288095953725eb73adf22de7c776b', class: "tds-header-component-list" }, h("slot", { key: 'dd43bbc568e5df6071688e58b8c8a5e7eef760c1' }), h("li", { key: '5322eb3701496c7bcc94728b8828f1b24c6605eb', class: "tds-header-middle-spacer" }), h("slot", { key: '5d1dda51df772dcaa8485fff152764aced3255bb', name: "end" })))));
+        return (h(Host, { key: '7f42725db4686769f46fb327bc7baeb3b83f2d15' }, h("slot", { key: '26b4ab152030e56733efdb29c5ef11e3e8df1bdb', name: "hamburger" }), h("slot", { key: '7783ecdec32b28baab698ea379e7497a66da6a11', name: "title" }), h("nav", Object.assign({ key: '66a2d848b6ceed22d57080641652392dc2357405' }, navAttributes), h("ul", { key: '5b47c9a9e2210ca4c944ef6323bd5378437d8237', class: "tds-header-component-list" }, h("slot", { key: '14aaafb9b73a5f7d7fd48d0e0cfe4f4907183f27' }), h("li", { key: 'd3e6db876946d322dc14ef22ada0c92414941d2f', class: "tds-header-middle-spacer" }), h("slot", { key: '833f75ce887181221118a0dfe32ca96cf149a3ff', name: "end" })))));
     }
     static get is() { return "tds-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/icon/icon.js

@@ -28,7 +28,7 @@ export class Icon {
         this.arrayOfIcons = [...this.arrayOfIcons];
     }
     render() {
-        return h(Host, { key: 'e5effec50e55df5bb415904f201919545c5ca98c' }, this.setIcons());
+        return h(Host, { key: 'd3d5600086e1cd117a0145d3d58d1f8f63602898' }, this.setIcons());
     }
     static get is() { return "tds-icon"; }
     static get encapsulation() { return "shadow"; }