@sbb-esta/lyne-elements 3.0.0-next.1 → 3.0.0-next.2

package/overlay/overlay.component.js

@@ -1,122 +1,90 @@
-var Y = (a) => {
-  throw TypeError(a);
+var k = (e) => {
+  throw TypeError(e);
 };
-var j = (a, s, o) => s.has(a) || Y("Cannot " + o);
-var y = (a, s, o) => (j(a, s, "read from private field"), o ? o.call(a) : s.get(a)), p = (a, s, o) => s.has(a) ? Y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, o), n = (a, s, o, l) => (j(a, s, "write to private field"), l ? l.call(a, o) : s.set(a, o), o);
-import { __runInitializers as b, __esDecorate as u } from "tslib";
-import { css as G, nothing as N } from "lit";
-import { customElement as P, property as _ } from "lit/decorators.js";
-import { unsafeStatic as g, html as x } from "lit/static-html.js";
-import { forceType as k } from "../core/decorators.js";
-import { isZeroAnimationDuration as R } from "../core/dom.js";
-import { EventEmitter as Z, forwardEvent as q } from "../core/eventing.js";
-import { i18nCloseDialog as H, i18nGoBack as V } from "../core/i18n.js";
-import { SbbOverlayBaseElement as M, overlayRefs as F } from "./overlay-base-element.js";
+var w = (e, a, t) => a.has(e) || k("Cannot " + t);
+var v = (e, a, t) => (w(e, a, "read from private field"), t ? t.call(e) : a.get(e)), h = (e, a, t) => a.has(e) ? k("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, t), c = (e, a, t, s) => (w(e, a, "write to private field"), s ? s.call(e, t) : a.set(e, t), t);
+import { __runInitializers as d, __esDecorate as p } from "tslib";
+import { customElement as z, property as C } from "lit/decorators.js";
+import { ref as $ } from "lit/directives/ref.js";
+import { unsafeStatic as O, html as E } from "lit/static-html.js";
+import { forceType as L } from "../core/decorators.js";
+import { isZeroAnimationDuration as S } from "../core/dom.js";
+import { forwardEvent as T } from "../core/eventing.js";
+import { i18nCloseDialog as A } from "../core/i18n.js";
+import { SbbOverlayBaseElement as I, overlayRefs as D } from "./overlay-base-element.js";
+import { css as Y } from "lit";
 import "../button/secondary-button.js";
 import "../button/transparent-button.js";
 import "../container.js";
 import "../screen-reader-only.js";
-const J = G`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-overlay-background-color: var(--sbb-color-milk);--sbb-overlay-height: 100%;--sbb-overlay-inset: 0 auto auto 0;--sbb-overlay-padding-block: calc(var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l));--sbb-overlay-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-overlay-animation-easing: ease;--sbb-overlay-pointer-events: none;display:none;position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}:host([data-state]:not([data-state=closed])){display:block}:host(:is([data-state=opening],[data-state=opened])){--sbb-overlay-pointer-events: all}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-overlay-color: var(--sbb-color-white);--sbb-overlay-background-color: var(--sbb-color-midnight)}:host(:not([data-state=closed])){--sbb-overlay-inset: 0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:none;align-items:center;position:fixed;inset:var(--sbb-overlay-inset)}:host([data-state]:not([data-state=closed])) .sbb-overlay__container{display:flex;animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{position:absolute;inset-inline:0;margin:auto;padding:0;border:none;height:var(--sbb-overlay-height);overflow:auto;color:var(--sbb-overlay-color)}:host([data-state]:not([data-state=closed])) .sbb-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{display:flex;flex-direction:column;width:100%;height:var(--sbb-overlay-height);outline:none;position:fixed}@media (min-width: 52.5rem){.sbb-overlay__wrapper{position:sticky;inset-block-start:0;height:auto}}.sbb-overlay__header{position:absolute;inset-inline-start:0;display:flex;pointer-events:none;align-items:start;justify-content:space-between;width:100%;padding:var(--sbb-spacing-responsive-xs);padding-block-end:0;z-index:1}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-overlay__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-overlay__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-overlay__content::-webkit-scrollbar-button,.sbb-overlay__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-overlay__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-overlay__content{height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}.sbb-overlay__content-container{padding-block:var(--sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
-let ce = (() => {
-  var c, d, v, h, i;
-  let a = [P("sbb-overlay")], s, o = [], l, w = M, C, B = [], L = [], O, E = [], z = [], $, S = [], A = [], T, I = [], D = [];
-  var f = (i = class extends w {
+const j = Y`*,: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 B = 0, ee = (() => {
+  var n, b, l;
+  let e = [z("sbb-overlay")], a, t = [], s, m = I, y, u = [], _ = [], f, g = [], x = [];
+  return l = class extends m {
     constructor() {
       super(...arguments);
-      p(this, c);
-      p(this, d);
-      p(this, v);
-      p(this, h);
-      n(this, c, b(this, B, !1)), n(this, d, (b(this, L), b(this, E, !1))), n(this, v, (b(this, z), b(this, S, ""))), n(this, h, (b(this, A), b(this, I, ""))), this.closeAttribute = (b(this, D), "sbb-overlay-close"), this._backClick = new Z(this, f.events.backClick), this._overlayContentElement = null;
+      h(this, n);
+      h(this, b);
+      c(this, n, d(this, u, !1)), c(this, b, (d(this, _), d(this, g, ""))), this.closeAttribute = (d(this, x), "sbb-overlay-close"), this._overlayContentElement = null;
     }
     /**
      * Whether to allow the overlay content to stretch to full width.
      * By default, the content has the appropriate page size.
      */
     get expanded() {
-      return y(this, c);
+      return v(this, n);
     }
-    set expanded(t) {
-      n(this, c, t);
-    }
-    /** Whether a back button is displayed next to the title. */
-    get backButton() {
-      return y(this, d);
-    }
-    set backButton(t) {
-      n(this, d, t);
+    set expanded(r) {
+      c(this, n, r);
     }
     /** This will be forwarded as aria-label to the close button element. */
     get accessibilityCloseLabel() {
-      return y(this, v);
-    }
-    set accessibilityCloseLabel(t) {
-      n(this, v, t);
+      return v(this, b);
     }
-    /** This will be forwarded as aria-label to the back button element. */
-    get accessibilityBackLabel() {
-      return y(this, h);
+    set accessibilityCloseLabel(r) {
+      c(this, b, r);
     }
-    set accessibilityBackLabel(t) {
-      n(this, h, t);
-    }
-    /** Opens the component. */
-    open() {
-      var t, e;
-      this.state === "closed" && (this.lastFocusedElement = document.activeElement, this._overlayContentElement = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".sbb-overlay__content"), this.willOpen.emit() && ((e = this.showPopover) == null || e.call(this), this.state = "opening", F.push(this), this.scrollHandler.disableScroll(), this.isZeroAnimationDuration() && this._handleOpening()));
+    connectedCallback() {
+      this.id ||= `sbb-overlay-${B++}`, super.connectedCallback();
     }
     isZeroAnimationDuration() {
-      return R(this, "--sbb-overlay-animation-duration");
+      return S(this, "--sbb-overlay-animation-duration");
     }
-    _handleOpening() {
-      this.state = "opened", this.inertController.activate(), this.sbbEscapableOverlayController.connect(), this.attachOpenOverlayEvents(), this.focusTrapController.focusInitialElement(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusTrapController.enabled = !0, this.didOpen.emit();
+    handleOpening() {
+      this.state = "opened", this.inertController.activate(), this.escapableOverlayController.connect(), this.attachOpenOverlayEvents(), this.focusTrapController.focusInitialElement(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusTrapController.enabled = !0, this.didOpen.emit();
     }
     handleClosing() {
-      var t, e, r, m;
-      (t = this._overlayContentElement) == null || t.scrollTo(0, 0), this.state = "closed", (e = this.hidePopover) == null || e.call(this), this.inertController.deactivate(), (r = this.lastFocusedElement) == null || r.focus(), (m = this.openOverlayController) == null || m.abort(), this.focusTrapController.enabled = !1, this.removeInstanceFromGlobalCollection(), F.length || this.scrollHandler.enableScroll(), this.sbbEscapableOverlayController.disconnect(), this.didClose.emit({
+      this._overlayContentElement?.scrollTo(0, 0), this.state = "closed", this.hidePopover?.(), this.inertController.deactivate(), this.skipFocusRestoration || this.lastFocusedElement?.focus(), this.openOverlayController?.abort(), this.focusTrapController.enabled = !1, this.removeInstanceFromGlobalCollection(), D.length || this.scrollHandler.enableScroll(), this.escapableOverlayController.disconnect(), this.didClose.emit({
         returnValue: this.returnValue,
         closeTarget: this.overlayCloseElement
       });
     }
-    // Wait for overlay transition to complete.
-    // In rare cases, it can be that the animationEnd event is triggered twice.
-    // To avoid entering a corrupt state, exit when state is not expected.
-    onOverlayAnimationEnd(t) {
-      t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this.handleClosing();
-    }
     render() {
-      const t = this.negative ? "sbb-transparent-button" : "sbb-secondary-button", e = x`
-      <${g(t)}
+      const r = this.negative ? "sbb-transparent-button" : "sbb-secondary-button", o = E`
+      <${O(r)}
         class="sbb-overlay__close"
-        aria-label=${this.accessibilityCloseLabel || H[this.language.current]}
+        aria-label=${this.accessibilityCloseLabel || A[this.language.current]}
         ?negative=${this.negative}
         size="m"
         type="button"
         icon-name="cross-small"
         sbb-overlay-close
-      ></${g(t)}>
-    `, r = x`
-      <${g(t)}
-        class="sbb-overlay__back"
-        aria-label=${this.accessibilityBackLabel || V[this.language.current]}
-        ?negative=${this.negative}
-        size="m"
-        type="button"
-        icon-name="chevron-small-left-small"
-        @click=${() => this._backClick.emit()}
-      ></${g(t)}>
+      ></${O(r)}>
     `;
-      return x`
+      return E`
       <div class="sbb-overlay__container" @animationend=${this.onOverlayAnimationEnd}>
         <div class="sbb-overlay">
           <div
-            @click=${(m) => this.closeOnSbbOverlayCloseClick(m)}
+            @click=${(i) => this.closeOnSbbOverlayCloseClick(i)}
             class="sbb-overlay__wrapper"
           >
-            <div class="sbb-overlay__header">
-              ${this.backButton ? r : N} ${e}
-            </div>
-            <div class="sbb-overlay__content" @scroll=${(m) => q(m, document)}>
+            <div class="sbb-overlay__header">${o}</div>
+            <div
+              class="sbb-overlay__content"
+              ${$((i) => this._overlayContentElement = i)}
+              @scroll=${(i) => T(i, document)}
+            >
               <sbb-container
                 class="sbb-overlay__content-container"
                 ?expanded=${this.expanded}
@@ -131,26 +99,20 @@ let ce = (() => {
       <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
     `;
     }
-  }, c = new WeakMap(), d = new WeakMap(), v = new WeakMap(), h = new WeakMap(), l = i, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
-    C = [k(), _({ reflect: !0, type: Boolean })], O = [k(), _({ attribute: "back-button", type: Boolean })], $ = [k(), _({ attribute: "accessibility-close-label" })], T = [k(), _({ attribute: "accessibility-back-label" })], u(i, null, C, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, r) => {
-      e.expanded = r;
-    } }, metadata: t }, B, L), u(i, null, O, { kind: "accessor", name: "backButton", static: !1, private: !1, access: { has: (e) => "backButton" in e, get: (e) => e.backButton, set: (e, r) => {
-      e.backButton = r;
-    } }, metadata: t }, E, z), u(i, null, $, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (e) => "accessibilityCloseLabel" in e, get: (e) => e.accessibilityCloseLabel, set: (e, r) => {
-      e.accessibilityCloseLabel = r;
-    } }, metadata: t }, S, A), u(i, null, T, { kind: "accessor", name: "accessibilityBackLabel", static: !1, private: !1, access: { has: (e) => "accessibilityBackLabel" in e, get: (e) => e.accessibilityBackLabel, set: (e, r) => {
-      e.accessibilityBackLabel = r;
-    } }, metadata: t }, I, D), u(null, s = { value: l }, a, { kind: "class", name: l.name, metadata: t }, null, o), f = l = s.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), i.styles = J, i.events = {
+  }, n = new WeakMap(), b = new WeakMap(), s = l, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+    y = [L(), C({ reflect: !0, type: Boolean })], f = [L(), C({ attribute: "accessibility-close-label" })], p(l, null, y, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (o) => "expanded" in o, get: (o) => o.expanded, set: (o, i) => {
+      o.expanded = i;
+    } }, metadata: r }, u, _), p(l, null, f, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (o) => "accessibilityCloseLabel" in o, get: (o) => o.accessibilityCloseLabel, set: (o, i) => {
+      o.accessibilityCloseLabel = i;
+    } }, metadata: r }, g, x), p(null, a = { value: s }, e, { kind: "class", name: s.name, metadata: r }, null, t), s = a.value, r && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), l.styles = j, l.events = {
     willOpen: "willOpen",
     didOpen: "didOpen",
     willClose: "willClose",
-    didClose: "didClose",
-    backClick: "requestBackAction"
-  }, b(l, o), i);
-  return f = l;
+    didClose: "didClose"
+  }, d(s, t), s;
 })();
 export {
-  ce as SbbOverlayElement
+  ee as SbbOverlayElement
 };

