@sbb-esta/lyne-elements 1.6.0 → 1.8.0

package/core/mixins.js

@@ -1,16 +1,16 @@
 import { property as o, state as y } from "lit/decorators.js";
-import { defaultConverter as u, html as b, nothing as p, css as x } from "lit";
+import { defaultConverter as p, html as c, nothing as b, css as x } from "lit";
 import { hostAttributes as k } from "./decorators.js";
 import { preventScrollOnSpacebarPress as v, EventEmitter as w } from "./eventing.js";
 import { getLocalName as f } from "./dom.js";
 import "../screen-reader-only.js";
-var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, P = (n, s, r, t) => {
-  for (var e = E(s, r), i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
+var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, P = (i, s, r, t) => {
+  for (var e = E(s, r), n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = a(s, r, e) || e);
   return e && S(s, r, e), e;
 };
-const C = (n) => {
-  class s extends n {
+const C = (i) => {
+  class s extends i {
     constructor() {
       super(...arguments), this._disabled = !1;
     }
@@ -31,21 +31,21 @@ const C = (n) => {
   return P([
     o({ reflect: !0, type: Boolean })
   ], s.prototype, "disabled"), s;
-}, J = (n) => {
-  class s extends C(n) {
+}, J = (i) => {
+  class s extends C(i) {
     willUpdate(t) {
       super.willUpdate(t), t.has("disabled") && (this.disabled ? (this.setAttribute("aria-disabled", "true"), this.removeAttribute("tabindex")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0")));
     }
   }
   return s;
 };
-var $ = Object.defineProperty, R = Object.getOwnPropertyDescriptor, c = (n, s, r, t) => {
-  for (var e = t > 1 ? void 0 : t ? R(s, r) : s, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = (t ? a(s, r, e) : a(e)) || e);
+var $ = Object.defineProperty, O = Object.getOwnPropertyDescriptor, h = (i, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? O(s, r) : s, n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = (t ? a(s, r, e) : a(e)) || e);
   return t && e && $(s, r, e), e;
 };
-const A = (n) => {
-  const r = class r extends n {
+const R = (i) => {
+  const r = class r extends i {
     constructor() {
       super(...arguments), this._value = null, this.internals = this.attachInternals(), this.formDisabled = !1;
     }
@@ -97,8 +97,8 @@ const A = (n) => {
     get willValidate() {
       return this.internals.willValidate;
     }
-    attributeChangedCallback(e, i, a) {
-      (e !== "name" || i !== a) && super.attributeChangedCallback(e, i, a);
+    attributeChangedCallback(e, n, a) {
+      (e !== "name" || n !== a) && super.attributeChangedCallback(e, n, a);
     }
     /**
      * Returns true if internals target element has no validity problems; false otherwise.
@@ -137,21 +137,21 @@ const A = (n) => {
   };
   r.formAssociated = !0;
   let s = r;
-  return c([
+  return h([
     o()
-  ], s.prototype, "name", 1), c([
+  ], s.prototype, "name", 1), h([
     o()
-  ], s.prototype, "value", 1), c([
+  ], s.prototype, "value", 1), h([
     y()
   ], s.prototype, "formDisabled", 2), s;
 };
-var O = Object.defineProperty, q = Object.getOwnPropertyDescriptor, L = (n, s, r, t) => {
-  for (var e = q(s, r), i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
-  return e && O(s, r, e), e;
+var q = Object.defineProperty, L = Object.getOwnPropertyDescriptor, A = (i, s, r, t) => {
+  for (var e = L(s, r), n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = a(s, r, e) || e);
+  return e && q(s, r, e), e;
 };
-const D = (n) => {
-  class s extends n {
+const D = (i) => {
+  class s extends i {
     constructor() {
       super(...arguments), this._required = !1;
     }
@@ -172,17 +172,17 @@ const D = (n) => {
       return !1;
     }
   }
-  return L([
+  return A([
     o({ reflect: !0, type: Boolean })
   ], s.prototype, "required"), s;
 };
-var M = Object.defineProperty, U = Object.getOwnPropertyDescriptor, m = (n, s, r, t) => {
-  for (var e = t > 1 ? void 0 : t ? U(s, r) : s, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = (t ? a(s, r, e) : a(e)) || e);
+var M = Object.defineProperty, U = Object.getOwnPropertyDescriptor, m = (i, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? U(s, r) : s, n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = (t ? a(s, r, e) : a(e)) || e);
   return t && e && M(s, r, e), e;
 };
-const Q = (n) => {
-  let s = class extends C(D(A(n))) {
+const Q = (i) => {
+  let s = class extends C(D(R(i))) {
     constructor() {
       super(), this._attributeMutationBlocked = !1, this._checked = !1, this._handleKeyboardInteraction = (r) => {
         r.key === " " && this._handleUserInteraction();
@@ -235,11 +235,11 @@ const Q = (n) => {
     o({
       type: Boolean,
       converter: {
-        ...u,
+        ...p,
         // We need to pass information to the setter so that we know it was called by attribute change.
         fromAttribute: (r, t) => {
-          var i, a;
-          return { value: (a = (i = u).fromAttribute) == null ? void 0 : a.call(i, r, t), attribute: !0 };
+          var n, a;
+          return { value: (a = (n = p).fromAttribute) == null ? void 0 : a.call(n, r, t), attribute: !0 };
         }
       }
     })
@@ -248,23 +248,23 @@ const Q = (n) => {
       tabindex: "0"
     })
   ], s), s;
-}, I = (n) => {
-  class s extends n {
+}, N = (i) => {
+  class s extends i {
     constructor(...t) {
       var e;
       if (super(...t), this._hydrationComplete = new Promise(
-        (i) => this._resolveHydration = i
+        (n) => this._resolveHydration = n
       ), this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
         this._resolveHydration(!1);
       else {
-        const i = (l) => {
-          this._hydrationRequired && l.stopImmediatePropagation();
-        }, a = { capture: !0 }, d = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("slot");
-        d != null && d.length && (d.forEach(
-          (l) => l.addEventListener("slotchange", i, a)
+        const n = (d) => {
+          this._hydrationRequired && d.stopImmediatePropagation();
+        }, a = { capture: !0 }, l = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("slot");
+        l != null && l.length && (l.forEach(
+          (d) => d.addEventListener("slotchange", n, a)
         ), this.hydrationComplete.then(
-          () => d.forEach((l) => {
-            l.removeEventListener("slotchange", i, a), l.assignedNodes().length && l.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
+          () => l.forEach((d) => {
+            d.removeEventListener("slotchange", n, a), d.assignedNodes().length && d.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
           })
         ));
       }
@@ -290,20 +290,20 @@ const Q = (n) => {
   }
   return s;
 };
-var N = Object.defineProperty, B = (n, s, r, t) => {
-  for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
-  return e && N(s, r, e), e;
+var B = Object.defineProperty, V = (i, s, r, t) => {
+  for (var e = void 0, n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = a(s, r, e) || e);
+  return e && B(s, r, e), e;
 };
-const _ = "data-ssr-child-count", g = "li", W = (n) => {
-  class s extends I(n) {
+const _ = "data-ssr-child-count", g = "li", W = (i) => {
+  class s extends N(i) {
     constructor() {
       super(...arguments), this.listChildren = [], this._handleSlotchange = () => {
         const t = Array.from(this.children ?? []).filter(
           (e) => this.listChildLocalNames.includes(e.localName)
         );
-        t.length === this.listChildren.length && this.listChildren.every((e, i) => t[i] === e) || (this.listChildren.filter((e) => !t.includes(e)).forEach((e) => e.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach(
-          (e, i) => e.setAttribute("slot", `${g}-${i}`)
+        t.length === this.listChildren.length && this.listChildren.every((e, n) => t[n] === e) || (this.listChildren.filter((e) => !t.includes(e)).forEach((e) => e.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach(
+          (e, n) => e.setAttribute("slot", `${g}-${n}`)
         ), this.removeAttribute(_));
       };
     }
@@ -316,42 +316,54 @@ const _ = "data-ssr-child-count", g = "li", W = (n) => {
       super.disconnectedCallback(), (t = this.shadowRoot) == null || t.removeEventListener("slotchange", this._handleSlotchange);
     }
     /**
-     * Renders list and list slots for slotted children or an amount of list slots
+     * Renders list and list slots for slotted children or a number of list slots
      * corresponding to the `data-ssr-child-count` attribute value.
      *
      * This is a possible optimization for SSR, as in an SSR Lit environment
      * other elements are not available, but might be available in the meta
-     * framework wrapper (like e.g. React). This allows to provide the amount of
+     * framework wrapper (like e.g. React). This allows to provide the number of
      * children to be passed via the `data-ssr-child-count` attribute value.
      */
-    renderList(t = {}) {
-      const e = this.listSlotNames();
-      return e.length >= 2 ? b`
+    renderList(t = {}, e = {}) {
+      const n = this.listSlotEntries(e);
+      return n.length >= 2 ? c`
           <ul
             class=${t.class || (this.localName ?? f(this))}
-            aria-label=${t.ariaLabel || p}
-            aria-labelledby=${t.ariaLabelledby || p}
+            aria-label=${t.ariaLabel || b}
+            aria-labelledby=${t.ariaLabelledby || b}
           >
-            ${e.map((i) => b`<li><slot name=${i}></slot></li>`)}
+            ${n.map(
+        (a) => c`
+                <li aria-hidden=${a.ariaHidden || b}>
+                  <slot name=${a.name}></slot>
+                </li>
+              `
+      )}
           </ul>
           ${this.renderHiddenSlot()}
-        ` : e.length === 1 ? b`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
+        ` : n.length === 1 ? c`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
           <span class=${t.class || (this.localName ?? f(this))}>
-            <span><slot name=${e[0]}></slot></span>
+            <span><slot name=${n[0].name}></slot></span>
           </span>
           ${this.renderHiddenSlot()} ` : this.renderHiddenSlot();
     }
     /**
-     * Returns an array of list slot names with the length corresponding to the amount of matched
-     * children or the `data-ssr-child-count` attribute value.
+     * Returns an array of SbbNamedSlotProperties, which holds the list slot names and the hidden property;
+     * its length corresponds to the number of matched children or the `data-ssr-child-count` attribute value.
      *
      * This is a possible optimization for SSR, as in an SSR Lit environment
      * other elements are not available, but might be available in the meta
-     * framework wrapper (like e.g. React). This allows to provide the amount of
+     * framework wrapper (like e.g. React). This allows to provide the number of
      * children to be passed via the `data-ssr-child-count` attribute value.
      */
-    listSlotNames() {
-      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(_) ?? 0) })).map((e, i) => `${g}-${i}`);
+    listSlotEntries(t) {
+      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(_) ?? 0) })).map((n, a) => {
+        var l;
+        return {
+          name: `${g}-${a}`,
+          ariaHidden: ((l = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : l.includes(n.localName)) ?? !1
+        };
+      });
     }
     /**
      * Returns a hidden slot, which is intended as the children change detection.
@@ -359,36 +371,36 @@ const _ = "data-ssr-child-count", g = "li", W = (n) => {
      * the slotchange event, which can be used to assign it to the appropriate named slot.
      */
     renderHiddenSlot() {
-      return b`<span hidden><slot></slot></span>`;
+      return c`<span hidden><slot></slot></span>`;
     }
   }
-  return B([
+  return V([
     y()
   ], s.prototype, "listChildren"), s;
 };
-var V = Object.defineProperty, j = (n, s, r, t) => {
-  for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
-  return e && V(s, r, e), e;
+var j = Object.defineProperty, H = (i, s, r, t) => {
+  for (var e = void 0, n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = a(s, r, e) || e);
+  return e && j(s, r, e), e;
 };
-const Y = (n) => {
-  class s extends n {
+const Y = (i) => {
+  class s extends i {
     constructor() {
       super(...arguments), this.negative = !1;
     }
   }
-  return j([
+  return H([
     o({ reflect: !0, type: Boolean })
   ], s.prototype, "negative"), s;
 };
-var H = Object.defineProperty, h = (n, s, r, t) => {
-  for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
-  return e && H(s, r, e), e;
+var I = Object.defineProperty, u = (i, s, r, t) => {
+  for (var e = void 0, n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = a(s, r, e) || e);
+  return e && I(s, r, e), e;
 };
-const Z = (n) => {
+const Z = (i) => {
   var t;
-  const s = (t = class extends n {
+  const s = (t = class extends i {
     constructor() {
       super(...arguments), this.color = "white", this.borderless = !1, this._panelConnected = new w(
         this,
@@ -402,15 +414,15 @@ const Z = (n) => {
   }, t.events = {
     panelConnected: "panelConnected"
   }, t);
-  return h([
+  return u([
     o()
-  ], s.prototype, "color"), h([
+  ], s.prototype, "color"), u([
     o({ reflect: !0, type: Boolean })
-  ], s.prototype, "borderless"), h([
+  ], s.prototype, "borderless"), u([
     o()
   ], s.prototype, "expansionState"), s;
-}, ee = (n) => {
-  class s extends n {
+}, ee = (i) => {
+  class s extends i {
     constructor() {
       super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
       };
@@ -432,8 +444,8 @@ export {
   C as SbbDisabledMixin,
   J as SbbDisabledTabIndexActionMixin,
   Q as SbbFormAssociatedCheckboxMixin,
-  A as SbbFormAssociatedMixin,
-  I as SbbHydrationMixin,
+  R as SbbFormAssociatedMixin,
+  N as SbbHydrationMixin,
   W as SbbNamedSlotListMixin,
   Y as SbbNegativeMixin,
   Z as SbbPanelMixin,

package/core/overlay/overlay.d.ts

@@ -1,21 +1,7 @@
 import { TemplateResult } from 'lit';
-
 /**
  * Used to create the "wrapping" effect around the anchor for overlays (es. autocomplete)
  * Works in conjunction with the 'overlayGapFixCorners()' function in 'overlay.ts'
  */
 export declare function overlayGapFixCorners(): TemplateResult;
-/**
- * Applies inert to every other element on the page except the overlay.
- */
-export declare function applyInertMechanism(overlay: HTMLElement): void;
-export declare function removeInertMechanism(): void;
-declare global {
-    interface GlobalEventHandlersEventMap {
-        willOpen: CustomEvent<void>;
-        willClose: CustomEvent<void>;
-        didOpen: CustomEvent<void>;
-        didClose: CustomEvent<void>;
-    }
-}
 //# sourceMappingURL=overlay.d.ts.map

package/core/overlay/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CASrD;AA4DD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAyB9D;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAqB3C;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,2BAA2B;QACnC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC5B,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC7B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC3B,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAC7B;CACF"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CASrD"}

package/core/overlay.js

@@ -1,7 +1,6 @@
-import { html as E } from "lit";
-const x = ":is(sbb-dialog, sbb-navigation, sbb-menu, sbb-overlay)[data-state='opened']";
-function $() {
-  return E`
+import { html as H } from "lit";
+function O() {
+  return H`
     <div class="sbb-gap-fix-wrapper">
       <div class="sbb-gap-fix-corner" id="left"></div>
     </div>
@@ -10,54 +9,7 @@ function $() {
     </div>
   `;
 }
-const O = (t, e) => {
-  let n = t.parentElement;
-  const i = [];
-  for (; n && (i.push(n), n !== e); )
-    n = n.parentElement;
-  return i;
-}, w = (t) => {
-  t.setAttribute(
-    "data-sbb-inert",
-    `${+(t.getAttribute("data-sbb-inert") ?? void 0) + 1 || 0}`
-  );
-}, W = (t) => {
-  t.inert || (t.inert = !0, t.matches(x) ? w(t) : t.toggleAttribute("data-sbb-inert", !0)), t.hasAttribute("aria-hidden") || (t.setAttribute("aria-hidden", "true"), t.toggleAttribute("data-sbb-aria-hidden", !0));
-}, y = (t) => {
-  t.hasAttribute("data-sbb-inert") && (t.inert = !1, t.removeAttribute("data-sbb-inert")), t.hasAttribute("data-sbb-aria-hidden") && (t.removeAttribute("aria-hidden"), t.removeAttribute("data-sbb-aria-hidden"));
-};
-function C(t) {
-  y(t);
-  const e = t.closest("body > *");
-  Array.from(document.querySelectorAll("body > *")).filter(
-    (o) => o !== e
-  ).forEach((o) => W(o));
-  let i = [];
-  const a = O(t, e);
-  for (const o of a)
-    i = i.concat(
-      Array.from(o.children).filter(
-        (c) => c !== t && !a.includes(c)
-      )
-    ), o.matches(x) && w(o);
-  i.forEach((o) => W(o));
-}
-function z() {
-  const t = Array.from(
-    document.documentElement.querySelectorAll(x)
-  );
-  if (t.length) {
-    t.forEach((e) => {
-      const n = +e.getAttribute("data-sbb-inert") - 1;
-      e.setAttribute("data-sbb-inert", `${n}`), n && n < 0 && (y(e), Array.from(e.children).forEach((i) => y(i)));
-    });
-    return;
-  }
-  Array.from(document.documentElement.querySelectorAll("[data-sbb-inert]")).forEach(
-    (e) => y(e)
-  );
-}
-function S(t) {
+function W(t) {
   const e = window.getComputedStyle(t), n = e.display, i = parseInt(e.maxHeight, 10).toString();
   if (n !== "none" && i !== "0")
     return {
@@ -69,58 +21,56 @@ function S(t) {
       offsetWidth: t.offsetWidth
     };
   t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
-  const a = t.scrollHeight, o = t.clientHeight, c = t.offsetHeight, u = t.scrollWidth, r = t.clientWidth, s = t.offsetWidth;
-  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: a, clientHeight: o, offsetHeight: c, scrollWidth: u, clientWidth: r, offsetWidth: s };
+  const l = t.scrollHeight, o = t.clientHeight, r = t.offsetHeight, b = t.scrollWidth, a = t.clientWidth, s = t.offsetWidth;
+  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: l, clientHeight: o, offsetHeight: r, scrollWidth: b, clientWidth: a, offsetWidth: s };
 }
-function B(t, e) {
+function P(t, e) {
   if (!t || !e)
     return !1;
   const n = t.getBoundingClientRect();
   return n.top <= e.clientY && e.clientY <= n.top + n.height && n.left <= e.clientX && e.clientX <= n.left + n.width;
 }
-function P(t, e, n, i) {
-  const o = (i == null ? void 0 : i.verticalOffset) || 0, c = (i == null ? void 0 : i.horizontalOffset) || 0, u = (i == null ? void 0 : i.responsiveHeight) || !1, r = e.getBoundingClientRect(), s = S(t), f = r.left, m = r.top, g = document.documentElement.clientWidth - (f + r.width), h = m - o, A = document.documentElement.clientHeight - (m + r.height + o);
-  let l = f, p = m + r.height + o, b = s.offsetWidth - r.width;
-  const d = { horizontal: "start", vertical: "below" };
-  let H = `${A - o}px`;
-  i != null && i.centered && f - 16 + r.width / 2 > s.offsetWidth / 2 && g - 16 > b / 2 && (l -= b /= 2, d.horizontal = "center"), g < b && f > b && (l = l - b, d.horizontal = "end"), c && d.horizontal !== "center" && r.width / 2 < c && (l += c * (d.horizontal === "start" ? -1 : 1)), (f < b && g < b || document.documentElement.clientWidth < s.offsetWidth) && (l = document.documentElement.clientWidth / 2 - s.offsetWidth / 2), (A - o < s.scrollHeight && h - o > (u ? s.clientHeight : s.scrollHeight) || h > A && A - o < s.clientHeight && !u) && (p = h < s.scrollHeight ? p - r.height - h - o : m - s.clientHeight - o, H = `${h - o}px`, d.vertical = "above");
-  const v = n.getBoundingClientRect();
-  return v.left < 0 && (l -= v.left), v.top < 0 && (p -= v.top), {
-    top: p,
-    left: l,
-    maxHeight: H,
-    alignment: d
+function g(t, e, n, i) {
+  const o = (i == null ? void 0 : i.verticalOffset) || 0, r = (i == null ? void 0 : i.horizontalOffset) || 0, b = (i == null ? void 0 : i.responsiveHeight) || !1, a = e.getBoundingClientRect(), s = W(t), d = a.left, m = a.top, x = document.documentElement.clientWidth - (d + a.width), u = m - o, p = document.documentElement.clientHeight - (m + a.height + o);
+  let c = d, v = m + a.height + o, f = s.offsetWidth - a.width;
+  const h = { horizontal: "start", vertical: "below" };
+  let y = `${p - o}px`;
+  i != null && i.centered && d - 16 + a.width / 2 > s.offsetWidth / 2 && x - 16 > f / 2 && (c -= f /= 2, h.horizontal = "center"), x < f && d > f && (c = c - f, h.horizontal = "end"), r && h.horizontal !== "center" && a.width / 2 < r && (c += r * (h.horizontal === "start" ? -1 : 1)), (d < f && x < f || document.documentElement.clientWidth < s.offsetWidth) && (c = document.documentElement.clientWidth / 2 - s.offsetWidth / 2), (p - o < s.scrollHeight && u - o > (b ? s.clientHeight : s.scrollHeight) || u > p && p - o < s.clientHeight && !b) && (v = u < s.scrollHeight ? v - a.height - u - o : m - s.clientHeight - o, y = `${u - o}px`, h.vertical = "above");
+  const A = n.getBoundingClientRect();
+  return A.left < 0 && (c -= A.left), A.top < 0 && (v -= A.top), {
+    top: v,
+    left: c,
+    maxHeight: y,
+    alignment: h
   };
 }
-function I(t, e, n, i, a) {
+function R(t, e, n, i, l) {
   if (!t || !e)
     return;
-  a.style.setProperty("--sbb-options-panel-width", `${e.offsetWidth}px`), a.style.setProperty("--sbb-options-panel-origin-height", `${e.offsetHeight}px`);
-  const o = P(n, e, i);
-  a.style.setProperty("--sbb-options-panel-position-x", `${o.left}px`), a.style.setProperty("--sbb-options-panel-position-y", `${o.top}px`), a.style.setProperty("--sbb-options-panel-max-height", o.maxHeight), a.setAttribute("data-options-panel-position", o.alignment.vertical), e.setAttribute("data-options-panel-position", o.alignment.vertical);
+  l.style.setProperty("--sbb-options-panel-width", `${e.offsetWidth}px`), l.style.setProperty("--sbb-options-panel-origin-height", `${e.offsetHeight}px`);
+  const o = g(n, e, i);
+  l.style.setProperty("--sbb-options-panel-position-x", `${o.left}px`), l.style.setProperty("--sbb-options-panel-position-y", `${o.top}px`), l.style.setProperty("--sbb-options-panel-max-height", o.maxHeight), l.setAttribute("data-options-panel-position", o.alignment.vertical), e.setAttribute("data-options-panel-position", o.alignment.vertical);
 }
-function Y(t, e, n, i) {
+function $(t, e, n, i) {
   t && (t.setAttribute("aria-haspopup", e), t.setAttribute("aria-controls", n), t.setAttribute("aria-expanded", `${i === "opening" || i === "opened"}`));
 }
-function M(t) {
+function z(t) {
   t && (t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"));
 }
-function X(t, e, n, i = "listbox") {
+function C(t, e, n, i = "listbox") {
   t && (t.setAttribute("autocomplete", "off"), t.setAttribute("role", "combobox"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", i), t.setAttribute("aria-controls", e), t.setAttribute("aria-owns", e), t.setAttribute("aria-expanded", `${n}`));
 }
-function q(t) {
+function B(t) {
   t && (t.removeAttribute("autocomplete"), t.removeAttribute("role"), t.removeAttribute("aria-autocomplete"), t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-owns"), t.removeAttribute("aria-expanded"));
 }
 export {
-  C as applyInertMechanism,
-  P as getElementPosition,
-  S as getElementRectangle,
-  B as isEventOnElement,
-  $ as overlayGapFixCorners,
-  q as removeAriaComboBoxAttributes,
-  M as removeAriaOverlayTriggerAttributes,
-  z as removeInertMechanism,
-  X as setAriaComboBoxAttributes,
-  Y as setAriaOverlayTriggerAttributes,
-  I as setOverlayPosition
+  g as getElementPosition,
+  W as getElementRectangle,
+  P as isEventOnElement,
+  O as overlayGapFixCorners,
+  B as removeAriaComboBoxAttributes,
+  z as removeAriaOverlayTriggerAttributes,
+  C as setAriaComboBoxAttributes,
+  $ as setAriaOverlayTriggerAttributes,
+  R as setOverlayPosition
 };

package/core/styles/core.scss

@@ -15,31 +15,33 @@
   // Grab css vars defined by `@sbb-esta/lyne-design-tokens` package
   @include sbb-css-tokens.lyne-design-tokens-css-variables;
 
-  // Train formation
-  --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
-  --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
-  --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
-  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  & {
+    // Train formation
+    --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
+    --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
+    --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
+    --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
 
-  // Header
-  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+    // Header
+    --sbb-header-height: var(--sbb-spacing-fixed-14x);
 
-  // Time Input
-  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+    // Time Input
+    --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
 
-  // Overlay
-  --sbb-overlay-default-z-index: 1000;
+    // Overlay
+    --sbb-overlay-default-z-index: 1000;
 
-  // Infinity border radius, can be used to achieve rounded border on start and end
-  // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
-  --sbb-border-radius-infinity: 10000000em;
+    // Infinity border radius, can be used to achieve rounded border on start and end
+    // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
+    --sbb-border-radius-infinity: 10000000em;
 
-  @include mediaqueries.mq($from: medium) {
-    // Header
-    --sbb-header-height: var(--sbb-spacing-fixed-24x);
+    @include mediaqueries.mq($from: medium) {
+      // Header
+      --sbb-header-height: var(--sbb-spacing-fixed-24x);
 
-    // Time Input
-    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+      // Time Input
+      --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+    }
   }
 }
 

package/core/styles/mixins/link.scss

@@ -57,7 +57,7 @@
 @mixin link-hover-rules {
   @include mediaqueries.hover-mq($hover: true) {
     color: var(--sbb-link-color-hover);
-    text-decoration: underline;
+    text-decoration: var(--sbb-link-hover-text-decoration, underline);
   }
 }
 
@@ -78,13 +78,16 @@
 }
 
 @mixin link-consolidation {
-  @include link-base;
   @include typo.text-inherit;
-  @include link-focus-visible;
-  @include link-hover;
+  @include link-base;
 
-  // Active definitions have to be after :hover definitions
-  @include link-active;
+  & {
+    @include link-focus-visible;
+    @include link-hover;
+
+    // Active definitions have to be after :hover definitions
+    @include link-active;
+  }
 }
 
 @mixin link {

package/core/styles/mixins/lists.scss

@@ -93,6 +93,11 @@
   );
   --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
 
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  counter-reset: steps;
+
   &:where(.sbb-text-s) {
     --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
   }
@@ -107,11 +112,6 @@
     }
   }
 
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  counter-reset: steps;
-
   /* stylelint-disable-next-line no-descending-specificity */
   > li {
     position: relative;