@internetarchive/collection-browser 3.4.1-alpha-webdev7761.2 → 3.4.1-alpha-webdev7761.4

package/dist/src/collection-browser.js

@@ -10,11 +10,12 @@ import { RestorationStateHandler, } from './restoration-state-handler';
 import { CollectionBrowserDataSource } from './data-source/collection-browser-data-source';
 import { FACETLESS_PAGE_ELEMENTS } from './data-source/models';
 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 { log } from './utils/log';
-import { updateSelectedFacetBucket } from './utils/facet-utils';
+import '@internetarchive/elements/ia-combo-box/ia-combo-box';
 import './empty-placeholder';
 import './tiles/tile-dispatcher';
 import './tiles/collection-browser-loading-tile';
@@ -23,7 +24,6 @@ import './manage/manage-bar';
 import './collection-facets';
 import './circular-activity-indicator';
 import './collection-facets/smart-facets/smart-facet-bar';
-import './combo-box/ia-combo-box';
 let CollectionBrowser = class CollectionBrowser extends LitElement {
     constructor() {
         super();
@@ -165,6 +165,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.tileBlurOverrideState = 'no-override';
         this.collapsibleFacetsVisible = false;
         this.placeholderType = null;
+        this.selectedTVNetwork = undefined;
+        this.selectedTVShow = undefined;
+        this.tvMapsPopulated = false;
+        this.loadingNetworks = false;
+        this.loadingShows = false;
         /** Whether layout size analytics have been sent already. */
         this.layoutSizeAnalyticsSent = false;
         /**
@@ -184,28 +189,22 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          */
         this.dataSourceInstallInProgress = false;
         this.placeholderCellTemplate = html `<collection-browser-loading-tile></collection-browser-loading-tile>`;
-        this.selectedTVNetwork = undefined;
-        this.selectedTVShow = undefined;
-        this.tvMapsPopulated = false;
-        this.loadingNetworks = false;
-        this.loadingShows = false;
         /**
          * Updates the height of the left column according to its position on the page.
          * Arrow function ensures proper `this` binding.
          */
         this.updateLeftColumnHeight = () => {
-            var _a, _b, _c, _d, _e;
             if (this.mobileView) {
-                (_b = (_a = this.leftColumn) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.removeProperty('height');
+                this.leftColumn?.style?.removeProperty('height');
             }
             else {
-                const clientTop = (_c = this.leftColumn) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().top;
-                const columnHeight = window.innerHeight - (clientTop !== null && clientTop !== void 0 ? clientTop : 0);
+                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))`;
-                (_e = (_d = this.leftColumn) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.setProperty('height', cssHeightValue);
+                this.leftColumn?.style?.setProperty('height', cssHeightValue);
             }
         };
         /**
@@ -214,9 +213,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          * Arrow function ensures proper `this` binding.
          */
         this.updateFacetFadeOut = (entries) => {
-            var _a, _b;
-            const fadeElmt = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('facets-bottom-fade');
-            fadeElmt === null || fadeElmt === void 0 ? void 0 : fadeElmt.classList.toggle('hidden', (_b = entries === null || entries === void 0 ? void 0 : entries[0]) === null || _b === void 0 ? void 0 : _b.isIntersecting);
+            const fadeElmt = this.shadowRoot?.getElementById('facets-bottom-fade');
+            fadeElmt?.classList.toggle('hidden', entries?.[0]?.isIntersecting);
         };
         // we only want to scroll on the very first query change
         // so this keeps track of whether we've already set the initial query
@@ -253,7 +251,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      */
     async getSessionId() {
         try {
-            const storedSessionId = sessionStorage === null || sessionStorage === void 0 ? void 0 : sessionStorage.getItem('cb-session');
+            const storedSessionId = sessionStorage?.getItem('cb-session');
             if (storedSessionId) {
                 return storedSessionId;
             }
@@ -264,10 +262,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             }
             this.sessionIdGenPromise = sha1(Math.random().toString());
             const newSessionId = await this.sessionIdGenPromise;
-            sessionStorage === null || sessionStorage === void 0 ? void 0 : sessionStorage.setItem('cb-session', newSessionId);
+            sessionStorage?.setItem('cb-session', newSessionId);
             return newSessionId;
         }
-        catch (_a) {
+        catch {
             // Either we can't generate the hash or we're restricted from accessing sessionStorage
             return '';
         }
@@ -378,32 +376,32 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.setPlaceholderType();
     }
     render() {
-        return html `
+        return html `
       ${this.showSmartFacetBar && this.placeholderType === null
-            ? html `<smart-facet-bar
-            .query=${this.baseQuery}
-            .aggregations=${this.dataSource.aggregations}
-            .selectedFacets=${this.selectedFacets}
-            .collectionTitles=${this.dataSource.collectionTitles}
-            .filterToggleShown=${!this.mobileView}
-            .filterToggleActive=${this.facetPaneVisible}
-            .label=${this.smartFacetBarLabel}
-            @facetsChanged=${this.facetsChanged}
+            ? html `<smart-facet-bar
+            .query=${this.baseQuery}
+            .aggregations=${this.dataSource.aggregations}
+            .selectedFacets=${this.selectedFacets}
+            .collectionTitles=${this.dataSource.collectionTitles}
+            .filterToggleShown=${!this.mobileView}
+            .filterToggleActive=${this.facetPaneVisible}
+            .label=${this.smartFacetBarLabel}
+            @facetsChanged=${this.facetsChanged}
             @filtersToggled=${() => {
                 this.facetPaneVisible = !this.facetPaneVisible;
                 this.emitFacetPaneVisibilityChanged();
-            }}
+            }}
           ></smart-facet-bar>`
-            : nothing}
-
-      <div
-        id="content-container"
-        class=${this.mobileView ? 'mobile' : 'desktop'}
-      >
+            : nothing}
+
+      <div
+        id="content-container"
+        class=${this.mobileView ? 'mobile' : 'desktop'}
+      >
         ${this.placeholderType
             ? this.emptyPlaceholderTemplate
-            : this.collectionBrowserTemplate}
-      </div>
+            : this.collectionBrowserTemplate}
+      </div>
     `;
     }
     /**
@@ -415,10 +413,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      *  - An error occurred on the most recent search attempt
      */
     setPlaceholderType() {
-        var _a, _b;
         const isInitialized = this.dataSource.queryInitialized;
-        const hasQuery = !!((_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim());
-        const hasIdentifiers = !!((_b = this.identifiers) === null || _b === void 0 ? void 0 : _b.length);
+        const hasQuery = !!this.baseQuery?.trim();
+        const hasIdentifiers = !!this.identifiers?.length;
         const isCollection = !!this.withinCollection;
         const isProfile = !!this.withinProfile;
         const isSearchResults = !isCollection && !isProfile;
@@ -448,24 +445,23 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Template for the placeholder content to show when no results are available.
      */
     get emptyPlaceholderTemplate() {
-        var _a;
-        return html `
-      <empty-placeholder
-        .placeholderType=${this.placeholderType}
-        ?isMobileView=${this.mobileView}
-        ?isCollection=${!!this.withinCollection}
-        .detailMessage=${(_a = this.dataSource.queryErrorMessage) !== null && _a !== void 0 ? _a : ''}
-        .baseNavigationUrl=${this.baseNavigationUrl}
-      ></empty-placeholder>
+        return html `
+      <empty-placeholder
+        .placeholderType=${this.placeholderType}
+        ?isMobileView=${this.mobileView}
+        ?isCollection=${!!this.withinCollection}
+        .detailMessage=${this.dataSource.queryErrorMessage ?? ''}
+        .baseNavigationUrl=${this.baseNavigationUrl}
+      ></empty-placeholder>
     `;
     }
     /**
      * Top-level template for rendering the left (facets) and right (results) columns.
      */
     get collectionBrowserTemplate() {
-        return html `
-      <div id="left-column-scroll-sentinel"></div>
-      ${this.leftColumnTemplate} ${this.rightColumnTemplate}
+        return html `
+      <div id="left-column-scroll-sentinel"></div>
+      ${this.leftColumnTemplate} ${this.rightColumnTemplate}
     `;
     }
     /**
@@ -484,33 +480,33 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * accordion-style facets.
      */
     get mobileLeftColumnTemplate() {
-        return html `
-      <div
-        id="left-column"
-        class="column${this.isResizeToMobile ? ' preload' : ''}"
-      >
-        ${this.facetTopViewSlot} ${this.resultsCountTemplate}
-        <div id="facets-header-container">${this.mobileFacetsTemplate}</div>
-      </div>
+        return html `
+      <div
+        id="left-column"
+        class="column${this.isResizeToMobile ? ' preload' : ''}"
+      >
+        ${this.facetTopViewSlot} ${this.resultsCountTemplate}
+        <div id="facets-header-container">${this.mobileFacetsTemplate}</div>
+      </div>
     `;
     }
     /**
      * Template for the desktop version of the left column, displaying the facets sidebar.
      */
     get desktopLeftColumnTemplate() {
-        return html `
-      <div id="left-column" class="column" ?hidden=${!this.facetPaneVisible}>
-        ${this.facetTopViewSlot}
-        <div id="facets-header-container">
-          <h2 id="facets-header" class="sr-only">${msg('Filters')}</h2>
-          ${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
-        </div>
-        <div id="facets-container" aria-labelledby="facets-header">
-          ${this.facetsTemplate}
-          <div id="facets-scroll-sentinel"></div>
-        </div>
-        <div id="facets-bottom-fade"></div>
-      </div>
+        return html `
+      <div id="left-column" class="column" ?hidden=${!this.facetPaneVisible}>
+        ${this.facetTopViewSlot}
+        <div id="facets-header-container">
+          <h2 id="facets-header" class="sr-only">${msg('Filters')}</h2>
+          ${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
+        </div>
+        <div id="facets-container" aria-labelledby="facets-header">
+          ${this.facetsTemplate}
+          <div id="facets-scroll-sentinel"></div>
+        </div>
+        <div id="facets-bottom-fade"></div>
+      </div>
     `;
     }
     /**
@@ -518,8 +514,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * - mainly used to render userlists
      */
     get facetTopViewSlot() {
-        return html `<div id="facet-top-view">
-      <slot name="facet-top-slot"></slot>
+        return html `<div id="facet-top-view">
+      <slot name="facet-top-slot"></slot>
     </div>`;
     }
     /**
@@ -527,22 +523,22 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Changes to the "Searching..." label if the search results are still loading.
      */
     get resultsCountTemplate() {
-        var _a;
         if (this.suppressResultCount)
             return nothing;
         const shouldShowSearching = this.searchResultsLoading || this.totalResults === undefined;
-        const resultsCount = (_a = this.totalResults) === null || _a === void 0 ? void 0 : _a.toLocaleString();
+        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" data-testid="results-total">
-        <span id="big-results-count">
-          ${shouldShowSearching ? html `Searching&hellip;` : resultsCount}
-        </span>
-        <span id="big-results-label">
-          ${shouldShowSearching ? nothing : resultsLabel}
-        </span>
-      </div>
+        return html `
+      <div id="results-total" 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>
     `;
     }
     /**
@@ -555,45 +551,45 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             'full-width': !this.facetPaneVisible,
             'smart-results-spacing': !!this.showSmartResults,
         });
-        return html `
-      <div id="right-column" class=${rightColumnClasses}>
+        return html `
+      <div id="right-column" class=${rightColumnClasses}>
         ${this.showSmartResults
             ? html `<slot name="smart-results"></slot>`
-            : nothing}
-        <section id="results">
-          <h2 class="results-section-heading">
-            <slot name="results-heading"></slot>
-          </h2>
-          <div id="cb-top-view">
-            <slot name="cb-top-slot"></slot>
-          </div>
+            : nothing}
+        <section id="results">
+          <h2 class="results-section-heading">
+            <slot name="results-heading"></slot>
+          </h2>
+          <div id="cb-top-view">
+            <slot name="cb-top-slot"></slot>
+          </div>
           ${this.isManageView
             ? this.manageBarTemplate
-            : this.sortFilterBarTemplate}
-          <slot name="cb-results"></slot>
+            : this.sortFilterBarTemplate}
+          <slot name="cb-results"></slot>
           ${this.displayMode === `list-compact` && this.totalResults
             ? this.listHeaderTemplate
-            : nothing}
-          ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
-        </section>
-      </div>
+            : nothing}
+          ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
+        </section>
+      </div>
     `;
     }
     /**
      * Template for the infinite scroller widget that contains the result tiles.
      */
     get infiniteScrollerTemplate() {
-        return html `<infinite-scroller
-      class=${this.infiniteScrollerClasses}
-      itemCount=${this.placeholderType ? 0 : nothing}
-      ariaLandmarkLabel="Search results"
-      .cellProvider=${this}
-      .placeholderCellTemplate=${this.placeholderCellTemplate}
-      @scrollThresholdReached=${this.scrollThresholdReached}
-      @visibleCellsChanged=${this.visibleCellsChanged}
+        return html `<infinite-scroller
+      class=${this.infiniteScrollerClasses}
+      itemCount=${this.placeholderType ? 0 : nothing}
+      ariaLandmarkLabel="Search results"
+      .cellProvider=${this}
+      .placeholderCellTemplate=${this.placeholderCellTemplate}
+      @scrollThresholdReached=${this.scrollThresholdReached}
+      @visibleCellsChanged=${this.visibleCellsChanged}
       >${this.displayMode === 'grid'
             ? html `<slot name="result-last-tile" slot="result-last-tile"></slot>`
-            : nothing}
+            : nothing}
     </infinite-scroller>`;
     }
     /**
@@ -601,9 +597,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * given the current display mode & placeholder case.
      */
     get infiniteScrollerClasses() {
-        var _a;
         return classMap({
-            [(_a = this.displayMode) !== null && _a !== void 0 ? _a : '']: !!this.displayMode,
+            [this.displayMode ?? '']: !!this.displayMode,
             hidden: !!this.placeholderType,
         });
     }
@@ -611,7 +606,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Template for the sort & filtering bar that appears atop the search results.
      */
     get sortFilterBarTemplate() {
-        var _a;
         if (this.suppressSortBar)
             return nothing;
         // Determine the set of sortable fields that should be shown in the sort bar
@@ -619,7 +613,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         let defaultDateSort = SortField.date;
         let sortFieldAvailability = defaultSortAvailability;
         // We adjust the sort options for a couple of special cases...
-        if ((_a = this.withinCollection) === null || _a === void 0 ? void 0 : _a.startsWith('fav-')) {
+        if (this.withinCollection?.startsWith('fav-')) {
             // When viewing a fav- collection, we include the Date Favorited option and show
             // it as the default in the date dropdown.
             defaultDateSort = SortField.datefavorited;
@@ -634,32 +628,32 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         // We only show relevance sort if a search query is currently defined
         sortFieldAvailability.relevance = this.isRelevanceSortAvailable;
-        return html `
-      <sort-filter-bar
-        .defaultSortField=${this.defaultSortField}
-        .defaultSortDirection=${this.defaultSortDirection}
-        .defaultViewSort=${defaultViewSort}
-        .defaultDateSort=${defaultDateSort}
-        .selectedSort=${this.selectedSort}
-        .sortDirection=${this.sortDirection}
-        .sortFieldAvailability=${sortFieldAvailability}
-        .displayMode=${this.displayMode}
-        .selectedTitleFilter=${this.selectedTitleFilter}
-        .selectedCreatorFilter=${this.selectedCreatorFilter}
-        .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
-        .resizeObserver=${this.resizeObserver}
-        .enableSortOptionsSlot=${this.enableSortOptionsSlot}
-        .suppressDisplayModes=${this.suppressDisplayModes}
-        @sortChanged=${this.userChangedSort}
-        @displayModeChanged=${this.displayModeChanged}
-        @titleLetterChanged=${this.titleLetterSelected}
-        @creatorLetterChanged=${this.creatorLetterSelected}
-      >
-        ${this.tileBlurCheckboxTemplate}
-        <slot name="sort-options-left" slot="sort-options-left"></slot>
-        <slot name="sort-options" slot="sort-options"></slot>
-        <slot name="sort-options-right" slot="sort-options-right"></slot>
-      </sort-filter-bar>
+        return html `
+      <sort-filter-bar
+        .defaultSortField=${this.defaultSortField}
+        .defaultSortDirection=${this.defaultSortDirection}
+        .defaultViewSort=${defaultViewSort}
+        .defaultDateSort=${defaultDateSort}
+        .selectedSort=${this.selectedSort}
+        .sortDirection=${this.sortDirection}
+        .sortFieldAvailability=${sortFieldAvailability}
+        .displayMode=${this.displayMode}
+        .selectedTitleFilter=${this.selectedTitleFilter}
+        .selectedCreatorFilter=${this.selectedCreatorFilter}
+        .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
+        .resizeObserver=${this.resizeObserver}
+        .enableSortOptionsSlot=${this.enableSortOptionsSlot}
+        .suppressDisplayModes=${this.suppressDisplayModes}
+        @sortChanged=${this.userChangedSort}
+        @displayModeChanged=${this.displayModeChanged}
+        @titleLetterChanged=${this.titleLetterSelected}
+        @creatorLetterChanged=${this.creatorLetterSelected}
+      >
+        ${this.tileBlurCheckboxTemplate}
+        <slot name="sort-options-left" slot="sort-options-left"></slot>
+        <slot name="sort-options" slot="sort-options"></slot>
+        <slot name="sort-options-right" slot="sort-options-right"></slot>
+      </sort-filter-bar>
     `;
     }
     /**
@@ -667,24 +661,23 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * sensitive content in result tiles.
      */
     get tileBlurCheckboxTemplate() {
-        var _a;
         // Only show the checkbox for @archive.org users
-        if (!((_a = this.dataSource.sessionContext) === null || _a === void 0 ? void 0 : _a.is_archive_user))
+        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>
+        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>
     `;
     }
     /**
@@ -710,27 +703,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * showing the management view. This generally replaces the sort bar when present.
      */
     get manageBarTemplate() {
-        return html `
-      <manage-bar
-        .label=${this.manageViewLabel}
-        .modalManager=${this.modalManager}
-        .selectedItems=${this.dataSource.checkedTileModels}
-        .manageViewModalMsg=${this.manageViewModalMsg}
-        showSelectAll
-        showUnselectAll
-        ?showItemManageButton=${this.pageContext === 'search'}
-        ?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
-        @removeItems=${this.handleRemoveItems}
-        @manageItems=${this.handleManageItems}
-        @selectAll=${() => this.dataSource.checkAllTiles()}
-        @unselectAll=${() => this.dataSource.uncheckAllTiles()}
+        return html `
+      <manage-bar
+        .label=${this.manageViewLabel}
+        .modalManager=${this.modalManager}
+        .selectedItems=${this.dataSource.checkedTileModels}
+        .manageViewModalMsg=${this.manageViewModalMsg}
+        showSelectAll
+        showUnselectAll
+        ?showItemManageButton=${this.pageContext === 'search'}
+        ?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
+        @removeItems=${this.handleRemoveItems}
+        @manageItems=${this.handleManageItems}
+        @selectAll=${() => this.dataSource.checkAllTiles()}
+        @unselectAll=${() => this.dataSource.uncheckAllTiles()}
         @cancel=${() => {
             this.isManageView = false;
             this.dataSource.uncheckAllTiles();
             if (this.searchResultsLoading)
                 this.dataSource.resetPages();
-        }}
-      ></manage-bar>
+        }}
+      ></manage-bar>
     `;
     }
     /**
@@ -741,10 +734,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.dispatchEvent(new CustomEvent('itemRemovalRequested', {
             detail: {
                 items: this.dataSource.checkedTileModels.map(model => {
-                    var _a;
                     // For favorited searches, we attach a search: prefix to differentiate it from an item
-                    const searchPrefix = (model === null || model === void 0 ? void 0 : model.mediatype) === 'search' ? 'search:' : '';
-                    const identifier = (_a = model === null || model === void 0 ? void 0 : model.identifier) !== null && _a !== void 0 ? _a : '';
+                    const searchPrefix = model?.mediatype === 'search' ? 'search:' : '';
+                    const identifier = model?.identifier ?? '';
                     return `${searchPrefix}${identifier}`;
                 }),
             },
@@ -756,27 +748,24 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     handleManageItems() {
         this.dispatchEvent(new CustomEvent('itemManagerRequested', {
             detail: {
-                items: this.dataSource.checkedTileModels.map(model => (model === null || model === void 0 ? void 0 : model.identifier) ? model.identifier : ''),
+                items: this.dataSource.checkedTileModels.map(model => model?.identifier ? model.identifier : ''),
             },
         }));
     }
     refreshSmartFacets() {
-        var _a;
-        (_a = this.smartFacetBar) === null || _a === void 0 ? void 0 : _a.refresh();
+        this.smartFacetBar?.refresh();
     }
     /**
      * Handler to show processing modal while removing item
      */
     showRemoveItemsProcessingModal() {
-        var _a;
-        (_a = this.manageBar) === null || _a === void 0 ? void 0 : _a.showRemoveItemsProcessingModal();
+        this.manageBar?.showRemoveItemsProcessingModal();
     }
     /**
      * Handler to show error modal when item removal failed
      */
     showRemoveItemsErrorModal() {
-        var _a;
-        (_a = this.manageBar) === null || _a === void 0 ? void 0 : _a.showRemoveItemsErrorModal();
+        this.manageBar?.showRemoveItemsErrorModal();
     }
     /**
      * Removes all tile models that are currently checked & adjusts the paging
@@ -789,10 +778,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Handler for when the tile blurring checkbox state is toggled
      */
     tileBlurCheckboxChanged(e) {
-        var _a;
         const { checked } = e.target;
         this.tileBlurOverrideState = checked ? 'on' : 'off';
-        (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshAllVisibleCells();
+        this.infiniteScroller?.refreshAllVisibleCells();
     }
     /**
      * Whether result tiles should have the default blurring of sensitive content suppressed.
@@ -807,8 +795,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         // Not overriding, so use the preference from session context
         const { sessionContext } = this.dataSource;
-        const userPrefs = sessionContext === null || sessionContext === void 0 ? void 0 : sessionContext.pps_relevant_user_preferences;
-        const blurringPref = userPrefs === null || userPrefs === void 0 ? void 0 : userPrefs.display__blur_moderated_content;
+        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';
@@ -817,11 +805,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Handler for when the user changes the selected sort option or direction.
      */
     userChangedSort(e) {
-        var _a;
         const { selectedSort, sortDirection } = e.detail;
         this.selectedSort = selectedSort;
         this.sortDirection = sortDirection;
-        if (((_a = this.currentPage) !== null && _a !== void 0 ? _a : 1) > 1) {
+        if ((this.currentPage ?? 1) > 1) {
             this.goToPage(1);
         }
         this.currentPage = 1;
@@ -831,9 +818,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * @param prevSortDirection Which sort direction was previously set.
      */
     sendSortByAnalytics(prevSortDirection) {
-        var _a;
         const directionCleared = prevSortDirection && !this.sortDirection;
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+        this.analyticsHandler?.sendEvent({
             category: this.searchContext,
             action: analyticsActions.sortBy,
             label: `${this.selectedSort}${this.sortDirection || directionCleared ? `-${this.sortDirection}` : ''}`,
@@ -851,14 +837,13 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * An object representing the current sort field & direction.
      */
     get sortParam() {
-        var _a;
         const sortOption = SORT_OPTIONS[this.selectedSort];
-        if (!(sortOption === null || sortOption === void 0 ? void 0 : sortOption.handledBySearchService)) {
+        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 = (_a = sortOption.searchServiceKey) !== null && _a !== void 0 ? _a : urlSortParam === null || urlSortParam === void 0 ? void 0 : urlSortParam.replace(/^-/, '');
+        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)
@@ -871,8 +856,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * An object representing the default sort field & direction, if none are explicitly set.
      */
     get defaultSortParam() {
-        var _a;
-        const direction = (_a = this.defaultSortDirection) !== null && _a !== void 0 ? _a : 'asc';
+        const direction = this.defaultSortDirection ?? 'asc';
         const field = SORT_OPTIONS[this.defaultSortField].searchServiceKey;
         if (!field)
             return null;
@@ -882,10 +866,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Handler for when the display mode option is changed (grid/list/compact-list views).
      */
     displayModeChanged(e) {
-        var _a;
         this.displayMode = e.detail.displayMode;
         if (this.displayMode) {
-            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+            this.analyticsHandler?.sendEvent({
                 category: this.searchContext,
                 action: analyticsActions.displayMode,
                 label: this.displayMode,
@@ -915,12 +898,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
      */
     sendFilterByTitleAnalytics(prevSelectedLetter) {
-        var _a;
         if (!prevSelectedLetter && !this.selectedTitleFilter) {
             return;
         }
         const cleared = prevSelectedLetter && !this.selectedTitleFilter;
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+        this.analyticsHandler?.sendEvent({
             category: this.searchContext,
             action: analyticsActions.filterByTitle,
             label: cleared
@@ -933,12 +915,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
      */
     sendFilterByCreatorAnalytics(prevSelectedLetter) {
-        var _a;
         if (!prevSelectedLetter && !this.selectedCreatorFilter) {
             return;
         }
         const cleared = prevSelectedLetter && !this.selectedCreatorFilter;
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+        this.analyticsHandler?.sendEvent({
             category: this.searchContext,
             action: analyticsActions.filterByCreator,
             label: cleared
@@ -968,25 +949,24 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if (FACETLESS_PAGE_ELEMENTS.includes(this.profileElement))
             return nothing;
         const toggleFacetsVisible = (e) => {
-            var _a;
             const target = e.target;
             this.isResizeToMobile = false;
             this.collapsibleFacetsVisible = target.open;
-            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+            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>
+        return html `
+      <details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
+        <summary>
+          <span class="collapser-icon">${chevronIcon}</span>
+          <h2>${msg('Filters')}</h2>
+          ${this.clearFiltersBtnTemplate(true)}
+        </summary>
+        ${this.facetsTemplate}
+      </details>
     `;
     }
     async networksDropdownToggled() {
@@ -1006,10 +986,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.tvMapsPopulated = true;
     }
     async networksDropdownChanged() {
-        var _a;
         const previousNetwork = this.selectedTVNetwork;
-        const newNetwork = (_a = this.tvNetworksDropdown.selectedOption) === null || _a === void 0 ? void 0 : _a.text;
-        this.selectedTVNetwork = newNetwork !== null && newNetwork !== void 0 ? newNetwork : undefined;
+        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) {
@@ -1032,10 +1011,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
     }
     async showsDropdownChanged() {
-        var _a;
         const previousShow = this.selectedTVShow;
-        const newShow = (_a = this.tvShowsDropdown.selectedOption) === null || _a === void 0 ? void 0 : _a.text;
-        this.selectedTVShow = newShow !== null && newShow !== void 0 ? newShow : undefined;
+        const newShow = this.tvShowsDropdown.selectedOption?.text;
+        this.selectedTVShow = newShow ?? undefined;
         // Remove any previously-applied shows filter
         if (previousShow !== undefined) {
             const removedBucket = {
@@ -1057,7 +1035,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     get tvDropdownFiltersTemplate() {
         if (this.searchType !== SearchType.TV)
             return nothing;
-        log('start filters template preprocess', Date.now());
         const { channelToNetwork, programToChannels } = this.dataSource.tvChannelMaps;
         const networks = channelToNetwork
             ? [...new Set(channelToNetwork.values())]
@@ -1067,44 +1044,45 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             showEntries = showEntries.filter(([, channels]) => Object.keys(channels).some(c => channelToNetwork.get(c) === this.selectedTVNetwork));
         }
         const shows = showEntries.map(([show]) => show);
-        log('end filters template preprocess', Date.now());
-        const loadingIndicator = html `
-      <img src="https://archive.org/images/loading.gif" />
+        const loadingIndicator = html `
+      <img src="https://archive.org/images/loading.gif" />
     `;
-        return html `
-      <div id="tv-filters" slot="facets-top">
-        <ia-combo-box
-          id="tv-networks"
-          class="tv-filter-dropdown"
-          placeholder="Filter by Network"
-          wrap-arrow-keys
-          sort
-          .options=${networks.map((n, i) => ({ id: `network-${i}`, text: n }))}
-          @toggle=${this.networksDropdownToggled}
-          @change=${this.networksDropdownChanged}
-        >
-          <span class="sr-only">${msg('Filter by Network')}</span>
+        return html `
+      <div id="tv-filters" slot="facets-top">
+        <ia-combo-box
+          id="tv-networks"
+          class="tv-filter-dropdown"
+          placeholder="Filter by Network"
+          clearable
+          wrap-arrow-keys
+          sort
+          .options=${networks.map((n, i) => ({ id: `network-${i}`, text: n }))}
+          @toggle=${this.networksDropdownToggled}
+          @change=${this.networksDropdownChanged}
+        >
+          <span slot="label" class="sr-only">${msg('Filter by Network')}</span>
           ${this.loadingNetworks
             ? html `<span slot="empty-options">${loadingIndicator}</span>`
-            : nothing}
-        </ia-combo-box>
-        <ia-combo-box
-          id="tv-shows"
-          class="tv-filter-dropdown"
-          placeholder="Filter by Show"
-          max-autocomplete-entries="500"
-          wrap-arrow-keys
-          sort
-          .options=${shows.map((s, i) => ({ id: `show-${i}`, text: s }))}
-          @toggle=${this.showsDropdownToggled}
-          @change=${this.showsDropdownChanged}
-        >
-          <span class="sr-only">${msg('Filter by Show')}</span>
+            : nothing}
+        </ia-combo-box>
+        <ia-combo-box
+          id="tv-shows"
+          class="tv-filter-dropdown"
+          placeholder="Filter by Show"
+          max-autocomplete-entries="500"
+          clearable
+          wrap-arrow-keys
+          sort
+          .options=${shows.map((s, i) => ({ id: `show-${i}`, text: s }))}
+          @toggle=${this.showsDropdownToggled}
+          @change=${this.showsDropdownChanged}
+        >
+          <span slot="label" class="sr-only">${msg('Filter by Show')}</span>
           ${this.loadingShows
             ? html `<span slot="empty-options">${loadingIndicator}</span>`
-            : nothing}
-        </ia-combo-box>
-      </div>
+            : nothing}
+        </ia-combo-box>
+      </div>
     `;
     }
     /**
@@ -1114,10 +1092,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if (FACETLESS_PAGE_ELEMENTS.includes(this.profileElement))
             return nothing;
         if (this.facetLoadStrategy === 'off') {
-            return html `
-        <p class="facets-message">
-          ${msg('Facets are temporarily unavailable.')}
-        </p>
+            return html `
+        <p class="facets-message">
+          ${msg('Facets are temporarily unavailable.')}
+        </p>
       `;
         }
         // We switch to TV facet ordering & date picker if we are in a TV collection or showing TV search results
@@ -1126,46 +1104,46 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const facetDisplayOrder = shouldUseTvInterface
             ? tvFacetDisplayOrder
             : defaultFacetDisplayOrder;
-        const facets = html `
-      <collection-facets
-        .collectionPagePath=${this.collectionPagePath}
-        .parentCollections=${this.dataSource.parentCollections}
-        .pageSpecifierParams=${this.dataSource.pageSpecifierParams}
-        .searchService=${this.searchService}
-        .featureFeedbackService=${this.featureFeedbackService}
-        .recaptchaManager=${this.recaptchaManager}
-        .resizeObserver=${this.resizeObserver}
-        .searchType=${this.searchType}
-        .aggregations=${this.dataSource.aggregations}
-        .histogramAggregation=${this.dataSource.histogramAggregation}
-        .minSelectedDate=${this.minSelectedDate}
-        .maxSelectedDate=${this.maxSelectedDate}
-        .selectedFacets=${this.selectedFacets}
-        .baseNavigationUrl=${this.baseNavigationUrl}
-        .collectionTitles=${this.dataSource.collectionTitles}
-        .tvChannelAliases=${this.dataSource.tvChannelAliases}
-        .showHistogramDatePicker=${this.showHistogramDatePicker}
-        .allowExpandingDatePicker=${!this.mobileView}
-        .allowDatePickerMonths=${shouldUseTvInterface}
-        .contentWidth=${this.contentWidth}
-        .query=${this.baseQuery}
-        .identifiers=${this.identifiers}
-        .filterMap=${this.dataSource.filterMap}
-        .isManageView=${this.isManageView}
-        .modalManager=${this.modalManager}
-        .analyticsHandler=${this.analyticsHandler}
-        .facetDisplayOrder=${facetDisplayOrder}
-        .isTvSearch=${shouldUseTvInterface}
-        ?collapsableFacets=${this.mobileView}
-        ?facetsLoading=${this.facetsLoading}
-        ?histogramAggregationLoading=${this.facetsLoading}
-        ?suppressMediatypeFacets=${this.suppressMediatypeFacets}
-        @facetClick=${this.facetClickHandler}
-        @facetsChanged=${this.facetsChanged}
-        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-      >
-        ${this.tvDropdownFiltersTemplate}
-      </collection-facets>
+        const facets = html `
+      <collection-facets
+        .collectionPagePath=${this.collectionPagePath}
+        .parentCollections=${this.dataSource.parentCollections}
+        .pageSpecifierParams=${this.dataSource.pageSpecifierParams}
+        .searchService=${this.searchService}
+        .featureFeedbackService=${this.featureFeedbackService}
+        .recaptchaManager=${this.recaptchaManager}
+        .resizeObserver=${this.resizeObserver}
+        .searchType=${this.searchType}
+        .aggregations=${this.dataSource.aggregations}
+        .histogramAggregation=${this.dataSource.histogramAggregation}
+        .minSelectedDate=${this.minSelectedDate}
+        .maxSelectedDate=${this.maxSelectedDate}
+        .selectedFacets=${this.selectedFacets}
+        .baseNavigationUrl=${this.baseNavigationUrl}
+        .collectionTitles=${this.dataSource.collectionTitles}
+        .tvChannelAliases=${this.dataSource.tvChannelAliases}
+        .showHistogramDatePicker=${this.showHistogramDatePicker}
+        .allowExpandingDatePicker=${!this.mobileView}
+        .allowDatePickerMonths=${shouldUseTvInterface}
+        .contentWidth=${this.contentWidth}
+        .query=${this.baseQuery}
+        .identifiers=${this.identifiers}
+        .filterMap=${this.dataSource.filterMap}
+        .isManageView=${this.isManageView}
+        .modalManager=${this.modalManager}
+        .analyticsHandler=${this.analyticsHandler}
+        .facetDisplayOrder=${facetDisplayOrder}
+        .isTvSearch=${shouldUseTvInterface}
+        ?collapsableFacets=${this.mobileView}
+        ?facetsLoading=${this.facetsLoading}
+        ?histogramAggregationLoading=${this.facetsLoading}
+        ?suppressMediatypeFacets=${this.suppressMediatypeFacets}
+        @facetClick=${this.facetClickHandler}
+        @facetsChanged=${this.facetsChanged}
+        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+      >
+        ${this.tvDropdownFiltersTemplate}
+      </collection-facets>
     `;
         // If we are using one of the opt-in facet load strategies, we may need to wrap the
         // desktop view facets in a <details> widget so that patrons can opt into loading them.
@@ -1173,20 +1151,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const showDesktopOptInWidget = this.facetLoadStrategy === 'opt-in' ||
             (this.facetLoadStrategy === 'opt-in-or-login' && !this.loggedIn);
         if (showDesktopOptInWidget && !this.mobileView) {
-            return html `
-        <details
-          class="desktop-facets-dropdown"
+            return html `
+        <details
+          class="desktop-facets-dropdown"
           @toggle=${(e) => {
                 const target = e.target;
                 this.collapsibleFacetsVisible = target.open;
-            }}
-        >
-          <summary>
-            <span class="collapser-icon">${chevronIcon}</span>
-            <h2>${msg('Filters')}</h2>
-          </summary>
-          ${facets}
-        </details>
+            }}
+        >
+          <summary>
+            <span class="collapser-icon">${chevronIcon}</span>
+            <h2>${msg('Filters')}</h2>
+          </summary>
+          ${facets}
+        </details>
       `;
         }
         // Otherwise, just render the facets component bare
@@ -1206,44 +1184,43 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             mobile,
         });
         const buttonText = mobile ? 'Clear all' : 'Clear all filters';
-        return html `
-      <div class="clear-filters-btn-row">
+        return html `
+      <div class="clear-filters-btn-row">
         ${mobile
             ? html `<span class="clear-filters-btn-separator">&nbsp;</span>`
-            : nothing}
-        <button class=${buttonClasses} @click=${this.clearFilters}>
-          ${buttonText}
-        </button>
-      </div>
+            : nothing}
+        <button class=${buttonClasses} @click=${this.clearFilters}>
+          ${buttonText}
+        </button>
+      </div>
     `;
     }
     /**
      * Template for the table header content that appears atop the compact list view.
      */
     get listHeaderTemplate() {
-        return html `
-      <div id="list-header">
-        <tile-dispatcher
-          .tileDisplayMode=${'list-header'}
-          .resizeObserver=${this.resizeObserver}
-          .sortParam=${this.sortParam}
-          .defaultSortParam=${this.defaultSortParam}
-          .mobileBreakpoint=${this.mobileBreakpoint}
-          .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.shouldSuppressTileBlurring}
-        >
-        </tile-dispatcher>
-      </div>
+        return html `
+      <div id="list-header">
+        <tile-dispatcher
+          .tileDisplayMode=${'list-header'}
+          .resizeObserver=${this.resizeObserver}
+          .sortParam=${this.sortParam}
+          .defaultSortParam=${this.defaultSortParam}
+          .mobileBreakpoint=${this.mobileBreakpoint}
+          .loggedIn=${this.loggedIn}
+          .suppressBlurring=${this.shouldSuppressTileBlurring}
+        >
+        </tile-dispatcher>
+      </div>
     `;
     }
     /**
      * Handler for when the date picker's date range is changed.
      */
     histogramDateRangeUpdated(e) {
-        var _a;
         const { minDate, maxDate } = e.detail;
         [this.minSelectedDate, this.maxSelectedDate] = [minDate, maxDate];
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+        this.analyticsHandler?.sendEvent({
             category: this.searchContext,
             action: analyticsActions.histogramChanged,
             label: this.dateRangeQueryClause,
@@ -1280,7 +1257,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * represent, such as the search query, sort option, and any filters applied.
      */
     async installDataSourceAndQueryState(dataSource, queryState) {
-        var _a, _b;
         log('Installing data source & query state in CB:', dataSource, queryState);
         if (this.dataSource)
             this.removeController(this.dataSource);
@@ -1290,11 +1266,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.profileElement = queryState.profileElement;
         this.searchType = queryState.searchType;
         this.selectedFacets =
-            (_a = queryState.selectedFacets) !== null && _a !== void 0 ? _a : getDefaultSelectedFacets();
+            queryState.selectedFacets ?? getDefaultSelectedFacets();
         this.internalFilters = queryState.internalFilters;
         this.minSelectedDate = queryState.minSelectedDate;
         this.maxSelectedDate = queryState.maxSelectedDate;
-        this.selectedSort = (_b = queryState.selectedSort) !== null && _b !== void 0 ? _b : SortField.default;
+        this.selectedSort = queryState.selectedSort ?? SortField.default;
         this.sortDirection = queryState.sortDirection;
         this.selectedTitleFilter = queryState.selectedTitleFilter;
         this.selectedCreatorFilter = queryState.selectedCreatorFilter;
@@ -1341,7 +1317,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
     }
     updated(changed) {
-        var _a, _b, _c;
         if (changed.has('placeholderType') && this.placeholderType === null) {
             if (!this.leftColIntersectionObserver) {
                 this.setupLeftColumnScrollListeners();
@@ -1358,7 +1333,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             changed.has('baseNavigationUrl') ||
             changed.has('baseImageUrl') ||
             changed.has('loggedIn')) {
-            (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.reload();
+            this.infiniteScroller?.reload();
         }
         if (changed.has('baseQuery') ||
             changed.has('identifiers') ||
@@ -1385,6 +1360,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 });
             }
         }
+        if (changed.has('searchType') && this.searchType === SearchType.TV) {
+            this.applyDefaultTVSearchSort();
+        }
         if (changed.has('profileElement')) {
             this.applyDefaultProfileSort();
         }
@@ -1456,8 +1434,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 this.fetchManageableSearchResults();
             }
             else if (this.pageContext === 'search')
-                (_b = this.infiniteScroller) === null || _b === void 0 ? void 0 : _b.reload();
-            (_c = this.infiniteScroller) === null || _c === void 0 ? void 0 : _c.refreshAllVisibleCells();
+                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();
@@ -1472,21 +1450,19 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.ensureAvailableTilesDisplayed();
     }
     connectedCallback() {
-        var _a;
-        (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        super.connectedCallback?.();
         this.setupStateRestorationObserver();
         this.setupResizeObserver();
     }
     disconnectedCallback() {
-        var _a, _b;
         if (this.resizeObserver) {
             this.disconnectResizeObserver(this.resizeObserver);
         }
         if (this.boundNavigationHandler) {
             window.removeEventListener('popstate', this.boundNavigationHandler);
         }
-        (_a = this.leftColIntersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.facetsIntersectionObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this.leftColIntersectionObserver?.disconnect();
+        this.facetsIntersectionObserver?.disconnect();
         window.removeEventListener('resize', this.updateLeftColumnHeight);
     }
     handleResize(entry) {
@@ -1540,12 +1516,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Sets up listeners for events that may require updating the left column height.
      */
     setupLeftColumnScrollListeners() {
-        var _a;
         // 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 = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#left-column-scroll-sentinel');
+        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%
@@ -1562,8 +1537,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * don't need granular intersection thresholds for this.
      */
     setupFacetsScrollListeners() {
-        var _a;
-        const facetsSentinel = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#facets-scroll-sentinel');
+        const facetsSentinel = this.shadowRoot?.querySelector('#facets-scroll-sentinel');
         if (facetsSentinel) {
             this.facetsIntersectionObserver = new IntersectionObserver(this.updateFacetFadeOut);
             this.facetsIntersectionObserver.observe(facetsSentinel);
@@ -1694,7 +1668,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * fetching new results.
      */
     async handleQueryChange() {
-        var _a;
         // only reset if the query has actually changed
         if (!this.searchService ||
             this.dataSource.pageFetchQueryKey === this.previousQueryKey) {
@@ -1716,7 +1689,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             this.infiniteScroller.itemCount = this.estimatedTileCount;
             this.infiniteScroller.reload();
         }
-        if (this.withinCollection && ((_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim())) {
+        if (this.withinCollection && this.baseQuery?.trim()) {
             this.defaultSortField = SortField.relevance;
             this.defaultSortDirection = null;
         }
@@ -1743,19 +1716,18 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.restoreState();
     }
     restoreState() {
-        var _a, _b, _c, _d, _e;
         const restorationState = this.restorationStateHandler.getRestorationState();
         this.displayMode = restorationState.displayMode;
         if (!this.suppressURLSinParam && restorationState.searchType != null)
             this.searchType = restorationState.searchType;
-        this.selectedSort = (_a = restorationState.selectedSort) !== null && _a !== void 0 ? _a : SortField.default;
-        this.sortDirection = (_b = restorationState.sortDirection) !== null && _b !== void 0 ? _b : null;
-        this.selectedTitleFilter = (_c = restorationState.selectedTitleFilter) !== null && _c !== void 0 ? _c : null;
-        this.selectedCreatorFilter = (_d = restorationState.selectedCreatorFilter) !== null && _d !== void 0 ? _d : null;
+        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.currentPage = (_e = restorationState.currentPage) !== null && _e !== void 0 ? _e : 1;
+        this.currentPage = restorationState.currentPage ?? 1;
         this.minSelectedDate = restorationState.minSelectedDate;
         this.maxSelectedDate = restorationState.maxSelectedDate;
         if (this.currentPage > 1) {
@@ -1763,21 +1735,21 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
     }
     persistState() {
-        var _a, _b, _c, _d;
+        const isDefaultSort = this.selectedSort === this.defaultSortField;
         const restorationState = {
             displayMode: this.displayMode,
             searchType: this.suppressURLSinParam ? undefined : this.searchType,
-            selectedSort: this.selectedSort,
-            sortDirection: (_a = this.sortDirection) !== null && _a !== void 0 ? _a : undefined,
-            selectedFacets: (_b = this.selectedFacets) !== null && _b !== void 0 ? _b : getDefaultSelectedFacets(),
+            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: (_c = this.selectedTitleFilter) !== null && _c !== void 0 ? _c : undefined,
-            selectedCreatorFilter: (_d = this.selectedCreatorFilter) !== null && _d !== void 0 ? _d : undefined,
+            selectedTitleFilter: this.selectedTitleFilter ?? undefined,
+            selectedCreatorFilter: this.selectedCreatorFilter ?? undefined,
         };
         const persistOptions = {
             forceReplace: this.dataSourceInstallInProgress,
@@ -1807,7 +1779,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Fires analytics indicating the type of facet event that took place.
      */
     facetClickHandler({ detail: { facetType, bucket, negative }, }) {
-        var _a;
         let action;
         if (negative) {
             action =
@@ -1821,7 +1792,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                     ? analyticsActions.facetSelected
                     : analyticsActions.facetDeselected;
         }
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+        this.analyticsHandler?.sendEvent({
             category: this.searchContext,
             action,
             label: facetType,
@@ -1833,17 +1804,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             // without this setTimeout, Safari just pauses until the `fetchPage` is complete
             // then scrolls to the cell
             setTimeout(() => {
-                var _a;
                 this.isScrollingToCell = true;
-                (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.scrollToCell(cellIndexToScrollTo, true);
+                this.infiniteScroller?.scrollToCell(cellIndexToScrollTo, true);
                 // This timeout is to give the scroll animation time to finish
                 // then updating the infinite scroller once we're done scrolling
                 // There's no scroll animation completion callback so we're
                 // giving it 0.5s to finish.
                 setTimeout(() => {
-                    var _a;
                     this.isScrollingToCell = false;
-                    (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshAllVisibleCells();
+                    this.infiniteScroller?.refreshAllVisibleCells();
                     resolve();
                 }, 500);
             }, 0);
@@ -1854,8 +1823,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Currently equivalent to having a non-empty query.
      */
     get isRelevanceSortAvailable() {
-        var _a;
-        return !!((_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim());
+        return !!this.baseQuery?.trim();
     }
     /**
      * Sets the total number of tiles displayed in the infinite scroller.
@@ -1865,6 +1833,13 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             this.infiniteScroller.itemCount = count;
         }
     }
+    /**
+     * Applies the default sort options for the TV search results page
+     */
+    applyDefaultTVSearchSort() {
+        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
@@ -1873,7 +1848,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      *  - Weekly views for all other collections
      */
     applyDefaultCollectionSort(collectionInfo) {
-        var _a, _b, _c;
         if (this.baseQuery) {
             // If there's a query set, then we default to relevance sorting regardless of
             // the collection metadata-specified sort.
@@ -1883,13 +1857,13 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         // Favorite collections sort on Date Favorited by default.
         // Other collections fall back to sorting on weekly views.
-        const baseDefaultSort = ((_b = (_a = collectionInfo === null || collectionInfo === void 0 ? void 0 : collectionInfo.public_metadata) === null || _a === void 0 ? void 0 : _a.identifier) === null || _b === void 0 ? void 0 : _b.startsWith('fav-'))
+        const baseDefaultSort = collectionInfo?.public_metadata?.identifier?.startsWith('fav-')
             ? '-favoritedate'
             : '-week';
         // The collection metadata may override the default sorting with something else
-        const metadataSort = (_c = collectionInfo === null || collectionInfo === void 0 ? void 0 : collectionInfo.public_metadata) === null || _c === void 0 ? void 0 : _c['sort-by'];
+        const metadataSort = collectionInfo?.public_metadata?.['sort-by'];
         // Prefer the metadata-specified sort if one exists
-        const defaultSortToApply = metadataSort !== null && metadataSort !== void 0 ? metadataSort : baseDefaultSort;
+        const defaultSortToApply = metadataSort ?? baseDefaultSort;
         // Account for both -field and field:dir formats
         let [field, dir] = defaultSortToApply.split(':');
         if (field.startsWith('-')) {
@@ -1912,7 +1886,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     applyDefaultProfileSort() {
         if (this.profileElement) {
             const defaultSortField = defaultProfileElementSorts[this.profileElement];
-            this.defaultSortField = defaultSortField !== null && defaultSortField !== void 0 ? defaultSortField : SortField.weeklyview;
+            this.defaultSortField = defaultSortField ?? SortField.weeklyview;
         }
         else {
             this.defaultSortField = SortField.weeklyview;
@@ -1926,8 +1900,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * page are visible, but if the page is not currenlty visible, we don't need to reload
      */
     get currentVisiblePageNumbers() {
-        var _a, _b;
-        const visibleCells = (_b = (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.getVisibleCellIndices()) !== null && _b !== void 0 ? _b : [];
+        const visibleCells = this.infiniteScroller?.getVisibleCellIndices() ?? [];
         const visiblePages = new Set();
         visibleCells.forEach(cellIndex => {
             const visiblePage = Math.floor(cellIndex / this.pageSize) + 1;
@@ -1942,35 +1915,33 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const { withinCollection } = this;
         const topCollections = ['radio'];
         const isTopCollection = topCollections.includes(withinCollection);
-        const isSubCollection = topCollections.some(topCollxn => { var _a; return (_a = this.dataSource.parentCollections) === null || _a === void 0 ? void 0 : _a.includes(topCollxn); });
+        const isSubCollection = topCollections.some(topCollxn => this.dataSource.parentCollections?.includes(topCollxn));
         return isTopCollection || isSubCollection;
     }
     /**
      * Refreshes all visible result cells in the infinite scroller.
      */
     refreshVisibleResults() {
-        var _a;
-        (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshAllVisibleCells();
+        this.infiniteScroller?.refreshAllVisibleCells();
     }
     /**
      * Callback when a result is selected
      */
     resultSelected(event) {
-        var _a, _b, _c;
         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)
-                (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshCell(cellIndex);
+                this.infiniteScroller?.refreshCell(cellIndex);
             this.requestUpdate();
         }
-        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
+        this.analyticsHandler?.sendEvent({
             category: this.searchContext,
             action: analyticsActions.resultSelected,
             label: event.detail.mediatype,
         });
-        (_c = this.analyticsHandler) === null || _c === void 0 ? void 0 : _c.sendEvent({
+        this.analyticsHandler?.sendEvent({
             category: this.searchContext,
             action: analyticsActions.resultSelected,
             label: `page-${this.currentPage}`,
@@ -1989,28 +1960,28 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const isRadioSearch = this.searchType === SearchType.RADIO;
         const { isTVCollection, isRadioCollection } = this;
         const shouldUseLocalTime = isTVSearch || isRadioSearch || isTVCollection || isRadioCollection;
-        return html `
-      <tile-dispatcher
-        .collectionPagePath=${this.collectionPagePath}
-        .baseNavigationUrl=${this.baseNavigationUrl}
-        .baseImageUrl=${this.baseImageUrl}
-        .model=${model}
-        .tileDisplayMode=${this.displayMode}
-        .resizeObserver=${this.resizeObserver}
-        .collectionTitles=${this.dataSource.collectionTitles}
-        .sortParam=${this.sortParam}
-        .defaultSortParam=${this.defaultSortParam}
-        .creatorFilter=${this.selectedCreatorFilter}
-        .mobileBreakpoint=${this.mobileBreakpoint}
-        .loggedIn=${this.loggedIn}
-        .suppressBlurring=${this.shouldSuppressTileBlurring}
-        .isManageView=${this.isManageView}
-        ?showTvClips=${isTVSearch || isTVCollection}
-        ?enableHoverPane=${true}
-        ?useLocalTime=${shouldUseLocalTime}
-        @resultSelected=${(e) => this.resultSelected(e)}
-      >
-      </tile-dispatcher>
+        return html `
+      <tile-dispatcher
+        .collectionPagePath=${this.collectionPagePath}
+        .baseNavigationUrl=${this.baseNavigationUrl}
+        .baseImageUrl=${this.baseImageUrl}
+        .model=${model}
+        .tileDisplayMode=${this.displayMode}
+        .resizeObserver=${this.resizeObserver}
+        .collectionTitles=${this.dataSource.collectionTitles}
+        .sortParam=${this.sortParam}
+        .defaultSortParam=${this.defaultSortParam}
+        .creatorFilter=${this.selectedCreatorFilter}
+        .mobileBreakpoint=${this.mobileBreakpoint}
+        .loggedIn=${this.loggedIn}
+        .suppressBlurring=${this.shouldSuppressTileBlurring}
+        .isManageView=${this.isManageView}
+        ?showTvClips=${isTVSearch || isTVCollection}
+        ?enableHoverPane=${true}
+        ?useLocalTime=${shouldUseLocalTime}
+        @resultSelected=${(e) => this.resultSelected(e)}
+      >
+      </tile-dispatcher>
     `;
     }
     /**
@@ -2033,478 +2004,491 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * 4. Reloads the infinite scroller to display new results
      */
     fetchManageableSearchResults() {
-        var _a;
         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);
-            (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.reload();
+            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;
-        }
-
-        #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;
-        }
-
-        #facets-container {
-          position: relative;
-          max-height: 0;
-          transition: max-height 0.2s ease-in-out;
-          z-index: 1;
-          margin-top: var(--facetsContainerMarginTop, 5rem);
-          padding-bottom: 2rem;
-        }
-
-        .desktop #facets-container {
-          width: 18rem;
-        }
-
-        .mobile #facets-container {
-          overflow: hidden;
-          padding-bottom: 0;
-          padding-left: 10px;
-          padding-right: 10px;
-        }
-
-        #facets-container.expanded {
-          max-height: 2000px;
-        }
-
-        .results-section-heading {
-          margin: 0.5rem 0.3rem;
-          font-size: 2rem;
-          line-height: 25px;
-        }
-
-        #results-total {
-          display: flex;
-          align-items: baseline;
-        }
-
-        .mobile #results-total {
-          position: absolute;
-          right: 10px;
-        }
-
-        #big-results-count {
-          font-size: 2.4rem;
-          font-weight: 500;
-          margin-right: 5px;
-        }
-
-        .mobile #big-results-count {
-          font-size: 2rem;
-        }
-
-        #big-results-label {
-          font-size: 1.4rem;
-          font-weight: 200;
-        }
-
-        #list-header {
-          max-height: 4.2rem;
-        }
-
-        .loading-cover {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          z-index: 1;
-          padding-top: 50px;
-        }
-
-        #tile-blur-label {
-          display: flex;
-          align-items: center;
-          column-gap: 5px;
-        }
-
-        #tile-blur-check {
-          margin: 0 5px 0 0;
-          width: 15px;
-        }
-
-        circular-activity-indicator {
-          width: 30px;
-          height: 30px;
-        }
-
-        sort-filter-bar {
-          display: block;
-          margin-bottom: 4rem;
-        }
-
-        infinite-scroller {
-          display: block;
-          --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
-          --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
-        }
-
-        infinite-scroller.list-compact {
-          --infiniteScrollerCellMinWidth: var(
-            --collectionBrowserCellMinWidth,
-            100%
-          );
-          --infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
-          --infiniteScrollerCellMaxHeight: 56px;
-          --infiniteScrollerRowGap: 10px;
-        }
-
-        infinite-scroller.list-detail {
-          --infiniteScrollerCellMinWidth: var(
-            --collectionBrowserCellMinWidth,
-            100%
-          );
-          --infiniteScrollerCellMinHeight: var(
-            --collectionBrowserCellMinHeight,
-            5rem
-          );
-          /*
-            30px in spec, compensating for a -4px margin
-            to align title with top of item image
-            src/tiles/list/tile-list.ts
-          */
-          --infiniteScrollerRowGap: 34px;
-        }
-
-        .mobile infinite-scroller.list-detail {
-          --infiniteScrollerRowGap: 24px;
-        }
-
-        infinite-scroller.grid {
-          --infiniteScrollerCellMinWidth: var(
-            --collectionBrowserCellMinWidth,
-            17rem
-          );
-          --infiniteScrollerCellMaxWidth: var(
-            --collectionBrowserCellMaxWidth,
-            1fr
-          );
-        }
-
-        /* Allow tiles to shrink a bit further at smaller viewport widths */
-        @media screen and (max-width: 880px) {
-          infinite-scroller.grid {
-            --infiniteScrollerCellMinWidth: var(
-              --collectionBrowserCellMinWidth,
-              15rem
-            );
-          }
-        }
-        /* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
-        @media screen and (max-width: 360px) {
-          infinite-scroller.grid {
-            --infiniteScrollerCellMinWidth: var(
-              --collectionBrowserCellMinWidth,
-              12rem
-            );
-          }
-        }
-
-        infinite-scroller.hidden {
-          display: none;
-        }
+            css `
+        :host {
+          display: block;
+          --leftColumnWidth: 18rem;
+          --leftColumnPaddingTop: 2rem;
+          --leftColumnPaddingRight: 2.5rem;
+        }
+
+        #facet-top-view {
+          display: flex;
+        }
+
+        /**
+        * When page width resizes from desktop to mobile, use this class to
+        * disable expand/collapse transition when loading.
+        */
+        .preload * {
+          transition: none !important;
+          -webkit-transition: none !important;
+          -moz-transition: none !important;
+          -ms-transition: none !important;
+          -o-transition: none !important;
+        }
+
+        #content-container {
+          display: flex;
+        }
+
+        empty-placeholder {
+          margin-top: var(--placeholderMarginTop, 0);
+        }
+
+        .collapser-icon {
+          display: inline-block;
+        }
+
+        .collapser-icon svg {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          transition: transform 0.2s ease-out;
+        }
+
+        #mobile-filter-collapse {
+          width: 100%;
+        }
+
+        #mobile-filter-collapse > summary {
+          cursor: pointer;
+          list-style: none;
+        }
+
+        #mobile-filter-collapse[open] > summary {
+          margin-bottom: 10px;
+        }
+
+        #mobile-filter-collapse h2 {
+          display: inline-block;
+          margin: 0;
+          font-size: 2rem;
+        }
+
+        #mobile-filter-collapse[open] svg {
+          transform: rotate(90deg);
+        }
+
+        #content-container.mobile {
+          display: block;
+        }
+
+        #right-column {
+          flex: 1;
+          position: relative;
+          min-height: 90vh;
+          border-right: 1px solid rgb(232, 232, 232);
+          margin-top: var(--rightColumnMarginTop, 0);
+          padding-top: var(--rightColumnPaddingTop, 2rem);
+          background: #fff;
+        }
+
+        #left-column:not([hidden]) + #right-column {
+          border-left: 1px solid rgb(232, 232, 232);
+        }
+
+        #right-column.smart-results-spacing {
+          padding-top: 0.5rem;
+          border-right: none;
+          background: transparent;
+          min-width: 0;
+        }
+
+        #results {
+          background: #fff;
+          padding-left: 1rem;
+          padding-right: 1rem;
+        }
+
+        #right-column.smart-results-spacing #results {
+          border-radius: 10px 10px 0px 0px;
+          padding-top: 0.5rem;
+          margin-top: 1rem;
+        }
+
+        .mobile #right-column {
+          border-left: none;
+        }
+
+        .mobile #results {
+          padding: 5px 5px 0;
+        }
+
+        #left-column {
+          width: var(--leftColumnWidth, 18rem);
+          /* Prevents Safari from shrinking col at first draw */
+          min-width: var(--leftColumnWidth, 18rem);
+          padding-top: var(--leftColumnPaddingTop, 2rem);
+          /* Reduced padding by 0.2rem to add the invisible border in the rule below */
+          padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
+          border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
+          z-index: 1;
+        }
+
+        .desktop #left-column {
+          top: 0;
+          position: sticky;
+          height: calc(100vh - 2rem);
+          max-height: calc(100vh - 2rem);
+          overflow-x: hidden;
+          overflow-y: scroll;
+
+          /*
+          * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
+          * does at least give us a tiny bit of control over width & color.
+          */
+          scrollbar-width: thin;
+          scrollbar-color: transparent transparent;
+        }
+        .desktop #left-column:hover {
+          scrollbar-color: auto;
+        }
+        .desktop #left-column::-webkit-scrollbar {
+          appearance: none;
+          width: 6px;
+        }
+        .desktop #left-column::-webkit-scrollbar-button {
+          height: 3px;
+          background: transparent;
+        }
+        .desktop #left-column::-webkit-scrollbar-corner {
+          background: transparent;
+        }
+        .desktop #left-column::-webkit-scrollbar-thumb {
+          border-radius: 4px;
+        }
+        .desktop #left-column:hover::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.15);
+        }
+        .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
+          background: rgba(0, 0, 0, 0.2);
+        }
+        .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
+          background: rgba(0, 0, 0, 0.3);
+        }
+
+        #facets-bottom-fade {
+          background: linear-gradient(
+            to bottom,
+            #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;
+        }
       `,
         ];
     }
@@ -2695,27 +2679,6 @@ __decorate([
 __decorate([
     state()
 ], CollectionBrowser.prototype, "placeholderType", void 0);
-__decorate([
-    query('#content-container')
-], CollectionBrowser.prototype, "contentContainer", void 0);
-__decorate([
-    query('#left-column')
-], CollectionBrowser.prototype, "leftColumn", void 0);
-__decorate([
-    query('collection-facets')
-], CollectionBrowser.prototype, "collectionFacets", void 0);
-__decorate([
-    query('manage-bar')
-], CollectionBrowser.prototype, "manageBar", void 0);
-__decorate([
-    query('smart-facet-bar')
-], CollectionBrowser.prototype, "smartFacetBar", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], CollectionBrowser.prototype, "analyticsHandler", void 0);
-__decorate([
-    query('infinite-scroller')
-], CollectionBrowser.prototype, "infiniteScroller", void 0);
 __decorate([
     state()
 ], CollectionBrowser.prototype, "selectedTVNetwork", void 0);
@@ -2731,12 +2694,33 @@ __decorate([
 __decorate([
     state()
 ], CollectionBrowser.prototype, "loadingShows", void 0);
+__decorate([
+    query('#content-container')
+], CollectionBrowser.prototype, "contentContainer", void 0);
+__decorate([
+    query('#left-column')
+], CollectionBrowser.prototype, "leftColumn", void 0);
+__decorate([
+    query('collection-facets')
+], CollectionBrowser.prototype, "collectionFacets", void 0);
+__decorate([
+    query('manage-bar')
+], CollectionBrowser.prototype, "manageBar", void 0);
+__decorate([
+    query('smart-facet-bar')
+], CollectionBrowser.prototype, "smartFacetBar", void 0);
 __decorate([
     query('#tv-networks')
 ], CollectionBrowser.prototype, "tvNetworksDropdown", void 0);
 __decorate([
     query('#tv-shows')
 ], CollectionBrowser.prototype, "tvShowsDropdown", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], CollectionBrowser.prototype, "analyticsHandler", void 0);
+__decorate([
+    query('infinite-scroller')
+], CollectionBrowser.prototype, "infiniteScroller", void 0);
 CollectionBrowser = __decorate([
     customElement('collection-browser')
 ], CollectionBrowser);