@eunomia/elements 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/components/navigation/carousel/carousel.d.ts

@@ -64,22 +64,27 @@ declare const EunomiaCarousel_base: import("../../../utils/constructor.type.js")
  * @prop {boolean} [showArrows=true] - Shows the previous and next buttons
  * @prop {boolean} [showDots=true] - Shows the pagination dots
  * @attr {string} aria-label - The accessible name for the carousel region. Defaults to Carousel, and is recommended whenever a page has more than one carousel, or its purpose isn't already clear from a preceding heading
- * @prop {string} [ariaLabelPrevious='Previous slide'] - The accessible label of the previous control
- * @attr {string} [aria-label-previous='Previous slide'] - The accessible label of the previous control
- * @prop {string} [ariaLabelNext='Next slide'] - The accessible label of the next control
- * @attr {string} [aria-label-next='Next slide'] - The accessible label of the next control
+ * @prop {string} [previousLabel] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
+ * @attr {string} [previous-label] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
+ * @prop {string} [nextLabel] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
+ * @attr {string} [next-label] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
  * @fires {SlideChangeEvent} eunslidechange - Fired once the active slide settles on a new index
  * @cssprop [--carousel-visible-slides] - Sets how many slides are shown at once, overriding visibleSlides. Meant to be changed from your own media or container queries, so the slide count follows the available space without any script
  * @cssprop [--carousel-scroll-step] - Sets how many slides a previous, next, or dot click advances by, overriding scrollStep. Read again whenever the carousel resizes
  * @cssprop [--carousel-responsive-breakpoint] - Sets the width, in pixels, below which an inline layout moves its buttons into the header row, overriding responsiveBreakpoint. Zero disables the automatic switch. Read again whenever the carousel resizes
  * @cssprop [--carousel-gap] - Sets the gap between slides
  * @cssprop [--carousel-track-padding] - Sets the vertical padding on the track, giving slides' own effects that bleed outside their box, such as a hover shadow, room to render before it gets clipped
+ * @cssprop [--carousel-track-padding-top] - Sets the top padding on the track, falling back to --carousel-track-padding
+ * @cssprop [--carousel-track-padding-bottom] - Sets the bottom padding on the track, falling back to --carousel-track-padding
+ * @cssprop [--carousel-track-padding-inline] - Lets the track bleed past the carousel on both sides by this length, while slides stay aligned on its edges. The next slide and the hover shadows of the edge slides show past the container
+ * @cssprop [--carousel-slide-width] - Sets a fixed width for every slide, overriding visibleSlides, fullSlides and --carousel-min-slide-width
  * @cssprop [--carousel-min-slide-width] - Sets the minimum slide width. On a narrow viewport, this wins over visibleSlides so slides never get uncomfortably small
  * @cssprop [--carousel-peek-size] - Sets how much of the next slide peeks at the edge, when fullSlides is off
  * @cssprop [--carousel-fade-display] - Set to none to hide the edge fades through pure CSS, regardless of edgeFade, for instance on a narrow screen where a single slide fills the whole width
  * @cssprop [--carousel-fade-width] - Sets the width of the edge fades
  * @cssprop [--carousel-fade-color] - Sets the color of the edge fades, which fade to transparent
  * @cssprop [--carousel-active-scale] - Sets the scale applied to the active slide
+ * @cssprop [--carousel-header-margin] - Sets the space between the header row and the track
  * @cssprop [--carousel-header-gap] - Sets the gap between the title slot and the header navigation buttons
  * @cssprop [--carousel-header-align] - Sets the cross-axis alignment (align-items) between the title slot and the header navigation buttons. Defaults to baseline, which keeps the nav buttons close to the track below regardless of how tall a multi-line title ends up
  * @cssprop [--carousel-nav-display] - Set to none to hide the previous and next buttons through pure CSS, regardless of showArrows
