@sbb-esta/lyne-elements 1.11.3 → 1.12.1

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 (166) hide show
  1. package/_index.scss +1 -1
  2. package/core/i18n/i18n.d.ts +5 -0
  3. package/core/i18n/i18n.d.ts.map +1 -1
  4. package/core/i18n.js +85 -55
  5. package/core/styles/core/functions.scss +1 -1
  6. package/core/styles/lists.scss +4 -0
  7. package/core/styles/mixins/helpers.scss +1 -1
  8. package/core/styles/mixins/lists.scss +128 -77
  9. package/core/styles/mixins/scrollbar.scss +2 -2
  10. package/core/styles/mixins/table.scss +4 -6
  11. package/core/styles/normalize.scss +62 -131
  12. package/core.css +0 -5
  13. package/custom-elements.json +781 -77
  14. package/development/accordion.js +2 -9
  15. package/development/action-group.js +2 -9
  16. package/development/alert/alert-group.js +2 -9
  17. package/development/alert/alert.js +2 -9
  18. package/development/autocomplete-grid/autocomplete-grid-button.js +2 -9
  19. package/development/autocomplete-grid/autocomplete-grid-cell.js +2 -9
  20. package/development/autocomplete-grid/autocomplete-grid-option.js +2 -9
  21. package/development/autocomplete-grid/autocomplete-grid-row.js +2 -9
  22. package/development/autocomplete.js +2 -12
  23. package/development/breadcrumb/breadcrumb-group.js +2 -9
  24. package/development/breadcrumb/breadcrumb.js +2 -9
  25. package/development/button/common.js +2 -11
  26. package/development/button/mini-button-group.js +2 -9
  27. package/development/button/mini-button.js +2 -9
  28. package/development/calendar.js +2 -9
  29. package/development/card/card-badge.js +2 -9
  30. package/development/card/card.js +2 -9
  31. package/development/card/common.js +2 -9
  32. package/development/checkbox/checkbox-group.js +2 -9
  33. package/development/checkbox/checkbox.js +2 -9
  34. package/development/checkbox/common.js +1 -8
  35. package/development/chip.js +2 -9
  36. package/development/clock.js +2 -9
  37. package/development/container/container.js +1 -8
  38. package/development/container/sticky-bar.js +2 -9
  39. package/development/core/i18n/i18n.d.ts +5 -0
  40. package/development/core/i18n/i18n.d.ts.map +1 -1
  41. package/development/core/i18n.js +36 -1
  42. package/development/core/mixins.js +2 -9
  43. package/development/datepicker/datepicker-next-day.js +2 -9
  44. package/development/datepicker/datepicker-previous-day.js +2 -9
  45. package/development/datepicker/datepicker-toggle.js +2 -9
  46. package/development/datepicker/datepicker.js +2 -9
  47. package/development/dialog/dialog-actions.js +2 -9
  48. package/development/dialog/dialog-content.js +2 -11
  49. package/development/dialog/dialog-title.js +2 -9
  50. package/development/dialog/dialog.js +2 -9
  51. package/development/divider.js +2 -9
  52. package/development/expansion-panel/expansion-panel-content.js +2 -9
  53. package/development/expansion-panel/expansion-panel-header.js +2 -9
  54. package/development/expansion-panel/expansion-panel.js +2 -9
  55. package/development/file-selector.js +2 -9
  56. package/development/flip-card/flip-card-details.js +2 -9
  57. package/development/flip-card/flip-card-summary.js +2 -9
  58. package/development/flip-card/flip-card.js +2 -9
  59. package/development/footer.js +2 -9
  60. package/development/form-error.js +2 -9
  61. package/development/form-field/form-field-clear.js +2 -9
  62. package/development/form-field/form-field.js +1 -12
  63. package/development/header/common.js +2 -9
  64. package/development/header/header.js +2 -9
  65. package/development/icon.js +2 -9
  66. package/development/image/image.d.ts +1 -0
  67. package/development/image/image.d.ts.map +1 -1
  68. package/development/image.js +13 -13
  69. package/development/journey-header.js +2 -9
  70. package/development/lead-container.js +2 -9
  71. package/development/link/common.js +4 -25
  72. package/development/link-list/common.js +2 -9
  73. package/development/link-list/link-list-anchor.js +2 -9
  74. package/development/link-list/link-list.js +2 -9
  75. package/development/loading-indicator.js +2 -10
  76. package/development/logo.js +2 -9
  77. package/development/map-container.js +2 -11
  78. package/development/menu/common.js +2 -9
  79. package/development/menu/menu.js +2 -11
  80. package/development/message.js +2 -9
  81. package/development/navigation/common.js +2 -9
  82. package/development/navigation/navigation-list.js +2 -9
  83. package/development/navigation/navigation-marker.js +2 -9
  84. package/development/navigation/navigation-section.js +2 -11
  85. package/development/navigation/navigation.js +2 -11
  86. package/development/notification.js +2 -10
  87. package/development/option/optgroup.js +2 -9
  88. package/development/option/option.js +2 -9
  89. package/development/overlay.js +2 -11
  90. package/development/paginator/index.d.ts +2 -0
  91. package/development/paginator/index.d.ts.map +1 -0
  92. package/development/paginator/paginator.d.ts +91 -0
  93. package/development/paginator/paginator.d.ts.map +1 -0
  94. package/development/paginator.d.ts +2 -0
  95. package/development/paginator.d.ts.map +1 -0
  96. package/development/paginator.js +519 -0
  97. package/development/popover/popover-trigger.js +2 -9
  98. package/development/popover/popover.js +2 -9
  99. package/development/radio-button/common.js +2 -9
  100. package/development/radio-button/radio-button-group/radio-button-group.d.ts +1 -1
  101. package/development/radio-button/radio-button-group/radio-button-group.d.ts.map +1 -1
  102. package/development/radio-button/radio-button-group.js +19 -22
  103. package/development/radio-button/radio-button.js +2 -9
  104. package/development/screen-reader-only.js +2 -9
  105. package/development/select/select.d.ts +6 -0
  106. package/development/select/select.d.ts.map +1 -1
  107. package/development/select.js +23 -18
  108. package/development/selection-expansion-panel.js +2 -9
  109. package/development/signet.js +2 -9
  110. package/development/skiplink-list.js +2 -9
  111. package/development/slider/slider.d.ts +35 -16
  112. package/development/slider/slider.d.ts.map +1 -1
  113. package/development/slider.js +102 -88
  114. package/development/status.js +2 -9
  115. package/development/stepper/step-label.js +2 -9
  116. package/development/stepper/step.js +2 -9
  117. package/development/stepper/stepper.js +2 -9
  118. package/development/table/table-wrapper.js +2 -11
  119. package/development/tabs/tab-group.js +2 -9
  120. package/development/tabs/tab-label.js +2 -9
  121. package/development/tabs/tab.js +1 -8
  122. package/development/tag/tag-group.js +2 -9
  123. package/development/tag/tag.js +2 -9
  124. package/development/teaser-hero.js +2 -9
  125. package/development/teaser-product/common.js +2 -9
  126. package/development/teaser-product/teaser-product.js +2 -9
  127. package/development/teaser.js +12 -11
  128. package/development/time-input.js +2 -9
  129. package/development/timetable-occupancy-icon.js +2 -9
  130. package/development/timetable-occupancy.js +2 -9
  131. package/development/title.js +3 -17
  132. package/development/toast.js +2 -9
  133. package/development/toggle/toggle-option.js +2 -9
  134. package/development/toggle/toggle.js +2 -9
  135. package/development/toggle-check.js +1 -8
  136. package/development/train/train-blocked-passage.js +2 -9
  137. package/development/train/train-formation.js +2 -11
  138. package/development/train/train-wagon.js +2 -9
  139. package/development/train/train.js +2 -9
  140. package/development/visual-checkbox.js +2 -9
  141. package/image/image.d.ts +1 -0
  142. package/image/image.d.ts.map +1 -1
  143. package/image.js +7 -7
  144. package/index.d.ts +2 -0
  145. package/index.js +2 -0
  146. package/lists.css +97 -38
  147. package/normalize.css +21 -113
  148. package/package.json +6 -1
  149. package/paginator/index.d.ts +2 -0
  150. package/paginator/index.d.ts.map +1 -0
  151. package/paginator/paginator.d.ts +91 -0
  152. package/paginator/paginator.d.ts.map +1 -0
  153. package/paginator.d.ts +2 -0
  154. package/paginator.d.ts.map +1 -0
  155. package/paginator.js +263 -0
  156. package/radio-button/radio-button-group/radio-button-group.d.ts +1 -1
  157. package/radio-button/radio-button-group/radio-button-group.d.ts.map +1 -1
  158. package/radio-button/radio-button-group.js +13 -8
  159. package/select/select.d.ts +6 -0
  160. package/select/select.d.ts.map +1 -1
  161. package/select.js +40 -24
  162. package/slider/slider.d.ts +35 -16
  163. package/slider/slider.d.ts.map +1 -1
  164. package/slider.js +111 -78
  165. package/standard-theme.css +116 -160
  166. package/teaser.js +16 -16
