@salesforcedevs/dx-components 1.40.4-fix-alpha → 1.40.4-fix-redoc-topic-v-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/dx-components",
-  "version": "1.40.4-fix-alpha",
+  "version": "1.40.4-fix-redoc-topic-v-1",
   "description": "DX Lightning web components",
   "license": "MIT",
   "engines": {
@@ -43,5 +43,6 @@
     "eventsourcemock": "2.0.0",
     "luxon": "3.4.4",
     "msw": "^2.12.4"
-  }
+  },
+  "stableVersion": "1.40.4"
 }

package/src/modules/dx/button/button.css

@@ -20,11 +20,6 @@
     --dx-c-button-line-height: inherit;
     --dx-c-button-letter-spacing: inherit;
     --dx-c-button-display: flex;
-
-    /* Keyboard focus ring (WES): a 2px white band, then a 2px blue outline. */
-    --dx-c-button-focus-outline: 2px solid var(--dx-g-blue-vibrant-60);
-    --dx-c-button-focus-offset: 2px;
-    --dx-c-button-focus-shadow: 0 0 0 2px white;
 }
 
 .button {
@@ -37,8 +32,7 @@
     user-select: none;
     white-space: nowrap;
     font-size: var(--dx-c-button-font-size);
-    transition: var(--dx-g-transition-hue-1x),
-        var(--dx-g-transition-box-shadow-1x);
+    transition: var(--dx-g-transition-hue-1x);
     padding: var(--dx-c-button-vertical-spacing, 0)
         var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
     border-radius: var(--dx-g-spacing-xs);
@@ -66,11 +60,7 @@
     display: inline;
     vertical-align: var(--dx-c-button-icon-vertical-align, unset);
 
-    /* Component hook first; the global stays as the fallback for dark mode. */
-    --dx-c-icon-color: var(
-        --dx-c-button-icon-color,
-        var(--dx-g-button-icon-color, currentcolor)
-    );
+    --dx-c-icon-color: var(--dx-g-button-icon-color, currentcolor);
 }
 
 .button.variant_inline dx-icon,
@@ -201,7 +191,6 @@
 }
 
 .button.variant_primary:hover,
