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

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

@@ -11,6 +11,7 @@ import { debounce } from "../../../utils/time.utils.js";
 import { SlideChangeEvent } from "../../../events/slidechange.event.js";
 import { carouselStyles } from "./carousel.styles.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the carousel component.
  */
@@ -54,10 +55,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
@@ -154,8 +155,7 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
          * Fades the viewport's edges to hint there's more to scroll — hidden
          * automatically on whichever side is already at its scroll bound (never
          * shown on the left at the very start, or the right at the very end).
-         * On by default ; set the *property* to `false` to turn it off (see the
-         * Examples tab for the boolean-attribute caveat that applies here too).
+         * On by default ; `edge-fade="false"` turns it off.
          * @default true
          */
         this.edgeFade = true;
@@ -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" })
@@ -904,7 +943,11 @@ __decorate([
     property({ type: Number, attribute: "visible-slides" })
 ], EunomiaCarousel.prototype, "visibleSlides", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: "full-slides" })
+    property({
+        converter: defaultTrueConverter,
+        reflect: true,
+        attribute: "full-slides",
+    })
 ], EunomiaCarousel.prototype, "fullSlides", void 0);
 __decorate([
     property({ type: Number, attribute: "scroll-step" })
@@ -913,7 +956,11 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: "center-snap" })
 ], EunomiaCarousel.prototype, "centerSnap", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: "edge-fade" })
+    property({
+        converter: defaultTrueConverter,
+        reflect: true,
+        attribute: "edge-fade",
+    })
 ], EunomiaCarousel.prototype, "edgeFade", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -925,17 +972,17 @@ __decorate([
     property({ type: Number, attribute: "autoplay-interval" })
 ], EunomiaCarousel.prototype, "autoplayInterval", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "show-arrows" })
+    property({ converter: defaultTrueConverter, attribute: "show-arrows" })
 ], EunomiaCarousel.prototype, "showArrows", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "show-dots" })
