@ebay/skin 19.3.0 → 19.5.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 (72) hide show
  1. package/dist/alert-dialog/alert-dialog.css +96 -6
  2. package/dist/bundles/skin-default.css +308 -59
  3. package/dist/bundles/skin-full.css +308 -59
  4. package/dist/bundles/skin-headless.css +308 -59
  5. package/dist/ccd/ccd.css +16 -8
  6. package/dist/chips-combobox/chips-combobox.css +2 -4
  7. package/dist/combobox/combobox.css +1 -2
  8. package/dist/confirm-dialog/confirm-dialog.css +90 -13
  9. package/dist/date-textbox/date-textbox.css +1 -2
  10. package/dist/drawer-dialog/drawer-dialog.css +2 -2
  11. package/dist/file-preview-card/file-preview-card.css +3 -3
  12. package/dist/filter-input/filter-input.css +55 -0
  13. package/dist/filter-menu-button/filter-menu-button.css +1 -2
  14. package/dist/fullscreen-dialog/fullscreen-dialog.css +2 -2
  15. package/dist/infotip/infotip.css +1 -2
  16. package/dist/lightbox-dialog/lightbox-dialog.css +84 -19
  17. package/dist/listbox/listbox.css +1 -2
  18. package/dist/listbox-button/listbox-button.css +1 -2
  19. package/dist/menu/menu.css +1 -2
  20. package/dist/menu-button/menu-button.css +1 -2
  21. package/dist/mixins/_utility-mixins.scss +1 -1
  22. package/dist/number-input/number-input.css +48 -0
  23. package/dist/panel-dialog/panel-dialog.css +2 -2
  24. package/dist/section-notice/section-notice.css +8 -4
  25. package/dist/snackbar-dialog/snackbar-dialog.css +2 -2
  26. package/dist/svg/icon/icon-audio-high-20.svg +7 -0
  27. package/dist/svg/icon/icon-audio-high-24.svg +7 -0
  28. package/dist/svg/icon/icon-audio-off-20.svg +7 -0
  29. package/dist/svg/icon/icon-audio-off-24.svg +7 -0
  30. package/dist/svg/icon/icon-card-stack-64.svg +7 -0
  31. package/dist/svg/icon/icon-coupon-16.svg +7 -0
  32. package/dist/svg/icon/icon-coupon-24.svg +7 -0
  33. package/dist/svg/icon/icon-discount-16.svg +1 -1
  34. package/dist/svg/icon/icon-discount-24.svg +1 -1
  35. package/dist/svg/icon/icon-discount-auto-16.svg +7 -0
  36. package/dist/svg/icon/icon-discount-auto-24.svg +7 -0
  37. package/dist/svg/icon/icon-dollar-off-24.svg +7 -0
  38. package/dist/svg/icon/icon-feedback-error-16.svg +7 -0
  39. package/dist/svg/icon/icon-feedback-error-24.svg +7 -0
  40. package/dist/svg/icon/icon-hand-swipe-40.svg +7 -0
  41. package/dist/svg/icon/icon-package-error-24.svg +7 -0
  42. package/dist/svg/icon/icon-pause-20.svg +7 -0
  43. package/dist/svg/icon/icon-pencil-signed-24.svg +7 -0
  44. package/dist/svg/icon/icon-play-20.svg +5 -0
  45. package/dist/svg/icon/icon-psa-logo-16.svg +7 -0
  46. package/dist/svg/icon/icon-psa-logo-color-16-colored.svg +10 -0
  47. package/dist/svg/icon/icon-psa-vault-16.svg +7 -2
  48. package/dist/svg/icon/icon-psa-vault-24.svg +12 -0
  49. package/dist/svg/icon/icon-psa-vault-logo-16.svg +7 -0
  50. package/dist/svg/icon/icon-psa-vault-logo-color-16-colored.svg +14 -0
  51. package/dist/svg/icon/icon-refresh-20.svg +7 -0
  52. package/dist/svg/icon/icon-trading-card-edition-24.svg +7 -0
  53. package/dist/svg/icons.svg +249 -63
  54. package/dist/table/table.css +4 -0
  55. package/dist/textbox/textbox.css +1 -1
  56. package/dist/toast-dialog/toast-dialog.css +2 -2
  57. package/dist/tooltip/tooltip.css +1 -2
  58. package/dist/tourtip/tourtip.css +1 -2
  59. package/eslint.config.mjs +4 -4
  60. package/filter-input.browser.json +1 -0
  61. package/filter-input.css +1 -0
  62. package/filter-input.js +1 -0
  63. package/filter-input.mjs +1 -0
  64. package/index.browser.json +2 -0
  65. package/index.css +2 -0
  66. package/index.js +2 -0
  67. package/index.mjs +83 -81
  68. package/number-input.browser.json +1 -0
  69. package/number-input.css +1 -0
  70. package/number-input.js +1 -0
  71. package/number-input.mjs +1 -0
  72. package/package.json +49 -49
