@sbb-esta/lyne-elements 3.6.0 → 3.7.0

package/core/i18n.js

@@ -1,99 +1,105 @@
-import { i18nAdditionalWagonInformationHeading as i, i18nArrival as a, i18nBlockedPassage as o, i18nBreadcrumbEllipsisButtonLabel as t, i18nCalendarDateSelection as r, i18nCalendarWeekNumber as l, i18nCheckboxRequired as u, i18nChipDelete as c, i18nChipGroupInputDescription as s, i18nClass as d, i18nClearInput as g, i18nCloseAlert as p, i18nCloseDialog as C, i18nCloseNavigation as D, i18nCloseNotification as S, i18nClosePopover as b, i18nCloseSidebar as P, i18nClosedCompartmentLabel as m, i18nCollapsed as T, i18nConnectionFrom as v, i18nConnectionRoundtrip as L, i18nConnectionTo as h, i18nCouchetteWagonLabel as x, i18nDateChangedTo as M, i18nDateInvalid as N, i18nDateMax as W, i18nDateMin as F, i18nDatePickerPlaceholder as I, i18nDeparture as f, i18nDialog as y, i18nDirection as R, i18nDurationDay as k, i18nDurationHour as B, i18nDurationMinute as O, i18nExpanded as Y, i18nFileSelectorButtonLabel as w, i18nFileSelectorButtonLabelMultiple as A, i18nFileSelectorCurrentlySelected as q, i18nFileSelectorDeleteFile as E, i18nFileSelectorSubtitleLabel as G, i18nFileSelectorSubtitleLabelMultiple as H, i18nFlipCard as Q, i18nFromPlatform as j, i18nGoBack as z, i18nInputRequired as J, i18nItemsPerPage as K, i18nLocomotiveLabel as U, i18nMapContainerButtonLabel as V, i18nMeansOfTransport as X, i18nNew as Z, i18nNextDay as _, i18nNextMonth as $, i18nNextPage as ee, i18nNextYear as ne, i18nNextYearRange as ie, i18nOccupancy as ae, i18nOptional as oe, i18nPage as te, i18nPaginatorOf as re, i18nPaginatorSelected as le, i18nPreviousDay as ue, i18nPreviousMonth as ce, i18nPreviousPage as se, i18nPreviousYear as de, i18nPreviousYearRange as ge, i18nRealTimeInfo as pe, i18nRestaurantWagonLabel as Ce, i18nReverseCard as De, i18nSector as Se, i18nSectorShort as be, i18nSelectNextDay as Pe, i18nSelectPreviousDay as me, i18nSelectedPage as Te, i18nSelectionRequired as ve, i18nShowCalendar as Le, i18nSleepingWagonLabel as he, i18nSupersaver as xe, i18nTargetOpensInNewWindow as Me, i18nTimeInputChange as Ne, i18nTimeInvalid as We, i18nTimeMax as Fe, i18nTimeMaxLength as Ie, i18nToday as fe, i18nTrain as ye, i18nTrains as Re, i18nTransferProcedure as ke, i18nTransferProcedures as Be, i18nTravelhints as Oe, i18nTripDuration as Ye, i18nTripQuayChange as we, i18nWagonLabel as Ae, i18nWagonLabelNumber as qe, i18nWagonsLabel as Ee, i18nWalkingDistanceArrival as Ge, i18nWalkingDistanceDeparture as He, i18nYearMonthSelection as Qe } from "./i18n/i18n.js";
+import { i18nAdditionalWagonInformationHeading as n, i18nArrival as a, i18nBlockedPassage as o, i18nBreadcrumbEllipsisButtonLabel as t, i18nCalendarDateSelection as r, i18nCalendarWeekNumber as l, i18nCarouselArrowsNavigationHint as u, i18nCarouselItemAriaLabel as s, i18nCheckboxRequired as c, i18nChipDelete as d, i18nChipGroupInputDescription as g, i18nClass as p, i18nClearInput as C, i18nCloseAlert as S, i18nCloseDialog as D, i18nCloseNavigation as b, i18nCloseNotification as P, i18nClosePopover as m, i18nCloseSidebar as v, i18nClosedCompartmentLabel as L, i18nCollapsed as T, i18nConnectionFrom as h, i18nConnectionRoundtrip as N, i18nConnectionTo as x, i18nCouchetteWagonLabel as M, i18nDateChangedTo as F, i18nDateInvalid as I, i18nDateMax as W, i18nDateMin as f, i18nDatePickerPlaceholder as y, i18nDeparture as R, i18nDialog as B, i18nDirection as k, i18nDurationDay as w, i18nDurationHour as A, i18nDurationMinute as O, i18nExpanded as Y, i18nFileSelectorButtonLabel as q, i18nFileSelectorButtonLabelMultiple as H, i18nFileSelectorCurrentlySelected as E, i18nFileSelectorDeleteFile as G, i18nFileSelectorSubtitleLabel as Q, i18nFileSelectorSubtitleLabelMultiple as j, i18nFlipCard as z, i18nFromPlatform as J, i18nGoBack as K, i18nInputRequired as U, i18nItemsPerPage as V, i18nLocomotiveLabel as X, i18nMapContainerButtonLabel as Z, i18nMeansOfTransport as _, i18nNew as $, i18nNextDay as ee, i18nNextMonth as ie, i18nNextPage as ne, i18nNextSlide as ae, i18nNextYear as oe, i18nNextYearRange as te, i18nOccupancy as re, i18nOptional as le, i18nPage as ue, i18nPaginatorOf as se, i18nPaginatorSelected as ce, i18nPreviousDay as de, i18nPreviousMonth as ge, i18nPreviousPage as pe, i18nPreviousSlide as Ce, i18nPreviousYear as Se, i18nPreviousYearRange as De, i18nRealTimeInfo as be, i18nRestaurantWagonLabel as Pe, i18nReverseCard as me, i18nSector as ve, i18nSectorShort as Le, i18nSelectNextDay as Te, i18nSelectPreviousDay as he, i18nSelectedPage as Ne, i18nSelectionRequired as xe, i18nShowCalendar as Me, i18nSleepingWagonLabel as Fe, i18nSlide as Ie, i18nSupersaver as We, i18nTargetOpensInNewWindow as fe, i18nTimeInputChange as ye, i18nTimeInvalid as Re, i18nTimeMax as Be, i18nTimeMaxLength as ke, i18nTimetableFormSwapButtonLabel as we, i18nToday as Ae, i18nTrain as Oe, i18nTrains as Ye, i18nTransferProcedure as qe, i18nTransferProcedures as He, i18nTravelhints as Ee, i18nTripDuration as Ge, i18nTripQuayChange as Qe, i18nWagonLabel as je, i18nWagonLabelNumber as ze, i18nWagonsLabel as Je, i18nWalkingDistanceArrival as Ke, i18nWalkingDistanceDeparture as Ue, i18nYearMonthSelection as Ve } from "./i18n/i18n.js";
 export {
-  i as i18nAdditionalWagonInformationHeading,
+  n as i18nAdditionalWagonInformationHeading,
   a as i18nArrival,
   o as i18nBlockedPassage,
   t as i18nBreadcrumbEllipsisButtonLabel,
   r as i18nCalendarDateSelection,
   l as i18nCalendarWeekNumber,
-  u as i18nCheckboxRequired,
-  c as i18nChipDelete,
-  s as i18nChipGroupInputDescription,
-  d as i18nClass,
-  g as i18nClearInput,
-  p as i18nCloseAlert,
-  C as i18nCloseDialog,
-  D as i18nCloseNavigation,
-  S as i18nCloseNotification,
-  b as i18nClosePopover,
-  P as i18nCloseSidebar,
-  m as i18nClosedCompartmentLabel,
+  u as i18nCarouselArrowsNavigationHint,
+  s as i18nCarouselItemAriaLabel,
+  c as i18nCheckboxRequired,
+  d as i18nChipDelete,
+  g as i18nChipGroupInputDescription,
+  p as i18nClass,
+  C as i18nClearInput,
+  S as i18nCloseAlert,
+  D as i18nCloseDialog,
+  b as i18nCloseNavigation,
+  P as i18nCloseNotification,
+  m as i18nClosePopover,
+  v as i18nCloseSidebar,
+  L as i18nClosedCompartmentLabel,
   T as i18nCollapsed,
-  v as i18nConnectionFrom,
-  L as i18nConnectionRoundtrip,
-  h as i18nConnectionTo,
-  x as i18nCouchetteWagonLabel,
-  M as i18nDateChangedTo,
-  N as i18nDateInvalid,
+  h as i18nConnectionFrom,
+  N as i18nConnectionRoundtrip,
+  x as i18nConnectionTo,
+  M as i18nCouchetteWagonLabel,
+  F as i18nDateChangedTo,
+  I as i18nDateInvalid,
   W as i18nDateMax,
-  F as i18nDateMin,
-  I as i18nDatePickerPlaceholder,
-  f as i18nDeparture,
-  y as i18nDialog,
-  R as i18nDirection,
-  k as i18nDurationDay,
-  B as i18nDurationHour,
+  f as i18nDateMin,
+  y as i18nDatePickerPlaceholder,
+  R as i18nDeparture,
+  B as i18nDialog,
+  k as i18nDirection,
+  w as i18nDurationDay,
+  A as i18nDurationHour,
   O as i18nDurationMinute,
   Y as i18nExpanded,
-  w as i18nFileSelectorButtonLabel,
-  A as i18nFileSelectorButtonLabelMultiple,
-  q as i18nFileSelectorCurrentlySelected,
-  E as i18nFileSelectorDeleteFile,
-  G as i18nFileSelectorSubtitleLabel,
-  H as i18nFileSelectorSubtitleLabelMultiple,
-  Q as i18nFlipCard,
-  j as i18nFromPlatform,
-  z as i18nGoBack,
-  J as i18nInputRequired,
-  K as i18nItemsPerPage,
-  U as i18nLocomotiveLabel,
-  V as i18nMapContainerButtonLabel,
-  X as i18nMeansOfTransport,
-  Z as i18nNew,
-  _ as i18nNextDay,
-  $ as i18nNextMonth,
-  ee as i18nNextPage,
-  ne as i18nNextYear,
-  ie as i18nNextYearRange,
-  ae as i18nOccupancy,
-  oe as i18nOptional,
-  te as i18nPage,
-  re as i18nPaginatorOf,
-  le as i18nPaginatorSelected,
-  ue as i18nPreviousDay,
-  ce as i18nPreviousMonth,
-  se as i18nPreviousPage,
-  de as i18nPreviousYear,
-  ge as i18nPreviousYearRange,
-  pe as i18nRealTimeInfo,
-  Ce as i18nRestaurantWagonLabel,
-  De as i18nReverseCard,
-  Se as i18nSector,
-  be as i18nSectorShort,
-  Pe as i18nSelectNextDay,
-  me as i18nSelectPreviousDay,
-  Te as i18nSelectedPage,
-  ve as i18nSelectionRequired,
-  Le as i18nShowCalendar,
-  he as i18nSleepingWagonLabel,
-  xe as i18nSupersaver,
-  Me as i18nTargetOpensInNewWindow,
-  Ne as i18nTimeInputChange,
-  We as i18nTimeInvalid,
-  Fe as i18nTimeMax,
-  Ie as i18nTimeMaxLength,
-  fe as i18nToday,
-  ye as i18nTrain,
-  Re as i18nTrains,
-  ke as i18nTransferProcedure,
-  Be as i18nTransferProcedures,
-  Oe as i18nTravelhints,
-  Ye as i18nTripDuration,
-  we as i18nTripQuayChange,
-  Ae as i18nWagonLabel,
-  qe as i18nWagonLabelNumber,
-  Ee as i18nWagonsLabel,
-  Ge as i18nWalkingDistanceArrival,
-  He as i18nWalkingDistanceDeparture,
-  Qe as i18nYearMonthSelection
+  q as i18nFileSelectorButtonLabel,
+  H as i18nFileSelectorButtonLabelMultiple,
+  E as i18nFileSelectorCurrentlySelected,
+  G as i18nFileSelectorDeleteFile,
+  Q as i18nFileSelectorSubtitleLabel,
+  j as i18nFileSelectorSubtitleLabelMultiple,
+  z as i18nFlipCard,
+  J as i18nFromPlatform,
+  K as i18nGoBack,
+  U as i18nInputRequired,
+  V as i18nItemsPerPage,
+  X as i18nLocomotiveLabel,
+  Z as i18nMapContainerButtonLabel,
+  _ as i18nMeansOfTransport,
+  $ as i18nNew,
+  ee as i18nNextDay,
+  ie as i18nNextMonth,
+  ne as i18nNextPage,
+  ae as i18nNextSlide,
+  oe as i18nNextYear,
+  te as i18nNextYearRange,
+  re as i18nOccupancy,
+  le as i18nOptional,
+  ue as i18nPage,
+  se as i18nPaginatorOf,
+  ce as i18nPaginatorSelected,
+  de as i18nPreviousDay,
+  ge as i18nPreviousMonth,
+  pe as i18nPreviousPage,
+  Ce as i18nPreviousSlide,
+  Se as i18nPreviousYear,
+  De as i18nPreviousYearRange,
+  be as i18nRealTimeInfo,
+  Pe as i18nRestaurantWagonLabel,
+  me as i18nReverseCard,
+  ve as i18nSector,
+  Le as i18nSectorShort,
+  Te as i18nSelectNextDay,
+  he as i18nSelectPreviousDay,
+  Ne as i18nSelectedPage,
+  xe as i18nSelectionRequired,
+  Me as i18nShowCalendar,
+  Fe as i18nSleepingWagonLabel,
+  Ie as i18nSlide,
+  We as i18nSupersaver,
+  fe as i18nTargetOpensInNewWindow,
+  ye as i18nTimeInputChange,
+  Re as i18nTimeInvalid,
+  Be as i18nTimeMax,
+  ke as i18nTimeMaxLength,
+  we as i18nTimetableFormSwapButtonLabel,
+  Ae as i18nToday,
+  Oe as i18nTrain,
+  Ye as i18nTrains,
+  qe as i18nTransferProcedure,
+  He as i18nTransferProcedures,
+  Ee as i18nTravelhints,
+  Ge as i18nTripDuration,
+  Qe as i18nTripQuayChange,
+  je as i18nWagonLabel,
+  ze as i18nWagonLabelNumber,
+  Je as i18nWagonsLabel,
+  Ke as i18nWalkingDistanceArrival,
+  Ue as i18nWalkingDistanceDeparture,
+  Ve as i18nYearMonthSelection
 };

