Merge branch 'master' into mpopov/calendar/refactoring

Author: desig9stein

.github/workflows/gh-pages-deploy.yml

@@ -12,6 +12,7 @@ permissions:
 
 jobs:
   deploy:
+    if: "!contains(github.ref, '-alpha.') && !contains(github.ref, '-beta.') && !contains(github.ref, '-rc.')"
     environment:
       name: github-pages
       url: ${{ steps.build-publish.outputs.page_url }}

CHANGELOG.md

@@ -5,9 +5,22 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Added
+- #### Localization
+  - New localization implementation. Now you can set global localization for all localized Ignite UI components using the `registerI18n` and `setCurrentI18n` methods.
+  - Calendar, Date Input, Date Picker and Date Range Picker components now implement the new localization for formatting as well, which internally uses new implementation of the Intl.
+  - Added localization for Carousel, Chip, Combo, File Input and Tree. They now have `locale` and `resourceStrings` properties as well, which you can set to customize them individually.
+
 ### Fixed
 - #### Tooltip
   - Do not show tooltip when target is clicked [#1828](https://github.com/IgniteUI/igniteui-webcomponents/issues/1828)
+- #### Date input, Date picker, Date range picker
+  - Default display format now follows strictly locale format as per specification without leading zeros.
+
+## [6.3.6] - 2025-11-14
+### Fixed
+- #### Date picker
+  - Value not committed on browser auto-fill behavior [#1932](https://github.com/IgniteUI/igniteui-webcomponents/pull/1932)
 
 ## [6.3.5] - 2025-11-13
 ### Changed
@@ -1059,6 +1072,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[6.3.6]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.3.5...6.3.6
 [6.3.5]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.3.4...6.3.5
 [6.3.4]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.3.3...6.3.4
 [6.3.3]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.3.2...6.3.3

biome.json

@@ -30,7 +30,7 @@
         "noUnusedVariables": "error",
         "noUnusedFunctionParameters": "error",
         "noUnusedImports": "error",
-        "noUnusedPrivateClassMembers": "error",
+        "noUnusedPrivateClassMembers": "off",
         "useImportExtensions": {
           "level": "error",
           "options": { "forceJsExtensions": true }

package-lock.json

@@ -56,18 +56,18 @@
     "@floating-ui/dom": "^1.7.4",
     "@lit-labs/virtualizer": "^2.1.1",
     "@lit/context": "^1.1.6",
-    "igniteui-i18n-core": "0.6.0-alpha.4",
+    "igniteui-i18n-core": "0.7.0-alpha.8",
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "~2.3.5",
+    "@biomejs/biome": "~2.3.6",
     "@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.7",
-    "@storybook/addon-docs": "^10.0.7",
-    "@storybook/addon-links": "^10.0.7",
-    "@storybook/web-components-vite": "^10.0.7",
+    "@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",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
@@ -78,11 +78,11 @@
     "concurrently": "^9.2.1",
     "custom-element-jet-brains-integration": "^1.7.0",
     "custom-element-vs-code-integration": "^1.5.0",
-    "globby": "^15.0.0",
+    "globby": "^16.0.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^7.0.0",
-    "igniteui-i18n-resources": "0.6.0-alpha.4",
-    "igniteui-theming": "^22.1.0",
+    "igniteui-i18n-resources": "0.7.0-alpha.8",
+    "igniteui-theming": "^23.1.0",
     "keep-a-changelog": "^2.7.1",
     "lint-staged": "^16.2.6",
     "lit-analyzer": "^2.0.3",
@@ -94,7 +94,7 @@
     "rimraf": "^6.1.0",
     "sass-embedded": "~1.93.3",
     "sinon": "^21.0.0",
-    "storybook": "^10.0.7",
+    "storybook": "^10.0.8",
     "stylelint": "^16.25.0",
     "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-prettier": "^5.0.3",

package.json

@@ -86,10 +86,10 @@
     "lit": "^3.3.0"
   },
   "peerDependencies": {
-    "dompurify": "^3.2.0",
-    "marked": "^16.3.0",
+    "dompurify": "^3.3.0",
+    "marked": "^17.0.0",
     "marked-shiki": "^1.2.0",
-    "shiki": "^3.12.0"
+    "shiki": "^3.15.0"
   },
   "peerDependenciesMeta": {
     "dompurify": {

scripts/_package.json

@@ -56,4 +56,8 @@ $group-item-border-thickness: rem(1px);
             background: var-get($theme, 'item-selected-focus-background');
         }
     }
+
+    [part='toggle focused'] {
+        box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
+    }
 }

src/components/button-group/themes/shared/button/button.bootstrap.scss

@@ -51,7 +51,7 @@ $outlined-theme: $material-outlined;
     }
 
     &:active {
-        box-shadow: var-get($contained-theme, 'hover-elevation');
+        box-shadow: var-get($contained-theme, 'active-elevation');
     }
 }
 

