@scania/tegel 1.42.0 → 1.44.0-sonarcloud-0

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

@@ -12,6 +12,7 @@ export class TdsHeaderDropdownList {
         this.headingElement = undefined;
     }
     componentWillLoad() {
+        var _a, _b;
         const { children } = this.host;
         // Set the size prop for each child, if they have such a property
         for (let i = 0; i < children.length; i++) {
@@ -21,7 +22,7 @@ export class TdsHeaderDropdownList {
             }
         }
         let listRoot = this.host;
-        if (this.host.parentElement.tagName.toLowerCase() === 'tds-header-launcher-list') {
+        if (((_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.tagName.toLowerCase()) === 'tds-header-launcher-list') {
             listRoot = this.host.parentElement;
         }
         const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);
@@ -33,7 +34,8 @@ export class TdsHeaderDropdownList {
         }
     }
     componentDidLoad() {
-        this.host.shadowRoot.querySelectorAll('slot').forEach((slot) => {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot').forEach((slot) => {
             // Add the slotchange event listener.
             const onSlotChange = (e) => {
                 this.processAssignedElements(e.target);
@@ -72,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: '57e8ecd046b7a260f1516fc80673e9d095ffd4d3' }, attributes), h("slot", { key: 'e0bafe5fffcf8864faebd4603597e3e424a35046' })));
+        return (h(Host, Object.assign({ key: '190c5b3ef5273bb4ddb4bfe7d41aa21051eced80' }, attributes), h("slot", { key: 'cb7346a42c64bfe414b1814acab5923583f543b4' })));
     }
     static get is() { return "tds-header-dropdown-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,10 +8,10 @@ export class TdsHeaderDropdownListItem {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: 'a77c76be838a9f7036fe712b86cdf2f5b3c0c46f' }, h("div", { key: 'a3740446c4fed86228fa14ecb20b99b2c707f97b', class: {
+        return (h(Host, { key: 'f44417356b72d471bc6b9da6f05a92ee847492fd' }, h("div", { key: '4b3d24be55310e85146c89ac249bc6d100be4c6c', class: {
                 'component': true,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '0a037fd8059aa356ed9885e3e06d391f876e2fc3' }))));
+            } }, h("slot", { key: '2a37b399064d6f5ca3cc15417f48d60380d6b6dc' }))));
     }
     static get is() { return "tds-header-dropdown-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class TdsHeaderDropdownListLgUser {
         this.subheader = undefined;
     }
     render() {
-        return (h(Host, { key: '88298dc621372f56b0336686d055f27ef7bfee8a', role: "listitem" }, h("div", { key: 'da8b981e30d4cca52b4dfc2813e2d706f7c18d30', class: "user-box" }, this.imgUrl && h("img", { key: 'f81a370f4499f5bec4eedef0ef2d1aaa5aeca4ca', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '33c9d2b8d0761d6915129cd03f4b596b5c05c1b4', name: "thumbanil" }), h("div", { key: '78a05fa64af6d694b4927fef55260e18c2d5711f', class: "user-content" }, h("div", { key: '15f6a48e0f10574ae14af2e2d92342ec77e85aa1', class: "header" }, this.header, h("slot", { key: '12ebbfbc257918f264c76e7d38a28827880cadec', name: "header" })), h("div", { key: 'bbd348e04b5ea5732bb4426547ef5ed9eddf55d0', class: "subheader" }, this.subheader, h("slot", { key: '403e7f20cb5b564928759ce0be1b058d12610290', name: "subheader" }))))));
+        return (h(Host, { key: 'bdfa5d85ce7d9d75006496af94329a1721628b4f', role: "listitem" }, h("div", { key: '0f757d820aa3e96a1e98f7ae395660ba17e82576', class: "user-box" }, this.imgUrl && h("img", { key: 'c03f2089edefa01b766635e43d81f5b22a58f70d', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: 'c5eff329fa6100258a2c7d237ec076a139f2b00b', name: "thumbanil" }), h("div", { key: '0c097b9c1488f007ee8cd3e3490f9a3e85fac8f3', class: "user-content" }, h("div", { key: '3f1caac67dcd08d0bf5187ffe49c59ab3873822f', class: "header" }, this.header, h("slot", { key: '59fbd4a5b4d85e15de10b55376b6c54f4b3800c7', name: "header" })), h("div", { key: '82716ea4715e64e3c9d3ad3144b7af2821be5e8b', class: "subheader" }, this.subheader, h("slot", { key: '0574e77cf1d4a1651710811a0216bab7c24a11ed', name: "subheader" }))))));
     }
     static get is() { return "tds-header-dropdown-list-user"; }
     static get encapsulation() { return "shadow"; }
