@scania/tegel 1.48.1 → 1.49.1-beta.0

package/dist/collection/components/datetime/datetime.css

@@ -57,34 +57,11 @@
 .tds-datetime-input:disabled ~ .tds-datetime-label-inside {
   color: var(--tds-datetime-label-disabled);
 }
-
-.tds-datetime-input-md {
-  box-sizing: border-box;
-  border-radius: 4px 4px 0 0;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  border: none;
-  outline: none;
-  height: 100%;
-  color: var(--tds-datetime-color);
-  background-color: var(--tds-datetime-background);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  padding: var(--tds-spacing-element-16);
-}
-.tds-datetime-input-md * {
-  box-sizing: border-box;
-}
-.tds-datetime-input-md:disabled {
-  background-color: var(--tds-datetime-background-disabled);
-  color: var(--tds-datetime-color-disabled);
-  cursor: not-allowed;
-}
-.tds-datetime-input-md:disabled ~ .tds-datetime-label-inside {
-  color: var(--tds-datetime-label-disabled);
+.tds-datetime-input.iphone {
+  padding: 0;
 }
 
+.tds-datetime-input-md,
 .tds-datetime-input-sm {
   box-sizing: border-box;
   border-radius: 4px 4px 0 0;
@@ -100,17 +77,24 @@
   letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-16);
 }
+.tds-datetime-input-md *,
 .tds-datetime-input-sm * {
   box-sizing: border-box;
 }
+.tds-datetime-input-md:disabled,
 .tds-datetime-input-sm:disabled {
   background-color: var(--tds-datetime-background-disabled);
   color: var(--tds-datetime-color-disabled);
   cursor: not-allowed;
 }
+.tds-datetime-input-md:disabled ~ .tds-datetime-label-inside,
 .tds-datetime-input-sm:disabled ~ .tds-datetime-label-inside {
   color: var(--tds-datetime-label-disabled);
 }
+.tds-datetime-input-md.iphone,
+.tds-datetime-input-sm.iphone {
+  padding: 0;
+}
 
 .tds-datetime-container {
   border-radius: 4px 4px 0 0;
@@ -163,9 +147,6 @@
   color: var(--tds-datetime-label-inside-color);
   left: 16px;
 }
