@empathyco/x-components 3.0.0-alpha.22 → 3.0.0-alpha.23

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 (38) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/design-system/base.css +4 -1
  3. package/design-system/button-secondary.css +1 -1
  4. package/design-system/default-theme.css +94 -57
  5. package/design-system/dropdown-default.css +68 -33
  6. package/design-system/dropdown-l.css +1 -1
  7. package/design-system/dropdown-m.css +1 -1
  8. package/design-system/dropdown-s.css +1 -1
  9. package/design-system/dropdown-xl.css +1 -1
  10. package/design-system/full-theme.css +1999 -692
  11. package/design-system/list-default.css +2 -15
  12. package/design-system/list-gap.css +61 -1
  13. package/design-system/list-padding.css +52 -1
  14. package/design-system/utilities-background-color.css +7 -7
  15. package/design-system/utilities-border-color.css +7 -7
  16. package/design-system/utilities-border-radius.css +877 -212
  17. package/design-system/utilities-border-width.css +220 -110
  18. package/design-system/utilities-box-shadow.css +11 -11
  19. package/design-system/utilities-font-color.css +7 -14
  20. package/design-system/utilities-margin.css +278 -51
  21. package/design-system/utilities-padding.css +278 -102
  22. package/docs/API-reference/api/x-components.params.md +1 -0
  23. package/docs/API-reference/api/x-components.params.scroll.md +11 -0
  24. package/js/components/base-dropdown.vue.js +2 -2
  25. package/js/components/base-dropdown.vue.js.map +1 -1
  26. package/js/x-modules/url/store/actions/update-url.action.js +20 -2
  27. package/js/x-modules/url/store/actions/update-url.action.js.map +1 -1
  28. package/js/x-modules/url/store/getters/url-params.getter.js +2 -1
  29. package/js/x-modules/url/store/getters/url-params.getter.js.map +1 -1
  30. package/js/x-modules/url/store/module.js +1 -0
  31. package/js/x-modules/url/store/module.js.map +1 -1
  32. package/package.json +2 -2
  33. package/report/x-components.api.json +26 -0
  34. package/report/x-components.api.md +2 -0
  35. package/types/x-modules/url/store/actions/update-url.action.d.ts.map +1 -1
  36. package/types/x-modules/url/store/module.d.ts.map +1 -1
  37. package/types/x-modules/url/store/types.d.ts +1 -0
  38. package/types/x-modules/url/store/types.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.0.0-alpha.23](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.22...@empathyco/x-components@3.0.0-alpha.23) (2021-09-20)
7
+
8
+ **Note:** Version bump only for package @empathyco/x-components
9
+
10
+
11
+
12
+
13
+
6
14
  ## [3.0.0-alpha.22](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.21...@empathyco/x-components@3.0.0-alpha.22) (2021-09-17)
7
15
 
8
16
 
package/design-system/base.css CHANGED
@@ -23,7 +23,10 @@
23
23
  --x-size-base-07: 32px;
24
24
  --x-size-base-08: 40px;
25
25
  --x-size-base-09: 48px;
26
- --x-size-base-10: 56px; }
26
+ --x-size-base-10: 56px;
27
+ --x-size-base-11: 64px;
28
+ --x-size-base-12: 72px;
29
+ --x-size-base-13: 80px; }
27
30
 