src/components/button/themes/button/shared/button.material.scss

@@ -1,3 +1,4 @@
+import { getDateFormatter } from 'igniteui-i18n-core';
 import { html, nothing } from 'lit';
 import { property, query, queryAll, state } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
@@ -15,9 +16,7 @@ import {
   pageUpKey,
   shiftKey,
 } from '../common/controllers/key-bindings.js';
-import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { createDateTimeFormatters } from '../common/localization/intl-formatters.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
@@ -219,30 +218,21 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
   public formatOptions: Pick<Intl.DateTimeFormatOptions, 'month' | 'weekday'> =
     { month: 'long', weekday: 'narrow' };
 
-  private _intl = createDateTimeFormatters(this.locale, {
-    month: {
-      month: this.formatOptions.month,
-    },
-    monthLabel: { month: 'long' },
-    weekday: { weekday: 'short' },
-    monthDay: { month: 'short', day: 'numeric' },
-    yearLabel: { month: 'long', year: 'numeric' },
-  });
-
-  @watch('locale')
-  protected localeChange() {
-    this._intl.locale = this.locale;
-  }
-
-  @watch('formatOptions')
-  protected formatOptionsChange() {
-    this._intl.update({
-      month: {
-        month: this.formatOptions.month,
-      },
-    });
+  private get _monthOptions(): Intl.DateTimeFormatOptions {
+    return { month: this.formatOptions.month };
   }
 
+  private _monthLabelOptions: Intl.DateTimeFormatOptions = { month: 'long' };
+  private _weekdayOptions: Intl.DateTimeFormatOptions = { weekday: 'short' };
+  private _monthDayOptions: Intl.DateTimeFormatOptions = {
+    month: 'short',
+    day: 'numeric',
+  };
+  private _yearLabelOptions: Intl.DateTimeFormatOptions = {
+    month: 'long',
+    year: 'numeric',
+  };
+
   /** @private @hidden @internal */
   public async [focusActiveDate](options?: FocusOptions) {
     await this.updateComplete;
@@ -462,23 +452,34 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
     active: CalendarDay,
     viewIndex: number
   ) {
-    const labelFmt = this._intl.get('monthLabel').format;
-    const valueFmt = this._intl.get('month').format;
-    const ariaLabel = `${labelFmt(active.native)}, ${this.resourceStrings.selectMonth}`;
+    const label = getDateFormatter().formatDateTime(
+      active.native,
+      this.locale,
+      this._monthLabelOptions
+    );
+    const value = getDateFormatter().formatDateTime(
+      active.native,
+      this.locale,
+      this._monthOptions
+    );
+    const ariaLabel = `${label}, ${this.resourceStrings.selectMonth}`;
 
     return html`
       <button
         part="months-navigation"
         aria-label=${ariaLabel}
         @click=${() => this.switchToMonths(viewIndex)}
       >
-        ${valueFmt(active.native)}
+        ${value}
       </button>
     `;
   }
 
   protected renderYearButtonNavigation(active: CalendarDay, viewIndex: number) {
-    const fmt = this._intl.get('yearLabel').format;
+    const fmt = getDateFormatter().getIntlFormatter(
+      this.locale,
+      this._yearLabelOptions
+    ).format;
     const ariaLabel = `${active.year}, ${this.resourceStrings.selectYear}`;
     const ariaSkip = this._isDayView ? fmt(active.native) : active.year;
 
@@ -548,19 +549,30 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
 
   protected renderHeaderDateSingle() {
     const date = this.value ?? CalendarDay.today.native;
-    const day = this._intl.get('weekday').format(date);
-    const month = this._intl.get('monthDay').format(date);
+    const weekday = getDateFormatter().formatDateTime(
+      date,
+      this.locale,
+      this._weekdayOptions
+    );
+    const monthDay = getDateFormatter().formatDateTime(
+      date,
+      this.locale,
+      this._monthDayOptions
+    );
     const separator =
       this.headerOrientation === 'vertical' ? html`<br />` : ' ';
 
-    const formatted = html`${day},${separator}${month}`;
+    const formatted = html`${weekday},${separator}${monthDay}`;
 
     return html`<slot name="header-date">${formatted}</slot>`;
   }
 
   protected renderHeaderDateRange() {
     const values = this.values;
-    const fmt = this._intl.get('monthDay').format;
+    const fmt = getDateFormatter().getIntlFormatter(
+      this.locale,
+      this._monthDayOptions
+    ).format;
     const { startDate, endDate } = this.resourceStrings;
 
     const start = this._hasValues ? fmt(first(values)) : startDate;

src/components/calendar/calendar.ts

@@ -1,13 +1,12 @@
+import { getDateFormatter } from 'igniteui-i18n-core';
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-
 import { addThemingController } from '../../../theming/theming-controller.js';
 import { addKeybindings } from '../../common/controllers/key-bindings.js';
 import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';
 import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';
 import { watch } from '../../common/decorators/watch.js';
 import { registerComponent } from '../../common/definitions/register.js';
-import { createDateTimeFormatters } from '../../common/localization/intl-formatters.js';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
 import { partMap } from '../../common/part-map.js';
@@ -107,21 +106,17 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
   @property({ attribute: 'week-day-format' })
   public weekDayFormat: 'long' | 'short' | 'narrow' = 'narrow';
 
-  private _intl = createDateTimeFormatters(this.locale, {
-    weekday: { weekday: this.weekDayFormat },
-    label: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
-    ariaWeekday: { weekday: 'long' },
-  });
-
-  @watch('locale')
-  protected localeChange() {
-    this._intl.locale = this.locale;
+  private get _weekdayOptions(): Intl.DateTimeFormatOptions {
+    return { weekday: this.weekDayFormat };
   }
 
-  @watch('weekDayFormat')
-  protected weekDayFormatChange() {
-    this._intl.update({ weekday: { weekday: this.weekDayFormat } });
-  }
+  private _labelOptions: Intl.DateTimeFormatOptions = {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  };
+  private _ariaWeekdayOptions: Intl.DateTimeFormatOptions = { weekday: 'long' };
 
   @watch('weekStart')
   @watch('activeDate')
@@ -336,7 +331,10 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
   }
 
   private intlFormatDay(day: CalendarDay) {
-    const fmt = this._intl.get('label');
+    const fmt = getDateFormatter().getIntlFormatter(
+      this.locale,
+      this._labelOptions
+    );
 
     // Range selection in progress
     if (this._rangePreviewDate?.equalTo(day)) {
@@ -444,8 +442,14 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
   }
 
   protected renderHeaders() {
-    const label = this._intl.get('weekday');
-    const aria = this._intl.get('ariaWeekday');
+    const label = getDateFormatter().getIntlFormatter(
+      this.locale,
+      this._weekdayOptions
+    );
+    const aria = getDateFormatter().getIntlFormatter(
+      this.locale,
+      this._ariaWeekdayOptions
+    );
     const days = take(
       generateMonth(this._activeDate, this._firstDayOfWeek),
       daysInWeek