@ebay/skin 18.6.0 → 19.1.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 (131) hide show
  1. package/dist/accordion/accordion.css +2 -2
  2. package/dist/avatar/avatar.css +22 -2
  3. package/dist/badge/badge.css +1 -0
  4. package/dist/bundles/skin-default.css +1215 -253
  5. package/dist/bundles/skin-full.css +1223 -253
  6. package/dist/bundles/skin-headless.css +1188 -252
  7. package/dist/chips-combobox/chips-combobox.css +1 -1
  8. package/dist/combobox/combobox.css +9 -4
  9. package/dist/date-textbox/date-textbox.css +3 -2
  10. package/dist/drawer-dialog/drawer-dialog.css +1 -0
  11. package/dist/filter-menu-button/filter-menu-button.css +8 -5
  12. package/dist/fullscreen-dialog/fullscreen-dialog.css +1 -0
  13. package/dist/global/global.css +2 -2
  14. package/dist/infotip/infotip.css +4 -3
  15. package/dist/layout-grid/layout-grid.css +915 -0
  16. package/dist/lightbox-dialog/lightbox-dialog.css +0 -24
  17. package/dist/link/link.css +25 -3
  18. package/dist/list/list.css +5 -1
  19. package/dist/listbox/listbox.css +2 -2
  20. package/dist/listbox-button/listbox-button.css +9 -4
  21. package/dist/marketsans/marketsans.css +12 -12
  22. package/dist/menu/menu.css +2 -2
  23. package/dist/menu-button/menu-button.css +10 -4
  24. package/dist/mixins/_utility-mixins.scss +2 -2
  25. package/dist/skeleton/skeleton.css +0 -6
  26. package/dist/svg/icon/icon-ai-tools-16.svg +7 -0
  27. package/dist/svg/icon/icon-ai-tools-20.svg +7 -0
  28. package/dist/svg/icon/icon-ai-tools-24.svg +7 -0
  29. package/dist/svg/icon/icon-alipay-hk-12-colored.svg +22 -0
  30. package/dist/svg/icon/icon-alipay-hk-18-colored.svg +22 -0
  31. package/dist/svg/icon/icon-alipay-hk-24-colored.svg +22 -0
  32. package/dist/svg/icon/icon-alipay-hk-32-colored.svg +22 -0
  33. package/dist/svg/icon/icon-bancontact-12-colored.svg +48 -0
  34. package/dist/svg/icon/icon-bancontact-18-colored.svg +48 -0
  35. package/dist/svg/icon/icon-bancontact-24-colored.svg +48 -0
  36. package/dist/svg/icon/icon-bancontact-32-colored.svg +48 -0
  37. package/dist/svg/icon/icon-carnet-12-colored.svg +7 -0
  38. package/dist/svg/icon/icon-carnet-18-colored.svg +7 -0
  39. package/dist/svg/icon/icon-carnet-24-colored.svg +7 -0
  40. package/dist/svg/icon/icon-carnet-32-colored.svg +7 -0
  41. package/dist/svg/icon/icon-cashapp-12-colored.svg +9 -0
  42. package/dist/svg/icon/icon-cashapp-18-colored.svg +9 -0
  43. package/dist/svg/icon/icon-cashapp-24-colored.svg +9 -0
  44. package/dist/svg/icon/icon-cashapp-32-colored.svg +9 -0
  45. package/dist/svg/icon/icon-cb-12-colored.svg +15 -15
  46. package/dist/svg/icon/icon-cb-18-colored.svg +15 -15
  47. package/dist/svg/icon/icon-cb-24-colored.svg +15 -15
  48. package/dist/svg/icon/icon-cb-32-colored.svg +15 -15
  49. package/dist/svg/icon/icon-eftpos-12-colored.svg +37 -0
  50. package/dist/svg/icon/icon-eftpos-18-colored.svg +37 -0
  51. package/dist/svg/icon/icon-eftpos-24-colored.svg +37 -0
  52. package/dist/svg/icon/icon-eftpos-32-colored.svg +37 -0
  53. package/dist/svg/icon/icon-elo-12-colored.svg +27 -0
  54. package/dist/svg/icon/icon-elo-18-colored.svg +27 -0
  55. package/dist/svg/icon/icon-elo-24-colored.svg +27 -0
  56. package/dist/svg/icon/icon-elo-32-colored.svg +27 -0
  57. package/dist/svg/icon/icon-forklift-16.svg +7 -0
  58. package/dist/svg/icon/icon-forklift-24.svg +7 -0
  59. package/dist/svg/icon/icon-interac-12-colored.svg +7 -0
  60. package/dist/svg/icon/icon-interac-18-colored.svg +11 -0
  61. package/dist/svg/icon/icon-interac-24-colored.svg +7 -0
  62. package/dist/svg/icon/icon-interac-32-colored.svg +7 -0
  63. package/dist/svg/icon/icon-kakao-pay-12-colored.svg +9 -0
  64. package/dist/svg/icon/icon-kakao-pay-18-colored.svg +9 -0
  65. package/dist/svg/icon/icon-kakao-pay-24-colored.svg +9 -0
  66. package/dist/svg/icon/icon-kakao-pay-32-colored.svg +9 -0
  67. package/dist/svg/icon/icon-klarna-black-12-colored.svg +2 -2
  68. package/dist/svg/icon/icon-klarna-black-18-colored.svg +2 -2
  69. package/dist/svg/icon/icon-klarna-black-24-colored.svg +2 -2
  70. package/dist/svg/icon/icon-klarna-black-32-colored.svg +2 -2
  71. package/dist/svg/icon/icon-klarna-pink-12-colored.svg +3 -3
  72. package/dist/svg/icon/icon-klarna-pink-18-colored.svg +3 -3
  73. package/dist/svg/icon/icon-klarna-pink-24-colored.svg +3 -3
  74. package/dist/svg/icon/icon-klarna-pink-32-colored.svg +3 -3
  75. package/dist/svg/icon/icon-klarna-white-12-colored.svg +4 -4
  76. package/dist/svg/icon/icon-klarna-white-18-colored.svg +4 -4
  77. package/dist/svg/icon/icon-klarna-white-24-colored.svg +4 -4
  78. package/dist/svg/icon/icon-klarna-white-32-colored.svg +4 -4
  79. package/dist/svg/icon/icon-menu-16.svg +7 -0
  80. package/dist/svg/icon/icon-mercado-pago-12-colored.svg +32 -0
  81. package/dist/svg/icon/icon-mercado-pago-18-colored.svg +32 -0
  82. package/dist/svg/icon/icon-mercado-pago-24-colored.svg +32 -0
  83. package/dist/svg/icon/icon-mercado-pago-32-colored.svg +32 -0
  84. package/dist/svg/icon/icon-nfc-16.svg +7 -0
  85. package/dist/svg/icon/icon-nfc-24.svg +7 -0
  86. package/dist/svg/icon/icon-nfc-card-12-colored.svg +18 -0
  87. package/dist/svg/icon/icon-nfc-card-18-colored.svg +18 -0
  88. package/dist/svg/icon/icon-nfc-card-24-colored.svg +18 -0
  89. package/dist/svg/icon/icon-nfc-card-32-colored.svg +18 -0
  90. package/dist/svg/icon/icon-paypay-12-colored.svg +20 -0
  91. package/dist/svg/icon/icon-paypay-18-colored.svg +20 -0
  92. package/dist/svg/icon/icon-paypay-24-colored.svg +20 -0
  93. package/dist/svg/icon/icon-paypay-32-colored.svg +20 -0
  94. package/dist/svg/icon/icon-ruler-16.svg +7 -0
  95. package/dist/svg/icon/icon-ruler-24.svg +7 -0
  96. package/dist/svg/icon/icon-swap-16.svg +7 -0
  97. package/dist/svg/icons.svg +1242 -233
  98. package/dist/table/table.css +1 -7
  99. package/dist/tokens/evo-dark.css +8 -0
  100. package/dist/tokens/evo-light.css +29 -1
  101. package/dist/tooltip/tooltip.css +8 -7
  102. package/dist/tourtip/tourtip.css +4 -3
  103. package/dist/variables/_variables.scss +2 -2
  104. package/dist/variables/variables.less +2 -2
  105. package/index.browser.json +1 -0
  106. package/index.css +1 -0
  107. package/index.js +1 -0
  108. package/index.mjs +1 -0
  109. package/layout-grid.browser.json +1 -0
  110. package/layout-grid.css +1 -0
  111. package/layout-grid.js +1 -0
  112. package/layout-grid.mjs +1 -0
  113. package/package.json +40 -39
  114. /package/dist/svg/icon/{icon-save-16.svg → icon-heart-16.svg} +0 -0
  115. /package/dist/svg/icon/{icon-save-20.svg → icon-heart-20.svg} +0 -0
  116. /package/dist/svg/icon/{icon-save-24.svg → icon-heart-24.svg} +0 -0
  117. /package/dist/svg/icon/{icon-save-filled-16.svg → icon-heart-filled-16.svg} +0 -0
  118. /package/dist/svg/icon/{icon-save-filled-20.svg → icon-heart-filled-20.svg} +0 -0
  119. /package/dist/svg/icon/{icon-save-filled-24.svg → icon-heart-filled-24.svg} +0 -0
  120. /package/dist/svg/icon/{icon-escrow-16.svg → icon-lock-16.svg} +0 -0
  121. /package/dist/svg/icon/{icon-escrow-24.svg → icon-lock-24.svg} +0 -0
  122. /package/dist/svg/icon/{icon-locked-16.svg → icon-lock-filled-16.svg} +0 -0
  123. /package/dist/svg/icon/{icon-locked-20.svg → icon-lock-filled-20.svg} +0 -0
  124. /package/dist/svg/icon/{icon-locked-24.svg → icon-lock-filled-24.svg} +0 -0
  125. /package/dist/svg/icon/{icon-fast-and-free-16.svg → icon-truck-16.svg} +0 -0
  126. /package/dist/svg/icon/{icon-fast-and-free-24.svg → icon-truck-24.svg} +0 -0
  127. /package/dist/svg/icon/{icon-fast-and-free-64.svg → icon-truck-64.svg} +0 -0
  128. /package/dist/svg/icon/{icon-on-the-way-16.svg → icon-truck-shipped-16.svg} +0 -0
  129. /package/dist/svg/icon/{icon-on-the-way-24.svg → icon-truck-shipped-24.svg} +0 -0
  130. /package/dist/svg/icon/{icon-unlocked-16.svg → icon-unlock-16.svg} +0 -0
  131. /package/dist/svg/icon/{icon-unlocked-24.svg → icon-unlock-24.svg} +0 -0
