@scania/tegel 1.42.0 → 1.43.0

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

@@ -14,6 +14,7 @@ export class TdsTextField {
         this.label = '';
         this.min = undefined;
         this.max = undefined;
+        this.step = undefined;
         this.helper = undefined;
         this.placeholder = '';
         this.value = '';
@@ -30,38 +31,61 @@ 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;
-        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;
-        }
+        const { value } = inputEl;
         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 */
@@ -74,7 +98,7 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '3a072497874b410339fc3368f49b9048fdcc6641', class: {
+        return (h("div", { key: 'c21d4167ad64e9cc08c309e658ddb6a0c431114f', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -92,19 +116,20 @@ 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: '190b617811d0993b85b3df6951a41678bc51879e', class: "text-field-label-outside" }, h("label", { key: '6e5099cc43259b790d83d3f127e85463e58c9ac2', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'd5064e04015238d38a70b09c9eba4cbbb1da19cb', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '69af0c24b21e3edda262749538cc9775c501e115', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: 'fbe7ed68a33cefacab1c2afc7d9b810a59368dfc', class: "text-field-label-outside" }, h("label", { key: 'a9b988004bf788b3b58ee54f8c131b0f2014214e', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '10a1bd036b8fc91b0c1fb77121a0d02fd547eb2a', onClick: () => { var _a; return (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus(); }, class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '8b9838012fa8b4ad60d11bb3aa554cab7a12448c', 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: 'f397647f1458b1d132080cb15b92be60e2942459', name: "prefix" }))), h("div", { key: '33674576cce732cc66e7ca830669b7535aea7f00', class: "text-field-input-container" }, h("input", { key: 'a27eca3e8862b099475fd46c2182f86d7d110533', ref: (inputEl) => {
+            } }, h("slot", { key: 'a460a94a247dfc5430b4f112466328161b4b628c', name: "prefix" }))), h("div", { key: '5a52dff30872f28cd021ca30224cf2527bf94e93', class: "text-field-input-container" }, h("input", { key: 'a6521a8748aed06230cbff2fe617fe7325e3370d', 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.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) => {
+                '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) => {
                 if (!this.readOnly) {
                     this.handleFocus(event);
                 }
@@ -112,13 +137,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: '7671a287273c976a1ad73032020838d6c4cedab0', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '19a93786e8647aa1d2e5b9a9b80c71c250330d8d', 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: '00f576ec1301e1200901f905db09b91710ccf8a5', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '8b877f09aa33689d7027d10bdc4d45a22f4c7aba', 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: 'dd76e5bb941bc791caa395206be040319e00a708', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '2ba57774f40412b9a337ef7bf47ce65bcf44a704', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'bfb0f704470e77f9ce6e11fe3d01af3dd8569015', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '28ded9080cb2abfe6a06b284af3807584f4dda02', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '636205c9e69b3a2602ea0b8817a585e5cd4e16b2', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '4ece49df31864f53d0fadc3709cd06d34da6830a', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'ba1e7f916ebbfa6775b46febed47e4bf55af9fd3', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '45eb885352b32dd3483a1c01f4dbaa49fcfda8ba', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '9934f078456a0af683b0d1f8a997c5484e58868c', class: {
+            } }, h("slot", { key: '8a402f382de2dfca84ca46c06950969e6ca65bdb', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '5eb925b1c30e12d8c79fc91b2787291dc4879229', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'c307715a372fc0692a60d6f39ce8a01b736c5004', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'd225ef53660d5e8dad524c0c26e119e1f951ed63', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '0bb80262383ca9359951a45fca67bcb3b51c2001', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '519c53c3875642ff9d544839b13ace336a15ff10', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '14fc9f23b453244bac24d79a5b46014f240b5397', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'd87add5b27ba5d0c794259194f79695b86a6b3cc', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '355fac5a30bb91b1ae08d6bde1900a575f3594b9', 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)))))));
@@ -225,6 +250,23 @@ 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,
@@ -354,8 +396,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,
@@ -509,6 +551,24 @@ 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"
             }
         };
     }
@@ -593,6 +653,21 @@ 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);
+}