28
31
  :root {
29
32
  --x-font-family-base: 'Montserrat', sans-serif;
package/design-system/button-secondary.css CHANGED
@@ -6,5 +6,5 @@
6
6
  .x-button--secondary.x-button,
7
7
  .x-button--secondary .x-button {
8
8
  --x-color-background-button-default: var(--x-color-background-button-secondary);
9
- --x-color-border-butto-defaultn: var(--x-color-border-button-secondary);
9
+ --x-color-border-button-default: var(--x-color-border-button-secondary);
10
10
  --x-color-text-button-default: var(--x-color-text-button-secondary); }
package/design-system/default-theme.css CHANGED
@@ -128,13 +128,16 @@
128
128
  --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
129
129
  --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
130
130
  --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
131
+ --x-color-background-dropdown-toggle-open-default: var(
132
+ --x-color-background-dropdown-toggle-default
133
+ );
131
134
  --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
132
135
  --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
133
- --x-color-font-dropdown-default: var(--x-color-text-default);
134
- --x-color-font-dropdown-toggle-default: var(--x-color-font-dropdown-default);
135
- --x-color-font-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
136
- --x-color-font-dropdown-item-default-hover: var(--x-color-base-neutral-35);
137
- --x-color-font-dropdown-item-default-selected: var(--x-color-text-default);
136
+ --x-color-text-dropdown-default: var(--x-color-text-default);
137
+ --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
138
+ --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
139
+ --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
140
+ --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
138
141
  --x-font-family-dropdown-default: var(--x-font-family-text);
139
142
  --x-size-font-dropdown-default: var(--x-size-font-text);
140
143
  --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
@@ -143,15 +146,24 @@
143
146
  --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
144
147
  --x-font-decoration-dropdown-item-default-hover: none;
145
148
  --x-font-decoration-dropdown-item-default-selected: none;
146
- --x-size-width-dropdown-default: auto;
149
+ --x-size-width-dropdown-toggle-default: 100%;
150
+ --x-size-min-width-dropdown-list-default: 100%;
147
151
  --x-size-gap-dropdown-default: 0;
152
+ --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
153
+ --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
154
+ --x-size-padding-bottom-dropdown-toggle-default: var(
155
+ --x-size-padding-bottom-dropdown-item-default
156
+ );
157
+ --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
158
+ --x-size-padding-vertical-dropdown-list-default: 0;
148
159
  --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
149
160
  --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
150
161
  --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
151
162
  --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
152
163
  --x-size-gap-dropdown-item-default: var(--x-size-base-03);
153
- --x-rotation-toggle-icon-collapsed: 0;
154
- --x-rotation-toggle-icon-expanded: 180deg; }
164
+ --x-string-box-shadow-dropdown-default: none;
165
+ --x-string-overflow-dropdown-toggle-default: hidden;
166
+ --x-string-overflow-dropdown-list-default: hidden; }
155
167
 
156
168
  @use 'sass:string';
157
169
  .x-dropdown {
@@ -170,45 +182,50 @@
170
182
  [dir="rtl"] .x-dropdown__toggle {
171
183
  border-right-width: var(--x-size-border-width-left-dropdown-toggle-default); }
172
184
  [dir="ltr"] .x-dropdown__toggle {
173
- padding-right: var(--x-size-padding-right-dropdown-item-default); }
185
+ padding-right: var(--x-size-padding-right-dropdown-toggle-default); }
174
186
  [dir="rtl"] .x-dropdown__toggle {
175
- padding-left: var(--x-size-padding-right-dropdown-item-default); }
187
+ padding-left: var(--x-size-padding-right-dropdown-toggle-default); }
176
188
  [dir="ltr"] .x-dropdown__toggle {
177
- padding-left: var(--x-size-padding-left-dropdown-item-default); }
189
+ padding-left: var(--x-size-padding-left-dropdown-toggle-default); }
178
190
  [dir="rtl"] .x-dropdown__toggle {
179
- padding-right: var(--x-size-padding-left-dropdown-item-default); }
191
+ padding-right: var(--x-size-padding-left-dropdown-toggle-default); }
180
192
  .x-dropdown__toggle {
181
193
  border-style: solid;
182
194
  border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
183
195
  border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
184
196
  border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
185
197
  background: var(--x-color-background-dropdown-toggle-default);
186
- color: var(--x-color-font-dropdown-toggle-default);
198
+ color: var(--x-color-text-dropdown-toggle-default);
187
199
  border-color: var(--x-color-border-dropdown-toggle-default);
188
- -webkit-padding-before: var(--x-size-padding-top-dropdown-item-default);
189
- padding-top: var(--x-size-padding-top-dropdown-item-default);
190
- -webkit-padding-end: var(--x-size-padding-right-dropdown-item-default);
191
- -webkit-padding-after: var(--x-size-padding-bottom-dropdown-item-default);
192
- padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
193
- -webkit-padding-start: var(--x-size-padding-left-dropdown-item-default);
200
+ -webkit-padding-before: var(--x-size-padding-top-dropdown-toggle-default);
201
+ padding-top: var(--x-size-padding-top-dropdown-toggle-default);
202
+ -webkit-padding-end: var(--x-size-padding-right-dropdown-toggle-default);
203
+ -webkit-padding-after: var(--x-size-padding-bottom-dropdown-toggle-default);
204
+ padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
205
+ -webkit-padding-start: var(--x-size-padding-left-dropdown-toggle-default);
194
206
  gap: var(--x-size-gap-dropdown-item-default);
195
- width: var(--x-size-width-dropdown-default);
207
+ width: var(--x-size-width-dropdown-toggle-default);
196
208
  display: -ms-flexbox;
197
209
  display: flex;
198
210
  -ms-flex-flow: row nowrap;
199
211
  flex-flow: row nowrap;
200
212
  margin: 0;
201
213
  cursor: pointer;
202
- overflow: hidden; }
214
+ overflow: var(--x-string-overflow-dropdown-toggle-default);
215
+ box-shadow: var(--x-string-box-shadow-dropdown-default); }
203
216
  @media not all and (min-resolution: 0.001dpcm) {
204
217
  .x-dropdown__toggle {
205
218
  gap: 0; }
206
219
  .x-dropdown__toggle > *:not(:last-child) {
207
220
  margin-right: var(--x-size-gap-dropdown-item-default); } }
