@scania/tegel 1.32.2 → 1.33.0-tegel-cli-beta.0

package/dist/collection/assets/logos/scania/scania-wordmark.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="566.93px" height="93.754px" viewBox="0 0 566.93 93.754" enable-background="new 0 0 566.93 93.754" xml:space="preserve">
+<path fill="#041E42" d="M264.588,54.663h-23.774l11.885-31.01L264.588,54.663z M375.749,89.829h37.5V3.804h-32.236v45.34
+	l-33.946-45.34h-40.81V73.95l-27.08-70.146h-52.333l-19.629,50.859h-31.967c-1.593,10.166-7.477,15.557-17.77,15.557
+	c-11.89,0-18.511-9.188-18.511-23.403c0-14.213,6.748-23.286,18.511-23.286c9.684,0,15.929,5.151,17.28,13.486h35.419v-2.334
+	C210.179,15.688,193.749,0,157.846,0c-38.729,0-53.437,19.365-53.437,46.816c0,0.629,0.02,1.25,0.033,1.875
+	c-4.857-5.908-14.18-9.351-29.564-11.558l-22.426-3.188c-8.457-1.221-13.727-2.197-13.727-6.367c0-3.555,3.307-7.358,12.505-7.358
+	c10.171,0,15.812,3.926,15.812,10.298h36.024v-1.836c0-17.163-17.157-28.438-50.863-28.438c-34.674,0-49.878,12.627-49.878,30.396
+	c0,13.848,9.066,21.938,30.391,24.882l25.371,3.545c9.066,1.229,12.012,3.065,12.012,6.865c0,4.901-4.658,7.606-15.078,7.606
+	c-11.763,0-17.147-5.029-17.147-12.013H0v1.964c0,19.11,18.013,30.137,53.433,30.137c32.729,0,51.704-7.228,54.814-25.487
+	c6.548,15.674,21.947,25.614,49.599,25.614c20.972,0,32.739-5.713,39.804-14.325l-4.013,10.399h33.696l4.779-12.373h41.177
+	l4.779,12.373h28.188h6.123h26.113V40.317L375.749,89.829z M519.127,54.663h-23.771l11.885-31.01L519.127,54.663z M566.93,89.829
+	L533.717,3.804h-52.334L454.304,73.95V3.794h-32.969v86.035h26.836h6.133h27.566l4.775-12.373h41.182l4.785,12.373H566.93z"/>
+</svg>

package/dist/collection/assets/logos/traton/traton-logotype-black.svg

@@ -0,0 +1 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.93 90.71"><defs><style>.cls-1{fill:#000;stroke-width:0}</style></defs><path class="cls-1" d="M493.47 87.6h15.55V37.88l57.91 51.88V4.24h-15.57v51.4L493.48 2.09l-.01 85.51zM427.51 16.35c-15.58 0-28.26 12.68-28.26 28.26s12.68 28.27 28.26 28.27 28.27-12.68 28.27-28.27-12.68-28.26-28.27-28.26m0 71.93c-24.08 0-43.66-19.59-43.66-43.67S403.43.94 427.5.94s43.67 19.6 43.67 43.67-19.59 43.67-43.67 43.67M295.01 18.36H326V87.6h15.95V18.36h30.99V4.24h-77.93v14.12zM194.54 87.6h18.29l42.39-83.37h-18.29L194.54 87.6zM256.9 53.25l17.51 34.35h18.65l-26.88-52.63-9.28 18.28zM178.23 35.17c0-16.85-13.33-30.93-30.3-30.93h-46.55V87.6h15.95V65.54l29.9-.1L158.5 87.6h17.88l-12.82-25.25c8.42-4.49 14.67-14.9 14.67-27.18m-34.06 16.48h-26.84V18.36h26.84c11.73 0 18.24 8.61 18.24 16.7 0 7.06-4.8 16.59-18.24 16.59M0 4.24v14.12h30.99V87.6h15.95V18.36h30.99V4.24H0z"/></svg>

package/dist/collection/assets/logos/traton/traton-logotype-blue.svg