-.tds-datetime-label-inside.iphone {
-  left: 8px !important;
-}
 
 .tds-form-datetime {
   display: block;
@@ -183,26 +164,23 @@
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ~ .tds-datetime-label-inside {
   top: 20px;
 }
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md {
-  padding-top: var(--tds-spacing-element-20);
-  padding-bottom: 11px;
-}
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside {
-  top: 16px;
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input.iphone {
+  padding: 0;
 }
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md,
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm {
   padding-top: var(--tds-spacing-element-20);
   padding-bottom: 11px;
 }
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside,
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside {
   top: 16px;
 }
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside {
-  font: var(--tds-detail-07);
-  letter-spacing: var(--tds-detail-07-ls);
-  transition: 0.1s ease all;
-  top: 8px;
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md.iphone,
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm.iphone {
+  padding: 0;
 }
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside,
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside {
   font: var(--tds-detail-07);
   letter-spacing: var(--tds-detail-07-ls);
@@ -234,7 +212,7 @@
   letter-spacing: var(--tds-detail-05-ls);
   display: block;
   flex-basis: 100%;
-  padding-top: var(--tds-spacing-element-4);
+  padding: var(--tds-spacing-element-4) 0;
   color: var(--tds-datetime-helper);
 }
 .tds-datetime-helper .tds-helper {
@@ -264,6 +242,11 @@
 .tds-form-datetime-error .tds-datetime-helper {
   color: var(--tds-datetime-helper-error);
 }
+.tds-form-datetime-error .tds-datetime-helper .tds-helper {
+  display: flex;
+  gap: var(--tds-spacing-element-8);
+  flex-wrap: nowrap;
+}
 .tds-form-datetime-error .tds-datetime-container {
   border-bottom-color: var(--tds-datetime-border-bottom-error);
 }

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

@@ -1,12 +1,14 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsDatetime {
     constructor() {
+        /** Boolean indicator to trigger input validation */
+        this.shouldValidate = false;
         /** Sets an input type */
         this.type = 'datetime-local';
         /** Value of the input text */
         this.value = '';
-        /** Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for month: YY-MM. Format for week: YY-Www  Format for date-time: YY-MM-DDTHH-MM */
+        /** Default value of the component.<br/>Format for date-time: yyyy-MM-ddTHH:mm.<br/>Format for date: yyyy-MM-dd.<br/>Format for month: yyyy-MM.<br/>Format for week: yyyy-Www.<br/>Format for time: HH:mm. */
         this.defaultValue = 'none';
         /** Set input in disabled state */
         this.disabled = false;
@@ -24,10 +26,17 @@ export class TdsDatetime {
         this.label = '';
         /** Position of the label */
         this.labelPosition = 'no-label';
-        /** Helper text for the component */
+        /** Default contextual helper text for the component for states = success or none */
         this.helper = '';
+        /** Contextual helper text for the component when input is invalid */
+        this.helperErrorInvalid = 'Invalid input';
         /** Listen to the focus state of the input */
         this.focusInput = false;
+        this.nativeValidation = () => {
+            return !((this.min && this.textInput.validity.rangeUnderflow) ||
+                (this.max && this.textInput.validity.rangeOverflow) ||
+                this.textInput.validity.badInput);
+        };
         this.getDefaultValue = () => {
             const dateTimeObj = {
                 year: this.defaultValue.slice(0, 4),
@@ -77,14 +86,35 @@ export class TdsDatetime {
             this.value = this.getDefaultValue();
         }
     }
+    componentDidRender() {
+        if (!this.shouldValidate)
+            return;
+        this.shouldValidate = false;
+        this.validateDate();
+    }
     // Listener if input enters focus state
     handleFocusIn() {
         this.focusInput = true;
     }
     // Listener if input leaves focus state
     handleFocusOut() {
+        this.validateDate();
         this.focusInput = false;
     }
+    // Decorator to activate validation when input value changes
+    onValueChanged() {
+        this.shouldValidate = true;
+    }
+    validateDate() {
+        this.state = 'none';
+        if (!this.nativeValidation() ||
+            (this.customValidator && !this.customValidator(this.textInput.value))) {
+            this.state = 'error';
+        }
+        else if (this.textInput.value) {
+            this.state = 'success';
+        }
+    }
     // Data input event in value prop
     handleInput(e) {
         this.value = e.target.value;
@@ -112,7 +142,11 @@ export class TdsDatetime {
         }
         this.value = value;
     }
+    // iOS native date picker doesn't support min/max in the UI; we rely on validation + error message.
+    // The .iphone class enables iOS-specific styling for error/success states.
     render() {
+        var _a, _b;
+        const iphone = navigator.userAgent.toLowerCase().includes('iphone');
         let className = ' tds-datetime-input';
         if (this.size === 'md') {
             className += `${className}-md`;
@@ -120,6 +154,9 @@ export class TdsDatetime {
         if (this.size === 'sm') {
             className += `${className}-sm`;
         }
+        if (iphone) {
+            className += ' iphone';
+        }
         const classNames = {
             'tds-form-datetime-nomin': this.noMinWidth,
             'tds-form-datetime': true,
@@ -133,8 +170,7 @@ export class TdsDatetime {
                 this.labelPosition === 'inside' &&
                 this.size !== 'sm'),
         };
-        const iphone = navigator.userAgent.toLowerCase().includes('iphone');
-        return (h("div", { key: '9a5728ae04f1d45dff7d3bfcfbe7fa95425cba06', class: classNames, onKeyDown: (e) => {
+        return (h("div", { key: 'a55d784701c35fda184c9e17fbe8466854f9140d', class: classNames, onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     const browserIsChrome = navigator.userAgent.toLowerCase().includes('chrome');
                     if (browserIsChrome) {
@@ -142,10 +178,10 @@ export class TdsDatetime {
                         this.textInput.showPicker();
                     }
                 }
-            } }, this.labelPosition === 'outside' && this.label && (h("label", { key: '8d504993c2a8677f98c3af0eee4783b8f4efb721', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '236227a2f41b191c18f3b0ddd00e545ebbaf9f55', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '0171918cfd7407e8a8c61c4e156e234815c6779d', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: 'eee3e74b7455eaca99c756323c419a0fc7f6840b', ref: (inputEl) => {
+            } }, this.labelPosition === 'outside' && this.label && (h("label", { key: 'ff47d44b79345c816cf9b22bd913b6a595299dce', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '013669e9b4f3421e96b9239a187515967baf7619', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'f06de994b6b1c8fe1db77f914be22797db14018d', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: 'c003adf22a66a2a04f13abd636c924bd1ad1c6c9', 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: '2303f992b1b1e5b883a334de5acb3b6ee86974b1', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: 'c318983c59ab0773cd5971564c271b46483a27f6', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '94b5d6afc623d5e2e9a9e9d5f2db06738d55221b', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '53d53d1571524924138eb82409c0eeb7cde18da2', class: "datetime-icon icon-time" }, h("tds-icon", { key: '68408ea5e005bb54f5b807c737b975e0695dfe47', size: "20px", name: "clock", svgTitle: "Clock" })))), this.helper && (h("div", { key: '3450c9e9c6ff78e9f950c594e4b7ad8c6f242769', class: "tds-datetime-helper" }, h("div", { key: 'b4268bc968071c2bab1164ac0acc87fe0f877ed4', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'b530278ba3856da179957ca57a343d4b2e9adf8d', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
+            }, 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: '128a8b90a28b6c1c9c2eacc292603b3d1f8e5f10', class: "tds-datetime-label-inside", htmlFor: this.name }, this.label)), h("div", { key: '21331931956e4abf045a01a4af7f5fcf602990bd', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '77c1f611eae6c6ff3d102681b28ce42e0709ff84', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '36f01c633df5181ad6107aa158de499fafa2569f', class: "datetime-icon icon-time" }, h("tds-icon", { key: '03bb2f56e70a68c8d882bdfdce747a15d1b4cfdc', size: "20px", name: "clock", svgTitle: "Clock" })))), this.state === 'error' && (h("div", { key: '40fbf2006d5709b84468e0e05b5b51804c141923', class: "tds-datetime-helper" }, !((_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.validity) === null || _b === void 0 ? void 0 : _b.badInput) && (h("div", { key: '7f2990d54c62fbef3743662b944a09aab28a8a56', class: "tds-helper" }, h("tds-icon", { key: 'cdcb11a48a1d1fc3298711ed9f3b96b6a7ecef0d', name: "error", size: "16px", svgTitle: "error" }), " ", this.helperError)), this.textInput && this.textInput.validity.badInput && (h("div", { key: '51489ac6f3dbcb31f8ff89c1544a6a17c19ab239', class: "tds-helper" }, h("tds-icon", { key: '6fb19117b7f191564ed2b1c4071500a16ea40219', name: "error", size: "16px", svgTitle: "error" }), " ", this.helperErrorInvalid)))), this.helper && this.state !== 'error' && (h("div", { key: 'a6766afd774a6219e783ec1b5e79c250b94bace2', class: "tds-datetime-helper" }, h("div", { key: 'bba762fea80aca3e14da8ac9f9f210234edd9c70', class: "tds-helper" }, this.helper)))));
     }
     static get is() { return "tds-datetime"; }
     static get encapsulation() { return "scoped"; }
@@ -213,7 +249,7 @@ export class TdsDatetime {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets min value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
+                    "text": "Sets min value.<br/>Example for different types:<br/>datetime=\"2023-01-31T00:00\"<br/>date=\"2023-01-01\"<br/>month=\"2023-01\"<br/>week=\"2023-W02\"<br/>time=\"15:00\""
                 },
                 "getter": false,
                 "setter": false,
@@ -232,7 +268,7 @@ export class TdsDatetime {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets max value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
+                    "text": "Sets max value.<br/>Example for different types:<br/>datetime=\"2023-01-31T00:00\"<br/>date=\"2023-01-01\"<br/>month=\"2023-01\"<br/>week=\"2023-W02\"<br/>time=\"15:00\""
                 },
                 "getter": false,
                 "setter": false,
@@ -251,7 +287,7 @@ export class TdsDatetime {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for month: YY-MM. Format for week: YY-Www  Format for date-time: YY-MM-DDTHH-MM"
+                    "text": "Default value of the component.<br/>Format for date-time: yyyy-MM-ddTHH:mm.<br/>Format for date: yyyy-MM-dd.<br/>Format for month: yyyy-MM.<br/>Format for week: yyyy-Www.<br/>Format for time: HH:mm."
                 },
                 "getter": false,
                 "setter": false,
@@ -361,17 +397,17 @@ export class TdsDatetime {
             },
             "state": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
+                    "original": "'none' | 'success' | 'error'",
+                    "resolved": "\"error\" | \"none\" | \"success\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Error state of input"
+                    "text": "Switches between success and error state."
                 },
                 "getter": false,
                 "setter": false,
@@ -450,7 +486,7 @@ export class TdsDatetime {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Helper text for the component"
+                    "text": "Default contextual helper text for the component for states = success or none"
                 },
                 "getter": false,
                 "setter": false,
@@ -458,6 +494,45 @@ export class TdsDatetime {
                 "attribute": "helper",
                 "defaultValue": "''"
             },
+            "helperError": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Contextual helper text for the component for error state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-error"
+            },
+            "helperErrorInvalid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Contextual helper text for the component when input is invalid"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-error-invalid",
+                "defaultValue": "'Invalid input'"
+            },
             "tdsAriaLabel": {
                 "type": "string",
                 "mutable": false,
@@ -476,6 +551,23 @@ export class TdsDatetime {
                 "setter": false,
                 "reflect": false,
                 "attribute": "tds-aria-label"
+            },
+            "customValidator": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(value: string) => boolean",
+                    "resolved": "((value: string) => boolean) | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Function for additional validation based on business rules"
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
@@ -621,6 +713,12 @@ export class TdsDatetime {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "focusin",

package/dist/collection/components/divider/divider.js

@@ -7,7 +7,7 @@ export class Divider {
         this.variant = 'subtle';
     }
     render() {
-        return (h(Host, { key: '4c3fe778c7e3710a3c5d5211a74cb880b548f8a5', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: '40d04e9d2e856bc0174af0263722c3b0730f0314', class: {
+        return (h(Host, { key: '86cef3b6aacde74bbaa414992cd805058e3b5290', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: 'cd59487dd9214b2635a11ab1a012309a727bd389', class: {
                 'divider': true,
                 'vertical': this.orientation === 'vertical',
                 'horizontal': this.orientation === 'horizontal',

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js

@@ -91,7 +91,7 @@ export class TdsDropdownOption {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: 'ed72ff7168fa058f650e6ded417cd305c0b645bd' }, h("div", { key: '3d1e94b5a526827dc09791b3f62740dbb5f78803', class: `dropdown-option
+        return (h(Host, { key: '35542ea54d2ba455982e2470190711f75f88a999' }, h("div", { key: '4236d5281cf4675586a7d8b16e80141b9689dad3', class: `dropdown-option
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}

package/dist/collection/components/dropdown/dropdown.css

@@ -1,20 +1,28 @@
 @charset "UTF-8";
 :host button {
   all: unset;
+  display: flex;
+  align-items: center;
   height: 100%;
   width: 100%;
+  box-sizing: border-box;
   background-color: var(--tds-dropdown-bg);
   border-bottom: 1px solid var(--tds-dropdown-border-bottom);
   border-radius: var(--tds-dropdown-border-radius);
+  padding: 0 16px;
 }
 :host button:hover {
   border-bottom: 1px solid var(--tds-dropdown-border-bottom-hover);
 }
 :host button .value-wrapper {
-  padding: 0 16px;
+  flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  padding: 0;
+}
+:host button .menu-icon {
+  margin-right: 16px;
 }
 :host button.placeholder {
   color: var(--tds-dropdown-placeholder-color);
@@ -82,6 +90,7 @@
 }
 :host .filter .value-wrapper {
   display: flex;
+  align-items: center;
   width: 100%;
   height: 100%;
 }
@@ -160,19 +169,6 @@
 :host .filter .menu-icon {
   margin-right: 16px;
 }
-:host .filter .clear-icon {
-  margin: 0 8px;
-  color: var(--tds-dropdown-clear-icon-color);
-  padding-right: 8px;
-  border-right: 1px solid var(--tds-dropdown-clear-icon-color);
-}
-:host .filter .clear-icon:hover {
-  color: var(--tds-dropdown-clear-icon-hover-color);
-}
-:host .filter .clear-icon.hide {
-  display: none;
-  visibility: hidden;
-}
 
 :host,
 :root {
@@ -239,16 +235,18 @@ body {
 }
 :host .dropdown-select .label-inside {
   position: absolute;
-  font: var(--tds-detail-07);
-  letter-spacing: var(--tds-detail-07-ls);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   color: var(--tds-dropdown-label-inside-color);
+  left: 16px;
+  transition: all 0.2s ease-in-out;
 }
 :host .dropdown-select .label-inside.lg {
-  top: 12px;
+  top: 20px;
   left: 16px;
 }
 :host .dropdown-select .label-inside.md {
-  top: 8px;
+  top: 16px;
   left: 16px;
 }
 :host .dropdown-select .label-inside.sm {
@@ -260,6 +258,16 @@ body {
 :host .dropdown-select .label-inside + .placeholder:not(.sm) {
   margin-top: 8px;
 }
+:host .dropdown-select .label-inside.floated {
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+}
+:host .dropdown-select .label-inside.floated.lg {
+  top: 12px;
+}
+:host .dropdown-select .label-inside.floated.md {
+  top: 8px;
+}
 :host .dropdown-select .placeholder {
   white-space: nowrap;
   overflow: hidden;
@@ -419,6 +427,22 @@ body {
 :host .menu-icon {
   color: var(--tds-dropdown-menu-icon-color);
 }
+:host .clear-icon {
+  cursor: pointer;
+  flex-shrink: 0;
+  margin: 0;
+  margin-right: 8px;
+  color: var(--tds-dropdown-clear-icon-color);
+  padding-right: 8px;
+  border-right: 1px solid var(--tds-dropdown-clear-icon-color);
+}
+:host .clear-icon:hover {
+  color: var(--tds-dropdown-clear-icon-hover-color);
+}
+:host .clear-icon.hide {
+  display: none;
+  visibility: hidden;
+}
 :host tds-icon {
   transition: transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
 }