package/dist/chips-combobox/chips-combobox.css CHANGED
@@ -60,7 +60,7 @@
60
60
  transition: transform 0.2s linear;
61
61
  }
62
62
 
63
- .chips-combobox .combobox__listbox {
63
+ .chips-combobox .combobox__listbox--set-position {
64
64
  top: calc(100% + var(--spacing-150));
65
65
  }
66
66
 
package/dist/combobox/combobox.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
3
- 0 5px 17px rgba(0, 0, 0, 0.2);
2
+ --bubble-shadow:
3
+ 0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
4
4
  }
5
5
  .combobox {
6
6
  box-sizing: border-box;
@@ -38,12 +38,17 @@ span.combobox {
38
38
  display: none;
39
39
  left: 0;
40
40
  max-height: 400px;
41
- min-width: 100%;
42
41
  overflow-y: auto;
43
42
  position: absolute;
43
+ top: 0;
44
+ width: -moz-fit-content;
45
+ width: fit-content;
46
+ z-index: 2;
47
+ }
48
+ .combobox__listbox--set-position {
49
+ min-width: 100%;
44
50
  top: calc(100% + 4px);
45
51
  width: auto;
46
- z-index: 2;
47
52
  }
48
53
 
49
54
  .combobox__listbox--reverse,
package/dist/date-textbox/date-textbox.css CHANGED
@@ -1,9 +1,10 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
3
- 0 5px 17px rgba(0, 0, 0, 0.2);
2
+ --bubble-shadow:
3
+ 0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
4
4
  }
