@scania/tegel 1.32.2-multibrand-beta.5 → 1.33.0

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

@@ -1,18 +1,14 @@
 @charset "UTF-8";
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host button {
   all: unset;
   height: 100%;
   width: 100%;
-  box-shadow: var(--dropdown-border);
-  background-color: var(--dropdown-background);
-  border-radius: var(--dropdown-border-radius);
-  transition: box-shadow var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
+  background-color: var(--tds-dropdown-bg);
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom);
+  border-radius: var(--tds-dropdown-border-radius);
 }
 :host button:hover {
-  box-shadow: var(--dropdown-border-hover);
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom-hover);
 }
 :host button .value-wrapper {
   padding: 0 16px;
@@ -21,64 +17,68 @@
   justify-content: space-between;
 }
 :host button.placeholder {
-  color: var(--dropdown-placeholder);
+  color: var(--tds-dropdown-placeholder-color);
   line-height: 1.3;
 }
 :host button.value {
-  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);
-  color: var(--dropdown-text);
+  color: var(--tds-dropdown-value-color);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   /** Needed to not get be affected by overflow:hidden 
   The original line-height is 1.14 */
   line-height: 1.3;
 }
 :host button:focus {
-  box-shadow: var(--dropdown-border-focus);
-}
-:host button:active {
-  box-shadow: var(--dropdown-border-active);
+  border-bottom: 0;
 }
 :host button.error {
-  box-shadow: var(--dropdown-border-error);
-}
-:host button.error:hover {
-  box-shadow: var(--dropdown-border-error-hover);
+  border-bottom: 1px solid var(--tds-dropdown-error);
 }
 :host button.error:focus {
-  box-shadow: var(--dropdown-border-error-focus);
+  border-bottom-color: transparent;
+}
+:host button.error:focus::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--tds-dropdown-error);
 }
 :host button:disabled {
-  box-shadow: var(--dropdown-border-disabled);
-  color: var(--dropdown-disabled);
+  color: var(--tds-dropdown-disabled-color);
+  border-bottom: 1px solid transparent;
 }
 :host button .menu-icon {
   margin-right: 0;
 }
 
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
+: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;
   justify-content: space-between;
   height: 100%;
-  background-color: var(--dropdown-background);
-  box-shadow: var(--dropdown-border);
+  background-color: var(--tds-dropdown-bg);
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom);
   padding-left: 16px;
-  border-radius: var(--dropdown-border-radius);
-  transition: box-shadow var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
+  border-radius: 4px 4px 0 0;
 }
 :host .filter:hover {
-  box-shadow: var(--dropdown-border-hover);
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom-hover);
 }
 :host .filter.disabled {
-  color: var(--dropdown-disabled);
-  box-shadow: var(--dropdown-border-disabled);
+  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;
@@ -86,19 +86,15 @@
   height: 100%;
 }
 :host .filter .value-wrapper input {
-  color: var(--dropdown-text);
+  color: var(--tds-dropdown-filter-input-color);
 }
 :host .filter .label-inside-as-placeholder {
   position: absolute;
-  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);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   /* Overwrite in order to display ÅÄÖ and similar sign correctly */
   line-height: 1.3;
-  color: var(--dropdown-placeholder);
+  color: var(--tds-dropdown-placeholder-color);
 }
 :host .filter .label-inside-as-placeholder.lg {
   top: 20px;
@@ -110,12 +106,8 @@
   display: none;
 }
 :host .filter .label-inside-as-placeholder.selected {
-  font-family: var(--detail-07-font-family);
-  font-size: var(--detail-07-font-size);
-  line-height: var(--detail-07-line-height);
-  font-weight: var(--detail-07-font-weight);
-  letter-spacing: var(--detail-07-letter-spacing);
-  text-transform: var(--detail-07-text-transform);
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
   transition: all 0.2s ease-in-out;
 }
 :host .filter .label-inside-as-placeholder.selected.lg {
@@ -131,13 +123,25 @@
   margin-top: 8px;
 }
 :host .filter.focus {
-  box-shadow: var(--dropdown-border-focus);
+  border-bottom: 0;
+}
+:host .filter.focus:hover {
+  border-bottom: 0;
 }
 :host .filter.error {
-  box-shadow: var(--dropdown-border-error);
+  border-bottom: 1px solid var(--tds-dropdown-error);
 }
 :host .filter.error.focus {
-  box-shadow: var(--dropdown-border-error-focus);
+  border-bottom-color: transparent;
+}
+:host .filter.error.focus::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--tds-dropdown-error);
 }
 :host .filter input {
   flex: 1;
@@ -145,39 +149,30 @@
   width: 100%;
 }
 :host .filter input::placeholder {
-  color: var(--dropdown-placeholder);
+  color: var(--tds-dropdown-placeholder-color);
 }
 :host .filter input:disabled::placeholder {
-  color: var(--dropdown-disabled);
+  color: var(--tds-dropdown-disabled-color);
 }
 :host .filter tds-icon {
   cursor: pointer;
 }
