@scania/tegel 1.27.0 → 1.28.0

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

@@ -1,4 +1,4 @@
-/* Multibrand tokens */
+/* Multibrand tokens: Scania colors */
 /* Tegel Color Primitives palette */
 :root {
   /* Neutral Solid */
@@ -344,6 +344,7 @@
   --system-danger-subtle: var(--scania-extended-red-800);
 }
 
+/* Multibrand tokens: Scania typography */
 /* Scania Typography Usage Tokens */
 :root,
 .scania {
@@ -400,31 +401,31 @@
   --detail-06-line-height: 16px;
   --detail-07-line-height: 8px;
   /* Font family tokens */
-  --super-type-01-font-family: "Scania Sans Headline";
-  --super-type-02-font-family: "Scania Sans Headline";
-  --super-type-03-font-family: "Scania Sans Headline";
-  --expressive-headline-01-font-family: "Scania Sans Headline";
-  --expressive-headline-02-font-family: "Scania Sans Headline";
-  --headline-01-font-family: "Scania Sans Headline";
-  --headline-02-font-family: "Scania Sans";
-  --headline-03-font-family: "Scania Sans";
-  --headline-04-font-family: "Scania Sans";
-  --headline-05-font-family: "Scania Sans";
-  --headline-06-font-family: "Scania Sans";
-  --headline-07-font-family: "Scania Sans Semi Condensed";
-  --paragraph-01-font-family: "Scania Sans";
-  --paragraph-02-font-family: "Scania Sans";
-  --body-01-font-family: "Scania Sans";
-  --body-02-font-family: "Scania Sans";
-  --body-link-01-font-family: "Scania Sans";
-  --body-link-02-font-family: "Scania Sans";
-  --detail-01-font-family: "Scania Sans Semi Condensed";
-  --detail-02-font-family: "Scania Sans Semi Condensed";
-  --detail-03-font-family: "Scania Sans Semi Condensed";
-  --detail-04-font-family: "Scania Sans";
-  --detail-05-font-family: "Scania Sans Semi Condensed";
-  --detail-06-font-family: "Scania Sans";
-  --detail-07-font-family: "Scania Sans Semi Condensed";
+  --super-type-01-font-family: "Scania Sans Headline", arial, "Helvetica Neue";
+  --super-type-02-font-family: "Scania Sans Headline", arial, "Helvetica Neue";
+  --super-type-03-font-family: "Scania Sans Headline", arial, "Helvetica Neue";
+  --expressive-headline-01-font-family: "Scania Sans Headline", arial, "Helvetica Neue";
+  --expressive-headline-02-font-family: "Scania Sans Headline", arial, "Helvetica Neue";
+  --headline-01-font-family: "Scania Sans Headline", arial, "Helvetica Neue";
+  --headline-02-font-family: "Scania Sans", arial, "Helvetica Neue";
+  --headline-03-font-family: "Scania Sans", arial, "Helvetica Neue";
+  --headline-04-font-family: "Scania Sans", arial, "Helvetica Neue";
+  --headline-05-font-family: "Scania Sans", arial, "Helvetica Neue";
+  --headline-06-font-family: "Scania Sans", arial, "Helvetica Neue";
+  --headline-07-font-family: "Scania Sans Semi Condensed", arial, "Helvetica Neue";
+  --paragraph-01-font-family: "Scania Sans", arial, "Helvetica Neue";
+  --paragraph-02-font-family: "Scania Sans", arial, "Helvetica Neue";
+  --body-01-font-family: "Scania Sans", arial, "Helvetica Neue";
+  --body-02-font-family: "Scania Sans", arial, "Helvetica Neue";
+  --body-link-01-font-family: "Scania Sans", arial, "Helvetica Neue";
+  --body-link-02-font-family: "Scania Sans", arial, "Helvetica Neue";
+  --detail-01-font-family: "Scania Sans Semi Condensed", arial, "Helvetica Neue";
+  --detail-02-font-family: "Scania Sans Semi Condensed", arial, "Helvetica Neue";
+  --detail-03-font-family: "Scania Sans Semi Condensed", arial, "Helvetica Neue";
+  --detail-04-font-family: "Scania Sans", arial, "Helvetica Neue";
+  --detail-05-font-family: "Scania Sans Semi Condensed", arial, "Helvetica Neue";
+  --detail-06-font-family: "Scania Sans", arial, "Helvetica Neue";
+  --detail-07-font-family: "Scania Sans Semi Condensed", arial, "Helvetica Neue";
   /* Font weight tokens */
   --super-type-01-font-weight: bold;
   --super-type-02-font-weight: bold;
@@ -505,6 +506,48 @@
   --detail-07-text-transform: none;
 }
 
