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

package/core/mixins/readonly-mixin.js

@@ -0,0 +1,30 @@
+import { __esDecorate as i, __runInitializers as d } from "tslib";
+import { property as u } from "lit/decorators.js";
+import { forceType as y } from "../decorators/force-type.js";
+const f = (s) => (() => {
+  var e;
+  let r = s, l = [], n;
+  return e = class extends r {
+    /**
+     * Whether the component is readonly.
+     */
+    set readOnly(a) {
+      var t;
+      this.toggleAttribute("readonly", a), (t = this.requestUpdate) == null || t.call(this);
+    }
+    get readOnly() {
+      return this.hasAttribute("readonly");
+    }
+    constructor() {
+      super(...arguments), d(this, l);
+    }
+  }, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    n = [y(), u({ type: Boolean, attribute: "readonly" })], i(e, null, n, { kind: "setter", name: "readOnly", static: !1, private: !1, access: { has: (t) => "readOnly" in t, set: (t, o) => {
+      t.readOnly = o;
+    } }, metadata: a }, null, l), a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e;
+})();
+export {
+  f as SbbReadonlyMixin
+};

package/core/mixins/required-mixin.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { AbstractConstructor } from './constructor.js';
-import { SbbFormAssociatedMixinType } from './form-associated-mixin.js';
+import { SbbElementInternalsMixinType } from './element-internals-mixin.js';
 export declare class SbbRequiredMixinType {
     accessor required: boolean;
     protected isRequiredExternally(): boolean;
@@ -8,5 +8,5 @@ export declare class SbbRequiredMixinType {
 /**
  * Enhance your component with a required property.
  */
-export declare const SbbRequiredMixin: <T extends AbstractConstructor<LitElement & SbbFormAssociatedMixinType<V>>, V>(superClass: T) => AbstractConstructor<SbbRequiredMixinType> & T;
+export declare const SbbRequiredMixin: <T extends AbstractConstructor<LitElement & SbbElementInternalsMixinType>>(superClass: T) => AbstractConstructor<SbbRequiredMixinType> & T;
 //# sourceMappingURL=required-mixin.d.ts.map

package/core/mixins/required-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"required-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/required-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAE7E,MAAM,CAAC,OAAO,OAAO,oBAAoB;IACvC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAS,CAAC,oBAAoB,IAAI,OAAO;CAC1C;AAED;;GAEG;AAEH,eAAO,MAAM,gBAAgB,GAC3B,CAAC,SAAS,mBAAmB,CAAC,UAAU,GAAG,0BAA0B,CAAC,CAAC,CAAC,CAAC,EACzE,CAAC,EAED,YAAY,CAAC,KACZ,mBAAmB,CAAC,oBAAoB,CAAC,GAAG,CAiC9C,CAAC"}
+{"version":3,"file":"required-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/required-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AAEjF,MAAM,CAAC,OAAO,OAAO,oBAAoB;IACvC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAS,CAAC,oBAAoB,IAAI,OAAO;CAC1C;AAED;;GAEG;AAEH,eAAO,MAAM,gBAAgB,GAC3B,CAAC,SAAS,mBAAmB,CAAC,UAAU,GAAG,4BAA4B,CAAC,EAExE,YAAY,CAAC,KACZ,mBAAmB,CAAC,oBAAoB,CAAC,GAAG,CAiC9C,CAAC"}

package/core/mixins.d.ts

@@ -4,6 +4,7 @@
 export * from './mixins/animation-complete-mixin.js';
 export * from './mixins/constructor.js';
 export * from './mixins/disabled-mixin.js';
+export * from './mixins/element-internals-mixin.js';
 export * from './mixins/form-associated-checkbox-mixin.js';
 export * from './mixins/form-associated-input-mixin.js';
 export * from './mixins/form-associated-mixin.js';
@@ -13,5 +14,6 @@ export * from './mixins/named-slot-list-mixin.js';
 export * from './mixins/negative-mixin.js';
 export * from './mixins/panel-mixin.js';
 export * from './mixins/required-mixin.js';
+export * from './mixins/readonly-mixin.js';
 export * from './mixins/update-scheduler-mixin.js';
 //# sourceMappingURL=mixins.d.ts.map

package/core/mixins.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mixins.d.ts","sourceRoot":"","sources":["../../../src/elements/core/mixins.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC;AACrD,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC"}
+{"version":3,"file":"mixins.d.ts","sourceRoot":"","sources":["../../../src/elements/core/mixins.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC;AACrD,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qCAAqC,CAAC;AACpD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC"}

package/core/mixins.js

@@ -1,32 +1,36 @@
 import { SbbAnimationCompleteMixin as r } from "./mixins/animation-complete-mixin.js";
 import { SbbDisabledInteractiveMixin as a, SbbDisabledMixin as t, SbbDisabledTabIndexActionMixin as l } from "./mixins/disabled-mixin.js";
-import { SbbFormAssociatedCheckboxMixin as c } from "./mixins/form-associated-checkbox-mixin.js";
-import { SbbFormAssociatedInputMixin as u } from "./mixins/form-associated-input-mixin.js";
-import { SbbFormAssociatedMixin as v } from "./mixins/form-associated-mixin.js";
-import { SbbFormAssociatedRadioButtonMixin as f, radioButtonRegistry as h } from "./mixins/form-associated-radio-button-mixin.js";
-import { SbbHydrationMixin as S } from "./mixins/hydration-mixin.js";
-import { SbbNamedSlotListMixin as w } from "./mixins/named-slot-list-mixin.js";
-import { SbbNegativeMixin as y } from "./mixins/negative-mixin.js";
-import { SbbPanelMixin as C } from "./mixins/panel-mixin.js";
+import { SbbElementInternalsMixin as c } from "./mixins/element-internals-mixin.js";
+import { SbbFormAssociatedCheckboxMixin as x } from "./mixins/form-associated-checkbox-mixin.js";
+import { SbbFormAssociatedInputMixin as v } from "./mixins/form-associated-input-mixin.js";
+import { SbbFormAssociatedMixin as f } from "./mixins/form-associated-mixin.js";
+import { SbbFormAssociatedRadioButtonMixin as g, radioButtonRegistry as S } from "./mixins/form-associated-radio-button-mixin.js";
+import { SbbHydrationMixin as M } from "./mixins/hydration-mixin.js";
+import { SbbNamedSlotListMixin as y } from "./mixins/named-slot-list-mixin.js";
+import { SbbNegativeMixin as C } from "./mixins/negative-mixin.js";
+import { SbbPanelMixin as I } from "./mixins/panel-mixin.js";
 import { SbbRequiredMixin as D } from "./mixins/required-mixin.js";
-import { SbbUpdateSchedulerMixin as R } from "./mixins/update-scheduler-mixin.js";
+import { SbbReadonlyMixin as N } from "./mixins/readonly-mixin.js";
+import { SbbUpdateSchedulerMixin as q } from "./mixins/update-scheduler-mixin.js";
 import { css as e } from "lit";
-const s = e`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;inset:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{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-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
+const n = e`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{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-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
 export {
   r as SbbAnimationCompleteMixin,
   a as SbbDisabledInteractiveMixin,
   t as SbbDisabledMixin,
   l as SbbDisabledTabIndexActionMixin,
-  c as SbbFormAssociatedCheckboxMixin,
-  u as SbbFormAssociatedInputMixin,
-  v as SbbFormAssociatedMixin,
-  f as SbbFormAssociatedRadioButtonMixin,
-  S as SbbHydrationMixin,
-  w as SbbNamedSlotListMixin,
-  y as SbbNegativeMixin,
-  C as SbbPanelMixin,
+  c as SbbElementInternalsMixin,
+  x as SbbFormAssociatedCheckboxMixin,
+  v as SbbFormAssociatedInputMixin,
+  f as SbbFormAssociatedMixin,
+  g as SbbFormAssociatedRadioButtonMixin,
+  M as SbbHydrationMixin,
+  y as SbbNamedSlotListMixin,
+  C as SbbNegativeMixin,
+  I as SbbPanelMixin,
+  N as SbbReadonlyMixin,
   D as SbbRequiredMixin,
-  R as SbbUpdateSchedulerMixin,
-  s as panelCommonStyle,
-  h as radioButtonRegistry
+  q as SbbUpdateSchedulerMixin,
+  n as panelCommonStyle,
+  S as radioButtonRegistry
 };

package/core/overlay/position.js

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

package/core/styles/core/mediaqueries.scss

@@ -4,7 +4,7 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
-@use '@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables.scss' as sbb-tokens;
+@use '../node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss' as sbb-tokens;
 
 $mq-breakpoints: (
   zero: sbb-tokens.$sbb-breakpoint-zero-min,

package/core/styles/core.scss

@@ -1,4 +1,5 @@
-@use '@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables_css--mixin.scss' as sbb-css-tokens;
+@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss' as
+  sbb-css-tokens;
 @use './core/mediaqueries';
 @use './core/functions';
 @use './mixins/a11y';
@@ -27,7 +28,6 @@
 
     // Time Input
     --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
-    --sbb-time-input-s-max-width: #{functions.px-to-rem-build(51)};
 
     // Overlay
     --sbb-overlay-default-z-index: 1000;
@@ -54,7 +54,6 @@
 
       // Time Input
       --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
-      --sbb-time-input-s-max-width: #{functions.px-to-rem-build(58)};
 
       &:has(sbb-header[size='s']) {
         --sbb-header-height: var(--sbb-spacing-fixed-14x);
@@ -77,7 +76,7 @@ html {
 }
 
 sbb-form-field {
-  :where(input, select, textarea, sbb-select, sbb-date-input) {
+  :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
     @include typo.text-m--regular;
     @include helpers.ellipsis;
     @include inputs.input-reset;
@@ -107,8 +106,8 @@ sbb-form-field {
   }
 
   &[floating-label] :where(input, select, textarea, sbb-select)::placeholder,
-  // This covers the placeholder of the sbb-date-input
-  &[floating-label] sbb-date-input::after {
+  // This covers the placeholder of the sbb-date-input and sbb-time-input
+  &[floating-label] :where(sbb-date-input, sbb-time-input)::after {
     color: transparent !important;
     -webkit-text-fill-color: transparent !important;
 
@@ -133,7 +132,7 @@ sbb-form-field {
     padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
   }
 
-  &[size='s'] :where(input, sbb-date-input) {
+  &[size='s'] :where(input, sbb-date-input, sbb-time-input) {
     // We shrink the input's height to support all types of inputs (especially type=number).
     // Factor 1.25 ensures, letters are not cut.
     height: calc(var(--sbb-form-field-input-text-size) * 1.25);
@@ -168,36 +167,59 @@ sbb-form-field {
   &[negative] :where(textarea) {
     @include scrollbar.scrollbar($negative: true);
   }
+
+  &: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) &:has(:is(:invalid, .ng-invalid)) {
+    --sbb-form-field-border-color: var(--sbb-color-red125);
+    --sbb-form-field-text-color: var(--sbb-color-red125);
+
+    &[negative] {
+      --sbb-form-field-border-color: var(--sbb-color-red-mode-dark);
+      --sbb-form-field-text-color: var(--sbb-color-red-mode-dark);
+    }
+
+    @include a11y.if-forced-colors {
+      --sbb-form-field-border-color: LinkText !important;
+      --sbb-form-field-text-color: LinkText !important;
+    }
+  }
 }
 
 // Hiding components until they are instantiated
 :is(
-  sbb-autocomplete,
-  sbb-autocomplete-grid,
-  sbb-dialog,
-  sbb-menu,
-  sbb-navigation,
-  sbb-navigation-section,
-  sbb-overlay,
-  sbb-popover,
-  sbb-select,
-  sbb-skiplink-list,
-  sbb-toast
-):not(:defined) {
+    sbb-autocomplete,
+    sbb-autocomplete-grid,
+    sbb-dialog,
+    sbb-menu,
+    sbb-navigation,
+    sbb-navigation-section,
+    sbb-overlay,
+    sbb-popover,
+    sbb-select,
+    sbb-skiplink-list,
+    sbb-toast
+  ):not(:defined) {
   display: none;
 }
 
 // Hide popover artifacts
 [popover]:where(
-  sbb-autocomplete,
-  sbb-autocomplete-grid,
-  sbb-dialog,
-  sbb-menu,
-  sbb-navigation,
-  sbb-overlay,
-  sbb-popover,
-  sbb-toast
-) {
+    sbb-autocomplete,
+    sbb-autocomplete-grid,
+    sbb-dialog,
+    sbb-menu,
+    sbb-navigation,
+    sbb-overlay,
+    sbb-popover,
+    sbb-toast
+  ) {
   margin: 0;
   padding: 0;
   border: none;
@@ -243,14 +265,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'] & {
-    max-width: var(--sbb-time-input-s-max-width);
-  }
-}
-
 img {
   aspect-ratio: var(--sbb-image-aspect-ratio);
   object-fit: var(--sbb-image-object-fit);
@@ -448,11 +462,11 @@ sbb-sidebar-container:is(
 
 // Toggles visibility of backdrop if there is an affected sidebar inside the container.
 sbb-sidebar-container:has(
-  > sbb-sidebar:is([mode='over'], [data-mode-over-forced]):is(
-      [data-state='opening'],
-      [data-state='opened']
-    )
-) {
+    > sbb-sidebar:is([mode='over'], [data-mode-over-forced]):is(
+        [data-state='opening'],
+        [data-state='opened']
+      )
+  ) {
   --sbb-sidebar-container__backdrop-visibility: visible;
   --sbb-sidebar-container-backdrop-opacity: 0.4;
 }
@@ -497,6 +511,15 @@ sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
 
 sbb-toggle:has(:focus-visible) {
   @include a11y.focus-outline;
+}
+
+: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);
+}
 
-  --sbb-focus-outline-offset: #{functions.px-to-rem-build(5)};
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size='s'] sbb-optgroup {
+  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
 }

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);