@scania/tegel 1.32.0 → 1.32.1

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

@@ -34,10 +34,10 @@
   box-sizing: border-box;
 }
 .tds-radio-button .tds-form-input[type=radio]::before {
-  width: 24px;
-  height: 24px;
-  left: 0;
-  top: 0;
+  width: 22px;
+  height: 22px;
+  left: 1px;
+  top: 1px;
 }
 .tds-radio-button .tds-form-input[type=radio]::after {
   border: 1px solid var(--tds-radio-button-interaction-01);
@@ -49,11 +49,9 @@
 }
 .tds-radio-button .tds-form-input[type=radio]:hover::before {
   background-color: var(--tds-radio-button-background-hover);
-  opacity: 0.12;
 }
 .tds-radio-button .tds-form-input[type=radio]:focus::before {
   background-color: var(--tds-radio-button-background-focus);
-  opacity: 0.24;
   animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
 }
 .tds-radio-button .tds-form-input[type=radio]:disabled, .tds-radio-button .tds-form-input[type=radio].disabled {
@@ -96,6 +94,5 @@
   }
   100% {
     transform: scale(1);
-    opacity: 0.24;
   }
 }

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

@@ -20,8 +20,14 @@ export class TdsRadioButton {
         this.tdsAriaLabel = undefined;
         this.tdsTabIndex = undefined;
     }
