Merge branch 'master' into mpopov/calendar/refactoring

rkaraivanov · web-flow · commit 2c8e3cbf21f6 · 2025-11-21T10:59:57.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -82,16 +82,16 @@
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^7.0.0",
     "igniteui-i18n-resources": "0.7.0-alpha.8",
-    "igniteui-theming": "^23.1.1",
+    "igniteui-theming": "^23.2.0",
     "keep-a-changelog": "^2.7.1",
-    "lint-staged": "^16.2.6",
+    "lint-staged": "^16.2.7",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
     "playwright": "^1.56.1",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
-    "rimraf": "^6.1.0",
+    "rimraf": "^6.1.2",
     "sass-embedded": "~1.93.3",
     "sinon": "^21.0.0",
     "storybook": "^10.0.8",
@@ -104,11 +104,11 @@
     "typedoc": "~0.28.14",
     "typedoc-plugin-localization": "^3.1.0",
     "typescript": "^5.9.3",
-    "vite": "^7.2.2"
+    "vite": "^7.2.4"
   },
   "peerDependencies": {
     "dompurify": "^3.3.0",
-    "marked": "^17.0.0",
+    "marked": "^17.0.1",
     "marked-shiki": "^1.2.1",
     "shiki": "^3.15.0"
   },
diff --git a/src/components/checkbox/themes/shared/switch/switch.bootstrap.scss b/src/components/checkbox/themes/shared/switch/switch.bootstrap.scss
@@ -56,15 +56,6 @@ $theme: $bootstrap;
 
 :host(:not([disabled]):hover),
 :host(:not(:disabled):hover)  {
-    [part~='control'] {
-        border-color: var-get($theme, 'border-hover-color');
-    }
-
-    [part~='control'][part~='checked'] {
-        background: var-get($theme, 'track-on-hover-color');
-        border-color: var-get($theme, 'border-on-hover-color');
-    }
-
     [part~='thumb'][part~='checked'] {
         background: var-get($theme, 'thumb-on-color');
     }
diff --git a/src/components/checkbox/themes/shared/switch/switch.common.scss b/src/components/checkbox/themes/shared/switch/switch.common.scss
@@ -20,6 +20,18 @@ $theme: $material;
     }
 }
 
+:host(:not([disabled]):hover),
+:host(:not(:disabled):hover) {
+    [part~='control'] {
+        border-color: var-get($theme, 'border-hover-color');
+    }
+
+    [part~='control'][part~='checked'] {
+        background: var-get($theme, 'track-on-hover-color');
+        border-color: var-get($theme, 'border-on-hover-color');
+    }
+}
+
 :host([disabled]),
 :host(:disabled) {
     [part~='label'] {
diff --git a/src/components/checkbox/themes/shared/switch/switch.fluent.scss b/src/components/checkbox/themes/shared/switch/switch.fluent.scss
@@ -61,16 +61,14 @@ $theme: $fluent;
 
 :host(:not([disabled]):hover),
 :host(:not(:disabled):hover)  {
-    [part~='control'] {
-        border-color: var-get($theme, 'border-hover-color');
+    [part~='thumb'][part~='checked'] {
+        background: var-get($theme, 'thumb-on-color');
     }
+}
 
+:host([disabled]),
+:host(:disabled) {
     [part~='control'][part~='checked'] {
-        background: var-get($theme, 'track-on-hover-color');
-        border-color: var-get($theme, 'border-on-hover-color');
-    }
-
-    [part~='thumb'][part~='checked'] {
-        background: var-get($theme, 'thumb-on-color');
+        border-color: var-get($theme, 'track-on-disabled-color');
     }
 }
diff --git a/src/components/checkbox/themes/shared/switch/switch.indigo.scss b/src/components/checkbox/themes/shared/switch/switch.indigo.scss
@@ -19,17 +19,6 @@ $border-width: rem(1px);
     @include type-style('body-2');
 }
 
-:host(:hover) {
-    [part~='control'] {
-        border-color: var-get($theme, 'border-hover-color');
-    }
-
-    [part~='control'][part~='checked'] {
-        background: var-get($theme, 'track-on-hover-color');
-        border-color: var-get($theme, 'border-on-hover-color');
-    }
-}
-
 [part~='control'][part~='focused'] {
     box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color');
 }
diff --git a/src/components/checkbox/themes/shared/switch/switch.material.scss b/src/components/checkbox/themes/shared/switch/switch.material.scss
@@ -32,14 +32,6 @@ $ripple-radius: calc(#{$ripple-size} / 2);
                 background: var-get($theme, 'thumb-on-color');
             }
         }
-
-        [part~='control'] {
-            border-color: var-get($theme, 'border-hover-color');
-        }
-
-        [part~='control'][part~='checked'] {
-            border-color: var-get($theme, 'border-on-hover-color');
-        }
     }
 
     &:focus-visible,
