@scania/tegel 1.38.0 → 1.40.0

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

@@ -19,13 +19,20 @@
 :host ::slotted(button:hover),
 :host ::slotted(a:hover) {
   background-color: var(--tds-header-item-hover);
+  box-shadow: inset 0 -2px 0 0 var(--tds-header-item-border-hover);
+}
+:host ::slotted(button:active),
+:host ::slotted(a:active) {
+  background-color: var(--tds-header-item-active);
+  box-shadow: inset 0 -2px 0 0 var(--tds-header-item-border-active);
 }
 :host ::slotted(button:focus-visible),
 :host ::slotted(a:focus-visible) {
+  border: none;
+  margin-right: 1px;
   outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
-  outline-offset: 1px;
-  z-index: 1;
+  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline-offset: -2px;
 }
 :host .component-active ::slotted(button),
 :host .component-active ::slotted(a) {
@@ -35,9 +42,9 @@
 }
 :host .component-selected:not(.component-active) ::slotted(button),
 :host .component-selected:not(.component-active) ::slotted(a) {
-  background-color: var(--tds-header--basic-element-background-selected);
-  padding-top: 4px;
-  border-bottom-style: solid;
-  border-bottom-width: 4px;
-  border-bottom-color: var(--tds-nav-item-border-color-active);
+  box-shadow: inset 0 -4px 0 0 var(--tds-header-item-border-hover);
+}
+:host .component-selected:not(.component-active) ::slotted(button:focus-visible),
+:host .component-selected:not(.component-active) ::slotted(a:focus-visible) {
+  box-shadow: inset 0 0 0 3px var(--tds-white);
 }

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

@@ -74,10 +74,10 @@ export class TdsHeaderItem {
         }
     }
     render() {
-        return (h(Host, { key: '4a9d013ab3abde506f9992453cae793db9a652cf' }, h("tds-core-header-item", { key: '359634d0bca7720c8a9bfd5c696a89c97df76a75', class: {
+        return (h(Host, { key: '8bf1f05e837866442a31d6079cebce9f3f4b6a01' }, h("tds-core-header-item", { key: '2000815259c320803ecc6bb71553d56187c40983', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '7318ad6ea4d1dfa0f16b70c6f305ece087aeea2e' }))));
+            } }, h("slot", { key: '35753d03b2ca354b0054172079ac20cd87524538' }))));
     }
     static get is() { return "tds-header-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,11 +48,11 @@ export class TdsHeaderLauncher {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: 'b62aac321e36b12d139d51c3421a1a9540079c22' }, h("div", { key: '4bb1d8e74ec245d9899870fccd990935488dcf7b', class: {
+        return (h(Host, { key: '214953326230ac1b5ab664b032783c20d9999531' }, h("div", { key: '0efccd70365257b6f682b777bb6a3d056996aa82', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: 'c3b90d64efd2878ffc2b0332538c2877f2b48fec' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: 'dd41f1e0573ceed07f519813bec503001d02377b', 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: '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: [
                 {
                     name: 'flip',
                     options: {

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: '62757385fdf2aa3c51af260f2761714aea4c9727' }, h("tds-header-item", { key: '199a00653122178784999c0b5d643b9b15cd8cc5', active: this.active }, h("button", Object.assign({ key: 'd59e77834e10763d5b1c518d5bcd96e51c4dad58' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: 'add07749af57c4110b6baeda3944e97ddf36c067', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
+        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 })))));
     }
     static get is() { return "tds-header-launcher-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class TdsHeaderLauncherGrid {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, { key: '3f2f7a655fef2f9d996851065a54b1f86929c989' }, h("div", Object.assign({ key: '2a111751b897f09bedeaa332fb7c9c0ef46ba5cd' }, listAttributes), h("slot", { key: '9e172d88f775c2f7508fb55b7de5cec49e7c9160' }))));
+        return (h(Host, { key: '5d0824ce5d829d78fd61e2e53e08b6bdca0e4569' }, h("div", Object.assign({ key: '7e6f891f6bc92b4f93874a538e017382c72e176e' }, listAttributes), h("slot", { key: '31133b8760e19ed767f24544fea026c59c181e53' }))));
     }
     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: 'fc7949be187e1a83b56e8cf3a7fd1ac51a4c76cc', role: "listitem" }, h("slot", { key: '998d551d53a7e0b6536a5a45f5e67a7425508f70' })));
