@internetarchive/collection-browser 3.3.4-alpha-webdev7761.0 → 3.3.4-alpha-webdev7761.2

package/dist/src/collection-browser.js

@@ -23,7 +23,7 @@ import './manage/manage-bar';
 import './collection-facets';
 import './circular-activity-indicator';
 import './collection-facets/smart-facets/smart-facet-bar';
-import { mergeSelectedFacets, updateSelectedFacetBucket, } from './utils/facet-utils';
+import { updateSelectedFacetBucket, } from './utils/facet-utils';
 let CollectionBrowser = class CollectionBrowser extends LitElement {
     constructor() {
         super();
@@ -186,6 +186,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.placeholderCellTemplate = html `<collection-browser-loading-tile></collection-browser-loading-tile>`;
         this.selectedTVNetwork = undefined;
         this.selectedTVShow = undefined;
+        this.shouldPopulateShows = false;
         /**
          * Updates the height of the left column according to its position on the page.
          * Arrow function ensures proper `this` binding.
@@ -325,6 +326,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             this.sortDirection = null;
             this.selectedSort = SortField.default;
         }
+        this.selectedTVNetwork = undefined;
+        this.selectedTVShow = undefined;
         if (this.smartFacetBar) {
             this.smartFacetBar.deselectAll();
         }
@@ -361,32 +364,32 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.setPlaceholderType();
     }
     render() {
-        return html `
+        return html `
       ${this.showSmartFacetBar && this.placeholderType === null
-            ? html `<smart-facet-bar
-            .query=${this.baseQuery}
-            .aggregations=${this.dataSource.aggregations}
-            .selectedFacets=${this.selectedFacets}
-            .collectionTitles=${this.dataSource.collectionTitles}
-            .filterToggleShown=${!this.mobileView}
-            .filterToggleActive=${this.facetPaneVisible}
-            .label=${this.smartFacetBarLabel}
-            @facetsChanged=${this.facetsChanged}
+            ? html `<smart-facet-bar
+            .query=${this.baseQuery}
+            .aggregations=${this.dataSource.aggregations}
+            .selectedFacets=${this.selectedFacets}
+            .collectionTitles=${this.dataSource.collectionTitles}
+            .filterToggleShown=${!this.mobileView}
+            .filterToggleActive=${this.facetPaneVisible}
+            .label=${this.smartFacetBarLabel}
+            @facetsChanged=${this.facetsChanged}
             @filtersToggled=${() => {
                 this.facetPaneVisible = !this.facetPaneVisible;
                 this.emitFacetPaneVisibilityChanged();
-            }}
+            }}
           ></smart-facet-bar>`
-            : nothing}
-
-      <div
-        id="content-container"
-        class=${this.mobileView ? 'mobile' : 'desktop'}
-      >
+            : nothing}
+
+      <div
+        id="content-container"
+        class=${this.mobileView ? 'mobile' : 'desktop'}
+      >
         ${this.placeholderType
             ? this.emptyPlaceholderTemplate
-            : this.collectionBrowserTemplate}
-      </div>
+            : this.collectionBrowserTemplate}
+      </div>
     `;
     }
     /**
@@ -432,23 +435,23 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      */
     get emptyPlaceholderTemplate() {
         var _a;
-        return html `
-      <empty-placeholder
-        .placeholderType=${this.placeholderType}
-        ?isMobileView=${this.mobileView}
-        ?isCollection=${!!this.withinCollection}
-        .detailMessage=${(_a = this.dataSource.queryErrorMessage) !== null && _a !== void 0 ? _a : ''}
-        .baseNavigationUrl=${this.baseNavigationUrl}
-      ></empty-placeholder>
+        return html `
+      <empty-placeholder
+        .placeholderType=${this.placeholderType}
+        ?isMobileView=${this.mobileView}
+        ?isCollection=${!!this.withinCollection}
+        .detailMessage=${(_a = this.dataSource.queryErrorMessage) !== null && _a !== void 0 ? _a : ''}
+        .baseNavigationUrl=${this.baseNavigationUrl}
+      ></empty-placeholder>
     `;
     }
     /**
      * Top-level template for rendering the left (facets) and right (results) columns.
      */
     get collectionBrowserTemplate() {
-        return html `
-      <div id="left-column-scroll-sentinel"></div>
-      ${this.leftColumnTemplate} ${this.rightColumnTemplate}
+        return html `
+      <div id="left-column-scroll-sentinel"></div>
+      ${this.leftColumnTemplate} ${this.rightColumnTemplate}
     `;
     }
     /**
@@ -467,33 +470,33 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * accordion-style facets.
      */
     get mobileLeftColumnTemplate() {
-        return html `
-      <div
-        id="left-column"
-        class="column${this.isResizeToMobile ? ' preload' : ''}"
-      >
-        ${this.facetTopViewSlot} ${this.resultsCountTemplate}
-        <div id="facets-header-container">${this.mobileFacetsTemplate}</div>
-      </div>
+        return html `
+      <div
+        id="left-column"
+        class="column${this.isResizeToMobile ? ' preload' : ''}"
+      >
+        ${this.facetTopViewSlot} ${this.resultsCountTemplate}
+        <div id="facets-header-container">${this.mobileFacetsTemplate}</div>
+      </div>
     `;
     }
     /**
      * Template for the desktop version of the left column, displaying the facets sidebar.
      */
     get desktopLeftColumnTemplate() {
-        return html `
-      <div id="left-column" class="column" ?hidden=${!this.facetPaneVisible}>
-        ${this.facetTopViewSlot}
-        <div id="facets-header-container">
-          <h2 id="facets-header" class="sr-only">${msg('Filters')}</h2>
-          ${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
-        </div>
-        <div id="facets-container" aria-labelledby="facets-header">
-          ${this.facetsTemplate}
-          <div id="facets-scroll-sentinel"></div>
-        </div>
-        <div id="facets-bottom-fade"></div>
-      </div>
+        return html `
+      <div id="left-column" class="column" ?hidden=${!this.facetPaneVisible}>
+        ${this.facetTopViewSlot}
+        <div id="facets-header-container">
+          <h2 id="facets-header" class="sr-only">${msg('Filters')}</h2>
+          ${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
+        </div>
+        <div id="facets-container" aria-labelledby="facets-header">
+          ${this.facetsTemplate}
+          <div id="facets-scroll-sentinel"></div>
+        </div>
+        <div id="facets-bottom-fade"></div>
+      </div>
     `;
     }
     /**
@@ -501,8 +504,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * - mainly used to render userlists
      */
     get facetTopViewSlot() {
-        return html `<div id="facet-top-view">
-      <slot name="facet-top-slot"></slot>
+        return html `<div id="facet-top-view">
+      <slot name="facet-top-slot"></slot>
     </div>`;
     }
     /**
@@ -517,15 +520,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const resultsCount = (_a = this.totalResults) === null || _a === void 0 ? void 0 : _a.toLocaleString();
         const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
         // Added data-testid for Playwright testing
-        return html `
-      <div id="results-total" data-testid="results-total">
-        <span id="big-results-count">
-          ${shouldShowSearching ? html `Searching&hellip;` : resultsCount}
-        </span>
-        <span id="big-results-label">
-          ${shouldShowSearching ? nothing : resultsLabel}
-        </span>
-      </div>
+        return html `
+      <div id="results-total" data-testid="results-total">
+        <span id="big-results-count">
+          ${shouldShowSearching ? html `Searching&hellip;` : resultsCount}
+        </span>
+        <span id="big-results-label">
+          ${shouldShowSearching ? nothing : resultsLabel}
+        </span>
+      </div>
     `;
     }
     /**
@@ -538,45 +541,45 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             'full-width': !this.facetPaneVisible,
             'smart-results-spacing': !!this.showSmartResults,
         });
-        return html `
-      <div id="right-column" class=${rightColumnClasses}>
+        return html `
+      <div id="right-column" class=${rightColumnClasses}>
         ${this.showSmartResults
             ? html `<slot name="smart-results"></slot>`
-            : nothing}
-        <section id="results">
-          <h2 class="results-section-heading">
-            <slot name="results-heading"></slot>
-          </h2>
-          <div id="cb-top-view">
-            <slot name="cb-top-slot"></slot>
-          </div>
+            : nothing}
+        <section id="results">
+          <h2 class="results-section-heading">
+            <slot name="results-heading"></slot>
+          </h2>
+          <div id="cb-top-view">
+            <slot name="cb-top-slot"></slot>
+          </div>
           ${this.isManageView
             ? this.manageBarTemplate
-            : this.sortFilterBarTemplate}
-          <slot name="cb-results"></slot>
+            : this.sortFilterBarTemplate}
+          <slot name="cb-results"></slot>
           ${this.displayMode === `list-compact` && this.totalResults
             ? this.listHeaderTemplate
-            : nothing}
-          ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
-        </section>
-      </div>
+            : nothing}
+          ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
+        </section>
+      </div>
     `;
     }
     /**
      * Template for the infinite scroller widget that contains the result tiles.
      */
     get infiniteScrollerTemplate() {
-        return html `<infinite-scroller
-      class=${this.infiniteScrollerClasses}
-      itemCount=${this.placeholderType ? 0 : nothing}
-      ariaLandmarkLabel="Search results"
-      .cellProvider=${this}
-      .placeholderCellTemplate=${this.placeholderCellTemplate}
-      @scrollThresholdReached=${this.scrollThresholdReached}
-      @visibleCellsChanged=${this.visibleCellsChanged}
+        return html `<infinite-scroller
+      class=${this.infiniteScrollerClasses}
+      itemCount=${this.placeholderType ? 0 : nothing}
+      ariaLandmarkLabel="Search results"
+      .cellProvider=${this}
+      .placeholderCellTemplate=${this.placeholderCellTemplate}
+      @scrollThresholdReached=${this.scrollThresholdReached}
+      @visibleCellsChanged=${this.visibleCellsChanged}
       >${this.displayMode === 'grid'
             ? html `<slot name="result-last-tile" slot="result-last-tile"></slot>`
-            : nothing}
+            : nothing}
     </infinite-scroller>`;
     }
     /**
@@ -617,32 +620,32 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         // We only show relevance sort if a search query is currently defined
         sortFieldAvailability.relevance = this.isRelevanceSortAvailable;
-        return html `
-      <sort-filter-bar
-        .defaultSortField=${this.defaultSortField}
-        .defaultSortDirection=${this.defaultSortDirection}
-        .defaultViewSort=${defaultViewSort}
-        .defaultDateSort=${defaultDateSort}
-        .selectedSort=${this.selectedSort}
-        .sortDirection=${this.sortDirection}
-        .sortFieldAvailability=${sortFieldAvailability}
-        .displayMode=${this.displayMode}
-        .selectedTitleFilter=${this.selectedTitleFilter}
-        .selectedCreatorFilter=${this.selectedCreatorFilter}
-        .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
-        .resizeObserver=${this.resizeObserver}
-        .enableSortOptionsSlot=${this.enableSortOptionsSlot}
-        .suppressDisplayModes=${this.suppressDisplayModes}
-        @sortChanged=${this.userChangedSort}
-        @displayModeChanged=${this.displayModeChanged}
-        @titleLetterChanged=${this.titleLetterSelected}
-        @creatorLetterChanged=${this.creatorLetterSelected}
-      >
-        ${this.tileBlurCheckboxTemplate}
-        <slot name="sort-options-left" slot="sort-options-left"></slot>
-        <slot name="sort-options" slot="sort-options"></slot>
-        <slot name="sort-options-right" slot="sort-options-right"></slot>
-      </sort-filter-bar>
+        return html `
+      <sort-filter-bar
+        .defaultSortField=${this.defaultSortField}
+        .defaultSortDirection=${this.defaultSortDirection}
+        .defaultViewSort=${defaultViewSort}
+        .defaultDateSort=${defaultDateSort}
+        .selectedSort=${this.selectedSort}
+        .sortDirection=${this.sortDirection}
+        .sortFieldAvailability=${sortFieldAvailability}
+        .displayMode=${this.displayMode}
+        .selectedTitleFilter=${this.selectedTitleFilter}
+        .selectedCreatorFilter=${this.selectedCreatorFilter}
+        .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
+        .resizeObserver=${this.resizeObserver}
+        .enableSortOptionsSlot=${this.enableSortOptionsSlot}
+        .suppressDisplayModes=${this.suppressDisplayModes}
+        @sortChanged=${this.userChangedSort}
+        @displayModeChanged=${this.displayModeChanged}
+        @titleLetterChanged=${this.titleLetterSelected}
+        @creatorLetterChanged=${this.creatorLetterSelected}
+      >
+        ${this.tileBlurCheckboxTemplate}
+        <slot name="sort-options-left" slot="sort-options-left"></slot>
+        <slot name="sort-options" slot="sort-options"></slot>
+        <slot name="sort-options-right" slot="sort-options-right"></slot>
+      </sort-filter-bar>
     `;
     }
     /**
@@ -654,20 +657,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         // Only show the checkbox for @archive.org users
         if (!((_a = this.dataSource.sessionContext) === null || _a === void 0 ? void 0 : _a.is_archive_user))
             return nothing;
-        return html `
-      <label
-        id="tile-blur-label"
-        for="tile-blur-check"
-        slot="sort-options-right"
-      >
-        ${msg('Blurring')}
-        <input
-          id="tile-blur-check"
-          type="checkbox"
-          ?checked=${!this.shouldSuppressTileBlurring}
-          @change=${this.tileBlurCheckboxChanged}
-        />
-      </label>
+        return html `
+      <label
+        id="tile-blur-label"
+        for="tile-blur-check"
+        slot="sort-options-right"
+      >
+        ${msg('Blurring')}
+        <input
+          id="tile-blur-check"
+          type="checkbox"
+          ?checked=${!this.shouldSuppressTileBlurring}
+          @change=${this.tileBlurCheckboxChanged}
+        />
+      </label>
     `;
     }
     /**
@@ -693,27 +696,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * showing the management view. This generally replaces the sort bar when present.
      */
     get manageBarTemplate() {
-        return html `
-      <manage-bar
-        .label=${this.manageViewLabel}
-        .modalManager=${this.modalManager}
-        .selectedItems=${this.dataSource.checkedTileModels}
-        .manageViewModalMsg=${this.manageViewModalMsg}
-        showSelectAll
-        showUnselectAll
-        ?showItemManageButton=${this.pageContext === 'search'}
-        ?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
-        @removeItems=${this.handleRemoveItems}
-        @manageItems=${this.handleManageItems}
-        @selectAll=${() => this.dataSource.checkAllTiles()}
-        @unselectAll=${() => this.dataSource.uncheckAllTiles()}
+        return html `
+      <manage-bar
+        .label=${this.manageViewLabel}
+        .modalManager=${this.modalManager}
+        .selectedItems=${this.dataSource.checkedTileModels}
+        .manageViewModalMsg=${this.manageViewModalMsg}
+        showSelectAll
+        showUnselectAll
+        ?showItemManageButton=${this.pageContext === 'search'}
+        ?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
+        @removeItems=${this.handleRemoveItems}
+        @manageItems=${this.handleManageItems}
+        @selectAll=${() => this.dataSource.checkAllTiles()}
+        @unselectAll=${() => this.dataSource.uncheckAllTiles()}
         @cancel=${() => {
             this.isManageView = false;
             this.dataSource.uncheckAllTiles();
             if (this.searchResultsLoading)
                 this.dataSource.resetPages();
-        }}
-      ></manage-bar>
+        }}
+      ></manage-bar>
     `;
     }
     /**
@@ -961,15 +964,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 label: target.open ? 'open' : 'closed',
             });
         };
-        return html `
-      <details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
-        <summary>
-          <span class="collapser-icon">${chevronIcon}</span>
-          <h2>${msg('Filters')}</h2>
-          ${this.clearFiltersBtnTemplate(true)}
-        </summary>
-        ${this.facetsTemplate}
-      </details>
+        return html `
+      <details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
+        <summary>
+          <span class="collapser-icon">${chevronIcon}</span>
+          <h2>${msg('Filters')}</h2>
+          ${this.clearFiltersBtnTemplate(true)}
+        </summary>
+        ${this.facetsTemplate}
+      </details>
     `;
     }
     async networksDropdownClicked() {
@@ -982,41 +985,59 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         var _a, _b;
         (_a = this.tvShowsDropdown) === null || _a === void 0 ? void 0 : _a.classList.add('loading');
         await this.dataSource.populateTVChannelMaps();
+        // Delay for a single tick so that the loading indicator will be rendered
+        // while the dropdown options are being added
+        await new Promise(res => setTimeout(res, 0));
+        this.shouldPopulateShows = true;
+        await this.updateComplete;
         (_b = this.tvShowsDropdown) === null || _b === void 0 ? void 0 : _b.classList.remove('loading');
     }
     async networksDropdownChanged() {
-        var _a;
-        if (((_a = this.tvNetworksDropdown) === null || _a === void 0 ? void 0 : _a.selectedIndex) === 0) {
-            this.selectedTVNetwork = undefined;
-            return;
-        }
-        this.selectedTVNetwork = this.tvNetworksDropdown.selectedOptions[0].value;
-        let newNetworkFacets = getDefaultSelectedFacets();
-        for (const [channel, network,] of this.dataSource.tvChannelMaps.channelToNetwork.entries()) {
-            if (network === this.selectedTVNetwork) {
-                newNetworkFacets = updateSelectedFacetBucket(newNetworkFacets, 'creator', {
+        const previousNetwork = this.selectedTVNetwork;
+        this.selectedTVNetwork =
+            this.tvNetworksDropdown.selectedOptions[0].value || undefined;
+        const entries = this.dataSource.tvChannelMaps.channelToNetwork.entries();
+        for (const [channel, network] of entries) {
+            if (network === previousNetwork) {
+                // Remove any previously-applied network filter
+                const removedBucket = {
+                    key: channel.toLowerCase(),
+                    count: 0,
+                    state: 'none',
+                };
+                this.selectedFacets = updateSelectedFacetBucket(this.selectedFacets, 'creator', removedBucket, true);
+            }
+            else if (network === this.selectedTVNetwork) {
+                const newBucket = {
                     key: channel.toLowerCase(),
                     count: 0,
                     state: 'selected',
-                });
+                };
+                this.selectedFacets = updateSelectedFacetBucket(this.selectedFacets, 'creator', newBucket);
             }
         }
-        log(newNetworkFacets);
-        this.selectedFacets = mergeSelectedFacets(this.selectedFacets, newNetworkFacets);
-        log(this.selectedFacets);
     }
     async showsDropdownChanged() {
-        var _a;
-        if (((_a = this.tvShowsDropdown) === null || _a === void 0 ? void 0 : _a.selectedIndex) === 0) {
-            this.selectedTVShow = undefined;
-            return;
+        const previousShow = this.selectedTVShow;
+        this.selectedTVShow =
+            this.tvShowsDropdown.selectedOptions[0].value || undefined;
+        // Remove any previously-applied shows filter
+        if (previousShow !== undefined) {
+            const removedBucket = {
+                key: previousShow,
+                count: 0,
+                state: 'none',
+            };
+            this.selectedFacets = updateSelectedFacetBucket(this.selectedFacets, 'program', removedBucket, true);
+        }
+        if (this.selectedTVShow) {
+            const newBucket = {
+                key: this.selectedTVShow,
+                count: 0,
+                state: 'selected',
+            };
+            this.selectedFacets = updateSelectedFacetBucket(this.selectedFacets, 'program', newBucket);
         }
-        this.selectedTVShow = this.tvShowsDropdown.selectedOptions[0].value;
-        this.selectedFacets = updateSelectedFacetBucket(this.selectedFacets, 'program', {
-            key: this.selectedTVShow,
-            count: 0,
-            state: 'selected',
-        });
     }
     get tvDropdownFiltersTemplate() {
         if (this.searchType !== SearchType.TV)
@@ -1032,27 +1053,53 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         const shows = showEntries.map(([show]) => show);
         log('end filters template preprocess', Date.now());
-        return html `
-      <div id="tv-filters" slot="facets-top">
-        <select
-          id="tv-networks"
-          class="tv-filter-dropdown"
-          @click=${this.networksDropdownClicked}
-          @change=${this.networksDropdownChanged}
-        >
-          <option selected value="">${msg('Filter by Network')}</option>
-          ${map(networks, n => html `<option>${n}</option>`)}
-        </select>
-        <select
-          id="tv-shows"
-          class="tv-filter-dropdown"
-          @click=${this.showsDropdownClicked}
-          @change=${this.showsDropdownChanged}
-        >
-          <option selected value="">${msg('Filter by Show')}</option>
-          ${map(shows, s => html `<option>${s}</option>`)}
-        </select>
-      </div>
+        const makeNetworkOption = (network) => html `
+      <option ?selected=${this.selectedTVNetwork === network}>
+        ${network}
+      </option>
+    `;
+        const makeShowOption = (show) => html `
+      <option ?selected=${this.selectedTVShow === show}>
+        ${show}
+      </option>
+    `;
+        const loadingIndicator = html `
+      <img src="https://archive.org/images/loading.gif" />
+    `;
+        return html `
+      <div id="tv-filters" slot="facets-top">
+        <div class="tv-filter-dropdown-wrap">
+          <select
+            id="tv-networks"
+            class="tv-filter-dropdown"
+            @click=${this.networksDropdownClicked}
+            @change=${this.networksDropdownChanged}
+          >
+            <option value="" ?selected=${!this.selectedTVNetwork}>
+              ${msg('Filter by Network')}
+            </option>
+            ${map(networks, makeNetworkOption)}
+          </select>
+          ${loadingIndicator}
+        </div>
+
+        <div class="tv-filter-dropdown-wrap">
+          <select
+            id="tv-shows"
+            class="tv-filter-dropdown"
+            @click=${this.showsDropdownClicked}
+            @change=${this.showsDropdownChanged}
+          >
+            <option value="" ?selected=${!this.selectedTVShow}>
+              ${msg('Filter by Show')}
+            </option>
+            ${this.shouldPopulateShows
+            ? map(shows, makeShowOption)
+            : nothing}
+          </select>
+          ${loadingIndicator}
+        </div>
+      </div>
     `;
     }
     /**
@@ -1062,10 +1109,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if (FACETLESS_PAGE_ELEMENTS.includes(this.profileElement))
             return nothing;
         if (this.facetLoadStrategy === 'off') {
-            return html `
-        <p class="facets-message">
-          ${msg('Facets are temporarily unavailable.')}
-        </p>
+            return html `
+        <p class="facets-message">
+          ${msg('Facets are temporarily unavailable.')}
+        </p>
       `;
         }
         // We switch to TV facet ordering & date picker if we are in a TV collection or showing TV search results
@@ -1074,46 +1121,46 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const facetDisplayOrder = shouldUseTvInterface
             ? tvFacetDisplayOrder
             : defaultFacetDisplayOrder;
-        const facets = html `
-      <collection-facets
-        .collectionPagePath=${this.collectionPagePath}
-        .parentCollections=${this.dataSource.parentCollections}
-        .pageSpecifierParams=${this.dataSource.pageSpecifierParams}
-        .searchService=${this.searchService}
-        .featureFeedbackService=${this.featureFeedbackService}
-        .recaptchaManager=${this.recaptchaManager}
-        .resizeObserver=${this.resizeObserver}
-        .searchType=${this.searchType}
-        .aggregations=${this.dataSource.aggregations}
-        .histogramAggregation=${this.dataSource.histogramAggregation}
-        .minSelectedDate=${this.minSelectedDate}
-        .maxSelectedDate=${this.maxSelectedDate}
-        .selectedFacets=${this.selectedFacets}
-        .baseNavigationUrl=${this.baseNavigationUrl}
-        .collectionTitles=${this.dataSource.collectionTitles}
-        .tvChannelAliases=${this.dataSource.tvChannelAliases}
-        .showHistogramDatePicker=${this.showHistogramDatePicker}
-        .allowExpandingDatePicker=${!this.mobileView}
-        .allowDatePickerMonths=${shouldUseTvInterface}
-        .contentWidth=${this.contentWidth}
-        .query=${this.baseQuery}
-        .identifiers=${this.identifiers}
-        .filterMap=${this.dataSource.filterMap}
-        .isManageView=${this.isManageView}
-        .modalManager=${this.modalManager}
-        .analyticsHandler=${this.analyticsHandler}
-        .facetDisplayOrder=${facetDisplayOrder}
-        .isTvSearch=${shouldUseTvInterface}
-        ?collapsableFacets=${this.mobileView}
-        ?facetsLoading=${this.facetsLoading}
-        ?histogramAggregationLoading=${this.facetsLoading}
-        ?suppressMediatypeFacets=${this.suppressMediatypeFacets}
-        @facetClick=${this.facetClickHandler}
-        @facetsChanged=${this.facetsChanged}
-        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-      >
-        ${this.tvDropdownFiltersTemplate}
-      </collection-facets>
+        const facets = html `
+      <collection-facets
+        .collectionPagePath=${this.collectionPagePath}
+        .parentCollections=${this.dataSource.parentCollections}
+        .pageSpecifierParams=${this.dataSource.pageSpecifierParams}
+        .searchService=${this.searchService}
+        .featureFeedbackService=${this.featureFeedbackService}
+        .recaptchaManager=${this.recaptchaManager}
+        .resizeObserver=${this.resizeObserver}
+        .searchType=${this.searchType}
+        .aggregations=${this.dataSource.aggregations}
+        .histogramAggregation=${this.dataSource.histogramAggregation}
+        .minSelectedDate=${this.minSelectedDate}
+        .maxSelectedDate=${this.maxSelectedDate}
+        .selectedFacets=${this.selectedFacets}
+        .baseNavigationUrl=${this.baseNavigationUrl}
+        .collectionTitles=${this.dataSource.collectionTitles}
+        .tvChannelAliases=${this.dataSource.tvChannelAliases}
+        .showHistogramDatePicker=${this.showHistogramDatePicker}
+        .allowExpandingDatePicker=${!this.mobileView}
+        .allowDatePickerMonths=${shouldUseTvInterface}
+        .contentWidth=${this.contentWidth}
+        .query=${this.baseQuery}
+        .identifiers=${this.identifiers}
+        .filterMap=${this.dataSource.filterMap}
+        .isManageView=${this.isManageView}
+        .modalManager=${this.modalManager}
+        .analyticsHandler=${this.analyticsHandler}
+        .facetDisplayOrder=${facetDisplayOrder}
+        .isTvSearch=${shouldUseTvInterface}
+        ?collapsableFacets=${this.mobileView}
+        ?facetsLoading=${this.facetsLoading}
+        ?histogramAggregationLoading=${this.facetsLoading}
+        ?suppressMediatypeFacets=${this.suppressMediatypeFacets}
+        @facetClick=${this.facetClickHandler}
+        @facetsChanged=${this.facetsChanged}
+        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+      >
+        ${this.tvDropdownFiltersTemplate}
+      </collection-facets>
     `;
         // If we are using one of the opt-in facet load strategies, we may need to wrap the
         // desktop view facets in a <details> widget so that patrons can opt into loading them.
@@ -1121,20 +1168,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const showDesktopOptInWidget = this.facetLoadStrategy === 'opt-in' ||
             (this.facetLoadStrategy === 'opt-in-or-login' && !this.loggedIn);
         if (showDesktopOptInWidget && !this.mobileView) {
-            return html `
-        <details
-          class="desktop-facets-dropdown"
+            return html `
+        <details
+          class="desktop-facets-dropdown"
           @toggle=${(e) => {
                 const target = e.target;
                 this.collapsibleFacetsVisible = target.open;
-            }}
-        >
-          <summary>
-            <span class="collapser-icon">${chevronIcon}</span>
-            <h2>${msg('Filters')}</h2>
-          </summary>
-          ${facets}
-        </details>
+            }}
+        >
+          <summary>
+            <span class="collapser-icon">${chevronIcon}</span>
+            <h2>${msg('Filters')}</h2>
+          </summary>
+          ${facets}
+        </details>
       `;
         }
         // Otherwise, just render the facets component bare
@@ -1154,34 +1201,34 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             mobile,
         });
         const buttonText = mobile ? 'Clear all' : 'Clear all filters';
