@sbb-esta/lyne-elements 1.13.0 → 1.14.0

package/overlay/overlay.d.ts

@@ -26,13 +26,13 @@ export declare class SbbOverlayElement extends SbbOverlayBaseElement {
      * Whether to allow the overlay content to stretch to full width.
      * By default, the content has the appropriate page size.
      */
-    expanded: boolean;
+    accessor expanded: boolean;
     /** Whether a back button is displayed next to the title. */
-    backButton: boolean;
+    accessor backButton: boolean;
     /** This will be forwarded as aria-label to the close button element. */
-    accessibilityCloseLabel: string | undefined;
+    accessor accessibilityCloseLabel: string;
     /** This will be forwarded as aria-label to the back button element. */
-    accessibilityBackLabel: string | undefined;
+    accessor accessibilityBackLabel: string;
     protected closeAttribute: string;
     /** Emits whenever the back button is clicked. */
     private _backClick;

package/overlay/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAS1D,OAAO,EAAe,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iBAAiB,CAAC;AACzB,OAAO,0BAA0B,CAAC;AAElC;;;;;;;;;;;;GAYG;AACH,qBACa,iBAAkB,SAAQ,qBAAqB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;;MAM3B;IAEX;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,4DAA4D;IACE,UAAU,UAAS;IAEjF,wEAAwE;IACX,uBAAuB,EAChF,MAAM,GACN,SAAS,CAAC;IAEd,uEAAuE;IACX,sBAAsB,EAC9E,MAAM,GACN,SAAS,CAAC;IAEd,SAAS,CAAC,cAAc,EAAE,MAAM,CAAuB;IAEvD,iDAAiD;IACjD,OAAO,CAAC,UAAU,CAGhB;IACF,OAAO,CAAC,sBAAsB,CAA4B;IAE1D,2BAA2B;IACpB,IAAI,IAAI,IAAI;IAyBnB,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAgC5D,SAAS,CAAC,eAAe,IAAI,IAAI;cAUd,MAAM,IAAI,cAAc;CAyD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay.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;IAyBnB,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAgC5D,SAAS,CAAC,eAAe,IAAI,IAAI;cAUd,MAAM,IAAI,cAAc;CAyD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/overlay.js

@@ -1,167 +1,200 @@
-import { css as u, nothing as f } from "lit";
-import { property as b, customElement as g } from "lit/decorators.js";
-import { html as d, unsafeStatic as v } from "lit/static-html.js";
-import { SbbFocusHandler as _, setModalityOnNextFocus as h, getFirstFocusableElement as w } from "./core/a11y.js";
-import { EventEmitter as p } from "./core/eventing.js";
-import { i18nDialog as k, i18nCloseDialog as C, i18nGoBack as x } from "./core/i18n.js";
-import { SbbOpenCloseBaseElement as O } from "./core/base-elements.js";
-import { SbbLanguageController as E, SbbInertController as L } from "./core/controllers.js";
-import { SbbScrollHandler as $, hostContext as A } from "./core/dom.js";
-import { SbbNegativeMixin as S } from "./core/mixins.js";
+var I = (s) => {
+  throw TypeError(s);
+};
+var D = (s, i, l) => i.has(s) || I("Cannot " + l);
+var C = (s, i, l) => (D(s, i, "read from private field"), l ? l.call(s) : i.get(s)), w = (s, i, l) => i.has(s) ? I("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, l), d = (s, i, l, r) => (D(s, i, "write to private field"), r ? r.call(s, l) : i.set(s, l), l);
+import { __runInitializers as v, __esDecorate as x } from "tslib";
+import { css as M, nothing as N } from "lit";
+import { property as L, customElement as V } from "lit/decorators.js";
+import { html as z, unsafeStatic as E } from "lit/static-html.js";
+import { SbbFocusHandler as Y, setModalityOnNextFocus as j, getFirstFocusableElement as q } from "./core/a11y.js";
+import { forceType as O } from "./core/decorators.js";
+import { EventEmitter as G } from "./core/eventing.js";
+import { i18nDialog as P, i18nCloseDialog as K, i18nGoBack as U } from "./core/i18n.js";
+import { SbbOpenCloseBaseElement as J } from "./core/base-elements.js";
+import { SbbLanguageController as Q, SbbInertController as W } from "./core/controllers.js";
+import { SbbScrollHandler as X, hostContext as Z } from "./core/dom.js";
+import { SbbNegativeMixin as ee } from "./core/mixins.js";
 import "./button/secondary-button.js";
 import "./button/transparent-button.js";
 import "./container.js";
 import "./screen-reader-only.js";
-var R = Object.defineProperty, B = (t, e, o, a) => {
-  for (var r = void 0, n = t.length - 1, i; n >= 0; n--)
-    (i = t[n]) && (r = i(e, o, r) || r);
-  return r && R(e, o, r), r;
-};
-const l = [], m = class y extends S(O) {
-  constructor() {
-    super(...arguments), this.didClose = new p(
-      this,
-      y.events.didClose
-    ), this.focusHandler = new _(), this.scrollHandler = new $(), this.ariaLiveRefToggle = !1, this.language = new E(this), this.inertController = new L(this);
-  }
-  /** Closes the component. */
-  close(e, o) {
-    if (this.state !== "opened")
-      return;
-    this.returnValue = e, this.overlayCloseElement = o;
-    const a = {
-      returnValue: this.returnValue,
-      closeTarget: this.overlayCloseElement
-    };
-    this.willClose.emit(a) && (this.state = "closing", this.removeAriaLiveRefContent());
-  }
-  connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = this.overlayController) == null || e.abort(), this.overlayController = new AbortController();
-  }
-  firstUpdated(e) {
-    this.ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), super.firstUpdated(e);
-  }
-  disconnectedCallback() {
-    var e, o;
-    super.disconnectedCallback(), (e = this.overlayController) == null || e.abort(), (o = this.openOverlayController) == null || o.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), this.scrollHandler.enableScroll();
-  }
-  attachOpenOverlayEvents() {
-    this.openOverlayController = new AbortController(), window.addEventListener(
-      "keydown",
-      (e) => {
-        this.removeAriaLiveRefContent(), this.onKeydownEvent(e);
-      },
-      {
+const u = [];
+let te = (() => {
+  var h, b;
+  let s = ee(J), i, l = [], r = [];
+  return b = class extends s {
+    constructor() {
+      super(...arguments);
+      w(this, h);
+      d(this, h, v(this, l, "")), this.didClose = (v(this, r), new G(this, b.events.didClose)), this.focusHandler = new Y(), this.scrollHandler = new X(), this.ariaLiveRefToggle = !1, this.language = new Q(this), this.inertController = new W(this);
+    }
+    /** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
+    get accessibilityLabel() {
+      return C(this, h);
+    }
+    set accessibilityLabel(a) {
+      d(this, h, a);
+    }
+    /** Closes the component. */
+    close(a, o) {
+      if (this.state !== "opened")
+        return;
+      this.returnValue = a, this.overlayCloseElement = o;
+      const m = {
+        returnValue: this.returnValue,
+        closeTarget: this.overlayCloseElement
+      };
+      this.willClose.emit(m) && (this.state = "closing", this.removeAriaLiveRefContent());
+    }
+    connectedCallback() {
+      var a;
+      super.connectedCallback(), (a = this.overlayController) == null || a.abort(), this.overlayController = new AbortController();
+    }
+    firstUpdated(a) {
+      this.ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), super.firstUpdated(a);
+    }
+    disconnectedCallback() {
+      var a, o;
+      super.disconnectedCallback(), (a = this.overlayController) == null || a.abort(), (o = this.openOverlayController) == null || o.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), this.scrollHandler.enableScroll();
+    }
+    attachOpenOverlayEvents() {
+      this.openOverlayController = new AbortController(), window.addEventListener("keydown", (a) => {
+        this.removeAriaLiveRefContent(), this.onKeydownEvent(a);
+      }, {
         signal: this.openOverlayController.signal
+      }), window.addEventListener("click", () => this.removeAriaLiveRefContent(), {
+        signal: this.openOverlayController.signal
+      });
+    }
+    onKeydownEvent(a) {
+      if (this.state === "opened" && a.key === "Escape") {
+        u[u.length - 1].close();
+        return;
       }
-    ), window.addEventListener("click", () => this.removeAriaLiveRefContent(), {
-      signal: this.openOverlayController.signal
-    });
-  }
-  onKeydownEvent(e) {
-    if (this.state === "opened" && e.key === "Escape") {
-      l[l.length - 1].close();
-      return;
-    }
-  }
-  removeInstanceFromGlobalCollection() {
-    l.splice(l.indexOf(this), 1);
-  }
-  // Close the component on click of any element that has the `closeAttribute` attribute.
-  closeOnSbbOverlayCloseClick(e) {
-    const o = e.composedPath().filter((r) => r instanceof window.HTMLElement).find(
-      (r) => r.hasAttribute(this.closeAttribute) && !r.hasAttribute("disabled")
-    );
-    if (!o)
-      return;
-    const a = o.getAttribute("type") === "submit" ? A("form", o) : void 0;
-    l[l.length - 1].close(a, o);
-  }
-  removeAriaLiveRefContent() {
-    this.ariaLiveRef.textContent = "";
-  }
-  setAriaLiveRefContent(e) {
-    this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${k[this.language.current]}${e ? `, ${e}` : ""}${this.ariaLiveRefToggle ? " " : ""}`;
-  }
-};
-B([
-  b({ attribute: "accessibility-label" })
-], m.prototype, "accessibilityLabel");
-let F = m;
-const H = u`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-overlay-background-color: var(--sbb-color-milk);--sbb-overlay-height: 100%;--sbb-overlay-inset: 0 auto auto 0;--sbb-overlay-padding-block: calc(var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l));--sbb-overlay-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-overlay-animation-easing: ease;--sbb-overlay-pointer-events: none;display:block;position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}:host(:is([data-state=opened],[data-state=opening])){--sbb-overlay-pointer-events: all}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-overlay-color: var(--sbb-color-white);--sbb-overlay-background-color: var(--sbb-color-midnight)}:host(:not([data-state=closed])){--sbb-overlay-inset: 0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:none;align-items:center;position:fixed;inset:var(--sbb-overlay-inset)}:host([data-state]:not([data-state=closed])) .sbb-overlay__container{display:flex;animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{position:absolute;inset-inline:0;margin:auto;padding:0;border:none;height:var(--sbb-overlay-height);overflow:auto;color:var(--sbb-overlay-color)}:host([data-state]:not([data-state=closed])) .sbb-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{display:flex;flex-direction:column;width:100%;height:var(--sbb-overlay-height);outline:none;position:fixed}@media (min-width: 52.5rem){.sbb-overlay__wrapper{position:sticky;inset-block-start:0;height:auto}}.sbb-overlay__header{position:absolute;inset-inline-start:0;display:flex;pointer-events:none;align-items:start;justify-content:space-between;width:100%;padding:var(--sbb-spacing-responsive-xs);padding-block-end:0;z-index:1}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-overlay__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-overlay__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-overlay__content::-webkit-scrollbar-button,.sbb-overlay__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-overlay__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-overlay__content{height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}.sbb-overlay__content-container{padding-block:var(--sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
-var T = Object.defineProperty, z = Object.getOwnPropertyDescriptor, c = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? z(e, o) : e, n = t.length - 1, i; n >= 0; n--)
-    (i = t[n]) && (r = (a ? i(e, o, r) : i(r)) || r);
-  return a && r && T(e, o, r), r;
-};
-let s = class extends F {
-  constructor() {
-    super(...arguments), this.expanded = !1, this.backButton = !1, this.closeAttribute = "sbb-overlay-close", this._backClick = new p(
-      this,
-      s.events.backClick
-    ), this._overlayContentElement = null;
-  }
-  /** Opens the component. */
-  open() {
-    var t;
-    this.state === "closed" && (this.lastFocusedElement = document.activeElement, this._overlayContentElement = (t = this.shadowRoot) == null ? void 0 : t.querySelector(
-      ".sbb-overlay__content"
-    ), this.willOpen.emit() && (this.state = "opening", l.push(this), this.scrollHandler.disableScroll()));
-  }
-  // Wait for overlay transition to complete.
-  // In rare cases, it can be that the animationEnd event is triggered twice.
-  // To avoid entering a corrupt state, exit when state is not expected.
-  onOverlayAnimationEnd(t) {
-    var e, o, a;
-    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this.inertController.activate(), this.attachOpenOverlayEvents(), this.setOverlayFocus(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusHandler.trap(this)) : t.animationName === "close" && this.state === "closing" && ((e = this._overlayContentElement) == null || e.scrollTo(0, 0), this.state = "closed", this.inertController.deactivate(), h(this.lastFocusedElement), (o = this.lastFocusedElement) == null || o.focus(), (a = this.openOverlayController) == null || a.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), l.length || this.scrollHandler.enableScroll(), this.didClose.emit({
-      returnValue: this.returnValue,
-      closeTarget: this.overlayCloseElement
-    }));
-  }
-  // Set focus on the first focusable element.
-  setOverlayFocus() {
-    const t = w(
-      Array.from(this.shadowRoot.children).filter(
-        (e) => e instanceof window.HTMLElement
-      )
-    );
-    h(t), t == null || t.focus();
-  }
-  render() {
-    const t = this.negative ? "sbb-transparent-button" : "sbb-secondary-button", e = d`
-      <${v(t)}
+    }
+    removeInstanceFromGlobalCollection() {
+      u.splice(u.indexOf(this), 1);
+    }
+    // Close the component on click of any element that has the `closeAttribute` attribute.
+    closeOnSbbOverlayCloseClick(a) {
+      const o = a.composedPath().filter((y) => y instanceof window.HTMLElement).find((y) => y.hasAttribute(this.closeAttribute) && !y.hasAttribute("disabled"));
+      if (!o)
+        return;
+      const m = o.getAttribute("type") === "submit" ? Z("form", o) : void 0;
+      u[u.length - 1].close(m, o);
+    }
+    removeAriaLiveRefContent() {
+      this.ariaLiveRef.textContent = "";
+    }
+    setAriaLiveRefContent(a) {
+      this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${P[this.language.current]}${a ? `, ${a}` : ""}${this.ariaLiveRefToggle ? " " : ""}`;
+    }
+  }, h = new WeakMap(), (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    i = [O(), L({ attribute: "accessibility-label" })], x(b, null, i, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (o) => "accessibilityLabel" in o, get: (o) => o.accessibilityLabel, set: (o, m) => {
+      o.accessibilityLabel = m;
+    } }, metadata: a }, l, r), a && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), b;
+})();
+const ae = M`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-overlay-background-color: var(--sbb-color-milk);--sbb-overlay-height: 100%;--sbb-overlay-inset: 0 auto auto 0;--sbb-overlay-padding-block: calc(var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l));--sbb-overlay-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-overlay-animation-easing: ease;--sbb-overlay-pointer-events: none;display:block;position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}:host(:is([data-state=opened],[data-state=opening])){--sbb-overlay-pointer-events: all}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-overlay-color: var(--sbb-color-white);--sbb-overlay-background-color: var(--sbb-color-midnight)}:host(:not([data-state=closed])){--sbb-overlay-inset: 0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:none;align-items:center;position:fixed;inset:var(--sbb-overlay-inset)}:host([data-state]:not([data-state=closed])) .sbb-overlay__container{display:flex;animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{position:absolute;inset-inline:0;margin:auto;padding:0;border:none;height:var(--sbb-overlay-height);overflow:auto;color:var(--sbb-overlay-color)}:host([data-state]:not([data-state=closed])) .sbb-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{display:flex;flex-direction:column;width:100%;height:var(--sbb-overlay-height);outline:none;position:fixed}@media (min-width: 52.5rem){.sbb-overlay__wrapper{position:sticky;inset-block-start:0;height:auto}}.sbb-overlay__header{position:absolute;inset-inline-start:0;display:flex;pointer-events:none;align-items:start;justify-content:space-between;width:100%;padding:var(--sbb-spacing-responsive-xs);padding-block-end:0;z-index:1}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-overlay__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-overlay__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-overlay__content::-webkit-scrollbar-button,.sbb-overlay__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-overlay__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-overlay__content{height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}.sbb-overlay__content-container{padding-block:var(--sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
+let ke = (() => {
+  var p, f, _, g, n;
+  let s = [V("sbb-overlay")], i, l = [], r, h = te, b, A = [], B = [], a, o = [], m = [], y, $ = [], R = [], T, F = [], H = [];
+  var S = (n = class extends h {
+    constructor() {
+      super(...arguments);
+      w(this, p);
+      w(this, f);
+      w(this, _);
+      w(this, g);
+      d(this, p, v(this, A, !1)), d(this, f, (v(this, B), v(this, o, !1))), d(this, _, (v(this, m), v(this, $, ""))), d(this, g, (v(this, R), v(this, F, ""))), this.closeAttribute = (v(this, H), "sbb-overlay-close"), this._backClick = new G(this, S.events.backClick), this._overlayContentElement = null;
+    }
+    /**
+     * Whether to allow the overlay content to stretch to full width.
+     * By default, the content has the appropriate page size.
+     */
+    get expanded() {
+      return C(this, p);
+    }
+    set expanded(e) {
+      d(this, p, e);
+    }
+    /** Whether a back button is displayed next to the title. */
+    get backButton() {
+      return C(this, f);
+    }
+    set backButton(e) {
+      d(this, f, e);
+    }
+    /** This will be forwarded as aria-label to the close button element. */
+    get accessibilityCloseLabel() {
+      return C(this, _);
+    }
+    set accessibilityCloseLabel(e) {
+      d(this, _, e);
+    }
+    /** This will be forwarded as aria-label to the back button element. */
+    get accessibilityBackLabel() {
+      return C(this, g);
+    }
+    set accessibilityBackLabel(e) {
+      d(this, g, e);
+    }
+    /** Opens the component. */
+    open() {
+      var e;
+      this.state === "closed" && (this.lastFocusedElement = document.activeElement, this._overlayContentElement = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".sbb-overlay__content"), this.willOpen.emit() && (this.state = "opening", u.push(this), this.scrollHandler.disableScroll()));
+    }
+    // Wait for overlay transition to complete.
+    // In rare cases, it can be that the animationEnd event is triggered twice.
+    // To avoid entering a corrupt state, exit when state is not expected.
+    onOverlayAnimationEnd(e) {
+      var t, c, k;
+      e.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this.inertController.activate(), this.attachOpenOverlayEvents(), this.setOverlayFocus(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusHandler.trap(this)) : e.animationName === "close" && this.state === "closing" && ((t = this._overlayContentElement) == null || t.scrollTo(0, 0), this.state = "closed", this.inertController.deactivate(), j(this.lastFocusedElement), (c = this.lastFocusedElement) == null || c.focus(), (k = this.openOverlayController) == null || k.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), u.length || this.scrollHandler.enableScroll(), this.didClose.emit({
+        returnValue: this.returnValue,
+        closeTarget: this.overlayCloseElement
+      }));
+    }
+    // Set focus on the first focusable element.
+    setOverlayFocus() {
+      const e = q(Array.from(this.shadowRoot.children).filter((t) => t instanceof window.HTMLElement));
+      j(e), e == null || e.focus();
+    }
+    render() {
+      const e = this.negative ? "sbb-transparent-button" : "sbb-secondary-button", t = z`
+      <${E(e)}
         class="sbb-overlay__close"