package/lists.css CHANGED
@@ -8,7 +8,6 @@
8
8
  margin: 0;
9
9
  padding: 0;
10
10
  padding-inline-start: var(--sbb-list-padding-inline-start);
11
- color: var(--sbb-color-iron);
12
11
  }
13
12
  .sbb-list:where(ol, ul) > li + li,
14
13
  .sbb-list:where(ol, ul) :is(ol, ul) > li + li {
@@ -58,7 +57,6 @@
58
57
  display: grid;
59
58
  grid-template-columns: auto minmax(20%, 1fr);
60
59
  gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x);
61
- color: var(--sbb-color-iron);
62
60
  }
63
61
  .sbb-list:where(dl) :is(dt, dd) {
64
62
  margin: 0;
@@ -66,24 +64,54 @@
66
64
  }
67
65
 
68
66
  .sbb-step-list {
69
- --sbb-step-list-marker-dimensions: 2.125rem;
70
- --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
67
+ --sbb-step-list-dimensions: 2.125rem;
71
68
  --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
72
- --sbb-step-list-marker-to-text-gap: var(--sbb-spacing-responsive-xxxs);
73
- --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
74
- --sbb-step-list-text-to-marker-block-offset: calc(
75
- 0.5 *
76
- (
77
- var(--sbb-step-list-marker-dimensions) - var(--sbb-typo-line-height-body-text) *
78
- var(--sbb-text-font-size)
79
- )
80
- );
81
- --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
69
+ --sbb-step-list-to-text-gap: var(--sbb-spacing-responsive-xxxs);
70
+ --sbb-step-list-text-to-marker-block-offset: calc(0.5 * (var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size)));
82
71
  list-style: none;