-        return html `
-      <div class="clear-filters-btn-row">
+        return html `
+      <div class="clear-filters-btn-row">
         ${mobile
             ? html `<span class="clear-filters-btn-separator">&nbsp;</span>`
-            : nothing}
-        <button class=${buttonClasses} @click=${this.clearFilters}>
-          ${buttonText}
-        </button>
-      </div>
+            : nothing}
+        <button class=${buttonClasses} @click=${this.clearFilters}>
+          ${buttonText}
+        </button>
+      </div>
     `;
     }
     /**
      * Template for the table header content that appears atop the compact list view.
      */
     get listHeaderTemplate() {
-        return html `
-      <div id="list-header">
-        <tile-dispatcher
-          .tileDisplayMode=${'list-header'}
-          .resizeObserver=${this.resizeObserver}
-          .sortParam=${this.sortParam}
-          .defaultSortParam=${this.defaultSortParam}
-          .mobileBreakpoint=${this.mobileBreakpoint}
-          .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.shouldSuppressTileBlurring}
-        >
-        </tile-dispatcher>
-      </div>
+        return html `
+      <div id="list-header">
+        <tile-dispatcher
+          .tileDisplayMode=${'list-header'}
+          .resizeObserver=${this.resizeObserver}
+          .sortParam=${this.sortParam}
+          .defaultSortParam=${this.defaultSortParam}
+          .mobileBreakpoint=${this.mobileBreakpoint}
+          .loggedIn=${this.loggedIn}
+          .suppressBlurring=${this.shouldSuppressTileBlurring}
+        >
+        </tile-dispatcher>
+      </div>
     `;
     }
     /**
@@ -1937,28 +1984,28 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const isRadioSearch = this.searchType === SearchType.RADIO;
         const { isTVCollection, isRadioCollection } = this;
         const shouldUseLocalTime = isTVSearch || isRadioSearch || isTVCollection || isRadioCollection;
-        return html `
-      <tile-dispatcher
-        .collectionPagePath=${this.collectionPagePath}
-        .baseNavigationUrl=${this.baseNavigationUrl}
-        .baseImageUrl=${this.baseImageUrl}
-        .model=${model}
-        .tileDisplayMode=${this.displayMode}
-        .resizeObserver=${this.resizeObserver}
-        .collectionTitles=${this.dataSource.collectionTitles}
-        .sortParam=${this.sortParam}
-        .defaultSortParam=${this.defaultSortParam}
-        .creatorFilter=${this.selectedCreatorFilter}
-        .mobileBreakpoint=${this.mobileBreakpoint}
-        .loggedIn=${this.loggedIn}
-        .suppressBlurring=${this.shouldSuppressTileBlurring}
-        .isManageView=${this.isManageView}
-        ?showTvClips=${isTVSearch || isTVCollection}
-        ?enableHoverPane=${true}
-        ?useLocalTime=${shouldUseLocalTime}
-        @resultSelected=${(e) => this.resultSelected(e)}
-      >
-      </tile-dispatcher>
+        return html `
+      <tile-dispatcher
+        .collectionPagePath=${this.collectionPagePath}
+        .baseNavigationUrl=${this.baseNavigationUrl}
+        .baseImageUrl=${this.baseImageUrl}
+        .model=${model}
+        .tileDisplayMode=${this.displayMode}
+        .resizeObserver=${this.resizeObserver}
+        .collectionTitles=${this.dataSource.collectionTitles}
+        .sortParam=${this.sortParam}
+        .defaultSortParam=${this.defaultSortParam}
+        .creatorFilter=${this.selectedCreatorFilter}
+        .mobileBreakpoint=${this.mobileBreakpoint}
+        .loggedIn=${this.loggedIn}
+        .suppressBlurring=${this.shouldSuppressTileBlurring}
+        .isManageView=${this.isManageView}
+        ?showTvClips=${isTVSearch || isTVCollection}
+        ?enableHoverPane=${true}
+        ?useLocalTime=${shouldUseLocalTime}
+        @resultSelected=${(e) => this.resultSelected(e)}
+      >
+      </tile-dispatcher>
     `;
     }
     /**
@@ -1994,451 +2041,466 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     static get styles() {
         return [
             srOnlyStyle,
-            css `
-        :host {
-          display: block;
-          --leftColumnWidth: 18rem;
-          --leftColumnPaddingTop: 2rem;
-          --leftColumnPaddingRight: 2.5rem;
-        }
-
-        #facet-top-view {
-          display: flex;
-        }
-
-        /**
-        * When page width resizes from desktop to mobile, use this class to
-        * disable expand/collapse transition when loading.
-        */
-        .preload * {
-          transition: none !important;
-          -webkit-transition: none !important;
-          -moz-transition: none !important;
-          -ms-transition: none !important;
-          -o-transition: none !important;
-        }
-
-        #content-container {
-          display: flex;
-        }
-
-        empty-placeholder {
-          margin-top: var(--placeholderMarginTop, 0);
-        }
-
-        .collapser-icon {
-          display: inline-block;
-        }
-
-        .collapser-icon svg {
-          display: inline-block;
-          width: 12px;
-          height: 12px;
-          transition: transform 0.2s ease-out;
-        }
-
-        #mobile-filter-collapse {
-          width: 100%;
-        }
-
-        #mobile-filter-collapse > summary {
-          cursor: pointer;
-          list-style: none;
-        }
-
-        #mobile-filter-collapse[open] > summary {
-          margin-bottom: 10px;
-        }
-
-        #mobile-filter-collapse h2 {
-          display: inline-block;
-          margin: 0;
-          font-size: 2rem;
-        }
-
-        #mobile-filter-collapse[open] svg {
-          transform: rotate(90deg);
-        }
-
-        #content-container.mobile {
-          display: block;
-        }
-
-        #right-column {
-          flex: 1;
-          position: relative;
-          min-height: 90vh;
-          border-right: 1px solid rgb(232, 232, 232);
-          margin-top: var(--rightColumnMarginTop, 0);
-          padding-top: var(--rightColumnPaddingTop, 2rem);
-          background: #fff;
-        }
-
-        #left-column:not([hidden]) + #right-column {
-          border-left: 1px solid rgb(232, 232, 232);
-        }
-
-        #right-column.smart-results-spacing {
-          padding-top: 0.5rem;
-          border-right: none;
-          background: transparent;
-          min-width: 0;
-        }
-
-        #results {
-          background: #fff;
-          padding-left: 1rem;
-          padding-right: 1rem;
-        }
-
-        #right-column.smart-results-spacing #results {
-          border-radius: 10px 10px 0px 0px;
-          padding-top: 0.5rem;
-          margin-top: 1rem;
-        }
-
-        .mobile #right-column {
-          border-left: none;
-        }
-
-        .mobile #results {
-          padding: 5px 5px 0;
-        }
-
-        #left-column {
-          width: var(--leftColumnWidth, 18rem);
-          /* Prevents Safari from shrinking col at first draw */
-          min-width: var(--leftColumnWidth, 18rem);
-          padding-top: var(--leftColumnPaddingTop, 2rem);
-          /* Reduced padding by 0.2rem to add the invisible border in the rule below */
-          padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
-          border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
-          z-index: 1;
-        }
-
-        .desktop #left-column {
-          top: 0;
-          position: sticky;
-          height: calc(100vh - 2rem);
-          max-height: calc(100vh - 2rem);
-          overflow-x: hidden;
-          overflow-y: scroll;
-
-          /*
-          * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
-          * does at least give us a tiny bit of control over width & color.
-          */
-          scrollbar-width: thin;
-          scrollbar-color: transparent transparent;
-        }
-        .desktop #left-column:hover {
-          scrollbar-color: auto;
-        }
-        .desktop #left-column::-webkit-scrollbar {
-          appearance: none;
-          width: 6px;
-        }
-        .desktop #left-column::-webkit-scrollbar-button {
-          height: 3px;
-          background: transparent;
-        }
-        .desktop #left-column::-webkit-scrollbar-corner {
-          background: transparent;
-        }
-        .desktop #left-column::-webkit-scrollbar-thumb {
-          border-radius: 4px;
-        }
-        .desktop #left-column:hover::-webkit-scrollbar-thumb {
-          background: rgba(0, 0, 0, 0.15);
-        }
-        .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
-          background: rgba(0, 0, 0, 0.2);
-        }
-        .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
-          background: rgba(0, 0, 0, 0.3);
-        }
-
-        #facets-bottom-fade {
-          background: linear-gradient(
-            to bottom,
-            #f5f5f700 0%,
-            #f5f5f7c0 50%,
-            #f5f5f7 80%,
-            #f5f5f7 100%
-          );
-          position: fixed;
-          bottom: 0;
-          height: 50px;
-          /* Wide enough to cover the content, but leave the scrollbar uncovered */
-          width: calc(
-            var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
-          );
-          z-index: 2;
-          pointer-events: none;
-          transition: height 0.1s ease;
-        }
-        #facets-bottom-fade.hidden {
-          height: 0;
-        }
-
-        .facets-message {
-          font-size: 1.4rem;
-        }
-
-        .desktop-facets-dropdown > summary {
-          cursor: pointer;
-          list-style: none;
-        }
-
-        .desktop-facets-dropdown h2 {
-          display: inline-block;
-          margin: 0;
-          font-size: 1.6rem;
-        }
-
-        .desktop-facets-dropdown[open] > summary {
-          margin-bottom: 10px;
-        }
-
-        .desktop-facets-dropdown[open] svg {
-          transform: rotate(90deg);
-        }
-
-        .desktop #left-column-scroll-sentinel {
-          width: 1px;
-          height: 100vh;
-          background: transparent;
-        }
-
-        .desktop #facets-scroll-sentinel {
-          width: 1px;
-          height: 1px;
-          background: transparent;
-        }
-
-        #facets-header-container {
-          display: flex;
-          justify-content: space-between;
-          align-items: flex-start;
-          clear: both;
-        }
-
-        .desktop #facets-header-container {
-          flex-wrap: wrap;
-        }
-
-        .mobile #left-column {
-          width: 100%;
-          min-width: 0;
-          padding: 5px 0;
-          border: 0;
-        }
-
-        .clear-filters-btn-row {
-          display: inline-block;
-        }
-
-        .desktop .clear-filters-btn-row {
-          width: 100%;
-        }
-
-        .clear-filters-btn {
-          display: inline-block;
-          appearance: none;
-          margin: 0;
-          padding: 0;
-          border: 0;
-          background: none;
-          color: var(--ia-theme-link-color);
-          font-size: 1.4rem;
-          font-family: inherit;
-          cursor: pointer;
-        }
-
-        .clear-filters-btn:hover {
-          text-decoration: underline;
-        }
-
-        .clear-filters-btn-separator {
-          display: inline-block;
-          margin-left: 5px;
-          border-left: 1px solid #2c2c2c;
-          font-size: 1.4rem;
-          line-height: 1.3rem;
-        }
-
-        #tv-filters {
-          margin-bottom: 15px;
-        }
-
-        .tv-filter-dropdown {
-          width: 100%;
-          padding: 3px;
-          margin-bottom: 5px;
-        }
-
-        #facets-container {
-          position: relative;
-          max-height: 0;
-          transition: max-height 0.2s ease-in-out;
-          z-index: 1;
-          margin-top: var(--facetsContainerMarginTop, 5rem);
-          padding-bottom: 2rem;
-        }
-
-        .desktop #facets-container {
-          width: 18rem;
-        }
-
-        .mobile #facets-container {
-          overflow: hidden;
-          padding-bottom: 0;
-          padding-left: 10px;
-          padding-right: 10px;
-        }
-
-        #facets-container.expanded {
-          max-height: 2000px;
-        }
-
-        .results-section-heading {
-          margin: 0.5rem 0.3rem;
-          font-size: 2rem;
-          line-height: 25px;
-        }
-
-        #results-total {
-          display: flex;
-          align-items: baseline;
-        }
-
-        .mobile #results-total {
-          position: absolute;
-          right: 10px;
-        }
-
-        #big-results-count {
-          font-size: 2.4rem;
-          font-weight: 500;
-          margin-right: 5px;
-        }
-
-        .mobile #big-results-count {
-          font-size: 2rem;
-        }
-
-        #big-results-label {
-          font-size: 1.4rem;
-          font-weight: 200;
-        }
-
-        #list-header {
-          max-height: 4.2rem;
-        }
-
-        .loading-cover {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          z-index: 1;
-          padding-top: 50px;
-        }
-
-        #tile-blur-label {
-          display: flex;
-          align-items: center;
-          column-gap: 5px;
-        }
-
-        #tile-blur-check {
-          margin: 0 5px 0 0;
-          width: 15px;
-        }
-
-        circular-activity-indicator {
-          width: 30px;
-          height: 30px;
-        }
-
-        sort-filter-bar {
-          display: block;
-          margin-bottom: 4rem;
-        }
-
-        infinite-scroller {
-          display: block;
-          --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
-          --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
-        }
-
-        infinite-scroller.list-compact {
-          --infiniteScrollerCellMinWidth: var(
-            --collectionBrowserCellMinWidth,
-            100%
-          );
-          --infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
-          --infiniteScrollerCellMaxHeight: 56px;
-          --infiniteScrollerRowGap: 10px;
-        }
-
-        infinite-scroller.list-detail {
-          --infiniteScrollerCellMinWidth: var(
-            --collectionBrowserCellMinWidth,
-            100%
-          );
-          --infiniteScrollerCellMinHeight: var(
-            --collectionBrowserCellMinHeight,
-            5rem
-          );
-          /*
-            30px in spec, compensating for a -4px margin
-            to align title with top of item image
-            src/tiles/list/tile-list.ts
-          */
-          --infiniteScrollerRowGap: 34px;
-        }
-
-        .mobile infinite-scroller.list-detail {
-          --infiniteScrollerRowGap: 24px;
-        }
-
-        infinite-scroller.grid {
-          --infiniteScrollerCellMinWidth: var(
-            --collectionBrowserCellMinWidth,
-            17rem
-          );
-          --infiniteScrollerCellMaxWidth: var(
-            --collectionBrowserCellMaxWidth,
-            1fr
-          );
-        }
-
-        /* Allow tiles to shrink a bit further at smaller viewport widths */
-        @media screen and (max-width: 880px) {
-          infinite-scroller.grid {
-            --infiniteScrollerCellMinWidth: var(
-              --collectionBrowserCellMinWidth,
-              15rem
-            );
-          }
-        }
-        /* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
-        @media screen and (max-width: 360px) {
-          infinite-scroller.grid {
-            --infiniteScrollerCellMinWidth: var(
-              --collectionBrowserCellMinWidth,
-              12rem
-            );
-          }
-        }
-
-        infinite-scroller.hidden {
-          display: none;
-        }
+            css `
+        :host {
+          display: block;
+          --leftColumnWidth: 18rem;
+          --leftColumnPaddingTop: 2rem;
+          --leftColumnPaddingRight: 2.5rem;
+        }
+
+        #facet-top-view {
+          display: flex;
+        }
+
+        /**
+        * When page width resizes from desktop to mobile, use this class to
+        * disable expand/collapse transition when loading.
+        */
+        .preload * {
+          transition: none !important;
+          -webkit-transition: none !important;
+          -moz-transition: none !important;
+          -ms-transition: none !important;
+          -o-transition: none !important;
+        }
+
+        #content-container {
+          display: flex;
+        }
+
+        empty-placeholder {
+          margin-top: var(--placeholderMarginTop, 0);
+        }
+
+        .collapser-icon {
+          display: inline-block;
+        }
+
+        .collapser-icon svg {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          transition: transform 0.2s ease-out;
+        }
+
+        #mobile-filter-collapse {
+          width: 100%;
+        }
+
+        #mobile-filter-collapse > summary {
+          cursor: pointer;
+          list-style: none;
+        }
+
+        #mobile-filter-collapse[open] > summary {
+          margin-bottom: 10px;
+        }
+
+        #mobile-filter-collapse h2 {
+          display: inline-block;
+          margin: 0;
+          font-size: 2rem;
+        }
+
+        #mobile-filter-collapse[open] svg {
+          transform: rotate(90deg);
+        }
+
+        #content-container.mobile {
+          display: block;
+        }
+
+        #right-column {
+          flex: 1;
+          position: relative;
+          min-height: 90vh;
+          border-right: 1px solid rgb(232, 232, 232);
+          margin-top: var(--rightColumnMarginTop, 0);
+          padding-top: var(--rightColumnPaddingTop, 2rem);
+          background: #fff;
+        }
+
+        #left-column:not([hidden]) + #right-column {
+          border-left: 1px solid rgb(232, 232, 232);
+        }
+
+        #right-column.smart-results-spacing {
+          padding-top: 0.5rem;
+          border-right: none;
+          background: transparent;
+          min-width: 0;
+        }
+
+        #results {
+          background: #fff;
+          padding-left: 1rem;
+          padding-right: 1rem;
+        }
+
+        #right-column.smart-results-spacing #results {
+          border-radius: 10px 10px 0px 0px;
+          padding-top: 0.5rem;
+          margin-top: 1rem;
+        }
+
+        .mobile #right-column {
+          border-left: none;
+        }
+
+        .mobile #results {
+          padding: 5px 5px 0;
+        }
+
+        #left-column {
+          width: var(--leftColumnWidth, 18rem);
+          /* Prevents Safari from shrinking col at first draw */
+          min-width: var(--leftColumnWidth, 18rem);
+          padding-top: var(--leftColumnPaddingTop, 2rem);
+          /* Reduced padding by 0.2rem to add the invisible border in the rule below */
+          padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
+          border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
+          z-index: 1;
+        }
+
+        .desktop #left-column {
+          top: 0;
+          position: sticky;
+          height: calc(100vh - 2rem);
+          max-height: calc(100vh - 2rem);
+          overflow-x: hidden;
+          overflow-y: scroll;
+
+          /*
+          * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
+          * does at least give us a tiny bit of control over width & color.
+          */
+          scrollbar-width: thin;
+          scrollbar-color: transparent transparent;
+        }
+        .desktop #left-column:hover {
+          scrollbar-color: auto;
+        }
+        .desktop #left-column::-webkit-scrollbar {
+          appearance: none;
+          width: 6px;
+        }
+        .desktop #left-column::-webkit-scrollbar-button {
+          height: 3px;
+          background: transparent;
+        }
+        .desktop #left-column::-webkit-scrollbar-corner {
+          background: transparent;
+        }
+        .desktop #left-column::-webkit-scrollbar-thumb {
+          border-radius: 4px;
+        }
+        .desktop #left-column:hover::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.15);
+        }
+        .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
+          background: rgba(0, 0, 0, 0.2);
+        }
+        .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
+          background: rgba(0, 0, 0, 0.3);
+        }
+
+        #facets-bottom-fade {
+          background: linear-gradient(
+            to bottom,
+            #f5f5f700 0%,
+            #f5f5f7c0 50%,
+            #f5f5f7 80%,
+            #f5f5f7 100%
+          );
+          position: fixed;
+          bottom: 0;
+          height: 50px;
+          /* Wide enough to cover the content, but leave the scrollbar uncovered */
+          width: calc(
+            var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
+          );
+          z-index: 2;
+          pointer-events: none;
+          transition: height 0.1s ease;
+        }
+        #facets-bottom-fade.hidden {
+          height: 0;
+        }
+
+        .facets-message {
+          font-size: 1.4rem;
+        }
+
+        .desktop-facets-dropdown > summary {
+          cursor: pointer;
+          list-style: none;
+        }
+
+        .desktop-facets-dropdown h2 {
+          display: inline-block;
+          margin: 0;
+          font-size: 1.6rem;
+        }
+
+        .desktop-facets-dropdown[open] > summary {
+          margin-bottom: 10px;
+        }
+
+        .desktop-facets-dropdown[open] svg {
+          transform: rotate(90deg);
+        }
+
+        .desktop #left-column-scroll-sentinel {
+          width: 1px;
+          height: 100vh;
+          background: transparent;
+        }
+
+        .desktop #facets-scroll-sentinel {
+          width: 1px;
+          height: 1px;
+          background: transparent;
+        }
+
+        #facets-header-container {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          clear: both;
+        }
+
+        .desktop #facets-header-container {
+          flex-wrap: wrap;
+        }
+
+        .mobile #left-column {
+          width: 100%;
+          min-width: 0;
+          padding: 5px 0;
+          border: 0;
+        }
+
+        .clear-filters-btn-row {
+          display: inline-block;
+        }
+
+        .desktop .clear-filters-btn-row {
+          width: 100%;
+        }
+
+        .clear-filters-btn {
+          display: inline-block;
+          appearance: none;
+          margin: 0;
+          padding: 0;
+          border: 0;
+          background: none;
+          color: var(--ia-theme-link-color);
+          font-size: 1.4rem;
+          font-family: inherit;
+          cursor: pointer;
+        }
+
+        .clear-filters-btn:hover {
+          text-decoration: underline;
+        }
+
+        .clear-filters-btn-separator {
+          display: inline-block;
+          margin-left: 5px;
+          border-left: 1px solid #2c2c2c;
+          font-size: 1.4rem;
+          line-height: 1.3rem;
+        }
+
+        #tv-filters {
+          margin-bottom: 15px;
+        }
+
+        .tv-filter-dropdown {
+          width: 100%;
+          padding: 3px;
+        }
+
+        .tv-filter-dropdown-wrap {
+          display: flex;
+          align-items: center;
+          column-gap: 5px;
+          margin-bottom: 5px;
+        }
+
+        .tv-filter-dropdown-wrap > img {
+          flex: 1;
+          visibility: hidden;
+        }
+
+        .tv-filter-dropdown.loading + img {
+          visibility: visible;
+        }
+
+        #facets-container {
+          position: relative;
+          max-height: 0;
+          transition: max-height 0.2s ease-in-out;
+          z-index: 1;
+          margin-top: var(--facetsContainerMarginTop, 5rem);
+          padding-bottom: 2rem;
+        }
+
+        .desktop #facets-container {
+          width: 18rem;
+        }
+
+        .mobile #facets-container {
+          overflow: hidden;
+          padding-bottom: 0;
+          padding-left: 10px;
+          padding-right: 10px;
+        }
+
+        #facets-container.expanded {
+          max-height: 2000px;
+        }
+
+        .results-section-heading {
+          margin: 0.5rem 0.3rem;
+          font-size: 2rem;
+          line-height: 25px;
+        }
+
+        #results-total {
+          display: flex;
+          align-items: baseline;
+        }
+
+        .mobile #results-total {
+          position: absolute;
+          right: 10px;
+        }
+
+        #big-results-count {
+          font-size: 2.4rem;
+          font-weight: 500;
+          margin-right: 5px;
+        }
+
+        .mobile #big-results-count {
+          font-size: 2rem;
+        }
+
+        #big-results-label {
+          font-size: 1.4rem;
+          font-weight: 200;
+        }
+
+        #list-header {
+          max-height: 4.2rem;
+        }
+
+        .loading-cover {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          z-index: 1;
+          padding-top: 50px;
+        }
+
+        #tile-blur-label {
+          display: flex;
+          align-items: center;
+          column-gap: 5px;
+        }
+
+        #tile-blur-check {
+          margin: 0 5px 0 0;
+          width: 15px;
+        }
+
+        circular-activity-indicator {
+          width: 30px;
+          height: 30px;
+        }
+
+        sort-filter-bar {
+          display: block;
+          margin-bottom: 4rem;
+        }
+
+        infinite-scroller {
+          display: block;
+          --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
+          --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
+        }
+
+        infinite-scroller.list-compact {
+          --infiniteScrollerCellMinWidth: var(
+            --collectionBrowserCellMinWidth,
+            100%
+          );
+          --infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
+          --infiniteScrollerCellMaxHeight: 56px;
+          --infiniteScrollerRowGap: 10px;
+        }
+
+        infinite-scroller.list-detail {
+          --infiniteScrollerCellMinWidth: var(
+            --collectionBrowserCellMinWidth,
+            100%
+          );
+          --infiniteScrollerCellMinHeight: var(
+            --collectionBrowserCellMinHeight,
+            5rem
+          );
+          /*
+            30px in spec, compensating for a -4px margin
+            to align title with top of item image
+            src/tiles/list/tile-list.ts
+          */
+          --infiniteScrollerRowGap: 34px;
+        }
+
+        .mobile infinite-scroller.list-detail {
+          --infiniteScrollerRowGap: 24px;
+        }
+
+        infinite-scroller.grid {
+          --infiniteScrollerCellMinWidth: var(
+            --collectionBrowserCellMinWidth,
+            17rem
+          );
+          --infiniteScrollerCellMaxWidth: var(
+            --collectionBrowserCellMaxWidth,
+            1fr
+          );
+        }
+
+        /* Allow tiles to shrink a bit further at smaller viewport widths */
+        @media screen and (max-width: 880px) {
+          infinite-scroller.grid {
+            --infiniteScrollerCellMinWidth: var(
+              --collectionBrowserCellMinWidth,
+              15rem
+            );
+          }
+        }
+        /* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
+        @media screen and (max-width: 360px) {
+          infinite-scroller.grid {
+            --infiniteScrollerCellMinWidth: var(
+              --collectionBrowserCellMinWidth,
+              12rem
+            );
+          }
+        }
+
+        infinite-scroller.hidden {
+          display: none;
+        }
       `,
         ];
     }
@@ -2656,6 +2718,9 @@ __decorate([
 __decorate([
     state()
 ], CollectionBrowser.prototype, "selectedTVShow", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "shouldPopulateShows", void 0);
 __decorate([
     query('#tv-networks')
 ], CollectionBrowser.prototype, "tvNetworksDropdown", void 0);