@sbb-esta/lyne-elements 1.16.0 → 2.0.1

package/overlay.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "1.16.0",
+  "version": "2.0.1",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -169,6 +169,21 @@
       "development": "./development/button.js",
       "default": "./button.js"
     },
+    "./button/accent-button.js": {
+      "types": "./development/button/accent-button.d.ts",
+      "development": "./development/button/accent-button.js",
+      "default": "./button/accent-button.js"
+    },
+    "./button/accent-button-link.js": {
+      "types": "./development/button/accent-button-link.d.ts",
+      "development": "./development/button/accent-button-link.js",
+      "default": "./button/accent-button-link.js"
+    },
+    "./button/accent-button-static.js": {
+      "types": "./development/button/accent-button-static.d.ts",
+      "development": "./development/button/accent-button-static.js",
+      "default": "./button/accent-button-static.js"
+    },
     "./button/button.js": {
       "types": "./development/button/button.d.ts",
       "development": "./development/button/button.js",
@@ -214,21 +229,6 @@
       "development": "./development/button/secondary-button-static.js",
       "default": "./button/secondary-button-static.js"
     },
-    "./button/tertiary-button.js": {
-      "types": "./development/button/tertiary-button.d.ts",
-      "development": "./development/button/tertiary-button.js",
-      "default": "./button/tertiary-button.js"
-    },
-    "./button/tertiary-button-link.js": {
-      "types": "./development/button/tertiary-button-link.d.ts",
-      "development": "./development/button/tertiary-button-link.js",
-      "default": "./button/tertiary-button-link.js"
-    },
-    "./button/tertiary-button-static.js": {
-      "types": "./development/button/tertiary-button-static.d.ts",
-      "development": "./development/button/tertiary-button-static.js",
-      "default": "./button/tertiary-button-static.js"
-    },
     "./button/transparent-button.js": {
       "types": "./development/button/transparent-button.d.ts",
       "development": "./development/button/transparent-button.js",
@@ -304,10 +304,10 @@
       "development": "./development/checkbox/common.js",
       "default": "./checkbox/common.js"
     },