-.button.variant_primary:focus-visible,
 :host([aria-expanded="true"]) .button.variant_primary {
     background: var(--dx-c-button-primary-color-hover);
     border-color: var(--dx-c-button-primary-color-hover);
@@ -226,8 +215,6 @@
 
 .button.variant_secondary:hover,
 .button.variant_quaternary:hover,
-.button.variant_secondary:focus-visible,
-.button.variant_quaternary:focus-visible,
 :host([aria-expanded="true"]) .button.variant_secondary,
 :host([aria-expanded="true"]) .button.variant_quaternary {
     background: var(--dx-c-button-secondary-color-hover);
@@ -247,7 +234,6 @@
 }
 
 .button.variant_tertiary:hover,
-.button.variant_tertiary:focus-visible,
 :host([aria-expanded="true"]) .button.variant_tertiary {
     background: var(--dx-c-button-secondary-color-hover);
     border-color: var(--dx-c-button-secondary-color-hover);
@@ -264,8 +250,6 @@
 
 .button.variant_inline:hover,
 .button.variant_inline-inherit:hover,
-.button.variant_inline:focus-visible,
-.button.variant_inline-inherit:focus-visible,
 :host([aria-expanded="true"])
     :is(.button.variant_inline, .button.variant_inline-inherit) {
     color: var(--dx-c-button-inline-color-hover);
@@ -293,30 +277,10 @@
 }
 
 .button.variant_custom:hover,
-.button.variant_custom:focus-visible,
 .button.variant_icon-only:hover,
-.button.variant_icon-only:focus-visible,
 :host([aria-expanded="true"]) .button.variant_custom,
 :host([aria-expanded="true"]) .button.variant_icon-only {
     color: var(--dx-c-button-custom-color-hover);
     background: var(--dx-c-button-custom-background-hover);
     border-color: var(--dx-c-button-custom-border-hover);
-
-    /* An inset shadow can thicken the edge without resizing the button. */
-    box-shadow: var(--dx-c-button-custom-border-shadow-hover, none);
-}
-
-/* Keyboard focus only; an open menu alone shows no ring. Keep last so it wins
-   over hover and the open state (:host lifts it above the custom and icon-only
-   hover rules). The outline survives Windows high-contrast mode; the white band
-   does not. */
-:host .button:focus-visible,
-:host .button:focus-visible:hover,
-:host([aria-expanded="true"]) .button:focus-visible {
-    outline: var(--dx-c-button-focus-outline);
-    outline-offset: var(--dx-c-button-focus-offset);
-    box-shadow: var(--dx-c-button-focus-shadow);
-
-    /* The ring appears at once instead of fading in. */
-    transition: var(--dx-g-transition-hue-1x);
 }

package/src/modules/dx/dropdown/dropdown.css

@@ -1,14 +1,5 @@
 @import "dxHelpers/reset";
 
-/* Options run edge to edge; the menu adds space above the first and below
-   the last. */
-dx-popover {
-    --dx-c-popover-padding: var(
-        --dx-c-dropdown-padding,
-        var(--dx-g-spacing-sm) 0
-    );
-}
-
 .menu-nested:not(.menu-fit-content)::part(content) {
     padding-top: var(--dx-g-spacing-sm);
     width: 354px;
@@ -23,31 +14,30 @@ dx-popover {
     display: none;
 }
 
-/* fit-content and fit-end: the menu is as wide as its longest label. */
-.menu-fit-content {
-    --dx-c-popover-width: max-content;
-}
-
-/* fit-end also stops at --dx-c-dropdown-menu-max-width. Labels wrap only once
-   the menu reaches that width. */
-.menu-fit-end::part(content) {
+/* Opt-in fit-content menu: hugs the labels (so it can be as narrow as the
+   shortest one) and stops at --dx-c-dropdown-menu-max-width. Defaults still
+   truncate; set --dx-c-dropdown-fit-white-space: normal to wrap instead. */
+.menu-fit-content::part(content) {
     box-sizing: border-box;
+    width: max-content;
     max-width: var(
         --dx-c-dropdown-menu-max-width,
         calc(100vw - var(--dx-g-spacing-lg))
     );
 }
 
-.menu-fit-content.menu-nested .menu_list {
-    width: 100%;
-    align-items: flex-start;
-    gap: var(--dx-g-spacing-sm);
-}
-
-.menu-fit-content.menu-nested .menu_option:not(:first-child) {
-    border-top: var(--border);
-    margin-top: 0;
-    padding-top: var(--dx-g-spacing-sm);
+.menu-fit-content {
+    --dx-c-dropdown-option-min-width: 0;
+    --dx-c-dropdown-option-label-display: block;
+    --dx-c-dropdown-option-white-space: var(
+        --dx-c-dropdown-fit-white-space,
+        nowrap
+    );
+    --dx-c-dropdown-option-overflow: var(--dx-c-dropdown-fit-overflow, hidden);
+    --dx-c-dropdown-option-text-overflow: var(
+        --dx-c-dropdown-fit-text-overflow,
+        ellipsis
+    );
 }
 
 @media screen and (max-width: 1000px) {

package/src/modules/dx/dropdown/dropdown.ts

@@ -119,8 +119,7 @@ export default class Dropdown extends LightningElement {
                 "menu-nested-2-col",
             this.offset && `menu-offset-${this.offset}`,
             this.areOptionsEmpty && "menu-hidden",
-            fitContent && "menu-fit-content",
-            this.widthMode === "fit-end" && "menu-fit-end"
+            fitContent && "menu-fit-content"
         );
     }
 

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -12,16 +12,11 @@
     width: var(--shape-width);
 }
 
-/* The vertical stroke of the "L" runs up to the top edge of the option: the
-   top padding plus the space above the shape inside the line box. */
 .indented-shape::after {
     background-color: var(--background);
     bottom: 0;
     content: "";
-    height: calc(
-        var(--dx-g-spacing-sm) +
-            (var(--dx-g-spacing-lg) + var(--wide) - var(--dx-g-spacing-xs)) / 2
-    );
+    height: 15px;
     position: absolute;
     width: var(--wide);
 }
@@ -30,12 +25,14 @@
     display: flex;
     font-family: var(--dx-g-font-sans);
     width: 100%;
-    padding: var(
-        --dx-c-dropdown-option-padding,
-        var(--dx-g-spacing-sm) var(--dx-g-spacing-lg)
-    );
+
+    /* Opt-in hooks; defaults preserve today's look. */
+    padding: var(--dx-c-dropdown-option-padding, var(--dx-g-spacing-sm));
     font-size: var(--dx-g-text-sm);
-    border-radius: var(--dx-c-dropdown-option-border-radius, 0);
+    border-radius: var(
+        --dx-c-dropdown-option-border-radius,
+        var(--dx-g-spacing-xs)
+    );
     transition: var(--dx-g-transition-hue-1x);
     align-items: center;
     outline: none !important;
@@ -56,6 +53,8 @@
 }
 
 .option-active {
+    --dx-c-dropdown-option-label-color: var(--dx-g-blue-vibrant-50);
+
     background: var(--dx-g-cloud-blue-vibrant-95);
 }
 
@@ -63,34 +62,27 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: flex-start;
-    gap: var(--dx-g-spacing-sm);
-    flex: 1;
-    min-width: 0;
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-sm);
     text-align: left;
+
+    /* Opt-in: set to 0 to let a long label truncate instead of overflow. */
+    min-width: var(--dx-c-dropdown-option-min-width, auto);
 }
 
 .option-indented .option_details {
     align-items: center;
     flex-direction: row;
-    justify-content: flex-start;
-    gap: 0;
 }
 
 .option_label {
-    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-text-body-color));
+    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
 
     /* Opt-in: set to block so text-overflow:ellipsis applies (ignored on flex). */
     display: var(--dx-c-dropdown-option-label-display, flex);
     align-items: center;
