@sbb-esta/lyne-elements 1.7.0 → 1.9.0

package/core/controllers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controllers.d.ts","sourceRoot":"","sources":["../../../src/elements/core/controllers.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC"}
+{"version":3,"file":"controllers.d.ts","sourceRoot":"","sources":["../../../src/elements/core/controllers.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC"}

package/core/controllers.js

@@ -1,7 +1,7 @@
-import { isServer as d } from "lit";
+import { isServer as c } from "lit";
 import { readConfig as u } from "./config.js";
 import { AgnosticMutationObserver as _ } from "./observers.js";
-class b {
+class C {
   constructor(t) {
     this._host = t, this._abortController = new AbortController(), this._host.addController(this);
   }
@@ -17,14 +17,57 @@ class b {
     (t = this._abortController) == null || t.abort(), this._abortController = void 0;
   }
 }
+const b = ["script", "head", "template", "style"], f = /* @__PURE__ */ new Set(), g = /* @__PURE__ */ new Set();
+class E {
+  constructor(t, i = f, r = g) {
+    var s, o;
+    this._host = t, this._inertElements = i, this._inertOverlays = r, (o = (s = this._host).addController) == null || o.call(s, this);
+  }
+  hostConnected() {
+    this._host.isOpen && this.activate();
+  }
+  hostDisconnected() {
+    this._inertOverlays.has(this._host) && this.deactivate();
+  }
+  /** Applies inert state to every other element on the page except the overlay. */
+  activate() {
+    this._inertOverlays.size && this._removeInertAttributes(), this._inertOverlays.add(this._host), this._addInertAttributes();
+  }
+  /** Removes inert state. */
+  deactivate() {
+    if (this._currentOverlay() !== this._host) {
+      this._inertOverlays.has(this._host) && this._inertOverlays.delete(this._host);
+      return;
+    }
+    this._removeInertAttributes(), this._inertOverlays.delete(this._host), this._inertOverlays.size && this._addInertAttributes();
+  }
+  _currentOverlay() {
+    return [...this._inertOverlays].pop() ?? null;
+  }
+  _removeInertAttributes() {
+    this._inertElements.forEach((t) => {
+      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")));
+    }), this._inertElements.clear();
+  }
+  _addInertAttributes() {
+    var i, r;
+    let t = this._currentOverlay();
+    for (; t !== document.documentElement && t !== null; )
+      Array.from(((i = (t == null ? void 0 : t.parentElement) ?? (t == null ? void 0 : t.getRootNode())) == null ? void 0 : i.childNodes) ?? []).filter(
+        (s) => s !== t && s instanceof window.HTMLElement && !b.includes(s.localName)
+      ).forEach((s) => {
+        this._inertElements.add(s), s.inert || (s.inert = !0, s.toggleAttribute("data-sbb-inert", !0)), s.hasAttribute("aria-hidden") || (s.setAttribute("aria-hidden", "true"), s.toggleAttribute("data-sbb-aria-hidden", !0));
+      }), t = (t == null ? void 0 : t.parentElement) ?? ((r = t == null ? void 0 : t.getRootNode()) == null ? void 0 : r.host) ?? null;
+  }
+}
 const e = class e {
   constructor(t) {
     this._host = t, this._handlers = [], this._host.addController(this);
   }
   /** Get the current language. */
   static get current() {
-    const s = ((u().language ?? (d ? e._defaultLanguage : document.documentElement.getAttribute("lang"))) || e._defaultLanguage).split("-")[0];
-    return e._supportedLocales.includes(s) ? s : e._defaultLanguage;
+    const i = ((u().language ?? (c ? e._defaultLanguage : document.documentElement.getAttribute("lang"))) || e._defaultLanguage).split("-")[0];
+    return e._supportedLocales.includes(i) ? i : e._defaultLanguage;
   }
   /** Get the current language. */
   get current() {
@@ -44,20 +87,20 @@ const e = class e {
     this._previousLanguage = this.current, e._listeners.delete(this), e._listeners.size || e._observer.disconnect();
   }
   _callHandlers(t = !0) {
-    this._handlers.forEach((s) => s()), t && this._host.requestUpdate();
+    this._handlers.forEach((i) => i()), t && this._host.requestUpdate();
   }
 };
 e._defaultLanguage = "en", e._supportedLocales = ["en", "de", "fr", "it"], e._listeners = /* @__PURE__ */ new Set(), e._observer = new _((t) => {
-  t[0].oldValue !== document.documentElement.getAttribute("lang") && e._listeners.forEach((s) => s._callHandlers());
+  t[0].oldValue !== document.documentElement.getAttribute("lang") && e._listeners.forEach((i) => i._callHandlers());
 }), e._observerConfig = {
   attributeFilter: ["lang"],
   attributeOldValue: !0
 };
-let h = e;
-class C {
-  constructor(t, s = null) {
-    this._host = t, this._onChangeCallback = s, this.slots = /* @__PURE__ */ new Set(), this._slotchangeHandler = (o) => {
-      this._syncSlots(o.target);
+let d = e;
+class p {
+  constructor(t, i = null) {
+    this._host = t, this._onChangeCallback = i, this.slots = /* @__PURE__ */ new Set(), this._slotchangeHandler = (r) => {
+      this._syncSlots(r.target);
     }, this._host.addController(this);
   }
   hostConnected() {
@@ -69,20 +112,21 @@ class C {
     (t = this._host.shadowRoot) == null || t.removeEventListener("slotchange", this._slotchangeHandler);
   }
   _syncSlots(...t) {
-    var n;
-    for (const r of t) {
-      const i = r.name || "unnamed";
-      r.assignedNodes().some((l) => {
-        var a;
-        return "tagName" in l || ((a = l.textContent) == null ? void 0 : a.trim());
-      }) ? this.slots.add(i) : this.slots.delete(i);
+    var s;
+    for (const o of t) {
+      const a = o.name || "unnamed";
+      o.assignedNodes().some((h) => {
+        var l;
+        return "tagName" in h || ((l = h.textContent) == null ? void 0 : l.trim());
+      }) ? this.slots.add(a) : this.slots.delete(a);
     }
-    const s = this._host.getAttribute("data-slot-names"), o = [...this.slots].sort().join(" ");
-    o ? this._host.getAttribute("data-slot-names") !== o && this._host.setAttribute("data-slot-names", o) : this._host.removeAttribute("data-slot-names"), o !== s && ((n = this._onChangeCallback) == null || n.call(this));
+    const i = this._host.getAttribute("data-slot-names"), r = [...this.slots].sort().join(" ");
+    r ? this._host.getAttribute("data-slot-names") !== r && this._host.setAttribute("data-slot-names", r) : this._host.removeAttribute("data-slot-names"), r !== i && ((s = this._onChangeCallback) == null || s.call(this));
   }
 }
 export {
-  b as SbbConnectedAbortController,
-  h as SbbLanguageController,
-  C as SbbSlotStateController
+  C as SbbConnectedAbortController,
+  E as SbbInertController,
+  d as SbbLanguageController,
+  p as SbbSlotStateController
 };

package/core/dom/platform.d.ts

@@ -15,10 +15,9 @@ export declare const isAndroid: boolean;
 /** Whether the current browser is Safari. */
 export declare const isSafari: boolean;
 /**
- * Note: `userAgentData` is still experimental. If possible, avoid to use it.
- * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgentData
+ * We just check for the blink engine.
  */
-export declare const isChromium: any;
+export declare const isChromium: boolean;
 /** Whether the application is being rendered in a Next.js environment. */
 export declare const isNextjs: () => boolean;
 //# sourceMappingURL=platform.d.ts.map

package/core/dom/platform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/dom/platform.ts"],"names":[],"mappings":"AAmBA,qDAAqD;AACrD,eAAO,MAAM,MAAM,SAAmD,CAAC;AAEvE,iEAAiE;AACjE,eAAO,MAAM,SAAS,SAA2D,CAAC;AAGlF,qDAAqD;AACrD,eAAO,MAAM,OAAO,SAKR,CAAC;AAIb,sDAAsD;AACtD,eAAO,MAAM,QAAQ,SACuE,CAAC;AAE7F,iDAAiD;AACjD,eAAO,MAAM,KAAK,SACoE,CAAC;AAMvF,8CAA8C;AAC9C,eAAO,MAAM,SAAS,SAAgE,CAAC;AAEvF,+CAA+C;AAE/C,eAAO,MAAM,SAAS,SAAkE,CAAC;AAKzF,6CAA6C;AAC7C,eAAO,MAAM,QAAQ,SAA+D,CAAC;AAErF;;;GAGG;AACH,eAAO,MAAM,UAAU,KAEkE,CAAC;AAE1F,0EAA0E;AAC1E,eAAO,MAAM,QAAQ,QAAO,OAAmD,CAAC"}
+{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/dom/platform.ts"],"names":[],"mappings":"AAmBA,qDAAqD;AACrD,eAAO,MAAM,MAAM,SAAmD,CAAC;AAEvE,iEAAiE;AACjE,eAAO,MAAM,SAAS,SAA2D,CAAC;AAGlF,qDAAqD;AACrD,eAAO,MAAM,OAAO,SAKR,CAAC;AAIb,sDAAsD;AACtD,eAAO,MAAM,QAAQ,SACuE,CAAC;AAE7F,iDAAiD;AACjD,eAAO,MAAM,KAAK,SACoE,CAAC;AAMvF,8CAA8C;AAC9C,eAAO,MAAM,SAAS,SAAgE,CAAC;AAEvF,+CAA+C;AAE/C,eAAO,MAAM,SAAS,SAAkE,CAAC;AAKzF,6CAA6C;AAC7C,eAAO,MAAM,QAAQ,SAA+D,CAAC;AAErF;;GAEG;AACH,eAAO,MAAM,UAAU,SAAU,CAAC;AAElC,0EAA0E;AAC1E,eAAO,MAAM,QAAQ,QAAO,OAAmD,CAAC"}

package/core/dom.js

@@ -1,20 +1,20 @@
 import { isServer as e } from "lit";
-const E = ["zero", "micro", "small", "medium", "wide", "large", "ultra"];
-function S(t, n, o) {
+const v = ["zero", "micro", "small", "medium", "wide", "large", "ultra"];
+function E(t, n, o) {
   if (e)
     return !1;
-  const i = getComputedStyle(document.documentElement), r = t ? i.getPropertyValue(`--sbb-breakpoint-${t}-min`) : "", s = n ? `${parseFloat(
+  const i = getComputedStyle(document.documentElement), s = t ? i.getPropertyValue(`--sbb-breakpoint-${t}-min`) : "", r = n ? `${parseFloat(
     i.getPropertyValue(
       `--sbb-breakpoint-${n}-${o != null && o.includeMaxBreakpoint ? "max" : "min"}`
     )
-  ) - (o != null && o.includeMaxBreakpoint ? 0 : 0.0625)}rem` : "", f = r && `(min-width: ${r})`, g = s && `(max-width: ${s})`, y = r && s && " and ";
-  return window.matchMedia(`${f}${y}${g}`).matches;
+  ) - (o != null && o.includeMaxBreakpoint ? 0 : 0.0625)}rem` : "", m = s && `(min-width: ${s})`, f = r && `(max-width: ${r})`, y = s && r && " and ";
+  return window.matchMedia(`${m}${y}${f}`).matches;
 }
-function h(t) {
+function g(t) {
   return e ? null : typeof t == "string" ? document.getElementById(t) : t instanceof window.Element ? t : null;
 }
-const p = () => !e && document.documentElement.getAttribute("dir") || "ltr";
-function x(t, n) {
+const A = () => !e && document.documentElement.getAttribute("dir") || "ltr";
+function S(t, n) {
   if (e)
     return null;
   for (n = n.parentElement ?? n.getRootNode().host; n && n !== document && n !== window; ) {
@@ -25,16 +25,16 @@ function x(t, n) {
   }
   return null;
 }
-const k = "a,button,sbb-teaser-hero,sbb-teaser";
-function I(t, n) {
+const p = "a,button,sbb-teaser-hero,sbb-teaser";
+function x(t, n) {
   var o;
   if (!n) {
     const i = (o = t.closest) == null ? void 0 : o.call(t, "sbb-form-field");
     return i == null ? void 0 : i.querySelector("input");
   }
-  return h(n);
+  return g(n);
 }
-function $(t, n, o) {
+function k(t, n, o) {
   o ? t.setAttribute(n, o) : t.removeAttribute(n);
 }
 let a;
@@ -43,26 +43,24 @@ try {
 } catch {
   a = !1;
 }
-const m = !e && /(edge)/i.test(navigator.userAgent), c = !e && /(msie|trident)/i.test(navigator.userAgent), w = !e && !!(window.chrome || a) && typeof CSS < "u" && !m && !c, v = !e && /AppleWebKit/i.test(navigator.userAgent) && !w && !m && !c, M = !e && /iPad|iPhone|iPod/.test(navigator.userAgent) && !("MSStream" in window), _ = !e && /(firefox|minefield)/i.test(navigator.userAgent), W = !e && /android/i.test(navigator.userAgent) && !c, B = !e && /safari/i.test(navigator.userAgent) && v;
-var l, b;
-const C = !e && ((b = (l = navigator.userAgentData) == null ? void 0 : l.brands) == null ? void 0 : b.some((t) => t.brand == "Chromium")), N = () => !!globalThis.next;
-function u() {
+const u = !e && /(edge)/i.test(navigator.userAgent), c = !e && /(msie|trident)/i.test(navigator.userAgent), b = !e && !!(window.chrome || a) && typeof CSS < "u" && !u && !c, h = !e && /AppleWebKit/i.test(navigator.userAgent) && !b && !u && !c, I = !e && /iPad|iPhone|iPod/.test(navigator.userAgent) && !("MSStream" in window), $ = !e && /(firefox|minefield)/i.test(navigator.userAgent), M = !e && /android/i.test(navigator.userAgent) && !c, _ = !e && /safari/i.test(navigator.userAgent) && h, W = b, B = () => !!globalThis.next;
+function l() {
   return document.body.hasAttribute("data-sbb-scroll-disabled");
 }
-class P {
+class N {
   disableScroll() {
-    if (u())
+    if (l())
       return;
     this._position = document.body.style.position, this._overflow = document.body.style.overflow, this._marginInlineEnd = document.body.style.marginInlineEnd;
     const n = window.innerWidth - document.documentElement.clientWidth;
     document.body.style.overflow = "hidden", document.body.style.position = "relative", document.body.style.marginInlineEnd = `${n}px`, document.body.style.setProperty("--sbb-scrollbar-width", `${n}px`), document.body.toggleAttribute("data-sbb-scroll-disabled", !0);
   }
   enableScroll() {
-    u() && (document.body.style.position = this._position || "", document.body.style.overflow = this._overflow || "", document.body.style.marginInlineEnd = this._marginInlineEnd || "", document.body.style.setProperty("--sbb-scrollbar-width", "0"), document.body.removeAttribute("data-sbb-scroll-disabled"));
+    l() && (document.body.style.position = this._position || "", document.body.style.overflow = this._overflow || "", document.body.style.marginInlineEnd = this._marginInlineEnd || "", document.body.style.setProperty("--sbb-scrollbar-width", "0"), document.body.removeAttribute("data-sbb-scroll-disabled"));
   }
 }
 const d = /* @__PURE__ */ new Map();
-function R(t) {
+function P(t) {
   if (d.has(t.constructor))
     return d.get(t.constructor);
   const n = (
@@ -75,25 +73,25 @@ function R(t) {
   throw new Error(`Given element ${t.constructor.name} has not been registered yet.`);
 }
 export {
-  k as ACTION_ELEMENTS,
-  P as SbbScrollHandler,
-  E as breakpoints,
-  I as findInput,
-  h as findReferencedElement,
-  p as getDocumentWritingMode,
-  R as getLocalName,
-  x as hostContext,
-  W as isAndroid,
-  w as isBlink,
-  S as isBreakpoint,
-  C as isChromium,
-  m as isEdge,
-  _ as isFirefox,
-  M as isIOS,
-  N as isNextjs,
-  B as isSafari,
+  p as ACTION_ELEMENTS,
+  N as SbbScrollHandler,
+  v as breakpoints,
+  x as findInput,
+  g as findReferencedElement,
+  A as getDocumentWritingMode,
+  P as getLocalName,
+  S as hostContext,
+  M as isAndroid,
+  b as isBlink,
+  E as isBreakpoint,
+  W as isChromium,
+  u as isEdge,
+  $ as isFirefox,
+  I as isIOS,
+  B as isNextjs,
+  _ as isSafari,
   c as isTrident,
-  v as isWebkit,
-  u as pageScrollDisabled,
-  $ as setOrRemoveAttribute
+  h as isWebkit,
+  l as pageScrollDisabled,
+  k as setOrRemoveAttribute
 };

package/core/overlay/overlay.d.ts

@@ -4,17 +4,4 @@ import { TemplateResult } from 'lit';
  * 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

@@ -27,6 +27,7 @@
 
     // Time Input
     --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+    --sbb-time-input-s-max-width: #{functions.px-to-rem-build(51)};
 
     // Overlay
     --sbb-overlay-default-z-index: 1000;
@@ -41,6 +42,7 @@
 
       // Time Input
       --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+      --sbb-time-input-s-max-width: #{functions.px-to-rem-build(58)};
     }
   }
 }
@@ -123,4 +125,8 @@ sbb-title + p {
 
 input[data-sbb-time-input] {
   max-width: var(--sbb-time-input-max-width);
+
+  sbb-form-field[size='s'] & {
+    max-width: var(--sbb-time-input-s-max-width);
+  }
 }

package/core/styles/mixins/lists.scss

@@ -81,6 +81,7 @@
   --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
   --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
   --sbb-step-list-marker-to-text-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
 
   // Additional space from overall li padding to the text because text
   // has to be centered to marker number.
@@ -117,7 +118,6 @@
     position: relative;
     counter-increment: steps;
     background-color: var(--sbb-color-milk);
-    border-radius: var(--sbb-border-radius-4x);
     padding-block: calc(
         var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)
       )
@@ -131,6 +131,16 @@
       var(--sbb-step-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block)
     );
 
+    &:first-of-type {
+      border-start-start-radius: var(--sbb-step-list-border-radius);
+      border-start-end-radius: var(--sbb-step-list-border-radius);
+    }
+
+    &:last-of-type {
+      border-end-start-radius: var(--sbb-step-list-border-radius);
+      border-end-end-radius: var(--sbb-step-list-border-radius);
+    }
+
     &::before {
       @include typo.text-xxs--bold;
 

package/core/testing/wait-for-image-ready.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wait-for-image-ready.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-image-ready.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,wBAAsB,iBAAiB,CACrC,OAAO,EAAE,gBAAgB,GAAG,eAAe,EAC3C,qBAAqB,SAAW,GAC/B,OAAO,CAAC,IAAI,CAAC,CAcf"}
+{"version":3,"file":"wait-for-image-ready.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-image-ready.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,wBAAsB,iBAAiB,CACrC,OAAO,EAAE,gBAAgB,GAAG,eAAe,EAC3C,qBAAqB,SAAW,GAC/B,OAAO,CAAC,IAAI,CAAC,CAkCf"}