@salesforcedevs/docs-components 1.34.3-final-alpha1 → 1.34.3-fix-alpha

package/package.json

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

package/src/modules/doc/breadcrumbs/breadcrumbs.css

@@ -21,6 +21,7 @@ nav {
 
 dx-dropdown {
     --dx-c-dropdown-option-font-size: var(--dx-g-text-sm);
+    --dx-c-dropdown-option-font-weight: var(--dx-g-font-bold);
     --dx-c-dropdown-option-label-color: var(
         --dx-c-breadcrumbs-breadcrumb-color
     );

package/src/modules/doc/contentActionToolbar/contentActionToolbar.ts

@@ -127,26 +127,26 @@ export default class ContentActionToolbar extends LightningElement {
                     {
                         id: ACTION_COPY_MARKDOWN,
                         label: COPY_MARKDOWN_LABEL,
-                        iconSprite: "utility",
-                        iconSymbol: "copy"
+                        endIconSprite: "utility",
+                        endIconSymbol: "copy"
                     },
                     {
                         id: ACTION_VIEW_MARKDOWN,
                         label: VIEW_MARKDOWN_LABEL,
-                        iconSprite: "utility",
-                        iconSymbol: "new_window"
+                        endIconSprite: "utility",
+                        endIconSymbol: "new_window"
                     },
                     {
                         id: ACTION_COPY_MARKDOWN_URL,
                         label: COPY_MARKDOWN_URL_LABEL,
-                        iconSprite: "utility",
-                        iconSymbol: "link"
+                        endIconSprite: "utility",
+                        endIconSymbol: "link"
                     },
                     ...AI_ASSISTANTS.map(({ action, label }) => ({
                         id: action,
                         label,
-                        iconSprite: "utility",
-                        iconSymbol: "new_window"
+                        endIconSprite: "utility",
+                        endIconSymbol: "new_window"
                     }))
                 ]
             });
@@ -159,14 +159,14 @@ export default class ContentActionToolbar extends LightningElement {
                 {
                     id: ACTION_VIEW_LLMS,
                     label: VIEW_LLMS_LABEL,
-                    iconSprite: "utility",
-                    iconSymbol: "new_window"
+                    endIconSprite: "utility",
+                    endIconSymbol: "new_window"
                 },
                 {
                     id: ACTION_COPY_LLMS_URL,
                     label: COPY_LLMS_URL_LABEL,
-                    iconSprite: "utility",
-                    iconSymbol: "link"
+                    endIconSprite: "utility",
+                    endIconSymbol: "link"
                 }
             ]
         });

package/src/modules/doc/nav/nav.css

@@ -8,7 +8,7 @@
 }
 
 dx-sidebar {
-    --dx-c-sidebar-width: unset;
+    --dx-c-sidebar-content-width: unset;
 
     display: block;
 }

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

@@ -1,12 +1,12 @@
 @import "dxHelpers/reset";
 
-/* NOTE: doc-version-picker-width width variable is used by both dx-button and dx-dropdown to maintain a consistent width. */
+/* The large picker fills its row (the sidebar sets the row padding). The small
+   menu stops at --doc-version-picker-width, which the sidebar sets. */
 :host {
-    --dx-c-dropdown-option-font-weight: normal;
-    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
-    --dx-c-dropdown-option-padding: var(--dx-g-spacing-sm)
-        var(--dx-g-spacing-lg);
-    --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
+    display: block;
+
+    /* Menu labels wrap; break long unspaced labels instead of overflowing. */
+    --dx-c-dropdown-option-overflow-wrap: anywhere;
     --popover-container-open-transform: translateY(4px);
 }
 