+    property({ converter: defaultTrueConverter, 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

@@ -130,8 +130,8 @@ const base = css `
       transparent
     );
   }
-  :host(:not([edge-fade])) #viewport::before,
-  :host(:not([edge-fade])) #viewport::after {
+  :host(:is(:not([edge-fade]), [edge-fade="false"])) #viewport::before,
+  :host(:is(:not([edge-fade]), [edge-fade="false"])) #viewport::after {
     content: none;
   }
 
@@ -184,7 +184,7 @@ const base = css `
     transition: transform var(--eun-duration-m, 200ms)
       var(--eun-easing-default, ease);
   }
-  :host([full-slides]) ::slotted(:not([slot])) {
+  :host([full-slides]:not([full-slides="false"])) ::slotted(:not([slot])) {
     --_slideBasis: max(
       var(--carousel-min-slide-width, 220px),
       calc(
@@ -196,7 +196,8 @@ const base = css `
       )
     );
   }
-  :host(:not([full-slides])) ::slotted(:not([slot])) {
+  :host(:is(:not([full-slides]), [full-slides="false"]))
+    ::slotted(:not([slot])) {
     --_slideBasis: max(
       var(--carousel-min-slide-width, 220px),
       calc(
@@ -282,11 +283,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));

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

@@ -3,6 +3,7 @@ import { LitElement, TemplateResult } from "lit";
  * Tag name of the pagination component.
  */
 export declare const EunomiaPaginationTagName = "eun-pagination";
+declare const EunomiaPagination_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A set of page numbers letting someone jump between the pages of a
  * longer list, such as a search results page or a data table, with First,
@@ -38,16 +39,16 @@ export declare const EunomiaPaginationTagName = "eun-pagination";
  * @attr {string} [page-size-options='[]'] - The selectable page sizes, as a JSON array such as [10,25,50]. Setting this renders a page-size selector alongside the page controls. Left empty, the default, no selector is rendered at all
  * @prop {string} [pageSizeLabel='Items per page'] - The label for the page-size selector
  * @attr {string} [page-size-label='Items per page'] - The label for the page-size selector
- * @prop {string} [ariaLabelPrevious='Previous page'] - The accessible label of the previous control
- * @attr {string} [aria-label-previous='Previous page'] - The accessible label of the previous control
- * @prop {string} [ariaLabelNext='Next page'] - The accessible label of the next control
- * @attr {string} [aria-label-next='Next page'] - The accessible label of the next control
- * @prop {string} [ariaLabelFirst='First page'] - The accessible label of the first control
- * @attr {string} [aria-label-first='First page'] - The accessible label of the first control
- * @prop {string} [ariaLabelLast='Last page'] - The accessible label of the last control
- * @attr {string} [aria-label-last='Last page'] - The accessible label of the last control
- * @prop {string} [ariaLabelPage='Page'] - The accessible label prefix applied to every page number control, such as Page 3
- * @attr {string} [aria-label-page='Page'] - The accessible label prefix applied to every page number control, such as Page 3
+ * @prop {string} [previousLabel] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous page")
+ * @attr {string} [previous-label] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous page")
+ * @prop {string} [nextLabel] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next page")
+ * @attr {string} [next-label] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next page")
+ * @prop {string} [firstLabel] - The accessible label of the first control. Defaults to the localized string for the current locale (English: "First page")
+ * @attr {string} [first-label] - The accessible label of the first control. Defaults to the localized string for the current locale (English: "First page")
+ * @prop {string} [lastLabel] - The accessible label of the last control. Defaults to the localized string for the current locale (English: "Last page")
+ * @attr {string} [last-label] - The accessible label of the last control. Defaults to the localized string for the current locale (English: "Last page")
+ * @prop {string} [pageLabel] - The accessible label prefix applied to every page number control, such as Page 3. Defaults to the localized string for the current locale (English: "Page")
+ * @attr {string} [page-label] - The accessible label prefix applied to every page number control, such as Page 3. Defaults to the localized string for the current locale (English: "Page")
  * @attr {string} [aria-label='Pagination'] - The accessible label for the navigation landmark
  * @fires {PageChangeEvent} eunpagechange - Fired with the requested page whenever a control is activated. Page is never updated internally
  * @fires {PageSizeChangeEvent} eunpagesizechange - Fired with the chosen value whenever the page-size selector changes. PageSize is never updated internally
@@ -68,7 +69,7 @@ export declare const EunomiaPaginationTagName = "eun-pagination";
  * @cssprop [--pagination-transition-duration] - Sets the duration of the hover color and background transition
  * @element eun-pagination
  */
-export declare class EunomiaPagination extends LitElement {
+export declare class EunomiaPagination extends EunomiaPagination_base {
     /**
      * Styles to import to the component.
      *
@@ -142,30 +143,30 @@ export declare class EunomiaPagination extends LitElement {
     pageSizeLabel: string;
     /**
      * Accessible label of the Previous control.
-     * @default Previous page
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelPrevious: string;
+    previousLabel?: string;
     /**
      * Accessible label of the Next control.
-     * @default Next page
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelNext: string;
+    nextLabel?: string;
     /**
      * Accessible label of the First control.
-     * @default First page
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelFirst: string;
+    firstLabel?: string;
     /**
      * Accessible label of the Last control.
-     * @default Last page
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelLast: string;
+    lastLabel?: string;
     /**
      * Accessible label prefix applied to every page number control (e.g.
      * "Page 3").
-     * @default Page
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelPage: string;
+    pageLabel?: string;
     /**
      * Builds the list of entries rendered between the first/previous and
      * next/last controls : the boundary pages, the current page's siblings,
@@ -244,3 +245,4 @@ declare global {
         [EunomiaPaginationTagName]: EunomiaPagination;
     }
 }
+export {};

package/dist/components/navigation/pagination/pagination.js

@@ -10,6 +10,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { PageChangeEvent } from "../../../events/pagechange.event.js";
 import { PageSizeChangeEvent } from "../../../events/pagesizechange.event.js";
 import { paginationStyles } from "./pagination.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the pagination component.
  */
@@ -49,16 +50,16 @@ export const EunomiaPaginationTagName = "eun-pagination";
  * @attr {string} [page-size-options='[]'] - The selectable page sizes, as a JSON array such as [10,25,50]. Setting this renders a page-size selector alongside the page controls. Left empty, the default, no selector is rendered at all
  * @prop {string} [pageSizeLabel='Items per page'] - The label for the page-size selector
  * @attr {string} [page-size-label='Items per page'] - The label for the page-size selector
- * @prop {string} [ariaLabelPrevious='Previous page'] - The accessible label of the previous control
- * @attr {string} [aria-label-previous='Previous page'] - The accessible label of the previous control
- * @prop {string} [ariaLabelNext='Next page'] - The accessible label of the next control
- * @attr {string} [aria-label-next='Next page'] - The accessible label of the next control
- * @prop {string} [ariaLabelFirst='First page'] - The accessible label of the first control
- * @attr {string} [aria-label-first='First page'] - The accessible label of the first control
- * @prop {string} [ariaLabelLast='Last page'] - The accessible label of the last control
- * @attr {string} [aria-label-last='Last page'] - The accessible label of the last control
- * @prop {string} [ariaLabelPage='Page'] - The accessible label prefix applied to every page number control, such as Page 3
- * @attr {string} [aria-label-page='Page'] - The accessible label prefix applied to every page number control, such as Page 3
+ * @prop {string} [previousLabel] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous page")
+ * @attr {string} [previous-label] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous page")
+ * @prop {string} [nextLabel] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next page")
+ * @attr {string} [next-label] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next page")
+ * @prop {string} [firstLabel] - The accessible label of the first control. Defaults to the localized string for the current locale (English: "First page")
+ * @attr {string} [first-label] - The accessible label of the first control. Defaults to the localized string for the current locale (English: "First page")
+ * @prop {string} [lastLabel] - The accessible label of the last control. Defaults to the localized string for the current locale (English: "Last page")
+ * @attr {string} [last-label] - The accessible label of the last control. Defaults to the localized string for the current locale (English: "Last page")
+ * @prop {string} [pageLabel] - The accessible label prefix applied to every page number control, such as Page 3. Defaults to the localized string for the current locale (English: "Page")
+ * @attr {string} [page-label] - The accessible label prefix applied to every page number control, such as Page 3. Defaults to the localized string for the current locale (English: "Page")
  * @attr {string} [aria-label='Pagination'] - The accessible label for the navigation landmark
  * @fires {PageChangeEvent} eunpagechange - Fired with the requested page whenever a control is activated. Page is never updated internally
  * @fires {PageSizeChangeEvent} eunpagesizechange - Fired with the chosen value whenever the page-size selector changes. PageSize is never updated internally
@@ -79,7 +80,7 @@ export const EunomiaPaginationTagName = "eun-pagination";
  * @cssprop [--pagination-transition-duration] - Sets the duration of the hover color and background transition
  * @element eun-pagination
  */
-let EunomiaPagination = class EunomiaPagination extends LitElement {
+let EunomiaPagination = class EunomiaPagination extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -139,32 +140,6 @@ let EunomiaPagination = class EunomiaPagination extends LitElement {
          * @default Items per page
          */
         this.pageSizeLabel = "Items per page";
-        /**
-         * Accessible label of the Previous control.
-         * @default Previous page
-         */
-        this.ariaLabelPrevious = "Previous page";
-        /**
-         * Accessible label of the Next control.
-         * @default Next page
-         */
-        this.ariaLabelNext = "Next page";
-        /**
-         * Accessible label of the First control.
-         * @default First page
-         */
-        this.ariaLabelFirst = "First page";
-        /**
-         * Accessible label of the Last control.
-         * @default Last page
-         */
-        this.ariaLabelLast = "Last page";
-        /**
-         * Accessible label prefix applied to every page number control (e.g.
-         * "Page 3").
-         * @default Page
-         */
-        this.ariaLabelPage = "Page";
     }
     /**
      * Builds the list of entries rendered between the first/previous and
@@ -319,7 +294,8 @@ let EunomiaPagination = class EunomiaPagination extends LitElement {
           <span
             class="page current"
             aria-current="page"
-            aria-label="${this.ariaLabelPage} ${item}"
+            aria-label="${this.pageLabel ??
+                this.dictionary.pagination.page} ${item}"
             >${item}</span
           >
         </li>
@@ -330,7 +306,8 @@ let EunomiaPagination = class EunomiaPagination extends LitElement {
         <button
           type="button"
           class="control page"
-          aria-label="${this.ariaLabelPage} ${item}"
+          aria-label="${this.pageLabel ??
+            this.dictionary.pagination.page} ${item}"
           ?disabled=${this.disabled}
           @click=${() => this.requestPage(item)}
         >
@@ -347,17 +324,17 @@ let EunomiaPagination = class EunomiaPagination extends LitElement {
         <ul id="list" role="list">
           ${this.hideFirstLast
             ? nothing
-            : this.renderControl(1, this.ariaLabelFirst, "first_page", this.page <= 1, "start")}
+            : this.renderControl(1, this.firstLabel ?? this.dictionary.pagination.first, "first_page", this.page <= 1, "start")}
           ${this.hidePrevNext
             ? nothing
-            : this.renderControl(this.page - 1, this.ariaLabelPrevious, "chevron_left", this.page <= 1, "start")}
+            : this.renderControl(this.page - 1, this.previousLabel ?? this.dictionary.pagination.previous, "chevron_left", this.page <= 1, "start")}
           ${this.getPageItems().map((item) => this.renderItem(item))}
           ${this.hidePrevNext
             ? nothing
-            : this.renderControl(this.page + 1, this.ariaLabelNext, "chevron_right", this.page >= this.totalPages, "end")}
+            : this.renderControl(this.page + 1, this.nextLabel ?? this.dictionary.pagination.next, "chevron_right", this.page >= this.totalPages, "end")}
           ${this.hideFirstLast
             ? nothing
-            : this.renderControl(this.totalPages, this.ariaLabelLast, "last_page", this.page >= this.totalPages, "end")}
+            : this.renderControl(this.totalPages, this.lastLabel ?? this.dictionary.pagination.last, "last_page", this.page >= this.totalPages, "end")}
         </ul>
       </nav>
     `;
@@ -406,20 +383,20 @@ __decorate([
     property({ attribute: "page-size-label" })
 ], EunomiaPagination.prototype, "pageSizeLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-previous" })
-], EunomiaPagination.prototype, "ariaLabelPrevious", void 0);
+    property({ attribute: "previous-label" })
+], EunomiaPagination.prototype, "previousLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-next" })
-], EunomiaPagination.prototype, "ariaLabelNext", void 0);
+    property({ attribute: "next-label" })
+], EunomiaPagination.prototype, "nextLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-first" })
-], EunomiaPagination.prototype, "ariaLabelFirst", void 0);
+    property({ attribute: "first-label" })
+], EunomiaPagination.prototype, "firstLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-last" })
-], EunomiaPagination.prototype, "ariaLabelLast", void 0);
+    property({ attribute: "last-label" })
+], EunomiaPagination.prototype, "lastLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-page" })
-], EunomiaPagination.prototype, "ariaLabelPage", void 0);
+    property({ attribute: "page-label" })
+], EunomiaPagination.prototype, "pageLabel", void 0);
 EunomiaPagination = __decorate([
     customElement(EunomiaPaginationTagName)
 ], EunomiaPagination);