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

Author: IMinchev64

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,29 +38,44 @@ export default class IgcCarouselSlideComponent extends LitElement {
 
   private readonly _player = addAnimationController(this);
 
-  @consume({ context: carouselContext, subscribe: true })
-  private readonly _carousel?: IgcCarouselComponent;
+  private _carousel?: IgcCarouselComponent;
+
+  private readonly _context = createAsyncContext(
+    this,
+    carouselContext,
+    (carousel) => {
+      this._carousel = carousel;
+    }
+  );
+
+  private get _carouselInstance(): IgcCarouselComponent | undefined {
+    return this._carousel ?? this._context.value;
+  }
 
   protected get _index(): number {
-    return this._carousel ? this._carousel.slides.indexOf(this) : 0;
+    return this._carouselInstance
+      ? this._carouselInstance.slides.indexOf(this)
+      : 0;
   }
 
   protected get _total(): number {
-    return this._carousel ? this._carousel.slides.length : 0;
+    return this._carouselInstance ? this._carouselInstance.slides.length : 0;
   }
 
   protected get _animation() {
-    const animation = this._carousel?.animationType ?? 'slide';
+    const animation = this._carouselInstance?.animationType ?? 'slide';
 
     if (animation === 'slide') {
-      return this._carousel?.vertical ? 'slideVer' : 'slideHor';
+      return this._carouselInstance?.vertical ? 'slideVer' : 'slideHor';
     }
 
     return animation;
   }
 
   protected get _labelFormat(): string {
-    return this._carousel ? this._carousel.slidesLabelFormat : '';
+    return this._carouselInstance
+      ? this._carouselInstance.slidesLabelFormat
+      : '';
   }
 
   /**

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(