@salesforcedevs/docs-components 1.33.2-llms-txt-3 → 1.34.0-docs-feedback

package/lwc.config.json

@@ -18,6 +18,7 @@
         "doc/contentMedia",
         "doc/docXmlContent",
         "doc/lwcContentLayout",
+        "doc/unifiedContentLayout",
         "doc/header",
         "doc/heading",
         "doc/headingAnchor",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/docs-components",
-  "version": "1.33.2-llms-txt-3",
+  "version": "1.34.0-docs-feedback",
   "description": "Docs Lightning web components for DSC",
   "license": "MIT",
   "main": "index.js",
@@ -26,5 +26,5 @@
     "@types/lodash.uniqby": "4.7.9"
   },
   "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad",
-  "stableVersion": "1.33.1"
+  "stableVersion": "1.34.0"
 }

package/src/modules/doc/contentActionToolbar/contentActionToolbar.css

@@ -1,24 +1,32 @@
 @import "dxHelpers/reset";
 
 :host {
-    /* Match the Figma menu rows: Body 2 Regular, gray-10 (the dropdown option
-       default is bold + blue), with 24px (spacing-lg) horizontal padding on
-       both option rows and subheaders. These custom properties inherit through
-       the composed tree down to each dx-dropdown-option. */
-    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
-    --dx-c-dropdown-option-font-weight: var(--dx-g-font-normal);
-    --dx-c-dropdown-option-padding-horizontal: var(--dx-g-spacing-lg);
+    display: block;
+}
 
-    /* Popover only needs 8px vertical padding; horizontal is 0 since the
-       options already carry 24px each side. Inherits down to the dropdown's
-       dx-popover. */
-    --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
+.toolbar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--dx-g-spacing-smd);
+    margin-bottom: var(--dx-g-spacing-lg);
+}
 
-    /* Size the menu to its widest option instead of the default fixed 168px,
-       so labels like "Copy as Markdown" aren't clipped or awkwardly narrow.
-       Inherits down to the dropdown's dx-popover. */
-    --dx-c-popover-width: max-content;
+.toolbar-button {
+    --dx-c-button-font-weight: var(--dx-g-font-demi);
+    --dx-c-button-line-height: var(--dx-g-spacing-mlg);
+    --dx-c-button-letter-spacing: 0.005em;
+}
 
-    display: inline-flex;
-    margin-bottom: var(--dx-g-spacing-lg);
+.divider {
+    width: 1px;
+    height: var(--dx-g-spacing-md);
+    background-color: var(--dx-g-gray-70);
+}
+
+@media screen and (max-width: 480px) {
+    .toolbar-button_copy-url,
+    .divider_copy-url {
+        display: none;
+    }
 }

package/src/modules/doc/contentActionToolbar/contentActionToolbar.html

@@ -1,16 +1,53 @@
 <template>
-    <dx-split-button
-        lwc:if={markdownUrl}
-        label="Copy as Markdown"
-        action-tooltip={actionTooltip}
-        icon-symbol="copy"
-        icon-position="right"
-        variant="secondary"
-        size="small"
-        menu-aria-label="More content actions"
-        options={options}
-        stay-open-after-change
-        onactionclick={handleCopyMarkdown}
-        onselect={handleMenuSelect}
-    ></dx-split-button>
+    <div class="toolbar" lwc:if={markdownUrl}>
+        <dx-tooltip placement="top-right" label={copyMarkdownLabel}>
+            <dx-button
+                class="toolbar-button"
+                variant="inline"
+                size="small"
+                icon-sprite="utility"
+                icon-symbol="copy"
+                icon-size="medium"
+                icon-position="right"
+                aria-label={copyMarkdownButtonText}
+                onclick={handleCopyMarkdown}
+            >
+                {copyMarkdownButtonText}
+            </dx-button>
+        </dx-tooltip>
+
+        <div class="divider"></div>
+
+        <dx-button
+            class="toolbar-button"
+            variant="inline"
+            size="small"
+            icon-sprite="utility"
+            icon-symbol="new_window"
+            icon-size="medium"
+            icon-position="right"
+            aria-label={viewMarkdownButtonText}
+            onclick={handleViewMarkdown}
+        >
+            {viewMarkdownButtonText}
+        </dx-button>
+
+        <div class="divider divider_copy-url"></div>
+
+        <dx-tooltip placement="top-right" label={copyUrlLabel}>
+            <dx-button
+                class="toolbar-button toolbar-button_copy-url"
+                variant="inline"
+                size="small"
+                icon-sprite="utility"
+                icon-symbol="link"
+                icon-size="medium"
+                icon-position="right"
+                aria-label={copyUrlButtonText}
+                onclick={handleCopyUrl}
+            >
+                {copyUrlButtonText}
+            </dx-button>
+        </dx-tooltip>
+    </div>
 </template>

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

