@scania/tegel 1.42.0-input-decimal-fix-beta.0 → 1.42.0-sass-migration-beta.0

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

@@ -14,7 +14,6 @@ export class TdsTextField {
         this.label = '';
         this.min = undefined;
         this.max = undefined;
-        this.step = undefined;
         this.helper = undefined;
         this.placeholder = '';
         this.value = '';
@@ -31,60 +30,39 @@ export class TdsTextField {
         this.tdsAriaLabel = undefined;
         this.required = false;
         this.autocomplete = 'off';
-        this.hideNumberArrows = false;
         this.focusInput = false;
     }
     handleChange(event) {
         this.tdsChange.emit(event);
     }
-    /** Data input event in value prop */
+    // Data input event in value prop
     handleInput(event) {
         const inputEl = event.target;
-        const { value } = inputEl;
+        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 */
     handleFocus(event) {
-        this.textInput.focus();
+        var _a;
+        (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
         this.focusInput = true;
         this.tdsFocus.emit(event);
     }
     /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
     handleBlur(event) {
         this.focusInput = false;
-        /** Custom handling of number inputs when min/max are set */
-        if (this.type === 'number' && this.textInput) {
-            const numericValue = this.textInput.valueAsNumber;
-            const minNum = this.min !== undefined ? Number(this.min) : undefined;
-            const maxNum = this.max !== undefined ? Number(this.max) : undefined;
-            if (minNum !== undefined && maxNum !== undefined && minNum > maxNum) {
-                console.warn('tds-text-field: min value is greater than max value');
-                return;
-            }
-            if (!isNaN(numericValue)) {
-                const originalValue = this.textInput.value;
-                let clampedValue = originalValue;
-                let clampReason = null;
-                if (minNum !== undefined && numericValue < minNum) {
-                    clampedValue = String(this.min);
-                    clampReason = 'min';
-                }
-                if (maxNum !== undefined && numericValue > maxNum) {
-                    clampedValue = String(this.max);
-                    clampReason = 'max';
-                }
-                if (clampedValue !== originalValue && clampReason) {
-                    this.textInput.value = clampedValue;
-                    this.value = clampedValue;
-                    this.tdsError.emit({
-                        originalValue,
-                        clampedValue,
-                        reason: clampReason,
-                    });
-                }
-            }
-        }
         this.tdsBlur.emit(event);
     }
     /** Method to handle focus */
@@ -97,7 +75,7 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '239058e8fa4566bcaac961d2728d03e1d74a4644', class: {
+        return (h("div", { key: 'bcc403b4abba73fb457719e3205070f56d91c2cd', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -115,20 +93,19 @@ 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: 'ee7d33be796f6cb2f685c2a1be7d3d4331a08e4e', class: "text-field-label-outside" }, h("label", { key: '584092c02eb2f3f17cc9575e0f5d835edf315ea2', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '29e48147e55c8072dd352f16c7fad49d6f89b95d', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'db0868e75c40a0b3aa87f469e0218cfcc4992132', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '0133120eb1b74bb2244dd122afe1b2df7d54383b', class: "text-field-label-outside" }, h("label", { key: 'd1805d76b9ba9cd36bddbc546dd2081e4c891905', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '227c0581da20afcb1a55c2c3fc7f1458a0daf06f', onClick: () => { var _a; return (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus(); }, class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '913b945ec6d9898c22e3577ada5ce9782af3ec0a', 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: '1279f4e56ead7d764f44d5279c14e77799d6131e', name: "prefix" }))), h("div", { key: '4dfc16dfa22b536c9f76a44df0b1ca19dcb3b829', class: "text-field-input-container" }, h("input", { key: '2249c7cbfe60eb973ae57b8d21bac9f73577773d', ref: (inputEl) => {
+            } }, h("slot", { key: 'ebaa7a7bb48ef059e013fe48f9aa4ca2677d9021', name: "prefix" }))), h("div", { key: 'f7cca070bf5a514b4bc75fbf14438609bdc1fd2f', class: "text-field-input-container" }, h("input", { key: '23ce48510d1b9516d7fffb7fd1b30b7a18bb5a4f', 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',
-                'text-field-input-no-arrows': this.hideNumberArrows,
-            }, 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, step: this.step, 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);
                 }
@@ -136,13 +113,13 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "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}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'f6794afbc2af6b83b256b592269e027499f54018', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '62b76aebd06453bc33894a7b47fbf9bdf39cd812', 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}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'ee49db21967cb8eec227464fe6fbcb7e0e0c2531', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '7c59f424bb444e58ec36650dadf56457ea58e12a', 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: 'e2bc34b143e216cbdeca5bc80c09a3f368b5cad9', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'bb35e3014174bd1a51967d441fcf4b5a8fe232e0', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '053b761a1dc735ca256ebfc4dc5bb7f880bf40f8', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '0e280200126f005bcce7f7eaab7a3019cd4dd28f', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '4aee7ad22d89c8201bb80d247240368648c4f00a', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '0e2682a8ab149540b66fbbedb6c9beeffc642cab', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '27ed349a67adb18acac3250ada772c9ca670044b', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '766eb0f160496337137316dc5c9d7756f7217b0f', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '1698c0261b4b74cca76be07f2137a8f7a26ba601', class: {
+            } }, h("slot", { key: 'b7e43d945a4b6c5769422635bc43ced38c535f14', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'f9981c3d95da264abc0a44d399b6d6686038f82d', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'a72d52738bd5ad69025acae3b2adbda71f9131c4', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'cd407a27027ee56bb8cfa24a83871b63c637867a', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '61dc2389d69774e47535a3c6a464353bf1db78b3', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '1ddabddbcd537b04cd9fec9314ff5ea6ddfcd591', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'ce671b297fa5f058162270bc931870df89c22daf', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '875cc35361dec4bb2b9ed33ef454e3ae670b0f62', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'ea47b420f3d3ec1c08bb47c5b615e6727cd7a3ed', 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)))))));
@@ -249,23 +226,6 @@ export class TdsTextField {
                 "attribute": "max",
                 "reflect": false
             },
