@sbb-esta/lyne-elements 1.5.0 → 1.7.0

package/core/styles/core.scss

@@ -15,31 +15,33 @@
   // Grab css vars defined by `@sbb-esta/lyne-design-tokens` package
   @include sbb-css-tokens.lyne-design-tokens-css-variables;
 
-  // Train formation
-  --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
-  --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
-  --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
-  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  & {
+    // Train formation
+    --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
+    --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
+    --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
+    --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
 
-  // Header
-  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+    // Header
+    --sbb-header-height: var(--sbb-spacing-fixed-14x);
 
-  // Time Input
-  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+    // Time Input
+    --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
 
-  // Overlay
-  --sbb-overlay-default-z-index: 1000;
+    // Overlay
+    --sbb-overlay-default-z-index: 1000;
 
-  // Infinity border radius, can be used to achieve rounded border on start and end
-  // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
-  --sbb-border-radius-infinity: 10000000em;
+    // Infinity border radius, can be used to achieve rounded border on start and end
+    // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
+    --sbb-border-radius-infinity: 10000000em;
 
-  @include mediaqueries.mq($from: medium) {
-    // Header
-    --sbb-header-height: var(--sbb-spacing-fixed-24x);
+    @include mediaqueries.mq($from: medium) {
+      // Header
+      --sbb-header-height: var(--sbb-spacing-fixed-24x);
 
-    // Time Input
-    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+      // Time Input
+      --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+    }
   }
 }
 

package/core/styles/mixins/link.scss

@@ -57,7 +57,7 @@
 @mixin link-hover-rules {
   @include mediaqueries.hover-mq($hover: true) {
     color: var(--sbb-link-color-hover);
-    text-decoration: underline;
+    text-decoration: var(--sbb-link-hover-text-decoration, underline);
   }
 }
 
@@ -78,13 +78,16 @@
 }
 
 @mixin link-consolidation {
-  @include link-base;
   @include typo.text-inherit;
-  @include link-focus-visible;
-  @include link-hover;
+  @include link-base;
 
-  // Active definitions have to be after :hover definitions
-  @include link-active;
+  & {
+    @include link-focus-visible;
+    @include link-hover;
+
+    // Active definitions have to be after :hover definitions
+    @include link-active;
+  }
 }
 
 @mixin link {

package/core/styles/mixins/lists.scss

@@ -93,6 +93,11 @@
   );
   --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
 
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  counter-reset: steps;
+
   &:where(.sbb-text-s) {
     --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
   }
@@ -107,11 +112,6 @@
     }
   }
 
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  counter-reset: steps;
-
   /* stylelint-disable-next-line no-descending-specificity */
   > li {
     position: relative;

package/core/styles/mixins/pearl-chain-bullet.scss

@@ -88,23 +88,26 @@
 }
 
 @mixin pearl-chain-bullet-skipped-stop {
-  @include pearl-chain-bullet-skipped;
-  @include pearl-chain-bullet-stop;
-
   --sbb-pearl-chain-bullet-crossed-width: #{functions.px-to-rem-build(11.31)};
   --sbb-pearl-chain-bullet-crossed-height: #{functions.px-to-rem-build(3)};
-}
 
-@mixin pearl-chain-bullet-irrelevant-stop {
   @include pearl-chain-bullet-stop;
+  @include pearl-chain-bullet-skipped;
+}
 
+@mixin pearl-chain-bullet-irrelevant-stop {
   --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-1x);
+
+  @include pearl-chain-bullet-stop;
 }
 
 @mixin pearl-chain-bullet-position {
-  @include pearl-chain-bullet;
   @include pearl-chain-bullet-start-end;
-  @include pearl-chain-bullet-disruption;
+  @include pearl-chain-bullet;
+
+  & {
+    @include pearl-chain-bullet-disruption;
+  }
 
   @keyframes pearl-chain-bullet-position-pulse {
     0% {
@@ -124,6 +127,8 @@
     }
   }
 
-  animation: pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration)
-    var(--sbb-pearl-chain-bullet-animation-easing) infinite;
+  & {
+    animation: pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration)
+      var(--sbb-pearl-chain-bullet-animation-easing) infinite;
+  }
 }

package/core/styles/mixins/table.scss

