@sbb-esta/lyne-elements-dev 5.10.0-dev.1790760894 → 5.10.0-dev.1790846348

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.
Files changed (11) hide show
  1. package/development/expansion-panel.pure.js +6 -3
  2. package/expansion-panel/_expansion-panel.global.scss +3 -1
  3. package/expansion-panel.pure.js +3 -3
  4. package/lean-off-brand-theme.css +163 -1
  5. package/lean-safety-theme.css +163 -1
  6. package/lean-theme.css +163 -1
  7. package/off-brand-theme.css +163 -1
  8. package/package.json +2 -2
  9. package/safety-theme.css +163 -1
  10. package/standard-theme.css +163 -1
  11. package/table/_table.global.scss +229 -0
package/lean-theme.css CHANGED
@@ -1329,7 +1329,6 @@ summary {
1329
1329
  --sbb-download-info-color: var(--sbb-color-granite);
1330
1330
  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
1331
1331
  --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
1332
- --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
1333
1332
  --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
1334
1333
  --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
1335
1334
  --sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
@@ -1352,6 +1351,9 @@ summary {
1352
1351
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1353
1352
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1354
1353
  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-s);
1354
+ --sbb-expansion-panel-header-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
1355
+ --sbb-expansion-panel-header-translate-y-hover: -0.125rem;
1356
+ --sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
1355
1357
  --sbb-file-selector-color: var(--sbb-color-2);
1356
1358
  --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
1357
1359
  --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
@@ -1774,6 +1776,13 @@ summary {
1774
1776
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
1775
1777
  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
1776
1778
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
1779
+ --sbb-table-sort-header-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
1780
+ --sbb-table-sort-header-color: var(--sbb-color-2);
1781
+ --sbb-table-sort-header-hover-color: var(--sbb-color-primary125);
1782
+ --sbb-table-sort-header-hover-color: light-dark(
1783
+ var(--sbb-color-primary125),
1784
+ var(--sbb-color-primary85)
1785
+ );
1777
1786
  --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
1778
1787
  --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
1779
1788
  --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
@@ -3276,6 +3285,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
3276
3285
  --sbb-disable-animation-duration,
3277
3286
  var(--sbb-animation-duration-6x)
3278
3287
  );
3288
+ --sbb-table-sort-header-animation-duration: var(
3289
+ --sbb-disable-animation-duration,
3290
+ var(--sbb-animation-duration-6x)
3291
+ );
3279
3292
  border-spacing: 0;
3280
3293
  caption-side: bottom;
3281
3294
  color: var(--sbb-table-color);
@@ -3362,6 +3375,8 @@ sbb-table-wrapper[negative] .sbb-table,
3362
3375
  --sbb-table-color: var(--sbb-color-1-negative);
3363
3376
  --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
3364
3377
  --sbb-table-caption-color: var(--sbb-color-cement);
3378
+ --sbb-table-sort-header-color: var(--sbb-color-2-negative);
3379
+ --sbb-table-sort-header-hover-color: var(--sbb-color-primary85);
3365
3380
  }
3366
3381
 
3367
3382
  .sbb-table--striped tbody tr:nth-child(odd) :is(th, td) {
@@ -3489,6 +3504,153 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
3489
3504
  text-align: right;
3490
3505
  }
3491
3506
 