@@ -88,6 +93,10 @@ declare const EunomiaCarousel_base: import("../../../utils/constructor.type.js")
  * @cssprop [--carousel-nav-color] - Sets the icon color of the previous and next buttons
  * @cssprop [--carousel-nav-background] - Sets the background color of the previous and next buttons
  * @cssprop [--carousel-nav-border-color] - Sets the border color of the previous and next buttons
+ * @cssprop [--carousel-nav-border-width] - Sets the border width of the previous and next buttons
+ * @cssprop [--carousel-nav-hover-background] - Sets the background color of the previous and next buttons on hover
+ * @cssprop [--carousel-nav-hover-color] - Sets the icon color of the previous and next buttons on hover
+ * @cssprop [--carousel-nav-hover-border-color] - Sets the border color of the previous and next buttons on hover
  * @cssprop [--carousel-nav-shadow] - Sets the shadow of the previous and next buttons in the inline layout, when enabled. Unset for the header layout, and always unset while a button is disabled
  * @cssprop [--carousel-nav-disabled-background] - Sets the background and border color of a disabled previous or next button
  * @cssprop [--carousel-nav-disabled-color] - Sets the icon color of a disabled previous or next button
@@ -197,15 +206,17 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      */
     showDots: boolean;
     /**
-     * Accessible label of the Previous control.
-     * @default Previous slide
+     * Accessible label of the Previous control. Resolved from the locale
+     * dictionary when unset, so it follows `locale` automatically.
+     * @default {i18n:carousel.previous}
      */
-    ariaLabelPrevious: string;
+    previousLabel?: string;
     /**
-     * Accessible label of the Next control.
-     * @default Next slide
+     * Accessible label of the Next control. Resolved from the locale
+     * dictionary when unset, so it follows `locale` automatically.
+     * @default {i18n:carousel.next}
      */
-    ariaLabelNext: string;
+    nextLabel?: string;
     /**
      * Index of the currently active slide (see {@link ACTIVE_SLIDE_CLASS}).
      * @internal
@@ -349,6 +360,38 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      * @private
      */
     private getCssPixelValue;
