@sbb-esta/lyne-elements 2.0.2 → 2.1.0

package/overlay.js

@@ -1,46 +1,48 @@
-var I = (s) => {
+var H = (s) => {
   throw TypeError(s);
 };
-var D = (s, i, l) => i.has(s) || I("Cannot " + l);
-var k = (s, i, l) => (D(s, i, "read from private field"), l ? l.call(s) : i.get(s)), C = (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 h, __esDecorate as w } from "tslib";
+var I = (s, i, r) => i.has(s) || H("Cannot " + r);
+var x = (s, i, r) => (I(s, i, "read from private field"), r ? r.call(s) : i.get(s)), L = (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 p } from "tslib";
 import { css as M, nothing as N } from "lit";
-import { property as x, customElement as V } from "lit/decorators.js";
-import { html as A, unsafeStatic as O } from "lit/static-html.js";
-import { SbbFocusHandler as Y, setModalityOnNextFocus as j, getFirstFocusableElement as Z } from "./core/a11y.js";
-import { forceType as L } from "./core/decorators.js";
-import { SbbScrollHandler as q, isZeroAnimationDuration as P } from "./core/dom.js";
-import { EventEmitter as G, forwardEvent as K } from "./core/eventing.js";
-import { i18nDialog as U, i18nCloseDialog as J, i18nGoBack as Q } from "./core/i18n.js";
-import { SbbOpenCloseBaseElement as W } from "./core/base-elements.js";
-import { SbbLanguageController as X, SbbInertController as ee } from "./core/controllers.js";
-import { SbbNegativeMixin as te } from "./core/mixins.js";
+import { property as A, customElement as P } from "lit/decorators.js";
+import { html as D, unsafeStatic as $ } 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 K } from "./core/dom.js";
+import { EventEmitter as G, forwardEvent as U } from "./core/eventing.js";
+import { i18nDialog as J, 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 } from "./core/controllers.js";
+import { SbbNegativeMixin as ae } from "./core/mixins.js";
 import "./button/secondary-button.js";
 import "./button/transparent-button.js";
 import "./container.js";
 import "./screen-reader-only.js";
 const m = [];
-let ae = (() => {
-  var v, b;
-  let s = te(W), i, l = [], r = [];
-  return b = class extends s {
+let se = (() => {
+  var v, h;
+  let s = [Z({
+    popover: "manual"
+  })], i, r = [], o, O = ae(X), E, B = [], S = [];
+  var f = (h = class extends O {
     constructor() {
       super(...arguments);
-      C(this, v);
-      d(this, v, h(this, l, "")), this.didClose = (h(this, r), new G(this, b.events.didClose)), this.focusHandler = new Y(), this.scrollHandler = new q(), this.ariaLiveRefToggle = !1, this.language = new X(this), this.inertController = new ee(this);
+      L(this, v);
+      d(this, v, b(this, B, "")), this.didClose = (b(this, S), new G(this, f.events.didClose)), this.focusHandler = new V(), this.scrollHandler = new q(), this.ariaLiveRefToggle = !1, this.language = new ee(this), this.inertController = new te(this);
     }
     /** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
     get accessibilityLabel() {
-      return k(this, v);
+      return x(this, v);
     }
     set accessibilityLabel(a) {
       d(this, v, a);
     }
     /** Closes the component. */
-    close(a, o) {
+    close(a, l) {
       if (this.state !== "opened")
         return;
-      this.returnValue = a, this.overlayCloseElement = o;
+      this.returnValue = a, this.overlayCloseElement = l;
       const u = {
         returnValue: this.returnValue,
         closeTarget: this.overlayCloseElement
@@ -55,8 +57,8 @@ let ae = (() => {
       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();
+      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", (a) => {
@@ -78,83 +80,84 @@ let ae = (() => {
     }
     // 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)
+      const l = a.composedPath().filter((y) => y instanceof window.HTMLElement).find((y) => y.hasAttribute(this.closeAttribute) && !y.hasAttribute("disabled"));
+      if (!l)
         return;
-      const u = o.getAttribute("type") === "submit" ? o.form ?? null : null;
-      m[m.length - 1].close(u, o);
+      const u = l.getAttribute("type") === "submit" ? l.form ?? null : null;
+      m[m.length - 1].close(u, l);
     }
     removeAriaLiveRefContent() {
       this.ariaLiveRef.textContent = "";
     }
     setAriaLiveRefContent(a) {
-      this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${U[this.language.current]}${a ? `, ${a}` : ""}${this.ariaLiveRefToggle ? " " : ""}`;
-    }
-  }, v = new WeakMap(), (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    i = [L(), x({ attribute: "accessibility-label" })], w(b, null, i, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (o) => "accessibilityLabel" in o, get: (o) => o.accessibilityLabel, set: (o, u) => {
-      o.accessibilityLabel = u;
-    } }, metadata: a }, l, r), a && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), b;
+      this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${J[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" })], p(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), p(null, i = { value: o }, s, { kind: "class", name: o.name, metadata: a }, null, r), f = o = i.value, a && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), b(o, r);
+  })(), h);
+  return f = o;
 })();
-const se = 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: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 Ce = (() => {
-  var p, f, g, _, n;
-  let s = [V("sbb-overlay")], i, l = [], r, v = ae, b, z = [], E = [], a, o = [], u = [], y, $ = [], R = [], T, F = [], H = [];
-  var B = (n = class extends v {
+const ie = 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 we = (() => {
+  var _, g, k, C, n;
+  let s = [P("sbb-overlay")], i, r = [], o, O = se, E, B = [], S = [], f, v = [], h = [], R, F = [], a = [], l, u = [], y = [];
+  var T = (n = class extends O {
     constructor() {
       super(...arguments);
-      C(this, p);
-      C(this, f);
-      C(this, g);
-      C(this, _);
-      d(this, p, h(this, z, !1)), d(this, f, (h(this, E), h(this, o, !1))), d(this, g, (h(this, u), h(this, $, ""))), d(this, _, (h(this, R), h(this, F, ""))), this.closeAttribute = (h(this, H), "sbb-overlay-close"), this._backClick = new G(this, B.events.backClick), this._overlayContentElement = null;
+      L(this, _);
+      L(this, g);
+      L(this, k);
+      L(this, C);
+      d(this, _, b(this, B, !1)), d(this, g, (b(this, S), b(this, v, !1))), d(this, k, (b(this, h), b(this, F, ""))), d(this, C, (b(this, a), b(this, u, ""))), this.closeAttribute = (b(this, y), "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 k(this, p);
+      return x(this, _);
     }
     set expanded(e) {
-      d(this, p, e);
+      d(this, _, e);
     }
     /** Whether a back button is displayed next to the title. */
     get backButton() {
-      return k(this, f);
+      return x(this, g);
     }
     set backButton(e) {
-      d(this, f, e);
+      d(this, g, e);
     }
     /** This will be forwarded as aria-label to the close button element. */
     get accessibilityCloseLabel() {
-      return k(this, g);
+      return x(this, k);
     }
     set accessibilityCloseLabel(e) {
-      d(this, g, e);
+      d(this, k, e);
     }
     /** This will be forwarded as aria-label to the back button element. */
     get accessibilityBackLabel() {
-      return k(this, _);
+      return x(this, C);
     }
     set accessibilityBackLabel(e) {
-      d(this, _, e);
+      d(this, C, 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", m.push(this), this.scrollHandler.disableScroll(), this.isZeroAnimationDuration() && this._handleOpening()));
+      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", m.push(this), this.scrollHandler.disableScroll(), this.isZeroAnimationDuration() && this._handleOpening()));
     }
     isZeroAnimationDuration() {
-      return P(this, "--sbb-overlay-animation-duration");
+      return K(this, "--sbb-overlay-animation-duration");
     }
     _handleOpening() {
       this.state = "opened", this.inertController.activate(), this.attachOpenOverlayEvents(), this.setOverlayFocus(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusHandler.trap(this), this.didOpen.emit();
     }
     handleClosing() {
-      var e, t, c;
-      (e = this._overlayContentElement) == null || e.scrollTo(0, 0), this.state = "closed", this.inertController.deactivate(), j(this.lastFocusedElement), (t = this.lastFocusedElement) == null || t.focus(), (c = this.openOverlayController) == null || c.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), m.length || this.scrollHandler.enableScroll(), this.didClose.emit({
+      var e, t, c, w;
+      (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(), (w = this.openOverlayController) == null || w.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), m.length || this.scrollHandler.enableScroll(), this.didClose.emit({
         returnValue: this.returnValue,
         closeTarget: this.overlayCloseElement
       });
@@ -167,42 +170,42 @@ let Ce = (() => {
     }
     // Set focus on the first focusable element.
     setOverlayFocus() {
-      const e = Z(Array.from(this.shadowRoot.children).filter((t) => t instanceof window.HTMLElement));
+      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 = A`
-      <${O(e)}
+      const e = this.negative ? "sbb-transparent-button" : "sbb-secondary-button", t = D`
+      <${$(e)}
         class="sbb-overlay__close"
-        aria-label=${this.accessibilityCloseLabel || J[this.language.current]}
+        aria-label=${this.accessibilityCloseLabel || Q[this.language.current]}
         ?negative=${this.negative}
         size="m"
         type="button"
         icon-name="cross-small"
         sbb-overlay-close
-      ></${O(e)}>
-    `, c = A`
-      <${O(e)}
+      ></${$(e)}>
+    `, c = D`
+      <${$(e)}
         class="sbb-overlay__back"
-        aria-label=${this.accessibilityBackLabel || Q[this.language.current]}
+        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()}
-      ></${O(e)}>
+      ></${$(e)}>
     `;
-      return A`
+      return D`
       <div class="sbb-overlay__container" @animationend=${this.onOverlayAnimationEnd}>
         <div class="sbb-overlay">
           <div
-            @click=${(S) => this.closeOnSbbOverlayCloseClick(S)}
+            @click=${(w) => this.closeOnSbbOverlayCloseClick(w)}
             class="sbb-overlay__wrapper"
           >
             <div class="sbb-overlay__header">
               ${this.backButton ? c : N} ${t}
             </div>
-            <div class="sbb-overlay__content" @scroll=${(S) => K(S, document)}>
+            <div class="sbb-overlay__content" @scroll=${(w) => U(w, document)}>
               <sbb-container
                 class="sbb-overlay__content-container"
                 ?expanded=${this.expanded}
@@ -217,28 +220,28 @@ let Ce = (() => {
       <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
     `;
     }
-  }, p = new WeakMap(), f = new WeakMap(), g = new WeakMap(), _ = new WeakMap(), r = n, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    b = [L(), x({ reflect: !0, type: Boolean })], a = [L(), x({ attribute: "back-button", type: Boolean })], y = [L(), x({ attribute: "accessibility-close-label" })], T = [L(), x({ attribute: "accessibility-back-label" })], w(n, null, b, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (t) => "expanded" in t, get: (t) => t.expanded, set: (t, c) => {
+  }, _ = new WeakMap(), g = new WeakMap(), k = new WeakMap(), C = 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 })], f = [z(), A({ attribute: "back-button", type: Boolean })], R = [z(), A({ attribute: "accessibility-close-label" })], l = [z(), A({ attribute: "accessibility-back-label" })], p(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 }, z, E), w(n, null, a, { kind: "accessor", name: "backButton", static: !1, private: !1, access: { has: (t) => "backButton" in t, get: (t) => t.backButton, set: (t, c) => {
+    } }, metadata: e }, B, S), p(n, null, f, { 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, u), w(n, null, y, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (t) => "accessibilityCloseLabel" in t, get: (t) => t.accessibilityCloseLabel, set: (t, c) => {
+    } }, metadata: e }, v, h), p(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 }, $, R), w(n, null, T, { kind: "accessor", name: "accessibilityBackLabel", static: !1, private: !1, access: { has: (t) => "accessibilityBackLabel" in t, get: (t) => t.accessibilityBackLabel, set: (t, c) => {
+    } }, metadata: e }, F, a), p(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 }, F, H), w(null, i = { value: r }, s, { kind: "class", name: r.name, metadata: e }, null, l), B = r = i.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), n.styles = se, n.events = {
+    } }, metadata: e }, u, y), p(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 = ie, n.events = {
     willOpen: "willOpen",
     didOpen: "didOpen",
     willClose: "willClose",
     didClose: "didClose",
     backClick: "requestBackAction"
-  }, h(r, l), n);
-  return B = r;
+  }, b(o, r), n);
+  return T = o;
 })();
 export {
-  ae as SbbOverlayBaseElement,
-  Ce as SbbOverlayElement,
+  se as SbbOverlayBaseElement,
+  we as SbbOverlayElement,
   m as overlayRefs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",

package/paginator/common.js

@@ -2,7 +2,7 @@ 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);
+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), m = (a, i, s, d) => (k(a, i, "write to private field"), d ? d.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";
@@ -19,13 +19,13 @@ 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 = [];
+  })], d, 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);
+      this._length = (h(this, u), 0), this._pageSize = 10, this._pageIndex = 0, m(this, l, h(this, y, "start")), m(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) {
@@ -54,7 +54,7 @@ const ae = (a) => (() => {
       return _(this, l);
     }
     set pagerPosition(e) {
-      d(this, l, e);
+      m(this, l, e);
     }
     /**
      * Size variant, either m or s.
@@ -64,7 +64,7 @@ const ae = (a) => (() => {
       return _(this, g);
     }
     set size(e) {
-      d(this, g, e);
+      m(this, g, e);
     }
     updated(e) {
       super.updated(e), this.shadowRoot.querySelector("sbb-screen-reader-only").textContent = this._currentPageLabel();
@@ -138,7 +138,7 @@ const ae = (a) => (() => {
       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 });
+    } }, metadata: e }, C, M), p(null, d = { value: o }, s, { kind: "class", name: o.name, metadata: e }, null, z), b = o = d.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), n.events = {
     page: "page"
   }, h(o, z), n);

package/popover/popover/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/elements/popover/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAW1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAItE,OAAO,EAA4B,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAahF,OAAO,kCAAkC,CAAC;;AAU1C;;;;;;;;;;;;GAYG;AACH,qBAEM,iBAAkB,SAAQ,sBAA0C;IACxE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAA4B,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAQ;IAExE,iDAAiD;IACjD,SAEgB,eAAe,EAAE,OAAO,CAAS;IAEjD,wDAAwD;IACxD,SAEgB,YAAY,EAAE,OAAO,CAAS;IAE9C,8CAA8C;IAC9C,SAEgB,SAAS,EAAE,MAAM,CAAK;IAEtC,+CAA+C;IAC/C,SAEgB,UAAU,EAAE,MAAM,CAAK;IAEvC,wEAAwE;IACxE,SAEgB,uBAAuB,EAAE,MAAM,CAAM;IAErD,sEAAsE;IACtE,UAAmB,SAAS,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAIvE;IAEF,kDAAkD;IAClD,UAAmB,QAAQ,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAItE;IAEF,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,eAAe,CAAC,CAAqB;IAE7C,OAAO,CAAC,mBAAmB,CAAC,CAAc;IAC1C,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,oBAAoB,CAAC,CAAc;IAC3C,OAAO,CAAC,4BAA4B,CAAC,CAAU;IAC/C,OAAO,CAAC,kBAAkB,CAAmB;IAC7C,OAAO,CAAC,oBAAoB,CAAmB;IAC/C,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,YAAY,CAAC,CAAgC;IACrD,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,SAAS,CAAmC;IAEpD,0CAA0C;IACnC,IAAI,IAAI,IAAI;IA+BnB,0BAA0B;IACnB,KAAK,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAqBxC,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,eAAe;IAWP,iBAAiB,IAAI,IAAI;cAYtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAczD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9D,oBAAoB,IAAI,IAAI;IAS5C,OAAO,CAAC,UAAU;IAuDlB,OAAO,CAAC,mBAAmB;IA2B3B,OAAO,CAAC,4BAA4B;IAUpC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAS3B;IAEF,OAAO,CAAC,oBAAoB,CAM1B;IAEF,OAAO,CAAC,oBAAoB,CAM1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAMF,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,gBAAgB;IAyCxB,OAAO,CAAC,mBAAmB;cA6BR,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/elements/popover/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAW1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAItE,OAAO,EAA4B,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAahF,OAAO,kCAAkC,CAAC;;AAU1C;;;;;;;;;;;;GAYG;AACH,qBAGM,iBAAkB,SAAQ,sBAA0C;IACxE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAA4B,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAQ;IAExE,iDAAiD;IACjD,SAEgB,eAAe,EAAE,OAAO,CAAS;IAEjD,wDAAwD;IACxD,SAEgB,YAAY,EAAE,OAAO,CAAS;IAE9C,8CAA8C;IAC9C,SAEgB,SAAS,EAAE,MAAM,CAAK;IAEtC,+CAA+C;IAC/C,SAEgB,UAAU,EAAE,MAAM,CAAK;IAEvC,wEAAwE;IACxE,SAEgB,uBAAuB,EAAE,MAAM,CAAM;IAErD,sEAAsE;IACtE,UAAmB,SAAS,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAIvE;IAEF,kDAAkD;IAClD,UAAmB,QAAQ,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAItE;IAEF,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,eAAe,CAAC,CAAqB;IAE7C,OAAO,CAAC,mBAAmB,CAAC,CAAc;IAC1C,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,oBAAoB,CAAC,CAAc;IAC3C,OAAO,CAAC,4BAA4B,CAAC,CAAU;IAC/C,OAAO,CAAC,kBAAkB,CAAmB;IAC7C,OAAO,CAAC,oBAAoB,CAAmB;IAC/C,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,YAAY,CAAC,CAAgC;IACrD,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,SAAS,CAAmC;IAEpD,0CAA0C;IACnC,IAAI,IAAI,IAAI;IAgCnB,0BAA0B;IACnB,KAAK,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAqBxC,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,eAAe;IAWP,iBAAiB,IAAI,IAAI;cAYtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAczD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9D,oBAAoB,IAAI,IAAI;IAS5C,OAAO,CAAC,UAAU;IAuDlB,OAAO,CAAC,mBAAmB;IA2B3B,OAAO,CAAC,4BAA4B;IAUpC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAS3B;IAEF,OAAO,CAAC,oBAAoB,CAM1B;IAEF,OAAO,CAAC,oBAAoB,CAM1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAMF,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,gBAAgB;IAyCxB,OAAO,CAAC,mBAAmB;cA6BR,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}