Merge branch 'master' into didimmova/fix-switch-thumb-hover

Author: didimmova

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -25,6 +25,7 @@ body:
         - Combo
         - Date-time input
         - Date picker
+        - Date range picker
         - Dialog
         - Dropdown
         - Expansion panel

CHANGELOG.md

@@ -4,6 +4,37 @@ 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/).
 
+## [6.2.0] - 2025-08-04
+### Added
+- Form associated custom elements now expose the **ig-invalid** custom state for styling with the `:state()` CSS selector.
+  [See here for additional information](https://developer.mozilla.org/en-US/docs/Web/CSS/:state)
+
+### Changed
+- Form associated custom elements validity behavior. Now elements will try to mimic `:user-invalid`, and won't apply invalid
+  styles unless interacted through the UI or through a form `requestSubmit()/reset()` invocation.
+
+### Fixed
+- #### All igc-input based components
+  - Invalid state in **readonly** mode [#1786](https://github.com/IgniteUI/igniteui-webcomponents/pull/1786)
+  - Cannot style **helper-text** parts [#1786](https://github.com/IgniteUI/igniteui-webcomponents/pull/1786)
+- #### Card
+  - Slotted igc-avatar in Indigo theme [#1795](https://github.com/IgniteUI/igniteui-webcomponents/pull/1795)
+- #### Combo
+  - Border overlaps label text in invalid state [#1786](https://github.com/IgniteUI/igniteui-webcomponents/pull/1786)
+- #### Date picker
+  - Indigo elevation styles [#1799](https://github.com/IgniteUI/igniteui-webcomponents/pull/1799)
+- #### Date range picker
+  - Return focus to main input on keyboard interactions [#1783](https://github.com/IgniteUI/igniteui-webcomponents/pull/1783)
+- #### Input
+  - Placeholder and label alignment in Material theme [#1792](https://github.com/IgniteUI/igniteui-webcomponents/pull/1792)
+- #### Navigation drawer
+  - Update *relative* positions styles and animation [#1806](https://github.com/IgniteUI/igniteui-webcomponents/pull/1806)
+- #### Select
+  - Invalid state theming issues [#1786](https://github.com/IgniteUI/igniteui-webcomponents/pull/1786)
+- #### Textarea
+  - Material theme interaction issues [#1797](https://github.com/IgniteUI/igniteui-webcomponents/pull/1797)
+  - Resizing behavior with suffix part [#1797](https://github.com/IgniteUI/igniteui-webcomponents/pull/1797)
+
 ## [6.1.2] - 2025-07-14
 ### Added
 - #### File input
@@ -953,6 +984,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[6.2.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.1.2...6.2.0
 [6.1.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.1.1...6.1.2
 [6.1.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.1.0...6.1.1
 [6.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.0.1...6.1.0

README.md

@@ -9,7 +9,7 @@
 [![npm version](https://badge.fury.io/js/igniteui-webcomponents.svg)](https://badge.fury.io/js/igniteui-webcomponents)
 [![Discord](https://img.shields.io/discord/836634487483269200?logo=discord&logoColor=ffffff)](https://discord.gg/39MjrTRqds)
 
-[Ignite UI for Web Components] is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. All components are based on the [Indigo.Design Design System] and are backed by ready-to-use UI kit for Figma.
+[Ignite UI for Web Components] is a comprehensive library that includes the fastest [Data Grid] on the market, a high-performing [Hierarchical Grid], Pivot Grid, 60+ data [Charts], [Dock Manager], and more. Plus maps, gauges and other reusable feature-rich components to help you create better web apps and modern-day UX experiences.
 
 See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
 
@@ -21,8 +21,12 @@ See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
 
 ## Overview
 
+<details open>
+<summary>Components</summary>
+
 | Components              | Status |         Documentation          | Released Version |
 | :---------------------- | :----: | :----------------------------: | :--------------: |
+| Date Range Picker       |   ✅   | [Docs][Date Range Picker Docs] |     [6.1.0]      |
 | Tooltip                 |   ✅   |      [Docs][Tooltip Docs]      |     [5.4.0]      |
 | File Input              |   ✅   |    [Docs][File Input Docs]     |     [5.4.0]      |
 | Tile Manager            |   ✅   |   [Docs][Tile Manager Docs]    |     [5.3.0]      |
@@ -69,6 +73,8 @@ See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
 | Ripple                  |   ✅   |      [Docs][Ripple Docs]       |     [1.0.0]      |
 | Switch                  |   ✅   |      [Docs][Switch Docs]       |     [1.0.0]      |
 
+</details>
+
 ## Components available in [Ignite UI for WebComponents Grids]
 
 | Components        | Status |         Documentation          |
@@ -198,6 +204,10 @@ npm run storybook:build
 [opera_48x48]: https://user-images.githubusercontent.com/2188411/168109520-b6865a6c-b69f-44a4-9948-748d8afd687c.png
 [safari_48x48]: https://user-images.githubusercontent.com/2188411/168109527-6c58f2cf-7386-4b97-98b1-cfe0ab4e8626.png
 [Contribution Guidelines]: https://github.com/IgniteUI/igniteui-webcomponents/blob/master/.github/CONTRIBUTING.md
+[Data Grid]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/data-grid
+[Hierarchical Grid]: https://www.infragistics.com/webcomponentssite/components/grids/hierarchical-grid/overview
+[Charts]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/chart-overview
+[Dock Manager]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/dock-manager
 [Pivot Grid Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/pivot-grid/overview
 [Data Grid Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/overview
 [Tree Grid Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree-grid/overview
@@ -245,6 +255,7 @@ npm run storybook:build
 [Tile Manager Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager
 [File Input Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/file-input
 [Tooltip Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/tooltip
+[Date Range Picker Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-range-picker
 [1.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0
 [2.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.0.0
 [2.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0
@@ -258,3 +269,4 @@ npm run storybook:build
 [5.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/5.1.0
 [5.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/5.3.0
 [5.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/5.4.0
+[6.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/6.1.0

src/components/common/util.ts

@@ -496,3 +496,10 @@ export function equal<T>(a: unknown, b: T, visited = new WeakSet()): boolean {
 export type RequiredProps<T, K extends keyof T> = T & {
   [P in K]-?: T[P];
 };
+
+export function setStyles(
+  element: HTMLElement,
+  styles: Partial<CSSStyleDeclaration>
+): void {
+  Object.assign(element.style, styles);
+}

src/components/nav-drawer/themes/container.base.scss

@@ -19,7 +19,7 @@
         inset-block: 0;
         z-index: 999;
         opacity: 1;
-        transition: transform ease-out .3s, .3s, opacity ease-out .3s, .3s;
+        transition: translate ease-out .3s, .3s, opacity ease-out .3s, .3s;
     }
 
     [part~='mini'] {
@@ -125,7 +125,7 @@
 :host(:not([open])[position='top']),
 :host(:not([open])[position='bottom']) {
     [part='base'] {
-        transform: translateY(-60vh);
+        translate: 0 -60vh;
     }
 
     [part='mini'] {
@@ -135,7 +135,7 @@
 
 :host(:not([open])[position='bottom']) {
     [part='base'] {
-        transform: translateY(60vh);
+        translate: 0 60vh;
     }
 }
 
@@ -161,7 +161,7 @@
 
 :host(:not([open])) {
     [part='base'] {
-        transform: translateX(calc(100% * var(--dir)));
+        translate: calc(100% * var(--dir)) 0;
         opacity: 0;
     }
 
@@ -170,3 +170,15 @@
         opacity: 0;
     }
 }
+
+:host([position='relative']:not([open])) {
+    [part='base'] {
+        opacity: 1;
+        overflow: hidden;
+    }
+
+    [part='main'] {
+        opacity: 0;
+    }
+}
+

src/components/nav-drawer/themes/shared/container/nav-drawer.common.scss

@@ -22,11 +22,23 @@ $background: var-get($theme, 'background') !default;
     box-shadow: var-get($theme, 'elevation');
 }
 
-[part~='base'],
-[part~='mini'] {
+:host([position='start']) [part~='base'],
+:host([position='start']) [part~='mini'] {
     border-inline-end-color: var-get($theme, 'border-color');
 }
 
+:host([position='end']) [part~='base'],
+:host([position='end']) [part~='mini'] {
+    border-inline-start-color: var-get($theme, 'border-color');
+}
+
+:host([position='relative']) {
+    [part~='base'],
+    [part~='mini'] {
+        border-inline-end-color: var-get($theme, 'border-color');
+    }
+}
+
 :host([open]:not([position='relative'])) {
     [part='base'] {
         box-shadow: var-get($theme, 'elevation');

src/components/popover/popover.spec.ts

@@ -16,7 +16,7 @@ async function waitForPaint(popover: IgcPopoverComponent) {
 }
 
 function getFloater(popover: IgcPopoverComponent) {
-  return popover.shadowRoot!.querySelector('#container') as HTMLElement;
+  return popover.renderRoot.querySelector('#container') as HTMLElement;
 }
 
 function togglePopover() {
@@ -173,7 +173,6 @@ describe('Popover', () => {
         const root = await fixture<HTMLElement>(createNonSlottedPopover(true));
         popover = root.querySelector('igc-popover') as IgcPopoverComponent;
         anchor = root.querySelector('#btn') as HTMLButtonElement;
-        // await waitForPaint(popover);
       });
 
       it('should render a component', async () => {