@sbb-esta/lyne-elements 2.7.1 → 2.9.0

package/option/option/option.component.d.ts

@@ -0,0 +1,48 @@
+import { CSSResultGroup, TemplateResult, nothing } from 'lit';
+import { EventEmitter } from '../../core/eventing.js';
+import { SbbOptionBaseElement } from './option-base-element.js';
+export type SbbOptionVariant = 'autocomplete' | 'select' | null;
+/**
+ * It displays on option item which can be used in `sbb-select` or `sbb-autocomplete`.
+ *
+ * @slot - Use the unnamed slot to add content to the option label.
+ * @slot icon - Use this slot to provide an icon. If `icon-name` is set, a sbb-icon will be used.
+ * @event {CustomEvent<void>} optionSelectionChange - Emits when the option selection status changes.
+ * @event {CustomEvent<void>} optionSelected - Emits when an option was selected by user.
+ * @cssprop [--sbb-option-icon-container-display=none] - Can be used to reserve space even
+ * when preserve-icon-space on autocomplete is not set or iconName is not set.
+ */
+export declare class SbbOptionElement extends SbbOptionBaseElement {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly selectionChange: "optionSelectionChange";
+        readonly optionSelected: "optionSelected";
+    };
+    protected optionId: string;
+    /** Emits when the option selection status changes. */
+    protected selectionChange: EventEmitter;
+    /** Emits when an option was selected by user. */
+    protected optionSelected: EventEmitter;
+    private set _variant(value);
+    private get _variant();
+    private set _isMultiple(value);
+    private get _isMultiple();
+    protected setAttributeFromParent(): void;
+    protected selectByClick(event: MouseEvent): void;
+    connectedCallback(): void;
+    protected init(): void;
+    private _setVariantByContext;
+    protected handleHighlightState(): void;
+    protected renderIcon(): TemplateResult;
+    protected renderLabel(): TemplateResult | typeof nothing;
+    protected renderTick(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-option': SbbOptionElement;
+    }
+    interface GlobalEventHandlersEventMap {
+        optionSelectionChange: CustomEvent<void>;
+    }
+}
+//# sourceMappingURL=option.component.d.ts.map

package/option/option/option.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAIpC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEhE;;;;;;;;;GASG;AACH,qBAKM,gBAAiB,SAAQ,oBAAoB;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,SAAS,CAAC,QAAQ,SAAgB;IAElC,sDAAsD;IACtD,SAAS,CAAC,eAAe,EAAE,YAAY,CAGrC;IAEF,iDAAiD;IACjD,SAAS,CAAC,cAAc,EAAE,YAAY,CAGpC;IAEF,OAAO,KAAK,QAAQ,QAInB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,WAAW,QAEtB;IACD,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAgBxC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAchC,iBAAiB,IAAI,IAAI;cAItB,IAAI,IAAI,IAAI;IAS/B,OAAO,CAAC,oBAAoB;cAST,oBAAoB,IAAI,IAAI;cAS5B,UAAU,IAAI,cAAc;cAoB5B,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;cAM9C,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;CAKjE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;IAED,UAAU,2BAA2B;QACnC,qBAAqB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAC1C;CACF"}

package/option/option.d.ts

@@ -1,6 +1,6 @@
 /**
  * @entrypoint
  */
-export * from './option/option.js';
+export * from './option/option.component.js';
 export * from './option/option-base-element.js';
 //# sourceMappingURL=option.d.ts.map

