@syncfusion/ej2-multicolumn-combobox 26.1.38 → 26.1.39

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-multicolumn-combobox@*",
-  "_id": "@syncfusion/ej2-multicolumn-combobox@21.29.0",
+  "_id": "@syncfusion/ej2-multicolumn-combobox@26.1.38",
   "_inBundle": false,
-  "_integrity": "sha512-Kzq0puxez3V9SuZlSkTBWbiqWnla12ruOLrsX+tB5nBnv+saoVKo5gy7Ii2bj1+RyOZR874jG9hsS2fpww558Q==",
+  "_integrity": "sha512-nnfQ+I+ZZv4IhEn3AA6AZPxIK6Xj9SXmTzk7BAsM5vF6flDfaRQAvJNYetOCQNiJmttvccKmimtK6oc8XMhY3g==",
   "_location": "/@syncfusion/ej2-multicolumn-combobox",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-multicolumn-combobox",
     "/@syncfusion/ej2-vue-multicolumn-combobox"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-multicolumn-combobox/-/ej2-multicolumn-combobox-21.29.0.tgz",
-  "_shasum": "625ed8b001bd49dd3499a4117902796e6d0a44ee",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-multicolumn-combobox/-/ej2-multicolumn-combobox-26.1.38.tgz",
+  "_shasum": "14b1de1ee21e860cb8f0808213d2a16be4a94904",
   "_spec": "@syncfusion/ej2-multicolumn-combobox@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -36,7 +36,7 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~26.1.37",
-    "@syncfusion/ej2-grids": "~26.1.38"
+    "@syncfusion/ej2-grids": "~26.1.39"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -57,6 +57,6 @@
     "url": "git+https://github.com/syncfusion/ej2-multicolumn-combobox-component.git"
   },
   "typings": "index.d.ts",
-  "version": "26.1.38",
+  "version": "26.1.39",
   "sideEffects": false
 }

package/src/multicolumn-combobox/multi-column-combo-box.d.ts

@@ -708,6 +708,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     private matchedRowEle;
     private matchedContent;
     private isDataFiltered;
