@internetarchive/collection-browser 4.7.1-alpha-webdev9189.0 → 4.8.1-webdev-9227.1

package/src/collection-browser.ts

@@ -1,3187 +0,0 @@
-import {
-  html,
-  css,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-  HTMLTemplateResult,
-  nothing,
-} from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { msg } from '@lit/localize';
-
-import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
-import type {
-  InfiniteScroller,
-  InfiniteScrollerCellProviderInterface,
-} from '@internetarchive/infinite-scroller';
-import {
-  CollectionExtraInfo,
-  PageElementName,
-  SearchServiceInterface,
-  SearchType,
-  SortDirection,
-  SortParam,
-} from '@internetarchive/search-service';
-import type {
-  SharedResizeObserverInterface,
-  SharedResizeObserverResizeHandlerInterface,
-} from '@internetarchive/shared-resize-observer';
-import '@internetarchive/infinite-scroller';
-import type { ModalManagerInterface } from '@internetarchive/modal-manager';
-import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';
-import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
-import type { IAComboBox } from '@internetarchive/elements/ia-combo-box/ia-combo-box';
-import {
-  SelectedFacets,
-  SortField,
-  CollectionBrowserContext,
-  getDefaultSelectedFacets,
-  TileModel,
-  CollectionDisplayMode,
-  FacetEventDetails,
-  sortOptionFromAPIString,
-  SORT_OPTIONS,
-  defaultProfileElementSorts,
-  FacetLoadStrategy,
-  defaultFacetDisplayOrder,
-  tvFacetDisplayOrder,
-  TileBlurOverrideState,
-  defaultSortAvailability,
-  favoritesSortAvailability,
-  tvSortAvailability,
-  FacetBucket,
-} from './models';
-import {
-  RestorationStateHandlerInterface,
-  RestorationStateHandler,
-  RestorationState,
-  RestorationStatePersistOptions,
-} from './restoration-state-handler';
-import { CollectionBrowserDataSource } from './data-source/collection-browser-data-source';
-import type {
-  CollectionBrowserQueryState,
-  CollectionBrowserSearchInterface,
-} from './data-source/collection-browser-query-state';
-import { FACETLESS_PAGE_ELEMENTS } from './data-source/models';
-import type { CollectionFacets } from './collection-facets';
-import type { CollectionBrowserDataSourceInterface } from './data-source/collection-browser-data-source-interface';
-import {
-  analyticsActions,
-  analyticsCategories,
-} from './utils/analytics-events';
-import { updateSelectedFacetBucket } from './utils/facet-utils';
-import chevronIcon from './assets/img/icons/chevron';
-import { srOnlyStyle } from './styles/sr-only';
-import { sha1 } from './utils/sha1';
-import type { PlaceholderType } from './empty-placeholder';
-import type { ManageBar } from './manage/manage-bar';
-import type { SmartFacetBar } from './collection-facets/smart-facets/smart-facet-bar';
-import type { LayoutType, TileAction } from './tiles/models';
-
-import '@internetarchive/elements/ia-combo-box/ia-combo-box';
-import './empty-placeholder';
-import './tiles/tile-dispatcher';
-import './tiles/collection-browser-loading-tile';
-import './sort-filter-bar/sort-filter-bar';
-import './manage/manage-bar';
-import './collection-facets';
-import './circular-activity-indicator';
-import './collection-facets/smart-facets/smart-facet-bar';
-
-@customElement('collection-browser')
-export class CollectionBrowser
-  extends LitElement
-  implements
-    InfiniteScrollerCellProviderInterface,
-    SharedResizeObserverResizeHandlerInterface,
-    CollectionBrowserSearchInterface
-{
-  @property({ type: String }) baseNavigationUrl?: string;
-
-  @property({ type: String }) baseImageUrl: string = 'https://archive.org';
-
-  @property({ type: Object }) searchService?: SearchServiceInterface;
-
-  /**
-   * Which backend should be targeted by searches (e.g., metadata or FTS)
-   */
-  @property({ type: Number }) searchType: SearchType = SearchType.DEFAULT;
-
-  /**
-   * The identifier of the collection that searches should be performed within
-   */
-  @property({ type: String }) withinCollection?: string;
-
-  /**
-   * The identifier (e.g., @person) of the user whose profile is being searched within
-   */
-  @property({ type: String }) withinProfile?: string;
-
-  /**
-   * Which section of the profile page searches are for (e.g., uploads, reviews, ...)
-   */
-  @property({ type: String }) profileElement?: PageElementName;
-
-  /**
-   * The base query to use for all searches, updated to match the current user query.
-   */
-  @property({ type: String }) baseQuery?: string;
-
-  /**
-   * The base list of identifiers to fetch, if using the client_document_fetch feature
-   * of the search service.
-   *
-   * This approach allows many more identifiers to be retrieved than a query like
-   * `identifier:(foo OR bar OR ...)` would, but still may be more limited in what
-   * content is returned by the backend
-   */
-  @property({ type: Array }) identifiers?: string[];
-
-  /**
-   * Which mode to display result tiles in (grid, extended list, or compact list)
-   */
-  @property({ type: String }) displayMode?: CollectionDisplayMode;
-
-  @property({ type: String }) selectedSort: SortField = SortField.default;
-
-  @property({ type: String }) selectedTitleFilter: string | null = null;
-
-  @property({ type: String }) selectedCreatorFilter: string | null = null;
-
-  @property({ type: String }) sortDirection: SortDirection | null = null;
-
-  @property({ type: String }) defaultSortField: Exclude<
-    SortField,
-    SortField.default
-  > = SortField.relevance;
-
-  @property({ type: String }) defaultSortDirection: SortDirection | null = null;
-
-  @property({ type: Number }) pageSize = 50;
-
-  @property({ type: Number }) currentPage?: number;
-
-  @property({ type: String }) minSelectedDate?: string;
-
-  @property({ type: String }) maxSelectedDate?: string;
-
-  @property({ type: Object }) selectedFacets?: SelectedFacets;
-
-  /**
-   * Set of filters to be applied internally to searches, but not included in URL params or
-   * visibly selected facets. Use when this instance of collection browser is being shown
-   * in a filtered context, such as a single-mediatype tab, but the corresponding filters
-   * should not be exposed/changeable within that context.
-   */
-  @property({ type: Object }) internalFilters?: SelectedFacets;
-
-  /**
-   * Whether to show smart facets (bubbles) along the top of the component
-   */
-  @property({ type: Boolean }) showSmartFacetBar = false;
-
-  /**
-   * Sets the label that is shown in front of the smart facets, if present.
-   */
-  @property({ type: String }) smartFacetBarLabel?: string;
-
-  /**
-   * Whether to show the date picker (above the facets)
-   */
-  @property({ type: Boolean }) showHistogramDatePicker = false;
-
-  /**
-   * Whether placeholder views should be suppressed. If true, searches that produce an
-   * error or empty result set will simply show a blank results view instead of a placeholder.
-   */
-  @property({ type: Boolean }) suppressPlaceholders = false;
-
-  /**
-   * Whether the result count text should be suppressed.
-   * If true, no "X Results" message will be shown.
-   */
-  @property({ type: Boolean }) suppressResultCount = false;
-
-  /**
-   * Whether the scrolling result view should be suppressed entirely.
-   * If true, no infinite scroller (and thus no result tiles) will be rendered.
-   */
-  @property({ type: Boolean }) suppressResultTiles = false;
-
-  /**
-   * Whether to suppress persistence of the query to the URL.
-   * If true, the `query` param will not be added to the URL or updated on query changes.
-   */
-  @property({ type: Boolean }) suppressURLQuery = false;
-
-  /**
-   * Whether to suppress persistence of the `sin` search type param to the URL.
-   * If true, the `sin` param will not be added to the URL or updated on query changes.
-   */
-  @property({ type: Boolean }) suppressURLSinParam = false;
-
-  /**
-   * Whether to suppress display of the sort bar.
-   * If true, the entire sort bar (incl. display modes) will be omitted from rendering.
-   */
-  @property({ type: Boolean }) suppressSortBar = false;
-
-  /**
-   * Whether to suppress showing the display mode options in the sort bar.
-   * If true, those options will be omitted (though the rest of the sort bar may still render).
-   */
-  @property({ type: Boolean }) suppressDisplayModes = false;
-
-  /**
-   * Whether to suppress the display of the `mediatype` facet group, e.g., because this instance
-   * of collection browser is being shown in a filtered single-mediatype context.
-   */
-  @property({ type: Boolean }) suppressMediatypeFacets = false;
-
-  /**
-   * What strategy to use for when/whether to load facet data for a search.
-   *
-   * Defaults to `eager`, always loading facets immediately alongside search results.
-   *
-   * To eliminate facets that are never seen, this can be reduced to `lazy-mobile`, which
-   * will delay loading facets in the mobile view until the "Filters" accordion is opened.
-   * Facets are still loaded eagerly when viewing the desktop layout.
-   *
-   * To further reduce facet requests for patrons who do not need to use them, this can be
-   * again reduced to `opt-in`, which will also require desktop users to explicitly request
-   * that they be loaded (in addition to the lazy mobile behavior described above).
-   *
-   * To entirely suppress facets from being loaded, this may be set to `off`.
-   */
-  @property({ type: String }) facetLoadStrategy: FacetLoadStrategy = 'eager';
-
-  @property({ type: Boolean, reflect: true }) facetPaneVisible = false;
-
-  @property({ type: Boolean }) clearResultsOnEmptyQuery = false;
-
-  @property({ type: String }) collectionPagePath: string = '/details/';
-
-  /** describes where this component is being used */
-  @property({ type: String, reflect: true }) searchContext: string =
-    analyticsCategories.default;
-
-  @property({ type: String }) pageContext: CollectionBrowserContext = 'search';
-
-  @property({ type: Object })
-  restorationStateHandler: RestorationStateHandlerInterface =
-    new RestorationStateHandler({
-      context: this.pageContext,
-    });
-
-  @property({ type: Number }) mobileBreakpoint = 600;
-
-  @property({ type: Boolean }) loggedIn = false;
-
-  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;
-
-  @property({ type: Object }) modalManager?: ModalManagerInterface = undefined;
-
-  @property({ type: Object })
-  featureFeedbackService?: FeatureFeedbackServiceInterface;
-
-  @property({ type: Object }) recaptchaManager?: RecaptchaManagerInterface;
-
-  /**
-   * Whether we are representing a TV collection, needing slightly different tile handling.
-   */
-  @property({ type: Boolean }) isTVCollection = false;
-
-  /**
-   * If item management UI active
-   */
-  @property({ type: Boolean }) isManageView = false;
-
-  /** Action buttons to display on each tile */
-  @property({ type: Array }) tileActions: TileAction[] = [];
-
-  /**
-   * The simplified layout to apply to grid-mode tiles, if any. See
-   * `LayoutType` for available options. Has no effect on list display modes.
-   */
-  @property({ type: String }) tileLayoutType: LayoutType = 'default';
-
-  @property({ type: String }) manageViewLabel = 'Select items to remove';
-
-  /** Whether to replace the default sort options with a slot for customization (default: false) */
-  @property({ type: Boolean }) enableSortOptionsSlot = false;
-
-  /** Whether to expose a slot for a smart results carousel above the full results */
-  @property({ type: Boolean, reflect: true }) showSmartResults = false;
-
-  /**
-   * The maximum number of pages we will load when a privileged user clicks
-   * the "Manage" button on the search page. Limited to 15 pages.
-   */
-  @property({ type: Number }) maxPagesToManage = 15;
-
-  /**
-   * The results per page so we can paginate.
-   *
-   * This allows us to start in the middle of the search results and
-   * fetch data before or after the current page. If we don't have a key
-   * for the previous/next page, we'll fetch the next/previous page to populate it
-   */
-  @property({ type: Object }) dataSource: CollectionBrowserDataSourceInterface =
-    new CollectionBrowserDataSource(this, this.pageSize);
-
-  /**
-   * The page that the consumer wants to load.
-   */
-  initialPageNumber = 1;
-
-  /**
-   * This the the number of pages that we want to show.
-   *
-   * The data isn't necessarily loaded for all of the pages, but this lets us
-   * know how many cells we should render.
-   */
-  @state() private pagesToRender = this.initialPageNumber;
-
-  /**
-   * Whether the initial page fetch for a new query is currently in progress.
-   */
-  @state() private searchResultsLoading = false;
-
-  @state() private facetsLoading = false;
-
-  @state() private totalResults?: number;
-
-  @state() private mobileView = false;
-
-  /**
-   * Any temporarily overridden `on`/`off` state for the user's tile blurring preference if they
-   * have chosen to override it, or `no-override` if they have not.
-   */
-  @state() private tileBlurOverrideState: TileBlurOverrideState = 'no-override';
-
-  @state() private collapsibleFacetsVisible = false;
-
-  @state() private contentWidth?: number;
-
-  @state() private placeholderType: PlaceholderType = null;
-
-  @state() private selectedTVNetwork?: string = undefined;
-
-  @state() private selectedTVShow?: string = undefined;
-
-  @state() private tvMapsPopulated: boolean = false;
-
-  @state() private tvMapsLoading: boolean = false;
-
-  @state() private tvMapsErrored: boolean = false;
-
-  @query('#content-container') private contentContainer!: HTMLDivElement;
-
-  @query('#left-column') private leftColumn?: HTMLDivElement;
-
-  @query('collection-facets') private collectionFacets?: CollectionFacets;
-
-  @query('manage-bar') private manageBar?: ManageBar;
-
-  @query('smart-facet-bar') private smartFacetBar?: SmartFacetBar;
-
-  @query('#tv-networks') private tvNetworksDropdown?: IAComboBox;
-
-  @query('#tv-shows') private tvShowsDropdown?: IAComboBox;
-
-  @property({ type: Object, attribute: false })
-  analyticsHandler?: AnalyticsManagerInterface;
-
-  /** Whether layout size analytics have been sent already. */
-  private layoutSizeAnalyticsSent = false;
-
-  /**
-   * When we're animated scrolling to the page, we don't want to fetch
-   * all of the pages as it scrolls so this lets us know if we're scrolling
-   */
-  private isScrollingToCell = false;
-
-  /**
-   * When page width resizes from desktop to mobile, set true to
-   * disable expand/collapse transition when loading.
-   */
-  private isResizeToMobile = false;
-
-  /**
-   * Flag indicating that a new data source is currently being installed.
-   * During the install, any URL persistence operation should replace the current entry
-   * instead of creating a new one.
-   */
-  private dataSourceInstallInProgress = false;
-
-  private leftColIntersectionObserver?: IntersectionObserver;
-
-  private facetsIntersectionObserver?: IntersectionObserver;
-
-  private placeholderCellTemplate = html`<collection-browser-loading-tile></collection-browser-loading-tile>`;
-
-  constructor() {
-    super();
-    this.addController(this.dataSource);
-  }
-
-  private tileModelAtCellIndex(index: number): TileModel | undefined {
-    const model = this.dataSource.getTileModelAt(index);
-    /**
-     * If we encounter a model we don't have yet and we're not in the middle of an
-     * automated scroll, schedule a fetch for the missing page and return undefined.
-     * The datasource will be updated once the page is loaded and the cell will be rendered.
-     *
-     * We disable it during the automated scroll since we don't want to fetch pages for intervening cells the
-     * user may never see.
-     */
-    if (!model && !this.isScrollingToCell && this.dataSource.queryInitialized) {
-      const pageNumber = Math.floor(index / this.pageSize) + 1;
-      this.scheduleDeferredPageFetch(pageNumber);
-    }
-    return model;
-  }
-
-  /**
-   * Debounce delay for page fetches initiated by new cells becoming visible.
-   * Tuned so quick scrolling through unloaded regions doesn't send rapid-fire
-   * search requests for every page we pass through, but to still feel responsive
-   * when the scroll ends.
-   */
-  private static readonly DEFERRED_FETCH_DELAY_MS = 150;
-
-  private deferredFetchTimer = 0;
-
-  /**
-   * Schedules a fetch for the given page, debounced to ensure we don't
-   * rapid-fire fetches while scrolling through pages quickly.
-   *
-   * If there's no pending fetch timer yet, it will fire a fetch immediately.
-   * Otherwise, it will reset any existing timer. In either case, a deferred
-   * fetch for the visible pages is scheduled after a brief delay to account
-   * for whatever pages we land on after scrolling.
-   */
-  private scheduleDeferredPageFetch(pageNumber: number): void {
-    if (!this.deferredFetchTimer) {
-      this.dataSource.fetchPage(pageNumber);
-    } else {
-      window.clearTimeout(this.deferredFetchTimer);
-    }
-
-    this.deferredFetchTimer = window.setTimeout(() => {
-      this.deferredFetchTimer = 0;
-      this.fetchVisiblePages();
-    }, CollectionBrowser.DEFERRED_FETCH_DELAY_MS);
-  }
-
-  /**
-   * Fetch each currently-visible page whose first cell still has no
-   * loaded model.
-   */
-  private fetchVisiblePages(): void {
-    const visibleIndices = this.infiniteScroller?.getVisibleCellIndices() ?? [];
-    const visiblePages = new Set(
-      visibleIndices.map(i => Math.floor(i / this.pageSize) + 1),
-    );
-
-    for (const page of visiblePages) {
-      const firstCellOfPage = (page - 1) * this.pageSize;
-      if (!this.dataSource.getTileModelAt(firstCellOfPage)) {
-        this.dataSource.fetchPage(page);
-      }
-    }
-  }
-
-  // this is the total number of tiles we expect if
-  // the data returned is a full page worth
-  // this is useful for putting in placeholders for the expected number of tiles
-  private get estimatedTileCount(): number {
-    return this.pagesToRender * this.pageSize;
-  }
-
-  @query('infinite-scroller')
-  private infiniteScroller?: InfiniteScroller;
-
-  private sessionIdGenPromise?: Promise<string>;
-
-  /**
-   * Returns a promise resolving to a unique string that persists for the current browser session.
-   * Used in generating unique IDs for search requests, so that multiple requests coming from the
-   * same browser session can be identified.
-   */
-  async getSessionId(): Promise<string> {
-    try {
-      const storedSessionId = sessionStorage?.getItem('cb-session');
-      if (storedSessionId) {
-        return storedSessionId;
-      }
-
-      // If we enter this method a second time while a first session ID is already being generated,
-      // ensure we produce the same ID from both calls instead of generating another one.
-      if (this.sessionIdGenPromise) {
-        return this.sessionIdGenPromise;
-      }
-
-      this.sessionIdGenPromise = sha1(Math.random().toString());
-      const newSessionId = await this.sessionIdGenPromise;
-
-      sessionStorage?.setItem('cb-session', newSessionId);
-      return newSessionId;
-    } catch {
-      // Either we can't generate the hash or we're restricted from accessing sessionStorage
-      return '';
-    }
-  }
-
-  /**
-   * Go to the given page of results
-   *
-   * @param pageNumber
-   */
-  goToPage(pageNumber: number) {
-    this.initialPageNumber = pageNumber;
-    this.pagesToRender = pageNumber;
-    return this.scrollToPage(pageNumber);
-  }
-
-  /**
-   * Sets the state for whether the initial set of search results is loading in.
-   */
-  setSearchResultsLoading(loading: boolean): void {
-    this.searchResultsLoading = loading;
-  }
-
-  /**
-   * Sets the state for whether facet data is loading in
-   */
-  setFacetsLoading(loading: boolean): void {
-    this.facetsLoading = loading;
-  }
-
-  /**
-   * Sets the total number of results to be displayed for the current search
-   */
-  setTotalResultCount(totalResults: number): void {
-    this.totalResults = totalResults;
-  }
-
-  /**
-   * Clears all selected/negated facets, date ranges, and letter filters.
-   *
-   * By default, the current sort field/direction are not cleared,
-   * but this can be overridden by setting the `sort` option to `true`.
-   *
-   * Similarly, it is possible to finely control what is cleared by
-   * setting any of the `facets`, `dateRange`, or `letterFilters` flags
-   * in the options object.
-   */
-  clearFilters({
-    facets = true,
-    dateRange = true,
-    letterFilters = true,
-    sort = false,
-  } = {}): void {
-    // Don't bother clearing facets if none are checked, so that we don't
-    // trigger unnecessary update cycles.
-    if (facets && this.hasCheckedFacets) {
-      this.selectedFacets = getDefaultSelectedFacets();
-    }
-
-    if (dateRange) {
-      this.minSelectedDate = undefined;
-      this.maxSelectedDate = undefined;
-    }
-
-    if (letterFilters) {
-      this.selectedTitleFilter = null;
-      this.selectedCreatorFilter = null;
-    }
-
-    if (sort) {
-      this.sortDirection = null;
-      this.selectedSort = SortField.default;
-    }
-
-    this.clearTVDropdowns();
-
-    if (this.smartFacetBar) {
-      this.smartFacetBar.deselectAll();
-    }
-  }
-
-  /**
-   * Resets any selected TV network/show dropdowns to their default state
-   */
-  private clearTVDropdowns(): void {
-    this.selectedTVNetwork = undefined;
-    this.selectedTVShow = undefined;
-
-    if (this.tvNetworksDropdown) {
-      this.tvNetworksDropdown.clearSelectedOption();
-    }
-
-    if (this.tvShowsDropdown) {
-      this.tvShowsDropdown.clearSelectedOption();
-    }
-  }
-
-  /**
-   * Returns true if the current value of `this.selectedFacets` contains
-   * any facet buckets than have been selected or negated, or false otherwise.
-   */
-  private get hasCheckedFacets(): boolean {
-    if (!this.selectedFacets) return false;
-
-    for (const facetGroup of Object.values(this.selectedFacets)) {
-      for (const bucket of Object.values(facetGroup)) {
-        if (bucket.state !== 'none') return true;
-      }
-    }
-
-    return false;
-  }
-
-  /**
-   * Returns true if there are any currently selected/negated facet buckets,
-   * any selected date range, or any selected letter filters. False otherwise.
-   *
-   * Ignores sorting options.
-   */
-  private get hasActiveFilters(): boolean {
-    return !!(
-      this.hasCheckedFacets ||
-      this.minSelectedDate ||
-      this.maxSelectedDate ||
-      this.selectedTitleFilter ||
-      this.selectedCreatorFilter
-    );
-  }
-
-  willUpdate(changed: PropertyValues): void {
-    this.setPlaceholderType();
-
-    if (changed.has('searchType') && this.searchType === SearchType.TV) {
-      this.applyDefaultTVSearchSort();
-    }
-
-    // If we need to clear filters due to a query change or other reset, we do so *before* any
-    // updates happen, to prevent unnecessary update cycles and ensure there's a clean slate
-    // for any search requests that fire.
-    if (
-      changed.has('baseQuery') ||
-      changed.has('identifiers') ||
-      changed.has('searchType') ||
-      changed.has('withinCollection')
-    ) {
-      // Unless this query/search type update is from the initial page load or the
-      // result of hitting the back button,
-      // we need to clear any existing filters since they may no longer be valid for
-      // the new set of search results.
-      if (!this.historyPopOccurred && this.initialQueryChangeHappened) {
-        // Ordinarily, we leave the sort param unchanged between searches.
-        // However, if we are changing the target collection itself, we want the sort cleared too,
-        // since different collections may have different sorting options available.
-        const shouldClearSort =
-          changed.has('withinCollection') &&
-          !changed.has('selectedSort') &&
-          !changed.has('sortDirection');
-
-        // Otherwise, only clear filters that haven't been simultaneously applied in this update
-        this.clearFilters({
-          sort: shouldClearSort,
-          facets: !changed.has('selectedFacets'),
-          dateRange: !(
-            changed.has('minSelectedDate') || changed.has('maxSelectedDate')
-          ),
-          letterFilters: !(
-            changed.has('selectedTitleFilter') ||
-            changed.has('selectedCreatorFilter')
-          ),
-        });
-      }
-    }
-  }
-
-  render() {
-    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}
-            @filtersToggled=${() => {
-              this.facetPaneVisible = !this.facetPaneVisible;
-              this.emitFacetPaneVisibilityChanged();
-            }}
-          ></smart-facet-bar>`
-        : nothing}
-
-      <div
-        id="content-container"
-        class=${this.mobileView ? 'mobile' : 'desktop'}
-      >
-        ${this.placeholderType
-          ? this.emptyPlaceholderTemplate
-          : this.collectionBrowserTemplate}
-      </div>
-    `;
-  }
-
-  /**
-   * Determines what type of placeholder content should be shown instead of result tiles, if applicable.
-   * The placeholders indicate states where we have no results to show, which could be the result of:
-   *  - No query is set (on the search page)
-   *  - No results were returned for the most recent search
-   *  - The collection being searched within has no viewable items
-   *  - An error occurred on the most recent search attempt
-   */
-  private setPlaceholderType() {
-    const isInitialized = this.dataSource.queryInitialized;
-    const hasQuery = !!this.baseQuery?.trim();
-    const hasIdentifiers = !!this.identifiers?.length;
-    const isCollection = !!this.withinCollection;
-    const isProfile = !!this.withinProfile;
-    const isSearchResults = !isCollection && !isProfile;
-    const noResults =
-      !this.searchResultsLoading &&
-      (this.dataSource.size === 0 || !this.searchService);
-
-    this.placeholderType = null;
-    if (this.suppressPlaceholders) return;
-
-    if (!isInitialized) {
-      this.placeholderType = 'empty-query';
-    } else if (isSearchResults && !hasQuery && !hasIdentifiers) {
-      this.placeholderType = 'empty-query';
-    } else if (noResults) {
-      // Within a collection, no query + no results means the collection simply has no viewable items.
-      // Otherwise, we must have a user query that produced 0 results.
-      this.placeholderType =
-        !hasQuery && isCollection ? 'empty-collection' : 'no-results';
-    }
-
-    if (this.dataSource.queryErrorMessage) {
-      this.placeholderType =
-        !hasQuery && isCollection ? 'collection-error' : 'query-error';
-    }
-  }
-
-  /**
-   * Template for the placeholder content to show when no results are available.
-   */
-  private get emptyPlaceholderTemplate() {
-    return html`
-      <empty-placeholder
-        .placeholderType=${this.placeholderType}
-        ?isMobileView=${this.mobileView}
-        ?isCollection=${!!this.withinCollection}
-        .detailMessage=${this.dataSource.queryErrorMessage ?? ''}
-        .baseNavigationUrl=${this.baseNavigationUrl}
-      ></empty-placeholder>
-    `;
-  }
-
-  /**
-   * Top-level template for rendering the left (facets) and right (results) columns.
-   */
-  private get collectionBrowserTemplate() {
-    return html`
-      <div id="left-column-scroll-sentinel"></div>
-      ${this.leftColumnTemplate} ${this.rightColumnTemplate}
-    `;
-  }
-
-  /**
-   * Template for either the mobile or desktop version of the left column, depending
-   * on current component state.
-   */
-  private get leftColumnTemplate(): TemplateResult {
-    if (this.mobileView) {
-      return this.mobileLeftColumnTemplate;
-    }
-    return this.desktopLeftColumnTemplate;
-  }
-
-  /**
-   * Template for the mobile version of the "left column" (which in this case, appears
-   * *above* the search results rather than beside them), for rendering the
-   * accordion-style facets.
-   */
-  private get mobileLeftColumnTemplate(): TemplateResult {
-    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.
-   */
-  private get desktopLeftColumnTemplate(): TemplateResult {
-    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>
-    `;
-  }
-
-  /**
-   * Slot which is placed at top of the facets area for user-profile page
-   * - mainly used to render userlists
-   */
-  private get facetTopViewSlot(): TemplateResult {
-    return html`<div id="facet-top-view">
-      <slot name="facet-top-slot"></slot>
-    </div>`;
-  }
-
-  /**
-   * Template for the "X Results" count at the top of the search results.
-   * Changes to the "Searching..." label if the search results are still loading.
-   */
-  private get resultsCountTemplate(): TemplateResult | typeof nothing {
-    if (this.suppressResultCount) return nothing;
-
-    const shouldShowSearching =
-      this.searchResultsLoading || this.totalResults === undefined;
-    const classes = classMap({ filtered: this.hasActiveFilters });
-    const resultsCount = this.totalResults?.toLocaleString();
-    const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
-
-    // Added data-testid for Playwright testing
-    return html`
-      <div id="results-total" class=${classes} 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>
-    `;
-  }
-
-  /**
-   * Template for the right column of the collection browser, where the result
-   * tiles and sort/filter bar are shown.
-   */
-  private get rightColumnTemplate(): TemplateResult {
-    const rightColumnClasses = classMap({
-      column: true,
-      'full-width': !this.facetPaneVisible,
-      'smart-results-spacing': !!this.showSmartResults,
-    });
-
-    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>
-          ${this.isManageView
-            ? this.manageBarTemplate
-            : this.sortFilterBarTemplate}
-          <slot name="cb-results"></slot>
-          <div id="results-body">
-            <div id="results-main">
-              ${this.displayMode === `list-compact` && this.totalResults
-                ? this.listHeaderTemplate
-                : nothing}
-              ${this.suppressResultTiles
-                ? nothing
-                : this.infiniteScrollerTemplate}
-            </div>
-            <slot name="results-aside"></slot>
-          </div>
-        </section>
-      </div>
-    `;
-  }
-
-  /**
-   * Template for the infinite scroller widget that contains the result tiles.
-   */
-  private get infiniteScrollerTemplate() {
-    return html`<infinite-scroller
-      class=${this.infiniteScrollerClasses}
-      itemCount=${this.placeholderType ? 0 : nothing}
-      ariaLandmarkLabel="Search results"
-      .estimatedCellHeight=${this.estimatedTileHeight}
-      .minBufferMarginCells=${this.pageSize}
-      .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}
-    </infinite-scroller>`;
-  }
-
-  /**
-   * Produces a `classMap` indicating which classes the infinite scroller should have
-   * given the current display mode & placeholder case.
-   */
-  private get infiniteScrollerClasses() {
-    return classMap({
-      [this.displayMode ?? '']: !!this.displayMode,
-      hidden: !!this.placeholderType,
-    });
-  }
-
-  /**
-   * Best-effort hint of how tall a single rendered tile is, by display mode.
-   * The scroller uses this to better estimate the size its initial scroll
-   * spacer and buffer position before real cell heights are measured.
-   * Should roughly match the placeholder heights since the initial render
-   * of a new page generally shows placeholders only anyway.
-   */
-  private get estimatedTileHeight(): number {
-    switch (this.displayMode) {
-      case 'list-detail':
-        return 80;
-      case 'list-compact':
-        return 45;
-      case 'grid':
-      default:
-        return 225;
-    }
-  }
-
-  /**
-   * Template for the sort & filtering bar that appears atop the search results.
-   */
-  private get sortFilterBarTemplate(): TemplateResult | typeof nothing {
-    if (this.suppressSortBar) return nothing;
-
-    // Determine the set of sortable fields that should be shown in the sort bar
-    let sortFieldAvailability = defaultSortAvailability;
-
-    // We adjust the available sort options for a couple of special cases...
-    if (
-      this.withinCollection?.startsWith('fav-') ||
-      this.profileElement === 'favorites'
-    ) {
-      // When viewing a fav- collection or the favorites profile tab,
-      // we include the Date Favorited option as the default
-      sortFieldAvailability = favoritesSortAvailability;
-    } else if (!this.withinCollection && this.searchType === SearchType.TV) {
-      // When viewing TV search results, we exclude several of the usual date sort options.
-      sortFieldAvailability = tvSortAvailability;
-    }
-
-    // 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}
-        .selectedSort=${this.selectedSort}
-        .sortDirection=${this.sortDirection}
-        .sortFieldAvailability=${sortFieldAvailability}
-        .displayMode=${this.displayMode}
-        .selectedTitleFilter=${this.selectedTitleFilter}
-        .selectedCreatorFilter=${this.selectedCreatorFilter}
-        .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
-        .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>
-        <slot name="sort-bar-end" slot="sort-bar-end"></slot>
-      </sort-filter-bar>
-    `;
-  }
-
-  /**
-   * Template for the Blurring toggle for admins to enable/disable blurring of
-   * sensitive content in result tiles.
-   */
-  private get tileBlurCheckboxTemplate(): TemplateResult | typeof nothing {
-    // Only show the checkbox for @archive.org users
-    if (!this.dataSource.sessionContext?.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>
-    `;
-  }
-
-  /**
-   * Template for the manage bar UI that appears atop the search results when we are
-   * showing the management view. This generally replaces the sort bar when present.
-   */
-  private get manageBarTemplate(): TemplateResult {
-    return html`
-      <manage-bar
-        .label=${this.manageViewLabel}
-        .modalManager=${this.modalManager}
-        .selectedItems=${this.dataSource.checkedTileModels}
-        .profileElement=${this.profileElement}
-        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>
-    `;
-  }
-
-  /**
-   * Handler for when the user requests to remove all checked items via the manage bar.
-   * Emits an `itemRemovalRequested` event with all checked tile models.
-   */
-  private handleRemoveItems(): void {
-    this.dispatchEvent(
-      new CustomEvent<{ items: string[] }>('itemRemovalRequested', {
-        detail: {
-          items: this.dataSource.checkedTileModels.map(model => {
-            // For favorited searches, we attach a search: prefix to differentiate it from an item
-            const searchPrefix = model?.mediatype === 'search' ? 'search:' : '';
-            const identifier = model?.identifier ?? '';
-            return `${searchPrefix}${identifier}`;
-          }),
-        },
-      }),
-    );
-  }
-
-  /**
-   * Handler when user request to bulk edit from /search/ page
-   */
-  private handleManageItems(): void {
-    this.dispatchEvent(
-      new CustomEvent<{ items: string[] }>('itemManagerRequested', {
-        detail: {
-          items: this.dataSource.checkedTileModels.map(model =>
-            model?.identifier ? model.identifier : '',
-          ),
-        },
-      }),
-    );
-  }
-
-  refreshSmartFacets(): void {
-    this.smartFacetBar?.refresh();
-  }
-
-  /**
-   * Handler to show processing modal while removing item
-   */
-  showRemoveItemsProcessingModal(): void {
-    this.manageBar?.showRemoveItemsProcessingModal();
-  }
-
-  /**
-   * Handler to show error modal when item removal failed
-   */
-  showRemoveItemsErrorModal(): void {
-    this.manageBar?.showRemoveItemsErrorModal();
-  }
-
-  /**
-   * Removes all tile models that are currently checked & adjusts the paging
-   * of the data source to account for any new gaps in the data.
-   */
-  removeCheckedTiles(): void {
-    this.dataSource.removeCheckedTiles();
-  }
-
-  /**
-   * Handler for when the tile blurring checkbox state is toggled
-   */
-  private tileBlurCheckboxChanged(e: Event): void {
-    const { checked } = e.target as HTMLInputElement;
-    this.tileBlurOverrideState = checked ? 'on' : 'off';
-    this.infiniteScroller?.refreshAllVisibleCells();
-  }
-
-  /**
-   * Whether result tiles should have the default blurring of sensitive content suppressed.
-   * First considers any override specified by the user, falling back to the setting in
-   * user preferences if not overridden.
-   */
-  private get shouldSuppressTileBlurring(): boolean {
-    if (this.tileBlurOverrideState !== 'no-override') {
-      // User wants to override their preference.
-      // Return true if they want blurring turned off, or false otherwise.
-      return this.tileBlurOverrideState === 'off';
-    }
-
-    // Not overriding, so use the preference from session context
-    const { sessionContext } = this.dataSource;
-    const userPrefs = sessionContext?.pps_relevant_user_preferences;
-    const blurringPref = userPrefs?.display__blur_moderated_content;
-
-    // Only suppress blurring if the preference is disabled.
-    // If enabled or missing, tile blurring remains on.
-    return blurringPref === 'off';
-  }
-
-  /**
-   * Handler for when the user changes the selected sort option or direction.
-   */
-  private userChangedSort(
-    e: CustomEvent<{
-      selectedSort: SortField;
-      sortDirection: SortDirection | null;
-    }>,
-  ) {
-    const { selectedSort, sortDirection } = e.detail;
-    this.selectedSort = selectedSort;
-    this.sortDirection = sortDirection;
-
-    if ((this.currentPage ?? 1) > 1) {
-      this.goToPage(1);
-    }
-    this.setCurrentPage(1);
-  }
-
-  /**
-   * Fires an analytics event for sorting changes.
-   * @param prevSortDirection Which sort direction was previously set.
-   */
-  private sendSortByAnalytics(prevSortDirection: SortDirection | null): void {
-    const directionCleared = prevSortDirection && !this.sortDirection;
-
-    this.analyticsHandler?.sendEvent({
-      category: this.searchContext,
-      action: analyticsActions.sortBy,
-      label: `${this.selectedSort}${
-        this.sortDirection || directionCleared ? `-${this.sortDirection}` : ''
-      }`,
-    });
-  }
-
-  /**
-   * Handler for when the selected sort option is updated, whether by the user
-   * themselves or programmatically.
-   */
-  private selectedSortChanged(): void {
-    // Lazy-load the alphabet counts for title/creator sort bar as needed
-    this.dataSource.updatePrefixFiltersForCurrentSort();
-  }
-
-  /**
-   * An object representing the current sort field & direction.
-   */
-  get sortParam(): SortParam | null {
-    const sortOption = SORT_OPTIONS[this.selectedSort];
-    if (!sortOption?.handledBySearchService) {
-      return null;
-    }
-
-    // If the sort option specified in the URL is unrecognized, we just use it as-is
-    const urlSortParam = new URL(window.location.href).searchParams.get('sort');
-    const sortField =
-      sortOption.searchServiceKey ?? urlSortParam?.replace(/^-/, '');
-
-    // If the sort direction is still null at this point, then we assume ascending
-    // (i.e., it was unrecognized and had no directional flag)
-    if (!this.sortDirection) this.sortDirection = 'asc';
-
-    if (!sortField) return null;
-    return { field: sortField, direction: this.sortDirection };
-  }
-
-  /**
-   * An object representing the default sort field & direction, if none are explicitly set.
-   */
-  get defaultSortParam(): SortParam | null {
-    const direction = this.defaultSortDirection ?? 'asc';
-    const field = SORT_OPTIONS[this.defaultSortField].searchServiceKey;
-    if (!field) return null;
-
-    return { field, direction };
-  }
-
-  /**
-   * Handler for when the display mode option is changed (grid/list/compact-list views).
-   */
-  private displayModeChanged(
-    e: CustomEvent<{ displayMode?: CollectionDisplayMode }>,
-  ): void {
-    this.displayMode = e.detail.displayMode;
-
-    if (this.displayMode) {
-      this.analyticsHandler?.sendEvent({
-        category: this.searchContext,
-        action: analyticsActions.displayMode,
-        label: this.displayMode,
-      });
-    }
-  }
-
-  /**
-   * Returns a query clause identifying the currently selected title filter,
-   * e.g., `firstTitle:X`.
-   */
-  private get titleQuery(): string | undefined {
-    return this.selectedTitleFilter
-      ? `firstTitle:${this.selectedTitleFilter}`
-      : undefined;
-  }
-
-  /**
-   * Returns a query clause identifying the currently selected creator filter,
-   * e.g., `firstCreator:X`.
-   */
-  private get creatorQuery(): string | undefined {
-    return this.selectedCreatorFilter
-      ? `firstCreator:${this.selectedCreatorFilter}`
-      : undefined;
-  }
-
-  /**
-   * Send Analytics when sorting by title's first letter
-   * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
-   */
-  private sendFilterByTitleAnalytics(prevSelectedLetter: string | null): void {
-    if (!prevSelectedLetter && !this.selectedTitleFilter) {
-      return;
-    }
-    const cleared = prevSelectedLetter && !this.selectedTitleFilter;
-
-    this.analyticsHandler?.sendEvent({
-      category: this.searchContext,
-      action: analyticsActions.filterByTitle,
-      label: cleared
-        ? `clear-${prevSelectedLetter}`
-        : `${prevSelectedLetter || 'start'}-${this.selectedTitleFilter}`,
-    });
-  }
-
-  /**
-   * Send Analytics when filtering by creator's first letter
-   * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
-   */
-  private sendFilterByCreatorAnalytics(
-    prevSelectedLetter: string | null,
-  ): void {
-    if (!prevSelectedLetter && !this.selectedCreatorFilter) {
-      return;
-    }
-    const cleared = prevSelectedLetter && !this.selectedCreatorFilter;
-
-    this.analyticsHandler?.sendEvent({
-      category: this.searchContext,
-      action: analyticsActions.filterByCreator,
-      label: cleared
-        ? `clear-${prevSelectedLetter}`
-        : `${prevSelectedLetter || 'start'}-${this.selectedCreatorFilter}`,
-    });
-  }
-
-  /**
-   * Handler for changes to which letter is selected in the title alphabet bar.
-   */
-  private titleLetterSelected(
-    e: CustomEvent<{ selectedLetter: string | null }>,
-  ): void {
-    this.selectedCreatorFilter = null;
-    this.selectedTitleFilter = e.detail.selectedLetter;
-  }
-
-  /**
-   * Handler for changes to which letter is selected in the creator alphabet bar.
-   */
-  private creatorLetterSelected(
-    e: CustomEvent<{ selectedLetter: string | null }>,
-  ): void {
-    this.selectedTitleFilter = null;
-    this.selectedCreatorFilter = e.detail.selectedLetter;
-  }
-
-  /**
-   * The full template for how the facets should be structured in mobile view,
-   * including the collapsible container (with header) and the facets themselves.
-   */
-  private get mobileFacetsTemplate(): TemplateResult | typeof nothing {
-    if (FACETLESS_PAGE_ELEMENTS.includes(this.profileElement!)) return nothing;
-
-    const toggleFacetsVisible = (e: Event) => {
-      const target = e.target as HTMLDetailsElement;
-      this.isResizeToMobile = false;
-      this.collapsibleFacetsVisible = target.open;
-
-      this.analyticsHandler?.sendEvent({
-        category: this.searchContext,
-        action: analyticsActions.mobileFacetsToggled,
-        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>
-    `;
-  }
-
-  /**
-   * Handler for when either of the TV dropdown filters are toggled, loading their
-   * contents if necessary.
-   */
-  private async tvDropdownToggled(e: CustomEvent<boolean>): Promise<void> {
-    if (!e.detail) return; // Only run when toggled open
-    if (this.tvMapsPopulated) return;
-
-    this.tvMapsLoading = true;
-    this.tvMapsErrored = false;
-    try {
-      await this.dataSource.populateTVChannelMaps();
-      this.tvMapsPopulated = true;
-    } catch (err) {
-      this.tvMapsErrored = true;
-    }
-
-    this.tvMapsLoading = false;
-  }
-
-  private async networksDropdownChanged(): Promise<void> {
-    const previousNetwork = this.selectedTVNetwork;
-    const newNetwork = this.tvNetworksDropdown!.selectedOption?.text;
-    this.selectedTVNetwork = newNetwork ?? 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: FacetBucket = {
-          key: channel.toLowerCase(),
-          count: 0,
-          state: 'none',
-        };
-        this.selectedFacets = updateSelectedFacetBucket(
-          this.selectedFacets,
-          'creator',
-          removedBucket,
-          true,
-        );
-      } else if (network === this.selectedTVNetwork) {
-        const newBucket: FacetBucket = {
-          key: channel.toLowerCase(),
-          count: 0,
-          state: 'selected',
-        };
-        this.selectedFacets = updateSelectedFacetBucket(
-          this.selectedFacets,
-          'creator',
-          newBucket,
-        );
-      }
-    }
-  }
-
-  private async showsDropdownChanged(): Promise<void> {
-    const previousShow = this.selectedTVShow;
-    const newShow = this.tvShowsDropdown!.selectedOption?.text;
-    this.selectedTVShow = newShow ?? undefined;
-
-    // Remove any previously-applied shows filter
-    if (previousShow !== undefined) {
-      const removedBucket: FacetBucket = {
-        key: previousShow,
-        count: 0,
-        state: 'none',
-      };
-      this.selectedFacets = updateSelectedFacetBucket(
-        this.selectedFacets,
-        'program',
-        removedBucket,
-        true,
-      );
-    }
-
-    if (this.selectedTVShow) {
-      const newBucket: FacetBucket = {
-        key: this.selectedTVShow,
-        count: 0,
-        state: 'selected',
-      };
-      this.selectedFacets = updateSelectedFacetBucket(
-        this.selectedFacets,
-        'program',
-        newBucket,
-      );
-    }
-  }
-
-  private get tvDropdownFiltersTemplate(): TemplateResult | typeof nothing {
-    if (this.searchType !== SearchType.TV) return nothing;
-
-    const { channelToNetwork, programToChannels } =
-      this.dataSource.tvChannelMaps;
-    const networks = channelToNetwork
-      ? [...new Set(channelToNetwork.values())]
-      : [];
-
-    let showEntries = programToChannels ? [...programToChannels.entries()] : [];
-
-    if (channelToNetwork && this.selectedTVNetwork) {
-      showEntries = showEntries.filter(([, channels]) =>
-        Object.keys(channels).some(
-          c => channelToNetwork.get(c) === this.selectedTVNetwork,
-        ),
-      );
-    }
-
-    const filterByNetworkLabel = msg('Filter by Network');
-    const filterByShowLabel = msg('Filter by Show');
-    const shows = showEntries.map(([show]) => show);
-    const loadingIndicator = html`
-      <span slot="empty-options">
-        <img src="https://archive.org/images/loading.gif" />
-      </span>
-    `;
-    const errorMessage = html`
-      <span slot="empty-options">
-        ${msg('Unable to fetch options, try again later')}
-      </span>
-    `;
-
-    return html`
-      <div id="tv-filters" slot="facets-top">
-        <ia-combo-box
-          id="tv-networks"
-          class="tv-filter-dropdown"
-          placeholder=${filterByNetworkLabel}
-          clearable
-          wrap-arrow-keys
-          sort
-          .options=${networks.map((n, i) => ({ id: `network-${i}`, text: n }))}
-          @toggle=${this.tvDropdownToggled}
-          @change=${this.networksDropdownChanged}
-        >
-          <span slot="label" class="sr-only">${filterByNetworkLabel}</span>
-          ${this.tvMapsLoading ? loadingIndicator : nothing}
-          ${this.tvMapsErrored ? errorMessage : nothing}
-        </ia-combo-box>
-        <ia-combo-box
-          id="tv-shows"
-          class="tv-filter-dropdown"
-          placeholder=${filterByShowLabel}
-          max-autocomplete-entries="500"
-          clearable
-          wrap-arrow-keys
-          sort
-          .options=${shows.map((s, i) => ({ id: `show-${i}`, text: s }))}
-          @toggle=${this.tvDropdownToggled}
-          @change=${this.showsDropdownChanged}
-        >
-          <span slot="label" class="sr-only">${filterByShowLabel}</span>
-          ${this.tvMapsLoading ? loadingIndicator : nothing}
-          ${this.tvMapsErrored ? errorMessage : nothing}
-        </ia-combo-box>
-      </div>
-    `;
-  }
-
-  /**
-   * The template for the facets component alone, without any surrounding wrappers.
-   */
-  private get facetsTemplate() {
-    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>
-      `;
-    }
-
-    // We switch to TV facet ordering & date picker if we are in a TV collection or showing TV search results
-    const shouldUseTvInterface =
-      this.isTVCollection ||
-      (!this.withinCollection && this.searchType === SearchType.TV);
-    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>
-    `;
-
-    // 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.
-    // In the `opt-in-or-login` case, we only do this if they are not logged in.
-    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"
-          @toggle=${(e: Event) => {
-            const target = e.target as HTMLDetailsElement;
-            this.collapsibleFacetsVisible = target.open;
-          }}
-        >
-          <summary>
-            <span class="collapser-icon">${chevronIcon}</span>
-            <h2>${msg('Filters')}</h2>
-          </summary>
-          ${facets}
-        </details>
-      `;
-    }
-    // Otherwise, just render the facets component bare
-    return facets;
-  }
-
-  /**
-   * The HTML template for the "Clear all filters" button, or `nothing` if no
-   * filters are currently active.
-   *
-   * @param mobile Whether to style/shorten the button for mobile view
-   */
-  private clearFiltersBtnTemplate(
-    mobile: boolean,
-  ): TemplateResult | typeof nothing {
-    if (!this.hasActiveFilters) return nothing;
-
-    const buttonClasses = classMap({
-      'clear-filters-btn': true,
-      mobile,
-    });
-
-    const buttonText = mobile ? 'Clear all' : 'Clear all filters';
-
-    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>
-    `;
-  }
-
-  /**
-   * Template for the table header content that appears atop the compact list view.
-   */
-  private 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}
-          .tileActions=${this.tileActions}
-        >
-        </tile-dispatcher>
-      </div>
-    `;
-  }
-
-  /**
-   * Handler for when the date picker's date range is changed.
-   */
-  private histogramDateRangeUpdated(
-    e: CustomEvent<{
-      minDate: string;
-      maxDate: string;
-    }>,
-  ) {
-    const { minDate, maxDate } = e.detail;
-    [this.minSelectedDate, this.maxSelectedDate] = [minDate, maxDate];
-
-    this.analyticsHandler?.sendEvent({
-      category: this.searchContext,
-      action: analyticsActions.histogramChanged,
-      label: this.dataSource.dateRangeQueryClause,
-    });
-  }
-
-  /**
-   * Emits an event indicating a change in whether the manage mode is shown.
-   */
-  private emitManageModeChangedEvent(): void {
-    this.dispatchEvent(
-      new CustomEvent<boolean>('manageModeChanged', {
-        detail: this.isManageView,
-      }),
-    );
-  }
-
-  /**
-   * Installs a new data source component and associated query state parameters into
-   * this component, causing it to efficiently update its views to represent the
-   * newly-provided data. In this way, one can reuse a single instance of
-   * <collection-browser> to handle multiple different sets of search results on
-   * a single page, each set of results being loaded & updated by its own data
-   * source.
-   *
-   * @param dataSource The data source component containing (or prepared to fetch)
-   * the tile data to be displayed.
-   * @param queryState The new query-related state that this component should
-   * represent, such as the search query, sort option, and any filters applied.
-   */
-  async installDataSourceAndQueryState(
-    dataSource: CollectionBrowserDataSourceInterface,
-    queryState: CollectionBrowserQueryState,
-  ): Promise<void> {
-    if (this.dataSource) this.removeController(this.dataSource);
-    this.dataSource = dataSource;
-    this.addController(this.dataSource);
-
-    this.baseQuery = queryState.baseQuery;
-    this.profileElement = queryState.profileElement;
-    this.searchType = queryState.searchType;
-    this.selectedFacets =
-      queryState.selectedFacets ?? getDefaultSelectedFacets();
-    this.internalFilters = queryState.internalFilters;
-    this.minSelectedDate = queryState.minSelectedDate;
-    this.maxSelectedDate = queryState.maxSelectedDate;
-    this.selectedSort = queryState.selectedSort ?? SortField.default;
-    this.sortDirection = queryState.sortDirection;
-    this.selectedTitleFilter = queryState.selectedTitleFilter;
-    this.selectedCreatorFilter = queryState.selectedCreatorFilter;
-
-    this.pagesToRender = this.initialPageNumber;
-
-    // We set this flag during the update to prevent the URL state persistence
-    // from creating an unwanted extra history entry.
-    this.dataSourceInstallInProgress = true;
-    this.requestUpdate();
-    await this.updateComplete;
-    this.dataSourceInstallInProgress = false;
-
-    if (!this.searchResultsLoading) {
-      this.setTotalResultCount(this.dataSource.totalResults);
-      this.setTileCount(this.dataSource.size);
-    }
-
-    this.refreshVisibleResults();
-  }
-
-  firstUpdated(): void {
-    this.restoreState();
-    this.setInitialSize();
-  }
-
-  /**
-   * Determines the initial size of the content container and whether or not
-   * the mobile layout should be used.
-   */
-  setInitialSize(): void {
-    this.contentWidth = this.contentContainer.getBoundingClientRect().width;
-    this.mobileView =
-      this.contentWidth > 0 && this.contentWidth < this.mobileBreakpoint;
-    this.sendLayoutSizeAnalytics();
-  }
-
-  /**
-   * Fires an analytics event indicating which type of layout was rendered:
-   * mobile or desktop.
-   */
-  private sendLayoutSizeAnalytics(): void {
-    if (this.analyticsHandler) {
-      this.layoutSizeAnalyticsSent = true;
-      this.analyticsHandler.sendEvent({
-        category: this.searchContext,
-        action: this.mobileView
-          ? analyticsActions.loadMobileView
-          : analyticsActions.loadDesktopView,
-      });
-    }
-  }
-
-  updated(changed: PropertyValues) {
-    if (changed.has('placeholderType') && this.placeholderType === null) {
-      if (!this.leftColIntersectionObserver) {
-        this.setupLeftColumnScrollListeners();
-      }
-      if (!this.facetsIntersectionObserver) {
-        this.setupFacetsScrollListeners();
-      }
-      this.updateLeftColumnHeight();
-    }
-
-    if (changed.has('analyticsHandler') && !this.layoutSizeAnalyticsSent) {
-      this.sendLayoutSizeAnalytics();
-    }
-
-    if (
-      changed.has('displayMode') ||
-      changed.has('baseNavigationUrl') ||
-      changed.has('baseImageUrl') ||
-      changed.has('loggedIn') ||
-      changed.has('tileActions') ||
-      changed.has('tileLayoutType')
-    ) {
-      this.infiniteScroller?.reload();
-    }
-
-    if (changed.has('profileElement')) {
-      this.applyDefaultProfileSort();
-    }
-
-    if (changed.has('withinCollection') && this.withinCollection) {
-      // Set a sensible default collection sort while we load results, which we will later
-      // adjust based on any sort-by metadata once the response arrives.
-      if (!this.baseQuery) {
-        this.defaultSortField = this.withinCollection.startsWith('fav-')
-          ? SortField.datefavorited
-          : SortField.weeklyview;
-        this.defaultSortDirection = 'desc';
-      }
-    }
-
-    if (changed.has('baseQuery')) {
-      this.emitBaseQueryChanged();
-    }
-    if (changed.has('searchType')) {
-      this.emitSearchTypeChanged();
-    }
-
-    if (changed.has('currentPage') || changed.has('displayMode')) {
-      this.persistState();
-    }
-
-    if (
-      changed.has('baseQuery') ||
-      changed.has('identifiers') ||
-      changed.has('minSelectedDate') ||
-      changed.has('maxSelectedDate') ||
-      changed.has('selectedFacets') ||
-      changed.has('searchService') ||
-      changed.has('withinCollection') ||
-      changed.has('withinProfile') ||
-      changed.has('profileElement')
-    ) {
-      this.dataSource.refreshLetterCounts();
-    }
-
-    if (changed.has('selectedSort') || changed.has('sortDirection')) {
-      const prevSortDirection = changed.get('sortDirection') as SortDirection;
-      this.sendSortByAnalytics(prevSortDirection);
-      this.selectedSortChanged();
-    }
-
-    if (changed.has('selectedTitleFilter')) {
-      this.sendFilterByTitleAnalytics(
-        changed.get('selectedTitleFilter') as string,
-      );
-    }
-    if (changed.has('selectedCreatorFilter')) {
-      this.sendFilterByCreatorAnalytics(
-        changed.get('selectedCreatorFilter') as string,
-      );
-    }
-
-    this.updateFacetReadiness();
-
-    if (
-      changed.has('baseQuery') ||
-      changed.has('identifiers') ||
-      changed.has('searchType') ||
-      changed.has('selectedTitleFilter') ||
-      changed.has('selectedCreatorFilter') ||
-      changed.has('minSelectedDate') ||
-      changed.has('maxSelectedDate') ||
-      changed.has('selectedSort') ||
-      changed.has('sortDirection') ||
-      changed.has('selectedFacets') ||
-      changed.has('searchService') ||
-      changed.has('withinCollection') ||
-      changed.has('withinProfile') ||
-      changed.has('profileElement')
-    ) {
-      this.handleQueryChange();
-    }
-
-    if (changed.has('searchResultsLoading')) {
-      this.emitSearchResultsLoadingChanged();
-    }
-
-    if (
-      changed.has('facetsLoading') &&
-      this.facetsLoading &&
-      this.collectionFacets
-    ) {
-      this.collectionFacets.moreLinksVisible =
-        this.searchType !== SearchType.FULLTEXT;
-    }
-
-    if (changed.has('pagesToRender')) {
-      if (!this.dataSource.endOfDataReached && this.infiniteScroller) {
-        this.infiniteScroller.itemCount = this.estimatedTileCount;
-      }
-    }
-
-    if (changed.has('isManageView')) {
-      if (this.isManageView) {
-        this.displayMode = 'grid';
-        this.fetchManageableSearchResults();
-      } else if (this.pageContext === 'search') this.infiniteScroller?.reload();
-
-      this.infiniteScroller?.refreshAllVisibleCells();
-
-      // Only emit change event if changing b/w true & false, not on initial value set.
-      if (changed.get('isManageView') !== undefined) {
-        this.emitManageModeChangedEvent();
-      }
-    }
-
-    if (changed.has('resizeObserver')) {
-      const oldObserver = changed.get(
-        'resizeObserver',
-      ) as SharedResizeObserverInterface;
-      if (oldObserver) this.disconnectResizeObserver(oldObserver);
-      this.setupResizeObserver();
-    }
-
-    this.ensureAvailableTilesDisplayed();
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback?.();
-    this.setupStateRestorationObserver();
-    this.setupResizeObserver();
-  }
-
-  disconnectedCallback(): void {
-    if (this.resizeObserver) {
-      this.disconnectResizeObserver(this.resizeObserver);
-    }
-    if (this.boundNavigationHandler) {
-      window.removeEventListener('popstate', this.boundNavigationHandler);
-    }
-
-    if (this.deferredFetchTimer) {
-      window.clearTimeout(this.deferredFetchTimer);
-      this.deferredFetchTimer = 0;
-    }
-
-    this.leftColIntersectionObserver?.disconnect();
-    this.facetsIntersectionObserver?.disconnect();
-    window.removeEventListener('resize', this.updateLeftColumnHeight);
-  }
-
-  handleResize(entry: ResizeObserverEntry): void {
-    const previousView = this.mobileView;
-    if (entry.target === this.contentContainer) {
-      this.contentWidth = entry.contentRect.width;
-      this.mobileView =
-        this.contentWidth > 0 && this.contentWidth < this.mobileBreakpoint;
-      // If changing from desktop to mobile disable transition
-      if (this.mobileView && !previousView) {
-        this.isResizeToMobile = true;
-      }
-    }
-
-    // Ensure the facet sidebar remains sized correctly
-    this.updateLeftColumnHeight();
-  }
-
-  /**
-   * Ensures that if we have new results from the data source that are not yet
-   * displayed in the infinite scroller, that they are immediately reflected
-   * in the tile count.
-   */
-  private ensureAvailableTilesDisplayed(): void {
-    if (
-      this.infiniteScroller &&
-      this.infiniteScroller.itemCount < this.dataSource.size
-    ) {
-      this.setTileCount(
-        this.dataSource.endOfDataReached
-          ? this.dataSource.size
-          : this.estimatedTileCount,
-      );
-    }
-  }
-
-  /**
-   * Updates the data source with the current state of facet readiness for loading,
-   * so that they will begin to load in at the appropriate time according to the
-   * current facet loading strategy.
-   */
-  private updateFacetReadiness(): void {
-    // There are two ways to opt into facet production:
-    //  (1) have the facets dropdown open, or
-    //  (2) if using the `opt-in-or-login` strategy, be logged into an account
-    const optedIn =
-      this.collapsibleFacetsVisible ||
-      (this.facetLoadStrategy === 'opt-in-or-login' && this.loggedIn);
-
-    // In desktop view, we are always ready to load facets *unless* we are using one of the
-    // `opt-in` strategies and have not opted in (whether by login or UI interaction).
-    const usingOptInStrategy = ['opt-in', 'opt-in-or-login'].includes(
-      this.facetLoadStrategy,
-    );
-    const desktopFacetsReady =
-      !this.mobileView && (!usingOptInStrategy || optedIn);
-
-    // In the mobile view, facets are considered ready provided we have opted in (whether by
-    // login or UI interaction).
-    const mobileFacetsReady = this.mobileView && optedIn;
-
-    this.dataSource.handleFacetReadinessChange(
-      desktopFacetsReady || mobileFacetsReady,
-    );
-  }
-
-  /**
-   * Sets up listeners for events that may require updating the left column height.
-   */
-  private setupLeftColumnScrollListeners(): void {
-    // We observe intersections between the left column's scroll sentinel and
-    // the viewport, so that we can ensure the left column is always sized to
-    // match the _available_ viewport height. This should generally be more
-    // performant than listening to scroll events on the page or column.
-    const leftColumnSentinel = this.shadowRoot?.querySelector(
-      '#left-column-scroll-sentinel',
-    );
-    if (leftColumnSentinel) {
-      this.leftColIntersectionObserver = new IntersectionObserver(
-        this.updateLeftColumnHeight,
-        {
-          threshold: [...Array(201).keys()].map(n => n / 200), // Threshold every 0.5%
-        },
-      );
-      this.leftColIntersectionObserver.observe(leftColumnSentinel);
-    }
-
-    // We also listen for window resize events, as they are not always captured
-    // by the resize observer and can affect the desired height of the left column.
-    window.addEventListener('resize', this.updateLeftColumnHeight);
-  }
-
-  /**
-   * Sets up listeners to control whether the facet sidebar shows its bottom fade-out.
-   * Note this uses a separate IntersectionObserver from the left column, because we
-   * don't need granular intersection thresholds for this.
-   */
-  private setupFacetsScrollListeners(): void {
-    const facetsSentinel = this.shadowRoot?.querySelector(
-      '#facets-scroll-sentinel',
-    );
-    if (facetsSentinel) {
-      this.facetsIntersectionObserver = new IntersectionObserver(
-        this.updateFacetFadeOut,
-      );
-      this.facetsIntersectionObserver.observe(facetsSentinel);
-    }
-  }
-
-  /**
-   * Updates the height of the left column according to its position on the page.
-   * Arrow function ensures proper `this` binding.
-   */
-  private updateLeftColumnHeight = (): void => {
-    if (this.mobileView) {
-      this.leftColumn?.style?.removeProperty('height');
-    } else {
-      const clientTop = this.leftColumn?.getBoundingClientRect().top;
-      const columnHeight = window.innerHeight - (clientTop ?? 0);
-      const cssHeightValue =
-        clientTop === 0
-          ? null
-          : // Subtract off the column's top padding so that it doesn't overflow
-            `calc(${columnHeight}px - var(--leftColumnPaddingTop, 2rem))`;
-
-      this.leftColumn?.style?.setProperty('height', cssHeightValue);
-    }
-  };
-
-  /**
-   * Toggles whether the fade-out is visible at the bottom of the facets.
-   * It should only be visible if the facets are not scrolled to the bottom.
-   * Arrow function ensures proper `this` binding.
-   */
-  private updateFacetFadeOut = (entries: IntersectionObserverEntry[]): void => {
-    const fadeElmt = this.shadowRoot?.getElementById('facets-bottom-fade');
-    fadeElmt?.classList.toggle('hidden', entries?.[0]?.isIntersecting);
-  };
-
-  /**
-   * Emits a `baseQueryChanged` event indicating an update to the search query.
-   */
-  private emitBaseQueryChanged() {
-    this.dispatchEvent(
-      new CustomEvent<{ baseQuery?: string }>('baseQueryChanged', {
-        detail: {
-          baseQuery: this.baseQuery,
-        },
-      }),
-    );
-  }
-
-  /**
-   * Emits a `searchTypeChanged` event indicating an update to the search type
-   * (e.g., metadata vs. full-text).
-   */
-  private emitSearchTypeChanged() {
-    this.dispatchEvent(
-      new CustomEvent<SearchType>('searchTypeChanged', {
-        detail: this.searchType,
-      }),
-    );
-  }
-
-  /**
-   * Emits a `facetPaneVisibilityChanged` event indicating that the facet pane has
-   * been toggled open or closed.
-   */
-  private emitFacetPaneVisibilityChanged(): void {
-    this.dispatchEvent(
-      new CustomEvent<boolean>('facetPaneVisibilityChanged', {
-        detail: this.facetPaneVisible,
-      }),
-    );
-  }
-
-  /**
-   * Emits a `searchError` event indicating that the most recent search has encountered
-   * an error from the backend.
-   */
-  emitSearchError(): void {
-    this.dispatchEvent(
-      new CustomEvent<string>('searchError', {
-        detail: this.dataSource.queryErrorMessage,
-      }),
-    );
-  }
-
-  /**
-   * Emits a `queryStateChanged` event indicating that one or more of this component's
-   * properties have changed in a way that could affect the set of search results.
-   */
-  emitQueryStateChanged() {
-    this.dispatchEvent(
-      new CustomEvent<CollectionBrowserQueryState>('queryStateChanged', {
-        detail: {
-          baseQuery: this.baseQuery,
-          withinCollection: this.withinCollection,
-          withinProfile: this.withinProfile,
-          profileElement: this.profileElement,
-          searchType: this.searchType,
-          selectedFacets: this.selectedFacets,
-          internalFilters: this.internalFilters,
-          minSelectedDate: this.minSelectedDate,
-          maxSelectedDate: this.maxSelectedDate,
-          selectedSort: this.selectedSort,
-          sortDirection: this.sortDirection,
-          selectedTitleFilter: this.selectedTitleFilter,
-          selectedCreatorFilter: this.selectedCreatorFilter,
-        },
-      }),
-    );
-  }
-
-  /**
-   * Emits an `emptyResults` event indicating that we have received an empty result set
-   * for the most recent query.
-   */
-  emitEmptyResults() {
-    this.dispatchEvent(new Event('emptyResults'));
-  }
-
-  private disconnectResizeObserver(
-    resizeObserver: SharedResizeObserverInterface,
-  ) {
-    resizeObserver.removeObserver({
-      target: this.contentContainer,
-      handler: this,
-    });
-  }
-
-  private setupResizeObserver() {
-    if (!this.resizeObserver || !this.contentContainer) return;
-    this.resizeObserver.addObserver({
-      target: this.contentContainer,
-      handler: this,
-    });
-  }
-
-  /**
-   * When the visible cells change from the infinite scroller, we want to emit
-   * which page is currently visible so the consumer can update its UI or the URL
-   *
-   * @param e
-   * @returns
-   */
-  private visibleCellsChanged(
-    e: CustomEvent<{ visibleCellIndices: number[] }>,
-  ) {
-    this.updateVisiblePage(e.detail.visibleCellIndices);
-  }
-
-  /**
-   * Recomputes the current page from the given set of visible cell indices
-   * and emits `visiblePageChanged` if the page actually changed.
-   */
-  private updateVisiblePage(visibleCellIndices: number[]): void {
-    if (this.isScrollingToCell) return;
-    if (visibleCellIndices.length === 0) return;
-
-    // The indices aren't necessarily sorted, so sort them here to ensure our
-    // calculations below find the right cell/page.
-    const sorted = [...visibleCellIndices].sort((a, b) => a - b);
-
-    // For page determination, do not count more than a single page of visible cells,
-    // since otherwise patrons using very tall screens will be treated as one page
-    // further than they actually are.
-    const lastIndexWithinCurrentPage =
-      Math.min(this.pageSize, sorted.length) - 1;
-    const lastVisibleCellIndex = sorted[lastIndexWithinCurrentPage];
-    const lastVisibleCellPage =
-      Math.floor(lastVisibleCellIndex / this.pageSize) + 1;
-
-    this.setCurrentPage(lastVisibleCellPage);
-  }
-
-  /**
-   * Sets the current page number and emits a `visiblePageChanged`
-   * event if the new page differs from the previous one.
-   */
-  private setCurrentPage(pageNumber: number): void {
-    if (this.currentPage === pageNumber) return;
-    this.currentPage = pageNumber;
-    this.dispatchEvent(
-      new CustomEvent('visiblePageChanged', {
-        detail: { pageNumber },
-      }),
-    );
-  }
-
-  // we only want to scroll on the very first query change
-  // so this keeps track of whether we've already set the initial query
-  private initialQueryChangeHappened = false;
-
-  private historyPopOccurred = false;
-
-  // this lets us store the query key so we know if it's actually changed or not
-  private previousQueryKey?: string;
-
-  /**
-   * A Promise which, after each query change, resolves once the fetches for the initial
-   * search have completed. Waits for *both* the hits and aggregations fetches to finish.
-   *
-   * Ensure you await this component's `updateComplete` promise before awaiting this
-   * one, to ensure you do not await an obsolete promise from the previous update.
-   */
-  get initialSearchComplete(): Promise<boolean> {
-    return this.dataSource.initialSearchComplete;
-  }
-
-  /**
-   * Handler for whenever the component's properties change in a way that may require
-   * fetching new results.
-   */
-  private async handleQueryChange() {
-    // only reset if the query has actually changed
-    if (
-      !this.searchService ||
-      this.dataSource.pageFetchQueryKey === this.previousQueryKey
-    ) {
-      return;
-    }
-
-    // If the new state prevents us from updating the search results, don't reset
-    if (this.baseQuery && !this.dataSource.canPerformSearch) {
-      return;
-    }
-
-    this.previousQueryKey = this.dataSource.pageFetchQueryKey;
-
-    this.totalResults = undefined;
-    this.pagesToRender =
-      this.initialPageNumber === 1
-        ? 2 // First two pages are batched into one request when starting from page 1
-        : this.initialPageNumber;
-
-    // Reset the infinite scroller's item count, so that it
-    // shows tile placeholders until the new query's results load in
-    if (this.infiniteScroller) {
-      this.infiniteScroller.itemCount = this.estimatedTileCount;
-      this.infiniteScroller.reload();
-    }
-
-    if (this.withinCollection && this.baseQuery?.trim()) {
-      this.defaultSortField = SortField.relevance;
-      this.defaultSortDirection = null;
-    }
-
-    if (!this.initialQueryChangeHappened && this.initialPageNumber > 1) {
-      this.scrollToPage(this.initialPageNumber);
-    }
-    this.initialQueryChangeHappened = true;
-
-    // if the query changed as part of a window.history pop event, we don't want to
-    // persist the state because it overwrites the forward history
-    if (!this.historyPopOccurred) {
-      this.persistState();
-    }
-    this.historyPopOccurred = false;
-  }
-
-  private setupStateRestorationObserver() {
-    if (!this.boundNavigationHandler) {
-      this.boundNavigationHandler = this.historyNavigationHandler.bind(this);
-    }
-    // when the user navigates back, we want to update the UI to match the URL
-    window.addEventListener('popstate', this.boundNavigationHandler);
-  }
-
-  private boundNavigationHandler?: () => void;
-
-  private historyNavigationHandler() {
-    this.historyPopOccurred = true;
-    this.restoreState();
-  }
-
-  private restoreState() {
-    const restorationState = this.restorationStateHandler.getRestorationState();
-    this.displayMode = restorationState.displayMode;
-    if (!this.suppressURLSinParam && restorationState.searchType != null)
-      this.searchType = restorationState.searchType;
-    this.selectedSort = restorationState.selectedSort ?? SortField.default;
-    this.sortDirection = restorationState.sortDirection ?? null;
-    this.selectedTitleFilter = restorationState.selectedTitleFilter ?? null;
-    this.selectedCreatorFilter = restorationState.selectedCreatorFilter ?? null;
-    this.selectedFacets = restorationState.selectedFacets;
-    if (!this.suppressURLQuery) this.baseQuery = restorationState.baseQuery;
-    this.setCurrentPage(restorationState.currentPage ?? 1);
-    this.minSelectedDate = restorationState.minSelectedDate;
-    this.maxSelectedDate = restorationState.maxSelectedDate;
-    if (this.currentPage && this.currentPage > 1) {
-      this.goToPage(this.currentPage);
-    }
-  }
-
-  private persistState() {
-    const isDefaultSort = this.selectedSort === this.defaultSortField;
-    const restorationState: RestorationState = {
-      displayMode: this.displayMode,
-      searchType: this.suppressURLSinParam ? undefined : this.searchType,
-      selectedSort: isDefaultSort ? SortField.default : this.selectedSort,
-      sortDirection: this.sortDirection ?? undefined,
-      selectedFacets: this.selectedFacets ?? getDefaultSelectedFacets(),
-      baseQuery: this.suppressURLQuery ? undefined : this.baseQuery,
-      currentPage: this.currentPage,
-      titleQuery: this.titleQuery,
-      creatorQuery: this.creatorQuery,
-      minSelectedDate: this.minSelectedDate,
-      maxSelectedDate: this.maxSelectedDate,
-      selectedTitleFilter: this.selectedTitleFilter ?? undefined,
-      selectedCreatorFilter: this.selectedCreatorFilter ?? undefined,
-    };
-    const persistOptions: RestorationStatePersistOptions = {
-      forceReplace: this.dataSourceInstallInProgress,
-      persistMetadataSearchType: this.isTVCollection,
-    };
-    this.restorationStateHandler.persistState(restorationState, persistOptions);
-  }
-
-  /**
-   * Emits a `searchResultsLoadingChanged` event indicating that our loading state has
-   * changed (either we have started loading new results, or we have finished loading them).
-   */
-  private emitSearchResultsLoadingChanged(): void {
-    this.dispatchEvent(
-      new CustomEvent<{ loading: boolean }>('searchResultsLoadingChanged', {
-        detail: {
-          loading: this.searchResultsLoading,
-        },
-      }),
-    );
-  }
-
-  /**
-   * Handler for when the set of selected facets changes.
-   */
-  facetsChanged(e: CustomEvent<SelectedFacets>) {
-    this.selectedFacets = e.detail;
-  }
-
-  /**
-   * Handler for when any facet is selected/unselected/hidden/unhidden.
-   * Fires analytics indicating the type of facet event that took place.
-   */
-  facetClickHandler({
-    detail: { facetType, bucket, negative },
-  }: CustomEvent<FacetEventDetails>): void {
-    let action: analyticsActions;
-    if (negative) {
-      action =
-        bucket.state !== 'none'
-          ? analyticsActions.facetNegativeSelected
-          : analyticsActions.facetNegativeDeselected;
-    } else {
-      action =
-        bucket.state !== 'none'
-          ? analyticsActions.facetSelected
-          : analyticsActions.facetDeselected;
-    }
-
-    this.analyticsHandler?.sendEvent({
-      category: this.searchContext,
-      action,
-      label: facetType,
-    });
-  }
-
-  private async scrollToPage(pageNumber: number): Promise<void> {
-    const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
-
-    // Wait for the infinite scroller be rendered before proceeding
-    let waitAttempts = 0;
-    while (!this.infiniteScroller && waitAttempts < 20) {
-      await this.updateComplete;
-      waitAttempts++;
-    }
-    if (!this.infiniteScroller) return;
-
-    // The scroller have its default `itemCount=0`, so propagate our estimated
-    // tile count before jumping to the desired page.
-    if (this.infiniteScroller.itemCount < this.estimatedTileCount) {
-      this.infiniteScroller.itemCount = this.estimatedTileCount;
-      await this.updateComplete;
-    }
-
-    // Without this setTimeout(0), Safari just pauses until the `fetchPage`
-    // is complete then scrolls to the cell.
-    await new Promise<void>(resolve => {
-      setTimeout(resolve, 0);
-    });
-
-    this.isScrollingToCell = true;
-    const scrolled = await this.infiniteScroller.scrollToCell(
-      cellIndexToScrollTo,
-      true,
-    );
-    this.isScrollingToCell = false;
-    this.infiniteScroller.refreshAllVisibleCells();
-
-    // After we finish scrolling, recompute the visible page from the new state
-    // so that it doesn't fall out of sync.
-    if (scrolled) {
-      this.updateVisiblePage(this.infiniteScroller.getVisibleCellIndices());
-    }
-  }
-
-  /**
-   * Whether sorting by relevance makes sense for the current state.
-   * Currently equivalent to having a non-empty query.
-   */
-  private get isRelevanceSortAvailable(): boolean {
-    return !!this.baseQuery?.trim();
-  }
-
-  /**
-   * Sets the total number of tiles displayed in the infinite scroller.
-   */
-  setTileCount(count: number): void {
-    if (this.infiniteScroller) {
-      this.infiniteScroller.itemCount = count;
-    }
-  }
-
-  /**
-   * Applies the default sort options for the TV search results page
-   */
-  applyDefaultTVSearchSort(): void {
-    this.defaultSortField = SortField.datearchived;
-    this.defaultSortDirection = 'desc';
-  }
-
-  /**
-   * Applies any default sort option for the current collection, by checking
-   * for one in the collection's metadata. If none is found, defaults to sorting
-   * descending by:
-   *  - Date Favorited for fav-* collections
-   *  - Weekly views for all other collections
-   */
-  applyDefaultCollectionSort(collectionInfo?: CollectionExtraInfo): void {
-    if (this.baseQuery) {
-      // If there's a query set, then we default to relevance sorting regardless of
-      // the collection metadata-specified sort.
-      this.defaultSortField = SortField.relevance;
-      this.defaultSortDirection = null;
-      return;
-    }
-
-    // Favorite collections sort on Date Favorited by default.
-    // Other collections fall back to sorting on weekly views.
-    const baseDefaultSort: string =
-      collectionInfo?.public_metadata?.identifier?.startsWith('fav-')
-        ? '-favoritedate'
-        : '-week';
-
-    // The collection metadata may override the default sorting with something else
-    const metadataSort: string | undefined =
-      collectionInfo?.public_metadata?.['sort-by'];
-
-    // Prefer the metadata-specified sort if one exists
-    const defaultSortToApply = metadataSort ?? baseDefaultSort;
-
-    // Account for both -field and field:dir formats
-    let [field, dir] = defaultSortToApply.split(':');
-    if (field.startsWith('-')) {
-      field = field.slice(1);
-      dir = 'desc';
-    } else if (!['asc', 'desc'].includes(dir)) {
-      dir = 'asc';
-    }
-
-    const sortOption = sortOptionFromAPIString(field);
-    const sortField = sortOption.field;
-    if (sortField && sortField !== SortField.default) {
-      this.defaultSortField = sortField;
-      this.defaultSortDirection = dir as SortDirection;
-    }
-  }
-
-  /**
-   * Applies the default sort option for the current profile element
-   */
-  applyDefaultProfileSort(): void {
-    if (this.profileElement) {
-      const defaultSortField = defaultProfileElementSorts[this.profileElement];
-      this.defaultSortField = defaultSortField ?? SortField.weeklyview;
-    } else {
-      this.defaultSortField = SortField.weeklyview;
-    }
-
-    this.defaultSortDirection = 'desc';
-  }
-
-  /**
-   * This is useful for determining whether we need to reload the scroller.
-   *
-   * When the fetch completes, we need to reload the scroller if the cells for that
-   * page are visible, but if the page is not currenlty visible, we don't need to reload
-   */
-  get currentVisiblePageNumbers(): number[] {
-    const visibleCells = this.infiniteScroller?.getVisibleCellIndices() ?? [];
-    const visiblePages = new Set<number>();
-    visibleCells.forEach(cellIndex => {
-      const visiblePage = Math.floor(cellIndex / this.pageSize) + 1;
-      visiblePages.add(visiblePage);
-    });
-    return Array.from(visiblePages);
-  }
-
-  /**
-   * Whether we are currently displaying results for a radio collection
-   */
-  private get isRadioCollection(): boolean {
-    const { withinCollection } = this;
-    const topCollections = ['radio'];
-    const isTopCollection = topCollections.includes(withinCollection as string);
-    const isSubCollection = topCollections.some(topCollxn =>
-      this.dataSource.parentCollections?.includes(topCollxn),
-    );
-    return isTopCollection || isSubCollection;
-  }
-
-  /**
-   * Refreshes all visible result cells in the infinite scroller.
-   */
-  refreshVisibleResults(): void {
-    this.infiniteScroller?.refreshAllVisibleCells();
-  }
-
-  /**
-   * Callback when a result is selected
-   */
-  resultSelected(event: CustomEvent<TileModel>): void {
-    if (this.isManageView) {
-      // Checked/unchecked state change -- rerender to ensure it propagates
-      // this.mapDataSource(model => ({ ...model }));
-      const cellIndex = this.dataSource.indexOf(event.detail);
-      if (cellIndex >= 0) this.infiniteScroller?.refreshCell(cellIndex);
-
-      this.requestUpdate();
-    }
-
-    this.analyticsHandler?.sendEvent({
-      category: this.searchContext,
-      action: analyticsActions.resultSelected,
-      label: event.detail.mediatype,
-    });
-
-    this.analyticsHandler?.sendEvent({
-      category: this.searchContext,
-      action: analyticsActions.resultSelected,
-      label: `page-${this.currentPage}`,
-    });
-  }
-
-  cellForIndex(index: number): HTMLTemplateResult | undefined {
-    const model = this.tileModelAtCellIndex(index);
-    if (!model) return undefined;
-
-    // Tiles show dates in UTC by default.
-    // But for certain types of time-based media, we want them to use local time instead.
-    // Those local-time cases are:
-    //  - TV or Radio search results
-    //  - TV or Radio collection results
-    const isTVSearch = this.searchType === SearchType.TV;
-    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}
-        .tileActions=${this.tileActions}
-        .layoutType=${this.tileLayoutType}
-        ?showTvClips=${isTVSearch || isTVCollection}
-        ?enableHoverPane=${true}
-        ?useLocalTime=${shouldUseLocalTime}
-        @resultSelected=${(e: CustomEvent) => this.resultSelected(e)}
-      >
-      </tile-dispatcher>
-    `;
-  }
-
-  /**
-   * When the user scrolls near to the bottom of the page, fetch the next page
-   * increase the number of pages to render and start fetching data for the new page
-   */
-  private scrollThresholdReached() {
-    if (!this.dataSource.endOfDataReached && this.dataSource.queryInitialized) {
-      this.pagesToRender += 1;
-      this.dataSource.fetchPage(this.pagesToRender);
-    }
-  }
-
-  /**
-   * Fetches search results for privileged users when in manage view.
-   *
-   * This method:
-   * 1. Checks if we're in search context and either haven't loaded results yet, or have already finished loading with > 100 total results
-   * 2. Resets the datasource pagination state
-   * 3. Fetches first page with limit based on maxPagesToManage threshold
-   * 4. Reloads the infinite scroller to display new results
-   */
-  private fetchManageableSearchResults(): void {
-    const hasNotLoadedInitialResults = !this.dataSource.totalResults;
-    const hasLoadedWithMoreResultsAvailable =
-      !this.searchResultsLoading && this.dataSource.totalResults > 100;
-
-    if (
-      this.pageContext === 'search' &&
-      (hasNotLoadedInitialResults || hasLoadedWithMoreResultsAvailable)
-    ) {
-      this.dataSource.resetPages();
-      this.dataSource.fetchPage(1, this.maxPagesToManage);
-      this.infiniteScroller?.reload();
-    }
-  }
-
-  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;
-        }
-
-        /*
-         * The results sit in a row with the optional results-aside slot, which
-         * lays out beside them as a flex item and takes its own width and spacing
-         */
-        #results-body {
-          display: flex;
-          align-items: flex-start;
-        }
-
-        #results-main {
-          flex: 1;
-          min-width: 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,
-            #fbfbfd00 0%,
-            #fbfbfdc0 50%,
-            #fbfbfd 80%,
-            #fbfbfd 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-shows {
-          --comboBoxListWidth: 300px;
-        }
-
-        .tv-filter-dropdown {
-          display: block;
-          font-size: 14px;
-          margin-left: 1px;
-          margin-bottom: 5px;
-        }
-
-        .tv-filter-dropdown::part(combo-box) {
-          outline-offset: 1px;
-        }
-
-        .tv-filter-dropdown::part(option) {
-          line-height: 1.1;
-          padding: 7px;
-        }
-
-        .tv-filter-dropdown::part(clear-button) {
-          flex: 0 0 26px;
-          --combo-box-clear-icon-size: 14px;
-        }
-
-        .tv-filter-dropdown::part(icon) {
-          width: 1.4rem;
-          height: 1.4rem;
-        }
-
-        #facets-container {
-          position: relative;
-          max-height: 0;
-          transition: max-height 0.2s ease-in-out;
-          z-index: 1;
-          margin-top: var(--facetsContainerMarginTop, 3rem);
-          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;
-        }
-
-        #results-total:not(.filtered) {
-          padding-bottom: 2rem;
-        }
-
-        .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;
-        }
-      `,
-    ];
-  }
-}