@scania/tegel 1.32.0 → 1.32.1

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

@@ -11,33 +11,33 @@
   --tds-btn-primary-color-hover: var(--tds-white);
   --tds-btn-primary-color-active: var(--tds-white);
   --tds-btn-primary-color-focus: var(--tds-white);
-  --tds-btn-primary-color-disabled: var(--tds-grey-400);
+  --tds-btn-primary-color-disabled: var(--tds-grey-250);
   --tds-btn-primary-border-color: transparent;
   --tds-btn-primary-border-color-hover: transparent;
   --tds-btn-primary-border-color-active: var(--tds-blue-700);
-  --tds-btn-primary-border-color-focus: var(--tds-blue-600);
-  --tds-btn-primary-outline-color-focus: var(--tds-blue-600);
+  --tds-btn-primary-border-color-focus: var(--tds-blue-700);
+  --tds-btn-primary-outline-color-focus: var(--tds-blue-400);
   --tds-btn-primary-border-color-disabled: transparent;
   /* ICON */
   --tds-btn-icon-primary-fill: var(--tds-grey-50);
   --tds-btn-icon-primary-color: var(--tds-grey-50);
   --tds-btn-secondary-background: transparent;
   --tds-btn-secondary-color: var(--tds-black);
-  --tds-btn-secondary-border-color: var(--tds-black-48);
-  --tds-btn-secondary-background-hover: var(--tds-blue-500);
+  --tds-btn-secondary-border-color: var(--tds-grey-350);
+  --tds-btn-secondary-background-hover: var(--tds-blue-700);
   --tds-btn-secondary-color-hover: var(--tds-white);
   --tds-btn-secondary-border-color-hover: var(--tds-blue-500);
   --tds-btn-secondary-background-active: transparent;
   --tds-btn-secondary-color-active: var(--tds-black);
-  --tds-btn-secondary-border-color-active: var(--tds-black-87);
-  --tds-btn-secondary-background-focus: transparent;
-  --tds-btn-secondary-color-focus: var(--tds-black);
-  --tds-btn-secondary-border-color-focus: var(--tds-blue-400);
+  --tds-btn-secondary-border-color-active: var(--tds-grey-650);
+  --tds-btn-secondary-background-focus: var(--tds-blue-700);
+  --tds-btn-secondary-color-focus: var(--tds-white);
+  --tds-btn-secondary-border-color-focus: var(--tds-white);
   --tds-btn-secondary-outline-color: var(--tds-black-38);
   --tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
   --tds-btn-secondary-background-disabled: transparent;
-  --tds-btn-secondary-color-disabled: var(--tds-black-38);
-  --tds-btn-secondary-border-color-disabled: var(--tds-black-38);
+  --tds-btn-secondary-color-disabled: var(--tds-grey-250);
+  --tds-btn-secondary-border-color-disabled: var(--tds-grey-250);
   --tds-btn-icon-secondary-color-focus: var(--tds-black);
   --tds-btn-icon-secondary-fill-focus: var(--tds-black);
   --tds-btn-icon-secondary-fill-active: var(--tds-grey-958);
@@ -50,18 +50,18 @@
   /* ICON HOVER */
   --tds-btn-icon-secondary-color-active: var(--tds-grey-958);
   --tds-btn-ghost-background: transparent;
-  --tds-btn-ghost-color: var(--tds-black);
+  --tds-btn-ghost-color: var(--tds-grey-950);
   --tds-btn-ghost-border-color: transparent;
   --tds-btn-ghost-background-hover: transparent;
-  --tds-btn-ghost-color-hover: var(--tds-black);
-  --tds-btn-ghost-border-color-hover: var(--tds-black-48);
+  --tds-btn-ghost-color-hover: var(--tds-grey-950);
+  --tds-btn-ghost-border-color-hover: var(--tds-grey-350);
   --tds-btn-ghost-outline-color-hover: var(--tds-black-48);
   --tds-btn-ghost-background-active: transparent;
-  --tds-btn-ghost-color-active: var(--tds-black);
-  --tds-btn-ghost-border-color-active: var(--tds-black-87);
+  --tds-btn-ghost-color-active: var(--tds-grey-950);
+  --tds-btn-ghost-border-color-active: var(--tds-grey-650);
   --tds-btn-ghost-background-focus: transparent;