-            "step": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | number",
-                    "resolved": "number | string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Step value for input type number"
-                },
-                "attribute": "step",
-                "reflect": false
-            },
             "helper": {
                 "type": "string",
                 "mutable": false,
@@ -395,8 +355,8 @@ export class TdsTextField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -550,24 +510,6 @@ export class TdsTextField {
                 "attribute": "autocomplete",
                 "reflect": false,
                 "defaultValue": "'off'"
-            },
-            "hideNumberArrows": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Hides the native arrows on number input type"
-                },
-                "attribute": "hide-number-arrows",
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }
@@ -652,21 +594,6 @@ export class TdsTextField {
                         }
                     }
                 }
-            }, {
-                "method": "tdsError",
-                "name": "tdsError",
-                "bubbles": true,
-                "cancelable": false,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Error event for the Text Field - emitted when value is clamped to min/max"
-                },
-                "complexType": {
-                    "original": "{ originalValue: string; clampedValue: string; reason: 'min' | 'max' }",
-                    "resolved": "{ originalValue: string; clampedValue: string; reason: \"max\" | \"min\"; }",
-                    "references": {}
-                }
             }];
     }
     static get methods() {

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

@@ -39,7 +39,8 @@ export class TdsTextarea {
     }
     /* Set the input as focus when clicking the whole textarea with suffix/prefix */
     handleFocus(event) {
-        this.textEl.focus();
+        var _a;
+        (_a = this.textEl) === null || _a === void 0 ? void 0 : _a.focus();
         this.focusInput = true;
         this.tdsFocus.emit(event);
     }
@@ -61,7 +62,7 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: '0e1e8c392e63be0a7e1724f3351e4859eb6501a7', class: {
+        return (h("div", { key: 'ab345d2f34e48367b2040556b9b3a6564add939d', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -71,7 +72,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: '674206c9897b2e6f8ed4742e4bf4b9db5740a302', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '808b87787dbdb3386bdf528051eb7ab991259e30', class: "textarea-wrapper" }, h("textarea", { key: 'bb9871a2b0f4d88ac150fb8b550c2d5001b9cc2d', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: 'c8290eb384aff2b8a8d7c2495b69167066e76415', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '43cd7476de0402a1aab5eaf2d930678422aaf40e', class: "textarea-wrapper" }, h("textarea", { key: '265bd91d6cb4ca7009d0bc60f3db15c0e6bb47bc', 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) {
@@ -81,7 +82,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, 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: 'f9fc9c3136ec57b6f0becd8602c6353f0c8848dd', class: "textarea-resizer-icon" }, h("svg", { key: '8b7f6fe75e111c7d4de27a1a6d30c430cd136753', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f5857808dfc21333fc8d95c38c0a8e69823a6229', "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: 'df897e9b418dc4b7a2fefc152f0f850278695211', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'd350ce47947ccd11fea39f06b5ae6e7cdba84ca9', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '327fd5153c188dcc171d6cbed2727716148157b1', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '5625f2580ce1724b5462e00c8024fb7b9c3f3107', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '2873a82b45675d1e09a07de357386b0ea83ed054', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '0a54c37e440f4740e373943bfd48001e8f8f39e6', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '53f25f455440e8383bd1dabba20cce266fe78074', 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: '682632eb45587ee86e48fa7dd42946d97db7da13', class: "textarea-resizer-icon" }, h("svg", { key: '7631ef268be5ec867452ba449f769e45c099d574', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ba27459f776dc0d6a6d0570420e4610ee08d6b9e', "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: '34f0c79ee333e2e0b0e27dc63d4be1e93b7fc6e4', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '0aa6ad6c681f5abe6ba19a28f80125d002543fc4', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '780fe72cff253212d79820c29a701258c55da508', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '657766f8f89e07aaac65daece6fc1162b925986a', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'ce5e472fb172d53cb45e9dab4c317fb38dbd05eb', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '919a5471cfad225cefe6c30e88f782cdfc913b2f', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '338ef9cdac06151d4fd092208764e3812c2d4f01', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -331,8 +332,8 @@ export class TdsTextarea {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,

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

@@ -39,12 +39,13 @@ export class TdsToggle {
         this.labelSlot = this.host.querySelector("[slot='label']");
     }
     render() {
-        return (h("div", { key: 'c3317c42904e33fd2936aa01ce064f87d33786e3', class: "tds-toggle" }, this.headline && (h("div", { key: '9c2280058b2fbc09e0663dc5e92d4d3dd413cc83', class: {
+        return (h("div", { key: 'ee3157ccfc7cc20e4cc0ea94d18ef18206aad346', class: "tds-toggle" }, this.headline && (h("div", { key: 'bb0b6242312d2b93aedca8b30060dced738ad418', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), h("input", { key: 'b5e5cfee5c3115c1039e816bbd6f7751cf6a5f6c', ref: (inputEl) => {
-                this.inputElement = inputEl;
-            }, "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '9eedb6f2c2a0494e2b59f392764c27b143dcecee', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '11346fe1d7f4ea0da665b153ae25af9e084a0602', name: "label" })))));
+            } }, this.headline)), h("input", { key: 'ff36441c8064df09ee5f09239472250211182725', ref: (inputEl) => {
+                if (inputEl)
+                    this.inputElement = inputEl;
+            }, "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '67a2179e0c1252fb5d4dc9d9e5ade990bec58cbc', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: 'ec8080b6080cffecbc83fb9080c55031a8d0a1e7', name: "label" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -29,7 +29,7 @@ export class TdsTooltip {
                 },
             },
         ];
-        this.inheritedAttributes = [];
+        this.inheritedAttributes = {};
         this.text = '';
         this.selector = undefined;
         this.referenceEl = undefined;
@@ -58,20 +58,16 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: '69ced518e10ea5d65da8266257d7f7bba5db3f63', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '9511b6fb5dcd5a270de5b6f9b50b40271b4f5030' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '2b72a1988aa57732d9295a33a43e8baf117e7e17', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '449a74bcead02452d6bd7f443cfbfd8ef29071a1' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
-                'tds-tooltip-show': this.show,
-            }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false,
-            // @ts-ignore
-            onInternalTdsShow: () => {
+                'tds-tooltip-show': !!this.show,
+            }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false, onInternalTdsShow: () => {
                 this.show = true;
-            },
-            // @ts-ignore
-            onInternalTdsClose: () => {
+            }, onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '8fb6467b2d1fa2ce6a70a171966ff245f8205b55' }))));
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: 'c232d55352f3e827c16630c69df138ba687486b4' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }
@@ -127,7 +123,7 @@ export class TdsTooltip {
                 "mutable": false,
                 "complexType": {
                     "original": "HTMLElement | null",
-                    "resolved": "HTMLElement",
+                    "resolved": "HTMLElement | null | undefined",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
@@ -200,8 +196,8 @@ export class TdsTooltip {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "boolean | null",
+                    "resolved": "boolean | null",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/tegel-light/components/tl-dropdown/_dropdownKeyboard.js

@@ -0,0 +1,190 @@
+// ============================================================================
+// Dropdown Keyboard Navigation
+// Handles arrow keys, Enter, Space, Tab, and Escape for all dropdown variants
+// ============================================================================
+let initialized = false;
+export function initDropdownKeyboard() {
+    if (initialized)
+        return;
+    initialized = true;
+    // ============================================================================
+    // Handler for when dropdown list is open
+    // ============================================================================
+    const handleOpenListKeydown = (e) => {
+        const openTrigger = document.querySelector('.tl-dropdown__button[aria-expanded="true"], .tl-dropdown__input[aria-expanded="true"]');
+        if (!openTrigger)
+            return;
+        const root = openTrigger.closest('.tl-dropdown');
+        const openList = root === null || root === void 0 ? void 0 : root.querySelector('.tl-dropdown__list');
+        if (!openList)
+            return;
+        const isDropUp = root === null || root === void 0 ? void 0 : root.classList.contains('tl-dropdown--dropup');
+        const isMultiSelect = openList.getAttribute('aria-multiselectable') === 'true';
+        const isFilterDropdown = !!(root === null || root === void 0 ? void 0 : root.querySelector('.tl-dropdown__input'));
+        const options = Array.from(openList.querySelectorAll('.tl-dropdown__option')).filter((option) => {
+            const el = option;
+            return (!el.classList.contains('tl-dropdown__option--disabled') &&
+                !el.classList.contains('tl-dropdown__option--no-result') &&
+                el.style.display !== 'none');
+        });
+        if (!options.length)
+            return;
+        const { activeElement } = document;
+        const currentIndex = options.findIndex((option) => option === activeElement);
+        const focusOption = (index) => {
+            if (index < 0 || index >= options.length)
+                return;
+            options[index].focus();
+        };
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            if (isFilterDropdown && activeElement === openTrigger) {
+                const isArrowDown = e.key === 'ArrowDown';
+                const firstIndex = isArrowDown
+                    ? isDropUp
+                        ? options.length - 1
+                        : 0
+                    : isDropUp
+                        ? 0
+                        : options.length - 1;
+                focusOption(firstIndex);
+                return;
+            }
+            const direction = e.key === 'ArrowDown' ? 1 : -1;
+            let nextIndex = currentIndex;
+            if (currentIndex === -1) {
+                const isArrowDown = e.key === 'ArrowDown';
+                nextIndex = isArrowDown
+                    ? isDropUp
+                        ? options.length - 1
+                        : 0
+                    : isDropUp
+                        ? 0
+                        : options.length - 1;
+            }
+            else {
+                nextIndex = currentIndex + (isDropUp ? -direction : direction);
+            }
+            if (nextIndex >= options.length)
+                nextIndex = 0;
+            if (nextIndex < 0)
+                nextIndex = options.length - 1;
+            focusOption(nextIndex);
+            return;
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            const focusedOption = options[currentIndex];
+            if (!focusedOption)
+                return;
+            if (isMultiSelect)
+                return;
+            e.preventDefault();
+            focusedOption.click();
+            if (openTrigger)
+                openTrigger.setAttribute('aria-expanded', 'false');
+            if (!isFilterDropdown) {
+                openTrigger === null || openTrigger === void 0 ? void 0 : openTrigger.focus();
+            }
+            return;
+        }
+        if (e.key === 'Tab') {
+            if (isFilterDropdown) {
+                const inputWrapper = openTrigger.parentElement;
+                const clearButton = inputWrapper === null || inputWrapper === void 0 ? void 0 : inputWrapper.querySelector('.tl-dropdown__input-clear');
+                const clearButtonTabindex = clearButton === null || clearButton === void 0 ? void 0 : clearButton.getAttribute('tabindex');
+                const canFocusClearButton = clearButton && clearButtonTabindex === '0';
+                if (currentIndex >= 0) {
+                    if (!e.shiftKey && canFocusClearButton) {
+                        e.preventDefault();
+                        clearButton === null || clearButton === void 0 ? void 0 : clearButton.focus();
+                        return;
+                    }
+                    return;
+                }
+                return;
+            }
+            e.preventDefault();
+            const movingForward = isDropUp ? e.shiftKey : !e.shiftKey;
+            const nextIndex = movingForward ? currentIndex + 1 : currentIndex - 1;
+            if (nextIndex >= options.length || nextIndex < 0) {
+                if (openTrigger)
+                    openTrigger.setAttribute('aria-expanded', 'false');
+                openTrigger === null || openTrigger === void 0 ? void 0 : openTrigger.focus();
+                return;
+            }
+            focusOption(nextIndex);
+            return;
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            if (openTrigger)
+                openTrigger.setAttribute('aria-expanded', 'false');
+            openTrigger === null || openTrigger === void 0 ? void 0 : openTrigger.focus();
+        }
+    };
+    const handleTriggerKeydown = (e) => {
+        var _a;
+        const trigger = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('.tl-dropdown__button, .tl-dropdown__input');
+        if (!trigger)
+            return;
+        const root = trigger.closest('.tl-dropdown');
+        const list = root === null || root === void 0 ? void 0 : root.querySelector('.tl-dropdown__list');
+        if (!list)
+            return;
+        const isDropUp = root === null || root === void 0 ? void 0 : root.classList.contains('tl-dropdown--dropup');
+        const isOpen = trigger.getAttribute('aria-expanded') === 'true';
+        const options = Array.from(list.querySelectorAll('.tl-dropdown__option')).filter((option) => {
+            const el = option;
+            return !el.classList.contains('tl-dropdown__option--disabled') && el.style.display !== 'none';
+        });
+        if (!options.length)
+            return;
+        if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !isOpen) {
+            e.preventDefault();
+            trigger.setAttribute('aria-expanded', 'true');
+            const firstIndex = isDropUp ? options.length - 1 : 0;
+            options[firstIndex].focus();
+        }
+    };
+    const handleClearButtonKeydown = (e) => {
+        const target = e.target;
+        if (!target.classList.contains('tl-dropdown__input-clear'))
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.stopPropagation();
+            target.click();
+        }
+        if (e.key === 'Tab' && e.shiftKey) {
+            const root = target.closest('.tl-dropdown');
+            const list = root === null || root === void 0 ? void 0 : root.querySelector('.tl-dropdown__list');
+            if (list) {
+                const options = Array.from(list.querySelectorAll('.tl-dropdown__option')).filter((option) => {
+                    const el = option;
+                    return (!el.classList.contains('tl-dropdown__option--disabled') &&
+                        !el.classList.contains('tl-dropdown__option--no-result') &&
+                        el.style.display !== 'none');
+                });
+                if (options.length > 0) {
+                    e.preventDefault();
+                    options[options.length - 1].focus();
+                }
+            }
+        }
+    };
+    const handleClearButtonFocus = (e) => {
+        var _a;
+        const target = e.target;
+        if (!target.classList.contains('tl-dropdown__input-clear'))
+            return;
+        const input = (_a = target
+            .closest('.tl-dropdown__input-wrapper')) === null || _a === void 0 ? void 0 : _a.querySelector('.tl-dropdown__input');
+        if (input) {
+            input.setAttribute('aria-expanded', 'true');
+        }
+    };
+    document.addEventListener('keydown', handleOpenListKeydown);
+    document.addEventListener('keydown', handleTriggerKeydown);
+    document.addEventListener('keydown', handleClearButtonKeydown);
+    document.addEventListener('focus', handleClearButtonFocus, true);
+}