83
72
  margin: 0;
84
73
  padding: 0;
74
+ }
75
+ @media (min-width: calc(52.5rem)) {
76
+ .sbb-step-list:where(.sbb-text-xl) {
77
+ --sbb-step-list-dimensions: 2.5625rem;
78
+ }
79
+ }
80
+ .sbb-step-list > li {
81
+ position: relative;
82
+ padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-dimensions) + var(--sbb-step-list-to-text-gap)) var(--sbb-step-list-padding-inline);
83
+ min-height: var(--sbb-step-list-dimensions);
84
+ }
85
+ .sbb-step-list > li::before {
86
+ --sbb-text-font-size: var(--sbb-font-size-text-xxs);
87
+ font-family: var(--sbb-typo-font-family);
88
+ font-weight: normal;
89
+ line-height: var(--sbb-typo-line-height-body-text);
90
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
91
+ font-size: var(--sbb-text-font-size);
92
+ font-weight: bold;
93
+ position: absolute;
94
+ height: var(--sbb-step-list-dimensions);
95
+ width: var(--sbb-step-list-dimensions);
96
+ margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
97
+ inset-inline-start: var(--sbb-step-list-padding-inline);
98
+ border-radius: 50%;
99
+ }
100
+ .sbb-step-list > li + li {
101
+ margin-block-start: var(--sbb-step-list-vertical-gap);
102
+ }
103
+ .sbb-step-list > li p {
104
+ margin-block: 0;
105
+ }
106
+ .sbb-step-list > li > * + p {
107
+ margin-block-start: var(--sbb-spacing-responsive-xxxs);
108
+ }
109
+ .sbb-step-list {
110
+ --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
111
+ --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
112
+ --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
85
113
  counter-reset: steps;
86
- /* stylelint-disable-next-line no-descending-specificity */
114
+ color: var(--sbb-color-iron);
87
115
  }