-  --tds-btn-ghost-color-focus: var(--tds-black);
-  --tds-btn-ghost-border-color-focus: var(--tds-blue-400);
+  --tds-btn-ghost-color-focus: var(--tds-grey-950);
+  --tds-btn-ghost-border-color-focus: var(--tds-grey-350);
   --tds-btn-ghost-outline-color-focus: var(--tds-blue-400);
   --tds-btn-ghost-background-disabled: transparent;
   --tds-btn-ghost-color-disabled: var(--tds-black-38);
@@ -69,20 +69,20 @@
   /* ICON */
   --tds-btn-icon-ghost-fill: var(--tds-grey-958);
   --tds-btn-icon-ghost-color: var(--tds-grey-958);
-  --tds-btn-danger-background: var(--tds-negative);
+  --tds-btn-danger-background: var(--scania-extended-red-400);
   --tds-btn-danger-color: var(--tds-white);
   --tds-btn-danger-border-color: transparent;
-  --tds-btn-danger-background-hover: var(--tds-red-600);
+  --tds-btn-danger-background-hover: var(--scania-extended-red-500);
   --tds-btn-danger-color-hover: var(--tds-white);
   --tds-btn-danger-border-color-hover: transparent;
-  --tds-btn-danger-background-active: var(--tds-red-700);
+  --tds-btn-danger-background-active: var(--scania-extended-red-600);
   --tds-btn-danger-color-active: var(--tds-white);
   --tds-btn-danger-border-color-active: var(--tds-red-700);
-  --tds-btn-danger-background-focus: var(--tds-red-400);
+  --tds-btn-danger-background-focus: var(--scania-extended-red-500);
   --tds-btn-danger-color-focus: var(--tds-white);
-  --tds-btn-danger-border-color-focus: var(--tds-red-400);
-  --tds-btn-danger-outline-color-focus: var(--tds-red-700);
-  --tds-btn-danger-background-disabled-primary: var(--tds-grey-50);
+  --tds-btn-danger-border-color-focus: var(--tds-red-500);
+  --tds-btn-danger-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-danger-background-disabled-primary: var(--scania-neutral-solid-50);
   --tds-btn-danger-background-disabled-secondary: var(--tds-white);
   --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
   --tds-btn-danger-color-disabled: var(--tds-black-38);
