@sbb-esta/lyne-elements-dev 5.7.0-dev.1788770150 → 5.7.0-dev.1788796277

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 (99) hide show
  1. package/alert.pure.js +1 -1
  2. package/badge/_badge.global.scss +1 -1
  3. package/breadcrumb.pure.js +1 -1
  4. package/button.pure.js +2 -2
  5. package/calendar.pure.js +2 -2
  6. package/card.pure.js +1 -1
  7. package/checkbox-panel.pure.js +1 -1
  8. package/checkbox.pure.js +1 -1
  9. package/chip-label.pure.js +1 -1
  10. package/chip.pure.js +1 -1
  11. package/core/styles/_theme.scss +9 -1
  12. package/core/styles/features/image.scss +1 -1
  13. package/core/styles/lean-off-brand-theme.scss +2 -1
  14. package/core/styles/mixins/_lists.scss +2 -2
  15. package/core/styles/mixins/_typo.scss +3 -3
  16. package/core/styles/off-brand-theme.scss +2 -1
  17. package/custom-elements.json +1 -25
  18. package/datepicker.pure.js +1 -1
  19. package/development/alert.pure.js +1 -1
  20. package/development/breadcrumb.pure.js +1 -1
  21. package/development/button.pure.js +2 -2
  22. package/development/calendar.pure.js +2 -2
  23. package/development/card.pure.js +1 -1
  24. package/development/checkbox-panel.pure.js +1 -1
  25. package/development/checkbox.pure.js +1 -1
  26. package/development/chip-label.pure.js +1 -1
  27. package/development/chip.pure.js +1 -1
  28. package/development/datepicker.pure.js +1 -1
  29. package/development/download.pure.js +1 -1
  30. package/development/expansion-panel.pure.js +1 -1
  31. package/development/file-selector.pure.js +2 -2
  32. package/development/footer.pure.js +1 -1
  33. package/development/form-field.pure.js +3 -3
  34. package/development/header.pure.js +2 -2
  35. package/development/link.pure.js +1 -1
  36. package/development/menu.pure.js +1 -1
  37. package/development/message.pure.js +1 -1
  38. package/development/mini-calendar.pure.js +1 -1
  39. package/development/navigation.pure.js +4 -4
  40. package/development/notification.pure.js +1 -1
  41. package/development/option.pure.js +3 -3
  42. package/development/paginator.pure.js +2 -2
  43. package/development/radio-button-panel.pure.js +1 -1
  44. package/development/radio-button.pure.js +1 -1
  45. package/development/status.pure.js +1 -1
  46. package/development/stepper.pure.js +1 -1
  47. package/development/tabs.pure.js +1 -1
  48. package/development/tag.pure.js +1 -1
  49. package/development/teaser-panel.pure.js +1 -1
  50. package/development/teaser-product.pure.js +1 -1
  51. package/development/teaser.pure.js +7 -3
  52. package/development/timetable-occupancy.pure.js +1 -1
  53. package/development/title.pure.js +1 -1
  54. package/development/toast.pure.js +1 -1
  55. package/development/toggle-check.pure.js +1 -1
  56. package/development/toggle.pure.js +2 -2
  57. package/development/tooltip.pure.js +1 -1
  58. package/development/train.pure.js +3 -3
  59. package/download.pure.js +1 -1
  60. package/expansion-panel.pure.js +1 -1
  61. package/file-selector.pure.js +2 -2
  62. package/footer.pure.js +1 -1
  63. package/form-field/_form-field.global.scss +1 -1
  64. package/form-field.pure.js +3 -3
  65. package/header/_header.global.scss +2 -2
  66. package/header.pure.js +2 -2
  67. package/lean-off-brand-theme.css +16 -34
  68. package/lean-safety-theme.css +18 -16
  69. package/lean-theme.css +18 -16
  70. package/link.pure.js +1 -1
  71. package/menu.pure.js +1 -1
  72. package/message.pure.js +1 -1
  73. package/mini-calendar.pure.js +1 -1
  74. package/navigation/_navigation.global.scss +2 -2
  75. package/navigation.pure.js +4 -4
  76. package/notification.pure.js +1 -1
  77. package/off-brand-theme.css +16 -34
  78. package/option.pure.js +3 -3
  79. package/package.json +2 -2
  80. package/paginator.pure.js +2 -2
  81. package/radio-button-panel.pure.js +1 -1
  82. package/radio-button.pure.js +1 -1
  83. package/safety-theme.css +18 -16
  84. package/standard-theme.css +18 -16
  85. package/status.pure.js +1 -1
  86. package/stepper.pure.js +1 -1
  87. package/table/_table.global.scss +4 -4
  88. package/tabs.pure.js +1 -1
  89. package/tag.pure.js +1 -1
  90. package/teaser-panel.pure.js +1 -1
  91. package/teaser-product.pure.js +1 -1
  92. package/teaser.pure.js +2 -2
  93. package/timetable-occupancy.pure.js +1 -1
  94. package/title.pure.js +1 -1
  95. package/toast.pure.js +1 -1
  96. package/toggle-check.pure.js +1 -1
  97. package/toggle.pure.js +2 -2
  98. package/tooltip.pure.js +1 -1
  99. package/train.pure.js +3 -3
@@ -2,24 +2,6 @@
2
2
  /**
3
3
  * Do not edit directly, this file was auto-generated.
4
4
  */
5
- @font-face {
6
- font-family: SBB;
7
- src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Roman.woff2") format("woff2");
8
- font-display: fallback;
9
- font-weight: 400;
10
- }
11
- @font-face {
12
- font-family: SBB;
13
- src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Bold.woff2") format("woff2");
14
- font-display: swap;
15
- font-weight: 700;
16
- }
17
- @font-face {
18
- font-family: SBB;
19
- src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Light.woff2") format("woff2");
20
- font-display: swap;
21
- font-weight: 300;
22
- }
23
5
  html {
24
6
  text-size-adjust: 100%;
25
7
  tab-size: 4;
@@ -124,7 +106,7 @@ summary {
124
106
  font-family: var(--sbb-typo-font-family);
125
107
  font-weight: normal;
126
108
  line-height: var(--sbb-typo-line-height-text);
127
- letter-spacing: var(--sbb-typo-letter-spacing-text);
109
+ letter-spacing: var(--sbb-letter-spacing-text);
128
110
  font-size: var(--sbb-text-font-size);
129
111
  color-scheme: light dark;
130
112
  color: var(--sbb-font-color-default);
@@ -1495,7 +1477,7 @@ summary {
1495
1477
  --sbb-navigation-action-color: var(--sbb-color-4-negative);
1496
1478
  --sbb-navigation-action-icon-display: none;
1497
1479
  --sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
1498
- --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-heading);
1480
+ --sbb-navigation-action-letter-spacing: var(--sbb-letter-spacing-heading);
1499
1481
  --sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
1500
1482
  --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
1501
1483
  --sbb-navigation-grid-column: 1 / -1;
@@ -1527,7 +1509,7 @@ summary {
1527
1509
  --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
1528
1510
  --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
1529
1511
  --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
1530
- --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-heading);
1512
+ --sbb-navigation-marker-letter-spacing: var(--sbb-letter-spacing-heading);
1531
1513
  --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
1532
1514
  --sbb-navigation-section-column: 1 / -1;
1533
1515
  --sbb-navigation-section-position: fixed;
@@ -2250,7 +2232,7 @@ img {
2250
2232
  min-width: var(--sbb-spacing-fixed-4x);
2251
2233
  max-height: var(--sbb-spacing-fixed-4x);
2252
2234
  line-height: var(--sbb-typo-line-height-text);
2253
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2235
+ letter-spacing: var(--sbb-letter-spacing-text);
2254
2236
  font-size: var(--sbb-text-font-size-xxs);
2255
2237
  font-weight: bold;
2256
2238
  outline: var(--sbb-border-width-1x) solid transparent;
@@ -2338,7 +2320,7 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
2338
2320
  opacity: 1;
2339
2321
  background-color: transparent;
2340
2322
  font-size: var(--sbb-form-field-input-text-size) !important;
2341
- letter-spacing: var(--sbb-typo-letter-spacing-text) !important;
2323
+ letter-spacing: var(--sbb-letter-spacing-text) !important;
2342
2324
  font-family: var(--sbb-typo-font-family) !important;
2343
2325
  line-height: var(--sbb-typo-line-height-text) !important;
2344
2326
  }
@@ -2501,11 +2483,11 @@ sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
2501
2483
  align-items: baseline;
2502
2484
  color: var(--sbb-color-1);
2503
2485
  font-size: var(--sbb-text-font-size-xs);
2504
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2486
+ letter-spacing: var(--sbb-letter-spacing-text);
2505
2487
  }
2506
2488
  .sbb-header-info strong + * {
2507
2489
  font-size: var(--sbb-text-font-size-xxs);
2508
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2490
+ letter-spacing: var(--sbb-letter-spacing-text);
2509
2491
  color: var(--sbb-color-granite);
2510
2492
  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
2511
2493
  }
@@ -2590,7 +2572,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
2590
2572
  }
2591
2573
  :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) th {
2592
2574
  font-size: var(--sbb-table-header-cell-font-size);
2593
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2575
+ letter-spacing: var(--sbb-letter-spacing-text);
2594
2576
  font-weight: bold;
2595
2577
  background-color: var(--sbb-table-background-color);
2596
2578
  border-block-end: var(--sbb-table-border);
@@ -2600,7 +2582,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
2600
2582
  }
2601
2583
  :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) td {
2602
2584
  font-size: var(--sbb-table-data-cell-font-size);
2603
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2585
+ letter-spacing: var(--sbb-letter-spacing-text);
2604
2586
  background-color: var(--sbb-table-background-color);
2605
2587
  border-block-end: var(--sbb-table-border);
2606
2588
  border-inline-end: var(--sbb-table-border);
@@ -2628,7 +2610,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
2628
2610
  var(--sbb-color-cement)
2629
2611
  );
2630
2612
  font-size: var(--sbb-text-font-size-xs);
2631
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2613
+ letter-spacing: var(--sbb-letter-spacing-text);
2632
2614
  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
2633
2615
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
2634
2616
  text-align: left;
@@ -2727,7 +2709,7 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
2727
2709
  var(--sbb-color-cement)
2728
2710
  );
2729
2711
  font-size: var(--sbb-text-font-size-xs);
2730
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2712
+ letter-spacing: var(--sbb-letter-spacing-text);
2731
2713
  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
2732
2714
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
2733
2715
  text-align: left;
@@ -3007,7 +2989,7 @@ sbb-toggle:has(:focus-visible) {
3007
2989
  color: var(--sbb-color-granite);
3008
2990
  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
3009
2991
  line-height: var(--sbb-typo-line-height-text);
3010
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2992
+ letter-spacing: var(--sbb-letter-spacing-text);
3011
2993
  font-size: var(--sbb-text-font-size-xs);
3012
2994
  }
3013
2995
 