+        return (h(Host, { key: '1506d0cda6ddcdd025ea7febf24e34c8e0d5b479', role: "listitem" }, h("slot", { key: 'f6ae96ad0c953297fddf43cfcee6d688a93846f5' })));
     }
     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: '586d5eb51af05ee6a6f1897ce77a765eae3d79dd' }, h("h3", { key: 'e1fab245e78ed2ab2e2c4be5abe1e8bdb218d1eb', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '7b1f819e8e4a0353f06d88b6c4ec5dc3ad254f3a' }))));
+        return (h(Host, { key: '25db2b1431472f1883bce6605c060e48129dacc5' }, h("h3", { key: '0caaece113240546638d8d0366bcecba6f945986', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '16962f436f38d529357dbaade615badd87862323' }))));
     }
     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: 'd8237d7c159c99b1ddef846db5a18900bb301504' }, h("tds-header-dropdown-list", { key: 'd314cd468397a9a288e5842cae1a1910d111ac40', size: "lg" }, h("slot", { key: '03465a88d59f0f56ec18f675d129560100d254dd' }))));
+        return (h(Host, { key: 'ceedbada9d5a96ecdb5306b0e55f939ba69c78d8' }, h("tds-header-dropdown-list", { key: 'a1ffa08021a4ac0d3aad0401330b6d82ad4e20f9', size: "lg" }, h("slot", { key: 'e0808a6e71a6bb26e8b56005c9552fde5af9296b' }))));
     }
     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: '7ec01704950bdb48cbc48251e5cb4ad0e4b8babf' }, h("tds-header-dropdown-list-item", { key: '2274d354403ca35178bad010cfcec06f716ac24c', size: "lg" }, h("slot", { key: '35a3c7cdb933bb9bb1be32770b74d3ae9441b1ff' }))));
+        return (h(Host, { key: 'bcc63c58186216485acf6e6e0f896158e92cd29e' }, h("tds-header-dropdown-list-item", { key: 'e4b963bf20b97aa19f8f6dbd4d4a6face04220db', size: "lg" }, h("slot", { key: '03445a4fe12c6f5a283b6d2635d657bbfd103263' }))));
     }
     static get is() { return "tds-header-launcher-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class TdsHeaderLauncherListTitle {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: 'c280ad56213dd6f54b3c4eac8695e2ecef6819f8' }, h("h3", { key: 'a1e4c17cb97f27bb882de8c8092593e654168e02', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: 'eaf2effb5d779e1faaa030a2e2df2b6afde51d66' }))));
+        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' }))));
     }
     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 } from "@stencil/core";
  */
 export class TdsHeaderTitle {
     render() {
-        return (h("h4", { key: 'b3ac74d4d978c32c1dfd417a5217bc5953075033' }, h("slot", { key: '67d55d1f3413b130767ae8db2e1d952f27beb00a' })));
+        return (h("h4", { key: '4af2f894bf508d0ea8f5c934f4b6e3be61f1ce1a' }, h("slot", { key: 'e5eaaf9c68f77041f6056af1bb7e1101b48c1ffc' })));
     }
     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, { key: '1e9a1427f3038ac59e3c89669049679a06626fff' }, h("slot", { key: 'a2e84cf4bfc88b8bc3a971cf374593afcd3eabae', name: "hamburger" }), h("slot", { key: 'c8a49826b7c504ddd17be29a3b6ae814848d6033', name: "title" }), h("nav", Object.assign({ key: '750a09450f2edfd0d335ca7863b084f62655129e' }, navAttributes), h("ul", { key: '1bca7410f4c0f81ffa77e57fba7c48f64afc22ab', class: "tds-header-component-list" }, h("slot", { key: 'fdaaac9d39e9cf5f396004dc1e1a7ce6d83a7ada' }), h("li", { key: '339deea3cbd820159adc3fe7dfa8a6a8e5192698', class: "tds-header-middle-spacer" }), h("slot", { key: '37273630aaf66ada7154ebb6f4ea01cc0ce0f94a', name: "end" })))));
+        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" })))));
     }
     static get is() { return "tds-header"; }
     static get originalStyleUrls() {

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

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

package/dist/collection/components/link/link.css

@@ -8,22 +8,28 @@
   color: var(--tds-link);
   text-decoration: underline;
 }
