@sbb-esta/lyne-elements 2.6.0 → 2.7.0

package/core/overlay/overlay-option-panel.js

@@ -0,0 +1,11 @@
+import { getElementPosition as a } from "./position.js";
+function r(p, o, i, e, t) {
+  if (!p || !o)
+    return;
+  t.style.setProperty("--sbb-options-panel-width", `${o.offsetWidth}px`), t.style.setProperty("--sbb-options-panel-origin-height", `${o.offsetHeight}px`);
+  const s = a(i, o, e);
+  t.style.setProperty("--sbb-options-panel-position-x", `${s.left}px`), t.style.setProperty("--sbb-options-panel-position-y", `${s.top}px`), t.style.setProperty("--sbb-options-panel-max-height", s.maxHeight), t.setAttribute("data-options-panel-position", s.alignment.vertical), o.setAttribute("data-options-panel-position", s.alignment.vertical);
+}
+export {
+  r as setOverlayPosition
+};

package/core/overlay/overlay-trigger-attributes.js

@@ -0,0 +1,18 @@
+function u(t, e, a, o) {
+  t && (t.setAttribute("aria-haspopup", e), t.setAttribute("aria-controls", a), t.setAttribute("aria-expanded", `${o === "opening" || o === "opened"}`));
+}
+function i(t) {
+  t && (t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"));
+}
+function r(t, e, a, o = "listbox") {
+  t && (t.setAttribute("autocomplete", "off"), t.setAttribute("role", "combobox"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", o), t.setAttribute("aria-controls", e), t.setAttribute("aria-owns", e), t.setAttribute("aria-expanded", `${a}`));
+}
+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 {
+  b as removeAriaComboBoxAttributes,
+  i as removeAriaOverlayTriggerAttributes,
+  r as setAriaComboBoxAttributes,
+  u as setAriaOverlayTriggerAttributes
+};

package/core/overlay/overlay.js

@@ -0,0 +1,14 @@
+import { html as i } from "lit";
+function s() {
+  return i`
+    <div class="sbb-gap-fix-wrapper">
+      <div class="sbb-gap-fix-corner" id="left"></div>
+    </div>
+    <div class="sbb-gap-fix-wrapper">
+      <div class="sbb-gap-fix-corner" id="right"></div>
+    </div>
+  `;
+}
+export {
+  s as overlayGapFixCorners
+};

package/core/overlay/position.js

@@ -0,0 +1,40 @@
+function w(t) {
+  const o = window.getComputedStyle(t), c = o.display, e = parseInt(o.maxHeight, 10).toString();
+  if (c !== "none" && e !== "0")
+    return {
+      scrollHeight: t.scrollHeight,
+      clientHeight: t.clientHeight,
+      offsetHeight: t.offsetHeight,
+      scrollWidth: t.scrollWidth,
+      clientWidth: t.clientWidth,
+      offsetWidth: t.offsetWidth
+    };
+  t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
+  const v = t.scrollHeight, i = t.clientHeight, g = t.offsetHeight, m = t.scrollWidth, l = t.clientWidth, n = t.offsetWidth;
+  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: v, clientHeight: i, offsetHeight: g, scrollWidth: m, clientWidth: l, offsetWidth: n };
+}
+function x(t, o) {
+  if (!t || !o)
+    return !1;
+  const c = t.getBoundingClientRect();
+  return c.top <= o.clientY && o.clientY <= c.top + c.height && c.left <= o.clientX && o.clientX <= c.left + c.width;
+}
+function O(t, o, c, e) {
+  const i = (e == null ? void 0 : e.verticalOffset) || 0, g = (e == null ? void 0 : e.horizontalOffset) || 0, m = (e == null ? void 0 : e.responsiveHeight) || !1, l = o.getBoundingClientRect(), n = w(t), d = l.left, H = l.top, r = document.documentElement.clientWidth - (d + l.width), a = H - i, W = document.documentElement.clientHeight - (H + l.height + i);
+  let h = d, u = H + l.height + i, f = n.offsetWidth - l.width;
+  const s = { horizontal: "start", vertical: "below" };
+  let b = `${W - i}px`;
+  e != null && e.centered && d - 16 + l.width / 2 > n.offsetWidth / 2 && r - 16 > f / 2 && (h -= f /= 2, s.horizontal = "center"), r < f && d > f && (h = h - f, s.horizontal = "end"), g && s.horizontal !== "center" && l.width / 2 < g && (h += g * (s.horizontal === "start" ? -1 : 1)), (d < f && r < f || document.documentElement.clientWidth < n.offsetWidth) && (h = document.documentElement.clientWidth / 2 - n.offsetWidth / 2), (W - i < n.scrollHeight && a - i > (m ? n.clientHeight : n.scrollHeight) || a > W && W - i < n.clientHeight && !m) && (u = a < n.scrollHeight ? u - l.height - a - i : H - n.clientHeight - i, b = `${a - i}px`, s.vertical = "above");
+  const y = c.getBoundingClientRect();
+  return y.left < 0 && (h -= y.left), y.top < 0 && (u -= y.top), {
+    top: u,
+    left: h,
+    maxHeight: b,
+    alignment: s
+  };
+}
+export {
+  O as getElementPosition,
+  w as getElementRectangle,
+  x as isEventOnElement
+};

package/core/overlay.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './overlay/overlay.js';
 export * from './overlay/overlay-option-panel.js';
 export * from './overlay/overlay-trigger-attributes.js';

package/core/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/elements/core/overlay.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/elements/core/overlay.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,uBAAuB,CAAC"}

package/core/overlay.js

@@ -1,76 +1,15 @@
-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>
-    <div class="sbb-gap-fix-wrapper">
-      <div class="sbb-gap-fix-corner" id="right"></div>
-    </div>
-  `;
-}
-function W(t) {
-  const e = window.getComputedStyle(t), n = e.display, i = parseInt(e.maxHeight, 10).toString();
-  if (n !== "none" && i !== "0")
-    return {
-      scrollHeight: t.scrollHeight,
-      clientHeight: t.clientHeight,
-      offsetHeight: t.offsetHeight,
-      scrollWidth: t.scrollWidth,
-      clientWidth: t.clientWidth,
-      offsetWidth: t.offsetWidth
-    };
-  t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
-  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 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 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 R(t, e, n, i, l) {
-  if (!t || !e)
-    return;
-  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 $(t, e, n, i) {
-  t && (t.setAttribute("aria-haspopup", e), t.setAttribute("aria-controls", n), t.setAttribute("aria-expanded", `${i === "opening" || i === "opened"}`));
-}
-function z(t) {
-  t && (t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"));
-}
-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 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"));
-}
+import { overlayGapFixCorners as t } from "./overlay/overlay.js";
+import { setOverlayPosition as i } from "./overlay/overlay-option-panel.js";
+import { removeAriaComboBoxAttributes as s, removeAriaOverlayTriggerAttributes as a, setAriaComboBoxAttributes as n, setAriaOverlayTriggerAttributes as l } from "./overlay/overlay-trigger-attributes.js";
+import { getElementPosition as g, getElementRectangle as v, isEventOnElement as x } from "./overlay/position.js";
 export {
   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
+  v as getElementRectangle,
+  x as isEventOnElement,
+  t as overlayGapFixCorners,
+  s as removeAriaComboBoxAttributes,
+  a as removeAriaOverlayTriggerAttributes,
+  n as setAriaComboBoxAttributes,
+  l as setAriaOverlayTriggerAttributes,
+  i as setOverlayPosition
 };

package/core/styles/core.scss

@@ -41,6 +41,14 @@
       --sbb-header-height: #{functions.px-to-rem-build(52)};
     }
 
+    // When the input modality is either mouse or touch,
+    // the focus outline should be hidden.
+    // We achieve this by setting the outline style to none.
+    // This is primarily to work around Safari bugs.
+    &:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
+      --sbb-focus-outline-style: none;
+    }
+
     @include mediaqueries.mq($from: medium) {
       // Header
       --sbb-header-height: var(--sbb-spacing-fixed-24x);

package/core/styles/mixins/a11y.scss

@@ -21,7 +21,8 @@
 
 @mixin focus-outline {
   outline-offset: var(--sbb-focus-outline-offset);
-  outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid)
+    var(--sbb-focus-outline-width);
 }
 
 @mixin screen-reader-only {

package/core/styles/mixins/buttons.scss

@@ -36,15 +36,16 @@ $active: ':active, [data-active]';
     @include icon-button-disabled(#{$button-selector});
   }
 
-  :host(
-    :is(
-      [data-focus-visible],
-      :focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])
-    )
-  ) {
+  :host(:is([data-focus-visible], :focus-visible)) {
     @include icon-button-focus-visible(#{$button-selector});
   }
 
+  :host([data-focus-visible]) {
+    // Basically the focus-outline mixin is made for use with focus-visible.
+    // As we use it here with data-focus-visible, we have to ensure that the outline is not overridden when mouse or touch is in use.
+    --sbb-focus-outline-style: initial;
+  }
+
   :host(:not(#{$disabled}, #{$active}):hover) {
     @include icon-button-hover(#{$button-selector});
   }

package/core/styles/mixins/link.scss

@@ -81,8 +81,7 @@
 }
 
 @mixin link-focus-visible {
-  // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.
-  &:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch']) {
+  &:focus-visible {
     @include a11y.focus-outline;
 
     border-radius: calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset));

package/core/styles/mixins/table.scss

@@ -17,6 +17,9 @@
     --sbb-table-color: inherit;
     --sbb-table-caption-color: var(--sbb-color-granite);
     --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+    --sbb-table-sticky-shadow-width: 3rem;
+    --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
+    --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
 
     border-spacing: 0;
     caption-side: bottom;

package/core/styles/table.scss

@@ -75,6 +75,51 @@ sbb-table-wrapper[negative] .sbb-table,
   position: sticky !important;
 }
 
+// The `sbb-table-sticky-*` css classes are used by the Angular wrapper and CDK.
+// Do not rename them, pls.
+:is(.sbb-table-sticky-border-elem-left, .sbb-table-sticky-border-elem-right)::after {
+  content: '';
+  transition: {
+    timing-function: var(--sbb-table-sticky-shadow-transition-easing);
+    duration: var(--sbb-table-sticky-shadow-transition-duration);
+    property: visibility, opacity;
+  }
+
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  width: var(--sbb-table-sticky-shadow-width);
+  inset: 0;
+}
+
+.sbb-table-sticky-border-elem-left {
+  :is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) & {
+    border-inline-end: var(--sbb-table-border);
+
+    &::after {
+      visibility: visible;
+      opacity: 1;
+      background-image: linear-gradient(-270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
+      inset-inline-start: unset;
+      inset-inline-end: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+    }
+  }
+}
+
+.sbb-table-sticky-border-elem-right {
+  :is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) & {
+    border-inline-start: var(--sbb-table-border);
+
+    &::after {
+      visibility: visible;
+      opacity: 1;
+      background-image: linear-gradient(270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
+      inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+      inset-inline-end: unset;
+    }
+  }
+}
+
 // TODO: In future, move to the 'sbb-lean' theme
 html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   @include table.table--s;

package/core/testing/event-spy.js

@@ -0,0 +1,53 @@
+class a {
+  get count() {
+    return this._count;
+  }
+  get events() {
+    return this._events;
+  }
+  get firstEvent() {
+    return this.events.length ? this.events[0] : null;
+  }
+  get lastEvent() {
+    return this.events.length ? this.events[this.events.length - 1] : null;
+  }
+  constructor(e, s = null, t = null) {
+    this._event = e, this._target = s, this._options = t, this._count = 0, this._events = [], this._promiseEventMap = /* @__PURE__ */ new Map(), this._target || (this._target = document), this._listenForEvent();
+  }
+  calledOnce(e) {
+    return this.calledTimes(1, e);
+  }
+  calledTimes(e, s = 2e3) {
+    if (this.count > e)
+      return Promise.reject(`Event has been emitted more than expected (expected ${e}, actual ${this.count}`);
+    if (this.count === e)
+      return Promise.resolve(this.events[e - 1]);
+    if (this._promiseEventMap.has(e))
+      return this._promiseEventMap.get(e).promise;
+    {
+      let t, i;
+      const n = {
+        promise: new Promise((r, h) => {
+          t = r, i = h;
+        }),
+        resolve: t,
+        reject: i
+      };
+      return this._promiseEventMap.set(e, n), this._wrapPromiseWithTimeout(n, e, s);
+    }
+  }
+  _wrapPromiseWithTimeout(e, s, t) {
+    const i = setTimeout(() => e.reject(`awaiting calledTimes(${s}) results in timeout`), t);
+    return e.promise.then(() => clearTimeout(i)), e.promise;
+  }
+  _listenForEvent() {
+    var e;
+    (e = this._target) == null || e.addEventListener(this._event, (s) => {
+      var t;
+      this._events.push(s), this._count++, (t = this._promiseEventMap.get(this.count)) == null || t.resolve(s);
+    }, this._options ?? void 0);
+  }
+}
+export {
+  a as EventSpy
+};

package/core/testing/mocha-extensions.js

@@ -0,0 +1,11 @@
+const c = (e, t, r) => {
+  if (e)
+    return Mocha.describe(t, r);
+}, s = (e, t, r) => {
+  if (e)
+    return Mocha.test(t, r);
+};
+export {
+  c as describeIf,
+  s as testIf
+};

package/core/testing/scroll.js

@@ -0,0 +1,6 @@
+function c(o) {
+  window.scrollTo(o), document.dispatchEvent(new Event("scroll"));
+}
+export {
+  c as mockScrollTo
+};

package/core/testing/wait-for-condition.js

@@ -0,0 +1,13 @@
+async function m(t, r = 30, i = 2 * 1e3) {
+  const e = /* @__PURE__ */ new Date();
+  let n = 0;
+  function o() {
+    return n++, t();
+  }
+  for (; !await o() && e.getTime() + i >= (/* @__PURE__ */ new Date()).getTime(); )
+    await new Promise((a) => setTimeout(a, r));
+  return e.getTime() + i < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(`waitForCondition timeout: ${t.toString()}, attempts: ${n}, start: ${e.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`) : Promise.resolve(!0);
+}
+export {
+  m as waitForCondition
+};

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;AAGtD,wBAAsB,iBAAiB,CACrC,OAAO,EAAE,gBAAgB,GAAG,eAAe,EAC3C,qBAAqB,SAAW,GAC/B,OAAO,CAAC,IAAI,CAAC,CAwCf"}
+{"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,CA+Bf"}

package/core/testing/wait-for-image-ready.js

@@ -0,0 +1,18 @@
+import { isSafari as m } from "../dom.js";
+async function s(o, n = 2 * 1e3) {
+  var i;
+  const e = o.localName === "sbb-image" ? ((i = o.shadowRoot) == null ? void 0 : i.querySelector(".sbb-image__img")) ?? null : o;
+  if (!e)
+    throw new Error("img tag not found");
+  e.complete ? m && await e.decode() : await new Promise((t, a) => {
+    const r = setTimeout(() => a("image loading timeout"), n);
+    e.addEventListener("load", () => {
+      clearTimeout(r), !e.complete || m ? e.decode().then(() => t()) : t();
+    }), e.addEventListener("error", () => {
+      clearTimeout(r), a("image error");
+    });
+  });
+}
+export {
+  s as waitForImageReady
+};

package/core/testing/wait-for-render.js

@@ -0,0 +1,15 @@
+const n = (o) => !!o.updateComplete, i = Promise.resolve(), m = async (o) => {
+  var r, l;
+  const e = await o;
+  (l = (r = e.parentElement ?? e).querySelectorAll) == null || l.call(r, "[defer-hydration]").forEach((t) => t.removeAttribute("defer-hydration"));
+  const a = [e, ...e.querySelectorAll("*")].filter(n).map((t) => [
+    t.updateComplete,
+    t.hydrationComplete ?? i,
+    m(t.renderRoot)
+  ]).flat(1 / 0);
+  return await Promise.all(a), e;
+};
+export {
+  n as isReactiveElement,
+  m as waitForLitRender
+};

package/core/testing.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './testing/event-spy.js';
 export * from './testing/mocha-extensions.js';
 export * from './testing/scroll.js';

package/core/testing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/elements/core/testing.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/elements/core/testing.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC"}

package/core/testing.js

@@ -1,111 +1,16 @@
-import { isSafari as a } from "./dom.js";
-class p {
-  get count() {
-    return this._count;
-  }
-  get events() {
-    return this._events;
-  }
-  get firstEvent() {
-    return this.events.length ? this.events[0] : null;
-  }
-  get lastEvent() {
-    return this.events.length ? this.events[this.events.length - 1] : null;
-  }
-  constructor(e, i = null, r = null) {
-    this._event = e, this._target = i, this._options = r, this._count = 0, this._events = [], this._promiseEventMap = /* @__PURE__ */ new Map(), this._target || (this._target = document), this._listenForEvent();
-  }
-  calledOnce(e) {
-    return this.calledTimes(1, e);
-  }
-  calledTimes(e, i = 2e3) {
-    if (this.count > e)
-      return Promise.reject(`Event has been emitted more than expected (expected ${e}, actual ${this.count}`);
-    if (this.count === e)
-      return Promise.resolve(this.events[e - 1]);
-    if (this._promiseEventMap.has(e))
-      return this._promiseEventMap.get(e).promise;
-    {
-      let r, s;
-      const n = {
-        promise: new Promise((l, m) => {
-          r = l, s = m;
-        }),
-        resolve: r,
-        reject: s
-      };
-      return this._promiseEventMap.set(e, n), this._wrapPromiseWithTimeout(n, e, i);
-    }
-  }
-  _wrapPromiseWithTimeout(e, i, r) {
-    const s = setTimeout(() => e.reject(`awaiting calledTimes(${i}) results in timeout`), r);
-    return e.promise.then(() => clearTimeout(s)), e.promise;
-  }
-  _listenForEvent() {
-    var e;
-    (e = this._target) == null || e.addEventListener(this._event, (i) => {
-      var r;
-      this._events.push(i), this._count++, (r = this._promiseEventMap.get(this.count)) == null || r.resolve(i);
-    }, this._options ?? void 0);
-  }
-}
-const v = (t, e, i) => {
-  if (t)
-    return Mocha.describe(e, i);
-}, g = (t, e, i) => {
-  if (t)
-    return Mocha.test(e, i);
-};
-function w(t) {
-  window.scrollTo(t), document.dispatchEvent(new Event("scroll"));
-}
-async function f(t, e = 30, i = 2 * 1e3) {
-  const r = /* @__PURE__ */ new Date();
-  let s = 0;
-  function o() {
-    return s++, t();
-  }
-  for (; !await o() && r.getTime() + i >= (/* @__PURE__ */ new Date()).getTime(); )
-    await new Promise((n) => setTimeout(n, 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) {
-  var r;
-  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().then(() => {
-    if (a && t.localName === "sbb-image")
-      return new Promise((s) => setTimeout(s, 100));
-  }) : await new Promise((s, o) => {
-    const n = setTimeout(() => o("image loading timeout"), e);
-    t.addEventListener("load", () => {
-      clearTimeout(n), i.decode().then(() => {
-        a && t.localName === "sbb-image" ? setTimeout(s, 100) : s();
-      });
-    }), t.addEventListener("error", () => {
-      clearTimeout(n), o("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)
-  ]).flat(1 / 0);
-  return await Promise.all(i), e;
-};
+import { EventSpy as r } from "./testing/event-spy.js";
+import { describeIf as i, testIf as m } from "./testing/mocha-extensions.js";
+import { mockScrollTo as p } from "./testing/scroll.js";
+import { waitForCondition as x } from "./testing/wait-for-condition.js";
+import { waitForImageReady as c } from "./testing/wait-for-image-ready.js";
+import { isReactiveElement as l, waitForLitRender as s } from "./testing/wait-for-render.js";
 export {
-  p as EventSpy,
-  v as describeIf,
-  c as isReactiveElement,
-  w as mockScrollTo,
-  g as testIf,
-  f as waitForCondition,
-  _ as waitForImageReady,
-  h as waitForLitRender
+  r as EventSpy,
+  i as describeIf,
+  l as isReactiveElement,
+  p as mockScrollTo,
+  m as testIf,
+  x as waitForCondition,
+  c as waitForImageReady,
+  s as waitForLitRender
 };

package/core.css

@@ -1118,6 +1118,9 @@
 :root:has(sbb-header[size=s]) {
   --sbb-header-height: 3.25rem;
 }
+:root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
+  --sbb-focus-outline-style: none;
+}
 @media (min-width: calc(52.5rem)) {
   :root {
     --sbb-header-height: var(--sbb-spacing-fixed-24x);