208
- .x-dropdown__toggle .x-icon {
209
- transform: rotate(var(--x-rotation-toggle-icon-collapsed)); }
221
+ [dir="ltr"] .x-dropdown__toggle .x-icon:last-child {
222
+ margin-left: auto; }
223
+ [dir="rtl"] .x-dropdown__toggle .x-icon:last-child {
224
+ margin-right: auto; }
225
+ .x-dropdown__toggle .x-icon:last-child {
226
+ -webkit-margin-start: auto; }
210
227
  .x-dropdown__toggle-selected-value {
211
- color: var(--x-color-font-dropdown-toggle-default-selected); }
228
+ color: var(--x-color-text-dropdown-toggle-default-selected); }
212
229
  [dir="ltr"] .x-dropdown__items-list {
213
230
  border-right-width: var(--x-size-border-width-right-dropdown-list-default); }
214
231
  [dir="rtl"] .x-dropdown__items-list {
@@ -218,12 +235,12 @@
218
235
  [dir="rtl"] .x-dropdown__items-list {
219
236
  border-right-width: var(--x-size-border-width-left-dropdown-list-default); }
220
237
  .x-dropdown__items-list {
238
+ background: var(--x-color-background-dropdown-default);
221
239
  box-sizing: border-box;
222
- width: 100%;
240
+ min-width: var(--x-size-min-width-dropdown-list-default);
223
241
  position: absolute;
224
- left: 0;
225
242
  top: calc(100% + var(--x-size-gap-dropdown-default));
226
- overflow: hidden;
243
+ overflow: var(--x-string-overflow-dropdown-list-default);
227
244
  border-color: var(--x-color-border-dropdown-list-default);
228
245
  border-top-width: var(--x-size-border-width-top-dropdown-list-default);
229
246
  border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
@@ -231,7 +248,12 @@
231
248
  border-style: solid;
232
249
  margin: 0;
233
250
  padding: 0;
251
+ box-shadow: var(--x-string-box-shadow-dropdown-default);
234
252
  z-index: 1; }
253
+ .x-dropdown__items-list:before, .x-dropdown__items-list:after {
254
+ content: '';
255
+ display: block;
256
+ height: var(--x-size-padding-vertical-dropdown-list-default); }
235
257
  [dir="ltr"] .x-dropdown__item {
236
258
  padding-left: var(--x-size-padding-left-dropdown-item-default); }
237
259
  [dir="rtl"] .x-dropdown__item {
@@ -254,11 +276,12 @@
254
276
  display: flex;
255
277
  -ms-flex-flow: row nowrap;
256
278
  flex-flow: row nowrap;
257
- -ms-flex-pack: justify;
258
- justify-content: space-between;
279
+ -ms-flex-pack: start;
280
+ justify-content: flex-start;
259
281
  text-align: left;
260
282
  width: 100%;
261
283
  margin: 0;
284
+ white-space: nowrap;
262
285
  cursor: pointer; }
263
286
  @media not all and (min-resolution: 0.001dpcm) {
264
287
  .x-dropdown__item {
@@ -266,19 +289,31 @@
266
289
  .x-dropdown__item > *:not(:last-child) {
267
290
  margin-right: var(--x-size-gap-dropdown-item-default); } }
268
291
  .x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
269
- color: var(--x-color-font-dropdown-item-default-hover);
292
+ color: var(--x-color-text-dropdown-item-default-hover);
270
293
  background-color: var(--x-color-background-dropdown-item-default-hover);
271
294
  font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
272
295
  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
273
296
  text-decoration: var(--x-font-decoration-dropdown-item-default-hover); }
274
297
  .x-dropdown__item--is-selected {
275
- color: var(--x-color-font-dropdown-item-default-selected);
298
+ color: var(--x-color-text-dropdown-item-default-selected);
276
299
  background-color: var(--x-color-background-dropdown-item-default-selected);
277
300
  font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
278
301
  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
279
302
  text-decoration: var(--x-font-decoration-dropdown-item-default-selected); }
280
- .x-dropdown--is-open .x-dropdown__toggle .x-icon {
281
- transform: rotate(var(--x-rotation-toggle-icon-expanded)); }
303
+ [dir="ltr"] .x-dropdown__item .x-icon:last-child {
304
+ margin-left: auto; }
305
+ [dir="rtl"] .x-dropdown__item .x-icon:last-child {
306
+ margin-right: auto; }
307
+ .x-dropdown__item .x-icon:last-child {
308
+ -webkit-margin-start: auto; }
309
+ .x-dropdown--is-open {
310
+ --x-color-background-dropdown-toggle-default: var(
311
+ --x-color-background-dropdown-toggle-open-default
312
+ ); }
313
+ [dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
314
+ right: 0; }
315
+ [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
316
+ left: 0; }
282
317
 
283
318
  :root {
284
319
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
@@ -316,13 +351,16 @@
316
351
  --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
317
352
  --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
318
353
  --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
354
+ --x-color-background-dropdown-toggle-open-default: var(
355
+ --x-color-background-dropdown-toggle-default
356
+ );
319
357
  --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
320
358
  --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
321
- --x-color-font-dropdown-default: var(--x-color-text-default);
322
- --x-color-font-dropdown-toggle-default: var(--x-color-font-dropdown-default);
323
- --x-color-font-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
324
- --x-color-font-dropdown-item-default-hover: var(--x-color-base-neutral-35);
325
- --x-color-font-dropdown-item-default-selected: var(--x-color-text-default);
359
+ --x-color-text-dropdown-default: var(--x-color-text-default);
360
+ --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
361
+ --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
362
+ --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
363
+ --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
326
364
  --x-font-family-dropdown-default: var(--x-font-family-text);
327
365
  --x-size-font-dropdown-default: var(--x-size-font-text);
328
366
  --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
@@ -331,15 +369,24 @@
331
369
  --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
332
370
  --x-font-decoration-dropdown-item-default-hover: none;
333
371
  --x-font-decoration-dropdown-item-default-selected: none;
334
- --x-size-width-dropdown-default: auto;
372
+ --x-size-width-dropdown-toggle-default: 100%;
373
+ --x-size-min-width-dropdown-list-default: 100%;
335
374
  --x-size-gap-dropdown-default: 0;
375
+ --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
376
+ --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
377
+ --x-size-padding-bottom-dropdown-toggle-default: var(
378
+ --x-size-padding-bottom-dropdown-item-default
379
+ );
380
+ --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
381
+ --x-size-padding-vertical-dropdown-list-default: 0;
336
382
  --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
337
383
  --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
338
384
  --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
339
385
  --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
340
386
  --x-size-gap-dropdown-item-default: var(--x-size-base-03);
341
- --x-rotation-toggle-icon-collapsed: 0;
342
- --x-rotation-toggle-icon-expanded: 180deg; }
387
+ --x-string-box-shadow-dropdown-default: none;
388
+ --x-string-overflow-dropdown-toggle-default: hidden;
389
+ --x-string-overflow-dropdown-list-default: hidden; }
343
390
 
