@sbb-esta/lyne-elements 2.6.0 → 2.7.0

package/overlay/overlay.js

@@ -0,0 +1,156 @@
+var Y = (a) => {
+  throw TypeError(a);
+};
+var j = (a, s, o) => s.has(a) || Y("Cannot " + o);
+var y = (a, s, o) => (j(a, s, "read from private field"), o ? o.call(a) : s.get(a)), p = (a, s, o) => s.has(a) ? Y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, o), n = (a, s, o, l) => (j(a, s, "write to private field"), l ? l.call(a, o) : s.set(a, o), o);
+import { __runInitializers as b, __esDecorate as u } from "tslib";
+import { css as G, nothing as N } from "lit";
+import { customElement as P, property as _ } from "lit/decorators.js";
+import { unsafeStatic as g, html as x } from "lit/static-html.js";
+import { forceType as k } from "../core/decorators.js";
+import { isZeroAnimationDuration as R } from "../core/dom.js";
+import { EventEmitter as Z, forwardEvent as q } from "../core/eventing.js";
+import { i18nCloseDialog as H, i18nGoBack as V } from "../core/i18n.js";
+import { SbbOverlayBaseElement as M, overlayRefs as F } from "./overlay-base-element.js";
+import "../button/secondary-button.js";
+import "../button/transparent-button.js";
+import "../container.js";
+import "../screen-reader-only.js";
+const J = G`*,: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-duration, var(--sbb-animation-duration-6x) );--sbb-overlay-animation-easing: ease;--sbb-overlay-pointer-events: none;display:none;position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}:host([data-state]:not([data-state=closed])){display:block}:host(:is([data-state=opening],[data-state=opened])){--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 ce = (() => {
+  var c, d, v, h, i;
+  let a = [P("sbb-overlay")], s, o = [], l, w = M, C, B = [], L = [], O, E = [], z = [], $, S = [], A = [], T, I = [], D = [];
+  var f = (i = class extends w {
+    constructor() {
+      super(...arguments);
+      p(this, c);
+      p(this, d);
+      p(this, v);
+      p(this, h);
+      n(this, c, b(this, B, !1)), n(this, d, (b(this, L), b(this, E, !1))), n(this, v, (b(this, z), b(this, S, ""))), n(this, h, (b(this, A), b(this, I, ""))), this.closeAttribute = (b(this, D), "sbb-overlay-close"), this._backClick = new Z(this, f.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 y(this, c);
+    }
+    set expanded(t) {
+      n(this, c, t);
+    }
+    /** Whether a back button is displayed next to the title. */
+    get backButton() {
+      return y(this, d);
+    }
+    set backButton(t) {
+      n(this, d, t);
+    }
+    /** This will be forwarded as aria-label to the close button element. */
+    get accessibilityCloseLabel() {
+      return y(this, v);
+    }
+    set accessibilityCloseLabel(t) {
+      n(this, v, t);
+    }
+    /** This will be forwarded as aria-label to the back button element. */
+    get accessibilityBackLabel() {
+      return y(this, h);
+    }
+    set accessibilityBackLabel(t) {
+      n(this, h, t);
+    }
+    /** Opens the component. */
+    open() {
+      var t, e;
+      this.state === "closed" && (this.lastFocusedElement = document.activeElement, this._overlayContentElement = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".sbb-overlay__content"), this.willOpen.emit() && ((e = this.showPopover) == null || e.call(this), this.state = "opening", F.push(this), this.scrollHandler.disableScroll(), this.isZeroAnimationDuration() && this._handleOpening()));
+    }
+    isZeroAnimationDuration() {
+      return R(this, "--sbb-overlay-animation-duration");
+    }
+    _handleOpening() {
+      this.state = "opened", this.inertController.activate(), this.sbbEscapableOverlayController.connect(), this.attachOpenOverlayEvents(), this.focusTrapController.focusInitialElement(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusTrapController.enabled = !0, this.didOpen.emit();
+    }
+    handleClosing() {
+      var t, e, r, m;
+      (t = this._overlayContentElement) == null || t.scrollTo(0, 0), this.state = "closed", (e = this.hidePopover) == null || e.call(this), this.inertController.deactivate(), (r = this.lastFocusedElement) == null || r.focus(), (m = this.openOverlayController) == null || m.abort(), this.focusTrapController.enabled = !1, this.removeInstanceFromGlobalCollection(), F.length || this.scrollHandler.enableScroll(), this.sbbEscapableOverlayController.disconnect(), this.didClose.emit({
+        returnValue: this.returnValue,
+        closeTarget: this.overlayCloseElement
+      });
+    }
+    // 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) {
+      t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this.handleClosing();
+    }
+    render() {
+      const t = this.negative ? "sbb-transparent-button" : "sbb-secondary-button", e = x`
+      <${g(t)}
+        class="sbb-overlay__close"
+        aria-label=${this.accessibilityCloseLabel || H[this.language.current]}
+        ?negative=${this.negative}
+        size="m"
+        type="button"
+        icon-name="cross-small"
+        sbb-overlay-close
+      ></${g(t)}>
+    `, r = x`
+      <${g(t)}
+        class="sbb-overlay__back"
+        aria-label=${this.accessibilityBackLabel || V[this.language.current]}
+        ?negative=${this.negative}
+        size="m"
+        type="button"
+        icon-name="chevron-small-left-small"
+        @click=${() => this._backClick.emit()}
+      ></${g(t)}>
+    `;
+      return x`
+      <div class="sbb-overlay__container" @animationend=${this.onOverlayAnimationEnd}>
+        <div class="sbb-overlay">
+          <div
+            @click=${(m) => this.closeOnSbbOverlayCloseClick(m)}
+            class="sbb-overlay__wrapper"
+          >
+            <div class="sbb-overlay__header">
+              ${this.backButton ? r : N} ${e}
+            </div>
+            <div class="sbb-overlay__content" @scroll=${(m) => q(m, document)}>
+              <sbb-container
+                class="sbb-overlay__content-container"
+                ?expanded=${this.expanded}
+                color="transparent"
+              >
+                <slot></slot>
+              </sbb-container>
+            </div>
+          </div>
+        </div>
+      </div>
+      <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
+    `;
+    }
+  }, c = new WeakMap(), d = new WeakMap(), v = new WeakMap(), h = new WeakMap(), l = i, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
+    C = [k(), _({ reflect: !0, type: Boolean })], O = [k(), _({ attribute: "back-button", type: Boolean })], $ = [k(), _({ attribute: "accessibility-close-label" })], T = [k(), _({ attribute: "accessibility-back-label" })], u(i, null, C, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, r) => {
+      e.expanded = r;
+    } }, metadata: t }, B, L), u(i, null, O, { kind: "accessor", name: "backButton", static: !1, private: !1, access: { has: (e) => "backButton" in e, get: (e) => e.backButton, set: (e, r) => {
+      e.backButton = r;
+    } }, metadata: t }, E, z), u(i, null, $, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (e) => "accessibilityCloseLabel" in e, get: (e) => e.accessibilityCloseLabel, set: (e, r) => {
+      e.accessibilityCloseLabel = r;
+    } }, metadata: t }, S, A), u(i, null, T, { kind: "accessor", name: "accessibilityBackLabel", static: !1, private: !1, access: { has: (e) => "accessibilityBackLabel" in e, get: (e) => e.accessibilityBackLabel, set: (e, r) => {
+      e.accessibilityBackLabel = r;
+    } }, metadata: t }, I, D), u(null, s = { value: l }, a, { kind: "class", name: l.name, metadata: t }, null, o), f = l = s.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), i.styles = J, i.events = {
+    willOpen: "willOpen",
+    didOpen: "didOpen",
+    willClose: "willClose",
+    didClose: "didClose",
+    backClick: "requestBackAction"
+  }, b(l, o), i);
+  return f = l;
+})();
+export {
+  ce as SbbOverlayElement
+};

package/overlay.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './overlay/overlay.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,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,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC"}

package/overlay.js

@@ -1,241 +1,7 @@
-var H = (s) => {
-  throw TypeError(s);
-};
-var I = (s, i, r) => i.has(s) || H("Cannot " + r);
-var w = (s, i, r) => (I(s, i, "read from private field"), r ? r.call(s) : i.get(s)), x = (s, i, r) => i.has(s) ? H("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, r), d = (s, i, r, o) => (I(s, i, "write to private field"), o ? o.call(s, r) : i.set(s, r), r);
-import { __runInitializers as b, __esDecorate as y } from "tslib";
-import { css as M, nothing as N } from "lit";
-import { property as A, customElement as P } from "lit/decorators.js";
-import { unsafeStatic as $, html as D } from "lit/static-html.js";
-import { SbbFocusHandler as V, setModalityOnNextFocus as j, getFirstFocusableElement as Y } from "./core/a11y.js";
-import { hostAttributes as Z, forceType as z } from "./core/decorators.js";
-import { SbbScrollHandler as q, isZeroAnimationDuration as U } from "./core/dom.js";
-import { EventEmitter as G, forwardEvent as J } from "./core/eventing.js";
-import { i18nDialog as K, i18nCloseDialog as Q, i18nGoBack as W } from "./core/i18n.js";
-import { SbbOpenCloseBaseElement as X } from "./core/base-elements.js";
-import { SbbLanguageController as ee, SbbInertController as te, SbbEscapableOverlayController as ae } from "./core/controllers.js";
-import { SbbNegativeMixin as se } from "./core/mixins.js";
-import "./button/secondary-button.js";
-import "./button/transparent-button.js";
-import "./container.js";
-import "./screen-reader-only.js";
-const L = [];
-let ie = (() => {
-  var v, h;
-  let s = [Z({
-    popover: "manual"
-  })], i, r = [], o, O = se(X), E, B = [], S = [];
-  var p = (h = class extends O {
-    constructor() {
-      super(...arguments);
-      x(this, v);
-      d(this, v, b(this, B, "")), this.didClose = (b(this, S), new G(this, p.events.didClose, { cancelable: !0 })), this.focusHandler = new V(), this.scrollHandler = new q(), this.ariaLiveRefToggle = !1, this.language = new ee(this), this.inertController = new te(this), this.sbbEscapableOverlayController = new ae(this);
-    }
-    /** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
-    get accessibilityLabel() {
-      return w(this, v);
-    }
-    set accessibilityLabel(a) {
-      d(this, v, a);
-    }
-    /** Closes the component. */
-    close(a, l) {
-      if (this.state !== "opened")
-        return;
-      this.returnValue = a, this.overlayCloseElement = l;
-      const u = {
-        returnValue: this.returnValue,
-        closeTarget: this.overlayCloseElement
-      };
-      this.willClose.emit(u) && (this.state = "closing", this.removeAriaLiveRefContent(), this.isZeroAnimationDuration() && this.handleClosing());
-    }
-    connectedCallback() {
-      var a;
-      super.connectedCallback(), this.isOpen && this.inertController.activate(), (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, l;
-      super.disconnectedCallback(), (a = this.overlayController) == null || a.abort(), (l = this.openOverlayController) == null || l.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), this.scrollHandler.enableScroll();
-    }
-    attachOpenOverlayEvents() {
-      this.openOverlayController = new AbortController(), window.addEventListener("keydown", () => {
-        this.removeAriaLiveRefContent();
-      }, {
-        signal: this.openOverlayController.signal
-      }), window.addEventListener("click", () => this.removeAriaLiveRefContent(), {
-        signal: this.openOverlayController.signal
-      });
-    }
-    removeInstanceFromGlobalCollection() {
-      L.splice(L.indexOf(this), 1);
-    }
-    // Close the component on click of any element that has the `closeAttribute` attribute.
-    closeOnSbbOverlayCloseClick(a) {
-      const l = a.composedPath().filter((m) => m instanceof window.HTMLElement).find((m) => m.hasAttribute(this.closeAttribute) && !m.hasAttribute("disabled"));
-      if (!l)
-        return;
-      const u = l.getAttribute("type") === "submit" ? l.form ?? null : null;
-      L[L.length - 1].close(u, l);
-    }
-    removeAriaLiveRefContent() {
-      this.ariaLiveRef.textContent = "";
-    }
-    setAriaLiveRefContent(a) {
-      this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${K[this.language.current]}${a ? `, ${a}` : ""}${this.ariaLiveRefToggle ? " " : ""}`;
-    }
-  }, v = new WeakMap(), o = h, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(O[Symbol.metadata] ?? null) : void 0;
-    E = [z(), A({ attribute: "accessibility-label" })], y(h, null, E, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (l) => "accessibilityLabel" in l, get: (l) => l.accessibilityLabel, set: (l, u) => {
-      l.accessibilityLabel = u;
-    } }, metadata: a }, B, S), y(null, i = { value: o }, s, { kind: "class", name: o.name, metadata: a }, null, r), p = o = i.value, a && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), b(o, r);
-  })(), h);
-  return p = o;
-})();
-const oe = 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-duration, var(--sbb-animation-duration-6x) );--sbb-overlay-animation-easing: ease;--sbb-overlay-pointer-events: none;display:none;position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}:host([data-state]:not([data-state=closed])){display:block}:host(:is([data-state=opening],[data-state=opened])){--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 xe = (() => {
-  var _, f, g, k, n;
-  let s = [P("sbb-overlay")], i, r = [], o, O = ie, E, B = [], S = [], p, v = [], h = [], R, F = [], a = [], l, u = [], m = [];
-  var T = (n = class extends O {
-    constructor() {
-      super(...arguments);
-      x(this, _);
-      x(this, f);
-      x(this, g);
-      x(this, k);
-      d(this, _, b(this, B, !1)), d(this, f, (b(this, S), b(this, v, !1))), d(this, g, (b(this, h), b(this, F, ""))), d(this, k, (b(this, a), b(this, u, ""))), this.closeAttribute = (b(this, m), "sbb-overlay-close"), this._backClick = new G(this, T.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 w(this, _);
-    }
-    set expanded(e) {
-      d(this, _, e);
-    }
-    /** Whether a back button is displayed next to the title. */
-    get backButton() {
-      return w(this, f);
-    }
-    set backButton(e) {
-      d(this, f, e);
-    }
-    /** This will be forwarded as aria-label to the close button element. */
-    get accessibilityCloseLabel() {
-      return w(this, g);
-    }
-    set accessibilityCloseLabel(e) {
-      d(this, g, e);
-    }
-    /** This will be forwarded as aria-label to the back button element. */
-    get accessibilityBackLabel() {
-      return w(this, k);
-    }
-    set accessibilityBackLabel(e) {
-      d(this, k, e);
-    }
-    /** Opens the component. */
-    open() {
-      var e, t;
-      this.state === "closed" && (this.lastFocusedElement = document.activeElement, this._overlayContentElement = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".sbb-overlay__content"), this.willOpen.emit() && ((t = this.showPopover) == null || t.call(this), this.state = "opening", L.push(this), this.scrollHandler.disableScroll(), this.isZeroAnimationDuration() && this._handleOpening()));
-    }
-    isZeroAnimationDuration() {
-      return U(this, "--sbb-overlay-animation-duration");
-    }
-    _handleOpening() {
-      this.state = "opened", this.inertController.activate(), this.sbbEscapableOverlayController.connect(), this.attachOpenOverlayEvents(), this.setOverlayFocus(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusHandler.trap(this), this.didOpen.emit();
-    }
-    handleClosing() {
-      var e, t, c, C;
-      (e = this._overlayContentElement) == null || e.scrollTo(0, 0), this.state = "closed", (t = this.hidePopover) == null || t.call(this), this.inertController.deactivate(), j(this.lastFocusedElement), (c = this.lastFocusedElement) == null || c.focus(), (C = this.openOverlayController) == null || C.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), L.length || this.scrollHandler.enableScroll(), this.sbbEscapableOverlayController.disconnect(), this.didClose.emit({
-        returnValue: this.returnValue,
-        closeTarget: this.overlayCloseElement
-      });
-    }
-    // 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) {
-      e.animationName === "open" && this.state === "opening" ? this._handleOpening() : e.animationName === "close" && this.state === "closing" && this.handleClosing();
-    }
-    // Set focus on the first focusable element.
-    setOverlayFocus() {
-      const e = Y(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 = D`
-      <${$(e)}
-        class="sbb-overlay__close"
-        aria-label=${this.accessibilityCloseLabel || Q[this.language.current]}
-        ?negative=${this.negative}
-        size="m"
-        type="button"
-        icon-name="cross-small"
-        sbb-overlay-close
-      ></${$(e)}>
-    `, c = D`
-      <${$(e)}
-        class="sbb-overlay__back"
-        aria-label=${this.accessibilityBackLabel || W[this.language.current]}
-        ?negative=${this.negative}
-        size="m"
-        type="button"
-        icon-name="chevron-small-left-small"
-        @click=${() => this._backClick.emit()}
-      ></${$(e)}>
-    `;
-      return D`
-      <div class="sbb-overlay__container" @animationend=${this.onOverlayAnimationEnd}>
-        <div class="sbb-overlay">
-          <div
-            @click=${(C) => this.closeOnSbbOverlayCloseClick(C)}
-            class="sbb-overlay__wrapper"
-          >
-            <div class="sbb-overlay__header">
-              ${this.backButton ? c : N} ${t}
-            </div>
-            <div class="sbb-overlay__content" @scroll=${(C) => J(C, document)}>
-              <sbb-container
-                class="sbb-overlay__content-container"
-                ?expanded=${this.expanded}
-                color="transparent"
-              >
-                <slot></slot>
-              </sbb-container>
-            </div>
-          </div>
-        </div>
-      </div>
-      <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
-    `;
-    }
-  }, _ = new WeakMap(), f = new WeakMap(), g = new WeakMap(), k = new WeakMap(), o = n, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(O[Symbol.metadata] ?? null) : void 0;
-    E = [z(), A({ reflect: !0, type: Boolean })], p = [z(), A({ attribute: "back-button", type: Boolean })], R = [z(), A({ attribute: "accessibility-close-label" })], l = [z(), A({ attribute: "accessibility-back-label" })], y(n, null, E, { 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 }, B, S), y(n, null, p, { 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 }, v, h), y(n, null, R, { 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 }, F, a), y(n, null, l, { 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 }, u, m), y(null, i = { value: o }, s, { kind: "class", name: o.name, metadata: e }, null, r), T = o = i.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), n.styles = oe, n.events = {
-    willOpen: "willOpen",
-    didOpen: "didOpen",
-    willClose: "willClose",
-    didClose: "didClose",
-    backClick: "requestBackAction"
-  }, b(o, r), n);
-  return T = o;
-})();
+import { SbbOverlayElement as l } from "./overlay/overlay.js";
+import { SbbOverlayBaseElement as a, overlayRefs as b } from "./overlay/overlay-base-element.js";
 export {
-  ie as SbbOverlayBaseElement,
-  xe as SbbOverlayElement,
-  L as overlayRefs
+  a as SbbOverlayBaseElement,
+  l as SbbOverlayElement,
+  b as overlayRefs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -12,7 +12,7 @@
   "customElements": "custom-elements.json",
   "dependencies": {
     "@lit-labs/observers": "^2.0.5",
-    "lit": "^3.2.1",
+    "lit": "^3.3.0",
     "tslib": "^2.8.1"
   },
   "publishConfig": {

package/paginator/common/paginator-common.js

@@ -0,0 +1,149 @@
+var $ = (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);
+import { __runInitializers as h, __esDecorate as p } from "tslib";
+import { html as O } from "lit";
+import { property as c } 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";
+import { EventEmitter as R } from "../../core/eventing.js";
+import { i18nSelectedPage as j, i18nPreviousPage as q, i18nNextPage as A } from "../../core/i18n.js";
+import { SbbNegativeMixin as B, SbbDisabledMixin as T } from "../../core/mixins.js";
+import "../../button/mini-button.js";
+import "../../button/mini-button-group.js";
+import "../../divider.js";
+const ae = (a) => (() => {
+  var l, g, 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 {
+    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);
+    }
+    /** Total number of items. */
+    set length(e) {
+      this._length = isNaN(e) || e < 0 ? 0 : e, this.pageIndex = this.pageIndex;
+    }
+    get length() {
+      return this._length;
+    }
+    /** Number of items per page. */
+    set pageSize(e) {
+      const t = this.pageSize;
+      this._pageSize = Math.max(e, 0), this.pageIndex = Math.floor(this.pageIndex * t / this.pageSize) || 0;
+    }
+    get pageSize() {
+      return this._pageSize;
+    }
+    /** Current page index. */
+    set pageIndex(e) {
+      this._pageIndex = this._coercePageIndexInRange(e);
+    }
+    get pageIndex() {
+      return this._pageIndex;
+    }
+    /** Position of the prev/next buttons. */
+    get pagerPosition() {
+      return _(this, l);
+    }
+    set pagerPosition(e) {
+      d(this, l, e);
+    }
+    /**
+     * Size variant, either m or s.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return _(this, g);
+    }
+    set size(e) {
+      d(this, g, e);
+    }
+    updated(e) {
+      super.updated(e), this.shadowRoot.querySelector("sbb-screen-reader-only").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);
+    }
+    _currentPageLabel() {
+      return j(this.pageIndex + 1)[this.language.current];
+    }
+    /**
+     * 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).
+     */
+    numberOfPages() {
+      return this.pageSize ? Math.ceil(this.length / this.pageSize) : 0;
+    }
+    /**
+     * If the `pageIndex` changes due to user interaction,
+     * emit the `page` event and then update the `pageIndex` value.
+     */
+    pageIndexChanged(e) {
+      const t = this.pageIndex;
+      this.pageIndex = e, t !== this.pageIndex && this.emitPageEvent(t);
+    }
+    emitPageEvent(e) {
+      this._page.emit({
+        previousPageIndex: e,
+        pageIndex: this.pageIndex,
+        length: this.length,
+        pageSize: this.pageSize
+      });
+    }
+    renderPrevNextButtons() {
+      return O`
+        <sbb-mini-button-group ?negative=${this.negative} size=${this.size === "s" ? "s" : "l"}>
+          <sbb-mini-button
+            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)}
+          ></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)}
+          ></sbb-mini-button>
+        </sbb-mini-button-group>
+      `;
+    }
+    render() {
+      return O`
+        ${this.renderPaginator()}
+        <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) => {
+      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) => {
+      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) => {
+      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) => {
+      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) => {
+      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 });
+  })(), n.events = {
+    page: "page"
+  }, h(o, z), n);
+  return b = o;
+})();
+export {
+  ae as SbbPaginatorCommonElementMixin
+};

package/paginator/common.d.ts

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

package/paginator/common.d.ts.map

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