package/option/option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../src/elements/option/option.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC"}
+{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../src/elements/option/option.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC"}

package/option/option.js

@@ -1,4 +1,4 @@
-import { SbbOptionElement as t } from "./option/option.js";
+import { SbbOptionElement as t } from "./option/option.component.js";
 import { SbbOptionBaseElement as m } from "./option/option-base-element.js";
 export {
   m as SbbOptionBaseElement,

package/option.js

@@ -1,6 +1,6 @@
-import { SbbOptGroupElement as t } from "./option/optgroup/optgroup.js";
+import { SbbOptGroupElement as t } from "./option/optgroup/optgroup.component.js";
 import { SbbOptgroupBaseElement as r } from "./option/optgroup/optgroup-base-element.js";
-import { SbbOptionElement as m } from "./option/option/option.js";
+import { SbbOptionElement as m } from "./option/option/option.component.js";
 import { SbbOptionBaseElement as f } from "./option/option/option-base-element.js";
 export {
   t as SbbOptGroupElement,

package/overlay/overlay.component.d.ts

@@ -0,0 +1,53 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbOverlayBaseElement } from './overlay-base-element.js';
+/**
+ * It displays an interactive overlay element.
+ *
+ * @slot - Use the unnamed slot to provide a content for the overlay.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-overlay` starts the opening transition. Can be canceled.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-overlay` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-overlay` begins the closing transition. Can be canceled.
+ * @event {CustomEvent<SbbOverlayCloseEventDetails>} didClose - Emits whenever the `sbb-overlay` is closed.
+ * @event {CustomEvent<void>} requestBackAction - Emits whenever the back button is clicked.
+ * @cssprop [--sbb-overlay-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
+ * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
+ */
+export declare class SbbOverlayElement extends SbbOverlayBaseElement {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly willOpen: "willOpen";
+        readonly didOpen: "didOpen";
+        readonly willClose: "willClose";
+        readonly didClose: "didClose";
+        readonly backClick: "requestBackAction";
+    };
+    /**
+     * Whether to allow the overlay content to stretch to full width.
+     * By default, the content has the appropriate page size.
+     */
+    accessor expanded: boolean;
+    /** Whether a back button is displayed next to the title. */
+    accessor backButton: boolean;
+    /** This will be forwarded as aria-label to the close button element. */
+    accessor accessibilityCloseLabel: string;
+    /** This will be forwarded as aria-label to the back button element. */
+    accessor accessibilityBackLabel: string;
+    protected closeAttribute: string;
+    /** Emits whenever the back button is clicked. */
+    private _backClick;
+    private _overlayContentElement;
+    /** Opens the component. */
+    open(): void;
+    protected isZeroAnimationDuration(): boolean;
+    private _handleOpening;
+    protected handleClosing(): void;
+    protected onOverlayAnimationEnd(event: AnimationEvent): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-overlay': SbbOverlayElement;
+    }
+}
+//# sourceMappingURL=overlay.component.d.ts.map

package/overlay/overlay.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.component.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU1D,OAAO,EAAe,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAG/E,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iBAAiB,CAAC;AACzB,OAAO,0BAA0B,CAAC;AAElC;;;;;;;;;;;;GAYG;AACH,qBAEM,iBAAkB,SAAQ,qBAAqB;IACnD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;;MAM3B;IAEX;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,4DAA4D;IAC5D,SAEgB,UAAU,EAAE,OAAO,CAAS;IAE5C,wEAAwE;IACxE,SAEgB,uBAAuB,EAAE,MAAM,CAAM;IAErD,uEAAuE;IACvE,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD,SAAS,CAAC,cAAc,EAAE,MAAM,CAAuB;IAEvD,iDAAiD;IACjD,OAAO,CAAC,UAAU,CAGhB;IACF,OAAO,CAAC,sBAAsB,CAA4B;IAE1D,2BAA2B;IACpB,IAAI,IAAI,IAAI;IA8BnB,SAAS,CAAC,uBAAuB,IAAI,OAAO;IAI5C,OAAO,CAAC,cAAc;cAYH,aAAa,IAAI,IAAI;IAwBxC,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;cAQzC,MAAM,IAAI,cAAc;CAsD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/overlay.d.ts

@@ -1,6 +1,6 @@
 /**
  * @entrypoint
  */
-export * from './overlay/overlay.js';
+export * from './overlay/overlay.component.js';
 export * from './overlay/overlay-base-element.js';
 //# sourceMappingURL=overlay.d.ts.map

package/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/elements/overlay.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/elements/overlay.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC"}

package/overlay.js