344
391
  :root {
345
392
  --x-color-background-facet-default: transparent;
@@ -1005,14 +1052,6 @@
1005
1052
  --x-size-align-list-stretch: stretch; }
1006
1053
 
1007
1054
  @use 'sass:string';
1008
- [dir="ltr"] .x-list {
1009
- padding-right: var(--x-size-padding-right-utility, var(--x-size-padding-utility, var(--x-size-padding-list))); }
1010
- [dir="rtl"] .x-list {
1011
- padding-left: var(--x-size-padding-right-utility, var(--x-size-padding-utility, var(--x-size-padding-list))); }
1012
- [dir="ltr"] .x-list {
1013
- padding-left: var(--x-size-padding-left-utility, var(--x-size-padding-utility, var(--x-size-padding-list))); }
1014
- [dir="rtl"] .x-list {
1015
- padding-right: var(--x-size-padding-left-utility, var(--x-size-padding-utility, var(--x-size-padding-list))); }
1016
1055
  .x-list {
1017
1056
  display: -ms-flexbox;
1018
1057
  display: flex;
@@ -1021,12 +1060,7 @@
1021
1060
  list-style: none;
1022
1061
  gap: var(--x-size-gap-list);
1023
1062
  margin: 0;
1024
- -webkit-padding-before: var(--x-size-padding-top-utility, var(--x-size-padding-utility, var(--x-size-padding-list)));
1025
- padding-top: var(--x-size-padding-top-utility, var(--x-size-padding-utility, var(--x-size-padding-list)));
1026
- -webkit-padding-end: var(--x-size-padding-right-utility, var(--x-size-padding-utility, var(--x-size-padding-list)));
1027
- -webkit-padding-after: var(--x-size-padding-bottom-utility, var(--x-size-padding-utility, var(--x-size-padding-list)));
1028
- padding-bottom: var(--x-size-padding-bottom-utility, var(--x-size-padding-utility, var(--x-size-padding-list)));
1029
- -webkit-padding-start: var(--x-size-padding-left-utility, var(--x-size-padding-utility, var(--x-size-padding-list)));
1063
+ padding: var(--x-size-padding-list);
1030
1064
  -ms-flex-pack: var(--x-size-justify-list);
1031
1065
  justify-content: var(--x-size-justify-list);
1032
1066
  -ms-flex-align: var(--x-size-align-list);
@@ -1035,7 +1069,7 @@
1035
1069
  font-size: var(--x-size-font-text);
1036
1070
  font-weight: var(--x-number-font-weight-text);
1037
1071
  line-height: var(--x-size-line-height-text);
1038
- color: var(--x-color-font-utility, var(--x-color-text-default));
1072
+ color: var(--x-color-text-default);
1039
1073
  min-width: 0; }