+:host ::slotted(*:hover) {
+  color: var(--tds-link-hover);
+  text-decoration: none;
+}
+:host .no-underline ::slotted(*) {
+  text-decoration: none;
+}
+:host .no-underline ::slotted(*:hover) {
+  color: var(--tds-link-hover);
+  text-decoration: underline;
+  text-decoration-color: var(--tds-link-hover);
+}
 :host ::slotted(*:focus-visible) {
   color: var(--tds-link-focus);
   text-decoration: none;
-  outline: 2px solid var(--tds-link-focus);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white), 0 0 0 3px var(--tds-link-focus);
 }
 :host ::slotted(*:active) {
   color: var(--tds-link);
   text-decoration: underline;
   text-decoration-color: var(--tds-link);
 }
-:host ::slotted(*:hover) {
-  color: var(--tds-link-hover);
-  text-decoration: underline;
-  text-decoration-color: var(--tds-link-hover);
-}
 :host ::slotted(*:visited) {
   color: var(--tds-link-visited);
   text-decoration-color: var(--tds-link-visited);
@@ -36,14 +42,6 @@
   pointer-events: none;
 }
 
-.no-underline ::slotted(*) {
-  text-decoration: none;
-}
-
-.no-underline:hover ::slotted(*) {
-  text-decoration: none;
-}
-
 .standalone ::slotted(*) {
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);

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

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

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

@@ -8,31 +8,31 @@
   border-radius: 4px;
 }
 :host .wrapper.information {
-  border-left: 4px solid var(--system-info-default);
+  border-left: 4px solid var(--tds-message-border-info);
 }
 :host .wrapper.information tds-icon {
-  color: var(--system-info-default);
+  color: var(--tds-message-icon-info);
 }
 :host .wrapper.success {
   background-color: var(--tds-message-background-success);
-  border-left: 4px solid var(--system-success-default);
+  border-left: 4px solid var(--tds-message-border-success);
 }
 :host .wrapper.success tds-icon {
-  color: var(--system-success-default);
+  color: var(--tds-message-icon-success);
 }
 :host .wrapper.error {
   background-color: var(--tds-message-background-error);
-  border-left: 4px solid var(--system-danger-default);
+  border-left: 4px solid var(--tds-message-border-error);
 }
 :host .wrapper.error tds-icon {
-  color: var(--system-danger-default);
+  color: var(--tds-message-icon-error);
 }
 :host .wrapper.warning {
   background-color: var(--tds-message-background-warning);
-  border-left: 4px solid var(--system-warning-default);
+  border-left: 4px solid var(--tds-message-border-warning);
 }
 :host .wrapper.warning tds-icon {
-  color: var(--system-warning-default);
+  color: var(--tds-message-icon-warning);
 }
 :host .wrapper.minimal {
   border: none;
@@ -48,7 +48,7 @@
   text-transform: var(--detail-02-text-transform);
 }
 :host .wrapper.minimal.error .header {
-  color: var(--system-danger-default);
+  color: var(--tds-message-minimal-header-error);
 }
 :host tds-icon {
   padding-right: 16px;

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: '752eb725898add9261df7460b3043642e7e6a7ef', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'd1346696f7f4d63d25cbacc0b3cbf60c39a54add', class: {
+        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: {
                 wrapper: true,
                 [this.variant]: true,
                 minimal: this.minimal,
-            } }, !this.noIcon && (h("tds-icon", { key: '39d83a70a25d5ac07c3786f47989ce77b1a9b386', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'aeb139399975656ee15493dab9c2ac77e4f295a0', class: `content` }, this.header && (h("div", { key: 'd9a1e8b5d2513630ff9c0a4363d346dfe2ecfd09', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: 'dffbcdb31b11c4f6313609fac311991202b9f462', class: "extended-message", id: contentId }, h("slot", { key: '38578271864c5884c5a4a4c105ae44ef6d2caf07' })))))));
+            } }, !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' })))))));
     }
     static get is() { return "tds-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -205,10 +205,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: '2d39760de58fd957585e4370aa88447d85249eca', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
+        return (h(Host, { key: '4a220f8d1156cd7ef30ba0f77e33f6b368a71c5d', 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: '5eeaf5c29529bf77ddde4892067f13d312d1bba7', class: "tds-modal-backdrop" }), h("div", { key: '8a6ccd911dfec947a809320a0631d5f9904ef78d', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: 'b7c760ebded4e98319cec75c161002a579316902', id: headerId, class: "header" }, this.header && h("div", { key: 'db14e71913052ba5367ab95a41a366c7f2dea4a3', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '62b394718c78e564fd50e7ff3328e637a63679e6', name: "header" }), this.closable && (h("button", { key: '9ff8ad81be4f72ee6a298a9ba39a1024269d3ec2', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: 'b34b8a55c7f5c65ce7a3fdee6114c66ee4ab82c3', name: "cross", size: "20px" })))), h("div", { key: 'ab04e506dd94c69d8f91fb774fa85f355f3629d4', id: bodyId, class: "body" }, h("slot", { key: 'f4a8e2377b4cae3a9c4fa1032e896b0b0c58a06a', name: "body" })), usesActionsSlot && h("slot", { key: '09137d7c8b81f91dbf419b10c8a085de25df1272', name: "actions" }))));
+            }, 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" }))));
     }
     static get is() { return "tds-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,7 +3,7 @@
   display: inline-block;
   color: var(--tds-popover-canvas-color);
   background-color: var(--tds-popover-canvas-background);
-  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--tds-popover-canvas-box-shadow);
   border-radius: 4px;
   z-index: 900;
 }

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

