@alfalab/core-components-tabs 8.5.2 → 8.6.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 (184) hide show
  1. package/collapsible/index.js +0 -19
  2. package/components/primary-tablist/Component.collapsible.d.ts +1 -1
  3. package/components/primary-tablist/Component.collapsible.js +5 -12
  4. package/components/primary-tablist/Component.d.ts +1 -1
  5. package/components/primary-tablist/Component.desktop.js +1 -16
  6. package/components/primary-tablist/Component.js +4 -11
  7. package/components/primary-tablist/Component.mobile.d.ts +1 -1
  8. package/components/primary-tablist/Component.mobile.js +3 -22
  9. package/components/primary-tablist/Component.responsive.js +0 -17
  10. package/components/primary-tablist/index.css +288 -30
  11. package/components/primary-tablist/mobile.css +499 -33
  12. package/components/scroll-controls/Component.d.ts +1 -0
  13. package/components/scroll-controls/Component.js +7 -7
  14. package/components/scroll-controls/index.css +23 -26
  15. package/components/scroll-controls/index.js +0 -8
  16. package/components/scrollable-container/Component.d.ts +5 -1
  17. package/components/scrollable-container/Component.js +3 -9
  18. package/components/scrollable-container/index.css +6 -6
  19. package/components/scrollable-container/index.js +0 -10
  20. package/components/secondary-tablist/Component.desktop.js +1 -13
  21. package/components/secondary-tablist/Component.js +0 -9
  22. package/components/secondary-tablist/Component.mobile.js +2 -13
  23. package/components/secondary-tablist/Component.responsive.js +0 -16
  24. package/components/secondary-tablist/index.css +11 -11
  25. package/components/secondary-tablist/mobile.css +13 -13
  26. package/components/tab/Component.js +1 -1
  27. package/components/tab/index.css +3 -3
  28. package/components/tab/index.js +0 -2
  29. package/components/tabs/Component.collapsible.js +0 -15
  30. package/components/tabs/Component.d.ts +1 -1
  31. package/components/tabs/Component.desktop.js +0 -20
  32. package/components/tabs/Component.js +2 -2
  33. package/components/tabs/Component.mobile.js +0 -20
  34. package/components/tabs/Component.responsive.js +0 -26
  35. package/components/title/index.js +0 -3
  36. package/cssm/collapsible/index.js +0 -20
  37. package/cssm/components/primary-tablist/Component.collapsible.d.ts +1 -1
  38. package/cssm/components/primary-tablist/Component.collapsible.js +4 -11
  39. package/cssm/components/primary-tablist/Component.d.ts +1 -1
  40. package/cssm/components/primary-tablist/Component.desktop.js +0 -17
  41. package/cssm/components/primary-tablist/Component.js +4 -13
  42. package/cssm/components/primary-tablist/Component.mobile.d.ts +1 -1
  43. package/cssm/components/primary-tablist/Component.mobile.js +1 -22
  44. package/cssm/components/primary-tablist/Component.responsive.js +0 -20
  45. package/cssm/components/primary-tablist/index.module.css +259 -1
  46. package/cssm/components/primary-tablist/mobile.module.css +210 -0
  47. package/cssm/components/primary-tablist/text-styles.module.css +16 -0
  48. package/cssm/components/scroll-controls/Component.d.ts +1 -0
  49. package/cssm/components/scroll-controls/Component.js +6 -6
  50. package/cssm/components/scroll-controls/index.js +0 -9
  51. package/cssm/components/scroll-controls/index.module.css +12 -15
  52. package/cssm/components/scrollable-container/Component.d.ts +5 -1
  53. package/cssm/components/scrollable-container/Component.js +2 -9
  54. package/cssm/components/scrollable-container/index.js +0 -12
  55. package/cssm/components/secondary-tablist/Component.desktop.js +0 -14
  56. package/cssm/components/secondary-tablist/Component.js +0 -11
  57. package/cssm/components/secondary-tablist/Component.mobile.js +0 -13
  58. package/cssm/components/secondary-tablist/Component.responsive.js +0 -19
  59. package/cssm/components/tab/index.js +0 -3
  60. package/cssm/components/tabs/Component.collapsible.js +0 -15
  61. package/cssm/components/tabs/Component.d.ts +1 -1
  62. package/cssm/components/tabs/Component.desktop.js +0 -22
  63. package/cssm/components/tabs/Component.js +2 -2
  64. package/cssm/components/tabs/Component.mobile.js +0 -24
  65. package/cssm/components/tabs/Component.responsive.js +0 -30
  66. package/cssm/components/title/index.js +0 -3
  67. package/cssm/desktop/index.js +0 -26
  68. package/cssm/hooks/use-tablist-titles.js +0 -4
  69. package/cssm/index.js +0 -34
  70. package/cssm/mobile/index.js +0 -28
  71. package/cssm/shared/index.js +0 -16
  72. package/cssm/typings.d.ts +5 -1
  73. package/desktop/index.js +0 -23
  74. package/esm/collapsible/index.js +0 -19
  75. package/esm/components/primary-tablist/Component.collapsible.d.ts +1 -1
  76. package/esm/components/primary-tablist/Component.collapsible.js +5 -12
  77. package/esm/components/primary-tablist/Component.d.ts +1 -1
  78. package/esm/components/primary-tablist/Component.desktop.js +1 -16
  79. package/esm/components/primary-tablist/Component.js +4 -11
  80. package/esm/components/primary-tablist/Component.mobile.d.ts +1 -1
  81. package/esm/components/primary-tablist/Component.mobile.js +4 -22
  82. package/esm/components/primary-tablist/Component.responsive.js +0 -17
  83. package/esm/components/primary-tablist/index.css +288 -30
  84. package/esm/components/primary-tablist/mobile.css +499 -33
  85. package/esm/components/scroll-controls/Component.d.ts +1 -0
  86. package/esm/components/scroll-controls/Component.js +7 -7
  87. package/esm/components/scroll-controls/index.css +23 -26
  88. package/esm/components/scroll-controls/index.js +0 -8
  89. package/esm/components/scrollable-container/Component.d.ts +5 -1
  90. package/esm/components/scrollable-container/Component.js +3 -9
  91. package/esm/components/scrollable-container/index.css +6 -6
  92. package/esm/components/scrollable-container/index.js +0 -10
  93. package/esm/components/secondary-tablist/Component.desktop.js +1 -13
  94. package/esm/components/secondary-tablist/Component.js +0 -9
  95. package/esm/components/secondary-tablist/Component.mobile.js +2 -13
  96. package/esm/components/secondary-tablist/Component.responsive.js +0 -16
  97. package/esm/components/secondary-tablist/index.css +11 -11
  98. package/esm/components/secondary-tablist/mobile.css +13 -13
  99. package/esm/components/tab/Component.js +1 -1
  100. package/esm/components/tab/index.css +3 -3
  101. package/esm/components/tab/index.js +0 -2
  102. package/esm/components/tabs/Component.collapsible.js +0 -15
  103. package/esm/components/tabs/Component.d.ts +1 -1
  104. package/esm/components/tabs/Component.desktop.js +0 -20
  105. package/esm/components/tabs/Component.js +2 -2
  106. package/esm/components/tabs/Component.mobile.js +0 -20
  107. package/esm/components/tabs/Component.responsive.js +0 -26
  108. package/esm/components/title/index.js +0 -3
  109. package/esm/desktop/index.js +0 -23
  110. package/esm/hooks/use-tablist-titles.js +0 -4
  111. package/esm/index.js +0 -29
  112. package/esm/index.module-329bd113.js +4 -0
  113. package/esm/index.module-c2b4a565.js +4 -0
  114. package/esm/mobile/index.js +0 -23
  115. package/esm/shared/index.js +0 -14
  116. package/esm/typings.d.ts +5 -1
  117. package/hooks/use-tablist-titles.js +0 -4
  118. package/index.js +0 -29
  119. package/index.module-52123f08.js +6 -0
  120. package/index.module-b92170ea.js +6 -0
  121. package/mobile/index.js +0 -23
  122. package/modern/collapsible/index.js +0 -18
  123. package/modern/components/primary-tablist/Component.collapsible.d.ts +1 -1
  124. package/modern/components/primary-tablist/Component.collapsible.js +5 -12
  125. package/modern/components/primary-tablist/Component.d.ts +1 -1
  126. package/modern/components/primary-tablist/Component.desktop.js +1 -16
  127. package/modern/components/primary-tablist/Component.js +4 -11
  128. package/modern/components/primary-tablist/Component.mobile.d.ts +1 -1
  129. package/modern/components/primary-tablist/Component.mobile.js +3 -18
  130. package/modern/components/primary-tablist/Component.responsive.js +0 -17
  131. package/modern/components/primary-tablist/index.css +288 -30
  132. package/modern/components/primary-tablist/mobile.css +499 -33
  133. package/modern/components/scroll-controls/Component.d.ts +1 -0
  134. package/modern/components/scroll-controls/Component.js +7 -7
  135. package/modern/components/scroll-controls/index.css +23 -26
  136. package/modern/components/scroll-controls/index.js +0 -7
  137. package/modern/components/scrollable-container/Component.d.ts +5 -1
  138. package/modern/components/scrollable-container/Component.js +3 -8
  139. package/modern/components/scrollable-container/index.css +6 -6
  140. package/modern/components/scrollable-container/index.js +0 -9
  141. package/modern/components/secondary-tablist/Component.desktop.js +1 -13
  142. package/modern/components/secondary-tablist/Component.js +0 -9
  143. package/modern/components/secondary-tablist/Component.mobile.js +2 -13
  144. package/modern/components/secondary-tablist/Component.responsive.js +0 -16
  145. package/modern/components/secondary-tablist/index.css +11 -11
  146. package/modern/components/secondary-tablist/mobile.css +13 -13
  147. package/modern/components/tab/Component.js +1 -1
  148. package/modern/components/tab/index.css +3 -3
  149. package/modern/components/tab/index.js +0 -2
  150. package/modern/components/tabs/Component.collapsible.js +0 -15
  151. package/modern/components/tabs/Component.d.ts +1 -1
  152. package/modern/components/tabs/Component.desktop.js +0 -20
  153. package/modern/components/tabs/Component.js +2 -2
  154. package/modern/components/tabs/Component.mobile.js +0 -20
  155. package/modern/components/tabs/Component.responsive.js +0 -26
  156. package/modern/components/title/index.js +0 -2
  157. package/modern/desktop/index.js +0 -22
  158. package/modern/hooks/use-tablist-titles.js +0 -4
  159. package/modern/index.js +0 -28
  160. package/modern/index.module-45e29a3d.js +4 -0
  161. package/modern/index.module-e47d16c1.js +4 -0
  162. package/modern/mobile/index.js +0 -22
  163. package/modern/shared/index.js +0 -13
  164. package/modern/typings.d.ts +5 -1
  165. package/package.json +4 -4
  166. package/shared/index.js +0 -14
  167. package/src/components/primary-tablist/Component.collapsible.tsx +12 -3
  168. package/src/components/primary-tablist/Component.mobile.tsx +2 -8
  169. package/src/components/primary-tablist/Component.tsx +10 -3
  170. package/src/components/primary-tablist/index.module.css +6 -0
  171. package/src/components/primary-tablist/mobile.module.css +4 -0
  172. package/src/components/primary-tablist/text-styles.module.css +228 -0
  173. package/src/components/scroll-controls/Component.tsx +15 -8
  174. package/src/components/scroll-controls/index.module.css +12 -19
  175. package/src/components/scrollable-container/Component.tsx +7 -0
  176. package/src/components/tabs/Component.tsx +2 -0
  177. package/src/typings.ts +25 -0
  178. package/typings.d.ts +5 -1
  179. package/esm/index.module-1e961bec.js +0 -4
  180. package/esm/index.module-b07a0a20.js +0 -4
  181. package/index.module-6c875fed.js +0 -6
  182. package/index.module-dcd338c3.js +0 -6
  183. package/modern/index.module-11a3c51b.js +0 -4
  184. package/modern/index.module-b0eb0617.js +0 -4