5
5
  .date-textbox {
6
6
  --calendar-month-width: 311px;
7
+ display: inline-block;
7
8
  }
8
9
 
9
10
  .date-textbox > .textbox + .textbox {
package/dist/drawer-dialog/drawer-dialog.css CHANGED
@@ -1,3 +1,4 @@
1
+ /*! DEPRECATED COMPONENT. Will be removed next major version */
1
2
  :root {
2
3
  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
3
4
  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
package/dist/filter-menu-button/filter-menu-button.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
3
- 0 5px 17px rgba(0, 0, 0, 0.2);
2
+ --bubble-shadow:
3
+ 0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
4
4
  }
5
5
  div.filter-group {
6
6
  display: flex;
@@ -152,15 +152,18 @@ button.filter-menu-button__button[aria-pressed="true"][disabled]:hover {
152
152
  border-radius: 16px;
153
153
  box-shadow: var(--bubble-shadow);
154
154
  display: none;
155
- max-width: 288px;
156
155
  min-width: 144px;
157
156
  overflow: hidden;
158
157
  position: absolute;
159
- top: calc(100% + 8px);
158
+ top: 0;
160
159
  width: max-content;
161
160
  z-index: 1;
162
161
  }
163
162
 
163
+ .filter-menu-button__menu--set-position {
164
+ top: calc(100% + 8px);
165
+ }
166
+
164
167
  button.filter-menu-button__button[aria-expanded="true"]
165
168
  + .filter-menu-button__menu {
166
169
  display: block;
@@ -168,7 +171,7 @@ button.filter-menu-button__button[aria-expanded="true"]
168
171
 
169
172
  .filter-menu-button__items {
170
173
  margin-top: 8px;
171
- max-height: calc(50vh - 40px);
174
+ max-height: 400px;
172
175
  min-width: 100%;
173
176
  overflow-y: auto;
174
177
  position: relative;
package/dist/fullscreen-dialog/fullscreen-dialog.css CHANGED
@@ -1,3 +1,4 @@
1
+ /*! DEPRECATED COMPONENT. Will be removed next major version */
1
2
  :root {
2
3
  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
3
4
  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
package/dist/global/global.css CHANGED
@@ -21,13 +21,13 @@ legend {
21
21
  a {
22
22
  color: var(
23
23
  --link-foreground-color-default,
24
- var(--color-foreground-primary)
24
+ var(--color-foreground-link-primary)
25
25
  );
26
26
  }
27
27
  a:visited {
28
28
  color: var(
29
29
  --link-foreground-color-visited,
30
- var(--color-foreground-visited)
30
+ var(--color-foreground-link-visited)
31
31
  );
32
32
  }
33
33
  a:hover {
package/dist/infotip/infotip.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
3
- 0 5px 17px rgba(0, 0, 0, 0.2);
2
+ --bubble-shadow:
3
+ 0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
4
4
  }
5
5
  .infotip {
6
6
  position: relative;
@@ -43,8 +43,9 @@ span.infotip__mask {
43
43
 
44
44
  .infotip__cell {
45
45
  display: flex;
46
+ overflow-wrap: anywhere;
46
47
  padding: var(--spacing-100) var(--spacing-200);
47
- word-break: break-word;
48
+ word-break: normal;
48
49
  }
49
50
 
50
51
  .infotip__content {