@scania/tegel 1.34.0-design.tokens.beta.test.0 → 1.34.0-internal-variables-demo.0

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

@@ -2,12 +2,38 @@
 /* Typography Usage mixins */
 /* Centralized map of typography types */
 /* Utility mixin */
+:host {
+  --tds-scrollbar-width-standard: thin;
+  --tds-scrollbar-width: 10px;
+  --tds-scrollbar-height: 10px;
+  --tds-scrollbar-thumb-border-width: 3px;
+  --tds-scrollbar-thumb-border-hover-width: 2px;
+}
+
+body {
+  scrollbar-width: thin;
+}
+
+@keyframes tds-shake-animation {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
 :host {
   padding-bottom: 1px;
 }
 :host button {
   all: unset;
-  box-shadow: var(--dropdown-border);
+  box-shadow: var(--dropdown-box-shadow);
   height: 100%;
   width: 100%;
   background-color: var(--dropdown-background);
@@ -15,7 +41,7 @@
   transition: box-shadow var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
 }
 :host button:hover {
-  box-shadow: var(--dropdown-border-hover);
+  box-shadow: var(--dropdown-box-shadow-hover);
 }
 :host button .value-wrapper {
   padding: 0 16px;
@@ -40,22 +66,22 @@
   line-height: 1.3;
 }
 :host button:focus {
-  box-shadow: var(--dropdown-border-focus);
+  box-shadow: var(--dropdown-box-shadow-focus);
 }
 :host button:active {
-  box-shadow: var(--dropdown-border-active);
+  box-shadow: var(--dropdown-box-shadow-active);
 }
 :host button.error {
-  box-shadow: var(--dropdown-border-error);
+  box-shadow: var(--dropdown-box-shadow-error);
 }
 :host button.error:hover {
-  box-shadow: var(--dropdown-border-error-hover);
+  box-shadow: var(--dropdown-box-shadow-error-hover);
 }
 :host button.error:focus {
-  box-shadow: var(--dropdown-border-error-focus);
+  box-shadow: var(--dropdown-box-shadow-error-focus);
 }
 :host button:disabled {
-  box-shadow: var(--dropdown-border-disabled);
+  box-shadow: var(--dropdown-box-shadow-disabled);
   color: var(--dropdown-disabled);
 }
 :host button .menu-icon {
@@ -65,11 +91,37 @@
 /* Typography Usage mixins */
 /* Centralized map of typography types */
 /* Utility mixin */
+:host {
+  --tds-scrollbar-width-standard: thin;
+  --tds-scrollbar-width: 10px;
+  --tds-scrollbar-height: 10px;
+  --tds-scrollbar-thumb-border-width: 3px;
+  --tds-scrollbar-thumb-border-hover-width: 2px;
+}
+
+body {
+  scrollbar-width: thin;
+}
+
+@keyframes tds-shake-animation {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
 :host {
   padding-bottom: 1px;
 }
 :host .filter {
-  box-shadow: var(--dropdown-border);
+  box-shadow: var(--dropdown-box-shadow);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -80,10 +132,10 @@
   transition: box-shadow var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
 }
 :host .filter:hover {
-  box-shadow: var(--dropdown-border-hover);
+  box-shadow: var(--dropdown-box-shadow-hover);
 }
 :host .filter.disabled {
-  box-shadow: var(--dropdown-border-disabled);
+  box-shadow: var(--dropdown-box-shadow-disabled);
 }
 :host .filter.disabled .value-wrapper input {
   color: var(--dropdown-disabled);
@@ -139,13 +191,13 @@
   margin-top: 8px;
 }
 :host .filter.focus {
-  box-shadow: var(--dropdown-border-focus);
+  box-shadow: var(--dropdown-box-shadow-focus);
 }
 :host .filter.error {
-  box-shadow: var(--dropdown-border-error);
+  box-shadow: var(--dropdown-box-shadow-error);
 }
 :host .filter.error.focus {
-  box-shadow: var(--dropdown-border-error-focus);
+  box-shadow: var(--dropdown-box-shadow-error-focus);
 }
 :host .filter input {
   flex: 1;

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

@@ -38,9 +38,6 @@
 :host button.footer-top-title-button ::slotted(*) {
   margin: 0;
 }
-:host button.footer-top-title-button.expanded {
-  border-bottom: none;
-}
 :host button.footer-top-title-button.expanded tds-icon {
   transform: rotateZ(180deg);
 }

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

@@ -1,7 +1,14 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
-  color: var(--tds-header-nav-item-color);
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  color: var(--header-nav-item);
 }
 :host .item {
   all: unset;

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

@@ -1,9 +1,10 @@
 :host tds-header-item {
   display: none;
+  width: var(--header-brand-item-width);
 }
 :host tds-header-item ::slotted(*) {
-  background-image: var(--tds-background-image-scania-symbol-svg-local), var(--tds-background-image-scania-symbol-svg);
-  background-size: 30px auto;
+  background-image: var(--header-logotype-local), var(--header-logotype-cdn);
+  background-size: var(--header-brand-logo-size) auto;
   background-position: center;
   background-repeat: no-repeat;
 }

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

@@ -19,7 +19,7 @@ body {
   overflow-y: auto;
   max-height: calc(100vh - var(--tds-header-height));
   box-shadow: var(--tds-nav-dropdown-menu-box);
-  background-color: var(--tds-header-app-launcher-menu-background);
+  background-color: var(--header-app-launcher-menu-background);
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   display: block;
   box-sizing: border-box;
@@ -17,13 +20,17 @@
   height: 100%;
   padding: 0 24px;
   width: 100%;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  background-color: var(--tds-nav-dropdown-item-background);
-  color: var(--tds-header-nav-item-dropdown-opened-color);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  background-color: var(--header-nav-dropdown-item-background);
+  color: var(--header-nav-item-dropdown-opened);
 }
 :host .component ::slotted(a:hover) {
-  background-color: var(--tds-nav-item-background-hover);
+  background-color: var(--header-nav-item-background-hover);
   cursor: pointer;
 }
 :host .component ::slotted(a:focus-visible) {
@@ -32,19 +39,19 @@
   outline-offset: 1px;
 }
 :host .component-selected {
-  background-color: var(--tds-nav-item-background-selected);
+  background-color: var(--header-nav-item-background-selected);
   padding-right: 4px;
   border-left-width: 4px;
   border-left-style: solid;
-  border-left-color: var(--tds-nav-item-border-color-active);
+  border-left-color: var(--header-nav-item-border-active);
 }
 :host .component-selected ::slotted(a),
 :host .component-selected ::slotted(button) {
-  background-color: var(--tds-nav-item-background-selected);
+  background-color: var(--header-nav-item-background-selected);
 }
 
 :host(:not(:last-child)) {
-  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
 }
 
 :host([size=lg]) {
@@ -53,5 +60,5 @@
 :host([size=lg]) ::slotted(a),
 :host([size=lg]) ::slotted(button) {
   padding: 0 16px;
-  color: var(--tds-header-app-launcher-item-color);
+  color: var(--header-app-launcher-item);
 }

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

@@ -1,5 +1,8 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
-  background-color: var(--tds-header-avatar-item-background);
+  background-color: var(--header-avatar-item-background);
   display: flex;
   height: 84px;
 }
@@ -9,7 +12,7 @@
   padding: 0 16px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
 }
 :host img,
 :host slot[name=thumbnail]::slotted(*) {
@@ -22,11 +25,19 @@
   gap: 4px;
 }
 :host .user-content .header {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
 }
 :host .user-content .subheader {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
-  color: var(--tds-header-avatar-item-color);
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  color: var(--header-avatar-item);
 }

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

@@ -2,8 +2,8 @@
 :host ::slotted(a) {
   all: unset;
   box-sizing: border-box;
-  background-color: var(--tds-header-background);
-  border-right: 1px solid var(--tds-header--basic-element-border);
+  background-color: var(--header-background);
+  border-right: var(--header-item-border-right);
   width: 100%;
   height: 100%;
   cursor: pointer;
@@ -18,25 +18,31 @@
 }
 :host ::slotted(button:hover),
 :host ::slotted(a:hover) {
-  background-color: var(--tds-header-item-hover);
+  background-color: var(--header-item-hover);
 }
 :host ::slotted(button:focus-visible),
 :host ::slotted(a:focus-visible) {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--color-foreground-border-accent-focus);
   box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
   outline-offset: 1px;
+  z-index: 10;
+}
+:host ::slotted(button:active),
+:host ::slotted(a:active) {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  background-color: var(--header-basic-element-background-selected);
+  border: 2px solid var(--header-nav-item-border-active);
 }
 :host .component-active ::slotted(button),
 :host .component-active ::slotted(a) {
-  background-color: var(--tds-header--basic-element-background-open);
-  color: var(--tds-header-nav-item-dropdown-opened-color);
-  border-color: var(--tds-header--basic-element-border-open);
+  background-color: var(--header-basic-element-background-pressed);
+  color: var(--header-nav-item-dropdown-opened);
 }
 :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);
+  border-bottom-color: var(--header-nav-item-border-active);
 }

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