+    /** Method to programmatically focus the radio button element */
+    async focusElement() {
+        if (this.inputElement) {
+            this.inputElement.focus();
+        }
+    }
     render() {
-        return (h("div", { key: 'ca977bcef62ce81be1c0387bc1db7a5bb669f164', class: "tds-radio-button" }, h("input", { key: '939027d597b396cfdab2b47a11465b6e46040036', "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: 'f40293c0fcce1dac843087b71b5e34bdd8e911fa', htmlFor: this.radioId }, h("slot", { key: '4190d41d4e90cd4125c4f997f46cefa44682dae7', name: "label" }))));
+        return (h("div", { key: '6f44a40cb5ccf890bdee47d36f47a79d5f8b603c', class: "tds-radio-button" }, h("input", { key: '1da8f9df168c631a634172385c3471a5c6bb03aa', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '0acf59236ffd3ee0136f2bdef9db8a36afe666ff', htmlFor: this.radioId }, h("slot", { key: 'add4ebdebbb4d5e15126a876c0c0940734b7b068', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }
@@ -197,5 +203,26 @@ export class TdsRadioButton {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "focusElement": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to programmatically focus the radio button element",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
 }

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css

@@ -36,7 +36,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.component-selected ::slotted(a),
 :host .component.component-selected ::slotted(button) {

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css

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

package/dist/collection/components/spinner/spinner.css

@@ -1,16 +1,16 @@
 /* Component variables aka overrides */
 :root {
-  --spinner-background-inverted: rgba(255, 255, 255, 1);
+  --spinner-background-inverted: var(--tds-white);
 }
 
 :root,
 .scania,
 .scania .tds-mode-light {
-  --spinner-background: rgba(43, 112, 211, 1);
+  --spinner-background: var(--tds-blue-400);
 }
 
 .scania .tds-mode-dark {
-  --spinner-background: rgba(74, 137, 243, 1);
+  --spinner-background: var(--tds-blue-400);
 }
 
 .traton,

package/dist/collection/components/stepper/step/step.css

@@ -30,8 +30,7 @@
 :host [role=listitem].lg.vertical::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 36px;
   width: 1px;
   top: 40px;
@@ -40,8 +39,7 @@
 :host [role=listitem].lg.horizontal::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: calc(50% + 24px);
   right: 0;
@@ -50,8 +48,7 @@
 :host [role=listitem].lg.horizontal::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   right: calc(50% + 24px);
   left: 0;
@@ -60,8 +57,7 @@
 :host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 16px;
   width: 10px;
@@ -71,8 +67,7 @@
 :host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 16px;
   width: 10px;
@@ -100,8 +95,7 @@
 :host [role=listitem].sm.vertical::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 20px;
   width: 1px;
   top: 34px;
@@ -110,8 +104,7 @@
 :host [role=listitem].sm.vertical::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 20px;
   width: 1px;
   top: 34px;
@@ -120,8 +113,7 @@
 :host [role=listitem].sm.horizontal::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: calc(50% + 16px + 8px);
   right: 0;
@@ -130,8 +122,7 @@
 :host [role=listitem].sm.horizontal::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: 0;
   right: calc(50% + 24px);
@@ -140,8 +131,7 @@
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 13px;
   width: 10px;
@@ -151,8 +141,7 @@
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 13px;
   width: 10px;
@@ -166,19 +155,22 @@
   position: relative;
 }
 :host [role=listitem] .content-container.error {
-  border-color: var(--tds-negative);
-  color: var(--tds-negative);
+  border-color: var(--tds-stepper-icon-step-border-color-warning);
+  color: var(--tds-stepper-icon-step-border-color-warning);
 }
 :host [role=listitem] .content-container.success {
-  background-color: var(--tds-positive);
-  border-color: var(--tds-positive);
+  background-color: var(--tds-stepper-icon-step-border-color-success);
+  border-color: var(--tds-stepper-icon-step-border-color-success);
   color: var(--tds-white);
 }
+:host [role=listitem] .content-container.current {
+  background-color: var(--tds-stepper-background);
+  color: var(--tds-stepper-color);
+}
 :host [role=listitem] .content-container.upcoming {
   background-color: transparent;
   border-color: var(--tds-stepper-label-border-color-upcoming);
   color: var(--tds-stepper-label-text-color-upcoming);
-  opacity: var(--tds-stepper-label-text-opacity-upcoming);
 }
 :host [role=listitem] .label {
   text-align: center;

package/dist/collection/components/stepper/step/step.js

@@ -40,7 +40,7 @@ export class TdsStep {
         }
     }
     render() {
-        return (h(Host, { key: 'f049d976121a1179979026cd3087ad459183de06' }, h("div", { key: '52caba69725b8716dc229659e0082e5388b513d3', role: "listitem", "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: '0dcc74fe5edf2c9333bcfe195be72b07d5f67b92', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '3313463d27273a53000c327a2578a8c67446c17e', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: 'ce4985e94df5453bd62733677977137c279e6f35', name: "label" }))))));
+        return (h(Host, { key: 'f049d976121a1179979026cd3087ad459183de06' }, h("div", { key: '1f961578e8e54ffc9e0d0c2966c86e3e32f8ddd8', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'f83033e0a0761227d911ac77cac9c64c31fe4c11', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '83c92f388cfebe37e0fb94c81d14adc391fbbbfa', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '1c6381a25f8af42afe54c0c8eaff4090bf14ee80', name: "label" }))))));
     }
     static get is() { return "tds-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css

@@ -40,7 +40,8 @@
 }
 :host .tds-table__expand-control-container .tds-table__expand-input:focus {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .tds-table__expand-control-container .tds-expendable-row-icon {
   height: 16px;

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

@@ -138,5 +138,6 @@ tds-dropdown:focus-within::after {
   border-radius: var(--tds-spacing-element-4);
   pointer-events: none;
   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/table/table-header-cell/table-header-cell.css

@@ -61,7 +61,7 @@
   opacity: 0;
   transform-origin: center;
   transition: opacity 200ms ease-in, transform 200ms ease;
-  fill: var(--tds-table-color);
+  color: var(--tds-table-color);
 }
 :host(.tds-table__header-cell--sortable) .tds-table__header-button:hover .tds-table__header-button-icon {
   opacity: 1;

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css

@@ -25,7 +25,8 @@
 }
 :host ::slotted(*: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 div:not(.selected) {
   background-color: var(--tds-folder-tab-background);

package/dist/collection/components/tabs/folder-tabs/folder-tabs.css

@@ -56,7 +56,8 @@
 :host .scroll-right-button:focus,
 :host .scroll-left-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 .scroll-right-button svg,
 :host .scroll-left-button svg {

package/dist/collection/components/tabs/inline-tabs/inline-tabs.css

@@ -68,7 +68,8 @@
 :host .scroll-right-button:focus,
 :host .scroll-left-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 .scroll-right-button svg,
 :host .scroll-left-button svg {

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css

@@ -68,7 +68,8 @@
 :host .scroll-right-button:focus,
 :host .scroll-left-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 .scroll-right-button svg,
 :host .scroll-left-button svg {

package/dist/collection/components/textarea/textarea.js

@@ -42,6 +42,13 @@ export class TdsTextarea {
         this.focusInput = true;
         this.tdsFocus.emit(event);
     }
+    /** Method to programmatically focus the textarea element */
+    async focusElement() {
+        if (this.textEl) {
+            this.textEl.focus();
+            this.focusInput = true;
+        }
+    }
     setModeVariant(modeVariant) {
         if (this.readOnly && modeVariant === 'primary') {
             return 'secondary';
@@ -58,7 +65,7 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: '1d9b2b46f64dfd4b65af35b266544c0164373c06', class: {
+        return (h("div", { key: '06fd8ce87614410858a7d9253fac73a6f1cf20ec', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -68,7 +75,7 @@ export class TdsTextarea {
                 'textarea-data': this.value !== '',
                 [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
                 'no-min-width': this.noMinWidth,
-            } }, this.labelPosition !== 'no-label' && (h("label", { key: '971f3f72566f19851a28617e5c8a7889eb0acea8', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: 'c3d6ed6c8f842d7561aa254c54eee44f48ce4d63', class: "textarea-wrapper" }, h("textarea", { key: 'a9381e6a8546c7f318b171549352964e31fd305b', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: '1a02a333e4164b39fd223c68cc3d27d7c53487fb', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '6d45e8c8427770accc82c7ad9e10fbed016437a4', class: "textarea-wrapper" }, h("textarea", { key: '614c30a5b5077060b1568744cf0800580e746819', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
                 this.textEl = inputEl;
             }, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
                 if (!this.readOnly) {
@@ -78,7 +85,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '7252559ca80fb56ca1098d7c90c1519c3a77b402', class: "textarea-resizer-icon" }, h("svg", { key: '4402cced255cb35600747461cf2c4f2d42f7cca9', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4387fb4738c677135fccd467856595908ba31632', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: 'dd0ec749e9e82f43c95d452fb79357b826ab5451', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '9606d2c2aa9f4916893dc0c25f0d076df308853a', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '28812e6359ab9747156d2c75094bd26bdee32edf', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'e17f24de9e69ff4a0a91dc2acaa1933edff86228', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '7b2968586c351df3a6ced7da57ac53b256f4ac45', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: 'ab34044bd4e96d1e98df40e7b6517bc2fcaa6140', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'b515878f1e8427b79c242bfe3a13df505d6c7304', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'e0574ae32d1ce9c69156dc2aa52d8d1881b6ff9b', class: "textarea-resizer-icon" }, h("svg", { key: '23e79729cc099b7e4f07192c05aa4a304b91788a', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '54891720aa51af768f467be5bd8a72fc7adc8d47', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '72e3586f1be99460ced66d640392b4596e5b8c2f', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '9f84391a75b5ae428c71d3b713a9d281c4475a09', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '55e195bb50d8b707ec3a403c8c62cad74d738919', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'ff2043a19ebb129178ecfd36126b0d23eacde4d1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '84b0991ef5ddab7f960ba75db22c65762b0b5d20', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '963b3a3bdafeabec6ad2bd3663c07ed0d4a5b3fd', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '8496a0ae44721cdcd9443e09ff6a709b6d3c704f', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -480,4 +487,25 @@ export class TdsTextarea {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "focusElement": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to programmatically focus the textarea element",
+                    "tags": []
+                }
+            }
+        };
+    }
 }

package/dist/collection/components/toast/toast.css

@@ -13,28 +13,28 @@
   border-radius: 4px;
 }
 :host .wrapper.information {
-  border-left: 4px solid var(--tds-information);
+  border-left: 4px solid var(--tds-toast-icon-color-info);
 }
 :host .wrapper.information tds-icon {
-  color: var(--tds-information);
+  color: var(--tds-toast-icon-color-info);
 }
 :host .wrapper.success {
-  border-left: 4px solid var(--tds-positive);
+  border-left: 4px solid var(--tds-toast-icon-color-success);
 }
 :host .wrapper.success tds-icon {
-  color: var(--tds-positive);
+  color: var(--tds-toast-icon-color-success);
 }
 :host .wrapper.error {
-  border-left: 4px solid var(--tds-negative);
+  border-left: 4px solid var(--tds-toast-icon-color-error);
 }
 :host .wrapper.error tds-icon {
-  color: var(--tds-negative);
+  color: var(--tds-toast-icon-color-error);
 }
 :host .wrapper.warning {
-  border-left: 4px solid var(--tds-warning);
+  border-left: 4px solid var(--tds-toast-icon-color-warning);
 }
 :host .wrapper.warning tds-icon {
-  color: var(--tds-warning);
+  color: var(--tds-toast-icon-color-warning);
 }
 :host .wrapper button.close {
   height: 20px;
@@ -51,7 +51,8 @@
 }
 :host .wrapper button.close:focus {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .wrapper button.close tds-icon {
   color: var(--tds-toast-dissmiss-color);
@@ -94,9 +95,6 @@
 :host .content .toast-bottom {
   padding-top: 12px;
 }
-:host slot[name=actions]::slotted(*) {
-  color: var(--tds-toast-link-color);
-}
 :host .tds-mode-variant-primary {
   --tds-toast-background: var(--tds-toast-background-primary);
 }

package/dist/collection/components/toggle/toggle.css

@@ -34,6 +34,7 @@
   border-radius: 16px;
   background-color: var(--tds-toggle-off-slider);
   left: 0;
+  border: 1px solid transparent;
 }
 .tds-toggle input[type=checkbox]::after {
   width: 16px;
@@ -43,16 +44,30 @@
   left: 4px;
   top: 4px;
 }
-.tds-toggle input[type=checkbox]:focus, .tds-toggle input[type=checkbox]:hover {
+.tds-toggle input[type=checkbox]:focus {
   outline: none;
+  outline: 2px solid var(--tds-toggle-border-outline);
+  border-radius: 16px;
+  outline-offset: 0;
 }
-.tds-toggle input[type=checkbox]:focus::before, .tds-toggle input[type=checkbox]:hover::before {
+.tds-toggle input[type=checkbox]:focus::before {
   background-color: var(--tds-toggle-off-slider-focus);
   border: 1px solid var(--tds-toggle-off-border-focus);
 }
+.tds-toggle input[type=checkbox]:hover::before {
+  background-color: var(--tds-toggle-off-slider-hover);
+  border: 1px solid var(--tds-toggle-off-border-focus);
+}
 .tds-toggle input[type=checkbox]:checked::before {
   background-color: var(--tds-toggle-on-slider);
-  border: 1px solid var(--tds-toggle-on-border-focus);
+}
+.tds-toggle input[type=checkbox]:checked:focus::before {
+  background-color: var(--tds-toggle-on-slider-focus);
+  border: 1px solid var(--tds-toggle-off-border-focus);
+}
+.tds-toggle input[type=checkbox]:checked:hover::before {
+  background-color: var(--tds-toggle-on-slider-hover);
+  border: 1px solid var(--tds-toggle-off-border-focus);
 }
 .tds-toggle input[type=checkbox]:checked::after {
   left: 24px;

package/dist/collection/components/toggle/toggle.js

@@ -29,6 +29,12 @@ export class TdsToggle {
             checked: this.checked,
         };
     }
+    /** Method to programmatically focus the toggle element */
+    async focusElement() {
+        if (this.inputElement) {
+            this.inputElement.focus();
+        }
+    }
     componentWillLoad() {
         this.labelSlot = this.host.querySelector("[slot='label']");
     }
@@ -38,10 +44,10 @@ export class TdsToggle {
         }
     }
     render() {
-        return (h("div", { key: '01d3faf866451cf2e09694d614b1cca9defa1f69', class: "tds-toggle" }, this.headline && (h("div", { key: '2809bf2c3653c20ca6b93280b3391255b2285d8c', class: {
+        return (h("div", { key: '212a541d06f0cc534855ac872cfb386dc1b2d4ff', class: "tds-toggle" }, this.headline && (h("div", { key: '076c51461d4898d2bfa3c86fadd94ac2ad63c7a8', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), h("input", { key: '52ab62b4d4c506ca74533ffafc68247accae612b', "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '73f43d7134ff9a9ecded6b8b153b1590014e2a80', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: 'efe7c2a3f76f9990a00b1156d66b78c0e26e6411', name: "label" })))));
+            } }, this.headline)), h("input", { key: 'e0e849d7b05b77612fc949894cac8befa5b89370', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '4d1dcc70f896695657ca7ca68fd832ee4d13417a', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '800ea4ee2760efee8cdfe1ac3aee4b3a6f95f199', name: "label" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }
@@ -236,6 +242,23 @@ export class TdsToggle {
                     "text": "Toggles the Toggle.",
                     "tags": []
                 }
+            },
+            "focusElement": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to programmatically focus the toggle element",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/utils/accessibility.js

@@ -0,0 +1,30 @@
+/**
+ * Processes HTML content to make it more accessible for screen readers by:
+ * 1. Removing HTML tags while preserving their text content
+ * 2. Converting HTML entities to their text equivalents
+ * 3. Normalizing whitespace
+ *
+ * @param htmlContent - The HTML content to be processed for screen readers
+ * @returns Clean, readable text suitable for screen readers
+ *
+ * @example
+ * // Input: "<p>Hello <b>World</b> &amp; Universe!</p>"
+ * // Output: "Hello World and Universe!"
+ */
+export const processHtmlForScreenReader = (htmlContent) => {
+    if (!htmlContent)
+        return '';
+    return (htmlContent
+        // Remove HTML tags
+        .replace(/<[^>]*>/g, ' ')
+        // Replace common HTML entities with their text equivalents
+        .replace(/&nbsp;/g, ' ')
+        .replace(/&amp;/g, 'and')
+        .replace(/&lt;/g, 'less than')
+        .replace(/&gt;/g, 'greater than')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'")
+        // Normalize whitespace
+        .replace(/\s+/g, ' ')
+        .trim());
+};

package/dist/collection/utils/axeHelpers.js

@@ -1,3 +1,12 @@
 import AxeBuilder from "@axe-core/playwright";
-const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region', 'color-contrast'];
-export const tegelAnalyze = async (page) => new AxeBuilder({ page }).disableRules(disabledRules).analyze();
+const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region'];
+const rules = [
+    'best-practice',
+    'wcag2a',
+    'wcag2aa',
+    // 'wcag2aaa', // includes color-contrast-enhanced rule
+    'wcag21a',
+    'wcag21aa',
+    'wcag22aa',
+];
+export const tegelAnalyze = async (page) => new AxeBuilder({ page }).disableRules(disabledRules).withTags(rules).analyze();

package/dist/components/{p-ece91cb9.js → p-037c48f6.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
 import { d as defineCustomElement$3 } from './p-9ad61cb5.js';
-import { d as defineCustomElement$2 } from './p-6cdccb27.js';
+import { d as defineCustomElement$2 } from './p-76dc921a.js';
 import { d as defineCustomElement$1 } from './p-c715ab56.js';
 
 const headerLauncherButtonCss = ":host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";