88
116
  .sbb-step-list:where(.sbb-text-s) {
89
117
  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
@@ -91,18 +119,20 @@
91
119
  .sbb-step-list:where(.sbb-text-m, .sbb-text-l, .sbb-text-xl) {
92
120
  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x);
93
121
  }
94
- @media (min-width: calc(52.5rem)) {
95
- .sbb-step-list:where(.sbb-text-xl) {
96
- --sbb-step-list-marker-dimensions: 2.5625rem;
97
- }
98
- }
99
122
  .sbb-step-list > li {
100
- position: relative;
101
123
  counter-increment: steps;
102
124
  background-color: var(--sbb-color-milk);
103
125
  padding-block: calc(var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)) var(--sbb-step-list-padding-block);
104
- padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-marker-dimensions) + var(--sbb-step-list-marker-to-text-gap)) var(--sbb-step-list-padding-inline);
105
- min-height: calc(var(--sbb-step-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block));
126
+ padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-dimensions) + var(--sbb-step-list-to-text-gap)) var(--sbb-step-list-padding-inline);
127
+ min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
128
+ }
129
+ .sbb-step-list > li::before {
130
+ content: counter(steps);
131
+ display: flex;
132
+ align-items: center;
133
+ justify-content: center;
134
+ border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
135
+ color: var(--sbb-color-charcoal);
106
136
  }
107
137
  .sbb-step-list > li:first-of-type {
108
138
  border-start-start-radius: var(--sbb-step-list-border-radius);
@@ -112,7 +142,27 @@
112
142
  border-end-start-radius: var(--sbb-step-list-border-radius);
113
143
  border-end-end-radius: var(--sbb-step-list-border-radius);
114
144
  }
