IgniteUI · rkaraivanov · Nov 28, 2025 · Nov 28, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -60,14 +60,14 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "~2.3.7",
+    "@biomejs/biome": "~2.3.8",
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^10.0.8",
-    "@storybook/addon-docs": "^10.0.8",
-    "@storybook/addon-links": "^10.0.8",
-    "@storybook/web-components-vite": "^10.0.8",
+    "@storybook/addon-a11y": "^10.1.0",
+    "@storybook/addon-docs": "^10.1.0",
+    "@storybook/addon-links": "^10.1.0",
+    "@storybook/web-components-vite": "^10.1.0",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
@@ -82,19 +82,19 @@
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^7.0.0",
     "igniteui-i18n-resources": "0.7.0-alpha.8",
-    "igniteui-theming": "^24.0.0",
+    "igniteui-theming": "^24.0.1",
     "keep-a-changelog": "^2.7.1",
     "lint-staged": "^16.2.7",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
     "playwright": "^1.57.0",
     "postcss": "^8.5.6",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.1",
     "rimraf": "^6.1.2",
     "sass-embedded": "~1.93.3",
     "sinon": "^21.0.0",
-    "storybook": "^10.0.8",
+    "storybook": "^10.1.0",
     "stylelint": "^16.26.0",
     "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-prettier": "^5.0.3",
@@ -110,7 +110,7 @@
     "dompurify": "^3.3.0",
     "marked": "^17.0.1",
     "marked-shiki": "^1.2.1",
