@salesforcedevs/docs-components 1.34.3-style-fix-alpha4 → 1.34.4-scroll-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/docs-components",
-  "version": "1.34.3-style-fix-alpha4",
+  "version": "1.34.4-scroll-1",
   "description": "Docs Lightning web components for DSC",
   "license": "MIT",
   "main": "index.js",
@@ -25,5 +25,6 @@
     "@types/lodash.orderby": "4.6.9",
     "@types/lodash.uniqby": "4.7.9"
   },
-  "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
+  "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/contentLayout/contentLayout.ts

@@ -496,8 +496,18 @@ export default class ContentLayout extends LightningElement {
         }
 
         if (!this.didScrollToSelectedHash) {
+            this.tryScrollToHash(headingElements);
+        }
+    }
+
+    /**
+     * Attempts the one-shot hash scroll and marks it complete only if scrolling succeeds,
+     * keeping both trigger points consistent.
+     */
+    // eslint-disable-next-line no-undef
+    protected tryScrollToHash(headingElements: NodeListOf<Element>): void {
+        if (this.scrollToHash(headingElements)) {
             this.didScrollToSelectedHash = true;
-            this.scrollToHash(headingElements);
         }
     }
 
@@ -585,6 +595,10 @@ export default class ContentLayout extends LightningElement {
         this.updateRNB();
         this.updateContentActionToolbar();
         this.contentLoaded = true;
+
+        if (this.enableSlotChange && !this.didScrollToSelectedHash) {
+            this.tryScrollToHash(this.getHeadingElements());
+        }
     }
 
     protected disconnectObserver(): void {
@@ -595,7 +609,7 @@ export default class ContentLayout extends LightningElement {
     }
 
     // eslint-disable-next-line no-undef
-    protected scrollToHash(headingElements: NodeListOf<Element>): void {
+    protected scrollToHash(headingElements: NodeListOf<Element>): boolean {
         let { hash } = window.location;
         if (hash) {
             hash = hash.substr(1);
@@ -610,14 +624,18 @@ export default class ContentLayout extends LightningElement {
                 "hgf-c360contextnav"
             ) as HTMLElement;
 
+            if (!docHeaderEl || !globalNavEl || !contextNavEl) {
+                return false;
+            }
+
             const headerHeight =
-                docHeaderEl?.offsetHeight +
-                globalNavEl?.offsetHeight +
-                contextNavEl?.offsetHeight;
+                (docHeaderEl.offsetHeight || 0) +
+                (globalNavEl.offsetHeight || 0) +
+                (contextNavEl.offsetHeight || 0);
 
             const docPhaseEl = (
                 this.template.querySelector("[name=doc-phase]")! as any
-            ).assignedElements()[0] as HTMLSlotElement;
+            )?.assignedElements?.()[0] as HTMLSlotElement | undefined;
 
             const offset = docPhaseEl
                 ? headerHeight + docPhaseEl.offsetHeight
@@ -626,10 +644,11 @@ export default class ContentLayout extends LightningElement {
             for (const headingElement of headingElements as any) {
                 if (headingElement.getAttribute("id") === hash) {
                     this.scrollIntoViewWithOffset(headingElement, offset);
-                    break;
+                    return true;
                 }
             }
         }
+        return false;
     }
 
     protected scrollIntoViewWithOffset(

package/src/modules/doc/redocReference/redocReference.css

@@ -3,5 +3,4 @@
     --doc-c-redoc-sidebar-top: calc(
         var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
     );
-    --doc-c-redoc-sidebar-bg: white;
 }

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

@@ -4,13 +4,11 @@ import DocPhase from "doc/phase";
 import DxFooter from "dx/footer";
 import DxIcon from "dx/icon";
 import SidebarFooterNav from "dx/sidebarFooterNav";
-import VersionPicker from "doc/versionPicker";
 import SprigSurvey from "doc/sprigSurvey";
 import { throttle } from "throttle-debounce";
 import { pollUntil } from "dxUtils/async";
 import { toJson } from "dxUtils/normalizers";
-import { oldVersionDocInfo } from "docUtils/utils";
-import type { DocPhaseInfo, OptionWithLink } from "typings/custom";
+import type { OptionWithLink } from "typings/custom";
 
 declare global {
     interface Window {
@@ -35,18 +33,8 @@ type ReferenceItem = {
     topic?: ReferenceTopic;
 };
 
-/** A selectable spec version. Mirrors `ReferenceVersion` in `doc/amfReference`. */
-type ReferenceVersion = {
-    id: string;
-    label: string;
-    deprecated?: boolean;
-    selected?: boolean;
-    link: { href: string };
-};
-
 type ReferenceConfig = {
     refList: ReferenceItem[];
-    versions?: ReferenceVersion[];
 };
 
 const SCROLL_THROTTLE_DELAY = 50;
@@ -54,7 +42,6 @@ const ELEMENT_TIMEOUT = 10000;
 const ELEMENT_CHECK_INTERVAL = 100;
 const DEFAULT_PROJECT_TITLE = "All Reference";
 const BACK_TARGET_STORAGE_KEY = "redoc-back-target";
-const SELECTED_VIEW_STORAGE_KEY = "redoc-selected-view";
 const DOCS_PATH_SEGMENT = "docs";
 const DEFAULT_LOCALE = "en-us";
 
@@ -165,40 +152,6 @@ export default class RedocReference extends LightningElement {
         return refCount > 1;
     }
 
-    get versions(): ReferenceVersion[] {
-        return this._referenceConfig?.versions ?? [];
-    }
-
-    /** The version flagged `selected`, else the first (the latest/GA version). */
-    get selectedVersion(): ReferenceVersion | null {
-        const versions = this.versions;
-        return versions.find((v) => v.selected) ?? versions[0] ?? null;
-    }
-
-    /** True when the selected version is the latest/GA one (index 0). */
-    get latestVersion(): boolean {
-        return this.versions.length
-            ? this.selectedVersion?.id === this.versions[0].id
-            : false;
-    }
-
-    get hasVersionPicker(): boolean {
-        return this.versions.length > 0;
-    }
-
-    /** "Newer version available" banner info when on a non-latest version, else null. */
-    private get oldVersionInfo(): DocPhaseInfo | null {
-        if (this.versions.length > 1 && !this.latestVersion) {
-            return oldVersionDocInfo(this.versions[0].link.href);
-        }
-        return null;
-    }
-
-    /** A single version has nothing to choose, so it renders read-only. */
-    get isVersionReadOnly(): boolean {
-        return this.versions.length === 1;
-    }
-
     // Reads stored back target
     private getBackTargetFromSession(): string | null {
         return sessionStorage.getItem(BACK_TARGET_STORAGE_KEY);
@@ -249,9 +202,7 @@ export default class RedocReference extends LightningElement {
         }
 
         const referrer = this.getSameOriginReferrerHref();
-        return referrer &&
-            !this.isLocaleHref(new URL(referrer).pathname) &&
-            !this.isVersionHref(new URL(referrer).pathname)
+        return referrer && !this.isLocaleHref(new URL(referrer).pathname)
             ? referrer
             : null;
     }
@@ -290,10 +241,7 @@ export default class RedocReference extends LightningElement {
         }
 
         const referrerUrl = new URL(referrerHref);
-        if (
-            this.isLocaleHref(referrerUrl.pathname) ||
-            this.isVersionHref(referrerUrl.pathname)
-        ) {
+        if (this.isLocaleHref(referrerUrl.pathname)) {
             return;
         }
 
@@ -334,19 +282,6 @@ export default class RedocReference extends LightningElement {
         });
     }
 
-    /**
-     * switching version on this same page.
-     */
-    private isVersionHref(pathname: string): boolean {
-        return this.versions.some((version) => {
-            const href = version?.link?.href;
-            return (
-                !!href &&
-                new URL(href, window.location.origin).pathname === pathname
-            );
-        });
-    }
-
     /** When origin is provided, pass it to the footer; otherwise use dx-footer's default. */
     get effectiveFooterOrigin(): string {
         return (
@@ -419,14 +354,6 @@ export default class RedocReference extends LightningElement {
         return parseInt(value, 10) || 0;
     }
 
-    /** Redoc's LNB background color, themeable via `--doc-c-redoc-sidebar-bg`. */
-    private get sidebarBackgroundColor(): string {
-        const value = getComputedStyle(this.template.host).getPropertyValue(
-            "--doc-c-redoc-sidebar-bg"
-        );
-        return value.trim() || "white";
-    }
-
     /*
      ** Since we could not use --dx-g-global-header-height as getPropertyValue returns a calc expression,
      ** we are using the respective CSS variables to calculate the height.
@@ -542,14 +469,7 @@ export default class RedocReference extends LightningElement {
                     specUrl,
                     {
                         // Dynamic scroll offset to account for headers
-                        scrollYOffset: this.calculateScrollYOffset,
-                        // Redoc's own styled background outranks injected
-                        // CSS, so the LNB background must be set via theme.
-                        theme: {
-                            sidebar: {
-                                backgroundColor: this.sidebarBackgroundColor
-                            }
-                        }
+                        scrollYOffset: this.calculateScrollYOffset
                     },
                     redocContainer,
                     (error: any) => {
@@ -595,7 +515,10 @@ export default class RedocReference extends LightningElement {
             const apiContentDiv = await this.waitForApiContent(redocContainer);
             apiContentDiv.setAttribute("lwc:dom", "manual");
 
-            this.insertStatusItems(apiContentDiv);
+            const docPhaseInfo = this.getDocPhaseInfo();
+            if (docPhaseInfo) {
+                this.insertDocPhase(apiContentDiv, docPhaseInfo);
+            }
 
             this.appendFooterItems(apiContentDiv);
 
@@ -604,22 +527,10 @@ export default class RedocReference extends LightningElement {
 
             // Wait for footer to be rendered before updating styles
             requestAnimationFrame(() => {
-                try {
-                    this.updateRedocThirdColumnStyle(redocContainer);
-
-                    // Restore the view selected before a version switch only
-                    // after all layout mutations (footer, header) are
-                    // complete, so the scroll lands on the correct element.
-                    this.restoreSelectedView();
-
-                    // Fix initial hash scroll after doc phase insertion
-                    this.handleInitialHashScrollFix();
-                } catch (error) {
-                    this.showErrorUI(
-                        "Failed to integrate custom components:",
-                        error
-                    );
-                }
+                this.updateRedocThirdColumnStyle(redocContainer);
+
+                // Fix initial hash scroll after doc phase insertion
+                this.handleInitialHashScrollFix();
             });
         } catch (error) {
             this.showErrorUI("Failed to integrate custom components:", error);
@@ -649,53 +560,6 @@ export default class RedocReference extends LightningElement {
         }
     }
 
-    /** Builds the version picker DOM by reusing `doc-version-picker`. */
-    private buildVersionPickerDom(): HTMLElement {
-        const wrapper = document.createElement("div");
-        wrapper.className = "redoc-version-picker";
-
-        const picker = createElement("doc-version-picker", {
-            is: VersionPicker
-        });
-
-        Object.assign(picker, {
-            versions: this.versions,
-            selectedVersion: this.selectedVersion,
-            latestVersion: this.latestVersion,
-            readOnly: this.isVersionReadOnly
-        });
-        picker.addEventListener("change", this.onVersionChange);
-        wrapper.appendChild(picker);
-
-        return wrapper;
-    }
-
-    /** Stashes the current view (URL hash) before the version link navigates. */
-    private onVersionChange = (): void => {
-        sessionStorage.setItem(
-            SELECTED_VIEW_STORAGE_KEY,
-            window.location.hash || ""
-        );
-    };
-
-    /**
-     * Re-applies the view stashed before a version switch, if its anchor exists
-     * in the new spec; otherwise a no-op (lands on the spec root).
-     */
-    private restoreSelectedView(): void {
-        const storedHash = sessionStorage.getItem(SELECTED_VIEW_STORAGE_KEY);
-        sessionStorage.removeItem(SELECTED_VIEW_STORAGE_KEY);
-
-        if (!storedHash || window.location.hash) {
-            return;
-        }
-
-        const targetId = storedHash.replace(/^#/, "");
-        if (targetId && document.getElementById(targetId)) {
-            window.location.hash = storedHash;
-        }
-    }
-
     /**
      * Builds the locale picker DOM by reusing `dx-sidebar-footer-nav`
      */
@@ -717,17 +581,12 @@ export default class RedocReference extends LightningElement {
     }
 
     /**
-     * Builds the doc header: a title group (back link + spec title) and, when
-     * versions are available, the version picker as a sibling row. Layout/gaps
-     * are styled by the developer-website's redoc CSS.
+     * Builds a fresh project-title/spec-title header DOM node.
      */
     private buildProjectHeaderDom(): HTMLElement {
         const wrapper = document.createElement("div");
         wrapper.className = "redoc-project-header";
 
-        const main = document.createElement("div");
-        main.className = "redoc-project-header-main";
-
         if (this.projectTitle) {
             const backLink = document.createElement("a");
             backLink.className = "redoc-project-back";
@@ -748,20 +607,14 @@ export default class RedocReference extends LightningElement {
 
             backLink.appendChild(icon);
             backLink.appendChild(label);
-            main.appendChild(backLink);
+            wrapper.appendChild(backLink);
         }
 
         if (this.specTitle) {
             const specEl = document.createElement("h2");
             specEl.className = "redoc-spec-title dx-text-display-7";
             specEl.textContent = this.specTitle;
-            main.appendChild(specEl);
-        }
-
-        wrapper.appendChild(main);
-
-        if (this.hasVersionPicker) {
-            wrapper.appendChild(this.buildVersionPickerDom());
+            wrapper.appendChild(specEl);
         }
 
         return wrapper;
@@ -786,40 +639,15 @@ export default class RedocReference extends LightningElement {
         return container.querySelector<HTMLElement>(".api-content")!;
     }
 
-    // Inserts the doc phase and, on a non-latest version, a dismissible
-    // "newer version" banner into a shared doc-phase-wrapper at container start
-    private insertStatusItems(container: HTMLElement): void {
-        const docPhaseInfo = this.getDocPhaseInfo();
-        const oldVersionInfo = this.oldVersionInfo;
-        if (!docPhaseInfo && !oldVersionInfo) {
-            return;
-        }
-
+    // Creates and inserts doc phase component at container start
+    private insertDocPhase(container: HTMLElement, docPhaseInfo: string): void {
         const wrapper = document.createElement("div");
         wrapper.className = "doc-phase-wrapper";
         container.insertBefore(wrapper, container.firstChild);
 
-        if (docPhaseInfo) {
-            const docPhaseElement = createElement("doc-phase", {
-                is: DocPhase
-            });
-            Object.assign(docPhaseElement, { docPhaseInfo });
-            wrapper.appendChild(docPhaseElement);
-        }
-
-        if (oldVersionInfo) {
-            const versionBanner = createElement("doc-phase", { is: DocPhase });
-            Object.assign(versionBanner, {
-                docPhaseInfo: oldVersionInfo,
-                dismissible: true,
-                iconName: "warning"
-            });
-            versionBanner.addEventListener("dismissphase", () => {
-                versionBanner.remove();
-                this.updateSidebarPosition();
-            });
-            wrapper.appendChild(versionBanner);
-        }
+        const docPhaseElement = createElement("doc-phase", { is: DocPhase });
+        Object.assign(docPhaseElement, { docPhaseInfo });
+        wrapper.appendChild(docPhaseElement);
     }
 
     // Appends footer component to container

package/src/modules/doc/unifiedContentLayout/unifiedContentLayout.html

@@ -24,14 +24,6 @@
             lwc:if={docPhaseInfo}
             doc-phase-info={docPhaseInfo}
         ></doc-phase>
-        <doc-phase
-            slot="version-banner"
-            lwc:if={showVersionBanner}
-            doc-phase-info={oldVersionInfo}
-            icon-name="warning"
-            dismissible="true"
-            ondismissphase={handleDismissVersionBanner}
-        ></doc-phase>
         <slot></slot>
     </doc-content-layout>
 </template>

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

@@ -1,12 +1,6 @@
-import { LightningElement, api, track } from "lwc";
+import { LightningElement, api } from "lwc";
 import { toJson } from "dxUtils/normalizers";
-import type { VersionedNode } from "dxUtils/topicVersion";
-import {
-    findTopicVersionForCurrentPage,
-    latestHrefForCurrentPage
-} from "dxUtils/topicVersion";
-import { oldVersionDocInfo } from "docUtils/utils";
-import type { DocPhaseInfo, OptionWithLink, TreeNode } from "typings/custom";
+import type { OptionWithLink, TreeNode } from "typings/custom";
 
 /**
  * Per-topic type emitted by the docs content-type parser
@@ -16,38 +10,61 @@ 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).
- *
- * 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.
+ * 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
  */
-function decorateTopicsWithForwardArrow(
-    topics:
-        | Array<TreeNode & { topicType?: string; versions?: unknown }>
-        | undefined
+function decorateTopics(
+    topics: Array<TreeNode & { topicType?: string }> | undefined
 ): TreeNode[] | undefined {
     return topics?.map((topic) => {
-        const { topicType, versions, ...decorated } = topic;
+        const { topicType, ...decorated } = topic;
         if (topicType === TOPIC_TYPE_SPEC) {
             decorated.showForwardArrow = true;
-            // Nested and standalone specs never get a sidebar picker; only the
-            // parent MD topic (when versioned) shows one.
-        } else if (versions) {
-            decorated.versions = versions;
         }
         if (decorated.children) {
-            decorated.children = decorateTopicsWithForwardArrow(
-                decorated.children
-            );
+            decorated.children = decorateTopics(decorated.children);
         }
 
-        // 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) {
+        /** 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) {
             decorated.redirectToChild = true;
+            const firstChild = firstChildContentPage(topic);
+            if (firstChild?.link) {
+                decorated.link = { ...firstChild.link };
+            }
         }
 
         return decorated;
@@ -84,9 +101,6 @@ export default class UnifiedContentLayout extends LightningElement {
 
     private _docPhaseInfo: string | null = null;
     private _sidebarContent: unknown = null;
-    private _oldVersionInfo: DocPhaseInfo | null = null;
-
-    @track showVersionBanner = false;
 
     @api
     get docPhaseInfo(): string | null {
@@ -103,40 +117,7 @@ export default class UnifiedContentLayout extends LightningElement {
     }
 
     set sidebarContent(value: string) {
-        const topics = decorateTopicsWithForwardArrow(toJson(value)?.topics);
-        this._sidebarContent = topics;
-        this.updateTopicVersionBanner(topics as VersionedNode[] | undefined);
-    }
-
-    get oldVersionInfo(): DocPhaseInfo | null {
-        return this._oldVersionInfo;
-    }
-
-    handleDismissVersionBanner(): void {
-        this.showVersionBanner = false;
-    }
-
-    /**
-     * Same banner references use when the reader is on an older version.
-     * Topic versions are not a separate page property: the sidebar tree
-     * carries each version's switching URL, and the current pathname says
-     * which one is open.
-     */
-    private updateTopicVersionBanner(
-        topics: VersionedNode[] | undefined
-    ): void {
-        const match = findTopicVersionForCurrentPage(topics);
-        const latest = match?.node.versions?.[0];
-        const latestHref = latestHrefForCurrentPage(match?.node.versions);
-
-        if (match && latest && match.version.id !== latest.id && latestHref) {
-            this._oldVersionInfo = oldVersionDocInfo(latestHref);
-            this.showVersionBanner = true;
-            return;
-        }
-
-        this._oldVersionInfo = null;
-        this.showVersionBanner = false;
+        this._sidebarContent = decorateTopics(toJson(value)?.topics);
     }
 
     private get enableFooter(): boolean {

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

@@ -2,69 +2,28 @@
 
 /* NOTE: doc-version-picker-width width variable is used by both dx-button and dx-dropdown to maintain a consistent width. */
 :host {
-    /* 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;
-
     --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"])) {
-    z-index: 2;
 }
 
 .version-picker-container {
-    /* Override --doc-version-picker-padding to change the inset (e.g. when the
-       picker sits inside an already-padded container). */
-    padding: var(
-        --doc-version-picker-padding,
-        var(--dx-g-spacing-sm) var(--dx-g-spacing-lg) var(--dx-g-spacing-sm)
-            var(--dx-g-global-header-padding-horizontal)
-    );
-
-    /* Override --doc-version-picker-divider (e.g. `none`) to restyle dividers. */
-    border-top: var(
-        --doc-version-picker-divider,
-        1px solid var(--dx-g-gray-90)
-    );
-    border-bottom: var(
-        --doc-version-picker-divider,
-        1px solid var(--dx-g-gray-90)
-    );
-}
-
-/* Inline sidebar variant: drop the header-slot chrome so the picker sits
-   beside a tree node without extra padding or divider lines. */
-.version-picker-container-small {
-    display: flex;
-    align-items: center;
-    padding: 0;
-    border: none;
+    padding: 8px var(--dx-g-spacing-lg) 8px
+        var(--dx-g-global-header-padding-horizontal);
+    border-top: 1px solid var(--dx-g-gray-90);
+    border-bottom: 1px solid var(--dx-g-gray-90);
 }
 
 .version-picker-button {
     display: flex;
-    width: 100%;
-    overflow: visible;
-
-    --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
-    --dx-g-button-icon-color: var(--dx-g-gray-50);
+    width: var(--doc-version-picker-width, 296px);
 }
 
 .version-picker-button:hover,
-.version-picker-button[aria-expanded="true"] {
-    --dx-g-button-icon-color: var(--dx-g-blue-vibrant-20);
+.version-picker-button:active,
+.version-picker-button:focus {
+    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
 }
 
 /**
@@ -76,57 +35,6 @@ 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;
@@ -141,111 +49,16 @@ dx-button::part(content) {
     white-space: nowrap;
 }
 
-dx-type-badge.latest-badge,
-dx-type-badge.not-latest-badge {
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-/* ------------------------------------------------------------------ *
- * Small "dot" variant (opt-in via `small`). Additive 
- * ------------------------------------------------------------------ */
-
-/* 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 {
-    width: fit-content;
-    max-width: 104px;
-
-    --dx-c-button-font-size: var(--dx-g-text-xs);
-    --dx-c-button-font-weight: var(--dx-g-font-normal);
-    --dx-c-button-line-height: var(--dx-g-spacing-lg);
-    --dx-c-button-icon-gap: var(--dx-g-spacing-2xs);
-}
+dx-type-badge.latest-badge {
+    --dx-c-type-badge-color: var(--dx-g-green-vibrant-40);
+    --dx-c-type-badge-background: var(--dx-g-green-vibrant-95);
 
-/* min-width: 0 on each flex ancestor lets the label truncate: a flex item's
-   default min-width: auto refuses to shrink below its content and overrides the
-   host's max-width, so without this the trigger overflows instead. */
-.version-picker-button-small::part(content) {
-    display: flex;
-    flex: 1;
-    min-width: 0;
-    width: auto;
-    overflow: hidden;
-}
-
-/* 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. */
-.version-picker-button-small::part(container) {
-    width: 100%;
-    height: var(--dx-g-spacing-lg);
-    padding: 0 var(--dx-g-spacing-xs);
-}
-
-.selected-version-small {
-    flex: 1;
-    min-width: 0;
-}
-
-.version-picker-dot {
-    flex: 0 0 auto;
-    width: var(--dx-g-spacing-sm);
-    height: var(--dx-g-spacing-sm);
-    margin-right: var(--dx-g-spacing-xs);
-    border-radius: 50%;
-}
-
-.version-picker-dot-latest {
-    background: var(--dx-g-green-vibrant-60);
-}
-
-.version-picker-dot-not-latest {
-    background: var(--dx-g-yellow-vibrant-80);
+    margin-left: var(--dx-g-spacing-sm);
 }
 
-/* inline-block (not flex) so the label can truncate; line-height centers it. */
-.version-picker-readonly {
-    box-sizing: border-box;
-    display: inline-block;
-    width: 100%;
-    height: var(--dx-g-spacing-xl);
-    margin: 0;
-    padding: 0 var(--dx-g-spacing-sm);
-    border: 1px solid var(--dx-g-gray-80);
-    border-radius: var(--dx-g-spacing-xs);
-    overflow: hidden;
-    color: var(--dx-g-gray-10);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font: var(--dx-g-font-normal) var(--dx-g-text-sm) / var(--dx-g-spacing-xl)
-            var(--dx-g-font-sans),
-        sans-serif;
-}
+dx-type-badge.not-latest-badge {
+    --dx-c-type-badge-color: var(--dx-g-red-vibrant-40);
+    --dx-c-type-badge-background: var(--dx-g-red-vibrant-95);
 
-.version-picker-readonly-small {
-    width: fit-content;
-    max-width: 104px;
-    height: var(--dx-g-spacing-lg);
-    padding: 0 var(--dx-g-spacing-xs);
-    font: var(--dx-g-font-normal) var(--dx-g-text-xs) / var(--dx-g-spacing-lg)
-            var(--dx-g-font-sans),
-        sans-serif;
+    margin-left: var(--dx-g-spacing-sm);
 }

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

@@ -1,70 +1,37 @@
 <template>
-    <div lwc:if={showVersionPicker} class={containerClass}>
-        <!-- Small read-only: plain value, no dropdown -->
-        <p
-            lwc:if={readOnly}
-            class={readOnlyClass}
-            title={selectedVersion.label}
-        >
-            {selectedVersion.label}
-        </p>
-
+    <div lwc:if={showVersionPicker} class="version-picker-container">
         <dx-dropdown
-            lwc:else
-            class={dropdownClass}
             options={versions}
             analytics-event="custEv_docVersionSelect"
             analytics-payload={analyticsPayload}
             value={selectedVersion.id}
-            width-mode={dropdownWidthMode}
+            width="var(--doc-version-picker-width)"
             onchange={onVersionChange}
         >
             <dx-button
-                class={triggerClass}
+                class="version-picker-button"
                 variant="tertiary"
                 size="small"
-                font="sans"
                 icon-symbol="chevrondown"
-                icon-size={triggerIconSize}
-                aria-label={triggerAriaLabel}
+                icon-size="medium"
             >
-                <div class={selectedVersionClass}>
-                    <!-- Small: leading colored dot -->
-                    <template lwc:if={small}>
-                        <template lwc:if={showLatestTag}>
-                            <span class={dotClass} aria-hidden="true"></span>
-                        </template>
-                        <p
-                            class="selected-version-label"
-                            title={selectedVersion.label}
-                        >
-                            {selectedVersion.label}
-                        </p>
-                    </template>
-                    <!-- Default: trailing Latest/Not-Latest badge -->
-                    <template lwc:else>
-                        <p
-                            class="selected-version-label"
-                            title={selectedVersion.label}
-                        >
-                            {selectedVersion.label}
-                        </p>
-                        <template lwc:if={showLatestTag}>
-                            <dx-type-badge
-                                class="latest-badge"
-                                lwc:if={latestVersion}
-                                variant="status-success"
-                                value="Latest"
-                                size="small"
-                            ></dx-type-badge>
-                            <dx-type-badge
-                                class="not-latest-badge"
-                                lwc:else
-                                variant="status-warning"
-                                value="Not Latest"
-                                size="small"
-                            ></dx-type-badge>
-                        </template>
+                <div class="selected-version">
+                    <p class="selected-version-label">
+                        {selectedVersion.label}
+                    </p>
+                    <template lwc:if={showLatestTag}>
+                        <dx-type-badge
+                            class="latest-badge"
+                            lwc:if={latestVersion}
+                            value="Latest"
+                            size="small"
+                        ></dx-type-badge>
+                        <dx-type-badge
+                            class="not-latest-badge"
+                            lwc:else
+                            value="Not Latest"
+                            size="small"
+                        ></dx-type-badge>
                     </template>
                 </div>
             </dx-button>

package/src/modules/doc/versionPicker/versionPicker.ts

@@ -1,5 +1,4 @@
 import { LightningElement, api, track } from "lwc";
-import cx from "classnames";
 
 import { AnalyticsPayload, OptionWithNested } from "typings/custom";
 
@@ -13,8 +12,6 @@ export default class VersionPicker extends LightningElement {
     private _selectedVersion?: OptionWithNested;
     private _latestVersion: boolean = false;
     private _hideBadge: boolean = false;
-    private _small: boolean = false;
-    private _readOnly: boolean = false;
 
     @api
     get versions() {
@@ -54,103 +51,14 @@ export default class VersionPicker extends LightningElement {
         this._hideBadge = normalizeBoolean(value);
     }
 
-    // Opt-in compact "dot" variant (24px, abbreviated label). Off by default so
-    // existing consumers render the default trigger unchanged.
-    @api
-    get small() {
-        return this._small;
-    }
-
-    set small(value) {
-        this._small = normalizeBoolean(value);
-    }
-
-    // Opt-in read-only state: plain value, no dropdown menu.
-    @api
-    get readOnly() {
-        return this._readOnly;
-    }
-
-    set readOnly(value) {
-        this._readOnly = normalizeBoolean(value);
-    }
-
     private get showVersionPicker() {
         return this._versions && this._versions.length !== 0;
     }
 
-    private get containerClass(): string {
-        return this.small
-            ? "version-picker-container-small"
-            : "version-picker-container";
-    }
-
     private get showLatestTag(): boolean {
         return !this.hideBadge;
     }
 
-    private get readOnlyClass(): string {
-        return cx(
-            "version-picker-readonly",
-            this.small && "version-picker-readonly-small"
-        );
-    }
-
-    private get dotClass(): string {
-        return `version-picker-dot ${
-            this.latestVersion
-                ? "version-picker-dot-latest"
-                : "version-picker-dot-not-latest"
-        }`;
-    }
-
-    // Accessible name for the small trigger: includes the latest state so it
-    // isn't conveyed by the dot's color alone (WCAG 1.4.1). Omits the state
-    // when the indicator is hidden.
-    private get smallTriggerAriaLabel(): string {
-        const label = this.selectedVersion?.label ?? "";
-        if (!this.showLatestTag) {
-            return label;
-        }
-        return `${label}, ${this.latestVersion ? "Latest" : "Not Latest"}`;
-    }
-
-    // --- Per-variant values for the shared dropdown/button markup below. The
-    // small variant opts into extra classes and a compact chevron.
-
-    // Not cx(): the default must have NO class attribute (cx returns "", which
-    // would render class="" and break the frozen consumer snapshots).
-    private get dropdownClass(): string | undefined {
-        return this.small ? "version-picker-dropdown-small" : undefined;
-    }
-
-    // "full" matches the trigger (ToC width). "fit-end" sizes to the labels,
-    // caps at the ToC width, and opens inward.
-    private get dropdownWidthMode(): "full" | "fit-end" {
-        return this.small ? "fit-end" : "full";
-    }
-
-    private get triggerClass(): string {
-        return cx(
-            "version-picker-button",
-            this.small && "version-picker-button-small"
-        );
-    }
-
-    private get triggerIconSize(): string {
-        return this.small ? "xsmall" : "medium";
-    }
-
-    // Default returns "" (dx-button's own default) so the trigger's rendered
-    // aria-label is unchanged for the default variant.
-    private get triggerAriaLabel(): string {
-        return this.small ? this.smallTriggerAriaLabel : "";
-    }
-
-    private get selectedVersionClass(): string {
-        return cx("selected-version", this.small && "selected-version-small");
-    }
-
     private onVersionChange(e: CustomEvent) {
         this.dispatchEvent(new CustomEvent("change", { detail: e.detail }));
     }

package/src/modules/docUtils/utils/utils.ts

@@ -1,28 +1,10 @@
 import { CoveoAnalyticsClient } from "coveo.analytics/dist/browser.mjs"; // This fix is required for Node 20 upgrade, so that Coveo analytics is loaded properly by LWR.
 
-// Resolve against the current origin (version links are usually relative) and
-// keep only http/https. Blocks executable schemes like javascript:/data: that
-// would run when the innerHTML-rendered link is clicked
-// encodeURI then keeps the value from breaking out of the href attribute.
-const toSafeHref = (link: string): string => {
-    try {
-        const { protocol } = new URL(link, window.location.origin);
-        if (protocol === "http:" || protocol === "https:") {
-            return encodeURI(link);
-        }
-    } catch {
-        // Fall through to the rejection below.
-    }
-    console.warn(`Blocked unsafe version link: ${link}`);
-    return "#";
-};
-
 export const oldVersionDocInfo = (latestVersionLink: string) => {
-    const safeLink = toSafeHref(latestVersionLink);
     return {
         title: "Newer Version Available",
-        body: `This content describes an older version of this product.
-        <a style="font-weight: bold;" href="${safeLink}">View Latest</a>`
+        body: `This content describes an older version of this product. 
+        <a style="font-weight: bold;" href="${latestVersionLink}">View Latest</a>`
     };
 };