-:host .filter tds-icon.disabled {
-  color: var(--dropdown-disabled);
-}
 :host .filter .menu-icon {
   margin-right: 16px;
 }
-:host .filter .menu-icon.disabled {
-  color: var(--dropdown-disabled);
-}
 :host .filter .clear-icon {
   margin: 0 8px;
+  color: var(--tds-dropdown-clear-icon-color);
   padding-right: 8px;
-  border-right: 1px solid var(--dropdown-icon);
-  color: var(--dropdown-clear-icon);
+  border-right: 1px solid var(--tds-dropdown-clear-icon-color);
 }
 :host .filter .clear-icon:hover {
-  color: var(--dropdown-icon);
+  color: var(--tds-dropdown-clear-icon-hover-color);
 }
 :host .filter .clear-icon.hide {
   display: none;
   visibility: hidden;
 }
-:host .filter .clear-icon.disabled {
-  color: var(--dropdown-disabled);
-}
 
 :host {
   --tds-scrollbar-width-standard: thin;
@@ -191,50 +186,60 @@ body {
   scrollbar-width: thin;
 }
 
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   display: block;
   position: relative;
-  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);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
 }
 :host .label-outside {
-  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);
-  color: var(--dropdown-text);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-dropdown-label-color);
   margin-bottom: 8px;
 }
 :host .label-outside.disabled {
-  color: var(--dropdown-disabled);
+  color: var(--tds-dropdown-disabled-color);
 }
 :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:hover {
+  border-bottom-color: var(--tds-dropdown-border-bottom-hover);
+}
+:host .dropdown-select button {
+  border-bottom-color: var(--tds-dropdown-border-bottom);
+}
+:host .dropdown-select button.error {
+  border-bottom-color: var(--tds-dropdown-error);
+}
+:host .dropdown-select button.error:focus {
+  border-bottom-color: transparent;
+}
 :host .dropdown-select.disabled .label-inside,
 :host .dropdown-select.disabled .placeholder,
 :host .dropdown-select.disabled .label-inside-as-placeholder,
 :host .dropdown-select.disabled .value-wrapper {
-  color: var(--dropdown-disabled);
+  color: var(--tds-dropdown-disabled-color);
+}
+:host .dropdown-select.disabled button {
+  border: none;
 }
 :host .dropdown-select .label-inside {
   position: absolute;
-  font-family: var(--detail-07-font-family);
-  font-size: var(--detail-07-font-size);
-  line-height: var(--detail-07-line-height);
-  font-weight: var(--detail-07-font-weight);
-  letter-spacing: var(--detail-07-letter-spacing);
-  text-transform: var(--detail-07-text-transform);
-  color: var(--dropdown-text);
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  color: var(--tds-dropdown-label-inside-color);
 }
 :host .dropdown-select .label-inside.lg {
   top: 12px;
@@ -264,16 +269,12 @@ body {
   line-height: 1;
 }
 :host .dropdown-select .label-inside-as-placeholder {
-  color: var(--dropdown-placeholder);
+  color: var(--tds-dropdown-placeholder-color);
 }
 :host .dropdown-select .label-inside-as-placeholder.selected {
   position: absolute;
-  font-family: var(--detail-07-font-family);
-  font-size: var(--detail-07-font-size);
-  line-height: var(--detail-07-line-height);
-  font-weight: var(--detail-07-font-weight);
-  letter-spacing: var(--detail-07-letter-spacing);
-  text-transform: var(--detail-07-text-transform);
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
   transition: all 0.2s ease-in-out;
 }
 :host .dropdown-select .label-inside-as-placeholder.selected.lg {
@@ -302,49 +303,44 @@ body {
 }
 :host .helper {
   margin-top: 4px;
-  color: var(--dropdown-helper-text);
-  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);
+  color: var(--tds-dropdown-helper-color);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: flex;
   align-items: center;
   gap: 8px;
 }
 :host .helper.error {
-  color: var(--dropdown-error);
+  color: var(--tds-dropdown-error);
 }
 :host .helper.disabled {
-  color: var(--dropdown-disabled);
+  color: var(--tds-dropdown-disabled-color);
 }
 :host .dropdown-list {
   z-index: 100;
   position: absolute;
-  margin-top: 2px;
   width: 100%;
   transform-origin: top;
-  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px 0;
-  border-radius: var(--dropdown-list-border-radius-down);
+  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);
   pointer-events: none;
 }
 :host .dropdown-list:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