@@ -3217,7 +3199,7 @@ sbb-toggle:has(:focus-visible) {
3217
3199
 
3218
3200
  .sbb-list:where(dl) {
3219
3201
  line-height: var(--sbb-typo-line-height-text);
3220
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3202
+ letter-spacing: var(--sbb-letter-spacing-text);
3221
3203
  font-size: var(--sbb-text-font-size-s);
3222
3204
  margin: 0;
3223
3205
  padding: 0;
@@ -3290,7 +3272,7 @@ sbb-toggle:has(:focus-visible) {
3290
3272
  border: var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
3291
3273
  border-radius: 50%;
3292
3274
  line-height: var(--sbb-typo-line-height-text);
3293
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3275
+ letter-spacing: var(--sbb-letter-spacing-text);
3294
3276
  font-size: var(--sbb-text-font-size-xxs);
3295
3277
  font-weight: bold;
3296
3278
  }
@@ -3528,7 +3510,7 @@ sup {
3528
3510
  font-family: var(--sbb-typo-font-family);
3529
3511
  font-weight: normal;
3530
3512
  line-height: var(--sbb-typo-line-height-text);
3531
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3513
+ letter-spacing: var(--sbb-letter-spacing-text);
3532
3514
  font-size: var(--sbb-text-font-size);
3533
3515
  }
3534
3516
 
@@ -3562,7 +3544,7 @@ sup {
3562
3544
 
3563
3545
  .sbb-legend {
3564
3546
  line-height: var(--sbb-typo-line-height-text);
3565
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3547
+ letter-spacing: var(--sbb-letter-spacing-text);
3566
3548
  font-size: var(--sbb-text-font-size-xs);
3567
3549
  padding: 0;
3568
3550
  color: var(--sbb-color-granite);
@@ -124,11 +124,13 @@ summary {
124
124
  font-family: var(--sbb-typo-font-family);
125
125
  font-weight: normal;
126
126
  line-height: var(--sbb-typo-line-height-text);
127
- letter-spacing: var(--sbb-typo-letter-spacing-text);
127
+ letter-spacing: var(--sbb-letter-spacing-text);
128
128
  font-size: var(--sbb-text-font-size);
129
129
  color-scheme: light dark;
130
130
  color: var(--sbb-font-color-default);
131
131
  background-color: var(--sbb-background-color-1);
132
+ --sbb-letter-spacing-heading: var(--sbb-typo-letter-spacing-heading);
133
+ --sbb-letter-spacing-text: var(--sbb-typo-letter-spacing-text);
132
134
  --sbb-animation-duration-1x: 0.04s;
133
135
  --sbb-animation-duration-2x: 0.08s;
134
136
  --sbb-animation-duration-3x: 0.12s;
@@ -1495,7 +1497,7 @@ summary {
1495
1497
  --sbb-navigation-action-color: var(--sbb-color-4-negative);
1496
1498
  --sbb-navigation-action-icon-display: none;
1497
1499
  --sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
1498
- --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-heading);
1500
+ --sbb-navigation-action-letter-spacing: var(--sbb-letter-spacing-heading);
1499
1501
  --sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
1500
1502
  --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
1501
1503
  --sbb-navigation-grid-column: 1 / -1;
@@ -1527,7 +1529,7 @@ summary {
1527
1529
  --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
1528
1530
  --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
1529
1531
  --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
1530
- --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-heading);
1532
+ --sbb-navigation-marker-letter-spacing: var(--sbb-letter-spacing-heading);
1531
1533
  --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
1532
1534
  --sbb-navigation-section-column: 1 / -1;
1533
1535
  --sbb-navigation-section-position: fixed;
@@ -2250,7 +2252,7 @@ img {
2250
2252
  min-width: var(--sbb-spacing-fixed-4x);
2251
2253
  max-height: var(--sbb-spacing-fixed-4x);
2252
2254
  line-height: var(--sbb-typo-line-height-text);
2253
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2255
+ letter-spacing: var(--sbb-letter-spacing-text);
2254
2256
  font-size: var(--sbb-text-font-size-xxs);
2255
2257
  font-weight: bold;
2256
2258
  outline: var(--sbb-border-width-1x) solid transparent;
@@ -2338,7 +2340,7 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
2338
2340
  opacity: 1;
2339
2341
  background-color: transparent;
2340
2342
  font-size: var(--sbb-form-field-input-text-size) !important;
2341
- letter-spacing: var(--sbb-typo-letter-spacing-text) !important;
2343
+ letter-spacing: var(--sbb-letter-spacing-text) !important;
2342
2344
  font-family: var(--sbb-typo-font-family) !important;
2343
2345
  line-height: var(--sbb-typo-line-height-text) !important;
2344
2346
  }
@@ -2501,11 +2503,11 @@ sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
2501
2503
  align-items: baseline;
2502
2504
  color: var(--sbb-color-1);
2503
2505
  font-size: var(--sbb-text-font-size-xs);
2504
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2506
+ letter-spacing: var(--sbb-letter-spacing-text);
2505
2507
  }
2506
2508
  .sbb-header-info strong + * {
2507
2509
  font-size: var(--sbb-text-font-size-xxs);
2508
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2510
+ letter-spacing: var(--sbb-letter-spacing-text);
2509
2511
  color: var(--sbb-color-granite);
2510
2512
  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
2511
2513
  }
@@ -2590,7 +2592,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
2590
2592
  }
2591
2593
  :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) th {
2592
2594
  font-size: var(--sbb-table-header-cell-font-size);
2593
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2595
+ letter-spacing: var(--sbb-letter-spacing-text);
2594
2596
  font-weight: bold;
2595
2597
  background-color: var(--sbb-table-background-color);
2596
2598
  border-block-end: var(--sbb-table-border);
@@ -2600,7 +2602,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
2600
2602
  }
2601
2603
  :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) td {
2602
2604
  font-size: var(--sbb-table-data-cell-font-size);
2603
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2605
+ letter-spacing: var(--sbb-letter-spacing-text);
2604
2606
  background-color: var(--sbb-table-background-color);
2605
2607
  border-block-end: var(--sbb-table-border);
2606
2608
  border-inline-end: var(--sbb-table-border);
@@ -2628,7 +2630,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
2628
2630
  var(--sbb-color-cement)
2629
2631
  );
2630
2632
  font-size: var(--sbb-text-font-size-xs);
2631
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2633
+ letter-spacing: var(--sbb-letter-spacing-text);
2632
2634
  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
2633
2635
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
2634
2636
  text-align: left;
@@ -2727,7 +2729,7 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
2727
2729
  var(--sbb-color-cement)
2728
2730
  );
2729
2731
  font-size: var(--sbb-text-font-size-xs);
2730
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2732
+ letter-spacing: var(--sbb-letter-spacing-text);
2731
2733
  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
2732
2734
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
2733
2735
  text-align: left;
@@ -3007,7 +3009,7 @@ sbb-toggle:has(:focus-visible) {
3007
3009
  color: var(--sbb-color-granite);
3008
3010
  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
3009
3011
  line-height: var(--sbb-typo-line-height-text);
3010
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3012
+ letter-spacing: var(--sbb-letter-spacing-text);
3011
3013
  font-size: var(--sbb-text-font-size-xs);
3012
3014
  }
3013
3015
 
