feat(esl-carousel): improve ESLCarouselNav mixin API and internal liv…

…ecycle

src/modules/esl-carousel/plugin/nav/esl-carousel.nav.mixin.ts

@@ -25,7 +25,7 @@ export class ESLCarouselNavMixin extends ESLMixinElement {
   static override is = 'esl-carousel-nav';
 
   /** {@link ESLCarouselSlideTarget} target to navigate in carousel */
-  @attr({name: ESLCarouselNavMixin.is}) public target: ESLCarouselSlideTarget;
+  @attr({name: ESLCarouselNavMixin.is}) public command: ESLCarouselSlideTarget;
 
   /** {@link ESLTraversingQuery} string to find {@link ESLCarousel} instance */
   @attr({
@@ -42,17 +42,15 @@ export class ESLCarouselNavMixin extends ESLMixinElement {
 
   /** @returns accessible target ID */
   public get targetID(): string {
-    return this.$carousel ? this.$carousel.$slidesArea.id : '';
+    return this.$carousel?.$slidesArea?.id || '';
   }
 
   @ready
-  public override async connectedCallback(): Promise<void> {
+  public override connectedCallback(): void {
+    super.connectedCallback();
     this.$$attr('disabled', true);
     if (!this.$carousel) return;
-    await customElements.whenDefined(this.$carousel.tagName.toLowerCase());
-    super.connectedCallback();
-    this._onSlideChange();
-    this.$$attr('aria-controls', this.targetID);
+    if (this.$carousel.renderer) this._onUpdate();
   }
 
   public override disconnectedCallback(): void {
@@ -62,19 +60,22 @@ export class ESLCarouselNavMixin extends ESLMixinElement {
 
   /** Handles carousel state changes */
   @listen({
-    event: `${ESLCarouselSlideEvent.AFTER} ${ESLCarouselChangeEvent.TYPE}`,
+    event: `${ESLCarouselChangeEvent.TYPE} ${ESLCarouselSlideEvent.AFTER}`,
     target: ($nav: ESLCarouselNavMixin) => $nav.$carousel
   })
-  protected _onSlideChange(): void {
-    const canNavigate = this.$carousel && this.$carousel.canNavigate(this.target);
-    this.$$attr('disabled', !canNavigate);
+  protected _onUpdate(): void {
+    const isActive = this.$carousel?.renderer && !this.$carousel.incomplete;
+    const isDisabled = !isActive || !this.$carousel.canNavigate(this.command);
+    this.$$attr('active', isActive);
+    this.$$attr('disabled', isDisabled);
+    this.$$attr('aria-controls', this.targetID);
   }
 
   /** Handles $host element click */
   @listen('click')
   protected _onClick(e: PointerEvent): void {
     if (!this.$carousel || typeof this.$carousel.goTo !== 'function') return;
-    this.$carousel.goTo(this.target);
+    this.$carousel.goTo(this.command).catch(console.error);
     e.preventDefault();
   }
 }