@@ -7,25 +7,27 @@
  * Therefore, we have to build the grid avoiding double borders.
  */
 @mixin table {
-  @include table--striped;
   @include table--m;
+  @include table--striped;
 
-  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
-  --sbb-table-border-color: var(--sbb-color-cloud);
-  --sbb-table-border-radius: var(--sbb-border-radius-4x);
-  --sbb-table-background-color: var(--sbb-color-white);
-  --sbb-table-row-striped-color: var(--sbb-color-milk);
-  --sbb-table-color: inherit;
-  --sbb-table-caption-color: var(--sbb-color-granite);
-  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
-
-  background-color: var(--sbb-table-background-color);
-  border: var(--sbb-table-border);
-  border-radius: var(--sbb-table-border-radius);
-  border-spacing: 0;
-  caption-side: bottom;
-  color: var(--sbb-table-color);
-  table-layout: auto;
+  & {
+    --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+    --sbb-table-border-color: var(--sbb-color-cloud);
+    --sbb-table-border-radius: var(--sbb-border-radius-4x);
+    --sbb-table-background-color: var(--sbb-color-white);
+    --sbb-table-row-striped-color: var(--sbb-color-milk);
+    --sbb-table-color: inherit;
+    --sbb-table-caption-color: var(--sbb-color-granite);
+    --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+
+    background-color: var(--sbb-table-background-color);
+    border: var(--sbb-table-border);
+    border-radius: var(--sbb-table-border-radius);
+    border-spacing: 0;
+    caption-side: bottom;
+    color: var(--sbb-table-color);
+    table-layout: auto;
+  }
 
   thead {
     & > tr > th {

package/core/testing/mocha-extensions.d.ts

@@ -1,5 +1,4 @@
 import { Func, Suite, Test } from 'mocha';
-
 /**
  * Skip the `describe` if the condition is not met
  */

package/core/testing/wait-for-event.d.ts

@@ -0,0 +1,2 @@
+export declare function waitForEvent(element: HTMLElement, eventName: string, timeout?: number): Promise<void>;
+//# sourceMappingURL=wait-for-event.d.ts.map

package/core/testing/wait-for-event.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wait-for-event.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-event.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAC1B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,OAAO,SAAO,GACb,OAAO,CAAC,IAAI,CAAC,CAcf"}

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

@@ -1,4 +1,3 @@
 import { SbbImageElement } from '../../image.js';
-
 export declare function waitForImageReady(element: HTMLImageElement | SbbImageElement, timeoutInMilliseconds?: number): Promise<void>;
 //# sourceMappingURL=wait-for-image-ready.d.ts.map

package/core/testing/wait-for-render.d.ts

@@ -1,6 +1,5 @@
 import { ReactiveElement } from 'lit';
 import { SbbHydrationMixinType } from '../mixins.js';
-
 /**
  * Tests if an element is a Lit `ReactiveElement`.
  *

package/core/testing.d.ts

@@ -2,6 +2,7 @@ export * from './testing/event-spy.js';
 export * from './testing/mocha-extensions.js';
 export * from './testing/scroll.js';
 export * from './testing/wait-for-condition.js';
+export * from './testing/wait-for-event.js';
 export * from './testing/wait-for-image-ready.js';
 export * from './testing/wait-for-render.js';
 //# sourceMappingURL=testing.d.ts.map

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,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC"}

package/core/testing.js

@@ -1,6 +1,6 @@
 class u {
-  constructor(t, n = null) {
-    this._event = t, this._target = n, this._count = 0, this._events = [], this._target || (this._target = document), this._listenForEvent();
+  constructor(e, n = null) {
+    this._event = e, this._target = n, this._count = 0, this._events = [], this._target || (this._target = document), this._listenForEvent();
   }
   get count() {
     return this._count;
@@ -15,54 +15,66 @@ class u {
     return this.events.length ? this.events[this.events.length - 1] : null;
   }
   _listenForEvent() {
-    var t;
-    (t = this._target) == null || t.addEventListener(this._event, (n) => {
+    var e;
+    (e = this._target) == null || e.addEventListener(this._event, (n) => {
       this._events.push(n), this._count++;
     });
   }
 }
-const m = (e, t, n) => {
-  if (e)
-    return Mocha.describe(t, n);
-}, h = (e, t, n) => {
-  if (e)
-    return Mocha.test(t, n);
+const m = (t, e, n) => {
+  if (t)
+    return Mocha.describe(e, n);
+}, h = (t, e, n) => {
+  if (t)
+    return Mocha.test(e, n);
 };
-function d(e) {
-  window.scrollTo(e), document.dispatchEvent(new Event("scroll"));
+function d(t) {
+  window.scrollTo(t), document.dispatchEvent(new Event("scroll"));
 }
-async function v(e, t = 30, n = 2 * 1e3) {
+async function v(t, e = 30, n = 2 * 1e3) {
   const r = /* @__PURE__ */ new Date();
-  let i = 0;
-  function o() {
-    return i++, e();
+  let o = 0;
+  function i() {
+    return o++, t();
   }
-  for (; !await o() && r.getTime() + n >= (/* @__PURE__ */ new Date()).getTime(); )
-    await new Promise((s) => setTimeout(s, t));
+  for (; !await i() && r.getTime() + n >= (/* @__PURE__ */ new Date()).getTime(); )
+    await new Promise((s) => setTimeout(s, e));
   return r.getTime() + n < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(
-    `waitForCondition timeout: ${e.toString()}, attempts: ${i}, start: ${r.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`
+    `waitForCondition timeout: ${t.toString()}, attempts: ${o}, start: ${r.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`
   ) : Promise.resolve(!0);
 }
-async function g(e, t = 2 * 1e3) {
-  e.complete || await new Promise((n, r) => {
-    const i = setTimeout(() => r("image loading timeout"), t);
-    e.addEventListener("load", () => {
-      clearTimeout(i), n();
-    }), e.addEventListener("error", () => {
-      clearTimeout(i), r("image error");
+function g(t, e, n = 1e3) {
+  return new Promise((r, o) => {
+    const i = AbortSignal.timeout(n), s = () => o(`Timeout of ${n} reached`);
+    i.addEventListener("abort", s), t.addEventListener(
+      e,
+      () => {
+        i.removeEventListener("abort", s), r();
+      },
+      { passive: !0, signal: i }
+    );
+  });
+}
+async function w(t, e = 2 * 1e3) {
+  t.complete || await new Promise((n, r) => {
+    const o = setTimeout(() => r("image loading timeout"), e);
+    t.addEventListener("load", () => {
+      clearTimeout(o), n();
+    }), t.addEventListener("error", () => {
+      clearTimeout(o), r("image error");
     });
   });
 }
-const a = (e) => !!e.updateComplete, c = Promise.resolve(), l = async (e) => {
-  var r, i;
-  const t = await e;
-  (i = (r = t.parentElement ?? t).querySelectorAll) == null || i.call(r, "[defer-hydration]").forEach((o) => o.removeAttribute("defer-hydration"));
-  const n = [t, ...t.querySelectorAll("*")].filter(a).map((o) => [
-    o.updateComplete,
-    o.hydrationComplete ?? c,
-    l(o.renderRoot)
+const a = (t) => !!t.updateComplete, c = Promise.resolve(), l = async (t) => {
+  var r, o;
+  const e = await t;
+  (o = (r = e.parentElement ?? e).querySelectorAll) == null || o.call(r, "[defer-hydration]").forEach((i) => i.removeAttribute("defer-hydration"));
+  const n = [e, ...e.querySelectorAll("*")].filter(a).map((i) => [
+    i.updateComplete,
+    i.hydrationComplete ?? c,
+    l(i.renderRoot)
   ]).flat(1 / 0);
-  return await Promise.all(n), t;
+  return await Promise.all(n), e;
 };
 export {
   u as EventSpy,
@@ -71,6 +83,7 @@ export {
   d as mockScrollTo,
   h as testIf,
   v as waitForCondition,
-  g as waitForImageReady,
+  g as waitForEvent,
+  w as waitForImageReady,
   l as waitForLitRender
 };

package/core.css

@@ -1006,14 +1006,6 @@
   /**
    * Ultra (value corresponds to --sbb-breakpoint-ultra-min)
    */
-  --sbb-train-formation-wagon-width: 5rem;
-  --sbb-train-formation-wagon-height: 2.5rem;
-  --sbb-train-formation-wagon-border-radius: 0.75rem;
-  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-header-height: var(--sbb-spacing-fixed-14x);
-  --sbb-time-input-max-width: 3.625rem;
-  --sbb-overlay-default-z-index: 1000;
-  --sbb-border-radius-infinity: 10000000em;
 }
 @media (forced-colors: active) {
   :root {
@@ -1118,6 +1110,16 @@
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
   }
 }
+:root {
+  --sbb-train-formation-wagon-width: 5rem;
+  --sbb-train-formation-wagon-height: 2.5rem;
+  --sbb-train-formation-wagon-border-radius: 0.75rem;
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+  --sbb-time-input-max-width: 3.625rem;
+  --sbb-overlay-default-z-index: 1000;
+  --sbb-border-radius-infinity: 10000000em;
+}
 @media (min-width: calc(52.5rem)) {
   :root {
     --sbb-header-height: var(--sbb-spacing-fixed-24x);