@@ -103,36 +103,38 @@
 }
 
 .tds-mode-dark {
-  --tds-btn-primary-background: var(--tds-blue-400);
-  --tds-btn-primary-background-hover: var(--tds-blue-500);
-  --tds-btn-primary-background-active: var(--tds-blue-300);
-  --tds-btn-primary-background-focus: var(--tds-blue-600);
-  --tds-btn-primary-border-color-focus: var(--tds-blue-400);
-  --tds-btn-primary-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-primary-background: var(--scania-blue-400);
+  --tds-btn-primary-background-hover: var(--scania-blue-500);
+  --tds-btn-primary-background-active: var(--scania-blue-600);
+  --tds-btn-primary-background-focus: var(--scania-blue-500);
+  --tds-btn-primary-border-color-focus: var(--tds-white);
+  --tds-btn-primary-border-color: transparent;
+  --tds-btn-primary-border-color-hover: var(--tds-white);
+  --tds-btn-primary-outline-color-focus: var(--tds-blue-300);
   --tds-btn-primary-background-disabled-primary: var(--tds-grey-900);
-  --tds-btn-primary-background-disabled-secondary: var(--tds-grey-868);
+  --tds-btn-primary-background-disabled-secondary: var(--tds-grey-850);
   --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
-  --tds-btn-primary-color-disabled: var(--tds-white-38);
+  --tds-btn-primary-color-disabled: var(--scania-neutral-transparent-inverse-500);
   /* ICON */
   --tds-btn-icon-primary-fill: var(--tds-grey-50);
   --tds-btn-icon-primary-color: var(--tds-grey-50);
   --tds-btn-secondary-background: transparent;
   --tds-btn-secondary-color: var(--tds-white);
-  --tds-btn-secondary-border-color: var(--tds-white-48);
+  --tds-btn-secondary-border-color: var(--scania-neutral-transparent-inverse-400);
   --tds-btn-secondary-background-hover: var(--tds-blue-500);
   --tds-btn-secondary-color-hover: var(--tds-white);
-  --tds-btn-secondary-border-color-hover: var(--tds-blue-500);
-  --tds-btn-secondary-background-active: transparent;
+  --tds-btn-secondary-border-color-hover: var(--tds-white);
+  --tds-btn-secondary-background-active: var(--scania-blue-600);
   --tds-btn-secondary-color-active: var(--tds-white);
-  --tds-btn-secondary-border-color-active: var(--tds-white-87);
-  --tds-btn-secondary-background-focus: transparent;
+  --tds-btn-secondary-border-color-active: var(--tds-grey-200);
+  --tds-btn-secondary-background-focus: var(--scania-blue-500);
   --tds-btn-secondary-color-focus: var(--tds-white);
-  --tds-btn-secondary-border-color-focus: var(--tds-blue-400);
-  --tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-secondary-border-color-focus: var(--tds-white);
+  --tds-btn-secondary-outline-color-focus: var(--tds-blue-300);
   --tds-btn-secondary-outline-color: var(--tds-white);
   --tds-btn-secondary-background-disabled: transparent;
-  --tds-btn-secondary-color-disabled: var(--tds-white-38);
-  --tds-btn-secondary-border-color-disabled: var(--tds-white-38);
+  --tds-btn-secondary-color-disabled: var(--tds-grey-500);
+  --tds-btn-secondary-border-color-disabled: var(--tds-grey-500);
   --tds-btn-icon-secondary-color-focus: var(--tds-white);
   --tds-btn-icon-secondary-fill-focus: var(--tds-white);
   /* ICON */
@@ -143,38 +145,38 @@
   --tds-btn-ghost-border-color: transparent;
   --tds-btn-ghost-background-hover: transparent;
   --tds-btn-ghost-color-hover: var(--tds-white);
-  --tds-btn-ghost-border-color-hover: var(--tds-white-48);
+  --tds-btn-ghost-border-color-hover: var(--tds-white);
   --tds-btn-ghost-outline-color-hover: var(--tds-white-48);
   --tds-btn-ghost-background-active: transparent;
   --tds-btn-ghost-color-active: var(--tds-white);
-  --tds-btn-ghost-border-color-active: var(--tds-white-87);
+  --tds-btn-ghost-border-color-active: var(--tds-grey-200);
   --tds-btn-ghost-background-focus: transparent;
   --tds-btn-ghost-color-focus: var(--tds-white);
-  --tds-btn-ghost-border-color-focus: var(--tds-blue-300);
+  --tds-btn-ghost-border-color-focus: var(--tds-white);
   --tds-btn-ghost-outline-color-focus: var(--tds-blue-300);
   --tds-btn-ghost-background-disabled: transparent;
-  --tds-btn-ghost-color-disabled: var(--tds-white-38);
+  --tds-btn-ghost-color-disabled: var(--tds-grey-500);
   --tds-btn-ghost-border-color-disabled: transparent;
   /* ICON */
   --tds-btn-icon-ghost-fill: var(--tds-grey-50);
   --tds-btn-icon-ghost-color: var(--tds-grey-50);
-  --tds-btn-danger-background: var(--tds-negative);
+  --tds-btn-danger-background: var(--scania-extended-red-400);
   --tds-btn-danger-color: var(--tds-white);
   --tds-btn-danger-border-color: transparent;
-  --tds-btn-danger-background-hover: var(--tds-red-600);
+  --tds-btn-danger-background-hover: var(--scania-extended-red-500);
   --tds-btn-danger-color-hover: var(--tds-white);
   --tds-btn-danger-border-color-hover: transparent;
-  --tds-btn-danger-background-active: var(--tds-red-700);
+  --tds-btn-danger-background-active: var(--scania-extended-red-600);
   --tds-btn-danger-color-active: var(--tds-white);
   --tds-btn-danger-border-color-active: transparent;
-  --tds-btn-danger-background-focus: var(--tds-red-400);
+  --tds-btn-danger-background-focus: var(--scania-extended-red-500);
   --tds-btn-danger-color-focus: var(--tds-white);
-  --tds-btn-danger-border-color-focus: var(--tds-red-400);
-  --tds-btn-danger-outline-color-focus: var(--tds-red-700);
+  --tds-btn-danger-border-color-focus: var(--tds-white);
+  --tds-btn-danger-outline-color-focus: var(--tds-blue-300);
   --tds-btn-danger-background-disabled-primary: var(--tds-grey-900);
-  --tds-btn-danger-background-disabled-secondary: var(--tds-grey-868);
+  --tds-btn-danger-background-disabled-secondary: var(--tds-grey-850);
   --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
-  --tds-btn-danger-color-disabled: var(--tds-white-38);
+  --tds-btn-danger-color-disabled: var(--tds-grey-500);
   --tds-btn-danger-border-color-disabled: transparent;
   /* ICON */
   --tds-btn-icon-danger-fill: var(--tds-white);
@@ -203,17 +205,18 @@ button {
   cursor: pointer;
   height: 56px;
   padding: var(--tds-spacing-element-20);
-  border: 1px solid;
+  border: 1px solid transparent;
 }
 button * {
   box-sizing: border-box;
 }
 button:focus {
-  outline: none;
+  outline: 1px solid var(--scania-blue-400);
 }
 button:focus-visible {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 button.xs {
   padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);

package/dist/collection/components/button/button.js

@@ -15,6 +15,8 @@ export class TdsButton {
         this.modeVariant = null;
         this.animation = 'none';
         this.tdsAriaLabel = undefined;
+        this.name = undefined;
+        this.value = undefined;
         this.onlyIcon = false;
     }
     connectedCallback() {
@@ -28,11 +30,11 @@ export class TdsButton {
         if (!this.text && !hasLabelSlot) {
             this.onlyIcon = true;
         }
-        return (h(Host, { key: '08f21c291b0202663c640ce8faf8a01b9b915ba6', class: {
+        return (h(Host, { key: 'd6f3f193c3050d8eab6220cadd05847cbb528f3e', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
                 disabled: Boolean(this.disabled),
                 fullbleed: Boolean(this.fullbleed),
-            }, disabled: this.disabled }, h("button", Object.assign({ key: 'c1c3d9e6769c925ded8e95ebce64773f7ea3dfa4', type: this.type, disabled: this.disabled, class: {
+            }, disabled: this.disabled }, h("button", Object.assign({ key: '4b548051c9eeaf43d63a5173e08f0263896626b9', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -46,7 +48,7 @@ export class TdsButton {
                 'icon': hasIconSlot,
                 'only-icon': this.onlyIcon,
                 [`animation-${this.animation}`]: this.animation !== 'none',
-            } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '2ce8c3b56e8134f789b22a3db464516273d167d1', name: "label" }), hasIconSlot && h("slot", { key: 'b560a4308159ade1fd0dae0af99805a151cb8b5a', name: "icon" }))));
+            } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '0f85ffc90d0328c14ffd4696a3b305a1ff144253', name: "label" }), hasIconSlot && h("slot", { key: 'a0434202a202f7996174233b18eff6e4361df146', name: "icon" }))));
     }
     static get is() { return "tds-button"; }
     static get encapsulation() { return "scoped"; }
@@ -221,6 +223,40 @@ export class TdsButton {
                 },
                 "attribute": "tds-aria-label",
                 "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name attribute allows for different ways of accessing the button element"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value attribute can be used when handling a form submission"
+                },
+                "attribute": "value",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/checkbox/checkbox.css

@@ -52,10 +52,10 @@
   box-sizing: border-box;
 }
 .tds-checkbox input[type=checkbox]::before {
-  width: 24px;
-  height: 24px;
-  left: 0;
-  top: 0;
+  width: 22px;
+  height: 22px;
+  left: 1px;
+  top: 1px;
   border-radius: 4px;
 }
 .tds-checkbox input[type=checkbox]::after {
@@ -83,7 +83,7 @@
   border-color: var(--tds-checkbox-border-color-disabled-after);
 }
 .tds-checkbox input[type=checkbox]:disabled + label, .tds-checkbox input[type=checkbox].disabled + label {
-  color: var(--tds-grey-600);
+  color: var(--tds-checkbox-disabled);
   cursor: not-allowed;
 }
 .tds-checkbox input[type=checkbox]:disabled:hover::before, .tds-checkbox input[type=checkbox].disabled:hover::before {

package/dist/collection/components/checkbox/checkbox.js

@@ -34,6 +34,12 @@ export class TdsCheckbox {
             checked: this.checked,
         };
     }