package/dist/alert-dialog/alert-dialog.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
- --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
3
- --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
2
+ --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
3
+ --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
5
  }
6
6
  .alert-dialog[role="alertdialog"] {
@@ -26,11 +26,11 @@
26
26
  --dialog-window-background-color,
27
27
  var(--color-background-primary)
28
28
  );
29
- border-radius: var(--lightbox-border-radius, var(--border-radius-150));
29
+ border-radius: var(--lightbox-border-radius, var(--border-radius-100));
30
30
  display: flex;
31
31
  flex: 1 0 auto;
32
32
  flex-direction: column;
33
- margin: auto auto 16px;
33
+ margin: auto;
34
34
  margin-left: var(--spacing-200);
35
35
  margin-right: var(--spacing-200);
36
36
  max-height: 90%;
@@ -75,6 +75,42 @@
75
75
  .alert-dialog--show .alert-dialog__window--fade {
76
76
  transition: opacity 0.16s ease-out;
77
77
  }
78
+ .alert-dialog--hide.alert-dialog--mask-fade,
79
+ .alert-dialog--hide.alert-dialog--mask-fade-slow {
80
+ transition: background-color var(--motion-duration-short-3)
81
+ var(--motion-easing-continuous);
82
+ }
83
+ .alert-dialog--hide .alert-dialog__window--fade {
84
+ transition: opacity var(--motion-duration-short-3)
85
+ var(--motion-easing-continuous);
86
+ }
87
+ .alert-dialog--hide .alert-dialog__window--animate {
88
+ transition:
89
+ transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),
90
+ opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
91
+ }
92
+ .alert-dialog--hide .alert-dialog__window--animate > * {
93
+ transition: opacity var(--motion-duration-short-2)
94
+ var(--motion-easing-continuous);
95
+ }
96
+ .alert-dialog--show.alert-dialog--mask-fade,
97
+ .alert-dialog--show.alert-dialog--mask-fade-slow {
98
+ transition: background-color var(--motion-duration-short-3)
99
+ var(--motion-easing-continuous);
100
+ }
101
+ .alert-dialog--show .alert-dialog__window--fade {
102
+ transition: opacity var(--motion-duration-short-3)
103
+ var(--motion-easing-continuous);
104
+ }
105
+ .alert-dialog--show .alert-dialog__window--animate {
106
+ transition:
107
+ transform var(--motion-duration-medium-3) var(--motion-easing-standard),
108
+ opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
109
+ }
110
+ .alert-dialog--show .alert-dialog__window--animate > * {
111
+ transition: opacity var(--motion-duration-medium-2)
112
+ var(--motion-easing-continuous) var(--motion-duration-short-3);
113
+ }
78
114
 
79
115
  .alert-dialog--hide.alert-dialog--hide,
80
116
  .alert-dialog--hide.alert-dialog--show-init,
@@ -88,7 +124,11 @@
88
124
  .alert-dialog--show-init.alert-dialog--mask-fade-slow {
89
125
  background-color: var(--dialog-scrim-color-hide);
90
126
  }
