@ebay/skin 16.7.1 → 16.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (143) hide show
  1. package/.storybook/preview-head.html +152 -11
  2. package/_cdn/skin/v16.8.0/skin-default.min.css +41 -0
  3. package/_cdn/skin/v16.8.0/skin-full.min.css +88 -0
  4. package/_cdn/skin/v16.8.0/skin-headless.min.css +6 -0
  5. package/_cdn/skin/v16.8.0/skin-legacy.min.css +41 -0
  6. package/dist/alert-dialog/alert-dialog.css +8 -8
  7. package/dist/avatar/avatar.css +9 -9
  8. package/dist/breadcrumbs/breadcrumbs.css +6 -6
  9. package/dist/button/button.css +10 -28
  10. package/dist/calendar/calendar.css +7 -7
  11. package/dist/carousel/carousel.css +10 -26
  12. package/dist/chip/chip.css +7 -7
  13. package/dist/combobox/combobox.css +6 -4
  14. package/dist/confirm-dialog/confirm-dialog.css +9 -9
  15. package/dist/cta-button/cta-button.css +8 -6
  16. package/dist/date-textbox/date-textbox.css +4 -4
  17. package/dist/details/details.css +3 -6
  18. package/dist/drawer-dialog/drawer-dialog.css +4 -3
  19. package/dist/field/field.css +5 -5
  20. package/dist/filter-button/filter-button.css +2 -2
  21. package/dist/filter-menu/filter-menu.css +2 -2
  22. package/dist/filter-menu-button/filter-menu-button.css +6 -9
  23. package/dist/floating-label/floating-label.css +1 -1
  24. package/dist/fullscreen-dialog/fullscreen-dialog.css +6 -5
  25. package/dist/global/global.css +2 -2
  26. package/dist/icon/icon.css +28 -0
  27. package/dist/infotip/infotip.css +5 -5
  28. package/dist/inline-notice/inline-notice.css +4 -6
  29. package/dist/legacy-textbox/legacy-textbox.css +1 -1
  30. package/dist/lightbox-dialog/lightbox-dialog.css +15 -17
  31. package/dist/listbox/listbox.css +3 -6
  32. package/dist/listbox-button/listbox-button.css +2 -5
  33. package/dist/menu/menu.css +2 -2
  34. package/dist/menu-button/menu-button.css +2 -2
  35. package/dist/mixins/typography-mixins.less +24 -24
  36. package/dist/mixins/utility-mixins.less +1 -0
  37. package/dist/page-grid/page-grid.css +5 -5
  38. package/dist/page-notice/page-notice.css +16 -21
  39. package/dist/pagination/pagination.css +9 -17
  40. package/dist/panel-dialog/panel-dialog.css +7 -6
  41. package/dist/progress-bar/progress-bar.css +2 -2
  42. package/dist/progress-stepper/progress-stepper.css +11 -14
  43. package/dist/section-notice/section-notice.css +17 -19
  44. package/dist/section-title/section-title.css +19 -20
  45. package/dist/segmented-buttons/segmented-buttons.css +11 -12
  46. package/dist/select/select.css +4 -4
  47. package/dist/signal/signal.css +2 -2
  48. package/dist/snackbar-dialog/snackbar-dialog.css +8 -14
  49. package/dist/svg/icon/icon-ai-spectrum-16-colored.svg +24 -0
  50. package/dist/svg/icon/icon-ai-spectrum-20-colored.svg +24 -0
  51. package/dist/svg/icon/icon-ai-spectrum-24-colored.svg +24 -0
  52. package/dist/svg/icon/icon-ai-spectrum-filled-16-colored.svg +22 -0
  53. package/dist/svg/icon/icon-ai-spectrum-filled-20-colored.svg +22 -0
  54. package/dist/svg/icon/icon-ai-spectrum-filled-24-colored.svg +22 -0
  55. package/dist/svg/icon/icon-ai-spectrum-thin-16-colored.svg +24 -0
  56. package/dist/svg/icon/icon-close-12.svg +3 -1
  57. package/dist/svg/icons.svg +150 -0
  58. package/dist/tabs/tabs.css +6 -10
  59. package/dist/textbox/textbox.css +12 -17
  60. package/dist/toast-dialog/toast-dialog.css +9 -10
  61. package/dist/toggle-button/toggle-button.css +17 -17
  62. package/dist/toggle-button-group/toggle-button-group.css +4 -4
  63. package/dist/tokens/evo-core.css +36 -0
  64. package/dist/tooltip/tooltip.css +5 -5
  65. package/dist/tourtip/tourtip.css +6 -6
  66. package/dist/typography/typography.css +23 -23
  67. package/dist/utility/utility.css +2 -0
  68. package/dist/variables/variables.less +6 -5
  69. package/dist/video/video.css +2 -5
  70. package/package.json +9 -9
  71. package/scripts/generate-images.js +18 -1
  72. package/src/less/alert-dialog/alert-dialog.less +6 -6
  73. package/src/less/avatar/avatar.less +9 -9
  74. package/src/less/breadcrumbs/breadcrumbs.less +6 -6
  75. package/src/less/button/button.less +5 -29
  76. package/src/less/calendar/calendar.less +7 -7
  77. package/src/less/carousel/carousel.less +6 -37
  78. package/src/less/chip/chip.less +7 -7
  79. package/src/less/combobox/combobox.less +6 -4
  80. package/src/less/confirm-dialog/confirm-dialog.less +7 -7
  81. package/src/less/cta-button/cta-button.less +4 -4
  82. package/src/less/date-textbox/date-textbox.less +5 -5
  83. package/src/less/details/details.less +2 -7
  84. package/src/less/drawer-dialog/drawer-dialog.less +1 -1
  85. package/src/less/field/field.less +4 -5
  86. package/src/less/filter-menu-button/filter-menu-button.less +1 -6
  87. package/src/less/floating-label/floating-label.less +1 -1
  88. package/src/less/global/global.less +2 -2
  89. package/src/less/icon/generated/icon.less +28 -0
  90. package/src/less/infotip/infotip.less +3 -3
  91. package/src/less/infotip/stories/infotip.stories.js +26 -0
  92. package/src/less/inline-notice/inline-notice.less +3 -9
  93. package/src/less/legacy-textbox/legacy-textbox.less +1 -1
  94. package/src/less/lightbox-dialog/lightbox-dialog.less +6 -10
  95. package/src/less/listbox/listbox.less +2 -7
  96. package/src/less/listbox-button/listbox-button.less +1 -6
  97. package/src/less/menu/menu.less +2 -2
  98. package/src/less/menu-button/menu-button.less +2 -2
  99. package/src/less/mixins/private/bubble-mixins.less +5 -4
  100. package/src/less/mixins/private/button-mixins.less +3 -3
  101. package/src/less/mixins/private/dialog-mixins.less +10 -10
  102. package/src/less/mixins/private/filter-button-mixins.less +2 -2
  103. package/src/less/mixins/private/filter-menu-mixins.less +1 -1
  104. package/src/less/mixins/public/typography-mixins.less +24 -24
  105. package/src/less/mixins/public/utility-mixins.less +1 -0
  106. package/src/less/page-notice/page-notice.less +14 -23
  107. package/src/less/pagination/pagination.less +7 -18
  108. package/src/less/panel-dialog/panel-dialog.less +1 -1
  109. package/src/less/progress-bar/progress-bar.less +2 -2
  110. package/src/less/progress-stepper/progress-stepper.less +8 -14
  111. package/src/less/section-notice/section-notice.less +15 -20
  112. package/src/less/section-title/section-title.less +10 -12
  113. package/src/less/segmented-buttons/segmented-buttons.less +6 -15
  114. package/src/less/select/select.less +4 -4
  115. package/src/less/signal/signal.less +2 -2
  116. package/src/less/snackbar-dialog/snackbar-dialog.less +6 -16
  117. package/src/less/tabs/tabs.less +5 -15
  118. package/src/less/textbox/stories/rtl/textbox.stories.js +1 -1
  119. package/src/less/textbox/stories/textbox.stories.js +1 -1
  120. package/src/less/textbox/textbox.less +14 -18
  121. package/src/less/toast-dialog/toast-dialog.less +8 -13
  122. package/src/less/toggle-button/toggle-button.less +17 -17
  123. package/src/less/toggle-button-group/toggle-button-group.less +4 -4
  124. package/src/less/tooltip/tooltip.less +1 -1
  125. package/src/less/tourtip/tourtip.less +3 -3
  126. package/src/less/typography/typography.less +2 -2
  127. package/src/less/variables/variables.less +6 -5
  128. package/src/less/video/video.less +1 -8
  129. package/src/svg/icon/icon-ai-spectrum-16-colored.svg +24 -0
  130. package/src/svg/icon/icon-ai-spectrum-20-colored.svg +24 -0
  131. package/src/svg/icon/icon-ai-spectrum-24-colored.svg +24 -0
  132. package/src/svg/icon/icon-ai-spectrum-filled-16-colored.svg +22 -0
  133. package/src/svg/icon/icon-ai-spectrum-filled-20-colored.svg +22 -0
  134. package/src/svg/icon/icon-ai-spectrum-filled-24-colored.svg +22 -0
  135. package/src/svg/icon/icon-ai-spectrum-thin-16-colored.svg +24 -0
  136. package/src/svg/icon/icon-close-12.svg +3 -1
  137. package/src/svg/icons.svg +150 -0
  138. package/src/tokens/evo-core.css +36 -0
  139. package/svg.svg +150 -0
  140. package/_cdn/skin/v16.7.1/skin-default.min.css +0 -41
  141. package/_cdn/skin/v16.7.1/skin-full.min.css +0 -88
  142. package/_cdn/skin/v16.7.1/skin-headless.min.css +0 -6
  143. package/_cdn/skin/v16.7.1/skin-legacy.min.css +0 -41