+/* Multibrand tokens: Scania spacing */
+:root {
+  /* Base spacing units */
+  --unit-2: 2px;
+  --unit-4: 4px;
+  --unit-8: 8px;
+  --unit-12: 12px;
+  --unit-16: 16px;
+  --unit-20: 20px;
+  --unit-24: 24px;
+  --unit-32: 32px;
+  --unit-40: 40px;
+  --unit-48: 48px;
+  --unit-56: 56px;
+  --unit-64: 64px;
+  --unit-80: 80px;
+  --unit-96: 96px;
+  --unit-120: 120px;
+}
+
+:root {
+  --radius-none: 0;
+  --radius-full: 9999px;
+}
+
+:root,
+.scania {
+  --radius-narrow: var(--unit-4);
+  --radius-soft: var(--unit-8);
+  --radius-rounded: var(--unit-32);
+  --radius-circle: 500px;
+  --radius-surface-clickable: var(--unit-4);
+  --radius-surface-field: var(--unit-4);
+  --radius-area-large: var(--unit-16);
+  --radius-area-small: var(--unit-2);
+  --space-tiny: var(--unit-4);
+  --space-small: var(--unit-16);
+  --space-medium: var(--unit-24);
+  --space-large: var(--unit-48);
+  --space-huge: var(--unit-80);
+}
+
 :root,
 html {
   /* ========================================================================
@@ -4714,114 +4757,136 @@ html {
 @font-face {
   font-family: "Scania Sans";
   font-weight: bold;
+  font-display: swap;
   unicode-range: U+0400-04FF;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCY-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans";
   font-style: italic;
+  font-display: swap;
   unicode-range: U+0400-04FF;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Italic.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCY-Italic.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans";
   unicode-range: U+0400-04FF;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCY-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Condensed";
   font-weight: bold;
+  font-display: swap;
   unicode-range: U+0400-04FF;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Condensed";
   font-style: italic;
+  font-display: swap;
   unicode-range: U+0400-04FF;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Italic.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Italic.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Condensed";
   unicode-range: U+0400-04FF;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Headline";
   font-weight: bold;
   unicode-range: U+0400-04FF;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYHeadline-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Headline";
   unicode-range: U+0400-04FF;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYHeadline-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Semi Condensed";
   font-weight: bold;
   unicode-range: U+0400-04FF;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Semi Condensed";
   font-style: italic;
   unicode-range: U+0400-04FF;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Semi Condensed";
   unicode-range: U+0400-04FF;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans";
   font-weight: bold;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSans-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans";
   font-style: italic;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Italic.woff") format("woff"), url("./assets/fonts/latin/ScaniaSans-Italic.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans";
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSans-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Condensed";
   font-weight: bold;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansCondensed-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Condensed";
   font-style: italic;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Italic.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansCondensed-Italic.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Condensed";
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansCondensed-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Headline";
   font-weight: bold;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansHeadline-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Headline";
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansHeadline-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Semi Condensed";
   font-weight: bold;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansSemiCondensed-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Semi Condensed";
   font-style: italic;
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Italic.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansSemiCondensed-Italic.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Semi Condensed";
+  font-display: swap;
   src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansSemiCondensed-Regular.woff") format("woff");
 }
 /* https://medium.com/swlh/full-text-styling-with-a-single-line-of-css-838e8c666f4d */
@@ -5150,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. */
@@ -6643,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);
@@ -6892,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%);
 }
@@ -6928,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%);
 }
@@ -6944,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);
@@ -6961,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);
@@ -6979,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);
@@ -7020,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);
@@ -7032,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);
@@ -7060,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 {
@@ -7088,6 +7142,7 @@ tds-link tds-icon {
   --tds-textarea-border-bottom-hover: var(--tds-grey-800);
   --tds-textarea-border-bottom-success: var(--tds-grey-958);
   --tds-textarea-border-bottom-error: var(--tds-negative);
+  --tds-textarea-border-bottom-read-only-color: var(--tds-grey-500);
   --tds-textarea-icon-read-only-color: var(--tds-grey-958);
   --tds-textarea-icon-read-only-label-color: var(--tds-grey-958);
   --tds-textarea-resize-icon: var(--tds-grey-500);
@@ -7175,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);
 }
@@ -7220,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"; }