@@ -0,0 +1 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 566.9 90.7"><defs><style>.cls-1{fill:#001d21;stroke-width:0}</style></defs><path class="cls-1" d="M493.5 87.6H509V37.9l57.9 51.9V4.2h-15.5v51.4L493.5 2.1v85.5zM427.5 16.3c-15.6 0-28.3 12.7-28.3 28.3s12.7 28.3 28.3 28.3 28.3-12.7 28.3-28.3-12.7-28.3-28.3-28.3m0 72c-24.1 0-43.7-19.6-43.7-43.7S403.4.9 427.5.9s43.7 19.6 43.7 43.7-19.6 43.7-43.7 43.7M295 18.4h31v69.2h16V18.4h30.9V4.2H295v14.2zM194.5 87.6h18.3l42.4-83.4h-18.3l-42.4 83.4zM256.9 53.3l17.5 34.3h18.7L266.2 35l-9.3 18.3zM178.2 35.2c0-16.9-13.3-30.9-30.3-30.9h-46.6v83.4h16V65.6h29.9c0-.1 11.3 22.1 11.3 22.1h17.9l-12.8-25.3c8.4-4.5 14.7-14.9 14.7-27.2m-34.1 16.4h-26.8V18.4h26.8c11.7 0 18.2 8.6 18.2 16.7s-4.8 16.6-18.2 16.6M0 4.2v14.2h31v69.2h15.9V18.4h31V4.2H0z"/></svg>

package/dist/collection/assets/logos/traton/traton-logotype-white.svg

@@ -0,0 +1 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.93 90.71"><defs><style>.cls-1{fill:#fff;stroke-width:0}</style></defs><path class="cls-1" d="M493.47 87.6h15.55V37.88l57.91 51.88V4.24h-15.57v51.4L493.48 2.09l-.01 85.51zM427.51 16.35c-15.58 0-28.26 12.68-28.26 28.26s12.68 28.27 28.26 28.27 28.27-12.68 28.27-28.27-12.68-28.26-28.27-28.26m0 71.93c-24.08 0-43.66-19.59-43.66-43.67S403.43.94 427.5.94s43.67 19.6 43.67 43.67-19.59 43.67-43.67 43.67M295.01 18.36H326V87.6h15.95V18.36h30.99V4.24h-77.93v14.12zM194.54 87.6h18.29l42.39-83.37h-18.29L194.54 87.6zM256.9 53.25l17.51 34.35h18.65l-26.88-52.63-9.28 18.28zM178.23 35.17c0-16.85-13.33-30.93-30.3-30.93h-46.55V87.6h15.95V65.54l29.9-.1L158.5 87.6h17.88l-12.82-25.25c8.42-4.49 14.67-14.9 14.67-27.18m-34.06 16.48h-26.84V18.36h26.84c11.73 0 18.24 8.61 18.24 16.7 0 7.06-4.8 16.59-18.24 16.59M0 4.24v14.12h30.99V87.6h15.95V18.36h30.99V4.24H0z"/></svg>

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

@@ -87,15 +87,15 @@
   color: var(--tds-accordion-color-disabled);
 }
 .tds-accordion-item.disabled:hover,
-.tds-accordion-item.disabled:hover *, .tds-accordion-item.disabled:focus,
-.tds-accordion-item.disabled:focus *, .tds-accordion-item.disabled:active,
+.tds-accordion-item.disabled:hover *, .tds-accordion-item.disabled:focus-within,
+.tds-accordion-item.disabled:focus-within *, .tds-accordion-item.disabled:active,
 .tds-accordion-item.disabled:active *, .tds-accordion-item.disabled.active,
 .tds-accordion-item.disabled.active * {
   cursor: not-allowed;
 }
 .tds-accordion-item.disabled:hover .tds-accordion-header-icon-start,
-.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end, .tds-accordion-item.disabled:focus .tds-accordion-header-icon-start,
-.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end, .tds-accordion-item.disabled:active .tds-accordion-header-icon-start,
+.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end, .tds-accordion-item.disabled:focus-within .tds-accordion-header-icon-start,
+.tds-accordion-item.disabled:focus-within .tds-accordion-header-icon-end, .tds-accordion-item.disabled:active .tds-accordion-header-icon-start,
 .tds-accordion-item.disabled:active .tds-accordion-header-icon-end, .tds-accordion-item.disabled.active .tds-accordion-header-icon-start,
 .tds-accordion-item.disabled.active .tds-accordion-header-icon-end {
   background-color: var(--tds-accordion-bg);
@@ -103,8 +103,8 @@
   pointer-events: none;
 }
 .tds-accordion-item.disabled:hover .tds-accordion-header-icon-start::after,
