Merge branch '20.0.x' into sstoychev/api-doc-fix

Author: ChronosSF

.github/workflows/nodejs.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [20.x, 22.x]
+        node-version: [20.x, 22.17.1]
 
     steps:
       - name: Checkout

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^19.2.0",
+    "igniteui-theming": "^19.2.3",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",

package.json

@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^19.2.0",
+        "igniteui-theming": "^19.2.3",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -1074,7 +1074,7 @@ describe('igxCombo', () => {
 
                 const list = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`));
                 expect(list.nativeElement.getAttribute('aria-multiselectable')).toEqual('true');
-                expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual('');
+                expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual(null);
 
                 UIInteractions.triggerEventHandlerKeyDown('ArrowDown', list);
                 tick();

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -5,5 +5,6 @@
 @forward 'igniteui-theming/sass/color';
 @forward 'igniteui-theming/sass/elevations';
 @forward 'igniteui-theming/sass/themes';
+@forward 'igniteui-theming/sass/themes/components';
 @forward 'igniteui-theming/sass/typography' hide typography;
 @forward 'igniteui-theming/sass/utils';

projects/igniteui-angular/src/lib/core/styles/base/_index.scss

@@ -132,7 +132,7 @@
 
         @if $variant != 'material' {
             %switch-thumb {
-                background: var-get($theme, 'border-hover-color');
+                background: var-get($theme, 'thumb-off-hover-color');
             }
 
             %switch-thumb--x {

projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss

@@ -7,6 +7,7 @@
 
 // Used to configure color accessibility for charts
 @use 'igniteui-theming/sass/color/functions' as color;
+@use 'igniteui-theming/sass/themes/mixins' as theming;
 
 // Common components
 @use '../components/_common/igx-control';
@@ -113,6 +114,8 @@
         }
     }
 
+    @include theming.spacing();
+
     @property --_progress-integer {
         syntax: '<integer>';
         initial-value: 0;

projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

@@ -84,18 +84,6 @@
         --ig-size-small: 1;
         --ig-size-medium: 2;
         --ig-size-large: 3;
-
-        --ig-spacing-small: 1;
-        --ig-spacing-medium: 1;
-        --ig-spacing-large: 1;
-
-        --ig-spacing-inline-small: 1;
-        --ig-spacing-inline-medium: 1;
-        --ig-spacing-inline-large: 1;
-
-        --ig-spacing-block-small: 1;
-        --ig-spacing-block-medium: 1;
-        --ig-spacing-block-large: 1;
     }
 
     @if not(list.index($exclude, 'palette')) {

projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss

@@ -16,7 +16,7 @@
 </ng-template>
 
 <ng-template #defIcon>
-    <igx-icon family="default" name="date_range" [attr.aria-hidden]="true"></igx-icon>
+    <igx-icon family="default" name="date_range"></igx-icon>
 </ng-template>
 
 <ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>