+    /**
+     * The track's inline padding in pixels, set by
+     * `--carousel-track-padding-inline` to let the track bleed past the
+     * host. Slides rest that far from the track's own edge, so scroll math
+     * measured from that edge has to offset by it.
+     * @returns the inline padding, `0` when unset.
+     * @private
+     */
+    private getTrackInset;
+    /**
+     * Whether the track lays out right to left. Slides then start from the
+     * track's right edge and `scrollLeft` runs from `0` down to negative
+     * values, so every scroll measurement goes through the logical helpers
+     * below instead of reading `left`/`scrollLeft` directly.
+     * @private
+     */
+    private isRtl;
+    /**
+     * How far the track has scrolled from its inline start, always positive
+     * whatever the direction.
+     * @private
+     */
+    private getScrollProgress;
+    /**
+     * Distance from the track's inline-start edge to a rect's own
+     * inline-start edge (`left` in LTR, `right` in RTL), positive toward the
+     * end of the track.
+     * @param rect the measured element's rect.
+     * @param trackRect the track's own rect.
+     * @private
+     */
+    private getInlineStartOffset;
     /**
      * The highest valid slide index a page can start on, without leaving
      * empty space at the end of the track. Measured from the slides' actual
@@ -543,7 +586,8 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
     private updateFromScrollPosition;
     /**
      * Handles keyboard navigation on the track : arrow keys page by
-     * `scrollStep`, Home/End jump to the bounds.
+     * `scrollStep`, Home/End jump to the bounds. Right to left, the arrows
+     * swap so each one still moves toward the side it points to.
      *
      * @param event the native keyboard event.
      * @private

package/dist/components/navigation/carousel/carousel.js

@@ -54,22 +54,27 @@ const ACTIVE_SLIDE_CLASS = "eun-carousel-active-slide";
  * @prop {boolean} [showArrows=true] - Shows the previous and next buttons
  * @prop {boolean} [showDots=true] - Shows the pagination dots
  * @attr {string} aria-label - The accessible name for the carousel region. Defaults to Carousel, and is recommended whenever a page has more than one carousel, or its purpose isn't already clear from a preceding heading
- * @prop {string} [ariaLabelPrevious='Previous slide'] - The accessible label of the previous control
- * @attr {string} [aria-label-previous='Previous slide'] - The accessible label of the previous control
- * @prop {string} [ariaLabelNext='Next slide'] - The accessible label of the next control
- * @attr {string} [aria-label-next='Next slide'] - The accessible label of the next control
+ * @prop {string} [previousLabel] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
+ * @attr {string} [previous-label] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
+ * @prop {string} [nextLabel] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
+ * @attr {string} [next-label] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
  * @fires {SlideChangeEvent} eunslidechange - Fired once the active slide settles on a new index
  * @cssprop [--carousel-visible-slides] - Sets how many slides are shown at once, overriding visibleSlides. Meant to be changed from your own media or container queries, so the slide count follows the available space without any script
  * @cssprop [--carousel-scroll-step] - Sets how many slides a previous, next, or dot click advances by, overriding scrollStep. Read again whenever the carousel resizes
  * @cssprop [--carousel-responsive-breakpoint] - Sets the width, in pixels, below which an inline layout moves its buttons into the header row, overriding responsiveBreakpoint. Zero disables the automatic switch. Read again whenever the carousel resizes
  * @cssprop [--carousel-gap] - Sets the gap between slides
  * @cssprop [--carousel-track-padding] - Sets the vertical padding on the track, giving slides' own effects that bleed outside their box, such as a hover shadow, room to render before it gets clipped
+ * @cssprop [--carousel-track-padding-top] - Sets the top padding on the track, falling back to --carousel-track-padding
+ * @cssprop [--carousel-track-padding-bottom] - Sets the bottom padding on the track, falling back to --carousel-track-padding
+ * @cssprop [--carousel-track-padding-inline] - Lets the track bleed past the carousel on both sides by this length, while slides stay aligned on its edges. The next slide and the hover shadows of the edge slides show past the container
+ * @cssprop [--carousel-slide-width] - Sets a fixed width for every slide, overriding visibleSlides, fullSlides and --carousel-min-slide-width
  * @cssprop [--carousel-min-slide-width] - Sets the minimum slide width. On a narrow viewport, this wins over visibleSlides so slides never get uncomfortably small
  * @cssprop [--carousel-peek-size] - Sets how much of the next slide peeks at the edge, when fullSlides is off
  * @cssprop [--carousel-fade-display] - Set to none to hide the edge fades through pure CSS, regardless of edgeFade, for instance on a narrow screen where a single slide fills the whole width
  * @cssprop [--carousel-fade-width] - Sets the width of the edge fades
  * @cssprop [--carousel-fade-color] - Sets the color of the edge fades, which fade to transparent
  * @cssprop [--carousel-active-scale] - Sets the scale applied to the active slide
+ * @cssprop [--carousel-header-margin] - Sets the space between the header row and the track
  * @cssprop [--carousel-header-gap] - Sets the gap between the title slot and the header navigation buttons
  * @cssprop [--carousel-header-align] - Sets the cross-axis alignment (align-items) between the title slot and the header navigation buttons. Defaults to baseline, which keeps the nav buttons close to the track below regardless of how tall a multi-line title ends up
  * @cssprop [--carousel-nav-display] - Set to none to hide the previous and next buttons through pure CSS, regardless of showArrows
@@ -78,6 +83,10 @@ const ACTIVE_SLIDE_CLASS = "eun-carousel-active-slide";
  * @cssprop [--carousel-nav-color] - Sets the icon color of the previous and next buttons
  * @cssprop [--carousel-nav-background] - Sets the background color of the previous and next buttons
  * @cssprop [--carousel-nav-border-color] - Sets the border color of the previous and next buttons
+ * @cssprop [--carousel-nav-border-width] - Sets the border width of the previous and next buttons
+ * @cssprop [--carousel-nav-hover-background] - Sets the background color of the previous and next buttons on hover
+ * @cssprop [--carousel-nav-hover-color] - Sets the icon color of the previous and next buttons on hover
+ * @cssprop [--carousel-nav-hover-border-color] - Sets the border color of the previous and next buttons on hover
  * @cssprop [--carousel-nav-shadow] - Sets the shadow of the previous and next buttons in the inline layout, when enabled. Unset for the header layout, and always unset while a button is disabled
  * @cssprop [--carousel-nav-disabled-background] - Sets the background and border color of a disabled previous or next button
  * @cssprop [--carousel-nav-disabled-color] - Sets the icon color of a disabled previous or next button
@@ -180,16 +189,6 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
          * @default true
          */
         this.showDots = true;
-        /**
-         * Accessible label of the Previous control.
-         * @default Previous slide
-         */
-        this.ariaLabelPrevious = "Previous slide";
-        /**
-         * Accessible label of the Next control.
-         * @default Next slide
-         */
-        this.ariaLabelNext = "Next slide";
         /**
          * Index of the currently active slide (see {@link ACTIVE_SLIDE_CLASS}).
          * @internal
@@ -415,6 +414,51 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         const parsed = Number.parseFloat(getComputedStyle(this).getPropertyValue(name));
         return Number.isNaN(parsed) ? fallback : parsed;
     }
+    /**
+     * The track's inline padding in pixels, set by
+     * `--carousel-track-padding-inline` to let the track bleed past the
+     * host. Slides rest that far from the track's own edge, so scroll math
+     * measured from that edge has to offset by it.
+     * @returns the inline padding, `0` when unset.
+     * @private
+     */
+    getTrackInset() {
+        if (!this.trackEl) {
+            return 0;
+        }
+        return Number.parseFloat(getComputedStyle(this.trackEl).paddingLeft) || 0;
+    }
+    /**
+     * Whether the track lays out right to left. Slides then start from the
+     * track's right edge and `scrollLeft` runs from `0` down to negative
+     * values, so every scroll measurement goes through the logical helpers
+     * below instead of reading `left`/`scrollLeft` directly.
+     * @private
+     */
+    isRtl() {
+        return !!this.trackEl && getComputedStyle(this.trackEl).direction === "rtl";
+    }
+    /**
+     * How far the track has scrolled from its inline start, always positive
+     * whatever the direction.
+     * @private
+     */
+    getScrollProgress() {
+        return this.trackEl ? Math.abs(this.trackEl.scrollLeft) : 0;
+    }
+    /**
+     * Distance from the track's inline-start edge to a rect's own
+     * inline-start edge (`left` in LTR, `right` in RTL), positive toward the
+     * end of the track.
+     * @param rect the measured element's rect.
+     * @param trackRect the track's own rect.
+     * @private
+     */
+    getInlineStartOffset(rect, trackRect) {
+        return this.isRtl()
+            ? trackRect.right - rect.right
+            : rect.left - trackRect.left;
+    }
     /**
      * Number of pagination dots, derived from how many `scrollStep`-sized
      * jumps it takes to cover every slide. Rounds up so a trailing partial
@@ -480,12 +524,16 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         }
         const track = this.trackEl;
         const trackRect = track.getBoundingClientRect();
-        const maxScrollLeft = Math.max(0, track.scrollWidth - track.clientWidth);
+        const maxScroll = Math.max(0, track.scrollWidth - track.clientWidth);
+        const scrolled = this.getScrollProgress();
+        const inset = this.getTrackInset();
         let max = 0;
         let closestDistance = Infinity;
         this.slides.forEach((slide, index) => {
-            const slideStart = slide.getBoundingClientRect().left - trackRect.left + track.scrollLeft;
-            const distance = Math.abs(slideStart - maxScrollLeft);
+            const slideStart = this.getInlineStartOffset(slide.getBoundingClientRect(), trackRect) +
+                scrolled -
+                inset;
+            const distance = Math.abs(slideStart - maxScroll);
             if (distance < closestDistance) {
                 closestDistance = distance;
                 max = index;
@@ -512,7 +560,7 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
             this.style.setProperty("--_centerPadding", "0px");
             return;
         }
-        const trackWidth = this.trackEl.clientWidth;
+        const trackWidth = this.trackEl.clientWidth - 2 * this.getTrackInset();
         const slideWidth = this.slides[0].getBoundingClientRect().width;
         const padding = Math.max(0, (trackWidth - slideWidth) / 2);
         this.style.setProperty("--_centerPadding", `${padding}px`);
@@ -596,8 +644,9 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
             ? ((index % (max + 1)) + (max + 1)) % (max + 1)
             : Math.max(0, Math.min(index, max));
         if (!this.centerSnap && target === max) {
+            const maxScroll = this.trackEl.scrollWidth - this.trackEl.clientWidth;
             this.trackEl.scrollTo({
-                left: this.trackEl.scrollWidth - this.trackEl.clientWidth,
+                left: this.isRtl() ? -maxScroll : maxScroll,
                 behavior: this.scrollBehavior(),
             });
             return;
@@ -695,27 +744,20 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         }
         const trackRect = this.trackEl.getBoundingClientRect();
         const reference = this.centerSnap
-            ? trackRect.left + trackRect.width / 2
-            : trackRect.left;
+            ? trackRect.width / 2
+            : this.getTrackInset();
         let closestIndex = 0;
         let closestDistance = Infinity;
         this.slides.forEach((slide, index) => {
             const rect = slide.getBoundingClientRect();
-            const point = this.centerSnap ? rect.left + rect.width / 2 : rect.left;
+            const start = this.getInlineStartOffset(rect, trackRect);
+            const point = this.centerSnap ? start + rect.width / 2 : start;
             const distance = Math.abs(point - reference);
             if (distance < closestDistance) {
                 closestDistance = distance;
                 closestIndex = index;
             }
         });
-        // At the true scroll end, the nearest slide to `reference` can sit past
-        // `measureMaxIndex`'s result — e.g. when the slide count doesn't evenly
-        // divide into pages, the flush-end scroll position (see the `target ===
-        // max` branch in `goToIndex`) reveals a trailing slide that ends up
-        // closer to `reference` than the officially "reachable" last page. Left
-        // unclamped, `currentIndex` would exceed `maxIndex`, which breaks the
-        // pagination dot lookup (no dot matches) and gets `previous()` stuck,
-        // since it re-targets that same last-page scroll position every time.
         this.maxIndex = this.measureMaxIndex();
         closestIndex = Math.min(closestIndex, this.maxIndex);
         this.slides.forEach((slide, index) => {
@@ -723,17 +765,21 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         });
         const changedIndex = closestIndex !== this.currentIndex;
         this.currentIndex = closestIndex;
-        const { scrollLeft } = this.trackEl;
+        const scrolled = this.getScrollProgress();
         const maxScroll = this.trackEl.scrollWidth - this.trackEl.clientWidth;
-        this.style.setProperty("--_showLeftFade", scrollLeft > 1 ? "1" : "0");
-        this.style.setProperty("--_showRightFade", scrollLeft < maxScroll - 1 ? "1" : "0");
+        const startFade = scrolled > 1 ? "1" : "0";
+        const endFade = scrolled < maxScroll - 1 ? "1" : "0";
+        const rtl = this.isRtl();
+        this.style.setProperty("--_showLeftFade", rtl ? endFade : startFade);
+        this.style.setProperty("--_showRightFade", rtl ? startFade : endFade);
         if (changedIndex) {
             this.scheduleAnnounce();
         }
     }
     /**
      * Handles keyboard navigation on the track : arrow keys page by
-     * `scrollStep`, Home/End jump to the bounds.
+     * `scrollStep`, Home/End jump to the bounds. Right to left, the arrows
+     * swap so each one still moves toward the side it points to.
      *
      * @param event the native keyboard event.
      * @private
@@ -742,11 +788,21 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         switch (event.key) {
             case "ArrowLeft":
                 event.preventDefault();
-                this.previous();
+                if (this.isRtl()) {
+                    this.next();
+                }
+                else {
+                    this.previous();
+                }
                 break;
             case "ArrowRight":
                 event.preventDefault();
-                this.next();
+                if (this.isRtl()) {
+                    this.previous();
+                }
+                else {
+                    this.next();
+                }
                 break;
             case "Home":
                 event.preventDefault();
@@ -804,7 +860,9 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         type="button"
         id=${direction}
         class="nav"
-        aria-label=${isPrev ? this.ariaLabelPrevious : this.ariaLabelNext}
+        aria-label=${isPrev
+            ? (this.previousLabel ?? this.dictionary.carousel.previous)
+            : (this.nextLabel ?? this.dictionary.carousel.next)}
         aria-controls="track"
         ?disabled=${disabled}
         @click=${() => (isPrev ? this.previous() : this.next())}
@@ -873,10 +931,10 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
  */
 EunomiaCarousel.styles = carouselStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaCarousel.prototype, "layout", void 0);
 __decorate([
-    property({ reflect: true, attribute: "nav-placement" })
+    property({ reflect: true, attribute: "nav-placement", useDefault: true })
 ], EunomiaCarousel.prototype, "navPlacement", void 0);
 __decorate([
     property({ type: Number, attribute: "responsive-breakpoint" })
@@ -912,11 +970,11 @@ __decorate([
     property({ type: Boolean, attribute: "show-dots" })
 ], EunomiaCarousel.prototype, "showDots", void 0);
 __decorate([
-    property({ attribute: "aria-label-previous" })
-], EunomiaCarousel.prototype, "ariaLabelPrevious", void 0);
+    property({ attribute: "previous-label" })
+], EunomiaCarousel.prototype, "previousLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-next" })
-], EunomiaCarousel.prototype, "ariaLabelNext", void 0);
+    property({ attribute: "next-label" })
+], EunomiaCarousel.prototype, "nextLabel", void 0);
 __decorate([
     state()
 ], EunomiaCarousel.prototype, "currentIndex", void 0);

