@scania/tegel 1.32.0 → 1.32.2-dropdown-dynamic-updates-beta.0

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

@@ -72,7 +72,15 @@ export class TdsDropdown {
             if (!this.disabled) {
                 this.open = !this.open;
                 if (this.open) {
-                    this.focusInputElement();
+                    if (this.filter) {
+                        this.focusInputElement();
+                    }
+                    else {
+                        const button = this.host.shadowRoot.querySelector('button');
+                        if (button) {
+                            button.focus();
+                        }
+                    }
                 }
             }
         };
@@ -118,11 +126,13 @@ export class TdsDropdown {
         this.handleFocus = (event) => {
             this.open = true;
             this.filterFocus = true;
-            if (this.multiselect) {
+            if (this.multiselect && this.inputElement) {
                 this.inputElement.value = '';
             }
             this.tdsFocus.emit(event);
-            this.handleFilter({ target: { value: '' } });
+            if (this.filter) {
+                this.handleFilter({ target: { value: '' } });
+            }
         };
         this.handleBlur = (event) => {
             this.tdsBlur.emit(event);
@@ -187,6 +197,7 @@ export class TdsDropdown {
             .split(',')
             .filter((v) => v !== '');
     }
+    // eslint-disable-next-line class-methods-use-this
     hasValueChanged(newValue, currentValue) {
         if (newValue.length !== currentValue.length)
             return true;
@@ -277,7 +288,18 @@ export class TdsDropdown {
     }
     /** Method that forces focus on the input element. */
     async focusElement() {
-        this.focusInputElement();
+        if (this.filter) {
+            // For filter mode, focus the input element
+            this.focusInputElement();
+        }
+        else {
+            // For non-filter mode, focus the button element
+            const button = this.host.shadowRoot.querySelector('button');
+            if (button) {
+                button.focus();
+            }
+        }
+        // Always trigger the focus event to open the dropdown
         this.handleFocus({});
     }
     /** Method for setting the value of the Dropdown.
@@ -297,6 +319,13 @@ export class TdsDropdown {
     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/
@@ -376,6 +405,8 @@ export class TdsDropdown {
                 : [defaultValueStr];
             this.updateDropdownStateInternal(initialValue);
         }
+        // Setup mutation observer to watch for text content changes
+        this.setupMutationObserver();
     }
     /** Method to handle slot changes */
     handleSlotChange() {
@@ -405,10 +436,12 @@ export class TdsDropdown {
         this.updateDropdownListInertState();
     }
     disconnectedCallback() {
+        var _a;
         const form = this.host.closest('form');
         if (form) {
             form.removeEventListener('reset', this.resetInput);
         }
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     connectedCallback() {
         if (!this.tdsAriaLabel) {
@@ -425,14 +458,42 @@ export class TdsDropdown {
             }
         }
     }
+    setupMutationObserver() {
+        this.mutationObserver = new MutationObserver((mutations) => {
+            let shouldUpdate = false;
+            mutations.forEach((mutation) => {
+                var _a;
+                if (mutation.type === 'characterData' || mutation.type === 'childList') {
+                    // Check if the mutation affects any of our dropdown options
+                    const target = mutation.target;
+                    const optionElement = target.nodeType === Node.TEXT_NODE
+                        ? (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.closest('tds-dropdown-option')
+                        : target === null || target === void 0 ? void 0 : target.closest('tds-dropdown-option');
+                    if (optionElement &&
+                        this.getChildren().includes(optionElement)) {
+                        shouldUpdate = true;
+                    }
+                }
+            });
+            if (shouldUpdate) {
+                this.updateDisplayValue();
+            }
+        });
+        // Start observing
+        this.mutationObserver.observe(this.host, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+        });
+    }
     render() {
         appendHiddenInput(this.host, this.name, this.selectedOptions.join(','), this.disabled);
         // 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: '5c5314d4994b1ca9c09729df6c9b30d9fb6b33d3', class: {
+        return (h(Host, { key: '3226a3c374e7f402ae4fc036775300ccb13be681', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '25133dd0a665315edfad6f93a846db0ac82cc16f', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '3d2a17d8f7bcf7f8aaa8d2ea5397044396b691e1', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'aebbbf9180a868cfda604f0231765beb6b4a4d3c', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '9d88d1fc96c595edb8debc30bef3d541f76141a7', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -482,7 +543,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: '4e4a3036983d9f2c53119884f32482a14b16bbff', 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: 'd6f0b267ca40bde1f83dda5613a30b3d1f8321d6', 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.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -493,11 +554,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: 'ad34d1c72b7490505aee226e3e1478e68084309d', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '619071043ec5be2a17b24c9706aa20490f4c4339', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '4165cfc63988816e39a86a304acacd627aa24567', id: helperId, class: {
+            } }, h("slot", { key: '50ecd38b57b6e8eae312de70e98cb1fdd8ad5249', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'b8d9441da28942114b8076360a201a01ef243705', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '2cdad6a9dba7772e77229d2bfefd32cb8b1fc80b', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '90eea26d0166a4acaa066211fa996e2b74ccd575', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '4994294053a29d235b401af7a6c2cfea550cd305', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -1019,6 +1080,23 @@ export class TdsDropdown {
                     "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": []
+                }
+            },
             "appendValue": {
                 "complexType": {
                     "signature": "(value: string) => Promise<void>",

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

@@ -4,8 +4,7 @@
 :host .footer-top-title {
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
-  opacity: var(--tds-footer-top-title-opacity);
-  color: var(--tds-footer-top-links);
+  color: var(--tds-footer-top-links-header);
   padding-bottom: 8px;
 }
 :host .footer-top-title *,
@@ -41,8 +40,9 @@
   background-color: var(--tds-footer-top-button-active);
 }
 :host button.footer-top-title-button:focus-visible {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :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

@@ -3,13 +3,13 @@
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
   color: var(--tds-footer-main-links);
-  opacity: var(--tds-footer-main-links-opacity);
   text-decoration: none;
 }
 :host([role=listitem]) div ::slotted(a:focus-visible),
 :host([role=listitem]) div ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host([role=listitem]) div ::slotted(a:hover),
 :host([role=listitem]) div ::slotted(button:hover) {
@@ -23,8 +23,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-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 
 @media all and (max-width: 992px) {
@@ -45,7 +46,8 @@
   }
   :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-offset: -2px;
+    outline: 2px solid var(--tds-focus-outline-color);
+    box-shadow: 0 0 0 1px var(--tds-white);
+    outline-offset: 1px;
   }
 }

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

@@ -44,7 +44,7 @@
   color: var(--tds-footer-main-copyright);
 }
 :host .footer-main-bottom .brand {
-  background-image: var(--tds-background-image-scania-wordmark-white-svg), var(--tds-background-image-scania-wordmark-white-svg-local);
+  background-image: var(--tds-background-image-scania-wordmark-white-svg-local), var(--tds-background-image-scania-wordmark-white-svg);
   background-repeat: no-repeat;
   background-size: 117px;
   background-position: right;

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

@@ -2,7 +2,7 @@
   display: none;
 }
 :host tds-header-item ::slotted(*) {
-  background-image: var(--tds-background-image-scania-symbol-svg), var(--tds-background-image-scania-symbol-svg-local);
+  background-image: var(--tds-background-image-scania-symbol-svg-local), var(--tds-background-image-scania-symbol-svg);
   background-size: 30px auto;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -27,8 +27,9 @@
   cursor: pointer;
 }
 :host .component ::slotted(a:focus-visible) {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .component-selected {
   background-color: var(--tds-nav-item-background-selected);

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

@@ -22,8 +22,9 @@
 }
 :host ::slotted(button:focus-visible),
 :host ::slotted(a:focus-visible) {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .component-active ::slotted(button),
 :host .component-active ::slotted(a) {

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

@@ -32,6 +32,7 @@
 }
 :host ::slotted(a:focus-visible),
 :host ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }

package/dist/collection/components/message/message.css

@@ -4,13 +4,22 @@
 :host {
   /* Default values */
   --tds-message-background: var(--background-elevation-layer-03);
+  --tds-message-background-error: var(--system-danger-subtle-03);
+  --tds-message-background-warning: var(--background-elevation-layer-03);
+  --tds-message-background-success: var(--background-elevation-layer-03);
   /* Variant values */
 }
 :host .tds-mode-variant-primary {
   --tds-message-background: var(--background-elevation-layer-03);
+  --tds-message-background-error: var(--system-danger-subtle-03);
+  --tds-message-background-warning: var(--background-elevation-layer-03);
+  --tds-message-background-success: var(--background-elevation-layer-03);
 }
 :host .tds-mode-variant-secondary {
   --tds-message-background: var(--background-elevation-layer-02);
+  --tds-message-background-error: var(--system-danger-subtle-02);
+  --tds-message-background-warning: var(--background-elevation-layer-02);
+  --tds-message-background-success: var(--background-elevation-layer-02);
 }
 :host .wrapper {
   display: flex;
@@ -25,19 +34,21 @@
   color: var(--system-info-default);
 }
 :host .wrapper.success {
+  background-color: var(--tds-message-background-success);
   border-left: 4px solid var(--system-success-default);
 }
 :host .wrapper.success tds-icon {
   color: var(--system-success-default);
 }
 :host .wrapper.error {
-  background-color: var(--system-danger-subtle);
+  background-color: var(--tds-message-background-error);
   border-left: 4px solid var(--system-danger-default);
 }
 :host .wrapper.error tds-icon {
   color: var(--system-danger-default);
 }
 :host .wrapper.warning {
+  background-color: var(--tds-message-background-warning);
   border-left: 4px solid var(--system-warning-default);
 }
 :host .wrapper.warning tds-icon {

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

@@ -5,6 +5,7 @@
 /* MODAL STYLING */
 .tds-modal {
   box-sizing: border-box;
+  box-shadow: var(--tds-modal-box-shadow);
   background-color: var(--background-elevation-layer-02);
   margin: auto;
   position: relative;
@@ -193,7 +194,7 @@ slot[name=header]::slotted(*) {
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--background-elevation-scrim);
+  background-color: var(--tds-modal-backdrop-background);
   pointer-events: auto;
 }
 .tds-modal-backdrop * {
@@ -215,8 +216,9 @@ button.tds-modal-close {
   cursor: pointer;
 }
 .tds-modal-close:focus {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 @media (min-width: 320px) {
   .tds-modal-close {