@@ -1,4 +1,4 @@
-import { SbbOverlayElement as l } from "./overlay/overlay.js";
+import { SbbOverlayElement as l } from "./overlay/overlay.component.js";
 import { SbbOverlayBaseElement as a, overlayRefs as b } from "./overlay/overlay-base-element.js";
 export {
   a as SbbOverlayBaseElement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "2.7.1",
+  "version": "2.9.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -53,6 +53,10 @@
       "style": "./core.css",
       "default": "./core.css"
     },
+    "./disable-animation.css": {
+      "style": "./disable-animation.css",
+      "default": "./disable-animation.css"
+    },
     "./font-characters-extension.css": {
       "style": "./font-characters-extension.css",
       "default": "./font-characters-extension.css"

package/paginator/common/paginator-common.d.ts

@@ -10,8 +10,18 @@ export declare abstract class SbbPaginatorCommonElementMixinType {
     accessor pageIndex: number;
     accessor pagerPosition: 'start' | 'end';
     accessor size: 'm' | 's';
+    nextPage(): void;
+    previousPage(): void;
+    firstPage(): void;
+    lastPage(): void;
+    selectPage(index: number): void;
+    hasPreviousPage(): boolean;
+    hasNextPage(): boolean;
+    numberOfPages(): number;
     protected language: SbbLanguageController;
-    protected numberOfPages(): number;
+    /**
+     * @deprecated Will be removed with next major change.
+     */
     protected pageIndexChanged(value: number): void;
     protected emitPageEvent(previousPageIndex: number): void;
     protected renderPrevNextButtons(): TemplateResult;

package/paginator/common/paginator-common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginator-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/common/paginator-common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAuB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAKlE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,KAAK,mBAAmB,EAAsC,MAAM,sBAAsB,CAAC;AAEpG,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAAkC;IAC9D,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,SAAS,EAAE,MAAM,CAAC;IAClC,SAAgB,aAAa,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/C,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChC,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAC1C,SAAS,CAAC,aAAa,IAAI,MAAM;IACjC,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/C,SAAS,CAAC,aAAa,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI;IACxD,SAAS,CAAC,qBAAqB,IAAI,cAAc;IACjD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,cAAc;CACrD;AAGD,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACtF,YAAY,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,CAqJ5D,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}
+{"version":3,"file":"paginator-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/common/paginator-common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAuB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAKlE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,KAAK,mBAAmB,EAAsC,MAAM,sBAAsB,CAAC;AAEpG,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAAkC;IAC9D,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,SAAS,EAAE,MAAM,CAAC;IAClC,SAAgB,aAAa,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/C,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IACzB,QAAQ,IAAI,IAAI;IAChB,YAAY,IAAI,IAAI;IACpB,SAAS,IAAI,IAAI;IACjB,QAAQ,IAAI,IAAI;IAChB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,eAAe,IAAI,OAAO;IAC1B,WAAW,IAAI,OAAO;IACtB,aAAa,IAAI,MAAM;IAC9B,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAC1C;;OAEG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/C,SAAS,CAAC,aAAa,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI;IACxD,SAAS,CAAC,qBAAqB,IAAI,cAAc;IACjD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,cAAc;CACrD;AAGD,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACtF,YAAY,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,CAwL5D,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}

package/paginator/common/paginator-common.js

@@ -1,11 +1,11 @@
-var $ = (a) => {
+var k = (a) => {
   throw TypeError(a);
 };
-var k = (a, i, s) => i.has(a) || $("Cannot " + s);
-var _ = (a, i, s) => (k(a, i, "read from private field"), s ? s.call(a) : i.get(a)), x = (a, i, s) => i.has(a) ? $("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, s), d = (a, i, s, m) => (k(a, i, "write to private field"), m ? m.call(a, s) : i.set(a, s), s);
+var C = (a, i, s) => i.has(a) || k("Cannot " + s);
+var x = (a, i, s) => (C(a, i, "read from private field"), s ? s.call(a) : i.get(a)), _ = (a, i, s) => i.has(a) ? k("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, s), d = (a, i, s, m) => (C(a, i, "write to private field"), m ? m.call(a, s) : i.set(a, s), s);
 import { __runInitializers as h, __esDecorate as p } from "tslib";
 import { html as O } from "lit";
-import { property as c } from "lit/decorators.js";
+import { property as u } from "lit/decorators.js";
 import { SbbLanguageController as w } from "../../core/controllers.js";
 import { hostAttributes as D } from "../../core/decorators.js";
 import { isLean as L } from "../../core/dom.js";
@@ -16,16 +16,16 @@ import "../../button/mini-button.js";
 import "../../button/mini-button-group.js";
 import "../../divider.js";
 const ae = (a) => (() => {
-  var l, g, n;
+  var o, l, n;
   let s = [D({
     role: "group"
-  })], m, z = [], o, I = B(T(a)), u = [], f, P, S, v, y = [], E = [], N, C = [], M = [];
-  var b = (n = class extends I {
+  })], m, P = [], g, z = B(T(a)), c = [], I, f, S, v, y = [], N = [], E, M = [], $ = [];
+  var b = (n = class extends z {
     constructor() {
       super(...arguments);
-      x(this, l);
-      x(this, g);
-      this._length = (h(this, u), 0), this._pageSize = 10, this._pageIndex = 0, d(this, l, h(this, y, "start")), d(this, g, (h(this, E), h(this, C, L() ? "s" : "m"))), this._page = (h(this, M), new R(this, b.events.page, { composed: !0, bubbles: !0 })), this.language = new w(this);
+      _(this, o);
+      _(this, l);
+      this._length = (h(this, c), 0), this._pageSize = 10, this._pageIndex = 0, d(this, o, h(this, y, "start")), d(this, l, (h(this, N), h(this, M, L() ? "s" : "m"))), this._page = (h(this, $), new R(this, b.events.page, { composed: !0, bubbles: !0 })), this.language = new w(this);
     }
     /** Total number of items. */
     set length(e) {
@@ -44,27 +44,28 @@ const ae = (a) => (() => {
     }
     /** Current page index. */
     set pageIndex(e) {
-      this._pageIndex = this._coercePageIndexInRange(e);
+      const t = this._pageIndex;
+      this._pageIndex = this._coercePageIndexInRange(e), this.emitPageEvent(t);
     }
     get pageIndex() {
       return this._pageIndex;
     }
     /** Position of the prev/next buttons. */
     get pagerPosition() {
-      return _(this, l);
+      return x(this, o);
     }
     set pagerPosition(e) {
-      d(this, l, e);
+      d(this, o, e);
     }
     /**
      * Size variant, either m or s.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return _(this, g);
+      return x(this, l);
     }
     set size(e) {
-      d(this, g, e);
+      d(this, l, e);
     }
     updated(e) {
       super.updated(e), this.shadowRoot.querySelector("sbb-screen-reader-only").textContent = this._currentPageLabel();
@@ -76,6 +77,35 @@ const ae = (a) => (() => {
     _currentPageLabel() {
       return j(this.pageIndex + 1)[this.language.current];
     }
+    /** Advances to the next page if it exists. */
+    nextPage() {
+      this.pageIndex = this.pageIndex + 1;
+    }
+    /** Move back to the previous page if it exists. */
+    previousPage() {
+      this.pageIndex = this.pageIndex - 1;
+    }
+    /** Move to the first page if not already there. */
+    firstPage() {
+      this.pageIndex = 0;
+    }
+    /** Move to the last page if not already there. */
+    lastPage() {
+      this.pageIndex = this.numberOfPages() - 1;
+    }
+    /** Move to a specific page index. */
+    selectPage(e) {
+      this.pageIndex = e;
+    }
+    /** Whether there is a previous page. */
+    hasPreviousPage() {
+      return this.pageIndex >= 1 && this.pageSize !== 0;
+    }
+    /** Whether there is a next page. */
+    hasNextPage() {
+      const e = this.numberOfPages() - 1;
+      return this.pageIndex < e && this.pageSize !== 0;
+    }
     /**
      * Calculates the current number of pages based on the `length` and the `pageSize`;
      * value must be rounded up (e.g. `length = 21` and `pageSize = 10` means 3 pages).
@@ -86,10 +116,10 @@ const ae = (a) => (() => {
     /**
      * If the `pageIndex` changes due to user interaction,
      * emit the `page` event and then update the `pageIndex` value.
+     * @deprecated Will be removed with next major change.
      */
     pageIndexChanged(e) {
-      const t = this.pageIndex;
-      this.pageIndex = e, t !== this.pageIndex && this.emitPageEvent(t);
+      this.pageIndex = e;
     }
     emitPageEvent(e) {
       this._page.emit({
@@ -106,16 +136,16 @@ const ae = (a) => (() => {
             id="sbb-paginator-prev-page"
             aria-label=${q[this.language.current]}
             icon-name="chevron-small-left-small"
-            ?disabled=${this.disabled || this.pageIndex === 0}
-            @click=${() => this.pageIndexChanged(this._pageIndex - 1)}
+            ?disabled=${this.disabled || !this.hasPreviousPage()}
+            @click=${() => this.previousPage()}
           ></sbb-mini-button>
           <sbb-divider orientation="vertical"></sbb-divider>
           <sbb-mini-button
             id="sbb-paginator-next-page"
             aria-label=${A[this.language.current]}
             icon-name="chevron-small-right-small"
-            ?disabled=${this.disabled || this.pageIndex === this.numberOfPages() - 1}
-            @click=${() => this.pageIndexChanged(this._pageIndex + 1)}
+            ?disabled=${this.disabled || !this.hasNextPage()}
+            @click=${() => this.nextPage()}
           ></sbb-mini-button>
         </sbb-mini-button-group>
       `;
@@ -126,23 +156,23 @@ const ae = (a) => (() => {
         <sbb-screen-reader-only role="status"></sbb-screen-reader-only>
       `;
     }
-  }, l = new WeakMap(), g = new WeakMap(), o = n, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(I[Symbol.metadata] ?? null) : void 0;
-    f = [c({ type: Number })], P = [c({ attribute: "page-size", type: Number })], S = [c({ attribute: "page-index", type: Number })], v = [c({ attribute: "pager-position", reflect: !0 })], N = [c({ reflect: !0 })], p(n, null, f, { kind: "setter", name: "length", static: !1, private: !1, access: { has: (t) => "length" in t, set: (t, r) => {
+  }, o = new WeakMap(), l = new WeakMap(), g = n, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(z[Symbol.metadata] ?? null) : void 0;
+    I = [u({ type: Number })], f = [u({ attribute: "page-size", type: Number })], S = [u({ attribute: "page-index", type: Number })], v = [u({ attribute: "pager-position", reflect: !0 })], E = [u({ reflect: !0 })], p(n, null, I, { kind: "setter", name: "length", static: !1, private: !1, access: { has: (t) => "length" in t, set: (t, r) => {
       t.length = r;
-    } }, metadata: e }, null, u), p(n, null, P, { kind: "setter", name: "pageSize", static: !1, private: !1, access: { has: (t) => "pageSize" in t, set: (t, r) => {
+    } }, metadata: e }, null, c), p(n, null, f, { kind: "setter", name: "pageSize", static: !1, private: !1, access: { has: (t) => "pageSize" in t, set: (t, r) => {
       t.pageSize = r;
-    } }, metadata: e }, null, u), p(n, null, S, { kind: "setter", name: "pageIndex", static: !1, private: !1, access: { has: (t) => "pageIndex" in t, set: (t, r) => {
+    } }, metadata: e }, null, c), p(n, null, S, { kind: "setter", name: "pageIndex", static: !1, private: !1, access: { has: (t) => "pageIndex" in t, set: (t, r) => {
       t.pageIndex = r;
-    } }, metadata: e }, null, u), p(n, null, v, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (t) => "pagerPosition" in t, get: (t) => t.pagerPosition, set: (t, r) => {
+    } }, metadata: e }, null, c), p(n, null, v, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (t) => "pagerPosition" in t, get: (t) => t.pagerPosition, set: (t, r) => {
       t.pagerPosition = r;
-    } }, metadata: e }, y, E), p(n, null, N, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, r) => {
+    } }, metadata: e }, y, N), p(n, null, E, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, r) => {
       t.size = r;
-    } }, metadata: e }, C, M), p(null, m = { value: o }, s, { kind: "class", name: o.name, metadata: e }, null, z), b = o = m.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    } }, metadata: e }, M, $), p(null, m = { value: g }, s, { kind: "class", name: g.name, metadata: e }, null, P), b = g = m.value, e && Object.defineProperty(g, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), n.events = {
     page: "page"
-  }, h(o, z), n);
-  return b = o;
+  }, h(g, P), n);
+  return b = g;
 })();
 export {
   ae as SbbPaginatorCommonElementMixin

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

@@ -0,0 +1,20 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+declare const SbbCompactPaginatorElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbPaginatorCommonElementMixinType> & typeof LitElement;
+/**
+ * It displays a paginator component in compact mode.
+ *
+ * @event {CustomEvent<SbbPaginatorPageEventDetails>} page - Emits when the pageIndex changes.
+ */
+export declare class SbbCompactPaginatorElement extends SbbCompactPaginatorElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: Record<string, string>;
+    private _renderPageNumbers;
+    protected renderPaginator(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-compact-paginator': SbbCompactPaginatorElement;
+    }
+}
+export {};
+//# sourceMappingURL=compact-paginator.component.d.ts.map

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