-        aria-label=${this.accessibilityCloseLabel || C[this.language.current]}
+        aria-label=${this.accessibilityCloseLabel || K[this.language.current]}
         ?negative=${this.negative}
         size="m"
         type="button"
         icon-name="cross-small"
         sbb-overlay-close
-      ></${v(t)}>
-    `, o = d`
-      <${v(t)}
+      ></${E(e)}>
+    `, c = z`
+      <${E(e)}
         class="sbb-overlay__back"
-        aria-label=${this.accessibilityBackLabel || x[this.language.current]}
+        aria-label=${this.accessibilityBackLabel || U[this.language.current]}
         ?negative=${this.negative}
         size="m"
         type="button"
         icon-name="chevron-small-left-small"
         @click=${() => this._backClick.emit()}
-      ></${v(t)}>
+      ></${E(e)}>
     `;
-    return d`
+      return z`
       <div
         class="sbb-overlay__container"
-        @animationend=${(a) => this.onOverlayAnimationEnd(a)}
+        @animationend=${(k) => this.onOverlayAnimationEnd(k)}
       >
         <div class="sbb-overlay">
           <div
-            @click=${(a) => this.closeOnSbbOverlayCloseClick(a)}
+            @click=${(k) => this.closeOnSbbOverlayCloseClick(k)}
             class="sbb-overlay__wrapper"
           >
             <div class="sbb-overlay__header">
-              ${this.backButton ? o : f} ${e}
+              ${this.backButton ? c : N} ${t}
             </div>
             <div class="sbb-overlay__content">
               <sbb-container
@@ -177,33 +210,29 @@ let s = class extends F {
       </div>
       <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
     `;