@@ -1,5 +1,4 @@
 import { LightningElement, api } from "lwc";
-import { OptionWithNested } from "typings/custom";
 import { track } from "dxUtils/analytics";
 
 const DEFAULT_COPY_TOOLTIP_LABEL = "Click to copy";
@@ -10,22 +9,6 @@ const ANALYTICS_CONTENT_CATEGORY = "content action toolbar";
 const COPY_MARKDOWN_LABEL = "Copy as Markdown";
 const VIEW_MARKDOWN_LABEL = "View as Markdown";
 const COPY_URL_LABEL = "Copy URL to Markdown";
-const VIEW_LLMS_LABEL = "View llms.txt";
-const COPY_LLMS_URL_LABEL = "Copy URL to llms.txt";
-
-// Option ids for the split-button menu; used to route `select` events.
-const OPTION_COPY_MARKDOWN = "copy-markdown";
-const OPTION_VIEW_MARKDOWN = "view-markdown";
-const OPTION_COPY_MARKDOWN_URL = "copy-markdown-url";
-const OPTION_VIEW_LLMS = "view-llms";
-const OPTION_COPY_LLMS_URL = "copy-llms-url";
-
-type ToolbarCtaLabel =
-    | typeof COPY_MARKDOWN_LABEL
-    | typeof VIEW_MARKDOWN_LABEL
-    | typeof COPY_URL_LABEL
-    | typeof VIEW_LLMS_LABEL
-    | typeof COPY_LLMS_URL_LABEL;
 
 export default class ContentActionToolbar extends LightningElement {
     @api
@@ -40,9 +23,8 @@ export default class ContentActionToolbar extends LightningElement {
     }
     private _pageUrl?: string;
 
-    // Id of the copy option currently flashing "Copied!" (null = none). Drives
-    // the per-option tooltip label; reassigning it re-renders `options`.
-    private copiedOptionId: string | null = null;
+    copyMarkdownLabel: string = DEFAULT_COPY_TOOLTIP_LABEL;
+    copyUrlLabel: string = DEFAULT_COPY_TOOLTIP_LABEL;
 
     private copyTooltipResetTimeout: number | null = null;
 
@@ -68,107 +50,16 @@ export default class ContentActionToolbar extends LightningElement {
         return url.toString();
     }
 
-    /**
-     * Site-root llms.txt file (same for every page), e.g.
-     * `https://example.com/llms.txt`.
-     */
-    get llmsTxtUrl(): string {
-        return new URL("/docs/llms.txt", window.location.origin).toString();
+    get copyMarkdownButtonText(): string {
+        return COPY_MARKDOWN_LABEL;
     }
 
-    // Hardcoded menu preset rendered by dx-split-button, grouped under bold
-    // subheaders with a divider between "This Page" and "All Documentation".
-    // Copy options carry a tooltip that flashes "Copied!" after a copy.
-    get options(): OptionWithNested[] {
-        return [
-            { id: "this-page", label: "This Page", subheader: true },
-            {
-                id: OPTION_COPY_MARKDOWN,
-                label: COPY_MARKDOWN_LABEL,
-                tooltip: this.copyTooltipFor(OPTION_COPY_MARKDOWN),
-                rightIconData: {
-                    iconSymbol: "copy",
-                    iconSprite: "utility",
-                    iconColor: "gray-50"
-                }
-            },
-            {
-                id: OPTION_VIEW_MARKDOWN,
-                label: VIEW_MARKDOWN_LABEL,
-                rightIconData: {
-                    iconSymbol: "new_window",
-                    iconSprite: "utility",
-                    iconColor: "gray-50"
-                }
-            },
-            {
-                id: OPTION_COPY_MARKDOWN_URL,
-                label: COPY_URL_LABEL,
-                tooltip: this.copyTooltipFor(OPTION_COPY_MARKDOWN_URL),
-                rightIconData: {
-                    iconSymbol: "link",
-                    iconSprite: "utility",
-                    iconColor: "gray-50"
-                }
-            },
-            { id: "divider-1", label: "", divider: true },
-            { id: "all-docs", label: "All Documentation", subheader: true },
-            {
-                id: OPTION_VIEW_LLMS,
-                label: VIEW_LLMS_LABEL,
-                rightIconData: {
-                    iconSymbol: "new_window",
-                    iconSprite: "utility",
-                    iconColor: "gray-50"
-                }
-            },
-            {
-                id: OPTION_COPY_LLMS_URL,
-                label: COPY_LLMS_URL_LABEL,
-                tooltip: this.copyTooltipFor(OPTION_COPY_LLMS_URL),
-                rightIconData: {
-                    iconSymbol: "link",
-                    iconSprite: "utility",
-                    iconColor: "gray-50"
-                }
-            }
-        ];
+    get viewMarkdownButtonText(): string {
+        return VIEW_MARKDOWN_LABEL;
     }
 
-    // Tooltip for the split button's primary action (Copy as Markdown). Shares
-    // the copy-markdown flash state, so it flips to "Copied!" after a successful
-    // copy from either the primary button or the matching menu option.
-    get actionTooltip(): string {
-        return this.copyTooltipFor(OPTION_COPY_MARKDOWN);
-    }
-
-    // "Copied!" while this option is flashing, otherwise "Click to copy".
-    private copyTooltipFor(optionId: string): string {
-        return this.copiedOptionId === optionId
-            ? COPIED_TOOLTIP_LABEL
-            : DEFAULT_COPY_TOOLTIP_LABEL;
-    }
-
-    /** Routes a menu selection to the matching action handler. */
-    handleMenuSelect(event: CustomEvent) {
-        switch (event.detail) {
-            case OPTION_COPY_MARKDOWN:
-                this.handleCopyMarkdown(event);
-                break;
-            case OPTION_VIEW_MARKDOWN:
-                this.handleViewMarkdown(event);
-                break;
-            case OPTION_COPY_MARKDOWN_URL:
-                this.handleCopyUrl(event);
-                break;
-            case OPTION_VIEW_LLMS:
-                this.handleViewLlms(event);
-                break;
-            case OPTION_COPY_LLMS_URL:
-                this.handleCopyLlmsUrl(event);
-                break;
-            default:
-        }
+    get copyUrlButtonText(): string {
+        return COPY_URL_LABEL;
     }
 
     async handleCopyMarkdown(event: Event) {
@@ -190,7 +81,7 @@ export default class ContentActionToolbar extends LightningElement {
             }
             const markdown = await response.text();
             await navigator.clipboard.writeText(markdown);
-            this.flashCopied(OPTION_COPY_MARKDOWN);
+            this.flashCopied("copyMarkdownLabel");
         } catch (error) {
             console.error(error);
         }
@@ -225,55 +116,16 @@ export default class ContentActionToolbar extends LightningElement {
 
         try {
             await navigator.clipboard.writeText(this.markdownUrl);
-            this.flashCopied(OPTION_COPY_MARKDOWN_URL);
-        } catch (error) {
-            console.error(error);
-        }
-    }
-
-    handleViewLlms(event: Event) {
-        this.trackToolbarEvent(
-            event,
-            "custEv_linkClick",
-            VIEW_LLMS_LABEL,
-            this.llmsTxtUrl
-        );
-
-        window.open(this.llmsTxtUrl, "_blank", "noopener,noreferrer");
-    }
-
-    async handleCopyLlmsUrl(event: Event) {
-        this.trackToolbarEvent(
-            event,
-            "custEv_linkClick",
-            COPY_LLMS_URL_LABEL,
-            this.llmsTxtUrl
-        );
-
-        try {
-            await navigator.clipboard.writeText(this.llmsTxtUrl);
-            this.flashCopied(OPTION_COPY_LLMS_URL);
+            this.flashCopied("copyUrlLabel");
         } catch (error) {
             console.error(error);
         }
     }
 
-    // Flash the given copy option's tooltip to "Copied!" then revert.
-    private flashCopied(optionId: string) {
-        if (this.copyTooltipResetTimeout !== null) {
-            window.clearTimeout(this.copyTooltipResetTimeout);
-        }
-        this.copiedOptionId = optionId;
-        this.copyTooltipResetTimeout = window.setTimeout(() => {
-            this.copiedOptionId = null;
-            this.copyTooltipResetTimeout = null;
-        }, COPIED_TOOLTIP_RESET_MS);
-    }
-
     private trackToolbarEvent(
         event: Event,
         eventName: "custEv_linkClick",
-        label: ToolbarCtaLabel,
+        label: string,
         url: string
     ): void {
         track(event.currentTarget!, eventName, {
@@ -283,9 +135,21 @@ export default class ContentActionToolbar extends LightningElement {
             element_title: label,
             content_category: ANALYTICS_CONTENT_CATEGORY,
             // Source page the CTA was clicked from; `click_url` above is the
-            // destination. Uses the same `page_path` expression as the
+            // `.md` destination. Uses the same `page_path` expression as the
             // amfReference doc_page_view events.
             page_path: window.location.pathname + window.location.search
         });
     }
+
+    private flashCopied(labelKey: "copyMarkdownLabel" | "copyUrlLabel") {
+        if (this.copyTooltipResetTimeout !== null) {
+            window.clearTimeout(this.copyTooltipResetTimeout);
+        }
+        this[labelKey] = COPIED_TOOLTIP_LABEL;
+        this.copyTooltipResetTimeout = window.setTimeout(() => {
+            this.copyMarkdownLabel = DEFAULT_COPY_TOOLTIP_LABEL;
+            this.copyUrlLabel = DEFAULT_COPY_TOOLTIP_LABEL;
+            this.copyTooltipResetTimeout = null;
+        }, COPIED_TOOLTIP_RESET_MS);
+    }
 }

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

@@ -10,8 +10,8 @@ export const DUMMY_MARKDOWN_CONTENT = `# Dummy Markdown
 
 Storybook serves this placeholder content in place of the real markdown
 that the docs backend would return for the current page. It exists so
-the "Copy as Markdown" clipboard action, the "View as Markdown" new tab,
-and the "Copy URL to Markdown" clipboard behavior are all exercisable in
+the "Copied" tooltip, the "View as Markdown" new tab, and the
+"Copy URL to Markdown" clipboard behavior are all exercisable in
 storybook without hitting the live backend.
 
 - Item 1
@@ -19,30 +19,18 @@ storybook without hitting the live backend.
 - Item 3
 `;
 
-export const DUMMY_LLMS_CONTENT = `# Dummy llms.txt
-
-Storybook serves this placeholder in place of the site-root llms.txt so
-the "View llms.txt" new tab and "Copy URL to llms.txt" clipboard behavior
-are exercisable without hitting the live backend.
-`;
-
 export const DUMMY_MARKDOWN_DATA_URL = `data:text/markdown;charset=utf-8,${encodeURIComponent(
     DUMMY_MARKDOWN_CONTENT
 )}`;
 
-export const DUMMY_LLMS_DATA_URL = `data:text/plain;charset=utf-8,${encodeURIComponent(
-    DUMMY_LLMS_CONTENT
-)}`;
-
-/** Intercepts `.md` and `/llms.txt` GET requests and returns dummy content. */
+/** Intercepts any `.md` GET request and returns the dummy markdown. */
 export const contentActionToolbarMswHandlers = [
-    http.get(/\.md(\?.*)?$/, () => HttpResponse.text(DUMMY_MARKDOWN_CONTENT)),
-    http.get(/\/llms\.txt(\?.*)?$/, () => HttpResponse.text(DUMMY_LLMS_CONTENT))
+    http.get(/\.md(\?.*)?$/, () => HttpResponse.text(DUMMY_MARKDOWN_CONTENT))
 ];
 
 let windowOpenIntercepted = false;
 
-/** Redirects `window.open` calls for `.md` and `llms.txt` URLs to dummy data URLs (MSW does not cover new tabs). */
+/** Redirects `window.open` calls for `.md` URLs to the dummy markdown data URL (MSW does not cover new tabs). */
 export function interceptWindowOpenForContentActionToolbar() {
     if (windowOpenIntercepted) {
         return;
@@ -55,9 +43,6 @@ export function interceptWindowOpenForContentActionToolbar() {
         if (stringUrl.endsWith(".md")) {
             return originalOpen(DUMMY_MARKDOWN_DATA_URL, target, features);
         }
-        if (stringUrl.endsWith("llms.txt")) {
-            return originalOpen(DUMMY_LLMS_DATA_URL, target, features);
-        }
         return originalOpen(url ?? "", target, features);
     }) as typeof window.open;
 }

package/src/modules/doc/header/header.css

@@ -77,6 +77,12 @@ header:not(.has-brand) > .header_l2 {
     border-top: 1px solid var(--dx-g-gray-90);
 }
 
+@media (max-width: 1280px) {
+    .no-header-content {
+        border-top: 0;
+    }
+}
+
 @media (max-width: 768px) {
     .header_l2 {
         padding: 0;

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

@@ -1,7 +1,6 @@
 :host {
     --dx-footer-margin-top: 142px;
     --doc-c-redoc-sidebar-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
-            var(--dx-g-spacing-xl)
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
     );
 }

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

@@ -3,9 +3,12 @@ import { createElement, LightningElement, api } from "lwc";
 import DocPhase from "doc/phase";
 import DxFooter from "dx/footer";
 import DxIcon from "dx/icon";
+import SidebarFooterNav from "dx/sidebarFooterNav";
 import SprigSurvey from "doc/sprigSurvey";
 import { throttle } from "throttle-debounce";
 import { pollUntil } from "dxUtils/async";
+import { toJson } from "dxUtils/normalizers";
+import type { OptionWithLink } from "typings/custom";
 
 declare global {
     interface Window {
@@ -37,7 +40,10 @@ type ReferenceConfig = {
 const SCROLL_THROTTLE_DELAY = 50;
 const ELEMENT_TIMEOUT = 10000;
 const ELEMENT_CHECK_INTERVAL = 100;
-const REFERENCES_SEGMENT = "/references/";
+const DEFAULT_PROJECT_TITLE = "All Reference";
+const BACK_TARGET_STORAGE_KEY = "redoc-back-target";
+const DOCS_PATH_SEGMENT = "docs";
+const DEFAULT_LOCALE = "en-us";
 
 export default class RedocReference extends LightningElement {
     private _referenceConfig: ReferenceConfig = { refList: [] };
@@ -47,6 +53,7 @@ export default class RedocReference extends LightningElement {
     private docHeaderElement: Element | null = null;
     private docPhaseWrapperElement: Element | null = null;
     private lastSidebarTop = 0;
+    private _languages: OptionWithLink[] = [];
 
     /**
      * History length captured at mount (pre-Redoc), used by `onBackClick` to
@@ -91,19 +98,86 @@ export default class RedocReference extends LightningElement {
      * Project title (same value passed to `<doc-header>` as `subtitle`). Used
      * inside the Redoc-rendered UI to label the parent project.
      */
-    @api projectTitle: string | null = "All Reference";
+    @api
+    get projectTitle(): string | null {
+        return this.isDocContentType
+            ? this._projectTitle
+            : DEFAULT_PROJECT_TITLE;
+    }
+    set projectTitle(value: string | null) {
+        this._projectTitle = value;
+    }
+    private _projectTitle: string | null = null;
+
+    /**
+     * Href to navigate to when the back link is clicked AND there is no
+     * usable referrer (e.g. the user opened the page directly in a fresh
+     * tab).
+     */
+    @api headerHref: string | null = null;
+
+    @api
+    get contentType(): string {
+        return this._contentType;
+    }
+    set contentType(value: string) {
+        this._contentType = value;
+    }
+    private _contentType: string = "";
+
+    @api
+    get languages(): OptionWithLink[] {
+        return this._languages;
+    }
+    set languages(value: string | OptionWithLink[]) {
+        this._languages = toJson(value) || [];
+    }
+
+    @api language: string | null = null;
 
     get specTitle(): string | null {
         return this.getSelectedReference()?.title ?? null;
     }
 
+    get isDocContentType(): boolean {
+        return this.contentType === "docs";
+    }
+
+    get isReferenceContentType(): boolean {
+        return this.contentType === "references";
+    }
+
+    get isMultiSpecSet(): boolean {
+        const refCount = this.referenceConfig?.refList?.length ?? 0;
+        return refCount > 1;
+    }
+
+    // Reads stored back target
+    private getBackTargetFromSession(): string | null {
+        return sessionStorage.getItem(BACK_TARGET_STORAGE_KEY);
+    }
+
+    private setBackTargetInSession(href: string): void {
+        sessionStorage.setItem(BACK_TARGET_STORAGE_KEY, href);
+    }
+
+    /**
+     * when more than one localized spec is available
+     */
+    get hasLocalePicker(): boolean {
+        return this.languages.length > 1;
+    }
+
     /**
-     * Whether to show the project header (only for multi-spec reference sets).
+     * Whether to show the project header. Shown for multi-spec reference
+     * sets, and for any docs-content spec topic so it always has a back
+     * link.
      */
     get showRedocHeader(): boolean {
-        const refCount = this._referenceConfig?.refList?.length ?? 0;
-        const isMultiSpecSet = refCount > 1;
-        return isMultiSpecSet && !!(this.projectTitle || this.specTitle);
+        return (
+            (this.isReferenceContentType && this.isMultiSpecSet) ||
+            this.isDocContentType
+        );
     }
 
     /**
@@ -111,16 +185,68 @@ export default class RedocReference extends LightningElement {
      */
     private onBackClick = (event: Event): void => {
         event.preventDefault();
+
+        const target = this.getTranslatedBackTarget() ?? this.headerHref;
+
+        if (target) {
+            window.location.assign(target);
+        }
+    };
+
+    private getTranslatedBackTarget(): string | null {
+        const stored = this.getBackTargetFromSession();
+        if (stored) {
+            return this.language
+                ? this.translateToCurrentLocale(stored)
+                : stored;
+        }
+
+        const referrer = this.getSameOriginReferrerHref();
+        return referrer && !this.isLocaleHref(new URL(referrer).pathname)
+            ? referrer
+            : null;
+    }
+
+    /* The locale segment sits after "docs" for docs pages,
+     * and after the product segment for references.
+     */
+    private translateToCurrentLocale(storedHref: string): string {
+        const url = new URL(storedHref, window.location.origin);
+        const localeIds = this.languages.map((loc) => loc.id);
+        const segments = url.pathname.split("/").filter(Boolean);
+
+        // docs -> right after "docs"; references -> after the product segment.
+        const localeIndex = this.isDocContentType ? 1 : 2;
+
+        if (segments[0] === DOCS_PATH_SEGMENT) {
+            // Drop the existing locale segment, if any
+            if (localeIds.includes(segments[localeIndex])) {
+                segments.splice(localeIndex, 1);
+            }
+            // Add the current locale
+            if (this.language && this.language !== DEFAULT_LOCALE) {
+                segments.splice(localeIndex, 0, this.language);
+            }
+        }
+
+        url.pathname = "/" + segments.join("/");
+        return url.href;
+    }
+
+    // Preserves target across locale switches, updates on normal navigation
+    private trackBackTarget(): void {
         const referrerHref = this.getSameOriginReferrerHref();
-        if (referrerHref) {
-            window.location.href = referrerHref;
+        if (!referrerHref) {
             return;
         }
-        const fallbackHref = this.getReferencesRootHref();
-        if (fallbackHref) {
-            window.location.href = fallbackHref;
+
+        const referrerUrl = new URL(referrerHref);
+        if (this.isLocaleHref(referrerUrl.pathname)) {
+            return;
         }
-    };
+
+        this.setBackTargetInSession(referrerHref);
+    }
 
     /**
      * Returns the referrer URL when the page was reached via in-tab navigation
@@ -144,16 +270,16 @@ export default class RedocReference extends LightningElement {
     }
 
     /**
-     * Derives the project's `.../references` root from the current URL by
-     * trimming any trailing reference id (and deeper segments). Returns null
-     * when the URL doesn't contain a `/references` segment.
+     * switching locale on this same page.
      */
-    private getReferencesRootHref(): string | null {
-        const { pathname } = window.location;
-        const idx = pathname.lastIndexOf(REFERENCES_SEGMENT);
-        return idx === -1
-            ? null
-            : pathname.slice(0, idx + REFERENCES_SEGMENT.length);
+    private isLocaleHref(pathname: string): boolean {
+        return this.languages.some((locale) => {
+            const href = locale?.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. */
@@ -168,6 +294,9 @@ export default class RedocReference extends LightningElement {
         // so it reflects real in-tab navigation rather than Redoc's churn.
         this.initialHistoryLength = window.history.length;
 
+        // Track the back target, preserving it across locale switches
+        this.trackBackTarget();
+
         window.addEventListener("scroll", this.handleScrollAndResize);
         window.addEventListener("resize", this.handleScrollAndResize);
     }
@@ -394,7 +523,7 @@ export default class RedocReference extends LightningElement {
             this.appendFooterItems(apiContentDiv);
 
             // Inject the multi-spec project header into Redoc's left menu only.
-            this.insertProjectHeaderInMenu(redocContainer);
+            this.insertSidebarNav(redocContainer);
 
             // Wait for footer to be rendered before updating styles
             requestAnimationFrame(() => {
@@ -409,22 +538,46 @@ export default class RedocReference extends LightningElement {
     }
 
     /**
-     * Inserts the project header into Redoc for multi-spec reference sets.
+     * Inserts the project header and LNB footer into Redoc.
      */
-    private insertProjectHeaderInMenu(redocContainer: HTMLElement): void {
-        if (!this.showRedocHeader) {
-            return;
+    private insertSidebarNav(redocContainer: HTMLElement): void {
+        // Select the LNB and content area of Redoc and insert the requried header.
+        if (this.showRedocHeader) {
+            redocContainer
+                .querySelectorAll<HTMLElement>(".menu-content, .api-content")
+                .forEach((target) => {
+                    target.insertBefore(
+                        this.buildProjectHeaderDom(),
+                        target.firstChild
+                    );
+                });
         }
 
-        // Select the LNB and content area of Redoc and insert the requried header.
-        redocContainer
-            .querySelectorAll<HTMLElement>(".menu-content, .api-content")
-            .forEach((target) => {
-                target.insertBefore(
-                    this.buildProjectHeaderDom(),
-                    target.firstChild
-                );
-            });
+        // Locale picker
+        if (this.hasLocalePicker) {
+            const menuContent = redocContainer.querySelector(".menu-content");
+            menuContent?.appendChild(this.buildLocalePickerDom());
+        }
+    }
+
+    /**
+     * Builds the locale picker DOM by reusing `dx-sidebar-footer-nav`
+     */
+    private buildLocalePickerDom(): HTMLElement {
+        const wrapper = document.createElement("div");
+        wrapper.className = "redoc-footer-nav";
+
+        const picker = createElement("dx-sidebar-footer-nav", {
+            is: SidebarFooterNav
+        });
+
+        Object.assign(picker, {
+            languages: this.languages,
+            language: this.language
+        });
+        wrapper.appendChild(picker);
+
+        return wrapper;
     }
 
     /**

package/src/modules/doc/sprigSurvey/sprigSurvey.scoped.css

@@ -1,3 +1,9 @@
+@media screen and (max-width: 768px) {
+    :host {
+        display: block;
+    }
+}
+
 :host .survey-container {
     align-items: center;
     align-content: center;
@@ -7,6 +13,17 @@
     margin: 20px 0;
 }
 
+@media screen and (max-width: 768px) {
+    :host .survey-container {
+        flex-direction: column;
+        gap: var(--dx-g-spacing-md);
+    }
+
+    .text-container {
+        text-align: center;
+    }
+}
+
 dx-hr:first-of-type::part(hr) {
     margin-top: var(--dx-g-spacing-2xl);
 }

package/src/modules/doc/unifiedContentLayout/unifiedContentLayout.css

@@ -0,0 +1,19 @@
+:host {
+    display: block;
+}
+
+.content-type-docs doc-phase {
+    --doc-c-phase-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+            var(--dx-g-spacing-xl)
+    );
+}
+
+@media screen and (max-width: 768px) {
+    .content-type-docs doc-phase {
+        --doc-c-phase-top: calc(
+            var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+                40px
+        );
+    }
+}

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

@@ -0,0 +1,29 @@
+<template>
+    <doc-content-layout
+        class="content-type content-type-markdown content-type-docs"
+        breadcrumbs={breadcrumbs}
+        share-title={shareTitle}
+        share-twitter-via={twitterVia}
+        sidebar-header={sidebarHeader}
+        sidebar-value={sidebarValue}
+        sidebar-content={sidebarContent}
+        toc-title={tocTitle}
+        toc-options={tocOptions}
+        toc-aria-level={tocAriaLevel}
+        enable-slot-change="true"
+        languages={languages}
+        language={language}
+        show-footer={enableFooter}
+        show-content-action-toolbar={showContentActionToolbar}
+        origin={origin}
+        dev-center={devCenter}
+        brand={brand}
+    >
+        <doc-phase
+            slot="doc-phase"
+            lwc:if={docPhaseInfo}
+            doc-phase-info={docPhaseInfo}
+        ></doc-phase>
+        <slot></slot>
+    </doc-content-layout>
+</template>

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

@@ -0,0 +1,120 @@
+import { LightningElement, api } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+import type { OptionWithLink, TreeNode } from "typings/custom";
+
+/**
+ * Per-topic type emitted by the docs content-type parser
+ * (see @salesforcedevs/sfdocs-doc-framework: `TopicTypeEnum`). Only `spec`
+ * is meaningful inside this component; everything else renders as a plain
+ * markdown-style tile.
+ */
+const TOPIC_TYPE_SPEC = "spec";
+
+function findFirstContentDescendant(node: TreeNode): TreeNode | undefined {
+    for (const child of node.children ?? []) {
+        const isSpec =
+            (child as { topicType?: string }).topicType === TOPIC_TYPE_SPEC;
+        const isExternal = child.link?.target === "_blank";
+        if (isSpec || isExternal) {
+            continue;
+        }
+
+        if (child.link?.href) {
+            return child;
+        }
+
+        const descendant = findFirstContentDescendant(child);
+        if (descendant) {
+            return descendant;
+        }
+    }
+
+    return undefined;
+}
+
+/**
+ * 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 to their first content descendant.
+ */
+function decorateTopics(
+    topics: Array<TreeNode & { topicType?: string }> | undefined
+): TreeNode[] | undefined {
+    return topics?.map((topic) => {
+        const { topicType, ...decorated } = topic;
+        if (topicType === TOPIC_TYPE_SPEC) {
+            decorated.showForwardArrow = true;
+        }
+        if (decorated.children) {
+            decorated.children = decorateTopics(decorated.children);
+        }
+
+        // Redirect parent topics without their own content to their first
+        // available content descendant.
+        const isContentlessParent =
+            !!decorated.children?.length && !decorated.link?.href;
+
+        if (isContentlessParent) {
+            const firstContent = findFirstContentDescendant(topic);
+            if (firstContent?.link) {
+                decorated.link = { ...firstContent.link };
+            }
+        }
+
+        return decorated;
+    });
+}
+
+/**
+ * Wrapper around `doc-content-layout` for the "docs" content type emitted by
+ * the `DocsContentTypeParser`.
+ */
+export default class UnifiedContentLayout extends LightningElement {
+    @api breadcrumbs: string | null = null;
+    @api sidebarHeader?: string;
+    @api sidebarValue?: string;
+    @api tocTitle?: string;
+    @api tocOptions?: string;
+    @api tocAriaLevel?: string;
+    @api languages?: OptionWithLink[];
+    @api language?: string;
+    @api devCenter: any = null;
+    @api brand: any = null;
+    @api showContentActionToolbar = false;
+
+    /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). */
+    @api origin: string | null = null;
+
+    /** Article name from breadcrumbs, used as share title (e.g. for social share). */
+    @api shareTitle: string | null = null;
+
+    /** Optional Twitter "via" handle (e.g. SalesforceDevs) for social share. */
+    @api twitterVia: string | null = null;
+
+    @api hideFooter = false;
+
+    private _docPhaseInfo: string | null = null;
+    private _sidebarContent: unknown = null;
+
+    @api
+    get docPhaseInfo(): string | null {
+        return this._docPhaseInfo;
+    }
+
+    set docPhaseInfo(value: string | null) {
+        this._docPhaseInfo = value || null;
+    }
+
+    @api
+    get sidebarContent(): unknown {
+        return this._sidebarContent;
+    }
+
+    set sidebarContent(value: string) {
+        this._sidebarContent = decorateTopics(toJson(value)?.topics);
+    }
+
+    private get enableFooter(): boolean {
+        return !this.hideFooter;
+    }
+}