@scania/tegel 1.58.0-side-menu-beta.0 → 1.59.0

package/dist/collection/components/accordion/accordion.js

@@ -10,11 +10,11 @@ export class TdsAccordion {
         this.hideLastBorder = false;
     }
     render() {
-        return (h(Host, { key: '07fa8bf06435570bdf6ba1170e6f55baecc3cf98', class: {
+        return (h(Host, { key: '0cd132877187987054bcab66e2695366c8e27164', class: {
                 'tds-accordion': true,
                 [`tds-mode-variant-${this.modeVariant || ''}`]: Boolean(this.modeVariant),
                 'hide-last-border': this.hideLastBorder,
-            } }, h("slot", { key: 'd04a5c6767081b816b39eab3f6f02b69810990cd' })));
+            } }, h("slot", { key: 'de4b7a72a6205b2c04510fd99a1645a591675ec0' })));
     }
     static get is() { return "tds-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/badge/badge.js

@@ -28,12 +28,12 @@ export class TdsBadge {
         }
     }
     render() {
-        return (h("host", { key: '094da9af01d8141863e4a85ae23ad27d5c02ac4a', role: "status", class: {
+        return (h("host", { key: '3c4fb4220bae5c9085e27f64569e678d657da292', role: "status", class: {
                 'tds-badge': true,
                 [`tds-badge-${this.size}`]: true,
                 'tds-badge-pill': this.shape === 'pill',
                 'tds-badge-hidden': this.hidden,
-            }, "aria-label": this.tdsAriaLabel, "aria-live": this.tdsAriaLive }, h("div", { key: '6094bed99d589f4f24a85588937973618265a3ab', class: "tds-badge-text", "aria-hidden": "true" }, this.text)));
+            }, "aria-label": this.tdsAriaLabel, "aria-live": this.tdsAriaLive }, h("div", { key: '228210632555298fe535f7479a53797c68e38b4c', class: "tds-badge-text", "aria-hidden": "true" }, this.text)));
     }
     static get is() { return "tds-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/banner/banner.js

@@ -51,11 +51,11 @@ export class TdsBanner {
         const usesHeaderSlot = hasSlot('subheader', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '4a2775ec0a13d095bb193cbaeeccb63886887910', role: this.roleType, "aria-hidden": `${this.hidden}`, "aria-live": this.roleType === 'alert' ? 'assertive' : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: {
+        return (h(Host, { key: '4e7716b4d86c7cd7028fb34bbe98e7465ed14ce4', role: this.roleType, "aria-hidden": `${this.hidden}`, "aria-live": this.roleType === 'alert' ? 'assertive' : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: {
                 [this.variant]: true,
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, this.icon && (h("div", { key: '426e5c69aac5250d72d28bd114205e0fe1841f76', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: 'e44a0fc389b8013a572b25b13fd7a6d1f501522c', name: this.icon, size: "20px", svgTitle: this.icon }))), h("div", { key: '72cf07172fdb0785b4d45267abd163917d4271c8', class: "content" }, h("div", { key: 'ae45c2cf9282fcdd94f23b1aab5138b30b0ad887', class: "header-subheader" }, this.header && h("div", { key: 'f05b93067f80e03b84284227884d9802dd2f16ac', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'c17f884559cd3f09d2447d4816709ebc7a940b07', name: "header" }), this.subheader && h("div", { key: '1397b96c39a88439814387390e8715164f44b616', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '73df212519a15ef97688e4fcc65e7e5235e7054a', name: "subheader" })), usesActionsSlot && h("slot", { key: 'dc11f989a674a05addb163b3085af0194fe83d53', name: "actions" })), h("div", { key: '929c4ecaf02e7e14990179e07399459ef41e6ae4', class: `banner-close` }, h("button", { key: 'f9595bff00be2618df765e4f7901c74e83a5d1eb', "aria-label": "Close banner", onClick: this.handleClose }, h("tds-icon", { key: '4d8d00a93c55db4d4a92aaa113510afc00ec9aad', name: "cross", size: "20px", svgTitle: "Close" })))));
+            } }, this.icon && (h("div", { key: '1dbe63c9a2edab759bc75dce412a7f34712e3f43', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: 'c4e8f396bef602a9f7207991e279c8c622661411', name: this.icon, size: "20px", svgTitle: this.icon }))), h("div", { key: '5c5611a61a03d7d841212c6ca2c37175a1679425', class: "content" }, h("div", { key: '5505abf23a38ca845f64f9cde245a2b0be2dbad3', class: "header-subheader" }, this.header && h("div", { key: '63e5189f538d9b3f1e789fcd4261280823135d97', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'cfd1791a4f756d5cdd715bc402a0ae1941abd721', name: "header" }), this.subheader && h("div", { key: 'c5f40400c69aadf5294cd77adf09d36e48e7d16a', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'f0eaf8b4babc0566e6f5acaa5fb6b97bb05d88e2', name: "subheader" })), usesActionsSlot && h("slot", { key: '68e5e3918b5f90a0d098bdb610f947a3f9e503e1', name: "actions" })), h("div", { key: '7204a6b9b264b611bb786f2995d816419486c4a9', class: `banner-close` }, h("button", { key: '55bca7ed0882df04a21fdeb1c9761c991314f464', "aria-label": "Close banner", onClick: this.handleClose }, h("tds-icon", { key: '55dcb39b4fdb6c4888e977dab597c82c1f2c68c1', name: "cross", size: "20px", svgTitle: "Close" })))));
     }
     static get is() { return "tds-banner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/block/block.js

@@ -37,7 +37,7 @@ export class TdsBlock {
                 evenOddClass = 'tds-block-odd';
             }
         }