-  background: var(--color-foreground-icon-discrete);
+  background: var(--tds-scrollbar-hover-thumb-color);
   background-clip: padding-box;
 }
 :host .dropdown-list::-webkit-scrollbar {
   width: var(--tds-scrollbar-width);
 }
 :host .dropdown-list::-webkit-scrollbar-track {
-  background: var(--color-background-layer-01);
+  background: var(--tds-scrollbar-track-color);
 }
 :host .dropdown-list::-webkit-scrollbar-thumb {
   border-radius: 40px;
-  background: var(--color-foreground-icon-discrete);
+  background: var(--tds-scrollbar-thumb-color);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;
 }
@@ -377,8 +373,7 @@ 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(--dropdown-list-border-radius-up);
+  border-radius: var(--tds-dropdown-list-border-radius-up);
 }
 :host .dropdown-list.up.label-outside {
   bottom: calc(100% - 24px);
@@ -400,16 +395,12 @@ body {
   transition: transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit);
 }
 :host .dropdown-list .no-result {
-  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);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   display: flex;
   align-items: center;
   padding: 0 16px;
-  background-color: var(--dropdown-background);
+  background-color: var(--tds-dropdown-bg);
 }
 :host .dropdown-list .no-result.lg {
   height: 56px;
@@ -424,10 +415,7 @@ body {
   height: 40px;
 }
 :host .menu-icon {
-  color: var(--dropdown-icon);
-}
-:host .menu-icon.disabled {
-  color: var(--dropdown-disabled);
+  color: var(--tds-dropdown-menu-icon-color);
 }
 :host tds-icon {
   transition: transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);

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,
@@ -487,12 +497,11 @@ export class TdsDropdown {
             }, class: {
                 'clear-icon': true,
                 'hide': !(this.open && this.inputElement.value !== ''),
-                'disabled': this.disabled
             }, name: "cross", size: "16px" }), h("tds-icon", { tdsAriaHidden: true, role: "button", "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", onClick: this.handleToggleOpen, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                     this.handleToggleOpen();
                 }
-            }, class: `menu-icon ${this.open ? 'open' : 'closed'} ${this.disabled ? 'disabled' : ''}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-labelledby": labelId, "aria-describedby": helperId, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
+            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-labelledby": labelId, "aria-describedby": helperId, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -504,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'} ${this.disabled ? 'disabled' : ''}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '38fa965b0721f4f30217e20b17488a2133edf3f6', 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,
@@ -515,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: 'f325bf93f1888e95c5f2bd8b90d7639d1c8786e4', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '4a5949d7fd632308ac7b2a0ae3e9105feeab1d1e', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '340a871c5c43192dd4e5d130adf10116d2406825', 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: '10b4059f6f5149c0bb10b4c209c69859bdc28296', 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"; }
@@ -946,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": {
@@ -965,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": []
                 }
             },
@@ -1037,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;

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

@@ -7,9 +7,10 @@
 }
 :host([role=listitem]) div ::slotted(a:focus-visible),
 :host([role=listitem]) div ::slotted(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([role=listitem]) div ::slotted(a:hover),
 :host([role=listitem]) div ::slotted(button:hover) {
@@ -23,9 +24,10 @@
 }
 :host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
 :host([role=listitem]) div.top-part-child ::slotted(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;
 }
 
 @media all and (max-width: 992px) {
@@ -46,8 +48,9 @@
   }
   :host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
   :host([role=listitem]) div.top-part-child ::slotted(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;
   }
 }