@@ -16,6 +16,8 @@
16
16
  } :root {
17
17
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
18
18
  sans-serif;
19
+ --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
20
+ 'Helvetica Neue', Helvetica, sans-serif;
19
21
  } :root {
20
22
  } :root {
21
23
 
@@ -58,4 +60,212 @@
58
60
  line-height: var(--primary-tablist-mobile-line-height)
59
61
  } .mobile .title + .title {
60
62
  margin-left: var(--primary-tablist-mobile-gaps);
63
+ } .mobile.paragraph-primary-large .title {
64
+ font-size: 18px;
65
+ line-height: 24px;
66
+ font-weight: 400;
67
+ } .mobile.paragraph-primary-medium .title {
68
+ font-size: 16px;
69
+ line-height: 24px;
70
+ font-weight: 400;
71
+ } .mobile.paragraph-primary-small .title {
72
+ font-size: 14px;
73
+ line-height: 20px;
74
+ font-weight: 400;
75
+ } .mobile.action-primary-large .title {
76
+ font-size: 18px;
77
+ line-height: 24px;
78
+ font-weight: 500;
79
+ } .mobile.action-primary-medium .title {
80
+ font-size: 16px;
81
+ line-height: 24px;
82
+ font-weight: 500;
83
+ } .mobile.action-primary-small .title {
84
+ font-size: 14px;
85
+ line-height: 20px;
86
+ font-weight: 500;
87
+ } .mobile.accent-primary-large .title {
88
+ font-size: 18px;
89
+ line-height: 24px;
90
+ font-weight: 700;
91
+ } .mobile.accent-primary-medium .title {
92
+ font-size: 16px;
93
+ line-height: 24px;
94
+ font-weight: 700;
95
+ } .mobile.accent-primary-small .title {
96
+ font-size: 14px;
97
+ line-height: 20px;
98
+ font-weight: 700;
99
+ } .mobile.paragraph-primary-large .title, .mobile.paragraph-primary-medium .title, .mobile.accent-primary-large .title, .mobile.accent-primary-medium .title, .mobile.action-primary-large .title, .mobile.action-primary-medium .title {
100
+ padding-bottom: calc(24px / 2);
101
+ } .mobile.paragraph-primary-large .title + .title,
102
+ .mobile.paragraph-primary-large .pickerWrapper,
103
+ .mobile.paragraph-primary-medium .title + .title,
104
+ .mobile.paragraph-primary-medium .pickerWrapper,
105
+ .mobile.accent-primary-large .title + .title,
106
+ .mobile.accent-primary-large .pickerWrapper,
107
+ .mobile.accent-primary-medium .title + .title,
108
+ .mobile.accent-primary-medium .pickerWrapper,
109
+ .mobile.action-primary-large .title + .title,
110
+ .mobile.action-primary-large .pickerWrapper,
111
+ .mobile.action-primary-medium .title + .title,
112
+ .mobile.action-primary-medium .pickerWrapper {
113
+ margin-left: 24px;
114
+ } .mobile.paragraph-primary-large .option, .mobile.paragraph-primary-medium .option, .mobile.accent-primary-large .option, .mobile.accent-primary-medium .option, .mobile.action-primary-large .option, .mobile.action-primary-medium .option {
115
+ padding: 0;
116
+ } .mobile.paragraph-primary-large .scrollControls > button, .mobile.paragraph-primary-medium .scrollControls > button, .mobile.accent-primary-large .scrollControls > button, .mobile.accent-primary-medium .scrollControls > button, .mobile.action-primary-large .scrollControls > button, .mobile.action-primary-medium .scrollControls > button {
117
+ box-sizing: content-box;
118
+ width: 24px;
119
+ height: 24px;
120
+ padding: 0;
121
+ } .mobile.paragraph-primary-large .scrollControls button:first-child, .mobile.paragraph-primary-medium .scrollControls button:first-child, .mobile.accent-primary-large .scrollControls button:first-child, .mobile.accent-primary-medium .scrollControls button:first-child, .mobile.action-primary-large .scrollControls button:first-child, .mobile.action-primary-medium .scrollControls button:first-child {
122
+ margin: 0 0 0 calc(24px / 2);
123
+ } .mobile.paragraph-primary-small .title, .mobile.accent-primary-small .title, .mobile.action-primary-small .title {
124
+ padding-bottom: calc(20px / 2);
125
+ } .mobile.paragraph-primary-small .title + .title,
126
+ .mobile.paragraph-primary-small .pickerWrapper,
127
+ .mobile.accent-primary-small .title + .title,
128
+ .mobile.accent-primary-small .pickerWrapper,
129
+ .mobile.action-primary-small .title + .title,
130
+ .mobile.action-primary-small .pickerWrapper {
131
+ margin-left: 20px;
132
+ } .mobile.paragraph-primary-small .option, .mobile.accent-primary-small .option, .mobile.action-primary-small .option {
133
+ padding: 0;
134
+ } .mobile.paragraph-primary-small .scrollControls > button, .mobile.accent-primary-small .scrollControls > button, .mobile.action-primary-small .scrollControls > button {
135
+ box-sizing: content-box;
136
+ width: 20px;
137
+ height: 20px;
138
+ padding: 0;
139
+ } .mobile.paragraph-primary-small .scrollControls button:first-child, .mobile.accent-primary-small .scrollControls button:first-child, .mobile.action-primary-small .scrollControls button:first-child {
140
+ margin: 0 0 0 calc(20px / 2);
141
+ } .mobile.headline-system-xlarge .title {
142
+ font-size: 34px;
143
+ line-height: 40px;
144
+ font-weight: 600;
145
+ } .mobile.headline-system-large .title {
146
+ font-size: 30px;
147
+ line-height: 36px;
148
+ font-weight: 600;
149
+ } .mobile.headline-system-medium .title {
150
+ font-size: 26px;
151
+ line-height: 32px;
152
+ font-weight: 600;
153
+ } .mobile.headline-system-small .title {
154
+ font-size: 20px;
155
+ line-height: 28px;
156
+ font-weight: 600;
157
+ } .mobile.headline-system-xsmall .title {
158
+ font-size: 16px;
159
+ line-height: 20px;
160
+ font-weight: 600;
161
+ } .mobile.headline-xlarge .title {
162
+ font-size: 34px;
163
+ line-height: 40px;
164
+ font-weight: 500;
165
+ font-feature-settings: 'ss01';
166
+ font-family: var(--font-family-styrene);
167
+ } .mobile.headline-large .title {
168
+ font-size: 30px;
169
+ line-height: 36px;
170
+ font-weight: 500;
171
+ font-feature-settings: 'ss01';
172
+ font-family: var(--font-family-styrene);
173
+ } .mobile.headline-medium .title {
174
+ font-size: 26px;
175
+ line-height: 32px;
176
+ font-weight: 500;
177
+ font-feature-settings: 'ss01';
178
+ font-family: var(--font-family-styrene);
179
+ } .mobile.headline-small .title {
180
+ font-size: 20px;
181
+ line-height: 28px;
182
+ font-weight: 500;
183
+ font-feature-settings: 'ss01';
184
+ font-family: var(--font-family-styrene);
185
+ } .mobile.headline-xsmall .title {
186
+ font-size: 16px;
187
+ line-height: 20px;
188
+ font-weight: 500;
189
+ font-feature-settings: 'ss01';
190
+ font-family: var(--font-family-styrene);
191
+ } .mobile.headline-system-xlarge .title, .mobile.headline-xlarge .title {
192
+ padding-bottom: calc(40px / 2);
193
+ } .mobile.headline-system-xlarge .title + .title,
194
+ .mobile.headline-system-xlarge .pickerWrapper,
195
+ .mobile.headline-xlarge .title + .title,
196
+ .mobile.headline-xlarge .pickerWrapper {
197
+ margin-left: 40px;
198
+ } .mobile.headline-system-xlarge .option, .mobile.headline-xlarge .option {
199
+ padding: 0;
200
+ } .mobile.headline-system-xlarge .scrollControls > button, .mobile.headline-xlarge .scrollControls > button {
201
+ box-sizing: content-box;
202
+ width: 40px;
203
+ height: 40px;
204
+ padding: 0;
205
+ } .mobile.headline-system-xlarge .scrollControls button:first-child, .mobile.headline-xlarge .scrollControls button:first-child {
206
+ margin: 0 0 0 calc(40px / 2);
207
+ } .mobile.headline-system-large .title, .mobile.headline-large .title {
208
+ padding-bottom: calc(36px / 2);
209
+ } .mobile.headline-system-large .title + .title,
210
+ .mobile.headline-system-large .pickerWrapper,
211
+ .mobile.headline-large .title + .title,
212
+ .mobile.headline-large .pickerWrapper {
213
+ margin-left: 36px;
214
+ } .mobile.headline-system-large .option, .mobile.headline-large .option {
215
+ padding: 0;
216
+ } .mobile.headline-system-large .scrollControls > button, .mobile.headline-large .scrollControls > button {
217
+ box-sizing: content-box;
218
+ width: 36px;
219
+ height: 36px;
220
+ padding: 0;
221
+ } .mobile.headline-system-large .scrollControls button:first-child, .mobile.headline-large .scrollControls button:first-child {
222
+ margin: 0 0 0 calc(36px / 2);
223
+ } .mobile.headline-system-medium .title, .mobile.headline-medium .title {
224
+ padding-bottom: calc(32px / 2);
225
+ } .mobile.headline-system-medium .title + .title,
226
+ .mobile.headline-system-medium .pickerWrapper,
227
+ .mobile.headline-medium .title + .title,
228
+ .mobile.headline-medium .pickerWrapper {
229
+ margin-left: 32px;
230
+ } .mobile.headline-system-medium .option, .mobile.headline-medium .option {
231
+ padding: 0;
232
+ } .mobile.headline-system-medium .scrollControls > button, .mobile.headline-medium .scrollControls > button {
233
+ box-sizing: content-box;
234
+ width: 32px;
235
+ height: 32px;
236
+ padding: 0;
237
+ } .mobile.headline-system-medium .scrollControls button:first-child, .mobile.headline-medium .scrollControls button:first-child {
238
+ margin: 0 0 0 calc(32px / 2);
239
+ } .mobile.headline-system-small .title, .mobile.headline-small .title {
240
+ padding-bottom: calc(28px / 2);
241
+ } .mobile.headline-system-small .title + .title,
242
+ .mobile.headline-system-small .pickerWrapper,
243
+ .mobile.headline-small .title + .title,
244
+ .mobile.headline-small .pickerWrapper {
245
+ margin-left: 28px;
246
+ } .mobile.headline-system-small .option, .mobile.headline-small .option {
247
+ padding: 0;
248
+ } .mobile.headline-system-small .scrollControls > button, .mobile.headline-small .scrollControls > button {
249
+ box-sizing: content-box;
250
+ width: 28px;
251
+ height: 28px;
252
+ padding: 0;
253
+ } .mobile.headline-system-small .scrollControls button:first-child, .mobile.headline-small .scrollControls button:first-child {
254
+ margin: 0 0 0 calc(28px / 2);
255
+ } .mobile.headline-system-xsmall .title, .mobile.headline-xsmall .title {
256
+ padding-bottom: calc(20px / 2);
257
+ } .mobile.headline-system-xsmall .title + .title,
258
+ .mobile.headline-system-xsmall .pickerWrapper,
259
+ .mobile.headline-xsmall .title + .title,
260
+ .mobile.headline-xsmall .pickerWrapper {
261
+ margin-left: 20px;
262
+ } .mobile.headline-system-xsmall .option, .mobile.headline-xsmall .option {
263
+ padding: 0;
264
+ } .mobile.headline-system-xsmall .scrollControls > button, .mobile.headline-xsmall .scrollControls > button {
265
+ box-sizing: content-box;
266
+ width: 20px;
267
+ height: 20px;
268
+ padding: 0;
269
+ } .mobile.headline-system-xsmall .scrollControls button:first-child, .mobile.headline-xsmall .scrollControls button:first-child {
270
+ margin: 0 0 0 calc(20px / 2);
61
271
  }
