@salesforcedevs/dx-components 1.3.194-alpha.0 → 1.3.194-alpha3

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/lwc.config.json +1 -0
  2. package/package.json +5 -2
  3. package/src/modules/dx/alert/alert.css +1 -1
  4. package/src/modules/dx/breadcrumbs/breadcrumbs.css +2 -2
  5. package/src/modules/dx/cardDocs/cardDocs.css +1 -1
  6. package/src/modules/dx/cardGridDocs/cardGridDocs.css +1 -0
  7. package/src/modules/dx/cardNews/cardNews.css +7 -7
  8. package/src/modules/dx/cardStep/mockProps.ts +1 -2
  9. package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.css +2 -2
  10. package/src/modules/dx/checkbox/checkbox.css +2 -1
  11. package/src/modules/dx/checkboxNative/checkboxNative.css +3 -0
  12. package/src/modules/dx/codeBlock/codeBlock.ts +6 -6
  13. package/src/modules/dx/codeBlock/customLanguages.js +4 -2
  14. package/src/modules/dx/codeBlock/lightTheme.css +4 -4
  15. package/src/modules/dx/dropdown/dropdown.css +4 -2
  16. package/src/modules/dx/dropdownOption/dropdownOption.css +2 -2
  17. package/src/modules/dx/feature/feature.css +1 -1
  18. package/src/modules/dx/featuredContentHeader/featuredContentHeader.css +3 -3
  19. package/src/modules/dx/filterMenu/filterMenu.css +6 -2
  20. package/src/modules/dx/footer/footer.css +3 -4
  21. package/src/modules/dx/header/__benchmarks__/header.benchmark.js +45 -0
  22. package/src/modules/dx/header/header.css +99 -0
  23. package/src/modules/dx/header/header.html +132 -0
  24. package/src/modules/dx/header/header.ts +21 -0
  25. package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css +1 -1
  26. package/src/modules/dx/icon/icon.css +1 -1
  27. package/src/modules/dx/input/input.css +3 -0
  28. package/src/modules/dx/searchResults/searchResults.css +3 -2
  29. package/src/modules/dx/select/select.css +15 -1
  30. package/src/modules/dx/spinner/spinner.css +225 -28
  31. package/src/modules/dx/toast/toast.css +1 -1
  32. package/src/modules/dxHelpers/animations/animations.css +1 -1
  33. package/src/modules/dxHelpers/card/card.css +1 -1
  34. package/src/modules/dxHelpers/code/code.css +13 -5
  35. package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css +1 -1
  36. package/src/modules/dxHelpers/reset/reset.css +13 -6
  37. package/src/modules/dxHelpers/text/text.css +1 -1
  38. package/src/modules/dxUtils/prismjs/prismjs.ts +294 -168
package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css CHANGED
@@ -27,7 +27,7 @@
27
27
  padding: 0 var(--dx-g-spacing-sm) var(--dx-g-spacing-sm)
28
28
  var(--dx-g-spacing-sm);
29
29
  background: var(--dx-c-color-background);
30
- box-shadow: 0 20px 28px 0 rgb(0 20 45 / 8%);
30
+ box-shadow: 0 20px 28px 0 rgba(0, 20, 45, 0.08);
31
31
  transform: translateY(0);
32
32
  border-top: 1px solid transparent;
33
33
  transition: var(--dx-g-transition-transform-2x),
package/src/modules/dx/icon/icon.css CHANGED
@@ -3,7 +3,7 @@
3
3
  :host {
4
4
  display: block;
5
5
 
6
- --dx-c-icon-color: currentcolor;
6
+ --dx-c-icon-color: currentColor;
7
7
  }
8
8
 
