@salesforcedevs/docs-components 1.34.3-style-fix-alpha → 1.34.3-style-fix-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/docs-components",
-  "version": "1.34.3-style-fix-alpha",
+  "version": "1.34.3-style-fix-alpha2",
   "description": "Docs Lightning web components for DSC",
   "license": "MIT",
   "main": "index.js",

package/src/modules/doc/unifiedContentLayout/unifiedContentLayout.ts

@@ -20,9 +20,9 @@ const TOPIC_TYPE_SPEC = "spec";
  * Translates per-topic `topicType` into the generic `showForwardArrow` flag
  * that `dx-tree-tile` reads (spec topics get the forward arrow icon for Redoc).
  *
- * Content-less parents are left without a link. The tree treats them as
- * parent-only sections and selects the first markdown descendant. Copying that
- * child's href onto the parent makes the parent win selection.
+ * Content-less parents are flagged with redirectToChild and left without a
+ * link. The tree selects the first markdown descendant. Copying that child's
+ * href onto the parent makes the parent win selection.
  */
 function decorateTopicsWithForwardArrow(
     topics:
@@ -44,6 +44,12 @@ function decorateTopicsWithForwardArrow(
             );
         }
 
+        // Flag a parent with no page of its own. Leave its link empty so the
+        // child's URL stays indexed to the child.
+        if (!!decorated.children?.length && !decorated.link?.href) {
+            decorated.redirectToChild = true;
+        }
+
         return decorated;
     });
 }

package/src/modules/doc/versionPicker/versionPicker.css

@@ -75,8 +75,9 @@ dx-button::part(content) {
     overflow: hidden;
 }
 
-/* box-sizing: border-box so the 2px hover/focus border doesn't grow the
-   small variant's 24px box. Tertiary's 1px hover border is overridden. */
+/* Border width stays 1px in every state. Hover, open, and focus paint the
+   2px blue stroke with an inset shadow so the box does not grow.
+   Tertiary's hover border is overridden. */
 .version-picker-button::part(container) {
     box-sizing: border-box;
     background: white;
@@ -88,6 +89,8 @@ dx-button::part(content) {
 }
 
 /* Hover only (not open): 2px #032D60 on #EEF4FF, no ring.
+   Border color matches the fill so the 1px border does not add a third
+   pixel around the inset stroke.
    :focus-visible is included so click-open + Escape (which upgrades the
    trigger to keyboard focus) still looks like hover while the pointer is on
    the picker. */
@@ -96,12 +99,12 @@ dx-button::part(content) {
         container
     ):focus-visible {
     background: var(--dx-g-blue-vibrant-95);
-    border: 2px solid var(--dx-g-blue-vibrant-20);
-    box-shadow: none;
+    border: 1px solid var(--dx-g-blue-vibrant-95);
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20);
 }
 
 /* Halo lives on the dx-button host so inner tertiary styles / overflow
-   cannot flatten it. Fill and 2px border stay on the part. */
+   cannot flatten it. Fill and the inset stroke stay on the part. */
 .version-picker-button[aria-expanded="true"] {
     border-radius: var(--dx-g-spacing-xs);
     box-shadow: var(--dx-c-version-picker-focus-ring);
@@ -109,9 +112,9 @@ dx-button::part(content) {
 
 .version-picker-button[aria-expanded="true"]::part(container) {
     background: var(--dx-g-blue-vibrant-95);
-    border: 2px solid var(--dx-g-blue-vibrant-20);
+    border: 1px solid var(--dx-g-blue-vibrant-95);
     border-radius: var(--dx-g-spacing-xs);
-    box-shadow: none;
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20);
 }
 
 /* Keyboard focus while closed. Open uses the host halo above. */
@@ -121,9 +124,10 @@ dx-button::part(content) {
     --dx-g-button-icon-color: var(--dx-g-blue-vibrant-20);
 
     background: var(--dx-g-blue-vibrant-95);
-    border: 2px solid var(--dx-g-blue-vibrant-20);
+    border: 1px solid var(--dx-g-blue-vibrant-95);
     border-radius: var(--dx-g-spacing-xs);
-    box-shadow: var(--dx-c-version-picker-focus-ring);
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20),
+        var(--dx-c-version-picker-focus-ring);
 }
 
 .selected-version {