@@ -16,6 +16,7 @@ export class TdsPopoverCanvas {
         this.offsetDistance = 8;
         this.modifiers = [];
         this.tdsAlertDialog = 'dialog';
+        this.modeVariant = null;
         this.childRef = undefined;
     }
     /** Property for closing popover programmatically */
@@ -28,12 +29,14 @@ export class TdsPopoverCanvas {
     }
     render() {
         var _a;
-        return (h(Host, { key: '58db11b606cb1211fc569e0868a602ed935b46fa' }, h("tds-popover-core", Object.assign({ key: 'be884f4ea53cbb76e2c07cd87fba10c66cb18618', role: this.tdsAlertDialog }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '8f22b74f8df985de4505b1472cf47b621d5c515e', class: {
+                [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
+            } }, h("tds-popover-core", Object.assign({ key: 'a7d3fed2b26cd2dc532e9e78413828d52b28b21e', role: this.tdsAlertDialog }, 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', ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: 'b7436bdce7bb19745ac25dfc5a9db16f308db41c' }, h("slot", { key: '6436d57046cde0d03359899690be4af1b17fe506' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: '3c1fde8225ca64b259798f763b8d2264346c246e' }, h("slot", { key: 'e133b76f8088a4b572c8bb69792bc3fa6d652da9' })))));
     }
     static get is() { return "tds-popover-canvas"; }
     static get encapsulation() { return "scoped"; }
@@ -204,14 +207,9 @@ export class TdsPopoverCanvas {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "Object[]",
-                    "resolved": "Object[]",
-                    "references": {
-                        "Object": {
-                            "location": "global",
-                            "id": "global::Object"
-                        }
-                    }
+                    "original": "object[]",
+                    "resolved": "object[]",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -238,6 +236,24 @@ export class TdsPopoverCanvas {
                 "attribute": "tds-alert-dialog",
                 "reflect": false,
                 "defaultValue": "'dialog'"
+            },
+            "modeVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode variant of the component, based on current mode."
+                },
+                "attribute": "mode-variant",
+                "reflect": false,
+                "defaultValue": "null"
             }
         };
     }

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

@@ -224,7 +224,7 @@ export class TdsPopoverCore {
             'tds-animation-exit-fade': !this.isShown && this.animation === 'fade',
         };
         const classList = generateClassList(classes);
-        return (h(Host, { key: 'e00527f6f668e309529ff607c744eb64bba30c6a', role: this.host.getAttribute('role'), class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: 'e562ffae5ecbca928a541de6b50f88efa1eded8c' })));
+        return (h(Host, { key: '5c557610103827aedbabbd37a79730580d15ca2d', role: this.host.getAttribute('role'), class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '487a937b3c9d87b91425f6bd9eb88bc3fa85d7df' })));
     }
     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, { key: '64faf6cb0d6b7cf61baa086984db76a18c786920', role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'af8cf012fd1f2e02862b5830608aadf6bc183c4b', class: {
+        return (h(Host, { key: '189497fe898065e585b2bf342611716b7b44778b', role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '5904e5da7c9f4cfe1a35df1b5b1549a8a4c501a9', class: {
                 wrapper: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: 'e1057d681689dc614415e980894b85a6b6289a88' }))));
+            } }, h("slot", { key: 'ddacc7938ca455a8151b2e46449414146073b045' }))));
     }
     static get is() { return "tds-popover-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,15 +28,15 @@ export class TdsPopoverMenu {
     }
     render() {
         var _a;
-        return (h(Host, { key: '78e4ee3b0d6eb7c41f724582278b3de4b2227502', class: {
+        return (h(Host, { key: 'ad39066c2a2f7d4e4696143095fa8a0032d7c148', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, h("tds-popover-core", { key: 'f16d1d2d97dfa081fbbc13f1da6eb01f15d3e1e8', class: {
+            } }, h("tds-popover-core", { key: 'f261b18f6e1e26df1baf39628911cb885277b431', 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, ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: '2c413ca26bb977c971e3206ce7ac79da5107d35e', role: "menu" }, h("slot", { key: 'f9a0da937b2c038ec83e3a8e803fb858a42ab94b' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: 'f1549f6d338ed8e9a511577a85735b834a89df27', role: "menu" }, h("slot", { key: 'def698636f21c11133ad0289b21b76db0f208116' })))));
     }
     static get is() { return "tds-popover-menu"; }
     static get encapsulation() { return "scoped"; }

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

@@ -27,7 +27,7 @@ export class TdsRadioButton {
         }
     }
     render() {
-        return (h("div", { key: '6f44a40cb5ccf890bdee47d36f47a79d5f8b603c', class: "tds-radio-button" }, h("input", { key: '1da8f9df168c631a634172385c3471a5c6bb03aa', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "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(), tabIndex: this.tdsTabIndex }), h("label", { key: '0acf59236ffd3ee0136f2bdef9db8a36afe666ff', htmlFor: this.radioId }, h("slot", { key: 'add4ebdebbb4d5e15126a876c0c0940734b7b068', name: "label" }))));
+        return (h("div", { key: '48a31826daeef320097430deec2f57188ad3cd80', class: "tds-radio-button" }, h("input", { key: '6bc9711fae2e1ea4b8bc18cd441a364eb0bc4d9c', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "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(), tabIndex: this.tdsTabIndex }), h("label", { key: 'b2dbeea2ca194adea717086ba0d69d023860324d', htmlFor: this.radioId }, h("slot", { key: '422fab6ae9d579cf46d4110a61782a501dfb6a2a', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/side-menu/side-menu-close-button/side-menu-close-button.js

@@ -12,7 +12,7 @@ export class TdsSideMenuCloseButton {
         const sideMenuEl = this.host.closest('tds-side-menu');
         const sideMenuId = sideMenuEl ? sideMenuEl.id : '';
         const buttonProps = Object.assign(Object.assign(Object.assign({ 'aria-label': 'Close' }, (sideMenuId && { 'aria-controls': sideMenuId })), inheritAriaAttributes(this.host)), { 'onClick': TdsSideMenuCloseButton.handleClick });
-        return (h(Host, { key: 'b0e953d2148179c2a4fd1ed352b9024f6939c77c' }, h("button", Object.assign({ key: 'cd5f48b31d9eb62f4327a2918351920d961c446f' }, buttonProps), h("tds-icon", { key: 'f007bf92a2ba7186006aa4dd5126820108badecf', name: "cross", size: "20px", svgTitle: "Cross" }))));
+        return (h(Host, { key: 'de98375064e94f8bfc19a60db7464c6b1c20a46f' }, h("button", Object.assign({ key: '4b9284c8b220d5b9fb0d1e3b346a5dfc209e59e2' }, buttonProps), h("tds-icon", { key: '78a639c37f7a307f42ce68ec239b28c6da8a3221', name: "cross", size: "20px", svgTitle: "Cross" }))));
     }
     static get is() { return "tds-side-menu-close-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.js

@@ -28,14 +28,12 @@ export class TdsSideMenuCollapseButton {
         this.collapsed = this.sideMenuEl.collapsed;
     }
     render() {
-        return (h(Host, { key: 'fecd00dc0ef2ce899b82ce304034b5b6f75704ed', role: "button", tabindex: "0", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
-                this.handleClick();
-            } }, h("div", { key: '6d7ae7bd95d8c4c37895d06ce8d4eaebe08e91dd', class: {
+        return (h(Host, { key: 'e8b3276624a214cfa8d8c8a7bbb6757d1a6fe1c3' }, h("div", { key: '1c17452256ad8ca0f901178bdf2120076508ee84', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '2cc8087248c6f9eee7943039092c5a45f9c2376d', class: {
-                button: true,
-            } }, h("a", { key: 'e2510c1f475b5f6ff3d1de367360fc2e34e0c0c0' }, h("svg", { key: '7ea54a6bcfb144cab3045fb34316eac400c59e43', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '3db930370416d9906ccdf821e6d43d0e6633534a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: '7fba28f202ca8089ffce93c051c8d6afc23afef7' }))))));
+            } }, h("tds-side-menu-item", { key: '064ec6d7ea6ed2b13223cba39268f484146fee0a', class: { button: true } }, h("button", { key: 'd391bfe9a1e31e85f168b7261b92941b3e64693e', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
+                this.handleClick();
+            } }, h("svg", { key: '23a6362a7d6ab754d08ac439314fc94e37ec3a88', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '17a188de96b29b501b76294d8dac4f852edc22a3', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: 'a1a2408ee34830a190408c808935e33eed8bce5b' }))))));
     }
     static get is() { return "tds-side-menu-collapse-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.js

@@ -56,13 +56,13 @@ export class TdsSideMenuDropdown {
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, { key: '78a5c58e58b38e84cae96a9afd8166bfe3125a02' }, h("div", { key: '70e8e68e6db938cb2177169ca1836e84eb48cce6', class: {
+        return (h(Host, { key: '2c3887fe8ec9334f7f3b3f46b3bce64712957ae3' }, h("div", { key: 'bedb9fc6f22d0c608b77c2d0d2fe7c8c17eadd59', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '5834d5e804ad422937f2971637b3a70fb1fb676e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, h("tds-side-menu-item", { key: '83cb1486e99c0f699b02be91bf53df1249076902', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'd454e6148a12c0bd1864b6c148f169ac342e9da2' }, h("slot", { key: '8a2579b751421d9df8e3dd5a84b04a5f844d383c', name: "icon" }), !this.collapsed && (h(Fragment, { key: 'f3419cc2993191186dccc9a208ff8150bf592eeb' }, this.buttonLabel, h("slot", { key: 'ff616384d76d6f3df82ac6abb12d65e4f6a5906d', name: "label" }), h("tds-icon", { key: 'a4acd9c0de3f437766673c57b4d73ac13cc8917b', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: 'db1ec059f4f1910d1fef432baff29810883ec2ef', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (h("h3", { key: 'a9f35f976da7ceaf38eb1c1641b43617e4e583c6', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: 'ef8b02b77b93b54f0a9aa4c5fb367356c12e9b82', name: "label" }))), h("slot", { key: '15c7c9e5a6a0615f478c5f93de8753211d17b3c3' })))));
+            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'e21c03415c48022813b3289f8dd80f21486414f0' }, h("slot", { key: '4462d95bf8e7945741cb54d9f363b8d9cac158e0', name: "icon" }), !this.collapsed && (h(Fragment, { key: '1a65252df105ef6ad9bca35f873fe19e71289b80' }, this.buttonLabel, h("slot", { key: 'e35a184bae5c65fde366ed287062becbc6633cac', name: "label" }), h("tds-icon", { key: '7a4328715c67aaf91a3675574f5aadca9ce8ae3d', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: '1e4e674c5e9b8901b5306bee36bf121aa37112e3', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (h("h3", { key: '54a5f5f89d595aeae6ac6e41ac553e96466fe4a1', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '20477b6be2c477c48412d0f4bc34f1181bcb00d3', name: "label" }))), h("slot", { key: '9740e5c9cb493e52c104223ec62b47bffc8adc5d' })))));
     }
     static get is() { return "tds-side-menu-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-dropdown-list/side-menu-dropdown-list.js

@@ -15,9 +15,9 @@ export class TdsSideMenuDropdownList {
         this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
     }
     render() {
-        return (h(Host, { key: '3b6baf50c44b45c9b31d90512fcf06e0f7bfec25', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '56e8ee677d733e9a0198856cb97a270fab78d69a', class: {
+        return (h(Host, { key: '38e9f561720b3a68528ae69878138ea8e9085e3c', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '9f2e5ea13fe7f4483ae07d5a58208b27a64bbd1b', class: {
                 'state-collapsed': this.collapsed,
-            } }, h("slot", { key: 'f9fe71e7c9b14c9791d51b758b495c56fa95f8e6' }))));
+            } }, h("slot", { key: '10543e9547fc64683e4f96e0ecb72ff82e3ed3ad' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list"; }
     static get encapsulation() { return "shadow"; }