package/core/styles/core.scss

@@ -109,7 +109,7 @@ html {
   @include typo.placeholder;
 }
 
-sbb-form-field {
+:is(sbb-form-field, sbb-timetable-form-field) {
   :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
     @include typo.text-m--regular;
     @include helpers.ellipsis;

package/core/styles/mixins/a11y.scss

@@ -27,7 +27,7 @@
 
 @mixin screen-reader-only {
   border: 0;
-  clip: rect(0 0 0 0);
+  clip-path: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;

package/core/styles/mixins/scrollbar.scss

@@ -40,9 +40,11 @@
   //  We have to use the `not` selector as Chrome supports both, the -webkit-* and the following properties.
   //  As long as possible we use the -webkit-* approach as we have more styling possibilities there.
   @supports not selector(::-webkit-scrollbar) {
-    scrollbar-width: var(--sbb-scrollbar-width-firefox);
-    scrollbar-color: var(--sbb-scrollbar-color, currentcolor)
-      var(--sbb-scrollbar-track-color, transparent);
+    & {
+      scrollbar-width: var(--sbb-scrollbar-width-firefox);
+      scrollbar-color: var(--sbb-scrollbar-color, currentcolor)
+        var(--sbb-scrollbar-track-color, transparent);
+    }
   }
 }
 

package/core/styles/mixins/timetable-form.scss

@@ -0,0 +1,63 @@
+@use '../core/functions';
+@use '../core/mediaqueries';
+
+@mixin sbb-timetable-form {
+  --sbb-timetable-form-content-max-width: #{functions.px-to-rem-build(740)};
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--sbb-spacing-fixed-3x);
+  border-radius: var(--sbb-border-radius-4x);
+  padding-block: var(--sbb-spacing-fixed-10x) var(--sbb-spacing-responsive-l);
+  padding-inline: var(--sbb-spacing-fixed-5x);
+  background: linear-gradient(
+    to bottom,
+    var(--sbb-color-red) 0 #{functions.px-to-rem-build(178)},
+    var(--sbb-color-milk) #{functions.px-to-rem-build(178)} 100%
+  );
+
+  @include mediaqueries.mq($to: large) {
+    &:has(sbb-signet) {
+      padding-block-start: var(--sbb-spacing-fixed-4x);
+    }
+  }
+
+  sbb-signet {
+    width: var(--sbb-spacing-fixed-16x);
+    align-self: end;
+    margin-block-end: var(--sbb-spacing-fixed-2x);
+    margin-inline: 0;
+
+    @include mediaqueries.mq($from: large) {
+      position: absolute;
+      inset-block-start: var(--sbb-spacing-fixed-6x);
+      inset-inline-end: var(--sbb-spacing-fixed-6x);
+    }
+  }
+
+  & > * {
+    margin-inline: auto;
+    max-width: var(--sbb-timetable-form-content-max-width);
+    width: 100%;
+  }
+}
+
+@mixin timetable-form-block {
+  --sbb-form-field-focus-underline-z-index: 1;
+
+  width: 100%;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    border-block-end: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
+    inset-inline: var(--sbb-form-field-padding-inline);
+    inset-block-end: 0;
+  }
+
+  sbb-datepicker-toggle {
+    margin-inline-end: var(--sbb-spacing-fixed-6x);
+  }
+}