@@ -0,0 +1,16 @@
1
+ :root {
2
+ } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ } :root {
5
+ } :root {
6
+
7
+ /* Hard */
8
+
9
+ /* Up */
10
+
11
+ /* Hard up */
12
+ } :root {
13
+ } :root {
14
+ } :root {
15
+ } :root {
16
+ }
@@ -3,6 +3,7 @@ import React from 'react';
3
3
  import { RefObject } from "react";
4
4
  import { TabsProps } from "../../typings";
5
5
  type ScrollControlsProps = {
6
+ className?: string;
6
7
  view: Exclude<TabsProps['view'], undefined>;
7
8
  size: TabsProps['size'];
8
9
  containerRef: RefObject<HTMLDivElement>;
@@ -7,8 +7,8 @@ var React = require('react');
7
7
  var cn = require('classnames');
8
8
  var _debounce = require('lodash.debounce');
9
9
  var coreComponentsIconButton = require('@alfalab/core-components-icon-button/cssm');
10
- var ChevronLeftMIcon = require('@alfalab/icons-glyph/ChevronLeftMIcon');
11
- var ChevronRightMIcon = require('@alfalab/icons-glyph/ChevronRightMIcon');
10
+ var ChevronLeftCompactSIcon = require('@alfalab/icons-glyph/ChevronLeftCompactSIcon');
11
+ var ChevronRightCompactSIcon = require('@alfalab/icons-glyph/ChevronRightCompactSIcon');
12
12
  var components_scrollControls_utils = require('./utils.js');
13
13
  var styles = require('./index.module.css');
14
14
 
@@ -21,7 +21,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
21
21
 
22
22
  var ScrollControls = React.forwardRef(function (_a, ref) {
23
23
  var _b;
24
- var containerRef = _a.containerRef, view = _a.view, sizeProp = _a.size;
24
+ var containerRef = _a.containerRef, view = _a.view, sizeProp = _a.size, className = _a.className;
25
25
  var container = containerRef.current;
26
26
  var _c = React.useState(function () { return components_scrollControls_utils.getDisabledState(container); }), disabledState = _c[0], updateDisabledState = _c[1];
27
27
  React.useEffect(function () {
@@ -42,11 +42,11 @@ var ScrollControls = React.forwardRef(function (_a, ref) {
42
42
  size: getSize(),
43
43
  view: 'secondary',
44
44
  };
45
- return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles__default.default.component, styles__default.default[view], sizeProp && styles__default.default[sizeProp], (_b = {},
45
+ return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles__default.default.component, styles__default.default[view], sizeProp && styles__default.default[sizeProp], className, (_b = {},
46
46
  _b[styles__default.default.borderVisible] = !disabledState.toRight,
47
47
  _b)) },
48
- React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, commonButtonProps, { icon: ChevronLeftMIcon.ChevronLeftMIcon, disabled: disabledState.toLeft, onClick: handleScrollLeft })),
49
- React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, commonButtonProps, { icon: ChevronRightMIcon.ChevronRightMIcon, disabled: disabledState.toRight, onClick: handleScrollRight }))));
48
+ React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, commonButtonProps, { icon: ChevronLeftCompactSIcon.ChevronLeftCompactSIcon, disabled: disabledState.toLeft, onClick: handleScrollLeft })),
49
+ React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, commonButtonProps, { icon: ChevronRightCompactSIcon.ChevronRightCompactSIcon, disabled: disabledState.toRight, onClick: handleScrollRight }))));
50
50
  });
