Merge branch 'master' into rkaraivanov/combo-navigation-refactor

Author: rkaraivanov

.github/CONTRIBUTING.md

@@ -16,13 +16,13 @@ For detailed information on issue and pull request statuses, process for testing
 
 ## Set up
 
-You will need at least [Node >= 18.19.0](https://nodejs.org/en) installed on your machine.
+You will need at least [Node >= 20.19.0](https://nodejs.org/en) installed on your machine.
 
 Once you have the minimum Node version installed, you can continue with the rest of the repo setup.
 
 ```shell
 node -v
-v18.19.1
+v20.19.0
 
 git clone https://github.com/IgniteUI/igniteui-webcomponents.git
 cd igniteui-webcomponents

.github/workflows/node.js.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
+        node-version: [20.x, 22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -32,7 +32,7 @@ jobs:
     - run: npm run test
     - run: npm run check
     - name: Publish to coveralls.io
-      if: matrix.node-version == '18.x'
+      if: matrix.node-version == '20.x'
       uses: coverallsapp/github-action@v2
       with:
           github-token: ${{ github.token }}

.github/workflows/npm-publish.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'npm'
           registry-url: 'https://registry.npmjs.org'
       - run: echo "VERSION=${GITHUB_REF/refs\/tags\//}" >> $GITHUB_ENV

CHANGELOG.md

@@ -4,10 +4,24 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## [Unreleased]
+## [5.3.0] - 2025-03-13
 ### Added
+- Tile manager component [#1402](https://github.com/IgniteUI/igniteui-webcomponents/pull/1402)
 - #### List
-  - The `igc-list-item` component exposes a new `selected` property. When set on a list item, the item will become visually highlighted.
+  - The `igc-list-item` component exposes a new `selected` property. When set on a list item, the item will become visually highlighted [#1590](https://github.com/IgniteUI/igniteui-webcomponents/pull/1590)
+
+### Changed
+- #### Progressbar
+  - Use theme schemas [#1582](https://github.com/IgniteUI/igniteui-webcomponents/pull/1582)
+
+### Fixed
+- #### Calendar
+  - Days row height for Fluent and Bootstrap themes [#1597](https://github.com/IgniteUI/igniteui-webcomponents/pull/1597)
+  - Disabled date text color in range preview for Material and Indigo themes [#1595](https://github.com/IgniteUI/igniteui-webcomponents/pull/1595)
+- #### Chip
+  - Improved responsive layout styles [#1588](https://github.com/IgniteUI/igniteui-webcomponents/pull/1588)
+- #### Combo
+  - Improved toggle button visual states [#1580](https://github.com/IgniteUI/igniteui-webcomponents/pull/1580)
 
 ## [5.2.4] - 2025-02-24
 ### Changed
@@ -704,6 +718,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[5.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.2.4...5.3.0
 [5.2.4]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.2.3...5.2.4
 [5.2.3]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.2.2...5.2.3
 [5.2.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.2.1...5.2.2

package-lock.json

@@ -79,7 +79,7 @@
     "globby": "^14.1.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.0.0",
-    "igniteui-theming": "^16.0.0",
+    "igniteui-theming": "^16.1.0",
     "keep-a-changelog": "^2.6.1",
     "lint-staged": "^15.4.3",
     "lit-analyzer": "^2.0.3",

package.json

@@ -8,7 +8,7 @@ import {
   getVsCodeCssCustomData,
   getVsCodeHtmlCustomData,
 } from 'custom-element-vs-code-integration';
-import customElements from '../custom-elements.json' assert { type: 'json' };
+import customElements from '../custom-elements.json' with { type: 'json' };
 import report from './report.mjs';
 import { buildComponents, buildThemes } from './sass.mjs';
 

scripts/build.mjs

@@ -85,3 +85,19 @@ export function addAnimationController(
 ) {
   return new AnimationController(host, target);
 }
+
+type ViewTransitionResult = {
+  transition?: ViewTransition;
+};
+
+export function startViewTransition(
+  callback?: ViewTransitionUpdateCallback
+): ViewTransitionResult {
+  /* c8 ignore next 4 */
+  if (getPrefersReducedMotion() || !document.startViewTransition) {
+    callback?.();
+    return {};
+  }
+
+  return { transition: document.startViewTransition(callback) };
+}

src/animations/player.ts

@@ -20,7 +20,16 @@ $border-size: rem(1px);
 
 [part~='days-row'][part~='first'] {
     background: var-get($theme, 'header-background');
-    border-bottom: rem(1px) solid var-get($theme, 'border-color');
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        inset-block-start: 100%;
+        height: rem(1px);
+        background: var-get($theme, 'border-color');
+    }
 }
 
 [part~='week-number'] {
@@ -37,7 +46,6 @@ $border-size: rem(1px);
 
     &::after {
         width: var-get($theme, 'size');
-        height: calc(var-get($theme, 'size') / 2);
         inset-block-end: 100%;
         background: var-get($theme, 'week-number-background');
     }
@@ -73,6 +81,8 @@ $border-size: rem(1px);
 
 [part~='date'] {
     height: var-get($theme, 'size');
+    border-top: $border-size solid transparent;
+    border-bottom: $border-size solid transparent;
 
     &[part~='range'],
     &[part~='range'][part~='preview'] {
@@ -121,12 +131,6 @@ $border-size: rem(1px);
     }
 }
 
-[part~='date'],
-[part~='week-number'] {
-    border-top: $border-size solid transparent;
-    border-bottom: $border-size solid transparent;
-}
-
 [part~='date-inner'] {
     width: var-get($theme, 'size');
     height: var-get($theme, 'size');

src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss

@@ -11,26 +11,23 @@ $row-gap: rem(6px);
 
 [part~='date'] {
     height: var-get($theme, 'size');
+    border-top: $border-size solid transparent;
+    border-bottom: $border-size solid transparent;
 }
 
 [part~='date'],
 [part~='date-inner'] {
     border-radius: var-get($theme, 'date-border-radius');
 }
 
-[part~='date'],
-[part~='week-number'] {
-    border-top: $border-size solid transparent;
-    border-bottom: $border-size solid transparent;
-}
-
 [part~='date-inner'],
 [part~='week-number-inner'] {
     border: $border-size solid transparent;
 }
 
 [part~='week-number'] {
     width: var-get($theme, 'size');
+    height: var-get($theme, 'size');
 }
 
 [part~='week-number-inner'] {
@@ -43,7 +40,6 @@ $row-gap: rem(6px);
 
     &::after {
         width: var-get($theme, 'size');
-        height: calc(var-get($theme, 'size') / 2);
         background: var-get($theme, 'week-number-background');
         border-inline-start: rem(1px) solid var-get($theme, 'week-number-background');
         border-inline-end: rem(1px) solid var-get($theme, 'week-number-background');