package/core/styles/standard-theme.scss

@@ -11,3 +11,4 @@
 @use './lists';
 @use './scrollbar';
 @use './table';
+@use './timetable-form';

package/core/styles/timetable-form.scss

@@ -0,0 +1,27 @@
+@use './core/functions';
+@use './core/mediaqueries';
+@use './mixins/timetable-form' as mixin;
+
+.sbb-timetable-form {
+  @include mixin.sbb-timetable-form;
+}
+
+sbb-timetable-form {
+  sbb-date-input {
+    min-width: #{functions.px-to-rem-build(133)}; // From FIGMA spec
+  }
+
+  .sbb-timetable-form-block {
+    @include mixin.timetable-form-block;
+  }
+
+  @include mediaqueries.mq($to: small) {
+    .sbb-timetable-form-mobile-block {
+      @include mixin.timetable-form-block;
+    }
+
+    .sbb-timetable-form-mobile-hidden {
+      display: none;
+    }
+  }
+}

package/core.css

@@ -1217,7 +1217,7 @@ html {
   opacity: 1;
 }
 
-sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
+:is(sbb-form-field, sbb-timetable-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;
@@ -1244,37 +1244,37 @@ sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input, sbb-t
   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, sbb-time-input)::placeholder {
+:is(sbb-form-field, sbb-timetable-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] :where(sbb-date-input, sbb-time-input)::after {
+:is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(input, select, textarea, sbb-select)::placeholder, :is(sbb-form-field, sbb-timetable-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] :where(sbb-date-input, sbb-time-input)::after {
+  :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(input, select, textarea, sbb-select)::placeholder, :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(sbb-date-input, sbb-time-input)::after {
     color: Canvas !important;
     -webkit-text-fill-color: Canvas !important;
   }
 }
-sbb-form-field:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
+:is(sbb-form-field, sbb-timetable-form-field):not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
   color: var(--sbb-color-granite);
   -webkit-text-fill-color: var(--sbb-color-granite);
 }
-sbb-form-field :where(select) {
+:is(sbb-form-field, sbb-timetable-form-field) :where(select) {
   vertical-align: middle;
 }
-sbb-form-field :where(select, sbb-select) {
+:is(sbb-form-field, sbb-timetable-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-time-input) {
+:is(sbb-form-field, sbb-timetable-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));
 }
-sbb-form-field :where(textarea) {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
@@ -1283,44 +1283,44 @@ sbb-form-field :where(textarea) {
   --sbb-scrollbar-track-color: transparent;
   --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar {
   width: var(--sbb-scrollbar-width);
   height: var(--sbb-scrollbar-width);
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar-corner {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-corner {
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar-thumb {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-thumb {
   background-color: var(--sbb-scrollbar-color, currentcolor);
   border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
   border-radius: var(--sbb-border-radius-4x);
   background-clip: padding-box;
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar-thumb:hover {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-thumb:hover {
   background-color: var(--sbb-scrollbar-color-hover, currentcolor);
   border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar-button, sbb-form-field :where(textarea)::-webkit-scrollbar-corner {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-button, :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-corner {
   display: none;
 }
 @supports not selector(::-webkit-scrollbar) {
-  sbb-form-field :where(textarea) {
+  :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
     scrollbar-width: var(--sbb-scrollbar-width-firefox);
     scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
   }
 }
-sbb-form-field :where(textarea) {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
   position: relative;
   resize: none;
   white-space: break-spaces;
   overflow-y: auto;
   min-height: calc(var(--sbb-typo-line-height-body-text) * 1em);
 }
-sbb-form-field[size=l] :where(textarea) {
+:is(sbb-form-field, sbb-timetable-form-field)[size=l] :where(textarea) {
   padding-block-end: 0.34375rem;
 }
-sbb-form-field[negative] :where(textarea) {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
@@ -1329,52 +1329,52 @@ sbb-form-field[negative] :where(textarea) {
   --sbb-scrollbar-track-color: transparent;
   --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar {
   width: var(--sbb-scrollbar-width);
   height: var(--sbb-scrollbar-width);
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-corner {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-corner {
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-thumb {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-thumb {
   background-color: var(--sbb-scrollbar-color, currentcolor);
   border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
   border-radius: var(--sbb-border-radius-4x);
   background-clip: padding-box;
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-thumb:hover {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-thumb:hover {
   background-color: var(--sbb-scrollbar-color-hover, currentcolor);
   border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-button, sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-corner {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-button, :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-corner {
   display: none;
 }
 @supports not selector(::-webkit-scrollbar) {
-  sbb-form-field[negative] :where(textarea) {
+  :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea) {
     scrollbar-width: var(--sbb-scrollbar-width-firefox);
     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(sbb-form-field, sbb-timetable-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-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-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(sbb-form-field, sbb-timetable-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-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-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(sbb-form-field, sbb-timetable-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-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)) {
     --sbb-form-field-border-color: LinkText !important;
     --sbb-form-field-text-color: LinkText !important;
   }