1040
1074
  @media not all and (min-resolution: 0.001dpcm) {
1041
1075
  .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
@@ -2146,7 +2180,10 @@
2146
2180
  --x-size-base-07: 32px;
2147
2181
  --x-size-base-08: 40px;
2148
2182
  --x-size-base-09: 48px;
2149
- --x-size-base-10: 56px; }
2183
+ --x-size-base-10: 56px;
2184
+ --x-size-base-11: 64px;
2185
+ --x-size-base-12: 72px;
2186
+ --x-size-base-13: 80px; }
2150
2187
 
2151
2188
  :root {
2152
2189
  --x-font-family-base: 'Montserrat', sans-serif;
package/design-system/dropdown-default.css CHANGED
@@ -34,13 +34,16 @@
34
34
  --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
35
35
  --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
36
36
  --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
37
+ --x-color-background-dropdown-toggle-open-default: var(
38
+ --x-color-background-dropdown-toggle-default
39
+ );
37
40
  --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
38
41
  --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
39
- --x-color-font-dropdown-default: var(--x-color-text-default);
40
- --x-color-font-dropdown-toggle-default: var(--x-color-font-dropdown-default);
41
- --x-color-font-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
42
- --x-color-font-dropdown-item-default-hover: var(--x-color-base-neutral-35);
43
- --x-color-font-dropdown-item-default-selected: var(--x-color-text-default);
42
+ --x-color-text-dropdown-default: var(--x-color-text-default);
43
+ --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
44
+ --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
45
+ --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
46
+ --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
44
47
  --x-font-family-dropdown-default: var(--x-font-family-text);
45
48
  --x-size-font-dropdown-default: var(--x-size-font-text);
46
49
  --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
@@ -49,15 +52,24 @@
49
52
  --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
50
53
  --x-font-decoration-dropdown-item-default-hover: none;
51
54
  --x-font-decoration-dropdown-item-default-selected: none;
52
- --x-size-width-dropdown-default: auto;
55
+ --x-size-width-dropdown-toggle-default: 100%;
56
+ --x-size-min-width-dropdown-list-default: 100%;
53
57
  --x-size-gap-dropdown-default: 0;
58
+ --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
59
+ --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
60
+ --x-size-padding-bottom-dropdown-toggle-default: var(
61
+ --x-size-padding-bottom-dropdown-item-default
62
+ );
63
+ --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
64
+ --x-size-padding-vertical-dropdown-list-default: 0;
54
65
  --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
55
66
  --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
56
67
  --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
57
68
  --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
58
69
  --x-size-gap-dropdown-item-default: var(--x-size-base-03);
59
- --x-rotation-toggle-icon-collapsed: 0;
60
- --x-rotation-toggle-icon-expanded: 180deg; }
70
+ --x-string-box-shadow-dropdown-default: none;
71
+ --x-string-overflow-dropdown-toggle-default: hidden;
72
+ --x-string-overflow-dropdown-list-default: hidden; }
61
73
 
