@sbb-esta/lyne-elements 2.2.0 → 2.4.1

package/overlay.js

@@ -2,38 +2,38 @@ var H = (s) => {
   throw TypeError(s);
 };
 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";
+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 { html as D, unsafeStatic as $ } from "lit/static-html.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 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 { 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 } from "./core/controllers.js";
-import { SbbNegativeMixin as ae } from "./core/mixins.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 m = [];
-let se = (() => {
+const L = [];
+let ie = (() => {
   var v, h;
   let s = [Z({
     popover: "manual"
-  })], i, r = [], o, O = ae(X), E, B = [], S = [];
-  var f = (h = class extends O {
+  })], i, r = [], o, O = se(X), E, B = [], S = [];
+  var p = (h = class extends O {
     constructor() {
       super(...arguments);
-      L(this, v);
-      d(this, v, b(this, B, "")), this.didClose = (b(this, S), new G(this, f.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);
+      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 x(this, v);
+      return w(this, v);
     }
     set accessibilityLabel(a) {
       d(this, v, a);
@@ -61,103 +61,97 @@ let se = (() => {
       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) => {
-        this.removeAriaLiveRefContent(), this.onKeydownEvent(a);
+      this.openOverlayController = new AbortController(), window.addEventListener("keydown", () => {
+        this.removeAriaLiveRefContent();
       }, {
         signal: this.openOverlayController.signal
       }), window.addEventListener("click", () => this.removeAriaLiveRefContent(), {
         signal: this.openOverlayController.signal
       });
     }
-    onKeydownEvent(a) {
-      if (this.state === "opened" && a.key === "Escape") {
-        m[m.length - 1].close();
-        return;
-      }
-    }
     removeInstanceFromGlobalCollection() {
-      m.splice(m.indexOf(this), 1);
+      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((y) => y instanceof window.HTMLElement).find((y) => y.hasAttribute(this.closeAttribute) && !y.hasAttribute("disabled"));
+      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;
-      m[m.length - 1].close(u, l);
+      L[L.length - 1].close(u, l);
     }
     removeAriaLiveRefContent() {
       this.ariaLiveRef.textContent = "";
     }
     setAriaLiveRefContent(a) {
-      this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${J[this.language.current]}${a ? `, ${a}` : ""}${this.ariaLiveRefToggle ? " " : ""}`;
+      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" })], 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) => {
+    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), 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);
+    } }, 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 f = o;
+  return p = o;
 })();
-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 = [];
+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);
-      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;
+      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 x(this, _);
+      return w(this, _);
     }
     set expanded(e) {
       d(this, _, e);
     }
     /** Whether a back button is displayed next to the title. */
     get backButton() {
-      return x(this, g);
+      return w(this, f);
     }
     set backButton(e) {
-      d(this, g, e);
+      d(this, f, e);
     }
     /** This will be forwarded as aria-label to the close button element. */
     get accessibilityCloseLabel() {
-      return x(this, k);
+      return w(this, g);
     }
     set accessibilityCloseLabel(e) {
-      d(this, k, e);
+      d(this, g, e);
     }
     /** This will be forwarded as aria-label to the back button element. */
     get accessibilityBackLabel() {
-      return x(this, C);
+      return w(this, k);
     }
     set accessibilityBackLabel(e) {
-      d(this, C, 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", m.push(this), this.scrollHandler.disableScroll(), this.isZeroAnimationDuration() && this._handleOpening()));
+      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 K(this, "--sbb-overlay-animation-duration");
+      return U(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();
+      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, 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({
+      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
       });
@@ -199,13 +193,13 @@ let we = (() => {
       <div class="sbb-overlay__container" @animationend=${this.onOverlayAnimationEnd}>
         <div class="sbb-overlay">
           <div
-            @click=${(w) => this.closeOnSbbOverlayCloseClick(w)}
+            @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=${(w) => U(w, document)}>
+            <div class="sbb-overlay__content" @scroll=${(C) => J(C, document)}>
               <sbb-container
                 class="sbb-overlay__content-container"
                 ?expanded=${this.expanded}
@@ -220,18 +214,18 @@ let we = (() => {
       <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
     `;
     }
-  }, _ = new WeakMap(), g = new WeakMap(), k = new WeakMap(), C = new WeakMap(), o = n, (() => {
+  }, _ = 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 })], 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) => {
+    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), 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) => {
+    } }, 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), 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) => {
+    } }, 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), 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) => {
+    } }, 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, 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 = {
+    } }, 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",
@@ -241,7 +235,7 @@ let we = (() => {
   return T = o;
 })();
 export {
-  se as SbbOverlayBaseElement,
-  we as SbbOverlayElement,
-  m as overlayRefs
+  ie as SbbOverlayBaseElement,
+  xe as SbbOverlayElement,
+  L as overlayRefs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "2.2.0",
+  "version": "2.4.1",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -11,7 +11,7 @@
   "type": "module",
   "customElements": "custom-elements.json",
   "dependencies": {
-    "@lit-labs/observers": "^2.0.4",
+    "@lit-labs/observers": "^2.0.5",
     "lit": "^3.2.1",
     "tslib": "^2.8.1"
   },
@@ -45,6 +45,10 @@
       "style": "./animation.css",
       "default": "./animation.css"
     },
+    "./badge.css": {
+      "style": "./badge.css",
+      "default": "./badge.css"
+    },
     "./core.css": {
       "style": "./core.css",
       "default": "./core.css"
@@ -394,6 +398,11 @@
       "development": "./development/core/testing.js",
       "default": "./core/testing.js"
     },
+    "./date-input.js": {
+      "types": "./development/date-input.d.ts",
+      "development": "./development/date-input.js",
+      "default": "./date-input.js"
+    },
     "./datepicker.js": {
       "types": "./development/datepicker.d.ts",
       "development": "./development/datepicker.js",

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

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

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), m = (a, i, s, d) => (k(a, i, "write to private field"), d ? d.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), 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";
@@ -19,13 +19,13 @@ const ae = (a) => (() => {
   var l, g, n;
   let s = [D({
     role: "group"
-  })], d, z = [], o, I = B(T(a)), u = [], f, P, S, v, y = [], E = [], N, C = [], M = [];
+  })], 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, 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);
+      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) {
@@ -54,7 +54,7 @@ const ae = (a) => (() => {
       return _(this, l);
     }
     set pagerPosition(e) {
-      m(this, l, e);
+      d(this, l, e);
     }
     /**
      * Size variant, either m or s.
@@ -64,7 +64,7 @@ const ae = (a) => (() => {
       return _(this, g);
     }
     set size(e) {
-      m(this, g, e);
+      d(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, 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 });
+    } }, 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);

package/popover/popover/popover.d.ts

@@ -48,6 +48,7 @@ export declare class SbbPopoverElement extends SbbPopoverElement_base {
     private _isPointerDownEventOnPopover?;
     private _popoverController;
     private _openStateController;
+    private _sbbEscapableOverlayController;
     private _focusHandler;
     private _hoverTrigger;
     private _openTimeout?;
@@ -60,7 +61,6 @@ export declare class SbbPopoverElement extends SbbPopoverElement_base {
     private _isZeroAnimationDuration;
     private _handleClosing;
     private _handleOpening;
-    private _onKeydownEvent;
     connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;

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,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"}
+{"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;AAQtE,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,8BAA8B,CAA2C;IACjF,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;IAqBtB,OAAO,CAAC,cAAc;IAYN,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;IAuB3B,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"}