fix(carousel): improve carousel context handling with async context

src/components/carousel/carousel-slide.ts

@@ -1,9 +1,9 @@
-import { consume } from '@lit/context';
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { EaseInOut } from '../../animations/easings.js';
 import { addAnimationController } from '../../animations/player.js';
 import { carouselContext } from '../common/context.js';
+import { createAsyncContext } from '../common/controllers/async-consumer.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { formatString } from '../common/util.js';
@@ -38,8 +38,7 @@ export default class IgcCarouselSlideComponent extends LitElement {
 
   private readonly _player = addAnimationController(this);
 
-  @consume({ context: carouselContext, subscribe: true })
-  private readonly _carousel?: IgcCarouselComponent;
+  private _carousel?: IgcCarouselComponent;
 
   protected get _index(): number {
     return this._carousel ? this._carousel.slides.indexOf(this) : 0;
@@ -74,6 +73,15 @@ export default class IgcCarouselSlideComponent extends LitElement {
   @property({ type: Boolean, reflect: true })
   public previous = false;
 
+  constructor() {
+    super();
+
+    // Set carousel reference once provider is ready (addresses Blazor timing issue)
+    createAsyncContext(this, carouselContext, (carousel) => {
+      this._carousel = carousel;
+    });
+  }
+
   /**
    * @hidden @internal
    * @deprecated since 5.4.0. Use Carousel's `select` method instead.

src/components/carousel/carousel.ts

@@ -145,6 +145,10 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     initialValue: this,
   });
 
+  private _setCarouselContext(): void {
+    this._context.setValue(this, true);
+  }
+
   @queryAll(IgcCarouselIndicatorComponent.tagName)
   private readonly _defaultIndicators!: NodeListOf<IgcCarouselIndicatorComponent>;
 
@@ -350,7 +354,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   @watch('slidesLabelFormat')
   @watch('indicatorsLabelFormat')
   protected _contextChanged(): void {
-    this._context.setValue(this, true);
+    this._setCarouselContext();
   }
 
   @watch('interval')
@@ -421,6 +425,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
 
   protected override async firstUpdated(): Promise<void> {
     await this.updateComplete;
+    this._setCarouselContext();
 
     if (!isEmpty(this._slides)) {
       this._activateSlide(