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

package/dist/collection/assets/logos/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/components/accordion/accordion-item/accordion-item.css

@@ -132,7 +132,7 @@
 }
 
 :host(:focus) .tds-accordion-item {
-  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;
 }

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

@@ -11,7 +11,7 @@
 }
 
 :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;
 }

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

@@ -77,7 +77,7 @@
   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;
 }

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

@@ -8,7 +8,7 @@
   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;
   outline-offset: 0;

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

@@ -214,7 +214,7 @@ 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;
 }

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

@@ -77,7 +77,7 @@
   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;
   background-color: var(--tds-chips-background-focus);

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

@@ -21,7 +21,7 @@
   color: var(--tds-dropdown-option-color-disabled);
 }
 :host .dropdown-option button: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;
 }

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

@@ -80,6 +80,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%;

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

@@ -197,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;
@@ -318,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/
@@ -397,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() {
@@ -426,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) {
@@ -446,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: 'aed0a485fc4634cdba2599fa9792fb6289a7459c', class: {
+        return (h(Host, { key: '3226a3c374e7f402ae4fc036775300ccb13be681', 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: '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,
@@ -503,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: '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: '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,
@@ -514,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: '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: '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: '055e681faca85a461b07619c42fa0eb48a6ec028', 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"; }
@@ -1040,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

@@ -40,7 +40,7 @@
   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;
 }

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

@@ -7,7 +7,7 @@
 }
 :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;
 }
@@ -23,7 +23,7 @@
 }
 :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;
 }
@@ -46,7 +46,7 @@
   }
   :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;
   }

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,7 +27,7 @@
   cursor: pointer;
 }
 :host .component ::slotted(a: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;
 }

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

@@ -22,7 +22,7 @@
 }
 :host ::slotted(button:focus-visible),
 :host ::slotted(a: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;
 }

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

@@ -32,7 +32,7 @@
 }
 :host ::slotted(a:focus-visible),
 :host ::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;
 }

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,7 +216,7 @@ button.tds-modal-close {
   cursor: pointer;
 }
 .tds-modal-close: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;
 }