Merge branch 'master' into sivanova/icon-btn-refinement

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
   "files": {
     "include": [
       "src/**/*.ts",
@@ -35,6 +35,12 @@
       },
       "suspicious": {
         "noExplicitAny": "off"
+      },
+      "nursery": {
+        "useImportExtensions": {
+          "level": "error",
+          "fix": "none"
+        }
       }
     }
   }

package.json

@@ -33,11 +33,11 @@
     "clean:styles": "rimraf --glob \"src/**/*.css.ts\"",
     "clean:docs": "rimraf ./docs",
     "lint": "npm run lint:biome && npm run lint:lit-analyzer && npm run lint:prettier && npm run lint:styles",
-    "lint:biome": "biome lint ./",
+    "lint:biome": "biome lint",
     "lint:lit-analyzer": "lit-analyzer",
     "lint:prettier": "prettier \"**/*.ts\" --check --ignore-path .gitignore",
     "lint:styles": "stylelint \"src/**/*.scss\"",
-    "format": "biome check --apply ./ && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "format": "biome check --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "release": "node scripts/gen-changelog.mjs",
     "test": "npm run build && wtr --coverage",
     "test:watch": "npm run build && concurrently -k -r \"npm:watch-scss\" \"npm:watch-ts\" \"wtr --watch\"",
@@ -54,20 +54,20 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.5",
-    "@lit-labs/virtualizer": "^2.0.12",
-    "lit": "^3.1.3"
+    "@lit-labs/virtualizer": "^2.0.13",
+    "lit": "^3.1.4"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.7.3",
+    "@biomejs/biome": "1.8.0",
     "@custom-elements-manifest/analyzer": "^0.9.6",
     "@igniteui/material-icons-extended": "^3.0.2",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^8.1.5",
-    "@storybook/addon-actions": "^8.1.5",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/web-components": "^8.1.5",
-    "@storybook/web-components-vite": "^8.1.5",
+    "@storybook/addon-a11y": "^8.1.6",
+    "@storybook/addon-actions": "^8.1.6",
+    "@storybook/addon-essentials": "^8.1.6",
+    "@storybook/addon-links": "^8.1.6",
+    "@storybook/web-components": "^8.1.6",
+    "@storybook/web-components-vite": "^8.1.6",
     "@types/mocha": "^10.0.6",
     "@web/test-runner": "^0.18.2",
     "@web/test-runner-playwright": "^0.11.0",
@@ -79,33 +79,33 @@
     "globby": "^14.0.1",
     "husky": "^9.0.11",
     "ig-typedoc-theme": "^5.0.3",
-    "igniteui-theming": "^7.0.2",
+    "igniteui-theming": "^7.1.0",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.5",
     "lit-analyzer": "^2.0.3",
     "madge": "^7.0.0",
     "node-watch": "^0.7.4",
     "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.1",
     "rimraf": "^5.0.7",
-    "sass": "^1.77.3",
+    "sass": "^1.77.4",
     "sass-embedded": "^1.77.2",
     "sinon": "^18.0.0",
-    "storybook": "^8.1.5",
+    "storybook": "^8.1.6",
     "stylelint": "^16.6.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-prettier": "^5.0.0",
-    "stylelint-scss": "^6.3.0",
+    "stylelint-scss": "^6.3.1",
     "ts-lit-plugin": "^2.0.2",