+    private isInitialRender;
     /**
      * *Constructor for creating the component
      *
@@ -781,6 +782,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     private updateGridDataSource;
     private wireEvents;
     private unWireEvents;
+    private preventBlur;
     private dropDownClick;
     private onMouseClick;
     private onDocumentClick;
@@ -791,6 +793,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     private keyActionHandler;
     private gridKeyActionHandler;
     private updateSelectedItem;
+    private updateClearIconState;
     /**
      * Sets the focus to the component for interaction.component for interaction.
      *

package/src/multicolumn-combobox/multi-column-combo-box.js

@@ -365,6 +365,10 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     MultiColumnComboBox.prototype.getGridColumns = function () {
         var _this = this;
         return this.columns.map(function (column) {
+            var changeType;
+            if (column.displayAsCheckBox && !column.format) {
+                changeType = 'boolean';
+            }
             return {
                 field: column.field,
                 headerText: column.header,
@@ -375,7 +379,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 template: column.template,
                 headerTemplate: column.headerTemplate,
                 customAttributes: column.customAttributes,
-                type: column.displayAsCheckBox ? 'boolean' : 'string'
+                type: changeType
             };
         });
     };
@@ -414,6 +418,13 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 this.popupDiv.removeChild(noRecordEle);
             }
         }
+        if (this.isInitialRender) {
+            var rowHeight = !this.popupDiv.classList.contains(NODATA) ? this.popupDiv.querySelector('.e-gridcontent tr').getBoundingClientRect().height : this.popupDiv.getBoundingClientRect().height;
+            this.popupRowHeight = rowHeight;
+            this.popupObj.hide();
+            this.popupEle.style.visibility = 'unset';
+            this.isInitialRender = false;
+        }
     };
     MultiColumnComboBox.prototype.onActionFailure = function (args) {
         this.trigger('actionFailure', args);
@@ -432,6 +443,9 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             this.inputEle.setAttribute('aria-expanded', 'false');
             this.inputEle.setAttribute('aria-readOnly', this.readonly.toString());
             this.inputEle.setAttribute('aria-disabled', this.disabled.toString());
+            this.inputEle.setAttribute('autocomplete', 'off');
+            this.inputEle.setAttribute('autocapitalize', 'off');
+            this.inputEle.setAttribute('spellcheck', 'false');
             this.inputEle.setAttribute('tabindex', '0');
         }
         else {
@@ -641,9 +655,9 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');
         }
         this.popupDiv.style.maxHeight = popupHeight;
-        this.popupRowHeight = this.popupDiv.querySelector('.e-gridcontent tr').getBoundingClientRect().height;
         this.updateGridHeight();
-        this.popupObj.hide();
+        this.popupEle.style.visibility = 'hidden';
+        this.isInitialRender = true;
     };
     MultiColumnComboBox.prototype.updateGridHeight = function (isFilter, autoHeight, dataSourceCount) {
         var height;
@@ -678,6 +692,10 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 if (!Browser.isDevice) {
                     _this.hidePopup();
                 }
+            },
+            open: function () {
+                _this.inputEle.focus();
+                _this.updateClearIconState();
             }
         });
     };
@@ -786,8 +804,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             cancel: false
         };
         var selectedRecords = this.gridObj.getSelectedRecords()[0];
-        var fieldText = selectedRecords ? selectedRecords[this.fields.text].toString() : "";
-        var fieldValue = selectedRecords ? selectedRecords[this.fields.value].toString() : "";
+        var fieldText = selectedRecords ? selectedRecords[this.fields.text].toString() : '';
+        var fieldValue = selectedRecords ? selectedRecords[this.fields.value].toString() : '';
         var ChangeEventArgs = {
             isInteracted: e ? true : false,
             item: selectedRecords,
@@ -802,11 +820,13 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.trigger('select', eventArgs, function (eventArgs) {
             if (!eventArgs.cancel && eventArgs.itemData) {
                 var selectedRecord = eventArgs.itemData;
-                if (!isKeyNav || (isKeyNav && e.key === 'Enter')) {
+                var event_1 = e;
+                var isUpdateVal = event_1.key === 'Enter' || event_1.key === 'Tab' || event_1.shiftKey && event_1.key === 'Tab' || event_1.altKey && event_1.key === 'ArrowUp';
+                if (!isKeyNav || (isKeyNav && isUpdateVal)) {
                     _this.updateValues(selectedRecord[_this.fields.value], selectedRecord[_this.fields.text], _this.gridObj.selectedRowIndex, ChangeEventArgs);
                 }
                 Input.setValue(selectedRecord[_this.fields.text], _this.inputEle, _this.floatLabelType, _this.showClearButton);
-                if (!isKeyNav || (isKeyNav && e.key === 'Enter')) {
+                if (!isKeyNav || (isKeyNav && isUpdateVal)) {
                     _this.hidePopup(e);
                 }
             }
@@ -834,6 +854,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     MultiColumnComboBox.prototype.inputHandler = function (e) {
         var _this = this;
         this.showPopup(null, true);
+        this.updateClearIconState();
         if (this.allowFiltering) {
             var inputValue_1 = e.target.value.toLowerCase();
             var customFiltering_1 = false;
@@ -950,15 +971,16 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.updateGridHeight(true, autoHeight, dataSource.length);
     };
     MultiColumnComboBox.prototype.wireEvents = function () {
-        var ddbIcon = this.inputWrapper.querySelector('.e-input-group-icon');
-        var clearIcon = this.inputWrapper.querySelector('.e-clear-icon');
-        EventHandler.add(ddbIcon, 'mousedown', this.dropDownClick, this);
+        if (!isNOU(this.inputObj.buttons[0])) {
+            EventHandler.add(this.inputObj.buttons[0], 'mousedown', this.preventBlur, this);
+            EventHandler.add(this.inputObj.buttons[0], 'mousedown', this.dropDownClick, this);
+        }
         EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
         EventHandler.add(this.gridEle, 'click', this.onMouseClick, this);
         EventHandler.add(this.inputEle, 'input', this.inputHandler, this);
-        EventHandler.add(this.inputWrapper, 'focus', this.focusIn, this);
-        if (clearIcon) {
-            EventHandler.add(clearIcon, 'click', this.clearText, this);
+        EventHandler.add(this.inputEle, 'focus', this.focusIn, this);
+        if (this.showClearButton) {
+            EventHandler.add(this.inputObj.clearButton, 'mousedown', this.clearText, this);
         }
         EventHandler.add(window, 'resize', this.windowResize, this);
         this.keyboardModule = new KeyboardEvents(this.inputWrapper, {
@@ -973,21 +995,25 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         });
     };
     MultiColumnComboBox.prototype.unWireEvents = function () {
-        var ddbIcon = this.inputWrapper.querySelector('.e-input-group-icon');
-        var clearIcon = this.inputWrapper.querySelector('.e-clear-icon');
-        EventHandler.remove(ddbIcon, 'mousedown', this.dropDownClick);
+        if (!isNOU(this.inputObj.buttons[0])) {
+            EventHandler.remove(this.inputObj.buttons[0], 'mousedown', this.preventBlur);
+            EventHandler.remove(this.inputObj.buttons[0], 'mousedown', this.dropDownClick);
+        }
         EventHandler.remove(document, 'mousedown', this.onDocumentClick);
         EventHandler.remove(this.inputEle, 'input', this.inputHandler);
         EventHandler.remove(this.inputWrapper, 'focus', this.focusIn);
         EventHandler.remove(window, 'resize', this.windowResize);
         EventHandler.remove(this.gridEle, 'click', this.onMouseClick);
-        if (clearIcon) {
-            EventHandler.remove(clearIcon, 'click', this.clearText);
+        if (this.showClearButton) {
+            EventHandler.remove(this.inputObj.clearButton, 'mousedown', this.clearText);
         }
         if (this.keyboardModule) {
             this.keyboardModule.destroy();
         }
     };
+    MultiColumnComboBox.prototype.preventBlur = function (e) {
+        e.preventDefault();
+    };
     MultiColumnComboBox.prototype.dropDownClick = function (e) {
         if (this.disabled || this.readonly) {
             return;
@@ -1034,9 +1060,6 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 this.updateValuesOnInput(e);
             }
         }
-        if (!closest(target, '.e-multicolumn-list')) {
-            this.inputWrapper.tabIndex = -1;
-        }
     };
     MultiColumnComboBox.prototype.updateValuesOnInput = function (mouseEvent, keyEvent, isClearValues) {
         var _this = this;
@@ -1111,6 +1134,9 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 if (this.isPopupOpen) {
                     this.hidePopup(e);
                 }
+                else {
+                    this.focusOut();
+                }
                 break;
             case 'altDown':
                 if (!this.isPopupOpen) {
@@ -1120,7 +1146,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 break;
             case 'moveDown':
             case 'moveUp':
-                this.updateSelectedItem(e);
+                this.updateSelectedItem(e, true, true);
                 break;
             case 'enter':
                 this.updateValuesOnInput(null, e);
@@ -1146,6 +1172,15 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             else if (e.key === 'Home') {
                 e.action = 'home';
             }
+            else if (e.key === 'Tab') {
+                e.action = 'tab';
+            }
+            else if (e.key === 'Escape') {
+                e.action = 'escape';
+            }
+            if (e.shiftKey && e.key === 'Tab') {
+                e.action = 'shiftTab';
+            }
             if (e.altKey && e.key === 'ArrowUp') {
                 e.action = 'altUp';
             }
@@ -1157,6 +1192,9 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             case 'altUp':
                 if (this.isPopupOpen) {
                     e.preventDefault();
+                    if (e.action !== 'escape') {
+                        this.updateSelectedItem(e);
+                    }
                     this.hidePopup(e);
                 }
                 break;
@@ -1168,7 +1206,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 break;
         }
     };
-    MultiColumnComboBox.prototype.updateSelectedItem = function (e, isUpdateIndex) {
+    MultiColumnComboBox.prototype.updateSelectedItem = function (e, isUpdateIndex, isInputTarget) {
         if (isUpdateIndex === void 0) { isUpdateIndex = true; }
         if (this.isPopupOpen) {
             var index = !this.fields.groupBy ? this.gridObj.selectedRowIndex : this.gridObj.selectedRowIndex ? this.gridObj.selectedRowIndex : 0;
@@ -1178,10 +1216,10 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             else if ((index >= this.gridObj.getRows().length && e.action === 'moveDown') || (e.action === 'end')) {
                 index = this.gridObj.getRows().length - 1;
             }
-            else if (e.action === 'moveDown' && (index >= 0 && index <= this.gridObj.getRows().length) && this.fields.groupBy) {
+            else if (e.action === 'moveDown' && (index >= 0 && index <= this.gridObj.getRows().length) && (this.fields.groupBy || isInputTarget)) {
                 index += 1;
             }
-            else if (e.action === 'moveUp' && index > 0 && this.fields.groupBy) {
+            else if (e.action === 'moveUp' && index > 0 && (this.fields.groupBy) || isInputTarget) {
                 index -= 1;
             }
             this.gridObj.selectRow(index);
@@ -1195,6 +1233,12 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             }
         }
     };
+    MultiColumnComboBox.prototype.updateClearIconState = function () {
+        var clearIconEle = this.inputWrapper.querySelector('.e-clear-icon');
+        if (clearIconEle) {
+            clearIconEle.style.display = this.inputEle.value === '' ? 'none' : 'flex';
+        }
+    };
     /**
      * Sets the focus to the component for interaction.component for interaction.
      *
@@ -1206,12 +1250,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             return;
         }
         addClass([this.inputWrapper], [INPUTFOCUS]);
-        this.inputWrapper.tabIndex = 0;
-        this.inputWrapper.focus();
-        var clearIconEle = this.inputWrapper.querySelector('.e-clear-icon');
-        if (clearIconEle && (this.value && this.value.toString() !== '' || this.text && this.text !== '')) {
-            clearIconEle.classList.remove('e-clear-icon-hide');
-        }
+        this.inputEle.focus();
+        this.updateClearIconState();
         this.trigger('focus', e);
         if (this.floatLabelType !== 'Never') {
             Input.calculateWidth(this.inputEle, this.inputWrapper);
@@ -1227,12 +1267,13 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         if (this.disabled || this.readonly) {
             return;
         }
-        this.hidePopup(e);
+        if (this.isPopupOpen) {
+            this.hidePopup(e);
+        }
         removeClass([this.inputWrapper], [INPUTFOCUS]);
-        this.inputWrapper.tabIndex = -1;
         var clearIconEle = this.inputWrapper.querySelector('.e-clear-icon');
         if (clearIconEle) {
-            clearIconEle.classList.add('e-clear-icon-hide');
+            clearIconEle.style.display = 'none';
         }
         if (this.floatLabelType !== 'Never') {
             Input.calculateWidth(this.inputEle, this.inputWrapper);
@@ -1263,6 +1304,16 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                     }
                     _this.focusIn(e);
                 }
+                var contentEle = _this.gridObj.getContent();
+                if (contentEle) {
+                    var activeRow = contentEle.querySelector('.e-rowcell.e-active');
+                    if (activeRow) {
+                        _this.inputEle.setAttribute('aria-activedescendant', activeRow.parentElement.getAttribute('data-uid'));
+                    }
+                    else if (contentEle.querySelector('.e-row')) {
+                        _this.inputEle.setAttribute('aria-activedescendant', contentEle.querySelector('.e-row').getAttribute('data-uid'));
+                    }
+                }
                 _this.popupObj.show(new Animation(eventArgs.animation), _this.popupEle);
             }
         });
@@ -1286,16 +1337,18 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 _this.inputEle.value = _this.text ? _this.text.toString() : '';
                 if (e) {
                     var target = e.target;
-                    if (target.classList.contains('e-multicolumn-list-icon') || target.classList.contains('e-rowcell')) {
+                    if (target && (target.classList.contains('e-multicolumn-list-icon') || target.classList.contains('e-rowcell'))) {
                         if (!_this.value) {
                             _this.gridObj.refreshColumns();
                         }
-                        _this.focusIn(e);
+                        setTimeout(function () { _this.focusIn(e); });
                     }
                     else {
                         _this.focusOut();
                     }
                 }
+                _this.inputEle.removeAttribute('aria-owns');
+                _this.inputEle.removeAttribute('aria-activedescendant');
             }
         });
         setTimeout(function () {
@@ -1360,18 +1413,23 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             this.gridObj.destroy();
             detach(this.gridObj.element);
         }
-        if (this.popupObj) {
-            this.popupObj.destroy();
-            detach(this.popupObj.element);
-        }
         if (this.inputEle) {
-            var attrArray = ['placeholder', 'aria-expanded', 'spellcheck', 'aria-label', 'role', 'tabindex', 'type', 'id', 'aria-owns', 'aria-controls'];
+            var attrArray = ['placeholder', 'aria-expanded', 'spellcheck', 'aria-label', 'role', 'type',
+                'aria-owns', 'aria-controls', 'aria-readonly', 'autocomplete', 'autocapitalize', 'spellcheck', 'aria-activedescendant'];
             for (var i = 0; i < attrArray.length; i++) {
                 this.inputEle.removeAttribute(attrArray[i]);
             }
             this.inputEle.classList.remove('e-input');
             Input.setValue('', this.inputEle, this.floatLabelType, this.showClearButton);
         }
+        if (this.popupEle) {
+            this.popupEle.removeAttribute('aria-label');
+            this.popupEle.removeAttribute('role');
+        }
+        if (this.popupObj) {
+            this.popupObj.destroy();
+            detach(this.popupObj.element);
+        }
         if (this.element.tagName !== this.getDirective()) {
             this.inputWrapper.parentElement.insertBefore(this.element, this.inputWrapper);
         }

package/styles/fluent2.css

@@ -207,7 +207,7 @@
   --color-sf-info-outline: var(--color-sf-info-border-color);
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -478,7 +478,7 @@
   --color-sf-success-bg-color: #218c21;
   --color-sf-success-border-color: var(--color-sf-success-bg-color);
   --color-sf-success-text: var(--color-sf-primary-text-color);
-  --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
+  --color-sf-success-bg-color-hover: #0e700e;
   --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
   --color-sf-success-text-hover: var(--color-sf-primary-text-color);
   --color-sf-success-bg-color-pressed: #052505;
@@ -496,7 +496,7 @@
   --color-sf-warning-bg-color: #f87528;
   --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
   --color-sf-warning-text: #242424;
-  --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
+  --color-sf-warning-bg-color-hover: #de590b;
   --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
   --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
   --color-sf-warning-bg-color-pressed: #4a1e04;
@@ -555,7 +555,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -897,7 +897,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-border-light);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
   --color-sf-appbar-bg-color-alt1: #fff;

package/styles/multicolumn-combobox/fluent2.css

@@ -207,7 +207,7 @@
   --color-sf-info-outline: var(--color-sf-info-border-color);
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -478,7 +478,7 @@
   --color-sf-success-bg-color: #218c21;
   --color-sf-success-border-color: var(--color-sf-success-bg-color);
   --color-sf-success-text: var(--color-sf-primary-text-color);
-  --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
+  --color-sf-success-bg-color-hover: #0e700e;
   --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
   --color-sf-success-text-hover: var(--color-sf-primary-text-color);
   --color-sf-success-bg-color-pressed: #052505;
@@ -496,7 +496,7 @@
   --color-sf-warning-bg-color: #f87528;
   --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
   --color-sf-warning-text: #242424;
-  --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
+  --color-sf-warning-bg-color-hover: #de590b;
   --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
   --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
   --color-sf-warning-bg-color-pressed: #4a1e04;
@@ -555,7 +555,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -897,7 +897,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-border-light);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
   --color-sf-appbar-bg-color-alt1: #fff;