@scania/tegel 1.27.0-toast-aria-live.0 → 1.28.0

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

@@ -5,12 +5,13 @@ export class Icon {
     constructor() {
         this.setIcons = () => this.arrayOfIcons.map((element) => {
             if (element.name === this.name) {
-                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": this.svgTitle ? `title-${this.name}` : undefined, "aria-describedby": this.svgDescription ? `desc-${this.name}` : undefined, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, this.svgTitle && h("title", { id: `title-${this.name}` }, this.svgTitle), this.svgDescription && h("desc", { id: `desc-${this.name}` }, this.svgDescription), h("path", { fill: "currentColor", d: element.definition })));
+                return (h("svg", { "aria-hidden": this.tdsAriaHidden, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": this.svgTitle ? `title-${this.name}` : undefined, "aria-describedby": this.svgDescription ? `desc-${this.name}` : undefined, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, this.svgTitle && h("title", { id: `title-${this.name}` }, this.svgTitle), this.svgDescription && h("desc", { id: `desc-${this.name}` }, this.svgDescription), h("path", { fill: "currentColor", d: element.definition })));
             }
         });
         this.name = 'truck';
         this.size = '16px';
         this.svgTitle = undefined;
+        this.tdsAriaHidden = false;
         this.svgDescription = undefined;
         this.icons_object = iconsCollection;
         this.arrayOfIcons = [];
@@ -28,7 +29,7 @@ export class Icon {
         this.arrayOfIcons = [...this.arrayOfIcons];
     }
     render() {
-        return h(Host, { key: '7501bac4e182e5b44030b140b4c2c68e0fd2522b' }, this.setIcons());
+        return h(Host, { key: 'd19a1de2f0267b93717324d424b9c89e19bbcb21' }, this.setIcons());
     }
     static get is() { return "tds-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -103,6 +104,24 @@ export class Icon {
                 "attribute": "svg-title",
                 "reflect": false
             },
+            "tdsAriaHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set aria-hidden attribute on svg"
+                },
+                "attribute": "tds-aria-hidden",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "svgDescription": {
                 "type": "string",
                 "mutable": false,

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

@@ -1,34 +1,31 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 /* MIXINS */
 /* MODAL STYLING */
 .tds-modal {
   box-sizing: border-box;
-  background-color: var(--tds-modal-background);
+  background-color: var(--background-elevation-layer-02);
   margin: auto;
   position: relative;
-  border-radius: 4px;
+  border-radius: var(--radius-narrow);
   max-height: 85vh;
   overflow-y: auto;
   pointer-events: auto;
-  /* SCROLL STUFF */
-  /* width */
-  /* Track */
-  /* Handle */
 }
 .tds-modal * {
   box-sizing: border-box;
 }
 .tds-modal::-webkit-scrollbar {
-  width: 5px;
-  background-color: var(--tds-grey-300);
-  border-radius: 0 1em 1em 0;
+  width: 6px;
+  background-color: transparent;
 }
 .tds-modal::-webkit-scrollbar-track {
-  background-color: var(--tds-grey-300);
-  border-radius: 0 1em 1em 0;
+  background-color: transparent;
 }
 .tds-modal::-webkit-scrollbar-thumb {
-  background-color: var(--tds-grey-500);
-  border-radius: 0 1em 1em 0;
+  background-color: var(--foreground-elements-transparparent-discrete);
+  border-radius: 3px;
 }
 .tds-modal__actions-sticky {
   overflow: hidden;
@@ -36,8 +33,12 @@
   flex-direction: column;
 }
 .tds-modal__actions-sticky .body {
-  font: var(--tds-body-01);
-  letter-spacing: var(--tds-body-01-ls);
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
   max-height: calc(85vh - 36px);
   overflow-y: auto;
 }
@@ -45,13 +46,13 @@
   bottom: -1px;
   left: 0;
   right: 0;
-  background-color: var(--tds-modal-background);
-  padding: var(--tds-spacing-element-24) var(--tds-spacing-element-16) var(--tds-spacing-element-16);
+  background-color: var(--background-elevation-layer-02);
+  padding: 24px 16px 16px;
   display: flex;
   gap: 16px;
 }
 .tds-modal__actions-static slot[name=actions] {
-  background-color: var(--tds-modal-background);
+  background-color: var(--background-elevation-layer-02);
   display: flex;
   gap: 16px;
   padding: 24px 16px 16px;
@@ -142,43 +143,47 @@
 /* MODAL SUB ELEMENTS */
 .header {
   display: flex;
-  padding: var(--tds-spacing-element-16);
+  padding: 16px;
   position: sticky;
   top: 0;
-  background-color: var(--tds-modal-background);
+  background-color: var(--background-elevation-layer-02);
   z-index: 1;
 }
 
 .header,
 slot[name=header]::slotted(*) {
-  color: var(--tds-modal-text);
-  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
-  font: var(--tds-headline-05) !important;
-  letter-spacing: var(--tds-headline-05-ls) !important;
+  font-family: var(--headline-05-font-family);
+  font-size: var(--headline-05-font-size);
+  line-height: var(--headline-05-line-height);
+  font-weight: var(--headline-05-font-weight);
+  letter-spacing: var(--headline-05-letter-spacing);
+  text-transform: var(--headline-05-text-transform);
+  color: var(--foreground-text-strong);
   margin: 0;
   flex: 1;
 }
 
 .body {
-  color: var(--tds-modal-text);
-  font: var(--tds-body-01);
-  letter-spacing: var(--tds-body-01-ls);
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
+  color: var(--foreground-text-strong);
   overflow-y: visible;
-  padding: 0 var(--tds-spacing-element-16) var(--tds-spacing-element-16);
-  /* SCROLL STUFF */
-  /* width */
-  /* Track */
-  /* Handle */
+  padding: 0 16px 16px;
 }
 .body::-webkit-scrollbar {
-  width: 5px;
-  background-color: var(--tds-grey-300);
+  width: 6px;
+  background-color: transparent;
 }
 .body::-webkit-scrollbar-track {
-  background-color: var(--tds-grey-300);
+  background-color: transparent;
 }
 .body::-webkit-scrollbar-thumb {
-  background-color: var(--tds-grey-500);
+  background-color: var(--foreground-elements-transparparent-discrete);
+  border-radius: 3px;
 }
 
 .tds-modal-backdrop {
@@ -188,7 +193,7 @@ slot[name=header]::slotted(*) {
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--tds-modal-backdrop);
+  background-color: var(--background-elevation-scrim);
   pointer-events: auto;
 }
 .tds-modal-backdrop * {
@@ -206,7 +211,7 @@ button.tds-modal-close {
 .tds-modal-close {
   display: inline-block;
   height: auto;
-  color: var(--tds-modal-icon);
+  color: var(--foreground-text-strong);
   cursor: pointer;
 }
 .tds-modal-close:focus {
@@ -215,12 +220,12 @@ button.tds-modal-close {
 }
 @media (min-width: 320px) {
   .tds-modal-close {
-    margin-left: var(--tds-spacing-element-16);
+    margin-left: 16px;
   }
 }
 @media (min-width: 1056px) {
   .tds-modal-close {
-    margin-left: var(--tds-spacing-element-48);
+    margin-left: 48px;
   }
 }
 
@@ -232,16 +237,16 @@ button.tds-modal-close {
 }
 @media (min-width: 320px) {
   .tds-modal-close-btn {
-    margin-left: var(--tds-spacing-element-16);
+    margin-left: 16px;
   }
 }
 @media (min-width: 1056px) {
   .tds-modal-close-btn {
-    margin-left: var(--tds-spacing-element-48);
+    margin-left: 48px;
   }
 }
 .tds-modal-close-btn svg {
-  fill: var(--tds-modal-icon);
+  fill: var(--foreground-text-strong);
 }
 
 .tds-modal-overflow {

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

@@ -15,6 +15,7 @@ export class TdsPopoverCanvas {
         this.animation = 'none';
         this.offsetDistance = 8;
         this.modifiers = [];
+        this.tdsAlertDialog = 'dialog';
         this.childRef = undefined;
     }
     /** Property for closing popover programmatically */
@@ -27,12 +28,12 @@ export class TdsPopoverCanvas {
     }
     render() {
         var _a;
-        return (h(Host, { key: '68de2e7161c5060c98b1c0c78050f41a716228ee' }, h("tds-popover-core", Object.assign({ key: 'f50ae36ac2b76445d78cbe4750820d3c684e862a' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '65f267d001dc720000b13f6b46010781ccd3119c' }, h("tds-popover-core", Object.assign({ key: '5a3df2dbc918a330f895fbfb4bbf1a5a6ebe2c21', 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: '1dac1d925ab9673219449d3885cd7430a3e3f188' }, h("slot", { key: '9c5d3c152b63e0afd8c30e4960edbd2aa3418fd2' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: '3c24d23c70824186c971ce3cfe79d2d14ac472a1' }, h("slot", { key: 'ca58b5e939aabdbe80ca92d747c191f08ad34b4d' })))));
     }
     static get is() { return "tds-popover-canvas"; }
     static get encapsulation() { return "scoped"; }
@@ -219,6 +220,24 @@ export class TdsPopoverCanvas {
                     "text": "Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/"
                 },
                 "defaultValue": "[]"
+            },
+            "tdsAlertDialog": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'alertdialog' | 'dialog'",
+                    "resolved": "\"alertdialog\" | \"dialog\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages."
+                },
+                "attribute": "tds-alert-dialog",
+                "reflect": false,
+                "defaultValue": "'dialog'"
             }
         };
     }

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

@@ -18,14 +18,22 @@ export class TdsPopoverCore {
             }
             else {
                 this.internalTdsClose.emit();
+                this.openedByKeyboard = false;
             }
         }.bind(this);
         this.onClickTarget = function onClickTarget(event) {
             event.stopPropagation();
+            // Check if event was triggered by keyboard (Enter or Space)
+            this.openedByKeyboard =
+                event.type === 'keydown' ||
+                    event.key === 'Enter' ||
+                    event.key === ' ';
             this.setIsShown((isShown) => !isShown);
         }.bind(this);
         this.handleShow = function handleShow(event) {
             event.stopPropagation();
+            // Check if event was triggered by keyboard (tab focus)
+            this.openedByKeyboard = event.type === 'focusin';
             this.setIsShown(true);
         }.bind(this);
         this.handleHide = function handleHide(event) {
@@ -49,6 +57,7 @@ export class TdsPopoverCore {
         this.isShown = false;
         this.disableLogic = false;
         this.hasShownAtLeastOnce = false;
+        this.openedByKeyboard = false;
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -71,6 +80,11 @@ export class TdsPopoverCore {
             }
         }
     }
+    handleKeydown(event) {
+        if (event.key === 'Escape' && this.isShown) {
+            this.setIsShown(false);
+        }
+    }
     /* To observe any change of show prop after an initial load */
     onShowChange(newValue) {
         this.setIsShown(newValue);
@@ -86,6 +100,26 @@ export class TdsPopoverCore {
             trigger: newValue,
         });
     }
+    onIsShownChange(newValue) {
+        if (newValue && this.openedByKeyboard) {
+            // Wait for the next render cycle to ensure the popover is visible
+            setTimeout(() => {
+                this.focusFirstElement();
+            }, 0);
+        }
+    }
+    focusFirstElement() {
+        // Try to find a focusable element inside the popover
+        const focusableElements = this.host.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+        else {
+            // If no focusable elements found, make the popover itself focusable
+            this.host.setAttribute('tabindex', '0');
+            this.host.focus();
+        }
+    }
     initialize({ referenceEl, trigger, }) {
         this.cleanUp();
         if (typeof referenceEl !== 'undefined') {
@@ -114,6 +148,14 @@ export class TdsPopoverCore {
         }
         if (trigger === 'click' && this.show === null) {
             this.target.addEventListener('click', this.onClickTarget);
+            // Also handle keyboard activation via Enter and Space
+            this.target.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.openedByKeyboard = true;
+                    this.onClickTarget(e);
+                }
+            });
         }
         if (trigger === 'hover' || trigger === 'hover-popover') {
             // For tabbing over element
@@ -130,15 +172,16 @@ export class TdsPopoverCore {
         }
     }
     cleanUp() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         (_a = this.target) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.onClickTarget);
-        (_b = this.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('focusin', this.handleShow);
-        (_c = this.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusout', this.handleHide);
-        (_d = this.target) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseenter', this.handleShow);
-        (_e = this.target) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseleave', this.handleHide);
-        (_f = this.host) === null || _f === void 0 ? void 0 : _f.removeEventListener('mouseenter', this.handleShow);
-        (_g = this.host) === null || _g === void 0 ? void 0 : _g.removeEventListener('mouseleave', this.handleHide);
-        (_h = this.popperInstance) === null || _h === void 0 ? void 0 : _h.destroy();
+        (_b = this.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', this.onClickTarget);
+        (_c = this.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusin', this.handleShow);
+        (_d = this.target) === null || _d === void 0 ? void 0 : _d.removeEventListener('focusout', this.handleHide);
+        (_e = this.target) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseenter', this.handleShow);
+        (_f = this.target) === null || _f === void 0 ? void 0 : _f.removeEventListener('mouseleave', this.handleHide);
+        (_g = this.host) === null || _g === void 0 ? void 0 : _g.removeEventListener('mouseenter', this.handleShow);
+        (_h = this.host) === null || _h === void 0 ? void 0 : _h.removeEventListener('mouseleave', this.handleHide);
+        (_j = this.popperInstance) === null || _j === void 0 ? void 0 : _j.destroy();
     }
     connectedCallback() {
         if (this.selector === undefined && this.referenceEl === undefined) {
@@ -181,7 +224,7 @@ export class TdsPopoverCore {
             'tds-animation-exit-fade': !this.isShown && this.animation === 'fade',
         };
         const classList = generateClassList(classes);
-        return (h(Host, { key: '75bd399d3dc2904ef4e1f92eea7caca40d7de09c', class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '67f6f36ec1ff26e413f797160dd493cd5703f73a' })));
+        return (h(Host, { key: '0a41818272dd567616b762d3b2d8cc9d36bb913a', role: this.host.getAttribute('role'), class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: 'e4b23a734ca96179cb980b3456945ff2ce3b160b' })));
     }
     static get is() { return "tds-popover-core"; }
     static get encapsulation() { return "scoped"; }
@@ -414,7 +457,8 @@ export class TdsPopoverCore {
             "target": {},
             "isShown": {},
             "disableLogic": {},
-            "hasShownAtLeastOnce": {}
+            "hasShownAtLeastOnce": {},
+            "openedByKeyboard": {}
         };
     }
     static get events() {
@@ -488,6 +532,9 @@ export class TdsPopoverCore {
             }, {
                 "propName": "trigger",
                 "methodName": "onTriggerChanged"
+            }, {
+                "propName": "isShown",
+                "methodName": "onIsShownChange"
             }];
     }
     static get listeners() {
@@ -503,6 +550,12 @@ export class TdsPopoverCore {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/popover-core/tds-popover-core.css

@@ -5215,9 +5215,9 @@ html {
   --tds-background-image-scania-symbol-svg: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_symbol/scania-symbol.svg);
   --tds-background-image-scania-logotype-png: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_logotype/scania-logotype.png);
   --tds-background-image-scania-logotype-svg: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_logotype/scania-logotype.svg);
-  --tds-background-image-scania-wordmark-white-svg: url("./assets/logos/scania-wordmark-white.svg");
-  --tds-background-image-scania-symbol-svg: url("./assets/logos/scania-symbol.svg");
-  --tds-background-image-scania-symbol-png: url("./assets/logos/scania-symbol.png");
+  --tds-background-image-scania-wordmark-white-svg-local: url("./assets/logos/scania-wordmark-white.svg");
+  --tds-background-image-scania-symbol-svg-local: url("./assets/logos/scania-symbol.svg");
+  --tds-background-image-scania-symbol-png-local: url("./assets/logos/scania-symbol.png");
 }
 
 /** The breakpoint at which the layout changes from fixed size to full-width. */
@@ -6708,29 +6708,6 @@ tds-link tds-icon {
   padding-left: 5px;
 }
 
-:root,
-.tds-mode-light {
-  --tds-modal-backdrop: rgba(0 0 0 / 40%);
-  --tds-modal-background: var(--tds-white);
-  --tds-modal-text: var(--tds-grey-958);
-  --tds-modal-icon: var(--tds-black);
-  --tds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A");
-  --tds-modal-scrollbar: var(--tds-grey-300);
-  --tds-modal-scrollbar-track: var(--tds-grey-300);
-  --tds-modal-scrollbar-thumb: var(--tds-grey-500);
-}
-
-.tds-mode-dark {
-  --tds-modal-backdrop: rgba(0 0 0 / 40%);
-  --tds-modal-background: var(--tds-grey-900);
-  --tds-modal-text: var(--tds-grey-50);
-  --tds-modal-icon: var(--tds-white);
-  --tds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A");
-  --tds-modal-scrollbar: var(--tds-grey-300);
-  --tds-modal-scrollbar-track: var(--tds-grey-300);
-  --tds-modal-scrollbar-thumb: var(--tds-grey-500);
-}
-
 :root,
 .tds-mode-light {
   --tds-popover-canvas-color: var(--tds-grey-958);
@@ -6957,7 +6934,7 @@ tds-link tds-icon {
   --tds-folder-tab-background: var(--tds-folder-tab-background-primary);
   --tds-folder-tab-background-selected-primary: var(--tds-white);
   --tds-folder-tab-background-selected-secondary: var(--tds-grey-50);
-  --tds-folder-tab-divider-color: rgb(0 21 51 / 16%);
+  --tds-folder-tab-divider-color: var(--tds-grey-300);
   --tds-folder-tab-item-color: rgb(0 21 51 / 60%);
   --tds-folder-tab-item-color-disabled: rgb(0 21 51 / 16%);
 }
@@ -6993,7 +6970,7 @@ tds-link tds-icon {
   --tds-folder-tab-background: var(--tds-folder-tab-background-primary);
   --tds-folder-tab-background-selected-primary: var(--tds-grey-900);
   --tds-folder-tab-background-selected-secondary: var(--tds-grey-868);
-  --tds-folder-tab-divider-color: var(--tds-blue-100);
+  --tds-folder-tab-divider-color: var(--tds-grey-800);
   --tds-folder-tab-item-color: rgb(228 233 241 / 60%);
   --tds-folder-tab-item-color-disabled: rgb(228 233 241 / 16%);
 }
@@ -7009,8 +6986,7 @@ tds-link tds-icon {
 :root,
 .tds-mode-light {
   /* Horizontal divider */
-  --tds-inline-tabs-horizontal-divider-background: var(--tds-blue-900);
-  --tds-inline-tabs-horizontal-divider-opacity: 0.16;
+  --tds-inline-tabs-horizontal-divider-background: var(--tds-grey-300);
   --tds-inline-tabs-tab-background-primary: var(--tds-white);
   --tds-inline-tabs-tab-background-secondary: var(--tds-grey-50);
   --tds-inline-tabs-background: var(--tds-inline-tabs-tab-background-primary);
@@ -7026,7 +7002,7 @@ tds-link tds-icon {
   --tds-inline-tabs-tab-color-selected: var(--tds-grey-958);
   --tds-inline-tabs-tab-color-disabled: var(--tds-blue-900);
   --tds-inline-tabs-tab-color-opacity-disabled: 0.38;
-  --tds-inline-tabs-tab-indicator-background-hover: #d1d5db;
+  --tds-inline-tabs-tab-indicator-background-hover: var(--tds-grey-400);
   --tds-inline-tabs-tab-color-hover: var(--tds-grey-958);
   --tds-inline-tabs-tab-color-focus: var(--tds-grey-958);
   --tds-inline-tabs-tab-color-active: var(--tds-grey-958);
@@ -7044,8 +7020,7 @@ tds-link tds-icon {
 }
 
 .tds-mode-dark {
-  --tds-inline-tabs-horizontal-divider-background: var(--tds-blue-100);
-  --tds-inline-tabs-horizontal-divider-opacity: 0.24;
+  --tds-inline-tabs-horizontal-divider-background: var(--tds-grey-800);
   --tds-inline-tabs-tab-background-primary: var(--tds-grey-900);
   --tds-inline-tabs-tab-background-secondary: var(--tds-grey-868);
   --tds-inline-tabs-background: var(--tds-inline-tabs-tab-background-primary);
@@ -7085,9 +7060,10 @@ tds-link tds-icon {
 :root,
 .tds-mode-light {
   /* Horizontal divider */
-  --tds-navigation-tabs-horizontal-divider-background: var(--tds-blue-900);
-  --tds-navigation-tabs-horizontal-divider-opacity: 0.16;
-  --tds-navigation-tabs-background: var(--tds-white);
+  --tds-navigation-tabs-horizontal-divider-background: var(--tds-grey-300);
+  --tds-navigation-tabs-tab-background-primary: var(--tds-white);
+  --tds-navigation-tabs-tab-background-secondary: var(--tds-grey-50);
+  --tds-navigation-tabs-background: var(--tds-navigation-tabs-tab-background-primary);
   /* Scroll button */
   --tds-navigation-tabs-scroll-btn-background: var(--tds-grey-50);
   --tds-navigation-tabs-scroll-btn-background-hover: var(--tds-grey-300);
@@ -7097,18 +7073,25 @@ tds-link tds-icon {
   --tds-navigation-tabs-tab-color-selected: var(--tds-grey-958);
   --tds-navigation-tabs-tab-color-disabled: var(--tds-blue-900);
   --tds-navigation-tabs-tab-color-opacity-disabled: 0.38;
-  --tds-navigation-tabs-tab-indicator-background-hover: #d1d5db;
+  --tds-navigation-tabs-tab-indicator-background-hover: var(--tds-grey-400);
   --tds-navigation-tabs-tab-color-hover: var(--tds-grey-958);
   --tds-navigation-tabs-tab-color-focus: var(--tds-grey-958);
   --tds-navigation-tabs-tab-color-active: var(--tds-grey-958);
   --tds-navigation-tabs-tab-indicator-background-active: var(--tds-blue-400);
   --tds-navigation-tabs-tab-indicator-background-hover: #d1d5db;
 }
+:root .tds-mode-variant-primary,
+.tds-mode-light .tds-mode-variant-primary {
+  --tds-navigation-tabs-background: var(--tds-navigation-tabs-tab-background-primary);
+}
+:root .tds-mode-variant-secondary,
+.tds-mode-light .tds-mode-variant-secondary {
+  --tds-navigation-tabs-background: var(--tds-navigation-tabs-tab-background-secondary);
+}
 
 .tds-mode-dark {
-  --tds-navigation-tabs-horizontal-divider-background: var(--tds-blue-100);
-  --tds-navigation-tabs-horizontal-divider-opacity: 0.24;
-  --tds-navigation-tabs-background: var(--tds-grey-900);
+  --tds-navigation-tabs-horizontal-divider-background: var(--tds-grey-800);
+  --tds-navigation-tabs-background: var(--tds-navigation-tabs-tab-background-primary);
   /* Scroll button */
   --tds-navigation-tabs-scroll-btn-background: var(--tds-grey-800);
   --tds-navigation-tabs-scroll-btn-background-hover: var(--tds-grey-900);
@@ -7125,6 +7108,12 @@ tds-link tds-icon {
   --tds-navigation-tabs-tab-indicator-background-active: var(--tds-blue-300);
   --tds-navigation-tabs-tab-indicator-background-hover: #373d46;
 }
+.tds-mode-dark .tds-mode-variant-primary {
+  --tds-navigation-tabs-background: var(--tds-navigation-tabs-tab-background-primary);
+}
+.tds-mode-dark .tds-mode-variant-secondary {
+  --tds-navigation-tabs-background: var(--tds-navigation-tabs-tab-background-secondary);
+}
 
 :root,
 .tds-mode-light {
@@ -7241,6 +7230,7 @@ tds-link tds-icon {
   --tds-text-field-border-bottom: var(--tds-grey-600);
   --tds-text-field-border-bottom-hover: var(--tds-grey-800);
   --tds-text-field-border-bottom-success: var(--tds-grey-958);
+  --tds-text-field-border-bottom-readonly: var(--tds-grey-500);
   --tds-text-field-icon-read-only-color: var(--tds-grey-958);
   --tds-text-field-icon-read-only-label-color: var(--tds-grey-958);
 }
@@ -7286,6 +7276,7 @@ tds-link tds-icon {
   --tds-text-field-border-bottom-hover: var(--tds-grey-400);
   --tds-text-field-border-bottom-success: var(--tds-grey-50);
   --tds-text-field-border-bottom-error: var(--tds-negative);
+  --tds-text-field-border-bottom-readonly: var(--tds-grey-600);
   --tds-text-field-icon-read-only-color: var(--tds-grey-100);
   --tds-text-field-icon-read-only-label-color: var(--tds-grey-50);
 }

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: '8abb30dc62eb52649840254acfbd5d8949f7bd46', role: "listitem" }, h("div", { key: '5b5fb01be3000dde8d01a5fa58105915f0c462f8', class: {
+        return (h(Host, { key: 'e8b4cebbe7ddcda36aab323b783e506b9e3b0e68', role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'e963177a2784af572bdeaf6e1ac8e889e51a82ae', class: {
                 wrapper: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: '669fd451472aaa8d07027cc990f1d8c5ae7071fc' }))));
+            } }, h("slot", { key: 'f56208065089cbc0d33ad101e760b2c4c51c2368' }))));
     }
     static get is() { return "tds-popover-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,7 +33,7 @@ export class TdsPopoverMenu {
                 '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: '454814b16f594bec72be5cdc608c00109c71b0d1', role: "list" }, h("slot", { key: 'c07aec34795f83fa2d0d18b63bac458ed7044f9a' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: '454814b16f594bec72be5cdc608c00109c71b0d1', role: "menu" }, h("slot", { key: 'c07aec34795f83fa2d0d18b63bac458ed7044f9a' })))));
     }
     static get is() { return "tds-popover-menu"; }
     static get encapsulation() { return "scoped"; }