@sbb-esta/lyne-elements 3.3.2 → 3.4.0

package/core/i18n.js

@@ -1,95 +1,99 @@
-import { i18nAdditionalWagonInformationHeading as i, i18nArrival as a, i18nBlockedPassage as o, i18nBreadcrumbEllipsisButtonLabel as r, i18nCalendarDateSelection as t, i18nCalendarWeekNumber as l, i18nCheckboxRequired as u, i18nChipDelete as s, i18nChipGroupInputDescription as c, i18nClass as d, i18nClearInput as C, i18nCloseAlert as g, i18nCloseDialog as p, i18nCloseNavigation as D, i18nCloseNotification as P, i18nClosePopover as S, i18nCloseSidebar as b, i18nClosedCompartmentLabel as m, i18nCollapsed as T, i18nConnectionFrom as v, i18nConnectionRoundtrip as h, i18nConnectionTo as L, i18nCouchetteWagonLabel as x, i18nDateChangedTo as N, i18nDateInvalid as W, i18nDateMax as I, i18nDateMin as M, i18nDatePickerPlaceholder as y, i18nDeparture as R, i18nDialog as f, i18nDirection as F, i18nDurationDay as k, i18nDurationHour as B, i18nDurationMinute as Y, i18nExpanded as w, i18nFileSelectorButtonLabel as A, i18nFileSelectorCurrentlySelected as O, i18nFileSelectorDeleteFile as q, i18nFileSelectorSubtitleLabel as E, i18nFlipCard as G, i18nFromPlatform as H, i18nGoBack as Q, i18nInputRequired as j, i18nItemsPerPage as z, i18nLocomotiveLabel as J, i18nMapContainerButtonLabel as K, i18nMeansOfTransport as U, i18nNew as V, i18nNextDay as X, i18nNextMonth as Z, i18nNextPage as _, i18nNextYear as $, i18nNextYearRange as nn, i18nOccupancy as en, i18nOptional as an, i18nPage as on, i18nPreviousDay as rn, i18nPreviousMonth as tn, i18nPreviousPage as ln, i18nPreviousYear as un, i18nPreviousYearRange as sn, i18nRealTimeInfo as cn, i18nRestaurantWagonLabel as dn, i18nReverseCard as Cn, i18nSector as gn, i18nSectorShort as pn, i18nSelectNextDay as Dn, i18nSelectPreviousDay as Pn, i18nSelectedPage as Sn, i18nSelectionRequired as bn, i18nShowCalendar as mn, i18nSleepingWagonLabel as Tn, i18nSupersaver as vn, i18nTargetOpensInNewWindow as hn, i18nTimeInputChange as Ln, i18nTimeInvalid as xn, i18nTimeMax as Nn, i18nTimeMaxLength as Wn, i18nToday as In, i18nTrain as Mn, i18nTrains as yn, i18nTransferProcedure as Rn, i18nTransferProcedures as fn, i18nTravelhints as Fn, i18nTripDuration as kn, i18nTripQuayChange as Bn, i18nWagonLabel as Yn, i18nWagonLabelNumber as wn, i18nWagonsLabel as An, i18nWalkingDistanceArrival as On, i18nWalkingDistanceDeparture as qn, i18nYearMonthSelection as En } from "./i18n/i18n.js";
+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";
 export {
   i as i18nAdditionalWagonInformationHeading,
   a as i18nArrival,
   o as i18nBlockedPassage,
-  r as i18nBreadcrumbEllipsisButtonLabel,
-  t as i18nCalendarDateSelection,
+  t as i18nBreadcrumbEllipsisButtonLabel,
+  r as i18nCalendarDateSelection,
   l as i18nCalendarWeekNumber,
   u as i18nCheckboxRequired,
-  s as i18nChipDelete,
-  c as i18nChipGroupInputDescription,
+  c as i18nChipDelete,
+  s as i18nChipGroupInputDescription,
   d as i18nClass,
-  C as i18nClearInput,
-  g as i18nCloseAlert,
-  p as i18nCloseDialog,
+  g as i18nClearInput,
+  p as i18nCloseAlert,
+  C as i18nCloseDialog,
   D as i18nCloseNavigation,
-  P as i18nCloseNotification,
-  S as i18nClosePopover,
-  b as i18nCloseSidebar,
+  S as i18nCloseNotification,
+  b as i18nClosePopover,
+  P as i18nCloseSidebar,
   m as i18nClosedCompartmentLabel,
   T as i18nCollapsed,
   v as i18nConnectionFrom,
-  h as i18nConnectionRoundtrip,
-  L as i18nConnectionTo,
+  L as i18nConnectionRoundtrip,
+  h as i18nConnectionTo,
   x as i18nCouchetteWagonLabel,
-  N as i18nDateChangedTo,
-  W as i18nDateInvalid,
-  I as i18nDateMax,
-  M as i18nDateMin,
-  y as i18nDatePickerPlaceholder,
-  R as i18nDeparture,
-  f as i18nDialog,
-  F as i18nDirection,
+  M as i18nDateChangedTo,
+  N 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,
-  Y as i18nDurationMinute,
-  w as i18nExpanded,
-  A as i18nFileSelectorButtonLabel,
-  O as i18nFileSelectorCurrentlySelected,
-  q as i18nFileSelectorDeleteFile,
-  E as i18nFileSelectorSubtitleLabel,
-  G as i18nFlipCard,
-  H as i18nFromPlatform,
-  Q as i18nGoBack,
-  j as i18nInputRequired,
-  z as i18nItemsPerPage,
-  J as i18nLocomotiveLabel,
-  K as i18nMapContainerButtonLabel,
-  U as i18nMeansOfTransport,
-  V as i18nNew,
-  X as i18nNextDay,
-  Z as i18nNextMonth,
-  _ as i18nNextPage,
-  $ as i18nNextYear,
-  nn as i18nNextYearRange,
-  en as i18nOccupancy,
-  an as i18nOptional,
-  on as i18nPage,
-  rn as i18nPreviousDay,
-  tn as i18nPreviousMonth,
-  ln as i18nPreviousPage,
-  un as i18nPreviousYear,
-  sn as i18nPreviousYearRange,
-  cn as i18nRealTimeInfo,
-  dn as i18nRestaurantWagonLabel,
-  Cn as i18nReverseCard,
-  gn as i18nSector,
-  pn as i18nSectorShort,
-  Dn as i18nSelectNextDay,
-  Pn as i18nSelectPreviousDay,
-  Sn as i18nSelectedPage,
-  bn as i18nSelectionRequired,
-  mn as i18nShowCalendar,
-  Tn as i18nSleepingWagonLabel,
-  vn as i18nSupersaver,
-  hn as i18nTargetOpensInNewWindow,
-  Ln as i18nTimeInputChange,
-  xn as i18nTimeInvalid,
-  Nn as i18nTimeMax,
-  Wn as i18nTimeMaxLength,
-  In as i18nToday,
-  Mn as i18nTrain,
-  yn as i18nTrains,
-  Rn as i18nTransferProcedure,
-  fn as i18nTransferProcedures,
-  Fn as i18nTravelhints,
-  kn as i18nTripDuration,
-  Bn as i18nTripQuayChange,
-  Yn as i18nWagonLabel,
-  wn as i18nWagonLabelNumber,
-  An as i18nWagonsLabel,
-  On as i18nWalkingDistanceArrival,
-  qn as i18nWalkingDistanceDeparture,
-  En as i18nYearMonthSelection
+  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
 };

package/core/mixins/element-internals-mixin.js

@@ -1,5 +1,5 @@
-import { isServer as E } from "lit";
-const g = !E && !CSS.supports("selector(:state(loading))") ? class extends Set {
+import { isServer as g } from "lit";
+const E = !g && !CSS.supports("selector(:state(loading))") ? class extends Set {
   constructor(e) {
     super(), this._host = e, this._host.addController(this);
   }
@@ -19,7 +19,7 @@ const g = !E && !CSS.supports("selector(:state(loading))") ? class extends Set {
     this._host.toggleAttribute(`state--${e}`, a);
   }
 } : null;
-if (!E) {
+if (!g) {
   let d = 0;
   const e = (l) => l.shadowRoot?.host ?? (l instanceof Element ? l : (() => {
     throw new Error("Unable to resolve related element! This should never happen.");
@@ -81,7 +81,7 @@ if (!E) {
             t = t?.filter((r, h, b) => b.indexOf(r) === h) ?? null;
             const n = i.get(s);
             if (n?.observer?.disconnect(), t === null)
-              n && (delete n.elements[l.name], Object.keys(n).length ? n.elements?.length && Object.values(n.elements).reduce((r, h) => r.concat(h)).forEach((r) => n.observer.observe(r, a)) : i.delete(s));
+              n && (delete n.elements[l.name], Object.keys(n.elements).length ? Object.values(n.elements).reduce((r, h) => r.concat(h)).forEach((r) => n.observer.observe(r, a)) : i.delete(s));
             else if (n)
               n.elements[l.name] = t, f(s, o, n.elements), Object.values(n.elements).reduce((r, h) => r.concat(h)).forEach((r) => n.observer.observe(r, a));
             else {
@@ -105,8 +105,8 @@ const y = (d, ...e) => {
 }, S = (d) => {
   class e extends d {
     constructor(...c) {
-      super(...c), this.internals = this.attachInternals(), g && Object.defineProperty(this.internals, "states", {
-        value: new g(this),
+      super(...c), this.internals = this.attachInternals(), E && Object.defineProperty(this.internals, "states", {
+        value: new E(this),
         writable: !1,
         configurable: !1,
         enumerable: !1

package/core/mixins/form-associated-input-mixin.d.ts

@@ -4,6 +4,7 @@ import { AbstractConstructor } from './constructor.js';
 import { FormRestoreReason, FormRestoreState } from './form-associated-mixin.js';
 declare const SbbFormAssociatedInputMixinType_base: AbstractConstructor<import('./required-mixin.js').SbbRequiredMixinType> & AbstractConstructor<import('./form-associated-mixin.js').SbbFormAssociatedMixinType> & AbstractConstructor<import('./element-internals-mixin.js').SbbElementInternalsMixinType> & typeof LitElement & import('./element-internals-mixin.js').SbbElementInternalsConstructor;
 export declare abstract class SbbFormAssociatedInputMixinType extends SbbFormAssociatedInputMixinType_base {
+    static readonly formFieldAssociated = true;
     set value(value: string);
     get value(): string;
     set disabled(value: boolean);

package/core/mixins/form-associated-input-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-associated-input-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-input-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,UAAU,EAGhB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAEtB,MAAM,4BAA4B,CAAC;;AAIpC,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,+BAAgC,SAAQ,oCAErE;IACC,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE;IAChC,IAAW,KAAK,IAAI,MAAM,CAAC;IAE3B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE;IACtC,IAAW,WAAW,IAAI,MAAM,CAAC;IAEjC;;;;OAIG;IACI,MAAM,IAAI,IAAI;IAEd,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAEhG,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IACjD,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;CAC3C;AAgBD;;GAEG;AAEH,eAAO,MAAM,2BAA2B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACnF,YAAY,CAAC,KACZ,mBAAmB,CAAC,+BAA+B,CAAC,GAAG,CAkXzD,CAAC"}
+{"version":3,"file":"form-associated-input-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-input-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,UAAU,EAGhB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAEtB,MAAM,4BAA4B,CAAC;;AAIpC,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,+BAAgC,SAAQ,oCAErE;IACC,gBAAuB,mBAAmB,QAAQ;IAElD,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE;IAChC,IAAW,KAAK,IAAI,MAAM,CAAC;IAE3B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE;IACtC,IAAW,WAAW,IAAI,MAAM,CAAC;IAEjC;;;;OAIG;IACI,MAAM,IAAI,IAAI;IAEd,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAEhG,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IACjD,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;CAC3C;AAgBD;;GAEG;AAEH,eAAO,MAAM,2BAA2B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACnF,YAAY,CAAC,KACZ,mBAAmB,CAAC,+BAA+B,CAAC,GAAG,CAqXzD,CAAC"}

package/core/mixins/form-associated-input-mixin.js

@@ -30,7 +30,7 @@ const k = () => {
      * The value of the input. Reflects the current text value of this input.
      */
     set value(e) {
-      this._value = this._cleanText(e), this.hasUpdated && (this.innerHTML = this._value);
+      this._value = this._cleanText(e), this.hasUpdated && (this.innerHTML = this._value), this.dispatchEvent(new Event("displayvaluechange", { bubbles: !0, composed: !0 }));
     }
     get value() {
       return this._value ?? "";
@@ -167,7 +167,7 @@ const k = () => {
     } }, metadata: e }, null, n), r(s, null, h, { kind: "setter", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, set: (t, i) => {
       t.placeholder = i;
     } }, metadata: e }, null, n), r(s, null, u, { kind: "method", name: "_cleanChildren", static: !1, private: !1, access: { has: (t) => "_cleanChildren" in t, get: (t) => t._cleanChildren }, metadata: e }, null, n), e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), s.role = "textbox", s;
+  })(), s.role = "textbox", s.formFieldAssociated = !0, s;
 })();
 export {
   H as SbbFormAssociatedInputMixin

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,4 @@
-@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';
@@ -33,6 +33,39 @@
     // Overlay
     --sbb-overlay-default-z-index: 1000;
 
+    // Title
+    --sbb-title-font-size-level-1: var(--sbb-font-size-title-1);
+    --sbb-title-font-size-level-2: var(--sbb-font-size-title-2);
+    --sbb-title-font-size-level-3: var(--sbb-font-size-title-3);
+    --sbb-title-font-size-level-4: var(--sbb-font-size-title-4);
+    --sbb-title-font-size-level-5: var(--sbb-font-size-title-5);
+    --sbb-title-font-size-level-6: var(--sbb-font-size-title-6);
+    --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-m);
+    --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-l);
+    --sbb-title-margin-block-end-level-1: var(--sbb-spacing-responsive-s);
+    --sbb-title-margin-block-end-level-2: var(--sbb-spacing-responsive-xxxs);
+    --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
+    --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-3x);
+    --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-2x);
+    --sbb-title-margin-block-end-level-6: var(--sbb-spacing-fixed-1x);
+
+    &.sbb-lean {
+      --sbb-title-font-size-level-1: var(--sbb-font-size-title-2);
+      --sbb-title-font-size-level-2: var(--sbb-font-size-title-3);
+      --sbb-title-font-size-level-3: var(--sbb-font-size-title-4);
+      --sbb-title-font-size-level-4: var(--sbb-font-size-title-5);
+      --sbb-title-font-size-level-5: var(--sbb-font-size-title-6);
+      --sbb-title-font-size-level-6: var(--sbb-font-size-title-7);
+      --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-s);
+      --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-s);
+      --sbb-title-margin-block-end-level-1: var(--sbb-spacing-fixed-3x);
+      --sbb-title-margin-block-end-level-2: var(--sbb-spacing-fixed-3x);
+      --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
+      --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-2x);
+      --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-1x);
+      --sbb-title-margin-block-end-level-6: 0;
+    }
+
     // Infinity border radius, can be used to achieve rounded border on start and end
     // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
     --sbb-border-radius-infinity: 100000em;

package/core/styles/mixins/typo.scss

@@ -2,86 +2,133 @@
 // Typo: Title Style Mixins
 // ----------------------------------------------------------------------------------------------------
 
-@mixin title($exclude-spacing: false) {
-  --sbb-title-line-height: var(--sbb-typo-line-height-titles);
-  --sbb-title-margin-block-start: 0;
-  --sbb-title-margin-block-end: 0;
-
-  @if not($exclude-spacing) {
-    --sbb-title-margin-block-start: var(--sbb-spacing-responsive-m);
-    --sbb-title-margin-block-end: var(--sbb-spacing-responsive-s);
-  }
-
-  margin: 0;
-  margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);
+@mixin title-rules {
+  margin-block: var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);
+  margin-inline: 0;
   font-family: var(--sbb-typo-font-family);
   font-weight: bold;
-  line-height: var(--sbb-title-line-height);
+  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));
   letter-spacing: var(--sbb-typo-letter-spacing-titles);
   font-size: var(--sbb-title-font-size);
 }
 
-@mixin title-1($exclude-spacing: false) {
-  @include title($exclude-spacing);
+@mixin title--level-1 {
+  --sbb-title-font-size: var(--sbb-title-font-size-level-1);
+}
 
-  --sbb-title-font-size: var(--sbb-font-size-title-1);
+@mixin title--level-1-spacing {
+  --sbb-title-margin-block-start: var(--sbb-title-margin-block-start-level-1);
+  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-1);
 }
 
-@mixin title-2($exclude-spacing: false) {
-  @include title($exclude-spacing);
+@mixin title--level-2 {
+  --sbb-title-font-size: var(--sbb-title-font-size-level-2);
+}
 
-  --sbb-title-font-size: var(--sbb-font-size-title-2);
+@mixin title--level-2-spacing {
+  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
+  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-2);
+}
 
-  @if not($exclude-spacing) {
-    --sbb-title-margin-block-end: var(--sbb-spacing-responsive-xxxs);
-  }
+@mixin title--level-3 {
+  --sbb-title-font-size: var(--sbb-title-font-size-level-3);
 }
 
-@mixin title-3($exclude-spacing: false) {
-  @include title($exclude-spacing);
+@mixin title--level-3-spacing {
+  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
+  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-3);
+}
+
+@mixin title--level-4 {
+  --sbb-title-font-size: var(--sbb-title-font-size-level-4);
+}
+
+@mixin title--level-4-spacing {
+  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
+  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-4);
+}
+
+@mixin title--level-5 {
+  --sbb-title-font-size: var(--sbb-title-font-size-level-5);
+}
+
+@mixin title--level-5-spacing {
+  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
+  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-5);
+}
+
+@mixin title--level-6 {
+  --sbb-title-font-size: var(--sbb-title-font-size-level-6);
+  --sbb-title-line-height: var(--sbb-typo-line-height-body-text);
+}
 
