@sbb-esta/lyne-elements 2.0.2 → 2.1.0

package/core/styles/core.scss

@@ -103,14 +103,33 @@ 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;
+  background-color: transparent;
+  color: inherit;
+}
+
 // 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,29 @@ 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;
+  background-color: transparent;
+  color: inherit;
+}
+
 sbb-breadcrumb-group:not(:defined) {
   display: block;
   height: calc(var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs));