@scania/tegel 1.27.0 → 1.28.0

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

@@ -17,9 +17,11 @@ export class TdsRadioButton {
         this.checked = false;
         this.required = false;
         this.disabled = false;
+        this.tdsAriaLabel = undefined;
+        this.tdsTabIndex = undefined;
     }
     render() {
-        return (h("div", { key: '6beb0c5754035e201cc35cabf68f21dbf9725cf8', class: "tds-radio-button" }, h("input", { key: 'f396d559dcb5a9c86a0f199bcafcc753340571c8', class: "tds-form-input", type: "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() }), h("label", { key: 'c036866c8cb8f02de53de6d2ec95ed7238a3f37e', htmlFor: this.radioId }, h("slot", { key: '962e47b9f92477ebfad294198ab844c37d914d3d', name: "label" }))));
+        return (h("div", { key: '4fbbd82a09e16551774b0b81eefa4f8e54ea3650', class: "tds-radio-button" }, h("input", { key: 'c7da40a753c5c7116810918e6349076bd9fdbb53', "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: '869ccd92f5b77a5475d409ae6b2f6d20df37c72d', htmlFor: this.radioId }, h("slot", { key: 'bdeabd6fe808498a0b2b08edb4a7ec33e6953ffe', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }
@@ -140,6 +142,40 @@ export class TdsRadioButton {
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides an accessible name for the component"
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
+            },
+            "tdsTabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides a tabindex used when radio buttons are grouped"
+                },
+                "attribute": "tds-tab-index",
+                "reflect": false
             }
         };
     }

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

@@ -1,18 +1,41 @@
+/* Component variables aka overrides */
 :root {
-  --tds-spinner-background: var(--tds-blue-400);
-  --tds-spinner-background-inverted: var(--tds-white);
-  --tds-spinner-speed: 1.8s;
-  --tds-spinner-speed-lg: 2s;
-  --tds-spinner-radius-xs: 8px;
-  --tds-spinner-radius-sm: 12px;
-  --tds-spinner-radius-md: 26px;
-  --tds-spinner-radius-lg: 42px;
-  --tds-spinner-radius: var(--tds-spinner-radius-lg);
-  --tds-spinner-stroke-width-xs: 3px;
-  --tds-spinner-stroke-width-sm: 4px;
-  --tds-spinner-stroke-width-md: 6px;
-  --tds-spinner-stroke-width-lg: 8px;
-  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-lg);
+  --spinner-background-inverted: rgba(255, 255, 255, 1);
+}
+
+:root,
+.scania,
+.scania .tds-mode-light {
+  --spinner-background: rgba(43, 112, 211, 1);
+}
+
+.scania .tds-mode-dark {
+  --spinner-background: rgba(74, 137, 243, 1);
+}
+
+.traton,
+.traton .tds-mode-light {
+  --spinner-background: rgba(0, 72, 82, 1);
+}
+
+.traton .tds-mode-dark {
+  --spinner-background: rgba(194, 191, 182, 1);
+}
+
+/* Component variables */
+:root {
+  --spinner-speed: 1.8s;
+  --spinner-speed-lg: 2s;
+  --spinner-radius-xs: 8px;
+  --spinner-radius-sm: 12px;
+  --spinner-radius-md: 26px;
+  --spinner-radius-lg: 42px;
+  --spinner-radius: var(--spinner-radius-lg);
+  --spinner-stroke-width-xs: 3px;
+  --spinner-stroke-width-sm: 4px;
+  --spinner-stroke-width-md: 6px;
+  --spinner-stroke-width-lg: 8px;
+  --spinner-stroke-width: var(--spinner-stroke-width-lg);
   --PI: 3.14159265358979;
 }
 
@@ -25,53 +48,53 @@
 }
 
 .tds-spinner-svg {
-  width: calc(var(--tds-spinner-radius) * 2);
-  height: calc(var(--tds-spinner-radius) * 2);
+  width: calc(var(--spinner-radius) * 2);
+  height: calc(var(--spinner-radius) * 2);
   transform: scale(-1, 1) rotate(-90deg);
 }
 .tds-spinner-svg-xs {
-  --tds-spinner-radius: var(--tds-spinner-radius-xs);
-  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-xs);
-  --tds-spinner-animation-speed: var(--tds-spinner-speed);
+  --spinner-radius: var(--spinner-radius-xs);
+  --spinner-stroke-width: var(--spinner-stroke-width-xs);
+  --spinner-animation-speed: var(--spinner-speed);
 }
 .tds-spinner-svg-sm {
-  --tds-spinner-radius: var(--tds-spinner-radius-sm);
-  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-sm);
-  --tds-spinner-animation-speed: var(--tds-spinner-speed);
+  --spinner-radius: var(--spinner-radius-sm);
+  --spinner-stroke-width: var(--spinner-stroke-width-sm);
+  --spinner-animation-speed: var(--spinner-speed);
 }
 .tds-spinner-svg-md {
-  --tds-spinner-radius: var(--tds-spinner-radius-md);
-  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-md);
-  --tds-spinner-animation-speed: var(--tds-spinner-speed);
+  --spinner-radius: var(--spinner-radius-md);
+  --spinner-stroke-width: var(--spinner-stroke-width-md);
+  --spinner-animation-speed: var(--spinner-speed);
 }
 .tds-spinner-svg-lg {
-  --tds-spinner-radius: var(--tds-spinner-radius-lg);
-  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-lg);
-  --tds-spinner-animation-speed: var(--tds-spinner-speed-lg);
+  --spinner-radius: var(--spinner-radius-lg);
+  --spinner-stroke-width: var(--spinner-stroke-width-lg);
+  --spinner-animation-speed: var(--spinner-speed-lg);
 }
 
 .tds-spinner-circle {
-  cx: var(--tds-spinner-radius);
-  cy: var(--tds-spinner-radius);
-  r: calc(var(--tds-spinner-radius) - var(--tds-spinner-stroke-width) / 2);
+  cx: var(--spinner-radius);
+  cy: var(--spinner-radius);
+  r: calc(var(--spinner-radius) - var(--spinner-stroke-width) / 2);
   fill: none;
-  --tds-spinner-stroke-dash: calc((2 * var(--PI)) * var(--tds-spinner-radius));
-  stroke-dasharray: var(--tds-spinner-stroke-dash);
-  stroke-width: var(--tds-spinner-stroke-width);
-  animation: dash var(--tds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
+  --spinner-stroke-dash: calc((2 * var(--PI)) * var(--spinner-radius));
+  stroke-dasharray: var(--spinner-stroke-dash);
+  stroke-width: var(--spinner-stroke-width);
+  animation: dash var(--spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
 }
 .tds-spinner-circle-standard {
-  stroke: var(--tds-spinner-background);
+  stroke: var(--spinner-background);
 }
 .tds-spinner-circle-inverted {
-  stroke: var(--tds-spinner-background-inverted);
+  stroke: var(--spinner-background-inverted);
 }
 
 @keyframes dash {
   from {
-    stroke-dashoffset: calc(-1 * var(--tds-spinner-stroke-dash));
+    stroke-dashoffset: calc(-1 * var(--spinner-stroke-dash));
   }
   to {
-    stroke-dashoffset: var(--tds-spinner-stroke-dash);
+    stroke-dashoffset: var(--spinner-stroke-dash);
   }
 }

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

@@ -12,6 +12,7 @@ export class TdsStep {
     constructor() {
         this.index = undefined;
         this.state = 'upcoming';
+        this.tdsAriaCurrent = undefined;
         this.hideLabels = undefined;
         this.size = undefined;
         this.orientation = undefined;
@@ -39,7 +40,7 @@ export class TdsStep {
         }
     }
     render() {
-        return (h(Host, { key: '7797a3c6062a198dd291bd7fe30af307561c0cf2' }, h("div", { key: '5607a73ab02896e18005862029d868cc3e933c76', role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: '443a1126ec4c8bf978c5d498cb044b5f551a53d1', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: 'd3d5aaed1f221bbdc6e90cbbbd89415e0ec83233', class: `label ${this.size} ${this.state}` }, h("slot", { key: 'b27f1910deacb6070c3702033351240762111235', name: "label" }))))));
+        return (h(Host, { key: '52d3dba71d4c2168b01ded26bcee31f8f80ffa16' }, h("div", { key: 'da5bc2ef45609d027885a03a3d34e21ee1eed015', 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: 'a0f65e54f04848d7440c7427ac42e820c51ae609', 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", { class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '51011c20479712a9caa7719975032482c2191977', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '5556c301e1119a09e0e8c63ac46af11d88f98c23', name: "label" }))))));
     }
     static get is() { return "tds-step"; }
     static get encapsulation() { return "shadow"; }
@@ -89,6 +90,23 @@ export class TdsStep {
                 "attribute": "state",
                 "reflect": false,
                 "defaultValue": "'upcoming'"
+            },
+            "tdsAriaCurrent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tds-aria-current",
+                "reflect": false
             }
         };
     }

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

@@ -10,6 +10,7 @@ export class TdsStepper {
         this.size = 'lg';
         this.hideLabels = false;
         this.stepperId = generateUniqueId();
+        this.ariaLabel = 'Progress steps';
     }
     componentWillLoad() {
         if (this.orientation === 'vertical') {
@@ -45,7 +46,7 @@ export class TdsStepper {
         });
     }
     render() {
-        return (h(Host, { key: '1cee7a313771fe80c13c7b2ca72c069b47d77902' }, h("div", { key: '5c7ec9b395c3133fae25e4fd0de5912195246438', role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: 'bf6d7efe8e633c11fbd9d63e5dbfa6b56c853615' }))));
+        return (h(Host, { key: '25173326e603e33e1ecf1d3277a2eaae4a62b064' }, h("div", { key: 'ba9a309a916b8ae5ccfb3dfe51a6192eb4b86565', role: "list", "aria-label": this.ariaLabel, class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: '3fdbd771ab23620fec9d062228aefd2d289358ed' }))));
     }
     static get is() { return "tds-stepper"; }
     static get encapsulation() { return "shadow"; }
@@ -150,6 +151,24 @@ export class TdsStepper {
                 "attribute": "stepper-id",
                 "reflect": false,
                 "defaultValue": "generateUniqueId()"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the stepper component, for screen reader users"
+                },
+                "attribute": "aria-label",
+                "reflect": false,
+                "defaultValue": "'Progress steps'"
             }
         };
     }

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

@@ -11,7 +11,6 @@
   content: " ";
   display: block;
   border-bottom: 1px solid var(--tds-inline-tabs-horizontal-divider-background);
-  opacity: var(--tds-inline-tabs-horizontal-divider-opacity);
   left: 0;
   right: 0;
   bottom: 0;

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

@@ -1,7 +1,7 @@
 :host {
   box-sizing: border-box;
   display: flex;
-  background-color: var(--tds-inline-tabs-background);
+  background-color: var(--tds-navigation-tabs-background);
   position: relative;
 }
 :host * {
@@ -10,8 +10,7 @@
 :host::after {
   content: " ";
   display: block;
-  border-bottom: 1px solid var(--tds-inline-tabs-horizontal-divider-background);
-  opacity: var(--tds-inline-tabs-horizontal-divider-opacity);
+  border-bottom: 1px solid var(--tds-navigation-tabs-horizontal-divider-background);
   left: 0;
   right: 0;
   bottom: 0;

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

@@ -17,7 +17,8 @@
   color: var(--tds-text-field-placeholder);
 }
 .text-field-input-lg:disabled {
-  cursor: not-allowed;
+  user-select: none;
+  pointer-events: none;
   background-color: var(--tds-text-field-background-disabled);
   color: var(--tds-text-field-color-disabled);
 }
@@ -47,7 +48,8 @@
   color: var(--tds-text-field-placeholder);
 }
 .text-field-input-md:disabled {
-  cursor: not-allowed;
+  user-select: none;
+  pointer-events: none;
   background-color: var(--tds-text-field-background-disabled);
   color: var(--tds-text-field-color-disabled);
 }