-    font-weight: var(
-        --dx-c-dropdown-option-font-weight,
-        var(--dx-g-font-normal)
-    );
+    font-weight: var(--dx-c-dropdown-option-font-weight, var(--dx-g-font-bold));
     font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
-    line-height: var(--dx-g-spacing-lg);
 
     /* Opt-in truncation: consumers set --dx-c-dropdown-option-white-space:
        nowrap to truncate labels with an ellipsis instead of wrapping.
@@ -115,57 +107,65 @@
 
 .option_description {
     color: var(--dx-g-gray-30);
+    margin-top: var(--dx-g-spacing-xs);
     line-height: 18px;
 }
 
-/* An option can have a start icon (iconSymbol), an end icon (endIconSymbol),
-   or both. */
 .option_icon {
-    --dx-c-icon-size: var(--dx-g-icon-size-md);
-    --dx-c-icon-color: var(--dx-g-gray-50);
-
+    margin-right: var(--dx-g-spacing-md);
     flex-shrink: 0;
 }
 
-.option_icon-start {
-    margin-right: var(--dx-g-spacing-md);
+.option-indented {
+    padding-top: var(--dx-g-spacing-xs);
+    padding-bottom: var(--dx-g-spacing-xs);
 }
 
-.option_icon-end {
-    margin-left: var(--dx-g-spacing-2xl);
+.option-fit-content {
+    min-width: 0;
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
 }
 
-/* Indented (breadcrumb hierarchy) menus keep their own selected label color. */
-.option-indented.option-active {
-    --dx-c-dropdown-option-label-color: var(--dx-g-blue-vibrant-50);
+.option-fit-content .option_details {
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
+    min-width: 0;
+    flex: 1;
 }
 
-/* fit-content (toolbar): one line per label, truncated with an ellipsis. */
-.option-fit-content {
-    min-width: 0;
+.option-fit-content .option_description {
+    margin-top: 0;
 }
 
 .option-fit-content .option_label {
     display: block;
+    color: var(--dx-g-gray-10);
+    font-weight: var(--dx-g-font-normal);
+    line-height: var(--dx-g-spacing-lg);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: calc(100vw - var(--dx-g-spacing-lg) * 4);
 }
 
-/* Each "L" starts xs past the first letter of the label above it. A label
-   sits one shape plus its sm margin after its own "L", so each level steps in
-   by that much plus xs. */
+.option-fit-content.option-active .option_label {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.option-fit-content .option_icon {
+    --dx-c-icon-size: var(--dx-g-icon-size-md);
+    --dx-c-icon-color: var(--dx-g-gray-50);
+
+    order: 1;
+    margin-right: 0;
+    margin-left: var(--dx-g-spacing-2xl);
+}
+
 .option-indented:not([data-index="0"]) {
-    --base-indentation: calc(
-        var(--shape-width) + var(--dx-g-spacing-sm) + var(--dx-g-spacing-xs)
-    );
+    --base-indentation: calc(var(--dx-g-spacing-md) + var(--shape-width));
     --shape-width: 8px;
 
-    padding-left: calc(
-        var(--indentation, 0px) + var(--dx-g-spacing-lg) +
-            var(--dx-g-spacing-xs)
-    );
+    padding-left: calc(var(--indentation, 0px) + var(--dx-g-spacing-md));
 }
 
 [data-index="2"] {

package/src/modules/dx/dropdownOption/dropdownOption.html

@@ -11,12 +11,11 @@
         onclick={onClick}
     >
         <dx-icon
-            class="option_icon option_icon-start"
+            class="option_icon"
             symbol={option.iconSymbol}
             sprite={option.iconSprite}
-            color={option.iconColor}
-            lwc:if={option.iconSymbol}
-            size="override"
+            if:true={option.iconSymbol}
+            size={optionIconSize}
         ></dx-icon>
         <div class="option_details">
             <div if:true={renderIndentedShape} class="indented-shape"></div>
@@ -31,14 +30,6 @@
                 {option.description}
             </div>
         </div>
-        <dx-icon
-            class="option_icon option_icon-end"
-            symbol={option.endIconSymbol}
-            sprite={option.endIconSprite}
-            color={option.endIconColor}
-            lwc:if={option.endIconSymbol}
-            size="override"
-        ></dx-icon>
     </a>
     <button
         if:false={option.link}
@@ -49,12 +40,12 @@
         onclick={onClick}
     >
         <dx-icon
-            class="option_icon option_icon-start"
+            class="option_icon"
             symbol={option.iconSymbol}
             sprite={option.iconSprite}
             color={option.iconColor}
-            lwc:if={option.iconSymbol}
-            size="override"
+            if:true={option.iconSymbol}
+            size={optionIconSize}
         ></dx-icon>
         <div class="option_details">
             <div if:true={renderIndentedShape} class="indented-shape"></div>
@@ -63,13 +54,5 @@
                 {option.description}
             </div>
         </div>
-        <dx-icon
-            class="option_icon option_icon-end"
-            symbol={option.endIconSymbol}
-            sprite={option.endIconSprite}
-            color={option.endIconColor}
-            lwc:if={option.endIconSymbol}
-            size="override"
-        ></dx-icon>
     </button>
 </template>

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -4,7 +4,8 @@ import {
     OptionWithNested,
     AnalyticsPayload,
     DropdownVariant,
-    DropdownWidthMode
+    DropdownWidthMode,
+    IconSize
 } from "typings/custom";
 import { track } from "dxUtils/analytics";
 
@@ -40,6 +41,10 @@ export default class DropdownOption extends LightningElement {
         return this.variant === "indented" && this.indexPosition >= 1;
     }
 
+    private get optionIconSize(): IconSize {
+        return this.widthMode === "fit-content" ? "override" : "large";
+    }
+
     private onClick(e: PointerEvent) {
         this.dispatchEvent(
             new CustomEvent("select", { detail: this.keyValue })

package/src/modules/dx/popover/popover.css

@@ -29,6 +29,7 @@
     padding: var(--popover-padding);
     overflow-y: auto;
     transition: var(--popover-transition);
+    transition-delay: 0.02s;
     transform: translateY(var(--dx-g-spacing-xs));
     opacity: 0;
 }
@@ -39,9 +40,6 @@
 }
 
 .popover-container_open .popover {
-    /* Delay only on open. A closing delay keeps the menu visible for a frame
-       after its container hides, while it moves (a flash above the trigger). */
-    transition-delay: 0.02s;
     opacity: 1;
     transform: var(--popover-container-open-transform);
 }

package/src/modules/dx/popover/popover.ts

@@ -240,16 +240,6 @@ export default class Popover extends LightningElement {
                 this.dispatchEvent(new CustomEvent("controlarrowdown"));
                 break;
             }
-            // A mouse-opened menu leaves focus on the control, so Escape lands
-            // here, not in the popover's own key handler.
-            case "Esc":
-            case "Escape": {
-                if (this.open) {
-                    this.dispatchRequestCloseEvent("keypress-escape");
-                    this.closePopover(true);
-                }
-                break;
-            }
             default:
         }
     };

package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.css

@@ -5,6 +5,8 @@
     --button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
     --popover-container-open-transform: translateX(-4px) translateY(-8px);
     --popover-transition: none;
+    --dx-c-dropdown-option-font-weight: normal;
+    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
 }
 
 .footer-item {

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -2,9 +2,7 @@
 @import "dxHelpers/text";
 
 :host {
-    /* Width of the sidebar content (search field, version pickers) on tablet
-       and desktop. The sidebar adds its left padding and a 24px right inset. */
-    --dx-c-sidebar-content-width: 296px;
+    --dx-c-sidebar-width: 337px;
     --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
     --dx-c-sidebar-button-background: white;
     --dx-c-sidebar-button-border: white;
@@ -13,9 +11,7 @@
     --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
     --dx-c-sidebar-left-padding: var(--dx-g-global-header-padding-horizontal);
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
-
-    /* Widest a small version picker menu can grow. */
-    --doc-version-picker-width: var(--dx-c-sidebar-content-width);
+    --doc-version-picker-width: 296px;
 }
 
 .header {
@@ -51,7 +47,7 @@
     color: var(--dx-g-blue-vibrant-30);
 }
 
-.container.collapsed:not(.container-mobile) {
+.container.collapsed {
     width: var(--dx-g-spacing-xl);
 }
 
@@ -86,19 +82,15 @@
     display: flex;
     flex-direction: column;
     height: var(--dx-c-sidebar-height);
-
-    /* Mobile (container-mobile, set at 768px and below) fills the viewport. */
-    width: 100%;
+    width: calc(var(--dx-c-sidebar-width) + var(--left-spacing));
 }
 
-/* Tablet and desktop: left padding + content + right inset. */
 .container:not(.container-mobile) {
     --border-color: transparent;
-
-    width: calc(
-        var(--dx-c-sidebar-left-padding) + var(--dx-c-sidebar-content-width) +
-            var(--dx-g-spacing-lg)
+    --left-spacing: calc(
+        var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
     );
+
     box-shadow: 2px 0 0 0 var(--border-color);
     min-height: var(--dx-c-sidebar-min-height);
     padding: var(--dx-c-sidebar-vertical-padding) 0 var(--dx-g-spacing-2xs) 0;
@@ -114,9 +106,7 @@
 }
 
 .container.container-mobile {
-    --doc-version-picker-width: calc(
-        100vw - var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-lg)
-    );
+    width: 100%;
 }
 
 .container.container-mobile .header {
@@ -179,3 +169,11 @@
 .sidebar-content-hasfooter {
     margin-bottom: var(--dx-g-spacing-2xl);
 }
+
+@media screen and (max-width: 767px) {
+    :host {
+        --doc-version-picker-width: calc(
+            100vw - var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-lg)
+        );
+    }
+}

package/src/modules/dxUtils/topicVersion/topicVersion.ts

@@ -318,7 +318,7 @@ function hrefMatchesVersion(
     return hrefMatchesCurrentPage(applyVersionToHref(href, version, versions));
 }
 
-function collectSubtreeCanonicalHrefs(
+export function collectSubtreeCanonicalHrefs(
     node: VersionedNode,
     includeSelf = true
 ): string[] {