package/.storybook/preview-head.html CHANGED
@@ -2,6 +2,106 @@
2
2
  <!-- This is auto-generated content from npm script -->
3
3
  <div hidden>
4
4
  <svg>
5
+ <defs>
6
+ <linearGradient
7
+ id="ref-ai-spectrum-16-colored"
8
+ x1="21.21"
9
+ y1="11.161"
10
+ x2="11.274"
11
+ y2="21.774"
12
+ gradientUnits="userSpaceOnUse"
13
+ >
14
+ <stop offset=".098" stop-color="#FFD80E" />
15
+ <stop offset=".267" stop-color="#FF4242" />
16
+ <stop offset=".418" stop-color="#993EE0" />
17
+ <stop offset=".562" stop-color="#0968F6" />
18
+ <stop offset=".785" stop-color="#4EE04B" />
19
+ </linearGradient>
20
+ <linearGradient
21
+ id="ref-ai-spectrum-thin-16-colored"
22
+ x1="21.21"
23
+ y1="11.161"
24
+ x2="11.274"
25
+ y2="21.774"
26
+ gradientUnits="userSpaceOnUse"
27
+ >
28
+ <stop offset=".098" stop-color="#FFD80E" />
29
+ <stop offset=".267" stop-color="#FF4242" />
30
+ <stop offset=".418" stop-color="#993EE0" />
31
+ <stop offset=".562" stop-color="#0968F6" />
32
+ <stop offset=".785" stop-color="#4EE04B" />
33
+ </linearGradient>
34
+ <linearGradient
35
+ id="ref-ai-spectrum-filled-16-colored"
36
+ x1="21.21"
37
+ y1="11.161"
38
+ x2="11.274"
39
+ y2="21.774"
40
+ gradientUnits="userSpaceOnUse"
41
+ >
42
+ <stop offset=".098" stop-color="#FFD80E" />
43
+ <stop offset=".267" stop-color="#FF4242" />
44
+ <stop offset=".418" stop-color="#993EE0" />
45
+ <stop offset=".562" stop-color="#0968F6" />
46
+ <stop offset=".785" stop-color="#4EE04B" />
47
+ </linearGradient>
48
+ <linearGradient
49
+ id="ref-ai-spectrum-filled-24-colored"
50
+ x1="32.758"
51
+ y1="16.968"
52
+ x2="17.145"
53
+ y2="33.645"
54
+ gradientUnits="userSpaceOnUse"
55
+ >
56
+ <stop offset=".098" stop-color="#FFD80E" />
57
+ <stop offset=".267" stop-color="#FF4242" />
58
+ <stop offset=".418" stop-color="#993EE0" />
59
+ <stop offset=".562" stop-color="#0968F6" />
60
+ <stop offset=".785" stop-color="#4EE04B" />
61
+ </linearGradient>
62
+ <linearGradient
63
+ id="ref-ai-spectrum-24-colored"
64
+ x1="32.758"
65
+ y1="16.968"
66
+ x2="17.145"
67
+ y2="33.645"
68
+ gradientUnits="userSpaceOnUse"
69
+ >
70
+ <stop offset=".098" stop-color="#FFD80E" />
71
+ <stop offset=".267" stop-color="#FF4242" />
72
+ <stop offset=".418" stop-color="#993EE0" />
73
+ <stop offset=".562" stop-color="#0968F6" />
74
+ <stop offset=".785" stop-color="#4EE04B" />
75
+ </linearGradient>
76
+ <linearGradient
77
+ id="ref-ai-spectrum-20-colored"
78
+ x1="26.984"
79
+ y1="14.065"
80
+ x2="14.21"
81
+ y2="27.71"
82
+ gradientUnits="userSpaceOnUse"
83
+ >
84
+ <stop offset=".098" stop-color="#FFD80E" />
85
+ <stop offset=".267" stop-color="#FF4242" />
86
+ <stop offset=".418" stop-color="#993EE0" />
87
+ <stop offset=".562" stop-color="#0968F6" />
88
+ <stop offset=".785" stop-color="#4EE04B" />
89
+ </linearGradient>
90
+ <linearGradient
91
+ id="ref-ai-spectrum-filled-20-colored"
92
+ x1="26.984"
93
+ y1="14.065"
94
+ x2="14.21"
95
+ y2="27.71"
96
+ gradientUnits="userSpaceOnUse"
97
+ >
98
+ <stop offset=".098" stop-color="#FFD80E" />
99
+ <stop offset=".267" stop-color="#FF4242" />
100
+ <stop offset=".418" stop-color="#993EE0" />
101
+ <stop offset=".562" stop-color="#0968F6" />
102
+ <stop offset=".785" stop-color="#4EE04B" />
103
+ </linearGradient>
104
+ </defs>
5
105
  <symbol viewBox="0 0 16 16" id="icon-add-16">