@@ -3217,7 +3219,7 @@ sbb-toggle:has(:focus-visible) {
3217
3219
 
3218
3220
  .sbb-list:where(dl) {
3219
3221
  line-height: var(--sbb-typo-line-height-text);
3220
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3222
+ letter-spacing: var(--sbb-letter-spacing-text);
3221
3223
  font-size: var(--sbb-text-font-size-s);
3222
3224
  margin: 0;
3223
3225
  padding: 0;
@@ -3290,7 +3292,7 @@ sbb-toggle:has(:focus-visible) {
3290
3292
  border: var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
3291
3293
  border-radius: 50%;
3292
3294
  line-height: var(--sbb-typo-line-height-text);
3293
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3295
+ letter-spacing: var(--sbb-letter-spacing-text);
3294
3296
  font-size: var(--sbb-text-font-size-xxs);
3295
3297
  font-weight: bold;
3296
3298
  }
@@ -3528,7 +3530,7 @@ sup {
3528
3530
  font-family: var(--sbb-typo-font-family);
3529
3531
  font-weight: normal;
3530
3532
  line-height: var(--sbb-typo-line-height-text);
3531
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3533
+ letter-spacing: var(--sbb-letter-spacing-text);
3532
3534
  font-size: var(--sbb-text-font-size);
3533
3535
  }
3534
3536
 
@@ -3562,7 +3564,7 @@ sup {
3562
3564
 
3563
3565
  .sbb-legend {
3564
3566
  line-height: var(--sbb-typo-line-height-text);
3565
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3567
+ letter-spacing: var(--sbb-letter-spacing-text);
3566
3568
  font-size: var(--sbb-text-font-size-xs);
3567
3569
  padding: 0;
3568
3570
  color: var(--sbb-color-granite);
package/lean-theme.css CHANGED
@@ -124,11 +124,13 @@ summary {
124
124
  font-family: var(--sbb-typo-font-family);
125
125
  font-weight: normal;
126
126
  line-height: var(--sbb-typo-line-height-text);
127
- letter-spacing: var(--sbb-typo-letter-spacing-text);
127
+ letter-spacing: var(--sbb-letter-spacing-text);
128
128
  font-size: var(--sbb-text-font-size);
129
129
  color-scheme: light dark;
130
130
  color: var(--sbb-font-color-default);
131
131
  background-color: var(--sbb-background-color-1);
132
+ --sbb-letter-spacing-heading: var(--sbb-typo-letter-spacing-heading);
133
+ --sbb-letter-spacing-text: var(--sbb-typo-letter-spacing-text);
132
134
  --sbb-animation-duration-1x: 0.04s;
133
135
  --sbb-animation-duration-2x: 0.08s;
134
136
  --sbb-animation-duration-3x: 0.12s;
@@ -1495,7 +1497,7 @@ summary {
1495
1497
  --sbb-navigation-action-color: var(--sbb-color-4-negative);
1496
1498
  --sbb-navigation-action-icon-display: none;
1497
1499
  --sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
1498
- --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-heading);
1500
+ --sbb-navigation-action-letter-spacing: var(--sbb-letter-spacing-heading);
1499
1501
  --sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
1500
1502
  --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
1501
1503
  --sbb-navigation-grid-column: 1 / -1;
@@ -1527,7 +1529,7 @@ summary {
1527
1529
  --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
1528
1530
  --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
1529
1531
  --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
1530
- --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-heading);
1532
+ --sbb-navigation-marker-letter-spacing: var(--sbb-letter-spacing-heading);
1531
1533
  --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
1532
1534
  --sbb-navigation-section-column: 1 / -1;
1533
1535
  --sbb-navigation-section-position: fixed;
@@ -2250,7 +2252,7 @@ img {
2250
2252
  min-width: var(--sbb-spacing-fixed-4x);
2251
2253
  max-height: var(--sbb-spacing-fixed-4x);
2252
2254
  line-height: var(--sbb-typo-line-height-text);
2253
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2255
+ letter-spacing: var(--sbb-letter-spacing-text);
2254
2256
  font-size: var(--sbb-text-font-size-xxs);
2255
2257
  font-weight: bold;
2256
2258
  outline: var(--sbb-border-width-1x) solid transparent;
@@ -2338,7 +2340,7 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
2338
2340
  opacity: 1;
2339
2341
  background-color: transparent;
2340
2342
  font-size: var(--sbb-form-field-input-text-size) !important;
2341
- letter-spacing: var(--sbb-typo-letter-spacing-text) !important;
2343
+ letter-spacing: var(--sbb-letter-spacing-text) !important;
2342
2344
  font-family: var(--sbb-typo-font-family) !important;
2343
2345
  line-height: var(--sbb-typo-line-height-text) !important;
2344
2346
  }
@@ -2501,11 +2503,11 @@ sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
2501
2503
  align-items: baseline;
2502
2504
  color: var(--sbb-color-1);
2503
2505
  font-size: var(--sbb-text-font-size-xs);
2504
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2506
+ letter-spacing: var(--sbb-letter-spacing-text);
2505
2507
  }
2506
2508
  .sbb-header-info strong + * {
2507
2509
  font-size: var(--sbb-text-font-size-xxs);
2508
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2510
+ letter-spacing: var(--sbb-letter-spacing-text);
2509
2511
  color: var(--sbb-color-granite);
2510
2512
  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
2511
2513
  }
@@ -2590,7 +2592,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
2590
2592
  }
2591
2593
  :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) th {
2592
2594
  font-size: var(--sbb-table-header-cell-font-size);
2593
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2595
+ letter-spacing: var(--sbb-letter-spacing-text);
2594
2596
  font-weight: bold;
2595
2597
  background-color: var(--sbb-table-background-color);
2596
2598
  border-block-end: var(--sbb-table-border);
@@ -2600,7 +2602,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
2600
2602
  }
2601
2603
  :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) td {
2602
2604
  font-size: var(--sbb-table-data-cell-font-size);
2603
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2605
+ letter-spacing: var(--sbb-letter-spacing-text);
2604
2606
  background-color: var(--sbb-table-background-color);
2605
2607
  border-block-end: var(--sbb-table-border);
2606
2608
  border-inline-end: var(--sbb-table-border);
@@ -2628,7 +2630,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
2628
2630
  var(--sbb-color-cement)
2629
2631
  );
2630
2632
  font-size: var(--sbb-text-font-size-xs);
2631
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2633
+ letter-spacing: var(--sbb-letter-spacing-text);
2632
2634
  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
2633
2635
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
2634
2636
  text-align: left;
@@ -2727,7 +2729,7 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
2727
2729
  var(--sbb-color-cement)
2728
2730
  );
2729
2731
  font-size: var(--sbb-text-font-size-xs);
2730
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2732
+ letter-spacing: var(--sbb-letter-spacing-text);
2731
2733
  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
2732
2734
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
2733
2735
  text-align: left;
@@ -3007,7 +3009,7 @@ sbb-toggle:has(:focus-visible) {
3007
3009
  color: var(--sbb-color-granite);
3008
3010
  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
3009
3011
  line-height: var(--sbb-typo-line-height-text);
3010
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3012
+ letter-spacing: var(--sbb-letter-spacing-text);
3011
3013
  font-size: var(--sbb-text-font-size-xs);
3012
3014
  }
3013
3015
 
