@sbb-esta/lyne-elements 2.11.2 → 3.0.0-next.1

package/core/styles/table.scss

@@ -48,10 +48,6 @@ sbb-table-wrapper[negative] .sbb-table,
   @include table.table-header-cell;
 }
 
-.sbb-table-data-row {
-  @include table.table-data-row;
-}
-
 .sbb-table-row--striped {
   @include table.table-row--striped;
 }

package/core/testing/event-spy.js

@@ -41,8 +41,10 @@ class a {
     return e.promise.then(() => clearTimeout(i)), e.promise;
   }
   _listenForEvent() {
-    this._target?.addEventListener(this._event, (e) => {
-      this._events.push(e), this._count++, this._promiseEventMap.get(this.count)?.resolve(e);
+    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);
   }
 }

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

@@ -1,17 +1,18 @@
-import { isSafari as r } from "../dom.js";
-async function d(o, m = 2 * 1e3) {
-  const e = o.localName === "sbb-image" ? o.shadowRoot?.querySelector(".sbb-image__img") ?? null : o;
+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 ? r && await e.decode() : await new Promise((i, t) => {
-    const a = setTimeout(() => t("image loading timeout"), m);
+  e.complete ? m && await e.decode() : await new Promise((t, a) => {
+    const r = setTimeout(() => a("image loading timeout"), n);
     e.addEventListener("load", () => {
-      clearTimeout(a), !e.complete || r ? e.decode().then(() => i()) : i();
+      clearTimeout(r), !e.complete || m ? e.decode().then(() => t()) : t();
     }), e.addEventListener("error", () => {
-      clearTimeout(a), t("image error");
+      clearTimeout(r), a("image error");
     });
   });
 }
 export {
-  d as waitForImageReady
+  s as waitForImageReady
 };

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

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

package/core/testing.d.ts

@@ -3,7 +3,6 @@
  */
 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-image-ready.js';
 export * from './testing/wait-for-render.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;;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"}
+{"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,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC"}

package/core/testing.js

@@ -1,16 +1,14 @@
 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";
+import { describeIf as i, testIf as f } from "./testing/mocha-extensions.js";
+import { waitForCondition as a } from "./testing/wait-for-condition.js";
+import { waitForImageReady as n } from "./testing/wait-for-image-ready.js";
+import { isReactiveElement as d, waitForLitRender as s } from "./testing/wait-for-render.js";
 export {
   r as EventSpy,
   i as describeIf,
-  l as isReactiveElement,
-  p as mockScrollTo,
-  m as testIf,
-  x as waitForCondition,
-  c as waitForImageReady,
+  d as isReactiveElement,
+  f as testIf,
+  a as waitForCondition,
+  n as waitForImageReady,
   s as waitForLitRender
 };

package/core.css

@@ -1121,7 +1121,6 @@
   --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-time-input-s-max-width: 3.1875rem;
   --sbb-overlay-default-z-index: 1000;
   --sbb-border-radius-infinity: 100000em;
 }
@@ -1135,7 +1134,6 @@
   :root {
     --sbb-header-height: var(--sbb-spacing-fixed-24x);
     --sbb-time-input-max-width: 4.0625rem;
-    --sbb-time-input-s-max-width: 3.625rem;
   }
   :root:has(sbb-header[size=s]) {
     --sbb-header-height: var(--sbb-spacing-fixed-14x);
@@ -1144,19 +1142,19 @@
 
 @font-face {
   font-family: SBB;
-  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");
+  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Roman.woff2") format("woff2");
   font-display: fallback;
   font-weight: 400;
 }
 @font-face {
   font-family: SBB;
-  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");
+  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Bold.woff2") format("woff2");
   font-display: swap;
   font-weight: 700;
 }
 @font-face {
   font-family: SBB;
-  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");
+  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Light.woff2") format("woff2");
   font-display: swap;
   font-weight: 300;
 }
@@ -1175,7 +1173,7 @@ html {
   opacity: 1;
 }
 
-sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input) {
+sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
   --sbb-text-font-size: var(--sbb-font-size-text-m);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
@@ -1202,17 +1200,17 @@ sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input) {
   font-family: var(--sbb-typo-font-family) !important;
   line-height: var(--sbb-typo-line-height-body-text) !important;
 }
-sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input)::placeholder {
+sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)::placeholder {
   color: var(--sbb-color-metal);
   -webkit-text-fill-color: var(--sbb-color-metal);
   opacity: 1;
 }
