@salesforcedevs/dx-components 1.40.11 → 1.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.40.11",
+    "version": "1.41.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "5fe30fa8dd59e05dac6be5f8f91d22fe76254d8a"
+    "gitHead": "505fb7062378be9370bdb2dd44f66b5b327b3665"
 }

package/src/modules/dx/filterMenu/filterMenu.css

@@ -132,3 +132,22 @@ svg,
     display: inline-block;
     content: "(.\00a0\00a0)";
 }
+
+.single-option {
+    display: block;
+    width: 100%;
+    padding: 6px 0;
+    text-align: left;
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    color: rgb(24 24 24);
+}
+
+.single-option:hover,
+.single-option-selected {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.single-option-selected {
+    font-weight: bold;
+}

package/src/modules/dx/filterMenu/filterMenu.html

@@ -1,7 +1,7 @@
 <template>
     <form class="container">
         <span class="title-group-main title-group" onclick={dropdownToggle}>
-            <p class="filter-menu-title">{header}</p>
+            <p class="filter-menu-title">{displayTitle}</p>
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="28"
@@ -18,7 +18,22 @@
         </span>
         <ul class="nested first-layer always-visible-scrollbar">
             <li>
-                <template if:true={isBaseVariant}>
+                <template if:true={singleSelect}>
+                    <template for:each={singleOptions} for:item="option">
+                        <button
+                            key={option.id}
+                            type="button"
+                            class={option.className}
+                            role="option"
+                            aria-selected={option.selected}
+                            data-id={option.id}
+                            onclick={onSingleSelect}
+                        >
+                            {option.name}
+                        </button>
+                    </template>
+                </template>
+                <template if:true={isCheckboxList}>
                     <template for:each={filterMenuOptions} for:item="option">
                         <dx-checkbox
                             key={option.id}

package/src/modules/dx/filterMenu/filterMenu.ts

@@ -11,6 +11,10 @@ export default class FilterMenu extends LightningElement {
     @api header: string = "Filter Menu";
     @api variant: string = "base";
     @api filtersDatesLoading?: boolean;
+    /** Render a single-choice list; the header shows the selected option. */
+    @api singleSelect: boolean = false;
+    /** Id of the selected option when singleSelect is set. */
+    @api value?: string;
 
     @api
     get options(): Option[] {
@@ -31,6 +35,31 @@ export default class FilterMenu extends LightningElement {
         return this.variant === "nested";
     }
 
+    get isCheckboxList() {
+        return this.isBaseVariant && !this.singleSelect;
+    }
+
+    get selectedOption() {
+        return this.options.find((o) => String(o.id) === this.value);
+    }
+
+    get displayTitle() {
+        return (this.singleSelect && this.selectedOption?.name) || this.header;
+    }
+
+    get singleOptions() {
+        return this.options.map((o) => {
+            const selected = String(o.id) === this.value;
+            return {
+                ...o,
+                selected,
+                className: selected
+                    ? "single-option single-option-selected"
+                    : "single-option"
+            };
+        });
+    }
+
     get showViewMoreBtn() {
         return this.options.length > 20;
     }
@@ -93,6 +122,20 @@ export default class FilterMenu extends LightningElement {
         this.showMore = !this.showMore;
     }
 
+    private onSingleSelect(e: any) {
+        const id = e.currentTarget.dataset.id;
+        const value = this.options.find((o) => String(o.id) === id);
+        this.template.querySelector(".nested")?.classList.remove("active");
+        this.template
+            .querySelector(".header-caret")
+            ?.classList.remove("caret-down");
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: { name: this.name, value, checked: true }
+            })
+        );
+    }
+
     private onChange(e: any) {
         const { checked, value } = e.detail;
         this.dispatchEvent(

package/src/modules/dx/searchHybrid/searchHybrid.css

@@ -1,3 +1,5 @@
+@import "dxHelpers/text";
+
 :host {
     display: block;
     font-family: var(--dx-g-font-sans);
@@ -42,56 +44,68 @@
     margin-top: var(--dx-g-spacing-md);
 }
 
-/* Body + toolbar ------------------------------------------------------- */
+/* Body --------------------------------------------------------------- */
 .dx-search-body {
     margin: 0 auto;
     max-width: 1200px;
     padding: var(--dx-g-spacing-xl);
 }
 
-.dx-search-toolbar {
+.dx-search-layout {
     display: flex;
-    flex-wrap: wrap;
-    align-items: flex-end;
-    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-2xl);
+}
+
+.dx-search-filters {
+    flex: 0 0 280px;
+    display: flex;
+    flex-direction: column;
     gap: var(--dx-g-spacing-md);
-    margin-bottom: var(--dx-g-spacing-lg);
 }
 
-.dx-facet-row {
+.dx-filter-header {
     display: flex;
-    flex-wrap: wrap;
-    gap: var(--dx-g-spacing-sm);
+    justify-content: space-between;
+    align-items: baseline;
 }
 
-.dx-facet-chip {
-    background-color: white;
-    color: var(--dx-g-blue-vibrant-20);
-    border: 1px solid var(--dx-g-blue-vibrant-50);
-    border-radius: 500px;
-    padding: 6px 14px;
+.dx-filter-title {
+    margin: 0;
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+}
+
+.dx-filter-clear {
+    color: var(--dx-g-blue-vibrant-50);
+    font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
-    cursor: pointer;
 }
 
-.dx-facet-chip:hover {
-    background-color: var(--dx-g-blue-vibrant-95);
+.dx-filter-clear:disabled {
+    opacity: 0.4;
+    cursor: default;
 }
 
-.dx-facet-chip_active {
-    background-color: var(--dx-g-blue-vibrant-50);
-    color: white;
-    font-weight: var(--dx-g-font-demi);
+.dx-search-range {
+    margin: 0 0 var(--dx-g-spacing-lg);
 }
 
-.dx-facet-chip-count {
-    margin-left: 6px;
-    opacity: 0.75;
+.dx-search-main {
+    flex: 1 1 0;
+    min-width: 0;
 }
 
-.dx-search-controls {
-    display: flex;
-    gap: var(--dx-g-spacing-md);
+@media (max-width: 768px) {
+    .dx-search-layout {
+        flex-direction: column;
+    }
+
+    .dx-search-filters {
+        flex-basis: auto;
+        width: 100%;
+    }
 }
 
 /* Status states -------------------------------------------------------- */
@@ -113,49 +127,30 @@
 }
 
 .dx-result {
-    background: white;
-    border-radius: 16px;
-    border: 1px solid rgb(24 24 24 / 4%);
-    box-shadow: 0 0 2px 0 rgb(24 24 24 / 8%), 0 2px 4px 1px rgb(24 24 24 / 16%);
-    padding: 20px;
-    margin-bottom: var(--dx-g-spacing-lg);
-}
-
-.dx-result-info {
     display: flex;
-    gap: 12px;
-    margin-bottom: var(--dx-g-spacing-smd);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-smd);
+    border-bottom: 1px solid var(--sds-g-gray-4);
+    padding-bottom: var(--dx-g-spacing-xl);
+    margin-bottom: var(--dx-g-spacing-xl);
 }
 
-.dx-badge {
-    display: inline-flex;
-    align-items: center;
-    border-radius: 4px;
-    padding: 2px 8px;
-    font-size: var(--dx-g-text-xs);
-    background-color: var(--dx-g-blue-vibrant-95);
-    color: var(--dx-g-blue-vibrant-20);
-}
-
-.dx-result-title {
-    color: var(--dx-g-blue-vibrant-20);
-    display: block;
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-lg);
-    margin: 0 0 var(--dx-g-spacing-sm);
+.dx-result-title:hover {
+    --dx-c-card-title-color: var(--dx-g-blue-vibrant-40);
 }
 
 .dx-result-date {
-    color: #555;
-    font-size: var(--dx-g-text-xs);
-    margin: 0 0 var(--dx-g-spacing-xs);
+    margin: 0;
+    text-align: start;
 }
 
 .dx-result-excerpt {
-    color: var(--dx-g-gray-10);
-    font-size: 14px;
-    line-height: 20px;
     margin: 0;
+    display: box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 }
 
 /* Pagination ----------------------------------------------------------- */

package/src/modules/dx/searchHybrid/searchHybrid.html

@@ -12,133 +12,154 @@
         </div>
 
         <div class="dx-search-body">
-            <!-- Toolbar: content-type facets + sort + locale selector -->
-            <div class="dx-search-toolbar">
-                <div
-                    if:true={hasFacets}
-                    class="dx-facet-row"
-                    role="group"
-                    aria-label="Filter by content type"
-                >
-                    <template for:each={facetChips} for:item="chip">
+            <div class="dx-search-layout">
+                <!-- Sidebar: content-type filter + language (like content archive) -->
+                <aside class="dx-search-filters" aria-label="Search filters">
+                    <div class="dx-filter-header">
+                        <p class="dx-filter-title">Filters</p>
                         <button
-                            key={chip.value}
                             type="button"
-                            class={chip.cssClass}
-                            data-value={chip.value}
-                            aria-pressed={chip.active}
-                            onclick={handleFacetClick}
+                            class="dx-filter-clear"
+                            disabled={noActiveFilters}
+                            onclick={handleClearFilters}
                         >
-                            {chip.label}
-                            <span class="dx-facet-chip-count">
-                                {chip.count}
-                            </span>
+                            Clear all
                         </button>
-                    </template>
-                </div>
-
-                <div class="dx-search-controls">
-                    <div if:true={showLocaleSelector} class="dx-search-locale">
-                        <dx-select
-                            label="Language"
-                            options={localeSelectOptions}
-                            value={localeValue}
-                            onchange={handleLocaleChange}
-                        ></dx-select>
                     </div>
-                    <div class="dx-search-sort">
-                        <dx-select
-                            label="Sort by"
-                            options={sortOptions}
-                            value={sortValue}
-                            onchange={handleSortChange}
-                        ></dx-select>
-                    </div>
-                </div>
-            </div>
+                    <dx-filter-menu
+                        if:true={hasFacets}
+                        class="dx-filter-type"
+                        name="contentType"
+                        header="Content Type"
+                        single-select
+                        options={typeFilterOptions}
+                        value={selectedTypeValue}
+                        onchange={handleTypeFilterChange}
+                    ></dx-filter-menu>
+                    <dx-filter-menu
+                        if:true={showLocaleSelector}
+                        class="dx-filter-locale"
+                        name="language"
+                        header="Language"
+                        single-select
+                        options={localeFilterOptions}
+                        value={localeValue}
+                        onchange={handleLocaleChange}
+                    ></dx-filter-menu>
+                </aside>
 
-            <!-- Loading -->
-            <template if:true={isLoading}>
-                <div class="dx-search-status" aria-live="polite">
-                    <dx-spinner size="medium" variant="base"></dx-spinner>
-                </div>
-            </template>
+                <div class="dx-search-main">
+                    <p
+                        if:true={showRange}
+                        class="dx-search-range dx-text-body-2"
+                        aria-live="polite"
+                    >
+                        Showing {rangeStart} - {rangeEnd} of {total}
+                    </p>
+                    <!-- Loading -->
+                    <template if:true={isLoading}>
+                        <div class="dx-search-status" aria-live="polite">
+                            <dx-spinner
+                                size="medium"
+                                variant="base"
+                            ></dx-spinner>
+                        </div>
+                    </template>
 
-            <!-- Idle prompt (no query yet) -->
-            <template if:true={isIdle}>
-                <div class="dx-search-status" aria-live="polite">
-                    <dx-empty-state
-                        header="Search the developer site"
-                        subtitle="Enter a search term to get started."
-                        variant="alt"
-                    ></dx-empty-state>
-                </div>
-            </template>
+                    <!-- Idle prompt (no query yet) -->
+                    <template if:true={isIdle}>
+                        <div class="dx-search-status" aria-live="polite">
+                            <dx-empty-state
+                                header="Search the developer site"
+                                subtitle="Enter a search term to get started."
+                                variant="alt"
+                            ></dx-empty-state>
+                        </div>
+                    </template>
 
-            <!-- Empty (query ran, no results) -->
-            <template if:true={isEmpty}>
-                <div class="dx-search-status" aria-live="polite">
-                    <dx-empty-state
-                        header="No results found"
-                        subtitle="Try different keywords or check your spelling."
-                        variant="alt"
-                    ></dx-empty-state>
-                </div>
-            </template>
+                    <!-- Empty (query ran, no results) -->
+                    <template if:true={isEmpty}>
+                        <div class="dx-search-status" aria-live="polite">
+                            <dx-empty-state
+                                header="No results found"
+                                subtitle="Try different keywords or check your spelling."
+                                variant="alt"
+                            ></dx-empty-state>
+                        </div>
+                    </template>
 
-            <!-- Error -->
-            <template if:true={isError}>
-                <div class="dx-search-status dx-search-error" role="alert">
-                    <p>{errorMessage}</p>
-                </div>
-            </template>
+                    <!-- Error -->
+                    <template if:true={isError}>
+                        <div
+                            class="dx-search-status dx-search-error"
+                            role="alert"
+                        >
+                            <p>{errorMessage}</p>
+                        </div>
+                    </template>
 
-            <!-- Results -->
-            <template if:true={hasResults}>
-                <ul class="dx-result-list">
-                    <template for:each={displayResults} for:item="result">
-                        <li key={result.key} class="dx-result">
-                            <div
-                                if:true={result.hasBadge}
-                                class="dx-result-info"
+                    <!-- Results -->
+                    <template if:true={hasResults}>
+                        <ul class="dx-result-list">
+                            <template
+                                for:each={displayResults}
+                                for:item="result"
                             >
-                                <span class="dx-badge">
-                                    {result.contentTypeLabel}
-                                </span>
-                            </div>
-                            <a href={result.href} class="dx-result-title">
-                                {result.title}
-                            </a>
-                            <p if:true={result.hasDate} class="dx-result-date">
-                                {result.displayDate}
-                            </p>
-                            <!-- Highlighted snippet (P4.5): innerHTML set in
+                                <li key={result.key} class="dx-result">
+                                    <dx-type-badge
+                                        if:true={result.hasBadge}
+                                        class="dx-result-badge"
+                                        variant={result.contentType}
+                                        value={result.contentTypeLabel}
+                                        size="small"
+                                    ></dx-type-badge>
+                                    <dx-card-title
+                                        class="dx-result-title"
+                                        href={result.href}
+                                        header={result.title}
+                                    ></dx-card-title>
+                                    <p
+                                        if:true={result.hasDate}
+                                        class="dx-result-date dx-text-label-1-dark"
+                                    >
+                                        {result.displayDate}
+                                    </p>
+                                    <!-- Highlighted snippet (P4.5): innerHTML set in
                                  renderedCallback, keyed by data-snippet-key. -->
-                            <template lwc:if={result.hasSnippetHtml}>
-                                <p
-                                    class="dx-result-excerpt"
-                                    data-snippet-key={result.key}
-                                    lwc:dom="manual"
-                                ></p>
+                                    <template lwc:if={result.hasSnippetHtml}>
+                                        <p
+                                            class="dx-result-excerpt dx-text-body-2"
+                                            data-snippet-key={result.key}
+                                            lwc:dom="manual"
+                                        ></p>
+                                    </template>
+                                    <template
+                                        lwc:elseif={result.hasDescription}
+                                    >
+                                        <p
+                                            class="dx-result-excerpt dx-text-body-2"
+                                        >
+                                            {result.description}
+                                        </p>
+                                    </template>
+                                </li>
                             </template>
-                            <template lwc:elseif={result.hasDescription}>
-                                <p class="dx-result-excerpt">
-                                    {result.description}
-                                </p>
-                            </template>
-                        </li>
-                    </template>
-                </ul>
+                        </ul>
 
-                <div if:true={showPagination} class="dx-pagination-container">
-                    <dx-pagination
-                        current-page={currentPage}
-                        total-pages={totalPages}
-                        pages-to-show="5"
-                        onpagechange={handlePageChange}
-                    ></dx-pagination>
+                        <div
+                            if:true={showPagination}
+                            class="dx-pagination-container"
+                        >
+                            <dx-pagination
+                                current-page={currentPage}
+                                total-pages={totalPages}
+                                pages-to-show="5"
+                                onpagechange={handlePageChange}
+                            ></dx-pagination>
+                        </div>
+                    </template>
                 </div>
-            </template>
+            </div>
         </div>
     </div>
 </template>

package/src/modules/dx/searchHybrid/searchHybrid.mock.ts

@@ -0,0 +1,244 @@
+/**
+ * Sample /api/search response for the "apex" query, used by the WithResults
+ * story. Shared fields are filled in by `row()`. The two blog rows are
+ * invented so the "blog" filter has something to show; the facet counts are
+ * from the real response.
+ */
+const DEV = "https://developer.salesforce.com/";
+const G = "Apex Developer Guide";
+
+interface Row {
+    url: string;
+    title: string;
+    description?: string;
+    contentType?: string;
+    lastmod?: string | null;
+    matchType?: string;
+    sectionTitle?: string | null;
+    sectionHash?: string | null;
+    snippet: string;
+    snippetSource?: string;
+}
+
+const row = (r: Row, i: number) => ({
+    url: r.url,
+    title: r.title,
+    description: r.description ?? G,
+    locale: "en-us",
+    site: "developer",
+    contentType: r.contentType ?? "docs",
+    lastmod: r.lastmod ?? null,
+    score: 2 - i * 0.04,
+    lexScore: 18,
+    semScore: 0.45,
+    matchType: r.matchType ?? "hybrid",
+    sectionUrl: r.sectionHash ? `${r.url}#${r.sectionHash}` : null,
+    sectionTitle: r.sectionTitle ?? null,
+    snippet: r.snippet,
+    snippetSource: r.snippetSource ?? "headline"
+});
+
+const APEX = `${DEV}docs/platform/apex-dev/references/apex-dev/`;
+const REF = `${DEV}docs/platform/apex-ref/references`;
+const CLI = `${DEV}docs/platform/salesforce-cli-reference/guide/`;
+
+const ROWS: Row[] = [
+    {
+        url: `${APEX}apex-intro.html`,
+        title: `Introducing Apex | ${G}`,
+        snippet:
+            "Introducing <b>Apex</b> | <b>Apex</b> Developer Guide\n\nof hosting server code, such as Java or .NET, in a secure and robust environment. What is <b>Apex</b>?"
+    },
+    {
+        url: `${APEX}apex-intro-what-is-apex.html`,
+        title: `What is Apex? | ${G}`,
+        snippet: "What is <b>Apex</b>?"
+    },
+    {
+        url: `${APEX}connectapi-overview.html`,
+        title: `Connect in Apex | ${G}`,
+        snippet:
+            "Connect in <b>Apex</b> | <b>Apex</b> Developer Guide\n\nConnect in <b>Apex</b> Use Connect in <b>Apex</b> to develop custom experiences in Salesforce."
+    },
+    {
+        url: `${CLI}cli_reference_apex_run.html`,
+        title: "apex run | apex Commands",
+        description:
+            "Execute anonymous Apex code entered on the command line or from a local file.",
+        matchType: "lexical",
+        snippet:
+            "<b>apex</b> run | <b>apex</b> Commands\n\n<b>apex</b> run Execute anonymous <b>Apex</b> code entered on the command line or from a local file."
+    },
+    {
+        url: `${DEV}docs/platform/salesforce-slack-sdk/guide/apex_ref.html`,
+        title: "Apex | Apex SDK for Slack (Beta)",
+        description: "Use Apex classes in the",
+        matchType: "lexical",
+        snippet:
+            "<b>Apex</b> | <b>Apex</b> SDK for Slack (Beta)\n\nk.ActionDispatcher Commands: Slack.SlashCommandDispatcher Events: Slack.EventDispatcher Shortcuts: Slack.ShortcutDispatcher To determine which classes and methods you"
+    },
+    {
+        url: `${DEV}developer-centers/apex`,
+        title: "Apex",
+        description:
+            "Explore the developer resources for Apex to write server-side logic with classes, triggers, and services.",
+        contentType: "page",
+        lastmod: "2026-10-09T20:57:17.000Z",
+        matchType: "lexical",
+        snippet:
+            "Read more Developer Guide Debug, Test, and Deploy <b>Apex</b> Develop your <b>Apex</b> code in a sandbox, debug it, unit-test it"
+    },
+    {
+        url: `${APEX}apex-dev-guide.html`,
+        title: `Apex Developer Guide | ${G}`,
+        snippet:
+            "<b>Apex</b> Developer Guide | <b>Apex</b> Developer Guide\n\nthe Salesforce Release Notes to learn about the most recent updates and changes to <b>Apex</b>."
+    },
+    {
+        url: APEX.slice(0, -1),
+        title: `Apex Developer Guide | ${G}`,
+        snippet:
+            "<b>Apex</b> Developer Guide | <b>Apex</b> Developer Guide\n\nthe Salesforce Release Notes to learn about the most recent updates and changes to <b>Apex</b>."
+    },
+    {
+        url: `${DEV}docs/platform/apex-dev`,
+        title: `Apex Developer Guide | ${G}`,
+        snippet:
+            "You can run <b>Apex</b> code using a variety of mechanisms. <b>Apex</b> code runs in atomic transactions."
+    },
+    {
+        url: `${CLI}cli_reference_apex_run_test.html`,
+        title: "apex run test | apex Commands",
+        description: "Invoke Apex tests in an org.",
+        matchType: "lexical",
+        sectionHash: "aliases-for-apex-run-test",
+        sectionTitle: "Aliases for apex run test",
+        snippet:
+            "<b>apex</b> run test | <b>apex</b> Commands — Aliases for <b>apex</b> run test\n\nd if the target-org configuration variable is already set."
+    },
+    {
+        url: `${APEX}apex-intro-learning-apex.html`,
+        title: `Learning Apex | ${G}`,
+        matchType: "lexical",
+        sectionHash: "in-this-guide-apex-developer-guide",
+        sectionTitle: "In This Guide (Apex Developer Guide)",
+        snippet:
+            "Learning <b>Apex</b> | <b>Apex</b> Developer Guide — In This Guide (<b>Apex</b> Developer Guide)\n\nIn This Guide (<b>Apex</b> Developer Guide) Beginning programmers can look at the following: Introducing <b>Apex</b> , and in particular:"
+    },
+    {
+        url: `${APEX}apex-running.html`,
+        title: `Running Apex | ${G}`,
+        matchType: "lexical",
+        snippet:
+            "Running <b>Apex</b> | <b>Apex</b> Developer Guide\n\nRunning <b>Apex</b> You can access many features of the Salesforce user interface programmatically in <b>Apex</b>, and you can integrate with external SOAP and REST Web services."
+    },
+    {
+        url: `${APEX}apex-testing.html`,
+        title: `Testing Apex | ${G}`,
+        matchType: "lexical",
+        snippet:
+            "Testing <b>Apex</b> | <b>Apex</b> Developer Guide\n\ne tests. You can use it to test classes in isolation, which is important for unit testing."
+    },
+    {
+        url: `${APEX}apex-scheduler.html`,
+        title: `Apex Scheduler | ${G}`,
+        matchType: "lexical",
+        sectionHash: "implementing-the-schedulable-interface",
+        sectionTitle: "Implementing the Schedulable Interface",
+        snippet:
+            "<b>Apex</b> Scheduler | <b>Apex</b> Developer Guide — Implementing the Schedulable Interface\n\nImplementing the Schedulable Interface To schedule an <b>Apex</b> class to run at regular intervals, first write an <b>Apex</b> class that"
+    },
+    {
+        url: `${DEV}docs/platform/apex-ref/references/apex-ref`,
+        title: "Apex Reference Guide",
+        description: "Apex Reference Guide",
+        lastmod: "2026-11-03T01:09:58.000Z",
+        matchType: "semantic",
+        snippet: "Apex Reference Guide",
+        snippetSource: "description"
+    },
+    {
+        url: `${REF}/apex-ref/apex-ref-guide.html`,
+        title: "Apex Reference Guide",
+        description: "Apex Reference Guide",
+        lastmod: "2026-11-03T01:10:03.000Z",
+        matchType: "semantic",
+        snippet: "Apex Reference Guide",
+        snippetSource: "description"
+    },
+    {
+        url: `${REF}/apex-ref/v68.0`,
+        title: "Apex Reference Guide",
+        description: "Apex Reference Guide",
+        lastmod: "2026-11-03T01:10:03.000Z",
+        matchType: "semantic",
+        snippet: "Apex Reference Guide",
+        snippetSource: "description"
+    },
+    {
+        url: REF,
+        title: "Apex Reference Guide",
+        description: "Apex Reference Guide",
+        lastmod: "2026-11-03T01:10:03.000Z",
+        matchType: "semantic",
+        snippet: "Apex Reference Guide",
+        snippetSource: "description"
+    },
+    {
+        url: `${DEV}docs/industries/industries-common-dev/guide/omnistudio-apex-reference.html`,
+        title: "Omnistudio Apex Reference | Industries Common Resources | Industries Common Resources Developer Guide",
+        description:
+            "Apex is a strongly typed, object-oriented programming language that allows developers to execute flow and transaction control statements on the Salesf",
+        matchType: "semantic",
+        snippet:
+            "Apex is a strongly typed, object-oriented programming language that allows developers to execute flow and transaction control statements on the Salesf",
+        snippetSource: "description"
+    },
+    // Invented sample rows so the "blog" filter has results to show.
+    {
+        url: `${DEV}blogs/2026/09/apex-cursors-in-practice`,
+        title: "Apex Cursors in Practice",
+        description: "How to process large result sets with Apex cursors.",
+        contentType: "blog",
+        lastmod: "2026-09-18T00:00:00.000Z",
+        snippet: "Process large result sets with <b>Apex</b> cursors."
+    },
+    {
+        url: `${DEV}blogs/2026/06/apex-testing-tips`,
+        title: "Five Apex Testing Tips",
+        description: "Write faster, more reliable Apex tests.",
+        contentType: "blog",
+        lastmod: "2026-06-02T00:00:00.000Z",
+        snippet: "Write faster, more reliable <b>Apex</b> tests."
+    }
+];
+
+const ALL = ROWS.map(row);
+
+/**
+ * Builds the response the stub returns, honouring the `type` filter and `lang`
+ * query params so the sidebar filters work in Storybook. Facet counts always
+ * reflect the full result set (disjunctive facets), as the real API does.
+ */
+export function mockSearchResponse(params: URLSearchParams) {
+    const type = params.get("type");
+    const results = type ? ALL.filter((r) => r.contentType === type) : ALL;
+    return {
+        query: params.get("q") ?? "apex",
+        locale: params.get("lang") ?? "en-us",
+        site: null,
+        sort: params.get("sort") ?? "relevance",
+        limit: 20,
+        offset: 0,
+        total: type ? results.length : 59,
+        count: results.length,
+        facets: {
+            contentType: [
+                { value: "docs", count: 56 },
+                { value: "blog", count: 2 },
+                { value: "page", count: 1 }
+            ]
+        },
+        results
+    };
+}

package/src/modules/dx/searchHybrid/searchHybrid.ts

@@ -7,11 +7,8 @@ import type { LocaleOption } from "docUtils/searchLocale";
 import {
     decodeHtmlEntities,
     highlightedSnippetHtml,
-    isSortOption,
     resultHref,
-    SORT_OPTIONS,
-    type SearchResult,
-    type SortOption
+    type SearchResult
 } from "docUtils/searchClient";
 import { searchLocalePrefs } from "dxUtils/searchLocalePrefs";
 import { track as trackGTM } from "dxUtils/analytics";
@@ -23,11 +20,19 @@ import { parseSupportedLocales } from "docUtils/searchLocale";
 // are ingested under this site value).
 const DX_SITE = "developer";
 
-const SORT_LABELS: Record<SortOption, string> = {
-    relevance: "Relevance",
-    date: "Most recent"
+// The search backend labels developer docs "docs"; the badge and label
+// constants know them as "documentation". Filtering still sends the raw value.
+const CONTENT_TYPE_ALIASES: Record<string, string> = {
+    docs: "documentation",
+    page: "website"
 };
 
+function normalizeContentType(contentType: string | null): string | null {
+    return contentType != null
+        ? CONTENT_TYPE_ALIASES[contentType] ?? contentType
+        : null;
+}
+
 interface DisplayResult {
     key: string;
     url: string;
@@ -42,6 +47,7 @@ interface DisplayResult {
     // text path renders exactly as before.
     snippetHtml: string | null;
     hasSnippetHtml: boolean;
+    contentType: string | null;
     contentTypeLabel: string | null;
     hasBadge: boolean;
     displayDate: string;
@@ -56,7 +62,7 @@ interface FacetChip {
     cssClass: string;
 }
 
-interface SortSelectOption {
+interface SelectOption {
     value: string;
     label: string;
 }
@@ -162,7 +168,8 @@ export default class SearchHybrid extends LightningElement {
                 r.description != null && r.description !== ""
                     ? decodeHtmlEntities(r.description)
                     : null;
-            const label = this.contentTypeLabel(r.contentType);
+            const contentType = normalizeContentType(r.contentType);
+            const label = this.contentTypeLabel(contentType);
             const displayDate = this.formatDate(r.lastmod);
             // Prefer the highlighted snippet (headline source only); otherwise
             // null → the description text path below renders unchanged.
@@ -176,6 +183,7 @@ export default class SearchHybrid extends LightningElement {
                 hasDescription: description !== null,
                 snippetHtml,
                 hasSnippetHtml: snippetHtml !== null,
+                contentType,
                 contentTypeLabel: label,
                 hasBadge: label !== null,
                 displayDate,
@@ -240,8 +248,9 @@ export default class SearchHybrid extends LightningElement {
         if (contentType == null || contentType === "") {
             return null;
         }
+        const normalized = normalizeContentType(contentType) as string;
         const labels = CONTENT_TYPE_LABELS as Record<string, string>;
-        return labels[contentType] ?? contentType;
+        return labels[normalized] ?? contentType;
     }
 
     // ---- content-type facet chips (disjunctive) ---------------------------
@@ -269,24 +278,51 @@ export default class SearchHybrid extends LightningElement {
         return this.facetChips.length > 0;
     }
 
-    // ---- sort + locale select options -------------------------------------
-
-    get sortOptions(): SortSelectOption[] {
-        return SORT_OPTIONS.map((value) => ({
-            value,
-            label: SORT_LABELS[value]
+    /** Options for the sidebar dx-filter-menu (single-select by content type, sent to the API as `type`). */
+    get typeFilterOptions(): Array<{
+        id: string;
+        name: string;
+        value: string;
+    }> {
+        return this.facetChips.map((chip) => ({
+            id: chip.value,
+            name: `${chip.label} (${chip.count})`,
+            value: chip.value
         }));
     }
 
-    get sortValue(): string {
-        return this.vm?.sort ?? "relevance";
+    get selectedTypeValue(): string {
+        return this.vm?.selectedType ?? "";
+    }
+
+    get hasActiveType(): boolean {
+        return !!this.vm?.selectedType;
+    }
+
+    get noActiveFilters(): boolean {
+        return !this.hasActiveType && this.localeValue === this.defaultLanguage;
+    }
+
+    get showRange(): boolean {
+        return this.hasResults && this.total > 0;
+    }
+
+    get rangeStart(): number {
+        return ((this.vm?.page ?? 1) - 1) * (this.vm?.limit ?? 10) + 1;
+    }
+
+    get rangeEnd(): number {
+        const limit = this.vm?.limit ?? 10;
+        return Math.min(this.rangeStart + limit - 1, this.total);
     }
 
+    // ---- locale select options -------------------------------------
+
     get showLocaleSelector(): boolean {
         return this.controller?.showLocaleSelector ?? false;
     }
 
-    get localeSelectOptions(): SortSelectOption[] {
+    get localeSelectOptions(): SelectOption[] {
         const options = this.controller?.localeOptions ?? [];
         return options.map((l: LocaleOption) => ({
             value: l.id,
@@ -294,6 +330,13 @@ export default class SearchHybrid extends LightningElement {
         }));
     }
 
+    get localeFilterOptions(): Array<{ id: string; name: string }> {
+        return this.localeSelectOptions.map((o) => ({
+            id: o.value,
+            name: o.label
+        }));
+    }
+
     get localeValue(): string {
         return this.vm?.locale ?? this.defaultLanguage;
     }
@@ -314,17 +357,29 @@ export default class SearchHybrid extends LightningElement {
 
     // ---- event handlers ---------------------------------------------------
 
-    handleSortChange(event: CustomEvent<{ value: string }>): void {
-        const value = event.detail?.value;
-        if (isSortOption(value)) {
-            this.controller?.setSort(value);
+    handleLocaleChange(event: CustomEvent<{ value?: { id?: string } }>): void {
+        const value = event.detail?.value?.id;
+        if (value) {
+            this.controller?.setLanguage(value);
         }
     }
 
-    handleLocaleChange(event: CustomEvent<{ value: string }>): void {
-        const value = event.detail?.value;
+    handleTypeFilterChange(
+        event: CustomEvent<{ value?: { value?: string } }>
+    ): void {
+        const value = event.detail?.value?.value;
         if (value) {
-            this.controller?.setLanguage(value);
+            // Disjunctive toggle: the controller clears it if already active.
+            this.controller?.setType(value);
+        }
+    }
+
+    handleClearFilters(): void {
+        if (this.hasActiveType) {
+            this.controller?.setType(null);
+        }
+        if (this.localeValue !== this.defaultLanguage) {
+            this.controller?.setLanguage(this.defaultLanguage);
         }
     }