51
51
 
52
52
  exports.ScrollControls = ScrollControls;
@@ -3,15 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var components_scrollControls_Component = require('./Component.js');
6
- require('tslib');
7
- require('react');
8
- require('classnames');
9
- require('lodash.debounce');
10
- require('@alfalab/core-components-icon-button/cssm');
11
- require('@alfalab/icons-glyph/ChevronLeftMIcon');
12
- require('@alfalab/icons-glyph/ChevronRightMIcon');
13
- require('./utils.js');
14
- require('./index.module.css');
15
6
 
16
7
 
17
8
 
@@ -46,18 +46,7 @@
46
46
  } .component {
47
47
  position: relative;
48
48
  display: flex;
49
- flex-shrink: 0
50
- } .component:before {
51
- content: '';
52
- display: block;
53
- position: absolute;
54
- top: 0;
55
- left: 0;
56
- width: 1px;
57
- background-color: transparent;
58
- transition: background-color 0.3s ease;
59
- } .borderVisible:before {
60
- background-color: var(--color-light-neutral-translucent-300);
49
+ flex-shrink: 0;
61
50
  } .primary {
62
51
  align-items: flex-start;
63
52
  justify-content: flex-end
@@ -69,8 +58,6 @@
69
58
  height: 1px;
70
59
  width: 100%;
71
60
  background-color: var(--primary-tablist-bottom-border-color);
72
- } .primary:before {
73
- bottom: 2px;
74
61
  } .primary {
75
62
 
76
63
  .button:first-child {
@@ -83,6 +70,14 @@
83
70
  align-items: center;
84
71
  justify-content: center
85
72
  } .secondary:before {
73
+ content: '';
74
+ display: block;
75
+ position: absolute;
76
+ top: 0;
77
+ left: 0;
78
+ width: 1px;
79
+ background-color: transparent;
80
+ transition: background-color 0.3s ease;
86
81
  bottom: 0;
87
82
  } .secondary.xs {
88
83
  width: 76px;
@@ -90,4 +85,6 @@
90
85
  .button:first-child {
91
86
  margin-right: var(--gap-2xs);
92
87
  }
93
- }
88
+ } .borderVisible:before {
89
+ background-color: var(--color-light-neutral-translucent-300);
90
+ }
@@ -11,6 +11,10 @@ type ScrollableContainerProps = {
11
11
  * Дополнительный класс контейнера
12
12
  */
13
13
  containerClassName?: string;
14
+ /**
15
+ * Дополнительный класс кнопок прокрутки
16
+ */
17
+ scrollControlsClassName?: string;
14
18
  /**
15
19
  * Дочерние компоненты
16
20
  */
@@ -28,5 +32,5 @@ type ScrollableContainerProps = {
28
32
  */
29
33
  size: TabsProps['size'];
30
34
  };
31
- declare const ScrollableContainer: ({ containerWrapperClassName, containerClassName, children, activeChild, fullWidthScroll, view, size, platform, }: ScrollableContainerProps & Pick<TabsProps, 'fullWidthScroll'> & PlatformProps) => React.JSX.Element;
35
+ declare const ScrollableContainer: ({ containerWrapperClassName, containerClassName, scrollControlsClassName, children, activeChild, fullWidthScroll, view, size, platform, }: ScrollableContainerProps & Pick<TabsProps, 'fullWidthScroll'> & PlatformProps) => React.JSX.Element;
32
36
  export { ScrollableContainerProps, ScrollableContainer };
@@ -7,13 +7,6 @@ var cn = require('classnames');
7
7
  var computeScrollIntoView = require('compute-scroll-into-view');
8
8
  var components_scrollControls_Component = require('../scroll-controls/Component.js');
9
9
  var styles = require('./index.module.css');
10
- require('tslib');
11
- require('lodash.debounce');
12
- require('@alfalab/core-components-icon-button/cssm');
13
- require('@alfalab/icons-glyph/ChevronLeftMIcon');
14
- require('@alfalab/icons-glyph/ChevronRightMIcon');
15
- require('../scroll-controls/utils.js');
16
- require('../scroll-controls/index.module.css');
17
10
 
18
11
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
19
12
 
@@ -32,7 +25,7 @@ var isOverflown = function (_a, controlsNode) {
32
25
  };
33
26
  var ScrollableContainer = function (_a) {
34
27
  var _b;
35
- var containerWrapperClassName = _a.containerWrapperClassName, containerClassName = _a.containerClassName, children = _a.children, activeChild = _a.activeChild, fullWidthScroll = _a.fullWidthScroll, view = _a.view, size = _a.size, platform = _a.platform;
28
+ var containerWrapperClassName = _a.containerWrapperClassName, containerClassName = _a.containerClassName, scrollControlsClassName = _a.scrollControlsClassName, children = _a.children, activeChild = _a.activeChild, fullWidthScroll = _a.fullWidthScroll, view = _a.view, size = _a.size, platform = _a.platform;
36
29
  var containerRef = React.useRef(null);
37
30
  var controlsRef = React.useRef(null);
38
31
  var _c = React.useState(false), overflown = _c[0], setOverflown = _c[1];
@@ -78,7 +71,7 @@ var ScrollableContainer = function (_a) {
78
71
  React__default.default.createElement("div", { ref: containerRef, className: cn__default.default(styles__default.default.container, containerClassName, (_b = {},
79
72
  _b[styles__default.default.fullWidthScroll] = fullWidthScroll,
80
73
  _b)) }, children),
81
- overflown && platform === 'desktop' ? (React__default.default.createElement(components_scrollControls_Component.ScrollControls, { ref: controlsRef, containerRef: containerRef, view: view, size: size })) : null));
74
+ overflown && platform === 'desktop' ? (React__default.default.createElement(components_scrollControls_Component.ScrollControls, { className: scrollControlsClassName, ref: controlsRef, containerRef: containerRef, view: view, size: size })) : null));
82
75
  };
