@sbb-esta/lyne-elements 2.0.3 → 2.1.0

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,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));