package/dist/components/navigation/carousel/carousel.styles.js

@@ -9,11 +9,16 @@ import { css } from "lit";
  * [--carousel-fade-display] - Set to `none` to hide the edge fades via pure CSS (e.g. in a container query), regardless of `edgeFade`
  * [--carousel-gap] - Set a custom gap between slides
  * [--carousel-track-padding] - Set a custom vertical padding on the track, giving slides' own effects that bleed outside their box (a hover shadow, `eun-sliding-card`'s bottom fade, ...) room to render before `overflow-y: hidden` clips them
+ * [--carousel-track-padding-top] - Set a custom top padding on the track, falling back to --carousel-track-padding
+ * [--carousel-track-padding-bottom] - Set a custom bottom padding on the track, falling back to --carousel-track-padding
+ * [--carousel-track-padding-inline] - Let the track bleed out of the carousel on both sides by this length, while slides stay aligned on the carousel's edges. Shows the next slide and the edge slides' shadows past the container
+ * [--carousel-slide-width] - Set a fixed width for every slide, overriding `visibleSlides`, `fullSlides` and --carousel-min-slide-width
  * [--carousel-min-slide-width] - Set a custom minimum slide width ; on a narrow viewport, this wins over `visibleSlides` so slides never get uncomfortably small — fewer of them just become scrollable off-screen instead
  * [--carousel-peek-size] - Set how much of the next slide peeks at the edge, when `fullSlides` is off
  * [--carousel-fade-width] - Set a custom width for the edge fades
  * [--carousel-fade-color] - Set a custom color for the edge fades (fades to transparent)
  * [--carousel-active-scale] - Set a custom scale applied to the active slide