-  }
-};
-s.styles = H;
-s.events = {
-  willOpen: "willOpen",
-  didOpen: "didOpen",
-  willClose: "willClose",
-  didClose: "didClose",
-  backClick: "requestBackAction"
-};
-c([
-  b({ reflect: !0, type: Boolean })
-], s.prototype, "expanded", 2);
-c([
-  b({ attribute: "back-button", type: Boolean })
-], s.prototype, "backButton", 2);
-c([
-  b({ attribute: "accessibility-close-label" })
-], s.prototype, "accessibilityCloseLabel", 2);
-c([
-  b({ attribute: "accessibility-back-label" })
-], s.prototype, "accessibilityBackLabel", 2);
-s = c([
-  g("sbb-overlay")
-], s);
+    }
+  }, p = new WeakMap(), f = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), r = n, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    b = [O(), L({ reflect: !0, type: Boolean })], a = [O(), L({ attribute: "back-button", type: Boolean })], y = [O(), L({ attribute: "accessibility-close-label" })], T = [O(), L({ attribute: "accessibility-back-label" })], x(n, null, b, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (t) => "expanded" in t, get: (t) => t.expanded, set: (t, c) => {
+      t.expanded = c;
+    } }, metadata: e }, A, B), x(n, null, a, { kind: "accessor", name: "backButton", static: !1, private: !1, access: { has: (t) => "backButton" in t, get: (t) => t.backButton, set: (t, c) => {
+      t.backButton = c;
+    } }, metadata: e }, o, m), x(n, null, y, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (t) => "accessibilityCloseLabel" in t, get: (t) => t.accessibilityCloseLabel, set: (t, c) => {
+      t.accessibilityCloseLabel = c;
+    } }, metadata: e }, $, R), x(n, null, T, { kind: "accessor", name: "accessibilityBackLabel", static: !1, private: !1, access: { has: (t) => "accessibilityBackLabel" in t, get: (t) => t.accessibilityBackLabel, set: (t, c) => {
+      t.accessibilityBackLabel = c;
+    } }, metadata: e }, F, H), x(null, i = { value: r }, s, { kind: "class", name: r.name, metadata: e }, null, l), S = r = i.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), n.styles = ae, n.events = {
+    willOpen: "willOpen",
+    didOpen: "didOpen",
+    willClose: "willClose",
+    didClose: "didClose",
+    backClick: "requestBackAction"
+  }, v(r, l), n);
+  return S = r;
+})();
 export {
-  F as SbbOverlayBaseElement,
-  s as SbbOverlayElement,
-  l as overlayRefs
+  te as SbbOverlayBaseElement,
+  ke as SbbOverlayElement,
+  u as overlayRefs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -12,7 +12,8 @@
   "customElements": "custom-elements.json",
   "dependencies": {
     "@lit-labs/observers": "^2.0.4",
-    "lit": "^3.2.1"
+    "lit": "^3.2.1",
+    "tslib": "^2.8.0"
   },
   "publishConfig": {
     "access": "public"
@@ -740,6 +741,21 @@
       "development": "./development/paginator.js",
       "default": "./paginator.js"
     },
+    "./paginator/common.js": {
+      "types": "./development/paginator/common.d.ts",
+      "development": "./development/paginator/common.js",
+      "default": "./paginator/common.js"
+    },
+    "./paginator/compact-paginator.js": {
+      "types": "./development/paginator/compact-paginator.d.ts",
+      "development": "./development/paginator/compact-paginator.js",
+      "default": "./paginator/compact-paginator.js"
+    },
+    "./paginator/paginator.js": {
+      "types": "./development/paginator/paginator.d.ts",
+      "development": "./development/paginator/paginator.js",
+      "default": "./paginator/paginator.js"
+    },
     "./popover.js": {
       "types": "./development/popover.d.ts",
       "development": "./development/popover.js",

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

@@ -0,0 +1,26 @@
+import { LitElement, TemplateResult } from 'lit';
+import { SbbLanguageController } from '../../core/controllers.js';
+import { SbbPaginatorPageEventDetails } from '../../core/interfaces.js';
+import { AbstractConstructor } from '../../core/mixins.js';
+export declare abstract class SbbPaginatorCommonElementMixinType {
+    accessor negative: boolean;
+    accessor disabled: boolean;
+    accessor length: number;
+    accessor pageSize: number;
+    accessor pageIndex: number;
+    accessor pagerPosition: 'start' | 'end';
+    accessor size: 'm' | 's';
+    protected language: SbbLanguageController;
+    protected numberOfPages(): number;
+    protected pageIndexChanged(value: number): void;
+    protected emitPageEvent(previousPageIndex: number): void;
+    protected renderPrevNextButtons(): TemplateResult;
+    protected abstract renderPaginator(): TemplateResult;
+}
+export declare const SbbPaginatorCommonElementMixin: <T extends AbstractConstructor<LitElement>>(superClass: T) => AbstractConstructor<SbbPaginatorCommonElementMixinType> & T;
+declare global {
+    interface HTMLElementEventMap {
+        page: CustomEvent<SbbPaginatorPageEventDetails>;
+    }
+}
+//# sourceMappingURL=paginator-common.d.ts.map

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

@@ -0,0 +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;AAIlE,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,cAC1E,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,CAkJ5D,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}

package/paginator/common.d.ts

@@ -0,0 +1,2 @@
+export * from './common/paginator-common.js';
+//# sourceMappingURL=common.d.ts.map

package/paginator/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/common.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}