@@ -22,7 +22,7 @@ body {
   overflow-y: auto;
   max-height: calc(100vh - var(--tds-header-height));
   box-shadow: var(--tds-nav-dropdown-menu-box);
-  background-color: var(--tds-header-app-launcher-menu-background);
+  background-color: var(--header-app-launcher-menu-background);
   border-radius: 0;
 }
 :host .wrapper .menu:hover::-webkit-scrollbar-thumb {

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   display: block;
   width: 96px;
@@ -18,8 +21,12 @@
   align-items: center;
   flex-direction: column;
   gap: 8px;
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   background-color: var(--tds-header-app-launcher-menu-bg);
   color: var(--tds-header-app-launcher-grid-color);
   border-radius: 4px;
@@ -27,7 +34,7 @@
 }
 :host ::slotted(a:hover),
 :host ::slotted(button:hover) {
-  background-color: var(--tds-header-app-launcher-grid-hover-background);
+  background-color: var(--header-app-launcher-grid-hover-background);
   cursor: pointer;
 }
 :host ::slotted(a:focus-visible),

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

@@ -1,14 +1,21 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 .tds-header-launcher-grid-title {
   all: unset;
   box-sizing: border-box;
-  font: var(--tds-detail-04);
-  letter-spacing: var(--tds-detail-04-ls);
-  color: var(--tds-header-app-launcher-grid-category-title-color);
+  font-family: var(--detail-04-font-family);
+  font-size: var(--detail-04-font-size);
+  line-height: var(--detail-04-line-height);
+  font-weight: var(--detail-04-font-weight);
+  letter-spacing: var(--detail-04-letter-spacing);
+  text-transform: var(--detail-04-text-transform);
+  color: var(--header-app-launcher-grid-category-title);
   text-transform: uppercase;
   height: 48px;
   padding: 0 16px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
   margin: 0;
 }

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

