@sbb-esta/lyne-elements 2.1.0 → 2.3.0

package/core/styles/badge.scss

@@ -0,0 +1,3 @@
+@use './mixins/badge';
+
+@include badge.badge-attribute;

package/core/styles/core.scss

@@ -126,8 +126,10 @@ sbb-form-field {
   padding: 0;
   border: none;
   width: auto;
+  height: auto;
   background-color: transparent;
   color: inherit;
+  pointer-events: none;
 }
 
 // Ensure stable breadcrumb height during hydrating

package/core/styles/mixins/badge.scss

@@ -10,5 +10,30 @@
   border-radius: var(--sbb-border-radius-infinity);
   background-color: var(--sbb-color-red);
   color: var(--sbb-color-white);
-  min-width: fit-content;
+  min-width: var(--sbb-spacing-fixed-4x);
+  max-height: var(--sbb-spacing-fixed-4x);
+}
+
+@mixin badge-attribute {
+  [sbb-badge] {
+    --sbb-badge-position-offset: calc(var(--sbb-spacing-fixed-2x) * -1);
+
+    position: relative;
+
+    &::after {
+      @include badge;
+
+      content: attr(sbb-badge);
+      position: absolute;
+      inset-block-start: var(--sbb-badge-position-offset);
+    }
+
+    &:where([sbb-badge-position='before'])::after {
+      inset-inline-start: var(--sbb-badge-position-offset);
+    }
+
+    &:where(:not([sbb-badge-position]), [sbb-badge-position='after'])::after {
+      inset-inline-end: var(--sbb-badge-position-offset);
+    }
+  }
 }

package/core/styles/mixins/font-face.scss

@@ -2,8 +2,8 @@
   @font-face {
     font-family: SBB;
     src:
-      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff2') format('woff2'),
-      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff') format('woff');
+      url('https://cdn.app.sbb.ch/fonts/v1_8_1_subset/SBBWeb-Roman.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1_8_1_subset/SBBWeb-Roman.woff') format('woff');
     font-display: fallback;
     font-weight: 400;
   }
@@ -11,8 +11,8 @@
   @font-face {
     font-family: SBB;
     src:
-      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff2') format('woff2'),
-      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff') format('woff');
+      url('https://cdn.app.sbb.ch/fonts/v1_8_1_subset/SBBWeb-Bold.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1_8_1_subset/SBBWeb-Bold.woff') format('woff');
     font-display: swap;
     font-weight: 700;
   }
@@ -20,8 +20,8 @@
   @font-face {
     font-family: SBB;
     src:
-      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff2') format('woff2'),
-      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff') format('woff');
+      url('https://cdn.app.sbb.ch/fonts/v1_8_1_subset/SBBWeb-Light.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1_8_1_subset/SBBWeb-Light.woff') format('woff');
     font-display: swap;
     font-weight: 300;
   }
@@ -31,8 +31,8 @@
   @font-face {
     font-family: SBB;
     src:
-      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Roman.woff2') format('woff2'),
-      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Roman.woff') format('woff');
+      url('https://cdn.app.sbb.ch/fonts/v1_8_1_full/SBBWeb-Roman.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1_8_1_full/SBBWeb-Roman.woff') format('woff');
     font-display: fallback;
     font-weight: 400;
   }
@@ -40,8 +40,8 @@
   @font-face {
     font-family: SBB;
     src:
-      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Bold.woff2') format('woff2'),
-      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Bold.woff') format('woff');
+      url('https://cdn.app.sbb.ch/fonts/v1_8_1_full/SBBWeb-Bold.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1_8_1_full/SBBWeb-Bold.woff') format('woff');
     font-display: swap;
     font-weight: 700;
   }
@@ -49,8 +49,8 @@
   @font-face {
     font-family: SBB;
     src:
-      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Light.woff2') format('woff2'),
-      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Light.woff') format('woff');
+      url('https://cdn.app.sbb.ch/fonts/v1_8_1_full/SBBWeb-Light.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1_8_1_full/SBBWeb-Light.woff') format('woff');
     font-display: swap;
     font-weight: 300;
   }

package/core/styles/mixins/link.scss

@@ -1,30 +1,46 @@
 @use './typo';
 @use './a11y';
 @use '../core/mediaqueries';
+@use '../core/functions';
 
