@scania/tegel 1.56.0 → 1.58.0-memory-fix-beta.0

package/dist/collection/components/checkbox/checkbox.css

@@ -1,3 +1,4 @@
+/* Typography Usage mixins */
 :host {
   align-items: center;
   position: relative;
@@ -6,7 +7,12 @@
 
 .tds-checkbox {
   box-sizing: border-box;
-  font: var(--tds-detail-02);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   letter-spacing: var(--tds-detail-02-ls);
   color: var(--tds-checkbox-text);
   display: flex;
@@ -21,7 +27,6 @@
   outline: none;
   margin: 0;
   border: 0;
-  border-radius: 2px;
   width: 24px;
   height: 24px;
   position: relative;
@@ -30,7 +35,7 @@
   align-self: flex-start;
 }
 .tds-checkbox input[type=checkbox] + label {
-  color: var(--tds-checkbox-color);
+  color: var(--tds-checkbox-text);
   padding-left: var(--tds-spacing-element-4);
   padding-top: var(--tds-spacing-element-4);
   padding-bottom: var(--tds-spacing-element-4);
@@ -50,84 +55,91 @@
   content: "";
   position: absolute;
   box-sizing: border-box;
-}
-.tds-checkbox input[type=checkbox]::before {
-  width: 20px;
-  height: 20px;
-  left: 2px;
-  top: 2px;
-  border-radius: 4px;
-}
-.tds-checkbox input[type=checkbox]::after {
-  border: 1px solid var(--tds-checkbox-interaction-01);
-  background-color: var(--tds-checkbox-interaction-02);
   width: 16px;
   height: 16px;
   left: 4px;
   top: 4px;
-  border-radius: 2px;
+}
+.tds-checkbox input[type=checkbox]::before {
+  border: 1px solid var(--tds-checkbox-border);
+  background-color: var(--tds-checkbox-background);
+  border-radius: var(--tds-checkbox-border-radius);
+  box-shadow: 0 0 0 2px var(--tds-checkbox-indicator);
+  transition: box-shadow 0.2s ease-in-out;
+}
+.tds-checkbox input[type=checkbox]::after {
+  background-color: var(--tds-checkbox-icon-selected);
+  mask: var(--tds-checkbox-icon-mask) no-repeat center;
+  -webkit-mask: var(--tds-checkbox-icon-mask) no-repeat center;
+  opacity: 0;
+  z-index: 1;
 }
 .tds-checkbox input[type=checkbox]:hover::before {
+  border-color: var(--tds-checkbox-border-hover);
   background-color: var(--tds-checkbox-background-hover);
-  opacity: var(--tds-checkbox-background-opacity-hover);
+  box-shadow: 0 0 0 2px var(--tds-checkbox-indicator-hover);
 }
 .tds-checkbox input[type=checkbox]:focus-visible::before {
-  background-color: var(--tds-checkbox-background-focus);
-  opacity: var(--tds-checkbox-background-opacity-focus);
-  transition: opacity 0.2s ease-in-out;
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
+  border-radius: var(--tds-checkbox-focus-ring-radius);
 }
-.tds-checkbox input[type=checkbox]:disabled, .tds-checkbox input[type=checkbox].disabled {
-  cursor: not-allowed;
-}
-.tds-checkbox input[type=checkbox]:disabled::after, .tds-checkbox input[type=checkbox].disabled::after {
-  border-color: var(--tds-checkbox-border-color-disabled-after);
-}
-.tds-checkbox input[type=checkbox]:disabled + label, .tds-checkbox input[type=checkbox].disabled + label {
-  color: var(--tds-checkbox-disabled);
-  cursor: not-allowed;
-}
-.tds-checkbox input[type=checkbox]:disabled:hover::before, .tds-checkbox input[type=checkbox].disabled:hover::before {
-  display: none;
+.tds-checkbox input[type=checkbox]:checked::before {
+  border-color: var(--tds-checkbox-border-selected);
+  background-color: var(--tds-checkbox-background-selected);
 }
 .tds-checkbox input[type=checkbox]:checked::after {
-  background-image: var(--tds-checkbox-background-img);
-  background-color: var(--tds-checkbox-interaction-01);
-  background-repeat: no-repeat;
-  background-position: center;
+  background-color: var(--tds-checkbox-icon-selected);
+  opacity: 1;
 }
 .tds-checkbox input[type=checkbox]:checked:hover::before {
-  background-color: var(--tds-checkbox-background-hover);
-  opacity: var(--tds-checkbox-background-opacity-hover);
+  border-color: var(--tds-checkbox-border-selected-hover);
+  background-color: var(--tds-checkbox-background-selected-hover);
 }
-.tds-checkbox input[type=checkbox]:checked:disabled:hover::before, .tds-checkbox input[type=checkbox]:checked:disabled::before, .tds-checkbox input[type=checkbox]:checked.disabled:hover::before, .tds-checkbox input[type=checkbox]:checked.disabled::before {
-  display: block;
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-  border: 1px solid #b0b7c4;
+.tds-checkbox input[type=checkbox]:checked:hover::after {
+  background-color: var(--tds-checkbox-icon-selected-hover);
 }
-.tds-checkbox input[type=checkbox]:checked:disabled::after, .tds-checkbox input[type=checkbox]:checked.disabled::after {
-  background-image: var(--tds-checkbox-background-img-disabled);
-  background-color: var(--tds-checkbox-interaction-02);
-  color: var(--tds-checkbox-color-disabled-after);
+.tds-checkbox input[type=checkbox]:indeterminate::before {
+  border-color: var(--tds-checkbox-border-indeterminate);
+  background-color: var(--tds-checkbox-background-indeterminate);
 }
 .tds-checkbox input[type=checkbox]:indeterminate::after {
-  background-image: var(--tds-checkbox-background-img-indeterminate);
-  background-color: var(--tds-checkbox-interaction-01);
-  background-repeat: no-repeat;
-  background-position: center;
+  background-color: var(--tds-checkbox-icon-indeterminate);
+  mask: var(--tds-checkbox-icon-mask-indeterminate) no-repeat center;
+  -webkit-mask: var(--tds-checkbox-icon-mask-indeterminate) no-repeat center;
+  opacity: 1;
 }
-.tds-checkbox input[type=checkbox]:indeterminate:disabled:hover::before, .tds-checkbox input[type=checkbox]:indeterminate:disabled::before {
-  display: block;
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-  border: 1px solid #b0b7c4;
+.tds-checkbox input[type=checkbox]:indeterminate:hover::before {
+  border-color: var(--tds-checkbox-border-indeterminate-hover);
+  background-color: var(--tds-checkbox-background-indeterminate-hover);
+}
+.tds-checkbox input[type=checkbox]:indeterminate:hover::after {
+  background-color: var(--tds-checkbox-icon-indeterminate-hover);
 }
-.tds-checkbox input[type=checkbox]:indeterminate:disabled::after {
-  background-image: var(--tds-checkbox-background-img-indeterminate-disabled);
-  background-color: var(--tds-checkbox-interaction-02);
-  color: var(--tds-checkbox-color-disabled-after);
+.tds-checkbox input[type=checkbox]:hover + label {
+  color: var(--tds-checkbox-text-hover);
+}
+.tds-checkbox input[type=checkbox]:disabled, .tds-checkbox input[type=checkbox].disabled {
+  cursor: not-allowed;
+  opacity: var(--tds-checkbox-opacity-disabled);
+}
+.tds-checkbox input[type=checkbox]:disabled:hover::before, .tds-checkbox input[type=checkbox].disabled:hover::before {
+  border-color: var(--tds-checkbox-border);
+  background-color: var(--tds-checkbox-background);
+  box-shadow: none;
+}
+.tds-checkbox input[type=checkbox]:disabled:checked:hover::before, .tds-checkbox input[type=checkbox].disabled:checked:hover::before {
+  border-color: var(--tds-checkbox-border-selected);
+  background-color: var(--tds-checkbox-background-selected);
+}
+.tds-checkbox input[type=checkbox]:disabled:indeterminate:hover::before, .tds-checkbox input[type=checkbox].disabled:indeterminate:hover::before {
+  border-color: var(--tds-checkbox-border-indeterminate);
+  background-color: var(--tds-checkbox-background-indeterminate);
+}
+.tds-checkbox input[type=checkbox]:disabled + label, .tds-checkbox input[type=checkbox].disabled + label {
+  color: var(--tds-checkbox-text);
+  opacity: var(--tds-checkbox-opacity-disabled);
+  cursor: not-allowed;
 }

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"; }