@@ -32,11 +32,11 @@ export class TdsHeaderDropdownListLgUser {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Image URL."
@@ -49,11 +49,11 @@ export class TdsHeaderDropdownListLgUser {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Image alt text."
@@ -66,11 +66,11 @@ export class TdsHeaderDropdownListLgUser {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Header text, usually the users first name and last name."
@@ -83,11 +83,11 @@ export class TdsHeaderDropdownListLgUser {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Subheader text."

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

@@ -6,7 +6,7 @@ export class TdsHeaderHamburger {
     }
     render() {
         const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: 'f1b3e80727ae2fbb84cbdf19fdd6500067fa010b' }, h("tds-header-item", { key: '6053c08c86b6f4149bed2eb7c8a4a26f16262fc9' }, h("button", Object.assign({ key: 'b2b645ed658328622e9a6411d5bcdfe66e59028c' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '6140334699f8a27f7d78387bb3bfcf08295a0c90', class: "icon", name: "burger", size: "20px" })))));
+        return (h(Host, { key: 'e5d7142a6d589d1b936ae4dc8376be0e03190271' }, h("tds-header-item", { key: '0945e350bb89ba977327c92917af457003c48fb9' }, h("button", Object.assign({ key: 'ade6457641c2e789dc631dad8df7491c5da53a93' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: 'b900d3c953cff83c99be40b3785a650aa984ee6a', class: "icon", name: "burger", size: "20px" })))));
     }
     static get is() { return "tds-header-hamburger"; }
     static get encapsulation() { return "shadow"; }
@@ -27,11 +27,11 @@ export class TdsHeaderHamburger {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value to be used by the aria-label attribute"

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

@@ -9,7 +9,10 @@ export class TdsHeaderItem {
         this.selected = false;
     }
     updateSlotted(searchPredicate, mutationCallback) {
-        const assignedElements = this.slotEl.assignedElements({ flatten: true });
+        var _a;
+        const assignedElements = (_a = this.slotEl) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true });
+        if (!(assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.length))
+            return;
         const firstSlottedElement = assignedElements[0];
         if (firstSlottedElement) {
             const foundElement = dfs(firstSlottedElement, searchPredicate);
@@ -49,9 +52,10 @@ export class TdsHeaderItem {
         }
     }
     componentDidLoad() {
-        this.slotEl = this.host.shadowRoot.querySelector('slot');
+        var _a, _b;
+        this.slotEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
         this.updateSlottedElements();
-        this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+        (_b = this.slotEl) === null || _b === void 0 ? void 0 : _b.addEventListener('slotchange', this.updateSlottedElements);
         // Set the order on initial load.
         this.updateOrder();
         // Create a MutationObserver to listen for changes on the "order" attribute.
@@ -74,10 +78,10 @@ export class TdsHeaderItem {
         }
     }
     render() {
-        return (h(Host, { key: '8bf1f05e837866442a31d6079cebce9f3f4b6a01' }, h("tds-core-header-item", { key: '2000815259c320803ecc6bb71553d56187c40983', class: {
+        return (h(Host, { key: '4eb20ba50fa39faabf4a0538ae328f63a5468c0a' }, h("tds-core-header-item", { key: '0d49c9362325f4dbb0505ff2eeccfae761be5809', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '35753d03b2ca354b0054172079ac20cd87524538' }))));
+            } }, h("slot", { key: 'cd629d0c001b0e17df021a5f19afad156f1ee13e' }))));
     }
     static get is() { return "tds-header-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
-:host {
+:host,
+:root {
   --tds-scrollbar-width-standard: thin;
   --tds-scrollbar-width: 10px;
   --tds-scrollbar-height: 10px;

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

@@ -20,9 +20,12 @@ export class TdsHeaderLauncher {
         }
     }
     handleKeyDown(event) {
+        var _a, _b;
         if (event.key === 'Escape' && this.open) {
             this.open = false;
-            this.buttonEl.shadowRoot.querySelector('button').focus();
+            const btnShadow = (_b = (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
+            if (btnShadow)
+                btnShadow.focus();
         }
     }
     componentDidLoad() {
@@ -33,8 +36,9 @@ export class TdsHeaderLauncher {
         this.open = !this.open;
         if (this.open) {
             requestAnimationFrame(() => {
+                var _a;
                 const selectors = "a, [tabindex='0']";
-                const firstFocusableElement = this.host.shadowRoot.querySelector(selectors) || this.host.querySelector(selectors);
+                const firstFocusableElement = ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selectors)) || this.host.querySelector(selectors);
                 if (firstFocusableElement instanceof HTMLElement) {
                     firstFocusableElement.focus();
                 }
@@ -48,11 +52,11 @@ export class TdsHeaderLauncher {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: '214953326230ac1b5ab664b032783c20d9999531' }, h("div", { key: '0efccd70365257b6f682b777bb6a3d056996aa82', class: {
+        return (h(Host, { key: '18e438bd8281ca3d6ca2b410c5b0ed60caf554aa' }, h("div", { key: '6033d6a10546a8b79b0bcab3f59ef14138263e9f', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: '677518edd231dedb813d59220699bf3b1f1469a6' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: '7d9b39133b781601acb0d8f97237694209f8d355', 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: 'de44af111fdbabc37a8330194f40465ab3301089' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: 'a39f8dbb2e6cf648bc16e896f01df6c308472fc3', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
@@ -80,11 +84,11 @@ export class TdsHeaderLauncher {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value to be used by the aria-label attribute of the launcher button"

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

@@ -8,7 +8,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: '6d8b16f71586f3bc944f17aa80234605bbc57ab0' }, h("tds-header-item", { key: '49529617101956090cdc2092d4df80fdf376a123', active: this.active }, h("button", Object.assign({ key: '76cd7b84413aafedaec6b1326e55307bf640b73f' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '145394461e3bc680a2f2b07e82f8b3bb549f1e6d', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
+        return (h(Host, { key: '72018ce054eb1c8c0d743887693ae0eb5a5fceae' }, h("tds-header-item", { key: '575f5f39bc75aaae01e3d62149228c63d389cbca', active: this.active }, h("button", Object.assign({ key: '9c0d368a1f63260950e93f72c022b4d030f20587' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: 'e8ee6fc3fcf23cebc14fb084517abaf68c71a495', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
     }
     static get is() { return "tds-header-launcher-button"; }
     static get encapsulation() { return "shadow"; }
@@ -47,11 +47,11 @@ export class TdsHeaderLauncherButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value to be used by the aria-label attribute"

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

@@ -28,7 +28,7 @@ export class TdsHeaderLauncherGrid {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, { key: '5d0824ce5d829d78fd61e2e53e08b6bdca0e4569' }, h("div", Object.assign({ key: '7e6f891f6bc92b4f93874a538e017382c72e176e' }, listAttributes), h("slot", { key: '31133b8760e19ed767f24544fea026c59c181e53' }))));
+        return (h(Host, { key: 'a3c700222b0cfba847962708fcab2e8876b459f6' }, h("div", Object.assign({ key: '6e4b346fd7bb132a60386a5711381d7936df05a4' }, listAttributes), h("slot", { key: 'c24b1b6e7eecccea3032c2b491ce3cf83a6f821b' }))));
     }
     static get is() { return "tds-header-launcher-grid"; }
     static get originalStyleUrls() {

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

@@ -8,7 +8,7 @@ export class TdsHeaderLauncherListTitle {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: '2bd6c5fa87fe1b94065980a7f7794ada3ccf2a9f' }, h("h3", { key: '3ccf8d967a2bda31d1724d4d3bf522cb1052f497', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: '831e18f03058184f3825541fd2be34d07a443e78' }))));
+        return (h(Host, { key: '323d920d37834907f77c0d00aca6172caa90b6d8' }, h("h3", { key: '49c919cceae79d9d1c0157a603e181d56dd15205', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: 'a1aa000de6a642dd68e2212a0e16728d5bb55a1f' }))));
     }
     static get is() { return "tds-header-launcher-list-title"; }
     static get originalStyleUrls() {

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

@@ -14,5 +14,5 @@ h4 slot {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  padding: 0 32px 0 16px;
+  padding: 0 32px 0 24px;
 }

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

@@ -1,7 +1,8 @@
 /*
   Contains spacing variables for the layout
 */
-:host {
+:host,
+:root {
   --tds-scrollbar-width-standard: thin;
   --tds-scrollbar-width: 10px;
   --tds-scrollbar-height: 10px;

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

@@ -21,18 +21,20 @@ export class TdsHeader {
     componentDidLoad() {
         const hostElement = this.host;
         const navElement = hostElement.querySelector('.tds-header-component-list');
-        this.observer.observe(navElement, {
-            childList: true,
-            subtree: false,
-        });
-        updateListChildrenRoles(navElement);
+        if (navElement) {
+            this.observer.observe(navElement, {
+                childList: true,
+                subtree: false,
+            });
+            updateListChildrenRoles(navElement);
+        }
     }
     disconnectedCallback() {
         this.observer.disconnect();
     }
     render() {
         const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: 'f5c7796ebe3f5d9bd6e555f0dd01f8ace54c1cd8' }, h("slot", { key: '77cba127f947cc8fefa875a6db0e68bf52c5a80e', name: "hamburger" }), h("slot", { key: 'daf9d8299734f72355eeaeb307dcc3e25520a7b8', name: "title" }), h("nav", Object.assign({ key: '904338fd0fb8ab3ce42b46ee482d021667fe49e8' }, navAttributes), h("ul", { key: '66994fd2de781178624f8d67c88e4d75e84d2844', class: "tds-header-component-list" }, h("slot", { key: '51ee40aa7b17fb2a36ca23c2cebfb74efb69ea24' }), h("li", { key: 'db64903ac70ee12d48cd5029997949875caa53e8', class: "tds-header-middle-spacer" }), h("slot", { key: '80a48331b218b734061a421c9e31f8fd1b98be1a', name: "end" })))));
+        return (h(Host, { key: '4c9dc2fe9e156de13e4cf00242a05796b65f281f' }, h("slot", { key: 'f3bd41541a930adb28bdee4d0985d2058d68efaa', name: "hamburger" }), h("slot", { key: '76ffa0bd65c153b198ed0d6ce680dc4e92f004a5', name: "title" }), h("nav", Object.assign({ key: '518360a59c5ce247274c772a4222c0dc830fd4f9' }, navAttributes), h("ul", { key: '04184cece0a4f5d107b629cd44c062769b7dcae9', class: "tds-header-component-list" }, h("slot", { key: 'fb108eca6c62956bb6b1c5c3f163a08bc371ee5c' }), h("li", { key: '2c9c878a5e0fe24c0696cc6f1a1357d813d25c17', class: "tds-header-middle-spacer" }), h("slot", { key: '53683a4433192d3578c3d78d24937e52954a34de', name: "end" })))));
     }
     static get is() { return "tds-header"; }
     static get originalStyleUrls() {

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

@@ -2,7 +2,6 @@
 import { h, Host } from "@stencil/core";
 import { iconsCollection as scaniaIcons } from "./scaniaIconsArray";
 import { iconsCollection as tratonIcons } from "./tratonIconsArray";
-// Map of brand classes to their respective icon collections
 const brandIconMap = {
     scania: scaniaIcons,
     traton: tratonIcons,
@@ -21,7 +20,7 @@ export class Icon {
         this.svgTitle = undefined;
         this.tdsAriaHidden = false;
         this.svgDescription = undefined;
-        this.icons_object = undefined;
+        this.icons_object = '';
         this.arrayOfIcons = [];
     }
     componentWillLoad() {
@@ -44,7 +43,7 @@ export class Icon {
         this.arrayOfIcons = [...this.arrayOfIcons];
     }
     render() {
-        return h(Host, { key: '28dd81a4993b7c842a115f7feca92d038b4ef195' }, this.setIcons());
+        return h(Host, { key: 'daa68a1111cb959770d66238151d462733bc8214' }, this.setIcons());
     }
     static get is() { return "tds-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -107,7 +106,7 @@ export class Icon {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -142,7 +141,7 @@ export class Icon {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

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

@@ -26,11 +26,11 @@ export class TdsLink {
         }
     }
     render() {
-        return (h("span", { key: '46854dd9cf4b0577098702567ede43ccfae897d6', class: {
+        return (h("span", { key: '37f0a1d6f793f3b333dd1d36cb4d71c6c0ca68c9', class: {
                 'disabled': this.disabled,
                 'no-underline': !this.underline,
                 'standalone': this.standalone,
-            } }, h("slot", { key: 'f574609666ae7484752ec8cfaf7f0bffa1645c83' })));
+            } }, h("slot", { key: 'a2943a35f2ca2daceab8036b5f4a858dbed487c9' })));
     }
     static get is() { return "tds-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message/message.css

@@ -1,6 +1,4 @@
 /* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host .wrapper {
   display: flex;
   padding: 16px;
@@ -39,6 +37,9 @@
   padding: 0;
   background-color: transparent;
 }
+:host .wrapper.minimal tds-icon {
+  padding-right: 8px;
+}
 :host .wrapper.minimal .header {
   font-family: var(--detail-02-font-family);
   font-size: var(--detail-02-font-size);

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

@@ -37,11 +37,11 @@ export class TdsMessage {
     render() {
         const headerId = this.header ? `tds-message-header-${generateUniqueId()}` : undefined;
         const contentId = !this.minimal ? `tds-message-content-${generateUniqueId()}` : undefined;
-        return (h(Host, { key: 'ac71829f0647270d499469049a833c282abca25d', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'ae95905137e70a95e6013e643e43baec0c10792b', class: {
+        return (h(Host, { key: 'b093c8aa74d5c52a7cbb6656a854f2b0bda88f9e', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '9d9bc245bdeb9f8b8868d943f3e39f6fc7ccd170', class: {
                 wrapper: true,
                 [this.variant]: true,
                 minimal: this.minimal,
-            } }, !this.noIcon && (h("tds-icon", { key: 'ea830e6051ef9e0f751a1e8d5e24fbd17ad6ec58', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'c71e70d57147d9ac050e7a223ed097e58cb6a49e', class: `content` }, this.header && (h("div", { key: '1acded0a8f8522792f41a4331a2009a42cbf4894', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: '0aed7c6daf7892e6ac1d5b3f8715e7c9032b11a3', class: "extended-message", id: contentId }, h("slot", { key: '75898f0a957581dc2720667c3eaae6e17201d81c' })))))));
+            } }, !this.noIcon && (h("tds-icon", { key: '99bd0439c3b09319b02fad1bd730bc4224394c1e', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'b225e23bb6230c7ed3ecb322c91ded787f1bb8b8', class: `content` }, this.header && (h("div", { key: '2bb19ac506aeb0ec88be8b20f4bf858d17fdb6ee', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: '560661fc2b22196461a8409d09b147591de3f02d', class: "extended-message", id: contentId }, h("slot", { key: '4647d9dd6eab33a41323e82edc2e12d434e5b84f' })))))));
     }
     static get is() { return "tds-message"; }
     static get encapsulation() { return "shadow"; }
@@ -62,11 +62,11 @@ export class TdsMessage {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Header text for the component."
@@ -78,8 +78,8 @@ export class TdsMessage {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -169,11 +169,11 @@ export class TdsMessage {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Provides an accessible name for the message component when no header is present. This ensures proper screen reader support for dialog/alertdialog roles."

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

@@ -1,4 +1,5 @@
-:host {
+:host,
+:root {
   --tds-scrollbar-width-standard: thin;
   --tds-scrollbar-width: 10px;
   --tds-scrollbar-height: 10px;
@@ -11,8 +12,6 @@ body {
 }
 
 /* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 /* MIXINS */
 /* MODAL STYLING */
 .tds-modal {

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

@@ -44,7 +44,7 @@ export class TdsModal {
         this.setShowButton = () => {
             var _a;
             if (this.selector || this.referenceEl) {
-                const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+                const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : (this.selector ? document.querySelector(this.selector) : null);
                 if (referenceEl) {
                     this.initializeReferenceElement(referenceEl);
                 }
@@ -119,7 +119,7 @@ export class TdsModal {
     async cleanupModal() {
         var _a;
         if (this.selector || this.referenceEl) {
-            const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+            const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : (this.selector ? document.querySelector(this.selector) : null);
             if (referenceEl) {
                 referenceEl.removeEventListener('click', this.handleReferenceElementClick);
             }
@@ -130,7 +130,7 @@ export class TdsModal {
     }
     returnFocusOnClose() {
         var _a;
-        let referenceElement = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+        const referenceElement = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : (this.selector ? document.querySelector(this.selector) : null);
         if (!referenceElement) {
             return; // no element to return focus to
         }
@@ -148,6 +148,7 @@ export class TdsModal {
         }
     }
     getFocusableElements() {
+        var _a, _b;
         const focusableSelectors = [
             'a[href]',
             'button:not([disabled])',
@@ -156,7 +157,7 @@ export class TdsModal {
             'select:not([disabled])',
             '[tabindex]:not([tabindex="-1"])',
         ].join(',');
-        const focusableInShadowRoot = Array.from(this.host.shadowRoot.querySelectorAll(focusableSelectors));
+        const focusableInShadowRoot = Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelectors)) !== null && _b !== void 0 ? _b : []);
         const focusableInSlots = Array.from(this.host.querySelectorAll(focusableSelectors));
         /** Focusable elements */
         return [...focusableInShadowRoot, ...focusableInSlots];
@@ -205,10 +206,10 @@ export class TdsModal {
         const usesActionsSlot = hasSlot('actions', this.host);
         const headerId = this.header ? `tds-modal-header-${generateUniqueId()}` : undefined;
         const bodyId = `tds-modal-body-${generateUniqueId()}`;
-        return (h(Host, { key: '4a220f8d1156cd7ef30ba0f77e33f6b368a71c5d', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
+        return (h(Host, { key: '64ec0269ed6369f5a298997f432095abf16cfe8e', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
                 show: this.isShown,
                 hide: !this.isShown,
-            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '2129611789e7d9c1e32731f59100f75ff4e58800', class: "tds-modal-backdrop" }), h("div", { key: 'cce280887ce68ab5471cd939847c8f23703e6a11', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '2629204523dff0d2afefab238514db74b9d1a93b', id: headerId, class: "header" }, this.header && h("div", { key: '040ddd22c7b782d77e07cc1ff4cd1fdf0d508cbe', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '7b15247fea7c3ab2986e453b98e7a7f9ccff943f', name: "header" }), this.closable && (h("button", { key: '67e09f9f95ad58e02c1f9adb9883af4a1c16f837', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '52694db7eb7dc40ca2ea8aeb3e13611f899177a8', name: "cross", size: "20px" })))), h("div", { key: 'b7fedc44fae5a964399f6b63fad96acaba9263a1', id: bodyId, class: "body" }, h("slot", { key: 'd60cbee2a55a487f738aa9a741d8b1e0cb74484e', name: "body" })), usesActionsSlot && h("slot", { key: 'c969e1f820a4f4ecfab84fe3349eee0233710f05', name: "actions" }))));
+            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: 'ff7163da4e0d417f0b9e2d2669b65b4c3d980cb1', class: "tds-modal-backdrop" }), h("div", { key: '594ac64c3d54280f0654516429c934919beaeb5f', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '942924e09b8f95e2891471363fe8391d2488fae3', id: headerId, class: "header" }, this.header && h("div", { key: '85864122df840ff8fb2c42bc0cca02180a8e3b2f', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '2c4b6bddbf1daf0afa33a5cf2dd34e3be175a1d8', name: "header" }), this.closable && (h("button", { key: 'de4e7e2461a10597fabf198a8431fbeb584daa99', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '628d4a4c906a7ed62cc52cb406229d8ef338beec', name: "cross", size: "20px" })))), h("div", { key: 'efd264c203b4c2a6cb745db03c0a023584521fa2', id: bodyId, class: "body" }, h("slot", { key: '83499fa7bf5719b88cdad06f51b7791a9fb2ec22', name: "body" })), usesActionsSlot && h("slot", { key: 'ef14e74d647f3c8483abd24205d476b16626d697', name: "actions" }))));
     }
     static get is() { return "tds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -229,11 +230,11 @@ export class TdsModal {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Sets the header of the Modal."
@@ -300,11 +301,11 @@ export class TdsModal {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "CSS selector for the element that will show the Modal."
@@ -317,7 +318,7 @@ export class TdsModal {
                 "mutable": false,
                 "complexType": {
                     "original": "HTMLElement | null",
-                    "resolved": "HTMLElement",
+                    "resolved": "HTMLElement | null | undefined",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
@@ -337,11 +338,11 @@ export class TdsModal {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Controls whether the Modal is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside."
@@ -405,8 +406,8 @@ export class TdsModal {
                     "text": "Emits when the Modal is closed."
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "object",
+                    "resolved": "object",
                     "references": {}
                 }
             }, {
@@ -504,6 +505,10 @@ export class TdsModal {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
                         }
                     },
                     "return": "Promise<void>"