+ * [--carousel-header-margin] - Set a custom space between the header and the track
  * [--carousel-header-gap] - Set a custom gap between the title slot and the header nav buttons
  * [--carousel-header-align] - Set a custom cross-axis alignment (`align-items`) between the title slot and the header nav buttons ; defaults to `baseline`, which keeps the nav buttons close to the track below regardless of how tall a multi-line title ends up
  * [--carousel-nav-display] - Set to `none` to hide the prev/next buttons via pure CSS (e.g. in a media query), regardless of `showArrows`
@@ -22,6 +27,10 @@ import { css } from "lit";
  * [--carousel-nav-color] - Set a custom icon color for the prev/next buttons
  * [--carousel-nav-background] - Set a custom background color for the prev/next buttons
  * [--carousel-nav-border-color] - Set a custom border color for the prev/next buttons
+ * [--carousel-nav-border-width] - Set a custom border width for the prev/next buttons
+ * [--carousel-nav-hover-background] - Set a custom background color for the prev/next buttons on hover
+ * [--carousel-nav-hover-color] - Set a custom icon color for the prev/next buttons on hover
+ * [--carousel-nav-hover-border-color] - Set a custom border color for the prev/next buttons on hover
  * [--carousel-nav-shadow] - Set a custom shadow for the `inline`-layout prev/next buttons, when enabled ; unset for `header`'s, and always unset while `disabled`
  * [--carousel-nav-disabled-background] - Set a custom background/border color for a disabled prev/next button
  * [--carousel-nav-disabled-color] - Set a custom icon color for a disabled prev/next button
