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

package/dist/components/form/time-picker/time-picker.js

@@ -26,6 +26,7 @@ import { timePickerListStyles } from "./time-picker-list.styles.js";
 import { renderTimePickerList } from "./time-picker-list.js";
 import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
 import { mediaBelow } from "../../../breakpoints.js";
+import { isImplicitSubmissionKey, submitImplicitly, } from "../../../utils/implicit-submission.utils.js";
 /**
  * Tag name of the time-picker component.
  */
@@ -81,14 +82,15 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<Date | null>>} validators - The list of custom validation rules applied to the value
  * @prop {string} [applyLabel='Apply'] - The label of the mobile modal's confirm button
  * @attr {string} [apply-label='Apply'] - The label of the mobile modal's confirm button
- * @prop {string} [cancelLabel='Cancel'] - The label of the mobile modal's cancel button
- * @attr {string} [cancel-label='Cancel'] - The label of the mobile modal's cancel button
- * @prop {string} [ariaLabelClock='Open clock'] - The accessible label of the trailing clock button
- * @attr {string} [aria-label-clock='Open clock'] - The accessible label of the trailing clock button
+ * @prop {string} [cancelLabel] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @attr {string} [cancel-label] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [clockLabel] - The accessible label of the trailing clock button. Defaults to the localized string for the current locale (English: "Open clock")
+ * @attr {string} [clock-label] - The accessible label of the trailing clock button. Defaults to the localized string for the current locale (English: "Open clock")
  * @prop {string} [hourPlaceholder='hh'] - The placeholder shown in the empty hour segment
  * @attr {string} [hour-placeholder='hh'] - The placeholder shown in the empty hour segment
  * @prop {string} [minutePlaceholder='mm'] - The placeholder shown in the empty minute segment
@@ -119,8 +121,25 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @element eun-time-picker
  */
 let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