package/package.json

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

package/paginator/paginator/paginator.component.js

@@ -84,7 +84,6 @@ let Q = (() => {
       this._getVisiblePages().find((n) => n === a.target) && (this._markForFocus = this.pageIndex);
     }
     _renderItemPerPageTemplate() {
-      var a;
       return this.pageSizeOptions && this.pageSizeOptions.length > 0 ? b`
           <div class="sbb-paginator__page-size-options">
             <label for="select">${D[this.language.current]}</label>
@@ -97,10 +96,10 @@ let Q = (() => {
               <sbb-select
                 id="select"
                 ?disabled=${this.disabled}
-                value=${((a = this.pageSizeOptions) == null ? void 0 : a.find((e) => e === this.pageSize)) ?? this.pageSizeOptions[0]}
-                @change=${(e) => this.pageSize = +e.target.value}
+                value=${this.pageSizeOptions?.find((a) => a === this.pageSize) ?? this.pageSizeOptions[0]}
+                @change=${(a) => this.pageSize = +a.target.value}
               >
-                ${I(this.pageSizeOptions, (e) => b`<sbb-option value=${e}>${e}</sbb-option>`)}
+                ${I(this.pageSizeOptions, (a) => b`<sbb-option value=${a}>${a}</sbb-option>`)}
               </sbb-select>
             </sbb-form-field>
           </div>

package/popover/popover/popover.component.d.ts

@@ -1,21 +1,8 @@
 import { CSSResultGroup, PropertyDeclaration, PropertyValues, TemplateResult } from 'lit';
 import { SbbOpenCloseBaseElement } from '../../core/base-elements.js';
 import { EventEmitter } from '../../core/eventing.js';
-declare const SbbPopoverElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof SbbOpenCloseBaseElement;
-/**
- * It displays contextual information within a popover.
- *
- * @slot - Use the unnamed slot to add content into the popover.
- * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-popover` starts the opening transition. Can be canceled.
- * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-popover` is opened.
- * @event {CustomEvent<{ closeTarget: HTMLElement }>} willClose - Emits whenever the `sbb-popover` begins the closing
- * transition. Can be canceled.
- * @event {CustomEvent<{ closeTarget: HTMLElement }>} didClose - Emits whenever the `sbb-popover` is closed.
- * @cssprop [--sbb-popover-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
- * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
- * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
- */
-export declare class SbbPopoverElement extends SbbPopoverElement_base {
+declare const SbbPopoverBaseElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof SbbOpenCloseBaseElement;
+export declare abstract class SbbPopoverBaseElement extends SbbPopoverBaseElement_base {
     static styles: CSSResultGroup;
     /**
      * The element that will trigger the popover overlay.
@@ -23,16 +10,6 @@ export declare class SbbPopoverElement extends SbbPopoverElement_base {
      * For attribute usage, provide an id reference.
      */
     accessor trigger: HTMLElement | null;
-    /** Whether the close button should be hidden. */
-    accessor hideCloseButton: boolean;
-    /** Whether the popover should be triggered on hover. */
-    accessor hoverTrigger: boolean;
-    /** Open the popover after a certain delay. */
-    accessor openDelay: number;
-    /** Close the popover after a certain delay. */
-    accessor closeDelay: number;
-    /** This will be forwarded as aria-label to the close button element. */
-    accessor accessibilityCloseLabel: string;
     /** Emits whenever the `sbb-popover` begins the closing transition. */
     protected willClose: EventEmitter<{
         closeTarget?: HTMLElement;
@@ -41,20 +18,17 @@ export declare class SbbPopoverElement extends SbbPopoverElement_base {
     protected didClose: EventEmitter<{
         closeTarget?: HTMLElement;
     }>;
-    private _overlay;
     private _nextFocusedElement?;
     private _skipCloseFocus;
     private _popoverCloseElement?;
     private _isPointerDownEventOnPopover?;
-    private _hoverTrigger;
     private _triggerElement?;
     private _triggerAbortController;
     private _openStateController;
     private _escapableOverlayController;
     private _focusTrapController;
-    private _openTimeout?;
-    private _closeTimeout?;
-    private _language;
+    protected closeTimeout?: ReturnType<typeof setTimeout>;
+    protected overlay?: HTMLDivElement;
     /** Opens the popover on trigger click. */
     open(): void;
     /** Closes the popover. */
@@ -67,19 +41,56 @@ export declare class SbbPopoverElement extends SbbPopoverElement_base {
     protected firstUpdated(changedProperties: PropertyValues<this>): void;
     disconnectedCallback(): void;
     private _configureTrigger;
+    protected configureTrigger(_oldTrigger: HTMLElement | null): void;
+    protected registerTriggerListeners(signal: AbortSignal): void;
     private _attachWindowEvents;
     private _closeOnSbbPopoverCloseClick;
     private _pointerDownListener;
     private _closeOnBackdropClick;
-    private _onTriggerMouseEnter;
-    private _onTriggerMouseLeave;
-    private _onOverlayMouseEnter;
-    private _onOverlayMouseLeave;
     private _onPopoverAnimationEnd;
     private _setPopoverFocus;
     private _setPopoverPosition;
+    protected abstract renderContent(): TemplateResult;
     protected render(): TemplateResult;
 }
+/**
+ * It displays contextual information within a popover.
+ *
+ * @slot - Use the unnamed slot to add content into the popover.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-popover` starts the opening transition. Can be canceled.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-popover` is opened.
+ * @event {CustomEvent<{ closeTarget: HTMLElement }>} willClose - Emits whenever the `sbb-popover` begins the closing
+ * transition. Can be canceled.
+ * @event {CustomEvent<{ closeTarget: HTMLElement }>} didClose - Emits whenever the `sbb-popover` is closed.
+ * @cssprop [--sbb-popover-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
+ * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
+ */
+export declare class SbbPopoverElement extends SbbPopoverBaseElement {
+    /** Whether the close button should be hidden. */
+    accessor hideCloseButton: boolean;
+    /** Whether the popover should be triggered on hover. */
+    accessor hoverTrigger: boolean;
+    /** Open the popover after a certain delay. */
+    accessor openDelay: number;
+    /** Close the popover after a certain delay. */
+    accessor closeDelay: number;
+    /** This will be forwarded as aria-label to the close button element. */
+    accessor accessibilityCloseLabel: string;
+    private _hoverTrigger;
+    private _openTimeout?;
+    private _language;
+    private _overlayAbortController;
+    protected configureTrigger(oldTrigger: HTMLElement | null): void;
+    private _registerOverlayListeners;
+    protected registerTriggerListeners(signal: AbortSignal): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    private _onTriggerMouseEnter;
+    private _onTriggerMouseLeave;
+    private _onOverlayMouseEnter;
+    private _onOverlayMouseLeave;
+    protected renderContent(): TemplateResult;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'sbb-popover': SbbPopoverElement;

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

@@ -1 +1 @@
-{"version":3,"file":"popover.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/popover/popover/popover.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU/F,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAQtE,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;;;;OAIG;IACH,SAEgB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEnD,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;IAElC,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,aAAa,CAAS;IAC9B,OAAO,CAAC,eAAe,CAAC,CAAqB;IAC7C,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,oBAAoB,CAAmB;IAC/C,OAAO,CAAC,2BAA2B,CAA2C;IAC9E,OAAO,CAAC,oBAAoB,CAAoC;IAChE,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;IAUN,iBAAiB,IAAI,IAAI;IAWzB,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9D,oBAAoB,IAAI,IAAI;IAS5C,OAAO,CAAC,iBAAiB;IAqDzB,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,4BAA4B;IAUpC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAS3B;IAEF,OAAO,CAAC,oBAAoB,CAW1B;IAEF,OAAO,CAAC,oBAAoB,CAM1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAMF,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,gBAAgB;IAkCxB,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.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/popover/popover/popover.component.ts"],"names":[],"mappings":"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"}