-    "tslib": "^2.6.2",
+    "tslib": "^2.6.3",
     "typedoc": "^0.25.13",
     "typedoc-plugin-localization": "^3.0.4",
     "typescript": "^5.4.5",
     "vite": "^5.2.12"
   },
   "lint-staged": {
     "*.{js,ts,cjs,mjs,jsx,tsx}": [
-      "biome check --apply --no-errors-on-unmatched",
+      "biome check --fix --no-errors-on-unmatched",
       "prettier --write",
       "git add"
     ]

src/components/button-group/themes/button.ts

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-import type { Themes } from '../../../theming/types';
+import type { Themes } from '../../../theming/types.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/button/button.bootstrap.css.js';
 import { styles as fluent } from './shared/button/button.fluent.css.js';

src/components/button-group/themes/group.ts

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-import type { Themes } from '../../../theming/types';
+import type { Themes } from '../../../theming/types.js';
 // Dark Overrides
 import { styles as bootstrapDark } from './dark/button-group.bootstrap.css.js';
 import { styles as fluentDark } from './dark/button-group.fluent.css.js';

src/components/calendar/calendar-rendering.spec.ts

@@ -1,8 +1,8 @@
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 
 import { IgcCalendarComponent, defineComponents } from '../../index.js';
-import type IgcDaysViewComponent from './days-view/days-view';
-import type IgcMonthsViewComponent from './months-view/months-view';
+import type IgcDaysViewComponent from './days-view/days-view.js';
+import type IgcMonthsViewComponent from './months-view/months-view.js';
 
 describe('Calendar Rendering', () => {
   const DIFF_OPTIONS = {

src/components/common/decorators/blazorDeepImport.ts

@@ -1,4 +1,7 @@
-import type { AbstractConstructor, Constructor } from '../mixins/constructor';
+import type {
+  AbstractConstructor,
+  Constructor,
+} from '../mixins/constructor.js';
 
 /**
  * Indicates a class isn't imported at the root of the API, so needs to be referred to with a deep import in the wrappers.

src/components/common/decorators/blazorIndirectRender.ts

@@ -1,4 +1,7 @@
-import type { AbstractConstructor, Constructor } from '../mixins/constructor';
+import type {
+  AbstractConstructor,
+  Constructor,
+} from '../mixins/constructor.js';
 
 /**
  * Indicates a class should use the indirect renderer in Blazor.

src/components/common/decorators/blazorSuppressComponent.ts

@@ -1,4 +1,7 @@
-import type { AbstractConstructor, Constructor } from '../mixins/constructor';
+import type {
+  AbstractConstructor,
+  Constructor,
+} from '../mixins/constructor.js';
 
 /**
  * Indicates a class should not be exposed to blazor Blazor.

src/components/common/mixins/event-emitter.ts

@@ -1,6 +1,5 @@
 import type { LitElement } from 'lit';
-
-import type { AbstractConstructor, Constructor } from './constructor';
+import type { AbstractConstructor, Constructor } from './constructor.js';
 
 export type UnpackCustomEvent<T> = T extends CustomEvent<infer U> ? U : never;
 

src/components/common/mixins/form-associated.ts

@@ -2,7 +2,7 @@ import type { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import type { Validator } from '../validators.js';
-import type { Constructor } from './constructor';
+import type { Constructor } from './constructor.js';
 
 export declare class FormAssociatedElementInterface {
   public static readonly formAssociated: boolean;

src/components/common/mixins/sizable.ts

@@ -2,7 +2,7 @@ import type { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { watch } from '../decorators/watch.js';
-import type { Constructor } from './constructor';
+import type { Constructor } from './constructor.js';
 
 export declare class SizableInterface {
   /**

src/components/common/utils.spec.ts

@@ -2,7 +2,7 @@ import { expect, fixture, html } from '@open-wc/testing';
 import type { TemplateResult } from 'lit';
 
 import { parseKeys } from './controllers/key-bindings.js';
-import type { FormAssociatedElementInterface } from './mixins/form-associated';
+import type { FormAssociatedElementInterface } from './mixins/form-associated.js';
 
 export class FormAssociatedTestBed<
   T extends FormAssociatedElementInterface & Element,

src/components/dropdown/dropdown-group.ts

@@ -4,7 +4,7 @@ import { queryAssignedElements } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
 import { registerComponent } from '../common/definitions/register.js';
-import type IgcDropdownItemComponent from './dropdown-item';
+import type IgcDropdownItemComponent from './dropdown-item.js';
 import { styles } from './themes/dropdown-group.base.css.js';
 import { all } from './themes/group.js';
 import { styles as shared } from './themes/shared/group/dropdown-group.common.css.js';

src/components/progress/base.ts

@@ -115,10 +115,6 @@ export abstract class IgcProgressBaseComponent extends LitElement {
     }
   }
 
-  protected slotChanged() {
-    this.requestUpdate();
-  }
-
   constructor() {
     super();
     this.__internals = this.attachInternals();
@@ -127,6 +123,12 @@ export abstract class IgcProgressBaseComponent extends LitElement {
     this.__internals.ariaValueMin = '0';
   }
 
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    root.addEventListener('slotchange', () => this.requestUpdate());
+    return root;
+  }
+
   protected override updated() {
     this._updateARIA();
   }
@@ -201,7 +203,7 @@ export abstract class IgcProgressBaseComponent extends LitElement {
       this.indeterminate || this.hideLabel || this.assignedElements.length;
 
     return html`
-      <slot part="label" @slotchange=${this.slotChanged}></slot>
+      <slot part="label"></slot>
       ${hasNoLabel
         ? nothing
         : html`<span part="label value">${this.renderLabelText()}</span>`}

src/components/progress/circular-progress.ts

@@ -20,19 +20,19 @@ import { all } from './themes/circular/themes.js';
  * @slot - The text area container.
  * @slot gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements.
  *
- * @csspart svg
- * @csspart gradient_start
- * @csspart gradient_end
- * @csspart track
- * @csspart fill
- * @csspart label
- * @csspart value
- * @csspart indeterminate
- * @csspart primary
- * @csspart danger
- * @csspart warning
- * @csspart info
- * @csspart success
+ * @csspart svg - The igc-circular-progress SVG element.
+ * @csspart gradient_start - The igc-circular-progress linear-gradient start color.
+ * @csspart gradient_end - The igc-circular-progress linear-gradient end color.
+ * @csspart track - The igc-circular-progress ring track area.
+ * @csspart fill - The igc-circular-progress indicator area.
+ * @csspart label - The igc-circular-progress label.
+ * @csspart value - The igc-circular-progress label value.
+ * @csspart indeterminate - The igc-circular-progress indeterminate state.
+ * @csspart primary - The igc-circular-progress primary state.
+ * @csspart danger - The igc-circular-progress error state.
+ * @csspart warning - The igc-circular-progress warning state.
+ * @csspart info - The igc-circular-progress info state.
+ * @csspart success - The igc-circular-progress success state.
  */
 @themes(all)
 export default class IgcCircularProgressComponent extends IgcProgressBaseComponent {
@@ -92,7 +92,7 @@ export default class IgcCircularProgressComponent extends IgcProgressBaseCompone
 
     return html`
       <svg part=${partNameMap(parts)}>${this.renderSvg()}</svg>
-      <slot name="gradient" @slotchange=${this.slotChanged}></slot>
+      <slot name="gradient"></slot>
       ${this.renderDefaultSlot()}
     `;
   }

src/components/progress/linear-progress.ts

@@ -18,17 +18,17 @@ import { all } from './themes/linear/themes.js';
  *
  * @slot - The text area container.
  *
- * @csspart track
- * @csspart fill
- * @csspart striped
- * @csspart label
- * @csspart value
- * @csspart indeterminate
- * @csspart primary
- * @csspart danger
- * @csspart warning
- * @csspart info
- * @csspart success
+ * @csspart track - The igc-linear-progress track area.
+ * @csspart fill - The igc-linear-progress indicator area.
+ * @csspart striped - The igc-linear-progress striped indicator.
+ * @csspart label - The igc-linear-progress label.
+ * @csspart value - The igc-linear-progress label value.
+ * @csspart indeterminate - The igc-linear-progress indeterminate state.
+ * @csspart primary - The igc-linear-progress indicator primary state.
+ * @csspart danger - The igc-linear-progress indicator error state.
+ * @csspart warning - The igc-linear-progress indicator warning state.
+ * @csspart info - The igc-linear-progress indicator info state.
+ * @csspart success - The igc-linear-progress indicator success state.
  */
 @themes(all)
 export default class IgcLinearProgressComponent extends IgcProgressBaseComponent {
@@ -61,7 +61,7 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
     | 'bottom-end' = 'top-start';
 
   protected override render() {
-    const parts = {
+    const parts = partNameMap({
       fill: true,
       striped: this.striped,
       indeterminate: this.indeterminate,
@@ -70,7 +70,7 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
       danger: this.variant === 'danger',
       warning: this.variant === 'warning',
       info: this.variant === 'info',
-    };
+    });
 
     const animation = {
       width: `${this.progress * 100}%`,
@@ -79,8 +79,8 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
 
     return html`
       <div part="track">
-        <div part=${partNameMap(parts)} style=${styleMap(animation)}></div>
-        <div part="${partNameMap(parts)} secondary"></div>
+        <div part=${parts} style=${styleMap(animation)}></div>
+        <div part="${parts} secondary"></div>
       </div>
       ${this.renderDefaultSlot()}
     `;

src/components/radio/utils.ts

@@ -1,5 +1,5 @@
 import { isDefined, iterNodes } from '../common/util.js';
-import type IgcRadioComponent from './radio';
+import type IgcRadioComponent from './radio.js';
 
 type RadioQueryResult = {
   /** Radio components under the same group name */

src/components/tree/tree.spec.ts

@@ -1,8 +1,9 @@
 import { aTimeout, elementUpdated, expect, waitUntil } from '@open-wc/testing';
 import { spy } from 'sinon';
 
-import type { IgcCheckboxComponent, IgcTreeItemComponent } from '../../index';
-import { defineComponents } from '../../index.js';
+import type IgcCheckboxComponent from '../checkbox/checkbox.js';
+import { defineComponents } from '../common/definitions/defineComponents.js';
+import type IgcTreeItemComponent from './tree-item.js';
 import {
   DIFF_OPTIONS,
   PARTS,