@scania/tegel 1.38.0 → 1.39.0

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

@@ -43,17 +43,76 @@
 :host .component ::slotted(a:focus-visible),
 :host .component ::slotted(button:focus-visible) {
   outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
-  outline-offset: 1px;
-  z-index: 1;
+  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline-offset: -2px;
 }
 :host .component:hover ::slotted(a),
-:host .component:hover ::slotted(button) {
+:host .component:hover ::slotted(button),
+:host .component:hover ::slotted(tds-side-menu-user) {
   background-color: var(--tds-sidebar-item-state-hover);
+  position: relative;
+}
+:host .component:hover ::slotted(a)::before,
+:host .component:hover ::slotted(button)::before,
+:host .component:hover ::slotted(tds-side-menu-user)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background-color: var(--tds-side-menu-item-hover-indicator);
+}
+:host .component:hover ::slotted(a:focus-visible),
+:host .component:hover ::slotted(button:focus-visible),
+:host .component:hover ::slotted(tds-side-menu-user:focus-visible) {
+  background-color: var(--tds-sidebar-item-state-hover);
+  position: relative;
+}
+:host .component:hover ::slotted(a:focus-visible)::before,
+:host .component:hover ::slotted(button:focus-visible)::before,
+:host .component:hover ::slotted(tds-side-menu-user:focus-visible)::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 4px;
+  height: calc(100% - 6px);
+  background-color: var(--tds-side-menu-item-hover-indicator);
 }
 :host .component:active ::slotted(a),
-:host .component:active ::slotted(button) {
+:host .component:active ::slotted(button),
+:host .component:active ::slotted(tds-side-menu-user) {
+  background-color: var(--tds-sidemenu-item-state-active);
+  position: relative;
+}
+:host .component:active ::slotted(a)::before,
+:host .component:active ::slotted(button)::before,
+:host .component:active ::slotted(tds-side-menu-user)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background-color: var(--tds-side-menu-item-pressed-indicator);
+}
+:host .component:active ::slotted(a:focus-visible),
+:host .component:active ::slotted(button:focus-visible),
+:host .component:active ::slotted(tds-side-menu-user:focus-visible) {
   background-color: var(--tds-sidemenu-item-state-active);
+  position: relative;
+}
+:host .component:active ::slotted(a:focus-visible)::before,
+:host .component:active ::slotted(button:focus-visible)::before,
+:host .component:active ::slotted(tds-side-menu-user:focus-visible)::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 4px;
+  height: calc(100% - 6px);
+  background-color: var(--tds-side-menu-item-pressed-indicator);
 }
 :host .component-collapsed ::slotted(a),
 :host .component-collapsed ::slotted(button) {
@@ -66,8 +125,8 @@
 :host .component-selected:not(:host .component-active) ::slotted(a),
 :host .component-selected:not(:host .component-active) ::slotted(button),
 :host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user) {
-  position: relative;
   background-color: var(--tds-sidebar-item-state-selected);
+  position: relative;
 }
 :host .component-selected:not(:host .component-active) ::slotted(a)::before,
 :host .component-selected:not(:host .component-active) ::slotted(button)::before,
@@ -80,6 +139,23 @@
   height: 100%;
   background-color: var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
 }