@@ -77,7 +79,8 @@
   color: var(--tds-text-field-placeholder);
 }
 .text-field-input-sm:disabled {
-  cursor: not-allowed;
+  user-select: none;
+  pointer-events: none;
   background-color: var(--tds-text-field-background-disabled);
   color: var(--tds-text-field-color-disabled);
 }
@@ -257,6 +260,7 @@
 }
 
 .form-text-field-disabled .text-field-container {
+  cursor: not-allowed;
   border-bottom-color: transparent;
 }
 .form-text-field-disabled .text-field-slot-wrap-prefix > *,
@@ -292,7 +296,12 @@
 }
 
 .form-text-field-readonly {
-  pointer-events: none;
+  user-select: auto; /* Allow text selection */
+  caret-color: transparent; /* Hide blinking cursor */
+  cursor: default;
+}
+.form-text-field-readonly .text-field-container {
+  border-bottom-color: var(--tds-text-field-border-bottom-readonly);
 }
 .form-text-field-readonly .text-field-icon__readonly {
   display: block;
@@ -301,21 +310,24 @@
   display: block;
 }
 .form-text-field-readonly .text-field-input {
-  padding-right: 54px;
   background-color: transparent;
 }
 
-.form-text-field-success .text-field-container {
+.form-text-field-readonly:has(.text-field-icon__readonly) .text-field-input {
+  padding-right: 54px;
+}
+
+.form-text-field-success:not(.form-text-field-readonly) .text-field-container {
   border-bottom-color: var(--tds-text-field-border-bottom-success);
 }
 
-.form-text-field-error .text-field-helper {
+.form-text-field-error:not(.form-text-field-readonly) .text-field-helper {
   color: var(--tds-text-field-helper-error);
 }
-.form-text-field-error .text-field-container {
+.form-text-field-error:not(.form-text-field-readonly) .text-field-container {
   border-bottom-color: var(--tds-text-field-border-bottom-error);
 }
-.form-text-field-error .text-field-bar::before, .form-text-field-error .text-field-bar::after {
+.form-text-field-error:not(.form-text-field-readonly) .text-field-bar::before, .form-text-field-error:not(.form-text-field-readonly) .text-field-bar::after {
   background: var(--tds-text-field-bar-error);
 }
 

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

@@ -16,6 +16,7 @@ export class TdsTextField {
         this.value = '';
         this.disabled = false;
         this.readOnly = false;
+        this.hideReadOnlyIcon = false;
         this.size = 'lg';
         this.modeVariant = null;
         this.noMinWidth = false;
@@ -24,14 +25,27 @@ export class TdsTextField {
         this.maxLength = undefined;
         this.autofocus = false;
         this.tdsAriaLabel = undefined;
-        this.focusInput = undefined;
+        this.focusInput = false;
     }
     handleChange(event) {
         this.tdsChange.emit(event);
     }
     // Data input event in value prop
     handleInput(event) {
-        this.value = event.target.value;
+        const inputEl = event.target;
+        let { value } = inputEl;
+        // Custom handling of number inputs when min/max are set
+        if (this.type === 'number') {
+            const numericValue = Number(value);
+            if (this.min !== undefined && numericValue < Number(this.min)) {
+                value = String(this.min);
+            }
+            if (this.max !== undefined && numericValue > Number(this.max)) {
+                value = String(this.max);
+            }
+            inputEl.value = value;
+        }
+        this.value = value;
         this.tdsInput.emit(event);
     }
     /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
@@ -60,33 +74,37 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '188cc7065d3cb6006adf01a9679a97012d0047df', class: {
+        return (h("div", { key: 'b15e2650ad5cb65cad16240834a569d89c787de6', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
                 'text-field-data': this.value !== '' && this.value !== null,
                 'text-field-container-label-inside': this.labelPosition === 'inside' && this.size !== 'sm',
                 'form-text-field-disabled': this.disabled,
-                'form-text-field-readonly': this.readOnly,
-                'tds-mode-variant-primary': this.modeVariant === 'primary',
-                'tds-mode-variant-secondary': this.modeVariant === 'secondary',
+                'form-text-field-readonly': this.disabled ? false : this.readOnly,
+                'tds-mode-variant-primary': this.readOnly
+                    ? this.modeVariant === 'secondary'
+                    : this.modeVariant === 'primary',
+                'tds-mode-variant-secondary': this.readOnly
+                    ? this.modeVariant === 'primary'
+                    : this.modeVariant === 'secondary',
                 'form-text-field-md': this.size === 'md',
                 '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: 'd99cf396da1740b4c3fa5899ef3167d3638d001b', class: "text-field-label-outside" }, h("label", { key: '90a5ec0a376d2793b5f8b87ed4df0ac86c356009', htmlFor: "text-field-input-element" }, this.label))), h("div", { key: '42046ef3f5a9c38658a9d5176f86f4002657138c', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '17ae517366c69e1cad33babcc134c011c4c483e7', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: 'a8d058d6e063cabf93cf859883b306bfeeb18319', class: "text-field-label-outside" }, h("label", { key: '6ee037a99fb88c38e1bbd967e74f609fcf4670dc', htmlFor: "text-field-input-element" }, this.label))), h("div", { key: 'e7e50a86f774f9d693a43690d75d381b3556124f', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5f42f91a49235c9911f366920790942147eabefd', 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: '9aa4690419f3b688eb13c9ca78ed4dec5c513308', name: "prefix" }))), h("div", { key: '2ad1645844bf5b70383e85712a2d98de15cb5166', class: "text-field-input-container" }, h("input", { key: 'f5c1468ce392cf9e4211ce9fc8bc774a5da19afd', ref: (inputEl) => {
+            } }, h("slot", { key: 'a6093bd26cde5c76a1362b260aa44e6b4bf1aed5', name: "prefix" }))), h("div", { key: 'ae0ab4730cdede21de1accab8ed74440ec7084ae', class: "text-field-input-container" }, h("input", { key: '4a96bf3b95969d3a7c6e00487d36d3b0fbc720cc', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
                 'text-field-input-sm': this.size === 'sm',
                 'text-field-input-md': this.size === 'md',
                 'text-field-input-lg': this.size === 'lg',
-            }, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, min: this.min, max: this.max, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+            }, type: this.type, disabled: this.disabled, readonly: this.disabled ? false : this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, min: this.min, max: this.max, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
                 if (!this.readOnly) {
                     this.handleFocus(event);
                 }
@@ -94,19 +112,16 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": "text-field-helper-element", "aria-readonly": this.readOnly, id: "text-field-input-element" }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'f1c3225621de7a83bfb123b8f4a3a8d9a3493e21', class: "text-field-label-inside", htmlFor: "text-field-input-element" }, this.label))), h("div", { key: '2bacfcf84ac1f6495cc5185275f39ef1f1e4476e', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '2b46f703349e0873f9e777227acf45e0c6c55d8c', class: {
+            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": "text-field-helper-element", "aria-readonly": this.readOnly, id: "text-field-input-element" }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'e9501e5e9af625a6efaca69b6d880a6063d9e1e3', class: "text-field-label-inside", htmlFor: "text-field-input-element" }, this.label))), h("div", { key: 'fed042784d9f96ffb658aaa7f83562fc4b696662', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'c66e08a4c15b09a3e340ffc1f249b49dae370a9f', 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: 'ec96e0dd2fbe5ffbd1c0e72f1f2d460d7e3c415f', name: "suffix" }))), h("span", { key: 'cd04304e0d56b0d8fb073cb09d8badfb0058ea5b', class: "text-field-icon__readonly" }, h("tds-icon", { key: '2ab8f0964e53b0a47ccb59aefa80e2ca4a80cd84', name: "edit_inactive", size: "20px" })), h("span", { key: 'f2c3b266b25986fd2d3ad1ff9e300eb846c2a246', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: '4f277fc3ed71efb3ba66068e8322e03d472ed2f5', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '10eb1e5c33c36a7277e4f1f12f4af1e4cac45718', class: "text-field-helper", id: "text-field-helper-element" }, this.state === 'error' && (h("div", { key: 'fa1460b9ed4bd737319e3a780c54f4440e7fff7e', class: "text-field-helper-error-state" }, h("tds-icon", { key: '639aed75bf25c37d5db04c48b3d854e279cab80d', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: '66d348fea3906735bcfe6d63e951af1366a901f0', class: {
-                'text-field-textcounter': true,
-                'text-field-textcounter-disabled': this.disabled,
-            } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '744acd41ca6d968ee5dab7bd50ca52f5704b21dc', class: {
+            } }, h("slot", { key: '7caa1d97bcf8af6dc39976889a610027085421c9', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '62bc9b373fb3e02b18041dde126e59354e727b2b', class: "text-field-icon__readonly" }, h("tds-icon", { key: '8064a973aae69b47661defa941de2e7fb6167b57', name: "edit_inactive", size: "20px" }))), h("span", { key: '71a2bd9077e2fa03458b41fd8ab5733998f33bbe', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: 'f7110fc6ebff413d08feb61c8bf8bfd3aef3490c', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '3776b5499bda3e3027ee537de571ded883e319af', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: 'f887f43d1007b20d237217bf56813680ed671495', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'ce50aeaa79974e0312307fab6a5b6d49bdfb501d', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '2bb64d74bee0003c2b68262852995573203703be', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
-            } }, ' ', "/", ' '), this.maxLength)))))));
+            } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
     }
     static get is() { return "tds-text-field"; }
     static get encapsulation() { return "scoped"; }