-.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end::after, .tds-accordion-item.disabled:focus .tds-accordion-header-icon-start::after,
-.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end::after, .tds-accordion-item.disabled:active .tds-accordion-header-icon-start::after,
+.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end::after, .tds-accordion-item.disabled:focus-within .tds-accordion-header-icon-start::after,
+.tds-accordion-item.disabled:focus-within .tds-accordion-header-icon-end::after, .tds-accordion-item.disabled:active .tds-accordion-header-icon-start::after,
 .tds-accordion-item.disabled:active .tds-accordion-header-icon-end::after, .tds-accordion-item.disabled.active .tds-accordion-header-icon-start::after,
 .tds-accordion-item.disabled.active .tds-accordion-header-icon-end::after {
   border-color: transparent;
@@ -124,20 +124,25 @@
   margin-left: 0;
   margin-right: var(--tds-spacing-element-16);
 }
-.tds-accordion-item:focus {
+.tds-accordion-item:first-child {
+  margin-bottom: -1px;
+  border-bottom: 1px solid var(--tds-accordion-border);
+}
+.tds-accordion-item:has(.tds-accordion-header-icon-start:focus), .tds-accordion-item:has(.tds-accordion-header-icon-end:focus) {
   border-top: 1px solid var(--tds-accordion-border-focus);
 }
-.tds-accordion-item[disabled=true]:focus {
+.tds-accordion-item[disabled=true]:focus-within {
   border-color: var(--tds-accordion-border);
 }
 
-:host(:focus) .tds-accordion-item {
-  outline: 2px solid var(--tds-blue-400);
+:host(:focus-within) .tds-accordion-item:has(.tds-accordion-header-icon-start:focus), :host(:focus-within) .tds-accordion-item:has(.tds-accordion-header-icon-end:focus) {
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
-:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,
-:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end {
+:host(:focus-within) .tds-accordion-item .tds-accordion-header-icon-start,
+:host(:focus-within) .tds-accordion-item .tds-accordion-header-icon-end {
   background-color: var(--tds-accordion-background-focus);
   outline: none;
 }
@@ -147,8 +152,33 @@
   background-color: var(--tds-accordion-background-hover);
 }
 
-:host(:active) .tds-accordion-header-icon-start,
-:host(:active) .tds-accordion-header-icon-end {
+:host(:focus-within:hover) .tds-accordion-item:has(.tds-accordion-header-icon-start:focus), :host(:focus-within:hover) .tds-accordion-item:has(.tds-accordion-header-icon-end:focus) {
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
+  z-index: 1;
+}
+:host(:focus-within:hover) .tds-accordion-item .tds-accordion-header-icon-start,
+:host(:focus-within:hover) .tds-accordion-item .tds-accordion-header-icon-end {
+  background-color: var(--tds-accordion-background-hover);
+  outline: none;
+}
+
+.tds-accordion-item:has(:hover) {
+  background-color: var(--tds-accordion-background-hover);
+}
+
+.tds-accordion-item:has(.tds-accordion-header-icon-start:active),
+.tds-accordion-item:has(.tds-accordion-header-icon-end:active) {
+  background-color: var(--tds-accordion-background-active);
+}
+
+:host(:hover) .tds-accordion-item:has(.tds-accordion-header-icon-start:active) .tds-accordion-header-icon-start,
+:host(:hover) .tds-accordion-item:has(.tds-accordion-header-icon-end:active) .tds-accordion-header-icon-end {
   background-color: var(--tds-accordion-background-active);
+}
+
+.tds-accordion-header-icon-start:active,
+.tds-accordion-header-icon-end:active {
   outline: none;
 }

package/dist/collection/components/accordion/accordion.css

@@ -1,6 +1,7 @@
 :host {
   display: block;
   box-sizing: border-box;
+  background-color: transparent;
 }
 :host * {
   box-sizing: border-box;
@@ -11,9 +12,10 @@
 }
 
 :host(:focus) {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 :host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,
 :host(:focus) .tds-accordion-item .tds-accordion-header-icon-end {
@@ -65,4 +67,12 @@
 
 :host(.hide-last-border:last-child) {
   border-bottom: none;
+}
+
+:host(.tds-mode-variant-secondary) {
+  background-color: var(--tds-accordion-background);
+}
+
+:host(.tds-mode-variant-primary) {
+  background-color: var(--tds-accordion-background);
 }

package/dist/collection/components/banner/banner.css

@@ -77,7 +77,8 @@
   outline: none;
 }
 :host .banner-close button:focus-visible tds-icon {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }

package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.css

@@ -8,9 +8,10 @@
   text-decoration: underline;
 }
 :host([role=listitem]) div ::slotted(*:focus-visible) {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
   outline-offset: 0;
 }
 :host([role=listitem]) div.current ::slotted(*),

package/dist/collection/components/button/button.css

@@ -214,9 +214,10 @@ button:focus {
   outline: 1px solid var(--scania-blue-400);
 }
 button:focus-visible {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 button.xs {
   padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);

package/dist/collection/components/chip/chip.css

@@ -77,9 +77,10 @@
   z-index: -1;
 }
 .component .tds-chip-component input:focus-visible + label {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
   background-color: var(--tds-chips-background-focus);
 }
 .component .tds-chip-component input:checked + label {

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

@@ -21,9 +21,9 @@
   color: var(--tds-dropdown-option-color-disabled);
 }
 :host .dropdown-option button:focus {
-  outline: 2px solid var(--tds-blue-400);
-  box-shadow: 0 0 0 1px var(--tds-white);
-  outline-offset: 1px;
+  outline: 2px solid var(--tds-dropdown-option-focus);
+  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline-offset: -2px;
 }
 :host .dropdown-option button {
   all: unset;
@@ -69,11 +69,11 @@
   padding: 7px 16px 8px;
 }
 :host .dropdown-option:hover {
-  background-color: var(--tds-dropdown-option-background-hover);
+  border-bottom-color: var(--tds-dropdown-option-border-hover);
   cursor: pointer;
 }
 :host .dropdown-option:hover.disabled {
-  background-color: var(--tds-dropdown-option-background);
+  border-bottom-color: var(--tds-dropdown-option-border-hover);
   cursor: not-allowed;
 }
 

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js

@@ -6,7 +6,7 @@ import { convertToString } from "../../../utils/convertToString";
 export class TdsDropdownOption {
     constructor() {
         this.parentElement = null;
-        // @ts-ignore
+        // @ts-expect-error - label property is used internally for text content tracking
         // eslint-disable-next-line no-unused-vars,
         this.label = '';
         this.componentWillRender = () => {
@@ -65,6 +65,7 @@ export class TdsDropdownOption {
         this.value = undefined;
         this.internalValue = undefined;
         this.disabled = false;
+        this.tdsAriaLabel = undefined;
         this.selected = false;
         this.multiselect = false;
         this.size = 'lg';
@@ -79,8 +80,13 @@ export class TdsDropdownOption {
     componentWillLoad() {
         this.internalValue = convertToString(this.value);
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel && !this.multiselect) {
+            console.warn('Tegel Dropdown component: tdsAriaLabel prop is missing');
+        }
+    }
     render() {
-        return (h(Host, { key: '0964b9a046c2894b96480c133538337a56d048a2' }, h("div", { key: '1f28fde6080ad6c489c1ed4a7c449bb45ab85b99', class: `dropdown-option 
+        return (h(Host, { key: 'dd7f679d0a2c4970af173966e43109192eddbf66' }, h("div", { key: '97c7da4773c735874a9c338adc88cc2500a0c800', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -90,9 +96,9 @@ export class TdsDropdownOption {
                 }
             } }, h("tds-checkbox", { onTdsChange: (event) => {
                 this.handleMultiselect(event);
-            }, disabled: this.disabled, checked: this.selected, class: {
+            }, disabled: this.disabled, checked: this.selected, tdsAriaLabel: this.tdsAriaLabel, class: {
                 [this.size]: true,
-            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, onClick: () => {
+            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, "aria-label": this.tdsAriaLabel, onClick: () => {
                 this.handleSingleSelect();
             }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
     }
@@ -145,6 +151,23 @@ export class TdsDropdownOption {
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines aria-label attribute for the option"
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }

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

@@ -29,19 +29,10 @@
   line-height: 1.3;
 }
 :host button:focus {
-  border-bottom-color: var(--tds-dropdown-border-bottom-open);
-}
-:host button:focus::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background: var(--tds-dropdown-border-bottom-open);
+  border-bottom: 0;
 }
 :host button.error {
-  border-bottom: 1px solid var(--tds-negative);
+  border-bottom: 1px solid var(--tds-dropdown-error);
 }
 :host button.error:focus {
   border-bottom-color: transparent;
@@ -52,8 +43,8 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 2px;
-  background: var(--tds-negative);
+  height: 1px;
+  background: var(--tds-dropdown-error);
 }
 :host button:disabled {
   color: var(--tds-dropdown-disabled-color);
@@ -63,6 +54,12 @@
   margin-right: 0;
 }
 
+:host .dropdown-select:focus-within {
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
+  z-index: 1;
+}
 :host .filter {
   display: flex;
   align-items: center;
@@ -80,6 +77,9 @@
   color: var(--tds-dropdown-disabled-color);
   border-bottom: 1px solid transparent;
 }
+:host .filter.disabled .value-wrapper input {
+  color: var(--tds-dropdown-disabled-color);
+}
 :host .filter .value-wrapper {
   display: flex;
   width: 100%;
@@ -123,19 +123,13 @@
   margin-top: 8px;
 }
 :host .filter.focus {
-  border-bottom-color: transparent;
+  border-bottom: 0;
 }
-:host .filter.focus::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: var(--tds-dropdown-border-bottom-open);
+:host .filter.focus:hover {
+  border-bottom: 0;
 }
 :host .filter.error {
-  border-bottom: 1px solid var(--tds-negative);
+  border-bottom: 1px solid var(--tds-dropdown-error);
 }
 :host .filter.error.focus {
   border-bottom-color: transparent;
@@ -146,8 +140,8 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 2px;
-  background: var(--tds-negative);
+  height: 1px;
+  background: var(--tds-dropdown-error);
 }
 :host .filter input {
   flex: 1;
@@ -210,12 +204,16 @@ body {
 :host .dropdown-select {
   position: relative;
 }
+:host .dropdown-select button:focus {
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
+  z-index: 1;
+  border-radius: 0;
+}
 :host .dropdown-select button {
   transition: border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
 }
-:host .dropdown-select button:focus {
-  border-bottom-color: var(--tds-dropdown-border-bottom);
-}
 :host .dropdown-select button:hover {
   border-bottom-color: var(--tds-dropdown-border-bottom-hover);
 }
@@ -321,10 +319,9 @@ body {
 :host .dropdown-list {
   z-index: 100;
   position: absolute;
-  margin-top: 1px;
   width: 100%;
   transform-origin: top;
-  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px 0;
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
   border-radius: var(--tds-dropdown-list-border-radius-down);
   overflow-y: auto;
   transform: scaleY(0);
@@ -376,7 +373,6 @@ body {
   transform-origin: bottom;
   display: flex;
   flex-direction: column-reverse;
-  box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 3px 0;
   border-radius: var(--tds-dropdown-list-border-radius-up);
 }
 :host .dropdown-list.up.label-outside {

package/dist/collection/components/dropdown/dropdown.js

@@ -4,6 +4,11 @@ import findPreviousFocusableElement from "../../utils/findPreviousFocusableEleme
 import appendHiddenInput from "../../utils/appendHiddenInput";
 import { convertToString, convertArrayToStrings } from "../../utils/convertToString";
 import generateUniqueId from "../../utils/generateUniqueId";
+function hasValueChanged(newValue, currentValue) {
+    if (newValue.length !== currentValue.length)
+        return true;
+    return newValue.some((val) => !currentValue.includes(val));
+}
 /**
  * @slot <default> - <b>Unnamed slot.</b> For dropdown option elements.
  */
@@ -172,7 +177,7 @@ export class TdsDropdown {
         // Normalize to array
         const normalizedValue = this.normalizeValue(newValue);
         // Only update if actually changed
-        if (this.hasValueChanged(normalizedValue, this.selectedOptions)) {
+        if (hasValueChanged(normalizedValue, this.selectedOptions)) {
             this.updateDropdownStateFromUser(normalizedValue);
         }
     }
@@ -197,11 +202,6 @@ export class TdsDropdown {
             .split(',')
             .filter((v) => v !== '');
     }
-    hasValueChanged(newValue, currentValue) {
-        if (newValue.length !== currentValue.length)
-            return true;
-        return newValue.some((val) => !currentValue.includes(val));
-    }
     updateDropdownStateInternal(values) {
         this.updateDropdownState(values, false);
     }
@@ -264,7 +264,23 @@ export class TdsDropdown {
             value: value !== null && value !== void 0 ? value : null,
         });
     }
-    async setValue(value) {
+    /** Method for setting the selected value of the Dropdown.
+     *
+     * Single selection example:
+     *
+     * <code>
+     *  dropdown.setValue('option-1', 'Option 1');
+     * </code>
+     *
+     * Multiselect example:
+     *
+     * <code>
+     *  dropdown.setValue(['option-1', 'option-2']);
+     * </code>
+     */
+    // @ts-expect-error for label: the label is optional here ONLY to not break the API. Should be removed for 2.0.
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+    async setValue(value, label) {
         let normalizedValue;
         if (Array.isArray(value)) {
             normalizedValue = convertArrayToStrings(value);
@@ -301,23 +317,17 @@ export class TdsDropdown {
         // Always trigger the focus event to open the dropdown
         this.handleFocus({});
     }
-    /** Method for setting the value of the Dropdown.
-     *
-     * Single selection example:
-     *
-     * <code>
-     *  dropdown.setValue('option-1', 'Option 1');
-     * </code>
-     *
-     * Multiselect example:
-     *
-     * <code>
-     *  dropdown.setValue(['option-1', 'option-2']);
-     * </code>
-     */
+    /** Method for closing the Dropdown. */
     async close() {
         this.open = false;
     }
+    /** Method to force update the dropdown display value.
+     * Use this method when you programmatically change the text content of dropdown options
+     * to ensure the selected value display updates immediately.
+     */
+    async updateDisplay() {
+        this.updateDisplayValue();
+    }
     onAnyClick(event) {
         if (this.open) {
             // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
@@ -451,9 +461,9 @@ export class TdsDropdown {
         // Generate unique IDs for associating labels and helpers with the input/button
         const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
         const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
-        return (h(Host, { key: 'aed0a485fc4634cdba2599fa9792fb6289a7459c', class: {
+        return (h(Host, { key: '676f9d61c5fd8488cedbc949757e992be13e49eb', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '39d11ac06547b133540f037a0c09ddc40b972cb5', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '8ab624d380289699887b660d30512b2e892f71c0', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'ac4f3c9ca2719acc72f06ae977bf032d05913c6d', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'c9d4142f63e315c73daef5038f266a32b05559a1', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -503,7 +513,7 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '989c425c5a608444533e33ad83313aa56569c225', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-hidden": this.open ? 'false' : 'true', inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '6de931198040eec79815f83e2617d2646507b6a1', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -514,11 +524,11 @@ export class TdsDropdown {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '6e54bbb0eacf27cfdbf3b393f2c9e690adb394e8', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '4bdaf935cd213f63e7a8665b5d6f69ee0589d7b9', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '112c76fa88eef7798b9b0d435ae03e62880a9ff8', id: helperId, class: {
+            } }, h("slot", { key: '61ab9737181371073b25b95c34dad3311c2995c0', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'aca39f881a57a6a23de03da78b5062e5dff55af7', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1e4221e58bc16608bfb0f780b7bc8040935eab37', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '055e681faca85a461b07619c42fa0eb48a6ec028', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: 'ec946e77add75e7eaf194e2b38e5dd1c548ab32f', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -945,11 +955,15 @@ export class TdsDropdown {
         return {
             "setValue": {
                 "complexType": {
-                    "signature": "(value: string | number | string[] | number[]) => Promise<{ value: string | number; label: string; }[]>",
+                    "signature": "(value: string | number | string[] | number[], label?: string) => Promise<{ value: string | number; label: string; }[]>",
                     "parameters": [{
                             "name": "value",
                             "type": "string | number | string[] | number[]",
                             "docs": ""
+                        }, {
+                            "name": "label",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -964,7 +978,7 @@ export class TdsDropdown {
                     "return": "Promise<{ value: string | number; label: string; }[]>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Method for setting the selected value of the Dropdown.\n\nSingle selection example:\n\n<code>\ndropdown.setValue('option-1', 'Option 1');\n</code>\n\nMultiselect example:\n\n<code>\ndropdown.setValue(['option-1', 'option-2']);\n</code>",
                     "tags": []
                 }
             },
@@ -1036,7 +1050,24 @@ export class TdsDropdown {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Method for setting the value of the Dropdown.\n\nSingle selection example:\n\n<code>\ndropdown.setValue('option-1', 'Option 1');\n</code>\n\nMultiselect example:\n\n<code>\ndropdown.setValue(['option-1', 'option-2']);\n</code>",
+                    "text": "Method for closing the Dropdown.",
+                    "tags": []
+                }
+            },
+            "updateDisplay": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to force update the dropdown display value.\nUse this method when you programmatically change the text content of dropdown options\nto ensure the selected value display updates immediately.",
                     "tags": []
                 }
             },

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

@@ -40,9 +40,10 @@
   background-color: var(--tds-footer-top-button-active);
 }
 :host button.footer-top-title-button:focus-visible {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 :host button.footer-top-title-button tds-icon {
   transition: transform 0.2s ease-in-out;