+:host .component-selected:not(:host .component-active) ::slotted(a:focus-visible),
+:host .component-selected:not(:host .component-active) ::slotted(button:focus-visible),
+:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user:focus-visible) {
+  background-color: var(--tds-sidebar-item-state-selected);
+  position: relative;
+}
+:host .component-selected:not(:host .component-active) ::slotted(a:focus-visible)::before,
+:host .component-selected:not(:host .component-active) ::slotted(button:focus-visible)::before,
+:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user:focus-visible)::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 4px;
+  height: calc(100% - 6px);
+  background-color: var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
+}
 
 @media (min-width: 992px) {
   :host .component.component-collapsed ::slotted(a),

package/dist/collection/components/slider/slider.css

@@ -27,12 +27,6 @@ tds-slider .sr-only {
   pointer-events: none;
 }
 
-.tds-slider-wrapper:focus-within {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: 2px;
-  border-radius: var(--tds-spacing-element-4);
-}
-
 .tds-slider {
   width: 100%;
   display: flex;
@@ -44,6 +38,12 @@ tds-slider .sr-only {
   height: 20px;
   position: relative;
 }
+.tds-slider .tds-slider-inner:focus-within .tds-slider__thumb-inner {
+  outline: var(--tds-slider-thumb-focus-outline);
+  box-shadow: var(--tds-slider-thumb-focus-box-shadow);
+  outline-offset: var(--tds-slider-thumb-focus-outline-offset);
+  z-index: 1;
+}
 .tds-slider .tds-slider__controls {
   position: relative;
   top: -25px;
@@ -81,30 +81,23 @@ tds-slider .sr-only {
   justify-content: center;
   border-radius: 4px 4px 0 0;
 }
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-slider-inputfield-number-color);
-  border: 0;
-  background-color: transparent;
-  text-align: center;
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number] {
+  width: auto;
   padding: 12px;
-  box-shadow: inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);
-  border-radius: 4px 4px 0 0;
+  text-align: center;
   appearance: textfield;
 }
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover {
-  box-shadow: inset 0 -1px 0 var(--tds-grey-600);
-}
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus {
-  box-shadow: inset 0 -2px 0 var(--tds-blue-400);
-  outline: 0;
-}
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field::-webkit-outer-spin-button,
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field::-webkit-inner-spin-button {
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-outer-spin-button,
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
 }
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input:read-only {
+  text-align: left;
+}
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-icon__readonly {
+  right: 12px;
+}
 .tds-slider label {
   font: var(--tds-detail-05);
   letter-spacing: var(--tds-detail-05-ls);
@@ -122,7 +115,7 @@ tds-slider .sr-only {
   letter-spacing: var(--tds-detail-01-ls);
   user-select: none;
   border-radius: 4px;
-  padding: 8px;
+  padding: 8px 11px;
   position: absolute;
   transform: translate(-50%, -100%);
   top: -24px;
@@ -139,6 +132,9 @@ tds-slider .sr-only {
 .tds-slider .tds-slider__thumb {
   position: absolute;
 }
+.tds-slider .tds-slider__thumb:hover .tds-slider__value {
+  display: block;
+}
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner {
   width: 20px;
   height: 20px;
@@ -164,7 +160,7 @@ tds-slider .sr-only {
 }
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before {
   display: block;
-  opacity: 0.08;
+  background-color: var(--tds-slider-thumb-hover);
 }
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed {
   width: 24px;
@@ -172,7 +168,7 @@ tds-slider .sr-only {
 }
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before {
   display: block;
-  opacity: 0.16 !important;
+  background-color: var(--tds-slider-thumb-pressed);
 }
 .tds-slider .tds-slider__value-dividers-wrapper {
   position: relative;
@@ -307,7 +303,7 @@ tds-slider .sr-only {
 }
 
 .tds-slider .tds-slider__controls .tds-slider__control {
-  cursor: default;
+  cursor: pointer;
 }
 .tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon, .tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon {
   color: var(--tds-slider-controls-color);

package/dist/collection/components/slider/slider.js

@@ -267,6 +267,25 @@ export class TdsSlider {
         const rounded = this.roundToStep(newValue);
         this.forceValueUpdate(rounded.toString());
     }
+    /** Updates the slider value when using tds-text-field (reads value from host element) */
+    updateSliderValueFromTextField(event) {
+        const hostEl = event.target; // tds-text-field host element exposes a value prop
+        const raw = hostEl && typeof hostEl.value !== 'undefined' ? hostEl.value : '';
+        let newValue = parseFloat(raw);
+        if (Number.isNaN(newValue)) {
+            return;
+        }
+        const minNum = parseFloat(this.min);
+        const maxNum = parseFloat(this.max);
+        if (newValue < minNum) {
+            newValue = minNum;
+        }
+        else if (newValue > maxNum) {
+            newValue = maxNum;
+        }
+        const rounded = this.roundToStep(newValue);
+        this.forceValueUpdate(rounded.toString());
+    }
     /** Updates the slider value based on the current input value when enter is pressed */
     handleInputFieldEnterPress(event) {
         event.stopPropagation();
@@ -287,7 +306,16 @@ export class TdsSlider {
         }
     }
     calculateInputSizeFromMax() {
-        return this.max.length;
+        const input = this.host.querySelector('tds-text-field input[type="number"]');
+        if (input) {
+            if (this.readOnly) {
+                // explicit size to fit suffix icon
+                input.style.width = `${52 + this.max.length * 8}px`;
+            }
+            else {
+                input.setAttribute('size', `${this.max.length}`);
+            }
+        }
     }
     controlsStep(delta, event) {
         if (this.readOnly || this.disabled) {
@@ -358,6 +386,7 @@ export class TdsSlider {
         }
     }
     componentDidLoad() {
+        this.calculateInputSizeFromMax();
         if (!this.resizeObserverAdded) {
             this.resizeObserverAdded = true;
             const resizeObserver = new ResizeObserver(() => {
@@ -401,30 +430,30 @@ export class TdsSlider {
     }
     render() {
         const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
-        return (h("div", { key: 'b4dd7706df0be052f0028a5f8ba6b6158f403b13', class: {
+        return (h("div", { key: '6077f356c7723ce54bdee208039af07154499684', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: '672c2aaa6dfee6489cd5e764ef151728c2af10fc', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '8c7200436a9ef6524a3b2d554a2556bda8cc6afd', class: "sr-only", "aria-live": "assertive", ref: (el) => {
+            } }, h("input", { key: '0ee6d0f1c8661bdcae6a3df5eca7b154306338eb', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: 'cfb2700cf9d16c204182a72f9f00ccd03b58ef89', class: "sr-only", "aria-live": "assertive", ref: (el) => {
                 this.ariaLiveElement = el;
-            } }), h("div", { key: '1ce8e7ddccd19ca15733683768900c8fcde514d3', class: {
+            } }), h("div", { key: 'b90c1d06afd96682a108b24506660e7544c4be38', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '54616f1cb5e4c13541f6f5fa700ddf4b1c4a9493', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'f6b8283409e9fb74ebf5fe89af5d88c29fde904d', class: "tds-slider__input-values" }, h("div", { key: '30532947c70dc8e0612fea3c01c25a5e86dacfca', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '6c001b8caba4a396bb9f4f4f3ba7b9ee6ca36f84', class: "tds-slider__controls" }, h("div", { key: '7a5804b789f84a4cd749c21d0ecc4b73bf7bae09', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '41db4dc1a8fda4972303fd48400078035648ca5c', name: "minus", size: "16px" })))), h("div", { key: 'f3cb2039ec4245b1d5c58bb819675381c4490197', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '38bf8ca015894f3a42a0e9e33800cc7f0ff9c8d5', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '6a5aaa5d652d55f23db24b1b531664d125fc2a23', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '0c99475a8bdb1fdec04358421ec34630111a63b8', class: "tds-slider__track", ref: (el) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '3d0bc3f42de59e4397dc8da0edf7ec29802ee8ab', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'c3868e2225cc4dacf60d23e31bdb2b106b85ce22', class: "tds-slider__input-values" }, h("div", { key: 'af100279435087101f37043ea083e5e33d930079', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '83c0078ec0ae39d29582e1ff1f4c3fc5f3a09483', class: "tds-slider__controls" }, h("div", { key: '31947e6cd76c35b8b8e7c0fb92b777e3bf8538b7', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '4c005f8c628236482eecdac51bd43a860f9e38d9', name: "minus", size: "16px" })))), h("div", { key: 'c6f21ded71244d202e255a90039f03872af09d5a', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: 'df1e820e1077ccec24826e38ba1b1fdd8dc0ae90', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'f8cadf57f46068f61d1afc2bbcc30997a750705b', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '389ba385948b6772e803b7b9ec858061451f7534', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
             }, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
                 if (this.thumbElement) {
                     this.thumbElement.focus();
                 }
-            } }, h("div", { key: 'd3ece50db5fbc17e4ebbf4272faa17fcf201dccf', class: "tds-slider__track-fill", ref: (el) => {
+            } }, h("div", { key: '5409aec334156fc5c5ac6a2cdbcb38ee50e35259', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: 'c304176e6a240820418d80aa8bfad35fbbdaf0f4', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: '8e0953ed9771846db11b9f79f6844065494f1b01', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: '7c46c4f8b3cc3bf3aeae7c841a2f38e7b3d1dfbb', class: "tds-slider__value" }, this.value, h("svg", { key: '871a05a8fc1560c8e94071172c57563d63e10f22', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0c99295a2049b3aac5d0472880e63acc4318fa07', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: 'bf42f5b512d3041a88bd8cc420a5a4aaeb875e49', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: 'ed08cca6219adff68babc9c535aff278a1b3325e', class: "tds-slider__value" }, this.value, h("svg", { key: 'dc46d041d7c123400a42ea9c9472cf0a329eb4a1', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3d46edb2069bd056a2ae09efa4bfa7f6319afe3b', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '202f2b005a969cd7eb3396c14ef6f72224fcd56a', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '9a1ed941f13b84e738500921b12aeb21ace2464c', class: "tds-slider__input-values" }, h("div", { key: '2bdf5b0fb2687075b2fc12ce931859d2f26a0685', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '480825ddccd550527ac18f046c6a8ce26baaba87', class: "tds-slider__input-field-wrapper" }, h("input", { key: '94a1446990ea0ae3955e8db9f0119e4a0ec71970', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, "aria-label": this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max, step: this.step })))), this.useControls && (h("div", { key: 'b7415e621df023ffe0eca844d9970454d01c72ce', class: "tds-slider__controls" }, h("div", { key: '044a984a7212d56f8c1bcb5709608d90677d7647', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '0b6410f7fb4af32681c3f49f29c9696e871bfd5a', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: 'ca2e84c4bccc24ebbc58a4915f62b5ecb77462c9', class: "tds-slider__input-values" }, h("div", { key: '58fdb8a9a25b9f15314aab8ffaee9424fbb26458', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '4cba8f4c2b8a89922dbaa9eec4c2f9d12f43b62c', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '65d311769aa5202134676cf9c4652132fbfc364d', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: 'da8881158bee1aec2724a0e71af3faa88bc0eb17', class: "tds-slider__controls" }, h("div", { key: '241b11a3bee6ce8cf3e53ba77a095e2fb0cdb8a6', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: 'c8e5466b53a1fe6abaaab77741e4adb7ec197341', name: "plus", size: "16px" })))))));
     }
     static get is() { return "tds-slider"; }
     static get originalStyleUrls() {

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

@@ -62,7 +62,7 @@
   background-color: var(--tds-navigation-tabs-tab-indicator-background-hover);
   z-index: 1;
 }
-:host .navigation-tab-item:focus-visible::after {
+:host .navigation-tab-item:hover:focus-within::after {
   bottom: 3px;
 }
 :host .selected ::slotted(*) {

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import hasSlot from "../../utils/hasSlot";
 import generateUniqueId from "../../utils/generateUniqueId";
+import { getAriaInvalid } from "../../utils/getAriaInvalid";
 /**
  * @slot prefix - Slot for the prefix in the component.
  * @slot suffix - Slot for the suffix in the component. Suffix is hidden when the input is in readonly state.
@@ -71,7 +72,7 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: 'b9fa2b03ce2a0b196dc6083614420d6f83675e3d', class: {
+        return (h("div", { key: '323df30951c2ee070b043228f78c3045b33e2fc9', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -89,12 +90,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: '7110b867aba9a9ba62b796f67caeccf22a4a8060', class: "text-field-label-outside" }, h("label", { key: '6b0b6c7d17bb236f1203dfaf793ba0a3bc2d8efb', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '5603d3e78b290a78d7c482a0dac7e1f0efb9af7f', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '9accb59dffa061d7947d4392310cb1717a395363', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: 'fe9768bbf8999dc49f90e096bfd138710a91e7bb', class: "text-field-label-outside" }, h("label", { key: '91d39c768b49e7867a87f7fc78b50ec4034c4560', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'abb84b67da94a281e986891a00a8bd348ad3b131', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '4661114d6fe3e809ee7c0254686c9feb55fce6ad', 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: '739e089cdb9798dc108b68c4858c90bf75e18958', name: "prefix" }))), h("div", { key: 'e4229be4e4bf421319184e798b98afcbaa361413', class: "text-field-input-container" }, h("input", { key: 'f462b4c0d49e4e070090f6a14df52af66b87648d', ref: (inputEl) => {
+            } }, h("slot", { key: '40aac31a850fb3ad1d703834b578c73a35c9f255', name: "prefix" }))), h("div", { key: '1c85331cb4dd7a03527c3730996f07a5d25293d7', class: "text-field-input-container" }, h("input", { key: '498c3ae25cc2508c28dd2e5f8483c35adb9f8bb9', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -109,13 +110,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: 'ac16cff7856d65503fa30f7eb23d2936377e72d4', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: 'b70453ec36ca62f584b26b0e6dc4b3f0cde2ff54', class: {
+            }, "aria-invalid": getAriaInvalid(this.host, this.state), "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: '41a2f20f416c65fb2d7d9992286f4bc9c9dcc52c', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '2b7b63efd24c1398d2d40a3d5a48d3003931cff8', 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: '7e50b20d90a68f9af583b8f2ade5c742e2d52351', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '72e2cf4f2872d247ac6f28e935e8185aafef6dec', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '171bdde8535c6bbd08eec60d87d9aa5bae1f98bd', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '05e7e8898ee3fcf81fb011aa2141092e8b749e37', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '0c16d399b376d9aebed2aabf759cb7319c5745cf', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '280eed9185c8cffa29e3cf62425f1f1f377f3abc', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'ddf07e469173a574a848cd2ff816bcc535940340', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'b5b06dba13fb8911828153341b631facfc016c88', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'a4c41817f19b32e575423d5bbe19c28a38031e6e', class: {
+            } }, h("slot", { key: 'b594b47a2ee6bfb393b44c8b704232881e53c119', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '5a9d4e1492b908a397881a42f9c0229d32e2a457', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '02bb93263fc40d5d6aeb2dda3ad5ac49f2e2ccf6', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'e926eb2de3946822875badbcc7e325e9981b8271', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: 'ac28d59eb12ef9efe38cd940daf1299b06dd4446', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'd1b09c6f543f0e985476b798ee642c6a11cb7485', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '160ca65e021a3f313b828dbcf82b158036d748ad', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '34bb9eaa6c267d882fc28a9b80fd331523bd981b', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '6b1ad7dbce2e2fe37e116c1d8f0b11f2dfe00260', 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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
+import { getAriaInvalid } from "../../utils/getAriaInvalid";
 export class TdsTextarea {
     constructor() {
         this.uuid = generateUniqueId();
@@ -60,7 +61,7 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: '873fc5866c777549e56d115e7bce64a62fdd5c0c', class: {
+        return (h("div", { key: '68eb00fd2e149732b8d47b72e8b60b2a30dd4d76', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -70,7 +71,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: '09f5df4efb39b7e3eb71d8567adc5cffd374ad66', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '57bd6d6e2e7a1919d668625a675e4a20421af965', class: "textarea-wrapper" }, h("textarea", { key: '69955de378170f86c7a942d5f8101aa2ff9440f4', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: '883255abac1da6cec05779b200d5347b6fa740dc', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: 'c0eacdcf4b575d14ebd5905785dade6a3f151f0e', class: "textarea-wrapper" }, h("textarea", { key: '940ea2fc206cd567bd2f181e71236cce216ec669', 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) {
@@ -80,7 +81,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: '0fded8e72f3f6d8e6f53cb57df94f480df17ce53', class: "textarea-resizer-icon" }, h("svg", { key: '6b41ae06bbedfa5ba88991bc6856f80ca8a4b6f8', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c4f731e7483bade2d0dbd545302afc278039a122', "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: '94bc8eed69418751ad240087201827a0ef0185b4', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '231983d3994030724a06358f37dd0e53f91d78d4', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '9e7f16d10939227a5c8c87f00ddd653a58c094ad', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '67222f0c93979caf49881c591cd99eb4c97ebdc1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'cbde13084b090f7eea4bd80da47373ec941e1981', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '5895277b2e07f4c8f2990f624eb0797dffd0b1f0', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '97afedbb5aaf02461a38f39643298b6c2650c52f', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'b821544e95ac75383e05d5fd54b605306f5c6790', class: "textarea-resizer-icon" }, h("svg", { key: '11d6fa83c05cc2511b391bab21d229d057516571', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '95e8fd6c73070e318d0c5c589fa326ef3480e282', "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: '8628c6ab7310a8dcf7bb2e9f95660a93dc4da3b4', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '50f5e91b88f8e5e97ec656bed783949464ef8723', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '3c86f76ddfe425385c9c9b93b0ed3a1e0baf2b20', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '42d22b4fd71e5db663d775e930ae6cc7323a89ec', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '088af2b39b4864f48e751d4b44c6d069ebf8ccd6', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: 'f425416cfdaed26d6b7b7c619babe478bf63593b', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '4d68979b2b8a5601f3b62612f09eb5223cc0490b', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -503,4 +504,5 @@ export class TdsTextarea {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }

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

@@ -13,25 +13,25 @@
   border-radius: 4px;
 }
 :host .wrapper.information {
-  border-left: 4px solid var(--tds-toast-icon-color-info);
+  border-left: 4px solid var(--tds-toast-color-info);
 }
 :host .wrapper.information tds-icon {
-  color: var(--tds-toast-icon-color-info);
+  color: var(--tds-toast-color-info);
 }
 :host .wrapper.success {
-  border-left: 4px solid var(--tds-toast-icon-color-success);
+  border-left: 4px solid var(--tds-toast-color-success);
 }
 :host .wrapper.success tds-icon {
-  color: var(--tds-toast-icon-color-success);
+  color: var(--tds-toast-color-success);
 }
 :host .wrapper.error {
-  border-left: 4px solid var(--tds-toast-icon-color-error);
+  border-left: 4px solid var(--tds-toast-color-error);
 }
 :host .wrapper.error tds-icon {
-  color: var(--tds-toast-icon-color-error);
+  color: var(--tds-toast-color-error);
 }
 :host .wrapper.warning {
-  border-left: 4px solid var(--tds-toast-icon-color-warning);
+  border-left: 4px solid var(--tds-toast-color-warning);
 }
 :host .wrapper.warning tds-icon {
   color: var(--tds-toast-icon-color-warning);

package/dist/collection/utils/getAriaInvalid.js

@@ -0,0 +1,21 @@
+/**
+ * Gets the appropriate aria-invalid value for form components.
+ *
+ * This utility handles cross-framework compatibility by checking for an explicit
+ * aria-invalid attribute on the host element first, then falling back to the
+ * component's state. It properly handles both string and boolean values that
+ * may be passed from different frameworks (especially React).
+ *
+ * @param host - The host element to check for aria-invalid attribute
+ * @param state - The component's state ('error', 'success', 'default')
+ * @returns The aria-invalid value as a string ('true' or 'false')
+ *
+ */
+export const getAriaInvalid = (host, state) => {
+    const hostAriaInvalid = host.getAttribute('aria-invalid');
+    if (hostAriaInvalid !== null) {
+        return String(hostAriaInvalid);
+    }
+    // Fallback to state-based aria-invalid
+    return state === 'error' ? 'true' : 'false';
+};

package/dist/components/{p-63437b77.js → p-072bf53a.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-6adb1ce3.js';
+import { d as defineCustomElement$2 } from './p-ad6babcd.js';
 import { d as defineCustomElement$1 } from './p-b390ece5.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}";