83
76
 
84
77
  exports.ScrollableContainer = ScrollableContainer;
@@ -3,18 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var components_scrollableContainer_Component = require('./Component.js');
6
- require('react');
7
- require('classnames');
8
- require('compute-scroll-into-view');
9
- require('../scroll-controls/Component.js');
10
- require('tslib');
11
- require('lodash.debounce');
12
- require('@alfalab/core-components-icon-button/cssm');
13
- require('@alfalab/icons-glyph/ChevronLeftMIcon');
14
- require('@alfalab/icons-glyph/ChevronRightMIcon');
15
- require('../scroll-controls/utils.js');
16
- require('../scroll-controls/index.module.css');
17
- require('./index.module.css');
18
6
 
19
7
 
20
8
 
@@ -7,20 +7,6 @@ var React = require('react');
7
7
  var desktop = require('@alfalab/core-components-tag/cssm/desktop');
8
8
  var components_secondaryTablist_Component = require('./Component.js');
9
9
  var commonStyles = require('./index.module.css');
10
- require('classnames');
11
- require('../../hooks/use-tabs.js');
12
- require('react-merge-refs');
13
- require('@alfalab/core-components-shared/cssm');
14
- require('../scrollable-container/Component.js');
15
- require('compute-scroll-into-view');
16
- require('../scroll-controls/Component.js');
17
- require('lodash.debounce');
18
- require('@alfalab/core-components-icon-button/cssm');
19
- require('@alfalab/icons-glyph/ChevronLeftMIcon');
20
- require('@alfalab/icons-glyph/ChevronRightMIcon');
21
- require('../scroll-controls/utils.js');
22
- require('../scroll-controls/index.module.css');
23
- require('../scrollable-container/index.module.css');
24
10
 
