@sbb-esta/lyne-elements 4.10.0 → 4.11.0

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 (73) hide show
  1. package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +1 -1
  2. package/breadcrumb/breadcrumb-group.js +1 -1
  3. package/{breadcrumb-group.component-Cc6CHbVy.js → breadcrumb-group.component-F3-JZkfO.js} +1 -1
  4. package/breadcrumb.js +1 -1
  5. package/breadcrumb.pure.js +1 -1
  6. package/calendar/calendar/calendar.component.js +1 -1
  7. package/calendar/calendar.js +1 -1
  8. package/{calendar.component-DhmaJt2k.js → calendar.component-DjQOyRGl.js} +2 -2
  9. package/calendar.js +1 -1
  10. package/calendar.pure.js +1 -1
  11. package/core/base-elements/element.js +1 -1
  12. package/core/styles/mixins/table.scss +18 -19
  13. package/core/styles/theme.scss +3 -1
  14. package/custom-elements.json +986 -959
  15. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +1 -1
  16. package/development/breadcrumb/breadcrumb-group.js +1 -1
  17. package/development/breadcrumb-group.component-HBWRdDpS.js +195 -0
  18. package/development/breadcrumb.js +1 -1
  19. package/development/breadcrumb.pure.js +1 -1
  20. package/development/core/base-elements/element.d.ts.map +1 -1
  21. package/development/core/base-elements/element.js +2 -5
  22. package/development/dialog/dialog/dialog.component.js +1 -1
  23. package/development/dialog/dialog.js +1 -1
  24. package/development/{dialog.component-TBiL0Sdq.js → dialog.component-DKuR4u-y.js} +2 -2
  25. package/development/dialog.js +1 -1
  26. package/development/dialog.pure.js +1 -1
  27. package/development/expansion-panel/expansion-panel/expansion-panel.component.js +1 -1
  28. package/development/expansion-panel/expansion-panel.js +1 -1
  29. package/development/{expansion-panel.component-PDUmZe7w.js → expansion-panel.component-CV_IuWZA.js} +2 -2
  30. package/development/expansion-panel.js +1 -1
  31. package/development/expansion-panel.pure.js +1 -1
  32. package/development/form-field/form-field/form-field.component.d.ts +6 -0
  33. package/development/form-field/form-field/form-field.component.d.ts.map +1 -1
  34. package/development/form-field/form-field/form-field.component.js +1 -1
  35. package/development/form-field/form-field.js +1 -1
  36. package/development/form-field.component-DfMO_ihX.js +706 -0
  37. package/development/form-field.js +1 -1
  38. package/development/form-field.pure.js +1 -1
  39. package/development/sidebar/sidebar/sidebar.component.d.ts +1 -0
  40. package/development/sidebar/sidebar/sidebar.component.d.ts.map +1 -1
  41. package/development/sidebar/sidebar/sidebar.component.js +1 -1
  42. package/development/sidebar/sidebar.js +1 -1
  43. package/development/{sidebar.component-DvRTyNry.js → sidebar.component-BLqO52nH.js} +8 -1
  44. package/development/sidebar.js +1 -1
  45. package/development/sidebar.pure.js +1 -1
  46. package/dialog/dialog/dialog.component.js +1 -1
  47. package/dialog/dialog.js +1 -1
  48. package/{dialog.component-B3oQbMki.js → dialog.component-Dv5ch5mh.js} +1 -1
  49. package/dialog.js +1 -1
  50. package/dialog.pure.js +1 -1
  51. package/expansion-panel/expansion-panel/expansion-panel.component.js +1 -1
  52. package/expansion-panel/expansion-panel.js +1 -1
  53. package/{expansion-panel.component-BJCjwcoj.js → expansion-panel.component-DBnZ6IgB.js} +1 -1
  54. package/expansion-panel.js +1 -1
  55. package/expansion-panel.pure.js +1 -1
  56. package/form-field/form-field/form-field.component.js +1 -1
  57. package/form-field/form-field.js +1 -1
  58. package/{form-field.component-D50q1wC0.js → form-field.component-Cx5Keg_p.js} +15 -15
  59. package/form-field.js +1 -1
  60. package/form-field.pure.js +1 -1
  61. package/off-brand-theme.css +32 -37
  62. package/package.json +1 -1
  63. package/safety-theme.css +32 -37
  64. package/sidebar/sidebar/sidebar.component.js +1 -1
  65. package/sidebar/sidebar.js +1 -1
  66. package/{sidebar.component-DxOx02l6.js → sidebar.component-Dsx1FAg0.js} +5 -3
  67. package/sidebar.js +1 -1
  68. package/sidebar.pure.js +1 -1
  69. package/standard-theme.css +32 -37
  70. package/table.css +32 -37
  71. package/core/styles/table.scss +0 -156
  72. package/development/breadcrumb-group.component-B3Shlng3.js +0 -195
  73. package/development/form-field.component-BEXX0OcL.js +0 -702