6
106
  <path
7
107
  d="M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 1 0 2 0V9h5a1 1 0 1 0 0-2Z"
@@ -125,6 +225,56 @@
125
225
  d="M10.762 2c.286-1.333 2.19-1.334 2.476 0l.833 3.878a5.277 5.277 0 0 0 4.051 4.051l3.878.833c1.334.286 1.334 2.19 0 2.476l-3.878.833a5.277 5.277 0 0 0-4.051 4.051L13.238 22c-.286 1.334-2.19 1.334-2.476 0l-.833-3.878a5.277 5.277 0 0 0-4.051-4.051L2 13.238c-1.334-.286-1.335-2.19 0-2.476l3.877-.833a5.277 5.277 0 0 0 4.051-4.051L10.762 2Z"
126
226
  />
127
227
  </symbol>
228
+ <symbol viewBox="0 0 16 16" id="icon-ai-spectrum-16-colored">
229
+ <path
230
+ fill-rule="evenodd"
231
+ clip-rule="evenodd"
232
+ d="M6.682 4.104a3.358 3.358 0 0 1-2.578 2.578l-2.467.53c-.85.182-.85 1.394 0 1.576l2.467.53a3.358 3.358 0 0 1 2.578 2.578l.53 2.467c.182.85 1.394.85 1.576 0l.53-2.467a3.358 3.358 0 0 1 2.578-2.578l2.467-.53c.85-.182.85-1.394 0-1.576l-2.467-.53a3.358 3.358 0 0 1-2.578-2.578l-.53-2.467c-.182-.85-1.394-.85-1.576 0l-.53 2.467ZM8 6.145A5.364 5.364 0 0 1 6.145 8 5.364 5.364 0 0 1 8 9.855 5.364 5.364 0 0 1 9.855 8 5.364 5.364 0 0 1 8 6.145Z"
233
+ fill="url(#ref-ai-spectrum-16-colored)"
234
+ />
235
+ </symbol>
236
+ <symbol viewBox="0 0 20 20" id="icon-ai-spectrum-20-colored">
237
+ <path
238
+ fill-rule="evenodd"
239
+ clip-rule="evenodd"
240
+ d="M10 6.303A6.32 6.32 0 0 1 6.303 10 6.32 6.32 0 0 1 10 13.697 6.32 6.32 0 0 1 13.697 10 6.32 6.32 0 0 1 10 6.303Zm1.013-4.484c-.234-1.092-1.792-1.092-2.026 0L8.306 4.99A4.317 4.317 0 0 1 4.99 8.306l-3.172.681c-1.092.234-1.092 1.792 0 2.026l3.172.681a4.317 4.317 0 0 1 3.315 3.315l.681 3.172c.234 1.092 1.792 1.092 2.026 0l.681-3.172a4.317 4.317 0 0 1 3.315-3.315l3.172-.681c1.092-.234 1.092-1.792 0-2.026l-3.172-.681a4.317 4.317 0 0 1-3.315-3.315l-.681-3.172Z"
241
+ fill="url(#ref-ai-spectrum-20-colored)"
242
+ />
243
+ </symbol>
244
+ <symbol viewBox="0 0 24 24" id="icon-ai-spectrum-24-colored">
245
+ <path
246
+ fill-rule="evenodd"
247
+ clip-rule="evenodd"
248
+ d="m12 5.76-.115.538a7.276 7.276 0 0 1-5.587 5.587L5.76 12l.537.115a7.276 7.276 0 0 1 5.587 5.587l.115.537.115-.537a7.276 7.276 0 0 1 5.587-5.587L18.24 12l-.537-.115a7.276 7.276 0 0 1-5.587-5.587L12 5.76ZM13.238 2c-.286-1.334-2.19-1.333-2.476 0l-.833 3.878a5.277 5.277 0 0 1-4.051 4.051L2 10.762c-1.335.286-1.334 2.19 0 2.476l3.877.833a5.277 5.277 0 0 1 4.051 4.051L10.762 22c.286 1.334 2.19 1.334 2.476 0l.833-3.878a5.277 5.277 0 0 1 4.051-4.051L22 13.238c1.334-.286 1.334-2.19 0-2.476l-3.878-.833a5.277 5.277 0 0 1-4.051-4.051L13.238 2Z"
249
+ fill="url(#ref-ai-spectrum-24-colored)"
250
+ />
251
+ </symbol>
252
+ <symbol viewBox="0 0 16 16" id="icon-ai-spectrum-filled-16-colored">
253
+ <path
254
+ d="M8.788 1.637c-.182-.85-1.394-.85-1.576 0l-.53 2.467a3.358 3.358 0 0 1-2.578 2.578l-2.467.53c-.85.182-.85 1.394 0 1.576l2.467.53a3.358 3.358 0 0 1 2.578 2.578l.53 2.467c.182.85 1.394.85 1.576 0l.53-2.467a3.358 3.358 0 0 1 2.578-2.578l2.467-.53c.85-.182.85-1.394 0-1.576l-2.467-.53a3.358 3.358 0 0 1-2.578-2.578l-.53-2.467Z"
255
+ fill="url(#ref-ai-spectrum-filled-16-colored)"
256
+ />
257
+ </symbol>
258
+ <symbol viewBox="0 0 20 20" id="icon-ai-spectrum-filled-20-colored">
259
+ <path
260
+ d="M11.013 1.819c-.234-1.092-1.792-1.092-2.026 0L8.306 4.99A4.317 4.317 0 0 1 4.99 8.306l-3.172.681c-1.092.234-1.092 1.792 0 2.026l3.172.681a4.317 4.317 0 0 1 3.315 3.315l.681 3.172c.234 1.092 1.792 1.092 2.026 0l.681-3.172a4.317 4.317 0 0 1 3.315-3.315l3.172-.681c1.092-.234 1.092-1.792 0-2.026l-3.172-.681a4.317 4.317 0 0 1-3.315-3.315l-.681-3.172Z"
261
+ fill="url(#ref-ai-spectrum-filled-20-colored)"
262
+ />
263
+ </symbol>
264
+ <symbol viewBox="0 0 24 24" id="icon-ai-spectrum-filled-24-colored">
265
+ <path
266
+ d="M13.238 2c-.286-1.333-2.19-1.334-2.476 0l-.833 3.878a5.277 5.277 0 0 1-4.051 4.051L2 10.762c-1.334.286-1.335 2.19 0 2.476l3.877.833a5.277 5.277 0 0 1 4.051 4.051L10.762 22c.286 1.334 2.19 1.334 2.476 0l.833-3.878a5.277 5.277 0 0 1 4.051-4.051L22 13.238c1.334-.286 1.334-2.19 0-2.476l-3.878-.833a5.277 5.277 0 0 1-4.051-4.051L13.238 2Z"
267
+ fill="url(#ref-ai-spectrum-filled-24-colored)"
268
+ />
269
+ </symbol>
270
+ <symbol viewBox="0 0 16 16" id="icon-ai-spectrum-thin-16-colored">
271
+ <path
272
+ fill-rule="evenodd"
273
+ clip-rule="evenodd"
274
+ d="M8 4.959A4.86 4.86 0 0 1 4.959 8 4.859 4.859 0 0 1 8 11.041 4.859 4.859 0 0 1 11.041 8 4.859 4.859 0 0 1 8 4.959Zm.788-3.322c-.182-.85-1.394-.85-1.576 0l-.53 2.467a3.358 3.358 0 0 1-2.578 2.578l-2.467.53c-.85.182-.85 1.394 0 1.576l2.467.53a3.358 3.358 0 0 1 2.578 2.578l.53 2.467c.182.85 1.394.85 1.576 0l.53-2.467a3.358 3.358 0 0 1 2.578-2.578l2.467-.53c.85-.182.85-1.394 0-1.576l-2.467-.53a3.358 3.358 0 0 1-2.578-2.578l-.53-2.467Z"
275
+ fill="url(#ref-ai-spectrum-thin-16-colored)"
276
+ />
277
+ </symbol>
128
278
  <symbol viewBox="0 0 16 16" id="icon-ai-thin-16">
129
279
  <path
130
280
  fill-rule="evenodd"
@@ -8770,21 +8920,12 @@
8770
8920
  font-weight: bold;
8771
8921
  height: 300px;
8772
8922
  line-height: 300px;
8773
- margin-right: 16px;
8923
+ margin-inline-end: 16px;
8774
8924
  text-align: center;
8775
8925
  width: 100%;
8776
8926
  }
8777
8927
 
8778
8928
  .carousel__list--slideshow-demo li:last-child {
8779
- margin-right: 0;
8780
- }
8781
-
8782
- [dir="rtl"] .carousel__list--slideshow-demo li {
8783
- margin-right: 0;
8784
- margin-left: 16px;
8785
- }
8786
-
8787
- [dir="rtl"] .carousel__list--slideshow-demo li:last-child {
8788
- margin-left: 0;
8929
+ margin-inline-end: 0;
8789
8930
  }
8790
8931
  </style>