@@ -0,0 +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;;;;GAIG;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"}

package/paginator/compact-paginator.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './compact-paginator/compact-paginator.js';
+export * from './compact-paginator/compact-paginator.component.js';
 //# sourceMappingURL=compact-paginator.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"compact-paginator.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/compact-paginator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,0CAA0C,CAAC"}
+{"version":3,"file":"compact-paginator.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/compact-paginator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oDAAoD,CAAC"}

package/paginator/compact-paginator.js

@@ -1,4 +1,4 @@
-import { SbbCompactPaginatorElement as a } from "./compact-paginator/compact-paginator.js";
+import { SbbCompactPaginatorElement as a } from "./compact-paginator/compact-paginator.component.js";
 export {
   a as SbbCompactPaginatorElement
 };

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

@@ -0,0 +1,47 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+declare const SbbPaginatorElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbPaginatorCommonElementMixinType> & typeof LitElement;
+/**
+ * It displays a paginator component.
+ *
+ * @event {CustomEvent<SbbPaginatorPageEventDetails>} page - Emits when the pageIndex changes.
+ */
+export declare class SbbPaginatorElement extends SbbPaginatorElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: Record<string, string>;
+    /** The available `pageSize` choices. */
+    accessor pageSizeOptions: number[];
+    /**
+     * 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.
+     */
+    accessor pagerPosition: 'start' | 'end';
+    private _markForFocus;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
+     * emit the `page` event and then update the `pageSize` value.
+     */
+    private _pageSizeChanged;
+    /** Returns the displayed page elements. */
+    private _getVisiblePages;
+    /**
+     * Calculate the pages set based on the following rules:
+     *  - the first page must always be visible;
+     *  - the last page must always be visible;
+     *  - if there are more than `MAX_PAGE_NUMBERS_DISPLAYED` other pages, ellipsis button must be used.
+     */
+    private _getVisiblePagesIndex;
+    /** Creates an array of consecutive numbers given the length and the starting value. */
+    private _range;
+    private _handleKeyUp;
+    private _renderItemPerPageTemplate;
+    private _renderPageNumbers;
+    protected renderPaginator(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-paginator': SbbPaginatorElement;
+    }
+}
+export {};
+//# sourceMappingURL=paginator.component.d.ts.map

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

@@ -0,0 +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;;;;GAIG;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;IAgBzE;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAUxB,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"}