62
74
  @use 'sass:string';
63
75
  .x-dropdown {
@@ -76,45 +88,50 @@
76
88
  [dir="rtl"] .x-dropdown__toggle {
77
89
  border-right-width: var(--x-size-border-width-left-dropdown-toggle-default); }
78
90
  [dir="ltr"] .x-dropdown__toggle {
79
- padding-right: var(--x-size-padding-right-dropdown-item-default); }
91
+ padding-right: var(--x-size-padding-right-dropdown-toggle-default); }
80
92
  [dir="rtl"] .x-dropdown__toggle {
81
- padding-left: var(--x-size-padding-right-dropdown-item-default); }
93
+ padding-left: var(--x-size-padding-right-dropdown-toggle-default); }
82
94
  [dir="ltr"] .x-dropdown__toggle {
83
- padding-left: var(--x-size-padding-left-dropdown-item-default); }
95
+ padding-left: var(--x-size-padding-left-dropdown-toggle-default); }
84
96
  [dir="rtl"] .x-dropdown__toggle {
85
- padding-right: var(--x-size-padding-left-dropdown-item-default); }
97
+ padding-right: var(--x-size-padding-left-dropdown-toggle-default); }
86
98
  .x-dropdown__toggle {
87
99
  border-style: solid;
88
100
  border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
89
101
  border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
90
102
  border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
91
103
  background: var(--x-color-background-dropdown-toggle-default);
92
- color: var(--x-color-font-dropdown-toggle-default);
104
+ color: var(--x-color-text-dropdown-toggle-default);
93
105
  border-color: var(--x-color-border-dropdown-toggle-default);
94
- -webkit-padding-before: var(--x-size-padding-top-dropdown-item-default);
95
- padding-top: var(--x-size-padding-top-dropdown-item-default);
96
- -webkit-padding-end: var(--x-size-padding-right-dropdown-item-default);
97
- -webkit-padding-after: var(--x-size-padding-bottom-dropdown-item-default);
98
- padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
99
- -webkit-padding-start: var(--x-size-padding-left-dropdown-item-default);
106
+ -webkit-padding-before: var(--x-size-padding-top-dropdown-toggle-default);
107
+ padding-top: var(--x-size-padding-top-dropdown-toggle-default);
108
+ -webkit-padding-end: var(--x-size-padding-right-dropdown-toggle-default);
109
+ -webkit-padding-after: var(--x-size-padding-bottom-dropdown-toggle-default);
110
+ padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
111
+ -webkit-padding-start: var(--x-size-padding-left-dropdown-toggle-default);
100
112
  gap: var(--x-size-gap-dropdown-item-default);
101
- width: var(--x-size-width-dropdown-default);
113
+ width: var(--x-size-width-dropdown-toggle-default);
102
114
  display: -ms-flexbox;
103
115
  display: flex;
104
116
  -ms-flex-flow: row nowrap;
105
117
  flex-flow: row nowrap;
106
118
  margin: 0;
107
119
  cursor: pointer;
108
- overflow: hidden; }
120
+ overflow: var(--x-string-overflow-dropdown-toggle-default);
121
+ box-shadow: var(--x-string-box-shadow-dropdown-default); }
109
122
  @media not all and (min-resolution: 0.001dpcm) {
110
123
  .x-dropdown__toggle {
111
124
  gap: 0; }
112
125
  .x-dropdown__toggle > *:not(:last-child) {
113
126
  margin-right: var(--x-size-gap-dropdown-item-default); } }