-    "./chip.js": {
-      "types": "./development/chip.d.ts",
-      "development": "./development/chip.js",
-      "default": "./chip.js"
+    "./chip-label.js": {
+      "types": "./development/chip-label.d.ts",
+      "development": "./development/chip-label.js",
+      "default": "./chip-label.js"
     },
     "./clock.js": {
       "types": "./development/clock.d.ts",
@@ -384,11 +384,6 @@
       "development": "./development/core/mixins.js",
       "default": "./core/mixins.js"
     },
-    "./core/observers.js": {
-      "types": "./development/core/observers.d.ts",
-      "development": "./development/core/observers.js",
-      "default": "./core/observers.js"
-    },
     "./core/overlay.js": {
       "types": "./development/core/overlay.d.ts",
       "development": "./development/core/overlay.js",
@@ -484,6 +479,21 @@
       "development": "./development/file-selector.js",
       "default": "./file-selector.js"
     },
+    "./file-selector/common.js": {
+      "types": "./development/file-selector/common.d.ts",
+      "development": "./development/file-selector/common.js",
+      "default": "./file-selector/common.js"
+    },
+    "./file-selector/file-selector.js": {
+      "types": "./development/file-selector/file-selector.d.ts",
+      "development": "./development/file-selector/file-selector.js",
+      "default": "./file-selector/file-selector.js"
+    },
+    "./file-selector/file-selector-dropzone.js": {
+      "types": "./development/file-selector/file-selector-dropzone.d.ts",
+      "development": "./development/file-selector/file-selector-dropzone.js",
+      "default": "./file-selector/file-selector-dropzone.js"
+    },
     "./flip-card.js": {
       "types": "./development/flip-card.d.ts",
       "development": "./development/flip-card.js",
@@ -639,6 +649,11 @@
       "development": "./development/loading-indicator.js",
       "default": "./loading-indicator.js"
     },
+    "./loading-indicator-circle.js": {
+      "types": "./development/loading-indicator-circle.d.ts",
+      "development": "./development/loading-indicator-circle.js",
+      "default": "./loading-indicator-circle.js"
+    },
     "./logo.js": {
       "types": "./development/logo.d.ts",
       "development": "./development/logo.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;AAIlE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,KAAK,mBAAmB,EAAsC,MAAM,sBAAsB,CAAC;AAEpG,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAAkC;IAC9D,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,SAAS,EAAE,MAAM,CAAC;IAClC,SAAgB,aAAa,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/C,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChC,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAC1C,SAAS,CAAC,aAAa,IAAI,MAAM;IACjC,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/C,SAAS,CAAC,aAAa,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI;IACxD,SAAS,CAAC,qBAAqB,IAAI,cAAc;IACjD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,cAAc;CACrD;AAGD,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,cAC1E,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,CAkJ5D,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}
+{"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"}

package/paginator/common.js

@@ -2,29 +2,30 @@ 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";
 import { SbbLanguageController as w } from "../core/controllers.js";
 import { hostAttributes as D } from "../core/decorators.js";
-import { EventEmitter as L } from "../core/eventing.js";
-import { i18nSelectedPage as R, i18nPreviousPage as j, i18nNextPage as q } from "../core/i18n.js";
-import { SbbNegativeMixin as A, SbbDisabledMixin as B } from "../core/mixins.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 ee = (a) => (() => {
+const ae = (a) => (() => {
   var l, g, n;
   let s = [D({
     role: "group"
-  })], d, z = [], o, I = A(B(a)), u = [], P, f, 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, "m"))), this._page = (h(this, M), new L(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) {
@@ -53,14 +54,17 @@ const ee = (a) => (() => {
       return _(this, l);
     }
     set pagerPosition(e) {
-      m(this, l, e);
+      d(this, l, e);
     }
-    /** Size variant, either m or s. */
+    /**
+     * Size variant, either m or s.
+     * @default 'm' / 's' (lean)
+     */
     get size() {
       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();
@@ -70,7 +74,7 @@ const ee = (a) => (() => {
       return Math.max(Math.min(Math.max(isNaN(e) ? 0 : e, 0), this.numberOfPages() - 1), 0);
     }
     _currentPageLabel() {
-      return R(this.pageIndex + 1)[this.language.current];
+      return j(this.pageIndex + 1)[this.language.current];
     }
     /**
      * Calculates the current number of pages based on the `length` and the `pageSize`;
@@ -100,7 +104,7 @@ const ee = (a) => (() => {
         <sbb-mini-button-group ?negative=${this.negative} size=${this.size === "s" ? "s" : "l"}>
           <sbb-mini-button
             id="sbb-paginator-prev-page"
-            aria-label=${j[this.language.current]}
+            aria-label=${q[this.language.current]}
             icon-name="chevron-small-left-small"
             ?disabled=${this.disabled || this.pageIndex === 0}
             @click=${() => this.pageIndexChanged(this._pageIndex - 1)}
@@ -108,7 +112,7 @@ const ee = (a) => (() => {
           <sbb-divider orientation="vertical"></sbb-divider>
           <sbb-mini-button
             id="sbb-paginator-next-page"
-            aria-label=${q[this.language.current]}
+            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)}
@@ -124,9 +128,9 @@ const ee = (a) => (() => {
     }
   }, l = new WeakMap(), g = new WeakMap(), o = n, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(I[Symbol.metadata] ?? null) : void 0;
-    P = [c({ type: Number })], f = [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, P, { kind: "setter", name: "length", static: !1, private: !1, access: { has: (t) => "length" in t, set: (t, r) => {
+    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, f, { kind: "setter", name: "pageSize", static: !1, private: !1, access: { has: (t) => "pageSize" in t, set: (t, 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;
@@ -134,12 +138,12 @@ const ee = (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);
   return b = o;
 })();
 export {
-  ee as SbbPaginatorCommonElementMixin
+  ae as SbbPaginatorCommonElementMixin
 };

package/paginator/paginator.js

@@ -14,7 +14,7 @@ import "../form-field.js";
 import "../select.js";
 import "../option.js";
 import "../screen-reader-only.js";
-const C = E`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-paginator-height: var(--sbb-size-element-m);--sbb-paginator-page-color: var(--sbb-color-metal);--sbb-paginator-page-background-color: transparent;--sbb-paginator-page-border-width: 0;--sbb-paginator-page-border-style: none;--sbb-paginator-page-border-color: none;--sbb-paginator-page-cursor: pointer;--sbb-paginator-page-inset: 0;--sbb-paginator-animation-easing: var(--sbb-animation-easing);--sbb-paginator-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-paginator-justify-content: start;--sbb-paginator-wrapping-group-wrap: wrap-reverse;--sbb-paginator-wrap: wrap}:host([size=s]){--sbb-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content: end;--sbb-paginator-wrapping-group-wrap: wrap;--sbb-paginator-wrap: wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content)}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap)}.sbb-paginator__page-size-options{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-page-color)}.sbb-paginator__pages{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-1x);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;color:var(--sbb-paginator-page-color)}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{display:flex;justify-content:center;align-items:center;width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs)}.sbb-paginator__page--number-item{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;cursor:var(--sbb-paginator-page-cursor);outline:none!important;color:var(--sbb-paginator-page-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:before{content:"";position:absolute;background-color:var(--sbb-paginator-page-background-color);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style) var(--sbb-paginator-page-border-color);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{font-weight:700;--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-color-charcoal)}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-border-color: var(--sbb-color-white)}@media (forced-colors: active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color: Highlight !important}}.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-paginator-page-border-style: dashed;--sbb-paginator-page-border-color: var(--sbb-color-smoke);--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-cursor: default}.sbb-paginator__page--number-item:disabled:not([data-selected]){--sbb-paginator-page-border-width: var(--sbb-border-width-1x)}:host([negative]) .sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-aluminium);--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}@media (forced-colors: active){.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-border-color: GrayText;--sbb-paginator-page-color: GrayText;--sbb-paginator-page-background-color: Canvas}}@media (any-hover: hover){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover: -.0625rem}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}}@media (any-hover: hover) and (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-background-color: var(--sbb-color-cloud);--sbb-paginator-page-inset: 0;--sbb-paginator-translate-y-content-hover: 0}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-background-color: var(--sbb-color-iron)}@media (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover, 0rem))}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, l = 3;
+const C = E`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-paginator-height: var(--sbb-size-element-m);--sbb-paginator-page-color: var(--sbb-color-metal);--sbb-paginator-page-background-color: transparent;--sbb-paginator-page-border-width: 0;--sbb-paginator-page-border-style: none;--sbb-paginator-page-border-color: none;--sbb-paginator-page-cursor: pointer;--sbb-paginator-page-inset: 0;--sbb-paginator-animation-easing: var(--sbb-animation-easing);--sbb-paginator-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-paginator-justify-content: start;--sbb-paginator-wrapping-group-wrap: wrap-reverse;--sbb-paginator-wrap: wrap}:host([size=s]){--sbb-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content: end;--sbb-paginator-wrapping-group-wrap: wrap;--sbb-paginator-wrap: wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content)}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap)}.sbb-paginator__page-size-options{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-page-color)}.sbb-paginator__pages{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-1x);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;color:var(--sbb-paginator-page-color)}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{display:flex;justify-content:center;align-items:center;width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs)}.sbb-paginator__page--number-item{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;cursor:var(--sbb-paginator-page-cursor);outline:none!important;color:var(--sbb-paginator-page-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:before{content:"";position:absolute;background-color:var(--sbb-paginator-page-background-color);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style) var(--sbb-paginator-page-border-color);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{font-weight:700;--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-color-charcoal)}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-border-color: var(--sbb-color-white)}@media (forced-colors: active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color: Highlight !important}}.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-paginator-page-border-style: dashed;--sbb-paginator-page-border-color: var(--sbb-color-smoke);--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-cursor: default}.sbb-paginator__page--number-item:disabled:not([data-selected]){--sbb-paginator-page-border-width: var(--sbb-border-width-1x)}:host([negative]) .sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-aluminium);--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}@media (forced-colors: active){.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-border-color: GrayText;--sbb-paginator-page-color: GrayText;--sbb-paginator-page-background-color: Canvas}}@media (any-hover: hover){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover: -.0625rem}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}}@media (any-hover: hover) and (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-background-color: var(--sbb-color-cloud);--sbb-paginator-page-inset: 0;--sbb-paginator-translate-y-content-hover: 0}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-background-color: var(--sbb-color-iron)}@media (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover, 0rem))}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, l = 3;
 let Q = (() => {
   var p, g, s;
   let t = [A("sbb-paginator")], r, i = [], o, _ = T(j), v, f = [], x = [], y, z = [], w = [];

package/popover/popover/popover.d.ts

@@ -57,6 +57,9 @@ export declare class SbbPopoverElement extends SbbPopoverElement_base {
     open(): void;
     /** Closes the popover. */
     close(target?: HTMLElement): void;
+    private _isZeroAnimationDuration;
+    private _handleClosing;
+    private _handleOpening;
     private _onKeydownEvent;
     connectedCallback(): void;
     protected willUpdate(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,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,CAGvE;IAEF,kDAAkD;IAClD,UAAmB,QAAQ,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAGtE;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;IAyBnB,0BAA0B;IACnB,KAAK,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAgBxC,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;IAwB3B,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;IA8B9B,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,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;IAwB3B,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"}