@scania/tegel 1.52.0 → 1.53.0-focus-ring-beta.0

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

@@ -56,7 +56,46 @@ export class TdsDropdown {
         this.selectedOptions = [];
         this.filterQuery = '';
         this.hasFocus = false;
+        this.pendingInvalidValues = new Set();
         this.uuid = generateUniqueId();
+        this.handleArrowDown = (activeElement) => {
+            const children = this.getChildren();
+            /** Get the index of the current focus index, if there is no
+            nextElementSibling return the index for the first child in our Dropdown.  */
+            const startingIndex = activeElement.nextElementSibling
+                ? children.findIndex((element) => element === activeElement.nextElementSibling)
+                : 0;
+            if (children.length > 0) {
+                const elementIndex = findNextFocusableElement(children, startingIndex);
+                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[0];
+                target === null || target === void 0 ? void 0 : target.focus();
+            }
+        };
+        this.handleArrowUp = (activeElement) => {
+            const children = this.getChildren();
+            /** Get the index of the current focus index, if there is no
+            previousElementSibling return the index for the first last in our Dropdown.  */
+            const startingIndex = activeElement.nextElementSibling
+                ? children.findIndex((element) => element === activeElement.previousElementSibling)
+                : 0;
+            if (children.length > 0) {
+                const elementIndex = findPreviousFocusableElement(children, startingIndex);
+                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[children.length - 1];
+                target === null || target === void 0 ? void 0 : target.focus();
+            }
+        };
+        this.handleEscape = () => {
+            var _a, _b;
+            this.open = false;
+            /** Return focus to input/button when Escape key is used */
+            if (this.filter) {
+                (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                const button = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
+                button === null || button === void 0 ? void 0 : button.focus();
+            }
+        };
         this.setDefaultOption = () => {
             if (this.internalDefaultValue) {
                 /** Convert the internal default value to an array if it's not already */
@@ -66,13 +105,7 @@ export class TdsDropdown {
                 this.updateDropdownStateInternal(defaultValues);
             }
         };
-        this.getChildren = () => {
-            const tdsDropdownOptions = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
-            if (tdsDropdownOptions.length === 0) {
-                console.warn('TDS DROPDOWN: No options found. Disregard if loading data asynchronously.');
-            }
-            return tdsDropdownOptions;
-        };
+        this.getChildren = () => Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
         this.getSelectedChildren = () => {
             if (this.selectedOptions.length === 0)
                 return [];
@@ -180,48 +213,51 @@ export class TdsDropdown {
                 }).length;
             }
         };
+        this.focusInput = (value) => {
+            if (this.inputElement) {
+                this.inputElement.value = value;
+                this.inputElement.focus();
+            }
+        };
         this.handleFilterReset = () => {
             if (this.multiselect) {
-                /** Multiselect + filter: two-step clear */
-                if (this.filterQuery.length > 0) {
-                    const clearedValue = this.filterQuery;
-                    this.filterQuery = '';
-                    this.resetFilterVisibility();
-                    if (this.inputElement) {
-                        this.inputElement.value = this.getValue();
-                        this.inputElement.focus();
-                    }
-                    this.tdsClear.emit({ clearedValue });
-                }
-                else if (this.selectedOptions.length > 0) {
-                    const clearedValue = this.selectedOptions.join(',');
-                    this.updateDropdownStateFromUser([]);
-                    if (this.inputElement) {
-                        this.inputElement.value = '';
-                        this.inputElement.focus();
-                    }
-                    this.tdsClear.emit({ clearedValue });
-                }
+                this.handleMultiselectFilterReset();
             }
             else {
-                /** Single select + filter: clear everything immediately */
-                const clearedParts = [];
-                if (this.filterQuery.length > 0) {
-                    clearedParts.push(this.filterQuery);
-                    this.filterQuery = '';
-                    this.resetFilterVisibility();
-                }
-                if (this.selectedOptions.length > 0) {
-                    clearedParts.push(this.selectedOptions.join(','));
-                    this.updateDropdownStateFromUser([]);
-                }
-                if (this.inputElement) {
-                    this.inputElement.value = '';
-                    this.inputElement.focus();
-                }
-                if (clearedParts.length > 0) {
-                    this.tdsClear.emit({ clearedValue: clearedParts.join(',') });
-                }
+                this.handleSingleFilterReset();
+            }
+        };
+        /** Multiselect + filter: two-step clear */
+        this.handleMultiselectFilterReset = () => {
+            if (this.filterQuery.length > 0) {
+                const clearedValue = this.filterQuery;
+                this.filterQuery = '';
+                this.resetFilterVisibility();
+                this.focusInput(this.getValue());
+                this.tdsClear.emit({ clearedValue });
+            }
+            else if (this.selectedOptions.length > 0) {
+                const clearedValue = this.selectedOptions.join(',');
+                this.updateDropdownStateFromUser([]);
+                this.focusInput('');
+                this.tdsClear.emit({ clearedValue });
+            }
+        };
+        /** Single select + filter: clear everything immediately */
+        this.handleSingleFilterReset = () => {
+            const clearedParts = [];
+            if (this.filterQuery.length > 0) {
+                clearedParts.push(this.filterQuery);
+                this.filterQuery = '';
+                this.resetFilterVisibility();
+            }
+            if (this.selectedOptions.length > 0) {
+                clearedParts.push(this.selectedOptions.join(','));
+                this.updateDropdownStateFromUser([]);
+            }
+            this.focusInput('');
+            if (clearedParts.length > 0) {
+                this.tdsClear.emit({ clearedValue: clearedParts.join(',') });
             }
         };
         this.resetFilterVisibility = () => {
@@ -286,7 +322,7 @@ export class TdsDropdown {
         const normalizedValue = this.normalizeValue(newValue);
         /** Only update if actually changed */
         if (hasValueChanged(normalizedValue, this.selectedOptions)) {
-            this.updateDropdownStateFromUser(normalizedValue);
+            this.updateDropdownStateInternal(normalizedValue);
         }
     }
     normalizeValue(value) {
@@ -317,8 +353,8 @@ export class TdsDropdown {
         this.updateDropdownState(values, true);
     }
     updateDropdownState(values, emitChange = true) {
-        /** Validate the values first */
-        const validValues = this.validateValues(values);
+        /** Validate the values - only filter out invalid values for user-triggered changes */
+        const validValues = this.validateValues(values, emitChange);
         /** Update internal state */
         this.selectedOptions = [...validValues];
         /** Update the value prop */
@@ -335,19 +371,17 @@ export class TdsDropdown {
         /** Update value attribute */
         this.setValueAttribute();
     }
-    validateValues(values) {
-        /** Make sure we have children before validation */
+    validateValues(values, strict = false) {
         const children = this.getChildren();
         if (!children || children.length === 0) {
-            console.warn('No dropdown options found');
             return values; /** Return original values if no children yet */
         }
         return values.filter((val) => {
             const isValid = children.some((element) => convertToString(element.value) === convertToString(val));
-            if (!isValid) {
-                console.warn(`Option with value "${val}" does not exist`);
+            if (!isValid && strict) {
+                console.warn(`TDS DROPDOWN: Option with value "${val}" does not exist`);
             }
-            return isValid;
+            return isValid || !strict;
         });
     }
     updateOptionElements() {
@@ -473,47 +507,22 @@ export class TdsDropdown {
         }
     }
     async onKeyDown(event) {
-        var _a, _b;
-        /** Get the active element */
         const { activeElement } = document;
         if (!activeElement) {
             return;
         }
-        const children = this.getChildren();
-        if (event.key === 'ArrowDown') {
-            /** Get the index of the current focus index, if there is no
-            nextElementSibling return the index for the first child in our Dropdown.  */
-            const startingIndex = activeElement.nextElementSibling
-                ? children.findIndex((element) => element === activeElement.nextElementSibling)
-                : 0;
-            if (children.length > 0) {
-                const elementIndex = findNextFocusableElement(children, startingIndex);
-                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[0];
-                target === null || target === void 0 ? void 0 : target.focus();
-            }
-        }
-        else if (event.key === 'ArrowUp') {
-            /** Get the index of the current focus index, if there is no
-            previousElementSibling return the index for the first last in our Dropdown.  */
-            const startingIndex = activeElement.nextElementSibling
-                ? this.getChildren().findIndex((element) => element === activeElement.previousElementSibling)
-                : 0;
-            if (children.length > 0) {
-                const elementIndex = findPreviousFocusableElement(children, startingIndex);
-                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[children.length - 1];
-                target === null || target === void 0 ? void 0 : target.focus();
-            }
-        }
-        else if (event.key === 'Escape') {
-            this.open = false;
-            /** Return focus to input/button when Escape key is used */
-            if (this.filter) {
-                (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            else {
-                const button = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
-                button === null || button === void 0 ? void 0 : button.focus();
-            }
+        switch (event.key) {
+            case 'ArrowDown':
+                this.handleArrowDown(activeElement);
+                break;
+            case 'ArrowUp':
+                this.handleArrowUp(activeElement);
+                break;
+            case 'Escape':
+                this.handleEscape();
+                break;
+            default:
+                break;
         }
     }
     /** If the Dropdown gets closed,
@@ -554,7 +563,45 @@ export class TdsDropdown {
     }
     /** Method to handle slot changes */
     handleSlotChange() {
-        this.setDefaultOption();
+        /**
+         * Warn for values that were pending from a previous slot change
+         * and are still invalid now that new options have arrived.
+         */
+        this.warnAndClearPending();
+        if (this.selectedOptions.length > 0) {
+            this.updateDropdownStateInternal([...this.selectedOptions]);
+        }
+        else if (this.internalDefaultValue) {
+            this.setDefaultOption();
+        }
+        /** Track currently unmatched values as pending for the next slot change */
+        this.updatePendingInvalidValues();
+    }
+    /** Warn for pending values that are still not matched, then clear pending */
+    warnAndClearPending() {
+        const children = this.getChildren();
+        if (!children || children.length === 0 || this.pendingInvalidValues.size === 0)
+            return;
+        this.pendingInvalidValues.forEach((val) => {
+            const isValid = children.some((element) => convertToString(element.value) === convertToString(val));
+            if (!isValid) {
+                console.warn(`TDS DROPDOWN: Option with value "${val}" does not exist`);
+            }
+        });
+        this.pendingInvalidValues.clear();
+    }
+    /** Track unmatched selected values as pending for deferred warning */
+    updatePendingInvalidValues() {
+        const children = this.getChildren();
+        if (!children || children.length === 0)
+            return;
+        this.pendingInvalidValues.clear();
+        this.selectedOptions.forEach((val) => {
+            const isValid = children.some((element) => convertToString(element.value) === convertToString(val));
+            if (!isValid) {
+                this.pendingInvalidValues.add(val);
+            }
+        });
     }
     /** Method to check if we should normalize text */
     normalizeString(text) {
@@ -632,9 +679,9 @@ export class TdsDropdown {
         else if (showPlaceholderButton) {
             buttonText = (_d = this.placeholder) !== null && _d !== void 0 ? _d : '';
         }
-        return (h(Host, { key: 'b9cf35a8a59a4394231a6a1eaf28d10eb406d9dd', class: {
+        return (h(Host, { key: 'ef4fbe1a77a277a93bf542f67d423a6935755522', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'd0a437dd9964f99a6fc584e19db6cb202a52db6d', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '1f2bc5ba3a4f88d0562920514582dbbca392f0f2', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'e543abac115d7ab45c64776dada58b11d381ae8a', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '029261f9bd4f46039ed049ca7e08f38641edae05', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -693,7 +740,7 @@ export class TdsDropdown {
             }, class: {
                 'clear-icon': true,
                 'hide': !(this.multiselect && this.selectedOptions.length > 0),
-            }, name: "cross", size: "16px" }), 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: '33b396b80b0bd9df1e2ad49ce76a6d206b8494c1', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+            }, name: "cross", size: "16px" }), 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: '67d82711bf2a53fdc77901c8a28bd83766c287d4', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 if (element)
                     this.dropdownList = element;
             }, class: {
@@ -705,11 +752,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: '34c20eb4db47adc67acbfa82fb9cdc4d00570dff', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '20accfd7501265ef8bb4472984950af150967292', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '184197b19327dc1f41cf4deff322516c8a8e2016', id: helperId, class: {
+            } }, h("slot", { key: '36a3d6ec255decbf8233174eb29f996f141007d2', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '84a4033110327c8237edff3defdbc831fb56869b', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '0862c49887b92e56f4846831cb514784369715d0', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: 'd981559018ad6f969a2292e1520db0fa1fe66623', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '107f29830769cb6928fec4d6cae9f050d47437d7', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,8 +37,8 @@
   background-color: var(--tds-footer-top-button-active);
 }
 :host button.footer-top-title-button:focus-visible {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

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

@@ -1,14 +1,19 @@
+/* Typography Usage mixins */
 :host([role=listitem]) div ::slotted(a),
 :host([role=listitem]) div ::slotted(button) {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  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(--tds-footer-main-links);
   text-decoration: none;
 }
 :host([role=listitem]) div ::slotted(a:focus-visible),
 :host([role=listitem]) div ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -18,19 +23,23 @@
 }
 :host([role=listitem]) div.top-part-child ::slotted(a),
 :host([role=listitem]) div.top-part-child ::slotted(button) {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  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(--tds-footer-top-links);
 }
 :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-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
 
-@media all and (max-width: 992px) {
+@media all and (width <= 992px) {
   :host([role=listitem]) div.top-part-child {
     border-bottom: 1px solid var(--tds-footer-top-divider);
   }
@@ -39,7 +48,6 @@
     display: block;
     height: 100%;
     padding: 19px 40px;
-    font-weight: normal;
   }
   :host([role=listitem]) div.top-part-child ::slotted(a:active),
   :host([role=listitem]) div.top-part-child ::slotted(button:active) {
@@ -48,8 +56,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-focus-outline-color);
-    box-shadow: 0 0 0 1px var(--tds-white);
+    outline: 2px solid var(--component--focus-ring-color-strong);
+    box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
     outline-offset: 1px;
     z-index: 1;
   }

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

@@ -1,3 +1,4 @@
+/* Typography Usage mixins */
 :host {
   display: block;
 }
@@ -30,6 +31,7 @@
 }
 :host slot[name=end] {
   margin-left: auto;
+  color: var(--tds-footer-main-social-icon);
 }
 :host .footer-main-bottom {
   padding: 40px 0;
@@ -39,12 +41,16 @@
 }
 :host .footer-main-bottom small.copyright {
   margin: 0;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  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(--tds-footer-main-copyright);
 }
 :host .footer-main-bottom .brand {
-  background-image: var(--tds-background-image-scania-wordmark-white-svg-local), var(--tds-background-image-scania-wordmark-white-svg);
+  background-image: var(--tds-footer-logotype-local), var(--tds-footer-logotype-cdn);
   background-repeat: no-repeat;
   background-size: 117px;
   background-position: right;

package/dist/collection/components/footer/footer.js

@@ -10,16 +10,20 @@ export class TdsFooter {
     constructor() {
         /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
-        this.copyrightText = `Copyright © ${new Date().getFullYear()} Scania`;
+    }
+    getBrandName() {
+        return this.host.closest('.traton') ? 'Traton' : 'Scania';
     }
     render() {
         const usesTopSlot = hasSlot('top', this.host);
         const usesStartSlot = hasSlot('start', this.host);
         const usesEndSlot = hasSlot('end', this.host);
         const usesCopyrightSlot = hasSlot('copyright', this.host);
-        return (h(Host, { key: '45c3eab02748591e5751d4c23d6dcc9ca7541aca', class: {
+        const brandName = this.getBrandName();
+        const copyrightText = `Copyright © ${new Date().getFullYear()} ${brandName}`;
+        return (h(Host, { key: 'ac9e0121981c38b240ff4f96fbfc96fb59f51005', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            } }, h("footer", { key: 'a5c338868f8201014d0f1eaecf4db3b5552c6a8d' }, usesTopSlot && h("slot", { key: '07257d9529a6af504715b69d33741052614a1737', name: "top" }), h("div", { key: 'a1f11fbceefb0442cd61858f0ca8ed5a7c0aeb81', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: 'dd8bff6c7f4171a7c9d46d7f5dabcf2a31697dc7', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '39f28defd591fbb6863d86225fca3cff09ec94cb', name: "start" }), usesEndSlot && h("slot", { key: '344bd6c80538d46a22b5d10f09e5cf4633019ef9', name: "end" }))), h("div", { key: '8896f0f1c3031b98b1d1b1d2cedd2cb35e003dff', class: "footer-main-bottom" }, h("small", { key: '972571431d7ebeb07eaab043d970528c352df32d', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: '5b93f4ab6f07dd3bdb4cd05429b729426e11c103', class: "brand" }, h("p", { key: '9537baabeba256b7774af6f3e135ecdc127a8993' }, "Scania")))))));
+            } }, h("footer", { key: 'd17bd41f9de0efd4449fba8fa48894a86f5a682b' }, usesTopSlot && h("slot", { key: '7f557c36ba1da44009f5be05ed353ec1d92ab88f', name: "top" }), h("div", { key: '5a10ae17a39a6eb707e036076a471f1dec135d32', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: 'c3142b6c2e5251a0ce9c49c66524c7d982e4a70c', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '29923cff3f6a1bf0be4ae67fe190eadfb74e59b2', name: "start" }), usesEndSlot && h("slot", { key: '6c9216a5c9ad01c94dbc00448a3b7e778dabc705', name: "end" }))), h("div", { key: '5c827108dc49ecd4c1d86aaad9de4b7b390009ad', class: "footer-main-bottom" }, h("small", { key: 'e9ed752b108bc7d9dd52154baa9f8cd9ed2c0039', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : copyrightText), h("div", { key: '7183d25ff8387a0a8691a02734d7748867960020', class: "brand" }, h("p", { key: '4d0848e1c716dd68c51e2499d16707b9c48b53ce' }, brandName)))))));
     }
     static get is() { return "tds-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,8 +27,8 @@
   cursor: pointer;
 }
 :host .component ::slotted(a:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
 }
 :host .component-selected {

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

@@ -30,8 +30,8 @@
 :host ::slotted(a:focus-visible) {
   border: none;
   margin-right: 1px;
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
 }
 :host .component-active ::slotted(button),

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

@@ -32,8 +32,8 @@
 }
 :host ::slotted(a:focus-visible),
 :host ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

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

@@ -1,2 +1,33 @@
-export const iconsCollection = '[{"name":"arrow_diagonal","definition":"M24 5.75H10v2h12.59L6 24.34l1.41 1.41L24 9.16v12.59h2v-16h-2Z","viewbox":"0 0 32 32"},{"name":"arrow_down","definition":"M24.59 16.59 17 24.17V4h-2v20.17L7.41 16.6 6 18l10 10 10-10-1.41-1.41Z","viewbox":"0 0 32 32"},{"name":"arrow_left","definition":"m4 16 10 10 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16Z","viewbox":"0 0 32 32"},{"name":"arrow_right","definition":"M28 16 18 6l-1.41 1.41L24.17 15H4v2h20.17l-7.58 7.59L18 26l10-10Z","viewbox":"0 0 32 32"},{"name":"arrow_up","definition":"M7.41 15.41 15 7.83V28h2V7.83l7.59 7.58L26 14 16 4 6 14l1.41 1.41Z","viewbox":"0 0 32 32"},{"name":"bento","definition":"M6 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z","viewbox":"0 0 32 32"},{"name":"burger","definition":"M30 6H2v2h28V6Zm0 9H2v2h28v-2Zm0 9H2v2h28v-2Z","viewbox":"0 0 32 32"},{"name":"calendar","definition":"M26.47 4H22V2h-2v2h-8V2h-2v2H5.53L4 7v18l1.53 3h20.94L28 25V7l-1.53-3ZM10 6v2h2V6h8v2h2V6h3.25L26 7.48V10H6V7.48L6.75 6H10ZM6.75 26 6 24.52V12h20v12.52L25.25 26H6.75Z","viewbox":"0 0 32 32"},{"name":"chevron_down","definition":"m7.13 10.29-1.41 1.42 10 10 10-10-1.41-1.42-8.59 8.59-8.59-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_left","definition":"M21.41 7.41 20 6 10 16l10 10 1.41-1.41L12.83 16l8.58-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_right","definition":"M10.59 7.41 12 6l10 10-10 10-1.41-1.41L19.17 16 10.6 7.41Z","viewbox":"0 0 32 32"},{"name":"chevron_up","definition":"m24.89 21.7 1.4-1.4-10-10-10 10 1.42 1.4 8.59-8.58 8.59 8.58Z","viewbox":"0 0 32 32"},{"name":"cross","definition":"M25 8.41 23.59 7 16 14.59 8.41 7 7 8.41 14.59 16 7 23.59 8.41 25 16 17.41 23.59 25 25 23.59 17.41 16 25 8.41Z","viewbox":"0 0 32 32"},{"name":"edit","definition":"m23 3-6 6L4.13 21.87 3 29l7.13-1.13L23 15l6-6-6-6ZM9.18 26l-3.77.6.59-3.77 12.41-12.42 3.17 3.18L9.18 26ZM23 12.17 19.83 9 23 5.83 26.17 9 23 12.17Z","viewbox":"0 0 32 32"},{"name":"error","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 9h-2v10h2V9Zm0 12h-2v2h2v-2Z","viewbox":"0 0 32 32"},{"name":"info","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 13h-2v10h2V13Zm0-4h-2v2h2V9Z","viewbox":"0 0 32 32"},{"name":"minus","definition":"M28 15H4v2h24v-2Z","viewbox":"0 0 32 32"},{"name":"notification","definition":"M25 19.55V13a9 9 0 0 0-8-8.94V2h-2v2.06A9 9 0 0 0 7 13v6.55L5 21v5h22v-5l-2-1.45ZM25 24H7v-1.98l.03-.02L9 20.57V13a7 7 0 0 1 14 0v7.57L24.97 22l.03.02V24Zm-5 4h-8v2h8v-2Z","viewbox":"0 0 32 32"},{"name":"plus","definition":"M28 15H17V4h-2v11H4v2h11v11h2V17h11v-2Z","viewbox":"0 0 32 32"},{"name":"print","definition":"M28 9h-3V3H7v6H4l-2 3.93V23h5v6h18v-6h5V12.93L28 9ZM9 5h14v4H9V5Zm14 22H9v-9h14v9Zm5-6h-3v-5H7v5H4v-7.59L5.23 11h21.54L28 13.41V21Z","viewbox":"0 0 32 32"},{"name":"refresh","definition":"M19 10h4.98C22.11 7.5 19.2 6 16 6 10.49 6 6 10.49 6 16H4a12.01 12.01 0 0 1 21-7.94V4h2v8h-8v-2Zm-6 12H8.02c1.87 2.5 4.79 4 7.98 4 5.51 0 10-4.49 10-10h2a12.01 12.01 0 0 1-21 7.93V28H5v-8h8v2Z","viewbox":"0 0 32 32"},{"name":"search","definition":"m28 26.59-6.26-6.27A10.01 10.01 0 1 0 4 14a10.01 10.01 0 0 0 16.32 7.74L26.6 28l1.4-1.41ZM14 22a8 8 0 0 1 0-16 8 8 0 0 1 0 16Z","viewbox":"0 0 32 32"},{"name":"share","definition":"M25.1 21a4.08 4.08 0 0 0-3.15 1.48L10.83 16.9a3.75 3.75 0 0 0 .02-1.74l11.12-5.61a4.05 4.05 0 0 0 6.91-1.15 3.96 3.96 0 0 0-1.76-4.85 4.08 4.08 0 0 0-5.13.9 3.97 3.97 0 0 0-.88 3.29L9.93 13.36A4.05 4.05 0 0 0 2.86 16a3.97 3.97 0 0 0 2.61 3.74 4.09 4.09 0 0 0 4.46-1.09l11.2 5.65a3.97 3.97 0 0 0 2.42 4.38 4.08 4.08 0 0 0 4.4-.86A3.99 3.99 0 0 0 25.1 21Zm0-16a2.04 2.04 0 0 1 1.86 1.24 1.98 1.98 0 0 1-.44 2.18 2.03 2.03 0 0 1-3.45-1.41 2.03 2.03 0 0 1 2.02-2ZM6.9 18a2.04 2.04 0 0 1-1.87-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 8.92 16a2.03 2.03 0 0 1-2.02 2Zm18.2 9a2.04 2.04 0 0 1-1.88-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 27.11 25c0 .53-.2 1.04-.59 1.42-.38.37-.9.58-1.43.58Z","viewbox":"0 0 32 32"},{"name":"sorting","definition":"M27.6 20.6 24 24.2V8h-2v16.2l-3.6-3.6L17 22l6 6 6-6-1.4-1.4ZM9 4l-6 6 1.4 1.4L8 7.8V24h2V7.8l3.6 3.6L15 10 9 4Z","viewbox":"0 0 32 32"},{"name":"star","definition":"m30.07 13.39-.63-1.87-8.89-.87L17 2h-2l-3.55 8.65-8.89.87-.63 1.87 6.75 6.24-2 9.23L8.33 30 16 25.21 23.67 30l1.63-1.14-2-9.23 6.77-6.24Zm-13 10.13L16 22.85l-1.06.67-5.83 3.64 1.52-7.11.24-1.12-.87-.77-5.21-4.85 6.86-.67 1.2-.11.46-1.12L16 4.83l2.69 6.58.46 1.12 1.2.11 6.86.67L22 18.16l-.83.77.24 1.12 1.52 7.11-5.86-3.64Z","viewbox":"0 0 32 32"},{"name":"tick","definition":"m28 9-1.41-1.41L13 21.17 5.41 13.6 4 15l9 9L28 9Z","viewbox":"0 0 32 32"},{"name":"truck","definition":"M22 8H10v2h12V8ZM30 8h-4V6.52L23.7 2H8.3L6 6.52V8H2v2h4v20h5.2l1.03-2h7.55l1.02 2H26V10h4V8Zm-7.98 20L21 26H11l-1.02 2H8v-4h3l-1.02-2H8V7l1.53-3h12.94L24 7v15h-1.98L21 24h3v4h-1.98ZM23 16H9l4.08 8h5.84L23 16Zm-5.3 6h-3.4l-2.04-4h7.48l-2.04 4Z","viewbox":"0 0 32 32"},{"name":"warning","definition":"M27.68 23 18 4h-4L4.32 23l-.32.62V28h24v-4.38l-.32-.62ZM6 26v-1.9L15.22 6h1.56L26 24.1V26H6ZM17 11h-2v9h2v-9Zm0 11h-2v2h2v-2Z","viewbox":"0 0 32 32"}]';
-    export const iconsNames = ["arrow_diagonal","arrow_down","arrow_left","arrow_right","arrow_up","bento","burger","calendar","chevron_down","chevron_left","chevron_right","chevron_up","cross","edit","error","info","minus","notification","plus","print","refresh","search","share","sorting","star","tick","truck","warning"];
+export const iconsCollection =
+  '[{"name":"arrow_diagonal","definition":"M24 5.75H10v2h12.59L6 24.34l1.41 1.41L24 9.16v12.59h2v-16h-2Z","viewbox":"0 0 32 32"},{"name":"arrow_down","definition":"M24.59 16.59 17 24.17V4h-2v20.17L7.41 16.6 6 18l10 10 10-10-1.41-1.41Z","viewbox":"0 0 32 32"},{"name":"arrow_left","definition":"m4 16 10 10 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16Z","viewbox":"0 0 32 32"},{"name":"arrow_right","definition":"M28 16 18 6l-1.41 1.41L24.17 15H4v2h20.17l-7.58 7.59L18 26l10-10Z","viewbox":"0 0 32 32"},{"name":"arrow_up","definition":"M7.41 15.41 15 7.83V28h2V7.83l7.59 7.58L26 14 16 4 6 14l1.41 1.41Z","viewbox":"0 0 32 32"},{"name":"bento","definition":"M6 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z","viewbox":"0 0 32 32"},{"name":"burger","definition":"M30 6H2v2h28V6Zm0 9H2v2h28v-2Zm0 9H2v2h28v-2Z","viewbox":"0 0 32 32"},{"name":"calendar","definition":"M26.47 4H22V2h-2v2h-8V2h-2v2H5.53L4 7v18l1.53 3h20.94L28 25V7l-1.53-3ZM10 6v2h2V6h8v2h2V6h3.25L26 7.48V10H6V7.48L6.75 6H10ZM6.75 26 6 24.52V12h20v12.52L25.25 26H6.75Z","viewbox":"0 0 32 32"},{"name":"chevron_down","definition":"m7.13 10.29-1.41 1.42 10 10 10-10-1.41-1.42-8.59 8.59-8.59-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_left","definition":"M21.41 7.41 20 6 10 16l10 10 1.41-1.41L12.83 16l8.58-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_right","definition":"M10.59 7.41 12 6l10 10-10 10-1.41-1.41L19.17 16 10.6 7.41Z","viewbox":"0 0 32 32"},{"name":"chevron_up","definition":"m24.89 21.7 1.4-1.4-10-10-10 10 1.42 1.4 8.59-8.58 8.59 8.58Z","viewbox":"0 0 32 32"},{"name":"cross","definition":"M25 8.41 23.59 7 16 14.59 8.41 7 7 8.41 14.59 16 7 23.59 8.41 25 16 17.41 23.59 25 25 23.59 17.41 16 25 8.41Z","viewbox":"0 0 32 32"},{"name":"edit","definition":"m23 3-6 6L4.13 21.87 3 29l7.13-1.13L23 15l6-6-6-6ZM9.18 26l-3.77.6.59-3.77 12.41-12.42 3.17 3.18L9.18 26ZM23 12.17 19.83 9 23 5.83 26.17 9 23 12.17Z","viewbox":"0 0 32 32"},{"name":"error","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 9h-2v10h2V9Zm0 12h-2v2h2v-2Z","viewbox":"0 0 32 32"},{"name":"info","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 13h-2v10h2V13Zm0-4h-2v2h2V9Z","viewbox":"0 0 32 32"},{"name":"minus","definition":"M28 15H4v2h24v-2Z","viewbox":"0 0 32 32"},{"name":"notification","definition":"M25 19.55V13a9 9 0 0 0-8-8.94V2h-2v2.06A9 9 0 0 0 7 13v6.55L5 21v5h22v-5l-2-1.45ZM25 24H7v-1.98l.03-.02L9 20.57V13a7 7 0 0 1 14 0v7.57L24.97 22l.03.02V24Zm-5 4h-8v2h8v-2Z","viewbox":"0 0 32 32"},{"name":"plus","definition":"M28 15H17V4h-2v11H4v2h11v11h2V17h11v-2Z","viewbox":"0 0 32 32"},{"name":"print","definition":"M28 9h-3V3H7v6H4l-2 3.93V23h5v6h18v-6h5V12.93L28 9ZM9 5h14v4H9V5Zm14 22H9v-9h14v9Zm5-6h-3v-5H7v5H4v-7.59L5.23 11h21.54L28 13.41V21Z","viewbox":"0 0 32 32"},{"name":"refresh","definition":"M19 10h4.98C22.11 7.5 19.2 6 16 6 10.49 6 6 10.49 6 16H4a12.01 12.01 0 0 1 21-7.94V4h2v8h-8v-2Zm-6 12H8.02c1.87 2.5 4.79 4 7.98 4 5.51 0 10-4.49 10-10h2a12.01 12.01 0 0 1-21 7.93V28H5v-8h8v2Z","viewbox":"0 0 32 32"},{"name":"search","definition":"m28 26.59-6.26-6.27A10.01 10.01 0 1 0 4 14a10.01 10.01 0 0 0 16.32 7.74L26.6 28l1.4-1.41ZM14 22a8 8 0 0 1 0-16 8 8 0 0 1 0 16Z","viewbox":"0 0 32 32"},{"name":"share","definition":"M25.1 21a4.08 4.08 0 0 0-3.15 1.48L10.83 16.9a3.75 3.75 0 0 0 .02-1.74l11.12-5.61a4.05 4.05 0 0 0 6.91-1.15 3.96 3.96 0 0 0-1.76-4.85 4.08 4.08 0 0 0-5.13.9 3.97 3.97 0 0 0-.88 3.29L9.93 13.36A4.05 4.05 0 0 0 2.86 16a3.97 3.97 0 0 0 2.61 3.74 4.09 4.09 0 0 0 4.46-1.09l11.2 5.65a3.97 3.97 0 0 0 2.42 4.38 4.08 4.08 0 0 0 4.4-.86A3.99 3.99 0 0 0 25.1 21Zm0-16a2.04 2.04 0 0 1 1.86 1.24 1.98 1.98 0 0 1-.44 2.18 2.03 2.03 0 0 1-3.45-1.41 2.03 2.03 0 0 1 2.02-2ZM6.9 18a2.04 2.04 0 0 1-1.87-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 8.92 16a2.03 2.03 0 0 1-2.02 2Zm18.2 9a2.04 2.04 0 0 1-1.88-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 27.11 25c0 .53-.2 1.04-.59 1.42-.38.37-.9.58-1.43.58Z","viewbox":"0 0 32 32"},{"name":"sorting","definition":"M27.6 20.6 24 24.2V8h-2v16.2l-3.6-3.6L17 22l6 6 6-6-1.4-1.4ZM9 4l-6 6 1.4 1.4L8 7.8V24h2V7.8l3.6 3.6L15 10 9 4Z","viewbox":"0 0 32 32"},{"name":"star","definition":"m30.07 13.39-.63-1.87-8.89-.87L17 2h-2l-3.55 8.65-8.89.87-.63 1.87 6.75 6.24-2 9.23L8.33 30 16 25.21 23.67 30l1.63-1.14-2-9.23 6.77-6.24Zm-13 10.13L16 22.85l-1.06.67-5.83 3.64 1.52-7.11.24-1.12-.87-.77-5.21-4.85 6.86-.67 1.2-.11.46-1.12L16 4.83l2.69 6.58.46 1.12 1.2.11 6.86.67L22 18.16l-.83.77.24 1.12 1.52 7.11-5.86-3.64Z","viewbox":"0 0 32 32"},{"name":"tick","definition":"m28 9-1.41-1.41L13 21.17 5.41 13.6 4 15l9 9L28 9Z","viewbox":"0 0 32 32"},{"name":"truck","definition":"M22 8H10v2h12V8ZM30 8h-4V6.52L23.7 2H8.3L6 6.52V8H2v2h4v20h5.2l1.03-2h7.55l1.02 2H26V10h4V8Zm-7.98 20L21 26H11l-1.02 2H8v-4h3l-1.02-2H8V7l1.53-3h12.94L24 7v15h-1.98L21 24h3v4h-1.98ZM23 16H9l4.08 8h5.84L23 16Zm-5.3 6h-3.4l-2.04-4h7.48l-2.04 4Z","viewbox":"0 0 32 32"},{"name":"warning","definition":"M27.68 23 18 4h-4L4.32 23l-.32.62V28h24v-4.38l-.32-.62ZM6 26v-1.9L15.22 6h1.56L26 24.1V26H6ZM17 11h-2v9h2v-9Zm0 11h-2v2h2v-2Z","viewbox":"0 0 32 32"},{"name":"placeholder","definition":"M2 4C2 2.89543 2.89543 2 4 2H6V4H4V6H2V4ZM14 4H10V2H14V4ZM22 4H18V2H22V4ZM28 4H26V2H28C29.1046 2 30 2.89543 30 4V6H28V4ZM4 10V14H2V10H4ZM28 14V10H30V14H28ZM4 18V22H2V18H4ZM28 22V18H30V22H28ZM4 26V28H6V30H4C2.89543 30 2 29.1046 2 28V26H4ZM28 28V26H30V28C30 29.1046 29.1046 30 28 30H26V28H28ZM10 28H14V30H10V28ZM18 28H22V30H18V28Z","viewbox":"0 0 32 32"}]';
+export const iconsNames = [
+  'arrow_diagonal',
+  'arrow_down',
+  'arrow_left',
+  'arrow_right',
+  'arrow_up',
+  'bento',
+  'burger',
+  'calendar',
+  'chevron_down',
+  'chevron_left',
+  'chevron_right',
+  'chevron_up',
+  'cross',
+  'edit',
+  'error',
+  'info',
+  'minus',
+  'notification',
+  'placeholder',
+  'plus',
+  'print',
+  'refresh',
+  'search',
+  'share',
+  'sorting',
+  'star',
+  'tick',
+  'truck',
+  'warning',
+];

package/dist/collection/components/link/link.css

@@ -1,3 +1,4 @@
+/* Typography Usage mixins */
 :host {
   display: inline;
 }
@@ -37,12 +38,15 @@
 
 .disabled ::slotted(*),
 .disabled ::slotted(*:visited) {
-  color: var(--tds-link-disabled);
-  text-decoration-color: var(--tds-link-disabled);
+  opacity: var(--tds-link-opacity-disabled);
   pointer-events: none;
 }
 
 .standalone ::slotted(*) {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  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);
 }