+    /** Method to programmatically focus the checkbox element */
+    async focusElement() {
+        if (this.inputElement) {
+            this.inputElement.focus();
+        }
+    }
     handleIndeterminateState() {
         this.inputElement.indeterminate = this.indeterminate;
     }
@@ -58,11 +64,11 @@ export class TdsCheckbox {
         }
     }
     render() {
-        return (h("div", { key: '8f5104073f1be9323bc0125feab7515759ac7679', class: "tds-checkbox" }, h("input", { key: '8536a1eaefb5b7bdf258a4ddca67660becc797a5',
+        return (h("div", { key: '97afce57b6f6ce0d66dabd227f7271b5dc8fe707', class: "tds-checkbox" }, h("input", { key: '18b283a21ff649b9a4935a7b3e6f489cde16073d',
             // eslint-disable-next-line no-return-assign
             ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
                 this.handleChange();
-            } }), h("label", { key: 'e6e065ce109371607c5412ab38ece22d3ac1d626', htmlFor: this.checkboxId }, h("slot", { key: '4698f97ac58203e3f478321da53cc364157ded78', name: "label" }))));
+            } }), h("label", { key: '51d15b0eea1fd0f7517ca8d0f669bc02ac59781c', htmlFor: this.checkboxId }, h("slot", { key: 'bb10126c57b177f825ef8cd75da505465b2d6ae3', name: "label" }))));
     }
     static get is() { return "tds-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -314,6 +320,23 @@ export class TdsCheckbox {
                     "text": "Toggles the checked value of the component.",
                     "tags": []
                 }