@@ -299,6 +314,24 @@ export class TdsTextField {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "hideReadOnlyIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the read-only icon in the Text Field. Requires Read Only to be enabled."
+                },
+                "attribute": "hide-read-only-icon",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/textarea/textarea.css

@@ -179,8 +179,13 @@
   color: var(--tds-textarea-helper-error);
 }
 
+.textarea-disabled {
+  cursor: not-allowed;
+}
 .textarea-disabled .textarea-input {
   border-bottom-color: transparent;
+  pointer-events: none;
+  user-select: none;
 }
 .textarea-disabled .textarea-label {
   color: var(--tds-textarea-disabled-label);
@@ -219,13 +224,13 @@
 .textarea-readonly .textarea-icon__readonly {
   display: block;
 }
-.textarea-readonly .textarea-icon__readonly:hover ~ .textarea-icon__readonly-label {
-  display: block;
-}
-.textarea-readonly .textfield-input {
-  padding-right: 54px;
-  background-color: transparent;
+.textarea-readonly .textarea-input {
+  border: 1px solid var(--tds-textarea-border-bottom-read-only-color);
 }
 .textarea-readonly .textfield-container {
   background-color: transparent;
+}
+
+.textarea-readonly:has(.textarea-icon__readonly) .textarea-input {
+  padding-right: 54px;
 }