25
11
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
26
12
 
@@ -7,17 +7,6 @@ var React = require('react');
7
7
  var cn = require('classnames');
8
8
  var hooks_useTabs = require('../../hooks/use-tabs.js');
9
9
  var components_scrollableContainer_Component = require('../scrollable-container/Component.js');
10
- require('react-merge-refs');
11
- require('@alfalab/core-components-shared/cssm');
12
- require('compute-scroll-into-view');
13
- require('../scroll-controls/Component.js');
14
- require('lodash.debounce');
15
- require('@alfalab/core-components-icon-button/cssm');
16
- require('@alfalab/icons-glyph/ChevronLeftMIcon');
17
- require('@alfalab/icons-glyph/ChevronRightMIcon');
18
- require('../scroll-controls/utils.js');
19
- require('../scroll-controls/index.module.css');
20
- require('../scrollable-container/index.module.css');
21
10
 
22
11
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
23
12
 
@@ -9,19 +9,6 @@ var mobile = require('@alfalab/core-components-tag/cssm/mobile');
9
9
  var components_secondaryTablist_Component = require('./Component.js');
10
10
  var commonStyles = require('./index.module.css');
11
11
  var mobileStyles = require('./mobile.module.css');
12
- require('../../hooks/use-tabs.js');
13
- require('react-merge-refs');
14
- require('@alfalab/core-components-shared/cssm');
15
- require('../scrollable-container/Component.js');
16
- require('compute-scroll-into-view');
17
- require('../scroll-controls/Component.js');
18
- require('lodash.debounce');
19
- require('@alfalab/core-components-icon-button/cssm');
20
- require('@alfalab/icons-glyph/ChevronLeftMIcon');
21
- require('@alfalab/icons-glyph/ChevronRightMIcon');
22
- require('../scroll-controls/utils.js');
23
- require('../scroll-controls/index.module.css');
24
- require('../scrollable-container/index.module.css');
25
12
 
