@sbb-esta/lyne-elements 2.10.1 → 3.0.0-next.0

package/paginator/common/paginator-common.js

@@ -1,31 +1,28 @@
-var k = (a) => {
-  throw TypeError(a);
+var y = (i) => {
+  throw TypeError(i);
 };
-var C = (a, i, s) => i.has(a) || k("Cannot " + s);
-var x = (a, i, s) => (C(a, i, "read from private field"), s ? s.call(a) : i.get(a)), _ = (a, i, s) => i.has(a) ? k("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, s), d = (a, i, s, m) => (C(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 u } from "lit/decorators.js";
-import { SbbLanguageController as w } from "../../core/controllers.js";
-import { hostAttributes as D } from "../../core/decorators.js";
-import { isLean as L } from "../../core/dom.js";
-import { EventEmitter as R } from "../../core/eventing.js";
-import { i18nSelectedPage as j, i18nPreviousPage as q, i18nNextPage as A } from "../../core/i18n.js";
-import { SbbNegativeMixin as B, SbbDisabledMixin as T } from "../../core/mixins.js";
+var N = (i, a, r) => a.has(i) || y("Cannot " + r);
+var c = (i, a, r) => (N(i, a, "read from private field"), r ? r.call(i) : a.get(i)), b = (i, a, r) => a.has(i) ? y("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, r), o = (i, a, r, g) => (N(i, a, "write to private field"), g ? g.call(i, r) : a.set(i, r), r);
+import { __runInitializers as l, __esDecorate as u } from "tslib";
+import { html as M } from "lit";
+import { property as d } from "lit/decorators.js";
+import { SbbLanguageController as $ } from "../../core/controllers.js";
+import { isLean as k } from "../../core/dom.js";
+import { EventEmitter as O } from "../../core/eventing.js";
+import { i18nSelectedPage as w, i18nPreviousPage as L, i18nNextPage as R } from "../../core/i18n.js";
+import { SbbNegativeMixin as j, SbbDisabledMixin as D, SbbElementInternalsMixin as E } from "../../core/mixins.js";
 import "../../button/mini-button.js";
 import "../../button/mini-button-group.js";
 import "../../divider.js";
-const ae = (a) => (() => {
-  var o, l, n;
-  let s = [D({
-    role: "group"
-  })], m, P = [], g, z = B(T(a)), c = [], I, f, S, v, y = [], N = [], E, M = [], $ = [];
-  var b = (n = class extends z {
+const X = (i) => (() => {
+  var h, p, s;
+  let r = j(D(E(i))), g = [], m, x, _, z, P = [], I = [], f, S = [], v = [];
+  return s = class extends r {
     constructor() {
       super(...arguments);
-      _(this, o);
-      _(this, l);
-      this._length = (h(this, c), 0), this._pageSize = 10, this._pageIndex = 0, d(this, o, h(this, y, "start")), d(this, l, (h(this, N), h(this, M, L() ? "s" : "m"))), this._page = (h(this, $), new R(this, b.events.page, { composed: !0, bubbles: !0 })), this.language = new w(this);
+      b(this, h);
+      b(this, p);
+      this._length = (l(this, g), 0), this._pageSize = 10, this._pageIndex = 0, o(this, h, l(this, P, "start")), o(this, p, (l(this, I), l(this, S, k() ? "s" : "m"))), this._page = (l(this, v), new O(this, s.events.page, { composed: !0, bubbles: !0 })), this.language = new $(this), this._previousPageSize = this._pageSize;
     }
     /** Total number of items. */
     set length(e) {
@@ -36,8 +33,7 @@ const ae = (a) => (() => {
     }
     /** Number of items per page. */
     set pageSize(e) {
-      const t = this.pageSize;
-      this._pageSize = Math.max(e, 0), this.pageIndex = Math.floor(this.pageIndex * t / this.pageSize) || 0;
+      this._previousPageSize = this.pageSize, this._pageSize = Math.max(e, 0), this.pageIndex = Math.floor(this.pageIndex * this._previousPageSize / this.pageSize) || 0;
     }
     get pageSize() {
       return this._pageSize;
@@ -52,20 +48,20 @@ const ae = (a) => (() => {
     }
     /** Position of the prev/next buttons. */
     get pagerPosition() {
-      return x(this, o);
+      return c(this, h);
     }
     set pagerPosition(e) {
-      d(this, o, e);
+      o(this, h, e);
     }
     /**
      * Size variant, either m or s.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return x(this, l);
+      return c(this, p);
     }
     set size(e) {
-      d(this, l, e);
+      o(this, p, e);
     }
     updated(e) {
       super.updated(e), this.shadowRoot.querySelector("sbb-screen-reader-only").textContent = this._currentPageLabel();
@@ -75,7 +71,7 @@ const ae = (a) => (() => {
       return Math.max(Math.min(Math.max(isNaN(e) ? 0 : e, 0), this.numberOfPages() - 1), 0);
     }
     _currentPageLabel() {
-      return j(this.pageIndex + 1)[this.language.current];
+      return w(this.pageIndex + 1)[this.language.current];
     }
     /** Advances to the next page if it exists. */
     nextPage() {
@@ -113,15 +109,11 @@ const ae = (a) => (() => {
     numberOfPages() {
       return this.pageSize ? Math.ceil(this.length / this.pageSize) : 0;
     }
-    /**
-     * If the `pageIndex` changes due to user interaction,
-     * emit the `page` event and then update the `pageIndex` value.
-     * @deprecated Will be removed with next major change.
-     */
-    pageIndexChanged(e) {
-      this.pageIndex = e;
-    }
     emitPageEvent(e) {
+      if (!this.hasUpdated || this.pageIndex === e && this._previousPageSize === this.pageSize) {
+        this._previousPageSize = this.pageSize;
+        return;
+      }
       this._page.emit({
         previousPageIndex: e,
         pageIndex: this.pageIndex,
@@ -130,11 +122,11 @@ const ae = (a) => (() => {
       });
     }
     renderPrevNextButtons() {
-      return O`
+      return M`
         <sbb-mini-button-group ?negative=${this.negative} size=${this.size === "s" ? "s" : "l"}>
           <sbb-mini-button
             id="sbb-paginator-prev-page"
-            aria-label=${q[this.language.current]}
+            aria-label=${L[this.language.current]}
             icon-name="chevron-small-left-small"
             ?disabled=${this.disabled || !this.hasPreviousPage()}
             @click=${() => this.previousPage()}
@@ -142,7 +134,7 @@ const ae = (a) => (() => {
           <sbb-divider orientation="vertical"></sbb-divider>
           <sbb-mini-button
             id="sbb-paginator-next-page"
-            aria-label=${A[this.language.current]}
+            aria-label=${R[this.language.current]}
             icon-name="chevron-small-right-small"
             ?disabled=${this.disabled || !this.hasNextPage()}
             @click=${() => this.nextPage()}
@@ -151,29 +143,28 @@ const ae = (a) => (() => {
       `;
     }
     render() {
-      return O`
+      return M`
         ${this.renderPaginator()}
         <sbb-screen-reader-only role="status"></sbb-screen-reader-only>
       `;
     }
-  }, o = new WeakMap(), l = new WeakMap(), g = n, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(z[Symbol.metadata] ?? null) : void 0;
-    I = [u({ type: Number })], f = [u({ attribute: "page-size", type: Number })], S = [u({ attribute: "page-index", type: Number })], v = [u({ attribute: "pager-position", reflect: !0 })], E = [u({ reflect: !0 })], p(n, null, I, { kind: "setter", name: "length", static: !1, private: !1, access: { has: (t) => "length" in t, set: (t, r) => {
-      t.length = r;
-    } }, metadata: e }, null, c), p(n, null, f, { kind: "setter", name: "pageSize", static: !1, private: !1, access: { has: (t) => "pageSize" in t, set: (t, r) => {
-      t.pageSize = r;
-    } }, metadata: e }, null, c), p(n, null, S, { kind: "setter", name: "pageIndex", static: !1, private: !1, access: { has: (t) => "pageIndex" in t, set: (t, r) => {
-      t.pageIndex = r;
-    } }, metadata: e }, null, c), p(n, null, v, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (t) => "pagerPosition" in t, get: (t) => t.pagerPosition, set: (t, r) => {
-      t.pagerPosition = r;
-    } }, metadata: e }, y, N), p(n, null, E, { 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 }, M, $), p(null, m = { value: g }, s, { kind: "class", name: g.name, metadata: e }, null, P), b = g = m.value, e && Object.defineProperty(g, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), n.events = {
+  }, h = new WeakMap(), p = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    m = [d({ type: Number })], x = [d({ attribute: "page-size", type: Number })], _ = [d({ attribute: "page-index", type: Number })], z = [d({ attribute: "pager-position", reflect: !0 })], f = [d({ reflect: !0 })], u(s, null, m, { kind: "setter", name: "length", static: !1, private: !1, access: { has: (t) => "length" in t, set: (t, n) => {
+      t.length = n;
+    } }, metadata: e }, null, g), u(s, null, x, { kind: "setter", name: "pageSize", static: !1, private: !1, access: { has: (t) => "pageSize" in t, set: (t, n) => {
+      t.pageSize = n;
+    } }, metadata: e }, null, g), u(s, null, _, { kind: "setter", name: "pageIndex", static: !1, private: !1, access: { has: (t) => "pageIndex" in t, set: (t, n) => {
+      t.pageIndex = n;
+    } }, metadata: e }, null, g), u(s, null, z, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (t) => "pagerPosition" in t, get: (t) => t.pagerPosition, set: (t, n) => {
+      t.pagerPosition = n;
+    } }, metadata: e }, P, I), u(s, null, f, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, n) => {
+      t.size = n;
+    } }, metadata: e }, S, v), e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), s.role = "group", s.events = {
     page: "page"
-  }, h(g, P), n);
-  return b = g;
+  }, s;
 })();
 export {
-  ae as SbbPaginatorCommonElementMixin
+  X as SbbPaginatorCommonElementMixin
 };

package/paginator/paginator/paginator.component.d.ts

@@ -17,11 +17,6 @@ export declare class SbbPaginatorElement extends SbbPaginatorElement_base {
     accessor pagerPosition: 'start' | 'end';
     private _markForFocus;
     protected updated(changedProperties: PropertyValues<this>): void;
-    /**
-     * If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
-     * emit the `page` event and then update the `pageSize` value.
-     */
-    private _pageSizeChanged;
     /** Returns the displayed page elements. */
     private _getVisiblePages;
     /**

package/paginator/paginator/paginator.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/paginator/paginator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAWb,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6BAA6B,CAAC;;AAIrC;;;;GAIG;AACH,qBAEM,mBAAoB,SAAQ,wBAA0C;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,wCAAwC;IACxC,SACgB,eAAe,EAAE,MAAM,EAAE,CAAM;IAE/C;;;OAGG;IACH,SAAmF,aAAa,EAC5F,OAAO,GACP,KAAK,CAAW;IAEpB,OAAO,CAAC,aAAa,CAAuB;cAEzB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgBzE;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAUxB,2CAA2C;IAC3C,OAAO,CAAC,gBAAgB;IAIxB;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IA2B7B,uFAAuF;IACvF,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,0BAA0B;IA8BlC,OAAO,CAAC,kBAAkB;cAiCP,eAAe,IAAI,cAAc;CAiBrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}
+{"version":3,"file":"paginator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/paginator/paginator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAWb,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6BAA6B,CAAC;;AAIrC;;;;GAIG;AACH,qBAEM,mBAAoB,SAAQ,wBAA0C;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,wCAAwC;IACxC,SACgB,eAAe,EAAE,MAAM,EAAE,CAAM;IAE/C;;;OAGG;IACH,SAAmF,aAAa,EAC5F,OAAO,GACP,KAAK,CAAW;IAEpB,OAAO,CAAC,aAAa,CAAuB;cAEzB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAezE,2CAA2C;IAC3C,OAAO,CAAC,gBAAgB;IAIxB;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IA2B7B,uFAAuF;IACvF,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,0BAA0B;IA8BlC,OAAO,CAAC,kBAAkB;cAiCP,eAAe,IAAI,cAAc;CAiBrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}

package/paginator/paginator/paginator.component.js

@@ -1,8 +1,8 @@
-var P = (t) => {
+var k = (t) => {
   throw TypeError(t);
 };
-var k = (t, r, i) => r.has(t) || P("Cannot " + i);
-var u = (t, r, i) => (k(t, r, "read from private field"), i ? i.call(t) : r.get(t)), m = (t, r, i) => r.has(t) ? P("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, i), c = (t, r, i, o) => (k(t, r, "write to private field"), o ? o.call(t, i) : r.set(t, i), i);
+var P = (t, r, i) => r.has(t) || k("Cannot " + i);
+var u = (t, r, i) => (P(t, r, "read from private field"), i ? i.call(t) : r.get(t)), m = (t, r, i) => r.has(t) ? k("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, i), c = (t, r, i, o) => (P(t, r, "write to private field"), o ? o.call(t, i) : r.set(t, i), i);
 import { __runInitializers as d, __esDecorate as h } from "tslib";
 import { css as E, LitElement as j, nothing as S, html as b } from "lit";
 import { customElement as A, property as $ } from "lit/decorators.js";
@@ -29,8 +29,8 @@ let Q = (() => {
     get pageSizeOptions() {
       return u(this, p);
     }
-    set pageSizeOptions(e) {
-      c(this, p, e);
+    set pageSizeOptions(a) {
+      c(this, p, a);
     }
     /**
      * Position of the prev/next buttons: if `pageSizeOptions` is set,
@@ -39,23 +39,15 @@ let Q = (() => {
     get pagerPosition() {
       return u(this, g);
     }
-    set pagerPosition(e) {
-      c(this, g, e);
+    set pagerPosition(a) {
+      c(this, g, a);
     }
-    updated(e) {
-      if (super.updated(e), this._markForFocus && F.mostRecentModality === "keyboard") {
-        const a = this._getVisiblePages().find((n) => this.pageIndex === +n.getAttribute("data-index"));
-        a && a.focus(), this._markForFocus = null;
+    updated(a) {
+      if (super.updated(a), this._markForFocus && F.mostRecentModality === "keyboard") {
+        const e = this._getVisiblePages().find((n) => this.pageIndex === +n.getAttribute("data-index"));
+        e && e.focus(), this._markForFocus = null;
       }
     }
-    /**
-     * If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
-     * emit the `page` event and then update the `pageSize` value.
-     */
-    _pageSizeChanged(e) {
-      const a = this.pageSize, n = this.pageIndex;
-      this.pageSize = e, a !== this.pageSize && this.emitPageEvent(n);
-    }
     /** Returns the displayed page elements. */
     _getVisiblePages() {
       return Array.from(this.shadowRoot.querySelectorAll(".sbb-paginator__page--number-item"));
@@ -67,32 +59,32 @@ let Q = (() => {
      *  - if there are more than `MAX_PAGE_NUMBERS_DISPLAYED` other pages, ellipsis button must be used.
      */
     _getVisiblePagesIndex() {
-      const e = this.numberOfPages(), a = this.pageIndex;
-      return e <= l + 2 ? this._range(e) : a < l ? [...this._range(l + 1), "ellipsis", e - 1] : a >= e - l ? [
+      const a = this.numberOfPages(), e = this.pageIndex;
+      return a <= l + 2 ? this._range(a) : e < l ? [...this._range(l + 1), "ellipsis", a - 1] : e >= a - l ? [
         0,
         "ellipsis",
-        ...this._range(l + 1, e - 1 - l)
+        ...this._range(l + 1, a - 1 - l)
       ] : [
         0,
         "ellipsis",
-        a - 1,
-        a,
-        a + 1,
+        e - 1,
+        e,
+        e + 1,
         "ellipsis",
-        e - 1
+        a - 1
       ];
     }
     /** Creates an array of consecutive numbers given the length and the starting value. */
-    _range(e, a = 0) {
-      return Array.from({ length: e }, (n, O) => O + a);
+    _range(a, e = 0) {
+      return Array.from({ length: a }, (n, O) => O + e);
     }
-    _handleKeyUp(e) {
-      if (e.key !== " " && e.key !== "Enter")
+    _handleKeyUp(a) {
+      if (a.key !== " " && a.key !== "Enter")
         return;
-      this._getVisiblePages().find((n) => n === e.target) && (this._markForFocus = this.pageIndex);
+      this._getVisiblePages().find((n) => n === a.target) && (this._markForFocus = this.pageIndex);
     }
     _renderItemPerPageTemplate() {
-      var e;
+      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>
@@ -105,10 +97,10 @@ let Q = (() => {
               <sbb-select
                 id="select"
                 ?disabled=${this.disabled}
-                value=${((e = this.pageSizeOptions) == null ? void 0 : e.find((a) => a === this.pageSize)) ?? this.pageSizeOptions[0]}
-                @change=${(a) => this._pageSizeChanged(+a.target.value)}
+                value=${((a = this.pageSizeOptions) == null ? void 0 : a.find((e) => e === this.pageSize)) ?? this.pageSizeOptions[0]}
+                @change=${(e) => this.pageSize = +e.target.value}
               >
-                ${I(this.pageSizeOptions, (a) => b`<sbb-option value=${a}>${a}</sbb-option>`)}
+                ${I(this.pageSizeOptions, (e) => b`<sbb-option value=${e}>${e}</sbb-option>`)}
               </sbb-select>
             </sbb-form-field>
           </div>
@@ -117,23 +109,23 @@ let Q = (() => {
     _renderPageNumbers() {
       return b`
       <ul class="sbb-paginator__pages">
-        ${I(this._getVisiblePagesIndex(), (e) => e === "ellipsis" ? b`
+        ${I(this._getVisiblePagesIndex(), (a) => a === "ellipsis" ? b`
                   <li class="sbb-paginator__page--ellipsis">
                     <span class="sbb-paginator__page--ellipsis-item">…</span>
                   </li>
                 ` : b`
                   <li class="sbb-paginator__page--number">
                     <button
-                      ?data-selected=${this.pageIndex === e}
+                      ?data-selected=${this.pageIndex === a}
                       ?disabled=${this.disabled}
                       class="sbb-paginator__page--number-item"
-                      data-index=${e}
-                      aria-label="${N[this.language.current]} ${e + 1}"
-                      aria-current=${this.pageIndex === e ? "true" : S}
-                      @click=${() => this.pageIndex = e}
+                      data-index=${a}
+                      aria-label="${N[this.language.current]} ${a + 1}"
+                      aria-current=${this.pageIndex === a ? "true" : S}
+                      @click=${() => this.pageIndex = a}
                       @keyup=${this._handleKeyUp}
                     >
-                      <span class="sbb-paginator__page--number-item-label">${e + 1}</span>
+                      <span class="sbb-paginator__page--number-item-label">${a + 1}</span>
                     </button>
                   </li>
                 `)}
@@ -154,12 +146,12 @@ let Q = (() => {
     `;
     }
   }, p = new WeakMap(), g = new WeakMap(), o = s, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    f = [$({ attribute: "page-size-options", type: Array })], x = [$({ attribute: "pager-position", reflect: !0 })], h(s, null, f, { kind: "accessor", name: "pageSizeOptions", static: !1, private: !1, access: { has: (a) => "pageSizeOptions" in a, get: (a) => a.pageSizeOptions, set: (a, n) => {
-      a.pageSizeOptions = n;
-    } }, metadata: e }, _, y), h(s, null, x, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (a) => "pagerPosition" in a, get: (a) => a.pagerPosition, set: (a, n) => {
-      a.pagerPosition = n;
-    } }, metadata: e }, z, w), h(null, r = { value: o }, t, { kind: "class", name: o.name, metadata: e }, null, i), o = r.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    f = [$({ attribute: "page-size-options", type: Array })], x = [$({ attribute: "pager-position", reflect: !0 })], h(s, null, f, { kind: "accessor", name: "pageSizeOptions", static: !1, private: !1, access: { has: (e) => "pageSizeOptions" in e, get: (e) => e.pageSizeOptions, set: (e, n) => {
+      e.pageSizeOptions = n;
+    } }, metadata: a }, _, y), h(s, null, x, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (e) => "pagerPosition" in e, get: (e) => e.pagerPosition, set: (e, n) => {
+      e.pagerPosition = n;
+    } }, metadata: a }, z, w), h(null, r = { value: o }, t, { kind: "class", name: o.name, metadata: a }, null, i), o = r.value, a && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
   })(), s.styles = M, s.events = {
     page: "page"
   }, d(o, i), o;

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

@@ -19,9 +19,10 @@ export declare class SbbPopoverElement extends SbbPopoverElement_base {
     static styles: CSSResultGroup;
     /**
      * The element that will trigger the popover overlay.
-     * Accepts both a string (id of an element) or an HTML element.
+     *
+     * For attribute usage, provide an id reference.
      */
-    accessor trigger: string | HTMLElement | null;
+    accessor trigger: HTMLElement | null;
     /** Whether the close button should be hidden. */
     accessor hideCloseButton: boolean;
     /** Whether the popover should be triggered on hover. */
@@ -48,7 +49,6 @@ export declare class SbbPopoverElement extends SbbPopoverElement_base {
     private _hoverTrigger;
     private _triggerElement?;
     private _triggerAbortController;
-    private _triggerIdReferenceController;
     private _openStateController;
     private _escapableOverlayController;
     private _focusTrapController;

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;AAM/F,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAStE,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;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,6BAA6B,CAAiD;IACtF,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;IAQzB,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;IA2DzB,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;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":"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"}

package/popover/popover/popover.component.js

@@ -2,42 +2,44 @@ var q = (s) => {
   throw TypeError(s);
 };
 var W = (s, i, r) => i.has(s) || q("Cannot " + r);
-var c = (s, i, r) => (W(s, i, "read from private field"), r ? r.call(s) : i.get(s)), h = (s, i, r) => i.has(s) ? q("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, r), n = (s, i, r, b) => (W(s, i, "write to private field"), b ? b.call(s, r) : i.set(s, r), r);
+var h = (s, i, r) => (W(s, i, "read from private field"), r ? r.call(s) : i.get(s)), c = (s, i, r) => i.has(s) ? q("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, r), n = (s, i, r, b) => (W(s, i, "write to private field"), b ? b.call(s, r) : i.set(s, r), r);
 import { __runInitializers as l, __esDecorate as d } from "tslib";
 import { css as X, isServer as T, html as j, nothing as G } from "lit";
-import { customElement as J, property as w } from "lit/decorators.js";
+import { customElement as J, property as y } from "lit/decorators.js";
 import { ref as K } from "lit/directives/ref.js";
-import { SbbFocusTrapController as ee, IS_FOCUSABLE_QUERY as te } from "../../core/a11y.js";
-import { SbbOpenCloseBaseElement as oe } from "../../core/base-elements.js";
-import { SbbMediaQueryPointerCoarse as se, SbbIdReferenceController as ie, SbbEscapableOverlayController as re, SbbLanguageController as ae } from "../../core/controllers.js";
-import { hostAttributes as ne, forceType as C } from "../../core/decorators.js";
+import { SbbFocusTrapController as ee, IS_FOCUSABLE_QUERY as te, sbbInputModalityDetector as oe } from "../../core/a11y.js";
+import { SbbOpenCloseBaseElement as se } from "../../core/base-elements.js";
+import { SbbMediaQueryPointerCoarse as ie, SbbEscapableOverlayController as re, SbbLanguageController as ae } from "../../core/controllers.js";
+import { idReference as ne, forceType as w } from "../../core/decorators.js";
 import { isZeroAnimationDuration as le } from "../../core/dom.js";
 import { EventEmitter as Q, composedPathHasAttribute as be } from "../../core/eventing.js";
 import { i18nClosePopover as pe } from "../../core/i18n.js";
-import { SbbHydrationMixin as ce } from "../../core/mixins.js";
-import { isEventOnElement as V, removeAriaOverlayTriggerAttributes as he, setAriaOverlayTriggerAttributes as de, getElementPosition as ve } from "../../core/overlay.js";
+import { SbbHydrationMixin as he } from "../../core/mixins.js";
+import { isEventOnElement as V, removeAriaOverlayTriggerAttributes as ce, setAriaOverlayTriggerAttributes as de, getElementPosition as ve } from "../../core/overlay.js";
 import "../../button/secondary-button.js";
 const ge = X`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-position: absolute;--sbb-popover-position-x: 0;--sbb-popover-position-y: 0;--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);--sbb-popover-arrow-position-x: 0;--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));--sbb-popover-inset: 0 auto auto 0;--sbb-popover-border-radius: var(--sbb-border-radius-8x);--sbb-popover-padding: var(--sbb-spacing-fixed-4x);--sbb-popover-background: var(--sbb-color-white);--sbb-popover-color: var(--sbb-color-charcoal);--sbb-popover-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-popover-animation-easing: ease-out;--sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);outline:none!important;display:none}:host([data-state]:not([data-state=closed])){display:block;--sbb-popover-inset: 0}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}.sbb-popover:after,.sbb-popover__content:before{content:"";position:absolute;display:block;width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--sbb-popover-arrow-position-x);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;transform:rotate(45deg)}.sbb-popover__container{position:fixed;inset:var(--sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index));color:var(--sbb-popover-color)}.sbb-popover{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);display:none;position:var(--sbb-popover-position);pointer-events:all;top:var(--sbb-popover-position-y);bottom:unset;left:var(--sbb-popover-position-x);right:unset;border:none;border-radius:var(--sbb-popover-border-radius);padding:0;max-width:var(--sbb-popover-max-width);width:max-content;background-color:var(--sbb-popover-background);outline:none}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-state]:not([data-state=closed])) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host([data-state][data-state=closing]) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{z-index:-1;box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}@media (forced-colors: active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host([data-position=above]) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors: active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:transparent}:host([data-position=below]) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host([data-position=above]) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{display:flex;gap:var(--sbb-spacing-fixed-4x);border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background);overflow:hidden;flex-direction:row-reverse}:host([data-position=above]) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@keyframes open{0%{opacity:0;transform:var(--sbb-popover-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-popover-transform)}}`, ue = 16, _e = 32;
 let me = 0;
-const E = /* @__PURE__ */ new Set(), fe = T ? !1 : matchMedia(se).matches;
-let Fe = (() => {
+const E = /* @__PURE__ */ new Set(), fe = T ? !1 : matchMedia(ie).matches;
+let Ie = (() => {
   var v, g, u, _, m, f, a;
-  let s = [J("sbb-popover"), ne({ popover: "manual" })], i, r = [], b, k = ce(oe), D, L = [], P = [], S, O = [], z = [], A, B = [], I = [], F, M = [], R = [], $, U = [], H = [], N, Y = [], Z = [];
-  var x = (a = class extends k {
+  let s = [J("sbb-popover")], i, r = [], b, k = he(se), D, L = [], P = [], O, S = [], z = [], A, B = [], F = [], I, M = [], $ = [], R, U = [], N = [], H, Y = [], Z = [];
+  var C = (a = class extends k {
     constructor() {
       super(...arguments);
-      h(this, v);
-      h(this, g);
-      h(this, u);
-      h(this, _);
-      h(this, m);
-      h(this, f);
-      n(this, v, l(this, L, null)), n(this, g, (l(this, P), l(this, O, !1))), n(this, u, (l(this, z), l(this, B, !1))), n(this, _, (l(this, I), l(this, M, 0))), n(this, m, (l(this, R), l(this, U, 0))), n(this, f, (l(this, H), l(this, Y, ""))), this.willClose = (l(this, Z), new Q(this, x.events.willClose, { cancelable: !0 })), this.didClose = new Q(this, x.events.didClose, { cancelable: !0 }), this._skipCloseFocus = !1, this._hoverTrigger = !1, this._triggerIdReferenceController = new ie(this, "trigger"), this._escapableOverlayController = new re(this), this._focusTrapController = new ee(this), this._language = new ae(this), this._pointerDownListener = (t) => {
+      c(this, v);
+      c(this, g);
+      c(this, u);
+      c(this, _);
+      c(this, m);
+      c(this, f);
+      n(this, v, l(this, L, null)), n(this, g, (l(this, P), l(this, S, !1))), n(this, u, (l(this, z), l(this, B, !1))), n(this, _, (l(this, F), l(this, M, 0))), n(this, m, (l(this, $), l(this, U, 0))), n(this, f, (l(this, N), l(this, Y, ""))), this.willClose = (l(this, Z), new Q(this, C.events.willClose, { cancelable: !0 })), this.didClose = new Q(this, C.events.didClose, { cancelable: !0 }), this._skipCloseFocus = !1, this._hoverTrigger = !1, this._escapableOverlayController = new re(this), this._focusTrapController = new ee(this), this._language = new ae(this), this._pointerDownListener = (t) => {
         this._isPointerDownEventOnPopover = V(this._overlay, t);
       }, this._closeOnBackdropClick = (t) => {
         !this._isPointerDownEventOnPopover && !V(this._overlay, t) && (this._nextFocusedElement = t.composedPath().filter((e) => e instanceof window.HTMLElement).find((e) => e.matches(te)), clearTimeout(this._closeTimeout), this.close());
       }, this._onTriggerMouseEnter = () => {
-        this.state === "closed" || this.state === "closing" ? this._openTimeout = setTimeout(() => this.open(), this.openDelay) : clearTimeout(this._closeTimeout);
+        this.state === "closed" || this.state === "closing" ? this._openTimeout = setTimeout(() => {
+          oe.reset(), this.open();
+        }, this.openDelay) : clearTimeout(this._closeTimeout);
       }, this._onTriggerMouseLeave = () => {
         this.state === "opened" || this.state === "opening" ? this._closeTimeout = setTimeout(() => this.close(), this.closeDelay) : clearTimeout(this._openTimeout);
       }, this._onOverlayMouseEnter = () => {
@@ -48,45 +50,46 @@ let Fe = (() => {
     }
     /**
      * The element that will trigger the popover overlay.
-     * Accepts both a string (id of an element) or an HTML element.
+     *
+     * For attribute usage, provide an id reference.
      */
     get trigger() {
-      return c(this, v);
+      return h(this, v);
     }
     set trigger(t) {
       n(this, v, t);
     }
     /** Whether the close button should be hidden. */
     get hideCloseButton() {
-      return c(this, g);
+      return h(this, g);
     }
     set hideCloseButton(t) {
       n(this, g, t);
     }
     /** Whether the popover should be triggered on hover. */
     get hoverTrigger() {
-      return c(this, u);
+      return h(this, u);
     }
     set hoverTrigger(t) {
       n(this, u, t);
     }
     /** Open the popover after a certain delay. */
     get openDelay() {
-      return c(this, _);
+      return h(this, _);
     }
     set openDelay(t) {
       n(this, _, t);
     }
     /** Close the popover after a certain delay. */
     get closeDelay() {
-      return c(this, m);
+      return h(this, m);
     }
     set closeDelay(t) {
       n(this, m, t);
     }
     /** This will be forwarded as aria-label to the close button element. */
     get accessibilityCloseLabel() {
-      return c(this, f);
+      return h(this, f);
     }
     set accessibilityCloseLabel(t) {
       n(this, f, t);
@@ -113,8 +116,8 @@ let Fe = (() => {
     _handleClosing() {
       var t, e, o, p;
       if (this.state = "closed", (t = this.hidePopover) == null || t.call(this), (o = (e = this._overlay) == null ? void 0 : e.firstElementChild) == null || o.scrollTo(0, 0), this.removeAttribute("tabindex"), !this._skipCloseFocus) {
-        const y = this._nextFocusedElement || this._triggerElement;
-        y == null || y.focus();
+        const x = this._nextFocusedElement || this._triggerElement;
+        x == null || x.focus();
       }
       this._escapableOverlayController.disconnect(), this.didClose.emit({ closeTarget: this._popoverCloseElement }), (p = this._openStateController) == null || p.abort(), this._focusTrapController.enabled = !1;
     }
@@ -122,7 +125,7 @@ let Fe = (() => {
       this.state = "opened", this.inert = !1, this._attachWindowEvents(), this._escapableOverlayController.connect(), this._setPopoverFocus(), this._focusTrapController.enabled = !0, this.didOpen.emit();
     }
     connectedCallback() {
-      super.connectedCallback(), this.id || (this.id = `sbb-popover-${++me}`), this._configureTrigger(), this.state = "closed", E.add(this);
+      this.popover = "manual", super.connectedCallback(), this.id || (this.id = `sbb-popover-${++me}`), this.state = "closed", E.add(this), this.hasUpdated && this._configureTrigger();
     }
     requestUpdate(t, e, o) {
       super.requestUpdate(t, e, o), !T && (!t || t === "trigger" || t === "hoverTrigger") && this.hasUpdated && this._configureTrigger();
@@ -136,23 +139,23 @@ let Fe = (() => {
     }
     // Check if the trigger is valid and attach click event listeners.
     _configureTrigger() {
-      var p;
+      var o;
       if (T)
         return;
       if (this.hydrationRequired) {
         this.hydrationComplete.then(() => this._configureTrigger());
         return;
       }
-      const t = this.hoverTrigger && !fe, e = this.trigger instanceof HTMLElement ? this.trigger : this._triggerIdReferenceController.find();
-      if (e === this._triggerElement && t === this._hoverTrigger || ((p = this._triggerAbortController) == null || p.abort(), he(this._triggerElement), this._triggerElement = e, this._hoverTrigger = t, !this._triggerElement))
+      const t = this.hoverTrigger && !fe;
+      if (this.trigger === this._triggerElement && t === this._hoverTrigger || ((o = this._triggerAbortController) == null || o.abort(), ce(this._triggerElement), this._triggerElement = this.trigger, this._hoverTrigger = t, !this._triggerElement))
         return;
       de(this._triggerElement, "dialog", this.id, this.state);
-      const { signal: o } = this._triggerAbortController = new AbortController();
-      this._hoverTrigger ? (this._triggerElement.addEventListener("mouseenter", this._onTriggerMouseEnter, { signal: o }), this._triggerElement.addEventListener("mouseleave", this._onTriggerMouseLeave, { signal: o }), this._triggerElement.addEventListener("keydown", (y) => {
-        (y.code === "Space" || y.code === "Enter") && this.open();
-      }, { signal: o })) : this._triggerElement.addEventListener("click", () => {
+      const { signal: e } = this._triggerAbortController = new AbortController();
+      this._hoverTrigger ? (this._triggerElement.addEventListener("mouseenter", this._onTriggerMouseEnter, { signal: e }), this._triggerElement.addEventListener("mouseleave", this._onTriggerMouseLeave, { signal: e }), this._triggerElement.addEventListener("keydown", (p) => {
+        (p.code === "Space" || p.code === "Enter") && this.open();
+      }, { signal: e })) : this._triggerElement.addEventListener("click", () => {
         this.state === "closed" && this.open();
-      }, { signal: o });
+      }, { signal: e });
     }
     _attachWindowEvents() {
       this._openStateController = new AbortController(), document.addEventListener("scroll", () => this._setPopoverPosition(), {
@@ -240,22 +243,22 @@ let Fe = (() => {
     }
   }, v = new WeakMap(), g = new WeakMap(), u = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), f = new WeakMap(), b = a, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
-    D = [w()], S = [C(), w({ attribute: "hide-close-button", type: Boolean })], A = [C(), w({ attribute: "hover-trigger", type: Boolean })], F = [C(), w({ attribute: "open-delay", type: Number })], $ = [C(), w({ attribute: "close-delay", type: Number })], N = [C(), w({ attribute: "accessibility-close-label" })], d(a, null, D, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, o) => {
+    D = [ne(), y()], O = [w(), y({ attribute: "hide-close-button", type: Boolean })], A = [w(), y({ attribute: "hover-trigger", type: Boolean })], I = [w(), y({ attribute: "open-delay", type: Number })], R = [w(), y({ attribute: "close-delay", type: Number })], H = [w(), y({ attribute: "accessibility-close-label" })], d(a, null, D, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, o) => {
       e.trigger = o;
-    } }, metadata: t }, L, P), d(a, null, S, { kind: "accessor", name: "hideCloseButton", static: !1, private: !1, access: { has: (e) => "hideCloseButton" in e, get: (e) => e.hideCloseButton, set: (e, o) => {
+    } }, metadata: t }, L, P), d(a, null, O, { kind: "accessor", name: "hideCloseButton", static: !1, private: !1, access: { has: (e) => "hideCloseButton" in e, get: (e) => e.hideCloseButton, set: (e, o) => {
       e.hideCloseButton = o;
-    } }, metadata: t }, O, z), d(a, null, A, { kind: "accessor", name: "hoverTrigger", static: !1, private: !1, access: { has: (e) => "hoverTrigger" in e, get: (e) => e.hoverTrigger, set: (e, o) => {
+    } }, metadata: t }, S, z), d(a, null, A, { kind: "accessor", name: "hoverTrigger", static: !1, private: !1, access: { has: (e) => "hoverTrigger" in e, get: (e) => e.hoverTrigger, set: (e, o) => {
       e.hoverTrigger = o;
-    } }, metadata: t }, B, I), d(a, null, F, { kind: "accessor", name: "openDelay", static: !1, private: !1, access: { has: (e) => "openDelay" in e, get: (e) => e.openDelay, set: (e, o) => {
+    } }, metadata: t }, B, F), d(a, null, I, { kind: "accessor", name: "openDelay", static: !1, private: !1, access: { has: (e) => "openDelay" in e, get: (e) => e.openDelay, set: (e, o) => {
       e.openDelay = o;
-    } }, metadata: t }, M, R), d(a, null, $, { kind: "accessor", name: "closeDelay", static: !1, private: !1, access: { has: (e) => "closeDelay" in e, get: (e) => e.closeDelay, set: (e, o) => {
+    } }, metadata: t }, M, $), d(a, null, R, { kind: "accessor", name: "closeDelay", static: !1, private: !1, access: { has: (e) => "closeDelay" in e, get: (e) => e.closeDelay, set: (e, o) => {
       e.closeDelay = o;
-    } }, metadata: t }, U, H), d(a, null, N, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (e) => "accessibilityCloseLabel" in e, get: (e) => e.accessibilityCloseLabel, set: (e, o) => {
+    } }, metadata: t }, U, N), d(a, null, H, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (e) => "accessibilityCloseLabel" in e, get: (e) => e.accessibilityCloseLabel, set: (e, o) => {
       e.accessibilityCloseLabel = o;
-    } }, metadata: t }, Y, Z), d(null, i = { value: b }, s, { kind: "class", name: b.name, metadata: t }, null, r), x = b = i.value, t && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+    } }, metadata: t }, Y, Z), d(null, i = { value: b }, s, { kind: "class", name: b.name, metadata: t }, null, r), C = b = i.value, t && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), a.styles = ge, l(b, r), a);
-  return x = b;
+  return C = b;
 })();
 export {
-  Fe as SbbPopoverElement
+  Ie as SbbPopoverElement
 };