3507
+ .sbb-sort-header {
3508
+ position: relative;
3509
+ }
3510
+ .sbb-sort-header:is(:focus-visible, .cdk-keyboard-focused, .cdk-program-focused), .sbb-sort-header:has(.sbb-sort-header-container:focus-visible) {
3511
+ --sbb-focus-outline-offset: calc(-1 * var(--sbb-focus-outline-width));
3512
+ outline-offset: var(--sbb-focus-outline-offset);
3513
+ outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
3514
+ }
3515
+ .sbb-sort-header:not(.sbb-sort-header-disabled) {
3516
+ cursor: pointer;
3517
+ }
3518
+ .sbb-sort-header:not(.sbb-sort-header-disabled):hover .sbb-sort-header-container {
3519
+ color: var(--sbb-table-sort-header-hover-color);
3520
+ }
3521
+
3522
+ .sbb-sort-header-sorted {
3523
+ color: var(--sbb-table-sort-header-color);
3524
+ }
3525
+
3526
+ .sbb-sort-header-container {
3527
+ display: flex;
3528
+ letter-spacing: normal;
3529
+ text-align: left;
3530
+ height: 100%;
3531
+ outline: 0;
3532
+ }
3533
+ .sbb-sort-header-disabled .sbb-sort-header-container {
3534
+ cursor: default;
3535
+ }
3536
+ .sbb-table-align-center .sbb-sort-header-container {
3537
+ text-align: center;
3538
+ }
3539
+
3540
+ .sbb-sort-header-content {
3541
+ flex-shrink: 1;
3542
+ flex-grow: 1;
3543
+ }
3544
+
3545
+ .sbb-sort-header-position-before {
3546
+ flex-direction: row-reverse;
3547
+ }
3548
+
3549
+ .sbb-sort-header-arrow {
3550
+ height: var(--sbb-size-icon-ui-small);
3551
+ width: var(--sbb-size-icon-ui-small);
3552
+ min-width: var(--sbb-size-icon-ui-small);
3553
+ position: relative;
3554
+ opacity: 0;
3555
+ animation: var(--sbb-sort-header-animation-name) var(--sbb-table-sort-header-animation-duration) var(--sbb-table-sort-header-animation-easing);
3556
+ transition-property: opacity, translate;
3557
+ transition-duration: var(--sbb-table-sort-header-animation-duration);
3558
+ transition-timing-function: var(--sbb-table-sort-header-animation-easing);
3559
+ margin: -0.0625rem -0.5rem -0.0625rem -0.25rem;
3560
+ }
3561
+ .sbb-sort-header-position-before .sbb-sort-header-arrow {
3562
+ margin: -0.0625rem -0.25rem -0.0625rem -0.0625rem;
3563
+ }
3564
+ .sbb-sort-header-arrow svg {
3565
+ width: 100%;
3566
+ height: 100%;
3567
+ }
3568
+ .sbb-sort-header-arrow svg :where(path:nth-child(2)) {
3569
+ transform-origin: center;
3570
+ }
3571
+ .sbb-sort-header-arrow.no-transition {
3572
+ transition: opacity 0ms, translate 0ms !important;
3573
+ }
3574
+ .sbb-sort-header-arrow.active, .sbb-sort-header-arrow.desc-to-active, .sbb-sort-header-arrow.asc-to-active {
3575
+ opacity: 1;
3576
+ }
3577
+ .sbb-sort-header-arrow.hint, .sbb-sort-header-arrow.desc-to-hint, .sbb-sort-header-arrow.asc-to-hint {
3578
+ opacity: 0.54;
3579
+ }
3580
+ .sbb-sort-header-arrow.desc, .sbb-sort-header-arrow.asc, .sbb-sort-header-arrow.void, .sbb-sort-header-arrow.hint-to-desc, .sbb-sort-header-arrow.active-to-desc, .sbb-sort-header-arrow.hint-to-asc, .sbb-sort-header-arrow.active-to-asc {
3581
+ opacity: 0;
3582
+ }
3583
+ .sbb-sort-header-arrow.hint, .sbb-sort-header-arrow.active, .sbb-sort-header-arrow.desc-to-active, .sbb-sort-header-arrow.asc-to-active {
3584
+ translate: 0;
3585
+ }
3586
+ .sbb-sort-header-arrow.desc, .sbb-sort-header-arrow.active-to-desc {
3587
+ translate: 0 25%;
3588
+ }
3589
+ .sbb-sort-header-arrow.asc, .sbb-sort-header-arrow.active-to-asc {
3590
+ translate: 0 -25%;
3591
+ }
3592
+ .sbb-sort-header-arrow.desc-to-hint {
3593
+ --sbb-sort-header-animation-name: move-desc-to-hint;
3594
+ translate: 0;
3595
+ }
3596
+ .sbb-sort-header-arrow.hint-to-desc {
3597
+ --sbb-sort-header-animation-name: move-hint-to-desc;
3598
+ translate: 0 25%;
3599
+ }
3600
+ .sbb-sort-header-arrow.asc-to-hint {
3601
+ --sbb-sort-header-animation-name: move-asc-to-hint;
3602
+ translate: 0;
3603
+ }
3604
+ .sbb-sort-header-arrow.hint-to-asc {
3605
+ --sbb-sort-header-animation-name: move-hint-to-asc;
3606
+ translate: 0 -25%;
3607
+ }
3608
+
3609
+ .sbb-sort-indicator {
3610
+ transition: scale var(--sbb-table-sort-header-animation-duration) var(--sbb-table-sort-header-animation-easing);
3611
+ }
3612
+ .sbb-sort-indicator.asc, .sbb-sort-indicator.active-asc {
3613
+ scale: 1 -1;
3614
+ }
3615
+ .sbb-sort-indicator.desc, .sbb-sort-indicator.active-desc {
3616
+ scale: 1 1;
3617
+ }
3618
+ .sbb-sort-indicator.no-transition {
3619
+ transition: none !important;
3620
+ }
3621
+
3622
+ @keyframes move-desc-to-hint {
3623
+ from {
3624
+ translate: 0 25%;
3625
+ }
3626
+ to {
3627
+ translate: 0 0;
3628
+ }
3629
+ }
3630
+ @keyframes move-hint-to-desc {
3631
+ from {
3632
+ translate: 0 0;
3633
+ }
3634
+ to {
3635
+ translate: 0 25%;
3636
+ }
3637
+ }
3638
+ @keyframes move-asc-to-hint {
3639
+ from {
3640
+ translate: 0 -25%;
3641
+ }
3642
+ to {
3643
+ translate: 0 0;
3644
+ }
3645
+ }
3646
+ @keyframes move-hint-to-asc {
3647
+ from {
3648
+ translate: 0 0;
3649
+ }
3650
+ to {
3651
+ translate: 0 -25%;
3652
+ }
3653
+ }
3492
3654
  sbb-tab-nav-bar .sbb-tab-amount {
3493
3655
  margin: 0;
3494
3656
  color: var(--sbb-tab-label-amount-color);
package/off-brand-theme.css CHANGED
@@ -1309,7 +1309,6 @@ summary {
1309
1309
  --sbb-download-info-color: var(--sbb-color-granite);
1310
1310
  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
1311
1311
  --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
1312
- --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
1313
1312
  --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
1314
1313
  --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
1315
1314
  --sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
@@ -1332,6 +1331,9 @@ summary {
1332
1331
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1333
1332
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1334
1333
  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
1334
+ --sbb-expansion-panel-header-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
1335
+ --sbb-expansion-panel-header-translate-y-hover: -0.125rem;
1336
+ --sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
1335
1337
  --sbb-file-selector-color: var(--sbb-color-2);
1336
1338
  --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
1337
1339
  --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
@@ -1754,6 +1756,13 @@ summary {
1754
1756
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
1755
1757
  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
1756
1758
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
1759
+ --sbb-table-sort-header-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
1760
+ --sbb-table-sort-header-color: var(--sbb-color-2);
1761
+ --sbb-table-sort-header-hover-color: var(--sbb-color-primary125);
1762
+ --sbb-table-sort-header-hover-color: light-dark(
1763
+ var(--sbb-color-primary125),
1764
+ var(--sbb-color-primary85)
1765
+ );
1757
1766
  --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
1758
1767
  --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
1759
1768
  --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
@@ -3256,6 +3265,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
3256
3265
  --sbb-disable-animation-duration,
3257
3266
  var(--sbb-animation-duration-6x)
3258
3267
  );
3268
+ --sbb-table-sort-header-animation-duration: var(
3269
+ --sbb-disable-animation-duration,
3270
+ var(--sbb-animation-duration-6x)
3271
+ );
3259
3272
  border-spacing: 0;
3260
3273
  caption-side: bottom;
3261
3274
  color: var(--sbb-table-color);
@@ -3342,6 +3355,8 @@ sbb-table-wrapper[negative] .sbb-table,
3342
3355
  --sbb-table-color: var(--sbb-color-1-negative);
3343
3356
  --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
3344
3357
  --sbb-table-caption-color: var(--sbb-color-cement);
3358
+ --sbb-table-sort-header-color: var(--sbb-color-2-negative);
3359
+ --sbb-table-sort-header-hover-color: var(--sbb-color-primary85);
3345
3360
  }
3346
3361
 
3347
3362
  .sbb-table--striped tbody tr:nth-child(odd) :is(th, td) {
@@ -3469,6 +3484,153 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
3469
3484
  text-align: right;
3470
3485
  }
3471
3486
 
3487
+ .sbb-sort-header {
3488
+ position: relative;
3489
+ }
3490
+ .sbb-sort-header:is(:focus-visible, .cdk-keyboard-focused, .cdk-program-focused), .sbb-sort-header:has(.sbb-sort-header-container:focus-visible) {
3491
+ --sbb-focus-outline-offset: calc(-1 * var(--sbb-focus-outline-width));
3492
+ outline-offset: var(--sbb-focus-outline-offset);
3493
+ outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
3494
+ }
3495
+ .sbb-sort-header:not(.sbb-sort-header-disabled) {
3496
+ cursor: pointer;
3497
+ }
3498
+ .sbb-sort-header:not(.sbb-sort-header-disabled):hover .sbb-sort-header-container {
3499
+ color: var(--sbb-table-sort-header-hover-color);
3500
+ }
3501
+
3502
+ .sbb-sort-header-sorted {
3503
+ color: var(--sbb-table-sort-header-color);
3504
+ }
3505
+
3506
+ .sbb-sort-header-container {
3507
+ display: flex;
3508
+ letter-spacing: normal;
3509
+ text-align: left;
3510
+ height: 100%;
3511
+ outline: 0;
3512
+ }
3513
+ .sbb-sort-header-disabled .sbb-sort-header-container {
3514
+ cursor: default;
3515
+ }
3516
+ .sbb-table-align-center .sbb-sort-header-container {
3517
+ text-align: center;
3518
+ }
3519
+
3520
+ .sbb-sort-header-content {
3521
+ flex-shrink: 1;
3522
+ flex-grow: 1;
3523
+ }
3524
+
3525
+ .sbb-sort-header-position-before {
3526
+ flex-direction: row-reverse;
3527
+ }
3528
+
3529
+ .sbb-sort-header-arrow {
3530
+ height: var(--sbb-size-icon-ui-small);
3531
+ width: var(--sbb-size-icon-ui-small);
3532
+ min-width: var(--sbb-size-icon-ui-small);
3533
+ position: relative;
3534
+ opacity: 0;
3535
+ animation: var(--sbb-sort-header-animation-name) var(--sbb-table-sort-header-animation-duration) var(--sbb-table-sort-header-animation-easing);
3536
+ transition-property: opacity, translate;
3537
+ transition-duration: var(--sbb-table-sort-header-animation-duration);
3538
+ transition-timing-function: var(--sbb-table-sort-header-animation-easing);
3539
+ margin: -0.0625rem -0.5rem -0.0625rem -0.25rem;
3540
+ }
3541
+ .sbb-sort-header-position-before .sbb-sort-header-arrow {
3542
+ margin: -0.0625rem -0.25rem -0.0625rem -0.0625rem;
3543
+ }
3544
+ .sbb-sort-header-arrow svg {
3545
+ width: 100%;
3546
+ height: 100%;
3547
+ }
3548
+ .sbb-sort-header-arrow svg :where(path:nth-child(2)) {
3549
+ transform-origin: center;
3550
+ }
3551
+ .sbb-sort-header-arrow.no-transition {
3552
+ transition: opacity 0ms, translate 0ms !important;
3553
+ }
3554
+ .sbb-sort-header-arrow.active, .sbb-sort-header-arrow.desc-to-active, .sbb-sort-header-arrow.asc-to-active {
3555
+ opacity: 1;
3556
+ }
3557
+ .sbb-sort-header-arrow.hint, .sbb-sort-header-arrow.desc-to-hint, .sbb-sort-header-arrow.asc-to-hint {
3558
+ opacity: 0.54;
3559
+ }
3560
+ .sbb-sort-header-arrow.desc, .sbb-sort-header-arrow.asc, .sbb-sort-header-arrow.void, .sbb-sort-header-arrow.hint-to-desc, .sbb-sort-header-arrow.active-to-desc, .sbb-sort-header-arrow.hint-to-asc, .sbb-sort-header-arrow.active-to-asc {
3561
+ opacity: 0;
3562
+ }
3563
+ .sbb-sort-header-arrow.hint, .sbb-sort-header-arrow.active, .sbb-sort-header-arrow.desc-to-active, .sbb-sort-header-arrow.asc-to-active {
3564
+ translate: 0;
3565
+ }
3566
+ .sbb-sort-header-arrow.desc, .sbb-sort-header-arrow.active-to-desc {
3567
+ translate: 0 25%;
3568
+ }
3569
+ .sbb-sort-header-arrow.asc, .sbb-sort-header-arrow.active-to-asc {
3570
+ translate: 0 -25%;
3571
+ }
3572
+ .sbb-sort-header-arrow.desc-to-hint {
3573
+ --sbb-sort-header-animation-name: move-desc-to-hint;
3574
+ translate: 0;
3575
+ }
3576
+ .sbb-sort-header-arrow.hint-to-desc {
3577
+ --sbb-sort-header-animation-name: move-hint-to-desc;
3578
+ translate: 0 25%;
3579
+ }
3580
+ .sbb-sort-header-arrow.asc-to-hint {
3581
+ --sbb-sort-header-animation-name: move-asc-to-hint;
3582
+ translate: 0;
3583
+ }
3584
+ .sbb-sort-header-arrow.hint-to-asc {
3585
+ --sbb-sort-header-animation-name: move-hint-to-asc;
3586
+ translate: 0 -25%;
3587
+ }
3588
+
3589
+ .sbb-sort-indicator {
3590
+ transition: scale var(--sbb-table-sort-header-animation-duration) var(--sbb-table-sort-header-animation-easing);
3591
+ }
3592
+ .sbb-sort-indicator.asc, .sbb-sort-indicator.active-asc {
3593
+ scale: 1 -1;
3594
+ }
3595
+ .sbb-sort-indicator.desc, .sbb-sort-indicator.active-desc {
3596
+ scale: 1 1;
3597
+ }
3598
+ .sbb-sort-indicator.no-transition {
3599
+ transition: none !important;
3600
+ }
3601
+
3602
+ @keyframes move-desc-to-hint {
3603
+ from {
3604
+ translate: 0 25%;
3605
+ }
3606
+ to {
3607
+ translate: 0 0;
3608
+ }
3609
+ }
3610
+ @keyframes move-hint-to-desc {
3611
+ from {
3612
+ translate: 0 0;
3613
+ }
3614
+ to {
3615
+ translate: 0 25%;
3616
+ }
3617
+ }
3618
+ @keyframes move-asc-to-hint {
3619
+ from {
3620
+ translate: 0 -25%;
3621
+ }
3622
+ to {
3623
+ translate: 0 0;
3624
+ }
3625
+ }
3626
+ @keyframes move-hint-to-asc {
3627
+ from {
3628
+ translate: 0 0;
3629
+ }
3630
+ to {
3631
+ translate: 0 -25%;
3632
+ }
3633
+ }
3472
3634
  sbb-tab-nav-bar .sbb-tab-amount {
3473
3635
  margin: 0;
3474
3636
  color: var(--sbb-tab-label-amount-color);
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "5.10.0-dev.1790760894",
3
+ "version": "5.10.0-dev.1790846348",
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/2e221ce0fe3563fe6cf5fe6292d10ac7d4bfe767"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/f3ca14b510f761769b401f03cc61b7249c6018d0"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {
package/safety-theme.css CHANGED
@@ -1329,7 +1329,6 @@ summary {
1329
1329
  --sbb-download-info-color: var(--sbb-color-granite);
1330
1330
  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
1331
1331
  --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
1332
- --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
1333
1332
  --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
1334
1333
  --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
1335
1334
  --sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
@@ -1352,6 +1351,9 @@ summary {
1352
1351
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1353
1352
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1354
1353
  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
1354
+ --sbb-expansion-panel-header-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
1355
+ --sbb-expansion-panel-header-translate-y-hover: -0.125rem;
1356
+ --sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
1355
1357
  --sbb-file-selector-color: var(--sbb-color-2);
1356
1358
  --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
1357
1359
  --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
@@ -1774,6 +1776,13 @@ summary {
1774
1776
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
1775
1777
  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
1776
1778
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
1779
+ --sbb-table-sort-header-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
1780
+ --sbb-table-sort-header-color: var(--sbb-color-2);
1781
+ --sbb-table-sort-header-hover-color: var(--sbb-color-primary125);
1782
+ --sbb-table-sort-header-hover-color: light-dark(
1783
+ var(--sbb-color-primary125),
1784
+ var(--sbb-color-primary85)
1785
+ );
1777
1786
  --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
1778
1787
  --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
1779
1788
  --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
@@ -3276,6 +3285,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
3276
3285
  --sbb-disable-animation-duration,
3277
3286
  var(--sbb-animation-duration-6x)
3278
3287
  );
3288
+ --sbb-table-sort-header-animation-duration: var(
3289
+ --sbb-disable-animation-duration,
3290
+ var(--sbb-animation-duration-6x)
3291
+ );
3279
3292
  border-spacing: 0;
3280
3293
  caption-side: bottom;
3281
3294
  color: var(--sbb-table-color);
@@ -3362,6 +3375,8 @@ sbb-table-wrapper[negative] .sbb-table,
3362
3375
  --sbb-table-color: var(--sbb-color-1-negative);
3363
3376
  --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
3364
3377
  --sbb-table-caption-color: var(--sbb-color-cement);
3378
+ --sbb-table-sort-header-color: var(--sbb-color-2-negative);
3379
+ --sbb-table-sort-header-hover-color: var(--sbb-color-primary85);
3365
3380
  }
3366
3381
 
3367
3382
  .sbb-table--striped tbody tr:nth-child(odd) :is(th, td) {
@@ -3489,6 +3504,153 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
3489
3504
  text-align: right;
3490
3505
  }
3491
3506
 
3507
+ .sbb-sort-header {
3508
+ position: relative;
3509
+ }
3510
+ .sbb-sort-header:is(:focus-visible, .cdk-keyboard-focused, .cdk-program-focused), .sbb-sort-header:has(.sbb-sort-header-container:focus-visible) {
3511
+ --sbb-focus-outline-offset: calc(-1 * var(--sbb-focus-outline-width));
3512
+ outline-offset: var(--sbb-focus-outline-offset);
3513
+ outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
3514
+ }
3515
+ .sbb-sort-header:not(.sbb-sort-header-disabled) {
3516
+ cursor: pointer;
3517
+ }
3518
+ .sbb-sort-header:not(.sbb-sort-header-disabled):hover .sbb-sort-header-container {
3519
+ color: var(--sbb-table-sort-header-hover-color);
3520
+ }
3521
+
3522
+ .sbb-sort-header-sorted {
3523
+ color: var(--sbb-table-sort-header-color);
3524
+ }
3525
+
3526
+ .sbb-sort-header-container {
3527
+ display: flex;
3528
+ letter-spacing: normal;
3529
+ text-align: left;
3530
+ height: 100%;
3531
+ outline: 0;
3532
+ }
3533
+ .sbb-sort-header-disabled .sbb-sort-header-container {
3534
+ cursor: default;
3535
+ }
3536
+ .sbb-table-align-center .sbb-sort-header-container {
3537
+ text-align: center;
3538
+ }
3539
+
3540
+ .sbb-sort-header-content {
3541
+ flex-shrink: 1;
3542
+ flex-grow: 1;
3543
+ }
3544
+
3545
+ .sbb-sort-header-position-before {
3546
+ flex-direction: row-reverse;
3547
+ }
3548
+
3549
+ .sbb-sort-header-arrow {
3550
+ height: var(--sbb-size-icon-ui-small);
3551
+ width: var(--sbb-size-icon-ui-small);
3552
+ min-width: var(--sbb-size-icon-ui-small);
3553
+ position: relative;
3554
+ opacity: 0;
3555
+ animation: var(--sbb-sort-header-animation-name) var(--sbb-table-sort-header-animation-duration) var(--sbb-table-sort-header-animation-easing);
3556
+ transition-property: opacity, translate;
3557
+ transition-duration: var(--sbb-table-sort-header-animation-duration);
3558
+ transition-timing-function: var(--sbb-table-sort-header-animation-easing);
3559
+ margin: -0.0625rem -0.5rem -0.0625rem -0.25rem;
3560
+ }
3561
+ .sbb-sort-header-position-before .sbb-sort-header-arrow {
3562
+ margin: -0.0625rem -0.25rem -0.0625rem -0.0625rem;
3563
+ }
3564
+ .sbb-sort-header-arrow svg {
3565
+ width: 100%;
3566
+ height: 100%;
3567
+ }
3568
+ .sbb-sort-header-arrow svg :where(path:nth-child(2)) {
3569
+ transform-origin: center;
3570
+ }
3571
+ .sbb-sort-header-arrow.no-transition {
3572
+ transition: opacity 0ms, translate 0ms !important;
3573
+ }
3574
+ .sbb-sort-header-arrow.active, .sbb-sort-header-arrow.desc-to-active, .sbb-sort-header-arrow.asc-to-active {
3575
+ opacity: 1;
3576
+ }
3577
+ .sbb-sort-header-arrow.hint, .sbb-sort-header-arrow.desc-to-hint, .sbb-sort-header-arrow.asc-to-hint {
3578
+ opacity: 0.54;
3579
+ }
3580
+ .sbb-sort-header-arrow.desc, .sbb-sort-header-arrow.asc, .sbb-sort-header-arrow.void, .sbb-sort-header-arrow.hint-to-desc, .sbb-sort-header-arrow.active-to-desc, .sbb-sort-header-arrow.hint-to-asc, .sbb-sort-header-arrow.active-to-asc {
3581
+ opacity: 0;
3582
+ }
3583
+ .sbb-sort-header-arrow.hint, .sbb-sort-header-arrow.active, .sbb-sort-header-arrow.desc-to-active, .sbb-sort-header-arrow.asc-to-active {
3584
+ translate: 0;
3585
+ }
3586
+ .sbb-sort-header-arrow.desc, .sbb-sort-header-arrow.active-to-desc {
3587
+ translate: 0 25%;
3588
+ }
3589
+ .sbb-sort-header-arrow.asc, .sbb-sort-header-arrow.active-to-asc {
3590
+ translate: 0 -25%;
3591
+ }
3592
+ .sbb-sort-header-arrow.desc-to-hint {
3593
+ --sbb-sort-header-animation-name: move-desc-to-hint;
3594
+ translate: 0;
3595
+ }
3596
+ .sbb-sort-header-arrow.hint-to-desc {
3597
+ --sbb-sort-header-animation-name: move-hint-to-desc;
3598
+ translate: 0 25%;
3599
+ }
3600
+ .sbb-sort-header-arrow.asc-to-hint {
3601
+ --sbb-sort-header-animation-name: move-asc-to-hint;
3602
+ translate: 0;
3603
+ }
3604
+ .sbb-sort-header-arrow.hint-to-asc {
3605
+ --sbb-sort-header-animation-name: move-hint-to-asc;
3606
+ translate: 0 -25%;
3607
+ }
3608
+
3609
+ .sbb-sort-indicator {
3610
+ transition: scale var(--sbb-table-sort-header-animation-duration) var(--sbb-table-sort-header-animation-easing);
3611
+ }
3612
+ .sbb-sort-indicator.asc, .sbb-sort-indicator.active-asc {
3613
+ scale: 1 -1;
3614
+ }
3615
+ .sbb-sort-indicator.desc, .sbb-sort-indicator.active-desc {
3616
+ scale: 1 1;
3617
+ }
3618
+ .sbb-sort-indicator.no-transition {
3619
+ transition: none !important;
3620
+ }
3621
+
3622
+ @keyframes move-desc-to-hint {
3623
+ from {
3624
+ translate: 0 25%;
3625
+ }
3626
+ to {
3627
+ translate: 0 0;
3628
+ }
3629
+ }
3630
+ @keyframes move-hint-to-desc {
3631
+ from {
3632
+ translate: 0 0;
3633
+ }
3634
+ to {
3635
+ translate: 0 25%;
3636
+ }
3637
+ }
3638
+ @keyframes move-asc-to-hint {
3639
+ from {
3640
+ translate: 0 -25%;
3641
+ }
3642
+ to {
3643
+ translate: 0 0;
3644
+ }
3645
+ }
3646
+ @keyframes move-hint-to-asc {
3647
+ from {
3648
+ translate: 0 0;
3649
+ }
3650
+ to {
3651
+ translate: 0 -25%;
3652
+ }
3653
+ }
3492
3654
  sbb-tab-nav-bar .sbb-tab-amount {
3493
3655
  margin: 0;
3494
3656
  color: var(--sbb-tab-label-amount-color);