feat(carousel): add dot-appearance attribute

Author: zedix

src/components/carousel/carousel.component.ts

@@ -22,7 +22,7 @@ import { dispatchEvent } from '../../internals/event.js';
  * @csspart button-dot - Any dot navigation button.
  * @csspart footer - The footer of the carousel.
  *
- * @cssproperty --button-background-color - The background color of next/prev buttons.
+ * @cssproperty --button-background-color - The background color of next/previous buttons.
  * @customElement cb-carousel
  *
  * Resources:
@@ -151,7 +151,10 @@ export default class Carousel extends LitElement {
   @property({ type: Boolean, attribute: 'with-fullscreen' })
   withFullscreen = false;
 
-  @query('.button-prev') previousBtn!: HTMLButtonElement;
+  @property({ type: String, attribute: 'dot-appearance' })
+  dotAppearance: 'circle' | 'bar' = 'bar';
+
+  @query('.button-previous') previousBtn!: HTMLButtonElement;
   @query('.button-next') nextBtn!: HTMLButtonElement;
   @query('.container') container!: HTMLSlotElement;
   @queryAll('.dot') dotNodes!: HTMLButtonElement[];
@@ -249,7 +252,9 @@ export default class Carousel extends LitElement {
       const previous = this.embla.previousScrollSnap();
       const selected = this.embla.selectedScrollSnap();
       this.dotNodes[previous]?.classList.remove('dot--selected');
+      this.dotNodes[previous]?.removeAttribute('aria-selected');
       this.dotNodes[selected]?.classList.add('dot--selected');
+      this.dotNodes[selected]?.setAttribute('aria-selected', 'true');
     }
   }
 
@@ -363,12 +368,12 @@ export default class Carousel extends LitElement {
 
   renderNextPrevButtons() {
     return html`<div class="buttons">
-      <button part="button button-prev" class="button button-prev" type="button">
+      <button part="button button-previous" class="button button-previous" type="button">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 512 512"
           fill="currentColor"
-          part="button-icon button-icon-prev"
+          part="button-icon button-icon-previous"
         >
           <path
             d="M7 239c-9.4 9.4-9.4 24.6 0 33.9L175 441c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L81.9 280 488 280c13.3 0 24-10.7 24-24s-10.7-24-24-24L81.9 232 209 105c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239z"
@@ -399,13 +404,14 @@ export default class Carousel extends LitElement {
         </div>
         ${this.withFullscreen ? this.renderFullscreenButton() : ''} ${this.renderNextPrevButtons()}
         ${this.withDots
-          ? html`<div class="dots">
+          ? html`<div class="dots" part="dots" role="tablist">
               ${map(this.embla.scrollSnapList(), (_, index) => {
                 return html`<button
                   part="button-dot"
                   type="button"
-                  class="dot"
-                  aria-label="${index + 1}"
+                  role="tab"
+                  class="dot dot--${this.dotAppearance}"
+                  aria-label="Go to slide ${index + 1}"
                   data-index="${index}"
                   @click=${this.handleDotClick}
                 >

src/components/carousel/carousel.stories.ts

@@ -137,6 +137,21 @@ export const WithDots: Story = {
         `,
       )}
     </zx-carousel>
+
+    <zx-carousel single with-dots dot-appearance="circle">
+      ${repeat(
+        Array.from({ length: 3 }),
+        (_, index) => html`
+          <zx-carousel-item>
+            <img
+              class="object-cover w-full h-96"
+              src="https://picsum.photos/id/${index + 17}/1200/700"
+              height="400"
+            />
+          </zx-carousel-item>
+        `,
+      )}
+    </zx-carousel>
   `,
 };
 

src/components/carousel/carousel.styles.ts

@@ -39,11 +39,12 @@ export default css`
     --dot-color-active: #111827;
     --dot-margin: 0.5rem 0;
 
-    --scrollbar-color: oklch(70.7% 0.022 261.325) transparent;
+    --scrollbar-color: #d1d5db transparent;
 
     display: block;
     /* Note: moving this elsewhere (e.g wrapper) may bug the container translate position */
     position: relative;
+    container-type: inline-size;
   }
 
   :host([single]) {
@@ -65,8 +66,9 @@ export default css`
   }
 
   :host([with-scrollbar]) .viewport {
-    overflow: auto;
+    overflow-x: scroll;
     scrollbar-color: var(--scrollbar-color); /* progress / track */
+    scrollbar-gutter: stable both-edges;
     scrollbar-width: thin;
   }
 
@@ -96,7 +98,7 @@ export default css`
   }
 
   .button-next,
-  .button-prev,
+  .button-previous,
   .button-fullscreen {
     position: absolute;
     top: calc(50% - (var(--button-size) / 2));
@@ -118,7 +120,7 @@ export default css`
     -webkit-appearance: none;
   }
 
-  .button-prev {
+  .button-previous {
     left: var(--button-offset);
   }
 
@@ -127,8 +129,18 @@ export default css`
   }
 
   .button-fullscreen {
+    border-radius: 4px;
     right: var(--button-offset);
     top: var(--button-offset);
+    width: calc(var(--button-size) * 0.75);
+    height: calc(var(--button-size) * 0.75);
+  }
+
+  @container (min-width: 640px) {
+    .button-fullscreen {
+      width: var(--button-size);
+      height: var(--button-size);
+    }
   }
 
   @media (hover: hover) {
@@ -147,6 +159,12 @@ export default css`
     color: var(--button-arrow-color);
   }
 
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅳🅾🆃🆂
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
   .dots {
     display: flex;
     justify-content: center;
@@ -167,7 +185,7 @@ export default css`
     cursor: pointer;
   }
 
-  .dot i {
+  .dot--bar i {
     background: var(--dot-color);
     height: 0.125rem;
     width: 1rem;
@@ -176,4 +194,16 @@ export default css`
   .dot--selected i {
     background: var(--dot-color-active);
   }
+
+  .dot--circle i {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 8px;
+    border: 2px solid var(--dot-color-active);
+  }
+
+  .dot--circle.dot--selected i {
+    width: 30px;
+  }
 `;