@sbb-esta/lyne-elements-dev 4.9.0-dev.1774354777 → 4.9.0-dev.1774426040

package/core/styles/core.scss

@@ -194,6 +194,9 @@ $theme: 'standard' !default;
 @use '../../signet/signet.global' as signet with (
   $theme: $theme
 );
+@use '../../slider/slider.global' as slider with (
+  $theme: $theme
+);
 @use '../../status/status.global' as status with (
   $theme: $theme
 );
@@ -273,6 +276,7 @@ $theme: 'standard' !default;
   @include selection-action-panel.base;
   @include selection-expansion-panel.base;
   @include signet.base;
+  @include slider.base;
   @include status.base;
   @include tab-group-common.base;
   @include tab-label-common.base;
@@ -292,6 +296,7 @@ $theme: 'standard' !default;
     @include visual-checkbox.base-forced-colors;
     @include radio-button-common.base-forced-colors;
     @include signet.base-forced-colors;
+    @include slider.base-forced-colors;
   }
 
   // Train formation

package/core/styles/mixins/table.scss

@@ -4,6 +4,7 @@
 // Notes:
 // We cannot use `border-collapse` because in sticky variants it gets visually broken.
 // Therefore, we have to build the grid avoiding double borders.
+// TODO: remove with next major release
 @mixin table {
   @include table--m;
   @include table--striped;
@@ -23,49 +24,46 @@
   caption-side: bottom;
   color: var(--sbb-table-color);
   table-layout: auto;
+  text-align: left;
 
-  thead {
-    & > tr {
-      @include table-header-row;
+  th {
+    @include table-header-cell;
+  }
 
-      &:first-of-type > th {
-        border-block-start: var(--sbb-table-border);
-      }
+  td {
+    @include table-data-cell;
+  }
 
-      & > th {
-        @include table-header-cell;
+  :is(th, td) {
+    &.sbb-table-group-with-next {
+      border-inline-end: none;
+    }
 
-        &:first-of-type {
-          border-inline-start: var(--sbb-table-border);
-        }
-      }
+    &:first-child {
+      border-inline-start: var(--sbb-table-border);
     }
   }
 
-  tbody {
-    & > tr {
-      & > td {
-        @include table-data-cell;
-
-        &:first-of-type {
-          border-inline-start: var(--sbb-table-border);
-        }
-      }
+  // 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.
+  &:has(thead tr) thead,
+  &:not(:has(thead tr)) tbody {
+    tr:first-of-type > :is(th, td) {
+      border-block-start: var(--sbb-table-border);
     }
   }
 
-  caption {
-    @include table-caption;
+  // Avoid borders between header rows (design specification).
+  thead > tr:has(+ tr) > :is(th, td) {
+    border-block-end: none;
   }
 
-  // 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);
+  caption {
+    @include table-caption;
   }
 }
 
+// TODO: remove with next major release
 @mixin table-header-row {
   // If there is more than one header row, only the last one has the bottom border
   &:last-of-type > th {
@@ -73,17 +71,19 @@
   }
 }
 
+// TODO: remove with next major release
 @mixin table-header-cell {
   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-block-end: var(--sbb-table-border);
   border-inline-end: var(--sbb-table-border);
   padding-block: var(--sbb-table-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
-  text-align: left;
 }
 
+// TODO: remove with next major release
 @mixin table-data-cell {
   font-size: var(--sbb-table-data-cell-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
@@ -94,6 +94,7 @@
   padding-inline: var(--sbb-table-cell-padding-inline);
 }
 
+// TODO: remove with next major release
 @mixin table-caption {
   // 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));
@@ -107,26 +108,31 @@
   text-align: left;
 }
 
+// TODO: remove and inline with next major release
 @mixin table-filter {
   padding-block-start: 0 !important;
 }
 
+// TODO: remove with next major release
 @mixin table--striped {
   tbody tr:nth-child(odd) :is(th, td) {
     @include table-row--striped;
   }
 }
 
+// TODO: remove with next major release
 @mixin table--unstriped {
   tbody tr:nth-child(odd) :is(th, td) {
     background-color: var(--sbb-table-background-color);
   }
 }
 
+// TODO: remove with next major release
 @mixin table-row--striped {
   background-color: var(--sbb-table-row-striped-color);
 }
 
+// TODO: remove with next major release
 @mixin table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
   --sbb-table-background-color: var(--sbb-background-color-1-negative);
@@ -135,6 +141,7 @@
   --sbb-table-caption-color: var(--sbb-color-cement);
 }
 
+// TODO: remove with next major release
 @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);
@@ -144,6 +151,7 @@
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
 }
 
+// TODO: remove with next major release
 @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);
@@ -153,6 +161,7 @@
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
 }
 
+// TODO: remove with next major release
 @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);
@@ -162,6 +171,7 @@
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
 }
 
