@sbb-esta/lyne-elements 4.3.1 → 4.5.0

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/datetime.js

@@ -1,14 +1,17 @@
-import { DAYS_PER_ROW as R, DateAdapter as E, FORMAT_DATE as e, ISO8601_FORMAT_DATE as t, MONTHS_PER_PAGE as a, MONTHS_PER_ROW as O, YEARS_PER_PAGE as r, YEARS_PER_ROW as P } from "./datetime/date-adapter.js";
-import { NativeDateAdapter as S, defaultDateAdapter as T } from "./datetime/native-date-adapter.js";
+import { DAYS_PER_ROW as a, DateAdapter as A, FORMAT_DATE as r, ISO8601_FORMAT_DATE as _, MONTHS_PER_PAGE as R, MONTHS_PER_ROW as E, YEARS_PER_PAGE as p, YEARS_PER_ROW as o } from "./datetime/date-adapter.js";
+import { NativeDateAdapter as O, defaultDateAdapter as P } from "./datetime/native-date-adapter.js";
+import { TemporalDateAdapter as d, temporalDateAdapter as S } from "./datetime/temporal-date-adapter.js";
 export {
-  R as DAYS_PER_ROW,
-  E as DateAdapter,
-  e as FORMAT_DATE,
-  t as ISO8601_FORMAT_DATE,
-  a as MONTHS_PER_PAGE,
-  O as MONTHS_PER_ROW,
-  S as NativeDateAdapter,
-  r as YEARS_PER_PAGE,
-  P as YEARS_PER_ROW,
-  T as defaultDateAdapter
+  a as DAYS_PER_ROW,
+  A as DateAdapter,
+  r as FORMAT_DATE,
+  _ as ISO8601_FORMAT_DATE,
+  R as MONTHS_PER_PAGE,
+  E as MONTHS_PER_ROW,
+  O as NativeDateAdapter,
+  d as TemporalDateAdapter,
+  p as YEARS_PER_PAGE,
+  o as YEARS_PER_ROW,
+  P as defaultDateAdapter,
+  S 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';
@@ -20,12 +20,30 @@ $theme: 'standard' !default;
 @use '../../breadcrumb/breadcrumb-group/breadcrumb-group.global' as breadcrumb-group with (
   $theme: $theme
 );
+@use '../../button/common/button-common.global' as button with (
+  $theme: $theme
+);
+@use '../../button/common/mini-button-common.global' as mini-button with (
+  $theme: $theme
+);
+@use '../../button/mini-button-group/mini-button-group.global' as mini-button-group with (
+  $theme: $theme
+);
 @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
 );
@@ -90,8 +108,14 @@ $theme: 'standard' !default;
 
   @include breadcrumb.base;
   @include breadcrumb-group.base;
+  @include button.base;
+  @include mini-button.base;
+  @include mini-button-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 +210,10 @@ $theme: 'standard' !default;
   @include mediaqueries.mq($from: large) {
     @include sbb-css-tokens.breakpoint-large;
 
+    @include button.base-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 {

package/core.css

@@ -1263,6 +1263,57 @@
     var(--sbb-color-silver),
     var(--sbb-color-anthracite)
   );
+  --sbb-button-box-shadow: transparent 0 0;
+  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-button-border-width: var(--sbb-border-width-2x);
+  --sbb-button-border-disabled-style: dashed;
+  --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
+  --sbb-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-button-color-disabled-text: var(--sbb-color-granite);
+  --sbb-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-aluminium)
+  );
+  --sbb-button-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-button-loading-border-width: var(--sbb-border-width-3x);
+  --sbb-button-loading-delay: 300ms;
+  --sbb-button-min-height-size-l: var(--sbb-size-element-m);
+  --sbb-button-min-height-size-m: var(--sbb-size-element-s);
+  --sbb-button-min-height-size-s: var(--sbb-size-element-xs);
+  --sbb-button-min-height: var(--sbb-button-min-height-size-l);
+  --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
+  --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-8x);
+  --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-5x);
+  --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-4x);
+  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);
+  --sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);
+  --sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);
+  --sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);
+  --sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);
+  --sbb-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-color-text: var(--sbb-color-3);
+  --sbb-mini-button-color-default-background: transparent;
+  --sbb-mini-button-color-hover-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-active-background: var(--sbb-background-color-4);
+  --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-mini-button-color-disabled-text: var(--sbb-color-granite);
+  --sbb-mini-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-group-background: var(--sbb-background-color-1);
+  --sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-mini-button-group-border-width: var(--sbb-border-width-2x);
+  --sbb-mini-button-group-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-mini-button-group-min-height: var(--sbb-size-element-s);
+  --sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x);
+  --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
+  --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
   --sbb-card-background-color: var(--sbb-background-color-1);
   --sbb-card-border-color: transparent;
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
@@ -1286,6 +1337,28 @@
   --sbb-card-badge-border-width: var(--sbb-border-width-1x);
   --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
   --sbb-card-badge-skew: skew(16deg, 0deg);
+  --sbb-carousel-background-color: var(--sbb-background-color-1);
+  --sbb-carousel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-carousel-box-shadow: var(--sbb-box-shadow-level-9-hard);
+  --sbb-carousel-paginator-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-chip-background-color: var(--sbb-background-color-3);
+  --sbb-chip-background-color-active: var(--sbb-background-color-1);
+  --sbb-chip-background-color-hover: var(--sbb-background-color-1);
+  --sbb-chip-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-chip-border-radius: var(--sbb-border-radius-2x);
+  --sbb-chip-color: var(--sbb-color-granite);
+  --sbb-chip-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-color-hover: var(--sbb-color-2);
+  --sbb-chip-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-chip-height: 1.5rem;
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --_sbb-chip-group-margin-block-start-default: 0.125rem;
+  --_sbb-chip-group-margin-block-start-default-large: 0.21875rem;
+  --sbb-chip-group-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-chip-group-input-min-width: 9.375rem;
+  --sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0;
+  --sbb-chip-group-margin-block-no-label-not-empty: 0.1875rem 0.6875rem;
+  --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large);
   --sbb-selection-panel-background-default: var(--sbb-background-color-1);
   --sbb-selection-panel-background-milk: var(--sbb-background-color-3);
   --sbb-selection-panel-border-radius: var(--sbb-border-radius-4x);
@@ -1353,6 +1426,7 @@
   --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
   --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
   --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
+  --sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
   --sbb-radio-button-label-color: var(--sbb-color-3);
   --sbb-radio-button-background-color: var(--sbb-background-color-1);
   --sbb-radio-button-border-width: var(--sbb-border-width-1x);
@@ -1532,6 +1606,12 @@
     --sbb-size-element-s: var(--sbb-size-element-s-large);
     --sbb-size-element-m: var(--sbb-size-element-m-large);
     --sbb-size-element-l: var(--sbb-size-element-l-large);
+    --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-10x);
+    --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-8x);
+    --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-5x);
+    --sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0;
+    --sbb-chip-group-margin-block-no-label-not-empty: 0.1875rem 0.875rem;
+    --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);