@@ -42,6 +51,7 @@ const base = css `
       var(--_visibleCount)
     );
     --_snapAlign: start;
+    --_trackInline: var(--carousel-track-padding-inline, 0px);
   }
 
   .sr-only {
@@ -61,7 +71,7 @@ const base = css `
     align-items: var(--carousel-header-align, flex-end);
     justify-content: space-between;
     gap: var(--carousel-header-gap, var(--eun-space-m, 16px));
-    margin-bottom: var(--eun-space-m, 16px);
+    margin-bottom: var(--carousel-header-margin, var(--eun-space-m, 16px));
   }
   #carousel-header[hidden] {
     display: none;
@@ -99,10 +109,11 @@ const base = css `
     width: var(--carousel-fade-width, 60px);
     z-index: 2;
     pointer-events: none;
-    transition: opacity 0.3s ease;
+    transition: opacity var(--eun-duration-xl, 300ms)
+      var(--eun-easing-default, ease);
   }
   #viewport::before {
-    left: 0;
+    left: calc(-1 * var(--_trackInline));
     opacity: var(--_showLeftFade, 0);
     background: linear-gradient(
       to right,
@@ -111,7 +122,7 @@ const base = css `
     );
   }
   #viewport::after {
-    right: 0;
+    right: calc(-1 * var(--_trackInline));
     opacity: var(--_showRightFade, 0);
     background: linear-gradient(
       to left,
@@ -127,7 +138,17 @@ const base = css `
   #track {
     display: flex;
     gap: var(--carousel-gap, 16px);
-    padding-block: var(--carousel-track-padding, 0);
+    padding-block: var(
+        --carousel-track-padding-top,
+        var(--carousel-track-padding, var(--eun-space-l))
+      )
+      var(
+        --carousel-track-padding-bottom,
+        var(--carousel-track-padding, var(--eun-space-l))
+      );
+    padding-inline: var(--_trackInline);
+    margin-inline: calc(-1 * var(--_trackInline));
+    scroll-padding-inline: var(--_trackInline);
     overflow-x: auto;
     overflow-y: hidden;
     scroll-snap-type: x mandatory;
@@ -135,7 +156,8 @@ const base = css `
     outline: 2px solid transparent;
     outline-offset: 8px;
     border-radius: var(--eun-border-radius-m);
-    transition: outline 0.2s ease-out;
+    transition: outline var(--eun-duration-m, 200ms)
+      var(--eun-easing-out, ease-out);
   }
   #track::-webkit-scrollbar {
     display: none;
