@scania/tegel 1.4.0 → 1.6.0

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

@@ -36,6 +36,10 @@ export class TdsDatetime {
         this.helper = '';
         this.focusInput = undefined;
     }
+    /** Method that sets the value of the datetime element */
+    async setValue(newValue) {
+        this.value = newValue;
+    }
     componentWillLoad() {
         if (this.defaultValue !== 'none') {
             this.value = this.getDefaultValue();
@@ -76,7 +80,7 @@ export class TdsDatetime {
         if (this.size === 'sm') {
             className += `${className}-sm`;
         }
-        return (h("div", { class: `
+        return (h("div", { key: 'c1898a8f2f246873fd96d0341ec586d383cb82cc', class: `
         ${this.noMinWidth ? 'tds-form-datetime-nomin' : ''}
         ${this.focusInput ? 'tds-form-datetime tds-datetime-focus' : ' tds-form-datetime'}
         ${this.value.length > 0 ? 'tds-datetime-data' : ''}
@@ -86,7 +90,7 @@ export class TdsDatetime {
         ${this.state === 'error' || this.state === 'success'
                 ? `tds-form-datetime-${this.state}`
                 : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { class: "tds-datetime-input-container" }, h("input", { ref: (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, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("tds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("tds-icon", { size: "20px", name: "clock" }))), h("div", { class: "tds-datetime-bar" })), this.helper && (h("div", { class: "tds-datetime-helper" }, h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '944fd7e9cc22e00963871f3b5c0beea9a79b5178', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'a5031fa204ba8243397940218b8441075c1a1956', class: "tds-datetime-input-container" }, h("input", { key: '3f6450962c8c36266a5850e4301e1cbeebfdcf6a', ref: (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, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { key: '96167c82dfe4cc3fd190022c221bb00276a437fe', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: 'b4f224e2ea3131118c6877aa882cd02417ef7ebc', size: "20px", name: "calendar" })), h("div", { key: '1dbd2e11a29bc4d75a98072d4f988c66423fa4e2', class: "datetime-icon icon-time" }, h("tds-icon", { key: 'cfea2bb492ee6d6531041139bda0fabe48135932', size: "20px", name: "clock" }))), h("div", { key: 'c336d198941fde234202ee75a87464517178bf69', class: "tds-datetime-bar" })), this.helper && (h("div", { class: "tds-datetime-helper" }, h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
     }
     static get is() { return "tds-datetime"; }
     static get encapsulation() { return "scoped"; }
@@ -114,7 +118,7 @@ export class TdsDatetime {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Sets input type"
+                    "text": "Sets an input type"
                 },
                 "attribute": "type",
                 "reflect": true,
@@ -122,7 +126,7 @@ export class TdsDatetime {
             },
             "value": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -416,6 +420,31 @@ export class TdsDatetime {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "setValue": {
+                "complexType": {
+                    "signature": "(newValue: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "newValue",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method that sets the value of the datetime element",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get listeners() {
         return [{
                 "name": "focus",

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

@@ -4,7 +4,7 @@ export class Divider {
         this.orientation = 'horizontal';
     }
     render() {
-        return (h(Host, { role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { class: `divider ${this.orientation}` })));
+        return (h(Host, { key: 'eb45210dcf3ac030988c99afe5c66573d111ffa4', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: 'c68d6b7ab37c04c93d261286a09189e9843ef1ab', class: `divider ${this.orientation}` })));
     }
     static get is() { return "tds-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,7 +62,7 @@ export class TdsDropdownOption {
         this.selected = selected;
     }
     render() {
-        return (h(Host, { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { class: `dropdown-option 
+        return (h(Host, { key: '1f5f9d34955f65caa0ba5ec261368fa20277fc8f', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'ccab6344954996ec23558a2e39826008873d2827', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}

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

@@ -75,6 +75,7 @@
 }
 :host .filter.disabled {
   color: var(--tds-dropdown-disabled-color);
+  border-bottom: 1px solid transparent;
 }
 :host .filter .value-wrapper {
   display: flex;

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

@@ -318,7 +318,7 @@ export class TdsDropdown {
     render() {
         var _a, _b, _c, _d;
         appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
-        return (h(Host, { role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        return (h(Host, { key: '06fa1683eca585c19d2724d5743b29d0fcc8c6fe', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '19927d524a22726438add8cf4d8511c80a16f2f5', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -360,11 +360,11 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { class: `${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { ref: (element) => (this.dropdownList = element), class: `dropdown-list
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { class: `${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '7c694f450e7aa381b0a44ccc048c98e1f1c634d9', ref: (element) => (this.dropdownList = element), class: `dropdown-list
             ${this.size}
             ${this.open ? 'open' : 'closed'}
             ${this.getOpenDirection()}
-            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", null), this.filterResult === 0 && this.noResultText !== '' && (h("div", { class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { name: "error", size: "16px" }), this.helper))));
+            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: '68b15927fe222b77580aade9fce8ccd31fe91d62' }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

@@ -16,7 +16,7 @@ export class TdsFooter {
         const usesStartSlot = hasSlot('start', this.host);
         const usesEndSlot = hasSlot('end', this.host);
         const usesCopyrightSlot = hasSlot('copyright', this.host);
-        return (h(Host, { class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", null, usesTopSlot && h("slot", { name: "top" }), h("div", { class: "footer-main" }, h("div", { class: "footer-main-top" }, usesStartSlot && h("slot", { name: "start" }), usesEndSlot && h("slot", { name: "end" })), h("div", { class: "footer-main-bottom" }, h("small", { class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { class: "brand" }, h("p", null, "Scania")))))));
+        return (h(Host, { key: '0f916c49a2a4c3904ebcf5bad2593c5a4928880a', class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", { key: '44e23c34001ff656ea572ca69a536adfc1b620f7' }, usesTopSlot && h("slot", { name: "top" }), h("div", { key: 'f20390b2f8dae54532e29e39c58b27ef6fe5cb6a', class: "footer-main" }, h("div", { key: '5fbbaabdc8e023447ba8eb35e7cfadf2c959e5b0', class: "footer-main-top" }, usesStartSlot && h("slot", { name: "start" }), usesEndSlot && h("slot", { name: "end" })), h("div", { key: '6276e651cc7cdc3fd9cb48b4c868b89c67c1ad4e', class: "footer-main-bottom" }, h("small", { key: '0bcac7160e866a43faca21ee3389e07042231d0b', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: 'bff874e1ff2898071a5ff31b1ca861848836ddfd', class: "brand" }, h("p", { key: '0dcec703e1207bef407fe909db64d6f1df7d5dd2' }, "Scania")))))));
     }
     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, null, h("div", { class: "item" }, h("slot", null))));
+        return (h(Host, { key: '5518d7a3359d48ac323fa1a87e9c014911deb806' }, h("div", { key: '9d6ae88a87fdfecf92df14095b8bd5b844a1ff41', class: "item" }, h("slot", { key: 'cd3045dc6b892cb19c8d489e341897ff298be743' }))));
     }
     static get is() { return "tds-core-header-item"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -25,13 +25,13 @@ export class TdsHeaderDropdown {
         this.open = !this.open;
     }
     render() {
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { key: 'cabebe721a79127441bddd0aa8ad1d9ff2ac9453' }, h("div", { key: 'f97c7f95f5c9a6382c3d3d48854b3cc9b2f51a8c', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { class: "button", active: this.open, selected: this.selected }, h("button", { ref: (el) => {
+            } }, h("tds-header-item", { key: '070b482e30884f2cf096472966d19232e97def8b', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'c29ad0c7309b3680b909cd911ad947bd0d60cd3c', ref: (el) => {
                 this.buttonEl = el;
             }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
                 this.toggleDropdown();
-            } }, h("slot", { name: "icon" }), this.label, h("slot", { name: "label" }), !this.noDropdownIcon && (h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("slot", { key: 'a955b0d40c1c3619e158b727ae70e266fe93a69c', name: "icon" }), this.label, h("slot", { key: '27195b2da32bbdf9f970c3b69355e3cc7efda11d', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {

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

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

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

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

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

@@ -11,7 +11,7 @@ export class TdsHeaderDropdownListLgUser {
         this.subheader = undefined;
     }
     render() {
-        return (h(Host, { role: "listitem" }, h("div", { class: "user-box" }, this.imgUrl && h("img", { src: this.imgUrl, alt: this.imgAlt }), h("slot", { name: "thumbanil" }), h("div", { class: "user-content" }, h("div", { class: "header" }, this.header, h("slot", { name: "header" })), h("div", { class: "subheader" }, this.subheader, h("slot", { name: "subheader" }))))));
+        return (h(Host, { key: '68abd3a9a18eb07df40f2f6b2b36059ab20a4108', role: "listitem" }, h("div", { key: '4c0547202b1bd79abf176b23367b09d25d88d575', class: "user-box" }, this.imgUrl && h("img", { src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '37c0fd2aeaf2249a4209c96ca84dd2e5a78dfc5e', name: "thumbanil" }), h("div", { key: 'feb5534d000c66c69d6a589428c7ea875932c974', class: "user-content" }, h("div", { key: 'fe6c84e6b39f3b5da49700dca2a84190e2edfcff', class: "header" }, this.header, h("slot", { key: 'cbab5a0251b8181b0ad9012d5d310da2d730a37f', name: "header" })), h("div", { key: '0992f9330ec9000a04033fba561b04fb7d4f01db', class: "subheader" }, this.subheader, h("slot", { key: 'f884e86e6e77ee67430b3c6e7696ba48a0b0fa13', name: "subheader" }))))));
     }
     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, null, h("tds-header-item", null, h("button", Object.assign({}, inheritedButtonProps), h("tds-icon", { class: "icon", name: "burger", size: "20px" })))));
+        return (h(Host, { key: '6a4450ddfc7c76a76440a4416ee3b33615ded3a4' }, h("tds-header-item", { key: '3d24dbfb10bd9fae5ed81e9d47ce21234e15dee9' }, h("button", Object.assign({ key: '3187d9baa8f21e35221b3f26f802cd5e20f7f898' }, inheritedButtonProps), h("tds-icon", { key: '6cdd0ccb1c0142500709e81ef3474109c38a6ca4', class: "icon", name: "burger", size: "20px" })))));
     }
     static get is() { return "tds-header-hamburger"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -36,11 +36,11 @@ export class TdsHeaderLauncher {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { key: '3429e2f83f0eb01bd6e655b6fe1d8a77784b4f34' }, h("div", { key: '6c8522b99c3f7de3fd3f665366362c1035b9d9a2', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({}, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("tds-header-launcher-button", Object.assign({ key: '926507bc5d95971a1172de1a1cefd89d47959546' }, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {

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

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

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

@@ -28,7 +28,7 @@ export class TdsHeaderLauncherGrid {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, null, h("div", Object.assign({}, listAttributes), h("slot", null))));
+        return (h(Host, { key: 'f61e4a271a143bcdbfe0c56ae8d687c00e7e23dc' }, h("div", Object.assign({ key: '4403ceb73e4410ed6d5f33cfd91bcdbe6cace263' }, listAttributes), h("slot", { key: 'f43fea428cadb07fbdcc5247cdcc4bf2f3b0652c' }))));
     }
     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, { role: "listitem" }, h("slot", null)));
+        return (h(Host, { key: 'b94d764c336075984849b35aa22cd8a270c61e77', role: "listitem" }, h("slot", { key: '14bbf3162f5fc95b4bd78281aca311a1ec05c99e' })));
     }
     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, null, h("h3", { class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", null))));
+        return (h(Host, { key: 'dd82b8c7e9e9f512f8d6bb4ae457b2090881a8cd' }, h("h3", { key: 'e5e91128de40042c6815bf660ed585084080e162', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '1b33d0e496bd9128eb15dc3807432284f768c52c' }))));
     }
     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, null, h("tds-header-dropdown-list", { size: "lg" }, h("slot", null))));
+        return (h(Host, { key: 'b1ad90db7f35af9825ef618c2c0d4af25df7cc2f' }, h("tds-header-dropdown-list", { key: '2f806e88239f3c48ba85e29296b1ae9a53ce8ad3', size: "lg" }, h("slot", { key: 'd354701c662c7b4b275080ebcca60c98d896f9e3' }))));
     }
     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, null, h("tds-header-dropdown-list-item", { size: "lg" }, h("slot", null))));
+        return (h(Host, { key: 'c1e87c33679155835692bd68076c761af07378a1' }, h("tds-header-dropdown-list-item", { key: '9ec4c6296501d090f2f4e9c53620f3b9251e67cf', size: "lg" }, h("slot", { key: '4d70e13bc28548be60791d813dcb6aae2f17aec4' }))));
     }
     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, null, h("h3", { class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", null))));
+        return (h(Host, { key: 'ab394e57d5459b16a53d79d05cb95d47dbc8d8f5' }, h("h3", { key: '61cb8ec5ea1de7f79a1ad29ba69b52668f89a91d', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: 'cdeab2d430e98b1e9314b06ff78478b43d6ed47b' }))));
     }
     static get is() { return "tds-header-launcher-list-title"; }
     static get originalStyleUrls() {

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

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

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

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

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

@@ -4,14 +4,15 @@ import { iconsCollection } from "./iconsArray";
 export class Icon {
     constructor() {
         this.setIcons = () => this.arrayOfIcons.map((element) => {
-            var _a;
+            var _a, _b;
             if (element.name === this.name) {
-                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, h("title", null, (_a = this.svgTitle) !== null && _a !== void 0 ? _a : `${element.name} icon`), h("path", { fill: "currentColor", d: element.definition })));
+                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": (_a = this.svgTitle) !== null && _a !== void 0 ? _a : `${element.name} icon`, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, h("title", null, (_b = this.svgTitle) !== null && _b !== void 0 ? _b : `${element.name} icon`), this.svgDescription && h("desc", null, this.svgDescription), h("path", { fill: "currentColor", d: element.definition })));
             }
         });
         this.name = 'truck';
         this.size = '16px';
         this.svgTitle = undefined;
+        this.svgDescription = undefined;
         this.icons_object = iconsCollection;
         this.arrayOfIcons = [];
     }
@@ -28,7 +29,7 @@ export class Icon {
         this.arrayOfIcons = [...this.arrayOfIcons];
     }
     render() {
-        return h(Host, null, this.setIcons());
+        return h(Host, { key: '100ba727121437de04523b24bc03a48e100e5109' }, this.setIcons());
     }
     static get is() { return "tds-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -56,7 +57,7 @@ export class Icon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Pass a name of the icon. For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library"
+                    "text": "Pass the name of the icon.\nFor icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library"
                 },
                 "attribute": "name",
                 "reflect": true,
@@ -74,7 +75,7 @@ export class Icon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Pass a size of icon as a string, for example: 32px, 1rem, 4em..."
+                    "text": "Pass a size of icon as a string, for example, 32px, 1rem, 4em..."
                 },
                 "attribute": "size",
                 "reflect": true,
@@ -89,13 +90,30 @@ export class Icon {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Override the default title for the svg."
                 },
                 "attribute": "svg-title",
                 "reflect": false
+            },
+            "svgDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set description for the svg."
+                },
+                "attribute": "svg-description",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/link/link.js

@@ -11,10 +11,10 @@ export class TdsLink {
         this.host.children[0].classList.add('tds-link-component');
     }
     render() {
-        return (h("span", { class: `        
+        return (h("span", { key: 'd2c5ae52f9f44ccebd4a43d1d251ce60646a6998', class: `        
           ${this.disabled ? 'disabled' : ''}
           ${!this.underline ? 'no-underline' : ''}
-          ` }, h("slot", null)));
+          ` }, h("slot", { key: 'b0eeaaa6ad2fb70ae7f613883dc0f43d9ebe662a' })));
     }
     static get is() { return "tds-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message/message.js

@@ -25,10 +25,10 @@ export class TdsMessage {
         this.minimal = false;
     }
     render() {
-        return (h(Host, null, h("div", { class: `
+        return (h(Host, { key: '190cc07b4486efe36e0baccfafbf5819a80a741c' }, h("div", { key: '5d60a6cfd10e9329a1270afef97a4267a86cc08f', class: `
         wrapper ${this.variant}
         ${this.minimal ? 'minimal' : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, this.header && h("div", { class: "header" }, this.header), !this.minimal && (h("div", { class: "extended-message" }, h("slot", null)))))));
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { key: '9dda54ccabbacecbee9f3268d6657696efbea827', class: `content` }, this.header && h("div", { class: "header" }, this.header), !this.minimal && (h("div", { class: "extended-message" }, h("slot", null)))))));
     }
     static get is() { return "tds-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.css

@@ -97,7 +97,7 @@
 }
 @media (min-width: 672px) {
   .tds-modal-xs {
-    width: 75%;
+    width: 50%;
   }
   .tds-modal-sm {
     width: 62.5%;

package/dist/collection/components/modal/modal.js

@@ -86,7 +86,7 @@ export class TdsModal {
     render() {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { class: `${this.isShown ? 'show' : 'hide'}`, onClick: (event) => this.handleOverlayClick(event) }, h("div", { class: "tds-modal-backdrop" }), h("div", { class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { class: "header" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), h("button", { class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { name: "cross", size: "20px" }))), h("div", { class: "body" }, h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: "actions" }))));
+        return (h(Host, { key: 'd3e0d4d6611134126de12944c238e96acce8dc58', class: `${this.isShown ? 'show' : 'hide'}`, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: 'c3b155f003be30978deefd302a0db9f20c319367', class: "tds-modal-backdrop" }), h("div", { key: '4606f040cd26d18b6cea7a1ef3af036b917a622c', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '5f281f96937c5459ef6de75a240769f95a607739', class: "header" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), h("button", { key: 'd3cd87c242e5974886591241a8895780a0ee89a2', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: 'bc9cc1be58288d800e36e66b53033f1991322cce', name: "cross", size: "20px" }))), h("div", { key: 'd30c37f23034e17dd4bb6a1a824f06147ba7982d', class: "body" }, h("slot", { key: '51e0253c5082db0f65504f45446a0aec33b4b1a2', name: "body" })), usesActionsSlot && h("slot", { name: "actions" }))));
     }
     static get is() { return "tds-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-canvas/popover-canvas.js

@@ -19,10 +19,10 @@ export class TdsPopoverCanvas {
     }
     render() {
         var _a;
-        return (h(Host, null, h("tds-popover-core", Object.assign({}, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '45b6b6b51a9c37d4692b2d3d5418fb3c57fd7bbd' }, h("tds-popover-core", Object.assign({ key: '580397a3b0ee7aa04911644418f347dde7a67f1c' }, this.inheritedAttributes, { class: {
                 'tds-popover-canvas': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
-            }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click' }), h("div", null, h("slot", null)))));
+            }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click' }), h("div", { key: 'aaf09175958e1496d7e9ba685ac66a54320e8c7c' }, h("slot", { key: 'fb6ca5a14c2365b6c8ecac6f05c1c51f4ee20147' })))));
     }
     static get is() { return "tds-popover-canvas"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/popover-core/popover-core.js

@@ -145,7 +145,7 @@ export class TdsPopoverCore {
         if (this.autoHide) {
             hostStyle = { display: this.isShown ? 'block' : 'none' };
         }
-        return (h(Host, { style: hostStyle }, h("slot", null)));
+        return (h(Host, { key: '37933e24ca1b3ef534043364efe070074b934588', style: hostStyle }, h("slot", { key: 'fe4498e8b3cc2e3bd12f1080edea75b1d502e832' })));
     }
     static get is() { return "tds-popover-core"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/popover-menu/popover-menu-item/popover-menu-item.js

@@ -4,10 +4,10 @@ export class TdsPopoverMenuItem {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { role: "listitem" }, h("div", { class: {
+        return (h(Host, { key: 'b7094f420d522c9e1bca7c4121725fef8e9ce9f9', role: "listitem" }, h("div", { key: '94b4032e8f3c257e4c16ecf271163aed77fafa8d', class: {
                 wrapper: true,
                 disabled: this.disabled,
-            } }, h("slot", null))));
+            } }, h("slot", { key: 'd9280a3c2939c5620ef5f097b5c434f321f7a51e' }))));
     }
     static get is() { return "tds-popover-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-menu/popover-menu.js

@@ -19,11 +19,11 @@ export class TdsPopoverMenu {
     }
     render() {
         var _a;
-        return (h(Host, null, h("tds-popover-core", { class: {
+        return (h(Host, { key: '478be0089e62be878b3085bbda009fb87d5ccade' }, h("tds-popover-core", { key: '1e70eae5df4937ba0bb4b13f53ea81a2a45ffea7', class: {
                 'tds-popover-menu': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'fluid-width': this.fluidWidth,
-            }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance }, h("div", { role: "list" }, h("slot", null)))));
+            }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance }, h("div", { key: '038691370cdd8162cf24c6268b69c1c611030dac', role: "list" }, h("slot", { key: 'fad59409fba2f35e5324fd755bb03a1ccc65ca2c' })))));
     }
     static get is() { return "tds-popover-menu"; }
     static get encapsulation() { return "scoped"; }

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

@@ -19,7 +19,7 @@ export class TdsRadioButton {
         this.disabled = false;
     }
     render() {
-        return (h("div", { class: "tds-radio-button" }, h("input", { class: "tds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
+        return (h("div", { key: '94a76d67c971bcc9d5e45cd64ad49f87267ec584', class: "tds-radio-button" }, h("input", { key: '73bb8fa6fabede809f55ea63d956efb6f776bd68', class: "tds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { key: '2bc4fb9747aa4207f0082680b9c2ab720f802844', htmlFor: this.radioId }, h("slot", { key: '0b0c2bb6e2cbd67e307a4bc603dc48a699aa2202', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }