@salesforcedevs/docs-components 1.34.4-topic-alpha.5 → 1.34.5-tlv-alpha-1

package/package.json

@@ -1,29 +1,30 @@
 {
-    "name": "@salesforcedevs/docs-components",
-    "version": "1.34.4-topic-alpha.5",
-    "description": "Docs Lightning web components for DSC",
-    "license": "MIT",
-    "main": "index.js",
-    "engines": {
-        "node": "22.x"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "dependencies": {
-        "@api-components/amf-helper-mixin": "4.5.29",
-        "classnames": "2.5.1",
-        "dompurify": "3.2.4",
-        "kagekiri": "1.4.2",
-        "lodash.orderby": "4.6.0",
-        "lodash.uniqby": "4.7.0",
-        "query-string": "7.1.3",
-        "sentence-case": "3.0.4"
-    },
-    "devDependencies": {
-        "@types/classnames": "2.3.1",
-        "@types/lodash.orderby": "4.6.9",
-        "@types/lodash.uniqby": "4.7.9"
-    },
-    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
-}
+  "name": "@salesforcedevs/docs-components",
+  "version": "1.34.5-tlv-alpha-1",
+  "description": "Docs Lightning web components for DSC",
+  "license": "MIT",
+  "main": "index.js",
+  "engines": {
+    "node": "22.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@api-components/amf-helper-mixin": "4.5.29",
+    "classnames": "2.5.1",
+    "dompurify": "3.2.4",
+    "kagekiri": "1.4.2",
+    "lodash.orderby": "4.6.0",
+    "lodash.uniqby": "4.7.0",
+    "query-string": "7.1.3",
+    "sentence-case": "3.0.4"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.3.1",
+    "@types/lodash.orderby": "4.6.9",
+    "@types/lodash.uniqby": "4.7.9"
+  },
+  "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad",
+  "stableVersion": "1.34.4"
+}

package/src/modules/doc/banner/banner.css

@@ -16,8 +16,6 @@
 }
 
 .icon {
-    --dx-c-icon-size: var(--dx-g-icon-size-lg);
-
     flex-shrink: 0;
     margin-top: var(--dx-g-spacing-smd);
     margin-right: var(--dx-g-spacing-sm);
@@ -73,6 +71,47 @@
     cursor: pointer;
 }
 
