@sbb-esta/lyne-elements 2.0.3 → 2.2.0

package/core/dom.js

@@ -1,45 +1,45 @@
-import { isServer as e } from "lit";
+import { isServer as o } from "lit";
 function w(n, t) {
-  if (e)
+  if (o)
     return !0;
-  const o = getComputedStyle(n).getPropertyValue(t);
-  return parseFloat(o) === 0;
+  const e = getComputedStyle(n).getPropertyValue(t);
+  return parseFloat(e) === 0;
 }
-const p = ["zero", "micro", "small", "medium", "wide", "large", "ultra"];
-function v(n, t, o) {
-  if (e)
+const v = ["zero", "micro", "small", "medium", "wide", "large", "ultra"];
+function p(n, t, e) {
+  if (o)
     return null;
-  const i = getComputedStyle(document.documentElement), s = n ? i.getPropertyValue(`--sbb-breakpoint-${n}-min`) : "", r = t ? `${parseFloat(i.getPropertyValue(`--sbb-breakpoint-${t}-${o != null && o.includeMaxBreakpoint ? "max" : "min"}`)) - (o != null && o.includeMaxBreakpoint ? 0 : 0.0625)}rem` : "", b = s && `(min-width: ${s})`, m = r && `(max-width: ${r})`, f = s && r && " and ";
-  return window.matchMedia(`${b}${f}${m}`).matches;
+  const i = getComputedStyle(document.documentElement), s = n ? i.getPropertyValue(`--sbb-breakpoint-${n}-min`) : "", r = t ? `${parseFloat(i.getPropertyValue(`--sbb-breakpoint-${t}-${e != null && e.includeMaxBreakpoint ? "max" : "min"}`)) - (e != null && e.includeMaxBreakpoint ? 0 : 0.0625)}rem` : "", b = s && `(min-width: ${s})`, m = r && `(max-width: ${r})`, y = s && r && " and ";
+  return window.matchMedia(`${b}${y}${m}`).matches;
 }
-function y(n) {
-  return e ? null : typeof n == "string" ? document.getElementById(n) : n instanceof window.Element ? n : null;
+function h(n) {
+  return o ? null : typeof n == "string" ? document.getElementById(n) : n instanceof window.Element ? n : null;
 }
 function A(n, t) {
-  if (e)
+  if (o)
     return null;
   for (t = t.parentElement ?? t.getRootNode().host; t && t !== document && t !== window; ) {
-    const o = t.closest(n);
-    if (o)
-      return o;
+    const e = t.closest(n);
+    if (e)
+      return e;
     t = t.getRootNode().host;
   }
   return null;
 }
 const S = "a,button,sbb-teaser-hero,sbb-teaser";
 function E(n, t) {
-  var o;
+  var e;
   if (!t) {
-    const i = (o = n.closest) == null ? void 0 : o.call(n, "sbb-form-field");
+    const i = (e = n.closest) == null ? void 0 : e.call(n, "sbb-form-field");
     return i == null ? void 0 : i.querySelector("input");
   }
-  return y(t);
+  return h(t);
 }
 function x() {
-  return !e && document.documentElement.classList.contains("sbb-lean");
+  return !o && document.documentElement.classList.contains("sbb-lean");
 }
-function I(n, t, o) {
-  o ? n.setAttribute(t, o) : n.removeAttribute(t);
+function I(n, t, e) {
+  e ? n.setAttribute(t, e) : n.removeAttribute(t);
 }
 let d;
 try {
@@ -47,41 +47,41 @@ try {
 } catch {
   d = !1;
 }
-const u = !e && /(edge)/i.test(navigator.userAgent), a = !e && /(msie|trident)/i.test(navigator.userAgent), c = !e && !!(window.chrome || d) && typeof CSS < "u" && !u && !a, g = !e && /AppleWebKit/i.test(navigator.userAgent) && !c && !u && !a, k = !e && /iPad|iPhone|iPod/.test(navigator.userAgent) && !("MSStream" in window), $ = !e && /(firefox|minefield)/i.test(navigator.userAgent), P = !e && /android/i.test(navigator.userAgent) && !a, B = !e && /safari/i.test(navigator.userAgent) && g, M = c, W = () => !!globalThis.next;
+const u = !o && /(edge)/i.test(navigator.userAgent), a = !o && /(msie|trident)/i.test(navigator.userAgent), c = !o && !!(window.chrome || d) && typeof CSS < "u" && !u && !a, f = !o && /AppleWebKit/i.test(navigator.userAgent) && !c && !u && !a, k = !o && /iPad|iPhone|iPod/.test(navigator.userAgent) && !("MSStream" in window), $ = !o && /(firefox|minefield)/i.test(navigator.userAgent), _ = !o && /android/i.test(navigator.userAgent) && !a, P = !o && /safari/i.test(navigator.userAgent) && f, B = c, M = () => !!globalThis.next;
 function l() {
   return document.body.hasAttribute("data-sbb-scroll-disabled");
 }
-class _ {
+class W {
   disableScroll() {
     if (l())
       return;
-    this._position = document.body.style.position, this._overflow = document.body.style.overflow, this._marginInlineEnd = document.body.style.marginInlineEnd;
+    this._height = document.body.style.height, this._position = document.body.style.position, this._overflow = document.body.style.overflow, this._marginInlineEnd = document.body.style.marginInlineEnd;
     const t = window.innerWidth - document.documentElement.clientWidth;
-    document.body.style.overflow = "hidden", document.body.style.position = "relative", document.body.style.marginInlineEnd = `${t}px`, document.body.style.setProperty("--sbb-scrollbar-width", `${t}px`), document.body.toggleAttribute("data-sbb-scroll-disabled", !0);
+    document.body.style.overflow = "hidden", document.body.style.height = "100dvh", document.body.style.position = "relative", document.body.style.marginInlineEnd = `${t}px`, document.body.style.setProperty("--sbb-scrollbar-width", `${t}px`), document.body.toggleAttribute("data-sbb-scroll-disabled", !0);
   }
   enableScroll() {
-    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"));
+    l() && (document.body.style.height = this._height || "", 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"));
   }
 }
 export {
   S as ACTION_ELEMENTS,
-  _ as SbbScrollHandler,
-  p as breakpoints,
+  W as SbbScrollHandler,
+  v as breakpoints,
   E as findInput,
-  y as findReferencedElement,
+  h as findReferencedElement,
   A as hostContext,
-  P as isAndroid,
+  _ as isAndroid,
   c as isBlink,
-  v as isBreakpoint,
-  M as isChromium,
+  p as isBreakpoint,
+  B as isChromium,
   u as isEdge,
   $ as isFirefox,
   k as isIOS,
   x as isLean,
-  W as isNextjs,
-  B as isSafari,
+  M as isNextjs,
+  P as isSafari,
   a as isTrident,
-  g as isWebkit,
+  f as isWebkit,
   w as isZeroAnimationDuration,
   l as pageScrollDisabled,
   I as setOrRemoveAttribute

package/core/eventing.js

@@ -1,4 +1,4 @@
-function a(t, n, e = null) {
+function u(t, n, e = null) {
   const o = t.composedPath();
   let s = o.findIndex((r) => r === e);
   return s === -1 && (s = void 0), o.slice(0, s).find((r) => r instanceof window.HTMLElement && r.hasAttribute(n));
@@ -8,7 +8,7 @@ const i = {
   cancelable: !0,
   composed: !0
 };
-class u {
+class a {
   constructor(n, e, o = i) {
     this._element = n, this._eventName = e, this._options = o;
   }
@@ -46,8 +46,8 @@ const m = (t, n) => {
   };
 };
 export {
-  u as EventEmitter,
-  a as composedPathHasAttribute,
+  a as EventEmitter,
+  u as composedPathHasAttribute,
   c as forwardEvent,
   f as forwardEventToHost,
   d as getEventTarget,

package/core/images.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../../src/elements/core/images.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,EAAE,MAAM,EAYzB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../../src/elements/core/images.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,EAAE,MAAM,EAWzB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/core/mixins.js

@@ -2,7 +2,7 @@ var D = (l) => {
   throw TypeError(l);
 };
 var M = (l, p, o) => p.has(l) || D("Cannot " + o);
-var k = (l, p, o) => (M(l, p, "read from private field"), o ? o.call(l) : p.get(l)), x = (l, p, o) => p.has(l) ? D("Cannot add the same private member more than once") : p instanceof WeakSet ? p.add(l) : p.set(l, o), _ = (l, p, o, r) => (M(l, p, "write to private field"), r ? r.call(l, o) : p.set(l, o), o);
+var k = (l, p, o) => (M(l, p, "read from private field"), o ? o.call(l) : p.get(l)), x = (l, p, o) => p.has(l) ? D("Cannot add the same private member more than once") : p instanceof WeakSet ? p.add(l) : p.set(l, o), v = (l, p, o, r) => (M(l, p, "write to private field"), r ? r.call(l, o) : p.set(l, o), o);
 import { __esDecorate as y, __runInitializers as f } from "tslib";
 import { property as S, state as F } from "lit/decorators.js";
 import { forceType as w, getOverride as N, hostAttributes as j } from "./decorators.js";
@@ -25,7 +25,7 @@ const I = (l) => (() => {
       return k(this, u);
     }
     set disabled(t) {
-      _(this, u, t);
+      v(this, u, t);
     }
     /**
      * Will be used as 'or' check to the current disabled state.
@@ -54,7 +54,7 @@ const I = (l) => (() => {
       return k(this, u);
     }
     set disabledInteractive(t) {
-      _(this, u, t);
+      v(this, u, t);
     }
   }, u = new WeakMap(), (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
@@ -76,7 +76,7 @@ const I = (l) => (() => {
     constructor() {
       super(...arguments);
       x(this, d);
-      this._value = (f(this, r), null), this.internals = this.attachInternals(), _(this, d, f(this, e, !1)), f(this, n);
+      this._value = (f(this, r), null), this.internals = this.attachInternals(), v(this, d, f(this, e, !1)), f(this, n);
     }
     /**
      * Returns the form owner of the internals of the target element.
@@ -138,7 +138,7 @@ const I = (l) => (() => {
       return k(this, d);
     }
     set formDisabled(c) {
-      _(this, d, c);
+      v(this, d, c);
     }
     attributeChangedCallback(c, b, m) {
       (c !== "name" || b !== m) && super.attributeChangedCallback(c, b, m);
@@ -457,7 +457,7 @@ const I = (l) => (() => {
     constructor() {
       super(...arguments);
       x(this, u);
-      _(this, u, f(this, h, [])), this._handleSlotchange = (f(this, a), () => {
+      v(this, u, f(this, h, [])), this._handleSlotchange = (f(this, a), () => {
         const t = Array.from(this.children ?? []).filter((s) => this.listChildLocalNames.includes(s.localName));
         t.length === this.listChildren.length && this.listChildren.every((s, i) => t[i] === s) || (this.listChildren.filter((s) => !t.includes(s)).forEach((s) => s.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach((s, i) => s.setAttribute("slot", `${q}-${i}`)), this.removeAttribute(z));
       });
@@ -471,7 +471,7 @@ const I = (l) => (() => {
       return k(this, u);
     }
     set listChildren(t) {
-      _(this, u, t);
+      v(this, u, t);
     }
     connectedCallback() {
       var t;
@@ -557,7 +557,7 @@ const I = (l) => (() => {
       return k(this, u);
     }
     set negative(t) {
-      _(this, u, t);
+      v(this, u, t);
     }
   }, u = new WeakMap(), (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
@@ -574,40 +574,40 @@ const I = (l) => (() => {
       x(this, i);
       x(this, c);
       x(this, b);
-      _(this, i, f(this, h, "white")), _(this, c, (f(this, a), f(this, e, !1))), _(this, b, (f(this, n), f(this, t, ""))), this._panelConnected = (f(this, s), new P(this, m.events.panelConnected, { bubbles: !0 }));
+      v(this, i, f(this, h, "white")), v(this, c, (f(this, a), f(this, e, !1))), v(this, b, (f(this, n), f(this, t, ""))), this._panelConnected = (f(this, s), new P(this, m.events.panelConnected, { bubbles: !0 }));
     }
     /** The background color of the panel. */
     get color() {
       return k(this, i);
     }
     set color(g) {
-      _(this, i, g);
+      v(this, i, g);
     }
     /** Whether the unselected panel has a border. */
     get borderless() {
       return k(this, c);
     }
     set borderless(g) {
-      _(this, c, g);
+      v(this, c, g);
     }
     /** @internal used for accessibility label when in expansion panel */
     get expansionState() {
       return k(this, b);
     }
     set expansionState(g) {
-      _(this, b, g);
+      v(this, b, g);
     }
     connectedCallback() {
       super.connectedCallback(), this._panelConnected.emit();
     }
   }, i = new WeakMap(), c = new WeakMap(), b = new WeakMap(), (() => {
     const g = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    r = [S()], u = [w(), S({ reflect: !0, type: Boolean })], d = [w(), S()], y(m, null, r, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (v) => "color" in v, get: (v) => v.color, set: (v, C) => {
-      v.color = C;
-    } }, metadata: g }, h, a), y(m, null, u, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (v) => "borderless" in v, get: (v) => v.borderless, set: (v, C) => {
-      v.borderless = C;
-    } }, metadata: g }, e, n), y(m, null, d, { kind: "accessor", name: "expansionState", static: !1, private: !1, access: { has: (v) => "expansionState" in v, get: (v) => v.expansionState, set: (v, C) => {
-      v.expansionState = C;
+    r = [S()], u = [w(), S({ reflect: !0, type: Boolean })], d = [w(), S()], y(m, null, r, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (_) => "color" in _, get: (_) => _.color, set: (_, C) => {
+      _.color = C;
+    } }, metadata: g }, h, a), y(m, null, u, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (_) => "borderless" in _, get: (_) => _.borderless, set: (_, C) => {
+      _.borderless = C;
+    } }, metadata: g }, e, n), y(m, null, d, { kind: "accessor", name: "expansionState", static: !1, private: !1, access: { has: (_) => "expansionState" in _, get: (_) => _.expansionState, set: (_, C) => {
+      _.expansionState = C;
     } }, metadata: g }, t, s), g && Object.defineProperty(m, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: g });
   })(), m.events = {
     panelConnected: "panelConnected"

package/core/styles/core.scss

@@ -103,14 +103,35 @@ sbb-form-field {
     sbb-navigation,
     sbb-navigation-section,
     sbb-overlay,
+    sbb-popover,
     sbb-select,
     sbb-skiplink-list,
-    sbb-toast,
-    sbb-popover
+    sbb-toast
   ):not(:defined) {
   display: none;
 }
 
+// Hide popover artifacts
+[popover]:where(
+    sbb-autocomplete,
+    sbb-autocomplete-grid,
+    sbb-dialog,
+    sbb-menu,
+    sbb-navigation,
+    sbb-overlay,
+    sbb-popover,
+    sbb-toast
+  ) {
+  margin: 0;
+  padding: 0;
+  border: none;
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  color: inherit;
+  pointer-events: none;
+}
+
 // Ensure stable breadcrumb height during hydrating
 sbb-breadcrumb-group:not(:defined) {
   display: block;

package/core/testing.js

@@ -27,14 +27,14 @@ class p {
       return this._promiseEventMap.get(e).promise;
     {
       let r, s;
-      const n = {
+      const o = {
         promise: new Promise((a, l) => {
           r = a, s = l;
         }),
         resolve: r,
         reject: s
       };
-      return this._promiseEventMap.set(e, n), this._wrapPromiseWithTimeout(n, e, i);
+      return this._promiseEventMap.set(e, o), this._wrapPromiseWithTimeout(o, e, i);
     }
   }
   _wrapPromiseWithTimeout(e, i, r) {
@@ -62,11 +62,11 @@ function w(t) {
 async function f(t, e = 30, i = 2 * 1e3) {
   const r = /* @__PURE__ */ new Date();
   let s = 0;
-  function o() {
+  function n() {
     return s++, t();
   }
-  for (; !await o() && r.getTime() + i >= (/* @__PURE__ */ new Date()).getTime(); )
-    await new Promise((n) => setTimeout(n, e));
+  for (; !await n() && r.getTime() + i >= (/* @__PURE__ */ new Date()).getTime(); )
+    await new Promise((o) => setTimeout(o, e));
   return r.getTime() + i < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(`waitForCondition timeout: ${t.toString()}, attempts: ${s}, start: ${r.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`) : Promise.resolve(!0);
 }
 async function _(t, e = 2 * 1e3) {
@@ -74,25 +74,25 @@ async function _(t, e = 2 * 1e3) {
   const i = t.localName === "sbb-image" ? ((r = t.shadowRoot) == null ? void 0 : r.querySelector(".sbb-image__img")) ?? null : t;
   if (!i)
     throw new Error("img tag not found");
-  t.complete ? await i.decode() : await new Promise((s, o) => {
-    const n = setTimeout(() => o("image loading timeout"), e);
+  t.complete ? await i.decode() : await new Promise((s, n) => {
+    const o = setTimeout(() => n("image loading timeout"), e);
     t.addEventListener("load", () => {
-      clearTimeout(n), i.decode().then(() => {
+      clearTimeout(o), i.decode().then(() => {
         m && t.localName === "sbb-image" ? setTimeout(s, 100) : s();
       });
     }), t.addEventListener("error", () => {
-      clearTimeout(n), o("image error");
+      clearTimeout(o), n("image error");
     });
   });
 }
 const c = (t) => !!t.updateComplete, u = Promise.resolve(), h = async (t) => {
   var r, s;
   const e = await t;
-  (s = (r = e.parentElement ?? e).querySelectorAll) == null || s.call(r, "[defer-hydration]").forEach((o) => o.removeAttribute("defer-hydration"));
-  const i = [e, ...e.querySelectorAll("*")].filter(c).map((o) => [
-    o.updateComplete,
-    o.hydrationComplete ?? u,
-    h(o.renderRoot)
+  (s = (r = e.parentElement ?? e).querySelectorAll) == null || s.call(r, "[defer-hydration]").forEach((n) => n.removeAttribute("defer-hydration"));
+  const i = [e, ...e.querySelectorAll("*")].filter(c).map((n) => [
+    n.updateComplete,
+    n.hydrationComplete ?? u,
+    h(n.renderRoot)
   ]).flat(1 / 0);
   return await Promise.all(i), e;
 };

package/core.css

@@ -1253,13 +1253,31 @@ sbb-menu,
 sbb-navigation,
 sbb-navigation-section,
 sbb-overlay,
+sbb-popover,
 sbb-select,
 sbb-skiplink-list,
-sbb-toast,
-sbb-popover):not(:defined) {
+sbb-toast):not(:defined) {
   display: none;
 }
 
+[popover]:where(sbb-autocomplete,
+sbb-autocomplete-grid,
+sbb-dialog,
+sbb-menu,
+sbb-navigation,
+sbb-overlay,
+sbb-popover,
+sbb-toast) {
+  margin: 0;
+  padding: 0;
+  border: none;
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  color: inherit;
+  pointer-events: none;
+}
+
 sbb-breadcrumb-group:not(:defined) {
   display: block;
   height: calc(var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs));