@sbb-esta/lyne-elements 3.3.2 → 3.5.0

package/paginator/common/paginator-common.js

@@ -1,76 +1,110 @@
-var y = (i) => {
+var T = (i) => {
   throw TypeError(i);
 };
-var N = (i, s, a) => s.has(i) || y("Cannot " + a);
-var c = (i, s, a) => (N(i, s, "read from private field"), a ? a.call(i) : s.get(i)), b = (i, s, a) => s.has(i) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), o = (i, s, a, g) => (N(i, s, "write to private field"), g ? g.call(i, a) : s.set(i, a), a);
-import { __runInitializers as p, __esDecorate as u } from "tslib";
-import { html as M } from "lit";
-import { property as d } from "lit/decorators.js";
-import { SbbLanguageController as $ } from "../../core/controllers.js";
-import { isLean as k } from "../../core/dom.js";
-import { i18nSelectedPage as O, i18nPreviousPage as w, i18nNextPage as L } from "../../core/i18n.js";
-import { SbbNegativeMixin as R, SbbDisabledMixin as j, SbbElementInternalsMixin as D } from "../../core/mixins.js";
+var U = (i, r, l) => r.has(i) || T("Cannot " + l);
+var x = (i, r, l) => (U(i, r, "read from private field"), l ? l.call(i) : r.get(i)), _ = (i, r, l) => r.has(i) ? T("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, l), n = (i, r, l, b) => (U(i, r, "write to private field"), b ? b.call(i, l) : r.set(i, l), l);
+import { __runInitializers as g, __esDecorate as c } from "tslib";
+import { html as A } from "lit";
+import { property as h } from "lit/decorators.js";
+import { SbbLanguageController as F } from "../../core/controllers.js";
+import { forceType as m } from "../../core/decorators.js";
+import { isLean as G } from "../../core/dom.js";
+import { i18nPage as H, i18nPaginatorSelected as J, i18nPreviousPage as K, i18nNextPage as Q } from "../../core/i18n.js";
+import { SbbNegativeMixin as V, SbbDisabledMixin as W, SbbElementInternalsMixin as X } from "../../core/mixins.js";
 import "../../button/mini-button.js";
 import "../../button/mini-button-group.js";
 import "../../divider.js";
-const V = (i) => (() => {
-  var h, l, r;
-  let a = R(j(D(i))), g = [], m, x, z, _, P = [], I = [], f, S = [], v = [];
-  return r = class extends a {
+const ce = (i) => (() => {
+  var o, p, u, d, P, a;
+  let l = V(W(X(i))), b = [], y, z, v, f, L = [], I = [], S, N = [], $ = [], k, M = [], O = [], w, R = [], j = [], D, q = [], B = [];
+  return a = class extends l {
     constructor() {
       super(...arguments);
-      b(this, h);
-      b(this, l);
-      this._length = (p(this, g), 0), this._pageSize = 10, this._pageIndex = 0, o(this, h, p(this, P, "start")), o(this, l, (p(this, I), p(this, S, k() ? "s" : "m"))), this.language = (p(this, v), new $(this)), this._previousPageSize = this._pageSize;
+      _(this, o);
+      _(this, p);
+      _(this, u);
+      _(this, d);
+      _(this, P);
+      this._length = (g(this, b), 0), this._pageSize = 10, this._pageIndex = 0, n(this, o, g(this, L, "start")), n(this, p, (g(this, I), g(this, N, G() ? "s" : "m"))), n(this, u, (g(this, $), g(this, M, ""))), n(this, d, (g(this, O), g(this, R, ""))), n(this, P, (g(this, j), g(this, q, ""))), this.language = (g(this, B), new F(this)), this._previousPageSize = this._pageSize;
     }
     /** Total number of items. */
-    set length(e) {
-      this._length = isNaN(e) || e < 0 ? 0 : e, this.pageIndex = this.pageIndex;
+    set length(t) {
+      this._length = isNaN(t) || t < 0 ? 0 : t, this.pageIndex = this.pageIndex;
     }
     get length() {
       return this._length;
     }
     /** Number of items per page. */
-    set pageSize(e) {
-      this._previousPageSize = this.pageSize, this._pageSize = Math.max(e, 0), this.pageIndex = Math.floor(this.pageIndex * this._previousPageSize / this.pageSize) || 0;
+    set pageSize(t) {
+      this._previousPageSize = this.pageSize, this._pageSize = Math.max(t, 0), this.pageIndex = Math.floor(this.pageIndex * this._previousPageSize / this.pageSize) || 0;
     }
     get pageSize() {
       return this._pageSize;
     }
     /** Current page index. */
-    set pageIndex(e) {
-      const t = this._pageIndex;
-      this._pageIndex = this._coercePageIndexInRange(e), this.emitPageEvent(t);
+    set pageIndex(t) {
+      const e = this._pageIndex;
+      this._pageIndex = this._coercePageIndexInRange(t), this.emitPageEvent(e);
     }
     get pageIndex() {
       return this._pageIndex;
     }
     /** Position of the prev/next buttons. */
     get pagerPosition() {
-      return c(this, h);
+      return x(this, o);
     }
-    set pagerPosition(e) {
-      o(this, h, e);
+    set pagerPosition(t) {
+      n(this, o, t);
     }
     /**
      * Size variant, either m or s.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return c(this, l);
+      return x(this, p);
     }
-    set size(e) {
-      o(this, l, e);
+    set size(t) {
+      n(this, p, t);
     }
-    updated(e) {
-      super.updated(e), this.shadowRoot.querySelector("sbb-screen-reader-only").textContent = this._currentPageLabel();
+    /**
+     * Accessibility label for the page. Defaults to `page`.
+     * Can be set for cases like a carousel, where `slide` or `image` fits better.
+     */
+    get accessibilityPageLabel() {
+      return x(this, u);
+    }
+    set accessibilityPageLabel(t) {
+      n(this, u, t);
+    }
+    /**
+     * Accessibility label for the previous page. Defaults to `previous page`.
+     * Can be set for cases like a carousel, where `slide` or `image` fits better.
+     */
+    get accessibilityPreviousPageLabel() {
+      return x(this, d);
+    }
+    set accessibilityPreviousPageLabel(t) {
+      n(this, d, t);
+    }
+    /**
+     * Accessibility label for the next page. Defaults to `next page`.
+     * Can be set for cases like a carousel, where `slide` or `image` fits better.
+     */
+    get accessibilityNextPageLabel() {
+      return x(this, P);
+    }
+    set accessibilityNextPageLabel(t) {
+      n(this, P, t);
+    }
+    updated(t) {
+      super.updated(t), this.shadowRoot.querySelector("sbb-screen-reader-only#status").textContent = this._currentPageLabel();
     }
     /** Evaluate `pageIndex` by excluding edge cases. */
-    _coercePageIndexInRange(e) {
-      return Math.max(Math.min(Math.max(isNaN(e) ? 0 : e, 0), this.numberOfPages() - 1), 0);
+    _coercePageIndexInRange(t) {
+      return Math.max(Math.min(Math.max(isNaN(t) ? 0 : t, 0), this.numberOfPages() - 1), 0);
     }
     _currentPageLabel() {
-      return O(this.pageIndex + 1)[this.language.current];
+      return `${this.accessibilityPageLabel ? this.accessibilityPageLabel : H[this.language.current]} ${this.pageIndex + 1} ${J[this.language.current]}.`;
     }
     /** Advances to the next page if it exists. */
     nextPage() {
@@ -89,8 +123,8 @@ const V = (i) => (() => {
       this.pageIndex = this.numberOfPages() - 1;
     }
     /** Move to a specific page index. */
-    selectPage(e) {
-      this.pageIndex = e;
+    selectPage(t) {
+      this.pageIndex = t;
     }
     /** Whether there is a previous page. */
     hasPreviousPage() {
@@ -98,8 +132,8 @@ const V = (i) => (() => {
     }
     /** Whether there is a next page. */
     hasNextPage() {
-      const e = this.numberOfPages() - 1;
-      return this.pageIndex < e && this.pageSize !== 0;
+      const t = this.numberOfPages() - 1;
+      return this.pageIndex < t && this.pageSize !== 0;
     }
     /**
      * Calculates the current number of pages based on the `length` and the `pageSize`;
@@ -108,8 +142,8 @@ const V = (i) => (() => {
     numberOfPages() {
       return this.pageSize ? Math.ceil(this.length / this.pageSize) : 0;
     }
-    emitPageEvent(e) {
-      if (!this.hasUpdated || this.pageIndex === e && this._previousPageSize === this.pageSize) {
+    emitPageEvent(t) {
+      if (!this.hasUpdated || this.pageIndex === t && this._previousPageSize === this.pageSize) {
         this._previousPageSize = this.pageSize;
         return;
       }
@@ -117,7 +151,7 @@ const V = (i) => (() => {
         bubbles: !0,
         composed: !0,
         detail: {
-          previousPageIndex: e,
+          previousPageIndex: t,
           pageIndex: this.pageIndex,
           length: this.length,
           pageSize: this.pageSize
@@ -125,11 +159,11 @@ const V = (i) => (() => {
       }));
     }
     renderPrevNextButtons() {
-      return M`
+      return A`
         <sbb-mini-button-group ?negative=${this.negative} size=${this.size === "s" ? "s" : "l"}>
           <sbb-mini-button
             id="sbb-paginator-prev-page"
-            aria-label=${w[this.language.current]}
+            aria-label=${this.accessibilityPreviousPageLabel ? this.accessibilityPreviousPageLabel : K[this.language.current]}
             icon-name="chevron-small-left-small"
             ?disabled=${this.disabled || !this.hasPreviousPage()}
             @click=${() => this.previousPage()}
@@ -137,7 +171,7 @@ const V = (i) => (() => {
           <sbb-divider orientation="vertical"></sbb-divider>
           <sbb-mini-button
             id="sbb-paginator-next-page"
-            aria-label=${L[this.language.current]}
+            aria-label=${this.accessibilityNextPageLabel ? this.accessibilityNextPageLabel : Q[this.language.current]}
             icon-name="chevron-small-right-small"
             ?disabled=${this.disabled || !this.hasNextPage()}
             @click=${() => this.nextPage()}
@@ -146,28 +180,34 @@ const V = (i) => (() => {
       `;
     }
     render() {
-      return M`
+      return A`
         ${this.renderPaginator()}
-        <sbb-screen-reader-only role="status"></sbb-screen-reader-only>
+        <sbb-screen-reader-only id="status" role="status"></sbb-screen-reader-only>
       `;
     }
-  }, h = new WeakMap(), l = new WeakMap(), (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    m = [d({ type: Number })], x = [d({ attribute: "page-size", type: Number })], z = [d({ attribute: "page-index", type: Number })], _ = [d({ attribute: "pager-position", reflect: !0 })], f = [d({ reflect: !0 })], u(r, null, m, { kind: "setter", name: "length", static: !1, private: !1, access: { has: (t) => "length" in t, set: (t, n) => {
-      t.length = n;
-    } }, metadata: e }, null, g), u(r, null, x, { kind: "setter", name: "pageSize", static: !1, private: !1, access: { has: (t) => "pageSize" in t, set: (t, n) => {
-      t.pageSize = n;
-    } }, metadata: e }, null, g), u(r, null, z, { kind: "setter", name: "pageIndex", static: !1, private: !1, access: { has: (t) => "pageIndex" in t, set: (t, n) => {
-      t.pageIndex = n;
-    } }, metadata: e }, null, g), u(r, null, _, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (t) => "pagerPosition" in t, get: (t) => t.pagerPosition, set: (t, n) => {
-      t.pagerPosition = n;
-    } }, metadata: e }, P, I), u(r, null, f, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, n) => {
-      t.size = n;
-    } }, metadata: e }, S, v), e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), r.role = "group", r.events = {
+  }, o = new WeakMap(), p = new WeakMap(), u = new WeakMap(), d = new WeakMap(), P = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    y = [h({ type: Number })], z = [h({ attribute: "page-size", type: Number })], v = [h({ attribute: "page-index", type: Number })], f = [h({ attribute: "pager-position", reflect: !0 })], S = [h({ reflect: !0 })], k = [m(), h({ attribute: "accessibility-page-label" })], w = [m(), h({ attribute: "accessibility-previous-page-label" })], D = [m(), h({ attribute: "accessibility-next-page-label" })], c(a, null, y, { kind: "setter", name: "length", static: !1, private: !1, access: { has: (e) => "length" in e, set: (e, s) => {
+      e.length = s;
+    } }, metadata: t }, null, b), c(a, null, z, { kind: "setter", name: "pageSize", static: !1, private: !1, access: { has: (e) => "pageSize" in e, set: (e, s) => {
+      e.pageSize = s;
+    } }, metadata: t }, null, b), c(a, null, v, { kind: "setter", name: "pageIndex", static: !1, private: !1, access: { has: (e) => "pageIndex" in e, set: (e, s) => {
+      e.pageIndex = s;
+    } }, metadata: t }, null, b), c(a, null, f, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (e) => "pagerPosition" in e, get: (e) => e.pagerPosition, set: (e, s) => {
+      e.pagerPosition = s;
+    } }, metadata: t }, L, I), c(a, null, S, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, s) => {
+      e.size = s;
+    } }, metadata: t }, N, $), c(a, null, k, { kind: "accessor", name: "accessibilityPageLabel", static: !1, private: !1, access: { has: (e) => "accessibilityPageLabel" in e, get: (e) => e.accessibilityPageLabel, set: (e, s) => {
+      e.accessibilityPageLabel = s;
+    } }, metadata: t }, M, O), c(a, null, w, { kind: "accessor", name: "accessibilityPreviousPageLabel", static: !1, private: !1, access: { has: (e) => "accessibilityPreviousPageLabel" in e, get: (e) => e.accessibilityPreviousPageLabel, set: (e, s) => {
+      e.accessibilityPreviousPageLabel = s;
+    } }, metadata: t }, R, j), c(a, null, D, { kind: "accessor", name: "accessibilityNextPageLabel", static: !1, private: !1, access: { has: (e) => "accessibilityNextPageLabel" in e, get: (e) => e.accessibilityNextPageLabel, set: (e, s) => {
+      e.accessibilityNextPageLabel = s;
+    } }, metadata: t }, q, B), t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), a.role = "group", a.events = {
     page: "page"
-  }, r;
+  }, a;
 })();
 export {
-  V as SbbPaginatorCommonElementMixin
+  ce as SbbPaginatorCommonElementMixin
 };

package/paginator/compact-paginator/compact-paginator.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compact-paginator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/compact-paginator/compact-paginator.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,kBAAkB,CAAC;;AAI1B;;GAEG;AACH,qBAEM,0BAA2B,SAAQ,+BAA0C;IACjF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,OAAO,CAAC,kBAAkB;cAcP,eAAe,IAAI,cAAc;CASrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}
+{"version":3,"file":"compact-paginator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/compact-paginator/compact-paginator.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,6BAA6B,CAAC;;AAErC;;GAEG;AACH,qBAEM,0BAA2B,SAAQ,+BAA0C;IACjF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,OAAO,CAAC,kBAAkB;cAiBP,eAAe,IAAI,cAAc;CASrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}

package/paginator/compact-paginator/compact-paginator.component.js

@@ -1,24 +1,29 @@
 import { __esDecorate as b, __runInitializers as c } from "tslib";
 import { css as l, LitElement as p, html as a } from "lit";
 import { customElement as m } from "lit/decorators.js";
-import { SbbPaginatorCommonElementMixin as g } from "../common.js";
+import { i18nPage as g, i18nPaginatorOf as d } from "../../core/i18n.js";
+import { SbbPaginatorCommonElementMixin as h } from "../common.js";
 import "../../divider.js";
-const d = l`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-compact-paginator-height: var(--sbb-size-element-m);--sbb-compact-paginator-color: var(--sbb-color-metal);--sbb-paginator-compact-justify-content: start}:host([size=s]){--sbb-compact-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-compact-paginator-color: var(--sbb-color-storm)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-compact-paginator{display:flex;gap:var(--sbb-spacing-fixed-5x);justify-content:var(--sbb-paginator-compact-justify-content);min-height:var(--sbb-compact-paginator-height)}.sbb-paginator__pages{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-compact-paginator-color)}.sbb-compact-paginator__divider{height:1rem}`;
-let x = (() => {
+import "../../screen-reader-only.js";
+const u = l`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-compact-paginator-height: var(--sbb-size-element-m);--sbb-compact-paginator-color: var(--sbb-color-metal);--sbb-paginator-compact-justify-content: start}:host([size=s]){--sbb-compact-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-compact-paginator-color: var(--sbb-color-storm)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-compact-paginator{display:flex;gap:var(--sbb-spacing-fixed-5x);justify-content:var(--sbb-paginator-compact-justify-content);min-height:var(--sbb-compact-paginator-height)}.sbb-paginator__pages{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-compact-paginator-color)}.sbb-compact-paginator__divider{height:1rem}`;
+let z = (() => {
   var t;
-  let n = [m("sbb-compact-paginator")], i, r = [], e, o = g(p);
+  let n = [m("sbb-compact-paginator")], i, r = [], e, o = h(p);
   return t = class extends o {
     _renderPageNumbers() {
       return a`
-      <span class="sbb-paginator__pages"
+      <span class="sbb-paginator__pages" aria-hidden="true"
         >${this.pageIndex + 1}<sbb-divider
-          aria-hidden="true"
           orientation="vertical"
           class="sbb-compact-paginator__divider"
+          style="--sbb-divider-color: currentcolor"
           ?negative=${this.negative}
         ></sbb-divider
         >${this.numberOfPages()}</span
       >
+      <sbb-screen-reader-only>
+        ${`${this.accessibilityPageLabel ? this.accessibilityPageLabel : g[this.language.current]} ${this.pageIndex + 1} ${d[this.language.current]} ${this.numberOfPages()}`}
+      </sbb-screen-reader-only>
     `;
     }
     renderPaginator() {
@@ -31,10 +36,10 @@ let x = (() => {
   }, e = t, (() => {
     const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
     b(null, i = { value: e }, n, { kind: "class", name: e.name, metadata: s }, null, r), e = i.value, s && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
-  })(), t.styles = d, t.events = {
+  })(), t.styles = u, t.events = {
     page: "page"
   }, c(e, r), e;
 })();
 export {
-  x as SbbCompactPaginatorElement
+  z as SbbCompactPaginatorElement
 };

package/paginator/paginator/paginator.component.d.ts

@@ -13,6 +13,11 @@ export declare class SbbPaginatorElement extends SbbPaginatorElement_base {
      * the sbb-select for the pageSize change will be positioned oppositely, with the page numbers always in the center.
      */
     accessor pagerPosition: 'start' | 'end';
+    /**
+     * Accessibility label for the items per page. Defaults to `Items per page.`.
+     * Can be set for cases like a carousel, where `slide` or `image` fits better.
+     */
+    accessor accessibilityItemsPerPageLabel: string;
     private _markForFocus;
     protected updated(changedProperties: PropertyValues<this>): void;
     /** Returns the displayed page elements. */

package/paginator/paginator/paginator.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/paginator/paginator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAWb,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6BAA6B,CAAC;;AAIrC;;GAEG;AACH,qBAEM,mBAAoB,SAAQ,wBAA0C;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,wCAAwC;IACxC,SACgB,eAAe,EAAE,MAAM,EAAE,CAAM;IAE/C;;;OAGG;IACH,SAAmF,aAAa,EAC5F,OAAO,GACP,KAAK,CAAW;IAEpB,OAAO,CAAC,aAAa,CAAuB;cAEzB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAezE,2CAA2C;IAC3C,OAAO,CAAC,gBAAgB;IAIxB;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IA2B7B,uFAAuF;IACvF,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,0BAA0B;IA8BlC,OAAO,CAAC,kBAAkB;cAiCP,eAAe,IAAI,cAAc;CAiBrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}
+{"version":3,"file":"paginator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/paginator/paginator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAYb,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6BAA6B,CAAC;;AAIrC;;GAEG;AACH,qBAEM,mBAAoB,SAAQ,wBAA0C;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,wCAAwC;IACxC,SACgB,eAAe,EAAE,MAAM,EAAE,CAAM;IAE/C;;;OAGG;IACH,SAAmF,aAAa,EAC5F,OAAO,GACP,KAAK,CAAW;IAEpB;;;OAGG;IACH,SAEgB,8BAA8B,EAAE,MAAM,CAAM;IAE5D,OAAO,CAAC,aAAa,CAAuB;cAEzB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAezE,2CAA2C;IAC3C,OAAO,CAAC,gBAAgB;IAIxB;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IA2B7B,uFAAuF;IACvF,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,0BAA0B;IAkClC,OAAO,CAAC,kBAAkB;cAmCP,eAAe,IAAI,cAAc;CAiBrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}

package/paginator/paginator/paginator.component.js

@@ -1,51 +1,63 @@
-var k = (t) => {
+var O = (t) => {
   throw TypeError(t);
 };
-var P = (t, r, i) => r.has(t) || k("Cannot " + i);
-var u = (t, r, i) => (P(t, r, "read from private field"), i ? i.call(t) : r.get(t)), m = (t, r, i) => r.has(t) ? k("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, i), c = (t, r, i, o) => (P(t, r, "write to private field"), o ? o.call(t, i) : r.set(t, i), i);
-import { __runInitializers as d, __esDecorate as h } from "tslib";
-import { css as E, LitElement as j, nothing as S, html as b } from "lit";
-import { customElement as A, property as $ } from "lit/decorators.js";
-import { repeat as I } from "lit/directives/repeat.js";
-import { sbbInputModalityDetector as F } from "../../core/a11y.js";
-import { i18nItemsPerPage as D, i18nPage as N } from "../../core/i18n.js";
-import { SbbPaginatorCommonElementMixin as T } from "../common.js";
+var L = (t, i, r) => i.has(t) || O("Cannot " + r);
+var u = (t, i, r) => (L(t, i, "read from private field"), r ? r.call(t) : i.get(t)), h = (t, i, r) => i.has(t) ? O("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, r), p = (t, i, r, o) => (L(t, i, "write to private field"), o ? o.call(t, r) : i.set(t, r), r);
+import { __runInitializers as g, __esDecorate as _ } from "tslib";
+import { css as F, LitElement as T, nothing as E, html as b } from "lit";
+import { customElement as D, property as f } from "lit/decorators.js";
+import { repeat as j } from "lit/directives/repeat.js";
+import { sbbInputModalityDetector as N } from "../../core/a11y.js";
+import { forceType as M } from "../../core/decorators.js";
+import { i18nItemsPerPage as V, i18nPage as B } from "../../core/i18n.js";
+import { SbbPaginatorCommonElementMixin as G } from "../common.js";
 import "../../form-field.js";
 import "../../select.js";
 import "../../option.js";
 import "../../screen-reader-only.js";
-const M = E`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-paginator-height: var(--sbb-size-element-m);--sbb-paginator-page-color: var(--sbb-color-metal);--sbb-paginator-page-background-color: transparent;--sbb-paginator-page-border-width: 0;--sbb-paginator-page-border-style: none;--sbb-paginator-page-border-color: none;--sbb-paginator-page-cursor: pointer;--sbb-paginator-page-inset: 0;--sbb-paginator-animation-easing: var(--sbb-animation-easing);--sbb-paginator-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-paginator-justify-content: start;--sbb-paginator-wrapping-group-wrap: wrap-reverse;--sbb-paginator-wrap: wrap}:host([size=s]){--sbb-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content: end;--sbb-paginator-wrapping-group-wrap: wrap;--sbb-paginator-wrap: wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content)}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap)}.sbb-paginator__page-size-options{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-page-color)}.sbb-paginator__page-size-options sbb-select{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-form-field-text-color);font-size:var(--sbb-form-field-input-text-size);padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-paginator__pages{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-1x);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;color:var(--sbb-paginator-page-color)}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{display:flex;justify-content:center;align-items:center;width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs)}.sbb-paginator__page--number-item{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;cursor:var(--sbb-paginator-page-cursor);outline:none!important;color:var(--sbb-paginator-page-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:before{content:"";position:absolute;background-color:var(--sbb-paginator-page-background-color);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style) var(--sbb-paginator-page-border-color);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{font-weight:700;--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-color-charcoal)}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-border-color: var(--sbb-color-white)}@media (forced-colors: active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color: Highlight !important}}.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-paginator-page-border-style: dashed;--sbb-paginator-page-border-color: var(--sbb-color-smoke);--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-cursor: default}.sbb-paginator__page--number-item:disabled:not([data-selected]){--sbb-paginator-page-border-width: var(--sbb-border-width-1x)}:host([negative]) .sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-aluminium);--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}@media (forced-colors: active){.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-border-color: GrayText;--sbb-paginator-page-color: GrayText;--sbb-paginator-page-background-color: Canvas}}@media (any-hover: hover){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover: -.0625rem}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}}@media (any-hover: hover) and (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-background-color: var(--sbb-color-cloud);--sbb-paginator-page-inset: 0;--sbb-paginator-translate-y-content-hover: 0}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-background-color: var(--sbb-color-iron)}@media (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover, 0rem))}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, l = 3;
-let Q = (() => {
-  var p, g, s;
-  let t = [A("sbb-paginator")], r, i = [], o, v = T(j), f, _ = [], y = [], x, z = [], w = [];
+const H = F`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-paginator-height: var(--sbb-size-element-m);--sbb-paginator-page-color: var(--sbb-color-metal);--sbb-paginator-page-background-color: transparent;--sbb-paginator-page-border-width: 0;--sbb-paginator-page-border-style: none;--sbb-paginator-page-border-color: none;--sbb-paginator-page-cursor: pointer;--sbb-paginator-page-inset: 0;--sbb-paginator-animation-easing: var(--sbb-animation-easing);--sbb-paginator-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-paginator-justify-content: start;--sbb-paginator-wrapping-group-wrap: wrap-reverse;--sbb-paginator-wrap: wrap}:host([size=s]){--sbb-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content: end;--sbb-paginator-wrapping-group-wrap: wrap;--sbb-paginator-wrap: wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content)}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap)}.sbb-paginator__page-size-options{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-page-color)}.sbb-paginator__page-size-options sbb-select{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-form-field-text-color);font-size:var(--sbb-form-field-input-text-size);padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-paginator__pages{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-1x);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;color:var(--sbb-paginator-page-color)}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{display:flex;justify-content:center;align-items:center;width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs)}.sbb-paginator__page--number-item{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;cursor:var(--sbb-paginator-page-cursor);outline:none!important;color:var(--sbb-paginator-page-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:before{content:"";position:absolute;background-color:var(--sbb-paginator-page-background-color);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style) var(--sbb-paginator-page-border-color);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{font-weight:700;--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-color-charcoal)}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-border-color: var(--sbb-color-white)}@media (forced-colors: active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color: Highlight !important}}.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-paginator-page-border-style: dashed;--sbb-paginator-page-border-color: var(--sbb-color-smoke);--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-cursor: default}.sbb-paginator__page--number-item:disabled:not([data-selected]){--sbb-paginator-page-border-width: var(--sbb-border-width-1x)}:host([negative]) .sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-aluminium);--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}@media (forced-colors: active){.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-border-color: GrayText;--sbb-paginator-page-color: GrayText;--sbb-paginator-page-background-color: Canvas}}@media (any-hover: hover){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover: -.0625rem}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}}@media (any-hover: hover) and (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-background-color: var(--sbb-color-cloud);--sbb-paginator-page-inset: 0;--sbb-paginator-translate-y-content-hover: 0}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-background-color: var(--sbb-color-iron)}@media (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover, 0rem))}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, m = 3;
+let ie = (() => {
+  var l, c, d, s;
+  let t = [D("sbb-paginator")], i, r = [], o, v = G(T), y, x = [], P = [], z, w = [], k = [], I, S = [], $ = [];
   return s = class extends v {
     constructor() {
       super(...arguments);
-      m(this, p);
-      m(this, g);
-      c(this, p, d(this, _, [])), c(this, g, (d(this, y), d(this, z, "start"))), this._markForFocus = (d(this, w), null);
+      h(this, l);
+      h(this, c);
+      h(this, d);
+      p(this, l, g(this, x, [])), p(this, c, (g(this, P), g(this, w, "start"))), p(this, d, (g(this, k), g(this, S, ""))), this._markForFocus = (g(this, $), null);
     }
     /** The available `pageSize` choices. */
     get pageSizeOptions() {
-      return u(this, p);
+      return u(this, l);
     }
-    set pageSizeOptions(a) {
-      c(this, p, a);
+    set pageSizeOptions(e) {
+      p(this, l, e);
     }
     /**
      * Position of the prev/next buttons: if `pageSizeOptions` is set,
      * the sbb-select for the pageSize change will be positioned oppositely, with the page numbers always in the center.
      */
     get pagerPosition() {
-      return u(this, g);
+      return u(this, c);
     }
-    set pagerPosition(a) {
-      c(this, g, a);
+    set pagerPosition(e) {
+      p(this, c, e);
     }
-    updated(a) {
-      if (super.updated(a), this._markForFocus && F.mostRecentModality === "keyboard") {
-        const e = this._getVisiblePages().find((n) => this.pageIndex === +n.getAttribute("data-index"));
-        e && e.focus(), this._markForFocus = null;
+    /**
+     * Accessibility label for the items per page. Defaults to `Items per page.`.
+     * Can be set for cases like a carousel, where `slide` or `image` fits better.
+     */
+    get accessibilityItemsPerPageLabel() {
+      return u(this, d);
+    }
+    set accessibilityItemsPerPageLabel(e) {
+      p(this, d, e);
+    }
+    updated(e) {
+      if (super.updated(e), this._markForFocus && N.mostRecentModality === "keyboard") {
+        const a = this._getVisiblePages().find((n) => this.pageIndex === +n.getAttribute("data-index"));
+        a && a.focus(), this._markForFocus = null;
       }
     }
     /** Returns the displayed page elements. */
@@ -59,34 +71,36 @@ let Q = (() => {
      *  - if there are more than `MAX_PAGE_NUMBERS_DISPLAYED` other pages, ellipsis button must be used.
      */
     _getVisiblePagesIndex() {
-      const a = this.numberOfPages(), e = this.pageIndex;
-      return a <= l + 2 ? this._range(a) : e < l ? [...this._range(l + 1), "ellipsis", a - 1] : e >= a - l ? [
+      const e = this.numberOfPages(), a = this.pageIndex;
+      return e <= m + 2 ? this._range(e) : a < m ? [...this._range(m + 1), "ellipsis", e - 1] : a >= e - m ? [
         0,
         "ellipsis",
-        ...this._range(l + 1, a - 1 - l)
+        ...this._range(m + 1, e - 1 - m)
       ] : [
         0,
         "ellipsis",
-        e - 1,
-        e,
-        e + 1,
+        a - 1,
+        a,
+        a + 1,
         "ellipsis",
-        a - 1
+        e - 1
       ];
     }
     /** Creates an array of consecutive numbers given the length and the starting value. */
-    _range(a, e = 0) {
-      return Array.from({ length: a }, (n, O) => O + e);
+    _range(e, a = 0) {
+      return Array.from({ length: e }, (n, A) => A + a);
     }
-    _handleKeyUp(a) {
-      if (a.key !== " " && a.key !== "Enter")
+    _handleKeyUp(e) {
+      if (e.key !== " " && e.key !== "Enter")
         return;
-      this._getVisiblePages().find((n) => n === a.target) && (this._markForFocus = this.pageIndex);
+      this._getVisiblePages().find((n) => n === e.target) && (this._markForFocus = this.pageIndex);
     }
     _renderItemPerPageTemplate() {
       return this.pageSizeOptions && this.pageSizeOptions.length > 0 ? b`
           <div class="sbb-paginator__page-size-options">
-            <label for="select">${D[this.language.current]}</label>
+            <label for="select"
+              >${this.accessibilityItemsPerPageLabel ? this.accessibilityItemsPerPageLabel : V[this.language.current]}</label
+            >
             <sbb-form-field
               borderless
               width="collapse"
@@ -96,35 +110,35 @@ let Q = (() => {
               <sbb-select
                 id="select"
                 ?disabled=${this.disabled}
-                value=${this.pageSizeOptions?.find((a) => a === this.pageSize) ?? this.pageSizeOptions[0]}
-                @change=${(a) => this.pageSize = +a.target.value}
+                value=${this.pageSizeOptions?.find((e) => e === this.pageSize) ?? this.pageSizeOptions[0]}
+                @change=${(e) => this.pageSize = +e.target.value}
               >
-                ${I(this.pageSizeOptions, (a) => b`<sbb-option value=${a}>${a}</sbb-option>`)}
+                ${j(this.pageSizeOptions, (e) => b`<sbb-option value=${e}>${e}</sbb-option>`)}
               </sbb-select>
             </sbb-form-field>
           </div>
-        ` : S;
+        ` : E;
     }
     _renderPageNumbers() {
       return b`
       <ul class="sbb-paginator__pages">
-        ${I(this._getVisiblePagesIndex(), (a) => a === "ellipsis" ? b`
+        ${j(this._getVisiblePagesIndex(), (e) => e === "ellipsis" ? b`
                   <li class="sbb-paginator__page--ellipsis">
                     <span class="sbb-paginator__page--ellipsis-item">…</span>
                   </li>
                 ` : b`
                   <li class="sbb-paginator__page--number">
                     <button
-                      ?data-selected=${this.pageIndex === a}
+                      ?data-selected=${this.pageIndex === e}
                       ?disabled=${this.disabled}
                       class="sbb-paginator__page--number-item"
-                      data-index=${a}
-                      aria-label="${N[this.language.current]} ${a + 1}"
-                      aria-current=${this.pageIndex === a ? "true" : S}
-                      @click=${() => this.pageIndex = a}
+                      data-index=${e}
+                      aria-label="${this.accessibilityPageLabel ? this.accessibilityPageLabel : B[this.language.current]} ${e + 1}"
+                      aria-current=${this.pageIndex === e ? "true" : E}
+                      @click=${() => this.pageIndex = e}
                       @keyup=${this._handleKeyUp}
                     >
-                      <span class="sbb-paginator__page--number-item-label">${a + 1}</span>
+                      <span class="sbb-paginator__page--number-item-label">${e + 1}</span>
                     </button>
                   </li>
                 `)}
@@ -144,17 +158,19 @@ let Q = (() => {
       </div>
     `;
     }
-  }, p = new WeakMap(), g = new WeakMap(), o = s, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    f = [$({ attribute: "page-size-options", type: Array })], x = [$({ attribute: "pager-position", reflect: !0 })], h(s, null, f, { kind: "accessor", name: "pageSizeOptions", static: !1, private: !1, access: { has: (e) => "pageSizeOptions" in e, get: (e) => e.pageSizeOptions, set: (e, n) => {
-      e.pageSizeOptions = n;
-    } }, metadata: a }, _, y), h(s, null, x, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (e) => "pagerPosition" in e, get: (e) => e.pagerPosition, set: (e, n) => {
-      e.pagerPosition = n;
-    } }, metadata: a }, z, w), h(null, r = { value: o }, t, { kind: "class", name: o.name, metadata: a }, null, i), o = r.value, a && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), s.styles = M, s.events = {
+  }, l = new WeakMap(), c = new WeakMap(), d = new WeakMap(), o = s, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    y = [f({ attribute: "page-size-options", type: Array })], z = [f({ attribute: "pager-position", reflect: !0 })], I = [M(), f({ attribute: "accessibility-items-per-page-label" })], _(s, null, y, { kind: "accessor", name: "pageSizeOptions", static: !1, private: !1, access: { has: (a) => "pageSizeOptions" in a, get: (a) => a.pageSizeOptions, set: (a, n) => {
+      a.pageSizeOptions = n;
+    } }, metadata: e }, x, P), _(s, null, z, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (a) => "pagerPosition" in a, get: (a) => a.pagerPosition, set: (a, n) => {
+      a.pagerPosition = n;
+    } }, metadata: e }, w, k), _(s, null, I, { kind: "accessor", name: "accessibilityItemsPerPageLabel", static: !1, private: !1, access: { has: (a) => "accessibilityItemsPerPageLabel" in a, get: (a) => a.accessibilityItemsPerPageLabel, set: (a, n) => {
+      a.accessibilityItemsPerPageLabel = n;
+    } }, metadata: e }, S, $), _(null, i = { value: o }, t, { kind: "class", name: o.name, metadata: e }, null, r), o = i.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), s.styles = H, s.events = {
     page: "page"
-  }, d(o, i), o;
+  }, g(o, r), o;
 })();
 export {
-  Q as SbbPaginatorElement
+  ie as SbbPaginatorElement
 };