+/* Centered variant: the message is centered in the banner and the icon hangs
+   to its left. The close button is taken out of the flow so it doesn't offset
+   the centering. */
+.container_centered {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+
+    /* Reserve the close button's width plus its right inset on both sides */
+    padding: 0
+        calc(
+            var(--dx-g-spacing-3xl) + var(--dx-g-spacing-xs) +
+                var(--doc-banner-padding-right)
+        );
+}
+
+.container_centered .icon {
+    grid-column: 1;
+    justify-self: end;
+    margin-top: 0;
+}
+
+.container_centered .main {
+    grid-column: 2;
+    align-items: center;
+    justify-content: center;
+}
+
+.container_centered .message {
+    text-align: center;
+}
+
+.container_centered .close {
+    position: absolute;
+    top: 50%;
+    right: var(--doc-banner-padding-right);
+    margin-left: 0;
+    transform: translateY(-50%);
+}
+
 @media (max-width: 1279px) {
     :host {
         --doc-banner-padding-left: var(--dx-g-spacing-xl);

package/src/modules/doc/banner/banner.html

@@ -1,16 +1,17 @@
 <template>
     <template lwc:if={showBanner}>
-        <div class="container" part="container">
+        <div class={containerClass} part="container">
             <dx-icon
                 class="icon"
-                symbol="info"
-                size="override"
-                color="gray-50"
+                sprite={iconSprite}
+                symbol={iconSymbol}
+                size={iconSize}
+                color={iconColor}
                 part="icon"
             ></dx-icon>
             <div class="main">
                 <div class="message" part="message" lwc:dom="manual"></div>
-                <div class="actions" part="actions">
+                <div lwc:if={hasActions} class="actions" part="actions">
                     <template lwc:if={hasPrimaryButton}>
                         <dx-button
                             href={buttonHref}

package/src/modules/doc/banner/banner.ts

@@ -1,4 +1,6 @@
 import { LightningElement, api } from "lwc";
+import { IconSize, IconSprite, IconSymbol } from "typings/custom";
+import { normalizeBoolean } from "dxUtils/normalizers";
 
 const BANNER_STORAGE_PREFIX = "doc-banner-";
 
@@ -13,6 +15,24 @@ export default class Banner extends LightningElement {
 
     @api dismissStorageKey = "";
 
+    @api
+    get centered(): boolean {
+        return this._centered;
+    }
+    set centered(value: boolean | string) {
+        this._centered = normalizeBoolean(value);
+    }
+
+    @api iconSprite: IconSprite = "utility";
+
+    @api iconSymbol: IconSymbol = "info";
+
+    @api iconColor = "gray-50";
+
+    @api iconSize: IconSize = "large";
+
+    private _centered = false;
+
     private _dismissed = false;
 
     connectedCallback() {
@@ -33,10 +53,18 @@ export default class Banner extends LightningElement {
         }
     }
 
+    get containerClass(): string {
+        return this._centered ? "container container_centered" : "container";
+    }
+
     get showBanner(): boolean {
         return !this._dismissed;
     }
 
+    get hasActions(): boolean {
+        return this.hasPrimaryButton || this.hasSecondaryAction;
+    }
+
     get hasPrimaryButton(): boolean {
         return !!(this.buttonLabel && this.buttonHref);
     }

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

@@ -21,7 +21,6 @@ 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,
-                        endIconSprite: "utility",
-                        endIconSymbol: "copy"
+                        iconSprite: "utility",
+                        iconSymbol: "copy"
                     },
                     {
                         id: ACTION_VIEW_MARKDOWN,
                         label: VIEW_MARKDOWN_LABEL,
-                        endIconSprite: "utility",
-                        endIconSymbol: "new_window"
+                        iconSprite: "utility",
+                        iconSymbol: "new_window"
                     },
                     {
                         id: ACTION_COPY_MARKDOWN_URL,
                         label: COPY_MARKDOWN_URL_LABEL,
-                        endIconSprite: "utility",
-                        endIconSymbol: "link"
+                        iconSprite: "utility",
+                        iconSymbol: "link"
                     },
                     ...AI_ASSISTANTS.map(({ action, label }) => ({
                         id: action,
                         label,
-                        endIconSprite: "utility",
-                        endIconSymbol: "new_window"
+                        iconSprite: "utility",
+                        iconSymbol: "new_window"
                     }))
                 ]
             });
@@ -159,14 +159,14 @@ export default class ContentActionToolbar extends LightningElement {
                 {
                     id: ACTION_VIEW_LLMS,
                     label: VIEW_LLMS_LABEL,
-                    endIconSprite: "utility",
-                    endIconSymbol: "new_window"
+                    iconSprite: "utility",
+                    iconSymbol: "new_window"
                 },
                 {
                     id: ACTION_COPY_LLMS_URL,
                     label: COPY_LLMS_URL_LABEL,
-                    endIconSprite: "utility",
-                    endIconSymbol: "link"
+                    iconSprite: "utility",
+                    iconSymbol: "link"
                 }
             ]
         });

package/src/modules/doc/header/header.ts

@@ -5,6 +5,7 @@ import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 import { track } from "dxUtils/analytics";
 