+// TODO: remove with next major release
 @mixin table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 
@@ -170,6 +180,7 @@
   }
 }
 
+// TODO: remove with next major release
 @mixin table--theme-iron-negative {
   --sbb-table-cell-color: var(--sbb-color-cloud);
 }

package/core/styles/table.scss

@@ -40,10 +40,12 @@ sbb-table-wrapper[negative] .sbb-table,
   }
 }
 
+// @deprecated
 .sbb-table-header-row {
   @include table.table-header-row;
 }
 
+// @deprecated
 .sbb-table-header-cell {
   @include table.table-header-cell;
 }
@@ -52,10 +54,12 @@ sbb-table-wrapper[negative] .sbb-table,
   @include table.table-row--striped;
 }
 
+// @deprecated
 .sbb-table-data-cell {
   @include table.table-data-cell;
 }
 
+// @deprecated
 .sbb-table-caption {
   @include table.table-caption;
 }
@@ -120,3 +124,29 @@ sbb-table-wrapper[negative] .sbb-table,
 html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   @include table.table--s;
 }
+
+.sbb-table-align-start {
+  text-align: start;
+}
+
+.sbb-table-align-center {
+  text-align: center;
+}
+
+.sbb-table-align-end {
+  text-align: end;
+}
+
+.sbb-table-align-justify {
+  text-align: justify;
+}
+
+// Backwards compatibility for sbb-angular
+.sbb-table-align-left {
+  text-align: left;
+}
+
+// Backwards compatibility for sbb-angular
+.sbb-table-align-right {
+  text-align: right;
+}

package/core.css

@@ -1632,6 +1632,27 @@ slot[name=error]::slotted(*) {
   --sbb-signet-panel-color: var(--sbb-color-brand);
   --sbb-signet-icon-color: var(--sbb-color-white);
   --sbb-signet-aspect-ratio: 2 / 1;
+  --sbb-slider-line-height: 0.25rem;
+  --sbb-slider-knob-size: 1.75rem;
+  --sbb-slider-knob-size-active: 1.9375rem;
+  --sbb-slider-knob-border-size: 0.1875rem;
+  --sbb-slider-knob-border-style: solid;
+  --sbb-slider-knob-color: var(--sbb-background-color-1);
+  --sbb-slider-knob-border-color: var(--sbb-color-primary);
+  --sbb-slider-icon-color: var(--sbb-color-1);
+  --sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);
+  --sbb-slider-selected-line-disabled-color: light-dark(
+    var(--sbb-color-smoke),
+    var(--sbb-color-cement)
+  );
+  --sbb-slider-line-color: var(--sbb-border-color-5);
+  --sbb-slider-selected-line-color: var(--sbb-color-primary);
+  --sbb-slider-line-disabled-color: var(--sbb-color-graphite);
+  --sbb-slider-line-disabled-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));
+  --sbb-slider-width: 25rem;
+  --sbb-slider-min-width: 9.375rem;
+  --sbb-slider-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-slider-padding-block: 0.125rem;
   --sbb-status-color: var(--sbb-color-4);
   --sbb-status-gap: var(--sbb-spacing-fixed-1x);
   --sbb-status-font-size: var(--sbb-text-font-size-s);
@@ -1709,6 +1730,8 @@ slot[name=error]::slotted(*) {
     --sbb-signet-background-color: ButtonText !important;
     --sbb-signet-panel-color: ButtonText !important;
     --sbb-signet-icon-color: Canvas !important;
+    --sbb-slider-selected-line-color: Highlight;
+    --sbb-slider-line-color: CanvasText;
   }
 }
 :root {

package/custom-elements.json

@@ -80748,12 +80748,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "datepicker/datepicker-previous-day/datepicker-previous-day.component.js",
+      "path": "datepicker/datepicker-next-day/datepicker-next-day.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Combined with a `sbb-datepicker`, it can be used to move the date back.",
-          "name": "SbbDatepickerPreviousDayElement",
+          "description": "Combined with a `sbb-datepicker`, it can be used to move the date ahead.",
+          "name": "SbbDatepickerNextDayElement",
           "members": [
             {
               "kind": "field",
@@ -80768,7 +80768,7 @@
                 "name": "SbbElement",
                 "module": "core/base-elements/element.js"
               },
-              "default": "'sbb-datepicker-previous-day'"
+              "default": "'sbb-datepicker-next-day'"
             },
             {
               "kind": "field",
@@ -80781,7 +80781,7 @@
                 "name": "SbbDatepickerButtonBase",
                 "module": "datepicker/common/datepicker-button.js"
               },
-              "default": "'chevron-small-left-small'"
+              "default": "'chevron-small-right-small'"
             },
             {
               "kind": "field",
@@ -80790,7 +80790,7 @@
                 "text": "Record<string, string>"
               },
               "privacy": "protected",