@@ -3217,7 +3219,7 @@ sbb-toggle:has(:focus-visible) {
3217
3219
 
3218
3220
  .sbb-list:where(dl) {
3219
3221
  line-height: var(--sbb-typo-line-height-text);
3220
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3222
+ letter-spacing: var(--sbb-letter-spacing-text);
3221
3223
  font-size: var(--sbb-text-font-size-s);
3222
3224
  margin: 0;
3223
3225
  padding: 0;
@@ -3290,7 +3292,7 @@ sbb-toggle:has(:focus-visible) {
3290
3292
  border: var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
3291
3293
  border-radius: 50%;
3292
3294
  line-height: var(--sbb-typo-line-height-text);
3293
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3295
+ letter-spacing: var(--sbb-letter-spacing-text);
3294
3296
  font-size: var(--sbb-text-font-size-xxs);
3295
3297
  font-weight: bold;
3296
3298
  }
@@ -3528,7 +3530,7 @@ sup {
3528
3530
  font-family: var(--sbb-typo-font-family);
3529
3531
  font-weight: normal;
3530
3532
  line-height: var(--sbb-typo-line-height-text);
3531
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3533
+ letter-spacing: var(--sbb-letter-spacing-text);
3532
3534
  font-size: var(--sbb-text-font-size);
3533
3535
  }
3534
3536
 
@@ -3562,7 +3564,7 @@ sup {
3562
3564
 
3563
3565
  .sbb-legend {
3564
3566
  line-height: var(--sbb-typo-line-height-text);
3565
- letter-spacing: var(--sbb-typo-letter-spacing-text);
3567
+ letter-spacing: var(--sbb-letter-spacing-text);
3566
3568
  font-size: var(--sbb-text-font-size-xs);
3567
3569
  padding: 0;
3568
3570
  color: var(--sbb-color-granite);
package/link.pure.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import{SbbActionBaseElement as e,SbbButtonBaseElement as t,SbbDisabledMixin as n,SbbDisabledTabIndexActionMixin as r,SbbLinkBaseElement as i,SbbNegativeMixin as a}from"./core.js";import{__esDecorate as o,__runInitializers as s}from"tslib";import{html as c,unsafeCSS as l}from"lit";import{property as u}from"lit/decorators.js";import{SbbIconNameMixin as d}from"./icon.pure.js";import{html as f}from"lit/static-html.js";var p=`:host{outline:none!important}@media (forced-colors:active){:host(:is(:state(button),[state--button])){--sbb-link-color-normal:ButtonText;--sbb-link-color-hover:ButtonText;--sbb-link-color-active:ButtonText}}.sbb-action-base{color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration-line,underline);text-underline-offset:.3125em;text-decoration-thickness:.0625rem}@media (forced-colors:active){.sbb-action-base{text-decoration:underline}}.sbb-action-base{width:100%;cursor:var(--sbb-cursor-pointer);padding:var(--sbb-link-padding,0);outline:none;align-items:center;display:flex}:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-action-base{pointer-events:none;cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-action-base{color:graytext}}:host(:focus-visible) .sbb-action-base,.sbb-action-base:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}@media (any-hover:hover){:host(:hover:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{color:var(--sbb-link-color-hover);text-decoration-line:var(--sbb-link-hover-text-decoration,underline)}}:host(:is(:active,:is(:state(active),[state--active])):not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{color:var(--sbb-link-color-active)}
2
- `;const m=e=>{class t extends a(e){static{this.styles=[l(p)]}constructor(){super(),this.internals.states.add(`sbb-link`)}renderTemplate(){return f`<slot></slot>`}}return t};var h=`:host{--sbb-link-color-hover:light-dark(var(--sbb-color-primary125),var(--sbb-color-cloud));--sbb-link-color-active:light-dark(var(--sbb-color-primary150),var(--sbb-color-silver));--sbb-link-color-normal:light-dark(var(--sbb-color-granite),var(--sbb-color-white));display:block}:host([negative]){--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-link-color-normal:var(--sbb-color-1-negative);--sbb-link-color-hover:var(--sbb-color-4-negative);--sbb-link-color-active:var(--sbb-color-silver)}:host(.sbb-active){--sbb-link-color-normal:light-dark(var(--sbb-color-black),var(--sbb-color-cement));--sbb-link-text-decoration-line:underline}:host(.sbb-active[negative]){--sbb-link-color-normal:var(--sbb-color-cement);--sbb-link-text-decoration-line:underline}:host([size=xs]){--sbb-block-link-font-size:var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-block-link-font-size:var(--sbb-text-font-size-s)}:host([size=m]){--sbb-block-link-font-size:var(--sbb-text-font-size-m)}.sbb-action-base{gap:var(--sbb-block-link-gap);font-size:var(--sbb-block-link-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}.sbb-link__icon{height:calc(var(--sbb-typo-line-height-text) * 1em);width:var(--sbb-block-link-icon-size);flex:none;align-self:start;position:relative}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-link__icon{display:none}:host([icon-placement=end]) .sbb-link__icon{order:2}.sbb-link__icon ::slotted([slot=icon]),.sbb-link__icon sbb-icon{--sbb-icon-svg-display:block;position:absolute;top:50%;translate:0 -50%}
2
+ `;const m=e=>{class t extends a(e){static{this.styles=[l(p)]}constructor(){super(),this.internals.states.add(`sbb-link`)}renderTemplate(){return f`<slot></slot>`}}return t};var h=`:host{--sbb-link-color-hover:light-dark(var(--sbb-color-primary125),var(--sbb-color-cloud));--sbb-link-color-active:light-dark(var(--sbb-color-primary150),var(--sbb-color-silver));--sbb-link-color-normal:light-dark(var(--sbb-color-granite),var(--sbb-color-white));display:block}:host([negative]){--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-link-color-normal:var(--sbb-color-1-negative);--sbb-link-color-hover:var(--sbb-color-4-negative);--sbb-link-color-active:var(--sbb-color-silver)}:host(.sbb-active){--sbb-link-color-normal:light-dark(var(--sbb-color-black),var(--sbb-color-cement));--sbb-link-text-decoration-line:underline}:host(.sbb-active[negative]){--sbb-link-color-normal:var(--sbb-color-cement);--sbb-link-text-decoration-line:underline}:host([size=xs]){--sbb-block-link-font-size:var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-block-link-font-size:var(--sbb-text-font-size-s)}:host([size=m]){--sbb-block-link-font-size:var(--sbb-text-font-size-m)}.sbb-action-base{gap:var(--sbb-block-link-gap);font-size:var(--sbb-block-link-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}.sbb-link__icon{height:calc(var(--sbb-typo-line-height-text) * 1em);width:var(--sbb-block-link-icon-size);flex:none;align-self:start;position:relative}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-link__icon{display:none}:host([icon-placement=end]) .sbb-link__icon{order:2}.sbb-link__icon ::slotted([slot=icon]),.sbb-link__icon sbb-icon{--sbb-icon-svg-display:block;position:absolute;top:50%;translate:0 -50%}
3
3
  `;const g=e=>(()=>{let t=m(d(e)),n,r=[],i=[],a,f=[],p=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[u({reflect:!0})],a=[u({attribute:`icon-placement`,reflect:!0})],o(this,null,n,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:e},r,i),o(this,null,a,{kind:`accessor`,name:`iconPlacement`,static:!1,private:!1,access:{has:e=>`iconPlacement`in e,get:e=>e.iconPlacement,set:(e,t)=>{e.iconPlacement=t}},metadata:e},f,p),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.styles=[l(h)]}#e=s(this,r,null);get size(){return this.#e}set size(e){this.#e=e}#t=(s(this,i),s(this,f,`start`));get iconPlacement(){return this.#t}set iconPlacement(e){this.#t=e}renderTemplate(){return c`
4
4
  <span class="sbb-link__icon">${super.renderIconSlot()}</span>
5
5
  <slot></slot>
package/menu.pure.js CHANGED
@@ -1,4 +1,4 @@
1
- import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElement as r,SbbDarkModeController as i,SbbDisabledInteractiveMixin as a,SbbDisabledMixin as o,SbbDisabledTabIndexActionMixin as s,SbbEscapableOverlayController as c,SbbFocusTrapController as l,SbbInertController as u,SbbLanguageController as d,SbbLinkBaseElement as f,SbbMediaMatcherController as p,SbbMediaQueryBreakpointSmallAndBelow as m,SbbOpenCloseBaseElement as h,SbbScrollHandler as g,forwardEvent as _,getElementPosition as v,getElementPositionHorizontal as y,getNextElementIndex as b,i18nGoBack as x,idReference as S,interactivityChecker as C,isArrowKeyOrPageKeysPressed as w,isEventOnElement as T,isZeroAnimationDuration as E,popoverResetStyles as D,removeAriaOverlayTriggerProperties as O,scrollbarStyles as k,setAriaOverlayTriggerProperties as A,ɵstateController as j}from"./core.js";import{SbbIconNameMixin as M}from"./icon.pure.js";import{__esDecorate as N,__runInitializers as P}from"tslib";import{property as F}from"lit/decorators.js";import{ref as I}from"lit/directives/ref.js";import{SbbDividerElement as L}from"./divider.pure.js";var R=`:host{--sbb-menu-action-cursor:var(--sbb-cursor-pointer);display:block;outline:none!important}@media (any-hover:hover){:host(:is(:hover:not([disabled],:disabled,[disabled-interactive]),[aria-expanded=true])){--sbb-menu-background-color:light-dark(var(--sbb-color-iron),var(--sbb-color-milk));--sbb-menu-action-forced-color-border-color:Highlight}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-cursor:var(--sbb-cursor-default);--sbb-menu-action-color:light-dark(var(--sbb-color-graphite),var(--sbb-color-granite));--sbb-menu-action-forced-color-border-color:GrayText;pointer-events:none;cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-color:GrayText}}:host(:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])){--sbb-menu-action-cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:is(:state(button),[state--button])){--sbb-menu-action-color:ButtonText}}:host([sbb-badge]:not(:is(:state(has-icon-name),[state--has-icon-name]),:is(:state(slotted-icon),[state--slotted-icon]))):after{translate:50% -50%;inset:50% calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - .5 * var(--sbb-size-icon-ui-small)) auto auto!important}:host([sbb-badge]:is(:is(:state(has-icon-name),[state--has-icon-name]),:is(:state(slotted-icon),[state--slotted-icon]))):after{inset:calc(var(--sbb-menu-action-outer-vertical-padding) + var(--sbb-menu-action-content-padding-block) + var(--sbb-badge-position-offset)) calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - var(--sbb-size-icon-ui-small) + var(--sbb-badge-position-offset)) auto auto!important}:host([aria-controls]){--sbb-menu-action-submenu-icon-display:flex}:is(.sbb-menu-button,.sbb-menu-link){width:100%;color:var(--sbb-menu-action-color);padding:var(--sbb-menu-action-outer-vertical-padding) var(--sbb-menu-action-outer-horizontal-padding);cursor:var(--sbb-menu-action-cursor);outline:none;text-decoration:none;display:block}.sbb-menu-action__content{align-items:center;gap:var(--sbb-menu-action-gap);padding:var(--sbb-menu-action-content-padding-block) var(--sbb-menu-action-content-padding-inline);border-radius:var(--sbb-menu-action-border-radius);user-select:none;-webkit-tap-highlight-color:transparent;background-color:var(--sbb-menu-background-color);line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-xs);display:flex}:host(:focus-visible) .sbb-menu-action__content,:focus-visible .sbb-menu-action__content{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}@media (forced-colors:active){.sbb-menu-action__content{border:var(--sbb-border-width-2x) solid var(--sbb-menu-action-forced-color-border-color)}}.sbb-menu-action__icon,.sbb-menu-submenu__icon{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);display:flex}.sbb-menu-submenu__icon{display:var(--sbb-menu-action-submenu-icon-display,none);margin-inline-start:auto}.sbb-menu-action__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-menu-action__label{text-decoration:line-through}
1
+ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElement as r,SbbDarkModeController as i,SbbDisabledInteractiveMixin as a,SbbDisabledMixin as o,SbbDisabledTabIndexActionMixin as s,SbbEscapableOverlayController as c,SbbFocusTrapController as l,SbbInertController as u,SbbLanguageController as d,SbbLinkBaseElement as f,SbbMediaMatcherController as p,SbbMediaQueryBreakpointSmallAndBelow as m,SbbOpenCloseBaseElement as h,SbbScrollHandler as g,forwardEvent as _,getElementPosition as v,getElementPositionHorizontal as y,getNextElementIndex as b,i18nGoBack as x,idReference as S,interactivityChecker as C,isArrowKeyOrPageKeysPressed as w,isEventOnElement as T,isZeroAnimationDuration as E,popoverResetStyles as D,removeAriaOverlayTriggerProperties as O,scrollbarStyles as k,setAriaOverlayTriggerProperties as A,ɵstateController as j}from"./core.js";import{SbbIconNameMixin as M}from"./icon.pure.js";import{__esDecorate as N,__runInitializers as P}from"tslib";import{property as F}from"lit/decorators.js";import{ref as I}from"lit/directives/ref.js";import{SbbDividerElement as L}from"./divider.pure.js";var R=`:host{--sbb-menu-action-cursor:var(--sbb-cursor-pointer);display:block;outline:none!important}@media (any-hover:hover){:host(:is(:hover:not([disabled],:disabled,[disabled-interactive]),[aria-expanded=true])){--sbb-menu-background-color:light-dark(var(--sbb-color-iron),var(--sbb-color-milk));--sbb-menu-action-forced-color-border-color:Highlight}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-cursor:var(--sbb-cursor-default);--sbb-menu-action-color:light-dark(var(--sbb-color-graphite),var(--sbb-color-granite));--sbb-menu-action-forced-color-border-color:GrayText;pointer-events:none;cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-color:GrayText}}:host(:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])){--sbb-menu-action-cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:is(:state(button),[state--button])){--sbb-menu-action-color:ButtonText}}:host([sbb-badge]:not(:is(:state(has-icon-name),[state--has-icon-name]),:is(:state(slotted-icon),[state--slotted-icon]))):after{translate:50% -50%;inset:50% calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - .5 * var(--sbb-size-icon-ui-small)) auto auto!important}:host([sbb-badge]:is(:is(:state(has-icon-name),[state--has-icon-name]),:is(:state(slotted-icon),[state--slotted-icon]))):after{inset:calc(var(--sbb-menu-action-outer-vertical-padding) + var(--sbb-menu-action-content-padding-block) + var(--sbb-badge-position-offset)) calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - var(--sbb-size-icon-ui-small) + var(--sbb-badge-position-offset)) auto auto!important}:host([aria-controls]){--sbb-menu-action-submenu-icon-display:flex}:is(.sbb-menu-button,.sbb-menu-link){width:100%;color:var(--sbb-menu-action-color);padding:var(--sbb-menu-action-outer-vertical-padding) var(--sbb-menu-action-outer-horizontal-padding);cursor:var(--sbb-menu-action-cursor);outline:none;text-decoration:none;display:block}.sbb-menu-action__content{align-items:center;gap:var(--sbb-menu-action-gap);padding:var(--sbb-menu-action-content-padding-block) var(--sbb-menu-action-content-padding-inline);border-radius:var(--sbb-menu-action-border-radius);user-select:none;-webkit-tap-highlight-color:transparent;background-color:var(--sbb-menu-background-color);line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-letter-spacing-text);font-size:var(--sbb-text-font-size-xs);display:flex}:host(:focus-visible) .sbb-menu-action__content,:focus-visible .sbb-menu-action__content{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}@media (forced-colors:active){.sbb-menu-action__content{border:var(--sbb-border-width-2x) solid var(--sbb-menu-action-forced-color-border-color)}}.sbb-menu-action__icon,.sbb-menu-submenu__icon{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);display:flex}.sbb-menu-submenu__icon{display:var(--sbb-menu-action-submenu-icon-display,none);margin-inline-start:auto}.sbb-menu-action__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-menu-action__label{text-decoration:line-through}
2
2
  `;const z=t=>{class r extends M(o(t)){static{this.styles=[n(R)]}renderTemplate(){return e`