+            },
+            "focusElement": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to programmatically focus the checkbox element",
+                    "tags": []
+                }
             }
         };
     }

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

@@ -36,11 +36,11 @@
   pointer-events: none;
 }
 .component .tds-chip-component.disabled input[type=radio]:checked:disabled + label {
-  background-color: var(--tds-chips-background-active);
+  background-color: var(--tds-chips-background-active-disabled);
   color: var(--tds-chips-text-checked-disabled);
 }
 .component .tds-chip-component.disabled input[type=checkbox]:checked:disabled + label {
-  background-color: var(--tds-chips-background-active);
+  background-color: var(--tds-chips-background-active-disabled);
   color: var(--tds-chips-text-checked-disabled);
 }
 .component .tds-chip-component.lg label {
@@ -78,7 +78,8 @@
 }
 .component .tds-chip-component input:focus-visible + label {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
   background-color: var(--tds-chips-background-focus);
 }
 .component .tds-chip-component input:checked + label {

package/dist/collection/components/datetime/datetime.js

@@ -56,6 +56,13 @@ export class TdsDatetime {
     async setValue(newValue) {
         this.value = newValue;
     }
+    /** Method to programmatically focus the datetime element */
+    async focusElement() {
+        if (this.textInput) {
+            this.textInput.focus();
+            this.focusInput = true;
+        }
+    }
     componentWillLoad() {
         if (this.defaultValue !== 'none') {
             this.value = this.getDefaultValue();
@@ -121,7 +128,7 @@ export class TdsDatetime {
             'tds-datetime-container-label-inside': this.label && this.labelPosition === 'inside' && this.size !== 'sm',
         };
         const iphone = navigator.userAgent.toLowerCase().includes('iphone');
-        return (h("div", { key: '1a55db8de53a69917a0f498ce4e9877136b21766', class: classNames, onKeyDown: (e) => {
+        return (h("div", { key: '28c414fb800bb7e1411feb93b03b4ec4732e60fb', class: classNames, onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     const browserIsChrome = navigator.userAgent.toLowerCase().includes('chrome');
                     if (browserIsChrome) {
@@ -129,9 +136,9 @@ export class TdsDatetime {
                         this.textInput.showPicker();
                     }
                 }
-            } }, this.labelPosition === 'outside' && this.label && (h("label", { key: '83a178f48b465978da70749d5a0a6b06c7a46423', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: 'd3b8cbc704aee3863a428f6bbc9b89a8894241df', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'b398e66d353aeb568024686b591dcf5d9d2288e6', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: '1d31da2daaa048b46fe9a3023f4342e0daa4cfde', ref: (inputEl) => {
+            } }, this.labelPosition === 'outside' && this.label && (h("label", { key: '8498489db26eeffef963d57dd8aaaa27903e3e98', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: 'e62f09d543d12a3d9578bee5249171c85c7e3f03', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '0d083993b8f447918d0110ba78f18586d5afac1c', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: 'cdec8e9e1c8f355858031f34799fac7dd8d03c4b', ref: (inputEl) => {
                 this.textInput = inputEl;
-            }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: 'f16d4c77abdc6b1cabb03b8e4beba58704796648', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: '168c3c719094c8b39dcc4fa16b4d13b588b9429b', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '6e0794302a5e1792b198c7d1208aa8e59bfb3d5c', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '1a954f5386c136d2cdb88408c9729a68adcd5e58', class: "datetime-icon icon-time" }, h("tds-icon", { key: '67b56f956fc439a71870fdd3ede387d007a69f08', size: "20px", name: "clock", svgTitle: "Clock" }))), h("div", { key: 'c1373d3f3413cdba67911cfc1884f201a326df97', class: "tds-datetime-bar" })), this.helper && (h("div", { key: 'c3d22a5de88ba11154b227ad0d8930cc0768bc99', class: "tds-datetime-helper" }, h("div", { key: '0c5123613944fc44184ab7d489712982b70c183e', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'a351a589cacb618dbf890e247e98efe14970062b', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
+            }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: 'f5ab00bd2a3dca4a46981da7e54ff6dcacfb6529', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: 'ce7799142c01703e7d3add1bc3d0fb474dec25e3', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '189b60ff034d2e0bc49e9461fc9970846a7e10a2', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '192c46c706e8d8ca8613e832df2f77e981b64e2a', class: "datetime-icon icon-time" }, h("tds-icon", { key: 'e0cb4c98ccd40cb6d5b82d313aa48da8e4564b57', size: "20px", name: "clock", svgTitle: "Clock" }))), h("div", { key: '5a677ae45553060d459e1002741c0bed7ae1cefa', class: "tds-datetime-bar" })), this.helper && (h("div", { key: '0b132b2f580c3dffcfceff2ba8b4c2315ca8cd50', class: "tds-datetime-helper" }, h("div", { key: 'b17e1f96757072c8092e4cbe6e66b45b209a16ae', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: '8afde58643e719da112bad1dcdc47f363c85490c', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
     }
     static get is() { return "tds-datetime"; }
     static get encapsulation() { return "scoped"; }
@@ -555,6 +562,23 @@ export class TdsDatetime {
                     "text": "Method that sets the value of the datetime element",
                     "tags": []
                 }
+            },
+            "focusElement": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to programmatically focus the datetime element",
+                    "tags": []
+                }
             }
         };
     }

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

@@ -22,7 +22,8 @@
 }
 :host .dropdown-option button:focus {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .dropdown-option button {
   all: unset;

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

@@ -223,7 +223,7 @@ body {
   border-bottom-color: var(--tds-dropdown-border-bottom);
 }
 :host .dropdown-select button.error {
-  border-bottom-color: var(--tds-negative);
+  border-bottom-color: var(--tds-dropdown-error);
 }
 :host .dropdown-select button.error:focus {
   border-bottom-color: transparent;
@@ -313,7 +313,7 @@ body {
   gap: 8px;
 }
 :host .helper.error {
-  color: var(--tds-negative);
+  color: var(--tds-dropdown-error);
 }
 :host .helper.disabled {
   color: var(--tds-dropdown-disabled-color);

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);
@@ -277,7 +287,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.
@@ -430,9 +451,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: '5c5314d4994b1ca9c09729df6c9b30d9fb6b33d3', class: {
+        return (h(Host, { key: 'aed0a485fc4634cdba2599fa9792fb6289a7459c', 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: '39d11ac06547b133540f037a0c09ddc40b972cb5', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '8ab624d380289699887b660d30512b2e892f71c0', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -482,7 +503,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: '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.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -493,11 +514,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: '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: {
                 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: '055e681faca85a461b07619c42fa0eb48a6ec028', 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

@@ -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 *,
@@ -42,7 +41,8 @@
 }
 :host button.footer-top-title-button:focus-visible {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  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;
+  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) {
@@ -24,7 +24,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;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 
 @media all and (max-width: 992px) {
@@ -46,6 +47,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-offset: -2px;
+    box-shadow: 0 0 0 1px var(--tds-white);
+    outline-offset: 1px;
   }
 }