@@ -47,16 +47,31 @@
 
 .version-picker-button {
     display: flex;
-    width: var(--doc-version-picker-width, 296px);
+    width: 100%;
 
     --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
-    --dx-g-button-icon-color: var(--dx-g-gray-50);
+    --dx-c-button-icon-color: var(--dx-g-gray-50);
+
+    /* A real 1px border at rest. Hover and the open menu turn it dark blue and
+       add a 1px inset shadow, so the edge looks 2px without resizing. */
+    --dx-c-button-custom-color: var(--dx-g-gray-10);
+    --dx-c-button-custom-color-hover: var(--dx-g-gray-10);
+    --dx-c-button-custom-background: white;
+    --dx-c-button-custom-background-hover: var(--dx-g-blue-vibrant-95);
+    --dx-c-button-custom-border: var(--dx-g-gray-50);
+    --dx-c-button-custom-border-hover: var(--dx-g-blue-vibrant-20);
+    --dx-c-button-custom-border-shadow-hover: inset 0 0 0 1px
+        var(--dx-g-blue-vibrant-20);
+
+    /* Keyboard focus keeps the 2px edge inside the white band. */
+    --dx-c-button-focus-shadow: inset 0 0 0 1px var(--dx-g-blue-vibrant-20),
+        0 0 0 2px white;
 }
 
 .version-picker-button:hover,
 .version-picker-button:focus-within,
 .version-picker-button[aria-expanded="true"] {
-    --dx-g-button-icon-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-button-icon-color: var(--dx-g-blue-vibrant-20);
 }
 
 /**
@@ -68,27 +83,6 @@ dx-button::part(content) {
     overflow: hidden;
 }
 
-/* The border is an inset box-shadow so thickening it on hover/focus doesn't
-   resize the small variant's fit-content box. */
-.version-picker-button::part(container) {
-    background: white;
-    box-shadow: inset 0 0 0 1px var(--dx-g-gray-50);
-    color: var(--dx-g-gray-10);
-}
-
-.version-picker-button::part(container):hover {
-    background: var(--dx-g-blue-vibrant-95);
-    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20);
-}
-
-/* aria-expanded keeps the focus ring while the menu is open. */
-.version-picker-button:focus-within::part(container),
-.version-picker-button[aria-expanded="true"]::part(container) {
-    background: var(--dx-g-blue-vibrant-95);
-    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20), 0 0 0 2px white,
-        0 0 0 4px var(--dx-g-blue-vibrant-60);
-}
-
 .selected-version {
     display: flex;
     flex-direction: row;
@@ -112,24 +106,11 @@ dx-type-badge.not-latest-badge {
  * Small "dot" variant (opt-in via `small`). Additive 
  * ------------------------------------------------------------------ */
 
-/* Option padding is sm both axes: the small menu tracks the ~104px trigger, so
-   the default 24px horizontal would crowd the labels. */
+/* The small menu hugs its longest label but never grows wider than the sidebar
+   content (--doc-version-picker-width, set by the sidebar). Labels wrap only at
+   that width. The large menu always matches its trigger (width-mode="full"). */
 .version-picker-dropdown-small {
-    --dx-c-dropdown-option-font-size: var(--dx-g-text-xs);
-    --dx-c-dropdown-option-padding: var(--dx-g-spacing-sm)
-        var(--dx-g-spacing-sm);
-    --dx-c-dropdown-option-border-radius: 0;
-    --dx-c-popover-border: none;
-
-    /* Hug the labels (down to the shortest) but never wider than the ToC
-       content: 296px on desktop, and on the smallest breakpoint the sidebar
-       variable grows with the viewport up to 720px. Long labels wrap inside
-       that cap. */
     --dx-c-dropdown-menu-max-width: var(--doc-version-picker-width, 296px);
-    --dx-c-dropdown-fit-white-space: normal;
-    --dx-c-dropdown-fit-overflow: hidden;
-    --dx-c-dropdown-fit-text-overflow: clip;
-    --dx-c-dropdown-option-overflow-wrap: anywhere;
 }
 
 .version-picker-button-small {
@@ -154,7 +135,8 @@ dx-type-badge.not-latest-badge {
 }
 
 /* width:100% re-ties to the 104px-capped host (container is width:inherit,
-   which copies width but not max-width). Border/bg/states are shared above. */
+   which copies width but not max-width). Border, fill, and states come from the
+   dx-button hooks on .version-picker-button. */
 .version-picker-button-small::part(container) {
     width: 100%;
     height: var(--dx-g-spacing-lg);
@@ -186,7 +168,7 @@ dx-type-badge.not-latest-badge {
 .version-picker-readonly {
     box-sizing: border-box;
     display: inline-block;
-    width: var(--doc-version-picker-width, 296px);
+    width: 100%;
     height: var(--dx-g-spacing-xl);
     margin: 0;
     padding: 0 var(--dx-g-spacing-sm);

package/src/modules/doc/versionPicker/versionPicker.html

@@ -21,7 +21,7 @@
         >
             <dx-button
                 class={triggerClass}
-                variant="tertiary"
+                variant="custom"
                 size="small"
                 font="sans"
                 icon-symbol="chevrondown"