@@ -159,10 +181,11 @@ const base = css `
     flex-shrink: 0;
     scroll-snap-align: var(--_snapAlign, start);
     scroll-snap-stop: always;
-    transition: transform 0.2s ease;
+    transition: transform var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
   }
   :host([full-slides]) ::slotted(:not([slot])) {
-    flex-basis: max(
+    --_slideBasis: max(
       var(--carousel-min-slide-width, 220px),
       calc(
         (
@@ -174,7 +197,7 @@ const base = css `
     );
   }
   :host(:not([full-slides])) ::slotted(:not([slot])) {
-    flex-basis: max(
+    --_slideBasis: max(
       var(--carousel-min-slide-width, 220px),
       calc(
         (
@@ -185,6 +208,9 @@ const base = css `
       )
     );
   }
+  :host ::slotted(:not([slot])) {
+    flex-basis: var(--carousel-slide-width, var(--_slideBasis));
+  }
   ::slotted(.eun-carousel-active-slide) {
     transform: scale(var(--carousel-active-scale, 1));
   }
@@ -202,8 +228,8 @@ const base = css `
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    border: var(--eun-border-width-s, 1px) solid
-      var(--carousel-nav-border-color, var(--eun-border-color, #dee0e7));
+    border: var(--carousel-nav-border-width, var(--eun-border-width-s, 1px))
+      solid var(--carousel-nav-border-color, var(--eun-border-color, #dee0e7));
     background: var(
       --carousel-nav-background,
       var(--eun-surface-color, #ffffff)
@@ -211,14 +237,27 @@ const base = css `
     color: var(--carousel-nav-color, var(--eun-text-color, #071621));
     cursor: pointer;
     outline: 2px solid transparent;
-    transition: outline 0.2s ease-out;
     transition:
-      outline 0.2s ease-out,
-      opacity 0.2s ease,
-      background-color 0.2s ease;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      opacity var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease),
+      color var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   .nav:hover:not(:disabled) {
-    background: var(--eun-content-hover, #edeff0);
+    background: var(
+      --carousel-nav-hover-background,
+      var(--eun-content-hover, #edeff0)
+    );
+    color: var(
+      --carousel-nav-hover-color,
+      var(--carousel-nav-color, var(--eun-text-color, #071621))
+    );
+    border-color: var(
+      --carousel-nav-hover-border-color,
+      var(--carousel-nav-border-color, var(--eun-border-color, #dee0e7))
+    );
   }
   .nav:focus-visible {
     outline-color: var(--eun-color-primary-500, #3d6fff);
@@ -243,11 +282,14 @@ const base = css `
   .nav eun-icon {
     pointer-events: none;
   }
+  :host(:dir(rtl)) .nav eun-icon {
+    transform: scaleX(-1);
+  }
   #prev {
-    left: var(--eun-space-s, 8px);
+    inset-inline-start: var(--eun-space-s, 8px);
   }
   #next {
-    right: var(--eun-space-s, 8px);
+    inset-inline-end: var(--eun-space-s, 8px);
   }
   #viewport .nav {
     box-shadow: var(--carousel-nav-shadow, 0 2px 10px rgba(15, 23, 42, 0.18));
@@ -273,10 +315,11 @@ const base = css `
     cursor: pointer;
     outline: 2px solid transparent;
     transition:
-      width 0.2s ease,
-      outline 0.2s ease-out,
-      border-radius 0.2s ease,
-      background-color 0.2s ease;
+      width var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border-radius var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease);
   }
   .dot:focus-visible {
     outline-color: var(--eun-color-primary-500, #3d6fff);