@@ -98,6 +90,10 @@ $ripple-radius: calc(#{$ripple-size} / 2);
         overflow: hidden;
         z-index: -1;
     }
+
+    &:hover {
+        box-shadow: var-get($theme, 'hover-elevation');
+    }
 }
 
 [part~='thumb'][part~='checked'] {
@@ -107,3 +103,10 @@ $ripple-radius: calc(#{$ripple-size} / 2);
     animation-duration: .2s;
     animation-fill-mode: forwards;
 }
+
+:host([disabled]),
+:host(:disabled) {
+    [part~='thumb'] {
+        box-shadow: var-get($theme, 'disabled-elevation');
+    }
+}
diff --git a/src/components/date-picker/date-picker-form.spec.ts b/src/components/date-picker/date-picker-form.spec.ts
@@ -229,10 +229,7 @@ describe('igc-datepicker form integration', () => {
 
     describe('Validation', () => {
       const spec = createFormAssociatedTestBed<IgcDatePickerComponent>(html`
-        <igc-date-picker
-          name="datePicker"
-          .defaultValue=${null}
-        ></igc-date-picker>
+        <igc-date-picker name="datePicker"></igc-date-picker>
       `);
 
       beforeEach(async () => {
diff --git a/src/components/date-picker/date-picker.spec.ts b/src/components/date-picker/date-picker.spec.ts
@@ -927,7 +927,7 @@ describe('Date picker', () => {
       simulateClick(lastOfMay);
       await elementUpdated(picker);
 
-      expect(checkDatesEqual(picker.value!, targetDate));
+      checkDatesEqual(picker.value!, targetDate);
 
       // Open the picker and switch to months view
       await picker.show();
diff --git a/src/components/date-time-input/date-time-input.spec.ts b/src/components/date-time-input/date-time-input.spec.ts
@@ -1102,10 +1102,7 @@ describe('Date Time Input component', () => {
 
     describe('Validation', () => {
       const spec = createFormAssociatedTestBed<IgcDateTimeInputComponent>(html`
-        <igc-date-time-input
-          name="date-time"
-          .defaultValue=${null}
-        ></igc-date-time-input>
+        <igc-date-time-input name="date-time"></igc-date-time-input>
       `);
 
       beforeEach(async () => {
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
@@ -71,8 +71,8 @@ export default class IgcDialogComponent extends EventEmitterMixin<
   @state()
   private _animating = false;
 
-  private get _dialog(): HTMLDialogElement {
-    return this._dialogRef.value!;
+  private get _dialog(): HTMLDialogElement | undefined {
+    return this._dialogRef.value;
   }
 
   //#endregion
@@ -132,13 +132,13 @@ export default class IgcDialogComponent extends EventEmitterMixin<
 
   protected override firstUpdated(): void {
     if (this.open) {
-      this._dialog.showModal();
+      this._dialog?.showModal();
     }
   }
 
   @watch('open', { waitUntilFirstUpdate: true })
   protected _handleOpenState(): void {
-    this.open ? this._dialog.showModal() : this._dialog.close();
+    this.open ? this._dialog?.showModal() : this._dialog?.close();
   }
 
   private _emitClosing(): boolean {
@@ -194,7 +194,7 @@ export default class IgcDialogComponent extends EventEmitterMixin<
     // reopen the dialog to prevent the broken state with visible backdrop.
     // Note that this handler is invoked only when `keepOpenOnEscape` is true.
     if (this.open) {
-      this._dialog.showModal();
+      this._dialog?.showModal();
     }
   }
 
diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts
@@ -565,7 +565,7 @@ describe('Input component', () => {
 
     describe('Validation', () => {
       const spec = createFormAssociatedTestBed<IgcInputComponent>(html`
-        <igc-input name="input" required .defaultValue=${undefined}></igc-input>
+        <igc-input name="input" required></igc-input>
       `);
 
       beforeEach(async () => {
diff --git a/src/components/mask-input/mask-input.spec.ts b/src/components/mask-input/mask-input.spec.ts
@@ -816,12 +816,7 @@ describe('Masked input', () => {
 
     describe('Validation', () => {
       const spec = createFormAssociatedTestBed<IgcMaskInputComponent>(html`
-        <igc-mask-input
-          name="mask"
-          mask="LL"
-          required
-          .defaultValue=${undefined}
-        ></igc-mask-input>
+        <igc-mask-input name="mask" mask="LL" required></igc-mask-input>
       `);
 
       beforeEach(async () => {
diff --git a/src/components/select/select.spec.ts b/src/components/select/select.spec.ts
@@ -1343,7 +1343,7 @@ describe('Select', () => {
 
     describe('Validation', () => {
       const spec = createFormAssociatedTestBed<IgcSelectComponent>(html`
-        <igc-select name="select" required .defaultValue=${undefined}>
+        <igc-select name="select" required>
           <igc-select-item value="1">1</igc-select-item>
           <igc-select-item value="2">2</igc-select-item>
           <igc-select-item value="3">3</igc-select-item>
diff --git a/src/components/textarea/textarea.spec.ts b/src/components/textarea/textarea.spec.ts
@@ -240,15 +240,14 @@ describe('Textarea component', () => {
     });
 
     it('scroll()', async () => {
-      const text = new Text(
-        Array.from({ length: 100 }, (_, idx) => ` ${idx}`.repeat(250)).join(
-          '\n'
-        )
-      );
+      const text = Array.from({ length: 100 }, (_, idx) =>
+        ` ${idx}`.repeat(250)
+      ).join('\n');
+
       const [xDelta, yDelta] = [250, 250];
 
       element.wrap = 'off';
-      element.appendChild(text);
+      element.appendChild(document.createTextNode(text));
       await elementUpdated(element);
 
       element.scrollTo({ top: yDelta, left: xDelta });
@@ -385,11 +384,7 @@ describe('Textarea component', () => {
 
     describe('Validation', () => {
       const spec = createFormAssociatedTestBed<IgcTextareaComponent>(html`
-        <igc-textarea
-          name="textarea"
-          required
-          .defaultValue=${undefined}
-        ></igc-textarea>
+        <igc-textarea name="textarea" required></igc-textarea>
       `);
 
       beforeEach(async () => {

Original file line number	Diff line number	Diff line change
`@@ -32,14 +32,6 @@ $ripple-radius: calc(#{$ripple-size} / 2);`
`32`	`32`	`background: var-get($theme, 'thumb-on-color');`
`33`	`33`	`}`
`34`	`34`	`}`
`35`		`-`
`36`		`- [part~='control'] {`
`37`		`- border-color: var-get($theme, 'border-hover-color');`
`38`		`- }`
`39`		`-`
`40`		`- [part~='control'][part~='checked'] {`
`41`		`- border-color: var-get($theme, 'border-on-hover-color');`
`42`		`- }`
`43`	`35`	`}`
`44`	`36`
`45`	`37`	`&:focus-visible,`
`@@ -98,6 +90,10 @@ $ripple-radius: calc(#{$ripple-size} / 2);`
`98`	`90`	`overflow: hidden;`
`99`	`91`	`z-index: -1;`
`100`	`92`	`}`
	`93`	`+`
	`94`	`+ &:hover {`
	`95`	`+ box-shadow: var-get($theme, 'hover-elevation');`
	`96`	`+ }`
`101`	`97`	`}`
`102`	`98`
`103`	`99`	`[part~='thumb'][part~='checked'] {`
`@@ -107,3 +103,10 @@ $ripple-radius: calc(#{$ripple-size} / 2);`
`107`	`103`	`animation-duration: .2s;`
`108`	`104`	`animation-fill-mode: forwards;`
`109`	`105`	`}`
	`106`	`+`
	`107`	`+:host([disabled]),`
	`108`	`+:host(:disabled) {`
	`109`	`+ [part~='thumb'] {`
	`110`	`+ box-shadow: var-get($theme, 'disabled-elevation');`
	`111`	`+ }`
	`112`	`+}`