3
3
  <span class="sbb-menu-action__content">
4
4
  <span class="sbb-menu-action__icon"> ${super.renderIconSlot()} </span>
package/message.pure.js CHANGED
@@ -1,4 +1,4 @@
1
- import{html as e,unsafeCSS as t}from"lit";import{SbbElement as n}from"./core.js";var r=`:host{text-align:center;line-height:var(--sbb-typo-line-height-text);display:block}::slotted(sbb-title[slot=title]){margin:0}::slotted([slot=image]){width:100%;display:block;margin-inline:auto!important;margin-block:var(--sbb-message-image-margin-block)!important}::slotted([slot=subtitle]){color:var(--sbb-message-subtitle-color);font-size:var(--sbb-text-font-size-s);letter-spacing:var(--sbb-typo-letter-spacing-text);margin:0}::slotted([slot=legend]){line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-xs);color:light-dark(var(--sbb-color-granite),var(--sbb-color-cement));margin-block:var(--sbb-message-legend-margin-block);padding:0}::slotted([slot=action]){margin-block:var(--sbb-message-action-margin-block)}
1
+ import{html as e,unsafeCSS as t}from"lit";import{SbbElement as n}from"./core.js";var r=`:host{text-align:center;line-height:var(--sbb-typo-line-height-text);display:block}::slotted(sbb-title[slot=title]){margin:0}::slotted([slot=image]){width:100%;display:block;margin-inline:auto!important;margin-block:var(--sbb-message-image-margin-block)!important}::slotted([slot=subtitle]){color:var(--sbb-message-subtitle-color);font-size:var(--sbb-text-font-size-s);letter-spacing:var(--sbb-letter-spacing-text);margin:0}::slotted([slot=legend]){line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-letter-spacing-text);font-size:var(--sbb-text-font-size-xs);color:light-dark(var(--sbb-color-granite),var(--sbb-color-cement));margin-block:var(--sbb-message-legend-margin-block);padding:0}::slotted([slot=action]){margin-block:var(--sbb-message-action-margin-block)}
2
2
  `,i=class extends n{static{this.elementName=`sbb-message`}static{this.styles=[t(r)]}_configureTitle(e){let t=e.target.assignedElements().find(e=>e.localName===`sbb-title`);t&&(customElements.upgrade(t),t.visualLevel=`5`)}render(){return e`