package/off-brand-theme.css CHANGED
@@ -3282,10 +3282,17 @@ sup {
3282
3282
  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
3283
3283
  }
3284
3284
 
3285
- .sbb-table,
3286
- .sbb-table-m,
3287
- .sbb-table-s,
3288
- .sbb-table-xs {
3285
+ :root {
3286
+ --sbb-table-border-color: var(--sbb-color-cloud);
3287
+ --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
3288
+ --sbb-table-background-color: var(--sbb-background-color-1);
3289
+ --sbb-table-row-striped-color: var(--sbb-background-color-3);
3290
+ --sbb-table-color: var(--sbb-color-1);
3291
+ --sbb-table-caption-color: var(--sbb-color-granite);
3292
+ --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
3293
+ --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
3294
+ --sbb-table-sticky-shadow-width: 3rem;
3295
+ --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
3289
3296
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
3290
3297
  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
3291
3298
  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
@@ -3293,28 +3300,16 @@ sup {
3293
3300
  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
3294
3301
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
3295
3302
  }
3296
- .sbb-table tbody tr:nth-child(odd) :is(th, td),
3297
- .sbb-table-m tbody tr:nth-child(odd) :is(th, td),
3298
- .sbb-table-s tbody tr:nth-child(odd) :is(th, td),
3299
- .sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
3300
- background-color: var(--sbb-table-row-striped-color);
3301
- }
3303
+
3302
3304
  .sbb-table,
3303
3305
  .sbb-table-m,
3304
3306
  .sbb-table-s,
3305
3307
  .sbb-table-xs {
3306
3308
  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
3307
- --sbb-table-border-color: var(--sbb-color-cloud);
3308
- --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
3309
- --sbb-table-background-color: var(--sbb-background-color-1);
3310
- --sbb-table-row-striped-color: var(--sbb-background-color-3);
3311
- --sbb-table-color: var(--sbb-color-1);
3312
- --sbb-table-caption-color: var(--sbb-color-granite);
3313
- --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
3314
- --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
3315
- --sbb-table-sticky-shadow-width: 3rem;
3316
- --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
3317
- --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
3309
+ --sbb-table-sticky-shadow-transition-duration: var(
3310
+ --sbb-disable-animation-duration,
3311
+ var(--sbb-animation-duration-6x)
3312
+ );
3318
3313
  border-spacing: 0;
3319
3314
  caption-side: bottom;
3320
3315
  color: var(--sbb-table-color);
@@ -3358,6 +3353,12 @@ sup {
3358
3353
  .sbb-table-xs :is(th, td):first-child {
3359
3354
  border-inline-start: var(--sbb-table-border);
3360
3355
  }
3356
+ .sbb-table tbody tr:nth-child(odd) :is(th, td),
3357
+ .sbb-table-m tbody tr:nth-child(odd) :is(th, td),
3358
+ .sbb-table-s tbody tr:nth-child(odd) :is(th, td),
3359
+ .sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
3360
+ background-color: var(--sbb-table-row-striped-color);
3361
+ }
3361
3362
  .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),
3362
3363
  .sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
3363
3364
  .sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
@@ -3378,7 +3379,10 @@ sup {
3378
3379
  .sbb-table-s caption,
3379
3380
  .sbb-table-xs caption {
3380
3381
  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
3381
- --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
3382
+ --sbb-table-caption-color-fallback: light-dark(
3383
+ var(--sbb-color-granite),
3384
+ var(--sbb-color-cement)
3385
+ );
3382
3386
  font-size: var(--sbb-text-font-size-xs);
3383
3387
  letter-spacing: var(--sbb-typo-letter-spacing-text);
3384
3388
  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
@@ -3433,11 +3437,15 @@ sbb-table-wrapper[negative] .sbb-table,
3433
3437
  .sbb-table--theme-iron {
3434
3438
  --sbb-table-cell-color: var(--sbb-color-4);
3435
3439
  }
3440
+ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
3441
+ --sbb-table-cell-color: var(--sbb-color-cloud);
3442
+ }
3436
3443
  .sbb-table--theme-iron tbody > tr > td {
3437
3444
  color: var(--sbb-table-cell-color);
3438
3445
  }
3439
- .sbb-table--theme-iron.sbb-table--negative {
3440
- --sbb-table-cell-color: var(--sbb-color-cloud);
3446
+
3447
+ .sbb-table-header-subtitle {
3448
+ font-weight: normal;
3441
3449
  }
3442
3450
 
3443
3451
  .sbb-table-header-row:last-of-type > th {
@@ -3521,15 +3529,6 @@ sbb-table-wrapper[negative] .sbb-table,
3521
3529
  inset-inline-end: unset;
3522
3530
  }
3523
3531
 
3524
- html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
3525
- --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
3526
- --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
3527
- --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
3528
- --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
3529
- --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
3530
- --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
3531
- }
3532
-
3533
3532
  .sbb-table-align-start {
3534
3533
  text-align: start;
3535
3534
  }
@@ -3554,10 +3553,6 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
3554
3553
  text-align: right;
3555
3554
  }
3556
3555
 
3557
- .sbb-table-header-subtitle {
3558
- font-weight: normal;
3559
- }
3560
-
3561
3556
  .sbb-timetable-form {
3562
3557
  --sbb-timetable-form-content-max-width: 46.25rem;
3563
3558
  position: relative;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements",
3
- "version": "4.10.0",
3
+ "version": "4.11.0",
4
4
  "description": "Lyne Design System",
5
5
  "keywords": [
6
6
  "design system",
package/safety-theme.css CHANGED
@@ -3282,10 +3282,17 @@ sup {
3282
3282
  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
3283
3283
  }
3284
3284
 
3285
- .sbb-table,
3286
- .sbb-table-m,
3287
- .sbb-table-s,
3288
- .sbb-table-xs {
3285
+ :root {
3286
+ --sbb-table-border-color: var(--sbb-color-cloud);
3287
+ --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
3288
+ --sbb-table-background-color: var(--sbb-background-color-1);
3289
+ --sbb-table-row-striped-color: var(--sbb-background-color-3);
3290
+ --sbb-table-color: var(--sbb-color-1);
3291
+ --sbb-table-caption-color: var(--sbb-color-granite);
3292
+ --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
3293
+ --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
3294
+ --sbb-table-sticky-shadow-width: 3rem;
3295
+ --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
3289
3296
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
3290
3297
  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
3291
3298
  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
@@ -3293,28 +3300,16 @@ sup {
3293
3300
  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
3294
3301
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
3295
3302
  }
3296
- .sbb-table tbody tr:nth-child(odd) :is(th, td),
3297
- .sbb-table-m tbody tr:nth-child(odd) :is(th, td),
3298
- .sbb-table-s tbody tr:nth-child(odd) :is(th, td),
3299
- .sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
3300
- background-color: var(--sbb-table-row-striped-color);
3301
- }
3303
+
3302
3304
  .sbb-table,
3303
3305
  .sbb-table-m,
3304
3306
  .sbb-table-s,
3305
3307
  .sbb-table-xs {
3306
3308
  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
3307
- --sbb-table-border-color: var(--sbb-color-cloud);
3308
- --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
3309
- --sbb-table-background-color: var(--sbb-background-color-1);
3310
- --sbb-table-row-striped-color: var(--sbb-background-color-3);
3311
- --sbb-table-color: var(--sbb-color-1);
3312
- --sbb-table-caption-color: var(--sbb-color-granite);
3313
- --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
3314
- --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
3315
- --sbb-table-sticky-shadow-width: 3rem;
3316
- --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
3317
- --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
3309
+ --sbb-table-sticky-shadow-transition-duration: var(
3310
+ --sbb-disable-animation-duration,
3311
+ var(--sbb-animation-duration-6x)
3312
+ );
3318
3313
  border-spacing: 0;
3319
3314
  caption-side: bottom;
3320
3315
  color: var(--sbb-table-color);
@@ -3358,6 +3353,12 @@ sup {
3358
3353
  .sbb-table-xs :is(th, td):first-child {
3359
3354
  border-inline-start: var(--sbb-table-border);
3360
3355
  }
3356
+ .sbb-table tbody tr:nth-child(odd) :is(th, td),
3357
+ .sbb-table-m tbody tr:nth-child(odd) :is(th, td),
3358
+ .sbb-table-s tbody tr:nth-child(odd) :is(th, td),
3359
+ .sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
3360
+ background-color: var(--sbb-table-row-striped-color);
3361
+ }
3361
3362
  .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),
3362
3363
  .sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
3363
3364
  .sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
@@ -3378,7 +3379,10 @@ sup {
3378
3379
  .sbb-table-s caption,
3379
3380
  .sbb-table-xs caption {
3380
3381
  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
3381
- --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
3382
+ --sbb-table-caption-color-fallback: light-dark(
3383
+ var(--sbb-color-granite),
3384
+ var(--sbb-color-cement)
3385
+ );
3382
3386
  font-size: var(--sbb-text-font-size-xs);
3383
3387
  letter-spacing: var(--sbb-typo-letter-spacing-text);
3384
3388
  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
@@ -3433,11 +3437,15 @@ sbb-table-wrapper[negative] .sbb-table,
3433
3437
  .sbb-table--theme-iron {
3434
3438
  --sbb-table-cell-color: var(--sbb-color-4);
3435
3439
  }
3440
+ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
3441
+ --sbb-table-cell-color: var(--sbb-color-cloud);
3442
+ }
3436
3443
  .sbb-table--theme-iron tbody > tr > td {
3437
3444
  color: var(--sbb-table-cell-color);
3438
3445
  }
3439
- .sbb-table--theme-iron.sbb-table--negative {
3440
- --sbb-table-cell-color: var(--sbb-color-cloud);
3446
+
3447
+ .sbb-table-header-subtitle {
3448
+ font-weight: normal;
3441
3449
  }
3442
3450
 
3443
3451
  .sbb-table-header-row:last-of-type > th {
@@ -3521,15 +3529,6 @@ sbb-table-wrapper[negative] .sbb-table,
3521
3529
  inset-inline-end: unset;
3522
3530
  }
3523
3531
 
3524
- html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
3525
- --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
3526
- --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
3527
- --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
3528
- --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
3529
- --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
3530
- --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
3531
- }
3532
-
3533
3532
  .sbb-table-align-start {
3534
3533
  text-align: start;
3535
3534
  }
@@ -3554,10 +3553,6 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
3554
3553
  text-align: right;
3555
3554
  }
3556
3555
 
3557
- .sbb-table-header-subtitle {
3558
- font-weight: normal;
3559
- }
3560
-
3561
3556
  .sbb-timetable-form {
3562
3557
  --sbb-timetable-form-content-max-width: 46.25rem;
3563
3558
  position: relative;
package/sidebar/sidebar/sidebar.component.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as e } from "../../sidebar.component-DxOx02l6.js";
1
+ import { t as e } from "../../sidebar.component-Dsx1FAg0.js";
2
2
  export { e as SbbSidebarElement };
package/sidebar/sidebar.js CHANGED
@@ -1,4 +1,4 @@
1
- import { t as e } from "../sidebar.component-DxOx02l6.js";
1
+ import { t as e } from "../sidebar.component-Dsx1FAg0.js";
2
2
  e.define(), console.warn("The entrypoint '@sbb-esta/elements/sidebar/sidebar.js' has been deprecated.\nUse either '@sbb-esta/elements/sidebar.js' or '@sbb-esta/elements/sidebar.pure.js' instead.");
3
3
  //#endregion
4
4
  export { e as SbbSidebarElement };
package/{sidebar.component-DxOx02l6.js → sidebar.component-Dsx1FAg0.js} RENAMED
@@ -152,7 +152,9 @@ var g = ":host{--sbb-link-text-decoration-line: none;--sbb-sidebar-background-co
152
152
  return this._container;
153
153
  }
154
154
  constructor() {
155
- super(), this.#e = (t(this, v), t(this, b, "white")), this.#t = (t(this, x), t(this, C, "side")), this.#n = (t(this, w), t(this, E, "start")), this.#r = (t(this, D), t(this, k, !1)), this.#i = (t(this, A), t(this, M, !1)), this._container = (t(this, N), null), this._lastFocusedElement = null, this._focusTrapController = new h(this), this._escapableOverlayController = new p(this), this.addController(new m(this, {
155
+ super(), this.#e = (t(this, v), t(this, b, "white")), this.#t = (t(this, x), t(this, C, "side")), this.#n = (t(this, w), t(this, E, "start")), this.#r = (t(this, D), t(this, k, !1)), this.#i = (t(this, A), t(this, M, !1)), this._container = (t(this, N), null), this._lastFocusedElement = null, this._focusTrapController = new h(this), this._escapableOverlayController = new p(this), this._closeOnNavigation = () => {
156
+ this._isModeOver() && this.isOpen && this.close();
157
+ }, this.addController(new m(this, {
156
158
  skipInitial: !0,
157
159
  callback: () => this._updateSidebarWidth()
158
160
  })), this.addEventListener?.("click", (e) => {
@@ -160,10 +162,10 @@ var g = ":host{--sbb-link-text-decoration-line: none;--sbb-sidebar-background-co
160
162
  });
161
163
  }
162
164
  connectedCallback() {
163
- super.connectedCallback(), this._container = this.closest?.("sbb-sidebar-container"), this._updateSidebarWidth(), this.isOpen && this._isModeOver() && this._takeFocus();
165
+ super.connectedCallback(), this._container = this.closest?.("sbb-sidebar-container"), this._updateSidebarWidth(), this.isOpen && this._isModeOver() && this._takeFocus(), r || (window.navigation ? window.navigation.addEventListener("navigate", this._closeOnNavigation) : window.addEventListener("popstate", this._closeOnNavigation));
164
166
  }
165
167
  disconnectedCallback() {
166
- super.disconnectedCallback(), this.container?.style.removeProperty(this._buildCssWidthVar()), this._container = null;
168
+ super.disconnectedCallback(), this.container?.style.removeProperty(this._buildCssWidthVar()), this._container = null, r || (window.navigation ? window.navigation.removeEventListener("navigate", this._closeOnNavigation) : window.removeEventListener("popstate", this._closeOnNavigation));
167
169
  }
168
170
  willUpdate(e) {
169
171
  super.willUpdate(e), e.has("opened") && (this.opened ? this.open() : this.opened || this.close()), e.has("mode") && (this.mode === "over" && this.isOpen ? this._takeFocus() : this.cedeFocus());
package/sidebar.js CHANGED
@@ -2,7 +2,7 @@ import { t as e } from "./sidebar-close-button.component-BEYnX3Hk.js";
2
2
  import { t } from "./sidebar-container.component-BGh7mxq4.js";
3
3
  import { t as n } from "./sidebar-content.component-BEI3kpFh.js";
4
4
  import { t as r } from "./sidebar-title.component-CvKixoOS.js";
5
- import { t as i } from "./sidebar.component-DxOx02l6.js";
5
+ import { t as i } from "./sidebar.component-Dsx1FAg0.js";
6
6
  import "./sidebar.pure.js";
7
7
  i.define(), e.define(), t.define(), n.define(), r.define();
8
8
  //#endregion
package/sidebar.pure.js CHANGED
@@ -2,5 +2,5 @@ import { t as e } from "./sidebar-close-button.component-BEYnX3Hk.js";
2
2
  import { t } from "./sidebar-container.component-BGh7mxq4.js";
3
3
  import { t as n } from "./sidebar-content.component-BEI3kpFh.js";
4
4
  import { t as r } from "./sidebar-title.component-CvKixoOS.js";
5
- import { t as i } from "./sidebar.component-DxOx02l6.js";
5
+ import { t as i } from "./sidebar.component-Dsx1FAg0.js";
6
6
  export { e as SbbSidebarCloseButtonElement, t as SbbSidebarContainerElement, n as SbbSidebarContentElement, i as SbbSidebarElement, r as SbbSidebarTitleElement };
package/standard-theme.css CHANGED
@@ -3282,10 +3282,17 @@ sup {
3282
3282
  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
3283
3283
  }
3284
3284
 
3285
- .sbb-table,
3286
- .sbb-table-m,
3287
- .sbb-table-s,
3288
- .sbb-table-xs {
3285
+ :root {
3286
+ --sbb-table-border-color: var(--sbb-color-cloud);
3287
+ --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
3288
+ --sbb-table-background-color: var(--sbb-background-color-1);
3289
+ --sbb-table-row-striped-color: var(--sbb-background-color-3);
3290
+ --sbb-table-color: var(--sbb-color-1);
3291
+ --sbb-table-caption-color: var(--sbb-color-granite);
3292
+ --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
3293
+ --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
3294
+ --sbb-table-sticky-shadow-width: 3rem;
3295
+ --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
3289
3296
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
3290
3297
  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
3291
3298
  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
@@ -3293,28 +3300,16 @@ sup {
3293
3300
  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
3294
3301
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
3295
3302
  }
3296
- .sbb-table tbody tr:nth-child(odd) :is(th, td),
3297
- .sbb-table-m tbody tr:nth-child(odd) :is(th, td),
3298
- .sbb-table-s tbody tr:nth-child(odd) :is(th, td),
3299
- .sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
3300
- background-color: var(--sbb-table-row-striped-color);
3301
- }
3303
+
3302
3304
  .sbb-table,
3303
3305
  .sbb-table-m,
3304
3306
  .sbb-table-s,
3305
3307
  .sbb-table-xs {
3306
3308
  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
3307
- --sbb-table-border-color: var(--sbb-color-cloud);
3308
- --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
3309
- --sbb-table-background-color: var(--sbb-background-color-1);
3310
- --sbb-table-row-striped-color: var(--sbb-background-color-3);
3311
- --sbb-table-color: var(--sbb-color-1);
3312
- --sbb-table-caption-color: var(--sbb-color-granite);
3313
- --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
3314
- --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
3315
- --sbb-table-sticky-shadow-width: 3rem;
3316
- --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
3317
- --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
3309
+ --sbb-table-sticky-shadow-transition-duration: var(
3310
+ --sbb-disable-animation-duration,
3311
+ var(--sbb-animation-duration-6x)
3312
+ );
3318
3313
  border-spacing: 0;
3319
3314
  caption-side: bottom;
3320
3315
  color: var(--sbb-table-color);
@@ -3358,6 +3353,12 @@ sup {
3358
3353
  .sbb-table-xs :is(th, td):first-child {
3359
3354
  border-inline-start: var(--sbb-table-border);
3360
3355
  }
3356
+ .sbb-table tbody tr:nth-child(odd) :is(th, td),
3357
+ .sbb-table-m tbody tr:nth-child(odd) :is(th, td),
3358
+ .sbb-table-s tbody tr:nth-child(odd) :is(th, td),
3359
+ .sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
3360
+ background-color: var(--sbb-table-row-striped-color);
3361
+ }
3361
3362
  .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),
3362
3363
  .sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
3363
3364
  .sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
@@ -3378,7 +3379,10 @@ sup {
3378
3379
  .sbb-table-s caption,
3379
3380
  .sbb-table-xs caption {
3380
3381
  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
3381
- --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
3382
+ --sbb-table-caption-color-fallback: light-dark(
3383
+ var(--sbb-color-granite),
3384
+ var(--sbb-color-cement)
3385
+ );
3382
3386
  font-size: var(--sbb-text-font-size-xs);
3383
3387
  letter-spacing: var(--sbb-typo-letter-spacing-text);
3384
3388
  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
@@ -3433,11 +3437,15 @@ sbb-table-wrapper[negative] .sbb-table,
3433
3437
  .sbb-table--theme-iron {
3434
3438
  --sbb-table-cell-color: var(--sbb-color-4);
3435
3439
  }
3440
+ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
3441
+ --sbb-table-cell-color: var(--sbb-color-cloud);
3442
+ }
3436
3443
  .sbb-table--theme-iron tbody > tr > td {
3437
3444
  color: var(--sbb-table-cell-color);
3438
3445
  }
3439
- .sbb-table--theme-iron.sbb-table--negative {
3440
- --sbb-table-cell-color: var(--sbb-color-cloud);
3446
+
3447
+ .sbb-table-header-subtitle {
3448
+ font-weight: normal;
3441
3449
  }
3442
3450
 
3443
3451
  .sbb-table-header-row:last-of-type > th {
@@ -3521,15 +3529,6 @@ sbb-table-wrapper[negative] .sbb-table,
3521
3529
  inset-inline-end: unset;
3522
3530
  }
3523
3531
 
3524
- html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
3525
- --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
3526
- --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
3527
- --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
3528
- --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
3529
- --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
3530
- --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
3531
- }
3532
-
3533
3532
  .sbb-table-align-start {
3534
3533
  text-align: start;
3535
3534
  }
@@ -3554,10 +3553,6 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
3554
3553
  text-align: right;
3555
3554
  }
3556
3555
 
3557
- .sbb-table-header-subtitle {
3558
- font-weight: normal;
3559
- }
3560
-
3561
3556
  .sbb-timetable-form {
3562
3557
  --sbb-timetable-form-content-max-width: 46.25rem;
3563
3558
  position: relative;
package/table.css CHANGED
@@ -1,7 +1,14 @@
1
- .sbb-table,
2
- .sbb-table-m,
3
- .sbb-table-s,
4
- .sbb-table-xs {
1
+ :root {
2
+ --sbb-table-border-color: var(--sbb-color-cloud);
3
+ --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
4
+ --sbb-table-background-color: var(--sbb-background-color-1);
5
+ --sbb-table-row-striped-color: var(--sbb-background-color-3);
6
+ --sbb-table-color: var(--sbb-color-1);
7
+ --sbb-table-caption-color: var(--sbb-color-granite);
8
+ --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
9
+ --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
10
+ --sbb-table-sticky-shadow-width: 3rem;
11
+ --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
5
12
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
6
13
  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
7
14
  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
@@ -9,28 +16,16 @@
9
16
  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
10
17
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
11
18
  }
12
- .sbb-table tbody tr:nth-child(odd) :is(th, td),
13
- .sbb-table-m tbody tr:nth-child(odd) :is(th, td),
14
- .sbb-table-s tbody tr:nth-child(odd) :is(th, td),
15
- .sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
16
- background-color: var(--sbb-table-row-striped-color);
17
- }
19
+
18
20
  .sbb-table,
19
21
  .sbb-table-m,
20
22
  .sbb-table-s,
21
23
  .sbb-table-xs {
22
24
  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
23
- --sbb-table-border-color: var(--sbb-color-cloud);
24
- --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
25
- --sbb-table-background-color: var(--sbb-background-color-1);
26
- --sbb-table-row-striped-color: var(--sbb-background-color-3);
27
- --sbb-table-color: var(--sbb-color-1);
28
- --sbb-table-caption-color: var(--sbb-color-granite);
29
- --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
30
- --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
31
- --sbb-table-sticky-shadow-width: 3rem;
32
- --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
33
- --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
25
+ --sbb-table-sticky-shadow-transition-duration: var(
26
+ --sbb-disable-animation-duration,
27
+ var(--sbb-animation-duration-6x)
28
+ );
34
29
  border-spacing: 0;
35
30
  caption-side: bottom;
36
31
  color: var(--sbb-table-color);
@@ -74,6 +69,12 @@
74
69
  .sbb-table-xs :is(th, td):first-child {
75
70
  border-inline-start: var(--sbb-table-border);
76
71
  }
72
+ .sbb-table tbody tr:nth-child(odd) :is(th, td),
73
+ .sbb-table-m tbody tr:nth-child(odd) :is(th, td),
74
+ .sbb-table-s tbody tr:nth-child(odd) :is(th, td),
75
+ .sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
76
+ background-color: var(--sbb-table-row-striped-color);
77
+ }
77
78
  .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
79
  .sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
79
80
  .sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
@@ -94,7 +95,10 @@
94
95
  .sbb-table-s caption,
95
96
  .sbb-table-xs caption {
96
97
  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
97
- --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
98
+ --sbb-table-caption-color-fallback: light-dark(
99
+ var(--sbb-color-granite),
100
+ var(--sbb-color-cement)
101
+ );
98
102
  font-size: var(--sbb-text-font-size-xs);
99
103
  letter-spacing: var(--sbb-typo-letter-spacing-text);
100
104
  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
@@ -149,11 +153,15 @@ sbb-table-wrapper[negative] .sbb-table,
149
153
  .sbb-table--theme-iron {
150
154
  --sbb-table-cell-color: var(--sbb-color-4);
151
155
  }
156
+ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
157
+ --sbb-table-cell-color: var(--sbb-color-cloud);
158
+ }
152
159
  .sbb-table--theme-iron tbody > tr > td {
153
160
  color: var(--sbb-table-cell-color);
154
161
  }
155
- .sbb-table--theme-iron.sbb-table--negative {
156
- --sbb-table-cell-color: var(--sbb-color-cloud);
162
+
163
+ .sbb-table-header-subtitle {
164
+ font-weight: normal;
157
165
  }
158
166
 
159
167
  .sbb-table-header-row:last-of-type > th {
@@ -237,15 +245,6 @@ sbb-table-wrapper[negative] .sbb-table,
237
245
  inset-inline-end: unset;
238
246
  }
239
247
 
240
- html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
241
- --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
242
- --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
243
- --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
244
- --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
245
- --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
246
- --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
247
- }
248
-
249
248
  .sbb-table-align-start {
250
249
  text-align: start;
251
250
  }
@@ -268,8 +267,4 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
268
267
 
269
268
  .sbb-table-align-right {
270
269
  text-align: right;
271
- }
272
-
273
- .sbb-table-header-subtitle {
274
- font-weight: normal;
275
270
  }