+const TABLET_MATCH = "980px";
 const MOBILE_MATCH = "768px";
 
 const isStorybook = () => {
@@ -46,6 +47,8 @@ export default class Header extends HeaderBase {
     }
 
     private _scopedNavItems!: OptionWithNested[];
+    private tablet = false;
+    private tabletMatchMedia!: MediaQueryList;
     private shouldRender: boolean = false;
     private showDocDivider: boolean = false;
     private _devCenter!: DevCenterConfig;
@@ -80,6 +83,11 @@ export default class Header extends HeaderBase {
 
     connectedCallback(): void {
         super.connectedCallback();
+        this.tabletMatchMedia = window.matchMedia(
+            `(max-width: ${TABLET_MATCH})`
+        );
+        this.onTabletChange(this.tabletMatchMedia);
+        this.tabletMatchMedia.addEventListener("change", this.onTabletChange);
 
         if (
             (!this.shouldHideHeader && this.isDocsPath) ||
@@ -98,12 +106,23 @@ export default class Header extends HeaderBase {
         }
     }
 
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.tabletMatchMedia.removeEventListener(
+            "change",
+            this.onTabletChange
+        );
+    }
+
     renderedCallback(): void {
         if (this.hideDocHeader) {
             this.shouldRender = !this.shouldHideHeader && this.isDocsPath;
         }
     }
 
+    private onTabletChange = (e: MediaQueryListEvent | MediaQueryList) =>
+        (this.tablet = e.matches);
+
     protected additionalClasses(): string {
         return cx(
             this.brand && "has-brand",

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

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

package/src/modules/doc/redocReference/redocReference.ts

@@ -10,6 +10,15 @@ import { throttle } from "throttle-debounce";
 import { pollUntil } from "dxUtils/async";
 import { toJson } from "dxUtils/normalizers";
 import { oldVersionDocInfo } from "docUtils/utils";
+import {
+    applyVersionToHref,
+    collectSubtreeCanonicalHrefs,
+    normalizePath,
+    getTopicVersionKey,
+    persistTopicVersion,
+    toCanonicalHref
+} from "dxUtils/topicVersion";
+import type { VersionedNode } from "dxUtils/topicVersion";
 import type { DocPhaseInfo, OptionWithLink } from "typings/custom";
 
 declare global {
@@ -47,6 +56,8 @@ type ReferenceVersion = {
 type ReferenceConfig = {
     refList: ReferenceItem[];
     versions?: ReferenceVersion[];
+    /** Sidebar topic name. Sidebar stores the selected version under this key. */
+    versionTopicKey?: string;
 };
 
 const SCROLL_THROTTLE_DELAY = 50;
@@ -129,6 +140,29 @@ export default class RedocReference extends LightningElement {
      */
     @api headerHref: string | null = null;
 
+    /**
+     * Versioned topic that owns this spec, including its children.
+     * Href matches this page, so an older version still has its version
+     * in the path.
+     */
+    @api
+    set parentTopicFamily(value: string | { topics?: VersionedNode[] } | null) {
+        try {
+            const parsed = toJson(value) as { topics?: VersionedNode[] } | null;
+            this._parentTopicFamilyNode = parsed?.topics?.[0] ?? null;
+        } catch (error) {
+            this._parentTopicFamilyNode = null;
+        }
+    }
+
+    get parentTopicFamily(): { topics?: VersionedNode[] } | null {
+        return this._parentTopicFamilyNode
+            ? { topics: [this._parentTopicFamilyNode] }
+            : null;
+    }
+
+    private _parentTopicFamilyNode: VersionedNode | null = null;
+
     @api
     get contentType(): string {
         return this._contentType;
@@ -233,13 +267,64 @@ export default class RedocReference extends LightningElement {
     private onBackClick = (event: Event): void => {
         event.preventDefault();
 
-        const target = this.getTranslatedBackTarget() ?? this.headerHref;
+        const target = this.getVersionedBackTarget() ?? this.headerHref;
 
         if (target) {
             window.location.assign(target);
         }
     };
 
+    /**
+     * When the back target is in this spec's topic, return it on the
+     * selected version. With no back target, do the same for the header
+     * link when that link is the versioned parent.
+     */
+    private getVersionedBackTarget(): string | null {
+        const stored = this.getTranslatedBackTarget();
+        const selectedVersion = this.selectedVersion;
+        const target = stored ?? this.headerHref;
+        if (!target || !selectedVersion) {
+            return stored;
+        }
+
+        let targetUrl: URL;
+        try {
+            targetUrl = new URL(target, window.location.origin);
+        } catch {
+            return target;
+        }
+
+        // Family hrefs match this page's version. Compare them without
+        // the version segment. Rewrite only the pathname so the target's
+        // query and hash survive.
+        const familyHrefs = this._parentTopicFamilyNode
+            ? collectSubtreeCanonicalHrefs(this._parentTopicFamilyNode).map(
+                  (href) => toCanonicalHref(href, this.versions)
+              )
+            : [];
+
+        const canonicalTarget = toCanonicalHref(
+            targetUrl.pathname,
+            this.versions
+        );
+        const inFamily = familyHrefs.some(
+            (href) => normalizePath(href) === normalizePath(canonicalTarget)
+        );
+        if (!inFamily) {
+            return target;
+        }
+
+        const versioned = applyVersionToHref(
+            canonicalTarget,
+            selectedVersion,
+            this.versions
+        );
+        if (!versioned) {
+            return target;
+        }
+        return `${versioned}${targetUrl.search}${targetUrl.hash}`;
+    }
+
     private getTranslatedBackTarget(): string | null {
         const stored = this.getBackTargetFromSession();
         if (stored) {
@@ -362,6 +447,13 @@ export default class RedocReference extends LightningElement {
         // Track the back target, preserving it across locale switches
         this.trackBackTarget();
 
+        // Remember the selected version for the sidebar. Changing version
+        // reloads this page.
+        const topicKey = this.getParentTopicVersionKey();
+        if (topicKey && this.selectedVersion) {
+            persistTopicVersion(topicKey, this.selectedVersion.id);
+        }
+
         window.addEventListener("scroll", this.handleScrollAndResize);
         window.addEventListener("resize", this.handleScrollAndResize);
     }
@@ -670,6 +762,18 @@ export default class RedocReference extends LightningElement {
         return wrapper;
     }
 
+    /**
+     * Key the sidebar uses for this topic's selected version.
+     * Missing `versionTopicKey` returns null so nothing is written.
+     */
+    private getParentTopicVersionKey(): string | null {
+        const versionTopicKey = this._referenceConfig?.versionTopicKey;
+        if (!versionTopicKey) {
+            return null;
+        }
+        return getTopicVersionKey({ name: versionTopicKey }) || null;
+    }
+
     /** Stashes the current view (URL hash) before the version link navigates. */
     private onVersionChange = (): void => {
         sessionStorage.setItem(

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

@@ -16,36 +16,13 @@ import type { DocPhaseInfo, OptionWithLink, TreeNode } from "typings/custom";
  */
 const TOPIC_TYPE_SPEC = "spec";
 
-/**
- * Walks down the first-child chain and returns the first markdown content
- * page found, descending through nested content-less parents. Returns
- * undefined if the chain breaks on a spec or external link before reaching a
- * content page.
- */
-function firstChildContentPage(node: TreeNode): TreeNode | undefined {
-    const firstChild = node.children?.[0];
-    if (!firstChild) {
-        return undefined;
-    }
-
-    const isSpec =
-        (firstChild as { topicType?: string }).topicType === TOPIC_TYPE_SPEC;
-    const isExternal = firstChild.link?.target === "_blank";
-    if (isSpec || isExternal) {
-        return undefined;
-    }
-
-    if (firstChild.link?.href) {
-        return firstChild;
-    }
-
-    return firstChildContentPage(firstChild);
-}
-
 /**
  * Translates per-topic `topicType` into the generic `showForwardArrow` flag
- * that `dx-tree-tile` reads (spec topics get the forward arrow icon for Redoc),
- * and redirects content-less parent topics whose first child is a content page
+ * that `dx-tree-tile` reads (spec topics get the forward arrow icon for Redoc).
+ *
+ * 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:
@@ -67,18 +44,10 @@ function decorateTopicsWithForwardArrow(
             );
         }
 
-        /** Redirect a parent that has no content of its own to its first child
-         * but only when that first child is itself a content page
-         */
-        const isContentlessParent =
-            !!decorated.children?.length && !decorated.link?.href;
-
-        if (isContentlessParent) {
+        // 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;
-            const firstChild = firstChildContentPage(topic);
-            if (firstChild?.link) {
-                decorated.link = { ...firstChild.link };
-            }
         }
 
         return decorated;

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

@@ -1,18 +1,26 @@
 @import "dxHelpers/reset";
 
-/* 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. */
+/* NOTE: doc-version-picker-width width variable is used by both dx-button and dx-dropdown to maintain a consistent width. */
 :host {
-    display: block;
+    /* Always positioned so the popover's containing block stays the picker.
+       Toggling position with aria-expanded lets the menu jump to the sidebar
+       (top of the ToC) for a frame before LWC hides it. */
+    position: relative;
 
-    /* Menu labels wrap; break long unspaced labels instead of overflowing. */
-    --dx-c-dropdown-option-overflow-wrap: anywhere;
+    --dx-c-dropdown-option-font-weight: normal;
+    --dx-c-dropdown-option-font-size: var(--dx-g-text-base);
+    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
+    --dx-c-dropdown-option-active-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;
     --popover-container-open-transform: translateY(4px);
+    --dx-c-version-picker-focus-ring: 0 0 0 2px white,
+        0 0 0 4px var(--dx-g-blue-vibrant-60);
 }
 
 /* Open menus must stack above later sibling pickers in the sidebar. */
 :host(:has([aria-expanded="true"])) {
-    position: relative;
     z-index: 2;
 }
 
@@ -48,30 +56,15 @@
 .version-picker-button {
     display: flex;
     width: 100%;
+    overflow: visible;
 
     --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
-    --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;
+    --dx-g-button-icon-color: var(--dx-g-gray-50);
 }
 
 .version-picker-button:hover,
-.version-picker-button:focus-within,
 .version-picker-button[aria-expanded="true"] {
-    --dx-c-button-icon-color: var(--dx-g-blue-vibrant-20);
+    --dx-g-button-icon-color: var(--dx-g-blue-vibrant-20);
 }
 
 /**
@@ -83,6 +76,57 @@ dx-button::part(content) {
     overflow: hidden;
 }
 
+/* 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;
+    border: 1px solid var(--dx-g-gray-50);
+    border-radius: var(--dx-g-spacing-xs);
+    box-shadow: none;
+    color: var(--dx-g-gray-10);
+    outline: none;
+    transition: var(--dx-g-transition-hue-1x), box-shadow 0.15s linear;
+}
+
+/* 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. */
+.version-picker-button:hover:not([aria-expanded="true"])::part(container),
+.version-picker-button:hover:not([aria-expanded="true"])::part(
+        container
+    ):focus-visible {
+    background: var(--dx-g-blue-vibrant-95);
+    border: 1px solid var(--dx-g-blue-vibrant-95);
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20);
+}
+
+/* Open keeps the fill and the 2px stroke. The focus ring is keyboard-only,
+   on the closed picker below. */
+.version-picker-button[aria-expanded="true"]::part(container) {
+    background: var(--dx-g-blue-vibrant-95);
+    border: 1px solid var(--dx-g-blue-vibrant-95);
+    border-radius: var(--dx-g-spacing-xs);
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20);
+}
+
+/* Keyboard focus while closed. */
+.version-picker-button:not([aria-expanded="true"])::part(
+        container
+    ):focus-visible {
+    --dx-g-button-icon-color: var(--dx-g-blue-vibrant-20);
+
+    background: var(--dx-g-blue-vibrant-95);
+    border: 1px solid var(--dx-g-blue-vibrant-95);
+    border-radius: var(--dx-g-spacing-xs);
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20),
+        var(--dx-c-version-picker-focus-ring);
+}
+
 .selected-version {
     display: flex;
     flex-direction: row;
@@ -106,11 +150,25 @@ dx-type-badge.not-latest-badge {
  * Small "dot" variant (opt-in via `small`). Additive 
  * ------------------------------------------------------------------ */
 
-/* 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"). */
+/* Menu is capped at the ToC width (296px), not the 104px trigger, so options
+   keep the same 16px / 8px 24px / gray-10 type as the default picker. */
 .version-picker-dropdown-small {
+    --dx-c-dropdown-option-font-size: var(--dx-g-text-base);
+    --dx-c-dropdown-option-padding: var(--dx-g-spacing-sm)
+        var(--dx-g-spacing-lg);
+    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
+    --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 {
@@ -135,8 +193,7 @@ 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, fill, and states come from the
-   dx-button hooks on .version-picker-button. */
+   which copies width but not max-width). Border/bg/states are shared above. */
 .version-picker-button-small::part(container) {
     width: 100%;
     height: var(--dx-g-spacing-lg);

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

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