9
9
  svg {
package/src/modules/dx/input/input.css CHANGED
@@ -104,6 +104,8 @@ label {
104
104
  padding-top: var(--dx-g-spacing-xs);
105
105
  overflow-wrap: break-word;
106
106
  word-wrap: break-word;
107
+ -ms-hyphens: auto;
108
+ -webkit-hyphens: auto;
107
109
  }
108
110
 
109
111
  .input-group.size-small input {
@@ -162,6 +164,7 @@ input::placeholder {
162
164
 
163
165
  .has-error.state-focused {
164
166
  box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
167
+ -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
165
168
  }
166
169
 
167
170
  .error-message-box {
package/src/modules/dx/searchResults/searchResults.css CHANGED
@@ -266,8 +266,9 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
266
266
  .dx-result {
267
267
  background: white;
268
268
  border-radius: 16px;
269
- border: 1px solid rgb(24 24 24 / 4%);
270
- box-shadow: 0 0 2px 0 rgb(24 24 24 / 8%), 0 2px 4px 1px rgb(24 24 24 / 16%);
269
+ border: 1px solid rgba(24, 24, 24, 0.04);
270
+ box-shadow: 0 0 2px 0 rgba(24, 24, 24, 0.08),
271
+ 0 2px 4px 1px rgba(24, 24, 24, 0.16);
271
272
  padding: 20px;
272
273
  margin-bottom: var(--dx-g-spacing-lg);
273
274
  }
package/src/modules/dx/select/select.css CHANGED
@@ -31,12 +31,14 @@ select.select-element:active:not([disabled]) {
31
31
  border-width: 2px;
32
32
  border-color: var(--dx-g-blue-vibrant-50);
33
33
  box-shadow: none;
34
+ -webkit-box-shadow: none;
34
35
  }
35
36
 
36
37
  .has-error select.select-element:focus,
37
38
  .has-error select.select-element:active {
38
39
  border-color: #ea001e;
39
40
  box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
41
+ -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
40
42
  }
41
43
 
42
44
  @media (min-width: 48em) {
@@ -75,6 +77,8 @@ select {
75
77
  .form-element_label {
76
78
  overflow-wrap: break-word;
77
79
  word-wrap: break-word;
80
+ -webkit-hyphens: auto;
81
+ -ms-hyphens: auto;
78
82
  hyphens: auto;
79
83
  display: inline-block;
80
84
  color: #3e3e3c;
@@ -125,6 +129,7 @@ select {
125
129
  border: 1px solid #dddbda;
126
130
  border-radius: 0.25rem;
127
131
  background-color: transparent;
132
+ -webkit-transition: border 0.1s linear, background-color 0.1s linear;
128
133
  transition: border 0.1s linear, background-color 0.1s linear;
129
134
  z-index: 1;
130
135
  }
@@ -134,6 +139,7 @@ select {
134
139
  outline: 0;
135
140
  border-color: #1b96ff;
136
141
  background-color: transparent;
142
+ -webkit-box-shadow: 0 0 3px #0176d3;
137
143
  box-shadow: 0 0 3px #0176d3;
138
144
  }
139
145
 
@@ -143,6 +149,9 @@ select {
143
149
  border-color: #c9c7c5;
144
150
  color: #3e3e3c;
145
151
  cursor: not-allowed;
152
+ -webkit-user-select: none;
153
+ -moz-user-select: none;
154
+ -ms-user-select: none;
146
155
  user-select: none;
147
156
  opacity: 1;
148
157
  z-index: 0;
@@ -152,6 +161,7 @@ select {
152
161
  .select-element[disabled]:active,
153
162
  .select-element.slds-is-disabled:focus,
154
163
  .select-element.slds-is-disabled:active {
164
+ -webkit-box-shadow: none;
155
165
  box-shadow: none;
156
166
  }
157
167
 
@@ -166,6 +176,7 @@ select {
166
176
 
167
177
  .has-error .select-element {
168
178
  border-color: #ea001e;
179
+ -webkit-box-shadow: #ea001e 0 0 0 1px inset;
169
180
  box-shadow: #ea001e 0 0 0 1px inset;
170
181
  background-clip: padding-box;
171
182
  }
@@ -177,7 +188,8 @@ select {
177
188
  }
178
189
 
179
190
  .select_container .select-element {
180
- appearance: none;
191
+ -moz-appearance: none;
192
+ -webkit-appearance: none;
181
193
  padding-left: 0.5rem;
182
194
  padding-right: 1.5rem;
183
195
  }
@@ -188,10 +200,12 @@ select {
188
200
 
189
201
  .has-error .select-element:focus,
190
202
  .has-error .select-element:active {
203
+ -webkit-box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
191
204
  box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
192
205
  }
193
206
 
194
207
  .form-element:not(.has-error) .select-element:required {
208
+ -webkit-box-shadow: none;
195
209
  box-shadow: none;
196
210
  }
197
211