-  --sbb-title-font-size: var(--sbb-font-size-title-3);
+@mixin title--level-6-spacing {
+  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
+  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-6);
+}
 
+@mixin title-1($exclude-spacing: false) {
+  @include title--level-1;
   @if not($exclude-spacing) {
-    --sbb-title-margin-block-end: var(--sbb-spacing-responsive-xxxs);
+    @include title--level-1-spacing;
   }
+  @include title-rules;
 }
 
-@mixin title-4($exclude-spacing: false) {
-  @include title($exclude-spacing);
+@mixin title-2($exclude-spacing: false) {
+  @include title--level-2;
+  @if not($exclude-spacing) {
+    @include title--level-2-spacing;
+  }
+  @include title-rules;
+}
 
-  --sbb-title-font-size: var(--sbb-font-size-title-4);
+@mixin title-3($exclude-spacing: false) {
+  @include title--level-3;
+  @if not($exclude-spacing) {
+    @include title--level-3-spacing;
+  }
+  @include title-rules;
+}
 
+@mixin title-4($exclude-spacing: false) {
+  @include title--level-4;
   @if not($exclude-spacing) {
-    --sbb-title-margin-block-end: var(--sbb-spacing-fixed-3x);
+    @include title--level-4-spacing;
   }
+  @include title-rules;
 }
 
 @mixin title-5($exclude-spacing: false) {
-  @include title($exclude-spacing);
-
-  --sbb-title-font-size: var(--sbb-font-size-title-5);
-
+  @include title--level-5;
   @if not($exclude-spacing) {
-    --sbb-title-margin-block-end: var(--sbb-spacing-fixed-2x);
+    @include title--level-5-spacing;
   }
+  @include title-rules;
 }
 
 @mixin title-6($exclude-spacing: false) {
-  @include title($exclude-spacing);
-
-  --sbb-title-font-size: var(--sbb-font-size-title-6);
-  --sbb-title-line-height: var(--sbb-typo-line-height-body-text);
-
+  @include title--level-6;
   @if not($exclude-spacing) {
-    --sbb-title-margin-block-end: var(--sbb-spacing-fixed-1x);
+    @include title--level-6-spacing;
   }
+  @include title-rules;
 }
 
 @mixin title--negative {
   --sbb-title-text-color-normal: var(--sbb-color-milk);
 }
 
+// @deprecated, non-standard values, title rules combined with title level mixins are the alternative
+@mixin title($exclude-spacing: false) {
+  @if not($exclude-spacing) {
+    --sbb-title-margin-block-start: var(--sbb-spacing-responsive-m);
+    --sbb-title-margin-block-end: var(--sbb-spacing-responsive-s);
+  }
+
+  @include title-rules;
+}
+
 // ----------------------------------------------------------------------------------------------------
 // Typo: Text Style Mixins
 // ----------------------------------------------------------------------------------------------------