Merge branch 'master' into bpachilova/date-range-picker

Author: ddaribo

CHANGELOG.md

@@ -7,14 +7,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 ### Added
 - New File Input Component(`igc-file-input`)
+- Exposed more public API type aliases for component property types like `ButtonVariant`, `PickerMode`, `StepperOrientation`, `HorizontalTransitionAnimation` (carousel and horizontal stepper) and more.
 
 ### Deprecated
-Some event argument types have been renamed for consistency:
-- `CheckboxChangeEventArgs` deprecated, use `IgcCheckboxChangeEventArgs` instead.
-- `RadioChangeEventArgs` deprecated, use `IgcRadioChangeEventArgs` instead.
-- `IgcRangeSliderValue` deprecated, use `IgcRangeSliderValueEventArgs` instead.
-- `IgcActiveStepChangingArgs` deprecated, use `IgcActiveStepChangingEventArgs` instead.
-- `IgcActiveStepChangedArgs` deprecated, use `IgcActiveStepChangedEventArgs` instead.
+- Some event argument types have been renamed for consistency:
+  - `CheckboxChangeEventArgs` deprecated, use `IgcCheckboxChangeEventArgs` instead.
+  - `RadioChangeEventArgs` deprecated, use `IgcRadioChangeEventArgs` instead.
+  - `IgcRangeSliderValue` deprecated, use `IgcRangeSliderValueEventArgs` instead.
+  - `IgcActiveStepChangingArgs` deprecated, use `IgcActiveStepChangingEventArgs` instead.
+  - `IgcActiveStepChangedArgs` deprecated, use `IgcActiveStepChangedEventArgs` instead.
+- Carousel Slide's `toggleAnimation` is now marked internal and deprecated for use in favor of parent Carousel's `select` method.
+- Stepper Step's `toggleAnimation` is now marked internal and deprecated for use in favor of parent Stepper's `navigateTo` method.
 
 ### Fixed
 - Setting validation properties on a pristine non-dirty form associated element does not apply invalid styles [#1632](https://github.com/IgniteUI/igniteui-webcomponents/issues/1632)

package-lock.json

@@ -79,7 +79,7 @@
     "globby": "^14.1.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.0.0",
-    "igniteui-theming": "^17.1.0",
+    "igniteui-theming": "^17.2.0",
     "keep-a-changelog": "^2.6.2",
     "lint-staged": "^15.5.1",
     "lit-analyzer": "^2.0.3",

package.json

@@ -5,6 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { AvatarShape } from '../types.js';
 import { styles } from './themes/avatar.base.css.js';
 import { styles as shared } from './themes/shared/avatar.common.css.js';
 import { all } from './themes/themes.js';
@@ -63,7 +64,7 @@ export default class IgcAvatarComponent extends LitElement {
    * @attr
    */
   @property({ reflect: true })
-  public shape: 'circle' | 'rounded' | 'square' = 'square';
+  public shape: AvatarShape = 'square';
 
   constructor() {
     super();

src/components/avatar/avatar.ts

@@ -4,7 +4,7 @@ import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import type { StyleVariant } from '../types.js';
+import type { BadgeShape, StyleVariant } from '../types.js';
 import { styles } from './themes/badge.base.css.js';
 import { styles as shared } from './themes/shared/badge.common.css.js';
 import { all } from './themes/themes.js';
@@ -50,7 +50,7 @@ export default class IgcBadgeComponent extends LitElement {
    * @attr
    */
   @property({ reflect: true })
-  public shape: 'rounded' | 'square' = 'rounded';
+  public shape: BadgeShape = 'rounded';
 
   constructor() {
     super();

src/components/badge/badge.ts

@@ -11,6 +11,7 @@ import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { findElementFromEventPath, last } from '../common/util.js';
+import type { ButtonGroupSelection, ContentOrientation } from '../types.js';
 import { styles } from './themes/group.base.css.js';
 import { all } from './themes/group.js';
 import { styles as shared } from './themes/shared/group/group.common.css.js';
@@ -91,14 +92,14 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin<
    * @attr
    */
   @property({ reflect: true })
-  public alignment: 'horizontal' | 'vertical' = 'horizontal';
+  public alignment: ContentOrientation = 'horizontal';
 
   /**
    * Controls the mode of selection for the button group.
    * @attr
    */
   @property({ reflect: false })
-  public selection: 'single' | 'single-required' | 'multiple' = 'single';
+  public selection: ButtonGroupSelection = 'single';
 
   /**
    * Gets/Sets the currently selected buttons (their values).

src/components/button-group/button-group.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { ButtonVariant } from '../types.js';
 import { IgcButtonBaseComponent } from './button-base.js';
 import { styles } from './themes/button/button.base.css.js';
 import { styles as shared } from './themes/button/shared/button.common.css.js';
@@ -37,7 +38,7 @@ export default class IgcButtonComponent extends IgcButtonBaseComponent {
    * @attr
    */
   @property({ reflect: true })
-  public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'contained';
+  public variant: ButtonVariant = 'contained';
 
   protected renderContent() {
     return html`

src/components/button/button.ts

@@ -10,6 +10,7 @@ import {
   registerIconFromText as registerIconFromText_impl,
   registerIcon as registerIcon_impl,
 } from '../icon/icon.registry.js';
+import type { IconButtonVariant } from '../types.js';
 import { IgcButtonBaseComponent } from './button-base.js';
 import { styles } from './themes/icon-button/icon-button.base.css.js';
 import { styles as shared } from './themes/icon-button/shared/icon-button.common.css.js';
@@ -58,7 +59,7 @@ export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
    * @attr
    */
   @property({ reflect: true })
-  public variant: 'flat' | 'contained' | 'outlined' = 'contained';
+  public variant: IconButtonVariant = 'contained';
 
   protected renderContent() {
     return html`

src/components/button/icon-button.ts

@@ -7,7 +7,11 @@ import { watch } from '../common/decorators/watch.js';
 import { first } from '../common/util.js';
 import { convertToDate, convertToDates, getWeekDayNumber } from './helpers.js';
 import { CalendarDay } from './model.js';
-import type { DateRangeDescriptor, WeekDays } from './types.js';
+import type {
+  CalendarSelection,
+  DateRangeDescriptor,
+  WeekDays,
+} from './types.js';
 
 @blazorIndirectRender
 @blazorDeepImport
@@ -105,7 +109,7 @@ export class IgcCalendarBaseComponent extends LitElement {
    * @attr selection
    */
   @property()
-  public selection: 'single' | 'multiple' | 'range' = 'single';
+  public selection: CalendarSelection = 'single';
 
   /**
    * Whether to show the week numbers.

src/components/calendar/base.ts

@@ -25,6 +25,16 @@ describe('Calendar Rendering', () => {
       await expect(calendar).shadowDom.to.be.accessible();
     });
 
+    it('passes the a11y audit when a week of hidden days is rendered - issue #1636', async () => {
+      const aprilFirst2025 = new CalendarDay({ year: 2025, month: 3, date: 1 });
+      calendar.activeDate = aprilFirst2025.native;
+      calendar.visibleMonths = 2;
+      await elementUpdated(calendar);
+
+      await expect(calendar).dom.to.be.accessible();
+      await expect(calendar).shadowDom.to.be.accessible();
+    });
+
     it('renders the calendar successfully', async () => {
       const today = CalendarDay.today.native;
       const day = new Intl.DateTimeFormat('en', { weekday: 'short' }).format(