Merge branch 'master' into apetrov/add-file-input-css-vars

Author: adrianptrv

CHANGELOG.md

@@ -4,6 +4,13 @@ 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.1] - 2025-06-25
+### Fixed
+- #### Dropdown
+  - Icon size in Bootstrap theme [#1755](https://github.com/IgniteUI/igniteui-webcomponents/pull/1755)
+- #### Input, File Input
+  - Label positioning and transition logic in Material theme [#1739](https://github.com/IgniteUI/igniteui-webcomponents/pull/1739) [#1753](https://github.com/IgniteUI/igniteui-webcomponents/pull/1753)
+
 ## [6.1.0] - 2025-06-12
 ### Added
 - Date Range Picker
@@ -924,6 +931,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[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
 [6.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.4.1...6.0.0

src/components/avatar/avatar.ts

@@ -1,7 +1,7 @@
 import { html, LitElement, nothing, type PropertyValues } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { AvatarShape } from '../types.js';
@@ -22,7 +22,6 @@ import { all } from './themes/themes.js';
  * @csspart image - The image wrapper of the avatar.
  * @csspart icon - The icon wrapper of the avatar.
  */
-@themes(all)
 export default class IgcAvatarComponent extends LitElement {
   public static readonly tagName = 'igc-avatar';
   public static override styles = [styles, shared];
@@ -70,6 +69,11 @@ export default class IgcAvatarComponent extends LitElement {
   @property({ reflect: true })
   public shape: AvatarShape = 'square';
 
+  constructor() {
+    super();
+    addThemingController(this, all);
+  }
+
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has('initials') || changedProperties.has('alt')) {
       this._internals.setARIA({

src/components/badge/badge.ts

@@ -1,6 +1,6 @@
 import { html, LitElement, type PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { BadgeShape, StyleVariant } from '../types.js';
@@ -18,7 +18,6 @@ import { all } from './themes/themes.js';
  *
  * @csspart base - The base wrapper of the badge.
  */
-@themes(all)
 export default class IgcBadgeComponent extends LitElement {
   public static readonly tagName = 'igc-badge';
   public static override styles = [styles, shared];
@@ -53,6 +52,11 @@ export default class IgcBadgeComponent extends LitElement {
   @property({ reflect: true })
   public shape: BadgeShape = 'rounded';
 
+  constructor() {
+    super();
+    addThemingController(this, all);
+  }
+
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has('variant')) {
       this._internals.setARIA({ ariaRoleDescription: `badge ${this.variant}` });

src/components/banner/banner.ts

@@ -4,7 +4,7 @@ import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 
 import { addAnimationController } from '../../animations/player.js';
 import { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -38,7 +38,6 @@ export interface IgcBannerComponentEventMap {
  * @csspart actions - The part that holds the banner action buttons.
  */
 
-@themes(all)
 export default class IgcBannerComponent extends EventEmitterMixin<
   IgcBannerComponentEventMap,
   Constructor<LitElement>
@@ -67,6 +66,8 @@ export default class IgcBannerComponent extends EventEmitterMixin<
   constructor() {
     super();
 
+    addThemingController(this, all);
+
     addInternalsController(this, {
       initialARIA: {
         role: 'status',

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

@@ -1,7 +1,7 @@
 import { html, LitElement } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import {
   createMutationController,
   type MutationControllerParams,
@@ -35,7 +35,6 @@ export interface IgcButtonGroupComponentEventMap {
  *
  * @csspart group - The button group container.
  */
-@themes(all)
 export default class IgcButtonGroupComponent extends EventEmitterMixin<
   IgcButtonGroupComponentEventMap,
   Constructor<LitElement>
@@ -134,6 +133,8 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin<
   constructor() {
     super();
 
+    addThemingController(this, all);
+
     createMutationController(this, {
       callback: this._observerCallback,
       filter: [IgcToggleButtonComponent.tagName],

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

@@ -1,8 +1,9 @@
 import { html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
+import { shadowOptions } from '../common/decorators/shadow-options.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
 import { styles } from './themes/button.base.css.js';
@@ -19,16 +20,11 @@ import { styles as shared } from './themes/shared/button/button.common.css.js';
  *
  * @csspart toggle - The native button element.
  */
-@themes(all)
+@shadowOptions({ delegatesFocus: true })
 export default class IgcToggleButtonComponent extends LitElement {
   public static override styles = [styles, shared];
   public static readonly tagName = 'igc-toggle-button';
 
-  public static override shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-
   /* blazorSuppress */
   public static register(): void {
     registerComponent(IgcToggleButtonComponent);
@@ -60,6 +56,11 @@ export default class IgcToggleButtonComponent extends LitElement {
   @property({ type: Boolean, reflect: true })
   public disabled = false;
 
+  constructor() {
+    super();
+    addThemingController(this, all);
+  }
+
   /* alternateName: focusComponent */
   /** Sets focus on the button. */
   public override focus(options?: FocusOptions): void {

src/components/button/button-base.ts

@@ -4,6 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
+import { shadowOptions } from '../common/decorators/shadow-options.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common//mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
@@ -17,17 +18,13 @@ export interface IgcButtonEventMap {
 }
 
 @blazorDeepImport
+@shadowOptions({ delegatesFocus: true })
 export abstract class IgcButtonBaseComponent extends EventEmitterMixin<
   IgcButtonEventMap,
   Constructor<LitElement>
 >(LitElement) {
   public static readonly formAssociated = true;
 
-  protected static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-
   protected readonly _internals = addInternalsController(this);
   private readonly _focusRingManager = addKeyboardFocusRing(this);
 

src/components/button/button.ts

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { ButtonVariant } from '../types.js';
 import { IgcButtonBaseComponent } from './button-base.js';
@@ -23,7 +23,6 @@ import { all } from './themes/button/themes.js';
  * @csspart prefix - The prefix container of the igc-button component.
  * @csspart suffix - The suffix container of the igc-button component.
  */
-@themes(all)
 export default class IgcButtonComponent extends IgcButtonBaseComponent {
   public static readonly tagName = 'igc-button';
   protected static styles = [styles, shared];
@@ -40,6 +39,11 @@ export default class IgcButtonComponent extends IgcButtonBaseComponent {
   @property({ reflect: true })
   public variant: ButtonVariant = 'contained';
 
+  constructor() {
+    super();
+    addThemingController(this, all);
+  }
+
   protected renderContent() {
     return html`
       <slot name="prefix"></slot>

src/components/button/icon-button.ts

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-import { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import { blazorInclude } from '../common/decorators/blazorInclude.js';
 import { registerComponent } from '../common/definitions/register.js';
 import IgcIconComponent from '../icon/icon.js';
@@ -22,7 +22,6 @@ import { all } from './themes/icon-button/themes.js';
  * @csspart base - The wrapping element of the icon button.
  * @csspart icon - The icon element of the icon button.
  */
-@themes(all)
 export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
   public static readonly tagName = 'igc-icon-button';
   protected static styles = [styles, shared];
@@ -61,6 +60,11 @@ export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
   @property({ reflect: true })
   public variant: IconButtonVariant = 'contained';
 
+  constructor() {
+    super();
+    addThemingController(this, all);
+  }
+
   protected renderContent() {
     return html`
       ${this.name || this.mirrored

src/components/calendar/calendar.ts

@@ -4,7 +4,7 @@ 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 { themes } from '../../theming/theming-decorator.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import {
   addKeybindings,
   arrowDown,
@@ -107,7 +107,6 @@ export const focusActiveDate = Symbol();
  * @csspart selected - Indicates selected state. Applies to date, month and year elements of the calendar.
  * @csspart current - Indicates current state. Applies to date, month and year elements of the calendar.
  */
-@themes(all)
 export default class IgcCalendarComponent extends EventEmitterMixin<
   IgcCalendarComponentEventMap,
   Constructor<IgcCalendarBaseComponent>
@@ -413,6 +412,8 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
   constructor() {
     super();
 
+    addThemingController(this, all);
+
     addKeybindings(this, {
       skip: this.isNotFromCalendarView,
       ref: this.contentRef,