@scania/tegel 1.31.1-textarea-reactive-value-beta.1 → 1.32.0-accessibility-beta.0

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;
   }
 }

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

@@ -28,7 +28,8 @@
 }
 :host .component ::slotted(a: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 .component-selected {
   background-color: var(--tds-nav-item-background-selected);

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

@@ -23,7 +23,8 @@
 :host ::slotted(button:focus-visible),
 :host ::slotted(a: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 .component-active ::slotted(button),
 :host .component-active ::slotted(a) {

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

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

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

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

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

@@ -216,7 +216,8 @@ button.tds-modal-close {
 }
 .tds-modal-close:focus {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 @media (min-width: 320px) {
   .tds-modal-close {