-        return (h(TagType, { key: '7f07ad2391246677a60d6e1f243bb399c1b97559', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: 'b106075c5d159dbd679f5936e6e644d11c997492' })));
+        return (h(TagType, { key: 'e2d134c62b76ebed02573a2f9b75c74a3e82e0f5', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '54e3c068eb94e846f722c481bcddf39589e8ee54' })));
     }
     static get is() { return "tds-block"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.js

@@ -8,7 +8,7 @@ export class TdsBreadcrumb {
         this.current = false;
     }
     render() {
-        return (h(Host, { key: 'afa74a56d694fdf4a453e60747c89c8c4ba710cc', role: "listitem" }, h("div", Object.assign({ key: 'de5404a711784ce5eb4b64596cf9c90c2aab3fb0', class: { current: this.current } }, (this.current ? { 'aria-current': 'page' } : {})), h("slot", { key: '06a7ff8a55a3534a7aa7593e39452f1c4949424c' }))));
+        return (h(Host, { key: '418f26d85c2d57bafec5dbcf01a285ee5b0eff74', role: "listitem" }, h("div", Object.assign({ key: 'b282b10d48f5256f5811ec86389692ec8e69cc23', class: { current: this.current } }, (this.current ? { 'aria-current': 'page' } : {})), h("slot", { key: '1104b293e32beb1aa086e713fb29704445fd3de4' }))));
     }
     static get is() { return "tds-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -6,7 +6,7 @@ export class TdsBreadcrumbs {
     render() {
         var _a;
         (_a = this.host.children[this.host.children.length - 1]) === null || _a === void 0 ? void 0 : _a.classList.add('last');
-        return (h("nav", { key: '926e3735bc890e200960ff8d5a5efaea9d59a3e2', "aria-label": this.tdsAriaLabel }, h("div", { key: '7d683be9b78ea51e055de0fee2638ac51d91d905', role: "list", class: "tds-breadcrumb" }, h("slot", { key: '7cb331d224d454cb928ff52af047c69393cf7410' }))));
+        return (h("nav", { key: 'ee7740f98286cf518a7f2b555c4d3b73060e5224', "aria-label": this.tdsAriaLabel }, h("div", { key: 'c2876561c869fec647dca3feaf8cb171ecac3711', role: "list", class: "tds-breadcrumb" }, h("slot", { key: 'd6f7dd47e46f103d9890f9d984c77efb57aa8dfd' }))));
     }
     static get is() { return "tds-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/button.js

@@ -40,11 +40,11 @@ export class TdsButton {
         if (!this.text && !hasLabelSlot) {
             this.onlyIcon = true;
         }
-        return (h(Host, { key: '7f8c8462a61bc5faf9ad2d6d9bf2e358aa3cf98e', class: {
+        return (h(Host, { key: '6aa0aeb6026633e929a0e0c6b7715a6286350cb6', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
                 disabled: Boolean(this.disabled),
                 fullbleed: Boolean(this.fullbleed),
-            }, disabled: this.disabled }, h("button", Object.assign({ key: '4875490d582b2d7b56761d4926677a875898448b', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
+            }, disabled: this.disabled }, h("button", Object.assign({ key: '1eafa70fc5067abc48937b5eb1bf1125c921438d', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -58,7 +58,7 @@ export class TdsButton {
                 'icon': hasIconSlot,
                 'only-icon': this.onlyIcon,
                 [`animation-${this.animation}`]: this.animation !== 'none',
-            } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: 'c2784c3405118a239965bf5ab95dd341ab10d5f0', name: "label" }), hasIconSlot && h("slot", { key: 'ba5b742b82d3879c01cdee53219daf3d2571768a', name: "icon" }))));
+            } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: 'f4a72ae2c168c2a363b9a6c38bfc1c6bdc8ff396', name: "label" }), hasIconSlot && h("slot", { key: '6b8d987053f43d42d667902efa2431f5b69d46f2', name: "icon" }))));
     }
     static get is() { return "tds-button"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/card/card.css

@@ -72,15 +72,18 @@
 }
 .card .card-body-img {
   width: 100%;
+  background-color: var(--color-background-layer-03);
+}
+.card slot[name=body-image]::slotted(*) {
+  background-color: var(--color-background-layer-03);
 }
 .card .tds-divider {
   margin: 16px 16px 0;
-  background-color: var(--tds-card-divider);
   height: 1px;
 }
 .card .card-body {
   display: block;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .card slot[name=body]::slotted(*) {
   /* !important is needed here to prevent this from being overwritten by our CSS-reset. */

package/dist/collection/components/card/card.js

@@ -57,7 +57,7 @@ export class TdsCard {
             const usesBodyImageSlot = hasSlot('body-image', this.host);
             const usesActionsSlot = hasSlot('actions', this.host);
             const bodyId = `body-${this.cardId}`;
-            return (h("div", { class: { stretch: this.stretch }, "aria-describedby": usesBodySlot ? bodyId : null }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: "card-body", id: bodyId }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
+            return (h("div", { class: { stretch: this.stretch }, "aria-describedby": usesBodySlot ? bodyId : null }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: "card-body", id: bodyId }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", { variant: "discrete" }), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
         };
     }
     render() {
@@ -68,7 +68,7 @@ export class TdsCard {
             [`${this.imagePlacement}-stretch`]: this.stretch,
         };
         const ariaLabel = this.header ? this.header : `Card ${this.cardId}`;
-        return (h(Host, { key: 'b80a87682ca93e2812db50e5aa47865127e195e6', class: { [`tds-mode-variant-${this.modeVariant}`]: !!this.modeVariant } }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
+        return (h(Host, { key: '0e88b67936428923bf65f8ff1a9e692172778f0c', class: { [`tds-mode-variant-${this.modeVariant}`]: !!this.modeVariant } }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
     }
     static get is() { return "tds-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/checkbox.js

@@ -60,12 +60,12 @@ export class TdsCheckbox {
         }
     }
     render() {
-        return (h("div", { key: '97afce57b6f6ce0d66dabd227f7271b5dc8fe707', class: "tds-checkbox" }, h("input", { key: '8c97381eacc2c9d914cd02877e44dc0a7a456b48', ref: (inputElement) => {
+        return (h("div", { key: '701d1b9990768245981ddc7d9b63cdaea3afe7cf', class: "tds-checkbox" }, h("input", { key: '2d038593dddd65b6f36724c1d21c42b56b1ee122', ref: (inputElement) => {
                 if (inputElement)
                     this.inputElement = inputElement;
             }, indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
                 this.handleChange();
-            } }), h("label", { key: '15a08109078c67717cf428c0f773ff7946b417a8', htmlFor: this.checkboxId }, h("slot", { key: '8ecde64bfea05475817019e4bd67ab50c571e328', name: "label" }))));
+            } }), h("label", { key: 'baad151ab9ca1d51d25afc1dbe95f848af5098f5', htmlFor: this.checkboxId }, h("slot", { key: '7cf6849b9d0d1c9eb8310aa5d076246b5daa54d5', name: "label" }))));
     }
     static get is() { return "tds-checkbox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/chip/chip.js

@@ -87,7 +87,7 @@ export class TdsChip {
             'suffix': hasSuffixSlot,
             'disabled': this.disabled,
         };
-        return (h(Host, { key: '610866a08e70c90d8f62c4e262e492c0ad2ab753' }, h("div", { key: '9615a6a960ad58beb9971514e13dce3a370af231', class: chipClasses }, h("input", Object.assign({ key: 'dfe150bd39d139b100ce9f959bbe813750745420', type: this.type, id: this.chipId, "aria-checked": this.type === 'button' ? undefined : String(this.checked), role: this.type, "aria-label": this.tdsAriaLabel }, inputAttributes)), h("label", { key: '361ed17718d1cbe90b945342cd0281a49626b26e', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '7a3cee5a56d4d731b0967ba55c54431de4d0e5e2', name: "prefix" }), hasLabelSlot && h("slot", { key: '5fe884b9b8314c5a89d9af3166da68fd23c0c07a', name: "label" }), hasSuffixSlot && h("slot", { key: 'd2c928404578bdf6e6dc393a98b4c1b112432d34', name: "suffix" })))));
+        return (h(Host, { key: '9517f65018845d190556a3613ca92c65a7646fe7' }, h("div", { key: '7f360af4c44eed73fa6be544a5bf9bae56d9e7da', class: chipClasses }, h("input", Object.assign({ key: '5427d06210a9057cadd5fb4494c0d731e48486dc', type: this.type, id: this.chipId, "aria-checked": this.type === 'button' ? undefined : String(this.checked), role: this.type, "aria-label": this.tdsAriaLabel }, inputAttributes)), h("label", { key: 'ee051e60ee3ae0fc31a8cabe47e7cc5a0bc7c50b', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '7efb802bb9a2083b47f0950c18196ec59af07bd5', name: "prefix" }), hasLabelSlot && h("slot", { key: 'c3b44fa956f2ac358bfe6de492a594020b13b307', name: "label" }), hasSuffixSlot && h("slot", { key: '87beda3c9e5a757d1fa372f227b71f6d5816a9d3', name: "suffix" })))));
     }
     static get is() { return "tds-chip"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/datetime/datetime.js

@@ -170,7 +170,7 @@ export class TdsDatetime {
                 this.labelPosition === 'inside' &&
                 this.size !== 'sm'),
         };
-        return (h("div", { key: '46bd4a81e68f32267d62df5180ab6ba9de7e183e', class: classNames, onKeyDown: (e) => {
+        return (h("div", { key: '1fe92a5dbbfe9b3fda2e46bb32aba4cf3da09289', class: classNames, onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     const browserIsChrome = navigator.userAgent.toLowerCase().includes('chrome');
                     if (browserIsChrome) {
@@ -178,10 +178,10 @@ export class TdsDatetime {
                         this.textInput.showPicker();
                     }
                 }
-            } }, this.labelPosition === 'outside' && this.label && (h("label", { key: '84cd03bee06e621314ee4a2a74440a1cc64b635d', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '7c4c04ea0df4b88c74d203123dc17dd29386b494', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '8c2a1e6d92b45b1be68e520b21d40dd83ec5bab0', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: '4fb15c46fb418f11f7fc02dcef8c430257ebd556', ref: (inputEl) => {
+            } }, this.labelPosition === 'outside' && this.label && (h("label", { key: 'f4568c4ff6e65ade6f1c13f4c2fad5a1f8b221ce', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: 'cef53128e5d9f410d6ad8056dab6eb1d3c55b3e6', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'dbec36690999a9a6f48dacc9874fc261fd73186a', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: 'a13f35f30d58e28b261ff6d4a900ce2861bb4b54', ref: (inputEl) => {
                 if (inputEl)
                     this.textInput = inputEl;
-            }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: '7bc1fa21b2389416773ed271c6db22560d27c3fb', class: "tds-datetime-label-inside", htmlFor: this.name }, this.label)), h("div", { key: 'd93169f5ab8077e150e7bdb2c459a9086c5cc350', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '22bb5b37b73319c6566e1db29284778754d634e7', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '1c9d52a312e2a622485de8deab6a13b83c54decd', class: "datetime-icon icon-time" }, h("tds-icon", { key: '472222802261960915664e5a754a74e7def45bc7', size: "20px", name: "clock", svgTitle: "Clock" })))), this.state === 'error' && (h("div", { key: 'c4d637939bbb2be52867a1d0eecd8d85e13f9664', class: "tds-datetime-helper" }, !((_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.validity) === null || _b === void 0 ? void 0 : _b.badInput) && (h("div", { key: 'b5ad19a8715623928f9af3706cc9f53090d031ed', class: "tds-helper" }, h("tds-icon", { key: '805214bccad4afa519a783c1d0d6457c12465151', name: "error", size: "16px", svgTitle: "error" }), " ", this.helperError)), this.textInput && this.textInput.validity.badInput && (h("div", { key: 'c566a22753888287a2abc60e2c747fff669a96b9', class: "tds-helper" }, h("tds-icon", { key: '656f92a11620ef57eae10aac48010e0d5ef82f74', name: "error", size: "16px", svgTitle: "error" }), " ", this.helperErrorInvalid)))), this.helper && this.state !== 'error' && (h("div", { key: 'ed123de1e76dbd7b9ea209d3c48cd3c6b1bc0bb5', class: "tds-datetime-helper" }, h("div", { key: '915e2b03b3c78476b2d9b1cc13837d3fb565ef49', class: "tds-helper" }, this.helper)))));
+            }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: 'dd82b87e1109d860e4871f63b4960af6f7cfc8fd', class: "tds-datetime-label-inside", htmlFor: this.name }, this.label)), h("div", { key: 'e34840f87a37fdd965012fb07a55c02118e14824', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: 'd0c61e858c7f34649b89f03b9b1101f6ea70d64d', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '4f2d2a4894d983b901d2c85010349216161d0973', class: "datetime-icon icon-time" }, h("tds-icon", { key: '1366b61923123a3b8d5a0f84659a5f916e098c09', size: "20px", name: "clock", svgTitle: "Clock" })))), this.state === 'error' && (h("div", { key: '2eb75040a8f51f21af473bbf744b009ae7ea2ec1', class: "tds-datetime-helper" }, !((_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.validity) === null || _b === void 0 ? void 0 : _b.badInput) && (h("div", { key: '686a496cdd605653da83691a5707b1a99ae08da2', class: "tds-helper" }, h("tds-icon", { key: 'be2b7c68454320e4431847fc2b66cfb1759c53aa', name: "error", size: "16px", svgTitle: "error" }), " ", this.helperError)), this.textInput && this.textInput.validity.badInput && (h("div", { key: 'd365380116182623148ed62e928a82d5555d10ad', class: "tds-helper" }, h("tds-icon", { key: '3eb73cb9b53d4351826c18fec554f2c60079e2c8', name: "error", size: "16px", svgTitle: "error" }), " ", this.helperErrorInvalid)))), this.helper && this.state !== 'error' && (h("div", { key: 'f6e98f87f5abe8e1865fa1804fd887660889cb74', class: "tds-datetime-helper" }, h("div", { key: 'a8b0a189f0c4a8fb6f409d38963d4930be0e5565', class: "tds-helper" }, this.helper)))));
     }
     static get is() { return "tds-datetime"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/divider/divider.css

@@ -17,8 +17,11 @@
 .divider.defined {
   background-color: var(--tds-divider-background-defined);
 }
-.divider.dark-blue {
-  background-color: var(--tds-divider-background-dark-blue);
+.divider.strong {
+  background-color: var(--tds-divider-background-strong);
+}
+.divider.expressive {
+  background-color: var(--tds-divider-background-expressive);
 }
 .divider.horizontal {
   width: 100%;

package/dist/collection/components/divider/divider.js

@@ -3,11 +3,11 @@ export class Divider {
     constructor() {
         /** Orientation of the Divider, horizontal if not specified. */
         this.orientation = 'horizontal';
-        /** Variant of the Divider, subtle if not specified. */
+        /** Variant of the Divider, subtle if not specified. `dark-blue` is a deprecated alias for `expressive`. */
         this.variant = 'subtle';
     }
     render() {
-        return (h(Host, { key: '467cc771ed3fc6c574710aec6ea5e011a03ff7f8', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: 'bebf6ec81c99e2146ae6a07feda9b65b96064369', class: {
+        return (h(Host, { key: 'd719a853ab8edcbd2f82fd3ace2e6049966be188', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: '6b1d79bd559eeb881821c5e05f4153e509c58a28', class: {
                 'divider': true,
                 'vertical': this.orientation === 'vertical',
                 'horizontal': this.orientation === 'horizontal',
@@ -15,7 +15,9 @@ export class Divider {
                 'subtle': this.variant === 'subtle',
                 'soft': this.variant === 'soft',
                 'defined': this.variant === 'defined',
-                'dark-blue': this.variant === 'dark-blue',
+                'strong': this.variant === 'strong',
+                // `expressive` is the canonical name; `dark-blue` is kept as a deprecated alias.
+                'expressive': this.variant === 'expressive' || this.variant === 'dark-blue',
             } })));
     }
     static get is() { return "tds-divider"; }
@@ -56,15 +58,15 @@ export class Divider {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'discrete' | 'subtle' | 'soft' | 'defined' | 'dark-blue'",
-                    "resolved": "\"dark-blue\" | \"defined\" | \"discrete\" | \"soft\" | \"subtle\"",
+                    "original": "| 'discrete'\n    | 'subtle'\n    | 'soft'\n    | 'defined'\n    | 'strong'\n    | 'expressive'\n    | 'dark-blue'",
+                    "resolved": "\"dark-blue\" | \"defined\" | \"discrete\" | \"expressive\" | \"soft\" | \"strong\" | \"subtle\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variant of the Divider, subtle if not specified."
+                    "text": "Variant of the Divider, subtle if not specified. `dark-blue` is a deprecated alias for `expressive`."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -91,7 +91,7 @@ export class TdsDropdownOption {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: 'f2c0929d4a6d9e7df2259b80175ddde7bad15946' }, h("div", { key: '433562a99e20ec9b21cf1b07819c52e516081723', class: `dropdown-option
+        return (h(Host, { key: '88bcd691dff26a9efe61d415adcebcf477ea186f' }, h("div", { key: 'cbb8ecff8fd03efda48582017d90ef693d6bab8a', class: `dropdown-option
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}

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

@@ -679,9 +679,9 @@ export class TdsDropdown {
         else if (showPlaceholderButton) {
             buttonText = (_d = this.placeholder) !== null && _d !== void 0 ? _d : '';
         }
-        return (h(Host, { key: 'ef4fbe1a77a277a93bf542f67d423a6935755522', class: {
+        return (h(Host, { key: 'e4ac6da3a0038a9e1e514ff3ff71be5123a52172', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'e543abac115d7ab45c64776dada58b11d381ae8a', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '029261f9bd4f46039ed049ca7e08f38641edae05', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '658586c7af11675a4ec603542e545337bcad6006', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '0fda5315a4b8194f49b3d4918c6d16ab86bc4d54', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -740,7 +740,7 @@ export class TdsDropdown {
             }, class: {
                 'clear-icon': true,
                 'hide': !(this.multiselect && this.selectedOptions.length > 0),
-            }, name: "cross", size: "16px" }), 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: '67d82711bf2a53fdc77901c8a28bd83766c287d4', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+            }, name: "cross", size: "16px" }), 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: '55775308f3b2fbcdc71a4cbc39ec3843c0a2dd40', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 if (element)
                     this.dropdownList = element;
             }, class: {
@@ -752,11 +752,11 @@ export class TdsDropdown {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '36a3d6ec255decbf8233174eb29f996f141007d2', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '84a4033110327c8237edff3defdbc831fb56869b', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '0862c49887b92e56f4846831cb514784369715d0', id: helperId, class: {
+            } }, h("slot", { key: '05b9473bd9716d2f44741f54b9be9004f9564c78', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '5a9cc5f6ec01f4b2ed5299c94a39642cb3fe089e', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'c60847f8f9398024423a7f564827f2ac0a823250', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '107f29830769cb6928fec4d6cae9f050d47437d7', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '1a68494cf2ff91a120eb6fdab475829af5fa1cc9', 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

@@ -42,12 +42,12 @@ export class TdsFooterGroup {
     }
     render() {
         const hasTitleSlot = hasSlot('title', this.host);
-        return (h(Host, { key: '2605313d24ee6eb94a1cfa84854827fd1292d379', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: '5bf77ad82b1ed690e17fb9b4ab5b3110224b1392', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
+        return (h(Host, { key: 'f2ec2c2a6f178ee08f3e593f8e90df44d7c05571', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: '8f6173f576e1e62a2eb31196d97338b178374c22', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
             (this.isMobile ? (h("button", { onClick: () => {
                     this.open = !this.open;
-                }, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText, h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (h("div", { class: "footer-top-title" }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText))), h("nav", { key: '9191647967d238ce7d67bd1a6437ab282be60e7a', "aria-label": this.tdsListAriaLabel }, h("div", { key: '105c4960663852dc4a6e637e4b10fde5936d616e', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+                }, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText, h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (h("div", { class: "footer-top-title" }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText))), h("nav", { key: 'f81c86cb30921c35b2beef35a5c8b393baa16cd0', "aria-label": this.tdsListAriaLabel }, h("div", { key: '54de57b5f1dbe34ed5f2b44270d243d6c256250d', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '00546ee8a4e85a33e6f7696f50a59a3ecd53d80e' }))))));
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: 'cc5bddcab18b4bb6ea197f8998d2d517a152eb24' }))))));
     }
     static get is() { return "tds-footer-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@ export class TdsFooterItem {
         }
     }
     render() {
-        return (h(Host, { key: 'e422cb3d81d974bdefd2a5221aa5f9df693feccd', role: "listitem" }, h("div", { key: 'bcd21f30335d92da6dd577fdc2b6e7ae273a6390', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '861ffb44a8f9f2e4e75ad24b2bb640be9a712129' }))));
+        return (h(Host, { key: 'b64803b59361b3b32c5522440644aa5e2b218e82', role: "listitem" }, h("div", { key: '23bb2862dc13193a481b3e9b47dc4ca3da3f30ca', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '02b9c60093467b66513eaf9229284eb6d801772b' }))));
     }
     static get is() { return "tds-footer-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,9 +21,9 @@ export class TdsFooter {
         const usesCopyrightSlot = hasSlot('copyright', this.host);
         const brandName = this.getBrandName();
         const copyrightText = `Copyright © ${new Date().getFullYear()} ${brandName}`;
-        return (h(Host, { key: 'ac9e0121981c38b240ff4f96fbfc96fb59f51005', class: {
+        return (h(Host, { key: 'bb3cf6954333d1e4d72835a3a695cd4cdc1979ef', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            } }, h("footer", { key: 'd17bd41f9de0efd4449fba8fa48894a86f5a682b' }, usesTopSlot && h("slot", { key: '7f557c36ba1da44009f5be05ed353ec1d92ab88f', name: "top" }), h("div", { key: '5a10ae17a39a6eb707e036076a471f1dec135d32', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: 'c3142b6c2e5251a0ce9c49c66524c7d982e4a70c', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '29923cff3f6a1bf0be4ae67fe190eadfb74e59b2', name: "start" }), usesEndSlot && h("slot", { key: '6c9216a5c9ad01c94dbc00448a3b7e778dabc705', name: "end" }))), h("div", { key: '5c827108dc49ecd4c1d86aaad9de4b7b390009ad', class: "footer-main-bottom" }, h("small", { key: 'e9ed752b108bc7d9dd52154baa9f8cd9ed2c0039', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : copyrightText), h("div", { key: '7183d25ff8387a0a8691a02734d7748867960020', class: "brand" }, h("p", { key: '4d0848e1c716dd68c51e2499d16707b9c48b53ce' }, brandName)))))));
+            } }, h("footer", { key: 'fe35f844b8d6d3ea054484a166a773bd4385de9b' }, usesTopSlot && h("slot", { key: '252d9b9b78c66d0413bf7d28783945433eff0f90', name: "top" }), h("div", { key: 'b85968eb5d5f39deaec9f1f33b5895721c7e7e69', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: '85eacbe4aff483fe8f335fb70f6babad5d6f4bc3', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '5d27988e508196e9e100e8c07c277fa11ecfb3bd', name: "start" }), usesEndSlot && h("slot", { key: '7301c1d8c2764e95d18a449b4d9ba7623b79d1b1', name: "end" }))), h("div", { key: 'e6b85a517f22f96c2616aa7f287d08d8476e981d', class: "footer-main-bottom" }, h("small", { key: '4fdca9bb9d4f87132c87215dbf87920119ff6ca6', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : copyrightText), h("div", { key: '366bb82f1a297281aa98e18061a579067750190e', class: "brand" }, h("p", { key: '3ce3e391e021895e978f7f6d03decedba638e868' }, brandName)))))));
     }
     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: '065394c82cbfb0b40ee971c5cebc52bcfe85b526' }, h("div", { key: '7028fa75d5be79c1036abdb5bd4f0f6d94718061', class: "item" }, h("slot", { key: '79a30696b9001f8c3f2304d0b73b5f4caa6a9a56' }))));
+        return (h(Host, { key: '7d276a5315a38c87d28b5e5ba1f16bcd7c74c0db' }, h("div", { key: '44c9ee22549fa323794f0607e7746f395d5f8348', class: "item" }, h("slot", { key: '0ec7c2d329877968187fa63153eee2668fa2d057' }))));
     }
     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

@@ -8,7 +8,7 @@ export class TdsHeaderBrandSymbol {
         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 (h(Host, { key: 'fc99860c883e83bbf74918c166aef86ad4940b44' }, h("tds-header-item", { key: '064742d9efd8b8c313d70fee663be8455602def4' }, h("slot", { key: 'a7aabeccfd3a93e3dc29d2d0ee6bbefa2c94d236' }))));
+        return (h(Host, { key: 'ed6b8bfba56152cbb7051fb60acbca4cca27f6e7' }, h("tds-header-item", { key: 'a14750e9df11226763426bdf5dc9d1315de54ff8' }, h("slot", { key: 'f2a18a2f50c2e30e14596041aec9f21462f6bcef' }))));
     }
     static get is() { return "tds-header-brand-symbol"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,13 +48,13 @@ export class TdsHeaderDropdown {
         }
     }
     render() {
-        return (h(Host, { key: '1176c57c972add57be5c2529dfb6cb83d3bed22b' }, h("div", { key: '6ad3f10940083968fff1a4b9b01f66b1165329ba', class: {
+        return (h(Host, { key: '07a5f33cc48e8de33104d040e4b11d20fc21d833' }, h("div", { key: 'bf34bc17d9303efc3dcacfff22593395302a544f', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { key: '5c8024b943d585a85fc6a1c2f42f9e574729d79e', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'ed48b89c6eb04cf7f2685e2f69f7eea37822e8f9', ref: (el) => {
+            } }, h("tds-header-item", { key: 'ce9e05d3da8d04e38b6a595a789f8de1218fc35c', class: "button", active: this.open, selected: this.selected }, h("button", { key: '09805ba1a0d1e77384fc99d1fe9f5d557c8183a8', ref: (el) => {
                 this.buttonEl = el;
             }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
                 this.toggleDropdown();
-            }, "aria-label": this.tdsAriaLabel }, h("slot", { key: '3a79e52d868cd2a12ee5a6c46c574b596e5c257f', name: "icon" }), this.label, h("slot", { key: '6490c20d77794e6bda911a28eb01bba6539a6946', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '4ccd9df2499f81a3790fd207686c9d763950ca18', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '67a72bb46b5d87424dcd883e770a5f0a06d09edd', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            }, "aria-label": this.tdsAriaLabel }, h("slot", { key: '889cdfa5614f97ad80721f0f8559400751c7a784', name: "icon" }), this.label, h("slot", { key: '5b0a7df7f0031279c4faf3ab9bd6062ef4b32099', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '19ccecc579b846372fbd7572c9595ab573ac4d27', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: 'c49cae294b06fdcfb57b4d2702a7abac53a45f39', 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

@@ -74,7 +74,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: '87736a915ab274f1fcd30e6eb3ac2b594c323ba9' }, attributes), h("slot", { key: '61a2332a3da99fa2b0fa51a54547e9d5b66fa804' })));
+        return (h(Host, Object.assign({ key: 'e21067b3bfad5ad96a7b582e0c0fd04c412674f8' }, attributes), h("slot", { key: '7524f7fac3435331c3a8b828958370395e5079de' })));
     }
     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

@@ -10,10 +10,10 @@ export class TdsHeaderDropdownListItem {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: '4912bf638b28faf67530146becb90977fa3eff8c' }, h("div", { key: '6c30529e045b7568a7409505828bf04c94830b0c', class: {
+        return (h(Host, { key: '19790b4fe30796b09334fd1c6e81412b56e87e10' }, h("div", { key: '0d7c4728b5e80244fc8cd4047f8f27cea6317348', class: {
                 'component': true,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '34935ba9bd6807d2c7703d5320b837e4dd837240' }))));
+            } }, h("slot", { key: 'd62bc8b39511d3315267b8b624ac22329a4cb10b' }))));
     }
     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

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsHeaderDropdownListLgUser {
     render() {
-        return (h(Host, { key: '4a9b8a5924f026c20408e7cc32dc98ee9fd64ad1', role: "listitem" }, h("div", { key: '3774339f0ca00bc041c51ad966da271dbe38fbb4', class: "user-box" }, this.imgUrl && h("img", { key: 'f37f319f602d7418229f56f112d57e0e1346d043', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: 'a45bc8a008a0be4596cbcf0937c56380ea99bb80', name: "thumbanil" }), h("div", { key: 'a1f5e157d1ac7cee13abf1a85422950988f3b8ac', class: "user-content" }, h("div", { key: '6e2106c0868094ac54c0e2a54de07ff43dc9f979', class: "header" }, this.header, h("slot", { key: '440311184e59aff2fc3425a1779d6b04de98fdd8', name: "header" })), h("div", { key: '85c3966e778010328e6d137573a83245c1077ea8', class: "subheader" }, this.subheader, h("slot", { key: 'bbd9b87dfa675761e0bc6005431e1cb1e8867013', name: "subheader" }))))));
+        return (h(Host, { key: 'e2c427428c2da9d8af6818a94e01a56f9836308a', role: "listitem" }, h("div", { key: '590e7b4d1ee33b96d9d73d1b9444cbdb34d5f6a2', class: "user-box" }, this.imgUrl && h("img", { key: 'd537fb083c80e5ef8331f6d1d09daf717f52adab', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '4f130bbebe72b5b9b051ca47a19c443f7db94b9c', name: "thumbanil" }), h("div", { key: 'cc4307735c599a57d99d5bd7eb81f11e0e53b875', class: "user-content" }, h("div", { key: '105a4112b66410d15254ea873d44bd1ea54a7ed1', class: "header" }, this.header, h("slot", { key: '1d54caa5d0fc812742a92aee87d47ab2d74f357e', name: "header" })), h("div", { key: '13b0df9618b2e294f6ca785542a85f2035dfa4ed', class: "subheader" }, this.subheader, h("slot", { key: '98632491ca20b075a2fdad77ffa58f3b8dedb469', 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: 'ae06ee98e53076108ce5d994fea278cfcf7c866f' }, h("tds-header-item", { key: 'cfcc247e196267d28be0754334f9ad0970aad461' }, h("button", Object.assign({ key: '5daf590949aaa29674b59438452286c88f1bd9e5' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '4f9f010a9a1b79278887822e2d3c025844f6a8c3', class: "icon", name: "burger", size: "20px" })))));
+        return (h(Host, { key: '178a53546dd18ffa3956c8a160d2eae139ed5009' }, h("tds-header-item", { key: '1de91285a9a004c2c0330a926132875b333d7fd4' }, h("button", Object.assign({ key: '6d487e1dd84c41342a416805048f14c9dc98ec02' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '9636dd72caea7424b9067eaf616f1c7fbe0ef4cb', 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

@@ -81,10 +81,10 @@ export class TdsHeaderItem {
         }
     }
     render() {
-        return (h(Host, { key: '286237f750f53f924d8667cc7d84fe8d68e483cd' }, h("tds-core-header-item", { key: 'f43048e3d2deb7bfc05e99a0834b8d85fb576cec', class: {
+        return (h(Host, { key: '72263f1d62c9fcbbd243259ff2e74271886d27f3' }, h("tds-core-header-item", { key: 'd80b949b58f5d876b64b8bb2338cf4ebcf733a94', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '010bcd724fcfa67974248af3fdde12fa2102f099' }))));
+            } }, h("slot", { key: 'bd98965490e993ea08fa0fc2ceebe5539889ef34' }))));
     }
     static get is() { return "tds-header-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,11 +50,11 @@ export class TdsHeaderLauncher {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: '687811b90323d71d1b2fcdb95a0c5a1cc798ab63' }, h("div", { key: 'ff389690f36fa41b4f09911720a5b842463880ea', class: {
+        return (h(Host, { key: 'a2ad819f2acda892b6e45c62d43128ac8c2e707c' }, h("div", { key: 'd9831f4e21f8a75069f6719e6f282ec8728368d3', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: '5ad9190ea862179eb74088a9597cbac0f2cd76ee' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: 'c22a1514bcc73d508100cabff07422009f775ffa', 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: '19abe36290e7a2fd8fc15b4aea5afeac9c957f36' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: 'f39cf5999c47ea1c6fc9371763ba08fd01c2b296', 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

@@ -9,7 +9,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: 'abed3be3bbeecc3a510cfa75a0dae9ed06196d54' }, h("tds-header-item", { key: '39eee800f052f252a0345243eaa637cf7b41ea3d', active: this.active }, h("button", Object.assign({ key: '8d49dfbe22856a2c56d0ae3949f7fb9e36804bc1' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '028ffd59098f06fee68a74c670727c3664b711b6', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
+        return (h(Host, { key: 'c5ccce94f4e20551f6a9e81c7bef89435252216e' }, h("tds-header-item", { key: 'f8e47ffaff504eb8544ffe3b995006fcdc66b4c5', active: this.active }, h("button", Object.assign({ key: '74dff07caf204bffd577f13641ca01c1d52a3d7a' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '27461f8d04863c17c1cc78d450b5f2edd01446ca', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
     }
     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

@@ -25,7 +25,7 @@ export class TdsHeaderLauncherGrid {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, { key: '63be73b3bef81a93dc689754e6f1ecb28d36a29b' }, h("div", Object.assign({ key: 'a5695a2b67adbc9c12165a7440091bd4cc429205' }, listAttributes), h("slot", { key: '626a95ca4adcde69296221782d35f5401d41b7aa' }))));
+        return (h(Host, { key: '1e0acaabe6332c250d83f225f4e789bddfd9460e' }, h("div", Object.assign({ key: 'f28d54a429125d7729ff1dd7c05d4485699bdfbf' }, listAttributes), h("slot", { key: 'f4d62131c56ce61935af17d698919cfea268b728' }))));
     }
     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: 'c7faa27ec16322e23b32c2f48d6452acba9f34df', role: "listitem" }, h("slot", { key: 'dc1fff1b9c536df2d88b5e92a83634d1e3bca384' })));
+        return (h(Host, { key: '8401dcbe8027523446729e7a20468558fe1dc30e', role: "listitem" }, h("slot", { key: '7ff767c1134e1997302caee22ec3bb6a584b7657' })));
     }
     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: '080260b232b8c42511a4f78c5c38db166d4febe3' }, h("h3", { key: 'b147d026dfb9ac70f4abc7935b469cba32dbcbaa', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '0df3a062aa38fa73e875ae8c178c9b52b4b6d063' }))));
+        return (h(Host, { key: '9c4d34bdb39f897148aa592b08068d01339fa470' }, h("h3", { key: '632cf006f9bba4fbd297baddaf2cd22bd8cd01d7', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '4eccacaeda37002d80535ba9702e86f5b15343b1' }))));
     }
     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: 'eca4ad0a5442d8f9a4fa6f2f2d8edeb582b036e1' }, h("tds-header-dropdown-list", { key: '99b5360adb94d53bcfada6dae88daa3b5570ac5d', size: "lg" }, h("slot", { key: 'd2ddc4f12789ceff5b74ab8dbca354603358d03b' }))));
+        return (h(Host, { key: '8579cab399825ea35430ea1712380e945175be2b' }, h("tds-header-dropdown-list", { key: 'e9f49767344431b298f4937eae6793a5a1b4adbc', size: "lg" }, h("slot", { key: 'b147f482c4d6d868880f8fd349f7ad49acf60d70' }))));
     }
     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: '497d9c1aaf805a5bba06d860f02002eeead6032c' }, h("tds-header-dropdown-list-item", { key: '74b6b75f5c7759bc226ba7150f9fb5ea23bcfc66', size: "lg" }, h("slot", { key: '00d8917ab3c70f6d0ca27231572c4cdfa47cf07e' }))));
+        return (h(Host, { key: '2e240e8593d50efd91aac58fb247165b0777cde9' }, h("tds-header-dropdown-list-item", { key: '67d7542329f469f10ebf4fe53686892b6e79d203', size: "lg" }, h("slot", { key: 'bab33af901a8a557fd6598a0f155c5d1b4da74f0' }))));
     }
     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: 'd2480baadcaceab27fb6598d2c781bc74e75df75' }, h("h3", { key: 'e73adadc71723ad00b5f1f138a2fd5d73fdcf8af', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: '338bd4e60f844e7c399bd4a8d4b3325fbf6f8d3e' }))));
+        return (h(Host, { key: '7ee07c3a5f983e22d6e9df4b8553fc78155d3da6' }, h("h3", { key: '19c621911c3b46a7db33a33b0a5ed9efe79df36c', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: '99450d6b7c93755b433736e0b4414fc8c4995df1' }))));
     }
     static get is() { return "tds-header-launcher-list-title"; }
     static get originalStyleUrls() {