3
3
  <slot name="image"></slot>
4
4
  <slot name="title" @slotchange=${this._configureTitle}></slot>
@@ -1,5 +1,5 @@
1
1
  import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbButtonBaseElement as a,SbbElement as o,SbbPropertyWatcherController as s,defaultDateAdapter as c,forceType as l,isArrowKeyOrPageKeysPressed as u,omitEmptyConverter as d,readConfig as f,ɵstateController as p}from"./core.js";import{MutationController as m}from"@lit-labs/observers/mutation-controller.js";var h=`:host{--sbb-mini-calendar-day-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));height:var(--sbb-mini-calendar-day-dimensions);width:var(--sbb-mini-calendar-day-dimensions);border-radius:var(--sbb-border-radius-infinity);color:light-dark(var(--sbb-color-storm),var(--sbb-color-smoke));background-color:currentColor;margin:.0625rem;display:block}@media (any-hover:hover){:host(:hover){scale:var(--sbb-mini-calendar-day-scale);transition:scale var(--sbb-mini-calendar-day-animation-easing) var(--sbb-mini-calendar-day-animation-duration)}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:.125rem}:host([color=charcoal]){color:var(--sbb-background-color-2-inverted)}:host([color=cloud]){color:var(--sbb-background-color-4)}:host([color=orange]){color:var(--sbb-color-orange-light)}:host([color=red]){color:var(--sbb-color-error)}:host([color=sky]){color:var(--sbb-color-sky-light)}:host([marker=circle]){background-color:var(--sbb-color-1-inverted);border:.0625rem solid}:host([marker=target]){background:radial-gradient(circle, currentcolor 0%, currentcolor 25%, var(--sbb-color-1-inverted) 25%, var(--sbb-color-1-inverted) 50%, currentcolor 50%, currentcolor 100%)}:host([marker=slash]){position:relative}:host([marker=slash]):before{content:"";background-image:linear-gradient(-45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%);position:absolute;inset:0}:host([marker=cross]){position:relative}:host([marker=cross]):before{content:"";background-image:linear-gradient(-45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%), linear-gradient(45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%);position:absolute;inset:0}
2
- `;let g=(()=>{let o=a,s,u=[],p=[],m,g=[],_=[],v,y=[],b=[];return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;s=[l(),i()],m=[l(),i({reflect:!0,converter:d})],v=[l(),i({reflect:!0,converter:d})],e(this,null,s,{kind:`accessor`,name:`date`,static:!1,private:!1,access:{has:e=>`date`in e,get:e=>e.date,set:(e,t)=>{e.date=t}},metadata:t},u,p),e(this,null,m,{kind:`accessor`,name:`marker`,static:!1,private:!1,access:{has:e=>`marker`in e,get:e=>e.marker,set:(e,t)=>{e.marker=t}},metadata:t},g,_),e(this,null,v,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},y,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-mini-calendar-day`}static{this.styles=[r(h)]}#e;get date(){return this.#e}set date(e){this.#e=e}#t;get marker(){return this.#t}set marker(e){this.#t=e}#n;get color(){return this.#n}set color(e){this.#n=e}willUpdate(e){super.willUpdate(e),e.has(`date`)&&this.date&&(this.internals.ariaLabel=this._dateAdapter.getAccessibilityFormatDate(this.date))}renderTemplate(){return n``}constructor(){super(...arguments),this._dateAdapter=f().datetime?.dateAdapter??c,this.#e=t(this,u,``),this.#t=(t(this,p),t(this,g,``)),this.#n=(t(this,_),t(this,y,``)),t(this,b)}}})();var _=`:host{display:inline-block}:host(:is(:state(show-year),[state--show-year])){--sbb-mini-calendar-month-visibilty-year:visible}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-mini-calendar-month-grid-auto-flow:row;--sbb-mini-calendar-month-height:3rem;--sbb-mini-calendar-month-grid-template-rows:none;--sbb-mini-calendar-month-grid-template-columns:repeat(7, 1fr)}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) ::slotted(sbb-mini-calendar-day:first-child){grid-column-start:var(--sbb-mini-calendar-month-offset)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){--sbb-mini-calendar-month-grid-auto-flow:column;--sbb-mini-calendar-month-height:auto;--sbb-mini-calendar-month-grid-template-rows:repeat(7, 1fr);--sbb-mini-calendar-month-grid-template-columns:none}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) ::slotted(sbb-mini-calendar-day:first-child){grid-row-start:var(--sbb-mini-calendar-month-offset)}.sbb-mini-calendar-month-wrapper{height:var(--sbb-mini-calendar-month-height);grid-auto-flow:var(--sbb-mini-calendar-month-grid-auto-flow);grid-auto-rows:.5rem;grid-template-columns:var(--sbb-mini-calendar-month-grid-template-columns);grid-template-rows:var(--sbb-mini-calendar-month-grid-template-rows);display:grid}.sbb-mini-calendar-month-label-year,.sbb-mini-calendar-month-label-month{font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-mini-calendar-month-label-color)}.sbb-mini-calendar-month-label-year{visibility:var(--sbb-mini-calendar-month-visibilty-year)}
2
+ `;let g=(()=>{let o=a,s,u=[],p=[],m,g=[],_=[],v,y=[],b=[];return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;s=[l(),i()],m=[l(),i({reflect:!0,converter:d})],v=[l(),i({reflect:!0,converter:d})],e(this,null,s,{kind:`accessor`,name:`date`,static:!1,private:!1,access:{has:e=>`date`in e,get:e=>e.date,set:(e,t)=>{e.date=t}},metadata:t},u,p),e(this,null,m,{kind:`accessor`,name:`marker`,static:!1,private:!1,access:{has:e=>`marker`in e,get:e=>e.marker,set:(e,t)=>{e.marker=t}},metadata:t},g,_),e(this,null,v,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},y,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-mini-calendar-day`}static{this.styles=[r(h)]}#e;get date(){return this.#e}set date(e){this.#e=e}#t;get marker(){return this.#t}set marker(e){this.#t=e}#n;get color(){return this.#n}set color(e){this.#n=e}willUpdate(e){super.willUpdate(e),e.has(`date`)&&this.date&&(this.internals.ariaLabel=this._dateAdapter.getAccessibilityFormatDate(this.date))}renderTemplate(){return n``}constructor(){super(...arguments),this._dateAdapter=f().datetime?.dateAdapter??c,this.#e=t(this,u,``),this.#t=(t(this,p),t(this,g,``)),this.#n=(t(this,_),t(this,y,``)),t(this,b)}}})();var _=`:host{display:inline-block}:host(:is(:state(show-year),[state--show-year])){--sbb-mini-calendar-month-visibilty-year:visible}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-mini-calendar-month-grid-auto-flow:row;--sbb-mini-calendar-month-height:3rem;--sbb-mini-calendar-month-grid-template-rows:none;--sbb-mini-calendar-month-grid-template-columns:repeat(7, 1fr)}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) ::slotted(sbb-mini-calendar-day:first-child){grid-column-start:var(--sbb-mini-calendar-month-offset)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){--sbb-mini-calendar-month-grid-auto-flow:column;--sbb-mini-calendar-month-height:auto;--sbb-mini-calendar-month-grid-template-rows:repeat(7, 1fr);--sbb-mini-calendar-month-grid-template-columns:none}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) ::slotted(sbb-mini-calendar-day:first-child){grid-row-start:var(--sbb-mini-calendar-month-offset)}.sbb-mini-calendar-month-wrapper{height:var(--sbb-mini-calendar-month-height);grid-auto-flow:var(--sbb-mini-calendar-month-grid-auto-flow);grid-auto-rows:.5rem;grid-template-columns:var(--sbb-mini-calendar-month-grid-template-columns);grid-template-rows:var(--sbb-mini-calendar-month-grid-template-rows);display:grid}.sbb-mini-calendar-month-label-year,.sbb-mini-calendar-month-label-month{font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-letter-spacing-text);color:var(--sbb-mini-calendar-month-label-color)}.sbb-mini-calendar-month-label-year{visibility:var(--sbb-mini-calendar-month-visibilty-year)}
3
3
  `;let v=(()=>{let a=o,u,d=[],p=[];return class extends a{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;u=[l(),i()],e(this,null,u,{kind:`accessor`,name:`date`,static:!1,private:!1,access:{has:e=>`date`in e,get:e=>e.date,set:(e,t)=>{e.date=t}},metadata:t},d,p),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-mini-calendar-month`}static{this.styles=[r(_)]}#e;get date(){return this.#e}set date(e){this.#e=e}constructor(){super(),this.#e=t(this,d,``),this._dateAdapter=(t(this,p),f().datetime?.dateAdapter??c),this._monthNames=this._dateAdapter.getMonthNames(`short`),this._monthLabel=null,this._yearLabel=null,this._previousOrientation=null,this.addController(new s(this,()=>this.closest(`sbb-mini-calendar`),{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)}}))}willUpdate(e){if(super.willUpdate(e),e.has(`date`)&&this.date){if(!this.date.match(/^\d{4}-(0[1-9]|1[0-2])$/))return;let e=this.date.split(`-`),t=this._dateAdapter.createDate(+e[0],+e[1],1),n=this._dateAdapter.getFirstWeekOffset(t);this.style?.setProperty(`--sbb-mini-calendar-month-offset`,`${n+1}`),this._monthLabel=`${this._monthNames[e[1]-1]}.`,this._yearLabel=String(this._dateAdapter.getYear(t))}}render(){return n`
4
4
  <div class="sbb-mini-calendar-month-label-year">${this._yearLabel}</div>
5
5
  <div class="sbb-mini-calendar-month-wrapper">
@@ -6,7 +6,7 @@ $theme: 'standard' !default;
6
6
  --sbb-navigation-action-color: var(--sbb-color-4-negative);
7
7
  --sbb-navigation-action-icon-display: none;
8
8
  --sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
9
- --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-heading);
9
+ --sbb-navigation-action-letter-spacing: var(--sbb-letter-spacing-heading);
10
10
  --sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
11
11
  --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
12
12
  --sbb-navigation-grid-column: 1 / -1;
@@ -38,7 +38,7 @@ $theme: 'standard' !default;
38
38
  --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
39
39
  --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
40
40
  --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
41
- --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-heading);
41
+ --sbb-navigation-marker-letter-spacing: var(--sbb-letter-spacing-heading);
42
42
  --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
43
43
  --sbb-navigation-section-column: 1 / -1;
44
44
  --sbb-navigation-section-position: fixed;