fix(carousel): hide scroll-buttons when scroll is inactive

Author: zedix

src/components/carousel/carousel.component.ts

@@ -154,9 +154,10 @@ export default class Carousel extends LitElement {
   @property({ type: String, attribute: 'dot-appearance' })
   dotAppearance: 'circle' | 'bar' = 'bar';
 
-  @property({ type: String, attribute: 'scroll-button-position' })
+  @property({ type: String, attribute: 'scroll-buttons-position' })
   scrollButtonsPosition: 'inside' | 'outside' = 'inside';
 
+  @query('.scroll-buttons') scrollButtons!: HTMLElement;
   @query('.button-previous') previousBtn!: HTMLButtonElement;
   @query('.button-next') nextBtn!: HTMLButtonElement;
   @query('.container') container!: HTMLSlotElement;
@@ -246,9 +247,12 @@ export default class Carousel extends LitElement {
   }
 
   protected updateNavigation() {
+    const canScroll = this.embla.canScrollPrev() || this.embla.canScrollNext();
+
     // Set disabled state for next/previous buttons
     this.previousBtn.toggleAttribute('disabled', !this.embla.canScrollPrev());
     this.nextBtn.toggleAttribute('disabled', !this.embla.canScrollNext());
+    this.scrollButtons.classList.toggle('scroll-buttons--disabled', !canScroll);
 
     // Set active state for dots
     if (this.withDots) {

src/components/carousel/carousel.stories.ts

@@ -179,7 +179,7 @@ export const MoreProducts: Story = {
     <zx-carousel
       drag-free
       with-scrollbar
-      scroll-button-position="outside"
+      scroll-buttons-position="outside"
       style="--slide-size: calc(100% / 3); --slide-gap: 1rem"
     >
       ${repeat(

src/components/carousel/carousel.styles.ts

@@ -107,10 +107,12 @@ export default css`
     */
 
     display: flex;
-    gap: 6px;
+    gap: 8px;
     justify-content: end;
+    padding-block: 8px;
   }
 
+  .scroll-buttons--disabled,
   .inactive .scroll-buttons {
     display: none;
   }
@@ -143,10 +145,6 @@ export default css`
     z-index: 1;
   }
 
-  .scroll-buttons--outside .button-previous,
-  .scroll-buttons--outside .button-next {
-  }
-
   .scroll-buttons--inside .button-previous {
     left: var(--button-offset);
   }