115
- .sbb-step-list > li::before {
145
+
146
+ .sbb-icon-list {
147
+ --sbb-icon-list-dimensions: 2.125rem;
148
+ --sbb-icon-list-padding-inline: var(--sbb-spacing-responsive-xxs);
149
+ --sbb-icon-list-to-text-gap: var(--sbb-spacing-responsive-xxxs);
150
+ --sbb-icon-list-text-to-marker-block-offset: calc(0.5 * (var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size)));
151
+ list-style: none;
152
+ margin: 0;
153
+ padding: 0;
154
+ }
155
+ @media (min-width: calc(52.5rem)) {
156
+ .sbb-icon-list:where(.sbb-text-xl) {
157
+ --sbb-icon-list-dimensions: 2.5625rem;
158
+ }
159
+ }
160
+ .sbb-icon-list > li {
161
+ position: relative;
162
+ padding-inline: calc(var(--sbb-icon-list-padding-inline) + var(--sbb-icon-list-dimensions) + var(--sbb-icon-list-to-text-gap)) var(--sbb-icon-list-padding-inline);
163
+ min-height: var(--sbb-icon-list-dimensions);
164
+ }
165
+ .sbb-icon-list > li::before {
116
166
  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
117
167
  font-family: var(--sbb-typo-font-family);
118
168
  font-weight: normal;
@@ -120,25 +170,34 @@
120
170
  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
121
171
  font-size: var(--sbb-text-font-size);
122
172
  font-weight: bold;
123
- content: counter(steps);
124
173
  position: absolute;
125
- display: flex;
126
- align-items: center;
127
- justify-content: center;
128
- height: var(--sbb-step-list-marker-dimensions);
129
- width: var(--sbb-step-list-marker-dimensions);
130
- margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
131
- inset-inline-start: var(--sbb-step-list-padding-inline);
132
- border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
174
+ height: var(--sbb-icon-list-dimensions);
175
+ width: var(--sbb-icon-list-dimensions);
176
+ margin-block-start: calc(-1 * var(--sbb-icon-list-text-to-marker-block-offset));
177
+ inset-inline-start: var(--sbb-icon-list-padding-inline);
133
178
  border-radius: 50%;
134
- color: var(--sbb-color-charcoal);
135
179
  }