127
+ .alert-dialog--hide .alert-dialog__window--animate,
128
+ .alert-dialog--hide .alert-dialog__window--animate > *,
91
129
  .alert-dialog--hide .alert-dialog__window--fade,
130
+ .alert-dialog--show-init .alert-dialog__window--animate,
131
+ .alert-dialog--show-init .alert-dialog__window--animate > *,
92
132
  .alert-dialog--show-init .alert-dialog__window--fade {
93
133
  opacity: 0;
94
134
  }
@@ -105,15 +145,65 @@
105
145
  .alert-dialog--show.alert-dialog--mask-fade-slow {
106
146
  background-color: var(--dialog-scrim-color-show);
107
147
  }
148
+ .alert-dialog--hide-init .alert-dialog__window--animate,
149
+ .alert-dialog--hide-init .alert-dialog__window--animate > *,
108
150
  .alert-dialog--hide-init .alert-dialog__window--fade,
151
+ .alert-dialog--show .alert-dialog__window--animate,
152
+ .alert-dialog--show .alert-dialog__window--animate > *,
109
153
  .alert-dialog--show .alert-dialog__window--fade {
110
154
  opacity: 1;
111
155
  }
112
156
 
157
+ @media (prefers-reduced-motion) {
158
+ .alert-dialog--hide.alert-dialog--mask-fade,
159
+ .alert-dialog--hide.alert-dialog--mask-fade-slow {
160
+ transition: background-color var(--motion-duration-short-3)
161
+ var(--motion-easing-soft-exit);
162
+ }
163
+ .alert-dialog--hide .alert-dialog__window--animate,
164
+ .alert-dialog--hide .alert-dialog__window--fade {
165
+ transition: opacity var(--motion-duration-short-3)
166
+ var(--motion-easing-soft-exit);
167
+ }
168
+ .alert-dialog--hide .alert-dialog__window--animate > * {
169
+ transition: opacity var(--motion-duration-short-2)
170
+ var(--motion-soft-exit);
171
+ }
172
+ .alert-dialog--show.alert-dialog--mask-fade,
173
+ .alert-dialog--show.alert-dialog--mask-fade-slow {
174
+ transition: background-color var(--motion-duration-medium-2)
175
+ var(--motion-easing-soft-enter);
176
+ }
177
+ .alert-dialog--show .alert-dialog__window--animate,
178
+ .alert-dialog--show .alert-dialog__window--fade {
179
+ transition: opacity var(--motion-duration-medium-2)
180
+ var(--motion-easing-soft-enter);
181
+ }
182
+ .alert-dialog--show .alert-dialog__window--animate > * {
183
+ transition: opacity var(--motion-duration-medium-2)
184
+ var(--motion-easing-soft-enter) var(--motion-duration-short-3);
185
+ }
186
+ }
187
+ .alert-dialog--hide-init .alert-dialog__window--animate,
188
+ .alert-dialog--show .alert-dialog__window--animate {
189
+ transform: scale(1);
190
+ }
191
+
192
+ .alert-dialog--hide .alert-dialog__window--animate,
193
+ .alert-dialog--show-init .alert-dialog__window--animate {
194
+ transform: scale(0.75);
195
+ }
196
+
197
+ @media (prefers-reduced-motion) {
198
+ .alert-dialog--hide .alert-dialog__window--animate,
199
+ .alert-dialog--hide-init .alert-dialog__window--animate,
200
+ .alert-dialog--show .alert-dialog__window--animate,
201
+ .alert-dialog--show-init .alert-dialog__window--animate {
202
+ transform: scale(1);
203
+ }
204
+ }
113
205
  @media (min-width: 768px) {
114
206
  .alert-dialog__window {
115
- border-radius: var(--lightbox-border-radius, var(--border-radius-100));
116
- margin: auto;
117
207
  max-width: calc(88% - var(--spacing-400));
118
208
  }
119
209
  }