@sbb-esta/lyne-elements 2.11.0 → 3.0.0-next.0

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

@@ -1,27 +1,21 @@
 @mixin font-declarations {
   @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;
   }
@@ -30,27 +24,21 @@
 @mixin font-declarations-full {
   @font-face {
     font-family: SBB;
-    src:
-      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');
+    src: url('https://cdn.app.sbb.ch/fonts/v1_9_full/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_full/SBBWeb-Bold.woff2') format('woff2'),
-      url('https://cdn.app.sbb.ch/fonts/v1_8_1_full/SBBWeb-Bold.woff') format('woff');
+    src: url('https://cdn.app.sbb.ch/fonts/v1_9_full/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_full/SBBWeb-Light.woff2') format('woff2'),
-      url('https://cdn.app.sbb.ch/fonts/v1_8_1_full/SBBWeb-Light.woff') format('woff');
+    src: url('https://cdn.app.sbb.ch/fonts/v1_9_full/SBBWeb-Light.woff2') format('woff2');
     font-display: swap;
     font-weight: 300;
   }

package/core/styles/mixins/link.scss

@@ -33,14 +33,14 @@
 // To display a current active page, e.g. if the CSS class sbb-active is set
 @mixin block-link-variables--active {
   --sbb-link-color-normal: var(--sbb-color-black);
-  --sbb-link-text-decoration: underline;
+  --sbb-link-text-decoration-line: underline;
   --sbb-link-text-decoration-color: currentcolor;
 }
 
 // To display a current active page, e.g. if the CSS class sbb-active is set
 @mixin block-link-variables--active-negative {
   --sbb-link-color-normal: var(--sbb-color-cement);
-  --sbb-link-text-decoration: underline;
+  --sbb-link-text-decoration-line: underline;
   --sbb-link-text-decoration-color: currentcolor;
 }
 
@@ -67,9 +67,7 @@
 
 @mixin link-base {
   color: var(--sbb-link-color-normal);
-
-  // TODO: rename --sbb-link-text-decoration variable to --sbb-link-text-decoration-line
-  text-decoration-line: var(--sbb-link-text-decoration, underline);
+  text-decoration-line: var(--sbb-link-text-decoration-line, 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
@@ -91,8 +89,6 @@
 @mixin link-hover-rules {
   @include mediaqueries.hover-mq($hover: true) {
     color: var(--sbb-link-color-hover);
-
-    // 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/mixins/lists.scss

@@ -96,69 +96,6 @@
   }
 }
 
-// @deprecated Will be removed with next major version
-@mixin base-marker-list(
-  $dimensions,
-  $padding-inline,
-  $to-text-gap,
-  $vertical-gap,
-  $text-to-marker-block-offset
-) {
-  & {
-    #{$dimensions}: #{functions.px-to-rem-build(34)};
-    #{$padding-inline}: var(--sbb-spacing-responsive-xxs);
-    #{$to-text-gap}: var(--sbb-spacing-responsive-xxxs);
-
-    // Additional space from overall li padding to the text because text
-    // has to be centered to marker number.
-    #{$text-to-marker-block-offset}: calc(
-      0.5 *
-        (var(#{$dimensions}) - var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size))
-    );
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  &:where(.sbb-text-xl) {
-    @include mediaqueries.mq($from: medium) {
-      #{$dimensions}: #{functions.px-to-rem-build(41)};
-    }
-  }
-
-  // stylelint-disable-next-line no-descending-specificity
-  > li {
-    position: relative;
-    padding-inline: calc(var(#{$padding-inline}) + var(#{$dimensions}) + var(#{$to-text-gap}))
-      var(#{$padding-inline});
-    min-height: var(#{$dimensions});
-
-    &::before {
-      @include typo.text-xxs--bold;
-
-      position: absolute;
-      height: var(#{$dimensions});
-      width: var(#{$dimensions});
-      margin-block-start: calc(-1 * var(#{$text-to-marker-block-offset}));
-      inset-inline-start: var(#{$padding-inline});
-      border-radius: 50%;
-    }
-
-    + li {
-      margin-block-start: var(#{$vertical-gap});
-    }
-
-    p {
-      margin-block: 0;
-    }
-
-    // P has to be redefined to be more specific
-    > * + p {
-      margin-block-start: var(--sbb-spacing-responsive-xxxs);
-    }
-  }
-}
-
 @mixin icon-list {
   --sbb-icon-list-marker-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.104 13.305 5-6.5-.792-.61-4.69 6.096-2.102-1.681-.624.78 2.5 2 .398.319z" clip-rule="evenodd"></path></svg>');
   --sbb-icon-list-marker-icon-color: currentcolor;

package/core/styles/mixins/overlay.scss

@@ -26,6 +26,8 @@
     var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius)
   );
   --sbb-options-panel-background-color: var(--sbb-color-white);
+  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
+  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
 
   // As the overlays have always a white background, we have to fix the focus outline color
   // to default color for cases where the overlays are used in a negative context.
@@ -42,6 +44,10 @@
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
 }
 
+@mixin options-panel-overlay-size-s-variables {
+  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
+}
+
 @mixin options-panel-overlay-container {
   position: fixed;
   pointer-events: none;
@@ -97,7 +103,7 @@
 
 @mixin optionsOverlay {
   background-color: var(--sbb-options-panel-background-color);
-  padding-block: var(--sbb-spacing-fixed-3x);
+  padding-block: var(--sbb-options-panel-padding-block);
   padding-inline: 0;
   border-radius: var(--sbb-options-panel-options-border-radius);
   max-height: var(--sbb-options-panel-max-height);

package/core/styles/mixins/table.scss

@@ -59,8 +59,6 @@
 
   tbody {
     & > tr {
-      @include table-data-row;
-
       & > td {
         @include table-data-cell;
 
@@ -105,11 +103,6 @@
   text-align: left;
 }
 
-// @deprecated No longer used internally.
-@mixin table-data-row {
-  // empty
-}
-
 @mixin table-data-cell {
   @include typo.text-s--regular;
 

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.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);
@@ -1558,4 +1572,14 @@ 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);
 }