+    /**
+     * The default value applied on connection and form reset. Overrides the
+     * `defaultValue` accessor inherited from `FormMixin` only to swap its
+     * attribute converter — the mixin's generic one always splits
+     * `default-value` on commas, which would silently produce the wrong thing
+     * for a `Date` ; matches `eun-date-picker`'s identical override. The
+     * actual get/set logic (applying the default when the field resets)
+     * still comes from `FormMixin` itself, via `super`.
+     * @default-value-format an ISO 8601 date-time string
+     */
+    get defaultValue() {
+        return super.defaultValue;
+    }
+    set defaultValue(value) {
+        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
+        super.defaultValue = value;
+    }
     constructor() {
-        super(...arguments);
+        super();
         /**
          * The minute column's increment step, and which minute values the mobile
          * wheel enumerates (e.g. `15` only ever shows/lands on `:00`/`:15`/`:30`/
@@ -168,16 +187,6 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
          * @default Apply
          */
         this.applyLabel = "Apply";
-        /**
-         * Label of the mobile modal's cancel button.
-         * @default Cancel
-         */
-        this.cancelLabel = "Cancel";
-        /**
-         * Accessible label of the trailing clock button.
-         * @default Open clock
-         */
-        this.ariaLabelClock = "Open clock";
         /**
          * Placeholder shown in the empty hour segment.
          * @default hh
@@ -199,6 +208,25 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
          * @internal
          */
         this.isOpen = false;
+        /**
+         * Submits the owning form on Enter in one of the field's segments, as a
+         * native time input does, since the browser never does it from a
+         * shadow root. Left alone while the panel is open, and on keys a
+         * segment already handles, such as Enter toggling the AM/PM segment.
+         * @private
+         */
+        this.handleImplicitSubmission = (event) => {
+            const form = this.internals.form;
+            const origin = event.composedPath()[0];
+            if (!form ||
+                this.isOpen ||
+                !(origin instanceof Element && origin.matches(".segment")) ||
+                !isImplicitSubmissionKey(event)) {
+                return;
+            }
+            event.preventDefault();
+            submitImplicitly(form);
+        };
         /**
          * Whether the mobile modal is open.
          * @internal
@@ -411,23 +439,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
                     break;
             }
         };
-    }
-    /**
-     * The default value applied on connection and form reset. Overrides the
-     * `defaultValue` accessor inherited from `FormMixin` only to swap its
-     * attribute converter — the mixin's generic one always splits
-     * `default-value` on commas, which would silently produce the wrong thing
-     * for a `Date` ; matches `eun-date-picker`'s identical override. The
-     * actual get/set logic (applying the default when the field resets)
-     * still comes from `FormMixin` itself, via `super`.
-     * @default-value-format an ISO 8601 date-time string
-     */
-    get defaultValue() {
-        return super.defaultValue;
-    }
-    set defaultValue(value) {
-        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
-        super.defaultValue = value;
+        this.addEventListener("keydown", this.handleImplicitSubmission);
     }
     /**
      * Lifecycle hook called before an update, ahead of render. Keeps the
@@ -482,6 +494,14 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             this.setAttribute("aria-invalid", String(this.showError));
         }
     }
+    /**
+     * The host is never a tab stop of its own : sequential navigation goes
+     * straight to the controls inside, in both directions, and
+     * {@link focus} covers a direct call on the host.
+     */
+    get hostTabStop() {
+        return false;
+    }
     /**
      * Returns the first segment element to focus/anchor on validation errors.
      *
@@ -905,7 +925,8 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         <div
           class="segment-group"
           role="group"
-          aria-label=${this.label ?? "Time"}
+          aria-label=${this.label ?? this.dictionary.timePicker.time}
+          aria-describedby=${this.description?.length ? "description" : nothing}
         >
           ${order.map((kind, index) => {
             const previous = order[index - 1];
@@ -924,7 +945,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         <button
           type="button"
           id="clock-trigger"
-          aria-label=${this.ariaLabelClock}
+          aria-label=${this.clockLabel ?? this.dictionary.timePicker.openClock}
           aria-haspopup=${this.panelMode === "list" ? "listbox" : "dialog"}
           aria-expanded=${this.isOpen || this.isModalOpen ? "true" : "false"}
           ?disabled=${this.disabled}
@@ -1035,7 +1056,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         ?open=${this.isModalOpen}
         .closeable=${false}
         confirm-label=${this.applyLabel}
-        cancel-label=${this.cancelLabel}
+        cancel-label=${this.cancelLabel ?? this.dictionary.common.cancel}
         aria-label=${this.label ?? this.dictionary.timePicker.selectATime}
         @eunconfirm=${this.handleModalConfirm}
         @euncancel=${this.handleModalCancel}
@@ -1053,7 +1074,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             id="cancel"
             @click=${() => this.modalEl?.cancel()}
           >
-            ${this.cancelLabel}
+            ${this.cancelLabel ?? this.dictionary.common.cancel}
           </eun-button>
           <eun-button id="confirm" @click=${() => this.modalEl?.confirm()}>
             ${this.applyLabel}
@@ -1113,8 +1134,8 @@ __decorate([
     property({ attribute: "cancel-label" })
 ], EunomiaTimePicker.prototype, "cancelLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-clock" })
-], EunomiaTimePicker.prototype, "ariaLabelClock", void 0);
+    property({ attribute: "clock-label" })
+], EunomiaTimePicker.prototype, "clockLabel", void 0);
 __decorate([
     property({ attribute: "hour-placeholder" })
 ], EunomiaTimePicker.prototype, "hourPlaceholder", void 0);

package/dist/components/layout/animate/animate.js

@@ -194,7 +194,7 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
  */
 EunomiaAnimate.styles = animateStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaAnimate.prototype, "animation", void 0);
 __decorate([
     property({ type: Number })

package/dist/components/layout/animate/animate.styles.js

@@ -20,11 +20,11 @@ const base = css `
     transition-property: none;
   }
 
-  :host([animation="fade"]) {
+  :host(:is([animation="fade"], :not([animation]))) {
     opacity: 0;
     transition-property: opacity;
   }
-  :host([animation="fade"][in-view]) {
+  :host(:is([animation="fade"], :not([animation]))[in-view]) {
     opacity: 1;
   }
 

package/dist/components/layout/divider/divider.js

@@ -64,7 +64,7 @@ let EunomiaDivider = class EunomiaDivider extends LitElement {
  */
 EunomiaDivider.styles = dividerStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDivider.prototype, "orientation", void 0);
 EunomiaDivider = __decorate([
     customElement(EunomiaDividerTagName)

package/dist/components/layout/divider/divider.styles.js

@@ -13,7 +13,7 @@ const base = css `
     display: block;
   }
 
-  :host([orientation="horizontal"]) {
+  :host(:is([orientation="horizontal"], :not([orientation]))) {
     width: 100%;
     height: 0;
     margin-block: var(--_spacing);

package/dist/components/loader/loader/loader.js

@@ -170,7 +170,7 @@ __decorate([
     property()
 ], EunomiaLoader.prototype, "label", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaLoader.prototype, "variant", void 0);
 __decorate([
     property({ hasChanged: () => false })
@@ -182,7 +182,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaLoader.prototype, "sticky", void 0);
 __decorate([
-    property({ attribute: "sticky-position", reflect: true })
+    property({ attribute: "sticky-position", reflect: true, useDefault: true })
 ], EunomiaLoader.prototype, "stickyPosition", void 0);
 EunomiaLoader = __decorate([
     customElement(EunomiaLoaderTagName)

package/dist/components/loader/loader/loader.styles.js

@@ -19,9 +19,9 @@ const base = css `
     font-size: var(--_size);
   }
 
-  :host([variant="dots"]) span,
-  :host([variant="dots"]) span::before,
-  :host([variant="dots"]) span::after {
+  :host(:is([variant="dots"], :not([variant]))) span,
+  :host(:is([variant="dots"], :not([variant]))) span::before,
+  :host(:is([variant="dots"], :not([variant]))) span::after {
     border-radius: 50%;
     width: 0.5em;
     height: 0.5em;
@@ -30,22 +30,22 @@ const base = css `
     animation: eun-loader-fade 1.4s infinite ease-in-out;
     animation-fill-mode: both;
   }
-  :host([variant="dots"]) span {
+  :host(:is([variant="dots"], :not([variant]))) span {
     position: relative;
     margin: 0 0.75em;
     animation-delay: -0.16s;
   }
-  :host([variant="dots"]) span::before,
-  :host([variant="dots"]) span::after {
+  :host(:is([variant="dots"], :not([variant]))) span::before,
+  :host(:is([variant="dots"], :not([variant]))) span::after {
     content: "";
     position: absolute;
     top: 0;
   }
-  :host([variant="dots"]) span::before {
+  :host(:is([variant="dots"], :not([variant]))) span::before {
     left: -0.75em;
     animation-delay: -0.32s;
   }
-  :host([variant="dots"]) span::after {
+  :host(:is([variant="dots"], :not([variant]))) span::after {
     left: 0.75em;
   }
   @keyframes eun-loader-fade {
@@ -77,9 +77,9 @@ const base = css `
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :host([variant="dots"]) span,
-    :host([variant="dots"]) span::before,
-    :host([variant="dots"]) span::after {
+    :host(:is([variant="dots"], :not([variant]))) span,
+    :host(:is([variant="dots"], :not([variant]))) span::before,
+    :host(:is([variant="dots"], :not([variant]))) span::after {
       animation-duration: 2.8s;
     }
     :host([variant="spinner"]) span {
@@ -140,7 +140,9 @@ const bar = css `
     z-index: var(--loader-bar-z-index, 10);
   }
 
-  :host([variant="bar"][sticky][sticky-position="top"]) {
+  :host(
+    [variant="bar"][sticky]:is([sticky-position="top"], :not([sticky-position]))
+  ) {
     top: var(--loader-bar-sticky-offset, 0);
   }
 

package/dist/components/loader/skeleton/skeleton.js

@@ -82,7 +82,7 @@ let EunomiaSkeleton = class EunomiaSkeleton extends LitElement {
  */
 EunomiaSkeleton.styles = skeletonStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaSkeleton.prototype, "variant", void 0);
 __decorate([
     property()

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

@@ -64,10 +64,10 @@ 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] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
- * @attr {string} [aria-label-previous] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
- * @prop {string} [ariaLabelNext] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
- * @attr {string} [aria-label-next] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
+ * @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
@@ -210,13 +210,13 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      * dictionary when unset, so it follows `locale` automatically.
      * @default {i18n:carousel.previous}
      */
-    ariaLabelPrevious?: string;
+    previousLabel?: string;
     /**
      * 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
@@ -369,6 +369,29 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      * @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
@@ -563,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,10 +54,10 @@ 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] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
- * @attr {string} [aria-label-previous] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
- * @prop {string} [ariaLabelNext] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
- * @attr {string} [aria-label-next] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
+ * @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
@@ -428,6 +428,37 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         }
         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
@@ -493,16 +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 slideStart = this.getInlineStartOffset(slide.getBoundingClientRect(), trackRect) +
+                scrolled -
                 inset;
-            const distance = Math.abs(slideStart - maxScrollLeft);
+            const distance = Math.abs(slideStart - maxScroll);
             if (distance < closestDistance) {
                 closestDistance = distance;
                 max = index;
@@ -613,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;
@@ -712,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 + this.getTrackInset();
+            ? 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) => {
@@ -740,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
@@ -759,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();
@@ -822,8 +861,8 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         id=${direction}
         class="nav"
         aria-label=${isPrev
-            ? (this.ariaLabelPrevious ?? this.dictionary.carousel.previous)
-            : (this.ariaLabelNext ?? this.dictionary.carousel.next)}
+            ? (this.previousLabel ?? this.dictionary.carousel.previous)
+            : (this.nextLabel ?? this.dictionary.carousel.next)}
         aria-controls="track"
         ?disabled=${disabled}
         @click=${() => (isPrev ? this.previous() : this.next())}
@@ -892,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" })
@@ -931,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

@@ -282,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));