-              "default": "i18nPreviousDay",
+              "default": "i18nNextDay",
               "inheritedFrom": {
                 "name": "SbbDatepickerButton",
                 "module": "datepicker/common/datepicker-button.js"
@@ -80803,7 +80803,7 @@
                 "text": "(_currentDate: string) => Record<string, string>"
               },
               "privacy": "protected",
-              "default": "i18nSelectPreviousDay",
+              "default": "i18nSelectNextDay",
               "inheritedFrom": {
                 "name": "SbbDatepickerButton",
                 "module": "datepicker/common/datepicker-button.js"
@@ -80833,7 +80833,7 @@
             },
             {
               "kind": "method",
-              "name": "_isBeforeMinDate",
+              "name": "_isAfterMaxDate",
               "privacy": "private",
               "return": {
                 "type": {
@@ -81693,7 +81693,7 @@
             "name": "SbbDatepickerButton",
             "module": "datepicker/common/datepicker-button.js"
           },
-          "tagName": "sbb-datepicker-previous-day",
+          "tagName": "sbb-datepicker-next-day",
           "customElement": true,
           "classGenerics": "T = Date",
           "attributes": [
@@ -81779,22 +81779,22 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SbbDatepickerPreviousDayElement",
+          "name": "SbbDatepickerNextDayElement",
           "declaration": {
-            "name": "SbbDatepickerPreviousDayElement",
-            "module": "datepicker/datepicker-previous-day/datepicker-previous-day.component.js"
+            "name": "SbbDatepickerNextDayElement",
+            "module": "datepicker/datepicker-next-day/datepicker-next-day.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "datepicker/datepicker-next-day/datepicker-next-day.component.js",
+      "path": "datepicker/datepicker-previous-day/datepicker-previous-day.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Combined with a `sbb-datepicker`, it can be used to move the date ahead.",
-          "name": "SbbDatepickerNextDayElement",
+          "description": "Combined with a `sbb-datepicker`, it can be used to move the date back.",
+          "name": "SbbDatepickerPreviousDayElement",
           "members": [
             {
               "kind": "field",
@@ -81809,7 +81809,7 @@
                 "name": "SbbElement",
                 "module": "core/base-elements/element.js"
               },
-              "default": "'sbb-datepicker-next-day'"
+              "default": "'sbb-datepicker-previous-day'"
             },
             {
               "kind": "field",
@@ -81822,7 +81822,7 @@
                 "name": "SbbDatepickerButtonBase",
                 "module": "datepicker/common/datepicker-button.js"
               },
-              "default": "'chevron-small-right-small'"
+              "default": "'chevron-small-left-small'"
             },
             {
               "kind": "field",
@@ -81831,7 +81831,7 @@
                 "text": "Record<string, string>"
               },
               "privacy": "protected",
-              "default": "i18nNextDay",
+              "default": "i18nPreviousDay",
               "inheritedFrom": {
                 "name": "SbbDatepickerButton",
                 "module": "datepicker/common/datepicker-button.js"
@@ -81844,7 +81844,7 @@
                 "text": "(_currentDate: string) => Record<string, string>"
               },
               "privacy": "protected",
-              "default": "i18nSelectNextDay",
+              "default": "i18nSelectPreviousDay",
               "inheritedFrom": {
                 "name": "SbbDatepickerButton",
                 "module": "datepicker/common/datepicker-button.js"
@@ -81874,7 +81874,7 @@
             },
             {
               "kind": "method",
-              "name": "_isAfterMaxDate",
+              "name": "_isBeforeMinDate",
               "privacy": "private",
               "return": {
                 "type": {
@@ -82734,7 +82734,7 @@
             "name": "SbbDatepickerButton",
             "module": "datepicker/common/datepicker-button.js"
           },
-          "tagName": "sbb-datepicker-next-day",
+          "tagName": "sbb-datepicker-previous-day",
           "customElement": true,
           "classGenerics": "T = Date",
           "attributes": [
@@ -82820,10 +82820,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SbbDatepickerNextDayElement",
+          "name": "SbbDatepickerPreviousDayElement",
           "declaration": {
-            "name": "SbbDatepickerNextDayElement",
-            "module": "datepicker/datepicker-next-day/datepicker-next-day.component.js"
+            "name": "SbbDatepickerPreviousDayElement",
+            "module": "datepicker/datepicker-previous-day/datepicker-previous-day.component.js"
           }
         }
       ]

package/development/slider/slider.component.js

@@ -1,2 +1,2 @@
-import { t as SbbSliderElement } from "../slider.component-w_WtVNx-.js";
+import { t as SbbSliderElement } from "../slider.component-QzF7A8Yl.js";
 export { SbbSliderElement };