-@mixin block-link-variables {
-  --sbb-link-color-normal: var(--sbb-color-granite);
+@mixin link-common-variables {
   --sbb-link-color-hover: var(--sbb-color-red125);
   --sbb-link-color-active: var(--sbb-color-red150);
+  --sbb-link-text-decoration-color: color-mix(in srgb, currentcolor 80%, white);
+  --sbb-link-text-decoration-color-hover: currentcolor;
+}
+
+@mixin link-common-variables--negative {
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+  --sbb-link-text-decoration-color: color-mix(in srgb, currentcolor 80%, black);
+  --sbb-link-text-decoration-color-hover: currentcolor;
+}
+
+@mixin block-link-variables {
+  @include link-common-variables;
+
+  --sbb-link-color-normal: var(--sbb-color-granite);
 }
 
 @mixin block-link-variables--negative {
+  @include link-common-variables--negative;
+
   --sbb-link-color-normal: var(--sbb-color-white);
   --sbb-link-color-hover: var(--sbb-color-cloud);
   --sbb-link-color-active: var(--sbb-color-silver);
-  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
 }
 
 @mixin link-variables {
+  @include link-common-variables;
+
   --sbb-link-color-normal: inherit;
-  --sbb-link-color-hover: var(--sbb-color-red125);
-  --sbb-link-color-active: var(--sbb-color-red150);
 }
 
 @mixin link-variables--negative {
+  @include link-common-variables--negative;
+
   --sbb-link-color-hover: var(--sbb-color-graphite);
   --sbb-link-color-active: var(--sbb-color-metal);
-  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
 }
 
 @mixin link-variables--button {
@@ -37,7 +53,12 @@
 
 @mixin link-base {
   color: var(--sbb-link-color-normal);
-  text-decoration: var(--sbb-link-text-decoration, underline);
+
+  // TODO: rename --sbb-link-text-decoration variable to --sbb-link-text-decoration-line
+  text-decoration-line: var(--sbb-link-text-decoration, underline);
+  text-decoration-color: var(--sbb-link-text-decoration-color);
+  text-decoration-thickness: #{functions.px-to-rem-build(1)};
+  text-underline-offset: 0.3125em; // 5px
   user-select: none;
 
   @include a11y.if-forced-colors {
@@ -57,7 +78,10 @@
 @mixin link-hover-rules {
   @include mediaqueries.hover-mq($hover: true) {
     color: var(--sbb-link-color-hover);
-    text-decoration: var(--sbb-link-hover-text-decoration, underline);
+
+    // TODO: rename --sbb-link-hover-text-decoration variable to --sbb-link-text-decoration-line-hover
+    text-decoration-line: var(--sbb-link-hover-text-decoration, underline);
+    text-decoration-color: var(--sbb-link-text-decoration-color-hover);
   }
 }
 

package/core/styles/standard-theme.scss

@@ -4,6 +4,7 @@
 @use './core';
 @use './typography';
 @use './a11y';
+@use './badge';
 @use './animation';
 @use './image';
 @use './layout';

package/core/testing.js

@@ -27,14 +27,14 @@ class p {
       return this._promiseEventMap.get(e).promise;
     {
       let r, s;
-      const o = {
+      const n = {
         promise: new Promise((a, l) => {
           r = a, s = l;
         }),
         resolve: r,
         reject: s
       };
-      return this._promiseEventMap.set(e, o), this._wrapPromiseWithTimeout(o, e, i);
+      return this._promiseEventMap.set(e, n), this._wrapPromiseWithTimeout(n, 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 n() {
+  function o() {
     return s++, t();
   }
-  for (; !await n() && r.getTime() + i >= (/* @__PURE__ */ new Date()).getTime(); )
-    await new Promise((o) => setTimeout(o, e));
+  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) {
@@ -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, n) => {
-    const o = setTimeout(() => n("image loading timeout"), e);
+  t.complete ? await i.decode() : await new Promise((s, o) => {
+    const n = setTimeout(() => o("image loading timeout"), e);
     t.addEventListener("load", () => {
-      clearTimeout(o), i.decode().then(() => {
+      clearTimeout(n), i.decode().then(() => {
         m && t.localName === "sbb-image" ? setTimeout(s, 100) : s();
       });
     }), t.addEventListener("error", () => {
-      clearTimeout(o), n("image 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((n) => n.removeAttribute("defer-hydration"));
-  const i = [e, ...e.querySelectorAll("*")].filter(c).map((n) => [
-    n.updateComplete,
-    n.hydrationComplete ?? u,
-    h(n.renderRoot)
+  (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;
 };

package/core.css

@@ -1128,19 +1128,19 @@
 
 @font-face {
   font-family: SBB;
-  src: url("https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff2") format("woff2"), url("https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff") format("woff");
+  src: url("https://cdn.app.sbb.ch/fonts/v1_8_1_subset/SBBWeb-Roman.woff2") format("woff2"), url("https://cdn.app.sbb.ch/fonts/v1_8_1_subset/SBBWeb-Roman.woff") format("woff");
   font-display: fallback;
   font-weight: 400;
 }
 @font-face {
   font-family: SBB;
-  src: url("https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff2") format("woff2"), url("https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff") format("woff");
+  src: url("https://cdn.app.sbb.ch/fonts/v1_8_1_subset/SBBWeb-Bold.woff2") format("woff2"), url("https://cdn.app.sbb.ch/fonts/v1_8_1_subset/SBBWeb-Bold.woff") format("woff");
   font-display: swap;
   font-weight: 700;
 }
 @font-face {
   font-family: SBB;
-  src: url("https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff2") format("woff2"), url("https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff") format("woff");
+  src: url("https://cdn.app.sbb.ch/fonts/v1_8_1_subset/SBBWeb-Light.woff2") format("woff2"), url("https://cdn.app.sbb.ch/fonts/v1_8_1_subset/SBBWeb-Light.woff") format("woff");
   font-display: swap;
   font-weight: 300;
 }
@@ -1272,8 +1272,10 @@ sbb-toast) {
   padding: 0;
   border: none;
   width: auto;
+  height: auto;
   background-color: transparent;
   color: inherit;
+  pointer-events: none;
 }
 
 sbb-breadcrumb-group:not(:defined) {