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

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

@@ -169,9 +169,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'ccd58f7b7b6bb4423fa45a6d6177386f5561e32a', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '0369ce03c5cb29f24762b6b5bb3ba932f82a0869', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '9fa2d8cb54ac480fb5875432440506b0c12efaa5', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'aecb68d56088f84e271f3c829c84da4e732df9b8', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'f8cf277e9bb870d3b7d53bc3eff73806b61f0828', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'f72664b9b0f19b9a0c4ded16bd1be4b66594406a', name: "chevron_left", size: "20px" })), h("slot", { key: '1e2bc784f1148361bf04b34cbbdb62f3d3aad8af', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'b9d0e45c7d46a399081d561e496c5d1cc81132b0', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '55bbe28b1524a0ac6a808b1fb41225263977005f', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '9b97d342cfe66209063b504b49480d587cd626d5', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'a447ce946eb5bc02a2527f210322aa76ca5ad5b8', name: "chevron_left", size: "20px" })), h("slot", { key: '1df34e68bbea35ef76de48e7b8fe96b3a8655792', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '7c753dd66c173265c32a7b49197df12fbecc78d1', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'f76934b67470db5ff6ddb6fbae86f87fd3d0bdee', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js

@@ -30,8 +30,8 @@ export class TdsNavigationTab {
         }
     }
     render() {
-        return (h(Host, { key: '089ff23cbaa8ec219eb3771964a6843015b47378' }, h("div", { key: 'c75620addf322521de678bf4012c5c1dfdeb9464', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'f3bb65a7f8aad7adfc0ccb5d4bbc1c98c368978b' }))));
+        return (h(Host, { key: '28ba6f5bedc4f2a31e5011e37bf92d3b38fa8abe' }, h("div", { key: 'ac5aad203d8a13dc42a8f9e99b2ccdd7c784c9af', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'da6292612753748f6cac68e0b282ecde642cb5b5' }))));
     }
     static get is() { return "tds-navigation-tab"; }
     static get encapsulation() { return "shadow"; }

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/tabs/navigation-tabs/navigation-tabs.js

