@sbb-esta/lyne-elements-dev 4.9.0-dev.1774312774 → 4.9.0-dev.1774376412

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,6 +4,7 @@
4
4
  // Notes:
5
5
  // We cannot use `border-collapse` because in sticky variants it gets visually broken.
6
6
  // Therefore, we have to build the grid avoiding double borders.
7
+ // TODO: remove with next major release
7
8
  @mixin table {
8
9
  @include table--m;
9
10
  @include table--striped;
@@ -23,49 +24,46 @@
23
24
  caption-side: bottom;
24
25
  color: var(--sbb-table-color);
25
26
  table-layout: auto;
27
+ text-align: left;
26
28
 
27
- thead {
28
- & > tr {
29
- @include table-header-row;
29
+ th {
30
+ @include table-header-cell;
31
+ }
30
32
 
31
- &:first-of-type > th {
32
- border-block-start: var(--sbb-table-border);
33
- }
33
+ td {
34
+ @include table-data-cell;
35
+ }
34
36
 
35
- & > th {
36
- @include table-header-cell;
37
+ :is(th, td) {
38
+ &.sbb-table-group-with-next {
39
+ border-inline-end: none;
40
+ }
37
41
 
38
- &:first-of-type {
39
- border-inline-start: var(--sbb-table-border);
40
- }
41
- }
42
+ &:first-child {
43
+ border-inline-start: var(--sbb-table-border);
42
44
  }
43
45
  }
44
46
 
45
- tbody {
46
- & > tr {
47
- & > td {
48
- @include table-data-cell;
49
-
50
- &:first-of-type {
51
- border-inline-start: var(--sbb-table-border);
52
- }
53
- }
47
+ // In Angular the CDK table always adds a thead even if there are no headers.
48
+ // Due to this fact we have to also insert `tr` in the `:has()` selector.
49
+ &:has(thead tr) thead,
50
+ &:not(:has(thead tr)) tbody {
51
+ tr:first-of-type > :is(th, td) {
52
+ border-block-start: var(--sbb-table-border);
54
53
  }
55
54
  }
56
55
 
57
- caption {
58
- @include table-caption;
56
+ // Avoid borders between header rows (design specification).
57
+ thead > tr:has(+ tr) > :is(th, td) {
58
+ border-block-end: none;
59
59
  }
60
60
 
61
- // If there is no thead, add a top border to the first tbody row
62
- // In Angular the CDK table always adds a thead even if there are no headers.
63
- // Due to this fact we have to also insert `tr` in the `:has()` selector.
64
- &:not(:has(thead tr)) tbody > tr:first-of-type > td {
65
- border-block-start: var(--sbb-table-border);
61
+ caption {
62
+ @include table-caption;
66
63
  }
67
64
  }
68
65
 
66
+ // TODO: remove with next major release
69
67
  @mixin table-header-row {
70
68
  // If there is more than one header row, only the last one has the bottom border
71
69
  &:last-of-type > th {
@@ -73,17 +71,19 @@
73
71
  }
74
72
  }
75
73
 
74
+ // TODO: remove with next major release
76
75
  @mixin table-header-cell {
77
76
  font-size: var(--sbb-table-header-cell-font-size);
78
77
  letter-spacing: var(--sbb-typo-letter-spacing-text);
79
78
  font-weight: bold;
80
79
  background-color: var(--sbb-table-background-color);
80
+ border-block-end: var(--sbb-table-border);
81
81
  border-inline-end: var(--sbb-table-border);
82
82
  padding-block: var(--sbb-table-header-padding-block);
83
83
  padding-inline: var(--sbb-table-header-padding-inline);
84
- text-align: left;
85
84
  }
86
85
 
86
+ // TODO: remove with next major release
87
87
  @mixin table-data-cell {
88
88
  font-size: var(--sbb-table-data-cell-font-size);
89
89
  letter-spacing: var(--sbb-typo-letter-spacing-text);
@@ -94,6 +94,7 @@
94
94
  padding-inline: var(--sbb-table-cell-padding-inline);
95
95
  }
96
96
 
97
+ // TODO: remove with next major release
97
98
  @mixin table-caption {
98
99
  // Workaround for storybook. It crashes if 'light-dark' is used as a 'var' fallback
99
100
  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
@@ -107,26 +108,31 @@
107
108
  text-align: left;
108
109
  }
109
110
 
111
+ // TODO: remove and inline with next major release
110
112
  @mixin table-filter {
111
113
  padding-block-start: 0 !important;
112
114
  }
113
115
 
116
+ // TODO: remove with next major release
114
117
  @mixin table--striped {
115
118
  tbody tr:nth-child(odd) :is(th, td) {
116
119
  @include table-row--striped;
117
120
  }
118
121
  }
119
122
 
123
+ // TODO: remove with next major release
120
124
  @mixin table--unstriped {
121
125
  tbody tr:nth-child(odd) :is(th, td) {
122
126
  background-color: var(--sbb-table-background-color);
123
127
  }
124
128
  }
125
129
 
130
+ // TODO: remove with next major release
126
131
  @mixin table-row--striped {
127
132
  background-color: var(--sbb-table-row-striped-color);
128
133
  }
129
134
 
135
+ // TODO: remove with next major release
130
136
  @mixin table--negative {
131
137
  --sbb-table-border-color: var(--sbb-color-anthracite);
132
138
  --sbb-table-background-color: var(--sbb-background-color-1-negative);
@@ -135,6 +141,7 @@
135
141
  --sbb-table-caption-color: var(--sbb-color-cement);
136
142
  }
137
143
 
144
+ // TODO: remove with next major release
138
145
  @mixin table--m {
139
146
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
140
147
  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
@@ -144,6 +151,7 @@
144
151
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
145
152
  }
146
153
 
154
+ // TODO: remove with next major release
147
155
  @mixin table--s {
148
156
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
149
157
  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
@@ -153,6 +161,7 @@
153
161
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
154
162
  }
155
163
 
164
+ // TODO: remove with next major release
156
165
  @mixin table--xs {
157
166
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
158
167
  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
@@ -162,6 +171,7 @@
162
171
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
163
172
  }
164
173
 
174
+ // TODO: remove with next major release
165
175
  @mixin table--theme-iron {
166
176
  --sbb-table-cell-color: var(--sbb-color-4);
167
177
 
@@ -170,6 +180,7 @@
170
180
  }
171
181
  }
172
182
 
183
+ // TODO: remove with next major release
173
184
  @mixin table--theme-iron-negative {
174
185
  --sbb-table-cell-color: var(--sbb-color-cloud);
175
186
  }
@@ -40,10 +40,12 @@ sbb-table-wrapper[negative] .sbb-table,
40
40
  }
41
41
  }
42
42
 
43
+ // @deprecated
43
44
  .sbb-table-header-row {
44
45
  @include table.table-header-row;
45
46
  }
46
47
 
48
+ // @deprecated
47
49
  .sbb-table-header-cell {
48
50
  @include table.table-header-cell;
49
51
  }
@@ -52,10 +54,12 @@ sbb-table-wrapper[negative] .sbb-table,
52
54
  @include table.table-row--striped;
53
55
  }
54
56
 
57
+ // @deprecated
55
58
  .sbb-table-data-cell {
56
59
  @include table.table-data-cell;
57
60
  }
58
61
 
62
+ // @deprecated
59
63
  .sbb-table-caption {
60
64
  @include table.table-caption;
61
65
  }
@@ -120,3 +124,29 @@ sbb-table-wrapper[negative] .sbb-table,
120
124
  html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
121
125
  @include table.table--s;
122
126
  }
127
+
128
+ .sbb-table-align-start {
129
+ text-align: start;
130
+ }
131
+
132
+ .sbb-table-align-center {
133
+ text-align: center;
134
+ }
135
+
136
+ .sbb-table-align-end {
137
+ text-align: end;
138
+ }
139
+
140
+ .sbb-table-align-justify {
141
+ text-align: justify;
142
+ }
143
+
144
+ // Backwards compatibility for sbb-angular
145
+ .sbb-table-align-left {
146
+ text-align: left;
147
+ }
148
+
149
+ // Backwards compatibility for sbb-angular
150
+ .sbb-table-align-right {
151
+ text-align: right;
152
+ }
@@ -3172,42 +3172,25 @@ sup {
3172
3172
  caption-side: bottom;
3173
3173
  color: var(--sbb-table-color);
3174
3174
  table-layout: auto;
3175
+ text-align: left;
3175
3176
  }
3176
- .sbb-table thead > tr:last-of-type > th,
3177
- .sbb-table-m thead > tr:last-of-type > th,
3178
- .sbb-table-s thead > tr:last-of-type > th,
3179
- .sbb-table-xs thead > tr:last-of-type > th {
3180
- border-block-end: var(--sbb-table-border);
3181
- }
3182
- .sbb-table thead > tr:first-of-type > th,
3183
- .sbb-table-m thead > tr:first-of-type > th,
3184
- .sbb-table-s thead > tr:first-of-type > th,
3185
- .sbb-table-xs thead > tr:first-of-type > th {
3186
- border-block-start: var(--sbb-table-border);
3187
- }
3188
- .sbb-table thead > tr > th,
3189
- .sbb-table-m thead > tr > th,
3190
- .sbb-table-s thead > tr > th,
3191
- .sbb-table-xs thead > tr > th {
3177
+ .sbb-table th,
3178
+ .sbb-table-m th,
3179
+ .sbb-table-s th,
3180
+ .sbb-table-xs th {
3192
3181
  font-size: var(--sbb-table-header-cell-font-size);
3193
3182
  letter-spacing: var(--sbb-typo-letter-spacing-text);
3194
3183
  font-weight: bold;
3195
3184
  background-color: var(--sbb-table-background-color);
3185
+ border-block-end: var(--sbb-table-border);
3196
3186
  border-inline-end: var(--sbb-table-border);
3197
3187
  padding-block: var(--sbb-table-header-padding-block);
3198
3188
  padding-inline: var(--sbb-table-header-padding-inline);
3199
- text-align: left;
3200
3189
  }
3201
- .sbb-table thead > tr > th:first-of-type,
3202
- .sbb-table-m thead > tr > th:first-of-type,
3203
- .sbb-table-s thead > tr > th:first-of-type,
3204
- .sbb-table-xs thead > tr > th:first-of-type {
3205
- border-inline-start: var(--sbb-table-border);
3206
- }
3207
- .sbb-table tbody > tr > td,
3208
- .sbb-table-m tbody > tr > td,
3209
- .sbb-table-s tbody > tr > td,
3210
- .sbb-table-xs tbody > tr > td {
3190
+ .sbb-table td,
3191
+ .sbb-table-m td,
3192
+ .sbb-table-s td,
3193
+ .sbb-table-xs td {
3211
3194
  font-size: var(--sbb-table-data-cell-font-size);
3212
3195
  letter-spacing: var(--sbb-typo-letter-spacing-text);
3213
3196
  background-color: var(--sbb-table-background-color);
@@ -3216,12 +3199,33 @@ sup {
3216
3199
  padding-block: var(--sbb-table-cell-padding-block);
3217
3200
  padding-inline: var(--sbb-table-cell-padding-inline);
3218
3201
  }
3219
- .sbb-table tbody > tr > td:first-of-type,
3220
- .sbb-table-m tbody > tr > td:first-of-type,
3221
- .sbb-table-s tbody > tr > td:first-of-type,
3222
- .sbb-table-xs tbody > tr > td:first-of-type {
3202
+ .sbb-table :is(th, td).sbb-table-group-with-next,
3203
+ .sbb-table-m :is(th, td).sbb-table-group-with-next,
3204
+ .sbb-table-s :is(th, td).sbb-table-group-with-next,
3205
+ .sbb-table-xs :is(th, td).sbb-table-group-with-next {
3206
+ border-inline-end: none;
3207
+ }
3208
+ .sbb-table :is(th, td):first-child,
3209
+ .sbb-table-m :is(th, td):first-child,
3210
+ .sbb-table-s :is(th, td):first-child,
3211
+ .sbb-table-xs :is(th, td):first-child {
3223
3212
  border-inline-start: var(--sbb-table-border);
3224
3213
  }
3214
+ .sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
3215
+ .sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
3216
+ .sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
3217
+ .sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
3218
+ .sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
3219
+ .sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
3220
+ .sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
3221
+ border-block-start: var(--sbb-table-border);
3222
+ }
3223
+ .sbb-table thead > tr:has(+ tr) > :is(th, td),
3224
+ .sbb-table-m thead > tr:has(+ tr) > :is(th, td),
3225
+ .sbb-table-s thead > tr:has(+ tr) > :is(th, td),
3226
+ .sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
3227
+ border-block-end: none;
3228
+ }
3225
3229
  .sbb-table caption,
3226
3230
  .sbb-table-m caption,
3227
3231
  .sbb-table-s caption,
@@ -3234,12 +3238,6 @@ sup {
3234
3238
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
3235
3239
  text-align: left;
3236
3240
  }
3237
- .sbb-table:not(:has(thead tr)) tbody > tr:first-of-type > td,
3238
- .sbb-table-m:not(:has(thead tr)) tbody > tr:first-of-type > td,
3239
- .sbb-table-s:not(:has(thead tr)) tbody > tr:first-of-type > td,
3240
- .sbb-table-xs:not(:has(thead tr)) tbody > tr:first-of-type > td {
3241
- border-block-start: var(--sbb-table-border);
3242
- }
3243
3241
 
3244
3242
  .sbb-table-m {
3245
3243
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
@@ -3304,10 +3302,10 @@ sbb-table-wrapper[negative] .sbb-table,
3304
3302
  letter-spacing: var(--sbb-typo-letter-spacing-text);
3305
3303
  font-weight: bold;
3306
3304
  background-color: var(--sbb-table-background-color);
3305
+ border-block-end: var(--sbb-table-border);
3307
3306
  border-inline-end: var(--sbb-table-border);
3308
3307
  padding-block: var(--sbb-table-header-padding-block);
3309
3308
  padding-inline: var(--sbb-table-header-padding-inline);
3310
- text-align: left;
3311
3309
  }
3312
3310
 
3313
3311
  .sbb-table-row--striped {
@@ -3385,6 +3383,30 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
3385
3383
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
3386
3384
  }
3387
3385
 
3386
+ .sbb-table-align-start {
3387
+ text-align: start;
3388
+ }
3389
+
3390
+ .sbb-table-align-center {
3391
+ text-align: center;
3392
+ }
3393
+
3394
+ .sbb-table-align-end {
3395
+ text-align: end;
3396
+ }
3397
+
3398
+ .sbb-table-align-justify {
3399
+ text-align: justify;
3400
+ }
3401
+
3402
+ .sbb-table-align-left {
3403
+ text-align: left;
3404
+ }
3405
+
3406
+ .sbb-table-align-right {
3407
+ text-align: right;
3408
+ }
3409
+
3388
3410
  .sbb-timetable-form {
3389
3411
  --sbb-timetable-form-content-max-width: 46.25rem;
3390
3412
  position: relative;
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "4.9.0-dev.1774312774",
3
+ "version": "4.9.0-dev.1774376412",
4
4
  "description": "Lyne Design System",
5
5
  "keywords": [
6
6
  "design system",
7
7
  "web components",
8
8
  "lit",
9
- "https://github.com/sbb-design-systems/lyne-components/commit/201564e94871079d0621ea524f837437c907187b"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/d53576000a02b377e56bb0c6dd711d7d1c93dcec"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {
package/safety-theme.css CHANGED
@@ -3172,42 +3172,25 @@ sup {
3172
3172
  caption-side: bottom;
3173
3173
  color: var(--sbb-table-color);
3174
3174
  table-layout: auto;
3175
+ text-align: left;
3175
3176
  }
3176
- .sbb-table thead > tr:last-of-type > th,
3177
- .sbb-table-m thead > tr:last-of-type > th,
3178
- .sbb-table-s thead > tr:last-of-type > th,
3179
- .sbb-table-xs thead > tr:last-of-type > th {
3180
- border-block-end: var(--sbb-table-border);
3181
- }
3182
- .sbb-table thead > tr:first-of-type > th,
3183
- .sbb-table-m thead > tr:first-of-type > th,
3184
- .sbb-table-s thead > tr:first-of-type > th,
3185
- .sbb-table-xs thead > tr:first-of-type > th {
3186
- border-block-start: var(--sbb-table-border);
3187
- }
3188
- .sbb-table thead > tr > th,
3189
- .sbb-table-m thead > tr > th,
3190
- .sbb-table-s thead > tr > th,
3191
- .sbb-table-xs thead > tr > th {
3177
+ .sbb-table th,
3178
+ .sbb-table-m th,
3179
+ .sbb-table-s th,
3180
+ .sbb-table-xs th {
3192
3181
  font-size: var(--sbb-table-header-cell-font-size);
3193
3182
  letter-spacing: var(--sbb-typo-letter-spacing-text);
3194
3183
  font-weight: bold;
3195
3184
  background-color: var(--sbb-table-background-color);
3185
+ border-block-end: var(--sbb-table-border);
3196
3186
  border-inline-end: var(--sbb-table-border);
3197
3187
  padding-block: var(--sbb-table-header-padding-block);
3198
3188
  padding-inline: var(--sbb-table-header-padding-inline);
3199
- text-align: left;
3200
3189
  }
3201
- .sbb-table thead > tr > th:first-of-type,
3202
- .sbb-table-m thead > tr > th:first-of-type,
3203
- .sbb-table-s thead > tr > th:first-of-type,
3204
- .sbb-table-xs thead > tr > th:first-of-type {
3205
- border-inline-start: var(--sbb-table-border);
3206
- }
3207
- .sbb-table tbody > tr > td,
3208
- .sbb-table-m tbody > tr > td,
3209
- .sbb-table-s tbody > tr > td,
3210
- .sbb-table-xs tbody > tr > td {
3190
+ .sbb-table td,
3191
+ .sbb-table-m td,
3192
+ .sbb-table-s td,
3193
+ .sbb-table-xs td {
3211
3194
  font-size: var(--sbb-table-data-cell-font-size);
3212
3195
  letter-spacing: var(--sbb-typo-letter-spacing-text);
3213
3196
  background-color: var(--sbb-table-background-color);
@@ -3216,12 +3199,33 @@ sup {
3216
3199
  padding-block: var(--sbb-table-cell-padding-block);
3217
3200
  padding-inline: var(--sbb-table-cell-padding-inline);
3218
3201
  }
3219
- .sbb-table tbody > tr > td:first-of-type,
3220
- .sbb-table-m tbody > tr > td:first-of-type,
3221
- .sbb-table-s tbody > tr > td:first-of-type,
3222
- .sbb-table-xs tbody > tr > td:first-of-type {
3202
+ .sbb-table :is(th, td).sbb-table-group-with-next,
3203
+ .sbb-table-m :is(th, td).sbb-table-group-with-next,
3204
+ .sbb-table-s :is(th, td).sbb-table-group-with-next,
3205
+ .sbb-table-xs :is(th, td).sbb-table-group-with-next {
3206
+ border-inline-end: none;
3207
+ }
3208
+ .sbb-table :is(th, td):first-child,
3209
+ .sbb-table-m :is(th, td):first-child,
3210
+ .sbb-table-s :is(th, td):first-child,
3211
+ .sbb-table-xs :is(th, td):first-child {
3223
3212
  border-inline-start: var(--sbb-table-border);
3224
3213
  }
3214
+ .sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
3215
+ .sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
3216
+ .sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
3217
+ .sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
3218
+ .sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
3219
+ .sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
3220
+ .sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
3221
+ border-block-start: var(--sbb-table-border);
3222
+ }
3223
+ .sbb-table thead > tr:has(+ tr) > :is(th, td),
3224
+ .sbb-table-m thead > tr:has(+ tr) > :is(th, td),
3225
+ .sbb-table-s thead > tr:has(+ tr) > :is(th, td),
3226
+ .sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
3227
+ border-block-end: none;
3228
+ }
3225
3229
  .sbb-table caption,
3226
3230
  .sbb-table-m caption,
3227
3231
  .sbb-table-s caption,
@@ -3234,12 +3238,6 @@ sup {
3234
3238
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
3235
3239
  text-align: left;
3236
3240
  }
3237
- .sbb-table:not(:has(thead tr)) tbody > tr:first-of-type > td,
3238
- .sbb-table-m:not(:has(thead tr)) tbody > tr:first-of-type > td,
3239
- .sbb-table-s:not(:has(thead tr)) tbody > tr:first-of-type > td,
3240
- .sbb-table-xs:not(:has(thead tr)) tbody > tr:first-of-type > td {
3241
- border-block-start: var(--sbb-table-border);
3242
- }
3243
3241
 
3244
3242
  .sbb-table-m {
3245
3243
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
@@ -3304,10 +3302,10 @@ sbb-table-wrapper[negative] .sbb-table,
3304
3302
  letter-spacing: var(--sbb-typo-letter-spacing-text);
3305
3303
  font-weight: bold;
3306
3304
  background-color: var(--sbb-table-background-color);
3305
+ border-block-end: var(--sbb-table-border);
3307
3306
  border-inline-end: var(--sbb-table-border);
3308
3307
  padding-block: var(--sbb-table-header-padding-block);
3309
3308
  padding-inline: var(--sbb-table-header-padding-inline);
3310
- text-align: left;
3311
3309
  }
3312
3310
 
3313
3311
  .sbb-table-row--striped {
@@ -3385,6 +3383,30 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
3385
3383
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
3386
3384
  }
3387
3385
 
3386
+ .sbb-table-align-start {
3387
+ text-align: start;
3388
+ }
3389
+
3390
+ .sbb-table-align-center {
3391
+ text-align: center;
3392
+ }
3393
+
3394
+ .sbb-table-align-end {
3395
+ text-align: end;
3396
+ }
3397
+
3398
+ .sbb-table-align-justify {
3399
+ text-align: justify;
3400
+ }
3401
+
3402
+ .sbb-table-align-left {
3403
+ text-align: left;
3404
+ }
3405
+
3406
+ .sbb-table-align-right {
3407
+ text-align: right;
3408
+ }
3409
+
3388
3410
  .sbb-timetable-form {
3389
3411
  --sbb-timetable-form-content-max-width: 46.25rem;
3390
3412
  position: relative;
@@ -3172,42 +3172,25 @@ sup {
3172
3172
  caption-side: bottom;
3173
3173
  color: var(--sbb-table-color);
3174
3174
  table-layout: auto;
3175
+ text-align: left;
3175
3176
  }
3176
- .sbb-table thead > tr:last-of-type > th,
3177
- .sbb-table-m thead > tr:last-of-type > th,
3178
- .sbb-table-s thead > tr:last-of-type > th,
3179
- .sbb-table-xs thead > tr:last-of-type > th {
3180
- border-block-end: var(--sbb-table-border);
3181
- }
3182
- .sbb-table thead > tr:first-of-type > th,
3183
- .sbb-table-m thead > tr:first-of-type > th,
3184
- .sbb-table-s thead > tr:first-of-type > th,
3185
- .sbb-table-xs thead > tr:first-of-type > th {
3186
- border-block-start: var(--sbb-table-border);
3187
- }
3188
- .sbb-table thead > tr > th,
3189
- .sbb-table-m thead > tr > th,
3190
- .sbb-table-s thead > tr > th,
3191
- .sbb-table-xs thead > tr > th {
3177
+ .sbb-table th,
3178
+ .sbb-table-m th,
3179
+ .sbb-table-s th,
3180
+ .sbb-table-xs th {
3192
3181
  font-size: var(--sbb-table-header-cell-font-size);
3193
3182
  letter-spacing: var(--sbb-typo-letter-spacing-text);
3194
3183
  font-weight: bold;
3195
3184
  background-color: var(--sbb-table-background-color);
3185
+ border-block-end: var(--sbb-table-border);
3196
3186
  border-inline-end: var(--sbb-table-border);
3197
3187
  padding-block: var(--sbb-table-header-padding-block);
3198
3188
  padding-inline: var(--sbb-table-header-padding-inline);
3199
- text-align: left;
3200
3189
  }
3201
- .sbb-table thead > tr > th:first-of-type,
3202
- .sbb-table-m thead > tr > th:first-of-type,
3203
- .sbb-table-s thead > tr > th:first-of-type,
3204
- .sbb-table-xs thead > tr > th:first-of-type {
3205
- border-inline-start: var(--sbb-table-border);
3206
- }
3207
- .sbb-table tbody > tr > td,
3208
- .sbb-table-m tbody > tr > td,
3209
- .sbb-table-s tbody > tr > td,
3210
- .sbb-table-xs tbody > tr > td {
3190
+ .sbb-table td,
3191
+ .sbb-table-m td,
3192
+ .sbb-table-s td,
3193
+ .sbb-table-xs td {
3211
3194
  font-size: var(--sbb-table-data-cell-font-size);
3212
3195
  letter-spacing: var(--sbb-typo-letter-spacing-text);
3213
3196
  background-color: var(--sbb-table-background-color);
@@ -3216,12 +3199,33 @@ sup {
3216
3199
  padding-block: var(--sbb-table-cell-padding-block);
3217
3200
  padding-inline: var(--sbb-table-cell-padding-inline);
3218
3201
  }
3219
- .sbb-table tbody > tr > td:first-of-type,
3220
- .sbb-table-m tbody > tr > td:first-of-type,
3221
- .sbb-table-s tbody > tr > td:first-of-type,
3222
- .sbb-table-xs tbody > tr > td:first-of-type {
3202
+ .sbb-table :is(th, td).sbb-table-group-with-next,
3203
+ .sbb-table-m :is(th, td).sbb-table-group-with-next,
3204
+ .sbb-table-s :is(th, td).sbb-table-group-with-next,
3205
+ .sbb-table-xs :is(th, td).sbb-table-group-with-next {
3206
+ border-inline-end: none;
3207
+ }
3208
+ .sbb-table :is(th, td):first-child,
3209
+ .sbb-table-m :is(th, td):first-child,
3210
+ .sbb-table-s :is(th, td):first-child,
3211
+ .sbb-table-xs :is(th, td):first-child {
3223
3212
  border-inline-start: var(--sbb-table-border);
3224
3213
  }
3214
+ .sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
3215
+ .sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
3216
+ .sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
3217
+ .sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
3218
+ .sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
3219
+ .sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
3220
+ .sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
3221
+ border-block-start: var(--sbb-table-border);
3222
+ }
3223
+ .sbb-table thead > tr:has(+ tr) > :is(th, td),
3224
+ .sbb-table-m thead > tr:has(+ tr) > :is(th, td),
3225
+ .sbb-table-s thead > tr:has(+ tr) > :is(th, td),
3226
+ .sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
3227
+ border-block-end: none;
3228
+ }
3225
3229
  .sbb-table caption,
3226
3230
  .sbb-table-m caption,
3227
3231
  .sbb-table-s caption,
@@ -3234,12 +3238,6 @@ sup {
3234
3238
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
3235
3239
  text-align: left;
3236
3240
  }
3237
- .sbb-table:not(:has(thead tr)) tbody > tr:first-of-type > td,
3238
- .sbb-table-m:not(:has(thead tr)) tbody > tr:first-of-type > td,
3239
- .sbb-table-s:not(:has(thead tr)) tbody > tr:first-of-type > td,
3240
- .sbb-table-xs:not(:has(thead tr)) tbody > tr:first-of-type > td {
3241
- border-block-start: var(--sbb-table-border);
3242
- }
3243
3241
 
3244
3242
  .sbb-table-m {
3245
3243
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
@@ -3304,10 +3302,10 @@ sbb-table-wrapper[negative] .sbb-table,
3304
3302
  letter-spacing: var(--sbb-typo-letter-spacing-text);
3305
3303
  font-weight: bold;
3306
3304
  background-color: var(--sbb-table-background-color);
3305
+ border-block-end: var(--sbb-table-border);
3307
3306
  border-inline-end: var(--sbb-table-border);
3308
3307
  padding-block: var(--sbb-table-header-padding-block);
3309
3308
  padding-inline: var(--sbb-table-header-padding-inline);
3310
- text-align: left;
3311
3309
  }
3312
3310
 
3313
3311
  .sbb-table-row--striped {
@@ -3385,6 +3383,30 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
3385
3383
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
3386
3384
  }
3387
3385
 
3386
+ .sbb-table-align-start {
3387
+ text-align: start;
3388
+ }
3389
+
3390
+ .sbb-table-align-center {
3391
+ text-align: center;
3392
+ }
3393
+
3394
+ .sbb-table-align-end {
3395
+ text-align: end;
3396
+ }
3397
+
3398
+ .sbb-table-align-justify {
3399
+ text-align: justify;
3400
+ }
3401
+
3402
+ .sbb-table-align-left {
3403
+ text-align: left;
3404
+ }
3405
+
3406
+ .sbb-table-align-right {
3407
+ text-align: right;
3408
+ }
3409
+
3388
3410
  .sbb-timetable-form {
3389
3411
  --sbb-timetable-form-content-max-width: 46.25rem;
3390
3412
  position: relative;
package/table.css CHANGED
@@ -35,42 +35,25 @@
35
35
  caption-side: bottom;
36
36
  color: var(--sbb-table-color);
37
37
  table-layout: auto;
38
+ text-align: left;
38
39
  }
39
- .sbb-table thead > tr:last-of-type > th,
40
- .sbb-table-m thead > tr:last-of-type > th,
41
- .sbb-table-s thead > tr:last-of-type > th,
42
- .sbb-table-xs thead > tr:last-of-type > th {
43
- border-block-end: var(--sbb-table-border);
44
- }
45
- .sbb-table thead > tr:first-of-type > th,
46
- .sbb-table-m thead > tr:first-of-type > th,
47
- .sbb-table-s thead > tr:first-of-type > th,
48
- .sbb-table-xs thead > tr:first-of-type > th {
49
- border-block-start: var(--sbb-table-border);
50
- }
51
- .sbb-table thead > tr > th,
52
- .sbb-table-m thead > tr > th,
53
- .sbb-table-s thead > tr > th,
54
- .sbb-table-xs thead > tr > th {
40
+ .sbb-table th,
41
+ .sbb-table-m th,
42
+ .sbb-table-s th,
43
+ .sbb-table-xs th {
55
44
  font-size: var(--sbb-table-header-cell-font-size);
56
45
  letter-spacing: var(--sbb-typo-letter-spacing-text);
57
46
  font-weight: bold;
58
47
  background-color: var(--sbb-table-background-color);
48
+ border-block-end: var(--sbb-table-border);
59
49
  border-inline-end: var(--sbb-table-border);
60
50
  padding-block: var(--sbb-table-header-padding-block);
61
51
  padding-inline: var(--sbb-table-header-padding-inline);
62
- text-align: left;
63
52
  }
64
- .sbb-table thead > tr > th:first-of-type,
65
- .sbb-table-m thead > tr > th:first-of-type,
66
- .sbb-table-s thead > tr > th:first-of-type,
67
- .sbb-table-xs thead > tr > th:first-of-type {
68
- border-inline-start: var(--sbb-table-border);
69
- }
70
- .sbb-table tbody > tr > td,
71
- .sbb-table-m tbody > tr > td,
72
- .sbb-table-s tbody > tr > td,
73
- .sbb-table-xs tbody > tr > td {
53
+ .sbb-table td,
54
+ .sbb-table-m td,
55
+ .sbb-table-s td,
56
+ .sbb-table-xs td {
74
57
  font-size: var(--sbb-table-data-cell-font-size);
75
58
  letter-spacing: var(--sbb-typo-letter-spacing-text);
76
59
  background-color: var(--sbb-table-background-color);
@@ -79,12 +62,33 @@
79
62
  padding-block: var(--sbb-table-cell-padding-block);
80
63
  padding-inline: var(--sbb-table-cell-padding-inline);
81
64
  }
82
- .sbb-table tbody > tr > td:first-of-type,
83
- .sbb-table-m tbody > tr > td:first-of-type,
84
- .sbb-table-s tbody > tr > td:first-of-type,
85
- .sbb-table-xs tbody > tr > td:first-of-type {
65
+ .sbb-table :is(th, td).sbb-table-group-with-next,
66
+ .sbb-table-m :is(th, td).sbb-table-group-with-next,
67
+ .sbb-table-s :is(th, td).sbb-table-group-with-next,
68
+ .sbb-table-xs :is(th, td).sbb-table-group-with-next {
69
+ border-inline-end: none;
70
+ }
71
+ .sbb-table :is(th, td):first-child,
72
+ .sbb-table-m :is(th, td):first-child,
73
+ .sbb-table-s :is(th, td):first-child,
74
+ .sbb-table-xs :is(th, td):first-child {
86
75
  border-inline-start: var(--sbb-table-border);
87
76
  }
77
+ .sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
78
+ .sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
79
+ .sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
80
+ .sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
81
+ .sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
82
+ .sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
83
+ .sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
84
+ border-block-start: var(--sbb-table-border);
85
+ }
86
+ .sbb-table thead > tr:has(+ tr) > :is(th, td),
87
+ .sbb-table-m thead > tr:has(+ tr) > :is(th, td),
88
+ .sbb-table-s thead > tr:has(+ tr) > :is(th, td),
89
+ .sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
90
+ border-block-end: none;
91
+ }
88
92
  .sbb-table caption,
89
93
  .sbb-table-m caption,
90
94
  .sbb-table-s caption,
@@ -97,12 +101,6 @@
97
101
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
98
102
  text-align: left;
99
103
  }
100
- .sbb-table:not(:has(thead tr)) tbody > tr:first-of-type > td,
101
- .sbb-table-m:not(:has(thead tr)) tbody > tr:first-of-type > td,
102
- .sbb-table-s:not(:has(thead tr)) tbody > tr:first-of-type > td,
103
- .sbb-table-xs:not(:has(thead tr)) tbody > tr:first-of-type > td {
104
- border-block-start: var(--sbb-table-border);
105
- }
106
104
 
107
105
  .sbb-table-m {
108
106
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
@@ -167,10 +165,10 @@ sbb-table-wrapper[negative] .sbb-table,
167
165
  letter-spacing: var(--sbb-typo-letter-spacing-text);
168
166
  font-weight: bold;
169
167
  background-color: var(--sbb-table-background-color);
168
+ border-block-end: var(--sbb-table-border);
170
169
  border-inline-end: var(--sbb-table-border);
171
170
  padding-block: var(--sbb-table-header-padding-block);
172
171
  padding-inline: var(--sbb-table-header-padding-inline);
173
- text-align: left;
174
172
  }
175
173
 
176
174
  .sbb-table-row--striped {
@@ -246,4 +244,28 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
246
244
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
247
245
  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
248
246
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
247
+ }
248
+
249
+ .sbb-table-align-start {
250
+ text-align: start;
251
+ }
252
+
253
+ .sbb-table-align-center {
254
+ text-align: center;
255
+ }
256
+
257
+ .sbb-table-align-end {
258
+ text-align: end;
259
+ }
260
+
261
+ .sbb-table-align-justify {
262
+ text-align: justify;
263
+ }
264
+
265
+ .sbb-table-align-left {
266
+ text-align: left;
267
+ }
268
+
269
+ .sbb-table-align-right {
270
+ text-align: right;
249
271
  }