-    "shiki": "^3.15.0"
+    "shiki": "^3.17.0"
   },
   "browserslist": [
     "defaults"

diff --git a/src/components/combo/controllers/selection.ts b/src/components/combo/controllers/selection.ts
@@ -11,9 +11,9 @@ import type {
 } from '../types.js';
 import type { DataController } from './data.js';
 
-export class SelectionController<T extends object>
-  implements ReactiveController
-{
+export class SelectionController<
+  T extends object,
+> implements ReactiveController {
   private _selected: Set<T> = new Set();
 
   /** Whether the current selection is empty */

diff --git a/src/components/common/controllers/async-consumer.ts b/src/components/common/controllers/async-consumer.ts
@@ -15,8 +15,7 @@ type AsyncContextOptions<T extends Context<unknown, unknown>> = {
 export class AsyncContextConsumer<
   T extends Context<unknown, unknown>,
   Host extends ReactiveControllerHost & HTMLElement,
-> implements ReactiveController
-{
+> implements ReactiveController {
   protected _host: Host;
   protected _options: AsyncContextOptions<T>;
   protected _consumer?: ContextConsumer<T, Host>;

diff --git a/src/components/common/i18n/EN/date-range-picker.resources.ts b/src/components/common/i18n/EN/date-range-picker.resources.ts
@@ -6,8 +6,7 @@ import {
 } from './calendar.resources.js';
 
 /* blazorSuppress */
-export interface IgcDateRangePickerResourceStrings
-  extends IgcCalendarResourceStrings {
+export interface IgcDateRangePickerResourceStrings extends IgcCalendarResourceStrings {
   separator: string;
   done: string;
   cancel: string;

diff --git a/src/components/date-picker/date-picker.spec.ts b/src/components/date-picker/date-picker.spec.ts
@@ -223,7 +223,7 @@ describe('Date picker', () => {
     it('should be successfully initialized with value', async () => {
       const expectedValue = new Date(2024, 1, 29);
       picker = await fixture<IgcDatePickerComponent>(
-        html`<igc-date-picker .value="${expectedValue}"></igc-date-picker>`
+        html`<igc-date-picker .value=${expectedValue}></igc-date-picker>`
       );
       dateTimeInput = picker.renderRoot.querySelector(
         IgcDateTimeInputComponent.tagName

diff --git a/src/components/date-range-picker/date-range-picker-single.spec.ts b/src/components/date-range-picker/date-range-picker-single.spec.ts
@@ -119,7 +119,7 @@ describe('Date range picker - single input', () => {
       const expectedValue = { start: today.native, end: tomorrow.native };
       picker = await fixture<IgcDateRangePickerComponent>(
         html`<igc-date-range-picker
-          .value="${expectedValue}"
+          .value=${expectedValue}
         ></igc-date-range-picker>`
       );
 

diff --git a/src/components/date-range-picker/date-range-picker-two-inputs.spec.ts b/src/components/date-range-picker/date-range-picker-two-inputs.spec.ts
@@ -114,7 +114,7 @@ describe('Date range picker - two inputs', () => {
       const expectedValue = { start: today.native, end: tomorrow.native };
       picker = await fixture<IgcDateRangePickerComponent>(
         html`<igc-date-range-picker
-          .value="${expectedValue}"
+          .value=${expectedValue}
           use-two-inputs
         ></igc-date-range-picker>`
       );
@@ -136,7 +136,7 @@ describe('Date range picker - two inputs', () => {
       picker = await fixture<IgcDateRangePickerComponent>(
         html`<igc-date-range-picker
           use-two-inputs
-          .value="${expectedValue}"
+          .value=${expectedValue}
         ></igc-date-range-picker>`
       );
 

diff --git a/src/components/date-range-picker/date-range-picker.common.spec.ts b/src/components/date-range-picker/date-range-picker.common.spec.ts
@@ -166,7 +166,7 @@ describe('Date range picker - common tests for single and two inputs mode', () =
       const expectedValue = { start: today.native, end: tomorrow.native };
       picker = await fixture<IgcDateRangePickerComponent>(
         html`<igc-date-range-picker
-          .value="${expectedValue}"
+          .value=${expectedValue}
         ></igc-date-range-picker>`
       );
       checkSelectedRange(picker, expectedValue, false);

diff --git a/src/components/date-time-input/date-time-input.ts b/src/components/date-time-input/date-time-input.ts
@@ -35,8 +35,10 @@ import {
 } from './date-util.js';
 import { dateTimeInputValidators } from './validators.js';
 
-export interface IgcDateTimeInputComponentEventMap
-  extends Omit<IgcInputComponentEventMap, 'igcChange'> {
+export interface IgcDateTimeInputComponentEventMap extends Omit<
+  IgcInputComponentEventMap,
+  'igcChange'
+> {
   igcChange: CustomEvent<Date | null>;
 }
 

diff --git a/src/components/file-input/file-input.ts b/src/components/file-input/file-input.ts
@@ -23,8 +23,10 @@ import { styles } from './themes/file-input.base.css.js';
 import { all } from './themes/themes.js';
 import { fileValidators } from './validators.js';
 
-export interface IgcFileInputComponentEventMap
-  extends Omit<IgcInputComponentEventMap, 'igcChange' | 'igcInput'> {
+export interface IgcFileInputComponentEventMap extends Omit<
+  IgcInputComponentEventMap,
+  'igcChange' | 'igcInput'
+> {
   igcCancel: CustomEvent<FileList>;
   igcChange: CustomEvent<FileList>;
 }

diff --git a/src/components/radio/radio.spec.ts b/src/components/radio/radio.spec.ts
@@ -171,8 +171,8 @@ describe('Radio Component', () => {
     it('should be able to use external elements as label', async () => {
       const labelId = 'my-label';
       const radio = await fixture<IgcRadioComponent>(
-        html`<igc-radio aria-labelledby="${labelId}"></igc-radio>
-          <span id="${labelId}">My Label</span>`
+        html`<igc-radio aria-labelledby=${labelId}></igc-radio>
+          <span id=${labelId}>My Label</span>`
       );
       const input = radio.renderRoot.querySelector('input') as HTMLInputElement;
 

diff --git a/src/components/stepper/step.ts b/src/components/stepper/step.ts
@@ -326,9 +326,9 @@ export default class IgcStepComponent extends LitElement {
       <div part=${partMap(this.headerContainerParts)}>
         <div
           part="header"
-          tabindex="${this.active ? '0' : '-1'}"
+          tabindex=${this.active ? '0' : '-1'}
           role="tab"
-          aria-selected="${this.active}"
+          aria-selected=${this.active}
           @click=${this.handleClick}
           @keydown=${this.handleKeydown}
         >

diff --git a/stories/carousel.stories.ts b/stories/carousel.stories.ts
@@ -109,7 +109,7 @@ const metadata: Meta<IgcCarouselComponent> = {
     locale: {
       type: 'string',
       description:
-        'Gets/Sets the locale used for formatting and displaying the dates in the component.',
+        'Gets/Sets the locale used for getting language, affecting resource strings.',
       control: 'text',
     },
   },
@@ -158,7 +158,7 @@ interface IgcCarouselArgs {
   maximumIndicatorsCount: number;
   /** The animation type. */
   animationType: 'slide' | 'fade' | 'none';
-  /** Gets/Sets the locale used for formatting and displaying the dates in the component. */
+  /** Gets/Sets the locale used for getting language, affecting resource strings. */
   locale: string;
 }
 type Story = StoryObj<IgcCarouselArgs>;

diff --git a/stories/chip.stories.ts b/stories/chip.stories.ts
@@ -54,7 +54,7 @@ const metadata: Meta<IgcChipComponent> = {
     locale: {
       type: 'string',
       description:
-        'Gets/Sets the locale used for formatting and displaying the dates in the component.',
+        'Gets/Sets the locale used for getting language, affecting resource strings.',
       control: 'text',
     },
   },
@@ -79,7 +79,7 @@ interface IgcChipArgs {
   selected: boolean;
   /** A property that sets the color variant of the chip component. */
   variant: 'primary' | 'info' | 'success' | 'warning' | 'danger';
-  /** Gets/Sets the locale used for formatting and displaying the dates in the component. */
+  /** Gets/Sets the locale used for getting language, affecting resource strings. */
   locale: string;
 }
 type Story = StoryObj<IgcChipArgs>;
@@ -94,7 +94,7 @@ const ChipTemplate = ({
   variant,
 }: IgcChipArgs) => html`
   <igc-chip
-    .disabled="${disabled}"
+    .disabled=${disabled}
     .removable=${removable}
     .selectable=${selectable}
     .selected=${selected}

diff --git a/stories/combo.stories.ts b/stories/combo.stories.ts
@@ -72,7 +72,7 @@ const metadata: Meta<IgcComboComponent> = {
     locale: {
       type: 'string',
       description:
-        'Gets/Sets the locale used for formatting and displaying the dates in the component.',
+        'Gets/Sets the locale used for getting language, affecting resource strings.',
       control: 'text',
     },
     label: {
@@ -192,7 +192,7 @@ interface IgcComboArgs {
   autofocus: boolean;
   /** Focuses the list of options when the menu opens. */
   autofocusList: boolean;
-  /** Gets/Sets the locale used for formatting and displaying the dates in the component. */
+  /** Gets/Sets the locale used for getting language, affecting resource strings. */
   locale: string;
   /** The label attribute of the control. */
   label: string;

diff --git a/stories/date-range-picker.stories.ts b/stories/date-range-picker.stories.ts
@@ -44,7 +44,11 @@ const metadata: Meta<IgcDateRangePickerComponent> = {
     },
   },
   argTypes: {
-    value: { type: 'DateRangeValue', control: 'date' },
+    value: {
+      type: 'DateRangeValue',
+      description: 'The value of the picker',
+      control: 'date',
+    },
     mode: {
       type: '"dropdown" | "dialog"',
       description:
@@ -133,7 +137,7 @@ const metadata: Meta<IgcDateRangePickerComponent> = {
     displayFormat: {
       type: 'string',
       description:
-        'Format to display the value in when not editing.\nDefaults to the input format if not set.',
+        'Format to display the value in when not editing.\nDefaults to the locale format if not set.',
       control: 'text',
     },
     inputFormat: {
@@ -289,6 +293,7 @@ const metadata: Meta<IgcDateRangePickerComponent> = {
 export default metadata;
 
 interface IgcDateRangePickerArgs {
+  /** The value of the picker */
   value: DateRangeValue;
   /** Determines whether the calendar is opened in a dropdown or a modal dialog */
   mode: 'dropdown' | 'dialog';
@@ -320,7 +325,7 @@ interface IgcDateRangePickerArgs {
   prompt: string;
   /**
    * Format to display the value in when not editing.
-   * Defaults to the input format if not set.
+   * Defaults to the locale format if not set.
    */
   displayFormat: string;
   /**
@@ -558,7 +563,7 @@ export const Slots: Story = {
         .max=${new Date(args.max)}
         .visibleMonths=${args.visibleMonths}
         ?use-two-inputs=${true}
-        ?use-predefined-ranges="${args.usePredefinedRanges}"
+        ?use-predefined-ranges=${args.usePredefinedRanges}
         ?disabled=${args.disabled}
         ?invalid=${args.invalid}
         ?readonly=${args.readOnly}

diff --git a/stories/date-time-input.stories.ts b/stories/date-time-input.stories.ts
@@ -51,7 +51,7 @@ const metadata: Meta<IgcDateTimeInputComponent> = {
     displayFormat: {
       type: 'string',
       description:
-        'Format to display the value in when not editing.\nDefaults to the input format if not set.',
+        'Format to display the value in when not editing.\nDefaults to the locale format if not set.',
       control: 'text',
     },
     spinLoop: {
@@ -151,7 +151,7 @@ interface IgcDateTimeInputArgs {
   max: Date;
   /**
    * Format to display the value in when not editing.
-   * Defaults to the input format if not set.
+   * Defaults to the locale format if not set.
    */
   displayFormat: string;
   /** Sets whether to loop over the currently spun segment. */

diff --git a/stories/file-input.stories.ts b/stories/file-input.stories.ts
@@ -34,6 +34,12 @@ const metadata: Meta<IgcFileInputComponent> = {
       options: ['string', 'Date'],
       control: 'text',
     },
+    locale: {
+      type: 'string',
+      description:
+        'Gets/Sets the locale used for getting language, affecting resource strings.',
+      control: 'text',
+    },
     multiple: {
       type: 'boolean',
       description:
@@ -111,6 +117,8 @@ export default metadata;
 interface IgcFileInputArgs {
   /** The value of the control. */
   value: string | Date;
+  /** Gets/Sets the locale used for getting language, affecting resource strings. */
+  locale: string;
   /**
    * The multiple attribute of the control.
    * Used to indicate that a file input allows the user to select more than one file.

diff --git a/stories/nav-drawer.stories.ts b/stories/nav-drawer.stories.ts
@@ -190,14 +190,12 @@ const createMiniContent = () => html`
 const createControlButtons = (position: string) => html`
   ${position === 'relative'
     ? html`
-        <igc-button @click="${handleToggle}">Toggle</igc-button>
-        <igc-button variant="outlined" @click="${handleClose}"
-          >Close</igc-button
-        >
+        <igc-button @click=${handleToggle}>Toggle</igc-button>
+        <igc-button variant="outlined" @click=${handleClose}>Close</igc-button>
       `
     : ''}
 
-  <igc-button variant="outlined" @click="${handleOpen}">Open</igc-button>
+  <igc-button variant="outlined" @click=${handleOpen}>Open</igc-button>
 `;
 
 // Main template function
@@ -211,11 +209,7 @@ const createTemplate = (options: {
     ${commonStyles}
 
     <div class="ig-scrollbar main">
-      <igc-nav-drawer
-        .open=${open}
-        .position=${position}
-        @click="${handleClick}"
-      >
+      <igc-nav-drawer .open=${open} .position=${position} @click=${handleClick}>
         ${createDrawerContent(
           options.headerText || 'Sample Drawer',
           options.itemCount

diff --git a/stories/tile-manager.stories.ts b/stories/tile-manager.stories.ts
@@ -363,7 +363,7 @@ const trendContent = (value: number, trend: number) => html`
   </style>
   <div class="trends">
     <h3>${value.toLocaleString()}</h3>
-    <h4 class="${trend > 0 ? 'increase' : 'decrease'}">
+    <h4 class=${trend > 0 ? 'increase' : 'decrease'}>
       ${trend.toLocaleString()}%
     </h4>
     <h6>vs previous year</h6>
@@ -396,7 +396,7 @@ const imageContent = (img: string) => html`
       }
     }
   </style>
-  <div class="picture"><img src="${img}" alt="picture" /></div>
+  <div class="picture"><img src=${img} alt="picture" /></div>
 `;
 
 const cardContent = () =>