@@ -1,4 +1,4 @@
 :host {
   display: block;
-  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
 }

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

@@ -1,14 +1,21 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 .tds-header-launcher-list-title {
   all: unset;
   box-sizing: border-box;
-  font: var(--tds-detail-06);
-  letter-spacing: var(--tds-detail-06-ls);
-  color: var(--tds-header-app-launcher-category-title-color);
+  font-family: var(--detail-06-font-family);
+  font-size: var(--detail-06-font-size);
+  line-height: var(--detail-06-line-height);
+  font-weight: var(--detail-06-font-weight);
+  letter-spacing: var(--detail-06-letter-spacing);
+  text-transform: var(--detail-06-text-transform);
+  color: var(--header-app-launcher-category-title);
   text-transform: uppercase;
   height: 48px;
   padding: 0 16px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
   margin: 0;
 }

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

@@ -1,8 +1,9 @@
 h4 {
   box-sizing: border-box;
-  color: var(--tds-header-nav-item-color);
-  font-weight: normal;
-  font-family: var(--tds-font-family-headline);
+  color: var(--header-nav-item);
+  font-weight: var(--header-font-weight);
+  font-family: var(--header-font-family-headline);
+  text-transform: var(--header-text-transform);
   letter-spacing: normal;
   position: relative;
   white-space: nowrap;

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

@@ -23,7 +23,7 @@ html,
 tds-header {
   display: block;
   height: var(--tds-header-height);
-  background-color: var(--tds-header-background);
+  background-color: var(--header-background);
   width: 100%;
   z-index: 300;
 }
@@ -34,7 +34,7 @@ tds-header tds-header-dropdown-list-item button * {
 
 nav {
   box-sizing: border-box;
-  background-color: var(--tds-header-background);
+  background-color: var(--header-background);
   width: 100%;
   display: block;
 }
@@ -57,7 +57,7 @@ nav .tds-header-middle-spacer {
   display: block;
   flex-grow: 1;
   height: var(--tds-header-height);
-  border-right: 1px solid var(--tds-header--basic-element-border);
+  border-right: 1px solid var(--header-basic-element-border);
 }
 @media screen and (min-width: 992px) {
   nav tds-header-dropdown,
@@ -68,5 +68,5 @@ nav .tds-header-middle-spacer {
 nav tds-header-item:nth-child(3),
 nav tds-header-dropdown:nth-child(3) {
   /* Adds a left border to the button after the title, if any */
-  border-left: 1px solid var(--tds-header--basic-element-border);
+  border-left: 1px solid var(--header-basic-element-border);
 }

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

@@ -17,7 +17,7 @@ export class Icon {
             }
         });
         this.name = 'truck';
-        this.size = '16px';
+        this.size = undefined;
         this.svgTitle = undefined;
         this.tdsAriaHidden = false;
         this.svgDescription = undefined;
@@ -25,9 +25,24 @@ export class Icon {
         this.arrayOfIcons = [];
     }
     componentWillLoad() {
-        this.detectAndSetBrand();
+        const brand = this.detectBrand();
+        this.setBrand(brand);
+        if (this.size) {
+            return;
+        }
+        const insideSideMenu = this.host.closest('tds-side-menu');
+        const brandSizeMap = {
+            scania: '24px',
+            traton: '16px',
+        };
+        if (insideSideMenu && brandSizeMap[brand]) {
+            this.size = brandSizeMap[brand];
+        }
+        if (!this.size) {
+            this.size = '16px';
+        }
     }
-    detectAndSetBrand() {
+    detectBrand() {
         const brandClasses = Object.keys(brandIconMap);
         // First try to find brand class using closest
         let matchingBrand = brandClasses.find((brand) => this.host.closest(`.${brand}`));
@@ -35,8 +50,11 @@ export class Icon {
         if (!matchingBrand) {
             matchingBrand = brandClasses.find((brand) => document.documentElement.classList.contains(brand));
         }
-        // Set the icons_object based on the found brand or default to scania
-        this.icons_object = matchingBrand ? brandIconMap[matchingBrand] : scaniaIcons;
+        return matchingBrand || 'scania'; // default to Scania if not found
+    }
+    setBrand(brand) {
+        // Set the icons_object based on the brand
+        this.icons_object = brandIconMap[brand];
         this.arrayDataWatcher(this.icons_object);
     }
     arrayDataWatcher(newValue) {
@@ -49,7 +67,7 @@ export class Icon {
         this.arrayOfIcons = [...this.arrayOfIcons];
     }
     render() {
-        return h(Host, { key: 'fea032a0b7886986e2d64ec833c83d96f8d4e106' }, this.setIcons());
+        return h(Host, { key: 'ed33924aaa882ef99e74af02a04a887523081d4c' }, this.setIcons());
     }
     static get is() { return "tds-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -104,8 +122,7 @@ export class Icon {
                     "text": "Pass a size of icon as a string, for example, 32px, 1rem, 4em..."
                 },
                 "attribute": "size",
-                "reflect": true,
-                "defaultValue": "'16px'"
+                "reflect": true
             },
             "svgTitle": {
                 "type": "string",

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

@@ -3,7 +3,7 @@
   display: inline-block;
   color: var(--popover-canvas-text);
   background-color: var(--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(--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: '007d1ad318e2819ca95b3f855540308527e9bea4', class: {
+                [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
+            } }, h("tds-popover-core", Object.assign({ key: '3d2c887c763dec9f93cc943a29d108ec4708df25', 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: 'b16b226f5b748403ce4a20e2e289b7fb0d0e3554' }, h("slot", { key: 'ecdee2eaebdd35bb0ef634b8a0ef9bbf8e1a3fc7' })))));
     }
     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-menu/popover-menu.css

@@ -4,7 +4,7 @@
   width: 160px;
   background-color: var(--popover-menu-background);
   padding: 16px 6px;
-  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--popover-menu-box-shadow);
   border-radius: 4px;
   z-index: 900;
 }