114
- .x-dropdown__toggle .x-icon {
115
- transform: rotate(var(--x-rotation-toggle-icon-collapsed)); }
127
+ [dir="ltr"] .x-dropdown__toggle .x-icon:last-child {
128
+ margin-left: auto; }
129
+ [dir="rtl"] .x-dropdown__toggle .x-icon:last-child {
130
+ margin-right: auto; }
131
+ .x-dropdown__toggle .x-icon:last-child {
132
+ -webkit-margin-start: auto; }
116
133
  .x-dropdown__toggle-selected-value {
117
- color: var(--x-color-font-dropdown-toggle-default-selected); }
134
+ color: var(--x-color-text-dropdown-toggle-default-selected); }
118
135
  [dir="ltr"] .x-dropdown__items-list {
119
136
  border-right-width: var(--x-size-border-width-right-dropdown-list-default); }
120
137
  [dir="rtl"] .x-dropdown__items-list {
@@ -124,12 +141,12 @@
124
141
  [dir="rtl"] .x-dropdown__items-list {
125
142
  border-right-width: var(--x-size-border-width-left-dropdown-list-default); }
126
143
  .x-dropdown__items-list {
144
+ background: var(--x-color-background-dropdown-default);
127
145
  box-sizing: border-box;
128
- width: 100%;
146
+ min-width: var(--x-size-min-width-dropdown-list-default);
129
147
  position: absolute;
130
- left: 0;
131
148
  top: calc(100% + var(--x-size-gap-dropdown-default));
132
- overflow: hidden;
149
+ overflow: var(--x-string-overflow-dropdown-list-default);
133
150
  border-color: var(--x-color-border-dropdown-list-default);
134
151
  border-top-width: var(--x-size-border-width-top-dropdown-list-default);
135
152
  border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
@@ -137,7 +154,12 @@
137
154
  border-style: solid;
138
155
  margin: 0;
139
156
  padding: 0;
157
+ box-shadow: var(--x-string-box-shadow-dropdown-default);
140
158
  z-index: 1; }
159
+ .x-dropdown__items-list:before, .x-dropdown__items-list:after {
160
+ content: '';
161
+ display: block;
162
+ height: var(--x-size-padding-vertical-dropdown-list-default); }
141
163
  [dir="ltr"] .x-dropdown__item {
142
164
  padding-left: var(--x-size-padding-left-dropdown-item-default); }
143
165
  [dir="rtl"] .x-dropdown__item {
@@ -160,11 +182,12 @@
160
182
  display: flex;
161
183
  -ms-flex-flow: row nowrap;
162
184
  flex-flow: row nowrap;
163
- -ms-flex-pack: justify;
164
- justify-content: space-between;
185
+ -ms-flex-pack: start;
186
+ justify-content: flex-start;
165
187
  text-align: left;
166
188
  width: 100%;
167
189
  margin: 0;
190
+ white-space: nowrap;
168
191
  cursor: pointer; }
169
192
  @media not all and (min-resolution: 0.001dpcm) {
170
193
  .x-dropdown__item {
@@ -172,16 +195,28 @@
172
195
  .x-dropdown__item > *:not(:last-child) {
173
196
  margin-right: var(--x-size-gap-dropdown-item-default); } }
174
197
  .x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
175
- color: var(--x-color-font-dropdown-item-default-hover);
198
+ color: var(--x-color-text-dropdown-item-default-hover);
176
199
  background-color: var(--x-color-background-dropdown-item-default-hover);
177
200
  font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
178
201
  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
179
202
  text-decoration: var(--x-font-decoration-dropdown-item-default-hover); }
180
203
  .x-dropdown__item--is-selected {
181
- color: var(--x-color-font-dropdown-item-default-selected);
204
+ color: var(--x-color-text-dropdown-item-default-selected);
182
205
  background-color: var(--x-color-background-dropdown-item-default-selected);
183
206
  font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
184
207
  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
185
208
  text-decoration: var(--x-font-decoration-dropdown-item-default-selected); }
186
- .x-dropdown--is-open .x-dropdown__toggle .x-icon {
187
- transform: rotate(var(--x-rotation-toggle-icon-expanded)); }
209
+ [dir="ltr"] .x-dropdown__item .x-icon:last-child {
210
+ margin-left: auto; }
211
+ [dir="rtl"] .x-dropdown__item .x-icon:last-child {
212
+ margin-right: auto; }
213
+ .x-dropdown__item .x-icon:last-child {
214
+ -webkit-margin-start: auto; }
215
+ .x-dropdown--is-open {
216
+ --x-color-background-dropdown-toggle-default: var(
217
+ --x-color-background-dropdown-toggle-open-default
218
+ ); }
219
+ [dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
220
+ right: 0; }
221
+ [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
222
+ left: 0; }
package/design-system/dropdown-l.css CHANGED
@@ -2,4 +2,4 @@
2
2
  --x-size-width-dropdown-l: 202px; }
3
3
 
4
4
  .x-dropdown.x-dropdown--l {
5
- --x-size-width-dropdown-default: var(--x-size-width-dropdown-l); }
5
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l); }
package/design-system/dropdown-m.css CHANGED
@@ -2,4 +2,4 @@
2
2
  --x-size-width-dropdown-m: 130px; }
3
3
 
4
4
  .x-dropdown.x-dropdown--m {
5
- --x-size-width-dropdown-default: var(--x-size-width-dropdown-m); }
5
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m); }
package/design-system/dropdown-s.css CHANGED
@@ -2,4 +2,4 @@
2
2
  --x-size-width-dropdown-s: 74px; }
3
3
 
4
4
  .x-dropdown.x-dropdown--s {
5
- --x-size-width-dropdown-default: var(--x-size-width-dropdown-s); }
5
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s); }
package/design-system/dropdown-xl.css CHANGED
@@ -2,4 +2,4 @@
2
2
  --x-size-width-dropdown-xl: 282px; }
3
3
 
4
4
  .x-dropdown.x-dropdown--xl {
5
- --x-size-width-dropdown-default: var(--x-size-width-dropdown-xl); }
5
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl); }