@sbb-esta/lyne-elements 4.3.1 → 4.4.0

package/core/datetime/date-adapter.js

@@ -1,5 +1,14 @@
-const h = 7, o = 4, D = 4, c = 12, g = 24, l = /(0?[1-9]|[12][0-9]|3[01])[.,\\/\-\s](0?[1-9]|1[0-2])[.,\\/\-\s]([0-9]{1,4}$)?/, u = /^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-3][0-9])$/;
-class O {
+const l = 7, f = 4, u = 4, D = 12, g = 24, h = /(0?[1-9]|[12][0-9]|3[01])[.,\\/\-\s](0?[1-9]|1[0-2])[.,\\/\-\s]([0-9]{1,4}$)?/, o = /^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-3][0-9])$/;
+class d {
+  /**
+   * @param cutoffYearOffset The threshold on whether a two-digit year
+   * should be treated as belonging to 2000 or 1900. e.g. with 15 (default)
+   * the current year plus 15 will be treated as belonging to 2000, and the rest to 1900.
+   * So e.g. with the current year 2025, 40 will be treated as 2040, while 41 will be treated as 1941.
+   */
+  constructor(t = 15) {
+    this._cutoffYearOffset = t;
+  }
   /**
    * Attempts to deserialize a value to a valid date object. This is different from parsing in that
    * deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601
@@ -11,6 +20,31 @@ class O {
   deserialize(t) {
     return t == null || this.isDateInstance(t) && this.isValid(t) ? t : this.invalid();
   }
+  /**
+   * Get the given string as Date.
+   * @param value The date in the format DD.MM.YYYY.
+   */
+  parse(t) {
+    if (!t)
+      return null;
+    let e = null;
+    const s = t.match(o);
+    try {
+      e = s ? this.createDate(+s[1], +s[2], +s[3]) : null;
+    } catch {
+    }
+    if (this.isValid(e))
+      return e;
+    const r = t.replace(/\D/g, " ").trim()?.match(h);
+    if (!r || r.index !== 0 || r.length <= 2 || r.some((n) => n === void 0) || !this.isValid(this.createDate(+r[3], +r[2], +r[1])))
+      return null;
+    let i = +r[3];
+    if (typeof i == "number" && i < 100 && i >= 0) {
+      const n = this.getYear(this.today()) - 2e3 + this._cutoffYearOffset;
+      i = i <= n ? 2e3 + i : 1900 + i;
+    }
+    return this.createDate(i, +r[2], +r[1]);
+  }
   /**
    * Format the given date as string.
    * @param date The date to format.
@@ -19,23 +53,23 @@ class O {
   format(t, e) {
     if (!this.isValid(t))
       return "";
-    const s = /* @__PURE__ */ new Date(this.toIso8601(t) + "T00:00:00"), i = new Intl.DateTimeFormat("de-CH", {
+    const s = /* @__PURE__ */ new Date(this.toIso8601(t) + "T00:00:00"), a = new Intl.DateTimeFormat("de-CH", {
       day: "2-digit",
       month: "2-digit",
       year: "numeric"
     });
     if (e?.weekdayStyle === "none")
-      return i.format(s);
-    const a = e?.weekdayStyle ?? "short";
-    let r = this.getDayOfWeekNames(a)[this.getDayOfWeek(t)];
-    return r = r.charAt(0).toUpperCase() + r.substring(1), a === "short" && (r = r.substring(0, 2)), `${r}, ${i.format(s)}`;
+      return a.format(s);
+    const r = e?.weekdayStyle ?? "short";
+    let i = this.getDayOfWeekNames(r)[this.getDayOfWeek(t)];
+    return i = i.charAt(0).toUpperCase() + i.substring(1), r === "short" && (i = i.substring(0, 2)), `${i}, ${a.format(s)}`;
   }
   /**
    * Get the given date as ISO String.
    * @param date The date to convert to ISO String.
    */
   toIso8601(t) {
-    const e = (s, i = 2) => `${s}`.padStart(i, "0");
+    const e = (s, a = 2) => `${s}`.padStart(a, "0");
     return `${e(this.getYear(t), 4)}-${e(this.getMonth(t))}-${e(this.getDate(t))}`;
   }
   /**
@@ -73,8 +107,8 @@ class O {
    */
   sameDate(t, e) {
     if (t && e) {
-      const s = this.isValid(t), i = this.isValid(e);
-      return s && i ? !this.compareDate(t, e) : s == i;
+      const s = this.isValid(t), a = this.isValid(e);
+      return s && a ? !this.compareDate(t, e) : s == a;
     }
     return t == e;
   }
@@ -91,12 +125,12 @@ class O {
   }
 }
 export {
-  h as DAYS_PER_ROW,
-  O as DateAdapter,
-  l as FORMAT_DATE,
-  u as ISO8601_FORMAT_DATE,
-  c as MONTHS_PER_PAGE,
-  o as MONTHS_PER_ROW,
+  l as DAYS_PER_ROW,
+  d as DateAdapter,
+  h as FORMAT_DATE,
+  o as ISO8601_FORMAT_DATE,
+  D as MONTHS_PER_PAGE,
+  f as MONTHS_PER_ROW,
   g as YEARS_PER_PAGE,
-  D as YEARS_PER_ROW
+  u as YEARS_PER_ROW
 };

package/core/datetime/native-date-adapter.js

@@ -1,145 +1,120 @@
-import { SbbLanguageController as i } from "../controllers.js";
-import { DateAdapter as u, ISO8601_FORMAT_DATE as l, FORMAT_DATE as h } from "./date-adapter.js";
-const c = /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;
-class D extends u {
-  constructor(t = 15) {
-    super(), this._cutoffYearOffset = t;
-  }
+import { SbbLanguageController as a } from "../controllers.js";
+import { DateAdapter as s } from "./date-adapter.js";
+const i = /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;
+class u extends s {
   /** Gets the year of the input date. */
-  getYear(t) {
-    return t.getFullYear();
+  getYear(e) {
+    return e.getFullYear();
   }
   /** Gets the month of the input date. */
-  getMonth(t) {
-    return t.getMonth() + 1;
+  getMonth(e) {
+    return e.getMonth() + 1;
   }
   /** Gets the day of the input date. */
-  getDate(t) {
-    return t.getDate();
+  getDate(e) {
+    return e.getDate();
   }
   /** Gets the day of the week of the input date. */
-  getDayOfWeek(t) {
-    return t.getDay();
+  getDayOfWeek(e) {
+    return e.getDay();
   }
   /** Gets the date in the local format. */
-  getAccessibilityFormatDate(t) {
-    const e = {
+  getAccessibilityFormatDate(e) {
+    const t = {
       year: "numeric",
       month: "long",
       day: "numeric"
     };
-    return new Intl.DateTimeFormat(i.current, e).format(new Date(t));
+    return new Intl.DateTimeFormat(a.current, t).format(new Date(e));
   }
   /**
    * Creates an array of strings with length = 12, filled with the name of the months starting from January, in the document language.
    * @param style See `month` in `DateTimeFormatOptions`: `long` for full name, `short` for short name, `narrow` for single letter,
    * E.g., with January in en-gb: `long` returns "January", `short` returns "Jan", `narrow` returns "J".
    */
-  getMonthNames(t) {
-    const e = new Intl.DateTimeFormat(i.current, { month: t });
-    return this._range(12, (r) => e.format(new Date(2017, r, 1)));
+  getMonthNames(e) {
+    const t = new Intl.DateTimeFormat(a.current, { month: e });
+    return this._range(12, (r) => t.format(new Date(2017, r, 1)));
   }
   /** Creates a string array with length = 31, filled with the days in a month, starting from 1. */
   getDateNames() {
-    const t = new Intl.DateTimeFormat(i.current, { day: "numeric" });
-    return this._range(31, (e) => t.format(new Date(2017, 0, e + 1)));
+    const e = new Intl.DateTimeFormat(a.current, { day: "numeric" });
+    return this._range(31, (t) => e.format(new Date(2017, 0, t + 1)));
   }
   /**
    * Creates a string array with length = 7, filled with the name of the days in a week starting from Sunday, in the document language.
    * @param style See `weekday` in `DateTimeFormatOptions` - 'long' for full name, 'short' for short name, 'narrow' for single letter;
    * E.g., with Monday in en-gb: `long` returns "Monday", `short` returns "Mon", `narrow` returns "M".
    */
-  getDayOfWeekNames(t) {
-    const e = new Intl.DateTimeFormat(i.current, { weekday: t });
-    return this._range(7, (r) => e.format(new Date(2017, 0, r + 1)));
+  getDayOfWeekNames(e) {
+    const t = new Intl.DateTimeFormat(a.current, { weekday: e });
+    return this._range(7, (r) => t.format(new Date(2017, 0, r + 1)));
   }
   /** Defines which is the first day of the week (0: sunday; 1: monday; etc.). */
   getFirstDayOfWeek() {
     return 1;
   }
   /** Calculates the number of days in a month given the year and the month. */
-  getNumDaysInMonth(t) {
-    return this.getDate(this._createDateWithOverflow(this.getYear(t), this.getMonth(t), 0));
+  getNumDaysInMonth(e) {
+    return this.getDate(this._createDateWithOverflow(this.getYear(e), this.getMonth(e), 0));
   }
   /** Creates today's date. */
   today() {
     return new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
   }
   /** Creates a new date, given day, month and year; the method doesn't allow date's overflow. */
-  createDate(t, e, r) {
-    if (e < 1 || e > 12)
-      throw Error(`Invalid month index "${e}". Month index has to be between 1 and 12.`);
+  createDate(e, t, r) {
+    if (t < 1 || t > 12)
+      throw Error(`Invalid month "${t}". Month has to be between 1 and 12.`);
     if (r < 1)
-      throw Error(`Invalid date "${r}". Date has to be greater than 0.`);
-    const a = this._createDateWithOverflow(t, e - 1, r);
-    if (a.getMonth() + 1 !== e)
-      throw Error(`Invalid date "${r}" for month with index "${e}".`);
-    return a;
+      throw Error(`Invalid day "${r}". Day has to be greater than 0.`);
+    const n = this._createDateWithOverflow(e, t - 1, r);
+    if (n.getMonth() + 1 !== t)
+      throw Error(`Invalid day "${r}" for month "${t}".`);
+    return n;
   }
   /** Checks whether the given `obj` is a Date. */
-  isDateInstance(t) {
-    return t instanceof Date;
+  isDateInstance(e) {
+    return e instanceof Date;
   }
   /** Checks whether the given `date` is a valid Date. */
-  isValid(t) {
-    return !!t && !isNaN(t.valueOf());
+  isValid(e) {
+    return !!e && !isNaN(e.valueOf());
   }
   /** Creates a new date by cloning the given one. */
-  clone(t) {
-    return new Date(t.valueOf());
+  clone(e) {
+    return new Date(e.valueOf());
   }
   /**
    * Creates a new date adding the number of provided `years` to the provided `date`.
    * @param date The starting date.
    * @param years The number of years to add.
    */
-  addCalendarYears(t, e) {
-    return this.addCalendarMonths(t, e * 12);
+  addCalendarYears(e, t) {
+    return this.addCalendarMonths(e, t * 12);
   }
   /**
    * Creates a new date adding the number of provided `months` to the provided `date`.
    * If the calculated month has fewer days than the original one, the date is set to the last day of the month.
    * E.g., with `date` = new Date(2022, 0, 31) and `months` = 1, it returns new Date(2022, 1, 28).
    */
-  addCalendarMonths(t, e) {
-    const r = t.getMonth() + e, a = new Date(t.getFullYear(), r, 1, 0, 0, 0, 0), n = this.getNumDaysInMonth(a);
-    return new Date(this.clone(t).setMonth(r, Math.min(n, t.getDate())));
+  addCalendarMonths(e, t) {
+    const r = e.getMonth() + t, n = new Date(e.getFullYear(), r, 1, 0, 0, 0, 0), o = this.getNumDaysInMonth(n);
+    return new Date(this.clone(e).setMonth(r, Math.min(o, e.getDate())));
   }
   /** Creates a new date by adding the number of provided `days` to the provided `date`. */
-  addCalendarDays(t, e) {
-    const r = t.getDate() + e;
-    return new Date(t.getFullYear(), t.getMonth(), r, 0, 0, 0, 0);
+  addCalendarDays(e, t) {
+    const r = e.getDate() + t;
+    return new Date(e.getFullYear(), e.getMonth(), r, 0, 0, 0, 0);
   }
   /** Creates a Date from a valid input (Date or ISO string). */
-  deserialize(t) {
-    if (typeof t == "string")
-      if (t) {
-        if (c.test(t))
-          return this.getValidDateOrNull(new Date(t.includes("T") ? t : t + "T00:00:00"));
+  deserialize(e) {
+    if (typeof e == "string")
+      if (e) {
+        if (i.test(e))
+          return this.getValidDateOrNull(new Date(e.includes("T") ? e : e + "T00:00:00"));
       } else return null;
-    return super.deserialize(t);
-  }
-  /** Returns the right format for the `valueAsDate` property. */
-  parse(t) {
-    if (!t)
-      return null;
-    let e = null;
-    const r = t.match(l);
-    try {
-      e = r ? this.createDate(+r[1], +r[2], +r[3]) : null;
-    } catch {
-    }
-    if (this.isValid(e))
-      return e;
-    const n = t.replace(/\D/g, " ").trim()?.match(h);
-    if (!n || n.index !== 0 || n.length <= 2 || n.some((o) => o === void 0) || !this.isValid(this.createDate(+n[3], +n[2], +n[1])))
-      return null;
-    let s = +n[3];
-    if (typeof s == "number" && s < 100 && s >= 0) {
-      const o = this.today().getFullYear() - 2e3 + this._cutoffYearOffset;
-      s = s <= o ? 2e3 + s : 1900 + s;
-    }
-    return new Date(s, +n[2] - 1, +n[1]);
+    return super.deserialize(e);
   }
   invalid() {
     return /* @__PURE__ */ new Date(NaN);
@@ -149,17 +124,17 @@ class D extends u {
    * @param length The length of the array to be created.
    * @param valueFunction The function of array's index used to fill the array.
    */
-  _range(t, e) {
-    return Array.from({ length: t }).map((r, a) => e(a));
+  _range(e, t) {
+    return Array.from({ length: e }).map((r, n) => t(n));
   }
   /** Creates a date but allows the month and date to overflow. */
-  _createDateWithOverflow(t, e, r) {
-    const a = new Date(t, e, r);
-    return t >= 0 && t < 100 && a.setFullYear(this.getYear(a) - 1900), a;
+  _createDateWithOverflow(e, t, r) {
+    const n = new Date(e, t, r);
+    return e >= 0 && e < 100 && n.setFullYear(this.getYear(n) - 1900), n;
   }
 }
-const m = new D();
+const g = new u();
 export {
-  D as NativeDateAdapter,
-  m as defaultDateAdapter
+  u as NativeDateAdapter,
+  g as defaultDateAdapter
 };

package/core/datetime/temporal-date-adapter.js

@@ -0,0 +1,139 @@
+import { SbbLanguageController as a } from "../controllers.js";
+import { DateAdapter as o } from "./date-adapter.js";
+const i = /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;
+if (typeof Temporal != "object")
+  throw new Error("Temporal is not available in the current environment. Please make sure to include the temporal polyfill.");
+class l extends o {
+  /** Gets the year of the input date. */
+  getYear(e) {
+    return e.year;
+  }
+  /** Gets the month of the input date. */
+  getMonth(e) {
+    return e.month;
+  }
+  /** Gets the day of the input date. */
+  getDate(e) {
+    return e.day;
+  }
+  /** Gets the day of the week of the input date. */
+  getDayOfWeek(e) {
+    return e.dayOfWeek % 7;
+  }
+  /** Gets the date in the local format. */
+  getAccessibilityFormatDate(e) {
+    const r = {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    };
+    return this.deserialize(e).toLocaleString(a.current, r);
+  }
+  /**
+   * Creates an array of strings with length = 12, filled with the name of the months starting from January, in the document language.
+   * @param style See `month` in `DateTimeFormatOptions`: `long` for full name, `short` for short name, `narrow` for single letter,
+   * E.g., with January in en-gb: `long` returns "January", `short` returns "Jan", `narrow` returns "J".
+   */
+  getMonthNames(e) {
+    const r = new Intl.DateTimeFormat(a.current, { month: e });
+    return this._range(12, (t) => r.format(Temporal.PlainDate.from({ year: 2017, month: t + 1, day: 1 })));
+  }
+  /** Creates a string array with length = 31, filled with the days in a month, starting from 1. */
+  getDateNames() {
+    const e = new Intl.DateTimeFormat(a.current, { day: "numeric" });
+    return this._range(31, (r) => e.format(Temporal.PlainDate.from({ year: 2017, month: 1, day: r + 1 })));
+  }
+  /**
+   * Creates a string array with length = 7, filled with the name of the days in a week starting from Sunday, in the document language.
+   * @param style See `weekday` in `DateTimeFormatOptions` - 'long' for full name, 'short' for short name, 'narrow' for single letter;
+   * E.g., with Monday in en-gb: `long` returns "Monday", `short` returns "Mon", `narrow` returns "M".
+   */
+  getDayOfWeekNames(e) {
+    const r = new Intl.DateTimeFormat(a.current, { weekday: e });
+    return this._range(7, (t) => r.format(Temporal.PlainDate.from({ year: 2017, month: 1, day: t + 1 })));
+  }
+  /** Defines which is the first day of the week (0: sunday; 1: monday; etc.). */
+  getFirstDayOfWeek() {
+    return 1;
+  }
+  /** Calculates the number of days in a month given the year and the month. */
+  getNumDaysInMonth(e) {
+    return e.daysInMonth;
+  }
+  /** Creates today's date. */
+  today() {
+    return Temporal.Now.plainDateISO();
+  }
+  /** Creates a new date, given day, month and year; the method doesn't allow date's overflow. */
+  createDate(e, r, t) {
+    if (r < 1 || r > 12)
+      throw Error(`Invalid month "${r}". Month has to be between 1 and 12.`);
+    if (t < 1)
+      throw Error(`Invalid day "${t}". Day has to be greater than 0.`);
+    try {
+      return Temporal.PlainDate.from({ year: e, month: r, day: t }, { overflow: "reject" });
+    } catch {
+      throw Error(`Invalid date "${t}" for month with index "${r}".`);
+    }
+  }
+  /** Checks whether the given `obj` is a Temporal.PlainDate. */
+  isDateInstance(e) {
+    return e instanceof Temporal.PlainDate;
+  }
+  /** Checks whether the given `date` is a valid Temporal.PlainDate. */
+  isValid(e) {
+    return this.isDateInstance(e);
+  }
+  /** Creates a new date by cloning the given one. */
+  clone(e) {
+    return Temporal.PlainDate.from(e);
+  }
+  /**
+   * Creates a new date adding the number of provided `years` to the provided `date`.
+   * @param date The starting date.
+   * @param years The number of years to add.
+   */
+  addCalendarYears(e, r) {
+    return e.add({ years: r });
+  }
+  /**
+   * Creates a new date adding the number of provided `months` to the provided `date`.
+   * If the calculated month has fewer days than the original one, the date is set to the last day of the month.
+   * E.g., with `date` = new Temporal.PlainDate(2022, 0, 31) and `months` = 1, it returns new Temporal.PlainDate(2022, 1, 28).
+   */
+  addCalendarMonths(e, r) {
+    return e.add({ months: r });
+  }
+  /** Creates a new date by adding the number of provided `days` to the provided `date`. */
+  addCalendarDays(e, r) {
+    return e.add({ days: r });
+  }
+  /** Creates a Temporal.PlainDate from a valid input (Temporal.PlainDate or ISO string). */
+  deserialize(e) {
+    if (typeof e == "string")
+      if (e) {
+        if (i.test(e))
+          return this.getValidDateOrNull(Temporal.PlainDate.from(e.split("T")[0]));
+      } else return null;
+    return super.deserialize(e);
+  }
+  invalid() {
+    return null;
+  }
+  toIso8601(e) {
+    return e.toJSON();
+  }
+  /**
+   * Creates an array with the given length and fills it by mapping with the provided function.
+   * @param length The length of the array to be created.
+   * @param valueFunction The function of array's index used to fill the array.
+   */
+  _range(e, r) {
+    return Array.from({ length: e }).map((t, n) => r(n));
+  }
+}
+const u = new l();
+export {
+  l as TemporalDateAdapter,
+  u as temporalDateAdapter
+};

package/core/styles/core/mediaqueries.scss

@@ -4,7 +4,7 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
-@use '../node_modules_@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: (
   // 0

package/core/styles/core.scss

@@ -1,7 +1,7 @@
 $theme: 'standard' !default;
 
 @use 'sass:string';
-@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss' as sbb-css-tokens with (
+@use './node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss' as sbb-css-tokens with (
   $theme: $theme
 );
 @use './core/mediaqueries';
@@ -23,9 +23,18 @@ $theme: 'standard' !default;
 @use '../../card/card/card.global' as card with (
   $theme: $theme
 );
+@use '../../chip/chip/chip.global' as chip with (
+  $theme: $theme
+);
+@use '../../chip/chip-group/chip-group.global' as chip-group with (
+  $theme: $theme
+);
 @use '../../card/card-badge/card-badge.global' as card-badge with (
   $theme: $theme
 );
+@use '../../carousel/carousel/carousel.global' as carousel with (
+  $theme: $theme
+);
 @use '../../core/mixins/panel-common.global' as panel-common with (
   $theme: $theme
 );
@@ -92,6 +101,9 @@ $theme: 'standard' !default;
   @include breadcrumb-group.base;
   @include card.base;
   @include card-badge.base;
+  @include carousel.base;
+  @include chip.base;
+  @include chip-group.base;
   @include panel-common.base;
   @include checkbox.base;
   @include checkbox-group.base;
@@ -186,6 +198,8 @@ $theme: 'standard' !default;
   @include mediaqueries.mq($from: large) {
     @include sbb-css-tokens.breakpoint-large;
 
+    @include chip-group.base-breakpoint-large;
+
     // TODO: Remove complete block when new lean theme is complete
     // Only render the block in standard theme as fallback for CSS class usage
     @if not string.index($theme, 'lean') {

package/core/styles/mixins/image.scss

@@ -1,5 +1,6 @@
 @use './typo';
 
+// TODO(breaking-change): check which mixins can be inlined
 @mixin figure {
   display: grid;
   grid-template-rows: auto;
@@ -23,15 +24,20 @@
 }
 
 @mixin figure-overlap-base {
+  display: flex;
+  gap: var(--sbb-spacing-fixed-1x);
+  flex-wrap: wrap;
+  margin: var(--sbb-spacing-responsive-xxxs);
+
   // Chips or other image overlaying element should stay in light mode as the image stays in light mode as well.
   color-scheme: only light;
   position: relative;
   order: 1; // Alternative to z-index
   grid-row: 1;
   grid-column: 1;
-  margin: var(--sbb-spacing-responsive-xxxs);
 }
 
 @mixin figure-overlap($row-alignment, $column-alignment) {
   place-self: #{$row-alignment} #{$column-alignment};
+  justify-content: #{$column-alignment};
 }

package/core/styles/mixins/table.scss

@@ -28,10 +28,8 @@
     & > tr {
       @include table-header-row;
 
-      &:first-of-type {
-        & > th {
-          border-block-start: var(--sbb-table-border);
-        }
+      &:first-of-type > th {
+        border-block-start: var(--sbb-table-border);
       }
 
       & > th {
@@ -59,18 +57,26 @@
   caption {
     @include table-caption;
   }
+
+  // If there is no thead, add a top border to the first tbody row
+  // In Angular the CDK table always adds a thead even if there are no headers.
+  // Due to this fact we have to also insert `tr` in the `:has()` selector.
+  &:not(:has(thead tr)) tbody > tr:first-of-type > td {
+    border-block-start: var(--sbb-table-border);
+  }
 }
 
 @mixin table-header-row {
   // If there is more than one header row, only the last one has the bottom border
   &:last-of-type > th {
-    border-bottom: var(--sbb-table-border);
+    border-block-end: var(--sbb-table-border);
   }
 }
 
 @mixin table-header-cell {
-  @include typo.text-xs--bold;
-
+  font-size: var(--sbb-table-header-cell-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-weight: bold;
   background-color: var(--sbb-table-background-color);
   border-inline-end: var(--sbb-table-border);
   padding-block: var(--sbb-table-header-padding-block);
@@ -79,8 +85,8 @@
 }
 
 @mixin table-data-cell {
-  @include typo.text-s--regular;
-
+  font-size: var(--sbb-table-data-cell-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   background-color: var(--sbb-table-background-color);
   border-block-end: var(--sbb-table-border);
   border-inline-end: var(--sbb-table-border);
@@ -89,11 +95,12 @@
 }
 
 @mixin table-caption {
-  @include typo.text-xs--regular;
-
   // Workaround for storybook. It crashes if 'light-dark' is used as a 'var' fallback
   --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
 
+  font-size: var(--sbb-text-font-size-xs);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+
   // Defaults are needed for cases where the caption is used outside a table
   color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
   margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
@@ -129,6 +136,8 @@
 }
 
 @mixin table--m {
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
   --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
   --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
   --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
@@ -136,25 +145,21 @@
 }
 
 @mixin table--s {
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
   --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
-
-  tbody > tr > td {
-    @include typo.text-xs--regular;
-  }
 }
 
 @mixin table--xs {
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
   --sbb-table-header-padding-block: 0;
   --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x);
   --sbb-table-cell-padding-block: 0;
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
-
-  tbody > tr > td {
-    @include typo.text-xs--regular;
-  }
 }
 
 @mixin table--theme-iron {