-sbb-form-field[floating-label] :where(input, select, textarea, sbb-select)::placeholder, sbb-form-field[floating-label] sbb-date-input::after {
+sbb-form-field[floating-label] :where(input, select, textarea, sbb-select)::placeholder, sbb-form-field[floating-label] :where(sbb-date-input, sbb-time-input)::after {
   color: transparent !important;
   -webkit-text-fill-color: transparent !important;
 }
 @media (forced-colors: active) {
-  sbb-form-field[floating-label] :where(input, select, textarea, sbb-select)::placeholder, sbb-form-field[floating-label] sbb-date-input::after {
+  sbb-form-field[floating-label] :where(input, select, textarea, sbb-select)::placeholder, sbb-form-field[floating-label] :where(sbb-date-input, sbb-time-input)::after {
     color: Canvas !important;
     -webkit-text-fill-color: Canvas !important;
   }
@@ -1227,7 +1225,7 @@ sbb-form-field :where(select) {
 sbb-form-field :where(select, sbb-select) {
   padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
 }
-sbb-form-field[size=s] :where(input, sbb-date-input) {
+sbb-form-field[size=s] :where(input, sbb-date-input, sbb-time-input) {
   height: calc(var(--sbb-form-field-input-text-size) * 1.25);
   line-height: 1 !important;
   margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-body-text) - 1.25));
@@ -1314,6 +1312,29 @@ sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-button, sbb-form-fi
     scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
   }
 }
+sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
+:is(:state(interacted), [state--interacted]):invalid,
+.ng-touched.ng-invalid,
+.sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) sbb-form-field:has(:is(:invalid, .ng-invalid)) {
+  --sbb-form-field-border-color: var(--sbb-color-red125);
+  --sbb-form-field-text-color: var(--sbb-color-red125);
+}
+sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
+:is(:state(interacted), [state--interacted]):invalid,
+.ng-touched.ng-invalid,
+.sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) sbb-form-field:has(:is(:invalid, .ng-invalid))[negative] {
+  --sbb-form-field-border-color: var(--sbb-color-red-mode-dark);
+  --sbb-form-field-text-color: var(--sbb-color-red-mode-dark);
+}
+@media (forced-colors: active) {
+  sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
+  :is(:state(interacted), [state--interacted]):invalid,
+  .ng-touched.ng-invalid,
+  .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) sbb-form-field:has(:is(:invalid, .ng-invalid)) {
+    --sbb-form-field-border-color: LinkText !important;
+    --sbb-form-field-text-color: LinkText !important;
+  }
+}
 
 :is(sbb-autocomplete,
 sbb-autocomplete-grid,
@@ -1378,13 +1399,6 @@ sbb-title + p {
   margin-block-start: 0;
 }
 
-input[data-sbb-time-input] {
-  max-width: var(--sbb-time-input-max-width);
-}
-sbb-form-field[size=s] input[data-sbb-time-input] {
-  max-width: var(--sbb-time-input-s-max-width);
-}
-
 img {
   aspect-ratio: var(--sbb-image-aspect-ratio);
   object-fit: var(--sbb-image-object-fit);
@@ -1557,5 +1571,14 @@ sbb-form-field .sbb-select-trigger {
 sbb-toggle:has(:focus-visible) {
   outline-offset: var(--sbb-focus-outline-offset);
   outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
-  --sbb-focus-outline-offset: 0.3125rem;
+}
+
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
+  --sbb-option-min-height: var(--sbb-size-element-xxs);
+  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
+  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
+}
+
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
+  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
 }