@scania/tegel 1.42.0 → 1.44.0-sonarcloud-0

package/dist/collection/components/banner/banner.js

@@ -44,11 +44,11 @@ export class TdsBanner {
         const usesHeaderSlot = hasSlot('subheader', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '4a8e42b6c770c6c888739b2eab7e838fe4f83899', role: this.roleType, "aria-hidden": `${this.hidden}`, "aria-live": this.roleType === 'alert' ? 'assertive' : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: {
+        return (h(Host, { key: '5b89bedb919ed799da1701cae1c152e310865b43', role: this.roleType, "aria-hidden": `${this.hidden}`, "aria-live": this.roleType === 'alert' ? 'assertive' : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: {
                 [this.variant]: true,
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, this.icon && (h("div", { key: '45b0a63ff1015c7a24bb37211eccfa5c8b5320ca', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: '2375c0c7a5a785fc788088e4568ad04a7d5f778e', name: this.icon, size: "20px", svgTitle: this.icon }))), h("div", { key: '0b4a58d3d3ab8405193bd771797badde39e23729', class: "content" }, h("div", { key: 'e9b26e4b13055853ea659cec8d990f7f2eb76999', class: "header-subheader" }, this.header && h("div", { key: '5cedf44a46330c77259c3d64cf567052ef26af0b', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'a2c9897a3befbbd5603262962a7652a763650048', name: "header" }), this.subheader && h("div", { key: 'a7916827ee4ea924270242c9f06ce75989021c3b', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'fba6caffbf916a12b8e5975966551c4c9d03a5c9', name: "subheader" })), usesActionsSlot && h("slot", { key: '7a1b89ac09e9aa7e79740f225960818d2622d4b4', name: "actions" })), h("div", { key: '9dca236d2f8253c64a8a9ff67981f69c6f473c77', class: `banner-close` }, h("button", { key: 'cabd5fa950e125babecc6caf8109c51d05142ec3', "aria-label": "Close banner", onClick: this.handleClose }, h("tds-icon", { key: '2ec160b7e458fc4e99528c390f6190dea039f02a', name: "cross", size: "20px", svgTitle: "Close" })))));
+            } }, this.icon && (h("div", { key: 'b17e4c4986ccb9afde8ad9609465fdad1f5f78fe', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: '2d43b52d72b874809d48b40ab2faae796e3c7d08', name: this.icon, size: "20px", svgTitle: this.icon }))), h("div", { key: '3f1d0b8493aaf41e1fe78837c937d56bb4d4d6af', class: "content" }, h("div", { key: '3fd4dac5928d5f588eff7cc9cf8a64c401b75875', class: "header-subheader" }, this.header && h("div", { key: 'f356b4218fba0c42c97e728fe6fc91bb14c8a3d7', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '74659c5c0b33bbc81f90d79c9cb80d3dcd1839fa', name: "header" }), this.subheader && h("div", { key: 'b91ba944f6c41ccf62002a2dade85968dd5b34f4', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'e8854a51dc158cba747abca51d79828ee419732e', name: "subheader" })), usesActionsSlot && h("slot", { key: '60fe1b1b75a7cc169d71b97d5d91086d7ae96a07', name: "actions" })), h("div", { key: 'bf664cd50d34e9ac4c3061d1670d0607cd326bef', class: `banner-close` }, h("button", { key: '0ddfadbfe00ecf7ec1376fdfbc2d70ff0cffb919', "aria-label": "Close banner", onClick: this.handleClose }, h("tds-icon", { key: '7e45115cd682e035227b486442c4fe4c67dfec4b', name: "cross", size: "20px", svgTitle: "Close" })))));
     }
     static get is() { return "tds-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -69,7 +69,7 @@ export class TdsBanner {
                 "mutable": false,
                 "complexType": {
                     "original": "IconNames",
-                    "resolved": "\"profile\" | \"expand\" | \"info\" | \"error\" | \"global\" | \"merge\" | \"copy\" | \"document\" | \"audio\" | \"link\" | \"video\" | \"image\" | \"text\" | \"download\" | \"target\" | \"placeholder\" | \"history\" | \"print\" | \"key\" | \"24v_battery_inactive\" | \"24v_battery\" | \"acceleration_inactive\" | \"acceleration\" | \"adblue_inactive\" | \"adblue\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio_inactive\" | \"award\" | \"back\" | \"backward_inactive\" | \"backward\" | \"bento\" | \"bug_inactive\" | \"bug\" | \"burger\" | \"bus_inactive\" | \"bus\" | \"calendar_inactive\" | \"calendar\" | \"camera_inactive\" | \"camera\" | \"card\" | \"cart\" | \"charging_complete\" | \"charging_failed\" | \"charging_speed_inactive\" | \"charging_speed\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock_inactive\" | \"clock\" | \"configurator\" | \"contact_inactive\" | \"contact\" | \"cookie_inactive\" | \"cookie\" | \"coolant_level_inactive\" | \"coolant_level\" | \"cross\" | \"cup_inactive\" | \"cup\" | \"dashboard\" | \"department_inactive\" | \"department\" | \"departure_scheduling_inactive\" | \"departure_scheduling\" | \"diamond_inactive\" | \"diamond\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_plus_inactive\" | \"document_plus\" | \"document_ppt\" | \"document_tool\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"driving_licence_inactive\" | \"driving_licence\" | \"drop_inactive\" | \"drop\" | \"edit_inactive\" | \"edit\" | \"email\" | \"engine_inactive\" | \"engine\" | \"environment_inactive\" | \"environment\" | \"exit\" | \"expand_inactive\" | \"export_inactive\" | \"export\" | \"eye_inactive\" | \"eye\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"factory_inactive\" | \"factory\" | \"ferry_inactive\" | \"ferry\" | \"filters_inactive\" | \"filters\" | \"flash_inactive\" | \"flash\" | \"folder\" | \"forward_inactive\" | \"forward\" | \"fuel_gauge_inactive\" | \"fuel_gauge\" | \"fuel_inactive\" | \"fuel\" | \"gift inactive\" | \"gift\" | \"guided_tour_inactive\" | \"guided_tour\" | \"hatch_open_1\" | \"hatch_open_2\" | \"hatch_open_inactive\" | \"hatch_open\" | \"heart_inactive\" | \"heart\" | \"heating_inactive_screen\" | \"history_inactive\" | \"home_inactive\" | \"home\" | \"idea_inactive\" | \"idea\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"insights\" | \"kebab\" | \"key_inactive\" | \"layer_inactive\" | \"layer\" | \"link_broken\" | \"list_inactive\" | \"list\" | \"lock_inactive\" | \"lock\" | \"map_cursor_inactive\" | \"map_cursor\" | \"maximize_fullscreen\" | \"meatballs\" | \"merge_inactive\" | \"message_inactive\" | \"message\" | \"mileage_inactive\" | \"mileage\" | \"minimize_fullscreen\" | \"minus\" | \"navigate_inactive\" | \"navigate\" | \"notification_inactive\" | \"notification\" | \"oil_level_inactive\" | \"oil_level\" | \"pause_inactive\" | \"pause\" | \"phone_inactive\" | \"phone\" | \"pie_chart\" | \"pin_inactive\" | \"pin\" | \"play_inactive\" | \"play\" | \"plus\" | \"powerplug_inactive\" | \"powerplug\" | \"print_inactive\" | \"privacy_inactive\" | \"privacy\" | \"profile_inactive\" | \"proportions_inactive\" | \"proportions\" | \"range_inactive\" | \"range\" | \"redirect\" | \"refresh_inactive\" | \"refresh\" | \"reload_inactive\" | \"reload\" | \"repeat\" | \"report_inactive\" | \"report\" | \"route_inactive\" | \"route\" | \"save_inactive\" | \"save\" | \"search\" | \"send_inactive\" | \"send\" | \"settings\" | \"share\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone_inactive\" | \"smartphone\" | \"sorting\" | \"speedometer_inactive\" | \"speedometer\" | \"star\" | \"support\" | \"target_inactive\" | \"temperature_inactive\" | \"temperature\" | \"text_inactive\" | \"thumbs_down\" | \"thumbs_up\" | \"tick\" | \"timer\" | \"tool_inactive\" | \"tool\" | \"trailer_inactive\" | \"trailer\" | \"trash_inactive\" | \"trash\" | \"truck_inactive\" | \"truck\" | \"undo_inactive\" | \"undo\" | \"unlock\" | \"upload\" | \"video_inactive\" | \"wallet\" | \"warning\" | \"weight_inactive\" | \"weight\" | \"wifi_inactive\" | \"wifi\" | \"windscreen_heating_inactive\" | \"windscreen_heating\"",
+                    "resolved": "IconNames | undefined",
                     "references": {
                         "IconNames": {
                             "location": "import",
@@ -79,7 +79,7 @@ export class TdsBanner {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Name of the icon for the component. For error and information variant, the icon is predefined."
@@ -92,11 +92,11 @@ export class TdsBanner {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Header text."
@@ -109,11 +109,11 @@ export class TdsBanner {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Subheader text."

package/dist/collection/components/block/block.js

@@ -35,7 +35,7 @@ export class TdsBlock {
                 evenOddClass = 'tds-block-odd';
             }
         }
-        return (h(TagType, { key: '34385f3ac01d173e6bb568432418304186d261c7', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '569b04916fb165fb460711ec659ed2dc3e9ebd12' })));
+        return (h(TagType, { key: '01743312d4accf10f2d372e149880bb8b53a9a97', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '84c2a61a6f4fc4c118ce73c83d78ca18a1607d0c' })));
     }
     static get is() { return "tds-block"; }
     static get encapsulation() { return "shadow"; }
@@ -55,8 +55,8 @@ export class TdsBlock {
                 "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/breadcrumbs/breadcrumbs.js

@@ -9,7 +9,7 @@ export class TdsBreadcrumbs {
     render() {
         var _a;
         (_a = this.host.children[this.host.children.length - 1]) === null || _a === void 0 ? void 0 : _a.classList.add('last');
-        return (h("nav", { key: 'd79f99fbdf47a75d66376c7900a1ba2ccfad0ef2', "aria-label": this.tdsAriaLabel }, h("div", { key: 'c06fa49904e230b1fcbaa8eeba1e2d6059f4eccd', role: "list", class: "tds-breadcrumb" }, h("slot", { key: 'fd44b69cd45ffaed95c865988832fa56c545125c' }))));
+        return (h("nav", { key: 'f24c1dd40a5bf741d3538c1bc5e536c45a9a6b12', "aria-label": this.tdsAriaLabel }, h("div", { key: '955ea954c1a161e2c4b639947f191b3b4a22957a', role: "list", class: "tds-breadcrumb" }, h("slot", { key: '9466ab7b58a6953d79af70ac38cdc5466362dc6c' }))));
     }
     static get is() { return "tds-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
@@ -30,11 +30,11 @@ export class TdsBreadcrumbs {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The value to be used for the aria-label attribute"

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

@@ -20,13 +20,15 @@ export class TdsButton {
         this.onlyIcon = false;
     }
     handleKeyDown(event) {
+        var _a;
         if (event.key === 'Enter' && !this.disabled) {
-            this.host.querySelector('button').classList.add('active');
+            (_a = this.host.querySelector('button')) === null || _a === void 0 ? void 0 : _a.classList.add('active');
         }
     }
     handleKeyUp(event) {
+        var _a;
         if (event.key === 'Enter' && !this.disabled) {
-            this.host.querySelector('button').classList.remove('active');
+            (_a = this.host.querySelector('button')) === null || _a === void 0 ? void 0 : _a.classList.remove('active');
         }
     }
     render() {
@@ -35,11 +37,11 @@ export class TdsButton {
         if (!this.text && !hasLabelSlot) {
             this.onlyIcon = true;
         }
-        return (h(Host, { key: '7358240d76e1b7a6df238b2a1e5f1702f9cd33d7', class: {
+        return (h(Host, { key: '35c60edf5c2e4769e8995a47e90b8e99ef4482f6', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
                 disabled: Boolean(this.disabled),
                 fullbleed: Boolean(this.fullbleed),
-            }, disabled: this.disabled }, h("button", Object.assign({ key: '971f814b0b832e9b161c77812fb7668ed34312ab', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
+            }, disabled: this.disabled }, h("button", Object.assign({ key: '819e795be3cdd3c435f54f1f9c0e13ae091aec98', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -53,7 +55,7 @@ export class TdsButton {
                 'icon': hasIconSlot,
                 'only-icon': this.onlyIcon,
                 [`animation-${this.animation}`]: this.animation !== 'none',
-            } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '2dc9400b032af40765d7ba1add85c09249dea64b', name: "label" }), hasIconSlot && h("slot", { key: '01af3eeaa00abc5dc824f4fa4633b2460fb4fe46', name: "icon" }))));
+            } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '1c43f0358cfa491bf3b2061e7891f17bc8f0aac4', name: "label" }), hasIconSlot && h("slot", { key: '40fb5ffa1bb25c098f413e672fb28ccc11a0d3d0', name: "icon" }))));
     }
     static get is() { return "tds-button"; }
     static get encapsulation() { return "scoped"; }
@@ -74,11 +76,11 @@ export class TdsButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Text displayed inside the Button"
@@ -180,8 +182,8 @@ export class TdsButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -217,11 +219,11 @@ export class TdsButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The value to be used for the aria-label attribute if onlyIcon is set to true"
@@ -234,11 +236,11 @@ export class TdsButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The name attribute allows for different ways of accessing the button element"
@@ -251,11 +253,11 @@ export class TdsButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The value attribute can be used when handling a form submission"

package/dist/collection/components/card/card.js

@@ -32,7 +32,7 @@ export class TdsCard {
             const usesBodyImageSlot = hasSlot('body-image', this.host);
             const usesActionsSlot = hasSlot('actions', this.host);
             const bodyId = `body-${this.cardId}`;
-            return (h("div", { class: this.stretch && 'stretch', "aria-describedby": usesBodySlot ? bodyId : null }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: "card-body", id: bodyId }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
+            return (h("div", { class: { stretch: this.stretch }, "aria-describedby": usesBodySlot ? bodyId : null }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: "card-body", id: bodyId }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
         };
         this.modeVariant = null;
         this.imagePlacement = 'below-header';
@@ -55,7 +55,7 @@ export class TdsCard {
             [`${this.imagePlacement}-stretch`]: this.stretch,
         };
         const ariaLabel = this.header ? this.header : `Card ${this.cardId}`;
-        return (h(Host, { key: '14e4d2ece54e021a186661c8dfef2dae78791782', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
+        return (h(Host, { key: 'a02da4f8704ad22664fec6ba0b97421094e4cda0', class: { [`tds-mode-variant-${this.modeVariant}`]: !!this.modeVariant } }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
     }
     static get is() { return "tds-card"; }
     static get encapsulation() { return "shadow"; }
@@ -75,8 +75,8 @@ export class TdsCard {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -112,11 +112,11 @@ export class TdsCard {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Text in the header"
@@ -129,11 +129,11 @@ export class TdsCard {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Subheader text in the header"
@@ -146,11 +146,11 @@ export class TdsCard {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Body image src"
@@ -163,11 +163,11 @@ export class TdsCard {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Alt text for the body image"

package/dist/collection/components/checkbox/checkbox.js

@@ -59,11 +59,12 @@ export class TdsCheckbox {
         }
     }
     render() {
-        return (h("div", { key: '87d4e8620e183b5fb8a885dca8081424c7497b21', class: "tds-checkbox" }, h("input", { key: 'fa5d4c8e9a33a7a88d1348f6eb66b474e94c0ad1',
-            // eslint-disable-next-line no-return-assign
-            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
+        return (h("div", { key: 'dfffd2e58507c14f16d9c0979d1cf794296b83eb', class: "tds-checkbox" }, h("input", { key: '6003dd1ba8c0ffc40a7f3f692867e47801ebfb0d', ref: (inputElement) => {
+                if (inputElement)
+                    this.inputElement = inputElement;
+            }, indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
                 this.handleChange();
-            } }), h("label", { key: '82545f01ad68fae4d613b58d82a770a0c1bce79e', htmlFor: this.checkboxId }, h("slot", { key: '99892e112b596a7f8517427cc42f75e90140c315', name: "label" }))));
+            } }), h("label", { key: '0fb389206bd35497737b14a0cf12093a32de7881', htmlFor: this.checkboxId }, h("slot", { key: '7a085546f31a1aa6f4dd2ddab4f053bf86663dda', name: "label" }))));
     }
     static get is() { return "tds-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -84,11 +85,11 @@ export class TdsCheckbox {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Name for the Checkbox's input element."
@@ -191,11 +192,11 @@ export class TdsCheckbox {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value for the Checkbox"
@@ -208,11 +209,11 @@ export class TdsCheckbox {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value to be used for the aria-label attribute"
@@ -225,11 +226,11 @@ export class TdsCheckbox {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value to be used for the aria-describedby attribute"
@@ -252,7 +253,7 @@ export class TdsCheckbox {
                 },
                 "complexType": {
                     "original": "{\n    checkboxId: string;\n    checked: boolean;\n    indeterminate: boolean;\n    value?: string;\n  }",
-                    "resolved": "{ checkboxId: string; checked: boolean; indeterminate: boolean; value?: string; }",
+                    "resolved": "{ checkboxId: string; checked: boolean; indeterminate: boolean; value?: string | undefined; }",
                     "references": {}
                 }
             }, {

package/dist/collection/components/chip/chip.js

@@ -81,7 +81,7 @@ export class TdsChip {
             'suffix': hasSuffixSlot,
             'disabled': this.disabled,
         };
-        return (h(Host, { key: '4a498e81dbdd096e01d502a1bc378bfa9f7ea61d' }, h("div", { key: '441e76b25ec9fb91485f3394e6df08fa2ac0363f', class: "component" }, h("div", { key: '88658da3bae225792261b6b3b7796c514d76e665', class: chipClasses }, h("input", Object.assign({ key: '1e495bd583136ba481b7f11891f008c8584b0b38', type: this.type, id: this.chipId, "aria-checked": this.type === 'button' ? undefined : String(this.checked), role: this.type, "aria-label": this.tdsAriaLabel }, inputAttributes)), h("label", { key: 'ffaff7dd33befe64eb69fc6f786efd38eb654628', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '95a6bf9c4d337a9d9caaf66b598615af657045c3', name: "prefix" }), hasLabelSlot && h("slot", { key: '2e732390348814bbeea2bb0c4c5fa0b9206a6578', name: "label" }), hasSuffixSlot && h("slot", { key: '716254ff0b5995b2d2a99dcd2aaa2f94613255d0', name: "suffix" }))))));
+        return (h(Host, { key: '7018c9c28fdd3711456101805579931c2dec9278' }, h("div", { key: '351255bf87d14f5443f247c33e020f6fa6d6d93d', class: "component" }, h("div", { key: '54cbaa247d6174f21a6ee00c6953a3d0d2b9206e', class: chipClasses }, h("input", Object.assign({ key: '435b31b0c747372a220c9e80fc32ba3269eea46c', type: this.type, id: this.chipId, "aria-checked": this.type === 'button' ? undefined : String(this.checked), role: this.type, "aria-label": this.tdsAriaLabel }, inputAttributes)), h("label", { key: 'b5fc3b3b932f318178153d9c45ed167d0d3cea0b', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '7f38872f349515859f588741654a0151ca5a061b', name: "prefix" }), hasLabelSlot && h("slot", { key: '7670be1edaa2fad3840e6956c1cc0a44d804e921', name: "label" }), hasSuffixSlot && h("slot", { key: '7494aca04287e18495080f3e3a43507a714f1a24', name: "suffix" }))))));
     }
     static get is() { return "tds-chip"; }
     static get encapsulation() { return "scoped"; }
@@ -174,11 +174,11 @@ export class TdsChip {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Name for the checkbox or radio input element. Also creates a reference between label and input. Valid only for type checkbox and radio."
@@ -191,11 +191,11 @@ export class TdsChip {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value of input. Valid only for type checkbox and radio."
@@ -226,11 +226,11 @@ export class TdsChip {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value to be used for the aria-label attribute"
@@ -252,8 +252,8 @@ export class TdsChip {
                     "text": "Sends unique Chip identifier and value when it is changed (checked/unchecked).\nValid only for type checkbox and radio.\nIf no ID is specified, a random one will be generated.\nTo use this listener, don't use the randomized ID, use a specific one of your choosing."
                 },
                 "complexType": {
-                    "original": "{\n    chipId: string;\n    value: string;\n    checked?: boolean;\n  }",
-                    "resolved": "{ chipId: string; value: string; checked?: boolean; }",
+                    "original": "{\n    chipId: string;\n    value: string | undefined;\n    checked?: boolean;\n  }",
+                    "resolved": "{ chipId: string; value: string | undefined; checked?: boolean | undefined; }",
                     "references": {}
                 }
             }, {
@@ -270,8 +270,8 @@ export class TdsChip {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\n    chipId: string;\n    checked: boolean;\n    groupName: string;\n  }",
-                    "resolved": "{ chipId: string; checked: boolean; groupName: string; }",
+                    "original": "{\n    chipId: string;\n    checked: boolean;\n    groupName: string | undefined;\n  }",
+                    "resolved": "{ chipId: string; checked: boolean; groupName: string | undefined; }",
                     "references": {}
                 }
             }, {

package/dist/collection/components/datetime/datetime.js

@@ -42,7 +42,7 @@ export class TdsDatetime {
         this.labelPosition = 'no-label';
         this.helper = '';
         this.tdsAriaLabel = undefined;
-        this.focusInput = undefined;
+        this.focusInput = false;
     }
     /** Method that resets the value of the Datetime, using defaultValue if is not 'none' */
     async reset() {
@@ -118,12 +118,14 @@ export class TdsDatetime {
             'tds-datetime-data': this.value.length > 0,
             'tds-form-datetime-disabled': this.disabled,
             [`tds-form-datetime-${this.size}`]: ['md', 'sm'].includes(this.size),
-            [`tds-form-datetime-${this.state}`]: ['error', 'success'].includes(this.state),
+            [`tds-form-datetime-${this.state}`]: ['error', 'success'].includes(`${this.state}`),
             [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            'tds-datetime-container-label-inside': this.label && this.labelPosition === 'inside' && this.size !== 'sm',
+            'tds-datetime-container-label-inside': !!(this.label &&
+                this.labelPosition === 'inside' &&
+                this.size !== 'sm'),
         };
         const iphone = navigator.userAgent.toLowerCase().includes('iphone');
-        return (h("div", { key: 'f397a4fc034fb7cd4dcb8ed7b0cbf2ab2e51177a', class: classNames, onKeyDown: (e) => {
+        return (h("div", { key: '93ab9dfbf3fc5a894153be95e9dd0a2b6010efaf', class: classNames, onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     const browserIsChrome = navigator.userAgent.toLowerCase().includes('chrome');
                     if (browserIsChrome) {
@@ -131,9 +133,10 @@ export class TdsDatetime {
                         this.textInput.showPicker();
                     }
                 }
-            } }, this.labelPosition === 'outside' && this.label && (h("label", { key: 'e5dd50563ed2d464983016bc608d81b77c379add', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: 'b2c01f96bb7d8fa7279ac27048328204cc249547', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'e7002fc416e62d2c93c337aee1869aa817997df9', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: '3fdf8d55b15f5a00d4fb0755d5774fee93f100b9', ref: (inputEl) => {
-                this.textInput = inputEl;
-            }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: '48d096356ad9f547bacbf407af12c4411d5dd45f', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: '0ea83c4003923ffed9b11ef22131000bb696a80f', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '6ab6fde60c3d8ce0ad212c0d248c597a23cc6ce7', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '4c304db3c9e6159a7827b6a83c6f81d04cbf0d19', class: "datetime-icon icon-time" }, h("tds-icon", { key: '2a91a579dc5307d35ffbd47aa67616e2e692dd1c', size: "20px", name: "clock", svgTitle: "Clock" })))), this.helper && (h("div", { key: '4883298ade40b2177450f1af3cda0b02a9c24786', class: "tds-datetime-helper" }, h("div", { key: '5baaf00b0372f50341f1995c713e3cbece2c8a4d', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'a8d4aedbbba2e083578825efadbeaede47d83055', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
+            } }, this.labelPosition === 'outside' && this.label && (h("label", { key: '151fe0fca5e68938f8f0e466e415d301460bcfb9', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '0f279f40278ed65077f17c8ff18963e6d9b22e33', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'b0b178d3ee9511ba315f63468061738810fc99e8', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: '9d09571d4175dcd45ea5a6303855328633b4e2d5', ref: (inputEl) => {
+                if (inputEl)
+                    this.textInput = inputEl;
+            }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: '8c8bf84bf5fde6e08ca7af7d24416379e6fcebee', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: 'bffbf411853315e978d570c44b054f4022ed4156', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '885003370261c85dce5d4840ee3e49bee89f08e5', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '62bca8062e7f1b20b89c835811b98311f501d7da', class: "datetime-icon icon-time" }, h("tds-icon", { key: '77a628ba22fdefe08eed75acaee382f0485ca22d', size: "20px", name: "clock", svgTitle: "Clock" })))), this.helper && (h("div", { key: '3cf041a3d939c96e295bdc83346d038d33336a39', class: "tds-datetime-helper" }, h("div", { key: 'ccdd8ed7ab2ab4a91f4ac699e1fe964234e4db4a', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: '509f40f17e1ccec720cacc4863e50cc63e5a4802', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
     }
     static get is() { return "tds-datetime"; }
     static get encapsulation() { return "scoped"; }
@@ -190,11 +193,11 @@ export class TdsDatetime {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Sets min value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
@@ -207,11 +210,11 @@ export class TdsDatetime {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Sets max value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
@@ -295,8 +298,8 @@ export class TdsDatetime {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -332,11 +335,11 @@ export class TdsDatetime {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Error state of input"
@@ -421,11 +424,11 @@ export class TdsDatetime {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value for the aria-label attribute"