@@ -169,15 +169,15 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '26d9458d689f9304aa6fb6a5b07f05079c715152', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '8b8568c45abe2952607764df75682a10864bf35e', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '2fc278cacc04614ca43b70f52b12f79b31227fbb', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '50357810903ea3bff83fde4478960de0866c7c15', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '369338833a13937105bf4ebaf50a22b9cb5d618f', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'b5b05a2f9bce1618c71594cf388dc83efce98915', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'bea7b39e109ad4453065176b0e16e0d0595ba37a', name: "chevron_left", size: "20px" })), h("slot", { key: '5b82ca06921a3566ab7c1614d6e551e4332d8112', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '50c111d8298d3715503b251d890c2a59f984c9fc', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'aad19852d36ff8e1642ba464f9618a57ff37169c', name: "chevron_left", size: "20px" })), h("slot", { key: '3dcf0d7e6900df33a69863868a3a48dcb4aa8141', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '352539955226aecf92deb0c0db83c42a5b021e43', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '9e7ba00a1c6e155dcb8f76a175411ee9d20fb669', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '0e3fe531374dd82b6ee5de1a5a1bea4a38e03500', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text-field/text-field.js

@@ -76,7 +76,7 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '81cbb5cca60842e284e60630307f246b50650d79', class: {
+        return (h("div", { key: '985928ef59662762648f2d95d5decad2e3188e05', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -94,12 +94,12 @@ export class TdsTextField {
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: '57bc0784f18f9ed2c4fd31699832599ac73ceb32', class: "text-field-label-outside" }, h("label", { key: '8cadf1065d6556d6f9dc74b70d3c36b48db86e38', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'd191fdf981ac742c4a95fa69202607f0c73606d7', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'de76fcf2db999b9e21b33bf3554d22e4e7648574', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '7a409b43a1fee8b7b078abc5f96c925ab97bcedc', class: "text-field-label-outside" }, h("label", { key: 'c6bdaab4e6f81a95aa71a4e23a1f02fb1bcef9ec', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '945f7901a92850da22ab84c5fe77e2d97738aaa9', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5d6cb2facb8ff90b7393409b769c2b5e5a860421', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { key: 'ab87f5a55f1a7d94bbcb624bc1c4f864c0136cf8', name: "prefix" }))), h("div", { key: '7097450497a908bef52ab5d28966267c984f433d', class: "text-field-input-container" }, h("input", { key: 'f25d3c0ce37078cf018aa80cea8d5e055656f2c1', ref: (inputEl) => {
+            } }, h("slot", { key: 'b0f0e3ebb96dbd2af021150b68690af566db44b9', name: "prefix" }))), h("div", { key: 'c5b172ee6c561256ab930490113f406b88eae67c', class: "text-field-input-container" }, h("input", { key: '2e0a9070b41bde39a2a0f14b132f474692eb0e04', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -114,13 +114,13 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '40a00f563ef4c62345a39d03937f0824ccef0c44', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'b41eb0927e23dff6fd12a8304f7bff5a8b743a54', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '0d26ee8cb9838ee91574119ae0e1febb06318c9c', class: {
+            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'ffb3bbb84ab718c2259134f32ee6dd0eb348cb9f', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '166da0147311d28064b7e03bbefd1a0ee18db5ca', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '4bb21d12957bf65d525931c88a5a89fff49d4eaf', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { key: '1af3d2006e55936a8afcce17ca9519b9bb9907c5', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '89b9f9b62e50006f933ab36974f8d6c6e2dab9c8', class: "text-field-icon__readonly" }, h("tds-icon", { key: '44cc31f05988149991d58d090187e444b33ec62e', name: "edit_inactive", size: "20px" }))), h("span", { key: '73f3021a39c0a880224879356866cd214ccb225e', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: 'c70487a997117103ec68ddbdf86d0ca9701f2202', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'dee32001897276fe40813ef0b29077d31a331b0d', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '31e68824fb88938e6c7fc3f9f80a84bce101a8f9', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '63e22a80312fdd7365a8aec9a5fcd7c8104c376a', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'e31d5df19bbf0d8278f2f2dbc7d978d770378a89', class: {
+            } }, h("slot", { key: '7e67dbc8f4f67cb0c7d194e01e5787ae18ffab13', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'd213ec000d837cbd4b711468ef3cfa826cc65ac2', class: "text-field-icon__readonly" }, h("tds-icon", { key: '56b8b76a5771889f9f36ab683dcba6906bff42a6', name: "edit_inactive", size: "20px" }))), h("span", { key: '9e8fa95602a1ce5630f30947b59decc700c06c8b', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: '9e8547e06a25e7da98ff977ac6be1b79d27e4151', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'daeea67a48a15d27785f31dfcb69fb75e31ab85b', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '974bad3f97b23d69a20130bf66b6c72ef47f68bc', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '687cad3cb0451a262f836089851e9a2e08f2c74e', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '431709fb793dde8845b20698e722a7c140bb32b6', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));

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: '71aa238805cae74bde180e9a2300677c2ca5542a', 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: 'a5f6eabfb1f455d3d773b52e5a77e379b1175c88', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '6d555f64a6f92d170b697c5634a41a5ca5114a6c', class: "textarea-wrapper" }, h("textarea", { key: '90ce33c8896fbc9f037026f3e83557d9a09e0dcb', 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: '0e253fbbed6e02fe7d1af68a033fd4324c1a9bd6', class: "textarea-resizer-icon" }, h("svg", { key: '740d12a1ef48b430fd12c3362511b8186d1d0d4f', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f5d9d20101d4ee5882ab4b36e085f5f32c12bd4c', "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: '2415b36f980c421d69522ae0d41e91d7f19221f9', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '0d3a2de49aa612cb9d308ec2ccae03c21ca86ca4', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '287b924c5fdaa3248d1dd82fa2b14d61e18dc78f', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '920d6a4e93b0f392c24b1e8aabd49e17f724af80', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && !this.readOnly && h("tds-icon", { key: '3162f70c2c16dcd2e78248731a0a59c58a1a7e1b', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '81d7c4a8b3ba2dde55384d36edad90d96604107c', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'db93c588a97eeeb7eb533a224d4b8d080f8ad49b', 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/toast/toast.js

@@ -65,12 +65,12 @@ export class TdsToast {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: 'b5f8ebf48f31ced7100681b06339ba896d6eca64', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: '433c25165487688ff40c78a0455d30cedd08c76f', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: 'bd1e5c5c04b8aa66cb44241fb37711df0d797d28', class: `
+            } }, h("div", { key: '2734573a413d9cdf1a329675fe0e0db374243cbf', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: 'aa6e3fd61ad5a2e962f6e70d48ce266b7c8913e0', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '8502cb5c3b305942fe14ffde76ee4dfc63758ce8', class: `content` }, h("div", { key: '5ef927acd2e0d6bba51c4b20b79fee1240c821ef', class: "header-subheader" }, this.header && h("div", { key: 'c568d13668da3502c5f34810fea5f3a9d9629572', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'e9316b99d758019127faf05adb9ae1754e3ea910', name: "header" }), this.subheader && h("div", { key: '428e2659621c6eb4ddb302b9cab6902d93d2f514', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '2ec858d2feeaf679ab8aa061cab2156f926e29a2', name: "subheader" })), usesActionsSlot && (h("div", { key: '3f4836e54bedbeb3b02b78c0ac0bfa47770c4f80', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '76fa5d8534ea34010968a7183e07e62a4be3e5f7', name: "actions" })))), this.closable && (h("button", { key: '8076fa3d885b7649758b084301e092d083103ecd', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'f9bf7fa804352e9d09bbdc6251fe02c89cb174a8', name: "cross", size: "20px", svgTitle: "cross" }))))));
+            ${this.variant}` }, h("tds-icon", { key: '88d4ab6fd55d64c93ad3089c695d0fa4075208a6', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '02de15f884420946530d2e04c330987f73c9ca44', class: `content` }, h("div", { key: '4eb8c6a13a7bb53313a18b47bfa8e2ab1211cdbc', class: "header-subheader" }, this.header && h("div", { key: '1b707e29cdd68a5cc73a2b694b8b93698cbac661', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'ffe2b463f8fc6e4ca3b563d7a4ae55968cb4a478', name: "header" }), this.subheader && h("div", { key: '8164b591452e4a6f025f752951c678a15443fff9', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '2bca8428e8eb128cf8c0f62b31a0da54ef555df3', name: "subheader" })), usesActionsSlot && (h("div", { key: 'de84bc19257b09127b861b357240509a7346f2e7', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'b85a46c5dc97dc7d3b95feb816145731887711fb', name: "actions" })))), this.closable && (h("button", { key: '69adb03d815ece9e50cf436957927c5dcd4d3ab8', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '9b4f062079caa32c5900202aaf1c2a7a5ef8e18c', name: "cross", size: "20px", svgTitle: "cross" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }

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: 'f1151ef33eaf8ee11761badb74dcb24916481ce1', class: "tds-toggle" }, this.headline && (h("div", { key: '848f0bf92aa6e21a7d84dea6d3cc41f3228cbb9b', 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: '25907b86ae6fe55dca60b1254a3901bb090a8d36', "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: 'ef3c492d3d3c7bddc34c64bfcc568e47f17a2cd1', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '339f355bbba7f3c18de4049df1d0a82d87884f44', 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/components/tooltip/tooltip.js

@@ -58,7 +58,7 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'c09e902febe788fe0f38d9abca24864bfbf59b2d', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '2ae840c2abe03714f071034bda652265ef09fc9b' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: 'e7229ee89dea45931af9d12f04b2f31a9c0f7be2', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'e4b263f4414f6ce9d2e557fc5431040d718aff3c' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -71,7 +71,7 @@ export class TdsTooltip {
             // @ts-ignore
             onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: 'f0211f7e337709f4b8d0e8e4374c0ebd39635f25' }))));
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '41797812218d42837bb56b393a5e20c612cc51ad' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/stories/formatHtmlPreview.js

@@ -0,0 +1,10 @@
+import prettier from "prettier/standalone";
+import parserBabel from "prettier/parser-babel";
+import parserHtml from "prettier/parser-html";
+const prettierOptions = {
+    bracketSameLine: false,
+    htmlWhitespaceSensitivity: 'ignore',
+    printWidth: 100,
+};
+const formatHtmlPreview = (htmlStr) => prettier.format(htmlStr, Object.assign({ parser: 'html', plugins: [parserBabel, parserHtml] }, prettierOptions));
+export default formatHtmlPreview;

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

package/dist/components/{p-6732b15a.js → p-1c6e7dc9.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { d as dfs } from './p-52bf0fdf.js';
 
-const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component tds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center;position:relative}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--tds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
+const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component tds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center;position:relative}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--tds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
 const TdsSideMenuItemStyle0 = sideMenuItemCss;
 
 const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem extends H {