@scania/tegel 1.27.0-toast-aria-live.0 → 1.27.1

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.tdsAriaLabel = '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: '1e8a8233006dd3245e647140974b2284d3d00f1b' }, h("div", { key: '7641e3e3fd3b0a36427b62b6074ff4a281d7bb28', role: "list", "aria-label": this.tdsAriaLabel, class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: '49f5ede099a422b04a5950269a2fa94816280ee1' }))));
     }
     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()"
+            },
+            "tdsAriaLabel": {
+                "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": "tds-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.js

@@ -17,6 +17,7 @@ export class TdsTextarea {
         this.modeVariant = null;
         this.autofocus = false;
         this.noMinWidth = false;
+        this.tdsAriaLabel = undefined;
         this.focusInput = undefined;
     }
     handleChange(event) {
@@ -48,9 +49,14 @@ export class TdsTextarea {
         }
         return modeVariant;
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel && !this.label) {
+            console.warn('Tegel Textarea component: specify label or tdsAriaLabel prop for accessibility');
+        }
+    }
     render() {
         var _a;
-        return (h("div", { key: 'd302999a8062b0b33a9caf35843f7673c2a7dbe5', class: {
+        return (h("div", { key: 'b50538b818f0e82cca94db22f91a8ee73e009ca7', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -60,7 +66,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("span", { key: 'c88679ff2c209f8d9e67f4a6954181acb2cd2c3f', class: 'textarea-label' }, this.label), h("div", { key: '7750aecde5b145d032a1c19d6037bab7de95012d', class: "textarea-wrapper" }, h("textarea", { key: '6477bc17ae9823a17d00489c0f7401df65161552', class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: 'f96e68827795a3402d4261ffab997e5c9292fd20', htmlFor: "textarea-element", class: 'textarea-label' }, this.label)), h("div", { key: '0ed06e68cc15d78d4afead9404e89040229edb6e', class: "textarea-wrapper" }, h("textarea", { key: 'a15b5762cc8288e0b0e9631707055091062d0e95', id: "textarea-element", 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) {
@@ -70,7 +76,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: 'abe2829484359e0c2ceac243f3fecd8584574091', class: "textarea-resizer-icon" }, h("svg", { key: '03c6b48ee0892108e72234531b619cc3f4795713', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5622e03d58b6d1ce550709fc5b874860660938a5', "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: '7b4535432e2f8a83d896893ca63823ac57797bdd', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'b7a0fda48597a2e1821a2f1fbf126e8d40bdcc3b', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'a8a29025a599d62f34fa443ec046903e86e9aa3b', id: "readonly-tooltip", name: "edit_inactive" })))), h("span", { key: 'af2692509fe625ac0266ed1e93de69b6b42c889c', class: 'textarea-helper' }, this.state === 'error' && !this.readOnly && h("tds-icon", { key: 'a5e26118214f35e650a15a66334369e02a614c3f', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '4a71559023db5c584dbfc39595cdfd07e8a1dafc', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'f74611ecfb8082ce9d030546e7debdf4c9e98738', 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" }), h("span", { key: '904e38bce9b98c8ea06428c26083bc3d7476b845', class: "textarea-resizer-icon" }, h("svg", { key: '59e3404d79da1dfad42788e5f6e90e47752d603e', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8e91b396a4337c0c56b0e8131d96aae5595506d9', "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: '4c4629c89b4b2545a8482a0cd6c59b7c57888aa8', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'cae2de2a71c2891067303188f54d7c1b186886ff', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'a09a265f4684d2356886a23cdef4a570d8323c04', id: "readonly-tooltip", name: "edit_inactive" })))), h("span", { key: '5862f0cb512faf37724629642c6560bdde90e47e', class: 'textarea-helper', "aria-live": "assertive", id: "textarea-helper-element" }, this.state === 'error' && !this.readOnly && h("tds-icon", { key: 'cc0202e6e28daf0664fb3446fd4118e453e89cff', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '6e1c683c4036b8aa9924ca69d4dda6b2b3a5fd8a', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '2eb15f11eb7b8abe3741bc9d4dde13ba2fa02d8a', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -369,6 +375,23 @@ export class TdsTextarea {
                 "attribute": "no-min-width",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true."
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }

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: '9ebb217351e9fbdcb0bfef105969785e745bc184', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: '57126c13e4498e7862026978aab347dbe7e24d63', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '361405e5f7b34ff4c450499ff5752ef3bb29c21a', class: `
+            } }, h("div", { key: '099c769d8f2e54b76eada969978e641b3f5c18ea', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: 'a905925f5a8825b0d4fdc278e2d958da31f24cc5', name: this.getIconName(), size: "20px" }), h("div", { key: 'c36eaed915074c188796476ccb6b3d48d1598272', class: `content` }, h("div", { key: 'd68b085fa0fd744f7e5b1f34e26fbb72c48ea65b', class: "header-subheader" }, this.header && h("div", { key: '7eb63f483c727f6dd21ea13f794f91daca138418', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '60393a0dd231897d27d01b2d8e5d0d563e917503', name: "header" }), this.subheader && h("div", { key: '4051a94947a9987f4c645c440de8f8cf4002911b', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '1902bd9666847e51ac7bbc2f74d232f822d35127', name: "subheader" })), usesActionsSlot && (h("div", { key: '13c4debc87ca9b66f3c4155b6ccd7df39b9b98f6', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '05867f3250802cafe5a63d0583b626a819d5fdd9', name: "actions" })))), this.closable && (h("button", { key: 'da371c19b03e68d35e9a9251768cce8e3b5b23d9', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'c09b9920715bec51cbc9b190e176578a2d1f0627', name: "cross", size: "20px" }))))));
+            ${this.variant}` }, h("tds-icon", { key: '60fe4a91c42741be76f882fd82daa4ae3f5de545', name: this.getIconName(), size: "20px" }), h("div", { key: '5c5f4221726b14a38a6fb440a7f15570bb17b3cf', class: `content` }, h("div", { key: '2b53199e99ab3417160af38d81301a61e66eaef0', class: "header-subheader" }, this.header && h("div", { key: 'c98f680755ba45a8661ca46f6064c696ee61b6bb', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '5420edf38e156a811187eb6f5838bd8611818673', name: "header" }), this.subheader && h("div", { key: '9dc6d054f0f2ee3d179f25a8e75134d73ab426e2', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '726eec99d5f05bea48b5a30bf7e91a71099960f8', name: "subheader" })), usesActionsSlot && (h("div", { key: '1cb83584cdb4cc8e3d383ebdf5d470135f7573ab', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '0950f174a2e62ffbec229ef24e4a999a318798cd', name: "actions" })))), this.closable && (h("button", { key: 'ee90c96c48a11e38f17acd8cb66a1619bd770e83', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '632aefc906f17bd0993c832f9c4c5a1ec8db1ccc', name: "cross", size: "20px" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,10 +38,10 @@ export class TdsToggle {
         }
     }
     render() {
-        return (h("div", { key: '99809ab8c95f98930769fde49bb128c866fb4288', class: "tds-toggle" }, this.headline && (h("div", { key: '679f7488d0d0ec41e8c1c31234ffcc02fb7c811f', class: {
+        return (h("div", { key: '8f8a77827f524c049aa004d15372a78e7fad41e2', class: "tds-toggle" }, this.headline && (h("div", { key: '8e254412e80362807046a893fc3f7c42a0c376ba', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), h("input", { key: 'f08284dc8c171da0694a3b86c6ffb206861080cd', "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: 'f5d7e6e3ac11cbc7b2eac4fcb2cebcd6f015c2bc', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '686d693e4ec91573fe9c40eba7a67e7933f37dde', name: "label" })))));
+            } }, this.headline)), h("input", { key: '47ed1307b67b61b1594006449fb1b4ccf6d031b8', "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: '75964d686710d6b4f8bbe365cc51c8aab3234d26', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: 'aeeaed1f37a160ce792df3f5115c75eaa0fd2c0a', name: "label" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }