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

Author: rkaraivanov

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

package-lock.json

@@ -58,14 +58,14 @@
     "lit": "^3.3.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "~2.0.4",
+    "@biomejs/biome": "~2.0.6",
     "@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.12",
-    "@storybook/addon-docs": "^9.0.12",
-    "@storybook/addon-links": "^9.0.12",
-    "@storybook/web-components-vite": "^9.0.12",
+    "@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",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
@@ -78,7 +78,7 @@
     "custom-element-vs-code-integration": "^1.5.0",
     "globby": "^14.1.0",
     "husky": "^9.1.7",
-    "ig-typedoc-theme": "^6.2.0",
+    "ig-typedoc-theme": "^6.2.2",
     "igniteui-theming": "^19.0.0",
     "keep-a-changelog": "^2.6.2",
     "lint-staged": "^16.1.2",
@@ -87,11 +87,11 @@
     "node-watch": "^0.7.4",
     "playwright": "^1.53.1",
     "postcss": "^8.5.6",
-    "prettier": "^3.6.0",
+    "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
     "sass-embedded": "~1.78.0",
     "sinon": "^21.0.0",
-    "storybook": "^9.0.12",
+    "storybook": "^9.0.13",
     "stylelint": "^16.21.0",
     "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-prettier": "^5.0.3",

package.json

@@ -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/avatar/avatar.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/badge/badge.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/banner/banner.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/button-group.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-group/toggle-button.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-base.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>