26
13
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
27
14
 
@@ -7,25 +7,6 @@ var React = require('react');
7
7
  var coreComponentsMq = require('@alfalab/core-components-mq/cssm');
8
8
  var components_secondaryTablist_Component_desktop = require('./Component.desktop.js');
9
9
  var components_secondaryTablist_Component_mobile = require('./Component.mobile.js');
10
- require('@alfalab/core-components-tag/cssm/desktop');
11
- require('./Component.js');
12
- require('classnames');
13
- require('../../hooks/use-tabs.js');
14
- require('react-merge-refs');
15
- require('@alfalab/core-components-shared/cssm');
16
- require('../scrollable-container/Component.js');
17
- require('compute-scroll-into-view');
18
- require('../scroll-controls/Component.js');
19
- require('lodash.debounce');
20
- require('@alfalab/core-components-icon-button/cssm');
21
- require('@alfalab/icons-glyph/ChevronLeftMIcon');
22
- require('@alfalab/icons-glyph/ChevronRightMIcon');
23
- require('../scroll-controls/utils.js');
24
- require('../scroll-controls/index.module.css');
25
- require('../scrollable-container/index.module.css');
26
- require('./index.module.css');
27
- require('@alfalab/core-components-tag/cssm/mobile');
28
- require('./mobile.module.css');
29
10
 
30
11
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
31
12
 
@@ -3,9 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var components_tab_Component = require('./Component.js');
6
- require('react');
7
- require('classnames');
8
- require('./index.module.css');
9
6
 
10
7
 
11
8
 
@@ -6,21 +6,6 @@ var tslib = require('tslib');
6
6
  var React = require('react');
7
7
  var components_primaryTablist_Component_collapsible = require('../primary-tablist/Component.collapsible.js');
8
8
  var components_tabs_Component = require('./Component.js');