136
- .sbb-step-list > li + li {
137
- margin-block-start: var(--sbb-step-list-vertical-gap);
180
+ .sbb-icon-list > li + li {
181
+ margin-block-start: var(--sbb-icon-list-vertical-gap);
138
182
  }
139
- .sbb-step-list > li p {
183
+ .sbb-icon-list > li p {
140
184
  margin-block: 0;
141
185
  }
142
- .sbb-step-list > li > * + p {
186
+ .sbb-icon-list > li > * + p {
143
187
  margin-block-start: var(--sbb-spacing-responsive-xxxs);
188
+ }
189
+ .sbb-icon-list {
190
+ --sbb-icon-list-marker-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.104 13.305 5-6.5-.792-.61-4.69 6.096-2.102-1.681-.624.78 2.5 2 .398.319z" clip-rule="evenodd"></path></svg>');
191
+ --sbb-icon-list-marker-icon-color: currentcolor;
192
+ --sbb-icon-list-vertical-gap: var(--sbb-spacing-fixed-2x);
193
+ --sbb-icon-list-dimensions: var(--sbb-size-icon-ui-small);
194
+ --sbb-icon-list-to-text-gap: var(--sbb-spacing-fixed-2x);
195
+ }
196
+ .sbb-icon-list > li::before {
197
+ content: "";
198
+ background-color: var(--sbb-icon-list-marker-icon-color);
199
+ mask-image: var(--sbb-icon-list-marker-icon);
200
+ mask-repeat: no-repeat;
201
+ mask-position: center;
202
+ mask-size: 100%;
144
203
  }
package/normalize.css CHANGED
@@ -1,189 +1,97 @@
1
- /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
2
- /*
3
- Document
4
- ========
5
- */
6
- /**
7
- 1. Correct the line height in all browsers. ///// Commented out since we define own line-height /////
8
- 2. Prevent adjustments of font size after orientation changes in iOS.
9
- 3. Use a more readable tab size (opinionated).
10
- */
11
1
  html {
12
- -webkit-text-size-adjust: 100%; /* 2 */
13
- -moz-text-size-adjust: 100%; /* 2 */
14
- text-size-adjust: 100%; /* 2 */
15
- tab-size: 4; /* 3 */
2
+ -webkit-text-size-adjust: 100%;
3
+ -moz-text-size-adjust: 100%;
4
+ text-size-adjust: 100%;
5
+ tab-size: 4;
16
6
  }
17
7
 
18
- /*
19
- Sections
20
- ========
21
- */
22
8
  body {
23
- margin: 0; /* Remove the margin in all browsers. */
9
+ margin: 0;
24
10
  }
25
11
 
26
- /*
27
- Grouping content
28
- ================
29
- */
30
- /**
31
- 1. Add the correct height in Firefox.
32
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
33
- */
34
12
  hr {
35
- height: 0; /* 1 */
36
- color: inherit; /* 2 */
13
+ height: 0;
14
+ color: inherit;
37
15
  }
38
16
 
39
- /*
40
- Text-level semantics
41
- ====================
42
- */
43
- /**
44
- Add the correct text decoration in Chrome, Edge, and Safari.
45
- */
46
17
  abbr[title] {
47
18
  text-decoration: underline dotted;
48
19
  }
49
20
 
50
- /**
51
- Add the correct font weight in Edge and Safari.
52
- */
53
21
  b,
54
22
  strong {
55
23
  font-weight: bolder;
56
24
  }
57
25
 
58
- /**
59
- 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
60
- 2. Correct the odd 'em' font sizing in all browsers.
61
- */
62
26
  code,
63
27
  kbd,
64
28
  samp,
65
29
  pre {
66
- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
67
- font-size: 1em; /* 2 */
30
+ font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
31
+ font-size: 1em;
68
32
  }
69
33
 
70
- /**
71
- Add the correct font size in all browsers.
72
- */
73
34
  small {
74
35
  font-size: 80%;
75
36
  }
76
37
 
77
- /*
78
- Tabular data
79
- ============
80
- */
81
- /**
82
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
83
- 2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
84
- */
85
38
  table {
86
- text-indent: 0; /* 1 */
87
- border-color: inherit; /* 2 */
88
- }
89
-
90
- /*
91
- Forms
92
- =====
93
- */
94
- /**
95
- 1. Change the font styles in all browsers.
96
- 2. Remove the margin in Firefox and Safari.
97
- */
39
+ text-indent: 0;
40
+ border-color: inherit;
41
+ }
42
+
98
43
  button,
99
44
  input,
100
45
  optgroup,
101
46
  select,
102
47
  textarea {
103
- font-family: inherit; /* 1 */
104
- font-size: 100%; /* 1 */
105
- line-height: 1.15; /* 1 */
106
- margin: 0; /* 2 */
48
+ font-family: inherit;
49
+ font-size: 100%;
50
+ line-height: 1.15;
51
+ margin: 0;
107
52
  }
108
53
 
109
- /**
110
- Remove the inheritance of text transform in Edge and Firefox.
111
- */
112
54
  button,
113
55
  select {
114
56
  text-transform: none;
115
57
  }
116
58
 
117
- /**
118
- Correct the inability to style clickable types in iOS and Safari.
119
- */
120
59
  button,
121
60
  :is(button, input):where([type=button], [type=reset], [type=submit]) {
122
61
  -webkit-appearance: button;
123
62
  }
124
63
 
125
- /**
126
- Remove the additional ':invalid' styles in Firefox.
127
- See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
128
- */
129
64
  :-moz-ui-invalid {
130
65
  box-shadow: none;
131
66
  }
132
67
 
133
- /**
134
- Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
135
- */
136
68
  legend {
137
69
  padding: 0;
138
70
  }
139
71
 
140
- /**
141
- Add the correct vertical alignment in Chrome and Firefox.
142
- */
143
72
  progress {
144
73
  vertical-align: baseline;
145
74
  }
146
75
 
147
- /**
148
- Correct the cursor style of increment and decrement buttons in Safari.
149
- */
150
76
  ::-webkit-inner-spin-button,
151
77
  ::-webkit-outer-spin-button {
152
78
  height: auto;
153
79
  }
154
80
 
155
- /**
156
- 1. Correct the odd appearance in Chrome and Safari.
157
- 2. Correct the outline style in Safari.
158
- */
159
81
  [type=search] {
160
- -webkit-appearance: textfield; /* 1 */
161
- outline-offset: -2px; /* 2 */
82
+ -webkit-appearance: textfield;
83
+ outline-offset: -2px;
162
84
  }
163
85
 
164
- /**
165
- Remove the inner padding in Chrome and Safari on macOS.
166
- */
167
86
  ::-webkit-search-decoration {
168
87
  -webkit-appearance: none;
169
88
  }
170
89
 
171
- /**
172
- 1. Correct the inability to style clickable types in iOS and Safari.
173
- 2. Change font properties to 'inherit' in Safari.
174
- */
175
90
  ::-webkit-file-upload-button {
176
- -webkit-appearance: button; /* 1 */
177
- font: inherit; /* 2 */
91
+ -webkit-appearance: button;
92
+ font: inherit;
178
93
  }
179
94
 
180
- /*
181
- Interactive
182
- ===========
183
- */
184
- /*
185
- Add the correct display in Chrome and Safari.
186
- */
187
95
  summary {
188
96
  display: list-item;
189
97
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements",
3
- "version": "1.11.3",
3
+ "version": "1.12.1",
4
4
  "description": "Lyne Design System",
5
5
  "keywords": [
6
6
  "design system",
@@ -735,6 +735,11 @@
735
735
  "development": "./development/overlay.js",
736
736
  "default": "./overlay.js"
737
737
  },
738
+ "./paginator.js": {
739
+ "types": "./development/paginator.d.ts",
740
+ "development": "./development/paginator.js",
741
+ "default": "./paginator.js"
742
+ },
738
743
  "./popover.js": {
739
744
  "types": "./development/popover.d.ts",
740
745
  "development": "./development/popover.js",
@@ -0,0 +1,2 @@
1
+ export * from './paginator.js';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
@@ -0,0 +1,91 @@
1
+ import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
2
+ export type SbbPaginatorPageEventDetails = {
3
+ length: number;
4
+ pageSize: number;
5
+ pageIndex: number;
6
+ previousPageIndex: number;
7
+ };
8
+ declare const SbbPaginatorElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
9
+ /**
10
+ * It displays a paginator component.
11
+ *
12
+ * @event {CustomEvent<SbbPaginatorPageEventDetails>} page - Emits when the pageIndex changes.
13
+ */
14
+ export declare class SbbPaginatorElement extends SbbPaginatorElement_base {
15
+ static styles: CSSResultGroup;
16
+ static readonly events: Record<string, string>;
17
+ /** Total number of items. */
18
+ set length(value: number);
19
+ get length(): number;
20
+ private _length;
21
+ /** Number of items per page. */
22
+ set pageSize(value: number);
23
+ get pageSize(): number;
24
+ private _pageSize;
25
+ /** Current page index. */
26
+ set pageIndex(value: number);
27
+ get pageIndex(): number;
28
+ private _pageIndex;
29
+ /** The available `pageSize` choices. */
30
+ set pageSizeOptions(value: number[]);
31
+ get pageSizeOptions(): number[] | undefined;
32
+ private _pageSizeOptions?;
33
+ /**
34
+ * Position of the prev/next buttons: if `pageSizeOptions` is set, the sbb-select for the pageSize change
35
+ * will be positioned oppositely with the page numbers always in the center.
36
+ */
37
+ pagerPosition: 'start' | 'end';
38
+ /** Size variant, either m or s. */
39
+ size: 'm' | 's';
40
+ private _page;
41
+ private _paginatorOptionsLabel;
42
+ private _language;
43
+ private _markForFocus;
44
+ private _updateSelectAriaLabelledBy;
45
+ protected updated(changedProperties: PropertyValues<this>): void;
46
+ /**
47
+ * Calculates the current number of pages based on the `length` and the `pageSize`;
48
+ * value must be rounded up (e.g. `length = 21` and `pageSize = 10` means 3 pages).
49
+ */
50
+ private _numberOfPages;
51
+ /**
52
+ * If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
53
+ * emit the `page` event and then update the `pageSize` value.
54
+ */
55
+ private _pageSizeChanged;
56
+ /**
57
+ * If the `pageIndex` changes due to user interaction,
58
+ * emit the `page` event and then update the `pageIndex` value.
59
+ */
60
+ private _pageIndexChanged;
61
+ private _emitPageEvent;
62
+ /** Returns the displayed page elements. */
63
+ private _getVisiblePages;
64
+ /** Evaluate `pageIndex` by excluding edge cases. */
65
+ private _coercePageIndexInRange;
66
+ /**
67
+ * Calculate the pages set based on the following rules:
68
+ * - the first page must always be visible;
69
+ * - the last page must always be visible;
70
+ * - if there are more than `MAX_PAGE_NUMBERS_DISPLAYED` other pages, ellipsis button must be used.
71
+ */
72
+ private _getVisiblePagesIndex;
73
+ /** Creates an array of consecutive numbers given the length and the starting value. */
74
+ private _range;
75
+ private _handleKeyUp;
76
+ private _currentPageLabel;
77
+ private _renderPrevNextButtons;
78
+ private _renderItemPerPageTemplate;
79
+ private _renderPageNumbers;
80
+ protected render(): TemplateResult;
81
+ }
82
+ declare global {
83
+ interface HTMLElementTagNameMap {
84
+ 'sbb-paginator': SbbPaginatorElement;
85
+ }
86
+ interface HTMLElementEventMap {
87
+ page: CustomEvent<SbbPaginatorPageEventDetails>;
88
+ }
89
+ }
90
+ export {};
91
+ //# sourceMappingURL=paginator.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/paginator.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAoBb,OAAO,0BAA0B,CAAC;AAClC,OAAO,gCAAgC,CAAC;AACxC,OAAO,eAAe,CAAC;AACvB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AACtB,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,4BAA4B,GAAG;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;;AAMF;;;;GAIG;AACH,qBAIa,mBAAoB,SAAQ,wBAA4B;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,6BAA6B;IAC7B,IACW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IACD,IAAW,MAAM,IAAI,MAAM,CAE1B;IACD,OAAO,CAAC,OAAO,CAAa;IAE5B,gCAAgC;IAChC,IACW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAMhC;IACD,IAAW,QAAQ,IAAI,MAAM,CAE5B;IACD,OAAO,CAAC,SAAS,CAAc;IAE/B,0BAA0B;IAC1B,IACW,SAAS,CAAC,KAAK,EAAE,MAAM,EAEjC;IACD,IAAW,SAAS,IAAI,MAAM,CAE7B;IACD,OAAO,CAAC,UAAU,CAAa;IAE/B,wCAAwC;IACxC,IACW,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,EAGzC;IACD,IAAW,eAAe,IAAI,MAAM,EAAE,GAAG,SAAS,CAEjD;IACD,OAAO,CAAC,gBAAgB,CAAC,CAAW;IAEpC;;;OAGG;IAC8D,aAAa,EAAE,OAAO,GAAG,KAAK,CACrF;IAEV,mCAAmC;IACC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,OAAO,CAAC,KAAK,CAIX;IAEF,OAAO,CAAC,sBAAsB,CAA6C;IAC3E,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,2BAA2B,CAAkB;cAElC,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA8BzE;;;OAGG;IACH,OAAO,CAAC,cAAc;IAItB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAUxB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,cAAc;IAStB,2CAA2C;IAC3C,OAAO,CAAC,gBAAgB;IAIxB,oDAAoD;IACpD,OAAO,CAAC,uBAAuB;IAO/B;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IA2B7B,uFAAuF;IACvF,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,sBAAsB;IAsB9B,OAAO,CAAC,0BAA0B;IA8BlC,OAAO,CAAC,kBAAkB;cAgCP,MAAM,IAAI,cAAc;CAkB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;IACD,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}
package/paginator.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './paginator/paginator.js';
2
+ //# sourceMappingURL=paginator.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../src/elements/paginator.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}