@salesforcedevs/docs-components 1.34.3-style-fix-alpha3 → 1.34.3-style-fix-alpha4

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/modules/doc/versionPicker/versionPicker.css +7 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/docs-components",
3
- "version": "1.34.3-style-fix-alpha3",
3
+ "version": "1.34.3-style-fix-alpha4",
4
4
  "description": "Docs Lightning web components for DSC",
5
5
  "license": "MIT",
6
6
  "main": "index.js",
package/src/modules/doc/versionPicker/versionPicker.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --dx-c-dropdown-option-font-weight: normal;
11
11
  --dx-c-dropdown-option-font-size: var(--dx-g-text-base);
12
12
  --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
13
+ --dx-c-dropdown-option-active-label-color: var(--dx-g-gray-10);
13
14
  --dx-c-dropdown-option-padding: var(--dx-g-spacing-sm)
14
15
  var(--dx-g-spacing-lg);
15
16
  --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
@@ -54,7 +55,7 @@
54
55
 
55
56
  .version-picker-button {
56
57
  display: flex;
57
- width: var(--doc-version-picker-width, 296px);
58
+ width: 100%;
58
59
  overflow: visible;
59
60
 
60
61
  --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
@@ -86,6 +87,7 @@ dx-button::part(content) {
86
87
  box-shadow: none;
87
88
  color: var(--dx-g-gray-10);
88
89
  outline: none;
90
+ transition: var(--dx-g-transition-hue-1x), box-shadow 0.15s linear;
89
91
  }
90
92
 
91
93
  /* Hover only (not open): 2px #032D60 on #EEF4FF, no ring.
@@ -103,13 +105,8 @@ dx-button::part(content) {
103
105
  box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20);
104
106
  }
105
107
 
106
- /* Halo lives on the dx-button host so inner tertiary styles / overflow
107
- cannot flatten it. Fill and the inset stroke stay on the part. */
108
- .version-picker-button[aria-expanded="true"] {
109
- border-radius: var(--dx-g-spacing-xs);
110
- box-shadow: var(--dx-c-version-picker-focus-ring);
111
- }
112
-
108
+ /* Open keeps the fill and the 2px stroke. The focus ring is keyboard-only,
109
+ on the closed picker below. */
113
110
  .version-picker-button[aria-expanded="true"]::part(container) {
114
111
  background: var(--dx-g-blue-vibrant-95);
115
112
  border: 1px solid var(--dx-g-blue-vibrant-95);
@@ -117,7 +114,7 @@ dx-button::part(content) {
117
114
  box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20);
118
115
  }
119
116
 
120
- /* Keyboard focus while closed. Open uses the host halo above. */
117
+ /* Keyboard focus while closed. */
121
118
  .version-picker-button:not([aria-expanded="true"])::part(
122
119
  container
123
120
  ):focus-visible {
@@ -228,7 +225,7 @@ dx-type-badge.not-latest-badge {
228
225
  .version-picker-readonly {
229
226
  box-sizing: border-box;
230
227
  display: inline-block;
231
- width: var(--doc-version-picker-width, 296px);
228
+ width: 100%;
232
229
  height: var(--dx-g-spacing-xl);
233
230
  margin: 0;
234
231
  padding: 0 var(--dx-g-spacing-sm);