9
- require('classnames');
10
- require('@alfalab/core-components-badge/cssm');
11
- require('@alfalab/core-components-keyboard-focusable/cssm');
12
- require('@alfalab/core-components-picker-button/cssm/desktop');
13
- require('../../hooks/use-tablist-titles.js');
14
- require('@alfalab/core-components-mq/cssm');
15
- require('../../hooks/use-collapsible-elements.js');
16
- require('@juggle/resize-observer');
17
- require('@alfalab/hooks');
18
- require('../../hooks/use-tabs.js');
19
- require('react-merge-refs');
20
- require('@alfalab/core-components-shared/cssm');
21
- require('../../synthetic-events.js');
22
- require('../title/Component.js');
23
- require('../primary-tablist/index.module.css');
24
9
 
25
10
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
26
11
 
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
3
  import { TabsProps } from "../../typings";
4
- declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, tagShape, tagView, }: Omit<TabsProps, 'view'>) => React.JSX.Element;
4
+ declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, tagShape, tagView, textStyle, }: Omit<TabsProps, 'view'>) => React.JSX.Element;
5
5
  export { Tabs };
@@ -7,28 +7,6 @@ var React = require('react');
7
7
  var components_primaryTablist_Component_desktop = require('../primary-tablist/Component.desktop.js');
8
8
  var components_secondaryTablist_Component_desktop = require('../secondary-tablist/Component.desktop.js');
9
9
  var components_tabs_Component = require('./Component.js');
10
- require('../primary-tablist/Component.js');
11
- require('@juggle/resize-observer');
12
- require('classnames');
13
- require('@alfalab/core-components-keyboard-focusable/cssm');
14
- require('@alfalab/core-components-shared/cssm');
15
- require('../../hooks/use-tabs.js');
16
- require('react-merge-refs');
17
- require('../scrollable-container/Component.js');
18
- require('compute-scroll-into-view');
19
- require('../scroll-controls/Component.js');
20
- require('lodash.debounce');
21
- require('@alfalab/core-components-icon-button/cssm');
22
- require('@alfalab/icons-glyph/ChevronLeftMIcon');
23
- require('@alfalab/icons-glyph/ChevronRightMIcon');
24
- require('../scroll-controls/utils.js');
25
- require('../scroll-controls/index.module.css');
26
- require('../scrollable-container/index.module.css');
27
- require('../title/Component.js');
28
- require('../primary-tablist/index.module.css');
29
- require('@alfalab/core-components-tag/cssm/desktop');
30
- require('../secondary-tablist/Component.js');
31
- require('../secondary-tablist/index.module.css');
32
10
 
33
11
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
34
12
 
@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
9
9
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
10
10
 
11
11
  var Tabs = function (_a) {
12
- var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, _d = _a.breakpoint, breakpoint = _d === void 0 ? 1024 : _d, tagShape = _a.tagShape, tagView = _a.tagView;
12
+ var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, _d = _a.breakpoint, breakpoint = _d === void 0 ? 1024 : _d, tagShape = _a.tagShape, tagView = _a.tagView, textStyle = _a.textStyle;
13
13
  var tabsArray = React__default.default.Children.toArray(children);
14
14
  var titles = tabsArray.map(function (_a) {
15
15
  var _b = _a.props, title = _b.title, id = _b.id, rightAddons = _b.rightAddons, disabled = _b.disabled, hidden = _b.hidden, toggleClassName = _b.toggleClassName, toggleTestId = _b.dataTestId, toggleRef = _b.toggleRef;
@@ -26,7 +26,7 @@ var Tabs = function (_a) {
26
26
  });
27
27
  var tabs = tabsArray.filter(function (tab) { return tab.props.id === selectedId || tab.props.keepMounted || keepMounted; });
28
28
  return (React__default.default.createElement("div", { className: className },
29
- React__default.default.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll, breakpoint: breakpoint, tagShape: tagShape, tagView: tagView }),
29
+ React__default.default.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll, breakpoint: breakpoint, tagShape: tagShape, tagView: tagView, textStyle: textStyle }),
30
30
  tabs.map(function (tab) { return React.cloneElement(tab, { hidden: tab.props.id !== selectedId }); })));
31
31
  };
32
32
 
@@ -7,30 +7,6 @@ var React = require('react');
7
7
  var components_primaryTablist_Component_mobile = require('../primary-tablist/Component.mobile.js');
8
8
  var components_secondaryTablist_Component_mobile = require('../secondary-tablist/Component.mobile.js');
9
9
  var components_tabs_Component = require('./Component.js');
10
- require('classnames');
11
- require('../primary-tablist/Component.js');
12
- require('@juggle/resize-observer');
13
- require('@alfalab/core-components-keyboard-focusable/cssm');
14
- require('@alfalab/core-components-shared/cssm');
15
- require('../../hooks/use-tabs.js');
16
- require('react-merge-refs');
17
- require('../scrollable-container/Component.js');
18
- require('compute-scroll-into-view');
19
- require('../scroll-controls/Component.js');
20
- require('lodash.debounce');
21
- require('@alfalab/core-components-icon-button/cssm');
22
- require('@alfalab/icons-glyph/ChevronLeftMIcon');
23
- require('@alfalab/icons-glyph/ChevronRightMIcon');
24
- require('../scroll-controls/utils.js');
25
- require('../scroll-controls/index.module.css');
26
- require('../scrollable-container/index.module.css');
27
- require('../title/Component.js');
28
- require('../primary-tablist/index.module.css');
29
- require('../primary-tablist/mobile.module.css');
30
- require('@alfalab/core-components-tag/cssm/mobile');
31
- require('../secondary-tablist/Component.js');
32
- require('../secondary-tablist/index.module.css');
33
- require('../secondary-tablist/mobile.module.css');
34
10
 
35
11
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
36
12