Merge branch 'master' into bpachilova/range-editable-date-input

Author: ddaribo

CHANGELOG.md

@@ -4,6 +4,28 @@ 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.1.2] - 2025-07-14
+### Added
+- #### File input
+  - Exposed CSS variables for styling most of the Shadow DOM parts [#1747](https://github.com/IgniteUI/igniteui-webcomponents/pull/1747)
+
+### Fixed
+- #### Calendar
+  - Vertical mode container paddings [#1775](https://github.com/IgniteUI/igniteui-webcomponents/pull/1775)
+- #### Carousel
+  - Pause automatic rotation on pointer-initiated focus [#1731](https://github.com/IgniteUI/igniteui-webcomponents/issues/1731)
+  - Ensure `igcSlideChanged` event is emitted when a slide is changed [#1772](https://github.com/IgniteUI/igniteui-webcomponents/issues/1772)
+- #### Date picker
+  - Styling issues [#1765](https://github.com/IgniteUI/igniteui-webcomponents/pull/1765)
+- #### Date range picker
+  - CSS borders and elevation [#1764](https://github.com/IgniteUI/igniteui-webcomponents/pull/1764)
+- #### File input
+  - Bootstrap invalid box-shadow styles [#1747](https://github.com/IgniteUI/igniteui-webcomponents/pull/1747)
+- #### Stepper
+  - Error when setting linear property in deferred rendering scenarios [#1672](https://github.com/IgniteUI/igniteui-webcomponents/pull/1672)
+- #### Textarea
+  - Readonly state styles [#1768](https://github.com/IgniteUI/igniteui-webcomponents/pull/1768)
+
 ## [6.1.1] - 2025-06-25
 ### Fixed
 - #### Dropdown
@@ -931,6 +953,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[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
 [6.0.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.0.0...6.0.1

package-lock.json

@@ -52,20 +52,20 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.1",
-    "@lit-labs/virtualizer": "^2.1.0",
-    "@lit/context": "^1.1.5",
-    "lit": "^3.3.0"
+    "@floating-ui/dom": "^1.7.2",
+    "@lit-labs/virtualizer": "^2.1.1",
+    "@lit/context": "^1.1.6",
+    "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "~2.0.6",
+    "@biomejs/biome": "~2.1.1",
     "@custom-elements-manifest/analyzer": "^0.10.4",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^9.0.13",
-    "@storybook/addon-docs": "^9.0.13",
-    "@storybook/addon-links": "^9.0.13",
-    "@storybook/web-components-vite": "^9.0.13",
+    "@storybook/addon-a11y": "^9.0.16",
+    "@storybook/addon-docs": "^9.0.16",
+    "@storybook/addon-links": "^9.0.16",
+    "@storybook/web-components-vite": "^9.0.16",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
@@ -79,20 +79,20 @@
     "globby": "^14.1.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.2.2",
-    "igniteui-theming": "^19.0.0",
+    "igniteui-theming": "^19.1.2",
     "keep-a-changelog": "^2.6.2",
     "lint-staged": "^16.1.2",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
-    "playwright": "^1.53.1",
+    "playwright": "^1.54.1",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
     "sass-embedded": "~1.78.0",
     "sinon": "^21.0.0",
-    "storybook": "^9.0.13",
-    "stylelint": "^16.21.0",
+    "storybook": "^9.0.16",
+    "stylelint": "^16.21.1",
     "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-prettier": "^5.0.3",
     "stylelint-scss": "^6.12.1",
@@ -101,7 +101,7 @@
     "typedoc": "~0.27.9",
     "typedoc-plugin-localization": "^3.0.6",
     "typescript": "^5.8.3",
-    "vite": "^6.3.5"
+    "vite": "^7.0.4"
   },
   "browserslist": [
     "defaults"

package.json

@@ -110,3 +110,5 @@ export function startViewTransition(
 
   return { transition: document.startViewTransition(callback) };
 }
+
+export type { AnimationController };

src/animations/player.ts

@@ -140,19 +140,13 @@ describe('Calendar Rendering', () => {
       expect(last.children.item(6)?.part.contains('hidden')).to.be.true;
     });
 
-    it('should change orientation', async () => {
-      const dom = getCalendarDOM(calendar);
-
-      expect(
-        getComputedStyle(dom.content).getPropertyValue('flex-direction')
-      ).to.equal('row');
-
+    it('should set vertical orientation part', async () => {
       calendar.orientation = 'vertical';
       await elementUpdated(calendar);
 
-      expect(
-        getComputedStyle(dom.content).getPropertyValue('flex-direction')
-      ).to.equal('column');
+      const dom = getCalendarDOM(calendar);
+      expect(dom.content).to.exist;
+      expect(dom.content.part.contains('content-vertical')).to.be.true;
     });
 
     it('successfully enables and disables `hideHeader`', async () => {

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

@@ -2,8 +2,6 @@ import { html, nothing } from 'lit';
 import { property, query, queryAll, state } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 import { createRef, type Ref, ref } from 'lit/directives/ref.js';
-import { styleMap } from 'lit/directives/style-map.js';
-
 import { addThemingController } from '../../theming/theming-controller.js';
 import {
   addKeybindings,
@@ -74,6 +72,7 @@ export const focusActiveDate = Symbol();
  * @csspart header-title - The header title element of the calendar.
  * @csspart header-date - The header date element of the calendar.
  * @csspart content - The content element which contains the views and navigation elements of the calendar.
+ * @csspart content-vertical - The content element which contains the views and navigation elements of the calendar in vertical orientation.
  * @csspart navigation - The navigation container element of the calendar.
  * @csspart months-navigation - The months navigation button element of the calendar.
  * @csspart years-navigation - The years navigation button element of the calendar.
@@ -610,7 +609,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
             @igcActiveDateChange=${this.activeDateChanged}
             @igcRangePreviewDateChange=${this.rangePreviewDateChanged}
             part="days-view"
-            exportparts="days-row, label, date-inner, week-number-inner, week-number, date, first, last, selected, inactive, hidden, current, weekend, range, special, disabled, single, preview"
+            exportparts="days-row, label, date-inner, week-number-inner, week-number, date, first, last, selected, inactive, hidden, current, content-vertical, weekend, range, special, disabled, single, preview"
             .active=${this.activeDaysViewIndex === idx}
             .activeDate=${date.native}
             .disabledDates=${this.disabledDates}
@@ -663,17 +662,14 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
   }
 
   protected override render() {
-    const direction = this._isDayView && this.orientation === 'horizontal';
-
-    const styles = {
-      display: 'flex',
-      flexGrow: 1,
-      flexDirection: direction ? 'row' : 'column',
+    const parts = {
+      content: true,
+      'content-vertical': this._isDayView && this.orientation === 'vertical',
     };
 
     return html`
       ${this.renderHeader()}
-      <div ${ref(this.contentRef)} part="content" style=${styleMap(styles)}>
+      <div ${ref(this.contentRef)} part=${partMap(parts)}>
         ${choose(this.activeView, [
           ['days', () => this.renderDaysView()],
           ['months', () => this.renderMonthView()],

src/components/calendar/calendar.ts

@@ -76,7 +76,7 @@ export function getCalendarDOM(element: IgcCalendarComponent) {
       },
     },
     get content() {
-      return root.querySelector<HTMLElement>('[part="content"]')!;
+      return root.querySelector<HTMLElement>('[part~="content"]')!;
     },
     views: {
       get days() {

src/components/calendar/helpers.spec.ts

@@ -139,12 +139,18 @@
     padding: rem(16px);
 }
 
-[part='content'] {
+[part~='content'] {
+    display: flex;
+    flex-grow: 1;
     border-radius: inherit;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 }
 
+[part~='content-vertical'] {
+    flex-direction: column;
+}
+
 [part='header-date'],
 [part='header-title'] {
     margin: 0;

src/components/calendar/themes/calendar.base.scss

@@ -13,7 +13,7 @@ $theme: $bootstrap;
     border-radius: var-get($theme, 'border-radius');
 }
 
-:host(igc-calendar:not([orientation='vertical'])) {
+[part~='content']:not([part~='content-vertical']) {
     [part='days-view-container'] + [part='days-view-container'] {
         [part='navigation'],
         igc-days-view::part(days-row) {

src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss

@@ -13,7 +13,7 @@ $theme: $fluent;
     border-radius: var-get($theme, 'border-radius');
 }
 
-:host(igc-calendar:not([orientation='vertical'])) {
+[part~='content']:not([part~='content-vertical']) {
     [part='days-view-container'] + [part='days-view-container'] {
         [part='navigation'],
         igc-days-view {