style(esl-carousel): apply cosmetic updates from code review

Co-authored-by: Dmitry Shovchko <dshovchko@exadel.com>
Co-authored-by: alesun <alesun@exadel.com>

src/modules/esl-carousel/core/esl-carousel.events.ts

@@ -10,7 +10,7 @@ export interface ESLCarouselSlideEventInit {
   related: number;
   /** Direction of slide animation */
   direction: ESLCarouselDirection;
-  /** Auxiliary request attribute that represents object that initiate slide change */
+  /** Auxiliary request attribute that represents object that initiates slide change */
   activator?: any;
 }
 
@@ -50,9 +50,9 @@ interface ESLCarouselChangeEventInit {
   config: ESLCarouselStaticState;
   /** Previous {@link ESLCarousel} instance config */
   oldConfig?: ESLCarouselStaticState;
-  /** A list of {@link ESLCarouselSlide}s that have added to the current carousel instance */
+  /** A list of {@link ESLCarouselSlide}s that has been added to the current carousel instance */
   added: ESLCarouselSlide[];
-  /** A list of {@link ESLCarouselSlide}s that have removed from the current carousel instance */
+  /** A list of {@link ESLCarouselSlide}s that has been removed from the current carousel instance */
   removed: ESLCarouselSlide[];
 }
 

src/modules/esl-carousel/core/esl-carousel.renderer.ts

@@ -48,12 +48,12 @@ export abstract class ESLCarouselRenderer implements ESLCarouselConfig {
     return {type, size, count, loop, vertical};
   }
 
-  /** @returns {@link ESLCarousel} `$slideArea` */
+  /** @returns {@link ESLCarousel} `$slidesArea` */
   public get $area(): HTMLElement {
     return this.$carousel.$slidesArea;
   }
 
-  /** @returns {@link ESLCarousel} `$slideArea` */
+  /** @returns {@link ESLCarousel} `$slides` */
   public get $slides(): ESLCarouselSlide[] {
     return this.$carousel.$slides || [];
   }
@@ -85,7 +85,7 @@ export abstract class ESLCarouselRenderer implements ESLCarouselConfig {
   public onUnbind(): void {}
   /** Processes drawing of the carousel {@link ESLCarousel}. */
   public redraw(): void {}
-  /** Process slide change process */
+  /** Processes changing slides */
   public async navigate(index: number, direction: ESLCarouselDirection, {activator}: ESLCarouselActionParams): Promise<void> {
     const {activeIndex, activeIndexes} = this.$carousel;
 
@@ -120,7 +120,7 @@ export abstract class ESLCarouselRenderer implements ESLCarouselConfig {
 
   /** Handles the slides transition. */
   public abstract onMove(offset: number): void;
-  /** Ends current transition and make permanent all changes performed in the transition. */
+  /** Ends current transition and makes permanent all changes performed in the transition. */
   public abstract commit(offset?: number): void;
 
   /** Sets active slides from passed index **/
@@ -179,7 +179,7 @@ export class ESLCarouselRendererRegistry extends SyntheticEventTarget {
   }
 
   public register(view: ESLCarouselRendererConstructor): void {
-    if (!view || !view.is) throw Error('[ESL]: CarouselRendererRegistry] incorrect registration request');
+    if (!view || !view.is) throw Error('[ESL]: CarouselRendererRegistry: incorrect registration request');
     if (this.store.has(view.is)) throw Error(`View with name ${view.is} already defined`);
     this.store.set(view.is, view);
     const detail = {name: view.is, view};

src/modules/esl-carousel/core/esl-carousel.slide.ts

@@ -58,36 +58,36 @@ export class ESLCarouselSlide extends ESLBaseElement {
 
   /** @returns next slide sibling. */
   public get $next(): ESLCarouselSlide {
-    return findNext(this, (this.constructor as typeof ESLCarouselSlide).is) as ESLCarouselSlide;
+    return findNext(this, this.baseTagName) as ESLCarouselSlide;
   }
   /** @returns prev slide sibling. */
   public get $prev(): ESLCarouselSlide {
-    return findPrev(this, (this.constructor as typeof ESLCarouselSlide).is) as ESLCarouselSlide;
+    return findPrev(this, this.baseTagName) as ESLCarouselSlide;
   }
 
   /** @returns next slide sibling (uses cyclic find). */
   public get $nextCyclic(): ESLCarouselSlide {
-    return findNextLooped(this, (this.constructor as typeof ESLCarouselSlide).is) as ESLCarouselSlide;
+    return findNextLooped(this, this.baseTagName) as ESLCarouselSlide;
   }
   /** @returns previous slide sibling (uses cyclic find). */
   public get $prevCyclic(): ESLCarouselSlide {
-    return findPrevLooped(this, (this.constructor as typeof ESLCarouselSlide).is) as ESLCarouselSlide;
+    return findPrevLooped(this, this.baseTagName) as ESLCarouselSlide;
   }
 
   /** Updates initial A11y attributes */
   protected updateA11y(): void {
-    this.setAttribute('role', 'listitem');
+    this.$$attr('role', 'listitem');
     if (!this.hasAttribute('aria-roledescription')) {
-      this.setAttribute('aria-roledescription', 'slide');
+      this.$$attr('aria-roledescription', 'slide');
     }
     if (!this.hasAttribute('aria-label')) {
-      this.setAttribute('aria-label', `carousel item ${this.index + 1}`);
+      this.$$attr('aria-label', `carousel item ${this.index + 1}`);
     }
     this.updateActiveStateA11y();
   }
   /** Updates A11y attributes related to active state */
   protected updateActiveStateA11y(): void {
-    this.setAttribute('aria-hidden', String(!this.active));
+    this.$$attr('aria-hidden', String(!this.active));
     if (!this.$carousel?.hasAttribute(ESLCarouselSlide.NO_INERT_MARKER)) {
       this.toggleAttribute('inert', !this.active);
     }
@@ -100,7 +100,7 @@ export class ESLCarouselSlide extends ESLBaseElement {
     this.$carousel?.focus({preventScroll: true});
   }
 
-  /** Creates slide element, use passed content as slide inner */
+  /** Creates slide element, uses passed content as slide inner */
   public static override create(content?: HTMLElement | DocumentFragment): ESLCarouselSlide {
     const $slide = super.create() as ESLCarouselSlide;
     if (content) $slide.appendChild(content);

src/modules/esl-carousel/core/esl-carousel.ts

@@ -208,7 +208,7 @@ export class ESLCarousel extends ESLBaseElement {
     return this.closest(`[${ESLCarousel.is}-container]`);
   }
 
-  /** @returns slides carousel area */
+  /** @returns carousel slides area */
   @memoize()
   public get $slidesArea(): HTMLElement {
     const $provided = this.querySelector('[data-slides-area]');